diff --git a/src/assets/images/icon-a-1.png b/src/assets/images/icon-a-1.png
new file mode 100644
index 0000000..4331fdc
Binary files /dev/null and b/src/assets/images/icon-a-1.png differ
diff --git a/src/assets/images/log-v-bg.png b/src/assets/images/log-v-bg.png
new file mode 100644
index 0000000..5c5e9ac
Binary files /dev/null and b/src/assets/images/log-v-bg.png differ
diff --git a/src/assets/images/search-icon-1.png b/src/assets/images/search-icon-1.png
new file mode 100644
index 0000000..cbff8f1
Binary files /dev/null and b/src/assets/images/search-icon-1.png differ
diff --git a/src/assets/images/t-ico-2.png b/src/assets/images/t-ico-2.png
new file mode 100644
index 0000000..b6482a0
Binary files /dev/null and b/src/assets/images/t-ico-2.png differ
diff --git a/src/components/Correspondence/index.vue b/src/components/Correspondence/index.vue
index 03338e7..8e53007 100644
--- a/src/components/Correspondence/index.vue
+++ b/src/components/Correspondence/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="box-4-content">
+  <div class="box-4-content" >
     <div class="top-box">
       <div class="title">融合通信</div>
       <div class="icon-box flex">
@@ -51,11 +51,23 @@
   </div>
 </template>
 
-<script setup></script>
+<script setup>
+	import { fitChartSize } from '@/utils/dataUtil'
+	const props = defineProps({
+	  width: {
+	    type: Number,
+	    default: () => 0
+	  },
+	  id: {
+	    type: String,
+	    default: () => ''
+	  }
+	})
+</script>
 
 <style lang="scss" scoped>
   .box-4-content {
-    width: vw(260);
+    width: vw(315);
     height: vh(1060);
     background-image: url('/src/assets/images/rt-bg.png');
     background-repeat: no-repeat;
diff --git a/src/components/Header/index.vue b/src/components/Header/index.vue
index b6d37ee..8e807ae 100644
--- a/src/components/Header/index.vue
+++ b/src/components/Header/index.vue
@@ -18,7 +18,9 @@
       <span>{{ name }}</span>
     </div>
     <ul class="nav-right">
-      <li class="nav-right-item" v-for="(item, index) in navRight" :key="index">
+      <li class="nav-right-item" 
+		@click="handleNav(item, index)"
+	  v-for="(item, index) in navRight" :key="index">
         {{ item.name }}
       </li>
     </ul>
diff --git a/src/components/navLeft/index.vue b/src/components/navLeft/index.vue
new file mode 100644
index 0000000..73df1ac
--- /dev/null
+++ b/src/components/navLeft/index.vue
@@ -0,0 +1,246 @@
+<template>
+	<div class="left-nav">
+		<div class="top-box">
+			<!-- <div class="title">监控切换</div> -->
+			<div class="ul">
+				<div class="li active">异常告警</div>
+				<div class="li">景区入口</div>
+				<div class="li">核心路段</div>
+				<div class="li">公共交通</div>	
+				<div class="li">广场</div>	
+			</div>
+		</div>
+		<div class="bom-box">
+			<div class="title">
+				<span>检索</span>
+			</div>
+			
+			<div class="search-box flex">
+				<el-input
+				  placeholder="请输入内容"
+				  v-model="searchValue"
+				  clearable>
+				</el-input>
+				<img class="search-icon" src="/src/assets/images/search-icon-1.png" alt="" />
+			</div>
+			<div class="tree-box">
+			
+				<div class="tree-a">
+					<span class="name-1">核心点位</span>
+					<div class="tree-b">
+						<span class="name-2">摄像头1</span>
+						<span class="name-2 activee">摄像头1</span>
+						<span class="name-2">摄像头1</span>
+					</div>
+				</div>
+				<div class="tree-a">
+					<span class="name-1">核心点位</span>
+					<div class="tree-b" >
+						<span class="name-2">摄像头1</span>
+						<span class="name-2 activee">摄像头1</span>
+						<span class="name-2">摄像头1</span>
+					</div>
+				</div>
+				<div class="tree-a">
+					<span class="name-1">其他</span>
+					<div class="tree-b" v-if="false">
+						<span class="name-2">摄像头1</span>
+						<span class="name-2 activee">摄像头1</span>
+						<span class="name-2">摄像头1</span>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+<script setup>
+	
+</script>
+<style lang="scss" scoped>
+	//背景色设置为透明
+	:deep(.el-input__wrapper){
+	  background-color:rgba(0,0,0,0);
+	  border:none;
+	  box-shadow:none;
+	}
+	//输入框颜色
+	:deep(.el-input__inner) {
+	  background-color: rgba(0, 0, 0, 0) !important;
+	  color: #fff;
+	}
+	.left-nav{
+		margin-left:vw(10);
+		// margin-top:vh(35);
+		width:vw(250);
+	
+		.bom-box{
+			margin-top:vh(20);
+			.search-box{
+				background: rgba(217,217,217,0);
+				border-radius: 2px 2px 2px 2px;
+				border: 1px solid #0096FF;
+				margin:vw(20) auto;
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+				.search-icon{
+					width:vw(16);
+					height:vh(16);
+					margin:0 vw(20);
+				}
+			}
+		
+			.tree-box::before{
+				position:absolute;
+				top:vw(-8);
+				left:vw(-8);
+				content: '';
+				width:vw(12);
+				height:vw(12);
+				background-image: url('/src/assets/images/icon-a-1.png');
+				background-size:100% 100%;
+			}
+			.tree-box::after{
+				position:absolute;
+				content: '';
+				width:vw(12);
+				height:vw(12);
+				background-image: url('/src/assets/images/icon-a-1.png');
+				background-size:100% 100%;
+				bottom:vw(-4);
+				left:vw(-8);
+				
+			}
+			.tree-box{
+				margin-left:vw(10);
+				margin-top:vh(20);
+				position:relative;
+				border-left:vw(3) solid;
+				border-image: linear-gradient(311deg, rgba(0, 11, 36, 0), rgba(55, 216, 252, 1)) 1 1;
+				.tree-a{
+					.name-1{
+						padding:0 vw(20);
+						display: block;
+						font-weight: 400;
+						font-size: vw(15);
+						color: #FFFFFF;
+						height:vh(30);
+						line-height:vh(30);
+						text-align: left;
+						font-style: normal;
+						text-transform: none;
+					}
+					
+				}
+				.tree-b::before{
+					position:absolute;
+					top:vw(-8);
+					left:vw(-8);
+					content: '';
+					width:vw(12);
+					height:vw(12);
+					background-image: url('/src/assets/images/icon-a-1.png');
+					background-size:100% 100%;
+				}
+				// .tree-b::after{
+				// 	position:absolute;
+				// 	content: '';
+				// 	width:vw(12);
+				// 	height:vw(12);
+				// 	background-image: url('/src/assets/images/icon-a-1.png');
+				// 	background-size:100% 100%;
+				// 	bottom:vw(-4);
+				// 	left:vw(-8);
+					
+				// }
+				.tree-b{
+					// margin-top:vh(20);
+					position:relative;
+					border-left:vw(3) solid;
+					border-image: linear-gradient(311deg, rgba(0, 11, 36, 0), rgba(55, 216, 252, 1)) 1 1;
+					margin-left:vw(30);
+					margin-top:vh(10);
+					.name-2{
+						padding:0 vw(20);
+						display: block;
+						font-weight: 400;
+						font-size: vw(15);
+						color: #FFFFFF;
+						height:vh(30);
+						line-height:vh(30);
+						text-align: left;
+						font-style: normal;
+						text-transform: none;
+						
+					}
+				}
+			}
+			.tree-box .tree-a:first-child{
+				position:relative;
+				top:vh(-15);
+			}
+			.tree-box .tree-a:last-child{
+				position:relative;
+				bottom:vh(-12);
+			}
+			.title{
+				background-image: url('/src/assets/images/nav-l-t-bg.png');
+				background-size: 100% 100%;
+				
+				span{
+					margin-left:vw(30);
+					font-weight: 800;
+					font-size: vw(15);
+					line-height: vh(26);
+					text-align: center;
+					font-style: normal;
+					text-transform: none;
+					
+					background: linear-gradient(90deg, #FFFFFF 0%, #5CB5FF 100%);
+					-webkit-background-clip: text;
+					background-clip: text;
+					-webkit-text-fill-color: transparent;
+					color: transparent;
+				}
+				
+			}
+		}
+		.top-box{
+			text-align: left;
+			font-weight: 400;
+			font-size: vw(18);
+			color: rgba(255,255,255,0.7);
+			line-height: 21px;
+			text-align: left;
+			font-style: normal;
+			text-transform: none;
+			.title{
+				font-weight: 600;
+				font-size: vw(15);
+				text-align: left;
+				font-style: normal;
+				text-transform: none;
+				height:vh(35);
+				line-height: vh(34);
+				padding-left:vw(20);
+				// background: linear-gradient(90deg, #FFFFFF 0%, #75C1FF 100%);
+			}
+			.ul{
+				.li{
+					background: url('/src/assets/images/m-nav-bg-1.png');
+					background-size: 100% 100%;
+					width:vw(250);
+					height:vh(58);
+					line-height:vh(58);
+					text-align: center;
+					margin-bottom:vh(15);
+				}
+				.active{
+					background: url('/src/assets/images/m-nav-bg-2.png');
+					background-size: 100% 100%;
+					// width:vw(178);
+				}
+			}
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index a7209f1..4b45389 100644
--- a/src/main.js
+++ b/src/main.js
@@ -5,6 +5,7 @@ import router from './router'
 import '@/styles/reset.css'
 import '@/styles/common.scss'
 import vue3videoPlay from 'vue3-video-play' // 引入组件
+// package.json 改个配置 "module": "./dist/index.mjs",
 import 'vue3-video-play/dist/style.css' // 引入css
 const app = createApp(App)
 
diff --git a/src/router/index.js b/src/router/index.js
index d358c44..d7cf874 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -14,10 +14,15 @@ const router = createRouter({
 	  component: () => import('../views/monitor/index.vue')
 	},
 	{
-	  path: '/testing',
-	  name: 'testing',
+	  path: '/sceneTesting',
+	  name: 'sceneTesting',
 	  component: () => import('../views/testing/index.vue')
 	},
+	{
+	  path: '/roadTesting',
+	  name: 'roadTesting',
+	  component: () => import('../views/testing/road.vue')
+	},
     {
       path: '/scenic',
       name: 'scenic',
diff --git a/src/views/monitor/components/box-1.vue b/src/views/monitor/components/box-1.vue
deleted file mode 100644
index fcc2564..0000000
--- a/src/views/monitor/components/box-1.vue
+++ /dev/null
@@ -1,94 +0,0 @@
-<template>
-  <div class="box-1">
-    <div class="title">核心景区视频</div>
-    <ul class="list">
-      <li
-        class="item"
-        :style="{ backgroundImage: `url(${index == 0 ? item1 : item2})` }"
-        v-for="(item, index) in 10"
-        :key="index"
-      >
-        <p class="item-title">三峡之巅-最新异常名称</p>
-        <!-- <img class="item-img" src="@/assets/images/img-1.png" alt="" /> -->
-      </li>
-    </ul>
-  </div>
-</template>
-
-<script setup>
-  import item1 from '@/assets/images/item-1.png'
-  import item2 from '@/assets/images/item-2.png'
-
-  console.log(item1, 'item1')
-</script>
-
-<style lang="scss" scoped>
-  .box-1 {
-    margin: vh(10);
-    width: vw(326);
-    border-radius: vw(2);
-    background-image: url('@/assets/images/bg-1.png');
-    background-size: 100% 100%;
-
-    .title {
-      width: vw(260);
-      height: vh(26);
-      text-align: center;
-      line-height: vh(26);
-      margin-left: vw(32.5);
-      font-size: vw(16);
-      font-weight: 800;
-      color: #fff;
-      background-image: url('@/assets/images/title-1.png');
-      background-size: 100% 100%;
-    }
-
-    .list {
-      overflow-y: auto;
-      overflow-x: hidden;
-      height: vh(1026);
-      padding: vw(8);
-      /* 滚动条整体样式 */
-      &::-webkit-scrollbar {
-        width: vw(0); /* 滚动条的宽度 */
-      }
-
-      /* 滚动条轨道 */
-      &::-webkit-scrollbar-track {
-        background: #f1f1f1; /* 轨道的背景色 */
-      }
-
-      /* 滚动条滑块 */
-      &::-webkit-scrollbar-thumb {
-        background: #888; /* 滑块的背景色 */
-        border-radius: 5px; /* 滑块的圆角 */
-      }
-
-      /* 当鼠标悬停在滚动条上时滑块的样式 */
-      &::-webkit-scrollbar-thumb:hover {
-        background: #555; /* 滑块的背景色 */
-      }
-    }
-
-    .item {
-      margin-bottom: vh(13);
-      background-size: 100% 100%;
-      &-title {
-        margin-bottom: vh(6);
-        margin-left: vw(45);
-        color: #fff;
-        font-size: vw(16);
-        height: vh(24);
-        line-height: vh(24);
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-      }
-      &-img {
-        width: 100%;
-        height: vh(164);
-        display: block;
-      }
-    }
-  }
-</style>
diff --git a/src/views/monitor/components/box-2.vue b/src/views/monitor/components/box-2.vue
index 6af9fd2..4d5eab3 100644
--- a/src/views/monitor/components/box-2.vue
+++ b/src/views/monitor/components/box-2.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="box-2">
     <div class="header">
-      <div class="title"> 交通信息 </div>
+      <div class="title"> <span>交通信息</span>  </div>
     </div>
     <div class="flex pt-20 p-box">
       <div class="item core">
@@ -18,7 +18,7 @@
       </div>
     </div>
 	<div class="header">
-	  <div class="title"> 景区信息 </div>
+	  <div class="title"> <span>景区信息</span> </div>
 	</div>
 	<div class="flex-four">
 		<div class="item item1">
@@ -60,7 +60,14 @@
     <div class="flex pt-20 p-box">
       <div class="box">
         <div class="title-3"><span>异常告警</span></div>
-        <div class="pt-20">
+        <div class="pt-20 chart-p">
+			<div class="check-box">
+			   <el-select v-model="selectSpot" slot="prepend" placeholder="选择景区">
+				  <el-option label="餐厅名" value="1"></el-option>
+				  <el-option label="订单号" value="2"></el-option>
+				  <el-option label="用户电话" value="3"></el-option>
+				</el-select>
+			</div>
 		  <v-chart class="line-chart" :option="optionLine" autoresize />
         </div>
       </div>
@@ -82,7 +89,7 @@
       </div>
     </div>
 	<div class="header">
-	  <div class="title"> 景区信息 </div>
+	  <div class="title"> <span>交通信息</span> </div>
 	</div>
 	<div class="flex-four">
 		<div class="item item1">
@@ -124,8 +131,14 @@
 	<div class="flex pt-20 p-box">
 	  <div class="box">
 	    <div class="title-3"><span>异常告警</span></div>
-	    <div class="pt-20">
-	      <!-- <Line :width="370" :height="180" id="line" /> -->
+	    <div class="pt-20 chart-p">
+	      <div class="check-box">
+	         <el-select v-model="selectSpot" slot="prepend" placeholder="选择景区">
+	      	  <el-option label="餐厅名" value="1"></el-option>
+	      	  <el-option label="订单号" value="2"></el-option>
+	      	  <el-option label="用户电话" value="3"></el-option>
+	      	</el-select>
+	      </div>
 		  <v-chart class="line-chart"  :option="optionLine" autoresize />
 	    </div>
 	  </div>
@@ -177,6 +190,7 @@
   ]);
   
   provide(THEME_KEY, 'dark');
+  let selectSpot = ref('')
   const option1 = ref({
   	backgroundColor:'transparent',
 	  tooltip: {
@@ -328,6 +342,16 @@
 </script>
 
 <style scoped lang="scss">
+	:deep(.el-select__wrapper){
+		background:linear-gradient( 270deg, rgba(8,41,86,0.16) 0%, #0B61B4 100%);
+		border:none;
+		box-shadow:none;
+		border-top-left-radius: vh(30);
+		border-bottom-left-radius: vh(30);
+		font-size:vw(14);
+		color:#fff;
+		
+	}
 	.line-chart{
 		width:100%;
 		height:vh(200);
@@ -343,6 +367,16 @@
 	.p-box{
 		padding-top:vh(10);
 		justify-content: space-between;
+		.chart-p{
+			position:relative;
+			.check-box{
+				position: absolute;
+				right:vw(30);
+				top:vh(10);
+				width:vw(120);
+				z-index: 19;
+			}
+		}
 	}
 	.h-flex{
 		display: flex;
@@ -476,6 +510,14 @@
         justify-content: center;
         background-image: url('@/assets/images/title-4.png');
         background-size: 100% 100%;
+		span{
+			font-weight: 800;
+			color: transparent;
+			-webkit-background-clip: text;
+			background-clip: text;
+			-webkit-text-fill-color: transparent;
+			background-image: linear-gradient(to bottom, #ffffff 0%, #87c9ff 100%);
+		}
       }
       .more {
         position: absolute;
diff --git a/src/views/monitor/components/box-3.vue b/src/views/monitor/components/box-3.vue
index a1fc40c..8a96e7f 100644
--- a/src/views/monitor/components/box-3.vue
+++ b/src/views/monitor/components/box-3.vue
@@ -1,35 +1,20 @@
 <template>
 	<!-- 视频 -->
 	<div class="box-3-content">
+		<navLeft></navLeft>
 		
-		<div class="left-nav">
-			<div class="top-box">
-				<!-- <div class="title">监控切换</div> -->
-				<div class="ul">
-					<div class="li active">异常告警</div>
-					<div class="li">景区入口</div>
-					<div class="li">核心路段</div>
-					<div class="li">公共交通</div>	
-					<div class="li">广场</div>	
-				</div>
-			</div>
-			<div class="bom-box">
-				<div class="title">
-					<span>检索</span>
-				</div>
-			</div>
-		</div>
 		<!-- 视频 -->
 		<div class="video-box">
-			<div v-if="videoLog == 1" class="v-item " :class="index==0?'v-error-bg':''" v-for="(item,index) in 15">
-				  <block  @click="handleItemVideo">
+			<div class="flex video-one-1" v-if="videoLog == 1">
+				<div @click="handleItemVideo" class="v-item " :class="index==0?'v-error-bg':''" v-for="(item,index) in 15">
 					  <vue3VideoPlay  v-bind="options"/>
-				  </block>
+				</div>
 					
 			</div>
 			
 			<div class="video-live flex" v-if="videoLog==2">
-				<div class="video-lt">
+				<div class="video-lt v-error-bg">
+					<div class="desc">核心路段：这是一条信息说明</div>
 					<vue3VideoPlay  v-bind="options"/>
 				</div>
 				<div class="video-rt">
@@ -38,6 +23,7 @@
 					</div>
 					<div class="rt-v-box">
 						<div class="rt-video v-error-bg" v-for="item in 8">
+							<div class="desc">核心路段：这是一条信息说明</div>
 							<vue3VideoPlay  v-bind="options"/>
 						</div>
 						
@@ -51,6 +37,8 @@
 
 <script setup>
 	import { fitChartSize } from '@/utils/dataUtil'
+	import navLeft from '@/components/navLeft/index.vue'
+	let searchValue = ref('')
 	const options = reactive({
 	    src: "http://192.168.1.60:8080/live/340200000013200000011_34020000001320000001/hls.m3u8", //视频源
 	    type: 'm3u8', //视频类型
@@ -86,27 +74,69 @@
 	
 </script>
 <style lang="scss" scoped>
+	//背景色设置为透明
+	:deep(.el-input__wrapper){
+	  background-color:rgba(0,0,0,0);
+	  border:none;
+	  box-shadow:none;
+	}
+	//输入框颜色
+	:deep(.el-input__inner) {
+	  background-color: rgba(0, 0, 0, 0) !important;
+	  color: #fff;
+	}
 	.box-3-content{
-		width:vw(2410);
+		width:vw(2356);
 		height:vh(965);
-		// background-image: url('/src/assets/images/monotir-bg-1.png');
-		background-size: 100% 100%;
+
 		margin-top: vh(120);
 		display: flex;
 		.video-box{
 			flex:1;
-			// padding:vh(40) vw(20);
 			display:flex;
-			flex-wrap: wrap;
-			padding-top:0;
-			margin-left:vw(20);
+			.video-one-1{
+				background-image: url('/src/assets/images/log-v-bg.png');
+				background-size: 100% 100%;
+				flex-wrap: wrap;
+				padding-top:0;
+				padding:vh(30) vw(20);
+				margin-left:vw(20);
+			}
 			.video-live{
 				justify-content: space-between;
+				margin-left:vw(10) ;
 				.video-lt{
-					width:vw(1700);
+					width:vw(1666);
 					height:vh(950);
 					background-image: url('/src/assets/images/one-video-bg.png');
 					background-size: 100% 100%;
+					padding:vh(40) vw(50);
+					position:relative;
+					.desc{
+						position:absolute;
+						// width:100%;
+						left:vw(50);
+						right:vw(50);
+						top:40(vh);
+						z-index: 9;
+						background: rgba(4,30,69,0.5);
+						border-radius: 0px 0px 0px 0px;
+						text-align: center;
+						font-weight: 400;
+						font-size: vw(14);
+						color: #FFFFFF;
+						padding:vw(20);
+						text-align: left;
+						font-style: normal;
+						text-transform: none;
+					}
+				}
+				.v-error-bg{
+					// background-image: url('/src/assets/images/v-item-bg-1.png');
+					// background-size: 100% 100%;
+					.desc{
+						background: rgba(226,27,27,0.5);
+					}
 				}
 				.video-rt{
 					width:vw(400);
@@ -153,15 +183,36 @@
 						padding:vw(20);
 						box-sizing: border-box;
 						margin-bottom:vh(2);
+						position:relative;
+						.desc{
+							position:absolute;
+							width:100%;
+							left:0;
+							bottom:0;
+							z-index: 9;
+							background: rgba(4,30,69,0.5);
+							border-radius: 0px 0px 0px 0px;
+							text-align: center;
+							font-weight: 400;
+							font-size: vw(14);
+							color: #FFFFFF;
+							padding:vw(20);
+							text-align: left;
+							font-style: normal;
+							text-transform: none;
+						}
 					}
 					.v-error-bg{
 						background-image: url('/src/assets/images/v-item-bg-1.png');
 						background-size: 100% 100%;
+						.desc{
+							background: rgba(226,27,27,0.5);
+						}
 					}
 				}
 			}
 			.v-item{
-				width:vw(420);
+				width:vw(400);
 				height:vh(300);
 				background-image: url('/src/assets/images/v-item-bg.png');
 				background-size: 100% 100%;
@@ -174,71 +225,6 @@
 				background-size: 100% 100%;
 			}
 		}
-		.left-nav{
-			margin-left:vw(10);
-			// margin-top:vh(35);
-			width:vw(250);
-			.bom-box{
-				margin-top:vh(20);
-				.title{
-					background-image: url('/src/assets/images/nav-l-t-bg.png');
-					background-size: 100% 100%;
-					
-					span{
-						margin-left:vw(30);
-						font-weight: 800;
-						font-size: vw(15);
-						line-height: vh(26);
-						text-align: center;
-						font-style: normal;
-						text-transform: none;
-						
-						background: linear-gradient(90deg, #FFFFFF 0%, #5CB5FF 100%);
-						-webkit-background-clip: text;
-						background-clip: text;
-						-webkit-text-fill-color: transparent;
-						color: transparent;
-					}
-					
-				}
-			}
-			.top-box{
-				text-align: left;
-				font-weight: 400;
-				font-size: vw(18);
-				color: rgba(255,255,255,0.7);
-				line-height: 21px;
-				text-align: left;
-				font-style: normal;
-				text-transform: none;
-				.title{
-					font-weight: 600;
-					font-size: vw(15);
-					text-align: left;
-					font-style: normal;
-					text-transform: none;
-					height:vh(35);
-					line-height: vh(34);
-					padding-left:vw(20);
-					// background: linear-gradient(90deg, #FFFFFF 0%, #75C1FF 100%);
-				}
-				.ul{
-					.li{
-						background: url('/src/assets/images/m-nav-bg-1.png');
-						background-size: 100% 100%;
-						width:vw(250);
-						height:vh(58);
-						line-height:vh(58);
-						text-align: center;
-						margin-bottom:vh(15);
-					}
-					.active{
-						background: url('/src/assets/images/m-nav-bg-2.png');
-						background-size: 100% 100%;
-						// width:vw(178);
-					}
-				}
-			}
-		}
+		
 	}
 </style>
\ No newline at end of file
diff --git a/src/views/monitor/components/box-4.vue b/src/views/monitor/components/box-4.vue
deleted file mode 100644
index d429aeb..0000000
--- a/src/views/monitor/components/box-4.vue
+++ /dev/null
@@ -1,177 +0,0 @@
-<template>
-	<div class="box-4-content">
-		<div class="top-box">
-			<div class="title">融合通信</div>
-			<div class="icon-box flex">
-				<div class="icon">
-					<img src="/src/assets/images/r-icon-1.png" alt="" />
-					白帝城
-				</div>
-				<div class="icon"><img src="/src/assets/images/r-icon-2.png" alt="" />三峡之颠</div>
-				<div class="icon"><img src="/src/assets/images/r-icon-3.png" alt="" />龙桥河</div>
-				<div class="icon"><img src="/src/assets/images/r-icon-4.png" alt="" />消防队</div>
-				<div class="icon"><img src="/src/assets/images/r-icon-5.png" alt="" />文旅城</div>
-				<div class="icon"><img src="/src/assets/images/r-icon-6.png" alt="" />交通城</div>
-			</div>
-		</div>
-		<div class="bom-box">
-			<div class="title">
-				<span>最近联系</span>
-			</div>
-			<table class="table">
-				<tr class="tr-th">
-					<th>人员姓名</th>
-					<th>部门</th>
-					<th>职位</th>
-					<th>时间</th>
-				</tr>
-				 <tr class="tr-td">
-				    <td>January</td>
-				    <td>$100</td>
-					<td>January</td>
-					<td>$100</td>
-				  </tr>
-				  <tr class="tr-td">
-				    <td>February</td>
-				    <td>$80</td>
-					<td>February</td>
-					<td>$80</td>
-				  </tr>
-				  <tr class="tr-td">
-				    <td>February</td>
-				    <td>$80</td>
-					<td>February</td>
-					<td>$80</td>
-				  </tr>
-				  <tr class="tr-td">
-				    <td>February</td>
-				    <td>$80</td>
-					<td>February</td>
-					<td>$80</td>
-				  </tr>
-				  
-			</table>
-		</div>
-	</div>
-</template>
-
-<script setup>
-	
-</script>
-
-<style lang="scss" scoped>
-	.box-4-content{
-		width:vw(317);
-		height:vh(1062);
-		background-image: url('/src/assets/images/rt-bg.png');
-		background-repeat: no-repeat;
-		background-size: 100% 100%;
-		margin-top:vh(10);
-		margin-left:vw(10);
-		position: relative;
-		z-index: 999;
-		.bom-box{
-			.table{
-				width:100%;
-				margin-top:vh(5);
-				.tr-th{
-					background: linear-gradient( 180deg, rgba(0,99,255,0) 0%, #0063FF 100%);
-					border-radius: 0px 0px 0px 0px;
-					// border: 1px solid;
-					border-image: linear-gradient(180deg, rgba(0, 150, 255, 0), rgba(0, 150, 255, 1)) 1 1;
-					font-weight: 400;
-					font-size: vw(12);
-					color: #0096FF;
-					line-height: vh(14);
-					text-align: left;
-					font-style: normal;
-					text-transform: none;
-					
-					th{
-						padding:vw(5);
-					}
-					
-				}
-				.tr-td{
-					font-weight: 400;
-					font-size: vw(14);
-					color: #F1F7FF;
-					line-height: vh(16);
-					text-align: left;
-					font-style: normal;
-					text-transform: none;
-					
-					td{
-						padding:vh(5) vw(10)
-					}
-				}
-				.tr-td:nth-child(odd){
-					background: linear-gradient( 90deg, rgba(0,150,255,0) 0%, rgba(0,150,255,0.22) 100%);
-				}
-			}
-			.title{
-				background-image: url('/src/assets/images/nav-l-t-bg.png');
-				background-size: 100% 100%;
-				
-				span{
-					margin-left:vw(30);
-					font-weight: 800;
-					font-size: vw(15);
-					line-height: vh(26);
-					text-align: center;
-					font-style: normal;
-					text-transform: none;
-					
-					background: linear-gradient(90deg, #FFFFFF 0%, #5CB5FF 100%);
-					-webkit-background-clip: text;
-					background-clip: text;
-					-webkit-text-fill-color: transparent;
-					color: transparent;
-				}
-				
-			}
-		}
-		.top-box{
-			width:100%;
-			height:vh(500);
-			.icon-box{
-				justify-content: center;
-				font-family: Inter, Inter;
-				font-weight: 400;
-				font-size: vw(14);
-				color: #FFFFFF;
-				line-height: vh(16);
-				text-align: center;
-				font-style: normal;
-				text-transform: none;
-				flex-wrap: wrap;
-				.icon{
-					display: block;
-					margin:vh(20) auto;
-					width:vw(86);
-					height:vh(104);
-					img{
-						width:vw(86);
-						height:vh(104);
-					}
-				}
-			}
-			.title{
-				font-weight: 800;
-				font-size: vw(16);
-				line-height: vh(26);
-				text-align: center;
-				font-style: normal;
-				text-transform: none;
-				
-				background: linear-gradient(90deg, #FFFFFF 0%, #5CB5FF 100%);
-				-webkit-background-clip: text;
-				background-clip: text;
-				-webkit-text-fill-color: transparent;
-				color: transparent;
-				
-			}
-		}
-	}
-
-</style>
diff --git a/src/views/monitor/index.vue b/src/views/monitor/index.vue
index 5ed24be..b58e8c6 100644
--- a/src/views/monitor/index.vue
+++ b/src/views/monitor/index.vue
@@ -1,84 +1,120 @@
 <template>
-  <main class="wrapper">
-    <CoreVideo />
-	<box2 />
-	<box3 />
-	<Header title="监控大屏" is-skip :nav-left="navLeft" :nav-right="navRight" />
-    <Correspondence />
-  </main>
+	<main class="wrapper">
+		<CoreVideo />
+		<box2 />
+		<box3 />
+		<Header title="监控大屏" is-skip :nav-left="navLeft" :nav-right="navRight" />
+		<Correspondence />
+	</main>
 </template>
 
 <script setup>
-  import box3 from './components/box-3.vue'
-  import box2 from './components/box-2.vue'
-  import box5 from './components/box-5.vue'
-  const navLeft = [{ name: '奉节县' }, { name: '三峡之巅', path: '/scenic' }, { name: '白帝城' },{ name: '龙河桥' }]
-  const navRight = [{ name: '路段' }, { name: '路段' }, { name: '路段' }, { name: '路段' }]
-  onMounted(() => {})
+	import box3 from './components/box-3.vue'
+	import box2 from './components/box-2.vue'
+	const navLeft = [{
+			name: '奉节县',
+			path: '/sceneTesting'
+		},
+		{
+			name: '三峡之巅',
+			path: '/sceneTesting'
+		},
+		{
+			name: '白帝城',
+			path: '/sceneTesting'
+		}, {
+			name: '龙河桥',
+			path: '/sceneTesting'
+		}
+	]
+	const navRight = [{
+			name: '路段',
+			path: '/roadTesting'
+		},
+		{
+			name: '路段',
+			path: '/roadTesting'
+		},
+		{
+			name: '路段',
+			path: '/roadTesting'
+		},
+		{
+			name: '路段',
+			path: '/roadTesting'
+		}
+	]
+	onMounted(() => {})
 </script>
 
 <style lang="scss" scoped>
-  .wrapper {
-    display: flex;
-    width: 100vw;
-    height: 100vh;
-    overflow: hidden;
-    background-color: #0a254b;
-    .header {
-      position: absolute;
-      left: vw(326);
-      .title {
-        width: vw(3133);
-        height: vh(120);
-        font-size: vw(48);
-        font-weight: 800;
-        text-align: center;
-        padding-top: vh(20);
-        color: #fff;
-        letter-spacing: vw(10);
-        box-sizing: border-box;
-        text-shadow: 0px 4px 7px rgba(0, 150, 255, 0.75);
-        background-image: url('@/assets/images/title.png');
-        background-size: 100% 100%;
-      }
-      .nav-left {
-        position: absolute;
-        left: vw(380);
-        top: vh(34);
-        display: flex;
-        &-item {
-          cursor: pointer;
-          margin-left: vh(-10);
-          width: vw(210);
-          height: vh(56);
-          padding-top: vh(10);
-          font-weight: 600;
-          font-size: vw(28);
-          text-align: center;
-          color: rgba(208, 236, 255, 0.9);
-          background-image: url('@/assets/images/title-2.png');
-          background-size: 100% 100%;
-        }
-      }
-      .nav-right {
-        position: absolute;
-        right: vw(424);
-        top: vh(34);
-        display: flex;
-        &-item {
-          cursor: pointer;
-          margin-right: vh(-10);
-          width: vw(210);
-          height: vh(56);
-          padding-top: vh(10);
-          font-weight: 600;
-          font-size: vw(28);
-          text-align: center;
-          color: rgba(208, 236, 255, 0.9);
-          background-image: url('@/assets/images/title-3.png');
-          background-size: 100% 100%;
-        }
-      }
-    }
-  }
-</style>
+	.wrapper {
+		display: flex;
+		width: 100vw;
+		height: 100vh;
+		overflow: hidden;
+		background-color: #0a254b;
+
+		.header {
+			position: absolute;
+			left: vw(326);
+
+			.title {
+				width: vw(3133);
+				height: vh(120);
+				font-size: vw(48);
+				font-weight: 800;
+				text-align: center;
+				padding-top: vh(20);
+				color: #fff;
+				letter-spacing: vw(10);
+				box-sizing: border-box;
+				text-shadow: 0px 4px 7px rgba(0, 150, 255, 0.75);
+				background-image: url('@/assets/images/title.png');
+				background-size: 100% 100%;
+			}
+
+			.nav-left {
+				position: absolute;
+				left: vw(380);
+				top: vh(34);
+				display: flex;
+
+				&-item {
+					cursor: pointer;
+					margin-left: vh(-10);
+					width: vw(210);
+					height: vh(56);
+					padding-top: vh(10);
+					font-weight: 600;
+					font-size: vw(28);
+					text-align: center;
+					color: rgba(208, 236, 255, 0.9);
+					background-image: url('@/assets/images/title-2.png');
+					background-size: 100% 100%;
+				}
+			}
+
+			.nav-right {
+				position: absolute;
+				right: vw(424);
+				top: vh(34);
+				display: flex;
+
+				&-item {
+					cursor: pointer;
+					margin-right: vh(-10);
+					width: vw(210);
+					height: vh(56);
+					padding-top: vh(10);
+					font-weight: 600;
+					font-size: vw(28);
+					text-align: center;
+					color: rgba(208, 236, 255, 0.9);
+					background-image: url('@/assets/images/title-3.png');
+					background-size: 100% 100%;
+				}
+			}
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/src/views/testing/components/box-1.vue b/src/views/testing/components/box-1.vue
deleted file mode 100644
index fcc2564..0000000
--- a/src/views/testing/components/box-1.vue
+++ /dev/null
@@ -1,94 +0,0 @@
-<template>
-  <div class="box-1">
-    <div class="title">核心景区视频</div>
-    <ul class="list">
-      <li
-        class="item"
-        :style="{ backgroundImage: `url(${index == 0 ? item1 : item2})` }"
-        v-for="(item, index) in 10"
-        :key="index"
-      >
-        <p class="item-title">三峡之巅-最新异常名称</p>
-        <!-- <img class="item-img" src="@/assets/images/img-1.png" alt="" /> -->
-      </li>
-    </ul>
-  </div>
-</template>
-
-<script setup>
-  import item1 from '@/assets/images/item-1.png'
-  import item2 from '@/assets/images/item-2.png'
-
-  console.log(item1, 'item1')
-</script>
-
-<style lang="scss" scoped>
-  .box-1 {
-    margin: vh(10);
-    width: vw(326);
-    border-radius: vw(2);
-    background-image: url('@/assets/images/bg-1.png');
-    background-size: 100% 100%;
-
-    .title {
-      width: vw(260);
-      height: vh(26);
-      text-align: center;
-      line-height: vh(26);
-      margin-left: vw(32.5);
-      font-size: vw(16);
-      font-weight: 800;
-      color: #fff;
-      background-image: url('@/assets/images/title-1.png');
-      background-size: 100% 100%;
-    }
-
-    .list {
-      overflow-y: auto;
-      overflow-x: hidden;
-      height: vh(1026);
-      padding: vw(8);
-      /* 滚动条整体样式 */
-      &::-webkit-scrollbar {
-        width: vw(0); /* 滚动条的宽度 */
-      }
-
-      /* 滚动条轨道 */
-      &::-webkit-scrollbar-track {
-        background: #f1f1f1; /* 轨道的背景色 */
-      }
-
-      /* 滚动条滑块 */
-      &::-webkit-scrollbar-thumb {
-        background: #888; /* 滑块的背景色 */
-        border-radius: 5px; /* 滑块的圆角 */
-      }
-
-      /* 当鼠标悬停在滚动条上时滑块的样式 */
-      &::-webkit-scrollbar-thumb:hover {
-        background: #555; /* 滑块的背景色 */
-      }
-    }
-
-    .item {
-      margin-bottom: vh(13);
-      background-size: 100% 100%;
-      &-title {
-        margin-bottom: vh(6);
-        margin-left: vw(45);
-        color: #fff;
-        font-size: vw(16);
-        height: vh(24);
-        line-height: vh(24);
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-      }
-      &-img {
-        width: 100%;
-        height: vh(164);
-        display: block;
-      }
-    }
-  }
-</style>
diff --git a/src/views/testing/components/box-2.vue b/src/views/testing/components/box-2.vue
index e578304..95ecb5e 100644
--- a/src/views/testing/components/box-2.vue
+++ b/src/views/testing/components/box-2.vue
@@ -1,208 +1,120 @@
 <template>
-  <div class="box-2">
-    <div class="header">
-      <div class="title"> 交通信息 </div>
-    </div>
-    <div class="flex pt-20 p-box">
-      <div class="item core">
-        <span class="title-1">全县景区数</span>
-        <div class="flex align-end color1"> <countup endVal="895" /><span class="unit"></span></div>
-      </div>
-      <div class="item queue">
-        <span class="title-1">核心景区数</span>
-        <div class="flex align-end color2"> <countup endVal="895" /><span class="unit"></span></div>
-      </div>
-      <div class="item congestion">
-        <span class="title-1">低感景区总数</span>
-        <div class="flex align-end color3"> <countup endVal="895" /><span class="unit"></span></div>
-      </div>
-    </div>
-	<div class="header">
-	  <div class="title"> 景区信息 </div>
-	</div>
-	<div class="flex-four">
-		<div class="item item1">
-			<div class="box1">
-				核心路段监控点位
-				<div class="item-num color1"> <countup endVal="895" /><span class="unit"></span></div>
-			</div>
-		
+	<!-- 安全检测 -->
+	<div class="box-detection">
+		<!-- 地图 -->
+		<div class="detection-top">
+			<Map />
 		</div>
-		<div class="item item2">
-			<div class="box1">
-				核心景区分析点位
-				<div class="item-num color1"> <countup endVal="895" /><span class="unit"></span></div>
+		<div class="detection-bom flex">
+			<!-- 数据 -->
+			<div class="d-left">
+				<div class="t-title">
+					<span>监控点位统计</span>
+				</div>
+				<div class="t-census flex">
+					<img class="t-icon" src="@/assets/images/t-ico-0.png" alt="" />
+					<div class="item">
+						监控点位 <div class="color1"><countup endVal="895" /></div>
+					</div>
+					<div class="item">
+						核心点位 <div class="color1"><countup endVal="895" /></div>
+					</div>
+					<div class="item">
+						拥堵次数 <div class="color2"><countup endVal="895" /></div>
+					</div>
+				</div>
+				<div class="box">
+				  <div class="title-3"><span>异常告警占比</span></div>
+				  <div class="pt-20 h-flex">
+				  	<div class="left">
+				  		<v-chart class="chart" :option="option1" autoresize />
+				  	</div>
+				  <!-- 	<div class="right">
+				  		<div class="li li-1"><span class="rk-img" >1</span> 核心监控1</div>
+				  		<div class="li li-2"><span class="rk-img" >1</span>核心监控1</div>
+				  		<div class="li li-3"><span class="rk-img" >1</span>核心监控1</div>
+				  		<div class="li"><span class="rk-img" >1</span>核心监控1</div>
+				  		<div class="li"><span class="rk-img" >1</span>核心监控1</div>
+				  		<div class="li"><span class="rk-img" >1</span>核心监控</div>
+				  	</div> -->
+				  </div>
+				</div>
 			</div>
-			
-		</div>
-		<div class="item item3">
-			<div class="box1">
-				异常点位
-				<div class="item-num color2"> <countup endVal="895" /><span class="unit"></span></div>
+			<div class="d-right">
+				<div class="t-title">
+					<span>交通信息</span>
+				</div>
+				<div class="t-census flex">
+					<img class="t-icon" src="@/assets/images/t-ico-1.png" alt="" />
+					<div class="item">
+						监控点位 <div class="color1 "><countup endVal="895" /></div>
+					</div>
+					<div class="item">
+						核心点位 <div class="color1 "><countup endVal="895" /></div>
+					</div>
+					<div class="item">
+						拥堵次数 <div class="color1 "><countup endVal="895" /></div>
+					</div>
+				</div>
+				<div class="box">
+				  <div class="title-3"><span>异常告警占比</span></div>
+				  <div class="pt-20 chart-p">
+					  <div class="check-label">
+						  <span class="active">平均</span>
+						  <span>最大</span>
+						  <span>最小</span>
+					  </div>
+				    <!-- <div class="check-box">
+				       <el-select v-model="selectSpot" slot="prepend" placeholder="选择景区">
+				    	  <el-option label="餐厅名" value="1"></el-option>
+				    	  <el-option label="订单号" value="2"></el-option>
+				    	  <el-option label="用户电话" value="3"></el-option>
+				    	</el-select>
+				    </div> -->
+				    <v-chart class="line-chart"  :option="optionLine" autoresize />
+				  </div>
+				</div>
 			</div>
-		
-		</div>
-		<div class="item item4">
-			<div class="box1">
-				异常告警
-				<div class="item-num color3"> <countup endVal="895" /><span class="unit"></span></div>
-			</div>
-		
-		</div>
-		<div class="item item5">
-			<div class="box1">
-				已处理
-				<div class="item-num color4"> <countup endVal="895" /><span class="unit"></span></div>
-			</div>
-		
 		</div>
 	</div>
-    <div class="flex pt-20 p-box">
-      <div class="box">
-        <div class="title-3"><span>异常告警</span></div>
-        <div class="pt-20">
-          <!-- <Line :width="370" :height="180" id="line" /> -->
-		  <v-chart class="line-chart" :option="optionLine" autoresize />
-        </div>
-      </div>
-      <div class="box">
-        <div class="title-3"><span>异常告警占比</span></div>
-        <div class="pt-20 h-flex">
-			<div class="left">
-				<v-chart class="chart" :option="option1" autoresize />
-			</div>
-			<div class="right">
-				<div class="li li-1"><span class="rk-img" >1</span> 核心监控1</div>
-				<div class="li li-2"><span class="rk-img" >1</span>核心监控1</div>
-				<div class="li li-3"><span class="rk-img" >1</span>核心监控1</div>
-				<div class="li"><span class="rk-img" >1</span>核心监控1</div>
-				<div class="li"><span class="rk-img" >1</span>核心监控1</div>
-				<div class="li"><span class="rk-img" >1</span>核心监控</div>
-			</div>
-        </div>
-      </div>
-    </div>
-	<div class="header">
-	  <div class="title"> 景区信息 </div>
-	</div>
-	<div class="flex-four">
-		<div class="item item1">
-			<div class="box1">
-				核心路段监控点位
-				<div class="item-num color1"> <countup endVal="895" /><span class="unit"></span></div>
-			</div>
-		
-		</div>
-		<div class="item item2">
-			<div class="box1">
-				核心景区分析点位
-				<div class="item-num color1"> <countup endVal="895" /><span class="unit"></span></div>
-			</div>
-			
-		</div>
-		<div class="item item3">
-			<div class="box1">
-				异常点位
-				<div class="item-num color2"> <countup endVal="895" /><span class="unit"></span></div>
-			</div>
-		
-		</div>
-		<div class="item item4">
-			<div class="box1">
-				异常告警
-				<div class="item-num color3"> <countup endVal="895" /><span class="unit"></span></div>
-			</div>
-		
-		</div>
-		<div class="item item5">
-			<div class="box1">
-				已处理
-				<div class="item-num color4"> <countup endVal="895" /><span class="unit"></span></div>
-			</div>
-		
-		</div>
-	</div>
-	<div class="flex pt-20 p-box">
-	  <div class="box">
-	    <div class="title-3"><span>异常告警</span></div>
-	    <div class="pt-20">
-	      <!-- <Line :width="370" :height="180" id="line" /> -->
-		  <v-chart class="line-chart"  :option="optionLine" autoresize />
-	    </div>
-	  </div>
-	  <div class="box">
-	    <div class="title-3"><span>异常告警占比</span></div>
-	    <div class="pt-20 h-flex">
-			<div class="left">
-				<v-chart class="chart" :option="option1" autoresize />
-			</div>
-			<div class="right">
-				<div class="li li-1"><span class="rk-img" >1</span> 核心监控1</div>
-				<div class="li li-2"><span class="rk-img" >1</span>核心监控1</div>
-				<div class="li li-3"><span class="rk-img" >1</span>核心监控1</div>
-				<div class="li"><span class="rk-img" >1</span>核心监控1</div>
-				<div class="li"><span class="rk-img" >1</span>核心监控1</div>
-				<div class="li"><span class="rk-img" >1</span>核心监控</div>
-			</div>
-	    </div>
-	  </div>
-	</div>
-  </div>
 </template>
 
 <script setup>
   import * as echarts from 'echarts'
   import countup from 'vue-countup-v3'
-  import { use } from 'echarts/core';
-  import { CanvasRenderer } from 'echarts/renderers';
-  import { GaugeChart } from 'echarts/charts';
-  import { PieChart } from 'echarts/charts';
-  import { LineChart } from 'echarts/charts';
   import { fitChartSize } from '@/utils/dataUtil'
-  import {
-    TitleComponent,
-    TooltipComponent,
-    LegendComponent,
-  } from 'echarts/components';
+  import Map from '@/components/Map/marker.vue'
   import VChart, { THEME_KEY } from 'vue-echarts';
   import { ref, provide } from 'vue';
   
-  use([
-	LineChart,
-    GaugeChart,
-    CanvasRenderer,
-    PieChart,
-    TitleComponent,
-    TooltipComponent,
-    LegendComponent,
-  ]);
-  
   provide(THEME_KEY, 'dark');
   const option1 = ref({
-  	backgroundColor:'transparent',
+		backgroundColor:'transparent',
 	  tooltip: {
 	    trigger: 'item'
 	  },
 	  legend: {
-		type: 'scroll',
-		orient: 'vertical',
-		right: -10,
-		top: 0,
-		bottom: 20,
-		itemWidth:5,
-		itemHeight:5,
-		textStyle:{
-			fontSize:fitChartSize(12),
-		}
+	  		type: 'scroll',
+	  		orient: 'vertical',
+	  		right: 10,
+	  		top: 20,
+	  		bottom: 20,
+	  		itemWidth:5,
+	  		itemHeight:5,
+	  		textStyle:{
+	  			fontSize:fitChartSize(14),
+	  		}
 	  },
   	  series: [
   	    {
   	      name: 'Access From',
   		  type: 'pie',
-  		  left:-25,
-  		  top:-20,
-		  width:fitChartSize(230),
-		  height:fitChartSize(230),
+  		  left:-30,
+  		  top:-50,
+		  width:fitChartSize(350),
+		  height:fitChartSize(350),
+		  // width:200,
+		  // height:200,
   		  radius: ['40%', '50%'],
   		  avoidLabelOverlap: false,
   		  padAngle: 5,
@@ -241,7 +153,7 @@
 	  backgroundColor:'transparent',
 	  grid:{
 		top:'50',
-		bottom:'20',
+		bottom:'50',
 		left:'4%',
 		containLabel: true,
 	  },
@@ -250,7 +162,7 @@
 	      type: 'category',
 		  boundaryGap: false,
 		  axisLabel: {
-			  fontSize:fitChartSize(10),
+			  fontSize:10,
 			  interval: 0, // 显示所有标签
 			  rotate: 0, // 旋转标签45度
 		  },
@@ -325,25 +237,336 @@
 	    ]
 	
   })
+  const optionBar = ref({
+	  backgroundColor:'transparent',
+	  tooltip: {
+	      trigger: 'axis',
+	      axisPointer: {
+	        type: 'shadow'
+	      }
+	    },
+	    legend: {
+			// type: 'scroll',
+			// orient: 'vertical',
+			right: 0,
+			top: 0,
+			bottom: 20,
+			itemWidth:5,
+			itemHeight:5,
+	    },
+	    grid: {
+	      left: '3%',
+	      right: '4%',
+	      bottom: '20%',
+	      containLabel: true,
+		  show:false,
+	    },
+	    xAxis: [
+	      {
+	        nameLocation: 'middle',
+	        type: 'category',
+	        boundaryGap: true,
+	        axisLabel: {
+			  fontSize:fitChartSize(10),
+			  interval: 0, // 显示所有标签
+			  rotate: 0, // 旋转标签45度
+	        },
+			minorTisk:{
+				show:false,
+			},
+	        data: ['10:00', '10:00', '10:00', '10:00', '10:00', '10:00', '10:00', '10:00'],
+			axisTisk:{
+				alignWithLabel: true,
+				show: false,
+				// 设置刻度长度
+				length: 0,
+				lineStyle: {
+					type: 'dashed' ,// 设置为虚线
+					width:0,
+				} 
+			},
+	      }
+	    ],
+	    yAxis: [
+	      {
+			  
+	        type: 'value',
+	        min:0,
+	        max:45,
+	        interval:15,
+			
+	         axisLabel: {
+			  fontSize: fitChartSize(12) ,// 设置Y轴刻度字体大小
+			  color: 'rgba(255,255,255,0.9)',
+			  offset:10,
+	         },
+	         splitLine:{
+			   show:false,
+			   lineStyle:{
+				   type:'dashed',
+				   color:'#00D0FF'
+			   }
+	         },
+			
+	      }
+	    ],
+	    series: [
+		  
+	      {
+			itemStyle: {
+			  // 设置柱状图颜色
+			  color: '#0D53FF'
+		    },
+	        name: '三峡之巅',
+	        type: 'bar',
+	        stack: 'Ad',
+	        emphasis: {
+	          focus: 'series'
+	        },
+	        data: [10, 0, 16, 10, 22, 11, 9,30],
+			barWidth: '45%', // 设置柱体粗细，可以是百分比或者像素值
+	      },
+	      {
+	        name: '白帝城',
+	        type: 'bar',
+	        stack: 'Ad',
+	        emphasis: {
+	          focus: 'series'
+	        },
+			itemStyle: {
+			  // 设置柱状图颜色
+			  color: '#05FFB9'
+			},
+	        data: [20, 5, 14, 14, 0, 20, 11,2]
+	      },
+	      {
+	        name: '龙河桥',
+	        type: 'bar',
+	        stack: 'Ad',
+	        emphasis: {
+	          focus: 'series'
+	        },
+			itemStyle: {
+			  // 设置柱状图颜色
+			  color: '#FFCB39'
+			},
+	        data: [15, 20, 8, 19, 20, 5, 22,13]
+	      },
+	      
+	    ]
+  })
   onMounted(() => {})
 </script>
-
-<style scoped lang="scss">
+<style lang="scss" scoped>
 	.line-chart{
 		width:100%;
-		height:vh(200);
+		height:vh(240);
 	}
-  .box-2 {
-    margin-top: vh(120);
-    width: vw(800);
-    height: vh(950);
-    padding: vw(8);
-    box-sizing: border-box;
-    // background-image: url('@/assets/images/bg-2.png');
-    background-size: 100% 100%;
-	.p-box{
-		padding-top:vh(10);
-		justify-content: space-between;
+	.chart-p{
+		position:relative;
+		.check-label{
+			position:absolute;
+			right:vw(20);
+			top:vh(15);
+			span{
+				width: vw(55);
+				padding:vw(5);
+				background: linear-gradient( 270deg, rgba(8,41,86,0.16) 0%, #0B61B4 100%);
+				border-radius: vw(50);
+				// border: 1px solid rgba(0,114,220,0.3);
+				margin-left:vw(5);
+				display: inline-block;
+				font-weight: 400;
+				font-size: vw(13);
+				color: #0084FF;
+				text-align: center;
+				font-style: normal;
+				text-transform: none;
+			}
+			.active{
+				background: linear-gradient( 270deg, #37D8FC 0%, #0084FF 100%);
+				border-radius: vw(50);
+				border: 1px solid rgba(0,114,220,0.3);
+				color:#fff;
+			}
+		}
+	}
+	.box-detection{
+		margin-top: vh(120);
+		width:vw(820);
+		height:vh(950);
+		background: linear-gradient( 321deg, #0B2F64 0%, #062B57 91%, rgba(5,40,79,0) 100%);
+		border-radius: 0px 0px 0px 0px;
+		.detection-top{
+			width:100%;
+			height:vh(580);
+			background-color: #fff;
+			.map-img{
+				width:100%;
+				height:100%;
+			}
+		}
+		.detection-bom{
+			justify-content: space-between;
+			.d-left{
+				width:vw(405);
+				.left{
+					width:100%;
+					height:vh(240);
+				}
+			}
+			.d-right{
+				width:vw(405);
+			}
+			.box {
+			  width:100%;
+			  padding:vw(5);
+			  margin-top:vh(5);
+			  background-image: url('@/assets/images/bg-3.png');
+			  background-size: 100% 100%;
+			  &:nth-child(1) {
+			    margin-right: vw(10);
+			  }
+			  .title-2 {
+			    width: vw(253);
+			    height: vh(28);
+			    display: flex;
+			    align-items: center;
+			    background-image: url('@/assets/images/title-5.png');
+			    background-size: 100% 100%;
+			    & > span {
+			      padding-left: vw(22);
+			      font-weight: bold;
+			      font-size: vw(15);
+			      background-image: linear-gradient(to bottom, #ffffff 0%, #75c1ff 100%);
+			      -webkit-background-clip: text;
+			      background-clip: text;
+			      -webkit-text-fill-color: transparent; /* 兼容WebKit内核浏览器 */
+			      color: transparent; /* 兼容其他浏览器 */
+			    }
+			  }
+			  .statistic {
+			    display: flex;
+			    margin-top: vh(12);
+			    width: 100%;
+			    height: vh(88);
+			    background-image: url('@/assets/images/bg-4.png');
+			    background-size: 100% 100%;
+			    &-item {
+			      flex: 1;
+			      display: flex;
+			      flex-direction: column;
+			      align-items: center;
+			      justify-content: center;
+			    }
+			    &-title {
+			      font-size: vw(14);
+			      color: rgba(255, 255, 255, 0.9);
+			    }
+			    &-value {
+			      margin-top: vh(10);
+			      font-weight: bold;
+			      font-size: vw(24);
+			      color: #02f9fa;
+			    }
+			    .count {
+			      font-weight: bold;
+			      font-size: vw(28);
+			      color: #ff4400 !important;
+			    }
+			    .prefix,
+			    .suffix {
+			      color: #ff4400;
+			      font-size: vw(12);
+			    }
+			  }
+			  .title-3 {
+			    position: relative;
+			    width: vw(344);
+			    height: vh(12);
+			    margin-top: vh(20);
+			    background-image: url('@/assets/images/title-6.png');
+			    background-size: 100% 100%;
+			
+			    & > span {
+			      position: absolute;
+			      bottom: vh(4);
+			      left: vw(20);
+			      font-size: vw(15);
+			      font-weight: bold;
+			      background-image: linear-gradient(to bottom, #ffffff 0%, #0096ff 100%);
+			      -webkit-background-clip: text;
+			      background-clip: text;
+			      -webkit-text-fill-color: transparent; /* 兼容WebKit内核浏览器 */
+			      color: transparent; /* 兼容其他浏览器 */
+			    }
+			  }
+			}
+			.t-title {
+			  margin: vh(10) auto;
+			  width: 100%;
+			  height: vh(32);
+			  font-weight: 800;
+			  font-size: vw(16);
+			  color: #fff;
+			  display: flex;
+			  align-items: center;
+			  justify-content: center;
+			  background-image: url('@/assets/images/title-4.png');
+			  background-size: 100% 100%;
+			}
+			.t-census{
+				justify-content: center;
+				align-items: center;
+				background-image: url('@/assets/images/i-data-bg-1.png');
+				background-size: 100% 100%;
+				padding:vw(10);
+				.t-icon{
+					width:vw(45);
+					height:vh(48);
+				}
+				.item{
+					flex:1;
+					font-weight: 400;
+					font-size: vw(14);
+					color: rgba(255,255,255,0.9);
+					line-height: vh(16);
+					text-align: center;
+					font-style: normal;
+					text-transform: none;
+					.color1{
+						display: block;
+						font-weight: bold;
+						font-size: vw(24);
+						color: #FFFFFF;
+						line-height: 28px;
+						text-align: center;
+						font-style: normal;
+						text-transform: none;
+					}
+					.color2{
+						display: block;
+						font-weight: bold;
+						font-size: vw(24);
+						color: #F15A25;
+						line-height: 28px;
+						text-align: center;
+						font-style: normal;
+						text-transform: none;
+					}
+					.color3{
+						display: block;
+						font-weight: bold;
+						font-size: vw(24);
+						line-height: 28px;
+						text-align: center;
+						font-style: normal;
+						text-transform: none;
+						color:#A70000;
+					}
+				}
+			}
+		}
 	}
 	.h-flex{
 		display: flex;
@@ -408,222 +631,5 @@
 			}
 		}
 	}
-	.flex-four{
-		display: flex;
-		justify-content: center;
-		align-items: center;
-		.item{
-			
-			margin:vw(10);
-			width:vw(142);
-			height:vh(106);
-			font-weight: 400;
-			font-size: vw(14);
-			color: rgba(255,255,255,0.9);
-			line-height: 16px;
-			text-align: center;
-			font-style: normal;
-			text-transform: none;
-			display: flex;
-			justify-content: center;
-			align-items: center;
-			padding:0;
-			margin-top:0;
-			.box1{
-				width:vw(142);
-			}
-			.item-num{
-				margin-top:vh(10);
-			}
-			.color1{
-				color: #02F9FA;
-			}
-			.color2{
-				color: #F15A25;
-			}
-			.color3{
-				color: #E21B1B;
-			}
-			.color4{
-				color: #12B5FD;
-			}
-			
-		}
-		.item1,.item2{
-			background-image: url('/src/assets/images/four-t-1.png');
-			background-size: 100% 100%;
-		}
-		.item3{
-			background-image: url('/src/assets/images/four-t-2.png');
-		}
-		.item4{
-			background-image: url('/src/assets/images/four-t-3.png');
-		}
-		.item5{
-			background-image: url('/src/assets/images/four-t-4.png');
-		}
-	}
-    .header {
-      position: relative;
-      .title {
-        margin: vh(5) auto;
-        width: vw(468);
-        height: vh(32);
-        font-weight: 800;
-        font-size: vw(16);
-        color: #fff;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        background-image: url('@/assets/images/title-4.png');
-        background-size: 100% 100%;
-      }
-      .more {
-        position: absolute;
-        top: vh(0);
-        right: vw(20);
-        cursor: pointer;
-        width: vw(60);
-        height: vh(24);
-        background-image: url('@/assets/images/more.png');
-        background-size: 100% 100%;
-      }
-    }
-
-    .item {
-      position: relative;
-      flex: 1;
-      padding-left: vw(100);
-	  width:vw(230);
-      height: vh(70);
-      display: flex;
-      align-items: center;
-      background-size: 100% 100%;
-	  .align-end{
-		  margin-top:vh(10);
-	  }
-	  .color1{
-		  color: #12B5FD;
-	  }
-	  .color2{
-		  color: #02F9FA;
-	  }
-	  .color3{
-		  color: #F15A25;
-	  }
 	
-    }
-    .title-1 {
-      position: absolute;
-      top: vh(10);
-      font-weight: 400;
-      font-size: vw(14);
-      color: rgba(255, 255, 255, 0.7);
-    }
-    .countup-wrap {
-      
-      font-size: vw(28);
-      font-weight: bold;
-    }
-    .unit {
-      color: #02f9fa;
-      font-size: vw(14);
-      margin-bottom: vh(4);
-    }
-    .core {
-      background-image: url('@/assets/images/m-t-1.png');
-	  background-size: 100% 100%;
-    }
-    .queue {
-      background-image: url('@/assets/images/m-t-2.png');
-	  background-size: 100% 100%;
-    }
-    .congestion {
-      background-image: url('@/assets/images/m-t-2.png');
-	  background-size: 100% 100%;
-    }
-    .box {
-      width: vw(384);
-      // height: vh(360);
-      background-image: url('@/assets/images/bg-3.png');
-      background-size: 100% 100%;
-      &:nth-child(1) {
-        margin-right: vw(10);
-      }
-      .title-2 {
-        width: vw(253);
-        height: vh(28);
-        display: flex;
-        align-items: center;
-        background-image: url('@/assets/images/title-5.png');
-        background-size: 100% 100%;
-        & > span {
-          padding-left: vw(22);
-          font-weight: bold;
-          font-size: vw(15);
-          background-image: linear-gradient(to bottom, #ffffff 0%, #75c1ff 100%);
-          -webkit-background-clip: text;
-          background-clip: text;
-          -webkit-text-fill-color: transparent; /* 兼容WebKit内核浏览器 */
-          color: transparent; /* 兼容其他浏览器 */
-        }
-      }
-      .statistic {
-        display: flex;
-        margin-top: vh(12);
-        width: 100%;
-        height: vh(88);
-        background-image: url('@/assets/images/bg-4.png');
-        background-size: 100% 100%;
-        &-item {
-          flex: 1;
-          display: flex;
-          flex-direction: column;
-          align-items: center;
-          justify-content: center;
-        }
-        &-title {
-          font-size: vw(14);
-          color: rgba(255, 255, 255, 0.9);
-        }
-        &-value {
-          margin-top: vh(10);
-          font-weight: bold;
-          font-size: vw(24);
-          color: #02f9fa;
-        }
-        .count {
-          font-weight: bold;
-          font-size: vw(28);
-          color: #ff4400 !important;
-        }
-        .prefix,
-        .suffix {
-          color: #ff4400;
-          font-size: vw(12);
-        }
-      }
-      .title-3 {
-        position: relative;
-        width: vw(344);
-        height: vh(12);
-        margin-top: vh(20);
-        background-image: url('@/assets/images/title-6.png');
-        background-size: 100% 100%;
-
-        & > span {
-          position: absolute;
-          bottom: vh(4);
-          left: vw(20);
-          font-size: vw(15);
-          font-weight: bold;
-          background-image: linear-gradient(to bottom, #ffffff 0%, #0096ff 100%);
-          -webkit-background-clip: text;
-          background-clip: text;
-          -webkit-text-fill-color: transparent; /* 兼容WebKit内核浏览器 */
-          color: transparent; /* 兼容其他浏览器 */
-        }
-      }
-    }
-  }
-</style>
+</style>
\ No newline at end of file
diff --git a/src/views/testing/components/box-3.vue b/src/views/testing/components/box-3.vue
index 3d8e910..973b4e4 100644
--- a/src/views/testing/components/box-3.vue
+++ b/src/views/testing/components/box-3.vue
@@ -1,30 +1,34 @@
 <template>
 	<!-- 视频 -->
 	<div class="box-3-content">
+		<navLeft></navLeft>
 		
-		<div class="left-nav">
-			<div class="top-box">
-				<!-- <div class="title">监控切换</div> -->
-				<div class="ul">
-					<div class="li active">异常告警</div>
-					<div class="li">景区入口</div>
-					<div class="li">核心路段</div>
-					<div class="li">公共交通</div>	
-					<div class="li">广场</div>	
-				</div>
-			</div>
-			<div class="bom-box">
-				<div class="title">
-					<span>检索</span>
-				</div>
-			</div>
-		</div>
 		<!-- 视频 -->
 		<div class="video-box">
-			<div class="v-item" v-for="item in 15">
-				  <!-- 视频 -->
-					<vue3VideoPlay 
-					v-bind="options"/>
+			<div class="flex video-one-1" v-if="videoLog == 1">
+				<div @click="handleItemVideo" class="v-item " :class="index==0?'v-error-bg':''" v-for="(item,index) in 15">
+					  <vue3VideoPlay  v-bind="options"/>
+				</div>
+					
+			</div>
+			<div class="video-live flex" v-if="videoLog == 2">
+				<div class="video-lt v-error-bg">
+					<div class="desc">核心路段：这是一条信息说明</div>
+					<vue3VideoPlay  v-bind="options"/>
+				</div>
+				<div class="video-rt">
+					<div class="title">
+						<span>最近联系</span>
+					</div>
+					<div class="rt-v-box">
+						<div class="rt-video v-error-bg" v-for="item in 8">
+							<div class="desc">核心路段：这是一条信息说明</div>
+							<vue3VideoPlay  v-bind="options"/>
+						</div>
+						
+					</div>
+					
+				</div>
 			</div>
 		</div>
 	</div>
@@ -32,6 +36,7 @@
 
 <script setup>
 	import { fitChartSize } from '@/utils/dataUtil'
+	import navLeft from '@/components/navLeft/index.vue'
 	const options = reactive({
 	    src: "http://192.168.1.60:8080/live/340200000013200000011_34020000001320000001/hls.m3u8", //视频源
 	    type: 'm3u8', //视频类型
@@ -59,8 +64,11 @@
 		    "fullScreen",
 		], //显示所有按钮,
 	});
-	
-	//  webscoket连接
+	const videoLog = ref(1)
+	const handleItemVideo = ()=>{
+		console.log('单击视频')
+		videoLog.value = 2
+	}
 	
 </script>
 <style lang="scss" scoped>
@@ -77,7 +85,124 @@
 			display:flex;
 			flex-wrap: wrap;
 			padding-top:0;
-			margin-left:vw(20);
+			// margin-left:vw(20);
+			.video-one-1{
+				background-image: url('/src/assets/images/log-v-bg.png');
+				background-size: 100% 100%;
+				flex-wrap: wrap;
+				padding-top:0;
+				padding:vh(30) vw(20);
+				margin-left:vw(20);
+			}
+			.video-live{
+				justify-content: space-between;
+				margin-left:vw(10) ;
+				.video-lt{
+					width:vw(1666);
+					height:vh(950);
+					background-image: url('/src/assets/images/one-video-bg.png');
+					background-size: 100% 100%;
+					padding:vh(40) vw(50);
+					position:relative;
+					.desc{
+						position:absolute;
+						// width:100%;
+						left:vw(50);
+						right:vw(50);
+						top:40(vh);
+						z-index: 9;
+						background: rgba(4,30,69,0.5);
+						border-radius: 0px 0px 0px 0px;
+						text-align: center;
+						font-weight: 400;
+						font-size: vw(14);
+						color: #FFFFFF;
+						padding:vw(20);
+						text-align: left;
+						font-style: normal;
+						text-transform: none;
+					}
+				}
+				.v-error-bg{
+					// background-image: url('/src/assets/images/v-item-bg-1.png');
+					// background-size: 100% 100%;
+					.desc{
+						background: rgba(226,27,27,0.5);
+					}
+				}
+				.video-rt{
+					width:vw(400);
+					height:vh(950);
+					background: radial-gradient( to bottom 70% at 99% 50%, #0A4190 0%, rgba(0,77,136,0.6) 100%);
+					border-radius: 0px 0px 0px 0px;
+					border: 1px solid;
+					opacity: 0.4;
+					border-image: linear-gradient(180deg, rgba(0, 150, 255, 1), rgba(0, 90, 153, 0)) 1 1;
+					margin-left:vw(10);
+					padding:vw(20);
+					.rt-v-box{
+						overflow-y: auto;
+						height:100%;
+					}
+					.title{
+						background-image: url('/src/assets/images/nav-l-t-bg.png');
+						background-size: 100% 100%;
+						margin-bottom:vh(10);
+						position:relative;
+						left:vw(-20);
+						span{
+							margin-left:vw(30);
+							font-weight: 800;
+							font-size: vw(15);
+							line-height: vh(26);
+							text-align: center;
+							font-style: normal;
+							text-transform: none;
+							
+							background: linear-gradient(90deg, #FFFFFF 0%, #5CB5FF 100%);
+							-webkit-background-clip: text;
+							background-clip: text;
+							-webkit-text-fill-color: transparent;
+							color: transparent;
+						}
+						
+					}
+					.rt-video{
+						width:100%;
+						height:vh(300);
+						background-image: url('/src/assets/images/v-item-bg.png');
+						background-size: 100% 100%;
+						padding:vw(20);
+						box-sizing: border-box;
+						margin-bottom:vh(2);
+						position:relative;
+						.desc{
+							position:absolute;
+							width:100%;
+							left:0;
+							bottom:0;
+							z-index: 9;
+							background: rgba(4,30,69,0.5);
+							border-radius: 0px 0px 0px 0px;
+							text-align: center;
+							font-weight: 400;
+							font-size: vw(14);
+							color: #FFFFFF;
+							padding:vw(20);
+							text-align: left;
+							font-style: normal;
+							text-transform: none;
+						}
+					}
+					.v-error-bg{
+						background-image: url('/src/assets/images/v-item-bg-1.png');
+						background-size: 100% 100%;
+						.desc{
+							background: rgba(226,27,27,0.5);
+						}
+					}
+				}
+			}
 			.v-item{
 				width:vw(400);
 				height:vh(300);
@@ -88,71 +213,5 @@
 				margin-bottom:vh(4);
 			}
 		}
-		.left-nav{
-			margin-left:vw(20);
-			// margin-top:vh(35);
-			width:vw(250);
-			.bom-box{
-				margin-top:vh(20);
-				.title{
-					background-image: url('/src/assets/images/nav-l-t-bg.png');
-					background-size: 100% 100%;
-					
-					span{
-						margin-left:vw(30);
-						font-weight: 800;
-						font-size: vw(15);
-						line-height: vh(26);
-						text-align: center;
-						font-style: normal;
-						text-transform: none;
-						
-						background: linear-gradient(90deg, #FFFFFF 0%, #5CB5FF 100%);
-						-webkit-background-clip: text;
-						background-clip: text;
-						-webkit-text-fill-color: transparent;
-						color: transparent;
-					}
-					
-				}
-			}
-			.top-box{
-				text-align: left;
-				font-weight: 400;
-				font-size: vw(18);
-				color: rgba(255,255,255,0.7);
-				line-height: 21px;
-				text-align: left;
-				font-style: normal;
-				text-transform: none;
-				.title{
-					font-weight: 600;
-					font-size: vw(15);
-					text-align: left;
-					font-style: normal;
-					text-transform: none;
-					height:vh(35);
-					line-height: vh(34);
-					padding-left:vw(20);
-					// background: linear-gradient(90deg, #FFFFFF 0%, #75C1FF 100%);
-				}
-				.ul{
-					.li{
-						background: url('/src/assets/images/m-nav-bg-1.png');
-						background-size: 100% 100%;
-						width:vw(250);
-						height:vh(58);
-						line-height:vh(58);
-						text-align: center;
-						margin-bottom:vh(15);
-					}
-					.active{
-						background: url('/src/assets/images/m-nav-bg-2.png');
-						background-size: 100% 100%;
-						// width:vw(178);
-					}
-				}
-			}
-		}
 	}
 </style>
\ No newline at end of file
diff --git a/src/views/testing/components/box-4.vue b/src/views/testing/components/box-4.vue
deleted file mode 100644
index d429aeb..0000000
--- a/src/views/testing/components/box-4.vue
+++ /dev/null
@@ -1,177 +0,0 @@
-<template>
-	<div class="box-4-content">
-		<div class="top-box">
-			<div class="title">融合通信</div>
-			<div class="icon-box flex">
-				<div class="icon">
-					<img src="/src/assets/images/r-icon-1.png" alt="" />
-					白帝城
-				</div>
-				<div class="icon"><img src="/src/assets/images/r-icon-2.png" alt="" />三峡之颠</div>
-				<div class="icon"><img src="/src/assets/images/r-icon-3.png" alt="" />龙桥河</div>
-				<div class="icon"><img src="/src/assets/images/r-icon-4.png" alt="" />消防队</div>
-				<div class="icon"><img src="/src/assets/images/r-icon-5.png" alt="" />文旅城</div>
-				<div class="icon"><img src="/src/assets/images/r-icon-6.png" alt="" />交通城</div>
-			</div>
-		</div>
-		<div class="bom-box">
-			<div class="title">
-				<span>最近联系</span>
-			</div>
-			<table class="table">
-				<tr class="tr-th">
-					<th>人员姓名</th>
-					<th>部门</th>
-					<th>职位</th>
-					<th>时间</th>
-				</tr>
-				 <tr class="tr-td">
-				    <td>January</td>
-				    <td>$100</td>
-					<td>January</td>
-					<td>$100</td>
-				  </tr>
-				  <tr class="tr-td">
-				    <td>February</td>
-				    <td>$80</td>
-					<td>February</td>
-					<td>$80</td>
-				  </tr>
-				  <tr class="tr-td">
-				    <td>February</td>
-				    <td>$80</td>
-					<td>February</td>
-					<td>$80</td>
-				  </tr>
-				  <tr class="tr-td">
-				    <td>February</td>
-				    <td>$80</td>
-					<td>February</td>
-					<td>$80</td>
-				  </tr>
-				  
-			</table>
-		</div>
-	</div>
-</template>
-
-<script setup>
-	
-</script>
-
-<style lang="scss" scoped>
-	.box-4-content{
-		width:vw(317);
-		height:vh(1062);
-		background-image: url('/src/assets/images/rt-bg.png');
-		background-repeat: no-repeat;
-		background-size: 100% 100%;
-		margin-top:vh(10);
-		margin-left:vw(10);
-		position: relative;
-		z-index: 999;
-		.bom-box{
-			.table{
-				width:100%;
-				margin-top:vh(5);
-				.tr-th{
-					background: linear-gradient( 180deg, rgba(0,99,255,0) 0%, #0063FF 100%);
-					border-radius: 0px 0px 0px 0px;
-					// border: 1px solid;
-					border-image: linear-gradient(180deg, rgba(0, 150, 255, 0), rgba(0, 150, 255, 1)) 1 1;
-					font-weight: 400;
-					font-size: vw(12);
-					color: #0096FF;
-					line-height: vh(14);
-					text-align: left;
-					font-style: normal;
-					text-transform: none;
-					
-					th{
-						padding:vw(5);
-					}
-					
-				}
-				.tr-td{
-					font-weight: 400;
-					font-size: vw(14);
-					color: #F1F7FF;
-					line-height: vh(16);
-					text-align: left;
-					font-style: normal;
-					text-transform: none;
-					
-					td{
-						padding:vh(5) vw(10)
-					}
-				}
-				.tr-td:nth-child(odd){
-					background: linear-gradient( 90deg, rgba(0,150,255,0) 0%, rgba(0,150,255,0.22) 100%);
-				}
-			}
-			.title{
-				background-image: url('/src/assets/images/nav-l-t-bg.png');
-				background-size: 100% 100%;
-				
-				span{
-					margin-left:vw(30);
-					font-weight: 800;
-					font-size: vw(15);
-					line-height: vh(26);
-					text-align: center;
-					font-style: normal;
-					text-transform: none;
-					
-					background: linear-gradient(90deg, #FFFFFF 0%, #5CB5FF 100%);
-					-webkit-background-clip: text;
-					background-clip: text;
-					-webkit-text-fill-color: transparent;
-					color: transparent;
-				}
-				
-			}
-		}
-		.top-box{
-			width:100%;
-			height:vh(500);
-			.icon-box{
-				justify-content: center;
-				font-family: Inter, Inter;
-				font-weight: 400;
-				font-size: vw(14);
-				color: #FFFFFF;
-				line-height: vh(16);
-				text-align: center;
-				font-style: normal;
-				text-transform: none;
-				flex-wrap: wrap;
-				.icon{
-					display: block;
-					margin:vh(20) auto;
-					width:vw(86);
-					height:vh(104);
-					img{
-						width:vw(86);
-						height:vh(104);
-					}
-				}
-			}
-			.title{
-				font-weight: 800;
-				font-size: vw(16);
-				line-height: vh(26);
-				text-align: center;
-				font-style: normal;
-				text-transform: none;
-				
-				background: linear-gradient(90deg, #FFFFFF 0%, #5CB5FF 100%);
-				-webkit-background-clip: text;
-				background-clip: text;
-				-webkit-text-fill-color: transparent;
-				color: transparent;
-				
-			}
-		}
-	}
-
-</style>
diff --git a/src/views/testing/components/box-5.vue b/src/views/testing/components/box-5.vue
index 63077d9..9928329 100644
--- a/src/views/testing/components/box-5.vue
+++ b/src/views/testing/components/box-5.vue
@@ -3,9 +3,8 @@
 	<div class="box-detection">
 		<!-- 地图 -->
 		<div class="detection-top">
-			<!-- <img class="map-img" src="@/assets/images/map-img-1.jpg" alt="" /> -->
-			
-			<Map />
+			<img class="map-img" src="@/assets/images/map-img-1.jpg" alt="" />
+			<!-- <Map /> -->
 		</div>
 		<div class="detection-bom flex">
 			<!-- 数据 -->
@@ -41,24 +40,31 @@
 					<span>交通信息</span>
 				</div>
 				<div class="t-census flex">
-					<img class="t-icon" src="@/assets/images/t-ico-1.png" alt="" />
+					<img class="t-icon" src="@/assets/images/t-ico-2.png" alt="" />
 					<div class="item">
-						监控点位 <div class="color1"><countup endVal="895" /></div>
+						监控点位 <div class="color1 color2"><countup endVal="895" /></div>
 					</div>
 					<div class="item">
-						核心点位 <div class="color1"><countup endVal="895" /></div>
+						核心点位 <div class="color1 color2"><countup endVal="895" /></div>
 					</div>
 					<div class="item">
-						拥堵次数 <div class="color1"><countup endVal="895" /></div>
+						拥堵次数 <div class="color1 color3"><countup endVal="895" /></div>
 					</div>
 				</div>
 				<div class="box">
 				  <div class="title-3"><span>异常告警占比</span></div>
 				  <div class="pt-20 h-flex">
-					<div class="left">
-						<v-chart class="line-chart"  :option="optionLine" autoresize />
-					</div>
-						
+				  	<div class="left">
+				  		<v-chart class="chart" :option="option1" autoresize />
+				  	</div>
+				  	<div class="right">
+				  		<div class="li li-1"><span class="rk-img" >1</span> 核心监控1</div>
+				  		<div class="li li-2"><span class="rk-img" >1</span>核心监控1</div>
+				  		<div class="li li-3"><span class="rk-img" >1</span>核心监控1</div>
+				  		<div class="li"><span class="rk-img" >1</span>核心监控1</div>
+				  		<div class="li"><span class="rk-img" >1</span>核心监控1</div>
+				  		<div class="li"><span class="rk-img" >1</span>核心监控</div>
+				  	</div>
 				  </div>
 				</div>
 			</div>
@@ -81,20 +87,25 @@
 	    trigger: 'item'
 	  },
 	  legend: {
-		type: 'scroll',
-		orient: 'vertical',
-		right: 30,
-		top: 30,
-		bottom: 20,
-		itemWidth:5,
-		itemHeight:5,
+	  		type: 'scroll',
+	  		orient: 'vertical',
+	  		right: -10,
+	  		top: 0,
+	  		bottom: 20,
+	  		itemWidth:5,
+	  		itemHeight:5,
+	  		textStyle:{
+	  			fontSize:fitChartSize(12),
+	  		}
 	  },
   	  series: [
   	    {
   	      name: 'Access From',
   		  type: 'pie',
-  		  left:-100,
-  		  top:-30,
+  		  left:-25,
+  		  top:0,
+		  width:fitChartSize(250),
+		  height:fitChartSize(250),
 		  // width:200,
 		  // height:200,
   		  radius: ['40%', '50%'],
@@ -507,8 +518,82 @@
 						font-style: normal;
 						text-transform: none;
 					}
+					.color3{
+						display: block;
+						font-weight: bold;
+						font-size: vw(24);
+						line-height: 28px;
+						text-align: center;
+						font-style: normal;
+						text-transform: none;
+						color:#A70000;
+					}
 				}
 			}
 		}
 	}
+	.h-flex{
+		display: flex;
+		justify-content: space-between;
+		.left{
+			flex:1;
+			width:vw(260);
+		}
+		.right{
+			margin-left:vw(20);
+			width:vw(120);
+			.li{
+				position: relative;
+				font-weight: 400;
+				font-size: vw(14);
+				color: #FFFFFF;
+				line-height: 16px;
+				text-align: left;
+				font-style: normal;
+				text-transform: none;
+				position: relative;
+				padding-left:vw(30);
+				padding:0 vw(10);
+				padding-left:vw(15);
+				background: linear-gradient( 90deg, #1B5EC7 0%, rgba(27,94,199,0) 100%);
+				border-radius: 0px 0px 0px 0px;
+				height:vh(24);
+				line-height:vh(24);
+				margin-bottom:vh(8);
+				// opacity: 0.4;
+				.rk-img{
+					position: absolute;
+					width:vw(24);
+					height:vh(24);
+					line-height:vh(24);
+					left:vw(-12);
+					top:50%;
+					display: block;
+					background-image: url('/src/assets/images/rk-4.png');
+					background-size: 100% 100%;
+					transform: translateY(-50%);
+					text-align: center;
+				}
+			}
+			.li-1{
+				background: linear-gradient( 90deg, #FFC10B 0%, rgba(255,209,44,0) 100%);
+				.rk-img{
+					background-image: url('/src/assets/images/rk-1.png');
+				}
+			}
+			.li-2{
+				background: linear-gradient( 90deg, #919191 0%, rgba(175,175,175,0) 100%);
+				.rk-img{
+					background-image: url('/src/assets/images/rk-2.png');
+				}
+			}
+			.li-3{
+				background: linear-gradient( 90deg, #919191 0%, rgba(175,175,175,0) 100%);
+				.rk-img{
+					background-image: url('/src/assets/images/rk-3.png');
+				}
+			}
+		}
+	}
+	
 </style>
\ No newline at end of file
diff --git a/src/views/testing/index.vue b/src/views/testing/index.vue
index 63a459d..4ef0ac4 100644
--- a/src/views/testing/index.vue
+++ b/src/views/testing/index.vue
@@ -1,33 +1,49 @@
 <template>
   <main class="wrapper">
-    <box1 />
+    <CoreVideo />
 	<box5/>
 	<box3 />
-    <div class="header">
-      <ul class="nav-left">
-        <li class="nav-left-item">奉节县</li>
-        <li class="nav-left-item">三峡之巅</li>
-        <li class="nav-left-item">白帝城</li>
-		<li class="nav-left-item">龙河桥</li>
-      </ul>
-      <div class="title">三峡之巅-安全检测</div>
-      <ul class="nav-right">
-        <li class="nav-right-item">路段1</li>
-        <li class="nav-right-item">路段</li>
-        <li class="nav-right-item">路段</li>
-        <li class="nav-right-item">路段</li>
-      </ul>
-    </div>
-    <box4 />
+    <Header title="三峡之巅-安全检测" is-skip :nav-left="navLeft" :nav-right="navRight" />
+    <Correspondence />
   </main>
 </template>
 
 <script setup>
-  import box1 from './components/box-1.vue'
-  import box4 from './components/box-4.vue'
   import box3 from './components/box-3.vue'
   import box5 from './components/box-5.vue'
-
+const navLeft = [{
+			name: '奉节县',
+			path: '/sceneTesting'
+		},
+		{
+			name: '三峡之巅',
+			path: '/sceneTesting'
+		},
+		{
+			name: '白帝城',
+			path: '/sceneTesting'
+		}, {
+			name: '龙河桥',
+			path: '/sceneTesting'
+		}
+	]
+	const navRight = [{
+			name: '路段',
+			path: '/roadTesting'
+		},
+		{
+			name: '路段',
+			path: '/roadTesting'
+		},
+		{
+			name: '路段',
+			path: '/roadTesting'
+		},
+		{
+			name: '路段',
+			path: '/roadTesting'
+		}
+	]
   onMounted(() => {})
 </script>
 
diff --git a/src/views/testing/road.vue b/src/views/testing/road.vue
new file mode 100644
index 0000000..5e0f2a5
--- /dev/null
+++ b/src/views/testing/road.vue
@@ -0,0 +1,114 @@
+<template>
+  <main class="wrapper">
+    <CoreVideo />
+	<box2/>
+	<box3 />
+    <Header title="核心路段-安全检测" is-skip :nav-left="navLeft" :nav-right="navRight" />
+    <Correspondence />
+  </main>
+</template>
+
+<script setup>
+  import box3 from './components/box-3.vue'
+  import box2 from './components/box-2.vue'
+const navLeft = [{
+			name: '奉节县',
+			path: '/sceneTesting'
+		},
+		{
+			name: '三峡之巅',
+			path: '/sceneTesting'
+		},
+		{
+			name: '白帝城',
+			path: '/sceneTesting'
+		}, {
+			name: '龙河桥',
+			path: '/sceneTesting'
+		}
+	]
+	const navRight = [{
+			name: '路段',
+			path: '/roadTesting'
+		},
+		{
+			name: '路段',
+			path: '/roadTesting'
+		},
+		{
+			name: '路段',
+			path: '/roadTesting'
+		},
+		{
+			name: '路段',
+			path: '/roadTesting'
+		}
+	]
+  onMounted(() => {})
+</script>
+
+<style lang="scss" scoped>
+  .wrapper {
+    display: flex;
+    width: 100vw;
+    height: 100vh;
+    overflow: hidden;
+    background-color: #0a254b;
+    .header {
+      position: absolute;
+      left: vw(326);
+      .title {
+        width: vw(3133);
+        height: vh(120);
+        font-size: vw(48);
+        font-weight: 800;
+        text-align: center;
+        padding-top: vh(20);
+        color: #fff;
+        letter-spacing: vw(10);
+        box-sizing: border-box;
+        text-shadow: 0px 4px 7px rgba(0, 150, 255, 0.75);
+        background-image: url('@/assets/images/title.png');
+        background-size: 100% 100%;
+      }
+      .nav-left {
+        position: absolute;
+        left: vw(380);
+        top: vh(34);
+        display: flex;
+        &-item {
+          cursor: pointer;
+          margin-left: vh(-10);
+          width: vw(210);
+          height: vh(56);
+          padding-top: vh(10);
+          font-weight: 600;
+          font-size: vw(28);
+          text-align: center;
+          color: rgba(208, 236, 255, 0.9);
+          background-image: url('@/assets/images/title-2.png');
+          background-size: 100% 100%;
+        }
+      }
+      .nav-right {
+        position: absolute;
+        right: vw(424);
+        top: vh(34);
+        display: flex;
+        &-item {
+          cursor: pointer;
+          margin-right: vh(-10);
+          width: vw(210);
+          height: vh(56);
+          padding-top: vh(10);
+          font-weight: 600;
+          font-size: vw(28);
+          text-align: center;
+          color: rgba(208, 236, 255, 0.9);
+          background-image: url('@/assets/images/title-3.png');
+          background-size: 100% 100%;
+        }
+      }
+    }
+  }
+</style>