diff --git a/package.json b/package.json
index 39861ad..e784d82 100644
--- a/package.json
+++ b/package.json
@@ -72,4 +72,4 @@
     "vite-plugin-svg-icons": "2.0.1",
     "vite-plugin-vue-setup-extend": "0.4.0"
   }
-}
+}
\ No newline at end of file

diff --git a/package.json b/package.json
index 39861ad..e784d82 100644
--- a/package.json
+++ b/package.json
@@ -72,4 +72,4 @@
     "vite-plugin-svg-icons": "2.0.1",
     "vite-plugin-vue-setup-extend": "0.4.0"
   }
-}
+}
\ No newline at end of file
diff --git a/src/assets/images/fhpl/sqjca.png b/src/assets/images/fhpl/sqjca.png
index 0eb531c..00e619c 100644
--- a/src/assets/images/fhpl/sqjca.png
+++ b/src/assets/images/fhpl/sqjca.png
Binary files differ

diff --git a/package.json b/package.json
index 39861ad..e784d82 100644
--- a/package.json
+++ b/package.json
@@ -72,4 +72,4 @@
     "vite-plugin-svg-icons": "2.0.1",
     "vite-plugin-vue-setup-extend": "0.4.0"
   }
-}
+}
\ No newline at end of file
diff --git a/src/assets/images/fhpl/sqjca.png b/src/assets/images/fhpl/sqjca.png
index 0eb531c..00e619c 100644
--- a/src/assets/images/fhpl/sqjca.png
+++ b/src/assets/images/fhpl/sqjca.png
Binary files differ
diff --git a/src/views/oneMap/ConstructionEvaluation/JSPGLeftBox.vue b/src/views/oneMap/ConstructionEvaluation/JSPGLeftBox.vue
index 2a7ff07..3ee47c4 100644
--- a/src/views/oneMap/ConstructionEvaluation/JSPGLeftBox.vue
+++ b/src/views/oneMap/ConstructionEvaluation/JSPGLeftBox.vue
@@ -65,8 +65,9 @@
   </div>
   <!-- 污水收集处理 -->
   <div class="Sewagecollection">
-    <div class="ListBoxHeader" @click="showSewageFectory">
-      <div class="ListBoxHeader_font">污水收集处理</div>
+    <div class="topVehicl flex">
+      <div class="icon"></div>
+      <div class="name">污水收集处理</div>
     </div>
     <div class="wssjEch"></div>
   </div>
@@ -293,7 +294,31 @@
 .Sewagecollection {
   width: 450px;
   height: 25%;
-  // background: yellowgreen;
+
+  .topVehicl {
+    font-family: Source Han Sans CN;
+    font-weight: bold;
+    font-size: 14px;
+    color: #ebfeff;
+    align-items: center;
+    height: 30px;
+    // background: teal;
+    .icon {
+      position: relative;
+      top: -1px;
+      width: 25px;
+      height: 25px;
+      background: url('@/assets/newImgs/xtb_img.png') no-repeat;
+    }
+
+    .name {
+      background: linear-gradient(0deg, rgba(0, 242, 255, 0.5) 0%, rgba(0, 242, 255, 0) 100%);
+      padding: 0px 3px;
+      height: 10px;
+      line-height: 0px;
+      margin-top: 6px;
+    }
+  }
   .wssjEch {
     margin: 5px auto;
     width: 420px;

diff --git a/package.json b/package.json
index 39861ad..e784d82 100644
--- a/package.json
+++ b/package.json
@@ -72,4 +72,4 @@
     "vite-plugin-svg-icons": "2.0.1",
     "vite-plugin-vue-setup-extend": "0.4.0"
   }
-}
+}
\ No newline at end of file
diff --git a/src/assets/images/fhpl/sqjca.png b/src/assets/images/fhpl/sqjca.png
index 0eb531c..00e619c 100644
--- a/src/assets/images/fhpl/sqjca.png
+++ b/src/assets/images/fhpl/sqjca.png
Binary files differ
diff --git a/src/views/oneMap/ConstructionEvaluation/JSPGLeftBox.vue b/src/views/oneMap/ConstructionEvaluation/JSPGLeftBox.vue
index 2a7ff07..3ee47c4 100644
--- a/src/views/oneMap/ConstructionEvaluation/JSPGLeftBox.vue
+++ b/src/views/oneMap/ConstructionEvaluation/JSPGLeftBox.vue
@@ -65,8 +65,9 @@
   </div>
   <!-- 污水收集处理 -->
   <div class="Sewagecollection">
-    <div class="ListBoxHeader" @click="showSewageFectory">
-      <div class="ListBoxHeader_font">污水收集处理</div>
+    <div class="topVehicl flex">
+      <div class="icon"></div>
+      <div class="name">污水收集处理</div>
     </div>
     <div class="wssjEch"></div>
   </div>
@@ -293,7 +294,31 @@
 .Sewagecollection {
   width: 450px;
   height: 25%;
-  // background: yellowgreen;
+
+  .topVehicl {
+    font-family: Source Han Sans CN;
+    font-weight: bold;
+    font-size: 14px;
+    color: #ebfeff;
+    align-items: center;
+    height: 30px;
+    // background: teal;
+    .icon {
+      position: relative;
+      top: -1px;
+      width: 25px;
+      height: 25px;
+      background: url('@/assets/newImgs/xtb_img.png') no-repeat;
+    }
+
+    .name {
+      background: linear-gradient(0deg, rgba(0, 242, 255, 0.5) 0%, rgba(0, 242, 255, 0) 100%);
+      padding: 0px 3px;
+      height: 10px;
+      line-height: 0px;
+      margin-top: 6px;
+    }
+  }
   .wssjEch {
     margin: 5px auto;
     width: 420px;
diff --git a/src/views/oneMap/ConstructionEvaluation/JSPGRightBox.vue b/src/views/oneMap/ConstructionEvaluation/JSPGRightBox.vue
index dbeddc8..3f696aa 100644
--- a/src/views/oneMap/ConstructionEvaluation/JSPGRightBox.vue
+++ b/src/views/oneMap/ConstructionEvaluation/JSPGRightBox.vue
@@ -2,7 +2,7 @@
   <!-- 绩效管理 -->
   <div class="management">
     <div class="ListBoxHeader">
-      <div class="ListBoxHeader_font">绩效管理</div>
+      <div class="ListBoxHeader_font">管理绩效</div>
     </div>
     <!-- 年份切换 -->
     <div class="subRightBox">

diff --git a/package.json b/package.json
index 39861ad..e784d82 100644
--- a/package.json
+++ b/package.json
@@ -72,4 +72,4 @@
     "vite-plugin-svg-icons": "2.0.1",
     "vite-plugin-vue-setup-extend": "0.4.0"
   }
-}
+}
\ No newline at end of file
diff --git a/src/assets/images/fhpl/sqjca.png b/src/assets/images/fhpl/sqjca.png
index 0eb531c..00e619c 100644
--- a/src/assets/images/fhpl/sqjca.png
+++ b/src/assets/images/fhpl/sqjca.png
Binary files differ
diff --git a/src/views/oneMap/ConstructionEvaluation/JSPGLeftBox.vue b/src/views/oneMap/ConstructionEvaluation/JSPGLeftBox.vue
index 2a7ff07..3ee47c4 100644
--- a/src/views/oneMap/ConstructionEvaluation/JSPGLeftBox.vue
+++ b/src/views/oneMap/ConstructionEvaluation/JSPGLeftBox.vue
@@ -65,8 +65,9 @@
   </div>
   <!-- 污水收集处理 -->
   <div class="Sewagecollection">
-    <div class="ListBoxHeader" @click="showSewageFectory">
-      <div class="ListBoxHeader_font">污水收集处理</div>
+    <div class="topVehicl flex">
+      <div class="icon"></div>
+      <div class="name">污水收集处理</div>
     </div>
     <div class="wssjEch"></div>
   </div>
@@ -293,7 +294,31 @@
 .Sewagecollection {
   width: 450px;
   height: 25%;
-  // background: yellowgreen;
+
+  .topVehicl {
+    font-family: Source Han Sans CN;
+    font-weight: bold;
+    font-size: 14px;
+    color: #ebfeff;
+    align-items: center;
+    height: 30px;
+    // background: teal;
+    .icon {
+      position: relative;
+      top: -1px;
+      width: 25px;
+      height: 25px;
+      background: url('@/assets/newImgs/xtb_img.png') no-repeat;
+    }
+
+    .name {
+      background: linear-gradient(0deg, rgba(0, 242, 255, 0.5) 0%, rgba(0, 242, 255, 0) 100%);
+      padding: 0px 3px;
+      height: 10px;
+      line-height: 0px;
+      margin-top: 6px;
+    }
+  }
   .wssjEch {
     margin: 5px auto;
     width: 420px;
diff --git a/src/views/oneMap/ConstructionEvaluation/JSPGRightBox.vue b/src/views/oneMap/ConstructionEvaluation/JSPGRightBox.vue
index dbeddc8..3f696aa 100644
--- a/src/views/oneMap/ConstructionEvaluation/JSPGRightBox.vue
+++ b/src/views/oneMap/ConstructionEvaluation/JSPGRightBox.vue
@@ -2,7 +2,7 @@
   <!-- 绩效管理 -->
   <div class="management">
     <div class="ListBoxHeader">
-      <div class="ListBoxHeader_font">绩效管理</div>
+      <div class="ListBoxHeader_font">管理绩效</div>
     </div>
     <!-- 年份切换 -->
     <div class="subRightBox">
diff --git a/src/views/oneMap/FloodStuationReview/sqhgBottomBox.vue b/src/views/oneMap/FloodStuationReview/sqhgBottomBox.vue
index 53d38bb..d178c59 100644
--- a/src/views/oneMap/FloodStuationReview/sqhgBottomBox.vue
+++ b/src/views/oneMap/FloodStuationReview/sqhgBottomBox.vue
@@ -117,8 +117,8 @@
 const ranLeng = [
   [
     { value: '0-0.2', color: 'rgba(7, 213, 118, 0)' },
-    { value: '0.2-5', color: 'rgba(7, 213, 118, 1)' },
-    { value: '5-25', color: 'rgba(38, 129, 240,1)' },
+    { value: '0.2-5', color: 'rgba(38, 129, 240,1)' },
+    { value: '5-25', color: 'rgb(222, 230, 0)' },
     { value: '>25', color: 'rgba(255, 26, 26, 1)' },
   ],
   [
@@ -235,14 +235,18 @@
   stepNum.value = 0;
   hgEngPlay.value = false;
   showRainLegend.value = false;
-  // NewFiberMapUtils.disposeRainfall('')
-  // newfiberMap.setLayersVisible(["krigingImage"],false)
+  // newfiberMapbox.map.removeLayer('canvas-layer0');
+  // newfiberMapbox.map.removeSource('canvas-source0');
   hoursList.value.activeIndex = stepNum.value;
   clearInterval(runDayInterval.value);
   if (runDayInterval.value) {
     runDayInterval.value = null;
     refresh.value = Math.random();
   }
+  // if (newfiberMapbox.map.getLayer('canvas-layer0')) {
+  //   newfiberMapbox.map.removeLayer('canvas-layer0');
+  //   newfiberMapbox.map.removeSource('canvas-source0');
+  // }
 }
 
 function changeChartData() {
@@ -375,10 +379,10 @@
 ];*/
 let colorScale = [
   { value: '0', color: 'rgba(7, 213, 118, 0)' },
-  { value: '0.2', color: 'rgba(7, 213, 118, 1)' },
-  { value: '5', color: 'rgba(38, 129, 240,1)' },
-  { value: '25', color: 'rgba(255, 26, 26, 1)' },
-  { value: '250', color: 'rgba(255, 26, 26, 1)' },
+  { value: '0.2', color: 'rgb(38, 129, 240)' },
+  { value: '5', color: 'rgb(222, 230, 0)' },
+  { value: '25', color: 'rgb(255, 26, 26)' },
+  { value: '250', color: 'rgb(255, 26, 26)' },
 ];
 let imageFiles = [];
 let canvas = [];

diff --git a/package.json b/package.json
index 39861ad..e784d82 100644
--- a/package.json
+++ b/package.json
@@ -72,4 +72,4 @@
     "vite-plugin-svg-icons": "2.0.1",
     "vite-plugin-vue-setup-extend": "0.4.0"
   }
-}
+}
\ No newline at end of file
diff --git a/src/assets/images/fhpl/sqjca.png b/src/assets/images/fhpl/sqjca.png
index 0eb531c..00e619c 100644
--- a/src/assets/images/fhpl/sqjca.png
+++ b/src/assets/images/fhpl/sqjca.png
Binary files differ
diff --git a/src/views/oneMap/ConstructionEvaluation/JSPGLeftBox.vue b/src/views/oneMap/ConstructionEvaluation/JSPGLeftBox.vue
index 2a7ff07..3ee47c4 100644
--- a/src/views/oneMap/ConstructionEvaluation/JSPGLeftBox.vue
+++ b/src/views/oneMap/ConstructionEvaluation/JSPGLeftBox.vue
@@ -65,8 +65,9 @@
   </div>
   <!-- 污水收集处理 -->
   <div class="Sewagecollection">
-    <div class="ListBoxHeader" @click="showSewageFectory">
-      <div class="ListBoxHeader_font">污水收集处理</div>
+    <div class="topVehicl flex">
+      <div class="icon"></div>
+      <div class="name">污水收集处理</div>
     </div>
     <div class="wssjEch"></div>
   </div>
@@ -293,7 +294,31 @@
 .Sewagecollection {
   width: 450px;
   height: 25%;
-  // background: yellowgreen;
+
+  .topVehicl {
+    font-family: Source Han Sans CN;
+    font-weight: bold;
+    font-size: 14px;
+    color: #ebfeff;
+    align-items: center;
+    height: 30px;
+    // background: teal;
+    .icon {
+      position: relative;
+      top: -1px;
+      width: 25px;
+      height: 25px;
+      background: url('@/assets/newImgs/xtb_img.png') no-repeat;
+    }
+
+    .name {
+      background: linear-gradient(0deg, rgba(0, 242, 255, 0.5) 0%, rgba(0, 242, 255, 0) 100%);
+      padding: 0px 3px;
+      height: 10px;
+      line-height: 0px;
+      margin-top: 6px;
+    }
+  }
   .wssjEch {
     margin: 5px auto;
     width: 420px;
diff --git a/src/views/oneMap/ConstructionEvaluation/JSPGRightBox.vue b/src/views/oneMap/ConstructionEvaluation/JSPGRightBox.vue
index dbeddc8..3f696aa 100644
--- a/src/views/oneMap/ConstructionEvaluation/JSPGRightBox.vue
+++ b/src/views/oneMap/ConstructionEvaluation/JSPGRightBox.vue
@@ -2,7 +2,7 @@
   <!-- 绩效管理 -->
   <div class="management">
     <div class="ListBoxHeader">
-      <div class="ListBoxHeader_font">绩效管理</div>
+      <div class="ListBoxHeader_font">管理绩效</div>
     </div>
     <!-- 年份切换 -->
     <div class="subRightBox">
diff --git a/src/views/oneMap/FloodStuationReview/sqhgBottomBox.vue b/src/views/oneMap/FloodStuationReview/sqhgBottomBox.vue
index 53d38bb..d178c59 100644
--- a/src/views/oneMap/FloodStuationReview/sqhgBottomBox.vue
+++ b/src/views/oneMap/FloodStuationReview/sqhgBottomBox.vue
@@ -117,8 +117,8 @@
 const ranLeng = [
   [
     { value: '0-0.2', color: 'rgba(7, 213, 118, 0)' },
-    { value: '0.2-5', color: 'rgba(7, 213, 118, 1)' },
-    { value: '5-25', color: 'rgba(38, 129, 240,1)' },
+    { value: '0.2-5', color: 'rgba(38, 129, 240,1)' },
+    { value: '5-25', color: 'rgb(222, 230, 0)' },
     { value: '>25', color: 'rgba(255, 26, 26, 1)' },
   ],
   [
@@ -235,14 +235,18 @@
   stepNum.value = 0;
   hgEngPlay.value = false;
   showRainLegend.value = false;
-  // NewFiberMapUtils.disposeRainfall('')
-  // newfiberMap.setLayersVisible(["krigingImage"],false)
+  // newfiberMapbox.map.removeLayer('canvas-layer0');
+  // newfiberMapbox.map.removeSource('canvas-source0');
   hoursList.value.activeIndex = stepNum.value;
   clearInterval(runDayInterval.value);
   if (runDayInterval.value) {
     runDayInterval.value = null;
     refresh.value = Math.random();
   }
+  // if (newfiberMapbox.map.getLayer('canvas-layer0')) {
+  //   newfiberMapbox.map.removeLayer('canvas-layer0');
+  //   newfiberMapbox.map.removeSource('canvas-source0');
+  // }
 }
 
 function changeChartData() {
@@ -375,10 +379,10 @@
 ];*/
 let colorScale = [
   { value: '0', color: 'rgba(7, 213, 118, 0)' },
-  { value: '0.2', color: 'rgba(7, 213, 118, 1)' },
-  { value: '5', color: 'rgba(38, 129, 240,1)' },
-  { value: '25', color: 'rgba(255, 26, 26, 1)' },
-  { value: '250', color: 'rgba(255, 26, 26, 1)' },
+  { value: '0.2', color: 'rgb(38, 129, 240)' },
+  { value: '5', color: 'rgb(222, 230, 0)' },
+  { value: '25', color: 'rgb(255, 26, 26)' },
+  { value: '250', color: 'rgb(255, 26, 26)' },
 ];
 let imageFiles = [];
 let canvas = [];
diff --git a/src/views/oneMap/FloodStuationReview/xqhgLeftBox.vue b/src/views/oneMap/FloodStuationReview/xqhgLeftBox.vue
index 14170d1..c43cb7b 100644
--- a/src/views/oneMap/FloodStuationReview/xqhgLeftBox.vue
+++ b/src/views/oneMap/FloodStuationReview/xqhgLeftBox.vue
@@ -122,7 +122,7 @@
         background: linear-gradient(0deg, rgba(0, 242, 255, 0.5) 0%, rgba(0, 242, 255, 0) 100%);
         height: 10px;
         line-height: 0px;
-        margin-top: 10px;
+        margin-top: 12px;
       }
     }
     .ScheduEcharts {
@@ -161,7 +161,7 @@
       background: linear-gradient(0deg, rgba(0, 242, 255, 0.5) 0%, rgba(0, 242, 255, 0) 100%);
       height: 10px;
       line-height: 0px;
-      margin-top: 10px;
+      margin-top: 12px;
     }
   }
   .VehiclEcharts {
@@ -196,7 +196,7 @@
       background: linear-gradient(0deg, rgba(0, 242, 255, 0.5) 0%, rgba(0, 242, 255, 0) 100%);
       height: 10px;
       line-height: 0px;
-      margin-top: 10px;
+      margin-top: 12px;
     }
   }
   .MaterialEcharts {

diff --git a/package.json b/package.json
index 39861ad..e784d82 100644
--- a/package.json
+++ b/package.json
@@ -72,4 +72,4 @@
     "vite-plugin-svg-icons": "2.0.1",
     "vite-plugin-vue-setup-extend": "0.4.0"
   }
-}
+}
\ No newline at end of file
diff --git a/src/assets/images/fhpl/sqjca.png b/src/assets/images/fhpl/sqjca.png
index 0eb531c..00e619c 100644
--- a/src/assets/images/fhpl/sqjca.png
+++ b/src/assets/images/fhpl/sqjca.png
Binary files differ
diff --git a/src/views/oneMap/ConstructionEvaluation/JSPGLeftBox.vue b/src/views/oneMap/ConstructionEvaluation/JSPGLeftBox.vue
index 2a7ff07..3ee47c4 100644
--- a/src/views/oneMap/ConstructionEvaluation/JSPGLeftBox.vue
+++ b/src/views/oneMap/ConstructionEvaluation/JSPGLeftBox.vue
@@ -65,8 +65,9 @@
   </div>
   <!-- 污水收集处理 -->
   <div class="Sewagecollection">
-    <div class="ListBoxHeader" @click="showSewageFectory">
-      <div class="ListBoxHeader_font">污水收集处理</div>
+    <div class="topVehicl flex">
+      <div class="icon"></div>
+      <div class="name">污水收集处理</div>
     </div>
     <div class="wssjEch"></div>
   </div>
@@ -293,7 +294,31 @@
 .Sewagecollection {
   width: 450px;
   height: 25%;
-  // background: yellowgreen;
+
+  .topVehicl {
+    font-family: Source Han Sans CN;
+    font-weight: bold;
+    font-size: 14px;
+    color: #ebfeff;
+    align-items: center;
+    height: 30px;
+    // background: teal;
+    .icon {
+      position: relative;
+      top: -1px;
+      width: 25px;
+      height: 25px;
+      background: url('@/assets/newImgs/xtb_img.png') no-repeat;
+    }
+
+    .name {
+      background: linear-gradient(0deg, rgba(0, 242, 255, 0.5) 0%, rgba(0, 242, 255, 0) 100%);
+      padding: 0px 3px;
+      height: 10px;
+      line-height: 0px;
+      margin-top: 6px;
+    }
+  }
   .wssjEch {
     margin: 5px auto;
     width: 420px;
diff --git a/src/views/oneMap/ConstructionEvaluation/JSPGRightBox.vue b/src/views/oneMap/ConstructionEvaluation/JSPGRightBox.vue
index dbeddc8..3f696aa 100644
--- a/src/views/oneMap/ConstructionEvaluation/JSPGRightBox.vue
+++ b/src/views/oneMap/ConstructionEvaluation/JSPGRightBox.vue
@@ -2,7 +2,7 @@
   <!-- 绩效管理 -->
   <div class="management">
     <div class="ListBoxHeader">
-      <div class="ListBoxHeader_font">绩效管理</div>
+      <div class="ListBoxHeader_font">管理绩效</div>
     </div>
     <!-- 年份切换 -->
     <div class="subRightBox">
diff --git a/src/views/oneMap/FloodStuationReview/sqhgBottomBox.vue b/src/views/oneMap/FloodStuationReview/sqhgBottomBox.vue
index 53d38bb..d178c59 100644
--- a/src/views/oneMap/FloodStuationReview/sqhgBottomBox.vue
+++ b/src/views/oneMap/FloodStuationReview/sqhgBottomBox.vue
@@ -117,8 +117,8 @@
 const ranLeng = [
   [
     { value: '0-0.2', color: 'rgba(7, 213, 118, 0)' },
-    { value: '0.2-5', color: 'rgba(7, 213, 118, 1)' },
-    { value: '5-25', color: 'rgba(38, 129, 240,1)' },
+    { value: '0.2-5', color: 'rgba(38, 129, 240,1)' },
+    { value: '5-25', color: 'rgb(222, 230, 0)' },
     { value: '>25', color: 'rgba(255, 26, 26, 1)' },
   ],
   [
@@ -235,14 +235,18 @@
   stepNum.value = 0;
   hgEngPlay.value = false;
   showRainLegend.value = false;
-  // NewFiberMapUtils.disposeRainfall('')
-  // newfiberMap.setLayersVisible(["krigingImage"],false)
+  // newfiberMapbox.map.removeLayer('canvas-layer0');
+  // newfiberMapbox.map.removeSource('canvas-source0');
   hoursList.value.activeIndex = stepNum.value;
   clearInterval(runDayInterval.value);
   if (runDayInterval.value) {
     runDayInterval.value = null;
     refresh.value = Math.random();
   }
+  // if (newfiberMapbox.map.getLayer('canvas-layer0')) {
+  //   newfiberMapbox.map.removeLayer('canvas-layer0');
+  //   newfiberMapbox.map.removeSource('canvas-source0');
+  // }
 }
 
 function changeChartData() {
@@ -375,10 +379,10 @@
 ];*/
 let colorScale = [
   { value: '0', color: 'rgba(7, 213, 118, 0)' },
-  { value: '0.2', color: 'rgba(7, 213, 118, 1)' },
-  { value: '5', color: 'rgba(38, 129, 240,1)' },
-  { value: '25', color: 'rgba(255, 26, 26, 1)' },
-  { value: '250', color: 'rgba(255, 26, 26, 1)' },
+  { value: '0.2', color: 'rgb(38, 129, 240)' },
+  { value: '5', color: 'rgb(222, 230, 0)' },
+  { value: '25', color: 'rgb(255, 26, 26)' },
+  { value: '250', color: 'rgb(255, 26, 26)' },
 ];
 let imageFiles = [];
 let canvas = [];
diff --git a/src/views/oneMap/FloodStuationReview/xqhgLeftBox.vue b/src/views/oneMap/FloodStuationReview/xqhgLeftBox.vue
index 14170d1..c43cb7b 100644
--- a/src/views/oneMap/FloodStuationReview/xqhgLeftBox.vue
+++ b/src/views/oneMap/FloodStuationReview/xqhgLeftBox.vue
@@ -122,7 +122,7 @@
         background: linear-gradient(0deg, rgba(0, 242, 255, 0.5) 0%, rgba(0, 242, 255, 0) 100%);
         height: 10px;
         line-height: 0px;
-        margin-top: 10px;
+        margin-top: 12px;
       }
     }
     .ScheduEcharts {
@@ -161,7 +161,7 @@
       background: linear-gradient(0deg, rgba(0, 242, 255, 0.5) 0%, rgba(0, 242, 255, 0) 100%);
       height: 10px;
       line-height: 0px;
-      margin-top: 10px;
+      margin-top: 12px;
     }
   }
   .VehiclEcharts {
@@ -196,7 +196,7 @@
       background: linear-gradient(0deg, rgba(0, 242, 255, 0.5) 0%, rgba(0, 242, 255, 0) 100%);
       height: 10px;
       line-height: 0px;
-      margin-top: 10px;
+      margin-top: 12px;
     }
   }
   .MaterialEcharts {
diff --git a/src/views/oneMap/LayerControl/LayerControl.vue b/src/views/oneMap/LayerControl/LayerControl.vue
index 37d0576..cc8e024 100644
--- a/src/views/oneMap/LayerControl/LayerControl.vue
+++ b/src/views/oneMap/LayerControl/LayerControl.vue
@@ -30,29 +30,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 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({
   // 图层控制面板的渲染数据
   /**图层面板数据字段说明
@@ -69,72 +70,90 @@
       Show: true,
       children: [
         {
-          layerName: "中心城区",
-          layerKey: "centerCity",
-          layerIcon: requireTuChengImg("zhongxinchengqu"),
+          layerName: '蓝色地图',
+          layerKey: 'blackMap',
+          layerIcon: requireTuChengImg('zhongxinchengqu'),
+          layerVisible: false,
+        },
+        {
+          layerName: '白色地图',
+          layerKey: 'whiteMap',
+          layerIcon: requireTuChengImg('zhongxinchengqu'),
+          layerVisible: false,
+        },
+        {
+          layerName: '影像地图',
+          layerKey: 'imageMap',
+          layerIcon: requireTuChengImg('zhongxinchengqu'),
+          layerVisible: false,
+        },
+        {
+          layerName: '中心城区',
+          layerKey: 'centerCity',
+          layerIcon: requireTuChengImg('zhongxinchengqu'),
           layerVisible: false,
           dynamicLineData: yanAnCenterCity,
         },
         {
-          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,
         },
@@ -145,38 +164,38 @@
       Show: true,
       children: [
         {
-          layerName: "燃气管网",
-          layerKey: "rq_all",
+          layerName: '燃气管网',
+          layerKey: 'rq_all',
           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,
         },
@@ -187,22 +206,22 @@
       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,
         },
@@ -213,8 +232,8 @@
         //   layerVisible: false,
         // },
         {
-          layerName: "雨水泵站",
-          layerKey: "YSBZ",
+          layerName: '雨水泵站',
+          layerKey: 'YSBZ',
           layerIcon: null,
           layerVisible: false,
           data: yanAnYSBZ,
@@ -226,14 +245,14 @@
       Show: true,
       children: [
         {
-          layerName: "污水分区",
-          layerKey: "sewageArea",
+          layerName: '污水分区',
+          layerKey: 'sewageArea',
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: "污水管网",
-          layerKey: "wsLine1",
+          layerName: '污水管网',
+          layerKey: 'wsLine1',
           layerIcon: null,
           layerVisible: false,
         },
@@ -250,8 +269,8 @@
         //   layerVisible: false,
         // },
         {
-          layerName: "污水处理厂",
-          layerKey: "WSCLC",
+          layerName: '污水处理厂',
+          layerKey: 'WSCLC',
           layerIcon: null,
           layerVisible: false,
           data: yanAnWSCLC,
@@ -263,36 +282,36 @@
       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,
@@ -307,10 +326,10 @@
     .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,
@@ -319,37 +338,79 @@
 watch(
   () => props.ShowTuCheng,
   (newValue, oldValue) => {
-    console.log("ShowTuCheng变化了", newValue, oldValue);
+    console.log('ShowTuCheng变化了', newValue, oldValue);
   },
   { immediate: true, deep: true }
 );
 
-const layerClick = (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 });
+  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 => {
+      oldIds.push(layer.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]));
+    });
+    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');
+    let newMapStyle;
+    let oldMapStyle = newfiberMapbox.map.getStyle();
+    let oldIds = [];
+    oldMapStyle.layers.forEach(layer => {
+      oldIds.push(layer.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]));
+    });
+    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.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.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, // 持续时间，延时
@@ -360,29 +421,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, // 持续时间，延时
@@ -393,22 +454,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, // 持续时间，延时
@@ -419,29 +480,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) : '';
       });
     });
   });
@@ -449,17 +510,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>
 
@@ -470,7 +531,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;
@@ -486,7 +547,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;

diff --git a/package.json b/package.json
index 39861ad..e784d82 100644
--- a/package.json
+++ b/package.json
@@ -72,4 +72,4 @@
     "vite-plugin-svg-icons": "2.0.1",
     "vite-plugin-vue-setup-extend": "0.4.0"
   }
-}
+}
\ No newline at end of file
diff --git a/src/assets/images/fhpl/sqjca.png b/src/assets/images/fhpl/sqjca.png
index 0eb531c..00e619c 100644
--- a/src/assets/images/fhpl/sqjca.png
+++ b/src/assets/images/fhpl/sqjca.png
Binary files differ
diff --git a/src/views/oneMap/ConstructionEvaluation/JSPGLeftBox.vue b/src/views/oneMap/ConstructionEvaluation/JSPGLeftBox.vue
index 2a7ff07..3ee47c4 100644
--- a/src/views/oneMap/ConstructionEvaluation/JSPGLeftBox.vue
+++ b/src/views/oneMap/ConstructionEvaluation/JSPGLeftBox.vue
@@ -65,8 +65,9 @@
   </div>
   <!-- 污水收集处理 -->
   <div class="Sewagecollection">
-    <div class="ListBoxHeader" @click="showSewageFectory">
-      <div class="ListBoxHeader_font">污水收集处理</div>
+    <div class="topVehicl flex">
+      <div class="icon"></div>
+      <div class="name">污水收集处理</div>
     </div>
     <div class="wssjEch"></div>
   </div>
@@ -293,7 +294,31 @@
 .Sewagecollection {
   width: 450px;
   height: 25%;
-  // background: yellowgreen;
+
+  .topVehicl {
+    font-family: Source Han Sans CN;
+    font-weight: bold;
+    font-size: 14px;
+    color: #ebfeff;
+    align-items: center;
+    height: 30px;
+    // background: teal;
+    .icon {
+      position: relative;
+      top: -1px;
+      width: 25px;
+      height: 25px;
+      background: url('@/assets/newImgs/xtb_img.png') no-repeat;
+    }
+
+    .name {
+      background: linear-gradient(0deg, rgba(0, 242, 255, 0.5) 0%, rgba(0, 242, 255, 0) 100%);
+      padding: 0px 3px;
+      height: 10px;
+      line-height: 0px;
+      margin-top: 6px;
+    }
+  }
   .wssjEch {
     margin: 5px auto;
     width: 420px;
diff --git a/src/views/oneMap/ConstructionEvaluation/JSPGRightBox.vue b/src/views/oneMap/ConstructionEvaluation/JSPGRightBox.vue
index dbeddc8..3f696aa 100644
--- a/src/views/oneMap/ConstructionEvaluation/JSPGRightBox.vue
+++ b/src/views/oneMap/ConstructionEvaluation/JSPGRightBox.vue
@@ -2,7 +2,7 @@
   <!-- 绩效管理 -->
   <div class="management">
     <div class="ListBoxHeader">
-      <div class="ListBoxHeader_font">绩效管理</div>
+      <div class="ListBoxHeader_font">管理绩效</div>
     </div>
     <!-- 年份切换 -->
     <div class="subRightBox">
diff --git a/src/views/oneMap/FloodStuationReview/sqhgBottomBox.vue b/src/views/oneMap/FloodStuationReview/sqhgBottomBox.vue
index 53d38bb..d178c59 100644
--- a/src/views/oneMap/FloodStuationReview/sqhgBottomBox.vue
+++ b/src/views/oneMap/FloodStuationReview/sqhgBottomBox.vue
@@ -117,8 +117,8 @@
 const ranLeng = [
   [
     { value: '0-0.2', color: 'rgba(7, 213, 118, 0)' },
-    { value: '0.2-5', color: 'rgba(7, 213, 118, 1)' },
-    { value: '5-25', color: 'rgba(38, 129, 240,1)' },
+    { value: '0.2-5', color: 'rgba(38, 129, 240,1)' },
+    { value: '5-25', color: 'rgb(222, 230, 0)' },
     { value: '>25', color: 'rgba(255, 26, 26, 1)' },
   ],
   [
@@ -235,14 +235,18 @@
   stepNum.value = 0;
   hgEngPlay.value = false;
   showRainLegend.value = false;
-  // NewFiberMapUtils.disposeRainfall('')
-  // newfiberMap.setLayersVisible(["krigingImage"],false)
+  // newfiberMapbox.map.removeLayer('canvas-layer0');
+  // newfiberMapbox.map.removeSource('canvas-source0');
   hoursList.value.activeIndex = stepNum.value;
   clearInterval(runDayInterval.value);
   if (runDayInterval.value) {
     runDayInterval.value = null;
     refresh.value = Math.random();
   }
+  // if (newfiberMapbox.map.getLayer('canvas-layer0')) {
+  //   newfiberMapbox.map.removeLayer('canvas-layer0');
+  //   newfiberMapbox.map.removeSource('canvas-source0');
+  // }
 }
 
 function changeChartData() {
@@ -375,10 +379,10 @@
 ];*/
 let colorScale = [
   { value: '0', color: 'rgba(7, 213, 118, 0)' },
-  { value: '0.2', color: 'rgba(7, 213, 118, 1)' },
-  { value: '5', color: 'rgba(38, 129, 240,1)' },
-  { value: '25', color: 'rgba(255, 26, 26, 1)' },
-  { value: '250', color: 'rgba(255, 26, 26, 1)' },
+  { value: '0.2', color: 'rgb(38, 129, 240)' },
+  { value: '5', color: 'rgb(222, 230, 0)' },
+  { value: '25', color: 'rgb(255, 26, 26)' },
+  { value: '250', color: 'rgb(255, 26, 26)' },
 ];
 let imageFiles = [];
 let canvas = [];
diff --git a/src/views/oneMap/FloodStuationReview/xqhgLeftBox.vue b/src/views/oneMap/FloodStuationReview/xqhgLeftBox.vue
index 14170d1..c43cb7b 100644
--- a/src/views/oneMap/FloodStuationReview/xqhgLeftBox.vue
+++ b/src/views/oneMap/FloodStuationReview/xqhgLeftBox.vue
@@ -122,7 +122,7 @@
         background: linear-gradient(0deg, rgba(0, 242, 255, 0.5) 0%, rgba(0, 242, 255, 0) 100%);
         height: 10px;
         line-height: 0px;
-        margin-top: 10px;
+        margin-top: 12px;
       }
     }
     .ScheduEcharts {
@@ -161,7 +161,7 @@
       background: linear-gradient(0deg, rgba(0, 242, 255, 0.5) 0%, rgba(0, 242, 255, 0) 100%);
       height: 10px;
       line-height: 0px;
-      margin-top: 10px;
+      margin-top: 12px;
     }
   }
   .VehiclEcharts {
@@ -196,7 +196,7 @@
       background: linear-gradient(0deg, rgba(0, 242, 255, 0.5) 0%, rgba(0, 242, 255, 0) 100%);
       height: 10px;
       line-height: 0px;
-      margin-top: 10px;
+      margin-top: 12px;
     }
   }
   .MaterialEcharts {
diff --git a/src/views/oneMap/LayerControl/LayerControl.vue b/src/views/oneMap/LayerControl/LayerControl.vue
index 37d0576..cc8e024 100644
--- a/src/views/oneMap/LayerControl/LayerControl.vue
+++ b/src/views/oneMap/LayerControl/LayerControl.vue
@@ -30,29 +30,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 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({
   // 图层控制面板的渲染数据
   /**图层面板数据字段说明
@@ -69,72 +70,90 @@
       Show: true,
       children: [
         {
-          layerName: "中心城区",
-          layerKey: "centerCity",
-          layerIcon: requireTuChengImg("zhongxinchengqu"),
+          layerName: '蓝色地图',
+          layerKey: 'blackMap',
+          layerIcon: requireTuChengImg('zhongxinchengqu'),
+          layerVisible: false,
+        },
+        {
+          layerName: '白色地图',
+          layerKey: 'whiteMap',
+          layerIcon: requireTuChengImg('zhongxinchengqu'),
+          layerVisible: false,
+        },
+        {
+          layerName: '影像地图',
+          layerKey: 'imageMap',
+          layerIcon: requireTuChengImg('zhongxinchengqu'),
+          layerVisible: false,
+        },
+        {
+          layerName: '中心城区',
+          layerKey: 'centerCity',
+          layerIcon: requireTuChengImg('zhongxinchengqu'),
           layerVisible: false,
           dynamicLineData: yanAnCenterCity,
         },
         {
-          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,
         },
@@ -145,38 +164,38 @@
       Show: true,
       children: [
         {
-          layerName: "燃气管网",
-          layerKey: "rq_all",
+          layerName: '燃气管网',
+          layerKey: 'rq_all',
           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,
         },
@@ -187,22 +206,22 @@
       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,
         },
@@ -213,8 +232,8 @@
         //   layerVisible: false,
         // },
         {
-          layerName: "雨水泵站",
-          layerKey: "YSBZ",
+          layerName: '雨水泵站',
+          layerKey: 'YSBZ',
           layerIcon: null,
           layerVisible: false,
           data: yanAnYSBZ,
@@ -226,14 +245,14 @@
       Show: true,
       children: [
         {
-          layerName: "污水分区",
-          layerKey: "sewageArea",
+          layerName: '污水分区',
+          layerKey: 'sewageArea',
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: "污水管网",
-          layerKey: "wsLine1",
+          layerName: '污水管网',
+          layerKey: 'wsLine1',
           layerIcon: null,
           layerVisible: false,
         },
@@ -250,8 +269,8 @@
         //   layerVisible: false,
         // },
         {
-          layerName: "污水处理厂",
-          layerKey: "WSCLC",
+          layerName: '污水处理厂',
+          layerKey: 'WSCLC',
           layerIcon: null,
           layerVisible: false,
           data: yanAnWSCLC,
@@ -263,36 +282,36 @@
       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,
@@ -307,10 +326,10 @@
     .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,
@@ -319,37 +338,79 @@
 watch(
   () => props.ShowTuCheng,
   (newValue, oldValue) => {
-    console.log("ShowTuCheng变化了", newValue, oldValue);
+    console.log('ShowTuCheng变化了', newValue, oldValue);
   },
   { immediate: true, deep: true }
 );
 
-const layerClick = (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 });
+  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 => {
+      oldIds.push(layer.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]));
+    });
+    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');
+    let newMapStyle;
+    let oldMapStyle = newfiberMapbox.map.getStyle();
+    let oldIds = [];
+    oldMapStyle.layers.forEach(layer => {
+      oldIds.push(layer.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]));
+    });
+    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.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.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, // 持续时间，延时
@@ -360,29 +421,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, // 持续时间，延时
@@ -393,22 +454,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, // 持续时间，延时
@@ -419,29 +480,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) : '';
       });
     });
   });
@@ -449,17 +510,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>
 
@@ -470,7 +531,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;
@@ -486,7 +547,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;
diff --git a/src/views/oneMap/components/FXHG.vue b/src/views/oneMap/components/FXHG.vue
index 8924475..44e9c21 100644
--- a/src/views/oneMap/components/FXHG.vue
+++ b/src/views/oneMap/components/FXHG.vue
@@ -40,6 +40,7 @@
   showPanel.value = true;
   showBottom.value = false;
   curType.value = true;
+  bus.emit('SetLayerShow', ['蓝色地图']);
   if (newfiberMapbox.map.getLayer('dynamicRoute')) {
     newfiberMapbox.map.removeLayer('dynamicRoute');
     newfiberMapbox.map.removeLayer('dynamicRoute_Symbol');
@@ -68,6 +69,7 @@
 
   let initePSTimer = setInterval(() => {
     if (!newfiberMapbox) return;
+    bus.emit('SetLayerShow', ['白色地图']);
     bus.emit('setLayerVisible', { layername: 'ysLine1', isCheck: true });
     //bus.emit('setLayerVisible', { layername: 'wsLine1', isCheck: true });
     clearInterval(initePSTimer);

diff --git a/package.json b/package.json
index 39861ad..e784d82 100644
--- a/package.json
+++ b/package.json
@@ -72,4 +72,4 @@
     "vite-plugin-svg-icons": "2.0.1",
     "vite-plugin-vue-setup-extend": "0.4.0"
   }
-}
+}
\ No newline at end of file
diff --git a/src/assets/images/fhpl/sqjca.png b/src/assets/images/fhpl/sqjca.png
index 0eb531c..00e619c 100644
--- a/src/assets/images/fhpl/sqjca.png
+++ b/src/assets/images/fhpl/sqjca.png
Binary files differ
diff --git a/src/views/oneMap/ConstructionEvaluation/JSPGLeftBox.vue b/src/views/oneMap/ConstructionEvaluation/JSPGLeftBox.vue
index 2a7ff07..3ee47c4 100644
--- a/src/views/oneMap/ConstructionEvaluation/JSPGLeftBox.vue
+++ b/src/views/oneMap/ConstructionEvaluation/JSPGLeftBox.vue
@@ -65,8 +65,9 @@
   </div>
   <!-- 污水收集处理 -->
   <div class="Sewagecollection">
-    <div class="ListBoxHeader" @click="showSewageFectory">
-      <div class="ListBoxHeader_font">污水收集处理</div>
+    <div class="topVehicl flex">
+      <div class="icon"></div>
+      <div class="name">污水收集处理</div>
     </div>
     <div class="wssjEch"></div>
   </div>
@@ -293,7 +294,31 @@
 .Sewagecollection {
   width: 450px;
   height: 25%;
-  // background: yellowgreen;
+
+  .topVehicl {
+    font-family: Source Han Sans CN;
+    font-weight: bold;
+    font-size: 14px;
+    color: #ebfeff;
+    align-items: center;
+    height: 30px;
+    // background: teal;
+    .icon {
+      position: relative;
+      top: -1px;
+      width: 25px;
+      height: 25px;
+      background: url('@/assets/newImgs/xtb_img.png') no-repeat;
+    }
+
+    .name {
+      background: linear-gradient(0deg, rgba(0, 242, 255, 0.5) 0%, rgba(0, 242, 255, 0) 100%);
+      padding: 0px 3px;
+      height: 10px;
+      line-height: 0px;
+      margin-top: 6px;
+    }
+  }
   .wssjEch {
     margin: 5px auto;
     width: 420px;
diff --git a/src/views/oneMap/ConstructionEvaluation/JSPGRightBox.vue b/src/views/oneMap/ConstructionEvaluation/JSPGRightBox.vue
index dbeddc8..3f696aa 100644
--- a/src/views/oneMap/ConstructionEvaluation/JSPGRightBox.vue
+++ b/src/views/oneMap/ConstructionEvaluation/JSPGRightBox.vue
@@ -2,7 +2,7 @@
   <!-- 绩效管理 -->
   <div class="management">
     <div class="ListBoxHeader">
-      <div class="ListBoxHeader_font">绩效管理</div>
+      <div class="ListBoxHeader_font">管理绩效</div>
     </div>
     <!-- 年份切换 -->
     <div class="subRightBox">
diff --git a/src/views/oneMap/FloodStuationReview/sqhgBottomBox.vue b/src/views/oneMap/FloodStuationReview/sqhgBottomBox.vue
index 53d38bb..d178c59 100644
--- a/src/views/oneMap/FloodStuationReview/sqhgBottomBox.vue
+++ b/src/views/oneMap/FloodStuationReview/sqhgBottomBox.vue
@@ -117,8 +117,8 @@
 const ranLeng = [
   [
     { value: '0-0.2', color: 'rgba(7, 213, 118, 0)' },
-    { value: '0.2-5', color: 'rgba(7, 213, 118, 1)' },
-    { value: '5-25', color: 'rgba(38, 129, 240,1)' },
+    { value: '0.2-5', color: 'rgba(38, 129, 240,1)' },
+    { value: '5-25', color: 'rgb(222, 230, 0)' },
     { value: '>25', color: 'rgba(255, 26, 26, 1)' },
   ],
   [
@@ -235,14 +235,18 @@
   stepNum.value = 0;
   hgEngPlay.value = false;
   showRainLegend.value = false;
-  // NewFiberMapUtils.disposeRainfall('')
-  // newfiberMap.setLayersVisible(["krigingImage"],false)
+  // newfiberMapbox.map.removeLayer('canvas-layer0');
+  // newfiberMapbox.map.removeSource('canvas-source0');
   hoursList.value.activeIndex = stepNum.value;
   clearInterval(runDayInterval.value);
   if (runDayInterval.value) {
     runDayInterval.value = null;
     refresh.value = Math.random();
   }
+  // if (newfiberMapbox.map.getLayer('canvas-layer0')) {
+  //   newfiberMapbox.map.removeLayer('canvas-layer0');
+  //   newfiberMapbox.map.removeSource('canvas-source0');
+  // }
 }
 
 function changeChartData() {
@@ -375,10 +379,10 @@
 ];*/
 let colorScale = [
   { value: '0', color: 'rgba(7, 213, 118, 0)' },
-  { value: '0.2', color: 'rgba(7, 213, 118, 1)' },
-  { value: '5', color: 'rgba(38, 129, 240,1)' },
-  { value: '25', color: 'rgba(255, 26, 26, 1)' },
-  { value: '250', color: 'rgba(255, 26, 26, 1)' },
+  { value: '0.2', color: 'rgb(38, 129, 240)' },
+  { value: '5', color: 'rgb(222, 230, 0)' },
+  { value: '25', color: 'rgb(255, 26, 26)' },
+  { value: '250', color: 'rgb(255, 26, 26)' },
 ];
 let imageFiles = [];
 let canvas = [];
diff --git a/src/views/oneMap/FloodStuationReview/xqhgLeftBox.vue b/src/views/oneMap/FloodStuationReview/xqhgLeftBox.vue
index 14170d1..c43cb7b 100644
--- a/src/views/oneMap/FloodStuationReview/xqhgLeftBox.vue
+++ b/src/views/oneMap/FloodStuationReview/xqhgLeftBox.vue
@@ -122,7 +122,7 @@
         background: linear-gradient(0deg, rgba(0, 242, 255, 0.5) 0%, rgba(0, 242, 255, 0) 100%);
         height: 10px;
         line-height: 0px;
-        margin-top: 10px;
+        margin-top: 12px;
       }
     }
     .ScheduEcharts {
@@ -161,7 +161,7 @@
       background: linear-gradient(0deg, rgba(0, 242, 255, 0.5) 0%, rgba(0, 242, 255, 0) 100%);
       height: 10px;
       line-height: 0px;
-      margin-top: 10px;
+      margin-top: 12px;
     }
   }
   .VehiclEcharts {
@@ -196,7 +196,7 @@
       background: linear-gradient(0deg, rgba(0, 242, 255, 0.5) 0%, rgba(0, 242, 255, 0) 100%);
       height: 10px;
       line-height: 0px;
-      margin-top: 10px;
+      margin-top: 12px;
     }
   }
   .MaterialEcharts {
diff --git a/src/views/oneMap/LayerControl/LayerControl.vue b/src/views/oneMap/LayerControl/LayerControl.vue
index 37d0576..cc8e024 100644
--- a/src/views/oneMap/LayerControl/LayerControl.vue
+++ b/src/views/oneMap/LayerControl/LayerControl.vue
@@ -30,29 +30,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 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({
   // 图层控制面板的渲染数据
   /**图层面板数据字段说明
@@ -69,72 +70,90 @@
       Show: true,
       children: [
         {
-          layerName: "中心城区",
-          layerKey: "centerCity",
-          layerIcon: requireTuChengImg("zhongxinchengqu"),
+          layerName: '蓝色地图',
+          layerKey: 'blackMap',
+          layerIcon: requireTuChengImg('zhongxinchengqu'),
+          layerVisible: false,
+        },
+        {
+          layerName: '白色地图',
+          layerKey: 'whiteMap',
+          layerIcon: requireTuChengImg('zhongxinchengqu'),
+          layerVisible: false,
+        },
+        {
+          layerName: '影像地图',
+          layerKey: 'imageMap',
+          layerIcon: requireTuChengImg('zhongxinchengqu'),
+          layerVisible: false,
+        },
+        {
+          layerName: '中心城区',
+          layerKey: 'centerCity',
+          layerIcon: requireTuChengImg('zhongxinchengqu'),
           layerVisible: false,
           dynamicLineData: yanAnCenterCity,
         },
         {
-          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,
         },
@@ -145,38 +164,38 @@
       Show: true,
       children: [
         {
-          layerName: "燃气管网",
-          layerKey: "rq_all",
+          layerName: '燃气管网',
+          layerKey: 'rq_all',
           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,
         },
@@ -187,22 +206,22 @@
       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,
         },
@@ -213,8 +232,8 @@
         //   layerVisible: false,
         // },
         {
-          layerName: "雨水泵站",
-          layerKey: "YSBZ",
+          layerName: '雨水泵站',
+          layerKey: 'YSBZ',
           layerIcon: null,
           layerVisible: false,
           data: yanAnYSBZ,
@@ -226,14 +245,14 @@
       Show: true,
       children: [
         {
-          layerName: "污水分区",
-          layerKey: "sewageArea",
+          layerName: '污水分区',
+          layerKey: 'sewageArea',
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: "污水管网",
-          layerKey: "wsLine1",
+          layerName: '污水管网',
+          layerKey: 'wsLine1',
           layerIcon: null,
           layerVisible: false,
         },
@@ -250,8 +269,8 @@
         //   layerVisible: false,
         // },
         {
-          layerName: "污水处理厂",
-          layerKey: "WSCLC",
+          layerName: '污水处理厂',
+          layerKey: 'WSCLC',
           layerIcon: null,
           layerVisible: false,
           data: yanAnWSCLC,
@@ -263,36 +282,36 @@
       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,
@@ -307,10 +326,10 @@
     .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,
@@ -319,37 +338,79 @@
 watch(
   () => props.ShowTuCheng,
   (newValue, oldValue) => {
-    console.log("ShowTuCheng变化了", newValue, oldValue);
+    console.log('ShowTuCheng变化了', newValue, oldValue);
   },
   { immediate: true, deep: true }
 );
 
-const layerClick = (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 });
+  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 => {
+      oldIds.push(layer.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]));
+    });
+    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');
+    let newMapStyle;
+    let oldMapStyle = newfiberMapbox.map.getStyle();
+    let oldIds = [];
+    oldMapStyle.layers.forEach(layer => {
+      oldIds.push(layer.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]));
+    });
+    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.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.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, // 持续时间，延时
@@ -360,29 +421,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, // 持续时间，延时
@@ -393,22 +454,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, // 持续时间，延时
@@ -419,29 +480,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) : '';
       });
     });
   });
@@ -449,17 +510,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>
 
@@ -470,7 +531,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;
@@ -486,7 +547,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;
diff --git a/src/views/oneMap/components/FXHG.vue b/src/views/oneMap/components/FXHG.vue
index 8924475..44e9c21 100644
--- a/src/views/oneMap/components/FXHG.vue
+++ b/src/views/oneMap/components/FXHG.vue
@@ -40,6 +40,7 @@
   showPanel.value = true;
   showBottom.value = false;
   curType.value = true;
+  bus.emit('SetLayerShow', ['蓝色地图']);
   if (newfiberMapbox.map.getLayer('dynamicRoute')) {
     newfiberMapbox.map.removeLayer('dynamicRoute');
     newfiberMapbox.map.removeLayer('dynamicRoute_Symbol');
@@ -68,6 +69,7 @@
 
   let initePSTimer = setInterval(() => {
     if (!newfiberMapbox) return;
+    bus.emit('SetLayerShow', ['白色地图']);
     bus.emit('setLayerVisible', { layername: 'ysLine1', isCheck: true });
     //bus.emit('setLayerVisible', { layername: 'wsLine1', isCheck: true });
     clearInterval(initePSTimer);
diff --git a/src/views/oneMap/components/ZHHM.vue b/src/views/oneMap/components/ZHHM.vue
index d68bdc5..1f29507 100644
--- a/src/views/oneMap/components/ZHHM.vue
+++ b/src/views/oneMap/components/ZHHM.vue
@@ -648,6 +648,7 @@
     zoom: 12,
     pitch: 55,
   });
+  bus.emit('SetLayerShow', ['蓝色地图']);
   // 先清空
   bus.emit('clearAllLayer');
   let removedLayer = ['HMJZYSQ', 'HMXGYLD', 'HMXDLGC', 'HMXSX', 'GWPCYXF'];

diff --git a/package.json b/package.json
index 39861ad..e784d82 100644
--- a/package.json
+++ b/package.json
@@ -72,4 +72,4 @@
     "vite-plugin-svg-icons": "2.0.1",
     "vite-plugin-vue-setup-extend": "0.4.0"
   }
-}
+}
\ No newline at end of file
diff --git a/src/assets/images/fhpl/sqjca.png b/src/assets/images/fhpl/sqjca.png
index 0eb531c..00e619c 100644
--- a/src/assets/images/fhpl/sqjca.png
+++ b/src/assets/images/fhpl/sqjca.png
Binary files differ
diff --git a/src/views/oneMap/ConstructionEvaluation/JSPGLeftBox.vue b/src/views/oneMap/ConstructionEvaluation/JSPGLeftBox.vue
index 2a7ff07..3ee47c4 100644
--- a/src/views/oneMap/ConstructionEvaluation/JSPGLeftBox.vue
+++ b/src/views/oneMap/ConstructionEvaluation/JSPGLeftBox.vue
@@ -65,8 +65,9 @@
   </div>
   <!-- 污水收集处理 -->
   <div class="Sewagecollection">
-    <div class="ListBoxHeader" @click="showSewageFectory">
-      <div class="ListBoxHeader_font">污水收集处理</div>
+    <div class="topVehicl flex">
+      <div class="icon"></div>
+      <div class="name">污水收集处理</div>
     </div>
     <div class="wssjEch"></div>
   </div>
@@ -293,7 +294,31 @@
 .Sewagecollection {
   width: 450px;
   height: 25%;
-  // background: yellowgreen;
+
+  .topVehicl {
+    font-family: Source Han Sans CN;
+    font-weight: bold;
+    font-size: 14px;
+    color: #ebfeff;
+    align-items: center;
+    height: 30px;
+    // background: teal;
+    .icon {
+      position: relative;
+      top: -1px;
+      width: 25px;
+      height: 25px;
+      background: url('@/assets/newImgs/xtb_img.png') no-repeat;
+    }
+
+    .name {
+      background: linear-gradient(0deg, rgba(0, 242, 255, 0.5) 0%, rgba(0, 242, 255, 0) 100%);
+      padding: 0px 3px;
+      height: 10px;
+      line-height: 0px;
+      margin-top: 6px;
+    }
+  }
   .wssjEch {
     margin: 5px auto;
     width: 420px;
diff --git a/src/views/oneMap/ConstructionEvaluation/JSPGRightBox.vue b/src/views/oneMap/ConstructionEvaluation/JSPGRightBox.vue
index dbeddc8..3f696aa 100644
--- a/src/views/oneMap/ConstructionEvaluation/JSPGRightBox.vue
+++ b/src/views/oneMap/ConstructionEvaluation/JSPGRightBox.vue
@@ -2,7 +2,7 @@
   <!-- 绩效管理 -->
   <div class="management">
     <div class="ListBoxHeader">
-      <div class="ListBoxHeader_font">绩效管理</div>
+      <div class="ListBoxHeader_font">管理绩效</div>
     </div>
     <!-- 年份切换 -->
     <div class="subRightBox">
diff --git a/src/views/oneMap/FloodStuationReview/sqhgBottomBox.vue b/src/views/oneMap/FloodStuationReview/sqhgBottomBox.vue
index 53d38bb..d178c59 100644
--- a/src/views/oneMap/FloodStuationReview/sqhgBottomBox.vue
+++ b/src/views/oneMap/FloodStuationReview/sqhgBottomBox.vue
@@ -117,8 +117,8 @@
 const ranLeng = [
   [
     { value: '0-0.2', color: 'rgba(7, 213, 118, 0)' },
-    { value: '0.2-5', color: 'rgba(7, 213, 118, 1)' },
-    { value: '5-25', color: 'rgba(38, 129, 240,1)' },
+    { value: '0.2-5', color: 'rgba(38, 129, 240,1)' },
+    { value: '5-25', color: 'rgb(222, 230, 0)' },
     { value: '>25', color: 'rgba(255, 26, 26, 1)' },
   ],
   [
@@ -235,14 +235,18 @@
   stepNum.value = 0;
   hgEngPlay.value = false;
   showRainLegend.value = false;
-  // NewFiberMapUtils.disposeRainfall('')
-  // newfiberMap.setLayersVisible(["krigingImage"],false)
+  // newfiberMapbox.map.removeLayer('canvas-layer0');
+  // newfiberMapbox.map.removeSource('canvas-source0');
   hoursList.value.activeIndex = stepNum.value;
   clearInterval(runDayInterval.value);
   if (runDayInterval.value) {
     runDayInterval.value = null;
     refresh.value = Math.random();
   }
+  // if (newfiberMapbox.map.getLayer('canvas-layer0')) {
+  //   newfiberMapbox.map.removeLayer('canvas-layer0');
+  //   newfiberMapbox.map.removeSource('canvas-source0');
+  // }
 }
 
 function changeChartData() {
@@ -375,10 +379,10 @@
 ];*/
 let colorScale = [
   { value: '0', color: 'rgba(7, 213, 118, 0)' },
-  { value: '0.2', color: 'rgba(7, 213, 118, 1)' },
-  { value: '5', color: 'rgba(38, 129, 240,1)' },
-  { value: '25', color: 'rgba(255, 26, 26, 1)' },
-  { value: '250', color: 'rgba(255, 26, 26, 1)' },
+  { value: '0.2', color: 'rgb(38, 129, 240)' },
+  { value: '5', color: 'rgb(222, 230, 0)' },
+  { value: '25', color: 'rgb(255, 26, 26)' },
+  { value: '250', color: 'rgb(255, 26, 26)' },
 ];
 let imageFiles = [];
 let canvas = [];
diff --git a/src/views/oneMap/FloodStuationReview/xqhgLeftBox.vue b/src/views/oneMap/FloodStuationReview/xqhgLeftBox.vue
index 14170d1..c43cb7b 100644
--- a/src/views/oneMap/FloodStuationReview/xqhgLeftBox.vue
+++ b/src/views/oneMap/FloodStuationReview/xqhgLeftBox.vue
@@ -122,7 +122,7 @@
         background: linear-gradient(0deg, rgba(0, 242, 255, 0.5) 0%, rgba(0, 242, 255, 0) 100%);
         height: 10px;
         line-height: 0px;
-        margin-top: 10px;
+        margin-top: 12px;
       }
     }
     .ScheduEcharts {
@@ -161,7 +161,7 @@
       background: linear-gradient(0deg, rgba(0, 242, 255, 0.5) 0%, rgba(0, 242, 255, 0) 100%);
       height: 10px;
       line-height: 0px;
-      margin-top: 10px;
+      margin-top: 12px;
     }
   }
   .VehiclEcharts {
@@ -196,7 +196,7 @@
       background: linear-gradient(0deg, rgba(0, 242, 255, 0.5) 0%, rgba(0, 242, 255, 0) 100%);
       height: 10px;
       line-height: 0px;
-      margin-top: 10px;
+      margin-top: 12px;
     }
   }
   .MaterialEcharts {
diff --git a/src/views/oneMap/LayerControl/LayerControl.vue b/src/views/oneMap/LayerControl/LayerControl.vue
index 37d0576..cc8e024 100644
--- a/src/views/oneMap/LayerControl/LayerControl.vue
+++ b/src/views/oneMap/LayerControl/LayerControl.vue
@@ -30,29 +30,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 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({
   // 图层控制面板的渲染数据
   /**图层面板数据字段说明
@@ -69,72 +70,90 @@
       Show: true,
       children: [
         {
-          layerName: "中心城区",
-          layerKey: "centerCity",
-          layerIcon: requireTuChengImg("zhongxinchengqu"),
+          layerName: '蓝色地图',
+          layerKey: 'blackMap',
+          layerIcon: requireTuChengImg('zhongxinchengqu'),
+          layerVisible: false,
+        },
+        {
+          layerName: '白色地图',
+          layerKey: 'whiteMap',
+          layerIcon: requireTuChengImg('zhongxinchengqu'),
+          layerVisible: false,
+        },
+        {
+          layerName: '影像地图',
+          layerKey: 'imageMap',
+          layerIcon: requireTuChengImg('zhongxinchengqu'),
+          layerVisible: false,
+        },
+        {
+          layerName: '中心城区',
+          layerKey: 'centerCity',
+          layerIcon: requireTuChengImg('zhongxinchengqu'),
           layerVisible: false,
           dynamicLineData: yanAnCenterCity,
         },
         {
-          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,
         },
@@ -145,38 +164,38 @@
       Show: true,
       children: [
         {
-          layerName: "燃气管网",
-          layerKey: "rq_all",
+          layerName: '燃气管网',
+          layerKey: 'rq_all',
           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,
         },
@@ -187,22 +206,22 @@
       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,
         },
@@ -213,8 +232,8 @@
         //   layerVisible: false,
         // },
         {
-          layerName: "雨水泵站",
-          layerKey: "YSBZ",
+          layerName: '雨水泵站',
+          layerKey: 'YSBZ',
           layerIcon: null,
           layerVisible: false,
           data: yanAnYSBZ,
@@ -226,14 +245,14 @@
       Show: true,
       children: [
         {
-          layerName: "污水分区",
-          layerKey: "sewageArea",
+          layerName: '污水分区',
+          layerKey: 'sewageArea',
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: "污水管网",
-          layerKey: "wsLine1",
+          layerName: '污水管网',
+          layerKey: 'wsLine1',
           layerIcon: null,
           layerVisible: false,
         },
@@ -250,8 +269,8 @@
         //   layerVisible: false,
         // },
         {
-          layerName: "污水处理厂",
-          layerKey: "WSCLC",
+          layerName: '污水处理厂',
+          layerKey: 'WSCLC',
           layerIcon: null,
           layerVisible: false,
           data: yanAnWSCLC,
@@ -263,36 +282,36 @@
       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,
@@ -307,10 +326,10 @@
     .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,
@@ -319,37 +338,79 @@
 watch(
   () => props.ShowTuCheng,
   (newValue, oldValue) => {
-    console.log("ShowTuCheng变化了", newValue, oldValue);
+    console.log('ShowTuCheng变化了', newValue, oldValue);
   },
   { immediate: true, deep: true }
 );
 
-const layerClick = (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 });
+  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 => {
+      oldIds.push(layer.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]));
+    });
+    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');
+    let newMapStyle;
+    let oldMapStyle = newfiberMapbox.map.getStyle();
+    let oldIds = [];
+    oldMapStyle.layers.forEach(layer => {
+      oldIds.push(layer.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]));
+    });
+    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.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.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, // 持续时间，延时
@@ -360,29 +421,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, // 持续时间，延时
@@ -393,22 +454,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, // 持续时间，延时
@@ -419,29 +480,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) : '';
       });
     });
   });
@@ -449,17 +510,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>
 
@@ -470,7 +531,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;
@@ -486,7 +547,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;
diff --git a/src/views/oneMap/components/FXHG.vue b/src/views/oneMap/components/FXHG.vue
index 8924475..44e9c21 100644
--- a/src/views/oneMap/components/FXHG.vue
+++ b/src/views/oneMap/components/FXHG.vue
@@ -40,6 +40,7 @@
   showPanel.value = true;
   showBottom.value = false;
   curType.value = true;
+  bus.emit('SetLayerShow', ['蓝色地图']);
   if (newfiberMapbox.map.getLayer('dynamicRoute')) {
     newfiberMapbox.map.removeLayer('dynamicRoute');
     newfiberMapbox.map.removeLayer('dynamicRoute_Symbol');
@@ -68,6 +69,7 @@
 
   let initePSTimer = setInterval(() => {
     if (!newfiberMapbox) return;
+    bus.emit('SetLayerShow', ['白色地图']);
     bus.emit('setLayerVisible', { layername: 'ysLine1', isCheck: true });
     //bus.emit('setLayerVisible', { layername: 'wsLine1', isCheck: true });
     clearInterval(initePSTimer);
diff --git a/src/views/oneMap/components/ZHHM.vue b/src/views/oneMap/components/ZHHM.vue
index d68bdc5..1f29507 100644
--- a/src/views/oneMap/components/ZHHM.vue
+++ b/src/views/oneMap/components/ZHHM.vue
@@ -648,6 +648,7 @@
     zoom: 12,
     pitch: 55,
   });
+  bus.emit('SetLayerShow', ['蓝色地图']);
   // 先清空
   bus.emit('clearAllLayer');
   let removedLayer = ['HMJZYSQ', 'HMXGYLD', 'HMXDLGC', 'HMXSX', 'GWPCYXF'];
diff --git a/src/views/oneMap/components/ZHHM_JCFX.vue b/src/views/oneMap/components/ZHHM_JCFX.vue
index c420911..42e81e6 100644
--- a/src/views/oneMap/components/ZHHM_JCFX.vue
+++ b/src/views/oneMap/components/ZHHM_JCFX.vue
@@ -411,6 +411,7 @@
 });
 onBeforeUnmount(() => {
   bus.emit('clearAllLayer');
+  bus.emit('SetLayerShow', ['蓝色地图']);
   let removedLayer = ['HMJZYSQ', 'HMXGYLD', 'HMXDLGC', 'HMXSX', 'GWPCYXF'];
   removedLayer.forEach(layer => {
     bus.emit('setLayerVisible', { layername: layer, isCheck: false });

diff --git a/package.json b/package.json
index 39861ad..e784d82 100644
--- a/package.json
+++ b/package.json
@@ -72,4 +72,4 @@
     "vite-plugin-svg-icons": "2.0.1",
     "vite-plugin-vue-setup-extend": "0.4.0"
   }
-}
+}
\ No newline at end of file
diff --git a/src/assets/images/fhpl/sqjca.png b/src/assets/images/fhpl/sqjca.png
index 0eb531c..00e619c 100644
--- a/src/assets/images/fhpl/sqjca.png
+++ b/src/assets/images/fhpl/sqjca.png
Binary files differ
diff --git a/src/views/oneMap/ConstructionEvaluation/JSPGLeftBox.vue b/src/views/oneMap/ConstructionEvaluation/JSPGLeftBox.vue
index 2a7ff07..3ee47c4 100644
--- a/src/views/oneMap/ConstructionEvaluation/JSPGLeftBox.vue
+++ b/src/views/oneMap/ConstructionEvaluation/JSPGLeftBox.vue
@@ -65,8 +65,9 @@
   </div>
   <!-- 污水收集处理 -->
   <div class="Sewagecollection">
-    <div class="ListBoxHeader" @click="showSewageFectory">
-      <div class="ListBoxHeader_font">污水收集处理</div>
+    <div class="topVehicl flex">
+      <div class="icon"></div>
+      <div class="name">污水收集处理</div>
     </div>
     <div class="wssjEch"></div>
   </div>
@@ -293,7 +294,31 @@
 .Sewagecollection {
   width: 450px;
   height: 25%;
-  // background: yellowgreen;
+
+  .topVehicl {
+    font-family: Source Han Sans CN;
+    font-weight: bold;
+    font-size: 14px;
+    color: #ebfeff;
+    align-items: center;
+    height: 30px;
+    // background: teal;
+    .icon {
+      position: relative;
+      top: -1px;
+      width: 25px;
+      height: 25px;
+      background: url('@/assets/newImgs/xtb_img.png') no-repeat;
+    }
+
+    .name {
+      background: linear-gradient(0deg, rgba(0, 242, 255, 0.5) 0%, rgba(0, 242, 255, 0) 100%);
+      padding: 0px 3px;
+      height: 10px;
+      line-height: 0px;
+      margin-top: 6px;
+    }
+  }
   .wssjEch {
     margin: 5px auto;
     width: 420px;
diff --git a/src/views/oneMap/ConstructionEvaluation/JSPGRightBox.vue b/src/views/oneMap/ConstructionEvaluation/JSPGRightBox.vue
index dbeddc8..3f696aa 100644
--- a/src/views/oneMap/ConstructionEvaluation/JSPGRightBox.vue
+++ b/src/views/oneMap/ConstructionEvaluation/JSPGRightBox.vue
@@ -2,7 +2,7 @@
   <!-- 绩效管理 -->
   <div class="management">
     <div class="ListBoxHeader">
-      <div class="ListBoxHeader_font">绩效管理</div>
+      <div class="ListBoxHeader_font">管理绩效</div>
     </div>
     <!-- 年份切换 -->
     <div class="subRightBox">
diff --git a/src/views/oneMap/FloodStuationReview/sqhgBottomBox.vue b/src/views/oneMap/FloodStuationReview/sqhgBottomBox.vue
index 53d38bb..d178c59 100644
--- a/src/views/oneMap/FloodStuationReview/sqhgBottomBox.vue
+++ b/src/views/oneMap/FloodStuationReview/sqhgBottomBox.vue
@@ -117,8 +117,8 @@
 const ranLeng = [
   [
     { value: '0-0.2', color: 'rgba(7, 213, 118, 0)' },
-    { value: '0.2-5', color: 'rgba(7, 213, 118, 1)' },
-    { value: '5-25', color: 'rgba(38, 129, 240,1)' },
+    { value: '0.2-5', color: 'rgba(38, 129, 240,1)' },
+    { value: '5-25', color: 'rgb(222, 230, 0)' },
     { value: '>25', color: 'rgba(255, 26, 26, 1)' },
   ],
   [
@@ -235,14 +235,18 @@
   stepNum.value = 0;
   hgEngPlay.value = false;
   showRainLegend.value = false;
-  // NewFiberMapUtils.disposeRainfall('')
-  // newfiberMap.setLayersVisible(["krigingImage"],false)
+  // newfiberMapbox.map.removeLayer('canvas-layer0');
+  // newfiberMapbox.map.removeSource('canvas-source0');
   hoursList.value.activeIndex = stepNum.value;
   clearInterval(runDayInterval.value);
   if (runDayInterval.value) {
     runDayInterval.value = null;
     refresh.value = Math.random();
   }
+  // if (newfiberMapbox.map.getLayer('canvas-layer0')) {
+  //   newfiberMapbox.map.removeLayer('canvas-layer0');
+  //   newfiberMapbox.map.removeSource('canvas-source0');
+  // }
 }
 
 function changeChartData() {
@@ -375,10 +379,10 @@
 ];*/
 let colorScale = [
   { value: '0', color: 'rgba(7, 213, 118, 0)' },
-  { value: '0.2', color: 'rgba(7, 213, 118, 1)' },
-  { value: '5', color: 'rgba(38, 129, 240,1)' },
-  { value: '25', color: 'rgba(255, 26, 26, 1)' },
-  { value: '250', color: 'rgba(255, 26, 26, 1)' },
+  { value: '0.2', color: 'rgb(38, 129, 240)' },
+  { value: '5', color: 'rgb(222, 230, 0)' },
+  { value: '25', color: 'rgb(255, 26, 26)' },
+  { value: '250', color: 'rgb(255, 26, 26)' },
 ];
 let imageFiles = [];
 let canvas = [];
diff --git a/src/views/oneMap/FloodStuationReview/xqhgLeftBox.vue b/src/views/oneMap/FloodStuationReview/xqhgLeftBox.vue
index 14170d1..c43cb7b 100644
--- a/src/views/oneMap/FloodStuationReview/xqhgLeftBox.vue
+++ b/src/views/oneMap/FloodStuationReview/xqhgLeftBox.vue
@@ -122,7 +122,7 @@
         background: linear-gradient(0deg, rgba(0, 242, 255, 0.5) 0%, rgba(0, 242, 255, 0) 100%);
         height: 10px;
         line-height: 0px;
-        margin-top: 10px;
+        margin-top: 12px;
       }
     }
     .ScheduEcharts {
@@ -161,7 +161,7 @@
       background: linear-gradient(0deg, rgba(0, 242, 255, 0.5) 0%, rgba(0, 242, 255, 0) 100%);
       height: 10px;
       line-height: 0px;
-      margin-top: 10px;
+      margin-top: 12px;
     }
   }
   .VehiclEcharts {
@@ -196,7 +196,7 @@
       background: linear-gradient(0deg, rgba(0, 242, 255, 0.5) 0%, rgba(0, 242, 255, 0) 100%);
       height: 10px;
       line-height: 0px;
-      margin-top: 10px;
+      margin-top: 12px;
     }
   }
   .MaterialEcharts {
diff --git a/src/views/oneMap/LayerControl/LayerControl.vue b/src/views/oneMap/LayerControl/LayerControl.vue
index 37d0576..cc8e024 100644
--- a/src/views/oneMap/LayerControl/LayerControl.vue
+++ b/src/views/oneMap/LayerControl/LayerControl.vue
@@ -30,29 +30,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 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({
   // 图层控制面板的渲染数据
   /**图层面板数据字段说明
@@ -69,72 +70,90 @@
       Show: true,
       children: [
         {
-          layerName: "中心城区",
-          layerKey: "centerCity",
-          layerIcon: requireTuChengImg("zhongxinchengqu"),
+          layerName: '蓝色地图',
+          layerKey: 'blackMap',
+          layerIcon: requireTuChengImg('zhongxinchengqu'),
+          layerVisible: false,
+        },
+        {
+          layerName: '白色地图',
+          layerKey: 'whiteMap',
+          layerIcon: requireTuChengImg('zhongxinchengqu'),
+          layerVisible: false,
+        },
+        {
+          layerName: '影像地图',
+          layerKey: 'imageMap',
+          layerIcon: requireTuChengImg('zhongxinchengqu'),
+          layerVisible: false,
+        },
+        {
+          layerName: '中心城区',
+          layerKey: 'centerCity',
+          layerIcon: requireTuChengImg('zhongxinchengqu'),
           layerVisible: false,
           dynamicLineData: yanAnCenterCity,
         },
         {
-          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,
         },
@@ -145,38 +164,38 @@
       Show: true,
       children: [
         {
-          layerName: "燃气管网",
-          layerKey: "rq_all",
+          layerName: '燃气管网',
+          layerKey: 'rq_all',
           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,
         },
@@ -187,22 +206,22 @@
       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,
         },
@@ -213,8 +232,8 @@
         //   layerVisible: false,
         // },
         {
-          layerName: "雨水泵站",
-          layerKey: "YSBZ",
+          layerName: '雨水泵站',
+          layerKey: 'YSBZ',
           layerIcon: null,
           layerVisible: false,
           data: yanAnYSBZ,
@@ -226,14 +245,14 @@
       Show: true,
       children: [
         {
-          layerName: "污水分区",
-          layerKey: "sewageArea",
+          layerName: '污水分区',
+          layerKey: 'sewageArea',
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: "污水管网",
-          layerKey: "wsLine1",
+          layerName: '污水管网',
+          layerKey: 'wsLine1',
           layerIcon: null,
           layerVisible: false,
         },
@@ -250,8 +269,8 @@
         //   layerVisible: false,
         // },
         {
-          layerName: "污水处理厂",
-          layerKey: "WSCLC",
+          layerName: '污水处理厂',
+          layerKey: 'WSCLC',
           layerIcon: null,
           layerVisible: false,
           data: yanAnWSCLC,
@@ -263,36 +282,36 @@
       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,
@@ -307,10 +326,10 @@
     .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,
@@ -319,37 +338,79 @@
 watch(
   () => props.ShowTuCheng,
   (newValue, oldValue) => {
-    console.log("ShowTuCheng变化了", newValue, oldValue);
+    console.log('ShowTuCheng变化了', newValue, oldValue);
   },
   { immediate: true, deep: true }
 );
 
-const layerClick = (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 });
+  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 => {
+      oldIds.push(layer.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]));
+    });
+    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');
+    let newMapStyle;
+    let oldMapStyle = newfiberMapbox.map.getStyle();
+    let oldIds = [];
+    oldMapStyle.layers.forEach(layer => {
+      oldIds.push(layer.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]));
+    });
+    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.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.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, // 持续时间，延时
@@ -360,29 +421,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, // 持续时间，延时
@@ -393,22 +454,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, // 持续时间，延时
@@ -419,29 +480,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) : '';
       });
     });
   });
@@ -449,17 +510,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>
 
@@ -470,7 +531,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;
@@ -486,7 +547,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;
diff --git a/src/views/oneMap/components/FXHG.vue b/src/views/oneMap/components/FXHG.vue
index 8924475..44e9c21 100644
--- a/src/views/oneMap/components/FXHG.vue
+++ b/src/views/oneMap/components/FXHG.vue
@@ -40,6 +40,7 @@
   showPanel.value = true;
   showBottom.value = false;
   curType.value = true;
+  bus.emit('SetLayerShow', ['蓝色地图']);
   if (newfiberMapbox.map.getLayer('dynamicRoute')) {
     newfiberMapbox.map.removeLayer('dynamicRoute');
     newfiberMapbox.map.removeLayer('dynamicRoute_Symbol');
@@ -68,6 +69,7 @@
 
   let initePSTimer = setInterval(() => {
     if (!newfiberMapbox) return;
+    bus.emit('SetLayerShow', ['白色地图']);
     bus.emit('setLayerVisible', { layername: 'ysLine1', isCheck: true });
     //bus.emit('setLayerVisible', { layername: 'wsLine1', isCheck: true });
     clearInterval(initePSTimer);
diff --git a/src/views/oneMap/components/ZHHM.vue b/src/views/oneMap/components/ZHHM.vue
index d68bdc5..1f29507 100644
--- a/src/views/oneMap/components/ZHHM.vue
+++ b/src/views/oneMap/components/ZHHM.vue
@@ -648,6 +648,7 @@
     zoom: 12,
     pitch: 55,
   });
+  bus.emit('SetLayerShow', ['蓝色地图']);
   // 先清空
   bus.emit('clearAllLayer');
   let removedLayer = ['HMJZYSQ', 'HMXGYLD', 'HMXDLGC', 'HMXSX', 'GWPCYXF'];
diff --git a/src/views/oneMap/components/ZHHM_JCFX.vue b/src/views/oneMap/components/ZHHM_JCFX.vue
index c420911..42e81e6 100644
--- a/src/views/oneMap/components/ZHHM_JCFX.vue
+++ b/src/views/oneMap/components/ZHHM_JCFX.vue
@@ -411,6 +411,7 @@
 });
 onBeforeUnmount(() => {
   bus.emit('clearAllLayer');
+  bus.emit('SetLayerShow', ['蓝色地图']);
   let removedLayer = ['HMJZYSQ', 'HMXGYLD', 'HMXDLGC', 'HMXSX', 'GWPCYXF'];
   removedLayer.forEach(layer => {
     bus.emit('setLayerVisible', { layername: layer, isCheck: false });
diff --git a/src/views/oneMap/components/ZHHM_JSPG.vue b/src/views/oneMap/components/ZHHM_JSPG.vue
index 7400f1b..df2c85f 100644
--- a/src/views/oneMap/components/ZHHM_JSPG.vue
+++ b/src/views/oneMap/components/ZHHM_JSPG.vue
@@ -53,6 +53,7 @@
 };
 
 onMounted(() => {
+  bus.emit('SetLayerShow', ['蓝色地图']);
   newfiberMapbox.map.easeTo({
     center: [109.488, 36.596],
     zoom: 13,

diff --git a/package.json b/package.json
index 39861ad..e784d82 100644
--- a/package.json
+++ b/package.json
@@ -72,4 +72,4 @@
     "vite-plugin-svg-icons": "2.0.1",
     "vite-plugin-vue-setup-extend": "0.4.0"
   }
-}
+}
\ No newline at end of file
diff --git a/src/assets/images/fhpl/sqjca.png b/src/assets/images/fhpl/sqjca.png
index 0eb531c..00e619c 100644
--- a/src/assets/images/fhpl/sqjca.png
+++ b/src/assets/images/fhpl/sqjca.png
Binary files differ
diff --git a/src/views/oneMap/ConstructionEvaluation/JSPGLeftBox.vue b/src/views/oneMap/ConstructionEvaluation/JSPGLeftBox.vue
index 2a7ff07..3ee47c4 100644
--- a/src/views/oneMap/ConstructionEvaluation/JSPGLeftBox.vue
+++ b/src/views/oneMap/ConstructionEvaluation/JSPGLeftBox.vue
@@ -65,8 +65,9 @@
   </div>
   <!-- 污水收集处理 -->
   <div class="Sewagecollection">
-    <div class="ListBoxHeader" @click="showSewageFectory">
-      <div class="ListBoxHeader_font">污水收集处理</div>
+    <div class="topVehicl flex">
+      <div class="icon"></div>
+      <div class="name">污水收集处理</div>
     </div>
     <div class="wssjEch"></div>
   </div>
@@ -293,7 +294,31 @@
 .Sewagecollection {
   width: 450px;
   height: 25%;
-  // background: yellowgreen;
+
+  .topVehicl {
+    font-family: Source Han Sans CN;
+    font-weight: bold;
+    font-size: 14px;
+    color: #ebfeff;
+    align-items: center;
+    height: 30px;
+    // background: teal;
+    .icon {
+      position: relative;
+      top: -1px;
+      width: 25px;
+      height: 25px;
+      background: url('@/assets/newImgs/xtb_img.png') no-repeat;
+    }
+
+    .name {
+      background: linear-gradient(0deg, rgba(0, 242, 255, 0.5) 0%, rgba(0, 242, 255, 0) 100%);
+      padding: 0px 3px;
+      height: 10px;
+      line-height: 0px;
+      margin-top: 6px;
+    }
+  }
   .wssjEch {
     margin: 5px auto;
     width: 420px;
diff --git a/src/views/oneMap/ConstructionEvaluation/JSPGRightBox.vue b/src/views/oneMap/ConstructionEvaluation/JSPGRightBox.vue
index dbeddc8..3f696aa 100644
--- a/src/views/oneMap/ConstructionEvaluation/JSPGRightBox.vue
+++ b/src/views/oneMap/ConstructionEvaluation/JSPGRightBox.vue
@@ -2,7 +2,7 @@
   <!-- 绩效管理 -->
   <div class="management">
     <div class="ListBoxHeader">
-      <div class="ListBoxHeader_font">绩效管理</div>
+      <div class="ListBoxHeader_font">管理绩效</div>
     </div>
     <!-- 年份切换 -->
     <div class="subRightBox">
diff --git a/src/views/oneMap/FloodStuationReview/sqhgBottomBox.vue b/src/views/oneMap/FloodStuationReview/sqhgBottomBox.vue
index 53d38bb..d178c59 100644
--- a/src/views/oneMap/FloodStuationReview/sqhgBottomBox.vue
+++ b/src/views/oneMap/FloodStuationReview/sqhgBottomBox.vue
@@ -117,8 +117,8 @@
 const ranLeng = [
   [
     { value: '0-0.2', color: 'rgba(7, 213, 118, 0)' },
-    { value: '0.2-5', color: 'rgba(7, 213, 118, 1)' },
-    { value: '5-25', color: 'rgba(38, 129, 240,1)' },
+    { value: '0.2-5', color: 'rgba(38, 129, 240,1)' },
+    { value: '5-25', color: 'rgb(222, 230, 0)' },
     { value: '>25', color: 'rgba(255, 26, 26, 1)' },
   ],
   [
@@ -235,14 +235,18 @@
   stepNum.value = 0;
   hgEngPlay.value = false;
   showRainLegend.value = false;
-  // NewFiberMapUtils.disposeRainfall('')
-  // newfiberMap.setLayersVisible(["krigingImage"],false)
+  // newfiberMapbox.map.removeLayer('canvas-layer0');
+  // newfiberMapbox.map.removeSource('canvas-source0');
   hoursList.value.activeIndex = stepNum.value;
   clearInterval(runDayInterval.value);
   if (runDayInterval.value) {
     runDayInterval.value = null;
     refresh.value = Math.random();
   }
+  // if (newfiberMapbox.map.getLayer('canvas-layer0')) {
+  //   newfiberMapbox.map.removeLayer('canvas-layer0');
+  //   newfiberMapbox.map.removeSource('canvas-source0');
+  // }
 }
 
 function changeChartData() {
@@ -375,10 +379,10 @@
 ];*/
 let colorScale = [
   { value: '0', color: 'rgba(7, 213, 118, 0)' },
-  { value: '0.2', color: 'rgba(7, 213, 118, 1)' },
-  { value: '5', color: 'rgba(38, 129, 240,1)' },
-  { value: '25', color: 'rgba(255, 26, 26, 1)' },
-  { value: '250', color: 'rgba(255, 26, 26, 1)' },
+  { value: '0.2', color: 'rgb(38, 129, 240)' },
+  { value: '5', color: 'rgb(222, 230, 0)' },
+  { value: '25', color: 'rgb(255, 26, 26)' },
+  { value: '250', color: 'rgb(255, 26, 26)' },
 ];
 let imageFiles = [];
 let canvas = [];
diff --git a/src/views/oneMap/FloodStuationReview/xqhgLeftBox.vue b/src/views/oneMap/FloodStuationReview/xqhgLeftBox.vue
index 14170d1..c43cb7b 100644
--- a/src/views/oneMap/FloodStuationReview/xqhgLeftBox.vue
+++ b/src/views/oneMap/FloodStuationReview/xqhgLeftBox.vue
@@ -122,7 +122,7 @@
         background: linear-gradient(0deg, rgba(0, 242, 255, 0.5) 0%, rgba(0, 242, 255, 0) 100%);
         height: 10px;
         line-height: 0px;
-        margin-top: 10px;
+        margin-top: 12px;
       }
     }
     .ScheduEcharts {
@@ -161,7 +161,7 @@
       background: linear-gradient(0deg, rgba(0, 242, 255, 0.5) 0%, rgba(0, 242, 255, 0) 100%);
       height: 10px;
       line-height: 0px;
-      margin-top: 10px;
+      margin-top: 12px;
     }
   }
   .VehiclEcharts {
@@ -196,7 +196,7 @@
       background: linear-gradient(0deg, rgba(0, 242, 255, 0.5) 0%, rgba(0, 242, 255, 0) 100%);
       height: 10px;
       line-height: 0px;
-      margin-top: 10px;
+      margin-top: 12px;
     }
   }
   .MaterialEcharts {
diff --git a/src/views/oneMap/LayerControl/LayerControl.vue b/src/views/oneMap/LayerControl/LayerControl.vue
index 37d0576..cc8e024 100644
--- a/src/views/oneMap/LayerControl/LayerControl.vue
+++ b/src/views/oneMap/LayerControl/LayerControl.vue
@@ -30,29 +30,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 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({
   // 图层控制面板的渲染数据
   /**图层面板数据字段说明
@@ -69,72 +70,90 @@
       Show: true,
       children: [
         {
-          layerName: "中心城区",
-          layerKey: "centerCity",
-          layerIcon: requireTuChengImg("zhongxinchengqu"),
+          layerName: '蓝色地图',
+          layerKey: 'blackMap',
+          layerIcon: requireTuChengImg('zhongxinchengqu'),
+          layerVisible: false,
+        },
+        {
+          layerName: '白色地图',
+          layerKey: 'whiteMap',
+          layerIcon: requireTuChengImg('zhongxinchengqu'),
+          layerVisible: false,
+        },
+        {
+          layerName: '影像地图',
+          layerKey: 'imageMap',
+          layerIcon: requireTuChengImg('zhongxinchengqu'),
+          layerVisible: false,
+        },
+        {
+          layerName: '中心城区',
+          layerKey: 'centerCity',
+          layerIcon: requireTuChengImg('zhongxinchengqu'),
           layerVisible: false,
           dynamicLineData: yanAnCenterCity,
         },
         {
-          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,
         },
@@ -145,38 +164,38 @@
       Show: true,
       children: [
         {
-          layerName: "燃气管网",
-          layerKey: "rq_all",
+          layerName: '燃气管网',
+          layerKey: 'rq_all',
           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,
         },
@@ -187,22 +206,22 @@
       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,
         },
@@ -213,8 +232,8 @@
         //   layerVisible: false,
         // },
         {
-          layerName: "雨水泵站",
-          layerKey: "YSBZ",
+          layerName: '雨水泵站',
+          layerKey: 'YSBZ',
           layerIcon: null,
           layerVisible: false,
           data: yanAnYSBZ,
@@ -226,14 +245,14 @@
       Show: true,
       children: [
         {
-          layerName: "污水分区",
-          layerKey: "sewageArea",
+          layerName: '污水分区',
+          layerKey: 'sewageArea',
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: "污水管网",
-          layerKey: "wsLine1",
+          layerName: '污水管网',
+          layerKey: 'wsLine1',
           layerIcon: null,
           layerVisible: false,
         },
@@ -250,8 +269,8 @@
         //   layerVisible: false,
         // },
         {
-          layerName: "污水处理厂",
-          layerKey: "WSCLC",
+          layerName: '污水处理厂',
+          layerKey: 'WSCLC',
           layerIcon: null,
           layerVisible: false,
           data: yanAnWSCLC,
@@ -263,36 +282,36 @@
       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,
@@ -307,10 +326,10 @@
     .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,
@@ -319,37 +338,79 @@
 watch(
   () => props.ShowTuCheng,
   (newValue, oldValue) => {
-    console.log("ShowTuCheng变化了", newValue, oldValue);
+    console.log('ShowTuCheng变化了', newValue, oldValue);
   },
   { immediate: true, deep: true }
 );
 
-const layerClick = (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 });
+  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 => {
+      oldIds.push(layer.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]));
+    });
+    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');
+    let newMapStyle;
+    let oldMapStyle = newfiberMapbox.map.getStyle();
+    let oldIds = [];
+    oldMapStyle.layers.forEach(layer => {
+      oldIds.push(layer.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]));
+    });
+    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.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.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, // 持续时间，延时
@@ -360,29 +421,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, // 持续时间，延时
@@ -393,22 +454,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, // 持续时间，延时
@@ -419,29 +480,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) : '';
       });
     });
   });
@@ -449,17 +510,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>
 
@@ -470,7 +531,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;
@@ -486,7 +547,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;
diff --git a/src/views/oneMap/components/FXHG.vue b/src/views/oneMap/components/FXHG.vue
index 8924475..44e9c21 100644
--- a/src/views/oneMap/components/FXHG.vue
+++ b/src/views/oneMap/components/FXHG.vue
@@ -40,6 +40,7 @@
   showPanel.value = true;
   showBottom.value = false;
   curType.value = true;
+  bus.emit('SetLayerShow', ['蓝色地图']);
   if (newfiberMapbox.map.getLayer('dynamicRoute')) {
     newfiberMapbox.map.removeLayer('dynamicRoute');
     newfiberMapbox.map.removeLayer('dynamicRoute_Symbol');
@@ -68,6 +69,7 @@
 
   let initePSTimer = setInterval(() => {
     if (!newfiberMapbox) return;
+    bus.emit('SetLayerShow', ['白色地图']);
     bus.emit('setLayerVisible', { layername: 'ysLine1', isCheck: true });
     //bus.emit('setLayerVisible', { layername: 'wsLine1', isCheck: true });
     clearInterval(initePSTimer);
diff --git a/src/views/oneMap/components/ZHHM.vue b/src/views/oneMap/components/ZHHM.vue
index d68bdc5..1f29507 100644
--- a/src/views/oneMap/components/ZHHM.vue
+++ b/src/views/oneMap/components/ZHHM.vue
@@ -648,6 +648,7 @@
     zoom: 12,
     pitch: 55,
   });
+  bus.emit('SetLayerShow', ['蓝色地图']);
   // 先清空
   bus.emit('clearAllLayer');
   let removedLayer = ['HMJZYSQ', 'HMXGYLD', 'HMXDLGC', 'HMXSX', 'GWPCYXF'];
diff --git a/src/views/oneMap/components/ZHHM_JCFX.vue b/src/views/oneMap/components/ZHHM_JCFX.vue
index c420911..42e81e6 100644
--- a/src/views/oneMap/components/ZHHM_JCFX.vue
+++ b/src/views/oneMap/components/ZHHM_JCFX.vue
@@ -411,6 +411,7 @@
 });
 onBeforeUnmount(() => {
   bus.emit('clearAllLayer');
+  bus.emit('SetLayerShow', ['蓝色地图']);
   let removedLayer = ['HMJZYSQ', 'HMXGYLD', 'HMXDLGC', 'HMXSX', 'GWPCYXF'];
   removedLayer.forEach(layer => {
     bus.emit('setLayerVisible', { layername: layer, isCheck: false });
diff --git a/src/views/oneMap/components/ZHHM_JSPG.vue b/src/views/oneMap/components/ZHHM_JSPG.vue
index 7400f1b..df2c85f 100644
--- a/src/views/oneMap/components/ZHHM_JSPG.vue
+++ b/src/views/oneMap/components/ZHHM_JSPG.vue
@@ -53,6 +53,7 @@
 };
 
 onMounted(() => {
+  bus.emit('SetLayerShow', ['蓝色地图']);
   newfiberMapbox.map.easeTo({
     center: [109.488, 36.596],
     zoom: 13,
diff --git a/src/views/oneMap/components/ZHPS.vue b/src/views/oneMap/components/ZHPS.vue
index 7ce8bb0..f09ddbc 100644
--- a/src/views/oneMap/components/ZHPS.vue
+++ b/src/views/oneMap/components/ZHPS.vue
@@ -43,6 +43,7 @@
   });
 });
 onBeforeUnmount(() => {
+  bus.emit('SetLayerShow', ['蓝色地图']);
   // bus.emit('setLayerVisible', { layername: 'ysLine1', isCheck: false });
   // bus.emit('setLayerVisible', { layername: 'wsLine1', isCheck: false });
 });

diff --git a/package.json b/package.json
index 39861ad..e784d82 100644
--- a/package.json
+++ b/package.json
@@ -72,4 +72,4 @@
     "vite-plugin-svg-icons": "2.0.1",
     "vite-plugin-vue-setup-extend": "0.4.0"
   }
-}
+}
\ No newline at end of file
diff --git a/src/assets/images/fhpl/sqjca.png b/src/assets/images/fhpl/sqjca.png
index 0eb531c..00e619c 100644
--- a/src/assets/images/fhpl/sqjca.png
+++ b/src/assets/images/fhpl/sqjca.png
Binary files differ
diff --git a/src/views/oneMap/ConstructionEvaluation/JSPGLeftBox.vue b/src/views/oneMap/ConstructionEvaluation/JSPGLeftBox.vue
index 2a7ff07..3ee47c4 100644
--- a/src/views/oneMap/ConstructionEvaluation/JSPGLeftBox.vue
+++ b/src/views/oneMap/ConstructionEvaluation/JSPGLeftBox.vue
@@ -65,8 +65,9 @@
   </div>
   <!-- 污水收集处理 -->
   <div class="Sewagecollection">
-    <div class="ListBoxHeader" @click="showSewageFectory">
-      <div class="ListBoxHeader_font">污水收集处理</div>
+    <div class="topVehicl flex">
+      <div class="icon"></div>
+      <div class="name">污水收集处理</div>
     </div>
     <div class="wssjEch"></div>
   </div>
@@ -293,7 +294,31 @@
 .Sewagecollection {
   width: 450px;
   height: 25%;
-  // background: yellowgreen;
+
+  .topVehicl {
+    font-family: Source Han Sans CN;
+    font-weight: bold;
+    font-size: 14px;
+    color: #ebfeff;
+    align-items: center;
+    height: 30px;
+    // background: teal;
+    .icon {
+      position: relative;
+      top: -1px;
+      width: 25px;
+      height: 25px;
+      background: url('@/assets/newImgs/xtb_img.png') no-repeat;
+    }
+
+    .name {
+      background: linear-gradient(0deg, rgba(0, 242, 255, 0.5) 0%, rgba(0, 242, 255, 0) 100%);
+      padding: 0px 3px;
+      height: 10px;
+      line-height: 0px;
+      margin-top: 6px;
+    }
+  }
   .wssjEch {
     margin: 5px auto;
     width: 420px;
diff --git a/src/views/oneMap/ConstructionEvaluation/JSPGRightBox.vue b/src/views/oneMap/ConstructionEvaluation/JSPGRightBox.vue
index dbeddc8..3f696aa 100644
--- a/src/views/oneMap/ConstructionEvaluation/JSPGRightBox.vue
+++ b/src/views/oneMap/ConstructionEvaluation/JSPGRightBox.vue
@@ -2,7 +2,7 @@
   <!-- 绩效管理 -->
   <div class="management">
     <div class="ListBoxHeader">
-      <div class="ListBoxHeader_font">绩效管理</div>
+      <div class="ListBoxHeader_font">管理绩效</div>
     </div>
     <!-- 年份切换 -->
     <div class="subRightBox">
diff --git a/src/views/oneMap/FloodStuationReview/sqhgBottomBox.vue b/src/views/oneMap/FloodStuationReview/sqhgBottomBox.vue
index 53d38bb..d178c59 100644
--- a/src/views/oneMap/FloodStuationReview/sqhgBottomBox.vue
+++ b/src/views/oneMap/FloodStuationReview/sqhgBottomBox.vue
@@ -117,8 +117,8 @@
 const ranLeng = [
   [
     { value: '0-0.2', color: 'rgba(7, 213, 118, 0)' },
-    { value: '0.2-5', color: 'rgba(7, 213, 118, 1)' },
-    { value: '5-25', color: 'rgba(38, 129, 240,1)' },
+    { value: '0.2-5', color: 'rgba(38, 129, 240,1)' },
+    { value: '5-25', color: 'rgb(222, 230, 0)' },
     { value: '>25', color: 'rgba(255, 26, 26, 1)' },
   ],
   [
@@ -235,14 +235,18 @@
   stepNum.value = 0;
   hgEngPlay.value = false;
   showRainLegend.value = false;
-  // NewFiberMapUtils.disposeRainfall('')
-  // newfiberMap.setLayersVisible(["krigingImage"],false)
+  // newfiberMapbox.map.removeLayer('canvas-layer0');
+  // newfiberMapbox.map.removeSource('canvas-source0');
   hoursList.value.activeIndex = stepNum.value;
   clearInterval(runDayInterval.value);
   if (runDayInterval.value) {
     runDayInterval.value = null;
     refresh.value = Math.random();
   }
+  // if (newfiberMapbox.map.getLayer('canvas-layer0')) {
+  //   newfiberMapbox.map.removeLayer('canvas-layer0');
+  //   newfiberMapbox.map.removeSource('canvas-source0');
+  // }
 }
 
 function changeChartData() {
@@ -375,10 +379,10 @@
 ];*/
 let colorScale = [
   { value: '0', color: 'rgba(7, 213, 118, 0)' },
-  { value: '0.2', color: 'rgba(7, 213, 118, 1)' },
-  { value: '5', color: 'rgba(38, 129, 240,1)' },
-  { value: '25', color: 'rgba(255, 26, 26, 1)' },
-  { value: '250', color: 'rgba(255, 26, 26, 1)' },
+  { value: '0.2', color: 'rgb(38, 129, 240)' },
+  { value: '5', color: 'rgb(222, 230, 0)' },
+  { value: '25', color: 'rgb(255, 26, 26)' },
+  { value: '250', color: 'rgb(255, 26, 26)' },
 ];
 let imageFiles = [];
 let canvas = [];
diff --git a/src/views/oneMap/FloodStuationReview/xqhgLeftBox.vue b/src/views/oneMap/FloodStuationReview/xqhgLeftBox.vue
index 14170d1..c43cb7b 100644
--- a/src/views/oneMap/FloodStuationReview/xqhgLeftBox.vue
+++ b/src/views/oneMap/FloodStuationReview/xqhgLeftBox.vue
@@ -122,7 +122,7 @@
         background: linear-gradient(0deg, rgba(0, 242, 255, 0.5) 0%, rgba(0, 242, 255, 0) 100%);
         height: 10px;
         line-height: 0px;
-        margin-top: 10px;
+        margin-top: 12px;
       }
     }
     .ScheduEcharts {
@@ -161,7 +161,7 @@
       background: linear-gradient(0deg, rgba(0, 242, 255, 0.5) 0%, rgba(0, 242, 255, 0) 100%);
       height: 10px;
       line-height: 0px;
-      margin-top: 10px;
+      margin-top: 12px;
     }
   }
   .VehiclEcharts {
@@ -196,7 +196,7 @@
       background: linear-gradient(0deg, rgba(0, 242, 255, 0.5) 0%, rgba(0, 242, 255, 0) 100%);
       height: 10px;
       line-height: 0px;
-      margin-top: 10px;
+      margin-top: 12px;
     }
   }
   .MaterialEcharts {
diff --git a/src/views/oneMap/LayerControl/LayerControl.vue b/src/views/oneMap/LayerControl/LayerControl.vue
index 37d0576..cc8e024 100644
--- a/src/views/oneMap/LayerControl/LayerControl.vue
+++ b/src/views/oneMap/LayerControl/LayerControl.vue
@@ -30,29 +30,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 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({
   // 图层控制面板的渲染数据
   /**图层面板数据字段说明
@@ -69,72 +70,90 @@
       Show: true,
       children: [
         {
-          layerName: "中心城区",
-          layerKey: "centerCity",
-          layerIcon: requireTuChengImg("zhongxinchengqu"),
+          layerName: '蓝色地图',
+          layerKey: 'blackMap',
+          layerIcon: requireTuChengImg('zhongxinchengqu'),
+          layerVisible: false,
+        },
+        {
+          layerName: '白色地图',
+          layerKey: 'whiteMap',
+          layerIcon: requireTuChengImg('zhongxinchengqu'),
+          layerVisible: false,
+        },
+        {
+          layerName: '影像地图',
+          layerKey: 'imageMap',
+          layerIcon: requireTuChengImg('zhongxinchengqu'),
+          layerVisible: false,
+        },
+        {
+          layerName: '中心城区',
+          layerKey: 'centerCity',
+          layerIcon: requireTuChengImg('zhongxinchengqu'),
           layerVisible: false,
           dynamicLineData: yanAnCenterCity,
         },
         {
-          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,
         },
@@ -145,38 +164,38 @@
       Show: true,
       children: [
         {
-          layerName: "燃气管网",
-          layerKey: "rq_all",
+          layerName: '燃气管网',
+          layerKey: 'rq_all',
           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,
         },
@@ -187,22 +206,22 @@
       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,
         },
@@ -213,8 +232,8 @@
         //   layerVisible: false,
         // },
         {
-          layerName: "雨水泵站",
-          layerKey: "YSBZ",
+          layerName: '雨水泵站',
+          layerKey: 'YSBZ',
           layerIcon: null,
           layerVisible: false,
           data: yanAnYSBZ,
@@ -226,14 +245,14 @@
       Show: true,
       children: [
         {
-          layerName: "污水分区",
-          layerKey: "sewageArea",
+          layerName: '污水分区',
+          layerKey: 'sewageArea',
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: "污水管网",
-          layerKey: "wsLine1",
+          layerName: '污水管网',
+          layerKey: 'wsLine1',
           layerIcon: null,
           layerVisible: false,
         },
@@ -250,8 +269,8 @@
         //   layerVisible: false,
         // },
         {
-          layerName: "污水处理厂",
-          layerKey: "WSCLC",
+          layerName: '污水处理厂',
+          layerKey: 'WSCLC',
           layerIcon: null,
           layerVisible: false,
           data: yanAnWSCLC,
@@ -263,36 +282,36 @@
       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,
@@ -307,10 +326,10 @@
     .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,
@@ -319,37 +338,79 @@
 watch(
   () => props.ShowTuCheng,
   (newValue, oldValue) => {
-    console.log("ShowTuCheng变化了", newValue, oldValue);
+    console.log('ShowTuCheng变化了', newValue, oldValue);
   },
   { immediate: true, deep: true }
 );
 
-const layerClick = (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 });
+  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 => {
+      oldIds.push(layer.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]));
+    });
+    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');
+    let newMapStyle;
+    let oldMapStyle = newfiberMapbox.map.getStyle();
+    let oldIds = [];
+    oldMapStyle.layers.forEach(layer => {
+      oldIds.push(layer.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]));
+    });
+    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.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.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, // 持续时间，延时
@@ -360,29 +421,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, // 持续时间，延时
@@ -393,22 +454,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, // 持续时间，延时
@@ -419,29 +480,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) : '';
       });
     });
   });
@@ -449,17 +510,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>
 
@@ -470,7 +531,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;
@@ -486,7 +547,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;
diff --git a/src/views/oneMap/components/FXHG.vue b/src/views/oneMap/components/FXHG.vue
index 8924475..44e9c21 100644
--- a/src/views/oneMap/components/FXHG.vue
+++ b/src/views/oneMap/components/FXHG.vue
@@ -40,6 +40,7 @@
   showPanel.value = true;
   showBottom.value = false;
   curType.value = true;
+  bus.emit('SetLayerShow', ['蓝色地图']);
   if (newfiberMapbox.map.getLayer('dynamicRoute')) {
     newfiberMapbox.map.removeLayer('dynamicRoute');
     newfiberMapbox.map.removeLayer('dynamicRoute_Symbol');
@@ -68,6 +69,7 @@
 
   let initePSTimer = setInterval(() => {
     if (!newfiberMapbox) return;
+    bus.emit('SetLayerShow', ['白色地图']);
     bus.emit('setLayerVisible', { layername: 'ysLine1', isCheck: true });
     //bus.emit('setLayerVisible', { layername: 'wsLine1', isCheck: true });
     clearInterval(initePSTimer);
diff --git a/src/views/oneMap/components/ZHHM.vue b/src/views/oneMap/components/ZHHM.vue
index d68bdc5..1f29507 100644
--- a/src/views/oneMap/components/ZHHM.vue
+++ b/src/views/oneMap/components/ZHHM.vue
@@ -648,6 +648,7 @@
     zoom: 12,
     pitch: 55,
   });
+  bus.emit('SetLayerShow', ['蓝色地图']);
   // 先清空
   bus.emit('clearAllLayer');
   let removedLayer = ['HMJZYSQ', 'HMXGYLD', 'HMXDLGC', 'HMXSX', 'GWPCYXF'];
diff --git a/src/views/oneMap/components/ZHHM_JCFX.vue b/src/views/oneMap/components/ZHHM_JCFX.vue
index c420911..42e81e6 100644
--- a/src/views/oneMap/components/ZHHM_JCFX.vue
+++ b/src/views/oneMap/components/ZHHM_JCFX.vue
@@ -411,6 +411,7 @@
 });
 onBeforeUnmount(() => {
   bus.emit('clearAllLayer');
+  bus.emit('SetLayerShow', ['蓝色地图']);
   let removedLayer = ['HMJZYSQ', 'HMXGYLD', 'HMXDLGC', 'HMXSX', 'GWPCYXF'];
   removedLayer.forEach(layer => {
     bus.emit('setLayerVisible', { layername: layer, isCheck: false });
diff --git a/src/views/oneMap/components/ZHHM_JSPG.vue b/src/views/oneMap/components/ZHHM_JSPG.vue
index 7400f1b..df2c85f 100644
--- a/src/views/oneMap/components/ZHHM_JSPG.vue
+++ b/src/views/oneMap/components/ZHHM_JSPG.vue
@@ -53,6 +53,7 @@
 };
 
 onMounted(() => {
+  bus.emit('SetLayerShow', ['蓝色地图']);
   newfiberMapbox.map.easeTo({
     center: [109.488, 36.596],
     zoom: 13,
diff --git a/src/views/oneMap/components/ZHPS.vue b/src/views/oneMap/components/ZHPS.vue
index 7ce8bb0..f09ddbc 100644
--- a/src/views/oneMap/components/ZHPS.vue
+++ b/src/views/oneMap/components/ZHPS.vue
@@ -43,6 +43,7 @@
   });
 });
 onBeforeUnmount(() => {
+  bus.emit('SetLayerShow', ['蓝色地图']);
   // bus.emit('setLayerVisible', { layername: 'ysLine1', isCheck: false });
   // bus.emit('setLayerVisible', { layername: 'wsLine1', isCheck: false });
 });
diff --git a/src/views/oneMap/components/ZHRQ.vue b/src/views/oneMap/components/ZHRQ.vue
index 40a70cc..493c201 100644
--- a/src/views/oneMap/components/ZHRQ.vue
+++ b/src/views/oneMap/components/ZHRQ.vue
@@ -1,31 +1,17 @@
 <template>
   <div id="ZHRQ">
-    <div
-      :class="[
-        'LeftBox',
-        'animate__animated',
-        showPanel ? 'animate__fadeOutLeft' : 'animate__fadeInLeft',
-      ]"
-    >
+    <div :class="['LeftBox', 'animate__animated', showPanel ? 'animate__fadeOutLeft' : 'animate__fadeInLeft']">
       <div class="ComBox LeftBox1_1">
         <div class="Box_header">管道风险评估</div>
         <div class="Box_Body">
           <div class="TJListBox">
             <div class="TJList TJList_RQ" @click="TuChengClick(0)">
-              <img
-                class="TJListImg"
-                src="@/assets/images/Sponge_screen/RQ/RQ_RQ.png"
-                alt=""
-              />
+              <img class="TJListImg" src="@/assets/images/Sponge_screen/RQ/RQ_RQ.png" alt="" />
               <span class="TJListName">燃气管道</span>
               <span class="TJListValue">4549km</span>
             </div>
             <div class="TJList TJList_GZ">
-              <img
-                class="TJListImg"
-                src="@/assets/images/Sponge_screen/RQ/RQ_GZ.png"
-                alt=""
-              />
+              <img class="TJListImg" src="@/assets/images/Sponge_screen/RQ/RQ_GZ.png" alt="" />
               <span class="TJListName">需改造</span>
               <span class="TJListValue">1922km</span>
             </div>
@@ -71,9 +57,7 @@
             </div>
             <div class="tableBody">
               <div class="tableBodyList" v-for="item in AllData.FXJCData">
-                <span class="tableBodyList_span1" @click="FengXianClick(item)">{{
-                  item.zb
-                }}</span>
+                <span class="tableBodyList_span1" @click="FengXianClick(item)">{{ item.zb }}</span>
                 <span class="tableBodyList_span2" @click="FengXianClick(item)"
                   >{{ item.sz }}
                   <el-icon v-if="item.szzt" color="lime" size="14"><Top /> </el-icon>
@@ -81,11 +65,9 @@
                     <Bottom />
                   </el-icon>
                 </span>
-                <span
-                  class="tableBodyList_span3"
-                  :class="item.zt == 0 ? 'YJClass' : ''"
-                  >{{ item.zt == 0 ? "预警" : "正常" }}</span
-                >
+                <span class="tableBodyList_span3" :class="item.zt == 0 ? 'YJClass' : ''">{{
+                  item.zt == 0 ? '预警' : '正常'
+                }}</span>
                 <span class="tableBodyList_span4" @click="PaiFa(item)">派发</span>
               </div>
             </div>
@@ -110,13 +92,7 @@
         </div>
       </div>
     </div>
-    <div
-      :class="[
-        'RightBox',
-        'animate__animated',
-        showPanel ? 'animate__fadeOutRight' : 'animate__fadeInRight',
-      ]"
-    >
+    <div :class="['RightBox', 'animate__animated', showPanel ? 'animate__fadeOutRight' : 'animate__fadeInRight']">
       <div class="ComBox RightBox1_1">
         <div class="Box_header">辅助决策</div>
         <div class="Box_Body">
@@ -138,16 +114,10 @@
               <span class="JCListBox_List_value color_red">{{ item.yp }}</span>
             </div>
             <div class="JCListBox_List JCListBox_List_BTN">
-              <el-button
-                style="background: #03b6a0; color: white; border: none"
-                size="small"
-                @click="GongDanPaiFa(item)"
+              <el-button style="background: #03b6a0; color: white; border: none" size="small" @click="GongDanPaiFa(item)"
                 >工单派发</el-button
               >
-              <el-button
-                style="background: #03b6a0; color: white; border: none"
-                size="small"
-                @click="XianChangLianXian(item)"
+              <el-button style="background: #03b6a0; color: white; border: none" size="small" @click="XianChangLianXian(item)"
                 >现场联线</el-button
               >
             </div>
@@ -158,18 +128,12 @@
         <div class="Box_header">巡查反馈</div>
         <div class="Box_Body">
           <div class="FK_headerBox">
-            <div class="FK_headerBox_list" @click="dealOrNoDeal(1)">
-              <span class="FK_headerBox_list_colorBox1"></span> 未处理
-            </div>
-            <div class="FK_headerBox_list" @click="dealOrNoDeal(2)">
-              <span class="FK_headerBox_list_colorBox2"></span> 已处理
-            </div>
+            <div class="FK_headerBox_list" @click="dealOrNoDeal(1)"><span class="FK_headerBox_list_colorBox1"></span> 未处理</div>
+            <div class="FK_headerBox_list" @click="dealOrNoDeal(2)"><span class="FK_headerBox_list_colorBox2"></span> 已处理</div>
           </div>
           <div class="FK_bodyBox">
             <div class="FK_bodyBox_list" v-for="item in AllData.XCFKData">
-              <span class="FK_bodyBox_list_label" @click="XunChaFanKui(item)">{{
-                item.name
-              }}</span>
+              <span class="FK_bodyBox_list_label" @click="XunChaFanKui(item)">{{ item.name }}</span>
               <div class="FK_BigBox">
                 <div class="FK_CenBox1" :style="getWidth(item, 1)">{{ item.num1 }}</div>
                 <div class="FK_CenBox2" :style="getWidth(item, 2)">{{ item.num2 }}</div>
@@ -179,13 +143,7 @@
         </div>
       </div>
     </div>
-    <div
-      :class="[
-        'TopBox',
-        'animate__animated',
-        showPanel ? 'animate__fadeOutUp' : 'animate__fadeInDown',
-      ]"
-    >
+    <div :class="['TopBox', 'animate__animated', showPanel ? 'animate__fadeOutUp' : 'animate__fadeInDown']">
       <div class="TopTableHeader">
         <span class="TopTableListSpan TopTableListSpan1">时间</span>
         <span class="TopTableListSpan TopTableListSpan2">事件明细</span>
@@ -195,27 +153,15 @@
         <span class="TopTableListSpan TopTableListSpan6">督办</span>
       </div>
       <!-- <div class="TopTableBody"> -->
-      <Vue3SeamlessScroll
-        :list="AllData.TopTableData"
-        :singleHeight="34"
-        :hover="true"
-        class="TopTableBody"
-      >
+      <Vue3SeamlessScroll :list="AllData.TopTableData" :singleHeight="34" :hover="true" class="TopTableBody">
         <div class="TopTableBody_list" v-for="item in AllData.TopTableData">
           <span class="TopTableListSpan TopTableListSpan1">{{ item.sj }}</span>
           <span class="TopTableListSpan TopTableListSpan2">{{ item.mx }}</span>
           <span class="TopTableListSpan TopTableListSpan3">{{ item.dd }}</span>
-          <span class="TopTableListSpan TopTableListSpan4">{{
-            item.zt == 0 ? "未处理" : "已处理"
-          }}</span>
+          <span class="TopTableListSpan TopTableListSpan4">{{ item.zt == 0 ? '未处理' : '已处理' }}</span>
           <span class="TopTableListSpan TopTableListSpan5">{{ item.dw }}</span>
           <span class="TopTableListSpan TopTableListSpan6">
-            <img
-              class="TopTableListSpanImg2"
-              src="@/assets/images/Sponge_screen/RQ/RQ_XX.png"
-              alt=""
-              @click="PaiFa(item)"
-            />
+            <img class="TopTableListSpanImg2" src="@/assets/images/Sponge_screen/RQ/RQ_XX.png" alt="" @click="PaiFa(item)" />
             <img
               class="TopTableListSpanImg"
               src="@/assets/images/Sponge_screen/RQ/RQ_SP.png"
@@ -231,49 +177,49 @@
 </template>
 
 <script setup name="ZHRQ">
-import { ref, reactive, toRefs, onMounted, onBeforeUnmount, nextTick } from "vue";
+import { ref, reactive, toRefs, onMounted, onBeforeUnmount, nextTick } from 'vue';
 
-import * as echarts from "echarts";
-import bus from "@/bus";
-import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
-import sheBeiLost from "@/assets/sheBeiLost.json";
-import xiaXian from "@/assets/xiaXian.json";
-import yiBian from "@/assets/yiBian.json";
-import zaWuDuiFang from "@/assets/zaWuDuiFang.json";
-import rq_QiTa from "@/assets/rq_QiTa.json";
-import no_sheBeiLost from "@/assets/no_sheBeiLost.json";
-import no_xiaXian from "@/assets/no_xiaXian.json";
-import no_yiBian from "@/assets/no_yiBian.json";
-import no_zaWuDuiFang from "@/assets/no_zaWuDuiFang.json";
-import no_rq_QiTa from "@/assets/no_rq_QiTa.json";
-import yanAnRQoverindex from "@/assets/yanAnRQoverindex.json";
-import yanAnWarring from "@/assets/yanAnWarring.json";
+import * as echarts from 'echarts';
+import bus from '@/bus';
+import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
+import sheBeiLost from '@/assets/sheBeiLost.json';
+import xiaXian from '@/assets/xiaXian.json';
+import yiBian from '@/assets/yiBian.json';
+import zaWuDuiFang from '@/assets/zaWuDuiFang.json';
+import rq_QiTa from '@/assets/rq_QiTa.json';
+import no_sheBeiLost from '@/assets/no_sheBeiLost.json';
+import no_xiaXian from '@/assets/no_xiaXian.json';
+import no_yiBian from '@/assets/no_yiBian.json';
+import no_zaWuDuiFang from '@/assets/no_zaWuDuiFang.json';
+import no_rq_QiTa from '@/assets/no_rq_QiTa.json';
+import yanAnRQoverindex from '@/assets/yanAnRQoverindex.json';
+import yanAnWarring from '@/assets/yanAnWarring.json';
 
 const AllData = reactive({
   xunChaStatic: null,
   xunChaLayers: [
-    "alreadyDeal_DF",
-    "alreadyDeal_DS",
-    "alreadyDeal_XX",
-    "alreadyDeal_YB",
-    "alreadyDeal_QT",
-    "noDeal_DF",
-    "noDeal_DS",
-    "noDeall_XX",
-    "noDeal_YB",
-    "noDeal_QT",
+    'alreadyDeal_DF',
+    'alreadyDeal_DS',
+    'alreadyDeal_XX',
+    'alreadyDeal_YB',
+    'alreadyDeal_QT',
+    'noDeal_DF',
+    'noDeal_DS',
+    'noDeall_XX',
+    'noDeal_YB',
+    'noDeal_QT',
   ],
   ChangeData: [
     {
-      name: "枣园",
+      name: '枣园',
       id: 1,
     },
     {
-      name: "杨家湾",
+      name: '杨家湾',
       id: 2,
     },
     {
-      name: "丰富川",
+      name: '丰富川',
       id: 3,
     },
   ],
@@ -281,38 +227,38 @@
   // 风险监测
   FXJCData: [
     {
-      zb: "甲烷浓度",
-      sz: "3%",
+      zb: '甲烷浓度',
+      sz: '3%',
       szzt: true,
       zt: 0, //0预警 1 正常
-      value: "JWND",
+      value: 'JWND',
     },
     {
-      zb: "压力",
-      sz: "5MPa",
+      zb: '压力',
+      sz: '5MPa',
       szzt: false,
       zt: 1, //0预警 1 正常
-      value: "YL",
+      value: 'YL',
     },
     {
-      zb: "温度",
-      sz: "25C°",
+      zb: '温度',
+      sz: '25C°',
       szzt: true,
       zt: 1, //0预警 1 正常
-      value: "WD",
+      value: 'WD',
     },
   ],
   YJChangeData: [
     {
-      name: "综合",
+      name: '综合',
       id: 1,
     },
     {
-      name: "压力",
+      name: '压力',
       id: 2,
     },
     {
-      name: "温度",
+      name: '温度',
       id: 3,
     },
   ],
@@ -320,51 +266,51 @@
   //辅助决策
   JCData: [
     {
-      qy: "宝塔区凤凰山街道二道街",
-      tz: "压力监测异常波动",
+      qy: '宝塔区凤凰山街道二道街',
+      tz: '压力监测异常波动',
       sj: 5,
-      yp: "设施故障",
-      value: "001", //语音识别内容编码-前段自己设置的,后期项目有接口就直接替换数据唯一id
+      yp: '设施故障',
+      value: '001', //语音识别内容编码-前段自己设置的,后期项目有接口就直接替换数据唯一id
     },
     {
-      qy: "宝塔区凤凰山街道二道街",
-      tz: "燃气管道压力过大",
+      qy: '宝塔区凤凰山街道二道街',
+      tz: '燃气管道压力过大',
       sj: 5,
-      yp: "燃气爆管风险",
-      value: "002",
+      yp: '燃气爆管风险',
+      value: '002',
     },
     {
-      qy: "宝塔区凤凰山街道二道街",
-      tz: "高峰期流量持续降低",
+      qy: '宝塔区凤凰山街道二道街',
+      tz: '高峰期流量持续降低',
       sj: 4,
-      yp: "燃气泄漏风险",
-      value: "003",
+      yp: '燃气泄漏风险',
+      value: '003',
     },
   ],
   // 巡查反馈
   XCFKData: [
     {
-      name: "堆放杂物",
+      name: '堆放杂物',
       num1: 20,
       num2: 80,
     },
     {
-      name: "设备丢失",
+      name: '设备丢失',
       num1: 12,
       num2: 88,
     },
     {
-      name: "下陷",
+      name: '下陷',
       num1: 32,
       num2: 68,
     },
     {
-      name: "异变",
+      name: '异变',
       num1: 30,
       num2: 70,
     },
     {
-      name: "其他",
+      name: '其他',
       num1: 20,
       num2: 80,
     },
@@ -372,35 +318,35 @@
   // 顶部表格数据
   TopTableData: [
     {
-      sj: "2024-09-26 10:00:29",
-      mx: "燃气常规检查发现泄漏",
-      dd: "宝塔区凤凰山街道二道街",
+      sj: '2024-09-26 10:00:29',
+      mx: '燃气常规检查发现泄漏',
+      dd: '宝塔区凤凰山街道二道街',
       zt: 0, //0未处理 1已处理
-      dw: "延安市燃气总公司",
+      dw: '延安市燃气总公司',
       value: null,
     },
     {
-      sj: "2024-09-27 16:10:248",
-      mx: "燃气常规检查发现泄漏",
-      dd: "宝塔区凤凰山街道二道街",
+      sj: '2024-09-27 16:10:248',
+      mx: '燃气常规检查发现泄漏',
+      dd: '宝塔区凤凰山街道二道街',
       zt: 0, //0未处理 1已处理
-      dw: "延安市燃气总公司",
+      dw: '延安市燃气总公司',
       value: null,
     },
     {
-      sj: "2024-09-26 10:00:29",
-      mx: "燃气常规检查发现泄漏",
-      dd: "宝塔区凤凰山街道二道街",
+      sj: '2024-09-26 10:00:29',
+      mx: '燃气常规检查发现泄漏',
+      dd: '宝塔区凤凰山街道二道街',
       zt: 0, //0未处理 1已处理
-      dw: "延安市燃气总公司",
+      dw: '延安市燃气总公司',
       value: null,
     },
     {
-      sj: "2024-09-27 16:10:248",
-      mx: "燃气常规检查发现泄漏",
-      dd: "宝塔区凤凰山街道二道街",
+      sj: '2024-09-27 16:10:248',
+      mx: '燃气常规检查发现泄漏',
+      dd: '宝塔区凤凰山街道二道街',
       zt: 0, //0未处理 1已处理
-      dw: "延安市燃气总公司",
+      dw: '延安市燃气总公司',
       value: null,
     },
   ],
@@ -417,7 +363,7 @@
   },
 });
 // 初始化预警统计的Echarts
-const initEcharts = (id) => {
+const initEcharts = id => {
   AllData.YJChangeIndex = id;
   let Data1 = [];
   let Data2 = [];
@@ -437,41 +383,41 @@
   if (!!myChart.value) {
     myChart.value.dispose();
   }
-  myChart.value = echarts.init(document.getElementById("YJEchartsBox"));
-  myChart.value.off("click");
+  myChart.value = echarts.init(document.getElementById('YJEchartsBox'));
+  myChart.value.off('click');
   myChart.value.setOption({
-    color: ["#18A7F2", "#1AF7AA"],
+    color: ['#18A7F2', '#1AF7AA'],
     tooltip: {
-      trigger: "axis",
+      trigger: 'axis',
     },
     grid: {
-      top: "30%",
-      left: "3%",
-      right: "4%",
-      bottom: "3%",
+      top: '30%',
+      left: '3%',
+      right: '4%',
+      bottom: '3%',
       containLabel: true,
     },
     legend: {
-      data: ["预警次数", "持续时长"],
+      data: ['预警次数', '持续时长'],
       textStyle: {
-        color: "#fffd", // 图例文字颜色
+        color: '#fffd', // 图例文字颜色
       },
-      x: "40",
-      y: "10",
+      x: '40',
+      y: '10',
     },
     xAxis: [
       {
-        type: "category",
-        data: ["今日", "09/27", "09/26", "09/25", "09/24", "09/23", "09/22"],
+        type: 'category',
+        data: ['今日', '09/27', '09/26', '09/25', '09/24', '09/23', '09/22'],
         axisPointer: {
-          type: "shadow",
+          type: 'shadow',
         },
         textStyle: {
-          color: "#EBFEFF",
+          color: '#EBFEFF',
         },
         axisLine: {
           lineStyle: {
-            color: "#EBFEFF",
+            color: '#EBFEFF',
           },
         },
         // boundaryGap: false,
@@ -479,57 +425,57 @@
     ],
     yAxis: [
       {
-        type: "value",
-        name: "预警次数",
+        type: 'value',
+        name: '预警次数',
         min: 0,
         max: 12,
         interval: 2,
         axisLabel: {
-          formatter: "{value}",
+          formatter: '{value}',
         },
         axisLine: {
           lineStyle: {
-            color: "#AAC1CF",
+            color: '#AAC1CF',
           },
         },
         splitLine: {
           lineStyle: {
             // 使用深浅的间隔色
-            color: ["#184E5A"],
+            color: ['#184E5A'],
           },
         },
       },
       {
-        type: "value",
-        name: "持续时长",
+        type: 'value',
+        name: '持续时长',
         min: 0,
         max: 30,
         interval: 5,
         axisLabel: {
-          formatter: "{value}",
+          formatter: '{value}',
         },
         axisLine: {
           lineStyle: {
-            color: "#AAC1CF",
+            color: '#AAC1CF',
           },
         },
         splitLine: {
           lineStyle: {
             // 使用深浅的间隔色
-            color: ["#184E5A"],
+            color: ['#184E5A'],
           },
         },
       },
     ],
     series: [
       {
-        name: "预警次数",
-        type: "bar",
-        barWidth: "10px",
+        name: '预警次数',
+        type: 'bar',
+        barWidth: '10px',
         showBackground: true,
         tooltip: {
           valueFormatter: function (value) {
-            return value + " 次";
+            return value + ' 次';
           },
         },
         itemStyle: {
@@ -539,12 +485,12 @@
         data: Data1,
       },
       {
-        name: "持续时长",
-        type: "line",
+        name: '持续时长',
+        type: 'line',
         yAxisIndex: 1,
         tooltip: {
           valueFormatter: function (value) {
-            return value + "min";
+            return value + 'min';
           },
         },
         areaStyle: {
@@ -552,11 +498,11 @@
           color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
             {
               offset: 0,
-              color: "#1AF7AA",
+              color: '#1AF7AA',
             },
             {
               offset: 1,
-              color: "#1AF7AA00",
+              color: '#1AF7AA00',
             },
           ]),
         },
@@ -565,19 +511,19 @@
       },
     ],
   });
-  myChart.value.on("click", (param) => {
+  myChart.value.on('click', param => {
     console.log(param);
     let data = {
-      title: "风险监测",
-      comIDs: ["RQ_FengXianJianCe"],
+      title: '风险监测',
+      comIDs: ['RQ_FengXianJianCe'],
     };
-    bus.emit("publicDialog", data);
+    bus.emit('publicDialog', data);
     let a = {
-      value: "全部",
-      endTime: "2024-10-05",
+      value: '全部',
+      endTime: '2024-10-05',
     };
     setTimeout(() => {
-      bus.emit("getDataListFxjc", a);
+      bus.emit('getDataListFxjc', a);
     }, 500);
   });
 
@@ -591,7 +537,7 @@
     i++;
     if (i == length) i = 0;
     myChart.value.dispatchAction({
-      type: "showTip",
+      type: 'showTip',
       seriesIndex: 0,
       dataIndex: i,
     });
@@ -608,14 +554,14 @@
   return `width:${widthNum}%`;
 };
 // 工单派发
-const GongDanPaiFa = (item) => {
+const GongDanPaiFa = item => {
   console.log(item);
   let data = {
     title: item.qy,
-    comIDs: ["gdpf"],
+    comIDs: ['gdpf'],
     getSiteId: item.value,
   };
-  bus.emit("publicDialog", data);
+  bus.emit('publicDialog', data);
 };
 // // 风险
 // const FengXianClick = (item) => {
@@ -627,56 +573,52 @@
 //   bus.emit("publicDialog", data);
 // };
 // 风险监测派发
-const PaiFa = (item) => {
+const PaiFa = item => {
   console.log(item);
   let data = {
-    title: "智慧外呼",
-    comIDs: ["RQ_ZhiHuiWaiHu"],
+    title: '智慧外呼',
+    comIDs: ['RQ_ZhiHuiWaiHu'],
     getSiteId: item.value,
   };
-  bus.emit("publicDialog", data);
+  bus.emit('publicDialog', data);
 };
 //巡查反馈处理、未处理
-const dealOrNoDeal = (item) => {
+const dealOrNoDeal = item => {
   AllData.xunChaStatic = item;
   newfiberMapbox.map.easeTo({
     center: [109.488, 36.596],
     zoom: 12,
     pitch: 55,
   });
-  bus.emit("removeMapDatas", ["warning_monitor"]);
+  bus.emit('removeMapDatas', ['warning_monitor']);
   if (item == 1) {
-    let removedLayer = AllData.xunChaLayers.filter((layer) => layer.includes("noDeal"));
-    let selectedLayer = AllData.xunChaLayers.filter((layer) =>
-      layer.includes("alreadyDeal")
-    );
-    bus.emit("removeMapDatas", AllData.xunChaLayers);
-    bus.emit("setGeoJSON", { json: zaWuDuiFang, key: "alreadyDeal_DF" });
-    bus.emit("setGeoJSON", { json: sheBeiLost, key: "alreadyDeal_DS" });
-    bus.emit("setGeoJSON", { json: xiaXian, key: "alreadyDeal_XX" });
-    bus.emit("setGeoJSON", { json: yiBian, key: "alreadyDeal_YB" });
-    bus.emit("setGeoJSON", { json: rq_QiTa, key: "alreadyDeal_QT" });
-    selectedLayer.forEach((layer) => {
-      bus.emit("setLayerVisible", { layername: layer, isCheck: true });
+    let removedLayer = AllData.xunChaLayers.filter(layer => layer.includes('noDeal'));
+    let selectedLayer = AllData.xunChaLayers.filter(layer => layer.includes('alreadyDeal'));
+    bus.emit('removeMapDatas', AllData.xunChaLayers);
+    bus.emit('setGeoJSON', { json: zaWuDuiFang, key: 'alreadyDeal_DF' });
+    bus.emit('setGeoJSON', { json: sheBeiLost, key: 'alreadyDeal_DS' });
+    bus.emit('setGeoJSON', { json: xiaXian, key: 'alreadyDeal_XX' });
+    bus.emit('setGeoJSON', { json: yiBian, key: 'alreadyDeal_YB' });
+    bus.emit('setGeoJSON', { json: rq_QiTa, key: 'alreadyDeal_QT' });
+    selectedLayer.forEach(layer => {
+      bus.emit('setLayerVisible', { layername: layer, isCheck: true });
     });
   } else {
-    let removedLayer = AllData.xunChaLayers.filter((layer) =>
-      layer.includes("alreadyDeal")
-    );
-    let selectedLayer = AllData.xunChaLayers.filter((layer) => layer.includes("noDeal"));
-    bus.emit("removeMapDatas", AllData.xunChaLayers);
-    bus.emit("setGeoJSON", { json: no_zaWuDuiFang, key: "onDeal_DF" });
-    bus.emit("setGeoJSON", { json: no_sheBeiLost, key: "onDeal_DS" });
-    bus.emit("setGeoJSON", { json: no_xiaXian, key: "onDeal_XX" });
-    bus.emit("setGeoJSON", { json: no_yiBian, key: "onDeal_YB" });
-    bus.emit("setGeoJSON", { json: no_rq_QiTa, key: "onDeal_QT" });
-    selectedLayer.forEach((layer) => {
-      bus.emit("setLayerVisible", { layername: layer, isCheck: true });
+    let removedLayer = AllData.xunChaLayers.filter(layer => layer.includes('alreadyDeal'));
+    let selectedLayer = AllData.xunChaLayers.filter(layer => layer.includes('noDeal'));
+    bus.emit('removeMapDatas', AllData.xunChaLayers);
+    bus.emit('setGeoJSON', { json: no_zaWuDuiFang, key: 'onDeal_DF' });
+    bus.emit('setGeoJSON', { json: no_sheBeiLost, key: 'onDeal_DS' });
+    bus.emit('setGeoJSON', { json: no_xiaXian, key: 'onDeal_XX' });
+    bus.emit('setGeoJSON', { json: no_yiBian, key: 'onDeal_YB' });
+    bus.emit('setGeoJSON', { json: no_rq_QiTa, key: 'onDeal_QT' });
+    selectedLayer.forEach(layer => {
+      bus.emit('setLayerVisible', { layername: layer, isCheck: true });
     });
   }
 };
 // 巡查反馈
-const XunChaFanKui = (item) => {
+const XunChaFanKui = item => {
   let removedLayer = [];
   let selectedLayer = [];
   newfiberMapbox.map.easeTo({
@@ -685,80 +627,60 @@
     pitch: 55,
   });
   switch (item.name) {
-    case "堆放杂物":
-      removedLayer = AllData.xunChaLayers.filter(
-        (layer) => layer != "alreadyDeal_DF" && layer != "noDeal_DF"
-      );
-      selectedLayer = AllData.xunChaLayers.filter(
-        (layer) => layer == "alreadyDeal_DF" || layer == "noDeal_DF"
-      );
-      selectedLayer.forEach((layer) => {
-        bus.emit("setLayerVisible", { layername: layer, isCheck: true });
+    case '堆放杂物':
+      removedLayer = AllData.xunChaLayers.filter(layer => layer != 'alreadyDeal_DF' && layer != 'noDeal_DF');
+      selectedLayer = AllData.xunChaLayers.filter(layer => layer == 'alreadyDeal_DF' || layer == 'noDeal_DF');
+      selectedLayer.forEach(layer => {
+        bus.emit('setLayerVisible', { layername: layer, isCheck: true });
       });
-      removedLayer.forEach((layer) => {
-        bus.emit("setLayerVisible", { layername: layer, isCheck: false });
+      removedLayer.forEach(layer => {
+        bus.emit('setLayerVisible', { layername: layer, isCheck: false });
       });
       break;
-    case "设备丢失":
-      removedLayer = AllData.xunChaLayers.filter(
-        (layer) => layer != "alreadyDeal_DS" && layer != "noDeal_DS"
-      );
-      selectedLayer = AllData.xunChaLayers.filter(
-        (layer) => layer == "alreadyDeal_DS" || layer == "noDeal_DS"
-      );
-      selectedLayer.forEach((layer) => {
-        bus.emit("setLayerVisible", { layername: layer, isCheck: true });
+    case '设备丢失':
+      removedLayer = AllData.xunChaLayers.filter(layer => layer != 'alreadyDeal_DS' && layer != 'noDeal_DS');
+      selectedLayer = AllData.xunChaLayers.filter(layer => layer == 'alreadyDeal_DS' || layer == 'noDeal_DS');
+      selectedLayer.forEach(layer => {
+        bus.emit('setLayerVisible', { layername: layer, isCheck: true });
       });
-      removedLayer.forEach((layer) => {
-        bus.emit("setLayerVisible", { layername: layer, isCheck: false });
+      removedLayer.forEach(layer => {
+        bus.emit('setLayerVisible', { layername: layer, isCheck: false });
       });
       break;
-    case "下陷":
-      removedLayer = AllData.xunChaLayers.filter(
-        (layer) => layer != "alreadyDeal_XX" && layer != "noDeal_XX"
-      );
-      selectedLayer = AllData.xunChaLayers.filter(
-        (layer) => layer == "alreadyDeal_XX" || layer == "noDeal_XX"
-      );
-      selectedLayer.forEach((layer) => {
-        bus.emit("setLayerVisible", { layername: layer, isCheck: true });
+    case '下陷':
+      removedLayer = AllData.xunChaLayers.filter(layer => layer != 'alreadyDeal_XX' && layer != 'noDeal_XX');
+      selectedLayer = AllData.xunChaLayers.filter(layer => layer == 'alreadyDeal_XX' || layer == 'noDeal_XX');
+      selectedLayer.forEach(layer => {
+        bus.emit('setLayerVisible', { layername: layer, isCheck: true });
       });
-      removedLayer.forEach((layer) => {
-        bus.emit("setLayerVisible", { layername: layer, isCheck: false });
+      removedLayer.forEach(layer => {
+        bus.emit('setLayerVisible', { layername: layer, isCheck: false });
       });
       break;
-    case "异变":
-      removedLayer = AllData.xunChaLayers.filter(
-        (layer) => layer != "alreadyDeal_YB" && layer != "noDeal_YB"
-      );
-      selectedLayer = AllData.xunChaLayers.filter(
-        (layer) => layer == "alreadyDeal_YB" || layer == "noDeal_YB"
-      );
-      selectedLayer.forEach((layer) => {
-        bus.emit("setLayerVisible", { layername: layer, isCheck: true });
+    case '异变':
+      removedLayer = AllData.xunChaLayers.filter(layer => layer != 'alreadyDeal_YB' && layer != 'noDeal_YB');
+      selectedLayer = AllData.xunChaLayers.filter(layer => layer == 'alreadyDeal_YB' || layer == 'noDeal_YB');
+      selectedLayer.forEach(layer => {
+        bus.emit('setLayerVisible', { layername: layer, isCheck: true });
       });
-      removedLayer.forEach((layer) => {
-        bus.emit("setLayerVisible", { layername: layer, isCheck: false });
+      removedLayer.forEach(layer => {
+        bus.emit('setLayerVisible', { layername: layer, isCheck: false });
       });
       break;
-    case "其他":
-      removedLayer = AllData.xunChaLayers.filter(
-        (layer) => layer != "alreadyDeal_QT" && layer != "noDeal_QT"
-      );
-      selectedLayer = AllData.xunChaLayers.filter(
-        (layer) => layer == "alreadyDeal_QT" || layer == "noDeal_QT"
-      );
-      selectedLayer.forEach((layer) => {
-        bus.emit("setLayerVisible", { layername: layer, isCheck: true });
+    case '其他':
+      removedLayer = AllData.xunChaLayers.filter(layer => layer != 'alreadyDeal_QT' && layer != 'noDeal_QT');
+      selectedLayer = AllData.xunChaLayers.filter(layer => layer == 'alreadyDeal_QT' || layer == 'noDeal_QT');
+      selectedLayer.forEach(layer => {
+        bus.emit('setLayerVisible', { layername: layer, isCheck: true });
       });
-      removedLayer.forEach((layer) => {
-        bus.emit("setLayerVisible", { layername: layer, isCheck: false });
+      removedLayer.forEach(layer => {
+        bus.emit('setLayerVisible', { layername: layer, isCheck: false });
       });
       break;
   }
 };
 // 风险评估
-const TuChengClick = (item) => {
+const TuChengClick = item => {
   newfiberMapbox.map.easeTo({
     center: [109.488, 36.596],
     zoom: 12,
@@ -766,61 +688,61 @@
   });
   switch (item) {
     case 0:
-      bus.emit("setLayerVisible", { layername: "rq_SZLH", isCheck: false });
-      bus.emit("setLayerVisible", { layername: "rq_TYLH", isCheck: false });
-      bus.emit("setLayerVisible", { layername: "rq_LGLH", isCheck: false });
-      bus.emit("setLayerVisible", { layername: "rq_other", isCheck: false });
-      bus.emit("setLayerVisible", { layername: "rq_all", isCheck: true }); //所有管网rq_all、市政rq_SZLH、庭院rq_TYLH、立管rq_LGLH、其他rq_other
+      bus.emit('setLayerVisible', { layername: 'rq_SZLH', isCheck: false });
+      bus.emit('setLayerVisible', { layername: 'rq_TYLH', isCheck: false });
+      bus.emit('setLayerVisible', { layername: 'rq_LGLH', isCheck: false });
+      bus.emit('setLayerVisible', { layername: 'rq_other', isCheck: false });
+      bus.emit('setLayerVisible', { layername: 'rq_all', isCheck: true }); //所有管网rq_all、市政rq_SZLH、庭院rq_TYLH、立管rq_LGLH、其他rq_other
       break;
     case 1:
-      bus.emit("setLayerVisible", { layername: "rq_all", isCheck: false }); //所有管网rq_all、市政rq_SZLH、庭院rq_TYLH、立管rq_LGLH、其他rq_other
-      bus.emit("setLayerVisible", { layername: "rq_SZLH", isCheck: true });
-      bus.emit("setLayerVisible", { layername: "rq_TYLH", isCheck: false });
-      bus.emit("setLayerVisible", { layername: "rq_LGLH", isCheck: false });
-      bus.emit("setLayerVisible", { layername: "rq_other", isCheck: false });
+      bus.emit('setLayerVisible', { layername: 'rq_all', isCheck: false }); //所有管网rq_all、市政rq_SZLH、庭院rq_TYLH、立管rq_LGLH、其他rq_other
+      bus.emit('setLayerVisible', { layername: 'rq_SZLH', isCheck: true });
+      bus.emit('setLayerVisible', { layername: 'rq_TYLH', isCheck: false });
+      bus.emit('setLayerVisible', { layername: 'rq_LGLH', isCheck: false });
+      bus.emit('setLayerVisible', { layername: 'rq_other', isCheck: false });
       break;
     case 2:
-      bus.emit("setLayerVisible", { layername: "rq_all", isCheck: false }); //所有管网rq_all、市政rq_SZLH、庭院rq_TYLH、立管rq_LGLH、其他rq_other
-      bus.emit("setLayerVisible", { layername: "rq_SZLH", isCheck: false });
-      bus.emit("setLayerVisible", { layername: "rq_TYLH", isCheck: true });
-      bus.emit("setLayerVisible", { layername: "rq_LGLH", isCheck: false });
-      bus.emit("setLayerVisible", { layername: "rq_other", isCheck: false });
+      bus.emit('setLayerVisible', { layername: 'rq_all', isCheck: false }); //所有管网rq_all、市政rq_SZLH、庭院rq_TYLH、立管rq_LGLH、其他rq_other
+      bus.emit('setLayerVisible', { layername: 'rq_SZLH', isCheck: false });
+      bus.emit('setLayerVisible', { layername: 'rq_TYLH', isCheck: true });
+      bus.emit('setLayerVisible', { layername: 'rq_LGLH', isCheck: false });
+      bus.emit('setLayerVisible', { layername: 'rq_other', isCheck: false });
 
       break;
     case 3:
-      bus.emit("setLayerVisible", { layername: "rq_all", isCheck: false }); //所有管网rq_all、市政rq_SZLH、庭院rq_TYLH、立管rq_LGLH、其他rq_other
-      bus.emit("setLayerVisible", { layername: "rq_SZLH", isCheck: false });
-      bus.emit("setLayerVisible", { layername: "rq_TYLH", isCheck: false });
-      bus.emit("setLayerVisible", { layername: "rq_LGLH", isCheck: true });
-      bus.emit("setLayerVisible", { layername: "rq_other", isCheck: false });
+      bus.emit('setLayerVisible', { layername: 'rq_all', isCheck: false }); //所有管网rq_all、市政rq_SZLH、庭院rq_TYLH、立管rq_LGLH、其他rq_other
+      bus.emit('setLayerVisible', { layername: 'rq_SZLH', isCheck: false });
+      bus.emit('setLayerVisible', { layername: 'rq_TYLH', isCheck: false });
+      bus.emit('setLayerVisible', { layername: 'rq_LGLH', isCheck: true });
+      bus.emit('setLayerVisible', { layername: 'rq_other', isCheck: false });
       break;
     case 4:
-      bus.emit("setLayerVisible", { layername: "rq_all", isCheck: false }); //所有管网rq_all、市政rq_SZLH、庭院rq_TYLH、立管rq_LGLH、其他rq_other
-      bus.emit("setLayerVisible", { layername: "rq_SZLH", isCheck: false });
-      bus.emit("setLayerVisible", { layername: "rq_TYLH", isCheck: false });
-      bus.emit("setLayerVisible", { layername: "rq_LGLH", isCheck: false });
-      bus.emit("setLayerVisible", { layername: "rq_other", isCheck: true });
+      bus.emit('setLayerVisible', { layername: 'rq_all', isCheck: false }); //所有管网rq_all、市政rq_SZLH、庭院rq_TYLH、立管rq_LGLH、其他rq_other
+      bus.emit('setLayerVisible', { layername: 'rq_SZLH', isCheck: false });
+      bus.emit('setLayerVisible', { layername: 'rq_TYLH', isCheck: false });
+      bus.emit('setLayerVisible', { layername: 'rq_LGLH', isCheck: false });
+      bus.emit('setLayerVisible', { layername: 'rq_other', isCheck: true });
       break;
   }
 };
 
 // 风险
-const FengXianClick = (item) => {
+const FengXianClick = item => {
   let data = {
-    title: item.zb + " 风险监测",
-    comIDs: ["RQ_FengXianJianCe"],
+    title: item.zb + ' 风险监测',
+    comIDs: ['RQ_FengXianJianCe'],
   };
-  bus.emit("publicDialog", data);
+  bus.emit('publicDialog', data);
   // 传给组件数据
 
   setTimeout(() => {
-    bus.emit("getDataListFxjc", item);
+    bus.emit('getDataListFxjc', item);
   }, 500);
 };
 
 // 现场连线
-const XianChangLianXian = (item) => {
-  bus.emit("OpenRY");
+const XianChangLianXian = item => {
+  bus.emit('OpenRY');
 };
 
 watch(
@@ -832,14 +754,13 @@
 );
 //燃气超标
 const showIndexOver = () => {
-  bus.emit("removeMapDatas", AllData.xunChaLayers);
-  let key = "warning_monitor";
-  bus.emit("getGeojsonByType", {
+  bus.emit('removeMapDatas', AllData.xunChaLayers);
+  let key = 'warning_monitor';
+  bus.emit('getGeojsonByType', {
     type: key,
-    callback: (geojson) => {
-      if (!!!geojson.features.length)
-        bus.emit("setGeoJSON", { json: yanAnRQoverindex, key: "warning_monitor" });
-      bus.emit("setLayerVisible", { type: "point", layername: key, isCheck: true });
+    callback: geojson => {
+      if (!!!geojson.features.length) bus.emit('setGeoJSON', { json: yanAnRQoverindex, key: 'warning_monitor' });
+      bus.emit('setLayerVisible', { type: 'point', layername: key, isCheck: true });
     },
   });
   newfiberMapbox.map.easeTo({
@@ -849,14 +770,13 @@
 };
 //燃气告警
 const showIndexWarning = () => {
-  bus.emit("removeMapDatas", AllData.xunChaLayers);
-  let key = "warning_monitor";
-  bus.emit("getGeojsonByType", {
+  bus.emit('removeMapDatas', AllData.xunChaLayers);
+  let key = 'warning_monitor';
+  bus.emit('getGeojsonByType', {
     type: key,
-    callback: (geojson) => {
-      if (!!!geojson.features.length)
-        bus.emit("setGeoJSON", { json: yanAnWarring, key: "warning_monitor" });
-      bus.emit("setLayerVisible", { type: "point", layername: key, isCheck: true });
+    callback: geojson => {
+      if (!!!geojson.features.length) bus.emit('setGeoJSON', { json: yanAnWarring, key: 'warning_monitor' });
+      bus.emit('setLayerVisible', { type: 'point', layername: key, isCheck: true });
     },
   });
   newfiberMapbox.map.easeTo({
@@ -867,47 +787,46 @@
 onMounted(() => {
   let initeRQTimer = setInterval(() => {
     if (!newfiberMapbox) return;
-    if (!newfiberMapbox.map.getLayer("rq_pipeline_info")) return;
-    if (!newfiberMapbox.map.getLayer("sx_ya_smx_rq_point")) return;
+    if (!newfiberMapbox.map.getLayer('rq_pipeline_info')) return;
+    if (!newfiberMapbox.map.getLayer('sx_ya_smx_rq_point')) return;
     newfiberMapbox.map.easeTo({
       center: [109.488, 36.596],
       zoom: 13,
     });
     //告警点事件
-    let warningPoint = newfiberMapbox
-      .getLayers()
-      .filter((feature) => feature.newfiberId == "warning_monitor")[0];
+    let warningPoint = newfiberMapbox.getLayers().filter(feature => feature.newfiberId == 'warning_monitor')[0];
     if (warningPoint) {
-      warningPoint.on("click", (e) => {
+      warningPoint.on('click', e => {
         let popupData = e.feature.properties;
 
-        console.log("popupData---", "告警---------", popupData);
+        console.log('popupData---', '告警---------', popupData);
       });
     }
-    bus.emit("setLayerVisible", { layername: "rq_all", isCheck: true }); //所有管网rq_all、市政rq_SZLH、庭院rq_TYLH、立管rq_LGLH、其他rq_other
+    bus.emit('setLayerVisible', { layername: 'rq_all', isCheck: true }); //所有管网rq_all、市政rq_SZLH、庭院rq_TYLH、立管rq_LGLH、其他rq_other
 
     clearInterval(initeRQTimer);
   }, 100);
   initEcharts(1);
 });
 onBeforeUnmount(() => {
-  bus.emit("setLayerVisible", { layername: "rq_all", isCheck: false });
-  bus.emit("setLayerVisible", { layername: "rq_SZLH", isCheck: false });
-  bus.emit("setLayerVisible", { layername: "rq_TYLH", isCheck: false });
-  bus.emit("setLayerVisible", { layername: "rq_LGLH", isCheck: false });
-  bus.emit("setLayerVisible", { layername: "rq_other", isCheck: false });
-  bus.emit("removeMapDatas", AllData.xunChaLayers);
-  bus.emit("removeMapDatas", ["warning_monitor"]);
-  bus.emit("setLayerVisible", { layername: "warning_monitor", isCheck: false });
-  bus.emit("closeCesiumPopup");
-  if (!!newfiberMapbox.getLayerByName("rqLine")) {
-    newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName("rqLine"));
+  bus.emit('setLayerVisible', { layername: 'rq_all', isCheck: false });
+  bus.emit('setLayerVisible', { layername: 'rq_SZLH', isCheck: false });
+  bus.emit('setLayerVisible', { layername: 'rq_TYLH', isCheck: false });
+  bus.emit('setLayerVisible', { layername: 'rq_LGLH', isCheck: false });
+  bus.emit('setLayerVisible', { layername: 'rq_other', isCheck: false });
+  bus.emit('removeMapDatas', AllData.xunChaLayers);
+  bus.emit('removeMapDatas', ['warning_monitor']);
+  bus.emit('setLayerVisible', { layername: 'warning_monitor', isCheck: false });
+  bus.emit('closeCesiumPopup');
+  bus.emit('SetLayerShow', ['蓝色地图']);
+  if (!!newfiberMapbox.getLayerByName('rqLine')) {
+    newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName('rqLine'));
   }
 });
 </script>
 
 <style lang="scss" scoped>
-@import "@/assets/styles/transition_oneMap.scss";
+@import '@/assets/styles/transition_oneMap.scss';
 #ZHRQ {
   .LeftBox {
     width: 450px;
@@ -915,11 +834,7 @@
     position: absolute;
     left: 10px;
     top: 70px;
-    background: linear-gradient(
-      0deg,
-      rgba(0, 43, 67, 0.8) 0%,
-      rgba(0, 69, 108, 0.8) 100%
-    );
+    background: linear-gradient(0deg, rgba(0, 43, 67, 0.8) 0%, rgba(0, 69, 108, 0.8) 100%);
     border-radius: 6px;
     border: 1px solid #47eef3;
     box-sizing: border-box;
@@ -994,7 +909,7 @@
         width: 100%;
         height: calc(100% - 72px);
         margin-top: 10px;
-        background: url("@/assets/images/Sponge_screen/RQ/Ech.png") no-repeat center;
+        background: url('@/assets/images/Sponge_screen/RQ/Ech.png') no-repeat center;
         position: relative;
 
         .ClickDiv1 {
@@ -1052,7 +967,7 @@
           height: 42px;
           width: calc(50% - 9px);
           display: flex;
-          background: url("@/assets/images/Sponge_screen/RQ/RQ_FX.png") no-repeat center;
+          background: url('@/assets/images/Sponge_screen/RQ/RQ_FX.png') no-repeat center;
           background-size: 100% 100%;
           cursor: pointer;
 
@@ -1284,11 +1199,7 @@
     position: absolute;
     right: 10px;
     top: 70px;
-    background: linear-gradient(
-      0deg,
-      rgba(0, 43, 67, 0.8) 0%,
-      rgba(0, 69, 108, 0.8) 100%
-    );
+    background: linear-gradient(0deg, rgba(0, 43, 67, 0.8) 0%, rgba(0, 69, 108, 0.8) 100%);
     border-radius: 6px;
     border: 1px solid #47eef3;
     box-sizing: border-box;
@@ -1446,11 +1357,7 @@
     position: absolute;
     left: 520px;
     top: 110px;
-    background: linear-gradient(
-      0deg,
-      rgba(0, 43, 67, 0.8) 0%,
-      rgba(0, 69, 108, 0.8) 100%
-    );
+    background: linear-gradient(0deg, rgba(0, 43, 67, 0.8) 0%, rgba(0, 69, 108, 0.8) 100%);
     border-radius: 6px;
     border: 1px solid #47eef3;
     box-sizing: border-box;
@@ -1544,8 +1451,7 @@
     .Box_header {
       width: 100%;
       height: 43px;
-      background: url("@/assets/images/Sponge_screen/Box_HeaderBackground.png") no-repeat
-        center;
+      background: url('@/assets/images/Sponge_screen/Box_HeaderBackground.png') no-repeat center;
       background-size: cover;
       font-family: PangMenZhengDao;
       font-weight: 400;

diff --git a/package.json b/package.json
index 39861ad..e784d82 100644
--- a/package.json
+++ b/package.json
@@ -72,4 +72,4 @@
     "vite-plugin-svg-icons": "2.0.1",
     "vite-plugin-vue-setup-extend": "0.4.0"
   }
-}
+}
\ No newline at end of file
diff --git a/src/assets/images/fhpl/sqjca.png b/src/assets/images/fhpl/sqjca.png
index 0eb531c..00e619c 100644
--- a/src/assets/images/fhpl/sqjca.png
+++ b/src/assets/images/fhpl/sqjca.png
Binary files differ
diff --git a/src/views/oneMap/ConstructionEvaluation/JSPGLeftBox.vue b/src/views/oneMap/ConstructionEvaluation/JSPGLeftBox.vue
index 2a7ff07..3ee47c4 100644
--- a/src/views/oneMap/ConstructionEvaluation/JSPGLeftBox.vue
+++ b/src/views/oneMap/ConstructionEvaluation/JSPGLeftBox.vue
@@ -65,8 +65,9 @@
   </div>
   <!-- 污水收集处理 -->
   <div class="Sewagecollection">
-    <div class="ListBoxHeader" @click="showSewageFectory">
-      <div class="ListBoxHeader_font">污水收集处理</div>
+    <div class="topVehicl flex">
+      <div class="icon"></div>
+      <div class="name">污水收集处理</div>
     </div>
     <div class="wssjEch"></div>
   </div>
@@ -293,7 +294,31 @@
 .Sewagecollection {
   width: 450px;
   height: 25%;
-  // background: yellowgreen;
+
+  .topVehicl {
+    font-family: Source Han Sans CN;
+    font-weight: bold;
+    font-size: 14px;
+    color: #ebfeff;
+    align-items: center;
+    height: 30px;
+    // background: teal;
+    .icon {
+      position: relative;
+      top: -1px;
+      width: 25px;
+      height: 25px;
+      background: url('@/assets/newImgs/xtb_img.png') no-repeat;
+    }
+
+    .name {
+      background: linear-gradient(0deg, rgba(0, 242, 255, 0.5) 0%, rgba(0, 242, 255, 0) 100%);
+      padding: 0px 3px;
+      height: 10px;
+      line-height: 0px;
+      margin-top: 6px;
+    }
+  }
   .wssjEch {
     margin: 5px auto;
     width: 420px;
diff --git a/src/views/oneMap/ConstructionEvaluation/JSPGRightBox.vue b/src/views/oneMap/ConstructionEvaluation/JSPGRightBox.vue
index dbeddc8..3f696aa 100644
--- a/src/views/oneMap/ConstructionEvaluation/JSPGRightBox.vue
+++ b/src/views/oneMap/ConstructionEvaluation/JSPGRightBox.vue
@@ -2,7 +2,7 @@
   <!-- 绩效管理 -->
   <div class="management">
     <div class="ListBoxHeader">
-      <div class="ListBoxHeader_font">绩效管理</div>
+      <div class="ListBoxHeader_font">管理绩效</div>
     </div>
     <!-- 年份切换 -->
     <div class="subRightBox">
diff --git a/src/views/oneMap/FloodStuationReview/sqhgBottomBox.vue b/src/views/oneMap/FloodStuationReview/sqhgBottomBox.vue
index 53d38bb..d178c59 100644
--- a/src/views/oneMap/FloodStuationReview/sqhgBottomBox.vue
+++ b/src/views/oneMap/FloodStuationReview/sqhgBottomBox.vue
@@ -117,8 +117,8 @@
 const ranLeng = [
   [
     { value: '0-0.2', color: 'rgba(7, 213, 118, 0)' },
-    { value: '0.2-5', color: 'rgba(7, 213, 118, 1)' },
-    { value: '5-25', color: 'rgba(38, 129, 240,1)' },
+    { value: '0.2-5', color: 'rgba(38, 129, 240,1)' },
+    { value: '5-25', color: 'rgb(222, 230, 0)' },
     { value: '>25', color: 'rgba(255, 26, 26, 1)' },
   ],
   [
@@ -235,14 +235,18 @@
   stepNum.value = 0;
   hgEngPlay.value = false;
   showRainLegend.value = false;
-  // NewFiberMapUtils.disposeRainfall('')
-  // newfiberMap.setLayersVisible(["krigingImage"],false)
+  // newfiberMapbox.map.removeLayer('canvas-layer0');
+  // newfiberMapbox.map.removeSource('canvas-source0');
   hoursList.value.activeIndex = stepNum.value;
   clearInterval(runDayInterval.value);
   if (runDayInterval.value) {
     runDayInterval.value = null;
     refresh.value = Math.random();
   }
+  // if (newfiberMapbox.map.getLayer('canvas-layer0')) {
+  //   newfiberMapbox.map.removeLayer('canvas-layer0');
+  //   newfiberMapbox.map.removeSource('canvas-source0');
+  // }
 }
 
 function changeChartData() {
@@ -375,10 +379,10 @@
 ];*/
 let colorScale = [
   { value: '0', color: 'rgba(7, 213, 118, 0)' },
-  { value: '0.2', color: 'rgba(7, 213, 118, 1)' },
-  { value: '5', color: 'rgba(38, 129, 240,1)' },
-  { value: '25', color: 'rgba(255, 26, 26, 1)' },
-  { value: '250', color: 'rgba(255, 26, 26, 1)' },
+  { value: '0.2', color: 'rgb(38, 129, 240)' },
+  { value: '5', color: 'rgb(222, 230, 0)' },
+  { value: '25', color: 'rgb(255, 26, 26)' },
+  { value: '250', color: 'rgb(255, 26, 26)' },
 ];
 let imageFiles = [];
 let canvas = [];
diff --git a/src/views/oneMap/FloodStuationReview/xqhgLeftBox.vue b/src/views/oneMap/FloodStuationReview/xqhgLeftBox.vue
index 14170d1..c43cb7b 100644
--- a/src/views/oneMap/FloodStuationReview/xqhgLeftBox.vue
+++ b/src/views/oneMap/FloodStuationReview/xqhgLeftBox.vue
@@ -122,7 +122,7 @@
         background: linear-gradient(0deg, rgba(0, 242, 255, 0.5) 0%, rgba(0, 242, 255, 0) 100%);
         height: 10px;
         line-height: 0px;
-        margin-top: 10px;
+        margin-top: 12px;
       }
     }
     .ScheduEcharts {
@@ -161,7 +161,7 @@
       background: linear-gradient(0deg, rgba(0, 242, 255, 0.5) 0%, rgba(0, 242, 255, 0) 100%);
       height: 10px;
       line-height: 0px;
-      margin-top: 10px;
+      margin-top: 12px;
     }
   }
   .VehiclEcharts {
@@ -196,7 +196,7 @@
       background: linear-gradient(0deg, rgba(0, 242, 255, 0.5) 0%, rgba(0, 242, 255, 0) 100%);
       height: 10px;
       line-height: 0px;
-      margin-top: 10px;
+      margin-top: 12px;
     }
   }
   .MaterialEcharts {
diff --git a/src/views/oneMap/LayerControl/LayerControl.vue b/src/views/oneMap/LayerControl/LayerControl.vue
index 37d0576..cc8e024 100644
--- a/src/views/oneMap/LayerControl/LayerControl.vue
+++ b/src/views/oneMap/LayerControl/LayerControl.vue
@@ -30,29 +30,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 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({
   // 图层控制面板的渲染数据
   /**图层面板数据字段说明
@@ -69,72 +70,90 @@
       Show: true,
       children: [
         {
-          layerName: "中心城区",
-          layerKey: "centerCity",
-          layerIcon: requireTuChengImg("zhongxinchengqu"),
+          layerName: '蓝色地图',
+          layerKey: 'blackMap',
+          layerIcon: requireTuChengImg('zhongxinchengqu'),
+          layerVisible: false,
+        },
+        {
+          layerName: '白色地图',
+          layerKey: 'whiteMap',
+          layerIcon: requireTuChengImg('zhongxinchengqu'),
+          layerVisible: false,
+        },
+        {
+          layerName: '影像地图',
+          layerKey: 'imageMap',
+          layerIcon: requireTuChengImg('zhongxinchengqu'),
+          layerVisible: false,
+        },
+        {
+          layerName: '中心城区',
+          layerKey: 'centerCity',
+          layerIcon: requireTuChengImg('zhongxinchengqu'),
           layerVisible: false,
           dynamicLineData: yanAnCenterCity,
         },
         {
-          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,
         },
@@ -145,38 +164,38 @@
       Show: true,
       children: [
         {
-          layerName: "燃气管网",
-          layerKey: "rq_all",
+          layerName: '燃气管网',
+          layerKey: 'rq_all',
           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,
         },
@@ -187,22 +206,22 @@
       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,
         },
@@ -213,8 +232,8 @@
         //   layerVisible: false,
         // },
         {
-          layerName: "雨水泵站",
-          layerKey: "YSBZ",
+          layerName: '雨水泵站',
+          layerKey: 'YSBZ',
           layerIcon: null,
           layerVisible: false,
           data: yanAnYSBZ,
@@ -226,14 +245,14 @@
       Show: true,
       children: [
         {
-          layerName: "污水分区",
-          layerKey: "sewageArea",
+          layerName: '污水分区',
+          layerKey: 'sewageArea',
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: "污水管网",
-          layerKey: "wsLine1",
+          layerName: '污水管网',
+          layerKey: 'wsLine1',
           layerIcon: null,
           layerVisible: false,
         },
@@ -250,8 +269,8 @@
         //   layerVisible: false,
         // },
         {
-          layerName: "污水处理厂",
-          layerKey: "WSCLC",
+          layerName: '污水处理厂',
+          layerKey: 'WSCLC',
           layerIcon: null,
           layerVisible: false,
           data: yanAnWSCLC,
@@ -263,36 +282,36 @@
       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,
@@ -307,10 +326,10 @@
     .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,
@@ -319,37 +338,79 @@
 watch(
   () => props.ShowTuCheng,
   (newValue, oldValue) => {
-    console.log("ShowTuCheng变化了", newValue, oldValue);
+    console.log('ShowTuCheng变化了', newValue, oldValue);
   },
   { immediate: true, deep: true }
 );
 
-const layerClick = (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 });
+  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 => {
+      oldIds.push(layer.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]));
+    });
+    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');
+    let newMapStyle;
+    let oldMapStyle = newfiberMapbox.map.getStyle();
+    let oldIds = [];
+    oldMapStyle.layers.forEach(layer => {
+      oldIds.push(layer.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]));
+    });
+    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.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.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, // 持续时间，延时
@@ -360,29 +421,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, // 持续时间，延时
@@ -393,22 +454,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, // 持续时间，延时
@@ -419,29 +480,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) : '';
       });
     });
   });
@@ -449,17 +510,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>
 
@@ -470,7 +531,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;
@@ -486,7 +547,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;
diff --git a/src/views/oneMap/components/FXHG.vue b/src/views/oneMap/components/FXHG.vue
index 8924475..44e9c21 100644
--- a/src/views/oneMap/components/FXHG.vue
+++ b/src/views/oneMap/components/FXHG.vue
@@ -40,6 +40,7 @@
   showPanel.value = true;
   showBottom.value = false;
   curType.value = true;
+  bus.emit('SetLayerShow', ['蓝色地图']);
   if (newfiberMapbox.map.getLayer('dynamicRoute')) {
     newfiberMapbox.map.removeLayer('dynamicRoute');
     newfiberMapbox.map.removeLayer('dynamicRoute_Symbol');
@@ -68,6 +69,7 @@
 
   let initePSTimer = setInterval(() => {
     if (!newfiberMapbox) return;
+    bus.emit('SetLayerShow', ['白色地图']);
     bus.emit('setLayerVisible', { layername: 'ysLine1', isCheck: true });
     //bus.emit('setLayerVisible', { layername: 'wsLine1', isCheck: true });
     clearInterval(initePSTimer);
diff --git a/src/views/oneMap/components/ZHHM.vue b/src/views/oneMap/components/ZHHM.vue
index d68bdc5..1f29507 100644
--- a/src/views/oneMap/components/ZHHM.vue
+++ b/src/views/oneMap/components/ZHHM.vue
@@ -648,6 +648,7 @@
     zoom: 12,
     pitch: 55,
   });
+  bus.emit('SetLayerShow', ['蓝色地图']);
   // 先清空
   bus.emit('clearAllLayer');
   let removedLayer = ['HMJZYSQ', 'HMXGYLD', 'HMXDLGC', 'HMXSX', 'GWPCYXF'];
diff --git a/src/views/oneMap/components/ZHHM_JCFX.vue b/src/views/oneMap/components/ZHHM_JCFX.vue
index c420911..42e81e6 100644
--- a/src/views/oneMap/components/ZHHM_JCFX.vue
+++ b/src/views/oneMap/components/ZHHM_JCFX.vue
@@ -411,6 +411,7 @@
 });
 onBeforeUnmount(() => {
   bus.emit('clearAllLayer');
+  bus.emit('SetLayerShow', ['蓝色地图']);
   let removedLayer = ['HMJZYSQ', 'HMXGYLD', 'HMXDLGC', 'HMXSX', 'GWPCYXF'];
   removedLayer.forEach(layer => {
     bus.emit('setLayerVisible', { layername: layer, isCheck: false });
diff --git a/src/views/oneMap/components/ZHHM_JSPG.vue b/src/views/oneMap/components/ZHHM_JSPG.vue
index 7400f1b..df2c85f 100644
--- a/src/views/oneMap/components/ZHHM_JSPG.vue
+++ b/src/views/oneMap/components/ZHHM_JSPG.vue
@@ -53,6 +53,7 @@
 };
 
 onMounted(() => {
+  bus.emit('SetLayerShow', ['蓝色地图']);
   newfiberMapbox.map.easeTo({
     center: [109.488, 36.596],
     zoom: 13,
diff --git a/src/views/oneMap/components/ZHPS.vue b/src/views/oneMap/components/ZHPS.vue
index 7ce8bb0..f09ddbc 100644
--- a/src/views/oneMap/components/ZHPS.vue
+++ b/src/views/oneMap/components/ZHPS.vue
@@ -43,6 +43,7 @@
   });
 });
 onBeforeUnmount(() => {
+  bus.emit('SetLayerShow', ['蓝色地图']);
   // bus.emit('setLayerVisible', { layername: 'ysLine1', isCheck: false });
   // bus.emit('setLayerVisible', { layername: 'wsLine1', isCheck: false });
 });
diff --git a/src/views/oneMap/components/ZHRQ.vue b/src/views/oneMap/components/ZHRQ.vue
index 40a70cc..493c201 100644
--- a/src/views/oneMap/components/ZHRQ.vue
+++ b/src/views/oneMap/components/ZHRQ.vue
@@ -1,31 +1,17 @@
 <template>
   <div id="ZHRQ">
-    <div
-      :class="[
-        'LeftBox',
-        'animate__animated',
-        showPanel ? 'animate__fadeOutLeft' : 'animate__fadeInLeft',
-      ]"
-    >
+    <div :class="['LeftBox', 'animate__animated', showPanel ? 'animate__fadeOutLeft' : 'animate__fadeInLeft']">
       <div class="ComBox LeftBox1_1">
         <div class="Box_header">管道风险评估</div>
         <div class="Box_Body">
           <div class="TJListBox">
             <div class="TJList TJList_RQ" @click="TuChengClick(0)">
-              <img
-                class="TJListImg"
-                src="@/assets/images/Sponge_screen/RQ/RQ_RQ.png"
-                alt=""
-              />
+              <img class="TJListImg" src="@/assets/images/Sponge_screen/RQ/RQ_RQ.png" alt="" />
               <span class="TJListName">燃气管道</span>
               <span class="TJListValue">4549km</span>
             </div>
             <div class="TJList TJList_GZ">
-              <img
-                class="TJListImg"
-                src="@/assets/images/Sponge_screen/RQ/RQ_GZ.png"
-                alt=""
-              />
+              <img class="TJListImg" src="@/assets/images/Sponge_screen/RQ/RQ_GZ.png" alt="" />
               <span class="TJListName">需改造</span>
               <span class="TJListValue">1922km</span>
             </div>
@@ -71,9 +57,7 @@
             </div>
             <div class="tableBody">
               <div class="tableBodyList" v-for="item in AllData.FXJCData">
-                <span class="tableBodyList_span1" @click="FengXianClick(item)">{{
-                  item.zb
-                }}</span>
+                <span class="tableBodyList_span1" @click="FengXianClick(item)">{{ item.zb }}</span>
                 <span class="tableBodyList_span2" @click="FengXianClick(item)"
                   >{{ item.sz }}
                   <el-icon v-if="item.szzt" color="lime" size="14"><Top /> </el-icon>
@@ -81,11 +65,9 @@
                     <Bottom />
                   </el-icon>
                 </span>
-                <span
-                  class="tableBodyList_span3"
-                  :class="item.zt == 0 ? 'YJClass' : ''"
-                  >{{ item.zt == 0 ? "预警" : "正常" }}</span
-                >
+                <span class="tableBodyList_span3" :class="item.zt == 0 ? 'YJClass' : ''">{{
+                  item.zt == 0 ? '预警' : '正常'
+                }}</span>
                 <span class="tableBodyList_span4" @click="PaiFa(item)">派发</span>
               </div>
             </div>
@@ -110,13 +92,7 @@
         </div>
       </div>
     </div>
-    <div
-      :class="[
-        'RightBox',
-        'animate__animated',
-        showPanel ? 'animate__fadeOutRight' : 'animate__fadeInRight',
-      ]"
-    >
+    <div :class="['RightBox', 'animate__animated', showPanel ? 'animate__fadeOutRight' : 'animate__fadeInRight']">
       <div class="ComBox RightBox1_1">
         <div class="Box_header">辅助决策</div>
         <div class="Box_Body">
@@ -138,16 +114,10 @@
               <span class="JCListBox_List_value color_red">{{ item.yp }}</span>
             </div>
             <div class="JCListBox_List JCListBox_List_BTN">
-              <el-button
-                style="background: #03b6a0; color: white; border: none"
-                size="small"
-                @click="GongDanPaiFa(item)"
+              <el-button style="background: #03b6a0; color: white; border: none" size="small" @click="GongDanPaiFa(item)"
                 >工单派发</el-button
               >
-              <el-button
-                style="background: #03b6a0; color: white; border: none"
-                size="small"
-                @click="XianChangLianXian(item)"
+              <el-button style="background: #03b6a0; color: white; border: none" size="small" @click="XianChangLianXian(item)"
                 >现场联线</el-button
               >
             </div>
@@ -158,18 +128,12 @@
         <div class="Box_header">巡查反馈</div>
         <div class="Box_Body">
           <div class="FK_headerBox">
-            <div class="FK_headerBox_list" @click="dealOrNoDeal(1)">
-              <span class="FK_headerBox_list_colorBox1"></span> 未处理
-            </div>
-            <div class="FK_headerBox_list" @click="dealOrNoDeal(2)">
-              <span class="FK_headerBox_list_colorBox2"></span> 已处理
-            </div>
+            <div class="FK_headerBox_list" @click="dealOrNoDeal(1)"><span class="FK_headerBox_list_colorBox1"></span> 未处理</div>
+            <div class="FK_headerBox_list" @click="dealOrNoDeal(2)"><span class="FK_headerBox_list_colorBox2"></span> 已处理</div>
           </div>
           <div class="FK_bodyBox">
             <div class="FK_bodyBox_list" v-for="item in AllData.XCFKData">
-              <span class="FK_bodyBox_list_label" @click="XunChaFanKui(item)">{{
-                item.name
-              }}</span>
+              <span class="FK_bodyBox_list_label" @click="XunChaFanKui(item)">{{ item.name }}</span>
               <div class="FK_BigBox">
                 <div class="FK_CenBox1" :style="getWidth(item, 1)">{{ item.num1 }}</div>
                 <div class="FK_CenBox2" :style="getWidth(item, 2)">{{ item.num2 }}</div>
@@ -179,13 +143,7 @@
         </div>
       </div>
     </div>
-    <div
-      :class="[
-        'TopBox',
-        'animate__animated',
-        showPanel ? 'animate__fadeOutUp' : 'animate__fadeInDown',
-      ]"
-    >
+    <div :class="['TopBox', 'animate__animated', showPanel ? 'animate__fadeOutUp' : 'animate__fadeInDown']">
       <div class="TopTableHeader">
         <span class="TopTableListSpan TopTableListSpan1">时间</span>
         <span class="TopTableListSpan TopTableListSpan2">事件明细</span>
@@ -195,27 +153,15 @@
         <span class="TopTableListSpan TopTableListSpan6">督办</span>
       </div>
       <!-- <div class="TopTableBody"> -->
-      <Vue3SeamlessScroll
-        :list="AllData.TopTableData"
-        :singleHeight="34"
-        :hover="true"
-        class="TopTableBody"
-      >
+      <Vue3SeamlessScroll :list="AllData.TopTableData" :singleHeight="34" :hover="true" class="TopTableBody">
         <div class="TopTableBody_list" v-for="item in AllData.TopTableData">
           <span class="TopTableListSpan TopTableListSpan1">{{ item.sj }}</span>
           <span class="TopTableListSpan TopTableListSpan2">{{ item.mx }}</span>
           <span class="TopTableListSpan TopTableListSpan3">{{ item.dd }}</span>
-          <span class="TopTableListSpan TopTableListSpan4">{{
-            item.zt == 0 ? "未处理" : "已处理"
-          }}</span>
+          <span class="TopTableListSpan TopTableListSpan4">{{ item.zt == 0 ? '未处理' : '已处理' }}</span>
           <span class="TopTableListSpan TopTableListSpan5">{{ item.dw }}</span>
           <span class="TopTableListSpan TopTableListSpan6">
-            <img
-              class="TopTableListSpanImg2"
-              src="@/assets/images/Sponge_screen/RQ/RQ_XX.png"
-              alt=""
-              @click="PaiFa(item)"
-            />
+            <img class="TopTableListSpanImg2" src="@/assets/images/Sponge_screen/RQ/RQ_XX.png" alt="" @click="PaiFa(item)" />
             <img
               class="TopTableListSpanImg"
               src="@/assets/images/Sponge_screen/RQ/RQ_SP.png"
@@ -231,49 +177,49 @@
 </template>
 
 <script setup name="ZHRQ">
-import { ref, reactive, toRefs, onMounted, onBeforeUnmount, nextTick } from "vue";
+import { ref, reactive, toRefs, onMounted, onBeforeUnmount, nextTick } from 'vue';
 
-import * as echarts from "echarts";
-import bus from "@/bus";
-import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
-import sheBeiLost from "@/assets/sheBeiLost.json";
-import xiaXian from "@/assets/xiaXian.json";
-import yiBian from "@/assets/yiBian.json";
-import zaWuDuiFang from "@/assets/zaWuDuiFang.json";
-import rq_QiTa from "@/assets/rq_QiTa.json";
-import no_sheBeiLost from "@/assets/no_sheBeiLost.json";
-import no_xiaXian from "@/assets/no_xiaXian.json";
-import no_yiBian from "@/assets/no_yiBian.json";
-import no_zaWuDuiFang from "@/assets/no_zaWuDuiFang.json";
-import no_rq_QiTa from "@/assets/no_rq_QiTa.json";
-import yanAnRQoverindex from "@/assets/yanAnRQoverindex.json";
-import yanAnWarring from "@/assets/yanAnWarring.json";
+import * as echarts from 'echarts';
+import bus from '@/bus';
+import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
+import sheBeiLost from '@/assets/sheBeiLost.json';
+import xiaXian from '@/assets/xiaXian.json';
+import yiBian from '@/assets/yiBian.json';
+import zaWuDuiFang from '@/assets/zaWuDuiFang.json';
+import rq_QiTa from '@/assets/rq_QiTa.json';
+import no_sheBeiLost from '@/assets/no_sheBeiLost.json';
+import no_xiaXian from '@/assets/no_xiaXian.json';
+import no_yiBian from '@/assets/no_yiBian.json';
+import no_zaWuDuiFang from '@/assets/no_zaWuDuiFang.json';
+import no_rq_QiTa from '@/assets/no_rq_QiTa.json';
+import yanAnRQoverindex from '@/assets/yanAnRQoverindex.json';
+import yanAnWarring from '@/assets/yanAnWarring.json';
 
 const AllData = reactive({
   xunChaStatic: null,
   xunChaLayers: [
-    "alreadyDeal_DF",
-    "alreadyDeal_DS",
-    "alreadyDeal_XX",
-    "alreadyDeal_YB",
-    "alreadyDeal_QT",
-    "noDeal_DF",
-    "noDeal_DS",
-    "noDeall_XX",
-    "noDeal_YB",
-    "noDeal_QT",
+    'alreadyDeal_DF',
+    'alreadyDeal_DS',
+    'alreadyDeal_XX',
+    'alreadyDeal_YB',
+    'alreadyDeal_QT',
+    'noDeal_DF',
+    'noDeal_DS',
+    'noDeall_XX',
+    'noDeal_YB',
+    'noDeal_QT',
   ],
   ChangeData: [
     {
-      name: "枣园",
+      name: '枣园',
       id: 1,
     },
     {
-      name: "杨家湾",
+      name: '杨家湾',
       id: 2,
     },
     {
-      name: "丰富川",
+      name: '丰富川',
       id: 3,
     },
   ],
@@ -281,38 +227,38 @@
   // 风险监测
   FXJCData: [
     {
-      zb: "甲烷浓度",
-      sz: "3%",
+      zb: '甲烷浓度',
+      sz: '3%',
       szzt: true,
       zt: 0, //0预警 1 正常
-      value: "JWND",
+      value: 'JWND',
     },
     {
-      zb: "压力",
-      sz: "5MPa",
+      zb: '压力',
+      sz: '5MPa',
       szzt: false,
       zt: 1, //0预警 1 正常
-      value: "YL",
+      value: 'YL',
     },
     {
-      zb: "温度",
-      sz: "25C°",
+      zb: '温度',
+      sz: '25C°',
       szzt: true,
       zt: 1, //0预警 1 正常
-      value: "WD",
+      value: 'WD',
     },
   ],
   YJChangeData: [
     {
-      name: "综合",
+      name: '综合',
       id: 1,
     },
     {
-      name: "压力",
+      name: '压力',
       id: 2,
     },
     {
-      name: "温度",
+      name: '温度',
       id: 3,
     },
   ],
@@ -320,51 +266,51 @@
   //辅助决策
   JCData: [
     {
-      qy: "宝塔区凤凰山街道二道街",
-      tz: "压力监测异常波动",
+      qy: '宝塔区凤凰山街道二道街',
+      tz: '压力监测异常波动',
       sj: 5,
-      yp: "设施故障",
-      value: "001", //语音识别内容编码-前段自己设置的,后期项目有接口就直接替换数据唯一id
+      yp: '设施故障',
+      value: '001', //语音识别内容编码-前段自己设置的,后期项目有接口就直接替换数据唯一id
     },
     {
-      qy: "宝塔区凤凰山街道二道街",
-      tz: "燃气管道压力过大",
+      qy: '宝塔区凤凰山街道二道街',
+      tz: '燃气管道压力过大',
       sj: 5,
-      yp: "燃气爆管风险",
-      value: "002",
+      yp: '燃气爆管风险',
+      value: '002',
     },
     {
-      qy: "宝塔区凤凰山街道二道街",
-      tz: "高峰期流量持续降低",
+      qy: '宝塔区凤凰山街道二道街',
+      tz: '高峰期流量持续降低',
       sj: 4,
-      yp: "燃气泄漏风险",
-      value: "003",
+      yp: '燃气泄漏风险',
+      value: '003',
     },
   ],
   // 巡查反馈
   XCFKData: [
     {
-      name: "堆放杂物",
+      name: '堆放杂物',
       num1: 20,
       num2: 80,
     },
     {
-      name: "设备丢失",
+      name: '设备丢失',
       num1: 12,
       num2: 88,
     },
     {
-      name: "下陷",
+      name: '下陷',
       num1: 32,
       num2: 68,
     },
     {
-      name: "异变",
+      name: '异变',
       num1: 30,
       num2: 70,
     },
     {
-      name: "其他",
+      name: '其他',
       num1: 20,
       num2: 80,
     },
@@ -372,35 +318,35 @@
   // 顶部表格数据
   TopTableData: [
     {
-      sj: "2024-09-26 10:00:29",
-      mx: "燃气常规检查发现泄漏",
-      dd: "宝塔区凤凰山街道二道街",
+      sj: '2024-09-26 10:00:29',
+      mx: '燃气常规检查发现泄漏',
+      dd: '宝塔区凤凰山街道二道街',
       zt: 0, //0未处理 1已处理
-      dw: "延安市燃气总公司",
+      dw: '延安市燃气总公司',
       value: null,
     },
     {
-      sj: "2024-09-27 16:10:248",
-      mx: "燃气常规检查发现泄漏",
-      dd: "宝塔区凤凰山街道二道街",
+      sj: '2024-09-27 16:10:248',
+      mx: '燃气常规检查发现泄漏',
+      dd: '宝塔区凤凰山街道二道街',
       zt: 0, //0未处理 1已处理
-      dw: "延安市燃气总公司",
+      dw: '延安市燃气总公司',
       value: null,
     },
     {
-      sj: "2024-09-26 10:00:29",
-      mx: "燃气常规检查发现泄漏",
-      dd: "宝塔区凤凰山街道二道街",
+      sj: '2024-09-26 10:00:29',
+      mx: '燃气常规检查发现泄漏',
+      dd: '宝塔区凤凰山街道二道街',
       zt: 0, //0未处理 1已处理
-      dw: "延安市燃气总公司",
+      dw: '延安市燃气总公司',
       value: null,
     },
     {
-      sj: "2024-09-27 16:10:248",
-      mx: "燃气常规检查发现泄漏",
-      dd: "宝塔区凤凰山街道二道街",
+      sj: '2024-09-27 16:10:248',
+      mx: '燃气常规检查发现泄漏',
+      dd: '宝塔区凤凰山街道二道街',
       zt: 0, //0未处理 1已处理
-      dw: "延安市燃气总公司",
+      dw: '延安市燃气总公司',
       value: null,
     },
   ],
@@ -417,7 +363,7 @@
   },
 });
 // 初始化预警统计的Echarts
-const initEcharts = (id) => {
+const initEcharts = id => {
   AllData.YJChangeIndex = id;
   let Data1 = [];
   let Data2 = [];
@@ -437,41 +383,41 @@
   if (!!myChart.value) {
     myChart.value.dispose();
   }
-  myChart.value = echarts.init(document.getElementById("YJEchartsBox"));
-  myChart.value.off("click");
+  myChart.value = echarts.init(document.getElementById('YJEchartsBox'));
+  myChart.value.off('click');
   myChart.value.setOption({
-    color: ["#18A7F2", "#1AF7AA"],
+    color: ['#18A7F2', '#1AF7AA'],
     tooltip: {
-      trigger: "axis",
+      trigger: 'axis',
     },
     grid: {
-      top: "30%",
-      left: "3%",
-      right: "4%",
-      bottom: "3%",
+      top: '30%',
+      left: '3%',
+      right: '4%',
+      bottom: '3%',
       containLabel: true,
     },
     legend: {
-      data: ["预警次数", "持续时长"],
+      data: ['预警次数', '持续时长'],
       textStyle: {
-        color: "#fffd", // 图例文字颜色
+        color: '#fffd', // 图例文字颜色
       },
-      x: "40",
-      y: "10",
+      x: '40',
+      y: '10',
     },
     xAxis: [
       {
-        type: "category",
-        data: ["今日", "09/27", "09/26", "09/25", "09/24", "09/23", "09/22"],
+        type: 'category',
+        data: ['今日', '09/27', '09/26', '09/25', '09/24', '09/23', '09/22'],
         axisPointer: {
-          type: "shadow",
+          type: 'shadow',
         },
         textStyle: {
-          color: "#EBFEFF",
+          color: '#EBFEFF',
         },
         axisLine: {
           lineStyle: {
-            color: "#EBFEFF",
+            color: '#EBFEFF',
           },
         },
         // boundaryGap: false,
@@ -479,57 +425,57 @@
     ],
     yAxis: [
       {
-        type: "value",
-        name: "预警次数",
+        type: 'value',
+        name: '预警次数',
         min: 0,
         max: 12,
         interval: 2,
         axisLabel: {
-          formatter: "{value}",
+          formatter: '{value}',
         },
         axisLine: {
           lineStyle: {
-            color: "#AAC1CF",
+            color: '#AAC1CF',
           },
         },
         splitLine: {
           lineStyle: {
             // 使用深浅的间隔色
-            color: ["#184E5A"],
+            color: ['#184E5A'],
           },
         },
       },
       {
-        type: "value",
-        name: "持续时长",
+        type: 'value',
+        name: '持续时长',
         min: 0,
         max: 30,
         interval: 5,
         axisLabel: {
-          formatter: "{value}",
+          formatter: '{value}',
         },
         axisLine: {
           lineStyle: {
-            color: "#AAC1CF",
+            color: '#AAC1CF',
           },
         },
         splitLine: {
           lineStyle: {
             // 使用深浅的间隔色
-            color: ["#184E5A"],
+            color: ['#184E5A'],
           },
         },
       },
     ],
     series: [
       {
-        name: "预警次数",
-        type: "bar",
-        barWidth: "10px",
+        name: '预警次数',
+        type: 'bar',
+        barWidth: '10px',
         showBackground: true,
         tooltip: {
           valueFormatter: function (value) {
-            return value + " 次";
+            return value + ' 次';
           },
         },
         itemStyle: {
@@ -539,12 +485,12 @@
         data: Data1,
       },
       {
-        name: "持续时长",
-        type: "line",
+        name: '持续时长',
+        type: 'line',
         yAxisIndex: 1,
         tooltip: {
           valueFormatter: function (value) {
-            return value + "min";
+            return value + 'min';
           },
         },
         areaStyle: {
@@ -552,11 +498,11 @@
           color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
             {
               offset: 0,
-              color: "#1AF7AA",
+              color: '#1AF7AA',
             },
             {
               offset: 1,
-              color: "#1AF7AA00",
+              color: '#1AF7AA00',
             },
           ]),
         },
@@ -565,19 +511,19 @@
       },
     ],
   });
-  myChart.value.on("click", (param) => {
+  myChart.value.on('click', param => {
     console.log(param);
     let data = {
-      title: "风险监测",
-      comIDs: ["RQ_FengXianJianCe"],
+      title: '风险监测',
+      comIDs: ['RQ_FengXianJianCe'],
     };
-    bus.emit("publicDialog", data);
+    bus.emit('publicDialog', data);
     let a = {
-      value: "全部",
-      endTime: "2024-10-05",
+      value: '全部',
+      endTime: '2024-10-05',
     };
     setTimeout(() => {
-      bus.emit("getDataListFxjc", a);
+      bus.emit('getDataListFxjc', a);
     }, 500);
   });
 
@@ -591,7 +537,7 @@
     i++;
     if (i == length) i = 0;
     myChart.value.dispatchAction({
-      type: "showTip",
+      type: 'showTip',
       seriesIndex: 0,
       dataIndex: i,
     });
@@ -608,14 +554,14 @@
   return `width:${widthNum}%`;
 };
 // 工单派发
-const GongDanPaiFa = (item) => {
+const GongDanPaiFa = item => {
   console.log(item);
   let data = {
     title: item.qy,
-    comIDs: ["gdpf"],
+    comIDs: ['gdpf'],
     getSiteId: item.value,
   };
-  bus.emit("publicDialog", data);
+  bus.emit('publicDialog', data);
 };
 // // 风险
 // const FengXianClick = (item) => {
@@ -627,56 +573,52 @@
 //   bus.emit("publicDialog", data);
 // };
 // 风险监测派发
-const PaiFa = (item) => {
+const PaiFa = item => {
   console.log(item);
   let data = {
-    title: "智慧外呼",
-    comIDs: ["RQ_ZhiHuiWaiHu"],
+    title: '智慧外呼',
+    comIDs: ['RQ_ZhiHuiWaiHu'],
     getSiteId: item.value,
   };
-  bus.emit("publicDialog", data);
+  bus.emit('publicDialog', data);
 };
 //巡查反馈处理、未处理
-const dealOrNoDeal = (item) => {
+const dealOrNoDeal = item => {
   AllData.xunChaStatic = item;
   newfiberMapbox.map.easeTo({
     center: [109.488, 36.596],
     zoom: 12,
     pitch: 55,
   });
-  bus.emit("removeMapDatas", ["warning_monitor"]);
+  bus.emit('removeMapDatas', ['warning_monitor']);
   if (item == 1) {
-    let removedLayer = AllData.xunChaLayers.filter((layer) => layer.includes("noDeal"));
-    let selectedLayer = AllData.xunChaLayers.filter((layer) =>
-      layer.includes("alreadyDeal")
-    );
-    bus.emit("removeMapDatas", AllData.xunChaLayers);
-    bus.emit("setGeoJSON", { json: zaWuDuiFang, key: "alreadyDeal_DF" });
-    bus.emit("setGeoJSON", { json: sheBeiLost, key: "alreadyDeal_DS" });
-    bus.emit("setGeoJSON", { json: xiaXian, key: "alreadyDeal_XX" });
-    bus.emit("setGeoJSON", { json: yiBian, key: "alreadyDeal_YB" });
-    bus.emit("setGeoJSON", { json: rq_QiTa, key: "alreadyDeal_QT" });
-    selectedLayer.forEach((layer) => {
-      bus.emit("setLayerVisible", { layername: layer, isCheck: true });
+    let removedLayer = AllData.xunChaLayers.filter(layer => layer.includes('noDeal'));
+    let selectedLayer = AllData.xunChaLayers.filter(layer => layer.includes('alreadyDeal'));
+    bus.emit('removeMapDatas', AllData.xunChaLayers);
+    bus.emit('setGeoJSON', { json: zaWuDuiFang, key: 'alreadyDeal_DF' });
+    bus.emit('setGeoJSON', { json: sheBeiLost, key: 'alreadyDeal_DS' });
+    bus.emit('setGeoJSON', { json: xiaXian, key: 'alreadyDeal_XX' });
+    bus.emit('setGeoJSON', { json: yiBian, key: 'alreadyDeal_YB' });
+    bus.emit('setGeoJSON', { json: rq_QiTa, key: 'alreadyDeal_QT' });
+    selectedLayer.forEach(layer => {
+      bus.emit('setLayerVisible', { layername: layer, isCheck: true });
     });
   } else {
-    let removedLayer = AllData.xunChaLayers.filter((layer) =>
-      layer.includes("alreadyDeal")
-    );
-    let selectedLayer = AllData.xunChaLayers.filter((layer) => layer.includes("noDeal"));
-    bus.emit("removeMapDatas", AllData.xunChaLayers);
-    bus.emit("setGeoJSON", { json: no_zaWuDuiFang, key: "onDeal_DF" });
-    bus.emit("setGeoJSON", { json: no_sheBeiLost, key: "onDeal_DS" });
-    bus.emit("setGeoJSON", { json: no_xiaXian, key: "onDeal_XX" });
-    bus.emit("setGeoJSON", { json: no_yiBian, key: "onDeal_YB" });
-    bus.emit("setGeoJSON", { json: no_rq_QiTa, key: "onDeal_QT" });
-    selectedLayer.forEach((layer) => {
-      bus.emit("setLayerVisible", { layername: layer, isCheck: true });
+    let removedLayer = AllData.xunChaLayers.filter(layer => layer.includes('alreadyDeal'));
+    let selectedLayer = AllData.xunChaLayers.filter(layer => layer.includes('noDeal'));
+    bus.emit('removeMapDatas', AllData.xunChaLayers);
+    bus.emit('setGeoJSON', { json: no_zaWuDuiFang, key: 'onDeal_DF' });
+    bus.emit('setGeoJSON', { json: no_sheBeiLost, key: 'onDeal_DS' });
+    bus.emit('setGeoJSON', { json: no_xiaXian, key: 'onDeal_XX' });
+    bus.emit('setGeoJSON', { json: no_yiBian, key: 'onDeal_YB' });
+    bus.emit('setGeoJSON', { json: no_rq_QiTa, key: 'onDeal_QT' });
+    selectedLayer.forEach(layer => {
+      bus.emit('setLayerVisible', { layername: layer, isCheck: true });
     });
   }
 };
 // 巡查反馈
-const XunChaFanKui = (item) => {
+const XunChaFanKui = item => {
   let removedLayer = [];
   let selectedLayer = [];
   newfiberMapbox.map.easeTo({
@@ -685,80 +627,60 @@
     pitch: 55,
   });
   switch (item.name) {
-    case "堆放杂物":
-      removedLayer = AllData.xunChaLayers.filter(
-        (layer) => layer != "alreadyDeal_DF" && layer != "noDeal_DF"
-      );
-      selectedLayer = AllData.xunChaLayers.filter(
-        (layer) => layer == "alreadyDeal_DF" || layer == "noDeal_DF"
-      );
-      selectedLayer.forEach((layer) => {
-        bus.emit("setLayerVisible", { layername: layer, isCheck: true });
+    case '堆放杂物':
+      removedLayer = AllData.xunChaLayers.filter(layer => layer != 'alreadyDeal_DF' && layer != 'noDeal_DF');
+      selectedLayer = AllData.xunChaLayers.filter(layer => layer == 'alreadyDeal_DF' || layer == 'noDeal_DF');
+      selectedLayer.forEach(layer => {
+        bus.emit('setLayerVisible', { layername: layer, isCheck: true });
       });
-      removedLayer.forEach((layer) => {
-        bus.emit("setLayerVisible", { layername: layer, isCheck: false });
+      removedLayer.forEach(layer => {
+        bus.emit('setLayerVisible', { layername: layer, isCheck: false });
       });
       break;
-    case "设备丢失":
-      removedLayer = AllData.xunChaLayers.filter(
-        (layer) => layer != "alreadyDeal_DS" && layer != "noDeal_DS"
-      );
-      selectedLayer = AllData.xunChaLayers.filter(
-        (layer) => layer == "alreadyDeal_DS" || layer == "noDeal_DS"
-      );
-      selectedLayer.forEach((layer) => {
-        bus.emit("setLayerVisible", { layername: layer, isCheck: true });
+    case '设备丢失':
+      removedLayer = AllData.xunChaLayers.filter(layer => layer != 'alreadyDeal_DS' && layer != 'noDeal_DS');
+      selectedLayer = AllData.xunChaLayers.filter(layer => layer == 'alreadyDeal_DS' || layer == 'noDeal_DS');
+      selectedLayer.forEach(layer => {
+        bus.emit('setLayerVisible', { layername: layer, isCheck: true });
       });
-      removedLayer.forEach((layer) => {
-        bus.emit("setLayerVisible", { layername: layer, isCheck: false });
+      removedLayer.forEach(layer => {
+        bus.emit('setLayerVisible', { layername: layer, isCheck: false });
       });
       break;
-    case "下陷":
-      removedLayer = AllData.xunChaLayers.filter(
-        (layer) => layer != "alreadyDeal_XX" && layer != "noDeal_XX"
-      );
-      selectedLayer = AllData.xunChaLayers.filter(
-        (layer) => layer == "alreadyDeal_XX" || layer == "noDeal_XX"
-      );
-      selectedLayer.forEach((layer) => {
-        bus.emit("setLayerVisible", { layername: layer, isCheck: true });
+    case '下陷':
+      removedLayer = AllData.xunChaLayers.filter(layer => layer != 'alreadyDeal_XX' && layer != 'noDeal_XX');
+      selectedLayer = AllData.xunChaLayers.filter(layer => layer == 'alreadyDeal_XX' || layer == 'noDeal_XX');
+      selectedLayer.forEach(layer => {
+        bus.emit('setLayerVisible', { layername: layer, isCheck: true });
       });
-      removedLayer.forEach((layer) => {
-        bus.emit("setLayerVisible", { layername: layer, isCheck: false });
+      removedLayer.forEach(layer => {
+        bus.emit('setLayerVisible', { layername: layer, isCheck: false });
       });
       break;
-    case "异变":
-      removedLayer = AllData.xunChaLayers.filter(
-        (layer) => layer != "alreadyDeal_YB" && layer != "noDeal_YB"
-      );
-      selectedLayer = AllData.xunChaLayers.filter(
-        (layer) => layer == "alreadyDeal_YB" || layer == "noDeal_YB"
-      );
-      selectedLayer.forEach((layer) => {
-        bus.emit("setLayerVisible", { layername: layer, isCheck: true });
+    case '异变':
+      removedLayer = AllData.xunChaLayers.filter(layer => layer != 'alreadyDeal_YB' && layer != 'noDeal_YB');
+      selectedLayer = AllData.xunChaLayers.filter(layer => layer == 'alreadyDeal_YB' || layer == 'noDeal_YB');
+      selectedLayer.forEach(layer => {
+        bus.emit('setLayerVisible', { layername: layer, isCheck: true });
       });
-      removedLayer.forEach((layer) => {
-        bus.emit("setLayerVisible", { layername: layer, isCheck: false });
+      removedLayer.forEach(layer => {
+        bus.emit('setLayerVisible', { layername: layer, isCheck: false });
       });
       break;
-    case "其他":
-      removedLayer = AllData.xunChaLayers.filter(
-        (layer) => layer != "alreadyDeal_QT" && layer != "noDeal_QT"
-      );
-      selectedLayer = AllData.xunChaLayers.filter(
-        (layer) => layer == "alreadyDeal_QT" || layer == "noDeal_QT"
-      );
-      selectedLayer.forEach((layer) => {
-        bus.emit("setLayerVisible", { layername: layer, isCheck: true });
+    case '其他':
+      removedLayer = AllData.xunChaLayers.filter(layer => layer != 'alreadyDeal_QT' && layer != 'noDeal_QT');
+      selectedLayer = AllData.xunChaLayers.filter(layer => layer == 'alreadyDeal_QT' || layer == 'noDeal_QT');
+      selectedLayer.forEach(layer => {
+        bus.emit('setLayerVisible', { layername: layer, isCheck: true });
       });
-      removedLayer.forEach((layer) => {
-        bus.emit("setLayerVisible", { layername: layer, isCheck: false });
+      removedLayer.forEach(layer => {
+        bus.emit('setLayerVisible', { layername: layer, isCheck: false });
       });
       break;
   }
 };
 // 风险评估
-const TuChengClick = (item) => {
+const TuChengClick = item => {
   newfiberMapbox.map.easeTo({
     center: [109.488, 36.596],
     zoom: 12,
@@ -766,61 +688,61 @@
   });
   switch (item) {
     case 0:
-      bus.emit("setLayerVisible", { layername: "rq_SZLH", isCheck: false });
-      bus.emit("setLayerVisible", { layername: "rq_TYLH", isCheck: false });
-      bus.emit("setLayerVisible", { layername: "rq_LGLH", isCheck: false });
-      bus.emit("setLayerVisible", { layername: "rq_other", isCheck: false });
-      bus.emit("setLayerVisible", { layername: "rq_all", isCheck: true }); //所有管网rq_all、市政rq_SZLH、庭院rq_TYLH、立管rq_LGLH、其他rq_other
+      bus.emit('setLayerVisible', { layername: 'rq_SZLH', isCheck: false });
+      bus.emit('setLayerVisible', { layername: 'rq_TYLH', isCheck: false });
+      bus.emit('setLayerVisible', { layername: 'rq_LGLH', isCheck: false });
+      bus.emit('setLayerVisible', { layername: 'rq_other', isCheck: false });
+      bus.emit('setLayerVisible', { layername: 'rq_all', isCheck: true }); //所有管网rq_all、市政rq_SZLH、庭院rq_TYLH、立管rq_LGLH、其他rq_other
       break;
     case 1:
-      bus.emit("setLayerVisible", { layername: "rq_all", isCheck: false }); //所有管网rq_all、市政rq_SZLH、庭院rq_TYLH、立管rq_LGLH、其他rq_other
-      bus.emit("setLayerVisible", { layername: "rq_SZLH", isCheck: true });
-      bus.emit("setLayerVisible", { layername: "rq_TYLH", isCheck: false });
-      bus.emit("setLayerVisible", { layername: "rq_LGLH", isCheck: false });
-      bus.emit("setLayerVisible", { layername: "rq_other", isCheck: false });
+      bus.emit('setLayerVisible', { layername: 'rq_all', isCheck: false }); //所有管网rq_all、市政rq_SZLH、庭院rq_TYLH、立管rq_LGLH、其他rq_other
+      bus.emit('setLayerVisible', { layername: 'rq_SZLH', isCheck: true });
+      bus.emit('setLayerVisible', { layername: 'rq_TYLH', isCheck: false });
+      bus.emit('setLayerVisible', { layername: 'rq_LGLH', isCheck: false });
+      bus.emit('setLayerVisible', { layername: 'rq_other', isCheck: false });
       break;
     case 2:
-      bus.emit("setLayerVisible", { layername: "rq_all", isCheck: false }); //所有管网rq_all、市政rq_SZLH、庭院rq_TYLH、立管rq_LGLH、其他rq_other
-      bus.emit("setLayerVisible", { layername: "rq_SZLH", isCheck: false });
-      bus.emit("setLayerVisible", { layername: "rq_TYLH", isCheck: true });
-      bus.emit("setLayerVisible", { layername: "rq_LGLH", isCheck: false });
-      bus.emit("setLayerVisible", { layername: "rq_other", isCheck: false });
+      bus.emit('setLayerVisible', { layername: 'rq_all', isCheck: false }); //所有管网rq_all、市政rq_SZLH、庭院rq_TYLH、立管rq_LGLH、其他rq_other
+      bus.emit('setLayerVisible', { layername: 'rq_SZLH', isCheck: false });
+      bus.emit('setLayerVisible', { layername: 'rq_TYLH', isCheck: true });
+      bus.emit('setLayerVisible', { layername: 'rq_LGLH', isCheck: false });
+      bus.emit('setLayerVisible', { layername: 'rq_other', isCheck: false });
 
       break;
     case 3:
-      bus.emit("setLayerVisible", { layername: "rq_all", isCheck: false }); //所有管网rq_all、市政rq_SZLH、庭院rq_TYLH、立管rq_LGLH、其他rq_other
-      bus.emit("setLayerVisible", { layername: "rq_SZLH", isCheck: false });
-      bus.emit("setLayerVisible", { layername: "rq_TYLH", isCheck: false });
-      bus.emit("setLayerVisible", { layername: "rq_LGLH", isCheck: true });
-      bus.emit("setLayerVisible", { layername: "rq_other", isCheck: false });
+      bus.emit('setLayerVisible', { layername: 'rq_all', isCheck: false }); //所有管网rq_all、市政rq_SZLH、庭院rq_TYLH、立管rq_LGLH、其他rq_other
+      bus.emit('setLayerVisible', { layername: 'rq_SZLH', isCheck: false });
+      bus.emit('setLayerVisible', { layername: 'rq_TYLH', isCheck: false });
+      bus.emit('setLayerVisible', { layername: 'rq_LGLH', isCheck: true });
+      bus.emit('setLayerVisible', { layername: 'rq_other', isCheck: false });
       break;
     case 4:
-      bus.emit("setLayerVisible", { layername: "rq_all", isCheck: false }); //所有管网rq_all、市政rq_SZLH、庭院rq_TYLH、立管rq_LGLH、其他rq_other
-      bus.emit("setLayerVisible", { layername: "rq_SZLH", isCheck: false });
-      bus.emit("setLayerVisible", { layername: "rq_TYLH", isCheck: false });
-      bus.emit("setLayerVisible", { layername: "rq_LGLH", isCheck: false });
-      bus.emit("setLayerVisible", { layername: "rq_other", isCheck: true });
+      bus.emit('setLayerVisible', { layername: 'rq_all', isCheck: false }); //所有管网rq_all、市政rq_SZLH、庭院rq_TYLH、立管rq_LGLH、其他rq_other
+      bus.emit('setLayerVisible', { layername: 'rq_SZLH', isCheck: false });
+      bus.emit('setLayerVisible', { layername: 'rq_TYLH', isCheck: false });
+      bus.emit('setLayerVisible', { layername: 'rq_LGLH', isCheck: false });
+      bus.emit('setLayerVisible', { layername: 'rq_other', isCheck: true });
       break;
   }
 };
 
 // 风险
-const FengXianClick = (item) => {
+const FengXianClick = item => {
   let data = {
-    title: item.zb + " 风险监测",
-    comIDs: ["RQ_FengXianJianCe"],
+    title: item.zb + ' 风险监测',
+    comIDs: ['RQ_FengXianJianCe'],
   };
-  bus.emit("publicDialog", data);
+  bus.emit('publicDialog', data);
   // 传给组件数据
 
   setTimeout(() => {
-    bus.emit("getDataListFxjc", item);
+    bus.emit('getDataListFxjc', item);
   }, 500);
 };
 
 // 现场连线
-const XianChangLianXian = (item) => {
-  bus.emit("OpenRY");
+const XianChangLianXian = item => {
+  bus.emit('OpenRY');
 };
 
 watch(
@@ -832,14 +754,13 @@
 );
 //燃气超标
 const showIndexOver = () => {
-  bus.emit("removeMapDatas", AllData.xunChaLayers);
-  let key = "warning_monitor";
-  bus.emit("getGeojsonByType", {
+  bus.emit('removeMapDatas', AllData.xunChaLayers);
+  let key = 'warning_monitor';
+  bus.emit('getGeojsonByType', {
     type: key,
-    callback: (geojson) => {
-      if (!!!geojson.features.length)
-        bus.emit("setGeoJSON", { json: yanAnRQoverindex, key: "warning_monitor" });
-      bus.emit("setLayerVisible", { type: "point", layername: key, isCheck: true });
+    callback: geojson => {
+      if (!!!geojson.features.length) bus.emit('setGeoJSON', { json: yanAnRQoverindex, key: 'warning_monitor' });
+      bus.emit('setLayerVisible', { type: 'point', layername: key, isCheck: true });
     },
   });
   newfiberMapbox.map.easeTo({
@@ -849,14 +770,13 @@
 };
 //燃气告警
 const showIndexWarning = () => {
-  bus.emit("removeMapDatas", AllData.xunChaLayers);
-  let key = "warning_monitor";
-  bus.emit("getGeojsonByType", {
+  bus.emit('removeMapDatas', AllData.xunChaLayers);
+  let key = 'warning_monitor';
+  bus.emit('getGeojsonByType', {
     type: key,
-    callback: (geojson) => {
-      if (!!!geojson.features.length)
-        bus.emit("setGeoJSON", { json: yanAnWarring, key: "warning_monitor" });
-      bus.emit("setLayerVisible", { type: "point", layername: key, isCheck: true });
+    callback: geojson => {
+      if (!!!geojson.features.length) bus.emit('setGeoJSON', { json: yanAnWarring, key: 'warning_monitor' });
+      bus.emit('setLayerVisible', { type: 'point', layername: key, isCheck: true });
     },
   });
   newfiberMapbox.map.easeTo({
@@ -867,47 +787,46 @@
 onMounted(() => {
   let initeRQTimer = setInterval(() => {
     if (!newfiberMapbox) return;
-    if (!newfiberMapbox.map.getLayer("rq_pipeline_info")) return;
-    if (!newfiberMapbox.map.getLayer("sx_ya_smx_rq_point")) return;
+    if (!newfiberMapbox.map.getLayer('rq_pipeline_info')) return;
+    if (!newfiberMapbox.map.getLayer('sx_ya_smx_rq_point')) return;
     newfiberMapbox.map.easeTo({
       center: [109.488, 36.596],
       zoom: 13,
     });
     //告警点事件
-    let warningPoint = newfiberMapbox
-      .getLayers()
-      .filter((feature) => feature.newfiberId == "warning_monitor")[0];
+    let warningPoint = newfiberMapbox.getLayers().filter(feature => feature.newfiberId == 'warning_monitor')[0];
     if (warningPoint) {
-      warningPoint.on("click", (e) => {
+      warningPoint.on('click', e => {
         let popupData = e.feature.properties;
 
-        console.log("popupData---", "告警---------", popupData);
+        console.log('popupData---', '告警---------', popupData);
       });
     }
-    bus.emit("setLayerVisible", { layername: "rq_all", isCheck: true }); //所有管网rq_all、市政rq_SZLH、庭院rq_TYLH、立管rq_LGLH、其他rq_other
+    bus.emit('setLayerVisible', { layername: 'rq_all', isCheck: true }); //所有管网rq_all、市政rq_SZLH、庭院rq_TYLH、立管rq_LGLH、其他rq_other
 
     clearInterval(initeRQTimer);
   }, 100);
   initEcharts(1);
 });
 onBeforeUnmount(() => {
-  bus.emit("setLayerVisible", { layername: "rq_all", isCheck: false });
-  bus.emit("setLayerVisible", { layername: "rq_SZLH", isCheck: false });
-  bus.emit("setLayerVisible", { layername: "rq_TYLH", isCheck: false });
-  bus.emit("setLayerVisible", { layername: "rq_LGLH", isCheck: false });
-  bus.emit("setLayerVisible", { layername: "rq_other", isCheck: false });
-  bus.emit("removeMapDatas", AllData.xunChaLayers);
-  bus.emit("removeMapDatas", ["warning_monitor"]);
-  bus.emit("setLayerVisible", { layername: "warning_monitor", isCheck: false });
-  bus.emit("closeCesiumPopup");
-  if (!!newfiberMapbox.getLayerByName("rqLine")) {
-    newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName("rqLine"));
+  bus.emit('setLayerVisible', { layername: 'rq_all', isCheck: false });
+  bus.emit('setLayerVisible', { layername: 'rq_SZLH', isCheck: false });
+  bus.emit('setLayerVisible', { layername: 'rq_TYLH', isCheck: false });
+  bus.emit('setLayerVisible', { layername: 'rq_LGLH', isCheck: false });
+  bus.emit('setLayerVisible', { layername: 'rq_other', isCheck: false });
+  bus.emit('removeMapDatas', AllData.xunChaLayers);
+  bus.emit('removeMapDatas', ['warning_monitor']);
+  bus.emit('setLayerVisible', { layername: 'warning_monitor', isCheck: false });
+  bus.emit('closeCesiumPopup');
+  bus.emit('SetLayerShow', ['蓝色地图']);
+  if (!!newfiberMapbox.getLayerByName('rqLine')) {
+    newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName('rqLine'));
   }
 });
 </script>
 
 <style lang="scss" scoped>
-@import "@/assets/styles/transition_oneMap.scss";
+@import '@/assets/styles/transition_oneMap.scss';
 #ZHRQ {
   .LeftBox {
     width: 450px;
@@ -915,11 +834,7 @@
     position: absolute;
     left: 10px;
     top: 70px;
-    background: linear-gradient(
-      0deg,
-      rgba(0, 43, 67, 0.8) 0%,
-      rgba(0, 69, 108, 0.8) 100%
-    );
+    background: linear-gradient(0deg, rgba(0, 43, 67, 0.8) 0%, rgba(0, 69, 108, 0.8) 100%);
     border-radius: 6px;
     border: 1px solid #47eef3;
     box-sizing: border-box;
@@ -994,7 +909,7 @@
         width: 100%;
         height: calc(100% - 72px);
         margin-top: 10px;
-        background: url("@/assets/images/Sponge_screen/RQ/Ech.png") no-repeat center;
+        background: url('@/assets/images/Sponge_screen/RQ/Ech.png') no-repeat center;
         position: relative;
 
         .ClickDiv1 {
@@ -1052,7 +967,7 @@
           height: 42px;
           width: calc(50% - 9px);
           display: flex;
-          background: url("@/assets/images/Sponge_screen/RQ/RQ_FX.png") no-repeat center;
+          background: url('@/assets/images/Sponge_screen/RQ/RQ_FX.png') no-repeat center;
           background-size: 100% 100%;
           cursor: pointer;
 
@@ -1284,11 +1199,7 @@
     position: absolute;
     right: 10px;
     top: 70px;
-    background: linear-gradient(
-      0deg,
-      rgba(0, 43, 67, 0.8) 0%,
-      rgba(0, 69, 108, 0.8) 100%
-    );
+    background: linear-gradient(0deg, rgba(0, 43, 67, 0.8) 0%, rgba(0, 69, 108, 0.8) 100%);
     border-radius: 6px;
     border: 1px solid #47eef3;
     box-sizing: border-box;
@@ -1446,11 +1357,7 @@
     position: absolute;
     left: 520px;
     top: 110px;
-    background: linear-gradient(
-      0deg,
-      rgba(0, 43, 67, 0.8) 0%,
-      rgba(0, 69, 108, 0.8) 100%
-    );
+    background: linear-gradient(0deg, rgba(0, 43, 67, 0.8) 0%, rgba(0, 69, 108, 0.8) 100%);
     border-radius: 6px;
     border: 1px solid #47eef3;
     box-sizing: border-box;
@@ -1544,8 +1451,7 @@
     .Box_header {
       width: 100%;
       height: 43px;
-      background: url("@/assets/images/Sponge_screen/Box_HeaderBackground.png") no-repeat
-        center;
+      background: url('@/assets/images/Sponge_screen/Box_HeaderBackground.png') no-repeat center;
       background-size: cover;
       font-family: PangMenZhengDao;
       font-weight: 400;
diff --git a/src/views/oneMap/components/ZTGL.vue b/src/views/oneMap/components/ZTGL.vue
index 796f6da..f524835 100644
--- a/src/views/oneMap/components/ZTGL.vue
+++ b/src/views/oneMap/components/ZTGL.vue
@@ -18,7 +18,7 @@
 import testProjectionLabel from '@/assets/testProjectionLabel.json';
 import mapBoxVectorLayer from '@/utils/GISdocument/mapboxVectorLayer.js';
 import xtb_img from '@/assets/newImgs/xtb_img.png';
-
+import bus from '@/bus';
 const showPanel = ref(true); //面板展开收起
 // 面板内容展开收起控制
 const props = defineProps({
@@ -67,8 +67,11 @@
   }, 100);
 });
 onBeforeUnmount(() => {
-  newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName('testProjection'));
-  mapBoxVectorLayer.removeByIds(['testProjection']);
+  bus.emit('SetLayerShow', ['蓝色地图']);
+  if (newfiberMapbox.getLayerByName('testProjection')) {
+    newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName('testProjection'));
+    mapBoxVectorLayer.removeByIds(['testProjection']);
+  }
 });
 </script>
 

diff --git a/package.json b/package.json
index 39861ad..e784d82 100644
--- a/package.json
+++ b/package.json
@@ -72,4 +72,4 @@
     "vite-plugin-svg-icons": "2.0.1",
     "vite-plugin-vue-setup-extend": "0.4.0"
   }
-}
+}
\ No newline at end of file
diff --git a/src/assets/images/fhpl/sqjca.png b/src/assets/images/fhpl/sqjca.png
index 0eb531c..00e619c 100644
--- a/src/assets/images/fhpl/sqjca.png
+++ b/src/assets/images/fhpl/sqjca.png
Binary files differ
diff --git a/src/views/oneMap/ConstructionEvaluation/JSPGLeftBox.vue b/src/views/oneMap/ConstructionEvaluation/JSPGLeftBox.vue
index 2a7ff07..3ee47c4 100644
--- a/src/views/oneMap/ConstructionEvaluation/JSPGLeftBox.vue
+++ b/src/views/oneMap/ConstructionEvaluation/JSPGLeftBox.vue
@@ -65,8 +65,9 @@
   </div>
   <!-- 污水收集处理 -->
   <div class="Sewagecollection">
-    <div class="ListBoxHeader" @click="showSewageFectory">
-      <div class="ListBoxHeader_font">污水收集处理</div>
+    <div class="topVehicl flex">
+      <div class="icon"></div>
+      <div class="name">污水收集处理</div>
     </div>
     <div class="wssjEch"></div>
   </div>
@@ -293,7 +294,31 @@
 .Sewagecollection {
   width: 450px;
   height: 25%;
-  // background: yellowgreen;
+
+  .topVehicl {
+    font-family: Source Han Sans CN;
+    font-weight: bold;
+    font-size: 14px;
+    color: #ebfeff;
+    align-items: center;
+    height: 30px;
+    // background: teal;
+    .icon {
+      position: relative;
+      top: -1px;
+      width: 25px;
+      height: 25px;
+      background: url('@/assets/newImgs/xtb_img.png') no-repeat;
+    }
+
+    .name {
+      background: linear-gradient(0deg, rgba(0, 242, 255, 0.5) 0%, rgba(0, 242, 255, 0) 100%);
+      padding: 0px 3px;
+      height: 10px;
+      line-height: 0px;
+      margin-top: 6px;
+    }
+  }
   .wssjEch {
     margin: 5px auto;
     width: 420px;
diff --git a/src/views/oneMap/ConstructionEvaluation/JSPGRightBox.vue b/src/views/oneMap/ConstructionEvaluation/JSPGRightBox.vue
index dbeddc8..3f696aa 100644
--- a/src/views/oneMap/ConstructionEvaluation/JSPGRightBox.vue
+++ b/src/views/oneMap/ConstructionEvaluation/JSPGRightBox.vue
@@ -2,7 +2,7 @@
   <!-- 绩效管理 -->
   <div class="management">
     <div class="ListBoxHeader">
-      <div class="ListBoxHeader_font">绩效管理</div>
+      <div class="ListBoxHeader_font">管理绩效</div>
     </div>
     <!-- 年份切换 -->
     <div class="subRightBox">
diff --git a/src/views/oneMap/FloodStuationReview/sqhgBottomBox.vue b/src/views/oneMap/FloodStuationReview/sqhgBottomBox.vue
index 53d38bb..d178c59 100644
--- a/src/views/oneMap/FloodStuationReview/sqhgBottomBox.vue
+++ b/src/views/oneMap/FloodStuationReview/sqhgBottomBox.vue
@@ -117,8 +117,8 @@
 const ranLeng = [
   [
     { value: '0-0.2', color: 'rgba(7, 213, 118, 0)' },
-    { value: '0.2-5', color: 'rgba(7, 213, 118, 1)' },
-    { value: '5-25', color: 'rgba(38, 129, 240,1)' },
+    { value: '0.2-5', color: 'rgba(38, 129, 240,1)' },
+    { value: '5-25', color: 'rgb(222, 230, 0)' },
     { value: '>25', color: 'rgba(255, 26, 26, 1)' },
   ],
   [
@@ -235,14 +235,18 @@
   stepNum.value = 0;
   hgEngPlay.value = false;
   showRainLegend.value = false;
-  // NewFiberMapUtils.disposeRainfall('')
-  // newfiberMap.setLayersVisible(["krigingImage"],false)
+  // newfiberMapbox.map.removeLayer('canvas-layer0');
+  // newfiberMapbox.map.removeSource('canvas-source0');
   hoursList.value.activeIndex = stepNum.value;
   clearInterval(runDayInterval.value);
   if (runDayInterval.value) {
     runDayInterval.value = null;
     refresh.value = Math.random();
   }
+  // if (newfiberMapbox.map.getLayer('canvas-layer0')) {
+  //   newfiberMapbox.map.removeLayer('canvas-layer0');
+  //   newfiberMapbox.map.removeSource('canvas-source0');
+  // }
 }
 
 function changeChartData() {
@@ -375,10 +379,10 @@
 ];*/
 let colorScale = [
   { value: '0', color: 'rgba(7, 213, 118, 0)' },
-  { value: '0.2', color: 'rgba(7, 213, 118, 1)' },
-  { value: '5', color: 'rgba(38, 129, 240,1)' },
-  { value: '25', color: 'rgba(255, 26, 26, 1)' },
-  { value: '250', color: 'rgba(255, 26, 26, 1)' },
+  { value: '0.2', color: 'rgb(38, 129, 240)' },
+  { value: '5', color: 'rgb(222, 230, 0)' },
+  { value: '25', color: 'rgb(255, 26, 26)' },
+  { value: '250', color: 'rgb(255, 26, 26)' },
 ];
 let imageFiles = [];
 let canvas = [];
diff --git a/src/views/oneMap/FloodStuationReview/xqhgLeftBox.vue b/src/views/oneMap/FloodStuationReview/xqhgLeftBox.vue
index 14170d1..c43cb7b 100644
--- a/src/views/oneMap/FloodStuationReview/xqhgLeftBox.vue
+++ b/src/views/oneMap/FloodStuationReview/xqhgLeftBox.vue
@@ -122,7 +122,7 @@
         background: linear-gradient(0deg, rgba(0, 242, 255, 0.5) 0%, rgba(0, 242, 255, 0) 100%);
         height: 10px;
         line-height: 0px;
-        margin-top: 10px;
+        margin-top: 12px;
       }
     }
     .ScheduEcharts {
@@ -161,7 +161,7 @@
       background: linear-gradient(0deg, rgba(0, 242, 255, 0.5) 0%, rgba(0, 242, 255, 0) 100%);
       height: 10px;
       line-height: 0px;
-      margin-top: 10px;
+      margin-top: 12px;
     }
   }
   .VehiclEcharts {
@@ -196,7 +196,7 @@
       background: linear-gradient(0deg, rgba(0, 242, 255, 0.5) 0%, rgba(0, 242, 255, 0) 100%);
       height: 10px;
       line-height: 0px;
-      margin-top: 10px;
+      margin-top: 12px;
     }
   }
   .MaterialEcharts {
diff --git a/src/views/oneMap/LayerControl/LayerControl.vue b/src/views/oneMap/LayerControl/LayerControl.vue
index 37d0576..cc8e024 100644
--- a/src/views/oneMap/LayerControl/LayerControl.vue
+++ b/src/views/oneMap/LayerControl/LayerControl.vue
@@ -30,29 +30,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 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({
   // 图层控制面板的渲染数据
   /**图层面板数据字段说明
@@ -69,72 +70,90 @@
       Show: true,
       children: [
         {
-          layerName: "中心城区",
-          layerKey: "centerCity",
-          layerIcon: requireTuChengImg("zhongxinchengqu"),
+          layerName: '蓝色地图',
+          layerKey: 'blackMap',
+          layerIcon: requireTuChengImg('zhongxinchengqu'),
+          layerVisible: false,
+        },
+        {
+          layerName: '白色地图',
+          layerKey: 'whiteMap',
+          layerIcon: requireTuChengImg('zhongxinchengqu'),
+          layerVisible: false,
+        },
+        {
+          layerName: '影像地图',
+          layerKey: 'imageMap',
+          layerIcon: requireTuChengImg('zhongxinchengqu'),
+          layerVisible: false,
+        },
+        {
+          layerName: '中心城区',
+          layerKey: 'centerCity',
+          layerIcon: requireTuChengImg('zhongxinchengqu'),
           layerVisible: false,
           dynamicLineData: yanAnCenterCity,
         },
         {
-          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,
         },
@@ -145,38 +164,38 @@
       Show: true,
       children: [
         {
-          layerName: "燃气管网",
-          layerKey: "rq_all",
+          layerName: '燃气管网',
+          layerKey: 'rq_all',
           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,
         },
@@ -187,22 +206,22 @@
       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,
         },
@@ -213,8 +232,8 @@
         //   layerVisible: false,
         // },
         {
-          layerName: "雨水泵站",
-          layerKey: "YSBZ",
+          layerName: '雨水泵站',
+          layerKey: 'YSBZ',
           layerIcon: null,
           layerVisible: false,
           data: yanAnYSBZ,
@@ -226,14 +245,14 @@
       Show: true,
       children: [
         {
-          layerName: "污水分区",
-          layerKey: "sewageArea",
+          layerName: '污水分区',
+          layerKey: 'sewageArea',
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: "污水管网",
-          layerKey: "wsLine1",
+          layerName: '污水管网',
+          layerKey: 'wsLine1',
           layerIcon: null,
           layerVisible: false,
         },
@@ -250,8 +269,8 @@
         //   layerVisible: false,
         // },
         {
-          layerName: "污水处理厂",
-          layerKey: "WSCLC",
+          layerName: '污水处理厂',
+          layerKey: 'WSCLC',
           layerIcon: null,
           layerVisible: false,
           data: yanAnWSCLC,
@@ -263,36 +282,36 @@
       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,
@@ -307,10 +326,10 @@
     .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,
@@ -319,37 +338,79 @@
 watch(
   () => props.ShowTuCheng,
   (newValue, oldValue) => {
-    console.log("ShowTuCheng变化了", newValue, oldValue);
+    console.log('ShowTuCheng变化了', newValue, oldValue);
   },
   { immediate: true, deep: true }
 );
 
-const layerClick = (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 });
+  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 => {
+      oldIds.push(layer.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]));
+    });
+    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');
+    let newMapStyle;
+    let oldMapStyle = newfiberMapbox.map.getStyle();
+    let oldIds = [];
+    oldMapStyle.layers.forEach(layer => {
+      oldIds.push(layer.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]));
+    });
+    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.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.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, // 持续时间，延时
@@ -360,29 +421,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, // 持续时间，延时
@@ -393,22 +454,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, // 持续时间，延时
@@ -419,29 +480,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) : '';
       });
     });
   });
@@ -449,17 +510,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>
 
@@ -470,7 +531,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;
@@ -486,7 +547,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;
diff --git a/src/views/oneMap/components/FXHG.vue b/src/views/oneMap/components/FXHG.vue
index 8924475..44e9c21 100644
--- a/src/views/oneMap/components/FXHG.vue
+++ b/src/views/oneMap/components/FXHG.vue
@@ -40,6 +40,7 @@
   showPanel.value = true;
   showBottom.value = false;
   curType.value = true;
+  bus.emit('SetLayerShow', ['蓝色地图']);
   if (newfiberMapbox.map.getLayer('dynamicRoute')) {
     newfiberMapbox.map.removeLayer('dynamicRoute');
     newfiberMapbox.map.removeLayer('dynamicRoute_Symbol');
@@ -68,6 +69,7 @@
 
   let initePSTimer = setInterval(() => {
     if (!newfiberMapbox) return;
+    bus.emit('SetLayerShow', ['白色地图']);
     bus.emit('setLayerVisible', { layername: 'ysLine1', isCheck: true });
     //bus.emit('setLayerVisible', { layername: 'wsLine1', isCheck: true });
     clearInterval(initePSTimer);
diff --git a/src/views/oneMap/components/ZHHM.vue b/src/views/oneMap/components/ZHHM.vue
index d68bdc5..1f29507 100644
--- a/src/views/oneMap/components/ZHHM.vue
+++ b/src/views/oneMap/components/ZHHM.vue
@@ -648,6 +648,7 @@
     zoom: 12,
     pitch: 55,
   });
+  bus.emit('SetLayerShow', ['蓝色地图']);
   // 先清空
   bus.emit('clearAllLayer');
   let removedLayer = ['HMJZYSQ', 'HMXGYLD', 'HMXDLGC', 'HMXSX', 'GWPCYXF'];
diff --git a/src/views/oneMap/components/ZHHM_JCFX.vue b/src/views/oneMap/components/ZHHM_JCFX.vue
index c420911..42e81e6 100644
--- a/src/views/oneMap/components/ZHHM_JCFX.vue
+++ b/src/views/oneMap/components/ZHHM_JCFX.vue
@@ -411,6 +411,7 @@
 });
 onBeforeUnmount(() => {
   bus.emit('clearAllLayer');
+  bus.emit('SetLayerShow', ['蓝色地图']);
   let removedLayer = ['HMJZYSQ', 'HMXGYLD', 'HMXDLGC', 'HMXSX', 'GWPCYXF'];
   removedLayer.forEach(layer => {
     bus.emit('setLayerVisible', { layername: layer, isCheck: false });
diff --git a/src/views/oneMap/components/ZHHM_JSPG.vue b/src/views/oneMap/components/ZHHM_JSPG.vue
index 7400f1b..df2c85f 100644
--- a/src/views/oneMap/components/ZHHM_JSPG.vue
+++ b/src/views/oneMap/components/ZHHM_JSPG.vue
@@ -53,6 +53,7 @@
 };
 
 onMounted(() => {
+  bus.emit('SetLayerShow', ['蓝色地图']);
   newfiberMapbox.map.easeTo({
     center: [109.488, 36.596],
     zoom: 13,
diff --git a/src/views/oneMap/components/ZHPS.vue b/src/views/oneMap/components/ZHPS.vue
index 7ce8bb0..f09ddbc 100644
--- a/src/views/oneMap/components/ZHPS.vue
+++ b/src/views/oneMap/components/ZHPS.vue
@@ -43,6 +43,7 @@
   });
 });
 onBeforeUnmount(() => {
+  bus.emit('SetLayerShow', ['蓝色地图']);
   // bus.emit('setLayerVisible', { layername: 'ysLine1', isCheck: false });
   // bus.emit('setLayerVisible', { layername: 'wsLine1', isCheck: false });
 });
diff --git a/src/views/oneMap/components/ZHRQ.vue b/src/views/oneMap/components/ZHRQ.vue
index 40a70cc..493c201 100644
--- a/src/views/oneMap/components/ZHRQ.vue
+++ b/src/views/oneMap/components/ZHRQ.vue
@@ -1,31 +1,17 @@
 <template>
   <div id="ZHRQ">
-    <div
-      :class="[
-        'LeftBox',
-        'animate__animated',
-        showPanel ? 'animate__fadeOutLeft' : 'animate__fadeInLeft',
-      ]"
-    >
+    <div :class="['LeftBox', 'animate__animated', showPanel ? 'animate__fadeOutLeft' : 'animate__fadeInLeft']">
       <div class="ComBox LeftBox1_1">
         <div class="Box_header">管道风险评估</div>
         <div class="Box_Body">
           <div class="TJListBox">
             <div class="TJList TJList_RQ" @click="TuChengClick(0)">
-              <img
-                class="TJListImg"
-                src="@/assets/images/Sponge_screen/RQ/RQ_RQ.png"
-                alt=""
-              />
+              <img class="TJListImg" src="@/assets/images/Sponge_screen/RQ/RQ_RQ.png" alt="" />
               <span class="TJListName">燃气管道</span>
               <span class="TJListValue">4549km</span>
             </div>
             <div class="TJList TJList_GZ">
-              <img
-                class="TJListImg"
-                src="@/assets/images/Sponge_screen/RQ/RQ_GZ.png"
-                alt=""
-              />
+              <img class="TJListImg" src="@/assets/images/Sponge_screen/RQ/RQ_GZ.png" alt="" />
               <span class="TJListName">需改造</span>
               <span class="TJListValue">1922km</span>
             </div>
@@ -71,9 +57,7 @@
             </div>
             <div class="tableBody">
               <div class="tableBodyList" v-for="item in AllData.FXJCData">
-                <span class="tableBodyList_span1" @click="FengXianClick(item)">{{
-                  item.zb
-                }}</span>
+                <span class="tableBodyList_span1" @click="FengXianClick(item)">{{ item.zb }}</span>
                 <span class="tableBodyList_span2" @click="FengXianClick(item)"
                   >{{ item.sz }}
                   <el-icon v-if="item.szzt" color="lime" size="14"><Top /> </el-icon>
@@ -81,11 +65,9 @@
                     <Bottom />
                   </el-icon>
                 </span>
-                <span
-                  class="tableBodyList_span3"
-                  :class="item.zt == 0 ? 'YJClass' : ''"
-                  >{{ item.zt == 0 ? "预警" : "正常" }}</span
-                >
+                <span class="tableBodyList_span3" :class="item.zt == 0 ? 'YJClass' : ''">{{
+                  item.zt == 0 ? '预警' : '正常'
+                }}</span>
                 <span class="tableBodyList_span4" @click="PaiFa(item)">派发</span>
               </div>
             </div>
@@ -110,13 +92,7 @@
         </div>
       </div>
     </div>
-    <div
-      :class="[
-        'RightBox',
-        'animate__animated',
-        showPanel ? 'animate__fadeOutRight' : 'animate__fadeInRight',
-      ]"
-    >
+    <div :class="['RightBox', 'animate__animated', showPanel ? 'animate__fadeOutRight' : 'animate__fadeInRight']">
       <div class="ComBox RightBox1_1">
         <div class="Box_header">辅助决策</div>
         <div class="Box_Body">
@@ -138,16 +114,10 @@
               <span class="JCListBox_List_value color_red">{{ item.yp }}</span>
             </div>
             <div class="JCListBox_List JCListBox_List_BTN">
-              <el-button
-                style="background: #03b6a0; color: white; border: none"
-                size="small"
-                @click="GongDanPaiFa(item)"
+              <el-button style="background: #03b6a0; color: white; border: none" size="small" @click="GongDanPaiFa(item)"
                 >工单派发</el-button
               >
-              <el-button
-                style="background: #03b6a0; color: white; border: none"
-                size="small"
-                @click="XianChangLianXian(item)"
+              <el-button style="background: #03b6a0; color: white; border: none" size="small" @click="XianChangLianXian(item)"
                 >现场联线</el-button
               >
             </div>
@@ -158,18 +128,12 @@
         <div class="Box_header">巡查反馈</div>
         <div class="Box_Body">
           <div class="FK_headerBox">
-            <div class="FK_headerBox_list" @click="dealOrNoDeal(1)">
-              <span class="FK_headerBox_list_colorBox1"></span> 未处理
-            </div>
-            <div class="FK_headerBox_list" @click="dealOrNoDeal(2)">
-              <span class="FK_headerBox_list_colorBox2"></span> 已处理
-            </div>
+            <div class="FK_headerBox_list" @click="dealOrNoDeal(1)"><span class="FK_headerBox_list_colorBox1"></span> 未处理</div>
+            <div class="FK_headerBox_list" @click="dealOrNoDeal(2)"><span class="FK_headerBox_list_colorBox2"></span> 已处理</div>
           </div>
           <div class="FK_bodyBox">
             <div class="FK_bodyBox_list" v-for="item in AllData.XCFKData">
-              <span class="FK_bodyBox_list_label" @click="XunChaFanKui(item)">{{
-                item.name
-              }}</span>
+              <span class="FK_bodyBox_list_label" @click="XunChaFanKui(item)">{{ item.name }}</span>
               <div class="FK_BigBox">
                 <div class="FK_CenBox1" :style="getWidth(item, 1)">{{ item.num1 }}</div>
                 <div class="FK_CenBox2" :style="getWidth(item, 2)">{{ item.num2 }}</div>
@@ -179,13 +143,7 @@
         </div>
       </div>
     </div>
-    <div
-      :class="[
-        'TopBox',
-        'animate__animated',
-        showPanel ? 'animate__fadeOutUp' : 'animate__fadeInDown',
-      ]"
-    >
+    <div :class="['TopBox', 'animate__animated', showPanel ? 'animate__fadeOutUp' : 'animate__fadeInDown']">
       <div class="TopTableHeader">
         <span class="TopTableListSpan TopTableListSpan1">时间</span>
         <span class="TopTableListSpan TopTableListSpan2">事件明细</span>
@@ -195,27 +153,15 @@
         <span class="TopTableListSpan TopTableListSpan6">督办</span>
       </div>
       <!-- <div class="TopTableBody"> -->
-      <Vue3SeamlessScroll
-        :list="AllData.TopTableData"
-        :singleHeight="34"
-        :hover="true"
-        class="TopTableBody"
-      >
+      <Vue3SeamlessScroll :list="AllData.TopTableData" :singleHeight="34" :hover="true" class="TopTableBody">
         <div class="TopTableBody_list" v-for="item in AllData.TopTableData">
           <span class="TopTableListSpan TopTableListSpan1">{{ item.sj }}</span>
           <span class="TopTableListSpan TopTableListSpan2">{{ item.mx }}</span>
           <span class="TopTableListSpan TopTableListSpan3">{{ item.dd }}</span>
-          <span class="TopTableListSpan TopTableListSpan4">{{
-            item.zt == 0 ? "未处理" : "已处理"
-          }}</span>
+          <span class="TopTableListSpan TopTableListSpan4">{{ item.zt == 0 ? '未处理' : '已处理' }}</span>
           <span class="TopTableListSpan TopTableListSpan5">{{ item.dw }}</span>
           <span class="TopTableListSpan TopTableListSpan6">
-            <img
-              class="TopTableListSpanImg2"
-              src="@/assets/images/Sponge_screen/RQ/RQ_XX.png"
-              alt=""
-              @click="PaiFa(item)"
-            />
+            <img class="TopTableListSpanImg2" src="@/assets/images/Sponge_screen/RQ/RQ_XX.png" alt="" @click="PaiFa(item)" />
             <img
               class="TopTableListSpanImg"
               src="@/assets/images/Sponge_screen/RQ/RQ_SP.png"
@@ -231,49 +177,49 @@
 </template>
 
 <script setup name="ZHRQ">
-import { ref, reactive, toRefs, onMounted, onBeforeUnmount, nextTick } from "vue";
+import { ref, reactive, toRefs, onMounted, onBeforeUnmount, nextTick } from 'vue';
 
-import * as echarts from "echarts";
-import bus from "@/bus";
-import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
-import sheBeiLost from "@/assets/sheBeiLost.json";
-import xiaXian from "@/assets/xiaXian.json";
-import yiBian from "@/assets/yiBian.json";
-import zaWuDuiFang from "@/assets/zaWuDuiFang.json";
-import rq_QiTa from "@/assets/rq_QiTa.json";
-import no_sheBeiLost from "@/assets/no_sheBeiLost.json";
-import no_xiaXian from "@/assets/no_xiaXian.json";
-import no_yiBian from "@/assets/no_yiBian.json";
-import no_zaWuDuiFang from "@/assets/no_zaWuDuiFang.json";
-import no_rq_QiTa from "@/assets/no_rq_QiTa.json";
-import yanAnRQoverindex from "@/assets/yanAnRQoverindex.json";
-import yanAnWarring from "@/assets/yanAnWarring.json";
+import * as echarts from 'echarts';
+import bus from '@/bus';
+import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
+import sheBeiLost from '@/assets/sheBeiLost.json';
+import xiaXian from '@/assets/xiaXian.json';
+import yiBian from '@/assets/yiBian.json';
+import zaWuDuiFang from '@/assets/zaWuDuiFang.json';
+import rq_QiTa from '@/assets/rq_QiTa.json';
+import no_sheBeiLost from '@/assets/no_sheBeiLost.json';
+import no_xiaXian from '@/assets/no_xiaXian.json';
+import no_yiBian from '@/assets/no_yiBian.json';
+import no_zaWuDuiFang from '@/assets/no_zaWuDuiFang.json';
+import no_rq_QiTa from '@/assets/no_rq_QiTa.json';
+import yanAnRQoverindex from '@/assets/yanAnRQoverindex.json';
+import yanAnWarring from '@/assets/yanAnWarring.json';
 
 const AllData = reactive({
   xunChaStatic: null,
   xunChaLayers: [
-    "alreadyDeal_DF",
-    "alreadyDeal_DS",
-    "alreadyDeal_XX",
-    "alreadyDeal_YB",
-    "alreadyDeal_QT",
-    "noDeal_DF",
-    "noDeal_DS",
-    "noDeall_XX",
-    "noDeal_YB",
-    "noDeal_QT",
+    'alreadyDeal_DF',
+    'alreadyDeal_DS',
+    'alreadyDeal_XX',
+    'alreadyDeal_YB',
+    'alreadyDeal_QT',
+    'noDeal_DF',
+    'noDeal_DS',
+    'noDeall_XX',
+    'noDeal_YB',
+    'noDeal_QT',
   ],
   ChangeData: [
     {
-      name: "枣园",
+      name: '枣园',
       id: 1,
     },
     {
-      name: "杨家湾",
+      name: '杨家湾',
       id: 2,
     },
     {
-      name: "丰富川",
+      name: '丰富川',
       id: 3,
     },
   ],
@@ -281,38 +227,38 @@
   // 风险监测
   FXJCData: [
     {
-      zb: "甲烷浓度",
-      sz: "3%",
+      zb: '甲烷浓度',
+      sz: '3%',
       szzt: true,
       zt: 0, //0预警 1 正常
-      value: "JWND",
+      value: 'JWND',
     },
     {
-      zb: "压力",
-      sz: "5MPa",
+      zb: '压力',
+      sz: '5MPa',
       szzt: false,
       zt: 1, //0预警 1 正常
-      value: "YL",
+      value: 'YL',
     },
     {
-      zb: "温度",
-      sz: "25C°",
+      zb: '温度',
+      sz: '25C°',
       szzt: true,
       zt: 1, //0预警 1 正常
-      value: "WD",
+      value: 'WD',
     },
   ],
   YJChangeData: [
     {
-      name: "综合",
+      name: '综合',
       id: 1,
     },
     {
-      name: "压力",
+      name: '压力',
       id: 2,
     },
     {
-      name: "温度",
+      name: '温度',
       id: 3,
     },
   ],
@@ -320,51 +266,51 @@
   //辅助决策
   JCData: [
     {
-      qy: "宝塔区凤凰山街道二道街",
-      tz: "压力监测异常波动",
+      qy: '宝塔区凤凰山街道二道街',
+      tz: '压力监测异常波动',
       sj: 5,
-      yp: "设施故障",
-      value: "001", //语音识别内容编码-前段自己设置的,后期项目有接口就直接替换数据唯一id
+      yp: '设施故障',
+      value: '001', //语音识别内容编码-前段自己设置的,后期项目有接口就直接替换数据唯一id
     },
     {
-      qy: "宝塔区凤凰山街道二道街",
-      tz: "燃气管道压力过大",
+      qy: '宝塔区凤凰山街道二道街',
+      tz: '燃气管道压力过大',
       sj: 5,
-      yp: "燃气爆管风险",
-      value: "002",
+      yp: '燃气爆管风险',
+      value: '002',
     },
     {
-      qy: "宝塔区凤凰山街道二道街",
-      tz: "高峰期流量持续降低",
+      qy: '宝塔区凤凰山街道二道街',
+      tz: '高峰期流量持续降低',
       sj: 4,
-      yp: "燃气泄漏风险",
-      value: "003",
+      yp: '燃气泄漏风险',
+      value: '003',
     },
   ],
   // 巡查反馈
   XCFKData: [
     {
-      name: "堆放杂物",
+      name: '堆放杂物',
       num1: 20,
       num2: 80,
     },
     {
-      name: "设备丢失",
+      name: '设备丢失',
       num1: 12,
       num2: 88,
     },
     {
-      name: "下陷",
+      name: '下陷',
       num1: 32,
       num2: 68,
     },
     {
-      name: "异变",
+      name: '异变',
       num1: 30,
       num2: 70,
     },
     {
-      name: "其他",
+      name: '其他',
       num1: 20,
       num2: 80,
     },
@@ -372,35 +318,35 @@
   // 顶部表格数据
   TopTableData: [
     {
-      sj: "2024-09-26 10:00:29",
-      mx: "燃气常规检查发现泄漏",
-      dd: "宝塔区凤凰山街道二道街",
+      sj: '2024-09-26 10:00:29',
+      mx: '燃气常规检查发现泄漏',
+      dd: '宝塔区凤凰山街道二道街',
       zt: 0, //0未处理 1已处理
-      dw: "延安市燃气总公司",
+      dw: '延安市燃气总公司',
       value: null,
     },
     {
-      sj: "2024-09-27 16:10:248",
-      mx: "燃气常规检查发现泄漏",
-      dd: "宝塔区凤凰山街道二道街",
+      sj: '2024-09-27 16:10:248',
+      mx: '燃气常规检查发现泄漏',
+      dd: '宝塔区凤凰山街道二道街',
       zt: 0, //0未处理 1已处理
-      dw: "延安市燃气总公司",
+      dw: '延安市燃气总公司',
       value: null,
     },
     {
-      sj: "2024-09-26 10:00:29",
-      mx: "燃气常规检查发现泄漏",
-      dd: "宝塔区凤凰山街道二道街",
+      sj: '2024-09-26 10:00:29',
+      mx: '燃气常规检查发现泄漏',
+      dd: '宝塔区凤凰山街道二道街',
       zt: 0, //0未处理 1已处理
-      dw: "延安市燃气总公司",
+      dw: '延安市燃气总公司',
       value: null,
     },
     {
-      sj: "2024-09-27 16:10:248",
-      mx: "燃气常规检查发现泄漏",
-      dd: "宝塔区凤凰山街道二道街",
+      sj: '2024-09-27 16:10:248',
+      mx: '燃气常规检查发现泄漏',
+      dd: '宝塔区凤凰山街道二道街',
       zt: 0, //0未处理 1已处理
-      dw: "延安市燃气总公司",
+      dw: '延安市燃气总公司',
       value: null,
     },
   ],
@@ -417,7 +363,7 @@
   },
 });
 // 初始化预警统计的Echarts
-const initEcharts = (id) => {
+const initEcharts = id => {
   AllData.YJChangeIndex = id;
   let Data1 = [];
   let Data2 = [];
@@ -437,41 +383,41 @@
   if (!!myChart.value) {
     myChart.value.dispose();
   }
-  myChart.value = echarts.init(document.getElementById("YJEchartsBox"));
-  myChart.value.off("click");
+  myChart.value = echarts.init(document.getElementById('YJEchartsBox'));
+  myChart.value.off('click');
   myChart.value.setOption({
-    color: ["#18A7F2", "#1AF7AA"],
+    color: ['#18A7F2', '#1AF7AA'],
     tooltip: {
-      trigger: "axis",
+      trigger: 'axis',
     },
     grid: {
-      top: "30%",
-      left: "3%",
-      right: "4%",
-      bottom: "3%",
+      top: '30%',
+      left: '3%',
+      right: '4%',
+      bottom: '3%',
       containLabel: true,
     },
     legend: {
-      data: ["预警次数", "持续时长"],
+      data: ['预警次数', '持续时长'],
       textStyle: {
-        color: "#fffd", // 图例文字颜色
+        color: '#fffd', // 图例文字颜色
       },
-      x: "40",
-      y: "10",
+      x: '40',
+      y: '10',
     },
     xAxis: [
       {
-        type: "category",
-        data: ["今日", "09/27", "09/26", "09/25", "09/24", "09/23", "09/22"],
+        type: 'category',
+        data: ['今日', '09/27', '09/26', '09/25', '09/24', '09/23', '09/22'],
         axisPointer: {
-          type: "shadow",
+          type: 'shadow',
         },
         textStyle: {
-          color: "#EBFEFF",
+          color: '#EBFEFF',
         },
         axisLine: {
           lineStyle: {
-            color: "#EBFEFF",
+            color: '#EBFEFF',
           },
         },
         // boundaryGap: false,
@@ -479,57 +425,57 @@
     ],
     yAxis: [
       {
-        type: "value",
-        name: "预警次数",
+        type: 'value',
+        name: '预警次数',
         min: 0,
         max: 12,
         interval: 2,
         axisLabel: {
-          formatter: "{value}",
+          formatter: '{value}',
         },
         axisLine: {
           lineStyle: {
-            color: "#AAC1CF",
+            color: '#AAC1CF',
           },
         },
         splitLine: {
           lineStyle: {
             // 使用深浅的间隔色
-            color: ["#184E5A"],
+            color: ['#184E5A'],
           },
         },
       },
       {
-        type: "value",
-        name: "持续时长",
+        type: 'value',
+        name: '持续时长',
         min: 0,
         max: 30,
         interval: 5,
         axisLabel: {
-          formatter: "{value}",
+          formatter: '{value}',
         },
         axisLine: {
           lineStyle: {
-            color: "#AAC1CF",
+            color: '#AAC1CF',
           },
         },
         splitLine: {
           lineStyle: {
             // 使用深浅的间隔色
-            color: ["#184E5A"],
+            color: ['#184E5A'],
           },
         },
       },
     ],
     series: [
       {
-        name: "预警次数",
-        type: "bar",
-        barWidth: "10px",
+        name: '预警次数',
+        type: 'bar',
+        barWidth: '10px',
         showBackground: true,
         tooltip: {
           valueFormatter: function (value) {
-            return value + " 次";
+            return value + ' 次';
           },
         },
         itemStyle: {
@@ -539,12 +485,12 @@
         data: Data1,
       },
       {
-        name: "持续时长",
-        type: "line",
+        name: '持续时长',
+        type: 'line',
         yAxisIndex: 1,
         tooltip: {
           valueFormatter: function (value) {
-            return value + "min";
+            return value + 'min';
           },
         },
         areaStyle: {
@@ -552,11 +498,11 @@
           color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
             {
               offset: 0,
-              color: "#1AF7AA",
+              color: '#1AF7AA',
             },
             {
               offset: 1,
-              color: "#1AF7AA00",
+              color: '#1AF7AA00',
             },
           ]),
         },
@@ -565,19 +511,19 @@
       },
     ],
   });
-  myChart.value.on("click", (param) => {
+  myChart.value.on('click', param => {
     console.log(param);
     let data = {
-      title: "风险监测",
-      comIDs: ["RQ_FengXianJianCe"],
+      title: '风险监测',
+      comIDs: ['RQ_FengXianJianCe'],
     };
-    bus.emit("publicDialog", data);
+    bus.emit('publicDialog', data);
     let a = {
-      value: "全部",
-      endTime: "2024-10-05",
+      value: '全部',
+      endTime: '2024-10-05',
     };
     setTimeout(() => {
-      bus.emit("getDataListFxjc", a);
+      bus.emit('getDataListFxjc', a);
     }, 500);
   });
 
@@ -591,7 +537,7 @@
     i++;
     if (i == length) i = 0;
     myChart.value.dispatchAction({
-      type: "showTip",
+      type: 'showTip',
       seriesIndex: 0,
       dataIndex: i,
     });
@@ -608,14 +554,14 @@
   return `width:${widthNum}%`;
 };
 // 工单派发
-const GongDanPaiFa = (item) => {
+const GongDanPaiFa = item => {
   console.log(item);
   let data = {
     title: item.qy,
-    comIDs: ["gdpf"],
+    comIDs: ['gdpf'],
     getSiteId: item.value,
   };
-  bus.emit("publicDialog", data);
+  bus.emit('publicDialog', data);
 };
 // // 风险
 // const FengXianClick = (item) => {
@@ -627,56 +573,52 @@
 //   bus.emit("publicDialog", data);
 // };
 // 风险监测派发
-const PaiFa = (item) => {
+const PaiFa = item => {
   console.log(item);
   let data = {
-    title: "智慧外呼",
-    comIDs: ["RQ_ZhiHuiWaiHu"],
+    title: '智慧外呼',
+    comIDs: ['RQ_ZhiHuiWaiHu'],
     getSiteId: item.value,
   };
-  bus.emit("publicDialog", data);
+  bus.emit('publicDialog', data);
 };
 //巡查反馈处理、未处理
-const dealOrNoDeal = (item) => {
+const dealOrNoDeal = item => {
   AllData.xunChaStatic = item;
   newfiberMapbox.map.easeTo({
     center: [109.488, 36.596],
     zoom: 12,
     pitch: 55,
   });
-  bus.emit("removeMapDatas", ["warning_monitor"]);
+  bus.emit('removeMapDatas', ['warning_monitor']);
   if (item == 1) {
-    let removedLayer = AllData.xunChaLayers.filter((layer) => layer.includes("noDeal"));
-    let selectedLayer = AllData.xunChaLayers.filter((layer) =>
-      layer.includes("alreadyDeal")
-    );
-    bus.emit("removeMapDatas", AllData.xunChaLayers);
-    bus.emit("setGeoJSON", { json: zaWuDuiFang, key: "alreadyDeal_DF" });
-    bus.emit("setGeoJSON", { json: sheBeiLost, key: "alreadyDeal_DS" });
-    bus.emit("setGeoJSON", { json: xiaXian, key: "alreadyDeal_XX" });
-    bus.emit("setGeoJSON", { json: yiBian, key: "alreadyDeal_YB" });
-    bus.emit("setGeoJSON", { json: rq_QiTa, key: "alreadyDeal_QT" });
-    selectedLayer.forEach((layer) => {
-      bus.emit("setLayerVisible", { layername: layer, isCheck: true });
+    let removedLayer = AllData.xunChaLayers.filter(layer => layer.includes('noDeal'));
+    let selectedLayer = AllData.xunChaLayers.filter(layer => layer.includes('alreadyDeal'));
+    bus.emit('removeMapDatas', AllData.xunChaLayers);
+    bus.emit('setGeoJSON', { json: zaWuDuiFang, key: 'alreadyDeal_DF' });
+    bus.emit('setGeoJSON', { json: sheBeiLost, key: 'alreadyDeal_DS' });
+    bus.emit('setGeoJSON', { json: xiaXian, key: 'alreadyDeal_XX' });
+    bus.emit('setGeoJSON', { json: yiBian, key: 'alreadyDeal_YB' });
+    bus.emit('setGeoJSON', { json: rq_QiTa, key: 'alreadyDeal_QT' });
+    selectedLayer.forEach(layer => {
+      bus.emit('setLayerVisible', { layername: layer, isCheck: true });
     });
   } else {
-    let removedLayer = AllData.xunChaLayers.filter((layer) =>
-      layer.includes("alreadyDeal")
-    );
-    let selectedLayer = AllData.xunChaLayers.filter((layer) => layer.includes("noDeal"));
-    bus.emit("removeMapDatas", AllData.xunChaLayers);
-    bus.emit("setGeoJSON", { json: no_zaWuDuiFang, key: "onDeal_DF" });
-    bus.emit("setGeoJSON", { json: no_sheBeiLost, key: "onDeal_DS" });
-    bus.emit("setGeoJSON", { json: no_xiaXian, key: "onDeal_XX" });
-    bus.emit("setGeoJSON", { json: no_yiBian, key: "onDeal_YB" });
-    bus.emit("setGeoJSON", { json: no_rq_QiTa, key: "onDeal_QT" });
-    selectedLayer.forEach((layer) => {
-      bus.emit("setLayerVisible", { layername: layer, isCheck: true });
+    let removedLayer = AllData.xunChaLayers.filter(layer => layer.includes('alreadyDeal'));
+    let selectedLayer = AllData.xunChaLayers.filter(layer => layer.includes('noDeal'));
+    bus.emit('removeMapDatas', AllData.xunChaLayers);
+    bus.emit('setGeoJSON', { json: no_zaWuDuiFang, key: 'onDeal_DF' });
+    bus.emit('setGeoJSON', { json: no_sheBeiLost, key: 'onDeal_DS' });
+    bus.emit('setGeoJSON', { json: no_xiaXian, key: 'onDeal_XX' });
+    bus.emit('setGeoJSON', { json: no_yiBian, key: 'onDeal_YB' });
+    bus.emit('setGeoJSON', { json: no_rq_QiTa, key: 'onDeal_QT' });
+    selectedLayer.forEach(layer => {
+      bus.emit('setLayerVisible', { layername: layer, isCheck: true });
     });
   }
 };
 // 巡查反馈
-const XunChaFanKui = (item) => {
+const XunChaFanKui = item => {
   let removedLayer = [];
   let selectedLayer = [];
   newfiberMapbox.map.easeTo({
@@ -685,80 +627,60 @@
     pitch: 55,
   });
   switch (item.name) {
-    case "堆放杂物":
-      removedLayer = AllData.xunChaLayers.filter(
-        (layer) => layer != "alreadyDeal_DF" && layer != "noDeal_DF"
-      );
-      selectedLayer = AllData.xunChaLayers.filter(
-        (layer) => layer == "alreadyDeal_DF" || layer == "noDeal_DF"
-      );
-      selectedLayer.forEach((layer) => {
-        bus.emit("setLayerVisible", { layername: layer, isCheck: true });
+    case '堆放杂物':
+      removedLayer = AllData.xunChaLayers.filter(layer => layer != 'alreadyDeal_DF' && layer != 'noDeal_DF');
+      selectedLayer = AllData.xunChaLayers.filter(layer => layer == 'alreadyDeal_DF' || layer == 'noDeal_DF');
+      selectedLayer.forEach(layer => {
+        bus.emit('setLayerVisible', { layername: layer, isCheck: true });
       });
-      removedLayer.forEach((layer) => {
-        bus.emit("setLayerVisible", { layername: layer, isCheck: false });
+      removedLayer.forEach(layer => {
+        bus.emit('setLayerVisible', { layername: layer, isCheck: false });
       });
       break;
-    case "设备丢失":
-      removedLayer = AllData.xunChaLayers.filter(
-        (layer) => layer != "alreadyDeal_DS" && layer != "noDeal_DS"
-      );
-      selectedLayer = AllData.xunChaLayers.filter(
-        (layer) => layer == "alreadyDeal_DS" || layer == "noDeal_DS"
-      );
-      selectedLayer.forEach((layer) => {
-        bus.emit("setLayerVisible", { layername: layer, isCheck: true });
+    case '设备丢失':
+      removedLayer = AllData.xunChaLayers.filter(layer => layer != 'alreadyDeal_DS' && layer != 'noDeal_DS');
+      selectedLayer = AllData.xunChaLayers.filter(layer => layer == 'alreadyDeal_DS' || layer == 'noDeal_DS');
+      selectedLayer.forEach(layer => {
+        bus.emit('setLayerVisible', { layername: layer, isCheck: true });
       });
-      removedLayer.forEach((layer) => {
-        bus.emit("setLayerVisible", { layername: layer, isCheck: false });
+      removedLayer.forEach(layer => {
+        bus.emit('setLayerVisible', { layername: layer, isCheck: false });
       });
       break;
-    case "下陷":
-      removedLayer = AllData.xunChaLayers.filter(
-        (layer) => layer != "alreadyDeal_XX" && layer != "noDeal_XX"
-      );
-      selectedLayer = AllData.xunChaLayers.filter(
-        (layer) => layer == "alreadyDeal_XX" || layer == "noDeal_XX"
-      );
-      selectedLayer.forEach((layer) => {
-        bus.emit("setLayerVisible", { layername: layer, isCheck: true });
+    case '下陷':
+      removedLayer = AllData.xunChaLayers.filter(layer => layer != 'alreadyDeal_XX' && layer != 'noDeal_XX');
+      selectedLayer = AllData.xunChaLayers.filter(layer => layer == 'alreadyDeal_XX' || layer == 'noDeal_XX');
+      selectedLayer.forEach(layer => {
+        bus.emit('setLayerVisible', { layername: layer, isCheck: true });
       });
-      removedLayer.forEach((layer) => {
-        bus.emit("setLayerVisible", { layername: layer, isCheck: false });
+      removedLayer.forEach(layer => {
+        bus.emit('setLayerVisible', { layername: layer, isCheck: false });
       });
       break;
-    case "异变":
-      removedLayer = AllData.xunChaLayers.filter(
-        (layer) => layer != "alreadyDeal_YB" && layer != "noDeal_YB"
-      );
-      selectedLayer = AllData.xunChaLayers.filter(
-        (layer) => layer == "alreadyDeal_YB" || layer == "noDeal_YB"
-      );
-      selectedLayer.forEach((layer) => {
-        bus.emit("setLayerVisible", { layername: layer, isCheck: true });
+    case '异变':
+      removedLayer = AllData.xunChaLayers.filter(layer => layer != 'alreadyDeal_YB' && layer != 'noDeal_YB');
+      selectedLayer = AllData.xunChaLayers.filter(layer => layer == 'alreadyDeal_YB' || layer == 'noDeal_YB');
+      selectedLayer.forEach(layer => {
+        bus.emit('setLayerVisible', { layername: layer, isCheck: true });
       });
-      removedLayer.forEach((layer) => {
-        bus.emit("setLayerVisible", { layername: layer, isCheck: false });
+      removedLayer.forEach(layer => {
+        bus.emit('setLayerVisible', { layername: layer, isCheck: false });
       });
       break;
-    case "其他":
-      removedLayer = AllData.xunChaLayers.filter(
-        (layer) => layer != "alreadyDeal_QT" && layer != "noDeal_QT"
-      );
-      selectedLayer = AllData.xunChaLayers.filter(
-        (layer) => layer == "alreadyDeal_QT" || layer == "noDeal_QT"
-      );
-      selectedLayer.forEach((layer) => {
-        bus.emit("setLayerVisible", { layername: layer, isCheck: true });
+    case '其他':
+      removedLayer = AllData.xunChaLayers.filter(layer => layer != 'alreadyDeal_QT' && layer != 'noDeal_QT');
+      selectedLayer = AllData.xunChaLayers.filter(layer => layer == 'alreadyDeal_QT' || layer == 'noDeal_QT');
+      selectedLayer.forEach(layer => {
+        bus.emit('setLayerVisible', { layername: layer, isCheck: true });
       });
-      removedLayer.forEach((layer) => {
-        bus.emit("setLayerVisible", { layername: layer, isCheck: false });
+      removedLayer.forEach(layer => {
+        bus.emit('setLayerVisible', { layername: layer, isCheck: false });
       });
       break;
   }
 };
 // 风险评估
-const TuChengClick = (item) => {
+const TuChengClick = item => {
   newfiberMapbox.map.easeTo({
     center: [109.488, 36.596],
     zoom: 12,
@@ -766,61 +688,61 @@
   });
   switch (item) {
     case 0:
-      bus.emit("setLayerVisible", { layername: "rq_SZLH", isCheck: false });
-      bus.emit("setLayerVisible", { layername: "rq_TYLH", isCheck: false });
-      bus.emit("setLayerVisible", { layername: "rq_LGLH", isCheck: false });
-      bus.emit("setLayerVisible", { layername: "rq_other", isCheck: false });
-      bus.emit("setLayerVisible", { layername: "rq_all", isCheck: true }); //所有管网rq_all、市政rq_SZLH、庭院rq_TYLH、立管rq_LGLH、其他rq_other
+      bus.emit('setLayerVisible', { layername: 'rq_SZLH', isCheck: false });
+      bus.emit('setLayerVisible', { layername: 'rq_TYLH', isCheck: false });
+      bus.emit('setLayerVisible', { layername: 'rq_LGLH', isCheck: false });
+      bus.emit('setLayerVisible', { layername: 'rq_other', isCheck: false });
+      bus.emit('setLayerVisible', { layername: 'rq_all', isCheck: true }); //所有管网rq_all、市政rq_SZLH、庭院rq_TYLH、立管rq_LGLH、其他rq_other
       break;
     case 1:
-      bus.emit("setLayerVisible", { layername: "rq_all", isCheck: false }); //所有管网rq_all、市政rq_SZLH、庭院rq_TYLH、立管rq_LGLH、其他rq_other
-      bus.emit("setLayerVisible", { layername: "rq_SZLH", isCheck: true });
-      bus.emit("setLayerVisible", { layername: "rq_TYLH", isCheck: false });
-      bus.emit("setLayerVisible", { layername: "rq_LGLH", isCheck: false });
-      bus.emit("setLayerVisible", { layername: "rq_other", isCheck: false });
+      bus.emit('setLayerVisible', { layername: 'rq_all', isCheck: false }); //所有管网rq_all、市政rq_SZLH、庭院rq_TYLH、立管rq_LGLH、其他rq_other
+      bus.emit('setLayerVisible', { layername: 'rq_SZLH', isCheck: true });
+      bus.emit('setLayerVisible', { layername: 'rq_TYLH', isCheck: false });
+      bus.emit('setLayerVisible', { layername: 'rq_LGLH', isCheck: false });
+      bus.emit('setLayerVisible', { layername: 'rq_other', isCheck: false });
       break;
     case 2:
-      bus.emit("setLayerVisible", { layername: "rq_all", isCheck: false }); //所有管网rq_all、市政rq_SZLH、庭院rq_TYLH、立管rq_LGLH、其他rq_other
-      bus.emit("setLayerVisible", { layername: "rq_SZLH", isCheck: false });
-      bus.emit("setLayerVisible", { layername: "rq_TYLH", isCheck: true });
-      bus.emit("setLayerVisible", { layername: "rq_LGLH", isCheck: false });
-      bus.emit("setLayerVisible", { layername: "rq_other", isCheck: false });
+      bus.emit('setLayerVisible', { layername: 'rq_all', isCheck: false }); //所有管网rq_all、市政rq_SZLH、庭院rq_TYLH、立管rq_LGLH、其他rq_other
+      bus.emit('setLayerVisible', { layername: 'rq_SZLH', isCheck: false });
+      bus.emit('setLayerVisible', { layername: 'rq_TYLH', isCheck: true });
+      bus.emit('setLayerVisible', { layername: 'rq_LGLH', isCheck: false });
+      bus.emit('setLayerVisible', { layername: 'rq_other', isCheck: false });
 
       break;
     case 3:
-      bus.emit("setLayerVisible", { layername: "rq_all", isCheck: false }); //所有管网rq_all、市政rq_SZLH、庭院rq_TYLH、立管rq_LGLH、其他rq_other
-      bus.emit("setLayerVisible", { layername: "rq_SZLH", isCheck: false });
-      bus.emit("setLayerVisible", { layername: "rq_TYLH", isCheck: false });
-      bus.emit("setLayerVisible", { layername: "rq_LGLH", isCheck: true });
-      bus.emit("setLayerVisible", { layername: "rq_other", isCheck: false });
+      bus.emit('setLayerVisible', { layername: 'rq_all', isCheck: false }); //所有管网rq_all、市政rq_SZLH、庭院rq_TYLH、立管rq_LGLH、其他rq_other
+      bus.emit('setLayerVisible', { layername: 'rq_SZLH', isCheck: false });
+      bus.emit('setLayerVisible', { layername: 'rq_TYLH', isCheck: false });
+      bus.emit('setLayerVisible', { layername: 'rq_LGLH', isCheck: true });
+      bus.emit('setLayerVisible', { layername: 'rq_other', isCheck: false });
       break;
     case 4:
-      bus.emit("setLayerVisible", { layername: "rq_all", isCheck: false }); //所有管网rq_all、市政rq_SZLH、庭院rq_TYLH、立管rq_LGLH、其他rq_other
-      bus.emit("setLayerVisible", { layername: "rq_SZLH", isCheck: false });
-      bus.emit("setLayerVisible", { layername: "rq_TYLH", isCheck: false });
-      bus.emit("setLayerVisible", { layername: "rq_LGLH", isCheck: false });
-      bus.emit("setLayerVisible", { layername: "rq_other", isCheck: true });
+      bus.emit('setLayerVisible', { layername: 'rq_all', isCheck: false }); //所有管网rq_all、市政rq_SZLH、庭院rq_TYLH、立管rq_LGLH、其他rq_other
+      bus.emit('setLayerVisible', { layername: 'rq_SZLH', isCheck: false });
+      bus.emit('setLayerVisible', { layername: 'rq_TYLH', isCheck: false });
+      bus.emit('setLayerVisible', { layername: 'rq_LGLH', isCheck: false });
+      bus.emit('setLayerVisible', { layername: 'rq_other', isCheck: true });
       break;
   }
 };
 
 // 风险
-const FengXianClick = (item) => {
+const FengXianClick = item => {
   let data = {
-    title: item.zb + " 风险监测",
-    comIDs: ["RQ_FengXianJianCe"],
+    title: item.zb + ' 风险监测',
+    comIDs: ['RQ_FengXianJianCe'],
   };
-  bus.emit("publicDialog", data);
+  bus.emit('publicDialog', data);
   // 传给组件数据
 
   setTimeout(() => {
-    bus.emit("getDataListFxjc", item);
+    bus.emit('getDataListFxjc', item);
   }, 500);
 };
 
 // 现场连线
-const XianChangLianXian = (item) => {
-  bus.emit("OpenRY");
+const XianChangLianXian = item => {
+  bus.emit('OpenRY');
 };
 
 watch(
@@ -832,14 +754,13 @@
 );
 //燃气超标
 const showIndexOver = () => {
-  bus.emit("removeMapDatas", AllData.xunChaLayers);
-  let key = "warning_monitor";
-  bus.emit("getGeojsonByType", {
+  bus.emit('removeMapDatas', AllData.xunChaLayers);
+  let key = 'warning_monitor';
+  bus.emit('getGeojsonByType', {
     type: key,
-    callback: (geojson) => {
-      if (!!!geojson.features.length)
-        bus.emit("setGeoJSON", { json: yanAnRQoverindex, key: "warning_monitor" });
-      bus.emit("setLayerVisible", { type: "point", layername: key, isCheck: true });
+    callback: geojson => {
+      if (!!!geojson.features.length) bus.emit('setGeoJSON', { json: yanAnRQoverindex, key: 'warning_monitor' });
+      bus.emit('setLayerVisible', { type: 'point', layername: key, isCheck: true });
     },
   });
   newfiberMapbox.map.easeTo({
@@ -849,14 +770,13 @@
 };
 //燃气告警
 const showIndexWarning = () => {
-  bus.emit("removeMapDatas", AllData.xunChaLayers);
-  let key = "warning_monitor";
-  bus.emit("getGeojsonByType", {
+  bus.emit('removeMapDatas', AllData.xunChaLayers);
+  let key = 'warning_monitor';
+  bus.emit('getGeojsonByType', {
     type: key,
-    callback: (geojson) => {
-      if (!!!geojson.features.length)
-        bus.emit("setGeoJSON", { json: yanAnWarring, key: "warning_monitor" });
-      bus.emit("setLayerVisible", { type: "point", layername: key, isCheck: true });
+    callback: geojson => {
+      if (!!!geojson.features.length) bus.emit('setGeoJSON', { json: yanAnWarring, key: 'warning_monitor' });
+      bus.emit('setLayerVisible', { type: 'point', layername: key, isCheck: true });
     },
   });
   newfiberMapbox.map.easeTo({
@@ -867,47 +787,46 @@
 onMounted(() => {
   let initeRQTimer = setInterval(() => {
     if (!newfiberMapbox) return;
-    if (!newfiberMapbox.map.getLayer("rq_pipeline_info")) return;
-    if (!newfiberMapbox.map.getLayer("sx_ya_smx_rq_point")) return;
+    if (!newfiberMapbox.map.getLayer('rq_pipeline_info')) return;
+    if (!newfiberMapbox.map.getLayer('sx_ya_smx_rq_point')) return;
     newfiberMapbox.map.easeTo({
       center: [109.488, 36.596],
       zoom: 13,
     });
     //告警点事件
-    let warningPoint = newfiberMapbox
-      .getLayers()
-      .filter((feature) => feature.newfiberId == "warning_monitor")[0];
+    let warningPoint = newfiberMapbox.getLayers().filter(feature => feature.newfiberId == 'warning_monitor')[0];
     if (warningPoint) {
-      warningPoint.on("click", (e) => {
+      warningPoint.on('click', e => {
         let popupData = e.feature.properties;
 
-        console.log("popupData---", "告警---------", popupData);
+        console.log('popupData---', '告警---------', popupData);
       });
     }
-    bus.emit("setLayerVisible", { layername: "rq_all", isCheck: true }); //所有管网rq_all、市政rq_SZLH、庭院rq_TYLH、立管rq_LGLH、其他rq_other
+    bus.emit('setLayerVisible', { layername: 'rq_all', isCheck: true }); //所有管网rq_all、市政rq_SZLH、庭院rq_TYLH、立管rq_LGLH、其他rq_other
 
     clearInterval(initeRQTimer);
   }, 100);
   initEcharts(1);
 });
 onBeforeUnmount(() => {
-  bus.emit("setLayerVisible", { layername: "rq_all", isCheck: false });
-  bus.emit("setLayerVisible", { layername: "rq_SZLH", isCheck: false });
-  bus.emit("setLayerVisible", { layername: "rq_TYLH", isCheck: false });
-  bus.emit("setLayerVisible", { layername: "rq_LGLH", isCheck: false });
-  bus.emit("setLayerVisible", { layername: "rq_other", isCheck: false });
-  bus.emit("removeMapDatas", AllData.xunChaLayers);
-  bus.emit("removeMapDatas", ["warning_monitor"]);
-  bus.emit("setLayerVisible", { layername: "warning_monitor", isCheck: false });
-  bus.emit("closeCesiumPopup");
-  if (!!newfiberMapbox.getLayerByName("rqLine")) {
-    newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName("rqLine"));
+  bus.emit('setLayerVisible', { layername: 'rq_all', isCheck: false });
+  bus.emit('setLayerVisible', { layername: 'rq_SZLH', isCheck: false });
+  bus.emit('setLayerVisible', { layername: 'rq_TYLH', isCheck: false });
+  bus.emit('setLayerVisible', { layername: 'rq_LGLH', isCheck: false });
+  bus.emit('setLayerVisible', { layername: 'rq_other', isCheck: false });
+  bus.emit('removeMapDatas', AllData.xunChaLayers);
+  bus.emit('removeMapDatas', ['warning_monitor']);
+  bus.emit('setLayerVisible', { layername: 'warning_monitor', isCheck: false });
+  bus.emit('closeCesiumPopup');
+  bus.emit('SetLayerShow', ['蓝色地图']);
+  if (!!newfiberMapbox.getLayerByName('rqLine')) {
+    newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName('rqLine'));
   }
 });
 </script>
 
 <style lang="scss" scoped>
-@import "@/assets/styles/transition_oneMap.scss";
+@import '@/assets/styles/transition_oneMap.scss';
 #ZHRQ {
   .LeftBox {
     width: 450px;
@@ -915,11 +834,7 @@
     position: absolute;
     left: 10px;
     top: 70px;
-    background: linear-gradient(
-      0deg,
-      rgba(0, 43, 67, 0.8) 0%,
-      rgba(0, 69, 108, 0.8) 100%
-    );
+    background: linear-gradient(0deg, rgba(0, 43, 67, 0.8) 0%, rgba(0, 69, 108, 0.8) 100%);
     border-radius: 6px;
     border: 1px solid #47eef3;
     box-sizing: border-box;
@@ -994,7 +909,7 @@
         width: 100%;
         height: calc(100% - 72px);
         margin-top: 10px;
-        background: url("@/assets/images/Sponge_screen/RQ/Ech.png") no-repeat center;
+        background: url('@/assets/images/Sponge_screen/RQ/Ech.png') no-repeat center;
         position: relative;
 
         .ClickDiv1 {
@@ -1052,7 +967,7 @@
           height: 42px;
           width: calc(50% - 9px);
           display: flex;
-          background: url("@/assets/images/Sponge_screen/RQ/RQ_FX.png") no-repeat center;
+          background: url('@/assets/images/Sponge_screen/RQ/RQ_FX.png') no-repeat center;
           background-size: 100% 100%;
           cursor: pointer;
 
@@ -1284,11 +1199,7 @@
     position: absolute;
     right: 10px;
     top: 70px;
-    background: linear-gradient(
-      0deg,
-      rgba(0, 43, 67, 0.8) 0%,
-      rgba(0, 69, 108, 0.8) 100%
-    );
+    background: linear-gradient(0deg, rgba(0, 43, 67, 0.8) 0%, rgba(0, 69, 108, 0.8) 100%);
     border-radius: 6px;
     border: 1px solid #47eef3;
     box-sizing: border-box;
@@ -1446,11 +1357,7 @@
     position: absolute;
     left: 520px;
     top: 110px;
-    background: linear-gradient(
-      0deg,
-      rgba(0, 43, 67, 0.8) 0%,
-      rgba(0, 69, 108, 0.8) 100%
-    );
+    background: linear-gradient(0deg, rgba(0, 43, 67, 0.8) 0%, rgba(0, 69, 108, 0.8) 100%);
     border-radius: 6px;
     border: 1px solid #47eef3;
     box-sizing: border-box;
@@ -1544,8 +1451,7 @@
     .Box_header {
       width: 100%;
       height: 43px;
-      background: url("@/assets/images/Sponge_screen/Box_HeaderBackground.png") no-repeat
-        center;
+      background: url('@/assets/images/Sponge_screen/Box_HeaderBackground.png') no-repeat center;
       background-size: cover;
       font-family: PangMenZhengDao;
       font-weight: 400;
diff --git a/src/views/oneMap/components/ZTGL.vue b/src/views/oneMap/components/ZTGL.vue
index 796f6da..f524835 100644
--- a/src/views/oneMap/components/ZTGL.vue
+++ b/src/views/oneMap/components/ZTGL.vue
@@ -18,7 +18,7 @@
 import testProjectionLabel from '@/assets/testProjectionLabel.json';
 import mapBoxVectorLayer from '@/utils/GISdocument/mapboxVectorLayer.js';
 import xtb_img from '@/assets/newImgs/xtb_img.png';
-
+import bus from '@/bus';
 const showPanel = ref(true); //面板展开收起
 // 面板内容展开收起控制
 const props = defineProps({
@@ -67,8 +67,11 @@
   }, 100);
 });
 onBeforeUnmount(() => {
-  newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName('testProjection'));
-  mapBoxVectorLayer.removeByIds(['testProjection']);
+  bus.emit('SetLayerShow', ['蓝色地图']);
+  if (newfiberMapbox.getLayerByName('testProjection')) {
+    newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName('testProjection'));
+    mapBoxVectorLayer.removeByIds(['testProjection']);
+  }
 });
 </script>
 
diff --git a/src/views/oneMap/components/chartLogging.vue b/src/views/oneMap/components/chartLogging.vue
index c9fdcc4..2ea8b4d 100644
--- a/src/views/oneMap/components/chartLogging.vue
+++ b/src/views/oneMap/components/chartLogging.vue
@@ -45,6 +45,7 @@
             color: '#fff',
           },
         },
+
         xAxis: [
           {
             type: 'category',
@@ -81,6 +82,7 @@
               },
             },
           },
+
           {
             name: props.data.yAxisName2 || '',
             inverse: false,
@@ -101,6 +103,16 @@
             },
           },
         ],
+        // 时间轴滑动选择器
+        dataZoom: [
+          {
+            show: true,
+            realtime: true,
+            start: 30,
+            end: 70,
+            xAxisIndex: [0, 1],
+          },
+        ],
         series: [
           {
             name: '降雨量(mm)',

diff --git a/package.json b/package.json
index 39861ad..e784d82 100644
--- a/package.json
+++ b/package.json
@@ -72,4 +72,4 @@
     "vite-plugin-svg-icons": "2.0.1",
     "vite-plugin-vue-setup-extend": "0.4.0"
   }
-}
+}
\ No newline at end of file
diff --git a/src/assets/images/fhpl/sqjca.png b/src/assets/images/fhpl/sqjca.png
index 0eb531c..00e619c 100644
--- a/src/assets/images/fhpl/sqjca.png
+++ b/src/assets/images/fhpl/sqjca.png
Binary files differ
diff --git a/src/views/oneMap/ConstructionEvaluation/JSPGLeftBox.vue b/src/views/oneMap/ConstructionEvaluation/JSPGLeftBox.vue
index 2a7ff07..3ee47c4 100644
--- a/src/views/oneMap/ConstructionEvaluation/JSPGLeftBox.vue
+++ b/src/views/oneMap/ConstructionEvaluation/JSPGLeftBox.vue
@@ -65,8 +65,9 @@
   </div>
   <!-- 污水收集处理 -->
   <div class="Sewagecollection">
-    <div class="ListBoxHeader" @click="showSewageFectory">
-      <div class="ListBoxHeader_font">污水收集处理</div>
+    <div class="topVehicl flex">
+      <div class="icon"></div>
+      <div class="name">污水收集处理</div>
     </div>
     <div class="wssjEch"></div>
   </div>
@@ -293,7 +294,31 @@
 .Sewagecollection {
   width: 450px;
   height: 25%;
-  // background: yellowgreen;
+
+  .topVehicl {
+    font-family: Source Han Sans CN;
+    font-weight: bold;
+    font-size: 14px;
+    color: #ebfeff;
+    align-items: center;
+    height: 30px;
+    // background: teal;
+    .icon {
+      position: relative;
+      top: -1px;
+      width: 25px;
+      height: 25px;
+      background: url('@/assets/newImgs/xtb_img.png') no-repeat;
+    }
+
+    .name {
+      background: linear-gradient(0deg, rgba(0, 242, 255, 0.5) 0%, rgba(0, 242, 255, 0) 100%);
+      padding: 0px 3px;
+      height: 10px;
+      line-height: 0px;
+      margin-top: 6px;
+    }
+  }
   .wssjEch {
     margin: 5px auto;
     width: 420px;
diff --git a/src/views/oneMap/ConstructionEvaluation/JSPGRightBox.vue b/src/views/oneMap/ConstructionEvaluation/JSPGRightBox.vue
index dbeddc8..3f696aa 100644
--- a/src/views/oneMap/ConstructionEvaluation/JSPGRightBox.vue
+++ b/src/views/oneMap/ConstructionEvaluation/JSPGRightBox.vue
@@ -2,7 +2,7 @@
   <!-- 绩效管理 -->
   <div class="management">
     <div class="ListBoxHeader">
-      <div class="ListBoxHeader_font">绩效管理</div>
+      <div class="ListBoxHeader_font">管理绩效</div>
     </div>
     <!-- 年份切换 -->
     <div class="subRightBox">
diff --git a/src/views/oneMap/FloodStuationReview/sqhgBottomBox.vue b/src/views/oneMap/FloodStuationReview/sqhgBottomBox.vue
index 53d38bb..d178c59 100644
--- a/src/views/oneMap/FloodStuationReview/sqhgBottomBox.vue
+++ b/src/views/oneMap/FloodStuationReview/sqhgBottomBox.vue
@@ -117,8 +117,8 @@
 const ranLeng = [
   [
     { value: '0-0.2', color: 'rgba(7, 213, 118, 0)' },
-    { value: '0.2-5', color: 'rgba(7, 213, 118, 1)' },
-    { value: '5-25', color: 'rgba(38, 129, 240,1)' },
+    { value: '0.2-5', color: 'rgba(38, 129, 240,1)' },
+    { value: '5-25', color: 'rgb(222, 230, 0)' },
     { value: '>25', color: 'rgba(255, 26, 26, 1)' },
   ],
   [
@@ -235,14 +235,18 @@
   stepNum.value = 0;
   hgEngPlay.value = false;
   showRainLegend.value = false;
-  // NewFiberMapUtils.disposeRainfall('')
-  // newfiberMap.setLayersVisible(["krigingImage"],false)
+  // newfiberMapbox.map.removeLayer('canvas-layer0');
+  // newfiberMapbox.map.removeSource('canvas-source0');
   hoursList.value.activeIndex = stepNum.value;
   clearInterval(runDayInterval.value);
   if (runDayInterval.value) {
     runDayInterval.value = null;
     refresh.value = Math.random();
   }
+  // if (newfiberMapbox.map.getLayer('canvas-layer0')) {
+  //   newfiberMapbox.map.removeLayer('canvas-layer0');
+  //   newfiberMapbox.map.removeSource('canvas-source0');
+  // }
 }
 
 function changeChartData() {
@@ -375,10 +379,10 @@
 ];*/
 let colorScale = [
   { value: '0', color: 'rgba(7, 213, 118, 0)' },
-  { value: '0.2', color: 'rgba(7, 213, 118, 1)' },
-  { value: '5', color: 'rgba(38, 129, 240,1)' },
-  { value: '25', color: 'rgba(255, 26, 26, 1)' },
-  { value: '250', color: 'rgba(255, 26, 26, 1)' },
+  { value: '0.2', color: 'rgb(38, 129, 240)' },
+  { value: '5', color: 'rgb(222, 230, 0)' },
+  { value: '25', color: 'rgb(255, 26, 26)' },
+  { value: '250', color: 'rgb(255, 26, 26)' },
 ];
 let imageFiles = [];
 let canvas = [];
diff --git a/src/views/oneMap/FloodStuationReview/xqhgLeftBox.vue b/src/views/oneMap/FloodStuationReview/xqhgLeftBox.vue
index 14170d1..c43cb7b 100644
--- a/src/views/oneMap/FloodStuationReview/xqhgLeftBox.vue
+++ b/src/views/oneMap/FloodStuationReview/xqhgLeftBox.vue
@@ -122,7 +122,7 @@
         background: linear-gradient(0deg, rgba(0, 242, 255, 0.5) 0%, rgba(0, 242, 255, 0) 100%);
         height: 10px;
         line-height: 0px;
-        margin-top: 10px;
+        margin-top: 12px;
       }
     }
     .ScheduEcharts {
@@ -161,7 +161,7 @@
       background: linear-gradient(0deg, rgba(0, 242, 255, 0.5) 0%, rgba(0, 242, 255, 0) 100%);
       height: 10px;
       line-height: 0px;
-      margin-top: 10px;
+      margin-top: 12px;
     }
   }
   .VehiclEcharts {
@@ -196,7 +196,7 @@
       background: linear-gradient(0deg, rgba(0, 242, 255, 0.5) 0%, rgba(0, 242, 255, 0) 100%);
       height: 10px;
       line-height: 0px;
-      margin-top: 10px;
+      margin-top: 12px;
     }
   }
   .MaterialEcharts {
diff --git a/src/views/oneMap/LayerControl/LayerControl.vue b/src/views/oneMap/LayerControl/LayerControl.vue
index 37d0576..cc8e024 100644
--- a/src/views/oneMap/LayerControl/LayerControl.vue
+++ b/src/views/oneMap/LayerControl/LayerControl.vue
@@ -30,29 +30,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 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({
   // 图层控制面板的渲染数据
   /**图层面板数据字段说明
@@ -69,72 +70,90 @@
       Show: true,
       children: [
         {
-          layerName: "中心城区",
-          layerKey: "centerCity",
-          layerIcon: requireTuChengImg("zhongxinchengqu"),
+          layerName: '蓝色地图',
+          layerKey: 'blackMap',
+          layerIcon: requireTuChengImg('zhongxinchengqu'),
+          layerVisible: false,
+        },
+        {
+          layerName: '白色地图',
+          layerKey: 'whiteMap',
+          layerIcon: requireTuChengImg('zhongxinchengqu'),
+          layerVisible: false,
+        },
+        {
+          layerName: '影像地图',
+          layerKey: 'imageMap',
+          layerIcon: requireTuChengImg('zhongxinchengqu'),
+          layerVisible: false,
+        },
+        {
+          layerName: '中心城区',
+          layerKey: 'centerCity',
+          layerIcon: requireTuChengImg('zhongxinchengqu'),
           layerVisible: false,
           dynamicLineData: yanAnCenterCity,
         },
         {
-          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,
         },
@@ -145,38 +164,38 @@
       Show: true,
       children: [
         {
-          layerName: "燃气管网",
-          layerKey: "rq_all",
+          layerName: '燃气管网',
+          layerKey: 'rq_all',
           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,
         },
@@ -187,22 +206,22 @@
       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,
         },
@@ -213,8 +232,8 @@
         //   layerVisible: false,
         // },
         {
-          layerName: "雨水泵站",
-          layerKey: "YSBZ",
+          layerName: '雨水泵站',
+          layerKey: 'YSBZ',
           layerIcon: null,
           layerVisible: false,
           data: yanAnYSBZ,
@@ -226,14 +245,14 @@
       Show: true,
       children: [
         {
-          layerName: "污水分区",
-          layerKey: "sewageArea",
+          layerName: '污水分区',
+          layerKey: 'sewageArea',
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: "污水管网",
-          layerKey: "wsLine1",
+          layerName: '污水管网',
+          layerKey: 'wsLine1',
           layerIcon: null,
           layerVisible: false,
         },
@@ -250,8 +269,8 @@
         //   layerVisible: false,
         // },
         {
-          layerName: "污水处理厂",
-          layerKey: "WSCLC",
+          layerName: '污水处理厂',
+          layerKey: 'WSCLC',
           layerIcon: null,
           layerVisible: false,
           data: yanAnWSCLC,
@@ -263,36 +282,36 @@
       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,
@@ -307,10 +326,10 @@
     .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,
@@ -319,37 +338,79 @@
 watch(
   () => props.ShowTuCheng,
   (newValue, oldValue) => {
-    console.log("ShowTuCheng变化了", newValue, oldValue);
+    console.log('ShowTuCheng变化了', newValue, oldValue);
   },
   { immediate: true, deep: true }
 );
 
-const layerClick = (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 });
+  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 => {
+      oldIds.push(layer.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]));
+    });
+    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');
+    let newMapStyle;
+    let oldMapStyle = newfiberMapbox.map.getStyle();
+    let oldIds = [];
+    oldMapStyle.layers.forEach(layer => {
+      oldIds.push(layer.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]));
+    });
+    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.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.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, // 持续时间，延时
@@ -360,29 +421,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, // 持续时间，延时
@@ -393,22 +454,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, // 持续时间，延时
@@ -419,29 +480,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) : '';
       });
     });
   });
@@ -449,17 +510,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>
 
@@ -470,7 +531,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;
@@ -486,7 +547,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;
diff --git a/src/views/oneMap/components/FXHG.vue b/src/views/oneMap/components/FXHG.vue
index 8924475..44e9c21 100644
--- a/src/views/oneMap/components/FXHG.vue
+++ b/src/views/oneMap/components/FXHG.vue
@@ -40,6 +40,7 @@
   showPanel.value = true;
   showBottom.value = false;
   curType.value = true;
+  bus.emit('SetLayerShow', ['蓝色地图']);
   if (newfiberMapbox.map.getLayer('dynamicRoute')) {
     newfiberMapbox.map.removeLayer('dynamicRoute');
     newfiberMapbox.map.removeLayer('dynamicRoute_Symbol');
@@ -68,6 +69,7 @@
 
   let initePSTimer = setInterval(() => {
     if (!newfiberMapbox) return;
+    bus.emit('SetLayerShow', ['白色地图']);
     bus.emit('setLayerVisible', { layername: 'ysLine1', isCheck: true });
     //bus.emit('setLayerVisible', { layername: 'wsLine1', isCheck: true });
     clearInterval(initePSTimer);
diff --git a/src/views/oneMap/components/ZHHM.vue b/src/views/oneMap/components/ZHHM.vue
index d68bdc5..1f29507 100644
--- a/src/views/oneMap/components/ZHHM.vue
+++ b/src/views/oneMap/components/ZHHM.vue
@@ -648,6 +648,7 @@
     zoom: 12,
     pitch: 55,
   });
+  bus.emit('SetLayerShow', ['蓝色地图']);
   // 先清空
   bus.emit('clearAllLayer');
   let removedLayer = ['HMJZYSQ', 'HMXGYLD', 'HMXDLGC', 'HMXSX', 'GWPCYXF'];
diff --git a/src/views/oneMap/components/ZHHM_JCFX.vue b/src/views/oneMap/components/ZHHM_JCFX.vue
index c420911..42e81e6 100644
--- a/src/views/oneMap/components/ZHHM_JCFX.vue
+++ b/src/views/oneMap/components/ZHHM_JCFX.vue
@@ -411,6 +411,7 @@
 });
 onBeforeUnmount(() => {
   bus.emit('clearAllLayer');
+  bus.emit('SetLayerShow', ['蓝色地图']);
   let removedLayer = ['HMJZYSQ', 'HMXGYLD', 'HMXDLGC', 'HMXSX', 'GWPCYXF'];
   removedLayer.forEach(layer => {
     bus.emit('setLayerVisible', { layername: layer, isCheck: false });
diff --git a/src/views/oneMap/components/ZHHM_JSPG.vue b/src/views/oneMap/components/ZHHM_JSPG.vue
index 7400f1b..df2c85f 100644
--- a/src/views/oneMap/components/ZHHM_JSPG.vue
+++ b/src/views/oneMap/components/ZHHM_JSPG.vue
@@ -53,6 +53,7 @@
 };
 
 onMounted(() => {
+  bus.emit('SetLayerShow', ['蓝色地图']);
   newfiberMapbox.map.easeTo({
     center: [109.488, 36.596],
     zoom: 13,
diff --git a/src/views/oneMap/components/ZHPS.vue b/src/views/oneMap/components/ZHPS.vue
index 7ce8bb0..f09ddbc 100644
--- a/src/views/oneMap/components/ZHPS.vue
+++ b/src/views/oneMap/components/ZHPS.vue
@@ -43,6 +43,7 @@
   });
 });
 onBeforeUnmount(() => {
+  bus.emit('SetLayerShow', ['蓝色地图']);
   // bus.emit('setLayerVisible', { layername: 'ysLine1', isCheck: false });
   // bus.emit('setLayerVisible', { layername: 'wsLine1', isCheck: false });
 });
diff --git a/src/views/oneMap/components/ZHRQ.vue b/src/views/oneMap/components/ZHRQ.vue
index 40a70cc..493c201 100644
--- a/src/views/oneMap/components/ZHRQ.vue
+++ b/src/views/oneMap/components/ZHRQ.vue
@@ -1,31 +1,17 @@
 <template>
   <div id="ZHRQ">
-    <div
-      :class="[
-        'LeftBox',
-        'animate__animated',
-        showPanel ? 'animate__fadeOutLeft' : 'animate__fadeInLeft',
-      ]"
-    >
+    <div :class="['LeftBox', 'animate__animated', showPanel ? 'animate__fadeOutLeft' : 'animate__fadeInLeft']">
       <div class="ComBox LeftBox1_1">
         <div class="Box_header">管道风险评估</div>
         <div class="Box_Body">
           <div class="TJListBox">
             <div class="TJList TJList_RQ" @click="TuChengClick(0)">
-              <img
-                class="TJListImg"
-                src="@/assets/images/Sponge_screen/RQ/RQ_RQ.png"
-                alt=""
-              />
+              <img class="TJListImg" src="@/assets/images/Sponge_screen/RQ/RQ_RQ.png" alt="" />
               <span class="TJListName">燃气管道</span>
               <span class="TJListValue">4549km</span>
             </div>
             <div class="TJList TJList_GZ">
-              <img
-                class="TJListImg"
-                src="@/assets/images/Sponge_screen/RQ/RQ_GZ.png"
-                alt=""
-              />
+              <img class="TJListImg" src="@/assets/images/Sponge_screen/RQ/RQ_GZ.png" alt="" />
               <span class="TJListName">需改造</span>
               <span class="TJListValue">1922km</span>
             </div>
@@ -71,9 +57,7 @@
             </div>
             <div class="tableBody">
               <div class="tableBodyList" v-for="item in AllData.FXJCData">
-                <span class="tableBodyList_span1" @click="FengXianClick(item)">{{
-                  item.zb
-                }}</span>
+                <span class="tableBodyList_span1" @click="FengXianClick(item)">{{ item.zb }}</span>
                 <span class="tableBodyList_span2" @click="FengXianClick(item)"
                   >{{ item.sz }}
                   <el-icon v-if="item.szzt" color="lime" size="14"><Top /> </el-icon>
@@ -81,11 +65,9 @@
                     <Bottom />
                   </el-icon>
                 </span>
-                <span
-                  class="tableBodyList_span3"
-                  :class="item.zt == 0 ? 'YJClass' : ''"
-                  >{{ item.zt == 0 ? "预警" : "正常" }}</span
-                >
+                <span class="tableBodyList_span3" :class="item.zt == 0 ? 'YJClass' : ''">{{
+                  item.zt == 0 ? '预警' : '正常'
+                }}</span>
                 <span class="tableBodyList_span4" @click="PaiFa(item)">派发</span>
               </div>
             </div>
@@ -110,13 +92,7 @@
         </div>
       </div>
     </div>
-    <div
-      :class="[
-        'RightBox',
-        'animate__animated',
-        showPanel ? 'animate__fadeOutRight' : 'animate__fadeInRight',
-      ]"
-    >
+    <div :class="['RightBox', 'animate__animated', showPanel ? 'animate__fadeOutRight' : 'animate__fadeInRight']">
       <div class="ComBox RightBox1_1">
         <div class="Box_header">辅助决策</div>
         <div class="Box_Body">
@@ -138,16 +114,10 @@
               <span class="JCListBox_List_value color_red">{{ item.yp }}</span>
             </div>
             <div class="JCListBox_List JCListBox_List_BTN">
-              <el-button
-                style="background: #03b6a0; color: white; border: none"
-                size="small"
-                @click="GongDanPaiFa(item)"
+              <el-button style="background: #03b6a0; color: white; border: none" size="small" @click="GongDanPaiFa(item)"
                 >工单派发</el-button
               >
-              <el-button
-                style="background: #03b6a0; color: white; border: none"
-                size="small"
-                @click="XianChangLianXian(item)"
+              <el-button style="background: #03b6a0; color: white; border: none" size="small" @click="XianChangLianXian(item)"
                 >现场联线</el-button
               >
             </div>
@@ -158,18 +128,12 @@
         <div class="Box_header">巡查反馈</div>
         <div class="Box_Body">
           <div class="FK_headerBox">
-            <div class="FK_headerBox_list" @click="dealOrNoDeal(1)">
-              <span class="FK_headerBox_list_colorBox1"></span> 未处理
-            </div>
-            <div class="FK_headerBox_list" @click="dealOrNoDeal(2)">
-              <span class="FK_headerBox_list_colorBox2"></span> 已处理
-            </div>
+            <div class="FK_headerBox_list" @click="dealOrNoDeal(1)"><span class="FK_headerBox_list_colorBox1"></span> 未处理</div>
+            <div class="FK_headerBox_list" @click="dealOrNoDeal(2)"><span class="FK_headerBox_list_colorBox2"></span> 已处理</div>
           </div>
           <div class="FK_bodyBox">
             <div class="FK_bodyBox_list" v-for="item in AllData.XCFKData">
-              <span class="FK_bodyBox_list_label" @click="XunChaFanKui(item)">{{
-                item.name
-              }}</span>
+              <span class="FK_bodyBox_list_label" @click="XunChaFanKui(item)">{{ item.name }}</span>
               <div class="FK_BigBox">
                 <div class="FK_CenBox1" :style="getWidth(item, 1)">{{ item.num1 }}</div>
                 <div class="FK_CenBox2" :style="getWidth(item, 2)">{{ item.num2 }}</div>
@@ -179,13 +143,7 @@
         </div>
       </div>
     </div>
-    <div
-      :class="[
-        'TopBox',
-        'animate__animated',
-        showPanel ? 'animate__fadeOutUp' : 'animate__fadeInDown',
-      ]"
-    >
+    <div :class="['TopBox', 'animate__animated', showPanel ? 'animate__fadeOutUp' : 'animate__fadeInDown']">
       <div class="TopTableHeader">
         <span class="TopTableListSpan TopTableListSpan1">时间</span>
         <span class="TopTableListSpan TopTableListSpan2">事件明细</span>
@@ -195,27 +153,15 @@
         <span class="TopTableListSpan TopTableListSpan6">督办</span>
       </div>
       <!-- <div class="TopTableBody"> -->
-      <Vue3SeamlessScroll
-        :list="AllData.TopTableData"
-        :singleHeight="34"
-        :hover="true"
-        class="TopTableBody"
-      >
+      <Vue3SeamlessScroll :list="AllData.TopTableData" :singleHeight="34" :hover="true" class="TopTableBody">
         <div class="TopTableBody_list" v-for="item in AllData.TopTableData">
           <span class="TopTableListSpan TopTableListSpan1">{{ item.sj }}</span>
           <span class="TopTableListSpan TopTableListSpan2">{{ item.mx }}</span>
           <span class="TopTableListSpan TopTableListSpan3">{{ item.dd }}</span>
-          <span class="TopTableListSpan TopTableListSpan4">{{
-            item.zt == 0 ? "未处理" : "已处理"
-          }}</span>
+          <span class="TopTableListSpan TopTableListSpan4">{{ item.zt == 0 ? '未处理' : '已处理' }}</span>
           <span class="TopTableListSpan TopTableListSpan5">{{ item.dw }}</span>
           <span class="TopTableListSpan TopTableListSpan6">
-            <img
-              class="TopTableListSpanImg2"
-              src="@/assets/images/Sponge_screen/RQ/RQ_XX.png"
-              alt=""
-              @click="PaiFa(item)"
-            />
+            <img class="TopTableListSpanImg2" src="@/assets/images/Sponge_screen/RQ/RQ_XX.png" alt="" @click="PaiFa(item)" />
             <img
               class="TopTableListSpanImg"
               src="@/assets/images/Sponge_screen/RQ/RQ_SP.png"
@@ -231,49 +177,49 @@
 </template>
 
 <script setup name="ZHRQ">
-import { ref, reactive, toRefs, onMounted, onBeforeUnmount, nextTick } from "vue";
+import { ref, reactive, toRefs, onMounted, onBeforeUnmount, nextTick } from 'vue';
 
-import * as echarts from "echarts";
-import bus from "@/bus";
-import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
-import sheBeiLost from "@/assets/sheBeiLost.json";
-import xiaXian from "@/assets/xiaXian.json";
-import yiBian from "@/assets/yiBian.json";
-import zaWuDuiFang from "@/assets/zaWuDuiFang.json";
-import rq_QiTa from "@/assets/rq_QiTa.json";
-import no_sheBeiLost from "@/assets/no_sheBeiLost.json";
-import no_xiaXian from "@/assets/no_xiaXian.json";
-import no_yiBian from "@/assets/no_yiBian.json";
-import no_zaWuDuiFang from "@/assets/no_zaWuDuiFang.json";
-import no_rq_QiTa from "@/assets/no_rq_QiTa.json";
-import yanAnRQoverindex from "@/assets/yanAnRQoverindex.json";
-import yanAnWarring from "@/assets/yanAnWarring.json";
+import * as echarts from 'echarts';
+import bus from '@/bus';
+import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
+import sheBeiLost from '@/assets/sheBeiLost.json';
+import xiaXian from '@/assets/xiaXian.json';
+import yiBian from '@/assets/yiBian.json';
+import zaWuDuiFang from '@/assets/zaWuDuiFang.json';
+import rq_QiTa from '@/assets/rq_QiTa.json';
+import no_sheBeiLost from '@/assets/no_sheBeiLost.json';
+import no_xiaXian from '@/assets/no_xiaXian.json';
+import no_yiBian from '@/assets/no_yiBian.json';
+import no_zaWuDuiFang from '@/assets/no_zaWuDuiFang.json';
+import no_rq_QiTa from '@/assets/no_rq_QiTa.json';
+import yanAnRQoverindex from '@/assets/yanAnRQoverindex.json';
+import yanAnWarring from '@/assets/yanAnWarring.json';
 
 const AllData = reactive({
   xunChaStatic: null,
   xunChaLayers: [
-    "alreadyDeal_DF",
-    "alreadyDeal_DS",
-    "alreadyDeal_XX",
-    "alreadyDeal_YB",
-    "alreadyDeal_QT",
-    "noDeal_DF",
-    "noDeal_DS",
-    "noDeall_XX",
-    "noDeal_YB",
-    "noDeal_QT",
+    'alreadyDeal_DF',
+    'alreadyDeal_DS',
+    'alreadyDeal_XX',
+    'alreadyDeal_YB',
+    'alreadyDeal_QT',
+    'noDeal_DF',
+    'noDeal_DS',
+    'noDeall_XX',
+    'noDeal_YB',
+    'noDeal_QT',
   ],
   ChangeData: [
     {
-      name: "枣园",
+      name: '枣园',
       id: 1,
     },
     {
-      name: "杨家湾",
+      name: '杨家湾',
       id: 2,
     },
     {
-      name: "丰富川",
+      name: '丰富川',
       id: 3,
     },
   ],
@@ -281,38 +227,38 @@
   // 风险监测
   FXJCData: [
     {
-      zb: "甲烷浓度",
-      sz: "3%",
+      zb: '甲烷浓度',
+      sz: '3%',
       szzt: true,
       zt: 0, //0预警 1 正常
-      value: "JWND",
+      value: 'JWND',
     },
     {
-      zb: "压力",
-      sz: "5MPa",
+      zb: '压力',
+      sz: '5MPa',
       szzt: false,
       zt: 1, //0预警 1 正常
-      value: "YL",
+      value: 'YL',
     },
     {
-      zb: "温度",
-      sz: "25C°",
+      zb: '温度',
+      sz: '25C°',
       szzt: true,
       zt: 1, //0预警 1 正常
-      value: "WD",
+      value: 'WD',
     },
   ],
   YJChangeData: [
     {
-      name: "综合",
+      name: '综合',
       id: 1,
     },
     {
-      name: "压力",
+      name: '压力',
       id: 2,
     },
     {
-      name: "温度",
+      name: '温度',
       id: 3,
     },
   ],
@@ -320,51 +266,51 @@
   //辅助决策
   JCData: [
     {
-      qy: "宝塔区凤凰山街道二道街",
-      tz: "压力监测异常波动",
+      qy: '宝塔区凤凰山街道二道街',
+      tz: '压力监测异常波动',
       sj: 5,
-      yp: "设施故障",
-      value: "001", //语音识别内容编码-前段自己设置的,后期项目有接口就直接替换数据唯一id
+      yp: '设施故障',
+      value: '001', //语音识别内容编码-前段自己设置的,后期项目有接口就直接替换数据唯一id
     },
     {
-      qy: "宝塔区凤凰山街道二道街",
-      tz: "燃气管道压力过大",
+      qy: '宝塔区凤凰山街道二道街',
+      tz: '燃气管道压力过大',
       sj: 5,
-      yp: "燃气爆管风险",
-      value: "002",
+      yp: '燃气爆管风险',
+      value: '002',
     },
     {
-      qy: "宝塔区凤凰山街道二道街",
-      tz: "高峰期流量持续降低",
+      qy: '宝塔区凤凰山街道二道街',
+      tz: '高峰期流量持续降低',
       sj: 4,
-      yp: "燃气泄漏风险",
-      value: "003",
+      yp: '燃气泄漏风险',
+      value: '003',
     },
   ],
   // 巡查反馈
   XCFKData: [
     {
-      name: "堆放杂物",
+      name: '堆放杂物',
       num1: 20,
       num2: 80,
     },
     {
-      name: "设备丢失",
+      name: '设备丢失',
       num1: 12,
       num2: 88,
     },
     {
-      name: "下陷",
+      name: '下陷',
       num1: 32,
       num2: 68,
     },
     {
-      name: "异变",
+      name: '异变',
       num1: 30,
       num2: 70,
     },
     {
-      name: "其他",
+      name: '其他',
       num1: 20,
       num2: 80,
     },
@@ -372,35 +318,35 @@
   // 顶部表格数据
   TopTableData: [
     {
-      sj: "2024-09-26 10:00:29",
-      mx: "燃气常规检查发现泄漏",
-      dd: "宝塔区凤凰山街道二道街",
+      sj: '2024-09-26 10:00:29',
+      mx: '燃气常规检查发现泄漏',
+      dd: '宝塔区凤凰山街道二道街',
       zt: 0, //0未处理 1已处理
-      dw: "延安市燃气总公司",
+      dw: '延安市燃气总公司',
       value: null,
     },
     {
-      sj: "2024-09-27 16:10:248",
-      mx: "燃气常规检查发现泄漏",
-      dd: "宝塔区凤凰山街道二道街",
+      sj: '2024-09-27 16:10:248',
+      mx: '燃气常规检查发现泄漏',
+      dd: '宝塔区凤凰山街道二道街',
       zt: 0, //0未处理 1已处理
-      dw: "延安市燃气总公司",
+      dw: '延安市燃气总公司',
       value: null,
     },
     {
-      sj: "2024-09-26 10:00:29",
-      mx: "燃气常规检查发现泄漏",
-      dd: "宝塔区凤凰山街道二道街",
+      sj: '2024-09-26 10:00:29',
+      mx: '燃气常规检查发现泄漏',
+      dd: '宝塔区凤凰山街道二道街',
       zt: 0, //0未处理 1已处理
-      dw: "延安市燃气总公司",
+      dw: '延安市燃气总公司',
       value: null,
     },
     {
-      sj: "2024-09-27 16:10:248",
-      mx: "燃气常规检查发现泄漏",
-      dd: "宝塔区凤凰山街道二道街",
+      sj: '2024-09-27 16:10:248',
+      mx: '燃气常规检查发现泄漏',
+      dd: '宝塔区凤凰山街道二道街',
       zt: 0, //0未处理 1已处理
-      dw: "延安市燃气总公司",
+      dw: '延安市燃气总公司',
       value: null,
     },
   ],
@@ -417,7 +363,7 @@
   },
 });
 // 初始化预警统计的Echarts
-const initEcharts = (id) => {
+const initEcharts = id => {
   AllData.YJChangeIndex = id;
   let Data1 = [];
   let Data2 = [];
@@ -437,41 +383,41 @@
   if (!!myChart.value) {
     myChart.value.dispose();
   }
-  myChart.value = echarts.init(document.getElementById("YJEchartsBox"));
-  myChart.value.off("click");
+  myChart.value = echarts.init(document.getElementById('YJEchartsBox'));
+  myChart.value.off('click');
   myChart.value.setOption({
-    color: ["#18A7F2", "#1AF7AA"],
+    color: ['#18A7F2', '#1AF7AA'],
     tooltip: {
-      trigger: "axis",
+      trigger: 'axis',
     },
     grid: {
-      top: "30%",
-      left: "3%",
-      right: "4%",
-      bottom: "3%",
+      top: '30%',
+      left: '3%',
+      right: '4%',
+      bottom: '3%',
       containLabel: true,
     },
     legend: {
-      data: ["预警次数", "持续时长"],
+      data: ['预警次数', '持续时长'],
       textStyle: {
-        color: "#fffd", // 图例文字颜色
+        color: '#fffd', // 图例文字颜色
       },
-      x: "40",
-      y: "10",
+      x: '40',
+      y: '10',
     },
     xAxis: [
       {
-        type: "category",
-        data: ["今日", "09/27", "09/26", "09/25", "09/24", "09/23", "09/22"],
+        type: 'category',
+        data: ['今日', '09/27', '09/26', '09/25', '09/24', '09/23', '09/22'],
         axisPointer: {
-          type: "shadow",
+          type: 'shadow',
         },
         textStyle: {
-          color: "#EBFEFF",
+          color: '#EBFEFF',
         },
         axisLine: {
           lineStyle: {
-            color: "#EBFEFF",
+            color: '#EBFEFF',
           },
         },
         // boundaryGap: false,
@@ -479,57 +425,57 @@
     ],
     yAxis: [
       {
-        type: "value",
-        name: "预警次数",
+        type: 'value',
+        name: '预警次数',
         min: 0,
         max: 12,
         interval: 2,
         axisLabel: {
-          formatter: "{value}",
+          formatter: '{value}',
         },
         axisLine: {
           lineStyle: {
-            color: "#AAC1CF",
+            color: '#AAC1CF',
           },
         },
         splitLine: {
           lineStyle: {
             // 使用深浅的间隔色
-            color: ["#184E5A"],
+            color: ['#184E5A'],
           },
         },
       },
       {
-        type: "value",
-        name: "持续时长",
+        type: 'value',
+        name: '持续时长',
         min: 0,
         max: 30,
         interval: 5,
         axisLabel: {
-          formatter: "{value}",
+          formatter: '{value}',
         },
         axisLine: {
           lineStyle: {
-            color: "#AAC1CF",
+            color: '#AAC1CF',
           },
         },
         splitLine: {
           lineStyle: {
             // 使用深浅的间隔色
-            color: ["#184E5A"],
+            color: ['#184E5A'],
           },
         },
       },
     ],
     series: [
       {
-        name: "预警次数",
-        type: "bar",
-        barWidth: "10px",
+        name: '预警次数',
+        type: 'bar',
+        barWidth: '10px',
         showBackground: true,
         tooltip: {
           valueFormatter: function (value) {
-            return value + " 次";
+            return value + ' 次';
           },
         },
         itemStyle: {
@@ -539,12 +485,12 @@
         data: Data1,
       },
       {
-        name: "持续时长",
-        type: "line",
+        name: '持续时长',
+        type: 'line',
         yAxisIndex: 1,
         tooltip: {
           valueFormatter: function (value) {
-            return value + "min";
+            return value + 'min';
           },
         },
         areaStyle: {
@@ -552,11 +498,11 @@
           color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
             {
               offset: 0,
-              color: "#1AF7AA",
+              color: '#1AF7AA',
             },
             {
               offset: 1,
-              color: "#1AF7AA00",
+              color: '#1AF7AA00',
             },
           ]),
         },
@@ -565,19 +511,19 @@
       },
     ],
   });
-  myChart.value.on("click", (param) => {
+  myChart.value.on('click', param => {
     console.log(param);
     let data = {
-      title: "风险监测",
-      comIDs: ["RQ_FengXianJianCe"],
+      title: '风险监测',
+      comIDs: ['RQ_FengXianJianCe'],
     };
-    bus.emit("publicDialog", data);
+    bus.emit('publicDialog', data);
     let a = {
-      value: "全部",
-      endTime: "2024-10-05",
+      value: '全部',
+      endTime: '2024-10-05',
     };
     setTimeout(() => {
-      bus.emit("getDataListFxjc", a);
+      bus.emit('getDataListFxjc', a);
     }, 500);
   });
 
@@ -591,7 +537,7 @@
     i++;
     if (i == length) i = 0;
     myChart.value.dispatchAction({
-      type: "showTip",
+      type: 'showTip',
       seriesIndex: 0,
       dataIndex: i,
     });
@@ -608,14 +554,14 @@
   return `width:${widthNum}%`;
 };
 // 工单派发
-const GongDanPaiFa = (item) => {
+const GongDanPaiFa = item => {
   console.log(item);
   let data = {
     title: item.qy,
-    comIDs: ["gdpf"],
+    comIDs: ['gdpf'],
     getSiteId: item.value,
   };
-  bus.emit("publicDialog", data);
+  bus.emit('publicDialog', data);
 };
 // // 风险
 // const FengXianClick = (item) => {
@@ -627,56 +573,52 @@
 //   bus.emit("publicDialog", data);
 // };
 // 风险监测派发
-const PaiFa = (item) => {
+const PaiFa = item => {
   console.log(item);
   let data = {
-    title: "智慧外呼",
-    comIDs: ["RQ_ZhiHuiWaiHu"],
+    title: '智慧外呼',
+    comIDs: ['RQ_ZhiHuiWaiHu'],
     getSiteId: item.value,
   };
-  bus.emit("publicDialog", data);
+  bus.emit('publicDialog', data);
 };
 //巡查反馈处理、未处理
-const dealOrNoDeal = (item) => {
+const dealOrNoDeal = item => {
   AllData.xunChaStatic = item;
   newfiberMapbox.map.easeTo({
     center: [109.488, 36.596],
     zoom: 12,
     pitch: 55,
   });
-  bus.emit("removeMapDatas", ["warning_monitor"]);
+  bus.emit('removeMapDatas', ['warning_monitor']);
   if (item == 1) {
-    let removedLayer = AllData.xunChaLayers.filter((layer) => layer.includes("noDeal"));
-    let selectedLayer = AllData.xunChaLayers.filter((layer) =>
-      layer.includes("alreadyDeal")
-    );
-    bus.emit("removeMapDatas", AllData.xunChaLayers);
-    bus.emit("setGeoJSON", { json: zaWuDuiFang, key: "alreadyDeal_DF" });
-    bus.emit("setGeoJSON", { json: sheBeiLost, key: "alreadyDeal_DS" });
-    bus.emit("setGeoJSON", { json: xiaXian, key: "alreadyDeal_XX" });
-    bus.emit("setGeoJSON", { json: yiBian, key: "alreadyDeal_YB" });
-    bus.emit("setGeoJSON", { json: rq_QiTa, key: "alreadyDeal_QT" });
-    selectedLayer.forEach((layer) => {
-      bus.emit("setLayerVisible", { layername: layer, isCheck: true });
+    let removedLayer = AllData.xunChaLayers.filter(layer => layer.includes('noDeal'));
+    let selectedLayer = AllData.xunChaLayers.filter(layer => layer.includes('alreadyDeal'));
+    bus.emit('removeMapDatas', AllData.xunChaLayers);
+    bus.emit('setGeoJSON', { json: zaWuDuiFang, key: 'alreadyDeal_DF' });
+    bus.emit('setGeoJSON', { json: sheBeiLost, key: 'alreadyDeal_DS' });
+    bus.emit('setGeoJSON', { json: xiaXian, key: 'alreadyDeal_XX' });
+    bus.emit('setGeoJSON', { json: yiBian, key: 'alreadyDeal_YB' });
+    bus.emit('setGeoJSON', { json: rq_QiTa, key: 'alreadyDeal_QT' });
+    selectedLayer.forEach(layer => {
+      bus.emit('setLayerVisible', { layername: layer, isCheck: true });
     });
   } else {
-    let removedLayer = AllData.xunChaLayers.filter((layer) =>
-      layer.includes("alreadyDeal")
-    );
-    let selectedLayer = AllData.xunChaLayers.filter((layer) => layer.includes("noDeal"));
-    bus.emit("removeMapDatas", AllData.xunChaLayers);
-    bus.emit("setGeoJSON", { json: no_zaWuDuiFang, key: "onDeal_DF" });
-    bus.emit("setGeoJSON", { json: no_sheBeiLost, key: "onDeal_DS" });
-    bus.emit("setGeoJSON", { json: no_xiaXian, key: "onDeal_XX" });
-    bus.emit("setGeoJSON", { json: no_yiBian, key: "onDeal_YB" });
-    bus.emit("setGeoJSON", { json: no_rq_QiTa, key: "onDeal_QT" });
-    selectedLayer.forEach((layer) => {
-      bus.emit("setLayerVisible", { layername: layer, isCheck: true });
+    let removedLayer = AllData.xunChaLayers.filter(layer => layer.includes('alreadyDeal'));
+    let selectedLayer = AllData.xunChaLayers.filter(layer => layer.includes('noDeal'));
+    bus.emit('removeMapDatas', AllData.xunChaLayers);
+    bus.emit('setGeoJSON', { json: no_zaWuDuiFang, key: 'onDeal_DF' });
+    bus.emit('setGeoJSON', { json: no_sheBeiLost, key: 'onDeal_DS' });
+    bus.emit('setGeoJSON', { json: no_xiaXian, key: 'onDeal_XX' });
+    bus.emit('setGeoJSON', { json: no_yiBian, key: 'onDeal_YB' });
+    bus.emit('setGeoJSON', { json: no_rq_QiTa, key: 'onDeal_QT' });
+    selectedLayer.forEach(layer => {
+      bus.emit('setLayerVisible', { layername: layer, isCheck: true });
     });
   }
 };
 // 巡查反馈
-const XunChaFanKui = (item) => {
+const XunChaFanKui = item => {
   let removedLayer = [];
   let selectedLayer = [];
   newfiberMapbox.map.easeTo({
@@ -685,80 +627,60 @@
     pitch: 55,
   });
   switch (item.name) {
-    case "堆放杂物":
-      removedLayer = AllData.xunChaLayers.filter(
-        (layer) => layer != "alreadyDeal_DF" && layer != "noDeal_DF"
-      );
-      selectedLayer = AllData.xunChaLayers.filter(
-        (layer) => layer == "alreadyDeal_DF" || layer == "noDeal_DF"
-      );
-      selectedLayer.forEach((layer) => {
-        bus.emit("setLayerVisible", { layername: layer, isCheck: true });
+    case '堆放杂物':
+      removedLayer = AllData.xunChaLayers.filter(layer => layer != 'alreadyDeal_DF' && layer != 'noDeal_DF');
+      selectedLayer = AllData.xunChaLayers.filter(layer => layer == 'alreadyDeal_DF' || layer == 'noDeal_DF');
+      selectedLayer.forEach(layer => {
+        bus.emit('setLayerVisible', { layername: layer, isCheck: true });
       });
-      removedLayer.forEach((layer) => {
-        bus.emit("setLayerVisible", { layername: layer, isCheck: false });
+      removedLayer.forEach(layer => {
+        bus.emit('setLayerVisible', { layername: layer, isCheck: false });
       });
       break;
-    case "设备丢失":
-      removedLayer = AllData.xunChaLayers.filter(
-        (layer) => layer != "alreadyDeal_DS" && layer != "noDeal_DS"
-      );
-      selectedLayer = AllData.xunChaLayers.filter(
-        (layer) => layer == "alreadyDeal_DS" || layer == "noDeal_DS"
-      );
-      selectedLayer.forEach((layer) => {
-        bus.emit("setLayerVisible", { layername: layer, isCheck: true });
+    case '设备丢失':
+      removedLayer = AllData.xunChaLayers.filter(layer => layer != 'alreadyDeal_DS' && layer != 'noDeal_DS');
+      selectedLayer = AllData.xunChaLayers.filter(layer => layer == 'alreadyDeal_DS' || layer == 'noDeal_DS');
+      selectedLayer.forEach(layer => {
+        bus.emit('setLayerVisible', { layername: layer, isCheck: true });
       });
-      removedLayer.forEach((layer) => {
-        bus.emit("setLayerVisible", { layername: layer, isCheck: false });
+      removedLayer.forEach(layer => {
+        bus.emit('setLayerVisible', { layername: layer, isCheck: false });
       });
       break;
-    case "下陷":
-      removedLayer = AllData.xunChaLayers.filter(
-        (layer) => layer != "alreadyDeal_XX" && layer != "noDeal_XX"
-      );
-      selectedLayer = AllData.xunChaLayers.filter(
-        (layer) => layer == "alreadyDeal_XX" || layer == "noDeal_XX"
-      );
-      selectedLayer.forEach((layer) => {
-        bus.emit("setLayerVisible", { layername: layer, isCheck: true });
+    case '下陷':
+      removedLayer = AllData.xunChaLayers.filter(layer => layer != 'alreadyDeal_XX' && layer != 'noDeal_XX');
+      selectedLayer = AllData.xunChaLayers.filter(layer => layer == 'alreadyDeal_XX' || layer == 'noDeal_XX');
+      selectedLayer.forEach(layer => {
+        bus.emit('setLayerVisible', { layername: layer, isCheck: true });
       });
-      removedLayer.forEach((layer) => {
-        bus.emit("setLayerVisible", { layername: layer, isCheck: false });
+      removedLayer.forEach(layer => {
+        bus.emit('setLayerVisible', { layername: layer, isCheck: false });
       });
       break;
-    case "异变":
-      removedLayer = AllData.xunChaLayers.filter(
-        (layer) => layer != "alreadyDeal_YB" && layer != "noDeal_YB"
-      );
-      selectedLayer = AllData.xunChaLayers.filter(
-        (layer) => layer == "alreadyDeal_YB" || layer == "noDeal_YB"
-      );
-      selectedLayer.forEach((layer) => {
-        bus.emit("setLayerVisible", { layername: layer, isCheck: true });
+    case '异变':
+      removedLayer = AllData.xunChaLayers.filter(layer => layer != 'alreadyDeal_YB' && layer != 'noDeal_YB');
+      selectedLayer = AllData.xunChaLayers.filter(layer => layer == 'alreadyDeal_YB' || layer == 'noDeal_YB');
+      selectedLayer.forEach(layer => {
+        bus.emit('setLayerVisible', { layername: layer, isCheck: true });
       });
-      removedLayer.forEach((layer) => {
-        bus.emit("setLayerVisible", { layername: layer, isCheck: false });
+      removedLayer.forEach(layer => {
+        bus.emit('setLayerVisible', { layername: layer, isCheck: false });
       });
       break;
-    case "其他":
-      removedLayer = AllData.xunChaLayers.filter(
-        (layer) => layer != "alreadyDeal_QT" && layer != "noDeal_QT"
-      );
-      selectedLayer = AllData.xunChaLayers.filter(
-        (layer) => layer == "alreadyDeal_QT" || layer == "noDeal_QT"
-      );
-      selectedLayer.forEach((layer) => {
-        bus.emit("setLayerVisible", { layername: layer, isCheck: true });
+    case '其他':
+      removedLayer = AllData.xunChaLayers.filter(layer => layer != 'alreadyDeal_QT' && layer != 'noDeal_QT');
+      selectedLayer = AllData.xunChaLayers.filter(layer => layer == 'alreadyDeal_QT' || layer == 'noDeal_QT');
+      selectedLayer.forEach(layer => {
+        bus.emit('setLayerVisible', { layername: layer, isCheck: true });
       });
-      removedLayer.forEach((layer) => {
-        bus.emit("setLayerVisible", { layername: layer, isCheck: false });
+      removedLayer.forEach(layer => {
+        bus.emit('setLayerVisible', { layername: layer, isCheck: false });
       });
       break;
   }
 };
 // 风险评估
-const TuChengClick = (item) => {
+const TuChengClick = item => {
   newfiberMapbox.map.easeTo({
     center: [109.488, 36.596],
     zoom: 12,
@@ -766,61 +688,61 @@
   });
   switch (item) {
     case 0:
-      bus.emit("setLayerVisible", { layername: "rq_SZLH", isCheck: false });
-      bus.emit("setLayerVisible", { layername: "rq_TYLH", isCheck: false });
-      bus.emit("setLayerVisible", { layername: "rq_LGLH", isCheck: false });
-      bus.emit("setLayerVisible", { layername: "rq_other", isCheck: false });
-      bus.emit("setLayerVisible", { layername: "rq_all", isCheck: true }); //所有管网rq_all、市政rq_SZLH、庭院rq_TYLH、立管rq_LGLH、其他rq_other
+      bus.emit('setLayerVisible', { layername: 'rq_SZLH', isCheck: false });
+      bus.emit('setLayerVisible', { layername: 'rq_TYLH', isCheck: false });
+      bus.emit('setLayerVisible', { layername: 'rq_LGLH', isCheck: false });
+      bus.emit('setLayerVisible', { layername: 'rq_other', isCheck: false });
+      bus.emit('setLayerVisible', { layername: 'rq_all', isCheck: true }); //所有管网rq_all、市政rq_SZLH、庭院rq_TYLH、立管rq_LGLH、其他rq_other
       break;
     case 1:
-      bus.emit("setLayerVisible", { layername: "rq_all", isCheck: false }); //所有管网rq_all、市政rq_SZLH、庭院rq_TYLH、立管rq_LGLH、其他rq_other
-      bus.emit("setLayerVisible", { layername: "rq_SZLH", isCheck: true });
-      bus.emit("setLayerVisible", { layername: "rq_TYLH", isCheck: false });
-      bus.emit("setLayerVisible", { layername: "rq_LGLH", isCheck: false });
-      bus.emit("setLayerVisible", { layername: "rq_other", isCheck: false });
+      bus.emit('setLayerVisible', { layername: 'rq_all', isCheck: false }); //所有管网rq_all、市政rq_SZLH、庭院rq_TYLH、立管rq_LGLH、其他rq_other
+      bus.emit('setLayerVisible', { layername: 'rq_SZLH', isCheck: true });
+      bus.emit('setLayerVisible', { layername: 'rq_TYLH', isCheck: false });
+      bus.emit('setLayerVisible', { layername: 'rq_LGLH', isCheck: false });
+      bus.emit('setLayerVisible', { layername: 'rq_other', isCheck: false });
       break;
     case 2:
-      bus.emit("setLayerVisible", { layername: "rq_all", isCheck: false }); //所有管网rq_all、市政rq_SZLH、庭院rq_TYLH、立管rq_LGLH、其他rq_other
-      bus.emit("setLayerVisible", { layername: "rq_SZLH", isCheck: false });
-      bus.emit("setLayerVisible", { layername: "rq_TYLH", isCheck: true });
-      bus.emit("setLayerVisible", { layername: "rq_LGLH", isCheck: false });
-      bus.emit("setLayerVisible", { layername: "rq_other", isCheck: false });
+      bus.emit('setLayerVisible', { layername: 'rq_all', isCheck: false }); //所有管网rq_all、市政rq_SZLH、庭院rq_TYLH、立管rq_LGLH、其他rq_other
+      bus.emit('setLayerVisible', { layername: 'rq_SZLH', isCheck: false });
+      bus.emit('setLayerVisible', { layername: 'rq_TYLH', isCheck: true });
+      bus.emit('setLayerVisible', { layername: 'rq_LGLH', isCheck: false });
+      bus.emit('setLayerVisible', { layername: 'rq_other', isCheck: false });
 
       break;
     case 3:
-      bus.emit("setLayerVisible", { layername: "rq_all", isCheck: false }); //所有管网rq_all、市政rq_SZLH、庭院rq_TYLH、立管rq_LGLH、其他rq_other
-      bus.emit("setLayerVisible", { layername: "rq_SZLH", isCheck: false });
-      bus.emit("setLayerVisible", { layername: "rq_TYLH", isCheck: false });
-      bus.emit("setLayerVisible", { layername: "rq_LGLH", isCheck: true });
-      bus.emit("setLayerVisible", { layername: "rq_other", isCheck: false });
+      bus.emit('setLayerVisible', { layername: 'rq_all', isCheck: false }); //所有管网rq_all、市政rq_SZLH、庭院rq_TYLH、立管rq_LGLH、其他rq_other
+      bus.emit('setLayerVisible', { layername: 'rq_SZLH', isCheck: false });
+      bus.emit('setLayerVisible', { layername: 'rq_TYLH', isCheck: false });
+      bus.emit('setLayerVisible', { layername: 'rq_LGLH', isCheck: true });
+      bus.emit('setLayerVisible', { layername: 'rq_other', isCheck: false });
       break;
     case 4:
-      bus.emit("setLayerVisible", { layername: "rq_all", isCheck: false }); //所有管网rq_all、市政rq_SZLH、庭院rq_TYLH、立管rq_LGLH、其他rq_other
-      bus.emit("setLayerVisible", { layername: "rq_SZLH", isCheck: false });
-      bus.emit("setLayerVisible", { layername: "rq_TYLH", isCheck: false });
-      bus.emit("setLayerVisible", { layername: "rq_LGLH", isCheck: false });
-      bus.emit("setLayerVisible", { layername: "rq_other", isCheck: true });
+      bus.emit('setLayerVisible', { layername: 'rq_all', isCheck: false }); //所有管网rq_all、市政rq_SZLH、庭院rq_TYLH、立管rq_LGLH、其他rq_other
+      bus.emit('setLayerVisible', { layername: 'rq_SZLH', isCheck: false });
+      bus.emit('setLayerVisible', { layername: 'rq_TYLH', isCheck: false });
+      bus.emit('setLayerVisible', { layername: 'rq_LGLH', isCheck: false });
+      bus.emit('setLayerVisible', { layername: 'rq_other', isCheck: true });
       break;
   }
 };
 
 // 风险
-const FengXianClick = (item) => {
+const FengXianClick = item => {
   let data = {
-    title: item.zb + " 风险监测",
-    comIDs: ["RQ_FengXianJianCe"],
+    title: item.zb + ' 风险监测',
+    comIDs: ['RQ_FengXianJianCe'],
   };
-  bus.emit("publicDialog", data);
+  bus.emit('publicDialog', data);
   // 传给组件数据
 
   setTimeout(() => {
-    bus.emit("getDataListFxjc", item);
+    bus.emit('getDataListFxjc', item);
   }, 500);
 };
 
 // 现场连线
-const XianChangLianXian = (item) => {
-  bus.emit("OpenRY");
+const XianChangLianXian = item => {
+  bus.emit('OpenRY');
 };
 
 watch(
@@ -832,14 +754,13 @@
 );
 //燃气超标
 const showIndexOver = () => {
-  bus.emit("removeMapDatas", AllData.xunChaLayers);
-  let key = "warning_monitor";
-  bus.emit("getGeojsonByType", {
+  bus.emit('removeMapDatas', AllData.xunChaLayers);
+  let key = 'warning_monitor';
+  bus.emit('getGeojsonByType', {
     type: key,
-    callback: (geojson) => {
-      if (!!!geojson.features.length)
-        bus.emit("setGeoJSON", { json: yanAnRQoverindex, key: "warning_monitor" });
-      bus.emit("setLayerVisible", { type: "point", layername: key, isCheck: true });
+    callback: geojson => {
+      if (!!!geojson.features.length) bus.emit('setGeoJSON', { json: yanAnRQoverindex, key: 'warning_monitor' });
+      bus.emit('setLayerVisible', { type: 'point', layername: key, isCheck: true });
     },
   });
   newfiberMapbox.map.easeTo({
@@ -849,14 +770,13 @@
 };
 //燃气告警
 const showIndexWarning = () => {
-  bus.emit("removeMapDatas", AllData.xunChaLayers);
-  let key = "warning_monitor";
-  bus.emit("getGeojsonByType", {
+  bus.emit('removeMapDatas', AllData.xunChaLayers);
+  let key = 'warning_monitor';
+  bus.emit('getGeojsonByType', {
     type: key,
-    callback: (geojson) => {
-      if (!!!geojson.features.length)
-        bus.emit("setGeoJSON", { json: yanAnWarring, key: "warning_monitor" });
-      bus.emit("setLayerVisible", { type: "point", layername: key, isCheck: true });
+    callback: geojson => {
+      if (!!!geojson.features.length) bus.emit('setGeoJSON', { json: yanAnWarring, key: 'warning_monitor' });
+      bus.emit('setLayerVisible', { type: 'point', layername: key, isCheck: true });
     },
   });
   newfiberMapbox.map.easeTo({
@@ -867,47 +787,46 @@
 onMounted(() => {
   let initeRQTimer = setInterval(() => {
     if (!newfiberMapbox) return;
-    if (!newfiberMapbox.map.getLayer("rq_pipeline_info")) return;
-    if (!newfiberMapbox.map.getLayer("sx_ya_smx_rq_point")) return;
+    if (!newfiberMapbox.map.getLayer('rq_pipeline_info')) return;
+    if (!newfiberMapbox.map.getLayer('sx_ya_smx_rq_point')) return;
     newfiberMapbox.map.easeTo({
       center: [109.488, 36.596],
       zoom: 13,
     });
     //告警点事件
-    let warningPoint = newfiberMapbox
-      .getLayers()
-      .filter((feature) => feature.newfiberId == "warning_monitor")[0];
+    let warningPoint = newfiberMapbox.getLayers().filter(feature => feature.newfiberId == 'warning_monitor')[0];
     if (warningPoint) {
-      warningPoint.on("click", (e) => {
+      warningPoint.on('click', e => {
         let popupData = e.feature.properties;
 
-        console.log("popupData---", "告警---------", popupData);
+        console.log('popupData---', '告警---------', popupData);
       });
     }
-    bus.emit("setLayerVisible", { layername: "rq_all", isCheck: true }); //所有管网rq_all、市政rq_SZLH、庭院rq_TYLH、立管rq_LGLH、其他rq_other
+    bus.emit('setLayerVisible', { layername: 'rq_all', isCheck: true }); //所有管网rq_all、市政rq_SZLH、庭院rq_TYLH、立管rq_LGLH、其他rq_other
 
     clearInterval(initeRQTimer);
   }, 100);
   initEcharts(1);
 });
 onBeforeUnmount(() => {
-  bus.emit("setLayerVisible", { layername: "rq_all", isCheck: false });
-  bus.emit("setLayerVisible", { layername: "rq_SZLH", isCheck: false });
-  bus.emit("setLayerVisible", { layername: "rq_TYLH", isCheck: false });
-  bus.emit("setLayerVisible", { layername: "rq_LGLH", isCheck: false });
-  bus.emit("setLayerVisible", { layername: "rq_other", isCheck: false });
-  bus.emit("removeMapDatas", AllData.xunChaLayers);
-  bus.emit("removeMapDatas", ["warning_monitor"]);
-  bus.emit("setLayerVisible", { layername: "warning_monitor", isCheck: false });
-  bus.emit("closeCesiumPopup");
-  if (!!newfiberMapbox.getLayerByName("rqLine")) {
-    newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName("rqLine"));
+  bus.emit('setLayerVisible', { layername: 'rq_all', isCheck: false });
+  bus.emit('setLayerVisible', { layername: 'rq_SZLH', isCheck: false });
+  bus.emit('setLayerVisible', { layername: 'rq_TYLH', isCheck: false });
+  bus.emit('setLayerVisible', { layername: 'rq_LGLH', isCheck: false });
+  bus.emit('setLayerVisible', { layername: 'rq_other', isCheck: false });
+  bus.emit('removeMapDatas', AllData.xunChaLayers);
+  bus.emit('removeMapDatas', ['warning_monitor']);
+  bus.emit('setLayerVisible', { layername: 'warning_monitor', isCheck: false });
+  bus.emit('closeCesiumPopup');
+  bus.emit('SetLayerShow', ['蓝色地图']);
+  if (!!newfiberMapbox.getLayerByName('rqLine')) {
+    newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName('rqLine'));
   }
 });
 </script>
 
 <style lang="scss" scoped>
-@import "@/assets/styles/transition_oneMap.scss";
+@import '@/assets/styles/transition_oneMap.scss';
 #ZHRQ {
   .LeftBox {
     width: 450px;
@@ -915,11 +834,7 @@
     position: absolute;
     left: 10px;
     top: 70px;
-    background: linear-gradient(
-      0deg,
-      rgba(0, 43, 67, 0.8) 0%,
-      rgba(0, 69, 108, 0.8) 100%
-    );
+    background: linear-gradient(0deg, rgba(0, 43, 67, 0.8) 0%, rgba(0, 69, 108, 0.8) 100%);
     border-radius: 6px;
     border: 1px solid #47eef3;
     box-sizing: border-box;
@@ -994,7 +909,7 @@
         width: 100%;
         height: calc(100% - 72px);
         margin-top: 10px;
-        background: url("@/assets/images/Sponge_screen/RQ/Ech.png") no-repeat center;
+        background: url('@/assets/images/Sponge_screen/RQ/Ech.png') no-repeat center;
         position: relative;
 
         .ClickDiv1 {
@@ -1052,7 +967,7 @@
           height: 42px;
           width: calc(50% - 9px);
           display: flex;
-          background: url("@/assets/images/Sponge_screen/RQ/RQ_FX.png") no-repeat center;
+          background: url('@/assets/images/Sponge_screen/RQ/RQ_FX.png') no-repeat center;
           background-size: 100% 100%;
           cursor: pointer;
 
@@ -1284,11 +1199,7 @@
     position: absolute;
     right: 10px;
     top: 70px;
-    background: linear-gradient(
-      0deg,
-      rgba(0, 43, 67, 0.8) 0%,
-      rgba(0, 69, 108, 0.8) 100%
-    );
+    background: linear-gradient(0deg, rgba(0, 43, 67, 0.8) 0%, rgba(0, 69, 108, 0.8) 100%);
     border-radius: 6px;
     border: 1px solid #47eef3;
     box-sizing: border-box;
@@ -1446,11 +1357,7 @@
     position: absolute;
     left: 520px;
     top: 110px;
-    background: linear-gradient(
-      0deg,
-      rgba(0, 43, 67, 0.8) 0%,
-      rgba(0, 69, 108, 0.8) 100%
-    );
+    background: linear-gradient(0deg, rgba(0, 43, 67, 0.8) 0%, rgba(0, 69, 108, 0.8) 100%);
     border-radius: 6px;
     border: 1px solid #47eef3;
     box-sizing: border-box;
@@ -1544,8 +1451,7 @@
     .Box_header {
       width: 100%;
       height: 43px;
-      background: url("@/assets/images/Sponge_screen/Box_HeaderBackground.png") no-repeat
-        center;
+      background: url('@/assets/images/Sponge_screen/Box_HeaderBackground.png') no-repeat center;
       background-size: cover;
       font-family: PangMenZhengDao;
       font-weight: 400;
diff --git a/src/views/oneMap/components/ZTGL.vue b/src/views/oneMap/components/ZTGL.vue
index 796f6da..f524835 100644
--- a/src/views/oneMap/components/ZTGL.vue
+++ b/src/views/oneMap/components/ZTGL.vue
@@ -18,7 +18,7 @@
 import testProjectionLabel from '@/assets/testProjectionLabel.json';
 import mapBoxVectorLayer from '@/utils/GISdocument/mapboxVectorLayer.js';
 import xtb_img from '@/assets/newImgs/xtb_img.png';
-
+import bus from '@/bus';
 const showPanel = ref(true); //面板展开收起
 // 面板内容展开收起控制
 const props = defineProps({
@@ -67,8 +67,11 @@
   }, 100);
 });
 onBeforeUnmount(() => {
-  newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName('testProjection'));
-  mapBoxVectorLayer.removeByIds(['testProjection']);
+  bus.emit('SetLayerShow', ['蓝色地图']);
+  if (newfiberMapbox.getLayerByName('testProjection')) {
+    newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName('testProjection'));
+    mapBoxVectorLayer.removeByIds(['testProjection']);
+  }
 });
 </script>
 
diff --git a/src/views/oneMap/components/chartLogging.vue b/src/views/oneMap/components/chartLogging.vue
index c9fdcc4..2ea8b4d 100644
--- a/src/views/oneMap/components/chartLogging.vue
+++ b/src/views/oneMap/components/chartLogging.vue
@@ -45,6 +45,7 @@
             color: '#fff',
           },
         },
+
         xAxis: [
           {
             type: 'category',
@@ -81,6 +82,7 @@
               },
             },
           },
+
           {
             name: props.data.yAxisName2 || '',
             inverse: false,
@@ -101,6 +103,16 @@
             },
           },
         ],
+        // 时间轴滑动选择器
+        dataZoom: [
+          {
+            show: true,
+            realtime: true,
+            start: 30,
+            end: 70,
+            xAxisIndex: [0, 1],
+          },
+        ],
         series: [
           {
             name: '降雨量(mm)',
diff --git a/src/views/oneMap/components/pipeFX.vue b/src/views/oneMap/components/pipeFX.vue
index df0894c..ea1db5e 100644
--- a/src/views/oneMap/components/pipeFX.vue
+++ b/src/views/oneMap/components/pipeFX.vue
@@ -121,6 +121,16 @@
             },
           },
         ],
+        // 时间轴滑动选择器
+        dataZoom: [
+          {
+            show: true,
+            realtime: true,
+            start: 30,
+            end: 70,
+            xAxisIndex: [0, 1],
+          },
+        ],
         series: [
           {
             name: '降雨量(mm)',

diff --git a/package.json b/package.json
index 39861ad..e784d82 100644
--- a/package.json
+++ b/package.json
@@ -72,4 +72,4 @@
     "vite-plugin-svg-icons": "2.0.1",
     "vite-plugin-vue-setup-extend": "0.4.0"
   }
-}
+}
\ No newline at end of file
diff --git a/src/assets/images/fhpl/sqjca.png b/src/assets/images/fhpl/sqjca.png
index 0eb531c..00e619c 100644
--- a/src/assets/images/fhpl/sqjca.png
+++ b/src/assets/images/fhpl/sqjca.png
Binary files differ
diff --git a/src/views/oneMap/ConstructionEvaluation/JSPGLeftBox.vue b/src/views/oneMap/ConstructionEvaluation/JSPGLeftBox.vue
index 2a7ff07..3ee47c4 100644
--- a/src/views/oneMap/ConstructionEvaluation/JSPGLeftBox.vue
+++ b/src/views/oneMap/ConstructionEvaluation/JSPGLeftBox.vue
@@ -65,8 +65,9 @@
   </div>
   <!-- 污水收集处理 -->
   <div class="Sewagecollection">
-    <div class="ListBoxHeader" @click="showSewageFectory">
-      <div class="ListBoxHeader_font">污水收集处理</div>
+    <div class="topVehicl flex">
+      <div class="icon"></div>
+      <div class="name">污水收集处理</div>
     </div>
     <div class="wssjEch"></div>
   </div>
@@ -293,7 +294,31 @@
 .Sewagecollection {
   width: 450px;
   height: 25%;
-  // background: yellowgreen;
+
+  .topVehicl {
+    font-family: Source Han Sans CN;
+    font-weight: bold;
+    font-size: 14px;
+    color: #ebfeff;
+    align-items: center;
+    height: 30px;
+    // background: teal;
+    .icon {
+      position: relative;
+      top: -1px;
+      width: 25px;
+      height: 25px;
+      background: url('@/assets/newImgs/xtb_img.png') no-repeat;
+    }
+
+    .name {
+      background: linear-gradient(0deg, rgba(0, 242, 255, 0.5) 0%, rgba(0, 242, 255, 0) 100%);
+      padding: 0px 3px;
+      height: 10px;
+      line-height: 0px;
+      margin-top: 6px;
+    }
+  }
   .wssjEch {
     margin: 5px auto;
     width: 420px;
diff --git a/src/views/oneMap/ConstructionEvaluation/JSPGRightBox.vue b/src/views/oneMap/ConstructionEvaluation/JSPGRightBox.vue
index dbeddc8..3f696aa 100644
--- a/src/views/oneMap/ConstructionEvaluation/JSPGRightBox.vue
+++ b/src/views/oneMap/ConstructionEvaluation/JSPGRightBox.vue
@@ -2,7 +2,7 @@
   <!-- 绩效管理 -->
   <div class="management">
     <div class="ListBoxHeader">
-      <div class="ListBoxHeader_font">绩效管理</div>
+      <div class="ListBoxHeader_font">管理绩效</div>
     </div>
     <!-- 年份切换 -->
     <div class="subRightBox">
diff --git a/src/views/oneMap/FloodStuationReview/sqhgBottomBox.vue b/src/views/oneMap/FloodStuationReview/sqhgBottomBox.vue
index 53d38bb..d178c59 100644
--- a/src/views/oneMap/FloodStuationReview/sqhgBottomBox.vue
+++ b/src/views/oneMap/FloodStuationReview/sqhgBottomBox.vue
@@ -117,8 +117,8 @@
 const ranLeng = [
   [
     { value: '0-0.2', color: 'rgba(7, 213, 118, 0)' },
-    { value: '0.2-5', color: 'rgba(7, 213, 118, 1)' },
-    { value: '5-25', color: 'rgba(38, 129, 240,1)' },
+    { value: '0.2-5', color: 'rgba(38, 129, 240,1)' },
+    { value: '5-25', color: 'rgb(222, 230, 0)' },
     { value: '>25', color: 'rgba(255, 26, 26, 1)' },
   ],
   [
@@ -235,14 +235,18 @@
   stepNum.value = 0;
   hgEngPlay.value = false;
   showRainLegend.value = false;
-  // NewFiberMapUtils.disposeRainfall('')
-  // newfiberMap.setLayersVisible(["krigingImage"],false)
+  // newfiberMapbox.map.removeLayer('canvas-layer0');
+  // newfiberMapbox.map.removeSource('canvas-source0');
   hoursList.value.activeIndex = stepNum.value;
   clearInterval(runDayInterval.value);
   if (runDayInterval.value) {
     runDayInterval.value = null;
     refresh.value = Math.random();
   }
+  // if (newfiberMapbox.map.getLayer('canvas-layer0')) {
+  //   newfiberMapbox.map.removeLayer('canvas-layer0');
+  //   newfiberMapbox.map.removeSource('canvas-source0');
+  // }
 }
 
 function changeChartData() {
@@ -375,10 +379,10 @@
 ];*/
 let colorScale = [
   { value: '0', color: 'rgba(7, 213, 118, 0)' },
-  { value: '0.2', color: 'rgba(7, 213, 118, 1)' },
-  { value: '5', color: 'rgba(38, 129, 240,1)' },
-  { value: '25', color: 'rgba(255, 26, 26, 1)' },
-  { value: '250', color: 'rgba(255, 26, 26, 1)' },
+  { value: '0.2', color: 'rgb(38, 129, 240)' },
+  { value: '5', color: 'rgb(222, 230, 0)' },
+  { value: '25', color: 'rgb(255, 26, 26)' },
+  { value: '250', color: 'rgb(255, 26, 26)' },
 ];
 let imageFiles = [];
 let canvas = [];
diff --git a/src/views/oneMap/FloodStuationReview/xqhgLeftBox.vue b/src/views/oneMap/FloodStuationReview/xqhgLeftBox.vue
index 14170d1..c43cb7b 100644
--- a/src/views/oneMap/FloodStuationReview/xqhgLeftBox.vue
+++ b/src/views/oneMap/FloodStuationReview/xqhgLeftBox.vue
@@ -122,7 +122,7 @@
         background: linear-gradient(0deg, rgba(0, 242, 255, 0.5) 0%, rgba(0, 242, 255, 0) 100%);
         height: 10px;
         line-height: 0px;
-        margin-top: 10px;
+        margin-top: 12px;
       }
     }
     .ScheduEcharts {
@@ -161,7 +161,7 @@
       background: linear-gradient(0deg, rgba(0, 242, 255, 0.5) 0%, rgba(0, 242, 255, 0) 100%);
       height: 10px;
       line-height: 0px;
-      margin-top: 10px;
+      margin-top: 12px;
     }
   }
   .VehiclEcharts {
@@ -196,7 +196,7 @@
       background: linear-gradient(0deg, rgba(0, 242, 255, 0.5) 0%, rgba(0, 242, 255, 0) 100%);
       height: 10px;
       line-height: 0px;
-      margin-top: 10px;
+      margin-top: 12px;
     }
   }
   .MaterialEcharts {
diff --git a/src/views/oneMap/LayerControl/LayerControl.vue b/src/views/oneMap/LayerControl/LayerControl.vue
index 37d0576..cc8e024 100644
--- a/src/views/oneMap/LayerControl/LayerControl.vue
+++ b/src/views/oneMap/LayerControl/LayerControl.vue
@@ -30,29 +30,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 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({
   // 图层控制面板的渲染数据
   /**图层面板数据字段说明
@@ -69,72 +70,90 @@
       Show: true,
       children: [
         {
-          layerName: "中心城区",
-          layerKey: "centerCity",
-          layerIcon: requireTuChengImg("zhongxinchengqu"),
+          layerName: '蓝色地图',
+          layerKey: 'blackMap',
+          layerIcon: requireTuChengImg('zhongxinchengqu'),
+          layerVisible: false,
+        },
+        {
+          layerName: '白色地图',
+          layerKey: 'whiteMap',
+          layerIcon: requireTuChengImg('zhongxinchengqu'),
+          layerVisible: false,
+        },
+        {
+          layerName: '影像地图',
+          layerKey: 'imageMap',
+          layerIcon: requireTuChengImg('zhongxinchengqu'),
+          layerVisible: false,
+        },
+        {
+          layerName: '中心城区',
+          layerKey: 'centerCity',
+          layerIcon: requireTuChengImg('zhongxinchengqu'),
           layerVisible: false,
           dynamicLineData: yanAnCenterCity,
         },
         {
-          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,
         },
@@ -145,38 +164,38 @@
       Show: true,
       children: [
         {
-          layerName: "燃气管网",
-          layerKey: "rq_all",
+          layerName: '燃气管网',
+          layerKey: 'rq_all',
           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,
         },
@@ -187,22 +206,22 @@
       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,
         },
@@ -213,8 +232,8 @@
         //   layerVisible: false,
         // },
         {
-          layerName: "雨水泵站",
-          layerKey: "YSBZ",
+          layerName: '雨水泵站',
+          layerKey: 'YSBZ',
           layerIcon: null,
           layerVisible: false,
           data: yanAnYSBZ,
@@ -226,14 +245,14 @@
       Show: true,
       children: [
         {
-          layerName: "污水分区",
-          layerKey: "sewageArea",
+          layerName: '污水分区',
+          layerKey: 'sewageArea',
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: "污水管网",
-          layerKey: "wsLine1",
+          layerName: '污水管网',
+          layerKey: 'wsLine1',
           layerIcon: null,
           layerVisible: false,
         },
@@ -250,8 +269,8 @@
         //   layerVisible: false,
         // },
         {
-          layerName: "污水处理厂",
-          layerKey: "WSCLC",
+          layerName: '污水处理厂',
+          layerKey: 'WSCLC',
           layerIcon: null,
           layerVisible: false,
           data: yanAnWSCLC,
@@ -263,36 +282,36 @@
       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,
@@ -307,10 +326,10 @@
     .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,
@@ -319,37 +338,79 @@
 watch(
   () => props.ShowTuCheng,
   (newValue, oldValue) => {
-    console.log("ShowTuCheng变化了", newValue, oldValue);
+    console.log('ShowTuCheng变化了', newValue, oldValue);
   },
   { immediate: true, deep: true }
 );
 
-const layerClick = (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 });
+  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 => {
+      oldIds.push(layer.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]));
+    });
+    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');
+    let newMapStyle;
+    let oldMapStyle = newfiberMapbox.map.getStyle();
+    let oldIds = [];
+    oldMapStyle.layers.forEach(layer => {
+      oldIds.push(layer.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]));
+    });
+    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.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.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, // 持续时间，延时
@@ -360,29 +421,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, // 持续时间，延时
@@ -393,22 +454,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, // 持续时间，延时
@@ -419,29 +480,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) : '';
       });
     });
   });
@@ -449,17 +510,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>
 
@@ -470,7 +531,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;
@@ -486,7 +547,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;
diff --git a/src/views/oneMap/components/FXHG.vue b/src/views/oneMap/components/FXHG.vue
index 8924475..44e9c21 100644
--- a/src/views/oneMap/components/FXHG.vue
+++ b/src/views/oneMap/components/FXHG.vue
@@ -40,6 +40,7 @@
   showPanel.value = true;
   showBottom.value = false;
   curType.value = true;
+  bus.emit('SetLayerShow', ['蓝色地图']);
   if (newfiberMapbox.map.getLayer('dynamicRoute')) {
     newfiberMapbox.map.removeLayer('dynamicRoute');
     newfiberMapbox.map.removeLayer('dynamicRoute_Symbol');
@@ -68,6 +69,7 @@
 
   let initePSTimer = setInterval(() => {
     if (!newfiberMapbox) return;
+    bus.emit('SetLayerShow', ['白色地图']);
     bus.emit('setLayerVisible', { layername: 'ysLine1', isCheck: true });
     //bus.emit('setLayerVisible', { layername: 'wsLine1', isCheck: true });
     clearInterval(initePSTimer);
diff --git a/src/views/oneMap/components/ZHHM.vue b/src/views/oneMap/components/ZHHM.vue
index d68bdc5..1f29507 100644
--- a/src/views/oneMap/components/ZHHM.vue
+++ b/src/views/oneMap/components/ZHHM.vue
@@ -648,6 +648,7 @@
     zoom: 12,
     pitch: 55,
   });
+  bus.emit('SetLayerShow', ['蓝色地图']);
   // 先清空
   bus.emit('clearAllLayer');
   let removedLayer = ['HMJZYSQ', 'HMXGYLD', 'HMXDLGC', 'HMXSX', 'GWPCYXF'];
diff --git a/src/views/oneMap/components/ZHHM_JCFX.vue b/src/views/oneMap/components/ZHHM_JCFX.vue
index c420911..42e81e6 100644
--- a/src/views/oneMap/components/ZHHM_JCFX.vue
+++ b/src/views/oneMap/components/ZHHM_JCFX.vue
@@ -411,6 +411,7 @@
 });
 onBeforeUnmount(() => {
   bus.emit('clearAllLayer');
+  bus.emit('SetLayerShow', ['蓝色地图']);
   let removedLayer = ['HMJZYSQ', 'HMXGYLD', 'HMXDLGC', 'HMXSX', 'GWPCYXF'];
   removedLayer.forEach(layer => {
     bus.emit('setLayerVisible', { layername: layer, isCheck: false });
diff --git a/src/views/oneMap/components/ZHHM_JSPG.vue b/src/views/oneMap/components/ZHHM_JSPG.vue
index 7400f1b..df2c85f 100644
--- a/src/views/oneMap/components/ZHHM_JSPG.vue
+++ b/src/views/oneMap/components/ZHHM_JSPG.vue
@@ -53,6 +53,7 @@
 };
 
 onMounted(() => {
+  bus.emit('SetLayerShow', ['蓝色地图']);
   newfiberMapbox.map.easeTo({
     center: [109.488, 36.596],
     zoom: 13,
diff --git a/src/views/oneMap/components/ZHPS.vue b/src/views/oneMap/components/ZHPS.vue
index 7ce8bb0..f09ddbc 100644
--- a/src/views/oneMap/components/ZHPS.vue
+++ b/src/views/oneMap/components/ZHPS.vue
@@ -43,6 +43,7 @@
   });
 });
 onBeforeUnmount(() => {
+  bus.emit('SetLayerShow', ['蓝色地图']);
   // bus.emit('setLayerVisible', { layername: 'ysLine1', isCheck: false });
   // bus.emit('setLayerVisible', { layername: 'wsLine1', isCheck: false });
 });
diff --git a/src/views/oneMap/components/ZHRQ.vue b/src/views/oneMap/components/ZHRQ.vue
index 40a70cc..493c201 100644
--- a/src/views/oneMap/components/ZHRQ.vue
+++ b/src/views/oneMap/components/ZHRQ.vue
@@ -1,31 +1,17 @@
 <template>
   <div id="ZHRQ">
-    <div
-      :class="[
-        'LeftBox',
-        'animate__animated',
-        showPanel ? 'animate__fadeOutLeft' : 'animate__fadeInLeft',
-      ]"
-    >
+    <div :class="['LeftBox', 'animate__animated', showPanel ? 'animate__fadeOutLeft' : 'animate__fadeInLeft']">
       <div class="ComBox LeftBox1_1">
         <div class="Box_header">管道风险评估</div>
         <div class="Box_Body">
           <div class="TJListBox">
             <div class="TJList TJList_RQ" @click="TuChengClick(0)">
-              <img
-                class="TJListImg"
-                src="@/assets/images/Sponge_screen/RQ/RQ_RQ.png"
-                alt=""
-              />
+              <img class="TJListImg" src="@/assets/images/Sponge_screen/RQ/RQ_RQ.png" alt="" />
               <span class="TJListName">燃气管道</span>
               <span class="TJListValue">4549km</span>
             </div>
             <div class="TJList TJList_GZ">
-              <img
-                class="TJListImg"
-                src="@/assets/images/Sponge_screen/RQ/RQ_GZ.png"
-                alt=""
-              />
+              <img class="TJListImg" src="@/assets/images/Sponge_screen/RQ/RQ_GZ.png" alt="" />
               <span class="TJListName">需改造</span>
               <span class="TJListValue">1922km</span>
             </div>
@@ -71,9 +57,7 @@
             </div>
             <div class="tableBody">
               <div class="tableBodyList" v-for="item in AllData.FXJCData">
-                <span class="tableBodyList_span1" @click="FengXianClick(item)">{{
-                  item.zb
-                }}</span>
+                <span class="tableBodyList_span1" @click="FengXianClick(item)">{{ item.zb }}</span>
                 <span class="tableBodyList_span2" @click="FengXianClick(item)"
                   >{{ item.sz }}
                   <el-icon v-if="item.szzt" color="lime" size="14"><Top /> </el-icon>
@@ -81,11 +65,9 @@
                     <Bottom />
                   </el-icon>
                 </span>
-                <span
-                  class="tableBodyList_span3"
-                  :class="item.zt == 0 ? 'YJClass' : ''"
-                  >{{ item.zt == 0 ? "预警" : "正常" }}</span
-                >
+                <span class="tableBodyList_span3" :class="item.zt == 0 ? 'YJClass' : ''">{{
+                  item.zt == 0 ? '预警' : '正常'
+                }}</span>
                 <span class="tableBodyList_span4" @click="PaiFa(item)">派发</span>
               </div>
             </div>
@@ -110,13 +92,7 @@
         </div>
       </div>
     </div>
-    <div
-      :class="[
-        'RightBox',
-        'animate__animated',
-        showPanel ? 'animate__fadeOutRight' : 'animate__fadeInRight',
-      ]"
-    >
+    <div :class="['RightBox', 'animate__animated', showPanel ? 'animate__fadeOutRight' : 'animate__fadeInRight']">
       <div class="ComBox RightBox1_1">
         <div class="Box_header">辅助决策</div>
         <div class="Box_Body">
@@ -138,16 +114,10 @@
               <span class="JCListBox_List_value color_red">{{ item.yp }}</span>
             </div>
             <div class="JCListBox_List JCListBox_List_BTN">
-              <el-button
-                style="background: #03b6a0; color: white; border: none"
-                size="small"
-                @click="GongDanPaiFa(item)"
+              <el-button style="background: #03b6a0; color: white; border: none" size="small" @click="GongDanPaiFa(item)"
                 >工单派发</el-button
               >
-              <el-button
-                style="background: #03b6a0; color: white; border: none"
-                size="small"
-                @click="XianChangLianXian(item)"
+              <el-button style="background: #03b6a0; color: white; border: none" size="small" @click="XianChangLianXian(item)"
                 >现场联线</el-button
               >
             </div>
@@ -158,18 +128,12 @@
         <div class="Box_header">巡查反馈</div>
         <div class="Box_Body">
           <div class="FK_headerBox">
-            <div class="FK_headerBox_list" @click="dealOrNoDeal(1)">
-              <span class="FK_headerBox_list_colorBox1"></span> 未处理
-            </div>
-            <div class="FK_headerBox_list" @click="dealOrNoDeal(2)">
-              <span class="FK_headerBox_list_colorBox2"></span> 已处理
-            </div>
+            <div class="FK_headerBox_list" @click="dealOrNoDeal(1)"><span class="FK_headerBox_list_colorBox1"></span> 未处理</div>
+            <div class="FK_headerBox_list" @click="dealOrNoDeal(2)"><span class="FK_headerBox_list_colorBox2"></span> 已处理</div>
           </div>
           <div class="FK_bodyBox">
             <div class="FK_bodyBox_list" v-for="item in AllData.XCFKData">
-              <span class="FK_bodyBox_list_label" @click="XunChaFanKui(item)">{{
-                item.name
-              }}</span>
+              <span class="FK_bodyBox_list_label" @click="XunChaFanKui(item)">{{ item.name }}</span>
               <div class="FK_BigBox">
                 <div class="FK_CenBox1" :style="getWidth(item, 1)">{{ item.num1 }}</div>
                 <div class="FK_CenBox2" :style="getWidth(item, 2)">{{ item.num2 }}</div>
@@ -179,13 +143,7 @@
         </div>
       </div>
     </div>
-    <div
-      :class="[
-        'TopBox',
-        'animate__animated',
-        showPanel ? 'animate__fadeOutUp' : 'animate__fadeInDown',
-      ]"
-    >
+    <div :class="['TopBox', 'animate__animated', showPanel ? 'animate__fadeOutUp' : 'animate__fadeInDown']">
       <div class="TopTableHeader">
         <span class="TopTableListSpan TopTableListSpan1">时间</span>
         <span class="TopTableListSpan TopTableListSpan2">事件明细</span>
@@ -195,27 +153,15 @@
         <span class="TopTableListSpan TopTableListSpan6">督办</span>
       </div>
       <!-- <div class="TopTableBody"> -->
-      <Vue3SeamlessScroll
-        :list="AllData.TopTableData"
-        :singleHeight="34"
-        :hover="true"
-        class="TopTableBody"
-      >
+      <Vue3SeamlessScroll :list="AllData.TopTableData" :singleHeight="34" :hover="true" class="TopTableBody">
         <div class="TopTableBody_list" v-for="item in AllData.TopTableData">
           <span class="TopTableListSpan TopTableListSpan1">{{ item.sj }}</span>
           <span class="TopTableListSpan TopTableListSpan2">{{ item.mx }}</span>
           <span class="TopTableListSpan TopTableListSpan3">{{ item.dd }}</span>
-          <span class="TopTableListSpan TopTableListSpan4">{{
-            item.zt == 0 ? "未处理" : "已处理"
-          }}</span>
+          <span class="TopTableListSpan TopTableListSpan4">{{ item.zt == 0 ? '未处理' : '已处理' }}</span>
           <span class="TopTableListSpan TopTableListSpan5">{{ item.dw }}</span>
           <span class="TopTableListSpan TopTableListSpan6">
-            <img
-              class="TopTableListSpanImg2"
-              src="@/assets/images/Sponge_screen/RQ/RQ_XX.png"
-              alt=""
-              @click="PaiFa(item)"
-            />
+            <img class="TopTableListSpanImg2" src="@/assets/images/Sponge_screen/RQ/RQ_XX.png" alt="" @click="PaiFa(item)" />
             <img
               class="TopTableListSpanImg"
               src="@/assets/images/Sponge_screen/RQ/RQ_SP.png"
@@ -231,49 +177,49 @@
 </template>
 
 <script setup name="ZHRQ">
-import { ref, reactive, toRefs, onMounted, onBeforeUnmount, nextTick } from "vue";
+import { ref, reactive, toRefs, onMounted, onBeforeUnmount, nextTick } from 'vue';
 
-import * as echarts from "echarts";
-import bus from "@/bus";
-import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
-import sheBeiLost from "@/assets/sheBeiLost.json";
-import xiaXian from "@/assets/xiaXian.json";
-import yiBian from "@/assets/yiBian.json";
-import zaWuDuiFang from "@/assets/zaWuDuiFang.json";
-import rq_QiTa from "@/assets/rq_QiTa.json";
-import no_sheBeiLost from "@/assets/no_sheBeiLost.json";
-import no_xiaXian from "@/assets/no_xiaXian.json";
-import no_yiBian from "@/assets/no_yiBian.json";
-import no_zaWuDuiFang from "@/assets/no_zaWuDuiFang.json";
-import no_rq_QiTa from "@/assets/no_rq_QiTa.json";
-import yanAnRQoverindex from "@/assets/yanAnRQoverindex.json";
-import yanAnWarring from "@/assets/yanAnWarring.json";
+import * as echarts from 'echarts';
+import bus from '@/bus';
+import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
+import sheBeiLost from '@/assets/sheBeiLost.json';
+import xiaXian from '@/assets/xiaXian.json';
+import yiBian from '@/assets/yiBian.json';
+import zaWuDuiFang from '@/assets/zaWuDuiFang.json';
+import rq_QiTa from '@/assets/rq_QiTa.json';
+import no_sheBeiLost from '@/assets/no_sheBeiLost.json';
+import no_xiaXian from '@/assets/no_xiaXian.json';
+import no_yiBian from '@/assets/no_yiBian.json';
+import no_zaWuDuiFang from '@/assets/no_zaWuDuiFang.json';
+import no_rq_QiTa from '@/assets/no_rq_QiTa.json';
+import yanAnRQoverindex from '@/assets/yanAnRQoverindex.json';
+import yanAnWarring from '@/assets/yanAnWarring.json';
 
 const AllData = reactive({
   xunChaStatic: null,
   xunChaLayers: [
-    "alreadyDeal_DF",
-    "alreadyDeal_DS",
-    "alreadyDeal_XX",
-    "alreadyDeal_YB",
-    "alreadyDeal_QT",
-    "noDeal_DF",
-    "noDeal_DS",
-    "noDeall_XX",
-    "noDeal_YB",
-    "noDeal_QT",
+    'alreadyDeal_DF',
+    'alreadyDeal_DS',
+    'alreadyDeal_XX',
+    'alreadyDeal_YB',
+    'alreadyDeal_QT',
+    'noDeal_DF',
+    'noDeal_DS',
+    'noDeall_XX',
+    'noDeal_YB',
+    'noDeal_QT',
   ],
   ChangeData: [
     {
-      name: "枣园",
+      name: '枣园',
       id: 1,
     },
     {
-      name: "杨家湾",
+      name: '杨家湾',
       id: 2,
     },
     {
-      name: "丰富川",
+      name: '丰富川',
       id: 3,
     },
   ],
@@ -281,38 +227,38 @@
   // 风险监测
   FXJCData: [
     {
-      zb: "甲烷浓度",
-      sz: "3%",
+      zb: '甲烷浓度',
+      sz: '3%',
       szzt: true,
       zt: 0, //0预警 1 正常
-      value: "JWND",
+      value: 'JWND',
     },
     {
-      zb: "压力",
-      sz: "5MPa",
+      zb: '压力',
+      sz: '5MPa',
       szzt: false,
       zt: 1, //0预警 1 正常
-      value: "YL",
+      value: 'YL',
     },
     {
-      zb: "温度",
-      sz: "25C°",
+      zb: '温度',
+      sz: '25C°',
       szzt: true,
       zt: 1, //0预警 1 正常
-      value: "WD",
+      value: 'WD',
     },
   ],
   YJChangeData: [
     {
-      name: "综合",
+      name: '综合',
       id: 1,
     },
     {
-      name: "压力",
+      name: '压力',
       id: 2,
     },
     {
-      name: "温度",
+      name: '温度',
       id: 3,
     },
   ],
@@ -320,51 +266,51 @@
   //辅助决策
   JCData: [
     {
-      qy: "宝塔区凤凰山街道二道街",
-      tz: "压力监测异常波动",
+      qy: '宝塔区凤凰山街道二道街',
+      tz: '压力监测异常波动',
       sj: 5,
-      yp: "设施故障",
-      value: "001", //语音识别内容编码-前段自己设置的,后期项目有接口就直接替换数据唯一id
+      yp: '设施故障',
+      value: '001', //语音识别内容编码-前段自己设置的,后期项目有接口就直接替换数据唯一id
     },
     {
-      qy: "宝塔区凤凰山街道二道街",
-      tz: "燃气管道压力过大",
+      qy: '宝塔区凤凰山街道二道街',
+      tz: '燃气管道压力过大',
       sj: 5,
-      yp: "燃气爆管风险",
-      value: "002",
+      yp: '燃气爆管风险',
+      value: '002',
     },
     {
-      qy: "宝塔区凤凰山街道二道街",
-      tz: "高峰期流量持续降低",
+      qy: '宝塔区凤凰山街道二道街',
+      tz: '高峰期流量持续降低',
       sj: 4,
-      yp: "燃气泄漏风险",
-      value: "003",
+      yp: '燃气泄漏风险',
+      value: '003',
     },
   ],
   // 巡查反馈
   XCFKData: [
     {
-      name: "堆放杂物",
+      name: '堆放杂物',
       num1: 20,
       num2: 80,
     },
     {
-      name: "设备丢失",
+      name: '设备丢失',
       num1: 12,
       num2: 88,
     },
     {
-      name: "下陷",
+      name: '下陷',
       num1: 32,
       num2: 68,
     },
     {
-      name: "异变",
+      name: '异变',
       num1: 30,
       num2: 70,
     },
     {
-      name: "其他",
+      name: '其他',
       num1: 20,
       num2: 80,
     },
@@ -372,35 +318,35 @@
   // 顶部表格数据
   TopTableData: [
     {
-      sj: "2024-09-26 10:00:29",
-      mx: "燃气常规检查发现泄漏",
-      dd: "宝塔区凤凰山街道二道街",
+      sj: '2024-09-26 10:00:29',
+      mx: '燃气常规检查发现泄漏',
+      dd: '宝塔区凤凰山街道二道街',
       zt: 0, //0未处理 1已处理
-      dw: "延安市燃气总公司",
+      dw: '延安市燃气总公司',
       value: null,
     },
     {
-      sj: "2024-09-27 16:10:248",
-      mx: "燃气常规检查发现泄漏",
-      dd: "宝塔区凤凰山街道二道街",
+      sj: '2024-09-27 16:10:248',
+      mx: '燃气常规检查发现泄漏',
+      dd: '宝塔区凤凰山街道二道街',
       zt: 0, //0未处理 1已处理
-      dw: "延安市燃气总公司",
+      dw: '延安市燃气总公司',
       value: null,
     },
     {
-      sj: "2024-09-26 10:00:29",
-      mx: "燃气常规检查发现泄漏",
-      dd: "宝塔区凤凰山街道二道街",
+      sj: '2024-09-26 10:00:29',
+      mx: '燃气常规检查发现泄漏',
+      dd: '宝塔区凤凰山街道二道街',
       zt: 0, //0未处理 1已处理
-      dw: "延安市燃气总公司",
+      dw: '延安市燃气总公司',
       value: null,
     },
     {
-      sj: "2024-09-27 16:10:248",
-      mx: "燃气常规检查发现泄漏",
-      dd: "宝塔区凤凰山街道二道街",
+      sj: '2024-09-27 16:10:248',
+      mx: '燃气常规检查发现泄漏',
+      dd: '宝塔区凤凰山街道二道街',
       zt: 0, //0未处理 1已处理
-      dw: "延安市燃气总公司",
+      dw: '延安市燃气总公司',
       value: null,
     },
   ],
@@ -417,7 +363,7 @@
   },
 });
 // 初始化预警统计的Echarts
-const initEcharts = (id) => {
+const initEcharts = id => {
   AllData.YJChangeIndex = id;
   let Data1 = [];
   let Data2 = [];
@@ -437,41 +383,41 @@
   if (!!myChart.value) {
     myChart.value.dispose();
   }
-  myChart.value = echarts.init(document.getElementById("YJEchartsBox"));
-  myChart.value.off("click");
+  myChart.value = echarts.init(document.getElementById('YJEchartsBox'));
+  myChart.value.off('click');
   myChart.value.setOption({
-    color: ["#18A7F2", "#1AF7AA"],
+    color: ['#18A7F2', '#1AF7AA'],
     tooltip: {
-      trigger: "axis",
+      trigger: 'axis',
     },
     grid: {
-      top: "30%",
-      left: "3%",
-      right: "4%",
-      bottom: "3%",
+      top: '30%',
+      left: '3%',
+      right: '4%',
+      bottom: '3%',
       containLabel: true,
     },
     legend: {
-      data: ["预警次数", "持续时长"],
+      data: ['预警次数', '持续时长'],
       textStyle: {
-        color: "#fffd", // 图例文字颜色
+        color: '#fffd', // 图例文字颜色
       },
-      x: "40",
-      y: "10",
+      x: '40',
+      y: '10',
     },
     xAxis: [
       {
-        type: "category",
-        data: ["今日", "09/27", "09/26", "09/25", "09/24", "09/23", "09/22"],
+        type: 'category',
+        data: ['今日', '09/27', '09/26', '09/25', '09/24', '09/23', '09/22'],
         axisPointer: {
-          type: "shadow",
+          type: 'shadow',
         },
         textStyle: {
-          color: "#EBFEFF",
+          color: '#EBFEFF',
         },
         axisLine: {
           lineStyle: {
-            color: "#EBFEFF",
+            color: '#EBFEFF',
           },
         },
         // boundaryGap: false,
@@ -479,57 +425,57 @@
     ],
     yAxis: [
       {
-        type: "value",
-        name: "预警次数",
+        type: 'value',
+        name: '预警次数',
         min: 0,
         max: 12,
         interval: 2,
         axisLabel: {
-          formatter: "{value}",
+          formatter: '{value}',
         },
         axisLine: {
           lineStyle: {
-            color: "#AAC1CF",
+            color: '#AAC1CF',
           },
         },
         splitLine: {
           lineStyle: {
             // 使用深浅的间隔色
-            color: ["#184E5A"],
+            color: ['#184E5A'],
           },
         },
       },
       {
-        type: "value",
-        name: "持续时长",
+        type: 'value',
+        name: '持续时长',
         min: 0,
         max: 30,
         interval: 5,
         axisLabel: {
-          formatter: "{value}",
+          formatter: '{value}',
         },
         axisLine: {
           lineStyle: {
-            color: "#AAC1CF",
+            color: '#AAC1CF',
           },
         },
         splitLine: {
           lineStyle: {
             // 使用深浅的间隔色
-            color: ["#184E5A"],
+            color: ['#184E5A'],
           },
         },
       },
     ],
     series: [
       {
-        name: "预警次数",
-        type: "bar",
-        barWidth: "10px",
+        name: '预警次数',
+        type: 'bar',
+        barWidth: '10px',
         showBackground: true,
         tooltip: {
           valueFormatter: function (value) {
-            return value + " 次";
+            return value + ' 次';
           },
         },
         itemStyle: {
@@ -539,12 +485,12 @@
         data: Data1,
       },
       {
-        name: "持续时长",
-        type: "line",
+        name: '持续时长',
+        type: 'line',
         yAxisIndex: 1,
         tooltip: {
           valueFormatter: function (value) {
-            return value + "min";
+            return value + 'min';
           },
         },
         areaStyle: {
@@ -552,11 +498,11 @@
           color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
             {
               offset: 0,
-              color: "#1AF7AA",
+              color: '#1AF7AA',
             },
             {
               offset: 1,
-              color: "#1AF7AA00",
+              color: '#1AF7AA00',
             },
           ]),
         },
@@ -565,19 +511,19 @@
       },
     ],
   });
-  myChart.value.on("click", (param) => {
+  myChart.value.on('click', param => {
     console.log(param);
     let data = {
-      title: "风险监测",
-      comIDs: ["RQ_FengXianJianCe"],
+      title: '风险监测',
+      comIDs: ['RQ_FengXianJianCe'],
     };
-    bus.emit("publicDialog", data);
+    bus.emit('publicDialog', data);
     let a = {
-      value: "全部",
-      endTime: "2024-10-05",
+      value: '全部',
+      endTime: '2024-10-05',
     };
     setTimeout(() => {
-      bus.emit("getDataListFxjc", a);
+      bus.emit('getDataListFxjc', a);
     }, 500);
   });
 
@@ -591,7 +537,7 @@
     i++;
     if (i == length) i = 0;
     myChart.value.dispatchAction({
-      type: "showTip",
+      type: 'showTip',
       seriesIndex: 0,
       dataIndex: i,
     });
@@ -608,14 +554,14 @@
   return `width:${widthNum}%`;
 };
 // 工单派发
-const GongDanPaiFa = (item) => {
+const GongDanPaiFa = item => {
   console.log(item);
   let data = {
     title: item.qy,
-    comIDs: ["gdpf"],
+    comIDs: ['gdpf'],
     getSiteId: item.value,
   };
-  bus.emit("publicDialog", data);
+  bus.emit('publicDialog', data);
 };
 // // 风险
 // const FengXianClick = (item) => {
@@ -627,56 +573,52 @@
 //   bus.emit("publicDialog", data);
 // };
 // 风险监测派发
-const PaiFa = (item) => {
+const PaiFa = item => {
   console.log(item);
   let data = {
-    title: "智慧外呼",
-    comIDs: ["RQ_ZhiHuiWaiHu"],
+    title: '智慧外呼',
+    comIDs: ['RQ_ZhiHuiWaiHu'],
     getSiteId: item.value,
   };
-  bus.emit("publicDialog", data);
+  bus.emit('publicDialog', data);
 };
 //巡查反馈处理、未处理
-const dealOrNoDeal = (item) => {
+const dealOrNoDeal = item => {
   AllData.xunChaStatic = item;
   newfiberMapbox.map.easeTo({
     center: [109.488, 36.596],
     zoom: 12,
     pitch: 55,
   });
-  bus.emit("removeMapDatas", ["warning_monitor"]);
+  bus.emit('removeMapDatas', ['warning_monitor']);
   if (item == 1) {
-    let removedLayer = AllData.xunChaLayers.filter((layer) => layer.includes("noDeal"));
-    let selectedLayer = AllData.xunChaLayers.filter((layer) =>
-      layer.includes("alreadyDeal")
-    );
-    bus.emit("removeMapDatas", AllData.xunChaLayers);
-    bus.emit("setGeoJSON", { json: zaWuDuiFang, key: "alreadyDeal_DF" });
-    bus.emit("setGeoJSON", { json: sheBeiLost, key: "alreadyDeal_DS" });
-    bus.emit("setGeoJSON", { json: xiaXian, key: "alreadyDeal_XX" });
-    bus.emit("setGeoJSON", { json: yiBian, key: "alreadyDeal_YB" });
-    bus.emit("setGeoJSON", { json: rq_QiTa, key: "alreadyDeal_QT" });
-    selectedLayer.forEach((layer) => {
-      bus.emit("setLayerVisible", { layername: layer, isCheck: true });
+    let removedLayer = AllData.xunChaLayers.filter(layer => layer.includes('noDeal'));
+    let selectedLayer = AllData.xunChaLayers.filter(layer => layer.includes('alreadyDeal'));
+    bus.emit('removeMapDatas', AllData.xunChaLayers);
+    bus.emit('setGeoJSON', { json: zaWuDuiFang, key: 'alreadyDeal_DF' });
+    bus.emit('setGeoJSON', { json: sheBeiLost, key: 'alreadyDeal_DS' });
+    bus.emit('setGeoJSON', { json: xiaXian, key: 'alreadyDeal_XX' });
+    bus.emit('setGeoJSON', { json: yiBian, key: 'alreadyDeal_YB' });
+    bus.emit('setGeoJSON', { json: rq_QiTa, key: 'alreadyDeal_QT' });
+    selectedLayer.forEach(layer => {
+      bus.emit('setLayerVisible', { layername: layer, isCheck: true });
     });
   } else {
-    let removedLayer = AllData.xunChaLayers.filter((layer) =>
-      layer.includes("alreadyDeal")
-    );
-    let selectedLayer = AllData.xunChaLayers.filter((layer) => layer.includes("noDeal"));
-    bus.emit("removeMapDatas", AllData.xunChaLayers);
-    bus.emit("setGeoJSON", { json: no_zaWuDuiFang, key: "onDeal_DF" });
-    bus.emit("setGeoJSON", { json: no_sheBeiLost, key: "onDeal_DS" });
-    bus.emit("setGeoJSON", { json: no_xiaXian, key: "onDeal_XX" });
-    bus.emit("setGeoJSON", { json: no_yiBian, key: "onDeal_YB" });
-    bus.emit("setGeoJSON", { json: no_rq_QiTa, key: "onDeal_QT" });
-    selectedLayer.forEach((layer) => {
-      bus.emit("setLayerVisible", { layername: layer, isCheck: true });
+    let removedLayer = AllData.xunChaLayers.filter(layer => layer.includes('alreadyDeal'));
+    let selectedLayer = AllData.xunChaLayers.filter(layer => layer.includes('noDeal'));
+    bus.emit('removeMapDatas', AllData.xunChaLayers);
+    bus.emit('setGeoJSON', { json: no_zaWuDuiFang, key: 'onDeal_DF' });
+    bus.emit('setGeoJSON', { json: no_sheBeiLost, key: 'onDeal_DS' });
+    bus.emit('setGeoJSON', { json: no_xiaXian, key: 'onDeal_XX' });
+    bus.emit('setGeoJSON', { json: no_yiBian, key: 'onDeal_YB' });
+    bus.emit('setGeoJSON', { json: no_rq_QiTa, key: 'onDeal_QT' });
+    selectedLayer.forEach(layer => {
+      bus.emit('setLayerVisible', { layername: layer, isCheck: true });
     });
   }
 };
 // 巡查反馈
-const XunChaFanKui = (item) => {
+const XunChaFanKui = item => {
   let removedLayer = [];
   let selectedLayer = [];
   newfiberMapbox.map.easeTo({
@@ -685,80 +627,60 @@
     pitch: 55,
   });
   switch (item.name) {
-    case "堆放杂物":
-      removedLayer = AllData.xunChaLayers.filter(
-        (layer) => layer != "alreadyDeal_DF" && layer != "noDeal_DF"
-      );
-      selectedLayer = AllData.xunChaLayers.filter(
-        (layer) => layer == "alreadyDeal_DF" || layer == "noDeal_DF"
-      );
-      selectedLayer.forEach((layer) => {
-        bus.emit("setLayerVisible", { layername: layer, isCheck: true });
+    case '堆放杂物':
+      removedLayer = AllData.xunChaLayers.filter(layer => layer != 'alreadyDeal_DF' && layer != 'noDeal_DF');
+      selectedLayer = AllData.xunChaLayers.filter(layer => layer == 'alreadyDeal_DF' || layer == 'noDeal_DF');
+      selectedLayer.forEach(layer => {
+        bus.emit('setLayerVisible', { layername: layer, isCheck: true });
       });
-      removedLayer.forEach((layer) => {
-        bus.emit("setLayerVisible", { layername: layer, isCheck: false });
+      removedLayer.forEach(layer => {
+        bus.emit('setLayerVisible', { layername: layer, isCheck: false });
       });
       break;
-    case "设备丢失":
-      removedLayer = AllData.xunChaLayers.filter(
-        (layer) => layer != "alreadyDeal_DS" && layer != "noDeal_DS"
-      );
-      selectedLayer = AllData.xunChaLayers.filter(
-        (layer) => layer == "alreadyDeal_DS" || layer == "noDeal_DS"
-      );
-      selectedLayer.forEach((layer) => {
-        bus.emit("setLayerVisible", { layername: layer, isCheck: true });
+    case '设备丢失':
+      removedLayer = AllData.xunChaLayers.filter(layer => layer != 'alreadyDeal_DS' && layer != 'noDeal_DS');
+      selectedLayer = AllData.xunChaLayers.filter(layer => layer == 'alreadyDeal_DS' || layer == 'noDeal_DS');
+      selectedLayer.forEach(layer => {
+        bus.emit('setLayerVisible', { layername: layer, isCheck: true });
       });
-      removedLayer.forEach((layer) => {
-        bus.emit("setLayerVisible", { layername: layer, isCheck: false });
+      removedLayer.forEach(layer => {
+        bus.emit('setLayerVisible', { layername: layer, isCheck: false });
       });
       break;
-    case "下陷":
-      removedLayer = AllData.xunChaLayers.filter(
-        (layer) => layer != "alreadyDeal_XX" && layer != "noDeal_XX"
-      );
-      selectedLayer = AllData.xunChaLayers.filter(
-        (layer) => layer == "alreadyDeal_XX" || layer == "noDeal_XX"
-      );
-      selectedLayer.forEach((layer) => {
-        bus.emit("setLayerVisible", { layername: layer, isCheck: true });
+    case '下陷':
+      removedLayer = AllData.xunChaLayers.filter(layer => layer != 'alreadyDeal_XX' && layer != 'noDeal_XX');
+      selectedLayer = AllData.xunChaLayers.filter(layer => layer == 'alreadyDeal_XX' || layer == 'noDeal_XX');
+      selectedLayer.forEach(layer => {
+        bus.emit('setLayerVisible', { layername: layer, isCheck: true });
       });
-      removedLayer.forEach((layer) => {
-        bus.emit("setLayerVisible", { layername: layer, isCheck: false });
+      removedLayer.forEach(layer => {
+        bus.emit('setLayerVisible', { layername: layer, isCheck: false });
       });
       break;
-    case "异变":
-      removedLayer = AllData.xunChaLayers.filter(
-        (layer) => layer != "alreadyDeal_YB" && layer != "noDeal_YB"
-      );
-      selectedLayer = AllData.xunChaLayers.filter(
-        (layer) => layer == "alreadyDeal_YB" || layer == "noDeal_YB"
-      );
-      selectedLayer.forEach((layer) => {
-        bus.emit("setLayerVisible", { layername: layer, isCheck: true });
+    case '异变':
+      removedLayer = AllData.xunChaLayers.filter(layer => layer != 'alreadyDeal_YB' && layer != 'noDeal_YB');
+      selectedLayer = AllData.xunChaLayers.filter(layer => layer == 'alreadyDeal_YB' || layer == 'noDeal_YB');
+      selectedLayer.forEach(layer => {
+        bus.emit('setLayerVisible', { layername: layer, isCheck: true });
       });
-      removedLayer.forEach((layer) => {
-        bus.emit("setLayerVisible", { layername: layer, isCheck: false });
+      removedLayer.forEach(layer => {
+        bus.emit('setLayerVisible', { layername: layer, isCheck: false });
       });
       break;
-    case "其他":
-      removedLayer = AllData.xunChaLayers.filter(
-        (layer) => layer != "alreadyDeal_QT" && layer != "noDeal_QT"
-      );
-      selectedLayer = AllData.xunChaLayers.filter(
-        (layer) => layer == "alreadyDeal_QT" || layer == "noDeal_QT"
-      );
-      selectedLayer.forEach((layer) => {
-        bus.emit("setLayerVisible", { layername: layer, isCheck: true });
+    case '其他':
+      removedLayer = AllData.xunChaLayers.filter(layer => layer != 'alreadyDeal_QT' && layer != 'noDeal_QT');
+      selectedLayer = AllData.xunChaLayers.filter(layer => layer == 'alreadyDeal_QT' || layer == 'noDeal_QT');
+      selectedLayer.forEach(layer => {
+        bus.emit('setLayerVisible', { layername: layer, isCheck: true });
       });
-      removedLayer.forEach((layer) => {
-        bus.emit("setLayerVisible", { layername: layer, isCheck: false });
+      removedLayer.forEach(layer => {
+        bus.emit('setLayerVisible', { layername: layer, isCheck: false });
       });
       break;
   }
 };
 // 风险评估
-const TuChengClick = (item) => {
+const TuChengClick = item => {
   newfiberMapbox.map.easeTo({
     center: [109.488, 36.596],
     zoom: 12,
@@ -766,61 +688,61 @@
   });
   switch (item) {
     case 0:
-      bus.emit("setLayerVisible", { layername: "rq_SZLH", isCheck: false });
-      bus.emit("setLayerVisible", { layername: "rq_TYLH", isCheck: false });
-      bus.emit("setLayerVisible", { layername: "rq_LGLH", isCheck: false });
-      bus.emit("setLayerVisible", { layername: "rq_other", isCheck: false });
-      bus.emit("setLayerVisible", { layername: "rq_all", isCheck: true }); //所有管网rq_all、市政rq_SZLH、庭院rq_TYLH、立管rq_LGLH、其他rq_other
+      bus.emit('setLayerVisible', { layername: 'rq_SZLH', isCheck: false });
+      bus.emit('setLayerVisible', { layername: 'rq_TYLH', isCheck: false });
+      bus.emit('setLayerVisible', { layername: 'rq_LGLH', isCheck: false });
+      bus.emit('setLayerVisible', { layername: 'rq_other', isCheck: false });
+      bus.emit('setLayerVisible', { layername: 'rq_all', isCheck: true }); //所有管网rq_all、市政rq_SZLH、庭院rq_TYLH、立管rq_LGLH、其他rq_other
       break;
     case 1:
-      bus.emit("setLayerVisible", { layername: "rq_all", isCheck: false }); //所有管网rq_all、市政rq_SZLH、庭院rq_TYLH、立管rq_LGLH、其他rq_other
-      bus.emit("setLayerVisible", { layername: "rq_SZLH", isCheck: true });
-      bus.emit("setLayerVisible", { layername: "rq_TYLH", isCheck: false });
-      bus.emit("setLayerVisible", { layername: "rq_LGLH", isCheck: false });
-      bus.emit("setLayerVisible", { layername: "rq_other", isCheck: false });
+      bus.emit('setLayerVisible', { layername: 'rq_all', isCheck: false }); //所有管网rq_all、市政rq_SZLH、庭院rq_TYLH、立管rq_LGLH、其他rq_other
+      bus.emit('setLayerVisible', { layername: 'rq_SZLH', isCheck: true });
+      bus.emit('setLayerVisible', { layername: 'rq_TYLH', isCheck: false });
+      bus.emit('setLayerVisible', { layername: 'rq_LGLH', isCheck: false });
+      bus.emit('setLayerVisible', { layername: 'rq_other', isCheck: false });
       break;
     case 2:
-      bus.emit("setLayerVisible", { layername: "rq_all", isCheck: false }); //所有管网rq_all、市政rq_SZLH、庭院rq_TYLH、立管rq_LGLH、其他rq_other
-      bus.emit("setLayerVisible", { layername: "rq_SZLH", isCheck: false });
-      bus.emit("setLayerVisible", { layername: "rq_TYLH", isCheck: true });
-      bus.emit("setLayerVisible", { layername: "rq_LGLH", isCheck: false });
-      bus.emit("setLayerVisible", { layername: "rq_other", isCheck: false });
+      bus.emit('setLayerVisible', { layername: 'rq_all', isCheck: false }); //所有管网rq_all、市政rq_SZLH、庭院rq_TYLH、立管rq_LGLH、其他rq_other
+      bus.emit('setLayerVisible', { layername: 'rq_SZLH', isCheck: false });
+      bus.emit('setLayerVisible', { layername: 'rq_TYLH', isCheck: true });
+      bus.emit('setLayerVisible', { layername: 'rq_LGLH', isCheck: false });
+      bus.emit('setLayerVisible', { layername: 'rq_other', isCheck: false });
 
       break;
     case 3:
-      bus.emit("setLayerVisible", { layername: "rq_all", isCheck: false }); //所有管网rq_all、市政rq_SZLH、庭院rq_TYLH、立管rq_LGLH、其他rq_other
-      bus.emit("setLayerVisible", { layername: "rq_SZLH", isCheck: false });
-      bus.emit("setLayerVisible", { layername: "rq_TYLH", isCheck: false });
-      bus.emit("setLayerVisible", { layername: "rq_LGLH", isCheck: true });
-      bus.emit("setLayerVisible", { layername: "rq_other", isCheck: false });
+      bus.emit('setLayerVisible', { layername: 'rq_all', isCheck: false }); //所有管网rq_all、市政rq_SZLH、庭院rq_TYLH、立管rq_LGLH、其他rq_other
+      bus.emit('setLayerVisible', { layername: 'rq_SZLH', isCheck: false });
+      bus.emit('setLayerVisible', { layername: 'rq_TYLH', isCheck: false });
+      bus.emit('setLayerVisible', { layername: 'rq_LGLH', isCheck: true });
+      bus.emit('setLayerVisible', { layername: 'rq_other', isCheck: false });
       break;
     case 4:
-      bus.emit("setLayerVisible", { layername: "rq_all", isCheck: false }); //所有管网rq_all、市政rq_SZLH、庭院rq_TYLH、立管rq_LGLH、其他rq_other
-      bus.emit("setLayerVisible", { layername: "rq_SZLH", isCheck: false });
-      bus.emit("setLayerVisible", { layername: "rq_TYLH", isCheck: false });
-      bus.emit("setLayerVisible", { layername: "rq_LGLH", isCheck: false });
-      bus.emit("setLayerVisible", { layername: "rq_other", isCheck: true });
+      bus.emit('setLayerVisible', { layername: 'rq_all', isCheck: false }); //所有管网rq_all、市政rq_SZLH、庭院rq_TYLH、立管rq_LGLH、其他rq_other
+      bus.emit('setLayerVisible', { layername: 'rq_SZLH', isCheck: false });
+      bus.emit('setLayerVisible', { layername: 'rq_TYLH', isCheck: false });
+      bus.emit('setLayerVisible', { layername: 'rq_LGLH', isCheck: false });
+      bus.emit('setLayerVisible', { layername: 'rq_other', isCheck: true });
       break;
   }
 };
 
 // 风险
-const FengXianClick = (item) => {
+const FengXianClick = item => {
   let data = {
-    title: item.zb + " 风险监测",
-    comIDs: ["RQ_FengXianJianCe"],
+    title: item.zb + ' 风险监测',
+    comIDs: ['RQ_FengXianJianCe'],
   };
-  bus.emit("publicDialog", data);
+  bus.emit('publicDialog', data);
   // 传给组件数据
 
   setTimeout(() => {
-    bus.emit("getDataListFxjc", item);
+    bus.emit('getDataListFxjc', item);
   }, 500);
 };
 
 // 现场连线
-const XianChangLianXian = (item) => {
-  bus.emit("OpenRY");
+const XianChangLianXian = item => {
+  bus.emit('OpenRY');
 };
 
 watch(
@@ -832,14 +754,13 @@
 );
 //燃气超标
 const showIndexOver = () => {
-  bus.emit("removeMapDatas", AllData.xunChaLayers);
-  let key = "warning_monitor";
-  bus.emit("getGeojsonByType", {
+  bus.emit('removeMapDatas', AllData.xunChaLayers);
+  let key = 'warning_monitor';
+  bus.emit('getGeojsonByType', {
     type: key,
-    callback: (geojson) => {
-      if (!!!geojson.features.length)
-        bus.emit("setGeoJSON", { json: yanAnRQoverindex, key: "warning_monitor" });
-      bus.emit("setLayerVisible", { type: "point", layername: key, isCheck: true });
+    callback: geojson => {
+      if (!!!geojson.features.length) bus.emit('setGeoJSON', { json: yanAnRQoverindex, key: 'warning_monitor' });
+      bus.emit('setLayerVisible', { type: 'point', layername: key, isCheck: true });
     },
   });
   newfiberMapbox.map.easeTo({
@@ -849,14 +770,13 @@
 };
 //燃气告警
 const showIndexWarning = () => {
-  bus.emit("removeMapDatas", AllData.xunChaLayers);
-  let key = "warning_monitor";
-  bus.emit("getGeojsonByType", {
+  bus.emit('removeMapDatas', AllData.xunChaLayers);
+  let key = 'warning_monitor';
+  bus.emit('getGeojsonByType', {
     type: key,
-    callback: (geojson) => {
-      if (!!!geojson.features.length)
-        bus.emit("setGeoJSON", { json: yanAnWarring, key: "warning_monitor" });
-      bus.emit("setLayerVisible", { type: "point", layername: key, isCheck: true });
+    callback: geojson => {
+      if (!!!geojson.features.length) bus.emit('setGeoJSON', { json: yanAnWarring, key: 'warning_monitor' });
+      bus.emit('setLayerVisible', { type: 'point', layername: key, isCheck: true });
     },
   });
   newfiberMapbox.map.easeTo({
@@ -867,47 +787,46 @@
 onMounted(() => {
   let initeRQTimer = setInterval(() => {
     if (!newfiberMapbox) return;
-    if (!newfiberMapbox.map.getLayer("rq_pipeline_info")) return;
-    if (!newfiberMapbox.map.getLayer("sx_ya_smx_rq_point")) return;
+    if (!newfiberMapbox.map.getLayer('rq_pipeline_info')) return;
+    if (!newfiberMapbox.map.getLayer('sx_ya_smx_rq_point')) return;
     newfiberMapbox.map.easeTo({
       center: [109.488, 36.596],
       zoom: 13,
     });
     //告警点事件
-    let warningPoint = newfiberMapbox
-      .getLayers()
-      .filter((feature) => feature.newfiberId == "warning_monitor")[0];
+    let warningPoint = newfiberMapbox.getLayers().filter(feature => feature.newfiberId == 'warning_monitor')[0];
     if (warningPoint) {
-      warningPoint.on("click", (e) => {
+      warningPoint.on('click', e => {
         let popupData = e.feature.properties;
 
-        console.log("popupData---", "告警---------", popupData);
+        console.log('popupData---', '告警---------', popupData);
       });
     }
-    bus.emit("setLayerVisible", { layername: "rq_all", isCheck: true }); //所有管网rq_all、市政rq_SZLH、庭院rq_TYLH、立管rq_LGLH、其他rq_other
+    bus.emit('setLayerVisible', { layername: 'rq_all', isCheck: true }); //所有管网rq_all、市政rq_SZLH、庭院rq_TYLH、立管rq_LGLH、其他rq_other
 
     clearInterval(initeRQTimer);
   }, 100);
   initEcharts(1);
 });
 onBeforeUnmount(() => {
-  bus.emit("setLayerVisible", { layername: "rq_all", isCheck: false });
-  bus.emit("setLayerVisible", { layername: "rq_SZLH", isCheck: false });
-  bus.emit("setLayerVisible", { layername: "rq_TYLH", isCheck: false });
-  bus.emit("setLayerVisible", { layername: "rq_LGLH", isCheck: false });
-  bus.emit("setLayerVisible", { layername: "rq_other", isCheck: false });
-  bus.emit("removeMapDatas", AllData.xunChaLayers);
-  bus.emit("removeMapDatas", ["warning_monitor"]);
-  bus.emit("setLayerVisible", { layername: "warning_monitor", isCheck: false });
-  bus.emit("closeCesiumPopup");
-  if (!!newfiberMapbox.getLayerByName("rqLine")) {
-    newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName("rqLine"));
+  bus.emit('setLayerVisible', { layername: 'rq_all', isCheck: false });
+  bus.emit('setLayerVisible', { layername: 'rq_SZLH', isCheck: false });
+  bus.emit('setLayerVisible', { layername: 'rq_TYLH', isCheck: false });
+  bus.emit('setLayerVisible', { layername: 'rq_LGLH', isCheck: false });
+  bus.emit('setLayerVisible', { layername: 'rq_other', isCheck: false });
+  bus.emit('removeMapDatas', AllData.xunChaLayers);
+  bus.emit('removeMapDatas', ['warning_monitor']);
+  bus.emit('setLayerVisible', { layername: 'warning_monitor', isCheck: false });
+  bus.emit('closeCesiumPopup');
+  bus.emit('SetLayerShow', ['蓝色地图']);
+  if (!!newfiberMapbox.getLayerByName('rqLine')) {
+    newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName('rqLine'));
   }
 });
 </script>
 
 <style lang="scss" scoped>
-@import "@/assets/styles/transition_oneMap.scss";
+@import '@/assets/styles/transition_oneMap.scss';
 #ZHRQ {
   .LeftBox {
     width: 450px;
@@ -915,11 +834,7 @@
     position: absolute;
     left: 10px;
     top: 70px;
-    background: linear-gradient(
-      0deg,
-      rgba(0, 43, 67, 0.8) 0%,
-      rgba(0, 69, 108, 0.8) 100%
-    );
+    background: linear-gradient(0deg, rgba(0, 43, 67, 0.8) 0%, rgba(0, 69, 108, 0.8) 100%);
     border-radius: 6px;
     border: 1px solid #47eef3;
     box-sizing: border-box;
@@ -994,7 +909,7 @@
         width: 100%;
         height: calc(100% - 72px);
         margin-top: 10px;
-        background: url("@/assets/images/Sponge_screen/RQ/Ech.png") no-repeat center;
+        background: url('@/assets/images/Sponge_screen/RQ/Ech.png') no-repeat center;
         position: relative;
 
         .ClickDiv1 {
@@ -1052,7 +967,7 @@
           height: 42px;
           width: calc(50% - 9px);
           display: flex;
-          background: url("@/assets/images/Sponge_screen/RQ/RQ_FX.png") no-repeat center;
+          background: url('@/assets/images/Sponge_screen/RQ/RQ_FX.png') no-repeat center;
           background-size: 100% 100%;
           cursor: pointer;
 
@@ -1284,11 +1199,7 @@
     position: absolute;
     right: 10px;
     top: 70px;
-    background: linear-gradient(
-      0deg,
-      rgba(0, 43, 67, 0.8) 0%,
-      rgba(0, 69, 108, 0.8) 100%
-    );
+    background: linear-gradient(0deg, rgba(0, 43, 67, 0.8) 0%, rgba(0, 69, 108, 0.8) 100%);
     border-radius: 6px;
     border: 1px solid #47eef3;
     box-sizing: border-box;
@@ -1446,11 +1357,7 @@
     position: absolute;
     left: 520px;
     top: 110px;
-    background: linear-gradient(
-      0deg,
-      rgba(0, 43, 67, 0.8) 0%,
-      rgba(0, 69, 108, 0.8) 100%
-    );
+    background: linear-gradient(0deg, rgba(0, 43, 67, 0.8) 0%, rgba(0, 69, 108, 0.8) 100%);
     border-radius: 6px;
     border: 1px solid #47eef3;
     box-sizing: border-box;
@@ -1544,8 +1451,7 @@
     .Box_header {
       width: 100%;
       height: 43px;
-      background: url("@/assets/images/Sponge_screen/Box_HeaderBackground.png") no-repeat
-        center;
+      background: url('@/assets/images/Sponge_screen/Box_HeaderBackground.png') no-repeat center;
       background-size: cover;
       font-family: PangMenZhengDao;
       font-weight: 400;
diff --git a/src/views/oneMap/components/ZTGL.vue b/src/views/oneMap/components/ZTGL.vue
index 796f6da..f524835 100644
--- a/src/views/oneMap/components/ZTGL.vue
+++ b/src/views/oneMap/components/ZTGL.vue
@@ -18,7 +18,7 @@
 import testProjectionLabel from '@/assets/testProjectionLabel.json';
 import mapBoxVectorLayer from '@/utils/GISdocument/mapboxVectorLayer.js';
 import xtb_img from '@/assets/newImgs/xtb_img.png';
-
+import bus from '@/bus';
 const showPanel = ref(true); //面板展开收起
 // 面板内容展开收起控制
 const props = defineProps({
@@ -67,8 +67,11 @@
   }, 100);
 });
 onBeforeUnmount(() => {
-  newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName('testProjection'));
-  mapBoxVectorLayer.removeByIds(['testProjection']);
+  bus.emit('SetLayerShow', ['蓝色地图']);
+  if (newfiberMapbox.getLayerByName('testProjection')) {
+    newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName('testProjection'));
+    mapBoxVectorLayer.removeByIds(['testProjection']);
+  }
 });
 </script>
 
diff --git a/src/views/oneMap/components/chartLogging.vue b/src/views/oneMap/components/chartLogging.vue
index c9fdcc4..2ea8b4d 100644
--- a/src/views/oneMap/components/chartLogging.vue
+++ b/src/views/oneMap/components/chartLogging.vue
@@ -45,6 +45,7 @@
             color: '#fff',
           },
         },
+
         xAxis: [
           {
             type: 'category',
@@ -81,6 +82,7 @@
               },
             },
           },
+
           {
             name: props.data.yAxisName2 || '',
             inverse: false,
@@ -101,6 +103,16 @@
             },
           },
         ],
+        // 时间轴滑动选择器
+        dataZoom: [
+          {
+            show: true,
+            realtime: true,
+            start: 30,
+            end: 70,
+            xAxisIndex: [0, 1],
+          },
+        ],
         series: [
           {
             name: '降雨量(mm)',
diff --git a/src/views/oneMap/components/pipeFX.vue b/src/views/oneMap/components/pipeFX.vue
index df0894c..ea1db5e 100644
--- a/src/views/oneMap/components/pipeFX.vue
+++ b/src/views/oneMap/components/pipeFX.vue
@@ -121,6 +121,16 @@
             },
           },
         ],
+        // 时间轴滑动选择器
+        dataZoom: [
+          {
+            show: true,
+            realtime: true,
+            start: 30,
+            end: 70,
+            xAxisIndex: [0, 1],
+          },
+        ],
         series: [
           {
             name: '降雨量(mm)',
diff --git a/src/views/oneMap/components/projectDX.vue b/src/views/oneMap/components/projectDX.vue
index cecd854..ec593c1 100644
--- a/src/views/oneMap/components/projectDX.vue
+++ b/src/views/oneMap/components/projectDX.vue
@@ -93,6 +93,16 @@
             },
           },
         ],
+        // 时间轴滑动选择器
+        dataZoom: [
+          {
+            show: true,
+            realtime: true,
+            start: 30,
+            end: 70,
+            xAxisIndex: [0, 1],
+          },
+        ],
         series: [
           {
             // smooth: true, //变为曲线 默认false折线

diff --git a/package.json b/package.json
index 39861ad..e784d82 100644
--- a/package.json
+++ b/package.json
@@ -72,4 +72,4 @@
     "vite-plugin-svg-icons": "2.0.1",
     "vite-plugin-vue-setup-extend": "0.4.0"
   }
-}
+}
\ No newline at end of file
diff --git a/src/assets/images/fhpl/sqjca.png b/src/assets/images/fhpl/sqjca.png
index 0eb531c..00e619c 100644
--- a/src/assets/images/fhpl/sqjca.png
+++ b/src/assets/images/fhpl/sqjca.png
Binary files differ
diff --git a/src/views/oneMap/ConstructionEvaluation/JSPGLeftBox.vue b/src/views/oneMap/ConstructionEvaluation/JSPGLeftBox.vue
index 2a7ff07..3ee47c4 100644
--- a/src/views/oneMap/ConstructionEvaluation/JSPGLeftBox.vue
+++ b/src/views/oneMap/ConstructionEvaluation/JSPGLeftBox.vue
@@ -65,8 +65,9 @@
   </div>
   <!-- 污水收集处理 -->
   <div class="Sewagecollection">
-    <div class="ListBoxHeader" @click="showSewageFectory">
-      <div class="ListBoxHeader_font">污水收集处理</div>
+    <div class="topVehicl flex">
+      <div class="icon"></div>
+      <div class="name">污水收集处理</div>
     </div>
     <div class="wssjEch"></div>
   </div>
@@ -293,7 +294,31 @@
 .Sewagecollection {
   width: 450px;
   height: 25%;
-  // background: yellowgreen;
+
+  .topVehicl {
+    font-family: Source Han Sans CN;
+    font-weight: bold;
+    font-size: 14px;
+    color: #ebfeff;
+    align-items: center;
+    height: 30px;
+    // background: teal;
+    .icon {
+      position: relative;
+      top: -1px;
+      width: 25px;
+      height: 25px;
+      background: url('@/assets/newImgs/xtb_img.png') no-repeat;
+    }
+
+    .name {
+      background: linear-gradient(0deg, rgba(0, 242, 255, 0.5) 0%, rgba(0, 242, 255, 0) 100%);
+      padding: 0px 3px;
+      height: 10px;
+      line-height: 0px;
+      margin-top: 6px;
+    }
+  }
   .wssjEch {
     margin: 5px auto;
     width: 420px;
diff --git a/src/views/oneMap/ConstructionEvaluation/JSPGRightBox.vue b/src/views/oneMap/ConstructionEvaluation/JSPGRightBox.vue
index dbeddc8..3f696aa 100644
--- a/src/views/oneMap/ConstructionEvaluation/JSPGRightBox.vue
+++ b/src/views/oneMap/ConstructionEvaluation/JSPGRightBox.vue
@@ -2,7 +2,7 @@
   <!-- 绩效管理 -->
   <div class="management">
     <div class="ListBoxHeader">
-      <div class="ListBoxHeader_font">绩效管理</div>
+      <div class="ListBoxHeader_font">管理绩效</div>
     </div>
     <!-- 年份切换 -->
     <div class="subRightBox">
diff --git a/src/views/oneMap/FloodStuationReview/sqhgBottomBox.vue b/src/views/oneMap/FloodStuationReview/sqhgBottomBox.vue
index 53d38bb..d178c59 100644
--- a/src/views/oneMap/FloodStuationReview/sqhgBottomBox.vue
+++ b/src/views/oneMap/FloodStuationReview/sqhgBottomBox.vue
@@ -117,8 +117,8 @@
 const ranLeng = [
   [
     { value: '0-0.2', color: 'rgba(7, 213, 118, 0)' },
-    { value: '0.2-5', color: 'rgba(7, 213, 118, 1)' },
-    { value: '5-25', color: 'rgba(38, 129, 240,1)' },
+    { value: '0.2-5', color: 'rgba(38, 129, 240,1)' },
+    { value: '5-25', color: 'rgb(222, 230, 0)' },
     { value: '>25', color: 'rgba(255, 26, 26, 1)' },
   ],
   [
@@ -235,14 +235,18 @@
   stepNum.value = 0;
   hgEngPlay.value = false;
   showRainLegend.value = false;
-  // NewFiberMapUtils.disposeRainfall('')
-  // newfiberMap.setLayersVisible(["krigingImage"],false)
+  // newfiberMapbox.map.removeLayer('canvas-layer0');
+  // newfiberMapbox.map.removeSource('canvas-source0');
   hoursList.value.activeIndex = stepNum.value;
   clearInterval(runDayInterval.value);
   if (runDayInterval.value) {
     runDayInterval.value = null;
     refresh.value = Math.random();
   }
+  // if (newfiberMapbox.map.getLayer('canvas-layer0')) {
+  //   newfiberMapbox.map.removeLayer('canvas-layer0');
+  //   newfiberMapbox.map.removeSource('canvas-source0');
+  // }
 }
 
 function changeChartData() {
@@ -375,10 +379,10 @@
 ];*/
 let colorScale = [
   { value: '0', color: 'rgba(7, 213, 118, 0)' },
-  { value: '0.2', color: 'rgba(7, 213, 118, 1)' },
-  { value: '5', color: 'rgba(38, 129, 240,1)' },
-  { value: '25', color: 'rgba(255, 26, 26, 1)' },
-  { value: '250', color: 'rgba(255, 26, 26, 1)' },
+  { value: '0.2', color: 'rgb(38, 129, 240)' },
+  { value: '5', color: 'rgb(222, 230, 0)' },
+  { value: '25', color: 'rgb(255, 26, 26)' },
+  { value: '250', color: 'rgb(255, 26, 26)' },
 ];
 let imageFiles = [];
 let canvas = [];
diff --git a/src/views/oneMap/FloodStuationReview/xqhgLeftBox.vue b/src/views/oneMap/FloodStuationReview/xqhgLeftBox.vue
index 14170d1..c43cb7b 100644
--- a/src/views/oneMap/FloodStuationReview/xqhgLeftBox.vue
+++ b/src/views/oneMap/FloodStuationReview/xqhgLeftBox.vue
@@ -122,7 +122,7 @@
         background: linear-gradient(0deg, rgba(0, 242, 255, 0.5) 0%, rgba(0, 242, 255, 0) 100%);
         height: 10px;
         line-height: 0px;
-        margin-top: 10px;
+        margin-top: 12px;
       }
     }
     .ScheduEcharts {
@@ -161,7 +161,7 @@
       background: linear-gradient(0deg, rgba(0, 242, 255, 0.5) 0%, rgba(0, 242, 255, 0) 100%);
       height: 10px;
       line-height: 0px;
-      margin-top: 10px;
+      margin-top: 12px;
     }
   }
   .VehiclEcharts {
@@ -196,7 +196,7 @@
       background: linear-gradient(0deg, rgba(0, 242, 255, 0.5) 0%, rgba(0, 242, 255, 0) 100%);
       height: 10px;
       line-height: 0px;
-      margin-top: 10px;
+      margin-top: 12px;
     }
   }
   .MaterialEcharts {
diff --git a/src/views/oneMap/LayerControl/LayerControl.vue b/src/views/oneMap/LayerControl/LayerControl.vue
index 37d0576..cc8e024 100644
--- a/src/views/oneMap/LayerControl/LayerControl.vue
+++ b/src/views/oneMap/LayerControl/LayerControl.vue
@@ -30,29 +30,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 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({
   // 图层控制面板的渲染数据
   /**图层面板数据字段说明
@@ -69,72 +70,90 @@
       Show: true,
       children: [
         {
-          layerName: "中心城区",
-          layerKey: "centerCity",
-          layerIcon: requireTuChengImg("zhongxinchengqu"),
+          layerName: '蓝色地图',
+          layerKey: 'blackMap',
+          layerIcon: requireTuChengImg('zhongxinchengqu'),
+          layerVisible: false,
+        },
+        {
+          layerName: '白色地图',
+          layerKey: 'whiteMap',
+          layerIcon: requireTuChengImg('zhongxinchengqu'),
+          layerVisible: false,
+        },
+        {
+          layerName: '影像地图',
+          layerKey: 'imageMap',
+          layerIcon: requireTuChengImg('zhongxinchengqu'),
+          layerVisible: false,
+        },
+        {
+          layerName: '中心城区',
+          layerKey: 'centerCity',
+          layerIcon: requireTuChengImg('zhongxinchengqu'),
           layerVisible: false,
           dynamicLineData: yanAnCenterCity,
         },
         {
-          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,
         },
@@ -145,38 +164,38 @@
       Show: true,
       children: [
         {
-          layerName: "燃气管网",
-          layerKey: "rq_all",
+          layerName: '燃气管网',
+          layerKey: 'rq_all',
           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,
         },
@@ -187,22 +206,22 @@
       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,
         },
@@ -213,8 +232,8 @@
         //   layerVisible: false,
         // },
         {
-          layerName: "雨水泵站",
-          layerKey: "YSBZ",
+          layerName: '雨水泵站',
+          layerKey: 'YSBZ',
           layerIcon: null,
           layerVisible: false,
           data: yanAnYSBZ,
@@ -226,14 +245,14 @@
       Show: true,
       children: [
         {
-          layerName: "污水分区",
-          layerKey: "sewageArea",
+          layerName: '污水分区',
+          layerKey: 'sewageArea',
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: "污水管网",
-          layerKey: "wsLine1",
+          layerName: '污水管网',
+          layerKey: 'wsLine1',
           layerIcon: null,
           layerVisible: false,
         },
@@ -250,8 +269,8 @@
         //   layerVisible: false,
         // },
         {
-          layerName: "污水处理厂",
-          layerKey: "WSCLC",
+          layerName: '污水处理厂',
+          layerKey: 'WSCLC',
           layerIcon: null,
           layerVisible: false,
           data: yanAnWSCLC,
@@ -263,36 +282,36 @@
       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,
@@ -307,10 +326,10 @@
     .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,
@@ -319,37 +338,79 @@
 watch(
   () => props.ShowTuCheng,
   (newValue, oldValue) => {
-    console.log("ShowTuCheng变化了", newValue, oldValue);
+    console.log('ShowTuCheng变化了', newValue, oldValue);
   },
   { immediate: true, deep: true }
 );
 
-const layerClick = (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 });
+  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 => {
+      oldIds.push(layer.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]));
+    });
+    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');
+    let newMapStyle;
+    let oldMapStyle = newfiberMapbox.map.getStyle();
+    let oldIds = [];
+    oldMapStyle.layers.forEach(layer => {
+      oldIds.push(layer.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]));
+    });
+    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.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.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, // 持续时间，延时
@@ -360,29 +421,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, // 持续时间，延时
@@ -393,22 +454,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, // 持续时间，延时
@@ -419,29 +480,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) : '';
       });
     });
   });
@@ -449,17 +510,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>
 
@@ -470,7 +531,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;
@@ -486,7 +547,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;
diff --git a/src/views/oneMap/components/FXHG.vue b/src/views/oneMap/components/FXHG.vue
index 8924475..44e9c21 100644
--- a/src/views/oneMap/components/FXHG.vue
+++ b/src/views/oneMap/components/FXHG.vue
@@ -40,6 +40,7 @@
   showPanel.value = true;
   showBottom.value = false;
   curType.value = true;
+  bus.emit('SetLayerShow', ['蓝色地图']);
   if (newfiberMapbox.map.getLayer('dynamicRoute')) {
     newfiberMapbox.map.removeLayer('dynamicRoute');
     newfiberMapbox.map.removeLayer('dynamicRoute_Symbol');
@@ -68,6 +69,7 @@
 
   let initePSTimer = setInterval(() => {
     if (!newfiberMapbox) return;
+    bus.emit('SetLayerShow', ['白色地图']);
     bus.emit('setLayerVisible', { layername: 'ysLine1', isCheck: true });
     //bus.emit('setLayerVisible', { layername: 'wsLine1', isCheck: true });
     clearInterval(initePSTimer);
diff --git a/src/views/oneMap/components/ZHHM.vue b/src/views/oneMap/components/ZHHM.vue
index d68bdc5..1f29507 100644
--- a/src/views/oneMap/components/ZHHM.vue
+++ b/src/views/oneMap/components/ZHHM.vue
@@ -648,6 +648,7 @@
     zoom: 12,
     pitch: 55,
   });
+  bus.emit('SetLayerShow', ['蓝色地图']);
   // 先清空
   bus.emit('clearAllLayer');
   let removedLayer = ['HMJZYSQ', 'HMXGYLD', 'HMXDLGC', 'HMXSX', 'GWPCYXF'];
diff --git a/src/views/oneMap/components/ZHHM_JCFX.vue b/src/views/oneMap/components/ZHHM_JCFX.vue
index c420911..42e81e6 100644
--- a/src/views/oneMap/components/ZHHM_JCFX.vue
+++ b/src/views/oneMap/components/ZHHM_JCFX.vue
@@ -411,6 +411,7 @@
 });
 onBeforeUnmount(() => {
   bus.emit('clearAllLayer');
+  bus.emit('SetLayerShow', ['蓝色地图']);
   let removedLayer = ['HMJZYSQ', 'HMXGYLD', 'HMXDLGC', 'HMXSX', 'GWPCYXF'];
   removedLayer.forEach(layer => {
     bus.emit('setLayerVisible', { layername: layer, isCheck: false });
diff --git a/src/views/oneMap/components/ZHHM_JSPG.vue b/src/views/oneMap/components/ZHHM_JSPG.vue
index 7400f1b..df2c85f 100644
--- a/src/views/oneMap/components/ZHHM_JSPG.vue
+++ b/src/views/oneMap/components/ZHHM_JSPG.vue
@@ -53,6 +53,7 @@
 };
 
 onMounted(() => {
+  bus.emit('SetLayerShow', ['蓝色地图']);
   newfiberMapbox.map.easeTo({
     center: [109.488, 36.596],
     zoom: 13,
diff --git a/src/views/oneMap/components/ZHPS.vue b/src/views/oneMap/components/ZHPS.vue
index 7ce8bb0..f09ddbc 100644
--- a/src/views/oneMap/components/ZHPS.vue
+++ b/src/views/oneMap/components/ZHPS.vue
@@ -43,6 +43,7 @@
   });
 });
 onBeforeUnmount(() => {
+  bus.emit('SetLayerShow', ['蓝色地图']);
   // bus.emit('setLayerVisible', { layername: 'ysLine1', isCheck: false });
   // bus.emit('setLayerVisible', { layername: 'wsLine1', isCheck: false });
 });
diff --git a/src/views/oneMap/components/ZHRQ.vue b/src/views/oneMap/components/ZHRQ.vue
index 40a70cc..493c201 100644
--- a/src/views/oneMap/components/ZHRQ.vue
+++ b/src/views/oneMap/components/ZHRQ.vue
@@ -1,31 +1,17 @@
 <template>
   <div id="ZHRQ">
-    <div
-      :class="[
-        'LeftBox',
-        'animate__animated',
-        showPanel ? 'animate__fadeOutLeft' : 'animate__fadeInLeft',
-      ]"
-    >
+    <div :class="['LeftBox', 'animate__animated', showPanel ? 'animate__fadeOutLeft' : 'animate__fadeInLeft']">
       <div class="ComBox LeftBox1_1">
         <div class="Box_header">管道风险评估</div>
         <div class="Box_Body">
           <div class="TJListBox">
             <div class="TJList TJList_RQ" @click="TuChengClick(0)">
-              <img
-                class="TJListImg"
-                src="@/assets/images/Sponge_screen/RQ/RQ_RQ.png"
-                alt=""
-              />
+              <img class="TJListImg" src="@/assets/images/Sponge_screen/RQ/RQ_RQ.png" alt="" />
               <span class="TJListName">燃气管道</span>
               <span class="TJListValue">4549km</span>
             </div>
             <div class="TJList TJList_GZ">
-              <img
-                class="TJListImg"
-                src="@/assets/images/Sponge_screen/RQ/RQ_GZ.png"
-                alt=""
-              />
+              <img class="TJListImg" src="@/assets/images/Sponge_screen/RQ/RQ_GZ.png" alt="" />
               <span class="TJListName">需改造</span>
               <span class="TJListValue">1922km</span>
             </div>
@@ -71,9 +57,7 @@
             </div>
             <div class="tableBody">
               <div class="tableBodyList" v-for="item in AllData.FXJCData">
-                <span class="tableBodyList_span1" @click="FengXianClick(item)">{{
-                  item.zb
-                }}</span>
+                <span class="tableBodyList_span1" @click="FengXianClick(item)">{{ item.zb }}</span>
                 <span class="tableBodyList_span2" @click="FengXianClick(item)"
                   >{{ item.sz }}
                   <el-icon v-if="item.szzt" color="lime" size="14"><Top /> </el-icon>
@@ -81,11 +65,9 @@
                     <Bottom />
                   </el-icon>
                 </span>
-                <span
-                  class="tableBodyList_span3"
-                  :class="item.zt == 0 ? 'YJClass' : ''"
-                  >{{ item.zt == 0 ? "预警" : "正常" }}</span
-                >
+                <span class="tableBodyList_span3" :class="item.zt == 0 ? 'YJClass' : ''">{{
+                  item.zt == 0 ? '预警' : '正常'
+                }}</span>
                 <span class="tableBodyList_span4" @click="PaiFa(item)">派发</span>
               </div>
             </div>
@@ -110,13 +92,7 @@
         </div>
       </div>
     </div>
-    <div
-      :class="[
-        'RightBox',
-        'animate__animated',
-        showPanel ? 'animate__fadeOutRight' : 'animate__fadeInRight',
-      ]"
-    >
+    <div :class="['RightBox', 'animate__animated', showPanel ? 'animate__fadeOutRight' : 'animate__fadeInRight']">
       <div class="ComBox RightBox1_1">
         <div class="Box_header">辅助决策</div>
         <div class="Box_Body">
@@ -138,16 +114,10 @@
               <span class="JCListBox_List_value color_red">{{ item.yp }}</span>
             </div>
             <div class="JCListBox_List JCListBox_List_BTN">
-              <el-button
-                style="background: #03b6a0; color: white; border: none"
-                size="small"
-                @click="GongDanPaiFa(item)"
+              <el-button style="background: #03b6a0; color: white; border: none" size="small" @click="GongDanPaiFa(item)"
                 >工单派发</el-button
               >
-              <el-button
-                style="background: #03b6a0; color: white; border: none"
-                size="small"
-                @click="XianChangLianXian(item)"
+              <el-button style="background: #03b6a0; color: white; border: none" size="small" @click="XianChangLianXian(item)"
                 >现场联线</el-button
               >
             </div>
@@ -158,18 +128,12 @@
         <div class="Box_header">巡查反馈</div>
         <div class="Box_Body">
           <div class="FK_headerBox">
-            <div class="FK_headerBox_list" @click="dealOrNoDeal(1)">
-              <span class="FK_headerBox_list_colorBox1"></span> 未处理
-            </div>
-            <div class="FK_headerBox_list" @click="dealOrNoDeal(2)">
-              <span class="FK_headerBox_list_colorBox2"></span> 已处理
-            </div>
+            <div class="FK_headerBox_list" @click="dealOrNoDeal(1)"><span class="FK_headerBox_list_colorBox1"></span> 未处理</div>
+            <div class="FK_headerBox_list" @click="dealOrNoDeal(2)"><span class="FK_headerBox_list_colorBox2"></span> 已处理</div>
           </div>
           <div class="FK_bodyBox">
             <div class="FK_bodyBox_list" v-for="item in AllData.XCFKData">
-              <span class="FK_bodyBox_list_label" @click="XunChaFanKui(item)">{{
-                item.name
-              }}</span>
+              <span class="FK_bodyBox_list_label" @click="XunChaFanKui(item)">{{ item.name }}</span>
               <div class="FK_BigBox">
                 <div class="FK_CenBox1" :style="getWidth(item, 1)">{{ item.num1 }}</div>
                 <div class="FK_CenBox2" :style="getWidth(item, 2)">{{ item.num2 }}</div>
@@ -179,13 +143,7 @@
         </div>
       </div>
     </div>
-    <div
-      :class="[
-        'TopBox',
-        'animate__animated',
-        showPanel ? 'animate__fadeOutUp' : 'animate__fadeInDown',
-      ]"
-    >
+    <div :class="['TopBox', 'animate__animated', showPanel ? 'animate__fadeOutUp' : 'animate__fadeInDown']">
       <div class="TopTableHeader">
         <span class="TopTableListSpan TopTableListSpan1">时间</span>
         <span class="TopTableListSpan TopTableListSpan2">事件明细</span>
@@ -195,27 +153,15 @@
         <span class="TopTableListSpan TopTableListSpan6">督办</span>
       </div>
       <!-- <div class="TopTableBody"> -->
-      <Vue3SeamlessScroll
-        :list="AllData.TopTableData"
-        :singleHeight="34"
-        :hover="true"
-        class="TopTableBody"
-      >
+      <Vue3SeamlessScroll :list="AllData.TopTableData" :singleHeight="34" :hover="true" class="TopTableBody">
         <div class="TopTableBody_list" v-for="item in AllData.TopTableData">
           <span class="TopTableListSpan TopTableListSpan1">{{ item.sj }}</span>
           <span class="TopTableListSpan TopTableListSpan2">{{ item.mx }}</span>
           <span class="TopTableListSpan TopTableListSpan3">{{ item.dd }}</span>
-          <span class="TopTableListSpan TopTableListSpan4">{{
-            item.zt == 0 ? "未处理" : "已处理"
-          }}</span>
+          <span class="TopTableListSpan TopTableListSpan4">{{ item.zt == 0 ? '未处理' : '已处理' }}</span>
           <span class="TopTableListSpan TopTableListSpan5">{{ item.dw }}</span>
           <span class="TopTableListSpan TopTableListSpan6">
-            <img
-              class="TopTableListSpanImg2"
-              src="@/assets/images/Sponge_screen/RQ/RQ_XX.png"
-              alt=""
-              @click="PaiFa(item)"
-            />
+            <img class="TopTableListSpanImg2" src="@/assets/images/Sponge_screen/RQ/RQ_XX.png" alt="" @click="PaiFa(item)" />
             <img
               class="TopTableListSpanImg"
               src="@/assets/images/Sponge_screen/RQ/RQ_SP.png"
@@ -231,49 +177,49 @@
 </template>
 
 <script setup name="ZHRQ">
-import { ref, reactive, toRefs, onMounted, onBeforeUnmount, nextTick } from "vue";
+import { ref, reactive, toRefs, onMounted, onBeforeUnmount, nextTick } from 'vue';
 
-import * as echarts from "echarts";
-import bus from "@/bus";
-import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
-import sheBeiLost from "@/assets/sheBeiLost.json";
-import xiaXian from "@/assets/xiaXian.json";
-import yiBian from "@/assets/yiBian.json";
-import zaWuDuiFang from "@/assets/zaWuDuiFang.json";
-import rq_QiTa from "@/assets/rq_QiTa.json";
-import no_sheBeiLost from "@/assets/no_sheBeiLost.json";
-import no_xiaXian from "@/assets/no_xiaXian.json";
-import no_yiBian from "@/assets/no_yiBian.json";
-import no_zaWuDuiFang from "@/assets/no_zaWuDuiFang.json";
-import no_rq_QiTa from "@/assets/no_rq_QiTa.json";
-import yanAnRQoverindex from "@/assets/yanAnRQoverindex.json";
-import yanAnWarring from "@/assets/yanAnWarring.json";
+import * as echarts from 'echarts';
+import bus from '@/bus';
+import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
+import sheBeiLost from '@/assets/sheBeiLost.json';
+import xiaXian from '@/assets/xiaXian.json';
+import yiBian from '@/assets/yiBian.json';
+import zaWuDuiFang from '@/assets/zaWuDuiFang.json';
+import rq_QiTa from '@/assets/rq_QiTa.json';
+import no_sheBeiLost from '@/assets/no_sheBeiLost.json';
+import no_xiaXian from '@/assets/no_xiaXian.json';
+import no_yiBian from '@/assets/no_yiBian.json';
+import no_zaWuDuiFang from '@/assets/no_zaWuDuiFang.json';
+import no_rq_QiTa from '@/assets/no_rq_QiTa.json';
+import yanAnRQoverindex from '@/assets/yanAnRQoverindex.json';
+import yanAnWarring from '@/assets/yanAnWarring.json';
 
 const AllData = reactive({
   xunChaStatic: null,
   xunChaLayers: [
-    "alreadyDeal_DF",
-    "alreadyDeal_DS",
-    "alreadyDeal_XX",
-    "alreadyDeal_YB",
-    "alreadyDeal_QT",
-    "noDeal_DF",
-    "noDeal_DS",
-    "noDeall_XX",
-    "noDeal_YB",
-    "noDeal_QT",
+    'alreadyDeal_DF',
+    'alreadyDeal_DS',
+    'alreadyDeal_XX',
+    'alreadyDeal_YB',
+    'alreadyDeal_QT',
+    'noDeal_DF',
+    'noDeal_DS',
+    'noDeall_XX',
+    'noDeal_YB',
+    'noDeal_QT',
   ],
   ChangeData: [
     {
-      name: "枣园",
+      name: '枣园',
       id: 1,
     },
     {
-      name: "杨家湾",
+      name: '杨家湾',
       id: 2,
     },
     {
-      name: "丰富川",
+      name: '丰富川',
       id: 3,
     },
   ],
@@ -281,38 +227,38 @@
   // 风险监测
   FXJCData: [
     {
-      zb: "甲烷浓度",
-      sz: "3%",
+      zb: '甲烷浓度',
+      sz: '3%',
       szzt: true,
       zt: 0, //0预警 1 正常
-      value: "JWND",
+      value: 'JWND',
     },
     {
-      zb: "压力",
-      sz: "5MPa",
+      zb: '压力',
+      sz: '5MPa',
       szzt: false,
       zt: 1, //0预警 1 正常
-      value: "YL",
+      value: 'YL',
     },
     {
-      zb: "温度",
-      sz: "25C°",
+      zb: '温度',
+      sz: '25C°',
       szzt: true,
       zt: 1, //0预警 1 正常
-      value: "WD",
+      value: 'WD',
     },
   ],
   YJChangeData: [
     {
-      name: "综合",
+      name: '综合',
       id: 1,
     },
     {
-      name: "压力",
+      name: '压力',
       id: 2,
     },
     {
-      name: "温度",
+      name: '温度',
       id: 3,
     },
   ],
@@ -320,51 +266,51 @@
   //辅助决策
   JCData: [
     {
-      qy: "宝塔区凤凰山街道二道街",
-      tz: "压力监测异常波动",
+      qy: '宝塔区凤凰山街道二道街',
+      tz: '压力监测异常波动',
       sj: 5,
-      yp: "设施故障",
-      value: "001", //语音识别内容编码-前段自己设置的,后期项目有接口就直接替换数据唯一id
+      yp: '设施故障',
+      value: '001', //语音识别内容编码-前段自己设置的,后期项目有接口就直接替换数据唯一id
     },
     {
-      qy: "宝塔区凤凰山街道二道街",
-      tz: "燃气管道压力过大",
+      qy: '宝塔区凤凰山街道二道街',
+      tz: '燃气管道压力过大',
       sj: 5,
-      yp: "燃气爆管风险",
-      value: "002",
+      yp: '燃气爆管风险',
+      value: '002',
     },
     {
-      qy: "宝塔区凤凰山街道二道街",
-      tz: "高峰期流量持续降低",
+      qy: '宝塔区凤凰山街道二道街',
+      tz: '高峰期流量持续降低',
       sj: 4,
-      yp: "燃气泄漏风险",
-      value: "003",
+      yp: '燃气泄漏风险',
+      value: '003',
     },
   ],
   // 巡查反馈
   XCFKData: [
     {
-      name: "堆放杂物",
+      name: '堆放杂物',
       num1: 20,
       num2: 80,
     },
     {
-      name: "设备丢失",
+      name: '设备丢失',
       num1: 12,
       num2: 88,
     },
     {
-      name: "下陷",
+      name: '下陷',
       num1: 32,
       num2: 68,
     },
     {
-      name: "异变",
+      name: '异变',
       num1: 30,
       num2: 70,
     },
     {
-      name: "其他",
+      name: '其他',
       num1: 20,
       num2: 80,
     },
@@ -372,35 +318,35 @@
   // 顶部表格数据
   TopTableData: [
     {
-      sj: "2024-09-26 10:00:29",
-      mx: "燃气常规检查发现泄漏",
-      dd: "宝塔区凤凰山街道二道街",
+      sj: '2024-09-26 10:00:29',
+      mx: '燃气常规检查发现泄漏',
+      dd: '宝塔区凤凰山街道二道街',
       zt: 0, //0未处理 1已处理
-      dw: "延安市燃气总公司",
+      dw: '延安市燃气总公司',
       value: null,
     },
     {
-      sj: "2024-09-27 16:10:248",
-      mx: "燃气常规检查发现泄漏",
-      dd: "宝塔区凤凰山街道二道街",
+      sj: '2024-09-27 16:10:248',
+      mx: '燃气常规检查发现泄漏',
+      dd: '宝塔区凤凰山街道二道街',
       zt: 0, //0未处理 1已处理
-      dw: "延安市燃气总公司",
+      dw: '延安市燃气总公司',
       value: null,
     },
     {
-      sj: "2024-09-26 10:00:29",
-      mx: "燃气常规检查发现泄漏",
-      dd: "宝塔区凤凰山街道二道街",
+      sj: '2024-09-26 10:00:29',
+      mx: '燃气常规检查发现泄漏',
+      dd: '宝塔区凤凰山街道二道街',
       zt: 0, //0未处理 1已处理
-      dw: "延安市燃气总公司",
+      dw: '延安市燃气总公司',
       value: null,
     },
     {
-      sj: "2024-09-27 16:10:248",
-      mx: "燃气常规检查发现泄漏",
-      dd: "宝塔区凤凰山街道二道街",
+      sj: '2024-09-27 16:10:248',
+      mx: '燃气常规检查发现泄漏',
+      dd: '宝塔区凤凰山街道二道街',
       zt: 0, //0未处理 1已处理
-      dw: "延安市燃气总公司",
+      dw: '延安市燃气总公司',
       value: null,
     },
   ],
@@ -417,7 +363,7 @@
   },
 });
 // 初始化预警统计的Echarts
-const initEcharts = (id) => {
+const initEcharts = id => {
   AllData.YJChangeIndex = id;
   let Data1 = [];
   let Data2 = [];
@@ -437,41 +383,41 @@
   if (!!myChart.value) {
     myChart.value.dispose();
   }
-  myChart.value = echarts.init(document.getElementById("YJEchartsBox"));
-  myChart.value.off("click");
+  myChart.value = echarts.init(document.getElementById('YJEchartsBox'));
+  myChart.value.off('click');
   myChart.value.setOption({
-    color: ["#18A7F2", "#1AF7AA"],
+    color: ['#18A7F2', '#1AF7AA'],
     tooltip: {
-      trigger: "axis",
+      trigger: 'axis',
     },
     grid: {
-      top: "30%",
-      left: "3%",
-      right: "4%",
-      bottom: "3%",
+      top: '30%',
+      left: '3%',
+      right: '4%',
+      bottom: '3%',
       containLabel: true,
     },
     legend: {
-      data: ["预警次数", "持续时长"],
+      data: ['预警次数', '持续时长'],
       textStyle: {
-        color: "#fffd", // 图例文字颜色
+        color: '#fffd', // 图例文字颜色
       },
-      x: "40",
-      y: "10",
+      x: '40',
+      y: '10',
     },
     xAxis: [
       {
-        type: "category",
-        data: ["今日", "09/27", "09/26", "09/25", "09/24", "09/23", "09/22"],
+        type: 'category',
+        data: ['今日', '09/27', '09/26', '09/25', '09/24', '09/23', '09/22'],
         axisPointer: {
-          type: "shadow",
+          type: 'shadow',
         },
         textStyle: {
-          color: "#EBFEFF",
+          color: '#EBFEFF',
         },
         axisLine: {
           lineStyle: {
-            color: "#EBFEFF",
+            color: '#EBFEFF',
           },
         },
         // boundaryGap: false,
@@ -479,57 +425,57 @@
     ],
     yAxis: [
       {
-        type: "value",
-        name: "预警次数",
+        type: 'value',
+        name: '预警次数',
         min: 0,
         max: 12,
         interval: 2,
         axisLabel: {
-          formatter: "{value}",
+          formatter: '{value}',
         },
         axisLine: {
           lineStyle: {
-            color: "#AAC1CF",
+            color: '#AAC1CF',
           },
         },
         splitLine: {
           lineStyle: {
             // 使用深浅的间隔色
-            color: ["#184E5A"],
+            color: ['#184E5A'],
           },
         },
       },
       {
-        type: "value",
-        name: "持续时长",
+        type: 'value',
+        name: '持续时长',
         min: 0,
         max: 30,
         interval: 5,
         axisLabel: {
-          formatter: "{value}",
+          formatter: '{value}',
         },
         axisLine: {
           lineStyle: {
-            color: "#AAC1CF",
+            color: '#AAC1CF',
           },
         },
         splitLine: {
           lineStyle: {
             // 使用深浅的间隔色
-            color: ["#184E5A"],
+            color: ['#184E5A'],
           },
         },
       },
     ],
     series: [
       {
-        name: "预警次数",
-        type: "bar",
-        barWidth: "10px",
+        name: '预警次数',
+        type: 'bar',
+        barWidth: '10px',
         showBackground: true,
         tooltip: {
           valueFormatter: function (value) {
-            return value + " 次";
+            return value + ' 次';
           },
         },
         itemStyle: {
@@ -539,12 +485,12 @@
         data: Data1,
       },
       {
-        name: "持续时长",
-        type: "line",
+        name: '持续时长',
+        type: 'line',
         yAxisIndex: 1,
         tooltip: {
           valueFormatter: function (value) {
-            return value + "min";
+            return value + 'min';
           },
         },
         areaStyle: {
@@ -552,11 +498,11 @@
           color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
             {
               offset: 0,
-              color: "#1AF7AA",
+              color: '#1AF7AA',
             },
             {
               offset: 1,
-              color: "#1AF7AA00",
+              color: '#1AF7AA00',
             },
           ]),
         },
@@ -565,19 +511,19 @@
       },
     ],
   });
-  myChart.value.on("click", (param) => {
+  myChart.value.on('click', param => {
     console.log(param);
     let data = {
-      title: "风险监测",
-      comIDs: ["RQ_FengXianJianCe"],
+      title: '风险监测',
+      comIDs: ['RQ_FengXianJianCe'],
     };
-    bus.emit("publicDialog", data);
+    bus.emit('publicDialog', data);
     let a = {
-      value: "全部",
-      endTime: "2024-10-05",
+      value: '全部',
+      endTime: '2024-10-05',
     };
     setTimeout(() => {
-      bus.emit("getDataListFxjc", a);
+      bus.emit('getDataListFxjc', a);
     }, 500);
   });
 
@@ -591,7 +537,7 @@
     i++;
     if (i == length) i = 0;
     myChart.value.dispatchAction({
-      type: "showTip",
+      type: 'showTip',
       seriesIndex: 0,
       dataIndex: i,
     });
@@ -608,14 +554,14 @@
   return `width:${widthNum}%`;
 };
 // 工单派发
-const GongDanPaiFa = (item) => {
+const GongDanPaiFa = item => {
   console.log(item);
   let data = {
     title: item.qy,
-    comIDs: ["gdpf"],
+    comIDs: ['gdpf'],
     getSiteId: item.value,
   };
-  bus.emit("publicDialog", data);
+  bus.emit('publicDialog', data);
 };
 // // 风险
 // const FengXianClick = (item) => {
@@ -627,56 +573,52 @@
 //   bus.emit("publicDialog", data);
 // };
 // 风险监测派发
-const PaiFa = (item) => {
+const PaiFa = item => {
   console.log(item);
   let data = {
-    title: "智慧外呼",
-    comIDs: ["RQ_ZhiHuiWaiHu"],
+    title: '智慧外呼',
+    comIDs: ['RQ_ZhiHuiWaiHu'],
     getSiteId: item.value,
   };
-  bus.emit("publicDialog", data);
+  bus.emit('publicDialog', data);
 };
 //巡查反馈处理、未处理
-const dealOrNoDeal = (item) => {
+const dealOrNoDeal = item => {
   AllData.xunChaStatic = item;
   newfiberMapbox.map.easeTo({
     center: [109.488, 36.596],
     zoom: 12,
     pitch: 55,
   });
-  bus.emit("removeMapDatas", ["warning_monitor"]);
+  bus.emit('removeMapDatas', ['warning_monitor']);
   if (item == 1) {
-    let removedLayer = AllData.xunChaLayers.filter((layer) => layer.includes("noDeal"));
-    let selectedLayer = AllData.xunChaLayers.filter((layer) =>
-      layer.includes("alreadyDeal")
-    );
-    bus.emit("removeMapDatas", AllData.xunChaLayers);
-    bus.emit("setGeoJSON", { json: zaWuDuiFang, key: "alreadyDeal_DF" });
-    bus.emit("setGeoJSON", { json: sheBeiLost, key: "alreadyDeal_DS" });
-    bus.emit("setGeoJSON", { json: xiaXian, key: "alreadyDeal_XX" });
-    bus.emit("setGeoJSON", { json: yiBian, key: "alreadyDeal_YB" });
-    bus.emit("setGeoJSON", { json: rq_QiTa, key: "alreadyDeal_QT" });
-    selectedLayer.forEach((layer) => {
-      bus.emit("setLayerVisible", { layername: layer, isCheck: true });
+    let removedLayer = AllData.xunChaLayers.filter(layer => layer.includes('noDeal'));
+    let selectedLayer = AllData.xunChaLayers.filter(layer => layer.includes('alreadyDeal'));
+    bus.emit('removeMapDatas', AllData.xunChaLayers);
+    bus.emit('setGeoJSON', { json: zaWuDuiFang, key: 'alreadyDeal_DF' });
+    bus.emit('setGeoJSON', { json: sheBeiLost, key: 'alreadyDeal_DS' });
+    bus.emit('setGeoJSON', { json: xiaXian, key: 'alreadyDeal_XX' });
+    bus.emit('setGeoJSON', { json: yiBian, key: 'alreadyDeal_YB' });
+    bus.emit('setGeoJSON', { json: rq_QiTa, key: 'alreadyDeal_QT' });
+    selectedLayer.forEach(layer => {
+      bus.emit('setLayerVisible', { layername: layer, isCheck: true });
     });
   } else {
-    let removedLayer = AllData.xunChaLayers.filter((layer) =>
-      layer.includes("alreadyDeal")
-    );
-    let selectedLayer = AllData.xunChaLayers.filter((layer) => layer.includes("noDeal"));
-    bus.emit("removeMapDatas", AllData.xunChaLayers);
-    bus.emit("setGeoJSON", { json: no_zaWuDuiFang, key: "onDeal_DF" });
-    bus.emit("setGeoJSON", { json: no_sheBeiLost, key: "onDeal_DS" });
-    bus.emit("setGeoJSON", { json: no_xiaXian, key: "onDeal_XX" });
-    bus.emit("setGeoJSON", { json: no_yiBian, key: "onDeal_YB" });
-    bus.emit("setGeoJSON", { json: no_rq_QiTa, key: "onDeal_QT" });
-    selectedLayer.forEach((layer) => {
-      bus.emit("setLayerVisible", { layername: layer, isCheck: true });
+    let removedLayer = AllData.xunChaLayers.filter(layer => layer.includes('alreadyDeal'));
+    let selectedLayer = AllData.xunChaLayers.filter(layer => layer.includes('noDeal'));
+    bus.emit('removeMapDatas', AllData.xunChaLayers);
+    bus.emit('setGeoJSON', { json: no_zaWuDuiFang, key: 'onDeal_DF' });
+    bus.emit('setGeoJSON', { json: no_sheBeiLost, key: 'onDeal_DS' });
+    bus.emit('setGeoJSON', { json: no_xiaXian, key: 'onDeal_XX' });
+    bus.emit('setGeoJSON', { json: no_yiBian, key: 'onDeal_YB' });
+    bus.emit('setGeoJSON', { json: no_rq_QiTa, key: 'onDeal_QT' });
+    selectedLayer.forEach(layer => {
+      bus.emit('setLayerVisible', { layername: layer, isCheck: true });
     });
   }
 };
 // 巡查反馈
-const XunChaFanKui = (item) => {
+const XunChaFanKui = item => {
   let removedLayer = [];
   let selectedLayer = [];
   newfiberMapbox.map.easeTo({
@@ -685,80 +627,60 @@
     pitch: 55,
   });
   switch (item.name) {
-    case "堆放杂物":
-      removedLayer = AllData.xunChaLayers.filter(
-        (layer) => layer != "alreadyDeal_DF" && layer != "noDeal_DF"
-      );
-      selectedLayer = AllData.xunChaLayers.filter(
-        (layer) => layer == "alreadyDeal_DF" || layer == "noDeal_DF"
-      );
-      selectedLayer.forEach((layer) => {
-        bus.emit("setLayerVisible", { layername: layer, isCheck: true });
+    case '堆放杂物':
+      removedLayer = AllData.xunChaLayers.filter(layer => layer != 'alreadyDeal_DF' && layer != 'noDeal_DF');
+      selectedLayer = AllData.xunChaLayers.filter(layer => layer == 'alreadyDeal_DF' || layer == 'noDeal_DF');
+      selectedLayer.forEach(layer => {
+        bus.emit('setLayerVisible', { layername: layer, isCheck: true });
       });
-      removedLayer.forEach((layer) => {
-        bus.emit("setLayerVisible", { layername: layer, isCheck: false });
+      removedLayer.forEach(layer => {
+        bus.emit('setLayerVisible', { layername: layer, isCheck: false });
       });
       break;
-    case "设备丢失":
-      removedLayer = AllData.xunChaLayers.filter(
-        (layer) => layer != "alreadyDeal_DS" && layer != "noDeal_DS"
-      );
-      selectedLayer = AllData.xunChaLayers.filter(
-        (layer) => layer == "alreadyDeal_DS" || layer == "noDeal_DS"
-      );
-      selectedLayer.forEach((layer) => {
-        bus.emit("setLayerVisible", { layername: layer, isCheck: true });
+    case '设备丢失':
+      removedLayer = AllData.xunChaLayers.filter(layer => layer != 'alreadyDeal_DS' && layer != 'noDeal_DS');
+      selectedLayer = AllData.xunChaLayers.filter(layer => layer == 'alreadyDeal_DS' || layer == 'noDeal_DS');
+      selectedLayer.forEach(layer => {
+        bus.emit('setLayerVisible', { layername: layer, isCheck: true });
       });
-      removedLayer.forEach((layer) => {
-        bus.emit("setLayerVisible", { layername: layer, isCheck: false });
+      removedLayer.forEach(layer => {
+        bus.emit('setLayerVisible', { layername: layer, isCheck: false });
       });
       break;
-    case "下陷":
-      removedLayer = AllData.xunChaLayers.filter(
-        (layer) => layer != "alreadyDeal_XX" && layer != "noDeal_XX"
-      );
-      selectedLayer = AllData.xunChaLayers.filter(
-        (layer) => layer == "alreadyDeal_XX" || layer == "noDeal_XX"
-      );
-      selectedLayer.forEach((layer) => {
-        bus.emit("setLayerVisible", { layername: layer, isCheck: true });
+    case '下陷':
+      removedLayer = AllData.xunChaLayers.filter(layer => layer != 'alreadyDeal_XX' && layer != 'noDeal_XX');
+      selectedLayer = AllData.xunChaLayers.filter(layer => layer == 'alreadyDeal_XX' || layer == 'noDeal_XX');
+      selectedLayer.forEach(layer => {
+        bus.emit('setLayerVisible', { layername: layer, isCheck: true });
       });
-      removedLayer.forEach((layer) => {
-        bus.emit("setLayerVisible", { layername: layer, isCheck: false });
+      removedLayer.forEach(layer => {
+        bus.emit('setLayerVisible', { layername: layer, isCheck: false });
       });
       break;
-    case "异变":
-      removedLayer = AllData.xunChaLayers.filter(
-        (layer) => layer != "alreadyDeal_YB" && layer != "noDeal_YB"
-      );
-      selectedLayer = AllData.xunChaLayers.filter(
-        (layer) => layer == "alreadyDeal_YB" || layer == "noDeal_YB"
-      );
-      selectedLayer.forEach((layer) => {
-        bus.emit("setLayerVisible", { layername: layer, isCheck: true });
+    case '异变':
+      removedLayer = AllData.xunChaLayers.filter(layer => layer != 'alreadyDeal_YB' && layer != 'noDeal_YB');
+      selectedLayer = AllData.xunChaLayers.filter(layer => layer == 'alreadyDeal_YB' || layer == 'noDeal_YB');
+      selectedLayer.forEach(layer => {
+        bus.emit('setLayerVisible', { layername: layer, isCheck: true });
       });
-      removedLayer.forEach((layer) => {
-        bus.emit("setLayerVisible", { layername: layer, isCheck: false });
+      removedLayer.forEach(layer => {
+        bus.emit('setLayerVisible', { layername: layer, isCheck: false });
       });
       break;
-    case "其他":
-      removedLayer = AllData.xunChaLayers.filter(
-        (layer) => layer != "alreadyDeal_QT" && layer != "noDeal_QT"
-      );
-      selectedLayer = AllData.xunChaLayers.filter(
-        (layer) => layer == "alreadyDeal_QT" || layer == "noDeal_QT"
-      );
-      selectedLayer.forEach((layer) => {
-        bus.emit("setLayerVisible", { layername: layer, isCheck: true });
+    case '其他':
+      removedLayer = AllData.xunChaLayers.filter(layer => layer != 'alreadyDeal_QT' && layer != 'noDeal_QT');
+      selectedLayer = AllData.xunChaLayers.filter(layer => layer == 'alreadyDeal_QT' || layer == 'noDeal_QT');
+      selectedLayer.forEach(layer => {
+        bus.emit('setLayerVisible', { layername: layer, isCheck: true });
       });
-      removedLayer.forEach((layer) => {
-        bus.emit("setLayerVisible", { layername: layer, isCheck: false });
+      removedLayer.forEach(layer => {
+        bus.emit('setLayerVisible', { layername: layer, isCheck: false });
       });
       break;
   }
 };
 // 风险评估
-const TuChengClick = (item) => {
+const TuChengClick = item => {
   newfiberMapbox.map.easeTo({
     center: [109.488, 36.596],
     zoom: 12,
@@ -766,61 +688,61 @@
   });
   switch (item) {
     case 0:
-      bus.emit("setLayerVisible", { layername: "rq_SZLH", isCheck: false });
-      bus.emit("setLayerVisible", { layername: "rq_TYLH", isCheck: false });
-      bus.emit("setLayerVisible", { layername: "rq_LGLH", isCheck: false });
-      bus.emit("setLayerVisible", { layername: "rq_other", isCheck: false });
-      bus.emit("setLayerVisible", { layername: "rq_all", isCheck: true }); //所有管网rq_all、市政rq_SZLH、庭院rq_TYLH、立管rq_LGLH、其他rq_other
+      bus.emit('setLayerVisible', { layername: 'rq_SZLH', isCheck: false });
+      bus.emit('setLayerVisible', { layername: 'rq_TYLH', isCheck: false });
+      bus.emit('setLayerVisible', { layername: 'rq_LGLH', isCheck: false });
+      bus.emit('setLayerVisible', { layername: 'rq_other', isCheck: false });
+      bus.emit('setLayerVisible', { layername: 'rq_all', isCheck: true }); //所有管网rq_all、市政rq_SZLH、庭院rq_TYLH、立管rq_LGLH、其他rq_other
       break;
     case 1:
-      bus.emit("setLayerVisible", { layername: "rq_all", isCheck: false }); //所有管网rq_all、市政rq_SZLH、庭院rq_TYLH、立管rq_LGLH、其他rq_other
-      bus.emit("setLayerVisible", { layername: "rq_SZLH", isCheck: true });
-      bus.emit("setLayerVisible", { layername: "rq_TYLH", isCheck: false });
-      bus.emit("setLayerVisible", { layername: "rq_LGLH", isCheck: false });
-      bus.emit("setLayerVisible", { layername: "rq_other", isCheck: false });
+      bus.emit('setLayerVisible', { layername: 'rq_all', isCheck: false }); //所有管网rq_all、市政rq_SZLH、庭院rq_TYLH、立管rq_LGLH、其他rq_other
+      bus.emit('setLayerVisible', { layername: 'rq_SZLH', isCheck: true });
+      bus.emit('setLayerVisible', { layername: 'rq_TYLH', isCheck: false });
+      bus.emit('setLayerVisible', { layername: 'rq_LGLH', isCheck: false });
+      bus.emit('setLayerVisible', { layername: 'rq_other', isCheck: false });
       break;
     case 2:
-      bus.emit("setLayerVisible", { layername: "rq_all", isCheck: false }); //所有管网rq_all、市政rq_SZLH、庭院rq_TYLH、立管rq_LGLH、其他rq_other
-      bus.emit("setLayerVisible", { layername: "rq_SZLH", isCheck: false });
-      bus.emit("setLayerVisible", { layername: "rq_TYLH", isCheck: true });
-      bus.emit("setLayerVisible", { layername: "rq_LGLH", isCheck: false });
-      bus.emit("setLayerVisible", { layername: "rq_other", isCheck: false });
+      bus.emit('setLayerVisible', { layername: 'rq_all', isCheck: false }); //所有管网rq_all、市政rq_SZLH、庭院rq_TYLH、立管rq_LGLH、其他rq_other
+      bus.emit('setLayerVisible', { layername: 'rq_SZLH', isCheck: false });
+      bus.emit('setLayerVisible', { layername: 'rq_TYLH', isCheck: true });
+      bus.emit('setLayerVisible', { layername: 'rq_LGLH', isCheck: false });
+      bus.emit('setLayerVisible', { layername: 'rq_other', isCheck: false });
 
       break;
     case 3:
-      bus.emit("setLayerVisible", { layername: "rq_all", isCheck: false }); //所有管网rq_all、市政rq_SZLH、庭院rq_TYLH、立管rq_LGLH、其他rq_other
-      bus.emit("setLayerVisible", { layername: "rq_SZLH", isCheck: false });
-      bus.emit("setLayerVisible", { layername: "rq_TYLH", isCheck: false });
-      bus.emit("setLayerVisible", { layername: "rq_LGLH", isCheck: true });
-      bus.emit("setLayerVisible", { layername: "rq_other", isCheck: false });
+      bus.emit('setLayerVisible', { layername: 'rq_all', isCheck: false }); //所有管网rq_all、市政rq_SZLH、庭院rq_TYLH、立管rq_LGLH、其他rq_other
+      bus.emit('setLayerVisible', { layername: 'rq_SZLH', isCheck: false });
+      bus.emit('setLayerVisible', { layername: 'rq_TYLH', isCheck: false });
+      bus.emit('setLayerVisible', { layername: 'rq_LGLH', isCheck: true });
+      bus.emit('setLayerVisible', { layername: 'rq_other', isCheck: false });
       break;
     case 4:
-      bus.emit("setLayerVisible", { layername: "rq_all", isCheck: false }); //所有管网rq_all、市政rq_SZLH、庭院rq_TYLH、立管rq_LGLH、其他rq_other
-      bus.emit("setLayerVisible", { layername: "rq_SZLH", isCheck: false });
-      bus.emit("setLayerVisible", { layername: "rq_TYLH", isCheck: false });
-      bus.emit("setLayerVisible", { layername: "rq_LGLH", isCheck: false });
-      bus.emit("setLayerVisible", { layername: "rq_other", isCheck: true });
+      bus.emit('setLayerVisible', { layername: 'rq_all', isCheck: false }); //所有管网rq_all、市政rq_SZLH、庭院rq_TYLH、立管rq_LGLH、其他rq_other
+      bus.emit('setLayerVisible', { layername: 'rq_SZLH', isCheck: false });
+      bus.emit('setLayerVisible', { layername: 'rq_TYLH', isCheck: false });
+      bus.emit('setLayerVisible', { layername: 'rq_LGLH', isCheck: false });
+      bus.emit('setLayerVisible', { layername: 'rq_other', isCheck: true });
       break;
   }
 };
 
 // 风险
-const FengXianClick = (item) => {
+const FengXianClick = item => {
   let data = {
-    title: item.zb + " 风险监测",
-    comIDs: ["RQ_FengXianJianCe"],
+    title: item.zb + ' 风险监测',
+    comIDs: ['RQ_FengXianJianCe'],
   };
-  bus.emit("publicDialog", data);
+  bus.emit('publicDialog', data);
   // 传给组件数据
 
   setTimeout(() => {
-    bus.emit("getDataListFxjc", item);
+    bus.emit('getDataListFxjc', item);
   }, 500);
 };
 
 // 现场连线
-const XianChangLianXian = (item) => {
-  bus.emit("OpenRY");
+const XianChangLianXian = item => {
+  bus.emit('OpenRY');
 };
 
 watch(
@@ -832,14 +754,13 @@
 );
 //燃气超标
 const showIndexOver = () => {
-  bus.emit("removeMapDatas", AllData.xunChaLayers);
-  let key = "warning_monitor";
-  bus.emit("getGeojsonByType", {
+  bus.emit('removeMapDatas', AllData.xunChaLayers);
+  let key = 'warning_monitor';
+  bus.emit('getGeojsonByType', {
     type: key,
-    callback: (geojson) => {
-      if (!!!geojson.features.length)
-        bus.emit("setGeoJSON", { json: yanAnRQoverindex, key: "warning_monitor" });
-      bus.emit("setLayerVisible", { type: "point", layername: key, isCheck: true });
+    callback: geojson => {
+      if (!!!geojson.features.length) bus.emit('setGeoJSON', { json: yanAnRQoverindex, key: 'warning_monitor' });
+      bus.emit('setLayerVisible', { type: 'point', layername: key, isCheck: true });
     },
   });
   newfiberMapbox.map.easeTo({
@@ -849,14 +770,13 @@
 };
 //燃气告警
 const showIndexWarning = () => {
-  bus.emit("removeMapDatas", AllData.xunChaLayers);
-  let key = "warning_monitor";
-  bus.emit("getGeojsonByType", {
+  bus.emit('removeMapDatas', AllData.xunChaLayers);
+  let key = 'warning_monitor';
+  bus.emit('getGeojsonByType', {
     type: key,
-    callback: (geojson) => {
-      if (!!!geojson.features.length)
-        bus.emit("setGeoJSON", { json: yanAnWarring, key: "warning_monitor" });
-      bus.emit("setLayerVisible", { type: "point", layername: key, isCheck: true });
+    callback: geojson => {
+      if (!!!geojson.features.length) bus.emit('setGeoJSON', { json: yanAnWarring, key: 'warning_monitor' });
+      bus.emit('setLayerVisible', { type: 'point', layername: key, isCheck: true });
     },
   });
   newfiberMapbox.map.easeTo({
@@ -867,47 +787,46 @@
 onMounted(() => {
   let initeRQTimer = setInterval(() => {
     if (!newfiberMapbox) return;
-    if (!newfiberMapbox.map.getLayer("rq_pipeline_info")) return;
-    if (!newfiberMapbox.map.getLayer("sx_ya_smx_rq_point")) return;
+    if (!newfiberMapbox.map.getLayer('rq_pipeline_info')) return;
+    if (!newfiberMapbox.map.getLayer('sx_ya_smx_rq_point')) return;
     newfiberMapbox.map.easeTo({
       center: [109.488, 36.596],
       zoom: 13,
     });
     //告警点事件
-    let warningPoint = newfiberMapbox
-      .getLayers()
-      .filter((feature) => feature.newfiberId == "warning_monitor")[0];
+    let warningPoint = newfiberMapbox.getLayers().filter(feature => feature.newfiberId == 'warning_monitor')[0];
     if (warningPoint) {
-      warningPoint.on("click", (e) => {
+      warningPoint.on('click', e => {
         let popupData = e.feature.properties;
 
-        console.log("popupData---", "告警---------", popupData);
+        console.log('popupData---', '告警---------', popupData);
       });
     }
-    bus.emit("setLayerVisible", { layername: "rq_all", isCheck: true }); //所有管网rq_all、市政rq_SZLH、庭院rq_TYLH、立管rq_LGLH、其他rq_other
+    bus.emit('setLayerVisible', { layername: 'rq_all', isCheck: true }); //所有管网rq_all、市政rq_SZLH、庭院rq_TYLH、立管rq_LGLH、其他rq_other
 
     clearInterval(initeRQTimer);
   }, 100);
   initEcharts(1);
 });
 onBeforeUnmount(() => {
-  bus.emit("setLayerVisible", { layername: "rq_all", isCheck: false });
-  bus.emit("setLayerVisible", { layername: "rq_SZLH", isCheck: false });
-  bus.emit("setLayerVisible", { layername: "rq_TYLH", isCheck: false });
-  bus.emit("setLayerVisible", { layername: "rq_LGLH", isCheck: false });
-  bus.emit("setLayerVisible", { layername: "rq_other", isCheck: false });
-  bus.emit("removeMapDatas", AllData.xunChaLayers);
-  bus.emit("removeMapDatas", ["warning_monitor"]);
-  bus.emit("setLayerVisible", { layername: "warning_monitor", isCheck: false });
-  bus.emit("closeCesiumPopup");
-  if (!!newfiberMapbox.getLayerByName("rqLine")) {
-    newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName("rqLine"));
+  bus.emit('setLayerVisible', { layername: 'rq_all', isCheck: false });
+  bus.emit('setLayerVisible', { layername: 'rq_SZLH', isCheck: false });
+  bus.emit('setLayerVisible', { layername: 'rq_TYLH', isCheck: false });
+  bus.emit('setLayerVisible', { layername: 'rq_LGLH', isCheck: false });
+  bus.emit('setLayerVisible', { layername: 'rq_other', isCheck: false });
+  bus.emit('removeMapDatas', AllData.xunChaLayers);
+  bus.emit('removeMapDatas', ['warning_monitor']);
+  bus.emit('setLayerVisible', { layername: 'warning_monitor', isCheck: false });
+  bus.emit('closeCesiumPopup');
+  bus.emit('SetLayerShow', ['蓝色地图']);
+  if (!!newfiberMapbox.getLayerByName('rqLine')) {
+    newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName('rqLine'));
   }
 });
 </script>
 
 <style lang="scss" scoped>
-@import "@/assets/styles/transition_oneMap.scss";
+@import '@/assets/styles/transition_oneMap.scss';
 #ZHRQ {
   .LeftBox {
     width: 450px;
@@ -915,11 +834,7 @@
     position: absolute;
     left: 10px;
     top: 70px;
-    background: linear-gradient(
-      0deg,
-      rgba(0, 43, 67, 0.8) 0%,
-      rgba(0, 69, 108, 0.8) 100%
-    );
+    background: linear-gradient(0deg, rgba(0, 43, 67, 0.8) 0%, rgba(0, 69, 108, 0.8) 100%);
     border-radius: 6px;
     border: 1px solid #47eef3;
     box-sizing: border-box;
@@ -994,7 +909,7 @@
         width: 100%;
         height: calc(100% - 72px);
         margin-top: 10px;
-        background: url("@/assets/images/Sponge_screen/RQ/Ech.png") no-repeat center;
+        background: url('@/assets/images/Sponge_screen/RQ/Ech.png') no-repeat center;
         position: relative;
 
         .ClickDiv1 {
@@ -1052,7 +967,7 @@
           height: 42px;
           width: calc(50% - 9px);
           display: flex;
-          background: url("@/assets/images/Sponge_screen/RQ/RQ_FX.png") no-repeat center;
+          background: url('@/assets/images/Sponge_screen/RQ/RQ_FX.png') no-repeat center;
           background-size: 100% 100%;
           cursor: pointer;
 
@@ -1284,11 +1199,7 @@
     position: absolute;
     right: 10px;
     top: 70px;
-    background: linear-gradient(
-      0deg,
-      rgba(0, 43, 67, 0.8) 0%,
-      rgba(0, 69, 108, 0.8) 100%
-    );
+    background: linear-gradient(0deg, rgba(0, 43, 67, 0.8) 0%, rgba(0, 69, 108, 0.8) 100%);
     border-radius: 6px;
     border: 1px solid #47eef3;
     box-sizing: border-box;
@@ -1446,11 +1357,7 @@
     position: absolute;
     left: 520px;
     top: 110px;
-    background: linear-gradient(
-      0deg,
-      rgba(0, 43, 67, 0.8) 0%,
-      rgba(0, 69, 108, 0.8) 100%
-    );
+    background: linear-gradient(0deg, rgba(0, 43, 67, 0.8) 0%, rgba(0, 69, 108, 0.8) 100%);
     border-radius: 6px;
     border: 1px solid #47eef3;
     box-sizing: border-box;
@@ -1544,8 +1451,7 @@
     .Box_header {
       width: 100%;
       height: 43px;
-      background: url("@/assets/images/Sponge_screen/Box_HeaderBackground.png") no-repeat
-        center;
+      background: url('@/assets/images/Sponge_screen/Box_HeaderBackground.png') no-repeat center;
       background-size: cover;
       font-family: PangMenZhengDao;
       font-weight: 400;
diff --git a/src/views/oneMap/components/ZTGL.vue b/src/views/oneMap/components/ZTGL.vue
index 796f6da..f524835 100644
--- a/src/views/oneMap/components/ZTGL.vue
+++ b/src/views/oneMap/components/ZTGL.vue
@@ -18,7 +18,7 @@
 import testProjectionLabel from '@/assets/testProjectionLabel.json';
 import mapBoxVectorLayer from '@/utils/GISdocument/mapboxVectorLayer.js';
 import xtb_img from '@/assets/newImgs/xtb_img.png';
-
+import bus from '@/bus';
 const showPanel = ref(true); //面板展开收起
 // 面板内容展开收起控制
 const props = defineProps({
@@ -67,8 +67,11 @@
   }, 100);
 });
 onBeforeUnmount(() => {
-  newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName('testProjection'));
-  mapBoxVectorLayer.removeByIds(['testProjection']);
+  bus.emit('SetLayerShow', ['蓝色地图']);
+  if (newfiberMapbox.getLayerByName('testProjection')) {
+    newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName('testProjection'));
+    mapBoxVectorLayer.removeByIds(['testProjection']);
+  }
 });
 </script>
 
diff --git a/src/views/oneMap/components/chartLogging.vue b/src/views/oneMap/components/chartLogging.vue
index c9fdcc4..2ea8b4d 100644
--- a/src/views/oneMap/components/chartLogging.vue
+++ b/src/views/oneMap/components/chartLogging.vue
@@ -45,6 +45,7 @@
             color: '#fff',
           },
         },
+
         xAxis: [
           {
             type: 'category',
@@ -81,6 +82,7 @@
               },
             },
           },
+
           {
             name: props.data.yAxisName2 || '',
             inverse: false,
@@ -101,6 +103,16 @@
             },
           },
         ],
+        // 时间轴滑动选择器
+        dataZoom: [
+          {
+            show: true,
+            realtime: true,
+            start: 30,
+            end: 70,
+            xAxisIndex: [0, 1],
+          },
+        ],
         series: [
           {
             name: '降雨量(mm)',
diff --git a/src/views/oneMap/components/pipeFX.vue b/src/views/oneMap/components/pipeFX.vue
index df0894c..ea1db5e 100644
--- a/src/views/oneMap/components/pipeFX.vue
+++ b/src/views/oneMap/components/pipeFX.vue
@@ -121,6 +121,16 @@
             },
           },
         ],
+        // 时间轴滑动选择器
+        dataZoom: [
+          {
+            show: true,
+            realtime: true,
+            start: 30,
+            end: 70,
+            xAxisIndex: [0, 1],
+          },
+        ],
         series: [
           {
             name: '降雨量(mm)',
diff --git a/src/views/oneMap/components/projectDX.vue b/src/views/oneMap/components/projectDX.vue
index cecd854..ec593c1 100644
--- a/src/views/oneMap/components/projectDX.vue
+++ b/src/views/oneMap/components/projectDX.vue
@@ -93,6 +93,16 @@
             },
           },
         ],
+        // 时间轴滑动选择器
+        dataZoom: [
+          {
+            show: true,
+            realtime: true,
+            start: 30,
+            end: 70,
+            xAxisIndex: [0, 1],
+          },
+        ],
         series: [
           {
             // smooth: true, //变为曲线 默认false折线
diff --git a/src/views/oneMap/floodPrevention/FholRightBox.vue b/src/views/oneMap/floodPrevention/FholRightBox.vue
index 289c2b3..c2b55f6 100644
--- a/src/views/oneMap/floodPrevention/FholRightBox.vue
+++ b/src/views/oneMap/floodPrevention/FholRightBox.vue
@@ -108,10 +108,10 @@
   <!-- 入河排口运行监控 -->
   <div class="DischargeMonitor">
     <div class="ListBoxHeader">
-      <div class="ListBoxHeader_font">入河排口运行监控</div>
+      <div class="ListBoxHeader_font">调度统计</div>
     </div>
     <div class="JkMonitor">
-      <div class="tableHeader">
+      <!-- <div class="tableHeader">
         <span class="tableHeaderList tableList1">排口监测点</span>
         <span class="tableHeaderList tableList2">当前出流状态</span>
         <span class="tableHeaderList tableList3">流量(m³/h)</span>
@@ -125,7 +125,8 @@
             <img :src="monitor_icon" alt="" />
           </span>
         </div>
-      </Vue3SeamlessScroll>
+      </Vue3SeamlessScroll> -->
+      <dispatchEch />
     </div>
   </div>
 
@@ -146,6 +147,7 @@
 import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
 import { ref, reactive, toRefs, onMounted, onBeforeUnmount } from 'vue';
 import bus from '@/bus';
+import dispatchEch from './dispatchEch.vue';
 import monitor_icon from '@/assets/images/fhpl/monitor_icon.png';
 import bengzhantingzhi from '@/assets/images/fhpl/bengzhantingzhi.png';
 import bengzhanyunxing from '@/assets/images/fhpl/bengzhanyunxing.png';
@@ -507,110 +509,112 @@
   width: 450px;
   height: 31%;
   margin-top: 3px;
+  // background: red;
   .JkMonitor {
     margin: 5px auto;
     width: 430px;
     height: calc(100% - 50px);
-    .tableHeader {
-      width: 100%;
-      height: 34px;
-      background: linear-gradient(0deg, #00fbffa3 0%, #00fbff00 100%);
-      border-radius: 2px;
-      border: 1px solid #74dde1;
-      display: flex;
+    // .tableHeader {
+    //   width: 100%;
+    //   height: 34px;
+    //   background: linear-gradient(0deg, #00fbffa3 0%, #00fbff00 100%);
+    //   border-radius: 2px;
+    //   border: 1px solid #74dde1;
+    //   display: flex;
 
-      .tableHeaderList {
-        font-family: Source Han Sans CN;
-        font-weight: 400;
-        font-size: 14px;
-        color: #ffffff;
-        height: 34px;
-        line-height: 34px;
-        // padding-left: 5px;
-        // text-align: center;
-      }
-      .tableList1 {
-        width: 35%;
-        padding-left: 15px;
-      }
-      .tableList2 {
-        width: 30%;
-        text-align: center;
-      }
-      .tableList3 {
-        width: 20%;
-        text-align: center;
-      }
-    }
-    .tableBody {
-      width: 100%;
-      height: calc(100% - 35px);
-      overflow: hidden;
+    //   .tableHeaderList {
+    //     font-family: Source Han Sans CN;
+    //     font-weight: 400;
+    //     font-size: 14px;
+    //     color: #ffffff;
+    //     height: 34px;
+    //     line-height: 34px;
+    //     // padding-left: 5px;
+    //     // text-align: center;
+    //   }
+    //   .tableList1 {
+    //     width: 35%;
+    //     padding-left: 15px;
+    //   }
+    //   .tableList2 {
+    //     width: 30%;
+    //     text-align: center;
+    //   }
+    //   .tableList3 {
+    //     width: 20%;
+    //     text-align: center;
+    //   }
+    // }
+    // .tableBody {
+    //   width: 100%;
+    //   height: calc(100% - 35px);
+    //   overflow: hidden;
 
-      .tableBodyList {
-        height: 34px;
-        line-height: 34px;
-        width: 100%;
-        display: flex;
-        /* 选择偶数行 */
-        &:nth-child(even) {
-          background: linear-gradient(0deg, #008599 0%, #08596d 100%);
-        }
+    //   .tableBodyList {
+    //     height: 34px;
+    //     line-height: 34px;
+    //     width: 100%;
+    //     display: flex;
+    //     /* 选择偶数行 */
+    //     &:nth-child(even) {
+    //       background: linear-gradient(0deg, #008599 0%, #08596d 100%);
+    //     }
 
-        .tableBodyList_span1 {
-          font-family: Source Han Sans CN;
-          font-weight: 400;
-          font-size: 14px;
-          color: #ffffff;
-          height: 34px;
-          line-height: 34px;
-          // text-align: center;
-          width: 35%;
-          padding-left: 15px;
-          // background: red;
-          // padding-left: 5px;
-        }
-        .tableBodyList_span2 {
-          font-family: Source Han Sans CN;
-          font-weight: 400;
-          font-size: 14px;
-          color: #ffffff;
-          height: 34px;
-          line-height: 34px;
-          text-align: center;
-          width: 30%;
-        }
-        .tableBodyList_span3 {
-          font-family: Source Han Sans CN;
-          font-weight: 400;
-          font-size: 14px;
-          color: #ffffff;
-          height: 34px;
-          line-height: 34px;
-          text-align: center;
-          width: 20%;
-        }
+    //     .tableBodyList_span1 {
+    //       font-family: Source Han Sans CN;
+    //       font-weight: 400;
+    //       font-size: 14px;
+    //       color: #ffffff;
+    //       height: 34px;
+    //       line-height: 34px;
+    //       // text-align: center;
+    //       width: 35%;
+    //       padding-left: 15px;
+    //       // background: red;
+    //       // padding-left: 5px;
+    //     }
+    //     .tableBodyList_span2 {
+    //       font-family: Source Han Sans CN;
+    //       font-weight: 400;
+    //       font-size: 14px;
+    //       color: #ffffff;
+    //       height: 34px;
+    //       line-height: 34px;
+    //       text-align: center;
+    //       width: 30%;
+    //     }
+    //     .tableBodyList_span3 {
+    //       font-family: Source Han Sans CN;
+    //       font-weight: 400;
+    //       font-size: 14px;
+    //       color: #ffffff;
+    //       height: 34px;
+    //       line-height: 34px;
+    //       text-align: center;
+    //       width: 20%;
+    //     }
 
-        .tableBodyList_span4 {
-          font-family: Source Han Sans CN;
-          font-weight: 400;
-          font-size: 14px;
-          color: #ffffff;
-          height: 34px;
-          line-height: 45px;
-          text-align: center;
-          width: 15%;
-          cursor: pointer;
-          // background: red;
-        }
-        .rad {
-          color: #ff3737;
-        }
-        .green {
-          color: #0fcd22;
-        }
-      }
-    }
+    //     .tableBodyList_span4 {
+    //       font-family: Source Han Sans CN;
+    //       font-weight: 400;
+    //       font-size: 14px;
+    //       color: #ffffff;
+    //       height: 34px;
+    //       line-height: 45px;
+    //       text-align: center;
+    //       width: 15%;
+    //       cursor: pointer;
+    //       // background: red;
+    //     }
+    //     .rad {
+    //       color: #ff3737;
+    //     }
+    //     .green {
+    //       color: #0fcd22;
+    //     }
+    //   }
+    // }
+    // background: yellow;
   }
 }
 .ListBoxHeader {

diff --git a/package.json b/package.json
index 39861ad..e784d82 100644
--- a/package.json
+++ b/package.json
@@ -72,4 +72,4 @@
     "vite-plugin-svg-icons": "2.0.1",
     "vite-plugin-vue-setup-extend": "0.4.0"
   }
-}
+}
\ No newline at end of file
diff --git a/src/assets/images/fhpl/sqjca.png b/src/assets/images/fhpl/sqjca.png
index 0eb531c..00e619c 100644
--- a/src/assets/images/fhpl/sqjca.png
+++ b/src/assets/images/fhpl/sqjca.png
Binary files differ
diff --git a/src/views/oneMap/ConstructionEvaluation/JSPGLeftBox.vue b/src/views/oneMap/ConstructionEvaluation/JSPGLeftBox.vue
index 2a7ff07..3ee47c4 100644
--- a/src/views/oneMap/ConstructionEvaluation/JSPGLeftBox.vue
+++ b/src/views/oneMap/ConstructionEvaluation/JSPGLeftBox.vue
@@ -65,8 +65,9 @@
   </div>
   <!-- 污水收集处理 -->
   <div class="Sewagecollection">
-    <div class="ListBoxHeader" @click="showSewageFectory">
-      <div class="ListBoxHeader_font">污水收集处理</div>
+    <div class="topVehicl flex">
+      <div class="icon"></div>
+      <div class="name">污水收集处理</div>
     </div>
     <div class="wssjEch"></div>
   </div>
@@ -293,7 +294,31 @@
 .Sewagecollection {
   width: 450px;
   height: 25%;
-  // background: yellowgreen;
+
+  .topVehicl {
+    font-family: Source Han Sans CN;
+    font-weight: bold;
+    font-size: 14px;
+    color: #ebfeff;
+    align-items: center;
+    height: 30px;
+    // background: teal;
+    .icon {
+      position: relative;
+      top: -1px;
+      width: 25px;
+      height: 25px;
+      background: url('@/assets/newImgs/xtb_img.png') no-repeat;
+    }
+
+    .name {
+      background: linear-gradient(0deg, rgba(0, 242, 255, 0.5) 0%, rgba(0, 242, 255, 0) 100%);
+      padding: 0px 3px;
+      height: 10px;
+      line-height: 0px;
+      margin-top: 6px;
+    }
+  }
   .wssjEch {
     margin: 5px auto;
     width: 420px;
diff --git a/src/views/oneMap/ConstructionEvaluation/JSPGRightBox.vue b/src/views/oneMap/ConstructionEvaluation/JSPGRightBox.vue
index dbeddc8..3f696aa 100644
--- a/src/views/oneMap/ConstructionEvaluation/JSPGRightBox.vue
+++ b/src/views/oneMap/ConstructionEvaluation/JSPGRightBox.vue
@@ -2,7 +2,7 @@
   <!-- 绩效管理 -->
   <div class="management">
     <div class="ListBoxHeader">
-      <div class="ListBoxHeader_font">绩效管理</div>
+      <div class="ListBoxHeader_font">管理绩效</div>
     </div>
     <!-- 年份切换 -->
     <div class="subRightBox">
diff --git a/src/views/oneMap/FloodStuationReview/sqhgBottomBox.vue b/src/views/oneMap/FloodStuationReview/sqhgBottomBox.vue
index 53d38bb..d178c59 100644
--- a/src/views/oneMap/FloodStuationReview/sqhgBottomBox.vue
+++ b/src/views/oneMap/FloodStuationReview/sqhgBottomBox.vue
@@ -117,8 +117,8 @@
 const ranLeng = [
   [
     { value: '0-0.2', color: 'rgba(7, 213, 118, 0)' },
-    { value: '0.2-5', color: 'rgba(7, 213, 118, 1)' },
-    { value: '5-25', color: 'rgba(38, 129, 240,1)' },
+    { value: '0.2-5', color: 'rgba(38, 129, 240,1)' },
+    { value: '5-25', color: 'rgb(222, 230, 0)' },
     { value: '>25', color: 'rgba(255, 26, 26, 1)' },
   ],
   [
@@ -235,14 +235,18 @@
   stepNum.value = 0;
   hgEngPlay.value = false;
   showRainLegend.value = false;
-  // NewFiberMapUtils.disposeRainfall('')
-  // newfiberMap.setLayersVisible(["krigingImage"],false)
+  // newfiberMapbox.map.removeLayer('canvas-layer0');
+  // newfiberMapbox.map.removeSource('canvas-source0');
   hoursList.value.activeIndex = stepNum.value;
   clearInterval(runDayInterval.value);
   if (runDayInterval.value) {
     runDayInterval.value = null;
     refresh.value = Math.random();
   }
+  // if (newfiberMapbox.map.getLayer('canvas-layer0')) {
+  //   newfiberMapbox.map.removeLayer('canvas-layer0');
+  //   newfiberMapbox.map.removeSource('canvas-source0');
+  // }
 }
 
 function changeChartData() {
@@ -375,10 +379,10 @@
 ];*/
 let colorScale = [
   { value: '0', color: 'rgba(7, 213, 118, 0)' },
-  { value: '0.2', color: 'rgba(7, 213, 118, 1)' },
-  { value: '5', color: 'rgba(38, 129, 240,1)' },
-  { value: '25', color: 'rgba(255, 26, 26, 1)' },
-  { value: '250', color: 'rgba(255, 26, 26, 1)' },
+  { value: '0.2', color: 'rgb(38, 129, 240)' },
+  { value: '5', color: 'rgb(222, 230, 0)' },
+  { value: '25', color: 'rgb(255, 26, 26)' },
+  { value: '250', color: 'rgb(255, 26, 26)' },
 ];
 let imageFiles = [];
 let canvas = [];
diff --git a/src/views/oneMap/FloodStuationReview/xqhgLeftBox.vue b/src/views/oneMap/FloodStuationReview/xqhgLeftBox.vue
index 14170d1..c43cb7b 100644
--- a/src/views/oneMap/FloodStuationReview/xqhgLeftBox.vue
+++ b/src/views/oneMap/FloodStuationReview/xqhgLeftBox.vue
@@ -122,7 +122,7 @@
         background: linear-gradient(0deg, rgba(0, 242, 255, 0.5) 0%, rgba(0, 242, 255, 0) 100%);
         height: 10px;
         line-height: 0px;
-        margin-top: 10px;
+        margin-top: 12px;
       }
     }
     .ScheduEcharts {
@@ -161,7 +161,7 @@
       background: linear-gradient(0deg, rgba(0, 242, 255, 0.5) 0%, rgba(0, 242, 255, 0) 100%);
       height: 10px;
       line-height: 0px;
-      margin-top: 10px;
+      margin-top: 12px;
     }
   }
   .VehiclEcharts {
@@ -196,7 +196,7 @@
       background: linear-gradient(0deg, rgba(0, 242, 255, 0.5) 0%, rgba(0, 242, 255, 0) 100%);
       height: 10px;
       line-height: 0px;
-      margin-top: 10px;
+      margin-top: 12px;
     }
   }
   .MaterialEcharts {
diff --git a/src/views/oneMap/LayerControl/LayerControl.vue b/src/views/oneMap/LayerControl/LayerControl.vue
index 37d0576..cc8e024 100644
--- a/src/views/oneMap/LayerControl/LayerControl.vue
+++ b/src/views/oneMap/LayerControl/LayerControl.vue
@@ -30,29 +30,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 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({
   // 图层控制面板的渲染数据
   /**图层面板数据字段说明
@@ -69,72 +70,90 @@
       Show: true,
       children: [
         {
-          layerName: "中心城区",
-          layerKey: "centerCity",
-          layerIcon: requireTuChengImg("zhongxinchengqu"),
+          layerName: '蓝色地图',
+          layerKey: 'blackMap',
+          layerIcon: requireTuChengImg('zhongxinchengqu'),
+          layerVisible: false,
+        },
+        {
+          layerName: '白色地图',
+          layerKey: 'whiteMap',
+          layerIcon: requireTuChengImg('zhongxinchengqu'),
+          layerVisible: false,
+        },
+        {
+          layerName: '影像地图',
+          layerKey: 'imageMap',
+          layerIcon: requireTuChengImg('zhongxinchengqu'),
+          layerVisible: false,
+        },
+        {
+          layerName: '中心城区',
+          layerKey: 'centerCity',
+          layerIcon: requireTuChengImg('zhongxinchengqu'),
           layerVisible: false,
           dynamicLineData: yanAnCenterCity,
         },
         {
-          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,
         },
@@ -145,38 +164,38 @@
       Show: true,
       children: [
         {
-          layerName: "燃气管网",
-          layerKey: "rq_all",
+          layerName: '燃气管网',
+          layerKey: 'rq_all',
           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,
         },
@@ -187,22 +206,22 @@
       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,
         },
@@ -213,8 +232,8 @@
         //   layerVisible: false,
         // },
         {
-          layerName: "雨水泵站",
-          layerKey: "YSBZ",
+          layerName: '雨水泵站',
+          layerKey: 'YSBZ',
           layerIcon: null,
           layerVisible: false,
           data: yanAnYSBZ,
@@ -226,14 +245,14 @@
       Show: true,
       children: [
         {
-          layerName: "污水分区",
-          layerKey: "sewageArea",
+          layerName: '污水分区',
+          layerKey: 'sewageArea',
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: "污水管网",
-          layerKey: "wsLine1",
+          layerName: '污水管网',
+          layerKey: 'wsLine1',
           layerIcon: null,
           layerVisible: false,
         },
@@ -250,8 +269,8 @@
         //   layerVisible: false,
         // },
         {
-          layerName: "污水处理厂",
-          layerKey: "WSCLC",
+          layerName: '污水处理厂',
+          layerKey: 'WSCLC',
           layerIcon: null,
           layerVisible: false,
           data: yanAnWSCLC,
@@ -263,36 +282,36 @@
       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,
@@ -307,10 +326,10 @@
     .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,
@@ -319,37 +338,79 @@
 watch(
   () => props.ShowTuCheng,
   (newValue, oldValue) => {
-    console.log("ShowTuCheng变化了", newValue, oldValue);
+    console.log('ShowTuCheng变化了', newValue, oldValue);
   },
   { immediate: true, deep: true }
 );
 
-const layerClick = (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 });
+  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 => {
+      oldIds.push(layer.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]));
+    });
+    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');
+    let newMapStyle;
+    let oldMapStyle = newfiberMapbox.map.getStyle();
+    let oldIds = [];
+    oldMapStyle.layers.forEach(layer => {
+      oldIds.push(layer.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]));
+    });
+    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.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.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, // 持续时间，延时
@@ -360,29 +421,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, // 持续时间，延时
@@ -393,22 +454,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, // 持续时间，延时
@@ -419,29 +480,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) : '';
       });
     });
   });
@@ -449,17 +510,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>
 
@@ -470,7 +531,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;
@@ -486,7 +547,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;
diff --git a/src/views/oneMap/components/FXHG.vue b/src/views/oneMap/components/FXHG.vue
index 8924475..44e9c21 100644
--- a/src/views/oneMap/components/FXHG.vue
+++ b/src/views/oneMap/components/FXHG.vue
@@ -40,6 +40,7 @@
   showPanel.value = true;
   showBottom.value = false;
   curType.value = true;
+  bus.emit('SetLayerShow', ['蓝色地图']);
   if (newfiberMapbox.map.getLayer('dynamicRoute')) {
     newfiberMapbox.map.removeLayer('dynamicRoute');
     newfiberMapbox.map.removeLayer('dynamicRoute_Symbol');
@@ -68,6 +69,7 @@
 
   let initePSTimer = setInterval(() => {
     if (!newfiberMapbox) return;
+    bus.emit('SetLayerShow', ['白色地图']);
     bus.emit('setLayerVisible', { layername: 'ysLine1', isCheck: true });
     //bus.emit('setLayerVisible', { layername: 'wsLine1', isCheck: true });
     clearInterval(initePSTimer);
diff --git a/src/views/oneMap/components/ZHHM.vue b/src/views/oneMap/components/ZHHM.vue
index d68bdc5..1f29507 100644
--- a/src/views/oneMap/components/ZHHM.vue
+++ b/src/views/oneMap/components/ZHHM.vue
@@ -648,6 +648,7 @@
     zoom: 12,
     pitch: 55,
   });
+  bus.emit('SetLayerShow', ['蓝色地图']);
   // 先清空
   bus.emit('clearAllLayer');
   let removedLayer = ['HMJZYSQ', 'HMXGYLD', 'HMXDLGC', 'HMXSX', 'GWPCYXF'];
diff --git a/src/views/oneMap/components/ZHHM_JCFX.vue b/src/views/oneMap/components/ZHHM_JCFX.vue
index c420911..42e81e6 100644
--- a/src/views/oneMap/components/ZHHM_JCFX.vue
+++ b/src/views/oneMap/components/ZHHM_JCFX.vue
@@ -411,6 +411,7 @@
 });
 onBeforeUnmount(() => {
   bus.emit('clearAllLayer');
+  bus.emit('SetLayerShow', ['蓝色地图']);
   let removedLayer = ['HMJZYSQ', 'HMXGYLD', 'HMXDLGC', 'HMXSX', 'GWPCYXF'];
   removedLayer.forEach(layer => {
     bus.emit('setLayerVisible', { layername: layer, isCheck: false });
diff --git a/src/views/oneMap/components/ZHHM_JSPG.vue b/src/views/oneMap/components/ZHHM_JSPG.vue
index 7400f1b..df2c85f 100644
--- a/src/views/oneMap/components/ZHHM_JSPG.vue
+++ b/src/views/oneMap/components/ZHHM_JSPG.vue
@@ -53,6 +53,7 @@
 };
 
 onMounted(() => {
+  bus.emit('SetLayerShow', ['蓝色地图']);
   newfiberMapbox.map.easeTo({
     center: [109.488, 36.596],
     zoom: 13,
diff --git a/src/views/oneMap/components/ZHPS.vue b/src/views/oneMap/components/ZHPS.vue
index 7ce8bb0..f09ddbc 100644
--- a/src/views/oneMap/components/ZHPS.vue
+++ b/src/views/oneMap/components/ZHPS.vue
@@ -43,6 +43,7 @@
   });
 });
 onBeforeUnmount(() => {
+  bus.emit('SetLayerShow', ['蓝色地图']);
   // bus.emit('setLayerVisible', { layername: 'ysLine1', isCheck: false });
   // bus.emit('setLayerVisible', { layername: 'wsLine1', isCheck: false });
 });
diff --git a/src/views/oneMap/components/ZHRQ.vue b/src/views/oneMap/components/ZHRQ.vue
index 40a70cc..493c201 100644
--- a/src/views/oneMap/components/ZHRQ.vue
+++ b/src/views/oneMap/components/ZHRQ.vue
@@ -1,31 +1,17 @@
 <template>
   <div id="ZHRQ">
-    <div
-      :class="[
-        'LeftBox',
-        'animate__animated',
-        showPanel ? 'animate__fadeOutLeft' : 'animate__fadeInLeft',
-      ]"
-    >
+    <div :class="['LeftBox', 'animate__animated', showPanel ? 'animate__fadeOutLeft' : 'animate__fadeInLeft']">
       <div class="ComBox LeftBox1_1">
         <div class="Box_header">管道风险评估</div>
         <div class="Box_Body">
           <div class="TJListBox">
             <div class="TJList TJList_RQ" @click="TuChengClick(0)">
-              <img
-                class="TJListImg"
-                src="@/assets/images/Sponge_screen/RQ/RQ_RQ.png"
-                alt=""
-              />
+              <img class="TJListImg" src="@/assets/images/Sponge_screen/RQ/RQ_RQ.png" alt="" />
               <span class="TJListName">燃气管道</span>
               <span class="TJListValue">4549km</span>
             </div>
             <div class="TJList TJList_GZ">
-              <img
-                class="TJListImg"
-                src="@/assets/images/Sponge_screen/RQ/RQ_GZ.png"
-                alt=""
-              />
+              <img class="TJListImg" src="@/assets/images/Sponge_screen/RQ/RQ_GZ.png" alt="" />
               <span class="TJListName">需改造</span>
               <span class="TJListValue">1922km</span>
             </div>
@@ -71,9 +57,7 @@
             </div>
             <div class="tableBody">
               <div class="tableBodyList" v-for="item in AllData.FXJCData">
-                <span class="tableBodyList_span1" @click="FengXianClick(item)">{{
-                  item.zb
-                }}</span>
+                <span class="tableBodyList_span1" @click="FengXianClick(item)">{{ item.zb }}</span>
                 <span class="tableBodyList_span2" @click="FengXianClick(item)"
                   >{{ item.sz }}
                   <el-icon v-if="item.szzt" color="lime" size="14"><Top /> </el-icon>
@@ -81,11 +65,9 @@
                     <Bottom />
                   </el-icon>
                 </span>
-                <span
-                  class="tableBodyList_span3"
-                  :class="item.zt == 0 ? 'YJClass' : ''"
-                  >{{ item.zt == 0 ? "预警" : "正常" }}</span
-                >
+                <span class="tableBodyList_span3" :class="item.zt == 0 ? 'YJClass' : ''">{{
+                  item.zt == 0 ? '预警' : '正常'
+                }}</span>
                 <span class="tableBodyList_span4" @click="PaiFa(item)">派发</span>
               </div>
             </div>
@@ -110,13 +92,7 @@
         </div>
       </div>
     </div>
-    <div
-      :class="[
-        'RightBox',
-        'animate__animated',
-        showPanel ? 'animate__fadeOutRight' : 'animate__fadeInRight',
-      ]"
-    >
+    <div :class="['RightBox', 'animate__animated', showPanel ? 'animate__fadeOutRight' : 'animate__fadeInRight']">
       <div class="ComBox RightBox1_1">
         <div class="Box_header">辅助决策</div>
         <div class="Box_Body">
@@ -138,16 +114,10 @@
               <span class="JCListBox_List_value color_red">{{ item.yp }}</span>
             </div>
             <div class="JCListBox_List JCListBox_List_BTN">
-              <el-button
-                style="background: #03b6a0; color: white; border: none"
-                size="small"
-                @click="GongDanPaiFa(item)"
+              <el-button style="background: #03b6a0; color: white; border: none" size="small" @click="GongDanPaiFa(item)"
                 >工单派发</el-button
               >
-              <el-button
-                style="background: #03b6a0; color: white; border: none"
-                size="small"
-                @click="XianChangLianXian(item)"
+              <el-button style="background: #03b6a0; color: white; border: none" size="small" @click="XianChangLianXian(item)"
                 >现场联线</el-button
               >
             </div>
@@ -158,18 +128,12 @@
         <div class="Box_header">巡查反馈</div>
         <div class="Box_Body">
           <div class="FK_headerBox">
-            <div class="FK_headerBox_list" @click="dealOrNoDeal(1)">
-              <span class="FK_headerBox_list_colorBox1"></span> 未处理
-            </div>
-            <div class="FK_headerBox_list" @click="dealOrNoDeal(2)">
-              <span class="FK_headerBox_list_colorBox2"></span> 已处理
-            </div>
+            <div class="FK_headerBox_list" @click="dealOrNoDeal(1)"><span class="FK_headerBox_list_colorBox1"></span> 未处理</div>
+            <div class="FK_headerBox_list" @click="dealOrNoDeal(2)"><span class="FK_headerBox_list_colorBox2"></span> 已处理</div>
           </div>
           <div class="FK_bodyBox">
             <div class="FK_bodyBox_list" v-for="item in AllData.XCFKData">
-              <span class="FK_bodyBox_list_label" @click="XunChaFanKui(item)">{{
-                item.name
-              }}</span>
+              <span class="FK_bodyBox_list_label" @click="XunChaFanKui(item)">{{ item.name }}</span>
               <div class="FK_BigBox">
                 <div class="FK_CenBox1" :style="getWidth(item, 1)">{{ item.num1 }}</div>
                 <div class="FK_CenBox2" :style="getWidth(item, 2)">{{ item.num2 }}</div>
@@ -179,13 +143,7 @@
         </div>
       </div>
     </div>
-    <div
-      :class="[
-        'TopBox',
-        'animate__animated',
-        showPanel ? 'animate__fadeOutUp' : 'animate__fadeInDown',
-      ]"
-    >
+    <div :class="['TopBox', 'animate__animated', showPanel ? 'animate__fadeOutUp' : 'animate__fadeInDown']">
       <div class="TopTableHeader">
         <span class="TopTableListSpan TopTableListSpan1">时间</span>
         <span class="TopTableListSpan TopTableListSpan2">事件明细</span>
@@ -195,27 +153,15 @@
         <span class="TopTableListSpan TopTableListSpan6">督办</span>
       </div>
       <!-- <div class="TopTableBody"> -->
-      <Vue3SeamlessScroll
-        :list="AllData.TopTableData"
-        :singleHeight="34"
-        :hover="true"
-        class="TopTableBody"
-      >
+      <Vue3SeamlessScroll :list="AllData.TopTableData" :singleHeight="34" :hover="true" class="TopTableBody">
         <div class="TopTableBody_list" v-for="item in AllData.TopTableData">
           <span class="TopTableListSpan TopTableListSpan1">{{ item.sj }}</span>
           <span class="TopTableListSpan TopTableListSpan2">{{ item.mx }}</span>
           <span class="TopTableListSpan TopTableListSpan3">{{ item.dd }}</span>
-          <span class="TopTableListSpan TopTableListSpan4">{{
-            item.zt == 0 ? "未处理" : "已处理"
-          }}</span>
+          <span class="TopTableListSpan TopTableListSpan4">{{ item.zt == 0 ? '未处理' : '已处理' }}</span>
           <span class="TopTableListSpan TopTableListSpan5">{{ item.dw }}</span>
           <span class="TopTableListSpan TopTableListSpan6">
-            <img
-              class="TopTableListSpanImg2"
-              src="@/assets/images/Sponge_screen/RQ/RQ_XX.png"
-              alt=""
-              @click="PaiFa(item)"
-            />
+            <img class="TopTableListSpanImg2" src="@/assets/images/Sponge_screen/RQ/RQ_XX.png" alt="" @click="PaiFa(item)" />
             <img
               class="TopTableListSpanImg"
               src="@/assets/images/Sponge_screen/RQ/RQ_SP.png"
@@ -231,49 +177,49 @@
 </template>
 
 <script setup name="ZHRQ">
-import { ref, reactive, toRefs, onMounted, onBeforeUnmount, nextTick } from "vue";
+import { ref, reactive, toRefs, onMounted, onBeforeUnmount, nextTick } from 'vue';
 
-import * as echarts from "echarts";
-import bus from "@/bus";
-import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
-import sheBeiLost from "@/assets/sheBeiLost.json";
-import xiaXian from "@/assets/xiaXian.json";
-import yiBian from "@/assets/yiBian.json";
-import zaWuDuiFang from "@/assets/zaWuDuiFang.json";
-import rq_QiTa from "@/assets/rq_QiTa.json";
-import no_sheBeiLost from "@/assets/no_sheBeiLost.json";
-import no_xiaXian from "@/assets/no_xiaXian.json";
-import no_yiBian from "@/assets/no_yiBian.json";
-import no_zaWuDuiFang from "@/assets/no_zaWuDuiFang.json";
-import no_rq_QiTa from "@/assets/no_rq_QiTa.json";
-import yanAnRQoverindex from "@/assets/yanAnRQoverindex.json";
-import yanAnWarring from "@/assets/yanAnWarring.json";
+import * as echarts from 'echarts';
+import bus from '@/bus';
+import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
+import sheBeiLost from '@/assets/sheBeiLost.json';
+import xiaXian from '@/assets/xiaXian.json';
+import yiBian from '@/assets/yiBian.json';
+import zaWuDuiFang from '@/assets/zaWuDuiFang.json';
+import rq_QiTa from '@/assets/rq_QiTa.json';
+import no_sheBeiLost from '@/assets/no_sheBeiLost.json';
+import no_xiaXian from '@/assets/no_xiaXian.json';
+import no_yiBian from '@/assets/no_yiBian.json';
+import no_zaWuDuiFang from '@/assets/no_zaWuDuiFang.json';
+import no_rq_QiTa from '@/assets/no_rq_QiTa.json';
+import yanAnRQoverindex from '@/assets/yanAnRQoverindex.json';
+import yanAnWarring from '@/assets/yanAnWarring.json';
 
 const AllData = reactive({
   xunChaStatic: null,
   xunChaLayers: [
-    "alreadyDeal_DF",
-    "alreadyDeal_DS",
-    "alreadyDeal_XX",
-    "alreadyDeal_YB",
-    "alreadyDeal_QT",
-    "noDeal_DF",
-    "noDeal_DS",
-    "noDeall_XX",
-    "noDeal_YB",
-    "noDeal_QT",
+    'alreadyDeal_DF',
+    'alreadyDeal_DS',
+    'alreadyDeal_XX',
+    'alreadyDeal_YB',
+    'alreadyDeal_QT',
+    'noDeal_DF',
+    'noDeal_DS',
+    'noDeall_XX',
+    'noDeal_YB',
+    'noDeal_QT',
   ],
   ChangeData: [
     {
-      name: "枣园",
+      name: '枣园',
       id: 1,
     },
     {
-      name: "杨家湾",
+      name: '杨家湾',
       id: 2,
     },
     {
-      name: "丰富川",
+      name: '丰富川',
       id: 3,
     },
   ],
@@ -281,38 +227,38 @@
   // 风险监测
   FXJCData: [
     {
-      zb: "甲烷浓度",
-      sz: "3%",
+      zb: '甲烷浓度',
+      sz: '3%',
       szzt: true,
       zt: 0, //0预警 1 正常
-      value: "JWND",
+      value: 'JWND',
     },
     {
-      zb: "压力",
-      sz: "5MPa",
+      zb: '压力',
+      sz: '5MPa',
       szzt: false,
       zt: 1, //0预警 1 正常
-      value: "YL",
+      value: 'YL',
     },
     {
-      zb: "温度",
-      sz: "25C°",
+      zb: '温度',
+      sz: '25C°',
       szzt: true,
       zt: 1, //0预警 1 正常
-      value: "WD",
+      value: 'WD',
     },
   ],
   YJChangeData: [
     {
-      name: "综合",
+      name: '综合',
       id: 1,
     },
     {
-      name: "压力",
+      name: '压力',
       id: 2,
     },
     {
-      name: "温度",
+      name: '温度',
       id: 3,
     },
   ],
@@ -320,51 +266,51 @@
   //辅助决策
   JCData: [
     {
-      qy: "宝塔区凤凰山街道二道街",
-      tz: "压力监测异常波动",
+      qy: '宝塔区凤凰山街道二道街',
+      tz: '压力监测异常波动',
       sj: 5,
-      yp: "设施故障",
-      value: "001", //语音识别内容编码-前段自己设置的,后期项目有接口就直接替换数据唯一id
+      yp: '设施故障',
+      value: '001', //语音识别内容编码-前段自己设置的,后期项目有接口就直接替换数据唯一id
     },
     {
-      qy: "宝塔区凤凰山街道二道街",
-      tz: "燃气管道压力过大",
+      qy: '宝塔区凤凰山街道二道街',
+      tz: '燃气管道压力过大',
       sj: 5,
-      yp: "燃气爆管风险",
-      value: "002",
+      yp: '燃气爆管风险',
+      value: '002',
     },
     {
-      qy: "宝塔区凤凰山街道二道街",
-      tz: "高峰期流量持续降低",
+      qy: '宝塔区凤凰山街道二道街',
+      tz: '高峰期流量持续降低',
       sj: 4,
-      yp: "燃气泄漏风险",
-      value: "003",
+      yp: '燃气泄漏风险',
+      value: '003',
     },
   ],
   // 巡查反馈
   XCFKData: [
     {
-      name: "堆放杂物",
+      name: '堆放杂物',
       num1: 20,
       num2: 80,
     },
     {
-      name: "设备丢失",
+      name: '设备丢失',
       num1: 12,
       num2: 88,
     },
     {
-      name: "下陷",
+      name: '下陷',
       num1: 32,
       num2: 68,
     },
     {
-      name: "异变",
+      name: '异变',
       num1: 30,
       num2: 70,
     },
     {
-      name: "其他",
+      name: '其他',
       num1: 20,
       num2: 80,
     },
@@ -372,35 +318,35 @@
   // 顶部表格数据
   TopTableData: [
     {
-      sj: "2024-09-26 10:00:29",
-      mx: "燃气常规检查发现泄漏",
-      dd: "宝塔区凤凰山街道二道街",
+      sj: '2024-09-26 10:00:29',
+      mx: '燃气常规检查发现泄漏',
+      dd: '宝塔区凤凰山街道二道街',
       zt: 0, //0未处理 1已处理
-      dw: "延安市燃气总公司",
+      dw: '延安市燃气总公司',
       value: null,
     },
     {
-      sj: "2024-09-27 16:10:248",
-      mx: "燃气常规检查发现泄漏",
-      dd: "宝塔区凤凰山街道二道街",
+      sj: '2024-09-27 16:10:248',
+      mx: '燃气常规检查发现泄漏',
+      dd: '宝塔区凤凰山街道二道街',
       zt: 0, //0未处理 1已处理
-      dw: "延安市燃气总公司",
+      dw: '延安市燃气总公司',
       value: null,
     },
     {
-      sj: "2024-09-26 10:00:29",
-      mx: "燃气常规检查发现泄漏",
-      dd: "宝塔区凤凰山街道二道街",
+      sj: '2024-09-26 10:00:29',
+      mx: '燃气常规检查发现泄漏',
+      dd: '宝塔区凤凰山街道二道街',
       zt: 0, //0未处理 1已处理
-      dw: "延安市燃气总公司",
+      dw: '延安市燃气总公司',
       value: null,
     },
     {
-      sj: "2024-09-27 16:10:248",
-      mx: "燃气常规检查发现泄漏",
-      dd: "宝塔区凤凰山街道二道街",
+      sj: '2024-09-27 16:10:248',
+      mx: '燃气常规检查发现泄漏',
+      dd: '宝塔区凤凰山街道二道街',
       zt: 0, //0未处理 1已处理
-      dw: "延安市燃气总公司",
+      dw: '延安市燃气总公司',
       value: null,
     },
   ],
@@ -417,7 +363,7 @@
   },
 });
 // 初始化预警统计的Echarts
-const initEcharts = (id) => {
+const initEcharts = id => {
   AllData.YJChangeIndex = id;
   let Data1 = [];
   let Data2 = [];
@@ -437,41 +383,41 @@
   if (!!myChart.value) {
     myChart.value.dispose();
   }
-  myChart.value = echarts.init(document.getElementById("YJEchartsBox"));
-  myChart.value.off("click");
+  myChart.value = echarts.init(document.getElementById('YJEchartsBox'));
+  myChart.value.off('click');
   myChart.value.setOption({
-    color: ["#18A7F2", "#1AF7AA"],
+    color: ['#18A7F2', '#1AF7AA'],
     tooltip: {
-      trigger: "axis",
+      trigger: 'axis',
     },
     grid: {
-      top: "30%",
-      left: "3%",
-      right: "4%",
-      bottom: "3%",
+      top: '30%',
+      left: '3%',
+      right: '4%',
+      bottom: '3%',
       containLabel: true,
     },
     legend: {
-      data: ["预警次数", "持续时长"],
+      data: ['预警次数', '持续时长'],
       textStyle: {
-        color: "#fffd", // 图例文字颜色
+        color: '#fffd', // 图例文字颜色
       },
-      x: "40",
-      y: "10",
+      x: '40',
+      y: '10',
     },
     xAxis: [
       {
-        type: "category",
-        data: ["今日", "09/27", "09/26", "09/25", "09/24", "09/23", "09/22"],
+        type: 'category',
+        data: ['今日', '09/27', '09/26', '09/25', '09/24', '09/23', '09/22'],
         axisPointer: {
-          type: "shadow",
+          type: 'shadow',
         },
         textStyle: {
-          color: "#EBFEFF",
+          color: '#EBFEFF',
         },
         axisLine: {
           lineStyle: {
-            color: "#EBFEFF",
+            color: '#EBFEFF',
           },
         },
         // boundaryGap: false,
@@ -479,57 +425,57 @@
     ],
     yAxis: [
       {
-        type: "value",
-        name: "预警次数",
+        type: 'value',
+        name: '预警次数',
         min: 0,
         max: 12,
         interval: 2,
         axisLabel: {
-          formatter: "{value}",
+          formatter: '{value}',
         },
         axisLine: {
           lineStyle: {
-            color: "#AAC1CF",
+            color: '#AAC1CF',
           },
         },
         splitLine: {
           lineStyle: {
             // 使用深浅的间隔色
-            color: ["#184E5A"],
+            color: ['#184E5A'],
           },
         },
       },
       {
-        type: "value",
-        name: "持续时长",
+        type: 'value',
+        name: '持续时长',
         min: 0,
         max: 30,
         interval: 5,
         axisLabel: {
-          formatter: "{value}",
+          formatter: '{value}',
         },
         axisLine: {
           lineStyle: {
-            color: "#AAC1CF",
+            color: '#AAC1CF',
           },
         },
         splitLine: {
           lineStyle: {
             // 使用深浅的间隔色
-            color: ["#184E5A"],
+            color: ['#184E5A'],
           },
         },
       },
     ],
     series: [
       {
-        name: "预警次数",
-        type: "bar",
-        barWidth: "10px",
+        name: '预警次数',
+        type: 'bar',
+        barWidth: '10px',
         showBackground: true,
         tooltip: {
           valueFormatter: function (value) {
-            return value + " 次";
+            return value + ' 次';
           },
         },
         itemStyle: {
@@ -539,12 +485,12 @@
         data: Data1,
       },
       {
-        name: "持续时长",
-        type: "line",
+        name: '持续时长',
+        type: 'line',
         yAxisIndex: 1,
         tooltip: {
           valueFormatter: function (value) {
-            return value + "min";
+            return value + 'min';
           },
         },
         areaStyle: {
@@ -552,11 +498,11 @@
           color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
             {
               offset: 0,
-              color: "#1AF7AA",
+              color: '#1AF7AA',
             },
             {
               offset: 1,
-              color: "#1AF7AA00",
+              color: '#1AF7AA00',
             },
           ]),
         },
@@ -565,19 +511,19 @@
       },
     ],
   });
-  myChart.value.on("click", (param) => {
+  myChart.value.on('click', param => {
     console.log(param);
     let data = {
-      title: "风险监测",
-      comIDs: ["RQ_FengXianJianCe"],
+      title: '风险监测',
+      comIDs: ['RQ_FengXianJianCe'],
     };
-    bus.emit("publicDialog", data);
+    bus.emit('publicDialog', data);
     let a = {
-      value: "全部",
-      endTime: "2024-10-05",
+      value: '全部',
+      endTime: '2024-10-05',
     };
     setTimeout(() => {
-      bus.emit("getDataListFxjc", a);
+      bus.emit('getDataListFxjc', a);
     }, 500);
   });
 
@@ -591,7 +537,7 @@
     i++;
     if (i == length) i = 0;
     myChart.value.dispatchAction({
-      type: "showTip",
+      type: 'showTip',
       seriesIndex: 0,
       dataIndex: i,
     });
@@ -608,14 +554,14 @@
   return `width:${widthNum}%`;
 };
 // 工单派发
-const GongDanPaiFa = (item) => {
+const GongDanPaiFa = item => {
   console.log(item);
   let data = {
     title: item.qy,
-    comIDs: ["gdpf"],
+    comIDs: ['gdpf'],
     getSiteId: item.value,
   };
-  bus.emit("publicDialog", data);
+  bus.emit('publicDialog', data);
 };
 // // 风险
 // const FengXianClick = (item) => {
@@ -627,56 +573,52 @@
 //   bus.emit("publicDialog", data);
 // };
 // 风险监测派发
-const PaiFa = (item) => {
+const PaiFa = item => {
   console.log(item);
   let data = {
-    title: "智慧外呼",
-    comIDs: ["RQ_ZhiHuiWaiHu"],
+    title: '智慧外呼',
+    comIDs: ['RQ_ZhiHuiWaiHu'],
     getSiteId: item.value,
   };
-  bus.emit("publicDialog", data);
+  bus.emit('publicDialog', data);
 };
 //巡查反馈处理、未处理
-const dealOrNoDeal = (item) => {
+const dealOrNoDeal = item => {
   AllData.xunChaStatic = item;
   newfiberMapbox.map.easeTo({
     center: [109.488, 36.596],
     zoom: 12,
     pitch: 55,
   });
-  bus.emit("removeMapDatas", ["warning_monitor"]);
+  bus.emit('removeMapDatas', ['warning_monitor']);
   if (item == 1) {
-    let removedLayer = AllData.xunChaLayers.filter((layer) => layer.includes("noDeal"));
-    let selectedLayer = AllData.xunChaLayers.filter((layer) =>
-      layer.includes("alreadyDeal")
-    );
-    bus.emit("removeMapDatas", AllData.xunChaLayers);
-    bus.emit("setGeoJSON", { json: zaWuDuiFang, key: "alreadyDeal_DF" });
-    bus.emit("setGeoJSON", { json: sheBeiLost, key: "alreadyDeal_DS" });
-    bus.emit("setGeoJSON", { json: xiaXian, key: "alreadyDeal_XX" });
-    bus.emit("setGeoJSON", { json: yiBian, key: "alreadyDeal_YB" });
-    bus.emit("setGeoJSON", { json: rq_QiTa, key: "alreadyDeal_QT" });
-    selectedLayer.forEach((layer) => {
-      bus.emit("setLayerVisible", { layername: layer, isCheck: true });
+    let removedLayer = AllData.xunChaLayers.filter(layer => layer.includes('noDeal'));
+    let selectedLayer = AllData.xunChaLayers.filter(layer => layer.includes('alreadyDeal'));
+    bus.emit('removeMapDatas', AllData.xunChaLayers);
+    bus.emit('setGeoJSON', { json: zaWuDuiFang, key: 'alreadyDeal_DF' });
+    bus.emit('setGeoJSON', { json: sheBeiLost, key: 'alreadyDeal_DS' });
+    bus.emit('setGeoJSON', { json: xiaXian, key: 'alreadyDeal_XX' });
+    bus.emit('setGeoJSON', { json: yiBian, key: 'alreadyDeal_YB' });
+    bus.emit('setGeoJSON', { json: rq_QiTa, key: 'alreadyDeal_QT' });
+    selectedLayer.forEach(layer => {
+      bus.emit('setLayerVisible', { layername: layer, isCheck: true });
     });
   } else {
-    let removedLayer = AllData.xunChaLayers.filter((layer) =>
-      layer.includes("alreadyDeal")
-    );
-    let selectedLayer = AllData.xunChaLayers.filter((layer) => layer.includes("noDeal"));
-    bus.emit("removeMapDatas", AllData.xunChaLayers);
-    bus.emit("setGeoJSON", { json: no_zaWuDuiFang, key: "onDeal_DF" });
-    bus.emit("setGeoJSON", { json: no_sheBeiLost, key: "onDeal_DS" });
-    bus.emit("setGeoJSON", { json: no_xiaXian, key: "onDeal_XX" });
-    bus.emit("setGeoJSON", { json: no_yiBian, key: "onDeal_YB" });
-    bus.emit("setGeoJSON", { json: no_rq_QiTa, key: "onDeal_QT" });
-    selectedLayer.forEach((layer) => {
-      bus.emit("setLayerVisible", { layername: layer, isCheck: true });
+    let removedLayer = AllData.xunChaLayers.filter(layer => layer.includes('alreadyDeal'));
+    let selectedLayer = AllData.xunChaLayers.filter(layer => layer.includes('noDeal'));
+    bus.emit('removeMapDatas', AllData.xunChaLayers);
+    bus.emit('setGeoJSON', { json: no_zaWuDuiFang, key: 'onDeal_DF' });
+    bus.emit('setGeoJSON', { json: no_sheBeiLost, key: 'onDeal_DS' });
+    bus.emit('setGeoJSON', { json: no_xiaXian, key: 'onDeal_XX' });
+    bus.emit('setGeoJSON', { json: no_yiBian, key: 'onDeal_YB' });
+    bus.emit('setGeoJSON', { json: no_rq_QiTa, key: 'onDeal_QT' });
+    selectedLayer.forEach(layer => {
+      bus.emit('setLayerVisible', { layername: layer, isCheck: true });
     });
   }
 };
 // 巡查反馈
-const XunChaFanKui = (item) => {
+const XunChaFanKui = item => {
   let removedLayer = [];
   let selectedLayer = [];
   newfiberMapbox.map.easeTo({
@@ -685,80 +627,60 @@
     pitch: 55,
   });
   switch (item.name) {
-    case "堆放杂物":
-      removedLayer = AllData.xunChaLayers.filter(
-        (layer) => layer != "alreadyDeal_DF" && layer != "noDeal_DF"
-      );
-      selectedLayer = AllData.xunChaLayers.filter(
-        (layer) => layer == "alreadyDeal_DF" || layer == "noDeal_DF"
-      );
-      selectedLayer.forEach((layer) => {
-        bus.emit("setLayerVisible", { layername: layer, isCheck: true });
+    case '堆放杂物':
+      removedLayer = AllData.xunChaLayers.filter(layer => layer != 'alreadyDeal_DF' && layer != 'noDeal_DF');
+      selectedLayer = AllData.xunChaLayers.filter(layer => layer == 'alreadyDeal_DF' || layer == 'noDeal_DF');
+      selectedLayer.forEach(layer => {
+        bus.emit('setLayerVisible', { layername: layer, isCheck: true });
       });
-      removedLayer.forEach((layer) => {
-        bus.emit("setLayerVisible", { layername: layer, isCheck: false });
+      removedLayer.forEach(layer => {
+        bus.emit('setLayerVisible', { layername: layer, isCheck: false });
       });
       break;
-    case "设备丢失":
-      removedLayer = AllData.xunChaLayers.filter(
-        (layer) => layer != "alreadyDeal_DS" && layer != "noDeal_DS"
-      );
-      selectedLayer = AllData.xunChaLayers.filter(
-        (layer) => layer == "alreadyDeal_DS" || layer == "noDeal_DS"
-      );
-      selectedLayer.forEach((layer) => {
-        bus.emit("setLayerVisible", { layername: layer, isCheck: true });
+    case '设备丢失':
+      removedLayer = AllData.xunChaLayers.filter(layer => layer != 'alreadyDeal_DS' && layer != 'noDeal_DS');
+      selectedLayer = AllData.xunChaLayers.filter(layer => layer == 'alreadyDeal_DS' || layer == 'noDeal_DS');
+      selectedLayer.forEach(layer => {
+        bus.emit('setLayerVisible', { layername: layer, isCheck: true });
       });
-      removedLayer.forEach((layer) => {
-        bus.emit("setLayerVisible", { layername: layer, isCheck: false });
+      removedLayer.forEach(layer => {
+        bus.emit('setLayerVisible', { layername: layer, isCheck: false });
       });
       break;
-    case "下陷":
-      removedLayer = AllData.xunChaLayers.filter(
-        (layer) => layer != "alreadyDeal_XX" && layer != "noDeal_XX"
-      );
-      selectedLayer = AllData.xunChaLayers.filter(
-        (layer) => layer == "alreadyDeal_XX" || layer == "noDeal_XX"
-      );
-      selectedLayer.forEach((layer) => {
-        bus.emit("setLayerVisible", { layername: layer, isCheck: true });
+    case '下陷':
+      removedLayer = AllData.xunChaLayers.filter(layer => layer != 'alreadyDeal_XX' && layer != 'noDeal_XX');
+      selectedLayer = AllData.xunChaLayers.filter(layer => layer == 'alreadyDeal_XX' || layer == 'noDeal_XX');
+      selectedLayer.forEach(layer => {
+        bus.emit('setLayerVisible', { layername: layer, isCheck: true });
       });
-      removedLayer.forEach((layer) => {
-        bus.emit("setLayerVisible", { layername: layer, isCheck: false });
+      removedLayer.forEach(layer => {
+        bus.emit('setLayerVisible', { layername: layer, isCheck: false });
       });
       break;
-    case "异变":
-      removedLayer = AllData.xunChaLayers.filter(
-        (layer) => layer != "alreadyDeal_YB" && layer != "noDeal_YB"
-      );
-      selectedLayer = AllData.xunChaLayers.filter(
-        (layer) => layer == "alreadyDeal_YB" || layer == "noDeal_YB"
-      );
-      selectedLayer.forEach((layer) => {
-        bus.emit("setLayerVisible", { layername: layer, isCheck: true });
+    case '异变':
+      removedLayer = AllData.xunChaLayers.filter(layer => layer != 'alreadyDeal_YB' && layer != 'noDeal_YB');
+      selectedLayer = AllData.xunChaLayers.filter(layer => layer == 'alreadyDeal_YB' || layer == 'noDeal_YB');
+      selectedLayer.forEach(layer => {
+        bus.emit('setLayerVisible', { layername: layer, isCheck: true });
       });
-      removedLayer.forEach((layer) => {
-        bus.emit("setLayerVisible", { layername: layer, isCheck: false });
+      removedLayer.forEach(layer => {
+        bus.emit('setLayerVisible', { layername: layer, isCheck: false });
       });
       break;
-    case "其他":
-      removedLayer = AllData.xunChaLayers.filter(
-        (layer) => layer != "alreadyDeal_QT" && layer != "noDeal_QT"
-      );
-      selectedLayer = AllData.xunChaLayers.filter(
-        (layer) => layer == "alreadyDeal_QT" || layer == "noDeal_QT"
-      );
-      selectedLayer.forEach((layer) => {
-        bus.emit("setLayerVisible", { layername: layer, isCheck: true });
+    case '其他':
+      removedLayer = AllData.xunChaLayers.filter(layer => layer != 'alreadyDeal_QT' && layer != 'noDeal_QT');
+      selectedLayer = AllData.xunChaLayers.filter(layer => layer == 'alreadyDeal_QT' || layer == 'noDeal_QT');
+      selectedLayer.forEach(layer => {
+        bus.emit('setLayerVisible', { layername: layer, isCheck: true });
       });
-      removedLayer.forEach((layer) => {
-        bus.emit("setLayerVisible", { layername: layer, isCheck: false });
+      removedLayer.forEach(layer => {
+        bus.emit('setLayerVisible', { layername: layer, isCheck: false });
       });
       break;
   }
 };
 // 风险评估
-const TuChengClick = (item) => {
+const TuChengClick = item => {
   newfiberMapbox.map.easeTo({
     center: [109.488, 36.596],
     zoom: 12,
@@ -766,61 +688,61 @@
   });
   switch (item) {
     case 0:
-      bus.emit("setLayerVisible", { layername: "rq_SZLH", isCheck: false });
-      bus.emit("setLayerVisible", { layername: "rq_TYLH", isCheck: false });
-      bus.emit("setLayerVisible", { layername: "rq_LGLH", isCheck: false });
-      bus.emit("setLayerVisible", { layername: "rq_other", isCheck: false });
-      bus.emit("setLayerVisible", { layername: "rq_all", isCheck: true }); //所有管网rq_all、市政rq_SZLH、庭院rq_TYLH、立管rq_LGLH、其他rq_other
+      bus.emit('setLayerVisible', { layername: 'rq_SZLH', isCheck: false });
+      bus.emit('setLayerVisible', { layername: 'rq_TYLH', isCheck: false });
+      bus.emit('setLayerVisible', { layername: 'rq_LGLH', isCheck: false });
+      bus.emit('setLayerVisible', { layername: 'rq_other', isCheck: false });
+      bus.emit('setLayerVisible', { layername: 'rq_all', isCheck: true }); //所有管网rq_all、市政rq_SZLH、庭院rq_TYLH、立管rq_LGLH、其他rq_other
       break;
     case 1:
-      bus.emit("setLayerVisible", { layername: "rq_all", isCheck: false }); //所有管网rq_all、市政rq_SZLH、庭院rq_TYLH、立管rq_LGLH、其他rq_other
-      bus.emit("setLayerVisible", { layername: "rq_SZLH", isCheck: true });
-      bus.emit("setLayerVisible", { layername: "rq_TYLH", isCheck: false });
-      bus.emit("setLayerVisible", { layername: "rq_LGLH", isCheck: false });
-      bus.emit("setLayerVisible", { layername: "rq_other", isCheck: false });
+      bus.emit('setLayerVisible', { layername: 'rq_all', isCheck: false }); //所有管网rq_all、市政rq_SZLH、庭院rq_TYLH、立管rq_LGLH、其他rq_other
+      bus.emit('setLayerVisible', { layername: 'rq_SZLH', isCheck: true });
+      bus.emit('setLayerVisible', { layername: 'rq_TYLH', isCheck: false });
+      bus.emit('setLayerVisible', { layername: 'rq_LGLH', isCheck: false });
+      bus.emit('setLayerVisible', { layername: 'rq_other', isCheck: false });
       break;
     case 2:
-      bus.emit("setLayerVisible", { layername: "rq_all", isCheck: false }); //所有管网rq_all、市政rq_SZLH、庭院rq_TYLH、立管rq_LGLH、其他rq_other
-      bus.emit("setLayerVisible", { layername: "rq_SZLH", isCheck: false });
-      bus.emit("setLayerVisible", { layername: "rq_TYLH", isCheck: true });
-      bus.emit("setLayerVisible", { layername: "rq_LGLH", isCheck: false });
-      bus.emit("setLayerVisible", { layername: "rq_other", isCheck: false });
+      bus.emit('setLayerVisible', { layername: 'rq_all', isCheck: false }); //所有管网rq_all、市政rq_SZLH、庭院rq_TYLH、立管rq_LGLH、其他rq_other
+      bus.emit('setLayerVisible', { layername: 'rq_SZLH', isCheck: false });
+      bus.emit('setLayerVisible', { layername: 'rq_TYLH', isCheck: true });
+      bus.emit('setLayerVisible', { layername: 'rq_LGLH', isCheck: false });
+      bus.emit('setLayerVisible', { layername: 'rq_other', isCheck: false });
 
       break;
     case 3:
-      bus.emit("setLayerVisible", { layername: "rq_all", isCheck: false }); //所有管网rq_all、市政rq_SZLH、庭院rq_TYLH、立管rq_LGLH、其他rq_other
-      bus.emit("setLayerVisible", { layername: "rq_SZLH", isCheck: false });
-      bus.emit("setLayerVisible", { layername: "rq_TYLH", isCheck: false });
-      bus.emit("setLayerVisible", { layername: "rq_LGLH", isCheck: true });
-      bus.emit("setLayerVisible", { layername: "rq_other", isCheck: false });
+      bus.emit('setLayerVisible', { layername: 'rq_all', isCheck: false }); //所有管网rq_all、市政rq_SZLH、庭院rq_TYLH、立管rq_LGLH、其他rq_other
+      bus.emit('setLayerVisible', { layername: 'rq_SZLH', isCheck: false });
+      bus.emit('setLayerVisible', { layername: 'rq_TYLH', isCheck: false });
+      bus.emit('setLayerVisible', { layername: 'rq_LGLH', isCheck: true });
+      bus.emit('setLayerVisible', { layername: 'rq_other', isCheck: false });
       break;
     case 4:
-      bus.emit("setLayerVisible", { layername: "rq_all", isCheck: false }); //所有管网rq_all、市政rq_SZLH、庭院rq_TYLH、立管rq_LGLH、其他rq_other
-      bus.emit("setLayerVisible", { layername: "rq_SZLH", isCheck: false });
-      bus.emit("setLayerVisible", { layername: "rq_TYLH", isCheck: false });
-      bus.emit("setLayerVisible", { layername: "rq_LGLH", isCheck: false });
-      bus.emit("setLayerVisible", { layername: "rq_other", isCheck: true });
+      bus.emit('setLayerVisible', { layername: 'rq_all', isCheck: false }); //所有管网rq_all、市政rq_SZLH、庭院rq_TYLH、立管rq_LGLH、其他rq_other
+      bus.emit('setLayerVisible', { layername: 'rq_SZLH', isCheck: false });
+      bus.emit('setLayerVisible', { layername: 'rq_TYLH', isCheck: false });
+      bus.emit('setLayerVisible', { layername: 'rq_LGLH', isCheck: false });
+      bus.emit('setLayerVisible', { layername: 'rq_other', isCheck: true });
       break;
   }
 };
 
 // 风险
-const FengXianClick = (item) => {
+const FengXianClick = item => {
   let data = {
-    title: item.zb + " 风险监测",
-    comIDs: ["RQ_FengXianJianCe"],
+    title: item.zb + ' 风险监测',
+    comIDs: ['RQ_FengXianJianCe'],
   };
-  bus.emit("publicDialog", data);
+  bus.emit('publicDialog', data);
   // 传给组件数据
 
   setTimeout(() => {
-    bus.emit("getDataListFxjc", item);
+    bus.emit('getDataListFxjc', item);
   }, 500);
 };
 
 // 现场连线
-const XianChangLianXian = (item) => {
-  bus.emit("OpenRY");
+const XianChangLianXian = item => {
+  bus.emit('OpenRY');
 };
 
 watch(
@@ -832,14 +754,13 @@
 );
 //燃气超标
 const showIndexOver = () => {
-  bus.emit("removeMapDatas", AllData.xunChaLayers);
-  let key = "warning_monitor";
-  bus.emit("getGeojsonByType", {
+  bus.emit('removeMapDatas', AllData.xunChaLayers);
+  let key = 'warning_monitor';
+  bus.emit('getGeojsonByType', {
     type: key,
-    callback: (geojson) => {
-      if (!!!geojson.features.length)
-        bus.emit("setGeoJSON", { json: yanAnRQoverindex, key: "warning_monitor" });
-      bus.emit("setLayerVisible", { type: "point", layername: key, isCheck: true });
+    callback: geojson => {
+      if (!!!geojson.features.length) bus.emit('setGeoJSON', { json: yanAnRQoverindex, key: 'warning_monitor' });
+      bus.emit('setLayerVisible', { type: 'point', layername: key, isCheck: true });
     },
   });
   newfiberMapbox.map.easeTo({
@@ -849,14 +770,13 @@
 };
 //燃气告警
 const showIndexWarning = () => {
-  bus.emit("removeMapDatas", AllData.xunChaLayers);
-  let key = "warning_monitor";
-  bus.emit("getGeojsonByType", {
+  bus.emit('removeMapDatas', AllData.xunChaLayers);
+  let key = 'warning_monitor';
+  bus.emit('getGeojsonByType', {
     type: key,
-    callback: (geojson) => {
-      if (!!!geojson.features.length)
-        bus.emit("setGeoJSON", { json: yanAnWarring, key: "warning_monitor" });
-      bus.emit("setLayerVisible", { type: "point", layername: key, isCheck: true });
+    callback: geojson => {
+      if (!!!geojson.features.length) bus.emit('setGeoJSON', { json: yanAnWarring, key: 'warning_monitor' });
+      bus.emit('setLayerVisible', { type: 'point', layername: key, isCheck: true });
     },
   });
   newfiberMapbox.map.easeTo({
@@ -867,47 +787,46 @@
 onMounted(() => {
   let initeRQTimer = setInterval(() => {
     if (!newfiberMapbox) return;
-    if (!newfiberMapbox.map.getLayer("rq_pipeline_info")) return;
-    if (!newfiberMapbox.map.getLayer("sx_ya_smx_rq_point")) return;
+    if (!newfiberMapbox.map.getLayer('rq_pipeline_info')) return;
+    if (!newfiberMapbox.map.getLayer('sx_ya_smx_rq_point')) return;
     newfiberMapbox.map.easeTo({
       center: [109.488, 36.596],
       zoom: 13,
     });
     //告警点事件
-    let warningPoint = newfiberMapbox
-      .getLayers()
-      .filter((feature) => feature.newfiberId == "warning_monitor")[0];
+    let warningPoint = newfiberMapbox.getLayers().filter(feature => feature.newfiberId == 'warning_monitor')[0];
     if (warningPoint) {
-      warningPoint.on("click", (e) => {
+      warningPoint.on('click', e => {
         let popupData = e.feature.properties;
 
-        console.log("popupData---", "告警---------", popupData);
+        console.log('popupData---', '告警---------', popupData);
       });
     }
-    bus.emit("setLayerVisible", { layername: "rq_all", isCheck: true }); //所有管网rq_all、市政rq_SZLH、庭院rq_TYLH、立管rq_LGLH、其他rq_other
+    bus.emit('setLayerVisible', { layername: 'rq_all', isCheck: true }); //所有管网rq_all、市政rq_SZLH、庭院rq_TYLH、立管rq_LGLH、其他rq_other
 
     clearInterval(initeRQTimer);
   }, 100);
   initEcharts(1);
 });
 onBeforeUnmount(() => {
-  bus.emit("setLayerVisible", { layername: "rq_all", isCheck: false });
-  bus.emit("setLayerVisible", { layername: "rq_SZLH", isCheck: false });
-  bus.emit("setLayerVisible", { layername: "rq_TYLH", isCheck: false });
-  bus.emit("setLayerVisible", { layername: "rq_LGLH", isCheck: false });
-  bus.emit("setLayerVisible", { layername: "rq_other", isCheck: false });
-  bus.emit("removeMapDatas", AllData.xunChaLayers);
-  bus.emit("removeMapDatas", ["warning_monitor"]);
-  bus.emit("setLayerVisible", { layername: "warning_monitor", isCheck: false });
-  bus.emit("closeCesiumPopup");
-  if (!!newfiberMapbox.getLayerByName("rqLine")) {
-    newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName("rqLine"));
+  bus.emit('setLayerVisible', { layername: 'rq_all', isCheck: false });
+  bus.emit('setLayerVisible', { layername: 'rq_SZLH', isCheck: false });
+  bus.emit('setLayerVisible', { layername: 'rq_TYLH', isCheck: false });
+  bus.emit('setLayerVisible', { layername: 'rq_LGLH', isCheck: false });
+  bus.emit('setLayerVisible', { layername: 'rq_other', isCheck: false });
+  bus.emit('removeMapDatas', AllData.xunChaLayers);
+  bus.emit('removeMapDatas', ['warning_monitor']);
+  bus.emit('setLayerVisible', { layername: 'warning_monitor', isCheck: false });
+  bus.emit('closeCesiumPopup');
+  bus.emit('SetLayerShow', ['蓝色地图']);
+  if (!!newfiberMapbox.getLayerByName('rqLine')) {
+    newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName('rqLine'));
   }
 });
 </script>
 
 <style lang="scss" scoped>
-@import "@/assets/styles/transition_oneMap.scss";
+@import '@/assets/styles/transition_oneMap.scss';
 #ZHRQ {
   .LeftBox {
     width: 450px;
@@ -915,11 +834,7 @@
     position: absolute;
     left: 10px;
     top: 70px;
-    background: linear-gradient(
-      0deg,
-      rgba(0, 43, 67, 0.8) 0%,
-      rgba(0, 69, 108, 0.8) 100%
-    );
+    background: linear-gradient(0deg, rgba(0, 43, 67, 0.8) 0%, rgba(0, 69, 108, 0.8) 100%);
     border-radius: 6px;
     border: 1px solid #47eef3;
     box-sizing: border-box;
@@ -994,7 +909,7 @@
         width: 100%;
         height: calc(100% - 72px);
         margin-top: 10px;
-        background: url("@/assets/images/Sponge_screen/RQ/Ech.png") no-repeat center;
+        background: url('@/assets/images/Sponge_screen/RQ/Ech.png') no-repeat center;
         position: relative;
 
         .ClickDiv1 {
@@ -1052,7 +967,7 @@
           height: 42px;
           width: calc(50% - 9px);
           display: flex;
-          background: url("@/assets/images/Sponge_screen/RQ/RQ_FX.png") no-repeat center;
+          background: url('@/assets/images/Sponge_screen/RQ/RQ_FX.png') no-repeat center;
           background-size: 100% 100%;
           cursor: pointer;
 
@@ -1284,11 +1199,7 @@
     position: absolute;
     right: 10px;
     top: 70px;
-    background: linear-gradient(
-      0deg,
-      rgba(0, 43, 67, 0.8) 0%,
-      rgba(0, 69, 108, 0.8) 100%
-    );
+    background: linear-gradient(0deg, rgba(0, 43, 67, 0.8) 0%, rgba(0, 69, 108, 0.8) 100%);
     border-radius: 6px;
     border: 1px solid #47eef3;
     box-sizing: border-box;
@@ -1446,11 +1357,7 @@
     position: absolute;
     left: 520px;
     top: 110px;
-    background: linear-gradient(
-      0deg,
-      rgba(0, 43, 67, 0.8) 0%,
-      rgba(0, 69, 108, 0.8) 100%
-    );
+    background: linear-gradient(0deg, rgba(0, 43, 67, 0.8) 0%, rgba(0, 69, 108, 0.8) 100%);
     border-radius: 6px;
     border: 1px solid #47eef3;
     box-sizing: border-box;
@@ -1544,8 +1451,7 @@
     .Box_header {
       width: 100%;
       height: 43px;
-      background: url("@/assets/images/Sponge_screen/Box_HeaderBackground.png") no-repeat
-        center;
+      background: url('@/assets/images/Sponge_screen/Box_HeaderBackground.png') no-repeat center;
       background-size: cover;
       font-family: PangMenZhengDao;
       font-weight: 400;
diff --git a/src/views/oneMap/components/ZTGL.vue b/src/views/oneMap/components/ZTGL.vue
index 796f6da..f524835 100644
--- a/src/views/oneMap/components/ZTGL.vue
+++ b/src/views/oneMap/components/ZTGL.vue
@@ -18,7 +18,7 @@
 import testProjectionLabel from '@/assets/testProjectionLabel.json';
 import mapBoxVectorLayer from '@/utils/GISdocument/mapboxVectorLayer.js';
 import xtb_img from '@/assets/newImgs/xtb_img.png';
-
+import bus from '@/bus';
 const showPanel = ref(true); //面板展开收起
 // 面板内容展开收起控制
 const props = defineProps({
@@ -67,8 +67,11 @@
   }, 100);
 });
 onBeforeUnmount(() => {
-  newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName('testProjection'));
-  mapBoxVectorLayer.removeByIds(['testProjection']);
+  bus.emit('SetLayerShow', ['蓝色地图']);
+  if (newfiberMapbox.getLayerByName('testProjection')) {
+    newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName('testProjection'));
+    mapBoxVectorLayer.removeByIds(['testProjection']);
+  }
 });
 </script>
 
diff --git a/src/views/oneMap/components/chartLogging.vue b/src/views/oneMap/components/chartLogging.vue
index c9fdcc4..2ea8b4d 100644
--- a/src/views/oneMap/components/chartLogging.vue
+++ b/src/views/oneMap/components/chartLogging.vue
@@ -45,6 +45,7 @@
             color: '#fff',
           },
         },
+
         xAxis: [
           {
             type: 'category',
@@ -81,6 +82,7 @@
               },
             },
           },
+
           {
             name: props.data.yAxisName2 || '',
             inverse: false,
@@ -101,6 +103,16 @@
             },
           },
         ],
+        // 时间轴滑动选择器
+        dataZoom: [
+          {
+            show: true,
+            realtime: true,
+            start: 30,
+            end: 70,
+            xAxisIndex: [0, 1],
+          },
+        ],
         series: [
           {
             name: '降雨量(mm)',
diff --git a/src/views/oneMap/components/pipeFX.vue b/src/views/oneMap/components/pipeFX.vue
index df0894c..ea1db5e 100644
--- a/src/views/oneMap/components/pipeFX.vue
+++ b/src/views/oneMap/components/pipeFX.vue
@@ -121,6 +121,16 @@
             },
           },
         ],
+        // 时间轴滑动选择器
+        dataZoom: [
+          {
+            show: true,
+            realtime: true,
+            start: 30,
+            end: 70,
+            xAxisIndex: [0, 1],
+          },
+        ],
         series: [
           {
             name: '降雨量(mm)',
diff --git a/src/views/oneMap/components/projectDX.vue b/src/views/oneMap/components/projectDX.vue
index cecd854..ec593c1 100644
--- a/src/views/oneMap/components/projectDX.vue
+++ b/src/views/oneMap/components/projectDX.vue
@@ -93,6 +93,16 @@
             },
           },
         ],
+        // 时间轴滑动选择器
+        dataZoom: [
+          {
+            show: true,
+            realtime: true,
+            start: 30,
+            end: 70,
+            xAxisIndex: [0, 1],
+          },
+        ],
         series: [
           {
             // smooth: true, //变为曲线 默认false折线
diff --git a/src/views/oneMap/floodPrevention/FholRightBox.vue b/src/views/oneMap/floodPrevention/FholRightBox.vue
index 289c2b3..c2b55f6 100644
--- a/src/views/oneMap/floodPrevention/FholRightBox.vue
+++ b/src/views/oneMap/floodPrevention/FholRightBox.vue
@@ -108,10 +108,10 @@
   <!-- 入河排口运行监控 -->
   <div class="DischargeMonitor">
     <div class="ListBoxHeader">
-      <div class="ListBoxHeader_font">入河排口运行监控</div>
+      <div class="ListBoxHeader_font">调度统计</div>
     </div>
     <div class="JkMonitor">
-      <div class="tableHeader">
+      <!-- <div class="tableHeader">
         <span class="tableHeaderList tableList1">排口监测点</span>
         <span class="tableHeaderList tableList2">当前出流状态</span>
         <span class="tableHeaderList tableList3">流量(m³/h)</span>
@@ -125,7 +125,8 @@
             <img :src="monitor_icon" alt="" />
           </span>
         </div>
-      </Vue3SeamlessScroll>
+      </Vue3SeamlessScroll> -->
+      <dispatchEch />
     </div>
   </div>
 
@@ -146,6 +147,7 @@
 import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
 import { ref, reactive, toRefs, onMounted, onBeforeUnmount } from 'vue';
 import bus from '@/bus';
+import dispatchEch from './dispatchEch.vue';
 import monitor_icon from '@/assets/images/fhpl/monitor_icon.png';
 import bengzhantingzhi from '@/assets/images/fhpl/bengzhantingzhi.png';
 import bengzhanyunxing from '@/assets/images/fhpl/bengzhanyunxing.png';
@@ -507,110 +509,112 @@
   width: 450px;
   height: 31%;
   margin-top: 3px;
+  // background: red;
   .JkMonitor {
     margin: 5px auto;
     width: 430px;
     height: calc(100% - 50px);
-    .tableHeader {
-      width: 100%;
-      height: 34px;
-      background: linear-gradient(0deg, #00fbffa3 0%, #00fbff00 100%);
-      border-radius: 2px;
-      border: 1px solid #74dde1;
-      display: flex;
+    // .tableHeader {
+    //   width: 100%;
+    //   height: 34px;
+    //   background: linear-gradient(0deg, #00fbffa3 0%, #00fbff00 100%);
+    //   border-radius: 2px;
+    //   border: 1px solid #74dde1;
+    //   display: flex;
 
-      .tableHeaderList {
-        font-family: Source Han Sans CN;
-        font-weight: 400;
-        font-size: 14px;
-        color: #ffffff;
-        height: 34px;
-        line-height: 34px;
-        // padding-left: 5px;
-        // text-align: center;
-      }
-      .tableList1 {
-        width: 35%;
-        padding-left: 15px;
-      }
-      .tableList2 {
-        width: 30%;
-        text-align: center;
-      }
-      .tableList3 {
-        width: 20%;
-        text-align: center;
-      }
-    }
-    .tableBody {
-      width: 100%;
-      height: calc(100% - 35px);
-      overflow: hidden;
+    //   .tableHeaderList {
+    //     font-family: Source Han Sans CN;
+    //     font-weight: 400;
+    //     font-size: 14px;
+    //     color: #ffffff;
+    //     height: 34px;
+    //     line-height: 34px;
+    //     // padding-left: 5px;
+    //     // text-align: center;
+    //   }
+    //   .tableList1 {
+    //     width: 35%;
+    //     padding-left: 15px;
+    //   }
+    //   .tableList2 {
+    //     width: 30%;
+    //     text-align: center;
+    //   }
+    //   .tableList3 {
+    //     width: 20%;
+    //     text-align: center;
+    //   }
+    // }
+    // .tableBody {
+    //   width: 100%;
+    //   height: calc(100% - 35px);
+    //   overflow: hidden;
 
-      .tableBodyList {
-        height: 34px;
-        line-height: 34px;
-        width: 100%;
-        display: flex;
-        /* 选择偶数行 */
-        &:nth-child(even) {
-          background: linear-gradient(0deg, #008599 0%, #08596d 100%);
-        }
+    //   .tableBodyList {
+    //     height: 34px;
+    //     line-height: 34px;
+    //     width: 100%;
+    //     display: flex;
+    //     /* 选择偶数行 */
+    //     &:nth-child(even) {
+    //       background: linear-gradient(0deg, #008599 0%, #08596d 100%);
+    //     }
 
-        .tableBodyList_span1 {
-          font-family: Source Han Sans CN;
-          font-weight: 400;
-          font-size: 14px;
-          color: #ffffff;
-          height: 34px;
-          line-height: 34px;
-          // text-align: center;
-          width: 35%;
-          padding-left: 15px;
-          // background: red;
-          // padding-left: 5px;
-        }
-        .tableBodyList_span2 {
-          font-family: Source Han Sans CN;
-          font-weight: 400;
-          font-size: 14px;
-          color: #ffffff;
-          height: 34px;
-          line-height: 34px;
-          text-align: center;
-          width: 30%;
-        }
-        .tableBodyList_span3 {
-          font-family: Source Han Sans CN;
-          font-weight: 400;
-          font-size: 14px;
-          color: #ffffff;
-          height: 34px;
-          line-height: 34px;
-          text-align: center;
-          width: 20%;
-        }
+    //     .tableBodyList_span1 {
+    //       font-family: Source Han Sans CN;
+    //       font-weight: 400;
+    //       font-size: 14px;
+    //       color: #ffffff;
+    //       height: 34px;
+    //       line-height: 34px;
+    //       // text-align: center;
+    //       width: 35%;
+    //       padding-left: 15px;
+    //       // background: red;
+    //       // padding-left: 5px;
+    //     }
+    //     .tableBodyList_span2 {
+    //       font-family: Source Han Sans CN;
+    //       font-weight: 400;
+    //       font-size: 14px;
+    //       color: #ffffff;
+    //       height: 34px;
+    //       line-height: 34px;
+    //       text-align: center;
+    //       width: 30%;
+    //     }
+    //     .tableBodyList_span3 {
+    //       font-family: Source Han Sans CN;
+    //       font-weight: 400;
+    //       font-size: 14px;
+    //       color: #ffffff;
+    //       height: 34px;
+    //       line-height: 34px;
+    //       text-align: center;
+    //       width: 20%;
+    //     }
 
-        .tableBodyList_span4 {
-          font-family: Source Han Sans CN;
-          font-weight: 400;
-          font-size: 14px;
-          color: #ffffff;
-          height: 34px;
-          line-height: 45px;
-          text-align: center;
-          width: 15%;
-          cursor: pointer;
-          // background: red;
-        }
-        .rad {
-          color: #ff3737;
-        }
-        .green {
-          color: #0fcd22;
-        }
-      }
-    }
+    //     .tableBodyList_span4 {
+    //       font-family: Source Han Sans CN;
+    //       font-weight: 400;
+    //       font-size: 14px;
+    //       color: #ffffff;
+    //       height: 34px;
+    //       line-height: 45px;
+    //       text-align: center;
+    //       width: 15%;
+    //       cursor: pointer;
+    //       // background: red;
+    //     }
+    //     .rad {
+    //       color: #ff3737;
+    //     }
+    //     .green {
+    //       color: #0fcd22;
+    //     }
+    //   }
+    // }
+    // background: yellow;
   }
 }
 .ListBoxHeader {
diff --git a/src/views/oneMap/floodPrevention/FhplLeftBox.vue b/src/views/oneMap/floodPrevention/FhplLeftBox.vue
index 7d7f27a..6495375 100644
--- a/src/views/oneMap/floodPrevention/FhplLeftBox.vue
+++ b/src/views/oneMap/floodPrevention/FhplLeftBox.vue
@@ -17,7 +17,7 @@
     <div class="qxyb">
       <div class="info flex flex-justcontent-start">
         <div class="weight">气象预报</div>
-        <div class="text">未来24h中心城区累计降雨达12mm</div>
+        <div class="text">未来24h中心城区累计降雨达19.8mm</div>
       </div>
       <div class="rainChartInfo flex">
         <div class="square"></div>
@@ -278,15 +278,28 @@
 
 // 气象假数据
 function getRainTrend() {
-  monitorData.value.history = ['0.50', '0.00'];
-  monitorData.value.forecast = ['0.50', '0.00'];
+  monitorData.value.history = ['0.50', '0.20', '0.30', '0.40', '0.60', '0.20', '0.40'];
+  monitorData.value.forecast = ['0.50', '0.80', '0.50', '0.40', '0.30', '0.60', '0.70', '2.8', '1.0', '0.80', '0.30'];
   monitorData.value.totalData = [...monitorData.value.history, ...monitorData.value.forecast];
   monitorData.value.dateRange = [
-    '2024-10-09 16:00:00',
-    '2024-10-09 19:00:00',
-    '2024-10-09 22:00:00',
-    '2024-10-10 01:00:00',
-    '2024-10-10 04:00:00',
+    '2024-10-12 13:00:00',
+    '2024-10-12 13:30:00',
+    '2024-10-12 14:00:00',
+    '2024-10-12 14:30:00',
+    '2024-10-12 15:00:00',
+    '2024-10-12 15:30:00',
+    '2024-10-12 16:00:00',
+    '2024-10-12 16:30:00',
+    '2024-10-12 17:00:00',
+    '2024-10-12 17:30:00',
+    '2024-10-12 18:00:00',
+    '2024-10-12 18:30:00',
+    '2024-10-12 19:00:00',
+    '2024-10-12 19:30:00',
+    '2024-10-12 20:00:00',
+    '2024-10-12 20:30:00',
+    '2024-10-12 21:00:00',
+    '2024-10-12 21:30:00',
   ];
   console.log(monitorData.value, '111111111');
 

diff --git a/package.json b/package.json
index 39861ad..e784d82 100644
--- a/package.json
+++ b/package.json
@@ -72,4 +72,4 @@
     "vite-plugin-svg-icons": "2.0.1",
     "vite-plugin-vue-setup-extend": "0.4.0"
   }
-}
+}
\ No newline at end of file
diff --git a/src/assets/images/fhpl/sqjca.png b/src/assets/images/fhpl/sqjca.png
index 0eb531c..00e619c 100644
--- a/src/assets/images/fhpl/sqjca.png
+++ b/src/assets/images/fhpl/sqjca.png
Binary files differ
diff --git a/src/views/oneMap/ConstructionEvaluation/JSPGLeftBox.vue b/src/views/oneMap/ConstructionEvaluation/JSPGLeftBox.vue
index 2a7ff07..3ee47c4 100644
--- a/src/views/oneMap/ConstructionEvaluation/JSPGLeftBox.vue
+++ b/src/views/oneMap/ConstructionEvaluation/JSPGLeftBox.vue
@@ -65,8 +65,9 @@
   </div>
   <!-- 污水收集处理 -->
   <div class="Sewagecollection">
-    <div class="ListBoxHeader" @click="showSewageFectory">
-      <div class="ListBoxHeader_font">污水收集处理</div>
+    <div class="topVehicl flex">
+      <div class="icon"></div>
+      <div class="name">污水收集处理</div>
     </div>
     <div class="wssjEch"></div>
   </div>
@@ -293,7 +294,31 @@
 .Sewagecollection {
   width: 450px;
   height: 25%;
-  // background: yellowgreen;
+
+  .topVehicl {
+    font-family: Source Han Sans CN;
+    font-weight: bold;
+    font-size: 14px;
+    color: #ebfeff;
+    align-items: center;
+    height: 30px;
+    // background: teal;
+    .icon {
+      position: relative;
+      top: -1px;
+      width: 25px;
+      height: 25px;
+      background: url('@/assets/newImgs/xtb_img.png') no-repeat;
+    }
+
+    .name {
+      background: linear-gradient(0deg, rgba(0, 242, 255, 0.5) 0%, rgba(0, 242, 255, 0) 100%);
+      padding: 0px 3px;
+      height: 10px;
+      line-height: 0px;
+      margin-top: 6px;
+    }
+  }
   .wssjEch {
     margin: 5px auto;
     width: 420px;
diff --git a/src/views/oneMap/ConstructionEvaluation/JSPGRightBox.vue b/src/views/oneMap/ConstructionEvaluation/JSPGRightBox.vue
index dbeddc8..3f696aa 100644
--- a/src/views/oneMap/ConstructionEvaluation/JSPGRightBox.vue
+++ b/src/views/oneMap/ConstructionEvaluation/JSPGRightBox.vue
@@ -2,7 +2,7 @@
   <!-- 绩效管理 -->
   <div class="management">
     <div class="ListBoxHeader">
-      <div class="ListBoxHeader_font">绩效管理</div>
+      <div class="ListBoxHeader_font">管理绩效</div>
     </div>
     <!-- 年份切换 -->
     <div class="subRightBox">
diff --git a/src/views/oneMap/FloodStuationReview/sqhgBottomBox.vue b/src/views/oneMap/FloodStuationReview/sqhgBottomBox.vue
index 53d38bb..d178c59 100644
--- a/src/views/oneMap/FloodStuationReview/sqhgBottomBox.vue
+++ b/src/views/oneMap/FloodStuationReview/sqhgBottomBox.vue
@@ -117,8 +117,8 @@
 const ranLeng = [
   [
     { value: '0-0.2', color: 'rgba(7, 213, 118, 0)' },
-    { value: '0.2-5', color: 'rgba(7, 213, 118, 1)' },
-    { value: '5-25', color: 'rgba(38, 129, 240,1)' },
+    { value: '0.2-5', color: 'rgba(38, 129, 240,1)' },
+    { value: '5-25', color: 'rgb(222, 230, 0)' },
     { value: '>25', color: 'rgba(255, 26, 26, 1)' },
   ],
   [
@@ -235,14 +235,18 @@
   stepNum.value = 0;
   hgEngPlay.value = false;
   showRainLegend.value = false;
-  // NewFiberMapUtils.disposeRainfall('')
-  // newfiberMap.setLayersVisible(["krigingImage"],false)
+  // newfiberMapbox.map.removeLayer('canvas-layer0');
+  // newfiberMapbox.map.removeSource('canvas-source0');
   hoursList.value.activeIndex = stepNum.value;
   clearInterval(runDayInterval.value);
   if (runDayInterval.value) {
     runDayInterval.value = null;
     refresh.value = Math.random();
   }
+  // if (newfiberMapbox.map.getLayer('canvas-layer0')) {
+  //   newfiberMapbox.map.removeLayer('canvas-layer0');
+  //   newfiberMapbox.map.removeSource('canvas-source0');
+  // }
 }
 
 function changeChartData() {
@@ -375,10 +379,10 @@
 ];*/
 let colorScale = [
   { value: '0', color: 'rgba(7, 213, 118, 0)' },
-  { value: '0.2', color: 'rgba(7, 213, 118, 1)' },
-  { value: '5', color: 'rgba(38, 129, 240,1)' },
-  { value: '25', color: 'rgba(255, 26, 26, 1)' },
-  { value: '250', color: 'rgba(255, 26, 26, 1)' },
+  { value: '0.2', color: 'rgb(38, 129, 240)' },
+  { value: '5', color: 'rgb(222, 230, 0)' },
+  { value: '25', color: 'rgb(255, 26, 26)' },
+  { value: '250', color: 'rgb(255, 26, 26)' },
 ];
 let imageFiles = [];
 let canvas = [];
diff --git a/src/views/oneMap/FloodStuationReview/xqhgLeftBox.vue b/src/views/oneMap/FloodStuationReview/xqhgLeftBox.vue
index 14170d1..c43cb7b 100644
--- a/src/views/oneMap/FloodStuationReview/xqhgLeftBox.vue
+++ b/src/views/oneMap/FloodStuationReview/xqhgLeftBox.vue
@@ -122,7 +122,7 @@
         background: linear-gradient(0deg, rgba(0, 242, 255, 0.5) 0%, rgba(0, 242, 255, 0) 100%);
         height: 10px;
         line-height: 0px;
-        margin-top: 10px;
+        margin-top: 12px;
       }
     }
     .ScheduEcharts {
@@ -161,7 +161,7 @@
       background: linear-gradient(0deg, rgba(0, 242, 255, 0.5) 0%, rgba(0, 242, 255, 0) 100%);
       height: 10px;
       line-height: 0px;
-      margin-top: 10px;
+      margin-top: 12px;
     }
   }
   .VehiclEcharts {
@@ -196,7 +196,7 @@
       background: linear-gradient(0deg, rgba(0, 242, 255, 0.5) 0%, rgba(0, 242, 255, 0) 100%);
       height: 10px;
       line-height: 0px;
-      margin-top: 10px;
+      margin-top: 12px;
     }
   }
   .MaterialEcharts {
diff --git a/src/views/oneMap/LayerControl/LayerControl.vue b/src/views/oneMap/LayerControl/LayerControl.vue
index 37d0576..cc8e024 100644
--- a/src/views/oneMap/LayerControl/LayerControl.vue
+++ b/src/views/oneMap/LayerControl/LayerControl.vue
@@ -30,29 +30,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 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({
   // 图层控制面板的渲染数据
   /**图层面板数据字段说明
@@ -69,72 +70,90 @@
       Show: true,
       children: [
         {
-          layerName: "中心城区",
-          layerKey: "centerCity",
-          layerIcon: requireTuChengImg("zhongxinchengqu"),
+          layerName: '蓝色地图',
+          layerKey: 'blackMap',
+          layerIcon: requireTuChengImg('zhongxinchengqu'),
+          layerVisible: false,
+        },
+        {
+          layerName: '白色地图',
+          layerKey: 'whiteMap',
+          layerIcon: requireTuChengImg('zhongxinchengqu'),
+          layerVisible: false,
+        },
+        {
+          layerName: '影像地图',
+          layerKey: 'imageMap',
+          layerIcon: requireTuChengImg('zhongxinchengqu'),
+          layerVisible: false,
+        },
+        {
+          layerName: '中心城区',
+          layerKey: 'centerCity',
+          layerIcon: requireTuChengImg('zhongxinchengqu'),
           layerVisible: false,
           dynamicLineData: yanAnCenterCity,
         },
         {
-          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,
         },
@@ -145,38 +164,38 @@
       Show: true,
       children: [
         {
-          layerName: "燃气管网",
-          layerKey: "rq_all",
+          layerName: '燃气管网',
+          layerKey: 'rq_all',
           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,
         },
@@ -187,22 +206,22 @@
       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,
         },
@@ -213,8 +232,8 @@
         //   layerVisible: false,
         // },
         {
-          layerName: "雨水泵站",
-          layerKey: "YSBZ",
+          layerName: '雨水泵站',
+          layerKey: 'YSBZ',
           layerIcon: null,
           layerVisible: false,
           data: yanAnYSBZ,
@@ -226,14 +245,14 @@
       Show: true,
       children: [
         {
-          layerName: "污水分区",
-          layerKey: "sewageArea",
+          layerName: '污水分区',
+          layerKey: 'sewageArea',
           layerIcon: null,
           layerVisible: false,
         },
         {
-          layerName: "污水管网",
-          layerKey: "wsLine1",
+          layerName: '污水管网',
+          layerKey: 'wsLine1',
           layerIcon: null,
           layerVisible: false,
         },
@@ -250,8 +269,8 @@
         //   layerVisible: false,
         // },
         {
-          layerName: "污水处理厂",
-          layerKey: "WSCLC",
+          layerName: '污水处理厂',
+          layerKey: 'WSCLC',
           layerIcon: null,
           layerVisible: false,
           data: yanAnWSCLC,
@@ -263,36 +282,36 @@
       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,
@@ -307,10 +326,10 @@
     .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,
@@ -319,37 +338,79 @@
 watch(
   () => props.ShowTuCheng,
   (newValue, oldValue) => {
-    console.log("ShowTuCheng变化了", newValue, oldValue);
+    console.log('ShowTuCheng变化了', newValue, oldValue);
   },
   { immediate: true, deep: true }
 );
 
-const layerClick = (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 });
+  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 => {
+      oldIds.push(layer.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]));
+    });
+    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');
+    let newMapStyle;
+    let oldMapStyle = newfiberMapbox.map.getStyle();
+    let oldIds = [];
+    oldMapStyle.layers.forEach(layer => {
+      oldIds.push(layer.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]));
+    });
+    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.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.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, // 持续时间，延时
@@ -360,29 +421,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, // 持续时间，延时
@@ -393,22 +454,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, // 持续时间，延时
@@ -419,29 +480,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) : '';
       });
     });
   });
@@ -449,17 +510,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>
 
@@ -470,7 +531,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;
@@ -486,7 +547,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;
diff --git a/src/views/oneMap/components/FXHG.vue b/src/views/oneMap/components/FXHG.vue
index 8924475..44e9c21 100644
--- a/src/views/oneMap/components/FXHG.vue
+++ b/src/views/oneMap/components/FXHG.vue
@@ -40,6 +40,7 @@
   showPanel.value = true;
   showBottom.value = false;
   curType.value = true;
+  bus.emit('SetLayerShow', ['蓝色地图']);
   if (newfiberMapbox.map.getLayer('dynamicRoute')) {
     newfiberMapbox.map.removeLayer('dynamicRoute');
     newfiberMapbox.map.removeLayer('dynamicRoute_Symbol');
@@ -68,6 +69,7 @@
 
   let initePSTimer = setInterval(() => {
     if (!newfiberMapbox) return;
+    bus.emit('SetLayerShow', ['白色地图']);
     bus.emit('setLayerVisible', { layername: 'ysLine1', isCheck: true });
     //bus.emit('setLayerVisible', { layername: 'wsLine1', isCheck: true });
     clearInterval(initePSTimer);
diff --git a/src/views/oneMap/components/ZHHM.vue b/src/views/oneMap/components/ZHHM.vue
index d68bdc5..1f29507 100644
--- a/src/views/oneMap/components/ZHHM.vue
+++ b/src/views/oneMap/components/ZHHM.vue
@@ -648,6 +648,7 @@
     zoom: 12,
     pitch: 55,
   });
+  bus.emit('SetLayerShow', ['蓝色地图']);
   // 先清空
   bus.emit('clearAllLayer');
   let removedLayer = ['HMJZYSQ', 'HMXGYLD', 'HMXDLGC', 'HMXSX', 'GWPCYXF'];
diff --git a/src/views/oneMap/components/ZHHM_JCFX.vue b/src/views/oneMap/components/ZHHM_JCFX.vue
index c420911..42e81e6 100644
--- a/src/views/oneMap/components/ZHHM_JCFX.vue
+++ b/src/views/oneMap/components/ZHHM_JCFX.vue
@@ -411,6 +411,7 @@
 });
 onBeforeUnmount(() => {
   bus.emit('clearAllLayer');
+  bus.emit('SetLayerShow', ['蓝色地图']);
   let removedLayer = ['HMJZYSQ', 'HMXGYLD', 'HMXDLGC', 'HMXSX', 'GWPCYXF'];
   removedLayer.forEach(layer => {
     bus.emit('setLayerVisible', { layername: layer, isCheck: false });
diff --git a/src/views/oneMap/components/ZHHM_JSPG.vue b/src/views/oneMap/components/ZHHM_JSPG.vue
index 7400f1b..df2c85f 100644
--- a/src/views/oneMap/components/ZHHM_JSPG.vue
+++ b/src/views/oneMap/components/ZHHM_JSPG.vue
@@ -53,6 +53,7 @@
 };
 
 onMounted(() => {
+  bus.emit('SetLayerShow', ['蓝色地图']);
   newfiberMapbox.map.easeTo({
     center: [109.488, 36.596],
     zoom: 13,
diff --git a/src/views/oneMap/components/ZHPS.vue b/src/views/oneMap/components/ZHPS.vue
index 7ce8bb0..f09ddbc 100644
--- a/src/views/oneMap/components/ZHPS.vue
+++ b/src/views/oneMap/components/ZHPS.vue
@@ -43,6 +43,7 @@
   });
 });
 onBeforeUnmount(() => {
+  bus.emit('SetLayerShow', ['蓝色地图']);
   // bus.emit('setLayerVisible', { layername: 'ysLine1', isCheck: false });
   // bus.emit('setLayerVisible', { layername: 'wsLine1', isCheck: false });
 });
diff --git a/src/views/oneMap/components/ZHRQ.vue b/src/views/oneMap/components/ZHRQ.vue
index 40a70cc..493c201 100644
--- a/src/views/oneMap/components/ZHRQ.vue
+++ b/src/views/oneMap/components/ZHRQ.vue
@@ -1,31 +1,17 @@
 <template>
   <div id="ZHRQ">
-    <div
-      :class="[
-        'LeftBox',
-        'animate__animated',
-        showPanel ? 'animate__fadeOutLeft' : 'animate__fadeInLeft',
-      ]"
-    >
+    <div :class="['LeftBox', 'animate__animated', showPanel ? 'animate__fadeOutLeft' : 'animate__fadeInLeft']">
       <div class="ComBox LeftBox1_1">
         <div class="Box_header">管道风险评估</div>
         <div class="Box_Body">
           <div class="TJListBox">
             <div class="TJList TJList_RQ" @click="TuChengClick(0)">
-              <img
-                class="TJListImg"
-                src="@/assets/images/Sponge_screen/RQ/RQ_RQ.png"
-                alt=""
-              />
+              <img class="TJListImg" src="@/assets/images/Sponge_screen/RQ/RQ_RQ.png" alt="" />
               <span class="TJListName">燃气管道</span>
               <span class="TJListValue">4549km</span>
             </div>
             <div class="TJList TJList_GZ">
-              <img
-                class="TJListImg"
-                src="@/assets/images/Sponge_screen/RQ/RQ_GZ.png"
-                alt=""
-              />
+              <img class="TJListImg" src="@/assets/images/Sponge_screen/RQ/RQ_GZ.png" alt="" />
               <span class="TJListName">需改造</span>
               <span class="TJListValue">1922km</span>
             </div>
@@ -71,9 +57,7 @@
             </div>
             <div class="tableBody">
               <div class="tableBodyList" v-for="item in AllData.FXJCData">
-                <span class="tableBodyList_span1" @click="FengXianClick(item)">{{
-                  item.zb
-                }}</span>
+                <span class="tableBodyList_span1" @click="FengXianClick(item)">{{ item.zb }}</span>
                 <span class="tableBodyList_span2" @click="FengXianClick(item)"
                   >{{ item.sz }}
                   <el-icon v-if="item.szzt" color="lime" size="14"><Top /> </el-icon>
@@ -81,11 +65,9 @@
                     <Bottom />
                   </el-icon>
                 </span>
-                <span
-                  class="tableBodyList_span3"
-                  :class="item.zt == 0 ? 'YJClass' : ''"
-                  >{{ item.zt == 0 ? "预警" : "正常" }}</span
-                >
+                <span class="tableBodyList_span3" :class="item.zt == 0 ? 'YJClass' : ''">{{
+                  item.zt == 0 ? '预警' : '正常'
+                }}</span>
                 <span class="tableBodyList_span4" @click="PaiFa(item)">派发</span>
               </div>
             </div>
@@ -110,13 +92,7 @@
         </div>
       </div>
     </div>
-    <div
-      :class="[
-        'RightBox',
-        'animate__animated',
-        showPanel ? 'animate__fadeOutRight' : 'animate__fadeInRight',
-      ]"
-    >
+    <div :class="['RightBox', 'animate__animated', showPanel ? 'animate__fadeOutRight' : 'animate__fadeInRight']">
       <div class="ComBox RightBox1_1">
         <div class="Box_header">辅助决策</div>
         <div class="Box_Body">
@@ -138,16 +114,10 @@
               <span class="JCListBox_List_value color_red">{{ item.yp }}</span>
             </div>
             <div class="JCListBox_List JCListBox_List_BTN">
-              <el-button
-                style="background: #03b6a0; color: white; border: none"
-                size="small"
-                @click="GongDanPaiFa(item)"
+              <el-button style="background: #03b6a0; color: white; border: none" size="small" @click="GongDanPaiFa(item)"
                 >工单派发</el-button
               >
-              <el-button
-                style="background: #03b6a0; color: white; border: none"
-                size="small"
-                @click="XianChangLianXian(item)"
+              <el-button style="background: #03b6a0; color: white; border: none" size="small" @click="XianChangLianXian(item)"
                 >现场联线</el-button
               >
             </div>
@@ -158,18 +128,12 @@
         <div class="Box_header">巡查反馈</div>
         <div class="Box_Body">
           <div class="FK_headerBox">
-            <div class="FK_headerBox_list" @click="dealOrNoDeal(1)">
-              <span class="FK_headerBox_list_colorBox1"></span> 未处理
-            </div>
-            <div class="FK_headerBox_list" @click="dealOrNoDeal(2)">
-              <span class="FK_headerBox_list_colorBox2"></span> 已处理
-            </div>
+            <div class="FK_headerBox_list" @click="dealOrNoDeal(1)"><span class="FK_headerBox_list_colorBox1"></span> 未处理</div>
+            <div class="FK_headerBox_list" @click="dealOrNoDeal(2)"><span class="FK_headerBox_list_colorBox2"></span> 已处理</div>
           </div>
           <div class="FK_bodyBox">
             <div class="FK_bodyBox_list" v-for="item in AllData.XCFKData">
-              <span class="FK_bodyBox_list_label" @click="XunChaFanKui(item)">{{
-                item.name
-              }}</span>
+              <span class="FK_bodyBox_list_label" @click="XunChaFanKui(item)">{{ item.name }}</span>
               <div class="FK_BigBox">
                 <div class="FK_CenBox1" :style="getWidth(item, 1)">{{ item.num1 }}</div>
                 <div class="FK_CenBox2" :style="getWidth(item, 2)">{{ item.num2 }}</div>
@@ -179,13 +143,7 @@
         </div>
       </div>
     </div>
-    <div
-      :class="[
-        'TopBox',
-        'animate__animated',
-        showPanel ? 'animate__fadeOutUp' : 'animate__fadeInDown',
-      ]"
-    >
+    <div :class="['TopBox', 'animate__animated', showPanel ? 'animate__fadeOutUp' : 'animate__fadeInDown']">
       <div class="TopTableHeader">
         <span class="TopTableListSpan TopTableListSpan1">时间</span>
         <span class="TopTableListSpan TopTableListSpan2">事件明细</span>
@@ -195,27 +153,15 @@
         <span class="TopTableListSpan TopTableListSpan6">督办</span>
       </div>
       <!-- <div class="TopTableBody"> -->
-      <Vue3SeamlessScroll
-        :list="AllData.TopTableData"
-        :singleHeight="34"
-        :hover="true"
-        class="TopTableBody"
-      >
+      <Vue3SeamlessScroll :list="AllData.TopTableData" :singleHeight="34" :hover="true" class="TopTableBody">
         <div class="TopTableBody_list" v-for="item in AllData.TopTableData">
           <span class="TopTableListSpan TopTableListSpan1">{{ item.sj }}</span>
           <span class="TopTableListSpan TopTableListSpan2">{{ item.mx }}</span>
           <span class="TopTableListSpan TopTableListSpan3">{{ item.dd }}</span>
-          <span class="TopTableListSpan TopTableListSpan4">{{
-            item.zt == 0 ? "未处理" : "已处理"
-          }}</span>
+          <span class="TopTableListSpan TopTableListSpan4">{{ item.zt == 0 ? '未处理' : '已处理' }}</span>
           <span class="TopTableListSpan TopTableListSpan5">{{ item.dw }}</span>
           <span class="TopTableListSpan TopTableListSpan6">
-            <img
-              class="TopTableListSpanImg2"
-              src="@/assets/images/Sponge_screen/RQ/RQ_XX.png"
-              alt=""
-              @click="PaiFa(item)"
-            />
+            <img class="TopTableListSpanImg2" src="@/assets/images/Sponge_screen/RQ/RQ_XX.png" alt="" @click="PaiFa(item)" />
             <img
               class="TopTableListSpanImg"
               src="@/assets/images/Sponge_screen/RQ/RQ_SP.png"
@@ -231,49 +177,49 @@
 </template>
 
 <script setup name="ZHRQ">
-import { ref, reactive, toRefs, onMounted, onBeforeUnmount, nextTick } from "vue";
+import { ref, reactive, toRefs, onMounted, onBeforeUnmount, nextTick } from 'vue';
 
-import * as echarts from "echarts";
-import bus from "@/bus";
-import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
-import sheBeiLost from "@/assets/sheBeiLost.json";
-import xiaXian from "@/assets/xiaXian.json";
-import yiBian from "@/assets/yiBian.json";
-import zaWuDuiFang from "@/assets/zaWuDuiFang.json";
-import rq_QiTa from "@/assets/rq_QiTa.json";
-import no_sheBeiLost from "@/assets/no_sheBeiLost.json";
-import no_xiaXian from "@/assets/no_xiaXian.json";
-import no_yiBian from "@/assets/no_yiBian.json";
-import no_zaWuDuiFang from "@/assets/no_zaWuDuiFang.json";
-import no_rq_QiTa from "@/assets/no_rq_QiTa.json";
-import yanAnRQoverindex from "@/assets/yanAnRQoverindex.json";
-import yanAnWarring from "@/assets/yanAnWarring.json";
+import * as echarts from 'echarts';
+import bus from '@/bus';
+import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
+import sheBeiLost from '@/assets/sheBeiLost.json';
+import xiaXian from '@/assets/xiaXian.json';
+import yiBian from '@/assets/yiBian.json';
+import zaWuDuiFang from '@/assets/zaWuDuiFang.json';
+import rq_QiTa from '@/assets/rq_QiTa.json';
+import no_sheBeiLost from '@/assets/no_sheBeiLost.json';
+import no_xiaXian from '@/assets/no_xiaXian.json';
+import no_yiBian from '@/assets/no_yiBian.json';
+import no_zaWuDuiFang from '@/assets/no_zaWuDuiFang.json';
+import no_rq_QiTa from '@/assets/no_rq_QiTa.json';
+import yanAnRQoverindex from '@/assets/yanAnRQoverindex.json';
+import yanAnWarring from '@/assets/yanAnWarring.json';
 
 const AllData = reactive({
   xunChaStatic: null,
   xunChaLayers: [
-    "alreadyDeal_DF",
-    "alreadyDeal_DS",
-    "alreadyDeal_XX",
-    "alreadyDeal_YB",
-    "alreadyDeal_QT",
-    "noDeal_DF",
-    "noDeal_DS",
-    "noDeall_XX",
-    "noDeal_YB",
-    "noDeal_QT",
+    'alreadyDeal_DF',
+    'alreadyDeal_DS',
+    'alreadyDeal_XX',
+    'alreadyDeal_YB',
+    'alreadyDeal_QT',
+    'noDeal_DF',
+    'noDeal_DS',
+    'noDeall_XX',
+    'noDeal_YB',
+    'noDeal_QT',
   ],
   ChangeData: [
     {
-      name: "枣园",
+      name: '枣园',
       id: 1,
     },
     {
-      name: "杨家湾",
+      name: '杨家湾',
       id: 2,
     },
     {
-      name: "丰富川",
+      name: '丰富川',
       id: 3,
     },
   ],
@@ -281,38 +227,38 @@
   // 风险监测
   FXJCData: [
     {
-      zb: "甲烷浓度",
-      sz: "3%",
+      zb: '甲烷浓度',
+      sz: '3%',
       szzt: true,
       zt: 0, //0预警 1 正常
-      value: "JWND",
+      value: 'JWND',
     },
     {
-      zb: "压力",
-      sz: "5MPa",
+      zb: '压力',
+      sz: '5MPa',
       szzt: false,
       zt: 1, //0预警 1 正常
-      value: "YL",
+      value: 'YL',
     },
     {
-      zb: "温度",
-      sz: "25C°",
+      zb: '温度',
+      sz: '25C°',
       szzt: true,
       zt: 1, //0预警 1 正常
-      value: "WD",
+      value: 'WD',
     },
   ],
   YJChangeData: [
     {
-      name: "综合",
+      name: '综合',
       id: 1,
     },
     {
-      name: "压力",
+      name: '压力',
       id: 2,
     },
     {
-      name: "温度",
+      name: '温度',
       id: 3,
     },
   ],
@@ -320,51 +266,51 @@
   //辅助决策
   JCData: [
     {
-      qy: "宝塔区凤凰山街道二道街",
-      tz: "压力监测异常波动",
+      qy: '宝塔区凤凰山街道二道街',
+      tz: '压力监测异常波动',
       sj: 5,
-      yp: "设施故障",
-      value: "001", //语音识别内容编码-前段自己设置的,后期项目有接口就直接替换数据唯一id
+      yp: '设施故障',
+      value: '001', //语音识别内容编码-前段自己设置的,后期项目有接口就直接替换数据唯一id
     },
     {
-      qy: "宝塔区凤凰山街道二道街",
-      tz: "燃气管道压力过大",
+      qy: '宝塔区凤凰山街道二道街',
+      tz: '燃气管道压力过大',
       sj: 5,
-      yp: "燃气爆管风险",
-      value: "002",
+      yp: '燃气爆管风险',
+      value: '002',
     },
     {
-      qy: "宝塔区凤凰山街道二道街",
-      tz: "高峰期流量持续降低",
+      qy: '宝塔区凤凰山街道二道街',
+      tz: '高峰期流量持续降低',
       sj: 4,
-      yp: "燃气泄漏风险",
-      value: "003",
+      yp: '燃气泄漏风险',
+      value: '003',
     },
   ],
   // 巡查反馈
   XCFKData: [
     {
-      name: "堆放杂物",
+      name: '堆放杂物',
       num1: 20,
       num2: 80,
     },
     {
-      name: "设备丢失",
+      name: '设备丢失',
       num1: 12,
       num2: 88,
     },
     {
-      name: "下陷",
+      name: '下陷',
       num1: 32,
       num2: 68,
     },
     {
-      name: "异变",
+      name: '异变',
       num1: 30,
       num2: 70,
     },
     {
-      name: "其他",
+      name: '其他',
       num1: 20,
       num2: 80,
     },
@@ -372,35 +318,35 @@
   // 顶部表格数据
   TopTableData: [
     {
-      sj: "2024-09-26 10:00:29",
-      mx: "燃气常规检查发现泄漏",
-      dd: "宝塔区凤凰山街道二道街",
+      sj: '2024-09-26 10:00:29',
+      mx: '燃气常规检查发现泄漏',
+      dd: '宝塔区凤凰山街道二道街',
       zt: 0, //0未处理 1已处理
-      dw: "延安市燃气总公司",
+      dw: '延安市燃气总公司',
       value: null,
     },
     {
-      sj: "2024-09-27 16:10:248",
-      mx: "燃气常规检查发现泄漏",
-      dd: "宝塔区凤凰山街道二道街",
+      sj: '2024-09-27 16:10:248',
+      mx: '燃气常规检查发现泄漏',
+      dd: '宝塔区凤凰山街道二道街',
       zt: 0, //0未处理 1已处理
-      dw: "延安市燃气总公司",
+      dw: '延安市燃气总公司',
       value: null,
     },
     {
-      sj: "2024-09-26 10:00:29",
-      mx: "燃气常规检查发现泄漏",
-      dd: "宝塔区凤凰山街道二道街",
+      sj: '2024-09-26 10:00:29',
+      mx: '燃气常规检查发现泄漏',
+      dd: '宝塔区凤凰山街道二道街',
       zt: 0, //0未处理 1已处理
-      dw: "延安市燃气总公司",
+      dw: '延安市燃气总公司',
       value: null,
     },
     {
-      sj: "2024-09-27 16:10:248",
-      mx: "燃气常规检查发现泄漏",
-      dd: "宝塔区凤凰山街道二道街",
+      sj: '2024-09-27 16:10:248',
+      mx: '燃气常规检查发现泄漏',
+      dd: '宝塔区凤凰山街道二道街',
       zt: 0, //0未处理 1已处理
-      dw: "延安市燃气总公司",
+      dw: '延安市燃气总公司',
       value: null,
     },
   ],
@@ -417,7 +363,7 @@
   },
 });
 // 初始化预警统计的Echarts
-const initEcharts = (id) => {
+const initEcharts = id => {
   AllData.YJChangeIndex = id;
   let Data1 = [];
   let Data2 = [];
@@ -437,41 +383,41 @@
   if (!!myChart.value) {
     myChart.value.dispose();
   }
-  myChart.value = echarts.init(document.getElementById("YJEchartsBox"));
-  myChart.value.off("click");
+  myChart.value = echarts.init(document.getElementById('YJEchartsBox'));
+  myChart.value.off('click');
   myChart.value.setOption({
-    color: ["#18A7F2", "#1AF7AA"],
+    color: ['#18A7F2', '#1AF7AA'],
     tooltip: {
-      trigger: "axis",
+      trigger: 'axis',
     },
     grid: {
-      top: "30%",
-      left: "3%",
-      right: "4%",
-      bottom: "3%",
+      top: '30%',
+      left: '3%',
+      right: '4%',
+      bottom: '3%',
       containLabel: true,
     },
     legend: {
-      data: ["预警次数", "持续时长"],
+      data: ['预警次数', '持续时长'],
       textStyle: {
-        color: "#fffd", // 图例文字颜色
+        color: '#fffd', // 图例文字颜色
       },
-      x: "40",
-      y: "10",
+      x: '40',
+      y: '10',
     },
     xAxis: [
       {
-        type: "category",
-        data: ["今日", "09/27", "09/26", "09/25", "09/24", "09/23", "09/22"],
+        type: 'category',
+        data: ['今日', '09/27', '09/26', '09/25', '09/24', '09/23', '09/22'],
         axisPointer: {
-          type: "shadow",
+          type: 'shadow',
         },
         textStyle: {
-          color: "#EBFEFF",
+          color: '#EBFEFF',
         },
         axisLine: {
           lineStyle: {
-            color: "#EBFEFF",
+            color: '#EBFEFF',
           },
         },
         // boundaryGap: false,
@@ -479,57 +425,57 @@
     ],
     yAxis: [
       {
-        type: "value",
-        name: "预警次数",
+        type: 'value',
+        name: '预警次数',
         min: 0,
         max: 12,
         interval: 2,
         axisLabel: {
-          formatter: "{value}",
+          formatter: '{value}',
         },
         axisLine: {
           lineStyle: {
-            color: "#AAC1CF",
+            color: '#AAC1CF',
           },
         },
         splitLine: {
           lineStyle: {
             // 使用深浅的间隔色
-            color: ["#184E5A"],
+            color: ['#184E5A'],
           },
         },
       },
       {
-        type: "value",
-        name: "持续时长",
+        type: 'value',
+        name: '持续时长',
         min: 0,
         max: 30,
         interval: 5,
         axisLabel: {
-          formatter: "{value}",
+          formatter: '{value}',
         },
         axisLine: {
           lineStyle: {
-            color: "#AAC1CF",
+            color: '#AAC1CF',
           },
         },
         splitLine: {
           lineStyle: {
             // 使用深浅的间隔色
-            color: ["#184E5A"],
+            color: ['#184E5A'],
           },
         },
       },
     ],
     series: [
       {
-        name: "预警次数",
-        type: "bar",
-        barWidth: "10px",
+        name: '预警次数',
+        type: 'bar',
+        barWidth: '10px',
         showBackground: true,
         tooltip: {
           valueFormatter: function (value) {
-            return value + " 次";
+            return value + ' 次';
           },
         },
         itemStyle: {
@@ -539,12 +485,12 @@
         data: Data1,
       },
       {
-        name: "持续时长",
-        type: "line",
+        name: '持续时长',
+        type: 'line',
         yAxisIndex: 1,
         tooltip: {
           valueFormatter: function (value) {
-            return value + "min";
+            return value + 'min';
           },
         },
         areaStyle: {
@@ -552,11 +498,11 @@
           color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
             {
               offset: 0,
-              color: "#1AF7AA",
+              color: '#1AF7AA',
             },
             {
               offset: 1,
-              color: "#1AF7AA00",
+              color: '#1AF7AA00',
             },
           ]),
         },
@@ -565,19 +511,19 @@
       },
     ],
   });
-  myChart.value.on("click", (param) => {
+  myChart.value.on('click', param => {
     console.log(param);
     let data = {
-      title: "风险监测",
-      comIDs: ["RQ_FengXianJianCe"],
+      title: '风险监测',
+      comIDs: ['RQ_FengXianJianCe'],
     };
-    bus.emit("publicDialog", data);
+    bus.emit('publicDialog', data);
     let a = {
-      value: "全部",
-      endTime: "2024-10-05",
+      value: '全部',
+      endTime: '2024-10-05',
     };
     setTimeout(() => {
-      bus.emit("getDataListFxjc", a);
+      bus.emit('getDataListFxjc', a);
     }, 500);
   });
 
@@ -591,7 +537,7 @@
     i++;
     if (i == length) i = 0;
     myChart.value.dispatchAction({
-      type: "showTip",
+      type: 'showTip',
       seriesIndex: 0,
       dataIndex: i,
     });
@@ -608,14 +554,14 @@
   return `width:${widthNum}%`;
 };
 // 工单派发
-const GongDanPaiFa = (item) => {
+const GongDanPaiFa = item => {
   console.log(item);
   let data = {
     title: item.qy,
-    comIDs: ["gdpf"],
+    comIDs: ['gdpf'],
     getSiteId: item.value,
   };
-  bus.emit("publicDialog", data);
+  bus.emit('publicDialog', data);
 };
 // // 风险
 // const FengXianClick = (item) => {
@@ -627,56 +573,52 @@
 //   bus.emit("publicDialog", data);
 // };
 // 风险监测派发
-const PaiFa = (item) => {
+const PaiFa = item => {
   console.log(item);
   let data = {
-    title: "智慧外呼",
-    comIDs: ["RQ_ZhiHuiWaiHu"],
+    title: '智慧外呼',
+    comIDs: ['RQ_ZhiHuiWaiHu'],
     getSiteId: item.value,
   };
-  bus.emit("publicDialog", data);
+  bus.emit('publicDialog', data);
 };
 //巡查反馈处理、未处理
-const dealOrNoDeal = (item) => {
+const dealOrNoDeal = item => {
   AllData.xunChaStatic = item;
   newfiberMapbox.map.easeTo({
     center: [109.488, 36.596],
     zoom: 12,
     pitch: 55,
   });
-  bus.emit("removeMapDatas", ["warning_monitor"]);
+  bus.emit('removeMapDatas', ['warning_monitor']);
   if (item == 1) {
-    let removedLayer = AllData.xunChaLayers.filter((layer) => layer.includes("noDeal"));
-    let selectedLayer = AllData.xunChaLayers.filter((layer) =>
-      layer.includes("alreadyDeal")
-    );
-    bus.emit("removeMapDatas", AllData.xunChaLayers);
-    bus.emit("setGeoJSON", { json: zaWuDuiFang, key: "alreadyDeal_DF" });
-    bus.emit("setGeoJSON", { json: sheBeiLost, key: "alreadyDeal_DS" });
-    bus.emit("setGeoJSON", { json: xiaXian, key: "alreadyDeal_XX" });
-    bus.emit("setGeoJSON", { json: yiBian, key: "alreadyDeal_YB" });
-    bus.emit("setGeoJSON", { json: rq_QiTa, key: "alreadyDeal_QT" });
-    selectedLayer.forEach((layer) => {
-      bus.emit("setLayerVisible", { layername: layer, isCheck: true });
+    let removedLayer = AllData.xunChaLayers.filter(layer => layer.includes('noDeal'));
+    let selectedLayer = AllData.xunChaLayers.filter(layer => layer.includes('alreadyDeal'));
+    bus.emit('removeMapDatas', AllData.xunChaLayers);
+    bus.emit('setGeoJSON', { json: zaWuDuiFang, key: 'alreadyDeal_DF' });
+    bus.emit('setGeoJSON', { json: sheBeiLost, key: 'alreadyDeal_DS' });
+    bus.emit('setGeoJSON', { json: xiaXian, key: 'alreadyDeal_XX' });
+    bus.emit('setGeoJSON', { json: yiBian, key: 'alreadyDeal_YB' });
+    bus.emit('setGeoJSON', { json: rq_QiTa, key: 'alreadyDeal_QT' });
+    selectedLayer.forEach(layer => {
+      bus.emit('setLayerVisible', { layername: layer, isCheck: true });
     });
   } else {
-    let removedLayer = AllData.xunChaLayers.filter((layer) =>
-      layer.includes("alreadyDeal")
-    );
-    let selectedLayer = AllData.xunChaLayers.filter((layer) => layer.includes("noDeal"));
-    bus.emit("removeMapDatas", AllData.xunChaLayers);
-    bus.emit("setGeoJSON", { json: no_zaWuDuiFang, key: "onDeal_DF" });
-    bus.emit("setGeoJSON", { json: no_sheBeiLost, key: "onDeal_DS" });
-    bus.emit("setGeoJSON", { json: no_xiaXian, key: "onDeal_XX" });
-    bus.emit("setGeoJSON", { json: no_yiBian, key: "onDeal_YB" });
-    bus.emit("setGeoJSON", { json: no_rq_QiTa, key: "onDeal_QT" });
-    selectedLayer.forEach((layer) => {
-      bus.emit("setLayerVisible", { layername: layer, isCheck: true });
+    let removedLayer = AllData.xunChaLayers.filter(layer => layer.includes('alreadyDeal'));
+    let selectedLayer = AllData.xunChaLayers.filter(layer => layer.includes('noDeal'));
+    bus.emit('removeMapDatas', AllData.xunChaLayers);
+    bus.emit('setGeoJSON', { json: no_zaWuDuiFang, key: 'onDeal_DF' });
+    bus.emit('setGeoJSON', { json: no_sheBeiLost, key: 'onDeal_DS' });
+    bus.emit('setGeoJSON', { json: no_xiaXian, key: 'onDeal_XX' });
+    bus.emit('setGeoJSON', { json: no_yiBian, key: 'onDeal_YB' });
+    bus.emit('setGeoJSON', { json: no_rq_QiTa, key: 'onDeal_QT' });
+    selectedLayer.forEach(layer => {
+      bus.emit('setLayerVisible', { layername: layer, isCheck: true });
     });
   }
 };
 // 巡查反馈
-const XunChaFanKui = (item) => {
+const XunChaFanKui = item => {
   let removedLayer = [];
   let selectedLayer = [];
   newfiberMapbox.map.easeTo({
@@ -685,80 +627,60 @@
     pitch: 55,
   });
   switch (item.name) {
-    case "堆放杂物":
-      removedLayer = AllData.xunChaLayers.filter(
-        (layer) => layer != "alreadyDeal_DF" && layer != "noDeal_DF"
-      );
-      selectedLayer = AllData.xunChaLayers.filter(
-        (layer) => layer == "alreadyDeal_DF" || layer == "noDeal_DF"
-      );
-      selectedLayer.forEach((layer) => {
-        bus.emit("setLayerVisible", { layername: layer, isCheck: true });
+    case '堆放杂物':
+      removedLayer = AllData.xunChaLayers.filter(layer => layer != 'alreadyDeal_DF' && layer != 'noDeal_DF');
+      selectedLayer = AllData.xunChaLayers.filter(layer => layer == 'alreadyDeal_DF' || layer == 'noDeal_DF');
+      selectedLayer.forEach(layer => {
+        bus.emit('setLayerVisible', { layername: layer, isCheck: true });
       });
-      removedLayer.forEach((layer) => {
-        bus.emit("setLayerVisible", { layername: layer, isCheck: false });
+      removedLayer.forEach(layer => {
+        bus.emit('setLayerVisible', { layername: layer, isCheck: false });
       });
       break;
-    case "设备丢失":
-      removedLayer = AllData.xunChaLayers.filter(
-        (layer) => layer != "alreadyDeal_DS" && layer != "noDeal_DS"
-      );
-      selectedLayer = AllData.xunChaLayers.filter(
-        (layer) => layer == "alreadyDeal_DS" || layer == "noDeal_DS"
-      );
-      selectedLayer.forEach((layer) => {
-        bus.emit("setLayerVisible", { layername: layer, isCheck: true });
+    case '设备丢失':
+      removedLayer = AllData.xunChaLayers.filter(layer => layer != 'alreadyDeal_DS' && layer != 'noDeal_DS');
+      selectedLayer = AllData.xunChaLayers.filter(layer => layer == 'alreadyDeal_DS' || layer == 'noDeal_DS');
+      selectedLayer.forEach(layer => {
+        bus.emit('setLayerVisible', { layername: layer, isCheck: true });
       });
-      removedLayer.forEach((layer) => {
-        bus.emit("setLayerVisible", { layername: layer, isCheck: false });
+      removedLayer.forEach(layer => {
+        bus.emit('setLayerVisible', { layername: layer, isCheck: false });
       });
       break;
-    case "下陷":
-      removedLayer = AllData.xunChaLayers.filter(
-        (layer) => layer != "alreadyDeal_XX" && layer != "noDeal_XX"
-      );
-      selectedLayer = AllData.xunChaLayers.filter(
-        (layer) => layer == "alreadyDeal_XX" || layer == "noDeal_XX"
-      );
-      selectedLayer.forEach((layer) => {
-        bus.emit("setLayerVisible", { layername: layer, isCheck: true });
+    case '下陷':
+      removedLayer = AllData.xunChaLayers.filter(layer => layer != 'alreadyDeal_XX' && layer != 'noDeal_XX');
+      selectedLayer = AllData.xunChaLayers.filter(layer => layer == 'alreadyDeal_XX' || layer == 'noDeal_XX');
+      selectedLayer.forEach(layer => {
+        bus.emit('setLayerVisible', { layername: layer, isCheck: true });
       });
-      removedLayer.forEach((layer) => {
-        bus.emit("setLayerVisible", { layername: layer, isCheck: false });
+      removedLayer.forEach(layer => {
+        bus.emit('setLayerVisible', { layername: layer, isCheck: false });
       });
       break;
-    case "异变":
-      removedLayer = AllData.xunChaLayers.filter(
-        (layer) => layer != "alreadyDeal_YB" && layer != "noDeal_YB"
-      );
-      selectedLayer = AllData.xunChaLayers.filter(
-        (layer) => layer == "alreadyDeal_YB" || layer == "noDeal_YB"
-      );
-      selectedLayer.forEach((layer) => {
-        bus.emit("setLayerVisible", { layername: layer, isCheck: true });
+    case '异变':
+      removedLayer = AllData.xunChaLayers.filter(layer => layer != 'alreadyDeal_YB' && layer != 'noDeal_YB');
+      selectedLayer = AllData.xunChaLayers.filter(layer => layer == 'alreadyDeal_YB' || layer == 'noDeal_YB');
+      selectedLayer.forEach(layer => {
+        bus.emit('setLayerVisible', { layername: layer, isCheck: true });
       });
-      removedLayer.forEach((layer) => {
-        bus.emit("setLayerVisible", { layername: layer, isCheck: false });
+      removedLayer.forEach(layer => {
+        bus.emit('setLayerVisible', { layername: layer, isCheck: false });
       });
       break;
-    case "其他":
-      removedLayer = AllData.xunChaLayers.filter(
-        (layer) => layer != "alreadyDeal_QT" && layer != "noDeal_QT"
-      );
-      selectedLayer = AllData.xunChaLayers.filter(
-        (layer) => layer == "alreadyDeal_QT" || layer == "noDeal_QT"
-      );
-      selectedLayer.forEach((layer) => {
-        bus.emit("setLayerVisible", { layername: layer, isCheck: true });
+    case '其他':
+      removedLayer = AllData.xunChaLayers.filter(layer => layer != 'alreadyDeal_QT' && layer != 'noDeal_QT');
+      selectedLayer = AllData.xunChaLayers.filter(layer => layer == 'alreadyDeal_QT' || layer == 'noDeal_QT');
+      selectedLayer.forEach(layer => {
+        bus.emit('setLayerVisible', { layername: layer, isCheck: true });
       });
-      removedLayer.forEach((layer) => {
-        bus.emit("setLayerVisible", { layername: layer, isCheck: false });
+      removedLayer.forEach(layer => {
+        bus.emit('setLayerVisible', { layername: layer, isCheck: false });
       });
       break;
   }
 };
 // 风险评估
-const TuChengClick = (item) => {
+const TuChengClick = item => {
   newfiberMapbox.map.easeTo({
     center: [109.488, 36.596],
     zoom: 12,
@@ -766,61 +688,61 @@
   });
   switch (item) {
     case 0:
-      bus.emit("setLayerVisible", { layername: "rq_SZLH", isCheck: false });
-      bus.emit("setLayerVisible", { layername: "rq_TYLH", isCheck: false });
-      bus.emit("setLayerVisible", { layername: "rq_LGLH", isCheck: false });
-      bus.emit("setLayerVisible", { layername: "rq_other", isCheck: false });
-      bus.emit("setLayerVisible", { layername: "rq_all", isCheck: true }); //所有管网rq_all、市政rq_SZLH、庭院rq_TYLH、立管rq_LGLH、其他rq_other
+      bus.emit('setLayerVisible', { layername: 'rq_SZLH', isCheck: false });
+      bus.emit('setLayerVisible', { layername: 'rq_TYLH', isCheck: false });
+      bus.emit('setLayerVisible', { layername: 'rq_LGLH', isCheck: false });
+      bus.emit('setLayerVisible', { layername: 'rq_other', isCheck: false });
+      bus.emit('setLayerVisible', { layername: 'rq_all', isCheck: true }); //所有管网rq_all、市政rq_SZLH、庭院rq_TYLH、立管rq_LGLH、其他rq_other
       break;
     case 1:
-      bus.emit("setLayerVisible", { layername: "rq_all", isCheck: false }); //所有管网rq_all、市政rq_SZLH、庭院rq_TYLH、立管rq_LGLH、其他rq_other
-      bus.emit("setLayerVisible", { layername: "rq_SZLH", isCheck: true });
-      bus.emit("setLayerVisible", { layername: "rq_TYLH", isCheck: false });
-      bus.emit("setLayerVisible", { layername: "rq_LGLH", isCheck: false });
-      bus.emit("setLayerVisible", { layername: "rq_other", isCheck: false });
+      bus.emit('setLayerVisible', { layername: 'rq_all', isCheck: false }); //所有管网rq_all、市政rq_SZLH、庭院rq_TYLH、立管rq_LGLH、其他rq_other
+      bus.emit('setLayerVisible', { layername: 'rq_SZLH', isCheck: true });
+      bus.emit('setLayerVisible', { layername: 'rq_TYLH', isCheck: false });
+      bus.emit('setLayerVisible', { layername: 'rq_LGLH', isCheck: false });
+      bus.emit('setLayerVisible', { layername: 'rq_other', isCheck: false });
       break;
     case 2:
-      bus.emit("setLayerVisible", { layername: "rq_all", isCheck: false }); //所有管网rq_all、市政rq_SZLH、庭院rq_TYLH、立管rq_LGLH、其他rq_other
-      bus.emit("setLayerVisible", { layername: "rq_SZLH", isCheck: false });
-      bus.emit("setLayerVisible", { layername: "rq_TYLH", isCheck: true });
-      bus.emit("setLayerVisible", { layername: "rq_LGLH", isCheck: false });
-      bus.emit("setLayerVisible", { layername: "rq_other", isCheck: false });
+      bus.emit('setLayerVisible', { layername: 'rq_all', isCheck: false }); //所有管网rq_all、市政rq_SZLH、庭院rq_TYLH、立管rq_LGLH、其他rq_other
+      bus.emit('setLayerVisible', { layername: 'rq_SZLH', isCheck: false });
+      bus.emit('setLayerVisible', { layername: 'rq_TYLH', isCheck: true });
+      bus.emit('setLayerVisible', { layername: 'rq_LGLH', isCheck: false });
+      bus.emit('setLayerVisible', { layername: 'rq_other', isCheck: false });
 
       break;
     case 3:
-      bus.emit("setLayerVisible", { layername: "rq_all", isCheck: false }); //所有管网rq_all、市政rq_SZLH、庭院rq_TYLH、立管rq_LGLH、其他rq_other
-      bus.emit("setLayerVisible", { layername: "rq_SZLH", isCheck: false });
-      bus.emit("setLayerVisible", { layername: "rq_TYLH", isCheck: false });
-      bus.emit("setLayerVisible", { layername: "rq_LGLH", isCheck: true });
-      bus.emit("setLayerVisible", { layername: "rq_other", isCheck: false });
+      bus.emit('setLayerVisible', { layername: 'rq_all', isCheck: false }); //所有管网rq_all、市政rq_SZLH、庭院rq_TYLH、立管rq_LGLH、其他rq_other
+      bus.emit('setLayerVisible', { layername: 'rq_SZLH', isCheck: false });
+      bus.emit('setLayerVisible', { layername: 'rq_TYLH', isCheck: false });
+      bus.emit('setLayerVisible', { layername: 'rq_LGLH', isCheck: true });
+      bus.emit('setLayerVisible', { layername: 'rq_other', isCheck: false });
       break;
     case 4:
-      bus.emit("setLayerVisible", { layername: "rq_all", isCheck: false }); //所有管网rq_all、市政rq_SZLH、庭院rq_TYLH、立管rq_LGLH、其他rq_other
-      bus.emit("setLayerVisible", { layername: "rq_SZLH", isCheck: false });
-      bus.emit("setLayerVisible", { layername: "rq_TYLH", isCheck: false });
-      bus.emit("setLayerVisible", { layername: "rq_LGLH", isCheck: false });
-      bus.emit("setLayerVisible", { layername: "rq_other", isCheck: true });
+      bus.emit('setLayerVisible', { layername: 'rq_all', isCheck: false }); //所有管网rq_all、市政rq_SZLH、庭院rq_TYLH、立管rq_LGLH、其他rq_other
+      bus.emit('setLayerVisible', { layername: 'rq_SZLH', isCheck: false });
+      bus.emit('setLayerVisible', { layername: 'rq_TYLH', isCheck: false });
+      bus.emit('setLayerVisible', { layername: 'rq_LGLH', isCheck: false });
+      bus.emit('setLayerVisible', { layername: 'rq_other', isCheck: true });
       break;
   }
 };
 
 // 风险
-const FengXianClick = (item) => {
+const FengXianClick = item => {
   let data = {
-    title: item.zb + " 风险监测",
-    comIDs: ["RQ_FengXianJianCe"],
+    title: item.zb + ' 风险监测',
+    comIDs: ['RQ_FengXianJianCe'],
   };
-  bus.emit("publicDialog", data);
+  bus.emit('publicDialog', data);
   // 传给组件数据
 
   setTimeout(() => {
-    bus.emit("getDataListFxjc", item);
+    bus.emit('getDataListFxjc', item);
   }, 500);
 };
 
 // 现场连线
-const XianChangLianXian = (item) => {
-  bus.emit("OpenRY");
+const XianChangLianXian = item => {
+  bus.emit('OpenRY');
 };
 
 watch(
@@ -832,14 +754,13 @@
 );
 //燃气超标
 const showIndexOver = () => {
-  bus.emit("removeMapDatas", AllData.xunChaLayers);
-  let key = "warning_monitor";
-  bus.emit("getGeojsonByType", {
+  bus.emit('removeMapDatas', AllData.xunChaLayers);
+  let key = 'warning_monitor';
+  bus.emit('getGeojsonByType', {
     type: key,
-    callback: (geojson) => {
-      if (!!!geojson.features.length)
-        bus.emit("setGeoJSON", { json: yanAnRQoverindex, key: "warning_monitor" });
-      bus.emit("setLayerVisible", { type: "point", layername: key, isCheck: true });
+    callback: geojson => {
+      if (!!!geojson.features.length) bus.emit('setGeoJSON', { json: yanAnRQoverindex, key: 'warning_monitor' });
+      bus.emit('setLayerVisible', { type: 'point', layername: key, isCheck: true });
     },
   });
   newfiberMapbox.map.easeTo({
@@ -849,14 +770,13 @@
 };
 //燃气告警
 const showIndexWarning = () => {
-  bus.emit("removeMapDatas", AllData.xunChaLayers);
-  let key = "warning_monitor";
-  bus.emit("getGeojsonByType", {
+  bus.emit('removeMapDatas', AllData.xunChaLayers);
+  let key = 'warning_monitor';
+  bus.emit('getGeojsonByType', {
     type: key,
-    callback: (geojson) => {
-      if (!!!geojson.features.length)
-        bus.emit("setGeoJSON", { json: yanAnWarring, key: "warning_monitor" });
-      bus.emit("setLayerVisible", { type: "point", layername: key, isCheck: true });
+    callback: geojson => {
+      if (!!!geojson.features.length) bus.emit('setGeoJSON', { json: yanAnWarring, key: 'warning_monitor' });
+      bus.emit('setLayerVisible', { type: 'point', layername: key, isCheck: true });
     },
   });
   newfiberMapbox.map.easeTo({
@@ -867,47 +787,46 @@
 onMounted(() => {
   let initeRQTimer = setInterval(() => {
     if (!newfiberMapbox) return;
-    if (!newfiberMapbox.map.getLayer("rq_pipeline_info")) return;
-    if (!newfiberMapbox.map.getLayer("sx_ya_smx_rq_point")) return;
+    if (!newfiberMapbox.map.getLayer('rq_pipeline_info')) return;
+    if (!newfiberMapbox.map.getLayer('sx_ya_smx_rq_point')) return;
     newfiberMapbox.map.easeTo({
       center: [109.488, 36.596],
       zoom: 13,
     });
     //告警点事件
-    let warningPoint = newfiberMapbox
-      .getLayers()
-      .filter((feature) => feature.newfiberId == "warning_monitor")[0];
+    let warningPoint = newfiberMapbox.getLayers().filter(feature => feature.newfiberId == 'warning_monitor')[0];
     if (warningPoint) {
-      warningPoint.on("click", (e) => {
+      warningPoint.on('click', e => {
         let popupData = e.feature.properties;
 
-        console.log("popupData---", "告警---------", popupData);
+        console.log('popupData---', '告警---------', popupData);
       });
     }
-    bus.emit("setLayerVisible", { layername: "rq_all", isCheck: true }); //所有管网rq_all、市政rq_SZLH、庭院rq_TYLH、立管rq_LGLH、其他rq_other
+    bus.emit('setLayerVisible', { layername: 'rq_all', isCheck: true }); //所有管网rq_all、市政rq_SZLH、庭院rq_TYLH、立管rq_LGLH、其他rq_other
 
     clearInterval(initeRQTimer);
   }, 100);
   initEcharts(1);
 });
 onBeforeUnmount(() => {
-  bus.emit("setLayerVisible", { layername: "rq_all", isCheck: false });
-  bus.emit("setLayerVisible", { layername: "rq_SZLH", isCheck: false });
-  bus.emit("setLayerVisible", { layername: "rq_TYLH", isCheck: false });
-  bus.emit("setLayerVisible", { layername: "rq_LGLH", isCheck: false });
-  bus.emit("setLayerVisible", { layername: "rq_other", isCheck: false });
-  bus.emit("removeMapDatas", AllData.xunChaLayers);
-  bus.emit("removeMapDatas", ["warning_monitor"]);
-  bus.emit("setLayerVisible", { layername: "warning_monitor", isCheck: false });
-  bus.emit("closeCesiumPopup");
-  if (!!newfiberMapbox.getLayerByName("rqLine")) {
-    newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName("rqLine"));
+  bus.emit('setLayerVisible', { layername: 'rq_all', isCheck: false });
+  bus.emit('setLayerVisible', { layername: 'rq_SZLH', isCheck: false });
+  bus.emit('setLayerVisible', { layername: 'rq_TYLH', isCheck: false });
+  bus.emit('setLayerVisible', { layername: 'rq_LGLH', isCheck: false });
+  bus.emit('setLayerVisible', { layername: 'rq_other', isCheck: false });
+  bus.emit('removeMapDatas', AllData.xunChaLayers);
+  bus.emit('removeMapDatas', ['warning_monitor']);
+  bus.emit('setLayerVisible', { layername: 'warning_monitor', isCheck: false });
+  bus.emit('closeCesiumPopup');
+  bus.emit('SetLayerShow', ['蓝色地图']);
+  if (!!newfiberMapbox.getLayerByName('rqLine')) {
+    newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName('rqLine'));
   }
 });
 </script>
 
 <style lang="scss" scoped>
-@import "@/assets/styles/transition_oneMap.scss";
+@import '@/assets/styles/transition_oneMap.scss';
 #ZHRQ {
   .LeftBox {
     width: 450px;
@@ -915,11 +834,7 @@
     position: absolute;
     left: 10px;
     top: 70px;
-    background: linear-gradient(
-      0deg,
-      rgba(0, 43, 67, 0.8) 0%,
-      rgba(0, 69, 108, 0.8) 100%
-    );
+    background: linear-gradient(0deg, rgba(0, 43, 67, 0.8) 0%, rgba(0, 69, 108, 0.8) 100%);
     border-radius: 6px;
     border: 1px solid #47eef3;
     box-sizing: border-box;
@@ -994,7 +909,7 @@
         width: 100%;
         height: calc(100% - 72px);
         margin-top: 10px;
-        background: url("@/assets/images/Sponge_screen/RQ/Ech.png") no-repeat center;
+        background: url('@/assets/images/Sponge_screen/RQ/Ech.png') no-repeat center;
         position: relative;
 
         .ClickDiv1 {
@@ -1052,7 +967,7 @@
           height: 42px;
           width: calc(50% - 9px);
           display: flex;
-          background: url("@/assets/images/Sponge_screen/RQ/RQ_FX.png") no-repeat center;
+          background: url('@/assets/images/Sponge_screen/RQ/RQ_FX.png') no-repeat center;
           background-size: 100% 100%;
           cursor: pointer;
 
@@ -1284,11 +1199,7 @@
     position: absolute;
     right: 10px;
     top: 70px;
-    background: linear-gradient(
-      0deg,
-      rgba(0, 43, 67, 0.8) 0%,
-      rgba(0, 69, 108, 0.8) 100%
-    );
+    background: linear-gradient(0deg, rgba(0, 43, 67, 0.8) 0%, rgba(0, 69, 108, 0.8) 100%);
     border-radius: 6px;
     border: 1px solid #47eef3;
     box-sizing: border-box;
@@ -1446,11 +1357,7 @@
     position: absolute;
     left: 520px;
     top: 110px;
-    background: linear-gradient(
-      0deg,
-      rgba(0, 43, 67, 0.8) 0%,
-      rgba(0, 69, 108, 0.8) 100%
-    );
+    background: linear-gradient(0deg, rgba(0, 43, 67, 0.8) 0%, rgba(0, 69, 108, 0.8) 100%);
     border-radius: 6px;
     border: 1px solid #47eef3;
     box-sizing: border-box;
@@ -1544,8 +1451,7 @@
     .Box_header {
       width: 100%;
       height: 43px;
-      background: url("@/assets/images/Sponge_screen/Box_HeaderBackground.png") no-repeat
-        center;
+      background: url('@/assets/images/Sponge_screen/Box_HeaderBackground.png') no-repeat center;
       background-size: cover;
       font-family: PangMenZhengDao;
       font-weight: 400;
diff --git a/src/views/oneMap/components/ZTGL.vue b/src/views/oneMap/components/ZTGL.vue
index 796f6da..f524835 100644
--- a/src/views/oneMap/components/ZTGL.vue
+++ b/src/views/oneMap/components/ZTGL.vue
@@ -18,7 +18,7 @@
 import testProjectionLabel from '@/assets/testProjectionLabel.json';
 import mapBoxVectorLayer from '@/utils/GISdocument/mapboxVectorLayer.js';
 import xtb_img from '@/assets/newImgs/xtb_img.png';
-
+import bus from '@/bus';
 const showPanel = ref(true); //面板展开收起
 // 面板内容展开收起控制
 const props = defineProps({
@@ -67,8 +67,11 @@
   }, 100);
 });
 onBeforeUnmount(() => {
-  newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName('testProjection'));
-  mapBoxVectorLayer.removeByIds(['testProjection']);
+  bus.emit('SetLayerShow', ['蓝色地图']);
+  if (newfiberMapbox.getLayerByName('testProjection')) {
+    newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName('testProjection'));
+    mapBoxVectorLayer.removeByIds(['testProjection']);
+  }
 });
 </script>
 
diff --git a/src/views/oneMap/components/chartLogging.vue b/src/views/oneMap/components/chartLogging.vue
index c9fdcc4..2ea8b4d 100644
--- a/src/views/oneMap/components/chartLogging.vue
+++ b/src/views/oneMap/components/chartLogging.vue
@@ -45,6 +45,7 @@
             color: '#fff',
           },
         },
+
         xAxis: [
           {
             type: 'category',
@@ -81,6 +82,7 @@
               },
             },
           },
+
           {
             name: props.data.yAxisName2 || '',
             inverse: false,
@@ -101,6 +103,16 @@
             },
           },
         ],
+        // 时间轴滑动选择器
+        dataZoom: [
+          {
+            show: true,
+            realtime: true,
+            start: 30,
+            end: 70,
+            xAxisIndex: [0, 1],
+          },
+        ],
         series: [
           {
             name: '降雨量(mm)',
diff --git a/src/views/oneMap/components/pipeFX.vue b/src/views/oneMap/components/pipeFX.vue
index df0894c..ea1db5e 100644
--- a/src/views/oneMap/components/pipeFX.vue
+++ b/src/views/oneMap/components/pipeFX.vue
@@ -121,6 +121,16 @@
             },
           },
         ],
+        // 时间轴滑动选择器
+        dataZoom: [
+          {
+            show: true,
+            realtime: true,
+            start: 30,
+            end: 70,
+            xAxisIndex: [0, 1],
+          },
+        ],
         series: [
           {
             name: '降雨量(mm)',
diff --git a/src/views/oneMap/components/projectDX.vue b/src/views/oneMap/components/projectDX.vue
index cecd854..ec593c1 100644
--- a/src/views/oneMap/components/projectDX.vue
+++ b/src/views/oneMap/components/projectDX.vue
@@ -93,6 +93,16 @@
             },
           },
         ],
+        // 时间轴滑动选择器
+        dataZoom: [
+          {
+            show: true,
+            realtime: true,
+            start: 30,
+            end: 70,
+            xAxisIndex: [0, 1],
+          },
+        ],
         series: [
           {
             // smooth: true, //变为曲线 默认false折线
diff --git a/src/views/oneMap/floodPrevention/FholRightBox.vue b/src/views/oneMap/floodPrevention/FholRightBox.vue
index 289c2b3..c2b55f6 100644
--- a/src/views/oneMap/floodPrevention/FholRightBox.vue
+++ b/src/views/oneMap/floodPrevention/FholRightBox.vue
@@ -108,10 +108,10 @@
   <!-- 入河排口运行监控 -->
   <div class="DischargeMonitor">
     <div class="ListBoxHeader">
-      <div class="ListBoxHeader_font">入河排口运行监控</div>
+      <div class="ListBoxHeader_font">调度统计</div>
     </div>
     <div class="JkMonitor">
-      <div class="tableHeader">
+      <!-- <div class="tableHeader">
         <span class="tableHeaderList tableList1">排口监测点</span>
         <span class="tableHeaderList tableList2">当前出流状态</span>
         <span class="tableHeaderList tableList3">流量(m³/h)</span>
@@ -125,7 +125,8 @@
             <img :src="monitor_icon" alt="" />
           </span>
         </div>
-      </Vue3SeamlessScroll>
+      </Vue3SeamlessScroll> -->
+      <dispatchEch />
     </div>
   </div>
 
@@ -146,6 +147,7 @@
 import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
 import { ref, reactive, toRefs, onMounted, onBeforeUnmount } from 'vue';
 import bus from '@/bus';
+import dispatchEch from './dispatchEch.vue';
 import monitor_icon from '@/assets/images/fhpl/monitor_icon.png';
 import bengzhantingzhi from '@/assets/images/fhpl/bengzhantingzhi.png';
 import bengzhanyunxing from '@/assets/images/fhpl/bengzhanyunxing.png';
@@ -507,110 +509,112 @@
   width: 450px;
   height: 31%;
   margin-top: 3px;
+  // background: red;
   .JkMonitor {
     margin: 5px auto;
     width: 430px;
     height: calc(100% - 50px);
-    .tableHeader {
-      width: 100%;
-      height: 34px;
-      background: linear-gradient(0deg, #00fbffa3 0%, #00fbff00 100%);
-      border-radius: 2px;
-      border: 1px solid #74dde1;
-      display: flex;
+    // .tableHeader {
+    //   width: 100%;
+    //   height: 34px;
+    //   background: linear-gradient(0deg, #00fbffa3 0%, #00fbff00 100%);
+    //   border-radius: 2px;
+    //   border: 1px solid #74dde1;
+    //   display: flex;
 
-      .tableHeaderList {
-        font-family: Source Han Sans CN;
-        font-weight: 400;
-        font-size: 14px;
-        color: #ffffff;
-        height: 34px;
-        line-height: 34px;
-        // padding-left: 5px;
-        // text-align: center;
-      }
-      .tableList1 {
-        width: 35%;
-        padding-left: 15px;
-      }
-      .tableList2 {
-        width: 30%;
-        text-align: center;
-      }
-      .tableList3 {
-        width: 20%;
-        text-align: center;
-      }
-    }
-    .tableBody {
-      width: 100%;
-      height: calc(100% - 35px);
-      overflow: hidden;
+    //   .tableHeaderList {
+    //     font-family: Source Han Sans CN;
+    //     font-weight: 400;
+    //     font-size: 14px;
+    //     color: #ffffff;
+    //     height: 34px;
+    //     line-height: 34px;
+    //     // padding-left: 5px;
+    //     // text-align: center;
+    //   }
+    //   .tableList1 {
+    //     width: 35%;
+    //     padding-left: 15px;
+    //   }
+    //   .tableList2 {
+    //     width: 30%;
+    //     text-align: center;
+    //   }
+    //   .tableList3 {
+    //     width: 20%;
+    //     text-align: center;
+    //   }
+    // }
+    // .tableBody {
+    //   width: 100%;
+    //   height: calc(100% - 35px);
+    //   overflow: hidden;
 
-      .tableBodyList {
-        height: 34px;
-        line-height: 34px;
-        width: 100%;
-        display: flex;
-        /* 选择偶数行 */
-        &:nth-child(even) {
-          background: linear-gradient(0deg, #008599 0%, #08596d 100%);
-        }
+    //   .tableBodyList {
+    //     height: 34px;
+    //     line-height: 34px;
+    //     width: 100%;
+    //     display: flex;
+    //     /* 选择偶数行 */
+    //     &:nth-child(even) {
+    //       background: linear-gradient(0deg, #008599 0%, #08596d 100%);
+    //     }
 
-        .tableBodyList_span1 {
-          font-family: Source Han Sans CN;
-          font-weight: 400;
-          font-size: 14px;
-          color: #ffffff;
-          height: 34px;
-          line-height: 34px;
-          // text-align: center;
-          width: 35%;
-          padding-left: 15px;
-          // background: red;
-          // padding-left: 5px;
-        }
-        .tableBodyList_span2 {
-          font-family: Source Han Sans CN;
-          font-weight: 400;
-          font-size: 14px;
-          color: #ffffff;
-          height: 34px;
-          line-height: 34px;
-          text-align: center;
-          width: 30%;
-        }
-        .tableBodyList_span3 {
-          font-family: Source Han Sans CN;
-          font-weight: 400;
-          font-size: 14px;
-          color: #ffffff;
-          height: 34px;
-          line-height: 34px;
-          text-align: center;
-          width: 20%;
-        }
+    //     .tableBodyList_span1 {
+    //       font-family: Source Han Sans CN;
+    //       font-weight: 400;
+    //       font-size: 14px;
+    //       color: #ffffff;
+    //       height: 34px;
+    //       line-height: 34px;
+    //       // text-align: center;
+    //       width: 35%;
+    //       padding-left: 15px;
+    //       // background: red;
+    //       // padding-left: 5px;
+    //     }
+    //     .tableBodyList_span2 {
+    //       font-family: Source Han Sans CN;
+    //       font-weight: 400;
+    //       font-size: 14px;
+    //       color: #ffffff;
+    //       height: 34px;
+    //       line-height: 34px;
+    //       text-align: center;
+    //       width: 30%;
+    //     }
+    //     .tableBodyList_span3 {
+    //       font-family: Source Han Sans CN;
+    //       font-weight: 400;
+    //       font-size: 14px;
+    //       color: #ffffff;
+    //       height: 34px;
+    //       line-height: 34px;
+    //       text-align: center;
+    //       width: 20%;
+    //     }
 
-        .tableBodyList_span4 {
-          font-family: Source Han Sans CN;
-          font-weight: 400;
-          font-size: 14px;
-          color: #ffffff;
-          height: 34px;
-          line-height: 45px;
-          text-align: center;
-          width: 15%;
-          cursor: pointer;
-          // background: red;
-        }
-        .rad {
-          color: #ff3737;
-        }
-        .green {
-          color: #0fcd22;
-        }
-      }
-    }
+    //     .tableBodyList_span4 {
+    //       font-family: Source Han Sans CN;
+    //       font-weight: 400;
+    //       font-size: 14px;
+    //       color: #ffffff;
+    //       height: 34px;
+    //       line-height: 45px;
+    //       text-align: center;
+    //       width: 15%;
+    //       cursor: pointer;
+    //       // background: red;
+    //     }
+    //     .rad {
+    //       color: #ff3737;
+    //     }
+    //     .green {
+    //       color: #0fcd22;
+    //     }
+    //   }
+    // }
+    // background: yellow;
   }
 }
 .ListBoxHeader {
diff --git a/src/views/oneMap/floodPrevention/FhplLeftBox.vue b/src/views/oneMap/floodPrevention/FhplLeftBox.vue
index 7d7f27a..6495375 100644
--- a/src/views/oneMap/floodPrevention/FhplLeftBox.vue
+++ b/src/views/oneMap/floodPrevention/FhplLeftBox.vue
@@ -17,7 +17,7 @@
     <div class="qxyb">
       <div class="info flex flex-justcontent-start">
         <div class="weight">气象预报</div>
-        <div class="text">未来24h中心城区累计降雨达12mm</div>
+        <div class="text">未来24h中心城区累计降雨达19.8mm</div>
       </div>
       <div class="rainChartInfo flex">
         <div class="square"></div>
@@ -278,15 +278,28 @@
 
 // 气象假数据
 function getRainTrend() {
-  monitorData.value.history = ['0.50', '0.00'];
-  monitorData.value.forecast = ['0.50', '0.00'];
+  monitorData.value.history = ['0.50', '0.20', '0.30', '0.40', '0.60', '0.20', '0.40'];
+  monitorData.value.forecast = ['0.50', '0.80', '0.50', '0.40', '0.30', '0.60', '0.70', '2.8', '1.0', '0.80', '0.30'];
   monitorData.value.totalData = [...monitorData.value.history, ...monitorData.value.forecast];
   monitorData.value.dateRange = [
-    '2024-10-09 16:00:00',
-    '2024-10-09 19:00:00',
-    '2024-10-09 22:00:00',
-    '2024-10-10 01:00:00',
-    '2024-10-10 04:00:00',
+    '2024-10-12 13:00:00',
+    '2024-10-12 13:30:00',
+    '2024-10-12 14:00:00',
+    '2024-10-12 14:30:00',
+    '2024-10-12 15:00:00',
+    '2024-10-12 15:30:00',
+    '2024-10-12 16:00:00',
+    '2024-10-12 16:30:00',
+    '2024-10-12 17:00:00',
+    '2024-10-12 17:30:00',
+    '2024-10-12 18:00:00',
+    '2024-10-12 18:30:00',
+    '2024-10-12 19:00:00',
+    '2024-10-12 19:30:00',
+    '2024-10-12 20:00:00',
+    '2024-10-12 20:30:00',
+    '2024-10-12 21:00:00',
+    '2024-10-12 21:30:00',
   ];
   console.log(monitorData.value, '111111111');
 
diff --git a/src/views/oneMap/floodPrevention/dispatchEch.vue b/src/views/oneMap/floodPrevention/dispatchEch.vue
new file mode 100644
index 0000000..beeec61
--- /dev/null
+++ b/src/views/oneMap/floodPrevention/dispatchEch.vue
@@ -0,0 +1,216 @@
+<template>
+  <div class="chartBox" :id="id"></div>
+</template>
+<script setup name="pieChartGszl">
+import { guid } from '@/utils/ruoyi';
+const { proxy } = getCurrentInstance();
+import { nowSize } from '@/utils/util.js';
+import moment from 'moment';
+const emit = defineEmits(['updateKey']);
+const props = defineProps({
+  //刷新标志
+  refresh: {
+    type: [String, Number],
+    default: 1,
+  },
+  //数据
+  echartData: {
+    type: Object,
+    default: {},
+  },
+});
+
+const id = guid();
+const myChart = shallowRef('');
+let activeName = ref(null);
+
+watch(
+  () => props.refresh,
+  value => {
+    //先销毁实例
+    myChart.value && myChart.value.dispose();
+    intChart();
+  }
+);
+//自适应
+function resizeTheChart() {
+  if (myChart.value) {
+    myChart.value.resize();
+  }
+}
+//初始化
+function intChart() {
+  var data = [
+    {
+      name: '泵站指令',
+      value: 10,
+    },
+    {
+      name: '融入通讯',
+      value: 60,
+    },
+    {
+      name: '语音外呼',
+      value: 80,
+    },
+    {
+      name: '车辆调度',
+      value: 100,
+    },
+    {
+      name: '人员调度',
+      value: 200,
+    },
+  ].sort(function (a, b) {
+    return b.value - a.value;
+  });
+  var max = Math.max(...data.map(item => item.value)) + 100;
+  function array2obj(array, key) {
+    let resObj = {};
+    for (let i = 0; i < array.length; i++) {
+      resObj[array[i][key]] = array[i];
+    }
+    return resObj;
+  }
+
+  function getData(data) {
+    let res = {
+      series: [],
+      yAxis: [],
+    };
+    for (let i = 0; i < data.length; i++) {
+      res.series.push({
+        name: i,
+        type: 'pie',
+        clockWise: false,
+        hoverAnimation: false,
+        radius: [63 - i * 8 + '%', 58 - i * 8 + '%'],
+        center: ['20%', '50%'],
+        label: {
+          show: false,
+        },
+        itemStyle: {
+          label: {
+            show: false,
+            position: 'center',
+          },
+          labelLine: {
+            show: false,
+          },
+          borderWidth: 5,
+        },
+        data: [
+          {
+            value: data[i].value,
+            name: data[i].name,
+          },
+          {
+            value: max - data[i].value,
+            name: '',
+            itemStyle: {
+              color: '#27689594',
+              borderWidth: 0,
+            },
+            tooltip: {
+              show: true,
+            },
+            hoverAnimation: false,
+          },
+        ],
+      });
+    }
+    return res;
+  }
+
+  var objData = array2obj(data, 'name');
+  var optionData = getData(data);
+
+  myChart.value = proxy.echarts.init(document.getElementById(id));
+  myChart.value.clear();
+  // 绘制图表
+  myChart.value.setOption({
+    tooltip: {
+      show: true,
+      // formatter: "{a}：{d}%"
+    },
+    legend: {
+      // x: 'lefr',
+      left: 200,
+      y: 'center',
+      itemGap: 10,
+      itemWidth: 10,
+      itemHeight: 10,
+      icon: 'rect',
+
+      formatter: function (name) {
+        return '{title|' + name + '}{value|' + objData[name].value + '次' + '}';
+      },
+      textStyle: {
+        rich: {
+          title: {
+            width: 10,
+            fontSize: 16,
+            color: '#fff',
+            padding: [0, 0, 0, 10],
+          },
+          value: {
+            fontSize: 16,
+            color: 'rgb(0, 222, 255)',
+            padding: [0, 100],
+          },
+        },
+      },
+    },
+    color: ['#0E8CFDFF', '#08DA80FF', '#2ECAFFFF', '#FF915BFF', '#F5BA45FF'],
+    grid: {
+      top: '0',
+      left: '50%',
+      containLabel: false,
+    },
+    yAxis: [
+      {
+        type: 'category',
+        inverse: true,
+        axisLine: {
+          show: false,
+        },
+        axisTick: {
+          show: false,
+        },
+        axisLabel: {
+          interval: 0,
+          inside: true,
+          textStyle: {
+            color: '#fff',
+            fontSize: 16,
+          },
+          show: true,
+        },
+        data: optionData.yAxis,
+      },
+    ],
+    xAxis: [
+      {
+        show: false,
+      },
+    ],
+    series: optionData.series,
+  });
+  myChart.value.on('click', params => {
+    activeName.value = params.dataIndex;
+    emit('updateKey', activeName.value);
+    myChart.value.resize();
+  });
+}
+onMounted(() => {
+  intChart();
+  window.addEventListener('resize', resizeTheChart);
+});
+</script>
+
+<style lang="scss" scoped>
+.chartBox {
+  width: 100%;
+  height: 100%;
+}
+</style>