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

diff --git a/src/assets/newImgs/HMScreen/1452.png b/src/assets/newImgs/HMScreen/1452.png
new file mode 100644
index 0000000..13b84fa
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/1452.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/Architectural_icon.png b/src/assets/newImgs/HMScreen/Architectural_icon.png
new file mode 100644
index 0000000..ab662f6
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/Architectural_icon.png
Binary files differ

diff --git a/src/assets/newImgs/HMScreen/1452.png b/src/assets/newImgs/HMScreen/1452.png
new file mode 100644
index 0000000..13b84fa
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/1452.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/Architectural_icon.png b/src/assets/newImgs/HMScreen/Architectural_icon.png
new file mode 100644
index 0000000..ab662f6
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/Architectural_icon.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/GIS_icon.png b/src/assets/newImgs/HMScreen/GIS_icon.png
new file mode 100644
index 0000000..17e98e6
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/GIS_icon.png
Binary files differ

diff --git a/src/assets/newImgs/HMScreen/1452.png b/src/assets/newImgs/HMScreen/1452.png
new file mode 100644
index 0000000..13b84fa
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/1452.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/Architectural_icon.png b/src/assets/newImgs/HMScreen/Architectural_icon.png
new file mode 100644
index 0000000..ab662f6
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/Architectural_icon.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/GIS_icon.png b/src/assets/newImgs/HMScreen/GIS_icon.png
new file mode 100644
index 0000000..17e98e6
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/GIS_icon.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/drainage_icon.png b/src/assets/newImgs/HMScreen/drainage_icon.png
new file mode 100644
index 0000000..f9b26d7
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/drainage_icon.png
Binary files differ

diff --git a/src/assets/newImgs/HMScreen/1452.png b/src/assets/newImgs/HMScreen/1452.png
new file mode 100644
index 0000000..13b84fa
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/1452.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/Architectural_icon.png b/src/assets/newImgs/HMScreen/Architectural_icon.png
new file mode 100644
index 0000000..ab662f6
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/Architectural_icon.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/GIS_icon.png b/src/assets/newImgs/HMScreen/GIS_icon.png
new file mode 100644
index 0000000..17e98e6
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/GIS_icon.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/drainage_icon.png b/src/assets/newImgs/HMScreen/drainage_icon.png
new file mode 100644
index 0000000..f9b26d7
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/drainage_icon.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/else_icon.png b/src/assets/newImgs/HMScreen/else_icon.png
new file mode 100644
index 0000000..c33d674
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/else_icon.png
Binary files differ

diff --git a/src/assets/newImgs/HMScreen/1452.png b/src/assets/newImgs/HMScreen/1452.png
new file mode 100644
index 0000000..13b84fa
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/1452.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/Architectural_icon.png b/src/assets/newImgs/HMScreen/Architectural_icon.png
new file mode 100644
index 0000000..ab662f6
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/Architectural_icon.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/GIS_icon.png b/src/assets/newImgs/HMScreen/GIS_icon.png
new file mode 100644
index 0000000..17e98e6
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/GIS_icon.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/drainage_icon.png b/src/assets/newImgs/HMScreen/drainage_icon.png
new file mode 100644
index 0000000..f9b26d7
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/drainage_icon.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/else_icon.png b/src/assets/newImgs/HMScreen/else_icon.png
new file mode 100644
index 0000000..c33d674
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/else_icon.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/park_icon.png b/src/assets/newImgs/HMScreen/park_icon.png
new file mode 100644
index 0000000..f256d3e
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/park_icon.png
Binary files differ

diff --git a/src/assets/newImgs/HMScreen/1452.png b/src/assets/newImgs/HMScreen/1452.png
new file mode 100644
index 0000000..13b84fa
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/1452.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/Architectural_icon.png b/src/assets/newImgs/HMScreen/Architectural_icon.png
new file mode 100644
index 0000000..ab662f6
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/Architectural_icon.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/GIS_icon.png b/src/assets/newImgs/HMScreen/GIS_icon.png
new file mode 100644
index 0000000..17e98e6
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/GIS_icon.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/drainage_icon.png b/src/assets/newImgs/HMScreen/drainage_icon.png
new file mode 100644
index 0000000..f9b26d7
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/drainage_icon.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/else_icon.png b/src/assets/newImgs/HMScreen/else_icon.png
new file mode 100644
index 0000000..c33d674
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/else_icon.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/park_icon.png b/src/assets/newImgs/HMScreen/park_icon.png
new file mode 100644
index 0000000..f256d3e
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/park_icon.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/pipe_icon.png b/src/assets/newImgs/HMScreen/pipe_icon.png
new file mode 100644
index 0000000..7534968
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/pipe_icon.png
Binary files differ

diff --git a/src/assets/newImgs/HMScreen/1452.png b/src/assets/newImgs/HMScreen/1452.png
new file mode 100644
index 0000000..13b84fa
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/1452.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/Architectural_icon.png b/src/assets/newImgs/HMScreen/Architectural_icon.png
new file mode 100644
index 0000000..ab662f6
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/Architectural_icon.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/GIS_icon.png b/src/assets/newImgs/HMScreen/GIS_icon.png
new file mode 100644
index 0000000..17e98e6
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/GIS_icon.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/drainage_icon.png b/src/assets/newImgs/HMScreen/drainage_icon.png
new file mode 100644
index 0000000..f9b26d7
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/drainage_icon.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/else_icon.png b/src/assets/newImgs/HMScreen/else_icon.png
new file mode 100644
index 0000000..c33d674
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/else_icon.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/park_icon.png b/src/assets/newImgs/HMScreen/park_icon.png
new file mode 100644
index 0000000..f256d3e
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/park_icon.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/pipe_icon.png b/src/assets/newImgs/HMScreen/pipe_icon.png
new file mode 100644
index 0000000..7534968
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/pipe_icon.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/pipepumping_icon.png b/src/assets/newImgs/HMScreen/pipepumping_icon.png
new file mode 100644
index 0000000..297ed88
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/pipepumping_icon.png
Binary files differ

diff --git a/src/assets/newImgs/HMScreen/1452.png b/src/assets/newImgs/HMScreen/1452.png
new file mode 100644
index 0000000..13b84fa
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/1452.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/Architectural_icon.png b/src/assets/newImgs/HMScreen/Architectural_icon.png
new file mode 100644
index 0000000..ab662f6
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/Architectural_icon.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/GIS_icon.png b/src/assets/newImgs/HMScreen/GIS_icon.png
new file mode 100644
index 0000000..17e98e6
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/GIS_icon.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/drainage_icon.png b/src/assets/newImgs/HMScreen/drainage_icon.png
new file mode 100644
index 0000000..f9b26d7
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/drainage_icon.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/else_icon.png b/src/assets/newImgs/HMScreen/else_icon.png
new file mode 100644
index 0000000..c33d674
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/else_icon.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/park_icon.png b/src/assets/newImgs/HMScreen/park_icon.png
new file mode 100644
index 0000000..f256d3e
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/park_icon.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/pipe_icon.png b/src/assets/newImgs/HMScreen/pipe_icon.png
new file mode 100644
index 0000000..7534968
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/pipe_icon.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/pipepumping_icon.png b/src/assets/newImgs/HMScreen/pipepumping_icon.png
new file mode 100644
index 0000000..297ed88
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/pipepumping_icon.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/road_icon.png b/src/assets/newImgs/HMScreen/road_icon.png
new file mode 100644
index 0000000..909873a
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/road_icon.png
Binary files differ

diff --git a/src/assets/newImgs/HMScreen/1452.png b/src/assets/newImgs/HMScreen/1452.png
new file mode 100644
index 0000000..13b84fa
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/1452.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/Architectural_icon.png b/src/assets/newImgs/HMScreen/Architectural_icon.png
new file mode 100644
index 0000000..ab662f6
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/Architectural_icon.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/GIS_icon.png b/src/assets/newImgs/HMScreen/GIS_icon.png
new file mode 100644
index 0000000..17e98e6
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/GIS_icon.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/drainage_icon.png b/src/assets/newImgs/HMScreen/drainage_icon.png
new file mode 100644
index 0000000..f9b26d7
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/drainage_icon.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/else_icon.png b/src/assets/newImgs/HMScreen/else_icon.png
new file mode 100644
index 0000000..c33d674
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/else_icon.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/park_icon.png b/src/assets/newImgs/HMScreen/park_icon.png
new file mode 100644
index 0000000..f256d3e
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/park_icon.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/pipe_icon.png b/src/assets/newImgs/HMScreen/pipe_icon.png
new file mode 100644
index 0000000..7534968
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/pipe_icon.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/pipepumping_icon.png b/src/assets/newImgs/HMScreen/pipepumping_icon.png
new file mode 100644
index 0000000..297ed88
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/pipepumping_icon.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/road_icon.png b/src/assets/newImgs/HMScreen/road_icon.png
new file mode 100644
index 0000000..909873a
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/road_icon.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/ujnasf.png b/src/assets/newImgs/HMScreen/ujnasf.png
new file mode 100644
index 0000000..a500b19
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/ujnasf.png
Binary files differ

diff --git a/src/assets/newImgs/HMScreen/1452.png b/src/assets/newImgs/HMScreen/1452.png
new file mode 100644
index 0000000..13b84fa
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/1452.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/Architectural_icon.png b/src/assets/newImgs/HMScreen/Architectural_icon.png
new file mode 100644
index 0000000..ab662f6
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/Architectural_icon.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/GIS_icon.png b/src/assets/newImgs/HMScreen/GIS_icon.png
new file mode 100644
index 0000000..17e98e6
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/GIS_icon.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/drainage_icon.png b/src/assets/newImgs/HMScreen/drainage_icon.png
new file mode 100644
index 0000000..f9b26d7
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/drainage_icon.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/else_icon.png b/src/assets/newImgs/HMScreen/else_icon.png
new file mode 100644
index 0000000..c33d674
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/else_icon.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/park_icon.png b/src/assets/newImgs/HMScreen/park_icon.png
new file mode 100644
index 0000000..f256d3e
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/park_icon.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/pipe_icon.png b/src/assets/newImgs/HMScreen/pipe_icon.png
new file mode 100644
index 0000000..7534968
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/pipe_icon.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/pipepumping_icon.png b/src/assets/newImgs/HMScreen/pipepumping_icon.png
new file mode 100644
index 0000000..297ed88
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/pipepumping_icon.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/road_icon.png b/src/assets/newImgs/HMScreen/road_icon.png
new file mode 100644
index 0000000..909873a
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/road_icon.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/ujnasf.png b/src/assets/newImgs/HMScreen/ujnasf.png
new file mode 100644
index 0000000..a500b19
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/ujnasf.png
Binary files differ
diff --git a/src/views/sponeScreen/Echarts/AssessmentEcharts.vue b/src/views/sponeScreen/Echarts/AssessmentEcharts.vue
new file mode 100644
index 0000000..da7348d
--- /dev/null
+++ b/src/views/sponeScreen/Echarts/AssessmentEcharts.vue
@@ -0,0 +1,248 @@
+<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 shadowYData = [100, 100];
+      var color = 'rgba(31,227,249,1)';
+      var shadowColor = '#0b5767';
+      var barWidth = 12;
+
+      var option;
+      option = {
+        color: ['#3FFFC2', '#FFF21C'],
+
+        tooltip: {
+          trigger: 'axis',
+          // formatter: "{b}：{c}㎡",
+          // feature: {
+          //   mark: { show: true },
+          //   dataView: { show: true, readOnly: false },
+          //   magicType: { show: true, type: ['line', 'bar'] },
+          //   restore: { show: true },
+          //   saveAsImage: { show: true }
+          // },
+          // axisPointer: {
+          //   type: "cross",
+          //   textStyle: {
+          //     color: "#fff"
+          //   }
+          // },
+          formatter: params => {
+            // console.log(params);
+            var relVal = '' + params[0].name;
+            for (var i = 0, l = params.length; i < l; i++) {
+              if (params[i].seriesName) {
+                let unit = params[i].seriesName == '水深(cm)' ? 'mm' : 'mm';
+                relVal += '<br/>' + params[i].marker + params[i].seriesName + ' ' + params[i].value + unit;
+              }
+            }
+            return relVal;
+          },
+        },
+        grid: {
+          top: 50,
+          bottom: 30,
+        },
+        legend: {
+          data: ['水深(cm)', '降雨量(mm)'],
+          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: '降雨量(mm)',
+            type: 'value',
+            axisLabel: {
+              color: '#fff',
+              show: true,
+            },
+            nameTextStyle: {
+              color: '#fff',
+            },
+            splitLine: {
+              lineStyle: {
+                type: 'dashed',
+                color: '#60C2FF',
+              },
+            },
+            alignTicks: true,
+          },
+
+          {
+            name: '',
+            type: 'value',
+            nameTextStyle: {
+              color: '#fff',
+            },
+            min: 0,
+            max: 20,
+            interval: 5,
+            axisLabel: {
+              show: true,
+              color: '#fff',
+            },
+            splitLine: {
+              lineStyle: {
+                color: '#D1DEEE',
+                type: 'dashed',
+                color: '#53D8FB',
+              },
+            },
+            alignTicks: true,
+          },
+        ],
+        dataZoom: [
+          {
+            // show: true,
+            show: false,
+            height: 4,
+            bottom: 18,
+            start: 0,
+            end: 100,
+            handleSize: '100%',
+            fillerColor: '#94FA41',
+            borderColor: 'transparent',
+            backgroundColor: 'rgba(148, 250, 65, 0.2)',
+            handleStyle: {
+              color: '#94FA41',
+            },
+            moveHandleSize: 0,
+            textStyle: {
+              color: '#fff',
+            },
+          },
+          {
+            type: 'inside',
+            show: true,
+            height: 15,
+            start: 1,
+            end: 35,
+          },
+        ],
+        series: [
+          {
+            name: '水深(cm)',
+            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)',
+                },
+              ]),
+            },
+            data: props.data.yAxis,
+          },
+          {
+            // smooth: true, //变为曲线 默认false折线
+            name: '降雨量(mm)',
+            type: 'line',
+            data: props.data.yAxis2,
+            yAxisIndex: 1,
+            color: '#FFF21C',
+          },
+        ],
+      };
+      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/1452.png b/src/assets/newImgs/HMScreen/1452.png
new file mode 100644
index 0000000..13b84fa
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/1452.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/Architectural_icon.png b/src/assets/newImgs/HMScreen/Architectural_icon.png
new file mode 100644
index 0000000..ab662f6
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/Architectural_icon.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/GIS_icon.png b/src/assets/newImgs/HMScreen/GIS_icon.png
new file mode 100644
index 0000000..17e98e6
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/GIS_icon.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/drainage_icon.png b/src/assets/newImgs/HMScreen/drainage_icon.png
new file mode 100644
index 0000000..f9b26d7
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/drainage_icon.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/else_icon.png b/src/assets/newImgs/HMScreen/else_icon.png
new file mode 100644
index 0000000..c33d674
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/else_icon.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/park_icon.png b/src/assets/newImgs/HMScreen/park_icon.png
new file mode 100644
index 0000000..f256d3e
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/park_icon.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/pipe_icon.png b/src/assets/newImgs/HMScreen/pipe_icon.png
new file mode 100644
index 0000000..7534968
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/pipe_icon.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/pipepumping_icon.png b/src/assets/newImgs/HMScreen/pipepumping_icon.png
new file mode 100644
index 0000000..297ed88
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/pipepumping_icon.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/road_icon.png b/src/assets/newImgs/HMScreen/road_icon.png
new file mode 100644
index 0000000..909873a
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/road_icon.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/ujnasf.png b/src/assets/newImgs/HMScreen/ujnasf.png
new file mode 100644
index 0000000..a500b19
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/ujnasf.png
Binary files differ
diff --git a/src/views/sponeScreen/Echarts/AssessmentEcharts.vue b/src/views/sponeScreen/Echarts/AssessmentEcharts.vue
new file mode 100644
index 0000000..da7348d
--- /dev/null
+++ b/src/views/sponeScreen/Echarts/AssessmentEcharts.vue
@@ -0,0 +1,248 @@
+<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 shadowYData = [100, 100];
+      var color = 'rgba(31,227,249,1)';
+      var shadowColor = '#0b5767';
+      var barWidth = 12;
+
+      var option;
+      option = {
+        color: ['#3FFFC2', '#FFF21C'],
+
+        tooltip: {
+          trigger: 'axis',
+          // formatter: "{b}：{c}㎡",
+          // feature: {
+          //   mark: { show: true },
+          //   dataView: { show: true, readOnly: false },
+          //   magicType: { show: true, type: ['line', 'bar'] },
+          //   restore: { show: true },
+          //   saveAsImage: { show: true }
+          // },
+          // axisPointer: {
+          //   type: "cross",
+          //   textStyle: {
+          //     color: "#fff"
+          //   }
+          // },
+          formatter: params => {
+            // console.log(params);
+            var relVal = '' + params[0].name;
+            for (var i = 0, l = params.length; i < l; i++) {
+              if (params[i].seriesName) {
+                let unit = params[i].seriesName == '水深(cm)' ? 'mm' : 'mm';
+                relVal += '<br/>' + params[i].marker + params[i].seriesName + ' ' + params[i].value + unit;
+              }
+            }
+            return relVal;
+          },
+        },
+        grid: {
+          top: 50,
+          bottom: 30,
+        },
+        legend: {
+          data: ['水深(cm)', '降雨量(mm)'],
+          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: '降雨量(mm)',
+            type: 'value',
+            axisLabel: {
+              color: '#fff',
+              show: true,
+            },
+            nameTextStyle: {
+              color: '#fff',
+            },
+            splitLine: {
+              lineStyle: {
+                type: 'dashed',
+                color: '#60C2FF',
+              },
+            },
+            alignTicks: true,
+          },
+
+          {
+            name: '',
+            type: 'value',
+            nameTextStyle: {
+              color: '#fff',
+            },
+            min: 0,
+            max: 20,
+            interval: 5,
+            axisLabel: {
+              show: true,
+              color: '#fff',
+            },
+            splitLine: {
+              lineStyle: {
+                color: '#D1DEEE',
+                type: 'dashed',
+                color: '#53D8FB',
+              },
+            },
+            alignTicks: true,
+          },
+        ],
+        dataZoom: [
+          {
+            // show: true,
+            show: false,
+            height: 4,
+            bottom: 18,
+            start: 0,
+            end: 100,
+            handleSize: '100%',
+            fillerColor: '#94FA41',
+            borderColor: 'transparent',
+            backgroundColor: 'rgba(148, 250, 65, 0.2)',
+            handleStyle: {
+              color: '#94FA41',
+            },
+            moveHandleSize: 0,
+            textStyle: {
+              color: '#fff',
+            },
+          },
+          {
+            type: 'inside',
+            show: true,
+            height: 15,
+            start: 1,
+            end: 35,
+          },
+        ],
+        series: [
+          {
+            name: '水深(cm)',
+            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)',
+                },
+              ]),
+            },
+            data: props.data.yAxis,
+          },
+          {
+            // smooth: true, //变为曲线 默认false折线
+            name: '降雨量(mm)',
+            type: 'line',
+            data: props.data.yAxis2,
+            yAxisIndex: 1,
+            color: '#FFF21C',
+          },
+        ],
+      };
+      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/ConstructionDrawings.vue b/src/views/sponeScreen/Echarts/ConstructionDrawings.vue
new file mode 100644
index 0000000..26e7c0b
--- /dev/null
+++ b/src/views/sponeScreen/Echarts/ConstructionDrawings.vue
@@ -0,0 +1,144 @@
+<template>
+  <div class="soil_constituent">
+    <div class="echarts" ref="echarts"></div>
+    <div class="curInfo">
+      <div class="percent">总类型</div>
+      <div class="name">79</div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+const { proxy } = getCurrentInstance();
+const myChart = shallowRef(null);
+const data = [
+  {
+    name: '已竣工',
+    value: 38,
+  },
+  {
+    name: '已开工',
+    value: 33,
+  },
+  {
+    name: '完成施工指标',
+    value: 3,
+  },
+  {
+    name: '完成设计概算',
+    value: 5,
+  },
+  {
+    name: '项目前期',
+    value: 1,
+  },
+  {
+    name: '尚未立项',
+    value: 0,
+  },
+];
+const curActive = reactive({
+  name: data[0].name,
+  percent: data[0].value,
+});
+const initEcharts = () => {
+  myChart.value = proxy.echarts.init(proxy.$refs.echarts);
+  // 绘制图表
+  myChart.value.setOption({
+    color: ['#159AFF', '#68E1DF ', '#D1DFEF ', '#1662FF ', '#34FFBD', '#FFEF69'],
+    tooltip: {
+      trigger: 'item',
+      formatter: '{b}: {c}%',
+    },
+    legend: {
+      orient: 'vertical',
+      top: '16%',
+      right: '0%',
+      height: 150,
+      itemGap: 15,
+      textStyle: {
+        color: '#D1DEEE',
+        padding: [21, 0, 0, 0],
+      },
+    },
+    grid: {
+      left: '12%',
+      right: '2%',
+      top: '2%',
+      bottom: '2%',
+    },
+    series: [
+      {
+        type: 'pie',
+        radius: ['50%', '80%'],
+        center: ['30%', '50%'],
+        labelLine: {
+          show: false,
+        },
+        label: {
+          show: false,
+        },
+        itemStyle: {
+          borderWidth: 3,
+          borderColor: '#185c78',
+          borderRadius: 8,
+        },
+        emphasis: {
+          itemStyle: {
+            shadowBlur: 10,
+            shadowOffsetX: 0,
+            shadowColor: 'rgba(0, 0, 0, 0.5)',
+          },
+        },
+        data,
+      },
+    ],
+  });
+
+  myChart.value.on('mouseover', function (params) {
+    curActive.name = params.data.name;
+    curActive.percent = params.data.value;
+  });
+  myChart.value.on('mouseout', function () {
+    curActive.name = data[0].name;
+    curActive.percent = data[0].value;
+  });
+};
+
+onMounted(() => {
+  initEcharts();
+  window.addEventListener('resize', () => {
+    myChart.value && myChart.value.resize();
+  });
+});
+</script>
+
+<style lang="scss" scoped>
+.soil_constituent {
+  height: 100%;
+  position: relative;
+  .echarts {
+    height: 100%;
+  }
+  .curInfo {
+    position: absolute;
+    left: 94px;
+    top: 50%;
+    transform: translateY(-50%);
+    text-align: center;
+    width: 100px;
+    .percent {
+      // font-size: 26px;
+      font-size: 18px;
+      color: #fff;
+    }
+    .name {
+      // font-size: 16px;
+      font-size: 26px;
+      color: #d1deee;
+      padding-right: 6%;
+      white-space: nowrap;
+    }
+  }
+}
+</style>

diff --git a/src/assets/newImgs/HMScreen/1452.png b/src/assets/newImgs/HMScreen/1452.png
new file mode 100644
index 0000000..13b84fa
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/1452.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/Architectural_icon.png b/src/assets/newImgs/HMScreen/Architectural_icon.png
new file mode 100644
index 0000000..ab662f6
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/Architectural_icon.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/GIS_icon.png b/src/assets/newImgs/HMScreen/GIS_icon.png
new file mode 100644
index 0000000..17e98e6
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/GIS_icon.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/drainage_icon.png b/src/assets/newImgs/HMScreen/drainage_icon.png
new file mode 100644
index 0000000..f9b26d7
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/drainage_icon.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/else_icon.png b/src/assets/newImgs/HMScreen/else_icon.png
new file mode 100644
index 0000000..c33d674
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/else_icon.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/park_icon.png b/src/assets/newImgs/HMScreen/park_icon.png
new file mode 100644
index 0000000..f256d3e
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/park_icon.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/pipe_icon.png b/src/assets/newImgs/HMScreen/pipe_icon.png
new file mode 100644
index 0000000..7534968
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/pipe_icon.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/pipepumping_icon.png b/src/assets/newImgs/HMScreen/pipepumping_icon.png
new file mode 100644
index 0000000..297ed88
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/pipepumping_icon.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/road_icon.png b/src/assets/newImgs/HMScreen/road_icon.png
new file mode 100644
index 0000000..909873a
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/road_icon.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/ujnasf.png b/src/assets/newImgs/HMScreen/ujnasf.png
new file mode 100644
index 0000000..a500b19
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/ujnasf.png
Binary files differ
diff --git a/src/views/sponeScreen/Echarts/AssessmentEcharts.vue b/src/views/sponeScreen/Echarts/AssessmentEcharts.vue
new file mode 100644
index 0000000..da7348d
--- /dev/null
+++ b/src/views/sponeScreen/Echarts/AssessmentEcharts.vue
@@ -0,0 +1,248 @@
+<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 shadowYData = [100, 100];
+      var color = 'rgba(31,227,249,1)';
+      var shadowColor = '#0b5767';
+      var barWidth = 12;
+
+      var option;
+      option = {
+        color: ['#3FFFC2', '#FFF21C'],
+
+        tooltip: {
+          trigger: 'axis',
+          // formatter: "{b}：{c}㎡",
+          // feature: {
+          //   mark: { show: true },
+          //   dataView: { show: true, readOnly: false },
+          //   magicType: { show: true, type: ['line', 'bar'] },
+          //   restore: { show: true },
+          //   saveAsImage: { show: true }
+          // },
+          // axisPointer: {
+          //   type: "cross",
+          //   textStyle: {
+          //     color: "#fff"
+          //   }
+          // },
+          formatter: params => {
+            // console.log(params);
+            var relVal = '' + params[0].name;
+            for (var i = 0, l = params.length; i < l; i++) {
+              if (params[i].seriesName) {
+                let unit = params[i].seriesName == '水深(cm)' ? 'mm' : 'mm';
+                relVal += '<br/>' + params[i].marker + params[i].seriesName + ' ' + params[i].value + unit;
+              }
+            }
+            return relVal;
+          },
+        },
+        grid: {
+          top: 50,
+          bottom: 30,
+        },
+        legend: {
+          data: ['水深(cm)', '降雨量(mm)'],
+          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: '降雨量(mm)',
+            type: 'value',
+            axisLabel: {
+              color: '#fff',
+              show: true,
+            },
+            nameTextStyle: {
+              color: '#fff',
+            },
+            splitLine: {
+              lineStyle: {
+                type: 'dashed',
+                color: '#60C2FF',
+              },
+            },
+            alignTicks: true,
+          },
+
+          {
+            name: '',
+            type: 'value',
+            nameTextStyle: {
+              color: '#fff',
+            },
+            min: 0,
+            max: 20,
+            interval: 5,
+            axisLabel: {
+              show: true,
+              color: '#fff',
+            },
+            splitLine: {
+              lineStyle: {
+                color: '#D1DEEE',
+                type: 'dashed',
+                color: '#53D8FB',
+              },
+            },
+            alignTicks: true,
+          },
+        ],
+        dataZoom: [
+          {
+            // show: true,
+            show: false,
+            height: 4,
+            bottom: 18,
+            start: 0,
+            end: 100,
+            handleSize: '100%',
+            fillerColor: '#94FA41',
+            borderColor: 'transparent',
+            backgroundColor: 'rgba(148, 250, 65, 0.2)',
+            handleStyle: {
+              color: '#94FA41',
+            },
+            moveHandleSize: 0,
+            textStyle: {
+              color: '#fff',
+            },
+          },
+          {
+            type: 'inside',
+            show: true,
+            height: 15,
+            start: 1,
+            end: 35,
+          },
+        ],
+        series: [
+          {
+            name: '水深(cm)',
+            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)',
+                },
+              ]),
+            },
+            data: props.data.yAxis,
+          },
+          {
+            // smooth: true, //变为曲线 默认false折线
+            name: '降雨量(mm)',
+            type: 'line',
+            data: props.data.yAxis2,
+            yAxisIndex: 1,
+            color: '#FFF21C',
+          },
+        ],
+      };
+      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/ConstructionDrawings.vue b/src/views/sponeScreen/Echarts/ConstructionDrawings.vue
new file mode 100644
index 0000000..26e7c0b
--- /dev/null
+++ b/src/views/sponeScreen/Echarts/ConstructionDrawings.vue
@@ -0,0 +1,144 @@
+<template>
+  <div class="soil_constituent">
+    <div class="echarts" ref="echarts"></div>
+    <div class="curInfo">
+      <div class="percent">总类型</div>
+      <div class="name">79</div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+const { proxy } = getCurrentInstance();
+const myChart = shallowRef(null);
+const data = [
+  {
+    name: '已竣工',
+    value: 38,
+  },
+  {
+    name: '已开工',
+    value: 33,
+  },
+  {
+    name: '完成施工指标',
+    value: 3,
+  },
+  {
+    name: '完成设计概算',
+    value: 5,
+  },
+  {
+    name: '项目前期',
+    value: 1,
+  },
+  {
+    name: '尚未立项',
+    value: 0,
+  },
+];
+const curActive = reactive({
+  name: data[0].name,
+  percent: data[0].value,
+});
+const initEcharts = () => {
+  myChart.value = proxy.echarts.init(proxy.$refs.echarts);
+  // 绘制图表
+  myChart.value.setOption({
+    color: ['#159AFF', '#68E1DF ', '#D1DFEF ', '#1662FF ', '#34FFBD', '#FFEF69'],
+    tooltip: {
+      trigger: 'item',
+      formatter: '{b}: {c}%',
+    },
+    legend: {
+      orient: 'vertical',
+      top: '16%',
+      right: '0%',
+      height: 150,
+      itemGap: 15,
+      textStyle: {
+        color: '#D1DEEE',
+        padding: [21, 0, 0, 0],
+      },
+    },
+    grid: {
+      left: '12%',
+      right: '2%',
+      top: '2%',
+      bottom: '2%',
+    },
+    series: [
+      {
+        type: 'pie',
+        radius: ['50%', '80%'],
+        center: ['30%', '50%'],
+        labelLine: {
+          show: false,
+        },
+        label: {
+          show: false,
+        },
+        itemStyle: {
+          borderWidth: 3,
+          borderColor: '#185c78',
+          borderRadius: 8,
+        },
+        emphasis: {
+          itemStyle: {
+            shadowBlur: 10,
+            shadowOffsetX: 0,
+            shadowColor: 'rgba(0, 0, 0, 0.5)',
+          },
+        },
+        data,
+      },
+    ],
+  });
+
+  myChart.value.on('mouseover', function (params) {
+    curActive.name = params.data.name;
+    curActive.percent = params.data.value;
+  });
+  myChart.value.on('mouseout', function () {
+    curActive.name = data[0].name;
+    curActive.percent = data[0].value;
+  });
+};
+
+onMounted(() => {
+  initEcharts();
+  window.addEventListener('resize', () => {
+    myChart.value && myChart.value.resize();
+  });
+});
+</script>
+
+<style lang="scss" scoped>
+.soil_constituent {
+  height: 100%;
+  position: relative;
+  .echarts {
+    height: 100%;
+  }
+  .curInfo {
+    position: absolute;
+    left: 94px;
+    top: 50%;
+    transform: translateY(-50%);
+    text-align: center;
+    width: 100px;
+    .percent {
+      // font-size: 26px;
+      font-size: 18px;
+      color: #fff;
+    }
+    .name {
+      // font-size: 16px;
+      font-size: 26px;
+      color: #d1deee;
+      padding-right: 6%;
+      white-space: nowrap;
+    }
+  }
+}
+</style>
diff --git a/src/views/sponeScreen/projectHM/ConstructionStatus.vue b/src/views/sponeScreen/projectHM/ConstructionStatus.vue
index 1c63534..a5eba20 100644
--- a/src/views/sponeScreen/projectHM/ConstructionStatus.vue
+++ b/src/views/sponeScreen/projectHM/ConstructionStatus.vue
@@ -1,9 +1,16 @@
 <template>
   <div class="partTitleHM">建设状态</div>
 
-  <div class="ConstrucClass">图例</div>
+  <div class="ConstrucClass">
+    <ConstructionDrawings :data="chartData2" :refresh="refresh"></ConstructionDrawings>
+  </div>
 </template>
-<script setup></script>
+<script setup>
+import ConstructionDrawings from '@/views/sponeScreen/Echarts/ConstructionDrawings.vue'; //年际降雨变化
+
+const chartData2 = ref([]);
+const refresh = ref(1);
+</script>
 
 <style lang="scss" scoped>
 .ConstrucClass {

diff --git a/src/assets/newImgs/HMScreen/1452.png b/src/assets/newImgs/HMScreen/1452.png
new file mode 100644
index 0000000..13b84fa
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/1452.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/Architectural_icon.png b/src/assets/newImgs/HMScreen/Architectural_icon.png
new file mode 100644
index 0000000..ab662f6
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/Architectural_icon.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/GIS_icon.png b/src/assets/newImgs/HMScreen/GIS_icon.png
new file mode 100644
index 0000000..17e98e6
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/GIS_icon.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/drainage_icon.png b/src/assets/newImgs/HMScreen/drainage_icon.png
new file mode 100644
index 0000000..f9b26d7
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/drainage_icon.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/else_icon.png b/src/assets/newImgs/HMScreen/else_icon.png
new file mode 100644
index 0000000..c33d674
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/else_icon.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/park_icon.png b/src/assets/newImgs/HMScreen/park_icon.png
new file mode 100644
index 0000000..f256d3e
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/park_icon.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/pipe_icon.png b/src/assets/newImgs/HMScreen/pipe_icon.png
new file mode 100644
index 0000000..7534968
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/pipe_icon.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/pipepumping_icon.png b/src/assets/newImgs/HMScreen/pipepumping_icon.png
new file mode 100644
index 0000000..297ed88
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/pipepumping_icon.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/road_icon.png b/src/assets/newImgs/HMScreen/road_icon.png
new file mode 100644
index 0000000..909873a
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/road_icon.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/ujnasf.png b/src/assets/newImgs/HMScreen/ujnasf.png
new file mode 100644
index 0000000..a500b19
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/ujnasf.png
Binary files differ
diff --git a/src/views/sponeScreen/Echarts/AssessmentEcharts.vue b/src/views/sponeScreen/Echarts/AssessmentEcharts.vue
new file mode 100644
index 0000000..da7348d
--- /dev/null
+++ b/src/views/sponeScreen/Echarts/AssessmentEcharts.vue
@@ -0,0 +1,248 @@
+<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 shadowYData = [100, 100];
+      var color = 'rgba(31,227,249,1)';
+      var shadowColor = '#0b5767';
+      var barWidth = 12;
+
+      var option;
+      option = {
+        color: ['#3FFFC2', '#FFF21C'],
+
+        tooltip: {
+          trigger: 'axis',
+          // formatter: "{b}：{c}㎡",
+          // feature: {
+          //   mark: { show: true },
+          //   dataView: { show: true, readOnly: false },
+          //   magicType: { show: true, type: ['line', 'bar'] },
+          //   restore: { show: true },
+          //   saveAsImage: { show: true }
+          // },
+          // axisPointer: {
+          //   type: "cross",
+          //   textStyle: {
+          //     color: "#fff"
+          //   }
+          // },
+          formatter: params => {
+            // console.log(params);
+            var relVal = '' + params[0].name;
+            for (var i = 0, l = params.length; i < l; i++) {
+              if (params[i].seriesName) {
+                let unit = params[i].seriesName == '水深(cm)' ? 'mm' : 'mm';
+                relVal += '<br/>' + params[i].marker + params[i].seriesName + ' ' + params[i].value + unit;
+              }
+            }
+            return relVal;
+          },
+        },
+        grid: {
+          top: 50,
+          bottom: 30,
+        },
+        legend: {
+          data: ['水深(cm)', '降雨量(mm)'],
+          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: '降雨量(mm)',
+            type: 'value',
+            axisLabel: {
+              color: '#fff',
+              show: true,
+            },
+            nameTextStyle: {
+              color: '#fff',
+            },
+            splitLine: {
+              lineStyle: {
+                type: 'dashed',
+                color: '#60C2FF',
+              },
+            },
+            alignTicks: true,
+          },
+
+          {
+            name: '',
+            type: 'value',
+            nameTextStyle: {
+              color: '#fff',
+            },
+            min: 0,
+            max: 20,
+            interval: 5,
+            axisLabel: {
+              show: true,
+              color: '#fff',
+            },
+            splitLine: {
+              lineStyle: {
+                color: '#D1DEEE',
+                type: 'dashed',
+                color: '#53D8FB',
+              },
+            },
+            alignTicks: true,
+          },
+        ],
+        dataZoom: [
+          {
+            // show: true,
+            show: false,
+            height: 4,
+            bottom: 18,
+            start: 0,
+            end: 100,
+            handleSize: '100%',
+            fillerColor: '#94FA41',
+            borderColor: 'transparent',
+            backgroundColor: 'rgba(148, 250, 65, 0.2)',
+            handleStyle: {
+              color: '#94FA41',
+            },
+            moveHandleSize: 0,
+            textStyle: {
+              color: '#fff',
+            },
+          },
+          {
+            type: 'inside',
+            show: true,
+            height: 15,
+            start: 1,
+            end: 35,
+          },
+        ],
+        series: [
+          {
+            name: '水深(cm)',
+            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)',
+                },
+              ]),
+            },
+            data: props.data.yAxis,
+          },
+          {
+            // smooth: true, //变为曲线 默认false折线
+            name: '降雨量(mm)',
+            type: 'line',
+            data: props.data.yAxis2,
+            yAxisIndex: 1,
+            color: '#FFF21C',
+          },
+        ],
+      };
+      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/ConstructionDrawings.vue b/src/views/sponeScreen/Echarts/ConstructionDrawings.vue
new file mode 100644
index 0000000..26e7c0b
--- /dev/null
+++ b/src/views/sponeScreen/Echarts/ConstructionDrawings.vue
@@ -0,0 +1,144 @@
+<template>
+  <div class="soil_constituent">
+    <div class="echarts" ref="echarts"></div>
+    <div class="curInfo">
+      <div class="percent">总类型</div>
+      <div class="name">79</div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+const { proxy } = getCurrentInstance();
+const myChart = shallowRef(null);
+const data = [
+  {
+    name: '已竣工',
+    value: 38,
+  },
+  {
+    name: '已开工',
+    value: 33,
+  },
+  {
+    name: '完成施工指标',
+    value: 3,
+  },
+  {
+    name: '完成设计概算',
+    value: 5,
+  },
+  {
+    name: '项目前期',
+    value: 1,
+  },
+  {
+    name: '尚未立项',
+    value: 0,
+  },
+];
+const curActive = reactive({
+  name: data[0].name,
+  percent: data[0].value,
+});
+const initEcharts = () => {
+  myChart.value = proxy.echarts.init(proxy.$refs.echarts);
+  // 绘制图表
+  myChart.value.setOption({
+    color: ['#159AFF', '#68E1DF ', '#D1DFEF ', '#1662FF ', '#34FFBD', '#FFEF69'],
+    tooltip: {
+      trigger: 'item',
+      formatter: '{b}: {c}%',
+    },
+    legend: {
+      orient: 'vertical',
+      top: '16%',
+      right: '0%',
+      height: 150,
+      itemGap: 15,
+      textStyle: {
+        color: '#D1DEEE',
+        padding: [21, 0, 0, 0],
+      },
+    },
+    grid: {
+      left: '12%',
+      right: '2%',
+      top: '2%',
+      bottom: '2%',
+    },
+    series: [
+      {
+        type: 'pie',
+        radius: ['50%', '80%'],
+        center: ['30%', '50%'],
+        labelLine: {
+          show: false,
+        },
+        label: {
+          show: false,
+        },
+        itemStyle: {
+          borderWidth: 3,
+          borderColor: '#185c78',
+          borderRadius: 8,
+        },
+        emphasis: {
+          itemStyle: {
+            shadowBlur: 10,
+            shadowOffsetX: 0,
+            shadowColor: 'rgba(0, 0, 0, 0.5)',
+          },
+        },
+        data,
+      },
+    ],
+  });
+
+  myChart.value.on('mouseover', function (params) {
+    curActive.name = params.data.name;
+    curActive.percent = params.data.value;
+  });
+  myChart.value.on('mouseout', function () {
+    curActive.name = data[0].name;
+    curActive.percent = data[0].value;
+  });
+};
+
+onMounted(() => {
+  initEcharts();
+  window.addEventListener('resize', () => {
+    myChart.value && myChart.value.resize();
+  });
+});
+</script>
+
+<style lang="scss" scoped>
+.soil_constituent {
+  height: 100%;
+  position: relative;
+  .echarts {
+    height: 100%;
+  }
+  .curInfo {
+    position: absolute;
+    left: 94px;
+    top: 50%;
+    transform: translateY(-50%);
+    text-align: center;
+    width: 100px;
+    .percent {
+      // font-size: 26px;
+      font-size: 18px;
+      color: #fff;
+    }
+    .name {
+      // font-size: 16px;
+      font-size: 26px;
+      color: #d1deee;
+      padding-right: 6%;
+      white-space: nowrap;
+    }
+  }
+}
+</style>
diff --git a/src/views/sponeScreen/projectHM/ConstructionStatus.vue b/src/views/sponeScreen/projectHM/ConstructionStatus.vue
index 1c63534..a5eba20 100644
--- a/src/views/sponeScreen/projectHM/ConstructionStatus.vue
+++ b/src/views/sponeScreen/projectHM/ConstructionStatus.vue
@@ -1,9 +1,16 @@
 <template>
   <div class="partTitleHM">建设状态</div>
 
-  <div class="ConstrucClass">图例</div>
+  <div class="ConstrucClass">
+    <ConstructionDrawings :data="chartData2" :refresh="refresh"></ConstructionDrawings>
+  </div>
 </template>
-<script setup></script>
+<script setup>
+import ConstructionDrawings from '@/views/sponeScreen/Echarts/ConstructionDrawings.vue'; //年际降雨变化
+
+const chartData2 = ref([]);
+const refresh = ref(1);
+</script>
 
 <style lang="scss" scoped>
 .ConstrucClass {
diff --git a/src/views/sponeScreen/projectHM/ProjectDisplay.vue b/src/views/sponeScreen/projectHM/ProjectDisplay.vue
index 43069df..f016a6d 100644
--- a/src/views/sponeScreen/projectHM/ProjectDisplay.vue
+++ b/src/views/sponeScreen/projectHM/ProjectDisplay.vue
@@ -1,11 +1,67 @@
 <template>
   <div class="publicContainerA">
     <div class="partTitleHM">项目展示列表</div>
-    <div class="ConstrucClass">详情</div>
+    <div class="ConstrucClass">
+      <div class="HeadContent">
+        <el-form-item>
+          <el-input v-model="queryParams.filieDescription" placeholder="请输入项目名称" style="width: 95%; margin: 15px auto" />
+        </el-form-item>
+      </div>
+      <div class="ConstrucNr">
+        <Vue3SeamlessScroll :list="listDataXm" :singleHeight="55" :singleWaitTime="1500" :hover="true" class="scroll">
+          <div class="listXm" v-for="item in listDataXm">
+            <img class="Icon_zp" :src="item.imgUrl" alt="" />
+            <div class="XmName ellipsis">{{ item.name }}</div>
+          </div>
+        </Vue3SeamlessScroll>
+      </div>
+    </div>
   </div>
 </template>
 
-<script setup></script>
+<script setup>
+import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
+
+import Architectural from '@/assets/newImgs/HMScreen/Architectural_icon.png';
+const listDataXm = ref([
+  {
+    name: '老君堂中街22号楼',
+    imgUrl: Architectural,
+  },
+  {
+    name: '包公湖环湖路排水管网及道路海绵改造',
+    imgUrl: Architectural,
+  },
+  {
+    name: '宋都御街改造提升工程',
+    imgUrl: Architectural,
+  },
+  {
+    name: '西环路东京大道改造项目',
+    imgUrl: Architectural,
+  },
+  {
+    name: '复兴大道沿线积水点改造',
+    imgUrl: Architectural,
+  },
+  {
+    name: '开封新区9#雨水泵站',
+    imgUrl: Architectural,
+  },
+  {
+    name: '开封市2022年背街小巷改造工程项目',
+    imgUrl: Architectural,
+  },
+  {
+    name: '汴京路东郊沟雨水泵站新建项目',
+    imgUrl: Architectural,
+  },
+]);
+const AllData = reactive({
+  queryParams: {},
+});
+const { queryParams } = toRefs(AllData);
+</script>
 
 <style lang="scss" scoped>
 .publicContainerA {
@@ -15,5 +71,58 @@
   width: 100%;
   height: calc(100vh - 530px);
   background: #07347f;
+  .HeadContent {
+    width: 100%;
+    height: 65px;
+    // background: red;
+    align-items: center;
+    line-height: 25px;
+    margin-top: 2px;
+  }
+  .ConstrucNr {
+    width: 100%;
+    height: calc(100% - 17%);
+    // background: #2790fb;
+    .scroll {
+      width: 95%;
+      height: calc(100% - 1%);
+      overflow: hidden;
+      // display: inline-block;
+      // background: red;
+      margin: auto;
+    }
+    .listXm {
+      position: relative;
+      width: 95%;
+      height: 50px;
+      background: url('@/assets/newImgs/HMScreen/ujnasf.png') no-repeat;
+      background-size: 100% 100%;
+      display: flex;
+      margin: 5px auto;
+      .Icon_zp {
+        width: 32px;
+        height: 32px;
+        position: relative;
+        top: 9px;
+        left: 20px;
+        // background: red;
+      }
+      .XmName {
+        position: relative;
+        left: 70px;
+        top: 15px;
+        width: 335px;
+        height: 50px;
+        // background: red;
+      }
+    }
+  }
+}
+
+:deep(.el-input__wrapper, .el-textarea__inner) {
+  background: #11559b !important;
+  box-shadow: 0 0 0 0.00521rem #066592 inset !important;
+  border: 1px solid #2790fb;
+  color: #fff !important;
 }
 </style>

diff --git a/src/assets/newImgs/HMScreen/1452.png b/src/assets/newImgs/HMScreen/1452.png
new file mode 100644
index 0000000..13b84fa
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/1452.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/Architectural_icon.png b/src/assets/newImgs/HMScreen/Architectural_icon.png
new file mode 100644
index 0000000..ab662f6
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/Architectural_icon.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/GIS_icon.png b/src/assets/newImgs/HMScreen/GIS_icon.png
new file mode 100644
index 0000000..17e98e6
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/GIS_icon.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/drainage_icon.png b/src/assets/newImgs/HMScreen/drainage_icon.png
new file mode 100644
index 0000000..f9b26d7
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/drainage_icon.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/else_icon.png b/src/assets/newImgs/HMScreen/else_icon.png
new file mode 100644
index 0000000..c33d674
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/else_icon.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/park_icon.png b/src/assets/newImgs/HMScreen/park_icon.png
new file mode 100644
index 0000000..f256d3e
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/park_icon.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/pipe_icon.png b/src/assets/newImgs/HMScreen/pipe_icon.png
new file mode 100644
index 0000000..7534968
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/pipe_icon.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/pipepumping_icon.png b/src/assets/newImgs/HMScreen/pipepumping_icon.png
new file mode 100644
index 0000000..297ed88
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/pipepumping_icon.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/road_icon.png b/src/assets/newImgs/HMScreen/road_icon.png
new file mode 100644
index 0000000..909873a
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/road_icon.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/ujnasf.png b/src/assets/newImgs/HMScreen/ujnasf.png
new file mode 100644
index 0000000..a500b19
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/ujnasf.png
Binary files differ
diff --git a/src/views/sponeScreen/Echarts/AssessmentEcharts.vue b/src/views/sponeScreen/Echarts/AssessmentEcharts.vue
new file mode 100644
index 0000000..da7348d
--- /dev/null
+++ b/src/views/sponeScreen/Echarts/AssessmentEcharts.vue
@@ -0,0 +1,248 @@
+<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 shadowYData = [100, 100];
+      var color = 'rgba(31,227,249,1)';
+      var shadowColor = '#0b5767';
+      var barWidth = 12;
+
+      var option;
+      option = {
+        color: ['#3FFFC2', '#FFF21C'],
+
+        tooltip: {
+          trigger: 'axis',
+          // formatter: "{b}：{c}㎡",
+          // feature: {
+          //   mark: { show: true },
+          //   dataView: { show: true, readOnly: false },
+          //   magicType: { show: true, type: ['line', 'bar'] },
+          //   restore: { show: true },
+          //   saveAsImage: { show: true }
+          // },
+          // axisPointer: {
+          //   type: "cross",
+          //   textStyle: {
+          //     color: "#fff"
+          //   }
+          // },
+          formatter: params => {
+            // console.log(params);
+            var relVal = '' + params[0].name;
+            for (var i = 0, l = params.length; i < l; i++) {
+              if (params[i].seriesName) {
+                let unit = params[i].seriesName == '水深(cm)' ? 'mm' : 'mm';
+                relVal += '<br/>' + params[i].marker + params[i].seriesName + ' ' + params[i].value + unit;
+              }
+            }
+            return relVal;
+          },
+        },
+        grid: {
+          top: 50,
+          bottom: 30,
+        },
+        legend: {
+          data: ['水深(cm)', '降雨量(mm)'],
+          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: '降雨量(mm)',
+            type: 'value',
+            axisLabel: {
+              color: '#fff',
+              show: true,
+            },
+            nameTextStyle: {
+              color: '#fff',
+            },
+            splitLine: {
+              lineStyle: {
+                type: 'dashed',
+                color: '#60C2FF',
+              },
+            },
+            alignTicks: true,
+          },
+
+          {
+            name: '',
+            type: 'value',
+            nameTextStyle: {
+              color: '#fff',
+            },
+            min: 0,
+            max: 20,
+            interval: 5,
+            axisLabel: {
+              show: true,
+              color: '#fff',
+            },
+            splitLine: {
+              lineStyle: {
+                color: '#D1DEEE',
+                type: 'dashed',
+                color: '#53D8FB',
+              },
+            },
+            alignTicks: true,
+          },
+        ],
+        dataZoom: [
+          {
+            // show: true,
+            show: false,
+            height: 4,
+            bottom: 18,
+            start: 0,
+            end: 100,
+            handleSize: '100%',
+            fillerColor: '#94FA41',
+            borderColor: 'transparent',
+            backgroundColor: 'rgba(148, 250, 65, 0.2)',
+            handleStyle: {
+              color: '#94FA41',
+            },
+            moveHandleSize: 0,
+            textStyle: {
+              color: '#fff',
+            },
+          },
+          {
+            type: 'inside',
+            show: true,
+            height: 15,
+            start: 1,
+            end: 35,
+          },
+        ],
+        series: [
+          {
+            name: '水深(cm)',
+            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)',
+                },
+              ]),
+            },
+            data: props.data.yAxis,
+          },
+          {
+            // smooth: true, //变为曲线 默认false折线
+            name: '降雨量(mm)',
+            type: 'line',
+            data: props.data.yAxis2,
+            yAxisIndex: 1,
+            color: '#FFF21C',
+          },
+        ],
+      };
+      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/ConstructionDrawings.vue b/src/views/sponeScreen/Echarts/ConstructionDrawings.vue
new file mode 100644
index 0000000..26e7c0b
--- /dev/null
+++ b/src/views/sponeScreen/Echarts/ConstructionDrawings.vue
@@ -0,0 +1,144 @@
+<template>
+  <div class="soil_constituent">
+    <div class="echarts" ref="echarts"></div>
+    <div class="curInfo">
+      <div class="percent">总类型</div>
+      <div class="name">79</div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+const { proxy } = getCurrentInstance();
+const myChart = shallowRef(null);
+const data = [
+  {
+    name: '已竣工',
+    value: 38,
+  },
+  {
+    name: '已开工',
+    value: 33,
+  },
+  {
+    name: '完成施工指标',
+    value: 3,
+  },
+  {
+    name: '完成设计概算',
+    value: 5,
+  },
+  {
+    name: '项目前期',
+    value: 1,
+  },
+  {
+    name: '尚未立项',
+    value: 0,
+  },
+];
+const curActive = reactive({
+  name: data[0].name,
+  percent: data[0].value,
+});
+const initEcharts = () => {
+  myChart.value = proxy.echarts.init(proxy.$refs.echarts);
+  // 绘制图表
+  myChart.value.setOption({
+    color: ['#159AFF', '#68E1DF ', '#D1DFEF ', '#1662FF ', '#34FFBD', '#FFEF69'],
+    tooltip: {
+      trigger: 'item',
+      formatter: '{b}: {c}%',
+    },
+    legend: {
+      orient: 'vertical',
+      top: '16%',
+      right: '0%',
+      height: 150,
+      itemGap: 15,
+      textStyle: {
+        color: '#D1DEEE',
+        padding: [21, 0, 0, 0],
+      },
+    },
+    grid: {
+      left: '12%',
+      right: '2%',
+      top: '2%',
+      bottom: '2%',
+    },
+    series: [
+      {
+        type: 'pie',
+        radius: ['50%', '80%'],
+        center: ['30%', '50%'],
+        labelLine: {
+          show: false,
+        },
+        label: {
+          show: false,
+        },
+        itemStyle: {
+          borderWidth: 3,
+          borderColor: '#185c78',
+          borderRadius: 8,
+        },
+        emphasis: {
+          itemStyle: {
+            shadowBlur: 10,
+            shadowOffsetX: 0,
+            shadowColor: 'rgba(0, 0, 0, 0.5)',
+          },
+        },
+        data,
+      },
+    ],
+  });
+
+  myChart.value.on('mouseover', function (params) {
+    curActive.name = params.data.name;
+    curActive.percent = params.data.value;
+  });
+  myChart.value.on('mouseout', function () {
+    curActive.name = data[0].name;
+    curActive.percent = data[0].value;
+  });
+};
+
+onMounted(() => {
+  initEcharts();
+  window.addEventListener('resize', () => {
+    myChart.value && myChart.value.resize();
+  });
+});
+</script>
+
+<style lang="scss" scoped>
+.soil_constituent {
+  height: 100%;
+  position: relative;
+  .echarts {
+    height: 100%;
+  }
+  .curInfo {
+    position: absolute;
+    left: 94px;
+    top: 50%;
+    transform: translateY(-50%);
+    text-align: center;
+    width: 100px;
+    .percent {
+      // font-size: 26px;
+      font-size: 18px;
+      color: #fff;
+    }
+    .name {
+      // font-size: 16px;
+      font-size: 26px;
+      color: #d1deee;
+      padding-right: 6%;
+      white-space: nowrap;
+    }
+  }
+}
+</style>
diff --git a/src/views/sponeScreen/projectHM/ConstructionStatus.vue b/src/views/sponeScreen/projectHM/ConstructionStatus.vue
index 1c63534..a5eba20 100644
--- a/src/views/sponeScreen/projectHM/ConstructionStatus.vue
+++ b/src/views/sponeScreen/projectHM/ConstructionStatus.vue
@@ -1,9 +1,16 @@
 <template>
   <div class="partTitleHM">建设状态</div>
 
-  <div class="ConstrucClass">图例</div>
+  <div class="ConstrucClass">
+    <ConstructionDrawings :data="chartData2" :refresh="refresh"></ConstructionDrawings>
+  </div>
 </template>
-<script setup></script>
+<script setup>
+import ConstructionDrawings from '@/views/sponeScreen/Echarts/ConstructionDrawings.vue'; //年际降雨变化
+
+const chartData2 = ref([]);
+const refresh = ref(1);
+</script>
 
 <style lang="scss" scoped>
 .ConstrucClass {
diff --git a/src/views/sponeScreen/projectHM/ProjectDisplay.vue b/src/views/sponeScreen/projectHM/ProjectDisplay.vue
index 43069df..f016a6d 100644
--- a/src/views/sponeScreen/projectHM/ProjectDisplay.vue
+++ b/src/views/sponeScreen/projectHM/ProjectDisplay.vue
@@ -1,11 +1,67 @@
 <template>
   <div class="publicContainerA">
     <div class="partTitleHM">项目展示列表</div>
-    <div class="ConstrucClass">详情</div>
+    <div class="ConstrucClass">
+      <div class="HeadContent">
+        <el-form-item>
+          <el-input v-model="queryParams.filieDescription" placeholder="请输入项目名称" style="width: 95%; margin: 15px auto" />
+        </el-form-item>
+      </div>
+      <div class="ConstrucNr">
+        <Vue3SeamlessScroll :list="listDataXm" :singleHeight="55" :singleWaitTime="1500" :hover="true" class="scroll">
+          <div class="listXm" v-for="item in listDataXm">
+            <img class="Icon_zp" :src="item.imgUrl" alt="" />
+            <div class="XmName ellipsis">{{ item.name }}</div>
+          </div>
+        </Vue3SeamlessScroll>
+      </div>
+    </div>
   </div>
 </template>
 
-<script setup></script>
+<script setup>
+import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
+
+import Architectural from '@/assets/newImgs/HMScreen/Architectural_icon.png';
+const listDataXm = ref([
+  {
+    name: '老君堂中街22号楼',
+    imgUrl: Architectural,
+  },
+  {
+    name: '包公湖环湖路排水管网及道路海绵改造',
+    imgUrl: Architectural,
+  },
+  {
+    name: '宋都御街改造提升工程',
+    imgUrl: Architectural,
+  },
+  {
+    name: '西环路东京大道改造项目',
+    imgUrl: Architectural,
+  },
+  {
+    name: '复兴大道沿线积水点改造',
+    imgUrl: Architectural,
+  },
+  {
+    name: '开封新区9#雨水泵站',
+    imgUrl: Architectural,
+  },
+  {
+    name: '开封市2022年背街小巷改造工程项目',
+    imgUrl: Architectural,
+  },
+  {
+    name: '汴京路东郊沟雨水泵站新建项目',
+    imgUrl: Architectural,
+  },
+]);
+const AllData = reactive({
+  queryParams: {},
+});
+const { queryParams } = toRefs(AllData);
+</script>
 
 <style lang="scss" scoped>
 .publicContainerA {
@@ -15,5 +71,58 @@
   width: 100%;
   height: calc(100vh - 530px);
   background: #07347f;
+  .HeadContent {
+    width: 100%;
+    height: 65px;
+    // background: red;
+    align-items: center;
+    line-height: 25px;
+    margin-top: 2px;
+  }
+  .ConstrucNr {
+    width: 100%;
+    height: calc(100% - 17%);
+    // background: #2790fb;
+    .scroll {
+      width: 95%;
+      height: calc(100% - 1%);
+      overflow: hidden;
+      // display: inline-block;
+      // background: red;
+      margin: auto;
+    }
+    .listXm {
+      position: relative;
+      width: 95%;
+      height: 50px;
+      background: url('@/assets/newImgs/HMScreen/ujnasf.png') no-repeat;
+      background-size: 100% 100%;
+      display: flex;
+      margin: 5px auto;
+      .Icon_zp {
+        width: 32px;
+        height: 32px;
+        position: relative;
+        top: 9px;
+        left: 20px;
+        // background: red;
+      }
+      .XmName {
+        position: relative;
+        left: 70px;
+        top: 15px;
+        width: 335px;
+        height: 50px;
+        // background: red;
+      }
+    }
+  }
+}
+
+:deep(.el-input__wrapper, .el-textarea__inner) {
+  background: #11559b !important;
+  box-shadow: 0 0 0 0.00521rem #066592 inset !important;
+  border: 1px solid #2790fb;
+  color: #fff !important;
 }
 </style>
diff --git a/src/views/sponeScreen/projectHM/ProjectEvaluation.vue b/src/views/sponeScreen/projectHM/ProjectEvaluation.vue
index 65b8213..d124155 100644
--- a/src/views/sponeScreen/projectHM/ProjectEvaluation.vue
+++ b/src/views/sponeScreen/projectHM/ProjectEvaluation.vue
@@ -1,15 +1,34 @@
 <template>
   <div class="publicContainerA">
-    <div class="partTitleHM">项目展示列表</div>
+    <div class="partTitleHM">项目评估</div>
     <div class="ConstrucClass">
-      <div class="WaterAccumulation">积水分析_icon</div>
+      <div class="WaterAccumulation">
+        <div class="HeadContent">
+          <span>积水分析</span>
+        </div>
+        <div class="assessment">
+          <AssessmentEcharts :data="chartData2" :refresh="chartData2.refresh"></AssessmentEcharts>
+        </div>
+      </div>
 
-      <div class="WaterList">111</div>
+      <div class="WaterList">
+        <div class="DropdownBox">11</div>
+      </div>
     </div>
   </div>
 </template>
 
-<script setup></script>
+<script setup>
+import AssessmentEcharts from '@/views/sponeScreen/Echarts/AssessmentEcharts.vue'; // 积水分析
+
+const chartData2 = ref({
+  xAxis: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
+  yAxis: [650, 800, 502, 630, 820, 800, 510, 805, 1203],
+  yAxis2: [7, 9, 10, 9, 11, 10, 12, 15, 18],
+  refresh: 1,
+});
+const refresh = ref(1);
+</script>
 
 <style lang="scss" scoped>
 .publicContainerA {
@@ -20,14 +39,34 @@
   height: calc(100vh - 580px);
   background: #07347f;
   .WaterAccumulation {
-    width: 100%;
+    width: 95%;
     height: 200px;
+    margin: auto;
     // background: yellow;
+    .HeadContent {
+      width: 100%;
+      height: 40px;
+      background: #217dc8;
+      border: 1px solid #61aff0;
+      position: relative;
+      top: 2px;
+    }
+    .assessment {
+      width: 100%;
+      height: 160px;
+      // background: red;
+    }
   }
   .WaterList {
+    width: 95%;
     margin-top: 10px;
     height: calc(100% - 210px);
-    // background: red;
+    margin: auto;
+    background: red;
+    .DropdownBox {
+      height: 55px;
+      background: yellow;
+    }
   }
 }
 </style>

diff --git a/src/assets/newImgs/HMScreen/1452.png b/src/assets/newImgs/HMScreen/1452.png
new file mode 100644
index 0000000..13b84fa
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/1452.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/Architectural_icon.png b/src/assets/newImgs/HMScreen/Architectural_icon.png
new file mode 100644
index 0000000..ab662f6
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/Architectural_icon.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/GIS_icon.png b/src/assets/newImgs/HMScreen/GIS_icon.png
new file mode 100644
index 0000000..17e98e6
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/GIS_icon.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/drainage_icon.png b/src/assets/newImgs/HMScreen/drainage_icon.png
new file mode 100644
index 0000000..f9b26d7
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/drainage_icon.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/else_icon.png b/src/assets/newImgs/HMScreen/else_icon.png
new file mode 100644
index 0000000..c33d674
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/else_icon.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/park_icon.png b/src/assets/newImgs/HMScreen/park_icon.png
new file mode 100644
index 0000000..f256d3e
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/park_icon.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/pipe_icon.png b/src/assets/newImgs/HMScreen/pipe_icon.png
new file mode 100644
index 0000000..7534968
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/pipe_icon.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/pipepumping_icon.png b/src/assets/newImgs/HMScreen/pipepumping_icon.png
new file mode 100644
index 0000000..297ed88
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/pipepumping_icon.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/road_icon.png b/src/assets/newImgs/HMScreen/road_icon.png
new file mode 100644
index 0000000..909873a
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/road_icon.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/ujnasf.png b/src/assets/newImgs/HMScreen/ujnasf.png
new file mode 100644
index 0000000..a500b19
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/ujnasf.png
Binary files differ
diff --git a/src/views/sponeScreen/Echarts/AssessmentEcharts.vue b/src/views/sponeScreen/Echarts/AssessmentEcharts.vue
new file mode 100644
index 0000000..da7348d
--- /dev/null
+++ b/src/views/sponeScreen/Echarts/AssessmentEcharts.vue
@@ -0,0 +1,248 @@
+<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 shadowYData = [100, 100];
+      var color = 'rgba(31,227,249,1)';
+      var shadowColor = '#0b5767';
+      var barWidth = 12;
+
+      var option;
+      option = {
+        color: ['#3FFFC2', '#FFF21C'],
+
+        tooltip: {
+          trigger: 'axis',
+          // formatter: "{b}：{c}㎡",
+          // feature: {
+          //   mark: { show: true },
+          //   dataView: { show: true, readOnly: false },
+          //   magicType: { show: true, type: ['line', 'bar'] },
+          //   restore: { show: true },
+          //   saveAsImage: { show: true }
+          // },
+          // axisPointer: {
+          //   type: "cross",
+          //   textStyle: {
+          //     color: "#fff"
+          //   }
+          // },
+          formatter: params => {
+            // console.log(params);
+            var relVal = '' + params[0].name;
+            for (var i = 0, l = params.length; i < l; i++) {
+              if (params[i].seriesName) {
+                let unit = params[i].seriesName == '水深(cm)' ? 'mm' : 'mm';
+                relVal += '<br/>' + params[i].marker + params[i].seriesName + ' ' + params[i].value + unit;
+              }
+            }
+            return relVal;
+          },
+        },
+        grid: {
+          top: 50,
+          bottom: 30,
+        },
+        legend: {
+          data: ['水深(cm)', '降雨量(mm)'],
+          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: '降雨量(mm)',
+            type: 'value',
+            axisLabel: {
+              color: '#fff',
+              show: true,
+            },
+            nameTextStyle: {
+              color: '#fff',
+            },
+            splitLine: {
+              lineStyle: {
+                type: 'dashed',
+                color: '#60C2FF',
+              },
+            },
+            alignTicks: true,
+          },
+
+          {
+            name: '',
+            type: 'value',
+            nameTextStyle: {
+              color: '#fff',
+            },
+            min: 0,
+            max: 20,
+            interval: 5,
+            axisLabel: {
+              show: true,
+              color: '#fff',
+            },
+            splitLine: {
+              lineStyle: {
+                color: '#D1DEEE',
+                type: 'dashed',
+                color: '#53D8FB',
+              },
+            },
+            alignTicks: true,
+          },
+        ],
+        dataZoom: [
+          {
+            // show: true,
+            show: false,
+            height: 4,
+            bottom: 18,
+            start: 0,
+            end: 100,
+            handleSize: '100%',
+            fillerColor: '#94FA41',
+            borderColor: 'transparent',
+            backgroundColor: 'rgba(148, 250, 65, 0.2)',
+            handleStyle: {
+              color: '#94FA41',
+            },
+            moveHandleSize: 0,
+            textStyle: {
+              color: '#fff',
+            },
+          },
+          {
+            type: 'inside',
+            show: true,
+            height: 15,
+            start: 1,
+            end: 35,
+          },
+        ],
+        series: [
+          {
+            name: '水深(cm)',
+            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)',
+                },
+              ]),
+            },
+            data: props.data.yAxis,
+          },
+          {
+            // smooth: true, //变为曲线 默认false折线
+            name: '降雨量(mm)',
+            type: 'line',
+            data: props.data.yAxis2,
+            yAxisIndex: 1,
+            color: '#FFF21C',
+          },
+        ],
+      };
+      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/ConstructionDrawings.vue b/src/views/sponeScreen/Echarts/ConstructionDrawings.vue
new file mode 100644
index 0000000..26e7c0b
--- /dev/null
+++ b/src/views/sponeScreen/Echarts/ConstructionDrawings.vue
@@ -0,0 +1,144 @@
+<template>
+  <div class="soil_constituent">
+    <div class="echarts" ref="echarts"></div>
+    <div class="curInfo">
+      <div class="percent">总类型</div>
+      <div class="name">79</div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+const { proxy } = getCurrentInstance();
+const myChart = shallowRef(null);
+const data = [
+  {
+    name: '已竣工',
+    value: 38,
+  },
+  {
+    name: '已开工',
+    value: 33,
+  },
+  {
+    name: '完成施工指标',
+    value: 3,
+  },
+  {
+    name: '完成设计概算',
+    value: 5,
+  },
+  {
+    name: '项目前期',
+    value: 1,
+  },
+  {
+    name: '尚未立项',
+    value: 0,
+  },
+];
+const curActive = reactive({
+  name: data[0].name,
+  percent: data[0].value,
+});
+const initEcharts = () => {
+  myChart.value = proxy.echarts.init(proxy.$refs.echarts);
+  // 绘制图表
+  myChart.value.setOption({
+    color: ['#159AFF', '#68E1DF ', '#D1DFEF ', '#1662FF ', '#34FFBD', '#FFEF69'],
+    tooltip: {
+      trigger: 'item',
+      formatter: '{b}: {c}%',
+    },
+    legend: {
+      orient: 'vertical',
+      top: '16%',
+      right: '0%',
+      height: 150,
+      itemGap: 15,
+      textStyle: {
+        color: '#D1DEEE',
+        padding: [21, 0, 0, 0],
+      },
+    },
+    grid: {
+      left: '12%',
+      right: '2%',
+      top: '2%',
+      bottom: '2%',
+    },
+    series: [
+      {
+        type: 'pie',
+        radius: ['50%', '80%'],
+        center: ['30%', '50%'],
+        labelLine: {
+          show: false,
+        },
+        label: {
+          show: false,
+        },
+        itemStyle: {
+          borderWidth: 3,
+          borderColor: '#185c78',
+          borderRadius: 8,
+        },
+        emphasis: {
+          itemStyle: {
+            shadowBlur: 10,
+            shadowOffsetX: 0,
+            shadowColor: 'rgba(0, 0, 0, 0.5)',
+          },
+        },
+        data,
+      },
+    ],
+  });
+
+  myChart.value.on('mouseover', function (params) {
+    curActive.name = params.data.name;
+    curActive.percent = params.data.value;
+  });
+  myChart.value.on('mouseout', function () {
+    curActive.name = data[0].name;
+    curActive.percent = data[0].value;
+  });
+};
+
+onMounted(() => {
+  initEcharts();
+  window.addEventListener('resize', () => {
+    myChart.value && myChart.value.resize();
+  });
+});
+</script>
+
+<style lang="scss" scoped>
+.soil_constituent {
+  height: 100%;
+  position: relative;
+  .echarts {
+    height: 100%;
+  }
+  .curInfo {
+    position: absolute;
+    left: 94px;
+    top: 50%;
+    transform: translateY(-50%);
+    text-align: center;
+    width: 100px;
+    .percent {
+      // font-size: 26px;
+      font-size: 18px;
+      color: #fff;
+    }
+    .name {
+      // font-size: 16px;
+      font-size: 26px;
+      color: #d1deee;
+      padding-right: 6%;
+      white-space: nowrap;
+    }
+  }
+}
+</style>
diff --git a/src/views/sponeScreen/projectHM/ConstructionStatus.vue b/src/views/sponeScreen/projectHM/ConstructionStatus.vue
index 1c63534..a5eba20 100644
--- a/src/views/sponeScreen/projectHM/ConstructionStatus.vue
+++ b/src/views/sponeScreen/projectHM/ConstructionStatus.vue
@@ -1,9 +1,16 @@
 <template>
   <div class="partTitleHM">建设状态</div>
 
-  <div class="ConstrucClass">图例</div>
+  <div class="ConstrucClass">
+    <ConstructionDrawings :data="chartData2" :refresh="refresh"></ConstructionDrawings>
+  </div>
 </template>
-<script setup></script>
+<script setup>
+import ConstructionDrawings from '@/views/sponeScreen/Echarts/ConstructionDrawings.vue'; //年际降雨变化
+
+const chartData2 = ref([]);
+const refresh = ref(1);
+</script>
 
 <style lang="scss" scoped>
 .ConstrucClass {
diff --git a/src/views/sponeScreen/projectHM/ProjectDisplay.vue b/src/views/sponeScreen/projectHM/ProjectDisplay.vue
index 43069df..f016a6d 100644
--- a/src/views/sponeScreen/projectHM/ProjectDisplay.vue
+++ b/src/views/sponeScreen/projectHM/ProjectDisplay.vue
@@ -1,11 +1,67 @@
 <template>
   <div class="publicContainerA">
     <div class="partTitleHM">项目展示列表</div>
-    <div class="ConstrucClass">详情</div>
+    <div class="ConstrucClass">
+      <div class="HeadContent">
+        <el-form-item>
+          <el-input v-model="queryParams.filieDescription" placeholder="请输入项目名称" style="width: 95%; margin: 15px auto" />
+        </el-form-item>
+      </div>
+      <div class="ConstrucNr">
+        <Vue3SeamlessScroll :list="listDataXm" :singleHeight="55" :singleWaitTime="1500" :hover="true" class="scroll">
+          <div class="listXm" v-for="item in listDataXm">
+            <img class="Icon_zp" :src="item.imgUrl" alt="" />
+            <div class="XmName ellipsis">{{ item.name }}</div>
+          </div>
+        </Vue3SeamlessScroll>
+      </div>
+    </div>
   </div>
 </template>
 
-<script setup></script>
+<script setup>
+import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
+
+import Architectural from '@/assets/newImgs/HMScreen/Architectural_icon.png';
+const listDataXm = ref([
+  {
+    name: '老君堂中街22号楼',
+    imgUrl: Architectural,
+  },
+  {
+    name: '包公湖环湖路排水管网及道路海绵改造',
+    imgUrl: Architectural,
+  },
+  {
+    name: '宋都御街改造提升工程',
+    imgUrl: Architectural,
+  },
+  {
+    name: '西环路东京大道改造项目',
+    imgUrl: Architectural,
+  },
+  {
+    name: '复兴大道沿线积水点改造',
+    imgUrl: Architectural,
+  },
+  {
+    name: '开封新区9#雨水泵站',
+    imgUrl: Architectural,
+  },
+  {
+    name: '开封市2022年背街小巷改造工程项目',
+    imgUrl: Architectural,
+  },
+  {
+    name: '汴京路东郊沟雨水泵站新建项目',
+    imgUrl: Architectural,
+  },
+]);
+const AllData = reactive({
+  queryParams: {},
+});
+const { queryParams } = toRefs(AllData);
+</script>
 
 <style lang="scss" scoped>
 .publicContainerA {
@@ -15,5 +71,58 @@
   width: 100%;
   height: calc(100vh - 530px);
   background: #07347f;
+  .HeadContent {
+    width: 100%;
+    height: 65px;
+    // background: red;
+    align-items: center;
+    line-height: 25px;
+    margin-top: 2px;
+  }
+  .ConstrucNr {
+    width: 100%;
+    height: calc(100% - 17%);
+    // background: #2790fb;
+    .scroll {
+      width: 95%;
+      height: calc(100% - 1%);
+      overflow: hidden;
+      // display: inline-block;
+      // background: red;
+      margin: auto;
+    }
+    .listXm {
+      position: relative;
+      width: 95%;
+      height: 50px;
+      background: url('@/assets/newImgs/HMScreen/ujnasf.png') no-repeat;
+      background-size: 100% 100%;
+      display: flex;
+      margin: 5px auto;
+      .Icon_zp {
+        width: 32px;
+        height: 32px;
+        position: relative;
+        top: 9px;
+        left: 20px;
+        // background: red;
+      }
+      .XmName {
+        position: relative;
+        left: 70px;
+        top: 15px;
+        width: 335px;
+        height: 50px;
+        // background: red;
+      }
+    }
+  }
+}
+
+:deep(.el-input__wrapper, .el-textarea__inner) {
+  background: #11559b !important;
+  box-shadow: 0 0 0 0.00521rem #066592 inset !important;
+  border: 1px solid #2790fb;
+  color: #fff !important;
 }
 </style>
diff --git a/src/views/sponeScreen/projectHM/ProjectEvaluation.vue b/src/views/sponeScreen/projectHM/ProjectEvaluation.vue
index 65b8213..d124155 100644
--- a/src/views/sponeScreen/projectHM/ProjectEvaluation.vue
+++ b/src/views/sponeScreen/projectHM/ProjectEvaluation.vue
@@ -1,15 +1,34 @@
 <template>
   <div class="publicContainerA">
-    <div class="partTitleHM">项目展示列表</div>
+    <div class="partTitleHM">项目评估</div>
     <div class="ConstrucClass">
-      <div class="WaterAccumulation">积水分析_icon</div>
+      <div class="WaterAccumulation">
+        <div class="HeadContent">
+          <span>积水分析</span>
+        </div>
+        <div class="assessment">
+          <AssessmentEcharts :data="chartData2" :refresh="chartData2.refresh"></AssessmentEcharts>
+        </div>
+      </div>
 
-      <div class="WaterList">111</div>
+      <div class="WaterList">
+        <div class="DropdownBox">11</div>
+      </div>
     </div>
   </div>
 </template>
 
-<script setup></script>
+<script setup>
+import AssessmentEcharts from '@/views/sponeScreen/Echarts/AssessmentEcharts.vue'; // 积水分析
+
+const chartData2 = ref({
+  xAxis: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
+  yAxis: [650, 800, 502, 630, 820, 800, 510, 805, 1203],
+  yAxis2: [7, 9, 10, 9, 11, 10, 12, 15, 18],
+  refresh: 1,
+});
+const refresh = ref(1);
+</script>
 
 <style lang="scss" scoped>
 .publicContainerA {
@@ -20,14 +39,34 @@
   height: calc(100vh - 580px);
   background: #07347f;
   .WaterAccumulation {
-    width: 100%;
+    width: 95%;
     height: 200px;
+    margin: auto;
     // background: yellow;
+    .HeadContent {
+      width: 100%;
+      height: 40px;
+      background: #217dc8;
+      border: 1px solid #61aff0;
+      position: relative;
+      top: 2px;
+    }
+    .assessment {
+      width: 100%;
+      height: 160px;
+      // background: red;
+    }
   }
   .WaterList {
+    width: 95%;
     margin-top: 10px;
     height: calc(100% - 210px);
-    // background: red;
+    margin: auto;
+    background: red;
+    .DropdownBox {
+      height: 55px;
+      background: yellow;
+    }
   }
 }
 </style>
diff --git a/src/views/sponeScreen/projectHM/ProjectYype.vue b/src/views/sponeScreen/projectHM/ProjectYype.vue
index bbd1f1c..5732dfb 100644
--- a/src/views/sponeScreen/projectHM/ProjectYype.vue
+++ b/src/views/sponeScreen/projectHM/ProjectYype.vue
@@ -1,13 +1,137 @@
 <template>
   <div class="partTitleHM">项目类型</div>
-  <div class="ConstrucClass">项目类型</div>
+  <div class="ConstrucClass">
+    <div class="ConstruList">
+      <div class="ConstruListA" v-for="item in list">
+        <div class="ConstruIcon">
+          <img class="Icon_zp" :src="item.imgUrl" alt="" />
+        </div>
+        <div class="ConstruNr">
+          <p class="ellipsis">{{ item.name }}</p>
+          <p class="NumA">{{ item.val }}</p>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
-<script setup></script>
+<script setup>
+import Architectural from '@/assets/newImgs/HMScreen/Architectural_icon.png';
+import drainage from '@/assets/newImgs/HMScreen/drainage_icon.png';
+import else_icon from '@/assets/newImgs/HMScreen/else_icon.png';
+import GIS_icon from '@/assets/newImgs/HMScreen/GIS_icon.png';
+import park from '@/assets/newImgs/HMScreen/park_icon.png';
+import pipe from '@/assets/newImgs/HMScreen/pipe_icon.png';
+import pipepumping from '@/assets/newImgs/HMScreen/pipepumping_icon.png';
+import road from '@/assets/newImgs/HMScreen/road_icon.png';
+
+const list = ref([
+  {
+    name: '建筑与社区',
+    val: '25',
+    imgUrl: Architectural,
+    isCheck: false,
+  },
+  {
+    name: '道路广场',
+    val: '25',
+    imgUrl: road,
+    isCheck: false,
+  },
+  {
+    name: '公园绿地',
+    val: '25',
+    imgUrl: park,
+    isCheck: false,
+  },
+  {
+    name: '海绵水系',
+    val: '25',
+    imgUrl: drainage,
+    isCheck: false,
+  },
+  {
+    name: '管网排查',
+    val: '25',
+    imgUrl: pipe,
+    isCheck: false,
+  },
+  {
+    name: '管网及泵站',
+    val: '25',
+    imgUrl: pipepumping,
+    isCheck: false,
+  },
+  {
+    name: 'GIS平台与监测设施类',
+    val: '25',
+    imgUrl: GIS_icon,
+    isCheck: false,
+  },
+  {
+    name: '其他',
+    val: '25',
+    imgUrl: else_icon,
+    isCheck: false,
+  },
+]);
+</script>
 
 <style lang="scss" scoped>
 .ConstrucClass {
-  width: 100%;
+  // width: 100%;
+  width: 460px;
   height: 310px;
   background: #07347f;
+
+  .ConstruList {
+    width: 95%;
+    // background: red;
+    margin: auto;
+    display: flex;
+    flex-flow: row wrap;
+
+    .ConstruListA {
+      margin-left: 10px;
+      flex-basis: 200px;
+      width: 45%;
+      height: 65px;
+      background: url('@/assets/newImgs/HMScreen/1452.png') no-repeat;
+      background-size: 100% 100%;
+
+      margin-top: 10px;
+      display: flex;
+    }
+  }
+}
+.ConstruIcon {
+  width: 30%;
+  height: 64px;
+  // border: 1px solid #0096e7;
+  .Icon_zp {
+    width: 40px;
+    height: 40px;
+    // background: red;
+    margin: 15px 10px;
+  }
+  // background-image: linear-gradient(#004891, #3f80e7);
+}
+.ConstruNr {
+  width: 70%;
+  height: 65px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  .ellipsis {
+    padding: 5px;
+    width: 80%;
+    // background: red;
+  }
+  .NumA {
+    width: 20%;
+    font-size: 20px;
+    color: #48fff0;
+    // background: lawngreen;
+  }
+  // background: goldenrod;
 }
 </style>