diff --git a/src/assets/newImgs/HMScreen/partBg.png b/src/assets/newImgs/HMScreen/partBg.png
index 7219105..0b8959a 100644
--- a/src/assets/newImgs/HMScreen/partBg.png
+++ b/src/assets/newImgs/HMScreen/partBg.png
Binary files differ

diff --git a/src/assets/newImgs/HMScreen/partBg.png b/src/assets/newImgs/HMScreen/partBg.png
index 7219105..0b8959a 100644
--- a/src/assets/newImgs/HMScreen/partBg.png
+++ b/src/assets/newImgs/HMScreen/partBg.png
Binary files differ
diff --git a/src/views/sponeScreen/Echarts/RainfallEcharts.vue b/src/views/sponeScreen/Echarts/RainfallEcharts.vue
index 2fbaaec..8c4b9e2 100644
--- a/src/views/sponeScreen/Echarts/RainfallEcharts.vue
+++ b/src/views/sponeScreen/Echarts/RainfallEcharts.vue
@@ -4,7 +4,7 @@
 <script>
 import * as echarts from 'echarts';
 import { guid } from '@/utils/ruoyi';
-import { reactive, toRefs, onMounted, watch } from 'vue';
+import { reactive, toRefs, onMounted, watch, onUnmounted } from 'vue';
 export default {
   name: 'line-chart',
   props: {
@@ -17,6 +17,7 @@
       legend: [],
       id: guid(),
       chart: null,
+      timer: null,
     });
     const resizeTheChart = () => {
       if (allData.chart) {
@@ -177,18 +178,16 @@
             barGap: '10%', // Make series be overlap
             barCateGoryGap: '10%',
             itemStyle: {
-              normal: {
-                color: new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [
-                  {
-                    offset: 0,
-                    color: 'rgba(24, 255, 255, 1)',
-                  },
-                  {
-                    offset: 1,
-                    color: 'rgba(188, 255, 255, 1)',
-                  },
-                ]),
-              },
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [
+                {
+                  offset: 0,
+                  color: 'rgba(24, 255, 255, 1)',
+                },
+                {
+                  offset: 1,
+                  color: 'rgba(188, 255, 255, 1)',
+                },
+              ]),
             },
             data: props.data.yAxis,
           },
@@ -204,23 +203,41 @@
       };
       option && chartDom.setOption(option, true);
       allData.chart = chartDom;
+      animateChart();
     };
     watch(
       () => props.refresh,
       () => {
-        if (allData.chartDom) {
-          allData.chartDom.dispose();
-          allData.chartDom = null;
+        if (allData.chart) {
+          allData.chart.dispose();
+          allData.chart = null;
         }
         setTimeout(() => {
           init();
         }, 0);
       }
     );
+    // echarts动画
+    function animateChart() {
+      let length = props.data.xAxis.length;
+      let i = 0;
+      allData.timer = setInterval(() => {
+        i++;
+        if (i == length) i = 0;
+        allData.chart.dispatchAction({
+          type: 'showTip',
+          seriesIndex: 0,
+          dataIndex: i,
+        });
+      }, 1500);
+    }
     onMounted(() => {
       init();
       window.addEventListener('resize', resizeTheChart);
     });
+    onUnmounted(() => {
+      if (allData.timer) clearInterval(allData.timer);
+    });
     return {
       ...toRefs(allData),
       resizeTheChart,

diff --git a/src/assets/newImgs/HMScreen/partBg.png b/src/assets/newImgs/HMScreen/partBg.png
index 7219105..0b8959a 100644
--- a/src/assets/newImgs/HMScreen/partBg.png
+++ b/src/assets/newImgs/HMScreen/partBg.png
Binary files differ
diff --git a/src/views/sponeScreen/Echarts/RainfallEcharts.vue b/src/views/sponeScreen/Echarts/RainfallEcharts.vue
index 2fbaaec..8c4b9e2 100644
--- a/src/views/sponeScreen/Echarts/RainfallEcharts.vue
+++ b/src/views/sponeScreen/Echarts/RainfallEcharts.vue
@@ -4,7 +4,7 @@
 <script>
 import * as echarts from 'echarts';
 import { guid } from '@/utils/ruoyi';
-import { reactive, toRefs, onMounted, watch } from 'vue';
+import { reactive, toRefs, onMounted, watch, onUnmounted } from 'vue';
 export default {
   name: 'line-chart',
   props: {
@@ -17,6 +17,7 @@
       legend: [],
       id: guid(),
       chart: null,
+      timer: null,
     });
     const resizeTheChart = () => {
       if (allData.chart) {
@@ -177,18 +178,16 @@
             barGap: '10%', // Make series be overlap
             barCateGoryGap: '10%',
             itemStyle: {
-              normal: {
-                color: new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [
-                  {
-                    offset: 0,
-                    color: 'rgba(24, 255, 255, 1)',
-                  },
-                  {
-                    offset: 1,
-                    color: 'rgba(188, 255, 255, 1)',
-                  },
-                ]),
-              },
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [
+                {
+                  offset: 0,
+                  color: 'rgba(24, 255, 255, 1)',
+                },
+                {
+                  offset: 1,
+                  color: 'rgba(188, 255, 255, 1)',
+                },
+              ]),
             },
             data: props.data.yAxis,
           },
@@ -204,23 +203,41 @@
       };
       option && chartDom.setOption(option, true);
       allData.chart = chartDom;
+      animateChart();
     };
     watch(
       () => props.refresh,
       () => {
-        if (allData.chartDom) {
-          allData.chartDom.dispose();
-          allData.chartDom = null;
+        if (allData.chart) {
+          allData.chart.dispose();
+          allData.chart = null;
         }
         setTimeout(() => {
           init();
         }, 0);
       }
     );
+    // echarts动画
+    function animateChart() {
+      let length = props.data.xAxis.length;
+      let i = 0;
+      allData.timer = setInterval(() => {
+        i++;
+        if (i == length) i = 0;
+        allData.chart.dispatchAction({
+          type: 'showTip',
+          seriesIndex: 0,
+          dataIndex: i,
+        });
+      }, 1500);
+    }
     onMounted(() => {
       init();
       window.addEventListener('resize', resizeTheChart);
     });
+    onUnmounted(() => {
+      if (allData.timer) clearInterval(allData.timer);
+    });
     return {
       ...toRefs(allData),
       resizeTheChart,
diff --git a/src/views/sponeScreen/Echarts/RainfallLegend.vue b/src/views/sponeScreen/Echarts/RainfallLegend.vue
index f6069cc..1c83534 100644
--- a/src/views/sponeScreen/Echarts/RainfallLegend.vue
+++ b/src/views/sponeScreen/Echarts/RainfallLegend.vue
@@ -31,6 +31,7 @@
       var option;
       option = {
         // backgroundColor: '#0e2147',
+        color: ['#3FFFC2'],
         grid: {
           //   left: '5%',
           top: '10%',
@@ -132,12 +133,9 @@
             name: '降雨量',
             type: 'line',
             data: props.data.data1,
-
             itemStyle: {
-              normal: {
-                borderWidth: 5,
-                // color: '#0696f9',
-              },
+              borderWidth: 5,
+              // color: '#0696f9',
             },
           },
           {
@@ -153,11 +151,9 @@
               symbolSize: 15,
             },
             lineStyle: {
-              normal: {
-                width: 1,
-                opacity: 0.6,
-                curveness: 0.2,
-              },
+              width: 1,
+              opacity: 0.6,
+              curveness: 0.2,
             },
             data: props.data.data,
           },

diff --git a/src/assets/newImgs/HMScreen/partBg.png b/src/assets/newImgs/HMScreen/partBg.png
index 7219105..0b8959a 100644
--- a/src/assets/newImgs/HMScreen/partBg.png
+++ b/src/assets/newImgs/HMScreen/partBg.png
Binary files differ
diff --git a/src/views/sponeScreen/Echarts/RainfallEcharts.vue b/src/views/sponeScreen/Echarts/RainfallEcharts.vue
index 2fbaaec..8c4b9e2 100644
--- a/src/views/sponeScreen/Echarts/RainfallEcharts.vue
+++ b/src/views/sponeScreen/Echarts/RainfallEcharts.vue
@@ -4,7 +4,7 @@
 <script>
 import * as echarts from 'echarts';
 import { guid } from '@/utils/ruoyi';
-import { reactive, toRefs, onMounted, watch } from 'vue';
+import { reactive, toRefs, onMounted, watch, onUnmounted } from 'vue';
 export default {
   name: 'line-chart',
   props: {
@@ -17,6 +17,7 @@
       legend: [],
       id: guid(),
       chart: null,
+      timer: null,
     });
     const resizeTheChart = () => {
       if (allData.chart) {
@@ -177,18 +178,16 @@
             barGap: '10%', // Make series be overlap
             barCateGoryGap: '10%',
             itemStyle: {
-              normal: {
-                color: new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [
-                  {
-                    offset: 0,
-                    color: 'rgba(24, 255, 255, 1)',
-                  },
-                  {
-                    offset: 1,
-                    color: 'rgba(188, 255, 255, 1)',
-                  },
-                ]),
-              },
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [
+                {
+                  offset: 0,
+                  color: 'rgba(24, 255, 255, 1)',
+                },
+                {
+                  offset: 1,
+                  color: 'rgba(188, 255, 255, 1)',
+                },
+              ]),
             },
             data: props.data.yAxis,
           },
@@ -204,23 +203,41 @@
       };
       option && chartDom.setOption(option, true);
       allData.chart = chartDom;
+      animateChart();
     };
     watch(
       () => props.refresh,
       () => {
-        if (allData.chartDom) {
-          allData.chartDom.dispose();
-          allData.chartDom = null;
+        if (allData.chart) {
+          allData.chart.dispose();
+          allData.chart = null;
         }
         setTimeout(() => {
           init();
         }, 0);
       }
     );
+    // echarts动画
+    function animateChart() {
+      let length = props.data.xAxis.length;
+      let i = 0;
+      allData.timer = setInterval(() => {
+        i++;
+        if (i == length) i = 0;
+        allData.chart.dispatchAction({
+          type: 'showTip',
+          seriesIndex: 0,
+          dataIndex: i,
+        });
+      }, 1500);
+    }
     onMounted(() => {
       init();
       window.addEventListener('resize', resizeTheChart);
     });
+    onUnmounted(() => {
+      if (allData.timer) clearInterval(allData.timer);
+    });
     return {
       ...toRefs(allData),
       resizeTheChart,
diff --git a/src/views/sponeScreen/Echarts/RainfallLegend.vue b/src/views/sponeScreen/Echarts/RainfallLegend.vue
index f6069cc..1c83534 100644
--- a/src/views/sponeScreen/Echarts/RainfallLegend.vue
+++ b/src/views/sponeScreen/Echarts/RainfallLegend.vue
@@ -31,6 +31,7 @@
       var option;
       option = {
         // backgroundColor: '#0e2147',
+        color: ['#3FFFC2'],
         grid: {
           //   left: '5%',
           top: '10%',
@@ -132,12 +133,9 @@
             name: '降雨量',
             type: 'line',
             data: props.data.data1,
-
             itemStyle: {
-              normal: {
-                borderWidth: 5,
-                // color: '#0696f9',
-              },
+              borderWidth: 5,
+              // color: '#0696f9',
             },
           },
           {
@@ -153,11 +151,9 @@
               symbolSize: 15,
             },
             lineStyle: {
-              normal: {
-                width: 1,
-                opacity: 0.6,
-                curveness: 0.2,
-              },
+              width: 1,
+              opacity: 0.6,
+              curveness: 0.2,
             },
             data: props.data.data,
           },
diff --git a/src/views/sponeScreen/Echarts/tslyqk_constituent_3d.vue b/src/views/sponeScreen/Echarts/tslyqk_constituent_3d.vue
index 2b72b45..b61a344 100644
--- a/src/views/sponeScreen/Echarts/tslyqk_constituent_3d.vue
+++ b/src/views/sponeScreen/Echarts/tslyqk_constituent_3d.vue
@@ -9,6 +9,8 @@
 import * as echarts from 'echarts';
 const { proxy } = getCurrentInstance();
 
+const myChart = ref(null);
+
 // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
 function getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
   // 计算
@@ -147,8 +149,8 @@
       show: false,
     },
     itemStyle: {
-      opacity: 0.1,
-      color: '#E1E8EC',
+      opacity: 0.9,
+      color: '#296E99',
     },
     parametricEquation: {
       u: {
@@ -182,13 +184,13 @@
       show: false,
     },
     itemStyle: {
-      opacity: 0.1,
-      color: '#E1E8EC',
+      opacity: 0.2,
+      color: '#215983',
     },
     parametricEquation: {
       u: {
         min: 0,
-        max: Math.PI * 2,
+        max: Math.PI * 3,
         step: Math.PI / 20,
       },
       v: {
@@ -197,10 +199,10 @@
         step: Math.PI / 20,
       },
       x: function (u, v) {
-        return ((Math.sin(v) * Math.sin(u) + Math.sin(u)) / Math.PI) * 2;
+        return ((Math.sin(v) * Math.sin(u) + Math.sin(u)) / Math.PI) * 3;
       },
       y: function (u, v) {
-        return ((Math.sin(v) * Math.cos(u) + Math.cos(u)) / Math.PI) * 2;
+        return ((Math.sin(v) * Math.cos(u) + Math.cos(u)) / Math.PI) * 3;
       },
       z: function (u, v) {
         return Math.cos(v) > 0 ? -5 : -7;
@@ -215,8 +217,8 @@
       show: false,
     },
     itemStyle: {
-      opacity: 0.1,
-      color: '#E1E8EC',
+      opacity: 1,
+      color: '#25719D',
     },
     parametricEquation: {
       u: {
@@ -230,10 +232,10 @@
         step: Math.PI / 20,
       },
       x: function (u, v) {
-        return ((Math.sin(v) * Math.sin(u) + Math.sin(u)) / Math.PI) * 2.2;
+        return ((Math.sin(v) * Math.sin(u) + Math.sin(u)) / Math.PI) * 2.5;
       },
       y: function (u, v) {
-        return ((Math.sin(v) * Math.cos(u) + Math.cos(u)) / Math.PI) * 2.2;
+        return ((Math.sin(v) * Math.cos(u) + Math.cos(u)) / Math.PI) * 2.5;
       },
       z: function (u, v) {
         return Math.cos(v) > 0 ? -7 : -7;
@@ -258,12 +260,13 @@
     legend: {
       orient: 'vertical',
       icon: 'circle',
-      right: '5%',
-      top: '20%',
+      right: '3%',
+      top: '22%',
       show: true,
       itemGap: 10,
       textStyle: {
         color: '#A1E2FF',
+        fontSize: 14,
       },
       // icon:'diamond',
       data: legendData,
@@ -290,12 +293,11 @@
         // zoomSensitivity: 100,
         // panSensitivity: 100,
       },
-      top: '5%',
+      top: '0%',
       left: 'left',
-      width: '70%',
-      //   heigth: '50%',
+      width: '60%',
       show: false,
-      boxHeight: 20,
+      boxHeight: 50,
     },
     series: series,
   };
@@ -306,52 +308,59 @@
 const initEcharts = () => {
   const optionData = [
     {
-      name: '草(0.4%)',
-      value: 0.4,
+      name: '草(17.4k㎡,0.4%)',
+      value: 17.4,
       itemStyle: {
-        color: '#FFED52',
+        color: '#E7EA39',
       },
     },
     {
-      name: '田 (83.3%)',
-      value: 83.3,
+      name: '田 (4051.55k㎡,83.3%)',
+      value: 4051.55,
       itemStyle: {
-        color: '#FF8E5B',
+        color: '#E89668',
       },
     },
     {
-      name: '林 (11.4%)',
-      value: 11.4,
+      name: '林 (553.89k㎡,11.4%)',
+      value: 553.89,
       itemStyle: {
-        color: '#D956FF',
+        color: '#D863F4',
       },
     },
     {
-      name: '湖 (1.6%)',
-      value: 1.6,
+      name: '湖 (78.54k㎡,1.6%)',
+      value: 78.54,
       itemStyle: {
-        color: '#18FFFF',
+        color: '#03BABB',
       },
     },
     {
-      name: '水 (3.4%)',
-      value: 3.4,
+      name: '水 (165.05k㎡,3.4%)',
+      value: 165.05,
       itemStyle: {
-        color: '#4CC1FF',
+        color: '#3EB4F1',
       },
     },
   ];
   // 生成配置选项
   const option = getPie3D(optionData, 0.59);
-  //   const myChart = proxy.echarts.init(proxy.$refs.echarts);
-  const myChart = echarts.init(proxy.$refs.echarts3D);
+  myChart.value = echarts.init(proxy.$refs.echarts3D);
 
   // 绘制图形
-  myChart.setOption(option);
+  myChart.value.setOption(option);
 };
 
+//自适应
+function resizeTheChart() {
+  if (myChart.value) {
+    myChart.value.resize();
+  }
+}
+
 onMounted(() => {
   initEcharts();
+  window.addEventListener('resize', resizeTheChart);
 });
 </script>
 

diff --git a/src/assets/newImgs/HMScreen/partBg.png b/src/assets/newImgs/HMScreen/partBg.png
index 7219105..0b8959a 100644
--- a/src/assets/newImgs/HMScreen/partBg.png
+++ b/src/assets/newImgs/HMScreen/partBg.png
Binary files differ
diff --git a/src/views/sponeScreen/Echarts/RainfallEcharts.vue b/src/views/sponeScreen/Echarts/RainfallEcharts.vue
index 2fbaaec..8c4b9e2 100644
--- a/src/views/sponeScreen/Echarts/RainfallEcharts.vue
+++ b/src/views/sponeScreen/Echarts/RainfallEcharts.vue
@@ -4,7 +4,7 @@
 <script>
 import * as echarts from 'echarts';
 import { guid } from '@/utils/ruoyi';
-import { reactive, toRefs, onMounted, watch } from 'vue';
+import { reactive, toRefs, onMounted, watch, onUnmounted } from 'vue';
 export default {
   name: 'line-chart',
   props: {
@@ -17,6 +17,7 @@
       legend: [],
       id: guid(),
       chart: null,
+      timer: null,
     });
     const resizeTheChart = () => {
       if (allData.chart) {
@@ -177,18 +178,16 @@
             barGap: '10%', // Make series be overlap
             barCateGoryGap: '10%',
             itemStyle: {
-              normal: {
-                color: new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [
-                  {
-                    offset: 0,
-                    color: 'rgba(24, 255, 255, 1)',
-                  },
-                  {
-                    offset: 1,
-                    color: 'rgba(188, 255, 255, 1)',
-                  },
-                ]),
-              },
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [
+                {
+                  offset: 0,
+                  color: 'rgba(24, 255, 255, 1)',
+                },
+                {
+                  offset: 1,
+                  color: 'rgba(188, 255, 255, 1)',
+                },
+              ]),
             },
             data: props.data.yAxis,
           },
@@ -204,23 +203,41 @@
       };
       option && chartDom.setOption(option, true);
       allData.chart = chartDom;
+      animateChart();
     };
     watch(
       () => props.refresh,
       () => {
-        if (allData.chartDom) {
-          allData.chartDom.dispose();
-          allData.chartDom = null;
+        if (allData.chart) {
+          allData.chart.dispose();
+          allData.chart = null;
         }
         setTimeout(() => {
           init();
         }, 0);
       }
     );
+    // echarts动画
+    function animateChart() {
+      let length = props.data.xAxis.length;
+      let i = 0;
+      allData.timer = setInterval(() => {
+        i++;
+        if (i == length) i = 0;
+        allData.chart.dispatchAction({
+          type: 'showTip',
+          seriesIndex: 0,
+          dataIndex: i,
+        });
+      }, 1500);
+    }
     onMounted(() => {
       init();
       window.addEventListener('resize', resizeTheChart);
     });
+    onUnmounted(() => {
+      if (allData.timer) clearInterval(allData.timer);
+    });
     return {
       ...toRefs(allData),
       resizeTheChart,
diff --git a/src/views/sponeScreen/Echarts/RainfallLegend.vue b/src/views/sponeScreen/Echarts/RainfallLegend.vue
index f6069cc..1c83534 100644
--- a/src/views/sponeScreen/Echarts/RainfallLegend.vue
+++ b/src/views/sponeScreen/Echarts/RainfallLegend.vue
@@ -31,6 +31,7 @@
       var option;
       option = {
         // backgroundColor: '#0e2147',
+        color: ['#3FFFC2'],
         grid: {
           //   left: '5%',
           top: '10%',
@@ -132,12 +133,9 @@
             name: '降雨量',
             type: 'line',
             data: props.data.data1,
-
             itemStyle: {
-              normal: {
-                borderWidth: 5,
-                // color: '#0696f9',
-              },
+              borderWidth: 5,
+              // color: '#0696f9',
             },
           },
           {
@@ -153,11 +151,9 @@
               symbolSize: 15,
             },
             lineStyle: {
-              normal: {
-                width: 1,
-                opacity: 0.6,
-                curveness: 0.2,
-              },
+              width: 1,
+              opacity: 0.6,
+              curveness: 0.2,
             },
             data: props.data.data,
           },
diff --git a/src/views/sponeScreen/Echarts/tslyqk_constituent_3d.vue b/src/views/sponeScreen/Echarts/tslyqk_constituent_3d.vue
index 2b72b45..b61a344 100644
--- a/src/views/sponeScreen/Echarts/tslyqk_constituent_3d.vue
+++ b/src/views/sponeScreen/Echarts/tslyqk_constituent_3d.vue
@@ -9,6 +9,8 @@
 import * as echarts from 'echarts';
 const { proxy } = getCurrentInstance();
 
+const myChart = ref(null);
+
 // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
 function getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
   // 计算
@@ -147,8 +149,8 @@
       show: false,
     },
     itemStyle: {
-      opacity: 0.1,
-      color: '#E1E8EC',
+      opacity: 0.9,
+      color: '#296E99',
     },
     parametricEquation: {
       u: {
@@ -182,13 +184,13 @@
       show: false,
     },
     itemStyle: {
-      opacity: 0.1,
-      color: '#E1E8EC',
+      opacity: 0.2,
+      color: '#215983',
     },
     parametricEquation: {
       u: {
         min: 0,
-        max: Math.PI * 2,
+        max: Math.PI * 3,
         step: Math.PI / 20,
       },
       v: {
@@ -197,10 +199,10 @@
         step: Math.PI / 20,
       },
       x: function (u, v) {
-        return ((Math.sin(v) * Math.sin(u) + Math.sin(u)) / Math.PI) * 2;
+        return ((Math.sin(v) * Math.sin(u) + Math.sin(u)) / Math.PI) * 3;
       },
       y: function (u, v) {
-        return ((Math.sin(v) * Math.cos(u) + Math.cos(u)) / Math.PI) * 2;
+        return ((Math.sin(v) * Math.cos(u) + Math.cos(u)) / Math.PI) * 3;
       },
       z: function (u, v) {
         return Math.cos(v) > 0 ? -5 : -7;
@@ -215,8 +217,8 @@
       show: false,
     },
     itemStyle: {
-      opacity: 0.1,
-      color: '#E1E8EC',
+      opacity: 1,
+      color: '#25719D',
     },
     parametricEquation: {
       u: {
@@ -230,10 +232,10 @@
         step: Math.PI / 20,
       },
       x: function (u, v) {
-        return ((Math.sin(v) * Math.sin(u) + Math.sin(u)) / Math.PI) * 2.2;
+        return ((Math.sin(v) * Math.sin(u) + Math.sin(u)) / Math.PI) * 2.5;
       },
       y: function (u, v) {
-        return ((Math.sin(v) * Math.cos(u) + Math.cos(u)) / Math.PI) * 2.2;
+        return ((Math.sin(v) * Math.cos(u) + Math.cos(u)) / Math.PI) * 2.5;
       },
       z: function (u, v) {
         return Math.cos(v) > 0 ? -7 : -7;
@@ -258,12 +260,13 @@
     legend: {
       orient: 'vertical',
       icon: 'circle',
-      right: '5%',
-      top: '20%',
+      right: '3%',
+      top: '22%',
       show: true,
       itemGap: 10,
       textStyle: {
         color: '#A1E2FF',
+        fontSize: 14,
       },
       // icon:'diamond',
       data: legendData,
@@ -290,12 +293,11 @@
         // zoomSensitivity: 100,
         // panSensitivity: 100,
       },
-      top: '5%',
+      top: '0%',
       left: 'left',
-      width: '70%',
-      //   heigth: '50%',
+      width: '60%',
       show: false,
-      boxHeight: 20,
+      boxHeight: 50,
     },
     series: series,
   };
@@ -306,52 +308,59 @@
 const initEcharts = () => {
   const optionData = [
     {
-      name: '草(0.4%)',
-      value: 0.4,
+      name: '草(17.4k㎡,0.4%)',
+      value: 17.4,
       itemStyle: {
-        color: '#FFED52',
+        color: '#E7EA39',
       },
     },
     {
-      name: '田 (83.3%)',
-      value: 83.3,
+      name: '田 (4051.55k㎡,83.3%)',
+      value: 4051.55,
       itemStyle: {
-        color: '#FF8E5B',
+        color: '#E89668',
       },
     },
     {
-      name: '林 (11.4%)',
-      value: 11.4,
+      name: '林 (553.89k㎡,11.4%)',
+      value: 553.89,
       itemStyle: {
-        color: '#D956FF',
+        color: '#D863F4',
       },
     },
     {
-      name: '湖 (1.6%)',
-      value: 1.6,
+      name: '湖 (78.54k㎡,1.6%)',
+      value: 78.54,
       itemStyle: {
-        color: '#18FFFF',
+        color: '#03BABB',
       },
     },
     {
-      name: '水 (3.4%)',
-      value: 3.4,
+      name: '水 (165.05k㎡,3.4%)',
+      value: 165.05,
       itemStyle: {
-        color: '#4CC1FF',
+        color: '#3EB4F1',
       },
     },
   ];
   // 生成配置选项
   const option = getPie3D(optionData, 0.59);
-  //   const myChart = proxy.echarts.init(proxy.$refs.echarts);
-  const myChart = echarts.init(proxy.$refs.echarts3D);
+  myChart.value = echarts.init(proxy.$refs.echarts3D);
 
   // 绘制图形
-  myChart.setOption(option);
+  myChart.value.setOption(option);
 };
 
+//自适应
+function resizeTheChart() {
+  if (myChart.value) {
+    myChart.value.resize();
+  }
+}
+
 onMounted(() => {
   initEcharts();
+  window.addEventListener('resize', resizeTheChart);
 });
 </script>
 
diff --git a/src/views/sponeScreen/HaiMianScreen/index.vue b/src/views/sponeScreen/HaiMianScreen/index.vue
index 96efdfd..3702b26 100644
--- a/src/views/sponeScreen/HaiMianScreen/index.vue
+++ b/src/views/sponeScreen/HaiMianScreen/index.vue
@@ -2,13 +2,13 @@
   <!-- 海绵综合一张图首页 -->
   <div class="hmMainPage">
     <!-- 地图 -->
-    <GisMapMF></GisMapMF>
+    <!-- <GisMapMF></GisMapMF> -->
 
     <!-- 图例 -->
-    <Legend :showLegend="showLegend"></Legend>
+    <Legend :showLegend="showLegend" :class="['animate__animated', showPanel ? 'animate__fadeOutDown' : '']"></Legend>
 
     <!-- 控制面板按钮 -->
-    <div class="controlHM">
+    <div class="controlHM" :style="{ right: showPanel ? '30px' : '520px' }" v-if="menuIndex != 3">
       <img src="@/assets/newImgs/HMScreen/iconLegend.png" alt="" title="图例控制" @click="controlLegend" />
       <img src="@/assets/newImgs/HMScreen/iconPane.png" alt="" title="展开收起" @click="controlPanel" />
     </div>
@@ -62,7 +62,7 @@
   { name: '长效运维', id: 5 },
 ]);
 const menuIndex = ref(1);
-const showPanel = ref(true);
+const showPanel = ref(false);
 const showLegend = ref(false);
 
 // 跳转业务系统
@@ -154,7 +154,6 @@
   }
   .controlHM {
     position: absolute;
-    right: 500px;
     bottom: 50px;
     z-index: 220;
     width: 32px;
@@ -169,7 +168,7 @@
     position: absolute;
     bottom: 0px;
     left: 0px;
-    z-index: 220;
+    z-index: 180;
     width: 1920px;
     height: 100px;
     background: url('@/assets/newImgs/HMScreen/bottom_img .png') no-repeat;

diff --git a/src/assets/newImgs/HMScreen/partBg.png b/src/assets/newImgs/HMScreen/partBg.png
index 7219105..0b8959a 100644
--- a/src/assets/newImgs/HMScreen/partBg.png
+++ b/src/assets/newImgs/HMScreen/partBg.png
Binary files differ
diff --git a/src/views/sponeScreen/Echarts/RainfallEcharts.vue b/src/views/sponeScreen/Echarts/RainfallEcharts.vue
index 2fbaaec..8c4b9e2 100644
--- a/src/views/sponeScreen/Echarts/RainfallEcharts.vue
+++ b/src/views/sponeScreen/Echarts/RainfallEcharts.vue
@@ -4,7 +4,7 @@
 <script>
 import * as echarts from 'echarts';
 import { guid } from '@/utils/ruoyi';
-import { reactive, toRefs, onMounted, watch } from 'vue';
+import { reactive, toRefs, onMounted, watch, onUnmounted } from 'vue';
 export default {
   name: 'line-chart',
   props: {
@@ -17,6 +17,7 @@
       legend: [],
       id: guid(),
       chart: null,
+      timer: null,
     });
     const resizeTheChart = () => {
       if (allData.chart) {
@@ -177,18 +178,16 @@
             barGap: '10%', // Make series be overlap
             barCateGoryGap: '10%',
             itemStyle: {
-              normal: {
-                color: new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [
-                  {
-                    offset: 0,
-                    color: 'rgba(24, 255, 255, 1)',
-                  },
-                  {
-                    offset: 1,
-                    color: 'rgba(188, 255, 255, 1)',
-                  },
-                ]),
-              },
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [
+                {
+                  offset: 0,
+                  color: 'rgba(24, 255, 255, 1)',
+                },
+                {
+                  offset: 1,
+                  color: 'rgba(188, 255, 255, 1)',
+                },
+              ]),
             },
             data: props.data.yAxis,
           },
@@ -204,23 +203,41 @@
       };
       option && chartDom.setOption(option, true);
       allData.chart = chartDom;
+      animateChart();
     };
     watch(
       () => props.refresh,
       () => {
-        if (allData.chartDom) {
-          allData.chartDom.dispose();
-          allData.chartDom = null;
+        if (allData.chart) {
+          allData.chart.dispose();
+          allData.chart = null;
         }
         setTimeout(() => {
           init();
         }, 0);
       }
     );
+    // echarts动画
+    function animateChart() {
+      let length = props.data.xAxis.length;
+      let i = 0;
+      allData.timer = setInterval(() => {
+        i++;
+        if (i == length) i = 0;
+        allData.chart.dispatchAction({
+          type: 'showTip',
+          seriesIndex: 0,
+          dataIndex: i,
+        });
+      }, 1500);
+    }
     onMounted(() => {
       init();
       window.addEventListener('resize', resizeTheChart);
     });
+    onUnmounted(() => {
+      if (allData.timer) clearInterval(allData.timer);
+    });
     return {
       ...toRefs(allData),
       resizeTheChart,
diff --git a/src/views/sponeScreen/Echarts/RainfallLegend.vue b/src/views/sponeScreen/Echarts/RainfallLegend.vue
index f6069cc..1c83534 100644
--- a/src/views/sponeScreen/Echarts/RainfallLegend.vue
+++ b/src/views/sponeScreen/Echarts/RainfallLegend.vue
@@ -31,6 +31,7 @@
       var option;
       option = {
         // backgroundColor: '#0e2147',
+        color: ['#3FFFC2'],
         grid: {
           //   left: '5%',
           top: '10%',
@@ -132,12 +133,9 @@
             name: '降雨量',
             type: 'line',
             data: props.data.data1,
-
             itemStyle: {
-              normal: {
-                borderWidth: 5,
-                // color: '#0696f9',
-              },
+              borderWidth: 5,
+              // color: '#0696f9',
             },
           },
           {
@@ -153,11 +151,9 @@
               symbolSize: 15,
             },
             lineStyle: {
-              normal: {
-                width: 1,
-                opacity: 0.6,
-                curveness: 0.2,
-              },
+              width: 1,
+              opacity: 0.6,
+              curveness: 0.2,
             },
             data: props.data.data,
           },
diff --git a/src/views/sponeScreen/Echarts/tslyqk_constituent_3d.vue b/src/views/sponeScreen/Echarts/tslyqk_constituent_3d.vue
index 2b72b45..b61a344 100644
--- a/src/views/sponeScreen/Echarts/tslyqk_constituent_3d.vue
+++ b/src/views/sponeScreen/Echarts/tslyqk_constituent_3d.vue
@@ -9,6 +9,8 @@
 import * as echarts from 'echarts';
 const { proxy } = getCurrentInstance();
 
+const myChart = ref(null);
+
 // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
 function getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
   // 计算
@@ -147,8 +149,8 @@
       show: false,
     },
     itemStyle: {
-      opacity: 0.1,
-      color: '#E1E8EC',
+      opacity: 0.9,
+      color: '#296E99',
     },
     parametricEquation: {
       u: {
@@ -182,13 +184,13 @@
       show: false,
     },
     itemStyle: {
-      opacity: 0.1,
-      color: '#E1E8EC',
+      opacity: 0.2,
+      color: '#215983',
     },
     parametricEquation: {
       u: {
         min: 0,
-        max: Math.PI * 2,
+        max: Math.PI * 3,
         step: Math.PI / 20,
       },
       v: {
@@ -197,10 +199,10 @@
         step: Math.PI / 20,
       },
       x: function (u, v) {
-        return ((Math.sin(v) * Math.sin(u) + Math.sin(u)) / Math.PI) * 2;
+        return ((Math.sin(v) * Math.sin(u) + Math.sin(u)) / Math.PI) * 3;
       },
       y: function (u, v) {
-        return ((Math.sin(v) * Math.cos(u) + Math.cos(u)) / Math.PI) * 2;
+        return ((Math.sin(v) * Math.cos(u) + Math.cos(u)) / Math.PI) * 3;
       },
       z: function (u, v) {
         return Math.cos(v) > 0 ? -5 : -7;
@@ -215,8 +217,8 @@
       show: false,
     },
     itemStyle: {
-      opacity: 0.1,
-      color: '#E1E8EC',
+      opacity: 1,
+      color: '#25719D',
     },
     parametricEquation: {
       u: {
@@ -230,10 +232,10 @@
         step: Math.PI / 20,
       },
       x: function (u, v) {
-        return ((Math.sin(v) * Math.sin(u) + Math.sin(u)) / Math.PI) * 2.2;
+        return ((Math.sin(v) * Math.sin(u) + Math.sin(u)) / Math.PI) * 2.5;
       },
       y: function (u, v) {
-        return ((Math.sin(v) * Math.cos(u) + Math.cos(u)) / Math.PI) * 2.2;
+        return ((Math.sin(v) * Math.cos(u) + Math.cos(u)) / Math.PI) * 2.5;
       },
       z: function (u, v) {
         return Math.cos(v) > 0 ? -7 : -7;
@@ -258,12 +260,13 @@
     legend: {
       orient: 'vertical',
       icon: 'circle',
-      right: '5%',
-      top: '20%',
+      right: '3%',
+      top: '22%',
       show: true,
       itemGap: 10,
       textStyle: {
         color: '#A1E2FF',
+        fontSize: 14,
       },
       // icon:'diamond',
       data: legendData,
@@ -290,12 +293,11 @@
         // zoomSensitivity: 100,
         // panSensitivity: 100,
       },
-      top: '5%',
+      top: '0%',
       left: 'left',
-      width: '70%',
-      //   heigth: '50%',
+      width: '60%',
       show: false,
-      boxHeight: 20,
+      boxHeight: 50,
     },
     series: series,
   };
@@ -306,52 +308,59 @@
 const initEcharts = () => {
   const optionData = [
     {
-      name: '草(0.4%)',
-      value: 0.4,
+      name: '草(17.4k㎡,0.4%)',
+      value: 17.4,
       itemStyle: {
-        color: '#FFED52',
+        color: '#E7EA39',
       },
     },
     {
-      name: '田 (83.3%)',
-      value: 83.3,
+      name: '田 (4051.55k㎡,83.3%)',
+      value: 4051.55,
       itemStyle: {
-        color: '#FF8E5B',
+        color: '#E89668',
       },
     },
     {
-      name: '林 (11.4%)',
-      value: 11.4,
+      name: '林 (553.89k㎡,11.4%)',
+      value: 553.89,
       itemStyle: {
-        color: '#D956FF',
+        color: '#D863F4',
       },
     },
     {
-      name: '湖 (1.6%)',
-      value: 1.6,
+      name: '湖 (78.54k㎡,1.6%)',
+      value: 78.54,
       itemStyle: {
-        color: '#18FFFF',
+        color: '#03BABB',
       },
     },
     {
-      name: '水 (3.4%)',
-      value: 3.4,
+      name: '水 (165.05k㎡,3.4%)',
+      value: 165.05,
       itemStyle: {
-        color: '#4CC1FF',
+        color: '#3EB4F1',
       },
     },
   ];
   // 生成配置选项
   const option = getPie3D(optionData, 0.59);
-  //   const myChart = proxy.echarts.init(proxy.$refs.echarts);
-  const myChart = echarts.init(proxy.$refs.echarts3D);
+  myChart.value = echarts.init(proxy.$refs.echarts3D);
 
   // 绘制图形
-  myChart.setOption(option);
+  myChart.value.setOption(option);
 };
 
+//自适应
+function resizeTheChart() {
+  if (myChart.value) {
+    myChart.value.resize();
+  }
+}
+
 onMounted(() => {
   initEcharts();
+  window.addEventListener('resize', resizeTheChart);
 });
 </script>
 
diff --git a/src/views/sponeScreen/HaiMianScreen/index.vue b/src/views/sponeScreen/HaiMianScreen/index.vue
index 96efdfd..3702b26 100644
--- a/src/views/sponeScreen/HaiMianScreen/index.vue
+++ b/src/views/sponeScreen/HaiMianScreen/index.vue
@@ -2,13 +2,13 @@
   <!-- 海绵综合一张图首页 -->
   <div class="hmMainPage">
     <!-- 地图 -->
-    <GisMapMF></GisMapMF>
+    <!-- <GisMapMF></GisMapMF> -->
 
     <!-- 图例 -->
-    <Legend :showLegend="showLegend"></Legend>
+    <Legend :showLegend="showLegend" :class="['animate__animated', showPanel ? 'animate__fadeOutDown' : '']"></Legend>
 
     <!-- 控制面板按钮 -->
-    <div class="controlHM">
+    <div class="controlHM" :style="{ right: showPanel ? '30px' : '520px' }" v-if="menuIndex != 3">
       <img src="@/assets/newImgs/HMScreen/iconLegend.png" alt="" title="图例控制" @click="controlLegend" />
       <img src="@/assets/newImgs/HMScreen/iconPane.png" alt="" title="展开收起" @click="controlPanel" />
     </div>
@@ -62,7 +62,7 @@
   { name: '长效运维', id: 5 },
 ]);
 const menuIndex = ref(1);
-const showPanel = ref(true);
+const showPanel = ref(false);
 const showLegend = ref(false);
 
 // 跳转业务系统
@@ -154,7 +154,6 @@
   }
   .controlHM {
     position: absolute;
-    right: 500px;
     bottom: 50px;
     z-index: 220;
     width: 32px;
@@ -169,7 +168,7 @@
     position: absolute;
     bottom: 0px;
     left: 0px;
-    z-index: 220;
+    z-index: 180;
     width: 1920px;
     height: 100px;
     background: url('@/assets/newImgs/HMScreen/bottom_img .png') no-repeat;
diff --git a/src/views/sponeScreen/chengguanweiScreen/mainIndex.vue b/src/views/sponeScreen/chengguanweiScreen/mainIndex.vue
index d39f58e..edfadd6 100644
--- a/src/views/sponeScreen/chengguanweiScreen/mainIndex.vue
+++ b/src/views/sponeScreen/chengguanweiScreen/mainIndex.vue
@@ -2,10 +2,11 @@
   <!-- 3800*866 城管委-->
   <div class="cgwFivthScreen">
     3800*866 城管委
+    <img src="@/assets/newImgs/HMScreen/main.png" alt="" title="跳转业务系统" class="mainYW" @click="goSystem" />
     <!-- 地图 -->
     <GisMapMF></GisMapMF>
     <!-- 图例 -->
-    <Legend></Legend>
+    <!-- <Legend></Legend> -->
   </div>
 </template>
 
@@ -14,6 +15,11 @@
 import Legend from '@/views/sponeScreen/gisMF/legendKF.vue';
 const { proxy } = getCurrentInstance();
 
+// 跳转业务系统
+function goSystem() {
+  router.push({ path: '/index' });
+}
+
 onMounted(() => {});
 </script>
 
@@ -25,5 +31,11 @@
   background: #010e22;
   overflow: auto;
   position: relative;
+  .mainYW {
+    width: 50px;
+    height: 44px;
+    cursor: pointer;
+    margin: 10px 10px 0px 30px;
+  }
 }
 </style>

diff --git a/src/assets/newImgs/HMScreen/partBg.png b/src/assets/newImgs/HMScreen/partBg.png
index 7219105..0b8959a 100644
--- a/src/assets/newImgs/HMScreen/partBg.png
+++ b/src/assets/newImgs/HMScreen/partBg.png
Binary files differ
diff --git a/src/views/sponeScreen/Echarts/RainfallEcharts.vue b/src/views/sponeScreen/Echarts/RainfallEcharts.vue
index 2fbaaec..8c4b9e2 100644
--- a/src/views/sponeScreen/Echarts/RainfallEcharts.vue
+++ b/src/views/sponeScreen/Echarts/RainfallEcharts.vue
@@ -4,7 +4,7 @@
 <script>
 import * as echarts from 'echarts';
 import { guid } from '@/utils/ruoyi';
-import { reactive, toRefs, onMounted, watch } from 'vue';
+import { reactive, toRefs, onMounted, watch, onUnmounted } from 'vue';
 export default {
   name: 'line-chart',
   props: {
@@ -17,6 +17,7 @@
       legend: [],
       id: guid(),
       chart: null,
+      timer: null,
     });
     const resizeTheChart = () => {
       if (allData.chart) {
@@ -177,18 +178,16 @@
             barGap: '10%', // Make series be overlap
             barCateGoryGap: '10%',
             itemStyle: {
-              normal: {
-                color: new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [
-                  {
-                    offset: 0,
-                    color: 'rgba(24, 255, 255, 1)',
-                  },
-                  {
-                    offset: 1,
-                    color: 'rgba(188, 255, 255, 1)',
-                  },
-                ]),
-              },
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [
+                {
+                  offset: 0,
+                  color: 'rgba(24, 255, 255, 1)',
+                },
+                {
+                  offset: 1,
+                  color: 'rgba(188, 255, 255, 1)',
+                },
+              ]),
             },
             data: props.data.yAxis,
           },
@@ -204,23 +203,41 @@
       };
       option && chartDom.setOption(option, true);
       allData.chart = chartDom;
+      animateChart();
     };
     watch(
       () => props.refresh,
       () => {
-        if (allData.chartDom) {
-          allData.chartDom.dispose();
-          allData.chartDom = null;
+        if (allData.chart) {
+          allData.chart.dispose();
+          allData.chart = null;
         }
         setTimeout(() => {
           init();
         }, 0);
       }
     );
+    // echarts动画
+    function animateChart() {
+      let length = props.data.xAxis.length;
+      let i = 0;
+      allData.timer = setInterval(() => {
+        i++;
+        if (i == length) i = 0;
+        allData.chart.dispatchAction({
+          type: 'showTip',
+          seriesIndex: 0,
+          dataIndex: i,
+        });
+      }, 1500);
+    }
     onMounted(() => {
       init();
       window.addEventListener('resize', resizeTheChart);
     });
+    onUnmounted(() => {
+      if (allData.timer) clearInterval(allData.timer);
+    });
     return {
       ...toRefs(allData),
       resizeTheChart,
diff --git a/src/views/sponeScreen/Echarts/RainfallLegend.vue b/src/views/sponeScreen/Echarts/RainfallLegend.vue
index f6069cc..1c83534 100644
--- a/src/views/sponeScreen/Echarts/RainfallLegend.vue
+++ b/src/views/sponeScreen/Echarts/RainfallLegend.vue
@@ -31,6 +31,7 @@
       var option;
       option = {
         // backgroundColor: '#0e2147',
+        color: ['#3FFFC2'],
         grid: {
           //   left: '5%',
           top: '10%',
@@ -132,12 +133,9 @@
             name: '降雨量',
             type: 'line',
             data: props.data.data1,
-
             itemStyle: {
-              normal: {
-                borderWidth: 5,
-                // color: '#0696f9',
-              },
+              borderWidth: 5,
+              // color: '#0696f9',
             },
           },
           {
@@ -153,11 +151,9 @@
               symbolSize: 15,
             },
             lineStyle: {
-              normal: {
-                width: 1,
-                opacity: 0.6,
-                curveness: 0.2,
-              },
+              width: 1,
+              opacity: 0.6,
+              curveness: 0.2,
             },
             data: props.data.data,
           },
diff --git a/src/views/sponeScreen/Echarts/tslyqk_constituent_3d.vue b/src/views/sponeScreen/Echarts/tslyqk_constituent_3d.vue
index 2b72b45..b61a344 100644
--- a/src/views/sponeScreen/Echarts/tslyqk_constituent_3d.vue
+++ b/src/views/sponeScreen/Echarts/tslyqk_constituent_3d.vue
@@ -9,6 +9,8 @@
 import * as echarts from 'echarts';
 const { proxy } = getCurrentInstance();
 
+const myChart = ref(null);
+
 // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
 function getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
   // 计算
@@ -147,8 +149,8 @@
       show: false,
     },
     itemStyle: {
-      opacity: 0.1,
-      color: '#E1E8EC',
+      opacity: 0.9,
+      color: '#296E99',
     },
     parametricEquation: {
       u: {
@@ -182,13 +184,13 @@
       show: false,
     },
     itemStyle: {
-      opacity: 0.1,
-      color: '#E1E8EC',
+      opacity: 0.2,
+      color: '#215983',
     },
     parametricEquation: {
       u: {
         min: 0,
-        max: Math.PI * 2,
+        max: Math.PI * 3,
         step: Math.PI / 20,
       },
       v: {
@@ -197,10 +199,10 @@
         step: Math.PI / 20,
       },
       x: function (u, v) {
-        return ((Math.sin(v) * Math.sin(u) + Math.sin(u)) / Math.PI) * 2;
+        return ((Math.sin(v) * Math.sin(u) + Math.sin(u)) / Math.PI) * 3;
       },
       y: function (u, v) {
-        return ((Math.sin(v) * Math.cos(u) + Math.cos(u)) / Math.PI) * 2;
+        return ((Math.sin(v) * Math.cos(u) + Math.cos(u)) / Math.PI) * 3;
       },
       z: function (u, v) {
         return Math.cos(v) > 0 ? -5 : -7;
@@ -215,8 +217,8 @@
       show: false,
     },
     itemStyle: {
-      opacity: 0.1,
-      color: '#E1E8EC',
+      opacity: 1,
+      color: '#25719D',
     },
     parametricEquation: {
       u: {
@@ -230,10 +232,10 @@
         step: Math.PI / 20,
       },
       x: function (u, v) {
-        return ((Math.sin(v) * Math.sin(u) + Math.sin(u)) / Math.PI) * 2.2;
+        return ((Math.sin(v) * Math.sin(u) + Math.sin(u)) / Math.PI) * 2.5;
       },
       y: function (u, v) {
-        return ((Math.sin(v) * Math.cos(u) + Math.cos(u)) / Math.PI) * 2.2;
+        return ((Math.sin(v) * Math.cos(u) + Math.cos(u)) / Math.PI) * 2.5;
       },
       z: function (u, v) {
         return Math.cos(v) > 0 ? -7 : -7;
@@ -258,12 +260,13 @@
     legend: {
       orient: 'vertical',
       icon: 'circle',
-      right: '5%',
-      top: '20%',
+      right: '3%',
+      top: '22%',
       show: true,
       itemGap: 10,
       textStyle: {
         color: '#A1E2FF',
+        fontSize: 14,
       },
       // icon:'diamond',
       data: legendData,
@@ -290,12 +293,11 @@
         // zoomSensitivity: 100,
         // panSensitivity: 100,
       },
-      top: '5%',
+      top: '0%',
       left: 'left',
-      width: '70%',
-      //   heigth: '50%',
+      width: '60%',
       show: false,
-      boxHeight: 20,
+      boxHeight: 50,
     },
     series: series,
   };
@@ -306,52 +308,59 @@
 const initEcharts = () => {
   const optionData = [
     {
-      name: '草(0.4%)',
-      value: 0.4,
+      name: '草(17.4k㎡,0.4%)',
+      value: 17.4,
       itemStyle: {
-        color: '#FFED52',
+        color: '#E7EA39',
       },
     },
     {
-      name: '田 (83.3%)',
-      value: 83.3,
+      name: '田 (4051.55k㎡,83.3%)',
+      value: 4051.55,
       itemStyle: {
-        color: '#FF8E5B',
+        color: '#E89668',
       },
     },
     {
-      name: '林 (11.4%)',
-      value: 11.4,
+      name: '林 (553.89k㎡,11.4%)',
+      value: 553.89,
       itemStyle: {
-        color: '#D956FF',
+        color: '#D863F4',
       },
     },
     {
-      name: '湖 (1.6%)',
-      value: 1.6,
+      name: '湖 (78.54k㎡,1.6%)',
+      value: 78.54,
       itemStyle: {
-        color: '#18FFFF',
+        color: '#03BABB',
       },
     },
     {
-      name: '水 (3.4%)',
-      value: 3.4,
+      name: '水 (165.05k㎡,3.4%)',
+      value: 165.05,
       itemStyle: {
-        color: '#4CC1FF',
+        color: '#3EB4F1',
       },
     },
   ];
   // 生成配置选项
   const option = getPie3D(optionData, 0.59);
-  //   const myChart = proxy.echarts.init(proxy.$refs.echarts);
-  const myChart = echarts.init(proxy.$refs.echarts3D);
+  myChart.value = echarts.init(proxy.$refs.echarts3D);
 
   // 绘制图形
-  myChart.setOption(option);
+  myChart.value.setOption(option);
 };
 
+//自适应
+function resizeTheChart() {
+  if (myChart.value) {
+    myChart.value.resize();
+  }
+}
+
 onMounted(() => {
   initEcharts();
+  window.addEventListener('resize', resizeTheChart);
 });
 </script>
 
diff --git a/src/views/sponeScreen/HaiMianScreen/index.vue b/src/views/sponeScreen/HaiMianScreen/index.vue
index 96efdfd..3702b26 100644
--- a/src/views/sponeScreen/HaiMianScreen/index.vue
+++ b/src/views/sponeScreen/HaiMianScreen/index.vue
@@ -2,13 +2,13 @@
   <!-- 海绵综合一张图首页 -->
   <div class="hmMainPage">
     <!-- 地图 -->
-    <GisMapMF></GisMapMF>
+    <!-- <GisMapMF></GisMapMF> -->
 
     <!-- 图例 -->
-    <Legend :showLegend="showLegend"></Legend>
+    <Legend :showLegend="showLegend" :class="['animate__animated', showPanel ? 'animate__fadeOutDown' : '']"></Legend>
 
     <!-- 控制面板按钮 -->
-    <div class="controlHM">
+    <div class="controlHM" :style="{ right: showPanel ? '30px' : '520px' }" v-if="menuIndex != 3">
       <img src="@/assets/newImgs/HMScreen/iconLegend.png" alt="" title="图例控制" @click="controlLegend" />
       <img src="@/assets/newImgs/HMScreen/iconPane.png" alt="" title="展开收起" @click="controlPanel" />
     </div>
@@ -62,7 +62,7 @@
   { name: '长效运维', id: 5 },
 ]);
 const menuIndex = ref(1);
-const showPanel = ref(true);
+const showPanel = ref(false);
 const showLegend = ref(false);
 
 // 跳转业务系统
@@ -154,7 +154,6 @@
   }
   .controlHM {
     position: absolute;
-    right: 500px;
     bottom: 50px;
     z-index: 220;
     width: 32px;
@@ -169,7 +168,7 @@
     position: absolute;
     bottom: 0px;
     left: 0px;
-    z-index: 220;
+    z-index: 180;
     width: 1920px;
     height: 100px;
     background: url('@/assets/newImgs/HMScreen/bottom_img .png') no-repeat;
diff --git a/src/views/sponeScreen/chengguanweiScreen/mainIndex.vue b/src/views/sponeScreen/chengguanweiScreen/mainIndex.vue
index d39f58e..edfadd6 100644
--- a/src/views/sponeScreen/chengguanweiScreen/mainIndex.vue
+++ b/src/views/sponeScreen/chengguanweiScreen/mainIndex.vue
@@ -2,10 +2,11 @@
   <!-- 3800*866 城管委-->
   <div class="cgwFivthScreen">
     3800*866 城管委
+    <img src="@/assets/newImgs/HMScreen/main.png" alt="" title="跳转业务系统" class="mainYW" @click="goSystem" />
     <!-- 地图 -->
     <GisMapMF></GisMapMF>
     <!-- 图例 -->
-    <Legend></Legend>
+    <!-- <Legend></Legend> -->
   </div>
 </template>
 
@@ -14,6 +15,11 @@
 import Legend from '@/views/sponeScreen/gisMF/legendKF.vue';
 const { proxy } = getCurrentInstance();
 
+// 跳转业务系统
+function goSystem() {
+  router.push({ path: '/index' });
+}
+
 onMounted(() => {});
 </script>
 
@@ -25,5 +31,11 @@
   background: #010e22;
   overflow: auto;
   position: relative;
+  .mainYW {
+    width: 50px;
+    height: 44px;
+    cursor: pointer;
+    margin: 10px 10px 0px 30px;
+  }
 }
 </style>
diff --git a/src/views/sponeScreen/cityGK/headHMAimg.vue b/src/views/sponeScreen/cityGK/headHMAimg.vue
index 0c014b9..aa99c96 100644
--- a/src/views/sponeScreen/cityGK/headHMAimg.vue
+++ b/src/views/sponeScreen/cityGK/headHMAimg.vue
@@ -26,7 +26,7 @@
     </div>
     <div class="three">
       <div class="PhotoClass">
-        <div class="PhotoClassA"></div>
+        <div class="PhotoClassA" style="opacity: 0.3"></div>
       </div>
       <div class="Selectiontime">
         <div class="SelectiontimeA">评估期</div>
@@ -38,7 +38,7 @@
     </div>
     <div class="four">
       <div class="PhotoClass">
-        <div class="PhotoClassA"></div>
+        <div class="PhotoClassA" style="opacity: 0.3"></div>
       </div>
       <div class="Selectiontime">
         <div class="SelectiontimeA">长效运维期</div>

diff --git a/src/assets/newImgs/HMScreen/partBg.png b/src/assets/newImgs/HMScreen/partBg.png
index 7219105..0b8959a 100644
--- a/src/assets/newImgs/HMScreen/partBg.png
+++ b/src/assets/newImgs/HMScreen/partBg.png
Binary files differ
diff --git a/src/views/sponeScreen/Echarts/RainfallEcharts.vue b/src/views/sponeScreen/Echarts/RainfallEcharts.vue
index 2fbaaec..8c4b9e2 100644
--- a/src/views/sponeScreen/Echarts/RainfallEcharts.vue
+++ b/src/views/sponeScreen/Echarts/RainfallEcharts.vue
@@ -4,7 +4,7 @@
 <script>
 import * as echarts from 'echarts';
 import { guid } from '@/utils/ruoyi';
-import { reactive, toRefs, onMounted, watch } from 'vue';
+import { reactive, toRefs, onMounted, watch, onUnmounted } from 'vue';
 export default {
   name: 'line-chart',
   props: {
@@ -17,6 +17,7 @@
       legend: [],
       id: guid(),
       chart: null,
+      timer: null,
     });
     const resizeTheChart = () => {
       if (allData.chart) {
@@ -177,18 +178,16 @@
             barGap: '10%', // Make series be overlap
             barCateGoryGap: '10%',
             itemStyle: {
-              normal: {
-                color: new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [
-                  {
-                    offset: 0,
-                    color: 'rgba(24, 255, 255, 1)',
-                  },
-                  {
-                    offset: 1,
-                    color: 'rgba(188, 255, 255, 1)',
-                  },
-                ]),
-              },
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [
+                {
+                  offset: 0,
+                  color: 'rgba(24, 255, 255, 1)',
+                },
+                {
+                  offset: 1,
+                  color: 'rgba(188, 255, 255, 1)',
+                },
+              ]),
             },
             data: props.data.yAxis,
           },
@@ -204,23 +203,41 @@
       };
       option && chartDom.setOption(option, true);
       allData.chart = chartDom;
+      animateChart();
     };
     watch(
       () => props.refresh,
       () => {
-        if (allData.chartDom) {
-          allData.chartDom.dispose();
-          allData.chartDom = null;
+        if (allData.chart) {
+          allData.chart.dispose();
+          allData.chart = null;
         }
         setTimeout(() => {
           init();
         }, 0);
       }
     );
+    // echarts动画
+    function animateChart() {
+      let length = props.data.xAxis.length;
+      let i = 0;
+      allData.timer = setInterval(() => {
+        i++;
+        if (i == length) i = 0;
+        allData.chart.dispatchAction({
+          type: 'showTip',
+          seriesIndex: 0,
+          dataIndex: i,
+        });
+      }, 1500);
+    }
     onMounted(() => {
       init();
       window.addEventListener('resize', resizeTheChart);
     });
+    onUnmounted(() => {
+      if (allData.timer) clearInterval(allData.timer);
+    });
     return {
       ...toRefs(allData),
       resizeTheChart,
diff --git a/src/views/sponeScreen/Echarts/RainfallLegend.vue b/src/views/sponeScreen/Echarts/RainfallLegend.vue
index f6069cc..1c83534 100644
--- a/src/views/sponeScreen/Echarts/RainfallLegend.vue
+++ b/src/views/sponeScreen/Echarts/RainfallLegend.vue
@@ -31,6 +31,7 @@
       var option;
       option = {
         // backgroundColor: '#0e2147',
+        color: ['#3FFFC2'],
         grid: {
           //   left: '5%',
           top: '10%',
@@ -132,12 +133,9 @@
             name: '降雨量',
             type: 'line',
             data: props.data.data1,
-
             itemStyle: {
-              normal: {
-                borderWidth: 5,
-                // color: '#0696f9',
-              },
+              borderWidth: 5,
+              // color: '#0696f9',
             },
           },
           {
@@ -153,11 +151,9 @@
               symbolSize: 15,
             },
             lineStyle: {
-              normal: {
-                width: 1,
-                opacity: 0.6,
-                curveness: 0.2,
-              },
+              width: 1,
+              opacity: 0.6,
+              curveness: 0.2,
             },
             data: props.data.data,
           },
diff --git a/src/views/sponeScreen/Echarts/tslyqk_constituent_3d.vue b/src/views/sponeScreen/Echarts/tslyqk_constituent_3d.vue
index 2b72b45..b61a344 100644
--- a/src/views/sponeScreen/Echarts/tslyqk_constituent_3d.vue
+++ b/src/views/sponeScreen/Echarts/tslyqk_constituent_3d.vue
@@ -9,6 +9,8 @@
 import * as echarts from 'echarts';
 const { proxy } = getCurrentInstance();
 
+const myChart = ref(null);
+
 // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
 function getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
   // 计算
@@ -147,8 +149,8 @@
       show: false,
     },
     itemStyle: {
-      opacity: 0.1,
-      color: '#E1E8EC',
+      opacity: 0.9,
+      color: '#296E99',
     },
     parametricEquation: {
       u: {
@@ -182,13 +184,13 @@
       show: false,
     },
     itemStyle: {
-      opacity: 0.1,
-      color: '#E1E8EC',
+      opacity: 0.2,
+      color: '#215983',
     },
     parametricEquation: {
       u: {
         min: 0,
-        max: Math.PI * 2,
+        max: Math.PI * 3,
         step: Math.PI / 20,
       },
       v: {
@@ -197,10 +199,10 @@
         step: Math.PI / 20,
       },
       x: function (u, v) {
-        return ((Math.sin(v) * Math.sin(u) + Math.sin(u)) / Math.PI) * 2;
+        return ((Math.sin(v) * Math.sin(u) + Math.sin(u)) / Math.PI) * 3;
       },
       y: function (u, v) {
-        return ((Math.sin(v) * Math.cos(u) + Math.cos(u)) / Math.PI) * 2;
+        return ((Math.sin(v) * Math.cos(u) + Math.cos(u)) / Math.PI) * 3;
       },
       z: function (u, v) {
         return Math.cos(v) > 0 ? -5 : -7;
@@ -215,8 +217,8 @@
       show: false,
     },
     itemStyle: {
-      opacity: 0.1,
-      color: '#E1E8EC',
+      opacity: 1,
+      color: '#25719D',
     },
     parametricEquation: {
       u: {
@@ -230,10 +232,10 @@
         step: Math.PI / 20,
       },
       x: function (u, v) {
-        return ((Math.sin(v) * Math.sin(u) + Math.sin(u)) / Math.PI) * 2.2;
+        return ((Math.sin(v) * Math.sin(u) + Math.sin(u)) / Math.PI) * 2.5;
       },
       y: function (u, v) {
-        return ((Math.sin(v) * Math.cos(u) + Math.cos(u)) / Math.PI) * 2.2;
+        return ((Math.sin(v) * Math.cos(u) + Math.cos(u)) / Math.PI) * 2.5;
       },
       z: function (u, v) {
         return Math.cos(v) > 0 ? -7 : -7;
@@ -258,12 +260,13 @@
     legend: {
       orient: 'vertical',
       icon: 'circle',
-      right: '5%',
-      top: '20%',
+      right: '3%',
+      top: '22%',
       show: true,
       itemGap: 10,
       textStyle: {
         color: '#A1E2FF',
+        fontSize: 14,
       },
       // icon:'diamond',
       data: legendData,
@@ -290,12 +293,11 @@
         // zoomSensitivity: 100,
         // panSensitivity: 100,
       },
-      top: '5%',
+      top: '0%',
       left: 'left',
-      width: '70%',
-      //   heigth: '50%',
+      width: '60%',
       show: false,
-      boxHeight: 20,
+      boxHeight: 50,
     },
     series: series,
   };
@@ -306,52 +308,59 @@
 const initEcharts = () => {
   const optionData = [
     {
-      name: '草(0.4%)',
-      value: 0.4,
+      name: '草(17.4k㎡,0.4%)',
+      value: 17.4,
       itemStyle: {
-        color: '#FFED52',
+        color: '#E7EA39',
       },
     },
     {
-      name: '田 (83.3%)',
-      value: 83.3,
+      name: '田 (4051.55k㎡,83.3%)',
+      value: 4051.55,
       itemStyle: {
-        color: '#FF8E5B',
+        color: '#E89668',
       },
     },
     {
-      name: '林 (11.4%)',
-      value: 11.4,
+      name: '林 (553.89k㎡,11.4%)',
+      value: 553.89,
       itemStyle: {
-        color: '#D956FF',
+        color: '#D863F4',
       },
     },
     {
-      name: '湖 (1.6%)',
-      value: 1.6,
+      name: '湖 (78.54k㎡,1.6%)',
+      value: 78.54,
       itemStyle: {
-        color: '#18FFFF',
+        color: '#03BABB',
       },
     },
     {
-      name: '水 (3.4%)',
-      value: 3.4,
+      name: '水 (165.05k㎡,3.4%)',
+      value: 165.05,
       itemStyle: {
-        color: '#4CC1FF',
+        color: '#3EB4F1',
       },
     },
   ];
   // 生成配置选项
   const option = getPie3D(optionData, 0.59);
-  //   const myChart = proxy.echarts.init(proxy.$refs.echarts);
-  const myChart = echarts.init(proxy.$refs.echarts3D);
+  myChart.value = echarts.init(proxy.$refs.echarts3D);
 
   // 绘制图形
-  myChart.setOption(option);
+  myChart.value.setOption(option);
 };
 
+//自适应
+function resizeTheChart() {
+  if (myChart.value) {
+    myChart.value.resize();
+  }
+}
+
 onMounted(() => {
   initEcharts();
+  window.addEventListener('resize', resizeTheChart);
 });
 </script>
 
diff --git a/src/views/sponeScreen/HaiMianScreen/index.vue b/src/views/sponeScreen/HaiMianScreen/index.vue
index 96efdfd..3702b26 100644
--- a/src/views/sponeScreen/HaiMianScreen/index.vue
+++ b/src/views/sponeScreen/HaiMianScreen/index.vue
@@ -2,13 +2,13 @@
   <!-- 海绵综合一张图首页 -->
   <div class="hmMainPage">
     <!-- 地图 -->
-    <GisMapMF></GisMapMF>
+    <!-- <GisMapMF></GisMapMF> -->
 
     <!-- 图例 -->
-    <Legend :showLegend="showLegend"></Legend>
+    <Legend :showLegend="showLegend" :class="['animate__animated', showPanel ? 'animate__fadeOutDown' : '']"></Legend>
 
     <!-- 控制面板按钮 -->
-    <div class="controlHM">
+    <div class="controlHM" :style="{ right: showPanel ? '30px' : '520px' }" v-if="menuIndex != 3">
       <img src="@/assets/newImgs/HMScreen/iconLegend.png" alt="" title="图例控制" @click="controlLegend" />
       <img src="@/assets/newImgs/HMScreen/iconPane.png" alt="" title="展开收起" @click="controlPanel" />
     </div>
@@ -62,7 +62,7 @@
   { name: '长效运维', id: 5 },
 ]);
 const menuIndex = ref(1);
-const showPanel = ref(true);
+const showPanel = ref(false);
 const showLegend = ref(false);
 
 // 跳转业务系统
@@ -154,7 +154,6 @@
   }
   .controlHM {
     position: absolute;
-    right: 500px;
     bottom: 50px;
     z-index: 220;
     width: 32px;
@@ -169,7 +168,7 @@
     position: absolute;
     bottom: 0px;
     left: 0px;
-    z-index: 220;
+    z-index: 180;
     width: 1920px;
     height: 100px;
     background: url('@/assets/newImgs/HMScreen/bottom_img .png') no-repeat;
diff --git a/src/views/sponeScreen/chengguanweiScreen/mainIndex.vue b/src/views/sponeScreen/chengguanweiScreen/mainIndex.vue
index d39f58e..edfadd6 100644
--- a/src/views/sponeScreen/chengguanweiScreen/mainIndex.vue
+++ b/src/views/sponeScreen/chengguanweiScreen/mainIndex.vue
@@ -2,10 +2,11 @@
   <!-- 3800*866 城管委-->
   <div class="cgwFivthScreen">
     3800*866 城管委
+    <img src="@/assets/newImgs/HMScreen/main.png" alt="" title="跳转业务系统" class="mainYW" @click="goSystem" />
     <!-- 地图 -->
     <GisMapMF></GisMapMF>
     <!-- 图例 -->
-    <Legend></Legend>
+    <!-- <Legend></Legend> -->
   </div>
 </template>
 
@@ -14,6 +15,11 @@
 import Legend from '@/views/sponeScreen/gisMF/legendKF.vue';
 const { proxy } = getCurrentInstance();
 
+// 跳转业务系统
+function goSystem() {
+  router.push({ path: '/index' });
+}
+
 onMounted(() => {});
 </script>
 
@@ -25,5 +31,11 @@
   background: #010e22;
   overflow: auto;
   position: relative;
+  .mainYW {
+    width: 50px;
+    height: 44px;
+    cursor: pointer;
+    margin: 10px 10px 0px 30px;
+  }
 }
 </style>
diff --git a/src/views/sponeScreen/cityGK/headHMAimg.vue b/src/views/sponeScreen/cityGK/headHMAimg.vue
index 0c014b9..aa99c96 100644
--- a/src/views/sponeScreen/cityGK/headHMAimg.vue
+++ b/src/views/sponeScreen/cityGK/headHMAimg.vue
@@ -26,7 +26,7 @@
     </div>
     <div class="three">
       <div class="PhotoClass">
-        <div class="PhotoClassA"></div>
+        <div class="PhotoClassA" style="opacity: 0.3"></div>
       </div>
       <div class="Selectiontime">
         <div class="SelectiontimeA">评估期</div>
@@ -38,7 +38,7 @@
     </div>
     <div class="four">
       <div class="PhotoClass">
-        <div class="PhotoClassA"></div>
+        <div class="PhotoClassA" style="opacity: 0.3"></div>
       </div>
       <div class="Selectiontime">
         <div class="SelectiontimeA">长效运维期</div>
diff --git a/src/views/sponeScreen/cityGK/index.vue b/src/views/sponeScreen/cityGK/index.vue
index 5a9f820..ec0f660 100644
--- a/src/views/sponeScreen/cityGK/index.vue
+++ b/src/views/sponeScreen/cityGK/index.vue
@@ -1,7 +1,7 @@
 <template>
   <!-- 海绵综合一张图 城市概况 -->
   <div class="cityPage">
-    <div class="publicLeftHM">
+    <div :class="['publicLeftHM', 'animate__animated', showPanel ? 'animate__fadeOutLeft' : 'animate__fadeInLeft']">
       <!-- 自然地理 -->
       <div class="partTitleHM">自然地理</div>
       <div class="partContHM">
@@ -46,11 +46,11 @@
     </div>
 
     <!-- 头部 -->
-    <div class="headHMA">
+    <div :class="['headHMA', 'animate__animated', showPanel ? 'animate__fadeOutUp' : 'animate__fadeInDown']">
       <headHMAimg></headHMAimg>
     </div>
 
-    <div class="publicRightHM">
+    <div :class="['publicRightHM', 'animate__animated', showPanel ? 'animate__fadeOutRight' : 'animate__fadeInRight']">
       <!-- 城市规划 -->
       <cityplanning></cityplanning>
 
@@ -68,6 +68,7 @@
 import headHMAimg from '@/views/sponeScreen/cityGK/headHMAimg.vue'; //头部
 
 const { proxy } = getCurrentInstance();
+const showPanel = ref(true); //面板展开收起
 const policiesList = ref([
   {
     name: '一心',
@@ -105,6 +106,7 @@
   () => props.showPanel,
   () => {
     console.log('val---', props.showPanel);
+    showPanel.value = props.showPanel;
   },
   { immediate: true }
 );

diff --git a/src/assets/newImgs/HMScreen/partBg.png b/src/assets/newImgs/HMScreen/partBg.png
index 7219105..0b8959a 100644
--- a/src/assets/newImgs/HMScreen/partBg.png
+++ b/src/assets/newImgs/HMScreen/partBg.png
Binary files differ
diff --git a/src/views/sponeScreen/Echarts/RainfallEcharts.vue b/src/views/sponeScreen/Echarts/RainfallEcharts.vue
index 2fbaaec..8c4b9e2 100644
--- a/src/views/sponeScreen/Echarts/RainfallEcharts.vue
+++ b/src/views/sponeScreen/Echarts/RainfallEcharts.vue
@@ -4,7 +4,7 @@
 <script>
 import * as echarts from 'echarts';
 import { guid } from '@/utils/ruoyi';
-import { reactive, toRefs, onMounted, watch } from 'vue';
+import { reactive, toRefs, onMounted, watch, onUnmounted } from 'vue';
 export default {
   name: 'line-chart',
   props: {
@@ -17,6 +17,7 @@
       legend: [],
       id: guid(),
       chart: null,
+      timer: null,
     });
     const resizeTheChart = () => {
       if (allData.chart) {
@@ -177,18 +178,16 @@
             barGap: '10%', // Make series be overlap
             barCateGoryGap: '10%',
             itemStyle: {
-              normal: {
-                color: new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [
-                  {
-                    offset: 0,
-                    color: 'rgba(24, 255, 255, 1)',
-                  },
-                  {
-                    offset: 1,
-                    color: 'rgba(188, 255, 255, 1)',
-                  },
-                ]),
-              },
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [
+                {
+                  offset: 0,
+                  color: 'rgba(24, 255, 255, 1)',
+                },
+                {
+                  offset: 1,
+                  color: 'rgba(188, 255, 255, 1)',
+                },
+              ]),
             },
             data: props.data.yAxis,
           },
@@ -204,23 +203,41 @@
       };
       option && chartDom.setOption(option, true);
       allData.chart = chartDom;
+      animateChart();
     };
     watch(
       () => props.refresh,
       () => {
-        if (allData.chartDom) {
-          allData.chartDom.dispose();
-          allData.chartDom = null;
+        if (allData.chart) {
+          allData.chart.dispose();
+          allData.chart = null;
         }
         setTimeout(() => {
           init();
         }, 0);
       }
     );
+    // echarts动画
+    function animateChart() {
+      let length = props.data.xAxis.length;
+      let i = 0;
+      allData.timer = setInterval(() => {
+        i++;
+        if (i == length) i = 0;
+        allData.chart.dispatchAction({
+          type: 'showTip',
+          seriesIndex: 0,
+          dataIndex: i,
+        });
+      }, 1500);
+    }
     onMounted(() => {
       init();
       window.addEventListener('resize', resizeTheChart);
     });
+    onUnmounted(() => {
+      if (allData.timer) clearInterval(allData.timer);
+    });
     return {
       ...toRefs(allData),
       resizeTheChart,
diff --git a/src/views/sponeScreen/Echarts/RainfallLegend.vue b/src/views/sponeScreen/Echarts/RainfallLegend.vue
index f6069cc..1c83534 100644
--- a/src/views/sponeScreen/Echarts/RainfallLegend.vue
+++ b/src/views/sponeScreen/Echarts/RainfallLegend.vue
@@ -31,6 +31,7 @@
       var option;
       option = {
         // backgroundColor: '#0e2147',
+        color: ['#3FFFC2'],
         grid: {
           //   left: '5%',
           top: '10%',
@@ -132,12 +133,9 @@
             name: '降雨量',
             type: 'line',
             data: props.data.data1,
-
             itemStyle: {
-              normal: {
-                borderWidth: 5,
-                // color: '#0696f9',
-              },
+              borderWidth: 5,
+              // color: '#0696f9',
             },
           },
           {
@@ -153,11 +151,9 @@
               symbolSize: 15,
             },
             lineStyle: {
-              normal: {
-                width: 1,
-                opacity: 0.6,
-                curveness: 0.2,
-              },
+              width: 1,
+              opacity: 0.6,
+              curveness: 0.2,
             },
             data: props.data.data,
           },
diff --git a/src/views/sponeScreen/Echarts/tslyqk_constituent_3d.vue b/src/views/sponeScreen/Echarts/tslyqk_constituent_3d.vue
index 2b72b45..b61a344 100644
--- a/src/views/sponeScreen/Echarts/tslyqk_constituent_3d.vue
+++ b/src/views/sponeScreen/Echarts/tslyqk_constituent_3d.vue
@@ -9,6 +9,8 @@
 import * as echarts from 'echarts';
 const { proxy } = getCurrentInstance();
 
+const myChart = ref(null);
+
 // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
 function getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
   // 计算
@@ -147,8 +149,8 @@
       show: false,
     },
     itemStyle: {
-      opacity: 0.1,
-      color: '#E1E8EC',
+      opacity: 0.9,
+      color: '#296E99',
     },
     parametricEquation: {
       u: {
@@ -182,13 +184,13 @@
       show: false,
     },
     itemStyle: {
-      opacity: 0.1,
-      color: '#E1E8EC',
+      opacity: 0.2,
+      color: '#215983',
     },
     parametricEquation: {
       u: {
         min: 0,
-        max: Math.PI * 2,
+        max: Math.PI * 3,
         step: Math.PI / 20,
       },
       v: {
@@ -197,10 +199,10 @@
         step: Math.PI / 20,
       },
       x: function (u, v) {
-        return ((Math.sin(v) * Math.sin(u) + Math.sin(u)) / Math.PI) * 2;
+        return ((Math.sin(v) * Math.sin(u) + Math.sin(u)) / Math.PI) * 3;
       },
       y: function (u, v) {
-        return ((Math.sin(v) * Math.cos(u) + Math.cos(u)) / Math.PI) * 2;
+        return ((Math.sin(v) * Math.cos(u) + Math.cos(u)) / Math.PI) * 3;
       },
       z: function (u, v) {
         return Math.cos(v) > 0 ? -5 : -7;
@@ -215,8 +217,8 @@
       show: false,
     },
     itemStyle: {
-      opacity: 0.1,
-      color: '#E1E8EC',
+      opacity: 1,
+      color: '#25719D',
     },
     parametricEquation: {
       u: {
@@ -230,10 +232,10 @@
         step: Math.PI / 20,
       },
       x: function (u, v) {
-        return ((Math.sin(v) * Math.sin(u) + Math.sin(u)) / Math.PI) * 2.2;
+        return ((Math.sin(v) * Math.sin(u) + Math.sin(u)) / Math.PI) * 2.5;
       },
       y: function (u, v) {
-        return ((Math.sin(v) * Math.cos(u) + Math.cos(u)) / Math.PI) * 2.2;
+        return ((Math.sin(v) * Math.cos(u) + Math.cos(u)) / Math.PI) * 2.5;
       },
       z: function (u, v) {
         return Math.cos(v) > 0 ? -7 : -7;
@@ -258,12 +260,13 @@
     legend: {
       orient: 'vertical',
       icon: 'circle',
-      right: '5%',
-      top: '20%',
+      right: '3%',
+      top: '22%',
       show: true,
       itemGap: 10,
       textStyle: {
         color: '#A1E2FF',
+        fontSize: 14,
       },
       // icon:'diamond',
       data: legendData,
@@ -290,12 +293,11 @@
         // zoomSensitivity: 100,
         // panSensitivity: 100,
       },
-      top: '5%',
+      top: '0%',
       left: 'left',
-      width: '70%',
-      //   heigth: '50%',
+      width: '60%',
       show: false,
-      boxHeight: 20,
+      boxHeight: 50,
     },
     series: series,
   };
@@ -306,52 +308,59 @@
 const initEcharts = () => {
   const optionData = [
     {
-      name: '草(0.4%)',
-      value: 0.4,
+      name: '草(17.4k㎡,0.4%)',
+      value: 17.4,
       itemStyle: {
-        color: '#FFED52',
+        color: '#E7EA39',
       },
     },
     {
-      name: '田 (83.3%)',
-      value: 83.3,
+      name: '田 (4051.55k㎡,83.3%)',
+      value: 4051.55,
       itemStyle: {
-        color: '#FF8E5B',
+        color: '#E89668',
       },
     },
     {
-      name: '林 (11.4%)',
-      value: 11.4,
+      name: '林 (553.89k㎡,11.4%)',
+      value: 553.89,
       itemStyle: {
-        color: '#D956FF',
+        color: '#D863F4',
       },
     },
     {
-      name: '湖 (1.6%)',
-      value: 1.6,
+      name: '湖 (78.54k㎡,1.6%)',
+      value: 78.54,
       itemStyle: {
-        color: '#18FFFF',
+        color: '#03BABB',
       },
     },
     {
-      name: '水 (3.4%)',
-      value: 3.4,
+      name: '水 (165.05k㎡,3.4%)',
+      value: 165.05,
       itemStyle: {
-        color: '#4CC1FF',
+        color: '#3EB4F1',
       },
     },
   ];
   // 生成配置选项
   const option = getPie3D(optionData, 0.59);
-  //   const myChart = proxy.echarts.init(proxy.$refs.echarts);
-  const myChart = echarts.init(proxy.$refs.echarts3D);
+  myChart.value = echarts.init(proxy.$refs.echarts3D);
 
   // 绘制图形
-  myChart.setOption(option);
+  myChart.value.setOption(option);
 };
 
+//自适应
+function resizeTheChart() {
+  if (myChart.value) {
+    myChart.value.resize();
+  }
+}
+
 onMounted(() => {
   initEcharts();
+  window.addEventListener('resize', resizeTheChart);
 });
 </script>
 
diff --git a/src/views/sponeScreen/HaiMianScreen/index.vue b/src/views/sponeScreen/HaiMianScreen/index.vue
index 96efdfd..3702b26 100644
--- a/src/views/sponeScreen/HaiMianScreen/index.vue
+++ b/src/views/sponeScreen/HaiMianScreen/index.vue
@@ -2,13 +2,13 @@
   <!-- 海绵综合一张图首页 -->
   <div class="hmMainPage">
     <!-- 地图 -->
-    <GisMapMF></GisMapMF>
+    <!-- <GisMapMF></GisMapMF> -->
 
     <!-- 图例 -->
-    <Legend :showLegend="showLegend"></Legend>
+    <Legend :showLegend="showLegend" :class="['animate__animated', showPanel ? 'animate__fadeOutDown' : '']"></Legend>
 
     <!-- 控制面板按钮 -->
-    <div class="controlHM">
+    <div class="controlHM" :style="{ right: showPanel ? '30px' : '520px' }" v-if="menuIndex != 3">
       <img src="@/assets/newImgs/HMScreen/iconLegend.png" alt="" title="图例控制" @click="controlLegend" />
       <img src="@/assets/newImgs/HMScreen/iconPane.png" alt="" title="展开收起" @click="controlPanel" />
     </div>
@@ -62,7 +62,7 @@
   { name: '长效运维', id: 5 },
 ]);
 const menuIndex = ref(1);
-const showPanel = ref(true);
+const showPanel = ref(false);
 const showLegend = ref(false);
 
 // 跳转业务系统
@@ -154,7 +154,6 @@
   }
   .controlHM {
     position: absolute;
-    right: 500px;
     bottom: 50px;
     z-index: 220;
     width: 32px;
@@ -169,7 +168,7 @@
     position: absolute;
     bottom: 0px;
     left: 0px;
-    z-index: 220;
+    z-index: 180;
     width: 1920px;
     height: 100px;
     background: url('@/assets/newImgs/HMScreen/bottom_img .png') no-repeat;
diff --git a/src/views/sponeScreen/chengguanweiScreen/mainIndex.vue b/src/views/sponeScreen/chengguanweiScreen/mainIndex.vue
index d39f58e..edfadd6 100644
--- a/src/views/sponeScreen/chengguanweiScreen/mainIndex.vue
+++ b/src/views/sponeScreen/chengguanweiScreen/mainIndex.vue
@@ -2,10 +2,11 @@
   <!-- 3800*866 城管委-->
   <div class="cgwFivthScreen">
     3800*866 城管委
+    <img src="@/assets/newImgs/HMScreen/main.png" alt="" title="跳转业务系统" class="mainYW" @click="goSystem" />
     <!-- 地图 -->
     <GisMapMF></GisMapMF>
     <!-- 图例 -->
-    <Legend></Legend>
+    <!-- <Legend></Legend> -->
   </div>
 </template>
 
@@ -14,6 +15,11 @@
 import Legend from '@/views/sponeScreen/gisMF/legendKF.vue';
 const { proxy } = getCurrentInstance();
 
+// 跳转业务系统
+function goSystem() {
+  router.push({ path: '/index' });
+}
+
 onMounted(() => {});
 </script>
 
@@ -25,5 +31,11 @@
   background: #010e22;
   overflow: auto;
   position: relative;
+  .mainYW {
+    width: 50px;
+    height: 44px;
+    cursor: pointer;
+    margin: 10px 10px 0px 30px;
+  }
 }
 </style>
diff --git a/src/views/sponeScreen/cityGK/headHMAimg.vue b/src/views/sponeScreen/cityGK/headHMAimg.vue
index 0c014b9..aa99c96 100644
--- a/src/views/sponeScreen/cityGK/headHMAimg.vue
+++ b/src/views/sponeScreen/cityGK/headHMAimg.vue
@@ -26,7 +26,7 @@
     </div>
     <div class="three">
       <div class="PhotoClass">
-        <div class="PhotoClassA"></div>
+        <div class="PhotoClassA" style="opacity: 0.3"></div>
       </div>
       <div class="Selectiontime">
         <div class="SelectiontimeA">评估期</div>
@@ -38,7 +38,7 @@
     </div>
     <div class="four">
       <div class="PhotoClass">
-        <div class="PhotoClassA"></div>
+        <div class="PhotoClassA" style="opacity: 0.3"></div>
       </div>
       <div class="Selectiontime">
         <div class="SelectiontimeA">长效运维期</div>
diff --git a/src/views/sponeScreen/cityGK/index.vue b/src/views/sponeScreen/cityGK/index.vue
index 5a9f820..ec0f660 100644
--- a/src/views/sponeScreen/cityGK/index.vue
+++ b/src/views/sponeScreen/cityGK/index.vue
@@ -1,7 +1,7 @@
 <template>
   <!-- 海绵综合一张图 城市概况 -->
   <div class="cityPage">
-    <div class="publicLeftHM">
+    <div :class="['publicLeftHM', 'animate__animated', showPanel ? 'animate__fadeOutLeft' : 'animate__fadeInLeft']">
       <!-- 自然地理 -->
       <div class="partTitleHM">自然地理</div>
       <div class="partContHM">
@@ -46,11 +46,11 @@
     </div>
 
     <!-- 头部 -->
-    <div class="headHMA">
+    <div :class="['headHMA', 'animate__animated', showPanel ? 'animate__fadeOutUp' : 'animate__fadeInDown']">
       <headHMAimg></headHMAimg>
     </div>
 
-    <div class="publicRightHM">
+    <div :class="['publicRightHM', 'animate__animated', showPanel ? 'animate__fadeOutRight' : 'animate__fadeInRight']">
       <!-- 城市规划 -->
       <cityplanning></cityplanning>
 
@@ -68,6 +68,7 @@
 import headHMAimg from '@/views/sponeScreen/cityGK/headHMAimg.vue'; //头部
 
 const { proxy } = getCurrentInstance();
+const showPanel = ref(true); //面板展开收起
 const policiesList = ref([
   {
     name: '一心',
@@ -105,6 +106,7 @@
   () => props.showPanel,
   () => {
     console.log('val---', props.showPanel);
+    showPanel.value = props.showPanel;
   },
   { immediate: true }
 );
diff --git a/src/views/sponeScreen/cityGK/rainfall.vue b/src/views/sponeScreen/cityGK/rainfall.vue
index c3f2b38..61a80fb 100644
--- a/src/views/sponeScreen/cityGK/rainfall.vue
+++ b/src/views/sponeScreen/cityGK/rainfall.vue
@@ -84,7 +84,7 @@
 .HeadContent {
   width: 100%;
   height: 30px;
-  background: #2270ff;
+  background: rgba(34, 112, 255, 0.4);
   text-align: center;
   line-height: 30px;
   color: #ffffff;

diff --git a/src/assets/newImgs/HMScreen/partBg.png b/src/assets/newImgs/HMScreen/partBg.png
index 7219105..0b8959a 100644
--- a/src/assets/newImgs/HMScreen/partBg.png
+++ b/src/assets/newImgs/HMScreen/partBg.png
Binary files differ
diff --git a/src/views/sponeScreen/Echarts/RainfallEcharts.vue b/src/views/sponeScreen/Echarts/RainfallEcharts.vue
index 2fbaaec..8c4b9e2 100644
--- a/src/views/sponeScreen/Echarts/RainfallEcharts.vue
+++ b/src/views/sponeScreen/Echarts/RainfallEcharts.vue
@@ -4,7 +4,7 @@
 <script>
 import * as echarts from 'echarts';
 import { guid } from '@/utils/ruoyi';
-import { reactive, toRefs, onMounted, watch } from 'vue';
+import { reactive, toRefs, onMounted, watch, onUnmounted } from 'vue';
 export default {
   name: 'line-chart',
   props: {
@@ -17,6 +17,7 @@
       legend: [],
       id: guid(),
       chart: null,
+      timer: null,
     });
     const resizeTheChart = () => {
       if (allData.chart) {
@@ -177,18 +178,16 @@
             barGap: '10%', // Make series be overlap
             barCateGoryGap: '10%',
             itemStyle: {
-              normal: {
-                color: new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [
-                  {
-                    offset: 0,
-                    color: 'rgba(24, 255, 255, 1)',
-                  },
-                  {
-                    offset: 1,
-                    color: 'rgba(188, 255, 255, 1)',
-                  },
-                ]),
-              },
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [
+                {
+                  offset: 0,
+                  color: 'rgba(24, 255, 255, 1)',
+                },
+                {
+                  offset: 1,
+                  color: 'rgba(188, 255, 255, 1)',
+                },
+              ]),
             },
             data: props.data.yAxis,
           },
@@ -204,23 +203,41 @@
       };
       option && chartDom.setOption(option, true);
       allData.chart = chartDom;
+      animateChart();
     };
     watch(
       () => props.refresh,
       () => {
-        if (allData.chartDom) {
-          allData.chartDom.dispose();
-          allData.chartDom = null;
+        if (allData.chart) {
+          allData.chart.dispose();
+          allData.chart = null;
         }
         setTimeout(() => {
           init();
         }, 0);
       }
     );
+    // echarts动画
+    function animateChart() {
+      let length = props.data.xAxis.length;
+      let i = 0;
+      allData.timer = setInterval(() => {
+        i++;
+        if (i == length) i = 0;
+        allData.chart.dispatchAction({
+          type: 'showTip',
+          seriesIndex: 0,
+          dataIndex: i,
+        });
+      }, 1500);
+    }
     onMounted(() => {
       init();
       window.addEventListener('resize', resizeTheChart);
     });
+    onUnmounted(() => {
+      if (allData.timer) clearInterval(allData.timer);
+    });
     return {
       ...toRefs(allData),
       resizeTheChart,
diff --git a/src/views/sponeScreen/Echarts/RainfallLegend.vue b/src/views/sponeScreen/Echarts/RainfallLegend.vue
index f6069cc..1c83534 100644
--- a/src/views/sponeScreen/Echarts/RainfallLegend.vue
+++ b/src/views/sponeScreen/Echarts/RainfallLegend.vue
@@ -31,6 +31,7 @@
       var option;
       option = {
         // backgroundColor: '#0e2147',
+        color: ['#3FFFC2'],
         grid: {
           //   left: '5%',
           top: '10%',
@@ -132,12 +133,9 @@
             name: '降雨量',
             type: 'line',
             data: props.data.data1,
-
             itemStyle: {
-              normal: {
-                borderWidth: 5,
-                // color: '#0696f9',
-              },
+              borderWidth: 5,
+              // color: '#0696f9',
             },
           },
           {
@@ -153,11 +151,9 @@
               symbolSize: 15,
             },
             lineStyle: {
-              normal: {
-                width: 1,
-                opacity: 0.6,
-                curveness: 0.2,
-              },
+              width: 1,
+              opacity: 0.6,
+              curveness: 0.2,
             },
             data: props.data.data,
           },
diff --git a/src/views/sponeScreen/Echarts/tslyqk_constituent_3d.vue b/src/views/sponeScreen/Echarts/tslyqk_constituent_3d.vue
index 2b72b45..b61a344 100644
--- a/src/views/sponeScreen/Echarts/tslyqk_constituent_3d.vue
+++ b/src/views/sponeScreen/Echarts/tslyqk_constituent_3d.vue
@@ -9,6 +9,8 @@
 import * as echarts from 'echarts';
 const { proxy } = getCurrentInstance();
 
+const myChart = ref(null);
+
 // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
 function getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
   // 计算
@@ -147,8 +149,8 @@
       show: false,
     },
     itemStyle: {
-      opacity: 0.1,
-      color: '#E1E8EC',
+      opacity: 0.9,
+      color: '#296E99',
     },
     parametricEquation: {
       u: {
@@ -182,13 +184,13 @@
       show: false,
     },
     itemStyle: {
-      opacity: 0.1,
-      color: '#E1E8EC',
+      opacity: 0.2,
+      color: '#215983',
     },
     parametricEquation: {
       u: {
         min: 0,
-        max: Math.PI * 2,
+        max: Math.PI * 3,
         step: Math.PI / 20,
       },
       v: {
@@ -197,10 +199,10 @@
         step: Math.PI / 20,
       },
       x: function (u, v) {
-        return ((Math.sin(v) * Math.sin(u) + Math.sin(u)) / Math.PI) * 2;
+        return ((Math.sin(v) * Math.sin(u) + Math.sin(u)) / Math.PI) * 3;
       },
       y: function (u, v) {
-        return ((Math.sin(v) * Math.cos(u) + Math.cos(u)) / Math.PI) * 2;
+        return ((Math.sin(v) * Math.cos(u) + Math.cos(u)) / Math.PI) * 3;
       },
       z: function (u, v) {
         return Math.cos(v) > 0 ? -5 : -7;
@@ -215,8 +217,8 @@
       show: false,
     },
     itemStyle: {
-      opacity: 0.1,
-      color: '#E1E8EC',
+      opacity: 1,
+      color: '#25719D',
     },
     parametricEquation: {
       u: {
@@ -230,10 +232,10 @@
         step: Math.PI / 20,
       },
       x: function (u, v) {
-        return ((Math.sin(v) * Math.sin(u) + Math.sin(u)) / Math.PI) * 2.2;
+        return ((Math.sin(v) * Math.sin(u) + Math.sin(u)) / Math.PI) * 2.5;
       },
       y: function (u, v) {
-        return ((Math.sin(v) * Math.cos(u) + Math.cos(u)) / Math.PI) * 2.2;
+        return ((Math.sin(v) * Math.cos(u) + Math.cos(u)) / Math.PI) * 2.5;
       },
       z: function (u, v) {
         return Math.cos(v) > 0 ? -7 : -7;
@@ -258,12 +260,13 @@
     legend: {
       orient: 'vertical',
       icon: 'circle',
-      right: '5%',
-      top: '20%',
+      right: '3%',
+      top: '22%',
       show: true,
       itemGap: 10,
       textStyle: {
         color: '#A1E2FF',
+        fontSize: 14,
       },
       // icon:'diamond',
       data: legendData,
@@ -290,12 +293,11 @@
         // zoomSensitivity: 100,
         // panSensitivity: 100,
       },
-      top: '5%',
+      top: '0%',
       left: 'left',
-      width: '70%',
-      //   heigth: '50%',
+      width: '60%',
       show: false,
-      boxHeight: 20,
+      boxHeight: 50,
     },
     series: series,
   };
@@ -306,52 +308,59 @@
 const initEcharts = () => {
   const optionData = [
     {
-      name: '草(0.4%)',
-      value: 0.4,
+      name: '草(17.4k㎡,0.4%)',
+      value: 17.4,
       itemStyle: {
-        color: '#FFED52',
+        color: '#E7EA39',
       },
     },
     {
-      name: '田 (83.3%)',
-      value: 83.3,
+      name: '田 (4051.55k㎡,83.3%)',
+      value: 4051.55,
       itemStyle: {
-        color: '#FF8E5B',
+        color: '#E89668',
       },
     },
     {
-      name: '林 (11.4%)',
-      value: 11.4,
+      name: '林 (553.89k㎡,11.4%)',
+      value: 553.89,
       itemStyle: {
-        color: '#D956FF',
+        color: '#D863F4',
       },
     },
     {
-      name: '湖 (1.6%)',
-      value: 1.6,
+      name: '湖 (78.54k㎡,1.6%)',
+      value: 78.54,
       itemStyle: {
-        color: '#18FFFF',
+        color: '#03BABB',
       },
     },
     {
-      name: '水 (3.4%)',
-      value: 3.4,
+      name: '水 (165.05k㎡,3.4%)',
+      value: 165.05,
       itemStyle: {
-        color: '#4CC1FF',
+        color: '#3EB4F1',
       },
     },
   ];
   // 生成配置选项
   const option = getPie3D(optionData, 0.59);
-  //   const myChart = proxy.echarts.init(proxy.$refs.echarts);
-  const myChart = echarts.init(proxy.$refs.echarts3D);
+  myChart.value = echarts.init(proxy.$refs.echarts3D);
 
   // 绘制图形
-  myChart.setOption(option);
+  myChart.value.setOption(option);
 };
 
+//自适应
+function resizeTheChart() {
+  if (myChart.value) {
+    myChart.value.resize();
+  }
+}
+
 onMounted(() => {
   initEcharts();
+  window.addEventListener('resize', resizeTheChart);
 });
 </script>
 
diff --git a/src/views/sponeScreen/HaiMianScreen/index.vue b/src/views/sponeScreen/HaiMianScreen/index.vue
index 96efdfd..3702b26 100644
--- a/src/views/sponeScreen/HaiMianScreen/index.vue
+++ b/src/views/sponeScreen/HaiMianScreen/index.vue
@@ -2,13 +2,13 @@
   <!-- 海绵综合一张图首页 -->
   <div class="hmMainPage">
     <!-- 地图 -->
-    <GisMapMF></GisMapMF>
+    <!-- <GisMapMF></GisMapMF> -->
 
     <!-- 图例 -->
-    <Legend :showLegend="showLegend"></Legend>
+    <Legend :showLegend="showLegend" :class="['animate__animated', showPanel ? 'animate__fadeOutDown' : '']"></Legend>
 
     <!-- 控制面板按钮 -->
-    <div class="controlHM">
+    <div class="controlHM" :style="{ right: showPanel ? '30px' : '520px' }" v-if="menuIndex != 3">
       <img src="@/assets/newImgs/HMScreen/iconLegend.png" alt="" title="图例控制" @click="controlLegend" />
       <img src="@/assets/newImgs/HMScreen/iconPane.png" alt="" title="展开收起" @click="controlPanel" />
     </div>
@@ -62,7 +62,7 @@
   { name: '长效运维', id: 5 },
 ]);
 const menuIndex = ref(1);
-const showPanel = ref(true);
+const showPanel = ref(false);
 const showLegend = ref(false);
 
 // 跳转业务系统
@@ -154,7 +154,6 @@
   }
   .controlHM {
     position: absolute;
-    right: 500px;
     bottom: 50px;
     z-index: 220;
     width: 32px;
@@ -169,7 +168,7 @@
     position: absolute;
     bottom: 0px;
     left: 0px;
-    z-index: 220;
+    z-index: 180;
     width: 1920px;
     height: 100px;
     background: url('@/assets/newImgs/HMScreen/bottom_img .png') no-repeat;
diff --git a/src/views/sponeScreen/chengguanweiScreen/mainIndex.vue b/src/views/sponeScreen/chengguanweiScreen/mainIndex.vue
index d39f58e..edfadd6 100644
--- a/src/views/sponeScreen/chengguanweiScreen/mainIndex.vue
+++ b/src/views/sponeScreen/chengguanweiScreen/mainIndex.vue
@@ -2,10 +2,11 @@
   <!-- 3800*866 城管委-->
   <div class="cgwFivthScreen">
     3800*866 城管委
+    <img src="@/assets/newImgs/HMScreen/main.png" alt="" title="跳转业务系统" class="mainYW" @click="goSystem" />
     <!-- 地图 -->
     <GisMapMF></GisMapMF>
     <!-- 图例 -->
-    <Legend></Legend>
+    <!-- <Legend></Legend> -->
   </div>
 </template>
 
@@ -14,6 +15,11 @@
 import Legend from '@/views/sponeScreen/gisMF/legendKF.vue';
 const { proxy } = getCurrentInstance();
 
+// 跳转业务系统
+function goSystem() {
+  router.push({ path: '/index' });
+}
+
 onMounted(() => {});
 </script>
 
@@ -25,5 +31,11 @@
   background: #010e22;
   overflow: auto;
   position: relative;
+  .mainYW {
+    width: 50px;
+    height: 44px;
+    cursor: pointer;
+    margin: 10px 10px 0px 30px;
+  }
 }
 </style>
diff --git a/src/views/sponeScreen/cityGK/headHMAimg.vue b/src/views/sponeScreen/cityGK/headHMAimg.vue
index 0c014b9..aa99c96 100644
--- a/src/views/sponeScreen/cityGK/headHMAimg.vue
+++ b/src/views/sponeScreen/cityGK/headHMAimg.vue
@@ -26,7 +26,7 @@
     </div>
     <div class="three">
       <div class="PhotoClass">
-        <div class="PhotoClassA"></div>
+        <div class="PhotoClassA" style="opacity: 0.3"></div>
       </div>
       <div class="Selectiontime">
         <div class="SelectiontimeA">评估期</div>
@@ -38,7 +38,7 @@
     </div>
     <div class="four">
       <div class="PhotoClass">
-        <div class="PhotoClassA"></div>
+        <div class="PhotoClassA" style="opacity: 0.3"></div>
       </div>
       <div class="Selectiontime">
         <div class="SelectiontimeA">长效运维期</div>
diff --git a/src/views/sponeScreen/cityGK/index.vue b/src/views/sponeScreen/cityGK/index.vue
index 5a9f820..ec0f660 100644
--- a/src/views/sponeScreen/cityGK/index.vue
+++ b/src/views/sponeScreen/cityGK/index.vue
@@ -1,7 +1,7 @@
 <template>
   <!-- 海绵综合一张图 城市概况 -->
   <div class="cityPage">
-    <div class="publicLeftHM">
+    <div :class="['publicLeftHM', 'animate__animated', showPanel ? 'animate__fadeOutLeft' : 'animate__fadeInLeft']">
       <!-- 自然地理 -->
       <div class="partTitleHM">自然地理</div>
       <div class="partContHM">
@@ -46,11 +46,11 @@
     </div>
 
     <!-- 头部 -->
-    <div class="headHMA">
+    <div :class="['headHMA', 'animate__animated', showPanel ? 'animate__fadeOutUp' : 'animate__fadeInDown']">
       <headHMAimg></headHMAimg>
     </div>
 
-    <div class="publicRightHM">
+    <div :class="['publicRightHM', 'animate__animated', showPanel ? 'animate__fadeOutRight' : 'animate__fadeInRight']">
       <!-- 城市规划 -->
       <cityplanning></cityplanning>
 
@@ -68,6 +68,7 @@
 import headHMAimg from '@/views/sponeScreen/cityGK/headHMAimg.vue'; //头部
 
 const { proxy } = getCurrentInstance();
+const showPanel = ref(true); //面板展开收起
 const policiesList = ref([
   {
     name: '一心',
@@ -105,6 +106,7 @@
   () => props.showPanel,
   () => {
     console.log('val---', props.showPanel);
+    showPanel.value = props.showPanel;
   },
   { immediate: true }
 );
diff --git a/src/views/sponeScreen/cityGK/rainfall.vue b/src/views/sponeScreen/cityGK/rainfall.vue
index c3f2b38..61a80fb 100644
--- a/src/views/sponeScreen/cityGK/rainfall.vue
+++ b/src/views/sponeScreen/cityGK/rainfall.vue
@@ -84,7 +84,7 @@
 .HeadContent {
   width: 100%;
   height: 30px;
-  background: #2270ff;
+  background: rgba(34, 112, 255, 0.4);
   text-align: center;
   line-height: 30px;
   color: #ffffff;
diff --git a/src/views/sponeScreen/evaluationKH/index.vue b/src/views/sponeScreen/evaluationKH/index.vue
index 2f66628..5d473df 100644
--- a/src/views/sponeScreen/evaluationKH/index.vue
+++ b/src/views/sponeScreen/evaluationKH/index.vue
@@ -1,9 +1,12 @@
 <template>
   <!-- 海绵综合一张图 考核评估 -->
-  <div class="publicContainer">考核评估</div>
+  <div class="oneMapKHPG">
+    <KHPGHM></KHPGHM>
+  </div>
 </template>
 
 <script setup>
+import KHPGHM from '@/views/spongePerformance/mainIndex/index.vue'; //业务系统考核首页
 const { proxy } = getCurrentInstance();
 
 onMounted(() => {});

diff --git a/src/assets/newImgs/HMScreen/partBg.png b/src/assets/newImgs/HMScreen/partBg.png
index 7219105..0b8959a 100644
--- a/src/assets/newImgs/HMScreen/partBg.png
+++ b/src/assets/newImgs/HMScreen/partBg.png
Binary files differ
diff --git a/src/views/sponeScreen/Echarts/RainfallEcharts.vue b/src/views/sponeScreen/Echarts/RainfallEcharts.vue
index 2fbaaec..8c4b9e2 100644
--- a/src/views/sponeScreen/Echarts/RainfallEcharts.vue
+++ b/src/views/sponeScreen/Echarts/RainfallEcharts.vue
@@ -4,7 +4,7 @@
 <script>
 import * as echarts from 'echarts';
 import { guid } from '@/utils/ruoyi';
-import { reactive, toRefs, onMounted, watch } from 'vue';
+import { reactive, toRefs, onMounted, watch, onUnmounted } from 'vue';
 export default {
   name: 'line-chart',
   props: {
@@ -17,6 +17,7 @@
       legend: [],
       id: guid(),
       chart: null,
+      timer: null,
     });
     const resizeTheChart = () => {
       if (allData.chart) {
@@ -177,18 +178,16 @@
             barGap: '10%', // Make series be overlap
             barCateGoryGap: '10%',
             itemStyle: {
-              normal: {
-                color: new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [
-                  {
-                    offset: 0,
-                    color: 'rgba(24, 255, 255, 1)',
-                  },
-                  {
-                    offset: 1,
-                    color: 'rgba(188, 255, 255, 1)',
-                  },
-                ]),
-              },
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [
+                {
+                  offset: 0,
+                  color: 'rgba(24, 255, 255, 1)',
+                },
+                {
+                  offset: 1,
+                  color: 'rgba(188, 255, 255, 1)',
+                },
+              ]),
             },
             data: props.data.yAxis,
           },
@@ -204,23 +203,41 @@
       };
       option && chartDom.setOption(option, true);
       allData.chart = chartDom;
+      animateChart();
     };
     watch(
       () => props.refresh,
       () => {
-        if (allData.chartDom) {
-          allData.chartDom.dispose();
-          allData.chartDom = null;
+        if (allData.chart) {
+          allData.chart.dispose();
+          allData.chart = null;
         }
         setTimeout(() => {
           init();
         }, 0);
       }
     );
+    // echarts动画
+    function animateChart() {
+      let length = props.data.xAxis.length;
+      let i = 0;
+      allData.timer = setInterval(() => {
+        i++;
+        if (i == length) i = 0;
+        allData.chart.dispatchAction({
+          type: 'showTip',
+          seriesIndex: 0,
+          dataIndex: i,
+        });
+      }, 1500);
+    }
     onMounted(() => {
       init();
       window.addEventListener('resize', resizeTheChart);
     });
+    onUnmounted(() => {
+      if (allData.timer) clearInterval(allData.timer);
+    });
     return {
       ...toRefs(allData),
       resizeTheChart,
diff --git a/src/views/sponeScreen/Echarts/RainfallLegend.vue b/src/views/sponeScreen/Echarts/RainfallLegend.vue
index f6069cc..1c83534 100644
--- a/src/views/sponeScreen/Echarts/RainfallLegend.vue
+++ b/src/views/sponeScreen/Echarts/RainfallLegend.vue
@@ -31,6 +31,7 @@
       var option;
       option = {
         // backgroundColor: '#0e2147',
+        color: ['#3FFFC2'],
         grid: {
           //   left: '5%',
           top: '10%',
@@ -132,12 +133,9 @@
             name: '降雨量',
             type: 'line',
             data: props.data.data1,
-
             itemStyle: {
-              normal: {
-                borderWidth: 5,
-                // color: '#0696f9',
-              },
+              borderWidth: 5,
+              // color: '#0696f9',
             },
           },
           {
@@ -153,11 +151,9 @@
               symbolSize: 15,
             },
             lineStyle: {
-              normal: {
-                width: 1,
-                opacity: 0.6,
-                curveness: 0.2,
-              },
+              width: 1,
+              opacity: 0.6,
+              curveness: 0.2,
             },
             data: props.data.data,
           },
diff --git a/src/views/sponeScreen/Echarts/tslyqk_constituent_3d.vue b/src/views/sponeScreen/Echarts/tslyqk_constituent_3d.vue
index 2b72b45..b61a344 100644
--- a/src/views/sponeScreen/Echarts/tslyqk_constituent_3d.vue
+++ b/src/views/sponeScreen/Echarts/tslyqk_constituent_3d.vue
@@ -9,6 +9,8 @@
 import * as echarts from 'echarts';
 const { proxy } = getCurrentInstance();
 
+const myChart = ref(null);
+
 // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
 function getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
   // 计算
@@ -147,8 +149,8 @@
       show: false,
     },
     itemStyle: {
-      opacity: 0.1,
-      color: '#E1E8EC',
+      opacity: 0.9,
+      color: '#296E99',
     },
     parametricEquation: {
       u: {
@@ -182,13 +184,13 @@
       show: false,
     },
     itemStyle: {
-      opacity: 0.1,
-      color: '#E1E8EC',
+      opacity: 0.2,
+      color: '#215983',
     },
     parametricEquation: {
       u: {
         min: 0,
-        max: Math.PI * 2,
+        max: Math.PI * 3,
         step: Math.PI / 20,
       },
       v: {
@@ -197,10 +199,10 @@
         step: Math.PI / 20,
       },
       x: function (u, v) {
-        return ((Math.sin(v) * Math.sin(u) + Math.sin(u)) / Math.PI) * 2;
+        return ((Math.sin(v) * Math.sin(u) + Math.sin(u)) / Math.PI) * 3;
       },
       y: function (u, v) {
-        return ((Math.sin(v) * Math.cos(u) + Math.cos(u)) / Math.PI) * 2;
+        return ((Math.sin(v) * Math.cos(u) + Math.cos(u)) / Math.PI) * 3;
       },
       z: function (u, v) {
         return Math.cos(v) > 0 ? -5 : -7;
@@ -215,8 +217,8 @@
       show: false,
     },
     itemStyle: {
-      opacity: 0.1,
-      color: '#E1E8EC',
+      opacity: 1,
+      color: '#25719D',
     },
     parametricEquation: {
       u: {
@@ -230,10 +232,10 @@
         step: Math.PI / 20,
       },
       x: function (u, v) {
-        return ((Math.sin(v) * Math.sin(u) + Math.sin(u)) / Math.PI) * 2.2;
+        return ((Math.sin(v) * Math.sin(u) + Math.sin(u)) / Math.PI) * 2.5;
       },
       y: function (u, v) {
-        return ((Math.sin(v) * Math.cos(u) + Math.cos(u)) / Math.PI) * 2.2;
+        return ((Math.sin(v) * Math.cos(u) + Math.cos(u)) / Math.PI) * 2.5;
       },
       z: function (u, v) {
         return Math.cos(v) > 0 ? -7 : -7;
@@ -258,12 +260,13 @@
     legend: {
       orient: 'vertical',
       icon: 'circle',
-      right: '5%',
-      top: '20%',
+      right: '3%',
+      top: '22%',
       show: true,
       itemGap: 10,
       textStyle: {
         color: '#A1E2FF',
+        fontSize: 14,
       },
       // icon:'diamond',
       data: legendData,
@@ -290,12 +293,11 @@
         // zoomSensitivity: 100,
         // panSensitivity: 100,
       },
-      top: '5%',
+      top: '0%',
       left: 'left',
-      width: '70%',
-      //   heigth: '50%',
+      width: '60%',
       show: false,
-      boxHeight: 20,
+      boxHeight: 50,
     },
     series: series,
   };
@@ -306,52 +308,59 @@
 const initEcharts = () => {
   const optionData = [
     {
-      name: '草(0.4%)',
-      value: 0.4,
+      name: '草(17.4k㎡,0.4%)',
+      value: 17.4,
       itemStyle: {
-        color: '#FFED52',
+        color: '#E7EA39',
       },
     },
     {
-      name: '田 (83.3%)',
-      value: 83.3,
+      name: '田 (4051.55k㎡,83.3%)',
+      value: 4051.55,
       itemStyle: {
-        color: '#FF8E5B',
+        color: '#E89668',
       },
     },
     {
-      name: '林 (11.4%)',
-      value: 11.4,
+      name: '林 (553.89k㎡,11.4%)',
+      value: 553.89,
       itemStyle: {
-        color: '#D956FF',
+        color: '#D863F4',
       },
     },
     {
-      name: '湖 (1.6%)',
-      value: 1.6,
+      name: '湖 (78.54k㎡,1.6%)',
+      value: 78.54,
       itemStyle: {
-        color: '#18FFFF',
+        color: '#03BABB',
       },
     },
     {
-      name: '水 (3.4%)',
-      value: 3.4,
+      name: '水 (165.05k㎡,3.4%)',
+      value: 165.05,
       itemStyle: {
-        color: '#4CC1FF',
+        color: '#3EB4F1',
       },
     },
   ];
   // 生成配置选项
   const option = getPie3D(optionData, 0.59);
-  //   const myChart = proxy.echarts.init(proxy.$refs.echarts);
-  const myChart = echarts.init(proxy.$refs.echarts3D);
+  myChart.value = echarts.init(proxy.$refs.echarts3D);
 
   // 绘制图形
-  myChart.setOption(option);
+  myChart.value.setOption(option);
 };
 
+//自适应
+function resizeTheChart() {
+  if (myChart.value) {
+    myChart.value.resize();
+  }
+}
+
 onMounted(() => {
   initEcharts();
+  window.addEventListener('resize', resizeTheChart);
 });
 </script>
 
diff --git a/src/views/sponeScreen/HaiMianScreen/index.vue b/src/views/sponeScreen/HaiMianScreen/index.vue
index 96efdfd..3702b26 100644
--- a/src/views/sponeScreen/HaiMianScreen/index.vue
+++ b/src/views/sponeScreen/HaiMianScreen/index.vue
@@ -2,13 +2,13 @@
   <!-- 海绵综合一张图首页 -->
   <div class="hmMainPage">
     <!-- 地图 -->
-    <GisMapMF></GisMapMF>
+    <!-- <GisMapMF></GisMapMF> -->
 
     <!-- 图例 -->
-    <Legend :showLegend="showLegend"></Legend>
+    <Legend :showLegend="showLegend" :class="['animate__animated', showPanel ? 'animate__fadeOutDown' : '']"></Legend>
 
     <!-- 控制面板按钮 -->
-    <div class="controlHM">
+    <div class="controlHM" :style="{ right: showPanel ? '30px' : '520px' }" v-if="menuIndex != 3">
       <img src="@/assets/newImgs/HMScreen/iconLegend.png" alt="" title="图例控制" @click="controlLegend" />
       <img src="@/assets/newImgs/HMScreen/iconPane.png" alt="" title="展开收起" @click="controlPanel" />
     </div>
@@ -62,7 +62,7 @@
   { name: '长效运维', id: 5 },
 ]);
 const menuIndex = ref(1);
-const showPanel = ref(true);
+const showPanel = ref(false);
 const showLegend = ref(false);
 
 // 跳转业务系统
@@ -154,7 +154,6 @@
   }
   .controlHM {
     position: absolute;
-    right: 500px;
     bottom: 50px;
     z-index: 220;
     width: 32px;
@@ -169,7 +168,7 @@
     position: absolute;
     bottom: 0px;
     left: 0px;
-    z-index: 220;
+    z-index: 180;
     width: 1920px;
     height: 100px;
     background: url('@/assets/newImgs/HMScreen/bottom_img .png') no-repeat;
diff --git a/src/views/sponeScreen/chengguanweiScreen/mainIndex.vue b/src/views/sponeScreen/chengguanweiScreen/mainIndex.vue
index d39f58e..edfadd6 100644
--- a/src/views/sponeScreen/chengguanweiScreen/mainIndex.vue
+++ b/src/views/sponeScreen/chengguanweiScreen/mainIndex.vue
@@ -2,10 +2,11 @@
   <!-- 3800*866 城管委-->
   <div class="cgwFivthScreen">
     3800*866 城管委
+    <img src="@/assets/newImgs/HMScreen/main.png" alt="" title="跳转业务系统" class="mainYW" @click="goSystem" />
     <!-- 地图 -->
     <GisMapMF></GisMapMF>
     <!-- 图例 -->
-    <Legend></Legend>
+    <!-- <Legend></Legend> -->
   </div>
 </template>
 
@@ -14,6 +15,11 @@
 import Legend from '@/views/sponeScreen/gisMF/legendKF.vue';
 const { proxy } = getCurrentInstance();
 
+// 跳转业务系统
+function goSystem() {
+  router.push({ path: '/index' });
+}
+
 onMounted(() => {});
 </script>
 
@@ -25,5 +31,11 @@
   background: #010e22;
   overflow: auto;
   position: relative;
+  .mainYW {
+    width: 50px;
+    height: 44px;
+    cursor: pointer;
+    margin: 10px 10px 0px 30px;
+  }
 }
 </style>
diff --git a/src/views/sponeScreen/cityGK/headHMAimg.vue b/src/views/sponeScreen/cityGK/headHMAimg.vue
index 0c014b9..aa99c96 100644
--- a/src/views/sponeScreen/cityGK/headHMAimg.vue
+++ b/src/views/sponeScreen/cityGK/headHMAimg.vue
@@ -26,7 +26,7 @@
     </div>
     <div class="three">
       <div class="PhotoClass">
-        <div class="PhotoClassA"></div>
+        <div class="PhotoClassA" style="opacity: 0.3"></div>
       </div>
       <div class="Selectiontime">
         <div class="SelectiontimeA">评估期</div>
@@ -38,7 +38,7 @@
     </div>
     <div class="four">
       <div class="PhotoClass">
-        <div class="PhotoClassA"></div>
+        <div class="PhotoClassA" style="opacity: 0.3"></div>
       </div>
       <div class="Selectiontime">
         <div class="SelectiontimeA">长效运维期</div>
diff --git a/src/views/sponeScreen/cityGK/index.vue b/src/views/sponeScreen/cityGK/index.vue
index 5a9f820..ec0f660 100644
--- a/src/views/sponeScreen/cityGK/index.vue
+++ b/src/views/sponeScreen/cityGK/index.vue
@@ -1,7 +1,7 @@
 <template>
   <!-- 海绵综合一张图 城市概况 -->
   <div class="cityPage">
-    <div class="publicLeftHM">
+    <div :class="['publicLeftHM', 'animate__animated', showPanel ? 'animate__fadeOutLeft' : 'animate__fadeInLeft']">
       <!-- 自然地理 -->
       <div class="partTitleHM">自然地理</div>
       <div class="partContHM">
@@ -46,11 +46,11 @@
     </div>
 
     <!-- 头部 -->
-    <div class="headHMA">
+    <div :class="['headHMA', 'animate__animated', showPanel ? 'animate__fadeOutUp' : 'animate__fadeInDown']">
       <headHMAimg></headHMAimg>
     </div>
 
-    <div class="publicRightHM">
+    <div :class="['publicRightHM', 'animate__animated', showPanel ? 'animate__fadeOutRight' : 'animate__fadeInRight']">
       <!-- 城市规划 -->
       <cityplanning></cityplanning>
 
@@ -68,6 +68,7 @@
 import headHMAimg from '@/views/sponeScreen/cityGK/headHMAimg.vue'; //头部
 
 const { proxy } = getCurrentInstance();
+const showPanel = ref(true); //面板展开收起
 const policiesList = ref([
   {
     name: '一心',
@@ -105,6 +106,7 @@
   () => props.showPanel,
   () => {
     console.log('val---', props.showPanel);
+    showPanel.value = props.showPanel;
   },
   { immediate: true }
 );
diff --git a/src/views/sponeScreen/cityGK/rainfall.vue b/src/views/sponeScreen/cityGK/rainfall.vue
index c3f2b38..61a80fb 100644
--- a/src/views/sponeScreen/cityGK/rainfall.vue
+++ b/src/views/sponeScreen/cityGK/rainfall.vue
@@ -84,7 +84,7 @@
 .HeadContent {
   width: 100%;
   height: 30px;
-  background: #2270ff;
+  background: rgba(34, 112, 255, 0.4);
   text-align: center;
   line-height: 30px;
   color: #ffffff;
diff --git a/src/views/sponeScreen/evaluationKH/index.vue b/src/views/sponeScreen/evaluationKH/index.vue
index 2f66628..5d473df 100644
--- a/src/views/sponeScreen/evaluationKH/index.vue
+++ b/src/views/sponeScreen/evaluationKH/index.vue
@@ -1,9 +1,12 @@
 <template>
   <!-- 海绵综合一张图 考核评估 -->
-  <div class="publicContainer">考核评估</div>
+  <div class="oneMapKHPG">
+    <KHPGHM></KHPGHM>
+  </div>
 </template>
 
 <script setup>
+import KHPGHM from '@/views/spongePerformance/mainIndex/index.vue'; //业务系统考核首页
 const { proxy } = getCurrentInstance();
 
 onMounted(() => {});
diff --git a/src/views/sponeScreen/gisMF/legendKF.vue b/src/views/sponeScreen/gisMF/legendKF.vue
index 23e5a62..88a4185 100644
--- a/src/views/sponeScreen/gisMF/legendKF.vue
+++ b/src/views/sponeScreen/gisMF/legendKF.vue
@@ -1,19 +1,14 @@
 <template>
   <!-- 海绵综合一张图图例 -->
-  <div class="lengendPage">
+  <div :class="['lengendPageHM', 'animate__animated', showLegend ? 'animate__fadeInUp' : 'animate__fadeOutDown']" v-if="showLegend">
     <!-- 图例框 -->
-    <div class="publicLegend">
+    <div class="publicLegendHM">
       <div class="legendTitle">
         <div class="legendName">图层控制</div>
       </div>
       <div class="legendContent">
         <div v-for="item in legendList" :key="item.layername" style="width: 100%">
           <div class="titleB" @click="changeAllLegend(item)">
-            <div class="iconImg">
-              <el-icon v-if="item.isCheck" size="18">
-                <Check />
-              </el-icon>
-            </div>
             {{ item.title }}
           </div>
           <div class="legendItemContent">
@@ -41,17 +36,30 @@
 import changeMapStyle from './changeMapStyle.js';
 import topography from '@/assets/newImgs/topography.png';
 import cesiumPaiShuiArea from './cesiumPaiShuiArea.js';
+
 const { proxy } = getCurrentInstance();
 const legendList = ref([]);
-const ifExpand = ref(true);
-// 展开收起
-const changeZhan = () => {
-  ifExpand.value = !ifExpand.value;
-};
+const showLegend = ref(false);
+
+// 面板内容展开收起控制
+const props = defineProps({
+  showLegend: {
+    type: Boolean,
+  },
+});
+watch(
+  () => props.showLegend,
+  () => {
+    console.log('showLegend---', props.showLegend);
+    showLegend.value = props.showLegend;
+  },
+  { immediate: true }
+);
+
 //图例一级标题点击
 const changeAllLegend = item => {
   console.log('item---', item);
-  item.isCheck = !item.isCheck;
+  // item.isCheck = !item.isCheck;
 };
 //图例点击
 const changeLegend = item => {
@@ -113,24 +121,17 @@
 </script>
 
 <style lang="scss">
-.lengendPage {
+.lengendPageHM {
   position: absolute;
-  left: 500px;
-  bottom: 60px;
+  left: 480px;
+  bottom: 63px;
   z-index: 205;
-  // background: red;
   width: 347px;
   height: 554px;
-  overflow-x: hidden;
-  overflow-y: auto;
-  .publicLegend {
-    width: 347px;
-    height: 654px;
-    background: #003b6d;
-    // border: 1px solid #6acefe;
+  background: #003b6d;
+  .publicLegendHM {
     opacity: 0.8;
     .legendTitle {
-      width: 345px;
       height: 46px;
       position: absolute;
       top: 1px;
@@ -144,12 +145,14 @@
       }
     }
     .legendContent {
+      width: 100%;
       position: absolute;
-      width: 345px;
+      height: 500px;
+      overflow-x: hidden;
+      overflow-y: auto;
       top: 47px;
       .titleB {
-        margin-top: 20px;
-        margin-bottom: 20px;
+        margin: 10px 0px 10px 20px;
         display: flex;
         height: 17px;
         font-family: Source Han Sans CN;
@@ -180,7 +183,7 @@
           align-items: center;
           cursor: pointer;
           .partItem {
-            margin-left: 47px;
+            margin-left: 20px;
             display: flex;
             width: 180px;
             &:hover {

diff --git a/src/assets/newImgs/HMScreen/partBg.png b/src/assets/newImgs/HMScreen/partBg.png
index 7219105..0b8959a 100644
--- a/src/assets/newImgs/HMScreen/partBg.png
+++ b/src/assets/newImgs/HMScreen/partBg.png
Binary files differ
diff --git a/src/views/sponeScreen/Echarts/RainfallEcharts.vue b/src/views/sponeScreen/Echarts/RainfallEcharts.vue
index 2fbaaec..8c4b9e2 100644
--- a/src/views/sponeScreen/Echarts/RainfallEcharts.vue
+++ b/src/views/sponeScreen/Echarts/RainfallEcharts.vue
@@ -4,7 +4,7 @@
 <script>
 import * as echarts from 'echarts';
 import { guid } from '@/utils/ruoyi';
-import { reactive, toRefs, onMounted, watch } from 'vue';
+import { reactive, toRefs, onMounted, watch, onUnmounted } from 'vue';
 export default {
   name: 'line-chart',
   props: {
@@ -17,6 +17,7 @@
       legend: [],
       id: guid(),
       chart: null,
+      timer: null,
     });
     const resizeTheChart = () => {
       if (allData.chart) {
@@ -177,18 +178,16 @@
             barGap: '10%', // Make series be overlap
             barCateGoryGap: '10%',
             itemStyle: {
-              normal: {
-                color: new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [
-                  {
-                    offset: 0,
-                    color: 'rgba(24, 255, 255, 1)',
-                  },
-                  {
-                    offset: 1,
-                    color: 'rgba(188, 255, 255, 1)',
-                  },
-                ]),
-              },
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [
+                {
+                  offset: 0,
+                  color: 'rgba(24, 255, 255, 1)',
+                },
+                {
+                  offset: 1,
+                  color: 'rgba(188, 255, 255, 1)',
+                },
+              ]),
             },
             data: props.data.yAxis,
           },
@@ -204,23 +203,41 @@
       };
       option && chartDom.setOption(option, true);
       allData.chart = chartDom;
+      animateChart();
     };
     watch(
       () => props.refresh,
       () => {
-        if (allData.chartDom) {
-          allData.chartDom.dispose();
-          allData.chartDom = null;
+        if (allData.chart) {
+          allData.chart.dispose();
+          allData.chart = null;
         }
         setTimeout(() => {
           init();
         }, 0);
       }
     );
+    // echarts动画
+    function animateChart() {
+      let length = props.data.xAxis.length;
+      let i = 0;
+      allData.timer = setInterval(() => {
+        i++;
+        if (i == length) i = 0;
+        allData.chart.dispatchAction({
+          type: 'showTip',
+          seriesIndex: 0,
+          dataIndex: i,
+        });
+      }, 1500);
+    }
     onMounted(() => {
       init();
       window.addEventListener('resize', resizeTheChart);
     });
+    onUnmounted(() => {
+      if (allData.timer) clearInterval(allData.timer);
+    });
     return {
       ...toRefs(allData),
       resizeTheChart,
diff --git a/src/views/sponeScreen/Echarts/RainfallLegend.vue b/src/views/sponeScreen/Echarts/RainfallLegend.vue
index f6069cc..1c83534 100644
--- a/src/views/sponeScreen/Echarts/RainfallLegend.vue
+++ b/src/views/sponeScreen/Echarts/RainfallLegend.vue
@@ -31,6 +31,7 @@
       var option;
       option = {
         // backgroundColor: '#0e2147',
+        color: ['#3FFFC2'],
         grid: {
           //   left: '5%',
           top: '10%',
@@ -132,12 +133,9 @@
             name: '降雨量',
             type: 'line',
             data: props.data.data1,
-
             itemStyle: {
-              normal: {
-                borderWidth: 5,
-                // color: '#0696f9',
-              },
+              borderWidth: 5,
+              // color: '#0696f9',
             },
           },
           {
@@ -153,11 +151,9 @@
               symbolSize: 15,
             },
             lineStyle: {
-              normal: {
-                width: 1,
-                opacity: 0.6,
-                curveness: 0.2,
-              },
+              width: 1,
+              opacity: 0.6,
+              curveness: 0.2,
             },
             data: props.data.data,
           },
diff --git a/src/views/sponeScreen/Echarts/tslyqk_constituent_3d.vue b/src/views/sponeScreen/Echarts/tslyqk_constituent_3d.vue
index 2b72b45..b61a344 100644
--- a/src/views/sponeScreen/Echarts/tslyqk_constituent_3d.vue
+++ b/src/views/sponeScreen/Echarts/tslyqk_constituent_3d.vue
@@ -9,6 +9,8 @@
 import * as echarts from 'echarts';
 const { proxy } = getCurrentInstance();
 
+const myChart = ref(null);
+
 // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
 function getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
   // 计算
@@ -147,8 +149,8 @@
       show: false,
     },
     itemStyle: {
-      opacity: 0.1,
-      color: '#E1E8EC',
+      opacity: 0.9,
+      color: '#296E99',
     },
     parametricEquation: {
       u: {
@@ -182,13 +184,13 @@
       show: false,
     },
     itemStyle: {
-      opacity: 0.1,
-      color: '#E1E8EC',
+      opacity: 0.2,
+      color: '#215983',
     },
     parametricEquation: {
       u: {
         min: 0,
-        max: Math.PI * 2,
+        max: Math.PI * 3,
         step: Math.PI / 20,
       },
       v: {
@@ -197,10 +199,10 @@
         step: Math.PI / 20,
       },
       x: function (u, v) {
-        return ((Math.sin(v) * Math.sin(u) + Math.sin(u)) / Math.PI) * 2;
+        return ((Math.sin(v) * Math.sin(u) + Math.sin(u)) / Math.PI) * 3;
       },
       y: function (u, v) {
-        return ((Math.sin(v) * Math.cos(u) + Math.cos(u)) / Math.PI) * 2;
+        return ((Math.sin(v) * Math.cos(u) + Math.cos(u)) / Math.PI) * 3;
       },
       z: function (u, v) {
         return Math.cos(v) > 0 ? -5 : -7;
@@ -215,8 +217,8 @@
       show: false,
     },
     itemStyle: {
-      opacity: 0.1,
-      color: '#E1E8EC',
+      opacity: 1,
+      color: '#25719D',
     },
     parametricEquation: {
       u: {
@@ -230,10 +232,10 @@
         step: Math.PI / 20,
       },
       x: function (u, v) {
-        return ((Math.sin(v) * Math.sin(u) + Math.sin(u)) / Math.PI) * 2.2;
+        return ((Math.sin(v) * Math.sin(u) + Math.sin(u)) / Math.PI) * 2.5;
       },
       y: function (u, v) {
-        return ((Math.sin(v) * Math.cos(u) + Math.cos(u)) / Math.PI) * 2.2;
+        return ((Math.sin(v) * Math.cos(u) + Math.cos(u)) / Math.PI) * 2.5;
       },
       z: function (u, v) {
         return Math.cos(v) > 0 ? -7 : -7;
@@ -258,12 +260,13 @@
     legend: {
       orient: 'vertical',
       icon: 'circle',
-      right: '5%',
-      top: '20%',
+      right: '3%',
+      top: '22%',
       show: true,
       itemGap: 10,
       textStyle: {
         color: '#A1E2FF',
+        fontSize: 14,
       },
       // icon:'diamond',
       data: legendData,
@@ -290,12 +293,11 @@
         // zoomSensitivity: 100,
         // panSensitivity: 100,
       },
-      top: '5%',
+      top: '0%',
       left: 'left',
-      width: '70%',
-      //   heigth: '50%',
+      width: '60%',
       show: false,
-      boxHeight: 20,
+      boxHeight: 50,
     },
     series: series,
   };
@@ -306,52 +308,59 @@
 const initEcharts = () => {
   const optionData = [
     {
-      name: '草(0.4%)',
-      value: 0.4,
+      name: '草(17.4k㎡,0.4%)',
+      value: 17.4,
       itemStyle: {
-        color: '#FFED52',
+        color: '#E7EA39',
       },
     },
     {
-      name: '田 (83.3%)',
-      value: 83.3,
+      name: '田 (4051.55k㎡,83.3%)',
+      value: 4051.55,
       itemStyle: {
-        color: '#FF8E5B',
+        color: '#E89668',
       },
     },
     {
-      name: '林 (11.4%)',
-      value: 11.4,
+      name: '林 (553.89k㎡,11.4%)',
+      value: 553.89,
       itemStyle: {
-        color: '#D956FF',
+        color: '#D863F4',
       },
     },
     {
-      name: '湖 (1.6%)',
-      value: 1.6,
+      name: '湖 (78.54k㎡,1.6%)',
+      value: 78.54,
       itemStyle: {
-        color: '#18FFFF',
+        color: '#03BABB',
       },
     },
     {
-      name: '水 (3.4%)',
-      value: 3.4,
+      name: '水 (165.05k㎡,3.4%)',
+      value: 165.05,
       itemStyle: {
-        color: '#4CC1FF',
+        color: '#3EB4F1',
       },
     },
   ];
   // 生成配置选项
   const option = getPie3D(optionData, 0.59);
-  //   const myChart = proxy.echarts.init(proxy.$refs.echarts);
-  const myChart = echarts.init(proxy.$refs.echarts3D);
+  myChart.value = echarts.init(proxy.$refs.echarts3D);
 
   // 绘制图形
-  myChart.setOption(option);
+  myChart.value.setOption(option);
 };
 
+//自适应
+function resizeTheChart() {
+  if (myChart.value) {
+    myChart.value.resize();
+  }
+}
+
 onMounted(() => {
   initEcharts();
+  window.addEventListener('resize', resizeTheChart);
 });
 </script>
 
diff --git a/src/views/sponeScreen/HaiMianScreen/index.vue b/src/views/sponeScreen/HaiMianScreen/index.vue
index 96efdfd..3702b26 100644
--- a/src/views/sponeScreen/HaiMianScreen/index.vue
+++ b/src/views/sponeScreen/HaiMianScreen/index.vue
@@ -2,13 +2,13 @@
   <!-- 海绵综合一张图首页 -->
   <div class="hmMainPage">
     <!-- 地图 -->
-    <GisMapMF></GisMapMF>
+    <!-- <GisMapMF></GisMapMF> -->
 
     <!-- 图例 -->
-    <Legend :showLegend="showLegend"></Legend>
+    <Legend :showLegend="showLegend" :class="['animate__animated', showPanel ? 'animate__fadeOutDown' : '']"></Legend>
 
     <!-- 控制面板按钮 -->
-    <div class="controlHM">
+    <div class="controlHM" :style="{ right: showPanel ? '30px' : '520px' }" v-if="menuIndex != 3">
       <img src="@/assets/newImgs/HMScreen/iconLegend.png" alt="" title="图例控制" @click="controlLegend" />
       <img src="@/assets/newImgs/HMScreen/iconPane.png" alt="" title="展开收起" @click="controlPanel" />
     </div>
@@ -62,7 +62,7 @@
   { name: '长效运维', id: 5 },
 ]);
 const menuIndex = ref(1);
-const showPanel = ref(true);
+const showPanel = ref(false);
 const showLegend = ref(false);
 
 // 跳转业务系统
@@ -154,7 +154,6 @@
   }
   .controlHM {
     position: absolute;
-    right: 500px;
     bottom: 50px;
     z-index: 220;
     width: 32px;
@@ -169,7 +168,7 @@
     position: absolute;
     bottom: 0px;
     left: 0px;
-    z-index: 220;
+    z-index: 180;
     width: 1920px;
     height: 100px;
     background: url('@/assets/newImgs/HMScreen/bottom_img .png') no-repeat;
diff --git a/src/views/sponeScreen/chengguanweiScreen/mainIndex.vue b/src/views/sponeScreen/chengguanweiScreen/mainIndex.vue
index d39f58e..edfadd6 100644
--- a/src/views/sponeScreen/chengguanweiScreen/mainIndex.vue
+++ b/src/views/sponeScreen/chengguanweiScreen/mainIndex.vue
@@ -2,10 +2,11 @@
   <!-- 3800*866 城管委-->
   <div class="cgwFivthScreen">
     3800*866 城管委
+    <img src="@/assets/newImgs/HMScreen/main.png" alt="" title="跳转业务系统" class="mainYW" @click="goSystem" />
     <!-- 地图 -->
     <GisMapMF></GisMapMF>
     <!-- 图例 -->
-    <Legend></Legend>
+    <!-- <Legend></Legend> -->
   </div>
 </template>
 
@@ -14,6 +15,11 @@
 import Legend from '@/views/sponeScreen/gisMF/legendKF.vue';
 const { proxy } = getCurrentInstance();
 
+// 跳转业务系统
+function goSystem() {
+  router.push({ path: '/index' });
+}
+
 onMounted(() => {});
 </script>
 
@@ -25,5 +31,11 @@
   background: #010e22;
   overflow: auto;
   position: relative;
+  .mainYW {
+    width: 50px;
+    height: 44px;
+    cursor: pointer;
+    margin: 10px 10px 0px 30px;
+  }
 }
 </style>
diff --git a/src/views/sponeScreen/cityGK/headHMAimg.vue b/src/views/sponeScreen/cityGK/headHMAimg.vue
index 0c014b9..aa99c96 100644
--- a/src/views/sponeScreen/cityGK/headHMAimg.vue
+++ b/src/views/sponeScreen/cityGK/headHMAimg.vue
@@ -26,7 +26,7 @@
     </div>
     <div class="three">
       <div class="PhotoClass">
-        <div class="PhotoClassA"></div>
+        <div class="PhotoClassA" style="opacity: 0.3"></div>
       </div>
       <div class="Selectiontime">
         <div class="SelectiontimeA">评估期</div>
@@ -38,7 +38,7 @@
     </div>
     <div class="four">
       <div class="PhotoClass">
-        <div class="PhotoClassA"></div>
+        <div class="PhotoClassA" style="opacity: 0.3"></div>
       </div>
       <div class="Selectiontime">
         <div class="SelectiontimeA">长效运维期</div>
diff --git a/src/views/sponeScreen/cityGK/index.vue b/src/views/sponeScreen/cityGK/index.vue
index 5a9f820..ec0f660 100644
--- a/src/views/sponeScreen/cityGK/index.vue
+++ b/src/views/sponeScreen/cityGK/index.vue
@@ -1,7 +1,7 @@
 <template>
   <!-- 海绵综合一张图 城市概况 -->
   <div class="cityPage">
-    <div class="publicLeftHM">
+    <div :class="['publicLeftHM', 'animate__animated', showPanel ? 'animate__fadeOutLeft' : 'animate__fadeInLeft']">
       <!-- 自然地理 -->
       <div class="partTitleHM">自然地理</div>
       <div class="partContHM">
@@ -46,11 +46,11 @@
     </div>
 
     <!-- 头部 -->
-    <div class="headHMA">
+    <div :class="['headHMA', 'animate__animated', showPanel ? 'animate__fadeOutUp' : 'animate__fadeInDown']">
       <headHMAimg></headHMAimg>
     </div>
 
-    <div class="publicRightHM">
+    <div :class="['publicRightHM', 'animate__animated', showPanel ? 'animate__fadeOutRight' : 'animate__fadeInRight']">
       <!-- 城市规划 -->
       <cityplanning></cityplanning>
 
@@ -68,6 +68,7 @@
 import headHMAimg from '@/views/sponeScreen/cityGK/headHMAimg.vue'; //头部
 
 const { proxy } = getCurrentInstance();
+const showPanel = ref(true); //面板展开收起
 const policiesList = ref([
   {
     name: '一心',
@@ -105,6 +106,7 @@
   () => props.showPanel,
   () => {
     console.log('val---', props.showPanel);
+    showPanel.value = props.showPanel;
   },
   { immediate: true }
 );
diff --git a/src/views/sponeScreen/cityGK/rainfall.vue b/src/views/sponeScreen/cityGK/rainfall.vue
index c3f2b38..61a80fb 100644
--- a/src/views/sponeScreen/cityGK/rainfall.vue
+++ b/src/views/sponeScreen/cityGK/rainfall.vue
@@ -84,7 +84,7 @@
 .HeadContent {
   width: 100%;
   height: 30px;
-  background: #2270ff;
+  background: rgba(34, 112, 255, 0.4);
   text-align: center;
   line-height: 30px;
   color: #ffffff;
diff --git a/src/views/sponeScreen/evaluationKH/index.vue b/src/views/sponeScreen/evaluationKH/index.vue
index 2f66628..5d473df 100644
--- a/src/views/sponeScreen/evaluationKH/index.vue
+++ b/src/views/sponeScreen/evaluationKH/index.vue
@@ -1,9 +1,12 @@
 <template>
   <!-- 海绵综合一张图 考核评估 -->
-  <div class="publicContainer">考核评估</div>
+  <div class="oneMapKHPG">
+    <KHPGHM></KHPGHM>
+  </div>
 </template>
 
 <script setup>
+import KHPGHM from '@/views/spongePerformance/mainIndex/index.vue'; //业务系统考核首页
 const { proxy } = getCurrentInstance();
 
 onMounted(() => {});
diff --git a/src/views/sponeScreen/gisMF/legendKF.vue b/src/views/sponeScreen/gisMF/legendKF.vue
index 23e5a62..88a4185 100644
--- a/src/views/sponeScreen/gisMF/legendKF.vue
+++ b/src/views/sponeScreen/gisMF/legendKF.vue
@@ -1,19 +1,14 @@
 <template>
   <!-- 海绵综合一张图图例 -->
-  <div class="lengendPage">
+  <div :class="['lengendPageHM', 'animate__animated', showLegend ? 'animate__fadeInUp' : 'animate__fadeOutDown']" v-if="showLegend">
     <!-- 图例框 -->
-    <div class="publicLegend">
+    <div class="publicLegendHM">
       <div class="legendTitle">
         <div class="legendName">图层控制</div>
       </div>
       <div class="legendContent">
         <div v-for="item in legendList" :key="item.layername" style="width: 100%">
           <div class="titleB" @click="changeAllLegend(item)">
-            <div class="iconImg">
-              <el-icon v-if="item.isCheck" size="18">
-                <Check />
-              </el-icon>
-            </div>
             {{ item.title }}
           </div>
           <div class="legendItemContent">
@@ -41,17 +36,30 @@
 import changeMapStyle from './changeMapStyle.js';
 import topography from '@/assets/newImgs/topography.png';
 import cesiumPaiShuiArea from './cesiumPaiShuiArea.js';
+
 const { proxy } = getCurrentInstance();
 const legendList = ref([]);
-const ifExpand = ref(true);
-// 展开收起
-const changeZhan = () => {
-  ifExpand.value = !ifExpand.value;
-};
+const showLegend = ref(false);
+
+// 面板内容展开收起控制
+const props = defineProps({
+  showLegend: {
+    type: Boolean,
+  },
+});
+watch(
+  () => props.showLegend,
+  () => {
+    console.log('showLegend---', props.showLegend);
+    showLegend.value = props.showLegend;
+  },
+  { immediate: true }
+);
+
 //图例一级标题点击
 const changeAllLegend = item => {
   console.log('item---', item);
-  item.isCheck = !item.isCheck;
+  // item.isCheck = !item.isCheck;
 };
 //图例点击
 const changeLegend = item => {
@@ -113,24 +121,17 @@
 </script>
 
 <style lang="scss">
-.lengendPage {
+.lengendPageHM {
   position: absolute;
-  left: 500px;
-  bottom: 60px;
+  left: 480px;
+  bottom: 63px;
   z-index: 205;
-  // background: red;
   width: 347px;
   height: 554px;
-  overflow-x: hidden;
-  overflow-y: auto;
-  .publicLegend {
-    width: 347px;
-    height: 654px;
-    background: #003b6d;
-    // border: 1px solid #6acefe;
+  background: #003b6d;
+  .publicLegendHM {
     opacity: 0.8;
     .legendTitle {
-      width: 345px;
       height: 46px;
       position: absolute;
       top: 1px;
@@ -144,12 +145,14 @@
       }
     }
     .legendContent {
+      width: 100%;
       position: absolute;
-      width: 345px;
+      height: 500px;
+      overflow-x: hidden;
+      overflow-y: auto;
       top: 47px;
       .titleB {
-        margin-top: 20px;
-        margin-bottom: 20px;
+        margin: 10px 0px 10px 20px;
         display: flex;
         height: 17px;
         font-family: Source Han Sans CN;
@@ -180,7 +183,7 @@
           align-items: center;
           cursor: pointer;
           .partItem {
-            margin-left: 47px;
+            margin-left: 20px;
             display: flex;
             width: 180px;
             &:hover {
diff --git a/src/views/sponeScreen/waterFlood/equipMonitor.vue b/src/views/sponeScreen/waterFlood/equipMonitor.vue
new file mode 100644
index 0000000..67b024f
--- /dev/null
+++ b/src/views/sponeScreen/waterFlood/equipMonitor.vue
@@ -0,0 +1,19 @@
+<template>
+  <!-- 监测设备 -->
+  <div class="equipJCPage">
+    <div class="partTitleHM">监测设备</div>
+    <div class="partContHM">监测设备</div>
+  </div>
+</template>
+
+<script setup>
+const { proxy } = getCurrentInstance();
+
+onMounted(() => {});
+</script>
+
+<style lang="scss" scoped>
+.equipJCPage {
+  width: 100%;
+}
+</style>

diff --git a/src/assets/newImgs/HMScreen/partBg.png b/src/assets/newImgs/HMScreen/partBg.png
index 7219105..0b8959a 100644
--- a/src/assets/newImgs/HMScreen/partBg.png
+++ b/src/assets/newImgs/HMScreen/partBg.png
Binary files differ
diff --git a/src/views/sponeScreen/Echarts/RainfallEcharts.vue b/src/views/sponeScreen/Echarts/RainfallEcharts.vue
index 2fbaaec..8c4b9e2 100644
--- a/src/views/sponeScreen/Echarts/RainfallEcharts.vue
+++ b/src/views/sponeScreen/Echarts/RainfallEcharts.vue
@@ -4,7 +4,7 @@
 <script>
 import * as echarts from 'echarts';
 import { guid } from '@/utils/ruoyi';
-import { reactive, toRefs, onMounted, watch } from 'vue';
+import { reactive, toRefs, onMounted, watch, onUnmounted } from 'vue';
 export default {
   name: 'line-chart',
   props: {
@@ -17,6 +17,7 @@
       legend: [],
       id: guid(),
       chart: null,
+      timer: null,
     });
     const resizeTheChart = () => {
       if (allData.chart) {
@@ -177,18 +178,16 @@
             barGap: '10%', // Make series be overlap
             barCateGoryGap: '10%',
             itemStyle: {
-              normal: {
-                color: new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [
-                  {
-                    offset: 0,
-                    color: 'rgba(24, 255, 255, 1)',
-                  },
-                  {
-                    offset: 1,
-                    color: 'rgba(188, 255, 255, 1)',
-                  },
-                ]),
-              },
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [
+                {
+                  offset: 0,
+                  color: 'rgba(24, 255, 255, 1)',
+                },
+                {
+                  offset: 1,
+                  color: 'rgba(188, 255, 255, 1)',
+                },
+              ]),
             },
             data: props.data.yAxis,
           },
@@ -204,23 +203,41 @@
       };
       option && chartDom.setOption(option, true);
       allData.chart = chartDom;
+      animateChart();
     };
     watch(
       () => props.refresh,
       () => {
-        if (allData.chartDom) {
-          allData.chartDom.dispose();
-          allData.chartDom = null;
+        if (allData.chart) {
+          allData.chart.dispose();
+          allData.chart = null;
         }
         setTimeout(() => {
           init();
         }, 0);
       }
     );
+    // echarts动画
+    function animateChart() {
+      let length = props.data.xAxis.length;
+      let i = 0;
+      allData.timer = setInterval(() => {
+        i++;
+        if (i == length) i = 0;
+        allData.chart.dispatchAction({
+          type: 'showTip',
+          seriesIndex: 0,
+          dataIndex: i,
+        });
+      }, 1500);
+    }
     onMounted(() => {
       init();
       window.addEventListener('resize', resizeTheChart);
     });
+    onUnmounted(() => {
+      if (allData.timer) clearInterval(allData.timer);
+    });
     return {
       ...toRefs(allData),
       resizeTheChart,
diff --git a/src/views/sponeScreen/Echarts/RainfallLegend.vue b/src/views/sponeScreen/Echarts/RainfallLegend.vue
index f6069cc..1c83534 100644
--- a/src/views/sponeScreen/Echarts/RainfallLegend.vue
+++ b/src/views/sponeScreen/Echarts/RainfallLegend.vue
@@ -31,6 +31,7 @@
       var option;
       option = {
         // backgroundColor: '#0e2147',
+        color: ['#3FFFC2'],
         grid: {
           //   left: '5%',
           top: '10%',
@@ -132,12 +133,9 @@
             name: '降雨量',
             type: 'line',
             data: props.data.data1,
-
             itemStyle: {
-              normal: {
-                borderWidth: 5,
-                // color: '#0696f9',
-              },
+              borderWidth: 5,
+              // color: '#0696f9',
             },
           },
           {
@@ -153,11 +151,9 @@
               symbolSize: 15,
             },
             lineStyle: {
-              normal: {
-                width: 1,
-                opacity: 0.6,
-                curveness: 0.2,
-              },
+              width: 1,
+              opacity: 0.6,
+              curveness: 0.2,
             },
             data: props.data.data,
           },
diff --git a/src/views/sponeScreen/Echarts/tslyqk_constituent_3d.vue b/src/views/sponeScreen/Echarts/tslyqk_constituent_3d.vue
index 2b72b45..b61a344 100644
--- a/src/views/sponeScreen/Echarts/tslyqk_constituent_3d.vue
+++ b/src/views/sponeScreen/Echarts/tslyqk_constituent_3d.vue
@@ -9,6 +9,8 @@
 import * as echarts from 'echarts';
 const { proxy } = getCurrentInstance();
 
+const myChart = ref(null);
+
 // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
 function getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
   // 计算
@@ -147,8 +149,8 @@
       show: false,
     },
     itemStyle: {
-      opacity: 0.1,
-      color: '#E1E8EC',
+      opacity: 0.9,
+      color: '#296E99',
     },
     parametricEquation: {
       u: {
@@ -182,13 +184,13 @@
       show: false,
     },
     itemStyle: {
-      opacity: 0.1,
-      color: '#E1E8EC',
+      opacity: 0.2,
+      color: '#215983',
     },
     parametricEquation: {
       u: {
         min: 0,
-        max: Math.PI * 2,
+        max: Math.PI * 3,
         step: Math.PI / 20,
       },
       v: {
@@ -197,10 +199,10 @@
         step: Math.PI / 20,
       },
       x: function (u, v) {
-        return ((Math.sin(v) * Math.sin(u) + Math.sin(u)) / Math.PI) * 2;
+        return ((Math.sin(v) * Math.sin(u) + Math.sin(u)) / Math.PI) * 3;
       },
       y: function (u, v) {
-        return ((Math.sin(v) * Math.cos(u) + Math.cos(u)) / Math.PI) * 2;
+        return ((Math.sin(v) * Math.cos(u) + Math.cos(u)) / Math.PI) * 3;
       },
       z: function (u, v) {
         return Math.cos(v) > 0 ? -5 : -7;
@@ -215,8 +217,8 @@
       show: false,
     },
     itemStyle: {
-      opacity: 0.1,
-      color: '#E1E8EC',
+      opacity: 1,
+      color: '#25719D',
     },
     parametricEquation: {
       u: {
@@ -230,10 +232,10 @@
         step: Math.PI / 20,
       },
       x: function (u, v) {
-        return ((Math.sin(v) * Math.sin(u) + Math.sin(u)) / Math.PI) * 2.2;
+        return ((Math.sin(v) * Math.sin(u) + Math.sin(u)) / Math.PI) * 2.5;
       },
       y: function (u, v) {
-        return ((Math.sin(v) * Math.cos(u) + Math.cos(u)) / Math.PI) * 2.2;
+        return ((Math.sin(v) * Math.cos(u) + Math.cos(u)) / Math.PI) * 2.5;
       },
       z: function (u, v) {
         return Math.cos(v) > 0 ? -7 : -7;
@@ -258,12 +260,13 @@
     legend: {
       orient: 'vertical',
       icon: 'circle',
-      right: '5%',
-      top: '20%',
+      right: '3%',
+      top: '22%',
       show: true,
       itemGap: 10,
       textStyle: {
         color: '#A1E2FF',
+        fontSize: 14,
       },
       // icon:'diamond',
       data: legendData,
@@ -290,12 +293,11 @@
         // zoomSensitivity: 100,
         // panSensitivity: 100,
       },
-      top: '5%',
+      top: '0%',
       left: 'left',
-      width: '70%',
-      //   heigth: '50%',
+      width: '60%',
       show: false,
-      boxHeight: 20,
+      boxHeight: 50,
     },
     series: series,
   };
@@ -306,52 +308,59 @@
 const initEcharts = () => {
   const optionData = [
     {
-      name: '草(0.4%)',
-      value: 0.4,
+      name: '草(17.4k㎡,0.4%)',
+      value: 17.4,
       itemStyle: {
-        color: '#FFED52',
+        color: '#E7EA39',
       },
     },
     {
-      name: '田 (83.3%)',
-      value: 83.3,
+      name: '田 (4051.55k㎡,83.3%)',
+      value: 4051.55,
       itemStyle: {
-        color: '#FF8E5B',
+        color: '#E89668',
       },
     },
     {
-      name: '林 (11.4%)',
-      value: 11.4,
+      name: '林 (553.89k㎡,11.4%)',
+      value: 553.89,
       itemStyle: {
-        color: '#D956FF',
+        color: '#D863F4',
       },
     },
     {
-      name: '湖 (1.6%)',
-      value: 1.6,
+      name: '湖 (78.54k㎡,1.6%)',
+      value: 78.54,
       itemStyle: {
-        color: '#18FFFF',
+        color: '#03BABB',
       },
     },
     {
-      name: '水 (3.4%)',
-      value: 3.4,
+      name: '水 (165.05k㎡,3.4%)',
+      value: 165.05,
       itemStyle: {
-        color: '#4CC1FF',
+        color: '#3EB4F1',
       },
     },
   ];
   // 生成配置选项
   const option = getPie3D(optionData, 0.59);
-  //   const myChart = proxy.echarts.init(proxy.$refs.echarts);
-  const myChart = echarts.init(proxy.$refs.echarts3D);
+  myChart.value = echarts.init(proxy.$refs.echarts3D);
 
   // 绘制图形
-  myChart.setOption(option);
+  myChart.value.setOption(option);
 };
 
+//自适应
+function resizeTheChart() {
+  if (myChart.value) {
+    myChart.value.resize();
+  }
+}
+
 onMounted(() => {
   initEcharts();
+  window.addEventListener('resize', resizeTheChart);
 });
 </script>
 
diff --git a/src/views/sponeScreen/HaiMianScreen/index.vue b/src/views/sponeScreen/HaiMianScreen/index.vue
index 96efdfd..3702b26 100644
--- a/src/views/sponeScreen/HaiMianScreen/index.vue
+++ b/src/views/sponeScreen/HaiMianScreen/index.vue
@@ -2,13 +2,13 @@
   <!-- 海绵综合一张图首页 -->
   <div class="hmMainPage">
     <!-- 地图 -->
-    <GisMapMF></GisMapMF>
+    <!-- <GisMapMF></GisMapMF> -->
 
     <!-- 图例 -->
-    <Legend :showLegend="showLegend"></Legend>
+    <Legend :showLegend="showLegend" :class="['animate__animated', showPanel ? 'animate__fadeOutDown' : '']"></Legend>
 
     <!-- 控制面板按钮 -->
-    <div class="controlHM">
+    <div class="controlHM" :style="{ right: showPanel ? '30px' : '520px' }" v-if="menuIndex != 3">
       <img src="@/assets/newImgs/HMScreen/iconLegend.png" alt="" title="图例控制" @click="controlLegend" />
       <img src="@/assets/newImgs/HMScreen/iconPane.png" alt="" title="展开收起" @click="controlPanel" />
     </div>
@@ -62,7 +62,7 @@
   { name: '长效运维', id: 5 },
 ]);
 const menuIndex = ref(1);
-const showPanel = ref(true);
+const showPanel = ref(false);
 const showLegend = ref(false);
 
 // 跳转业务系统
@@ -154,7 +154,6 @@
   }
   .controlHM {
     position: absolute;
-    right: 500px;
     bottom: 50px;
     z-index: 220;
     width: 32px;
@@ -169,7 +168,7 @@
     position: absolute;
     bottom: 0px;
     left: 0px;
-    z-index: 220;
+    z-index: 180;
     width: 1920px;
     height: 100px;
     background: url('@/assets/newImgs/HMScreen/bottom_img .png') no-repeat;
diff --git a/src/views/sponeScreen/chengguanweiScreen/mainIndex.vue b/src/views/sponeScreen/chengguanweiScreen/mainIndex.vue
index d39f58e..edfadd6 100644
--- a/src/views/sponeScreen/chengguanweiScreen/mainIndex.vue
+++ b/src/views/sponeScreen/chengguanweiScreen/mainIndex.vue
@@ -2,10 +2,11 @@
   <!-- 3800*866 城管委-->
   <div class="cgwFivthScreen">
     3800*866 城管委
+    <img src="@/assets/newImgs/HMScreen/main.png" alt="" title="跳转业务系统" class="mainYW" @click="goSystem" />
     <!-- 地图 -->
     <GisMapMF></GisMapMF>
     <!-- 图例 -->
-    <Legend></Legend>
+    <!-- <Legend></Legend> -->
   </div>
 </template>
 
@@ -14,6 +15,11 @@
 import Legend from '@/views/sponeScreen/gisMF/legendKF.vue';
 const { proxy } = getCurrentInstance();
 
+// 跳转业务系统
+function goSystem() {
+  router.push({ path: '/index' });
+}
+
 onMounted(() => {});
 </script>
 
@@ -25,5 +31,11 @@
   background: #010e22;
   overflow: auto;
   position: relative;
+  .mainYW {
+    width: 50px;
+    height: 44px;
+    cursor: pointer;
+    margin: 10px 10px 0px 30px;
+  }
 }
 </style>
diff --git a/src/views/sponeScreen/cityGK/headHMAimg.vue b/src/views/sponeScreen/cityGK/headHMAimg.vue
index 0c014b9..aa99c96 100644
--- a/src/views/sponeScreen/cityGK/headHMAimg.vue
+++ b/src/views/sponeScreen/cityGK/headHMAimg.vue
@@ -26,7 +26,7 @@
     </div>
     <div class="three">
       <div class="PhotoClass">
-        <div class="PhotoClassA"></div>
+        <div class="PhotoClassA" style="opacity: 0.3"></div>
       </div>
       <div class="Selectiontime">
         <div class="SelectiontimeA">评估期</div>
@@ -38,7 +38,7 @@
     </div>
     <div class="four">
       <div class="PhotoClass">
-        <div class="PhotoClassA"></div>
+        <div class="PhotoClassA" style="opacity: 0.3"></div>
       </div>
       <div class="Selectiontime">
         <div class="SelectiontimeA">长效运维期</div>
diff --git a/src/views/sponeScreen/cityGK/index.vue b/src/views/sponeScreen/cityGK/index.vue
index 5a9f820..ec0f660 100644
--- a/src/views/sponeScreen/cityGK/index.vue
+++ b/src/views/sponeScreen/cityGK/index.vue
@@ -1,7 +1,7 @@
 <template>
   <!-- 海绵综合一张图 城市概况 -->
   <div class="cityPage">
-    <div class="publicLeftHM">
+    <div :class="['publicLeftHM', 'animate__animated', showPanel ? 'animate__fadeOutLeft' : 'animate__fadeInLeft']">
       <!-- 自然地理 -->
       <div class="partTitleHM">自然地理</div>
       <div class="partContHM">
@@ -46,11 +46,11 @@
     </div>
 
     <!-- 头部 -->
-    <div class="headHMA">
+    <div :class="['headHMA', 'animate__animated', showPanel ? 'animate__fadeOutUp' : 'animate__fadeInDown']">
       <headHMAimg></headHMAimg>
     </div>
 
-    <div class="publicRightHM">
+    <div :class="['publicRightHM', 'animate__animated', showPanel ? 'animate__fadeOutRight' : 'animate__fadeInRight']">
       <!-- 城市规划 -->
       <cityplanning></cityplanning>
 
@@ -68,6 +68,7 @@
 import headHMAimg from '@/views/sponeScreen/cityGK/headHMAimg.vue'; //头部
 
 const { proxy } = getCurrentInstance();
+const showPanel = ref(true); //面板展开收起
 const policiesList = ref([
   {
     name: '一心',
@@ -105,6 +106,7 @@
   () => props.showPanel,
   () => {
     console.log('val---', props.showPanel);
+    showPanel.value = props.showPanel;
   },
   { immediate: true }
 );
diff --git a/src/views/sponeScreen/cityGK/rainfall.vue b/src/views/sponeScreen/cityGK/rainfall.vue
index c3f2b38..61a80fb 100644
--- a/src/views/sponeScreen/cityGK/rainfall.vue
+++ b/src/views/sponeScreen/cityGK/rainfall.vue
@@ -84,7 +84,7 @@
 .HeadContent {
   width: 100%;
   height: 30px;
-  background: #2270ff;
+  background: rgba(34, 112, 255, 0.4);
   text-align: center;
   line-height: 30px;
   color: #ffffff;
diff --git a/src/views/sponeScreen/evaluationKH/index.vue b/src/views/sponeScreen/evaluationKH/index.vue
index 2f66628..5d473df 100644
--- a/src/views/sponeScreen/evaluationKH/index.vue
+++ b/src/views/sponeScreen/evaluationKH/index.vue
@@ -1,9 +1,12 @@
 <template>
   <!-- 海绵综合一张图 考核评估 -->
-  <div class="publicContainer">考核评估</div>
+  <div class="oneMapKHPG">
+    <KHPGHM></KHPGHM>
+  </div>
 </template>
 
 <script setup>
+import KHPGHM from '@/views/spongePerformance/mainIndex/index.vue'; //业务系统考核首页
 const { proxy } = getCurrentInstance();
 
 onMounted(() => {});
diff --git a/src/views/sponeScreen/gisMF/legendKF.vue b/src/views/sponeScreen/gisMF/legendKF.vue
index 23e5a62..88a4185 100644
--- a/src/views/sponeScreen/gisMF/legendKF.vue
+++ b/src/views/sponeScreen/gisMF/legendKF.vue
@@ -1,19 +1,14 @@
 <template>
   <!-- 海绵综合一张图图例 -->
-  <div class="lengendPage">
+  <div :class="['lengendPageHM', 'animate__animated', showLegend ? 'animate__fadeInUp' : 'animate__fadeOutDown']" v-if="showLegend">
     <!-- 图例框 -->
-    <div class="publicLegend">
+    <div class="publicLegendHM">
       <div class="legendTitle">
         <div class="legendName">图层控制</div>
       </div>
       <div class="legendContent">
         <div v-for="item in legendList" :key="item.layername" style="width: 100%">
           <div class="titleB" @click="changeAllLegend(item)">
-            <div class="iconImg">
-              <el-icon v-if="item.isCheck" size="18">
-                <Check />
-              </el-icon>
-            </div>
             {{ item.title }}
           </div>
           <div class="legendItemContent">
@@ -41,17 +36,30 @@
 import changeMapStyle from './changeMapStyle.js';
 import topography from '@/assets/newImgs/topography.png';
 import cesiumPaiShuiArea from './cesiumPaiShuiArea.js';
+
 const { proxy } = getCurrentInstance();
 const legendList = ref([]);
-const ifExpand = ref(true);
-// 展开收起
-const changeZhan = () => {
-  ifExpand.value = !ifExpand.value;
-};
+const showLegend = ref(false);
+
+// 面板内容展开收起控制
+const props = defineProps({
+  showLegend: {
+    type: Boolean,
+  },
+});
+watch(
+  () => props.showLegend,
+  () => {
+    console.log('showLegend---', props.showLegend);
+    showLegend.value = props.showLegend;
+  },
+  { immediate: true }
+);
+
 //图例一级标题点击
 const changeAllLegend = item => {
   console.log('item---', item);
-  item.isCheck = !item.isCheck;
+  // item.isCheck = !item.isCheck;
 };
 //图例点击
 const changeLegend = item => {
@@ -113,24 +121,17 @@
 </script>
 
 <style lang="scss">
-.lengendPage {
+.lengendPageHM {
   position: absolute;
-  left: 500px;
-  bottom: 60px;
+  left: 480px;
+  bottom: 63px;
   z-index: 205;
-  // background: red;
   width: 347px;
   height: 554px;
-  overflow-x: hidden;
-  overflow-y: auto;
-  .publicLegend {
-    width: 347px;
-    height: 654px;
-    background: #003b6d;
-    // border: 1px solid #6acefe;
+  background: #003b6d;
+  .publicLegendHM {
     opacity: 0.8;
     .legendTitle {
-      width: 345px;
       height: 46px;
       position: absolute;
       top: 1px;
@@ -144,12 +145,14 @@
       }
     }
     .legendContent {
+      width: 100%;
       position: absolute;
-      width: 345px;
+      height: 500px;
+      overflow-x: hidden;
+      overflow-y: auto;
       top: 47px;
       .titleB {
-        margin-top: 20px;
-        margin-bottom: 20px;
+        margin: 10px 0px 10px 20px;
         display: flex;
         height: 17px;
         font-family: Source Han Sans CN;
@@ -180,7 +183,7 @@
           align-items: center;
           cursor: pointer;
           .partItem {
-            margin-left: 47px;
+            margin-left: 20px;
             display: flex;
             width: 180px;
             &:hover {
diff --git a/src/views/sponeScreen/waterFlood/equipMonitor.vue b/src/views/sponeScreen/waterFlood/equipMonitor.vue
new file mode 100644
index 0000000..67b024f
--- /dev/null
+++ b/src/views/sponeScreen/waterFlood/equipMonitor.vue
@@ -0,0 +1,19 @@
+<template>
+  <!-- 监测设备 -->
+  <div class="equipJCPage">
+    <div class="partTitleHM">监测设备</div>
+    <div class="partContHM">监测设备</div>
+  </div>
+</template>
+
+<script setup>
+const { proxy } = getCurrentInstance();
+
+onMounted(() => {});
+</script>
+
+<style lang="scss" scoped>
+.equipJCPage {
+  width: 100%;
+}
+</style>
diff --git a/src/views/sponeScreen/waterFlood/floodWZ.vue b/src/views/sponeScreen/waterFlood/floodWZ.vue
new file mode 100644
index 0000000..8ceb1f2
--- /dev/null
+++ b/src/views/sponeScreen/waterFlood/floodWZ.vue
@@ -0,0 +1,19 @@
+<template>
+  <!-- 防汛物资 -->
+  <div class="floodWZPage">
+    <div class="partTitleHM">防汛物资</div>
+    <div class="partContHM">防汛物资3333332</div>
+  </div>
+</template>
+
+<script setup>
+const { proxy } = getCurrentInstance();
+
+onMounted(() => {});
+</script>
+
+<style lang="scss" scoped>
+.floodWZPage {
+  width: 100%;
+}
+</style>

diff --git a/src/assets/newImgs/HMScreen/partBg.png b/src/assets/newImgs/HMScreen/partBg.png
index 7219105..0b8959a 100644
--- a/src/assets/newImgs/HMScreen/partBg.png
+++ b/src/assets/newImgs/HMScreen/partBg.png
Binary files differ
diff --git a/src/views/sponeScreen/Echarts/RainfallEcharts.vue b/src/views/sponeScreen/Echarts/RainfallEcharts.vue
index 2fbaaec..8c4b9e2 100644
--- a/src/views/sponeScreen/Echarts/RainfallEcharts.vue
+++ b/src/views/sponeScreen/Echarts/RainfallEcharts.vue
@@ -4,7 +4,7 @@
 <script>
 import * as echarts from 'echarts';
 import { guid } from '@/utils/ruoyi';
-import { reactive, toRefs, onMounted, watch } from 'vue';
+import { reactive, toRefs, onMounted, watch, onUnmounted } from 'vue';
 export default {
   name: 'line-chart',
   props: {
@@ -17,6 +17,7 @@
       legend: [],
       id: guid(),
       chart: null,
+      timer: null,
     });
     const resizeTheChart = () => {
       if (allData.chart) {
@@ -177,18 +178,16 @@
             barGap: '10%', // Make series be overlap
             barCateGoryGap: '10%',
             itemStyle: {
-              normal: {
-                color: new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [
-                  {
-                    offset: 0,
-                    color: 'rgba(24, 255, 255, 1)',
-                  },
-                  {
-                    offset: 1,
-                    color: 'rgba(188, 255, 255, 1)',
-                  },
-                ]),
-              },
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [
+                {
+                  offset: 0,
+                  color: 'rgba(24, 255, 255, 1)',
+                },
+                {
+                  offset: 1,
+                  color: 'rgba(188, 255, 255, 1)',
+                },
+              ]),
             },
             data: props.data.yAxis,
           },
@@ -204,23 +203,41 @@
       };
       option && chartDom.setOption(option, true);
       allData.chart = chartDom;
+      animateChart();
     };
     watch(
       () => props.refresh,
       () => {
-        if (allData.chartDom) {
-          allData.chartDom.dispose();
-          allData.chartDom = null;
+        if (allData.chart) {
+          allData.chart.dispose();
+          allData.chart = null;
         }
         setTimeout(() => {
           init();
         }, 0);
       }
     );
+    // echarts动画
+    function animateChart() {
+      let length = props.data.xAxis.length;
+      let i = 0;
+      allData.timer = setInterval(() => {
+        i++;
+        if (i == length) i = 0;
+        allData.chart.dispatchAction({
+          type: 'showTip',
+          seriesIndex: 0,
+          dataIndex: i,
+        });
+      }, 1500);
+    }
     onMounted(() => {
       init();
       window.addEventListener('resize', resizeTheChart);
     });
+    onUnmounted(() => {
+      if (allData.timer) clearInterval(allData.timer);
+    });
     return {
       ...toRefs(allData),
       resizeTheChart,
diff --git a/src/views/sponeScreen/Echarts/RainfallLegend.vue b/src/views/sponeScreen/Echarts/RainfallLegend.vue
index f6069cc..1c83534 100644
--- a/src/views/sponeScreen/Echarts/RainfallLegend.vue
+++ b/src/views/sponeScreen/Echarts/RainfallLegend.vue
@@ -31,6 +31,7 @@
       var option;
       option = {
         // backgroundColor: '#0e2147',
+        color: ['#3FFFC2'],
         grid: {
           //   left: '5%',
           top: '10%',
@@ -132,12 +133,9 @@
             name: '降雨量',
             type: 'line',
             data: props.data.data1,
-
             itemStyle: {
-              normal: {
-                borderWidth: 5,
-                // color: '#0696f9',
-              },
+              borderWidth: 5,
+              // color: '#0696f9',
             },
           },
           {
@@ -153,11 +151,9 @@
               symbolSize: 15,
             },
             lineStyle: {
-              normal: {
-                width: 1,
-                opacity: 0.6,
-                curveness: 0.2,
-              },
+              width: 1,
+              opacity: 0.6,
+              curveness: 0.2,
             },
             data: props.data.data,
           },
diff --git a/src/views/sponeScreen/Echarts/tslyqk_constituent_3d.vue b/src/views/sponeScreen/Echarts/tslyqk_constituent_3d.vue
index 2b72b45..b61a344 100644
--- a/src/views/sponeScreen/Echarts/tslyqk_constituent_3d.vue
+++ b/src/views/sponeScreen/Echarts/tslyqk_constituent_3d.vue
@@ -9,6 +9,8 @@
 import * as echarts from 'echarts';
 const { proxy } = getCurrentInstance();
 
+const myChart = ref(null);
+
 // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
 function getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
   // 计算
@@ -147,8 +149,8 @@
       show: false,
     },
     itemStyle: {
-      opacity: 0.1,
-      color: '#E1E8EC',
+      opacity: 0.9,
+      color: '#296E99',
     },
     parametricEquation: {
       u: {
@@ -182,13 +184,13 @@
       show: false,
     },
     itemStyle: {
-      opacity: 0.1,
-      color: '#E1E8EC',
+      opacity: 0.2,
+      color: '#215983',
     },
     parametricEquation: {
       u: {
         min: 0,
-        max: Math.PI * 2,
+        max: Math.PI * 3,
         step: Math.PI / 20,
       },
       v: {
@@ -197,10 +199,10 @@
         step: Math.PI / 20,
       },
       x: function (u, v) {
-        return ((Math.sin(v) * Math.sin(u) + Math.sin(u)) / Math.PI) * 2;
+        return ((Math.sin(v) * Math.sin(u) + Math.sin(u)) / Math.PI) * 3;
       },
       y: function (u, v) {
-        return ((Math.sin(v) * Math.cos(u) + Math.cos(u)) / Math.PI) * 2;
+        return ((Math.sin(v) * Math.cos(u) + Math.cos(u)) / Math.PI) * 3;
       },
       z: function (u, v) {
         return Math.cos(v) > 0 ? -5 : -7;
@@ -215,8 +217,8 @@
       show: false,
     },
     itemStyle: {
-      opacity: 0.1,
-      color: '#E1E8EC',
+      opacity: 1,
+      color: '#25719D',
     },
     parametricEquation: {
       u: {
@@ -230,10 +232,10 @@
         step: Math.PI / 20,
       },
       x: function (u, v) {
-        return ((Math.sin(v) * Math.sin(u) + Math.sin(u)) / Math.PI) * 2.2;
+        return ((Math.sin(v) * Math.sin(u) + Math.sin(u)) / Math.PI) * 2.5;
       },
       y: function (u, v) {
-        return ((Math.sin(v) * Math.cos(u) + Math.cos(u)) / Math.PI) * 2.2;
+        return ((Math.sin(v) * Math.cos(u) + Math.cos(u)) / Math.PI) * 2.5;
       },
       z: function (u, v) {
         return Math.cos(v) > 0 ? -7 : -7;
@@ -258,12 +260,13 @@
     legend: {
       orient: 'vertical',
       icon: 'circle',
-      right: '5%',
-      top: '20%',
+      right: '3%',
+      top: '22%',
       show: true,
       itemGap: 10,
       textStyle: {
         color: '#A1E2FF',
+        fontSize: 14,
       },
       // icon:'diamond',
       data: legendData,
@@ -290,12 +293,11 @@
         // zoomSensitivity: 100,
         // panSensitivity: 100,
       },
-      top: '5%',
+      top: '0%',
       left: 'left',
-      width: '70%',
-      //   heigth: '50%',
+      width: '60%',
       show: false,
-      boxHeight: 20,
+      boxHeight: 50,
     },
     series: series,
   };
@@ -306,52 +308,59 @@
 const initEcharts = () => {
   const optionData = [
     {
-      name: '草(0.4%)',
-      value: 0.4,
+      name: '草(17.4k㎡,0.4%)',
+      value: 17.4,
       itemStyle: {
-        color: '#FFED52',
+        color: '#E7EA39',
       },
     },
     {
-      name: '田 (83.3%)',
-      value: 83.3,
+      name: '田 (4051.55k㎡,83.3%)',
+      value: 4051.55,
       itemStyle: {
-        color: '#FF8E5B',
+        color: '#E89668',
       },
     },
     {
-      name: '林 (11.4%)',
-      value: 11.4,
+      name: '林 (553.89k㎡,11.4%)',
+      value: 553.89,
       itemStyle: {
-        color: '#D956FF',
+        color: '#D863F4',
       },
     },
     {
-      name: '湖 (1.6%)',
-      value: 1.6,
+      name: '湖 (78.54k㎡,1.6%)',
+      value: 78.54,
       itemStyle: {
-        color: '#18FFFF',
+        color: '#03BABB',
       },
     },
     {
-      name: '水 (3.4%)',
-      value: 3.4,
+      name: '水 (165.05k㎡,3.4%)',
+      value: 165.05,
       itemStyle: {
-        color: '#4CC1FF',
+        color: '#3EB4F1',
       },
     },
   ];
   // 生成配置选项
   const option = getPie3D(optionData, 0.59);
-  //   const myChart = proxy.echarts.init(proxy.$refs.echarts);
-  const myChart = echarts.init(proxy.$refs.echarts3D);
+  myChart.value = echarts.init(proxy.$refs.echarts3D);
 
   // 绘制图形
-  myChart.setOption(option);
+  myChart.value.setOption(option);
 };
 
+//自适应
+function resizeTheChart() {
+  if (myChart.value) {
+    myChart.value.resize();
+  }
+}
+
 onMounted(() => {
   initEcharts();
+  window.addEventListener('resize', resizeTheChart);
 });
 </script>
 
diff --git a/src/views/sponeScreen/HaiMianScreen/index.vue b/src/views/sponeScreen/HaiMianScreen/index.vue
index 96efdfd..3702b26 100644
--- a/src/views/sponeScreen/HaiMianScreen/index.vue
+++ b/src/views/sponeScreen/HaiMianScreen/index.vue
@@ -2,13 +2,13 @@
   <!-- 海绵综合一张图首页 -->
   <div class="hmMainPage">
     <!-- 地图 -->
-    <GisMapMF></GisMapMF>
+    <!-- <GisMapMF></GisMapMF> -->
 
     <!-- 图例 -->
-    <Legend :showLegend="showLegend"></Legend>
+    <Legend :showLegend="showLegend" :class="['animate__animated', showPanel ? 'animate__fadeOutDown' : '']"></Legend>
 
     <!-- 控制面板按钮 -->
-    <div class="controlHM">
+    <div class="controlHM" :style="{ right: showPanel ? '30px' : '520px' }" v-if="menuIndex != 3">
       <img src="@/assets/newImgs/HMScreen/iconLegend.png" alt="" title="图例控制" @click="controlLegend" />
       <img src="@/assets/newImgs/HMScreen/iconPane.png" alt="" title="展开收起" @click="controlPanel" />
     </div>
@@ -62,7 +62,7 @@
   { name: '长效运维', id: 5 },
 ]);
 const menuIndex = ref(1);
-const showPanel = ref(true);
+const showPanel = ref(false);
 const showLegend = ref(false);
 
 // 跳转业务系统
@@ -154,7 +154,6 @@
   }
   .controlHM {
     position: absolute;
-    right: 500px;
     bottom: 50px;
     z-index: 220;
     width: 32px;
@@ -169,7 +168,7 @@
     position: absolute;
     bottom: 0px;
     left: 0px;
-    z-index: 220;
+    z-index: 180;
     width: 1920px;
     height: 100px;
     background: url('@/assets/newImgs/HMScreen/bottom_img .png') no-repeat;
diff --git a/src/views/sponeScreen/chengguanweiScreen/mainIndex.vue b/src/views/sponeScreen/chengguanweiScreen/mainIndex.vue
index d39f58e..edfadd6 100644
--- a/src/views/sponeScreen/chengguanweiScreen/mainIndex.vue
+++ b/src/views/sponeScreen/chengguanweiScreen/mainIndex.vue
@@ -2,10 +2,11 @@
   <!-- 3800*866 城管委-->
   <div class="cgwFivthScreen">
     3800*866 城管委
+    <img src="@/assets/newImgs/HMScreen/main.png" alt="" title="跳转业务系统" class="mainYW" @click="goSystem" />
     <!-- 地图 -->
     <GisMapMF></GisMapMF>
     <!-- 图例 -->
-    <Legend></Legend>
+    <!-- <Legend></Legend> -->
   </div>
 </template>
 
@@ -14,6 +15,11 @@
 import Legend from '@/views/sponeScreen/gisMF/legendKF.vue';
 const { proxy } = getCurrentInstance();
 
+// 跳转业务系统
+function goSystem() {
+  router.push({ path: '/index' });
+}
+
 onMounted(() => {});
 </script>
 
@@ -25,5 +31,11 @@
   background: #010e22;
   overflow: auto;
   position: relative;
+  .mainYW {
+    width: 50px;
+    height: 44px;
+    cursor: pointer;
+    margin: 10px 10px 0px 30px;
+  }
 }
 </style>
diff --git a/src/views/sponeScreen/cityGK/headHMAimg.vue b/src/views/sponeScreen/cityGK/headHMAimg.vue
index 0c014b9..aa99c96 100644
--- a/src/views/sponeScreen/cityGK/headHMAimg.vue
+++ b/src/views/sponeScreen/cityGK/headHMAimg.vue
@@ -26,7 +26,7 @@
     </div>
     <div class="three">
       <div class="PhotoClass">
-        <div class="PhotoClassA"></div>
+        <div class="PhotoClassA" style="opacity: 0.3"></div>
       </div>
       <div class="Selectiontime">
         <div class="SelectiontimeA">评估期</div>
@@ -38,7 +38,7 @@
     </div>
     <div class="four">
       <div class="PhotoClass">
-        <div class="PhotoClassA"></div>
+        <div class="PhotoClassA" style="opacity: 0.3"></div>
       </div>
       <div class="Selectiontime">
         <div class="SelectiontimeA">长效运维期</div>
diff --git a/src/views/sponeScreen/cityGK/index.vue b/src/views/sponeScreen/cityGK/index.vue
index 5a9f820..ec0f660 100644
--- a/src/views/sponeScreen/cityGK/index.vue
+++ b/src/views/sponeScreen/cityGK/index.vue
@@ -1,7 +1,7 @@
 <template>
   <!-- 海绵综合一张图 城市概况 -->
   <div class="cityPage">
-    <div class="publicLeftHM">
+    <div :class="['publicLeftHM', 'animate__animated', showPanel ? 'animate__fadeOutLeft' : 'animate__fadeInLeft']">
       <!-- 自然地理 -->
       <div class="partTitleHM">自然地理</div>
       <div class="partContHM">
@@ -46,11 +46,11 @@
     </div>
 
     <!-- 头部 -->
-    <div class="headHMA">
+    <div :class="['headHMA', 'animate__animated', showPanel ? 'animate__fadeOutUp' : 'animate__fadeInDown']">
       <headHMAimg></headHMAimg>
     </div>
 
-    <div class="publicRightHM">
+    <div :class="['publicRightHM', 'animate__animated', showPanel ? 'animate__fadeOutRight' : 'animate__fadeInRight']">
       <!-- 城市规划 -->
       <cityplanning></cityplanning>
 
@@ -68,6 +68,7 @@
 import headHMAimg from '@/views/sponeScreen/cityGK/headHMAimg.vue'; //头部
 
 const { proxy } = getCurrentInstance();
+const showPanel = ref(true); //面板展开收起
 const policiesList = ref([
   {
     name: '一心',
@@ -105,6 +106,7 @@
   () => props.showPanel,
   () => {
     console.log('val---', props.showPanel);
+    showPanel.value = props.showPanel;
   },
   { immediate: true }
 );
diff --git a/src/views/sponeScreen/cityGK/rainfall.vue b/src/views/sponeScreen/cityGK/rainfall.vue
index c3f2b38..61a80fb 100644
--- a/src/views/sponeScreen/cityGK/rainfall.vue
+++ b/src/views/sponeScreen/cityGK/rainfall.vue
@@ -84,7 +84,7 @@
 .HeadContent {
   width: 100%;
   height: 30px;
-  background: #2270ff;
+  background: rgba(34, 112, 255, 0.4);
   text-align: center;
   line-height: 30px;
   color: #ffffff;
diff --git a/src/views/sponeScreen/evaluationKH/index.vue b/src/views/sponeScreen/evaluationKH/index.vue
index 2f66628..5d473df 100644
--- a/src/views/sponeScreen/evaluationKH/index.vue
+++ b/src/views/sponeScreen/evaluationKH/index.vue
@@ -1,9 +1,12 @@
 <template>
   <!-- 海绵综合一张图 考核评估 -->
-  <div class="publicContainer">考核评估</div>
+  <div class="oneMapKHPG">
+    <KHPGHM></KHPGHM>
+  </div>
 </template>
 
 <script setup>
+import KHPGHM from '@/views/spongePerformance/mainIndex/index.vue'; //业务系统考核首页
 const { proxy } = getCurrentInstance();
 
 onMounted(() => {});
diff --git a/src/views/sponeScreen/gisMF/legendKF.vue b/src/views/sponeScreen/gisMF/legendKF.vue
index 23e5a62..88a4185 100644
--- a/src/views/sponeScreen/gisMF/legendKF.vue
+++ b/src/views/sponeScreen/gisMF/legendKF.vue
@@ -1,19 +1,14 @@
 <template>
   <!-- 海绵综合一张图图例 -->
-  <div class="lengendPage">
+  <div :class="['lengendPageHM', 'animate__animated', showLegend ? 'animate__fadeInUp' : 'animate__fadeOutDown']" v-if="showLegend">
     <!-- 图例框 -->
-    <div class="publicLegend">
+    <div class="publicLegendHM">
       <div class="legendTitle">
         <div class="legendName">图层控制</div>
       </div>
       <div class="legendContent">
         <div v-for="item in legendList" :key="item.layername" style="width: 100%">
           <div class="titleB" @click="changeAllLegend(item)">
-            <div class="iconImg">
-              <el-icon v-if="item.isCheck" size="18">
-                <Check />
-              </el-icon>
-            </div>
             {{ item.title }}
           </div>
           <div class="legendItemContent">
@@ -41,17 +36,30 @@
 import changeMapStyle from './changeMapStyle.js';
 import topography from '@/assets/newImgs/topography.png';
 import cesiumPaiShuiArea from './cesiumPaiShuiArea.js';
+
 const { proxy } = getCurrentInstance();
 const legendList = ref([]);
-const ifExpand = ref(true);
-// 展开收起
-const changeZhan = () => {
-  ifExpand.value = !ifExpand.value;
-};
+const showLegend = ref(false);
+
+// 面板内容展开收起控制
+const props = defineProps({
+  showLegend: {
+    type: Boolean,
+  },
+});
+watch(
+  () => props.showLegend,
+  () => {
+    console.log('showLegend---', props.showLegend);
+    showLegend.value = props.showLegend;
+  },
+  { immediate: true }
+);
+
 //图例一级标题点击
 const changeAllLegend = item => {
   console.log('item---', item);
-  item.isCheck = !item.isCheck;
+  // item.isCheck = !item.isCheck;
 };
 //图例点击
 const changeLegend = item => {
@@ -113,24 +121,17 @@
 </script>
 
 <style lang="scss">
-.lengendPage {
+.lengendPageHM {
   position: absolute;
-  left: 500px;
-  bottom: 60px;
+  left: 480px;
+  bottom: 63px;
   z-index: 205;
-  // background: red;
   width: 347px;
   height: 554px;
-  overflow-x: hidden;
-  overflow-y: auto;
-  .publicLegend {
-    width: 347px;
-    height: 654px;
-    background: #003b6d;
-    // border: 1px solid #6acefe;
+  background: #003b6d;
+  .publicLegendHM {
     opacity: 0.8;
     .legendTitle {
-      width: 345px;
       height: 46px;
       position: absolute;
       top: 1px;
@@ -144,12 +145,14 @@
       }
     }
     .legendContent {
+      width: 100%;
       position: absolute;
-      width: 345px;
+      height: 500px;
+      overflow-x: hidden;
+      overflow-y: auto;
       top: 47px;
       .titleB {
-        margin-top: 20px;
-        margin-bottom: 20px;
+        margin: 10px 0px 10px 20px;
         display: flex;
         height: 17px;
         font-family: Source Han Sans CN;
@@ -180,7 +183,7 @@
           align-items: center;
           cursor: pointer;
           .partItem {
-            margin-left: 47px;
+            margin-left: 20px;
             display: flex;
             width: 180px;
             &:hover {
diff --git a/src/views/sponeScreen/waterFlood/equipMonitor.vue b/src/views/sponeScreen/waterFlood/equipMonitor.vue
new file mode 100644
index 0000000..67b024f
--- /dev/null
+++ b/src/views/sponeScreen/waterFlood/equipMonitor.vue
@@ -0,0 +1,19 @@
+<template>
+  <!-- 监测设备 -->
+  <div class="equipJCPage">
+    <div class="partTitleHM">监测设备</div>
+    <div class="partContHM">监测设备</div>
+  </div>
+</template>
+
+<script setup>
+const { proxy } = getCurrentInstance();
+
+onMounted(() => {});
+</script>
+
+<style lang="scss" scoped>
+.equipJCPage {
+  width: 100%;
+}
+</style>
diff --git a/src/views/sponeScreen/waterFlood/floodWZ.vue b/src/views/sponeScreen/waterFlood/floodWZ.vue
new file mode 100644
index 0000000..8ceb1f2
--- /dev/null
+++ b/src/views/sponeScreen/waterFlood/floodWZ.vue
@@ -0,0 +1,19 @@
+<template>
+  <!-- 防汛物资 -->
+  <div class="floodWZPage">
+    <div class="partTitleHM">防汛物资</div>
+    <div class="partContHM">防汛物资3333332</div>
+  </div>
+</template>
+
+<script setup>
+const { proxy } = getCurrentInstance();
+
+onMounted(() => {});
+</script>
+
+<style lang="scss" scoped>
+.floodWZPage {
+  width: 100%;
+}
+</style>
diff --git a/src/views/sponeScreen/waterFlood/index.vue b/src/views/sponeScreen/waterFlood/index.vue
index 4df5058..ee65cf4 100644
--- a/src/views/sponeScreen/waterFlood/index.vue
+++ b/src/views/sponeScreen/waterFlood/index.vue
@@ -1,9 +1,35 @@
 <template>
   <!-- 海绵综合一张图 排水防涝 -->
-  <div class="publicContainer">排水防涝</div>
+  <div class="oneMapPSFL">
+    <!-- 左侧 -->
+    <div class="publicLeftHM">
+      <!-- 降雨日历 -->
+      <CaldarRain></CaldarRain>
+
+      <!-- 降雨报告 -->
+      <ReportRain></ReportRain>
+
+      <!-- 防汛物资 -->
+      <FloodWZ></FloodWZ>
+    </div>
+    <!-- 右侧 -->
+    <div class="publicRightHM">
+      <!-- 泵站运行监控 -->
+      <MonitorBZ></MonitorBZ>
+
+      <!-- 监测设备 -->
+      <MonitorEquip></MonitorEquip>
+    </div>
+  </div>
 </template>
 
 <script setup>
+import CaldarRain from '@/views/sponeScreen/WaterFlood/rainCaldar.vue'; //降雨日历
+import ReportRain from '@/views/sponeScreen/WaterFlood/rainReport.vue'; //降雨报告
+import FloodWZ from '@/views/sponeScreen/WaterFlood/floodWZ.vue'; //防汛物资
+import MonitorBZ from '@/views/sponeScreen/WaterFlood/pumpMonitor.vue'; //泵站运行监控
+import MonitorEquip from '@/views/sponeScreen/WaterFlood/equipMonitor.vue'; //监测设备
+
 const { proxy } = getCurrentInstance();
 
 onMounted(() => {});

diff --git a/src/assets/newImgs/HMScreen/partBg.png b/src/assets/newImgs/HMScreen/partBg.png
index 7219105..0b8959a 100644
--- a/src/assets/newImgs/HMScreen/partBg.png
+++ b/src/assets/newImgs/HMScreen/partBg.png
Binary files differ
diff --git a/src/views/sponeScreen/Echarts/RainfallEcharts.vue b/src/views/sponeScreen/Echarts/RainfallEcharts.vue
index 2fbaaec..8c4b9e2 100644
--- a/src/views/sponeScreen/Echarts/RainfallEcharts.vue
+++ b/src/views/sponeScreen/Echarts/RainfallEcharts.vue
@@ -4,7 +4,7 @@
 <script>
 import * as echarts from 'echarts';
 import { guid } from '@/utils/ruoyi';
-import { reactive, toRefs, onMounted, watch } from 'vue';
+import { reactive, toRefs, onMounted, watch, onUnmounted } from 'vue';
 export default {
   name: 'line-chart',
   props: {
@@ -17,6 +17,7 @@
       legend: [],
       id: guid(),
       chart: null,
+      timer: null,
     });
     const resizeTheChart = () => {
       if (allData.chart) {
@@ -177,18 +178,16 @@
             barGap: '10%', // Make series be overlap
             barCateGoryGap: '10%',
             itemStyle: {
-              normal: {
-                color: new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [
-                  {
-                    offset: 0,
-                    color: 'rgba(24, 255, 255, 1)',
-                  },
-                  {
-                    offset: 1,
-                    color: 'rgba(188, 255, 255, 1)',
-                  },
-                ]),
-              },
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [
+                {
+                  offset: 0,
+                  color: 'rgba(24, 255, 255, 1)',
+                },
+                {
+                  offset: 1,
+                  color: 'rgba(188, 255, 255, 1)',
+                },
+              ]),
             },
             data: props.data.yAxis,
           },
@@ -204,23 +203,41 @@
       };
       option && chartDom.setOption(option, true);
       allData.chart = chartDom;
+      animateChart();
     };
     watch(
       () => props.refresh,
       () => {
-        if (allData.chartDom) {
-          allData.chartDom.dispose();
-          allData.chartDom = null;
+        if (allData.chart) {
+          allData.chart.dispose();
+          allData.chart = null;
         }
         setTimeout(() => {
           init();
         }, 0);
       }
     );
+    // echarts动画
+    function animateChart() {
+      let length = props.data.xAxis.length;
+      let i = 0;
+      allData.timer = setInterval(() => {
+        i++;
+        if (i == length) i = 0;
+        allData.chart.dispatchAction({
+          type: 'showTip',
+          seriesIndex: 0,
+          dataIndex: i,
+        });
+      }, 1500);
+    }
     onMounted(() => {
       init();
       window.addEventListener('resize', resizeTheChart);
     });
+    onUnmounted(() => {
+      if (allData.timer) clearInterval(allData.timer);
+    });
     return {
       ...toRefs(allData),
       resizeTheChart,
diff --git a/src/views/sponeScreen/Echarts/RainfallLegend.vue b/src/views/sponeScreen/Echarts/RainfallLegend.vue
index f6069cc..1c83534 100644
--- a/src/views/sponeScreen/Echarts/RainfallLegend.vue
+++ b/src/views/sponeScreen/Echarts/RainfallLegend.vue
@@ -31,6 +31,7 @@
       var option;
       option = {
         // backgroundColor: '#0e2147',
+        color: ['#3FFFC2'],
         grid: {
           //   left: '5%',
           top: '10%',
@@ -132,12 +133,9 @@
             name: '降雨量',
             type: 'line',
             data: props.data.data1,
-
             itemStyle: {
-              normal: {
-                borderWidth: 5,
-                // color: '#0696f9',
-              },
+              borderWidth: 5,
+              // color: '#0696f9',
             },
           },
           {
@@ -153,11 +151,9 @@
               symbolSize: 15,
             },
             lineStyle: {
-              normal: {
-                width: 1,
-                opacity: 0.6,
-                curveness: 0.2,
-              },
+              width: 1,
+              opacity: 0.6,
+              curveness: 0.2,
             },
             data: props.data.data,
           },
diff --git a/src/views/sponeScreen/Echarts/tslyqk_constituent_3d.vue b/src/views/sponeScreen/Echarts/tslyqk_constituent_3d.vue
index 2b72b45..b61a344 100644
--- a/src/views/sponeScreen/Echarts/tslyqk_constituent_3d.vue
+++ b/src/views/sponeScreen/Echarts/tslyqk_constituent_3d.vue
@@ -9,6 +9,8 @@
 import * as echarts from 'echarts';
 const { proxy } = getCurrentInstance();
 
+const myChart = ref(null);
+
 // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
 function getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
   // 计算
@@ -147,8 +149,8 @@
       show: false,
     },
     itemStyle: {
-      opacity: 0.1,
-      color: '#E1E8EC',
+      opacity: 0.9,
+      color: '#296E99',
     },
     parametricEquation: {
       u: {
@@ -182,13 +184,13 @@
       show: false,
     },
     itemStyle: {
-      opacity: 0.1,
-      color: '#E1E8EC',
+      opacity: 0.2,
+      color: '#215983',
     },
     parametricEquation: {
       u: {
         min: 0,
-        max: Math.PI * 2,
+        max: Math.PI * 3,
         step: Math.PI / 20,
       },
       v: {
@@ -197,10 +199,10 @@
         step: Math.PI / 20,
       },
       x: function (u, v) {
-        return ((Math.sin(v) * Math.sin(u) + Math.sin(u)) / Math.PI) * 2;
+        return ((Math.sin(v) * Math.sin(u) + Math.sin(u)) / Math.PI) * 3;
       },
       y: function (u, v) {
-        return ((Math.sin(v) * Math.cos(u) + Math.cos(u)) / Math.PI) * 2;
+        return ((Math.sin(v) * Math.cos(u) + Math.cos(u)) / Math.PI) * 3;
       },
       z: function (u, v) {
         return Math.cos(v) > 0 ? -5 : -7;
@@ -215,8 +217,8 @@
       show: false,
     },
     itemStyle: {
-      opacity: 0.1,
-      color: '#E1E8EC',
+      opacity: 1,
+      color: '#25719D',
     },
     parametricEquation: {
       u: {
@@ -230,10 +232,10 @@
         step: Math.PI / 20,
       },
       x: function (u, v) {
-        return ((Math.sin(v) * Math.sin(u) + Math.sin(u)) / Math.PI) * 2.2;
+        return ((Math.sin(v) * Math.sin(u) + Math.sin(u)) / Math.PI) * 2.5;
       },
       y: function (u, v) {
-        return ((Math.sin(v) * Math.cos(u) + Math.cos(u)) / Math.PI) * 2.2;
+        return ((Math.sin(v) * Math.cos(u) + Math.cos(u)) / Math.PI) * 2.5;
       },
       z: function (u, v) {
         return Math.cos(v) > 0 ? -7 : -7;
@@ -258,12 +260,13 @@
     legend: {
       orient: 'vertical',
       icon: 'circle',
-      right: '5%',
-      top: '20%',
+      right: '3%',
+      top: '22%',
       show: true,
       itemGap: 10,
       textStyle: {
         color: '#A1E2FF',
+        fontSize: 14,
       },
       // icon:'diamond',
       data: legendData,
@@ -290,12 +293,11 @@
         // zoomSensitivity: 100,
         // panSensitivity: 100,
       },
-      top: '5%',
+      top: '0%',
       left: 'left',
-      width: '70%',
-      //   heigth: '50%',
+      width: '60%',
       show: false,
-      boxHeight: 20,
+      boxHeight: 50,
     },
     series: series,
   };
@@ -306,52 +308,59 @@
 const initEcharts = () => {
   const optionData = [
     {
-      name: '草(0.4%)',
-      value: 0.4,
+      name: '草(17.4k㎡,0.4%)',
+      value: 17.4,
       itemStyle: {
-        color: '#FFED52',
+        color: '#E7EA39',
       },
     },
     {
-      name: '田 (83.3%)',
-      value: 83.3,
+      name: '田 (4051.55k㎡,83.3%)',
+      value: 4051.55,
       itemStyle: {
-        color: '#FF8E5B',
+        color: '#E89668',
       },
     },
     {
-      name: '林 (11.4%)',
-      value: 11.4,
+      name: '林 (553.89k㎡,11.4%)',
+      value: 553.89,
       itemStyle: {
-        color: '#D956FF',
+        color: '#D863F4',
       },
     },
     {
-      name: '湖 (1.6%)',
-      value: 1.6,
+      name: '湖 (78.54k㎡,1.6%)',
+      value: 78.54,
       itemStyle: {
-        color: '#18FFFF',
+        color: '#03BABB',
       },
     },
     {
-      name: '水 (3.4%)',
-      value: 3.4,
+      name: '水 (165.05k㎡,3.4%)',
+      value: 165.05,
       itemStyle: {
-        color: '#4CC1FF',
+        color: '#3EB4F1',
       },
     },
   ];
   // 生成配置选项
   const option = getPie3D(optionData, 0.59);
-  //   const myChart = proxy.echarts.init(proxy.$refs.echarts);
-  const myChart = echarts.init(proxy.$refs.echarts3D);
+  myChart.value = echarts.init(proxy.$refs.echarts3D);
 
   // 绘制图形
-  myChart.setOption(option);
+  myChart.value.setOption(option);
 };
 
+//自适应
+function resizeTheChart() {
+  if (myChart.value) {
+    myChart.value.resize();
+  }
+}
+
 onMounted(() => {
   initEcharts();
+  window.addEventListener('resize', resizeTheChart);
 });
 </script>
 
diff --git a/src/views/sponeScreen/HaiMianScreen/index.vue b/src/views/sponeScreen/HaiMianScreen/index.vue
index 96efdfd..3702b26 100644
--- a/src/views/sponeScreen/HaiMianScreen/index.vue
+++ b/src/views/sponeScreen/HaiMianScreen/index.vue
@@ -2,13 +2,13 @@
   <!-- 海绵综合一张图首页 -->
   <div class="hmMainPage">
     <!-- 地图 -->
-    <GisMapMF></GisMapMF>
+    <!-- <GisMapMF></GisMapMF> -->
 
     <!-- 图例 -->
-    <Legend :showLegend="showLegend"></Legend>
+    <Legend :showLegend="showLegend" :class="['animate__animated', showPanel ? 'animate__fadeOutDown' : '']"></Legend>
 
     <!-- 控制面板按钮 -->
-    <div class="controlHM">
+    <div class="controlHM" :style="{ right: showPanel ? '30px' : '520px' }" v-if="menuIndex != 3">
       <img src="@/assets/newImgs/HMScreen/iconLegend.png" alt="" title="图例控制" @click="controlLegend" />
       <img src="@/assets/newImgs/HMScreen/iconPane.png" alt="" title="展开收起" @click="controlPanel" />
     </div>
@@ -62,7 +62,7 @@
   { name: '长效运维', id: 5 },
 ]);
 const menuIndex = ref(1);
-const showPanel = ref(true);
+const showPanel = ref(false);
 const showLegend = ref(false);
 
 // 跳转业务系统
@@ -154,7 +154,6 @@
   }
   .controlHM {
     position: absolute;
-    right: 500px;
     bottom: 50px;
     z-index: 220;
     width: 32px;
@@ -169,7 +168,7 @@
     position: absolute;
     bottom: 0px;
     left: 0px;
-    z-index: 220;
+    z-index: 180;
     width: 1920px;
     height: 100px;
     background: url('@/assets/newImgs/HMScreen/bottom_img .png') no-repeat;
diff --git a/src/views/sponeScreen/chengguanweiScreen/mainIndex.vue b/src/views/sponeScreen/chengguanweiScreen/mainIndex.vue
index d39f58e..edfadd6 100644
--- a/src/views/sponeScreen/chengguanweiScreen/mainIndex.vue
+++ b/src/views/sponeScreen/chengguanweiScreen/mainIndex.vue
@@ -2,10 +2,11 @@
   <!-- 3800*866 城管委-->
   <div class="cgwFivthScreen">
     3800*866 城管委
+    <img src="@/assets/newImgs/HMScreen/main.png" alt="" title="跳转业务系统" class="mainYW" @click="goSystem" />
     <!-- 地图 -->
     <GisMapMF></GisMapMF>
     <!-- 图例 -->
-    <Legend></Legend>
+    <!-- <Legend></Legend> -->
   </div>
 </template>
 
@@ -14,6 +15,11 @@
 import Legend from '@/views/sponeScreen/gisMF/legendKF.vue';
 const { proxy } = getCurrentInstance();
 
+// 跳转业务系统
+function goSystem() {
+  router.push({ path: '/index' });
+}
+
 onMounted(() => {});
 </script>
 
@@ -25,5 +31,11 @@
   background: #010e22;
   overflow: auto;
   position: relative;
+  .mainYW {
+    width: 50px;
+    height: 44px;
+    cursor: pointer;
+    margin: 10px 10px 0px 30px;
+  }
 }
 </style>
diff --git a/src/views/sponeScreen/cityGK/headHMAimg.vue b/src/views/sponeScreen/cityGK/headHMAimg.vue
index 0c014b9..aa99c96 100644
--- a/src/views/sponeScreen/cityGK/headHMAimg.vue
+++ b/src/views/sponeScreen/cityGK/headHMAimg.vue
@@ -26,7 +26,7 @@
     </div>
     <div class="three">
       <div class="PhotoClass">
-        <div class="PhotoClassA"></div>
+        <div class="PhotoClassA" style="opacity: 0.3"></div>
       </div>
       <div class="Selectiontime">
         <div class="SelectiontimeA">评估期</div>
@@ -38,7 +38,7 @@
     </div>
     <div class="four">
       <div class="PhotoClass">
-        <div class="PhotoClassA"></div>
+        <div class="PhotoClassA" style="opacity: 0.3"></div>
       </div>
       <div class="Selectiontime">
         <div class="SelectiontimeA">长效运维期</div>
diff --git a/src/views/sponeScreen/cityGK/index.vue b/src/views/sponeScreen/cityGK/index.vue
index 5a9f820..ec0f660 100644
--- a/src/views/sponeScreen/cityGK/index.vue
+++ b/src/views/sponeScreen/cityGK/index.vue
@@ -1,7 +1,7 @@
 <template>
   <!-- 海绵综合一张图 城市概况 -->
   <div class="cityPage">
-    <div class="publicLeftHM">
+    <div :class="['publicLeftHM', 'animate__animated', showPanel ? 'animate__fadeOutLeft' : 'animate__fadeInLeft']">
       <!-- 自然地理 -->
       <div class="partTitleHM">自然地理</div>
       <div class="partContHM">
@@ -46,11 +46,11 @@
     </div>
 
     <!-- 头部 -->
-    <div class="headHMA">
+    <div :class="['headHMA', 'animate__animated', showPanel ? 'animate__fadeOutUp' : 'animate__fadeInDown']">
       <headHMAimg></headHMAimg>
     </div>
 
-    <div class="publicRightHM">
+    <div :class="['publicRightHM', 'animate__animated', showPanel ? 'animate__fadeOutRight' : 'animate__fadeInRight']">
       <!-- 城市规划 -->
       <cityplanning></cityplanning>
 
@@ -68,6 +68,7 @@
 import headHMAimg from '@/views/sponeScreen/cityGK/headHMAimg.vue'; //头部
 
 const { proxy } = getCurrentInstance();
+const showPanel = ref(true); //面板展开收起
 const policiesList = ref([
   {
     name: '一心',
@@ -105,6 +106,7 @@
   () => props.showPanel,
   () => {
     console.log('val---', props.showPanel);
+    showPanel.value = props.showPanel;
   },
   { immediate: true }
 );
diff --git a/src/views/sponeScreen/cityGK/rainfall.vue b/src/views/sponeScreen/cityGK/rainfall.vue
index c3f2b38..61a80fb 100644
--- a/src/views/sponeScreen/cityGK/rainfall.vue
+++ b/src/views/sponeScreen/cityGK/rainfall.vue
@@ -84,7 +84,7 @@
 .HeadContent {
   width: 100%;
   height: 30px;
-  background: #2270ff;
+  background: rgba(34, 112, 255, 0.4);
   text-align: center;
   line-height: 30px;
   color: #ffffff;
diff --git a/src/views/sponeScreen/evaluationKH/index.vue b/src/views/sponeScreen/evaluationKH/index.vue
index 2f66628..5d473df 100644
--- a/src/views/sponeScreen/evaluationKH/index.vue
+++ b/src/views/sponeScreen/evaluationKH/index.vue
@@ -1,9 +1,12 @@
 <template>
   <!-- 海绵综合一张图 考核评估 -->
-  <div class="publicContainer">考核评估</div>
+  <div class="oneMapKHPG">
+    <KHPGHM></KHPGHM>
+  </div>
 </template>
 
 <script setup>
+import KHPGHM from '@/views/spongePerformance/mainIndex/index.vue'; //业务系统考核首页
 const { proxy } = getCurrentInstance();
 
 onMounted(() => {});
diff --git a/src/views/sponeScreen/gisMF/legendKF.vue b/src/views/sponeScreen/gisMF/legendKF.vue
index 23e5a62..88a4185 100644
--- a/src/views/sponeScreen/gisMF/legendKF.vue
+++ b/src/views/sponeScreen/gisMF/legendKF.vue
@@ -1,19 +1,14 @@
 <template>
   <!-- 海绵综合一张图图例 -->
-  <div class="lengendPage">
+  <div :class="['lengendPageHM', 'animate__animated', showLegend ? 'animate__fadeInUp' : 'animate__fadeOutDown']" v-if="showLegend">
     <!-- 图例框 -->
-    <div class="publicLegend">
+    <div class="publicLegendHM">
       <div class="legendTitle">
         <div class="legendName">图层控制</div>
       </div>
       <div class="legendContent">
         <div v-for="item in legendList" :key="item.layername" style="width: 100%">
           <div class="titleB" @click="changeAllLegend(item)">
-            <div class="iconImg">
-              <el-icon v-if="item.isCheck" size="18">
-                <Check />
-              </el-icon>
-            </div>
             {{ item.title }}
           </div>
           <div class="legendItemContent">
@@ -41,17 +36,30 @@
 import changeMapStyle from './changeMapStyle.js';
 import topography from '@/assets/newImgs/topography.png';
 import cesiumPaiShuiArea from './cesiumPaiShuiArea.js';
+
 const { proxy } = getCurrentInstance();
 const legendList = ref([]);
-const ifExpand = ref(true);
-// 展开收起
-const changeZhan = () => {
-  ifExpand.value = !ifExpand.value;
-};
+const showLegend = ref(false);
+
+// 面板内容展开收起控制
+const props = defineProps({
+  showLegend: {
+    type: Boolean,
+  },
+});
+watch(
+  () => props.showLegend,
+  () => {
+    console.log('showLegend---', props.showLegend);
+    showLegend.value = props.showLegend;
+  },
+  { immediate: true }
+);
+
 //图例一级标题点击
 const changeAllLegend = item => {
   console.log('item---', item);
-  item.isCheck = !item.isCheck;
+  // item.isCheck = !item.isCheck;
 };
 //图例点击
 const changeLegend = item => {
@@ -113,24 +121,17 @@
 </script>
 
 <style lang="scss">
-.lengendPage {
+.lengendPageHM {
   position: absolute;
-  left: 500px;
-  bottom: 60px;
+  left: 480px;
+  bottom: 63px;
   z-index: 205;
-  // background: red;
   width: 347px;
   height: 554px;
-  overflow-x: hidden;
-  overflow-y: auto;
-  .publicLegend {
-    width: 347px;
-    height: 654px;
-    background: #003b6d;
-    // border: 1px solid #6acefe;
+  background: #003b6d;
+  .publicLegendHM {
     opacity: 0.8;
     .legendTitle {
-      width: 345px;
       height: 46px;
       position: absolute;
       top: 1px;
@@ -144,12 +145,14 @@
       }
     }
     .legendContent {
+      width: 100%;
       position: absolute;
-      width: 345px;
+      height: 500px;
+      overflow-x: hidden;
+      overflow-y: auto;
       top: 47px;
       .titleB {
-        margin-top: 20px;
-        margin-bottom: 20px;
+        margin: 10px 0px 10px 20px;
         display: flex;
         height: 17px;
         font-family: Source Han Sans CN;
@@ -180,7 +183,7 @@
           align-items: center;
           cursor: pointer;
           .partItem {
-            margin-left: 47px;
+            margin-left: 20px;
             display: flex;
             width: 180px;
             &:hover {
diff --git a/src/views/sponeScreen/waterFlood/equipMonitor.vue b/src/views/sponeScreen/waterFlood/equipMonitor.vue
new file mode 100644
index 0000000..67b024f
--- /dev/null
+++ b/src/views/sponeScreen/waterFlood/equipMonitor.vue
@@ -0,0 +1,19 @@
+<template>
+  <!-- 监测设备 -->
+  <div class="equipJCPage">
+    <div class="partTitleHM">监测设备</div>
+    <div class="partContHM">监测设备</div>
+  </div>
+</template>
+
+<script setup>
+const { proxy } = getCurrentInstance();
+
+onMounted(() => {});
+</script>
+
+<style lang="scss" scoped>
+.equipJCPage {
+  width: 100%;
+}
+</style>
diff --git a/src/views/sponeScreen/waterFlood/floodWZ.vue b/src/views/sponeScreen/waterFlood/floodWZ.vue
new file mode 100644
index 0000000..8ceb1f2
--- /dev/null
+++ b/src/views/sponeScreen/waterFlood/floodWZ.vue
@@ -0,0 +1,19 @@
+<template>
+  <!-- 防汛物资 -->
+  <div class="floodWZPage">
+    <div class="partTitleHM">防汛物资</div>
+    <div class="partContHM">防汛物资3333332</div>
+  </div>
+</template>
+
+<script setup>
+const { proxy } = getCurrentInstance();
+
+onMounted(() => {});
+</script>
+
+<style lang="scss" scoped>
+.floodWZPage {
+  width: 100%;
+}
+</style>
diff --git a/src/views/sponeScreen/waterFlood/index.vue b/src/views/sponeScreen/waterFlood/index.vue
index 4df5058..ee65cf4 100644
--- a/src/views/sponeScreen/waterFlood/index.vue
+++ b/src/views/sponeScreen/waterFlood/index.vue
@@ -1,9 +1,35 @@
 <template>
   <!-- 海绵综合一张图 排水防涝 -->
-  <div class="publicContainer">排水防涝</div>
+  <div class="oneMapPSFL">
+    <!-- 左侧 -->
+    <div class="publicLeftHM">
+      <!-- 降雨日历 -->
+      <CaldarRain></CaldarRain>
+
+      <!-- 降雨报告 -->
+      <ReportRain></ReportRain>
+
+      <!-- 防汛物资 -->
+      <FloodWZ></FloodWZ>
+    </div>
+    <!-- 右侧 -->
+    <div class="publicRightHM">
+      <!-- 泵站运行监控 -->
+      <MonitorBZ></MonitorBZ>
+
+      <!-- 监测设备 -->
+      <MonitorEquip></MonitorEquip>
+    </div>
+  </div>
 </template>
 
 <script setup>
+import CaldarRain from '@/views/sponeScreen/WaterFlood/rainCaldar.vue'; //降雨日历
+import ReportRain from '@/views/sponeScreen/WaterFlood/rainReport.vue'; //降雨报告
+import FloodWZ from '@/views/sponeScreen/WaterFlood/floodWZ.vue'; //防汛物资
+import MonitorBZ from '@/views/sponeScreen/WaterFlood/pumpMonitor.vue'; //泵站运行监控
+import MonitorEquip from '@/views/sponeScreen/WaterFlood/equipMonitor.vue'; //监测设备
+
 const { proxy } = getCurrentInstance();
 
 onMounted(() => {});
diff --git a/src/views/sponeScreen/waterFlood/pumpMonitor.vue b/src/views/sponeScreen/waterFlood/pumpMonitor.vue
new file mode 100644
index 0000000..812f3c4
--- /dev/null
+++ b/src/views/sponeScreen/waterFlood/pumpMonitor.vue
@@ -0,0 +1,19 @@
+<template>
+  <!-- 泵站运行监控 -->
+  <div class="pumpJKPage">
+    <div class="partTitleHM">泵站运行监控</div>
+    <div class="partContHM">泵站运行监控</div>
+  </div>
+</template>
+
+<script setup>
+const { proxy } = getCurrentInstance();
+
+onMounted(() => {});
+</script>
+
+<style lang="scss" scoped>
+.pumpJKPage {
+  width: 100%;
+}
+</style>

diff --git a/src/assets/newImgs/HMScreen/partBg.png b/src/assets/newImgs/HMScreen/partBg.png
index 7219105..0b8959a 100644
--- a/src/assets/newImgs/HMScreen/partBg.png
+++ b/src/assets/newImgs/HMScreen/partBg.png
Binary files differ
diff --git a/src/views/sponeScreen/Echarts/RainfallEcharts.vue b/src/views/sponeScreen/Echarts/RainfallEcharts.vue
index 2fbaaec..8c4b9e2 100644
--- a/src/views/sponeScreen/Echarts/RainfallEcharts.vue
+++ b/src/views/sponeScreen/Echarts/RainfallEcharts.vue
@@ -4,7 +4,7 @@
 <script>
 import * as echarts from 'echarts';
 import { guid } from '@/utils/ruoyi';
-import { reactive, toRefs, onMounted, watch } from 'vue';
+import { reactive, toRefs, onMounted, watch, onUnmounted } from 'vue';
 export default {
   name: 'line-chart',
   props: {
@@ -17,6 +17,7 @@
       legend: [],
       id: guid(),
       chart: null,
+      timer: null,
     });
     const resizeTheChart = () => {
       if (allData.chart) {
@@ -177,18 +178,16 @@
             barGap: '10%', // Make series be overlap
             barCateGoryGap: '10%',
             itemStyle: {
-              normal: {
-                color: new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [
-                  {
-                    offset: 0,
-                    color: 'rgba(24, 255, 255, 1)',
-                  },
-                  {
-                    offset: 1,
-                    color: 'rgba(188, 255, 255, 1)',
-                  },
-                ]),
-              },
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [
+                {
+                  offset: 0,
+                  color: 'rgba(24, 255, 255, 1)',
+                },
+                {
+                  offset: 1,
+                  color: 'rgba(188, 255, 255, 1)',
+                },
+              ]),
             },
             data: props.data.yAxis,
           },
@@ -204,23 +203,41 @@
       };
       option && chartDom.setOption(option, true);
       allData.chart = chartDom;
+      animateChart();
     };
     watch(
       () => props.refresh,
       () => {
-        if (allData.chartDom) {
-          allData.chartDom.dispose();
-          allData.chartDom = null;
+        if (allData.chart) {
+          allData.chart.dispose();
+          allData.chart = null;
         }
         setTimeout(() => {
           init();
         }, 0);
       }
     );
+    // echarts动画
+    function animateChart() {
+      let length = props.data.xAxis.length;
+      let i = 0;
+      allData.timer = setInterval(() => {
+        i++;
+        if (i == length) i = 0;
+        allData.chart.dispatchAction({
+          type: 'showTip',
+          seriesIndex: 0,
+          dataIndex: i,
+        });
+      }, 1500);
+    }
     onMounted(() => {
       init();
       window.addEventListener('resize', resizeTheChart);
     });
+    onUnmounted(() => {
+      if (allData.timer) clearInterval(allData.timer);
+    });
     return {
       ...toRefs(allData),
       resizeTheChart,
diff --git a/src/views/sponeScreen/Echarts/RainfallLegend.vue b/src/views/sponeScreen/Echarts/RainfallLegend.vue
index f6069cc..1c83534 100644
--- a/src/views/sponeScreen/Echarts/RainfallLegend.vue
+++ b/src/views/sponeScreen/Echarts/RainfallLegend.vue
@@ -31,6 +31,7 @@
       var option;
       option = {
         // backgroundColor: '#0e2147',
+        color: ['#3FFFC2'],
         grid: {
           //   left: '5%',
           top: '10%',
@@ -132,12 +133,9 @@
             name: '降雨量',
             type: 'line',
             data: props.data.data1,
-
             itemStyle: {
-              normal: {
-                borderWidth: 5,
-                // color: '#0696f9',
-              },
+              borderWidth: 5,
+              // color: '#0696f9',
             },
           },
           {
@@ -153,11 +151,9 @@
               symbolSize: 15,
             },
             lineStyle: {
-              normal: {
-                width: 1,
-                opacity: 0.6,
-                curveness: 0.2,
-              },
+              width: 1,
+              opacity: 0.6,
+              curveness: 0.2,
             },
             data: props.data.data,
           },
diff --git a/src/views/sponeScreen/Echarts/tslyqk_constituent_3d.vue b/src/views/sponeScreen/Echarts/tslyqk_constituent_3d.vue
index 2b72b45..b61a344 100644
--- a/src/views/sponeScreen/Echarts/tslyqk_constituent_3d.vue
+++ b/src/views/sponeScreen/Echarts/tslyqk_constituent_3d.vue
@@ -9,6 +9,8 @@
 import * as echarts from 'echarts';
 const { proxy } = getCurrentInstance();
 
+const myChart = ref(null);
+
 // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
 function getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
   // 计算
@@ -147,8 +149,8 @@
       show: false,
     },
     itemStyle: {
-      opacity: 0.1,
-      color: '#E1E8EC',
+      opacity: 0.9,
+      color: '#296E99',
     },
     parametricEquation: {
       u: {
@@ -182,13 +184,13 @@
       show: false,
     },
     itemStyle: {
-      opacity: 0.1,
-      color: '#E1E8EC',
+      opacity: 0.2,
+      color: '#215983',
     },
     parametricEquation: {
       u: {
         min: 0,
-        max: Math.PI * 2,
+        max: Math.PI * 3,
         step: Math.PI / 20,
       },
       v: {
@@ -197,10 +199,10 @@
         step: Math.PI / 20,
       },
       x: function (u, v) {
-        return ((Math.sin(v) * Math.sin(u) + Math.sin(u)) / Math.PI) * 2;
+        return ((Math.sin(v) * Math.sin(u) + Math.sin(u)) / Math.PI) * 3;
       },
       y: function (u, v) {
-        return ((Math.sin(v) * Math.cos(u) + Math.cos(u)) / Math.PI) * 2;
+        return ((Math.sin(v) * Math.cos(u) + Math.cos(u)) / Math.PI) * 3;
       },
       z: function (u, v) {
         return Math.cos(v) > 0 ? -5 : -7;
@@ -215,8 +217,8 @@
       show: false,
     },
     itemStyle: {
-      opacity: 0.1,
-      color: '#E1E8EC',
+      opacity: 1,
+      color: '#25719D',
     },
     parametricEquation: {
       u: {
@@ -230,10 +232,10 @@
         step: Math.PI / 20,
       },
       x: function (u, v) {
-        return ((Math.sin(v) * Math.sin(u) + Math.sin(u)) / Math.PI) * 2.2;
+        return ((Math.sin(v) * Math.sin(u) + Math.sin(u)) / Math.PI) * 2.5;
       },
       y: function (u, v) {
-        return ((Math.sin(v) * Math.cos(u) + Math.cos(u)) / Math.PI) * 2.2;
+        return ((Math.sin(v) * Math.cos(u) + Math.cos(u)) / Math.PI) * 2.5;
       },
       z: function (u, v) {
         return Math.cos(v) > 0 ? -7 : -7;
@@ -258,12 +260,13 @@
     legend: {
       orient: 'vertical',
       icon: 'circle',
-      right: '5%',
-      top: '20%',
+      right: '3%',
+      top: '22%',
       show: true,
       itemGap: 10,
       textStyle: {
         color: '#A1E2FF',
+        fontSize: 14,
       },
       // icon:'diamond',
       data: legendData,
@@ -290,12 +293,11 @@
         // zoomSensitivity: 100,
         // panSensitivity: 100,
       },
-      top: '5%',
+      top: '0%',
       left: 'left',
-      width: '70%',
-      //   heigth: '50%',
+      width: '60%',
       show: false,
-      boxHeight: 20,
+      boxHeight: 50,
     },
     series: series,
   };
@@ -306,52 +308,59 @@
 const initEcharts = () => {
   const optionData = [
     {
-      name: '草(0.4%)',
-      value: 0.4,
+      name: '草(17.4k㎡,0.4%)',
+      value: 17.4,
       itemStyle: {
-        color: '#FFED52',
+        color: '#E7EA39',
       },
     },
     {
-      name: '田 (83.3%)',
-      value: 83.3,
+      name: '田 (4051.55k㎡,83.3%)',
+      value: 4051.55,
       itemStyle: {
-        color: '#FF8E5B',
+        color: '#E89668',
       },
     },
     {
-      name: '林 (11.4%)',
-      value: 11.4,
+      name: '林 (553.89k㎡,11.4%)',
+      value: 553.89,
       itemStyle: {
-        color: '#D956FF',
+        color: '#D863F4',
       },
     },
     {
-      name: '湖 (1.6%)',
-      value: 1.6,
+      name: '湖 (78.54k㎡,1.6%)',
+      value: 78.54,
       itemStyle: {
-        color: '#18FFFF',
+        color: '#03BABB',
       },
     },
     {
-      name: '水 (3.4%)',
-      value: 3.4,
+      name: '水 (165.05k㎡,3.4%)',
+      value: 165.05,
       itemStyle: {
-        color: '#4CC1FF',
+        color: '#3EB4F1',
       },
     },
   ];
   // 生成配置选项
   const option = getPie3D(optionData, 0.59);
-  //   const myChart = proxy.echarts.init(proxy.$refs.echarts);
-  const myChart = echarts.init(proxy.$refs.echarts3D);
+  myChart.value = echarts.init(proxy.$refs.echarts3D);
 
   // 绘制图形
-  myChart.setOption(option);
+  myChart.value.setOption(option);
 };
 
+//自适应
+function resizeTheChart() {
+  if (myChart.value) {
+    myChart.value.resize();
+  }
+}
+
 onMounted(() => {
   initEcharts();
+  window.addEventListener('resize', resizeTheChart);
 });
 </script>
 
diff --git a/src/views/sponeScreen/HaiMianScreen/index.vue b/src/views/sponeScreen/HaiMianScreen/index.vue
index 96efdfd..3702b26 100644
--- a/src/views/sponeScreen/HaiMianScreen/index.vue
+++ b/src/views/sponeScreen/HaiMianScreen/index.vue
@@ -2,13 +2,13 @@
   <!-- 海绵综合一张图首页 -->
   <div class="hmMainPage">
     <!-- 地图 -->
-    <GisMapMF></GisMapMF>
+    <!-- <GisMapMF></GisMapMF> -->
 
     <!-- 图例 -->
-    <Legend :showLegend="showLegend"></Legend>
+    <Legend :showLegend="showLegend" :class="['animate__animated', showPanel ? 'animate__fadeOutDown' : '']"></Legend>
 
     <!-- 控制面板按钮 -->
-    <div class="controlHM">
+    <div class="controlHM" :style="{ right: showPanel ? '30px' : '520px' }" v-if="menuIndex != 3">
       <img src="@/assets/newImgs/HMScreen/iconLegend.png" alt="" title="图例控制" @click="controlLegend" />
       <img src="@/assets/newImgs/HMScreen/iconPane.png" alt="" title="展开收起" @click="controlPanel" />
     </div>
@@ -62,7 +62,7 @@
   { name: '长效运维', id: 5 },
 ]);
 const menuIndex = ref(1);
-const showPanel = ref(true);
+const showPanel = ref(false);
 const showLegend = ref(false);
 
 // 跳转业务系统
@@ -154,7 +154,6 @@
   }
   .controlHM {
     position: absolute;
-    right: 500px;
     bottom: 50px;
     z-index: 220;
     width: 32px;
@@ -169,7 +168,7 @@
     position: absolute;
     bottom: 0px;
     left: 0px;
-    z-index: 220;
+    z-index: 180;
     width: 1920px;
     height: 100px;
     background: url('@/assets/newImgs/HMScreen/bottom_img .png') no-repeat;
diff --git a/src/views/sponeScreen/chengguanweiScreen/mainIndex.vue b/src/views/sponeScreen/chengguanweiScreen/mainIndex.vue
index d39f58e..edfadd6 100644
--- a/src/views/sponeScreen/chengguanweiScreen/mainIndex.vue
+++ b/src/views/sponeScreen/chengguanweiScreen/mainIndex.vue
@@ -2,10 +2,11 @@
   <!-- 3800*866 城管委-->
   <div class="cgwFivthScreen">
     3800*866 城管委
+    <img src="@/assets/newImgs/HMScreen/main.png" alt="" title="跳转业务系统" class="mainYW" @click="goSystem" />
     <!-- 地图 -->
     <GisMapMF></GisMapMF>
     <!-- 图例 -->
-    <Legend></Legend>
+    <!-- <Legend></Legend> -->
   </div>
 </template>
 
@@ -14,6 +15,11 @@
 import Legend from '@/views/sponeScreen/gisMF/legendKF.vue';
 const { proxy } = getCurrentInstance();
 
+// 跳转业务系统
+function goSystem() {
+  router.push({ path: '/index' });
+}
+
 onMounted(() => {});
 </script>
 
@@ -25,5 +31,11 @@
   background: #010e22;
   overflow: auto;
   position: relative;
+  .mainYW {
+    width: 50px;
+    height: 44px;
+    cursor: pointer;
+    margin: 10px 10px 0px 30px;
+  }
 }
 </style>
diff --git a/src/views/sponeScreen/cityGK/headHMAimg.vue b/src/views/sponeScreen/cityGK/headHMAimg.vue
index 0c014b9..aa99c96 100644
--- a/src/views/sponeScreen/cityGK/headHMAimg.vue
+++ b/src/views/sponeScreen/cityGK/headHMAimg.vue
@@ -26,7 +26,7 @@
     </div>
     <div class="three">
       <div class="PhotoClass">
-        <div class="PhotoClassA"></div>
+        <div class="PhotoClassA" style="opacity: 0.3"></div>
       </div>
       <div class="Selectiontime">
         <div class="SelectiontimeA">评估期</div>
@@ -38,7 +38,7 @@
     </div>
     <div class="four">
       <div class="PhotoClass">
-        <div class="PhotoClassA"></div>
+        <div class="PhotoClassA" style="opacity: 0.3"></div>
       </div>
       <div class="Selectiontime">
         <div class="SelectiontimeA">长效运维期</div>
diff --git a/src/views/sponeScreen/cityGK/index.vue b/src/views/sponeScreen/cityGK/index.vue
index 5a9f820..ec0f660 100644
--- a/src/views/sponeScreen/cityGK/index.vue
+++ b/src/views/sponeScreen/cityGK/index.vue
@@ -1,7 +1,7 @@
 <template>
   <!-- 海绵综合一张图 城市概况 -->
   <div class="cityPage">
-    <div class="publicLeftHM">
+    <div :class="['publicLeftHM', 'animate__animated', showPanel ? 'animate__fadeOutLeft' : 'animate__fadeInLeft']">
       <!-- 自然地理 -->
       <div class="partTitleHM">自然地理</div>
       <div class="partContHM">
@@ -46,11 +46,11 @@
     </div>
 
     <!-- 头部 -->
-    <div class="headHMA">
+    <div :class="['headHMA', 'animate__animated', showPanel ? 'animate__fadeOutUp' : 'animate__fadeInDown']">
       <headHMAimg></headHMAimg>
     </div>
 
-    <div class="publicRightHM">
+    <div :class="['publicRightHM', 'animate__animated', showPanel ? 'animate__fadeOutRight' : 'animate__fadeInRight']">
       <!-- 城市规划 -->
       <cityplanning></cityplanning>
 
@@ -68,6 +68,7 @@
 import headHMAimg from '@/views/sponeScreen/cityGK/headHMAimg.vue'; //头部
 
 const { proxy } = getCurrentInstance();
+const showPanel = ref(true); //面板展开收起
 const policiesList = ref([
   {
     name: '一心',
@@ -105,6 +106,7 @@
   () => props.showPanel,
   () => {
     console.log('val---', props.showPanel);
+    showPanel.value = props.showPanel;
   },
   { immediate: true }
 );
diff --git a/src/views/sponeScreen/cityGK/rainfall.vue b/src/views/sponeScreen/cityGK/rainfall.vue
index c3f2b38..61a80fb 100644
--- a/src/views/sponeScreen/cityGK/rainfall.vue
+++ b/src/views/sponeScreen/cityGK/rainfall.vue
@@ -84,7 +84,7 @@
 .HeadContent {
   width: 100%;
   height: 30px;
-  background: #2270ff;
+  background: rgba(34, 112, 255, 0.4);
   text-align: center;
   line-height: 30px;
   color: #ffffff;
diff --git a/src/views/sponeScreen/evaluationKH/index.vue b/src/views/sponeScreen/evaluationKH/index.vue
index 2f66628..5d473df 100644
--- a/src/views/sponeScreen/evaluationKH/index.vue
+++ b/src/views/sponeScreen/evaluationKH/index.vue
@@ -1,9 +1,12 @@
 <template>
   <!-- 海绵综合一张图 考核评估 -->
-  <div class="publicContainer">考核评估</div>
+  <div class="oneMapKHPG">
+    <KHPGHM></KHPGHM>
+  </div>
 </template>
 
 <script setup>
+import KHPGHM from '@/views/spongePerformance/mainIndex/index.vue'; //业务系统考核首页
 const { proxy } = getCurrentInstance();
 
 onMounted(() => {});
diff --git a/src/views/sponeScreen/gisMF/legendKF.vue b/src/views/sponeScreen/gisMF/legendKF.vue
index 23e5a62..88a4185 100644
--- a/src/views/sponeScreen/gisMF/legendKF.vue
+++ b/src/views/sponeScreen/gisMF/legendKF.vue
@@ -1,19 +1,14 @@
 <template>
   <!-- 海绵综合一张图图例 -->
-  <div class="lengendPage">
+  <div :class="['lengendPageHM', 'animate__animated', showLegend ? 'animate__fadeInUp' : 'animate__fadeOutDown']" v-if="showLegend">
     <!-- 图例框 -->
-    <div class="publicLegend">
+    <div class="publicLegendHM">
       <div class="legendTitle">
         <div class="legendName">图层控制</div>
       </div>
       <div class="legendContent">
         <div v-for="item in legendList" :key="item.layername" style="width: 100%">
           <div class="titleB" @click="changeAllLegend(item)">
-            <div class="iconImg">
-              <el-icon v-if="item.isCheck" size="18">
-                <Check />
-              </el-icon>
-            </div>
             {{ item.title }}
           </div>
           <div class="legendItemContent">
@@ -41,17 +36,30 @@
 import changeMapStyle from './changeMapStyle.js';
 import topography from '@/assets/newImgs/topography.png';
 import cesiumPaiShuiArea from './cesiumPaiShuiArea.js';
+
 const { proxy } = getCurrentInstance();
 const legendList = ref([]);
-const ifExpand = ref(true);
-// 展开收起
-const changeZhan = () => {
-  ifExpand.value = !ifExpand.value;
-};
+const showLegend = ref(false);
+
+// 面板内容展开收起控制
+const props = defineProps({
+  showLegend: {
+    type: Boolean,
+  },
+});
+watch(
+  () => props.showLegend,
+  () => {
+    console.log('showLegend---', props.showLegend);
+    showLegend.value = props.showLegend;
+  },
+  { immediate: true }
+);
+
 //图例一级标题点击
 const changeAllLegend = item => {
   console.log('item---', item);
-  item.isCheck = !item.isCheck;
+  // item.isCheck = !item.isCheck;
 };
 //图例点击
 const changeLegend = item => {
@@ -113,24 +121,17 @@
 </script>
 
 <style lang="scss">
-.lengendPage {
+.lengendPageHM {
   position: absolute;
-  left: 500px;
-  bottom: 60px;
+  left: 480px;
+  bottom: 63px;
   z-index: 205;
-  // background: red;
   width: 347px;
   height: 554px;
-  overflow-x: hidden;
-  overflow-y: auto;
-  .publicLegend {
-    width: 347px;
-    height: 654px;
-    background: #003b6d;
-    // border: 1px solid #6acefe;
+  background: #003b6d;
+  .publicLegendHM {
     opacity: 0.8;
     .legendTitle {
-      width: 345px;
       height: 46px;
       position: absolute;
       top: 1px;
@@ -144,12 +145,14 @@
       }
     }
     .legendContent {
+      width: 100%;
       position: absolute;
-      width: 345px;
+      height: 500px;
+      overflow-x: hidden;
+      overflow-y: auto;
       top: 47px;
       .titleB {
-        margin-top: 20px;
-        margin-bottom: 20px;
+        margin: 10px 0px 10px 20px;
         display: flex;
         height: 17px;
         font-family: Source Han Sans CN;
@@ -180,7 +183,7 @@
           align-items: center;
           cursor: pointer;
           .partItem {
-            margin-left: 47px;
+            margin-left: 20px;
             display: flex;
             width: 180px;
             &:hover {
diff --git a/src/views/sponeScreen/waterFlood/equipMonitor.vue b/src/views/sponeScreen/waterFlood/equipMonitor.vue
new file mode 100644
index 0000000..67b024f
--- /dev/null
+++ b/src/views/sponeScreen/waterFlood/equipMonitor.vue
@@ -0,0 +1,19 @@
+<template>
+  <!-- 监测设备 -->
+  <div class="equipJCPage">
+    <div class="partTitleHM">监测设备</div>
+    <div class="partContHM">监测设备</div>
+  </div>
+</template>
+
+<script setup>
+const { proxy } = getCurrentInstance();
+
+onMounted(() => {});
+</script>
+
+<style lang="scss" scoped>
+.equipJCPage {
+  width: 100%;
+}
+</style>
diff --git a/src/views/sponeScreen/waterFlood/floodWZ.vue b/src/views/sponeScreen/waterFlood/floodWZ.vue
new file mode 100644
index 0000000..8ceb1f2
--- /dev/null
+++ b/src/views/sponeScreen/waterFlood/floodWZ.vue
@@ -0,0 +1,19 @@
+<template>
+  <!-- 防汛物资 -->
+  <div class="floodWZPage">
+    <div class="partTitleHM">防汛物资</div>
+    <div class="partContHM">防汛物资3333332</div>
+  </div>
+</template>
+
+<script setup>
+const { proxy } = getCurrentInstance();
+
+onMounted(() => {});
+</script>
+
+<style lang="scss" scoped>
+.floodWZPage {
+  width: 100%;
+}
+</style>
diff --git a/src/views/sponeScreen/waterFlood/index.vue b/src/views/sponeScreen/waterFlood/index.vue
index 4df5058..ee65cf4 100644
--- a/src/views/sponeScreen/waterFlood/index.vue
+++ b/src/views/sponeScreen/waterFlood/index.vue
@@ -1,9 +1,35 @@
 <template>
   <!-- 海绵综合一张图 排水防涝 -->
-  <div class="publicContainer">排水防涝</div>
+  <div class="oneMapPSFL">
+    <!-- 左侧 -->
+    <div class="publicLeftHM">
+      <!-- 降雨日历 -->
+      <CaldarRain></CaldarRain>
+
+      <!-- 降雨报告 -->
+      <ReportRain></ReportRain>
+
+      <!-- 防汛物资 -->
+      <FloodWZ></FloodWZ>
+    </div>
+    <!-- 右侧 -->
+    <div class="publicRightHM">
+      <!-- 泵站运行监控 -->
+      <MonitorBZ></MonitorBZ>
+
+      <!-- 监测设备 -->
+      <MonitorEquip></MonitorEquip>
+    </div>
+  </div>
 </template>
 
 <script setup>
+import CaldarRain from '@/views/sponeScreen/WaterFlood/rainCaldar.vue'; //降雨日历
+import ReportRain from '@/views/sponeScreen/WaterFlood/rainReport.vue'; //降雨报告
+import FloodWZ from '@/views/sponeScreen/WaterFlood/floodWZ.vue'; //防汛物资
+import MonitorBZ from '@/views/sponeScreen/WaterFlood/pumpMonitor.vue'; //泵站运行监控
+import MonitorEquip from '@/views/sponeScreen/WaterFlood/equipMonitor.vue'; //监测设备
+
 const { proxy } = getCurrentInstance();
 
 onMounted(() => {});
diff --git a/src/views/sponeScreen/waterFlood/pumpMonitor.vue b/src/views/sponeScreen/waterFlood/pumpMonitor.vue
new file mode 100644
index 0000000..812f3c4
--- /dev/null
+++ b/src/views/sponeScreen/waterFlood/pumpMonitor.vue
@@ -0,0 +1,19 @@
+<template>
+  <!-- 泵站运行监控 -->
+  <div class="pumpJKPage">
+    <div class="partTitleHM">泵站运行监控</div>
+    <div class="partContHM">泵站运行监控</div>
+  </div>
+</template>
+
+<script setup>
+const { proxy } = getCurrentInstance();
+
+onMounted(() => {});
+</script>
+
+<style lang="scss" scoped>
+.pumpJKPage {
+  width: 100%;
+}
+</style>
diff --git a/src/views/sponeScreen/waterFlood/rainCaldar.vue b/src/views/sponeScreen/waterFlood/rainCaldar.vue
new file mode 100644
index 0000000..0900ade
--- /dev/null
+++ b/src/views/sponeScreen/waterFlood/rainCaldar.vue
@@ -0,0 +1,19 @@
+<template>
+  <!-- 降雨日历 -->
+  <div class="rainCaldarPage">
+    <div class="partTitleHM">降雨日历</div>
+    <div class="partContHM">降雨日历</div>
+  </div>
+</template>
+
+<script setup>
+const { proxy } = getCurrentInstance();
+
+onMounted(() => {});
+</script>
+
+<style lang="scss" scoped>
+.rainCaldarPage {
+  width: 100%;
+}
+</style>

diff --git a/src/assets/newImgs/HMScreen/partBg.png b/src/assets/newImgs/HMScreen/partBg.png
index 7219105..0b8959a 100644
--- a/src/assets/newImgs/HMScreen/partBg.png
+++ b/src/assets/newImgs/HMScreen/partBg.png
Binary files differ
diff --git a/src/views/sponeScreen/Echarts/RainfallEcharts.vue b/src/views/sponeScreen/Echarts/RainfallEcharts.vue
index 2fbaaec..8c4b9e2 100644
--- a/src/views/sponeScreen/Echarts/RainfallEcharts.vue
+++ b/src/views/sponeScreen/Echarts/RainfallEcharts.vue
@@ -4,7 +4,7 @@
 <script>
 import * as echarts from 'echarts';
 import { guid } from '@/utils/ruoyi';
-import { reactive, toRefs, onMounted, watch } from 'vue';
+import { reactive, toRefs, onMounted, watch, onUnmounted } from 'vue';
 export default {
   name: 'line-chart',
   props: {
@@ -17,6 +17,7 @@
       legend: [],
       id: guid(),
       chart: null,
+      timer: null,
     });
     const resizeTheChart = () => {
       if (allData.chart) {
@@ -177,18 +178,16 @@
             barGap: '10%', // Make series be overlap
             barCateGoryGap: '10%',
             itemStyle: {
-              normal: {
-                color: new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [
-                  {
-                    offset: 0,
-                    color: 'rgba(24, 255, 255, 1)',
-                  },
-                  {
-                    offset: 1,
-                    color: 'rgba(188, 255, 255, 1)',
-                  },
-                ]),
-              },
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [
+                {
+                  offset: 0,
+                  color: 'rgba(24, 255, 255, 1)',
+                },
+                {
+                  offset: 1,
+                  color: 'rgba(188, 255, 255, 1)',
+                },
+              ]),
             },
             data: props.data.yAxis,
           },
@@ -204,23 +203,41 @@
       };
       option && chartDom.setOption(option, true);
       allData.chart = chartDom;
+      animateChart();
     };
     watch(
       () => props.refresh,
       () => {
-        if (allData.chartDom) {
-          allData.chartDom.dispose();
-          allData.chartDom = null;
+        if (allData.chart) {
+          allData.chart.dispose();
+          allData.chart = null;
         }
         setTimeout(() => {
           init();
         }, 0);
       }
     );
+    // echarts动画
+    function animateChart() {
+      let length = props.data.xAxis.length;
+      let i = 0;
+      allData.timer = setInterval(() => {
+        i++;
+        if (i == length) i = 0;
+        allData.chart.dispatchAction({
+          type: 'showTip',
+          seriesIndex: 0,
+          dataIndex: i,
+        });
+      }, 1500);
+    }
     onMounted(() => {
       init();
       window.addEventListener('resize', resizeTheChart);
     });
+    onUnmounted(() => {
+      if (allData.timer) clearInterval(allData.timer);
+    });
     return {
       ...toRefs(allData),
       resizeTheChart,
diff --git a/src/views/sponeScreen/Echarts/RainfallLegend.vue b/src/views/sponeScreen/Echarts/RainfallLegend.vue
index f6069cc..1c83534 100644
--- a/src/views/sponeScreen/Echarts/RainfallLegend.vue
+++ b/src/views/sponeScreen/Echarts/RainfallLegend.vue
@@ -31,6 +31,7 @@
       var option;
       option = {
         // backgroundColor: '#0e2147',
+        color: ['#3FFFC2'],
         grid: {
           //   left: '5%',
           top: '10%',
@@ -132,12 +133,9 @@
             name: '降雨量',
             type: 'line',
             data: props.data.data1,
-
             itemStyle: {
-              normal: {
-                borderWidth: 5,
-                // color: '#0696f9',
-              },
+              borderWidth: 5,
+              // color: '#0696f9',
             },
           },
           {
@@ -153,11 +151,9 @@
               symbolSize: 15,
             },
             lineStyle: {
-              normal: {
-                width: 1,
-                opacity: 0.6,
-                curveness: 0.2,
-              },
+              width: 1,
+              opacity: 0.6,
+              curveness: 0.2,
             },
             data: props.data.data,
           },
diff --git a/src/views/sponeScreen/Echarts/tslyqk_constituent_3d.vue b/src/views/sponeScreen/Echarts/tslyqk_constituent_3d.vue
index 2b72b45..b61a344 100644
--- a/src/views/sponeScreen/Echarts/tslyqk_constituent_3d.vue
+++ b/src/views/sponeScreen/Echarts/tslyqk_constituent_3d.vue
@@ -9,6 +9,8 @@
 import * as echarts from 'echarts';
 const { proxy } = getCurrentInstance();
 
+const myChart = ref(null);
+
 // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
 function getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
   // 计算
@@ -147,8 +149,8 @@
       show: false,
     },
     itemStyle: {
-      opacity: 0.1,
-      color: '#E1E8EC',
+      opacity: 0.9,
+      color: '#296E99',
     },
     parametricEquation: {
       u: {
@@ -182,13 +184,13 @@
       show: false,
     },
     itemStyle: {
-      opacity: 0.1,
-      color: '#E1E8EC',
+      opacity: 0.2,
+      color: '#215983',
     },
     parametricEquation: {
       u: {
         min: 0,
-        max: Math.PI * 2,
+        max: Math.PI * 3,
         step: Math.PI / 20,
       },
       v: {
@@ -197,10 +199,10 @@
         step: Math.PI / 20,
       },
       x: function (u, v) {
-        return ((Math.sin(v) * Math.sin(u) + Math.sin(u)) / Math.PI) * 2;
+        return ((Math.sin(v) * Math.sin(u) + Math.sin(u)) / Math.PI) * 3;
       },
       y: function (u, v) {
-        return ((Math.sin(v) * Math.cos(u) + Math.cos(u)) / Math.PI) * 2;
+        return ((Math.sin(v) * Math.cos(u) + Math.cos(u)) / Math.PI) * 3;
       },
       z: function (u, v) {
         return Math.cos(v) > 0 ? -5 : -7;
@@ -215,8 +217,8 @@
       show: false,
     },
     itemStyle: {
-      opacity: 0.1,
-      color: '#E1E8EC',
+      opacity: 1,
+      color: '#25719D',
     },
     parametricEquation: {
       u: {
@@ -230,10 +232,10 @@
         step: Math.PI / 20,
       },
       x: function (u, v) {
-        return ((Math.sin(v) * Math.sin(u) + Math.sin(u)) / Math.PI) * 2.2;
+        return ((Math.sin(v) * Math.sin(u) + Math.sin(u)) / Math.PI) * 2.5;
       },
       y: function (u, v) {
-        return ((Math.sin(v) * Math.cos(u) + Math.cos(u)) / Math.PI) * 2.2;
+        return ((Math.sin(v) * Math.cos(u) + Math.cos(u)) / Math.PI) * 2.5;
       },
       z: function (u, v) {
         return Math.cos(v) > 0 ? -7 : -7;
@@ -258,12 +260,13 @@
     legend: {
       orient: 'vertical',
       icon: 'circle',
-      right: '5%',
-      top: '20%',
+      right: '3%',
+      top: '22%',
       show: true,
       itemGap: 10,
       textStyle: {
         color: '#A1E2FF',
+        fontSize: 14,
       },
       // icon:'diamond',
       data: legendData,
@@ -290,12 +293,11 @@
         // zoomSensitivity: 100,
         // panSensitivity: 100,
       },
-      top: '5%',
+      top: '0%',
       left: 'left',
-      width: '70%',
-      //   heigth: '50%',
+      width: '60%',
       show: false,
-      boxHeight: 20,
+      boxHeight: 50,
     },
     series: series,
   };
@@ -306,52 +308,59 @@
 const initEcharts = () => {
   const optionData = [
     {
-      name: '草(0.4%)',
-      value: 0.4,
+      name: '草(17.4k㎡,0.4%)',
+      value: 17.4,
       itemStyle: {
-        color: '#FFED52',
+        color: '#E7EA39',
       },
     },
     {
-      name: '田 (83.3%)',
-      value: 83.3,
+      name: '田 (4051.55k㎡,83.3%)',
+      value: 4051.55,
       itemStyle: {
-        color: '#FF8E5B',
+        color: '#E89668',
       },
     },
     {
-      name: '林 (11.4%)',
-      value: 11.4,
+      name: '林 (553.89k㎡,11.4%)',
+      value: 553.89,
       itemStyle: {
-        color: '#D956FF',
+        color: '#D863F4',
       },
     },
     {
-      name: '湖 (1.6%)',
-      value: 1.6,
+      name: '湖 (78.54k㎡,1.6%)',
+      value: 78.54,
       itemStyle: {
-        color: '#18FFFF',
+        color: '#03BABB',
       },
     },
     {
-      name: '水 (3.4%)',
-      value: 3.4,
+      name: '水 (165.05k㎡,3.4%)',
+      value: 165.05,
       itemStyle: {
-        color: '#4CC1FF',
+        color: '#3EB4F1',
       },
     },
   ];
   // 生成配置选项
   const option = getPie3D(optionData, 0.59);
-  //   const myChart = proxy.echarts.init(proxy.$refs.echarts);
-  const myChart = echarts.init(proxy.$refs.echarts3D);
+  myChart.value = echarts.init(proxy.$refs.echarts3D);
 
   // 绘制图形
-  myChart.setOption(option);
+  myChart.value.setOption(option);
 };
 
+//自适应
+function resizeTheChart() {
+  if (myChart.value) {
+    myChart.value.resize();
+  }
+}
+
 onMounted(() => {
   initEcharts();
+  window.addEventListener('resize', resizeTheChart);
 });
 </script>
 
diff --git a/src/views/sponeScreen/HaiMianScreen/index.vue b/src/views/sponeScreen/HaiMianScreen/index.vue
index 96efdfd..3702b26 100644
--- a/src/views/sponeScreen/HaiMianScreen/index.vue
+++ b/src/views/sponeScreen/HaiMianScreen/index.vue
@@ -2,13 +2,13 @@
   <!-- 海绵综合一张图首页 -->
   <div class="hmMainPage">
     <!-- 地图 -->
-    <GisMapMF></GisMapMF>
+    <!-- <GisMapMF></GisMapMF> -->
 
     <!-- 图例 -->
-    <Legend :showLegend="showLegend"></Legend>
+    <Legend :showLegend="showLegend" :class="['animate__animated', showPanel ? 'animate__fadeOutDown' : '']"></Legend>
 
     <!-- 控制面板按钮 -->
-    <div class="controlHM">
+    <div class="controlHM" :style="{ right: showPanel ? '30px' : '520px' }" v-if="menuIndex != 3">
       <img src="@/assets/newImgs/HMScreen/iconLegend.png" alt="" title="图例控制" @click="controlLegend" />
       <img src="@/assets/newImgs/HMScreen/iconPane.png" alt="" title="展开收起" @click="controlPanel" />
     </div>
@@ -62,7 +62,7 @@
   { name: '长效运维', id: 5 },
 ]);
 const menuIndex = ref(1);
-const showPanel = ref(true);
+const showPanel = ref(false);
 const showLegend = ref(false);
 
 // 跳转业务系统
@@ -154,7 +154,6 @@
   }
   .controlHM {
     position: absolute;
-    right: 500px;
     bottom: 50px;
     z-index: 220;
     width: 32px;
@@ -169,7 +168,7 @@
     position: absolute;
     bottom: 0px;
     left: 0px;
-    z-index: 220;
+    z-index: 180;
     width: 1920px;
     height: 100px;
     background: url('@/assets/newImgs/HMScreen/bottom_img .png') no-repeat;
diff --git a/src/views/sponeScreen/chengguanweiScreen/mainIndex.vue b/src/views/sponeScreen/chengguanweiScreen/mainIndex.vue
index d39f58e..edfadd6 100644
--- a/src/views/sponeScreen/chengguanweiScreen/mainIndex.vue
+++ b/src/views/sponeScreen/chengguanweiScreen/mainIndex.vue
@@ -2,10 +2,11 @@
   <!-- 3800*866 城管委-->
   <div class="cgwFivthScreen">
     3800*866 城管委
+    <img src="@/assets/newImgs/HMScreen/main.png" alt="" title="跳转业务系统" class="mainYW" @click="goSystem" />
     <!-- 地图 -->
     <GisMapMF></GisMapMF>
     <!-- 图例 -->
-    <Legend></Legend>
+    <!-- <Legend></Legend> -->
   </div>
 </template>
 
@@ -14,6 +15,11 @@
 import Legend from '@/views/sponeScreen/gisMF/legendKF.vue';
 const { proxy } = getCurrentInstance();
 
+// 跳转业务系统
+function goSystem() {
+  router.push({ path: '/index' });
+}
+
 onMounted(() => {});
 </script>
 
@@ -25,5 +31,11 @@
   background: #010e22;
   overflow: auto;
   position: relative;
+  .mainYW {
+    width: 50px;
+    height: 44px;
+    cursor: pointer;
+    margin: 10px 10px 0px 30px;
+  }
 }
 </style>
diff --git a/src/views/sponeScreen/cityGK/headHMAimg.vue b/src/views/sponeScreen/cityGK/headHMAimg.vue
index 0c014b9..aa99c96 100644
--- a/src/views/sponeScreen/cityGK/headHMAimg.vue
+++ b/src/views/sponeScreen/cityGK/headHMAimg.vue
@@ -26,7 +26,7 @@
     </div>
     <div class="three">
       <div class="PhotoClass">
-        <div class="PhotoClassA"></div>
+        <div class="PhotoClassA" style="opacity: 0.3"></div>
       </div>
       <div class="Selectiontime">
         <div class="SelectiontimeA">评估期</div>
@@ -38,7 +38,7 @@
     </div>
     <div class="four">
       <div class="PhotoClass">
-        <div class="PhotoClassA"></div>
+        <div class="PhotoClassA" style="opacity: 0.3"></div>
       </div>
       <div class="Selectiontime">
         <div class="SelectiontimeA">长效运维期</div>
diff --git a/src/views/sponeScreen/cityGK/index.vue b/src/views/sponeScreen/cityGK/index.vue
index 5a9f820..ec0f660 100644
--- a/src/views/sponeScreen/cityGK/index.vue
+++ b/src/views/sponeScreen/cityGK/index.vue
@@ -1,7 +1,7 @@
 <template>
   <!-- 海绵综合一张图 城市概况 -->
   <div class="cityPage">
-    <div class="publicLeftHM">
+    <div :class="['publicLeftHM', 'animate__animated', showPanel ? 'animate__fadeOutLeft' : 'animate__fadeInLeft']">
       <!-- 自然地理 -->
       <div class="partTitleHM">自然地理</div>
       <div class="partContHM">
@@ -46,11 +46,11 @@
     </div>
 
     <!-- 头部 -->
-    <div class="headHMA">
+    <div :class="['headHMA', 'animate__animated', showPanel ? 'animate__fadeOutUp' : 'animate__fadeInDown']">
       <headHMAimg></headHMAimg>
     </div>
 
-    <div class="publicRightHM">
+    <div :class="['publicRightHM', 'animate__animated', showPanel ? 'animate__fadeOutRight' : 'animate__fadeInRight']">
       <!-- 城市规划 -->
       <cityplanning></cityplanning>
 
@@ -68,6 +68,7 @@
 import headHMAimg from '@/views/sponeScreen/cityGK/headHMAimg.vue'; //头部
 
 const { proxy } = getCurrentInstance();
+const showPanel = ref(true); //面板展开收起
 const policiesList = ref([
   {
     name: '一心',
@@ -105,6 +106,7 @@
   () => props.showPanel,
   () => {
     console.log('val---', props.showPanel);
+    showPanel.value = props.showPanel;
   },
   { immediate: true }
 );
diff --git a/src/views/sponeScreen/cityGK/rainfall.vue b/src/views/sponeScreen/cityGK/rainfall.vue
index c3f2b38..61a80fb 100644
--- a/src/views/sponeScreen/cityGK/rainfall.vue
+++ b/src/views/sponeScreen/cityGK/rainfall.vue
@@ -84,7 +84,7 @@
 .HeadContent {
   width: 100%;
   height: 30px;
-  background: #2270ff;
+  background: rgba(34, 112, 255, 0.4);
   text-align: center;
   line-height: 30px;
   color: #ffffff;
diff --git a/src/views/sponeScreen/evaluationKH/index.vue b/src/views/sponeScreen/evaluationKH/index.vue
index 2f66628..5d473df 100644
--- a/src/views/sponeScreen/evaluationKH/index.vue
+++ b/src/views/sponeScreen/evaluationKH/index.vue
@@ -1,9 +1,12 @@
 <template>
   <!-- 海绵综合一张图 考核评估 -->
-  <div class="publicContainer">考核评估</div>
+  <div class="oneMapKHPG">
+    <KHPGHM></KHPGHM>
+  </div>
 </template>
 
 <script setup>
+import KHPGHM from '@/views/spongePerformance/mainIndex/index.vue'; //业务系统考核首页
 const { proxy } = getCurrentInstance();
 
 onMounted(() => {});
diff --git a/src/views/sponeScreen/gisMF/legendKF.vue b/src/views/sponeScreen/gisMF/legendKF.vue
index 23e5a62..88a4185 100644
--- a/src/views/sponeScreen/gisMF/legendKF.vue
+++ b/src/views/sponeScreen/gisMF/legendKF.vue
@@ -1,19 +1,14 @@
 <template>
   <!-- 海绵综合一张图图例 -->
-  <div class="lengendPage">
+  <div :class="['lengendPageHM', 'animate__animated', showLegend ? 'animate__fadeInUp' : 'animate__fadeOutDown']" v-if="showLegend">
     <!-- 图例框 -->
-    <div class="publicLegend">
+    <div class="publicLegendHM">
       <div class="legendTitle">
         <div class="legendName">图层控制</div>
       </div>
       <div class="legendContent">
         <div v-for="item in legendList" :key="item.layername" style="width: 100%">
           <div class="titleB" @click="changeAllLegend(item)">
-            <div class="iconImg">
-              <el-icon v-if="item.isCheck" size="18">
-                <Check />
-              </el-icon>
-            </div>
             {{ item.title }}
           </div>
           <div class="legendItemContent">
@@ -41,17 +36,30 @@
 import changeMapStyle from './changeMapStyle.js';
 import topography from '@/assets/newImgs/topography.png';
 import cesiumPaiShuiArea from './cesiumPaiShuiArea.js';
+
 const { proxy } = getCurrentInstance();
 const legendList = ref([]);
-const ifExpand = ref(true);
-// 展开收起
-const changeZhan = () => {
-  ifExpand.value = !ifExpand.value;
-};
+const showLegend = ref(false);
+
+// 面板内容展开收起控制
+const props = defineProps({
+  showLegend: {
+    type: Boolean,
+  },
+});
+watch(
+  () => props.showLegend,
+  () => {
+    console.log('showLegend---', props.showLegend);
+    showLegend.value = props.showLegend;
+  },
+  { immediate: true }
+);
+
 //图例一级标题点击
 const changeAllLegend = item => {
   console.log('item---', item);
-  item.isCheck = !item.isCheck;
+  // item.isCheck = !item.isCheck;
 };
 //图例点击
 const changeLegend = item => {
@@ -113,24 +121,17 @@
 </script>
 
 <style lang="scss">
-.lengendPage {
+.lengendPageHM {
   position: absolute;
-  left: 500px;
-  bottom: 60px;
+  left: 480px;
+  bottom: 63px;
   z-index: 205;
-  // background: red;
   width: 347px;
   height: 554px;
-  overflow-x: hidden;
-  overflow-y: auto;
-  .publicLegend {
-    width: 347px;
-    height: 654px;
-    background: #003b6d;
-    // border: 1px solid #6acefe;
+  background: #003b6d;
+  .publicLegendHM {
     opacity: 0.8;
     .legendTitle {
-      width: 345px;
       height: 46px;
       position: absolute;
       top: 1px;
@@ -144,12 +145,14 @@
       }
     }
     .legendContent {
+      width: 100%;
       position: absolute;
-      width: 345px;
+      height: 500px;
+      overflow-x: hidden;
+      overflow-y: auto;
       top: 47px;
       .titleB {
-        margin-top: 20px;
-        margin-bottom: 20px;
+        margin: 10px 0px 10px 20px;
         display: flex;
         height: 17px;
         font-family: Source Han Sans CN;
@@ -180,7 +183,7 @@
           align-items: center;
           cursor: pointer;
           .partItem {
-            margin-left: 47px;
+            margin-left: 20px;
             display: flex;
             width: 180px;
             &:hover {
diff --git a/src/views/sponeScreen/waterFlood/equipMonitor.vue b/src/views/sponeScreen/waterFlood/equipMonitor.vue
new file mode 100644
index 0000000..67b024f
--- /dev/null
+++ b/src/views/sponeScreen/waterFlood/equipMonitor.vue
@@ -0,0 +1,19 @@
+<template>
+  <!-- 监测设备 -->
+  <div class="equipJCPage">
+    <div class="partTitleHM">监测设备</div>
+    <div class="partContHM">监测设备</div>
+  </div>
+</template>
+
+<script setup>
+const { proxy } = getCurrentInstance();
+
+onMounted(() => {});
+</script>
+
+<style lang="scss" scoped>
+.equipJCPage {
+  width: 100%;
+}
+</style>
diff --git a/src/views/sponeScreen/waterFlood/floodWZ.vue b/src/views/sponeScreen/waterFlood/floodWZ.vue
new file mode 100644
index 0000000..8ceb1f2
--- /dev/null
+++ b/src/views/sponeScreen/waterFlood/floodWZ.vue
@@ -0,0 +1,19 @@
+<template>
+  <!-- 防汛物资 -->
+  <div class="floodWZPage">
+    <div class="partTitleHM">防汛物资</div>
+    <div class="partContHM">防汛物资3333332</div>
+  </div>
+</template>
+
+<script setup>
+const { proxy } = getCurrentInstance();
+
+onMounted(() => {});
+</script>
+
+<style lang="scss" scoped>
+.floodWZPage {
+  width: 100%;
+}
+</style>
diff --git a/src/views/sponeScreen/waterFlood/index.vue b/src/views/sponeScreen/waterFlood/index.vue
index 4df5058..ee65cf4 100644
--- a/src/views/sponeScreen/waterFlood/index.vue
+++ b/src/views/sponeScreen/waterFlood/index.vue
@@ -1,9 +1,35 @@
 <template>
   <!-- 海绵综合一张图 排水防涝 -->
-  <div class="publicContainer">排水防涝</div>
+  <div class="oneMapPSFL">
+    <!-- 左侧 -->
+    <div class="publicLeftHM">
+      <!-- 降雨日历 -->
+      <CaldarRain></CaldarRain>
+
+      <!-- 降雨报告 -->
+      <ReportRain></ReportRain>
+
+      <!-- 防汛物资 -->
+      <FloodWZ></FloodWZ>
+    </div>
+    <!-- 右侧 -->
+    <div class="publicRightHM">
+      <!-- 泵站运行监控 -->
+      <MonitorBZ></MonitorBZ>
+
+      <!-- 监测设备 -->
+      <MonitorEquip></MonitorEquip>
+    </div>
+  </div>
 </template>
 
 <script setup>
+import CaldarRain from '@/views/sponeScreen/WaterFlood/rainCaldar.vue'; //降雨日历
+import ReportRain from '@/views/sponeScreen/WaterFlood/rainReport.vue'; //降雨报告
+import FloodWZ from '@/views/sponeScreen/WaterFlood/floodWZ.vue'; //防汛物资
+import MonitorBZ from '@/views/sponeScreen/WaterFlood/pumpMonitor.vue'; //泵站运行监控
+import MonitorEquip from '@/views/sponeScreen/WaterFlood/equipMonitor.vue'; //监测设备
+
 const { proxy } = getCurrentInstance();
 
 onMounted(() => {});
diff --git a/src/views/sponeScreen/waterFlood/pumpMonitor.vue b/src/views/sponeScreen/waterFlood/pumpMonitor.vue
new file mode 100644
index 0000000..812f3c4
--- /dev/null
+++ b/src/views/sponeScreen/waterFlood/pumpMonitor.vue
@@ -0,0 +1,19 @@
+<template>
+  <!-- 泵站运行监控 -->
+  <div class="pumpJKPage">
+    <div class="partTitleHM">泵站运行监控</div>
+    <div class="partContHM">泵站运行监控</div>
+  </div>
+</template>
+
+<script setup>
+const { proxy } = getCurrentInstance();
+
+onMounted(() => {});
+</script>
+
+<style lang="scss" scoped>
+.pumpJKPage {
+  width: 100%;
+}
+</style>
diff --git a/src/views/sponeScreen/waterFlood/rainCaldar.vue b/src/views/sponeScreen/waterFlood/rainCaldar.vue
new file mode 100644
index 0000000..0900ade
--- /dev/null
+++ b/src/views/sponeScreen/waterFlood/rainCaldar.vue
@@ -0,0 +1,19 @@
+<template>
+  <!-- 降雨日历 -->
+  <div class="rainCaldarPage">
+    <div class="partTitleHM">降雨日历</div>
+    <div class="partContHM">降雨日历</div>
+  </div>
+</template>
+
+<script setup>
+const { proxy } = getCurrentInstance();
+
+onMounted(() => {});
+</script>
+
+<style lang="scss" scoped>
+.rainCaldarPage {
+  width: 100%;
+}
+</style>
diff --git a/src/views/sponeScreen/waterFlood/rainReport.vue b/src/views/sponeScreen/waterFlood/rainReport.vue
new file mode 100644
index 0000000..a49d010
--- /dev/null
+++ b/src/views/sponeScreen/waterFlood/rainReport.vue
@@ -0,0 +1,19 @@
+<template>
+  <!-- 降雨报告 -->
+  <div class="rainReportPage">
+    <div class="partTitleHM">降雨报告</div>
+    <div class="partContHM">降雨报告</div>
+  </div>
+</template>
+
+<script setup>
+const { proxy } = getCurrentInstance();
+
+onMounted(() => {});
+</script>
+
+<style lang="scss" scoped>
+.rainReportPage {
+  width: 100%;
+}
+</style>