diff --git a/src/assets/newImgs/HMScreen/bottom_img .png b/src/assets/newImgs/HMScreen/bottom_img .png
new file mode 100644
index 0000000..e56a338
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/bottom_img .png
Binary files differ

diff --git a/src/assets/newImgs/HMScreen/bottom_img .png b/src/assets/newImgs/HMScreen/bottom_img .png
new file mode 100644
index 0000000..e56a338
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/bottom_img .png
Binary files differ
diff --git a/src/assets/styles/publicXG.scss b/src/assets/styles/publicXG.scss
index 246d150..5166ebd 100644
--- a/src/assets/styles/publicXG.scss
+++ b/src/assets/styles/publicXG.scss
@@ -472,8 +472,8 @@
   padding: 10px;
 }
 .publicLeftHM {
-  height: calc(100vh - 110px);
-  border: 1px solid red;
+  height: calc(100vh - 150px);
+  // border: 1px solid red;
   position: absolute;
   left: 0px;
   top: 0px;
@@ -482,7 +482,7 @@
   overflow-y: auto;
 }
 .publicRightHM {
-  height: calc(100vh - 110px);
+  height: calc(100vh - 150px);
   border: 1px solid red;
   overflow-y: auto;
   position: absolute;

diff --git a/src/assets/newImgs/HMScreen/bottom_img .png b/src/assets/newImgs/HMScreen/bottom_img .png
new file mode 100644
index 0000000..e56a338
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/bottom_img .png
Binary files differ
diff --git a/src/assets/styles/publicXG.scss b/src/assets/styles/publicXG.scss
index 246d150..5166ebd 100644
--- a/src/assets/styles/publicXG.scss
+++ b/src/assets/styles/publicXG.scss
@@ -472,8 +472,8 @@
   padding: 10px;
 }
 .publicLeftHM {
-  height: calc(100vh - 110px);
-  border: 1px solid red;
+  height: calc(100vh - 150px);
+  // border: 1px solid red;
   position: absolute;
   left: 0px;
   top: 0px;
@@ -482,7 +482,7 @@
   overflow-y: auto;
 }
 .publicRightHM {
-  height: calc(100vh - 110px);
+  height: calc(100vh - 150px);
   border: 1px solid red;
   overflow-y: auto;
   position: absolute;
diff --git a/src/views/sponeScreen/Echarts/RainfallLegend.vue b/src/views/sponeScreen/Echarts/RainfallLegend.vue
index 99ee08e..f6069cc 100644
--- a/src/views/sponeScreen/Echarts/RainfallLegend.vue
+++ b/src/views/sponeScreen/Echarts/RainfallLegend.vue
@@ -33,13 +33,41 @@
         // backgroundColor: '#0e2147',
         grid: {
           //   left: '5%',
-          //   top: '5%',
-          bottom: '10%',
+          top: '10%',
+          bottom: '20%',
           right: '5%',
         },
+        tooltip: {
+          trigger: 'axis',
+          // formatter: "{b}：{c}㎡",
+          // feature: {
+          //   mark: { show: true },
+          //   dataView: { show: true, readOnly: false },
+          //   magicType: { show: true, type: ['line', 'bar'] },
+          //   restore: { show: true },
+          //   saveAsImage: { show: true }
+          // },
+          // axisPointer: {
+          //   type: "cross",
+          //   textStyle: {
+          //     color: "#fff"
+          //   }
+          // },
+          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 == 'K线性拟合' ? 'mm' : '毫米';
+                relVal += '<br/>' + params[i].marker + params[i].seriesName + ' ' + params[i].value + unit;
+              }
+            }
+            return relVal;
+          },
+        },
         legend: {
-          type: 'scroll',
-          data: '来电量',
+          // type: 'scroll',
+          data: '降雨量',
           itemWidth: 18,
           itemHeight: 12,
           textStyle: {
@@ -101,10 +129,10 @@
         series: [
           {
             symbolSize: 10,
-
-            name: '来电量',
+            name: '降雨量',
             type: 'line',
             data: props.data.data1,
+
             itemStyle: {
               normal: {
                 borderWidth: 5,
@@ -113,7 +141,6 @@
             },
           },
           {
-            name: '滑行的光点',
             type: 'lines',
             coordinateSystem: 'cartesian2d',
             symbolSize: 30,

diff --git a/src/assets/newImgs/HMScreen/bottom_img .png b/src/assets/newImgs/HMScreen/bottom_img .png
new file mode 100644
index 0000000..e56a338
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/bottom_img .png
Binary files differ
diff --git a/src/assets/styles/publicXG.scss b/src/assets/styles/publicXG.scss
index 246d150..5166ebd 100644
--- a/src/assets/styles/publicXG.scss
+++ b/src/assets/styles/publicXG.scss
@@ -472,8 +472,8 @@
   padding: 10px;
 }
 .publicLeftHM {
-  height: calc(100vh - 110px);
-  border: 1px solid red;
+  height: calc(100vh - 150px);
+  // border: 1px solid red;
   position: absolute;
   left: 0px;
   top: 0px;
@@ -482,7 +482,7 @@
   overflow-y: auto;
 }
 .publicRightHM {
-  height: calc(100vh - 110px);
+  height: calc(100vh - 150px);
   border: 1px solid red;
   overflow-y: auto;
   position: absolute;
diff --git a/src/views/sponeScreen/Echarts/RainfallLegend.vue b/src/views/sponeScreen/Echarts/RainfallLegend.vue
index 99ee08e..f6069cc 100644
--- a/src/views/sponeScreen/Echarts/RainfallLegend.vue
+++ b/src/views/sponeScreen/Echarts/RainfallLegend.vue
@@ -33,13 +33,41 @@
         // backgroundColor: '#0e2147',
         grid: {
           //   left: '5%',
-          //   top: '5%',
-          bottom: '10%',
+          top: '10%',
+          bottom: '20%',
           right: '5%',
         },
+        tooltip: {
+          trigger: 'axis',
+          // formatter: "{b}：{c}㎡",
+          // feature: {
+          //   mark: { show: true },
+          //   dataView: { show: true, readOnly: false },
+          //   magicType: { show: true, type: ['line', 'bar'] },
+          //   restore: { show: true },
+          //   saveAsImage: { show: true }
+          // },
+          // axisPointer: {
+          //   type: "cross",
+          //   textStyle: {
+          //     color: "#fff"
+          //   }
+          // },
+          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 == 'K线性拟合' ? 'mm' : '毫米';
+                relVal += '<br/>' + params[i].marker + params[i].seriesName + ' ' + params[i].value + unit;
+              }
+            }
+            return relVal;
+          },
+        },
         legend: {
-          type: 'scroll',
-          data: '来电量',
+          // type: 'scroll',
+          data: '降雨量',
           itemWidth: 18,
           itemHeight: 12,
           textStyle: {
@@ -101,10 +129,10 @@
         series: [
           {
             symbolSize: 10,
-
-            name: '来电量',
+            name: '降雨量',
             type: 'line',
             data: props.data.data1,
+
             itemStyle: {
               normal: {
                 borderWidth: 5,
@@ -113,7 +141,6 @@
             },
           },
           {
-            name: '滑行的光点',
             type: 'lines',
             coordinateSystem: 'cartesian2d',
             symbolSize: 30,
diff --git a/src/views/sponeScreen/Echarts/RainwaterTakeAdvantage.vue b/src/views/sponeScreen/Echarts/RainwaterTakeAdvantage.vue
index ff57445..f381603 100644
--- a/src/views/sponeScreen/Echarts/RainwaterTakeAdvantage.vue
+++ b/src/views/sponeScreen/Echarts/RainwaterTakeAdvantage.vue
@@ -29,7 +29,7 @@
     },
     grid: {
       top: '10%',
-      left: '-18%',
+      left: '-20%',
       right: '4%',
       bottom: '3%',
       containLabel: true,
@@ -62,7 +62,7 @@
       nameTextStyle: {
         color: 'rgba(96, 194, 255, 1)',
         nameLocation: 'start',
-        padding: [1, 10, -118, -142],
+        padding: [10, 10, -118, -142],
       },
       axisLabel: {
         color: '#fff',
@@ -133,8 +133,9 @@
 
 <style lang="scss" scoped>
 .asset_echart {
-  width: 450px;
+  width: 430px;
   height: 120px;
+  // background: red;
   // margin-left:-30px;
   &_echart {
     width: 100%;

diff --git a/src/assets/newImgs/HMScreen/bottom_img .png b/src/assets/newImgs/HMScreen/bottom_img .png
new file mode 100644
index 0000000..e56a338
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/bottom_img .png
Binary files differ
diff --git a/src/assets/styles/publicXG.scss b/src/assets/styles/publicXG.scss
index 246d150..5166ebd 100644
--- a/src/assets/styles/publicXG.scss
+++ b/src/assets/styles/publicXG.scss
@@ -472,8 +472,8 @@
   padding: 10px;
 }
 .publicLeftHM {
-  height: calc(100vh - 110px);
-  border: 1px solid red;
+  height: calc(100vh - 150px);
+  // border: 1px solid red;
   position: absolute;
   left: 0px;
   top: 0px;
@@ -482,7 +482,7 @@
   overflow-y: auto;
 }
 .publicRightHM {
-  height: calc(100vh - 110px);
+  height: calc(100vh - 150px);
   border: 1px solid red;
   overflow-y: auto;
   position: absolute;
diff --git a/src/views/sponeScreen/Echarts/RainfallLegend.vue b/src/views/sponeScreen/Echarts/RainfallLegend.vue
index 99ee08e..f6069cc 100644
--- a/src/views/sponeScreen/Echarts/RainfallLegend.vue
+++ b/src/views/sponeScreen/Echarts/RainfallLegend.vue
@@ -33,13 +33,41 @@
         // backgroundColor: '#0e2147',
         grid: {
           //   left: '5%',
-          //   top: '5%',
-          bottom: '10%',
+          top: '10%',
+          bottom: '20%',
           right: '5%',
         },
+        tooltip: {
+          trigger: 'axis',
+          // formatter: "{b}：{c}㎡",
+          // feature: {
+          //   mark: { show: true },
+          //   dataView: { show: true, readOnly: false },
+          //   magicType: { show: true, type: ['line', 'bar'] },
+          //   restore: { show: true },
+          //   saveAsImage: { show: true }
+          // },
+          // axisPointer: {
+          //   type: "cross",
+          //   textStyle: {
+          //     color: "#fff"
+          //   }
+          // },
+          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 == 'K线性拟合' ? 'mm' : '毫米';
+                relVal += '<br/>' + params[i].marker + params[i].seriesName + ' ' + params[i].value + unit;
+              }
+            }
+            return relVal;
+          },
+        },
         legend: {
-          type: 'scroll',
-          data: '来电量',
+          // type: 'scroll',
+          data: '降雨量',
           itemWidth: 18,
           itemHeight: 12,
           textStyle: {
@@ -101,10 +129,10 @@
         series: [
           {
             symbolSize: 10,
-
-            name: '来电量',
+            name: '降雨量',
             type: 'line',
             data: props.data.data1,
+
             itemStyle: {
               normal: {
                 borderWidth: 5,
@@ -113,7 +141,6 @@
             },
           },
           {
-            name: '滑行的光点',
             type: 'lines',
             coordinateSystem: 'cartesian2d',
             symbolSize: 30,
diff --git a/src/views/sponeScreen/Echarts/RainwaterTakeAdvantage.vue b/src/views/sponeScreen/Echarts/RainwaterTakeAdvantage.vue
index ff57445..f381603 100644
--- a/src/views/sponeScreen/Echarts/RainwaterTakeAdvantage.vue
+++ b/src/views/sponeScreen/Echarts/RainwaterTakeAdvantage.vue
@@ -29,7 +29,7 @@
     },
     grid: {
       top: '10%',
-      left: '-18%',
+      left: '-20%',
       right: '4%',
       bottom: '3%',
       containLabel: true,
@@ -62,7 +62,7 @@
       nameTextStyle: {
         color: 'rgba(96, 194, 255, 1)',
         nameLocation: 'start',
-        padding: [1, 10, -118, -142],
+        padding: [10, 10, -118, -142],
       },
       axisLabel: {
         color: '#fff',
@@ -133,8 +133,9 @@
 
 <style lang="scss" scoped>
 .asset_echart {
-  width: 450px;
+  width: 430px;
   height: 120px;
+  // background: red;
   // margin-left:-30px;
   &_echart {
     width: 100%;
diff --git a/src/views/sponeScreen/Echarts/SewageEcharts.vue b/src/views/sponeScreen/Echarts/SewageEcharts.vue
index 174c0fe..b12eab7 100644
--- a/src/views/sponeScreen/Echarts/SewageEcharts.vue
+++ b/src/views/sponeScreen/Echarts/SewageEcharts.vue
@@ -29,7 +29,7 @@
     },
     grid: {
       top: '10%',
-      left: '-18%',
+      left: '-20%',
       right: '4%',
       bottom: '3%',
       containLabel: true,
@@ -133,7 +133,7 @@
 
 <style lang="scss" scoped>
 .asset_echart {
-  width: 450px;
+  width: 430px;
   height: 120px;
   // margin-left:-30px;
   &_echart {

diff --git a/src/assets/newImgs/HMScreen/bottom_img .png b/src/assets/newImgs/HMScreen/bottom_img .png
new file mode 100644
index 0000000..e56a338
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/bottom_img .png
Binary files differ
diff --git a/src/assets/styles/publicXG.scss b/src/assets/styles/publicXG.scss
index 246d150..5166ebd 100644
--- a/src/assets/styles/publicXG.scss
+++ b/src/assets/styles/publicXG.scss
@@ -472,8 +472,8 @@
   padding: 10px;
 }
 .publicLeftHM {
-  height: calc(100vh - 110px);
-  border: 1px solid red;
+  height: calc(100vh - 150px);
+  // border: 1px solid red;
   position: absolute;
   left: 0px;
   top: 0px;
@@ -482,7 +482,7 @@
   overflow-y: auto;
 }
 .publicRightHM {
-  height: calc(100vh - 110px);
+  height: calc(100vh - 150px);
   border: 1px solid red;
   overflow-y: auto;
   position: absolute;
diff --git a/src/views/sponeScreen/Echarts/RainfallLegend.vue b/src/views/sponeScreen/Echarts/RainfallLegend.vue
index 99ee08e..f6069cc 100644
--- a/src/views/sponeScreen/Echarts/RainfallLegend.vue
+++ b/src/views/sponeScreen/Echarts/RainfallLegend.vue
@@ -33,13 +33,41 @@
         // backgroundColor: '#0e2147',
         grid: {
           //   left: '5%',
-          //   top: '5%',
-          bottom: '10%',
+          top: '10%',
+          bottom: '20%',
           right: '5%',
         },
+        tooltip: {
+          trigger: 'axis',
+          // formatter: "{b}：{c}㎡",
+          // feature: {
+          //   mark: { show: true },
+          //   dataView: { show: true, readOnly: false },
+          //   magicType: { show: true, type: ['line', 'bar'] },
+          //   restore: { show: true },
+          //   saveAsImage: { show: true }
+          // },
+          // axisPointer: {
+          //   type: "cross",
+          //   textStyle: {
+          //     color: "#fff"
+          //   }
+          // },
+          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 == 'K线性拟合' ? 'mm' : '毫米';
+                relVal += '<br/>' + params[i].marker + params[i].seriesName + ' ' + params[i].value + unit;
+              }
+            }
+            return relVal;
+          },
+        },
         legend: {
-          type: 'scroll',
-          data: '来电量',
+          // type: 'scroll',
+          data: '降雨量',
           itemWidth: 18,
           itemHeight: 12,
           textStyle: {
@@ -101,10 +129,10 @@
         series: [
           {
             symbolSize: 10,
-
-            name: '来电量',
+            name: '降雨量',
             type: 'line',
             data: props.data.data1,
+
             itemStyle: {
               normal: {
                 borderWidth: 5,
@@ -113,7 +141,6 @@
             },
           },
           {
-            name: '滑行的光点',
             type: 'lines',
             coordinateSystem: 'cartesian2d',
             symbolSize: 30,
diff --git a/src/views/sponeScreen/Echarts/RainwaterTakeAdvantage.vue b/src/views/sponeScreen/Echarts/RainwaterTakeAdvantage.vue
index ff57445..f381603 100644
--- a/src/views/sponeScreen/Echarts/RainwaterTakeAdvantage.vue
+++ b/src/views/sponeScreen/Echarts/RainwaterTakeAdvantage.vue
@@ -29,7 +29,7 @@
     },
     grid: {
       top: '10%',
-      left: '-18%',
+      left: '-20%',
       right: '4%',
       bottom: '3%',
       containLabel: true,
@@ -62,7 +62,7 @@
       nameTextStyle: {
         color: 'rgba(96, 194, 255, 1)',
         nameLocation: 'start',
-        padding: [1, 10, -118, -142],
+        padding: [10, 10, -118, -142],
       },
       axisLabel: {
         color: '#fff',
@@ -133,8 +133,9 @@
 
 <style lang="scss" scoped>
 .asset_echart {
-  width: 450px;
+  width: 430px;
   height: 120px;
+  // background: red;
   // margin-left:-30px;
   &_echart {
     width: 100%;
diff --git a/src/views/sponeScreen/Echarts/SewageEcharts.vue b/src/views/sponeScreen/Echarts/SewageEcharts.vue
index 174c0fe..b12eab7 100644
--- a/src/views/sponeScreen/Echarts/SewageEcharts.vue
+++ b/src/views/sponeScreen/Echarts/SewageEcharts.vue
@@ -29,7 +29,7 @@
     },
     grid: {
       top: '10%',
-      left: '-18%',
+      left: '-20%',
       right: '4%',
       bottom: '3%',
       containLabel: true,
@@ -133,7 +133,7 @@
 
 <style lang="scss" scoped>
 .asset_echart {
-  width: 450px;
+  width: 430px;
   height: 120px;
   // margin-left:-30px;
   &_echart {
diff --git a/src/views/sponeScreen/HaiMianScreen/index.vue b/src/views/sponeScreen/HaiMianScreen/index.vue
index 20a5186..de4eb0d 100644
--- a/src/views/sponeScreen/HaiMianScreen/index.vue
+++ b/src/views/sponeScreen/HaiMianScreen/index.vue
@@ -37,6 +37,9 @@
       <WaterFlood v-if="menuIndex == 4" :showPanel="showPanel"></WaterFlood>
       <LongYW v-if="menuIndex == 5" :showPanel="showPanel"></LongYW>
     </div>
+
+    <!-- 底部装饰 -->
+    <div class="bottomHM"></div>
   </div>
 </template>
 
@@ -162,5 +165,15 @@
       margin-bottom: 10px;
     }
   }
+  .bottomHM {
+    position: absolute;
+    bottom: 0px;
+    left: 0px;
+    z-index: 220;
+    width: 1920px;
+    height: 100px;
+    background: url('@/assets/newImgs/HMScreen/bottom_img .png') no-repeat;
+    background-size: 100% 100%;
+  }
 }
 </style>

diff --git a/src/assets/newImgs/HMScreen/bottom_img .png b/src/assets/newImgs/HMScreen/bottom_img .png
new file mode 100644
index 0000000..e56a338
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/bottom_img .png
Binary files differ
diff --git a/src/assets/styles/publicXG.scss b/src/assets/styles/publicXG.scss
index 246d150..5166ebd 100644
--- a/src/assets/styles/publicXG.scss
+++ b/src/assets/styles/publicXG.scss
@@ -472,8 +472,8 @@
   padding: 10px;
 }
 .publicLeftHM {
-  height: calc(100vh - 110px);
-  border: 1px solid red;
+  height: calc(100vh - 150px);
+  // border: 1px solid red;
   position: absolute;
   left: 0px;
   top: 0px;
@@ -482,7 +482,7 @@
   overflow-y: auto;
 }
 .publicRightHM {
-  height: calc(100vh - 110px);
+  height: calc(100vh - 150px);
   border: 1px solid red;
   overflow-y: auto;
   position: absolute;
diff --git a/src/views/sponeScreen/Echarts/RainfallLegend.vue b/src/views/sponeScreen/Echarts/RainfallLegend.vue
index 99ee08e..f6069cc 100644
--- a/src/views/sponeScreen/Echarts/RainfallLegend.vue
+++ b/src/views/sponeScreen/Echarts/RainfallLegend.vue
@@ -33,13 +33,41 @@
         // backgroundColor: '#0e2147',
         grid: {
           //   left: '5%',
-          //   top: '5%',
-          bottom: '10%',
+          top: '10%',
+          bottom: '20%',
           right: '5%',
         },
+        tooltip: {
+          trigger: 'axis',
+          // formatter: "{b}：{c}㎡",
+          // feature: {
+          //   mark: { show: true },
+          //   dataView: { show: true, readOnly: false },
+          //   magicType: { show: true, type: ['line', 'bar'] },
+          //   restore: { show: true },
+          //   saveAsImage: { show: true }
+          // },
+          // axisPointer: {
+          //   type: "cross",
+          //   textStyle: {
+          //     color: "#fff"
+          //   }
+          // },
+          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 == 'K线性拟合' ? 'mm' : '毫米';
+                relVal += '<br/>' + params[i].marker + params[i].seriesName + ' ' + params[i].value + unit;
+              }
+            }
+            return relVal;
+          },
+        },
         legend: {
-          type: 'scroll',
-          data: '来电量',
+          // type: 'scroll',
+          data: '降雨量',
           itemWidth: 18,
           itemHeight: 12,
           textStyle: {
@@ -101,10 +129,10 @@
         series: [
           {
             symbolSize: 10,
-
-            name: '来电量',
+            name: '降雨量',
             type: 'line',
             data: props.data.data1,
+
             itemStyle: {
               normal: {
                 borderWidth: 5,
@@ -113,7 +141,6 @@
             },
           },
           {
-            name: '滑行的光点',
             type: 'lines',
             coordinateSystem: 'cartesian2d',
             symbolSize: 30,
diff --git a/src/views/sponeScreen/Echarts/RainwaterTakeAdvantage.vue b/src/views/sponeScreen/Echarts/RainwaterTakeAdvantage.vue
index ff57445..f381603 100644
--- a/src/views/sponeScreen/Echarts/RainwaterTakeAdvantage.vue
+++ b/src/views/sponeScreen/Echarts/RainwaterTakeAdvantage.vue
@@ -29,7 +29,7 @@
     },
     grid: {
       top: '10%',
-      left: '-18%',
+      left: '-20%',
       right: '4%',
       bottom: '3%',
       containLabel: true,
@@ -62,7 +62,7 @@
       nameTextStyle: {
         color: 'rgba(96, 194, 255, 1)',
         nameLocation: 'start',
-        padding: [1, 10, -118, -142],
+        padding: [10, 10, -118, -142],
       },
       axisLabel: {
         color: '#fff',
@@ -133,8 +133,9 @@
 
 <style lang="scss" scoped>
 .asset_echart {
-  width: 450px;
+  width: 430px;
   height: 120px;
+  // background: red;
   // margin-left:-30px;
   &_echart {
     width: 100%;
diff --git a/src/views/sponeScreen/Echarts/SewageEcharts.vue b/src/views/sponeScreen/Echarts/SewageEcharts.vue
index 174c0fe..b12eab7 100644
--- a/src/views/sponeScreen/Echarts/SewageEcharts.vue
+++ b/src/views/sponeScreen/Echarts/SewageEcharts.vue
@@ -29,7 +29,7 @@
     },
     grid: {
       top: '10%',
-      left: '-18%',
+      left: '-20%',
       right: '4%',
       bottom: '3%',
       containLabel: true,
@@ -133,7 +133,7 @@
 
 <style lang="scss" scoped>
 .asset_echart {
-  width: 450px;
+  width: 430px;
   height: 120px;
   // margin-left:-30px;
   &_echart {
diff --git a/src/views/sponeScreen/HaiMianScreen/index.vue b/src/views/sponeScreen/HaiMianScreen/index.vue
index 20a5186..de4eb0d 100644
--- a/src/views/sponeScreen/HaiMianScreen/index.vue
+++ b/src/views/sponeScreen/HaiMianScreen/index.vue
@@ -37,6 +37,9 @@
       <WaterFlood v-if="menuIndex == 4" :showPanel="showPanel"></WaterFlood>
       <LongYW v-if="menuIndex == 5" :showPanel="showPanel"></LongYW>
     </div>
+
+    <!-- 底部装饰 -->
+    <div class="bottomHM"></div>
   </div>
 </template>
 
@@ -162,5 +165,15 @@
       margin-bottom: 10px;
     }
   }
+  .bottomHM {
+    position: absolute;
+    bottom: 0px;
+    left: 0px;
+    z-index: 220;
+    width: 1920px;
+    height: 100px;
+    background: url('@/assets/newImgs/HMScreen/bottom_img .png') no-repeat;
+    background-size: 100% 100%;
+  }
 }
 </style>
diff --git a/src/views/sponeScreen/cityGK/CurrentIssues.vue b/src/views/sponeScreen/cityGK/CurrentIssues.vue
new file mode 100644
index 0000000..90a8d2b
--- /dev/null
+++ b/src/views/sponeScreen/cityGK/CurrentIssues.vue
@@ -0,0 +1,149 @@
+<template>
+  <div class="a">
+    <div class="partTitleHM">现状问题</div>
+
+    <div class="partContHM">
+      <div class="HeadContent">
+        <div class="head-center">
+          <div
+            class="head-item"
+            v-for="(item, index) in CurrentIssuesrList"
+            :key="item"
+            :class="activedname == item.name ? 'activedright' : ''"
+            @click="CurrentIssuesrclick(item, index)"
+          >
+            {{ item.name }}
+          </div>
+        </div>
+      </div>
+
+      <div class="box-body">
+        <div class="precedence" v-for="item in CurrentListS">
+          <div class="headText">{{ item.name }}</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+const activedname = ref('内涝风险高');
+const CurrentIssuesrList = ref([
+  { name: '内涝风险高', value: 1 },
+  { name: '汛期水质无法稳定达标', value: 2 },
+  { name: '雨水资源化利用不足', value: 3 },
+]);
+const CurrentListS = ref([
+  {
+    name: '先天排水条件差，城市扩张加剧内涝',
+  },
+  {
+    name: '调蓄空间被侵占，蓄排平衡被破坏',
+  },
+  {
+    name: '排水防涝体系衔接不畅，排水通道能力有限',
+  },
+  {
+    name: '管渠、泵站排水能力不足，养护不到位',
+  },
+]);
+function CurrentIssuesrclick(val) {
+  activedname.value = val.name;
+  if (activedname.value == '内涝风险高') {
+    // console.log('内涝风险高111');
+  } else if (activedname.value == '汛期水质无法稳定达标') {
+    CurrentListS.value = [
+      {
+        name: '老城区合流制溢流污染控制不足',
+      },
+      {
+        name: '分流制区域雨污混错接点多面广',
+      },
+      {
+        name: '雨水径流污染控制弱',
+      },
+      {
+        name: ' 雨源型河道缺乏生态补水，河流自净能力不足',
+      },
+    ];
+    // console.log('汛期水质无法稳定达标');
+  } else {
+    CurrentListS.value = [
+      {
+        name: '资源型缺水城市',
+      },
+      {
+        name: '水资源供需矛盾突出',
+      },
+      {
+        name: '  雨水资源利用水平低',
+      },
+    ];
+    // console.log('雨水资源化利用不足');
+  }
+}
+onMounted(() => {
+  console.log(activedname.value, 'activedname.value111');
+});
+</script>
+
+<style lang="scss" scoped>
+.a {
+  margin-top: 5px;
+  height: 260px;
+  //   background: red;
+  .HeadContent {
+    width: 100%;
+    height: 30px;
+    // background: #2270ff;
+    text-align: center;
+    line-height: 25px;
+
+    .head-center {
+      height: 30px;
+      cursor: pointer;
+      font-size: 14px;
+      display: flex;
+      overflow: hidden;
+      overflow-x: auto;
+      color: #ffffff;
+      .head-item {
+        margin-left: 10px;
+        padding: 2px 3px;
+        border: 1px solid transparent;
+        background: #013a73;
+        height: 30px;
+        text-align: center;
+        min-width: 100px;
+        border: 1px solid #2270ff;
+      }
+      .activedright {
+        border: 1px solid #2cfce9;
+        color: #e4f5ff;
+        background: #166f84;
+      }
+    }
+  }
+  .box-body {
+    height: calc(100vh - 770px);
+
+    position: relative;
+    overflow: auto;
+    .precedence {
+      margin-top: 10px;
+      width: 100%;
+      height: 32px;
+      // line-height: 32px;
+      background: url('@/assets/newImgs/HMScreen/DF_img.png') no-repeat;
+      background-size: 100% 100%;
+      .headText {
+        line-height: 32px;
+        font-size: 16px;
+        text-align: center;
+        color: #a5d9f7;
+        // background: yellow;
+      }
+    }
+  }
+}
+</style>

diff --git a/src/assets/newImgs/HMScreen/bottom_img .png b/src/assets/newImgs/HMScreen/bottom_img .png
new file mode 100644
index 0000000..e56a338
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/bottom_img .png
Binary files differ
diff --git a/src/assets/styles/publicXG.scss b/src/assets/styles/publicXG.scss
index 246d150..5166ebd 100644
--- a/src/assets/styles/publicXG.scss
+++ b/src/assets/styles/publicXG.scss
@@ -472,8 +472,8 @@
   padding: 10px;
 }
 .publicLeftHM {
-  height: calc(100vh - 110px);
-  border: 1px solid red;
+  height: calc(100vh - 150px);
+  // border: 1px solid red;
   position: absolute;
   left: 0px;
   top: 0px;
@@ -482,7 +482,7 @@
   overflow-y: auto;
 }
 .publicRightHM {
-  height: calc(100vh - 110px);
+  height: calc(100vh - 150px);
   border: 1px solid red;
   overflow-y: auto;
   position: absolute;
diff --git a/src/views/sponeScreen/Echarts/RainfallLegend.vue b/src/views/sponeScreen/Echarts/RainfallLegend.vue
index 99ee08e..f6069cc 100644
--- a/src/views/sponeScreen/Echarts/RainfallLegend.vue
+++ b/src/views/sponeScreen/Echarts/RainfallLegend.vue
@@ -33,13 +33,41 @@
         // backgroundColor: '#0e2147',
         grid: {
           //   left: '5%',
-          //   top: '5%',
-          bottom: '10%',
+          top: '10%',
+          bottom: '20%',
           right: '5%',
         },
+        tooltip: {
+          trigger: 'axis',
+          // formatter: "{b}：{c}㎡",
+          // feature: {
+          //   mark: { show: true },
+          //   dataView: { show: true, readOnly: false },
+          //   magicType: { show: true, type: ['line', 'bar'] },
+          //   restore: { show: true },
+          //   saveAsImage: { show: true }
+          // },
+          // axisPointer: {
+          //   type: "cross",
+          //   textStyle: {
+          //     color: "#fff"
+          //   }
+          // },
+          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 == 'K线性拟合' ? 'mm' : '毫米';
+                relVal += '<br/>' + params[i].marker + params[i].seriesName + ' ' + params[i].value + unit;
+              }
+            }
+            return relVal;
+          },
+        },
         legend: {
-          type: 'scroll',
-          data: '来电量',
+          // type: 'scroll',
+          data: '降雨量',
           itemWidth: 18,
           itemHeight: 12,
           textStyle: {
@@ -101,10 +129,10 @@
         series: [
           {
             symbolSize: 10,
-
-            name: '来电量',
+            name: '降雨量',
             type: 'line',
             data: props.data.data1,
+
             itemStyle: {
               normal: {
                 borderWidth: 5,
@@ -113,7 +141,6 @@
             },
           },
           {
-            name: '滑行的光点',
             type: 'lines',
             coordinateSystem: 'cartesian2d',
             symbolSize: 30,
diff --git a/src/views/sponeScreen/Echarts/RainwaterTakeAdvantage.vue b/src/views/sponeScreen/Echarts/RainwaterTakeAdvantage.vue
index ff57445..f381603 100644
--- a/src/views/sponeScreen/Echarts/RainwaterTakeAdvantage.vue
+++ b/src/views/sponeScreen/Echarts/RainwaterTakeAdvantage.vue
@@ -29,7 +29,7 @@
     },
     grid: {
       top: '10%',
-      left: '-18%',
+      left: '-20%',
       right: '4%',
       bottom: '3%',
       containLabel: true,
@@ -62,7 +62,7 @@
       nameTextStyle: {
         color: 'rgba(96, 194, 255, 1)',
         nameLocation: 'start',
-        padding: [1, 10, -118, -142],
+        padding: [10, 10, -118, -142],
       },
       axisLabel: {
         color: '#fff',
@@ -133,8 +133,9 @@
 
 <style lang="scss" scoped>
 .asset_echart {
-  width: 450px;
+  width: 430px;
   height: 120px;
+  // background: red;
   // margin-left:-30px;
   &_echart {
     width: 100%;
diff --git a/src/views/sponeScreen/Echarts/SewageEcharts.vue b/src/views/sponeScreen/Echarts/SewageEcharts.vue
index 174c0fe..b12eab7 100644
--- a/src/views/sponeScreen/Echarts/SewageEcharts.vue
+++ b/src/views/sponeScreen/Echarts/SewageEcharts.vue
@@ -29,7 +29,7 @@
     },
     grid: {
       top: '10%',
-      left: '-18%',
+      left: '-20%',
       right: '4%',
       bottom: '3%',
       containLabel: true,
@@ -133,7 +133,7 @@
 
 <style lang="scss" scoped>
 .asset_echart {
-  width: 450px;
+  width: 430px;
   height: 120px;
   // margin-left:-30px;
   &_echart {
diff --git a/src/views/sponeScreen/HaiMianScreen/index.vue b/src/views/sponeScreen/HaiMianScreen/index.vue
index 20a5186..de4eb0d 100644
--- a/src/views/sponeScreen/HaiMianScreen/index.vue
+++ b/src/views/sponeScreen/HaiMianScreen/index.vue
@@ -37,6 +37,9 @@
       <WaterFlood v-if="menuIndex == 4" :showPanel="showPanel"></WaterFlood>
       <LongYW v-if="menuIndex == 5" :showPanel="showPanel"></LongYW>
     </div>
+
+    <!-- 底部装饰 -->
+    <div class="bottomHM"></div>
   </div>
 </template>
 
@@ -162,5 +165,15 @@
       margin-bottom: 10px;
     }
   }
+  .bottomHM {
+    position: absolute;
+    bottom: 0px;
+    left: 0px;
+    z-index: 220;
+    width: 1920px;
+    height: 100px;
+    background: url('@/assets/newImgs/HMScreen/bottom_img .png') no-repeat;
+    background-size: 100% 100%;
+  }
 }
 </style>
diff --git a/src/views/sponeScreen/cityGK/CurrentIssues.vue b/src/views/sponeScreen/cityGK/CurrentIssues.vue
new file mode 100644
index 0000000..90a8d2b
--- /dev/null
+++ b/src/views/sponeScreen/cityGK/CurrentIssues.vue
@@ -0,0 +1,149 @@
+<template>
+  <div class="a">
+    <div class="partTitleHM">现状问题</div>
+
+    <div class="partContHM">
+      <div class="HeadContent">
+        <div class="head-center">
+          <div
+            class="head-item"
+            v-for="(item, index) in CurrentIssuesrList"
+            :key="item"
+            :class="activedname == item.name ? 'activedright' : ''"
+            @click="CurrentIssuesrclick(item, index)"
+          >
+            {{ item.name }}
+          </div>
+        </div>
+      </div>
+
+      <div class="box-body">
+        <div class="precedence" v-for="item in CurrentListS">
+          <div class="headText">{{ item.name }}</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+const activedname = ref('内涝风险高');
+const CurrentIssuesrList = ref([
+  { name: '内涝风险高', value: 1 },
+  { name: '汛期水质无法稳定达标', value: 2 },
+  { name: '雨水资源化利用不足', value: 3 },
+]);
+const CurrentListS = ref([
+  {
+    name: '先天排水条件差，城市扩张加剧内涝',
+  },
+  {
+    name: '调蓄空间被侵占，蓄排平衡被破坏',
+  },
+  {
+    name: '排水防涝体系衔接不畅，排水通道能力有限',
+  },
+  {
+    name: '管渠、泵站排水能力不足，养护不到位',
+  },
+]);
+function CurrentIssuesrclick(val) {
+  activedname.value = val.name;
+  if (activedname.value == '内涝风险高') {
+    // console.log('内涝风险高111');
+  } else if (activedname.value == '汛期水质无法稳定达标') {
+    CurrentListS.value = [
+      {
+        name: '老城区合流制溢流污染控制不足',
+      },
+      {
+        name: '分流制区域雨污混错接点多面广',
+      },
+      {
+        name: '雨水径流污染控制弱',
+      },
+      {
+        name: ' 雨源型河道缺乏生态补水，河流自净能力不足',
+      },
+    ];
+    // console.log('汛期水质无法稳定达标');
+  } else {
+    CurrentListS.value = [
+      {
+        name: '资源型缺水城市',
+      },
+      {
+        name: '水资源供需矛盾突出',
+      },
+      {
+        name: '  雨水资源利用水平低',
+      },
+    ];
+    // console.log('雨水资源化利用不足');
+  }
+}
+onMounted(() => {
+  console.log(activedname.value, 'activedname.value111');
+});
+</script>
+
+<style lang="scss" scoped>
+.a {
+  margin-top: 5px;
+  height: 260px;
+  //   background: red;
+  .HeadContent {
+    width: 100%;
+    height: 30px;
+    // background: #2270ff;
+    text-align: center;
+    line-height: 25px;
+
+    .head-center {
+      height: 30px;
+      cursor: pointer;
+      font-size: 14px;
+      display: flex;
+      overflow: hidden;
+      overflow-x: auto;
+      color: #ffffff;
+      .head-item {
+        margin-left: 10px;
+        padding: 2px 3px;
+        border: 1px solid transparent;
+        background: #013a73;
+        height: 30px;
+        text-align: center;
+        min-width: 100px;
+        border: 1px solid #2270ff;
+      }
+      .activedright {
+        border: 1px solid #2cfce9;
+        color: #e4f5ff;
+        background: #166f84;
+      }
+    }
+  }
+  .box-body {
+    height: calc(100vh - 770px);
+
+    position: relative;
+    overflow: auto;
+    .precedence {
+      margin-top: 10px;
+      width: 100%;
+      height: 32px;
+      // line-height: 32px;
+      background: url('@/assets/newImgs/HMScreen/DF_img.png') no-repeat;
+      background-size: 100% 100%;
+      .headText {
+        line-height: 32px;
+        font-size: 16px;
+        text-align: center;
+        color: #a5d9f7;
+        // background: yellow;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/sponeScreen/cityGK/cityplanning.vue b/src/views/sponeScreen/cityGK/cityplanning.vue
index 6aaad04..7a36e6e 100644
--- a/src/views/sponeScreen/cityGK/cityplanning.vue
+++ b/src/views/sponeScreen/cityGK/cityplanning.vue
@@ -1,107 +1,109 @@
 <template>
-  <div class="partTitleHM">城市规划</div>
-  <div class="partContHM">
-    <!-- 水安全规划 -->
-    <div class="rightBox rightBox1">
-      <div class="ListTitle">水安全规划</div>
-      <div class="precedence">
-        <div class="eachinfo">
-          <div class="headText">年径流总量控制率</div>
-          <div class="middleext">
-            <div class="middleextA">
-              <p class="NumberListMB">目标:</p>
-              <p class="NumberList">&nbsp; 70%</p>
+  <div class="a">
+    <div class="partTitleHM">城市规划</div>
+    <div class="partContHM">
+      <!-- 水安全规划 -->
+      <div class="rightBox rightBox1">
+        <div class="ListTitle">水安全规划</div>
+        <div class="precedence">
+          <div class="eachinfo">
+            <div class="headText">年径流总量控制率</div>
+            <div class="middleext">
+              <div class="middleextA">
+                <p class="NumberListMB">目标:</p>
+                <p class="NumberList">&nbsp; 70%</p>
+              </div>
+              <div class="rightText">以上</div>
             </div>
-            <div class="rightText">以上</div>
+          </div>
+        </div>
+        <div class="XqDetails">
+          <div class="DetailsOne">排涝规则</div>
+          <div class="DetailsTwo">
+            <span class="DetailsTwoA">新建改造泵站</span>
+            <span class="DetailsTwoB"> &nbsp;54</span>&nbsp;座
+          </div>
+          <div class="DetailsTthree">
+            <span>新建雨水管渠</span>
+            <span class="DetailsTthreeA"> &nbsp;723.83</span> &nbsp;公里
           </div>
         </div>
       </div>
-      <div class="XqDetails">
-        <div class="DetailsOne">排涝规则</div>
-        <div class="DetailsTwo">
-          <span class="DetailsTwoA">新建改造泵站</span>
-          <span class="DetailsTwoB"> &nbsp;54</span>&nbsp;座
-        </div>
-        <div class="DetailsTthree">
-          <span>新建雨水管渠</span>
-          <span class="DetailsTthreeA"> &nbsp;723.83</span> &nbsp;公里
-        </div>
-      </div>
-    </div>
-    <!-- 水环境规划 -->
-    <div class="rightBox rightBox2">
-      <div class="ListTitle">水环境规划</div>
-      <div class="precedence" v-for="item in policiesList" :key="item">
-        <div class="eachinfo">
-          <div class="headText">{{ item.name }}</div>
-          <div class="middleext">
-            <div class="middleextA">
-              <span class="NumberListMB">目标:</span>
-              <span class="NumberList">&nbsp; {{ item.NumberA }}</span>
+      <!-- 水环境规划 -->
+      <div class="rightBox rightBox2">
+        <div class="ListTitle">水环境规划</div>
+        <div class="precedence" v-for="item in policiesList" :key="item">
+          <div class="eachinfo">
+            <div class="headText">{{ item.name }}</div>
+            <div class="middleext">
+              <div class="middleextA">
+                <span class="NumberListMB">目标:</span>
+                <span class="NumberList">&nbsp; {{ item.NumberA }}</span>
+              </div>
+              <div class="rightText">{{ item.content }}</div>
             </div>
-            <div class="rightText">{{ item.content }}</div>
           </div>
         </div>
       </div>
-    </div>
-    <!-- 水生态规划 -->
-    <div class="rightBox rightBox3">
-      <div class="ListTitle">水生态规划</div>
-      <div class="XqDetails" v-for="item in policiesListS">
-        <div class="DetailsAquaticEcology">
-          <div class="icon"></div>
-          {{ item.name }}
-        </div>
-        <div class="DetailsAquaticEcologyTwo">
-          <p class="DetailsTwoA">{{ item.NumberA }}</p>
-          <p class="DetailsTwoB">{{ item.content }}</p>
+      <!-- 水生态规划 -->
+      <div class="rightBox rightBox3">
+        <div class="ListTitle">水生态规划</div>
+        <div class="XqDetails" v-for="item in policiesListS">
+          <div class="DetailsAquaticEcology">
+            <div class="icon"></div>
+            {{ item.name }}
+          </div>
+          <div class="DetailsAquaticEcologyTwo">
+            <p class="DetailsTwoA">{{ item.NumberA }}</p>
+            <p class="DetailsTwoB">{{ item.content }}</p>
+          </div>
         </div>
       </div>
-    </div>
 
-    <!-- 水资源规划 -->
-    <div class="rightBox rightBox4">
-      <div class="ListTitle">水资源规划</div>
-      <div class="ListContent">
-        <!-- 雨水资源利用 -->
-        <div class="sewageResources">
-          <div class="sewageTop">
-            <div class="YStext">雨水资源利用</div>
+      <!-- 水资源规划 -->
+      <div class="rightBox rightBox4">
+        <div class="ListTitle">水资源规划</div>
+        <div class="ListContent">
+          <!-- 雨水资源利用 -->
+          <div class="sewageResources">
+            <div class="sewageTop">
+              <div class="YStext">雨水资源利用</div>
+            </div>
+            <div>
+              <RainwaterTakeAdvantage></RainwaterTakeAdvantage>
+            </div>
           </div>
-          <div>
-            <RainwaterTakeAdvantage></RainwaterTakeAdvantage>
-          </div>
-        </div>
-        <!-- 污水资源利用 -->
-        <div class="sewageResources">
-          <div class="sewageTop">
-            <div class="wstext">污水资源利用</div>
-            <div class="wsdescribe">7座污水处理厂总设计规模：55 万吨/日</div>
-          </div>
-          <div>
-            <SewageEcharts></SewageEcharts>
+          <!-- 污水资源利用 -->
+          <div class="sewageResources">
+            <div class="sewageTop">
+              <div class="wstext">污水资源利用</div>
+              <div class="wsdescribe">7座污水处理厂总设计规模：55 万吨/日</div>
+            </div>
+            <div>
+              <SewageEcharts></SewageEcharts>
+            </div>
           </div>
         </div>
       </div>
-    </div>
 
-    <!-- 供水规划 -->
-    <div class="rightBox rightBox5">
-      <div class="ListTitle">供水规划</div>
-      <div class="ListContent">
-        <div class="waterSupply">
-          <div class="bottomBgc"></div>
-          <div class="eachDescribe">
-            <div class="icon bgcblue"></div>
-            <div class="text">近期</div>
-            <div class="sum colorBlue">68.7</div>
-            <div class="unit">万立方米/日</div>
-          </div>
-          <div class="eachDescribe">
-            <div class="icon bgcYellow"></div>
-            <div class="text">远期</div>
-            <div class="sum colorYellow">88.7</div>
-            <div class="unit">万立方米/日</div>
+      <!-- 供水规划 -->
+      <div class="rightBox rightBox5">
+        <div class="ListTitle">供水规划</div>
+        <div class="ListContent">
+          <div class="waterSupply">
+            <div class="bottomBgc"></div>
+            <div class="eachDescribe">
+              <div class="icon bgcblue"></div>
+              <div class="text">近期</div>
+              <div class="sum colorBlue">68.7</div>
+              <div class="unit">万立方米/日</div>
+            </div>
+            <div class="eachDescribe">
+              <div class="icon bgcYellow"></div>
+              <div class="text">远期</div>
+              <div class="sum colorYellow">88.7</div>
+              <div class="unit">万立方米/日</div>
+            </div>
           </div>
         </div>
       </div>
@@ -146,242 +148,248 @@
 </script>
 
 <style lang="scss" scoped>
-.rightBox {
-  .ListTitle {
-    width: 100%;
-    height: 32px;
-    line-height: 32px;
-    background: url('@/assets/newImgs/HMScreen/title_img.png') no-repeat;
-    background-size: 100% 100%;
-    position: relative;
-    // box-sizing: border-box;
-    padding-left: 30px;
-    font-family: SourceHanSansCN-Medium;
-    font-weight: bold;
-    font-size: 15px;
-    color: #e4f5ff;
-  }
-  .precedence {
-    margin-top: 5px;
-    width: 100%;
-    height: 32px;
-    // line-height: 32px;
-    background: url('@/assets/newImgs/HMScreen/DF_img.png') no-repeat;
-    background-size: 100% 100%;
-    .eachinfo {
-      display: flex;
+.a {
+  height: 500px;
+  // background: red;
+  overflow-x: hidden;
+  overflow-y: auto;
+  .rightBox {
+    .ListTitle {
+      width: 100%;
       height: 32px;
-      color: #b8ecff;
-      //   background: red;
-      .headText {
-        width: 60%;
-        padding-left: 20px;
-        line-height: 32px;
-        font-size: 16px;
-        // background: yellow;
-      }
-      .middleext {
+      line-height: 32px;
+      background: url('@/assets/newImgs/HMScreen/title_img.png') no-repeat;
+      background-size: 100% 100%;
+      position: relative;
+      // box-sizing: border-box;
+      padding-left: 30px;
+      font-family: SourceHanSansCN-Medium;
+      font-weight: bold;
+      font-size: 15px;
+      color: #e4f5ff;
+    }
+    .precedence {
+      margin-top: 5px;
+      width: 100%;
+      height: 32px;
+      // line-height: 32px;
+      background: url('@/assets/newImgs/HMScreen/DF_img.png') no-repeat;
+      background-size: 100% 100%;
+      .eachinfo {
         display: flex;
-        width: 40%;
-        text-align: center;
-        line-height: 32px;
-        font-size: 16px;
-        // background: blue;
-        .middleextA {
-          width: 65%;
-          text-align: center;
-          //   background: red;
+        height: 32px;
+        color: #b8ecff;
+        //   background: red;
+        .headText {
+          width: 60%;
+          padding-left: 20px;
+          line-height: 32px;
+          font-size: 16px;
+          // background: yellow;
+        }
+        .middleext {
           display: flex;
-          .NumberListMB {
-            // background: #f7c987;
-            width: 40%;
+          width: 40%;
+          text-align: center;
+          line-height: 32px;
+          font-size: 16px;
+          // background: blue;
+          .middleextA {
+            width: 65%;
+            text-align: center;
+            //   background: red;
+            display: flex;
+            .NumberListMB {
+              // background: #f7c987;
+              width: 40%;
+            }
+            .NumberList {
+              // background: lawngreen;
+              width: 60%;
+              font-size: 18px;
+              color: #3afff8;
+            }
           }
-          .NumberList {
-            // background: lawngreen;
-            width: 60%;
-            font-size: 18px;
-            color: #3afff8;
+        }
+        .rightText {
+          width: 35%;
+          line-height: 32px;
+          text-align: center;
+          // background: lawngreen;
+        }
+      }
+    }
+    .XqDetails {
+      margin-top: 8px;
+      height: 32px;
+      display: flex;
+      color: #b8ecff;
+      font-family: SourceHanSansCN-Medium;
+      font-weight: bold;
+      font-size: 15px;
+      // background: red;
+      .DetailsOne {
+        width: 18%;
+        line-height: 30px;
+        text-align: center;
+        //   background: yellow;
+      }
+      .DetailsTwo {
+        width: 40%;
+        line-height: 30px;
+        text-align: center;
+        //   background: blueviolet;
+        .DetailsTwoB {
+          color: #f7c987;
+        }
+      }
+      .DetailsTthree {
+        width: 45%;
+        line-height: 30px;
+        text-align: center;
+        //   background: #3afff8;
+        .DetailsTthreeA {
+          color: #3afff8;
+        }
+      }
+
+      // 水生态规划
+      .DetailsAquaticEcology {
+        width: 45%;
+        line-height: 30px;
+        .icon {
+          display: inline-block;
+          border-color: #3afff8;
+          border-style: solid;
+          border-width: 2px;
+          width: 0;
+          height: 0;
+          margin-right: 7px;
+          position: relative;
+          top: -3px;
+          -moz-transform: rotate(45deg);
+          -webkit-transform: rotate(45deg);
+          -o-transform: rotate(45deg);
+          transform: rotate(45deg);
+        }
+        //   background: red;
+      }
+      .DetailsAquaticEcologyTwo {
+        width: 55%;
+        display: flex;
+        //   background: yellowgreen;
+        line-height: 30px;
+        text-align: center;
+        .DetailsTwoA {
+          width: 50%;
+          color: #3afff8;
+          // background: red;
+        }
+        .DetailsTwoB {
+          width: 50%;
+          color: #f7c987;
+          // background: rgb(205, 50, 50);
+        }
+      }
+    }
+    .ListContent {
+      width: 100%;
+      height: calc(100% - 34px);
+      overflow: auto;
+      // background: yellow;
+      .sewageResources {
+        // 污水资源利用
+        .sewageTop {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          font-family: Source Han Sans CN;
+          font-weight: bold;
+          font-size: 16px;
+          padding: 10px 30px 0px 10px;
+          .wsdescribe {
+            color: #fff;
+          }
+          .wstext {
+            color: #ffed52;
+          }
+          .YStext {
+            color: #18ffff;
           }
         }
       }
-      .rightText {
-        width: 35%;
-        line-height: 32px;
-        text-align: center;
-        // background: lawngreen;
-      }
-    }
-  }
-  .XqDetails {
-    margin-top: 8px;
-    height: 32px;
-    display: flex;
-    color: #b8ecff;
-    font-family: SourceHanSansCN-Medium;
-    font-weight: bold;
-    font-size: 15px;
-    // background: red;
-    .DetailsOne {
-      width: 18%;
-      line-height: 30px;
-      text-align: center;
-      //   background: yellow;
-    }
-    .DetailsTwo {
-      width: 40%;
-      line-height: 30px;
-      text-align: center;
-      //   background: blueviolet;
-      .DetailsTwoB {
-        color: #f7c987;
-      }
-    }
-    .DetailsTthree {
-      width: 45%;
-      line-height: 30px;
-      text-align: center;
-      //   background: #3afff8;
-      .DetailsTthreeA {
-        color: #3afff8;
-      }
     }
 
-    // 水生态规划
-    .DetailsAquaticEcology {
-      width: 45%;
-      line-height: 30px;
-      .icon {
-        display: inline-block;
-        border-color: #3afff8;
-        border-style: solid;
-        border-width: 2px;
-        width: 0;
-        height: 0;
-        margin-right: 7px;
-        position: relative;
-        top: -3px;
-        -moz-transform: rotate(45deg);
-        -webkit-transform: rotate(45deg);
-        -o-transform: rotate(45deg);
-        transform: rotate(45deg);
-      }
-      //   background: red;
-    }
-    .DetailsAquaticEcologyTwo {
-      width: 55%;
+    // 供水规划
+    .waterSupply {
+      position: relative;
       display: flex;
-      //   background: yellowgreen;
-      line-height: 30px;
-      text-align: center;
-      .DetailsTwoA {
-        width: 50%;
-        color: #3afff8;
-        // background: red;
-      }
-      .DetailsTwoB {
-        width: 50%;
-        color: #f7c987;
-        // background: rgb(205, 50, 50);
-      }
-    }
-  }
-  .ListContent {
-    width: 100%;
-    height: calc(100% - 34px);
-    overflow: auto;
-    // background: yellow;
-    .sewageResources {
-      // 污水资源利用
-      .sewageTop {
+      justify-content: space-around;
+      align-items: center;
+      .eachDescribe {
         display: flex;
-        justify-content: space-between;
         align-items: center;
         font-family: Source Han Sans CN;
-        font-weight: bold;
-        font-size: 16px;
-        padding: 10px 30px 0px 10px;
-        .wsdescribe {
-          color: #fff;
+        font-weight: 400;
+        padding-top: 5px;
+        .unit {
+          padding-top: 5px;
+          color: #ffffff;
         }
-        .wstext {
+        .icon {
+          width: 8px;
+          height: 8px;
+          border-radius: 50%;
+        }
+        .colorYellow {
           color: #ffed52;
         }
-        .YStext {
+        .colorBlue {
           color: #18ffff;
         }
+        .bgcYellow {
+          background: #ffed52;
+        }
+        .bgcblue {
+          background: #18ffff;
+        }
+        .text {
+          padding: 0 10px 0 6px;
+          font-size: 16px;
+        }
+        .sum {
+          font-size: 20px;
+          padding-right: 10px;
+        }
+      }
+      .bottomBgc {
+        width: 100%;
+        height: 16px;
+
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        background: linear-gradient(0deg, rgba(24, 149, 255, 0.5) 0%, rgba(24, 149, 255, 0) 100%);
       }
     }
   }
-
-  // 供水规划
-  .waterSupply {
-    position: relative;
-    display: flex;
-    justify-content: space-around;
-    align-items: center;
-    .eachDescribe {
-      display: flex;
-      align-items: center;
-      font-family: Source Han Sans CN;
-      font-weight: 400;
-      padding-top: 5px;
-      .unit {
-        padding-top: 5px;
-        color: #ffffff;
-      }
-      .icon {
-        width: 8px;
-        height: 8px;
-        border-radius: 50%;
-      }
-      .colorYellow {
-        color: #ffed52;
-      }
-      .colorBlue {
-        color: #18ffff;
-      }
-      .bgcYellow {
-        background: #ffed52;
-      }
-      .bgcblue {
-        background: #18ffff;
-      }
-      .text {
-        padding: 0 10px 0 6px;
-        font-size: 16px;
-      }
-      .sum {
-        font-size: 20px;
-        padding-right: 10px;
-      }
-    }
-    .bottomBgc {
-      width: 100%;
-      height: 16px;
-
-      position: absolute;
-      bottom: 0;
-      left: 0;
-      background: linear-gradient(0deg, rgba(24, 149, 255, 0.5) 0%, rgba(24, 149, 255, 0) 100%);
-    }
+  .rightBox1 {
+    height: 110px;
   }
-}
-.rightBox1 {
-  height: 110px;
-}
-.rightBox2 {
-  margin-top: 5px;
-}
+  .rightBox2 {
+    margin-top: 5px;
+  }
 
-.rightBox3 {
-  margin-top: 5px;
-}
-.rightBox4 {
-  margin-top: 5px;
-  height: 200px;
-  //   background: red;
-}
-.rightBox5 {
-  margin-top: 5px;
+  .rightBox3 {
+    margin-top: 5px;
+  }
+  .rightBox4 {
+    margin-top: 5px;
+    height: 200px;
+    //   background: red;
+  }
+  .rightBox5 {
+    margin-top: 5px;
+  }
 }
 </style>

diff --git a/src/assets/newImgs/HMScreen/bottom_img .png b/src/assets/newImgs/HMScreen/bottom_img .png
new file mode 100644
index 0000000..e56a338
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/bottom_img .png
Binary files differ
diff --git a/src/assets/styles/publicXG.scss b/src/assets/styles/publicXG.scss
index 246d150..5166ebd 100644
--- a/src/assets/styles/publicXG.scss
+++ b/src/assets/styles/publicXG.scss
@@ -472,8 +472,8 @@
   padding: 10px;
 }
 .publicLeftHM {
-  height: calc(100vh - 110px);
-  border: 1px solid red;
+  height: calc(100vh - 150px);
+  // border: 1px solid red;
   position: absolute;
   left: 0px;
   top: 0px;
@@ -482,7 +482,7 @@
   overflow-y: auto;
 }
 .publicRightHM {
-  height: calc(100vh - 110px);
+  height: calc(100vh - 150px);
   border: 1px solid red;
   overflow-y: auto;
   position: absolute;
diff --git a/src/views/sponeScreen/Echarts/RainfallLegend.vue b/src/views/sponeScreen/Echarts/RainfallLegend.vue
index 99ee08e..f6069cc 100644
--- a/src/views/sponeScreen/Echarts/RainfallLegend.vue
+++ b/src/views/sponeScreen/Echarts/RainfallLegend.vue
@@ -33,13 +33,41 @@
         // backgroundColor: '#0e2147',
         grid: {
           //   left: '5%',
-          //   top: '5%',
-          bottom: '10%',
+          top: '10%',
+          bottom: '20%',
           right: '5%',
         },
+        tooltip: {
+          trigger: 'axis',
+          // formatter: "{b}：{c}㎡",
+          // feature: {
+          //   mark: { show: true },
+          //   dataView: { show: true, readOnly: false },
+          //   magicType: { show: true, type: ['line', 'bar'] },
+          //   restore: { show: true },
+          //   saveAsImage: { show: true }
+          // },
+          // axisPointer: {
+          //   type: "cross",
+          //   textStyle: {
+          //     color: "#fff"
+          //   }
+          // },
+          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 == 'K线性拟合' ? 'mm' : '毫米';
+                relVal += '<br/>' + params[i].marker + params[i].seriesName + ' ' + params[i].value + unit;
+              }
+            }
+            return relVal;
+          },
+        },
         legend: {
-          type: 'scroll',
-          data: '来电量',
+          // type: 'scroll',
+          data: '降雨量',
           itemWidth: 18,
           itemHeight: 12,
           textStyle: {
@@ -101,10 +129,10 @@
         series: [
           {
             symbolSize: 10,
-
-            name: '来电量',
+            name: '降雨量',
             type: 'line',
             data: props.data.data1,
+
             itemStyle: {
               normal: {
                 borderWidth: 5,
@@ -113,7 +141,6 @@
             },
           },
           {
-            name: '滑行的光点',
             type: 'lines',
             coordinateSystem: 'cartesian2d',
             symbolSize: 30,
diff --git a/src/views/sponeScreen/Echarts/RainwaterTakeAdvantage.vue b/src/views/sponeScreen/Echarts/RainwaterTakeAdvantage.vue
index ff57445..f381603 100644
--- a/src/views/sponeScreen/Echarts/RainwaterTakeAdvantage.vue
+++ b/src/views/sponeScreen/Echarts/RainwaterTakeAdvantage.vue
@@ -29,7 +29,7 @@
     },
     grid: {
       top: '10%',
-      left: '-18%',
+      left: '-20%',
       right: '4%',
       bottom: '3%',
       containLabel: true,
@@ -62,7 +62,7 @@
       nameTextStyle: {
         color: 'rgba(96, 194, 255, 1)',
         nameLocation: 'start',
-        padding: [1, 10, -118, -142],
+        padding: [10, 10, -118, -142],
       },
       axisLabel: {
         color: '#fff',
@@ -133,8 +133,9 @@
 
 <style lang="scss" scoped>
 .asset_echart {
-  width: 450px;
+  width: 430px;
   height: 120px;
+  // background: red;
   // margin-left:-30px;
   &_echart {
     width: 100%;
diff --git a/src/views/sponeScreen/Echarts/SewageEcharts.vue b/src/views/sponeScreen/Echarts/SewageEcharts.vue
index 174c0fe..b12eab7 100644
--- a/src/views/sponeScreen/Echarts/SewageEcharts.vue
+++ b/src/views/sponeScreen/Echarts/SewageEcharts.vue
@@ -29,7 +29,7 @@
     },
     grid: {
       top: '10%',
-      left: '-18%',
+      left: '-20%',
       right: '4%',
       bottom: '3%',
       containLabel: true,
@@ -133,7 +133,7 @@
 
 <style lang="scss" scoped>
 .asset_echart {
-  width: 450px;
+  width: 430px;
   height: 120px;
   // margin-left:-30px;
   &_echart {
diff --git a/src/views/sponeScreen/HaiMianScreen/index.vue b/src/views/sponeScreen/HaiMianScreen/index.vue
index 20a5186..de4eb0d 100644
--- a/src/views/sponeScreen/HaiMianScreen/index.vue
+++ b/src/views/sponeScreen/HaiMianScreen/index.vue
@@ -37,6 +37,9 @@
       <WaterFlood v-if="menuIndex == 4" :showPanel="showPanel"></WaterFlood>
       <LongYW v-if="menuIndex == 5" :showPanel="showPanel"></LongYW>
     </div>
+
+    <!-- 底部装饰 -->
+    <div class="bottomHM"></div>
   </div>
 </template>
 
@@ -162,5 +165,15 @@
       margin-bottom: 10px;
     }
   }
+  .bottomHM {
+    position: absolute;
+    bottom: 0px;
+    left: 0px;
+    z-index: 220;
+    width: 1920px;
+    height: 100px;
+    background: url('@/assets/newImgs/HMScreen/bottom_img .png') no-repeat;
+    background-size: 100% 100%;
+  }
 }
 </style>
diff --git a/src/views/sponeScreen/cityGK/CurrentIssues.vue b/src/views/sponeScreen/cityGK/CurrentIssues.vue
new file mode 100644
index 0000000..90a8d2b
--- /dev/null
+++ b/src/views/sponeScreen/cityGK/CurrentIssues.vue
@@ -0,0 +1,149 @@
+<template>
+  <div class="a">
+    <div class="partTitleHM">现状问题</div>
+
+    <div class="partContHM">
+      <div class="HeadContent">
+        <div class="head-center">
+          <div
+            class="head-item"
+            v-for="(item, index) in CurrentIssuesrList"
+            :key="item"
+            :class="activedname == item.name ? 'activedright' : ''"
+            @click="CurrentIssuesrclick(item, index)"
+          >
+            {{ item.name }}
+          </div>
+        </div>
+      </div>
+
+      <div class="box-body">
+        <div class="precedence" v-for="item in CurrentListS">
+          <div class="headText">{{ item.name }}</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+const activedname = ref('内涝风险高');
+const CurrentIssuesrList = ref([
+  { name: '内涝风险高', value: 1 },
+  { name: '汛期水质无法稳定达标', value: 2 },
+  { name: '雨水资源化利用不足', value: 3 },
+]);
+const CurrentListS = ref([
+  {
+    name: '先天排水条件差，城市扩张加剧内涝',
+  },
+  {
+    name: '调蓄空间被侵占，蓄排平衡被破坏',
+  },
+  {
+    name: '排水防涝体系衔接不畅，排水通道能力有限',
+  },
+  {
+    name: '管渠、泵站排水能力不足，养护不到位',
+  },
+]);
+function CurrentIssuesrclick(val) {
+  activedname.value = val.name;
+  if (activedname.value == '内涝风险高') {
+    // console.log('内涝风险高111');
+  } else if (activedname.value == '汛期水质无法稳定达标') {
+    CurrentListS.value = [
+      {
+        name: '老城区合流制溢流污染控制不足',
+      },
+      {
+        name: '分流制区域雨污混错接点多面广',
+      },
+      {
+        name: '雨水径流污染控制弱',
+      },
+      {
+        name: ' 雨源型河道缺乏生态补水，河流自净能力不足',
+      },
+    ];
+    // console.log('汛期水质无法稳定达标');
+  } else {
+    CurrentListS.value = [
+      {
+        name: '资源型缺水城市',
+      },
+      {
+        name: '水资源供需矛盾突出',
+      },
+      {
+        name: '  雨水资源利用水平低',
+      },
+    ];
+    // console.log('雨水资源化利用不足');
+  }
+}
+onMounted(() => {
+  console.log(activedname.value, 'activedname.value111');
+});
+</script>
+
+<style lang="scss" scoped>
+.a {
+  margin-top: 5px;
+  height: 260px;
+  //   background: red;
+  .HeadContent {
+    width: 100%;
+    height: 30px;
+    // background: #2270ff;
+    text-align: center;
+    line-height: 25px;
+
+    .head-center {
+      height: 30px;
+      cursor: pointer;
+      font-size: 14px;
+      display: flex;
+      overflow: hidden;
+      overflow-x: auto;
+      color: #ffffff;
+      .head-item {
+        margin-left: 10px;
+        padding: 2px 3px;
+        border: 1px solid transparent;
+        background: #013a73;
+        height: 30px;
+        text-align: center;
+        min-width: 100px;
+        border: 1px solid #2270ff;
+      }
+      .activedright {
+        border: 1px solid #2cfce9;
+        color: #e4f5ff;
+        background: #166f84;
+      }
+    }
+  }
+  .box-body {
+    height: calc(100vh - 770px);
+
+    position: relative;
+    overflow: auto;
+    .precedence {
+      margin-top: 10px;
+      width: 100%;
+      height: 32px;
+      // line-height: 32px;
+      background: url('@/assets/newImgs/HMScreen/DF_img.png') no-repeat;
+      background-size: 100% 100%;
+      .headText {
+        line-height: 32px;
+        font-size: 16px;
+        text-align: center;
+        color: #a5d9f7;
+        // background: yellow;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/sponeScreen/cityGK/cityplanning.vue b/src/views/sponeScreen/cityGK/cityplanning.vue
index 6aaad04..7a36e6e 100644
--- a/src/views/sponeScreen/cityGK/cityplanning.vue
+++ b/src/views/sponeScreen/cityGK/cityplanning.vue
@@ -1,107 +1,109 @@
 <template>
-  <div class="partTitleHM">城市规划</div>
-  <div class="partContHM">
-    <!-- 水安全规划 -->
-    <div class="rightBox rightBox1">
-      <div class="ListTitle">水安全规划</div>
-      <div class="precedence">
-        <div class="eachinfo">
-          <div class="headText">年径流总量控制率</div>
-          <div class="middleext">
-            <div class="middleextA">
-              <p class="NumberListMB">目标:</p>
-              <p class="NumberList">&nbsp; 70%</p>
+  <div class="a">
+    <div class="partTitleHM">城市规划</div>
+    <div class="partContHM">
+      <!-- 水安全规划 -->
+      <div class="rightBox rightBox1">
+        <div class="ListTitle">水安全规划</div>
+        <div class="precedence">
+          <div class="eachinfo">
+            <div class="headText">年径流总量控制率</div>
+            <div class="middleext">
+              <div class="middleextA">
+                <p class="NumberListMB">目标:</p>
+                <p class="NumberList">&nbsp; 70%</p>
+              </div>
+              <div class="rightText">以上</div>
             </div>
-            <div class="rightText">以上</div>
+          </div>
+        </div>
+        <div class="XqDetails">
+          <div class="DetailsOne">排涝规则</div>
+          <div class="DetailsTwo">
+            <span class="DetailsTwoA">新建改造泵站</span>
+            <span class="DetailsTwoB"> &nbsp;54</span>&nbsp;座
+          </div>
+          <div class="DetailsTthree">
+            <span>新建雨水管渠</span>
+            <span class="DetailsTthreeA"> &nbsp;723.83</span> &nbsp;公里
           </div>
         </div>
       </div>
-      <div class="XqDetails">
-        <div class="DetailsOne">排涝规则</div>
-        <div class="DetailsTwo">
-          <span class="DetailsTwoA">新建改造泵站</span>
-          <span class="DetailsTwoB"> &nbsp;54</span>&nbsp;座
-        </div>
-        <div class="DetailsTthree">
-          <span>新建雨水管渠</span>
-          <span class="DetailsTthreeA"> &nbsp;723.83</span> &nbsp;公里
-        </div>
-      </div>
-    </div>
-    <!-- 水环境规划 -->
-    <div class="rightBox rightBox2">
-      <div class="ListTitle">水环境规划</div>
-      <div class="precedence" v-for="item in policiesList" :key="item">
-        <div class="eachinfo">
-          <div class="headText">{{ item.name }}</div>
-          <div class="middleext">
-            <div class="middleextA">
-              <span class="NumberListMB">目标:</span>
-              <span class="NumberList">&nbsp; {{ item.NumberA }}</span>
+      <!-- 水环境规划 -->
+      <div class="rightBox rightBox2">
+        <div class="ListTitle">水环境规划</div>
+        <div class="precedence" v-for="item in policiesList" :key="item">
+          <div class="eachinfo">
+            <div class="headText">{{ item.name }}</div>
+            <div class="middleext">
+              <div class="middleextA">
+                <span class="NumberListMB">目标:</span>
+                <span class="NumberList">&nbsp; {{ item.NumberA }}</span>
+              </div>
+              <div class="rightText">{{ item.content }}</div>
             </div>
-            <div class="rightText">{{ item.content }}</div>
           </div>
         </div>
       </div>
-    </div>
-    <!-- 水生态规划 -->
-    <div class="rightBox rightBox3">
-      <div class="ListTitle">水生态规划</div>
-      <div class="XqDetails" v-for="item in policiesListS">
-        <div class="DetailsAquaticEcology">
-          <div class="icon"></div>
-          {{ item.name }}
-        </div>
-        <div class="DetailsAquaticEcologyTwo">
-          <p class="DetailsTwoA">{{ item.NumberA }}</p>
-          <p class="DetailsTwoB">{{ item.content }}</p>
+      <!-- 水生态规划 -->
+      <div class="rightBox rightBox3">
+        <div class="ListTitle">水生态规划</div>
+        <div class="XqDetails" v-for="item in policiesListS">
+          <div class="DetailsAquaticEcology">
+            <div class="icon"></div>
+            {{ item.name }}
+          </div>
+          <div class="DetailsAquaticEcologyTwo">
+            <p class="DetailsTwoA">{{ item.NumberA }}</p>
+            <p class="DetailsTwoB">{{ item.content }}</p>
+          </div>
         </div>
       </div>
-    </div>
 
-    <!-- 水资源规划 -->
-    <div class="rightBox rightBox4">
-      <div class="ListTitle">水资源规划</div>
-      <div class="ListContent">
-        <!-- 雨水资源利用 -->
-        <div class="sewageResources">
-          <div class="sewageTop">
-            <div class="YStext">雨水资源利用</div>
+      <!-- 水资源规划 -->
+      <div class="rightBox rightBox4">
+        <div class="ListTitle">水资源规划</div>
+        <div class="ListContent">
+          <!-- 雨水资源利用 -->
+          <div class="sewageResources">
+            <div class="sewageTop">
+              <div class="YStext">雨水资源利用</div>
+            </div>
+            <div>
+              <RainwaterTakeAdvantage></RainwaterTakeAdvantage>
+            </div>
           </div>
-          <div>
-            <RainwaterTakeAdvantage></RainwaterTakeAdvantage>
-          </div>
-        </div>
-        <!-- 污水资源利用 -->
-        <div class="sewageResources">
-          <div class="sewageTop">
-            <div class="wstext">污水资源利用</div>
-            <div class="wsdescribe">7座污水处理厂总设计规模：55 万吨/日</div>
-          </div>
-          <div>
-            <SewageEcharts></SewageEcharts>
+          <!-- 污水资源利用 -->
+          <div class="sewageResources">
+            <div class="sewageTop">
+              <div class="wstext">污水资源利用</div>
+              <div class="wsdescribe">7座污水处理厂总设计规模：55 万吨/日</div>
+            </div>
+            <div>
+              <SewageEcharts></SewageEcharts>
+            </div>
           </div>
         </div>
       </div>
-    </div>
 
-    <!-- 供水规划 -->
-    <div class="rightBox rightBox5">
-      <div class="ListTitle">供水规划</div>
-      <div class="ListContent">
-        <div class="waterSupply">
-          <div class="bottomBgc"></div>
-          <div class="eachDescribe">
-            <div class="icon bgcblue"></div>
-            <div class="text">近期</div>
-            <div class="sum colorBlue">68.7</div>
-            <div class="unit">万立方米/日</div>
-          </div>
-          <div class="eachDescribe">
-            <div class="icon bgcYellow"></div>
-            <div class="text">远期</div>
-            <div class="sum colorYellow">88.7</div>
-            <div class="unit">万立方米/日</div>
+      <!-- 供水规划 -->
+      <div class="rightBox rightBox5">
+        <div class="ListTitle">供水规划</div>
+        <div class="ListContent">
+          <div class="waterSupply">
+            <div class="bottomBgc"></div>
+            <div class="eachDescribe">
+              <div class="icon bgcblue"></div>
+              <div class="text">近期</div>
+              <div class="sum colorBlue">68.7</div>
+              <div class="unit">万立方米/日</div>
+            </div>
+            <div class="eachDescribe">
+              <div class="icon bgcYellow"></div>
+              <div class="text">远期</div>
+              <div class="sum colorYellow">88.7</div>
+              <div class="unit">万立方米/日</div>
+            </div>
           </div>
         </div>
       </div>
@@ -146,242 +148,248 @@
 </script>
 
 <style lang="scss" scoped>
-.rightBox {
-  .ListTitle {
-    width: 100%;
-    height: 32px;
-    line-height: 32px;
-    background: url('@/assets/newImgs/HMScreen/title_img.png') no-repeat;
-    background-size: 100% 100%;
-    position: relative;
-    // box-sizing: border-box;
-    padding-left: 30px;
-    font-family: SourceHanSansCN-Medium;
-    font-weight: bold;
-    font-size: 15px;
-    color: #e4f5ff;
-  }
-  .precedence {
-    margin-top: 5px;
-    width: 100%;
-    height: 32px;
-    // line-height: 32px;
-    background: url('@/assets/newImgs/HMScreen/DF_img.png') no-repeat;
-    background-size: 100% 100%;
-    .eachinfo {
-      display: flex;
+.a {
+  height: 500px;
+  // background: red;
+  overflow-x: hidden;
+  overflow-y: auto;
+  .rightBox {
+    .ListTitle {
+      width: 100%;
       height: 32px;
-      color: #b8ecff;
-      //   background: red;
-      .headText {
-        width: 60%;
-        padding-left: 20px;
-        line-height: 32px;
-        font-size: 16px;
-        // background: yellow;
-      }
-      .middleext {
+      line-height: 32px;
+      background: url('@/assets/newImgs/HMScreen/title_img.png') no-repeat;
+      background-size: 100% 100%;
+      position: relative;
+      // box-sizing: border-box;
+      padding-left: 30px;
+      font-family: SourceHanSansCN-Medium;
+      font-weight: bold;
+      font-size: 15px;
+      color: #e4f5ff;
+    }
+    .precedence {
+      margin-top: 5px;
+      width: 100%;
+      height: 32px;
+      // line-height: 32px;
+      background: url('@/assets/newImgs/HMScreen/DF_img.png') no-repeat;
+      background-size: 100% 100%;
+      .eachinfo {
         display: flex;
-        width: 40%;
-        text-align: center;
-        line-height: 32px;
-        font-size: 16px;
-        // background: blue;
-        .middleextA {
-          width: 65%;
-          text-align: center;
-          //   background: red;
+        height: 32px;
+        color: #b8ecff;
+        //   background: red;
+        .headText {
+          width: 60%;
+          padding-left: 20px;
+          line-height: 32px;
+          font-size: 16px;
+          // background: yellow;
+        }
+        .middleext {
           display: flex;
-          .NumberListMB {
-            // background: #f7c987;
-            width: 40%;
+          width: 40%;
+          text-align: center;
+          line-height: 32px;
+          font-size: 16px;
+          // background: blue;
+          .middleextA {
+            width: 65%;
+            text-align: center;
+            //   background: red;
+            display: flex;
+            .NumberListMB {
+              // background: #f7c987;
+              width: 40%;
+            }
+            .NumberList {
+              // background: lawngreen;
+              width: 60%;
+              font-size: 18px;
+              color: #3afff8;
+            }
           }
-          .NumberList {
-            // background: lawngreen;
-            width: 60%;
-            font-size: 18px;
-            color: #3afff8;
+        }
+        .rightText {
+          width: 35%;
+          line-height: 32px;
+          text-align: center;
+          // background: lawngreen;
+        }
+      }
+    }
+    .XqDetails {
+      margin-top: 8px;
+      height: 32px;
+      display: flex;
+      color: #b8ecff;
+      font-family: SourceHanSansCN-Medium;
+      font-weight: bold;
+      font-size: 15px;
+      // background: red;
+      .DetailsOne {
+        width: 18%;
+        line-height: 30px;
+        text-align: center;
+        //   background: yellow;
+      }
+      .DetailsTwo {
+        width: 40%;
+        line-height: 30px;
+        text-align: center;
+        //   background: blueviolet;
+        .DetailsTwoB {
+          color: #f7c987;
+        }
+      }
+      .DetailsTthree {
+        width: 45%;
+        line-height: 30px;
+        text-align: center;
+        //   background: #3afff8;
+        .DetailsTthreeA {
+          color: #3afff8;
+        }
+      }
+
+      // 水生态规划
+      .DetailsAquaticEcology {
+        width: 45%;
+        line-height: 30px;
+        .icon {
+          display: inline-block;
+          border-color: #3afff8;
+          border-style: solid;
+          border-width: 2px;
+          width: 0;
+          height: 0;
+          margin-right: 7px;
+          position: relative;
+          top: -3px;
+          -moz-transform: rotate(45deg);
+          -webkit-transform: rotate(45deg);
+          -o-transform: rotate(45deg);
+          transform: rotate(45deg);
+        }
+        //   background: red;
+      }
+      .DetailsAquaticEcologyTwo {
+        width: 55%;
+        display: flex;
+        //   background: yellowgreen;
+        line-height: 30px;
+        text-align: center;
+        .DetailsTwoA {
+          width: 50%;
+          color: #3afff8;
+          // background: red;
+        }
+        .DetailsTwoB {
+          width: 50%;
+          color: #f7c987;
+          // background: rgb(205, 50, 50);
+        }
+      }
+    }
+    .ListContent {
+      width: 100%;
+      height: calc(100% - 34px);
+      overflow: auto;
+      // background: yellow;
+      .sewageResources {
+        // 污水资源利用
+        .sewageTop {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          font-family: Source Han Sans CN;
+          font-weight: bold;
+          font-size: 16px;
+          padding: 10px 30px 0px 10px;
+          .wsdescribe {
+            color: #fff;
+          }
+          .wstext {
+            color: #ffed52;
+          }
+          .YStext {
+            color: #18ffff;
           }
         }
       }
-      .rightText {
-        width: 35%;
-        line-height: 32px;
-        text-align: center;
-        // background: lawngreen;
-      }
-    }
-  }
-  .XqDetails {
-    margin-top: 8px;
-    height: 32px;
-    display: flex;
-    color: #b8ecff;
-    font-family: SourceHanSansCN-Medium;
-    font-weight: bold;
-    font-size: 15px;
-    // background: red;
-    .DetailsOne {
-      width: 18%;
-      line-height: 30px;
-      text-align: center;
-      //   background: yellow;
-    }
-    .DetailsTwo {
-      width: 40%;
-      line-height: 30px;
-      text-align: center;
-      //   background: blueviolet;
-      .DetailsTwoB {
-        color: #f7c987;
-      }
-    }
-    .DetailsTthree {
-      width: 45%;
-      line-height: 30px;
-      text-align: center;
-      //   background: #3afff8;
-      .DetailsTthreeA {
-        color: #3afff8;
-      }
     }
 
-    // 水生态规划
-    .DetailsAquaticEcology {
-      width: 45%;
-      line-height: 30px;
-      .icon {
-        display: inline-block;
-        border-color: #3afff8;
-        border-style: solid;
-        border-width: 2px;
-        width: 0;
-        height: 0;
-        margin-right: 7px;
-        position: relative;
-        top: -3px;
-        -moz-transform: rotate(45deg);
-        -webkit-transform: rotate(45deg);
-        -o-transform: rotate(45deg);
-        transform: rotate(45deg);
-      }
-      //   background: red;
-    }
-    .DetailsAquaticEcologyTwo {
-      width: 55%;
+    // 供水规划
+    .waterSupply {
+      position: relative;
       display: flex;
-      //   background: yellowgreen;
-      line-height: 30px;
-      text-align: center;
-      .DetailsTwoA {
-        width: 50%;
-        color: #3afff8;
-        // background: red;
-      }
-      .DetailsTwoB {
-        width: 50%;
-        color: #f7c987;
-        // background: rgb(205, 50, 50);
-      }
-    }
-  }
-  .ListContent {
-    width: 100%;
-    height: calc(100% - 34px);
-    overflow: auto;
-    // background: yellow;
-    .sewageResources {
-      // 污水资源利用
-      .sewageTop {
+      justify-content: space-around;
+      align-items: center;
+      .eachDescribe {
         display: flex;
-        justify-content: space-between;
         align-items: center;
         font-family: Source Han Sans CN;
-        font-weight: bold;
-        font-size: 16px;
-        padding: 10px 30px 0px 10px;
-        .wsdescribe {
-          color: #fff;
+        font-weight: 400;
+        padding-top: 5px;
+        .unit {
+          padding-top: 5px;
+          color: #ffffff;
         }
-        .wstext {
+        .icon {
+          width: 8px;
+          height: 8px;
+          border-radius: 50%;
+        }
+        .colorYellow {
           color: #ffed52;
         }
-        .YStext {
+        .colorBlue {
           color: #18ffff;
         }
+        .bgcYellow {
+          background: #ffed52;
+        }
+        .bgcblue {
+          background: #18ffff;
+        }
+        .text {
+          padding: 0 10px 0 6px;
+          font-size: 16px;
+        }
+        .sum {
+          font-size: 20px;
+          padding-right: 10px;
+        }
+      }
+      .bottomBgc {
+        width: 100%;
+        height: 16px;
+
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        background: linear-gradient(0deg, rgba(24, 149, 255, 0.5) 0%, rgba(24, 149, 255, 0) 100%);
       }
     }
   }
-
-  // 供水规划
-  .waterSupply {
-    position: relative;
-    display: flex;
-    justify-content: space-around;
-    align-items: center;
-    .eachDescribe {
-      display: flex;
-      align-items: center;
-      font-family: Source Han Sans CN;
-      font-weight: 400;
-      padding-top: 5px;
-      .unit {
-        padding-top: 5px;
-        color: #ffffff;
-      }
-      .icon {
-        width: 8px;
-        height: 8px;
-        border-radius: 50%;
-      }
-      .colorYellow {
-        color: #ffed52;
-      }
-      .colorBlue {
-        color: #18ffff;
-      }
-      .bgcYellow {
-        background: #ffed52;
-      }
-      .bgcblue {
-        background: #18ffff;
-      }
-      .text {
-        padding: 0 10px 0 6px;
-        font-size: 16px;
-      }
-      .sum {
-        font-size: 20px;
-        padding-right: 10px;
-      }
-    }
-    .bottomBgc {
-      width: 100%;
-      height: 16px;
-
-      position: absolute;
-      bottom: 0;
-      left: 0;
-      background: linear-gradient(0deg, rgba(24, 149, 255, 0.5) 0%, rgba(24, 149, 255, 0) 100%);
-    }
+  .rightBox1 {
+    height: 110px;
   }
-}
-.rightBox1 {
-  height: 110px;
-}
-.rightBox2 {
-  margin-top: 5px;
-}
+  .rightBox2 {
+    margin-top: 5px;
+  }
 
-.rightBox3 {
-  margin-top: 5px;
-}
-.rightBox4 {
-  margin-top: 5px;
-  height: 200px;
-  //   background: red;
-}
-.rightBox5 {
-  margin-top: 5px;
+  .rightBox3 {
+    margin-top: 5px;
+  }
+  .rightBox4 {
+    margin-top: 5px;
+    height: 200px;
+    //   background: red;
+  }
+  .rightBox5 {
+    margin-top: 5px;
+  }
 }
 </style>
diff --git a/src/views/sponeScreen/cityGK/index.vue b/src/views/sponeScreen/cityGK/index.vue
index db4c3ef..1d99508 100644
--- a/src/views/sponeScreen/cityGK/index.vue
+++ b/src/views/sponeScreen/cityGK/index.vue
@@ -48,6 +48,9 @@
     <div class="publicRightHM">
       <!-- 城市规划 -->
       <cityplanning></cityplanning>
+
+      <!-- 现状问题 -->
+      <CurrentIssues></CurrentIssues>
     </div>
   </div>
 </template>
@@ -56,6 +59,9 @@
 import tslyqk_constituent_3d from '@/views/sponeScreen/Echarts/tslyqk_constituent_3d.vue'; //3d图例
 import rainfall from '@/views/sponeScreen/cityGK/rainfall.vue'; //降雨页面
 import cityplanning from '@/views/sponeScreen/cityGK/cityplanning.vue'; //城市规划页面
+
+import CurrentIssues from '@/views/sponeScreen/cityGK/CurrentIssues.vue'; //现状问题
+
 const { proxy } = getCurrentInstance();
 const policiesList = ref([
   {

diff --git a/src/assets/newImgs/HMScreen/bottom_img .png b/src/assets/newImgs/HMScreen/bottom_img .png
new file mode 100644
index 0000000..e56a338
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/bottom_img .png
Binary files differ
diff --git a/src/assets/styles/publicXG.scss b/src/assets/styles/publicXG.scss
index 246d150..5166ebd 100644
--- a/src/assets/styles/publicXG.scss
+++ b/src/assets/styles/publicXG.scss
@@ -472,8 +472,8 @@
   padding: 10px;
 }
 .publicLeftHM {
-  height: calc(100vh - 110px);
-  border: 1px solid red;
+  height: calc(100vh - 150px);
+  // border: 1px solid red;
   position: absolute;
   left: 0px;
   top: 0px;
@@ -482,7 +482,7 @@
   overflow-y: auto;
 }
 .publicRightHM {
-  height: calc(100vh - 110px);
+  height: calc(100vh - 150px);
   border: 1px solid red;
   overflow-y: auto;
   position: absolute;
diff --git a/src/views/sponeScreen/Echarts/RainfallLegend.vue b/src/views/sponeScreen/Echarts/RainfallLegend.vue
index 99ee08e..f6069cc 100644
--- a/src/views/sponeScreen/Echarts/RainfallLegend.vue
+++ b/src/views/sponeScreen/Echarts/RainfallLegend.vue
@@ -33,13 +33,41 @@
         // backgroundColor: '#0e2147',
         grid: {
           //   left: '5%',
-          //   top: '5%',
-          bottom: '10%',
+          top: '10%',
+          bottom: '20%',
           right: '5%',
         },
+        tooltip: {
+          trigger: 'axis',
+          // formatter: "{b}：{c}㎡",
+          // feature: {
+          //   mark: { show: true },
+          //   dataView: { show: true, readOnly: false },
+          //   magicType: { show: true, type: ['line', 'bar'] },
+          //   restore: { show: true },
+          //   saveAsImage: { show: true }
+          // },
+          // axisPointer: {
+          //   type: "cross",
+          //   textStyle: {
+          //     color: "#fff"
+          //   }
+          // },
+          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 == 'K线性拟合' ? 'mm' : '毫米';
+                relVal += '<br/>' + params[i].marker + params[i].seriesName + ' ' + params[i].value + unit;
+              }
+            }
+            return relVal;
+          },
+        },
         legend: {
-          type: 'scroll',
-          data: '来电量',
+          // type: 'scroll',
+          data: '降雨量',
           itemWidth: 18,
           itemHeight: 12,
           textStyle: {
@@ -101,10 +129,10 @@
         series: [
           {
             symbolSize: 10,
-
-            name: '来电量',
+            name: '降雨量',
             type: 'line',
             data: props.data.data1,
+
             itemStyle: {
               normal: {
                 borderWidth: 5,
@@ -113,7 +141,6 @@
             },
           },
           {
-            name: '滑行的光点',
             type: 'lines',
             coordinateSystem: 'cartesian2d',
             symbolSize: 30,
diff --git a/src/views/sponeScreen/Echarts/RainwaterTakeAdvantage.vue b/src/views/sponeScreen/Echarts/RainwaterTakeAdvantage.vue
index ff57445..f381603 100644
--- a/src/views/sponeScreen/Echarts/RainwaterTakeAdvantage.vue
+++ b/src/views/sponeScreen/Echarts/RainwaterTakeAdvantage.vue
@@ -29,7 +29,7 @@
     },
     grid: {
       top: '10%',
-      left: '-18%',
+      left: '-20%',
       right: '4%',
       bottom: '3%',
       containLabel: true,
@@ -62,7 +62,7 @@
       nameTextStyle: {
         color: 'rgba(96, 194, 255, 1)',
         nameLocation: 'start',
-        padding: [1, 10, -118, -142],
+        padding: [10, 10, -118, -142],
       },
       axisLabel: {
         color: '#fff',
@@ -133,8 +133,9 @@
 
 <style lang="scss" scoped>
 .asset_echart {
-  width: 450px;
+  width: 430px;
   height: 120px;
+  // background: red;
   // margin-left:-30px;
   &_echart {
     width: 100%;
diff --git a/src/views/sponeScreen/Echarts/SewageEcharts.vue b/src/views/sponeScreen/Echarts/SewageEcharts.vue
index 174c0fe..b12eab7 100644
--- a/src/views/sponeScreen/Echarts/SewageEcharts.vue
+++ b/src/views/sponeScreen/Echarts/SewageEcharts.vue
@@ -29,7 +29,7 @@
     },
     grid: {
       top: '10%',
-      left: '-18%',
+      left: '-20%',
       right: '4%',
       bottom: '3%',
       containLabel: true,
@@ -133,7 +133,7 @@
 
 <style lang="scss" scoped>
 .asset_echart {
-  width: 450px;
+  width: 430px;
   height: 120px;
   // margin-left:-30px;
   &_echart {
diff --git a/src/views/sponeScreen/HaiMianScreen/index.vue b/src/views/sponeScreen/HaiMianScreen/index.vue
index 20a5186..de4eb0d 100644
--- a/src/views/sponeScreen/HaiMianScreen/index.vue
+++ b/src/views/sponeScreen/HaiMianScreen/index.vue
@@ -37,6 +37,9 @@
       <WaterFlood v-if="menuIndex == 4" :showPanel="showPanel"></WaterFlood>
       <LongYW v-if="menuIndex == 5" :showPanel="showPanel"></LongYW>
     </div>
+
+    <!-- 底部装饰 -->
+    <div class="bottomHM"></div>
   </div>
 </template>
 
@@ -162,5 +165,15 @@
       margin-bottom: 10px;
     }
   }
+  .bottomHM {
+    position: absolute;
+    bottom: 0px;
+    left: 0px;
+    z-index: 220;
+    width: 1920px;
+    height: 100px;
+    background: url('@/assets/newImgs/HMScreen/bottom_img .png') no-repeat;
+    background-size: 100% 100%;
+  }
 }
 </style>
diff --git a/src/views/sponeScreen/cityGK/CurrentIssues.vue b/src/views/sponeScreen/cityGK/CurrentIssues.vue
new file mode 100644
index 0000000..90a8d2b
--- /dev/null
+++ b/src/views/sponeScreen/cityGK/CurrentIssues.vue
@@ -0,0 +1,149 @@
+<template>
+  <div class="a">
+    <div class="partTitleHM">现状问题</div>
+
+    <div class="partContHM">
+      <div class="HeadContent">
+        <div class="head-center">
+          <div
+            class="head-item"
+            v-for="(item, index) in CurrentIssuesrList"
+            :key="item"
+            :class="activedname == item.name ? 'activedright' : ''"
+            @click="CurrentIssuesrclick(item, index)"
+          >
+            {{ item.name }}
+          </div>
+        </div>
+      </div>
+
+      <div class="box-body">
+        <div class="precedence" v-for="item in CurrentListS">
+          <div class="headText">{{ item.name }}</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+const activedname = ref('内涝风险高');
+const CurrentIssuesrList = ref([
+  { name: '内涝风险高', value: 1 },
+  { name: '汛期水质无法稳定达标', value: 2 },
+  { name: '雨水资源化利用不足', value: 3 },
+]);
+const CurrentListS = ref([
+  {
+    name: '先天排水条件差，城市扩张加剧内涝',
+  },
+  {
+    name: '调蓄空间被侵占，蓄排平衡被破坏',
+  },
+  {
+    name: '排水防涝体系衔接不畅，排水通道能力有限',
+  },
+  {
+    name: '管渠、泵站排水能力不足，养护不到位',
+  },
+]);
+function CurrentIssuesrclick(val) {
+  activedname.value = val.name;
+  if (activedname.value == '内涝风险高') {
+    // console.log('内涝风险高111');
+  } else if (activedname.value == '汛期水质无法稳定达标') {
+    CurrentListS.value = [
+      {
+        name: '老城区合流制溢流污染控制不足',
+      },
+      {
+        name: '分流制区域雨污混错接点多面广',
+      },
+      {
+        name: '雨水径流污染控制弱',
+      },
+      {
+        name: ' 雨源型河道缺乏生态补水，河流自净能力不足',
+      },
+    ];
+    // console.log('汛期水质无法稳定达标');
+  } else {
+    CurrentListS.value = [
+      {
+        name: '资源型缺水城市',
+      },
+      {
+        name: '水资源供需矛盾突出',
+      },
+      {
+        name: '  雨水资源利用水平低',
+      },
+    ];
+    // console.log('雨水资源化利用不足');
+  }
+}
+onMounted(() => {
+  console.log(activedname.value, 'activedname.value111');
+});
+</script>
+
+<style lang="scss" scoped>
+.a {
+  margin-top: 5px;
+  height: 260px;
+  //   background: red;
+  .HeadContent {
+    width: 100%;
+    height: 30px;
+    // background: #2270ff;
+    text-align: center;
+    line-height: 25px;
+
+    .head-center {
+      height: 30px;
+      cursor: pointer;
+      font-size: 14px;
+      display: flex;
+      overflow: hidden;
+      overflow-x: auto;
+      color: #ffffff;
+      .head-item {
+        margin-left: 10px;
+        padding: 2px 3px;
+        border: 1px solid transparent;
+        background: #013a73;
+        height: 30px;
+        text-align: center;
+        min-width: 100px;
+        border: 1px solid #2270ff;
+      }
+      .activedright {
+        border: 1px solid #2cfce9;
+        color: #e4f5ff;
+        background: #166f84;
+      }
+    }
+  }
+  .box-body {
+    height: calc(100vh - 770px);
+
+    position: relative;
+    overflow: auto;
+    .precedence {
+      margin-top: 10px;
+      width: 100%;
+      height: 32px;
+      // line-height: 32px;
+      background: url('@/assets/newImgs/HMScreen/DF_img.png') no-repeat;
+      background-size: 100% 100%;
+      .headText {
+        line-height: 32px;
+        font-size: 16px;
+        text-align: center;
+        color: #a5d9f7;
+        // background: yellow;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/sponeScreen/cityGK/cityplanning.vue b/src/views/sponeScreen/cityGK/cityplanning.vue
index 6aaad04..7a36e6e 100644
--- a/src/views/sponeScreen/cityGK/cityplanning.vue
+++ b/src/views/sponeScreen/cityGK/cityplanning.vue
@@ -1,107 +1,109 @@
 <template>
-  <div class="partTitleHM">城市规划</div>
-  <div class="partContHM">
-    <!-- 水安全规划 -->
-    <div class="rightBox rightBox1">
-      <div class="ListTitle">水安全规划</div>
-      <div class="precedence">
-        <div class="eachinfo">
-          <div class="headText">年径流总量控制率</div>
-          <div class="middleext">
-            <div class="middleextA">
-              <p class="NumberListMB">目标:</p>
-              <p class="NumberList">&nbsp; 70%</p>
+  <div class="a">
+    <div class="partTitleHM">城市规划</div>
+    <div class="partContHM">
+      <!-- 水安全规划 -->
+      <div class="rightBox rightBox1">
+        <div class="ListTitle">水安全规划</div>
+        <div class="precedence">
+          <div class="eachinfo">
+            <div class="headText">年径流总量控制率</div>
+            <div class="middleext">
+              <div class="middleextA">
+                <p class="NumberListMB">目标:</p>
+                <p class="NumberList">&nbsp; 70%</p>
+              </div>
+              <div class="rightText">以上</div>
             </div>
-            <div class="rightText">以上</div>
+          </div>
+        </div>
+        <div class="XqDetails">
+          <div class="DetailsOne">排涝规则</div>
+          <div class="DetailsTwo">
+            <span class="DetailsTwoA">新建改造泵站</span>
+            <span class="DetailsTwoB"> &nbsp;54</span>&nbsp;座
+          </div>
+          <div class="DetailsTthree">
+            <span>新建雨水管渠</span>
+            <span class="DetailsTthreeA"> &nbsp;723.83</span> &nbsp;公里
           </div>
         </div>
       </div>
-      <div class="XqDetails">
-        <div class="DetailsOne">排涝规则</div>
-        <div class="DetailsTwo">
-          <span class="DetailsTwoA">新建改造泵站</span>
-          <span class="DetailsTwoB"> &nbsp;54</span>&nbsp;座
-        </div>
-        <div class="DetailsTthree">
-          <span>新建雨水管渠</span>
-          <span class="DetailsTthreeA"> &nbsp;723.83</span> &nbsp;公里
-        </div>
-      </div>
-    </div>
-    <!-- 水环境规划 -->
-    <div class="rightBox rightBox2">
-      <div class="ListTitle">水环境规划</div>
-      <div class="precedence" v-for="item in policiesList" :key="item">
-        <div class="eachinfo">
-          <div class="headText">{{ item.name }}</div>
-          <div class="middleext">
-            <div class="middleextA">
-              <span class="NumberListMB">目标:</span>
-              <span class="NumberList">&nbsp; {{ item.NumberA }}</span>
+      <!-- 水环境规划 -->
+      <div class="rightBox rightBox2">
+        <div class="ListTitle">水环境规划</div>
+        <div class="precedence" v-for="item in policiesList" :key="item">
+          <div class="eachinfo">
+            <div class="headText">{{ item.name }}</div>
+            <div class="middleext">
+              <div class="middleextA">
+                <span class="NumberListMB">目标:</span>
+                <span class="NumberList">&nbsp; {{ item.NumberA }}</span>
+              </div>
+              <div class="rightText">{{ item.content }}</div>
             </div>
-            <div class="rightText">{{ item.content }}</div>
           </div>
         </div>
       </div>
-    </div>
-    <!-- 水生态规划 -->
-    <div class="rightBox rightBox3">
-      <div class="ListTitle">水生态规划</div>
-      <div class="XqDetails" v-for="item in policiesListS">
-        <div class="DetailsAquaticEcology">
-          <div class="icon"></div>
-          {{ item.name }}
-        </div>
-        <div class="DetailsAquaticEcologyTwo">
-          <p class="DetailsTwoA">{{ item.NumberA }}</p>
-          <p class="DetailsTwoB">{{ item.content }}</p>
+      <!-- 水生态规划 -->
+      <div class="rightBox rightBox3">
+        <div class="ListTitle">水生态规划</div>
+        <div class="XqDetails" v-for="item in policiesListS">
+          <div class="DetailsAquaticEcology">
+            <div class="icon"></div>
+            {{ item.name }}
+          </div>
+          <div class="DetailsAquaticEcologyTwo">
+            <p class="DetailsTwoA">{{ item.NumberA }}</p>
+            <p class="DetailsTwoB">{{ item.content }}</p>
+          </div>
         </div>
       </div>
-    </div>
 
-    <!-- 水资源规划 -->
-    <div class="rightBox rightBox4">
-      <div class="ListTitle">水资源规划</div>
-      <div class="ListContent">
-        <!-- 雨水资源利用 -->
-        <div class="sewageResources">
-          <div class="sewageTop">
-            <div class="YStext">雨水资源利用</div>
+      <!-- 水资源规划 -->
+      <div class="rightBox rightBox4">
+        <div class="ListTitle">水资源规划</div>
+        <div class="ListContent">
+          <!-- 雨水资源利用 -->
+          <div class="sewageResources">
+            <div class="sewageTop">
+              <div class="YStext">雨水资源利用</div>
+            </div>
+            <div>
+              <RainwaterTakeAdvantage></RainwaterTakeAdvantage>
+            </div>
           </div>
-          <div>
-            <RainwaterTakeAdvantage></RainwaterTakeAdvantage>
-          </div>
-        </div>
-        <!-- 污水资源利用 -->
-        <div class="sewageResources">
-          <div class="sewageTop">
-            <div class="wstext">污水资源利用</div>
-            <div class="wsdescribe">7座污水处理厂总设计规模：55 万吨/日</div>
-          </div>
-          <div>
-            <SewageEcharts></SewageEcharts>
+          <!-- 污水资源利用 -->
+          <div class="sewageResources">
+            <div class="sewageTop">
+              <div class="wstext">污水资源利用</div>
+              <div class="wsdescribe">7座污水处理厂总设计规模：55 万吨/日</div>
+            </div>
+            <div>
+              <SewageEcharts></SewageEcharts>
+            </div>
           </div>
         </div>
       </div>
-    </div>
 
-    <!-- 供水规划 -->
-    <div class="rightBox rightBox5">
-      <div class="ListTitle">供水规划</div>
-      <div class="ListContent">
-        <div class="waterSupply">
-          <div class="bottomBgc"></div>
-          <div class="eachDescribe">
-            <div class="icon bgcblue"></div>
-            <div class="text">近期</div>
-            <div class="sum colorBlue">68.7</div>
-            <div class="unit">万立方米/日</div>
-          </div>
-          <div class="eachDescribe">
-            <div class="icon bgcYellow"></div>
-            <div class="text">远期</div>
-            <div class="sum colorYellow">88.7</div>
-            <div class="unit">万立方米/日</div>
+      <!-- 供水规划 -->
+      <div class="rightBox rightBox5">
+        <div class="ListTitle">供水规划</div>
+        <div class="ListContent">
+          <div class="waterSupply">
+            <div class="bottomBgc"></div>
+            <div class="eachDescribe">
+              <div class="icon bgcblue"></div>
+              <div class="text">近期</div>
+              <div class="sum colorBlue">68.7</div>
+              <div class="unit">万立方米/日</div>
+            </div>
+            <div class="eachDescribe">
+              <div class="icon bgcYellow"></div>
+              <div class="text">远期</div>
+              <div class="sum colorYellow">88.7</div>
+              <div class="unit">万立方米/日</div>
+            </div>
           </div>
         </div>
       </div>
@@ -146,242 +148,248 @@
 </script>
 
 <style lang="scss" scoped>
-.rightBox {
-  .ListTitle {
-    width: 100%;
-    height: 32px;
-    line-height: 32px;
-    background: url('@/assets/newImgs/HMScreen/title_img.png') no-repeat;
-    background-size: 100% 100%;
-    position: relative;
-    // box-sizing: border-box;
-    padding-left: 30px;
-    font-family: SourceHanSansCN-Medium;
-    font-weight: bold;
-    font-size: 15px;
-    color: #e4f5ff;
-  }
-  .precedence {
-    margin-top: 5px;
-    width: 100%;
-    height: 32px;
-    // line-height: 32px;
-    background: url('@/assets/newImgs/HMScreen/DF_img.png') no-repeat;
-    background-size: 100% 100%;
-    .eachinfo {
-      display: flex;
+.a {
+  height: 500px;
+  // background: red;
+  overflow-x: hidden;
+  overflow-y: auto;
+  .rightBox {
+    .ListTitle {
+      width: 100%;
       height: 32px;
-      color: #b8ecff;
-      //   background: red;
-      .headText {
-        width: 60%;
-        padding-left: 20px;
-        line-height: 32px;
-        font-size: 16px;
-        // background: yellow;
-      }
-      .middleext {
+      line-height: 32px;
+      background: url('@/assets/newImgs/HMScreen/title_img.png') no-repeat;
+      background-size: 100% 100%;
+      position: relative;
+      // box-sizing: border-box;
+      padding-left: 30px;
+      font-family: SourceHanSansCN-Medium;
+      font-weight: bold;
+      font-size: 15px;
+      color: #e4f5ff;
+    }
+    .precedence {
+      margin-top: 5px;
+      width: 100%;
+      height: 32px;
+      // line-height: 32px;
+      background: url('@/assets/newImgs/HMScreen/DF_img.png') no-repeat;
+      background-size: 100% 100%;
+      .eachinfo {
         display: flex;
-        width: 40%;
-        text-align: center;
-        line-height: 32px;
-        font-size: 16px;
-        // background: blue;
-        .middleextA {
-          width: 65%;
-          text-align: center;
-          //   background: red;
+        height: 32px;
+        color: #b8ecff;
+        //   background: red;
+        .headText {
+          width: 60%;
+          padding-left: 20px;
+          line-height: 32px;
+          font-size: 16px;
+          // background: yellow;
+        }
+        .middleext {
           display: flex;
-          .NumberListMB {
-            // background: #f7c987;
-            width: 40%;
+          width: 40%;
+          text-align: center;
+          line-height: 32px;
+          font-size: 16px;
+          // background: blue;
+          .middleextA {
+            width: 65%;
+            text-align: center;
+            //   background: red;
+            display: flex;
+            .NumberListMB {
+              // background: #f7c987;
+              width: 40%;
+            }
+            .NumberList {
+              // background: lawngreen;
+              width: 60%;
+              font-size: 18px;
+              color: #3afff8;
+            }
           }
-          .NumberList {
-            // background: lawngreen;
-            width: 60%;
-            font-size: 18px;
-            color: #3afff8;
+        }
+        .rightText {
+          width: 35%;
+          line-height: 32px;
+          text-align: center;
+          // background: lawngreen;
+        }
+      }
+    }
+    .XqDetails {
+      margin-top: 8px;
+      height: 32px;
+      display: flex;
+      color: #b8ecff;
+      font-family: SourceHanSansCN-Medium;
+      font-weight: bold;
+      font-size: 15px;
+      // background: red;
+      .DetailsOne {
+        width: 18%;
+        line-height: 30px;
+        text-align: center;
+        //   background: yellow;
+      }
+      .DetailsTwo {
+        width: 40%;
+        line-height: 30px;
+        text-align: center;
+        //   background: blueviolet;
+        .DetailsTwoB {
+          color: #f7c987;
+        }
+      }
+      .DetailsTthree {
+        width: 45%;
+        line-height: 30px;
+        text-align: center;
+        //   background: #3afff8;
+        .DetailsTthreeA {
+          color: #3afff8;
+        }
+      }
+
+      // 水生态规划
+      .DetailsAquaticEcology {
+        width: 45%;
+        line-height: 30px;
+        .icon {
+          display: inline-block;
+          border-color: #3afff8;
+          border-style: solid;
+          border-width: 2px;
+          width: 0;
+          height: 0;
+          margin-right: 7px;
+          position: relative;
+          top: -3px;
+          -moz-transform: rotate(45deg);
+          -webkit-transform: rotate(45deg);
+          -o-transform: rotate(45deg);
+          transform: rotate(45deg);
+        }
+        //   background: red;
+      }
+      .DetailsAquaticEcologyTwo {
+        width: 55%;
+        display: flex;
+        //   background: yellowgreen;
+        line-height: 30px;
+        text-align: center;
+        .DetailsTwoA {
+          width: 50%;
+          color: #3afff8;
+          // background: red;
+        }
+        .DetailsTwoB {
+          width: 50%;
+          color: #f7c987;
+          // background: rgb(205, 50, 50);
+        }
+      }
+    }
+    .ListContent {
+      width: 100%;
+      height: calc(100% - 34px);
+      overflow: auto;
+      // background: yellow;
+      .sewageResources {
+        // 污水资源利用
+        .sewageTop {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          font-family: Source Han Sans CN;
+          font-weight: bold;
+          font-size: 16px;
+          padding: 10px 30px 0px 10px;
+          .wsdescribe {
+            color: #fff;
+          }
+          .wstext {
+            color: #ffed52;
+          }
+          .YStext {
+            color: #18ffff;
           }
         }
       }
-      .rightText {
-        width: 35%;
-        line-height: 32px;
-        text-align: center;
-        // background: lawngreen;
-      }
-    }
-  }
-  .XqDetails {
-    margin-top: 8px;
-    height: 32px;
-    display: flex;
-    color: #b8ecff;
-    font-family: SourceHanSansCN-Medium;
-    font-weight: bold;
-    font-size: 15px;
-    // background: red;
-    .DetailsOne {
-      width: 18%;
-      line-height: 30px;
-      text-align: center;
-      //   background: yellow;
-    }
-    .DetailsTwo {
-      width: 40%;
-      line-height: 30px;
-      text-align: center;
-      //   background: blueviolet;
-      .DetailsTwoB {
-        color: #f7c987;
-      }
-    }
-    .DetailsTthree {
-      width: 45%;
-      line-height: 30px;
-      text-align: center;
-      //   background: #3afff8;
-      .DetailsTthreeA {
-        color: #3afff8;
-      }
     }
 
-    // 水生态规划
-    .DetailsAquaticEcology {
-      width: 45%;
-      line-height: 30px;
-      .icon {
-        display: inline-block;
-        border-color: #3afff8;
-        border-style: solid;
-        border-width: 2px;
-        width: 0;
-        height: 0;
-        margin-right: 7px;
-        position: relative;
-        top: -3px;
-        -moz-transform: rotate(45deg);
-        -webkit-transform: rotate(45deg);
-        -o-transform: rotate(45deg);
-        transform: rotate(45deg);
-      }
-      //   background: red;
-    }
-    .DetailsAquaticEcologyTwo {
-      width: 55%;
+    // 供水规划
+    .waterSupply {
+      position: relative;
       display: flex;
-      //   background: yellowgreen;
-      line-height: 30px;
-      text-align: center;
-      .DetailsTwoA {
-        width: 50%;
-        color: #3afff8;
-        // background: red;
-      }
-      .DetailsTwoB {
-        width: 50%;
-        color: #f7c987;
-        // background: rgb(205, 50, 50);
-      }
-    }
-  }
-  .ListContent {
-    width: 100%;
-    height: calc(100% - 34px);
-    overflow: auto;
-    // background: yellow;
-    .sewageResources {
-      // 污水资源利用
-      .sewageTop {
+      justify-content: space-around;
+      align-items: center;
+      .eachDescribe {
         display: flex;
-        justify-content: space-between;
         align-items: center;
         font-family: Source Han Sans CN;
-        font-weight: bold;
-        font-size: 16px;
-        padding: 10px 30px 0px 10px;
-        .wsdescribe {
-          color: #fff;
+        font-weight: 400;
+        padding-top: 5px;
+        .unit {
+          padding-top: 5px;
+          color: #ffffff;
         }
-        .wstext {
+        .icon {
+          width: 8px;
+          height: 8px;
+          border-radius: 50%;
+        }
+        .colorYellow {
           color: #ffed52;
         }
-        .YStext {
+        .colorBlue {
           color: #18ffff;
         }
+        .bgcYellow {
+          background: #ffed52;
+        }
+        .bgcblue {
+          background: #18ffff;
+        }
+        .text {
+          padding: 0 10px 0 6px;
+          font-size: 16px;
+        }
+        .sum {
+          font-size: 20px;
+          padding-right: 10px;
+        }
+      }
+      .bottomBgc {
+        width: 100%;
+        height: 16px;
+
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        background: linear-gradient(0deg, rgba(24, 149, 255, 0.5) 0%, rgba(24, 149, 255, 0) 100%);
       }
     }
   }
-
-  // 供水规划
-  .waterSupply {
-    position: relative;
-    display: flex;
-    justify-content: space-around;
-    align-items: center;
-    .eachDescribe {
-      display: flex;
-      align-items: center;
-      font-family: Source Han Sans CN;
-      font-weight: 400;
-      padding-top: 5px;
-      .unit {
-        padding-top: 5px;
-        color: #ffffff;
-      }
-      .icon {
-        width: 8px;
-        height: 8px;
-        border-radius: 50%;
-      }
-      .colorYellow {
-        color: #ffed52;
-      }
-      .colorBlue {
-        color: #18ffff;
-      }
-      .bgcYellow {
-        background: #ffed52;
-      }
-      .bgcblue {
-        background: #18ffff;
-      }
-      .text {
-        padding: 0 10px 0 6px;
-        font-size: 16px;
-      }
-      .sum {
-        font-size: 20px;
-        padding-right: 10px;
-      }
-    }
-    .bottomBgc {
-      width: 100%;
-      height: 16px;
-
-      position: absolute;
-      bottom: 0;
-      left: 0;
-      background: linear-gradient(0deg, rgba(24, 149, 255, 0.5) 0%, rgba(24, 149, 255, 0) 100%);
-    }
+  .rightBox1 {
+    height: 110px;
   }
-}
-.rightBox1 {
-  height: 110px;
-}
-.rightBox2 {
-  margin-top: 5px;
-}
+  .rightBox2 {
+    margin-top: 5px;
+  }
 
-.rightBox3 {
-  margin-top: 5px;
-}
-.rightBox4 {
-  margin-top: 5px;
-  height: 200px;
-  //   background: red;
-}
-.rightBox5 {
-  margin-top: 5px;
+  .rightBox3 {
+    margin-top: 5px;
+  }
+  .rightBox4 {
+    margin-top: 5px;
+    height: 200px;
+    //   background: red;
+  }
+  .rightBox5 {
+    margin-top: 5px;
+  }
 }
 </style>
diff --git a/src/views/sponeScreen/cityGK/index.vue b/src/views/sponeScreen/cityGK/index.vue
index db4c3ef..1d99508 100644
--- a/src/views/sponeScreen/cityGK/index.vue
+++ b/src/views/sponeScreen/cityGK/index.vue
@@ -48,6 +48,9 @@
     <div class="publicRightHM">
       <!-- 城市规划 -->
       <cityplanning></cityplanning>
+
+      <!-- 现状问题 -->
+      <CurrentIssues></CurrentIssues>
     </div>
   </div>
 </template>
@@ -56,6 +59,9 @@
 import tslyqk_constituent_3d from '@/views/sponeScreen/Echarts/tslyqk_constituent_3d.vue'; //3d图例
 import rainfall from '@/views/sponeScreen/cityGK/rainfall.vue'; //降雨页面
 import cityplanning from '@/views/sponeScreen/cityGK/cityplanning.vue'; //城市规划页面
+
+import CurrentIssues from '@/views/sponeScreen/cityGK/CurrentIssues.vue'; //现状问题
+
 const { proxy } = getCurrentInstance();
 const policiesList = ref([
   {
diff --git a/src/views/sponeScreen/cityGK/rainfall.vue b/src/views/sponeScreen/cityGK/rainfall.vue
index 8b00175..17a7b23 100644
--- a/src/views/sponeScreen/cityGK/rainfall.vue
+++ b/src/views/sponeScreen/cityGK/rainfall.vue
@@ -1,26 +1,28 @@
 <template>
-  <div class="partTitleHM">
-    降雨特征
-    <div class="head-right" style="">
-      <div
-        class="head-item"
-        v-for="(item, index) in yearList"
-        :key="item"
-        :class="activedname == item.name ? 'activedright' : ''"
-        @click="yearclick(item, index)"
-      >
-        {{ item.name }}
+  <div class="a">
+    <div class="partTitleHM">
+      降雨特征
+      <div class="head-right" style="">
+        <div
+          class="head-item"
+          v-for="(item, index) in yearList"
+          :key="item"
+          :class="activedname == item.name ? 'activedright' : ''"
+          @click="yearclick(item, index)"
+        >
+          {{ item.name }}
+        </div>
       </div>
     </div>
-  </div>
 
-  <div class="partContHM">
-    <div class="HeadContent" v-if="activedname == '年际降雨变化'">丰、枯年交替出现，且降雨量变化幅度大</div>
-    <div class="HeadContent" v-else>年内降雨量分配不均匀，冬季干旱，雨雪稀少</div>
-    <div class="box-body">
-      <div style="height: 100%">
-        <RainfallEcharts :data="chartData2" :refresh="chartData2.refresh" v-if="activedname == '年际降雨变化'"></RainfallEcharts>
-        <RainfallLegend :data="chartData3" :refresh1="chartData3.refresh1" v-else></RainfallLegend>
+    <div class="partContHM">
+      <div class="HeadContent" v-if="activedname == '年际降雨变化'">丰、枯年交替出现，且降雨量变化幅度大</div>
+      <div class="HeadContent" v-else>年内降雨量分配不均匀，冬季干旱，雨雪稀少</div>
+      <div class="box-body">
+        <div style="height: 100%">
+          <RainfallEcharts :data="chartData2" :refresh="chartData2.refresh" v-if="activedname == '年际降雨变化'"></RainfallEcharts>
+          <RainfallLegend :data="chartData3" :refresh1="chartData3.refresh1" v-else></RainfallLegend>
+        </div>
       </div>
     </div>
   </div>
@@ -79,47 +81,52 @@
 </script>
 
 <style lang="scss" scoped>
-.HeadContent {
-  width: 100%;
-  height: 30px;
-  background: #2270ff;
-  text-align: center;
-  line-height: 30px;
-  color: #ffffff;
-}
-.box-body {
-  height: calc(100vh - 710px);
-  padding-left: 5px;
-  position: relative;
-  overflow: auto;
-}
-.head-right {
-  cursor: pointer;
-  position: relative;
-  font-size: 14px;
-  left: 200px;
-  top: -32px;
-  color: #fff;
-  display: flex;
-  max-width: 200px;
-  overflow: hidden;
-  overflow-x: auto;
-  line-height: 18px;
-
-  .head-item {
-    margin-left: 10px;
-    padding: 2px 3px;
-    border: 1px solid transparent;
-    background: #013a73;
-    height: 23px;
+.a {
+  height: 290px;
+  // background: red;
+  .HeadContent {
+    width: 100%;
+    height: 30px;
+    background: #2270ff;
     text-align: center;
-    min-width: 42px;
+    line-height: 30px;
+    color: #ffffff;
   }
+  .box-body {
+    height: calc(100vh - 740px);
+    padding-left: 5px;
+    position: relative;
+    overflow: auto;
+  }
+  .head-right {
+    cursor: pointer;
+    position: relative;
+    font-size: 14px;
+    left: 200px;
+    top: -32px;
+    color: #fffff;
+    display: flex;
+    max-width: 200px;
+    overflow: hidden;
+    overflow-x: auto;
+    line-height: 18px;
 
-  .activedright {
-    border: 1px solid #2cfce9;
-    color: #e4f5ff;
-    background: #166f84;
+    .head-item {
+      margin-left: 10px;
+      padding: 2px 3px;
+      border: 1px solid transparent;
+      background: #013a73;
+      height: 23px;
+      text-align: center;
+      min-width: 42px;
+      border: 1px solid #2270ff;
+    }
+
+    .activedright {
+      border: 1px solid #2cfce9;
+      color: #e4f5ff;
+      background: #166f84;
+    }
   }
 }
 </style>