From d60c8cbd387017f3d7105352b82d7d783edecaa0 Mon Sep 17 00:00:00 2001
From: duanliang <duanliang>
Date: Thu, 19 Dec 2024 11:48:16 +0800
Subject: [PATCH] =?UTF-8?q?feat=20=E4=BA=A4=E9=80=9A=E5=A4=A7=E5=B1=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/images/t-box-title-bg-1.png | Bin 0 -> 7304 bytes
 src/assets/images/t-icon-1.png         | Bin 0 -> 237 bytes
 src/components/monitor/index.vue       | 205 ++++++++++++++++++++
 src/router/index.js                    |   7 +-
 src/views/monitor/components/box-3.vue | 210 +-------------------
 src/views/monitor/index.vue            |  62 ------
 src/views/testing/components/box-3.vue | 198 +------------------
 src/views/traffic/components/box-1.vue | 253 +++++++++++++++++++++++++
 src/views/traffic/index.vue            |   9 +-
 9 files changed, 479 insertions(+), 465 deletions(-)
 create mode 100644 src/assets/images/t-box-title-bg-1.png
 create mode 100644 src/assets/images/t-icon-1.png
 create mode 100644 src/components/monitor/index.vue
 create mode 100644 src/views/traffic/components/box-1.vue

diff --git a/src/assets/images/t-box-title-bg-1.png b/src/assets/images/t-box-title-bg-1.png
new file mode 100644
index 0000000000000000000000000000000000000000..d3590abd073355b7969282a81ceb125c7b723c37
GIT binary patch
literal 7304
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

literal 0
HcmV?d00001

diff --git a/src/assets/images/t-icon-1.png b/src/assets/images/t-icon-1.png
new file mode 100644
index 0000000000000000000000000000000000000000..8bd5f47460910398aca99d64fc63837394a91574
GIT binary patch
literal 237
zcmeAS@N?(olHy`uVBq!ia0vp^93afW1|*O0@9PFqjKx9jP7LeL$-D$|mV3H5hG+zr
z_8amsCJMCf|Nef_mZ*sZT!p-P4;eC!@?O!3Ibf;Lk|OLCn9&)~vDNxhe&ey(@6JxI
z%x}4VL#b;^LCD4$zm_#GUahK$T*NC<^ka2PL+g#@w&DKn_s%~`ICkr(yqnC@<DYc`
zKQ3E(CpYZHUk3e`6Ju1mixe)OU6%OY-0jVzMkzBFquW{M)PA^G@FgXs23h_0{#7k!
kG%Mwb0F$4^w0~#KPZrqx>pP{>40JMsr>mdKI;Vst09qPhzW@LL

literal 0
HcmV?d00001

diff --git a/src/components/monitor/index.vue b/src/components/monitor/index.vue
new file mode 100644
index 0000000..63db096
--- /dev/null
+++ b/src/components/monitor/index.vue
@@ -0,0 +1,205 @@
+<template>
+	<div class="video-box">
+		<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>
+</template>
+
+<script setup>
+	import { fitChartSize } from '@/utils/dataUtil'
+	let searchValue = ref('')
+	const options = reactive({
+	    src: "http://192.168.1.60:8080/live/340200000013200000011_34020000001320000001/hls.m3u8", //视频源
+	    type: 'm3u8', //视频类型
+		width:"100%",
+		height:"100%",
+		color: "#409eff", //主题色
+		title: "", //视频名称
+		muted: false, //静音
+		webFullScreen: false,
+		speedRate: ["0.75", "1.0", "1.25", "1.5", "2.0"], //播放倍速
+		autoPlay: true, //自动播放
+		loop: false, //循环播放
+		mirror: false, //镜像画面
+		ligthOff: false, //关灯模式
+		volume: 0.3, //默认音量大小
+		control: true, //是否显示控制
+		controlBtns: [
+		    // "audioTrack",
+		    // "quality",
+		    // "speedRate",
+		    // "volume",
+		    "setting",
+		    "pip",
+		    "pageFullScreen",
+		    "fullScreen",
+		], //显示所有按钮,
+	});
+	const videoLog = ref(1)
+	const handleItemVideo = ()=>{
+		console.log('单击视频')
+		videoLog.value = 2
+	}
+	
+</script>
+
+<style lang="scss" scoped>
+	.video-box{
+		flex:1;
+		display:flex;
+		.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);
+			background-image: url('/src/assets/images/v-item-bg.png');
+			background-size: 100% 100%;
+			padding:vw(20);
+			margin-right:vw(4);
+			margin-bottom:vh(4);
+		}
+		.v-error-bg{
+			background-image: url('/src/assets/images/v-item-bg-1.png');
+			background-size: 100% 100%;
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/src/router/index.js b/src/router/index.js
index d7cf874..2b40d6f 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -27,7 +27,12 @@ const router = createRouter({
       path: '/scenic',
       name: 'scenic',
       component: () => import('@/views/scenic/index.vue')
-    }
+    },
+	{
+	  path: '/traffic',
+	  name: 'traffic',
+	  component: () => import('@/views/traffic/index.vue')
+	}
   ]
 })
 
diff --git a/src/views/monitor/components/box-3.vue b/src/views/monitor/components/box-3.vue
index 8a96e7f..0d6ea74 100644
--- a/src/views/monitor/components/box-3.vue
+++ b/src/views/monitor/components/box-3.vue
@@ -4,227 +4,25 @@
 		<navLeft></navLeft>
 		
 		<!-- 视频 -->
-		<div class="video-box">
-			<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>
+		<monitor></monitor>
 	</div>
 </template>
 
 <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', //视频类型
-		width:"100%",
-		height:"100%",
-		color: "#409eff", //主题色
-		title: "", //视频名称
-		muted: false, //静音
-		webFullScreen: false,
-		speedRate: ["0.75", "1.0", "1.25", "1.5", "2.0"], //播放倍速
-		autoPlay: true, //自动播放
-		loop: false, //循环播放
-		mirror: false, //镜像画面
-		ligthOff: false, //关灯模式
-		volume: 0.3, //默认音量大小
-		control: true, //是否显示控制
-		controlBtns: [
-		    // "audioTrack",
-		    // "quality",
-		    // "speedRate",
-		    // "volume",
-		    "setting",
-		    "pip",
-		    "pageFullScreen",
-		    "fullScreen",
-		], //显示所有按钮,
-	});
-	const videoLog = ref(1)
-	const handleItemVideo = ()=>{
-		console.log('单击视频')
-		videoLog.value = 2
-	}
+	import monitor from '@/components/monitor/index.vue'
 	
 </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(2356);
 		height:vh(965);
 
 		margin-top: vh(120);
 		display: flex;
-		.video-box{
-			flex:1;
-			display:flex;
-			.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);
-				background-image: url('/src/assets/images/v-item-bg.png');
-				background-size: 100% 100%;
-				padding:vw(20);
-				margin-right:vw(4);
-				margin-bottom:vh(4);
-			}
-			.v-error-bg{
-				background-image: url('/src/assets/images/v-item-bg-1.png');
-				background-size: 100% 100%;
-			}
-		}
+		
 		
 	}
 </style>
\ No newline at end of file
diff --git a/src/views/monitor/index.vue b/src/views/monitor/index.vue
index b58e8c6..e93282e 100644
--- a/src/views/monitor/index.vue
+++ b/src/views/monitor/index.vue
@@ -54,67 +54,5 @@
 		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-3.vue b/src/views/testing/components/box-3.vue
index 973b4e4..0bc5b47 100644
--- a/src/views/testing/components/box-3.vue
+++ b/src/views/testing/components/box-3.vue
@@ -4,72 +4,13 @@
 		<navLeft></navLeft>
 		
 		<!-- 视频 -->
-		<div class="video-box">
-			<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>
+		<monitor></monitor>
 	</div>
 </template>
 
 <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', //视频类型
-		width:"100%",
-		height:"100%",
-		color: "#409eff", //主题色
-		title: "", //视频名称
-		muted: false, //静音
-		webFullScreen: false,
-		speedRate: ["0.75", "1.0", "1.25", "1.5", "2.0"], //播放倍速
-		autoPlay: true, //自动播放
-		loop: false, //循环播放
-		mirror: false, //镜像画面
-		ligthOff: false, //关灯模式
-		volume: 0.3, //默认音量大小
-		control: true, //是否显示控制
-		controlBtns: [
-		    // "audioTrack",
-		    // "quality",
-		    // "speedRate",
-		    // "volume",
-		    "setting",
-		    "pip",
-		    "pageFullScreen",
-		    "fullScreen",
-		], //显示所有按钮,
-	});
-	const videoLog = ref(1)
-	const handleItemVideo = ()=>{
-		console.log('单击视频')
-		videoLog.value = 2
-	}
-	
+	import monitor from '@/components/monitor/index.vue'
 </script>
 <style lang="scss" scoped>
 	.box-3-content{
@@ -79,139 +20,6 @@
 		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(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);
-				background-image: url('/src/assets/images/v-item-bg.png');
-				background-size: 100% 100%;
-				padding:vw(20);
-				margin-right:vw(4);
-				margin-bottom:vh(4);
-			}
-		}
+		
 	}
 </style>
\ No newline at end of file
diff --git a/src/views/traffic/components/box-1.vue b/src/views/traffic/components/box-1.vue
new file mode 100644
index 0000000..0447219
--- /dev/null
+++ b/src/views/traffic/components/box-1.vue
@@ -0,0 +1,253 @@
+<template>
+	<div class="traffic-box-1">
+		<div class="title-num">
+			<div class="item-box">
+				<div class="item-t flex">
+					<img src="@/assets/images/t-icon-1.png" alt="">总路段
+				</div>
+				<div class="item-num"><span><countup endVal="88895" /></span>	</div>
+			</div>
+			<div class="item-box">
+				<div class="item-t flex">
+					<img src="@/assets/images/t-icon-1.png" alt="">总路段
+				</div>
+				<div class="item-num"><span><countup endVal="88895" /></span></div>
+			</div>
+			<div class="item-box">
+				<div class="item-t flex">
+					<img src="@/assets/images/t-icon-1.png" alt="">总路段
+				</div>
+				<div class="item-num"><span><countup endVal="88895" /></span></div>
+			</div>
+			<div class="item-box">
+				<div class="item-t flex">
+					<img src="@/assets/images/t-icon-1.png" alt="">总路段
+				</div>
+				<div class="item-num"><span><countup endVal="88895" /></span></div>
+			</div>
+		</div>
+		<div class="list-item">
+			<div class="item-li" v-for="item in 4">
+				<div class="title-3"><span>拥堵频次占比</span></div>
+				<div class="chart-box">
+					<v-chart class="chart"  :option="option1" autoresize />
+				</div>
+			</div>
+			
+		</div>
+	</div>
+</template>
+
+<script setup>
+	import countup from 'vue-countup-v3'
+	import * as echarts from 'echarts'
+	import { fitChartSize } from '@/utils/dataUtil'
+	import Map from '@/components/Map/marker.vue'
+	import VChart, { THEME_KEY } from 'vue-echarts';
+	import { ref, provide } from 'vue';
+	
+	provide(THEME_KEY, 'dark');
+	const option1 = ref({
+		  backgroundColor:'transparent',
+		  tooltip: {
+		    trigger: 'item'
+		  },
+		  legend: {
+		  		type: 'scroll',
+		  		orient: 'vertical',
+		  		right: 10,
+		  		top: 70,
+		  		bottom: 20,
+		  		itemWidth:5,
+		  		itemHeight:5,
+				padding: [20,10,20,10],
+				// itemGap:15,
+				show:true,
+				lineStyle:{
+					 borderColor:'#fff',
+					 width:5,
+				},
+				textStyle: {
+				  color: '#fff',
+				  fontSize:fitChartSize(16),
+				  lineHeight: 16,
+				  rich: {
+					d: {   
+						  width: '100%',
+						  borderWidth: 0.5,
+						  height:5,
+						  backgroundColor: '1',
+						},
+					 a: {
+						width: 75,
+						align: 'left',
+						fontSize:fitChartSize(16),
+						// backgroundColor:'1'
+						// color:'1',
+						// borderColor:'#eee',
+						// borderWidth:2
+					 },
+				  }
+				},
+				formatter: (e) => {
+					 let ratio = 0
+					 let value = 0
+					 if (option1.value.series[0].data.length > 0) {
+						option1.value.series[0].data.forEach(item => {
+							if (e == item.name) {
+						  ratio = (item.value*100/3799).toFixed(0)
+						  value = item.value
+							}
+						 });
+					  }
+					  // return `${e}    ${ratio}%  
+					  let arr = ['{a|' + e + '}', '{b|' + ratio + '%}'] 
+					  return arr.join('')
+				},
+				itemStyle:{
+					// color:'#fff'
+					
+				},
+				backgroundColor:'rgba(0,77,136,0.6)'
+		  },
+		  series: [
+		    {
+		      name: 'Access From',
+			  type: 'pie',
+			  left:-50,
+			  top:40,
+			  width:fitChartSize(350),
+			  height:fitChartSize(350),
+			  // width:200,
+			  // height:200,
+			  radius: ['40%', '50%'],
+			  avoidLabelOverlap: false,
+			  padAngle: 5,
+			  itemStyle: {
+				borderRadius: 2
+			  },
+			  label: {
+				  show: false,
+				  position: 'center',
+				  
+			  },
+			  emphasis: {
+				label: {
+					show: true,
+					fontSize: fitChartSize(16),
+					fontWeight: 'bold',
+					color:'#fff'
+				  }
+				},
+				labelLine: {
+				  show: true
+				},
+		      data: [
+		        { value: 200, name: '异常状况1' },
+		        { value: 500, name: '异常状况2' },
+		        { value: 234, name: '异常状况3' },
+		        { value: 135, name: '异常状况4' },
+		        { value: 100, name: '异常状况5' },
+				{ value: 777, name: '异常状况6' },
+				{ value: 777, name: '其他' },
+		      ]
+		     
+		    },
+		  ],
+	});
+</script>
+
+<style lang="scss" scoped>
+	.traffic-box-1{
+		width:vw(815);
+		height:vh(975);
+		background: linear-gradient( 321deg, #0B2F64 0%, #062B57 100%);
+		border-radius: 0px 0px 0px 0px;
+		margin-top:vh(100);
+		position: relative;
+		z-index: 9;
+		.list-item{
+			display: flex;
+			justify-content: space-between;
+			flex-wrap: wrap;
+			padding:0 vw(10);
+			.item-li{
+				width: vw(394);
+				height: vh(420);
+				background: radial-gradient(  70% at 99% 50%, #0A4190 0%, rgba(0,77,136,0.6) 100%);
+				border-radius: 0px 0px 0px 0px;
+				border: 1px solid;
+				border-image: linear-gradient(180deg, rgba(0, 150, 255, 1), rgba(0, 90, 153, 0)) 1 1;
+				.title-3{
+					margin-left:vw(10);
+					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; /* 兼容其他浏览器 */
+					}
+				}
+				.chart-box{
+					width:100%;
+					height:vh(370);
+				}
+			}
+		}
+		.title-num{
+			display: flex;
+			justify-content: flex-start;
+			padding:vw(40);
+			.item-box{
+				flex: 1;
+				.item-t{
+					display: flex;
+					font-weight: 400;
+					font-size: vw(14);
+					color: rgba(255,255,255,0.8);
+					text-align: left;
+					font-style: normal;
+					text-transform: none;
+					margin-bottom:vh(20);
+					img{
+						margin-right:vw(5);
+						width:vw(8);
+						height:vh(8);
+					}
+					
+				}
+				.item-num{
+					width:vw(134);
+					height:vh(30);
+					background-image: url('@/assets/images/t-box-title-bg-1.png');
+					background-size: 100% 100%;
+					font-weight: bold;
+					font-size: vw(24);
+					color: #02F9FA;
+					text-align: left;
+					font-style: normal;
+					text-transform: none;
+					padding-left:vw(15);
+					position: relative;
+					left:vw(-8);
+					span{
+						position: relative;
+						top:vh(-5);
+					}
+				}
+			}
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/src/views/traffic/index.vue b/src/views/traffic/index.vue
index 02409e3..11831ac 100644
--- a/src/views/traffic/index.vue
+++ b/src/views/traffic/index.vue
@@ -1,7 +1,14 @@
 <template>
+	<main class="wrapper">
+		<CoreVideo />
+		<box1/>
+		<Header title="交通大屏" is-skip :nav-left="navLeft" :nav-right="navRight" />
+		<Correspondence />
+	</main>
 </template>
 
-<script>
+<script setup>
+	import box1 from './components/box-1.vue'
 </script>
 
 <style>