diff --git a/src/views/oneMap/components/ZHHM.vue b/src/views/oneMap/components/ZHHM.vue
index 1f29507..ed6aebe 100644
--- a/src/views/oneMap/components/ZHHM.vue
+++ b/src/views/oneMap/components/ZHHM.vue
@@ -1,6 +1,12 @@
 <template>
   <div id="ZHHM">
-    <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" style="cursor: pointer" @click="TuChengMoRenClick('00')">
           空间格局 <span class="Box_header_miniFont">(一心三轴多组团)</span>
@@ -75,7 +81,9 @@
           </div>
         </div>
         <div class="Box_Body">
-          <div class="HeadContent" v-if="activedname == '年际降雨变化'">丰、枯年交替出现，且降雨量变化幅度大</div>
+          <div class="HeadContent" v-if="activedname == '年际降雨变化'">
+            丰、枯年交替出现，且降雨量变化幅度大
+          </div>
           <div class="HeadContent" v-else>年内降雨量分配不均匀，冬季干旱，雨雪稀少</div>
           <div class="box-body">
             <div style="height: 100%">
@@ -84,13 +92,21 @@
                 :refresh="chartData2.refresh"
                 v-if="activedname == '年际降雨变化'"
               ></RainfallEcharts>
-              <RainfallLegend :data="chartData3" :refresh1="chartData3.refresh1" v-else></RainfallLegend>
+              <RainfallLegend
+                :data="chartData3"
+                :refresh1="chartData3.refresh1"
+                v-else
+              ></RainfallLegend>
             </div>
           </div>
         </div>
       </div>
       <div class="ComBox LeftBox1_3">
-        <div class="Box_header" style="cursor: pointer" @click="AllData.WTShow = !AllData.WTShow">
+        <div
+          class="Box_header"
+          style="cursor: pointer"
+          @click="AllData.WTShow = !AllData.WTShow"
+        >
           问题识别
           <!-- <img
             class="Box_headerIcon"
@@ -100,14 +116,24 @@
           /> -->
         </div>
         <div class="Box_Body">
-          <div class="WTSBList" v-for="item in AllData.WTSBData" @click="TuChengMoRenClick(item.num)">
+          <div
+            class="WTSBList"
+            v-for="item in AllData.WTSBData"
+            @click="TuChengMoRenClick(item.num)"
+          >
             <div class="WTSBList_num">{{ item.num }}</div>
             <div class="WTSBList_font">{{ item.font }}</div>
           </div>
         </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">
@@ -123,14 +149,22 @@
           </div>
 
           <div class="CSPLTXBox" id="CSPLTXBox1" v-if="AllData.SCPLTX_changeId == 1">
-            <img class="SCPLTXImg" src="@/assets/images/Sponge_screen/HaiMian/HaiMian_jiatu2.png" alt="" />
+            <img
+              class="SCPLTXImg"
+              src="@/assets/images/Sponge_screen/HaiMian/HaiMian_jiatu2.png"
+              alt=""
+            />
             <div class="ClickDiv ClickDiv1" @click="ClickDiv(1)"></div>
             <div class="ClickDiv ClickDiv2" @click="ClickDiv(2)"></div>
             <div class="ClickDiv ClickDiv3" @click="ClickDiv(3)"></div>
             <div class="ClickDiv ClickDiv4" @click="ClickDiv(4)"></div>
             <div class="ClickDiv ClickDiv5" @click="ClickDiv(5)"></div>
           </div>
-          <div class="CSPLTXBox" id="CSPLTXBox2" v-if="AllData.SCPLTX_changeId == 2"></div>
+          <div
+            class="CSPLTXBox"
+            id="CSPLTXBox2"
+            v-if="AllData.SCPLTX_changeId == 2"
+          ></div>
           <div class="CSPLTXBox" v-if="AllData.SCPLTX_changeId == 3">
             <div id="CSPLTXBox3"></div>
             <div id="lengedBox">
@@ -146,6 +180,7 @@
       <div class="ComBox RightBox1_2">
         <div class="Box_header">城市排涝保障提升</div>
         <div class="Box_Body">
+          <div id="CSPLBZTS"></div>
           <!-- <div class="SCPLBZ_changeBox">
             <div
               class="SCPLBZ_changeBox_List"
@@ -156,52 +191,72 @@
               {{ item.name }}
             </div>
           </div> -->
-          <img class="SCPBZXImg" src="@/assets/images/Sponge_screen/HaiMian/HaiMian_jiatu1.png" alt="" />
+          <!-- <img
+            class="SCPBZXImg"
+            src="@/assets/images/Sponge_screen/HaiMian/HaiMian_jiatu1.png"
+            alt=""
+          />
           <div class="ClickDiv_2 ClickDiv_21" @click="ClickDiv(21)"></div>
           <div class="ClickDiv_2 ClickDiv_22" @click="ClickDiv(22)"></div>
           <div class="ClickDiv_2 ClickDiv_23" @click="ClickDiv(23)"></div>
           <div class="ClickDiv_2 ClickDiv_24" @click="ClickDiv(24)"></div>
-          <div class="ClickDiv_2 ClickDiv_25" @click="ClickDiv(25)"></div>
+          <div class="ClickDiv_2 ClickDiv_25" @click="ClickDiv(25)"></div> -->
         </div>
       </div>
       <div class="ComBox RightBox1_3">
         <div class="Box_header">水环境改善提升</div>
         <div class="Box_Body SHJGS">
-          <img class="SHJGSImg" src="@/assets/images/Sponge_screen/HaiMian/HaiMian_jiatu5.png" alt="" />
-          <img class="SHJGSImg" src="@/assets/images/Sponge_screen/HaiMian/HaiMian_jiatu6.png" alt="" />
-          <img class="SHJGSImg" src="@/assets/images/Sponge_screen/HaiMian/HaiMian_jiatu4.png" alt="" />
+          <img
+            class="SHJGSImg"
+            src="@/assets/images/Sponge_screen/HaiMian/HaiMian_jiatu5.png"
+            alt=""
+          />
+          <img
+            class="SHJGSImg"
+            src="@/assets/images/Sponge_screen/HaiMian/HaiMian_jiatu6.png"
+            alt=""
+          />
+          <img
+            class="SHJGSImg"
+            src="@/assets/images/Sponge_screen/HaiMian/HaiMian_jiatu4.png"
+            alt=""
+          />
         </div>
       </div>
     </div>
     <Transition name="slideWT">
       <div class="XFK" v-show="AllData.WTShow">
-        <img class="XFKImg" src="@/assets/images/Sponge_screen/HaiMian/HaiMian_jiatu3.png" alt="" />
+        <img
+          class="XFKImg"
+          src="@/assets/images/Sponge_screen/HaiMian/HaiMian_jiatu3.png"
+          alt=""
+        />
       </div>
     </Transition>
   </div>
 </template>
 
 <script setup name="ZHHM">
-import { ref, reactive, toRefs, onMounted, nextTick } from 'vue';
-import * as echarts from 'echarts';
+import { ref, reactive, toRefs, onMounted, nextTick } from "vue";
+import * as echarts from "echarts";
 const AllData = reactive({
   // 问题识别
   WTSBData: [
     {
-      num: '01',
-      font: '新区雨水入老城，雨季内涝积水频发',
+      num: "01",
+      font: "新区雨水入老城，雨季内涝积水频发",
     },
     {
-      num: '02',
-      font: '水资源严重短缺，雨水资源利用难度大',
+      num: "02",
+      font: "水资源严重短缺，雨水资源利用难度大",
     },
     {
-      num: '03',
-      font: '排水系统不完善，雨季延河水质不稳定',
+      num: "03",
+      font: "排水系统不完善，雨季延河水质不稳定",
     },
     {
-      num: '04',
-      font: '山体沟道人居环境较差，局部存在安全隐患',
+      num: "04",
+      font: "山体沟道人居环境较差，局部存在安全隐患",
     },
     // {
     //   num: '05',
@@ -212,15 +267,15 @@
   SCPLTX_changeData: [
     {
       id: 1,
-      name: '源头减排',
+      name: "源头减排",
     },
     {
       id: 2,
-      name: '过程控制',
+      name: "过程控制",
     },
     {
       id: 3,
-      name: '系统治理',
+      name: "系统治理",
     },
   ],
   SCPLTX_changeId: 1,
@@ -228,28 +283,29 @@
   Charts2: null,
   Charts3: null,
   Echarts3Data: [
-    { value: 48, name: '沿河' },
-    { value: 22, name: '西川河' },
-    { value: 13, name: '王瑶水库' },
-    { value: 10, name: '杜甫川河' },
-    { value: 7, name: '南川河' },
+    { value: 48, name: "沿河" },
+    { value: 22, name: "西川河" },
+    { value: 13, name: "王瑶水库" },
+    { value: 10, name: "杜甫川河" },
+    { value: 7, name: "南川河" },
   ],
   // 城市排涝保障提升
   SCPLBZ_changeData: [
     {
       id: 1,
-      name: '上栏',
+      name: "上栏",
     },
     {
       id: 2,
-      name: '中滞',
+      name: "中滞",
     },
     {
       id: 3,
-      name: '下排',
+      name: "下排",
     },
   ],
   SCPLBZ_changeId: 1,
+  Charts4: null,
   // 问题识别弹窗
   WTShow: false,
 });
@@ -260,40 +316,40 @@
   refresh: 1,
 });
 const chartData3 = ref({
-  XName: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
+  XName: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"],
   data1: [8, 15, 24, 36, 58, 63, 165, 125, 72, 30, 23, 10],
   data: [
     {
       coords: [
-        ['1', 8],
-        ['2', 15],
-        ['3', 24],
-        ['4', 36],
-        ['5', 58],
-        ['6', 63],
-        ['7', 165],
-        ['8', 125],
-        ['9', 72],
-        ['10', 30],
-        ['11', 23],
-        ['12', 10],
+        ["1", 8],
+        ["2", 15],
+        ["3", 24],
+        ["4", 36],
+        ["5", 58],
+        ["6", 63],
+        ["7", 165],
+        ["8", 125],
+        ["9", 72],
+        ["10", 30],
+        ["11", 23],
+        ["12", 10],
       ],
     },
   ],
   refresh1: 1,
 });
-const activedname = ref('年际降雨变化');
+const activedname = ref("年际降雨变化");
 const weatherTimer = ref(null);
 const yearList = ref([
-  { name: '年际降雨变化', value: 1 },
-  { name: '年内降雨量', value: 2 },
+  { name: "年际降雨变化", value: 1 },
+  { name: "年内降雨量", value: 2 },
 ]);
-import RainfallEcharts from '@/views/oneMap/Echarts/RainfallEcharts.vue'; //年际降雨变化
-import RainfallLegend from '@/views/oneMap/Echarts/RainfallLegend.vue'; //年内降雨量
-import { onBeforeUnmount } from 'vue';
-import bus from '@/bus';
-import yanAnProjection from '@/assets/yanAnProjection.json';
-import mapBoxVectorLayer from '@/utils/GISdocument/mapboxVectorLayer.js';
+import RainfallEcharts from "@/views/oneMap/Echarts/RainfallEcharts.vue"; //年际降雨变化
+import RainfallLegend from "@/views/oneMap/Echarts/RainfallLegend.vue"; //年内降雨量
+import { onBeforeUnmount } from "vue";
+import bus from "@/bus";
+import yanAnProjection from "@/assets/yanAnProjection.json";
+import mapBoxVectorLayer from "@/utils/GISdocument/mapboxVectorLayer.js";
 // 面板内容展开收起控制
 const props = defineProps({
   showPanel: {
@@ -311,141 +367,166 @@
 const addProjectionLayer = () => {
   let projectionList = [
     {
-      layername: 'HMJZYSQ',
-      data: turf.featureCollection(yanAnProjection.features.filter(i => i.properties.projectionType.includes('建筑'))),
+      layername: "HMJZYSQ",
+      data: turf.featureCollection(
+        yanAnProjection.features.filter((i) =>
+          i.properties.projectionType.includes("建筑")
+        )
+      ),
     },
     {
-      layername: 'HMXGYLD',
-      data: turf.featureCollection(yanAnProjection.features.filter(i => i.properties.projectionType.includes('公园'))),
+      layername: "HMXGYLD",
+      data: turf.featureCollection(
+        yanAnProjection.features.filter((i) =>
+          i.properties.projectionType.includes("公园")
+        )
+      ),
     },
     {
-      layername: 'HMXDLGC',
-      data: turf.featureCollection(yanAnProjection.features.filter(i => i.properties.projectionType.includes('道路'))),
+      layername: "HMXDLGC",
+      data: turf.featureCollection(
+        yanAnProjection.features.filter((i) =>
+          i.properties.projectionType.includes("道路")
+        )
+      ),
     },
     {
-      layername: 'HMXSX',
-      data: turf.featureCollection(yanAnProjection.features.filter(i => i.properties.projectionType.includes('水系'))),
+      layername: "HMXSX",
+      data: turf.featureCollection(
+        yanAnProjection.features.filter((i) =>
+          i.properties.projectionType.includes("水系")
+        )
+      ),
     },
     {
-      layername: 'GWPCYXF',
-      data: turf.featureCollection(yanAnProjection.features.filter(i => i.properties.projectionType.includes('管网'))),
+      layername: "GWPCYXF",
+      data: turf.featureCollection(
+        yanAnProjection.features.filter((i) =>
+          i.properties.projectionType.includes("管网")
+        )
+      ),
     },
     // 'HMXSX', 'GWPCYXF', 'GWJBZ', 'GIS', 'other'
   ];
-  console.log('projectionList---', projectionList);
-  projectionList.forEach(item => {
-    bus.emit('setGeoJSON', { json: item.data, key: item.layername });
+  console.log("projectionList---", projectionList);
+  projectionList.forEach((item) => {
+    bus.emit("setGeoJSON", { json: item.data, key: item.layername });
   });
   //bus.emit('setLegendData', projectionList);
 };
-const yearclick = val => {
+const yearclick = (val) => {
   activedname.value = val.name;
-  bus.emit('checkRainL', val.value);
+  bus.emit("checkRainL", val.value);
   // bus.emit("checkLandXDM", false);
 };
 
-const TuChengMoRenClick = num => {
+const TuChengMoRenClick = (num) => {
   newfiberMapbox.map.easeTo({
     center: [109.488, 36.596],
     zoom: 12,
     pitch: 55,
   });
   // 先清空
-  bus.emit('clearAllLayer');
-  let removedLayer = ['HMJZYSQ', 'HMXGYLD', 'HMXDLGC', 'HMXSX', 'GWPCYXF'];
-  removedLayer.forEach(layer => {
-    bus.emit('setLayerVisible', { layername: layer, isCheck: false });
+  bus.emit("clearAllLayer");
+  let removedLayer = ["HMJZYSQ", "HMXGYLD", "HMXDLGC", "HMXSX", "GWPCYXF"];
+  removedLayer.forEach((layer) => {
+    bus.emit("setLayerVisible", { layername: layer, isCheck: false });
   });
   switch (num) {
-    case '00':
+    case "00":
       // 再显示
-      bus.emit('SetLayerShow', ['空间格局']);
+      bus.emit("SetLayerShow", ["空间格局"]);
       break;
-    case '01':
+    case "01":
       // 再显示
-      bus.emit('SetLayerShow', ['雨水分区', '中心城区']);
+      bus.emit("SetLayerShow", ["雨水分区", "中心城区"]);
       break;
-    case '02':
+    case "02":
       // 再显示
-      bus.emit('SetLayerShow', ['河流水系']);
+      bus.emit("SetLayerShow", ["河流水系"]);
       break;
-    case '03':
+    case "03":
       // 再显示
-      bus.emit('SetLayerShow', ['河流水系', '排水分区']);
+      bus.emit("SetLayerShow", ["河流水系", "排水分区"]);
       break;
-    case '04':
+    case "04":
       // 再显示
-      bus.emit('SetLayerShow', ['山体修复']);
+      bus.emit("SetLayerShow", ["山体修复"]);
       break;
   }
 };
-const ClickDiv = num => {
+const ClickDiv = (num) => {
   newfiberMapbox.map.easeTo({
     center: [109.488, 36.596],
     zoom: 12,
     pitch: 55,
   });
   // 先清空
-  bus.emit('clearAllLayer');
-  let removedLayer = ['HMJZYSQ', 'HMXGYLD', 'HMXDLGC', 'HMXSX', 'GWPCYXF'];
-  removedLayer.forEach(layer => {
-    bus.emit('setLayerVisible', { layername: layer, isCheck: false });
+  bus.emit("clearAllLayer");
+  let removedLayer = ["HMJZYSQ", "HMXGYLD", "HMXDLGC", "HMXSX", "GWPCYXF"];
+  removedLayer.forEach((layer) => {
+    bus.emit("setLayerVisible", { layername: layer, isCheck: false });
   });
   switch (num) {
     case 1:
-      bus.emit('setLayerVisible', { layername: 'HMJZYSQ', isCheck: true }); //建筑
-      bus.emit('setLayerVisible', { layername: 'HMXDLGC', isCheck: false }); //道路
-      bus.emit('setLayerVisible', { layername: 'HMXGYLD', isCheck: false }); //公园
-      bus.emit('setLayerVisible', { layername: 'GWPCYXF', isCheck: false }); //管网
-      bus.emit('setLayerVisible', { layername: 'HMXSX', isCheck: false }); //水系
+      bus.emit("setLayerVisible", { layername: "HMJZYSQ", isCheck: true }); //建筑
+      bus.emit("setLayerVisible", { layername: "HMXDLGC", isCheck: false }); //道路
+      bus.emit("setLayerVisible", { layername: "HMXGYLD", isCheck: false }); //公园
+      bus.emit("setLayerVisible", { layername: "GWPCYXF", isCheck: false }); //管网
+      bus.emit("setLayerVisible", { layername: "HMXSX", isCheck: false }); //水系
       break;
     case 2:
-      bus.emit('setLayerVisible', { layername: 'HMJZYSQ', isCheck: false }); //建筑
-      bus.emit('setLayerVisible', { layername: 'HMXDLGC', isCheck: true }); //道路
-      bus.emit('setLayerVisible', { layername: 'HMXGYLD', isCheck: false }); //公园
-      bus.emit('setLayerVisible', { layername: 'GWPCYXF', isCheck: false }); //管网
-      bus.emit('setLayerVisible', { layername: 'HMXSX', isCheck: false }); //水系
+      bus.emit("setLayerVisible", { layername: "HMJZYSQ", isCheck: false }); //建筑
+      bus.emit("setLayerVisible", { layername: "HMXDLGC", isCheck: true }); //道路
+      bus.emit("setLayerVisible", { layername: "HMXGYLD", isCheck: false }); //公园
+      bus.emit("setLayerVisible", { layername: "GWPCYXF", isCheck: false }); //管网
+      bus.emit("setLayerVisible", { layername: "HMXSX", isCheck: false }); //水系
       break;
     case 3:
-      bus.emit('setLayerVisible', { layername: 'HMJZYSQ', isCheck: false }); //建筑
-      bus.emit('setLayerVisible', { layername: 'HMXDLGC', isCheck: false }); //道路
-      bus.emit('setLayerVisible', { layername: 'HMXGYLD', isCheck: true }); //公园
-      bus.emit('setLayerVisible', { layername: 'GWPCYXF', isCheck: false }); //管网
-      bus.emit('setLayerVisible', { layername: 'HMXSX', isCheck: false }); //水系
+      bus.emit("setLayerVisible", { layername: "HMJZYSQ", isCheck: false }); //建筑
+      bus.emit("setLayerVisible", { layername: "HMXDLGC", isCheck: false }); //道路
+      bus.emit("setLayerVisible", { layername: "HMXGYLD", isCheck: true }); //公园
+      bus.emit("setLayerVisible", { layername: "GWPCYXF", isCheck: false }); //管网
+      bus.emit("setLayerVisible", { layername: "HMXSX", isCheck: false }); //水系
       break;
     case 4:
-      bus.emit('setLayerVisible', { layername: 'HMJZYSQ', isCheck: false }); //建筑
-      bus.emit('setLayerVisible', { layername: 'HMXDLGC', isCheck: false }); //道路
-      bus.emit('setLayerVisible', { layername: 'HMXGYLD', isCheck: false }); //公园
-      bus.emit('setLayerVisible', { layername: 'GWPCYXF', isCheck: true }); //管网
-      bus.emit('setLayerVisible', { layername: 'HMXSX', isCheck: false }); //水系
+      bus.emit("setLayerVisible", { layername: "HMJZYSQ", isCheck: false }); //建筑
+      bus.emit("setLayerVisible", { layername: "HMXDLGC", isCheck: false }); //道路
+      bus.emit("setLayerVisible", { layername: "HMXGYLD", isCheck: false }); //公园
+      bus.emit("setLayerVisible", { layername: "GWPCYXF", isCheck: true }); //管网
+      bus.emit("setLayerVisible", { layername: "HMXSX", isCheck: false }); //水系
       break;
     case 5:
-      bus.emit('setLayerVisible', { layername: 'HMJZYSQ', isCheck: false }); //建筑
-      bus.emit('setLayerVisible', { layername: 'HMXDLGC', isCheck: false }); //道路
-      bus.emit('setLayerVisible', { layername: 'HMXGYLD', isCheck: false }); //公园
-      bus.emit('setLayerVisible', { layername: 'GWPCYXF', isCheck: false }); //管网
-      bus.emit('setLayerVisible', { layername: 'HMXSX', isCheck: true }); //水系
+      bus.emit("setLayerVisible", { layername: "HMJZYSQ", isCheck: false }); //建筑
+      bus.emit("setLayerVisible", { layername: "HMXDLGC", isCheck: false }); //道路
+      bus.emit("setLayerVisible", { layername: "HMXGYLD", isCheck: false }); //公园
+      bus.emit("setLayerVisible", { layername: "GWPCYXF", isCheck: false }); //管网
+      bus.emit("setLayerVisible", { layername: "HMXSX", isCheck: true }); //水系
       break;
     case 21:
-      bus.emit('SetLayerShow', ['防洪河道']);
+      bus.emit("SetLayerShow", ["防洪河道"]);
       break;
     case 22:
-      bus.emit('SetLayerShow', ['河堤加固']);
+      bus.emit("SetLayerShow", ["河堤加固"]);
       break;
     case 23:
-      bus.emit('SetLayerShow', ['河堤治理']);
+      bus.emit("SetLayerShow", ["河堤治理"]);
       break;
     case 24:
-      bus.emit('SetLayerShow', ['河堤疏浚']);
+      bus.emit("SetLayerShow", ["河堤疏浚"]);
       break;
     case 25:
       break;
   }
 };
-const SCPLTX_change = item => {
+const SCPLTX_change = (item) => {
   AllData.SCPLTX_changeId = item.id;
   if (AllData.SCPLTX_changeId == 1) {
+    bus.emit("clearAllLayer");
+    let removedLayer = ["HMJZYSQ", "HMXGYLD", "HMXDLGC", "HMXSX", "GWPCYXF"];
+    removedLayer.forEach((layer) => {
+      bus.emit("setLayerVisible", { layername: layer, isCheck: true });
+    });
   } else if (AllData.SCPLTX_changeId == 2) {
     ClearAllProjectMap();
     nextTick(() => {
@@ -457,12 +538,12 @@
       pitch: 55,
     });
     // 先清空
-    bus.emit('clearAllLayer');
-    let removedLayer = ['HMJZYSQ', 'HMXGYLD', 'HMXDLGC', 'HMXSX', 'GWPCYXF'];
-    removedLayer.forEach(layer => {
-      bus.emit('setLayerVisible', { layername: layer, isCheck: false });
+    bus.emit("clearAllLayer");
+    let removedLayer = ["HMJZYSQ", "HMXGYLD", "HMXDLGC", "HMXSX", "GWPCYXF"];
+    removedLayer.forEach((layer) => {
+      bus.emit("setLayerVisible", { layername: layer, isCheck: false });
     });
-    bus.emit('SetLayerShow', ['雨水管网', '污水管网', '雨水分区']);
+    bus.emit("SetLayerShow", ["雨水管网", "污水管网", "雨水分区"]);
   } else {
     newfiberMapbox.map.easeTo({
       center: [109.488, 36.596],
@@ -470,12 +551,12 @@
       pitch: 55,
     });
     // 先清空
-    bus.emit('clearAllLayer');
-    let removedLayer = ['HMJZYSQ', 'HMXGYLD', 'HMXDLGC', 'HMXSX', 'GWPCYXF'];
-    removedLayer.forEach(layer => {
-      bus.emit('setLayerVisible', { layername: layer, isCheck: false });
+    bus.emit("clearAllLayer");
+    let removedLayer = ["HMJZYSQ", "HMXGYLD", "HMXDLGC", "HMXSX", "GWPCYXF"];
+    removedLayer.forEach((layer) => {
+      bus.emit("setLayerVisible", { layername: layer, isCheck: false });
     });
-    bus.emit('SetLayerShow', ['河流水系']);
+    bus.emit("SetLayerShow", ["河流水系"]);
     ClearAllProjectMap();
     nextTick(() => {
       initEcharts3();
@@ -486,64 +567,64 @@
   if (!!AllData.Charts2) {
     AllData.Charts2.dispose();
   }
-  AllData.Charts2 = echarts.init(document.getElementById('CSPLTXBox2'));
+  AllData.Charts2 = echarts.init(document.getElementById("CSPLTXBox2"));
   // AllData.Charts2.value.off("click");
   AllData.Charts2.setOption({
-    color: ['#00F2FF'],
+    color: ["#00F2FF"],
     tooltip: {
-      trigger: 'axis',
+      trigger: "axis",
       axisPointer: {
-        type: 'shadow',
+        type: "shadow",
       },
     },
     legend: {},
     grid: {
-      left: '3%',
-      right: '4%',
-      bottom: '3%',
-      top: '5%',
+      left: "3%",
+      right: "4%",
+      bottom: "3%",
+      top: "5%",
       containLabel: true,
     },
     xAxis: {
-      type: 'value',
+      type: "value",
       max: 120,
       axisPointer: {
-        type: 'shadow',
+        type: "shadow",
       },
       textStyle: {
-        color: 'aqua',
+        color: "aqua",
       },
       axisLine: {
         lineStyle: {
-          color: 'aqua',
-          type: 'dashed',
+          color: "aqua",
+          type: "dashed",
         },
       },
     },
     yAxis: {
-      type: 'category',
-      data: ['沿河北岸', '沿河南岸', '水库水面', '南川河西岸', '杜甫川河', '李渠-姚店'],
+      type: "category",
+      data: ["沿河北岸", "沿河南岸", "水库水面", "南川河西岸", "杜甫川河", "李渠-姚店"],
 
       axisLabel: {
-        formatter: '{value}',
+        formatter: "{value}",
       },
       axisLine: {
         lineStyle: {
-          color: 'white',
+          color: "white",
         },
       },
       splitLine: {
         lineStyle: {
           // 使用深浅的间隔色
-          color: ['#184E5A'],
+          color: ["#184E5A"],
         },
       },
     },
     series: [
       {
-        type: 'bar',
+        type: "bar",
         data: [90, 78, 50, 42, 68, 61],
-        barWidth: '12px',
+        barWidth: "12px",
         showBackground: true,
         itemStyle: {
           // borderRadius: 10, // 统一设置四个角的圆角大小
@@ -565,44 +646,44 @@
   if (!!AllData.Charts3) {
     AllData.Charts3.dispose();
   }
-  AllData.Charts3 = echarts.init(document.getElementById('CSPLTXBox3'));
+  AllData.Charts3 = echarts.init(document.getElementById("CSPLTXBox3"));
   // AllData.Charts3.value.off("click");
   AllData.Charts3.setOption({
-    color: ['#159AFF', '#34FFBD', '#68BEFF', '#BC6DFF', '#F17777'],
+    color: ["#159AFF", "#34FFBD", "#68BEFF", "#BC6DFF", "#F17777"],
     // tooltip: {
     //   trigger: "item",
     // },
     legend: {
-      type: 'scroll',
-      orient: 'vertical',
+      type: "scroll",
+      orient: "vertical",
       right: 10,
       top: 20,
       bottom: 20,
       textStyle: {
-        color: '#fffd', // 图例文字颜色
+        color: "#fffd", // 图例文字颜色
       },
       show: false,
     },
     series: [
       {
-        type: 'pie',
-        radius: ['70%', '90%'],
-        center: ['30%', '50%'],
+        type: "pie",
+        radius: ["70%", "90%"],
+        center: ["30%", "50%"],
         avoidLabelOverlap: false,
         itemStyle: {
           borderRadius: 10,
-          borderColor: '#fff',
+          borderColor: "#fff",
           borderWidth: 0,
         },
         label: {
           show: false,
-          position: 'center',
+          position: "center",
         },
         emphasis: {
           label: {
             show: true,
             fontSize: 40,
-            fontWeight: 'bold',
+            fontWeight: "bold",
           },
         },
         labelLine: {
@@ -621,13 +702,169 @@
   //   bus.emit("publicDialog", data);
   // });
 };
+const initEcharts4 = () => {
+  if (!!AllData.Charts4) {
+    AllData.Charts4.dispose();
+  }
+  AllData.Charts4 = echarts.init(document.getElementById("CSPLBZTS"));
+  AllData.Charts4.setOption({
+    tooltip: {
+      trigger: "axis",
+      axisPointer: {
+        type: "shadow",
+      },
+    },
+    tooltip: {
+      trigger: "axis",
+      formatter: (params) => {
+        // console.log(params);
+        var relVal = "" + params[0].name;
+        for (var i = 0, l = params.length; i < l; i++) {
+          if (params[i].seriesName) {
+            let unit = params[i].seriesName == "年降雨量" ? "mm" : "天";
+            relVal +=
+              "<br/>" +
+              params[i].marker +
+              params[i].seriesName +
+              " " +
+              params[i].value +
+              unit;
+          }
+        }
+        return relVal;
+      },
+    },
+    grid: {
+      left: "3%",
+      right: "4%",
+      bottom: "3%",
+      top: "10%",
+      containLabel: true,
+    },
+    xAxis: {
+      type: "category",
+      data: ["防洪河道", "河堤加固", "河堤治理", "河堤疏浚", "截洪渠"],
+
+      axisLine: {
+        lineStyle: {
+          color: "white",
+        },
+      },
+    },
+    yAxis: {
+      type: "value",
+      axisLabel: {
+        formatter: "{value}Km",
+      },
+      max: 60,
+      axisPointer: {
+        type: "shadow",
+      },
+      axisLine: {
+        lineStyle: {
+          color: "aqua",
+          type: "dashed",
+        },
+      },
+      splitLine: {
+        lineStyle: {
+          // 使用深浅的间隔色
+          color: ["#184E5A"],
+        },
+      },
+    },
+    series: [
+      {
+        type: "bar",
+        showBackground: true,
+        barWidth: "12px",
+        itemStyle: {
+          borderRadius: [10, 10, 0, 0], //（顺时针左上，右上，右下，左下）
+        },
+        backgroundStyle: {
+          // color: "red",
+          shadowBlur: 10,
+          borderRadius: [10, 10, 0, 0], //（顺时针左上，右上，右下，左下）
+        },
+        data: [
+          {
+            value: 22,
+            itemStyle: {
+              color: "#FE7285",
+              shadowColor: "#FE7285",
+              borderType: "dashed",
+            },
+          },
+          {
+            value: 33,
+            itemStyle: {
+              color: "#1F93FF",
+              shadowColor: "#1F93FF",
+              borderType: "dashed",
+            },
+          },
+          {
+            value: 14,
+            itemStyle: {
+              color: "#31E1AD",
+              shadowColor: "#31E1AD",
+              borderType: "dashed",
+            },
+          },
+          {
+            value: 33,
+            itemStyle: {
+              color: "#E4CD61",
+              shadowColor: "#E4CD61",
+              borderType: "dashed",
+            },
+          },
+          {
+            value: 39,
+            itemStyle: {
+              color: "#12F9FF",
+              shadowColor: "#12F9FF",
+              borderType: "dashed",
+            },
+          },
+        ],
+      },
+    ],
+  });
+  AllData.Charts4.on("click", (param) => {
+    console.log(param);
+    let data = [
+      {
+        name: "防洪河道",
+        num: 21,
+      },
+      {
+        name: "河堤加固",
+        num: 22,
+      },
+      {
+        name: "河堤治理",
+        num: 23,
+      },
+      {
+        name: "河堤疏浚",
+        num: 24,
+      },
+    ];
+    data.forEach((element) => {
+      if (element.name == param.name) {
+        ClickDiv(element.num);
+      }
+    });
+  });
+};
 // 清除地图上所有的海绵项目
 const ClearAllProjectMap = () => {
-  bus.emit('setLayerVisible', { layername: 'HMJZYSQ', isCheck: false }); //建筑
-  bus.emit('setLayerVisible', { layername: 'HMXDLGC', isCheck: false }); //道路
-  bus.emit('setLayerVisible', { layername: 'HMXGYLD', isCheck: false }); //公园
-  bus.emit('setLayerVisible', { layername: 'GWPCYXF', isCheck: false }); //管网
-  bus.emit('setLayerVisible', { layername: 'HMXSX', isCheck: false }); //水系
+  bus.emit("setLayerVisible", { layername: "HMJZYSQ", isCheck: false }); //建筑
+  bus.emit("setLayerVisible", { layername: "HMXDLGC", isCheck: false }); //道路
+  bus.emit("setLayerVisible", { layername: "HMXGYLD", isCheck: false }); //公园
+  bus.emit("setLayerVisible", { layername: "GWPCYXF", isCheck: false }); //管网
+  bus.emit("setLayerVisible", { layername: "HMXSX", isCheck: false }); //水系
 };
 onMounted(() => {
   addProjectionLayer();
@@ -636,6 +873,8 @@
     zoom: 13,
     pitch: 55,
   });
+  initEcharts4();
+  window.addEventListener("resize", initEcharts4);
   //mapBoxVectorLayer.addGeojsonPolygonWithLabel('yanAnPaiShuiArea', yanAnPaiShuiArea);
 });
 
@@ -648,12 +887,12 @@
     zoom: 12,
     pitch: 55,
   });
-  bus.emit('SetLayerShow', ['蓝色地图']);
+  bus.emit("SetLayerShow", ["蓝色地图"]);
   // 先清空
-  bus.emit('clearAllLayer');
-  let removedLayer = ['HMJZYSQ', 'HMXGYLD', 'HMXDLGC', 'HMXSX', 'GWPCYXF'];
-  removedLayer.forEach(layer => {
-    bus.emit('setLayerVisible', { layername: layer, isCheck: false });
+  bus.emit("clearAllLayer");
+  let removedLayer = ["HMJZYSQ", "HMXGYLD", "HMXDLGC", "HMXSX", "GWPCYXF"];
+  removedLayer.forEach((layer) => {
+    bus.emit("setLayerVisible", { layername: layer, isCheck: false });
   });
   // mapBoxVectorLayer.removeByIds(['yanAnPaiShuiArea', 'yanAnPaiShuiArea__label']);
 });
@@ -667,7 +906,11 @@
     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;
@@ -680,7 +923,11 @@
       .KJGJ_List1 {
         width: 100%;
         height: 36px;
-        background: linear-gradient(0deg, rgba(0, 180, 255, 0.2) 0%, rgba(0, 180, 255, 0) 100%);
+        background: linear-gradient(
+          0deg,
+          rgba(0, 180, 255, 0.2) 0%,
+          rgba(0, 180, 255, 0) 100%
+        );
         margin-top: 10px;
         display: flex;
         .KJGJ_List1_List {
@@ -747,7 +994,8 @@
           text-align: center;
           float: left;
           box-sizing: border-box;
-          background: url('@/assets/images/Sponge_screen/HaiMian/HaiMian_hezi.png') no-repeat center;
+          background: url("@/assets/images/Sponge_screen/HaiMian/HaiMian_hezi.png")
+            no-repeat center;
         }
         .KJGJ_List2_WFont {
           float: left;
@@ -831,7 +1079,7 @@
       .WTSBList {
         width: 100%;
         height: 44px;
-        background: url('@/assets/images/Sponge_screen/HaiMian/HaiMian_ListBack.png');
+        background: url("@/assets/images/Sponge_screen/HaiMian/HaiMian_ListBack.png");
         margin-top: 9px;
         cursor: pointer;
 
@@ -865,7 +1113,11 @@
     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;
@@ -1051,6 +1303,10 @@
       //     color: #ebfeff;
       //   }
       // }
+      #CSPLBZTS {
+        width: 100%;
+        height: 100%;
+      }
       .SCPBZXImg {
         width: 100%;
         height: calc(100% - 10px);
@@ -1121,7 +1377,8 @@
     .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;