diff --git a/src/assets/newImgs/HMScreen/arrow_img.png b/src/assets/newImgs/HMScreen/arrow_img.png
index 27641d0..e5a8d90 100644
--- a/src/assets/newImgs/HMScreen/arrow_img.png
+++ b/src/assets/newImgs/HMScreen/arrow_img.png
Binary files differ

diff --git a/src/assets/newImgs/HMScreen/arrow_img.png b/src/assets/newImgs/HMScreen/arrow_img.png
index 27641d0..e5a8d90 100644
--- a/src/assets/newImgs/HMScreen/arrow_img.png
+++ b/src/assets/newImgs/HMScreen/arrow_img.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/headBg.png b/src/assets/newImgs/HMScreen/headBg.png
index fa7e9dd..d603316 100644
--- a/src/assets/newImgs/HMScreen/headBg.png
+++ b/src/assets/newImgs/HMScreen/headBg.png
Binary files differ

diff --git a/src/assets/newImgs/HMScreen/arrow_img.png b/src/assets/newImgs/HMScreen/arrow_img.png
index 27641d0..e5a8d90 100644
--- a/src/assets/newImgs/HMScreen/arrow_img.png
+++ b/src/assets/newImgs/HMScreen/arrow_img.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/headBg.png b/src/assets/newImgs/HMScreen/headBg.png
index fa7e9dd..d603316 100644
--- a/src/assets/newImgs/HMScreen/headBg.png
+++ b/src/assets/newImgs/HMScreen/headBg.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/video.png b/src/assets/newImgs/HMScreen/video.png
new file mode 100644
index 0000000..3c9b4a2
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/video.png
Binary files differ

diff --git a/src/assets/newImgs/HMScreen/arrow_img.png b/src/assets/newImgs/HMScreen/arrow_img.png
index 27641d0..e5a8d90 100644
--- a/src/assets/newImgs/HMScreen/arrow_img.png
+++ b/src/assets/newImgs/HMScreen/arrow_img.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/headBg.png b/src/assets/newImgs/HMScreen/headBg.png
index fa7e9dd..d603316 100644
--- a/src/assets/newImgs/HMScreen/headBg.png
+++ b/src/assets/newImgs/HMScreen/headBg.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/video.png b/src/assets/newImgs/HMScreen/video.png
new file mode 100644
index 0000000..3c9b4a2
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/video.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/videoTest.png b/src/assets/newImgs/HMScreen/videoTest.png
new file mode 100644
index 0000000..03679d2
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/videoTest.png
Binary files differ

diff --git a/src/assets/newImgs/HMScreen/arrow_img.png b/src/assets/newImgs/HMScreen/arrow_img.png
index 27641d0..e5a8d90 100644
--- a/src/assets/newImgs/HMScreen/arrow_img.png
+++ b/src/assets/newImgs/HMScreen/arrow_img.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/headBg.png b/src/assets/newImgs/HMScreen/headBg.png
index fa7e9dd..d603316 100644
--- a/src/assets/newImgs/HMScreen/headBg.png
+++ b/src/assets/newImgs/HMScreen/headBg.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/video.png b/src/assets/newImgs/HMScreen/video.png
new file mode 100644
index 0000000..3c9b4a2
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/video.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/videoTest.png b/src/assets/newImgs/HMScreen/videoTest.png
new file mode 100644
index 0000000..03679d2
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/videoTest.png
Binary files differ
diff --git a/src/assets/styles/variables.module.scss b/src/assets/styles/variables.module.scss
index 72823fe..1c4d42e 100644
--- a/src/assets/styles/variables.module.scss
+++ b/src/assets/styles/variables.module.scss
@@ -1,9 +1,9 @@
 // base color
 $blue: #324157;
 $light-blue: #3a71a8;
-$red: #c03639;
+$red: #ff4545;
 $pink: #e65d6e;
-$green: #30b08f;
+$green: #18e87a;
 $tiffany: #4ab7bd;
 $yellow: #fec171;
 $panGreen: #30b08f;

diff --git a/src/assets/newImgs/HMScreen/arrow_img.png b/src/assets/newImgs/HMScreen/arrow_img.png
index 27641d0..e5a8d90 100644
--- a/src/assets/newImgs/HMScreen/arrow_img.png
+++ b/src/assets/newImgs/HMScreen/arrow_img.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/headBg.png b/src/assets/newImgs/HMScreen/headBg.png
index fa7e9dd..d603316 100644
--- a/src/assets/newImgs/HMScreen/headBg.png
+++ b/src/assets/newImgs/HMScreen/headBg.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/video.png b/src/assets/newImgs/HMScreen/video.png
new file mode 100644
index 0000000..3c9b4a2
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/video.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/videoTest.png b/src/assets/newImgs/HMScreen/videoTest.png
new file mode 100644
index 0000000..03679d2
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/videoTest.png
Binary files differ
diff --git a/src/assets/styles/variables.module.scss b/src/assets/styles/variables.module.scss
index 72823fe..1c4d42e 100644
--- a/src/assets/styles/variables.module.scss
+++ b/src/assets/styles/variables.module.scss
@@ -1,9 +1,9 @@
 // base color
 $blue: #324157;
 $light-blue: #3a71a8;
-$red: #c03639;
+$red: #ff4545;
 $pink: #e65d6e;
-$green: #30b08f;
+$green: #18e87a;
 $tiffany: #4ab7bd;
 $yellow: #fec171;
 $panGreen: #30b08f;
diff --git a/src/views/sponeScreen/Echarts/echartBar3D.vue b/src/views/sponeScreen/Echarts/echartBar3D.vue
index 0df0053..3d23886 100644
--- a/src/views/sponeScreen/Echarts/echartBar3D.vue
+++ b/src/views/sponeScreen/Echarts/echartBar3D.vue
@@ -31,9 +31,9 @@
         color: [
           '#63caff',
           '#49beff',
-          '#03387a',
-          '#03387a',
-          '#03387a',
+          'rgba(18, 81, 210, 0.3)',
+          'rgba(18, 81, 210, 0.3)',
+          'rgba(18, 81, 210, 0.3)',
           '#6c93ee',
           '#a9abff',
           '#f7a23f',
@@ -50,15 +50,15 @@
         ],
         grid: {
           containLabel: true,
-          left: 20,
+          left: 10,
           right: 20,
           bottom: 10,
-          top: 40,
+          top: 30,
         },
         xAxis: {
           axisLabel: {
             color: '#c0c3cd',
-            fontSize: 14,
+            fontSize: 12,
             interval: 0,
           },
           axisTick: {
@@ -84,7 +84,7 @@
         yAxis: {
           axisLabel: {
             color: '#fff',
-            fontSize: 13,
+            fontSize: 12,
           },
           axisTick: {
             lineStyle: {

diff --git a/src/assets/newImgs/HMScreen/arrow_img.png b/src/assets/newImgs/HMScreen/arrow_img.png
index 27641d0..e5a8d90 100644
--- a/src/assets/newImgs/HMScreen/arrow_img.png
+++ b/src/assets/newImgs/HMScreen/arrow_img.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/headBg.png b/src/assets/newImgs/HMScreen/headBg.png
index fa7e9dd..d603316 100644
--- a/src/assets/newImgs/HMScreen/headBg.png
+++ b/src/assets/newImgs/HMScreen/headBg.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/video.png b/src/assets/newImgs/HMScreen/video.png
new file mode 100644
index 0000000..3c9b4a2
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/video.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/videoTest.png b/src/assets/newImgs/HMScreen/videoTest.png
new file mode 100644
index 0000000..03679d2
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/videoTest.png
Binary files differ
diff --git a/src/assets/styles/variables.module.scss b/src/assets/styles/variables.module.scss
index 72823fe..1c4d42e 100644
--- a/src/assets/styles/variables.module.scss
+++ b/src/assets/styles/variables.module.scss
@@ -1,9 +1,9 @@
 // base color
 $blue: #324157;
 $light-blue: #3a71a8;
-$red: #c03639;
+$red: #ff4545;
 $pink: #e65d6e;
-$green: #30b08f;
+$green: #18e87a;
 $tiffany: #4ab7bd;
 $yellow: #fec171;
 $panGreen: #30b08f;
diff --git a/src/views/sponeScreen/Echarts/echartBar3D.vue b/src/views/sponeScreen/Echarts/echartBar3D.vue
index 0df0053..3d23886 100644
--- a/src/views/sponeScreen/Echarts/echartBar3D.vue
+++ b/src/views/sponeScreen/Echarts/echartBar3D.vue
@@ -31,9 +31,9 @@
         color: [
           '#63caff',
           '#49beff',
-          '#03387a',
-          '#03387a',
-          '#03387a',
+          'rgba(18, 81, 210, 0.3)',
+          'rgba(18, 81, 210, 0.3)',
+          'rgba(18, 81, 210, 0.3)',
           '#6c93ee',
           '#a9abff',
           '#f7a23f',
@@ -50,15 +50,15 @@
         ],
         grid: {
           containLabel: true,
-          left: 20,
+          left: 10,
           right: 20,
           bottom: 10,
-          top: 40,
+          top: 30,
         },
         xAxis: {
           axisLabel: {
             color: '#c0c3cd',
-            fontSize: 14,
+            fontSize: 12,
             interval: 0,
           },
           axisTick: {
@@ -84,7 +84,7 @@
         yAxis: {
           axisLabel: {
             color: '#fff',
-            fontSize: 13,
+            fontSize: 12,
           },
           axisTick: {
             lineStyle: {
diff --git a/src/views/sponeScreen/cityGK/headHMAimg.vue b/src/views/sponeScreen/cityGK/headHMAimg.vue
index aa99c96..78e6a6e 100644
--- a/src/views/sponeScreen/cityGK/headHMAimg.vue
+++ b/src/views/sponeScreen/cityGK/headHMAimg.vue
@@ -6,7 +6,7 @@
       </div>
       <div class="Selectiontime">
         <div class="SelectiontimeA">入选</div>
-        <div class="SelectiontimeB">2022年5月</div>
+        <div class="SelectiontimeB">2022-05</div>
       </div>
       <div class="IconClass">
         <div class="IconClassZp"></div>
@@ -18,7 +18,7 @@
       </div>
       <div class="Selectiontime">
         <div class="SelectiontimeA">建设期</div>
-        <div class="SelectiontimeB">2022年-2024年</div>
+        <div class="SelectiontimeB">2022-2024</div>
       </div>
       <div class="IconClass">
         <div class="IconClassZp"></div>
@@ -30,10 +30,10 @@
       </div>
       <div class="Selectiontime">
         <div class="SelectiontimeA">评估期</div>
-        <div class="SelectiontimeB">2025年</div>
+        <div class="SelectiontimeB">2025</div>
       </div>
       <div class="IconClass">
-        <div class="IconClassZp"></div>
+        <div class="IconClassZp" style="margin-right: 15px"></div>
       </div>
     </div>
     <div class="four">
@@ -42,7 +42,7 @@
       </div>
       <div class="Selectiontime">
         <div class="SelectiontimeA">长效运维期</div>
-        <div class="SelectiontimeB">2024年-2030年</div>
+        <div class="SelectiontimeB">2024-2030</div>
       </div>
     </div>
   </div>
@@ -55,13 +55,13 @@
   margin-top: 50px;
   //   border: 1px solid red;
   display: flex;
+  padding-left: 10px;
   .one,
   .two,
   .three,
   .four {
-    width: 30%;
+    width: 24.5%;
     height: 100px;
-    // border: 1px solid blue;
     display: flex;
   }
 
@@ -72,6 +72,7 @@
     display: flex;
     justify-content: center; /* 水平居中 */
     align-items: center; /* 垂直居中 */
+    margin-right: 10px;
 
     .PhotoClassA {
       width: 50px;
@@ -100,23 +101,20 @@
       width: 100%;
       height: 50px;
       color: #3afff8;
-      font-size: 16px;
+      font-size: 18px;
+      margin-top: 8px;
       //   line-height: 50px;
       //   background: rgb(66, 50, 205);
     }
   }
   .IconClass {
-    width: 10%;
-    height: 100px;
-    // background: yellowgreen;
     display: flex;
     justify-content: center; /* 水平居中 */
     align-items: center; /* 垂直居中 */
+
     .IconClassZp {
-      width: 20px;
-      height: 20px;
-      position: relative;
-      //   left: 10px;
+      width: 34px;
+      height: 18px;
       background: url('@/assets/newImgs/HMScreen/arrow_img.png') no-repeat;
       background-size: 100% 100%;
     }

diff --git a/src/assets/newImgs/HMScreen/arrow_img.png b/src/assets/newImgs/HMScreen/arrow_img.png
index 27641d0..e5a8d90 100644
--- a/src/assets/newImgs/HMScreen/arrow_img.png
+++ b/src/assets/newImgs/HMScreen/arrow_img.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/headBg.png b/src/assets/newImgs/HMScreen/headBg.png
index fa7e9dd..d603316 100644
--- a/src/assets/newImgs/HMScreen/headBg.png
+++ b/src/assets/newImgs/HMScreen/headBg.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/video.png b/src/assets/newImgs/HMScreen/video.png
new file mode 100644
index 0000000..3c9b4a2
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/video.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/videoTest.png b/src/assets/newImgs/HMScreen/videoTest.png
new file mode 100644
index 0000000..03679d2
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/videoTest.png
Binary files differ
diff --git a/src/assets/styles/variables.module.scss b/src/assets/styles/variables.module.scss
index 72823fe..1c4d42e 100644
--- a/src/assets/styles/variables.module.scss
+++ b/src/assets/styles/variables.module.scss
@@ -1,9 +1,9 @@
 // base color
 $blue: #324157;
 $light-blue: #3a71a8;
-$red: #c03639;
+$red: #ff4545;
 $pink: #e65d6e;
-$green: #30b08f;
+$green: #18e87a;
 $tiffany: #4ab7bd;
 $yellow: #fec171;
 $panGreen: #30b08f;
diff --git a/src/views/sponeScreen/Echarts/echartBar3D.vue b/src/views/sponeScreen/Echarts/echartBar3D.vue
index 0df0053..3d23886 100644
--- a/src/views/sponeScreen/Echarts/echartBar3D.vue
+++ b/src/views/sponeScreen/Echarts/echartBar3D.vue
@@ -31,9 +31,9 @@
         color: [
           '#63caff',
           '#49beff',
-          '#03387a',
-          '#03387a',
-          '#03387a',
+          'rgba(18, 81, 210, 0.3)',
+          'rgba(18, 81, 210, 0.3)',
+          'rgba(18, 81, 210, 0.3)',
           '#6c93ee',
           '#a9abff',
           '#f7a23f',
@@ -50,15 +50,15 @@
         ],
         grid: {
           containLabel: true,
-          left: 20,
+          left: 10,
           right: 20,
           bottom: 10,
-          top: 40,
+          top: 30,
         },
         xAxis: {
           axisLabel: {
             color: '#c0c3cd',
-            fontSize: 14,
+            fontSize: 12,
             interval: 0,
           },
           axisTick: {
@@ -84,7 +84,7 @@
         yAxis: {
           axisLabel: {
             color: '#fff',
-            fontSize: 13,
+            fontSize: 12,
           },
           axisTick: {
             lineStyle: {
diff --git a/src/views/sponeScreen/cityGK/headHMAimg.vue b/src/views/sponeScreen/cityGK/headHMAimg.vue
index aa99c96..78e6a6e 100644
--- a/src/views/sponeScreen/cityGK/headHMAimg.vue
+++ b/src/views/sponeScreen/cityGK/headHMAimg.vue
@@ -6,7 +6,7 @@
       </div>
       <div class="Selectiontime">
         <div class="SelectiontimeA">入选</div>
-        <div class="SelectiontimeB">2022年5月</div>
+        <div class="SelectiontimeB">2022-05</div>
       </div>
       <div class="IconClass">
         <div class="IconClassZp"></div>
@@ -18,7 +18,7 @@
       </div>
       <div class="Selectiontime">
         <div class="SelectiontimeA">建设期</div>
-        <div class="SelectiontimeB">2022年-2024年</div>
+        <div class="SelectiontimeB">2022-2024</div>
       </div>
       <div class="IconClass">
         <div class="IconClassZp"></div>
@@ -30,10 +30,10 @@
       </div>
       <div class="Selectiontime">
         <div class="SelectiontimeA">评估期</div>
-        <div class="SelectiontimeB">2025年</div>
+        <div class="SelectiontimeB">2025</div>
       </div>
       <div class="IconClass">
-        <div class="IconClassZp"></div>
+        <div class="IconClassZp" style="margin-right: 15px"></div>
       </div>
     </div>
     <div class="four">
@@ -42,7 +42,7 @@
       </div>
       <div class="Selectiontime">
         <div class="SelectiontimeA">长效运维期</div>
-        <div class="SelectiontimeB">2024年-2030年</div>
+        <div class="SelectiontimeB">2024-2030</div>
       </div>
     </div>
   </div>
@@ -55,13 +55,13 @@
   margin-top: 50px;
   //   border: 1px solid red;
   display: flex;
+  padding-left: 10px;
   .one,
   .two,
   .three,
   .four {
-    width: 30%;
+    width: 24.5%;
     height: 100px;
-    // border: 1px solid blue;
     display: flex;
   }
 
@@ -72,6 +72,7 @@
     display: flex;
     justify-content: center; /* 水平居中 */
     align-items: center; /* 垂直居中 */
+    margin-right: 10px;
 
     .PhotoClassA {
       width: 50px;
@@ -100,23 +101,20 @@
       width: 100%;
       height: 50px;
       color: #3afff8;
-      font-size: 16px;
+      font-size: 18px;
+      margin-top: 8px;
       //   line-height: 50px;
       //   background: rgb(66, 50, 205);
     }
   }
   .IconClass {
-    width: 10%;
-    height: 100px;
-    // background: yellowgreen;
     display: flex;
     justify-content: center; /* 水平居中 */
     align-items: center; /* 垂直居中 */
+
     .IconClassZp {
-      width: 20px;
-      height: 20px;
-      position: relative;
-      //   left: 10px;
+      width: 34px;
+      height: 18px;
       background: url('@/assets/newImgs/HMScreen/arrow_img.png') no-repeat;
       background-size: 100% 100%;
     }
diff --git a/src/views/sponeScreen/waterFlood/equipMonitor.vue b/src/views/sponeScreen/waterFlood/equipMonitor.vue
index 67b024f..f094630 100644
--- a/src/views/sponeScreen/waterFlood/equipMonitor.vue
+++ b/src/views/sponeScreen/waterFlood/equipMonitor.vue
@@ -2,18 +2,167 @@
   <!-- 监测设备 -->
   <div class="equipJCPage">
     <div class="partTitleHM">监测设备</div>
-    <div class="partContHM">监测设备</div>
+    <div class="partContHM">
+      <!-- 类型 -->
+      <div class="flex flex-wrap flex-justcontent-spacearound">
+        <div
+          :class="['part', stationIndex == item.value ? 'active' : '']"
+          v-for="(item, index) in stationType"
+          :key="index"
+          @click="checkStation(item)"
+        >
+          {{ item.label }}
+        </div>
+      </div>
+      <!-- 监测内容 -->
+      <div class="monitorCont">
+        <el-select clearable v-model="stationCode" placeholder="请输入站点名称" class="stationSel">
+          <el-option v-for="item in stationList" :key="item.stationCode" :label="item.stationName" :value="item.stationCode" />
+        </el-select>
+        <div class="contPart" v-for="item in stationList" :key="item.stationCode">
+          <p class="title">{{ item.stationName }}</p>
+          <p>
+            站点状态 <span :class="[item.status1 == '在线' ? 'green' : 'red']">{{ item.status1 }}</span>
+          </p>
+          <p>
+            数据状态 <span :class="[item.status2 == '正常' ? 'green' : 'red']">{{ item.status2 }}</span>
+          </p>
+          <p>
+            站点类型 <span>{{ item.type }}</span>
+          </p>
+          <p>
+            最后通讯 <span>{{ item.date }}</span>
+          </p>
+          <img src="@/assets/newImgs/HMScreen/video.png" alt="" v-if="!!item.video" @click="dialogShowVideo = true" />
+        </div>
+      </div>
+    </div>
+    <!-- 视频弹窗 -->
+    <el-dialog title="站点视频" v-model="dialogShowVideo" width="800px" append-to-body>
+      <img src="@/assets/newImgs/HMScreen/videoTest.png" alt="" />
+    </el-dialog>
   </div>
 </template>
 
 <script setup>
 const { proxy } = getCurrentInstance();
 
+const dialogShowVideo = ref(false);
+const stationIndex = ref('');
+const stationType = ref([
+  { value: '', label: '全部(87)' },
+  { value: '1', label: '源头减排(29)' },
+  { value: '5', label: '河道断面(5)' },
+  { value: '6', label: '污水处理厂(5)' },
+  { value: '2', label: '雨量站(8)' },
+  { value: '7', label: '泵站(2)' },
+  { value: '4', label: '管网(20)' },
+  { value: '3', label: '内涝点(18)' },
+]);
+const stationCode = ref('');
+const stationList = ref([
+  {
+    stationName: '十四大街马家河支桥雨量站',
+    stationCode: '1',
+    status1: '在线',
+    status2: '正常',
+    type: '降雨',
+    date: '2024-05-10 12:03:20',
+    video: '11',
+  },
+  {
+    stationName: '汴京路雨水进口',
+    stationCode: '2',
+    status1: '离线',
+    status2: '异常',
+    type: '流量、ss',
+    date: '2024-06-10 12:03:20',
+    video: '',
+  },
+  {
+    stationName: '汴京路雨水出口',
+    stationCode: '3',
+    status1: '离线',
+    status2: '异常',
+    type: '流量、ss',
+    date: '2024-06-10 15:03:20',
+    video: '',
+  },
+]);
+
+// 类型点击
+function checkStation(item) {
+  stationIndex.value = item.value;
+}
+
 onMounted(() => {});
 </script>
 
 <style lang="scss" scoped>
 .equipJCPage {
   width: 100%;
+  .partContHM {
+    .part {
+      background: #013a73;
+      border: 1px solid #2ddaff;
+      cursor: pointer;
+      font-family: Source Han Sans CN;
+      font-weight: 400;
+      font-size: 16px;
+      color: #e4f5ff;
+      padding: 3px 5px;
+      margin: 0px 8px 8px 0px;
+      &:hover {
+        background: #166f84;
+        border: 1px solid #2cfce9;
+      }
+    }
+    .active {
+      background: #166f84;
+      border: 1px solid #2cfce9;
+    }
+    .monitorCont {
+      height: calc(100vh - 550px);
+      overflow: auto;
+      .stationSel {
+        width: 100%;
+        margin-bottom: 10px;
+      }
+      .contPart {
+        background: rgba(9, 145, 222, 0.3);
+        padding: 15px;
+        margin-bottom: 5px;
+        position: relative;
+        p {
+          font-family: Source Han Sans CN;
+          font-weight: 400;
+          font-size: 16px;
+          color: #b8ecff;
+          margin-bottom: 6px;
+          span {
+            color: #3afff8;
+            font-weight: 400;
+            font-size: 16px;
+            margin-left: 10px;
+          }
+        }
+        .title {
+          font-family: Source Han Sans CN;
+          font-weight: bold;
+          font-size: 18px;
+          color: #e4f5ff;
+          cursor: pointer;
+        }
+        img {
+          width: 26px;
+          height: 26px;
+          position: absolute;
+          top: 20px;
+          right: 30px;
+          cursor: pointer;
+        }
+      }
+    }
+  }
 }
 </style>

diff --git a/src/assets/newImgs/HMScreen/arrow_img.png b/src/assets/newImgs/HMScreen/arrow_img.png
index 27641d0..e5a8d90 100644
--- a/src/assets/newImgs/HMScreen/arrow_img.png
+++ b/src/assets/newImgs/HMScreen/arrow_img.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/headBg.png b/src/assets/newImgs/HMScreen/headBg.png
index fa7e9dd..d603316 100644
--- a/src/assets/newImgs/HMScreen/headBg.png
+++ b/src/assets/newImgs/HMScreen/headBg.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/video.png b/src/assets/newImgs/HMScreen/video.png
new file mode 100644
index 0000000..3c9b4a2
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/video.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/videoTest.png b/src/assets/newImgs/HMScreen/videoTest.png
new file mode 100644
index 0000000..03679d2
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/videoTest.png
Binary files differ
diff --git a/src/assets/styles/variables.module.scss b/src/assets/styles/variables.module.scss
index 72823fe..1c4d42e 100644
--- a/src/assets/styles/variables.module.scss
+++ b/src/assets/styles/variables.module.scss
@@ -1,9 +1,9 @@
 // base color
 $blue: #324157;
 $light-blue: #3a71a8;
-$red: #c03639;
+$red: #ff4545;
 $pink: #e65d6e;
-$green: #30b08f;
+$green: #18e87a;
 $tiffany: #4ab7bd;
 $yellow: #fec171;
 $panGreen: #30b08f;
diff --git a/src/views/sponeScreen/Echarts/echartBar3D.vue b/src/views/sponeScreen/Echarts/echartBar3D.vue
index 0df0053..3d23886 100644
--- a/src/views/sponeScreen/Echarts/echartBar3D.vue
+++ b/src/views/sponeScreen/Echarts/echartBar3D.vue
@@ -31,9 +31,9 @@
         color: [
           '#63caff',
           '#49beff',
-          '#03387a',
-          '#03387a',
-          '#03387a',
+          'rgba(18, 81, 210, 0.3)',
+          'rgba(18, 81, 210, 0.3)',
+          'rgba(18, 81, 210, 0.3)',
           '#6c93ee',
           '#a9abff',
           '#f7a23f',
@@ -50,15 +50,15 @@
         ],
         grid: {
           containLabel: true,
-          left: 20,
+          left: 10,
           right: 20,
           bottom: 10,
-          top: 40,
+          top: 30,
         },
         xAxis: {
           axisLabel: {
             color: '#c0c3cd',
-            fontSize: 14,
+            fontSize: 12,
             interval: 0,
           },
           axisTick: {
@@ -84,7 +84,7 @@
         yAxis: {
           axisLabel: {
             color: '#fff',
-            fontSize: 13,
+            fontSize: 12,
           },
           axisTick: {
             lineStyle: {
diff --git a/src/views/sponeScreen/cityGK/headHMAimg.vue b/src/views/sponeScreen/cityGK/headHMAimg.vue
index aa99c96..78e6a6e 100644
--- a/src/views/sponeScreen/cityGK/headHMAimg.vue
+++ b/src/views/sponeScreen/cityGK/headHMAimg.vue
@@ -6,7 +6,7 @@
       </div>
       <div class="Selectiontime">
         <div class="SelectiontimeA">入选</div>
-        <div class="SelectiontimeB">2022年5月</div>
+        <div class="SelectiontimeB">2022-05</div>
       </div>
       <div class="IconClass">
         <div class="IconClassZp"></div>
@@ -18,7 +18,7 @@
       </div>
       <div class="Selectiontime">
         <div class="SelectiontimeA">建设期</div>
-        <div class="SelectiontimeB">2022年-2024年</div>
+        <div class="SelectiontimeB">2022-2024</div>
       </div>
       <div class="IconClass">
         <div class="IconClassZp"></div>
@@ -30,10 +30,10 @@
       </div>
       <div class="Selectiontime">
         <div class="SelectiontimeA">评估期</div>
-        <div class="SelectiontimeB">2025年</div>
+        <div class="SelectiontimeB">2025</div>
       </div>
       <div class="IconClass">
-        <div class="IconClassZp"></div>
+        <div class="IconClassZp" style="margin-right: 15px"></div>
       </div>
     </div>
     <div class="four">
@@ -42,7 +42,7 @@
       </div>
       <div class="Selectiontime">
         <div class="SelectiontimeA">长效运维期</div>
-        <div class="SelectiontimeB">2024年-2030年</div>
+        <div class="SelectiontimeB">2024-2030</div>
       </div>
     </div>
   </div>
@@ -55,13 +55,13 @@
   margin-top: 50px;
   //   border: 1px solid red;
   display: flex;
+  padding-left: 10px;
   .one,
   .two,
   .three,
   .four {
-    width: 30%;
+    width: 24.5%;
     height: 100px;
-    // border: 1px solid blue;
     display: flex;
   }
 
@@ -72,6 +72,7 @@
     display: flex;
     justify-content: center; /* 水平居中 */
     align-items: center; /* 垂直居中 */
+    margin-right: 10px;
 
     .PhotoClassA {
       width: 50px;
@@ -100,23 +101,20 @@
       width: 100%;
       height: 50px;
       color: #3afff8;
-      font-size: 16px;
+      font-size: 18px;
+      margin-top: 8px;
       //   line-height: 50px;
       //   background: rgb(66, 50, 205);
     }
   }
   .IconClass {
-    width: 10%;
-    height: 100px;
-    // background: yellowgreen;
     display: flex;
     justify-content: center; /* 水平居中 */
     align-items: center; /* 垂直居中 */
+
     .IconClassZp {
-      width: 20px;
-      height: 20px;
-      position: relative;
-      //   left: 10px;
+      width: 34px;
+      height: 18px;
       background: url('@/assets/newImgs/HMScreen/arrow_img.png') no-repeat;
       background-size: 100% 100%;
     }
diff --git a/src/views/sponeScreen/waterFlood/equipMonitor.vue b/src/views/sponeScreen/waterFlood/equipMonitor.vue
index 67b024f..f094630 100644
--- a/src/views/sponeScreen/waterFlood/equipMonitor.vue
+++ b/src/views/sponeScreen/waterFlood/equipMonitor.vue
@@ -2,18 +2,167 @@
   <!-- 监测设备 -->
   <div class="equipJCPage">
     <div class="partTitleHM">监测设备</div>
-    <div class="partContHM">监测设备</div>
+    <div class="partContHM">
+      <!-- 类型 -->
+      <div class="flex flex-wrap flex-justcontent-spacearound">
+        <div
+          :class="['part', stationIndex == item.value ? 'active' : '']"
+          v-for="(item, index) in stationType"
+          :key="index"
+          @click="checkStation(item)"
+        >
+          {{ item.label }}
+        </div>
+      </div>
+      <!-- 监测内容 -->
+      <div class="monitorCont">
+        <el-select clearable v-model="stationCode" placeholder="请输入站点名称" class="stationSel">
+          <el-option v-for="item in stationList" :key="item.stationCode" :label="item.stationName" :value="item.stationCode" />
+        </el-select>
+        <div class="contPart" v-for="item in stationList" :key="item.stationCode">
+          <p class="title">{{ item.stationName }}</p>
+          <p>
+            站点状态 <span :class="[item.status1 == '在线' ? 'green' : 'red']">{{ item.status1 }}</span>
+          </p>
+          <p>
+            数据状态 <span :class="[item.status2 == '正常' ? 'green' : 'red']">{{ item.status2 }}</span>
+          </p>
+          <p>
+            站点类型 <span>{{ item.type }}</span>
+          </p>
+          <p>
+            最后通讯 <span>{{ item.date }}</span>
+          </p>
+          <img src="@/assets/newImgs/HMScreen/video.png" alt="" v-if="!!item.video" @click="dialogShowVideo = true" />
+        </div>
+      </div>
+    </div>
+    <!-- 视频弹窗 -->
+    <el-dialog title="站点视频" v-model="dialogShowVideo" width="800px" append-to-body>
+      <img src="@/assets/newImgs/HMScreen/videoTest.png" alt="" />
+    </el-dialog>
   </div>
 </template>
 
 <script setup>
 const { proxy } = getCurrentInstance();
 
+const dialogShowVideo = ref(false);
+const stationIndex = ref('');
+const stationType = ref([
+  { value: '', label: '全部(87)' },
+  { value: '1', label: '源头减排(29)' },
+  { value: '5', label: '河道断面(5)' },
+  { value: '6', label: '污水处理厂(5)' },
+  { value: '2', label: '雨量站(8)' },
+  { value: '7', label: '泵站(2)' },
+  { value: '4', label: '管网(20)' },
+  { value: '3', label: '内涝点(18)' },
+]);
+const stationCode = ref('');
+const stationList = ref([
+  {
+    stationName: '十四大街马家河支桥雨量站',
+    stationCode: '1',
+    status1: '在线',
+    status2: '正常',
+    type: '降雨',
+    date: '2024-05-10 12:03:20',
+    video: '11',
+  },
+  {
+    stationName: '汴京路雨水进口',
+    stationCode: '2',
+    status1: '离线',
+    status2: '异常',
+    type: '流量、ss',
+    date: '2024-06-10 12:03:20',
+    video: '',
+  },
+  {
+    stationName: '汴京路雨水出口',
+    stationCode: '3',
+    status1: '离线',
+    status2: '异常',
+    type: '流量、ss',
+    date: '2024-06-10 15:03:20',
+    video: '',
+  },
+]);
+
+// 类型点击
+function checkStation(item) {
+  stationIndex.value = item.value;
+}
+
 onMounted(() => {});
 </script>
 
 <style lang="scss" scoped>
 .equipJCPage {
   width: 100%;
+  .partContHM {
+    .part {
+      background: #013a73;
+      border: 1px solid #2ddaff;
+      cursor: pointer;
+      font-family: Source Han Sans CN;
+      font-weight: 400;
+      font-size: 16px;
+      color: #e4f5ff;
+      padding: 3px 5px;
+      margin: 0px 8px 8px 0px;
+      &:hover {
+        background: #166f84;
+        border: 1px solid #2cfce9;
+      }
+    }
+    .active {
+      background: #166f84;
+      border: 1px solid #2cfce9;
+    }
+    .monitorCont {
+      height: calc(100vh - 550px);
+      overflow: auto;
+      .stationSel {
+        width: 100%;
+        margin-bottom: 10px;
+      }
+      .contPart {
+        background: rgba(9, 145, 222, 0.3);
+        padding: 15px;
+        margin-bottom: 5px;
+        position: relative;
+        p {
+          font-family: Source Han Sans CN;
+          font-weight: 400;
+          font-size: 16px;
+          color: #b8ecff;
+          margin-bottom: 6px;
+          span {
+            color: #3afff8;
+            font-weight: 400;
+            font-size: 16px;
+            margin-left: 10px;
+          }
+        }
+        .title {
+          font-family: Source Han Sans CN;
+          font-weight: bold;
+          font-size: 18px;
+          color: #e4f5ff;
+          cursor: pointer;
+        }
+        img {
+          width: 26px;
+          height: 26px;
+          position: absolute;
+          top: 20px;
+          right: 30px;
+          cursor: pointer;
+        }
+      }
+    }
+  }
 }
 </style>
diff --git a/src/views/sponeScreen/waterFlood/floodWZ.vue b/src/views/sponeScreen/waterFlood/floodWZ.vue
index ab7696a..0c67b6d 100644
--- a/src/views/sponeScreen/waterFlood/floodWZ.vue
+++ b/src/views/sponeScreen/waterFlood/floodWZ.vue
@@ -49,9 +49,13 @@
 .floodWZPage {
   width: 100%;
   .scrollMapHM {
+    height: 270px;
     p {
       width: 30%;
     }
+    .scroll {
+      height: 230px;
+    }
   }
 }
 </style>

diff --git a/src/assets/newImgs/HMScreen/arrow_img.png b/src/assets/newImgs/HMScreen/arrow_img.png
index 27641d0..e5a8d90 100644
--- a/src/assets/newImgs/HMScreen/arrow_img.png
+++ b/src/assets/newImgs/HMScreen/arrow_img.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/headBg.png b/src/assets/newImgs/HMScreen/headBg.png
index fa7e9dd..d603316 100644
--- a/src/assets/newImgs/HMScreen/headBg.png
+++ b/src/assets/newImgs/HMScreen/headBg.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/video.png b/src/assets/newImgs/HMScreen/video.png
new file mode 100644
index 0000000..3c9b4a2
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/video.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/videoTest.png b/src/assets/newImgs/HMScreen/videoTest.png
new file mode 100644
index 0000000..03679d2
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/videoTest.png
Binary files differ
diff --git a/src/assets/styles/variables.module.scss b/src/assets/styles/variables.module.scss
index 72823fe..1c4d42e 100644
--- a/src/assets/styles/variables.module.scss
+++ b/src/assets/styles/variables.module.scss
@@ -1,9 +1,9 @@
 // base color
 $blue: #324157;
 $light-blue: #3a71a8;
-$red: #c03639;
+$red: #ff4545;
 $pink: #e65d6e;
-$green: #30b08f;
+$green: #18e87a;
 $tiffany: #4ab7bd;
 $yellow: #fec171;
 $panGreen: #30b08f;
diff --git a/src/views/sponeScreen/Echarts/echartBar3D.vue b/src/views/sponeScreen/Echarts/echartBar3D.vue
index 0df0053..3d23886 100644
--- a/src/views/sponeScreen/Echarts/echartBar3D.vue
+++ b/src/views/sponeScreen/Echarts/echartBar3D.vue
@@ -31,9 +31,9 @@
         color: [
           '#63caff',
           '#49beff',
-          '#03387a',
-          '#03387a',
-          '#03387a',
+          'rgba(18, 81, 210, 0.3)',
+          'rgba(18, 81, 210, 0.3)',
+          'rgba(18, 81, 210, 0.3)',
           '#6c93ee',
           '#a9abff',
           '#f7a23f',
@@ -50,15 +50,15 @@
         ],
         grid: {
           containLabel: true,
-          left: 20,
+          left: 10,
           right: 20,
           bottom: 10,
-          top: 40,
+          top: 30,
         },
         xAxis: {
           axisLabel: {
             color: '#c0c3cd',
-            fontSize: 14,
+            fontSize: 12,
             interval: 0,
           },
           axisTick: {
@@ -84,7 +84,7 @@
         yAxis: {
           axisLabel: {
             color: '#fff',
-            fontSize: 13,
+            fontSize: 12,
           },
           axisTick: {
             lineStyle: {
diff --git a/src/views/sponeScreen/cityGK/headHMAimg.vue b/src/views/sponeScreen/cityGK/headHMAimg.vue
index aa99c96..78e6a6e 100644
--- a/src/views/sponeScreen/cityGK/headHMAimg.vue
+++ b/src/views/sponeScreen/cityGK/headHMAimg.vue
@@ -6,7 +6,7 @@
       </div>
       <div class="Selectiontime">
         <div class="SelectiontimeA">入选</div>
-        <div class="SelectiontimeB">2022年5月</div>
+        <div class="SelectiontimeB">2022-05</div>
       </div>
       <div class="IconClass">
         <div class="IconClassZp"></div>
@@ -18,7 +18,7 @@
       </div>
       <div class="Selectiontime">
         <div class="SelectiontimeA">建设期</div>
-        <div class="SelectiontimeB">2022年-2024年</div>
+        <div class="SelectiontimeB">2022-2024</div>
       </div>
       <div class="IconClass">
         <div class="IconClassZp"></div>
@@ -30,10 +30,10 @@
       </div>
       <div class="Selectiontime">
         <div class="SelectiontimeA">评估期</div>
-        <div class="SelectiontimeB">2025年</div>
+        <div class="SelectiontimeB">2025</div>
       </div>
       <div class="IconClass">
-        <div class="IconClassZp"></div>
+        <div class="IconClassZp" style="margin-right: 15px"></div>
       </div>
     </div>
     <div class="four">
@@ -42,7 +42,7 @@
       </div>
       <div class="Selectiontime">
         <div class="SelectiontimeA">长效运维期</div>
-        <div class="SelectiontimeB">2024年-2030年</div>
+        <div class="SelectiontimeB">2024-2030</div>
       </div>
     </div>
   </div>
@@ -55,13 +55,13 @@
   margin-top: 50px;
   //   border: 1px solid red;
   display: flex;
+  padding-left: 10px;
   .one,
   .two,
   .three,
   .four {
-    width: 30%;
+    width: 24.5%;
     height: 100px;
-    // border: 1px solid blue;
     display: flex;
   }
 
@@ -72,6 +72,7 @@
     display: flex;
     justify-content: center; /* 水平居中 */
     align-items: center; /* 垂直居中 */
+    margin-right: 10px;
 
     .PhotoClassA {
       width: 50px;
@@ -100,23 +101,20 @@
       width: 100%;
       height: 50px;
       color: #3afff8;
-      font-size: 16px;
+      font-size: 18px;
+      margin-top: 8px;
       //   line-height: 50px;
       //   background: rgb(66, 50, 205);
     }
   }
   .IconClass {
-    width: 10%;
-    height: 100px;
-    // background: yellowgreen;
     display: flex;
     justify-content: center; /* 水平居中 */
     align-items: center; /* 垂直居中 */
+
     .IconClassZp {
-      width: 20px;
-      height: 20px;
-      position: relative;
-      //   left: 10px;
+      width: 34px;
+      height: 18px;
       background: url('@/assets/newImgs/HMScreen/arrow_img.png') no-repeat;
       background-size: 100% 100%;
     }
diff --git a/src/views/sponeScreen/waterFlood/equipMonitor.vue b/src/views/sponeScreen/waterFlood/equipMonitor.vue
index 67b024f..f094630 100644
--- a/src/views/sponeScreen/waterFlood/equipMonitor.vue
+++ b/src/views/sponeScreen/waterFlood/equipMonitor.vue
@@ -2,18 +2,167 @@
   <!-- 监测设备 -->
   <div class="equipJCPage">
     <div class="partTitleHM">监测设备</div>
-    <div class="partContHM">监测设备</div>
+    <div class="partContHM">
+      <!-- 类型 -->
+      <div class="flex flex-wrap flex-justcontent-spacearound">
+        <div
+          :class="['part', stationIndex == item.value ? 'active' : '']"
+          v-for="(item, index) in stationType"
+          :key="index"
+          @click="checkStation(item)"
+        >
+          {{ item.label }}
+        </div>
+      </div>
+      <!-- 监测内容 -->
+      <div class="monitorCont">
+        <el-select clearable v-model="stationCode" placeholder="请输入站点名称" class="stationSel">
+          <el-option v-for="item in stationList" :key="item.stationCode" :label="item.stationName" :value="item.stationCode" />
+        </el-select>
+        <div class="contPart" v-for="item in stationList" :key="item.stationCode">
+          <p class="title">{{ item.stationName }}</p>
+          <p>
+            站点状态 <span :class="[item.status1 == '在线' ? 'green' : 'red']">{{ item.status1 }}</span>
+          </p>
+          <p>
+            数据状态 <span :class="[item.status2 == '正常' ? 'green' : 'red']">{{ item.status2 }}</span>
+          </p>
+          <p>
+            站点类型 <span>{{ item.type }}</span>
+          </p>
+          <p>
+            最后通讯 <span>{{ item.date }}</span>
+          </p>
+          <img src="@/assets/newImgs/HMScreen/video.png" alt="" v-if="!!item.video" @click="dialogShowVideo = true" />
+        </div>
+      </div>
+    </div>
+    <!-- 视频弹窗 -->
+    <el-dialog title="站点视频" v-model="dialogShowVideo" width="800px" append-to-body>
+      <img src="@/assets/newImgs/HMScreen/videoTest.png" alt="" />
+    </el-dialog>
   </div>
 </template>
 
 <script setup>
 const { proxy } = getCurrentInstance();
 
+const dialogShowVideo = ref(false);
+const stationIndex = ref('');
+const stationType = ref([
+  { value: '', label: '全部(87)' },
+  { value: '1', label: '源头减排(29)' },
+  { value: '5', label: '河道断面(5)' },
+  { value: '6', label: '污水处理厂(5)' },
+  { value: '2', label: '雨量站(8)' },
+  { value: '7', label: '泵站(2)' },
+  { value: '4', label: '管网(20)' },
+  { value: '3', label: '内涝点(18)' },
+]);
+const stationCode = ref('');
+const stationList = ref([
+  {
+    stationName: '十四大街马家河支桥雨量站',
+    stationCode: '1',
+    status1: '在线',
+    status2: '正常',
+    type: '降雨',
+    date: '2024-05-10 12:03:20',
+    video: '11',
+  },
+  {
+    stationName: '汴京路雨水进口',
+    stationCode: '2',
+    status1: '离线',
+    status2: '异常',
+    type: '流量、ss',
+    date: '2024-06-10 12:03:20',
+    video: '',
+  },
+  {
+    stationName: '汴京路雨水出口',
+    stationCode: '3',
+    status1: '离线',
+    status2: '异常',
+    type: '流量、ss',
+    date: '2024-06-10 15:03:20',
+    video: '',
+  },
+]);
+
+// 类型点击
+function checkStation(item) {
+  stationIndex.value = item.value;
+}
+
 onMounted(() => {});
 </script>
 
 <style lang="scss" scoped>
 .equipJCPage {
   width: 100%;
+  .partContHM {
+    .part {
+      background: #013a73;
+      border: 1px solid #2ddaff;
+      cursor: pointer;
+      font-family: Source Han Sans CN;
+      font-weight: 400;
+      font-size: 16px;
+      color: #e4f5ff;
+      padding: 3px 5px;
+      margin: 0px 8px 8px 0px;
+      &:hover {
+        background: #166f84;
+        border: 1px solid #2cfce9;
+      }
+    }
+    .active {
+      background: #166f84;
+      border: 1px solid #2cfce9;
+    }
+    .monitorCont {
+      height: calc(100vh - 550px);
+      overflow: auto;
+      .stationSel {
+        width: 100%;
+        margin-bottom: 10px;
+      }
+      .contPart {
+        background: rgba(9, 145, 222, 0.3);
+        padding: 15px;
+        margin-bottom: 5px;
+        position: relative;
+        p {
+          font-family: Source Han Sans CN;
+          font-weight: 400;
+          font-size: 16px;
+          color: #b8ecff;
+          margin-bottom: 6px;
+          span {
+            color: #3afff8;
+            font-weight: 400;
+            font-size: 16px;
+            margin-left: 10px;
+          }
+        }
+        .title {
+          font-family: Source Han Sans CN;
+          font-weight: bold;
+          font-size: 18px;
+          color: #e4f5ff;
+          cursor: pointer;
+        }
+        img {
+          width: 26px;
+          height: 26px;
+          position: absolute;
+          top: 20px;
+          right: 30px;
+          cursor: pointer;
+        }
+      }
+    }
+  }
 }
 </style>
diff --git a/src/views/sponeScreen/waterFlood/floodWZ.vue b/src/views/sponeScreen/waterFlood/floodWZ.vue
index ab7696a..0c67b6d 100644
--- a/src/views/sponeScreen/waterFlood/floodWZ.vue
+++ b/src/views/sponeScreen/waterFlood/floodWZ.vue
@@ -49,9 +49,13 @@
 .floodWZPage {
   width: 100%;
   .scrollMapHM {
+    height: 270px;
     p {
       width: 30%;
     }
+    .scroll {
+      height: 230px;
+    }
   }
 }
 </style>
diff --git a/src/views/sponeScreen/waterFlood/futureRain.vue b/src/views/sponeScreen/waterFlood/futureRain.vue
new file mode 100644
index 0000000..402cd94
--- /dev/null
+++ b/src/views/sponeScreen/waterFlood/futureRain.vue
@@ -0,0 +1,36 @@
+<template>
+  <!-- 降雨预报 -->
+  <div class="rainFuturePage">
+    <div class="centerCont flex">
+      <p class="title">降雨预报</p>
+      <el-progress :stroke-width="20" :percentage="processVal" status="success" :text-inside="true"></el-progress>
+      <el-button type="warning" @click="startImitate" v-if="ifStart" :disabled="isdisabled">开始</el-button>
+      <el-button type="warning" @click="stopImitate" v-else :disabled="isdisabled">暂停</el-button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+const { proxy } = getCurrentInstance();
+
+const processVal = ref(0);
+const ifStart = ref(true);
+const isdisabled = ref(false);
+
+// 开始
+function startImitate() {}
+// 暂停
+function stopImitate() {}
+
+onMounted(() => {});
+</script>
+
+<style lang="scss" scoped>
+.rainFuturePage {
+  width: 100%;
+  padding: 20px;
+  .centerCont {
+    justify-content: space-around;
+  }
+}
+</style>

diff --git a/src/assets/newImgs/HMScreen/arrow_img.png b/src/assets/newImgs/HMScreen/arrow_img.png
index 27641d0..e5a8d90 100644
--- a/src/assets/newImgs/HMScreen/arrow_img.png
+++ b/src/assets/newImgs/HMScreen/arrow_img.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/headBg.png b/src/assets/newImgs/HMScreen/headBg.png
index fa7e9dd..d603316 100644
--- a/src/assets/newImgs/HMScreen/headBg.png
+++ b/src/assets/newImgs/HMScreen/headBg.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/video.png b/src/assets/newImgs/HMScreen/video.png
new file mode 100644
index 0000000..3c9b4a2
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/video.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/videoTest.png b/src/assets/newImgs/HMScreen/videoTest.png
new file mode 100644
index 0000000..03679d2
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/videoTest.png
Binary files differ
diff --git a/src/assets/styles/variables.module.scss b/src/assets/styles/variables.module.scss
index 72823fe..1c4d42e 100644
--- a/src/assets/styles/variables.module.scss
+++ b/src/assets/styles/variables.module.scss
@@ -1,9 +1,9 @@
 // base color
 $blue: #324157;
 $light-blue: #3a71a8;
-$red: #c03639;
+$red: #ff4545;
 $pink: #e65d6e;
-$green: #30b08f;
+$green: #18e87a;
 $tiffany: #4ab7bd;
 $yellow: #fec171;
 $panGreen: #30b08f;
diff --git a/src/views/sponeScreen/Echarts/echartBar3D.vue b/src/views/sponeScreen/Echarts/echartBar3D.vue
index 0df0053..3d23886 100644
--- a/src/views/sponeScreen/Echarts/echartBar3D.vue
+++ b/src/views/sponeScreen/Echarts/echartBar3D.vue
@@ -31,9 +31,9 @@
         color: [
           '#63caff',
           '#49beff',
-          '#03387a',
-          '#03387a',
-          '#03387a',
+          'rgba(18, 81, 210, 0.3)',
+          'rgba(18, 81, 210, 0.3)',
+          'rgba(18, 81, 210, 0.3)',
           '#6c93ee',
           '#a9abff',
           '#f7a23f',
@@ -50,15 +50,15 @@
         ],
         grid: {
           containLabel: true,
-          left: 20,
+          left: 10,
           right: 20,
           bottom: 10,
-          top: 40,
+          top: 30,
         },
         xAxis: {
           axisLabel: {
             color: '#c0c3cd',
-            fontSize: 14,
+            fontSize: 12,
             interval: 0,
           },
           axisTick: {
@@ -84,7 +84,7 @@
         yAxis: {
           axisLabel: {
             color: '#fff',
-            fontSize: 13,
+            fontSize: 12,
           },
           axisTick: {
             lineStyle: {
diff --git a/src/views/sponeScreen/cityGK/headHMAimg.vue b/src/views/sponeScreen/cityGK/headHMAimg.vue
index aa99c96..78e6a6e 100644
--- a/src/views/sponeScreen/cityGK/headHMAimg.vue
+++ b/src/views/sponeScreen/cityGK/headHMAimg.vue
@@ -6,7 +6,7 @@
       </div>
       <div class="Selectiontime">
         <div class="SelectiontimeA">入选</div>
-        <div class="SelectiontimeB">2022年5月</div>
+        <div class="SelectiontimeB">2022-05</div>
       </div>
       <div class="IconClass">
         <div class="IconClassZp"></div>
@@ -18,7 +18,7 @@
       </div>
       <div class="Selectiontime">
         <div class="SelectiontimeA">建设期</div>
-        <div class="SelectiontimeB">2022年-2024年</div>
+        <div class="SelectiontimeB">2022-2024</div>
       </div>
       <div class="IconClass">
         <div class="IconClassZp"></div>
@@ -30,10 +30,10 @@
       </div>
       <div class="Selectiontime">
         <div class="SelectiontimeA">评估期</div>
-        <div class="SelectiontimeB">2025年</div>
+        <div class="SelectiontimeB">2025</div>
       </div>
       <div class="IconClass">
-        <div class="IconClassZp"></div>
+        <div class="IconClassZp" style="margin-right: 15px"></div>
       </div>
     </div>
     <div class="four">
@@ -42,7 +42,7 @@
       </div>
       <div class="Selectiontime">
         <div class="SelectiontimeA">长效运维期</div>
-        <div class="SelectiontimeB">2024年-2030年</div>
+        <div class="SelectiontimeB">2024-2030</div>
       </div>
     </div>
   </div>
@@ -55,13 +55,13 @@
   margin-top: 50px;
   //   border: 1px solid red;
   display: flex;
+  padding-left: 10px;
   .one,
   .two,
   .three,
   .four {
-    width: 30%;
+    width: 24.5%;
     height: 100px;
-    // border: 1px solid blue;
     display: flex;
   }
 
@@ -72,6 +72,7 @@
     display: flex;
     justify-content: center; /* 水平居中 */
     align-items: center; /* 垂直居中 */
+    margin-right: 10px;
 
     .PhotoClassA {
       width: 50px;
@@ -100,23 +101,20 @@
       width: 100%;
       height: 50px;
       color: #3afff8;
-      font-size: 16px;
+      font-size: 18px;
+      margin-top: 8px;
       //   line-height: 50px;
       //   background: rgb(66, 50, 205);
     }
   }
   .IconClass {
-    width: 10%;
-    height: 100px;
-    // background: yellowgreen;
     display: flex;
     justify-content: center; /* 水平居中 */
     align-items: center; /* 垂直居中 */
+
     .IconClassZp {
-      width: 20px;
-      height: 20px;
-      position: relative;
-      //   left: 10px;
+      width: 34px;
+      height: 18px;
       background: url('@/assets/newImgs/HMScreen/arrow_img.png') no-repeat;
       background-size: 100% 100%;
     }
diff --git a/src/views/sponeScreen/waterFlood/equipMonitor.vue b/src/views/sponeScreen/waterFlood/equipMonitor.vue
index 67b024f..f094630 100644
--- a/src/views/sponeScreen/waterFlood/equipMonitor.vue
+++ b/src/views/sponeScreen/waterFlood/equipMonitor.vue
@@ -2,18 +2,167 @@
   <!-- 监测设备 -->
   <div class="equipJCPage">
     <div class="partTitleHM">监测设备</div>
-    <div class="partContHM">监测设备</div>
+    <div class="partContHM">
+      <!-- 类型 -->
+      <div class="flex flex-wrap flex-justcontent-spacearound">
+        <div
+          :class="['part', stationIndex == item.value ? 'active' : '']"
+          v-for="(item, index) in stationType"
+          :key="index"
+          @click="checkStation(item)"
+        >
+          {{ item.label }}
+        </div>
+      </div>
+      <!-- 监测内容 -->
+      <div class="monitorCont">
+        <el-select clearable v-model="stationCode" placeholder="请输入站点名称" class="stationSel">
+          <el-option v-for="item in stationList" :key="item.stationCode" :label="item.stationName" :value="item.stationCode" />
+        </el-select>
+        <div class="contPart" v-for="item in stationList" :key="item.stationCode">
+          <p class="title">{{ item.stationName }}</p>
+          <p>
+            站点状态 <span :class="[item.status1 == '在线' ? 'green' : 'red']">{{ item.status1 }}</span>
+          </p>
+          <p>
+            数据状态 <span :class="[item.status2 == '正常' ? 'green' : 'red']">{{ item.status2 }}</span>
+          </p>
+          <p>
+            站点类型 <span>{{ item.type }}</span>
+          </p>
+          <p>
+            最后通讯 <span>{{ item.date }}</span>
+          </p>
+          <img src="@/assets/newImgs/HMScreen/video.png" alt="" v-if="!!item.video" @click="dialogShowVideo = true" />
+        </div>
+      </div>
+    </div>
+    <!-- 视频弹窗 -->
+    <el-dialog title="站点视频" v-model="dialogShowVideo" width="800px" append-to-body>
+      <img src="@/assets/newImgs/HMScreen/videoTest.png" alt="" />
+    </el-dialog>
   </div>
 </template>
 
 <script setup>
 const { proxy } = getCurrentInstance();
 
+const dialogShowVideo = ref(false);
+const stationIndex = ref('');
+const stationType = ref([
+  { value: '', label: '全部(87)' },
+  { value: '1', label: '源头减排(29)' },
+  { value: '5', label: '河道断面(5)' },
+  { value: '6', label: '污水处理厂(5)' },
+  { value: '2', label: '雨量站(8)' },
+  { value: '7', label: '泵站(2)' },
+  { value: '4', label: '管网(20)' },
+  { value: '3', label: '内涝点(18)' },
+]);
+const stationCode = ref('');
+const stationList = ref([
+  {
+    stationName: '十四大街马家河支桥雨量站',
+    stationCode: '1',
+    status1: '在线',
+    status2: '正常',
+    type: '降雨',
+    date: '2024-05-10 12:03:20',
+    video: '11',
+  },
+  {
+    stationName: '汴京路雨水进口',
+    stationCode: '2',
+    status1: '离线',
+    status2: '异常',
+    type: '流量、ss',
+    date: '2024-06-10 12:03:20',
+    video: '',
+  },
+  {
+    stationName: '汴京路雨水出口',
+    stationCode: '3',
+    status1: '离线',
+    status2: '异常',
+    type: '流量、ss',
+    date: '2024-06-10 15:03:20',
+    video: '',
+  },
+]);
+
+// 类型点击
+function checkStation(item) {
+  stationIndex.value = item.value;
+}
+
 onMounted(() => {});
 </script>
 
 <style lang="scss" scoped>
 .equipJCPage {
   width: 100%;
+  .partContHM {
+    .part {
+      background: #013a73;
+      border: 1px solid #2ddaff;
+      cursor: pointer;
+      font-family: Source Han Sans CN;
+      font-weight: 400;
+      font-size: 16px;
+      color: #e4f5ff;
+      padding: 3px 5px;
+      margin: 0px 8px 8px 0px;
+      &:hover {
+        background: #166f84;
+        border: 1px solid #2cfce9;
+      }
+    }
+    .active {
+      background: #166f84;
+      border: 1px solid #2cfce9;
+    }
+    .monitorCont {
+      height: calc(100vh - 550px);
+      overflow: auto;
+      .stationSel {
+        width: 100%;
+        margin-bottom: 10px;
+      }
+      .contPart {
+        background: rgba(9, 145, 222, 0.3);
+        padding: 15px;
+        margin-bottom: 5px;
+        position: relative;
+        p {
+          font-family: Source Han Sans CN;
+          font-weight: 400;
+          font-size: 16px;
+          color: #b8ecff;
+          margin-bottom: 6px;
+          span {
+            color: #3afff8;
+            font-weight: 400;
+            font-size: 16px;
+            margin-left: 10px;
+          }
+        }
+        .title {
+          font-family: Source Han Sans CN;
+          font-weight: bold;
+          font-size: 18px;
+          color: #e4f5ff;
+          cursor: pointer;
+        }
+        img {
+          width: 26px;
+          height: 26px;
+          position: absolute;
+          top: 20px;
+          right: 30px;
+          cursor: pointer;
+        }
+      }
+    }
+  }
 }
 </style>
diff --git a/src/views/sponeScreen/waterFlood/floodWZ.vue b/src/views/sponeScreen/waterFlood/floodWZ.vue
index ab7696a..0c67b6d 100644
--- a/src/views/sponeScreen/waterFlood/floodWZ.vue
+++ b/src/views/sponeScreen/waterFlood/floodWZ.vue
@@ -49,9 +49,13 @@
 .floodWZPage {
   width: 100%;
   .scrollMapHM {
+    height: 270px;
     p {
       width: 30%;
     }
+    .scroll {
+      height: 230px;
+    }
   }
 }
 </style>
diff --git a/src/views/sponeScreen/waterFlood/futureRain.vue b/src/views/sponeScreen/waterFlood/futureRain.vue
new file mode 100644
index 0000000..402cd94
--- /dev/null
+++ b/src/views/sponeScreen/waterFlood/futureRain.vue
@@ -0,0 +1,36 @@
+<template>
+  <!-- 降雨预报 -->
+  <div class="rainFuturePage">
+    <div class="centerCont flex">
+      <p class="title">降雨预报</p>
+      <el-progress :stroke-width="20" :percentage="processVal" status="success" :text-inside="true"></el-progress>
+      <el-button type="warning" @click="startImitate" v-if="ifStart" :disabled="isdisabled">开始</el-button>
+      <el-button type="warning" @click="stopImitate" v-else :disabled="isdisabled">暂停</el-button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+const { proxy } = getCurrentInstance();
+
+const processVal = ref(0);
+const ifStart = ref(true);
+const isdisabled = ref(false);
+
+// 开始
+function startImitate() {}
+// 暂停
+function stopImitate() {}
+
+onMounted(() => {});
+</script>
+
+<style lang="scss" scoped>
+.rainFuturePage {
+  width: 100%;
+  padding: 20px;
+  .centerCont {
+    justify-content: space-around;
+  }
+}
+</style>
diff --git a/src/views/sponeScreen/waterFlood/index.vue b/src/views/sponeScreen/waterFlood/index.vue
index a48905c..1e36418 100644
--- a/src/views/sponeScreen/waterFlood/index.vue
+++ b/src/views/sponeScreen/waterFlood/index.vue
@@ -12,6 +12,12 @@
       <!-- 防汛物资 -->
       <FloodWZ class="mt-10"></FloodWZ>
     </div>
+
+    <!-- 头部 -->
+    <div :class="['headHMA', 'animate__animated', showPanel ? 'animate__fadeOutUp' : 'animate__fadeInDown']">
+      <HeadRain></HeadRain>
+    </div>
+
     <!-- 右侧 -->
     <div :class="['publicRightHM', 'animate__animated', showPanel ? 'animate__fadeOutRight' : 'animate__fadeInRight']">
       <!-- 泵站运行监控 -->
@@ -29,6 +35,7 @@
 import FloodWZ from '@/views/sponeScreen/waterFlood/floodWZ.vue'; //防汛物资
 import MonitorBZ from '@/views/sponeScreen/waterFlood/pumpMonitor.vue'; //泵站运行监控
 import MonitorEquip from '@/views/sponeScreen/waterFlood/equipMonitor.vue'; //监测设备
+import HeadRain from '@/views/sponeScreen/waterFlood/futureRain.vue'; //降雨预报
 
 const { proxy } = getCurrentInstance();
 const showPanel = ref(true); //面板展开收起
@@ -50,4 +57,12 @@
 onMounted(() => {});
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.oneMapPSFL {
+  .headHMA {
+    background: none;
+    background: rgba(0, 59, 109, 0.8);
+    top: 10px;
+  }
+}
+</style>