diff --git a/src/assets/images/map-bg-2.png b/src/assets/images/map-bg-2.png
new file mode 100644
index 0000000..6b255f7
Binary files /dev/null and b/src/assets/images/map-bg-2.png differ
diff --git a/src/assets/images/small-v-bg.png b/src/assets/images/small-v-bg.png
new file mode 100644
index 0000000..b098598
Binary files /dev/null and b/src/assets/images/small-v-bg.png differ
diff --git a/src/assets/images/work-icon-1.png b/src/assets/images/work-icon-1.png
new file mode 100644
index 0000000..1984316
Binary files /dev/null and b/src/assets/images/work-icon-1.png differ
diff --git a/src/assets/images/work-icon-m-1.png b/src/assets/images/work-icon-m-1.png
new file mode 100644
index 0000000..36b7013
Binary files /dev/null and b/src/assets/images/work-icon-m-1.png differ
diff --git a/src/assets/images/work-n-bg-1.png b/src/assets/images/work-n-bg-1.png
new file mode 100644
index 0000000..4950b36
Binary files /dev/null and b/src/assets/images/work-n-bg-1.png differ
diff --git a/src/assets/images/work-n-bg-2.png b/src/assets/images/work-n-bg-2.png
new file mode 100644
index 0000000..49dec5e
Binary files /dev/null and b/src/assets/images/work-n-bg-2.png differ
diff --git a/src/assets/images/work-n-bg-3.png b/src/assets/images/work-n-bg-3.png
new file mode 100644
index 0000000..8e88a0f
Binary files /dev/null and b/src/assets/images/work-n-bg-3.png differ
diff --git a/src/router/index.js b/src/router/index.js
index 4dec471..8db8c61 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -36,7 +36,12 @@ const router = createRouter({
       path: '/sentiment',
       name: 'sentiment',
       component: () => import('@/views/sentiment/index.vue')
-    }
+    },
+	{
+	  path: '/workOrder',
+	  name: 'workOrder',
+	  component: () => import('@/views/workOrder/index.vue')
+	}
   ]
 })
 
diff --git a/src/views/testing/index.vue b/src/views/testing/index.vue
index 4ef0ac4..b487a1a 100644
--- a/src/views/testing/index.vue
+++ b/src/views/testing/index.vue
@@ -54,61 +54,6 @@ const navLeft = [{
     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>
diff --git a/src/views/traffic/components/box-1.vue b/src/views/traffic/components/box-1.vue
index 0447219..9de0a6d 100644
--- a/src/views/traffic/components/box-1.vue
+++ b/src/views/traffic/components/box-1.vue
@@ -55,9 +55,9 @@
 		  legend: {
 		  		type: 'scroll',
 		  		orient: 'vertical',
-		  		right: 10,
-		  		top: 70,
-		  		bottom: 20,
+		  		right: fitChartSize(10),
+		  		top: fitChartSize(70),
+		  		bottom: fitChartSize(20),
 		  		itemWidth:5,
 		  		itemHeight:5,
 				padding: [20,10,20,10],
@@ -79,7 +79,7 @@
 						  backgroundColor: '1',
 						},
 					 a: {
-						width: 75,
+						width: fitChartSize(75),
 						align: 'left',
 						fontSize:fitChartSize(16),
 						// backgroundColor:'1'
@@ -114,8 +114,8 @@
 		    {
 		      name: 'Access From',
 			  type: 'pie',
-			  left:-50,
-			  top:40,
+			  left:fitChartSize(-50),
+			  top:fitChartSize(40),
 			  width:fitChartSize(350),
 			  height:fitChartSize(350),
 			  // width:200,
@@ -129,14 +129,48 @@
 			  label: {
 				  show: false,
 				  position: 'center',
-				  
+				  fontWeight: 'bold',
+				  // formatter: function (o) {
+					 //  let data = o.data.value
+				  //   return `{value|${data}}` + '\n' + `{name|整改率}`
+				  // },
+				  // rich: {
+					  
+				  //   value: {
+				  //     color: '#fff',
+				  //     fontSize: fitChartSize(24),
+				  //     fontWeight: 'bold',
+				  //     padding: [0, 0, 5, 0]
+				  //   },
+				  //   name: {
+				  //     color: '#7894A8',
+				  //     fontSize: fitChartSize(12)
+				  //   }
+				  // }
 			  },
 			  emphasis: {
 				label: {
 					show: true,
 					fontSize: fitChartSize(16),
 					fontWeight: 'bold',
-					color:'#fff'
+					color:'#fff',
+					fontWeight: 'bold',
+					formatter: function (o) {
+						let data = o.data.value
+					  return `{value|${data}}` + '\n' + `{name|整改率}`
+					},
+					rich: {
+					  value: {
+					    color: '#fff',
+					    fontSize: fitChartSize(24),
+					    fontWeight: 'bold',
+					    padding: [0, 0, 5, 0]
+					  },
+					  name: {
+					    color: '#7894A8',
+					    fontSize: fitChartSize(12)
+					  }
+					}
 				  }
 				},
 				labelLine: {
@@ -149,7 +183,7 @@
 		        { value: 135, name: '异常状况4' },
 		        { value: 100, name: '异常状况5' },
 				{ value: 777, name: '异常状况6' },
-				{ value: 777, name: '其他' },
+				{ value: 888, name: '其他' },
 		      ]
 		     
 		    },
diff --git a/src/views/traffic/components/box-2.vue b/src/views/traffic/components/box-2.vue
new file mode 100644
index 0000000..f4fd32a
--- /dev/null
+++ b/src/views/traffic/components/box-2.vue
@@ -0,0 +1,99 @@
+<template>
+	<div class="traffic-box-2">
+		<div class="map-box">
+			<Map></Map>
+			<!-- 视频 -->
+			<div class="video-list">
+				<div class="li">
+					<vue3VideoPlay  v-bind="options"/>
+				</div>
+				<div class="li">
+					<vue3VideoPlay  v-bind="options"/>
+				</div>
+				<div class="menu">查看更多</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script setup>
+	import Map from '@/components/Map/marker.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",
+		], //显示所有按钮,
+	});
+</script>
+
+<style lang="scss" scoped>
+	.traffic-box-2{
+		width:vw(1517);
+		height:vh(965);
+		background-image: url('/src/assets/images/map-bg-2.png');
+		background-size: 100% 100%;
+		margin:0 vw(10);
+		padding:vh(35) vw(30);
+		margin-top:vh(110);
+		position:relative;
+		z-index:9;
+		.map-box{
+			width:100%;
+			height:100%;
+			position:relative;
+			.video-list{
+				width:vw(320);
+				height:vh(120);
+				background: #0A254B;
+				border-radius: 0px 0px 0px 0px;
+				position: absolute;
+				bottom:vw(10);
+				right:vw(10);
+				z-index: 99;
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				.li{
+					width:vw(140);
+					height:vh(105);
+					background-image: url('/src/assets/images/small-v-bg.png');
+					background-size: 100% 100%;
+					margin-right:vw(6);
+				}
+				.menu{
+					width: vw(12);
+					height: vh(60);
+					font-family: Inter, Inter;
+					font-weight: 400;
+					font-size: vw(12);
+					color: #FFFFFF;
+					line-height: vh(14);
+					text-align: left;
+					font-style: normal;
+					text-transform: none;
+				}
+			}
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/src/views/traffic/components/box-3.vue b/src/views/traffic/components/box-3.vue
new file mode 100644
index 0000000..d41c9ca
--- /dev/null
+++ b/src/views/traffic/components/box-3.vue
@@ -0,0 +1,14 @@
+<template>
+	<div class="traffic-box-3">
+		
+	</div>
+</template>
+
+<script>
+</script>
+
+<style lang="scss" scoped>
+	.traffic-box-3{
+		
+	}
+</style>
\ No newline at end of file
diff --git a/src/views/traffic/index.vue b/src/views/traffic/index.vue
index 11831ac..fd34854 100644
--- a/src/views/traffic/index.vue
+++ b/src/views/traffic/index.vue
@@ -2,6 +2,7 @@
 	<main class="wrapper">
 		<CoreVideo />
 		<box1/>
+		<box2/>
 		<Header title="交通大屏" is-skip :nav-left="navLeft" :nav-right="navRight" />
 		<Correspondence />
 	</main>
@@ -9,6 +10,7 @@
 
 <script setup>
 	import box1 from './components/box-1.vue'
+	import box2 from './components/box-2.vue'
 </script>
 
 <style>
diff --git a/src/views/workOrder/components/box-1.vue b/src/views/workOrder/components/box-1.vue
new file mode 100644
index 0000000..d485e55
--- /dev/null
+++ b/src/views/workOrder/components/box-1.vue
@@ -0,0 +1,119 @@
+<template>
+	<div class="work-box-1">
+		<!-- 最新工单 -->
+		<div class="header">
+		  <div class="title"> <span>最新工单</span> </div>
+		</div>
+		<!-- 列表 -->
+		<div class="list">
+			<div class="li" v-for="item in 40">
+				<span class="label label1">普通</span>
+				<p>这是一条工单信息这是一条工单信息这是一条工单信息这是一条工单信息这是一条</p>
+				<span class="time">2024-12.16 23:58</span>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+</script>
+
+<style lang="scss" scoped>
+	.work-box-1{
+		width:vw(815);
+		height:vh(975);
+		margin-top:vh(100);
+		background: linear-gradient( 321deg, #0B2F64 0%, #062B57 100%);
+		border-radius: 0px 0px 0px 0px;
+		position:relative;
+		z-index:99;
+		padding:0 vw(20);
+		.list{
+			height:vh(895);
+			overflow: auto;
+			.li:nth-child(odd){
+				background: rgba(3,78,153,0.3);
+				
+			}
+			.li:nth-child(even){
+				background-color: transparent;
+			}
+			.li{
+				display: flex;
+				align-items: center;
+				justify-content: flex-start;
+				padding:vh(8) vh(10);
+				.label{
+					width: vw(60);
+					height: vh(24);
+					line-height:vh(24);
+					color:#fff;
+					border-radius: 2px 2px 2px 2px;
+					font-size: vw(14);
+					text-align: center;
+					display: inline-block;
+					margin-right: vw(10);
+				}
+				.label1{
+					background: #2380FB;
+				}
+				.label2{
+					background: #FEAE00;
+				}
+				.label3{
+					background: #D9011B;
+				}
+				.time{
+					font-weight: 400;
+					font-size: vw(12);
+					color: rgba(255,255,255,0.6);
+					line-height: 14px;
+					text-align: left;
+					font-style: normal;
+					text-transform: none;
+					margin-left:vw(50);
+				}
+				p{
+					font-weight: 400;
+					font-size: vw(15);
+					color: #FFFFFF;
+					text-align: left;
+					font-style: normal;
+					text-transform: none;
+					flex: 1;
+					 /*1. 先强制一行内显示文本*/
+					white-space: nowrap;
+					  /*2. 超出的部分隐藏*/
+					overflow: hidden;
+					  /*3. 文字用省略号替代超出的部分*/
+					text-overflow: ellipsis;
+				}
+			}
+		}
+		.header {
+		  position: relative;
+		  margin:vh(20);
+		  .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%;
+			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%);
+			}
+		  }
+	  }
+	}
+</style>
\ No newline at end of file
diff --git a/src/views/workOrder/components/box-2.vue b/src/views/workOrder/components/box-2.vue
new file mode 100644
index 0000000..1057c18
--- /dev/null
+++ b/src/views/workOrder/components/box-2.vue
@@ -0,0 +1,720 @@
+<template>
+	<div class="work-box-2">
+		<!-- 1 -->
+		<div class="work-2-flex">
+			<div class="header">
+			  <div class="title"> <span>最新工单</span> </div>
+			</div>
+			<div class="hd-list">
+				<img class="h-icon" src="@/assets/images/work-icon-1.png" alt="" />
+				<div class="item item1">
+					今日工单总条数 <span class="color1">456789</span>
+				</div>
+				<div class="item item1">
+					工单完成数 <span class="color1">456789</span>
+				</div>
+				<div class="item item3">
+					紧急工单数 <span class="">456789</span>
+				</div>
+				<div class="item item2">
+					重要工单数 <span class="">456789</span>
+				</div>
+				<div class="item item1">
+					普通工单数 <span class="">456789</span>
+				</div>
+			</div>
+			<div class="chart-box flex">
+				<div class="lt-chart">
+					<div class="title-3"><span>异常告警占比</span></div>
+					<div class="box">
+						<v-chart class="line-chart"  :option="optionLine" autoresize />
+					</div>
+				</div>
+				<div class="lt-chart">
+					<div class="title-3"><span>异常告警占比</span></div>
+					<div class="box-press">
+						<!-- <v-chart class="line-chart"  :option="optionLine" autoresize /> -->
+						
+						<div class="p-item">
+							<span>普通</span>
+							<div class="box-1">
+								<el-progress :percentage="50"
+								 stroke-linecap="square"
+								stroke-width="15"  color="#2380FB"></el-progress>
+							</div>
+						</div>
+						<div class="p-item">
+							<span>普通</span>
+							<div class="box-1">
+								<el-progress :percentage="50"
+								 stroke-linecap="square"
+								stroke-width="15"  color="#D9011B"></el-progress>
+							</div>
+						</div>
+						<div class="p-item">
+							<span>普通</span>
+							<div class="box-1">
+								<el-progress :percentage="50"
+								 stroke-linecap="square"
+								stroke-width="15"  color="#FEAE00"></el-progress>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+		<div class="work-2-flex">
+			<div class="header">
+			  <div class="title"> <span>最新工单</span> </div>
+			</div>
+			<div class="chart-box flex">
+				<div class="lt-chart">
+					<div class="title-3"><span>异常告警占比</span></div>
+					<div class="box">
+						<v-chart class="chart"  :option="option1" autoresize />
+						<!-- <v-chart class="line-chart"  :option="optionLine" autoresize /> -->
+					</div>
+				</div>
+				<div class="lt-chart">
+					<div class="title-3"><span>异常告警占比</span></div>
+					<div class="box">
+						<div class="chart-1">
+							<v-chart class="chart"  :option="option2" autoresize />
+						</div>
+						<div class="chart-des">
+							<div class="t-des">
+								<img class="h-icon" src="@/assets/images/work-icon-m-1.png" alt="" />
+								异常点位告警排名
+							</div>
+							<div class="t-item" v-for="item in 8">
+								<span class="bgColor1">1</span>
+								<p>异常点位告警1号名称</p>
+							</div>
+						</div>
+						<!-- <v-chart class="line-chart"  :option="optionLine" autoresize /> -->
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script setup>
+	import * as echarts from 'echarts'
+	import countup from 'vue-countup-v3'
+	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 customColor = ref('#2380FB');
+	const option1 = ref({
+		  backgroundColor:'transparent',
+		  tooltip: {
+		    trigger: 'item'
+		  },
+		  legend: {
+		  		type: 'scroll',
+		  		orient: 'vertical',
+		  		right: fitChartSize(10),
+		  		top: fitChartSize(70),
+		  		bottom: fitChartSize(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: fitChartSize(200),
+						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:0,
+			  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',
+				  fontWeight: 'bold',
+				  // formatter: function (o) {
+					 //  let data = o.data.value
+				  //   return `{value|${data}}` + '\n' + `{name|整改率}`
+				  // },
+				  // rich: {
+					  
+				  //   value: {
+				  //     color: '#fff',
+				  //     fontSize: fitChartSize(24),
+				  //     fontWeight: 'bold',
+				  //     padding: [0, 0, 5, 0]
+				  //   },
+				  //   name: {
+				  //     color: '#7894A8',
+				  //     fontSize: fitChartSize(12)
+				  //   }
+				  // }
+			  },
+			  emphasis: {
+				label: {
+					show: true,
+					fontSize: fitChartSize(16),
+					fontWeight: 'bold',
+					color:'#fff',
+					fontWeight: 'bold',
+					formatter: function (o) {
+						let data = o.data.value
+					  return `{value|${data}}` + '\n' + `{name|整改率}`
+					},
+					rich: {
+					  value: {
+					    color: '#fff',
+					    fontSize: fitChartSize(24),
+					    fontWeight: 'bold',
+					    padding: [0, 0, 5, 0]
+					  },
+					  name: {
+					    color: '#7894A8',
+					    fontSize: fitChartSize(12)
+					  }
+					}
+				  }
+				},
+				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: 888, name: '其他' },
+		      ]
+		     
+		    },
+		  ],
+	  })
+	  const option2 = ref({
+	  	  backgroundColor:'transparent',
+	  	  tooltip: {
+	  	    trigger: 'item'
+	  	  },
+	  	  legend: {
+	  	  		type: 'scroll',
+	  	  		orient: 'vertical',
+	  	  		right: fitChartSize(30),
+	  	  		top: fitChartSize(70),
+	  	  		bottom: fitChartSize(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: fitChartSize(100),
+	  					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:fitChartSize(-65),
+	  		  top:fitChartSize(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',
+	  			  fontWeight: 'bold',
+	  			  // formatter: function (o) {
+	  				 //  let data = o.data.value
+	  			  //   return `{value|${data}}` + '\n' + `{name|整改率}`
+	  			  // },
+	  			  // rich: {
+	  				  
+	  			  //   value: {
+	  			  //     color: '#fff',
+	  			  //     fontSize: fitChartSize(24),
+	  			  //     fontWeight: 'bold',
+	  			  //     padding: [0, 0, 5, 0]
+	  			  //   },
+	  			  //   name: {
+	  			  //     color: '#7894A8',
+	  			  //     fontSize: fitChartSize(12)
+	  			  //   }
+	  			  // }
+	  		  },
+	  		  emphasis: {
+	  			label: {
+	  				show: true,
+	  				fontSize: fitChartSize(16),
+	  				fontWeight: 'bold',
+	  				color:'#fff',
+	  				fontWeight: 'bold',
+	  				formatter: function (o) {
+	  					let data = o.data.value
+	  				  return `{value|${data}}` + '\n' + `{name|整改率}`
+	  				},
+	  				rich: {
+	  				  value: {
+	  				    color: '#fff',
+	  				    fontSize: fitChartSize(24),
+	  				    fontWeight: 'bold',
+	  				    padding: [0, 0, 5, 0]
+	  				  },
+	  				  name: {
+	  				    color: '#7894A8',
+	  				    fontSize: fitChartSize(12)
+	  				  }
+	  				}
+	  			  }
+	  			},
+	  			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: 888, name: '其他' },
+	  	      ]
+	  	     
+	  	    },
+	  	  ],
+	    })
+	const optionLine = ref({
+		  backgroundColor:'transparent',
+		  height:250,
+		  grid:{
+			top:'30',
+			bottom:'0',
+			left:'4%',
+			containLabel: true,
+		  },
+		    xAxis: {
+			  nameLocation: 'middle',
+		      type: 'category',
+			  boundaryGap: false,
+			  axisLabel: {
+				  fontSize:10,
+				  interval: 0, // 显示所有标签
+				  rotate: 0, // 旋转标签45度
+			  },
+		      data: ['10:00', '10:00', '10:00', '10:00', '10:00', '10:00', '10:00', '10:00', '10:00', '10:00'],
+			  axisTisk:{
+				show: true,
+				// 设置刻度长度
+				length: 1,
+				lineStyle: {
+					type: 'dashed' ,// 设置为虚线
+					width:0,
+				} 
+			  },
+			  axisLine: {
+				lineStyle: {
+					color: '#0096FF' // 设置横线颜色
+				}
+			  }
+		    },
+		    yAxis: {
+		      type: 'value',
+			  min:0,
+			  max:7000,
+			  interval:1000,
+			   axisLabel: {
+				  fontSize: fitChartSize(12) ,// 设置Y轴刻度字体大小
+				  color: '#eee',
+			   },
+			   splitLine:{
+				   show:true,
+				   lineStyle:{
+					   type:'dashed',
+					   color:'#00D0FF'
+				   }
+			   }
+		    },
+			
+		    series: [
+		      {
+		        data: [0, 1000, 3000, 3500, 4200, 2000, 6000,800,6500,4500],
+		        type: 'line',
+		        smooth: true,
+				label:{
+					show:false,//隐藏坐标点
+				},
+				itemStyle:{
+					color:'transparent'
+				},
+				markLine:{
+					symbol:['none','none'],
+					label:{show:false}
+				},
+				
+				lineStyle: {
+					color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+					{
+					  offset: 0,
+					  color: '#7DE7FF'
+					},
+					{
+					  offset: 0.5,
+					  color: '#02F9FA'
+					},
+					{
+					  offset: 1,
+					  color: '#009DFF'
+					},
+				 ]),
+				 width:2,
+				}
+		      }
+		    ]
+		
+	})
+</script>
+
+<style lang="scss" scoped>
+	:deep(.el-progress-bar__outer){
+		background: rgba(0,150,255,0.15);
+		border-radius: 0;
+	}
+	:deep(.el-progress-bar__inner){
+		border-radius: 0;
+	}
+	:deep(.el-progress__text){
+		font-size:vw(14) !important;
+		color:#fff;
+	}
+	.work-box-2{
+		width:vw(1522);
+		height:vh(965);
+		margin-top:vh(100);
+		margin-left:vw(10);
+		position:relative;
+		z-index: 99;
+		.work-2-flex{
+			background: linear-gradient( 321deg, #0B2F64 0%, #062B57 100%);
+			height:vh(490);
+			overflow:hidden;
+			
+			.chart-box{
+				display: flex;
+				justify-content: space-between;
+				padding:vw(20) vw(15);
+				
+				.lt-chart{
+					width:vw(740);
+					height: vw(336);
+					padding:vw(20);
+					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;
+					.box-press{
+						padding:vw(30);
+						padding-top: vh(40);
+						.p-item{
+							display: flex;
+							width:100%;
+							margin-top:vh(40);
+							span{
+								font-weight: bold;
+								font-size: vw(14);
+								color: #FFFFFF;
+								text-align: left;
+								font-style: normal;
+								text-transform: none;
+								margin-right:vw(10);
+							}
+							.box-1{
+								flex: 1;
+							}
+						}
+					}
+					.box{
+						width:100%;
+						height:vh(300);
+						display: flex;
+						.chart-1{
+							flex: 1;
+						}
+						.chart-des{
+							width:vw(224);
+							height:vh(312);
+							background:#0A4190;
+							.t-item:nth-child(odd){
+								background: rgba(0,150,255,0.3);
+								
+							}
+							.t-item:nth-child(even){
+								background-color: transparent;
+							}
+							.t-item{
+								display: flex;
+								padding:vh(10) vw(10);
+								span{
+									width:vw(24);
+									height:vh(16);
+									text-align: center;
+									display: inline-block;
+									margin-right:vw(10);
+									color:#fff;
+									border-radius: 2px 2px 2px 2px;
+								}
+								p{
+									font-weight: 400;
+									font-size: vw(15);
+									color: #FFFFFF;
+									text-align: left;
+									font-style: normal;
+									text-transform: none;
+									flex: 1;
+									 /*1. 先强制一行内显示文本*/
+									white-space: nowrap;
+									  /*2. 超出的部分隐藏*/
+									overflow: hidden;
+									  /*3. 文字用省略号替代超出的部分*/
+									text-overflow: ellipsis;
+								}
+								.bgColor1{
+									background:#D9011B;
+								}
+								.bgColor2{
+									background:#FEAE00;
+								}
+								.bgColor3{
+									background:#2380FB;
+								}
+								.bgColor4{
+									background:#495C77;
+								}
+							}
+							.t-des{
+								background: rgba(0,150,255,0.4);
+								padding:vw(10);
+								font-weight: 400;
+								font-size: vw(13);
+								color: #02F9FA;
+								display:flex;
+								text-align: left;
+								font-style: normal;
+								text-transform: none;
+								img{
+									width:vw(16);
+									height:vh(12);
+									margin-right:vw(5);
+								}
+							}
+						}
+					}
+					.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; /* 兼容其他浏览器 */
+					  }
+					}
+				}
+			}
+			.hd-list{
+				display: flex;
+				justify-content: center;
+				position:relative;
+				.h-icon{
+					position:absolute;
+					left:vw(70);
+					top:50%;
+					transform: translateY(-50%);
+					width:vw(74);
+					height:vh(74);
+				}
+				.item{
+					width:vw(210);
+					height:vh(58);
+					line-height: vh(58);
+					padding-left:vw(10);
+					text-align: center;
+					margin:0 vw(15);
+					font-weight: 400;
+					font-size: vw(14);
+					color: rgba(255,255,255,0.9);
+					text-align: left;
+					font-style: normal;
+					text-transform: none;
+					span{
+						font-size: vw(24);
+						position: relative;
+						top:vh(2);
+						margin-left:vw(2);
+					}
+					.color1{
+						color:#02F9FA;
+					}
+				}
+				.item1{
+					background-image: url('@/assets/images/work-n-bg-1.png');
+					background-size: 100% 100%;
+				}
+				.item2{
+					background-image: url('@/assets/images/work-n-bg-2.png');
+					background-size: 100% 100%;
+				}
+				.item3{
+					background-image: url('@/assets/images/work-n-bg-3.png');
+					background-size: 100% 100%;
+				}
+			}
+			.header {
+			  position: relative;
+			  margin:vh(20);
+			  
+			  .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%;
+				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%);
+				}
+			  }
+			}
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/src/views/workOrder/index.vue b/src/views/workOrder/index.vue
new file mode 100644
index 0000000..129b84f
--- /dev/null
+++ b/src/views/workOrder/index.vue
@@ -0,0 +1,26 @@
+<template>
+  <main class="wrapper">
+    <CoreVideo />
+	<box1/>
+	<box2/>
+    <Header title="工单消息" is-skip  />
+    <Correspondence />
+  </main>
+</template>
+
+<script setup>
+  import box1 from './components/box-1.vue'
+  import box2 from './components/box-2.vue'
+
+  onMounted(() => {})
+</script>
+
+<style lang="scss" scoped>
+  .wrapper {
+    display: flex;
+    width: 100vw;
+    height: 100vh;
+    overflow: hidden;
+    background-color: #0a254b;
+  }
+</style>