diff --git a/src/api/request.js b/src/api/request.js
index 1fe250e..9d69b2e 100644
--- a/src/api/request.js
+++ b/src/api/request.js
@@ -1,5 +1,4 @@
 import axios from 'axios'
-import qs from 'qs'
 import { useRouter } from 'vue-router'
 import { ElMessage } from 'element-plus'
 
diff --git a/src/assets/images/arrow-down-1.png b/src/assets/images/arrow-down-1.png
new file mode 100644
index 0000000..cb7d584
Binary files /dev/null and b/src/assets/images/arrow-down-1.png differ
diff --git a/src/components/Correspondence/index.vue b/src/components/Correspondence/index.vue
index dd08c35..d98e79c 100644
--- a/src/components/Correspondence/index.vue
+++ b/src/components/Correspondence/index.vue
@@ -49,8 +49,7 @@
 <style lang="scss" scoped>
   .box-4-content {
     position: relative;
-    margin-top: vh(10);
-    margin-left: vw(10);
+    margin: vh(10);
     width: vw(300);
     height: vh(1060);
     background-image: url('@/assets/images/bg-1.png');
diff --git a/src/components/Header/index.vue b/src/components/Header/index.vue
index 63c172b..f5a8aa7 100644
--- a/src/components/Header/index.vue
+++ b/src/components/Header/index.vue
@@ -4,7 +4,7 @@
       <li
         class="nav-left-item"
         :style="{
-          backgroundImage: `url(${current == index && !isSkip ? title2Select : title2})`
+          backgroundImage: `url(${current === index && !isSkip ? title2Select : title2})`
         }"
         v-for="(item, index) in navLeft"
         :key="index"
@@ -12,6 +12,24 @@
       >
         {{ item.name }}
       </li>
+      <el-dropdown v-if="navLeft.length > 3" trigger="click" @command="handleCommand">
+        <li
+          class="nav-left-item"
+          :style="{
+            backgroundImage: `url(${title2})`
+          }"
+        >
+          {{ otherScenic || '其他景区' }}
+          <img class="icon" src="@/assets/images/arrow-down-1.png" />
+        </li>
+        <template #dropdown>
+          <el-dropdown-menu>
+            <el-dropdown-item v-for="(item, index) in navLeft" :key="index" :command="item">
+              <span class="label"> {{ item.name }}</span>
+            </el-dropdown-item>
+          </el-dropdown-menu>
+        </template>
+      </el-dropdown>
     </ul>
     <div class="title">
       <span>{{ title }}</span>
@@ -44,8 +62,8 @@
   import { useRouter } from 'vue-router'
   import title2 from '@/assets/images/title-2.png'
   import title2Select from '@/assets/images/title-2-select.png'
-
   import { getWeatherApi } from '@/api/home'
+  import { getSpotApi } from '@/api/sentiment'
 
   const emit = defineEmits(['change'])
 
@@ -59,6 +77,7 @@
   let isSkip = ref(true)
   let isBack = ref(false)
   let current = ref(0)
+  let otherScenic = ref('')
 
   // 补零
   const fillZero = (value) => {
@@ -79,31 +98,37 @@
       minute
     )}:${fillZero(second)}`
   }
-
+  const handleCommand = (e) => {
+    console.log(e, '=========')
+    title.value = e.name
+    otherScenic.value = e.name
+    current.value = ''
+  }
   // 返回上一页
   const handleBack = () => {
     router.go(-1)
   }
-
   // 点击导航
   const handleNav = (item, index) => {
     if (isSkip.value) {
       router.push(item.path)
     } else {
-      emit('on-change', index)
+      if (current.value === index) return
+      otherScenic.value = ''
+      current.value = index
+      title.value = item.name
     }
   }
-
   // 获取天气数据
   const getWeather = async () => {
     let res = await getWeatherApi()
     weatherData.value = res.data
   }
-
   // 设置当前路由导航栏
-  const setNav = () => {
+  const setNav = async () => {
     switch (router.currentRoute.value.path) {
       case '/home':
+        isSkip.value = true
         title.value = '奉节县旅游指挥调度中心'
         navLeft.value = [
           { name: '安全', path: '/monitor' },
@@ -118,10 +143,17 @@
         ]
         break
       case '/scenic':
-        title.value = '景区'
-        navLeft.value = []
-        navRight.value = []
+        isSkip.value = false
         isBack.value = true
+        let res = await getSpotApi()
+        navLeft.value = res.data.map((item) => {
+          return {
+            name: item.ssname,
+            id: item.id
+          }
+        })
+        title.value = navLeft.value[current.value].name
+        navRight.value = []
         break
       case '/sentiment':
         title.value = '舆情检测'
@@ -249,6 +281,7 @@
         font-size: vw(48);
         font-weight: 800;
         color: transparent;
+        letter-spacing: vw(10);
         -webkit-background-clip: text;
         background-clip: text;
         -webkit-text-fill-color: transparent;
@@ -271,6 +304,10 @@
         text-align: center;
         color: rgba(208, 236, 255, 0.9);
         background-size: 100% 100%;
+        .icon {
+          width: vw(18);
+          height: vw(18);
+        }
       }
     }
     .nav-right {
diff --git a/src/views/home/components/box-3.vue b/src/views/home/components/box-3.vue
index 1a0afd7..335c5c4 100644
--- a/src/views/home/components/box-3.vue
+++ b/src/views/home/components/box-3.vue
@@ -97,7 +97,7 @@
           <countup class="value" :end-val="500" />
         </div>
         <div>
-          <div class="label">车库总数</div>
+          <div class="label">总车位数</div>
           <countup class="value" :end-val="500" />
         </div>
         <div>
diff --git a/src/views/scenic/components/box-2.vue b/src/views/scenic/components/box-2.vue
index 502a3f3..5ed6517 100644
--- a/src/views/scenic/components/box-2.vue
+++ b/src/views/scenic/components/box-2.vue
@@ -344,7 +344,7 @@
       cursor: pointer;
       position: absolute;
       right: vw(20);
-      bottom: vh(20);
+      bottom: vw(20);
       width: vw(50);
       z-index: 999;
     }
@@ -375,7 +375,7 @@
       }
       .icon {
         width: vw(26);
-        height: vh(28);
+        height: vw(28);
         margin-right: vw(4);
       }
       .text {
diff --git a/src/views/traffic/components/box-1.vue b/src/views/traffic/components/box-1.vue
index 5825315..9b388e4 100644
--- a/src/views/traffic/components/box-1.vue
+++ b/src/views/traffic/components/box-1.vue
@@ -1,287 +1,282 @@
 <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>
+  <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: 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(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:fitChartSize(-50),
-			  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: '其他' },
-		      ]
-		     
-		    },
-		  ],
-	});
+  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: 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(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: fitChartSize(-50),
+        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: '其他' }
+        ]
+      }
+    ]
+  })
 </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(388);
-				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
+  .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(388);
+        height: vh(420);
+        background-image: url('@/assets/images/bg-3.png');
+        background-size: 100% 100%;
+
+        .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>
diff --git a/src/views/workOrder/components/box-2.vue b/src/views/workOrder/components/box-2.vue
index 80a834e..fff2ace 100644
--- a/src/views/workOrder/components/box-2.vue
+++ b/src/views/workOrder/components/box-2.vue
@@ -1,772 +1,783 @@
 <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"><countup endVal="45678" /></span>
-				</div>
-				<div class="item item1">
-					工单完成数 <span class="color1"><countup endVal="45678" /></span>
-				</div>
-				<div class="item item3">
-					紧急工单数 <span class=""><countup endVal="45678" /></span>
-				</div>
-				<div class="item item2">
-					重要工单数 <span class=""><countup endVal="45678" /></span>
-				</div>
-				<div class="item item1">
-					普通工单数 <span class=""><countup endVal="45678" /></span>
-				</div>
-			</div>
-			<div class="chart-box flex">
-				<div class="lt-chart">
-					<div class="title-3"><span>异常告警占比</span></div>
-					<div class="box chart-p">
-						<div class="check-label">
-							  <span class="active">全部</span>
-							  <span>已完成总数</span>
-							  
-						</div>
-						<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="fitChartSize(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="fitChartSize(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="fitChartSize(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>
+  <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"><countup endVal="45678" /></span>
+        </div>
+        <div class="item item1">
+          工单完成数 <span class="color1"><countup endVal="45678" /></span>
+        </div>
+        <div class="item item3">
+          紧急工单数 <span class=""><countup endVal="45678" /></span>
+        </div>
+        <div class="item item2">
+          重要工单数 <span class=""><countup endVal="45678" /></span>
+        </div>
+        <div class="item item1">
+          普通工单数 <span class=""><countup endVal="45678" /></span>
+        </div>
+      </div>
+      <div class="chart-box flex">
+        <div class="lt-chart">
+          <div class="title-3"><span>异常告警占比</span></div>
+          <div class="box chart-p">
+            <div class="check-label">
+              <span class="active">全部</span>
+              <span>已完成总数</span>
+            </div>
+            <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="fitChartSize(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="fitChartSize(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="fitChartSize(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 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 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:'90%',
-		  grid:{
-			top:'20',
-			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}
-				},
-				areaStyle: {
-					color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-					  {
-						offset: 0,
-						color: 'rgba(125, 231, 255, 0.1)'
-					  },
-					  {
-						offset: 1,
-						color: 'rgba(0, 157, 255, 0.1)'
-					  }
-					])
-				},
-				
-				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,
-				}
-		      }
-		    ]
-		
-	})
+  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 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: '90%',
+    grid: {
+      top: '20',
+      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 }
+        },
+        areaStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            {
+              offset: 0,
+              color: 'rgba(125, 231, 255, 0.1)'
+            },
+            {
+              offset: 1,
+              color: 'rgba(0, 157, 255, 0.1)'
+            }
+          ])
+        },
+
+        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;
-	}
-	.line-chart{
-		// margin-top:vh(20);
-	}
-	.chart-p{
-		position:relative;
-		.check-label{
-			position:absolute;
-			right:vw(20);
-			top:vh(-15);
-			span{
-				min-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;
-			}
-		}
-	}
-	.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);
-					min-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);
-							align-items: center;
-							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(250);
-						display: flex;
-						margin-top:vh(30);
-						.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{
-					display:flex;
-					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(5);
-					}
-					.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
+  :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;
+  }
+  .line-chart {
+    // margin-top:vh(20);
+  }
+  .chart-p {
+    position: relative;
+    .check-label {
+      position: absolute;
+      right: vw(20);
+      top: vh(-15);
+      span {
+        min-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;
+      }
+    }
+  }
+  .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);
+          min-height: vw(336);
+          padding: vw(20);
+          background-image: url('@/assets/images/bg-3.png');
+          background-size: 100% 100%;
+          .box-press {
+            padding: vw(30);
+            padding-top: vh(40);
+            .p-item {
+              display: flex;
+              width: 100%;
+              margin-top: vh(40);
+              align-items: center;
+              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(250);
+            display: flex;
+            margin-top: vh(30);
+            .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: auto;
+        }
+        .item {
+          display: flex;
+          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(5);
+          }
+          .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>
diff --git a/src/views/workOrder/components/box-3.vue b/src/views/workOrder/components/box-3.vue
index c628321..0c85ba0 100644
--- a/src/views/workOrder/components/box-3.vue
+++ b/src/views/workOrder/components/box-3.vue
@@ -1,413 +1,412 @@
 <template>
-	<div class="work-box-3">
-		<!-- 1 -->
-		<div class="work-2-flex">
-			<div class="header">
-			  <div class="title"> <span>消息情况</span> </div>
-			</div>
-			<div class="hd-list">
-				<div class="item item1">
-					工单完成数 <span class="color1"><countup endVal="45678" /></span>
-				</div>
-				<div class="item item3">
-					紧急工单数 <span class=""><countup endVal="45678" /></span>
-				</div>
-				<div class="item item2">
-					重要工单数 <span class=""><countup endVal="45678" /></span>
-				</div>
-				<div class="item item1">
-					普通工单数 <span class=""><countup endVal="45678" /></span>
-				</div>
-			</div>
-			<div class="chart-box flex">
-				<div class="box-item">
-					<v-chart class="line-chart"  :option="option" autoresize />
-				</div>
-				<div class="box-item">
-					<v-chart class="line-chart"  :option="option" autoresize />
-				</div>
-				<div class="box-item">
-					<v-chart class="line-chart"  :option="option" autoresize />
-				</div>
-			</div>
-		</div>
-		<!-- 2 -->
-		<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>
-	</div>
+  <div class="work-box-3">
+    <!-- 1 -->
+    <div class="work-2-flex">
+      <div class="header">
+        <div class="title"> <span>消息情况</span> </div>
+      </div>
+      <div class="hd-list">
+        <div class="item item1">
+          工单完成数 <span class="color1"><countup endVal="45678" /></span>
+        </div>
+        <div class="item item3">
+          紧急工单数 <span class=""><countup endVal="45678" /></span>
+        </div>
+        <div class="item item2">
+          重要工单数 <span class=""><countup endVal="45678" /></span>
+        </div>
+        <div class="item item1">
+          普通工单数 <span class=""><countup endVal="45678" /></span>
+        </div>
+      </div>
+      <div class="chart-box flex">
+        <div class="box-item">
+          <v-chart class="line-chart" :option="option" autoresize />
+        </div>
+        <div class="box-item">
+          <v-chart class="line-chart" :option="option" autoresize />
+        </div>
+        <div class="box-item">
+          <v-chart class="line-chart" :option="option" autoresize />
+        </div>
+      </div>
+    </div>
+    <!-- 2 -->
+    <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>
+  </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 option = ref({
-		backgroundColor:'transparent',
-		title: [
-		  {
-		    text: '45.5%',
-		    x: 'center',
-		    top: '34%',
-		    textStyle: {
-		      color: '#00D0FF',
-		      fontSize: fitChartSize(12)
-		    }
-		  },
-		  {
-		    text: '完成率',
-		    x: 'center',
-		    top: '56%',
-		    textStyle: {
-		      color: '#fff',
-		      fontSize: fitChartSize(12)
-		    }
-		  }
-		],
-		series: [
-		  // 内侧环
-		  {
-		    type: 'gauge',
-		    radius: '100%',
-		    center: ['50%', '50%'],
-		    min: 0,
-		    max: 100,
-		    startAngle: 360,
-		    endAngle: 0,
-		    itemStyle: {
-		      color: '#00D0FF'
-		    },
-		    axisLine: {
-		      show: true,
-		      roundCap: false,
-		      lineStyle: {
-		        color: [
-		          [0, '#075199'],
-		          [1, '#075199']
-		        ],
-		        width: fitChartSize(6)
-		      }
-		    },
-		    progress: {
-		      show: true,
-		      roundCap: false,
-		      width: fitChartSize(6)
-		    },
-		    pointer: {
-		      // 指针
-		      show: false
-		    },
-		    axisTick: {
-		      // 刻度
-		      show: false
-		    },
-		    splitLine: {
-		      // 分割线
-		      show: false
-		    },
-		    axisLabel: {
-		      // 刻度标签
-		      show: false
-		    },
-		    detail: {
-		      // 仪表盘详情
-		      show: false
-		    },
-		    data: [
-		      {
-		        value: 50
-		      }
-		    ]
-		  },
-		  {
-		    type: 'gauge',
-		    radius: '95%',
-		    center: ['50%', '50%'],
-		    min: 0,
-		    max: 100,
-		    startAngle: 360,
-		    endAngle: 0,
-		    itemStyle: {
-		      color: '#057EB9'
-		    },
-		    axisLine: {
-		      roundCap: false,
-		      lineStyle: {
-		        color: [
-		          [0, '#075199'],
-		          [1, '#075199']
-		        ],
-		        width: fitChartSize(10)
-		      }
-		    },
-		    progress: {
-		      show: true,
-		      roundCap: false,
-		      width: fitChartSize(10)
-		    },
-		    pointer: {
-		      // 指针
-		      show: false
-		    },
-		    axisTick: {
-		      // 刻度
-		      show: false
-		    },
-		    splitLine: {
-		      // 分割线
-		      show: false
-		    },
-		    axisLabel: {
-		      // 刻度标签
-		      show: false
-		    },
-		    detail: {
-		      // 仪表盘详情
-		      show: false
-		    },
-		    data: [
-		      {
-		        value: 50
-		      }
-		    ]
-		  }
-		]
-	})
+  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 option = ref({
+    backgroundColor: 'transparent',
+    title: [
+      {
+        text: '45.5%',
+        x: 'center',
+        top: '34%',
+        textStyle: {
+          color: '#00D0FF',
+          fontSize: fitChartSize(12)
+        }
+      },
+      {
+        text: '完成率',
+        x: 'center',
+        top: '56%',
+        textStyle: {
+          color: '#fff',
+          fontSize: fitChartSize(12)
+        }
+      }
+    ],
+    series: [
+      // 内侧环
+      {
+        type: 'gauge',
+        radius: '100%',
+        center: ['50%', '50%'],
+        min: 0,
+        max: 100,
+        startAngle: 360,
+        endAngle: 0,
+        itemStyle: {
+          color: '#00D0FF'
+        },
+        axisLine: {
+          show: true,
+          roundCap: false,
+          lineStyle: {
+            color: [
+              [0, '#075199'],
+              [1, '#075199']
+            ],
+            width: fitChartSize(6)
+          }
+        },
+        progress: {
+          show: true,
+          roundCap: false,
+          width: fitChartSize(6)
+        },
+        pointer: {
+          // 指针
+          show: false
+        },
+        axisTick: {
+          // 刻度
+          show: false
+        },
+        splitLine: {
+          // 分割线
+          show: false
+        },
+        axisLabel: {
+          // 刻度标签
+          show: false
+        },
+        detail: {
+          // 仪表盘详情
+          show: false
+        },
+        data: [
+          {
+            value: 50
+          }
+        ]
+      },
+      {
+        type: 'gauge',
+        radius: '95%',
+        center: ['50%', '50%'],
+        min: 0,
+        max: 100,
+        startAngle: 360,
+        endAngle: 0,
+        itemStyle: {
+          color: '#057EB9'
+        },
+        axisLine: {
+          roundCap: false,
+          lineStyle: {
+            color: [
+              [0, '#075199'],
+              [1, '#075199']
+            ],
+            width: fitChartSize(10)
+          }
+        },
+        progress: {
+          show: true,
+          roundCap: false,
+          width: fitChartSize(10)
+        },
+        pointer: {
+          // 指针
+          show: false
+        },
+        axisTick: {
+          // 刻度
+          show: false
+        },
+        splitLine: {
+          // 分割线
+          show: false
+        },
+        axisLabel: {
+          // 刻度标签
+          show: false
+        },
+        detail: {
+          // 仪表盘详情
+          show: false
+        },
+        data: [
+          {
+            value: 50
+          }
+        ]
+      }
+    ]
+  })
 </script>
 
 <style lang="scss" scoped>
-	.work-box-3{
-		width: vw(813);
-		height: vh(380);
-		background: linear-gradient( 321deg, #0B2F64 0%, #062B57 100%);
-		border-radius: 0px 0px 0px 0px;
-		margin-top:vh(100);
-		margin-left:vw(10);
-		position:relative;
-		z-index: 99;
-		.work-box-1{
-			width:vw(815);
-			height:vh(588);
-			// 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{
-				/* 滚动条整体样式 */
-				&::-webkit-scrollbar {
-				  width: vw(4); /* 滚动条的宽度 */
-				}
-				/* 滚动条轨道 */
-				&::-webkit-scrollbar-track {
-				  background: 'transparent'; /* 轨道的背景色 */
-				}
-				/* 滚动条滑块 */
-				&::-webkit-scrollbar-thumb {
-				  background: rgba(0, 150, 255, 0.63); /* 滑块的背景色 */
-				  border-radius: 5px; /* 滑块的圆角 */
-				}
-				height:vh(510);
-				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(30);
-					}
-					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%);
-				}
-			  }
-		  }
-		}
-		.work-2-flex{
-			background: linear-gradient( 321deg, #0B2F64 0%, #062B57 100%);
-			height:vh(380);
-			overflow:hidden;
-			.chart-box{
-				display: flex;
-				justify-content: space-between;
-				padding:vw(20) vw(15);
-				height:vh(360);
-				padding-top:vh(35);
-				box-sizing: border-box;
-				.box-item{
-					flex:1;
-					width:vw(140);
-					height:vh(140);
-					padding:vw(10);
-					.line-chart{
-						// width:100%;
-						// height: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%);
-				}
-			  }
-			}
-			.hd-list{
-				display: flex;
-				justify-content: center;
-				position:relative;
-				padding: 0 vw(20);
-				.h-icon{
-					position:absolute;
-					left:vw(70);
-					top:50%;
-					transform: translateY(-50%);
-					width:vw(74);
-					height:vh(74);
-				}
-				.item{
-					display:flex;
-					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(5);
-					}
-					.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%;
-				}
-			}
-		}
-	}
-</style>
\ No newline at end of file
+  .work-box-3 {
+    width: vw(813);
+    height: vh(380);
+    background: linear-gradient(321deg, #0b2f64 0%, #062b57 100%);
+    border-radius: 0px 0px 0px 0px;
+    margin-top: vh(100);
+    margin-left: vw(10);
+    position: relative;
+    z-index: 99;
+    .work-box-1 {
+      width: vw(815);
+      height: vh(588);
+      // 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 {
+        /* 滚动条整体样式 */
+        &::-webkit-scrollbar {
+          width: vw(4); /* 滚动条的宽度 */
+        }
+        /* 滚动条轨道 */
+        &::-webkit-scrollbar-track {
+          background: 'transparent'; /* 轨道的背景色 */
+        }
+        /* 滚动条滑块 */
+        &::-webkit-scrollbar-thumb {
+          background: rgba(0, 150, 255, 0.63); /* 滑块的背景色 */
+          border-radius: 5px; /* 滑块的圆角 */
+        }
+        height: vh(510);
+        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(30);
+          }
+          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%);
+          }
+        }
+      }
+    }
+    .work-2-flex {
+      background: linear-gradient(321deg, #0b2f64 0%, #062b57 100%);
+      height: vh(380);
+      overflow: hidden;
+      .chart-box {
+        display: flex;
+        justify-content: space-between;
+        padding: vw(20) vw(15);
+        height: vh(360);
+        padding-top: vh(35);
+        box-sizing: border-box;
+        .box-item {
+          flex: 1;
+          width: vw(140);
+          height: vh(140);
+          padding: vw(10);
+          .line-chart {
+            // width:100%;
+            // height: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%);
+          }
+        }
+      }
+      .hd-list {
+        display: flex;
+        justify-content: center;
+        position: relative;
+        padding: 0 vw(20);
+        .h-icon {
+          position: absolute;
+          left: vw(70);
+          top: 50%;
+          transform: translateY(-50%);
+          width: vw(74);
+          height: vh(74);
+        }
+        .item {
+          display: flex;
+          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(5);
+          }
+          .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%;
+        }
+      }
+    }
+  }
+</style>