diff --git a/src/views/oneMap/Echarts/publicEch.vue b/src/views/oneMap/Echarts/publicEch.vue
index 6ab1b7d..2816357 100644
--- a/src/views/oneMap/Echarts/publicEch.vue
+++ b/src/views/oneMap/Echarts/publicEch.vue
@@ -2,11 +2,11 @@
   <div :id="id" style="width: 100%; height: 100%"></div>
 </template>
 <script>
-import * as echarts from 'echarts';
-import { guid } from '@/utils/ruoyi';
-import { reactive, toRefs, onMounted, watch } from 'vue';
+import * as echarts from "echarts";
+import { guid } from "@/utils/ruoyi";
+import { reactive, toRefs, onMounted, watch } from "vue";
 export default {
-  name: 'line-chart',
+  name: "line-chart",
   props: {
     data: Object,
     refresh: Number,
@@ -28,28 +28,34 @@
       let chartDom = echarts.init(document.getElementById(allData.id));
 
       var shadowYData = [100, 100];
-      var barTopColor = ['#fe7285FF', '#1f93ffFF', '#31e1adFF', '#e4cd61FF', '#12f9ffFF'];
+      var barTopColor = ["#fe7285FF", "#1f93ffFF", "#31e1adFF", "#e4cd61FF", "#12f9ffFF"];
       var barBottomColor = [
-        'RGBA(154, 102, 125, 0.6)',
-        'RGBA(17, 109, 182, 0.6)',
-        'RGBA(27, 152, 136, 0.6)',
-        'RGBA(126, 138, 92, 0.6)',
-        'RGBA(10, 162, 178, 0.6)',
+        "RGBA(154, 102, 125, 0.6)",
+        "RGBA(17, 109, 182, 0.6)",
+        "RGBA(27, 152, 136, 0.6)",
+        "RGBA(126, 138, 92, 0.6)",
+        "RGBA(10, 162, 178, 0.6)",
       ];
       var barWidth = 20;
       var option;
       option = {
-        color: ['#3FFFC2', '#FFF21C'],
+        color: ["#3FFFC2", "#FFF21C"],
         tooltip: {
-          trigger: 'axis',
+          trigger: "axis",
 
-          formatter: params => {
+          formatter: (params) => {
             // console.log(params);
-            var relVal = '' + params[0].name;
+            var relVal = "" + params[0].name;
             for (var i = 0, l = params.length; i < l; i++) {
               if (params[i].seriesName) {
-                let unit = params[i].seriesName == '数量' ? '起' : '个';
-                relVal += '<br/>' + params[i].marker + params[i].seriesName + ' ' + params[i].value + unit;
+                let unit = params[i].seriesName == "数量" ? "起" : "个";
+                relVal +=
+                  "<br/>" +
+                  params[i].marker +
+                  params[i].seriesName +
+                  " " +
+                  params[i].value +
+                  unit;
               }
             }
             return relVal;
@@ -61,12 +67,12 @@
         },
         xAxis: [
           {
-            type: 'category',
+            type: "category",
             axisLine: {
               show: false,
               lineStyle: {
                 width: 2,
-                color: '#58b2ed',
+                color: "#58b2ed",
               },
             },
             splitLine: {
@@ -76,18 +82,18 @@
               show: false,
             },
             axisLabel: {
-              color: 'rgba(255,255,255,1)',
-              fontSize: 12,
-              fontFamily: 'AlibabaPuHuiTi',
+              color: "rgba(255,255,255,1)",
+              fontSize: 16,
+              fontFamily: "AlibabaPuHuiTi",
               formatter: function (params) {
-                var str = ''; // 最终拼接成的字符串
+                var str = ""; // 最终拼接成的字符串
                 var paramsLen = params.length; // 获取每项文字的个数
                 var len = 3; // 每行能显示的字的个数（根据实际情况自己设置）
                 var rowNumber = Math.ceil(paramsLen / len); // 换行的话，需要显示几行，向上取整
                 if (paramsLen > len) {
                   //大于设定的len就换行，不大于就不变化
                   for (var i = 0; i < rowNumber; i++) {
-                    var temp = ''; // 表示每一次截取的字符串
+                    var temp = ""; // 表示每一次截取的字符串
                     var start = i * len; // 开始截取的位置
                     var end = start + len; // 结束截取的位置
                     if (i == rowNumber - 1) {
@@ -95,7 +101,7 @@
                       temp = params.substring(start, paramsLen);
                     } else {
                       // 每一次拼接字符串并换行
-                      temp = params.substring(start, end) + '\n';
+                      temp = params.substring(start, end) + "\n";
                     }
                     str += temp; // 最终拼成的字符串
                   }
@@ -111,19 +117,19 @@
         ],
         yAxis: [
           {
-            name: '数量(起)',
-            type: 'value',
+            name: "数量(起)",
+            type: "value",
             axisLabel: {
-              color: '#3FFFC2',
+              color: "#3FFFC2",
               show: true,
             },
             nameTextStyle: {
-              color: '#3FFFC2',
+              color: "#3FFFC2",
             },
             splitLine: {
               lineStyle: {
-                type: 'dashed',
-                color: '#3FFFC2',
+                type: "dashed",
+                color: "#3FFFC2",
               },
             },
             alignTicks: true,
@@ -137,20 +143,20 @@
             bottom: 18,
             start: 0,
             end: 100,
-            handleSize: '100%',
-            fillerColor: '#94FA41',
-            borderColor: 'transparent',
-            backgroundColor: 'rgba(148, 250, 65, 0.2)',
+            handleSize: "100%",
+            fillerColor: "#94FA41",
+            borderColor: "transparent",
+            backgroundColor: "rgba(148, 250, 65, 0.2)",
             handleStyle: {
-              color: '#94FA41',
+              color: "#94FA41",
             },
             moveHandleSize: 0,
             textStyle: {
-              color: '#fff',
+              color: "#fff",
             },
           },
           {
-            type: 'inside',
+            type: "inside",
             show: true,
             height: 15,
             start: 1,
@@ -159,11 +165,11 @@
         ],
         series: [
           {
-            name: '数量',
-            type: 'pictorialBar',
+            name: "数量",
+            type: "pictorialBar",
             symbolSize: [barWidth, 10],
             symbolOffset: [0, -6],
-            symbolPosition: 'end',
+            symbolPosition: "end",
             z: 12,
             itemStyle: {
               normal: {
@@ -174,62 +180,62 @@
             },
             data: props.data.yAxis,
           },
+          // {
+          //   name: "",
+          //   type: "pictorialBar",
+          //   symbolSize: [barWidth + 10, 15],
+          //   symbolOffset: [0, 8],
+          //   z: 10,
+          //   itemStyle: {
+          //     normal: {
+          //       color: "transparent",
+          //       borderColor: barTopColor,
+          //       borderType: "solid",
+          //       borderWidth: 10,
+          //     },
+          //   },
+          //   data: props.data.yAxis,
+          // },
+          // {
+          //   name: '',
+          //   type: 'pictorialBar',
+          //   symbolSize: [barWidth + 20, 20],
+          //   symbolOffset: [0, 12],
+          //   z: 12,
+          //   itemStyle: {
+          //     normal: {
+          //       color: 'transparent',
+          //       borderColor: barTopColor,
+          //       borderType: 'solid',
+          //       borderWidth: 10,
+          //     },
+          //   },
+          //   data: props.data.yAxis,
+          //   stack: 'check',
+          // },
+          // {
+          //   name: "",
+          //   type: "pictorialBar",
+          //   symbolSize: [barWidth + 25, 20],
+          //   symbolOffset: [0, 12],
+          //   z: 12,
+          //   itemStyle: {
+          //     normal: {
+          //       color: "transparent",
+          //       borderColor: "#3ACDC5",
+          //       borderType: "solid",
+          //       borderWidth: 10,
+          //     },
+          //   },
+          //   data: props.data.yAxis,
+          //   stack: "check",
+          // },
           {
-            name: '',
-            type: 'pictorialBar',
-            symbolSize: [barWidth + 10, 15],
-            symbolOffset: [0, 8],
-            z: 10,
-            itemStyle: {
-              normal: {
-                color: 'transparent',
-                borderColor: barTopColor,
-                borderType: 'solid',
-                borderWidth: 10,
-              },
-            },
-            data: props.data.yAxis,
-          },
-          {
-            name: '',
-            type: 'pictorialBar',
-            symbolSize: [barWidth + 20, 20],
-            symbolOffset: [0, 12],
-            z: 12,
-            itemStyle: {
-              normal: {
-                color: 'transparent',
-                borderColor: barTopColor,
-                borderType: 'solid',
-                borderWidth: 10,
-              },
-            },
-            data: props.data.yAxis,
-            stack: 'check',
-          },
-          {
-            name: '',
-            type: 'pictorialBar',
-            symbolSize: [barWidth + 25, 20],
-            symbolOffset: [0, 12],
-            z: 12,
-            itemStyle: {
-              normal: {
-                color: 'transparent',
-                borderColor: '#3ACDC5',
-                borderType: 'solid',
-                borderWidth: 10,
-              },
-            },
-            data: props.data.yAxis,
-            stack: 'check',
-          },
-          {
-            name: '',
-            type: 'bar',
+            name: "",
+            type: "bar",
             barWidth: barWidth,
-            barGap: '10%', // Make series be overlap
-            barCateGoryGap: '10%',
+            barGap: "10%", // Make series be overlap
+            barCateGoryGap: "10%",
             itemStyle: {
               normal: {
                 color: function (params) {
@@ -264,7 +270,7 @@
     watch(
       () => props.refresh,
       () => {
-        console.log(props, 'propspropsprops');
+        console.log(props, "propspropsprops");
         if (allData.chartDom) {
           allData.chartDom.dispose();
           allData.chartDom = null;
@@ -276,7 +282,7 @@
     );
     onMounted(() => {
       init();
-      window.addEventListener('resize', resizeTheChart);
+      window.addEventListener("resize", resizeTheChart);
     });
     return {
       ...toRefs(allData),

diff --git a/src/views/oneMap/Echarts/publicEch.vue b/src/views/oneMap/Echarts/publicEch.vue
index 6ab1b7d..2816357 100644
--- a/src/views/oneMap/Echarts/publicEch.vue
+++ b/src/views/oneMap/Echarts/publicEch.vue
@@ -2,11 +2,11 @@
   <div :id="id" style="width: 100%; height: 100%"></div>
 </template>
 <script>
-import * as echarts from 'echarts';
-import { guid } from '@/utils/ruoyi';
-import { reactive, toRefs, onMounted, watch } from 'vue';
+import * as echarts from "echarts";
+import { guid } from "@/utils/ruoyi";
+import { reactive, toRefs, onMounted, watch } from "vue";
 export default {
-  name: 'line-chart',
+  name: "line-chart",
   props: {
     data: Object,
     refresh: Number,
@@ -28,28 +28,34 @@
       let chartDom = echarts.init(document.getElementById(allData.id));
 
       var shadowYData = [100, 100];
-      var barTopColor = ['#fe7285FF', '#1f93ffFF', '#31e1adFF', '#e4cd61FF', '#12f9ffFF'];
+      var barTopColor = ["#fe7285FF", "#1f93ffFF", "#31e1adFF", "#e4cd61FF", "#12f9ffFF"];
       var barBottomColor = [
-        'RGBA(154, 102, 125, 0.6)',
-        'RGBA(17, 109, 182, 0.6)',
-        'RGBA(27, 152, 136, 0.6)',
-        'RGBA(126, 138, 92, 0.6)',
-        'RGBA(10, 162, 178, 0.6)',
+        "RGBA(154, 102, 125, 0.6)",
+        "RGBA(17, 109, 182, 0.6)",
+        "RGBA(27, 152, 136, 0.6)",
+        "RGBA(126, 138, 92, 0.6)",
+        "RGBA(10, 162, 178, 0.6)",
       ];
       var barWidth = 20;
       var option;
       option = {
-        color: ['#3FFFC2', '#FFF21C'],
+        color: ["#3FFFC2", "#FFF21C"],
         tooltip: {
-          trigger: 'axis',
+          trigger: "axis",
 
-          formatter: params => {
+          formatter: (params) => {
             // console.log(params);
-            var relVal = '' + params[0].name;
+            var relVal = "" + params[0].name;
             for (var i = 0, l = params.length; i < l; i++) {
               if (params[i].seriesName) {
-                let unit = params[i].seriesName == '数量' ? '起' : '个';
-                relVal += '<br/>' + params[i].marker + params[i].seriesName + ' ' + params[i].value + unit;
+                let unit = params[i].seriesName == "数量" ? "起" : "个";
+                relVal +=
+                  "<br/>" +
+                  params[i].marker +
+                  params[i].seriesName +
+                  " " +
+                  params[i].value +
+                  unit;
               }
             }
             return relVal;
@@ -61,12 +67,12 @@
         },
         xAxis: [
           {
-            type: 'category',
+            type: "category",
             axisLine: {
               show: false,
               lineStyle: {
                 width: 2,
-                color: '#58b2ed',
+                color: "#58b2ed",
               },
             },
             splitLine: {
@@ -76,18 +82,18 @@
               show: false,
             },
             axisLabel: {
-              color: 'rgba(255,255,255,1)',
-              fontSize: 12,
-              fontFamily: 'AlibabaPuHuiTi',
+              color: "rgba(255,255,255,1)",
+              fontSize: 16,
+              fontFamily: "AlibabaPuHuiTi",
               formatter: function (params) {
-                var str = ''; // 最终拼接成的字符串
+                var str = ""; // 最终拼接成的字符串
                 var paramsLen = params.length; // 获取每项文字的个数
                 var len = 3; // 每行能显示的字的个数（根据实际情况自己设置）
                 var rowNumber = Math.ceil(paramsLen / len); // 换行的话，需要显示几行，向上取整
                 if (paramsLen > len) {
                   //大于设定的len就换行，不大于就不变化
                   for (var i = 0; i < rowNumber; i++) {
-                    var temp = ''; // 表示每一次截取的字符串
+                    var temp = ""; // 表示每一次截取的字符串
                     var start = i * len; // 开始截取的位置
                     var end = start + len; // 结束截取的位置
                     if (i == rowNumber - 1) {
@@ -95,7 +101,7 @@
                       temp = params.substring(start, paramsLen);
                     } else {
                       // 每一次拼接字符串并换行
-                      temp = params.substring(start, end) + '\n';
+                      temp = params.substring(start, end) + "\n";
                     }
                     str += temp; // 最终拼成的字符串
                   }
@@ -111,19 +117,19 @@
         ],
         yAxis: [
           {
-            name: '数量(起)',
-            type: 'value',
+            name: "数量(起)",
+            type: "value",
             axisLabel: {
-              color: '#3FFFC2',
+              color: "#3FFFC2",
               show: true,
             },
             nameTextStyle: {
-              color: '#3FFFC2',
+              color: "#3FFFC2",
             },
             splitLine: {
               lineStyle: {
-                type: 'dashed',
-                color: '#3FFFC2',
+                type: "dashed",
+                color: "#3FFFC2",
               },
             },
             alignTicks: true,
@@ -137,20 +143,20 @@
             bottom: 18,
             start: 0,
             end: 100,
-            handleSize: '100%',
-            fillerColor: '#94FA41',
-            borderColor: 'transparent',
-            backgroundColor: 'rgba(148, 250, 65, 0.2)',
+            handleSize: "100%",
+            fillerColor: "#94FA41",
+            borderColor: "transparent",
+            backgroundColor: "rgba(148, 250, 65, 0.2)",
             handleStyle: {
-              color: '#94FA41',
+              color: "#94FA41",
             },
             moveHandleSize: 0,
             textStyle: {
-              color: '#fff',
+              color: "#fff",
             },
           },
           {
-            type: 'inside',
+            type: "inside",
             show: true,
             height: 15,
             start: 1,
@@ -159,11 +165,11 @@
         ],
         series: [
           {
-            name: '数量',
-            type: 'pictorialBar',
+            name: "数量",
+            type: "pictorialBar",
             symbolSize: [barWidth, 10],
             symbolOffset: [0, -6],
-            symbolPosition: 'end',
+            symbolPosition: "end",
             z: 12,
             itemStyle: {
               normal: {
@@ -174,62 +180,62 @@
             },
             data: props.data.yAxis,
           },
+          // {
+          //   name: "",
+          //   type: "pictorialBar",
+          //   symbolSize: [barWidth + 10, 15],
+          //   symbolOffset: [0, 8],
+          //   z: 10,
+          //   itemStyle: {
+          //     normal: {
+          //       color: "transparent",
+          //       borderColor: barTopColor,
+          //       borderType: "solid",
+          //       borderWidth: 10,
+          //     },
+          //   },
+          //   data: props.data.yAxis,
+          // },
+          // {
+          //   name: '',
+          //   type: 'pictorialBar',
+          //   symbolSize: [barWidth + 20, 20],
+          //   symbolOffset: [0, 12],
+          //   z: 12,
+          //   itemStyle: {
+          //     normal: {
+          //       color: 'transparent',
+          //       borderColor: barTopColor,
+          //       borderType: 'solid',
+          //       borderWidth: 10,
+          //     },
+          //   },
+          //   data: props.data.yAxis,
+          //   stack: 'check',
+          // },
+          // {
+          //   name: "",
+          //   type: "pictorialBar",
+          //   symbolSize: [barWidth + 25, 20],
+          //   symbolOffset: [0, 12],
+          //   z: 12,
+          //   itemStyle: {
+          //     normal: {
+          //       color: "transparent",
+          //       borderColor: "#3ACDC5",
+          //       borderType: "solid",
+          //       borderWidth: 10,
+          //     },
+          //   },
+          //   data: props.data.yAxis,
+          //   stack: "check",
+          // },
           {
-            name: '',
-            type: 'pictorialBar',
-            symbolSize: [barWidth + 10, 15],
-            symbolOffset: [0, 8],
-            z: 10,
-            itemStyle: {
-              normal: {
-                color: 'transparent',
-                borderColor: barTopColor,
-                borderType: 'solid',
-                borderWidth: 10,
-              },
-            },
-            data: props.data.yAxis,
-          },
-          {
-            name: '',
-            type: 'pictorialBar',
-            symbolSize: [barWidth + 20, 20],
-            symbolOffset: [0, 12],
-            z: 12,
-            itemStyle: {
-              normal: {
-                color: 'transparent',
-                borderColor: barTopColor,
-                borderType: 'solid',
-                borderWidth: 10,
-              },
-            },
-            data: props.data.yAxis,
-            stack: 'check',
-          },
-          {
-            name: '',
-            type: 'pictorialBar',
-            symbolSize: [barWidth + 25, 20],
-            symbolOffset: [0, 12],
-            z: 12,
-            itemStyle: {
-              normal: {
-                color: 'transparent',
-                borderColor: '#3ACDC5',
-                borderType: 'solid',
-                borderWidth: 10,
-              },
-            },
-            data: props.data.yAxis,
-            stack: 'check',
-          },
-          {
-            name: '',
-            type: 'bar',
+            name: "",
+            type: "bar",
             barWidth: barWidth,
-            barGap: '10%', // Make series be overlap
-            barCateGoryGap: '10%',
+            barGap: "10%", // Make series be overlap
+            barCateGoryGap: "10%",
             itemStyle: {
               normal: {
                 color: function (params) {
@@ -264,7 +270,7 @@
     watch(
       () => props.refresh,
       () => {
-        console.log(props, 'propspropsprops');
+        console.log(props, "propspropsprops");
         if (allData.chartDom) {
           allData.chartDom.dispose();
           allData.chartDom = null;
@@ -276,7 +282,7 @@
     );
     onMounted(() => {
       init();
-      window.addEventListener('resize', resizeTheChart);
+      window.addEventListener("resize", resizeTheChart);
     });
     return {
       ...toRefs(allData),
diff --git a/src/views/oneMap/LayerControl/LayerControl.vue b/src/views/oneMap/LayerControl/LayerControl.vue
index 43fc007..2bdf6b8 100644
--- a/src/views/oneMap/LayerControl/LayerControl.vue
+++ b/src/views/oneMap/LayerControl/LayerControl.vue
@@ -1,6 +1,10 @@
 <template>
   <Transition name="slideTC">
-    <div class="LayerControl" v-show="ShowTuCheng">
+    <div
+      class="LayerControl"
+      v-show="ShowTuCheng"
+      :class="[showPanel ? 'TuChengImgTrue' : 'TuChengImgFalse']"
+    >
       <div class="GroupBox" v-for="item in AllData.LayerData" v-show="item.children">
         <div class="GroupName" @click="item.Show = !item.Show">{{ item.title }}</div>
         <!-- <Transition name="Group"> -->
@@ -30,30 +34,30 @@
 </template>
 
 <script setup name="LayerControl">
-import { ref, reactive, toRefs, onMounted } from 'vue';
+import { ref, reactive, toRefs, onMounted } from "vue";
 // 图层控制icon引入
-import { requireTuChengImg } from '@/utils/util';
-import yanAnPaiShuiArea from '@/assets/yanAnPaiShuiArea.json';
-import yanAnRoad from '@/assets/yanAnRoad.json';
-import yanAnWater from '@/assets/yanAnWater.json';
-import yanAnWSCLC from '@/assets/yanAnWSCLC.json';
-import yanAnCenterCity from '@/assets/yanAnCenterCity.json';
-import yanAnYSBZ from '@/assets/yanAnYSBZ.json';
-import yanAnYiLao from '@/assets/yanAnYiLao.json';
-import yanAnFengXian from '@/assets/yanAnFengXian.json';
-import yanAnPipeSupervise from '@/assets/yanAnPipeSupervise.json';
-import yanAnPKSupervise from '@/assets/yanAnPKSupervise.json';
-import yanAnNature from '@/assets/yanAnNature.json';
-import yanAnVideo from '@/assets/yanAnVideo.json';
-import yanAnMountain from '@/assets/yanAnMountain.json';
-import yanAnSmallWater from '@/assets/yanAnSmallWater.json';
-import yanAnRainArea from '@/assets/yanAnRainArea.json';
-import heDiJiaGu from '@/assets/heDiJiaGu.json';
-import heDiShuJun from '@/assets/heDiShuJun.json';
-import anXianGaiZao from '@/assets/anXianGaiZao.json';
-import bus from '@/bus';
-import axios from 'axios';
-import mapBoxVectorLayer from '@/utils/GISdocument/mapboxVectorLayer.js';
+import { requireTuChengImg } from "@/utils/util";
+import yanAnPaiShuiArea from "@/assets/yanAnPaiShuiArea.json";
+import yanAnRoad from "@/assets/yanAnRoad.json";
+import yanAnWater from "@/assets/yanAnWater.json";
+import yanAnWSCLC from "@/assets/yanAnWSCLC.json";
+import yanAnCenterCity from "@/assets/yanAnCenterCity.json";
+import yanAnYSBZ from "@/assets/yanAnYSBZ.json";
+import yanAnYiLao from "@/assets/yanAnYiLao.json";
+import yanAnFengXian from "@/assets/yanAnFengXian.json";
+import yanAnPipeSupervise from "@/assets/yanAnPipeSupervise.json";
+import yanAnPKSupervise from "@/assets/yanAnPKSupervise.json";
+import yanAnNature from "@/assets/yanAnNature.json";
+import yanAnVideo from "@/assets/yanAnVideo.json";
+import yanAnMountain from "@/assets/yanAnMountain.json";
+import yanAnSmallWater from "@/assets/yanAnSmallWater.json";
+import yanAnRainArea from "@/assets/yanAnRainArea.json";
+import heDiJiaGu from "@/assets/heDiJiaGu.json";
+import heDiShuJun from "@/assets/heDiShuJun.json";
+import anXianGaiZao from "@/assets/anXianGaiZao.json";
+import bus from "@/bus";
+import axios from "axios";
+import mapBoxVectorLayer from "@/utils/GISdocument/mapboxVectorLayer.js";
 const AllData = reactive({
   // 图层控制面板的渲染数据
   /**图层面板数据字段说明
@@ -66,216 +70,216 @@
    */
   LayerData: [
     {
-      title: '基本信息',
+      title: "基本信息",
       Show: true,
       children: [
         {
-          layerName: '蓝色地图',
-          layerKey: 'blackMap',
-          layerIcon: requireTuChengImg('zhongxinchengqu'),
+          layerName: "蓝色地图",
+          layerKey: "blackMap",
+          layerIcon: requireTuChengImg("zhongxinchengqu"),
           layerVisible: false,
         },
         {
-          layerName: '白色地图',
-          layerKey: 'whiteMap',
-          layerIcon: requireTuChengImg('zhongxinchengqu'),
+          layerName: "白色地图",
+          layerKey: "whiteMap",
+          layerIcon: requireTuChengImg("zhongxinchengqu"),
           layerVisible: false,
         },
         {
-          layerName: '影像地图',
-          layerKey: 'imageMap',
-          layerIcon: requireTuChengImg('zhongxinchengqu'),
+          layerName: "影像地图",
+          layerKey: "imageMap",
+          layerIcon: requireTuChengImg("zhongxinchengqu"),
           layerVisible: false,
         },
         {
-          layerName: '中心城区',
-          layerKey: 'centerCity',
-          layerIcon: requireTuChengImg('zhongxinchengqu'),
+          layerName: "中心城区",
+          layerKey: "centerCity",
+          layerIcon: requireTuChengImg("zhongxinchengqu"),
           layerVisible: false,
           dynamicLineData: yanAnCenterCity,
         },
         {
-          layerName: '三维建筑',
-          layerKey: 'buildingLayer',
-          layerIcon: '',
+          layerName: "三维建筑",
+          layerKey: "buildingLayer",
+          layerIcon: "",
           layerVisible: true,
         },
         {
-          layerName: '路网',
-          layerKey: 'road',
-          layerIcon: '',
+          layerName: "路网",
+          layerKey: "road",
+          layerIcon: "",
           layerVisible: true,
           dynamicLineData: yanAnRoad,
         },
         {
-          layerName: '河流水系',
-          layerKey: 'waterLake',
-          layerIcon: '',
+          layerName: "河流水系",
+          layerKey: "waterLake",
+          layerIcon: "",
           layerVisible: true,
           dynamicLineData: yanAnWater,
         },
         {
-          layerName: '防洪河道',
-          layerKey: 'fangHongWater',
-          layerIcon: '',
+          layerName: "防洪河道",
+          layerKey: "fangHongWater",
+          layerIcon: "",
           layerVisible: false,
           lineWithLabel: yanAnSmallWater,
         },
         {
-          layerName: '河堤疏浚',
-          layerKey: 'heDiShuJun',
-          layerIcon: '',
+          layerName: "河堤疏浚",
+          layerKey: "heDiShuJun",
+          layerIcon: "",
           layerVisible: false,
           lineWithLabel: heDiShuJun,
         },
         {
-          layerName: '河堤加固',
-          layerKey: 'heDiJiaGu',
-          layerIcon: '',
+          layerName: "河堤加固",
+          layerKey: "heDiJiaGu",
+          layerIcon: "",
           layerVisible: false,
           lineWithLabel: heDiJiaGu,
         },
         {
-          layerName: '岸线改造',
-          layerKey: 'anXianGaiZao',
-          layerIcon: '',
+          layerName: "岸线改造",
+          layerKey: "anXianGaiZao",
+          layerIcon: "",
           layerVisible: false,
           lineWithLabel: anXianGaiZao,
         },
         {
-          layerName: '河堤治理',
-          layerKey: 'heDiZhiLi',
-          layerIcon: '',
+          layerName: "河堤治理",
+          layerKey: "heDiZhiLi",
+          layerIcon: "",
           layerVisible: false,
           lineWithLabel: anXianGaiZao,
         },
         {
-          layerName: '空间格局',
-          layerKey: 'yanAnNature',
-          layerIcon: '',
+          layerName: "空间格局",
+          layerKey: "yanAnNature",
+          layerIcon: "",
           layerVisible: false,
           areaData: yanAnNature,
         },
         {
-          layerName: '山体修复',
-          layerKey: 'yanAnMountain',
-          layerIcon: '',
+          layerName: "山体修复",
+          layerKey: "yanAnMountain",
+          layerIcon: "",
           layerVisible: false,
           lineWithLabel: yanAnMountain,
         },
       ],
     },
     {
-      title: '燃气系统',
+      title: "燃气系统",
       Show: true,
       children: [
         {
-          layerName: '燃气管网',
-          layerKey: 'rq_all',
+          layerName: "燃气管网",
+          layerKey: "rq_all",
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: '干管',
-          layerKey: 'rq_SZLH',
+          layerName: "干管",
+          layerKey: "rq_SZLH",
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: '干管流向',
-          layerKey: 'sx_ya_smx_rq_line_sz',
+          layerName: "干管流向",
+          layerKey: "sx_ya_smx_rq_line_sz",
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: '主管',
-          layerKey: 'rq_TYLH',
+          layerName: "主管",
+          layerKey: "rq_TYLH",
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: '主管流向',
-          layerKey: 'sx_ya_smx_rq_line_zg',
+          layerName: "主管流向",
+          layerKey: "sx_ya_smx_rq_line_zg",
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: '支管',
-          layerKey: 'rq_LGLH',
+          layerName: "支管",
+          layerKey: "rq_LGLH",
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: '支管流向',
-          layerKey: 'sx_ya_smx_rq_line_zhig',
+          layerName: "支管流向",
+          layerKey: "sx_ya_smx_rq_line_zhig",
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: '其他管网',
-          layerKey: 'rq_other',
+          layerName: "其他管网",
+          layerKey: "rq_other",
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: '调压器',
-          layerKey: 'tiaoYaQi',
+          layerName: "调压器",
+          layerKey: "tiaoYaQi",
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: '节点',
-          layerKey: 'rq_jieDian',
+          layerName: "节点",
+          layerKey: "rq_jieDian",
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: '极性保护',
-          layerKey: 'jiXingBaoHu',
+          layerName: "极性保护",
+          layerKey: "jiXingBaoHu",
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: '流量计',
-          layerKey: 'rq_liuLiangJi',
+          layerName: "流量计",
+          layerKey: "rq_liuLiangJi",
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: '未知设备',
-          layerKey: 'rq_unknow',
+          layerName: "未知设备",
+          layerKey: "rq_unknow",
           layerIcon: null,
           layerVisible: false,
         },
       ],
     },
     {
-      title: '雨水系统',
+      title: "雨水系统",
       Show: true,
       children: [
         {
-          layerName: '雨水分区',
-          layerKey: 'rainArea',
+          layerName: "雨水分区",
+          layerKey: "rainArea",
           layerIcon: null,
           layerVisible: false,
           areaData: yanAnRainArea,
         },
         {
-          layerName: '排水分区',
-          layerKey: 'paishuiArea',
+          layerName: "排水分区",
+          layerKey: "paishuiArea",
           layerIcon: null,
           layerVisible: false,
           areaData: yanAnPaiShuiArea,
         },
         {
-          layerName: '雨水管网',
-          layerKey: 'ysLine1',
+          layerName: "雨水管网",
+          layerKey: "ysLine1",
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: '雨水管网流向',
-          layerKey: 'pipeline_info_flow_ys',
+          layerName: "雨水管网流向",
+          layerKey: "pipeline_info_flow_ys",
           layerIcon: null,
           layerVisible: false,
         },
@@ -286,8 +290,8 @@
         //   layerVisible: false,
         // },
         {
-          layerName: '雨水泵站',
-          layerKey: 'YSBZ',
+          layerName: "雨水泵站",
+          layerKey: "YSBZ",
           layerIcon: null,
           layerVisible: false,
           data: yanAnYSBZ,
@@ -295,24 +299,24 @@
       ],
     },
     {
-      title: '污水系统',
+      title: "污水系统",
       Show: true,
       children: [
         {
-          layerName: '污水分区',
-          layerKey: 'sewageArea',
+          layerName: "污水分区",
+          layerKey: "sewageArea",
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: '污水管网',
-          layerKey: 'wsLine1',
+          layerName: "污水管网",
+          layerKey: "wsLine1",
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: '污水管网流向',
-          layerKey: 'pipeline_info_flow_ws1',
+          layerName: "污水管网流向",
+          layerKey: "pipeline_info_flow_ws1",
           layerIcon: null,
           layerVisible: false,
         },
@@ -329,8 +333,8 @@
         //   layerVisible: false,
         // },
         {
-          layerName: '污水处理厂',
-          layerKey: 'WSCLC',
+          layerName: "污水处理厂",
+          layerKey: "WSCLC",
           layerIcon: null,
           layerVisible: false,
           data: yanAnWSCLC,
@@ -338,40 +342,40 @@
       ],
     },
     {
-      title: '感知设备',
+      title: "感知设备",
       Show: true,
       children: [
         {
-          layerName: '内涝易涝点',
-          layerKey: 'yiLaoPoint',
+          layerName: "内涝易涝点",
+          layerKey: "yiLaoPoint",
           layerIcon: null,
           layerVisible: false,
           data: yanAnYiLao,
         },
         {
-          layerName: '内涝风险点',
-          layerKey: 'fengXianPoint',
+          layerName: "内涝风险点",
+          layerKey: "fengXianPoint",
           layerIcon: null,
           layerVisible: false,
           data: yanAnFengXian,
         },
         {
-          layerName: '排水管网监测',
-          layerKey: 'pipeSupervise',
+          layerName: "排水管网监测",
+          layerKey: "pipeSupervise",
           layerIcon: null,
           layerVisible: false,
           data: yanAnPipeSupervise,
         },
         {
-          layerName: '排水排口监测',
-          layerKey: 'PKsupervise',
+          layerName: "排水排口监测",
+          layerKey: "PKsupervise",
           layerIcon: null,
           layerVisible: false,
           data: yanAnPKSupervise,
         },
         {
-          layerName: '视频监测',
-          layerKey: 'video',
+          layerName: "视频监测",
+          layerKey: "video",
           layerIcon: null,
           layerVisible: false,
           data: yanAnVideo,
@@ -386,98 +390,111 @@
     .concat(AllData.LayerData[2].children)
     .concat(AllData.LayerData[3].children)
     .concat(AllData.LayerData[4].children);
-  initeLegend.forEach(element => {
+  initeLegend.forEach((element) => {
     element.layername = element.layerKey;
   });
-  bus.emit('setLegendData', initeLegend);
+  bus.emit("setLegendData", initeLegend);
 });
 const props = defineProps({
   ShowTuCheng: false,
+  showPanel: false,
 });
 
 watch(
   () => props.ShowTuCheng,
   (newValue, oldValue) => {
-    console.log('ShowTuCheng变化了', newValue, oldValue);
+    console.log("ShowTuCheng变化了", newValue, oldValue);
   },
   { immediate: true, deep: true }
 );
 
-const layerClick = async item2 => {
+const layerClick = async (item2) => {
   item2.layerVisible = !item2.layerVisible;
   item2.isCheck = item2.layerVisible;
-  console.info(`点击了名称为${item2.layerName},图层ID为${item2.layerKey}的图层,点击后的图层展示情况为${item2.layerVisible}`);
-  bus.emit('setLayerVisible', { layername: item2.layerKey, isCheck: item2.isCheck });
-  if (item2.layerKey == 'whiteMap') {
-    AllData.LayerData[0]['children'][0].layerVisible = false;
-    AllData.LayerData[0]['children'][2].layerVisible = false;
-    let { data } = await axios.get('/static/libs/mapbox/style/customs/whiteMapStyle.json');
+  console.info(
+    `点击了名称为${item2.layerName},图层ID为${item2.layerKey}的图层,点击后的图层展示情况为${item2.layerVisible}`
+  );
+  bus.emit("setLayerVisible", { layername: item2.layerKey, isCheck: item2.isCheck });
+  if (item2.layerKey == "whiteMap") {
+    AllData.LayerData[0]["children"][0].layerVisible = false;
+    AllData.LayerData[0]["children"][2].layerVisible = false;
+    let { data } = await axios.get(
+      "/static/libs/mapbox/style/customs/whiteMapStyle.json"
+    );
     let newMapStyle;
     let oldMapStyle = newfiberMapbox.map.getStyle();
     let oldIds = [];
-    oldMapStyle.layers.forEach(layer => {
+    oldMapStyle.layers.forEach((layer) => {
       oldIds.push(layer.id);
     });
-    let newIds = data.layers.map(i => i.id);
-    oldIds.forEach(id => {
+    let newIds = data.layers.map((i) => i.id);
+    oldIds.forEach((id) => {
       let layer = data.layers[newIds.indexOf(id)];
       if (!layer) return;
-      Object.keys(layer.layout || {}).forEach(key => newfiberMapbox.map.setLayoutProperty(id, key, layer.layout[key]));
-      Object.keys(layer.paint || {}).forEach(key => newfiberMapbox.map.setPaintProperty(id, key, layer.paint[key]));
+      Object.keys(layer.layout || {}).forEach((key) =>
+        newfiberMapbox.map.setLayoutProperty(id, key, layer.layout[key])
+      );
+      Object.keys(layer.paint || {}).forEach((key) =>
+        newfiberMapbox.map.setPaintProperty(id, key, layer.paint[key])
+      );
     });
-    newfiberMapbox.map.setLayoutProperty('newfiber-XYZLayer', 'visibility', 'none');
+    newfiberMapbox.map.setLayoutProperty("newfiber-XYZLayer", "visibility", "none");
   }
-  if (item2.layerKey == 'blackMap') {
-    AllData.LayerData[0]['children'][1].layerVisible = false;
-    AllData.LayerData[0]['children'][2].layerVisible = false;
-    let { data } = await axios.get('/static/libs/mapbox/style/customs/night-style.json');
+  if (item2.layerKey == "blackMap") {
+    AllData.LayerData[0]["children"][1].layerVisible = false;
+    AllData.LayerData[0]["children"][2].layerVisible = false;
+    let { data } = await axios.get("/static/libs/mapbox/style/customs/night-style.json");
     let newMapStyle;
     let oldMapStyle = newfiberMapbox.map.getStyle();
     let oldIds = [];
-    oldMapStyle.layers.forEach(layer => {
+    oldMapStyle.layers.forEach((layer) => {
       oldIds.push(layer.id);
     });
-    let newIds = data.layers.map(i => i.id);
-    oldIds.forEach(id => {
+    let newIds = data.layers.map((i) => i.id);
+    oldIds.forEach((id) => {
       let layer = data.layers[newIds.indexOf(id)];
       if (!layer) return;
-      Object.keys(layer.layout || {}).forEach(key => newfiberMapbox.map.setLayoutProperty(id, key, layer.layout[key]));
-      Object.keys(layer.paint || {}).forEach(key => newfiberMapbox.map.setPaintProperty(id, key, layer.paint[key]));
+      Object.keys(layer.layout || {}).forEach((key) =>
+        newfiberMapbox.map.setLayoutProperty(id, key, layer.layout[key])
+      );
+      Object.keys(layer.paint || {}).forEach((key) =>
+        newfiberMapbox.map.setPaintProperty(id, key, layer.paint[key])
+      );
     });
-    newfiberMapbox.map.setLayoutProperty('newfiber-XYZLayer', 'visibility', 'none');
+    newfiberMapbox.map.setLayoutProperty("newfiber-XYZLayer", "visibility", "none");
   }
-  if (item2.layerKey == 'imageMap') {
-    AllData.LayerData[0]['children'][0].layerVisible = false;
-    AllData.LayerData[0]['children'][1].layerVisible = false;
-    newfiberMapbox.map.setLayoutProperty('newfiber-XYZLayer', 'visibility', 'visible');
-    newfiberMapbox.map.moveLayer('newfiber-XYZLayer', 'buildingLayer');
+  if (item2.layerKey == "imageMap") {
+    AllData.LayerData[0]["children"][0].layerVisible = false;
+    AllData.LayerData[0]["children"][1].layerVisible = false;
+    newfiberMapbox.map.setLayoutProperty("newfiber-XYZLayer", "visibility", "visible");
+    newfiberMapbox.map.moveLayer("newfiber-XYZLayer", "buildingLayer");
   }
   if (item2.areaData) {
     if (item2.isCheck) {
       mapBoxVectorLayer.addGeojsonPolygonWithLabel(item2.layerKey, item2.areaData);
     } else {
-      mapBoxVectorLayer.removeByIds([item2.layerKey, item2.layerKey + '_label']);
+      mapBoxVectorLayer.removeByIds([item2.layerKey, item2.layerKey + "_label"]);
     }
   }
-  if (item2.layerKey == 'buildingLayer') {
+  if (item2.layerKey == "buildingLayer") {
     if (item2.isCheck) {
-      newfiberMapbox.map.setLayoutProperty('buildingLayer', 'visibility', 'visible');
+      newfiberMapbox.map.setLayoutProperty("buildingLayer", "visibility", "visible");
     } else {
-      newfiberMapbox.map.setLayoutProperty('buildingLayer', 'visibility', 'none');
+      newfiberMapbox.map.setLayoutProperty("buildingLayer", "visibility", "none");
     }
   }
   if (item2.lineWithLabel) {
     if (item2.isCheck) {
       mapBoxVectorLayer.addGeojsonLineWithLabel(item2.layerKey, item2.lineWithLabel);
-      if (item2.layerKey == 'fangHongWater') {
+      if (item2.layerKey == "fangHongWater") {
         let layer = new mapboxL7.LineLayer({
-          name: 'fangHongWater',
+          name: "fangHongWater",
         })
           .source(item2.lineWithLabel)
           .size(3)
-          .shape('line')
-          .texture('arrow')
-          .color('rgba(243, 26, 237,1)')
+          .shape("line")
+          .texture("arrow")
+          .color("rgba(243, 26, 237,1)")
           .animate({
             interval: 2, // 间隔
             duration: 3, // 持续时间，延时
@@ -488,29 +505,29 @@
             lineTexture: true, // 开启线的贴图功能
             iconStep: 200, // 设置贴图纹理的间距
             borderWidth: 0.4, // 默认文 0，最大有效值为 0.5
-            borderColor: '#fff', // 默认为 #ccc
+            borderColor: "#fff", // 默认为 #ccc
           });
         newfiberMapbox.addLayer(layer);
       }
     } else {
-      mapBoxVectorLayer.removeByIds([item2.layerKey, item2.layerKey + '_label']);
-      if (newfiberMapbox.getLayerByName('fangHongWater')) {
-        newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName('fangHongWater'));
+      mapBoxVectorLayer.removeByIds([item2.layerKey, item2.layerKey + "_label"]);
+      if (newfiberMapbox.getLayerByName("fangHongWater")) {
+        newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName("fangHongWater"));
       }
     }
   }
-  if (item2.layerKey == 'road') {
+  if (item2.layerKey == "road") {
     if (item2.isCheck) {
-      if (newfiberMapbox.getLayerByName('dynamicRoad')) {
-        newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName('dynamicRoad'));
+      if (newfiberMapbox.getLayerByName("dynamicRoad")) {
+        newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName("dynamicRoad"));
       }
       let layer = new mapboxL7.LineLayer({
-        name: 'dynamicRoad',
+        name: "dynamicRoad",
       })
         .source(item2.dynamicLineData)
         .size(1.3)
-        .shape('line')
-        .color('rgb(184, 184, 184)')
+        .shape("line")
+        .color("rgb(184, 184, 184)")
         .animate({
           interval: 1, // 间隔
           duration: 1.5, // 持续时间，延时
@@ -521,22 +538,22 @@
         });
       newfiberMapbox.addLayer(layer);
     } else {
-      newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName('dynamicRoad'));
+      newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName("dynamicRoad"));
     }
   }
-  if (item2.layerKey == 'waterLake') {
+  if (item2.layerKey == "waterLake") {
     if (item2.isCheck) {
-      if (newfiberMapbox.getLayerByName('waterLake')) {
-        newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName('waterLake'));
+      if (newfiberMapbox.getLayerByName("waterLake")) {
+        newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName("waterLake"));
       }
       let layer = new mapboxL7.LineLayer({
-        name: 'waterLake',
+        name: "waterLake",
       })
         .source(item2.dynamicLineData)
         .size(4)
-        .shape('line')
-        .texture('arrow')
-        .color('aqua')
+        .shape("line")
+        .texture("arrow")
+        .color("aqua")
         .animate({
           interval: 2, // 间隔
           duration: 3, // 持续时间，延时
@@ -547,29 +564,29 @@
           lineTexture: true, // 开启线的贴图功能
           iconStep: 200, // 设置贴图纹理的间距
           borderWidth: 0.4, // 默认文 0，最大有效值为 0.5
-          borderColor: '#fff', // 默认为 #ccc
+          borderColor: "#fff", // 默认为 #ccc
         });
       newfiberMapbox.addLayer(layer);
     } else {
-      newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName('waterLake'));
+      newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName("waterLake"));
     }
   }
-  if (item2.layerKey == 'centerCity') {
+  if (item2.layerKey == "centerCity") {
     if (item2.isCheck) {
-      mapBoxVectorLayer.addGeojsonLine('centerCity', item2.dynamicLineData, 4, 1, 0.5);
+      mapBoxVectorLayer.addGeojsonLine("centerCity", item2.dynamicLineData, 4, 1, 0.5);
     } else {
-      mapBoxVectorLayer.removeByIds(['centerCity']);
+      mapBoxVectorLayer.removeByIds(["centerCity"]);
     }
   }
 };
 onMounted(() => {
   // 清除所有的图层选中
-  bus.on('clearAllLayer', () => {
-    AllData.LayerData.forEach(data => {
-      data.children.map(item => {
+  bus.on("clearAllLayer", () => {
+    AllData.LayerData.forEach((data) => {
+      data.children.map((item) => {
         // item.layerVisible = true;
         // 做优化,全局为True,再执行隐藏工作,页面调用api太多了,这里应该只将展示的图层进行取消操作就行
-        item.layerVisible ? layerClick(item) : '';
+        item.layerVisible ? layerClick(item) : "";
       });
     });
   });
@@ -577,17 +594,17 @@
   /**控制图层的显示
    *@param LayerArraya:需要打开的图层名称,示例:["路网","中心城区"]
    */
-  bus.on('SetLayerShow', LayerArraya => {
-    AllData.LayerData.forEach(data => {
-      data.children.map(item => {
-        LayerArraya.includes(item.layerName) ? layerClick(item) : '';
+  bus.on("SetLayerShow", (LayerArraya) => {
+    AllData.LayerData.forEach((data) => {
+      data.children.map((item) => {
+        LayerArraya.includes(item.layerName) ? layerClick(item) : "";
       });
     });
   });
 });
 onBeforeUnmount(() => {
-  bus.off('clearAllLayer');
-  bus.off('SetLayerShow');
+  bus.off("clearAllLayer");
+  bus.off("SetLayerShow");
 });
 </script>
 
@@ -598,7 +615,7 @@
   position: absolute;
   top: 150px;
   right: 476px;
-  background: url('@/assets/images/Sponge_screen/TuChengBG.png') no-repeat center;
+  background: url("@/assets/images/Sponge_screen/TuChengBG.png") no-repeat center;
   background-size: contain;
   box-sizing: border-box;
   padding: 25px 0px;
@@ -614,7 +631,7 @@
       width: 190px;
       height: 25px;
       line-height: 25px;
-      background-image: url('@/assets/images/Sponge_screen/TuChengFenZuBG.png'),
+      background-image: url("@/assets/images/Sponge_screen/TuChengFenZuBG.png"),
         linear-gradient(to right, #1c899600, #1c8996, #1c899600);
       background-repeat: no-repeat;
       background-position: center;
@@ -672,6 +689,14 @@
     }
   }
 }
+.TuChengImgTrue {
+  transform: translateX(460px);
+  transition: all 1s ease;
+}
+.TuChengImgFalse {
+  transform: translateX(0px);
+  transition: all 1s ease;
+}
 // 动画
 /*
   进入和离开动画可以使用不同

diff --git a/src/views/oneMap/Echarts/publicEch.vue b/src/views/oneMap/Echarts/publicEch.vue
index 6ab1b7d..2816357 100644
--- a/src/views/oneMap/Echarts/publicEch.vue
+++ b/src/views/oneMap/Echarts/publicEch.vue
@@ -2,11 +2,11 @@
   <div :id="id" style="width: 100%; height: 100%"></div>
 </template>
 <script>
-import * as echarts from 'echarts';
-import { guid } from '@/utils/ruoyi';
-import { reactive, toRefs, onMounted, watch } from 'vue';
+import * as echarts from "echarts";
+import { guid } from "@/utils/ruoyi";
+import { reactive, toRefs, onMounted, watch } from "vue";
 export default {
-  name: 'line-chart',
+  name: "line-chart",
   props: {
     data: Object,
     refresh: Number,
@@ -28,28 +28,34 @@
       let chartDom = echarts.init(document.getElementById(allData.id));
 
       var shadowYData = [100, 100];
-      var barTopColor = ['#fe7285FF', '#1f93ffFF', '#31e1adFF', '#e4cd61FF', '#12f9ffFF'];
+      var barTopColor = ["#fe7285FF", "#1f93ffFF", "#31e1adFF", "#e4cd61FF", "#12f9ffFF"];
       var barBottomColor = [
-        'RGBA(154, 102, 125, 0.6)',
-        'RGBA(17, 109, 182, 0.6)',
-        'RGBA(27, 152, 136, 0.6)',
-        'RGBA(126, 138, 92, 0.6)',
-        'RGBA(10, 162, 178, 0.6)',
+        "RGBA(154, 102, 125, 0.6)",
+        "RGBA(17, 109, 182, 0.6)",
+        "RGBA(27, 152, 136, 0.6)",
+        "RGBA(126, 138, 92, 0.6)",
+        "RGBA(10, 162, 178, 0.6)",
       ];
       var barWidth = 20;
       var option;
       option = {
-        color: ['#3FFFC2', '#FFF21C'],
+        color: ["#3FFFC2", "#FFF21C"],
         tooltip: {
-          trigger: 'axis',
+          trigger: "axis",
 
-          formatter: params => {
+          formatter: (params) => {
             // console.log(params);
-            var relVal = '' + params[0].name;
+            var relVal = "" + params[0].name;
             for (var i = 0, l = params.length; i < l; i++) {
               if (params[i].seriesName) {
-                let unit = params[i].seriesName == '数量' ? '起' : '个';
-                relVal += '<br/>' + params[i].marker + params[i].seriesName + ' ' + params[i].value + unit;
+                let unit = params[i].seriesName == "数量" ? "起" : "个";
+                relVal +=
+                  "<br/>" +
+                  params[i].marker +
+                  params[i].seriesName +
+                  " " +
+                  params[i].value +
+                  unit;
               }
             }
             return relVal;
@@ -61,12 +67,12 @@
         },
         xAxis: [
           {
-            type: 'category',
+            type: "category",
             axisLine: {
               show: false,
               lineStyle: {
                 width: 2,
-                color: '#58b2ed',
+                color: "#58b2ed",
               },
             },
             splitLine: {
@@ -76,18 +82,18 @@
               show: false,
             },
             axisLabel: {
-              color: 'rgba(255,255,255,1)',
-              fontSize: 12,
-              fontFamily: 'AlibabaPuHuiTi',
+              color: "rgba(255,255,255,1)",
+              fontSize: 16,
+              fontFamily: "AlibabaPuHuiTi",
               formatter: function (params) {
-                var str = ''; // 最终拼接成的字符串
+                var str = ""; // 最终拼接成的字符串
                 var paramsLen = params.length; // 获取每项文字的个数
                 var len = 3; // 每行能显示的字的个数（根据实际情况自己设置）
                 var rowNumber = Math.ceil(paramsLen / len); // 换行的话，需要显示几行，向上取整
                 if (paramsLen > len) {
                   //大于设定的len就换行，不大于就不变化
                   for (var i = 0; i < rowNumber; i++) {
-                    var temp = ''; // 表示每一次截取的字符串
+                    var temp = ""; // 表示每一次截取的字符串
                     var start = i * len; // 开始截取的位置
                     var end = start + len; // 结束截取的位置
                     if (i == rowNumber - 1) {
@@ -95,7 +101,7 @@
                       temp = params.substring(start, paramsLen);
                     } else {
                       // 每一次拼接字符串并换行
-                      temp = params.substring(start, end) + '\n';
+                      temp = params.substring(start, end) + "\n";
                     }
                     str += temp; // 最终拼成的字符串
                   }
@@ -111,19 +117,19 @@
         ],
         yAxis: [
           {
-            name: '数量(起)',
-            type: 'value',
+            name: "数量(起)",
+            type: "value",
             axisLabel: {
-              color: '#3FFFC2',
+              color: "#3FFFC2",
               show: true,
             },
             nameTextStyle: {
-              color: '#3FFFC2',
+              color: "#3FFFC2",
             },
             splitLine: {
               lineStyle: {
-                type: 'dashed',
-                color: '#3FFFC2',
+                type: "dashed",
+                color: "#3FFFC2",
               },
             },
             alignTicks: true,
@@ -137,20 +143,20 @@
             bottom: 18,
             start: 0,
             end: 100,
-            handleSize: '100%',
-            fillerColor: '#94FA41',
-            borderColor: 'transparent',
-            backgroundColor: 'rgba(148, 250, 65, 0.2)',
+            handleSize: "100%",
+            fillerColor: "#94FA41",
+            borderColor: "transparent",
+            backgroundColor: "rgba(148, 250, 65, 0.2)",
             handleStyle: {
-              color: '#94FA41',
+              color: "#94FA41",
             },
             moveHandleSize: 0,
             textStyle: {
-              color: '#fff',
+              color: "#fff",
             },
           },
           {
-            type: 'inside',
+            type: "inside",
             show: true,
             height: 15,
             start: 1,
@@ -159,11 +165,11 @@
         ],
         series: [
           {
-            name: '数量',
-            type: 'pictorialBar',
+            name: "数量",
+            type: "pictorialBar",
             symbolSize: [barWidth, 10],
             symbolOffset: [0, -6],
-            symbolPosition: 'end',
+            symbolPosition: "end",
             z: 12,
             itemStyle: {
               normal: {
@@ -174,62 +180,62 @@
             },
             data: props.data.yAxis,
           },
+          // {
+          //   name: "",
+          //   type: "pictorialBar",
+          //   symbolSize: [barWidth + 10, 15],
+          //   symbolOffset: [0, 8],
+          //   z: 10,
+          //   itemStyle: {
+          //     normal: {
+          //       color: "transparent",
+          //       borderColor: barTopColor,
+          //       borderType: "solid",
+          //       borderWidth: 10,
+          //     },
+          //   },
+          //   data: props.data.yAxis,
+          // },
+          // {
+          //   name: '',
+          //   type: 'pictorialBar',
+          //   symbolSize: [barWidth + 20, 20],
+          //   symbolOffset: [0, 12],
+          //   z: 12,
+          //   itemStyle: {
+          //     normal: {
+          //       color: 'transparent',
+          //       borderColor: barTopColor,
+          //       borderType: 'solid',
+          //       borderWidth: 10,
+          //     },
+          //   },
+          //   data: props.data.yAxis,
+          //   stack: 'check',
+          // },
+          // {
+          //   name: "",
+          //   type: "pictorialBar",
+          //   symbolSize: [barWidth + 25, 20],
+          //   symbolOffset: [0, 12],
+          //   z: 12,
+          //   itemStyle: {
+          //     normal: {
+          //       color: "transparent",
+          //       borderColor: "#3ACDC5",
+          //       borderType: "solid",
+          //       borderWidth: 10,
+          //     },
+          //   },
+          //   data: props.data.yAxis,
+          //   stack: "check",
+          // },
           {
-            name: '',
-            type: 'pictorialBar',
-            symbolSize: [barWidth + 10, 15],
-            symbolOffset: [0, 8],
-            z: 10,
-            itemStyle: {
-              normal: {
-                color: 'transparent',
-                borderColor: barTopColor,
-                borderType: 'solid',
-                borderWidth: 10,
-              },
-            },
-            data: props.data.yAxis,
-          },
-          {
-            name: '',
-            type: 'pictorialBar',
-            symbolSize: [barWidth + 20, 20],
-            symbolOffset: [0, 12],
-            z: 12,
-            itemStyle: {
-              normal: {
-                color: 'transparent',
-                borderColor: barTopColor,
-                borderType: 'solid',
-                borderWidth: 10,
-              },
-            },
-            data: props.data.yAxis,
-            stack: 'check',
-          },
-          {
-            name: '',
-            type: 'pictorialBar',
-            symbolSize: [barWidth + 25, 20],
-            symbolOffset: [0, 12],
-            z: 12,
-            itemStyle: {
-              normal: {
-                color: 'transparent',
-                borderColor: '#3ACDC5',
-                borderType: 'solid',
-                borderWidth: 10,
-              },
-            },
-            data: props.data.yAxis,
-            stack: 'check',
-          },
-          {
-            name: '',
-            type: 'bar',
+            name: "",
+            type: "bar",
             barWidth: barWidth,
-            barGap: '10%', // Make series be overlap
-            barCateGoryGap: '10%',
+            barGap: "10%", // Make series be overlap
+            barCateGoryGap: "10%",
             itemStyle: {
               normal: {
                 color: function (params) {
@@ -264,7 +270,7 @@
     watch(
       () => props.refresh,
       () => {
-        console.log(props, 'propspropsprops');
+        console.log(props, "propspropsprops");
         if (allData.chartDom) {
           allData.chartDom.dispose();
           allData.chartDom = null;
@@ -276,7 +282,7 @@
     );
     onMounted(() => {
       init();
-      window.addEventListener('resize', resizeTheChart);
+      window.addEventListener("resize", resizeTheChart);
     });
     return {
       ...toRefs(allData),
diff --git a/src/views/oneMap/LayerControl/LayerControl.vue b/src/views/oneMap/LayerControl/LayerControl.vue
index 43fc007..2bdf6b8 100644
--- a/src/views/oneMap/LayerControl/LayerControl.vue
+++ b/src/views/oneMap/LayerControl/LayerControl.vue
@@ -1,6 +1,10 @@
 <template>
   <Transition name="slideTC">
-    <div class="LayerControl" v-show="ShowTuCheng">
+    <div
+      class="LayerControl"
+      v-show="ShowTuCheng"
+      :class="[showPanel ? 'TuChengImgTrue' : 'TuChengImgFalse']"
+    >
       <div class="GroupBox" v-for="item in AllData.LayerData" v-show="item.children">
         <div class="GroupName" @click="item.Show = !item.Show">{{ item.title }}</div>
         <!-- <Transition name="Group"> -->
@@ -30,30 +34,30 @@
 </template>
 
 <script setup name="LayerControl">
-import { ref, reactive, toRefs, onMounted } from 'vue';
+import { ref, reactive, toRefs, onMounted } from "vue";
 // 图层控制icon引入
-import { requireTuChengImg } from '@/utils/util';
-import yanAnPaiShuiArea from '@/assets/yanAnPaiShuiArea.json';
-import yanAnRoad from '@/assets/yanAnRoad.json';
-import yanAnWater from '@/assets/yanAnWater.json';
-import yanAnWSCLC from '@/assets/yanAnWSCLC.json';
-import yanAnCenterCity from '@/assets/yanAnCenterCity.json';
-import yanAnYSBZ from '@/assets/yanAnYSBZ.json';
-import yanAnYiLao from '@/assets/yanAnYiLao.json';
-import yanAnFengXian from '@/assets/yanAnFengXian.json';
-import yanAnPipeSupervise from '@/assets/yanAnPipeSupervise.json';
-import yanAnPKSupervise from '@/assets/yanAnPKSupervise.json';
-import yanAnNature from '@/assets/yanAnNature.json';
-import yanAnVideo from '@/assets/yanAnVideo.json';
-import yanAnMountain from '@/assets/yanAnMountain.json';
-import yanAnSmallWater from '@/assets/yanAnSmallWater.json';
-import yanAnRainArea from '@/assets/yanAnRainArea.json';
-import heDiJiaGu from '@/assets/heDiJiaGu.json';
-import heDiShuJun from '@/assets/heDiShuJun.json';
-import anXianGaiZao from '@/assets/anXianGaiZao.json';
-import bus from '@/bus';
-import axios from 'axios';
-import mapBoxVectorLayer from '@/utils/GISdocument/mapboxVectorLayer.js';
+import { requireTuChengImg } from "@/utils/util";
+import yanAnPaiShuiArea from "@/assets/yanAnPaiShuiArea.json";
+import yanAnRoad from "@/assets/yanAnRoad.json";
+import yanAnWater from "@/assets/yanAnWater.json";
+import yanAnWSCLC from "@/assets/yanAnWSCLC.json";
+import yanAnCenterCity from "@/assets/yanAnCenterCity.json";
+import yanAnYSBZ from "@/assets/yanAnYSBZ.json";
+import yanAnYiLao from "@/assets/yanAnYiLao.json";
+import yanAnFengXian from "@/assets/yanAnFengXian.json";
+import yanAnPipeSupervise from "@/assets/yanAnPipeSupervise.json";
+import yanAnPKSupervise from "@/assets/yanAnPKSupervise.json";
+import yanAnNature from "@/assets/yanAnNature.json";
+import yanAnVideo from "@/assets/yanAnVideo.json";
+import yanAnMountain from "@/assets/yanAnMountain.json";
+import yanAnSmallWater from "@/assets/yanAnSmallWater.json";
+import yanAnRainArea from "@/assets/yanAnRainArea.json";
+import heDiJiaGu from "@/assets/heDiJiaGu.json";
+import heDiShuJun from "@/assets/heDiShuJun.json";
+import anXianGaiZao from "@/assets/anXianGaiZao.json";
+import bus from "@/bus";
+import axios from "axios";
+import mapBoxVectorLayer from "@/utils/GISdocument/mapboxVectorLayer.js";
 const AllData = reactive({
   // 图层控制面板的渲染数据
   /**图层面板数据字段说明
@@ -66,216 +70,216 @@
    */
   LayerData: [
     {
-      title: '基本信息',
+      title: "基本信息",
       Show: true,
       children: [
         {
-          layerName: '蓝色地图',
-          layerKey: 'blackMap',
-          layerIcon: requireTuChengImg('zhongxinchengqu'),
+          layerName: "蓝色地图",
+          layerKey: "blackMap",
+          layerIcon: requireTuChengImg("zhongxinchengqu"),
           layerVisible: false,
         },
         {
-          layerName: '白色地图',
-          layerKey: 'whiteMap',
-          layerIcon: requireTuChengImg('zhongxinchengqu'),
+          layerName: "白色地图",
+          layerKey: "whiteMap",
+          layerIcon: requireTuChengImg("zhongxinchengqu"),
           layerVisible: false,
         },
         {
-          layerName: '影像地图',
-          layerKey: 'imageMap',
-          layerIcon: requireTuChengImg('zhongxinchengqu'),
+          layerName: "影像地图",
+          layerKey: "imageMap",
+          layerIcon: requireTuChengImg("zhongxinchengqu"),
           layerVisible: false,
         },
         {
-          layerName: '中心城区',
-          layerKey: 'centerCity',
-          layerIcon: requireTuChengImg('zhongxinchengqu'),
+          layerName: "中心城区",
+          layerKey: "centerCity",
+          layerIcon: requireTuChengImg("zhongxinchengqu"),
           layerVisible: false,
           dynamicLineData: yanAnCenterCity,
         },
         {
-          layerName: '三维建筑',
-          layerKey: 'buildingLayer',
-          layerIcon: '',
+          layerName: "三维建筑",
+          layerKey: "buildingLayer",
+          layerIcon: "",
           layerVisible: true,
         },
         {
-          layerName: '路网',
-          layerKey: 'road',
-          layerIcon: '',
+          layerName: "路网",
+          layerKey: "road",
+          layerIcon: "",
           layerVisible: true,
           dynamicLineData: yanAnRoad,
         },
         {
-          layerName: '河流水系',
-          layerKey: 'waterLake',
-          layerIcon: '',
+          layerName: "河流水系",
+          layerKey: "waterLake",
+          layerIcon: "",
           layerVisible: true,
           dynamicLineData: yanAnWater,
         },
         {
-          layerName: '防洪河道',
-          layerKey: 'fangHongWater',
-          layerIcon: '',
+          layerName: "防洪河道",
+          layerKey: "fangHongWater",
+          layerIcon: "",
           layerVisible: false,
           lineWithLabel: yanAnSmallWater,
         },
         {
-          layerName: '河堤疏浚',
-          layerKey: 'heDiShuJun',
-          layerIcon: '',
+          layerName: "河堤疏浚",
+          layerKey: "heDiShuJun",
+          layerIcon: "",
           layerVisible: false,
           lineWithLabel: heDiShuJun,
         },
         {
-          layerName: '河堤加固',
-          layerKey: 'heDiJiaGu',
-          layerIcon: '',
+          layerName: "河堤加固",
+          layerKey: "heDiJiaGu",
+          layerIcon: "",
           layerVisible: false,
           lineWithLabel: heDiJiaGu,
         },
         {
-          layerName: '岸线改造',
-          layerKey: 'anXianGaiZao',
-          layerIcon: '',
+          layerName: "岸线改造",
+          layerKey: "anXianGaiZao",
+          layerIcon: "",
           layerVisible: false,
           lineWithLabel: anXianGaiZao,
         },
         {
-          layerName: '河堤治理',
-          layerKey: 'heDiZhiLi',
-          layerIcon: '',
+          layerName: "河堤治理",
+          layerKey: "heDiZhiLi",
+          layerIcon: "",
           layerVisible: false,
           lineWithLabel: anXianGaiZao,
         },
         {
-          layerName: '空间格局',
-          layerKey: 'yanAnNature',
-          layerIcon: '',
+          layerName: "空间格局",
+          layerKey: "yanAnNature",
+          layerIcon: "",
           layerVisible: false,
           areaData: yanAnNature,
         },
         {
-          layerName: '山体修复',
-          layerKey: 'yanAnMountain',
-          layerIcon: '',
+          layerName: "山体修复",
+          layerKey: "yanAnMountain",
+          layerIcon: "",
           layerVisible: false,
           lineWithLabel: yanAnMountain,
         },
       ],
     },
     {
-      title: '燃气系统',
+      title: "燃气系统",
       Show: true,
       children: [
         {
-          layerName: '燃气管网',
-          layerKey: 'rq_all',
+          layerName: "燃气管网",
+          layerKey: "rq_all",
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: '干管',
-          layerKey: 'rq_SZLH',
+          layerName: "干管",
+          layerKey: "rq_SZLH",
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: '干管流向',
-          layerKey: 'sx_ya_smx_rq_line_sz',
+          layerName: "干管流向",
+          layerKey: "sx_ya_smx_rq_line_sz",
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: '主管',
-          layerKey: 'rq_TYLH',
+          layerName: "主管",
+          layerKey: "rq_TYLH",
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: '主管流向',
-          layerKey: 'sx_ya_smx_rq_line_zg',
+          layerName: "主管流向",
+          layerKey: "sx_ya_smx_rq_line_zg",
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: '支管',
-          layerKey: 'rq_LGLH',
+          layerName: "支管",
+          layerKey: "rq_LGLH",
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: '支管流向',
-          layerKey: 'sx_ya_smx_rq_line_zhig',
+          layerName: "支管流向",
+          layerKey: "sx_ya_smx_rq_line_zhig",
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: '其他管网',
-          layerKey: 'rq_other',
+          layerName: "其他管网",
+          layerKey: "rq_other",
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: '调压器',
-          layerKey: 'tiaoYaQi',
+          layerName: "调压器",
+          layerKey: "tiaoYaQi",
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: '节点',
-          layerKey: 'rq_jieDian',
+          layerName: "节点",
+          layerKey: "rq_jieDian",
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: '极性保护',
-          layerKey: 'jiXingBaoHu',
+          layerName: "极性保护",
+          layerKey: "jiXingBaoHu",
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: '流量计',
-          layerKey: 'rq_liuLiangJi',
+          layerName: "流量计",
+          layerKey: "rq_liuLiangJi",
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: '未知设备',
-          layerKey: 'rq_unknow',
+          layerName: "未知设备",
+          layerKey: "rq_unknow",
           layerIcon: null,
           layerVisible: false,
         },
       ],
     },
     {
-      title: '雨水系统',
+      title: "雨水系统",
       Show: true,
       children: [
         {
-          layerName: '雨水分区',
-          layerKey: 'rainArea',
+          layerName: "雨水分区",
+          layerKey: "rainArea",
           layerIcon: null,
           layerVisible: false,
           areaData: yanAnRainArea,
         },
         {
-          layerName: '排水分区',
-          layerKey: 'paishuiArea',
+          layerName: "排水分区",
+          layerKey: "paishuiArea",
           layerIcon: null,
           layerVisible: false,
           areaData: yanAnPaiShuiArea,
         },
         {
-          layerName: '雨水管网',
-          layerKey: 'ysLine1',
+          layerName: "雨水管网",
+          layerKey: "ysLine1",
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: '雨水管网流向',
-          layerKey: 'pipeline_info_flow_ys',
+          layerName: "雨水管网流向",
+          layerKey: "pipeline_info_flow_ys",
           layerIcon: null,
           layerVisible: false,
         },
@@ -286,8 +290,8 @@
         //   layerVisible: false,
         // },
         {
-          layerName: '雨水泵站',
-          layerKey: 'YSBZ',
+          layerName: "雨水泵站",
+          layerKey: "YSBZ",
           layerIcon: null,
           layerVisible: false,
           data: yanAnYSBZ,
@@ -295,24 +299,24 @@
       ],
     },
     {
-      title: '污水系统',
+      title: "污水系统",
       Show: true,
       children: [
         {
-          layerName: '污水分区',
-          layerKey: 'sewageArea',
+          layerName: "污水分区",
+          layerKey: "sewageArea",
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: '污水管网',
-          layerKey: 'wsLine1',
+          layerName: "污水管网",
+          layerKey: "wsLine1",
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: '污水管网流向',
-          layerKey: 'pipeline_info_flow_ws1',
+          layerName: "污水管网流向",
+          layerKey: "pipeline_info_flow_ws1",
           layerIcon: null,
           layerVisible: false,
         },
@@ -329,8 +333,8 @@
         //   layerVisible: false,
         // },
         {
-          layerName: '污水处理厂',
-          layerKey: 'WSCLC',
+          layerName: "污水处理厂",
+          layerKey: "WSCLC",
           layerIcon: null,
           layerVisible: false,
           data: yanAnWSCLC,
@@ -338,40 +342,40 @@
       ],
     },
     {
-      title: '感知设备',
+      title: "感知设备",
       Show: true,
       children: [
         {
-          layerName: '内涝易涝点',
-          layerKey: 'yiLaoPoint',
+          layerName: "内涝易涝点",
+          layerKey: "yiLaoPoint",
           layerIcon: null,
           layerVisible: false,
           data: yanAnYiLao,
         },
         {
-          layerName: '内涝风险点',
-          layerKey: 'fengXianPoint',
+          layerName: "内涝风险点",
+          layerKey: "fengXianPoint",
           layerIcon: null,
           layerVisible: false,
           data: yanAnFengXian,
         },
         {
-          layerName: '排水管网监测',
-          layerKey: 'pipeSupervise',
+          layerName: "排水管网监测",
+          layerKey: "pipeSupervise",
           layerIcon: null,
           layerVisible: false,
           data: yanAnPipeSupervise,
         },
         {
-          layerName: '排水排口监测',
-          layerKey: 'PKsupervise',
+          layerName: "排水排口监测",
+          layerKey: "PKsupervise",
           layerIcon: null,
           layerVisible: false,
           data: yanAnPKSupervise,
         },
         {
-          layerName: '视频监测',
-          layerKey: 'video',
+          layerName: "视频监测",
+          layerKey: "video",
           layerIcon: null,
           layerVisible: false,
           data: yanAnVideo,
@@ -386,98 +390,111 @@
     .concat(AllData.LayerData[2].children)
     .concat(AllData.LayerData[3].children)
     .concat(AllData.LayerData[4].children);
-  initeLegend.forEach(element => {
+  initeLegend.forEach((element) => {
     element.layername = element.layerKey;
   });
-  bus.emit('setLegendData', initeLegend);
+  bus.emit("setLegendData", initeLegend);
 });
 const props = defineProps({
   ShowTuCheng: false,
+  showPanel: false,
 });
 
 watch(
   () => props.ShowTuCheng,
   (newValue, oldValue) => {
-    console.log('ShowTuCheng变化了', newValue, oldValue);
+    console.log("ShowTuCheng变化了", newValue, oldValue);
   },
   { immediate: true, deep: true }
 );
 
-const layerClick = async item2 => {
+const layerClick = async (item2) => {
   item2.layerVisible = !item2.layerVisible;
   item2.isCheck = item2.layerVisible;
-  console.info(`点击了名称为${item2.layerName},图层ID为${item2.layerKey}的图层,点击后的图层展示情况为${item2.layerVisible}`);
-  bus.emit('setLayerVisible', { layername: item2.layerKey, isCheck: item2.isCheck });
-  if (item2.layerKey == 'whiteMap') {
-    AllData.LayerData[0]['children'][0].layerVisible = false;
-    AllData.LayerData[0]['children'][2].layerVisible = false;
-    let { data } = await axios.get('/static/libs/mapbox/style/customs/whiteMapStyle.json');
+  console.info(
+    `点击了名称为${item2.layerName},图层ID为${item2.layerKey}的图层,点击后的图层展示情况为${item2.layerVisible}`
+  );
+  bus.emit("setLayerVisible", { layername: item2.layerKey, isCheck: item2.isCheck });
+  if (item2.layerKey == "whiteMap") {
+    AllData.LayerData[0]["children"][0].layerVisible = false;
+    AllData.LayerData[0]["children"][2].layerVisible = false;
+    let { data } = await axios.get(
+      "/static/libs/mapbox/style/customs/whiteMapStyle.json"
+    );
     let newMapStyle;
     let oldMapStyle = newfiberMapbox.map.getStyle();
     let oldIds = [];
-    oldMapStyle.layers.forEach(layer => {
+    oldMapStyle.layers.forEach((layer) => {
       oldIds.push(layer.id);
     });
-    let newIds = data.layers.map(i => i.id);
-    oldIds.forEach(id => {
+    let newIds = data.layers.map((i) => i.id);
+    oldIds.forEach((id) => {
       let layer = data.layers[newIds.indexOf(id)];
       if (!layer) return;
-      Object.keys(layer.layout || {}).forEach(key => newfiberMapbox.map.setLayoutProperty(id, key, layer.layout[key]));
-      Object.keys(layer.paint || {}).forEach(key => newfiberMapbox.map.setPaintProperty(id, key, layer.paint[key]));
+      Object.keys(layer.layout || {}).forEach((key) =>
+        newfiberMapbox.map.setLayoutProperty(id, key, layer.layout[key])
+      );
+      Object.keys(layer.paint || {}).forEach((key) =>
+        newfiberMapbox.map.setPaintProperty(id, key, layer.paint[key])
+      );
     });
-    newfiberMapbox.map.setLayoutProperty('newfiber-XYZLayer', 'visibility', 'none');
+    newfiberMapbox.map.setLayoutProperty("newfiber-XYZLayer", "visibility", "none");
   }
-  if (item2.layerKey == 'blackMap') {
-    AllData.LayerData[0]['children'][1].layerVisible = false;
-    AllData.LayerData[0]['children'][2].layerVisible = false;
-    let { data } = await axios.get('/static/libs/mapbox/style/customs/night-style.json');
+  if (item2.layerKey == "blackMap") {
+    AllData.LayerData[0]["children"][1].layerVisible = false;
+    AllData.LayerData[0]["children"][2].layerVisible = false;
+    let { data } = await axios.get("/static/libs/mapbox/style/customs/night-style.json");
     let newMapStyle;
     let oldMapStyle = newfiberMapbox.map.getStyle();
     let oldIds = [];
-    oldMapStyle.layers.forEach(layer => {
+    oldMapStyle.layers.forEach((layer) => {
       oldIds.push(layer.id);
     });
-    let newIds = data.layers.map(i => i.id);
-    oldIds.forEach(id => {
+    let newIds = data.layers.map((i) => i.id);
+    oldIds.forEach((id) => {
       let layer = data.layers[newIds.indexOf(id)];
       if (!layer) return;
-      Object.keys(layer.layout || {}).forEach(key => newfiberMapbox.map.setLayoutProperty(id, key, layer.layout[key]));
-      Object.keys(layer.paint || {}).forEach(key => newfiberMapbox.map.setPaintProperty(id, key, layer.paint[key]));
+      Object.keys(layer.layout || {}).forEach((key) =>
+        newfiberMapbox.map.setLayoutProperty(id, key, layer.layout[key])
+      );
+      Object.keys(layer.paint || {}).forEach((key) =>
+        newfiberMapbox.map.setPaintProperty(id, key, layer.paint[key])
+      );
     });
-    newfiberMapbox.map.setLayoutProperty('newfiber-XYZLayer', 'visibility', 'none');
+    newfiberMapbox.map.setLayoutProperty("newfiber-XYZLayer", "visibility", "none");
   }
-  if (item2.layerKey == 'imageMap') {
-    AllData.LayerData[0]['children'][0].layerVisible = false;
-    AllData.LayerData[0]['children'][1].layerVisible = false;
-    newfiberMapbox.map.setLayoutProperty('newfiber-XYZLayer', 'visibility', 'visible');
-    newfiberMapbox.map.moveLayer('newfiber-XYZLayer', 'buildingLayer');
+  if (item2.layerKey == "imageMap") {
+    AllData.LayerData[0]["children"][0].layerVisible = false;
+    AllData.LayerData[0]["children"][1].layerVisible = false;
+    newfiberMapbox.map.setLayoutProperty("newfiber-XYZLayer", "visibility", "visible");
+    newfiberMapbox.map.moveLayer("newfiber-XYZLayer", "buildingLayer");
   }
   if (item2.areaData) {
     if (item2.isCheck) {
       mapBoxVectorLayer.addGeojsonPolygonWithLabel(item2.layerKey, item2.areaData);
     } else {
-      mapBoxVectorLayer.removeByIds([item2.layerKey, item2.layerKey + '_label']);
+      mapBoxVectorLayer.removeByIds([item2.layerKey, item2.layerKey + "_label"]);
     }
   }
-  if (item2.layerKey == 'buildingLayer') {
+  if (item2.layerKey == "buildingLayer") {
     if (item2.isCheck) {
-      newfiberMapbox.map.setLayoutProperty('buildingLayer', 'visibility', 'visible');
+      newfiberMapbox.map.setLayoutProperty("buildingLayer", "visibility", "visible");
     } else {
-      newfiberMapbox.map.setLayoutProperty('buildingLayer', 'visibility', 'none');
+      newfiberMapbox.map.setLayoutProperty("buildingLayer", "visibility", "none");
     }
   }
   if (item2.lineWithLabel) {
     if (item2.isCheck) {
       mapBoxVectorLayer.addGeojsonLineWithLabel(item2.layerKey, item2.lineWithLabel);
-      if (item2.layerKey == 'fangHongWater') {
+      if (item2.layerKey == "fangHongWater") {
         let layer = new mapboxL7.LineLayer({
-          name: 'fangHongWater',
+          name: "fangHongWater",
         })
           .source(item2.lineWithLabel)
           .size(3)
-          .shape('line')
-          .texture('arrow')
-          .color('rgba(243, 26, 237,1)')
+          .shape("line")
+          .texture("arrow")
+          .color("rgba(243, 26, 237,1)")
           .animate({
             interval: 2, // 间隔
             duration: 3, // 持续时间，延时
@@ -488,29 +505,29 @@
             lineTexture: true, // 开启线的贴图功能
             iconStep: 200, // 设置贴图纹理的间距
             borderWidth: 0.4, // 默认文 0，最大有效值为 0.5
-            borderColor: '#fff', // 默认为 #ccc
+            borderColor: "#fff", // 默认为 #ccc
           });
         newfiberMapbox.addLayer(layer);
       }
     } else {
-      mapBoxVectorLayer.removeByIds([item2.layerKey, item2.layerKey + '_label']);
-      if (newfiberMapbox.getLayerByName('fangHongWater')) {
-        newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName('fangHongWater'));
+      mapBoxVectorLayer.removeByIds([item2.layerKey, item2.layerKey + "_label"]);
+      if (newfiberMapbox.getLayerByName("fangHongWater")) {
+        newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName("fangHongWater"));
       }
     }
   }
-  if (item2.layerKey == 'road') {
+  if (item2.layerKey == "road") {
     if (item2.isCheck) {
-      if (newfiberMapbox.getLayerByName('dynamicRoad')) {
-        newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName('dynamicRoad'));
+      if (newfiberMapbox.getLayerByName("dynamicRoad")) {
+        newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName("dynamicRoad"));
       }
       let layer = new mapboxL7.LineLayer({
-        name: 'dynamicRoad',
+        name: "dynamicRoad",
       })
         .source(item2.dynamicLineData)
         .size(1.3)
-        .shape('line')
-        .color('rgb(184, 184, 184)')
+        .shape("line")
+        .color("rgb(184, 184, 184)")
         .animate({
           interval: 1, // 间隔
           duration: 1.5, // 持续时间，延时
@@ -521,22 +538,22 @@
         });
       newfiberMapbox.addLayer(layer);
     } else {
-      newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName('dynamicRoad'));
+      newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName("dynamicRoad"));
     }
   }
-  if (item2.layerKey == 'waterLake') {
+  if (item2.layerKey == "waterLake") {
     if (item2.isCheck) {
-      if (newfiberMapbox.getLayerByName('waterLake')) {
-        newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName('waterLake'));
+      if (newfiberMapbox.getLayerByName("waterLake")) {
+        newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName("waterLake"));
       }
       let layer = new mapboxL7.LineLayer({
-        name: 'waterLake',
+        name: "waterLake",
       })
         .source(item2.dynamicLineData)
         .size(4)
-        .shape('line')
-        .texture('arrow')
-        .color('aqua')
+        .shape("line")
+        .texture("arrow")
+        .color("aqua")
         .animate({
           interval: 2, // 间隔
           duration: 3, // 持续时间，延时
@@ -547,29 +564,29 @@
           lineTexture: true, // 开启线的贴图功能
           iconStep: 200, // 设置贴图纹理的间距
           borderWidth: 0.4, // 默认文 0，最大有效值为 0.5
-          borderColor: '#fff', // 默认为 #ccc
+          borderColor: "#fff", // 默认为 #ccc
         });
       newfiberMapbox.addLayer(layer);
     } else {
-      newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName('waterLake'));
+      newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName("waterLake"));
     }
   }
-  if (item2.layerKey == 'centerCity') {
+  if (item2.layerKey == "centerCity") {
     if (item2.isCheck) {
-      mapBoxVectorLayer.addGeojsonLine('centerCity', item2.dynamicLineData, 4, 1, 0.5);
+      mapBoxVectorLayer.addGeojsonLine("centerCity", item2.dynamicLineData, 4, 1, 0.5);
     } else {
-      mapBoxVectorLayer.removeByIds(['centerCity']);
+      mapBoxVectorLayer.removeByIds(["centerCity"]);
     }
   }
 };
 onMounted(() => {
   // 清除所有的图层选中
-  bus.on('clearAllLayer', () => {
-    AllData.LayerData.forEach(data => {
-      data.children.map(item => {
+  bus.on("clearAllLayer", () => {
+    AllData.LayerData.forEach((data) => {
+      data.children.map((item) => {
         // item.layerVisible = true;
         // 做优化,全局为True,再执行隐藏工作,页面调用api太多了,这里应该只将展示的图层进行取消操作就行
-        item.layerVisible ? layerClick(item) : '';
+        item.layerVisible ? layerClick(item) : "";
       });
     });
   });
@@ -577,17 +594,17 @@
   /**控制图层的显示
    *@param LayerArraya:需要打开的图层名称,示例:["路网","中心城区"]
    */
-  bus.on('SetLayerShow', LayerArraya => {
-    AllData.LayerData.forEach(data => {
-      data.children.map(item => {
-        LayerArraya.includes(item.layerName) ? layerClick(item) : '';
+  bus.on("SetLayerShow", (LayerArraya) => {
+    AllData.LayerData.forEach((data) => {
+      data.children.map((item) => {
+        LayerArraya.includes(item.layerName) ? layerClick(item) : "";
       });
     });
   });
 });
 onBeforeUnmount(() => {
-  bus.off('clearAllLayer');
-  bus.off('SetLayerShow');
+  bus.off("clearAllLayer");
+  bus.off("SetLayerShow");
 });
 </script>
 
@@ -598,7 +615,7 @@
   position: absolute;
   top: 150px;
   right: 476px;
-  background: url('@/assets/images/Sponge_screen/TuChengBG.png') no-repeat center;
+  background: url("@/assets/images/Sponge_screen/TuChengBG.png") no-repeat center;
   background-size: contain;
   box-sizing: border-box;
   padding: 25px 0px;
@@ -614,7 +631,7 @@
       width: 190px;
       height: 25px;
       line-height: 25px;
-      background-image: url('@/assets/images/Sponge_screen/TuChengFenZuBG.png'),
+      background-image: url("@/assets/images/Sponge_screen/TuChengFenZuBG.png"),
         linear-gradient(to right, #1c899600, #1c8996, #1c899600);
       background-repeat: no-repeat;
       background-position: center;
@@ -672,6 +689,14 @@
     }
   }
 }
+.TuChengImgTrue {
+  transform: translateX(460px);
+  transition: all 1s ease;
+}
+.TuChengImgFalse {
+  transform: translateX(0px);
+  transition: all 1s ease;
+}
 // 动画
 /*
   进入和离开动画可以使用不同
diff --git a/src/views/oneMap/OverallOverview/LeftBox.vue b/src/views/oneMap/OverallOverview/LeftBox.vue
index e26dce0..70aad73 100644
--- a/src/views/oneMap/OverallOverview/LeftBox.vue
+++ b/src/views/oneMap/OverallOverview/LeftBox.vue
@@ -90,7 +90,13 @@
         <span class="tableHeaderList tableList4">监测时间</span>
         <span class="tableHeaderList tableList5">状态</span>
       </div>
-      <Vue3SeamlessScroll :list="FXJCData" :singleHeight="60" :singleWaitTime="1500" :hover="true" class="tableBody">
+      <Vue3SeamlessScroll
+        :list="FXJCData"
+        :singleHeight="60"
+        :singleWaitTime="1500"
+        :hover="true"
+        class="tableBody"
+      >
         <div class="tableBodyList" v-for="item in FXJCData">
           <span class="tableBodyList_span1" :title="item.name">{{ item.name }}</span>
           <span class="tableBodyList_span2" :title="item.jcdx">{{ item.jcdx }} </span>
@@ -130,75 +136,75 @@
 ]);
 const FXJCData = ref([
   {
-    name: '延安中学',
-    jcdx: '燃气管网',
-    jczb: '甲烷浓度4.4%VOL',
-    jcsj: '2024/10/23 11:54',
-    zk: '正常',
+    name: "延安中学",
+    jcdx: "燃气管网",
+    jczb: "甲烷浓度4.4%VOL",
+    jcsj: "2024/10/23 11:54",
+    zk: "正常",
   },
   {
-    name: '延安大学附属医院',
-    jcdx: '燃气管网',
-    jczb: '甲烷浓度4%VOL',
-    jcsj: '2024/10/23 12:14',
-    zk: '正常',
+    name: "延安大学附属医院",
+    jcdx: "燃气管网",
+    jczb: "甲烷浓度4%VOL",
+    jcsj: "2024/10/23 12:14",
+    zk: "正常",
   },
   {
-    name: '王家坪大桥',
-    jcdx: '桥梁结构',
-    jczb: '倾角+1°',
-    jcsj: '2024/10/23 12:24',
-    zk: '正常',
+    name: "王家坪大桥",
+    jcdx: "桥梁结构",
+    jczb: "倾角+1°",
+    jcsj: "2024/10/23 12:24",
+    zk: "正常",
   },
   {
-    name: '王家坪大桥',
-    jcdx: '桥梁结构',
-    jczb: '位移12mm',
-    jcsj: '2024/10/23 13:13',
-    zk: '正常',
+    name: "王家坪大桥",
+    jcdx: "桥梁结构",
+    jczb: "位移12mm",
+    jcsj: "2024/10/23 13:13",
+    zk: "正常",
   },
   {
-    name: '王家坪大桥',
-    jcdx: '桥梁外部荷载',
-    jczb: '均布荷载6.4kn/m',
-    jcsj: '2024/10/23 13:43',
-    zk: '正常',
+    name: "王家坪大桥",
+    jcdx: "桥梁外部荷载",
+    jczb: "均布荷载6.4kn/m",
+    jcsj: "2024/10/23 13:43",
+    zk: "正常",
   },
   {
-    name: '王家坪大桥',
-    jcdx: '桥梁气象环境',
-    jczb: '风速3.2m/s',
-    jcsj: '2024/10/23 14:03',
-    zk: '正常',
+    name: "王家坪大桥",
+    jcdx: "桥梁气象环境",
+    jczb: "风速3.2m/s",
+    jcsj: "2024/10/23 14:03",
+    zk: "正常",
   },
   {
-    name: '杨家岭隧道',
-    jcdx: '隧道结构',
-    jczb: '裂缝宽度0.12mm',
-    jcsj: '2024/10/23 14:05',
-    zk: '正常',
+    name: "杨家岭隧道",
+    jcdx: "隧道结构",
+    jczb: "裂缝宽度0.12mm",
+    jcsj: "2024/10/23 14:05",
+    zk: "正常",
   },
   {
-    name: '杨家岭隧道',
-    jcdx: '隧道结构',
-    jczb: '静应变+10με',
-    jcsj: '2024/10/23 14:25',
-    zk: '正常',
+    name: "杨家岭隧道",
+    jcdx: "隧道结构",
+    jczb: "静应变+10με",
+    jcsj: "2024/10/23 14:25",
+    zk: "正常",
   },
 
   {
-    name: '王家坪旧址门口',
-    jcdx: '积水液位',
-    jczb: '水深0m',
-    jcsj: '2024/10/23 15:21',
-    zk: '正常',
+    name: "王家坪旧址门口",
+    jcdx: "积水液位",
+    jczb: "水深0m",
+    jcsj: "2024/10/23 15:21",
+    zk: "正常",
   },
   {
-    name: '大砭沟与北大街交叉口',
-    jcdx: '积水液位',
-    jczb: '水深0m',
-    jcsj: '2024/10/23 15:25',
-    zk: '正常',
+    name: "大砭沟与北大街交叉口",
+    jcdx: "积水液位",
+    jczb: "水深0m",
+    jcsj: "2024/10/23 15:25",
+    zk: "正常",
   },
 ]);
 const yxjcname = ref("7天");
@@ -327,6 +333,7 @@
         text-align: center;
         margin-top: 5px;
         margin-left: 10px;
+        font-size: 16px;
       }
       .activedright {
         border: 1px solid #2cfce9;
@@ -387,7 +394,7 @@
             .gw {
               font-family: Source Han Sans CN;
               font-weight: bold;
-              font-size: 14px;
+              font-size: 16px;
               color: #85d2d4;
               padding-left: 5px;
               // background: yellow;
@@ -404,10 +411,10 @@
             }
             .gl {
               font-family: Source Han Sans CN;
-              font-weight: bold;
-              font-size: 14px;
-              color: #34909f;
               padding-left: 10px;
+              font-weight: bold;
+              font-size: 16px;
+              color: #85d2d4;
             }
           }
         }
@@ -462,7 +469,7 @@
         .head-right {
           margin-top: 2px;
           cursor: pointer;
-          font-size: 14px;
+          font-size: 16px;
           color: #ffffff;
           display: flex;
           line-height: 18px;

diff --git a/src/views/oneMap/Echarts/publicEch.vue b/src/views/oneMap/Echarts/publicEch.vue
index 6ab1b7d..2816357 100644
--- a/src/views/oneMap/Echarts/publicEch.vue
+++ b/src/views/oneMap/Echarts/publicEch.vue
@@ -2,11 +2,11 @@
   <div :id="id" style="width: 100%; height: 100%"></div>
 </template>
 <script>
-import * as echarts from 'echarts';
-import { guid } from '@/utils/ruoyi';
-import { reactive, toRefs, onMounted, watch } from 'vue';
+import * as echarts from "echarts";
+import { guid } from "@/utils/ruoyi";
+import { reactive, toRefs, onMounted, watch } from "vue";
 export default {
-  name: 'line-chart',
+  name: "line-chart",
   props: {
     data: Object,
     refresh: Number,
@@ -28,28 +28,34 @@
       let chartDom = echarts.init(document.getElementById(allData.id));
 
       var shadowYData = [100, 100];
-      var barTopColor = ['#fe7285FF', '#1f93ffFF', '#31e1adFF', '#e4cd61FF', '#12f9ffFF'];
+      var barTopColor = ["#fe7285FF", "#1f93ffFF", "#31e1adFF", "#e4cd61FF", "#12f9ffFF"];
       var barBottomColor = [
-        'RGBA(154, 102, 125, 0.6)',
-        'RGBA(17, 109, 182, 0.6)',
-        'RGBA(27, 152, 136, 0.6)',
-        'RGBA(126, 138, 92, 0.6)',
-        'RGBA(10, 162, 178, 0.6)',
+        "RGBA(154, 102, 125, 0.6)",
+        "RGBA(17, 109, 182, 0.6)",
+        "RGBA(27, 152, 136, 0.6)",
+        "RGBA(126, 138, 92, 0.6)",
+        "RGBA(10, 162, 178, 0.6)",
       ];
       var barWidth = 20;
       var option;
       option = {
-        color: ['#3FFFC2', '#FFF21C'],
+        color: ["#3FFFC2", "#FFF21C"],
         tooltip: {
-          trigger: 'axis',
+          trigger: "axis",
 
-          formatter: params => {
+          formatter: (params) => {
             // console.log(params);
-            var relVal = '' + params[0].name;
+            var relVal = "" + params[0].name;
             for (var i = 0, l = params.length; i < l; i++) {
               if (params[i].seriesName) {
-                let unit = params[i].seriesName == '数量' ? '起' : '个';
-                relVal += '<br/>' + params[i].marker + params[i].seriesName + ' ' + params[i].value + unit;
+                let unit = params[i].seriesName == "数量" ? "起" : "个";
+                relVal +=
+                  "<br/>" +
+                  params[i].marker +
+                  params[i].seriesName +
+                  " " +
+                  params[i].value +
+                  unit;
               }
             }
             return relVal;
@@ -61,12 +67,12 @@
         },
         xAxis: [
           {
-            type: 'category',
+            type: "category",
             axisLine: {
               show: false,
               lineStyle: {
                 width: 2,
-                color: '#58b2ed',
+                color: "#58b2ed",
               },
             },
             splitLine: {
@@ -76,18 +82,18 @@
               show: false,
             },
             axisLabel: {
-              color: 'rgba(255,255,255,1)',
-              fontSize: 12,
-              fontFamily: 'AlibabaPuHuiTi',
+              color: "rgba(255,255,255,1)",
+              fontSize: 16,
+              fontFamily: "AlibabaPuHuiTi",
               formatter: function (params) {
-                var str = ''; // 最终拼接成的字符串
+                var str = ""; // 最终拼接成的字符串
                 var paramsLen = params.length; // 获取每项文字的个数
                 var len = 3; // 每行能显示的字的个数（根据实际情况自己设置）
                 var rowNumber = Math.ceil(paramsLen / len); // 换行的话，需要显示几行，向上取整
                 if (paramsLen > len) {
                   //大于设定的len就换行，不大于就不变化
                   for (var i = 0; i < rowNumber; i++) {
-                    var temp = ''; // 表示每一次截取的字符串
+                    var temp = ""; // 表示每一次截取的字符串
                     var start = i * len; // 开始截取的位置
                     var end = start + len; // 结束截取的位置
                     if (i == rowNumber - 1) {
@@ -95,7 +101,7 @@
                       temp = params.substring(start, paramsLen);
                     } else {
                       // 每一次拼接字符串并换行
-                      temp = params.substring(start, end) + '\n';
+                      temp = params.substring(start, end) + "\n";
                     }
                     str += temp; // 最终拼成的字符串
                   }
@@ -111,19 +117,19 @@
         ],
         yAxis: [
           {
-            name: '数量(起)',
-            type: 'value',
+            name: "数量(起)",
+            type: "value",
             axisLabel: {
-              color: '#3FFFC2',
+              color: "#3FFFC2",
               show: true,
             },
             nameTextStyle: {
-              color: '#3FFFC2',
+              color: "#3FFFC2",
             },
             splitLine: {
               lineStyle: {
-                type: 'dashed',
-                color: '#3FFFC2',
+                type: "dashed",
+                color: "#3FFFC2",
               },
             },
             alignTicks: true,
@@ -137,20 +143,20 @@
             bottom: 18,
             start: 0,
             end: 100,
-            handleSize: '100%',
-            fillerColor: '#94FA41',
-            borderColor: 'transparent',
-            backgroundColor: 'rgba(148, 250, 65, 0.2)',
+            handleSize: "100%",
+            fillerColor: "#94FA41",
+            borderColor: "transparent",
+            backgroundColor: "rgba(148, 250, 65, 0.2)",
             handleStyle: {
-              color: '#94FA41',
+              color: "#94FA41",
             },
             moveHandleSize: 0,
             textStyle: {
-              color: '#fff',
+              color: "#fff",
             },
           },
           {
-            type: 'inside',
+            type: "inside",
             show: true,
             height: 15,
             start: 1,
@@ -159,11 +165,11 @@
         ],
         series: [
           {
-            name: '数量',
-            type: 'pictorialBar',
+            name: "数量",
+            type: "pictorialBar",
             symbolSize: [barWidth, 10],
             symbolOffset: [0, -6],
-            symbolPosition: 'end',
+            symbolPosition: "end",
             z: 12,
             itemStyle: {
               normal: {
@@ -174,62 +180,62 @@
             },
             data: props.data.yAxis,
           },
+          // {
+          //   name: "",
+          //   type: "pictorialBar",
+          //   symbolSize: [barWidth + 10, 15],
+          //   symbolOffset: [0, 8],
+          //   z: 10,
+          //   itemStyle: {
+          //     normal: {
+          //       color: "transparent",
+          //       borderColor: barTopColor,
+          //       borderType: "solid",
+          //       borderWidth: 10,
+          //     },
+          //   },
+          //   data: props.data.yAxis,
+          // },
+          // {
+          //   name: '',
+          //   type: 'pictorialBar',
+          //   symbolSize: [barWidth + 20, 20],
+          //   symbolOffset: [0, 12],
+          //   z: 12,
+          //   itemStyle: {
+          //     normal: {
+          //       color: 'transparent',
+          //       borderColor: barTopColor,
+          //       borderType: 'solid',
+          //       borderWidth: 10,
+          //     },
+          //   },
+          //   data: props.data.yAxis,
+          //   stack: 'check',
+          // },
+          // {
+          //   name: "",
+          //   type: "pictorialBar",
+          //   symbolSize: [barWidth + 25, 20],
+          //   symbolOffset: [0, 12],
+          //   z: 12,
+          //   itemStyle: {
+          //     normal: {
+          //       color: "transparent",
+          //       borderColor: "#3ACDC5",
+          //       borderType: "solid",
+          //       borderWidth: 10,
+          //     },
+          //   },
+          //   data: props.data.yAxis,
+          //   stack: "check",
+          // },
           {
-            name: '',
-            type: 'pictorialBar',
-            symbolSize: [barWidth + 10, 15],
-            symbolOffset: [0, 8],
-            z: 10,
-            itemStyle: {
-              normal: {
-                color: 'transparent',
-                borderColor: barTopColor,
-                borderType: 'solid',
-                borderWidth: 10,
-              },
-            },
-            data: props.data.yAxis,
-          },
-          {
-            name: '',
-            type: 'pictorialBar',
-            symbolSize: [barWidth + 20, 20],
-            symbolOffset: [0, 12],
-            z: 12,
-            itemStyle: {
-              normal: {
-                color: 'transparent',
-                borderColor: barTopColor,
-                borderType: 'solid',
-                borderWidth: 10,
-              },
-            },
-            data: props.data.yAxis,
-            stack: 'check',
-          },
-          {
-            name: '',
-            type: 'pictorialBar',
-            symbolSize: [barWidth + 25, 20],
-            symbolOffset: [0, 12],
-            z: 12,
-            itemStyle: {
-              normal: {
-                color: 'transparent',
-                borderColor: '#3ACDC5',
-                borderType: 'solid',
-                borderWidth: 10,
-              },
-            },
-            data: props.data.yAxis,
-            stack: 'check',
-          },
-          {
-            name: '',
-            type: 'bar',
+            name: "",
+            type: "bar",
             barWidth: barWidth,
-            barGap: '10%', // Make series be overlap
-            barCateGoryGap: '10%',
+            barGap: "10%", // Make series be overlap
+            barCateGoryGap: "10%",
             itemStyle: {
               normal: {
                 color: function (params) {
@@ -264,7 +270,7 @@
     watch(
       () => props.refresh,
       () => {
-        console.log(props, 'propspropsprops');
+        console.log(props, "propspropsprops");
         if (allData.chartDom) {
           allData.chartDom.dispose();
           allData.chartDom = null;
@@ -276,7 +282,7 @@
     );
     onMounted(() => {
       init();
-      window.addEventListener('resize', resizeTheChart);
+      window.addEventListener("resize", resizeTheChart);
     });
     return {
       ...toRefs(allData),
diff --git a/src/views/oneMap/LayerControl/LayerControl.vue b/src/views/oneMap/LayerControl/LayerControl.vue
index 43fc007..2bdf6b8 100644
--- a/src/views/oneMap/LayerControl/LayerControl.vue
+++ b/src/views/oneMap/LayerControl/LayerControl.vue
@@ -1,6 +1,10 @@
 <template>
   <Transition name="slideTC">
-    <div class="LayerControl" v-show="ShowTuCheng">
+    <div
+      class="LayerControl"
+      v-show="ShowTuCheng"
+      :class="[showPanel ? 'TuChengImgTrue' : 'TuChengImgFalse']"
+    >
       <div class="GroupBox" v-for="item in AllData.LayerData" v-show="item.children">
         <div class="GroupName" @click="item.Show = !item.Show">{{ item.title }}</div>
         <!-- <Transition name="Group"> -->
@@ -30,30 +34,30 @@
 </template>
 
 <script setup name="LayerControl">
-import { ref, reactive, toRefs, onMounted } from 'vue';
+import { ref, reactive, toRefs, onMounted } from "vue";
 // 图层控制icon引入
-import { requireTuChengImg } from '@/utils/util';
-import yanAnPaiShuiArea from '@/assets/yanAnPaiShuiArea.json';
-import yanAnRoad from '@/assets/yanAnRoad.json';
-import yanAnWater from '@/assets/yanAnWater.json';
-import yanAnWSCLC from '@/assets/yanAnWSCLC.json';
-import yanAnCenterCity from '@/assets/yanAnCenterCity.json';
-import yanAnYSBZ from '@/assets/yanAnYSBZ.json';
-import yanAnYiLao from '@/assets/yanAnYiLao.json';
-import yanAnFengXian from '@/assets/yanAnFengXian.json';
-import yanAnPipeSupervise from '@/assets/yanAnPipeSupervise.json';
-import yanAnPKSupervise from '@/assets/yanAnPKSupervise.json';
-import yanAnNature from '@/assets/yanAnNature.json';
-import yanAnVideo from '@/assets/yanAnVideo.json';
-import yanAnMountain from '@/assets/yanAnMountain.json';
-import yanAnSmallWater from '@/assets/yanAnSmallWater.json';
-import yanAnRainArea from '@/assets/yanAnRainArea.json';
-import heDiJiaGu from '@/assets/heDiJiaGu.json';
-import heDiShuJun from '@/assets/heDiShuJun.json';
-import anXianGaiZao from '@/assets/anXianGaiZao.json';
-import bus from '@/bus';
-import axios from 'axios';
-import mapBoxVectorLayer from '@/utils/GISdocument/mapboxVectorLayer.js';
+import { requireTuChengImg } from "@/utils/util";
+import yanAnPaiShuiArea from "@/assets/yanAnPaiShuiArea.json";
+import yanAnRoad from "@/assets/yanAnRoad.json";
+import yanAnWater from "@/assets/yanAnWater.json";
+import yanAnWSCLC from "@/assets/yanAnWSCLC.json";
+import yanAnCenterCity from "@/assets/yanAnCenterCity.json";
+import yanAnYSBZ from "@/assets/yanAnYSBZ.json";
+import yanAnYiLao from "@/assets/yanAnYiLao.json";
+import yanAnFengXian from "@/assets/yanAnFengXian.json";
+import yanAnPipeSupervise from "@/assets/yanAnPipeSupervise.json";
+import yanAnPKSupervise from "@/assets/yanAnPKSupervise.json";
+import yanAnNature from "@/assets/yanAnNature.json";
+import yanAnVideo from "@/assets/yanAnVideo.json";
+import yanAnMountain from "@/assets/yanAnMountain.json";
+import yanAnSmallWater from "@/assets/yanAnSmallWater.json";
+import yanAnRainArea from "@/assets/yanAnRainArea.json";
+import heDiJiaGu from "@/assets/heDiJiaGu.json";
+import heDiShuJun from "@/assets/heDiShuJun.json";
+import anXianGaiZao from "@/assets/anXianGaiZao.json";
+import bus from "@/bus";
+import axios from "axios";
+import mapBoxVectorLayer from "@/utils/GISdocument/mapboxVectorLayer.js";
 const AllData = reactive({
   // 图层控制面板的渲染数据
   /**图层面板数据字段说明
@@ -66,216 +70,216 @@
    */
   LayerData: [
     {
-      title: '基本信息',
+      title: "基本信息",
       Show: true,
       children: [
         {
-          layerName: '蓝色地图',
-          layerKey: 'blackMap',
-          layerIcon: requireTuChengImg('zhongxinchengqu'),
+          layerName: "蓝色地图",
+          layerKey: "blackMap",
+          layerIcon: requireTuChengImg("zhongxinchengqu"),
           layerVisible: false,
         },
         {
-          layerName: '白色地图',
-          layerKey: 'whiteMap',
-          layerIcon: requireTuChengImg('zhongxinchengqu'),
+          layerName: "白色地图",
+          layerKey: "whiteMap",
+          layerIcon: requireTuChengImg("zhongxinchengqu"),
           layerVisible: false,
         },
         {
-          layerName: '影像地图',
-          layerKey: 'imageMap',
-          layerIcon: requireTuChengImg('zhongxinchengqu'),
+          layerName: "影像地图",
+          layerKey: "imageMap",
+          layerIcon: requireTuChengImg("zhongxinchengqu"),
           layerVisible: false,
         },
         {
-          layerName: '中心城区',
-          layerKey: 'centerCity',
-          layerIcon: requireTuChengImg('zhongxinchengqu'),
+          layerName: "中心城区",
+          layerKey: "centerCity",
+          layerIcon: requireTuChengImg("zhongxinchengqu"),
           layerVisible: false,
           dynamicLineData: yanAnCenterCity,
         },
         {
-          layerName: '三维建筑',
-          layerKey: 'buildingLayer',
-          layerIcon: '',
+          layerName: "三维建筑",
+          layerKey: "buildingLayer",
+          layerIcon: "",
           layerVisible: true,
         },
         {
-          layerName: '路网',
-          layerKey: 'road',
-          layerIcon: '',
+          layerName: "路网",
+          layerKey: "road",
+          layerIcon: "",
           layerVisible: true,
           dynamicLineData: yanAnRoad,
         },
         {
-          layerName: '河流水系',
-          layerKey: 'waterLake',
-          layerIcon: '',
+          layerName: "河流水系",
+          layerKey: "waterLake",
+          layerIcon: "",
           layerVisible: true,
           dynamicLineData: yanAnWater,
         },
         {
-          layerName: '防洪河道',
-          layerKey: 'fangHongWater',
-          layerIcon: '',
+          layerName: "防洪河道",
+          layerKey: "fangHongWater",
+          layerIcon: "",
           layerVisible: false,
           lineWithLabel: yanAnSmallWater,
         },
         {
-          layerName: '河堤疏浚',
-          layerKey: 'heDiShuJun',
-          layerIcon: '',
+          layerName: "河堤疏浚",
+          layerKey: "heDiShuJun",
+          layerIcon: "",
           layerVisible: false,
           lineWithLabel: heDiShuJun,
         },
         {
-          layerName: '河堤加固',
-          layerKey: 'heDiJiaGu',
-          layerIcon: '',
+          layerName: "河堤加固",
+          layerKey: "heDiJiaGu",
+          layerIcon: "",
           layerVisible: false,
           lineWithLabel: heDiJiaGu,
         },
         {
-          layerName: '岸线改造',
-          layerKey: 'anXianGaiZao',
-          layerIcon: '',
+          layerName: "岸线改造",
+          layerKey: "anXianGaiZao",
+          layerIcon: "",
           layerVisible: false,
           lineWithLabel: anXianGaiZao,
         },
         {
-          layerName: '河堤治理',
-          layerKey: 'heDiZhiLi',
-          layerIcon: '',
+          layerName: "河堤治理",
+          layerKey: "heDiZhiLi",
+          layerIcon: "",
           layerVisible: false,
           lineWithLabel: anXianGaiZao,
         },
         {
-          layerName: '空间格局',
-          layerKey: 'yanAnNature',
-          layerIcon: '',
+          layerName: "空间格局",
+          layerKey: "yanAnNature",
+          layerIcon: "",
           layerVisible: false,
           areaData: yanAnNature,
         },
         {
-          layerName: '山体修复',
-          layerKey: 'yanAnMountain',
-          layerIcon: '',
+          layerName: "山体修复",
+          layerKey: "yanAnMountain",
+          layerIcon: "",
           layerVisible: false,
           lineWithLabel: yanAnMountain,
         },
       ],
     },
     {
-      title: '燃气系统',
+      title: "燃气系统",
       Show: true,
       children: [
         {
-          layerName: '燃气管网',
-          layerKey: 'rq_all',
+          layerName: "燃气管网",
+          layerKey: "rq_all",
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: '干管',
-          layerKey: 'rq_SZLH',
+          layerName: "干管",
+          layerKey: "rq_SZLH",
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: '干管流向',
-          layerKey: 'sx_ya_smx_rq_line_sz',
+          layerName: "干管流向",
+          layerKey: "sx_ya_smx_rq_line_sz",
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: '主管',
-          layerKey: 'rq_TYLH',
+          layerName: "主管",
+          layerKey: "rq_TYLH",
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: '主管流向',
-          layerKey: 'sx_ya_smx_rq_line_zg',
+          layerName: "主管流向",
+          layerKey: "sx_ya_smx_rq_line_zg",
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: '支管',
-          layerKey: 'rq_LGLH',
+          layerName: "支管",
+          layerKey: "rq_LGLH",
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: '支管流向',
-          layerKey: 'sx_ya_smx_rq_line_zhig',
+          layerName: "支管流向",
+          layerKey: "sx_ya_smx_rq_line_zhig",
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: '其他管网',
-          layerKey: 'rq_other',
+          layerName: "其他管网",
+          layerKey: "rq_other",
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: '调压器',
-          layerKey: 'tiaoYaQi',
+          layerName: "调压器",
+          layerKey: "tiaoYaQi",
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: '节点',
-          layerKey: 'rq_jieDian',
+          layerName: "节点",
+          layerKey: "rq_jieDian",
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: '极性保护',
-          layerKey: 'jiXingBaoHu',
+          layerName: "极性保护",
+          layerKey: "jiXingBaoHu",
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: '流量计',
-          layerKey: 'rq_liuLiangJi',
+          layerName: "流量计",
+          layerKey: "rq_liuLiangJi",
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: '未知设备',
-          layerKey: 'rq_unknow',
+          layerName: "未知设备",
+          layerKey: "rq_unknow",
           layerIcon: null,
           layerVisible: false,
         },
       ],
     },
     {
-      title: '雨水系统',
+      title: "雨水系统",
       Show: true,
       children: [
         {
-          layerName: '雨水分区',
-          layerKey: 'rainArea',
+          layerName: "雨水分区",
+          layerKey: "rainArea",
           layerIcon: null,
           layerVisible: false,
           areaData: yanAnRainArea,
         },
         {
-          layerName: '排水分区',
-          layerKey: 'paishuiArea',
+          layerName: "排水分区",
+          layerKey: "paishuiArea",
           layerIcon: null,
           layerVisible: false,
           areaData: yanAnPaiShuiArea,
         },
         {
-          layerName: '雨水管网',
-          layerKey: 'ysLine1',
+          layerName: "雨水管网",
+          layerKey: "ysLine1",
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: '雨水管网流向',
-          layerKey: 'pipeline_info_flow_ys',
+          layerName: "雨水管网流向",
+          layerKey: "pipeline_info_flow_ys",
           layerIcon: null,
           layerVisible: false,
         },
@@ -286,8 +290,8 @@
         //   layerVisible: false,
         // },
         {
-          layerName: '雨水泵站',
-          layerKey: 'YSBZ',
+          layerName: "雨水泵站",
+          layerKey: "YSBZ",
           layerIcon: null,
           layerVisible: false,
           data: yanAnYSBZ,
@@ -295,24 +299,24 @@
       ],
     },
     {
-      title: '污水系统',
+      title: "污水系统",
       Show: true,
       children: [
         {
-          layerName: '污水分区',
-          layerKey: 'sewageArea',
+          layerName: "污水分区",
+          layerKey: "sewageArea",
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: '污水管网',
-          layerKey: 'wsLine1',
+          layerName: "污水管网",
+          layerKey: "wsLine1",
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: '污水管网流向',
-          layerKey: 'pipeline_info_flow_ws1',
+          layerName: "污水管网流向",
+          layerKey: "pipeline_info_flow_ws1",
           layerIcon: null,
           layerVisible: false,
         },
@@ -329,8 +333,8 @@
         //   layerVisible: false,
         // },
         {
-          layerName: '污水处理厂',
-          layerKey: 'WSCLC',
+          layerName: "污水处理厂",
+          layerKey: "WSCLC",
           layerIcon: null,
           layerVisible: false,
           data: yanAnWSCLC,
@@ -338,40 +342,40 @@
       ],
     },
     {
-      title: '感知设备',
+      title: "感知设备",
       Show: true,
       children: [
         {
-          layerName: '内涝易涝点',
-          layerKey: 'yiLaoPoint',
+          layerName: "内涝易涝点",
+          layerKey: "yiLaoPoint",
           layerIcon: null,
           layerVisible: false,
           data: yanAnYiLao,
         },
         {
-          layerName: '内涝风险点',
-          layerKey: 'fengXianPoint',
+          layerName: "内涝风险点",
+          layerKey: "fengXianPoint",
           layerIcon: null,
           layerVisible: false,
           data: yanAnFengXian,
         },
         {
-          layerName: '排水管网监测',
-          layerKey: 'pipeSupervise',
+          layerName: "排水管网监测",
+          layerKey: "pipeSupervise",
           layerIcon: null,
           layerVisible: false,
           data: yanAnPipeSupervise,
         },
         {
-          layerName: '排水排口监测',
-          layerKey: 'PKsupervise',
+          layerName: "排水排口监测",
+          layerKey: "PKsupervise",
           layerIcon: null,
           layerVisible: false,
           data: yanAnPKSupervise,
         },
         {
-          layerName: '视频监测',
-          layerKey: 'video',
+          layerName: "视频监测",
+          layerKey: "video",
           layerIcon: null,
           layerVisible: false,
           data: yanAnVideo,
@@ -386,98 +390,111 @@
     .concat(AllData.LayerData[2].children)
     .concat(AllData.LayerData[3].children)
     .concat(AllData.LayerData[4].children);
-  initeLegend.forEach(element => {
+  initeLegend.forEach((element) => {
     element.layername = element.layerKey;
   });
-  bus.emit('setLegendData', initeLegend);
+  bus.emit("setLegendData", initeLegend);
 });
 const props = defineProps({
   ShowTuCheng: false,
+  showPanel: false,
 });
 
 watch(
   () => props.ShowTuCheng,
   (newValue, oldValue) => {
-    console.log('ShowTuCheng变化了', newValue, oldValue);
+    console.log("ShowTuCheng变化了", newValue, oldValue);
   },
   { immediate: true, deep: true }
 );
 
-const layerClick = async item2 => {
+const layerClick = async (item2) => {
   item2.layerVisible = !item2.layerVisible;
   item2.isCheck = item2.layerVisible;
-  console.info(`点击了名称为${item2.layerName},图层ID为${item2.layerKey}的图层,点击后的图层展示情况为${item2.layerVisible}`);
-  bus.emit('setLayerVisible', { layername: item2.layerKey, isCheck: item2.isCheck });
-  if (item2.layerKey == 'whiteMap') {
-    AllData.LayerData[0]['children'][0].layerVisible = false;
-    AllData.LayerData[0]['children'][2].layerVisible = false;
-    let { data } = await axios.get('/static/libs/mapbox/style/customs/whiteMapStyle.json');
+  console.info(
+    `点击了名称为${item2.layerName},图层ID为${item2.layerKey}的图层,点击后的图层展示情况为${item2.layerVisible}`
+  );
+  bus.emit("setLayerVisible", { layername: item2.layerKey, isCheck: item2.isCheck });
+  if (item2.layerKey == "whiteMap") {
+    AllData.LayerData[0]["children"][0].layerVisible = false;
+    AllData.LayerData[0]["children"][2].layerVisible = false;
+    let { data } = await axios.get(
+      "/static/libs/mapbox/style/customs/whiteMapStyle.json"
+    );
     let newMapStyle;
     let oldMapStyle = newfiberMapbox.map.getStyle();
     let oldIds = [];
-    oldMapStyle.layers.forEach(layer => {
+    oldMapStyle.layers.forEach((layer) => {
       oldIds.push(layer.id);
     });
-    let newIds = data.layers.map(i => i.id);
-    oldIds.forEach(id => {
+    let newIds = data.layers.map((i) => i.id);
+    oldIds.forEach((id) => {
       let layer = data.layers[newIds.indexOf(id)];
       if (!layer) return;
-      Object.keys(layer.layout || {}).forEach(key => newfiberMapbox.map.setLayoutProperty(id, key, layer.layout[key]));
-      Object.keys(layer.paint || {}).forEach(key => newfiberMapbox.map.setPaintProperty(id, key, layer.paint[key]));
+      Object.keys(layer.layout || {}).forEach((key) =>
+        newfiberMapbox.map.setLayoutProperty(id, key, layer.layout[key])
+      );
+      Object.keys(layer.paint || {}).forEach((key) =>
+        newfiberMapbox.map.setPaintProperty(id, key, layer.paint[key])
+      );
     });
-    newfiberMapbox.map.setLayoutProperty('newfiber-XYZLayer', 'visibility', 'none');
+    newfiberMapbox.map.setLayoutProperty("newfiber-XYZLayer", "visibility", "none");
   }
-  if (item2.layerKey == 'blackMap') {
-    AllData.LayerData[0]['children'][1].layerVisible = false;
-    AllData.LayerData[0]['children'][2].layerVisible = false;
-    let { data } = await axios.get('/static/libs/mapbox/style/customs/night-style.json');
+  if (item2.layerKey == "blackMap") {
+    AllData.LayerData[0]["children"][1].layerVisible = false;
+    AllData.LayerData[0]["children"][2].layerVisible = false;
+    let { data } = await axios.get("/static/libs/mapbox/style/customs/night-style.json");
     let newMapStyle;
     let oldMapStyle = newfiberMapbox.map.getStyle();
     let oldIds = [];
-    oldMapStyle.layers.forEach(layer => {
+    oldMapStyle.layers.forEach((layer) => {
       oldIds.push(layer.id);
     });
-    let newIds = data.layers.map(i => i.id);
-    oldIds.forEach(id => {
+    let newIds = data.layers.map((i) => i.id);
+    oldIds.forEach((id) => {
       let layer = data.layers[newIds.indexOf(id)];
       if (!layer) return;
-      Object.keys(layer.layout || {}).forEach(key => newfiberMapbox.map.setLayoutProperty(id, key, layer.layout[key]));
-      Object.keys(layer.paint || {}).forEach(key => newfiberMapbox.map.setPaintProperty(id, key, layer.paint[key]));
+      Object.keys(layer.layout || {}).forEach((key) =>
+        newfiberMapbox.map.setLayoutProperty(id, key, layer.layout[key])
+      );
+      Object.keys(layer.paint || {}).forEach((key) =>
+        newfiberMapbox.map.setPaintProperty(id, key, layer.paint[key])
+      );
     });
-    newfiberMapbox.map.setLayoutProperty('newfiber-XYZLayer', 'visibility', 'none');
+    newfiberMapbox.map.setLayoutProperty("newfiber-XYZLayer", "visibility", "none");
   }
-  if (item2.layerKey == 'imageMap') {
-    AllData.LayerData[0]['children'][0].layerVisible = false;
-    AllData.LayerData[0]['children'][1].layerVisible = false;
-    newfiberMapbox.map.setLayoutProperty('newfiber-XYZLayer', 'visibility', 'visible');
-    newfiberMapbox.map.moveLayer('newfiber-XYZLayer', 'buildingLayer');
+  if (item2.layerKey == "imageMap") {
+    AllData.LayerData[0]["children"][0].layerVisible = false;
+    AllData.LayerData[0]["children"][1].layerVisible = false;
+    newfiberMapbox.map.setLayoutProperty("newfiber-XYZLayer", "visibility", "visible");
+    newfiberMapbox.map.moveLayer("newfiber-XYZLayer", "buildingLayer");
   }
   if (item2.areaData) {
     if (item2.isCheck) {
       mapBoxVectorLayer.addGeojsonPolygonWithLabel(item2.layerKey, item2.areaData);
     } else {
-      mapBoxVectorLayer.removeByIds([item2.layerKey, item2.layerKey + '_label']);
+      mapBoxVectorLayer.removeByIds([item2.layerKey, item2.layerKey + "_label"]);
     }
   }
-  if (item2.layerKey == 'buildingLayer') {
+  if (item2.layerKey == "buildingLayer") {
     if (item2.isCheck) {
-      newfiberMapbox.map.setLayoutProperty('buildingLayer', 'visibility', 'visible');
+      newfiberMapbox.map.setLayoutProperty("buildingLayer", "visibility", "visible");
     } else {
-      newfiberMapbox.map.setLayoutProperty('buildingLayer', 'visibility', 'none');
+      newfiberMapbox.map.setLayoutProperty("buildingLayer", "visibility", "none");
     }
   }
   if (item2.lineWithLabel) {
     if (item2.isCheck) {
       mapBoxVectorLayer.addGeojsonLineWithLabel(item2.layerKey, item2.lineWithLabel);
-      if (item2.layerKey == 'fangHongWater') {
+      if (item2.layerKey == "fangHongWater") {
         let layer = new mapboxL7.LineLayer({
-          name: 'fangHongWater',
+          name: "fangHongWater",
         })
           .source(item2.lineWithLabel)
           .size(3)
-          .shape('line')
-          .texture('arrow')
-          .color('rgba(243, 26, 237,1)')
+          .shape("line")
+          .texture("arrow")
+          .color("rgba(243, 26, 237,1)")
           .animate({
             interval: 2, // 间隔
             duration: 3, // 持续时间，延时
@@ -488,29 +505,29 @@
             lineTexture: true, // 开启线的贴图功能
             iconStep: 200, // 设置贴图纹理的间距
             borderWidth: 0.4, // 默认文 0，最大有效值为 0.5
-            borderColor: '#fff', // 默认为 #ccc
+            borderColor: "#fff", // 默认为 #ccc
           });
         newfiberMapbox.addLayer(layer);
       }
     } else {
-      mapBoxVectorLayer.removeByIds([item2.layerKey, item2.layerKey + '_label']);
-      if (newfiberMapbox.getLayerByName('fangHongWater')) {
-        newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName('fangHongWater'));
+      mapBoxVectorLayer.removeByIds([item2.layerKey, item2.layerKey + "_label"]);
+      if (newfiberMapbox.getLayerByName("fangHongWater")) {
+        newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName("fangHongWater"));
       }
     }
   }
-  if (item2.layerKey == 'road') {
+  if (item2.layerKey == "road") {
     if (item2.isCheck) {
-      if (newfiberMapbox.getLayerByName('dynamicRoad')) {
-        newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName('dynamicRoad'));
+      if (newfiberMapbox.getLayerByName("dynamicRoad")) {
+        newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName("dynamicRoad"));
       }
       let layer = new mapboxL7.LineLayer({
-        name: 'dynamicRoad',
+        name: "dynamicRoad",
       })
         .source(item2.dynamicLineData)
         .size(1.3)
-        .shape('line')
-        .color('rgb(184, 184, 184)')
+        .shape("line")
+        .color("rgb(184, 184, 184)")
         .animate({
           interval: 1, // 间隔
           duration: 1.5, // 持续时间，延时
@@ -521,22 +538,22 @@
         });
       newfiberMapbox.addLayer(layer);
     } else {
-      newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName('dynamicRoad'));
+      newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName("dynamicRoad"));
     }
   }
-  if (item2.layerKey == 'waterLake') {
+  if (item2.layerKey == "waterLake") {
     if (item2.isCheck) {
-      if (newfiberMapbox.getLayerByName('waterLake')) {
-        newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName('waterLake'));
+      if (newfiberMapbox.getLayerByName("waterLake")) {
+        newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName("waterLake"));
       }
       let layer = new mapboxL7.LineLayer({
-        name: 'waterLake',
+        name: "waterLake",
       })
         .source(item2.dynamicLineData)
         .size(4)
-        .shape('line')
-        .texture('arrow')
-        .color('aqua')
+        .shape("line")
+        .texture("arrow")
+        .color("aqua")
         .animate({
           interval: 2, // 间隔
           duration: 3, // 持续时间，延时
@@ -547,29 +564,29 @@
           lineTexture: true, // 开启线的贴图功能
           iconStep: 200, // 设置贴图纹理的间距
           borderWidth: 0.4, // 默认文 0，最大有效值为 0.5
-          borderColor: '#fff', // 默认为 #ccc
+          borderColor: "#fff", // 默认为 #ccc
         });
       newfiberMapbox.addLayer(layer);
     } else {
-      newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName('waterLake'));
+      newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName("waterLake"));
     }
   }
-  if (item2.layerKey == 'centerCity') {
+  if (item2.layerKey == "centerCity") {
     if (item2.isCheck) {
-      mapBoxVectorLayer.addGeojsonLine('centerCity', item2.dynamicLineData, 4, 1, 0.5);
+      mapBoxVectorLayer.addGeojsonLine("centerCity", item2.dynamicLineData, 4, 1, 0.5);
     } else {
-      mapBoxVectorLayer.removeByIds(['centerCity']);
+      mapBoxVectorLayer.removeByIds(["centerCity"]);
     }
   }
 };
 onMounted(() => {
   // 清除所有的图层选中
-  bus.on('clearAllLayer', () => {
-    AllData.LayerData.forEach(data => {
-      data.children.map(item => {
+  bus.on("clearAllLayer", () => {
+    AllData.LayerData.forEach((data) => {
+      data.children.map((item) => {
         // item.layerVisible = true;
         // 做优化,全局为True,再执行隐藏工作,页面调用api太多了,这里应该只将展示的图层进行取消操作就行
-        item.layerVisible ? layerClick(item) : '';
+        item.layerVisible ? layerClick(item) : "";
       });
     });
   });
@@ -577,17 +594,17 @@
   /**控制图层的显示
    *@param LayerArraya:需要打开的图层名称,示例:["路网","中心城区"]
    */
-  bus.on('SetLayerShow', LayerArraya => {
-    AllData.LayerData.forEach(data => {
-      data.children.map(item => {
-        LayerArraya.includes(item.layerName) ? layerClick(item) : '';
+  bus.on("SetLayerShow", (LayerArraya) => {
+    AllData.LayerData.forEach((data) => {
+      data.children.map((item) => {
+        LayerArraya.includes(item.layerName) ? layerClick(item) : "";
       });
     });
   });
 });
 onBeforeUnmount(() => {
-  bus.off('clearAllLayer');
-  bus.off('SetLayerShow');
+  bus.off("clearAllLayer");
+  bus.off("SetLayerShow");
 });
 </script>
 
@@ -598,7 +615,7 @@
   position: absolute;
   top: 150px;
   right: 476px;
-  background: url('@/assets/images/Sponge_screen/TuChengBG.png') no-repeat center;
+  background: url("@/assets/images/Sponge_screen/TuChengBG.png") no-repeat center;
   background-size: contain;
   box-sizing: border-box;
   padding: 25px 0px;
@@ -614,7 +631,7 @@
       width: 190px;
       height: 25px;
       line-height: 25px;
-      background-image: url('@/assets/images/Sponge_screen/TuChengFenZuBG.png'),
+      background-image: url("@/assets/images/Sponge_screen/TuChengFenZuBG.png"),
         linear-gradient(to right, #1c899600, #1c8996, #1c899600);
       background-repeat: no-repeat;
       background-position: center;
@@ -672,6 +689,14 @@
     }
   }
 }
+.TuChengImgTrue {
+  transform: translateX(460px);
+  transition: all 1s ease;
+}
+.TuChengImgFalse {
+  transform: translateX(0px);
+  transition: all 1s ease;
+}
 // 动画
 /*
   进入和离开动画可以使用不同
diff --git a/src/views/oneMap/OverallOverview/LeftBox.vue b/src/views/oneMap/OverallOverview/LeftBox.vue
index e26dce0..70aad73 100644
--- a/src/views/oneMap/OverallOverview/LeftBox.vue
+++ b/src/views/oneMap/OverallOverview/LeftBox.vue
@@ -90,7 +90,13 @@
         <span class="tableHeaderList tableList4">监测时间</span>
         <span class="tableHeaderList tableList5">状态</span>
       </div>
-      <Vue3SeamlessScroll :list="FXJCData" :singleHeight="60" :singleWaitTime="1500" :hover="true" class="tableBody">
+      <Vue3SeamlessScroll
+        :list="FXJCData"
+        :singleHeight="60"
+        :singleWaitTime="1500"
+        :hover="true"
+        class="tableBody"
+      >
         <div class="tableBodyList" v-for="item in FXJCData">
           <span class="tableBodyList_span1" :title="item.name">{{ item.name }}</span>
           <span class="tableBodyList_span2" :title="item.jcdx">{{ item.jcdx }} </span>
@@ -130,75 +136,75 @@
 ]);
 const FXJCData = ref([
   {
-    name: '延安中学',
-    jcdx: '燃气管网',
-    jczb: '甲烷浓度4.4%VOL',
-    jcsj: '2024/10/23 11:54',
-    zk: '正常',
+    name: "延安中学",
+    jcdx: "燃气管网",
+    jczb: "甲烷浓度4.4%VOL",
+    jcsj: "2024/10/23 11:54",
+    zk: "正常",
   },
   {
-    name: '延安大学附属医院',
-    jcdx: '燃气管网',
-    jczb: '甲烷浓度4%VOL',
-    jcsj: '2024/10/23 12:14',
-    zk: '正常',
+    name: "延安大学附属医院",
+    jcdx: "燃气管网",
+    jczb: "甲烷浓度4%VOL",
+    jcsj: "2024/10/23 12:14",
+    zk: "正常",
   },
   {
-    name: '王家坪大桥',
-    jcdx: '桥梁结构',
-    jczb: '倾角+1°',
-    jcsj: '2024/10/23 12:24',
-    zk: '正常',
+    name: "王家坪大桥",
+    jcdx: "桥梁结构",
+    jczb: "倾角+1°",
+    jcsj: "2024/10/23 12:24",
+    zk: "正常",
   },
   {
-    name: '王家坪大桥',
-    jcdx: '桥梁结构',
-    jczb: '位移12mm',
-    jcsj: '2024/10/23 13:13',
-    zk: '正常',
+    name: "王家坪大桥",
+    jcdx: "桥梁结构",
+    jczb: "位移12mm",
+    jcsj: "2024/10/23 13:13",
+    zk: "正常",
   },
   {
-    name: '王家坪大桥',
-    jcdx: '桥梁外部荷载',
-    jczb: '均布荷载6.4kn/m',
-    jcsj: '2024/10/23 13:43',
-    zk: '正常',
+    name: "王家坪大桥",
+    jcdx: "桥梁外部荷载",
+    jczb: "均布荷载6.4kn/m",
+    jcsj: "2024/10/23 13:43",
+    zk: "正常",
   },
   {
-    name: '王家坪大桥',
-    jcdx: '桥梁气象环境',
-    jczb: '风速3.2m/s',
-    jcsj: '2024/10/23 14:03',
-    zk: '正常',
+    name: "王家坪大桥",
+    jcdx: "桥梁气象环境",
+    jczb: "风速3.2m/s",
+    jcsj: "2024/10/23 14:03",
+    zk: "正常",
   },
   {
-    name: '杨家岭隧道',
-    jcdx: '隧道结构',
-    jczb: '裂缝宽度0.12mm',
-    jcsj: '2024/10/23 14:05',
-    zk: '正常',
+    name: "杨家岭隧道",
+    jcdx: "隧道结构",
+    jczb: "裂缝宽度0.12mm",
+    jcsj: "2024/10/23 14:05",
+    zk: "正常",
   },
   {
-    name: '杨家岭隧道',
-    jcdx: '隧道结构',
-    jczb: '静应变+10με',
-    jcsj: '2024/10/23 14:25',
-    zk: '正常',
+    name: "杨家岭隧道",
+    jcdx: "隧道结构",
+    jczb: "静应变+10με",
+    jcsj: "2024/10/23 14:25",
+    zk: "正常",
   },
 
   {
-    name: '王家坪旧址门口',
-    jcdx: '积水液位',
-    jczb: '水深0m',
-    jcsj: '2024/10/23 15:21',
-    zk: '正常',
+    name: "王家坪旧址门口",
+    jcdx: "积水液位",
+    jczb: "水深0m",
+    jcsj: "2024/10/23 15:21",
+    zk: "正常",
   },
   {
-    name: '大砭沟与北大街交叉口',
-    jcdx: '积水液位',
-    jczb: '水深0m',
-    jcsj: '2024/10/23 15:25',
-    zk: '正常',
+    name: "大砭沟与北大街交叉口",
+    jcdx: "积水液位",
+    jczb: "水深0m",
+    jcsj: "2024/10/23 15:25",
+    zk: "正常",
   },
 ]);
 const yxjcname = ref("7天");
@@ -327,6 +333,7 @@
         text-align: center;
         margin-top: 5px;
         margin-left: 10px;
+        font-size: 16px;
       }
       .activedright {
         border: 1px solid #2cfce9;
@@ -387,7 +394,7 @@
             .gw {
               font-family: Source Han Sans CN;
               font-weight: bold;
-              font-size: 14px;
+              font-size: 16px;
               color: #85d2d4;
               padding-left: 5px;
               // background: yellow;
@@ -404,10 +411,10 @@
             }
             .gl {
               font-family: Source Han Sans CN;
-              font-weight: bold;
-              font-size: 14px;
-              color: #34909f;
               padding-left: 10px;
+              font-weight: bold;
+              font-size: 16px;
+              color: #85d2d4;
             }
           }
         }
@@ -462,7 +469,7 @@
         .head-right {
           margin-top: 2px;
           cursor: pointer;
-          font-size: 14px;
+          font-size: 16px;
           color: #ffffff;
           display: flex;
           line-height: 18px;
diff --git a/src/views/oneMap/OverallOverview/RightBox.vue b/src/views/oneMap/OverallOverview/RightBox.vue
index 0a70630..f9477ed 100644
--- a/src/views/oneMap/OverallOverview/RightBox.vue
+++ b/src/views/oneMap/OverallOverview/RightBox.vue
@@ -67,7 +67,7 @@
                 font-family: Source Han Sans CN;
                 font-weight: bold;
                 font-size: 13px;
-                color: #34909f;
+                color: #12f9ff;
               "
             >
               {{ item.dw }}

diff --git a/src/views/oneMap/Echarts/publicEch.vue b/src/views/oneMap/Echarts/publicEch.vue
index 6ab1b7d..2816357 100644
--- a/src/views/oneMap/Echarts/publicEch.vue
+++ b/src/views/oneMap/Echarts/publicEch.vue
@@ -2,11 +2,11 @@
   <div :id="id" style="width: 100%; height: 100%"></div>
 </template>
 <script>
-import * as echarts from 'echarts';
-import { guid } from '@/utils/ruoyi';
-import { reactive, toRefs, onMounted, watch } from 'vue';
+import * as echarts from "echarts";
+import { guid } from "@/utils/ruoyi";
+import { reactive, toRefs, onMounted, watch } from "vue";
 export default {
-  name: 'line-chart',
+  name: "line-chart",
   props: {
     data: Object,
     refresh: Number,
@@ -28,28 +28,34 @@
       let chartDom = echarts.init(document.getElementById(allData.id));
 
       var shadowYData = [100, 100];
-      var barTopColor = ['#fe7285FF', '#1f93ffFF', '#31e1adFF', '#e4cd61FF', '#12f9ffFF'];
+      var barTopColor = ["#fe7285FF", "#1f93ffFF", "#31e1adFF", "#e4cd61FF", "#12f9ffFF"];
       var barBottomColor = [
-        'RGBA(154, 102, 125, 0.6)',
-        'RGBA(17, 109, 182, 0.6)',
-        'RGBA(27, 152, 136, 0.6)',
-        'RGBA(126, 138, 92, 0.6)',
-        'RGBA(10, 162, 178, 0.6)',
+        "RGBA(154, 102, 125, 0.6)",
+        "RGBA(17, 109, 182, 0.6)",
+        "RGBA(27, 152, 136, 0.6)",
+        "RGBA(126, 138, 92, 0.6)",
+        "RGBA(10, 162, 178, 0.6)",
       ];
       var barWidth = 20;
       var option;
       option = {
-        color: ['#3FFFC2', '#FFF21C'],
+        color: ["#3FFFC2", "#FFF21C"],
         tooltip: {
-          trigger: 'axis',
+          trigger: "axis",
 
-          formatter: params => {
+          formatter: (params) => {
             // console.log(params);
-            var relVal = '' + params[0].name;
+            var relVal = "" + params[0].name;
             for (var i = 0, l = params.length; i < l; i++) {
               if (params[i].seriesName) {
-                let unit = params[i].seriesName == '数量' ? '起' : '个';
-                relVal += '<br/>' + params[i].marker + params[i].seriesName + ' ' + params[i].value + unit;
+                let unit = params[i].seriesName == "数量" ? "起" : "个";
+                relVal +=
+                  "<br/>" +
+                  params[i].marker +
+                  params[i].seriesName +
+                  " " +
+                  params[i].value +
+                  unit;
               }
             }
             return relVal;
@@ -61,12 +67,12 @@
         },
         xAxis: [
           {
-            type: 'category',
+            type: "category",
             axisLine: {
               show: false,
               lineStyle: {
                 width: 2,
-                color: '#58b2ed',
+                color: "#58b2ed",
               },
             },
             splitLine: {
@@ -76,18 +82,18 @@
               show: false,
             },
             axisLabel: {
-              color: 'rgba(255,255,255,1)',
-              fontSize: 12,
-              fontFamily: 'AlibabaPuHuiTi',
+              color: "rgba(255,255,255,1)",
+              fontSize: 16,
+              fontFamily: "AlibabaPuHuiTi",
               formatter: function (params) {
-                var str = ''; // 最终拼接成的字符串
+                var str = ""; // 最终拼接成的字符串
                 var paramsLen = params.length; // 获取每项文字的个数
                 var len = 3; // 每行能显示的字的个数（根据实际情况自己设置）
                 var rowNumber = Math.ceil(paramsLen / len); // 换行的话，需要显示几行，向上取整
                 if (paramsLen > len) {
                   //大于设定的len就换行，不大于就不变化
                   for (var i = 0; i < rowNumber; i++) {
-                    var temp = ''; // 表示每一次截取的字符串
+                    var temp = ""; // 表示每一次截取的字符串
                     var start = i * len; // 开始截取的位置
                     var end = start + len; // 结束截取的位置
                     if (i == rowNumber - 1) {
@@ -95,7 +101,7 @@
                       temp = params.substring(start, paramsLen);
                     } else {
                       // 每一次拼接字符串并换行
-                      temp = params.substring(start, end) + '\n';
+                      temp = params.substring(start, end) + "\n";
                     }
                     str += temp; // 最终拼成的字符串
                   }
@@ -111,19 +117,19 @@
         ],
         yAxis: [
           {
-            name: '数量(起)',
-            type: 'value',
+            name: "数量(起)",
+            type: "value",
             axisLabel: {
-              color: '#3FFFC2',
+              color: "#3FFFC2",
               show: true,
             },
             nameTextStyle: {
-              color: '#3FFFC2',
+              color: "#3FFFC2",
             },
             splitLine: {
               lineStyle: {
-                type: 'dashed',
-                color: '#3FFFC2',
+                type: "dashed",
+                color: "#3FFFC2",
               },
             },
             alignTicks: true,
@@ -137,20 +143,20 @@
             bottom: 18,
             start: 0,
             end: 100,
-            handleSize: '100%',
-            fillerColor: '#94FA41',
-            borderColor: 'transparent',
-            backgroundColor: 'rgba(148, 250, 65, 0.2)',
+            handleSize: "100%",
+            fillerColor: "#94FA41",
+            borderColor: "transparent",
+            backgroundColor: "rgba(148, 250, 65, 0.2)",
             handleStyle: {
-              color: '#94FA41',
+              color: "#94FA41",
             },
             moveHandleSize: 0,
             textStyle: {
-              color: '#fff',
+              color: "#fff",
             },
           },
           {
-            type: 'inside',
+            type: "inside",
             show: true,
             height: 15,
             start: 1,
@@ -159,11 +165,11 @@
         ],
         series: [
           {
-            name: '数量',
-            type: 'pictorialBar',
+            name: "数量",
+            type: "pictorialBar",
             symbolSize: [barWidth, 10],
             symbolOffset: [0, -6],
-            symbolPosition: 'end',
+            symbolPosition: "end",
             z: 12,
             itemStyle: {
               normal: {
@@ -174,62 +180,62 @@
             },
             data: props.data.yAxis,
           },
+          // {
+          //   name: "",
+          //   type: "pictorialBar",
+          //   symbolSize: [barWidth + 10, 15],
+          //   symbolOffset: [0, 8],
+          //   z: 10,
+          //   itemStyle: {
+          //     normal: {
+          //       color: "transparent",
+          //       borderColor: barTopColor,
+          //       borderType: "solid",
+          //       borderWidth: 10,
+          //     },
+          //   },
+          //   data: props.data.yAxis,
+          // },
+          // {
+          //   name: '',
+          //   type: 'pictorialBar',
+          //   symbolSize: [barWidth + 20, 20],
+          //   symbolOffset: [0, 12],
+          //   z: 12,
+          //   itemStyle: {
+          //     normal: {
+          //       color: 'transparent',
+          //       borderColor: barTopColor,
+          //       borderType: 'solid',
+          //       borderWidth: 10,
+          //     },
+          //   },
+          //   data: props.data.yAxis,
+          //   stack: 'check',
+          // },
+          // {
+          //   name: "",
+          //   type: "pictorialBar",
+          //   symbolSize: [barWidth + 25, 20],
+          //   symbolOffset: [0, 12],
+          //   z: 12,
+          //   itemStyle: {
+          //     normal: {
+          //       color: "transparent",
+          //       borderColor: "#3ACDC5",
+          //       borderType: "solid",
+          //       borderWidth: 10,
+          //     },
+          //   },
+          //   data: props.data.yAxis,
+          //   stack: "check",
+          // },
           {
-            name: '',
-            type: 'pictorialBar',
-            symbolSize: [barWidth + 10, 15],
-            symbolOffset: [0, 8],
-            z: 10,
-            itemStyle: {
-              normal: {
-                color: 'transparent',
-                borderColor: barTopColor,
-                borderType: 'solid',
-                borderWidth: 10,
-              },
-            },
-            data: props.data.yAxis,
-          },
-          {
-            name: '',
-            type: 'pictorialBar',
-            symbolSize: [barWidth + 20, 20],
-            symbolOffset: [0, 12],
-            z: 12,
-            itemStyle: {
-              normal: {
-                color: 'transparent',
-                borderColor: barTopColor,
-                borderType: 'solid',
-                borderWidth: 10,
-              },
-            },
-            data: props.data.yAxis,
-            stack: 'check',
-          },
-          {
-            name: '',
-            type: 'pictorialBar',
-            symbolSize: [barWidth + 25, 20],
-            symbolOffset: [0, 12],
-            z: 12,
-            itemStyle: {
-              normal: {
-                color: 'transparent',
-                borderColor: '#3ACDC5',
-                borderType: 'solid',
-                borderWidth: 10,
-              },
-            },
-            data: props.data.yAxis,
-            stack: 'check',
-          },
-          {
-            name: '',
-            type: 'bar',
+            name: "",
+            type: "bar",
             barWidth: barWidth,
-            barGap: '10%', // Make series be overlap
-            barCateGoryGap: '10%',
+            barGap: "10%", // Make series be overlap
+            barCateGoryGap: "10%",
             itemStyle: {
               normal: {
                 color: function (params) {
@@ -264,7 +270,7 @@
     watch(
       () => props.refresh,
       () => {
-        console.log(props, 'propspropsprops');
+        console.log(props, "propspropsprops");
         if (allData.chartDom) {
           allData.chartDom.dispose();
           allData.chartDom = null;
@@ -276,7 +282,7 @@
     );
     onMounted(() => {
       init();
-      window.addEventListener('resize', resizeTheChart);
+      window.addEventListener("resize", resizeTheChart);
     });
     return {
       ...toRefs(allData),
diff --git a/src/views/oneMap/LayerControl/LayerControl.vue b/src/views/oneMap/LayerControl/LayerControl.vue
index 43fc007..2bdf6b8 100644
--- a/src/views/oneMap/LayerControl/LayerControl.vue
+++ b/src/views/oneMap/LayerControl/LayerControl.vue
@@ -1,6 +1,10 @@
 <template>
   <Transition name="slideTC">
-    <div class="LayerControl" v-show="ShowTuCheng">
+    <div
+      class="LayerControl"
+      v-show="ShowTuCheng"
+      :class="[showPanel ? 'TuChengImgTrue' : 'TuChengImgFalse']"
+    >
       <div class="GroupBox" v-for="item in AllData.LayerData" v-show="item.children">
         <div class="GroupName" @click="item.Show = !item.Show">{{ item.title }}</div>
         <!-- <Transition name="Group"> -->
@@ -30,30 +34,30 @@
 </template>
 
 <script setup name="LayerControl">
-import { ref, reactive, toRefs, onMounted } from 'vue';
+import { ref, reactive, toRefs, onMounted } from "vue";
 // 图层控制icon引入
-import { requireTuChengImg } from '@/utils/util';
-import yanAnPaiShuiArea from '@/assets/yanAnPaiShuiArea.json';
-import yanAnRoad from '@/assets/yanAnRoad.json';
-import yanAnWater from '@/assets/yanAnWater.json';
-import yanAnWSCLC from '@/assets/yanAnWSCLC.json';
-import yanAnCenterCity from '@/assets/yanAnCenterCity.json';
-import yanAnYSBZ from '@/assets/yanAnYSBZ.json';
-import yanAnYiLao from '@/assets/yanAnYiLao.json';
-import yanAnFengXian from '@/assets/yanAnFengXian.json';
-import yanAnPipeSupervise from '@/assets/yanAnPipeSupervise.json';
-import yanAnPKSupervise from '@/assets/yanAnPKSupervise.json';
-import yanAnNature from '@/assets/yanAnNature.json';
-import yanAnVideo from '@/assets/yanAnVideo.json';
-import yanAnMountain from '@/assets/yanAnMountain.json';
-import yanAnSmallWater from '@/assets/yanAnSmallWater.json';
-import yanAnRainArea from '@/assets/yanAnRainArea.json';
-import heDiJiaGu from '@/assets/heDiJiaGu.json';
-import heDiShuJun from '@/assets/heDiShuJun.json';
-import anXianGaiZao from '@/assets/anXianGaiZao.json';
-import bus from '@/bus';
-import axios from 'axios';
-import mapBoxVectorLayer from '@/utils/GISdocument/mapboxVectorLayer.js';
+import { requireTuChengImg } from "@/utils/util";
+import yanAnPaiShuiArea from "@/assets/yanAnPaiShuiArea.json";
+import yanAnRoad from "@/assets/yanAnRoad.json";
+import yanAnWater from "@/assets/yanAnWater.json";
+import yanAnWSCLC from "@/assets/yanAnWSCLC.json";
+import yanAnCenterCity from "@/assets/yanAnCenterCity.json";
+import yanAnYSBZ from "@/assets/yanAnYSBZ.json";
+import yanAnYiLao from "@/assets/yanAnYiLao.json";
+import yanAnFengXian from "@/assets/yanAnFengXian.json";
+import yanAnPipeSupervise from "@/assets/yanAnPipeSupervise.json";
+import yanAnPKSupervise from "@/assets/yanAnPKSupervise.json";
+import yanAnNature from "@/assets/yanAnNature.json";
+import yanAnVideo from "@/assets/yanAnVideo.json";
+import yanAnMountain from "@/assets/yanAnMountain.json";
+import yanAnSmallWater from "@/assets/yanAnSmallWater.json";
+import yanAnRainArea from "@/assets/yanAnRainArea.json";
+import heDiJiaGu from "@/assets/heDiJiaGu.json";
+import heDiShuJun from "@/assets/heDiShuJun.json";
+import anXianGaiZao from "@/assets/anXianGaiZao.json";
+import bus from "@/bus";
+import axios from "axios";
+import mapBoxVectorLayer from "@/utils/GISdocument/mapboxVectorLayer.js";
 const AllData = reactive({
   // 图层控制面板的渲染数据
   /**图层面板数据字段说明
@@ -66,216 +70,216 @@
    */
   LayerData: [
     {
-      title: '基本信息',
+      title: "基本信息",
       Show: true,
       children: [
         {
-          layerName: '蓝色地图',
-          layerKey: 'blackMap',
-          layerIcon: requireTuChengImg('zhongxinchengqu'),
+          layerName: "蓝色地图",
+          layerKey: "blackMap",
+          layerIcon: requireTuChengImg("zhongxinchengqu"),
           layerVisible: false,
         },
         {
-          layerName: '白色地图',
-          layerKey: 'whiteMap',
-          layerIcon: requireTuChengImg('zhongxinchengqu'),
+          layerName: "白色地图",
+          layerKey: "whiteMap",
+          layerIcon: requireTuChengImg("zhongxinchengqu"),
           layerVisible: false,
         },
         {
-          layerName: '影像地图',
-          layerKey: 'imageMap',
-          layerIcon: requireTuChengImg('zhongxinchengqu'),
+          layerName: "影像地图",
+          layerKey: "imageMap",
+          layerIcon: requireTuChengImg("zhongxinchengqu"),
           layerVisible: false,
         },
         {
-          layerName: '中心城区',
-          layerKey: 'centerCity',
-          layerIcon: requireTuChengImg('zhongxinchengqu'),
+          layerName: "中心城区",
+          layerKey: "centerCity",
+          layerIcon: requireTuChengImg("zhongxinchengqu"),
           layerVisible: false,
           dynamicLineData: yanAnCenterCity,
         },
         {
-          layerName: '三维建筑',
-          layerKey: 'buildingLayer',
-          layerIcon: '',
+          layerName: "三维建筑",
+          layerKey: "buildingLayer",
+          layerIcon: "",
           layerVisible: true,
         },
         {
-          layerName: '路网',
-          layerKey: 'road',
-          layerIcon: '',
+          layerName: "路网",
+          layerKey: "road",
+          layerIcon: "",
           layerVisible: true,
           dynamicLineData: yanAnRoad,
         },
         {
-          layerName: '河流水系',
-          layerKey: 'waterLake',
-          layerIcon: '',
+          layerName: "河流水系",
+          layerKey: "waterLake",
+          layerIcon: "",
           layerVisible: true,
           dynamicLineData: yanAnWater,
         },
         {
-          layerName: '防洪河道',
-          layerKey: 'fangHongWater',
-          layerIcon: '',
+          layerName: "防洪河道",
+          layerKey: "fangHongWater",
+          layerIcon: "",
           layerVisible: false,
           lineWithLabel: yanAnSmallWater,
         },
         {
-          layerName: '河堤疏浚',
-          layerKey: 'heDiShuJun',
-          layerIcon: '',
+          layerName: "河堤疏浚",
+          layerKey: "heDiShuJun",
+          layerIcon: "",
           layerVisible: false,
           lineWithLabel: heDiShuJun,
         },
         {
-          layerName: '河堤加固',
-          layerKey: 'heDiJiaGu',
-          layerIcon: '',
+          layerName: "河堤加固",
+          layerKey: "heDiJiaGu",
+          layerIcon: "",
           layerVisible: false,
           lineWithLabel: heDiJiaGu,
         },
         {
-          layerName: '岸线改造',
-          layerKey: 'anXianGaiZao',
-          layerIcon: '',
+          layerName: "岸线改造",
+          layerKey: "anXianGaiZao",
+          layerIcon: "",
           layerVisible: false,
           lineWithLabel: anXianGaiZao,
         },
         {
-          layerName: '河堤治理',
-          layerKey: 'heDiZhiLi',
-          layerIcon: '',
+          layerName: "河堤治理",
+          layerKey: "heDiZhiLi",
+          layerIcon: "",
           layerVisible: false,
           lineWithLabel: anXianGaiZao,
         },
         {
-          layerName: '空间格局',
-          layerKey: 'yanAnNature',
-          layerIcon: '',
+          layerName: "空间格局",
+          layerKey: "yanAnNature",
+          layerIcon: "",
           layerVisible: false,
           areaData: yanAnNature,
         },
         {
-          layerName: '山体修复',
-          layerKey: 'yanAnMountain',
-          layerIcon: '',
+          layerName: "山体修复",
+          layerKey: "yanAnMountain",
+          layerIcon: "",
           layerVisible: false,
           lineWithLabel: yanAnMountain,
         },
       ],
     },
     {
-      title: '燃气系统',
+      title: "燃气系统",
       Show: true,
       children: [
         {
-          layerName: '燃气管网',
-          layerKey: 'rq_all',
+          layerName: "燃气管网",
+          layerKey: "rq_all",
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: '干管',
-          layerKey: 'rq_SZLH',
+          layerName: "干管",
+          layerKey: "rq_SZLH",
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: '干管流向',
-          layerKey: 'sx_ya_smx_rq_line_sz',
+          layerName: "干管流向",
+          layerKey: "sx_ya_smx_rq_line_sz",
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: '主管',
-          layerKey: 'rq_TYLH',
+          layerName: "主管",
+          layerKey: "rq_TYLH",
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: '主管流向',
-          layerKey: 'sx_ya_smx_rq_line_zg',
+          layerName: "主管流向",
+          layerKey: "sx_ya_smx_rq_line_zg",
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: '支管',
-          layerKey: 'rq_LGLH',
+          layerName: "支管",
+          layerKey: "rq_LGLH",
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: '支管流向',
-          layerKey: 'sx_ya_smx_rq_line_zhig',
+          layerName: "支管流向",
+          layerKey: "sx_ya_smx_rq_line_zhig",
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: '其他管网',
-          layerKey: 'rq_other',
+          layerName: "其他管网",
+          layerKey: "rq_other",
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: '调压器',
-          layerKey: 'tiaoYaQi',
+          layerName: "调压器",
+          layerKey: "tiaoYaQi",
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: '节点',
-          layerKey: 'rq_jieDian',
+          layerName: "节点",
+          layerKey: "rq_jieDian",
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: '极性保护',
-          layerKey: 'jiXingBaoHu',
+          layerName: "极性保护",
+          layerKey: "jiXingBaoHu",
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: '流量计',
-          layerKey: 'rq_liuLiangJi',
+          layerName: "流量计",
+          layerKey: "rq_liuLiangJi",
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: '未知设备',
-          layerKey: 'rq_unknow',
+          layerName: "未知设备",
+          layerKey: "rq_unknow",
           layerIcon: null,
           layerVisible: false,
         },
       ],
     },
     {
-      title: '雨水系统',
+      title: "雨水系统",
       Show: true,
       children: [
         {
-          layerName: '雨水分区',
-          layerKey: 'rainArea',
+          layerName: "雨水分区",
+          layerKey: "rainArea",
           layerIcon: null,
           layerVisible: false,
           areaData: yanAnRainArea,
         },
         {
-          layerName: '排水分区',
-          layerKey: 'paishuiArea',
+          layerName: "排水分区",
+          layerKey: "paishuiArea",
           layerIcon: null,
           layerVisible: false,
           areaData: yanAnPaiShuiArea,
         },
         {
-          layerName: '雨水管网',
-          layerKey: 'ysLine1',
+          layerName: "雨水管网",
+          layerKey: "ysLine1",
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: '雨水管网流向',
-          layerKey: 'pipeline_info_flow_ys',
+          layerName: "雨水管网流向",
+          layerKey: "pipeline_info_flow_ys",
           layerIcon: null,
           layerVisible: false,
         },
@@ -286,8 +290,8 @@
         //   layerVisible: false,
         // },
         {
-          layerName: '雨水泵站',
-          layerKey: 'YSBZ',
+          layerName: "雨水泵站",
+          layerKey: "YSBZ",
           layerIcon: null,
           layerVisible: false,
           data: yanAnYSBZ,
@@ -295,24 +299,24 @@
       ],
     },
     {
-      title: '污水系统',
+      title: "污水系统",
       Show: true,
       children: [
         {
-          layerName: '污水分区',
-          layerKey: 'sewageArea',
+          layerName: "污水分区",
+          layerKey: "sewageArea",
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: '污水管网',
-          layerKey: 'wsLine1',
+          layerName: "污水管网",
+          layerKey: "wsLine1",
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: '污水管网流向',
-          layerKey: 'pipeline_info_flow_ws1',
+          layerName: "污水管网流向",
+          layerKey: "pipeline_info_flow_ws1",
           layerIcon: null,
           layerVisible: false,
         },
@@ -329,8 +333,8 @@
         //   layerVisible: false,
         // },
         {
-          layerName: '污水处理厂',
-          layerKey: 'WSCLC',
+          layerName: "污水处理厂",
+          layerKey: "WSCLC",
           layerIcon: null,
           layerVisible: false,
           data: yanAnWSCLC,
@@ -338,40 +342,40 @@
       ],
     },
     {
-      title: '感知设备',
+      title: "感知设备",
       Show: true,
       children: [
         {
-          layerName: '内涝易涝点',
-          layerKey: 'yiLaoPoint',
+          layerName: "内涝易涝点",
+          layerKey: "yiLaoPoint",
           layerIcon: null,
           layerVisible: false,
           data: yanAnYiLao,
         },
         {
-          layerName: '内涝风险点',
-          layerKey: 'fengXianPoint',
+          layerName: "内涝风险点",
+          layerKey: "fengXianPoint",
           layerIcon: null,
           layerVisible: false,
           data: yanAnFengXian,
         },
         {
-          layerName: '排水管网监测',
-          layerKey: 'pipeSupervise',
+          layerName: "排水管网监测",
+          layerKey: "pipeSupervise",
           layerIcon: null,
           layerVisible: false,
           data: yanAnPipeSupervise,
         },
         {
-          layerName: '排水排口监测',
-          layerKey: 'PKsupervise',
+          layerName: "排水排口监测",
+          layerKey: "PKsupervise",
           layerIcon: null,
           layerVisible: false,
           data: yanAnPKSupervise,
         },
         {
-          layerName: '视频监测',
-          layerKey: 'video',
+          layerName: "视频监测",
+          layerKey: "video",
           layerIcon: null,
           layerVisible: false,
           data: yanAnVideo,
@@ -386,98 +390,111 @@
     .concat(AllData.LayerData[2].children)
     .concat(AllData.LayerData[3].children)
     .concat(AllData.LayerData[4].children);
-  initeLegend.forEach(element => {
+  initeLegend.forEach((element) => {
     element.layername = element.layerKey;
   });
-  bus.emit('setLegendData', initeLegend);
+  bus.emit("setLegendData", initeLegend);
 });
 const props = defineProps({
   ShowTuCheng: false,
+  showPanel: false,
 });
 
 watch(
   () => props.ShowTuCheng,
   (newValue, oldValue) => {
-    console.log('ShowTuCheng变化了', newValue, oldValue);
+    console.log("ShowTuCheng变化了", newValue, oldValue);
   },
   { immediate: true, deep: true }
 );
 
-const layerClick = async item2 => {
+const layerClick = async (item2) => {
   item2.layerVisible = !item2.layerVisible;
   item2.isCheck = item2.layerVisible;
-  console.info(`点击了名称为${item2.layerName},图层ID为${item2.layerKey}的图层,点击后的图层展示情况为${item2.layerVisible}`);
-  bus.emit('setLayerVisible', { layername: item2.layerKey, isCheck: item2.isCheck });
-  if (item2.layerKey == 'whiteMap') {
-    AllData.LayerData[0]['children'][0].layerVisible = false;
-    AllData.LayerData[0]['children'][2].layerVisible = false;
-    let { data } = await axios.get('/static/libs/mapbox/style/customs/whiteMapStyle.json');
+  console.info(
+    `点击了名称为${item2.layerName},图层ID为${item2.layerKey}的图层,点击后的图层展示情况为${item2.layerVisible}`
+  );
+  bus.emit("setLayerVisible", { layername: item2.layerKey, isCheck: item2.isCheck });
+  if (item2.layerKey == "whiteMap") {
+    AllData.LayerData[0]["children"][0].layerVisible = false;
+    AllData.LayerData[0]["children"][2].layerVisible = false;
+    let { data } = await axios.get(
+      "/static/libs/mapbox/style/customs/whiteMapStyle.json"
+    );
     let newMapStyle;
     let oldMapStyle = newfiberMapbox.map.getStyle();
     let oldIds = [];
-    oldMapStyle.layers.forEach(layer => {
+    oldMapStyle.layers.forEach((layer) => {
       oldIds.push(layer.id);
     });
-    let newIds = data.layers.map(i => i.id);
-    oldIds.forEach(id => {
+    let newIds = data.layers.map((i) => i.id);
+    oldIds.forEach((id) => {
       let layer = data.layers[newIds.indexOf(id)];
       if (!layer) return;
-      Object.keys(layer.layout || {}).forEach(key => newfiberMapbox.map.setLayoutProperty(id, key, layer.layout[key]));
-      Object.keys(layer.paint || {}).forEach(key => newfiberMapbox.map.setPaintProperty(id, key, layer.paint[key]));
+      Object.keys(layer.layout || {}).forEach((key) =>
+        newfiberMapbox.map.setLayoutProperty(id, key, layer.layout[key])
+      );
+      Object.keys(layer.paint || {}).forEach((key) =>
+        newfiberMapbox.map.setPaintProperty(id, key, layer.paint[key])
+      );
     });
-    newfiberMapbox.map.setLayoutProperty('newfiber-XYZLayer', 'visibility', 'none');
+    newfiberMapbox.map.setLayoutProperty("newfiber-XYZLayer", "visibility", "none");
   }
-  if (item2.layerKey == 'blackMap') {
-    AllData.LayerData[0]['children'][1].layerVisible = false;
-    AllData.LayerData[0]['children'][2].layerVisible = false;
-    let { data } = await axios.get('/static/libs/mapbox/style/customs/night-style.json');
+  if (item2.layerKey == "blackMap") {
+    AllData.LayerData[0]["children"][1].layerVisible = false;
+    AllData.LayerData[0]["children"][2].layerVisible = false;
+    let { data } = await axios.get("/static/libs/mapbox/style/customs/night-style.json");
     let newMapStyle;
     let oldMapStyle = newfiberMapbox.map.getStyle();
     let oldIds = [];
-    oldMapStyle.layers.forEach(layer => {
+    oldMapStyle.layers.forEach((layer) => {
       oldIds.push(layer.id);
     });
-    let newIds = data.layers.map(i => i.id);
-    oldIds.forEach(id => {
+    let newIds = data.layers.map((i) => i.id);
+    oldIds.forEach((id) => {
       let layer = data.layers[newIds.indexOf(id)];
       if (!layer) return;
-      Object.keys(layer.layout || {}).forEach(key => newfiberMapbox.map.setLayoutProperty(id, key, layer.layout[key]));
-      Object.keys(layer.paint || {}).forEach(key => newfiberMapbox.map.setPaintProperty(id, key, layer.paint[key]));
+      Object.keys(layer.layout || {}).forEach((key) =>
+        newfiberMapbox.map.setLayoutProperty(id, key, layer.layout[key])
+      );
+      Object.keys(layer.paint || {}).forEach((key) =>
+        newfiberMapbox.map.setPaintProperty(id, key, layer.paint[key])
+      );
     });
-    newfiberMapbox.map.setLayoutProperty('newfiber-XYZLayer', 'visibility', 'none');
+    newfiberMapbox.map.setLayoutProperty("newfiber-XYZLayer", "visibility", "none");
   }
-  if (item2.layerKey == 'imageMap') {
-    AllData.LayerData[0]['children'][0].layerVisible = false;
-    AllData.LayerData[0]['children'][1].layerVisible = false;
-    newfiberMapbox.map.setLayoutProperty('newfiber-XYZLayer', 'visibility', 'visible');
-    newfiberMapbox.map.moveLayer('newfiber-XYZLayer', 'buildingLayer');
+  if (item2.layerKey == "imageMap") {
+    AllData.LayerData[0]["children"][0].layerVisible = false;
+    AllData.LayerData[0]["children"][1].layerVisible = false;
+    newfiberMapbox.map.setLayoutProperty("newfiber-XYZLayer", "visibility", "visible");
+    newfiberMapbox.map.moveLayer("newfiber-XYZLayer", "buildingLayer");
   }
   if (item2.areaData) {
     if (item2.isCheck) {
       mapBoxVectorLayer.addGeojsonPolygonWithLabel(item2.layerKey, item2.areaData);
     } else {
-      mapBoxVectorLayer.removeByIds([item2.layerKey, item2.layerKey + '_label']);
+      mapBoxVectorLayer.removeByIds([item2.layerKey, item2.layerKey + "_label"]);
     }
   }
-  if (item2.layerKey == 'buildingLayer') {
+  if (item2.layerKey == "buildingLayer") {
     if (item2.isCheck) {
-      newfiberMapbox.map.setLayoutProperty('buildingLayer', 'visibility', 'visible');
+      newfiberMapbox.map.setLayoutProperty("buildingLayer", "visibility", "visible");
     } else {
-      newfiberMapbox.map.setLayoutProperty('buildingLayer', 'visibility', 'none');
+      newfiberMapbox.map.setLayoutProperty("buildingLayer", "visibility", "none");
     }
   }
   if (item2.lineWithLabel) {
     if (item2.isCheck) {
       mapBoxVectorLayer.addGeojsonLineWithLabel(item2.layerKey, item2.lineWithLabel);
-      if (item2.layerKey == 'fangHongWater') {
+      if (item2.layerKey == "fangHongWater") {
         let layer = new mapboxL7.LineLayer({
-          name: 'fangHongWater',
+          name: "fangHongWater",
         })
           .source(item2.lineWithLabel)
           .size(3)
-          .shape('line')
-          .texture('arrow')
-          .color('rgba(243, 26, 237,1)')
+          .shape("line")
+          .texture("arrow")
+          .color("rgba(243, 26, 237,1)")
           .animate({
             interval: 2, // 间隔
             duration: 3, // 持续时间，延时
@@ -488,29 +505,29 @@
             lineTexture: true, // 开启线的贴图功能
             iconStep: 200, // 设置贴图纹理的间距
             borderWidth: 0.4, // 默认文 0，最大有效值为 0.5
-            borderColor: '#fff', // 默认为 #ccc
+            borderColor: "#fff", // 默认为 #ccc
           });
         newfiberMapbox.addLayer(layer);
       }
     } else {
-      mapBoxVectorLayer.removeByIds([item2.layerKey, item2.layerKey + '_label']);
-      if (newfiberMapbox.getLayerByName('fangHongWater')) {
-        newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName('fangHongWater'));
+      mapBoxVectorLayer.removeByIds([item2.layerKey, item2.layerKey + "_label"]);
+      if (newfiberMapbox.getLayerByName("fangHongWater")) {
+        newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName("fangHongWater"));
       }
     }
   }
-  if (item2.layerKey == 'road') {
+  if (item2.layerKey == "road") {
     if (item2.isCheck) {
-      if (newfiberMapbox.getLayerByName('dynamicRoad')) {
-        newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName('dynamicRoad'));
+      if (newfiberMapbox.getLayerByName("dynamicRoad")) {
+        newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName("dynamicRoad"));
       }
       let layer = new mapboxL7.LineLayer({
-        name: 'dynamicRoad',
+        name: "dynamicRoad",
       })
         .source(item2.dynamicLineData)
         .size(1.3)
-        .shape('line')
-        .color('rgb(184, 184, 184)')
+        .shape("line")
+        .color("rgb(184, 184, 184)")
         .animate({
           interval: 1, // 间隔
           duration: 1.5, // 持续时间，延时
@@ -521,22 +538,22 @@
         });
       newfiberMapbox.addLayer(layer);
     } else {
-      newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName('dynamicRoad'));
+      newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName("dynamicRoad"));
     }
   }
-  if (item2.layerKey == 'waterLake') {
+  if (item2.layerKey == "waterLake") {
     if (item2.isCheck) {
-      if (newfiberMapbox.getLayerByName('waterLake')) {
-        newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName('waterLake'));
+      if (newfiberMapbox.getLayerByName("waterLake")) {
+        newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName("waterLake"));
       }
       let layer = new mapboxL7.LineLayer({
-        name: 'waterLake',
+        name: "waterLake",
       })
         .source(item2.dynamicLineData)
         .size(4)
-        .shape('line')
-        .texture('arrow')
-        .color('aqua')
+        .shape("line")
+        .texture("arrow")
+        .color("aqua")
         .animate({
           interval: 2, // 间隔
           duration: 3, // 持续时间，延时
@@ -547,29 +564,29 @@
           lineTexture: true, // 开启线的贴图功能
           iconStep: 200, // 设置贴图纹理的间距
           borderWidth: 0.4, // 默认文 0，最大有效值为 0.5
-          borderColor: '#fff', // 默认为 #ccc
+          borderColor: "#fff", // 默认为 #ccc
         });
       newfiberMapbox.addLayer(layer);
     } else {
-      newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName('waterLake'));
+      newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName("waterLake"));
     }
   }
-  if (item2.layerKey == 'centerCity') {
+  if (item2.layerKey == "centerCity") {
     if (item2.isCheck) {
-      mapBoxVectorLayer.addGeojsonLine('centerCity', item2.dynamicLineData, 4, 1, 0.5);
+      mapBoxVectorLayer.addGeojsonLine("centerCity", item2.dynamicLineData, 4, 1, 0.5);
     } else {
-      mapBoxVectorLayer.removeByIds(['centerCity']);
+      mapBoxVectorLayer.removeByIds(["centerCity"]);
     }
   }
 };
 onMounted(() => {
   // 清除所有的图层选中
-  bus.on('clearAllLayer', () => {
-    AllData.LayerData.forEach(data => {
-      data.children.map(item => {
+  bus.on("clearAllLayer", () => {
+    AllData.LayerData.forEach((data) => {
+      data.children.map((item) => {
         // item.layerVisible = true;
         // 做优化,全局为True,再执行隐藏工作,页面调用api太多了,这里应该只将展示的图层进行取消操作就行
-        item.layerVisible ? layerClick(item) : '';
+        item.layerVisible ? layerClick(item) : "";
       });
     });
   });
@@ -577,17 +594,17 @@
   /**控制图层的显示
    *@param LayerArraya:需要打开的图层名称,示例:["路网","中心城区"]
    */
-  bus.on('SetLayerShow', LayerArraya => {
-    AllData.LayerData.forEach(data => {
-      data.children.map(item => {
-        LayerArraya.includes(item.layerName) ? layerClick(item) : '';
+  bus.on("SetLayerShow", (LayerArraya) => {
+    AllData.LayerData.forEach((data) => {
+      data.children.map((item) => {
+        LayerArraya.includes(item.layerName) ? layerClick(item) : "";
       });
     });
   });
 });
 onBeforeUnmount(() => {
-  bus.off('clearAllLayer');
-  bus.off('SetLayerShow');
+  bus.off("clearAllLayer");
+  bus.off("SetLayerShow");
 });
 </script>
 
@@ -598,7 +615,7 @@
   position: absolute;
   top: 150px;
   right: 476px;
-  background: url('@/assets/images/Sponge_screen/TuChengBG.png') no-repeat center;
+  background: url("@/assets/images/Sponge_screen/TuChengBG.png") no-repeat center;
   background-size: contain;
   box-sizing: border-box;
   padding: 25px 0px;
@@ -614,7 +631,7 @@
       width: 190px;
       height: 25px;
       line-height: 25px;
-      background-image: url('@/assets/images/Sponge_screen/TuChengFenZuBG.png'),
+      background-image: url("@/assets/images/Sponge_screen/TuChengFenZuBG.png"),
         linear-gradient(to right, #1c899600, #1c8996, #1c899600);
       background-repeat: no-repeat;
       background-position: center;
@@ -672,6 +689,14 @@
     }
   }
 }
+.TuChengImgTrue {
+  transform: translateX(460px);
+  transition: all 1s ease;
+}
+.TuChengImgFalse {
+  transform: translateX(0px);
+  transition: all 1s ease;
+}
 // 动画
 /*
   进入和离开动画可以使用不同
diff --git a/src/views/oneMap/OverallOverview/LeftBox.vue b/src/views/oneMap/OverallOverview/LeftBox.vue
index e26dce0..70aad73 100644
--- a/src/views/oneMap/OverallOverview/LeftBox.vue
+++ b/src/views/oneMap/OverallOverview/LeftBox.vue
@@ -90,7 +90,13 @@
         <span class="tableHeaderList tableList4">监测时间</span>
         <span class="tableHeaderList tableList5">状态</span>
       </div>
-      <Vue3SeamlessScroll :list="FXJCData" :singleHeight="60" :singleWaitTime="1500" :hover="true" class="tableBody">
+      <Vue3SeamlessScroll
+        :list="FXJCData"
+        :singleHeight="60"
+        :singleWaitTime="1500"
+        :hover="true"
+        class="tableBody"
+      >
         <div class="tableBodyList" v-for="item in FXJCData">
           <span class="tableBodyList_span1" :title="item.name">{{ item.name }}</span>
           <span class="tableBodyList_span2" :title="item.jcdx">{{ item.jcdx }} </span>
@@ -130,75 +136,75 @@
 ]);
 const FXJCData = ref([
   {
-    name: '延安中学',
-    jcdx: '燃气管网',
-    jczb: '甲烷浓度4.4%VOL',
-    jcsj: '2024/10/23 11:54',
-    zk: '正常',
+    name: "延安中学",
+    jcdx: "燃气管网",
+    jczb: "甲烷浓度4.4%VOL",
+    jcsj: "2024/10/23 11:54",
+    zk: "正常",
   },
   {
-    name: '延安大学附属医院',
-    jcdx: '燃气管网',
-    jczb: '甲烷浓度4%VOL',
-    jcsj: '2024/10/23 12:14',
-    zk: '正常',
+    name: "延安大学附属医院",
+    jcdx: "燃气管网",
+    jczb: "甲烷浓度4%VOL",
+    jcsj: "2024/10/23 12:14",
+    zk: "正常",
   },
   {
-    name: '王家坪大桥',
-    jcdx: '桥梁结构',
-    jczb: '倾角+1°',
-    jcsj: '2024/10/23 12:24',
-    zk: '正常',
+    name: "王家坪大桥",
+    jcdx: "桥梁结构",
+    jczb: "倾角+1°",
+    jcsj: "2024/10/23 12:24",
+    zk: "正常",
   },
   {
-    name: '王家坪大桥',
-    jcdx: '桥梁结构',
-    jczb: '位移12mm',
-    jcsj: '2024/10/23 13:13',
-    zk: '正常',
+    name: "王家坪大桥",
+    jcdx: "桥梁结构",
+    jczb: "位移12mm",
+    jcsj: "2024/10/23 13:13",
+    zk: "正常",
   },
   {
-    name: '王家坪大桥',
-    jcdx: '桥梁外部荷载',
-    jczb: '均布荷载6.4kn/m',
-    jcsj: '2024/10/23 13:43',
-    zk: '正常',
+    name: "王家坪大桥",
+    jcdx: "桥梁外部荷载",
+    jczb: "均布荷载6.4kn/m",
+    jcsj: "2024/10/23 13:43",
+    zk: "正常",
   },
   {
-    name: '王家坪大桥',
-    jcdx: '桥梁气象环境',
-    jczb: '风速3.2m/s',
-    jcsj: '2024/10/23 14:03',
-    zk: '正常',
+    name: "王家坪大桥",
+    jcdx: "桥梁气象环境",
+    jczb: "风速3.2m/s",
+    jcsj: "2024/10/23 14:03",
+    zk: "正常",
   },
   {
-    name: '杨家岭隧道',
-    jcdx: '隧道结构',
-    jczb: '裂缝宽度0.12mm',
-    jcsj: '2024/10/23 14:05',
-    zk: '正常',
+    name: "杨家岭隧道",
+    jcdx: "隧道结构",
+    jczb: "裂缝宽度0.12mm",
+    jcsj: "2024/10/23 14:05",
+    zk: "正常",
   },
   {
-    name: '杨家岭隧道',
-    jcdx: '隧道结构',
-    jczb: '静应变+10με',
-    jcsj: '2024/10/23 14:25',
-    zk: '正常',
+    name: "杨家岭隧道",
+    jcdx: "隧道结构",
+    jczb: "静应变+10με",
+    jcsj: "2024/10/23 14:25",
+    zk: "正常",
   },
 
   {
-    name: '王家坪旧址门口',
-    jcdx: '积水液位',
-    jczb: '水深0m',
-    jcsj: '2024/10/23 15:21',
-    zk: '正常',
+    name: "王家坪旧址门口",
+    jcdx: "积水液位",
+    jczb: "水深0m",
+    jcsj: "2024/10/23 15:21",
+    zk: "正常",
   },
   {
-    name: '大砭沟与北大街交叉口',
-    jcdx: '积水液位',
-    jczb: '水深0m',
-    jcsj: '2024/10/23 15:25',
-    zk: '正常',
+    name: "大砭沟与北大街交叉口",
+    jcdx: "积水液位",
+    jczb: "水深0m",
+    jcsj: "2024/10/23 15:25",
+    zk: "正常",
   },
 ]);
 const yxjcname = ref("7天");
@@ -327,6 +333,7 @@
         text-align: center;
         margin-top: 5px;
         margin-left: 10px;
+        font-size: 16px;
       }
       .activedright {
         border: 1px solid #2cfce9;
@@ -387,7 +394,7 @@
             .gw {
               font-family: Source Han Sans CN;
               font-weight: bold;
-              font-size: 14px;
+              font-size: 16px;
               color: #85d2d4;
               padding-left: 5px;
               // background: yellow;
@@ -404,10 +411,10 @@
             }
             .gl {
               font-family: Source Han Sans CN;
-              font-weight: bold;
-              font-size: 14px;
-              color: #34909f;
               padding-left: 10px;
+              font-weight: bold;
+              font-size: 16px;
+              color: #85d2d4;
             }
           }
         }
@@ -462,7 +469,7 @@
         .head-right {
           margin-top: 2px;
           cursor: pointer;
-          font-size: 14px;
+          font-size: 16px;
           color: #ffffff;
           display: flex;
           line-height: 18px;
diff --git a/src/views/oneMap/OverallOverview/RightBox.vue b/src/views/oneMap/OverallOverview/RightBox.vue
index 0a70630..f9477ed 100644
--- a/src/views/oneMap/OverallOverview/RightBox.vue
+++ b/src/views/oneMap/OverallOverview/RightBox.vue
@@ -67,7 +67,7 @@
                 font-family: Source Han Sans CN;
                 font-weight: bold;
                 font-size: 13px;
-                color: #34909f;
+                color: #12f9ff;
               "
             >
               {{ item.dw }}
diff --git a/src/views/oneMap/SmartDrainage/PsLeftBox.vue b/src/views/oneMap/SmartDrainage/PsLeftBox.vue
index c06a241..fd6283a 100644
--- a/src/views/oneMap/SmartDrainage/PsLeftBox.vue
+++ b/src/views/oneMap/SmartDrainage/PsLeftBox.vue
@@ -21,7 +21,14 @@
             <div class="upperNum">
               <div
                 class="oflower"
-                :style="{ color: item.name == '易涝点' ? '#a2fff8FF' : item.name == '风险点' ? '#faecabFF' : '#92edbfFF' }"
+                :style="{
+                  color:
+                    item.name == '易涝点'
+                      ? '#a2fff8FF'
+                      : item.name == '风险点'
+                      ? '#faecabFF'
+                      : '#92edbfFF',
+                }"
               >
                 {{ item.num }}
               </div>
@@ -41,7 +48,13 @@
           <span style="width: 45%; padding-left: 30px">{{ partName }}</span>
           <span style="width: 45%; padding-left: 130px">位置</span>
         </div>
-        <Vue3SeamlessScroll :list="dataList" :singleHeight="36" :singleWaitTime="1500" :hover="true" class="scrollCont">
+        <Vue3SeamlessScroll
+          :list="dataList"
+          :singleHeight="36"
+          :singleWaitTime="1500"
+          :hover="true"
+          class="scrollCont"
+        >
           <div class="scrollCont">
             <li
               v-for="(item, index) in dataList"
@@ -98,40 +111,40 @@
   </div>
 </template>
 <script setup>
-import { ref, reactive, toRefs, onMounted, onBeforeUnmount } from 'vue';
-import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
-import mapbox from '@/views/oneMap/map/mapboxInTable.vue';
-import fxd from '@/assets/images/zhps/fxd.png'; //风险点
-import qxgw from '@/assets/images/zhps/qxgw.png'; //缺陷管网
-import yld from '@/assets/images/zhps/yld.png'; //易涝点
+import { ref, reactive, toRefs, onMounted, onBeforeUnmount } from "vue";
+import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
+import mapbox from "@/views/oneMap/map/mapboxInTable.vue";
+import fxd from "@/assets/images/zhps/fxd.png"; //风险点
+import qxgw from "@/assets/images/zhps/qxgw.png"; //缺陷管网
+import yld from "@/assets/images/zhps/yld.png"; //易涝点
 
-import qzfk_3d from './qzfk_3d.vue'; //
-import ChartRy from './chartRy.vue';
-import bus from '@/bus';
+import qzfk_3d from "./qzfk_3d.vue"; //
+import ChartRy from "./chartRy.vue";
+import bus from "@/bus";
 const AllData = reactive({});
 const ryData = ref({});
-const ryRefresh = ref('');
+const ryRefresh = ref("");
 const tableData = ref([
-  { name: '易涝点', num: '7', Imgurl: yld, dw: '处' },
-  { name: '风险点', num: '9', Imgurl: fxd, dw: '处' },
-  { name: '缺陷管网', num: '6.1', Imgurl: qxgw, dw: 'km' },
+  { name: "易涝点", num: "7", Imgurl: yld, dw: "处" },
+  { name: "风险点", num: "9", Imgurl: fxd, dw: "处" },
+  { name: "缺陷管网", num: "6.1", Imgurl: qxgw, dw: "km" },
 ]);
 const showRainList = ref([]);
-const Pointname = ref('');
+const Pointname = ref("");
 const dataList = ref([
-  { num: '1', yls: '永安路', wz: '百米大道永安路' },
-  { num: '2', yls: '永昌路北口', wz: '双拥大道永昌路' },
-  { num: '3', yls: '桥儿沟隧道', wz: '双拥大道桥儿沟' },
-  { num: '4', yls: '原水果市场', wz: '双拥大道东十里铺' },
-  { num: '5', yls: '王家坪旧址门口', wz: '圣地路' },
-  { num: '6', yls: '桥儿沟隧道', wz: '双拥大道桥儿沟' },
-  { num: '7', yls: '原水果市场', wz: '双拥大道东十里铺' },
+  { num: "1", yls: "永安路", wz: "百米大道永安路" },
+  { num: "2", yls: "永昌路北口", wz: "双拥大道永昌路" },
+  { num: "3", yls: "桥儿沟隧道", wz: "双拥大道桥儿沟" },
+  { num: "4", yls: "原水果市场", wz: "双拥大道东十里铺" },
+  { num: "5", yls: "王家坪旧址门口", wz: "圣地路" },
+  { num: "6", yls: "桥儿沟隧道", wz: "双拥大道桥儿沟" },
+  { num: "7", yls: "原水果市场", wz: "双拥大道东十里铺" },
 ]);
 const images = [
-  'https://server1.wh-nf.cn:6082/tif/0819_8.tif',
-  'https://server1.wh-nf.cn:6082/tif/0819_9.tif',
-  'https://server1.wh-nf.cn:6082/tif/0819_10.tif',
-  'https://server1.wh-nf.cn:6082/tif/0819_11.tif',
+  "https://server1.wh-nf.cn:6082/tif/0819_8.tif",
+  "https://server1.wh-nf.cn:6082/tif/0819_9.tif",
+  "https://server1.wh-nf.cn:6082/tif/0819_10.tif",
+  "https://server1.wh-nf.cn:6082/tif/0819_11.tif",
 ];
 // 普查现状点击事件
 function Pointclick(val) {
@@ -139,99 +152,110 @@
 }
 
 const yearList = ref([
-  { name: '1小时', value: 1 },
-  { name: '3小时', value: 2 },
-  { name: '12小时', value: 3 },
-  { name: '24小时', value: 4 },
+  { name: "1小时", value: 1 },
+  { name: "3小时", value: 2 },
+  { name: "12小时", value: 3 },
+  { name: "24小时", value: 4 },
 ]);
-const activedname = ref('1小时');
+const activedname = ref("1小时");
 // 时间点击事件
 function yearclick(val, index) {
   activedname.value = val.name;
 
-  showRainList.value = index == 0 ? ranLeng[0] : index == 1 ? ranLeng[1] : index == 2 ? ranLeng[2] : ranLeng[3];
+  showRainList.value =
+    index == 0
+      ? ranLeng[0]
+      : index == 1
+      ? ranLeng[1]
+      : index == 2
+      ? ranLeng[2]
+      : ranLeng[3];
 
-  console.log('index', index);
+  console.log("index", index);
   initRainImage([images[index]]);
 }
 const timeActive = ref(0);
 const ranLeng = [
   [
-    { value: '0-0.2', color: 'rgba(7, 213, 118, 0)' },
-    { value: '0.2-5', color: 'rgb(38, 129, 240,1)' },
-    { value: '5-16', color: 'rgba(222,230,0,1)' },
-    { value: '16-25', color: 'rgba(255,184,15,1)' },
-    { value: '>25', color: 'rgb(255, 26, 26,1)' },
+    { value: "0-0.2", color: "rgba(7, 213, 118, 0)" },
+    { value: "0.2-5", color: "rgb(38, 129, 240,1)" },
+    { value: "5-16", color: "rgba(222,230,0,1)" },
+    { value: "16-25", color: "rgba(255,184,15,1)" },
+    { value: ">25", color: "rgb(255, 26, 26,1)" },
   ],
   [
-    { value: '0-5', color: 'rgba(7, 213, 118, 0)' },
-    { value: '5-15', color: 'rgba(7, 213, 118, 1)' },
-    { value: '15-30', color: 'rgba(38, 129, 240,1)' },
-    { value: '30-70', color: 'rgba(247, 223, 56, 1)' },
-    { value: '70-140', color: 'rgba(230, 85, 41, 1)' },
-    { value: '>140', color: 'rgba(255, 26, 26, 1)' },
+    { value: "0-5", color: "rgba(7, 213, 118, 0)" },
+    { value: "5-15", color: "rgba(7, 213, 118, 1)" },
+    { value: "15-30", color: "rgba(38, 129, 240,1)" },
+    { value: "30-70", color: "rgba(247, 223, 56, 1)" },
+    { value: "70-140", color: "rgba(230, 85, 41, 1)" },
+    { value: ">140", color: "rgba(255, 26, 26, 1)" },
   ],
   [
-    { value: '0-5', color: 'rgba(7, 213, 118, 0)' },
-    { value: '5-15', color: 'rgba(7, 213, 118, 1)' },
-    { value: '15-30', color: 'rgba(38, 129, 240,1)' },
-    { value: '30-70', color: 'rgba(247, 223, 56, 1)' },
-    { value: '70-140', color: 'rgba(230, 85, 41, 1)' },
-    { value: '>140', color: 'rgba(255, 26, 26, 1)' },
+    { value: "0-5", color: "rgba(7, 213, 118, 0)" },
+    { value: "5-15", color: "rgba(7, 213, 118, 1)" },
+    { value: "15-30", color: "rgba(38, 129, 240,1)" },
+    { value: "30-70", color: "rgba(247, 223, 56, 1)" },
+    { value: "70-140", color: "rgba(230, 85, 41, 1)" },
+    { value: ">140", color: "rgba(255, 26, 26, 1)" },
   ],
   [
-    { value: '0-10', color: 'rgba(7, 213, 118, 0)' },
-    { value: '10-25', color: 'rgba(7, 213, 118, 1)' },
-    { value: '25-50', color: 'rgba(38, 129, 240,1)' },
-    { value: '50-100', color: 'rgba(247, 223, 56, 1)' },
-    { value: '100-250', color: 'rgba(230, 85, 41, 1)' },
-    { value: '>250', color: 'rgba(255, 26, 26, 1)' },
+    { value: "0-10", color: "rgba(7, 213, 118, 0)" },
+    { value: "10-25", color: "rgba(7, 213, 118, 1)" },
+    { value: "25-50", color: "rgba(38, 129, 240,1)" },
+    { value: "50-100", color: "rgba(247, 223, 56, 1)" },
+    { value: "100-250", color: "rgba(230, 85, 41, 1)" },
+    { value: ">250", color: "rgba(255, 26, 26, 1)" },
   ],
 ];
 
-const partName = ref('易涝点');
+const partName = ref("易涝点");
 // 普查切换
 function partClick(val) {
   partName.value = val.name;
-  if (partName.value == '风险点') {
-    bus.emit('setLayerVisible', { layername: 'fengXianPoint', isCheck: true });
-    bus.emit('setLayerVisible', { layername: 'yiLaoPoint', isCheck: false });
+  if (partName.value == "风险点") {
+    bus.emit("setLayerVisible", { layername: "fengXianPoint", isCheck: true });
+    bus.emit("setLayerVisible", { layername: "yiLaoPoint", isCheck: false });
     newfiberMapbox.map.easeTo({
       center: [109.488, 36.596],
       zoom: 13,
     });
     dataList.value = [
-      { num: '1', yls: '长青路石油小', wz: '石油小区后门' },
-      { num: '2', yls: '长青路纺织花园车', wz: '太阳鸟健身房' },
-      { num: '3', yls: '凯泽世纪花园', wz: '凯泽世纪花园' },
-      { num: '4', yls: '七里铺街 ', wz: '勘探公司' },
-      { num: '5', yls: '南关街大礼堂', wz: '大礼堂' },
-      { num: '6', yls: '柳林隧道博城向柳林方向引桥入口', wz: '柳林隧道博城向柳林方向引桥入口' },
-      { num: '7', yls: '杨家湾超市门前', wz: '杨家湾路延大萃园校园公寓对面' },
-      { num: '8', yls: '马家湾博城至培植中学', wz: '博城至培植中学门前' },
-      { num: '9', yls: '百米大道延安小学十字', wz: '百米大道延安小学十字' },
+      { num: "1", yls: "长青路石油小", wz: "石油小区后门" },
+      { num: "2", yls: "长青路纺织花园车", wz: "太阳鸟健身房" },
+      { num: "3", yls: "凯泽世纪花园", wz: "凯泽世纪花园" },
+      { num: "4", yls: "七里铺街 ", wz: "勘探公司" },
+      { num: "5", yls: "南关街大礼堂", wz: "大礼堂" },
+      {
+        num: "6",
+        yls: "柳林隧道博城向柳林方向引桥入口",
+        wz: "柳林隧道博城向柳林方向引桥入口",
+      },
+      { num: "7", yls: "杨家湾超市门前", wz: "杨家湾路延大萃园校园公寓对面" },
+      { num: "8", yls: "马家湾博城至培植中学", wz: "博城至培植中学门前" },
+      { num: "9", yls: "百米大道延安小学十字", wz: "百米大道延安小学十字" },
     ];
-  } else if (partName.value == '易涝点') {
-    bus.emit('setLayerVisible', { layername: 'fengXianPoint', isCheck: false });
-    bus.emit('setLayerVisible', { layername: 'yiLaoPoint', isCheck: true });
+  } else if (partName.value == "易涝点") {
+    bus.emit("setLayerVisible", { layername: "fengXianPoint", isCheck: false });
+    bus.emit("setLayerVisible", { layername: "yiLaoPoint", isCheck: true });
     newfiberMapbox.map.easeTo({
       center: [109.488, 36.596],
       zoom: 13,
     });
     dataList.value = [
-      { num: '1', yls: '永安路', wz: '百米大道永安路' },
-      { num: '2', yls: '永昌路北口', wz: '双拥大道永昌路' },
-      { num: '3', yls: '桥儿沟隧道', wz: '双拥大道桥儿沟' },
-      { num: '4', yls: '原水果市场', wz: '双拥大道东十里铺' },
-      { num: '5', yls: '王家坪旧址门口', wz: '圣地路' },
-      { num: '6', yls: '桥儿沟隧道', wz: '双拥大道桥儿沟' },
-      { num: '7', yls: '原水果市场', wz: '双拥大道东十里铺' },
-      { num: '8', yls: '原水果市场', wz: '双拥大道东十里铺' },
-      { num: '9', yls: '王家坪旧址门口', wz: '圣地路' },
+      { num: "1", yls: "永安路", wz: "百米大道永安路" },
+      { num: "2", yls: "永昌路北口", wz: "双拥大道永昌路" },
+      { num: "3", yls: "桥儿沟隧道", wz: "双拥大道桥儿沟" },
+      { num: "4", yls: "原水果市场", wz: "双拥大道东十里铺" },
+      { num: "5", yls: "王家坪旧址门口", wz: "圣地路" },
+      { num: "6", yls: "桥儿沟隧道", wz: "双拥大道桥儿沟" },
+      { num: "7", yls: "原水果市场", wz: "双拥大道东十里铺" },
+      { num: "8", yls: "原水果市场", wz: "双拥大道东十里铺" },
+      { num: "9", yls: "王家坪旧址门口", wz: "圣地路" },
     ];
   } else {
-    bus.emit('setLayerVisible', { layername: 'fengXianPoint', isCheck: false });
-    bus.emit('setLayerVisible', { layername: 'yiLaoPoint', isCheck: false });
+    bus.emit("setLayerVisible", { layername: "fengXianPoint", isCheck: false });
+    bus.emit("setLayerVisible", { layername: "yiLaoPoint", isCheck: false });
     newfiberMapbox.map.easeTo({
       center: [109.488, 36.596],
       zoom: 13,
@@ -247,15 +271,15 @@
   return file;
 }
 
-const createCanvas = id => {
-  let canvas = document.createElement('canvas');
-  canvas.id = 'canvas' + id;
-  canvas.style.height = '90%';
-  canvas.style.width = '90%';
-  canvas.style.position = 'relative';
-  canvas.style.top = '5px';
+const createCanvas = (id) => {
+  let canvas = document.createElement("canvas");
+  canvas.id = "canvas" + id;
+  canvas.style.height = "90%";
+  canvas.style.width = "90%";
+  canvas.style.position = "relative";
+  canvas.style.top = "5px";
   //canvas.style.display = 'none';
-  document.getElementById('rainend').append(canvas);
+  document.getElementById("rainend").append(canvas);
   return canvas;
 };
 
@@ -270,7 +294,7 @@
       width: tifImg.getWidth(),
       height: tifImg.getHeight(),
       domain: [0, 256],
-      colorScale: 'mycolorscale',
+      colorScale: "mycolorscale",
     }));
   plot.setData(readRasters[0], tifImg.getWidth(), tifImg.getHeight());
   plot.render();
@@ -283,51 +307,54 @@
     [bbox[2], bbox[1]],
     [bbox[0], bbox[1]],
   ];
-  if (newfiberMapbox_table.map.getLayer('canvas-layer' + i)) {
-    newfiberMapbox_table.map.removeLayer('canvas-layer' + i);
-    newfiberMapbox_table.map.removeSource('canvas-source' + i);
+  if (newfiberMapbox_table.map.getLayer("canvas-layer" + i)) {
+    newfiberMapbox_table.map.removeLayer("canvas-layer" + i);
+    newfiberMapbox_table.map.removeSource("canvas-source" + i);
   }
-  newfiberMapbox_table.map.addSource('canvas-source' + i, {
-    type: 'canvas',
+  newfiberMapbox_table.map.addSource("canvas-source" + i, {
+    type: "canvas",
     canvas: canvasId,
     coordinates: bbox,
     animate: true,
   });
 
   newfiberMapbox_table.map.addLayer({
-    id: 'canvas-layer' + i,
-    type: 'raster',
-    source: 'canvas-source' + i,
+    id: "canvas-layer" + i,
+    type: "raster",
+    source: "canvas-source" + i,
   });
-  newfiberMapbox_table.map.moveLayer('canvas-layer' + i);
+  newfiberMapbox_table.map.moveLayer("canvas-layer" + i);
 };
 
 const plotInit = (colorScale = colorScale) => {
   const minVal = colorScale[0].value;
   const maxVal = colorScale[colorScale.length - 1].value;
-  let color = colorScale.filter(i => Number(i.value) / maxVal <= 1);
-  if (color[color.length - 1].value / maxVal < 1) color.push({ value: maxVal, color: colorScale[color.length].color });
+  let color = colorScale.filter((i) => Number(i.value) / maxVal <= 1);
+  if (color[color.length - 1].value / maxVal < 1)
+    color.push({ value: maxVal, color: colorScale[color.length].color });
   plotty.addColorScale(
-    'mycolorscale',
-    color.map(i => i.color),
-    color.map(i => (i.value / maxVal).toFixed(5))
+    "mycolorscale",
+    color.map((i) => i.color),
+    color.map((i) => (i.value / maxVal).toFixed(5))
   );
 };
 
 let colorScale = [
-  { value: '0', color: 'rgba(7, 213, 118, 0)' },
-  { value: '0.1', color: 'rgba(7, 213, 118, 0)' },
-  { value: '5', color: 'rgba(7, 213, 118, 1)' },
-  { value: '15', color: 'rgba(38, 129, 240,1)' },
-  { value: '30', color: 'rgba(247, 223, 56, 1)' },
-  { value: '70', color: 'rgba(230, 85, 41, 1)' },
-  { value: '140', color: 'rgba(255, 26, 26, 1)' },
+  { value: "0", color: "rgba(7, 213, 118, 0)" },
+  { value: "0.1", color: "rgba(7, 213, 118, 0)" },
+  { value: "5", color: "rgba(7, 213, 118, 1)" },
+  { value: "15", color: "rgba(38, 129, 240,1)" },
+  { value: "30", color: "rgba(247, 223, 56, 1)" },
+  { value: "70", color: "rgba(230, 85, 41, 1)" },
+  { value: "140", color: "rgba(255, 26, 26, 1)" },
 ];
 let imageFiles = [];
 let canvas = [];
 let plot = null;
-const initRainImage = async imagesList => {
-  imageFiles = await Promise.all(imagesList.map(url => urlToFile(url, _.last(_.split(url, '/')))));
+const initRainImage = async (imagesList) => {
+  imageFiles = await Promise.all(
+    imagesList.map((url) => urlToFile(url, _.last(_.split(url, "/"))))
+  );
 
   canvas = createCanvas(0);
   plotInit(colorScale);
@@ -343,22 +370,34 @@
   // }, 1000);
 };
 
-const setRainImage = index => {
+const setRainImage = (index) => {
   var reader = new FileReader();
-  reader.onload = e => createPlot(e, canvas);
+  reader.onload = (e) => createPlot(e, canvas);
   reader.readAsArrayBuffer(imageFiles[index]);
 };
 
 // 缺陷逛网
 function getData() {
   let obj = {
-    xData: ['脱节', '接口材料脱落', '支管暗接', '异物穿入', '渗漏', '沉积', '结垢', '障碍物', '残墙与坝根', '树根', '浮渣'],
+    xData: [
+      "脱节",
+      "接口材料脱落",
+      "支管暗接",
+      "异物穿入",
+      "渗漏",
+      "沉积",
+      "结垢",
+      "障碍物",
+      "残墙与坝根",
+      "树根",
+      "浮渣",
+    ],
     data: [0.3, 0.8, 0.6, 0.4, 0.1, 0.2, 0.5, 0.7, 0.4, 0.1, 0.1],
     num: [],
   };
   let max = JSON.parse(JSON.stringify(obj.data));
   let one = max.sort((a, b) => b - a)[0];
-  max.forEach(i => {
+  max.forEach((i) => {
     obj.num.push(one);
   });
   ryData.value = obj;
@@ -371,9 +410,9 @@
   initRainImage([images[0]]);
 });
 onBeforeUnmount(() => {
-  bus.emit('setLayerVisible', { layername: 'fengXianPoint', isCheck: false });
-  bus.emit('setLayerVisible', { layername: 'yiLaoPoint', isCheck: false });
-  var canvas = document.getElementById('canvas0');
+  bus.emit("setLayerVisible", { layername: "fengXianPoint", isCheck: false });
+  bus.emit("setLayerVisible", { layername: "yiLaoPoint", isCheck: false });
+  var canvas = document.getElementById("canvas0");
   canvas.remove();
 });
 </script>
@@ -444,7 +483,7 @@
           height: 50%;
           font-family: Source Han Sans CN;
           font-weight: 400;
-          font-size: 14px;
+          font-size: 15px;
           color: #ffffff;
         }
       }
@@ -457,7 +496,11 @@
         height: 38px;
         width: 430px;
         margin: 0 auto;
-        background: linear-gradient(0deg, rgba(22, 193, 216, 0.8) 0%, rgba(0, 43, 67, 0.8) 100%);
+        background: linear-gradient(
+          0deg,
+          rgba(22, 193, 216, 0.8) 0%,
+          rgba(0, 43, 67, 0.8) 100%
+        );
         border-radius: 6px;
         border: 1px solid #15d2fd;
         display: flex;
@@ -481,7 +524,7 @@
           // justify-content: space-between;
           align-items: center;
           margin-top: 2px;
-          background: url('@/assets/images/zhps/liebiao.png') no-repeat;
+          background: url("@/assets/images/zhps/liebiao.png") no-repeat;
           background-size: 100% 100%;
           .tableBodyList_span1 {
             width: 10%;
@@ -520,7 +563,7 @@
           }
         }
         .activedright {
-          background: url('@/assets/images/zhps/lbxz.png') no-repeat;
+          background: url("@/assets/images/zhps/lbxz.png") no-repeat;
           background-size: 100% 100%;
         }
       }
@@ -557,6 +600,7 @@
         text-align: center;
         margin-top: 5px;
         margin-left: 10px;
+        font-size: 16px;
       }
       .activedright {
         border: 1px solid #2cfce9;
@@ -572,7 +616,7 @@
       .rainend {
         width: 440px;
         height: 85%;
-        background: url('@/assets/images/zhps/hsRain.png') no-repeat;
+        background: url("@/assets/images/zhps/hsRain.png") no-repeat;
         background-size: 100% 100%;
       }
       .rainLegend {
@@ -620,7 +664,7 @@
   height: 44px;
   line-height: 50px;
   width: 98%;
-  background: url('@/assets/newImgs/partBg.png') no-repeat;
+  background: url("@/assets/newImgs/partBg.png") no-repeat;
   background-size: 100% 100%;
   display: flex;
   align-items: center;

diff --git a/src/views/oneMap/Echarts/publicEch.vue b/src/views/oneMap/Echarts/publicEch.vue
index 6ab1b7d..2816357 100644
--- a/src/views/oneMap/Echarts/publicEch.vue
+++ b/src/views/oneMap/Echarts/publicEch.vue
@@ -2,11 +2,11 @@
   <div :id="id" style="width: 100%; height: 100%"></div>
 </template>
 <script>
-import * as echarts from 'echarts';
-import { guid } from '@/utils/ruoyi';
-import { reactive, toRefs, onMounted, watch } from 'vue';
+import * as echarts from "echarts";
+import { guid } from "@/utils/ruoyi";
+import { reactive, toRefs, onMounted, watch } from "vue";
 export default {
-  name: 'line-chart',
+  name: "line-chart",
   props: {
     data: Object,
     refresh: Number,
@@ -28,28 +28,34 @@
       let chartDom = echarts.init(document.getElementById(allData.id));
 
       var shadowYData = [100, 100];
-      var barTopColor = ['#fe7285FF', '#1f93ffFF', '#31e1adFF', '#e4cd61FF', '#12f9ffFF'];
+      var barTopColor = ["#fe7285FF", "#1f93ffFF", "#31e1adFF", "#e4cd61FF", "#12f9ffFF"];
       var barBottomColor = [
-        'RGBA(154, 102, 125, 0.6)',
-        'RGBA(17, 109, 182, 0.6)',
-        'RGBA(27, 152, 136, 0.6)',
-        'RGBA(126, 138, 92, 0.6)',
-        'RGBA(10, 162, 178, 0.6)',
+        "RGBA(154, 102, 125, 0.6)",
+        "RGBA(17, 109, 182, 0.6)",
+        "RGBA(27, 152, 136, 0.6)",
+        "RGBA(126, 138, 92, 0.6)",
+        "RGBA(10, 162, 178, 0.6)",
       ];
       var barWidth = 20;
       var option;
       option = {
-        color: ['#3FFFC2', '#FFF21C'],
+        color: ["#3FFFC2", "#FFF21C"],
         tooltip: {
-          trigger: 'axis',
+          trigger: "axis",
 
-          formatter: params => {
+          formatter: (params) => {
             // console.log(params);
-            var relVal = '' + params[0].name;
+            var relVal = "" + params[0].name;
             for (var i = 0, l = params.length; i < l; i++) {
               if (params[i].seriesName) {
-                let unit = params[i].seriesName == '数量' ? '起' : '个';
-                relVal += '<br/>' + params[i].marker + params[i].seriesName + ' ' + params[i].value + unit;
+                let unit = params[i].seriesName == "数量" ? "起" : "个";
+                relVal +=
+                  "<br/>" +
+                  params[i].marker +
+                  params[i].seriesName +
+                  " " +
+                  params[i].value +
+                  unit;
               }
             }
             return relVal;
@@ -61,12 +67,12 @@
         },
         xAxis: [
           {
-            type: 'category',
+            type: "category",
             axisLine: {
               show: false,
               lineStyle: {
                 width: 2,
-                color: '#58b2ed',
+                color: "#58b2ed",
               },
             },
             splitLine: {
@@ -76,18 +82,18 @@
               show: false,
             },
             axisLabel: {
-              color: 'rgba(255,255,255,1)',
-              fontSize: 12,
-              fontFamily: 'AlibabaPuHuiTi',
+              color: "rgba(255,255,255,1)",
+              fontSize: 16,
+              fontFamily: "AlibabaPuHuiTi",
               formatter: function (params) {
-                var str = ''; // 最终拼接成的字符串
+                var str = ""; // 最终拼接成的字符串
                 var paramsLen = params.length; // 获取每项文字的个数
                 var len = 3; // 每行能显示的字的个数（根据实际情况自己设置）
                 var rowNumber = Math.ceil(paramsLen / len); // 换行的话，需要显示几行，向上取整
                 if (paramsLen > len) {
                   //大于设定的len就换行，不大于就不变化
                   for (var i = 0; i < rowNumber; i++) {
-                    var temp = ''; // 表示每一次截取的字符串
+                    var temp = ""; // 表示每一次截取的字符串
                     var start = i * len; // 开始截取的位置
                     var end = start + len; // 结束截取的位置
                     if (i == rowNumber - 1) {
@@ -95,7 +101,7 @@
                       temp = params.substring(start, paramsLen);
                     } else {
                       // 每一次拼接字符串并换行
-                      temp = params.substring(start, end) + '\n';
+                      temp = params.substring(start, end) + "\n";
                     }
                     str += temp; // 最终拼成的字符串
                   }
@@ -111,19 +117,19 @@
         ],
         yAxis: [
           {
-            name: '数量(起)',
-            type: 'value',
+            name: "数量(起)",
+            type: "value",
             axisLabel: {
-              color: '#3FFFC2',
+              color: "#3FFFC2",
               show: true,
             },
             nameTextStyle: {
-              color: '#3FFFC2',
+              color: "#3FFFC2",
             },
             splitLine: {
               lineStyle: {
-                type: 'dashed',
-                color: '#3FFFC2',
+                type: "dashed",
+                color: "#3FFFC2",
               },
             },
             alignTicks: true,
@@ -137,20 +143,20 @@
             bottom: 18,
             start: 0,
             end: 100,
-            handleSize: '100%',
-            fillerColor: '#94FA41',
-            borderColor: 'transparent',
-            backgroundColor: 'rgba(148, 250, 65, 0.2)',
+            handleSize: "100%",
+            fillerColor: "#94FA41",
+            borderColor: "transparent",
+            backgroundColor: "rgba(148, 250, 65, 0.2)",
             handleStyle: {
-              color: '#94FA41',
+              color: "#94FA41",
             },
             moveHandleSize: 0,
             textStyle: {
-              color: '#fff',
+              color: "#fff",
             },
           },
           {
-            type: 'inside',
+            type: "inside",
             show: true,
             height: 15,
             start: 1,
@@ -159,11 +165,11 @@
         ],
         series: [
           {
-            name: '数量',
-            type: 'pictorialBar',
+            name: "数量",
+            type: "pictorialBar",
             symbolSize: [barWidth, 10],
             symbolOffset: [0, -6],
-            symbolPosition: 'end',
+            symbolPosition: "end",
             z: 12,
             itemStyle: {
               normal: {
@@ -174,62 +180,62 @@
             },
             data: props.data.yAxis,
           },
+          // {
+          //   name: "",
+          //   type: "pictorialBar",
+          //   symbolSize: [barWidth + 10, 15],
+          //   symbolOffset: [0, 8],
+          //   z: 10,
+          //   itemStyle: {
+          //     normal: {
+          //       color: "transparent",
+          //       borderColor: barTopColor,
+          //       borderType: "solid",
+          //       borderWidth: 10,
+          //     },
+          //   },
+          //   data: props.data.yAxis,
+          // },
+          // {
+          //   name: '',
+          //   type: 'pictorialBar',
+          //   symbolSize: [barWidth + 20, 20],
+          //   symbolOffset: [0, 12],
+          //   z: 12,
+          //   itemStyle: {
+          //     normal: {
+          //       color: 'transparent',
+          //       borderColor: barTopColor,
+          //       borderType: 'solid',
+          //       borderWidth: 10,
+          //     },
+          //   },
+          //   data: props.data.yAxis,
+          //   stack: 'check',
+          // },
+          // {
+          //   name: "",
+          //   type: "pictorialBar",
+          //   symbolSize: [barWidth + 25, 20],
+          //   symbolOffset: [0, 12],
+          //   z: 12,
+          //   itemStyle: {
+          //     normal: {
+          //       color: "transparent",
+          //       borderColor: "#3ACDC5",
+          //       borderType: "solid",
+          //       borderWidth: 10,
+          //     },
+          //   },
+          //   data: props.data.yAxis,
+          //   stack: "check",
+          // },
           {
-            name: '',
-            type: 'pictorialBar',
-            symbolSize: [barWidth + 10, 15],
-            symbolOffset: [0, 8],
-            z: 10,
-            itemStyle: {
-              normal: {
-                color: 'transparent',
-                borderColor: barTopColor,
-                borderType: 'solid',
-                borderWidth: 10,
-              },
-            },
-            data: props.data.yAxis,
-          },
-          {
-            name: '',
-            type: 'pictorialBar',
-            symbolSize: [barWidth + 20, 20],
-            symbolOffset: [0, 12],
-            z: 12,
-            itemStyle: {
-              normal: {
-                color: 'transparent',
-                borderColor: barTopColor,
-                borderType: 'solid',
-                borderWidth: 10,
-              },
-            },
-            data: props.data.yAxis,
-            stack: 'check',
-          },
-          {
-            name: '',
-            type: 'pictorialBar',
-            symbolSize: [barWidth + 25, 20],
-            symbolOffset: [0, 12],
-            z: 12,
-            itemStyle: {
-              normal: {
-                color: 'transparent',
-                borderColor: '#3ACDC5',
-                borderType: 'solid',
-                borderWidth: 10,
-              },
-            },
-            data: props.data.yAxis,
-            stack: 'check',
-          },
-          {
-            name: '',
-            type: 'bar',
+            name: "",
+            type: "bar",
             barWidth: barWidth,
-            barGap: '10%', // Make series be overlap
-            barCateGoryGap: '10%',
+            barGap: "10%", // Make series be overlap
+            barCateGoryGap: "10%",
             itemStyle: {
               normal: {
                 color: function (params) {
@@ -264,7 +270,7 @@
     watch(
       () => props.refresh,
       () => {
-        console.log(props, 'propspropsprops');
+        console.log(props, "propspropsprops");
         if (allData.chartDom) {
           allData.chartDom.dispose();
           allData.chartDom = null;
@@ -276,7 +282,7 @@
     );
     onMounted(() => {
       init();
-      window.addEventListener('resize', resizeTheChart);
+      window.addEventListener("resize", resizeTheChart);
     });
     return {
       ...toRefs(allData),
diff --git a/src/views/oneMap/LayerControl/LayerControl.vue b/src/views/oneMap/LayerControl/LayerControl.vue
index 43fc007..2bdf6b8 100644
--- a/src/views/oneMap/LayerControl/LayerControl.vue
+++ b/src/views/oneMap/LayerControl/LayerControl.vue
@@ -1,6 +1,10 @@
 <template>
   <Transition name="slideTC">
-    <div class="LayerControl" v-show="ShowTuCheng">
+    <div
+      class="LayerControl"
+      v-show="ShowTuCheng"
+      :class="[showPanel ? 'TuChengImgTrue' : 'TuChengImgFalse']"
+    >
       <div class="GroupBox" v-for="item in AllData.LayerData" v-show="item.children">
         <div class="GroupName" @click="item.Show = !item.Show">{{ item.title }}</div>
         <!-- <Transition name="Group"> -->
@@ -30,30 +34,30 @@
 </template>
 
 <script setup name="LayerControl">
-import { ref, reactive, toRefs, onMounted } from 'vue';
+import { ref, reactive, toRefs, onMounted } from "vue";
 // 图层控制icon引入
-import { requireTuChengImg } from '@/utils/util';
-import yanAnPaiShuiArea from '@/assets/yanAnPaiShuiArea.json';
-import yanAnRoad from '@/assets/yanAnRoad.json';
-import yanAnWater from '@/assets/yanAnWater.json';
-import yanAnWSCLC from '@/assets/yanAnWSCLC.json';
-import yanAnCenterCity from '@/assets/yanAnCenterCity.json';
-import yanAnYSBZ from '@/assets/yanAnYSBZ.json';
-import yanAnYiLao from '@/assets/yanAnYiLao.json';
-import yanAnFengXian from '@/assets/yanAnFengXian.json';
-import yanAnPipeSupervise from '@/assets/yanAnPipeSupervise.json';
-import yanAnPKSupervise from '@/assets/yanAnPKSupervise.json';
-import yanAnNature from '@/assets/yanAnNature.json';
-import yanAnVideo from '@/assets/yanAnVideo.json';
-import yanAnMountain from '@/assets/yanAnMountain.json';
-import yanAnSmallWater from '@/assets/yanAnSmallWater.json';
-import yanAnRainArea from '@/assets/yanAnRainArea.json';
-import heDiJiaGu from '@/assets/heDiJiaGu.json';
-import heDiShuJun from '@/assets/heDiShuJun.json';
-import anXianGaiZao from '@/assets/anXianGaiZao.json';
-import bus from '@/bus';
-import axios from 'axios';
-import mapBoxVectorLayer from '@/utils/GISdocument/mapboxVectorLayer.js';
+import { requireTuChengImg } from "@/utils/util";
+import yanAnPaiShuiArea from "@/assets/yanAnPaiShuiArea.json";
+import yanAnRoad from "@/assets/yanAnRoad.json";
+import yanAnWater from "@/assets/yanAnWater.json";
+import yanAnWSCLC from "@/assets/yanAnWSCLC.json";
+import yanAnCenterCity from "@/assets/yanAnCenterCity.json";
+import yanAnYSBZ from "@/assets/yanAnYSBZ.json";
+import yanAnYiLao from "@/assets/yanAnYiLao.json";
+import yanAnFengXian from "@/assets/yanAnFengXian.json";
+import yanAnPipeSupervise from "@/assets/yanAnPipeSupervise.json";
+import yanAnPKSupervise from "@/assets/yanAnPKSupervise.json";
+import yanAnNature from "@/assets/yanAnNature.json";
+import yanAnVideo from "@/assets/yanAnVideo.json";
+import yanAnMountain from "@/assets/yanAnMountain.json";
+import yanAnSmallWater from "@/assets/yanAnSmallWater.json";
+import yanAnRainArea from "@/assets/yanAnRainArea.json";
+import heDiJiaGu from "@/assets/heDiJiaGu.json";
+import heDiShuJun from "@/assets/heDiShuJun.json";
+import anXianGaiZao from "@/assets/anXianGaiZao.json";
+import bus from "@/bus";
+import axios from "axios";
+import mapBoxVectorLayer from "@/utils/GISdocument/mapboxVectorLayer.js";
 const AllData = reactive({
   // 图层控制面板的渲染数据
   /**图层面板数据字段说明
@@ -66,216 +70,216 @@
    */
   LayerData: [
     {
-      title: '基本信息',
+      title: "基本信息",
       Show: true,
       children: [
         {
-          layerName: '蓝色地图',
-          layerKey: 'blackMap',
-          layerIcon: requireTuChengImg('zhongxinchengqu'),
+          layerName: "蓝色地图",
+          layerKey: "blackMap",
+          layerIcon: requireTuChengImg("zhongxinchengqu"),
           layerVisible: false,
         },
         {
-          layerName: '白色地图',
-          layerKey: 'whiteMap',
-          layerIcon: requireTuChengImg('zhongxinchengqu'),
+          layerName: "白色地图",
+          layerKey: "whiteMap",
+          layerIcon: requireTuChengImg("zhongxinchengqu"),
           layerVisible: false,
         },
         {
-          layerName: '影像地图',
-          layerKey: 'imageMap',
-          layerIcon: requireTuChengImg('zhongxinchengqu'),
+          layerName: "影像地图",
+          layerKey: "imageMap",
+          layerIcon: requireTuChengImg("zhongxinchengqu"),
           layerVisible: false,
         },
         {
-          layerName: '中心城区',
-          layerKey: 'centerCity',
-          layerIcon: requireTuChengImg('zhongxinchengqu'),
+          layerName: "中心城区",
+          layerKey: "centerCity",
+          layerIcon: requireTuChengImg("zhongxinchengqu"),
           layerVisible: false,
           dynamicLineData: yanAnCenterCity,
         },
         {
-          layerName: '三维建筑',
-          layerKey: 'buildingLayer',
-          layerIcon: '',
+          layerName: "三维建筑",
+          layerKey: "buildingLayer",
+          layerIcon: "",
           layerVisible: true,
         },
         {
-          layerName: '路网',
-          layerKey: 'road',
-          layerIcon: '',
+          layerName: "路网",
+          layerKey: "road",
+          layerIcon: "",
           layerVisible: true,
           dynamicLineData: yanAnRoad,
         },
         {
-          layerName: '河流水系',
-          layerKey: 'waterLake',
-          layerIcon: '',
+          layerName: "河流水系",
+          layerKey: "waterLake",
+          layerIcon: "",
           layerVisible: true,
           dynamicLineData: yanAnWater,
         },
         {
-          layerName: '防洪河道',
-          layerKey: 'fangHongWater',
-          layerIcon: '',
+          layerName: "防洪河道",
+          layerKey: "fangHongWater",
+          layerIcon: "",
           layerVisible: false,
           lineWithLabel: yanAnSmallWater,
         },
         {
-          layerName: '河堤疏浚',
-          layerKey: 'heDiShuJun',
-          layerIcon: '',
+          layerName: "河堤疏浚",
+          layerKey: "heDiShuJun",
+          layerIcon: "",
           layerVisible: false,
           lineWithLabel: heDiShuJun,
         },
         {
-          layerName: '河堤加固',
-          layerKey: 'heDiJiaGu',
-          layerIcon: '',
+          layerName: "河堤加固",
+          layerKey: "heDiJiaGu",
+          layerIcon: "",
           layerVisible: false,
           lineWithLabel: heDiJiaGu,
         },
         {
-          layerName: '岸线改造',
-          layerKey: 'anXianGaiZao',
-          layerIcon: '',
+          layerName: "岸线改造",
+          layerKey: "anXianGaiZao",
+          layerIcon: "",
           layerVisible: false,
           lineWithLabel: anXianGaiZao,
         },
         {
-          layerName: '河堤治理',
-          layerKey: 'heDiZhiLi',
-          layerIcon: '',
+          layerName: "河堤治理",
+          layerKey: "heDiZhiLi",
+          layerIcon: "",
           layerVisible: false,
           lineWithLabel: anXianGaiZao,
         },
         {
-          layerName: '空间格局',
-          layerKey: 'yanAnNature',
-          layerIcon: '',
+          layerName: "空间格局",
+          layerKey: "yanAnNature",
+          layerIcon: "",
           layerVisible: false,
           areaData: yanAnNature,
         },
         {
-          layerName: '山体修复',
-          layerKey: 'yanAnMountain',
-          layerIcon: '',
+          layerName: "山体修复",
+          layerKey: "yanAnMountain",
+          layerIcon: "",
           layerVisible: false,
           lineWithLabel: yanAnMountain,
         },
       ],
     },
     {
-      title: '燃气系统',
+      title: "燃气系统",
       Show: true,
       children: [
         {
-          layerName: '燃气管网',
-          layerKey: 'rq_all',
+          layerName: "燃气管网",
+          layerKey: "rq_all",
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: '干管',
-          layerKey: 'rq_SZLH',
+          layerName: "干管",
+          layerKey: "rq_SZLH",
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: '干管流向',
-          layerKey: 'sx_ya_smx_rq_line_sz',
+          layerName: "干管流向",
+          layerKey: "sx_ya_smx_rq_line_sz",
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: '主管',
-          layerKey: 'rq_TYLH',
+          layerName: "主管",
+          layerKey: "rq_TYLH",
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: '主管流向',
-          layerKey: 'sx_ya_smx_rq_line_zg',
+          layerName: "主管流向",
+          layerKey: "sx_ya_smx_rq_line_zg",
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: '支管',
-          layerKey: 'rq_LGLH',
+          layerName: "支管",
+          layerKey: "rq_LGLH",
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: '支管流向',
-          layerKey: 'sx_ya_smx_rq_line_zhig',
+          layerName: "支管流向",
+          layerKey: "sx_ya_smx_rq_line_zhig",
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: '其他管网',
-          layerKey: 'rq_other',
+          layerName: "其他管网",
+          layerKey: "rq_other",
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: '调压器',
-          layerKey: 'tiaoYaQi',
+          layerName: "调压器",
+          layerKey: "tiaoYaQi",
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: '节点',
-          layerKey: 'rq_jieDian',
+          layerName: "节点",
+          layerKey: "rq_jieDian",
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: '极性保护',
-          layerKey: 'jiXingBaoHu',
+          layerName: "极性保护",
+          layerKey: "jiXingBaoHu",
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: '流量计',
-          layerKey: 'rq_liuLiangJi',
+          layerName: "流量计",
+          layerKey: "rq_liuLiangJi",
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: '未知设备',
-          layerKey: 'rq_unknow',
+          layerName: "未知设备",
+          layerKey: "rq_unknow",
           layerIcon: null,
           layerVisible: false,
         },
       ],
     },
     {
-      title: '雨水系统',
+      title: "雨水系统",
       Show: true,
       children: [
         {
-          layerName: '雨水分区',
-          layerKey: 'rainArea',
+          layerName: "雨水分区",
+          layerKey: "rainArea",
           layerIcon: null,
           layerVisible: false,
           areaData: yanAnRainArea,
         },
         {
-          layerName: '排水分区',
-          layerKey: 'paishuiArea',
+          layerName: "排水分区",
+          layerKey: "paishuiArea",
           layerIcon: null,
           layerVisible: false,
           areaData: yanAnPaiShuiArea,
         },
         {
-          layerName: '雨水管网',
-          layerKey: 'ysLine1',
+          layerName: "雨水管网",
+          layerKey: "ysLine1",
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: '雨水管网流向',
-          layerKey: 'pipeline_info_flow_ys',
+          layerName: "雨水管网流向",
+          layerKey: "pipeline_info_flow_ys",
           layerIcon: null,
           layerVisible: false,
         },
@@ -286,8 +290,8 @@
         //   layerVisible: false,
         // },
         {
-          layerName: '雨水泵站',
-          layerKey: 'YSBZ',
+          layerName: "雨水泵站",
+          layerKey: "YSBZ",
           layerIcon: null,
           layerVisible: false,
           data: yanAnYSBZ,
@@ -295,24 +299,24 @@
       ],
     },
     {
-      title: '污水系统',
+      title: "污水系统",
       Show: true,
       children: [
         {
-          layerName: '污水分区',
-          layerKey: 'sewageArea',
+          layerName: "污水分区",
+          layerKey: "sewageArea",
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: '污水管网',
-          layerKey: 'wsLine1',
+          layerName: "污水管网",
+          layerKey: "wsLine1",
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: '污水管网流向',
-          layerKey: 'pipeline_info_flow_ws1',
+          layerName: "污水管网流向",
+          layerKey: "pipeline_info_flow_ws1",
           layerIcon: null,
           layerVisible: false,
         },
@@ -329,8 +333,8 @@
         //   layerVisible: false,
         // },
         {
-          layerName: '污水处理厂',
-          layerKey: 'WSCLC',
+          layerName: "污水处理厂",
+          layerKey: "WSCLC",
           layerIcon: null,
           layerVisible: false,
           data: yanAnWSCLC,
@@ -338,40 +342,40 @@
       ],
     },
     {
-      title: '感知设备',
+      title: "感知设备",
       Show: true,
       children: [
         {
-          layerName: '内涝易涝点',
-          layerKey: 'yiLaoPoint',
+          layerName: "内涝易涝点",
+          layerKey: "yiLaoPoint",
           layerIcon: null,
           layerVisible: false,
           data: yanAnYiLao,
         },
         {
-          layerName: '内涝风险点',
-          layerKey: 'fengXianPoint',
+          layerName: "内涝风险点",
+          layerKey: "fengXianPoint",
           layerIcon: null,
           layerVisible: false,
           data: yanAnFengXian,
         },
         {
-          layerName: '排水管网监测',
-          layerKey: 'pipeSupervise',
+          layerName: "排水管网监测",
+          layerKey: "pipeSupervise",
           layerIcon: null,
           layerVisible: false,
           data: yanAnPipeSupervise,
         },
         {
-          layerName: '排水排口监测',
-          layerKey: 'PKsupervise',
+          layerName: "排水排口监测",
+          layerKey: "PKsupervise",
           layerIcon: null,
           layerVisible: false,
           data: yanAnPKSupervise,
         },
         {
-          layerName: '视频监测',
-          layerKey: 'video',
+          layerName: "视频监测",
+          layerKey: "video",
           layerIcon: null,
           layerVisible: false,
           data: yanAnVideo,
@@ -386,98 +390,111 @@
     .concat(AllData.LayerData[2].children)
     .concat(AllData.LayerData[3].children)
     .concat(AllData.LayerData[4].children);
-  initeLegend.forEach(element => {
+  initeLegend.forEach((element) => {
     element.layername = element.layerKey;
   });
-  bus.emit('setLegendData', initeLegend);
+  bus.emit("setLegendData", initeLegend);
 });
 const props = defineProps({
   ShowTuCheng: false,
+  showPanel: false,
 });
 
 watch(
   () => props.ShowTuCheng,
   (newValue, oldValue) => {
-    console.log('ShowTuCheng变化了', newValue, oldValue);
+    console.log("ShowTuCheng变化了", newValue, oldValue);
   },
   { immediate: true, deep: true }
 );
 
-const layerClick = async item2 => {
+const layerClick = async (item2) => {
   item2.layerVisible = !item2.layerVisible;
   item2.isCheck = item2.layerVisible;
-  console.info(`点击了名称为${item2.layerName},图层ID为${item2.layerKey}的图层,点击后的图层展示情况为${item2.layerVisible}`);
-  bus.emit('setLayerVisible', { layername: item2.layerKey, isCheck: item2.isCheck });
-  if (item2.layerKey == 'whiteMap') {
-    AllData.LayerData[0]['children'][0].layerVisible = false;
-    AllData.LayerData[0]['children'][2].layerVisible = false;
-    let { data } = await axios.get('/static/libs/mapbox/style/customs/whiteMapStyle.json');
+  console.info(
+    `点击了名称为${item2.layerName},图层ID为${item2.layerKey}的图层,点击后的图层展示情况为${item2.layerVisible}`
+  );
+  bus.emit("setLayerVisible", { layername: item2.layerKey, isCheck: item2.isCheck });
+  if (item2.layerKey == "whiteMap") {
+    AllData.LayerData[0]["children"][0].layerVisible = false;
+    AllData.LayerData[0]["children"][2].layerVisible = false;
+    let { data } = await axios.get(
+      "/static/libs/mapbox/style/customs/whiteMapStyle.json"
+    );
     let newMapStyle;
     let oldMapStyle = newfiberMapbox.map.getStyle();
     let oldIds = [];
-    oldMapStyle.layers.forEach(layer => {
+    oldMapStyle.layers.forEach((layer) => {
       oldIds.push(layer.id);
     });
-    let newIds = data.layers.map(i => i.id);
-    oldIds.forEach(id => {
+    let newIds = data.layers.map((i) => i.id);
+    oldIds.forEach((id) => {
       let layer = data.layers[newIds.indexOf(id)];
       if (!layer) return;
-      Object.keys(layer.layout || {}).forEach(key => newfiberMapbox.map.setLayoutProperty(id, key, layer.layout[key]));
-      Object.keys(layer.paint || {}).forEach(key => newfiberMapbox.map.setPaintProperty(id, key, layer.paint[key]));
+      Object.keys(layer.layout || {}).forEach((key) =>
+        newfiberMapbox.map.setLayoutProperty(id, key, layer.layout[key])
+      );
+      Object.keys(layer.paint || {}).forEach((key) =>
+        newfiberMapbox.map.setPaintProperty(id, key, layer.paint[key])
+      );
     });
-    newfiberMapbox.map.setLayoutProperty('newfiber-XYZLayer', 'visibility', 'none');
+    newfiberMapbox.map.setLayoutProperty("newfiber-XYZLayer", "visibility", "none");
   }
-  if (item2.layerKey == 'blackMap') {
-    AllData.LayerData[0]['children'][1].layerVisible = false;
-    AllData.LayerData[0]['children'][2].layerVisible = false;
-    let { data } = await axios.get('/static/libs/mapbox/style/customs/night-style.json');
+  if (item2.layerKey == "blackMap") {
+    AllData.LayerData[0]["children"][1].layerVisible = false;
+    AllData.LayerData[0]["children"][2].layerVisible = false;
+    let { data } = await axios.get("/static/libs/mapbox/style/customs/night-style.json");
     let newMapStyle;
     let oldMapStyle = newfiberMapbox.map.getStyle();
     let oldIds = [];
-    oldMapStyle.layers.forEach(layer => {
+    oldMapStyle.layers.forEach((layer) => {
       oldIds.push(layer.id);
     });
-    let newIds = data.layers.map(i => i.id);
-    oldIds.forEach(id => {
+    let newIds = data.layers.map((i) => i.id);
+    oldIds.forEach((id) => {
       let layer = data.layers[newIds.indexOf(id)];
       if (!layer) return;
-      Object.keys(layer.layout || {}).forEach(key => newfiberMapbox.map.setLayoutProperty(id, key, layer.layout[key]));
-      Object.keys(layer.paint || {}).forEach(key => newfiberMapbox.map.setPaintProperty(id, key, layer.paint[key]));
+      Object.keys(layer.layout || {}).forEach((key) =>
+        newfiberMapbox.map.setLayoutProperty(id, key, layer.layout[key])
+      );
+      Object.keys(layer.paint || {}).forEach((key) =>
+        newfiberMapbox.map.setPaintProperty(id, key, layer.paint[key])
+      );
     });
-    newfiberMapbox.map.setLayoutProperty('newfiber-XYZLayer', 'visibility', 'none');
+    newfiberMapbox.map.setLayoutProperty("newfiber-XYZLayer", "visibility", "none");
   }
-  if (item2.layerKey == 'imageMap') {
-    AllData.LayerData[0]['children'][0].layerVisible = false;
-    AllData.LayerData[0]['children'][1].layerVisible = false;
-    newfiberMapbox.map.setLayoutProperty('newfiber-XYZLayer', 'visibility', 'visible');
-    newfiberMapbox.map.moveLayer('newfiber-XYZLayer', 'buildingLayer');
+  if (item2.layerKey == "imageMap") {
+    AllData.LayerData[0]["children"][0].layerVisible = false;
+    AllData.LayerData[0]["children"][1].layerVisible = false;
+    newfiberMapbox.map.setLayoutProperty("newfiber-XYZLayer", "visibility", "visible");
+    newfiberMapbox.map.moveLayer("newfiber-XYZLayer", "buildingLayer");
   }
   if (item2.areaData) {
     if (item2.isCheck) {
       mapBoxVectorLayer.addGeojsonPolygonWithLabel(item2.layerKey, item2.areaData);
     } else {
-      mapBoxVectorLayer.removeByIds([item2.layerKey, item2.layerKey + '_label']);
+      mapBoxVectorLayer.removeByIds([item2.layerKey, item2.layerKey + "_label"]);
     }
   }
-  if (item2.layerKey == 'buildingLayer') {
+  if (item2.layerKey == "buildingLayer") {
     if (item2.isCheck) {
-      newfiberMapbox.map.setLayoutProperty('buildingLayer', 'visibility', 'visible');
+      newfiberMapbox.map.setLayoutProperty("buildingLayer", "visibility", "visible");
     } else {
-      newfiberMapbox.map.setLayoutProperty('buildingLayer', 'visibility', 'none');
+      newfiberMapbox.map.setLayoutProperty("buildingLayer", "visibility", "none");
     }
   }
   if (item2.lineWithLabel) {
     if (item2.isCheck) {
       mapBoxVectorLayer.addGeojsonLineWithLabel(item2.layerKey, item2.lineWithLabel);
-      if (item2.layerKey == 'fangHongWater') {
+      if (item2.layerKey == "fangHongWater") {
         let layer = new mapboxL7.LineLayer({
-          name: 'fangHongWater',
+          name: "fangHongWater",
         })
           .source(item2.lineWithLabel)
           .size(3)
-          .shape('line')
-          .texture('arrow')
-          .color('rgba(243, 26, 237,1)')
+          .shape("line")
+          .texture("arrow")
+          .color("rgba(243, 26, 237,1)")
           .animate({
             interval: 2, // 间隔
             duration: 3, // 持续时间，延时
@@ -488,29 +505,29 @@
             lineTexture: true, // 开启线的贴图功能
             iconStep: 200, // 设置贴图纹理的间距
             borderWidth: 0.4, // 默认文 0，最大有效值为 0.5
-            borderColor: '#fff', // 默认为 #ccc
+            borderColor: "#fff", // 默认为 #ccc
           });
         newfiberMapbox.addLayer(layer);
       }
     } else {
-      mapBoxVectorLayer.removeByIds([item2.layerKey, item2.layerKey + '_label']);
-      if (newfiberMapbox.getLayerByName('fangHongWater')) {
-        newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName('fangHongWater'));
+      mapBoxVectorLayer.removeByIds([item2.layerKey, item2.layerKey + "_label"]);
+      if (newfiberMapbox.getLayerByName("fangHongWater")) {
+        newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName("fangHongWater"));
       }
     }
   }
-  if (item2.layerKey == 'road') {
+  if (item2.layerKey == "road") {
     if (item2.isCheck) {
-      if (newfiberMapbox.getLayerByName('dynamicRoad')) {
-        newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName('dynamicRoad'));
+      if (newfiberMapbox.getLayerByName("dynamicRoad")) {
+        newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName("dynamicRoad"));
       }
       let layer = new mapboxL7.LineLayer({
-        name: 'dynamicRoad',
+        name: "dynamicRoad",
       })
         .source(item2.dynamicLineData)
         .size(1.3)
-        .shape('line')
-        .color('rgb(184, 184, 184)')
+        .shape("line")
+        .color("rgb(184, 184, 184)")
         .animate({
           interval: 1, // 间隔
           duration: 1.5, // 持续时间，延时
@@ -521,22 +538,22 @@
         });
       newfiberMapbox.addLayer(layer);
     } else {
-      newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName('dynamicRoad'));
+      newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName("dynamicRoad"));
     }
   }
-  if (item2.layerKey == 'waterLake') {
+  if (item2.layerKey == "waterLake") {
     if (item2.isCheck) {
-      if (newfiberMapbox.getLayerByName('waterLake')) {
-        newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName('waterLake'));
+      if (newfiberMapbox.getLayerByName("waterLake")) {
+        newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName("waterLake"));
       }
       let layer = new mapboxL7.LineLayer({
-        name: 'waterLake',
+        name: "waterLake",
       })
         .source(item2.dynamicLineData)
         .size(4)
-        .shape('line')
-        .texture('arrow')
-        .color('aqua')
+        .shape("line")
+        .texture("arrow")
+        .color("aqua")
         .animate({
           interval: 2, // 间隔
           duration: 3, // 持续时间，延时
@@ -547,29 +564,29 @@
           lineTexture: true, // 开启线的贴图功能
           iconStep: 200, // 设置贴图纹理的间距
           borderWidth: 0.4, // 默认文 0，最大有效值为 0.5
-          borderColor: '#fff', // 默认为 #ccc
+          borderColor: "#fff", // 默认为 #ccc
         });
       newfiberMapbox.addLayer(layer);
     } else {
-      newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName('waterLake'));
+      newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName("waterLake"));
     }
   }
-  if (item2.layerKey == 'centerCity') {
+  if (item2.layerKey == "centerCity") {
     if (item2.isCheck) {
-      mapBoxVectorLayer.addGeojsonLine('centerCity', item2.dynamicLineData, 4, 1, 0.5);
+      mapBoxVectorLayer.addGeojsonLine("centerCity", item2.dynamicLineData, 4, 1, 0.5);
     } else {
-      mapBoxVectorLayer.removeByIds(['centerCity']);
+      mapBoxVectorLayer.removeByIds(["centerCity"]);
     }
   }
 };
 onMounted(() => {
   // 清除所有的图层选中
-  bus.on('clearAllLayer', () => {
-    AllData.LayerData.forEach(data => {
-      data.children.map(item => {
+  bus.on("clearAllLayer", () => {
+    AllData.LayerData.forEach((data) => {
+      data.children.map((item) => {
         // item.layerVisible = true;
         // 做优化,全局为True,再执行隐藏工作,页面调用api太多了,这里应该只将展示的图层进行取消操作就行
-        item.layerVisible ? layerClick(item) : '';
+        item.layerVisible ? layerClick(item) : "";
       });
     });
   });
@@ -577,17 +594,17 @@
   /**控制图层的显示
    *@param LayerArraya:需要打开的图层名称,示例:["路网","中心城区"]
    */
-  bus.on('SetLayerShow', LayerArraya => {
-    AllData.LayerData.forEach(data => {
-      data.children.map(item => {
-        LayerArraya.includes(item.layerName) ? layerClick(item) : '';
+  bus.on("SetLayerShow", (LayerArraya) => {
+    AllData.LayerData.forEach((data) => {
+      data.children.map((item) => {
+        LayerArraya.includes(item.layerName) ? layerClick(item) : "";
       });
     });
   });
 });
 onBeforeUnmount(() => {
-  bus.off('clearAllLayer');
-  bus.off('SetLayerShow');
+  bus.off("clearAllLayer");
+  bus.off("SetLayerShow");
 });
 </script>
 
@@ -598,7 +615,7 @@
   position: absolute;
   top: 150px;
   right: 476px;
-  background: url('@/assets/images/Sponge_screen/TuChengBG.png') no-repeat center;
+  background: url("@/assets/images/Sponge_screen/TuChengBG.png") no-repeat center;
   background-size: contain;
   box-sizing: border-box;
   padding: 25px 0px;
@@ -614,7 +631,7 @@
       width: 190px;
       height: 25px;
       line-height: 25px;
-      background-image: url('@/assets/images/Sponge_screen/TuChengFenZuBG.png'),
+      background-image: url("@/assets/images/Sponge_screen/TuChengFenZuBG.png"),
         linear-gradient(to right, #1c899600, #1c8996, #1c899600);
       background-repeat: no-repeat;
       background-position: center;
@@ -672,6 +689,14 @@
     }
   }
 }
+.TuChengImgTrue {
+  transform: translateX(460px);
+  transition: all 1s ease;
+}
+.TuChengImgFalse {
+  transform: translateX(0px);
+  transition: all 1s ease;
+}
 // 动画
 /*
   进入和离开动画可以使用不同
diff --git a/src/views/oneMap/OverallOverview/LeftBox.vue b/src/views/oneMap/OverallOverview/LeftBox.vue
index e26dce0..70aad73 100644
--- a/src/views/oneMap/OverallOverview/LeftBox.vue
+++ b/src/views/oneMap/OverallOverview/LeftBox.vue
@@ -90,7 +90,13 @@
         <span class="tableHeaderList tableList4">监测时间</span>
         <span class="tableHeaderList tableList5">状态</span>
       </div>
-      <Vue3SeamlessScroll :list="FXJCData" :singleHeight="60" :singleWaitTime="1500" :hover="true" class="tableBody">
+      <Vue3SeamlessScroll
+        :list="FXJCData"
+        :singleHeight="60"
+        :singleWaitTime="1500"
+        :hover="true"
+        class="tableBody"
+      >
         <div class="tableBodyList" v-for="item in FXJCData">
           <span class="tableBodyList_span1" :title="item.name">{{ item.name }}</span>
           <span class="tableBodyList_span2" :title="item.jcdx">{{ item.jcdx }} </span>
@@ -130,75 +136,75 @@
 ]);
 const FXJCData = ref([
   {
-    name: '延安中学',
-    jcdx: '燃气管网',
-    jczb: '甲烷浓度4.4%VOL',
-    jcsj: '2024/10/23 11:54',
-    zk: '正常',
+    name: "延安中学",
+    jcdx: "燃气管网",
+    jczb: "甲烷浓度4.4%VOL",
+    jcsj: "2024/10/23 11:54",
+    zk: "正常",
   },
   {
-    name: '延安大学附属医院',
-    jcdx: '燃气管网',
-    jczb: '甲烷浓度4%VOL',
-    jcsj: '2024/10/23 12:14',
-    zk: '正常',
+    name: "延安大学附属医院",
+    jcdx: "燃气管网",
+    jczb: "甲烷浓度4%VOL",
+    jcsj: "2024/10/23 12:14",
+    zk: "正常",
   },
   {
-    name: '王家坪大桥',
-    jcdx: '桥梁结构',
-    jczb: '倾角+1°',
-    jcsj: '2024/10/23 12:24',
-    zk: '正常',
+    name: "王家坪大桥",
+    jcdx: "桥梁结构",
+    jczb: "倾角+1°",
+    jcsj: "2024/10/23 12:24",
+    zk: "正常",
   },
   {
-    name: '王家坪大桥',
-    jcdx: '桥梁结构',
-    jczb: '位移12mm',
-    jcsj: '2024/10/23 13:13',
-    zk: '正常',
+    name: "王家坪大桥",
+    jcdx: "桥梁结构",
+    jczb: "位移12mm",
+    jcsj: "2024/10/23 13:13",
+    zk: "正常",
   },
   {
-    name: '王家坪大桥',
-    jcdx: '桥梁外部荷载',
-    jczb: '均布荷载6.4kn/m',
-    jcsj: '2024/10/23 13:43',
-    zk: '正常',
+    name: "王家坪大桥",
+    jcdx: "桥梁外部荷载",
+    jczb: "均布荷载6.4kn/m",
+    jcsj: "2024/10/23 13:43",
+    zk: "正常",
   },
   {
-    name: '王家坪大桥',
-    jcdx: '桥梁气象环境',
-    jczb: '风速3.2m/s',
-    jcsj: '2024/10/23 14:03',
-    zk: '正常',
+    name: "王家坪大桥",
+    jcdx: "桥梁气象环境",
+    jczb: "风速3.2m/s",
+    jcsj: "2024/10/23 14:03",
+    zk: "正常",
   },
   {
-    name: '杨家岭隧道',
-    jcdx: '隧道结构',
-    jczb: '裂缝宽度0.12mm',
-    jcsj: '2024/10/23 14:05',
-    zk: '正常',
+    name: "杨家岭隧道",
+    jcdx: "隧道结构",
+    jczb: "裂缝宽度0.12mm",
+    jcsj: "2024/10/23 14:05",
+    zk: "正常",
   },
   {
-    name: '杨家岭隧道',
-    jcdx: '隧道结构',
-    jczb: '静应变+10με',
-    jcsj: '2024/10/23 14:25',
-    zk: '正常',
+    name: "杨家岭隧道",
+    jcdx: "隧道结构",
+    jczb: "静应变+10με",
+    jcsj: "2024/10/23 14:25",
+    zk: "正常",
   },
 
   {
-    name: '王家坪旧址门口',
-    jcdx: '积水液位',
-    jczb: '水深0m',
-    jcsj: '2024/10/23 15:21',
-    zk: '正常',
+    name: "王家坪旧址门口",
+    jcdx: "积水液位",
+    jczb: "水深0m",
+    jcsj: "2024/10/23 15:21",
+    zk: "正常",
   },
   {
-    name: '大砭沟与北大街交叉口',
-    jcdx: '积水液位',
-    jczb: '水深0m',
-    jcsj: '2024/10/23 15:25',
-    zk: '正常',
+    name: "大砭沟与北大街交叉口",
+    jcdx: "积水液位",
+    jczb: "水深0m",
+    jcsj: "2024/10/23 15:25",
+    zk: "正常",
   },
 ]);
 const yxjcname = ref("7天");
@@ -327,6 +333,7 @@
         text-align: center;
         margin-top: 5px;
         margin-left: 10px;
+        font-size: 16px;
       }
       .activedright {
         border: 1px solid #2cfce9;
@@ -387,7 +394,7 @@
             .gw {
               font-family: Source Han Sans CN;
               font-weight: bold;
-              font-size: 14px;
+              font-size: 16px;
               color: #85d2d4;
               padding-left: 5px;
               // background: yellow;
@@ -404,10 +411,10 @@
             }
             .gl {
               font-family: Source Han Sans CN;
-              font-weight: bold;
-              font-size: 14px;
-              color: #34909f;
               padding-left: 10px;
+              font-weight: bold;
+              font-size: 16px;
+              color: #85d2d4;
             }
           }
         }
@@ -462,7 +469,7 @@
         .head-right {
           margin-top: 2px;
           cursor: pointer;
-          font-size: 14px;
+          font-size: 16px;
           color: #ffffff;
           display: flex;
           line-height: 18px;
diff --git a/src/views/oneMap/OverallOverview/RightBox.vue b/src/views/oneMap/OverallOverview/RightBox.vue
index 0a70630..f9477ed 100644
--- a/src/views/oneMap/OverallOverview/RightBox.vue
+++ b/src/views/oneMap/OverallOverview/RightBox.vue
@@ -67,7 +67,7 @@
                 font-family: Source Han Sans CN;
                 font-weight: bold;
                 font-size: 13px;
-                color: #34909f;
+                color: #12f9ff;
               "
             >
               {{ item.dw }}
diff --git a/src/views/oneMap/SmartDrainage/PsLeftBox.vue b/src/views/oneMap/SmartDrainage/PsLeftBox.vue
index c06a241..fd6283a 100644
--- a/src/views/oneMap/SmartDrainage/PsLeftBox.vue
+++ b/src/views/oneMap/SmartDrainage/PsLeftBox.vue
@@ -21,7 +21,14 @@
             <div class="upperNum">
               <div
                 class="oflower"
-                :style="{ color: item.name == '易涝点' ? '#a2fff8FF' : item.name == '风险点' ? '#faecabFF' : '#92edbfFF' }"
+                :style="{
+                  color:
+                    item.name == '易涝点'
+                      ? '#a2fff8FF'
+                      : item.name == '风险点'
+                      ? '#faecabFF'
+                      : '#92edbfFF',
+                }"
               >
                 {{ item.num }}
               </div>
@@ -41,7 +48,13 @@
           <span style="width: 45%; padding-left: 30px">{{ partName }}</span>
           <span style="width: 45%; padding-left: 130px">位置</span>
         </div>
-        <Vue3SeamlessScroll :list="dataList" :singleHeight="36" :singleWaitTime="1500" :hover="true" class="scrollCont">
+        <Vue3SeamlessScroll
+          :list="dataList"
+          :singleHeight="36"
+          :singleWaitTime="1500"
+          :hover="true"
+          class="scrollCont"
+        >
           <div class="scrollCont">
             <li
               v-for="(item, index) in dataList"
@@ -98,40 +111,40 @@
   </div>
 </template>
 <script setup>
-import { ref, reactive, toRefs, onMounted, onBeforeUnmount } from 'vue';
-import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
-import mapbox from '@/views/oneMap/map/mapboxInTable.vue';
-import fxd from '@/assets/images/zhps/fxd.png'; //风险点
-import qxgw from '@/assets/images/zhps/qxgw.png'; //缺陷管网
-import yld from '@/assets/images/zhps/yld.png'; //易涝点
+import { ref, reactive, toRefs, onMounted, onBeforeUnmount } from "vue";
+import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
+import mapbox from "@/views/oneMap/map/mapboxInTable.vue";
+import fxd from "@/assets/images/zhps/fxd.png"; //风险点
+import qxgw from "@/assets/images/zhps/qxgw.png"; //缺陷管网
+import yld from "@/assets/images/zhps/yld.png"; //易涝点
 
-import qzfk_3d from './qzfk_3d.vue'; //
-import ChartRy from './chartRy.vue';
-import bus from '@/bus';
+import qzfk_3d from "./qzfk_3d.vue"; //
+import ChartRy from "./chartRy.vue";
+import bus from "@/bus";
 const AllData = reactive({});
 const ryData = ref({});
-const ryRefresh = ref('');
+const ryRefresh = ref("");
 const tableData = ref([
-  { name: '易涝点', num: '7', Imgurl: yld, dw: '处' },
-  { name: '风险点', num: '9', Imgurl: fxd, dw: '处' },
-  { name: '缺陷管网', num: '6.1', Imgurl: qxgw, dw: 'km' },
+  { name: "易涝点", num: "7", Imgurl: yld, dw: "处" },
+  { name: "风险点", num: "9", Imgurl: fxd, dw: "处" },
+  { name: "缺陷管网", num: "6.1", Imgurl: qxgw, dw: "km" },
 ]);
 const showRainList = ref([]);
-const Pointname = ref('');
+const Pointname = ref("");
 const dataList = ref([
-  { num: '1', yls: '永安路', wz: '百米大道永安路' },
-  { num: '2', yls: '永昌路北口', wz: '双拥大道永昌路' },
-  { num: '3', yls: '桥儿沟隧道', wz: '双拥大道桥儿沟' },
-  { num: '4', yls: '原水果市场', wz: '双拥大道东十里铺' },
-  { num: '5', yls: '王家坪旧址门口', wz: '圣地路' },
-  { num: '6', yls: '桥儿沟隧道', wz: '双拥大道桥儿沟' },
-  { num: '7', yls: '原水果市场', wz: '双拥大道东十里铺' },
+  { num: "1", yls: "永安路", wz: "百米大道永安路" },
+  { num: "2", yls: "永昌路北口", wz: "双拥大道永昌路" },
+  { num: "3", yls: "桥儿沟隧道", wz: "双拥大道桥儿沟" },
+  { num: "4", yls: "原水果市场", wz: "双拥大道东十里铺" },
+  { num: "5", yls: "王家坪旧址门口", wz: "圣地路" },
+  { num: "6", yls: "桥儿沟隧道", wz: "双拥大道桥儿沟" },
+  { num: "7", yls: "原水果市场", wz: "双拥大道东十里铺" },
 ]);
 const images = [
-  'https://server1.wh-nf.cn:6082/tif/0819_8.tif',
-  'https://server1.wh-nf.cn:6082/tif/0819_9.tif',
-  'https://server1.wh-nf.cn:6082/tif/0819_10.tif',
-  'https://server1.wh-nf.cn:6082/tif/0819_11.tif',
+  "https://server1.wh-nf.cn:6082/tif/0819_8.tif",
+  "https://server1.wh-nf.cn:6082/tif/0819_9.tif",
+  "https://server1.wh-nf.cn:6082/tif/0819_10.tif",
+  "https://server1.wh-nf.cn:6082/tif/0819_11.tif",
 ];
 // 普查现状点击事件
 function Pointclick(val) {
@@ -139,99 +152,110 @@
 }
 
 const yearList = ref([
-  { name: '1小时', value: 1 },
-  { name: '3小时', value: 2 },
-  { name: '12小时', value: 3 },
-  { name: '24小时', value: 4 },
+  { name: "1小时", value: 1 },
+  { name: "3小时", value: 2 },
+  { name: "12小时", value: 3 },
+  { name: "24小时", value: 4 },
 ]);
-const activedname = ref('1小时');
+const activedname = ref("1小时");
 // 时间点击事件
 function yearclick(val, index) {
   activedname.value = val.name;
 
-  showRainList.value = index == 0 ? ranLeng[0] : index == 1 ? ranLeng[1] : index == 2 ? ranLeng[2] : ranLeng[3];
+  showRainList.value =
+    index == 0
+      ? ranLeng[0]
+      : index == 1
+      ? ranLeng[1]
+      : index == 2
+      ? ranLeng[2]
+      : ranLeng[3];
 
-  console.log('index', index);
+  console.log("index", index);
   initRainImage([images[index]]);
 }
 const timeActive = ref(0);
 const ranLeng = [
   [
-    { value: '0-0.2', color: 'rgba(7, 213, 118, 0)' },
-    { value: '0.2-5', color: 'rgb(38, 129, 240,1)' },
-    { value: '5-16', color: 'rgba(222,230,0,1)' },
-    { value: '16-25', color: 'rgba(255,184,15,1)' },
-    { value: '>25', color: 'rgb(255, 26, 26,1)' },
+    { value: "0-0.2", color: "rgba(7, 213, 118, 0)" },
+    { value: "0.2-5", color: "rgb(38, 129, 240,1)" },
+    { value: "5-16", color: "rgba(222,230,0,1)" },
+    { value: "16-25", color: "rgba(255,184,15,1)" },
+    { value: ">25", color: "rgb(255, 26, 26,1)" },
   ],
   [
-    { value: '0-5', color: 'rgba(7, 213, 118, 0)' },
-    { value: '5-15', color: 'rgba(7, 213, 118, 1)' },
-    { value: '15-30', color: 'rgba(38, 129, 240,1)' },
-    { value: '30-70', color: 'rgba(247, 223, 56, 1)' },
-    { value: '70-140', color: 'rgba(230, 85, 41, 1)' },
-    { value: '>140', color: 'rgba(255, 26, 26, 1)' },
+    { value: "0-5", color: "rgba(7, 213, 118, 0)" },
+    { value: "5-15", color: "rgba(7, 213, 118, 1)" },
+    { value: "15-30", color: "rgba(38, 129, 240,1)" },
+    { value: "30-70", color: "rgba(247, 223, 56, 1)" },
+    { value: "70-140", color: "rgba(230, 85, 41, 1)" },
+    { value: ">140", color: "rgba(255, 26, 26, 1)" },
   ],
   [
-    { value: '0-5', color: 'rgba(7, 213, 118, 0)' },
-    { value: '5-15', color: 'rgba(7, 213, 118, 1)' },
-    { value: '15-30', color: 'rgba(38, 129, 240,1)' },
-    { value: '30-70', color: 'rgba(247, 223, 56, 1)' },
-    { value: '70-140', color: 'rgba(230, 85, 41, 1)' },
-    { value: '>140', color: 'rgba(255, 26, 26, 1)' },
+    { value: "0-5", color: "rgba(7, 213, 118, 0)" },
+    { value: "5-15", color: "rgba(7, 213, 118, 1)" },
+    { value: "15-30", color: "rgba(38, 129, 240,1)" },
+    { value: "30-70", color: "rgba(247, 223, 56, 1)" },
+    { value: "70-140", color: "rgba(230, 85, 41, 1)" },
+    { value: ">140", color: "rgba(255, 26, 26, 1)" },
   ],
   [
-    { value: '0-10', color: 'rgba(7, 213, 118, 0)' },
-    { value: '10-25', color: 'rgba(7, 213, 118, 1)' },
-    { value: '25-50', color: 'rgba(38, 129, 240,1)' },
-    { value: '50-100', color: 'rgba(247, 223, 56, 1)' },
-    { value: '100-250', color: 'rgba(230, 85, 41, 1)' },
-    { value: '>250', color: 'rgba(255, 26, 26, 1)' },
+    { value: "0-10", color: "rgba(7, 213, 118, 0)" },
+    { value: "10-25", color: "rgba(7, 213, 118, 1)" },
+    { value: "25-50", color: "rgba(38, 129, 240,1)" },
+    { value: "50-100", color: "rgba(247, 223, 56, 1)" },
+    { value: "100-250", color: "rgba(230, 85, 41, 1)" },
+    { value: ">250", color: "rgba(255, 26, 26, 1)" },
   ],
 ];
 
-const partName = ref('易涝点');
+const partName = ref("易涝点");
 // 普查切换
 function partClick(val) {
   partName.value = val.name;
-  if (partName.value == '风险点') {
-    bus.emit('setLayerVisible', { layername: 'fengXianPoint', isCheck: true });
-    bus.emit('setLayerVisible', { layername: 'yiLaoPoint', isCheck: false });
+  if (partName.value == "风险点") {
+    bus.emit("setLayerVisible", { layername: "fengXianPoint", isCheck: true });
+    bus.emit("setLayerVisible", { layername: "yiLaoPoint", isCheck: false });
     newfiberMapbox.map.easeTo({
       center: [109.488, 36.596],
       zoom: 13,
     });
     dataList.value = [
-      { num: '1', yls: '长青路石油小', wz: '石油小区后门' },
-      { num: '2', yls: '长青路纺织花园车', wz: '太阳鸟健身房' },
-      { num: '3', yls: '凯泽世纪花园', wz: '凯泽世纪花园' },
-      { num: '4', yls: '七里铺街 ', wz: '勘探公司' },
-      { num: '5', yls: '南关街大礼堂', wz: '大礼堂' },
-      { num: '6', yls: '柳林隧道博城向柳林方向引桥入口', wz: '柳林隧道博城向柳林方向引桥入口' },
-      { num: '7', yls: '杨家湾超市门前', wz: '杨家湾路延大萃园校园公寓对面' },
-      { num: '8', yls: '马家湾博城至培植中学', wz: '博城至培植中学门前' },
-      { num: '9', yls: '百米大道延安小学十字', wz: '百米大道延安小学十字' },
+      { num: "1", yls: "长青路石油小", wz: "石油小区后门" },
+      { num: "2", yls: "长青路纺织花园车", wz: "太阳鸟健身房" },
+      { num: "3", yls: "凯泽世纪花园", wz: "凯泽世纪花园" },
+      { num: "4", yls: "七里铺街 ", wz: "勘探公司" },
+      { num: "5", yls: "南关街大礼堂", wz: "大礼堂" },
+      {
+        num: "6",
+        yls: "柳林隧道博城向柳林方向引桥入口",
+        wz: "柳林隧道博城向柳林方向引桥入口",
+      },
+      { num: "7", yls: "杨家湾超市门前", wz: "杨家湾路延大萃园校园公寓对面" },
+      { num: "8", yls: "马家湾博城至培植中学", wz: "博城至培植中学门前" },
+      { num: "9", yls: "百米大道延安小学十字", wz: "百米大道延安小学十字" },
     ];
-  } else if (partName.value == '易涝点') {
-    bus.emit('setLayerVisible', { layername: 'fengXianPoint', isCheck: false });
-    bus.emit('setLayerVisible', { layername: 'yiLaoPoint', isCheck: true });
+  } else if (partName.value == "易涝点") {
+    bus.emit("setLayerVisible", { layername: "fengXianPoint", isCheck: false });
+    bus.emit("setLayerVisible", { layername: "yiLaoPoint", isCheck: true });
     newfiberMapbox.map.easeTo({
       center: [109.488, 36.596],
       zoom: 13,
     });
     dataList.value = [
-      { num: '1', yls: '永安路', wz: '百米大道永安路' },
-      { num: '2', yls: '永昌路北口', wz: '双拥大道永昌路' },
-      { num: '3', yls: '桥儿沟隧道', wz: '双拥大道桥儿沟' },
-      { num: '4', yls: '原水果市场', wz: '双拥大道东十里铺' },
-      { num: '5', yls: '王家坪旧址门口', wz: '圣地路' },
-      { num: '6', yls: '桥儿沟隧道', wz: '双拥大道桥儿沟' },
-      { num: '7', yls: '原水果市场', wz: '双拥大道东十里铺' },
-      { num: '8', yls: '原水果市场', wz: '双拥大道东十里铺' },
-      { num: '9', yls: '王家坪旧址门口', wz: '圣地路' },
+      { num: "1", yls: "永安路", wz: "百米大道永安路" },
+      { num: "2", yls: "永昌路北口", wz: "双拥大道永昌路" },
+      { num: "3", yls: "桥儿沟隧道", wz: "双拥大道桥儿沟" },
+      { num: "4", yls: "原水果市场", wz: "双拥大道东十里铺" },
+      { num: "5", yls: "王家坪旧址门口", wz: "圣地路" },
+      { num: "6", yls: "桥儿沟隧道", wz: "双拥大道桥儿沟" },
+      { num: "7", yls: "原水果市场", wz: "双拥大道东十里铺" },
+      { num: "8", yls: "原水果市场", wz: "双拥大道东十里铺" },
+      { num: "9", yls: "王家坪旧址门口", wz: "圣地路" },
     ];
   } else {
-    bus.emit('setLayerVisible', { layername: 'fengXianPoint', isCheck: false });
-    bus.emit('setLayerVisible', { layername: 'yiLaoPoint', isCheck: false });
+    bus.emit("setLayerVisible", { layername: "fengXianPoint", isCheck: false });
+    bus.emit("setLayerVisible", { layername: "yiLaoPoint", isCheck: false });
     newfiberMapbox.map.easeTo({
       center: [109.488, 36.596],
       zoom: 13,
@@ -247,15 +271,15 @@
   return file;
 }
 
-const createCanvas = id => {
-  let canvas = document.createElement('canvas');
-  canvas.id = 'canvas' + id;
-  canvas.style.height = '90%';
-  canvas.style.width = '90%';
-  canvas.style.position = 'relative';
-  canvas.style.top = '5px';
+const createCanvas = (id) => {
+  let canvas = document.createElement("canvas");
+  canvas.id = "canvas" + id;
+  canvas.style.height = "90%";
+  canvas.style.width = "90%";
+  canvas.style.position = "relative";
+  canvas.style.top = "5px";
   //canvas.style.display = 'none';
-  document.getElementById('rainend').append(canvas);
+  document.getElementById("rainend").append(canvas);
   return canvas;
 };
 
@@ -270,7 +294,7 @@
       width: tifImg.getWidth(),
       height: tifImg.getHeight(),
       domain: [0, 256],
-      colorScale: 'mycolorscale',
+      colorScale: "mycolorscale",
     }));
   plot.setData(readRasters[0], tifImg.getWidth(), tifImg.getHeight());
   plot.render();
@@ -283,51 +307,54 @@
     [bbox[2], bbox[1]],
     [bbox[0], bbox[1]],
   ];
-  if (newfiberMapbox_table.map.getLayer('canvas-layer' + i)) {
-    newfiberMapbox_table.map.removeLayer('canvas-layer' + i);
-    newfiberMapbox_table.map.removeSource('canvas-source' + i);
+  if (newfiberMapbox_table.map.getLayer("canvas-layer" + i)) {
+    newfiberMapbox_table.map.removeLayer("canvas-layer" + i);
+    newfiberMapbox_table.map.removeSource("canvas-source" + i);
   }
-  newfiberMapbox_table.map.addSource('canvas-source' + i, {
-    type: 'canvas',
+  newfiberMapbox_table.map.addSource("canvas-source" + i, {
+    type: "canvas",
     canvas: canvasId,
     coordinates: bbox,
     animate: true,
   });
 
   newfiberMapbox_table.map.addLayer({
-    id: 'canvas-layer' + i,
-    type: 'raster',
-    source: 'canvas-source' + i,
+    id: "canvas-layer" + i,
+    type: "raster",
+    source: "canvas-source" + i,
   });
-  newfiberMapbox_table.map.moveLayer('canvas-layer' + i);
+  newfiberMapbox_table.map.moveLayer("canvas-layer" + i);
 };
 
 const plotInit = (colorScale = colorScale) => {
   const minVal = colorScale[0].value;
   const maxVal = colorScale[colorScale.length - 1].value;
-  let color = colorScale.filter(i => Number(i.value) / maxVal <= 1);
-  if (color[color.length - 1].value / maxVal < 1) color.push({ value: maxVal, color: colorScale[color.length].color });
+  let color = colorScale.filter((i) => Number(i.value) / maxVal <= 1);
+  if (color[color.length - 1].value / maxVal < 1)
+    color.push({ value: maxVal, color: colorScale[color.length].color });
   plotty.addColorScale(
-    'mycolorscale',
-    color.map(i => i.color),
-    color.map(i => (i.value / maxVal).toFixed(5))
+    "mycolorscale",
+    color.map((i) => i.color),
+    color.map((i) => (i.value / maxVal).toFixed(5))
   );
 };
 
 let colorScale = [
-  { value: '0', color: 'rgba(7, 213, 118, 0)' },
-  { value: '0.1', color: 'rgba(7, 213, 118, 0)' },
-  { value: '5', color: 'rgba(7, 213, 118, 1)' },
-  { value: '15', color: 'rgba(38, 129, 240,1)' },
-  { value: '30', color: 'rgba(247, 223, 56, 1)' },
-  { value: '70', color: 'rgba(230, 85, 41, 1)' },
-  { value: '140', color: 'rgba(255, 26, 26, 1)' },
+  { value: "0", color: "rgba(7, 213, 118, 0)" },
+  { value: "0.1", color: "rgba(7, 213, 118, 0)" },
+  { value: "5", color: "rgba(7, 213, 118, 1)" },
+  { value: "15", color: "rgba(38, 129, 240,1)" },
+  { value: "30", color: "rgba(247, 223, 56, 1)" },
+  { value: "70", color: "rgba(230, 85, 41, 1)" },
+  { value: "140", color: "rgba(255, 26, 26, 1)" },
 ];
 let imageFiles = [];
 let canvas = [];
 let plot = null;
-const initRainImage = async imagesList => {
-  imageFiles = await Promise.all(imagesList.map(url => urlToFile(url, _.last(_.split(url, '/')))));
+const initRainImage = async (imagesList) => {
+  imageFiles = await Promise.all(
+    imagesList.map((url) => urlToFile(url, _.last(_.split(url, "/"))))
+  );
 
   canvas = createCanvas(0);
   plotInit(colorScale);
@@ -343,22 +370,34 @@
   // }, 1000);
 };
 
-const setRainImage = index => {
+const setRainImage = (index) => {
   var reader = new FileReader();
-  reader.onload = e => createPlot(e, canvas);
+  reader.onload = (e) => createPlot(e, canvas);
   reader.readAsArrayBuffer(imageFiles[index]);
 };
 
 // 缺陷逛网
 function getData() {
   let obj = {
-    xData: ['脱节', '接口材料脱落', '支管暗接', '异物穿入', '渗漏', '沉积', '结垢', '障碍物', '残墙与坝根', '树根', '浮渣'],
+    xData: [
+      "脱节",
+      "接口材料脱落",
+      "支管暗接",
+      "异物穿入",
+      "渗漏",
+      "沉积",
+      "结垢",
+      "障碍物",
+      "残墙与坝根",
+      "树根",
+      "浮渣",
+    ],
     data: [0.3, 0.8, 0.6, 0.4, 0.1, 0.2, 0.5, 0.7, 0.4, 0.1, 0.1],
     num: [],
   };
   let max = JSON.parse(JSON.stringify(obj.data));
   let one = max.sort((a, b) => b - a)[0];
-  max.forEach(i => {
+  max.forEach((i) => {
     obj.num.push(one);
   });
   ryData.value = obj;
@@ -371,9 +410,9 @@
   initRainImage([images[0]]);
 });
 onBeforeUnmount(() => {
-  bus.emit('setLayerVisible', { layername: 'fengXianPoint', isCheck: false });
-  bus.emit('setLayerVisible', { layername: 'yiLaoPoint', isCheck: false });
-  var canvas = document.getElementById('canvas0');
+  bus.emit("setLayerVisible", { layername: "fengXianPoint", isCheck: false });
+  bus.emit("setLayerVisible", { layername: "yiLaoPoint", isCheck: false });
+  var canvas = document.getElementById("canvas0");
   canvas.remove();
 });
 </script>
@@ -444,7 +483,7 @@
           height: 50%;
           font-family: Source Han Sans CN;
           font-weight: 400;
-          font-size: 14px;
+          font-size: 15px;
           color: #ffffff;
         }
       }
@@ -457,7 +496,11 @@
         height: 38px;
         width: 430px;
         margin: 0 auto;
-        background: linear-gradient(0deg, rgba(22, 193, 216, 0.8) 0%, rgba(0, 43, 67, 0.8) 100%);
+        background: linear-gradient(
+          0deg,
+          rgba(22, 193, 216, 0.8) 0%,
+          rgba(0, 43, 67, 0.8) 100%
+        );
         border-radius: 6px;
         border: 1px solid #15d2fd;
         display: flex;
@@ -481,7 +524,7 @@
           // justify-content: space-between;
           align-items: center;
           margin-top: 2px;
-          background: url('@/assets/images/zhps/liebiao.png') no-repeat;
+          background: url("@/assets/images/zhps/liebiao.png") no-repeat;
           background-size: 100% 100%;
           .tableBodyList_span1 {
             width: 10%;
@@ -520,7 +563,7 @@
           }
         }
         .activedright {
-          background: url('@/assets/images/zhps/lbxz.png') no-repeat;
+          background: url("@/assets/images/zhps/lbxz.png") no-repeat;
           background-size: 100% 100%;
         }
       }
@@ -557,6 +600,7 @@
         text-align: center;
         margin-top: 5px;
         margin-left: 10px;
+        font-size: 16px;
       }
       .activedright {
         border: 1px solid #2cfce9;
@@ -572,7 +616,7 @@
       .rainend {
         width: 440px;
         height: 85%;
-        background: url('@/assets/images/zhps/hsRain.png') no-repeat;
+        background: url("@/assets/images/zhps/hsRain.png") no-repeat;
         background-size: 100% 100%;
       }
       .rainLegend {
@@ -620,7 +664,7 @@
   height: 44px;
   line-height: 50px;
   width: 98%;
-  background: url('@/assets/newImgs/partBg.png') no-repeat;
+  background: url("@/assets/newImgs/partBg.png") no-repeat;
   background-size: 100% 100%;
   display: flex;
   align-items: center;
diff --git a/src/views/oneMap/SmartDrainage/PsRightBox.vue b/src/views/oneMap/SmartDrainage/PsRightBox.vue
index df3fdaf..dc78a71 100644
--- a/src/views/oneMap/SmartDrainage/PsRightBox.vue
+++ b/src/views/oneMap/SmartDrainage/PsRightBox.vue
@@ -34,7 +34,11 @@
               <span class="tableBodyList_span4">{{ item.kzsw }} </span>
               <span class="tableBodyList_span5">
                 <el-tag type="success" v-if="item.zt == '正常'">正常</el-tag>
-                <el-tag @click="showcswDalog(item)" style="cursor: pointer" type="warning" v-if="item.zt == '超控制常水位'"
+                <el-tag
+                  @click="showcswDalog(item)"
+                  style="cursor: pointer"
+                  type="warning"
+                  v-if="item.zt == '超控制常水位'"
                   >超控制常水位</el-tag
                 >
               </span>
@@ -45,24 +49,36 @@
           <div class="Titlelarge">河湖简介：延河</div>
           <div class="Contentdetails">
             延河为黄河右岸一级支流,发源于陕西省靖边县天赐湾乡周山南麓，经安塞县镰刀湾乡杨石寺村附近进人延安境内,自西北流向东南,经安塞、宝塔、延长等县(区),于延长南河沟乡凉水岸汇人黄河。延河全长286.9km,流城面积7725
-            km?,平均比降3.3%。市内河长248.5 km,市内面积7321 km?,主要支流有杏子河、坪桥川、西川河、南川河、蟠龙川等。
+            km?,平均比降3.3%。市内河长248.5 km,市内面积7321
+            km?,主要支流有杏子河、坪桥川、西川河、南川河、蟠龙川等。
           </div>
         </div>
       </div>
       <div class="leftSubTabsBox">
         <div class="tabContent" v-if="monitorname == '漫溢监测(1/29)'">
           <ul>
-            <li class="listOne curCick" v-for="(i, index) in listData" :key="index" @click="showMapDalog(i)">
+            <li
+              class="listOne curCick"
+              v-for="(i, index) in listData"
+              :key="index"
+              @click="showMapDalog(i)"
+            >
               <div class="line flex flex-align-center">
                 <div class="lable">站点名称：</div>
                 <div class="box flex flex-align-center flex-justcontent-center">
                   {{ i.siteName }}
                 </div>
-                <span :class="i.siteStatus == '在线' ? 'green' : 'rad'">{{ i.siteStatus }}</span>
+                <span
+                  class="box_Status"
+                  :class="i.siteStatus == '在线' ? 'green' : 'rad'"
+                  >{{ i.siteStatus }}</span
+                >
               </div>
               <div class="line flex flex-align-center">
                 <div class="lable">水<i></i>深：</div>
-                <div class="box flex flex-align-center flex-justcontent-center">{{ i.z || 0 }}米</div>
+                <div class="box flex flex-align-center flex-justcontent-center">
+                  {{ i.z || 0 }}米
+                </div>
               </div>
               <div class="line flex flex-align-center">
                 <div class="lable">风险分析：</div>
@@ -78,17 +94,28 @@
         </div>
         <div class="tabContent" v-if="monitorname == '积水监测(0/16)'">
           <ul>
-            <li class="listOne curCick" v-for="(i, index) in listData" :key="index" @click="JSshowMapDalog(i)">
+            <li
+              class="listOne curCick"
+              v-for="(i, index) in listData"
+              :key="index"
+              @click="JSshowMapDalog(i)"
+            >
               <div class="line flex flex-align-center">
                 <div class="lable">站点名称：</div>
                 <div class="box flex flex-align-center flex-justcontent-center">
                   {{ i.siteName }}
                 </div>
-                <span :class="i.siteStatus == '在线' ? 'green' : 'rad'">{{ i.siteStatus }}</span>
+                <span
+                  class="box_Status"
+                  :class="i.siteStatus == '在线' ? 'green' : 'rad'"
+                  >{{ i.siteStatus }}</span
+                >
               </div>
               <div class="line flex flex-align-center">
                 <div class="lable">水<i></i>深：</div>
-                <div class="box flex flex-align-center flex-justcontent-center">{{ i.z || 0 }}米</div>
+                <div class="box flex flex-align-center flex-justcontent-center">
+                  {{ i.z || 0 }}米
+                </div>
               </div>
               <div class="line flex flex-align-center">
                 <div class="lable">风险分析：</div>
@@ -117,13 +144,24 @@
         <span class="tableHeaderList tableList3">状态</span>
         <span class="tableHeaderList tableList4">操作</span>
       </div>
-      <Vue3SeamlessScroll :list="SSYJData" :singleHeight="34" :singleWaitTime="1500" :hover="true" class="tableBody">
+      <Vue3SeamlessScroll
+        :list="SSYJData"
+        :singleHeight="34"
+        :singleWaitTime="1500"
+        :hover="true"
+        class="tableBody"
+      >
         <div class="tableBodyList" v-for="item in SSYJData">
           <span class="tableBodyList_span1">{{ item.wz }}</span>
           <span class="tableBodyList_span2"> {{ item.sj }}</span>
           <span class="tableBodyList_span3">{{ item.zk }}</span>
           <span class="tableBodyList_span4">
-            <el-tag style="cursor: pointer" type="danger" v-if="item.cz == '派单'" @click="paidan(item)" size="small"
+            <el-tag
+              style="cursor: pointer"
+              type="danger"
+              v-if="item.cz == '派单'"
+              @click="paidan(item)"
+              size="small"
               >派单</el-tag
             >
             <el-tag size="small" type="success" v-if="item.cz == '已派单'">已派单</el-tag>
@@ -163,161 +201,164 @@
       </div>
     </div>
     <div class="fxChart">
-      <AssessmentjsEcharts :data="chartData2" :refresh="chartData2.refresh"></AssessmentjsEcharts>
+      <AssessmentjsEcharts
+        :data="chartData2"
+        :refresh="chartData2.refresh"
+      ></AssessmentjsEcharts>
     </div>
   </div>
 </template>
 
 <script setup>
-import { ref, reactive, toRefs, onMounted, onBeforeUnmount } from 'vue';
-import AssessmentjsEcharts from '@/views/oneMap/Echarts/AssessmentjsEcharts.vue';
-import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
-import bus from '@/bus';
+import { ref, reactive, toRefs, onMounted, onBeforeUnmount } from "vue";
+import AssessmentjsEcharts from "@/views/oneMap/Echarts/AssessmentjsEcharts.vue";
+import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
+import bus from "@/bus";
 const FXJCData = ref([
   {
-    xh: '1',
-    hd: '延河',
+    xh: "1",
+    hd: "延河",
     dqsw: 130,
     kzsw: 2000,
-    zt: '超控制常水位',
+    zt: "超控制常水位",
   },
   {
-    xh: '2',
-    hd: '杜甫川河',
+    xh: "2",
+    hd: "杜甫川河",
     dqsw: 10,
     kzsw: 300,
-    zt: '正常',
+    zt: "正常",
   },
   {
-    xh: '3',
-    hd: '西川河',
+    xh: "3",
+    hd: "西川河",
     dqsw: 11,
     kzsw: 700,
-    zt: '正常',
+    zt: "正常",
   },
   {
-    xh: '4',
-    hd: '南川河',
+    xh: "4",
+    hd: "南川河",
     dqsw: 12,
     kzsw: 700,
-    zt: '正常',
+    zt: "正常",
   },
 ]);
 const listData = ref([
-  { siteName: '东关大街与长青路交叉口', siteStatus: '在线', warnInfo: '无风险' },
-  { siteName: '大桥街与延河西路交叉口', siteStatus: '在线', warnInfo: '无风险' },
-  { siteName: '文化沟路与延河西路交叉口', siteStatus: '在线', warnInfo: '无风险' },
+  { siteName: "东关大街与长青路交叉口", siteStatus: "在线", warnInfo: "无风险" },
+  { siteName: "大桥街与延河西路交叉口", siteStatus: "在线", warnInfo: "无风险" },
+  { siteName: "文化沟路与延河西路交叉口", siteStatus: "在线", warnInfo: "无风险" },
 ]);
 const SSYJData = ref([
   {
-    wz: '东大街管网',
+    wz: "东大街管网",
     sj: 25,
-    zk: '高水位',
-    cz: '派单',
-    value: '004', //语音识别内容编码-前段自己设置的,后期项目有接口就直接替换数据唯一id
+    zk: "高水位",
+    cz: "派单",
+    value: "004", //语音识别内容编码-前段自己设置的,后期项目有接口就直接替换数据唯一id
   },
   {
-    wz: '枣园南路与枣园五路管网',
+    wz: "枣园南路与枣园五路管网",
     sj: 40,
-    zk: '满管',
-    cz: '派单',
-    value: '005',
+    zk: "满管",
+    cz: "派单",
+    value: "005",
   },
   {
-    wz: '王家坪旧址门口',
+    wz: "王家坪旧址门口",
     sj: 12,
-    zk: '积水',
-    cz: '派单',
-    value: '006',
+    zk: "积水",
+    cz: "派单",
+    value: "006",
   },
   {
-    wz: '金延安路与枣园大道管网 ',
+    wz: "金延安路与枣园大道管网 ",
     sj: 50,
-    zk: '满管',
-    cz: '已派单',
+    zk: "满管",
+    cz: "已派单",
   },
   {
-    wz: '延大路与杨家岭路管网  ',
+    wz: "延大路与杨家岭路管网  ",
     sj: 50,
-    zk: '满管',
-    cz: '已派单',
+    zk: "满管",
+    cz: "已派单",
   },
 ]);
 const yearList = ref([
-  { name: '月', value: 1 },
-  { name: '年', value: 2 },
+  { name: "月", value: 1 },
+  { name: "年", value: 2 },
 ]);
 const monitorData = ref([
-  { name: '漫溢监测(1/29)', value: 1 },
-  { name: '积水监测(0/16)', value: 2 },
-  { name: '水位监测(0/4)', value: 2 },
+  { name: "漫溢监测(1/29)", value: 1 },
+  { name: "积水监测(0/16)", value: 2 },
+  { name: "水位监测(0/4)", value: 2 },
 ]);
 const chartData2 = ref({
-  xAxis: ['12/1', '12/2', '12/3', '12/4', '12/5', '12/6'],
+  xAxis: ["12/1", "12/2", "12/3", "12/4", "12/5", "12/6"],
   refresh: 1,
 });
-const activedname = ref('月');
-const monitorname = ref('漫溢监测(1/29)');
+const activedname = ref("月");
+const monitorname = ref("漫溢监测(1/29)");
 function yearclick(val) {
   activedname.value = val.name;
 }
 
 function monitorclick(val) {
   monitorname.value = val.name;
-  if (monitorname.value == '漫溢监测(1/29)') {
+  if (monitorname.value == "漫溢监测(1/29)") {
     listData.value = [
-      { siteName: '东关大街与长青路交叉口', siteStatus: '在线', warnInfo: '无风险' },
-      { siteName: '大桥街与延河西路交叉口', siteStatus: '在线', warnInfo: '无风险' },
-      { siteName: '文化沟路与延河西路交叉口', siteStatus: '在线', warnInfo: '无风险' },
+      { siteName: "东关大街与长青路交叉口", siteStatus: "在线", warnInfo: "无风险" },
+      { siteName: "大桥街与延河西路交叉口", siteStatus: "在线", warnInfo: "无风险" },
+      { siteName: "文化沟路与延河西路交叉口", siteStatus: "在线", warnInfo: "无风险" },
     ];
-  } else if (monitorname.value == '积水监测(0/16)') {
+  } else if (monitorname.value == "积水监测(0/16)") {
     listData.value = [
-      { siteName: '东关大街与长青路交叉口', siteStatus: '在线', warnInfo: '无风险' },
-      { siteName: '大桥街与延河西路交叉口', siteStatus: '在线', warnInfo: '无风险' },
-      { siteName: '文化沟路与延河西路交叉口', siteStatus: '在线', warnInfo: '无风险' },
+      { siteName: "东关大街与长青路交叉口", siteStatus: "在线", warnInfo: "无风险" },
+      { siteName: "大桥街与延河西路交叉口", siteStatus: "在线", warnInfo: "无风险" },
+      { siteName: "文化沟路与延河西路交叉口", siteStatus: "在线", warnInfo: "无风险" },
     ];
   } else {
-    console.log(monitorname.value, '  monitorname.value');
+    console.log(monitorname.value, "  monitorname.value");
   }
 }
 // 弹框
 function showMapDalog(val) {
-  console.log(val.siteName, 'val.siteName');
+  console.log(val.siteName, "val.siteName");
   let data = {
     title: val.siteName,
-    comIDs: ['gwpm', 'jcsj'],
+    comIDs: ["gwpm", "jcsj"],
   };
-  bus.emit('publicDialog', data);
+  bus.emit("publicDialog", data);
   // showPipe.value = true;
 }
 // 积水弹框
 function JSshowMapDalog(val) {
   let data = {
     title: val.siteName,
-    comIDs: ['spjk', 'jcsj'],
+    comIDs: ["spjk", "jcsj"],
   };
-  bus.emit('publicDialog', data);
+  bus.emit("publicDialog", data);
   // showPipe.value = true;
 }
 
 // 派单
-const paidan = item => {
+const paidan = (item) => {
   let data = {
     title: item.wz,
-    comIDs: ['gdpf'],
+    comIDs: ["gdpf"],
     getSiteId: item.value,
   };
-  bus.emit('publicDialog', data);
+  bus.emit("publicDialog", data);
 };
 // 超控制常水位
 function showcswDalog(val) {
-  console.log(val, 'val');
+  console.log(val, "val");
   let data = {
-    title: val.hd + '监测点',
-    comIDs: ['PS_ckzcsw'],
+    title: val.hd + "监测点",
+    comIDs: ["PS_ckzcsw"],
   };
 
-  bus.emit('publicDialog', data);
+  bus.emit("publicDialog", data);
   // showPipe.value = true;
 }
 </script>
@@ -344,7 +385,7 @@
         width: 132px;
         height: 30px;
         padding: 2px 3px;
-        background: url('@/assets/images/zhps/fxpgw.png') no-repeat;
+        background: url("@/assets/images/zhps/fxpgw.png") no-repeat;
         background-size: 100% 100%;
         text-align: center;
         margin-top: 5px;
@@ -353,7 +394,7 @@
       .activedright {
         border: 1px solid #2cfce9;
         color: #e4f5ff;
-        background: url('@/assets/images/zhps/fxpgxz.png') no-repeat;
+        background: url("@/assets/images/zhps/fxpgxz.png") no-repeat;
         background-size: 100% 100%;
       }
     }
@@ -403,12 +444,15 @@
                 padding: 3px 0;
                 line-height: 20px;
                 border-radius: 2px 2px 2px 2px;
-                border: 1px solid #1cf5fc;
+                border: 1px solid #1cf4fc48;
                 text-align: center;
                 font-size: 14px;
                 font-weight: 400;
                 color: #ffffff;
               }
+              .box_Status {
+                font-size: 16px;
+              }
               .box2 {
                 width: 120px;
               }
@@ -429,9 +473,9 @@
                   background: rgba(255, 55, 55, 0.15);
                 }
                 &.green {
-                  border-color: #0fcd22;
-                  color: #0fcd22;
-                  background: rgba(15, 205, 34, 0.15);
+                  border-color: lime;
+                  color: lime;
+                  background: rgba(12, 134, 24, 0.15);
                 }
               }
             }
@@ -735,6 +779,7 @@
           text-align: center;
           position: relative;
           left: 40px;
+          font-size: 16px;
         }
         .activedright {
           border: 1px solid #2cfce9;
@@ -755,7 +800,7 @@
   height: 44px;
   line-height: 50px;
   width: 98%;
-  background: url('@/assets/newImgs/partBg.png') no-repeat;
+  background: url("@/assets/newImgs/partBg.png") no-repeat;
   background-size: 100% 100%;
   display: flex;
   align-items: center;

diff --git a/src/views/oneMap/Echarts/publicEch.vue b/src/views/oneMap/Echarts/publicEch.vue
index 6ab1b7d..2816357 100644
--- a/src/views/oneMap/Echarts/publicEch.vue
+++ b/src/views/oneMap/Echarts/publicEch.vue
@@ -2,11 +2,11 @@
   <div :id="id" style="width: 100%; height: 100%"></div>
 </template>
 <script>
-import * as echarts from 'echarts';
-import { guid } from '@/utils/ruoyi';
-import { reactive, toRefs, onMounted, watch } from 'vue';
+import * as echarts from "echarts";
+import { guid } from "@/utils/ruoyi";
+import { reactive, toRefs, onMounted, watch } from "vue";
 export default {
-  name: 'line-chart',
+  name: "line-chart",
   props: {
     data: Object,
     refresh: Number,
@@ -28,28 +28,34 @@
       let chartDom = echarts.init(document.getElementById(allData.id));
 
       var shadowYData = [100, 100];
-      var barTopColor = ['#fe7285FF', '#1f93ffFF', '#31e1adFF', '#e4cd61FF', '#12f9ffFF'];
+      var barTopColor = ["#fe7285FF", "#1f93ffFF", "#31e1adFF", "#e4cd61FF", "#12f9ffFF"];
       var barBottomColor = [
-        'RGBA(154, 102, 125, 0.6)',
-        'RGBA(17, 109, 182, 0.6)',
-        'RGBA(27, 152, 136, 0.6)',
-        'RGBA(126, 138, 92, 0.6)',
-        'RGBA(10, 162, 178, 0.6)',
+        "RGBA(154, 102, 125, 0.6)",
+        "RGBA(17, 109, 182, 0.6)",
+        "RGBA(27, 152, 136, 0.6)",
+        "RGBA(126, 138, 92, 0.6)",
+        "RGBA(10, 162, 178, 0.6)",
       ];
       var barWidth = 20;
       var option;
       option = {
-        color: ['#3FFFC2', '#FFF21C'],
+        color: ["#3FFFC2", "#FFF21C"],
         tooltip: {
-          trigger: 'axis',
+          trigger: "axis",
 
-          formatter: params => {
+          formatter: (params) => {
             // console.log(params);
-            var relVal = '' + params[0].name;
+            var relVal = "" + params[0].name;
             for (var i = 0, l = params.length; i < l; i++) {
               if (params[i].seriesName) {
-                let unit = params[i].seriesName == '数量' ? '起' : '个';
-                relVal += '<br/>' + params[i].marker + params[i].seriesName + ' ' + params[i].value + unit;
+                let unit = params[i].seriesName == "数量" ? "起" : "个";
+                relVal +=
+                  "<br/>" +
+                  params[i].marker +
+                  params[i].seriesName +
+                  " " +
+                  params[i].value +
+                  unit;
               }
             }
             return relVal;
@@ -61,12 +67,12 @@
         },
         xAxis: [
           {
-            type: 'category',
+            type: "category",
             axisLine: {
               show: false,
               lineStyle: {
                 width: 2,
-                color: '#58b2ed',
+                color: "#58b2ed",
               },
             },
             splitLine: {
@@ -76,18 +82,18 @@
               show: false,
             },
             axisLabel: {
-              color: 'rgba(255,255,255,1)',
-              fontSize: 12,
-              fontFamily: 'AlibabaPuHuiTi',
+              color: "rgba(255,255,255,1)",
+              fontSize: 16,
+              fontFamily: "AlibabaPuHuiTi",
               formatter: function (params) {
-                var str = ''; // 最终拼接成的字符串
+                var str = ""; // 最终拼接成的字符串
                 var paramsLen = params.length; // 获取每项文字的个数
                 var len = 3; // 每行能显示的字的个数（根据实际情况自己设置）
                 var rowNumber = Math.ceil(paramsLen / len); // 换行的话，需要显示几行，向上取整
                 if (paramsLen > len) {
                   //大于设定的len就换行，不大于就不变化
                   for (var i = 0; i < rowNumber; i++) {
-                    var temp = ''; // 表示每一次截取的字符串
+                    var temp = ""; // 表示每一次截取的字符串
                     var start = i * len; // 开始截取的位置
                     var end = start + len; // 结束截取的位置
                     if (i == rowNumber - 1) {
@@ -95,7 +101,7 @@
                       temp = params.substring(start, paramsLen);
                     } else {
                       // 每一次拼接字符串并换行
-                      temp = params.substring(start, end) + '\n';
+                      temp = params.substring(start, end) + "\n";
                     }
                     str += temp; // 最终拼成的字符串
                   }
@@ -111,19 +117,19 @@
         ],
         yAxis: [
           {
-            name: '数量(起)',
-            type: 'value',
+            name: "数量(起)",
+            type: "value",
             axisLabel: {
-              color: '#3FFFC2',
+              color: "#3FFFC2",
               show: true,
             },
             nameTextStyle: {
-              color: '#3FFFC2',
+              color: "#3FFFC2",
             },
             splitLine: {
               lineStyle: {
-                type: 'dashed',
-                color: '#3FFFC2',
+                type: "dashed",
+                color: "#3FFFC2",
               },
             },
             alignTicks: true,
@@ -137,20 +143,20 @@
             bottom: 18,
             start: 0,
             end: 100,
-            handleSize: '100%',
-            fillerColor: '#94FA41',
-            borderColor: 'transparent',
-            backgroundColor: 'rgba(148, 250, 65, 0.2)',
+            handleSize: "100%",
+            fillerColor: "#94FA41",
+            borderColor: "transparent",
+            backgroundColor: "rgba(148, 250, 65, 0.2)",
             handleStyle: {
-              color: '#94FA41',
+              color: "#94FA41",
             },
             moveHandleSize: 0,
             textStyle: {
-              color: '#fff',
+              color: "#fff",
             },
           },
           {
-            type: 'inside',
+            type: "inside",
             show: true,
             height: 15,
             start: 1,
@@ -159,11 +165,11 @@
         ],
         series: [
           {
-            name: '数量',
-            type: 'pictorialBar',
+            name: "数量",
+            type: "pictorialBar",
             symbolSize: [barWidth, 10],
             symbolOffset: [0, -6],
-            symbolPosition: 'end',
+            symbolPosition: "end",
             z: 12,
             itemStyle: {
               normal: {
@@ -174,62 +180,62 @@
             },
             data: props.data.yAxis,
           },
+          // {
+          //   name: "",
+          //   type: "pictorialBar",
+          //   symbolSize: [barWidth + 10, 15],
+          //   symbolOffset: [0, 8],
+          //   z: 10,
+          //   itemStyle: {
+          //     normal: {
+          //       color: "transparent",
+          //       borderColor: barTopColor,
+          //       borderType: "solid",
+          //       borderWidth: 10,
+          //     },
+          //   },
+          //   data: props.data.yAxis,
+          // },
+          // {
+          //   name: '',
+          //   type: 'pictorialBar',
+          //   symbolSize: [barWidth + 20, 20],
+          //   symbolOffset: [0, 12],
+          //   z: 12,
+          //   itemStyle: {
+          //     normal: {
+          //       color: 'transparent',
+          //       borderColor: barTopColor,
+          //       borderType: 'solid',
+          //       borderWidth: 10,
+          //     },
+          //   },
+          //   data: props.data.yAxis,
+          //   stack: 'check',
+          // },
+          // {
+          //   name: "",
+          //   type: "pictorialBar",
+          //   symbolSize: [barWidth + 25, 20],
+          //   symbolOffset: [0, 12],
+          //   z: 12,
+          //   itemStyle: {
+          //     normal: {
+          //       color: "transparent",
+          //       borderColor: "#3ACDC5",
+          //       borderType: "solid",
+          //       borderWidth: 10,
+          //     },
+          //   },
+          //   data: props.data.yAxis,
+          //   stack: "check",
+          // },
           {
-            name: '',
-            type: 'pictorialBar',
-            symbolSize: [barWidth + 10, 15],
-            symbolOffset: [0, 8],
-            z: 10,
-            itemStyle: {
-              normal: {
-                color: 'transparent',
-                borderColor: barTopColor,
-                borderType: 'solid',
-                borderWidth: 10,
-              },
-            },
-            data: props.data.yAxis,
-          },
-          {
-            name: '',
-            type: 'pictorialBar',
-            symbolSize: [barWidth + 20, 20],
-            symbolOffset: [0, 12],
-            z: 12,
-            itemStyle: {
-              normal: {
-                color: 'transparent',
-                borderColor: barTopColor,
-                borderType: 'solid',
-                borderWidth: 10,
-              },
-            },
-            data: props.data.yAxis,
-            stack: 'check',
-          },
-          {
-            name: '',
-            type: 'pictorialBar',
-            symbolSize: [barWidth + 25, 20],
-            symbolOffset: [0, 12],
-            z: 12,
-            itemStyle: {
-              normal: {
-                color: 'transparent',
-                borderColor: '#3ACDC5',
-                borderType: 'solid',
-                borderWidth: 10,
-              },
-            },
-            data: props.data.yAxis,
-            stack: 'check',
-          },
-          {
-            name: '',
-            type: 'bar',
+            name: "",
+            type: "bar",
             barWidth: barWidth,
-            barGap: '10%', // Make series be overlap
-            barCateGoryGap: '10%',
+            barGap: "10%", // Make series be overlap
+            barCateGoryGap: "10%",
             itemStyle: {
               normal: {
                 color: function (params) {
@@ -264,7 +270,7 @@
     watch(
       () => props.refresh,
       () => {
-        console.log(props, 'propspropsprops');
+        console.log(props, "propspropsprops");
         if (allData.chartDom) {
           allData.chartDom.dispose();
           allData.chartDom = null;
@@ -276,7 +282,7 @@
     );
     onMounted(() => {
       init();
-      window.addEventListener('resize', resizeTheChart);
+      window.addEventListener("resize", resizeTheChart);
     });
     return {
       ...toRefs(allData),
diff --git a/src/views/oneMap/LayerControl/LayerControl.vue b/src/views/oneMap/LayerControl/LayerControl.vue
index 43fc007..2bdf6b8 100644
--- a/src/views/oneMap/LayerControl/LayerControl.vue
+++ b/src/views/oneMap/LayerControl/LayerControl.vue
@@ -1,6 +1,10 @@
 <template>
   <Transition name="slideTC">
-    <div class="LayerControl" v-show="ShowTuCheng">
+    <div
+      class="LayerControl"
+      v-show="ShowTuCheng"
+      :class="[showPanel ? 'TuChengImgTrue' : 'TuChengImgFalse']"
+    >
       <div class="GroupBox" v-for="item in AllData.LayerData" v-show="item.children">
         <div class="GroupName" @click="item.Show = !item.Show">{{ item.title }}</div>
         <!-- <Transition name="Group"> -->
@@ -30,30 +34,30 @@
 </template>
 
 <script setup name="LayerControl">
-import { ref, reactive, toRefs, onMounted } from 'vue';
+import { ref, reactive, toRefs, onMounted } from "vue";
 // 图层控制icon引入
-import { requireTuChengImg } from '@/utils/util';
-import yanAnPaiShuiArea from '@/assets/yanAnPaiShuiArea.json';
-import yanAnRoad from '@/assets/yanAnRoad.json';
-import yanAnWater from '@/assets/yanAnWater.json';
-import yanAnWSCLC from '@/assets/yanAnWSCLC.json';
-import yanAnCenterCity from '@/assets/yanAnCenterCity.json';
-import yanAnYSBZ from '@/assets/yanAnYSBZ.json';
-import yanAnYiLao from '@/assets/yanAnYiLao.json';
-import yanAnFengXian from '@/assets/yanAnFengXian.json';
-import yanAnPipeSupervise from '@/assets/yanAnPipeSupervise.json';
-import yanAnPKSupervise from '@/assets/yanAnPKSupervise.json';
-import yanAnNature from '@/assets/yanAnNature.json';
-import yanAnVideo from '@/assets/yanAnVideo.json';
-import yanAnMountain from '@/assets/yanAnMountain.json';
-import yanAnSmallWater from '@/assets/yanAnSmallWater.json';
-import yanAnRainArea from '@/assets/yanAnRainArea.json';
-import heDiJiaGu from '@/assets/heDiJiaGu.json';
-import heDiShuJun from '@/assets/heDiShuJun.json';
-import anXianGaiZao from '@/assets/anXianGaiZao.json';
-import bus from '@/bus';
-import axios from 'axios';
-import mapBoxVectorLayer from '@/utils/GISdocument/mapboxVectorLayer.js';
+import { requireTuChengImg } from "@/utils/util";
+import yanAnPaiShuiArea from "@/assets/yanAnPaiShuiArea.json";
+import yanAnRoad from "@/assets/yanAnRoad.json";
+import yanAnWater from "@/assets/yanAnWater.json";
+import yanAnWSCLC from "@/assets/yanAnWSCLC.json";
+import yanAnCenterCity from "@/assets/yanAnCenterCity.json";
+import yanAnYSBZ from "@/assets/yanAnYSBZ.json";
+import yanAnYiLao from "@/assets/yanAnYiLao.json";
+import yanAnFengXian from "@/assets/yanAnFengXian.json";
+import yanAnPipeSupervise from "@/assets/yanAnPipeSupervise.json";
+import yanAnPKSupervise from "@/assets/yanAnPKSupervise.json";
+import yanAnNature from "@/assets/yanAnNature.json";
+import yanAnVideo from "@/assets/yanAnVideo.json";
+import yanAnMountain from "@/assets/yanAnMountain.json";
+import yanAnSmallWater from "@/assets/yanAnSmallWater.json";
+import yanAnRainArea from "@/assets/yanAnRainArea.json";
+import heDiJiaGu from "@/assets/heDiJiaGu.json";
+import heDiShuJun from "@/assets/heDiShuJun.json";
+import anXianGaiZao from "@/assets/anXianGaiZao.json";
+import bus from "@/bus";
+import axios from "axios";
+import mapBoxVectorLayer from "@/utils/GISdocument/mapboxVectorLayer.js";
 const AllData = reactive({
   // 图层控制面板的渲染数据
   /**图层面板数据字段说明
@@ -66,216 +70,216 @@
    */
   LayerData: [
     {
-      title: '基本信息',
+      title: "基本信息",
       Show: true,
       children: [
         {
-          layerName: '蓝色地图',
-          layerKey: 'blackMap',
-          layerIcon: requireTuChengImg('zhongxinchengqu'),
+          layerName: "蓝色地图",
+          layerKey: "blackMap",
+          layerIcon: requireTuChengImg("zhongxinchengqu"),
           layerVisible: false,
         },
         {
-          layerName: '白色地图',
-          layerKey: 'whiteMap',
-          layerIcon: requireTuChengImg('zhongxinchengqu'),
+          layerName: "白色地图",
+          layerKey: "whiteMap",
+          layerIcon: requireTuChengImg("zhongxinchengqu"),
           layerVisible: false,
         },
         {
-          layerName: '影像地图',
-          layerKey: 'imageMap',
-          layerIcon: requireTuChengImg('zhongxinchengqu'),
+          layerName: "影像地图",
+          layerKey: "imageMap",
+          layerIcon: requireTuChengImg("zhongxinchengqu"),
           layerVisible: false,
         },
         {
-          layerName: '中心城区',
-          layerKey: 'centerCity',
-          layerIcon: requireTuChengImg('zhongxinchengqu'),
+          layerName: "中心城区",
+          layerKey: "centerCity",
+          layerIcon: requireTuChengImg("zhongxinchengqu"),
           layerVisible: false,
           dynamicLineData: yanAnCenterCity,
         },
         {
-          layerName: '三维建筑',
-          layerKey: 'buildingLayer',
-          layerIcon: '',
+          layerName: "三维建筑",
+          layerKey: "buildingLayer",
+          layerIcon: "",
           layerVisible: true,
         },
         {
-          layerName: '路网',
-          layerKey: 'road',
-          layerIcon: '',
+          layerName: "路网",
+          layerKey: "road",
+          layerIcon: "",
           layerVisible: true,
           dynamicLineData: yanAnRoad,
         },
         {
-          layerName: '河流水系',
-          layerKey: 'waterLake',
-          layerIcon: '',
+          layerName: "河流水系",
+          layerKey: "waterLake",
+          layerIcon: "",
           layerVisible: true,
           dynamicLineData: yanAnWater,
         },
         {
-          layerName: '防洪河道',
-          layerKey: 'fangHongWater',
-          layerIcon: '',
+          layerName: "防洪河道",
+          layerKey: "fangHongWater",
+          layerIcon: "",
           layerVisible: false,
           lineWithLabel: yanAnSmallWater,
         },
         {
-          layerName: '河堤疏浚',
-          layerKey: 'heDiShuJun',
-          layerIcon: '',
+          layerName: "河堤疏浚",
+          layerKey: "heDiShuJun",
+          layerIcon: "",
           layerVisible: false,
           lineWithLabel: heDiShuJun,
         },
         {
-          layerName: '河堤加固',
-          layerKey: 'heDiJiaGu',
-          layerIcon: '',
+          layerName: "河堤加固",
+          layerKey: "heDiJiaGu",
+          layerIcon: "",
           layerVisible: false,
           lineWithLabel: heDiJiaGu,
         },
         {
-          layerName: '岸线改造',
-          layerKey: 'anXianGaiZao',
-          layerIcon: '',
+          layerName: "岸线改造",
+          layerKey: "anXianGaiZao",
+          layerIcon: "",
           layerVisible: false,
           lineWithLabel: anXianGaiZao,
         },
         {
-          layerName: '河堤治理',
-          layerKey: 'heDiZhiLi',
-          layerIcon: '',
+          layerName: "河堤治理",
+          layerKey: "heDiZhiLi",
+          layerIcon: "",
           layerVisible: false,
           lineWithLabel: anXianGaiZao,
         },
         {
-          layerName: '空间格局',
-          layerKey: 'yanAnNature',
-          layerIcon: '',
+          layerName: "空间格局",
+          layerKey: "yanAnNature",
+          layerIcon: "",
           layerVisible: false,
           areaData: yanAnNature,
         },
         {
-          layerName: '山体修复',
-          layerKey: 'yanAnMountain',
-          layerIcon: '',
+          layerName: "山体修复",
+          layerKey: "yanAnMountain",
+          layerIcon: "",
           layerVisible: false,
           lineWithLabel: yanAnMountain,
         },
       ],
     },
     {
-      title: '燃气系统',
+      title: "燃气系统",
       Show: true,
       children: [
         {
-          layerName: '燃气管网',
-          layerKey: 'rq_all',
+          layerName: "燃气管网",
+          layerKey: "rq_all",
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: '干管',
-          layerKey: 'rq_SZLH',
+          layerName: "干管",
+          layerKey: "rq_SZLH",
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: '干管流向',
-          layerKey: 'sx_ya_smx_rq_line_sz',
+          layerName: "干管流向",
+          layerKey: "sx_ya_smx_rq_line_sz",
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: '主管',
-          layerKey: 'rq_TYLH',
+          layerName: "主管",
+          layerKey: "rq_TYLH",
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: '主管流向',
-          layerKey: 'sx_ya_smx_rq_line_zg',
+          layerName: "主管流向",
+          layerKey: "sx_ya_smx_rq_line_zg",
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: '支管',
-          layerKey: 'rq_LGLH',
+          layerName: "支管",
+          layerKey: "rq_LGLH",
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: '支管流向',
-          layerKey: 'sx_ya_smx_rq_line_zhig',
+          layerName: "支管流向",
+          layerKey: "sx_ya_smx_rq_line_zhig",
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: '其他管网',
-          layerKey: 'rq_other',
+          layerName: "其他管网",
+          layerKey: "rq_other",
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: '调压器',
-          layerKey: 'tiaoYaQi',
+          layerName: "调压器",
+          layerKey: "tiaoYaQi",
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: '节点',
-          layerKey: 'rq_jieDian',
+          layerName: "节点",
+          layerKey: "rq_jieDian",
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: '极性保护',
-          layerKey: 'jiXingBaoHu',
+          layerName: "极性保护",
+          layerKey: "jiXingBaoHu",
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: '流量计',
-          layerKey: 'rq_liuLiangJi',
+          layerName: "流量计",
+          layerKey: "rq_liuLiangJi",
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: '未知设备',
-          layerKey: 'rq_unknow',
+          layerName: "未知设备",
+          layerKey: "rq_unknow",
           layerIcon: null,
           layerVisible: false,
         },
       ],
     },
     {
-      title: '雨水系统',
+      title: "雨水系统",
       Show: true,
       children: [
         {
-          layerName: '雨水分区',
-          layerKey: 'rainArea',
+          layerName: "雨水分区",
+          layerKey: "rainArea",
           layerIcon: null,
           layerVisible: false,
           areaData: yanAnRainArea,
         },
         {
-          layerName: '排水分区',
-          layerKey: 'paishuiArea',
+          layerName: "排水分区",
+          layerKey: "paishuiArea",
           layerIcon: null,
           layerVisible: false,
           areaData: yanAnPaiShuiArea,
         },
         {
-          layerName: '雨水管网',
-          layerKey: 'ysLine1',
+          layerName: "雨水管网",
+          layerKey: "ysLine1",
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: '雨水管网流向',
-          layerKey: 'pipeline_info_flow_ys',
+          layerName: "雨水管网流向",
+          layerKey: "pipeline_info_flow_ys",
           layerIcon: null,
           layerVisible: false,
         },
@@ -286,8 +290,8 @@
         //   layerVisible: false,
         // },
         {
-          layerName: '雨水泵站',
-          layerKey: 'YSBZ',
+          layerName: "雨水泵站",
+          layerKey: "YSBZ",
           layerIcon: null,
           layerVisible: false,
           data: yanAnYSBZ,
@@ -295,24 +299,24 @@
       ],
     },
     {
-      title: '污水系统',
+      title: "污水系统",
       Show: true,
       children: [
         {
-          layerName: '污水分区',
-          layerKey: 'sewageArea',
+          layerName: "污水分区",
+          layerKey: "sewageArea",
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: '污水管网',
-          layerKey: 'wsLine1',
+          layerName: "污水管网",
+          layerKey: "wsLine1",
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: '污水管网流向',
-          layerKey: 'pipeline_info_flow_ws1',
+          layerName: "污水管网流向",
+          layerKey: "pipeline_info_flow_ws1",
           layerIcon: null,
           layerVisible: false,
         },
@@ -329,8 +333,8 @@
         //   layerVisible: false,
         // },
         {
-          layerName: '污水处理厂',
-          layerKey: 'WSCLC',
+          layerName: "污水处理厂",
+          layerKey: "WSCLC",
           layerIcon: null,
           layerVisible: false,
           data: yanAnWSCLC,
@@ -338,40 +342,40 @@
       ],
     },
     {
-      title: '感知设备',
+      title: "感知设备",
       Show: true,
       children: [
         {
-          layerName: '内涝易涝点',
-          layerKey: 'yiLaoPoint',
+          layerName: "内涝易涝点",
+          layerKey: "yiLaoPoint",
           layerIcon: null,
           layerVisible: false,
           data: yanAnYiLao,
         },
         {
-          layerName: '内涝风险点',
-          layerKey: 'fengXianPoint',
+          layerName: "内涝风险点",
+          layerKey: "fengXianPoint",
           layerIcon: null,
           layerVisible: false,
           data: yanAnFengXian,
         },
         {
-          layerName: '排水管网监测',
-          layerKey: 'pipeSupervise',
+          layerName: "排水管网监测",
+          layerKey: "pipeSupervise",
           layerIcon: null,
           layerVisible: false,
           data: yanAnPipeSupervise,
         },
         {
-          layerName: '排水排口监测',
-          layerKey: 'PKsupervise',
+          layerName: "排水排口监测",
+          layerKey: "PKsupervise",
           layerIcon: null,
           layerVisible: false,
           data: yanAnPKSupervise,
         },
         {
-          layerName: '视频监测',
-          layerKey: 'video',
+          layerName: "视频监测",
+          layerKey: "video",
           layerIcon: null,
           layerVisible: false,
           data: yanAnVideo,
@@ -386,98 +390,111 @@
     .concat(AllData.LayerData[2].children)
     .concat(AllData.LayerData[3].children)
     .concat(AllData.LayerData[4].children);
-  initeLegend.forEach(element => {
+  initeLegend.forEach((element) => {
     element.layername = element.layerKey;
   });
-  bus.emit('setLegendData', initeLegend);
+  bus.emit("setLegendData", initeLegend);
 });
 const props = defineProps({
   ShowTuCheng: false,
+  showPanel: false,
 });
 
 watch(
   () => props.ShowTuCheng,
   (newValue, oldValue) => {
-    console.log('ShowTuCheng变化了', newValue, oldValue);
+    console.log("ShowTuCheng变化了", newValue, oldValue);
   },
   { immediate: true, deep: true }
 );
 
-const layerClick = async item2 => {
+const layerClick = async (item2) => {
   item2.layerVisible = !item2.layerVisible;
   item2.isCheck = item2.layerVisible;
-  console.info(`点击了名称为${item2.layerName},图层ID为${item2.layerKey}的图层,点击后的图层展示情况为${item2.layerVisible}`);
-  bus.emit('setLayerVisible', { layername: item2.layerKey, isCheck: item2.isCheck });
-  if (item2.layerKey == 'whiteMap') {
-    AllData.LayerData[0]['children'][0].layerVisible = false;
-    AllData.LayerData[0]['children'][2].layerVisible = false;
-    let { data } = await axios.get('/static/libs/mapbox/style/customs/whiteMapStyle.json');
+  console.info(
+    `点击了名称为${item2.layerName},图层ID为${item2.layerKey}的图层,点击后的图层展示情况为${item2.layerVisible}`
+  );
+  bus.emit("setLayerVisible", { layername: item2.layerKey, isCheck: item2.isCheck });
+  if (item2.layerKey == "whiteMap") {
+    AllData.LayerData[0]["children"][0].layerVisible = false;
+    AllData.LayerData[0]["children"][2].layerVisible = false;
+    let { data } = await axios.get(
+      "/static/libs/mapbox/style/customs/whiteMapStyle.json"
+    );
     let newMapStyle;
     let oldMapStyle = newfiberMapbox.map.getStyle();
     let oldIds = [];
-    oldMapStyle.layers.forEach(layer => {
+    oldMapStyle.layers.forEach((layer) => {
       oldIds.push(layer.id);
     });
-    let newIds = data.layers.map(i => i.id);
-    oldIds.forEach(id => {
+    let newIds = data.layers.map((i) => i.id);
+    oldIds.forEach((id) => {
       let layer = data.layers[newIds.indexOf(id)];
       if (!layer) return;
-      Object.keys(layer.layout || {}).forEach(key => newfiberMapbox.map.setLayoutProperty(id, key, layer.layout[key]));
-      Object.keys(layer.paint || {}).forEach(key => newfiberMapbox.map.setPaintProperty(id, key, layer.paint[key]));
+      Object.keys(layer.layout || {}).forEach((key) =>
+        newfiberMapbox.map.setLayoutProperty(id, key, layer.layout[key])
+      );
+      Object.keys(layer.paint || {}).forEach((key) =>
+        newfiberMapbox.map.setPaintProperty(id, key, layer.paint[key])
+      );
     });
-    newfiberMapbox.map.setLayoutProperty('newfiber-XYZLayer', 'visibility', 'none');
+    newfiberMapbox.map.setLayoutProperty("newfiber-XYZLayer", "visibility", "none");
   }
-  if (item2.layerKey == 'blackMap') {
-    AllData.LayerData[0]['children'][1].layerVisible = false;
-    AllData.LayerData[0]['children'][2].layerVisible = false;
-    let { data } = await axios.get('/static/libs/mapbox/style/customs/night-style.json');
+  if (item2.layerKey == "blackMap") {
+    AllData.LayerData[0]["children"][1].layerVisible = false;
+    AllData.LayerData[0]["children"][2].layerVisible = false;
+    let { data } = await axios.get("/static/libs/mapbox/style/customs/night-style.json");
     let newMapStyle;
     let oldMapStyle = newfiberMapbox.map.getStyle();
     let oldIds = [];
-    oldMapStyle.layers.forEach(layer => {
+    oldMapStyle.layers.forEach((layer) => {
       oldIds.push(layer.id);
     });
-    let newIds = data.layers.map(i => i.id);
-    oldIds.forEach(id => {
+    let newIds = data.layers.map((i) => i.id);
+    oldIds.forEach((id) => {
       let layer = data.layers[newIds.indexOf(id)];
       if (!layer) return;
-      Object.keys(layer.layout || {}).forEach(key => newfiberMapbox.map.setLayoutProperty(id, key, layer.layout[key]));
-      Object.keys(layer.paint || {}).forEach(key => newfiberMapbox.map.setPaintProperty(id, key, layer.paint[key]));
+      Object.keys(layer.layout || {}).forEach((key) =>
+        newfiberMapbox.map.setLayoutProperty(id, key, layer.layout[key])
+      );
+      Object.keys(layer.paint || {}).forEach((key) =>
+        newfiberMapbox.map.setPaintProperty(id, key, layer.paint[key])
+      );
     });
-    newfiberMapbox.map.setLayoutProperty('newfiber-XYZLayer', 'visibility', 'none');
+    newfiberMapbox.map.setLayoutProperty("newfiber-XYZLayer", "visibility", "none");
   }
-  if (item2.layerKey == 'imageMap') {
-    AllData.LayerData[0]['children'][0].layerVisible = false;
-    AllData.LayerData[0]['children'][1].layerVisible = false;
-    newfiberMapbox.map.setLayoutProperty('newfiber-XYZLayer', 'visibility', 'visible');
-    newfiberMapbox.map.moveLayer('newfiber-XYZLayer', 'buildingLayer');
+  if (item2.layerKey == "imageMap") {
+    AllData.LayerData[0]["children"][0].layerVisible = false;
+    AllData.LayerData[0]["children"][1].layerVisible = false;
+    newfiberMapbox.map.setLayoutProperty("newfiber-XYZLayer", "visibility", "visible");
+    newfiberMapbox.map.moveLayer("newfiber-XYZLayer", "buildingLayer");
   }
   if (item2.areaData) {
     if (item2.isCheck) {
       mapBoxVectorLayer.addGeojsonPolygonWithLabel(item2.layerKey, item2.areaData);
     } else {
-      mapBoxVectorLayer.removeByIds([item2.layerKey, item2.layerKey + '_label']);
+      mapBoxVectorLayer.removeByIds([item2.layerKey, item2.layerKey + "_label"]);
     }
   }
-  if (item2.layerKey == 'buildingLayer') {
+  if (item2.layerKey == "buildingLayer") {
     if (item2.isCheck) {
-      newfiberMapbox.map.setLayoutProperty('buildingLayer', 'visibility', 'visible');
+      newfiberMapbox.map.setLayoutProperty("buildingLayer", "visibility", "visible");
     } else {
-      newfiberMapbox.map.setLayoutProperty('buildingLayer', 'visibility', 'none');
+      newfiberMapbox.map.setLayoutProperty("buildingLayer", "visibility", "none");
     }
   }
   if (item2.lineWithLabel) {
     if (item2.isCheck) {
       mapBoxVectorLayer.addGeojsonLineWithLabel(item2.layerKey, item2.lineWithLabel);
-      if (item2.layerKey == 'fangHongWater') {
+      if (item2.layerKey == "fangHongWater") {
         let layer = new mapboxL7.LineLayer({
-          name: 'fangHongWater',
+          name: "fangHongWater",
         })
           .source(item2.lineWithLabel)
           .size(3)
-          .shape('line')
-          .texture('arrow')
-          .color('rgba(243, 26, 237,1)')
+          .shape("line")
+          .texture("arrow")
+          .color("rgba(243, 26, 237,1)")
           .animate({
             interval: 2, // 间隔
             duration: 3, // 持续时间，延时
@@ -488,29 +505,29 @@
             lineTexture: true, // 开启线的贴图功能
             iconStep: 200, // 设置贴图纹理的间距
             borderWidth: 0.4, // 默认文 0，最大有效值为 0.5
-            borderColor: '#fff', // 默认为 #ccc
+            borderColor: "#fff", // 默认为 #ccc
           });
         newfiberMapbox.addLayer(layer);
       }
     } else {
-      mapBoxVectorLayer.removeByIds([item2.layerKey, item2.layerKey + '_label']);
-      if (newfiberMapbox.getLayerByName('fangHongWater')) {
-        newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName('fangHongWater'));
+      mapBoxVectorLayer.removeByIds([item2.layerKey, item2.layerKey + "_label"]);
+      if (newfiberMapbox.getLayerByName("fangHongWater")) {
+        newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName("fangHongWater"));
       }
     }
   }
-  if (item2.layerKey == 'road') {
+  if (item2.layerKey == "road") {
     if (item2.isCheck) {
-      if (newfiberMapbox.getLayerByName('dynamicRoad')) {
-        newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName('dynamicRoad'));
+      if (newfiberMapbox.getLayerByName("dynamicRoad")) {
+        newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName("dynamicRoad"));
       }
       let layer = new mapboxL7.LineLayer({
-        name: 'dynamicRoad',
+        name: "dynamicRoad",
       })
         .source(item2.dynamicLineData)
         .size(1.3)
-        .shape('line')
-        .color('rgb(184, 184, 184)')
+        .shape("line")
+        .color("rgb(184, 184, 184)")
         .animate({
           interval: 1, // 间隔
           duration: 1.5, // 持续时间，延时
@@ -521,22 +538,22 @@
         });
       newfiberMapbox.addLayer(layer);
     } else {
-      newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName('dynamicRoad'));
+      newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName("dynamicRoad"));
     }
   }
-  if (item2.layerKey == 'waterLake') {
+  if (item2.layerKey == "waterLake") {
     if (item2.isCheck) {
-      if (newfiberMapbox.getLayerByName('waterLake')) {
-        newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName('waterLake'));
+      if (newfiberMapbox.getLayerByName("waterLake")) {
+        newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName("waterLake"));
       }
       let layer = new mapboxL7.LineLayer({
-        name: 'waterLake',
+        name: "waterLake",
       })
         .source(item2.dynamicLineData)
         .size(4)
-        .shape('line')
-        .texture('arrow')
-        .color('aqua')
+        .shape("line")
+        .texture("arrow")
+        .color("aqua")
         .animate({
           interval: 2, // 间隔
           duration: 3, // 持续时间，延时
@@ -547,29 +564,29 @@
           lineTexture: true, // 开启线的贴图功能
           iconStep: 200, // 设置贴图纹理的间距
           borderWidth: 0.4, // 默认文 0，最大有效值为 0.5
-          borderColor: '#fff', // 默认为 #ccc
+          borderColor: "#fff", // 默认为 #ccc
         });
       newfiberMapbox.addLayer(layer);
     } else {
-      newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName('waterLake'));
+      newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName("waterLake"));
     }
   }
-  if (item2.layerKey == 'centerCity') {
+  if (item2.layerKey == "centerCity") {
     if (item2.isCheck) {
-      mapBoxVectorLayer.addGeojsonLine('centerCity', item2.dynamicLineData, 4, 1, 0.5);
+      mapBoxVectorLayer.addGeojsonLine("centerCity", item2.dynamicLineData, 4, 1, 0.5);
     } else {
-      mapBoxVectorLayer.removeByIds(['centerCity']);
+      mapBoxVectorLayer.removeByIds(["centerCity"]);
     }
   }
 };
 onMounted(() => {
   // 清除所有的图层选中
-  bus.on('clearAllLayer', () => {
-    AllData.LayerData.forEach(data => {
-      data.children.map(item => {
+  bus.on("clearAllLayer", () => {
+    AllData.LayerData.forEach((data) => {
+      data.children.map((item) => {
         // item.layerVisible = true;
         // 做优化,全局为True,再执行隐藏工作,页面调用api太多了,这里应该只将展示的图层进行取消操作就行
-        item.layerVisible ? layerClick(item) : '';
+        item.layerVisible ? layerClick(item) : "";
       });
     });
   });
@@ -577,17 +594,17 @@
   /**控制图层的显示
    *@param LayerArraya:需要打开的图层名称,示例:["路网","中心城区"]
    */
-  bus.on('SetLayerShow', LayerArraya => {
-    AllData.LayerData.forEach(data => {
-      data.children.map(item => {
-        LayerArraya.includes(item.layerName) ? layerClick(item) : '';
+  bus.on("SetLayerShow", (LayerArraya) => {
+    AllData.LayerData.forEach((data) => {
+      data.children.map((item) => {
+        LayerArraya.includes(item.layerName) ? layerClick(item) : "";
       });
     });
   });
 });
 onBeforeUnmount(() => {
-  bus.off('clearAllLayer');
-  bus.off('SetLayerShow');
+  bus.off("clearAllLayer");
+  bus.off("SetLayerShow");
 });
 </script>
 
@@ -598,7 +615,7 @@
   position: absolute;
   top: 150px;
   right: 476px;
-  background: url('@/assets/images/Sponge_screen/TuChengBG.png') no-repeat center;
+  background: url("@/assets/images/Sponge_screen/TuChengBG.png") no-repeat center;
   background-size: contain;
   box-sizing: border-box;
   padding: 25px 0px;
@@ -614,7 +631,7 @@
       width: 190px;
       height: 25px;
       line-height: 25px;
-      background-image: url('@/assets/images/Sponge_screen/TuChengFenZuBG.png'),
+      background-image: url("@/assets/images/Sponge_screen/TuChengFenZuBG.png"),
         linear-gradient(to right, #1c899600, #1c8996, #1c899600);
       background-repeat: no-repeat;
       background-position: center;
@@ -672,6 +689,14 @@
     }
   }
 }
+.TuChengImgTrue {
+  transform: translateX(460px);
+  transition: all 1s ease;
+}
+.TuChengImgFalse {
+  transform: translateX(0px);
+  transition: all 1s ease;
+}
 // 动画
 /*
   进入和离开动画可以使用不同
diff --git a/src/views/oneMap/OverallOverview/LeftBox.vue b/src/views/oneMap/OverallOverview/LeftBox.vue
index e26dce0..70aad73 100644
--- a/src/views/oneMap/OverallOverview/LeftBox.vue
+++ b/src/views/oneMap/OverallOverview/LeftBox.vue
@@ -90,7 +90,13 @@
         <span class="tableHeaderList tableList4">监测时间</span>
         <span class="tableHeaderList tableList5">状态</span>
       </div>
-      <Vue3SeamlessScroll :list="FXJCData" :singleHeight="60" :singleWaitTime="1500" :hover="true" class="tableBody">
+      <Vue3SeamlessScroll
+        :list="FXJCData"
+        :singleHeight="60"
+        :singleWaitTime="1500"
+        :hover="true"
+        class="tableBody"
+      >
         <div class="tableBodyList" v-for="item in FXJCData">
           <span class="tableBodyList_span1" :title="item.name">{{ item.name }}</span>
           <span class="tableBodyList_span2" :title="item.jcdx">{{ item.jcdx }} </span>
@@ -130,75 +136,75 @@
 ]);
 const FXJCData = ref([
   {
-    name: '延安中学',
-    jcdx: '燃气管网',
-    jczb: '甲烷浓度4.4%VOL',
-    jcsj: '2024/10/23 11:54',
-    zk: '正常',
+    name: "延安中学",
+    jcdx: "燃气管网",
+    jczb: "甲烷浓度4.4%VOL",
+    jcsj: "2024/10/23 11:54",
+    zk: "正常",
   },
   {
-    name: '延安大学附属医院',
-    jcdx: '燃气管网',
-    jczb: '甲烷浓度4%VOL',
-    jcsj: '2024/10/23 12:14',
-    zk: '正常',
+    name: "延安大学附属医院",
+    jcdx: "燃气管网",
+    jczb: "甲烷浓度4%VOL",
+    jcsj: "2024/10/23 12:14",
+    zk: "正常",
   },
   {
-    name: '王家坪大桥',
-    jcdx: '桥梁结构',
-    jczb: '倾角+1°',
-    jcsj: '2024/10/23 12:24',
-    zk: '正常',
+    name: "王家坪大桥",
+    jcdx: "桥梁结构",
+    jczb: "倾角+1°",
+    jcsj: "2024/10/23 12:24",
+    zk: "正常",
   },
   {
-    name: '王家坪大桥',
-    jcdx: '桥梁结构',
-    jczb: '位移12mm',
-    jcsj: '2024/10/23 13:13',
-    zk: '正常',
+    name: "王家坪大桥",
+    jcdx: "桥梁结构",
+    jczb: "位移12mm",
+    jcsj: "2024/10/23 13:13",
+    zk: "正常",
   },
   {
-    name: '王家坪大桥',
-    jcdx: '桥梁外部荷载',
-    jczb: '均布荷载6.4kn/m',
-    jcsj: '2024/10/23 13:43',
-    zk: '正常',
+    name: "王家坪大桥",
+    jcdx: "桥梁外部荷载",
+    jczb: "均布荷载6.4kn/m",
+    jcsj: "2024/10/23 13:43",
+    zk: "正常",
   },
   {
-    name: '王家坪大桥',
-    jcdx: '桥梁气象环境',
-    jczb: '风速3.2m/s',
-    jcsj: '2024/10/23 14:03',
-    zk: '正常',
+    name: "王家坪大桥",
+    jcdx: "桥梁气象环境",
+    jczb: "风速3.2m/s",
+    jcsj: "2024/10/23 14:03",
+    zk: "正常",
   },
   {
-    name: '杨家岭隧道',
-    jcdx: '隧道结构',
-    jczb: '裂缝宽度0.12mm',
-    jcsj: '2024/10/23 14:05',
-    zk: '正常',
+    name: "杨家岭隧道",
+    jcdx: "隧道结构",
+    jczb: "裂缝宽度0.12mm",
+    jcsj: "2024/10/23 14:05",
+    zk: "正常",
   },
   {
-    name: '杨家岭隧道',
-    jcdx: '隧道结构',
-    jczb: '静应变+10με',
-    jcsj: '2024/10/23 14:25',
-    zk: '正常',
+    name: "杨家岭隧道",
+    jcdx: "隧道结构",
+    jczb: "静应变+10με",
+    jcsj: "2024/10/23 14:25",
+    zk: "正常",
   },
 
   {
-    name: '王家坪旧址门口',
-    jcdx: '积水液位',
-    jczb: '水深0m',
-    jcsj: '2024/10/23 15:21',
-    zk: '正常',
+    name: "王家坪旧址门口",
+    jcdx: "积水液位",
+    jczb: "水深0m",
+    jcsj: "2024/10/23 15:21",
+    zk: "正常",
   },
   {
-    name: '大砭沟与北大街交叉口',
-    jcdx: '积水液位',
-    jczb: '水深0m',
-    jcsj: '2024/10/23 15:25',
-    zk: '正常',
+    name: "大砭沟与北大街交叉口",
+    jcdx: "积水液位",
+    jczb: "水深0m",
+    jcsj: "2024/10/23 15:25",
+    zk: "正常",
   },
 ]);
 const yxjcname = ref("7天");
@@ -327,6 +333,7 @@
         text-align: center;
         margin-top: 5px;
         margin-left: 10px;
+        font-size: 16px;
       }
       .activedright {
         border: 1px solid #2cfce9;
@@ -387,7 +394,7 @@
             .gw {
               font-family: Source Han Sans CN;
               font-weight: bold;
-              font-size: 14px;
+              font-size: 16px;
               color: #85d2d4;
               padding-left: 5px;
               // background: yellow;
@@ -404,10 +411,10 @@
             }
             .gl {
               font-family: Source Han Sans CN;
-              font-weight: bold;
-              font-size: 14px;
-              color: #34909f;
               padding-left: 10px;
+              font-weight: bold;
+              font-size: 16px;
+              color: #85d2d4;
             }
           }
         }
@@ -462,7 +469,7 @@
         .head-right {
           margin-top: 2px;
           cursor: pointer;
-          font-size: 14px;
+          font-size: 16px;
           color: #ffffff;
           display: flex;
           line-height: 18px;
diff --git a/src/views/oneMap/OverallOverview/RightBox.vue b/src/views/oneMap/OverallOverview/RightBox.vue
index 0a70630..f9477ed 100644
--- a/src/views/oneMap/OverallOverview/RightBox.vue
+++ b/src/views/oneMap/OverallOverview/RightBox.vue
@@ -67,7 +67,7 @@
                 font-family: Source Han Sans CN;
                 font-weight: bold;
                 font-size: 13px;
-                color: #34909f;
+                color: #12f9ff;
               "
             >
               {{ item.dw }}
diff --git a/src/views/oneMap/SmartDrainage/PsLeftBox.vue b/src/views/oneMap/SmartDrainage/PsLeftBox.vue
index c06a241..fd6283a 100644
--- a/src/views/oneMap/SmartDrainage/PsLeftBox.vue
+++ b/src/views/oneMap/SmartDrainage/PsLeftBox.vue
@@ -21,7 +21,14 @@
             <div class="upperNum">
               <div
                 class="oflower"
-                :style="{ color: item.name == '易涝点' ? '#a2fff8FF' : item.name == '风险点' ? '#faecabFF' : '#92edbfFF' }"
+                :style="{
+                  color:
+                    item.name == '易涝点'
+                      ? '#a2fff8FF'
+                      : item.name == '风险点'
+                      ? '#faecabFF'
+                      : '#92edbfFF',
+                }"
               >
                 {{ item.num }}
               </div>
@@ -41,7 +48,13 @@
           <span style="width: 45%; padding-left: 30px">{{ partName }}</span>
           <span style="width: 45%; padding-left: 130px">位置</span>
         </div>
-        <Vue3SeamlessScroll :list="dataList" :singleHeight="36" :singleWaitTime="1500" :hover="true" class="scrollCont">
+        <Vue3SeamlessScroll
+          :list="dataList"
+          :singleHeight="36"
+          :singleWaitTime="1500"
+          :hover="true"
+          class="scrollCont"
+        >
           <div class="scrollCont">
             <li
               v-for="(item, index) in dataList"
@@ -98,40 +111,40 @@
   </div>
 </template>
 <script setup>
-import { ref, reactive, toRefs, onMounted, onBeforeUnmount } from 'vue';
-import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
-import mapbox from '@/views/oneMap/map/mapboxInTable.vue';
-import fxd from '@/assets/images/zhps/fxd.png'; //风险点
-import qxgw from '@/assets/images/zhps/qxgw.png'; //缺陷管网
-import yld from '@/assets/images/zhps/yld.png'; //易涝点
+import { ref, reactive, toRefs, onMounted, onBeforeUnmount } from "vue";
+import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
+import mapbox from "@/views/oneMap/map/mapboxInTable.vue";
+import fxd from "@/assets/images/zhps/fxd.png"; //风险点
+import qxgw from "@/assets/images/zhps/qxgw.png"; //缺陷管网
+import yld from "@/assets/images/zhps/yld.png"; //易涝点
 
-import qzfk_3d from './qzfk_3d.vue'; //
-import ChartRy from './chartRy.vue';
-import bus from '@/bus';
+import qzfk_3d from "./qzfk_3d.vue"; //
+import ChartRy from "./chartRy.vue";
+import bus from "@/bus";
 const AllData = reactive({});
 const ryData = ref({});
-const ryRefresh = ref('');
+const ryRefresh = ref("");
 const tableData = ref([
-  { name: '易涝点', num: '7', Imgurl: yld, dw: '处' },
-  { name: '风险点', num: '9', Imgurl: fxd, dw: '处' },
-  { name: '缺陷管网', num: '6.1', Imgurl: qxgw, dw: 'km' },
+  { name: "易涝点", num: "7", Imgurl: yld, dw: "处" },
+  { name: "风险点", num: "9", Imgurl: fxd, dw: "处" },
+  { name: "缺陷管网", num: "6.1", Imgurl: qxgw, dw: "km" },
 ]);
 const showRainList = ref([]);
-const Pointname = ref('');
+const Pointname = ref("");
 const dataList = ref([
-  { num: '1', yls: '永安路', wz: '百米大道永安路' },
-  { num: '2', yls: '永昌路北口', wz: '双拥大道永昌路' },
-  { num: '3', yls: '桥儿沟隧道', wz: '双拥大道桥儿沟' },
-  { num: '4', yls: '原水果市场', wz: '双拥大道东十里铺' },
-  { num: '5', yls: '王家坪旧址门口', wz: '圣地路' },
-  { num: '6', yls: '桥儿沟隧道', wz: '双拥大道桥儿沟' },
-  { num: '7', yls: '原水果市场', wz: '双拥大道东十里铺' },
+  { num: "1", yls: "永安路", wz: "百米大道永安路" },
+  { num: "2", yls: "永昌路北口", wz: "双拥大道永昌路" },
+  { num: "3", yls: "桥儿沟隧道", wz: "双拥大道桥儿沟" },
+  { num: "4", yls: "原水果市场", wz: "双拥大道东十里铺" },
+  { num: "5", yls: "王家坪旧址门口", wz: "圣地路" },
+  { num: "6", yls: "桥儿沟隧道", wz: "双拥大道桥儿沟" },
+  { num: "7", yls: "原水果市场", wz: "双拥大道东十里铺" },
 ]);
 const images = [
-  'https://server1.wh-nf.cn:6082/tif/0819_8.tif',
-  'https://server1.wh-nf.cn:6082/tif/0819_9.tif',
-  'https://server1.wh-nf.cn:6082/tif/0819_10.tif',
-  'https://server1.wh-nf.cn:6082/tif/0819_11.tif',
+  "https://server1.wh-nf.cn:6082/tif/0819_8.tif",
+  "https://server1.wh-nf.cn:6082/tif/0819_9.tif",
+  "https://server1.wh-nf.cn:6082/tif/0819_10.tif",
+  "https://server1.wh-nf.cn:6082/tif/0819_11.tif",
 ];
 // 普查现状点击事件
 function Pointclick(val) {
@@ -139,99 +152,110 @@
 }
 
 const yearList = ref([
-  { name: '1小时', value: 1 },
-  { name: '3小时', value: 2 },
-  { name: '12小时', value: 3 },
-  { name: '24小时', value: 4 },
+  { name: "1小时", value: 1 },
+  { name: "3小时", value: 2 },
+  { name: "12小时", value: 3 },
+  { name: "24小时", value: 4 },
 ]);
-const activedname = ref('1小时');
+const activedname = ref("1小时");
 // 时间点击事件
 function yearclick(val, index) {
   activedname.value = val.name;
 
-  showRainList.value = index == 0 ? ranLeng[0] : index == 1 ? ranLeng[1] : index == 2 ? ranLeng[2] : ranLeng[3];
+  showRainList.value =
+    index == 0
+      ? ranLeng[0]
+      : index == 1
+      ? ranLeng[1]
+      : index == 2
+      ? ranLeng[2]
+      : ranLeng[3];
 
-  console.log('index', index);
+  console.log("index", index);
   initRainImage([images[index]]);
 }
 const timeActive = ref(0);
 const ranLeng = [
   [
-    { value: '0-0.2', color: 'rgba(7, 213, 118, 0)' },
-    { value: '0.2-5', color: 'rgb(38, 129, 240,1)' },
-    { value: '5-16', color: 'rgba(222,230,0,1)' },
-    { value: '16-25', color: 'rgba(255,184,15,1)' },
-    { value: '>25', color: 'rgb(255, 26, 26,1)' },
+    { value: "0-0.2", color: "rgba(7, 213, 118, 0)" },
+    { value: "0.2-5", color: "rgb(38, 129, 240,1)" },
+    { value: "5-16", color: "rgba(222,230,0,1)" },
+    { value: "16-25", color: "rgba(255,184,15,1)" },
+    { value: ">25", color: "rgb(255, 26, 26,1)" },
   ],
   [
-    { value: '0-5', color: 'rgba(7, 213, 118, 0)' },
-    { value: '5-15', color: 'rgba(7, 213, 118, 1)' },
-    { value: '15-30', color: 'rgba(38, 129, 240,1)' },
-    { value: '30-70', color: 'rgba(247, 223, 56, 1)' },
-    { value: '70-140', color: 'rgba(230, 85, 41, 1)' },
-    { value: '>140', color: 'rgba(255, 26, 26, 1)' },
+    { value: "0-5", color: "rgba(7, 213, 118, 0)" },
+    { value: "5-15", color: "rgba(7, 213, 118, 1)" },
+    { value: "15-30", color: "rgba(38, 129, 240,1)" },
+    { value: "30-70", color: "rgba(247, 223, 56, 1)" },
+    { value: "70-140", color: "rgba(230, 85, 41, 1)" },
+    { value: ">140", color: "rgba(255, 26, 26, 1)" },
   ],
   [
-    { value: '0-5', color: 'rgba(7, 213, 118, 0)' },
-    { value: '5-15', color: 'rgba(7, 213, 118, 1)' },
-    { value: '15-30', color: 'rgba(38, 129, 240,1)' },
-    { value: '30-70', color: 'rgba(247, 223, 56, 1)' },
-    { value: '70-140', color: 'rgba(230, 85, 41, 1)' },
-    { value: '>140', color: 'rgba(255, 26, 26, 1)' },
+    { value: "0-5", color: "rgba(7, 213, 118, 0)" },
+    { value: "5-15", color: "rgba(7, 213, 118, 1)" },
+    { value: "15-30", color: "rgba(38, 129, 240,1)" },
+    { value: "30-70", color: "rgba(247, 223, 56, 1)" },
+    { value: "70-140", color: "rgba(230, 85, 41, 1)" },
+    { value: ">140", color: "rgba(255, 26, 26, 1)" },
   ],
   [
-    { value: '0-10', color: 'rgba(7, 213, 118, 0)' },
-    { value: '10-25', color: 'rgba(7, 213, 118, 1)' },
-    { value: '25-50', color: 'rgba(38, 129, 240,1)' },
-    { value: '50-100', color: 'rgba(247, 223, 56, 1)' },
-    { value: '100-250', color: 'rgba(230, 85, 41, 1)' },
-    { value: '>250', color: 'rgba(255, 26, 26, 1)' },
+    { value: "0-10", color: "rgba(7, 213, 118, 0)" },
+    { value: "10-25", color: "rgba(7, 213, 118, 1)" },
+    { value: "25-50", color: "rgba(38, 129, 240,1)" },
+    { value: "50-100", color: "rgba(247, 223, 56, 1)" },
+    { value: "100-250", color: "rgba(230, 85, 41, 1)" },
+    { value: ">250", color: "rgba(255, 26, 26, 1)" },
   ],
 ];
 
-const partName = ref('易涝点');
+const partName = ref("易涝点");
 // 普查切换
 function partClick(val) {
   partName.value = val.name;
-  if (partName.value == '风险点') {
-    bus.emit('setLayerVisible', { layername: 'fengXianPoint', isCheck: true });
-    bus.emit('setLayerVisible', { layername: 'yiLaoPoint', isCheck: false });
+  if (partName.value == "风险点") {
+    bus.emit("setLayerVisible", { layername: "fengXianPoint", isCheck: true });
+    bus.emit("setLayerVisible", { layername: "yiLaoPoint", isCheck: false });
     newfiberMapbox.map.easeTo({
       center: [109.488, 36.596],
       zoom: 13,
     });
     dataList.value = [
-      { num: '1', yls: '长青路石油小', wz: '石油小区后门' },
-      { num: '2', yls: '长青路纺织花园车', wz: '太阳鸟健身房' },
-      { num: '3', yls: '凯泽世纪花园', wz: '凯泽世纪花园' },
-      { num: '4', yls: '七里铺街 ', wz: '勘探公司' },
-      { num: '5', yls: '南关街大礼堂', wz: '大礼堂' },
-      { num: '6', yls: '柳林隧道博城向柳林方向引桥入口', wz: '柳林隧道博城向柳林方向引桥入口' },
-      { num: '7', yls: '杨家湾超市门前', wz: '杨家湾路延大萃园校园公寓对面' },
-      { num: '8', yls: '马家湾博城至培植中学', wz: '博城至培植中学门前' },
-      { num: '9', yls: '百米大道延安小学十字', wz: '百米大道延安小学十字' },
+      { num: "1", yls: "长青路石油小", wz: "石油小区后门" },
+      { num: "2", yls: "长青路纺织花园车", wz: "太阳鸟健身房" },
+      { num: "3", yls: "凯泽世纪花园", wz: "凯泽世纪花园" },
+      { num: "4", yls: "七里铺街 ", wz: "勘探公司" },
+      { num: "5", yls: "南关街大礼堂", wz: "大礼堂" },
+      {
+        num: "6",
+        yls: "柳林隧道博城向柳林方向引桥入口",
+        wz: "柳林隧道博城向柳林方向引桥入口",
+      },
+      { num: "7", yls: "杨家湾超市门前", wz: "杨家湾路延大萃园校园公寓对面" },
+      { num: "8", yls: "马家湾博城至培植中学", wz: "博城至培植中学门前" },
+      { num: "9", yls: "百米大道延安小学十字", wz: "百米大道延安小学十字" },
     ];
-  } else if (partName.value == '易涝点') {
-    bus.emit('setLayerVisible', { layername: 'fengXianPoint', isCheck: false });
-    bus.emit('setLayerVisible', { layername: 'yiLaoPoint', isCheck: true });
+  } else if (partName.value == "易涝点") {
+    bus.emit("setLayerVisible", { layername: "fengXianPoint", isCheck: false });
+    bus.emit("setLayerVisible", { layername: "yiLaoPoint", isCheck: true });
     newfiberMapbox.map.easeTo({
       center: [109.488, 36.596],
       zoom: 13,
     });
     dataList.value = [
-      { num: '1', yls: '永安路', wz: '百米大道永安路' },
-      { num: '2', yls: '永昌路北口', wz: '双拥大道永昌路' },
-      { num: '3', yls: '桥儿沟隧道', wz: '双拥大道桥儿沟' },
-      { num: '4', yls: '原水果市场', wz: '双拥大道东十里铺' },
-      { num: '5', yls: '王家坪旧址门口', wz: '圣地路' },
-      { num: '6', yls: '桥儿沟隧道', wz: '双拥大道桥儿沟' },
-      { num: '7', yls: '原水果市场', wz: '双拥大道东十里铺' },
-      { num: '8', yls: '原水果市场', wz: '双拥大道东十里铺' },
-      { num: '9', yls: '王家坪旧址门口', wz: '圣地路' },
+      { num: "1", yls: "永安路", wz: "百米大道永安路" },
+      { num: "2", yls: "永昌路北口", wz: "双拥大道永昌路" },
+      { num: "3", yls: "桥儿沟隧道", wz: "双拥大道桥儿沟" },
+      { num: "4", yls: "原水果市场", wz: "双拥大道东十里铺" },
+      { num: "5", yls: "王家坪旧址门口", wz: "圣地路" },
+      { num: "6", yls: "桥儿沟隧道", wz: "双拥大道桥儿沟" },
+      { num: "7", yls: "原水果市场", wz: "双拥大道东十里铺" },
+      { num: "8", yls: "原水果市场", wz: "双拥大道东十里铺" },
+      { num: "9", yls: "王家坪旧址门口", wz: "圣地路" },
     ];
   } else {
-    bus.emit('setLayerVisible', { layername: 'fengXianPoint', isCheck: false });
-    bus.emit('setLayerVisible', { layername: 'yiLaoPoint', isCheck: false });
+    bus.emit("setLayerVisible", { layername: "fengXianPoint", isCheck: false });
+    bus.emit("setLayerVisible", { layername: "yiLaoPoint", isCheck: false });
     newfiberMapbox.map.easeTo({
       center: [109.488, 36.596],
       zoom: 13,
@@ -247,15 +271,15 @@
   return file;
 }
 
-const createCanvas = id => {
-  let canvas = document.createElement('canvas');
-  canvas.id = 'canvas' + id;
-  canvas.style.height = '90%';
-  canvas.style.width = '90%';
-  canvas.style.position = 'relative';
-  canvas.style.top = '5px';
+const createCanvas = (id) => {
+  let canvas = document.createElement("canvas");
+  canvas.id = "canvas" + id;
+  canvas.style.height = "90%";
+  canvas.style.width = "90%";
+  canvas.style.position = "relative";
+  canvas.style.top = "5px";
   //canvas.style.display = 'none';
-  document.getElementById('rainend').append(canvas);
+  document.getElementById("rainend").append(canvas);
   return canvas;
 };
 
@@ -270,7 +294,7 @@
       width: tifImg.getWidth(),
       height: tifImg.getHeight(),
       domain: [0, 256],
-      colorScale: 'mycolorscale',
+      colorScale: "mycolorscale",
     }));
   plot.setData(readRasters[0], tifImg.getWidth(), tifImg.getHeight());
   plot.render();
@@ -283,51 +307,54 @@
     [bbox[2], bbox[1]],
     [bbox[0], bbox[1]],
   ];
-  if (newfiberMapbox_table.map.getLayer('canvas-layer' + i)) {
-    newfiberMapbox_table.map.removeLayer('canvas-layer' + i);
-    newfiberMapbox_table.map.removeSource('canvas-source' + i);
+  if (newfiberMapbox_table.map.getLayer("canvas-layer" + i)) {
+    newfiberMapbox_table.map.removeLayer("canvas-layer" + i);
+    newfiberMapbox_table.map.removeSource("canvas-source" + i);
   }
-  newfiberMapbox_table.map.addSource('canvas-source' + i, {
-    type: 'canvas',
+  newfiberMapbox_table.map.addSource("canvas-source" + i, {
+    type: "canvas",
     canvas: canvasId,
     coordinates: bbox,
     animate: true,
   });
 
   newfiberMapbox_table.map.addLayer({
-    id: 'canvas-layer' + i,
-    type: 'raster',
-    source: 'canvas-source' + i,
+    id: "canvas-layer" + i,
+    type: "raster",
+    source: "canvas-source" + i,
   });
-  newfiberMapbox_table.map.moveLayer('canvas-layer' + i);
+  newfiberMapbox_table.map.moveLayer("canvas-layer" + i);
 };
 
 const plotInit = (colorScale = colorScale) => {
   const minVal = colorScale[0].value;
   const maxVal = colorScale[colorScale.length - 1].value;
-  let color = colorScale.filter(i => Number(i.value) / maxVal <= 1);
-  if (color[color.length - 1].value / maxVal < 1) color.push({ value: maxVal, color: colorScale[color.length].color });
+  let color = colorScale.filter((i) => Number(i.value) / maxVal <= 1);
+  if (color[color.length - 1].value / maxVal < 1)
+    color.push({ value: maxVal, color: colorScale[color.length].color });
   plotty.addColorScale(
-    'mycolorscale',
-    color.map(i => i.color),
-    color.map(i => (i.value / maxVal).toFixed(5))
+    "mycolorscale",
+    color.map((i) => i.color),
+    color.map((i) => (i.value / maxVal).toFixed(5))
   );
 };
 
 let colorScale = [
-  { value: '0', color: 'rgba(7, 213, 118, 0)' },
-  { value: '0.1', color: 'rgba(7, 213, 118, 0)' },
-  { value: '5', color: 'rgba(7, 213, 118, 1)' },
-  { value: '15', color: 'rgba(38, 129, 240,1)' },
-  { value: '30', color: 'rgba(247, 223, 56, 1)' },
-  { value: '70', color: 'rgba(230, 85, 41, 1)' },
-  { value: '140', color: 'rgba(255, 26, 26, 1)' },
+  { value: "0", color: "rgba(7, 213, 118, 0)" },
+  { value: "0.1", color: "rgba(7, 213, 118, 0)" },
+  { value: "5", color: "rgba(7, 213, 118, 1)" },
+  { value: "15", color: "rgba(38, 129, 240,1)" },
+  { value: "30", color: "rgba(247, 223, 56, 1)" },
+  { value: "70", color: "rgba(230, 85, 41, 1)" },
+  { value: "140", color: "rgba(255, 26, 26, 1)" },
 ];
 let imageFiles = [];
 let canvas = [];
 let plot = null;
-const initRainImage = async imagesList => {
-  imageFiles = await Promise.all(imagesList.map(url => urlToFile(url, _.last(_.split(url, '/')))));
+const initRainImage = async (imagesList) => {
+  imageFiles = await Promise.all(
+    imagesList.map((url) => urlToFile(url, _.last(_.split(url, "/"))))
+  );
 
   canvas = createCanvas(0);
   plotInit(colorScale);
@@ -343,22 +370,34 @@
   // }, 1000);
 };
 
-const setRainImage = index => {
+const setRainImage = (index) => {
   var reader = new FileReader();
-  reader.onload = e => createPlot(e, canvas);
+  reader.onload = (e) => createPlot(e, canvas);
   reader.readAsArrayBuffer(imageFiles[index]);
 };
 
 // 缺陷逛网
 function getData() {
   let obj = {
-    xData: ['脱节', '接口材料脱落', '支管暗接', '异物穿入', '渗漏', '沉积', '结垢', '障碍物', '残墙与坝根', '树根', '浮渣'],
+    xData: [
+      "脱节",
+      "接口材料脱落",
+      "支管暗接",
+      "异物穿入",
+      "渗漏",
+      "沉积",
+      "结垢",
+      "障碍物",
+      "残墙与坝根",
+      "树根",
+      "浮渣",
+    ],
     data: [0.3, 0.8, 0.6, 0.4, 0.1, 0.2, 0.5, 0.7, 0.4, 0.1, 0.1],
     num: [],
   };
   let max = JSON.parse(JSON.stringify(obj.data));
   let one = max.sort((a, b) => b - a)[0];
-  max.forEach(i => {
+  max.forEach((i) => {
     obj.num.push(one);
   });
   ryData.value = obj;
@@ -371,9 +410,9 @@
   initRainImage([images[0]]);
 });
 onBeforeUnmount(() => {
-  bus.emit('setLayerVisible', { layername: 'fengXianPoint', isCheck: false });
-  bus.emit('setLayerVisible', { layername: 'yiLaoPoint', isCheck: false });
-  var canvas = document.getElementById('canvas0');
+  bus.emit("setLayerVisible", { layername: "fengXianPoint", isCheck: false });
+  bus.emit("setLayerVisible", { layername: "yiLaoPoint", isCheck: false });
+  var canvas = document.getElementById("canvas0");
   canvas.remove();
 });
 </script>
@@ -444,7 +483,7 @@
           height: 50%;
           font-family: Source Han Sans CN;
           font-weight: 400;
-          font-size: 14px;
+          font-size: 15px;
           color: #ffffff;
         }
       }
@@ -457,7 +496,11 @@
         height: 38px;
         width: 430px;
         margin: 0 auto;
-        background: linear-gradient(0deg, rgba(22, 193, 216, 0.8) 0%, rgba(0, 43, 67, 0.8) 100%);
+        background: linear-gradient(
+          0deg,
+          rgba(22, 193, 216, 0.8) 0%,
+          rgba(0, 43, 67, 0.8) 100%
+        );
         border-radius: 6px;
         border: 1px solid #15d2fd;
         display: flex;
@@ -481,7 +524,7 @@
           // justify-content: space-between;
           align-items: center;
           margin-top: 2px;
-          background: url('@/assets/images/zhps/liebiao.png') no-repeat;
+          background: url("@/assets/images/zhps/liebiao.png") no-repeat;
           background-size: 100% 100%;
           .tableBodyList_span1 {
             width: 10%;
@@ -520,7 +563,7 @@
           }
         }
         .activedright {
-          background: url('@/assets/images/zhps/lbxz.png') no-repeat;
+          background: url("@/assets/images/zhps/lbxz.png") no-repeat;
           background-size: 100% 100%;
         }
       }
@@ -557,6 +600,7 @@
         text-align: center;
         margin-top: 5px;
         margin-left: 10px;
+        font-size: 16px;
       }
       .activedright {
         border: 1px solid #2cfce9;
@@ -572,7 +616,7 @@
       .rainend {
         width: 440px;
         height: 85%;
-        background: url('@/assets/images/zhps/hsRain.png') no-repeat;
+        background: url("@/assets/images/zhps/hsRain.png") no-repeat;
         background-size: 100% 100%;
       }
       .rainLegend {
@@ -620,7 +664,7 @@
   height: 44px;
   line-height: 50px;
   width: 98%;
-  background: url('@/assets/newImgs/partBg.png') no-repeat;
+  background: url("@/assets/newImgs/partBg.png") no-repeat;
   background-size: 100% 100%;
   display: flex;
   align-items: center;
diff --git a/src/views/oneMap/SmartDrainage/PsRightBox.vue b/src/views/oneMap/SmartDrainage/PsRightBox.vue
index df3fdaf..dc78a71 100644
--- a/src/views/oneMap/SmartDrainage/PsRightBox.vue
+++ b/src/views/oneMap/SmartDrainage/PsRightBox.vue
@@ -34,7 +34,11 @@
               <span class="tableBodyList_span4">{{ item.kzsw }} </span>
               <span class="tableBodyList_span5">
                 <el-tag type="success" v-if="item.zt == '正常'">正常</el-tag>
-                <el-tag @click="showcswDalog(item)" style="cursor: pointer" type="warning" v-if="item.zt == '超控制常水位'"
+                <el-tag
+                  @click="showcswDalog(item)"
+                  style="cursor: pointer"
+                  type="warning"
+                  v-if="item.zt == '超控制常水位'"
                   >超控制常水位</el-tag
                 >
               </span>
@@ -45,24 +49,36 @@
           <div class="Titlelarge">河湖简介：延河</div>
           <div class="Contentdetails">
             延河为黄河右岸一级支流,发源于陕西省靖边县天赐湾乡周山南麓，经安塞县镰刀湾乡杨石寺村附近进人延安境内,自西北流向东南,经安塞、宝塔、延长等县(区),于延长南河沟乡凉水岸汇人黄河。延河全长286.9km,流城面积7725
-            km?,平均比降3.3%。市内河长248.5 km,市内面积7321 km?,主要支流有杏子河、坪桥川、西川河、南川河、蟠龙川等。
+            km?,平均比降3.3%。市内河长248.5 km,市内面积7321
+            km?,主要支流有杏子河、坪桥川、西川河、南川河、蟠龙川等。
           </div>
         </div>
       </div>
       <div class="leftSubTabsBox">
         <div class="tabContent" v-if="monitorname == '漫溢监测(1/29)'">
           <ul>
-            <li class="listOne curCick" v-for="(i, index) in listData" :key="index" @click="showMapDalog(i)">
+            <li
+              class="listOne curCick"
+              v-for="(i, index) in listData"
+              :key="index"
+              @click="showMapDalog(i)"
+            >
               <div class="line flex flex-align-center">
                 <div class="lable">站点名称：</div>
                 <div class="box flex flex-align-center flex-justcontent-center">
                   {{ i.siteName }}
                 </div>
-                <span :class="i.siteStatus == '在线' ? 'green' : 'rad'">{{ i.siteStatus }}</span>
+                <span
+                  class="box_Status"
+                  :class="i.siteStatus == '在线' ? 'green' : 'rad'"
+                  >{{ i.siteStatus }}</span
+                >
               </div>
               <div class="line flex flex-align-center">
                 <div class="lable">水<i></i>深：</div>
-                <div class="box flex flex-align-center flex-justcontent-center">{{ i.z || 0 }}米</div>
+                <div class="box flex flex-align-center flex-justcontent-center">
+                  {{ i.z || 0 }}米
+                </div>
               </div>
               <div class="line flex flex-align-center">
                 <div class="lable">风险分析：</div>
@@ -78,17 +94,28 @@
         </div>
         <div class="tabContent" v-if="monitorname == '积水监测(0/16)'">
           <ul>
-            <li class="listOne curCick" v-for="(i, index) in listData" :key="index" @click="JSshowMapDalog(i)">
+            <li
+              class="listOne curCick"
+              v-for="(i, index) in listData"
+              :key="index"
+              @click="JSshowMapDalog(i)"
+            >
               <div class="line flex flex-align-center">
                 <div class="lable">站点名称：</div>
                 <div class="box flex flex-align-center flex-justcontent-center">
                   {{ i.siteName }}
                 </div>
-                <span :class="i.siteStatus == '在线' ? 'green' : 'rad'">{{ i.siteStatus }}</span>
+                <span
+                  class="box_Status"
+                  :class="i.siteStatus == '在线' ? 'green' : 'rad'"
+                  >{{ i.siteStatus }}</span
+                >
               </div>
               <div class="line flex flex-align-center">
                 <div class="lable">水<i></i>深：</div>
-                <div class="box flex flex-align-center flex-justcontent-center">{{ i.z || 0 }}米</div>
+                <div class="box flex flex-align-center flex-justcontent-center">
+                  {{ i.z || 0 }}米
+                </div>
               </div>
               <div class="line flex flex-align-center">
                 <div class="lable">风险分析：</div>
@@ -117,13 +144,24 @@
         <span class="tableHeaderList tableList3">状态</span>
         <span class="tableHeaderList tableList4">操作</span>
       </div>
-      <Vue3SeamlessScroll :list="SSYJData" :singleHeight="34" :singleWaitTime="1500" :hover="true" class="tableBody">
+      <Vue3SeamlessScroll
+        :list="SSYJData"
+        :singleHeight="34"
+        :singleWaitTime="1500"
+        :hover="true"
+        class="tableBody"
+      >
         <div class="tableBodyList" v-for="item in SSYJData">
           <span class="tableBodyList_span1">{{ item.wz }}</span>
           <span class="tableBodyList_span2"> {{ item.sj }}</span>
           <span class="tableBodyList_span3">{{ item.zk }}</span>
           <span class="tableBodyList_span4">
-            <el-tag style="cursor: pointer" type="danger" v-if="item.cz == '派单'" @click="paidan(item)" size="small"
+            <el-tag
+              style="cursor: pointer"
+              type="danger"
+              v-if="item.cz == '派单'"
+              @click="paidan(item)"
+              size="small"
               >派单</el-tag
             >
             <el-tag size="small" type="success" v-if="item.cz == '已派单'">已派单</el-tag>
@@ -163,161 +201,164 @@
       </div>
     </div>
     <div class="fxChart">
-      <AssessmentjsEcharts :data="chartData2" :refresh="chartData2.refresh"></AssessmentjsEcharts>
+      <AssessmentjsEcharts
+        :data="chartData2"
+        :refresh="chartData2.refresh"
+      ></AssessmentjsEcharts>
     </div>
   </div>
 </template>
 
 <script setup>
-import { ref, reactive, toRefs, onMounted, onBeforeUnmount } from 'vue';
-import AssessmentjsEcharts from '@/views/oneMap/Echarts/AssessmentjsEcharts.vue';
-import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
-import bus from '@/bus';
+import { ref, reactive, toRefs, onMounted, onBeforeUnmount } from "vue";
+import AssessmentjsEcharts from "@/views/oneMap/Echarts/AssessmentjsEcharts.vue";
+import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
+import bus from "@/bus";
 const FXJCData = ref([
   {
-    xh: '1',
-    hd: '延河',
+    xh: "1",
+    hd: "延河",
     dqsw: 130,
     kzsw: 2000,
-    zt: '超控制常水位',
+    zt: "超控制常水位",
   },
   {
-    xh: '2',
-    hd: '杜甫川河',
+    xh: "2",
+    hd: "杜甫川河",
     dqsw: 10,
     kzsw: 300,
-    zt: '正常',
+    zt: "正常",
   },
   {
-    xh: '3',
-    hd: '西川河',
+    xh: "3",
+    hd: "西川河",
     dqsw: 11,
     kzsw: 700,
-    zt: '正常',
+    zt: "正常",
   },
   {
-    xh: '4',
-    hd: '南川河',
+    xh: "4",
+    hd: "南川河",
     dqsw: 12,
     kzsw: 700,
-    zt: '正常',
+    zt: "正常",
   },
 ]);
 const listData = ref([
-  { siteName: '东关大街与长青路交叉口', siteStatus: '在线', warnInfo: '无风险' },
-  { siteName: '大桥街与延河西路交叉口', siteStatus: '在线', warnInfo: '无风险' },
-  { siteName: '文化沟路与延河西路交叉口', siteStatus: '在线', warnInfo: '无风险' },
+  { siteName: "东关大街与长青路交叉口", siteStatus: "在线", warnInfo: "无风险" },
+  { siteName: "大桥街与延河西路交叉口", siteStatus: "在线", warnInfo: "无风险" },
+  { siteName: "文化沟路与延河西路交叉口", siteStatus: "在线", warnInfo: "无风险" },
 ]);
 const SSYJData = ref([
   {
-    wz: '东大街管网',
+    wz: "东大街管网",
     sj: 25,
-    zk: '高水位',
-    cz: '派单',
-    value: '004', //语音识别内容编码-前段自己设置的,后期项目有接口就直接替换数据唯一id
+    zk: "高水位",
+    cz: "派单",
+    value: "004", //语音识别内容编码-前段自己设置的,后期项目有接口就直接替换数据唯一id
   },
   {
-    wz: '枣园南路与枣园五路管网',
+    wz: "枣园南路与枣园五路管网",
     sj: 40,
-    zk: '满管',
-    cz: '派单',
-    value: '005',
+    zk: "满管",
+    cz: "派单",
+    value: "005",
   },
   {
-    wz: '王家坪旧址门口',
+    wz: "王家坪旧址门口",
     sj: 12,
-    zk: '积水',
-    cz: '派单',
-    value: '006',
+    zk: "积水",
+    cz: "派单",
+    value: "006",
   },
   {
-    wz: '金延安路与枣园大道管网 ',
+    wz: "金延安路与枣园大道管网 ",
     sj: 50,
-    zk: '满管',
-    cz: '已派单',
+    zk: "满管",
+    cz: "已派单",
   },
   {
-    wz: '延大路与杨家岭路管网  ',
+    wz: "延大路与杨家岭路管网  ",
     sj: 50,
-    zk: '满管',
-    cz: '已派单',
+    zk: "满管",
+    cz: "已派单",
   },
 ]);
 const yearList = ref([
-  { name: '月', value: 1 },
-  { name: '年', value: 2 },
+  { name: "月", value: 1 },
+  { name: "年", value: 2 },
 ]);
 const monitorData = ref([
-  { name: '漫溢监测(1/29)', value: 1 },
-  { name: '积水监测(0/16)', value: 2 },
-  { name: '水位监测(0/4)', value: 2 },
+  { name: "漫溢监测(1/29)", value: 1 },
+  { name: "积水监测(0/16)", value: 2 },
+  { name: "水位监测(0/4)", value: 2 },
 ]);
 const chartData2 = ref({
-  xAxis: ['12/1', '12/2', '12/3', '12/4', '12/5', '12/6'],
+  xAxis: ["12/1", "12/2", "12/3", "12/4", "12/5", "12/6"],
   refresh: 1,
 });
-const activedname = ref('月');
-const monitorname = ref('漫溢监测(1/29)');
+const activedname = ref("月");
+const monitorname = ref("漫溢监测(1/29)");
 function yearclick(val) {
   activedname.value = val.name;
 }
 
 function monitorclick(val) {
   monitorname.value = val.name;
-  if (monitorname.value == '漫溢监测(1/29)') {
+  if (monitorname.value == "漫溢监测(1/29)") {
     listData.value = [
-      { siteName: '东关大街与长青路交叉口', siteStatus: '在线', warnInfo: '无风险' },
-      { siteName: '大桥街与延河西路交叉口', siteStatus: '在线', warnInfo: '无风险' },
-      { siteName: '文化沟路与延河西路交叉口', siteStatus: '在线', warnInfo: '无风险' },
+      { siteName: "东关大街与长青路交叉口", siteStatus: "在线", warnInfo: "无风险" },
+      { siteName: "大桥街与延河西路交叉口", siteStatus: "在线", warnInfo: "无风险" },
+      { siteName: "文化沟路与延河西路交叉口", siteStatus: "在线", warnInfo: "无风险" },
     ];
-  } else if (monitorname.value == '积水监测(0/16)') {
+  } else if (monitorname.value == "积水监测(0/16)") {
     listData.value = [
-      { siteName: '东关大街与长青路交叉口', siteStatus: '在线', warnInfo: '无风险' },
-      { siteName: '大桥街与延河西路交叉口', siteStatus: '在线', warnInfo: '无风险' },
-      { siteName: '文化沟路与延河西路交叉口', siteStatus: '在线', warnInfo: '无风险' },
+      { siteName: "东关大街与长青路交叉口", siteStatus: "在线", warnInfo: "无风险" },
+      { siteName: "大桥街与延河西路交叉口", siteStatus: "在线", warnInfo: "无风险" },
+      { siteName: "文化沟路与延河西路交叉口", siteStatus: "在线", warnInfo: "无风险" },
     ];
   } else {
-    console.log(monitorname.value, '  monitorname.value');
+    console.log(monitorname.value, "  monitorname.value");
   }
 }
 // 弹框
 function showMapDalog(val) {
-  console.log(val.siteName, 'val.siteName');
+  console.log(val.siteName, "val.siteName");
   let data = {
     title: val.siteName,
-    comIDs: ['gwpm', 'jcsj'],
+    comIDs: ["gwpm", "jcsj"],
   };
-  bus.emit('publicDialog', data);
+  bus.emit("publicDialog", data);
   // showPipe.value = true;
 }
 // 积水弹框
 function JSshowMapDalog(val) {
   let data = {
     title: val.siteName,
-    comIDs: ['spjk', 'jcsj'],
+    comIDs: ["spjk", "jcsj"],
   };
-  bus.emit('publicDialog', data);
+  bus.emit("publicDialog", data);
   // showPipe.value = true;
 }
 
 // 派单
-const paidan = item => {
+const paidan = (item) => {
   let data = {
     title: item.wz,
-    comIDs: ['gdpf'],
+    comIDs: ["gdpf"],
     getSiteId: item.value,
   };
-  bus.emit('publicDialog', data);
+  bus.emit("publicDialog", data);
 };
 // 超控制常水位
 function showcswDalog(val) {
-  console.log(val, 'val');
+  console.log(val, "val");
   let data = {
-    title: val.hd + '监测点',
-    comIDs: ['PS_ckzcsw'],
+    title: val.hd + "监测点",
+    comIDs: ["PS_ckzcsw"],
   };
 
-  bus.emit('publicDialog', data);
+  bus.emit("publicDialog", data);
   // showPipe.value = true;
 }
 </script>
@@ -344,7 +385,7 @@
         width: 132px;
         height: 30px;
         padding: 2px 3px;
-        background: url('@/assets/images/zhps/fxpgw.png') no-repeat;
+        background: url("@/assets/images/zhps/fxpgw.png") no-repeat;
         background-size: 100% 100%;
         text-align: center;
         margin-top: 5px;
@@ -353,7 +394,7 @@
       .activedright {
         border: 1px solid #2cfce9;
         color: #e4f5ff;
-        background: url('@/assets/images/zhps/fxpgxz.png') no-repeat;
+        background: url("@/assets/images/zhps/fxpgxz.png") no-repeat;
         background-size: 100% 100%;
       }
     }
@@ -403,12 +444,15 @@
                 padding: 3px 0;
                 line-height: 20px;
                 border-radius: 2px 2px 2px 2px;
-                border: 1px solid #1cf5fc;
+                border: 1px solid #1cf4fc48;
                 text-align: center;
                 font-size: 14px;
                 font-weight: 400;
                 color: #ffffff;
               }
+              .box_Status {
+                font-size: 16px;
+              }
               .box2 {
                 width: 120px;
               }
@@ -429,9 +473,9 @@
                   background: rgba(255, 55, 55, 0.15);
                 }
                 &.green {
-                  border-color: #0fcd22;
-                  color: #0fcd22;
-                  background: rgba(15, 205, 34, 0.15);
+                  border-color: lime;
+                  color: lime;
+                  background: rgba(12, 134, 24, 0.15);
                 }
               }
             }
@@ -735,6 +779,7 @@
           text-align: center;
           position: relative;
           left: 40px;
+          font-size: 16px;
         }
         .activedright {
           border: 1px solid #2cfce9;
@@ -755,7 +800,7 @@
   height: 44px;
   line-height: 50px;
   width: 98%;
-  background: url('@/assets/newImgs/partBg.png') no-repeat;
+  background: url("@/assets/newImgs/partBg.png") no-repeat;
   background-size: 100% 100%;
   display: flex;
   align-items: center;
diff --git a/src/views/oneMap/components/ZHHM.vue b/src/views/oneMap/components/ZHHM.vue
index 23556f2..c953f52 100644
--- a/src/views/oneMap/components/ZHHM.vue
+++ b/src/views/oneMap/components/ZHHM.vue
@@ -711,6 +711,9 @@
   AllData.Charts4.setOption({
     tooltip: {
       trigger: "axis",
+      axisPointer: {
+        type: "shadow",
+      },
     },
     grid: {
       left: "3%",
@@ -766,56 +769,56 @@
         },
         data: Data.yAxis,
       },
-      {
-        name: "",
-        type: "pictorialBar",
-        symbolSize: [barWidth + 10, 15],
-        symbolOffset: [0, 8],
-        z: 10,
-        itemStyle: {
-          normal: {
-            color: "transparent",
-            borderColor: barTopColor,
-            borderType: "solid",
-            borderWidth: 10,
-          },
-        },
-        data: Data.yAxis,
-      },
-      {
-        name: "",
-        type: "pictorialBar",
-        symbolSize: [barWidth + 20, 20],
-        symbolOffset: [0, 12],
-        z: 12,
-        itemStyle: {
-          normal: {
-            color: "transparent",
-            borderColor: barTopColor,
-            borderType: "solid",
-            borderWidth: 10,
-          },
-        },
-        data: Data.yAxis,
-        stack: "check",
-      },
-      {
-        name: "",
-        type: "pictorialBar",
-        symbolSize: [barWidth + 25, 20],
-        symbolOffset: [0, 12],
-        z: 12,
-        itemStyle: {
-          normal: {
-            color: "transparent",
-            borderColor: "#3ACDC5",
-            borderType: "solid",
-            borderWidth: 10,
-          },
-        },
-        data: Data.yAxis,
-        stack: "check",
-      },
+      // {
+      //   name: "",
+      //   type: "pictorialBar",
+      //   symbolSize: [barWidth + 10, 15],
+      //   symbolOffset: [0, 8],
+      //   z: 10,
+      //   itemStyle: {
+      //     normal: {
+      //       color: "transparent",
+      //       borderColor: barTopColor,
+      //       borderType: "solid",
+      //       borderWidth: 10,
+      //     },
+      //   },
+      //   data: Data.yAxis,
+      // },
+      // {
+      //   name: "",
+      //   type: "pictorialBar",
+      //   symbolSize: [barWidth + 20, 20],
+      //   symbolOffset: [0, 12],
+      //   z: 12,
+      //   itemStyle: {
+      //     normal: {
+      //       color: "transparent",
+      //       borderColor: barTopColor,
+      //       borderType: "solid",
+      //       borderWidth: 10,
+      //     },
+      //   },
+      //   data: Data.yAxis,
+      //   stack: "check",
+      // },
+      // {
+      //   name: "",
+      //   type: "pictorialBar",
+      //   symbolSize: [barWidth + 25, 20],
+      //   symbolOffset: [0, 12],
+      //   z: 12,
+      //   itemStyle: {
+      //     normal: {
+      //       color: "transparent",
+      //       borderColor: "#3ACDC5",
+      //       borderType: "solid",
+      //       borderWidth: 10,
+      //     },
+      //   },
+      //   data: Data.yAxis,
+      //   stack: "check",
+      // },
       {
         name: "",
         type: "bar",
@@ -892,8 +895,9 @@
     zoom: 13,
     pitch: 55,
   });
-  initEcharts4();
   window.addEventListener("resize", initEcharts4);
+  initEcharts4();
+
   //mapBoxVectorLayer.addGeojsonPolygonWithLabel('yanAnPaiShuiArea', yanAnPaiShuiArea);
 });
 

diff --git a/src/views/oneMap/Echarts/publicEch.vue b/src/views/oneMap/Echarts/publicEch.vue
index 6ab1b7d..2816357 100644
--- a/src/views/oneMap/Echarts/publicEch.vue
+++ b/src/views/oneMap/Echarts/publicEch.vue
@@ -2,11 +2,11 @@
   <div :id="id" style="width: 100%; height: 100%"></div>
 </template>
 <script>
-import * as echarts from 'echarts';
-import { guid } from '@/utils/ruoyi';
-import { reactive, toRefs, onMounted, watch } from 'vue';
+import * as echarts from "echarts";
+import { guid } from "@/utils/ruoyi";
+import { reactive, toRefs, onMounted, watch } from "vue";
 export default {
-  name: 'line-chart',
+  name: "line-chart",
   props: {
     data: Object,
     refresh: Number,
@@ -28,28 +28,34 @@
       let chartDom = echarts.init(document.getElementById(allData.id));
 
       var shadowYData = [100, 100];
-      var barTopColor = ['#fe7285FF', '#1f93ffFF', '#31e1adFF', '#e4cd61FF', '#12f9ffFF'];
+      var barTopColor = ["#fe7285FF", "#1f93ffFF", "#31e1adFF", "#e4cd61FF", "#12f9ffFF"];
       var barBottomColor = [
-        'RGBA(154, 102, 125, 0.6)',
-        'RGBA(17, 109, 182, 0.6)',
-        'RGBA(27, 152, 136, 0.6)',
-        'RGBA(126, 138, 92, 0.6)',
-        'RGBA(10, 162, 178, 0.6)',
+        "RGBA(154, 102, 125, 0.6)",
+        "RGBA(17, 109, 182, 0.6)",
+        "RGBA(27, 152, 136, 0.6)",
+        "RGBA(126, 138, 92, 0.6)",
+        "RGBA(10, 162, 178, 0.6)",
       ];
       var barWidth = 20;
       var option;
       option = {
-        color: ['#3FFFC2', '#FFF21C'],
+        color: ["#3FFFC2", "#FFF21C"],
         tooltip: {
-          trigger: 'axis',
+          trigger: "axis",
 
-          formatter: params => {
+          formatter: (params) => {
             // console.log(params);
-            var relVal = '' + params[0].name;
+            var relVal = "" + params[0].name;
             for (var i = 0, l = params.length; i < l; i++) {
               if (params[i].seriesName) {
-                let unit = params[i].seriesName == '数量' ? '起' : '个';
-                relVal += '<br/>' + params[i].marker + params[i].seriesName + ' ' + params[i].value + unit;
+                let unit = params[i].seriesName == "数量" ? "起" : "个";
+                relVal +=
+                  "<br/>" +
+                  params[i].marker +
+                  params[i].seriesName +
+                  " " +
+                  params[i].value +
+                  unit;
               }
             }
             return relVal;
@@ -61,12 +67,12 @@
         },
         xAxis: [
           {
-            type: 'category',
+            type: "category",
             axisLine: {
               show: false,
               lineStyle: {
                 width: 2,
-                color: '#58b2ed',
+                color: "#58b2ed",
               },
             },
             splitLine: {
@@ -76,18 +82,18 @@
               show: false,
             },
             axisLabel: {
-              color: 'rgba(255,255,255,1)',
-              fontSize: 12,
-              fontFamily: 'AlibabaPuHuiTi',
+              color: "rgba(255,255,255,1)",
+              fontSize: 16,
+              fontFamily: "AlibabaPuHuiTi",
               formatter: function (params) {
-                var str = ''; // 最终拼接成的字符串
+                var str = ""; // 最终拼接成的字符串
                 var paramsLen = params.length; // 获取每项文字的个数
                 var len = 3; // 每行能显示的字的个数（根据实际情况自己设置）
                 var rowNumber = Math.ceil(paramsLen / len); // 换行的话，需要显示几行，向上取整
                 if (paramsLen > len) {
                   //大于设定的len就换行，不大于就不变化
                   for (var i = 0; i < rowNumber; i++) {
-                    var temp = ''; // 表示每一次截取的字符串
+                    var temp = ""; // 表示每一次截取的字符串
                     var start = i * len; // 开始截取的位置
                     var end = start + len; // 结束截取的位置
                     if (i == rowNumber - 1) {
@@ -95,7 +101,7 @@
                       temp = params.substring(start, paramsLen);
                     } else {
                       // 每一次拼接字符串并换行
-                      temp = params.substring(start, end) + '\n';
+                      temp = params.substring(start, end) + "\n";
                     }
                     str += temp; // 最终拼成的字符串
                   }
@@ -111,19 +117,19 @@
         ],
         yAxis: [
           {
-            name: '数量(起)',
-            type: 'value',
+            name: "数量(起)",
+            type: "value",
             axisLabel: {
-              color: '#3FFFC2',
+              color: "#3FFFC2",
               show: true,
             },
             nameTextStyle: {
-              color: '#3FFFC2',
+              color: "#3FFFC2",
             },
             splitLine: {
               lineStyle: {
-                type: 'dashed',
-                color: '#3FFFC2',
+                type: "dashed",
+                color: "#3FFFC2",
               },
             },
             alignTicks: true,
@@ -137,20 +143,20 @@
             bottom: 18,
             start: 0,
             end: 100,
-            handleSize: '100%',
-            fillerColor: '#94FA41',
-            borderColor: 'transparent',
-            backgroundColor: 'rgba(148, 250, 65, 0.2)',
+            handleSize: "100%",
+            fillerColor: "#94FA41",
+            borderColor: "transparent",
+            backgroundColor: "rgba(148, 250, 65, 0.2)",
             handleStyle: {
-              color: '#94FA41',
+              color: "#94FA41",
             },
             moveHandleSize: 0,
             textStyle: {
-              color: '#fff',
+              color: "#fff",
             },
           },
           {
-            type: 'inside',
+            type: "inside",
             show: true,
             height: 15,
             start: 1,
@@ -159,11 +165,11 @@
         ],
         series: [
           {
-            name: '数量',
-            type: 'pictorialBar',
+            name: "数量",
+            type: "pictorialBar",
             symbolSize: [barWidth, 10],
             symbolOffset: [0, -6],
-            symbolPosition: 'end',
+            symbolPosition: "end",
             z: 12,
             itemStyle: {
               normal: {
@@ -174,62 +180,62 @@
             },
             data: props.data.yAxis,
           },
+          // {
+          //   name: "",
+          //   type: "pictorialBar",
+          //   symbolSize: [barWidth + 10, 15],
+          //   symbolOffset: [0, 8],
+          //   z: 10,
+          //   itemStyle: {
+          //     normal: {
+          //       color: "transparent",
+          //       borderColor: barTopColor,
+          //       borderType: "solid",
+          //       borderWidth: 10,
+          //     },
+          //   },
+          //   data: props.data.yAxis,
+          // },
+          // {
+          //   name: '',
+          //   type: 'pictorialBar',
+          //   symbolSize: [barWidth + 20, 20],
+          //   symbolOffset: [0, 12],
+          //   z: 12,
+          //   itemStyle: {
+          //     normal: {
+          //       color: 'transparent',
+          //       borderColor: barTopColor,
+          //       borderType: 'solid',
+          //       borderWidth: 10,
+          //     },
+          //   },
+          //   data: props.data.yAxis,
+          //   stack: 'check',
+          // },
+          // {
+          //   name: "",
+          //   type: "pictorialBar",
+          //   symbolSize: [barWidth + 25, 20],
+          //   symbolOffset: [0, 12],
+          //   z: 12,
+          //   itemStyle: {
+          //     normal: {
+          //       color: "transparent",
+          //       borderColor: "#3ACDC5",
+          //       borderType: "solid",
+          //       borderWidth: 10,
+          //     },
+          //   },
+          //   data: props.data.yAxis,
+          //   stack: "check",
+          // },
           {
-            name: '',
-            type: 'pictorialBar',
-            symbolSize: [barWidth + 10, 15],
-            symbolOffset: [0, 8],
-            z: 10,
-            itemStyle: {
-              normal: {
-                color: 'transparent',
-                borderColor: barTopColor,
-                borderType: 'solid',
-                borderWidth: 10,
-              },
-            },
-            data: props.data.yAxis,
-          },
-          {
-            name: '',
-            type: 'pictorialBar',
-            symbolSize: [barWidth + 20, 20],
-            symbolOffset: [0, 12],
-            z: 12,
-            itemStyle: {
-              normal: {
-                color: 'transparent',
-                borderColor: barTopColor,
-                borderType: 'solid',
-                borderWidth: 10,
-              },
-            },
-            data: props.data.yAxis,
-            stack: 'check',
-          },
-          {
-            name: '',
-            type: 'pictorialBar',
-            symbolSize: [barWidth + 25, 20],
-            symbolOffset: [0, 12],
-            z: 12,
-            itemStyle: {
-              normal: {
-                color: 'transparent',
-                borderColor: '#3ACDC5',
-                borderType: 'solid',
-                borderWidth: 10,
-              },
-            },
-            data: props.data.yAxis,
-            stack: 'check',
-          },
-          {
-            name: '',
-            type: 'bar',
+            name: "",
+            type: "bar",
             barWidth: barWidth,
-            barGap: '10%', // Make series be overlap
-            barCateGoryGap: '10%',
+            barGap: "10%", // Make series be overlap
+            barCateGoryGap: "10%",
             itemStyle: {
               normal: {
                 color: function (params) {
@@ -264,7 +270,7 @@
     watch(
       () => props.refresh,
       () => {
-        console.log(props, 'propspropsprops');
+        console.log(props, "propspropsprops");
         if (allData.chartDom) {
           allData.chartDom.dispose();
           allData.chartDom = null;
@@ -276,7 +282,7 @@
     );
     onMounted(() => {
       init();
-      window.addEventListener('resize', resizeTheChart);
+      window.addEventListener("resize", resizeTheChart);
     });
     return {
       ...toRefs(allData),
diff --git a/src/views/oneMap/LayerControl/LayerControl.vue b/src/views/oneMap/LayerControl/LayerControl.vue
index 43fc007..2bdf6b8 100644
--- a/src/views/oneMap/LayerControl/LayerControl.vue
+++ b/src/views/oneMap/LayerControl/LayerControl.vue
@@ -1,6 +1,10 @@
 <template>
   <Transition name="slideTC">
-    <div class="LayerControl" v-show="ShowTuCheng">
+    <div
+      class="LayerControl"
+      v-show="ShowTuCheng"
+      :class="[showPanel ? 'TuChengImgTrue' : 'TuChengImgFalse']"
+    >
       <div class="GroupBox" v-for="item in AllData.LayerData" v-show="item.children">
         <div class="GroupName" @click="item.Show = !item.Show">{{ item.title }}</div>
         <!-- <Transition name="Group"> -->
@@ -30,30 +34,30 @@
 </template>
 
 <script setup name="LayerControl">
-import { ref, reactive, toRefs, onMounted } from 'vue';
+import { ref, reactive, toRefs, onMounted } from "vue";
 // 图层控制icon引入
-import { requireTuChengImg } from '@/utils/util';
-import yanAnPaiShuiArea from '@/assets/yanAnPaiShuiArea.json';
-import yanAnRoad from '@/assets/yanAnRoad.json';
-import yanAnWater from '@/assets/yanAnWater.json';
-import yanAnWSCLC from '@/assets/yanAnWSCLC.json';
-import yanAnCenterCity from '@/assets/yanAnCenterCity.json';
-import yanAnYSBZ from '@/assets/yanAnYSBZ.json';
-import yanAnYiLao from '@/assets/yanAnYiLao.json';
-import yanAnFengXian from '@/assets/yanAnFengXian.json';
-import yanAnPipeSupervise from '@/assets/yanAnPipeSupervise.json';
-import yanAnPKSupervise from '@/assets/yanAnPKSupervise.json';
-import yanAnNature from '@/assets/yanAnNature.json';
-import yanAnVideo from '@/assets/yanAnVideo.json';
-import yanAnMountain from '@/assets/yanAnMountain.json';
-import yanAnSmallWater from '@/assets/yanAnSmallWater.json';
-import yanAnRainArea from '@/assets/yanAnRainArea.json';
-import heDiJiaGu from '@/assets/heDiJiaGu.json';
-import heDiShuJun from '@/assets/heDiShuJun.json';
-import anXianGaiZao from '@/assets/anXianGaiZao.json';
-import bus from '@/bus';
-import axios from 'axios';
-import mapBoxVectorLayer from '@/utils/GISdocument/mapboxVectorLayer.js';
+import { requireTuChengImg } from "@/utils/util";
+import yanAnPaiShuiArea from "@/assets/yanAnPaiShuiArea.json";
+import yanAnRoad from "@/assets/yanAnRoad.json";
+import yanAnWater from "@/assets/yanAnWater.json";
+import yanAnWSCLC from "@/assets/yanAnWSCLC.json";
+import yanAnCenterCity from "@/assets/yanAnCenterCity.json";
+import yanAnYSBZ from "@/assets/yanAnYSBZ.json";
+import yanAnYiLao from "@/assets/yanAnYiLao.json";
+import yanAnFengXian from "@/assets/yanAnFengXian.json";
+import yanAnPipeSupervise from "@/assets/yanAnPipeSupervise.json";
+import yanAnPKSupervise from "@/assets/yanAnPKSupervise.json";
+import yanAnNature from "@/assets/yanAnNature.json";
+import yanAnVideo from "@/assets/yanAnVideo.json";
+import yanAnMountain from "@/assets/yanAnMountain.json";
+import yanAnSmallWater from "@/assets/yanAnSmallWater.json";
+import yanAnRainArea from "@/assets/yanAnRainArea.json";
+import heDiJiaGu from "@/assets/heDiJiaGu.json";
+import heDiShuJun from "@/assets/heDiShuJun.json";
+import anXianGaiZao from "@/assets/anXianGaiZao.json";
+import bus from "@/bus";
+import axios from "axios";
+import mapBoxVectorLayer from "@/utils/GISdocument/mapboxVectorLayer.js";
 const AllData = reactive({
   // 图层控制面板的渲染数据
   /**图层面板数据字段说明
@@ -66,216 +70,216 @@
    */
   LayerData: [
     {
-      title: '基本信息',
+      title: "基本信息",
       Show: true,
       children: [
         {
-          layerName: '蓝色地图',
-          layerKey: 'blackMap',
-          layerIcon: requireTuChengImg('zhongxinchengqu'),
+          layerName: "蓝色地图",
+          layerKey: "blackMap",
+          layerIcon: requireTuChengImg("zhongxinchengqu"),
           layerVisible: false,
         },
         {
-          layerName: '白色地图',
-          layerKey: 'whiteMap',
-          layerIcon: requireTuChengImg('zhongxinchengqu'),
+          layerName: "白色地图",
+          layerKey: "whiteMap",
+          layerIcon: requireTuChengImg("zhongxinchengqu"),
           layerVisible: false,
         },
         {
-          layerName: '影像地图',
-          layerKey: 'imageMap',
-          layerIcon: requireTuChengImg('zhongxinchengqu'),
+          layerName: "影像地图",
+          layerKey: "imageMap",
+          layerIcon: requireTuChengImg("zhongxinchengqu"),
           layerVisible: false,
         },
         {
-          layerName: '中心城区',
-          layerKey: 'centerCity',
-          layerIcon: requireTuChengImg('zhongxinchengqu'),
+          layerName: "中心城区",
+          layerKey: "centerCity",
+          layerIcon: requireTuChengImg("zhongxinchengqu"),
           layerVisible: false,
           dynamicLineData: yanAnCenterCity,
         },
         {
-          layerName: '三维建筑',
-          layerKey: 'buildingLayer',
-          layerIcon: '',
+          layerName: "三维建筑",
+          layerKey: "buildingLayer",
+          layerIcon: "",
           layerVisible: true,
         },
         {
-          layerName: '路网',
-          layerKey: 'road',
-          layerIcon: '',
+          layerName: "路网",
+          layerKey: "road",
+          layerIcon: "",
           layerVisible: true,
           dynamicLineData: yanAnRoad,
         },
         {
-          layerName: '河流水系',
-          layerKey: 'waterLake',
-          layerIcon: '',
+          layerName: "河流水系",
+          layerKey: "waterLake",
+          layerIcon: "",
           layerVisible: true,
           dynamicLineData: yanAnWater,
         },
         {
-          layerName: '防洪河道',
-          layerKey: 'fangHongWater',
-          layerIcon: '',
+          layerName: "防洪河道",
+          layerKey: "fangHongWater",
+          layerIcon: "",
           layerVisible: false,
           lineWithLabel: yanAnSmallWater,
         },
         {
-          layerName: '河堤疏浚',
-          layerKey: 'heDiShuJun',
-          layerIcon: '',
+          layerName: "河堤疏浚",
+          layerKey: "heDiShuJun",
+          layerIcon: "",
           layerVisible: false,
           lineWithLabel: heDiShuJun,
         },
         {
-          layerName: '河堤加固',
-          layerKey: 'heDiJiaGu',
-          layerIcon: '',
+          layerName: "河堤加固",
+          layerKey: "heDiJiaGu",
+          layerIcon: "",
           layerVisible: false,
           lineWithLabel: heDiJiaGu,
         },
         {
-          layerName: '岸线改造',
-          layerKey: 'anXianGaiZao',
-          layerIcon: '',
+          layerName: "岸线改造",
+          layerKey: "anXianGaiZao",
+          layerIcon: "",
           layerVisible: false,
           lineWithLabel: anXianGaiZao,
         },
         {
-          layerName: '河堤治理',
-          layerKey: 'heDiZhiLi',
-          layerIcon: '',
+          layerName: "河堤治理",
+          layerKey: "heDiZhiLi",
+          layerIcon: "",
           layerVisible: false,
           lineWithLabel: anXianGaiZao,
         },
         {
-          layerName: '空间格局',
-          layerKey: 'yanAnNature',
-          layerIcon: '',
+          layerName: "空间格局",
+          layerKey: "yanAnNature",
+          layerIcon: "",
           layerVisible: false,
           areaData: yanAnNature,
         },
         {
-          layerName: '山体修复',
-          layerKey: 'yanAnMountain',
-          layerIcon: '',
+          layerName: "山体修复",
+          layerKey: "yanAnMountain",
+          layerIcon: "",
           layerVisible: false,
           lineWithLabel: yanAnMountain,
         },
       ],
     },
     {
-      title: '燃气系统',
+      title: "燃气系统",
       Show: true,
       children: [
         {
-          layerName: '燃气管网',
-          layerKey: 'rq_all',
+          layerName: "燃气管网",
+          layerKey: "rq_all",
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: '干管',
-          layerKey: 'rq_SZLH',
+          layerName: "干管",
+          layerKey: "rq_SZLH",
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: '干管流向',
-          layerKey: 'sx_ya_smx_rq_line_sz',
+          layerName: "干管流向",
+          layerKey: "sx_ya_smx_rq_line_sz",
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: '主管',
-          layerKey: 'rq_TYLH',
+          layerName: "主管",
+          layerKey: "rq_TYLH",
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: '主管流向',
-          layerKey: 'sx_ya_smx_rq_line_zg',
+          layerName: "主管流向",
+          layerKey: "sx_ya_smx_rq_line_zg",
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: '支管',
-          layerKey: 'rq_LGLH',
+          layerName: "支管",
+          layerKey: "rq_LGLH",
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: '支管流向',
-          layerKey: 'sx_ya_smx_rq_line_zhig',
+          layerName: "支管流向",
+          layerKey: "sx_ya_smx_rq_line_zhig",
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: '其他管网',
-          layerKey: 'rq_other',
+          layerName: "其他管网",
+          layerKey: "rq_other",
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: '调压器',
-          layerKey: 'tiaoYaQi',
+          layerName: "调压器",
+          layerKey: "tiaoYaQi",
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: '节点',
-          layerKey: 'rq_jieDian',
+          layerName: "节点",
+          layerKey: "rq_jieDian",
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: '极性保护',
-          layerKey: 'jiXingBaoHu',
+          layerName: "极性保护",
+          layerKey: "jiXingBaoHu",
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: '流量计',
-          layerKey: 'rq_liuLiangJi',
+          layerName: "流量计",
+          layerKey: "rq_liuLiangJi",
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: '未知设备',
-          layerKey: 'rq_unknow',
+          layerName: "未知设备",
+          layerKey: "rq_unknow",
           layerIcon: null,
           layerVisible: false,
         },
       ],
     },
     {
-      title: '雨水系统',
+      title: "雨水系统",
       Show: true,
       children: [
         {
-          layerName: '雨水分区',
-          layerKey: 'rainArea',
+          layerName: "雨水分区",
+          layerKey: "rainArea",
           layerIcon: null,
           layerVisible: false,
           areaData: yanAnRainArea,
         },
         {
-          layerName: '排水分区',
-          layerKey: 'paishuiArea',
+          layerName: "排水分区",
+          layerKey: "paishuiArea",
           layerIcon: null,
           layerVisible: false,
           areaData: yanAnPaiShuiArea,
         },
         {
-          layerName: '雨水管网',
-          layerKey: 'ysLine1',
+          layerName: "雨水管网",
+          layerKey: "ysLine1",
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: '雨水管网流向',
-          layerKey: 'pipeline_info_flow_ys',
+          layerName: "雨水管网流向",
+          layerKey: "pipeline_info_flow_ys",
           layerIcon: null,
           layerVisible: false,
         },
@@ -286,8 +290,8 @@
         //   layerVisible: false,
         // },
         {
-          layerName: '雨水泵站',
-          layerKey: 'YSBZ',
+          layerName: "雨水泵站",
+          layerKey: "YSBZ",
           layerIcon: null,
           layerVisible: false,
           data: yanAnYSBZ,
@@ -295,24 +299,24 @@
       ],
     },
     {
-      title: '污水系统',
+      title: "污水系统",
       Show: true,
       children: [
         {
-          layerName: '污水分区',
-          layerKey: 'sewageArea',
+          layerName: "污水分区",
+          layerKey: "sewageArea",
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: '污水管网',
-          layerKey: 'wsLine1',
+          layerName: "污水管网",
+          layerKey: "wsLine1",
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: '污水管网流向',
-          layerKey: 'pipeline_info_flow_ws1',
+          layerName: "污水管网流向",
+          layerKey: "pipeline_info_flow_ws1",
           layerIcon: null,
           layerVisible: false,
         },
@@ -329,8 +333,8 @@
         //   layerVisible: false,
         // },
         {
-          layerName: '污水处理厂',
-          layerKey: 'WSCLC',
+          layerName: "污水处理厂",
+          layerKey: "WSCLC",
           layerIcon: null,
           layerVisible: false,
           data: yanAnWSCLC,
@@ -338,40 +342,40 @@
       ],
     },
     {
-      title: '感知设备',
+      title: "感知设备",
       Show: true,
       children: [
         {
-          layerName: '内涝易涝点',
-          layerKey: 'yiLaoPoint',
+          layerName: "内涝易涝点",
+          layerKey: "yiLaoPoint",
           layerIcon: null,
           layerVisible: false,
           data: yanAnYiLao,
         },
         {
-          layerName: '内涝风险点',
-          layerKey: 'fengXianPoint',
+          layerName: "内涝风险点",
+          layerKey: "fengXianPoint",
           layerIcon: null,
           layerVisible: false,
           data: yanAnFengXian,
         },
         {
-          layerName: '排水管网监测',
-          layerKey: 'pipeSupervise',
+          layerName: "排水管网监测",
+          layerKey: "pipeSupervise",
           layerIcon: null,
           layerVisible: false,
           data: yanAnPipeSupervise,
         },
         {
-          layerName: '排水排口监测',
-          layerKey: 'PKsupervise',
+          layerName: "排水排口监测",
+          layerKey: "PKsupervise",
           layerIcon: null,
           layerVisible: false,
           data: yanAnPKSupervise,
         },
         {
-          layerName: '视频监测',
-          layerKey: 'video',
+          layerName: "视频监测",
+          layerKey: "video",
           layerIcon: null,
           layerVisible: false,
           data: yanAnVideo,
@@ -386,98 +390,111 @@
     .concat(AllData.LayerData[2].children)
     .concat(AllData.LayerData[3].children)
     .concat(AllData.LayerData[4].children);
-  initeLegend.forEach(element => {
+  initeLegend.forEach((element) => {
     element.layername = element.layerKey;
   });
-  bus.emit('setLegendData', initeLegend);
+  bus.emit("setLegendData", initeLegend);
 });
 const props = defineProps({
   ShowTuCheng: false,
+  showPanel: false,
 });
 
 watch(
   () => props.ShowTuCheng,
   (newValue, oldValue) => {
-    console.log('ShowTuCheng变化了', newValue, oldValue);
+    console.log("ShowTuCheng变化了", newValue, oldValue);
   },
   { immediate: true, deep: true }
 );
 
-const layerClick = async item2 => {
+const layerClick = async (item2) => {
   item2.layerVisible = !item2.layerVisible;
   item2.isCheck = item2.layerVisible;
-  console.info(`点击了名称为${item2.layerName},图层ID为${item2.layerKey}的图层,点击后的图层展示情况为${item2.layerVisible}`);
-  bus.emit('setLayerVisible', { layername: item2.layerKey, isCheck: item2.isCheck });
-  if (item2.layerKey == 'whiteMap') {
-    AllData.LayerData[0]['children'][0].layerVisible = false;
-    AllData.LayerData[0]['children'][2].layerVisible = false;
-    let { data } = await axios.get('/static/libs/mapbox/style/customs/whiteMapStyle.json');
+  console.info(
+    `点击了名称为${item2.layerName},图层ID为${item2.layerKey}的图层,点击后的图层展示情况为${item2.layerVisible}`
+  );
+  bus.emit("setLayerVisible", { layername: item2.layerKey, isCheck: item2.isCheck });
+  if (item2.layerKey == "whiteMap") {
+    AllData.LayerData[0]["children"][0].layerVisible = false;
+    AllData.LayerData[0]["children"][2].layerVisible = false;
+    let { data } = await axios.get(
+      "/static/libs/mapbox/style/customs/whiteMapStyle.json"
+    );
     let newMapStyle;
     let oldMapStyle = newfiberMapbox.map.getStyle();
     let oldIds = [];
-    oldMapStyle.layers.forEach(layer => {
+    oldMapStyle.layers.forEach((layer) => {
       oldIds.push(layer.id);
     });
-    let newIds = data.layers.map(i => i.id);
-    oldIds.forEach(id => {
+    let newIds = data.layers.map((i) => i.id);
+    oldIds.forEach((id) => {
       let layer = data.layers[newIds.indexOf(id)];
       if (!layer) return;
-      Object.keys(layer.layout || {}).forEach(key => newfiberMapbox.map.setLayoutProperty(id, key, layer.layout[key]));
-      Object.keys(layer.paint || {}).forEach(key => newfiberMapbox.map.setPaintProperty(id, key, layer.paint[key]));
+      Object.keys(layer.layout || {}).forEach((key) =>
+        newfiberMapbox.map.setLayoutProperty(id, key, layer.layout[key])
+      );
+      Object.keys(layer.paint || {}).forEach((key) =>
+        newfiberMapbox.map.setPaintProperty(id, key, layer.paint[key])
+      );
     });
-    newfiberMapbox.map.setLayoutProperty('newfiber-XYZLayer', 'visibility', 'none');
+    newfiberMapbox.map.setLayoutProperty("newfiber-XYZLayer", "visibility", "none");
   }
-  if (item2.layerKey == 'blackMap') {
-    AllData.LayerData[0]['children'][1].layerVisible = false;
-    AllData.LayerData[0]['children'][2].layerVisible = false;
-    let { data } = await axios.get('/static/libs/mapbox/style/customs/night-style.json');
+  if (item2.layerKey == "blackMap") {
+    AllData.LayerData[0]["children"][1].layerVisible = false;
+    AllData.LayerData[0]["children"][2].layerVisible = false;
+    let { data } = await axios.get("/static/libs/mapbox/style/customs/night-style.json");
     let newMapStyle;
     let oldMapStyle = newfiberMapbox.map.getStyle();
     let oldIds = [];
-    oldMapStyle.layers.forEach(layer => {
+    oldMapStyle.layers.forEach((layer) => {
       oldIds.push(layer.id);
     });
-    let newIds = data.layers.map(i => i.id);
-    oldIds.forEach(id => {
+    let newIds = data.layers.map((i) => i.id);
+    oldIds.forEach((id) => {
       let layer = data.layers[newIds.indexOf(id)];
       if (!layer) return;
-      Object.keys(layer.layout || {}).forEach(key => newfiberMapbox.map.setLayoutProperty(id, key, layer.layout[key]));
-      Object.keys(layer.paint || {}).forEach(key => newfiberMapbox.map.setPaintProperty(id, key, layer.paint[key]));
+      Object.keys(layer.layout || {}).forEach((key) =>
+        newfiberMapbox.map.setLayoutProperty(id, key, layer.layout[key])
+      );
+      Object.keys(layer.paint || {}).forEach((key) =>
+        newfiberMapbox.map.setPaintProperty(id, key, layer.paint[key])
+      );
     });
-    newfiberMapbox.map.setLayoutProperty('newfiber-XYZLayer', 'visibility', 'none');
+    newfiberMapbox.map.setLayoutProperty("newfiber-XYZLayer", "visibility", "none");
   }
-  if (item2.layerKey == 'imageMap') {
-    AllData.LayerData[0]['children'][0].layerVisible = false;
-    AllData.LayerData[0]['children'][1].layerVisible = false;
-    newfiberMapbox.map.setLayoutProperty('newfiber-XYZLayer', 'visibility', 'visible');
-    newfiberMapbox.map.moveLayer('newfiber-XYZLayer', 'buildingLayer');
+  if (item2.layerKey == "imageMap") {
+    AllData.LayerData[0]["children"][0].layerVisible = false;
+    AllData.LayerData[0]["children"][1].layerVisible = false;
+    newfiberMapbox.map.setLayoutProperty("newfiber-XYZLayer", "visibility", "visible");
+    newfiberMapbox.map.moveLayer("newfiber-XYZLayer", "buildingLayer");
   }
   if (item2.areaData) {
     if (item2.isCheck) {
       mapBoxVectorLayer.addGeojsonPolygonWithLabel(item2.layerKey, item2.areaData);
     } else {
-      mapBoxVectorLayer.removeByIds([item2.layerKey, item2.layerKey + '_label']);
+      mapBoxVectorLayer.removeByIds([item2.layerKey, item2.layerKey + "_label"]);
     }
   }
-  if (item2.layerKey == 'buildingLayer') {
+  if (item2.layerKey == "buildingLayer") {
     if (item2.isCheck) {
-      newfiberMapbox.map.setLayoutProperty('buildingLayer', 'visibility', 'visible');
+      newfiberMapbox.map.setLayoutProperty("buildingLayer", "visibility", "visible");
     } else {
-      newfiberMapbox.map.setLayoutProperty('buildingLayer', 'visibility', 'none');
+      newfiberMapbox.map.setLayoutProperty("buildingLayer", "visibility", "none");
     }
   }
   if (item2.lineWithLabel) {
     if (item2.isCheck) {
       mapBoxVectorLayer.addGeojsonLineWithLabel(item2.layerKey, item2.lineWithLabel);
-      if (item2.layerKey == 'fangHongWater') {
+      if (item2.layerKey == "fangHongWater") {
         let layer = new mapboxL7.LineLayer({
-          name: 'fangHongWater',
+          name: "fangHongWater",
         })
           .source(item2.lineWithLabel)
           .size(3)
-          .shape('line')
-          .texture('arrow')
-          .color('rgba(243, 26, 237,1)')
+          .shape("line")
+          .texture("arrow")
+          .color("rgba(243, 26, 237,1)")
           .animate({
             interval: 2, // 间隔
             duration: 3, // 持续时间，延时
@@ -488,29 +505,29 @@
             lineTexture: true, // 开启线的贴图功能
             iconStep: 200, // 设置贴图纹理的间距
             borderWidth: 0.4, // 默认文 0，最大有效值为 0.5
-            borderColor: '#fff', // 默认为 #ccc
+            borderColor: "#fff", // 默认为 #ccc
           });
         newfiberMapbox.addLayer(layer);
       }
     } else {
-      mapBoxVectorLayer.removeByIds([item2.layerKey, item2.layerKey + '_label']);
-      if (newfiberMapbox.getLayerByName('fangHongWater')) {
-        newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName('fangHongWater'));
+      mapBoxVectorLayer.removeByIds([item2.layerKey, item2.layerKey + "_label"]);
+      if (newfiberMapbox.getLayerByName("fangHongWater")) {
+        newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName("fangHongWater"));
       }
     }
   }
-  if (item2.layerKey == 'road') {
+  if (item2.layerKey == "road") {
     if (item2.isCheck) {
-      if (newfiberMapbox.getLayerByName('dynamicRoad')) {
-        newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName('dynamicRoad'));
+      if (newfiberMapbox.getLayerByName("dynamicRoad")) {
+        newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName("dynamicRoad"));
       }
       let layer = new mapboxL7.LineLayer({
-        name: 'dynamicRoad',
+        name: "dynamicRoad",
       })
         .source(item2.dynamicLineData)
         .size(1.3)
-        .shape('line')
-        .color('rgb(184, 184, 184)')
+        .shape("line")
+        .color("rgb(184, 184, 184)")
         .animate({
           interval: 1, // 间隔
           duration: 1.5, // 持续时间，延时
@@ -521,22 +538,22 @@
         });
       newfiberMapbox.addLayer(layer);
     } else {
-      newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName('dynamicRoad'));
+      newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName("dynamicRoad"));
     }
   }
-  if (item2.layerKey == 'waterLake') {
+  if (item2.layerKey == "waterLake") {
     if (item2.isCheck) {
-      if (newfiberMapbox.getLayerByName('waterLake')) {
-        newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName('waterLake'));
+      if (newfiberMapbox.getLayerByName("waterLake")) {
+        newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName("waterLake"));
       }
       let layer = new mapboxL7.LineLayer({
-        name: 'waterLake',
+        name: "waterLake",
       })
         .source(item2.dynamicLineData)
         .size(4)
-        .shape('line')
-        .texture('arrow')
-        .color('aqua')
+        .shape("line")
+        .texture("arrow")
+        .color("aqua")
         .animate({
           interval: 2, // 间隔
           duration: 3, // 持续时间，延时
@@ -547,29 +564,29 @@
           lineTexture: true, // 开启线的贴图功能
           iconStep: 200, // 设置贴图纹理的间距
           borderWidth: 0.4, // 默认文 0，最大有效值为 0.5
-          borderColor: '#fff', // 默认为 #ccc
+          borderColor: "#fff", // 默认为 #ccc
         });
       newfiberMapbox.addLayer(layer);
     } else {
-      newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName('waterLake'));
+      newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName("waterLake"));
     }
   }
-  if (item2.layerKey == 'centerCity') {
+  if (item2.layerKey == "centerCity") {
     if (item2.isCheck) {
-      mapBoxVectorLayer.addGeojsonLine('centerCity', item2.dynamicLineData, 4, 1, 0.5);
+      mapBoxVectorLayer.addGeojsonLine("centerCity", item2.dynamicLineData, 4, 1, 0.5);
     } else {
-      mapBoxVectorLayer.removeByIds(['centerCity']);
+      mapBoxVectorLayer.removeByIds(["centerCity"]);
     }
   }
 };
 onMounted(() => {
   // 清除所有的图层选中
-  bus.on('clearAllLayer', () => {
-    AllData.LayerData.forEach(data => {
-      data.children.map(item => {
+  bus.on("clearAllLayer", () => {
+    AllData.LayerData.forEach((data) => {
+      data.children.map((item) => {
         // item.layerVisible = true;
         // 做优化,全局为True,再执行隐藏工作,页面调用api太多了,这里应该只将展示的图层进行取消操作就行
-        item.layerVisible ? layerClick(item) : '';
+        item.layerVisible ? layerClick(item) : "";
       });
     });
   });
@@ -577,17 +594,17 @@
   /**控制图层的显示
    *@param LayerArraya:需要打开的图层名称,示例:["路网","中心城区"]
    */
-  bus.on('SetLayerShow', LayerArraya => {
-    AllData.LayerData.forEach(data => {
-      data.children.map(item => {
-        LayerArraya.includes(item.layerName) ? layerClick(item) : '';
+  bus.on("SetLayerShow", (LayerArraya) => {
+    AllData.LayerData.forEach((data) => {
+      data.children.map((item) => {
+        LayerArraya.includes(item.layerName) ? layerClick(item) : "";
       });
     });
   });
 });
 onBeforeUnmount(() => {
-  bus.off('clearAllLayer');
-  bus.off('SetLayerShow');
+  bus.off("clearAllLayer");
+  bus.off("SetLayerShow");
 });
 </script>
 
@@ -598,7 +615,7 @@
   position: absolute;
   top: 150px;
   right: 476px;
-  background: url('@/assets/images/Sponge_screen/TuChengBG.png') no-repeat center;
+  background: url("@/assets/images/Sponge_screen/TuChengBG.png") no-repeat center;
   background-size: contain;
   box-sizing: border-box;
   padding: 25px 0px;
@@ -614,7 +631,7 @@
       width: 190px;
       height: 25px;
       line-height: 25px;
-      background-image: url('@/assets/images/Sponge_screen/TuChengFenZuBG.png'),
+      background-image: url("@/assets/images/Sponge_screen/TuChengFenZuBG.png"),
         linear-gradient(to right, #1c899600, #1c8996, #1c899600);
       background-repeat: no-repeat;
       background-position: center;
@@ -672,6 +689,14 @@
     }
   }
 }
+.TuChengImgTrue {
+  transform: translateX(460px);
+  transition: all 1s ease;
+}
+.TuChengImgFalse {
+  transform: translateX(0px);
+  transition: all 1s ease;
+}
 // 动画
 /*
   进入和离开动画可以使用不同
diff --git a/src/views/oneMap/OverallOverview/LeftBox.vue b/src/views/oneMap/OverallOverview/LeftBox.vue
index e26dce0..70aad73 100644
--- a/src/views/oneMap/OverallOverview/LeftBox.vue
+++ b/src/views/oneMap/OverallOverview/LeftBox.vue
@@ -90,7 +90,13 @@
         <span class="tableHeaderList tableList4">监测时间</span>
         <span class="tableHeaderList tableList5">状态</span>
       </div>
-      <Vue3SeamlessScroll :list="FXJCData" :singleHeight="60" :singleWaitTime="1500" :hover="true" class="tableBody">
+      <Vue3SeamlessScroll
+        :list="FXJCData"
+        :singleHeight="60"
+        :singleWaitTime="1500"
+        :hover="true"
+        class="tableBody"
+      >
         <div class="tableBodyList" v-for="item in FXJCData">
           <span class="tableBodyList_span1" :title="item.name">{{ item.name }}</span>
           <span class="tableBodyList_span2" :title="item.jcdx">{{ item.jcdx }} </span>
@@ -130,75 +136,75 @@
 ]);
 const FXJCData = ref([
   {
-    name: '延安中学',
-    jcdx: '燃气管网',
-    jczb: '甲烷浓度4.4%VOL',
-    jcsj: '2024/10/23 11:54',
-    zk: '正常',
+    name: "延安中学",
+    jcdx: "燃气管网",
+    jczb: "甲烷浓度4.4%VOL",
+    jcsj: "2024/10/23 11:54",
+    zk: "正常",
   },
   {
-    name: '延安大学附属医院',
-    jcdx: '燃气管网',
-    jczb: '甲烷浓度4%VOL',
-    jcsj: '2024/10/23 12:14',
-    zk: '正常',
+    name: "延安大学附属医院",
+    jcdx: "燃气管网",
+    jczb: "甲烷浓度4%VOL",
+    jcsj: "2024/10/23 12:14",
+    zk: "正常",
   },
   {
-    name: '王家坪大桥',
-    jcdx: '桥梁结构',
-    jczb: '倾角+1°',
-    jcsj: '2024/10/23 12:24',
-    zk: '正常',
+    name: "王家坪大桥",
+    jcdx: "桥梁结构",
+    jczb: "倾角+1°",
+    jcsj: "2024/10/23 12:24",
+    zk: "正常",
   },
   {
-    name: '王家坪大桥',
-    jcdx: '桥梁结构',
-    jczb: '位移12mm',
-    jcsj: '2024/10/23 13:13',
-    zk: '正常',
+    name: "王家坪大桥",
+    jcdx: "桥梁结构",
+    jczb: "位移12mm",
+    jcsj: "2024/10/23 13:13",
+    zk: "正常",
   },
   {
-    name: '王家坪大桥',
-    jcdx: '桥梁外部荷载',
-    jczb: '均布荷载6.4kn/m',
-    jcsj: '2024/10/23 13:43',
-    zk: '正常',
+    name: "王家坪大桥",
+    jcdx: "桥梁外部荷载",
+    jczb: "均布荷载6.4kn/m",
+    jcsj: "2024/10/23 13:43",
+    zk: "正常",
   },
   {
-    name: '王家坪大桥',
-    jcdx: '桥梁气象环境',
-    jczb: '风速3.2m/s',
-    jcsj: '2024/10/23 14:03',
-    zk: '正常',
+    name: "王家坪大桥",
+    jcdx: "桥梁气象环境",
+    jczb: "风速3.2m/s",
+    jcsj: "2024/10/23 14:03",
+    zk: "正常",
   },
   {
-    name: '杨家岭隧道',
-    jcdx: '隧道结构',
-    jczb: '裂缝宽度0.12mm',
-    jcsj: '2024/10/23 14:05',
-    zk: '正常',
+    name: "杨家岭隧道",
+    jcdx: "隧道结构",
+    jczb: "裂缝宽度0.12mm",
+    jcsj: "2024/10/23 14:05",
+    zk: "正常",
   },
   {
-    name: '杨家岭隧道',
-    jcdx: '隧道结构',
-    jczb: '静应变+10με',
-    jcsj: '2024/10/23 14:25',
-    zk: '正常',
+    name: "杨家岭隧道",
+    jcdx: "隧道结构",
+    jczb: "静应变+10με",
+    jcsj: "2024/10/23 14:25",
+    zk: "正常",
   },
 
   {
-    name: '王家坪旧址门口',
-    jcdx: '积水液位',
-    jczb: '水深0m',
-    jcsj: '2024/10/23 15:21',
-    zk: '正常',
+    name: "王家坪旧址门口",
+    jcdx: "积水液位",
+    jczb: "水深0m",
+    jcsj: "2024/10/23 15:21",
+    zk: "正常",
   },
   {
-    name: '大砭沟与北大街交叉口',
-    jcdx: '积水液位',
-    jczb: '水深0m',
-    jcsj: '2024/10/23 15:25',
-    zk: '正常',
+    name: "大砭沟与北大街交叉口",
+    jcdx: "积水液位",
+    jczb: "水深0m",
+    jcsj: "2024/10/23 15:25",
+    zk: "正常",
   },
 ]);
 const yxjcname = ref("7天");
@@ -327,6 +333,7 @@
         text-align: center;
         margin-top: 5px;
         margin-left: 10px;
+        font-size: 16px;
       }
       .activedright {
         border: 1px solid #2cfce9;
@@ -387,7 +394,7 @@
             .gw {
               font-family: Source Han Sans CN;
               font-weight: bold;
-              font-size: 14px;
+              font-size: 16px;
               color: #85d2d4;
               padding-left: 5px;
               // background: yellow;
@@ -404,10 +411,10 @@
             }
             .gl {
               font-family: Source Han Sans CN;
-              font-weight: bold;
-              font-size: 14px;
-              color: #34909f;
               padding-left: 10px;
+              font-weight: bold;
+              font-size: 16px;
+              color: #85d2d4;
             }
           }
         }
@@ -462,7 +469,7 @@
         .head-right {
           margin-top: 2px;
           cursor: pointer;
-          font-size: 14px;
+          font-size: 16px;
           color: #ffffff;
           display: flex;
           line-height: 18px;
diff --git a/src/views/oneMap/OverallOverview/RightBox.vue b/src/views/oneMap/OverallOverview/RightBox.vue
index 0a70630..f9477ed 100644
--- a/src/views/oneMap/OverallOverview/RightBox.vue
+++ b/src/views/oneMap/OverallOverview/RightBox.vue
@@ -67,7 +67,7 @@
                 font-family: Source Han Sans CN;
                 font-weight: bold;
                 font-size: 13px;
-                color: #34909f;
+                color: #12f9ff;
               "
             >
               {{ item.dw }}
diff --git a/src/views/oneMap/SmartDrainage/PsLeftBox.vue b/src/views/oneMap/SmartDrainage/PsLeftBox.vue
index c06a241..fd6283a 100644
--- a/src/views/oneMap/SmartDrainage/PsLeftBox.vue
+++ b/src/views/oneMap/SmartDrainage/PsLeftBox.vue
@@ -21,7 +21,14 @@
             <div class="upperNum">
               <div
                 class="oflower"
-                :style="{ color: item.name == '易涝点' ? '#a2fff8FF' : item.name == '风险点' ? '#faecabFF' : '#92edbfFF' }"
+                :style="{
+                  color:
+                    item.name == '易涝点'
+                      ? '#a2fff8FF'
+                      : item.name == '风险点'
+                      ? '#faecabFF'
+                      : '#92edbfFF',
+                }"
               >
                 {{ item.num }}
               </div>
@@ -41,7 +48,13 @@
           <span style="width: 45%; padding-left: 30px">{{ partName }}</span>
           <span style="width: 45%; padding-left: 130px">位置</span>
         </div>
-        <Vue3SeamlessScroll :list="dataList" :singleHeight="36" :singleWaitTime="1500" :hover="true" class="scrollCont">
+        <Vue3SeamlessScroll
+          :list="dataList"
+          :singleHeight="36"
+          :singleWaitTime="1500"
+          :hover="true"
+          class="scrollCont"
+        >
           <div class="scrollCont">
             <li
               v-for="(item, index) in dataList"
@@ -98,40 +111,40 @@
   </div>
 </template>
 <script setup>
-import { ref, reactive, toRefs, onMounted, onBeforeUnmount } from 'vue';
-import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
-import mapbox from '@/views/oneMap/map/mapboxInTable.vue';
-import fxd from '@/assets/images/zhps/fxd.png'; //风险点
-import qxgw from '@/assets/images/zhps/qxgw.png'; //缺陷管网
-import yld from '@/assets/images/zhps/yld.png'; //易涝点
+import { ref, reactive, toRefs, onMounted, onBeforeUnmount } from "vue";
+import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
+import mapbox from "@/views/oneMap/map/mapboxInTable.vue";
+import fxd from "@/assets/images/zhps/fxd.png"; //风险点
+import qxgw from "@/assets/images/zhps/qxgw.png"; //缺陷管网
+import yld from "@/assets/images/zhps/yld.png"; //易涝点
 
-import qzfk_3d from './qzfk_3d.vue'; //
-import ChartRy from './chartRy.vue';
-import bus from '@/bus';
+import qzfk_3d from "./qzfk_3d.vue"; //
+import ChartRy from "./chartRy.vue";
+import bus from "@/bus";
 const AllData = reactive({});
 const ryData = ref({});
-const ryRefresh = ref('');
+const ryRefresh = ref("");
 const tableData = ref([
-  { name: '易涝点', num: '7', Imgurl: yld, dw: '处' },
-  { name: '风险点', num: '9', Imgurl: fxd, dw: '处' },
-  { name: '缺陷管网', num: '6.1', Imgurl: qxgw, dw: 'km' },
+  { name: "易涝点", num: "7", Imgurl: yld, dw: "处" },
+  { name: "风险点", num: "9", Imgurl: fxd, dw: "处" },
+  { name: "缺陷管网", num: "6.1", Imgurl: qxgw, dw: "km" },
 ]);
 const showRainList = ref([]);
-const Pointname = ref('');
+const Pointname = ref("");
 const dataList = ref([
-  { num: '1', yls: '永安路', wz: '百米大道永安路' },
-  { num: '2', yls: '永昌路北口', wz: '双拥大道永昌路' },
-  { num: '3', yls: '桥儿沟隧道', wz: '双拥大道桥儿沟' },
-  { num: '4', yls: '原水果市场', wz: '双拥大道东十里铺' },
-  { num: '5', yls: '王家坪旧址门口', wz: '圣地路' },
-  { num: '6', yls: '桥儿沟隧道', wz: '双拥大道桥儿沟' },
-  { num: '7', yls: '原水果市场', wz: '双拥大道东十里铺' },
+  { num: "1", yls: "永安路", wz: "百米大道永安路" },
+  { num: "2", yls: "永昌路北口", wz: "双拥大道永昌路" },
+  { num: "3", yls: "桥儿沟隧道", wz: "双拥大道桥儿沟" },
+  { num: "4", yls: "原水果市场", wz: "双拥大道东十里铺" },
+  { num: "5", yls: "王家坪旧址门口", wz: "圣地路" },
+  { num: "6", yls: "桥儿沟隧道", wz: "双拥大道桥儿沟" },
+  { num: "7", yls: "原水果市场", wz: "双拥大道东十里铺" },
 ]);
 const images = [
-  'https://server1.wh-nf.cn:6082/tif/0819_8.tif',
-  'https://server1.wh-nf.cn:6082/tif/0819_9.tif',
-  'https://server1.wh-nf.cn:6082/tif/0819_10.tif',
-  'https://server1.wh-nf.cn:6082/tif/0819_11.tif',
+  "https://server1.wh-nf.cn:6082/tif/0819_8.tif",
+  "https://server1.wh-nf.cn:6082/tif/0819_9.tif",
+  "https://server1.wh-nf.cn:6082/tif/0819_10.tif",
+  "https://server1.wh-nf.cn:6082/tif/0819_11.tif",
 ];
 // 普查现状点击事件
 function Pointclick(val) {
@@ -139,99 +152,110 @@
 }
 
 const yearList = ref([
-  { name: '1小时', value: 1 },
-  { name: '3小时', value: 2 },
-  { name: '12小时', value: 3 },
-  { name: '24小时', value: 4 },
+  { name: "1小时", value: 1 },
+  { name: "3小时", value: 2 },
+  { name: "12小时", value: 3 },
+  { name: "24小时", value: 4 },
 ]);
-const activedname = ref('1小时');
+const activedname = ref("1小时");
 // 时间点击事件
 function yearclick(val, index) {
   activedname.value = val.name;
 
-  showRainList.value = index == 0 ? ranLeng[0] : index == 1 ? ranLeng[1] : index == 2 ? ranLeng[2] : ranLeng[3];
+  showRainList.value =
+    index == 0
+      ? ranLeng[0]
+      : index == 1
+      ? ranLeng[1]
+      : index == 2
+      ? ranLeng[2]
+      : ranLeng[3];
 
-  console.log('index', index);
+  console.log("index", index);
   initRainImage([images[index]]);
 }
 const timeActive = ref(0);
 const ranLeng = [
   [
-    { value: '0-0.2', color: 'rgba(7, 213, 118, 0)' },
-    { value: '0.2-5', color: 'rgb(38, 129, 240,1)' },
-    { value: '5-16', color: 'rgba(222,230,0,1)' },
-    { value: '16-25', color: 'rgba(255,184,15,1)' },
-    { value: '>25', color: 'rgb(255, 26, 26,1)' },
+    { value: "0-0.2", color: "rgba(7, 213, 118, 0)" },
+    { value: "0.2-5", color: "rgb(38, 129, 240,1)" },
+    { value: "5-16", color: "rgba(222,230,0,1)" },
+    { value: "16-25", color: "rgba(255,184,15,1)" },
+    { value: ">25", color: "rgb(255, 26, 26,1)" },
   ],
   [
-    { value: '0-5', color: 'rgba(7, 213, 118, 0)' },
-    { value: '5-15', color: 'rgba(7, 213, 118, 1)' },
-    { value: '15-30', color: 'rgba(38, 129, 240,1)' },
-    { value: '30-70', color: 'rgba(247, 223, 56, 1)' },
-    { value: '70-140', color: 'rgba(230, 85, 41, 1)' },
-    { value: '>140', color: 'rgba(255, 26, 26, 1)' },
+    { value: "0-5", color: "rgba(7, 213, 118, 0)" },
+    { value: "5-15", color: "rgba(7, 213, 118, 1)" },
+    { value: "15-30", color: "rgba(38, 129, 240,1)" },
+    { value: "30-70", color: "rgba(247, 223, 56, 1)" },
+    { value: "70-140", color: "rgba(230, 85, 41, 1)" },
+    { value: ">140", color: "rgba(255, 26, 26, 1)" },
   ],
   [
-    { value: '0-5', color: 'rgba(7, 213, 118, 0)' },
-    { value: '5-15', color: 'rgba(7, 213, 118, 1)' },
-    { value: '15-30', color: 'rgba(38, 129, 240,1)' },
-    { value: '30-70', color: 'rgba(247, 223, 56, 1)' },
-    { value: '70-140', color: 'rgba(230, 85, 41, 1)' },
-    { value: '>140', color: 'rgba(255, 26, 26, 1)' },
+    { value: "0-5", color: "rgba(7, 213, 118, 0)" },
+    { value: "5-15", color: "rgba(7, 213, 118, 1)" },
+    { value: "15-30", color: "rgba(38, 129, 240,1)" },
+    { value: "30-70", color: "rgba(247, 223, 56, 1)" },
+    { value: "70-140", color: "rgba(230, 85, 41, 1)" },
+    { value: ">140", color: "rgba(255, 26, 26, 1)" },
   ],
   [
-    { value: '0-10', color: 'rgba(7, 213, 118, 0)' },
-    { value: '10-25', color: 'rgba(7, 213, 118, 1)' },
-    { value: '25-50', color: 'rgba(38, 129, 240,1)' },
-    { value: '50-100', color: 'rgba(247, 223, 56, 1)' },
-    { value: '100-250', color: 'rgba(230, 85, 41, 1)' },
-    { value: '>250', color: 'rgba(255, 26, 26, 1)' },
+    { value: "0-10", color: "rgba(7, 213, 118, 0)" },
+    { value: "10-25", color: "rgba(7, 213, 118, 1)" },
+    { value: "25-50", color: "rgba(38, 129, 240,1)" },
+    { value: "50-100", color: "rgba(247, 223, 56, 1)" },
+    { value: "100-250", color: "rgba(230, 85, 41, 1)" },
+    { value: ">250", color: "rgba(255, 26, 26, 1)" },
   ],
 ];
 
-const partName = ref('易涝点');
+const partName = ref("易涝点");
 // 普查切换
 function partClick(val) {
   partName.value = val.name;
-  if (partName.value == '风险点') {
-    bus.emit('setLayerVisible', { layername: 'fengXianPoint', isCheck: true });
-    bus.emit('setLayerVisible', { layername: 'yiLaoPoint', isCheck: false });
+  if (partName.value == "风险点") {
+    bus.emit("setLayerVisible", { layername: "fengXianPoint", isCheck: true });
+    bus.emit("setLayerVisible", { layername: "yiLaoPoint", isCheck: false });
     newfiberMapbox.map.easeTo({
       center: [109.488, 36.596],
       zoom: 13,
     });
     dataList.value = [
-      { num: '1', yls: '长青路石油小', wz: '石油小区后门' },
-      { num: '2', yls: '长青路纺织花园车', wz: '太阳鸟健身房' },
-      { num: '3', yls: '凯泽世纪花园', wz: '凯泽世纪花园' },
-      { num: '4', yls: '七里铺街 ', wz: '勘探公司' },
-      { num: '5', yls: '南关街大礼堂', wz: '大礼堂' },
-      { num: '6', yls: '柳林隧道博城向柳林方向引桥入口', wz: '柳林隧道博城向柳林方向引桥入口' },
-      { num: '7', yls: '杨家湾超市门前', wz: '杨家湾路延大萃园校园公寓对面' },
-      { num: '8', yls: '马家湾博城至培植中学', wz: '博城至培植中学门前' },
-      { num: '9', yls: '百米大道延安小学十字', wz: '百米大道延安小学十字' },
+      { num: "1", yls: "长青路石油小", wz: "石油小区后门" },
+      { num: "2", yls: "长青路纺织花园车", wz: "太阳鸟健身房" },
+      { num: "3", yls: "凯泽世纪花园", wz: "凯泽世纪花园" },
+      { num: "4", yls: "七里铺街 ", wz: "勘探公司" },
+      { num: "5", yls: "南关街大礼堂", wz: "大礼堂" },
+      {
+        num: "6",
+        yls: "柳林隧道博城向柳林方向引桥入口",
+        wz: "柳林隧道博城向柳林方向引桥入口",
+      },
+      { num: "7", yls: "杨家湾超市门前", wz: "杨家湾路延大萃园校园公寓对面" },
+      { num: "8", yls: "马家湾博城至培植中学", wz: "博城至培植中学门前" },
+      { num: "9", yls: "百米大道延安小学十字", wz: "百米大道延安小学十字" },
     ];
-  } else if (partName.value == '易涝点') {
-    bus.emit('setLayerVisible', { layername: 'fengXianPoint', isCheck: false });
-    bus.emit('setLayerVisible', { layername: 'yiLaoPoint', isCheck: true });
+  } else if (partName.value == "易涝点") {
+    bus.emit("setLayerVisible", { layername: "fengXianPoint", isCheck: false });
+    bus.emit("setLayerVisible", { layername: "yiLaoPoint", isCheck: true });
     newfiberMapbox.map.easeTo({
       center: [109.488, 36.596],
       zoom: 13,
     });
     dataList.value = [
-      { num: '1', yls: '永安路', wz: '百米大道永安路' },
-      { num: '2', yls: '永昌路北口', wz: '双拥大道永昌路' },
-      { num: '3', yls: '桥儿沟隧道', wz: '双拥大道桥儿沟' },
-      { num: '4', yls: '原水果市场', wz: '双拥大道东十里铺' },
-      { num: '5', yls: '王家坪旧址门口', wz: '圣地路' },
-      { num: '6', yls: '桥儿沟隧道', wz: '双拥大道桥儿沟' },
-      { num: '7', yls: '原水果市场', wz: '双拥大道东十里铺' },
-      { num: '8', yls: '原水果市场', wz: '双拥大道东十里铺' },
-      { num: '9', yls: '王家坪旧址门口', wz: '圣地路' },
+      { num: "1", yls: "永安路", wz: "百米大道永安路" },
+      { num: "2", yls: "永昌路北口", wz: "双拥大道永昌路" },
+      { num: "3", yls: "桥儿沟隧道", wz: "双拥大道桥儿沟" },
+      { num: "4", yls: "原水果市场", wz: "双拥大道东十里铺" },
+      { num: "5", yls: "王家坪旧址门口", wz: "圣地路" },
+      { num: "6", yls: "桥儿沟隧道", wz: "双拥大道桥儿沟" },
+      { num: "7", yls: "原水果市场", wz: "双拥大道东十里铺" },
+      { num: "8", yls: "原水果市场", wz: "双拥大道东十里铺" },
+      { num: "9", yls: "王家坪旧址门口", wz: "圣地路" },
     ];
   } else {
-    bus.emit('setLayerVisible', { layername: 'fengXianPoint', isCheck: false });
-    bus.emit('setLayerVisible', { layername: 'yiLaoPoint', isCheck: false });
+    bus.emit("setLayerVisible", { layername: "fengXianPoint", isCheck: false });
+    bus.emit("setLayerVisible", { layername: "yiLaoPoint", isCheck: false });
     newfiberMapbox.map.easeTo({
       center: [109.488, 36.596],
       zoom: 13,
@@ -247,15 +271,15 @@
   return file;
 }
 
-const createCanvas = id => {
-  let canvas = document.createElement('canvas');
-  canvas.id = 'canvas' + id;
-  canvas.style.height = '90%';
-  canvas.style.width = '90%';
-  canvas.style.position = 'relative';
-  canvas.style.top = '5px';
+const createCanvas = (id) => {
+  let canvas = document.createElement("canvas");
+  canvas.id = "canvas" + id;
+  canvas.style.height = "90%";
+  canvas.style.width = "90%";
+  canvas.style.position = "relative";
+  canvas.style.top = "5px";
   //canvas.style.display = 'none';
-  document.getElementById('rainend').append(canvas);
+  document.getElementById("rainend").append(canvas);
   return canvas;
 };
 
@@ -270,7 +294,7 @@
       width: tifImg.getWidth(),
       height: tifImg.getHeight(),
       domain: [0, 256],
-      colorScale: 'mycolorscale',
+      colorScale: "mycolorscale",
     }));
   plot.setData(readRasters[0], tifImg.getWidth(), tifImg.getHeight());
   plot.render();
@@ -283,51 +307,54 @@
     [bbox[2], bbox[1]],
     [bbox[0], bbox[1]],
   ];
-  if (newfiberMapbox_table.map.getLayer('canvas-layer' + i)) {
-    newfiberMapbox_table.map.removeLayer('canvas-layer' + i);
-    newfiberMapbox_table.map.removeSource('canvas-source' + i);
+  if (newfiberMapbox_table.map.getLayer("canvas-layer" + i)) {
+    newfiberMapbox_table.map.removeLayer("canvas-layer" + i);
+    newfiberMapbox_table.map.removeSource("canvas-source" + i);
   }
-  newfiberMapbox_table.map.addSource('canvas-source' + i, {
-    type: 'canvas',
+  newfiberMapbox_table.map.addSource("canvas-source" + i, {
+    type: "canvas",
     canvas: canvasId,
     coordinates: bbox,
     animate: true,
   });
 
   newfiberMapbox_table.map.addLayer({
-    id: 'canvas-layer' + i,
-    type: 'raster',
-    source: 'canvas-source' + i,
+    id: "canvas-layer" + i,
+    type: "raster",
+    source: "canvas-source" + i,
   });
-  newfiberMapbox_table.map.moveLayer('canvas-layer' + i);
+  newfiberMapbox_table.map.moveLayer("canvas-layer" + i);
 };
 
 const plotInit = (colorScale = colorScale) => {
   const minVal = colorScale[0].value;
   const maxVal = colorScale[colorScale.length - 1].value;
-  let color = colorScale.filter(i => Number(i.value) / maxVal <= 1);
-  if (color[color.length - 1].value / maxVal < 1) color.push({ value: maxVal, color: colorScale[color.length].color });
+  let color = colorScale.filter((i) => Number(i.value) / maxVal <= 1);
+  if (color[color.length - 1].value / maxVal < 1)
+    color.push({ value: maxVal, color: colorScale[color.length].color });
   plotty.addColorScale(
-    'mycolorscale',
-    color.map(i => i.color),
-    color.map(i => (i.value / maxVal).toFixed(5))
+    "mycolorscale",
+    color.map((i) => i.color),
+    color.map((i) => (i.value / maxVal).toFixed(5))
   );
 };
 
 let colorScale = [
-  { value: '0', color: 'rgba(7, 213, 118, 0)' },
-  { value: '0.1', color: 'rgba(7, 213, 118, 0)' },
-  { value: '5', color: 'rgba(7, 213, 118, 1)' },
-  { value: '15', color: 'rgba(38, 129, 240,1)' },
-  { value: '30', color: 'rgba(247, 223, 56, 1)' },
-  { value: '70', color: 'rgba(230, 85, 41, 1)' },
-  { value: '140', color: 'rgba(255, 26, 26, 1)' },
+  { value: "0", color: "rgba(7, 213, 118, 0)" },
+  { value: "0.1", color: "rgba(7, 213, 118, 0)" },
+  { value: "5", color: "rgba(7, 213, 118, 1)" },
+  { value: "15", color: "rgba(38, 129, 240,1)" },
+  { value: "30", color: "rgba(247, 223, 56, 1)" },
+  { value: "70", color: "rgba(230, 85, 41, 1)" },
+  { value: "140", color: "rgba(255, 26, 26, 1)" },
 ];
 let imageFiles = [];
 let canvas = [];
 let plot = null;
-const initRainImage = async imagesList => {
-  imageFiles = await Promise.all(imagesList.map(url => urlToFile(url, _.last(_.split(url, '/')))));
+const initRainImage = async (imagesList) => {
+  imageFiles = await Promise.all(
+    imagesList.map((url) => urlToFile(url, _.last(_.split(url, "/"))))
+  );
 
   canvas = createCanvas(0);
   plotInit(colorScale);
@@ -343,22 +370,34 @@
   // }, 1000);
 };
 
-const setRainImage = index => {
+const setRainImage = (index) => {
   var reader = new FileReader();
-  reader.onload = e => createPlot(e, canvas);
+  reader.onload = (e) => createPlot(e, canvas);
   reader.readAsArrayBuffer(imageFiles[index]);
 };
 
 // 缺陷逛网
 function getData() {
   let obj = {
-    xData: ['脱节', '接口材料脱落', '支管暗接', '异物穿入', '渗漏', '沉积', '结垢', '障碍物', '残墙与坝根', '树根', '浮渣'],
+    xData: [
+      "脱节",
+      "接口材料脱落",
+      "支管暗接",
+      "异物穿入",
+      "渗漏",
+      "沉积",
+      "结垢",
+      "障碍物",
+      "残墙与坝根",
+      "树根",
+      "浮渣",
+    ],
     data: [0.3, 0.8, 0.6, 0.4, 0.1, 0.2, 0.5, 0.7, 0.4, 0.1, 0.1],
     num: [],
   };
   let max = JSON.parse(JSON.stringify(obj.data));
   let one = max.sort((a, b) => b - a)[0];
-  max.forEach(i => {
+  max.forEach((i) => {
     obj.num.push(one);
   });
   ryData.value = obj;
@@ -371,9 +410,9 @@
   initRainImage([images[0]]);
 });
 onBeforeUnmount(() => {
-  bus.emit('setLayerVisible', { layername: 'fengXianPoint', isCheck: false });
-  bus.emit('setLayerVisible', { layername: 'yiLaoPoint', isCheck: false });
-  var canvas = document.getElementById('canvas0');
+  bus.emit("setLayerVisible", { layername: "fengXianPoint", isCheck: false });
+  bus.emit("setLayerVisible", { layername: "yiLaoPoint", isCheck: false });
+  var canvas = document.getElementById("canvas0");
   canvas.remove();
 });
 </script>
@@ -444,7 +483,7 @@
           height: 50%;
           font-family: Source Han Sans CN;
           font-weight: 400;
-          font-size: 14px;
+          font-size: 15px;
           color: #ffffff;
         }
       }
@@ -457,7 +496,11 @@
         height: 38px;
         width: 430px;
         margin: 0 auto;
-        background: linear-gradient(0deg, rgba(22, 193, 216, 0.8) 0%, rgba(0, 43, 67, 0.8) 100%);
+        background: linear-gradient(
+          0deg,
+          rgba(22, 193, 216, 0.8) 0%,
+          rgba(0, 43, 67, 0.8) 100%
+        );
         border-radius: 6px;
         border: 1px solid #15d2fd;
         display: flex;
@@ -481,7 +524,7 @@
           // justify-content: space-between;
           align-items: center;
           margin-top: 2px;
-          background: url('@/assets/images/zhps/liebiao.png') no-repeat;
+          background: url("@/assets/images/zhps/liebiao.png") no-repeat;
           background-size: 100% 100%;
           .tableBodyList_span1 {
             width: 10%;
@@ -520,7 +563,7 @@
           }
         }
         .activedright {
-          background: url('@/assets/images/zhps/lbxz.png') no-repeat;
+          background: url("@/assets/images/zhps/lbxz.png") no-repeat;
           background-size: 100% 100%;
         }
       }
@@ -557,6 +600,7 @@
         text-align: center;
         margin-top: 5px;
         margin-left: 10px;
+        font-size: 16px;
       }
       .activedright {
         border: 1px solid #2cfce9;
@@ -572,7 +616,7 @@
       .rainend {
         width: 440px;
         height: 85%;
-        background: url('@/assets/images/zhps/hsRain.png') no-repeat;
+        background: url("@/assets/images/zhps/hsRain.png") no-repeat;
         background-size: 100% 100%;
       }
       .rainLegend {
@@ -620,7 +664,7 @@
   height: 44px;
   line-height: 50px;
   width: 98%;
-  background: url('@/assets/newImgs/partBg.png') no-repeat;
+  background: url("@/assets/newImgs/partBg.png") no-repeat;
   background-size: 100% 100%;
   display: flex;
   align-items: center;
diff --git a/src/views/oneMap/SmartDrainage/PsRightBox.vue b/src/views/oneMap/SmartDrainage/PsRightBox.vue
index df3fdaf..dc78a71 100644
--- a/src/views/oneMap/SmartDrainage/PsRightBox.vue
+++ b/src/views/oneMap/SmartDrainage/PsRightBox.vue
@@ -34,7 +34,11 @@
               <span class="tableBodyList_span4">{{ item.kzsw }} </span>
               <span class="tableBodyList_span5">
                 <el-tag type="success" v-if="item.zt == '正常'">正常</el-tag>
-                <el-tag @click="showcswDalog(item)" style="cursor: pointer" type="warning" v-if="item.zt == '超控制常水位'"
+                <el-tag
+                  @click="showcswDalog(item)"
+                  style="cursor: pointer"
+                  type="warning"
+                  v-if="item.zt == '超控制常水位'"
                   >超控制常水位</el-tag
                 >
               </span>
@@ -45,24 +49,36 @@
           <div class="Titlelarge">河湖简介：延河</div>
           <div class="Contentdetails">
             延河为黄河右岸一级支流,发源于陕西省靖边县天赐湾乡周山南麓，经安塞县镰刀湾乡杨石寺村附近进人延安境内,自西北流向东南,经安塞、宝塔、延长等县(区),于延长南河沟乡凉水岸汇人黄河。延河全长286.9km,流城面积7725
-            km?,平均比降3.3%。市内河长248.5 km,市内面积7321 km?,主要支流有杏子河、坪桥川、西川河、南川河、蟠龙川等。
+            km?,平均比降3.3%。市内河长248.5 km,市内面积7321
+            km?,主要支流有杏子河、坪桥川、西川河、南川河、蟠龙川等。
           </div>
         </div>
       </div>
       <div class="leftSubTabsBox">
         <div class="tabContent" v-if="monitorname == '漫溢监测(1/29)'">
           <ul>
-            <li class="listOne curCick" v-for="(i, index) in listData" :key="index" @click="showMapDalog(i)">
+            <li
+              class="listOne curCick"
+              v-for="(i, index) in listData"
+              :key="index"
+              @click="showMapDalog(i)"
+            >
               <div class="line flex flex-align-center">
                 <div class="lable">站点名称：</div>
                 <div class="box flex flex-align-center flex-justcontent-center">
                   {{ i.siteName }}
                 </div>
-                <span :class="i.siteStatus == '在线' ? 'green' : 'rad'">{{ i.siteStatus }}</span>
+                <span
+                  class="box_Status"
+                  :class="i.siteStatus == '在线' ? 'green' : 'rad'"
+                  >{{ i.siteStatus }}</span
+                >
               </div>
               <div class="line flex flex-align-center">
                 <div class="lable">水<i></i>深：</div>
-                <div class="box flex flex-align-center flex-justcontent-center">{{ i.z || 0 }}米</div>
+                <div class="box flex flex-align-center flex-justcontent-center">
+                  {{ i.z || 0 }}米
+                </div>
               </div>
               <div class="line flex flex-align-center">
                 <div class="lable">风险分析：</div>
@@ -78,17 +94,28 @@
         </div>
         <div class="tabContent" v-if="monitorname == '积水监测(0/16)'">
           <ul>
-            <li class="listOne curCick" v-for="(i, index) in listData" :key="index" @click="JSshowMapDalog(i)">
+            <li
+              class="listOne curCick"
+              v-for="(i, index) in listData"
+              :key="index"
+              @click="JSshowMapDalog(i)"
+            >
               <div class="line flex flex-align-center">
                 <div class="lable">站点名称：</div>
                 <div class="box flex flex-align-center flex-justcontent-center">
                   {{ i.siteName }}
                 </div>
-                <span :class="i.siteStatus == '在线' ? 'green' : 'rad'">{{ i.siteStatus }}</span>
+                <span
+                  class="box_Status"
+                  :class="i.siteStatus == '在线' ? 'green' : 'rad'"
+                  >{{ i.siteStatus }}</span
+                >
               </div>
               <div class="line flex flex-align-center">
                 <div class="lable">水<i></i>深：</div>
-                <div class="box flex flex-align-center flex-justcontent-center">{{ i.z || 0 }}米</div>
+                <div class="box flex flex-align-center flex-justcontent-center">
+                  {{ i.z || 0 }}米
+                </div>
               </div>
               <div class="line flex flex-align-center">
                 <div class="lable">风险分析：</div>
@@ -117,13 +144,24 @@
         <span class="tableHeaderList tableList3">状态</span>
         <span class="tableHeaderList tableList4">操作</span>
       </div>
-      <Vue3SeamlessScroll :list="SSYJData" :singleHeight="34" :singleWaitTime="1500" :hover="true" class="tableBody">
+      <Vue3SeamlessScroll
+        :list="SSYJData"
+        :singleHeight="34"
+        :singleWaitTime="1500"
+        :hover="true"
+        class="tableBody"
+      >
         <div class="tableBodyList" v-for="item in SSYJData">
           <span class="tableBodyList_span1">{{ item.wz }}</span>
           <span class="tableBodyList_span2"> {{ item.sj }}</span>
           <span class="tableBodyList_span3">{{ item.zk }}</span>
           <span class="tableBodyList_span4">
-            <el-tag style="cursor: pointer" type="danger" v-if="item.cz == '派单'" @click="paidan(item)" size="small"
+            <el-tag
+              style="cursor: pointer"
+              type="danger"
+              v-if="item.cz == '派单'"
+              @click="paidan(item)"
+              size="small"
               >派单</el-tag
             >
             <el-tag size="small" type="success" v-if="item.cz == '已派单'">已派单</el-tag>
@@ -163,161 +201,164 @@
       </div>
     </div>
     <div class="fxChart">
-      <AssessmentjsEcharts :data="chartData2" :refresh="chartData2.refresh"></AssessmentjsEcharts>
+      <AssessmentjsEcharts
+        :data="chartData2"
+        :refresh="chartData2.refresh"
+      ></AssessmentjsEcharts>
     </div>
   </div>
 </template>
 
 <script setup>
-import { ref, reactive, toRefs, onMounted, onBeforeUnmount } from 'vue';
-import AssessmentjsEcharts from '@/views/oneMap/Echarts/AssessmentjsEcharts.vue';
-import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
-import bus from '@/bus';
+import { ref, reactive, toRefs, onMounted, onBeforeUnmount } from "vue";
+import AssessmentjsEcharts from "@/views/oneMap/Echarts/AssessmentjsEcharts.vue";
+import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
+import bus from "@/bus";
 const FXJCData = ref([
   {
-    xh: '1',
-    hd: '延河',
+    xh: "1",
+    hd: "延河",
     dqsw: 130,
     kzsw: 2000,
-    zt: '超控制常水位',
+    zt: "超控制常水位",
   },
   {
-    xh: '2',
-    hd: '杜甫川河',
+    xh: "2",
+    hd: "杜甫川河",
     dqsw: 10,
     kzsw: 300,
-    zt: '正常',
+    zt: "正常",
   },
   {
-    xh: '3',
-    hd: '西川河',
+    xh: "3",
+    hd: "西川河",
     dqsw: 11,
     kzsw: 700,
-    zt: '正常',
+    zt: "正常",
   },
   {
-    xh: '4',
-    hd: '南川河',
+    xh: "4",
+    hd: "南川河",
     dqsw: 12,
     kzsw: 700,
-    zt: '正常',
+    zt: "正常",
   },
 ]);
 const listData = ref([
-  { siteName: '东关大街与长青路交叉口', siteStatus: '在线', warnInfo: '无风险' },
-  { siteName: '大桥街与延河西路交叉口', siteStatus: '在线', warnInfo: '无风险' },
-  { siteName: '文化沟路与延河西路交叉口', siteStatus: '在线', warnInfo: '无风险' },
+  { siteName: "东关大街与长青路交叉口", siteStatus: "在线", warnInfo: "无风险" },
+  { siteName: "大桥街与延河西路交叉口", siteStatus: "在线", warnInfo: "无风险" },
+  { siteName: "文化沟路与延河西路交叉口", siteStatus: "在线", warnInfo: "无风险" },
 ]);
 const SSYJData = ref([
   {
-    wz: '东大街管网',
+    wz: "东大街管网",
     sj: 25,
-    zk: '高水位',
-    cz: '派单',
-    value: '004', //语音识别内容编码-前段自己设置的,后期项目有接口就直接替换数据唯一id
+    zk: "高水位",
+    cz: "派单",
+    value: "004", //语音识别内容编码-前段自己设置的,后期项目有接口就直接替换数据唯一id
   },
   {
-    wz: '枣园南路与枣园五路管网',
+    wz: "枣园南路与枣园五路管网",
     sj: 40,
-    zk: '满管',
-    cz: '派单',
-    value: '005',
+    zk: "满管",
+    cz: "派单",
+    value: "005",
   },
   {
-    wz: '王家坪旧址门口',
+    wz: "王家坪旧址门口",
     sj: 12,
-    zk: '积水',
-    cz: '派单',
-    value: '006',
+    zk: "积水",
+    cz: "派单",
+    value: "006",
   },
   {
-    wz: '金延安路与枣园大道管网 ',
+    wz: "金延安路与枣园大道管网 ",
     sj: 50,
-    zk: '满管',
-    cz: '已派单',
+    zk: "满管",
+    cz: "已派单",
   },
   {
-    wz: '延大路与杨家岭路管网  ',
+    wz: "延大路与杨家岭路管网  ",
     sj: 50,
-    zk: '满管',
-    cz: '已派单',
+    zk: "满管",
+    cz: "已派单",
   },
 ]);
 const yearList = ref([
-  { name: '月', value: 1 },
-  { name: '年', value: 2 },
+  { name: "月", value: 1 },
+  { name: "年", value: 2 },
 ]);
 const monitorData = ref([
-  { name: '漫溢监测(1/29)', value: 1 },
-  { name: '积水监测(0/16)', value: 2 },
-  { name: '水位监测(0/4)', value: 2 },
+  { name: "漫溢监测(1/29)", value: 1 },
+  { name: "积水监测(0/16)", value: 2 },
+  { name: "水位监测(0/4)", value: 2 },
 ]);
 const chartData2 = ref({
-  xAxis: ['12/1', '12/2', '12/3', '12/4', '12/5', '12/6'],
+  xAxis: ["12/1", "12/2", "12/3", "12/4", "12/5", "12/6"],
   refresh: 1,
 });
-const activedname = ref('月');
-const monitorname = ref('漫溢监测(1/29)');
+const activedname = ref("月");
+const monitorname = ref("漫溢监测(1/29)");
 function yearclick(val) {
   activedname.value = val.name;
 }
 
 function monitorclick(val) {
   monitorname.value = val.name;
-  if (monitorname.value == '漫溢监测(1/29)') {
+  if (monitorname.value == "漫溢监测(1/29)") {
     listData.value = [
-      { siteName: '东关大街与长青路交叉口', siteStatus: '在线', warnInfo: '无风险' },
-      { siteName: '大桥街与延河西路交叉口', siteStatus: '在线', warnInfo: '无风险' },
-      { siteName: '文化沟路与延河西路交叉口', siteStatus: '在线', warnInfo: '无风险' },
+      { siteName: "东关大街与长青路交叉口", siteStatus: "在线", warnInfo: "无风险" },
+      { siteName: "大桥街与延河西路交叉口", siteStatus: "在线", warnInfo: "无风险" },
+      { siteName: "文化沟路与延河西路交叉口", siteStatus: "在线", warnInfo: "无风险" },
     ];
-  } else if (monitorname.value == '积水监测(0/16)') {
+  } else if (monitorname.value == "积水监测(0/16)") {
     listData.value = [
-      { siteName: '东关大街与长青路交叉口', siteStatus: '在线', warnInfo: '无风险' },
-      { siteName: '大桥街与延河西路交叉口', siteStatus: '在线', warnInfo: '无风险' },
-      { siteName: '文化沟路与延河西路交叉口', siteStatus: '在线', warnInfo: '无风险' },
+      { siteName: "东关大街与长青路交叉口", siteStatus: "在线", warnInfo: "无风险" },
+      { siteName: "大桥街与延河西路交叉口", siteStatus: "在线", warnInfo: "无风险" },
+      { siteName: "文化沟路与延河西路交叉口", siteStatus: "在线", warnInfo: "无风险" },
     ];
   } else {
-    console.log(monitorname.value, '  monitorname.value');
+    console.log(monitorname.value, "  monitorname.value");
   }
 }
 // 弹框
 function showMapDalog(val) {
-  console.log(val.siteName, 'val.siteName');
+  console.log(val.siteName, "val.siteName");
   let data = {
     title: val.siteName,
-    comIDs: ['gwpm', 'jcsj'],
+    comIDs: ["gwpm", "jcsj"],
   };
-  bus.emit('publicDialog', data);
+  bus.emit("publicDialog", data);
   // showPipe.value = true;
 }
 // 积水弹框
 function JSshowMapDalog(val) {
   let data = {
     title: val.siteName,
-    comIDs: ['spjk', 'jcsj'],
+    comIDs: ["spjk", "jcsj"],
   };
-  bus.emit('publicDialog', data);
+  bus.emit("publicDialog", data);
   // showPipe.value = true;
 }
 
 // 派单
-const paidan = item => {
+const paidan = (item) => {
   let data = {
     title: item.wz,
-    comIDs: ['gdpf'],
+    comIDs: ["gdpf"],
     getSiteId: item.value,
   };
-  bus.emit('publicDialog', data);
+  bus.emit("publicDialog", data);
 };
 // 超控制常水位
 function showcswDalog(val) {
-  console.log(val, 'val');
+  console.log(val, "val");
   let data = {
-    title: val.hd + '监测点',
-    comIDs: ['PS_ckzcsw'],
+    title: val.hd + "监测点",
+    comIDs: ["PS_ckzcsw"],
   };
 
-  bus.emit('publicDialog', data);
+  bus.emit("publicDialog", data);
   // showPipe.value = true;
 }
 </script>
@@ -344,7 +385,7 @@
         width: 132px;
         height: 30px;
         padding: 2px 3px;
-        background: url('@/assets/images/zhps/fxpgw.png') no-repeat;
+        background: url("@/assets/images/zhps/fxpgw.png") no-repeat;
         background-size: 100% 100%;
         text-align: center;
         margin-top: 5px;
@@ -353,7 +394,7 @@
       .activedright {
         border: 1px solid #2cfce9;
         color: #e4f5ff;
-        background: url('@/assets/images/zhps/fxpgxz.png') no-repeat;
+        background: url("@/assets/images/zhps/fxpgxz.png") no-repeat;
         background-size: 100% 100%;
       }
     }
@@ -403,12 +444,15 @@
                 padding: 3px 0;
                 line-height: 20px;
                 border-radius: 2px 2px 2px 2px;
-                border: 1px solid #1cf5fc;
+                border: 1px solid #1cf4fc48;
                 text-align: center;
                 font-size: 14px;
                 font-weight: 400;
                 color: #ffffff;
               }
+              .box_Status {
+                font-size: 16px;
+              }
               .box2 {
                 width: 120px;
               }
@@ -429,9 +473,9 @@
                   background: rgba(255, 55, 55, 0.15);
                 }
                 &.green {
-                  border-color: #0fcd22;
-                  color: #0fcd22;
-                  background: rgba(15, 205, 34, 0.15);
+                  border-color: lime;
+                  color: lime;
+                  background: rgba(12, 134, 24, 0.15);
                 }
               }
             }
@@ -735,6 +779,7 @@
           text-align: center;
           position: relative;
           left: 40px;
+          font-size: 16px;
         }
         .activedright {
           border: 1px solid #2cfce9;
@@ -755,7 +800,7 @@
   height: 44px;
   line-height: 50px;
   width: 98%;
-  background: url('@/assets/newImgs/partBg.png') no-repeat;
+  background: url("@/assets/newImgs/partBg.png") no-repeat;
   background-size: 100% 100%;
   display: flex;
   align-items: center;
diff --git a/src/views/oneMap/components/ZHHM.vue b/src/views/oneMap/components/ZHHM.vue
index 23556f2..c953f52 100644
--- a/src/views/oneMap/components/ZHHM.vue
+++ b/src/views/oneMap/components/ZHHM.vue
@@ -711,6 +711,9 @@
   AllData.Charts4.setOption({
     tooltip: {
       trigger: "axis",
+      axisPointer: {
+        type: "shadow",
+      },
     },
     grid: {
       left: "3%",
@@ -766,56 +769,56 @@
         },
         data: Data.yAxis,
       },
-      {
-        name: "",
-        type: "pictorialBar",
-        symbolSize: [barWidth + 10, 15],
-        symbolOffset: [0, 8],
-        z: 10,
-        itemStyle: {
-          normal: {
-            color: "transparent",
-            borderColor: barTopColor,
-            borderType: "solid",
-            borderWidth: 10,
-          },
-        },
-        data: Data.yAxis,
-      },
-      {
-        name: "",
-        type: "pictorialBar",
-        symbolSize: [barWidth + 20, 20],
-        symbolOffset: [0, 12],
-        z: 12,
-        itemStyle: {
-          normal: {
-            color: "transparent",
-            borderColor: barTopColor,
-            borderType: "solid",
-            borderWidth: 10,
-          },
-        },
-        data: Data.yAxis,
-        stack: "check",
-      },
-      {
-        name: "",
-        type: "pictorialBar",
-        symbolSize: [barWidth + 25, 20],
-        symbolOffset: [0, 12],
-        z: 12,
-        itemStyle: {
-          normal: {
-            color: "transparent",
-            borderColor: "#3ACDC5",
-            borderType: "solid",
-            borderWidth: 10,
-          },
-        },
-        data: Data.yAxis,
-        stack: "check",
-      },
+      // {
+      //   name: "",
+      //   type: "pictorialBar",
+      //   symbolSize: [barWidth + 10, 15],
+      //   symbolOffset: [0, 8],
+      //   z: 10,
+      //   itemStyle: {
+      //     normal: {
+      //       color: "transparent",
+      //       borderColor: barTopColor,
+      //       borderType: "solid",
+      //       borderWidth: 10,
+      //     },
+      //   },
+      //   data: Data.yAxis,
+      // },
+      // {
+      //   name: "",
+      //   type: "pictorialBar",
+      //   symbolSize: [barWidth + 20, 20],
+      //   symbolOffset: [0, 12],
+      //   z: 12,
+      //   itemStyle: {
+      //     normal: {
+      //       color: "transparent",
+      //       borderColor: barTopColor,
+      //       borderType: "solid",
+      //       borderWidth: 10,
+      //     },
+      //   },
+      //   data: Data.yAxis,
+      //   stack: "check",
+      // },
+      // {
+      //   name: "",
+      //   type: "pictorialBar",
+      //   symbolSize: [barWidth + 25, 20],
+      //   symbolOffset: [0, 12],
+      //   z: 12,
+      //   itemStyle: {
+      //     normal: {
+      //       color: "transparent",
+      //       borderColor: "#3ACDC5",
+      //       borderType: "solid",
+      //       borderWidth: 10,
+      //     },
+      //   },
+      //   data: Data.yAxis,
+      //   stack: "check",
+      // },
       {
         name: "",
         type: "bar",
@@ -892,8 +895,9 @@
     zoom: 13,
     pitch: 55,
   });
-  initEcharts4();
   window.addEventListener("resize", initEcharts4);
+  initEcharts4();
+
   //mapBoxVectorLayer.addGeojsonPolygonWithLabel('yanAnPaiShuiArea', yanAnPaiShuiArea);
 });
 
diff --git a/src/views/oneMap/components/ZHRQ.vue b/src/views/oneMap/components/ZHRQ.vue
index bb36061..9a71ce2 100644
--- a/src/views/oneMap/components/ZHRQ.vue
+++ b/src/views/oneMap/components/ZHRQ.vue
@@ -30,12 +30,7 @@
               <span class="TJListValue">1922km</span>
             </div>
           </div>
-          <div class="RQ_EchartsBox" id="Echarts2Box">
-            <div class="ClickDiv1" @click="TuChengClick(1)"></div>
-            <div class="ClickDiv2" @click="TuChengClick(2)"></div>
-            <div class="ClickDiv3" @click="TuChengClick(3)"></div>
-            <div class="ClickDiv4" @click="TuChengClick(4)"></div>
-          </div>
+          <div class="RQ_EchartsBox" id="Echarts2Box"></div>
         </div>
       </div>
       <div class="ComBox LeftBox1_2">
@@ -155,7 +150,7 @@
         </div>
       </div>
       <div class="ComBox RightBox1_2">
-        <div class="Box_header">巡查反馈</div>
+        <div class="Box_header">预警处置</div>
         <div class="Box_Body">
           <div class="FK_headerBox">
             <div class="FK_headerBox_list" @click="dealOrNoDeal(1)">
@@ -658,9 +653,9 @@
     },
     grid: {
       left: "5%",
-      top: "10%",
+      top: "5%",
       right: "5%",
-      bottom: "10%",
+      bottom: "5%",
       containLabel: true,
     },
     xAxis: {
@@ -1450,7 +1445,7 @@
           border-radius: 2px;
           font-family: Source Han Sans CN;
           font-weight: 500;
-          font-size: 14px;
+          font-size: 16px;
           color: #c1d3d4;
           text-align: center;
           line-height: 20px;
@@ -1463,7 +1458,7 @@
           border: 1px solid #1cf5fc;
           font-family: Source Han Sans CN;
           font-weight: bold;
-          font-size: 12px;
+          font-size: 16px;
           color: #ebfeff;
           background: #1cf4fc22;
         }
@@ -1520,7 +1515,7 @@
             font-family: Source Han Sans CN;
             font-weight: 400;
             font-size: 14px;
-            color: #c1d3d4;
+            color: #ffffff;
             height: 28px;
             line-height: 28px;
             text-align: right;

diff --git a/src/views/oneMap/Echarts/publicEch.vue b/src/views/oneMap/Echarts/publicEch.vue
index 6ab1b7d..2816357 100644
--- a/src/views/oneMap/Echarts/publicEch.vue
+++ b/src/views/oneMap/Echarts/publicEch.vue
@@ -2,11 +2,11 @@
   <div :id="id" style="width: 100%; height: 100%"></div>
 </template>
 <script>
-import * as echarts from 'echarts';
-import { guid } from '@/utils/ruoyi';
-import { reactive, toRefs, onMounted, watch } from 'vue';
+import * as echarts from "echarts";
+import { guid } from "@/utils/ruoyi";
+import { reactive, toRefs, onMounted, watch } from "vue";
 export default {
-  name: 'line-chart',
+  name: "line-chart",
   props: {
     data: Object,
     refresh: Number,
@@ -28,28 +28,34 @@
       let chartDom = echarts.init(document.getElementById(allData.id));
 
       var shadowYData = [100, 100];
-      var barTopColor = ['#fe7285FF', '#1f93ffFF', '#31e1adFF', '#e4cd61FF', '#12f9ffFF'];
+      var barTopColor = ["#fe7285FF", "#1f93ffFF", "#31e1adFF", "#e4cd61FF", "#12f9ffFF"];
       var barBottomColor = [
-        'RGBA(154, 102, 125, 0.6)',
-        'RGBA(17, 109, 182, 0.6)',
-        'RGBA(27, 152, 136, 0.6)',
-        'RGBA(126, 138, 92, 0.6)',
-        'RGBA(10, 162, 178, 0.6)',
+        "RGBA(154, 102, 125, 0.6)",
+        "RGBA(17, 109, 182, 0.6)",
+        "RGBA(27, 152, 136, 0.6)",
+        "RGBA(126, 138, 92, 0.6)",
+        "RGBA(10, 162, 178, 0.6)",
       ];
       var barWidth = 20;
       var option;
       option = {
-        color: ['#3FFFC2', '#FFF21C'],
+        color: ["#3FFFC2", "#FFF21C"],
         tooltip: {
-          trigger: 'axis',
+          trigger: "axis",
 
-          formatter: params => {
+          formatter: (params) => {
             // console.log(params);
-            var relVal = '' + params[0].name;
+            var relVal = "" + params[0].name;
             for (var i = 0, l = params.length; i < l; i++) {
               if (params[i].seriesName) {
-                let unit = params[i].seriesName == '数量' ? '起' : '个';
-                relVal += '<br/>' + params[i].marker + params[i].seriesName + ' ' + params[i].value + unit;
+                let unit = params[i].seriesName == "数量" ? "起" : "个";
+                relVal +=
+                  "<br/>" +
+                  params[i].marker +
+                  params[i].seriesName +
+                  " " +
+                  params[i].value +
+                  unit;
               }
             }
             return relVal;
@@ -61,12 +67,12 @@
         },
         xAxis: [
           {
-            type: 'category',
+            type: "category",
             axisLine: {
               show: false,
               lineStyle: {
                 width: 2,
-                color: '#58b2ed',
+                color: "#58b2ed",
               },
             },
             splitLine: {
@@ -76,18 +82,18 @@
               show: false,
             },
             axisLabel: {
-              color: 'rgba(255,255,255,1)',
-              fontSize: 12,
-              fontFamily: 'AlibabaPuHuiTi',
+              color: "rgba(255,255,255,1)",
+              fontSize: 16,
+              fontFamily: "AlibabaPuHuiTi",
               formatter: function (params) {
-                var str = ''; // 最终拼接成的字符串
+                var str = ""; // 最终拼接成的字符串
                 var paramsLen = params.length; // 获取每项文字的个数
                 var len = 3; // 每行能显示的字的个数（根据实际情况自己设置）
                 var rowNumber = Math.ceil(paramsLen / len); // 换行的话，需要显示几行，向上取整
                 if (paramsLen > len) {
                   //大于设定的len就换行，不大于就不变化
                   for (var i = 0; i < rowNumber; i++) {
-                    var temp = ''; // 表示每一次截取的字符串
+                    var temp = ""; // 表示每一次截取的字符串
                     var start = i * len; // 开始截取的位置
                     var end = start + len; // 结束截取的位置
                     if (i == rowNumber - 1) {
@@ -95,7 +101,7 @@
                       temp = params.substring(start, paramsLen);
                     } else {
                       // 每一次拼接字符串并换行
-                      temp = params.substring(start, end) + '\n';
+                      temp = params.substring(start, end) + "\n";
                     }
                     str += temp; // 最终拼成的字符串
                   }
@@ -111,19 +117,19 @@
         ],
         yAxis: [
           {
-            name: '数量(起)',
-            type: 'value',
+            name: "数量(起)",
+            type: "value",
             axisLabel: {
-              color: '#3FFFC2',
+              color: "#3FFFC2",
               show: true,
             },
             nameTextStyle: {
-              color: '#3FFFC2',
+              color: "#3FFFC2",
             },
             splitLine: {
               lineStyle: {
-                type: 'dashed',
-                color: '#3FFFC2',
+                type: "dashed",
+                color: "#3FFFC2",
               },
             },
             alignTicks: true,
@@ -137,20 +143,20 @@
             bottom: 18,
             start: 0,
             end: 100,
-            handleSize: '100%',
-            fillerColor: '#94FA41',
-            borderColor: 'transparent',
-            backgroundColor: 'rgba(148, 250, 65, 0.2)',
+            handleSize: "100%",
+            fillerColor: "#94FA41",
+            borderColor: "transparent",
+            backgroundColor: "rgba(148, 250, 65, 0.2)",
             handleStyle: {
-              color: '#94FA41',
+              color: "#94FA41",
             },
             moveHandleSize: 0,
             textStyle: {
-              color: '#fff',
+              color: "#fff",
             },
           },
           {
-            type: 'inside',
+            type: "inside",
             show: true,
             height: 15,
             start: 1,
@@ -159,11 +165,11 @@
         ],
         series: [
           {
-            name: '数量',
-            type: 'pictorialBar',
+            name: "数量",
+            type: "pictorialBar",
             symbolSize: [barWidth, 10],
             symbolOffset: [0, -6],
-            symbolPosition: 'end',
+            symbolPosition: "end",
             z: 12,
             itemStyle: {
               normal: {
@@ -174,62 +180,62 @@
             },
             data: props.data.yAxis,
           },
+          // {
+          //   name: "",
+          //   type: "pictorialBar",
+          //   symbolSize: [barWidth + 10, 15],
+          //   symbolOffset: [0, 8],
+          //   z: 10,
+          //   itemStyle: {
+          //     normal: {
+          //       color: "transparent",
+          //       borderColor: barTopColor,
+          //       borderType: "solid",
+          //       borderWidth: 10,
+          //     },
+          //   },
+          //   data: props.data.yAxis,
+          // },
+          // {
+          //   name: '',
+          //   type: 'pictorialBar',
+          //   symbolSize: [barWidth + 20, 20],
+          //   symbolOffset: [0, 12],
+          //   z: 12,
+          //   itemStyle: {
+          //     normal: {
+          //       color: 'transparent',
+          //       borderColor: barTopColor,
+          //       borderType: 'solid',
+          //       borderWidth: 10,
+          //     },
+          //   },
+          //   data: props.data.yAxis,
+          //   stack: 'check',
+          // },
+          // {
+          //   name: "",
+          //   type: "pictorialBar",
+          //   symbolSize: [barWidth + 25, 20],
+          //   symbolOffset: [0, 12],
+          //   z: 12,
+          //   itemStyle: {
+          //     normal: {
+          //       color: "transparent",
+          //       borderColor: "#3ACDC5",
+          //       borderType: "solid",
+          //       borderWidth: 10,
+          //     },
+          //   },
+          //   data: props.data.yAxis,
+          //   stack: "check",
+          // },
           {
-            name: '',
-            type: 'pictorialBar',
-            symbolSize: [barWidth + 10, 15],
-            symbolOffset: [0, 8],
-            z: 10,
-            itemStyle: {
-              normal: {
-                color: 'transparent',
-                borderColor: barTopColor,
-                borderType: 'solid',
-                borderWidth: 10,
-              },
-            },
-            data: props.data.yAxis,
-          },
-          {
-            name: '',
-            type: 'pictorialBar',
-            symbolSize: [barWidth + 20, 20],
-            symbolOffset: [0, 12],
-            z: 12,
-            itemStyle: {
-              normal: {
-                color: 'transparent',
-                borderColor: barTopColor,
-                borderType: 'solid',
-                borderWidth: 10,
-              },
-            },
-            data: props.data.yAxis,
-            stack: 'check',
-          },
-          {
-            name: '',
-            type: 'pictorialBar',
-            symbolSize: [barWidth + 25, 20],
-            symbolOffset: [0, 12],
-            z: 12,
-            itemStyle: {
-              normal: {
-                color: 'transparent',
-                borderColor: '#3ACDC5',
-                borderType: 'solid',
-                borderWidth: 10,
-              },
-            },
-            data: props.data.yAxis,
-            stack: 'check',
-          },
-          {
-            name: '',
-            type: 'bar',
+            name: "",
+            type: "bar",
             barWidth: barWidth,
-            barGap: '10%', // Make series be overlap
-            barCateGoryGap: '10%',
+            barGap: "10%", // Make series be overlap
+            barCateGoryGap: "10%",
             itemStyle: {
               normal: {
                 color: function (params) {
@@ -264,7 +270,7 @@
     watch(
       () => props.refresh,
       () => {
-        console.log(props, 'propspropsprops');
+        console.log(props, "propspropsprops");
         if (allData.chartDom) {
           allData.chartDom.dispose();
           allData.chartDom = null;
@@ -276,7 +282,7 @@
     );
     onMounted(() => {
       init();
-      window.addEventListener('resize', resizeTheChart);
+      window.addEventListener("resize", resizeTheChart);
     });
     return {
       ...toRefs(allData),
diff --git a/src/views/oneMap/LayerControl/LayerControl.vue b/src/views/oneMap/LayerControl/LayerControl.vue
index 43fc007..2bdf6b8 100644
--- a/src/views/oneMap/LayerControl/LayerControl.vue
+++ b/src/views/oneMap/LayerControl/LayerControl.vue
@@ -1,6 +1,10 @@
 <template>
   <Transition name="slideTC">
-    <div class="LayerControl" v-show="ShowTuCheng">
+    <div
+      class="LayerControl"
+      v-show="ShowTuCheng"
+      :class="[showPanel ? 'TuChengImgTrue' : 'TuChengImgFalse']"
+    >
       <div class="GroupBox" v-for="item in AllData.LayerData" v-show="item.children">
         <div class="GroupName" @click="item.Show = !item.Show">{{ item.title }}</div>
         <!-- <Transition name="Group"> -->
@@ -30,30 +34,30 @@
 </template>
 
 <script setup name="LayerControl">
-import { ref, reactive, toRefs, onMounted } from 'vue';
+import { ref, reactive, toRefs, onMounted } from "vue";
 // 图层控制icon引入
-import { requireTuChengImg } from '@/utils/util';
-import yanAnPaiShuiArea from '@/assets/yanAnPaiShuiArea.json';
-import yanAnRoad from '@/assets/yanAnRoad.json';
-import yanAnWater from '@/assets/yanAnWater.json';
-import yanAnWSCLC from '@/assets/yanAnWSCLC.json';
-import yanAnCenterCity from '@/assets/yanAnCenterCity.json';
-import yanAnYSBZ from '@/assets/yanAnYSBZ.json';
-import yanAnYiLao from '@/assets/yanAnYiLao.json';
-import yanAnFengXian from '@/assets/yanAnFengXian.json';
-import yanAnPipeSupervise from '@/assets/yanAnPipeSupervise.json';
-import yanAnPKSupervise from '@/assets/yanAnPKSupervise.json';
-import yanAnNature from '@/assets/yanAnNature.json';
-import yanAnVideo from '@/assets/yanAnVideo.json';
-import yanAnMountain from '@/assets/yanAnMountain.json';
-import yanAnSmallWater from '@/assets/yanAnSmallWater.json';
-import yanAnRainArea from '@/assets/yanAnRainArea.json';
-import heDiJiaGu from '@/assets/heDiJiaGu.json';
-import heDiShuJun from '@/assets/heDiShuJun.json';
-import anXianGaiZao from '@/assets/anXianGaiZao.json';
-import bus from '@/bus';
-import axios from 'axios';
-import mapBoxVectorLayer from '@/utils/GISdocument/mapboxVectorLayer.js';
+import { requireTuChengImg } from "@/utils/util";
+import yanAnPaiShuiArea from "@/assets/yanAnPaiShuiArea.json";
+import yanAnRoad from "@/assets/yanAnRoad.json";
+import yanAnWater from "@/assets/yanAnWater.json";
+import yanAnWSCLC from "@/assets/yanAnWSCLC.json";
+import yanAnCenterCity from "@/assets/yanAnCenterCity.json";
+import yanAnYSBZ from "@/assets/yanAnYSBZ.json";
+import yanAnYiLao from "@/assets/yanAnYiLao.json";
+import yanAnFengXian from "@/assets/yanAnFengXian.json";
+import yanAnPipeSupervise from "@/assets/yanAnPipeSupervise.json";
+import yanAnPKSupervise from "@/assets/yanAnPKSupervise.json";
+import yanAnNature from "@/assets/yanAnNature.json";
+import yanAnVideo from "@/assets/yanAnVideo.json";
+import yanAnMountain from "@/assets/yanAnMountain.json";
+import yanAnSmallWater from "@/assets/yanAnSmallWater.json";
+import yanAnRainArea from "@/assets/yanAnRainArea.json";
+import heDiJiaGu from "@/assets/heDiJiaGu.json";
+import heDiShuJun from "@/assets/heDiShuJun.json";
+import anXianGaiZao from "@/assets/anXianGaiZao.json";
+import bus from "@/bus";
+import axios from "axios";
+import mapBoxVectorLayer from "@/utils/GISdocument/mapboxVectorLayer.js";
 const AllData = reactive({
   // 图层控制面板的渲染数据
   /**图层面板数据字段说明
@@ -66,216 +70,216 @@
    */
   LayerData: [
     {
-      title: '基本信息',
+      title: "基本信息",
       Show: true,
       children: [
         {
-          layerName: '蓝色地图',
-          layerKey: 'blackMap',
-          layerIcon: requireTuChengImg('zhongxinchengqu'),
+          layerName: "蓝色地图",
+          layerKey: "blackMap",
+          layerIcon: requireTuChengImg("zhongxinchengqu"),
           layerVisible: false,
         },
         {
-          layerName: '白色地图',
-          layerKey: 'whiteMap',
-          layerIcon: requireTuChengImg('zhongxinchengqu'),
+          layerName: "白色地图",
+          layerKey: "whiteMap",
+          layerIcon: requireTuChengImg("zhongxinchengqu"),
           layerVisible: false,
         },
         {
-          layerName: '影像地图',
-          layerKey: 'imageMap',
-          layerIcon: requireTuChengImg('zhongxinchengqu'),
+          layerName: "影像地图",
+          layerKey: "imageMap",
+          layerIcon: requireTuChengImg("zhongxinchengqu"),
           layerVisible: false,
         },
         {
-          layerName: '中心城区',
-          layerKey: 'centerCity',
-          layerIcon: requireTuChengImg('zhongxinchengqu'),
+          layerName: "中心城区",
+          layerKey: "centerCity",
+          layerIcon: requireTuChengImg("zhongxinchengqu"),
           layerVisible: false,
           dynamicLineData: yanAnCenterCity,
         },
         {
-          layerName: '三维建筑',
-          layerKey: 'buildingLayer',
-          layerIcon: '',
+          layerName: "三维建筑",
+          layerKey: "buildingLayer",
+          layerIcon: "",
           layerVisible: true,
         },
         {
-          layerName: '路网',
-          layerKey: 'road',
-          layerIcon: '',
+          layerName: "路网",
+          layerKey: "road",
+          layerIcon: "",
           layerVisible: true,
           dynamicLineData: yanAnRoad,
         },
         {
-          layerName: '河流水系',
-          layerKey: 'waterLake',
-          layerIcon: '',
+          layerName: "河流水系",
+          layerKey: "waterLake",
+          layerIcon: "",
           layerVisible: true,
           dynamicLineData: yanAnWater,
         },
         {
-          layerName: '防洪河道',
-          layerKey: 'fangHongWater',
-          layerIcon: '',
+          layerName: "防洪河道",
+          layerKey: "fangHongWater",
+          layerIcon: "",
           layerVisible: false,
           lineWithLabel: yanAnSmallWater,
         },
         {
-          layerName: '河堤疏浚',
-          layerKey: 'heDiShuJun',
-          layerIcon: '',
+          layerName: "河堤疏浚",
+          layerKey: "heDiShuJun",
+          layerIcon: "",
           layerVisible: false,
           lineWithLabel: heDiShuJun,
         },
         {
-          layerName: '河堤加固',
-          layerKey: 'heDiJiaGu',
-          layerIcon: '',
+          layerName: "河堤加固",
+          layerKey: "heDiJiaGu",
+          layerIcon: "",
           layerVisible: false,
           lineWithLabel: heDiJiaGu,
         },
         {
-          layerName: '岸线改造',
-          layerKey: 'anXianGaiZao',
-          layerIcon: '',
+          layerName: "岸线改造",
+          layerKey: "anXianGaiZao",
+          layerIcon: "",
           layerVisible: false,
           lineWithLabel: anXianGaiZao,
         },
         {
-          layerName: '河堤治理',
-          layerKey: 'heDiZhiLi',
-          layerIcon: '',
+          layerName: "河堤治理",
+          layerKey: "heDiZhiLi",
+          layerIcon: "",
           layerVisible: false,
           lineWithLabel: anXianGaiZao,
         },
         {
-          layerName: '空间格局',
-          layerKey: 'yanAnNature',
-          layerIcon: '',
+          layerName: "空间格局",
+          layerKey: "yanAnNature",
+          layerIcon: "",
           layerVisible: false,
           areaData: yanAnNature,
         },
         {
-          layerName: '山体修复',
-          layerKey: 'yanAnMountain',
-          layerIcon: '',
+          layerName: "山体修复",
+          layerKey: "yanAnMountain",
+          layerIcon: "",
           layerVisible: false,
           lineWithLabel: yanAnMountain,
         },
       ],
     },
     {
-      title: '燃气系统',
+      title: "燃气系统",
       Show: true,
       children: [
         {
-          layerName: '燃气管网',
-          layerKey: 'rq_all',
+          layerName: "燃气管网",
+          layerKey: "rq_all",
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: '干管',
-          layerKey: 'rq_SZLH',
+          layerName: "干管",
+          layerKey: "rq_SZLH",
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: '干管流向',
-          layerKey: 'sx_ya_smx_rq_line_sz',
+          layerName: "干管流向",
+          layerKey: "sx_ya_smx_rq_line_sz",
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: '主管',
-          layerKey: 'rq_TYLH',
+          layerName: "主管",
+          layerKey: "rq_TYLH",
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: '主管流向',
-          layerKey: 'sx_ya_smx_rq_line_zg',
+          layerName: "主管流向",
+          layerKey: "sx_ya_smx_rq_line_zg",
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: '支管',
-          layerKey: 'rq_LGLH',
+          layerName: "支管",
+          layerKey: "rq_LGLH",
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: '支管流向',
-          layerKey: 'sx_ya_smx_rq_line_zhig',
+          layerName: "支管流向",
+          layerKey: "sx_ya_smx_rq_line_zhig",
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: '其他管网',
-          layerKey: 'rq_other',
+          layerName: "其他管网",
+          layerKey: "rq_other",
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: '调压器',
-          layerKey: 'tiaoYaQi',
+          layerName: "调压器",
+          layerKey: "tiaoYaQi",
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: '节点',
-          layerKey: 'rq_jieDian',
+          layerName: "节点",
+          layerKey: "rq_jieDian",
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: '极性保护',
-          layerKey: 'jiXingBaoHu',
+          layerName: "极性保护",
+          layerKey: "jiXingBaoHu",
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: '流量计',
-          layerKey: 'rq_liuLiangJi',
+          layerName: "流量计",
+          layerKey: "rq_liuLiangJi",
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: '未知设备',
-          layerKey: 'rq_unknow',
+          layerName: "未知设备",
+          layerKey: "rq_unknow",
           layerIcon: null,
           layerVisible: false,
         },
       ],
     },
     {
-      title: '雨水系统',
+      title: "雨水系统",
       Show: true,
       children: [
         {
-          layerName: '雨水分区',
-          layerKey: 'rainArea',
+          layerName: "雨水分区",
+          layerKey: "rainArea",
           layerIcon: null,
           layerVisible: false,
           areaData: yanAnRainArea,
         },
         {
-          layerName: '排水分区',
-          layerKey: 'paishuiArea',
+          layerName: "排水分区",
+          layerKey: "paishuiArea",
           layerIcon: null,
           layerVisible: false,
           areaData: yanAnPaiShuiArea,
         },
         {
-          layerName: '雨水管网',
-          layerKey: 'ysLine1',
+          layerName: "雨水管网",
+          layerKey: "ysLine1",
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: '雨水管网流向',
-          layerKey: 'pipeline_info_flow_ys',
+          layerName: "雨水管网流向",
+          layerKey: "pipeline_info_flow_ys",
           layerIcon: null,
           layerVisible: false,
         },
@@ -286,8 +290,8 @@
         //   layerVisible: false,
         // },
         {
-          layerName: '雨水泵站',
-          layerKey: 'YSBZ',
+          layerName: "雨水泵站",
+          layerKey: "YSBZ",
           layerIcon: null,
           layerVisible: false,
           data: yanAnYSBZ,
@@ -295,24 +299,24 @@
       ],
     },
     {
-      title: '污水系统',
+      title: "污水系统",
       Show: true,
       children: [
         {
-          layerName: '污水分区',
-          layerKey: 'sewageArea',
+          layerName: "污水分区",
+          layerKey: "sewageArea",
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: '污水管网',
-          layerKey: 'wsLine1',
+          layerName: "污水管网",
+          layerKey: "wsLine1",
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: '污水管网流向',
-          layerKey: 'pipeline_info_flow_ws1',
+          layerName: "污水管网流向",
+          layerKey: "pipeline_info_flow_ws1",
           layerIcon: null,
           layerVisible: false,
         },
@@ -329,8 +333,8 @@
         //   layerVisible: false,
         // },
         {
-          layerName: '污水处理厂',
-          layerKey: 'WSCLC',
+          layerName: "污水处理厂",
+          layerKey: "WSCLC",
           layerIcon: null,
           layerVisible: false,
           data: yanAnWSCLC,
@@ -338,40 +342,40 @@
       ],
     },
     {
-      title: '感知设备',
+      title: "感知设备",
       Show: true,
       children: [
         {
-          layerName: '内涝易涝点',
-          layerKey: 'yiLaoPoint',
+          layerName: "内涝易涝点",
+          layerKey: "yiLaoPoint",
           layerIcon: null,
           layerVisible: false,
           data: yanAnYiLao,
         },
         {
-          layerName: '内涝风险点',
-          layerKey: 'fengXianPoint',
+          layerName: "内涝风险点",
+          layerKey: "fengXianPoint",
           layerIcon: null,
           layerVisible: false,
           data: yanAnFengXian,
         },
         {
-          layerName: '排水管网监测',
-          layerKey: 'pipeSupervise',
+          layerName: "排水管网监测",
+          layerKey: "pipeSupervise",
           layerIcon: null,
           layerVisible: false,
           data: yanAnPipeSupervise,
         },
         {
-          layerName: '排水排口监测',
-          layerKey: 'PKsupervise',
+          layerName: "排水排口监测",
+          layerKey: "PKsupervise",
           layerIcon: null,
           layerVisible: false,
           data: yanAnPKSupervise,
         },
         {
-          layerName: '视频监测',
-          layerKey: 'video',
+          layerName: "视频监测",
+          layerKey: "video",
           layerIcon: null,
           layerVisible: false,
           data: yanAnVideo,
@@ -386,98 +390,111 @@
     .concat(AllData.LayerData[2].children)
     .concat(AllData.LayerData[3].children)
     .concat(AllData.LayerData[4].children);
-  initeLegend.forEach(element => {
+  initeLegend.forEach((element) => {
     element.layername = element.layerKey;
   });
-  bus.emit('setLegendData', initeLegend);
+  bus.emit("setLegendData", initeLegend);
 });
 const props = defineProps({
   ShowTuCheng: false,
+  showPanel: false,
 });
 
 watch(
   () => props.ShowTuCheng,
   (newValue, oldValue) => {
-    console.log('ShowTuCheng变化了', newValue, oldValue);
+    console.log("ShowTuCheng变化了", newValue, oldValue);
   },
   { immediate: true, deep: true }
 );
 
-const layerClick = async item2 => {
+const layerClick = async (item2) => {
   item2.layerVisible = !item2.layerVisible;
   item2.isCheck = item2.layerVisible;
-  console.info(`点击了名称为${item2.layerName},图层ID为${item2.layerKey}的图层,点击后的图层展示情况为${item2.layerVisible}`);
-  bus.emit('setLayerVisible', { layername: item2.layerKey, isCheck: item2.isCheck });
-  if (item2.layerKey == 'whiteMap') {
-    AllData.LayerData[0]['children'][0].layerVisible = false;
-    AllData.LayerData[0]['children'][2].layerVisible = false;
-    let { data } = await axios.get('/static/libs/mapbox/style/customs/whiteMapStyle.json');
+  console.info(
+    `点击了名称为${item2.layerName},图层ID为${item2.layerKey}的图层,点击后的图层展示情况为${item2.layerVisible}`
+  );
+  bus.emit("setLayerVisible", { layername: item2.layerKey, isCheck: item2.isCheck });
+  if (item2.layerKey == "whiteMap") {
+    AllData.LayerData[0]["children"][0].layerVisible = false;
+    AllData.LayerData[0]["children"][2].layerVisible = false;
+    let { data } = await axios.get(
+      "/static/libs/mapbox/style/customs/whiteMapStyle.json"
+    );
     let newMapStyle;
     let oldMapStyle = newfiberMapbox.map.getStyle();
     let oldIds = [];
-    oldMapStyle.layers.forEach(layer => {
+    oldMapStyle.layers.forEach((layer) => {
       oldIds.push(layer.id);
     });
-    let newIds = data.layers.map(i => i.id);
-    oldIds.forEach(id => {
+    let newIds = data.layers.map((i) => i.id);
+    oldIds.forEach((id) => {
       let layer = data.layers[newIds.indexOf(id)];
       if (!layer) return;
-      Object.keys(layer.layout || {}).forEach(key => newfiberMapbox.map.setLayoutProperty(id, key, layer.layout[key]));
-      Object.keys(layer.paint || {}).forEach(key => newfiberMapbox.map.setPaintProperty(id, key, layer.paint[key]));
+      Object.keys(layer.layout || {}).forEach((key) =>
+        newfiberMapbox.map.setLayoutProperty(id, key, layer.layout[key])
+      );
+      Object.keys(layer.paint || {}).forEach((key) =>
+        newfiberMapbox.map.setPaintProperty(id, key, layer.paint[key])
+      );
     });
-    newfiberMapbox.map.setLayoutProperty('newfiber-XYZLayer', 'visibility', 'none');
+    newfiberMapbox.map.setLayoutProperty("newfiber-XYZLayer", "visibility", "none");
   }
-  if (item2.layerKey == 'blackMap') {
-    AllData.LayerData[0]['children'][1].layerVisible = false;
-    AllData.LayerData[0]['children'][2].layerVisible = false;
-    let { data } = await axios.get('/static/libs/mapbox/style/customs/night-style.json');
+  if (item2.layerKey == "blackMap") {
+    AllData.LayerData[0]["children"][1].layerVisible = false;
+    AllData.LayerData[0]["children"][2].layerVisible = false;
+    let { data } = await axios.get("/static/libs/mapbox/style/customs/night-style.json");
     let newMapStyle;
     let oldMapStyle = newfiberMapbox.map.getStyle();
     let oldIds = [];
-    oldMapStyle.layers.forEach(layer => {
+    oldMapStyle.layers.forEach((layer) => {
       oldIds.push(layer.id);
     });
-    let newIds = data.layers.map(i => i.id);
-    oldIds.forEach(id => {
+    let newIds = data.layers.map((i) => i.id);
+    oldIds.forEach((id) => {
       let layer = data.layers[newIds.indexOf(id)];
       if (!layer) return;
-      Object.keys(layer.layout || {}).forEach(key => newfiberMapbox.map.setLayoutProperty(id, key, layer.layout[key]));
-      Object.keys(layer.paint || {}).forEach(key => newfiberMapbox.map.setPaintProperty(id, key, layer.paint[key]));
+      Object.keys(layer.layout || {}).forEach((key) =>
+        newfiberMapbox.map.setLayoutProperty(id, key, layer.layout[key])
+      );
+      Object.keys(layer.paint || {}).forEach((key) =>
+        newfiberMapbox.map.setPaintProperty(id, key, layer.paint[key])
+      );
     });
-    newfiberMapbox.map.setLayoutProperty('newfiber-XYZLayer', 'visibility', 'none');
+    newfiberMapbox.map.setLayoutProperty("newfiber-XYZLayer", "visibility", "none");
   }
-  if (item2.layerKey == 'imageMap') {
-    AllData.LayerData[0]['children'][0].layerVisible = false;
-    AllData.LayerData[0]['children'][1].layerVisible = false;
-    newfiberMapbox.map.setLayoutProperty('newfiber-XYZLayer', 'visibility', 'visible');
-    newfiberMapbox.map.moveLayer('newfiber-XYZLayer', 'buildingLayer');
+  if (item2.layerKey == "imageMap") {
+    AllData.LayerData[0]["children"][0].layerVisible = false;
+    AllData.LayerData[0]["children"][1].layerVisible = false;
+    newfiberMapbox.map.setLayoutProperty("newfiber-XYZLayer", "visibility", "visible");
+    newfiberMapbox.map.moveLayer("newfiber-XYZLayer", "buildingLayer");
   }
   if (item2.areaData) {
     if (item2.isCheck) {
       mapBoxVectorLayer.addGeojsonPolygonWithLabel(item2.layerKey, item2.areaData);
     } else {
-      mapBoxVectorLayer.removeByIds([item2.layerKey, item2.layerKey + '_label']);
+      mapBoxVectorLayer.removeByIds([item2.layerKey, item2.layerKey + "_label"]);
     }
   }
-  if (item2.layerKey == 'buildingLayer') {
+  if (item2.layerKey == "buildingLayer") {
     if (item2.isCheck) {
-      newfiberMapbox.map.setLayoutProperty('buildingLayer', 'visibility', 'visible');
+      newfiberMapbox.map.setLayoutProperty("buildingLayer", "visibility", "visible");
     } else {
-      newfiberMapbox.map.setLayoutProperty('buildingLayer', 'visibility', 'none');
+      newfiberMapbox.map.setLayoutProperty("buildingLayer", "visibility", "none");
     }
   }
   if (item2.lineWithLabel) {
     if (item2.isCheck) {
       mapBoxVectorLayer.addGeojsonLineWithLabel(item2.layerKey, item2.lineWithLabel);
-      if (item2.layerKey == 'fangHongWater') {
+      if (item2.layerKey == "fangHongWater") {
         let layer = new mapboxL7.LineLayer({
-          name: 'fangHongWater',
+          name: "fangHongWater",
         })
           .source(item2.lineWithLabel)
           .size(3)
-          .shape('line')
-          .texture('arrow')
-          .color('rgba(243, 26, 237,1)')
+          .shape("line")
+          .texture("arrow")
+          .color("rgba(243, 26, 237,1)")
           .animate({
             interval: 2, // 间隔
             duration: 3, // 持续时间，延时
@@ -488,29 +505,29 @@
             lineTexture: true, // 开启线的贴图功能
             iconStep: 200, // 设置贴图纹理的间距
             borderWidth: 0.4, // 默认文 0，最大有效值为 0.5
-            borderColor: '#fff', // 默认为 #ccc
+            borderColor: "#fff", // 默认为 #ccc
           });
         newfiberMapbox.addLayer(layer);
       }
     } else {
-      mapBoxVectorLayer.removeByIds([item2.layerKey, item2.layerKey + '_label']);
-      if (newfiberMapbox.getLayerByName('fangHongWater')) {
-        newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName('fangHongWater'));
+      mapBoxVectorLayer.removeByIds([item2.layerKey, item2.layerKey + "_label"]);
+      if (newfiberMapbox.getLayerByName("fangHongWater")) {
+        newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName("fangHongWater"));
       }
     }
   }
-  if (item2.layerKey == 'road') {
+  if (item2.layerKey == "road") {
     if (item2.isCheck) {
-      if (newfiberMapbox.getLayerByName('dynamicRoad')) {
-        newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName('dynamicRoad'));
+      if (newfiberMapbox.getLayerByName("dynamicRoad")) {
+        newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName("dynamicRoad"));
       }
       let layer = new mapboxL7.LineLayer({
-        name: 'dynamicRoad',
+        name: "dynamicRoad",
       })
         .source(item2.dynamicLineData)
         .size(1.3)
-        .shape('line')
-        .color('rgb(184, 184, 184)')
+        .shape("line")
+        .color("rgb(184, 184, 184)")
         .animate({
           interval: 1, // 间隔
           duration: 1.5, // 持续时间，延时
@@ -521,22 +538,22 @@
         });
       newfiberMapbox.addLayer(layer);
     } else {
-      newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName('dynamicRoad'));
+      newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName("dynamicRoad"));
     }
   }
-  if (item2.layerKey == 'waterLake') {
+  if (item2.layerKey == "waterLake") {
     if (item2.isCheck) {
-      if (newfiberMapbox.getLayerByName('waterLake')) {
-        newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName('waterLake'));
+      if (newfiberMapbox.getLayerByName("waterLake")) {
+        newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName("waterLake"));
       }
       let layer = new mapboxL7.LineLayer({
-        name: 'waterLake',
+        name: "waterLake",
       })
         .source(item2.dynamicLineData)
         .size(4)
-        .shape('line')
-        .texture('arrow')
-        .color('aqua')
+        .shape("line")
+        .texture("arrow")
+        .color("aqua")
         .animate({
           interval: 2, // 间隔
           duration: 3, // 持续时间，延时
@@ -547,29 +564,29 @@
           lineTexture: true, // 开启线的贴图功能
           iconStep: 200, // 设置贴图纹理的间距
           borderWidth: 0.4, // 默认文 0，最大有效值为 0.5
-          borderColor: '#fff', // 默认为 #ccc
+          borderColor: "#fff", // 默认为 #ccc
         });
       newfiberMapbox.addLayer(layer);
     } else {
-      newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName('waterLake'));
+      newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName("waterLake"));
     }
   }
-  if (item2.layerKey == 'centerCity') {
+  if (item2.layerKey == "centerCity") {
     if (item2.isCheck) {
-      mapBoxVectorLayer.addGeojsonLine('centerCity', item2.dynamicLineData, 4, 1, 0.5);
+      mapBoxVectorLayer.addGeojsonLine("centerCity", item2.dynamicLineData, 4, 1, 0.5);
     } else {
-      mapBoxVectorLayer.removeByIds(['centerCity']);
+      mapBoxVectorLayer.removeByIds(["centerCity"]);
     }
   }
 };
 onMounted(() => {
   // 清除所有的图层选中
-  bus.on('clearAllLayer', () => {
-    AllData.LayerData.forEach(data => {
-      data.children.map(item => {
+  bus.on("clearAllLayer", () => {
+    AllData.LayerData.forEach((data) => {
+      data.children.map((item) => {
         // item.layerVisible = true;
         // 做优化,全局为True,再执行隐藏工作,页面调用api太多了,这里应该只将展示的图层进行取消操作就行
-        item.layerVisible ? layerClick(item) : '';
+        item.layerVisible ? layerClick(item) : "";
       });
     });
   });
@@ -577,17 +594,17 @@
   /**控制图层的显示
    *@param LayerArraya:需要打开的图层名称,示例:["路网","中心城区"]
    */
-  bus.on('SetLayerShow', LayerArraya => {
-    AllData.LayerData.forEach(data => {
-      data.children.map(item => {
-        LayerArraya.includes(item.layerName) ? layerClick(item) : '';
+  bus.on("SetLayerShow", (LayerArraya) => {
+    AllData.LayerData.forEach((data) => {
+      data.children.map((item) => {
+        LayerArraya.includes(item.layerName) ? layerClick(item) : "";
       });
     });
   });
 });
 onBeforeUnmount(() => {
-  bus.off('clearAllLayer');
-  bus.off('SetLayerShow');
+  bus.off("clearAllLayer");
+  bus.off("SetLayerShow");
 });
 </script>
 
@@ -598,7 +615,7 @@
   position: absolute;
   top: 150px;
   right: 476px;
-  background: url('@/assets/images/Sponge_screen/TuChengBG.png') no-repeat center;
+  background: url("@/assets/images/Sponge_screen/TuChengBG.png") no-repeat center;
   background-size: contain;
   box-sizing: border-box;
   padding: 25px 0px;
@@ -614,7 +631,7 @@
       width: 190px;
       height: 25px;
       line-height: 25px;
-      background-image: url('@/assets/images/Sponge_screen/TuChengFenZuBG.png'),
+      background-image: url("@/assets/images/Sponge_screen/TuChengFenZuBG.png"),
         linear-gradient(to right, #1c899600, #1c8996, #1c899600);
       background-repeat: no-repeat;
       background-position: center;
@@ -672,6 +689,14 @@
     }
   }
 }
+.TuChengImgTrue {
+  transform: translateX(460px);
+  transition: all 1s ease;
+}
+.TuChengImgFalse {
+  transform: translateX(0px);
+  transition: all 1s ease;
+}
 // 动画
 /*
   进入和离开动画可以使用不同
diff --git a/src/views/oneMap/OverallOverview/LeftBox.vue b/src/views/oneMap/OverallOverview/LeftBox.vue
index e26dce0..70aad73 100644
--- a/src/views/oneMap/OverallOverview/LeftBox.vue
+++ b/src/views/oneMap/OverallOverview/LeftBox.vue
@@ -90,7 +90,13 @@
         <span class="tableHeaderList tableList4">监测时间</span>
         <span class="tableHeaderList tableList5">状态</span>
       </div>
-      <Vue3SeamlessScroll :list="FXJCData" :singleHeight="60" :singleWaitTime="1500" :hover="true" class="tableBody">
+      <Vue3SeamlessScroll
+        :list="FXJCData"
+        :singleHeight="60"
+        :singleWaitTime="1500"
+        :hover="true"
+        class="tableBody"
+      >
         <div class="tableBodyList" v-for="item in FXJCData">
           <span class="tableBodyList_span1" :title="item.name">{{ item.name }}</span>
           <span class="tableBodyList_span2" :title="item.jcdx">{{ item.jcdx }} </span>
@@ -130,75 +136,75 @@
 ]);
 const FXJCData = ref([
   {
-    name: '延安中学',
-    jcdx: '燃气管网',
-    jczb: '甲烷浓度4.4%VOL',
-    jcsj: '2024/10/23 11:54',
-    zk: '正常',
+    name: "延安中学",
+    jcdx: "燃气管网",
+    jczb: "甲烷浓度4.4%VOL",
+    jcsj: "2024/10/23 11:54",
+    zk: "正常",
   },
   {
-    name: '延安大学附属医院',
-    jcdx: '燃气管网',
-    jczb: '甲烷浓度4%VOL',
-    jcsj: '2024/10/23 12:14',
-    zk: '正常',
+    name: "延安大学附属医院",
+    jcdx: "燃气管网",
+    jczb: "甲烷浓度4%VOL",
+    jcsj: "2024/10/23 12:14",
+    zk: "正常",
   },
   {
-    name: '王家坪大桥',
-    jcdx: '桥梁结构',
-    jczb: '倾角+1°',
-    jcsj: '2024/10/23 12:24',
-    zk: '正常',
+    name: "王家坪大桥",
+    jcdx: "桥梁结构",
+    jczb: "倾角+1°",
+    jcsj: "2024/10/23 12:24",
+    zk: "正常",
   },
   {
-    name: '王家坪大桥',
-    jcdx: '桥梁结构',
-    jczb: '位移12mm',
-    jcsj: '2024/10/23 13:13',
-    zk: '正常',
+    name: "王家坪大桥",
+    jcdx: "桥梁结构",
+    jczb: "位移12mm",
+    jcsj: "2024/10/23 13:13",
+    zk: "正常",
   },
   {
-    name: '王家坪大桥',
-    jcdx: '桥梁外部荷载',
-    jczb: '均布荷载6.4kn/m',
-    jcsj: '2024/10/23 13:43',
-    zk: '正常',
+    name: "王家坪大桥",
+    jcdx: "桥梁外部荷载",
+    jczb: "均布荷载6.4kn/m",
+    jcsj: "2024/10/23 13:43",
+    zk: "正常",
   },
   {
-    name: '王家坪大桥',
-    jcdx: '桥梁气象环境',
-    jczb: '风速3.2m/s',
-    jcsj: '2024/10/23 14:03',
-    zk: '正常',
+    name: "王家坪大桥",
+    jcdx: "桥梁气象环境",
+    jczb: "风速3.2m/s",
+    jcsj: "2024/10/23 14:03",
+    zk: "正常",
   },
   {
-    name: '杨家岭隧道',
-    jcdx: '隧道结构',
-    jczb: '裂缝宽度0.12mm',
-    jcsj: '2024/10/23 14:05',
-    zk: '正常',
+    name: "杨家岭隧道",
+    jcdx: "隧道结构",
+    jczb: "裂缝宽度0.12mm",
+    jcsj: "2024/10/23 14:05",
+    zk: "正常",
   },
   {
-    name: '杨家岭隧道',
-    jcdx: '隧道结构',
-    jczb: '静应变+10με',
-    jcsj: '2024/10/23 14:25',
-    zk: '正常',
+    name: "杨家岭隧道",
+    jcdx: "隧道结构",
+    jczb: "静应变+10με",
+    jcsj: "2024/10/23 14:25",
+    zk: "正常",
   },
 
   {
-    name: '王家坪旧址门口',
-    jcdx: '积水液位',
-    jczb: '水深0m',
-    jcsj: '2024/10/23 15:21',
-    zk: '正常',
+    name: "王家坪旧址门口",
+    jcdx: "积水液位",
+    jczb: "水深0m",
+    jcsj: "2024/10/23 15:21",
+    zk: "正常",
   },
   {
-    name: '大砭沟与北大街交叉口',
-    jcdx: '积水液位',
-    jczb: '水深0m',
-    jcsj: '2024/10/23 15:25',
-    zk: '正常',
+    name: "大砭沟与北大街交叉口",
+    jcdx: "积水液位",
+    jczb: "水深0m",
+    jcsj: "2024/10/23 15:25",
+    zk: "正常",
   },
 ]);
 const yxjcname = ref("7天");
@@ -327,6 +333,7 @@
         text-align: center;
         margin-top: 5px;
         margin-left: 10px;
+        font-size: 16px;
       }
       .activedright {
         border: 1px solid #2cfce9;
@@ -387,7 +394,7 @@
             .gw {
               font-family: Source Han Sans CN;
               font-weight: bold;
-              font-size: 14px;
+              font-size: 16px;
               color: #85d2d4;
               padding-left: 5px;
               // background: yellow;
@@ -404,10 +411,10 @@
             }
             .gl {
               font-family: Source Han Sans CN;
-              font-weight: bold;
-              font-size: 14px;
-              color: #34909f;
               padding-left: 10px;
+              font-weight: bold;
+              font-size: 16px;
+              color: #85d2d4;
             }
           }
         }
@@ -462,7 +469,7 @@
         .head-right {
           margin-top: 2px;
           cursor: pointer;
-          font-size: 14px;
+          font-size: 16px;
           color: #ffffff;
           display: flex;
           line-height: 18px;
diff --git a/src/views/oneMap/OverallOverview/RightBox.vue b/src/views/oneMap/OverallOverview/RightBox.vue
index 0a70630..f9477ed 100644
--- a/src/views/oneMap/OverallOverview/RightBox.vue
+++ b/src/views/oneMap/OverallOverview/RightBox.vue
@@ -67,7 +67,7 @@
                 font-family: Source Han Sans CN;
                 font-weight: bold;
                 font-size: 13px;
-                color: #34909f;
+                color: #12f9ff;
               "
             >
               {{ item.dw }}
diff --git a/src/views/oneMap/SmartDrainage/PsLeftBox.vue b/src/views/oneMap/SmartDrainage/PsLeftBox.vue
index c06a241..fd6283a 100644
--- a/src/views/oneMap/SmartDrainage/PsLeftBox.vue
+++ b/src/views/oneMap/SmartDrainage/PsLeftBox.vue
@@ -21,7 +21,14 @@
             <div class="upperNum">
               <div
                 class="oflower"
-                :style="{ color: item.name == '易涝点' ? '#a2fff8FF' : item.name == '风险点' ? '#faecabFF' : '#92edbfFF' }"
+                :style="{
+                  color:
+                    item.name == '易涝点'
+                      ? '#a2fff8FF'
+                      : item.name == '风险点'
+                      ? '#faecabFF'
+                      : '#92edbfFF',
+                }"
               >
                 {{ item.num }}
               </div>
@@ -41,7 +48,13 @@
           <span style="width: 45%; padding-left: 30px">{{ partName }}</span>
           <span style="width: 45%; padding-left: 130px">位置</span>
         </div>
-        <Vue3SeamlessScroll :list="dataList" :singleHeight="36" :singleWaitTime="1500" :hover="true" class="scrollCont">
+        <Vue3SeamlessScroll
+          :list="dataList"
+          :singleHeight="36"
+          :singleWaitTime="1500"
+          :hover="true"
+          class="scrollCont"
+        >
           <div class="scrollCont">
             <li
               v-for="(item, index) in dataList"
@@ -98,40 +111,40 @@
   </div>
 </template>
 <script setup>
-import { ref, reactive, toRefs, onMounted, onBeforeUnmount } from 'vue';
-import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
-import mapbox from '@/views/oneMap/map/mapboxInTable.vue';
-import fxd from '@/assets/images/zhps/fxd.png'; //风险点
-import qxgw from '@/assets/images/zhps/qxgw.png'; //缺陷管网
-import yld from '@/assets/images/zhps/yld.png'; //易涝点
+import { ref, reactive, toRefs, onMounted, onBeforeUnmount } from "vue";
+import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
+import mapbox from "@/views/oneMap/map/mapboxInTable.vue";
+import fxd from "@/assets/images/zhps/fxd.png"; //风险点
+import qxgw from "@/assets/images/zhps/qxgw.png"; //缺陷管网
+import yld from "@/assets/images/zhps/yld.png"; //易涝点
 
-import qzfk_3d from './qzfk_3d.vue'; //
-import ChartRy from './chartRy.vue';
-import bus from '@/bus';
+import qzfk_3d from "./qzfk_3d.vue"; //
+import ChartRy from "./chartRy.vue";
+import bus from "@/bus";
 const AllData = reactive({});
 const ryData = ref({});
-const ryRefresh = ref('');
+const ryRefresh = ref("");
 const tableData = ref([
-  { name: '易涝点', num: '7', Imgurl: yld, dw: '处' },
-  { name: '风险点', num: '9', Imgurl: fxd, dw: '处' },
-  { name: '缺陷管网', num: '6.1', Imgurl: qxgw, dw: 'km' },
+  { name: "易涝点", num: "7", Imgurl: yld, dw: "处" },
+  { name: "风险点", num: "9", Imgurl: fxd, dw: "处" },
+  { name: "缺陷管网", num: "6.1", Imgurl: qxgw, dw: "km" },
 ]);
 const showRainList = ref([]);
-const Pointname = ref('');
+const Pointname = ref("");
 const dataList = ref([
-  { num: '1', yls: '永安路', wz: '百米大道永安路' },
-  { num: '2', yls: '永昌路北口', wz: '双拥大道永昌路' },
-  { num: '3', yls: '桥儿沟隧道', wz: '双拥大道桥儿沟' },
-  { num: '4', yls: '原水果市场', wz: '双拥大道东十里铺' },
-  { num: '5', yls: '王家坪旧址门口', wz: '圣地路' },
-  { num: '6', yls: '桥儿沟隧道', wz: '双拥大道桥儿沟' },
-  { num: '7', yls: '原水果市场', wz: '双拥大道东十里铺' },
+  { num: "1", yls: "永安路", wz: "百米大道永安路" },
+  { num: "2", yls: "永昌路北口", wz: "双拥大道永昌路" },
+  { num: "3", yls: "桥儿沟隧道", wz: "双拥大道桥儿沟" },
+  { num: "4", yls: "原水果市场", wz: "双拥大道东十里铺" },
+  { num: "5", yls: "王家坪旧址门口", wz: "圣地路" },
+  { num: "6", yls: "桥儿沟隧道", wz: "双拥大道桥儿沟" },
+  { num: "7", yls: "原水果市场", wz: "双拥大道东十里铺" },
 ]);
 const images = [
-  'https://server1.wh-nf.cn:6082/tif/0819_8.tif',
-  'https://server1.wh-nf.cn:6082/tif/0819_9.tif',
-  'https://server1.wh-nf.cn:6082/tif/0819_10.tif',
-  'https://server1.wh-nf.cn:6082/tif/0819_11.tif',
+  "https://server1.wh-nf.cn:6082/tif/0819_8.tif",
+  "https://server1.wh-nf.cn:6082/tif/0819_9.tif",
+  "https://server1.wh-nf.cn:6082/tif/0819_10.tif",
+  "https://server1.wh-nf.cn:6082/tif/0819_11.tif",
 ];
 // 普查现状点击事件
 function Pointclick(val) {
@@ -139,99 +152,110 @@
 }
 
 const yearList = ref([
-  { name: '1小时', value: 1 },
-  { name: '3小时', value: 2 },
-  { name: '12小时', value: 3 },
-  { name: '24小时', value: 4 },
+  { name: "1小时", value: 1 },
+  { name: "3小时", value: 2 },
+  { name: "12小时", value: 3 },
+  { name: "24小时", value: 4 },
 ]);
-const activedname = ref('1小时');
+const activedname = ref("1小时");
 // 时间点击事件
 function yearclick(val, index) {
   activedname.value = val.name;
 
-  showRainList.value = index == 0 ? ranLeng[0] : index == 1 ? ranLeng[1] : index == 2 ? ranLeng[2] : ranLeng[3];
+  showRainList.value =
+    index == 0
+      ? ranLeng[0]
+      : index == 1
+      ? ranLeng[1]
+      : index == 2
+      ? ranLeng[2]
+      : ranLeng[3];
 
-  console.log('index', index);
+  console.log("index", index);
   initRainImage([images[index]]);
 }
 const timeActive = ref(0);
 const ranLeng = [
   [
-    { value: '0-0.2', color: 'rgba(7, 213, 118, 0)' },
-    { value: '0.2-5', color: 'rgb(38, 129, 240,1)' },
-    { value: '5-16', color: 'rgba(222,230,0,1)' },
-    { value: '16-25', color: 'rgba(255,184,15,1)' },
-    { value: '>25', color: 'rgb(255, 26, 26,1)' },
+    { value: "0-0.2", color: "rgba(7, 213, 118, 0)" },
+    { value: "0.2-5", color: "rgb(38, 129, 240,1)" },
+    { value: "5-16", color: "rgba(222,230,0,1)" },
+    { value: "16-25", color: "rgba(255,184,15,1)" },
+    { value: ">25", color: "rgb(255, 26, 26,1)" },
   ],
   [
-    { value: '0-5', color: 'rgba(7, 213, 118, 0)' },
-    { value: '5-15', color: 'rgba(7, 213, 118, 1)' },
-    { value: '15-30', color: 'rgba(38, 129, 240,1)' },
-    { value: '30-70', color: 'rgba(247, 223, 56, 1)' },
-    { value: '70-140', color: 'rgba(230, 85, 41, 1)' },
-    { value: '>140', color: 'rgba(255, 26, 26, 1)' },
+    { value: "0-5", color: "rgba(7, 213, 118, 0)" },
+    { value: "5-15", color: "rgba(7, 213, 118, 1)" },
+    { value: "15-30", color: "rgba(38, 129, 240,1)" },
+    { value: "30-70", color: "rgba(247, 223, 56, 1)" },
+    { value: "70-140", color: "rgba(230, 85, 41, 1)" },
+    { value: ">140", color: "rgba(255, 26, 26, 1)" },
   ],
   [
-    { value: '0-5', color: 'rgba(7, 213, 118, 0)' },
-    { value: '5-15', color: 'rgba(7, 213, 118, 1)' },
-    { value: '15-30', color: 'rgba(38, 129, 240,1)' },
-    { value: '30-70', color: 'rgba(247, 223, 56, 1)' },
-    { value: '70-140', color: 'rgba(230, 85, 41, 1)' },
-    { value: '>140', color: 'rgba(255, 26, 26, 1)' },
+    { value: "0-5", color: "rgba(7, 213, 118, 0)" },
+    { value: "5-15", color: "rgba(7, 213, 118, 1)" },
+    { value: "15-30", color: "rgba(38, 129, 240,1)" },
+    { value: "30-70", color: "rgba(247, 223, 56, 1)" },
+    { value: "70-140", color: "rgba(230, 85, 41, 1)" },
+    { value: ">140", color: "rgba(255, 26, 26, 1)" },
   ],
   [
-    { value: '0-10', color: 'rgba(7, 213, 118, 0)' },
-    { value: '10-25', color: 'rgba(7, 213, 118, 1)' },
-    { value: '25-50', color: 'rgba(38, 129, 240,1)' },
-    { value: '50-100', color: 'rgba(247, 223, 56, 1)' },
-    { value: '100-250', color: 'rgba(230, 85, 41, 1)' },
-    { value: '>250', color: 'rgba(255, 26, 26, 1)' },
+    { value: "0-10", color: "rgba(7, 213, 118, 0)" },
+    { value: "10-25", color: "rgba(7, 213, 118, 1)" },
+    { value: "25-50", color: "rgba(38, 129, 240,1)" },
+    { value: "50-100", color: "rgba(247, 223, 56, 1)" },
+    { value: "100-250", color: "rgba(230, 85, 41, 1)" },
+    { value: ">250", color: "rgba(255, 26, 26, 1)" },
   ],
 ];
 
-const partName = ref('易涝点');
+const partName = ref("易涝点");
 // 普查切换
 function partClick(val) {
   partName.value = val.name;
-  if (partName.value == '风险点') {
-    bus.emit('setLayerVisible', { layername: 'fengXianPoint', isCheck: true });
-    bus.emit('setLayerVisible', { layername: 'yiLaoPoint', isCheck: false });
+  if (partName.value == "风险点") {
+    bus.emit("setLayerVisible", { layername: "fengXianPoint", isCheck: true });
+    bus.emit("setLayerVisible", { layername: "yiLaoPoint", isCheck: false });
     newfiberMapbox.map.easeTo({
       center: [109.488, 36.596],
       zoom: 13,
     });
     dataList.value = [
-      { num: '1', yls: '长青路石油小', wz: '石油小区后门' },
-      { num: '2', yls: '长青路纺织花园车', wz: '太阳鸟健身房' },
-      { num: '3', yls: '凯泽世纪花园', wz: '凯泽世纪花园' },
-      { num: '4', yls: '七里铺街 ', wz: '勘探公司' },
-      { num: '5', yls: '南关街大礼堂', wz: '大礼堂' },
-      { num: '6', yls: '柳林隧道博城向柳林方向引桥入口', wz: '柳林隧道博城向柳林方向引桥入口' },
-      { num: '7', yls: '杨家湾超市门前', wz: '杨家湾路延大萃园校园公寓对面' },
-      { num: '8', yls: '马家湾博城至培植中学', wz: '博城至培植中学门前' },
-      { num: '9', yls: '百米大道延安小学十字', wz: '百米大道延安小学十字' },
+      { num: "1", yls: "长青路石油小", wz: "石油小区后门" },
+      { num: "2", yls: "长青路纺织花园车", wz: "太阳鸟健身房" },
+      { num: "3", yls: "凯泽世纪花园", wz: "凯泽世纪花园" },
+      { num: "4", yls: "七里铺街 ", wz: "勘探公司" },
+      { num: "5", yls: "南关街大礼堂", wz: "大礼堂" },
+      {
+        num: "6",
+        yls: "柳林隧道博城向柳林方向引桥入口",
+        wz: "柳林隧道博城向柳林方向引桥入口",
+      },
+      { num: "7", yls: "杨家湾超市门前", wz: "杨家湾路延大萃园校园公寓对面" },
+      { num: "8", yls: "马家湾博城至培植中学", wz: "博城至培植中学门前" },
+      { num: "9", yls: "百米大道延安小学十字", wz: "百米大道延安小学十字" },
     ];
-  } else if (partName.value == '易涝点') {
-    bus.emit('setLayerVisible', { layername: 'fengXianPoint', isCheck: false });
-    bus.emit('setLayerVisible', { layername: 'yiLaoPoint', isCheck: true });
+  } else if (partName.value == "易涝点") {
+    bus.emit("setLayerVisible", { layername: "fengXianPoint", isCheck: false });
+    bus.emit("setLayerVisible", { layername: "yiLaoPoint", isCheck: true });
     newfiberMapbox.map.easeTo({
       center: [109.488, 36.596],
       zoom: 13,
     });
     dataList.value = [
-      { num: '1', yls: '永安路', wz: '百米大道永安路' },
-      { num: '2', yls: '永昌路北口', wz: '双拥大道永昌路' },
-      { num: '3', yls: '桥儿沟隧道', wz: '双拥大道桥儿沟' },
-      { num: '4', yls: '原水果市场', wz: '双拥大道东十里铺' },
-      { num: '5', yls: '王家坪旧址门口', wz: '圣地路' },
-      { num: '6', yls: '桥儿沟隧道', wz: '双拥大道桥儿沟' },
-      { num: '7', yls: '原水果市场', wz: '双拥大道东十里铺' },
-      { num: '8', yls: '原水果市场', wz: '双拥大道东十里铺' },
-      { num: '9', yls: '王家坪旧址门口', wz: '圣地路' },
+      { num: "1", yls: "永安路", wz: "百米大道永安路" },
+      { num: "2", yls: "永昌路北口", wz: "双拥大道永昌路" },
+      { num: "3", yls: "桥儿沟隧道", wz: "双拥大道桥儿沟" },
+      { num: "4", yls: "原水果市场", wz: "双拥大道东十里铺" },
+      { num: "5", yls: "王家坪旧址门口", wz: "圣地路" },
+      { num: "6", yls: "桥儿沟隧道", wz: "双拥大道桥儿沟" },
+      { num: "7", yls: "原水果市场", wz: "双拥大道东十里铺" },
+      { num: "8", yls: "原水果市场", wz: "双拥大道东十里铺" },
+      { num: "9", yls: "王家坪旧址门口", wz: "圣地路" },
     ];
   } else {
-    bus.emit('setLayerVisible', { layername: 'fengXianPoint', isCheck: false });
-    bus.emit('setLayerVisible', { layername: 'yiLaoPoint', isCheck: false });
+    bus.emit("setLayerVisible", { layername: "fengXianPoint", isCheck: false });
+    bus.emit("setLayerVisible", { layername: "yiLaoPoint", isCheck: false });
     newfiberMapbox.map.easeTo({
       center: [109.488, 36.596],
       zoom: 13,
@@ -247,15 +271,15 @@
   return file;
 }
 
-const createCanvas = id => {
-  let canvas = document.createElement('canvas');
-  canvas.id = 'canvas' + id;
-  canvas.style.height = '90%';
-  canvas.style.width = '90%';
-  canvas.style.position = 'relative';
-  canvas.style.top = '5px';
+const createCanvas = (id) => {
+  let canvas = document.createElement("canvas");
+  canvas.id = "canvas" + id;
+  canvas.style.height = "90%";
+  canvas.style.width = "90%";
+  canvas.style.position = "relative";
+  canvas.style.top = "5px";
   //canvas.style.display = 'none';
-  document.getElementById('rainend').append(canvas);
+  document.getElementById("rainend").append(canvas);
   return canvas;
 };
 
@@ -270,7 +294,7 @@
       width: tifImg.getWidth(),
       height: tifImg.getHeight(),
       domain: [0, 256],
-      colorScale: 'mycolorscale',
+      colorScale: "mycolorscale",
     }));
   plot.setData(readRasters[0], tifImg.getWidth(), tifImg.getHeight());
   plot.render();
@@ -283,51 +307,54 @@
     [bbox[2], bbox[1]],
     [bbox[0], bbox[1]],
   ];
-  if (newfiberMapbox_table.map.getLayer('canvas-layer' + i)) {
-    newfiberMapbox_table.map.removeLayer('canvas-layer' + i);
-    newfiberMapbox_table.map.removeSource('canvas-source' + i);
+  if (newfiberMapbox_table.map.getLayer("canvas-layer" + i)) {
+    newfiberMapbox_table.map.removeLayer("canvas-layer" + i);
+    newfiberMapbox_table.map.removeSource("canvas-source" + i);
   }
-  newfiberMapbox_table.map.addSource('canvas-source' + i, {
-    type: 'canvas',
+  newfiberMapbox_table.map.addSource("canvas-source" + i, {
+    type: "canvas",
     canvas: canvasId,
     coordinates: bbox,
     animate: true,
   });
 
   newfiberMapbox_table.map.addLayer({
-    id: 'canvas-layer' + i,
-    type: 'raster',
-    source: 'canvas-source' + i,
+    id: "canvas-layer" + i,
+    type: "raster",
+    source: "canvas-source" + i,
   });
-  newfiberMapbox_table.map.moveLayer('canvas-layer' + i);
+  newfiberMapbox_table.map.moveLayer("canvas-layer" + i);
 };
 
 const plotInit = (colorScale = colorScale) => {
   const minVal = colorScale[0].value;
   const maxVal = colorScale[colorScale.length - 1].value;
-  let color = colorScale.filter(i => Number(i.value) / maxVal <= 1);
-  if (color[color.length - 1].value / maxVal < 1) color.push({ value: maxVal, color: colorScale[color.length].color });
+  let color = colorScale.filter((i) => Number(i.value) / maxVal <= 1);
+  if (color[color.length - 1].value / maxVal < 1)
+    color.push({ value: maxVal, color: colorScale[color.length].color });
   plotty.addColorScale(
-    'mycolorscale',
-    color.map(i => i.color),
-    color.map(i => (i.value / maxVal).toFixed(5))
+    "mycolorscale",
+    color.map((i) => i.color),
+    color.map((i) => (i.value / maxVal).toFixed(5))
   );
 };
 
 let colorScale = [
-  { value: '0', color: 'rgba(7, 213, 118, 0)' },
-  { value: '0.1', color: 'rgba(7, 213, 118, 0)' },
-  { value: '5', color: 'rgba(7, 213, 118, 1)' },
-  { value: '15', color: 'rgba(38, 129, 240,1)' },
-  { value: '30', color: 'rgba(247, 223, 56, 1)' },
-  { value: '70', color: 'rgba(230, 85, 41, 1)' },
-  { value: '140', color: 'rgba(255, 26, 26, 1)' },
+  { value: "0", color: "rgba(7, 213, 118, 0)" },
+  { value: "0.1", color: "rgba(7, 213, 118, 0)" },
+  { value: "5", color: "rgba(7, 213, 118, 1)" },
+  { value: "15", color: "rgba(38, 129, 240,1)" },
+  { value: "30", color: "rgba(247, 223, 56, 1)" },
+  { value: "70", color: "rgba(230, 85, 41, 1)" },
+  { value: "140", color: "rgba(255, 26, 26, 1)" },
 ];
 let imageFiles = [];
 let canvas = [];
 let plot = null;
-const initRainImage = async imagesList => {
-  imageFiles = await Promise.all(imagesList.map(url => urlToFile(url, _.last(_.split(url, '/')))));
+const initRainImage = async (imagesList) => {
+  imageFiles = await Promise.all(
+    imagesList.map((url) => urlToFile(url, _.last(_.split(url, "/"))))
+  );
 
   canvas = createCanvas(0);
   plotInit(colorScale);
@@ -343,22 +370,34 @@
   // }, 1000);
 };
 
-const setRainImage = index => {
+const setRainImage = (index) => {
   var reader = new FileReader();
-  reader.onload = e => createPlot(e, canvas);
+  reader.onload = (e) => createPlot(e, canvas);
   reader.readAsArrayBuffer(imageFiles[index]);
 };
 
 // 缺陷逛网
 function getData() {
   let obj = {
-    xData: ['脱节', '接口材料脱落', '支管暗接', '异物穿入', '渗漏', '沉积', '结垢', '障碍物', '残墙与坝根', '树根', '浮渣'],
+    xData: [
+      "脱节",
+      "接口材料脱落",
+      "支管暗接",
+      "异物穿入",
+      "渗漏",
+      "沉积",
+      "结垢",
+      "障碍物",
+      "残墙与坝根",
+      "树根",
+      "浮渣",
+    ],
     data: [0.3, 0.8, 0.6, 0.4, 0.1, 0.2, 0.5, 0.7, 0.4, 0.1, 0.1],
     num: [],
   };
   let max = JSON.parse(JSON.stringify(obj.data));
   let one = max.sort((a, b) => b - a)[0];
-  max.forEach(i => {
+  max.forEach((i) => {
     obj.num.push(one);
   });
   ryData.value = obj;
@@ -371,9 +410,9 @@
   initRainImage([images[0]]);
 });
 onBeforeUnmount(() => {
-  bus.emit('setLayerVisible', { layername: 'fengXianPoint', isCheck: false });
-  bus.emit('setLayerVisible', { layername: 'yiLaoPoint', isCheck: false });
-  var canvas = document.getElementById('canvas0');
+  bus.emit("setLayerVisible", { layername: "fengXianPoint", isCheck: false });
+  bus.emit("setLayerVisible", { layername: "yiLaoPoint", isCheck: false });
+  var canvas = document.getElementById("canvas0");
   canvas.remove();
 });
 </script>
@@ -444,7 +483,7 @@
           height: 50%;
           font-family: Source Han Sans CN;
           font-weight: 400;
-          font-size: 14px;
+          font-size: 15px;
           color: #ffffff;
         }
       }
@@ -457,7 +496,11 @@
         height: 38px;
         width: 430px;
         margin: 0 auto;
-        background: linear-gradient(0deg, rgba(22, 193, 216, 0.8) 0%, rgba(0, 43, 67, 0.8) 100%);
+        background: linear-gradient(
+          0deg,
+          rgba(22, 193, 216, 0.8) 0%,
+          rgba(0, 43, 67, 0.8) 100%
+        );
         border-radius: 6px;
         border: 1px solid #15d2fd;
         display: flex;
@@ -481,7 +524,7 @@
           // justify-content: space-between;
           align-items: center;
           margin-top: 2px;
-          background: url('@/assets/images/zhps/liebiao.png') no-repeat;
+          background: url("@/assets/images/zhps/liebiao.png") no-repeat;
           background-size: 100% 100%;
           .tableBodyList_span1 {
             width: 10%;
@@ -520,7 +563,7 @@
           }
         }
         .activedright {
-          background: url('@/assets/images/zhps/lbxz.png') no-repeat;
+          background: url("@/assets/images/zhps/lbxz.png") no-repeat;
           background-size: 100% 100%;
         }
       }
@@ -557,6 +600,7 @@
         text-align: center;
         margin-top: 5px;
         margin-left: 10px;
+        font-size: 16px;
       }
       .activedright {
         border: 1px solid #2cfce9;
@@ -572,7 +616,7 @@
       .rainend {
         width: 440px;
         height: 85%;
-        background: url('@/assets/images/zhps/hsRain.png') no-repeat;
+        background: url("@/assets/images/zhps/hsRain.png") no-repeat;
         background-size: 100% 100%;
       }
       .rainLegend {
@@ -620,7 +664,7 @@
   height: 44px;
   line-height: 50px;
   width: 98%;
-  background: url('@/assets/newImgs/partBg.png') no-repeat;
+  background: url("@/assets/newImgs/partBg.png") no-repeat;
   background-size: 100% 100%;
   display: flex;
   align-items: center;
diff --git a/src/views/oneMap/SmartDrainage/PsRightBox.vue b/src/views/oneMap/SmartDrainage/PsRightBox.vue
index df3fdaf..dc78a71 100644
--- a/src/views/oneMap/SmartDrainage/PsRightBox.vue
+++ b/src/views/oneMap/SmartDrainage/PsRightBox.vue
@@ -34,7 +34,11 @@
               <span class="tableBodyList_span4">{{ item.kzsw }} </span>
               <span class="tableBodyList_span5">
                 <el-tag type="success" v-if="item.zt == '正常'">正常</el-tag>
-                <el-tag @click="showcswDalog(item)" style="cursor: pointer" type="warning" v-if="item.zt == '超控制常水位'"
+                <el-tag
+                  @click="showcswDalog(item)"
+                  style="cursor: pointer"
+                  type="warning"
+                  v-if="item.zt == '超控制常水位'"
                   >超控制常水位</el-tag
                 >
               </span>
@@ -45,24 +49,36 @@
           <div class="Titlelarge">河湖简介：延河</div>
           <div class="Contentdetails">
             延河为黄河右岸一级支流,发源于陕西省靖边县天赐湾乡周山南麓，经安塞县镰刀湾乡杨石寺村附近进人延安境内,自西北流向东南,经安塞、宝塔、延长等县(区),于延长南河沟乡凉水岸汇人黄河。延河全长286.9km,流城面积7725
-            km?,平均比降3.3%。市内河长248.5 km,市内面积7321 km?,主要支流有杏子河、坪桥川、西川河、南川河、蟠龙川等。
+            km?,平均比降3.3%。市内河长248.5 km,市内面积7321
+            km?,主要支流有杏子河、坪桥川、西川河、南川河、蟠龙川等。
           </div>
         </div>
       </div>
       <div class="leftSubTabsBox">
         <div class="tabContent" v-if="monitorname == '漫溢监测(1/29)'">
           <ul>
-            <li class="listOne curCick" v-for="(i, index) in listData" :key="index" @click="showMapDalog(i)">
+            <li
+              class="listOne curCick"
+              v-for="(i, index) in listData"
+              :key="index"
+              @click="showMapDalog(i)"
+            >
               <div class="line flex flex-align-center">
                 <div class="lable">站点名称：</div>
                 <div class="box flex flex-align-center flex-justcontent-center">
                   {{ i.siteName }}
                 </div>
-                <span :class="i.siteStatus == '在线' ? 'green' : 'rad'">{{ i.siteStatus }}</span>
+                <span
+                  class="box_Status"
+                  :class="i.siteStatus == '在线' ? 'green' : 'rad'"
+                  >{{ i.siteStatus }}</span
+                >
               </div>
               <div class="line flex flex-align-center">
                 <div class="lable">水<i></i>深：</div>
-                <div class="box flex flex-align-center flex-justcontent-center">{{ i.z || 0 }}米</div>
+                <div class="box flex flex-align-center flex-justcontent-center">
+                  {{ i.z || 0 }}米
+                </div>
               </div>
               <div class="line flex flex-align-center">
                 <div class="lable">风险分析：</div>
@@ -78,17 +94,28 @@
         </div>
         <div class="tabContent" v-if="monitorname == '积水监测(0/16)'">
           <ul>
-            <li class="listOne curCick" v-for="(i, index) in listData" :key="index" @click="JSshowMapDalog(i)">
+            <li
+              class="listOne curCick"
+              v-for="(i, index) in listData"
+              :key="index"
+              @click="JSshowMapDalog(i)"
+            >
               <div class="line flex flex-align-center">
                 <div class="lable">站点名称：</div>
                 <div class="box flex flex-align-center flex-justcontent-center">
                   {{ i.siteName }}
                 </div>
-                <span :class="i.siteStatus == '在线' ? 'green' : 'rad'">{{ i.siteStatus }}</span>
+                <span
+                  class="box_Status"
+                  :class="i.siteStatus == '在线' ? 'green' : 'rad'"
+                  >{{ i.siteStatus }}</span
+                >
               </div>
               <div class="line flex flex-align-center">
                 <div class="lable">水<i></i>深：</div>
-                <div class="box flex flex-align-center flex-justcontent-center">{{ i.z || 0 }}米</div>
+                <div class="box flex flex-align-center flex-justcontent-center">
+                  {{ i.z || 0 }}米
+                </div>
               </div>
               <div class="line flex flex-align-center">
                 <div class="lable">风险分析：</div>
@@ -117,13 +144,24 @@
         <span class="tableHeaderList tableList3">状态</span>
         <span class="tableHeaderList tableList4">操作</span>
       </div>
-      <Vue3SeamlessScroll :list="SSYJData" :singleHeight="34" :singleWaitTime="1500" :hover="true" class="tableBody">
+      <Vue3SeamlessScroll
+        :list="SSYJData"
+        :singleHeight="34"
+        :singleWaitTime="1500"
+        :hover="true"
+        class="tableBody"
+      >
         <div class="tableBodyList" v-for="item in SSYJData">
           <span class="tableBodyList_span1">{{ item.wz }}</span>
           <span class="tableBodyList_span2"> {{ item.sj }}</span>
           <span class="tableBodyList_span3">{{ item.zk }}</span>
           <span class="tableBodyList_span4">
-            <el-tag style="cursor: pointer" type="danger" v-if="item.cz == '派单'" @click="paidan(item)" size="small"
+            <el-tag
+              style="cursor: pointer"
+              type="danger"
+              v-if="item.cz == '派单'"
+              @click="paidan(item)"
+              size="small"
               >派单</el-tag
             >
             <el-tag size="small" type="success" v-if="item.cz == '已派单'">已派单</el-tag>
@@ -163,161 +201,164 @@
       </div>
     </div>
     <div class="fxChart">
-      <AssessmentjsEcharts :data="chartData2" :refresh="chartData2.refresh"></AssessmentjsEcharts>
+      <AssessmentjsEcharts
+        :data="chartData2"
+        :refresh="chartData2.refresh"
+      ></AssessmentjsEcharts>
     </div>
   </div>
 </template>
 
 <script setup>
-import { ref, reactive, toRefs, onMounted, onBeforeUnmount } from 'vue';
-import AssessmentjsEcharts from '@/views/oneMap/Echarts/AssessmentjsEcharts.vue';
-import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
-import bus from '@/bus';
+import { ref, reactive, toRefs, onMounted, onBeforeUnmount } from "vue";
+import AssessmentjsEcharts from "@/views/oneMap/Echarts/AssessmentjsEcharts.vue";
+import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
+import bus from "@/bus";
 const FXJCData = ref([
   {
-    xh: '1',
-    hd: '延河',
+    xh: "1",
+    hd: "延河",
     dqsw: 130,
     kzsw: 2000,
-    zt: '超控制常水位',
+    zt: "超控制常水位",
   },
   {
-    xh: '2',
-    hd: '杜甫川河',
+    xh: "2",
+    hd: "杜甫川河",
     dqsw: 10,
     kzsw: 300,
-    zt: '正常',
+    zt: "正常",
   },
   {
-    xh: '3',
-    hd: '西川河',
+    xh: "3",
+    hd: "西川河",
     dqsw: 11,
     kzsw: 700,
-    zt: '正常',
+    zt: "正常",
   },
   {
-    xh: '4',
-    hd: '南川河',
+    xh: "4",
+    hd: "南川河",
     dqsw: 12,
     kzsw: 700,
-    zt: '正常',
+    zt: "正常",
   },
 ]);
 const listData = ref([
-  { siteName: '东关大街与长青路交叉口', siteStatus: '在线', warnInfo: '无风险' },
-  { siteName: '大桥街与延河西路交叉口', siteStatus: '在线', warnInfo: '无风险' },
-  { siteName: '文化沟路与延河西路交叉口', siteStatus: '在线', warnInfo: '无风险' },
+  { siteName: "东关大街与长青路交叉口", siteStatus: "在线", warnInfo: "无风险" },
+  { siteName: "大桥街与延河西路交叉口", siteStatus: "在线", warnInfo: "无风险" },
+  { siteName: "文化沟路与延河西路交叉口", siteStatus: "在线", warnInfo: "无风险" },
 ]);
 const SSYJData = ref([
   {
-    wz: '东大街管网',
+    wz: "东大街管网",
     sj: 25,
-    zk: '高水位',
-    cz: '派单',
-    value: '004', //语音识别内容编码-前段自己设置的,后期项目有接口就直接替换数据唯一id
+    zk: "高水位",
+    cz: "派单",
+    value: "004", //语音识别内容编码-前段自己设置的,后期项目有接口就直接替换数据唯一id
   },
   {
-    wz: '枣园南路与枣园五路管网',
+    wz: "枣园南路与枣园五路管网",
     sj: 40,
-    zk: '满管',
-    cz: '派单',
-    value: '005',
+    zk: "满管",
+    cz: "派单",
+    value: "005",
   },
   {
-    wz: '王家坪旧址门口',
+    wz: "王家坪旧址门口",
     sj: 12,
-    zk: '积水',
-    cz: '派单',
-    value: '006',
+    zk: "积水",
+    cz: "派单",
+    value: "006",
   },
   {
-    wz: '金延安路与枣园大道管网 ',
+    wz: "金延安路与枣园大道管网 ",
     sj: 50,
-    zk: '满管',
-    cz: '已派单',
+    zk: "满管",
+    cz: "已派单",
   },
   {
-    wz: '延大路与杨家岭路管网  ',
+    wz: "延大路与杨家岭路管网  ",
     sj: 50,
-    zk: '满管',
-    cz: '已派单',
+    zk: "满管",
+    cz: "已派单",
   },
 ]);
 const yearList = ref([
-  { name: '月', value: 1 },
-  { name: '年', value: 2 },
+  { name: "月", value: 1 },
+  { name: "年", value: 2 },
 ]);
 const monitorData = ref([
-  { name: '漫溢监测(1/29)', value: 1 },
-  { name: '积水监测(0/16)', value: 2 },
-  { name: '水位监测(0/4)', value: 2 },
+  { name: "漫溢监测(1/29)", value: 1 },
+  { name: "积水监测(0/16)", value: 2 },
+  { name: "水位监测(0/4)", value: 2 },
 ]);
 const chartData2 = ref({
-  xAxis: ['12/1', '12/2', '12/3', '12/4', '12/5', '12/6'],
+  xAxis: ["12/1", "12/2", "12/3", "12/4", "12/5", "12/6"],
   refresh: 1,
 });
-const activedname = ref('月');
-const monitorname = ref('漫溢监测(1/29)');
+const activedname = ref("月");
+const monitorname = ref("漫溢监测(1/29)");
 function yearclick(val) {
   activedname.value = val.name;
 }
 
 function monitorclick(val) {
   monitorname.value = val.name;
-  if (monitorname.value == '漫溢监测(1/29)') {
+  if (monitorname.value == "漫溢监测(1/29)") {
     listData.value = [
-      { siteName: '东关大街与长青路交叉口', siteStatus: '在线', warnInfo: '无风险' },
-      { siteName: '大桥街与延河西路交叉口', siteStatus: '在线', warnInfo: '无风险' },
-      { siteName: '文化沟路与延河西路交叉口', siteStatus: '在线', warnInfo: '无风险' },
+      { siteName: "东关大街与长青路交叉口", siteStatus: "在线", warnInfo: "无风险" },
+      { siteName: "大桥街与延河西路交叉口", siteStatus: "在线", warnInfo: "无风险" },
+      { siteName: "文化沟路与延河西路交叉口", siteStatus: "在线", warnInfo: "无风险" },
     ];
-  } else if (monitorname.value == '积水监测(0/16)') {
+  } else if (monitorname.value == "积水监测(0/16)") {
     listData.value = [
-      { siteName: '东关大街与长青路交叉口', siteStatus: '在线', warnInfo: '无风险' },
-      { siteName: '大桥街与延河西路交叉口', siteStatus: '在线', warnInfo: '无风险' },
-      { siteName: '文化沟路与延河西路交叉口', siteStatus: '在线', warnInfo: '无风险' },
+      { siteName: "东关大街与长青路交叉口", siteStatus: "在线", warnInfo: "无风险" },
+      { siteName: "大桥街与延河西路交叉口", siteStatus: "在线", warnInfo: "无风险" },
+      { siteName: "文化沟路与延河西路交叉口", siteStatus: "在线", warnInfo: "无风险" },
     ];
   } else {
-    console.log(monitorname.value, '  monitorname.value');
+    console.log(monitorname.value, "  monitorname.value");
   }
 }
 // 弹框
 function showMapDalog(val) {
-  console.log(val.siteName, 'val.siteName');
+  console.log(val.siteName, "val.siteName");
   let data = {
     title: val.siteName,
-    comIDs: ['gwpm', 'jcsj'],
+    comIDs: ["gwpm", "jcsj"],
   };
-  bus.emit('publicDialog', data);
+  bus.emit("publicDialog", data);
   // showPipe.value = true;
 }
 // 积水弹框
 function JSshowMapDalog(val) {
   let data = {
     title: val.siteName,
-    comIDs: ['spjk', 'jcsj'],
+    comIDs: ["spjk", "jcsj"],
   };
-  bus.emit('publicDialog', data);
+  bus.emit("publicDialog", data);
   // showPipe.value = true;
 }
 
 // 派单
-const paidan = item => {
+const paidan = (item) => {
   let data = {
     title: item.wz,
-    comIDs: ['gdpf'],
+    comIDs: ["gdpf"],
     getSiteId: item.value,
   };
-  bus.emit('publicDialog', data);
+  bus.emit("publicDialog", data);
 };
 // 超控制常水位
 function showcswDalog(val) {
-  console.log(val, 'val');
+  console.log(val, "val");
   let data = {
-    title: val.hd + '监测点',
-    comIDs: ['PS_ckzcsw'],
+    title: val.hd + "监测点",
+    comIDs: ["PS_ckzcsw"],
   };
 
-  bus.emit('publicDialog', data);
+  bus.emit("publicDialog", data);
   // showPipe.value = true;
 }
 </script>
@@ -344,7 +385,7 @@
         width: 132px;
         height: 30px;
         padding: 2px 3px;
-        background: url('@/assets/images/zhps/fxpgw.png') no-repeat;
+        background: url("@/assets/images/zhps/fxpgw.png") no-repeat;
         background-size: 100% 100%;
         text-align: center;
         margin-top: 5px;
@@ -353,7 +394,7 @@
       .activedright {
         border: 1px solid #2cfce9;
         color: #e4f5ff;
-        background: url('@/assets/images/zhps/fxpgxz.png') no-repeat;
+        background: url("@/assets/images/zhps/fxpgxz.png") no-repeat;
         background-size: 100% 100%;
       }
     }
@@ -403,12 +444,15 @@
                 padding: 3px 0;
                 line-height: 20px;
                 border-radius: 2px 2px 2px 2px;
-                border: 1px solid #1cf5fc;
+                border: 1px solid #1cf4fc48;
                 text-align: center;
                 font-size: 14px;
                 font-weight: 400;
                 color: #ffffff;
               }
+              .box_Status {
+                font-size: 16px;
+              }
               .box2 {
                 width: 120px;
               }
@@ -429,9 +473,9 @@
                   background: rgba(255, 55, 55, 0.15);
                 }
                 &.green {
-                  border-color: #0fcd22;
-                  color: #0fcd22;
-                  background: rgba(15, 205, 34, 0.15);
+                  border-color: lime;
+                  color: lime;
+                  background: rgba(12, 134, 24, 0.15);
                 }
               }
             }
@@ -735,6 +779,7 @@
           text-align: center;
           position: relative;
           left: 40px;
+          font-size: 16px;
         }
         .activedright {
           border: 1px solid #2cfce9;
@@ -755,7 +800,7 @@
   height: 44px;
   line-height: 50px;
   width: 98%;
-  background: url('@/assets/newImgs/partBg.png') no-repeat;
+  background: url("@/assets/newImgs/partBg.png") no-repeat;
   background-size: 100% 100%;
   display: flex;
   align-items: center;
diff --git a/src/views/oneMap/components/ZHHM.vue b/src/views/oneMap/components/ZHHM.vue
index 23556f2..c953f52 100644
--- a/src/views/oneMap/components/ZHHM.vue
+++ b/src/views/oneMap/components/ZHHM.vue
@@ -711,6 +711,9 @@
   AllData.Charts4.setOption({
     tooltip: {
       trigger: "axis",
+      axisPointer: {
+        type: "shadow",
+      },
     },
     grid: {
       left: "3%",
@@ -766,56 +769,56 @@
         },
         data: Data.yAxis,
       },
-      {
-        name: "",
-        type: "pictorialBar",
-        symbolSize: [barWidth + 10, 15],
-        symbolOffset: [0, 8],
-        z: 10,
-        itemStyle: {
-          normal: {
-            color: "transparent",
-            borderColor: barTopColor,
-            borderType: "solid",
-            borderWidth: 10,
-          },
-        },
-        data: Data.yAxis,
-      },
-      {
-        name: "",
-        type: "pictorialBar",
-        symbolSize: [barWidth + 20, 20],
-        symbolOffset: [0, 12],
-        z: 12,
-        itemStyle: {
-          normal: {
-            color: "transparent",
-            borderColor: barTopColor,
-            borderType: "solid",
-            borderWidth: 10,
-          },
-        },
-        data: Data.yAxis,
-        stack: "check",
-      },
-      {
-        name: "",
-        type: "pictorialBar",
-        symbolSize: [barWidth + 25, 20],
-        symbolOffset: [0, 12],
-        z: 12,
-        itemStyle: {
-          normal: {
-            color: "transparent",
-            borderColor: "#3ACDC5",
-            borderType: "solid",
-            borderWidth: 10,
-          },
-        },
-        data: Data.yAxis,
-        stack: "check",
-      },
+      // {
+      //   name: "",
+      //   type: "pictorialBar",
+      //   symbolSize: [barWidth + 10, 15],
+      //   symbolOffset: [0, 8],
+      //   z: 10,
+      //   itemStyle: {
+      //     normal: {
+      //       color: "transparent",
+      //       borderColor: barTopColor,
+      //       borderType: "solid",
+      //       borderWidth: 10,
+      //     },
+      //   },
+      //   data: Data.yAxis,
+      // },
+      // {
+      //   name: "",
+      //   type: "pictorialBar",
+      //   symbolSize: [barWidth + 20, 20],
+      //   symbolOffset: [0, 12],
+      //   z: 12,
+      //   itemStyle: {
+      //     normal: {
+      //       color: "transparent",
+      //       borderColor: barTopColor,
+      //       borderType: "solid",
+      //       borderWidth: 10,
+      //     },
+      //   },
+      //   data: Data.yAxis,
+      //   stack: "check",
+      // },
+      // {
+      //   name: "",
+      //   type: "pictorialBar",
+      //   symbolSize: [barWidth + 25, 20],
+      //   symbolOffset: [0, 12],
+      //   z: 12,
+      //   itemStyle: {
+      //     normal: {
+      //       color: "transparent",
+      //       borderColor: "#3ACDC5",
+      //       borderType: "solid",
+      //       borderWidth: 10,
+      //     },
+      //   },
+      //   data: Data.yAxis,
+      //   stack: "check",
+      // },
       {
         name: "",
         type: "bar",
@@ -892,8 +895,9 @@
     zoom: 13,
     pitch: 55,
   });
-  initEcharts4();
   window.addEventListener("resize", initEcharts4);
+  initEcharts4();
+
   //mapBoxVectorLayer.addGeojsonPolygonWithLabel('yanAnPaiShuiArea', yanAnPaiShuiArea);
 });
 
diff --git a/src/views/oneMap/components/ZHRQ.vue b/src/views/oneMap/components/ZHRQ.vue
index bb36061..9a71ce2 100644
--- a/src/views/oneMap/components/ZHRQ.vue
+++ b/src/views/oneMap/components/ZHRQ.vue
@@ -30,12 +30,7 @@
               <span class="TJListValue">1922km</span>
             </div>
           </div>
-          <div class="RQ_EchartsBox" id="Echarts2Box">
-            <div class="ClickDiv1" @click="TuChengClick(1)"></div>
-            <div class="ClickDiv2" @click="TuChengClick(2)"></div>
-            <div class="ClickDiv3" @click="TuChengClick(3)"></div>
-            <div class="ClickDiv4" @click="TuChengClick(4)"></div>
-          </div>
+          <div class="RQ_EchartsBox" id="Echarts2Box"></div>
         </div>
       </div>
       <div class="ComBox LeftBox1_2">
@@ -155,7 +150,7 @@
         </div>
       </div>
       <div class="ComBox RightBox1_2">
-        <div class="Box_header">巡查反馈</div>
+        <div class="Box_header">预警处置</div>
         <div class="Box_Body">
           <div class="FK_headerBox">
             <div class="FK_headerBox_list" @click="dealOrNoDeal(1)">
@@ -658,9 +653,9 @@
     },
     grid: {
       left: "5%",
-      top: "10%",
+      top: "5%",
       right: "5%",
-      bottom: "10%",
+      bottom: "5%",
       containLabel: true,
     },
     xAxis: {
@@ -1450,7 +1445,7 @@
           border-radius: 2px;
           font-family: Source Han Sans CN;
           font-weight: 500;
-          font-size: 14px;
+          font-size: 16px;
           color: #c1d3d4;
           text-align: center;
           line-height: 20px;
@@ -1463,7 +1458,7 @@
           border: 1px solid #1cf5fc;
           font-family: Source Han Sans CN;
           font-weight: bold;
-          font-size: 12px;
+          font-size: 16px;
           color: #ebfeff;
           background: #1cf4fc22;
         }
@@ -1520,7 +1515,7 @@
             font-family: Source Han Sans CN;
             font-weight: 400;
             font-size: 14px;
-            color: #c1d3d4;
+            color: #ffffff;
             height: 28px;
             line-height: 28px;
             text-align: right;
diff --git a/src/views/oneMap/floodPrevention/FholRightBox.vue b/src/views/oneMap/floodPrevention/FholRightBox.vue
index c7d5a2c..bcffb94 100644
--- a/src/views/oneMap/floodPrevention/FholRightBox.vue
+++ b/src/views/oneMap/floodPrevention/FholRightBox.vue
@@ -7,21 +7,35 @@
     <div class="Assessmentop">
       <div class="tabContent">
         <ul>
-          <li class="listOne curCick" v-for="(i, index) in listData" :key="index" @click="showMapDalog(i)">
+          <li
+            class="listOne curCick"
+            v-for="(i, index) in listData"
+            :key="index"
+            @click="showMapDalog(i)"
+          >
             <div class="line flex flex-align-center">
               <div class="lable">站点名称：</div>
               <div class="box flex flex-align-center flex-justcontent-center">
                 {{ i.siteName }}
               </div>
-              <span :class="i.siteStatus == '在线' ? 'green' : 'rad'">{{ i.siteStatus }}</span>
+              <span
+                class="box_Status"
+                :class="i.siteStatus == '在线' ? 'green' : 'rad'"
+                >{{ i.siteStatus }}</span
+              >
             </div>
             <div class="line flex flex-align-center">
               <div class="lable">水<i></i>深：</div>
-              <div class="box flex flex-align-center flex-justcontent-center">{{ i.z || 0 }}米</div>
+              <div class="box flex flex-align-center flex-justcontent-center">
+                {{ i.z || 0 }}米
+              </div>
             </div>
             <div class="line flex flex-align-center">
               <div class="lable">风险分析：</div>
-              <div class="box flex flex-align-center flex-justcontent-center" :class="i.warnInfo != '无风险' ? 'cRad' : 'cGreen'">
+              <div
+                class="box flex flex-align-center flex-justcontent-center"
+                :class="i.warnInfo != '无风险' ? 'cRad' : 'cGreen'"
+              >
                 {{ i.warnInfo }}
               </div>
             </div>
@@ -42,7 +56,12 @@
           placeholder="请选择节点"
           style="width: 200px"
         >
-          <el-option v-for="item in siteData" :key="item.stCode" :label="item.stName" :value="item.stCode" />
+          <el-option
+            v-for="item in siteData"
+            :key="item.stCode"
+            :label="item.stName"
+            :value="item.stCode"
+          />
         </el-select>
       </div>
     </div>
@@ -88,7 +107,12 @@
       </div>
     </div>
     <div class="bzsp" v-if="bzname == '视频'">
-      <video controls="controls" src="https://47.97.35.33:6089/video/2021/20210621.mp4" id="videoEvent" loop></video>
+      <video
+        controls="controls"
+        src="https://47.97.35.33:6089/video/2021/20210621.mp4"
+        id="videoEvent"
+        loop
+      ></video>
     </div>
   </div>
   <!-- 入河排口运行监控 -->
@@ -118,98 +142,98 @@
 </template>
 
 <script setup>
-import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
-import { ref, reactive, toRefs, onMounted, onBeforeUnmount } from 'vue';
-import bus from '@/bus';
-import dispatchEch from './dispatchEch.vue';
-import bengzhantingzhi from '@/assets/images/fhpl/bengzhantingzhi.png';
-import bengzhanyunxing from '@/assets/images/fhpl/bengzhanyunxing.png';
+import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
+import { ref, reactive, toRefs, onMounted, onBeforeUnmount } from "vue";
+import bus from "@/bus";
+import dispatchEch from "./dispatchEch.vue";
+import bengzhantingzhi from "@/assets/images/fhpl/bengzhantingzhi.png";
+import bengzhanyunxing from "@/assets/images/fhpl/bengzhanyunxing.png";
 const bzList = ref([
-  { name: '工况', value: 1 },
-  { name: '视频', value: 2 },
+  { name: "工况", value: 1 },
+  { name: "视频", value: 2 },
 ]);
-const bzname = ref('工况');
+const bzname = ref("工况");
 function bzclick(val) {
   bzname.value = val.name;
 }
 const listData = ref([
-  { siteName: '东关大街与长青路交叉口', siteStatus: '在线', warnInfo: '无风险' },
-  { siteName: '大桥街与延河西路交叉口', siteStatus: '离线', warnInfo: '无风险' },
-  { siteName: '文化沟路与延河西路交叉口', siteStatus: '在线', warnInfo: '无风险' },
+  { siteName: "东关大街与长青路交叉口", siteStatus: "在线", warnInfo: "无风险" },
+  { siteName: "大桥街与延河西路交叉口", siteStatus: "离线", warnInfo: "无风险" },
+  { siteName: "文化沟路与延河西路交叉口", siteStatus: "在线", warnInfo: "无风险" },
 ]);
 const search = ref({
   stCode: 1,
 });
 const siteData = [
   {
-    stName: '罗家坪排涝泵站',
+    stName: "罗家坪排涝泵站",
     stCode: 1,
   },
 ];
 const FXJCData = ref([
   {
-    pk: '广通排口',
-    zk: '是',
-    ls: '0.1',
+    pk: "广通排口",
+    zk: "是",
+    ls: "0.1",
   },
   {
-    pk: '东三巷排口',
-    zk: '否',
-    ls: '0.0',
+    pk: "东三巷排口",
+    zk: "否",
+    ls: "0.0",
   },
   {
-    pk: '延河西路排口',
-    zk: '否',
-    ls: '0.0',
+    pk: "延河西路排口",
+    zk: "否",
+    ls: "0.0",
   },
   {
-    pk: '西沟大桥西排口1',
-    zk: '否',
-    ls: '0.0',
+    pk: "西沟大桥西排口1",
+    zk: "否",
+    ls: "0.0",
   },
   {
-    pk: '西沟大桥西排口2',
-    zk: '否',
-    ls: '0.0',
+    pk: "西沟大桥西排口2",
+    zk: "否",
+    ls: "0.0",
   },
 ]);
 const list = [
   {
-    name: '1#泵',
+    name: "1#泵",
     status: 1,
   },
   {
-    name: '2#泵',
+    name: "2#泵",
     status: 0,
   },
   {
-    name: '3#泵',
+    name: "3#泵",
     status: 0,
   },
 
   {
-    name: '4#泵',
+    name: "4#泵",
     status: 1,
   },
 ];
 // const showPipe = ref(false);
 // 弹框
 function showMapDalog(val) {
-  console.log(val.siteName, 'val.siteName');
+  console.log(val.siteName, "val.siteName");
   let data = {
     title: val.siteName,
-    comIDs: ['gwpm', 'jcsj'],
+    comIDs: ["gwpm", "jcsj"],
   };
-  bus.emit('publicDialog', data);
+  bus.emit("publicDialog", data);
   // showPipe.value = true;
 }
 // 积水弹框
 function spshowMapDalog(val) {
   let data = {
     title: val.pk,
-    comIDs: ['spjk'],
+    comIDs: ["spjk"],
   };
-  bus.emit('publicDialog', data);
+  bus.emit("publicDialog", data);
   // showPipe.value = true;
 }
 </script>
@@ -273,6 +297,9 @@
               font-weight: 400;
               color: #ffffff;
             }
+            .box_Status {
+              font-size: 16px;
+            }
             .box2 {
               width: 120px;
             }
@@ -293,9 +320,9 @@
                 background: rgba(255, 55, 55, 0.15);
               }
               &.green {
-                border-color: #0fcd22;
-                color: #0fcd22;
-                background: rgba(15, 205, 34, 0.15);
+                border-color: lime;
+                color: lime;
+                background: rgba(12, 134, 24, 0.15);
               }
             }
           }
@@ -543,7 +570,7 @@
   height: 44px;
   line-height: 50px;
   width: 98%;
-  background: url('@/assets/newImgs/partBg.png') no-repeat;
+  background: url("@/assets/newImgs/partBg.png") no-repeat;
   background-size: 100% 100%;
   display: flex;
   align-items: center;

diff --git a/src/views/oneMap/Echarts/publicEch.vue b/src/views/oneMap/Echarts/publicEch.vue
index 6ab1b7d..2816357 100644
--- a/src/views/oneMap/Echarts/publicEch.vue
+++ b/src/views/oneMap/Echarts/publicEch.vue
@@ -2,11 +2,11 @@
   <div :id="id" style="width: 100%; height: 100%"></div>
 </template>
 <script>
-import * as echarts from 'echarts';
-import { guid } from '@/utils/ruoyi';
-import { reactive, toRefs, onMounted, watch } from 'vue';
+import * as echarts from "echarts";
+import { guid } from "@/utils/ruoyi";
+import { reactive, toRefs, onMounted, watch } from "vue";
 export default {
-  name: 'line-chart',
+  name: "line-chart",
   props: {
     data: Object,
     refresh: Number,
@@ -28,28 +28,34 @@
       let chartDom = echarts.init(document.getElementById(allData.id));
 
       var shadowYData = [100, 100];
-      var barTopColor = ['#fe7285FF', '#1f93ffFF', '#31e1adFF', '#e4cd61FF', '#12f9ffFF'];
+      var barTopColor = ["#fe7285FF", "#1f93ffFF", "#31e1adFF", "#e4cd61FF", "#12f9ffFF"];
       var barBottomColor = [
-        'RGBA(154, 102, 125, 0.6)',
-        'RGBA(17, 109, 182, 0.6)',
-        'RGBA(27, 152, 136, 0.6)',
-        'RGBA(126, 138, 92, 0.6)',
-        'RGBA(10, 162, 178, 0.6)',
+        "RGBA(154, 102, 125, 0.6)",
+        "RGBA(17, 109, 182, 0.6)",
+        "RGBA(27, 152, 136, 0.6)",
+        "RGBA(126, 138, 92, 0.6)",
+        "RGBA(10, 162, 178, 0.6)",
       ];
       var barWidth = 20;
       var option;
       option = {
-        color: ['#3FFFC2', '#FFF21C'],
+        color: ["#3FFFC2", "#FFF21C"],
         tooltip: {
-          trigger: 'axis',
+          trigger: "axis",
 
-          formatter: params => {
+          formatter: (params) => {
             // console.log(params);
-            var relVal = '' + params[0].name;
+            var relVal = "" + params[0].name;
             for (var i = 0, l = params.length; i < l; i++) {
               if (params[i].seriesName) {
-                let unit = params[i].seriesName == '数量' ? '起' : '个';
-                relVal += '<br/>' + params[i].marker + params[i].seriesName + ' ' + params[i].value + unit;
+                let unit = params[i].seriesName == "数量" ? "起" : "个";
+                relVal +=
+                  "<br/>" +
+                  params[i].marker +
+                  params[i].seriesName +
+                  " " +
+                  params[i].value +
+                  unit;
               }
             }
             return relVal;
@@ -61,12 +67,12 @@
         },
         xAxis: [
           {
-            type: 'category',
+            type: "category",
             axisLine: {
               show: false,
               lineStyle: {
                 width: 2,
-                color: '#58b2ed',
+                color: "#58b2ed",
               },
             },
             splitLine: {
@@ -76,18 +82,18 @@
               show: false,
             },
             axisLabel: {
-              color: 'rgba(255,255,255,1)',
-              fontSize: 12,
-              fontFamily: 'AlibabaPuHuiTi',
+              color: "rgba(255,255,255,1)",
+              fontSize: 16,
+              fontFamily: "AlibabaPuHuiTi",
               formatter: function (params) {
-                var str = ''; // 最终拼接成的字符串
+                var str = ""; // 最终拼接成的字符串
                 var paramsLen = params.length; // 获取每项文字的个数
                 var len = 3; // 每行能显示的字的个数（根据实际情况自己设置）
                 var rowNumber = Math.ceil(paramsLen / len); // 换行的话，需要显示几行，向上取整
                 if (paramsLen > len) {
                   //大于设定的len就换行，不大于就不变化
                   for (var i = 0; i < rowNumber; i++) {
-                    var temp = ''; // 表示每一次截取的字符串
+                    var temp = ""; // 表示每一次截取的字符串
                     var start = i * len; // 开始截取的位置
                     var end = start + len; // 结束截取的位置
                     if (i == rowNumber - 1) {
@@ -95,7 +101,7 @@
                       temp = params.substring(start, paramsLen);
                     } else {
                       // 每一次拼接字符串并换行
-                      temp = params.substring(start, end) + '\n';
+                      temp = params.substring(start, end) + "\n";
                     }
                     str += temp; // 最终拼成的字符串
                   }
@@ -111,19 +117,19 @@
         ],
         yAxis: [
           {
-            name: '数量(起)',
-            type: 'value',
+            name: "数量(起)",
+            type: "value",
             axisLabel: {
-              color: '#3FFFC2',
+              color: "#3FFFC2",
               show: true,
             },
             nameTextStyle: {
-              color: '#3FFFC2',
+              color: "#3FFFC2",
             },
             splitLine: {
               lineStyle: {
-                type: 'dashed',
-                color: '#3FFFC2',
+                type: "dashed",
+                color: "#3FFFC2",
               },
             },
             alignTicks: true,
@@ -137,20 +143,20 @@
             bottom: 18,
             start: 0,
             end: 100,
-            handleSize: '100%',
-            fillerColor: '#94FA41',
-            borderColor: 'transparent',
-            backgroundColor: 'rgba(148, 250, 65, 0.2)',
+            handleSize: "100%",
+            fillerColor: "#94FA41",
+            borderColor: "transparent",
+            backgroundColor: "rgba(148, 250, 65, 0.2)",
             handleStyle: {
-              color: '#94FA41',
+              color: "#94FA41",
             },
             moveHandleSize: 0,
             textStyle: {
-              color: '#fff',
+              color: "#fff",
             },
           },
           {
-            type: 'inside',
+            type: "inside",
             show: true,
             height: 15,
             start: 1,
@@ -159,11 +165,11 @@
         ],
         series: [
           {
-            name: '数量',
-            type: 'pictorialBar',
+            name: "数量",
+            type: "pictorialBar",
             symbolSize: [barWidth, 10],
             symbolOffset: [0, -6],
-            symbolPosition: 'end',
+            symbolPosition: "end",
             z: 12,
             itemStyle: {
               normal: {
@@ -174,62 +180,62 @@
             },
             data: props.data.yAxis,
           },
+          // {
+          //   name: "",
+          //   type: "pictorialBar",
+          //   symbolSize: [barWidth + 10, 15],
+          //   symbolOffset: [0, 8],
+          //   z: 10,
+          //   itemStyle: {
+          //     normal: {
+          //       color: "transparent",
+          //       borderColor: barTopColor,
+          //       borderType: "solid",
+          //       borderWidth: 10,
+          //     },
+          //   },
+          //   data: props.data.yAxis,
+          // },
+          // {
+          //   name: '',
+          //   type: 'pictorialBar',
+          //   symbolSize: [barWidth + 20, 20],
+          //   symbolOffset: [0, 12],
+          //   z: 12,
+          //   itemStyle: {
+          //     normal: {
+          //       color: 'transparent',
+          //       borderColor: barTopColor,
+          //       borderType: 'solid',
+          //       borderWidth: 10,
+          //     },
+          //   },
+          //   data: props.data.yAxis,
+          //   stack: 'check',
+          // },
+          // {
+          //   name: "",
+          //   type: "pictorialBar",
+          //   symbolSize: [barWidth + 25, 20],
+          //   symbolOffset: [0, 12],
+          //   z: 12,
+          //   itemStyle: {
+          //     normal: {
+          //       color: "transparent",
+          //       borderColor: "#3ACDC5",
+          //       borderType: "solid",
+          //       borderWidth: 10,
+          //     },
+          //   },
+          //   data: props.data.yAxis,
+          //   stack: "check",
+          // },
           {
-            name: '',
-            type: 'pictorialBar',
-            symbolSize: [barWidth + 10, 15],
-            symbolOffset: [0, 8],
-            z: 10,
-            itemStyle: {
-              normal: {
-                color: 'transparent',
-                borderColor: barTopColor,
-                borderType: 'solid',
-                borderWidth: 10,
-              },
-            },
-            data: props.data.yAxis,
-          },
-          {
-            name: '',
-            type: 'pictorialBar',
-            symbolSize: [barWidth + 20, 20],
-            symbolOffset: [0, 12],
-            z: 12,
-            itemStyle: {
-              normal: {
-                color: 'transparent',
-                borderColor: barTopColor,
-                borderType: 'solid',
-                borderWidth: 10,
-              },
-            },
-            data: props.data.yAxis,
-            stack: 'check',
-          },
-          {
-            name: '',
-            type: 'pictorialBar',
-            symbolSize: [barWidth + 25, 20],
-            symbolOffset: [0, 12],
-            z: 12,
-            itemStyle: {
-              normal: {
-                color: 'transparent',
-                borderColor: '#3ACDC5',
-                borderType: 'solid',
-                borderWidth: 10,
-              },
-            },
-            data: props.data.yAxis,
-            stack: 'check',
-          },
-          {
-            name: '',
-            type: 'bar',
+            name: "",
+            type: "bar",
             barWidth: barWidth,
-            barGap: '10%', // Make series be overlap
-            barCateGoryGap: '10%',
+            barGap: "10%", // Make series be overlap
+            barCateGoryGap: "10%",
             itemStyle: {
               normal: {
                 color: function (params) {
@@ -264,7 +270,7 @@
     watch(
       () => props.refresh,
       () => {
-        console.log(props, 'propspropsprops');
+        console.log(props, "propspropsprops");
         if (allData.chartDom) {
           allData.chartDom.dispose();
           allData.chartDom = null;
@@ -276,7 +282,7 @@
     );
     onMounted(() => {
       init();
-      window.addEventListener('resize', resizeTheChart);
+      window.addEventListener("resize", resizeTheChart);
     });
     return {
       ...toRefs(allData),
diff --git a/src/views/oneMap/LayerControl/LayerControl.vue b/src/views/oneMap/LayerControl/LayerControl.vue
index 43fc007..2bdf6b8 100644
--- a/src/views/oneMap/LayerControl/LayerControl.vue
+++ b/src/views/oneMap/LayerControl/LayerControl.vue
@@ -1,6 +1,10 @@
 <template>
   <Transition name="slideTC">
-    <div class="LayerControl" v-show="ShowTuCheng">
+    <div
+      class="LayerControl"
+      v-show="ShowTuCheng"
+      :class="[showPanel ? 'TuChengImgTrue' : 'TuChengImgFalse']"
+    >
       <div class="GroupBox" v-for="item in AllData.LayerData" v-show="item.children">
         <div class="GroupName" @click="item.Show = !item.Show">{{ item.title }}</div>
         <!-- <Transition name="Group"> -->
@@ -30,30 +34,30 @@
 </template>
 
 <script setup name="LayerControl">
-import { ref, reactive, toRefs, onMounted } from 'vue';
+import { ref, reactive, toRefs, onMounted } from "vue";
 // 图层控制icon引入
-import { requireTuChengImg } from '@/utils/util';
-import yanAnPaiShuiArea from '@/assets/yanAnPaiShuiArea.json';
-import yanAnRoad from '@/assets/yanAnRoad.json';
-import yanAnWater from '@/assets/yanAnWater.json';
-import yanAnWSCLC from '@/assets/yanAnWSCLC.json';
-import yanAnCenterCity from '@/assets/yanAnCenterCity.json';
-import yanAnYSBZ from '@/assets/yanAnYSBZ.json';
-import yanAnYiLao from '@/assets/yanAnYiLao.json';
-import yanAnFengXian from '@/assets/yanAnFengXian.json';
-import yanAnPipeSupervise from '@/assets/yanAnPipeSupervise.json';
-import yanAnPKSupervise from '@/assets/yanAnPKSupervise.json';
-import yanAnNature from '@/assets/yanAnNature.json';
-import yanAnVideo from '@/assets/yanAnVideo.json';
-import yanAnMountain from '@/assets/yanAnMountain.json';
-import yanAnSmallWater from '@/assets/yanAnSmallWater.json';
-import yanAnRainArea from '@/assets/yanAnRainArea.json';
-import heDiJiaGu from '@/assets/heDiJiaGu.json';
-import heDiShuJun from '@/assets/heDiShuJun.json';
-import anXianGaiZao from '@/assets/anXianGaiZao.json';
-import bus from '@/bus';
-import axios from 'axios';
-import mapBoxVectorLayer from '@/utils/GISdocument/mapboxVectorLayer.js';
+import { requireTuChengImg } from "@/utils/util";
+import yanAnPaiShuiArea from "@/assets/yanAnPaiShuiArea.json";
+import yanAnRoad from "@/assets/yanAnRoad.json";
+import yanAnWater from "@/assets/yanAnWater.json";
+import yanAnWSCLC from "@/assets/yanAnWSCLC.json";
+import yanAnCenterCity from "@/assets/yanAnCenterCity.json";
+import yanAnYSBZ from "@/assets/yanAnYSBZ.json";
+import yanAnYiLao from "@/assets/yanAnYiLao.json";
+import yanAnFengXian from "@/assets/yanAnFengXian.json";
+import yanAnPipeSupervise from "@/assets/yanAnPipeSupervise.json";
+import yanAnPKSupervise from "@/assets/yanAnPKSupervise.json";
+import yanAnNature from "@/assets/yanAnNature.json";
+import yanAnVideo from "@/assets/yanAnVideo.json";
+import yanAnMountain from "@/assets/yanAnMountain.json";
+import yanAnSmallWater from "@/assets/yanAnSmallWater.json";
+import yanAnRainArea from "@/assets/yanAnRainArea.json";
+import heDiJiaGu from "@/assets/heDiJiaGu.json";
+import heDiShuJun from "@/assets/heDiShuJun.json";
+import anXianGaiZao from "@/assets/anXianGaiZao.json";
+import bus from "@/bus";
+import axios from "axios";
+import mapBoxVectorLayer from "@/utils/GISdocument/mapboxVectorLayer.js";
 const AllData = reactive({
   // 图层控制面板的渲染数据
   /**图层面板数据字段说明
@@ -66,216 +70,216 @@
    */
   LayerData: [
     {
-      title: '基本信息',
+      title: "基本信息",
       Show: true,
       children: [
         {
-          layerName: '蓝色地图',
-          layerKey: 'blackMap',
-          layerIcon: requireTuChengImg('zhongxinchengqu'),
+          layerName: "蓝色地图",
+          layerKey: "blackMap",
+          layerIcon: requireTuChengImg("zhongxinchengqu"),
           layerVisible: false,
         },
         {
-          layerName: '白色地图',
-          layerKey: 'whiteMap',
-          layerIcon: requireTuChengImg('zhongxinchengqu'),
+          layerName: "白色地图",
+          layerKey: "whiteMap",
+          layerIcon: requireTuChengImg("zhongxinchengqu"),
           layerVisible: false,
         },
         {
-          layerName: '影像地图',
-          layerKey: 'imageMap',
-          layerIcon: requireTuChengImg('zhongxinchengqu'),
+          layerName: "影像地图",
+          layerKey: "imageMap",
+          layerIcon: requireTuChengImg("zhongxinchengqu"),
           layerVisible: false,
         },
         {
-          layerName: '中心城区',
-          layerKey: 'centerCity',
-          layerIcon: requireTuChengImg('zhongxinchengqu'),
+          layerName: "中心城区",
+          layerKey: "centerCity",
+          layerIcon: requireTuChengImg("zhongxinchengqu"),
           layerVisible: false,
           dynamicLineData: yanAnCenterCity,
         },
         {
-          layerName: '三维建筑',
-          layerKey: 'buildingLayer',
-          layerIcon: '',
+          layerName: "三维建筑",
+          layerKey: "buildingLayer",
+          layerIcon: "",
           layerVisible: true,
         },
         {
-          layerName: '路网',
-          layerKey: 'road',
-          layerIcon: '',
+          layerName: "路网",
+          layerKey: "road",
+          layerIcon: "",
           layerVisible: true,
           dynamicLineData: yanAnRoad,
         },
         {
-          layerName: '河流水系',
-          layerKey: 'waterLake',
-          layerIcon: '',
+          layerName: "河流水系",
+          layerKey: "waterLake",
+          layerIcon: "",
           layerVisible: true,
           dynamicLineData: yanAnWater,
         },
         {
-          layerName: '防洪河道',
-          layerKey: 'fangHongWater',
-          layerIcon: '',
+          layerName: "防洪河道",
+          layerKey: "fangHongWater",
+          layerIcon: "",
           layerVisible: false,
           lineWithLabel: yanAnSmallWater,
         },
         {
-          layerName: '河堤疏浚',
-          layerKey: 'heDiShuJun',
-          layerIcon: '',
+          layerName: "河堤疏浚",
+          layerKey: "heDiShuJun",
+          layerIcon: "",
           layerVisible: false,
           lineWithLabel: heDiShuJun,
         },
         {
-          layerName: '河堤加固',
-          layerKey: 'heDiJiaGu',
-          layerIcon: '',
+          layerName: "河堤加固",
+          layerKey: "heDiJiaGu",
+          layerIcon: "",
           layerVisible: false,
           lineWithLabel: heDiJiaGu,
         },
         {
-          layerName: '岸线改造',
-          layerKey: 'anXianGaiZao',
-          layerIcon: '',
+          layerName: "岸线改造",
+          layerKey: "anXianGaiZao",
+          layerIcon: "",
           layerVisible: false,
           lineWithLabel: anXianGaiZao,
         },
         {
-          layerName: '河堤治理',
-          layerKey: 'heDiZhiLi',
-          layerIcon: '',
+          layerName: "河堤治理",
+          layerKey: "heDiZhiLi",
+          layerIcon: "",
           layerVisible: false,
           lineWithLabel: anXianGaiZao,
         },
         {
-          layerName: '空间格局',
-          layerKey: 'yanAnNature',
-          layerIcon: '',
+          layerName: "空间格局",
+          layerKey: "yanAnNature",
+          layerIcon: "",
           layerVisible: false,
           areaData: yanAnNature,
         },
         {
-          layerName: '山体修复',
-          layerKey: 'yanAnMountain',
-          layerIcon: '',
+          layerName: "山体修复",
+          layerKey: "yanAnMountain",
+          layerIcon: "",
           layerVisible: false,
           lineWithLabel: yanAnMountain,
         },
       ],
     },
     {
-      title: '燃气系统',
+      title: "燃气系统",
       Show: true,
       children: [
         {
-          layerName: '燃气管网',
-          layerKey: 'rq_all',
+          layerName: "燃气管网",
+          layerKey: "rq_all",
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: '干管',
-          layerKey: 'rq_SZLH',
+          layerName: "干管",
+          layerKey: "rq_SZLH",
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: '干管流向',
-          layerKey: 'sx_ya_smx_rq_line_sz',
+          layerName: "干管流向",
+          layerKey: "sx_ya_smx_rq_line_sz",
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: '主管',
-          layerKey: 'rq_TYLH',
+          layerName: "主管",
+          layerKey: "rq_TYLH",
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: '主管流向',
-          layerKey: 'sx_ya_smx_rq_line_zg',
+          layerName: "主管流向",
+          layerKey: "sx_ya_smx_rq_line_zg",
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: '支管',
-          layerKey: 'rq_LGLH',
+          layerName: "支管",
+          layerKey: "rq_LGLH",
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: '支管流向',
-          layerKey: 'sx_ya_smx_rq_line_zhig',
+          layerName: "支管流向",
+          layerKey: "sx_ya_smx_rq_line_zhig",
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: '其他管网',
-          layerKey: 'rq_other',
+          layerName: "其他管网",
+          layerKey: "rq_other",
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: '调压器',
-          layerKey: 'tiaoYaQi',
+          layerName: "调压器",
+          layerKey: "tiaoYaQi",
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: '节点',
-          layerKey: 'rq_jieDian',
+          layerName: "节点",
+          layerKey: "rq_jieDian",
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: '极性保护',
-          layerKey: 'jiXingBaoHu',
+          layerName: "极性保护",
+          layerKey: "jiXingBaoHu",
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: '流量计',
-          layerKey: 'rq_liuLiangJi',
+          layerName: "流量计",
+          layerKey: "rq_liuLiangJi",
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: '未知设备',
-          layerKey: 'rq_unknow',
+          layerName: "未知设备",
+          layerKey: "rq_unknow",
           layerIcon: null,
           layerVisible: false,
         },
       ],
     },
     {
-      title: '雨水系统',
+      title: "雨水系统",
       Show: true,
       children: [
         {
-          layerName: '雨水分区',
-          layerKey: 'rainArea',
+          layerName: "雨水分区",
+          layerKey: "rainArea",
           layerIcon: null,
           layerVisible: false,
           areaData: yanAnRainArea,
         },
         {
-          layerName: '排水分区',
-          layerKey: 'paishuiArea',
+          layerName: "排水分区",
+          layerKey: "paishuiArea",
           layerIcon: null,
           layerVisible: false,
           areaData: yanAnPaiShuiArea,
         },
         {
-          layerName: '雨水管网',
-          layerKey: 'ysLine1',
+          layerName: "雨水管网",
+          layerKey: "ysLine1",
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: '雨水管网流向',
-          layerKey: 'pipeline_info_flow_ys',
+          layerName: "雨水管网流向",
+          layerKey: "pipeline_info_flow_ys",
           layerIcon: null,
           layerVisible: false,
         },
@@ -286,8 +290,8 @@
         //   layerVisible: false,
         // },
         {
-          layerName: '雨水泵站',
-          layerKey: 'YSBZ',
+          layerName: "雨水泵站",
+          layerKey: "YSBZ",
           layerIcon: null,
           layerVisible: false,
           data: yanAnYSBZ,
@@ -295,24 +299,24 @@
       ],
     },
     {
-      title: '污水系统',
+      title: "污水系统",
       Show: true,
       children: [
         {
-          layerName: '污水分区',
-          layerKey: 'sewageArea',
+          layerName: "污水分区",
+          layerKey: "sewageArea",
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: '污水管网',
-          layerKey: 'wsLine1',
+          layerName: "污水管网",
+          layerKey: "wsLine1",
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: '污水管网流向',
-          layerKey: 'pipeline_info_flow_ws1',
+          layerName: "污水管网流向",
+          layerKey: "pipeline_info_flow_ws1",
           layerIcon: null,
           layerVisible: false,
         },
@@ -329,8 +333,8 @@
         //   layerVisible: false,
         // },
         {
-          layerName: '污水处理厂',
-          layerKey: 'WSCLC',
+          layerName: "污水处理厂",
+          layerKey: "WSCLC",
           layerIcon: null,
           layerVisible: false,
           data: yanAnWSCLC,
@@ -338,40 +342,40 @@
       ],
     },
     {
-      title: '感知设备',
+      title: "感知设备",
       Show: true,
       children: [
         {
-          layerName: '内涝易涝点',
-          layerKey: 'yiLaoPoint',
+          layerName: "内涝易涝点",
+          layerKey: "yiLaoPoint",
           layerIcon: null,
           layerVisible: false,
           data: yanAnYiLao,
         },
         {
-          layerName: '内涝风险点',
-          layerKey: 'fengXianPoint',
+          layerName: "内涝风险点",
+          layerKey: "fengXianPoint",
           layerIcon: null,
           layerVisible: false,
           data: yanAnFengXian,
         },
         {
-          layerName: '排水管网监测',
-          layerKey: 'pipeSupervise',
+          layerName: "排水管网监测",
+          layerKey: "pipeSupervise",
           layerIcon: null,
           layerVisible: false,
           data: yanAnPipeSupervise,
         },
         {
-          layerName: '排水排口监测',
-          layerKey: 'PKsupervise',
+          layerName: "排水排口监测",
+          layerKey: "PKsupervise",
           layerIcon: null,
           layerVisible: false,
           data: yanAnPKSupervise,
         },
         {
-          layerName: '视频监测',
-          layerKey: 'video',
+          layerName: "视频监测",
+          layerKey: "video",
           layerIcon: null,
           layerVisible: false,
           data: yanAnVideo,
@@ -386,98 +390,111 @@
     .concat(AllData.LayerData[2].children)
     .concat(AllData.LayerData[3].children)
     .concat(AllData.LayerData[4].children);
-  initeLegend.forEach(element => {
+  initeLegend.forEach((element) => {
     element.layername = element.layerKey;
   });
-  bus.emit('setLegendData', initeLegend);
+  bus.emit("setLegendData", initeLegend);
 });
 const props = defineProps({
   ShowTuCheng: false,
+  showPanel: false,
 });
 
 watch(
   () => props.ShowTuCheng,
   (newValue, oldValue) => {
-    console.log('ShowTuCheng变化了', newValue, oldValue);
+    console.log("ShowTuCheng变化了", newValue, oldValue);
   },
   { immediate: true, deep: true }
 );
 
-const layerClick = async item2 => {
+const layerClick = async (item2) => {
   item2.layerVisible = !item2.layerVisible;
   item2.isCheck = item2.layerVisible;
-  console.info(`点击了名称为${item2.layerName},图层ID为${item2.layerKey}的图层,点击后的图层展示情况为${item2.layerVisible}`);
-  bus.emit('setLayerVisible', { layername: item2.layerKey, isCheck: item2.isCheck });
-  if (item2.layerKey == 'whiteMap') {
-    AllData.LayerData[0]['children'][0].layerVisible = false;
-    AllData.LayerData[0]['children'][2].layerVisible = false;
-    let { data } = await axios.get('/static/libs/mapbox/style/customs/whiteMapStyle.json');
+  console.info(
+    `点击了名称为${item2.layerName},图层ID为${item2.layerKey}的图层,点击后的图层展示情况为${item2.layerVisible}`
+  );
+  bus.emit("setLayerVisible", { layername: item2.layerKey, isCheck: item2.isCheck });
+  if (item2.layerKey == "whiteMap") {
+    AllData.LayerData[0]["children"][0].layerVisible = false;
+    AllData.LayerData[0]["children"][2].layerVisible = false;
+    let { data } = await axios.get(
+      "/static/libs/mapbox/style/customs/whiteMapStyle.json"
+    );
     let newMapStyle;
     let oldMapStyle = newfiberMapbox.map.getStyle();
     let oldIds = [];
-    oldMapStyle.layers.forEach(layer => {
+    oldMapStyle.layers.forEach((layer) => {
       oldIds.push(layer.id);
     });
-    let newIds = data.layers.map(i => i.id);
-    oldIds.forEach(id => {
+    let newIds = data.layers.map((i) => i.id);
+    oldIds.forEach((id) => {
       let layer = data.layers[newIds.indexOf(id)];
       if (!layer) return;
-      Object.keys(layer.layout || {}).forEach(key => newfiberMapbox.map.setLayoutProperty(id, key, layer.layout[key]));
-      Object.keys(layer.paint || {}).forEach(key => newfiberMapbox.map.setPaintProperty(id, key, layer.paint[key]));
+      Object.keys(layer.layout || {}).forEach((key) =>
+        newfiberMapbox.map.setLayoutProperty(id, key, layer.layout[key])
+      );
+      Object.keys(layer.paint || {}).forEach((key) =>
+        newfiberMapbox.map.setPaintProperty(id, key, layer.paint[key])
+      );
     });
-    newfiberMapbox.map.setLayoutProperty('newfiber-XYZLayer', 'visibility', 'none');
+    newfiberMapbox.map.setLayoutProperty("newfiber-XYZLayer", "visibility", "none");
   }
-  if (item2.layerKey == 'blackMap') {
-    AllData.LayerData[0]['children'][1].layerVisible = false;
-    AllData.LayerData[0]['children'][2].layerVisible = false;
-    let { data } = await axios.get('/static/libs/mapbox/style/customs/night-style.json');
+  if (item2.layerKey == "blackMap") {
+    AllData.LayerData[0]["children"][1].layerVisible = false;
+    AllData.LayerData[0]["children"][2].layerVisible = false;
+    let { data } = await axios.get("/static/libs/mapbox/style/customs/night-style.json");
     let newMapStyle;
     let oldMapStyle = newfiberMapbox.map.getStyle();
     let oldIds = [];
-    oldMapStyle.layers.forEach(layer => {
+    oldMapStyle.layers.forEach((layer) => {
       oldIds.push(layer.id);
     });
-    let newIds = data.layers.map(i => i.id);
-    oldIds.forEach(id => {
+    let newIds = data.layers.map((i) => i.id);
+    oldIds.forEach((id) => {
       let layer = data.layers[newIds.indexOf(id)];
       if (!layer) return;
-      Object.keys(layer.layout || {}).forEach(key => newfiberMapbox.map.setLayoutProperty(id, key, layer.layout[key]));
-      Object.keys(layer.paint || {}).forEach(key => newfiberMapbox.map.setPaintProperty(id, key, layer.paint[key]));
+      Object.keys(layer.layout || {}).forEach((key) =>
+        newfiberMapbox.map.setLayoutProperty(id, key, layer.layout[key])
+      );
+      Object.keys(layer.paint || {}).forEach((key) =>
+        newfiberMapbox.map.setPaintProperty(id, key, layer.paint[key])
+      );
     });
-    newfiberMapbox.map.setLayoutProperty('newfiber-XYZLayer', 'visibility', 'none');
+    newfiberMapbox.map.setLayoutProperty("newfiber-XYZLayer", "visibility", "none");
   }
-  if (item2.layerKey == 'imageMap') {
-    AllData.LayerData[0]['children'][0].layerVisible = false;
-    AllData.LayerData[0]['children'][1].layerVisible = false;
-    newfiberMapbox.map.setLayoutProperty('newfiber-XYZLayer', 'visibility', 'visible');
-    newfiberMapbox.map.moveLayer('newfiber-XYZLayer', 'buildingLayer');
+  if (item2.layerKey == "imageMap") {
+    AllData.LayerData[0]["children"][0].layerVisible = false;
+    AllData.LayerData[0]["children"][1].layerVisible = false;
+    newfiberMapbox.map.setLayoutProperty("newfiber-XYZLayer", "visibility", "visible");
+    newfiberMapbox.map.moveLayer("newfiber-XYZLayer", "buildingLayer");
   }
   if (item2.areaData) {
     if (item2.isCheck) {
       mapBoxVectorLayer.addGeojsonPolygonWithLabel(item2.layerKey, item2.areaData);
     } else {
-      mapBoxVectorLayer.removeByIds([item2.layerKey, item2.layerKey + '_label']);
+      mapBoxVectorLayer.removeByIds([item2.layerKey, item2.layerKey + "_label"]);
     }
   }
-  if (item2.layerKey == 'buildingLayer') {
+  if (item2.layerKey == "buildingLayer") {
     if (item2.isCheck) {
-      newfiberMapbox.map.setLayoutProperty('buildingLayer', 'visibility', 'visible');
+      newfiberMapbox.map.setLayoutProperty("buildingLayer", "visibility", "visible");
     } else {
-      newfiberMapbox.map.setLayoutProperty('buildingLayer', 'visibility', 'none');
+      newfiberMapbox.map.setLayoutProperty("buildingLayer", "visibility", "none");
     }
   }
   if (item2.lineWithLabel) {
     if (item2.isCheck) {
       mapBoxVectorLayer.addGeojsonLineWithLabel(item2.layerKey, item2.lineWithLabel);
-      if (item2.layerKey == 'fangHongWater') {
+      if (item2.layerKey == "fangHongWater") {
         let layer = new mapboxL7.LineLayer({
-          name: 'fangHongWater',
+          name: "fangHongWater",
         })
           .source(item2.lineWithLabel)
           .size(3)
-          .shape('line')
-          .texture('arrow')
-          .color('rgba(243, 26, 237,1)')
+          .shape("line")
+          .texture("arrow")
+          .color("rgba(243, 26, 237,1)")
           .animate({
             interval: 2, // 间隔
             duration: 3, // 持续时间，延时
@@ -488,29 +505,29 @@
             lineTexture: true, // 开启线的贴图功能
             iconStep: 200, // 设置贴图纹理的间距
             borderWidth: 0.4, // 默认文 0，最大有效值为 0.5
-            borderColor: '#fff', // 默认为 #ccc
+            borderColor: "#fff", // 默认为 #ccc
           });
         newfiberMapbox.addLayer(layer);
       }
     } else {
-      mapBoxVectorLayer.removeByIds([item2.layerKey, item2.layerKey + '_label']);
-      if (newfiberMapbox.getLayerByName('fangHongWater')) {
-        newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName('fangHongWater'));
+      mapBoxVectorLayer.removeByIds([item2.layerKey, item2.layerKey + "_label"]);
+      if (newfiberMapbox.getLayerByName("fangHongWater")) {
+        newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName("fangHongWater"));
       }
     }
   }
-  if (item2.layerKey == 'road') {
+  if (item2.layerKey == "road") {
     if (item2.isCheck) {
-      if (newfiberMapbox.getLayerByName('dynamicRoad')) {
-        newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName('dynamicRoad'));
+      if (newfiberMapbox.getLayerByName("dynamicRoad")) {
+        newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName("dynamicRoad"));
       }
       let layer = new mapboxL7.LineLayer({
-        name: 'dynamicRoad',
+        name: "dynamicRoad",
       })
         .source(item2.dynamicLineData)
         .size(1.3)
-        .shape('line')
-        .color('rgb(184, 184, 184)')
+        .shape("line")
+        .color("rgb(184, 184, 184)")
         .animate({
           interval: 1, // 间隔
           duration: 1.5, // 持续时间，延时
@@ -521,22 +538,22 @@
         });
       newfiberMapbox.addLayer(layer);
     } else {
-      newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName('dynamicRoad'));
+      newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName("dynamicRoad"));
     }
   }
-  if (item2.layerKey == 'waterLake') {
+  if (item2.layerKey == "waterLake") {
     if (item2.isCheck) {
-      if (newfiberMapbox.getLayerByName('waterLake')) {
-        newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName('waterLake'));
+      if (newfiberMapbox.getLayerByName("waterLake")) {
+        newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName("waterLake"));
       }
       let layer = new mapboxL7.LineLayer({
-        name: 'waterLake',
+        name: "waterLake",
       })
         .source(item2.dynamicLineData)
         .size(4)
-        .shape('line')
-        .texture('arrow')
-        .color('aqua')
+        .shape("line")
+        .texture("arrow")
+        .color("aqua")
         .animate({
           interval: 2, // 间隔
           duration: 3, // 持续时间，延时
@@ -547,29 +564,29 @@
           lineTexture: true, // 开启线的贴图功能
           iconStep: 200, // 设置贴图纹理的间距
           borderWidth: 0.4, // 默认文 0，最大有效值为 0.5
-          borderColor: '#fff', // 默认为 #ccc
+          borderColor: "#fff", // 默认为 #ccc
         });
       newfiberMapbox.addLayer(layer);
     } else {
-      newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName('waterLake'));
+      newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName("waterLake"));
     }
   }
-  if (item2.layerKey == 'centerCity') {
+  if (item2.layerKey == "centerCity") {
     if (item2.isCheck) {
-      mapBoxVectorLayer.addGeojsonLine('centerCity', item2.dynamicLineData, 4, 1, 0.5);
+      mapBoxVectorLayer.addGeojsonLine("centerCity", item2.dynamicLineData, 4, 1, 0.5);
     } else {
-      mapBoxVectorLayer.removeByIds(['centerCity']);
+      mapBoxVectorLayer.removeByIds(["centerCity"]);
     }
   }
 };
 onMounted(() => {
   // 清除所有的图层选中
-  bus.on('clearAllLayer', () => {
-    AllData.LayerData.forEach(data => {
-      data.children.map(item => {
+  bus.on("clearAllLayer", () => {
+    AllData.LayerData.forEach((data) => {
+      data.children.map((item) => {
         // item.layerVisible = true;
         // 做优化,全局为True,再执行隐藏工作,页面调用api太多了,这里应该只将展示的图层进行取消操作就行
-        item.layerVisible ? layerClick(item) : '';
+        item.layerVisible ? layerClick(item) : "";
       });
     });
   });
@@ -577,17 +594,17 @@
   /**控制图层的显示
    *@param LayerArraya:需要打开的图层名称,示例:["路网","中心城区"]
    */
-  bus.on('SetLayerShow', LayerArraya => {
-    AllData.LayerData.forEach(data => {
-      data.children.map(item => {
-        LayerArraya.includes(item.layerName) ? layerClick(item) : '';
+  bus.on("SetLayerShow", (LayerArraya) => {
+    AllData.LayerData.forEach((data) => {
+      data.children.map((item) => {
+        LayerArraya.includes(item.layerName) ? layerClick(item) : "";
       });
     });
   });
 });
 onBeforeUnmount(() => {
-  bus.off('clearAllLayer');
-  bus.off('SetLayerShow');
+  bus.off("clearAllLayer");
+  bus.off("SetLayerShow");
 });
 </script>
 
@@ -598,7 +615,7 @@
   position: absolute;
   top: 150px;
   right: 476px;
-  background: url('@/assets/images/Sponge_screen/TuChengBG.png') no-repeat center;
+  background: url("@/assets/images/Sponge_screen/TuChengBG.png") no-repeat center;
   background-size: contain;
   box-sizing: border-box;
   padding: 25px 0px;
@@ -614,7 +631,7 @@
       width: 190px;
       height: 25px;
       line-height: 25px;
-      background-image: url('@/assets/images/Sponge_screen/TuChengFenZuBG.png'),
+      background-image: url("@/assets/images/Sponge_screen/TuChengFenZuBG.png"),
         linear-gradient(to right, #1c899600, #1c8996, #1c899600);
       background-repeat: no-repeat;
       background-position: center;
@@ -672,6 +689,14 @@
     }
   }
 }
+.TuChengImgTrue {
+  transform: translateX(460px);
+  transition: all 1s ease;
+}
+.TuChengImgFalse {
+  transform: translateX(0px);
+  transition: all 1s ease;
+}
 // 动画
 /*
   进入和离开动画可以使用不同
diff --git a/src/views/oneMap/OverallOverview/LeftBox.vue b/src/views/oneMap/OverallOverview/LeftBox.vue
index e26dce0..70aad73 100644
--- a/src/views/oneMap/OverallOverview/LeftBox.vue
+++ b/src/views/oneMap/OverallOverview/LeftBox.vue
@@ -90,7 +90,13 @@
         <span class="tableHeaderList tableList4">监测时间</span>
         <span class="tableHeaderList tableList5">状态</span>
       </div>
-      <Vue3SeamlessScroll :list="FXJCData" :singleHeight="60" :singleWaitTime="1500" :hover="true" class="tableBody">
+      <Vue3SeamlessScroll
+        :list="FXJCData"
+        :singleHeight="60"
+        :singleWaitTime="1500"
+        :hover="true"
+        class="tableBody"
+      >
         <div class="tableBodyList" v-for="item in FXJCData">
           <span class="tableBodyList_span1" :title="item.name">{{ item.name }}</span>
           <span class="tableBodyList_span2" :title="item.jcdx">{{ item.jcdx }} </span>
@@ -130,75 +136,75 @@
 ]);
 const FXJCData = ref([
   {
-    name: '延安中学',
-    jcdx: '燃气管网',
-    jczb: '甲烷浓度4.4%VOL',
-    jcsj: '2024/10/23 11:54',
-    zk: '正常',
+    name: "延安中学",
+    jcdx: "燃气管网",
+    jczb: "甲烷浓度4.4%VOL",
+    jcsj: "2024/10/23 11:54",
+    zk: "正常",
   },
   {
-    name: '延安大学附属医院',
-    jcdx: '燃气管网',
-    jczb: '甲烷浓度4%VOL',
-    jcsj: '2024/10/23 12:14',
-    zk: '正常',
+    name: "延安大学附属医院",
+    jcdx: "燃气管网",
+    jczb: "甲烷浓度4%VOL",
+    jcsj: "2024/10/23 12:14",
+    zk: "正常",
   },
   {
-    name: '王家坪大桥',
-    jcdx: '桥梁结构',
-    jczb: '倾角+1°',
-    jcsj: '2024/10/23 12:24',
-    zk: '正常',
+    name: "王家坪大桥",
+    jcdx: "桥梁结构",
+    jczb: "倾角+1°",
+    jcsj: "2024/10/23 12:24",
+    zk: "正常",
   },
   {
-    name: '王家坪大桥',
-    jcdx: '桥梁结构',
-    jczb: '位移12mm',
-    jcsj: '2024/10/23 13:13',
-    zk: '正常',
+    name: "王家坪大桥",
+    jcdx: "桥梁结构",
+    jczb: "位移12mm",
+    jcsj: "2024/10/23 13:13",
+    zk: "正常",
   },
   {
-    name: '王家坪大桥',
-    jcdx: '桥梁外部荷载',
-    jczb: '均布荷载6.4kn/m',
-    jcsj: '2024/10/23 13:43',
-    zk: '正常',
+    name: "王家坪大桥",
+    jcdx: "桥梁外部荷载",
+    jczb: "均布荷载6.4kn/m",
+    jcsj: "2024/10/23 13:43",
+    zk: "正常",
   },
   {
-    name: '王家坪大桥',
-    jcdx: '桥梁气象环境',
-    jczb: '风速3.2m/s',
-    jcsj: '2024/10/23 14:03',
-    zk: '正常',
+    name: "王家坪大桥",
+    jcdx: "桥梁气象环境",
+    jczb: "风速3.2m/s",
+    jcsj: "2024/10/23 14:03",
+    zk: "正常",
   },
   {
-    name: '杨家岭隧道',
-    jcdx: '隧道结构',
-    jczb: '裂缝宽度0.12mm',
-    jcsj: '2024/10/23 14:05',
-    zk: '正常',
+    name: "杨家岭隧道",
+    jcdx: "隧道结构",
+    jczb: "裂缝宽度0.12mm",
+    jcsj: "2024/10/23 14:05",
+    zk: "正常",
   },
   {
-    name: '杨家岭隧道',
-    jcdx: '隧道结构',
-    jczb: '静应变+10με',
-    jcsj: '2024/10/23 14:25',
-    zk: '正常',
+    name: "杨家岭隧道",
+    jcdx: "隧道结构",
+    jczb: "静应变+10με",
+    jcsj: "2024/10/23 14:25",
+    zk: "正常",
   },
 
   {
-    name: '王家坪旧址门口',
-    jcdx: '积水液位',
-    jczb: '水深0m',
-    jcsj: '2024/10/23 15:21',
-    zk: '正常',
+    name: "王家坪旧址门口",
+    jcdx: "积水液位",
+    jczb: "水深0m",
+    jcsj: "2024/10/23 15:21",
+    zk: "正常",
   },
   {
-    name: '大砭沟与北大街交叉口',
-    jcdx: '积水液位',
-    jczb: '水深0m',
-    jcsj: '2024/10/23 15:25',
-    zk: '正常',
+    name: "大砭沟与北大街交叉口",
+    jcdx: "积水液位",
+    jczb: "水深0m",
+    jcsj: "2024/10/23 15:25",
+    zk: "正常",
   },
 ]);
 const yxjcname = ref("7天");
@@ -327,6 +333,7 @@
         text-align: center;
         margin-top: 5px;
         margin-left: 10px;
+        font-size: 16px;
       }
       .activedright {
         border: 1px solid #2cfce9;
@@ -387,7 +394,7 @@
             .gw {
               font-family: Source Han Sans CN;
               font-weight: bold;
-              font-size: 14px;
+              font-size: 16px;
               color: #85d2d4;
               padding-left: 5px;
               // background: yellow;
@@ -404,10 +411,10 @@
             }
             .gl {
               font-family: Source Han Sans CN;
-              font-weight: bold;
-              font-size: 14px;
-              color: #34909f;
               padding-left: 10px;
+              font-weight: bold;
+              font-size: 16px;
+              color: #85d2d4;
             }
           }
         }
@@ -462,7 +469,7 @@
         .head-right {
           margin-top: 2px;
           cursor: pointer;
-          font-size: 14px;
+          font-size: 16px;
           color: #ffffff;
           display: flex;
           line-height: 18px;
diff --git a/src/views/oneMap/OverallOverview/RightBox.vue b/src/views/oneMap/OverallOverview/RightBox.vue
index 0a70630..f9477ed 100644
--- a/src/views/oneMap/OverallOverview/RightBox.vue
+++ b/src/views/oneMap/OverallOverview/RightBox.vue
@@ -67,7 +67,7 @@
                 font-family: Source Han Sans CN;
                 font-weight: bold;
                 font-size: 13px;
-                color: #34909f;
+                color: #12f9ff;
               "
             >
               {{ item.dw }}
diff --git a/src/views/oneMap/SmartDrainage/PsLeftBox.vue b/src/views/oneMap/SmartDrainage/PsLeftBox.vue
index c06a241..fd6283a 100644
--- a/src/views/oneMap/SmartDrainage/PsLeftBox.vue
+++ b/src/views/oneMap/SmartDrainage/PsLeftBox.vue
@@ -21,7 +21,14 @@
             <div class="upperNum">
               <div
                 class="oflower"
-                :style="{ color: item.name == '易涝点' ? '#a2fff8FF' : item.name == '风险点' ? '#faecabFF' : '#92edbfFF' }"
+                :style="{
+                  color:
+                    item.name == '易涝点'
+                      ? '#a2fff8FF'
+                      : item.name == '风险点'
+                      ? '#faecabFF'
+                      : '#92edbfFF',
+                }"
               >
                 {{ item.num }}
               </div>
@@ -41,7 +48,13 @@
           <span style="width: 45%; padding-left: 30px">{{ partName }}</span>
           <span style="width: 45%; padding-left: 130px">位置</span>
         </div>
-        <Vue3SeamlessScroll :list="dataList" :singleHeight="36" :singleWaitTime="1500" :hover="true" class="scrollCont">
+        <Vue3SeamlessScroll
+          :list="dataList"
+          :singleHeight="36"
+          :singleWaitTime="1500"
+          :hover="true"
+          class="scrollCont"
+        >
           <div class="scrollCont">
             <li
               v-for="(item, index) in dataList"
@@ -98,40 +111,40 @@
   </div>
 </template>
 <script setup>
-import { ref, reactive, toRefs, onMounted, onBeforeUnmount } from 'vue';
-import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
-import mapbox from '@/views/oneMap/map/mapboxInTable.vue';
-import fxd from '@/assets/images/zhps/fxd.png'; //风险点
-import qxgw from '@/assets/images/zhps/qxgw.png'; //缺陷管网
-import yld from '@/assets/images/zhps/yld.png'; //易涝点
+import { ref, reactive, toRefs, onMounted, onBeforeUnmount } from "vue";
+import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
+import mapbox from "@/views/oneMap/map/mapboxInTable.vue";
+import fxd from "@/assets/images/zhps/fxd.png"; //风险点
+import qxgw from "@/assets/images/zhps/qxgw.png"; //缺陷管网
+import yld from "@/assets/images/zhps/yld.png"; //易涝点
 
-import qzfk_3d from './qzfk_3d.vue'; //
-import ChartRy from './chartRy.vue';
-import bus from '@/bus';
+import qzfk_3d from "./qzfk_3d.vue"; //
+import ChartRy from "./chartRy.vue";
+import bus from "@/bus";
 const AllData = reactive({});
 const ryData = ref({});
-const ryRefresh = ref('');
+const ryRefresh = ref("");
 const tableData = ref([
-  { name: '易涝点', num: '7', Imgurl: yld, dw: '处' },
-  { name: '风险点', num: '9', Imgurl: fxd, dw: '处' },
-  { name: '缺陷管网', num: '6.1', Imgurl: qxgw, dw: 'km' },
+  { name: "易涝点", num: "7", Imgurl: yld, dw: "处" },
+  { name: "风险点", num: "9", Imgurl: fxd, dw: "处" },
+  { name: "缺陷管网", num: "6.1", Imgurl: qxgw, dw: "km" },
 ]);
 const showRainList = ref([]);
-const Pointname = ref('');
+const Pointname = ref("");
 const dataList = ref([
-  { num: '1', yls: '永安路', wz: '百米大道永安路' },
-  { num: '2', yls: '永昌路北口', wz: '双拥大道永昌路' },
-  { num: '3', yls: '桥儿沟隧道', wz: '双拥大道桥儿沟' },
-  { num: '4', yls: '原水果市场', wz: '双拥大道东十里铺' },
-  { num: '5', yls: '王家坪旧址门口', wz: '圣地路' },
-  { num: '6', yls: '桥儿沟隧道', wz: '双拥大道桥儿沟' },
-  { num: '7', yls: '原水果市场', wz: '双拥大道东十里铺' },
+  { num: "1", yls: "永安路", wz: "百米大道永安路" },
+  { num: "2", yls: "永昌路北口", wz: "双拥大道永昌路" },
+  { num: "3", yls: "桥儿沟隧道", wz: "双拥大道桥儿沟" },
+  { num: "4", yls: "原水果市场", wz: "双拥大道东十里铺" },
+  { num: "5", yls: "王家坪旧址门口", wz: "圣地路" },
+  { num: "6", yls: "桥儿沟隧道", wz: "双拥大道桥儿沟" },
+  { num: "7", yls: "原水果市场", wz: "双拥大道东十里铺" },
 ]);
 const images = [
-  'https://server1.wh-nf.cn:6082/tif/0819_8.tif',
-  'https://server1.wh-nf.cn:6082/tif/0819_9.tif',
-  'https://server1.wh-nf.cn:6082/tif/0819_10.tif',
-  'https://server1.wh-nf.cn:6082/tif/0819_11.tif',
+  "https://server1.wh-nf.cn:6082/tif/0819_8.tif",
+  "https://server1.wh-nf.cn:6082/tif/0819_9.tif",
+  "https://server1.wh-nf.cn:6082/tif/0819_10.tif",
+  "https://server1.wh-nf.cn:6082/tif/0819_11.tif",
 ];
 // 普查现状点击事件
 function Pointclick(val) {
@@ -139,99 +152,110 @@
 }
 
 const yearList = ref([
-  { name: '1小时', value: 1 },
-  { name: '3小时', value: 2 },
-  { name: '12小时', value: 3 },
-  { name: '24小时', value: 4 },
+  { name: "1小时", value: 1 },
+  { name: "3小时", value: 2 },
+  { name: "12小时", value: 3 },
+  { name: "24小时", value: 4 },
 ]);
-const activedname = ref('1小时');
+const activedname = ref("1小时");
 // 时间点击事件
 function yearclick(val, index) {
   activedname.value = val.name;
 
-  showRainList.value = index == 0 ? ranLeng[0] : index == 1 ? ranLeng[1] : index == 2 ? ranLeng[2] : ranLeng[3];
+  showRainList.value =
+    index == 0
+      ? ranLeng[0]
+      : index == 1
+      ? ranLeng[1]
+      : index == 2
+      ? ranLeng[2]
+      : ranLeng[3];
 
-  console.log('index', index);
+  console.log("index", index);
   initRainImage([images[index]]);
 }
 const timeActive = ref(0);
 const ranLeng = [
   [
-    { value: '0-0.2', color: 'rgba(7, 213, 118, 0)' },
-    { value: '0.2-5', color: 'rgb(38, 129, 240,1)' },
-    { value: '5-16', color: 'rgba(222,230,0,1)' },
-    { value: '16-25', color: 'rgba(255,184,15,1)' },
-    { value: '>25', color: 'rgb(255, 26, 26,1)' },
+    { value: "0-0.2", color: "rgba(7, 213, 118, 0)" },
+    { value: "0.2-5", color: "rgb(38, 129, 240,1)" },
+    { value: "5-16", color: "rgba(222,230,0,1)" },
+    { value: "16-25", color: "rgba(255,184,15,1)" },
+    { value: ">25", color: "rgb(255, 26, 26,1)" },
   ],
   [
-    { value: '0-5', color: 'rgba(7, 213, 118, 0)' },
-    { value: '5-15', color: 'rgba(7, 213, 118, 1)' },
-    { value: '15-30', color: 'rgba(38, 129, 240,1)' },
-    { value: '30-70', color: 'rgba(247, 223, 56, 1)' },
-    { value: '70-140', color: 'rgba(230, 85, 41, 1)' },
-    { value: '>140', color: 'rgba(255, 26, 26, 1)' },
+    { value: "0-5", color: "rgba(7, 213, 118, 0)" },
+    { value: "5-15", color: "rgba(7, 213, 118, 1)" },
+    { value: "15-30", color: "rgba(38, 129, 240,1)" },
+    { value: "30-70", color: "rgba(247, 223, 56, 1)" },
+    { value: "70-140", color: "rgba(230, 85, 41, 1)" },
+    { value: ">140", color: "rgba(255, 26, 26, 1)" },
   ],
   [
-    { value: '0-5', color: 'rgba(7, 213, 118, 0)' },
-    { value: '5-15', color: 'rgba(7, 213, 118, 1)' },
-    { value: '15-30', color: 'rgba(38, 129, 240,1)' },
-    { value: '30-70', color: 'rgba(247, 223, 56, 1)' },
-    { value: '70-140', color: 'rgba(230, 85, 41, 1)' },
-    { value: '>140', color: 'rgba(255, 26, 26, 1)' },
+    { value: "0-5", color: "rgba(7, 213, 118, 0)" },
+    { value: "5-15", color: "rgba(7, 213, 118, 1)" },
+    { value: "15-30", color: "rgba(38, 129, 240,1)" },
+    { value: "30-70", color: "rgba(247, 223, 56, 1)" },
+    { value: "70-140", color: "rgba(230, 85, 41, 1)" },
+    { value: ">140", color: "rgba(255, 26, 26, 1)" },
   ],
   [
-    { value: '0-10', color: 'rgba(7, 213, 118, 0)' },
-    { value: '10-25', color: 'rgba(7, 213, 118, 1)' },
-    { value: '25-50', color: 'rgba(38, 129, 240,1)' },
-    { value: '50-100', color: 'rgba(247, 223, 56, 1)' },
-    { value: '100-250', color: 'rgba(230, 85, 41, 1)' },
-    { value: '>250', color: 'rgba(255, 26, 26, 1)' },
+    { value: "0-10", color: "rgba(7, 213, 118, 0)" },
+    { value: "10-25", color: "rgba(7, 213, 118, 1)" },
+    { value: "25-50", color: "rgba(38, 129, 240,1)" },
+    { value: "50-100", color: "rgba(247, 223, 56, 1)" },
+    { value: "100-250", color: "rgba(230, 85, 41, 1)" },
+    { value: ">250", color: "rgba(255, 26, 26, 1)" },
   ],
 ];
 
-const partName = ref('易涝点');
+const partName = ref("易涝点");
 // 普查切换
 function partClick(val) {
   partName.value = val.name;
-  if (partName.value == '风险点') {
-    bus.emit('setLayerVisible', { layername: 'fengXianPoint', isCheck: true });
-    bus.emit('setLayerVisible', { layername: 'yiLaoPoint', isCheck: false });
+  if (partName.value == "风险点") {
+    bus.emit("setLayerVisible", { layername: "fengXianPoint", isCheck: true });
+    bus.emit("setLayerVisible", { layername: "yiLaoPoint", isCheck: false });
     newfiberMapbox.map.easeTo({
       center: [109.488, 36.596],
       zoom: 13,
     });
     dataList.value = [
-      { num: '1', yls: '长青路石油小', wz: '石油小区后门' },
-      { num: '2', yls: '长青路纺织花园车', wz: '太阳鸟健身房' },
-      { num: '3', yls: '凯泽世纪花园', wz: '凯泽世纪花园' },
-      { num: '4', yls: '七里铺街 ', wz: '勘探公司' },
-      { num: '5', yls: '南关街大礼堂', wz: '大礼堂' },
-      { num: '6', yls: '柳林隧道博城向柳林方向引桥入口', wz: '柳林隧道博城向柳林方向引桥入口' },
-      { num: '7', yls: '杨家湾超市门前', wz: '杨家湾路延大萃园校园公寓对面' },
-      { num: '8', yls: '马家湾博城至培植中学', wz: '博城至培植中学门前' },
-      { num: '9', yls: '百米大道延安小学十字', wz: '百米大道延安小学十字' },
+      { num: "1", yls: "长青路石油小", wz: "石油小区后门" },
+      { num: "2", yls: "长青路纺织花园车", wz: "太阳鸟健身房" },
+      { num: "3", yls: "凯泽世纪花园", wz: "凯泽世纪花园" },
+      { num: "4", yls: "七里铺街 ", wz: "勘探公司" },
+      { num: "5", yls: "南关街大礼堂", wz: "大礼堂" },
+      {
+        num: "6",
+        yls: "柳林隧道博城向柳林方向引桥入口",
+        wz: "柳林隧道博城向柳林方向引桥入口",
+      },
+      { num: "7", yls: "杨家湾超市门前", wz: "杨家湾路延大萃园校园公寓对面" },
+      { num: "8", yls: "马家湾博城至培植中学", wz: "博城至培植中学门前" },
+      { num: "9", yls: "百米大道延安小学十字", wz: "百米大道延安小学十字" },
     ];
-  } else if (partName.value == '易涝点') {
-    bus.emit('setLayerVisible', { layername: 'fengXianPoint', isCheck: false });
-    bus.emit('setLayerVisible', { layername: 'yiLaoPoint', isCheck: true });
+  } else if (partName.value == "易涝点") {
+    bus.emit("setLayerVisible", { layername: "fengXianPoint", isCheck: false });
+    bus.emit("setLayerVisible", { layername: "yiLaoPoint", isCheck: true });
     newfiberMapbox.map.easeTo({
       center: [109.488, 36.596],
       zoom: 13,
     });
     dataList.value = [
-      { num: '1', yls: '永安路', wz: '百米大道永安路' },
-      { num: '2', yls: '永昌路北口', wz: '双拥大道永昌路' },
-      { num: '3', yls: '桥儿沟隧道', wz: '双拥大道桥儿沟' },
-      { num: '4', yls: '原水果市场', wz: '双拥大道东十里铺' },
-      { num: '5', yls: '王家坪旧址门口', wz: '圣地路' },
-      { num: '6', yls: '桥儿沟隧道', wz: '双拥大道桥儿沟' },
-      { num: '7', yls: '原水果市场', wz: '双拥大道东十里铺' },
-      { num: '8', yls: '原水果市场', wz: '双拥大道东十里铺' },
-      { num: '9', yls: '王家坪旧址门口', wz: '圣地路' },
+      { num: "1", yls: "永安路", wz: "百米大道永安路" },
+      { num: "2", yls: "永昌路北口", wz: "双拥大道永昌路" },
+      { num: "3", yls: "桥儿沟隧道", wz: "双拥大道桥儿沟" },
+      { num: "4", yls: "原水果市场", wz: "双拥大道东十里铺" },
+      { num: "5", yls: "王家坪旧址门口", wz: "圣地路" },
+      { num: "6", yls: "桥儿沟隧道", wz: "双拥大道桥儿沟" },
+      { num: "7", yls: "原水果市场", wz: "双拥大道东十里铺" },
+      { num: "8", yls: "原水果市场", wz: "双拥大道东十里铺" },
+      { num: "9", yls: "王家坪旧址门口", wz: "圣地路" },
     ];
   } else {
-    bus.emit('setLayerVisible', { layername: 'fengXianPoint', isCheck: false });
-    bus.emit('setLayerVisible', { layername: 'yiLaoPoint', isCheck: false });
+    bus.emit("setLayerVisible", { layername: "fengXianPoint", isCheck: false });
+    bus.emit("setLayerVisible", { layername: "yiLaoPoint", isCheck: false });
     newfiberMapbox.map.easeTo({
       center: [109.488, 36.596],
       zoom: 13,
@@ -247,15 +271,15 @@
   return file;
 }
 
-const createCanvas = id => {
-  let canvas = document.createElement('canvas');
-  canvas.id = 'canvas' + id;
-  canvas.style.height = '90%';
-  canvas.style.width = '90%';
-  canvas.style.position = 'relative';
-  canvas.style.top = '5px';
+const createCanvas = (id) => {
+  let canvas = document.createElement("canvas");
+  canvas.id = "canvas" + id;
+  canvas.style.height = "90%";
+  canvas.style.width = "90%";
+  canvas.style.position = "relative";
+  canvas.style.top = "5px";
   //canvas.style.display = 'none';
-  document.getElementById('rainend').append(canvas);
+  document.getElementById("rainend").append(canvas);
   return canvas;
 };
 
@@ -270,7 +294,7 @@
       width: tifImg.getWidth(),
       height: tifImg.getHeight(),
       domain: [0, 256],
-      colorScale: 'mycolorscale',
+      colorScale: "mycolorscale",
     }));
   plot.setData(readRasters[0], tifImg.getWidth(), tifImg.getHeight());
   plot.render();
@@ -283,51 +307,54 @@
     [bbox[2], bbox[1]],
     [bbox[0], bbox[1]],
   ];
-  if (newfiberMapbox_table.map.getLayer('canvas-layer' + i)) {
-    newfiberMapbox_table.map.removeLayer('canvas-layer' + i);
-    newfiberMapbox_table.map.removeSource('canvas-source' + i);
+  if (newfiberMapbox_table.map.getLayer("canvas-layer" + i)) {
+    newfiberMapbox_table.map.removeLayer("canvas-layer" + i);
+    newfiberMapbox_table.map.removeSource("canvas-source" + i);
   }
-  newfiberMapbox_table.map.addSource('canvas-source' + i, {
-    type: 'canvas',
+  newfiberMapbox_table.map.addSource("canvas-source" + i, {
+    type: "canvas",
     canvas: canvasId,
     coordinates: bbox,
     animate: true,
   });
 
   newfiberMapbox_table.map.addLayer({
-    id: 'canvas-layer' + i,
-    type: 'raster',
-    source: 'canvas-source' + i,
+    id: "canvas-layer" + i,
+    type: "raster",
+    source: "canvas-source" + i,
   });
-  newfiberMapbox_table.map.moveLayer('canvas-layer' + i);
+  newfiberMapbox_table.map.moveLayer("canvas-layer" + i);
 };
 
 const plotInit = (colorScale = colorScale) => {
   const minVal = colorScale[0].value;
   const maxVal = colorScale[colorScale.length - 1].value;
-  let color = colorScale.filter(i => Number(i.value) / maxVal <= 1);
-  if (color[color.length - 1].value / maxVal < 1) color.push({ value: maxVal, color: colorScale[color.length].color });
+  let color = colorScale.filter((i) => Number(i.value) / maxVal <= 1);
+  if (color[color.length - 1].value / maxVal < 1)
+    color.push({ value: maxVal, color: colorScale[color.length].color });
   plotty.addColorScale(
-    'mycolorscale',
-    color.map(i => i.color),
-    color.map(i => (i.value / maxVal).toFixed(5))
+    "mycolorscale",
+    color.map((i) => i.color),
+    color.map((i) => (i.value / maxVal).toFixed(5))
   );
 };
 
 let colorScale = [
-  { value: '0', color: 'rgba(7, 213, 118, 0)' },
-  { value: '0.1', color: 'rgba(7, 213, 118, 0)' },
-  { value: '5', color: 'rgba(7, 213, 118, 1)' },
-  { value: '15', color: 'rgba(38, 129, 240,1)' },
-  { value: '30', color: 'rgba(247, 223, 56, 1)' },
-  { value: '70', color: 'rgba(230, 85, 41, 1)' },
-  { value: '140', color: 'rgba(255, 26, 26, 1)' },
+  { value: "0", color: "rgba(7, 213, 118, 0)" },
+  { value: "0.1", color: "rgba(7, 213, 118, 0)" },
+  { value: "5", color: "rgba(7, 213, 118, 1)" },
+  { value: "15", color: "rgba(38, 129, 240,1)" },
+  { value: "30", color: "rgba(247, 223, 56, 1)" },
+  { value: "70", color: "rgba(230, 85, 41, 1)" },
+  { value: "140", color: "rgba(255, 26, 26, 1)" },
 ];
 let imageFiles = [];
 let canvas = [];
 let plot = null;
-const initRainImage = async imagesList => {
-  imageFiles = await Promise.all(imagesList.map(url => urlToFile(url, _.last(_.split(url, '/')))));
+const initRainImage = async (imagesList) => {
+  imageFiles = await Promise.all(
+    imagesList.map((url) => urlToFile(url, _.last(_.split(url, "/"))))
+  );
 
   canvas = createCanvas(0);
   plotInit(colorScale);
@@ -343,22 +370,34 @@
   // }, 1000);
 };
 
-const setRainImage = index => {
+const setRainImage = (index) => {
   var reader = new FileReader();
-  reader.onload = e => createPlot(e, canvas);
+  reader.onload = (e) => createPlot(e, canvas);
   reader.readAsArrayBuffer(imageFiles[index]);
 };
 
 // 缺陷逛网
 function getData() {
   let obj = {
-    xData: ['脱节', '接口材料脱落', '支管暗接', '异物穿入', '渗漏', '沉积', '结垢', '障碍物', '残墙与坝根', '树根', '浮渣'],
+    xData: [
+      "脱节",
+      "接口材料脱落",
+      "支管暗接",
+      "异物穿入",
+      "渗漏",
+      "沉积",
+      "结垢",
+      "障碍物",
+      "残墙与坝根",
+      "树根",
+      "浮渣",
+    ],
     data: [0.3, 0.8, 0.6, 0.4, 0.1, 0.2, 0.5, 0.7, 0.4, 0.1, 0.1],
     num: [],
   };
   let max = JSON.parse(JSON.stringify(obj.data));
   let one = max.sort((a, b) => b - a)[0];
-  max.forEach(i => {
+  max.forEach((i) => {
     obj.num.push(one);
   });
   ryData.value = obj;
@@ -371,9 +410,9 @@
   initRainImage([images[0]]);
 });
 onBeforeUnmount(() => {
-  bus.emit('setLayerVisible', { layername: 'fengXianPoint', isCheck: false });
-  bus.emit('setLayerVisible', { layername: 'yiLaoPoint', isCheck: false });
-  var canvas = document.getElementById('canvas0');
+  bus.emit("setLayerVisible", { layername: "fengXianPoint", isCheck: false });
+  bus.emit("setLayerVisible", { layername: "yiLaoPoint", isCheck: false });
+  var canvas = document.getElementById("canvas0");
   canvas.remove();
 });
 </script>
@@ -444,7 +483,7 @@
           height: 50%;
           font-family: Source Han Sans CN;
           font-weight: 400;
-          font-size: 14px;
+          font-size: 15px;
           color: #ffffff;
         }
       }
@@ -457,7 +496,11 @@
         height: 38px;
         width: 430px;
         margin: 0 auto;
-        background: linear-gradient(0deg, rgba(22, 193, 216, 0.8) 0%, rgba(0, 43, 67, 0.8) 100%);
+        background: linear-gradient(
+          0deg,
+          rgba(22, 193, 216, 0.8) 0%,
+          rgba(0, 43, 67, 0.8) 100%
+        );
         border-radius: 6px;
         border: 1px solid #15d2fd;
         display: flex;
@@ -481,7 +524,7 @@
           // justify-content: space-between;
           align-items: center;
           margin-top: 2px;
-          background: url('@/assets/images/zhps/liebiao.png') no-repeat;
+          background: url("@/assets/images/zhps/liebiao.png") no-repeat;
           background-size: 100% 100%;
           .tableBodyList_span1 {
             width: 10%;
@@ -520,7 +563,7 @@
           }
         }
         .activedright {
-          background: url('@/assets/images/zhps/lbxz.png') no-repeat;
+          background: url("@/assets/images/zhps/lbxz.png") no-repeat;
           background-size: 100% 100%;
         }
       }
@@ -557,6 +600,7 @@
         text-align: center;
         margin-top: 5px;
         margin-left: 10px;
+        font-size: 16px;
       }
       .activedright {
         border: 1px solid #2cfce9;
@@ -572,7 +616,7 @@
       .rainend {
         width: 440px;
         height: 85%;
-        background: url('@/assets/images/zhps/hsRain.png') no-repeat;
+        background: url("@/assets/images/zhps/hsRain.png") no-repeat;
         background-size: 100% 100%;
       }
       .rainLegend {
@@ -620,7 +664,7 @@
   height: 44px;
   line-height: 50px;
   width: 98%;
-  background: url('@/assets/newImgs/partBg.png') no-repeat;
+  background: url("@/assets/newImgs/partBg.png") no-repeat;
   background-size: 100% 100%;
   display: flex;
   align-items: center;
diff --git a/src/views/oneMap/SmartDrainage/PsRightBox.vue b/src/views/oneMap/SmartDrainage/PsRightBox.vue
index df3fdaf..dc78a71 100644
--- a/src/views/oneMap/SmartDrainage/PsRightBox.vue
+++ b/src/views/oneMap/SmartDrainage/PsRightBox.vue
@@ -34,7 +34,11 @@
               <span class="tableBodyList_span4">{{ item.kzsw }} </span>
               <span class="tableBodyList_span5">
                 <el-tag type="success" v-if="item.zt == '正常'">正常</el-tag>
-                <el-tag @click="showcswDalog(item)" style="cursor: pointer" type="warning" v-if="item.zt == '超控制常水位'"
+                <el-tag
+                  @click="showcswDalog(item)"
+                  style="cursor: pointer"
+                  type="warning"
+                  v-if="item.zt == '超控制常水位'"
                   >超控制常水位</el-tag
                 >
               </span>
@@ -45,24 +49,36 @@
           <div class="Titlelarge">河湖简介：延河</div>
           <div class="Contentdetails">
             延河为黄河右岸一级支流,发源于陕西省靖边县天赐湾乡周山南麓，经安塞县镰刀湾乡杨石寺村附近进人延安境内,自西北流向东南,经安塞、宝塔、延长等县(区),于延长南河沟乡凉水岸汇人黄河。延河全长286.9km,流城面积7725
-            km?,平均比降3.3%。市内河长248.5 km,市内面积7321 km?,主要支流有杏子河、坪桥川、西川河、南川河、蟠龙川等。
+            km?,平均比降3.3%。市内河长248.5 km,市内面积7321
+            km?,主要支流有杏子河、坪桥川、西川河、南川河、蟠龙川等。
           </div>
         </div>
       </div>
       <div class="leftSubTabsBox">
         <div class="tabContent" v-if="monitorname == '漫溢监测(1/29)'">
           <ul>
-            <li class="listOne curCick" v-for="(i, index) in listData" :key="index" @click="showMapDalog(i)">
+            <li
+              class="listOne curCick"
+              v-for="(i, index) in listData"
+              :key="index"
+              @click="showMapDalog(i)"
+            >
               <div class="line flex flex-align-center">
                 <div class="lable">站点名称：</div>
                 <div class="box flex flex-align-center flex-justcontent-center">
                   {{ i.siteName }}
                 </div>
-                <span :class="i.siteStatus == '在线' ? 'green' : 'rad'">{{ i.siteStatus }}</span>
+                <span
+                  class="box_Status"
+                  :class="i.siteStatus == '在线' ? 'green' : 'rad'"
+                  >{{ i.siteStatus }}</span
+                >
               </div>
               <div class="line flex flex-align-center">
                 <div class="lable">水<i></i>深：</div>
-                <div class="box flex flex-align-center flex-justcontent-center">{{ i.z || 0 }}米</div>
+                <div class="box flex flex-align-center flex-justcontent-center">
+                  {{ i.z || 0 }}米
+                </div>
               </div>
               <div class="line flex flex-align-center">
                 <div class="lable">风险分析：</div>
@@ -78,17 +94,28 @@
         </div>
         <div class="tabContent" v-if="monitorname == '积水监测(0/16)'">
           <ul>
-            <li class="listOne curCick" v-for="(i, index) in listData" :key="index" @click="JSshowMapDalog(i)">
+            <li
+              class="listOne curCick"
+              v-for="(i, index) in listData"
+              :key="index"
+              @click="JSshowMapDalog(i)"
+            >
               <div class="line flex flex-align-center">
                 <div class="lable">站点名称：</div>
                 <div class="box flex flex-align-center flex-justcontent-center">
                   {{ i.siteName }}
                 </div>
-                <span :class="i.siteStatus == '在线' ? 'green' : 'rad'">{{ i.siteStatus }}</span>
+                <span
+                  class="box_Status"
+                  :class="i.siteStatus == '在线' ? 'green' : 'rad'"
+                  >{{ i.siteStatus }}</span
+                >
               </div>
               <div class="line flex flex-align-center">
                 <div class="lable">水<i></i>深：</div>
-                <div class="box flex flex-align-center flex-justcontent-center">{{ i.z || 0 }}米</div>
+                <div class="box flex flex-align-center flex-justcontent-center">
+                  {{ i.z || 0 }}米
+                </div>
               </div>
               <div class="line flex flex-align-center">
                 <div class="lable">风险分析：</div>
@@ -117,13 +144,24 @@
         <span class="tableHeaderList tableList3">状态</span>
         <span class="tableHeaderList tableList4">操作</span>
       </div>
-      <Vue3SeamlessScroll :list="SSYJData" :singleHeight="34" :singleWaitTime="1500" :hover="true" class="tableBody">
+      <Vue3SeamlessScroll
+        :list="SSYJData"
+        :singleHeight="34"
+        :singleWaitTime="1500"
+        :hover="true"
+        class="tableBody"
+      >
         <div class="tableBodyList" v-for="item in SSYJData">
           <span class="tableBodyList_span1">{{ item.wz }}</span>
           <span class="tableBodyList_span2"> {{ item.sj }}</span>
           <span class="tableBodyList_span3">{{ item.zk }}</span>
           <span class="tableBodyList_span4">
-            <el-tag style="cursor: pointer" type="danger" v-if="item.cz == '派单'" @click="paidan(item)" size="small"
+            <el-tag
+              style="cursor: pointer"
+              type="danger"
+              v-if="item.cz == '派单'"
+              @click="paidan(item)"
+              size="small"
               >派单</el-tag
             >
             <el-tag size="small" type="success" v-if="item.cz == '已派单'">已派单</el-tag>
@@ -163,161 +201,164 @@
       </div>
     </div>
     <div class="fxChart">
-      <AssessmentjsEcharts :data="chartData2" :refresh="chartData2.refresh"></AssessmentjsEcharts>
+      <AssessmentjsEcharts
+        :data="chartData2"
+        :refresh="chartData2.refresh"
+      ></AssessmentjsEcharts>
     </div>
   </div>
 </template>
 
 <script setup>
-import { ref, reactive, toRefs, onMounted, onBeforeUnmount } from 'vue';
-import AssessmentjsEcharts from '@/views/oneMap/Echarts/AssessmentjsEcharts.vue';
-import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
-import bus from '@/bus';
+import { ref, reactive, toRefs, onMounted, onBeforeUnmount } from "vue";
+import AssessmentjsEcharts from "@/views/oneMap/Echarts/AssessmentjsEcharts.vue";
+import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
+import bus from "@/bus";
 const FXJCData = ref([
   {
-    xh: '1',
-    hd: '延河',
+    xh: "1",
+    hd: "延河",
     dqsw: 130,
     kzsw: 2000,
-    zt: '超控制常水位',
+    zt: "超控制常水位",
   },
   {
-    xh: '2',
-    hd: '杜甫川河',
+    xh: "2",
+    hd: "杜甫川河",
     dqsw: 10,
     kzsw: 300,
-    zt: '正常',
+    zt: "正常",
   },
   {
-    xh: '3',
-    hd: '西川河',
+    xh: "3",
+    hd: "西川河",
     dqsw: 11,
     kzsw: 700,
-    zt: '正常',
+    zt: "正常",
   },
   {
-    xh: '4',
-    hd: '南川河',
+    xh: "4",
+    hd: "南川河",
     dqsw: 12,
     kzsw: 700,
-    zt: '正常',
+    zt: "正常",
   },
 ]);
 const listData = ref([
-  { siteName: '东关大街与长青路交叉口', siteStatus: '在线', warnInfo: '无风险' },
-  { siteName: '大桥街与延河西路交叉口', siteStatus: '在线', warnInfo: '无风险' },
-  { siteName: '文化沟路与延河西路交叉口', siteStatus: '在线', warnInfo: '无风险' },
+  { siteName: "东关大街与长青路交叉口", siteStatus: "在线", warnInfo: "无风险" },
+  { siteName: "大桥街与延河西路交叉口", siteStatus: "在线", warnInfo: "无风险" },
+  { siteName: "文化沟路与延河西路交叉口", siteStatus: "在线", warnInfo: "无风险" },
 ]);
 const SSYJData = ref([
   {
-    wz: '东大街管网',
+    wz: "东大街管网",
     sj: 25,
-    zk: '高水位',
-    cz: '派单',
-    value: '004', //语音识别内容编码-前段自己设置的,后期项目有接口就直接替换数据唯一id
+    zk: "高水位",
+    cz: "派单",
+    value: "004", //语音识别内容编码-前段自己设置的,后期项目有接口就直接替换数据唯一id
   },
   {
-    wz: '枣园南路与枣园五路管网',
+    wz: "枣园南路与枣园五路管网",
     sj: 40,
-    zk: '满管',
-    cz: '派单',
-    value: '005',
+    zk: "满管",
+    cz: "派单",
+    value: "005",
   },
   {
-    wz: '王家坪旧址门口',
+    wz: "王家坪旧址门口",
     sj: 12,
-    zk: '积水',
-    cz: '派单',
-    value: '006',
+    zk: "积水",
+    cz: "派单",
+    value: "006",
   },
   {
-    wz: '金延安路与枣园大道管网 ',
+    wz: "金延安路与枣园大道管网 ",
     sj: 50,
-    zk: '满管',
-    cz: '已派单',
+    zk: "满管",
+    cz: "已派单",
   },
   {
-    wz: '延大路与杨家岭路管网  ',
+    wz: "延大路与杨家岭路管网  ",
     sj: 50,
-    zk: '满管',
-    cz: '已派单',
+    zk: "满管",
+    cz: "已派单",
   },
 ]);
 const yearList = ref([
-  { name: '月', value: 1 },
-  { name: '年', value: 2 },
+  { name: "月", value: 1 },
+  { name: "年", value: 2 },
 ]);
 const monitorData = ref([
-  { name: '漫溢监测(1/29)', value: 1 },
-  { name: '积水监测(0/16)', value: 2 },
-  { name: '水位监测(0/4)', value: 2 },
+  { name: "漫溢监测(1/29)", value: 1 },
+  { name: "积水监测(0/16)", value: 2 },
+  { name: "水位监测(0/4)", value: 2 },
 ]);
 const chartData2 = ref({
-  xAxis: ['12/1', '12/2', '12/3', '12/4', '12/5', '12/6'],
+  xAxis: ["12/1", "12/2", "12/3", "12/4", "12/5", "12/6"],
   refresh: 1,
 });
-const activedname = ref('月');
-const monitorname = ref('漫溢监测(1/29)');
+const activedname = ref("月");
+const monitorname = ref("漫溢监测(1/29)");
 function yearclick(val) {
   activedname.value = val.name;
 }
 
 function monitorclick(val) {
   monitorname.value = val.name;
-  if (monitorname.value == '漫溢监测(1/29)') {
+  if (monitorname.value == "漫溢监测(1/29)") {
     listData.value = [
-      { siteName: '东关大街与长青路交叉口', siteStatus: '在线', warnInfo: '无风险' },
-      { siteName: '大桥街与延河西路交叉口', siteStatus: '在线', warnInfo: '无风险' },
-      { siteName: '文化沟路与延河西路交叉口', siteStatus: '在线', warnInfo: '无风险' },
+      { siteName: "东关大街与长青路交叉口", siteStatus: "在线", warnInfo: "无风险" },
+      { siteName: "大桥街与延河西路交叉口", siteStatus: "在线", warnInfo: "无风险" },
+      { siteName: "文化沟路与延河西路交叉口", siteStatus: "在线", warnInfo: "无风险" },
     ];
-  } else if (monitorname.value == '积水监测(0/16)') {
+  } else if (monitorname.value == "积水监测(0/16)") {
     listData.value = [
-      { siteName: '东关大街与长青路交叉口', siteStatus: '在线', warnInfo: '无风险' },
-      { siteName: '大桥街与延河西路交叉口', siteStatus: '在线', warnInfo: '无风险' },
-      { siteName: '文化沟路与延河西路交叉口', siteStatus: '在线', warnInfo: '无风险' },
+      { siteName: "东关大街与长青路交叉口", siteStatus: "在线", warnInfo: "无风险" },
+      { siteName: "大桥街与延河西路交叉口", siteStatus: "在线", warnInfo: "无风险" },
+      { siteName: "文化沟路与延河西路交叉口", siteStatus: "在线", warnInfo: "无风险" },
     ];
   } else {
-    console.log(monitorname.value, '  monitorname.value');
+    console.log(monitorname.value, "  monitorname.value");
   }
 }
 // 弹框
 function showMapDalog(val) {
-  console.log(val.siteName, 'val.siteName');
+  console.log(val.siteName, "val.siteName");
   let data = {
     title: val.siteName,
-    comIDs: ['gwpm', 'jcsj'],
+    comIDs: ["gwpm", "jcsj"],
   };
-  bus.emit('publicDialog', data);
+  bus.emit("publicDialog", data);
   // showPipe.value = true;
 }
 // 积水弹框
 function JSshowMapDalog(val) {
   let data = {
     title: val.siteName,
-    comIDs: ['spjk', 'jcsj'],
+    comIDs: ["spjk", "jcsj"],
   };
-  bus.emit('publicDialog', data);
+  bus.emit("publicDialog", data);
   // showPipe.value = true;
 }
 
 // 派单
-const paidan = item => {
+const paidan = (item) => {
   let data = {
     title: item.wz,
-    comIDs: ['gdpf'],
+    comIDs: ["gdpf"],
     getSiteId: item.value,
   };
-  bus.emit('publicDialog', data);
+  bus.emit("publicDialog", data);
 };
 // 超控制常水位
 function showcswDalog(val) {
-  console.log(val, 'val');
+  console.log(val, "val");
   let data = {
-    title: val.hd + '监测点',
-    comIDs: ['PS_ckzcsw'],
+    title: val.hd + "监测点",
+    comIDs: ["PS_ckzcsw"],
   };
 
-  bus.emit('publicDialog', data);
+  bus.emit("publicDialog", data);
   // showPipe.value = true;
 }
 </script>
@@ -344,7 +385,7 @@
         width: 132px;
         height: 30px;
         padding: 2px 3px;
-        background: url('@/assets/images/zhps/fxpgw.png') no-repeat;
+        background: url("@/assets/images/zhps/fxpgw.png") no-repeat;
         background-size: 100% 100%;
         text-align: center;
         margin-top: 5px;
@@ -353,7 +394,7 @@
       .activedright {
         border: 1px solid #2cfce9;
         color: #e4f5ff;
-        background: url('@/assets/images/zhps/fxpgxz.png') no-repeat;
+        background: url("@/assets/images/zhps/fxpgxz.png") no-repeat;
         background-size: 100% 100%;
       }
     }
@@ -403,12 +444,15 @@
                 padding: 3px 0;
                 line-height: 20px;
                 border-radius: 2px 2px 2px 2px;
-                border: 1px solid #1cf5fc;
+                border: 1px solid #1cf4fc48;
                 text-align: center;
                 font-size: 14px;
                 font-weight: 400;
                 color: #ffffff;
               }
+              .box_Status {
+                font-size: 16px;
+              }
               .box2 {
                 width: 120px;
               }
@@ -429,9 +473,9 @@
                   background: rgba(255, 55, 55, 0.15);
                 }
                 &.green {
-                  border-color: #0fcd22;
-                  color: #0fcd22;
-                  background: rgba(15, 205, 34, 0.15);
+                  border-color: lime;
+                  color: lime;
+                  background: rgba(12, 134, 24, 0.15);
                 }
               }
             }
@@ -735,6 +779,7 @@
           text-align: center;
           position: relative;
           left: 40px;
+          font-size: 16px;
         }
         .activedright {
           border: 1px solid #2cfce9;
@@ -755,7 +800,7 @@
   height: 44px;
   line-height: 50px;
   width: 98%;
-  background: url('@/assets/newImgs/partBg.png') no-repeat;
+  background: url("@/assets/newImgs/partBg.png") no-repeat;
   background-size: 100% 100%;
   display: flex;
   align-items: center;
diff --git a/src/views/oneMap/components/ZHHM.vue b/src/views/oneMap/components/ZHHM.vue
index 23556f2..c953f52 100644
--- a/src/views/oneMap/components/ZHHM.vue
+++ b/src/views/oneMap/components/ZHHM.vue
@@ -711,6 +711,9 @@
   AllData.Charts4.setOption({
     tooltip: {
       trigger: "axis",
+      axisPointer: {
+        type: "shadow",
+      },
     },
     grid: {
       left: "3%",
@@ -766,56 +769,56 @@
         },
         data: Data.yAxis,
       },
-      {
-        name: "",
-        type: "pictorialBar",
-        symbolSize: [barWidth + 10, 15],
-        symbolOffset: [0, 8],
-        z: 10,
-        itemStyle: {
-          normal: {
-            color: "transparent",
-            borderColor: barTopColor,
-            borderType: "solid",
-            borderWidth: 10,
-          },
-        },
-        data: Data.yAxis,
-      },
-      {
-        name: "",
-        type: "pictorialBar",
-        symbolSize: [barWidth + 20, 20],
-        symbolOffset: [0, 12],
-        z: 12,
-        itemStyle: {
-          normal: {
-            color: "transparent",
-            borderColor: barTopColor,
-            borderType: "solid",
-            borderWidth: 10,
-          },
-        },
-        data: Data.yAxis,
-        stack: "check",
-      },
-      {
-        name: "",
-        type: "pictorialBar",
-        symbolSize: [barWidth + 25, 20],
-        symbolOffset: [0, 12],
-        z: 12,
-        itemStyle: {
-          normal: {
-            color: "transparent",
-            borderColor: "#3ACDC5",
-            borderType: "solid",
-            borderWidth: 10,
-          },
-        },
-        data: Data.yAxis,
-        stack: "check",
-      },
+      // {
+      //   name: "",
+      //   type: "pictorialBar",
+      //   symbolSize: [barWidth + 10, 15],
+      //   symbolOffset: [0, 8],
+      //   z: 10,
+      //   itemStyle: {
+      //     normal: {
+      //       color: "transparent",
+      //       borderColor: barTopColor,
+      //       borderType: "solid",
+      //       borderWidth: 10,
+      //     },
+      //   },
+      //   data: Data.yAxis,
+      // },
+      // {
+      //   name: "",
+      //   type: "pictorialBar",
+      //   symbolSize: [barWidth + 20, 20],
+      //   symbolOffset: [0, 12],
+      //   z: 12,
+      //   itemStyle: {
+      //     normal: {
+      //       color: "transparent",
+      //       borderColor: barTopColor,
+      //       borderType: "solid",
+      //       borderWidth: 10,
+      //     },
+      //   },
+      //   data: Data.yAxis,
+      //   stack: "check",
+      // },
+      // {
+      //   name: "",
+      //   type: "pictorialBar",
+      //   symbolSize: [barWidth + 25, 20],
+      //   symbolOffset: [0, 12],
+      //   z: 12,
+      //   itemStyle: {
+      //     normal: {
+      //       color: "transparent",
+      //       borderColor: "#3ACDC5",
+      //       borderType: "solid",
+      //       borderWidth: 10,
+      //     },
+      //   },
+      //   data: Data.yAxis,
+      //   stack: "check",
+      // },
       {
         name: "",
         type: "bar",
@@ -892,8 +895,9 @@
     zoom: 13,
     pitch: 55,
   });
-  initEcharts4();
   window.addEventListener("resize", initEcharts4);
+  initEcharts4();
+
   //mapBoxVectorLayer.addGeojsonPolygonWithLabel('yanAnPaiShuiArea', yanAnPaiShuiArea);
 });
 
diff --git a/src/views/oneMap/components/ZHRQ.vue b/src/views/oneMap/components/ZHRQ.vue
index bb36061..9a71ce2 100644
--- a/src/views/oneMap/components/ZHRQ.vue
+++ b/src/views/oneMap/components/ZHRQ.vue
@@ -30,12 +30,7 @@
               <span class="TJListValue">1922km</span>
             </div>
           </div>
-          <div class="RQ_EchartsBox" id="Echarts2Box">
-            <div class="ClickDiv1" @click="TuChengClick(1)"></div>
-            <div class="ClickDiv2" @click="TuChengClick(2)"></div>
-            <div class="ClickDiv3" @click="TuChengClick(3)"></div>
-            <div class="ClickDiv4" @click="TuChengClick(4)"></div>
-          </div>
+          <div class="RQ_EchartsBox" id="Echarts2Box"></div>
         </div>
       </div>
       <div class="ComBox LeftBox1_2">
@@ -155,7 +150,7 @@
         </div>
       </div>
       <div class="ComBox RightBox1_2">
-        <div class="Box_header">巡查反馈</div>
+        <div class="Box_header">预警处置</div>
         <div class="Box_Body">
           <div class="FK_headerBox">
             <div class="FK_headerBox_list" @click="dealOrNoDeal(1)">
@@ -658,9 +653,9 @@
     },
     grid: {
       left: "5%",
-      top: "10%",
+      top: "5%",
       right: "5%",
-      bottom: "10%",
+      bottom: "5%",
       containLabel: true,
     },
     xAxis: {
@@ -1450,7 +1445,7 @@
           border-radius: 2px;
           font-family: Source Han Sans CN;
           font-weight: 500;
-          font-size: 14px;
+          font-size: 16px;
           color: #c1d3d4;
           text-align: center;
           line-height: 20px;
@@ -1463,7 +1458,7 @@
           border: 1px solid #1cf5fc;
           font-family: Source Han Sans CN;
           font-weight: bold;
-          font-size: 12px;
+          font-size: 16px;
           color: #ebfeff;
           background: #1cf4fc22;
         }
@@ -1520,7 +1515,7 @@
             font-family: Source Han Sans CN;
             font-weight: 400;
             font-size: 14px;
-            color: #c1d3d4;
+            color: #ffffff;
             height: 28px;
             line-height: 28px;
             text-align: right;
diff --git a/src/views/oneMap/floodPrevention/FholRightBox.vue b/src/views/oneMap/floodPrevention/FholRightBox.vue
index c7d5a2c..bcffb94 100644
--- a/src/views/oneMap/floodPrevention/FholRightBox.vue
+++ b/src/views/oneMap/floodPrevention/FholRightBox.vue
@@ -7,21 +7,35 @@
     <div class="Assessmentop">
       <div class="tabContent">
         <ul>
-          <li class="listOne curCick" v-for="(i, index) in listData" :key="index" @click="showMapDalog(i)">
+          <li
+            class="listOne curCick"
+            v-for="(i, index) in listData"
+            :key="index"
+            @click="showMapDalog(i)"
+          >
             <div class="line flex flex-align-center">
               <div class="lable">站点名称：</div>
               <div class="box flex flex-align-center flex-justcontent-center">
                 {{ i.siteName }}
               </div>
-              <span :class="i.siteStatus == '在线' ? 'green' : 'rad'">{{ i.siteStatus }}</span>
+              <span
+                class="box_Status"
+                :class="i.siteStatus == '在线' ? 'green' : 'rad'"
+                >{{ i.siteStatus }}</span
+              >
             </div>
             <div class="line flex flex-align-center">
               <div class="lable">水<i></i>深：</div>
-              <div class="box flex flex-align-center flex-justcontent-center">{{ i.z || 0 }}米</div>
+              <div class="box flex flex-align-center flex-justcontent-center">
+                {{ i.z || 0 }}米
+              </div>
             </div>
             <div class="line flex flex-align-center">
               <div class="lable">风险分析：</div>
-              <div class="box flex flex-align-center flex-justcontent-center" :class="i.warnInfo != '无风险' ? 'cRad' : 'cGreen'">
+              <div
+                class="box flex flex-align-center flex-justcontent-center"
+                :class="i.warnInfo != '无风险' ? 'cRad' : 'cGreen'"
+              >
                 {{ i.warnInfo }}
               </div>
             </div>
@@ -42,7 +56,12 @@
           placeholder="请选择节点"
           style="width: 200px"
         >
-          <el-option v-for="item in siteData" :key="item.stCode" :label="item.stName" :value="item.stCode" />
+          <el-option
+            v-for="item in siteData"
+            :key="item.stCode"
+            :label="item.stName"
+            :value="item.stCode"
+          />
         </el-select>
       </div>
     </div>
@@ -88,7 +107,12 @@
       </div>
     </div>
     <div class="bzsp" v-if="bzname == '视频'">
-      <video controls="controls" src="https://47.97.35.33:6089/video/2021/20210621.mp4" id="videoEvent" loop></video>
+      <video
+        controls="controls"
+        src="https://47.97.35.33:6089/video/2021/20210621.mp4"
+        id="videoEvent"
+        loop
+      ></video>
     </div>
   </div>
   <!-- 入河排口运行监控 -->
@@ -118,98 +142,98 @@
 </template>
 
 <script setup>
-import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
-import { ref, reactive, toRefs, onMounted, onBeforeUnmount } from 'vue';
-import bus from '@/bus';
-import dispatchEch from './dispatchEch.vue';
-import bengzhantingzhi from '@/assets/images/fhpl/bengzhantingzhi.png';
-import bengzhanyunxing from '@/assets/images/fhpl/bengzhanyunxing.png';
+import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
+import { ref, reactive, toRefs, onMounted, onBeforeUnmount } from "vue";
+import bus from "@/bus";
+import dispatchEch from "./dispatchEch.vue";
+import bengzhantingzhi from "@/assets/images/fhpl/bengzhantingzhi.png";
+import bengzhanyunxing from "@/assets/images/fhpl/bengzhanyunxing.png";
 const bzList = ref([
-  { name: '工况', value: 1 },
-  { name: '视频', value: 2 },
+  { name: "工况", value: 1 },
+  { name: "视频", value: 2 },
 ]);
-const bzname = ref('工况');
+const bzname = ref("工况");
 function bzclick(val) {
   bzname.value = val.name;
 }
 const listData = ref([
-  { siteName: '东关大街与长青路交叉口', siteStatus: '在线', warnInfo: '无风险' },
-  { siteName: '大桥街与延河西路交叉口', siteStatus: '离线', warnInfo: '无风险' },
-  { siteName: '文化沟路与延河西路交叉口', siteStatus: '在线', warnInfo: '无风险' },
+  { siteName: "东关大街与长青路交叉口", siteStatus: "在线", warnInfo: "无风险" },
+  { siteName: "大桥街与延河西路交叉口", siteStatus: "离线", warnInfo: "无风险" },
+  { siteName: "文化沟路与延河西路交叉口", siteStatus: "在线", warnInfo: "无风险" },
 ]);
 const search = ref({
   stCode: 1,
 });
 const siteData = [
   {
-    stName: '罗家坪排涝泵站',
+    stName: "罗家坪排涝泵站",
     stCode: 1,
   },
 ];
 const FXJCData = ref([
   {
-    pk: '广通排口',
-    zk: '是',
-    ls: '0.1',
+    pk: "广通排口",
+    zk: "是",
+    ls: "0.1",
   },
   {
-    pk: '东三巷排口',
-    zk: '否',
-    ls: '0.0',
+    pk: "东三巷排口",
+    zk: "否",
+    ls: "0.0",
   },
   {
-    pk: '延河西路排口',
-    zk: '否',
-    ls: '0.0',
+    pk: "延河西路排口",
+    zk: "否",
+    ls: "0.0",
   },
   {
-    pk: '西沟大桥西排口1',
-    zk: '否',
-    ls: '0.0',
+    pk: "西沟大桥西排口1",
+    zk: "否",
+    ls: "0.0",
   },
   {
-    pk: '西沟大桥西排口2',
-    zk: '否',
-    ls: '0.0',
+    pk: "西沟大桥西排口2",
+    zk: "否",
+    ls: "0.0",
   },
 ]);
 const list = [
   {
-    name: '1#泵',
+    name: "1#泵",
     status: 1,
   },
   {
-    name: '2#泵',
+    name: "2#泵",
     status: 0,
   },
   {
-    name: '3#泵',
+    name: "3#泵",
     status: 0,
   },
 
   {
-    name: '4#泵',
+    name: "4#泵",
     status: 1,
   },
 ];
 // const showPipe = ref(false);
 // 弹框
 function showMapDalog(val) {
-  console.log(val.siteName, 'val.siteName');
+  console.log(val.siteName, "val.siteName");
   let data = {
     title: val.siteName,
-    comIDs: ['gwpm', 'jcsj'],
+    comIDs: ["gwpm", "jcsj"],
   };
-  bus.emit('publicDialog', data);
+  bus.emit("publicDialog", data);
   // showPipe.value = true;
 }
 // 积水弹框
 function spshowMapDalog(val) {
   let data = {
     title: val.pk,
-    comIDs: ['spjk'],
+    comIDs: ["spjk"],
   };
-  bus.emit('publicDialog', data);
+  bus.emit("publicDialog", data);
   // showPipe.value = true;
 }
 </script>
@@ -273,6 +297,9 @@
               font-weight: 400;
               color: #ffffff;
             }
+            .box_Status {
+              font-size: 16px;
+            }
             .box2 {
               width: 120px;
             }
@@ -293,9 +320,9 @@
                 background: rgba(255, 55, 55, 0.15);
               }
               &.green {
-                border-color: #0fcd22;
-                color: #0fcd22;
-                background: rgba(15, 205, 34, 0.15);
+                border-color: lime;
+                color: lime;
+                background: rgba(12, 134, 24, 0.15);
               }
             }
           }
@@ -543,7 +570,7 @@
   height: 44px;
   line-height: 50px;
   width: 98%;
-  background: url('@/assets/newImgs/partBg.png') no-repeat;
+  background: url("@/assets/newImgs/partBg.png") no-repeat;
   background-size: 100% 100%;
   display: flex;
   align-items: center;
diff --git a/src/views/oneMap/index.vue b/src/views/oneMap/index.vue
index 64cfe29..7ad465e 100644
--- a/src/views/oneMap/index.vue
+++ b/src/views/oneMap/index.vue
@@ -5,14 +5,20 @@
       <!-- 顶部 -->
       <div
         id="oneMapHeader"
-        :class="['oneMapHeader', 'animate__animated', showPanel2 ? 'animate__fadeOutUp' : 'animate__fadeInDown']"
+        :class="[
+          'oneMapHeader',
+          'animate__animated',
+          showPanel2 ? 'animate__fadeOutUp' : 'animate__fadeInDown',
+        ]"
       >
         <!-- 标题 -->
         <!-- <img id="titleFont" src="@/assets/images/Sponge_screen/oneMapTitleFont.png" /> -->
         <div id="titleFont">延安市城市生命线安全运行监测系统</div>
         <!-- 标题左侧展示组件 -->
         <div class="Location">
-          <el-icon size="18" style="margin-right: 5px; vertical-align: bottom"><LocationFilled /></el-icon>
+          <el-icon size="18" style="margin-right: 5px; vertical-align: bottom"
+            ><LocationFilled
+          /></el-icon>
           延安
         </div>
         <div class="Timer">
@@ -33,7 +39,9 @@
       <!-- 地图组件 -->
       <OneMap @map-click="mapClick" v-if="AllData.MapShowBol"></OneMap>
       <!-- 桥梁BIM -->
-      <WangJiaPingBIM v-if="!AllData.MapShowBol && AllData.ComShowID == 4"></WangJiaPingBIM>
+      <WangJiaPingBIM
+        v-if="!AllData.MapShowBol && AllData.ComShowID == 4"
+      ></WangJiaPingBIM>
       <!-- 隧道BIM -->
       <Tunnel v-if="!AllData.MapShowBol && AllData.ComShowID == 5"></Tunnel>
       <!-- 降雨效果 -->
@@ -58,21 +66,51 @@
         src="@/assets/images/Sponge_screen/TuCheng.png"
         alt=""
         @click="ShowTuCheng = !ShowTuCheng"
+        :class="[showPanel ? 'TuChengImgTrue' : 'TuChengImgFalse']"
         v-if="AllData.MapShowBol"
       />
-      <LayerControl v-if="AllData.MapShowBol" :ShowTuCheng="ShowTuCheng"></LayerControl>
+      <LayerControl
+        v-if="AllData.MapShowBol"
+        :ShowTuCheng="ShowTuCheng"
+        :showPanel="showPanel"
+      ></LayerControl>
       <!-- 1:总体概览 -->
-      <ComZTGL v-if="AllData.ComShowID == 1" :isActive="AllData.ComShowID == 1 ? true : false" :showPanel="showPanel"></ComZTGL>
+      <ComZTGL
+        v-if="AllData.ComShowID == 1"
+        :isActive="AllData.ComShowID == 1 ? true : false"
+        :showPanel="showPanel"
+      ></ComZTGL>
       <!-- 2:智慧燃气 -->
-      <ComZHRQ v-if="AllData.ComShowID == 2" :isActive="AllData.ComShowID == 2 ? true : false" :showPanel="showPanel"></ComZHRQ>
+      <ComZHRQ
+        v-if="AllData.ComShowID == 2"
+        :isActive="AllData.ComShowID == 2 ? true : false"
+        :showPanel="showPanel"
+      ></ComZHRQ>
       <!-- 3:智慧排水 -->
-      <ComZHPS v-if="AllData.ComShowID == 3" :isActive="AllData.ComShowID == 3 ? true : false" :showPanel="showPanel"></ComZHPS>
+      <ComZHPS
+        v-if="AllData.ComShowID == 3"
+        :isActive="AllData.ComShowID == 3 ? true : false"
+        :showPanel="showPanel"
+      ></ComZHPS>
       <!-- 4:智慧桥梁 -->
-      <ComZHQL v-if="AllData.ComShowID == 4" :isActive="AllData.ComShowID == 4 ? true : false" :showPanel="showPanel"> </ComZHQL>
+      <ComZHQL
+        v-if="AllData.ComShowID == 4"
+        :isActive="AllData.ComShowID == 4 ? true : false"
+        :showPanel="showPanel"
+      >
+      </ComZHQL>
       <!-- 5:智慧隧道 -->
-      <ComZHSD v-if="AllData.ComShowID == 5" :isActive="AllData.ComShowID == 5 ? true : false" :showPanel="showPanel"></ComZHSD>
+      <ComZHSD
+        v-if="AllData.ComShowID == 5"
+        :isActive="AllData.ComShowID == 5 ? true : false"
+        :showPanel="showPanel"
+      ></ComZHSD>
       <!-- 6:智慧海绵 -->
-      <ComZHHM v-if="AllData.ComShowID == 6" :isActive="AllData.ComShowID == 6 ? true : false" :showPanel="showPanel"></ComZHHM>
+      <ComZHHM
+        v-if="AllData.ComShowID == 6"
+        :isActive="AllData.ComShowID == 6 ? true : false"
+        :showPanel="showPanel"
+      ></ComZHHM>
       <!-- 智慧海绵-监测分析 -->
       <ZHHMJCFX
         v-if="AllData.ComShowID == 61"
@@ -86,7 +124,11 @@
         :showPanel="showPanel"
       ></ZHHMJSPG>
       <!-- 7:防洪排涝 -->
-      <ComFHPL v-if="AllData.ComShowID == 7" :isActive="AllData.ComShowID == 7 ? true : false" :showPanel="showPanel"></ComFHPL>
+      <ComFHPL
+        v-if="AllData.ComShowID == 7"
+        :isActive="AllData.ComShowID == 7 ? true : false"
+        :showPanel="showPanel"
+      ></ComFHPL>
     </div>
     <!-- 底部菜单 -->
     <div id="BottomMenuBox">
@@ -96,7 +138,11 @@
       <!-- 菜单List -->
       <div
         class="MenuList"
-        :class="['MenuList' + index, 'animate__animated', showPanel2 ? 'animate__bounceInUp' : 'animate__bounceInUp']"
+        :class="[
+          'MenuList' + index,
+          'animate__animated',
+          showPanel2 ? 'animate__bounceInUp' : 'animate__bounceInUp',
+        ]"
         v-for="(item, index) in AllData.MenuListData"
         @click="MenuClick(item, index)"
         v-if="BottomshowPanel"
@@ -110,7 +156,10 @@
 
           <!-- 二级菜单 -->
           <!-- <Transition name="slide-fade2"> -->
-          <div v-show="AllData.ErJiMenuShowID == item.id && !!item.children" class="ErJiMenuBox">
+          <div
+            v-show="AllData.ErJiMenuShowID == item.id && !!item.children"
+            class="ErJiMenuBox"
+          >
             <span
               class="ErJiMenuList"
               :class="AllData.ErJiMenuCheckID == item2.id ? 'ErJiMenuCheck' : ''"
@@ -129,7 +178,11 @@
     <Voice></Voice>
   </div>
   <!-- 融云弹窗 -->
-  <ModelRongYun :RYdialogShow="AllData.RYDialog" :ZhuDongBoHao="AllData.ZhuDongBoHao" @OneDialogHide="dialogHide"></ModelRongYun>
+  <ModelRongYun
+    :RYdialogShow="AllData.RYDialog"
+    :ZhuDongBoHao="AllData.ZhuDongBoHao"
+    @OneDialogHide="dialogHide"
+  ></ModelRongYun>
   <!-- 前端组件公共弹窗 -->
   <el-dialog
     modal-class="publicDialogVisible"
@@ -151,60 +204,60 @@
 </template>
 
 <script setup name="oneMapIndex">
-import bus from '@/bus';
-import request from '@/utils/request';
-import { fullscreenToggel } from '@/utils/util';
-import { ref, reactive, toRefs, onMounted } from 'vue';
+import bus from "@/bus";
+import request from "@/utils/request";
+import { fullscreenToggel } from "@/utils/util";
+import { ref, reactive, toRefs, onMounted } from "vue";
 
-import useUserStore from '@/store/modules/user';
+import useUserStore from "@/store/modules/user";
 const userStore = useUserStore();
 // 菜单的图片资源
-import ZTGL from '@/assets/images/Sponge_screen/menu/ZTGL.png';
-import AC_ZTGL from '@/assets/images/Sponge_screen/menu/AC_ZTGL.png';
-import ZHRQ from '@/assets/images/Sponge_screen/menu/ZHRQ.png';
-import AC_ZHRQ from '@/assets/images/Sponge_screen/menu/AC_ZHRQ.png';
-import ZHPS from '@/assets/images/Sponge_screen/menu/ZHPS.png';
-import AC_ZHPS from '@/assets/images/Sponge_screen/menu/AC_ZHPS.png';
-import ZHQL from '@/assets/images/Sponge_screen/menu/ZHQL.png';
-import AC_ZHQL from '@/assets/images/Sponge_screen/menu/AC_ZHQL.png';
-import ZHSD from '@/assets/images/Sponge_screen/menu/ZHSD.png';
-import AC_ZHSD from '@/assets/images/Sponge_screen/menu/AC_ZHSD.png';
-import FXPL from '@/assets/images/Sponge_screen/menu/FXPL.png';
-import AC_FXPL from '@/assets/images/Sponge_screen/menu/AC_FXPL.png';
-import ZHHM from '@/assets/images/Sponge_screen/menu/ZHHM.png';
-import AC_ZHHM from '@/assets/images/Sponge_screen/menu/AC_ZHHM.png';
+import ZTGL from "@/assets/images/Sponge_screen/menu/ZTGL.png";
+import AC_ZTGL from "@/assets/images/Sponge_screen/menu/AC_ZTGL.png";
+import ZHRQ from "@/assets/images/Sponge_screen/menu/ZHRQ.png";
+import AC_ZHRQ from "@/assets/images/Sponge_screen/menu/AC_ZHRQ.png";
+import ZHPS from "@/assets/images/Sponge_screen/menu/ZHPS.png";
+import AC_ZHPS from "@/assets/images/Sponge_screen/menu/AC_ZHPS.png";
+import ZHQL from "@/assets/images/Sponge_screen/menu/ZHQL.png";
+import AC_ZHQL from "@/assets/images/Sponge_screen/menu/AC_ZHQL.png";
+import ZHSD from "@/assets/images/Sponge_screen/menu/ZHSD.png";
+import AC_ZHSD from "@/assets/images/Sponge_screen/menu/AC_ZHSD.png";
+import FXPL from "@/assets/images/Sponge_screen/menu/FXPL.png";
+import AC_FXPL from "@/assets/images/Sponge_screen/menu/AC_FXPL.png";
+import ZHHM from "@/assets/images/Sponge_screen/menu/ZHHM.png";
+import AC_ZHHM from "@/assets/images/Sponge_screen/menu/AC_ZHHM.png";
 // 引用地图
-import OneMap from './map/newfiberMapBox.vue';
+import OneMap from "./map/newfiberMapBox.vue";
 
 // 引用王家坪大桥BIm
-import WangJiaPingBIM from './BIM/WangJiaPIng.vue';
+import WangJiaPingBIM from "./BIM/WangJiaPIng.vue";
 // 引用隧道BIm
-import Tunnel from './BIM/Tunnel.vue';
+import Tunnel from "./BIM/Tunnel.vue";
 // 引用语音识别
-import Voice from './../voice/recordPage/index.vue';
+import Voice from "./../voice/recordPage/index.vue";
 // 引入融云通讯录
-import ModelRongYun from '@/views/RongyunCommunication/ModelRongYun/index.vue'; //融云调用
+import ModelRongYun from "@/views/RongyunCommunication/ModelRongYun/index.vue"; //融云调用
 // 子系统引入
-import ComZTGL from './components/ZTGL.vue'; //总体概览
-import ComZHRQ from './components/ZHRQ.vue'; //智慧燃气
-import ComZHPS from './components/ZHPS.vue'; //智慧排水
-import ComZHQL from './components/ZHQL.vue'; //智慧桥梁
-import ComZHSD from './components/ZHSD.vue'; //智慧隧道
-import ComZHHM from './components/ZHHM.vue'; //智慧海绵
-import ComFHPL from './components/FHPL.vue'; //防洪排涝
-import ZHHMJCFX from './components/ZHHM_JCFX.vue'; //智慧海绵-监测分析
-import ZHHMJSPG from './components/ZHHM_JSPG.vue'; //智慧海绵-建设评估
-import PopupInfo from '@/views/oneMap/components/mapboxPopup.vue'; //地图标注点弹窗
-import dynamicInformation from '@/views/oneMap/components/dynamicInformation.vue'; //地图标注点弹窗
+import ComZTGL from "./components/ZTGL.vue"; //总体概览
+import ComZHRQ from "./components/ZHRQ.vue"; //智慧燃气
+import ComZHPS from "./components/ZHPS.vue"; //智慧排水
+import ComZHQL from "./components/ZHQL.vue"; //智慧桥梁
+import ComZHSD from "./components/ZHSD.vue"; //智慧隧道
+import ComZHHM from "./components/ZHHM.vue"; //智慧海绵
+import ComFHPL from "./components/FHPL.vue"; //防洪排涝
+import ZHHMJCFX from "./components/ZHHM_JCFX.vue"; //智慧海绵-监测分析
+import ZHHMJSPG from "./components/ZHHM_JSPG.vue"; //智慧海绵-建设评估
+import PopupInfo from "@/views/oneMap/components/mapboxPopup.vue"; //地图标注点弹窗
+import dynamicInformation from "@/views/oneMap/components/dynamicInformation.vue"; //地图标注点弹窗
 // 降雨效果
-import CanvasRain from '@/views/oneMap/cityGK/canvasRain.vue'; //降雨效果
+import CanvasRain from "@/views/oneMap/cityGK/canvasRain.vue"; //降雨效果
 // 图层控制面板
-import LayerControl from '@/views/oneMap/LayerControl/LayerControl.vue'; //图层控制面板
+import LayerControl from "@/views/oneMap/LayerControl/LayerControl.vue"; //图层控制面板
 // 前端共同弹窗
-import DialogTabs from '@/views/DialogTabs/dialogTabs.vue';
+import DialogTabs from "@/views/DialogTabs/dialogTabs.vue";
 // 左右滑动
-import ZuoYou1 from '@/assets/images/Sponge_screen/ZuoYou1.png';
-import ZuoYou2 from '@/assets/images/Sponge_screen/ZuoYou2.png';
+import ZuoYou1 from "@/assets/images/Sponge_screen/ZuoYou1.png";
+import ZuoYou2 from "@/assets/images/Sponge_screen/ZuoYou2.png";
 // 时间以及天气
 const timer = ref(null);
 const dates = ref(null);
@@ -212,8 +265,8 @@
 const times = ref(null);
 const weather = ref({
   temperature: null,
-  imgNum: '',
-  text: '',
+  imgNum: "",
+  text: "",
 });
 const showPanel = ref(false);
 const showPanel2 = ref(false);
@@ -301,61 +354,61 @@
 // 公共弹窗
 const dialogConfig = reactive({
   visible: false,
-  getSiteId: '',
-  SiteNo: '',
+  getSiteId: "",
+  SiteNo: "",
   data: {},
-  comIDs: ['spjk'],
+  comIDs: ["spjk"],
   customData: [],
-  RefName: '',
-  title: '详情',
+  RefName: "",
+  title: "详情",
 });
 onBeforeMount(() => {
-  console.log('ZhuanTiType', userStore.ZhuanTiType);
+  console.log("ZhuanTiType", userStore.ZhuanTiType);
   if (userStore.ZhuanTiType == 1) {
     // 城市生命线
     AllData.MenuListData = [
       {
-        name: '总体概览',
+        name: "总体概览",
         iocn: ZTGL,
         AC_icon: AC_ZTGL,
         id: 1,
-        Layers: ['路网', '河流水系'],
+        Layers: ["路网", "河流水系"],
       },
       {
-        name: '燃气安全',
+        name: "燃气安全",
         iocn: ZHRQ,
         AC_icon: AC_ZHRQ,
         id: 2,
-        Layers: ['干管', '主管', '干管流向', '主管流向'],
+        Layers: ["干管", "主管", "干管流向", "主管流向"],
       },
       {
-        name: '排水安全',
+        name: "排水安全",
         iocn: ZHPS,
         AC_icon: AC_ZHPS,
         id: 3,
-        Layers: ['雨水管网', '污水管网'],
+        Layers: ["雨水管网", "污水管网"],
         children: [
           {
-            name: '排水安全',
+            name: "排水安全",
             id: 3,
             Layers: [],
           },
           {
-            name: '防汛排涝',
+            name: "防汛排涝",
             id: 7,
             Layers: [],
           },
         ],
       },
       {
-        name: '桥梁安全',
+        name: "桥梁安全",
         iocn: ZHQL,
         AC_icon: AC_ZHQL,
         id: 4,
         Layers: [],
       },
       {
-        name: '隧道安全',
+        name: "隧道安全",
         iocn: ZHSD,
         AC_icon: AC_ZHSD,
         id: 5,
@@ -366,19 +419,19 @@
     // 海绵
     AllData.MenuListData = [
       {
-        name: '城市概览',
+        name: "城市概览",
         iocn: ZHHM,
         AC_icon: AC_ZHHM,
         id: 6,
       },
       {
-        name: '监测分析',
+        name: "监测分析",
         iocn: ZHHM,
         AC_icon: AC_ZHHM,
         id: 61,
       },
       {
-        name: '建设评估',
+        name: "建设评估",
         iocn: ZHHM,
         AC_icon: AC_ZHHM,
         id: 62,
@@ -392,10 +445,10 @@
 onMounted(() => {
   fullscreenToggel();
   AllData.BottmBackGroundShow = true;
-  console.log(AllData.BottmBackGroundShow, 'AllData.BottmBackGroundShow');
-  bus.emit('BottomHidden', AllData.BottmBackGroundShow);
+  console.log(AllData.BottmBackGroundShow, "AllData.BottmBackGroundShow");
+  bus.emit("BottomHidden", AllData.BottmBackGroundShow);
   // 降雨特征点击
-  bus.on('checkRainL', params => {
+  bus.on("checkRainL", (params) => {
     if (params == 1) {
       showRainFlow.value = false;
     } else {
@@ -403,7 +456,7 @@
     }
   });
   // 底部隐藏
-  bus.on('checkBottom', params => {
+  bus.on("checkBottom", (params) => {
     if (params == 1) {
       BottomshowPanel.value = false;
     } else {
@@ -411,15 +464,15 @@
     }
   });
   // 共同弹窗触发事件
-  bus.on('publicDialog', params => {
+  bus.on("publicDialog", (params) => {
     dialogConfig.getSiteId = params.getSiteId;
-    dialogConfig.title = params.title ?? '详情';
+    dialogConfig.title = params.title ?? "详情";
     dialogConfig.comIDs = params.comIDs ?? dialogConfig.comIDs;
     // 打开弹窗
     dialogConfig.visible = true;
   });
   // 共同弹窗触发事件
-  bus.on('publicDialog_Close', params => {
+  bus.on("publicDialog_Close", (params) => {
     // 打开弹窗
     dialogConfig.visible = false;
   });
@@ -429,14 +482,14 @@
   currentTime();
   //initRainImage();
   // 打开融云通讯录主动拨号
-  bus.on('OpenRY', params => {
+  bus.on("OpenRY", (params) => {
     AllData.ZhuDongBoHao = true;
     AllData.RYDialog = true;
-    bus.emit('showRy');
+    bus.emit("showRy");
   });
 
   // 切换专题图
-  bus.on('ChangeZhuanTiTu', params => {
+  bus.on("ChangeZhuanTiTu", (params) => {
     if (params.num == 1) {
       // 一级
       MenuClick(params.MenuData1);
@@ -446,18 +499,18 @@
     }
   });
   // 切换面板显示隐藏
-  bus.on('changeShowPanel', params => {
+  bus.on("changeShowPanel", (params) => {
     showPanel.value = params;
   });
 });
 onBeforeUnmount(() => {
-  bus.off('BottomHidden');
-  bus.off('publicDialog');
-  bus.off('publicDialog_Close');
-  bus.off('OpenRY');
-  bus.off('ChangeZhuanTiTu');
-  bus.off('checkRainL');
-  bus.off('changeShowPanel');
+  bus.off("BottomHidden");
+  bus.off("publicDialog");
+  bus.off("publicDialog_Close");
+  bus.off("OpenRY");
+  bus.off("ChangeZhuanTiTu");
+  bus.off("checkRainL");
+  bus.off("changeShowPanel");
 });
 // 菜单点击
 const MenuClick = (item, index) => {
@@ -476,9 +529,9 @@
   } else {
     AllData.MapShowBol = true;
     // 点击菜单时隐藏所有图层
-    bus.emit('clearAllLayer');
+    bus.emit("clearAllLayer");
     // 打开默认的菜单
-    bus.emit('SetLayerShow', item.Layers);
+    bus.emit("SetLayerShow", item.Layers);
   }
 };
 // 二级菜单点击
@@ -497,10 +550,10 @@
 const toRYBox = () => {
   AllData.RYDialog = true;
   AllData.ZhuDongBoHao = false;
-  bus.emit('showRy');
+  bus.emit("showRy");
 };
 // 关闭融云通讯录弹窗
-const dialogHide = val => {
+const dialogHide = (val) => {
   if (!val) {
     AllData.RYDialog = false;
     AllData.ZhuDongBoHao = false;
@@ -508,19 +561,19 @@
 };
 //地图点击事件
 const mapClick = async (point, properties, feature) => {
-  console.log('point', point);
-  console.log('properties', properties);
-  console.log('feature---', feature);
+  console.log("point", point);
+  console.log("properties", properties);
+  console.log("feature---", feature);
   if (!feature) {
     let currentZoom = newfiberMapbox.map.getZoom();
-    console.log('currentZoom--', currentZoom);
+    console.log("currentZoom--", currentZoom);
     if (currentZoom >= 17) {
       let clickPoint = turf.point(point);
       gcoord.transform(clickPoint, gcoord.WGS84, gcoord.BD09);
-      console.log('clickPoint---', clickPoint, clickPoint.geometry.coordinates);
+      console.log("clickPoint---", clickPoint, clickPoint.geometry.coordinates);
       let data = await request({
         url: `/bdApi//baiduservice/panorama`,
-        method: 'GET',
+        method: "GET",
         params: {
           location: `${clickPoint.geometry.coordinates[0]},${clickPoint.geometry.coordinates[1]}`,
           fov: 180,
@@ -529,11 +582,11 @@
         },
       });
       if (data && data.data) {
-        data.data.base64 = 'data:image/jpeg;base64,' + data.data.base64;
+        data.data.base64 = "data:image/jpeg;base64," + data.data.base64;
       }
-      console.log('data----', data);
+      console.log("data----", data);
       gcoord.transform(clickPoint, gcoord.BD09, gcoord.WGS84);
-      bus.emit('popupcontent', {
+      bus.emit("popupcontent", {
         popupShow: true,
         point: point,
         popupInfo: data,
@@ -541,19 +594,21 @@
     }
   }
   if (properties) {
-    if (feature == 'rq_pipeline_info') {
-      if (!!newfiberMapbox.getLayerByName('rqLine')) {
-        newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName('rqLine'));
+    if (feature == "rq_pipeline_info") {
+      if (!!newfiberMapbox.getLayerByName("rqLine")) {
+        newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName("rqLine"));
       }
-      let rqLine = turf.featureCollection([turf.feature(Terraformer.WKT.parse(properties.geometry))]);
+      let rqLine = turf.featureCollection([
+        turf.feature(Terraformer.WKT.parse(properties.geometry)),
+      ]);
       let layer = new mapboxL7.LineLayer({
-        name: 'rqLine',
+        name: "rqLine",
       })
         .source(rqLine)
         .size(4)
-        .shape('line')
-        .texture('arrow')
-        .color('rgb(241, 159, 27)')
+        .shape("line")
+        .texture("arrow")
+        .color("rgb(241, 159, 27)")
         .animate({
           interval: 2, // 间隔
           duration: 2, // 持续时间，延时
@@ -564,11 +619,11 @@
           lineTexture: true, // 开启线的贴图功能
           iconStep: 50, // 设置贴图纹理的间距
           borderWidth: 0, // 默认文 0，最大有效值为 0.5
-          borderColor: '#fff', // 默认为 #ccc
+          borderColor: "#fff", // 默认为 #ccc
         });
       newfiberMapbox.addLayer(layer);
     }
-    bus.emit('popupcontent', {
+    bus.emit("popupcontent", {
       popupShow: true,
       point: point,
       popupInfo: properties,
@@ -583,12 +638,20 @@
   let month = date.getMonth() + 1; // 月
   let day = date.getDate(); // 日
   let hour = date.getHours(); // 时
-  hour = hour < 10 ? '0' + hour : hour; // 如果只有一位，则前面补零
+  hour = hour < 10 ? "0" + hour : hour; // 如果只有一位，则前面补零
   let minute = date.getMinutes(); // 分
-  minute = minute < 10 ? '0' + minute : minute; // 如果只有一位，则前面补零
+  minute = minute < 10 ? "0" + minute : minute; // 如果只有一位，则前面补零
   let second = date.getSeconds(); // 秒
-  second = second < 10 ? '0' + second : second; // 如果只有一位，则前面补零
-  let weekAry = new Array('星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六');
+  second = second < 10 ? "0" + second : second; // 如果只有一位，则前面补零
+  let weekAry = new Array(
+    "星期日",
+    "星期一",
+    "星期二",
+    "星期三",
+    "星期四",
+    "星期五",
+    "星期六"
+  );
   weeks.value = weekAry[date.getDay()];
   dates.value = `${year}-${month}-${day}`;
   times.value = `${hour}:${minute}:${second}`;
@@ -611,11 +674,11 @@
   // }
 };
 // 二级菜单展示
-const handleMouseEnter = item => {
+const handleMouseEnter = (item) => {
   AllData.ErJiMenuShowID = item.id;
 };
 // 二级菜单展示
-const handleMouseLeave = item => {
+const handleMouseLeave = (item) => {
   AllData.ErJiMenuShowID = null;
 };
 </script>
@@ -638,7 +701,7 @@
     #oneMapHeader {
       width: 100%;
       height: 100px;
-      background: url('@/assets/images/Sponge_screen/db_img.png') no-repeat center;
+      background: url("@/assets/images/Sponge_screen/db_img.png") no-repeat center;
       background-size: cover;
       z-index: 100;
       position: absolute;
@@ -673,7 +736,7 @@
         height: 15px;
         font-family: Adobe Heiti Std;
         font-weight: normal;
-        font-size: 14px;
+        font-size: 16px;
         color: #ffffff;
         line-height: 13px;
         font-style: italic;
@@ -693,7 +756,7 @@
           width: auto;
           font-family: Adobe Heiti Std;
           font-weight: normal;
-          font-size: 12px;
+          font-size: 16px;
           color: #ffffff;
           height: 18px;
           line-height: 18px;
@@ -706,7 +769,7 @@
           width: auto;
           font-family: Adobe Heiti Std;
           font-weight: normal;
-          font-size: 12px;
+          font-size: 16px;
           color: #ffffff;
           height: 18px;
           line-height: 18px;
@@ -722,17 +785,17 @@
         cursor: pointer;
       }
       .goHome {
-        background: url('@/assets/images/Sponge_screen/gb_btn.png') no-repeat center;
+        background: url("@/assets/images/Sponge_screen/gb_btn.png") no-repeat center;
         background-size: contain;
         right: 150px;
       }
       .goUser_com {
-        background: url('@/assets/images/Sponge_screen/hs_btn.png') no-repeat center;
+        background: url("@/assets/images/Sponge_screen/hs_btn.png") no-repeat center;
         background-size: contain;
         right: 100px;
       }
       .goClose_com {
-        background: url('@/assets/images/Sponge_screen/sy_btn.png') no-repeat center;
+        background: url("@/assets/images/Sponge_screen/sy_btn.png") no-repeat center;
         background-size: contain;
         right: 50px;
       }
@@ -746,6 +809,14 @@
       top: 100px;
       cursor: pointer;
     }
+    .TuChengImgTrue {
+      transform: translateX(460px);
+      transition: all 1s ease;
+    }
+    .TuChengImgFalse {
+      transform: translateX(0px);
+      transition: all 1s ease;
+    }
     #ShowComVs {
       position: absolute;
       left: 0px;
@@ -779,7 +850,7 @@
       bottom: 0;
       width: 952px;
       height: 62px;
-      background: url('@/assets/images/Sponge_screen/menu/DB_img.png') no-repeat center;
+      background: url("@/assets/images/Sponge_screen/menu/DB_img.png") no-repeat center;
       background-size: cover;
     }
     // 图标菜单样式 从左到右按照顺序进行设定
@@ -913,7 +984,7 @@
     height: 800px;
     border: 1px solid #15d2fd;
     .el-dialog__header {
-      background: url('@/assets/images/Sponge_screen/DialogTitleBG.png') no-repeat center;
+      background: url("@/assets/images/Sponge_screen/DialogTitleBG.png") no-repeat center;
       background-size: cover;
       padding: 0;
       height: 60px;