diff --git a/src/views/oneMap/SmartDrainage/PsLeftBox.vue b/src/views/oneMap/SmartDrainage/PsLeftBox.vue
index 959f1e3..c06a241 100644
--- a/src/views/oneMap/SmartDrainage/PsLeftBox.vue
+++ b/src/views/oneMap/SmartDrainage/PsLeftBox.vue
@@ -80,9 +80,8 @@
           <!-- <mapbox style="position: relative"></mapbox> -->
         </div>
         <div class="rainLegend flex flex-align-center">
-          <div class="flex flex-align-center" v-for="(item, index) in ranLeng[timeActive]" :key="index">
-            <span :class="index == 0 ? 'sBorder' : ''" :style="`background:${item.color}`"></span>
-            <div class="number"><em v-show="index == ranLeng[timeActive].length - 1">></em>{{ item.value }}</div>
+          <div class="flex flex-align-center" v-for="i in showRainList" :key="i">
+            <span :style="{ background: i.color }"></span>{{ i.value }}
           </div>
         </div>
       </div>
@@ -117,6 +116,7 @@
   { name: '风险点', num: '9', Imgurl: fxd, dw: '处' },
   { name: '缺陷管网', num: '6.1', Imgurl: qxgw, dw: 'km' },
 ]);
+const showRainList = ref([]);
 const Pointname = ref('');
 const dataList = ref([
   { num: '1', yls: '永安路', wz: '百米大道永安路' },
@@ -148,18 +148,44 @@
 // 时间点击事件
 function yearclick(val, index) {
   activedname.value = val.name;
+
+  showRainList.value = index == 0 ? ranLeng[0] : index == 1 ? ranLeng[1] : index == 2 ? ranLeng[2] : ranLeng[3];
+
   console.log('index', index);
   initRainImage([images[index]]);
 }
 const timeActive = ref(0);
 const ranLeng = [
   [
+    { value: '0-0.2', color: 'rgba(7, 213, 118, 0)' },
+    { value: '0.2-5', color: 'rgb(38, 129, 240,1)' },
+    { value: '5-16', color: 'rgba(222,230,0,1)' },
+    { value: '16-25', color: 'rgba(255,184,15,1)' },
+    { value: '>25', color: 'rgb(255, 26, 26,1)' },
+  ],
+  [
+    { value: '0-5', color: 'rgba(7, 213, 118, 0)' },
+    { value: '5-15', color: 'rgba(7, 213, 118, 1)' },
+    { value: '15-30', color: 'rgba(38, 129, 240,1)' },
+    { value: '30-70', color: 'rgba(247, 223, 56, 1)' },
+    { value: '70-140', color: 'rgba(230, 85, 41, 1)' },
+    { value: '>140', color: 'rgba(255, 26, 26, 1)' },
+  ],
+  [
+    { value: '0-5', color: 'rgba(7, 213, 118, 0)' },
+    { value: '5-15', color: 'rgba(7, 213, 118, 1)' },
+    { value: '15-30', color: 'rgba(38, 129, 240,1)' },
+    { value: '30-70', color: 'rgba(247, 223, 56, 1)' },
+    { value: '70-140', color: 'rgba(230, 85, 41, 1)' },
+    { value: '>140', color: 'rgba(255, 26, 26, 1)' },
+  ],
+  [
     { value: '0-10', color: 'rgba(7, 213, 118, 0)' },
     { value: '10-25', color: 'rgba(7, 213, 118, 1)' },
     { value: '25-50', color: 'rgba(38, 129, 240,1)' },
     { value: '50-100', color: 'rgba(247, 223, 56, 1)' },
     { value: '100-250', color: 'rgba(230, 85, 41, 1)' },
-    { value: '250', color: 'rgba(255, 55, 168, 1)' },
+    { value: '>250', color: 'rgba(255, 26, 26, 1)' },
   ],
 ];
 
@@ -340,6 +366,7 @@
 }
 
 onMounted(() => {
+  showRainList.value = ranLeng[0];
   getData();
   initRainImage([images[0]]);
 });
@@ -554,6 +581,7 @@
         justify-content: space-evenly;
         color: #fff;
         z-index: 10;
+
         .flex {
           height: 24px;
         }
@@ -567,6 +595,7 @@
           height: 14px;
           border-radius: 4px;
           margin-right: 5px;
+          border: 1px solid #fff;
         }
         .sBorder {
           border: 1px solid #39f7ff;

diff --git a/src/views/oneMap/SmartDrainage/PsLeftBox.vue b/src/views/oneMap/SmartDrainage/PsLeftBox.vue
index 959f1e3..c06a241 100644
--- a/src/views/oneMap/SmartDrainage/PsLeftBox.vue
+++ b/src/views/oneMap/SmartDrainage/PsLeftBox.vue
@@ -80,9 +80,8 @@
           <!-- <mapbox style="position: relative"></mapbox> -->
         </div>
         <div class="rainLegend flex flex-align-center">
-          <div class="flex flex-align-center" v-for="(item, index) in ranLeng[timeActive]" :key="index">
-            <span :class="index == 0 ? 'sBorder' : ''" :style="`background:${item.color}`"></span>
-            <div class="number"><em v-show="index == ranLeng[timeActive].length - 1">></em>{{ item.value }}</div>
+          <div class="flex flex-align-center" v-for="i in showRainList" :key="i">
+            <span :style="{ background: i.color }"></span>{{ i.value }}
           </div>
         </div>
       </div>
@@ -117,6 +116,7 @@
   { name: '风险点', num: '9', Imgurl: fxd, dw: '处' },
   { name: '缺陷管网', num: '6.1', Imgurl: qxgw, dw: 'km' },
 ]);
+const showRainList = ref([]);
 const Pointname = ref('');
 const dataList = ref([
   { num: '1', yls: '永安路', wz: '百米大道永安路' },
@@ -148,18 +148,44 @@
 // 时间点击事件
 function yearclick(val, index) {
   activedname.value = val.name;
+
+  showRainList.value = index == 0 ? ranLeng[0] : index == 1 ? ranLeng[1] : index == 2 ? ranLeng[2] : ranLeng[3];
+
   console.log('index', index);
   initRainImage([images[index]]);
 }
 const timeActive = ref(0);
 const ranLeng = [
   [
+    { value: '0-0.2', color: 'rgba(7, 213, 118, 0)' },
+    { value: '0.2-5', color: 'rgb(38, 129, 240,1)' },
+    { value: '5-16', color: 'rgba(222,230,0,1)' },
+    { value: '16-25', color: 'rgba(255,184,15,1)' },
+    { value: '>25', color: 'rgb(255, 26, 26,1)' },
+  ],
+  [
+    { value: '0-5', color: 'rgba(7, 213, 118, 0)' },
+    { value: '5-15', color: 'rgba(7, 213, 118, 1)' },
+    { value: '15-30', color: 'rgba(38, 129, 240,1)' },
+    { value: '30-70', color: 'rgba(247, 223, 56, 1)' },
+    { value: '70-140', color: 'rgba(230, 85, 41, 1)' },
+    { value: '>140', color: 'rgba(255, 26, 26, 1)' },
+  ],
+  [
+    { value: '0-5', color: 'rgba(7, 213, 118, 0)' },
+    { value: '5-15', color: 'rgba(7, 213, 118, 1)' },
+    { value: '15-30', color: 'rgba(38, 129, 240,1)' },
+    { value: '30-70', color: 'rgba(247, 223, 56, 1)' },
+    { value: '70-140', color: 'rgba(230, 85, 41, 1)' },
+    { value: '>140', color: 'rgba(255, 26, 26, 1)' },
+  ],
+  [
     { value: '0-10', color: 'rgba(7, 213, 118, 0)' },
     { value: '10-25', color: 'rgba(7, 213, 118, 1)' },
     { value: '25-50', color: 'rgba(38, 129, 240,1)' },
     { value: '50-100', color: 'rgba(247, 223, 56, 1)' },
     { value: '100-250', color: 'rgba(230, 85, 41, 1)' },
-    { value: '250', color: 'rgba(255, 55, 168, 1)' },
+    { value: '>250', color: 'rgba(255, 26, 26, 1)' },
   ],
 ];
 
@@ -340,6 +366,7 @@
 }
 
 onMounted(() => {
+  showRainList.value = ranLeng[0];
   getData();
   initRainImage([images[0]]);
 });
@@ -554,6 +581,7 @@
         justify-content: space-evenly;
         color: #fff;
         z-index: 10;
+
         .flex {
           height: 24px;
         }
@@ -567,6 +595,7 @@
           height: 14px;
           border-radius: 4px;
           margin-right: 5px;
+          border: 1px solid #fff;
         }
         .sBorder {
           border: 1px solid #39f7ff;
diff --git a/src/views/oneMap/floodPrevention/FholRightBox.vue b/src/views/oneMap/floodPrevention/FholRightBox.vue
index c2b55f6..c7d5a2c 100644
--- a/src/views/oneMap/floodPrevention/FholRightBox.vue
+++ b/src/views/oneMap/floodPrevention/FholRightBox.vue
@@ -76,20 +76,6 @@
           </div>
           <div class="percentVal flex-1">70%</div>
         </div>
-        <div class="info flex flex-justcontent-spacebetween">
-          <div class="flex">
-            <div class="circle"></div>
-            <div>累计抽排量</div>
-            <div class="value">108.9</div>
-            <div>万m³</div>
-          </div>
-          <div class="flex">
-            <div class="circle"></div>
-            <div>前水池水位</div>
-            <div class="value">8.9</div>
-            <div>m</div>
-          </div>
-        </div>
       </div>
       <div class="StationList flex flex-justcontent-start">
         <div class="item" v-for="item in list" :key="item.name">
@@ -129,18 +115,6 @@
       <dispatchEch />
     </div>
   </div>
-
-  <!-- 管网监测点详情 -->
-  <!-- <el-dialog
-    v-model="showPipe"
-    id="dialogContent"
-    title="管网运行监测"
-    width="900px"
-    append-to-body
-    :close-on-click-modal="false"
-  >
-    <PipeDetail v-if="showPipe"></PipeDetail>
-  </el-dialog> -->
 </template>
 
 <script setup>
@@ -148,20 +122,16 @@
 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';
-import PipeDetail from './PipeDetail.vue';
 const bzList = ref([
   { name: '工况', value: 1 },
   { name: '视频', value: 2 },
 ]);
-
 const bzname = ref('工况');
 function bzclick(val) {
   bzname.value = val.name;
 }
-
 const listData = ref([
   { siteName: '东关大街与长青路交叉口', siteStatus: '在线', warnInfo: '无风险' },
   { siteName: '大桥街与延河西路交叉口', siteStatus: '离线', warnInfo: '无风险' },
@@ -336,9 +306,8 @@
 }
 .PumpStation {
   width: 450px;
-  height: 33%;
+  height: 28%;
   margin-top: 3px;
-
   .bzxq {
     margin-top: 5px;
     color: #c6c6c6;
@@ -377,9 +346,7 @@
     margin: 3px auto;
     .StationMc {
       width: 435px;
-      height: 50%;
-      // background: yellow;
-
+      height: 50px;
       .drcpl {
         width: 360px;
         height: 22px;
@@ -421,55 +388,11 @@
         color: #ffffff;
         margin-left: 30px;
       }
-      .info {
-        color: #fff;
-        height: 40px;
-        background: linear-gradient(0deg, #00fbffa3 0%, #00fbff00 100%);
-        border-radius: 2px;
-        border: 1px solid #74dde1;
-        padding: 0 20px;
-        margin-top: 20px;
-        line-height: 40px;
-        // background: red;
-        > div {
-          .circle {
-            width: 7px;
-            height: 7px;
-            border-radius: 50%;
-            margin-right: 5px;
-          }
-          .value {
-            font-size: 18px;
-            margin-left: 5px;
-            margin-right: 3px;
-          }
-          &:nth-of-type(1) {
-            .circle {
-              background-color: rgba(58, 255, 248, 1);
-              position: relative;
-              top: 16px;
-            }
-            .value {
-              color: rgba(58, 255, 248, 1);
-            }
-          }
-          &:nth-of-type(2) {
-            .circle {
-              background-color: rgba(24, 232, 122, 1);
-              position: relative;
-              top: 16px;
-            }
-            .value {
-              color: rgba(24, 232, 122, 1);
-            }
-          }
-        }
-      }
     }
     .StationList {
-      // width: 435px;
-      height: 50%;
-      // background: black;
+      width: 435px;
+      height: calc(100% - 50px);
+      align-items: center;
       .item {
         padding-left: 5px;
         margin-top: 13px;
@@ -507,9 +430,8 @@
 }
 .DischargeMonitor {
   width: 450px;
-  height: 31%;
-  margin-top: 3px;
-  // background: red;
+  height: 34%;
+  margin-top: 15px;
   .JkMonitor {
     margin: 5px auto;
     width: 430px;

diff --git a/src/views/oneMap/SmartDrainage/PsLeftBox.vue b/src/views/oneMap/SmartDrainage/PsLeftBox.vue
index 959f1e3..c06a241 100644
--- a/src/views/oneMap/SmartDrainage/PsLeftBox.vue
+++ b/src/views/oneMap/SmartDrainage/PsLeftBox.vue
@@ -80,9 +80,8 @@
           <!-- <mapbox style="position: relative"></mapbox> -->
         </div>
         <div class="rainLegend flex flex-align-center">
-          <div class="flex flex-align-center" v-for="(item, index) in ranLeng[timeActive]" :key="index">
-            <span :class="index == 0 ? 'sBorder' : ''" :style="`background:${item.color}`"></span>
-            <div class="number"><em v-show="index == ranLeng[timeActive].length - 1">></em>{{ item.value }}</div>
+          <div class="flex flex-align-center" v-for="i in showRainList" :key="i">
+            <span :style="{ background: i.color }"></span>{{ i.value }}
           </div>
         </div>
       </div>
@@ -117,6 +116,7 @@
   { name: '风险点', num: '9', Imgurl: fxd, dw: '处' },
   { name: '缺陷管网', num: '6.1', Imgurl: qxgw, dw: 'km' },
 ]);
+const showRainList = ref([]);
 const Pointname = ref('');
 const dataList = ref([
   { num: '1', yls: '永安路', wz: '百米大道永安路' },
@@ -148,18 +148,44 @@
 // 时间点击事件
 function yearclick(val, index) {
   activedname.value = val.name;
+
+  showRainList.value = index == 0 ? ranLeng[0] : index == 1 ? ranLeng[1] : index == 2 ? ranLeng[2] : ranLeng[3];
+
   console.log('index', index);
   initRainImage([images[index]]);
 }
 const timeActive = ref(0);
 const ranLeng = [
   [
+    { value: '0-0.2', color: 'rgba(7, 213, 118, 0)' },
+    { value: '0.2-5', color: 'rgb(38, 129, 240,1)' },
+    { value: '5-16', color: 'rgba(222,230,0,1)' },
+    { value: '16-25', color: 'rgba(255,184,15,1)' },
+    { value: '>25', color: 'rgb(255, 26, 26,1)' },
+  ],
+  [
+    { value: '0-5', color: 'rgba(7, 213, 118, 0)' },
+    { value: '5-15', color: 'rgba(7, 213, 118, 1)' },
+    { value: '15-30', color: 'rgba(38, 129, 240,1)' },
+    { value: '30-70', color: 'rgba(247, 223, 56, 1)' },
+    { value: '70-140', color: 'rgba(230, 85, 41, 1)' },
+    { value: '>140', color: 'rgba(255, 26, 26, 1)' },
+  ],
+  [
+    { value: '0-5', color: 'rgba(7, 213, 118, 0)' },
+    { value: '5-15', color: 'rgba(7, 213, 118, 1)' },
+    { value: '15-30', color: 'rgba(38, 129, 240,1)' },
+    { value: '30-70', color: 'rgba(247, 223, 56, 1)' },
+    { value: '70-140', color: 'rgba(230, 85, 41, 1)' },
+    { value: '>140', color: 'rgba(255, 26, 26, 1)' },
+  ],
+  [
     { value: '0-10', color: 'rgba(7, 213, 118, 0)' },
     { value: '10-25', color: 'rgba(7, 213, 118, 1)' },
     { value: '25-50', color: 'rgba(38, 129, 240,1)' },
     { value: '50-100', color: 'rgba(247, 223, 56, 1)' },
     { value: '100-250', color: 'rgba(230, 85, 41, 1)' },
-    { value: '250', color: 'rgba(255, 55, 168, 1)' },
+    { value: '>250', color: 'rgba(255, 26, 26, 1)' },
   ],
 ];
 
@@ -340,6 +366,7 @@
 }
 
 onMounted(() => {
+  showRainList.value = ranLeng[0];
   getData();
   initRainImage([images[0]]);
 });
@@ -554,6 +581,7 @@
         justify-content: space-evenly;
         color: #fff;
         z-index: 10;
+
         .flex {
           height: 24px;
         }
@@ -567,6 +595,7 @@
           height: 14px;
           border-radius: 4px;
           margin-right: 5px;
+          border: 1px solid #fff;
         }
         .sBorder {
           border: 1px solid #39f7ff;
diff --git a/src/views/oneMap/floodPrevention/FholRightBox.vue b/src/views/oneMap/floodPrevention/FholRightBox.vue
index c2b55f6..c7d5a2c 100644
--- a/src/views/oneMap/floodPrevention/FholRightBox.vue
+++ b/src/views/oneMap/floodPrevention/FholRightBox.vue
@@ -76,20 +76,6 @@
           </div>
           <div class="percentVal flex-1">70%</div>
         </div>
-        <div class="info flex flex-justcontent-spacebetween">
-          <div class="flex">
-            <div class="circle"></div>
-            <div>累计抽排量</div>
-            <div class="value">108.9</div>
-            <div>万m³</div>
-          </div>
-          <div class="flex">
-            <div class="circle"></div>
-            <div>前水池水位</div>
-            <div class="value">8.9</div>
-            <div>m</div>
-          </div>
-        </div>
       </div>
       <div class="StationList flex flex-justcontent-start">
         <div class="item" v-for="item in list" :key="item.name">
@@ -129,18 +115,6 @@
       <dispatchEch />
     </div>
   </div>
-
-  <!-- 管网监测点详情 -->
-  <!-- <el-dialog
-    v-model="showPipe"
-    id="dialogContent"
-    title="管网运行监测"
-    width="900px"
-    append-to-body
-    :close-on-click-modal="false"
-  >
-    <PipeDetail v-if="showPipe"></PipeDetail>
-  </el-dialog> -->
 </template>
 
 <script setup>
@@ -148,20 +122,16 @@
 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';
-import PipeDetail from './PipeDetail.vue';
 const bzList = ref([
   { name: '工况', value: 1 },
   { name: '视频', value: 2 },
 ]);
-
 const bzname = ref('工况');
 function bzclick(val) {
   bzname.value = val.name;
 }
-
 const listData = ref([
   { siteName: '东关大街与长青路交叉口', siteStatus: '在线', warnInfo: '无风险' },
   { siteName: '大桥街与延河西路交叉口', siteStatus: '离线', warnInfo: '无风险' },
@@ -336,9 +306,8 @@
 }
 .PumpStation {
   width: 450px;
-  height: 33%;
+  height: 28%;
   margin-top: 3px;
-
   .bzxq {
     margin-top: 5px;
     color: #c6c6c6;
@@ -377,9 +346,7 @@
     margin: 3px auto;
     .StationMc {
       width: 435px;
-      height: 50%;
-      // background: yellow;
-
+      height: 50px;
       .drcpl {
         width: 360px;
         height: 22px;
@@ -421,55 +388,11 @@
         color: #ffffff;
         margin-left: 30px;
       }
-      .info {
-        color: #fff;
-        height: 40px;
-        background: linear-gradient(0deg, #00fbffa3 0%, #00fbff00 100%);
-        border-radius: 2px;
-        border: 1px solid #74dde1;
-        padding: 0 20px;
-        margin-top: 20px;
-        line-height: 40px;
-        // background: red;
-        > div {
-          .circle {
-            width: 7px;
-            height: 7px;
-            border-radius: 50%;
-            margin-right: 5px;
-          }
-          .value {
-            font-size: 18px;
-            margin-left: 5px;
-            margin-right: 3px;
-          }
-          &:nth-of-type(1) {
-            .circle {
-              background-color: rgba(58, 255, 248, 1);
-              position: relative;
-              top: 16px;
-            }
-            .value {
-              color: rgba(58, 255, 248, 1);
-            }
-          }
-          &:nth-of-type(2) {
-            .circle {
-              background-color: rgba(24, 232, 122, 1);
-              position: relative;
-              top: 16px;
-            }
-            .value {
-              color: rgba(24, 232, 122, 1);
-            }
-          }
-        }
-      }
     }
     .StationList {
-      // width: 435px;
-      height: 50%;
-      // background: black;
+      width: 435px;
+      height: calc(100% - 50px);
+      align-items: center;
       .item {
         padding-left: 5px;
         margin-top: 13px;
@@ -507,9 +430,8 @@
 }
 .DischargeMonitor {
   width: 450px;
-  height: 31%;
-  margin-top: 3px;
-  // background: red;
+  height: 34%;
+  margin-top: 15px;
   .JkMonitor {
     margin: 5px auto;
     width: 430px;
diff --git a/src/views/oneMap/floodPrevention/dispatchEch.vue b/src/views/oneMap/floodPrevention/dispatchEch.vue
index 94ccd5b..163bebe 100644
--- a/src/views/oneMap/floodPrevention/dispatchEch.vue
+++ b/src/views/oneMap/floodPrevention/dispatchEch.vue
@@ -81,7 +81,7 @@
         clockWise: false,
         hoverAnimation: false,
         radius: [63 - i * 8 + '%', 58 - i * 8 + '%'],
-        center: ['20%', '50%'],
+        center: ['25%', '50%'],
         label: {
           show: false,
         },
@@ -131,7 +131,7 @@
     },
     legend: {
       // x: 'lefr',
-      left: 200,
+      left: 220,
       y: 'center',
       itemGap: 10,
       itemWidth: 10,