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

diff --git a/src/assets/newImgs/HMScreen/WaterAnalysis_icon.png b/src/assets/newImgs/HMScreen/WaterAnalysis_icon.png
new file mode 100644
index 0000000..ec694e0
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/WaterAnalysis_icon.png
Binary files differ
diff --git a/src/views/sponeScreen/Echarts/AssessmentjsEcharts.vue b/src/views/sponeScreen/Echarts/AssessmentjsEcharts.vue
new file mode 100644
index 0000000..ce0820c
--- /dev/null
+++ b/src/views/sponeScreen/Echarts/AssessmentjsEcharts.vue
@@ -0,0 +1,185 @@
+<template>
+  <div :id="id" style="width: 100%; height: 100%"></div>
+</template>
+<script>
+import * as echarts from 'echarts';
+import { guid } from '@/utils/ruoyi';
+import { reactive, toRefs, onMounted, watch, onUnmounted } from 'vue';
+export default {
+  name: 'line-chart',
+  props: {
+    data: Object,
+    refresh: Number,
+  },
+  setup(props) {
+    const allData = reactive({
+      series: [],
+      legend: [],
+      id: guid(),
+      chart: null,
+      timer: null,
+    });
+    const resizeTheChart = () => {
+      if (allData.chart) {
+        allData.chart.resize();
+      }
+    };
+
+    const init = () => {
+      let chartDom = echarts.init(document.getElementById(allData.id));
+      var barWidth = 12;
+      var option;
+      option = {
+        color: ['#3FFFC2', '#FFF21C', 'orange'],
+        tooltip: {
+          trigger: 'axis',
+        },
+        grid: {
+          top: 40,
+          bottom: 30,
+        },
+        legend: {
+          data: ['降雨量(mm)', '水深(cm)'],
+          textStyle: {
+            color: '#fff',
+          },
+        },
+        xAxis: [
+          {
+            type: 'category',
+            axisLine: {
+              show: false,
+              lineStyle: {
+                width: 2,
+                color: '#58b2ed',
+              },
+            },
+            splitLine: {
+              show: false,
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLabel: {
+              color: 'rgba(255,255,255,1)',
+              fontSize: 14,
+              fontFamily: 'AlibabaPuHuiTi',
+            },
+            data: props.data.xAxis,
+          },
+        ],
+        yAxis: [
+          {
+            name: '',
+            type: 'value',
+            axisLabel: {
+              color: '#fff',
+              show: true,
+            },
+            nameTextStyle: {
+              color: '#fff',
+            },
+            splitLine: {
+              lineStyle: {
+                type: 'dashed',
+                color: '#60C2FF',
+              },
+            },
+          },
+          {
+            name: '',
+            type: 'value',
+            nameTextStyle: {
+              color: '#fff',
+            },
+            axisLabel: {
+              show: true,
+              color: '#fff',
+            },
+            splitLine: {
+              lineStyle: {
+                color: '#D1DEEE',
+                type: 'dashed',
+                color: '#53D8FB',
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: '降雨量(mm)',
+            type: 'bar',
+            barWidth: barWidth,
+            barGap: '10%', // Make series be overlap
+            barCateGoryGap: '10%',
+            itemStyle: {
+              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)',
+                },
+              ]),
+            },
+            yAxisIndex: 0,
+            data: props.data.yAxis,
+          },
+          {
+            // smooth: true, //变为曲线 默认false折线
+            name: '水深(cm)',
+            type: 'line',
+            data: props.data.yAxis2,
+            yAxisIndex: 0,
+            color: '#FFF21C',
+          },
+          4,
+        ],
+      };
+      option && chartDom.setOption(option, true);
+      allData.chart = chartDom;
+      animateChart();
+    };
+    watch(
+      () => props.refresh,
+      () => {
+        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,
+        });
+      }, 2000);
+    }
+    onMounted(() => {
+      init();
+      window.addEventListener('resize', resizeTheChart);
+    });
+    onUnmounted(() => {
+      if (allData.timer) clearInterval(allData.timer);
+    });
+    return {
+      ...toRefs(allData),
+      resizeTheChart,
+      init,
+    };
+  },
+};
+</script>

diff --git a/src/assets/newImgs/HMScreen/WaterAnalysis_icon.png b/src/assets/newImgs/HMScreen/WaterAnalysis_icon.png
new file mode 100644
index 0000000..ec694e0
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/WaterAnalysis_icon.png
Binary files differ
diff --git a/src/views/sponeScreen/Echarts/AssessmentjsEcharts.vue b/src/views/sponeScreen/Echarts/AssessmentjsEcharts.vue
new file mode 100644
index 0000000..ce0820c
--- /dev/null
+++ b/src/views/sponeScreen/Echarts/AssessmentjsEcharts.vue
@@ -0,0 +1,185 @@
+<template>
+  <div :id="id" style="width: 100%; height: 100%"></div>
+</template>
+<script>
+import * as echarts from 'echarts';
+import { guid } from '@/utils/ruoyi';
+import { reactive, toRefs, onMounted, watch, onUnmounted } from 'vue';
+export default {
+  name: 'line-chart',
+  props: {
+    data: Object,
+    refresh: Number,
+  },
+  setup(props) {
+    const allData = reactive({
+      series: [],
+      legend: [],
+      id: guid(),
+      chart: null,
+      timer: null,
+    });
+    const resizeTheChart = () => {
+      if (allData.chart) {
+        allData.chart.resize();
+      }
+    };
+
+    const init = () => {
+      let chartDom = echarts.init(document.getElementById(allData.id));
+      var barWidth = 12;
+      var option;
+      option = {
+        color: ['#3FFFC2', '#FFF21C', 'orange'],
+        tooltip: {
+          trigger: 'axis',
+        },
+        grid: {
+          top: 40,
+          bottom: 30,
+        },
+        legend: {
+          data: ['降雨量(mm)', '水深(cm)'],
+          textStyle: {
+            color: '#fff',
+          },
+        },
+        xAxis: [
+          {
+            type: 'category',
+            axisLine: {
+              show: false,
+              lineStyle: {
+                width: 2,
+                color: '#58b2ed',
+              },
+            },
+            splitLine: {
+              show: false,
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLabel: {
+              color: 'rgba(255,255,255,1)',
+              fontSize: 14,
+              fontFamily: 'AlibabaPuHuiTi',
+            },
+            data: props.data.xAxis,
+          },
+        ],
+        yAxis: [
+          {
+            name: '',
+            type: 'value',
+            axisLabel: {
+              color: '#fff',
+              show: true,
+            },
+            nameTextStyle: {
+              color: '#fff',
+            },
+            splitLine: {
+              lineStyle: {
+                type: 'dashed',
+                color: '#60C2FF',
+              },
+            },
+          },
+          {
+            name: '',
+            type: 'value',
+            nameTextStyle: {
+              color: '#fff',
+            },
+            axisLabel: {
+              show: true,
+              color: '#fff',
+            },
+            splitLine: {
+              lineStyle: {
+                color: '#D1DEEE',
+                type: 'dashed',
+                color: '#53D8FB',
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: '降雨量(mm)',
+            type: 'bar',
+            barWidth: barWidth,
+            barGap: '10%', // Make series be overlap
+            barCateGoryGap: '10%',
+            itemStyle: {
+              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)',
+                },
+              ]),
+            },
+            yAxisIndex: 0,
+            data: props.data.yAxis,
+          },
+          {
+            // smooth: true, //变为曲线 默认false折线
+            name: '水深(cm)',
+            type: 'line',
+            data: props.data.yAxis2,
+            yAxisIndex: 0,
+            color: '#FFF21C',
+          },
+          4,
+        ],
+      };
+      option && chartDom.setOption(option, true);
+      allData.chart = chartDom;
+      animateChart();
+    };
+    watch(
+      () => props.refresh,
+      () => {
+        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,
+        });
+      }, 2000);
+    }
+    onMounted(() => {
+      init();
+      window.addEventListener('resize', resizeTheChart);
+    });
+    onUnmounted(() => {
+      if (allData.timer) clearInterval(allData.timer);
+    });
+    return {
+      ...toRefs(allData),
+      resizeTheChart,
+      init,
+    };
+  },
+};
+</script>
diff --git a/src/views/sponeScreen/Echarts/RainwaterTakeAdvantage.vue b/src/views/sponeScreen/Echarts/RainwaterTakeAdvantage.vue
index f381603..45b1804 100644
--- a/src/views/sponeScreen/Echarts/RainwaterTakeAdvantage.vue
+++ b/src/views/sponeScreen/Echarts/RainwaterTakeAdvantage.vue
@@ -41,7 +41,6 @@
         show: false, // 不显示坐标轴刻度线
       },
 
-      max: 2.5,
       axisLabel: {
         color: '#60C2FF',
         show: true,
@@ -84,7 +83,7 @@
       {
         name: '万立方米/年',
         type: 'bar',
-        data: [5, 30, 90.4],
+        data: [90.4, 30, 5],
         barWidth: '8',
         itemStyle: {
           color: {

diff --git a/src/assets/newImgs/HMScreen/WaterAnalysis_icon.png b/src/assets/newImgs/HMScreen/WaterAnalysis_icon.png
new file mode 100644
index 0000000..ec694e0
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/WaterAnalysis_icon.png
Binary files differ
diff --git a/src/views/sponeScreen/Echarts/AssessmentjsEcharts.vue b/src/views/sponeScreen/Echarts/AssessmentjsEcharts.vue
new file mode 100644
index 0000000..ce0820c
--- /dev/null
+++ b/src/views/sponeScreen/Echarts/AssessmentjsEcharts.vue
@@ -0,0 +1,185 @@
+<template>
+  <div :id="id" style="width: 100%; height: 100%"></div>
+</template>
+<script>
+import * as echarts from 'echarts';
+import { guid } from '@/utils/ruoyi';
+import { reactive, toRefs, onMounted, watch, onUnmounted } from 'vue';
+export default {
+  name: 'line-chart',
+  props: {
+    data: Object,
+    refresh: Number,
+  },
+  setup(props) {
+    const allData = reactive({
+      series: [],
+      legend: [],
+      id: guid(),
+      chart: null,
+      timer: null,
+    });
+    const resizeTheChart = () => {
+      if (allData.chart) {
+        allData.chart.resize();
+      }
+    };
+
+    const init = () => {
+      let chartDom = echarts.init(document.getElementById(allData.id));
+      var barWidth = 12;
+      var option;
+      option = {
+        color: ['#3FFFC2', '#FFF21C', 'orange'],
+        tooltip: {
+          trigger: 'axis',
+        },
+        grid: {
+          top: 40,
+          bottom: 30,
+        },
+        legend: {
+          data: ['降雨量(mm)', '水深(cm)'],
+          textStyle: {
+            color: '#fff',
+          },
+        },
+        xAxis: [
+          {
+            type: 'category',
+            axisLine: {
+              show: false,
+              lineStyle: {
+                width: 2,
+                color: '#58b2ed',
+              },
+            },
+            splitLine: {
+              show: false,
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLabel: {
+              color: 'rgba(255,255,255,1)',
+              fontSize: 14,
+              fontFamily: 'AlibabaPuHuiTi',
+            },
+            data: props.data.xAxis,
+          },
+        ],
+        yAxis: [
+          {
+            name: '',
+            type: 'value',
+            axisLabel: {
+              color: '#fff',
+              show: true,
+            },
+            nameTextStyle: {
+              color: '#fff',
+            },
+            splitLine: {
+              lineStyle: {
+                type: 'dashed',
+                color: '#60C2FF',
+              },
+            },
+          },
+          {
+            name: '',
+            type: 'value',
+            nameTextStyle: {
+              color: '#fff',
+            },
+            axisLabel: {
+              show: true,
+              color: '#fff',
+            },
+            splitLine: {
+              lineStyle: {
+                color: '#D1DEEE',
+                type: 'dashed',
+                color: '#53D8FB',
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: '降雨量(mm)',
+            type: 'bar',
+            barWidth: barWidth,
+            barGap: '10%', // Make series be overlap
+            barCateGoryGap: '10%',
+            itemStyle: {
+              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)',
+                },
+              ]),
+            },
+            yAxisIndex: 0,
+            data: props.data.yAxis,
+          },
+          {
+            // smooth: true, //变为曲线 默认false折线
+            name: '水深(cm)',
+            type: 'line',
+            data: props.data.yAxis2,
+            yAxisIndex: 0,
+            color: '#FFF21C',
+          },
+          4,
+        ],
+      };
+      option && chartDom.setOption(option, true);
+      allData.chart = chartDom;
+      animateChart();
+    };
+    watch(
+      () => props.refresh,
+      () => {
+        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,
+        });
+      }, 2000);
+    }
+    onMounted(() => {
+      init();
+      window.addEventListener('resize', resizeTheChart);
+    });
+    onUnmounted(() => {
+      if (allData.timer) clearInterval(allData.timer);
+    });
+    return {
+      ...toRefs(allData),
+      resizeTheChart,
+      init,
+    };
+  },
+};
+</script>
diff --git a/src/views/sponeScreen/Echarts/RainwaterTakeAdvantage.vue b/src/views/sponeScreen/Echarts/RainwaterTakeAdvantage.vue
index f381603..45b1804 100644
--- a/src/views/sponeScreen/Echarts/RainwaterTakeAdvantage.vue
+++ b/src/views/sponeScreen/Echarts/RainwaterTakeAdvantage.vue
@@ -41,7 +41,6 @@
         show: false, // 不显示坐标轴刻度线
       },
 
-      max: 2.5,
       axisLabel: {
         color: '#60C2FF',
         show: true,
@@ -84,7 +83,7 @@
       {
         name: '万立方米/年',
         type: 'bar',
-        data: [5, 30, 90.4],
+        data: [90.4, 30, 5],
         barWidth: '8',
         itemStyle: {
           color: {
diff --git a/src/views/sponeScreen/Echarts/SewageEcharts.vue b/src/views/sponeScreen/Echarts/SewageEcharts.vue
index b12eab7..a489cab 100644
--- a/src/views/sponeScreen/Echarts/SewageEcharts.vue
+++ b/src/views/sponeScreen/Echarts/SewageEcharts.vue
@@ -41,7 +41,6 @@
         show: false, // 不显示坐标轴刻度线
       },
 
-      max: 40,
       axisLabel: {
         color: '#60C2FF',
         show: true,

diff --git a/src/assets/newImgs/HMScreen/WaterAnalysis_icon.png b/src/assets/newImgs/HMScreen/WaterAnalysis_icon.png
new file mode 100644
index 0000000..ec694e0
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/WaterAnalysis_icon.png
Binary files differ
diff --git a/src/views/sponeScreen/Echarts/AssessmentjsEcharts.vue b/src/views/sponeScreen/Echarts/AssessmentjsEcharts.vue
new file mode 100644
index 0000000..ce0820c
--- /dev/null
+++ b/src/views/sponeScreen/Echarts/AssessmentjsEcharts.vue
@@ -0,0 +1,185 @@
+<template>
+  <div :id="id" style="width: 100%; height: 100%"></div>
+</template>
+<script>
+import * as echarts from 'echarts';
+import { guid } from '@/utils/ruoyi';
+import { reactive, toRefs, onMounted, watch, onUnmounted } from 'vue';
+export default {
+  name: 'line-chart',
+  props: {
+    data: Object,
+    refresh: Number,
+  },
+  setup(props) {
+    const allData = reactive({
+      series: [],
+      legend: [],
+      id: guid(),
+      chart: null,
+      timer: null,
+    });
+    const resizeTheChart = () => {
+      if (allData.chart) {
+        allData.chart.resize();
+      }
+    };
+
+    const init = () => {
+      let chartDom = echarts.init(document.getElementById(allData.id));
+      var barWidth = 12;
+      var option;
+      option = {
+        color: ['#3FFFC2', '#FFF21C', 'orange'],
+        tooltip: {
+          trigger: 'axis',
+        },
+        grid: {
+          top: 40,
+          bottom: 30,
+        },
+        legend: {
+          data: ['降雨量(mm)', '水深(cm)'],
+          textStyle: {
+            color: '#fff',
+          },
+        },
+        xAxis: [
+          {
+            type: 'category',
+            axisLine: {
+              show: false,
+              lineStyle: {
+                width: 2,
+                color: '#58b2ed',
+              },
+            },
+            splitLine: {
+              show: false,
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLabel: {
+              color: 'rgba(255,255,255,1)',
+              fontSize: 14,
+              fontFamily: 'AlibabaPuHuiTi',
+            },
+            data: props.data.xAxis,
+          },
+        ],
+        yAxis: [
+          {
+            name: '',
+            type: 'value',
+            axisLabel: {
+              color: '#fff',
+              show: true,
+            },
+            nameTextStyle: {
+              color: '#fff',
+            },
+            splitLine: {
+              lineStyle: {
+                type: 'dashed',
+                color: '#60C2FF',
+              },
+            },
+          },
+          {
+            name: '',
+            type: 'value',
+            nameTextStyle: {
+              color: '#fff',
+            },
+            axisLabel: {
+              show: true,
+              color: '#fff',
+            },
+            splitLine: {
+              lineStyle: {
+                color: '#D1DEEE',
+                type: 'dashed',
+                color: '#53D8FB',
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: '降雨量(mm)',
+            type: 'bar',
+            barWidth: barWidth,
+            barGap: '10%', // Make series be overlap
+            barCateGoryGap: '10%',
+            itemStyle: {
+              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)',
+                },
+              ]),
+            },
+            yAxisIndex: 0,
+            data: props.data.yAxis,
+          },
+          {
+            // smooth: true, //变为曲线 默认false折线
+            name: '水深(cm)',
+            type: 'line',
+            data: props.data.yAxis2,
+            yAxisIndex: 0,
+            color: '#FFF21C',
+          },
+          4,
+        ],
+      };
+      option && chartDom.setOption(option, true);
+      allData.chart = chartDom;
+      animateChart();
+    };
+    watch(
+      () => props.refresh,
+      () => {
+        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,
+        });
+      }, 2000);
+    }
+    onMounted(() => {
+      init();
+      window.addEventListener('resize', resizeTheChart);
+    });
+    onUnmounted(() => {
+      if (allData.timer) clearInterval(allData.timer);
+    });
+    return {
+      ...toRefs(allData),
+      resizeTheChart,
+      init,
+    };
+  },
+};
+</script>
diff --git a/src/views/sponeScreen/Echarts/RainwaterTakeAdvantage.vue b/src/views/sponeScreen/Echarts/RainwaterTakeAdvantage.vue
index f381603..45b1804 100644
--- a/src/views/sponeScreen/Echarts/RainwaterTakeAdvantage.vue
+++ b/src/views/sponeScreen/Echarts/RainwaterTakeAdvantage.vue
@@ -41,7 +41,6 @@
         show: false, // 不显示坐标轴刻度线
       },
 
-      max: 2.5,
       axisLabel: {
         color: '#60C2FF',
         show: true,
@@ -84,7 +83,7 @@
       {
         name: '万立方米/年',
         type: 'bar',
-        data: [5, 30, 90.4],
+        data: [90.4, 30, 5],
         barWidth: '8',
         itemStyle: {
           color: {
diff --git a/src/views/sponeScreen/Echarts/SewageEcharts.vue b/src/views/sponeScreen/Echarts/SewageEcharts.vue
index b12eab7..a489cab 100644
--- a/src/views/sponeScreen/Echarts/SewageEcharts.vue
+++ b/src/views/sponeScreen/Echarts/SewageEcharts.vue
@@ -41,7 +41,6 @@
         show: false, // 不显示坐标轴刻度线
       },
 
-      max: 40,
       axisLabel: {
         color: '#60C2FF',
         show: true,
diff --git a/src/views/sponeScreen/projectHM/ProjectEvaluation.vue b/src/views/sponeScreen/projectHM/ProjectEvaluation.vue
index ca1544f..e927cec 100644
--- a/src/views/sponeScreen/projectHM/ProjectEvaluation.vue
+++ b/src/views/sponeScreen/projectHM/ProjectEvaluation.vue
@@ -2,34 +2,52 @@
   <div class="publicContainerA">
     <div class="partTitleHM">项目评估</div>
     <div class="ConstrucClass">
-      <div class="WaterAccumulation">
+      <!-- <div class="WaterAccumulation">
         <div class="HeadContent">
-          <span>积水分析</span>
+          <span @click="textClick">积水分析</span>
           <el-form-item prop="BODName" style="float: right; width: 130px; margin: 7px 20px 0px 0px">
-            <el-select v-model="queryParams.BODName" size="small">
+            <el-select v-model="queryParams.BODName" size="small" placeholder="请选择积水分析" @change="change">
               <el-option v-for="item in ListBod" :key="item.value" :label="item.name" :value="item.value" />
             </el-select>
           </el-form-item>
         </div>
-        <div class="assessment">
+        <div class="assessment" v-if="unfold">
           <AssessmentEcharts :data="chartData2" :refresh="chartData2.refresh"></AssessmentEcharts>
         </div>
-      </div>
+      </div> -->
 
       <div class="WaterList">
         <div class="DropdownBox">
           <div class="analysis">
+            <img :src="WaterAnalysis_icon" alt="" class="ICON_zp" />
+            <span @click="jishuiClick">积水分析</span>
+          </div>
+          <div class="Selectionbox">
+            <el-form-item prop="BODName" style="width: 50%; margin-left: 130px; margin-top: 18px">
+              <el-select v-model="queryParams.BODName" size="small" placeholder="请选择积水分析" @change="jishuichange">
+                <el-option v-for="item in ListBod" :key="item.value" :label="item.name" :value="item.value" />
+              </el-select>
+            </el-form-item>
+          </div>
+        </div>
+        <!-- 积水分析 -->
+        <div class="assessment" v-if="jishui">
+          <AssessmentjsEcharts :data="chartData1" :refresh="chartData1.refresh1"></AssessmentjsEcharts>
+        </div>
+
+        <div class="DropdownBox">
+          <div class="analysis">
             <img :src="pipefx" alt="" class="ICON_zp" />
             <span>片区分析</span>
           </div>
           <div class="Selectionbox">
             <el-form-item prop="area" style="width: 41%; margin-left: 10px; margin-top: 18px">
-              <el-select v-model="queryParams.area" size="small">
+              <el-select v-model="queryParams.area" size="small" placeholder="请选择片区分析">
                 <el-option v-for="item in areaList" :key="item.value" :label="item.name" :value="item.value" />
               </el-select>
             </el-form-item>
             <el-form-item prop="pipe" style="width: 50%; margin-left: 10px; margin-top: 18px">
-              <el-select v-model="queryParams.pipe" size="small">
+              <el-select v-model="queryParams.pipe" size="small" @change="change" placeholder="请选择">
                 <el-option v-for="item in pipeList" :key="item.value" :label="item.name" :value="item.value" />
               </el-select>
             </el-form-item>
@@ -43,7 +61,7 @@
           </div>
           <div class="Selectionbox">
             <el-form-item prop="Xm" style="width: 41%; margin-left: 10px; margin-top: 18px">
-              <el-select v-model="queryParams.Xm" size="small">
+              <el-select v-model="queryParams.Xm" size="small" placeholder="请选择项目分析">
                 <el-option v-for="item in XmList" :key="item.value" :label="item.name" :value="item.value" />
               </el-select>
             </el-form-item>
@@ -57,21 +75,25 @@
         <div class="DropdownBox">
           <div class="analysis">
             <img :src="ssfx" alt="" class="ICON_zp" />
-            <span>设施分析</span>
+            <span @click="textClick">设施分析</span>
           </div>
           <div class="Selectionbox">
-            <el-form-item prop="Xm" style="width: 41%; margin-left: 10px; margin-top: 18px">
-              <el-select v-model="queryParams.Xm" size="small">
+            <el-form-item prop="XmQ" style="width: 41%; margin-left: 10px; margin-top: 18px">
+              <el-select v-model="queryParams.Xm" size="small " placeholder="请选择设施分析">
                 <el-option v-for="item in XmList" :key="item.value" :label="item.name" :value="item.value" />
               </el-select>
             </el-form-item>
-            <el-form-item prop="XmA" style="width: 50%; margin-left: 10px; margin-top: 18px">
-              <el-select v-model="queryParams.XmA" size="small">
+            <el-form-item prop="XmAQ" style="width: 50%; margin-left: 10px; margin-top: 18px">
+              <el-select v-model="queryParams.XmAQ" size="small" @change="change" placeholder="请选择">
                 <el-option v-for="item in XmListA" :key="item.value" :label="item.name" :value="item.value" />
               </el-select>
             </el-form-item>
           </div>
         </div>
+        <!-- 设施分析 -->
+        <div class="assessment" v-if="unfold">
+          <AssessmentEcharts :data="chartData2" :refresh="chartData2.refresh"></AssessmentEcharts>
+        </div>
       </div>
     </div>
   </div>
@@ -79,10 +101,15 @@
 
 <script setup>
 import AssessmentEcharts from '@/views/sponeScreen/Echarts/AssessmentEcharts.vue'; // 积水分析
+import AssessmentjsEcharts from '@/views/sponeScreen/Echarts/AssessmentjsEcharts.vue'; //
 import pipefx from '@/assets/newImgs/HMScreen/pipefx.png';
 import ssfx from '@/assets/newImgs/HMScreen/ssfx.png';
 import xmfx from '@/assets/newImgs/HMScreen/xmfx.png';
 
+import WaterAnalysis_icon from '@/assets/newImgs/HMScreen/WaterAnalysis_icon.png';
+
+const jishui = ref(true);
+const unfold = ref(false);
 const chartData2 = ref({
   xAxis: [
     '06-12 08:00',
@@ -103,7 +130,24 @@
   yAxis3: [50, 50, 80, 230, 180, 240, 160, 200, 268, 198, 269, 260],
   refresh: 1,
 });
+const chartData1 = ref({
+  xAxis: [
+    '2024-06-12 08:00',
+    '2024-06-13 08:00',
+    '2024-06-14 08:00',
+    '2024-06-15 08:00',
+    '2024-06-16 08:00',
+    '2024-06-17 08:00',
+    '2024-06-18 08:00',
+    '2024-06-19 08:00',
+    '2024-06-20 08:00',
+  ],
+  yAxis: [2, 5, 10, 8, 2, 4, 5, 5, 7, 10, 5, 1],
+  yAxis2: [0.1, 0.2, 0.3, 0.2, 0.1, 0.4, 0.5, 0.03, 0.6, 0.1, 0.2, 0.1, 0.3, 0.4],
+  refresh: 1,
+});
 const refresh = ref(1);
+const refresh1 = ref(1);
 const ListBod = ref([
   {
     name: '明伦桥俩侧积水点',
@@ -159,9 +203,27 @@
 ]);
 
 const AllData = reactive({
-  queryParams: { BODName: '1', area: '1', pipe: '1', Xm: '1', XmA: '1' },
+  queryParams: { BODName: '1', area: '1', pipe: '1', Xm: '1', XmA: '1', XmQ: '1', XmAQ: '' },
 });
 const { queryParams } = toRefs(AllData);
+
+function jishuiClick() {
+  jishui.value = false;
+}
+const jishuichange = () => {
+  jishui.value = true;
+  unfold.value = false;
+  // console.log(unfold.value, 'unfold.value');
+};
+
+const change = val => {
+  unfold.value = true;
+  jishui.value = false;
+  // console.log(jishui.value, ' jishui.value');
+};
+function textClick() {
+  unfold.value = false;
+}
 </script>
 
 <style lang="scss" scoped>
@@ -177,9 +239,9 @@
   overflow-y: auto;
   .WaterAccumulation {
     width: 95%;
-    height: 270px;
+    // height: 270px;
     margin: auto;
-    // background: yellow;
+    background: yellow;
     .HeadContent {
       width: 100%;
       height: 40px;
@@ -196,19 +258,13 @@
         font-weight: 500;
       }
     }
-    .assessment {
-      margin-top: 5px;
-      width: 100%;
-      height: 260px;
-    }
   }
   .WaterList {
     position: relative;
-    top: 8%;
+    top: 8px;
     width: 95%;
-    height: calc(100vh - 900px);
+    // height: calc(100vh - 720px);
     margin: auto;
-    padding-top: 10px;
     // background: yellow;
     .DropdownBox {
       height: 50px;
@@ -236,6 +292,12 @@
         // background: yellowgreen;
       }
     }
+    .assessment {
+      margin-top: 5px;
+      width: 100%;
+      height: 260px;
+      // background: red;
+    }
   }
 }
 </style>