diff --git a/src/api/longoPeration/MaterialManagement.js b/src/api/longoPeration/MaterialManagement.js
index 9b36e9c..c99206d 100644
--- a/src/api/longoPeration/MaterialManagement.js
+++ b/src/api/longoPeration/MaterialManagement.js
@@ -1,5 +1,5 @@
 import request from '@/utils/request';
-// 列表
+// 列表分页
 export function FloodPreventionMaterialpage(query) {
   return request({
     url: '/business/floodPreventionMaterial/page',
@@ -8,6 +8,15 @@
   });
 }
 
+// 列表
+export function FloodPreventionMaterialList(query) {
+  return request({
+    url: '/business/floodPreventionMaterial/list',
+    method: 'get',
+    params: query,
+  });
+}
+
 // 新增排水防涝--防汛物资
 export function FloodPreventionMaterialadd(data) {
   return request({

diff --git a/src/api/longoPeration/MaterialManagement.js b/src/api/longoPeration/MaterialManagement.js
index 9b36e9c..c99206d 100644
--- a/src/api/longoPeration/MaterialManagement.js
+++ b/src/api/longoPeration/MaterialManagement.js
@@ -1,5 +1,5 @@
 import request from '@/utils/request';
-// 列表
+// 列表分页
 export function FloodPreventionMaterialpage(query) {
   return request({
     url: '/business/floodPreventionMaterial/page',
@@ -8,6 +8,15 @@
   });
 }
 
+// 列表
+export function FloodPreventionMaterialList(query) {
+  return request({
+    url: '/business/floodPreventionMaterial/list',
+    method: 'get',
+    params: query,
+  });
+}
+
 // 新增排水防涝--防汛物资
 export function FloodPreventionMaterialadd(data) {
   return request({
diff --git a/src/assets/newImgs/HMScreen/pumpBg.png b/src/assets/newImgs/HMScreen/pumpBg.png
new file mode 100644
index 0000000..89a1883
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/pumpBg.png
Binary files differ

diff --git a/src/api/longoPeration/MaterialManagement.js b/src/api/longoPeration/MaterialManagement.js
index 9b36e9c..c99206d 100644
--- a/src/api/longoPeration/MaterialManagement.js
+++ b/src/api/longoPeration/MaterialManagement.js
@@ -1,5 +1,5 @@
 import request from '@/utils/request';
-// 列表
+// 列表分页
 export function FloodPreventionMaterialpage(query) {
   return request({
     url: '/business/floodPreventionMaterial/page',
@@ -8,6 +8,15 @@
   });
 }
 
+// 列表
+export function FloodPreventionMaterialList(query) {
+  return request({
+    url: '/business/floodPreventionMaterial/list',
+    method: 'get',
+    params: query,
+  });
+}
+
 // 新增排水防涝--防汛物资
 export function FloodPreventionMaterialadd(data) {
   return request({
diff --git a/src/assets/newImgs/HMScreen/pumpBg.png b/src/assets/newImgs/HMScreen/pumpBg.png
new file mode 100644
index 0000000..89a1883
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/pumpBg.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/pumpOff.png b/src/assets/newImgs/HMScreen/pumpOff.png
new file mode 100644
index 0000000..ceb6c30
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/pumpOff.png
Binary files differ

diff --git a/src/api/longoPeration/MaterialManagement.js b/src/api/longoPeration/MaterialManagement.js
index 9b36e9c..c99206d 100644
--- a/src/api/longoPeration/MaterialManagement.js
+++ b/src/api/longoPeration/MaterialManagement.js
@@ -1,5 +1,5 @@
 import request from '@/utils/request';
-// 列表
+// 列表分页
 export function FloodPreventionMaterialpage(query) {
   return request({
     url: '/business/floodPreventionMaterial/page',
@@ -8,6 +8,15 @@
   });
 }
 
+// 列表
+export function FloodPreventionMaterialList(query) {
+  return request({
+    url: '/business/floodPreventionMaterial/list',
+    method: 'get',
+    params: query,
+  });
+}
+
 // 新增排水防涝--防汛物资
 export function FloodPreventionMaterialadd(data) {
   return request({
diff --git a/src/assets/newImgs/HMScreen/pumpBg.png b/src/assets/newImgs/HMScreen/pumpBg.png
new file mode 100644
index 0000000..89a1883
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/pumpBg.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/pumpOff.png b/src/assets/newImgs/HMScreen/pumpOff.png
new file mode 100644
index 0000000..ceb6c30
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/pumpOff.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/pumpOpen.png b/src/assets/newImgs/HMScreen/pumpOpen.png
new file mode 100644
index 0000000..721282b
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/pumpOpen.png
Binary files differ

diff --git a/src/api/longoPeration/MaterialManagement.js b/src/api/longoPeration/MaterialManagement.js
index 9b36e9c..c99206d 100644
--- a/src/api/longoPeration/MaterialManagement.js
+++ b/src/api/longoPeration/MaterialManagement.js
@@ -1,5 +1,5 @@
 import request from '@/utils/request';
-// 列表
+// 列表分页
 export function FloodPreventionMaterialpage(query) {
   return request({
     url: '/business/floodPreventionMaterial/page',
@@ -8,6 +8,15 @@
   });
 }
 
+// 列表
+export function FloodPreventionMaterialList(query) {
+  return request({
+    url: '/business/floodPreventionMaterial/list',
+    method: 'get',
+    params: query,
+  });
+}
+
 // 新增排水防涝--防汛物资
 export function FloodPreventionMaterialadd(data) {
   return request({
diff --git a/src/assets/newImgs/HMScreen/pumpBg.png b/src/assets/newImgs/HMScreen/pumpBg.png
new file mode 100644
index 0000000..89a1883
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/pumpBg.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/pumpOff.png b/src/assets/newImgs/HMScreen/pumpOff.png
new file mode 100644
index 0000000..ceb6c30
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/pumpOff.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/pumpOpen.png b/src/assets/newImgs/HMScreen/pumpOpen.png
new file mode 100644
index 0000000..721282b
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/pumpOpen.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/rainA.png b/src/assets/newImgs/HMScreen/rainA.png
new file mode 100644
index 0000000..7f9f19c
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/rainA.png
Binary files differ

diff --git a/src/api/longoPeration/MaterialManagement.js b/src/api/longoPeration/MaterialManagement.js
index 9b36e9c..c99206d 100644
--- a/src/api/longoPeration/MaterialManagement.js
+++ b/src/api/longoPeration/MaterialManagement.js
@@ -1,5 +1,5 @@
 import request from '@/utils/request';
-// 列表
+// 列表分页
 export function FloodPreventionMaterialpage(query) {
   return request({
     url: '/business/floodPreventionMaterial/page',
@@ -8,6 +8,15 @@
   });
 }
 
+// 列表
+export function FloodPreventionMaterialList(query) {
+  return request({
+    url: '/business/floodPreventionMaterial/list',
+    method: 'get',
+    params: query,
+  });
+}
+
 // 新增排水防涝--防汛物资
 export function FloodPreventionMaterialadd(data) {
   return request({
diff --git a/src/assets/newImgs/HMScreen/pumpBg.png b/src/assets/newImgs/HMScreen/pumpBg.png
new file mode 100644
index 0000000..89a1883
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/pumpBg.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/pumpOff.png b/src/assets/newImgs/HMScreen/pumpOff.png
new file mode 100644
index 0000000..ceb6c30
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/pumpOff.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/pumpOpen.png b/src/assets/newImgs/HMScreen/pumpOpen.png
new file mode 100644
index 0000000..721282b
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/pumpOpen.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/rainA.png b/src/assets/newImgs/HMScreen/rainA.png
new file mode 100644
index 0000000..7f9f19c
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/rainA.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/rainD.png b/src/assets/newImgs/HMScreen/rainD.png
new file mode 100644
index 0000000..6f9e7d8
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/rainD.png
Binary files differ

diff --git a/src/api/longoPeration/MaterialManagement.js b/src/api/longoPeration/MaterialManagement.js
index 9b36e9c..c99206d 100644
--- a/src/api/longoPeration/MaterialManagement.js
+++ b/src/api/longoPeration/MaterialManagement.js
@@ -1,5 +1,5 @@
 import request from '@/utils/request';
-// 列表
+// 列表分页
 export function FloodPreventionMaterialpage(query) {
   return request({
     url: '/business/floodPreventionMaterial/page',
@@ -8,6 +8,15 @@
   });
 }
 
+// 列表
+export function FloodPreventionMaterialList(query) {
+  return request({
+    url: '/business/floodPreventionMaterial/list',
+    method: 'get',
+    params: query,
+  });
+}
+
 // 新增排水防涝--防汛物资
 export function FloodPreventionMaterialadd(data) {
   return request({
diff --git a/src/assets/newImgs/HMScreen/pumpBg.png b/src/assets/newImgs/HMScreen/pumpBg.png
new file mode 100644
index 0000000..89a1883
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/pumpBg.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/pumpOff.png b/src/assets/newImgs/HMScreen/pumpOff.png
new file mode 100644
index 0000000..ceb6c30
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/pumpOff.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/pumpOpen.png b/src/assets/newImgs/HMScreen/pumpOpen.png
new file mode 100644
index 0000000..721282b
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/pumpOpen.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/rainA.png b/src/assets/newImgs/HMScreen/rainA.png
new file mode 100644
index 0000000..7f9f19c
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/rainA.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/rainD.png b/src/assets/newImgs/HMScreen/rainD.png
new file mode 100644
index 0000000..6f9e7d8
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/rainD.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/rainP.png b/src/assets/newImgs/HMScreen/rainP.png
new file mode 100644
index 0000000..109353f
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/rainP.png
Binary files differ

diff --git a/src/api/longoPeration/MaterialManagement.js b/src/api/longoPeration/MaterialManagement.js
index 9b36e9c..c99206d 100644
--- a/src/api/longoPeration/MaterialManagement.js
+++ b/src/api/longoPeration/MaterialManagement.js
@@ -1,5 +1,5 @@
 import request from '@/utils/request';
-// 列表
+// 列表分页
 export function FloodPreventionMaterialpage(query) {
   return request({
     url: '/business/floodPreventionMaterial/page',
@@ -8,6 +8,15 @@
   });
 }
 
+// 列表
+export function FloodPreventionMaterialList(query) {
+  return request({
+    url: '/business/floodPreventionMaterial/list',
+    method: 'get',
+    params: query,
+  });
+}
+
 // 新增排水防涝--防汛物资
 export function FloodPreventionMaterialadd(data) {
   return request({
diff --git a/src/assets/newImgs/HMScreen/pumpBg.png b/src/assets/newImgs/HMScreen/pumpBg.png
new file mode 100644
index 0000000..89a1883
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/pumpBg.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/pumpOff.png b/src/assets/newImgs/HMScreen/pumpOff.png
new file mode 100644
index 0000000..ceb6c30
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/pumpOff.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/pumpOpen.png b/src/assets/newImgs/HMScreen/pumpOpen.png
new file mode 100644
index 0000000..721282b
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/pumpOpen.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/rainA.png b/src/assets/newImgs/HMScreen/rainA.png
new file mode 100644
index 0000000..7f9f19c
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/rainA.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/rainD.png b/src/assets/newImgs/HMScreen/rainD.png
new file mode 100644
index 0000000..6f9e7d8
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/rainD.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/rainP.png b/src/assets/newImgs/HMScreen/rainP.png
new file mode 100644
index 0000000..109353f
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/rainP.png
Binary files differ
diff --git a/src/assets/styles/publicXG.scss b/src/assets/styles/publicXG.scss
index ed0eeb5..2a1fafb 100644
--- a/src/assets/styles/publicXG.scss
+++ b/src/assets/styles/publicXG.scss
@@ -11,6 +11,12 @@
 .text-center {
   text-align: center;
 }
+.mt-10 {
+  margin-top: 10px !important;
+}
+.mt-5 {
+  margin-top: 5px !important;
+}
 
 .multiselect {
   line-height: 16px;
@@ -505,3 +511,42 @@
   width: 5px; /* 定义滚动条的宽度 */
   // height: 5px;
 }
+// 一张图自动滚动播放
+.scrollMapHM {
+  .scroll {
+    width: 100%;
+    height: 200px;
+    overflow: hidden;
+    display: inline-block;
+  }
+  .scrollTitle {
+    background: #005cba;
+    padding: 8px 3px;
+    justify-content: space-around;
+    align-items: center;
+    p {
+      color: #fff;
+      font-family: Source Han Sans CN;
+      font-weight: 400;
+      font-size: 14px;
+      text-align: center;
+    }
+  }
+  .scrollCont {
+    justify-content: space-around;
+    align-items: center;
+    background: #01355f;
+    height: 50px;
+    cursor: pointer;
+    &:nth-child(odd) {
+      background: #1b82b7;
+    }
+    p {
+      text-align: center;
+      color: #b8ecff;
+      font-weight: 400;
+      font-size: 14px;
+      padding: 5px 0px;
+    }
+  }
+}

diff --git a/src/api/longoPeration/MaterialManagement.js b/src/api/longoPeration/MaterialManagement.js
index 9b36e9c..c99206d 100644
--- a/src/api/longoPeration/MaterialManagement.js
+++ b/src/api/longoPeration/MaterialManagement.js
@@ -1,5 +1,5 @@
 import request from '@/utils/request';
-// 列表
+// 列表分页
 export function FloodPreventionMaterialpage(query) {
   return request({
     url: '/business/floodPreventionMaterial/page',
@@ -8,6 +8,15 @@
   });
 }
 
+// 列表
+export function FloodPreventionMaterialList(query) {
+  return request({
+    url: '/business/floodPreventionMaterial/list',
+    method: 'get',
+    params: query,
+  });
+}
+
 // 新增排水防涝--防汛物资
 export function FloodPreventionMaterialadd(data) {
   return request({
diff --git a/src/assets/newImgs/HMScreen/pumpBg.png b/src/assets/newImgs/HMScreen/pumpBg.png
new file mode 100644
index 0000000..89a1883
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/pumpBg.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/pumpOff.png b/src/assets/newImgs/HMScreen/pumpOff.png
new file mode 100644
index 0000000..ceb6c30
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/pumpOff.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/pumpOpen.png b/src/assets/newImgs/HMScreen/pumpOpen.png
new file mode 100644
index 0000000..721282b
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/pumpOpen.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/rainA.png b/src/assets/newImgs/HMScreen/rainA.png
new file mode 100644
index 0000000..7f9f19c
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/rainA.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/rainD.png b/src/assets/newImgs/HMScreen/rainD.png
new file mode 100644
index 0000000..6f9e7d8
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/rainD.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/rainP.png b/src/assets/newImgs/HMScreen/rainP.png
new file mode 100644
index 0000000..109353f
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/rainP.png
Binary files differ
diff --git a/src/assets/styles/publicXG.scss b/src/assets/styles/publicXG.scss
index ed0eeb5..2a1fafb 100644
--- a/src/assets/styles/publicXG.scss
+++ b/src/assets/styles/publicXG.scss
@@ -11,6 +11,12 @@
 .text-center {
   text-align: center;
 }
+.mt-10 {
+  margin-top: 10px !important;
+}
+.mt-5 {
+  margin-top: 5px !important;
+}
 
 .multiselect {
   line-height: 16px;
@@ -505,3 +511,42 @@
   width: 5px; /* 定义滚动条的宽度 */
   // height: 5px;
 }
+// 一张图自动滚动播放
+.scrollMapHM {
+  .scroll {
+    width: 100%;
+    height: 200px;
+    overflow: hidden;
+    display: inline-block;
+  }
+  .scrollTitle {
+    background: #005cba;
+    padding: 8px 3px;
+    justify-content: space-around;
+    align-items: center;
+    p {
+      color: #fff;
+      font-family: Source Han Sans CN;
+      font-weight: 400;
+      font-size: 14px;
+      text-align: center;
+    }
+  }
+  .scrollCont {
+    justify-content: space-around;
+    align-items: center;
+    background: #01355f;
+    height: 50px;
+    cursor: pointer;
+    &:nth-child(odd) {
+      background: #1b82b7;
+    }
+    p {
+      text-align: center;
+      color: #b8ecff;
+      font-weight: 400;
+      font-size: 14px;
+      padding: 5px 0px;
+    }
+  }
+}
diff --git a/src/main.js b/src/main.js
index 8e35824..2a0be40 100644
--- a/src/main.js
+++ b/src/main.js
@@ -5,7 +5,6 @@
 import locale from 'element-plus/lib/locale/lang/zh-cn'; // 中文语言
 import 'dayjs/locale/zh-cn'; //实现Element plus设置日历每周第一天从周一开始
 import '@/assets/styles/index.scss'; // global css
-import vue3SeamlessScroll from 'vue3-seamless-scroll';
 import 'animate.css'; //引入animate
 
 import App from './App';
@@ -96,7 +95,6 @@
 app.use(store);
 app.use(plugins);
 app.use(elementIcons);
-app.use(vue3SeamlessScroll);
 
 app.component('svg-icon', SvgIcon); //全局注册
 

diff --git a/src/api/longoPeration/MaterialManagement.js b/src/api/longoPeration/MaterialManagement.js
index 9b36e9c..c99206d 100644
--- a/src/api/longoPeration/MaterialManagement.js
+++ b/src/api/longoPeration/MaterialManagement.js
@@ -1,5 +1,5 @@
 import request from '@/utils/request';
-// 列表
+// 列表分页
 export function FloodPreventionMaterialpage(query) {
   return request({
     url: '/business/floodPreventionMaterial/page',
@@ -8,6 +8,15 @@
   });
 }
 
+// 列表
+export function FloodPreventionMaterialList(query) {
+  return request({
+    url: '/business/floodPreventionMaterial/list',
+    method: 'get',
+    params: query,
+  });
+}
+
 // 新增排水防涝--防汛物资
 export function FloodPreventionMaterialadd(data) {
   return request({
diff --git a/src/assets/newImgs/HMScreen/pumpBg.png b/src/assets/newImgs/HMScreen/pumpBg.png
new file mode 100644
index 0000000..89a1883
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/pumpBg.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/pumpOff.png b/src/assets/newImgs/HMScreen/pumpOff.png
new file mode 100644
index 0000000..ceb6c30
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/pumpOff.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/pumpOpen.png b/src/assets/newImgs/HMScreen/pumpOpen.png
new file mode 100644
index 0000000..721282b
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/pumpOpen.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/rainA.png b/src/assets/newImgs/HMScreen/rainA.png
new file mode 100644
index 0000000..7f9f19c
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/rainA.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/rainD.png b/src/assets/newImgs/HMScreen/rainD.png
new file mode 100644
index 0000000..6f9e7d8
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/rainD.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/rainP.png b/src/assets/newImgs/HMScreen/rainP.png
new file mode 100644
index 0000000..109353f
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/rainP.png
Binary files differ
diff --git a/src/assets/styles/publicXG.scss b/src/assets/styles/publicXG.scss
index ed0eeb5..2a1fafb 100644
--- a/src/assets/styles/publicXG.scss
+++ b/src/assets/styles/publicXG.scss
@@ -11,6 +11,12 @@
 .text-center {
   text-align: center;
 }
+.mt-10 {
+  margin-top: 10px !important;
+}
+.mt-5 {
+  margin-top: 5px !important;
+}
 
 .multiselect {
   line-height: 16px;
@@ -505,3 +511,42 @@
   width: 5px; /* 定义滚动条的宽度 */
   // height: 5px;
 }
+// 一张图自动滚动播放
+.scrollMapHM {
+  .scroll {
+    width: 100%;
+    height: 200px;
+    overflow: hidden;
+    display: inline-block;
+  }
+  .scrollTitle {
+    background: #005cba;
+    padding: 8px 3px;
+    justify-content: space-around;
+    align-items: center;
+    p {
+      color: #fff;
+      font-family: Source Han Sans CN;
+      font-weight: 400;
+      font-size: 14px;
+      text-align: center;
+    }
+  }
+  .scrollCont {
+    justify-content: space-around;
+    align-items: center;
+    background: #01355f;
+    height: 50px;
+    cursor: pointer;
+    &:nth-child(odd) {
+      background: #1b82b7;
+    }
+    p {
+      text-align: center;
+      color: #b8ecff;
+      font-weight: 400;
+      font-size: 14px;
+      padding: 5px 0px;
+    }
+  }
+}
diff --git a/src/main.js b/src/main.js
index 8e35824..2a0be40 100644
--- a/src/main.js
+++ b/src/main.js
@@ -5,7 +5,6 @@
 import locale from 'element-plus/lib/locale/lang/zh-cn'; // 中文语言
 import 'dayjs/locale/zh-cn'; //实现Element plus设置日历每周第一天从周一开始
 import '@/assets/styles/index.scss'; // global css
-import vue3SeamlessScroll from 'vue3-seamless-scroll';
 import 'animate.css'; //引入animate
 
 import App from './App';
@@ -96,7 +95,6 @@
 app.use(store);
 app.use(plugins);
 app.use(elementIcons);
-app.use(vue3SeamlessScroll);
 
 app.component('svg-icon', SvgIcon); //全局注册
 
diff --git a/src/views/sponeScreen/Echarts/echartBar3D.vue b/src/views/sponeScreen/Echarts/echartBar3D.vue
new file mode 100644
index 0000000..0df0053
--- /dev/null
+++ b/src/views/sponeScreen/Echarts/echartBar3D.vue
@@ -0,0 +1,227 @@
+<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, normalizeStyle } from 'vue';
+export default {
+  name: 'line-chart',
+  props: {
+    echartData: 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));
+      let option = {
+        color: [
+          '#63caff',
+          '#49beff',
+          '#03387a',
+          '#03387a',
+          '#03387a',
+          '#6c93ee',
+          '#a9abff',
+          '#f7a23f',
+          '#27bae7',
+          '#ff6d9d',
+          '#cb79ff',
+          '#f95b5a',
+          '#ccaf27',
+          '#38b99c',
+          '#93d0ff',
+          '#bd74e0',
+          '#fd77da',
+          '#dea700',
+        ],
+        grid: {
+          containLabel: true,
+          left: 20,
+          right: 20,
+          bottom: 10,
+          top: 40,
+        },
+        xAxis: {
+          axisLabel: {
+            color: '#c0c3cd',
+            fontSize: 14,
+            interval: 0,
+          },
+          axisTick: {
+            lineStyle: {
+              color: '#384267',
+            },
+            show: true,
+          },
+          splitLine: {
+            show: false,
+          },
+          axisLine: {
+            lineStyle: {
+              color: '#384267',
+              width: 1,
+              type: 'dashed',
+            },
+            show: true,
+          },
+          data: props.echartData.xAxis,
+          type: 'category',
+        },
+        yAxis: {
+          axisLabel: {
+            color: '#fff',
+            fontSize: 13,
+          },
+          axisTick: {
+            lineStyle: {
+              color: '#005CBA',
+              width: 1,
+            },
+            show: true,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: '#005CBA',
+              type: 'dashed',
+            },
+          },
+          axisLine: {
+            lineStyle: {
+              color: '#005CBA',
+              width: 1,
+              type: 'dashed',
+            },
+            show: true,
+          },
+          name: props.echartData.yName,
+          nameTextStyle: {
+            color: '#fff',
+          },
+        },
+        series: [
+          {
+            data: props.echartData.seriesData,
+            type: 'bar',
+            barMaxWidth: 'auto',
+            barWidth: 20,
+            itemStyle: {
+              color: {
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                type: 'linear',
+                global: false,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: '#0b9eff',
+                  },
+                  {
+                    offset: 1,
+                    color: '#63caff',
+                  },
+                ],
+              },
+            },
+            label: {
+              show: true,
+              position: 'top',
+              distance: 10,
+              color: '#fff',
+            },
+          },
+          {
+            data: [1, 1, 1, 1, 1, 1, 1, 1],
+            type: 'pictorialBar',
+            barMaxWidth: '20',
+            symbol: 'diamond',
+            symbolOffset: [0, '50%'],
+            symbolSize: [20, 15],
+          },
+          {
+            data: props.echartData.seriesData,
+            type: 'pictorialBar',
+            barMaxWidth: '20',
+            symbolPosition: 'end',
+            symbol: 'diamond',
+            symbolOffset: [0, '-50%'],
+            symbolSize: [20, 12],
+            zlevel: 2,
+          },
+          {
+            data: props.echartData.seriesDataMax,
+            type: 'bar',
+            barMaxWidth: 'auto',
+            barWidth: 20,
+            barGap: '-100%',
+            zlevel: -1,
+          },
+          {
+            data: [1, 1, 1, 1, 1, 1, 1, 1],
+            type: 'pictorialBar',
+            barMaxWidth: '20',
+            symbol: 'diamond',
+            symbolOffset: [0, '50%'],
+            symbolSize: [20, 15],
+            zlevel: -2,
+          },
+          {
+            data: props.echartData.seriesDataMax,
+            type: 'pictorialBar',
+            barMaxWidth: '20',
+            symbolPosition: 'end',
+            symbol: 'diamond',
+            symbolOffset: [0, '-50%'],
+            symbolSize: [20, 12],
+            zlevel: -1,
+          },
+        ],
+        tooltip: {
+          trigger: 'axis',
+          show: false,
+        },
+      };
+      option && chartDom.setOption(option, true);
+      allData.chart = chartDom;
+    };
+    watch(
+      () => props.refresh,
+      () => {
+        if (allData.chart) {
+          allData.chart.dispose();
+          allData.chart = null;
+        }
+        setTimeout(() => {
+          init();
+        }, 0);
+      }
+    );
+
+    onMounted(() => {
+      init();
+      window.addEventListener('resize', resizeTheChart);
+    });
+    return {
+      ...toRefs(allData),
+      resizeTheChart,
+      init,
+    };
+  },
+};
+</script>

diff --git a/src/api/longoPeration/MaterialManagement.js b/src/api/longoPeration/MaterialManagement.js
index 9b36e9c..c99206d 100644
--- a/src/api/longoPeration/MaterialManagement.js
+++ b/src/api/longoPeration/MaterialManagement.js
@@ -1,5 +1,5 @@
 import request from '@/utils/request';
-// 列表
+// 列表分页
 export function FloodPreventionMaterialpage(query) {
   return request({
     url: '/business/floodPreventionMaterial/page',
@@ -8,6 +8,15 @@
   });
 }
 
+// 列表
+export function FloodPreventionMaterialList(query) {
+  return request({
+    url: '/business/floodPreventionMaterial/list',
+    method: 'get',
+    params: query,
+  });
+}
+
 // 新增排水防涝--防汛物资
 export function FloodPreventionMaterialadd(data) {
   return request({
diff --git a/src/assets/newImgs/HMScreen/pumpBg.png b/src/assets/newImgs/HMScreen/pumpBg.png
new file mode 100644
index 0000000..89a1883
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/pumpBg.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/pumpOff.png b/src/assets/newImgs/HMScreen/pumpOff.png
new file mode 100644
index 0000000..ceb6c30
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/pumpOff.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/pumpOpen.png b/src/assets/newImgs/HMScreen/pumpOpen.png
new file mode 100644
index 0000000..721282b
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/pumpOpen.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/rainA.png b/src/assets/newImgs/HMScreen/rainA.png
new file mode 100644
index 0000000..7f9f19c
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/rainA.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/rainD.png b/src/assets/newImgs/HMScreen/rainD.png
new file mode 100644
index 0000000..6f9e7d8
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/rainD.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/rainP.png b/src/assets/newImgs/HMScreen/rainP.png
new file mode 100644
index 0000000..109353f
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/rainP.png
Binary files differ
diff --git a/src/assets/styles/publicXG.scss b/src/assets/styles/publicXG.scss
index ed0eeb5..2a1fafb 100644
--- a/src/assets/styles/publicXG.scss
+++ b/src/assets/styles/publicXG.scss
@@ -11,6 +11,12 @@
 .text-center {
   text-align: center;
 }
+.mt-10 {
+  margin-top: 10px !important;
+}
+.mt-5 {
+  margin-top: 5px !important;
+}
 
 .multiselect {
   line-height: 16px;
@@ -505,3 +511,42 @@
   width: 5px; /* 定义滚动条的宽度 */
   // height: 5px;
 }
+// 一张图自动滚动播放
+.scrollMapHM {
+  .scroll {
+    width: 100%;
+    height: 200px;
+    overflow: hidden;
+    display: inline-block;
+  }
+  .scrollTitle {
+    background: #005cba;
+    padding: 8px 3px;
+    justify-content: space-around;
+    align-items: center;
+    p {
+      color: #fff;
+      font-family: Source Han Sans CN;
+      font-weight: 400;
+      font-size: 14px;
+      text-align: center;
+    }
+  }
+  .scrollCont {
+    justify-content: space-around;
+    align-items: center;
+    background: #01355f;
+    height: 50px;
+    cursor: pointer;
+    &:nth-child(odd) {
+      background: #1b82b7;
+    }
+    p {
+      text-align: center;
+      color: #b8ecff;
+      font-weight: 400;
+      font-size: 14px;
+      padding: 5px 0px;
+    }
+  }
+}
diff --git a/src/main.js b/src/main.js
index 8e35824..2a0be40 100644
--- a/src/main.js
+++ b/src/main.js
@@ -5,7 +5,6 @@
 import locale from 'element-plus/lib/locale/lang/zh-cn'; // 中文语言
 import 'dayjs/locale/zh-cn'; //实现Element plus设置日历每周第一天从周一开始
 import '@/assets/styles/index.scss'; // global css
-import vue3SeamlessScroll from 'vue3-seamless-scroll';
 import 'animate.css'; //引入animate
 
 import App from './App';
@@ -96,7 +95,6 @@
 app.use(store);
 app.use(plugins);
 app.use(elementIcons);
-app.use(vue3SeamlessScroll);
 
 app.component('svg-icon', SvgIcon); //全局注册
 
diff --git a/src/views/sponeScreen/Echarts/echartBar3D.vue b/src/views/sponeScreen/Echarts/echartBar3D.vue
new file mode 100644
index 0000000..0df0053
--- /dev/null
+++ b/src/views/sponeScreen/Echarts/echartBar3D.vue
@@ -0,0 +1,227 @@
+<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, normalizeStyle } from 'vue';
+export default {
+  name: 'line-chart',
+  props: {
+    echartData: 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));
+      let option = {
+        color: [
+          '#63caff',
+          '#49beff',
+          '#03387a',
+          '#03387a',
+          '#03387a',
+          '#6c93ee',
+          '#a9abff',
+          '#f7a23f',
+          '#27bae7',
+          '#ff6d9d',
+          '#cb79ff',
+          '#f95b5a',
+          '#ccaf27',
+          '#38b99c',
+          '#93d0ff',
+          '#bd74e0',
+          '#fd77da',
+          '#dea700',
+        ],
+        grid: {
+          containLabel: true,
+          left: 20,
+          right: 20,
+          bottom: 10,
+          top: 40,
+        },
+        xAxis: {
+          axisLabel: {
+            color: '#c0c3cd',
+            fontSize: 14,
+            interval: 0,
+          },
+          axisTick: {
+            lineStyle: {
+              color: '#384267',
+            },
+            show: true,
+          },
+          splitLine: {
+            show: false,
+          },
+          axisLine: {
+            lineStyle: {
+              color: '#384267',
+              width: 1,
+              type: 'dashed',
+            },
+            show: true,
+          },
+          data: props.echartData.xAxis,
+          type: 'category',
+        },
+        yAxis: {
+          axisLabel: {
+            color: '#fff',
+            fontSize: 13,
+          },
+          axisTick: {
+            lineStyle: {
+              color: '#005CBA',
+              width: 1,
+            },
+            show: true,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: '#005CBA',
+              type: 'dashed',
+            },
+          },
+          axisLine: {
+            lineStyle: {
+              color: '#005CBA',
+              width: 1,
+              type: 'dashed',
+            },
+            show: true,
+          },
+          name: props.echartData.yName,
+          nameTextStyle: {
+            color: '#fff',
+          },
+        },
+        series: [
+          {
+            data: props.echartData.seriesData,
+            type: 'bar',
+            barMaxWidth: 'auto',
+            barWidth: 20,
+            itemStyle: {
+              color: {
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                type: 'linear',
+                global: false,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: '#0b9eff',
+                  },
+                  {
+                    offset: 1,
+                    color: '#63caff',
+                  },
+                ],
+              },
+            },
+            label: {
+              show: true,
+              position: 'top',
+              distance: 10,
+              color: '#fff',
+            },
+          },
+          {
+            data: [1, 1, 1, 1, 1, 1, 1, 1],
+            type: 'pictorialBar',
+            barMaxWidth: '20',
+            symbol: 'diamond',
+            symbolOffset: [0, '50%'],
+            symbolSize: [20, 15],
+          },
+          {
+            data: props.echartData.seriesData,
+            type: 'pictorialBar',
+            barMaxWidth: '20',
+            symbolPosition: 'end',
+            symbol: 'diamond',
+            symbolOffset: [0, '-50%'],
+            symbolSize: [20, 12],
+            zlevel: 2,
+          },
+          {
+            data: props.echartData.seriesDataMax,
+            type: 'bar',
+            barMaxWidth: 'auto',
+            barWidth: 20,
+            barGap: '-100%',
+            zlevel: -1,
+          },
+          {
+            data: [1, 1, 1, 1, 1, 1, 1, 1],
+            type: 'pictorialBar',
+            barMaxWidth: '20',
+            symbol: 'diamond',
+            symbolOffset: [0, '50%'],
+            symbolSize: [20, 15],
+            zlevel: -2,
+          },
+          {
+            data: props.echartData.seriesDataMax,
+            type: 'pictorialBar',
+            barMaxWidth: '20',
+            symbolPosition: 'end',
+            symbol: 'diamond',
+            symbolOffset: [0, '-50%'],
+            symbolSize: [20, 12],
+            zlevel: -1,
+          },
+        ],
+        tooltip: {
+          trigger: 'axis',
+          show: false,
+        },
+      };
+      option && chartDom.setOption(option, true);
+      allData.chart = chartDom;
+    };
+    watch(
+      () => props.refresh,
+      () => {
+        if (allData.chart) {
+          allData.chart.dispose();
+          allData.chart = null;
+        }
+        setTimeout(() => {
+          init();
+        }, 0);
+      }
+    );
+
+    onMounted(() => {
+      init();
+      window.addEventListener('resize', resizeTheChart);
+    });
+    return {
+      ...toRefs(allData),
+      resizeTheChart,
+      init,
+    };
+  },
+};
+</script>
diff --git a/src/views/sponeScreen/HaiMianScreen/index.vue b/src/views/sponeScreen/HaiMianScreen/index.vue
index b966b46..eec97fa 100644
--- a/src/views/sponeScreen/HaiMianScreen/index.vue
+++ b/src/views/sponeScreen/HaiMianScreen/index.vue
@@ -8,7 +8,7 @@
     <Legend :showLegend="showLegend" :class="['animate__animated', showPanel ? 'animate__fadeOutDown' : '']"></Legend>
 
     <!-- 控制面板按钮 -->
-    <div class="controlHM" :style="{ right: showPanel ? '30px' : '520px' }" v-if="menuIndex != 3">
+    <div :class="['controlHM', showPanel ? 'right30' : 'right520']" v-if="menuIndex != 3">
       <img src="@/assets/newImgs/HMScreen/iconLegend.png" alt="" title="图例控制" @click="controlLegend" />
       <img src="@/assets/newImgs/HMScreen/iconPane.png" alt="" title="展开收起" @click="controlPanel" />
     </div>
@@ -152,6 +152,12 @@
     left: 0px;
     z-index: 220;
   }
+  .right30 {
+    right: 30px;
+  }
+  .right520 {
+    right: 520px;
+  }
   .controlHM {
     position: absolute;
     bottom: 50px;

diff --git a/src/api/longoPeration/MaterialManagement.js b/src/api/longoPeration/MaterialManagement.js
index 9b36e9c..c99206d 100644
--- a/src/api/longoPeration/MaterialManagement.js
+++ b/src/api/longoPeration/MaterialManagement.js
@@ -1,5 +1,5 @@
 import request from '@/utils/request';
-// 列表
+// 列表分页
 export function FloodPreventionMaterialpage(query) {
   return request({
     url: '/business/floodPreventionMaterial/page',
@@ -8,6 +8,15 @@
   });
 }
 
+// 列表
+export function FloodPreventionMaterialList(query) {
+  return request({
+    url: '/business/floodPreventionMaterial/list',
+    method: 'get',
+    params: query,
+  });
+}
+
 // 新增排水防涝--防汛物资
 export function FloodPreventionMaterialadd(data) {
   return request({
diff --git a/src/assets/newImgs/HMScreen/pumpBg.png b/src/assets/newImgs/HMScreen/pumpBg.png
new file mode 100644
index 0000000..89a1883
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/pumpBg.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/pumpOff.png b/src/assets/newImgs/HMScreen/pumpOff.png
new file mode 100644
index 0000000..ceb6c30
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/pumpOff.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/pumpOpen.png b/src/assets/newImgs/HMScreen/pumpOpen.png
new file mode 100644
index 0000000..721282b
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/pumpOpen.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/rainA.png b/src/assets/newImgs/HMScreen/rainA.png
new file mode 100644
index 0000000..7f9f19c
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/rainA.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/rainD.png b/src/assets/newImgs/HMScreen/rainD.png
new file mode 100644
index 0000000..6f9e7d8
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/rainD.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/rainP.png b/src/assets/newImgs/HMScreen/rainP.png
new file mode 100644
index 0000000..109353f
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/rainP.png
Binary files differ
diff --git a/src/assets/styles/publicXG.scss b/src/assets/styles/publicXG.scss
index ed0eeb5..2a1fafb 100644
--- a/src/assets/styles/publicXG.scss
+++ b/src/assets/styles/publicXG.scss
@@ -11,6 +11,12 @@
 .text-center {
   text-align: center;
 }
+.mt-10 {
+  margin-top: 10px !important;
+}
+.mt-5 {
+  margin-top: 5px !important;
+}
 
 .multiselect {
   line-height: 16px;
@@ -505,3 +511,42 @@
   width: 5px; /* 定义滚动条的宽度 */
   // height: 5px;
 }
+// 一张图自动滚动播放
+.scrollMapHM {
+  .scroll {
+    width: 100%;
+    height: 200px;
+    overflow: hidden;
+    display: inline-block;
+  }
+  .scrollTitle {
+    background: #005cba;
+    padding: 8px 3px;
+    justify-content: space-around;
+    align-items: center;
+    p {
+      color: #fff;
+      font-family: Source Han Sans CN;
+      font-weight: 400;
+      font-size: 14px;
+      text-align: center;
+    }
+  }
+  .scrollCont {
+    justify-content: space-around;
+    align-items: center;
+    background: #01355f;
+    height: 50px;
+    cursor: pointer;
+    &:nth-child(odd) {
+      background: #1b82b7;
+    }
+    p {
+      text-align: center;
+      color: #b8ecff;
+      font-weight: 400;
+      font-size: 14px;
+      padding: 5px 0px;
+    }
+  }
+}
diff --git a/src/main.js b/src/main.js
index 8e35824..2a0be40 100644
--- a/src/main.js
+++ b/src/main.js
@@ -5,7 +5,6 @@
 import locale from 'element-plus/lib/locale/lang/zh-cn'; // 中文语言
 import 'dayjs/locale/zh-cn'; //实现Element plus设置日历每周第一天从周一开始
 import '@/assets/styles/index.scss'; // global css
-import vue3SeamlessScroll from 'vue3-seamless-scroll';
 import 'animate.css'; //引入animate
 
 import App from './App';
@@ -96,7 +95,6 @@
 app.use(store);
 app.use(plugins);
 app.use(elementIcons);
-app.use(vue3SeamlessScroll);
 
 app.component('svg-icon', SvgIcon); //全局注册
 
diff --git a/src/views/sponeScreen/Echarts/echartBar3D.vue b/src/views/sponeScreen/Echarts/echartBar3D.vue
new file mode 100644
index 0000000..0df0053
--- /dev/null
+++ b/src/views/sponeScreen/Echarts/echartBar3D.vue
@@ -0,0 +1,227 @@
+<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, normalizeStyle } from 'vue';
+export default {
+  name: 'line-chart',
+  props: {
+    echartData: 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));
+      let option = {
+        color: [
+          '#63caff',
+          '#49beff',
+          '#03387a',
+          '#03387a',
+          '#03387a',
+          '#6c93ee',
+          '#a9abff',
+          '#f7a23f',
+          '#27bae7',
+          '#ff6d9d',
+          '#cb79ff',
+          '#f95b5a',
+          '#ccaf27',
+          '#38b99c',
+          '#93d0ff',
+          '#bd74e0',
+          '#fd77da',
+          '#dea700',
+        ],
+        grid: {
+          containLabel: true,
+          left: 20,
+          right: 20,
+          bottom: 10,
+          top: 40,
+        },
+        xAxis: {
+          axisLabel: {
+            color: '#c0c3cd',
+            fontSize: 14,
+            interval: 0,
+          },
+          axisTick: {
+            lineStyle: {
+              color: '#384267',
+            },
+            show: true,
+          },
+          splitLine: {
+            show: false,
+          },
+          axisLine: {
+            lineStyle: {
+              color: '#384267',
+              width: 1,
+              type: 'dashed',
+            },
+            show: true,
+          },
+          data: props.echartData.xAxis,
+          type: 'category',
+        },
+        yAxis: {
+          axisLabel: {
+            color: '#fff',
+            fontSize: 13,
+          },
+          axisTick: {
+            lineStyle: {
+              color: '#005CBA',
+              width: 1,
+            },
+            show: true,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: '#005CBA',
+              type: 'dashed',
+            },
+          },
+          axisLine: {
+            lineStyle: {
+              color: '#005CBA',
+              width: 1,
+              type: 'dashed',
+            },
+            show: true,
+          },
+          name: props.echartData.yName,
+          nameTextStyle: {
+            color: '#fff',
+          },
+        },
+        series: [
+          {
+            data: props.echartData.seriesData,
+            type: 'bar',
+            barMaxWidth: 'auto',
+            barWidth: 20,
+            itemStyle: {
+              color: {
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                type: 'linear',
+                global: false,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: '#0b9eff',
+                  },
+                  {
+                    offset: 1,
+                    color: '#63caff',
+                  },
+                ],
+              },
+            },
+            label: {
+              show: true,
+              position: 'top',
+              distance: 10,
+              color: '#fff',
+            },
+          },
+          {
+            data: [1, 1, 1, 1, 1, 1, 1, 1],
+            type: 'pictorialBar',
+            barMaxWidth: '20',
+            symbol: 'diamond',
+            symbolOffset: [0, '50%'],
+            symbolSize: [20, 15],
+          },
+          {
+            data: props.echartData.seriesData,
+            type: 'pictorialBar',
+            barMaxWidth: '20',
+            symbolPosition: 'end',
+            symbol: 'diamond',
+            symbolOffset: [0, '-50%'],
+            symbolSize: [20, 12],
+            zlevel: 2,
+          },
+          {
+            data: props.echartData.seriesDataMax,
+            type: 'bar',
+            barMaxWidth: 'auto',
+            barWidth: 20,
+            barGap: '-100%',
+            zlevel: -1,
+          },
+          {
+            data: [1, 1, 1, 1, 1, 1, 1, 1],
+            type: 'pictorialBar',
+            barMaxWidth: '20',
+            symbol: 'diamond',
+            symbolOffset: [0, '50%'],
+            symbolSize: [20, 15],
+            zlevel: -2,
+          },
+          {
+            data: props.echartData.seriesDataMax,
+            type: 'pictorialBar',
+            barMaxWidth: '20',
+            symbolPosition: 'end',
+            symbol: 'diamond',
+            symbolOffset: [0, '-50%'],
+            symbolSize: [20, 12],
+            zlevel: -1,
+          },
+        ],
+        tooltip: {
+          trigger: 'axis',
+          show: false,
+        },
+      };
+      option && chartDom.setOption(option, true);
+      allData.chart = chartDom;
+    };
+    watch(
+      () => props.refresh,
+      () => {
+        if (allData.chart) {
+          allData.chart.dispose();
+          allData.chart = null;
+        }
+        setTimeout(() => {
+          init();
+        }, 0);
+      }
+    );
+
+    onMounted(() => {
+      init();
+      window.addEventListener('resize', resizeTheChart);
+    });
+    return {
+      ...toRefs(allData),
+      resizeTheChart,
+      init,
+    };
+  },
+};
+</script>
diff --git a/src/views/sponeScreen/HaiMianScreen/index.vue b/src/views/sponeScreen/HaiMianScreen/index.vue
index b966b46..eec97fa 100644
--- a/src/views/sponeScreen/HaiMianScreen/index.vue
+++ b/src/views/sponeScreen/HaiMianScreen/index.vue
@@ -8,7 +8,7 @@
     <Legend :showLegend="showLegend" :class="['animate__animated', showPanel ? 'animate__fadeOutDown' : '']"></Legend>
 
     <!-- 控制面板按钮 -->
-    <div class="controlHM" :style="{ right: showPanel ? '30px' : '520px' }" v-if="menuIndex != 3">
+    <div :class="['controlHM', showPanel ? 'right30' : 'right520']" v-if="menuIndex != 3">
       <img src="@/assets/newImgs/HMScreen/iconLegend.png" alt="" title="图例控制" @click="controlLegend" />
       <img src="@/assets/newImgs/HMScreen/iconPane.png" alt="" title="展开收起" @click="controlPanel" />
     </div>
@@ -152,6 +152,12 @@
     left: 0px;
     z-index: 220;
   }
+  .right30 {
+    right: 30px;
+  }
+  .right520 {
+    right: 520px;
+  }
   .controlHM {
     position: absolute;
     bottom: 50px;
diff --git a/src/views/sponeScreen/waterFlood/floodWZ.vue b/src/views/sponeScreen/waterFlood/floodWZ.vue
index 890df39..ab7696a 100644
--- a/src/views/sponeScreen/waterFlood/floodWZ.vue
+++ b/src/views/sponeScreen/waterFlood/floodWZ.vue
@@ -2,18 +2,56 @@
   <!-- 防汛物资 -->
   <div class="floodWZPage">
     <div class="partTitleHM">防汛物资</div>
-    <div class="partContHM">防汛物资1</div>
+    <div class="partContHM">
+      <div class="scrollMapHM">
+        <div class="scrollTitle flex">
+          <p>物资储备地点</p>
+          <p>物资详情</p>
+          <p>负责人</p>
+        </div>
+        <Vue3SeamlessScroll :list="dataList" :singleHeight="54" :singleWaitTime="2000" :hover="true" class="scroll">
+          <div class="scrollCont flex" v-for="item in dataList" :key="item.id">
+            <p class="ellipsis" :title="item.address">{{ item.address }}</p>
+            <p class="ellipsis" :title="item.materialDetails">{{ item.materialDetails }}</p>
+            <p class="ellipsis">{{ item.header }}<br />{{ item.headerPhone }}</p>
+          </div>
+        </Vue3SeamlessScroll>
+      </div>
+    </div>
   </div>
 </template>
 
 <script setup>
+import { FloodPreventionMaterialList } from '@/api/longoPeration/MaterialManagement';
+import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
+
 const { proxy } = getCurrentInstance();
 
-onMounted(() => {});
+const dataList = ref([]);
+const loading = ref(true);
+
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true;
+  let res = await FloodPreventionMaterialList({});
+  if (res && res.code == 200) {
+    dataList.value = res.data || [];
+    console.log(dataList.value);
+  }
+  loading.value = false;
+};
+onMounted(() => {
+  getList();
+});
 </script>
 
 <style lang="scss" scoped>
 .floodWZPage {
   width: 100%;
+  .scrollMapHM {
+    p {
+      width: 30%;
+    }
+  }
 }
 </style>

diff --git a/src/api/longoPeration/MaterialManagement.js b/src/api/longoPeration/MaterialManagement.js
index 9b36e9c..c99206d 100644
--- a/src/api/longoPeration/MaterialManagement.js
+++ b/src/api/longoPeration/MaterialManagement.js
@@ -1,5 +1,5 @@
 import request from '@/utils/request';
-// 列表
+// 列表分页
 export function FloodPreventionMaterialpage(query) {
   return request({
     url: '/business/floodPreventionMaterial/page',
@@ -8,6 +8,15 @@
   });
 }
 
+// 列表
+export function FloodPreventionMaterialList(query) {
+  return request({
+    url: '/business/floodPreventionMaterial/list',
+    method: 'get',
+    params: query,
+  });
+}
+
 // 新增排水防涝--防汛物资
 export function FloodPreventionMaterialadd(data) {
   return request({
diff --git a/src/assets/newImgs/HMScreen/pumpBg.png b/src/assets/newImgs/HMScreen/pumpBg.png
new file mode 100644
index 0000000..89a1883
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/pumpBg.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/pumpOff.png b/src/assets/newImgs/HMScreen/pumpOff.png
new file mode 100644
index 0000000..ceb6c30
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/pumpOff.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/pumpOpen.png b/src/assets/newImgs/HMScreen/pumpOpen.png
new file mode 100644
index 0000000..721282b
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/pumpOpen.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/rainA.png b/src/assets/newImgs/HMScreen/rainA.png
new file mode 100644
index 0000000..7f9f19c
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/rainA.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/rainD.png b/src/assets/newImgs/HMScreen/rainD.png
new file mode 100644
index 0000000..6f9e7d8
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/rainD.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/rainP.png b/src/assets/newImgs/HMScreen/rainP.png
new file mode 100644
index 0000000..109353f
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/rainP.png
Binary files differ
diff --git a/src/assets/styles/publicXG.scss b/src/assets/styles/publicXG.scss
index ed0eeb5..2a1fafb 100644
--- a/src/assets/styles/publicXG.scss
+++ b/src/assets/styles/publicXG.scss
@@ -11,6 +11,12 @@
 .text-center {
   text-align: center;
 }
+.mt-10 {
+  margin-top: 10px !important;
+}
+.mt-5 {
+  margin-top: 5px !important;
+}
 
 .multiselect {
   line-height: 16px;
@@ -505,3 +511,42 @@
   width: 5px; /* 定义滚动条的宽度 */
   // height: 5px;
 }
+// 一张图自动滚动播放
+.scrollMapHM {
+  .scroll {
+    width: 100%;
+    height: 200px;
+    overflow: hidden;
+    display: inline-block;
+  }
+  .scrollTitle {
+    background: #005cba;
+    padding: 8px 3px;
+    justify-content: space-around;
+    align-items: center;
+    p {
+      color: #fff;
+      font-family: Source Han Sans CN;
+      font-weight: 400;
+      font-size: 14px;
+      text-align: center;
+    }
+  }
+  .scrollCont {
+    justify-content: space-around;
+    align-items: center;
+    background: #01355f;
+    height: 50px;
+    cursor: pointer;
+    &:nth-child(odd) {
+      background: #1b82b7;
+    }
+    p {
+      text-align: center;
+      color: #b8ecff;
+      font-weight: 400;
+      font-size: 14px;
+      padding: 5px 0px;
+    }
+  }
+}
diff --git a/src/main.js b/src/main.js
index 8e35824..2a0be40 100644
--- a/src/main.js
+++ b/src/main.js
@@ -5,7 +5,6 @@
 import locale from 'element-plus/lib/locale/lang/zh-cn'; // 中文语言
 import 'dayjs/locale/zh-cn'; //实现Element plus设置日历每周第一天从周一开始
 import '@/assets/styles/index.scss'; // global css
-import vue3SeamlessScroll from 'vue3-seamless-scroll';
 import 'animate.css'; //引入animate
 
 import App from './App';
@@ -96,7 +95,6 @@
 app.use(store);
 app.use(plugins);
 app.use(elementIcons);
-app.use(vue3SeamlessScroll);
 
 app.component('svg-icon', SvgIcon); //全局注册
 
diff --git a/src/views/sponeScreen/Echarts/echartBar3D.vue b/src/views/sponeScreen/Echarts/echartBar3D.vue
new file mode 100644
index 0000000..0df0053
--- /dev/null
+++ b/src/views/sponeScreen/Echarts/echartBar3D.vue
@@ -0,0 +1,227 @@
+<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, normalizeStyle } from 'vue';
+export default {
+  name: 'line-chart',
+  props: {
+    echartData: 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));
+      let option = {
+        color: [
+          '#63caff',
+          '#49beff',
+          '#03387a',
+          '#03387a',
+          '#03387a',
+          '#6c93ee',
+          '#a9abff',
+          '#f7a23f',
+          '#27bae7',
+          '#ff6d9d',
+          '#cb79ff',
+          '#f95b5a',
+          '#ccaf27',
+          '#38b99c',
+          '#93d0ff',
+          '#bd74e0',
+          '#fd77da',
+          '#dea700',
+        ],
+        grid: {
+          containLabel: true,
+          left: 20,
+          right: 20,
+          bottom: 10,
+          top: 40,
+        },
+        xAxis: {
+          axisLabel: {
+            color: '#c0c3cd',
+            fontSize: 14,
+            interval: 0,
+          },
+          axisTick: {
+            lineStyle: {
+              color: '#384267',
+            },
+            show: true,
+          },
+          splitLine: {
+            show: false,
+          },
+          axisLine: {
+            lineStyle: {
+              color: '#384267',
+              width: 1,
+              type: 'dashed',
+            },
+            show: true,
+          },
+          data: props.echartData.xAxis,
+          type: 'category',
+        },
+        yAxis: {
+          axisLabel: {
+            color: '#fff',
+            fontSize: 13,
+          },
+          axisTick: {
+            lineStyle: {
+              color: '#005CBA',
+              width: 1,
+            },
+            show: true,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: '#005CBA',
+              type: 'dashed',
+            },
+          },
+          axisLine: {
+            lineStyle: {
+              color: '#005CBA',
+              width: 1,
+              type: 'dashed',
+            },
+            show: true,
+          },
+          name: props.echartData.yName,
+          nameTextStyle: {
+            color: '#fff',
+          },
+        },
+        series: [
+          {
+            data: props.echartData.seriesData,
+            type: 'bar',
+            barMaxWidth: 'auto',
+            barWidth: 20,
+            itemStyle: {
+              color: {
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                type: 'linear',
+                global: false,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: '#0b9eff',
+                  },
+                  {
+                    offset: 1,
+                    color: '#63caff',
+                  },
+                ],
+              },
+            },
+            label: {
+              show: true,
+              position: 'top',
+              distance: 10,
+              color: '#fff',
+            },
+          },
+          {
+            data: [1, 1, 1, 1, 1, 1, 1, 1],
+            type: 'pictorialBar',
+            barMaxWidth: '20',
+            symbol: 'diamond',
+            symbolOffset: [0, '50%'],
+            symbolSize: [20, 15],
+          },
+          {
+            data: props.echartData.seriesData,
+            type: 'pictorialBar',
+            barMaxWidth: '20',
+            symbolPosition: 'end',
+            symbol: 'diamond',
+            symbolOffset: [0, '-50%'],
+            symbolSize: [20, 12],
+            zlevel: 2,
+          },
+          {
+            data: props.echartData.seriesDataMax,
+            type: 'bar',
+            barMaxWidth: 'auto',
+            barWidth: 20,
+            barGap: '-100%',
+            zlevel: -1,
+          },
+          {
+            data: [1, 1, 1, 1, 1, 1, 1, 1],
+            type: 'pictorialBar',
+            barMaxWidth: '20',
+            symbol: 'diamond',
+            symbolOffset: [0, '50%'],
+            symbolSize: [20, 15],
+            zlevel: -2,
+          },
+          {
+            data: props.echartData.seriesDataMax,
+            type: 'pictorialBar',
+            barMaxWidth: '20',
+            symbolPosition: 'end',
+            symbol: 'diamond',
+            symbolOffset: [0, '-50%'],
+            symbolSize: [20, 12],
+            zlevel: -1,
+          },
+        ],
+        tooltip: {
+          trigger: 'axis',
+          show: false,
+        },
+      };
+      option && chartDom.setOption(option, true);
+      allData.chart = chartDom;
+    };
+    watch(
+      () => props.refresh,
+      () => {
+        if (allData.chart) {
+          allData.chart.dispose();
+          allData.chart = null;
+        }
+        setTimeout(() => {
+          init();
+        }, 0);
+      }
+    );
+
+    onMounted(() => {
+      init();
+      window.addEventListener('resize', resizeTheChart);
+    });
+    return {
+      ...toRefs(allData),
+      resizeTheChart,
+      init,
+    };
+  },
+};
+</script>
diff --git a/src/views/sponeScreen/HaiMianScreen/index.vue b/src/views/sponeScreen/HaiMianScreen/index.vue
index b966b46..eec97fa 100644
--- a/src/views/sponeScreen/HaiMianScreen/index.vue
+++ b/src/views/sponeScreen/HaiMianScreen/index.vue
@@ -8,7 +8,7 @@
     <Legend :showLegend="showLegend" :class="['animate__animated', showPanel ? 'animate__fadeOutDown' : '']"></Legend>
 
     <!-- 控制面板按钮 -->
-    <div class="controlHM" :style="{ right: showPanel ? '30px' : '520px' }" v-if="menuIndex != 3">
+    <div :class="['controlHM', showPanel ? 'right30' : 'right520']" v-if="menuIndex != 3">
       <img src="@/assets/newImgs/HMScreen/iconLegend.png" alt="" title="图例控制" @click="controlLegend" />
       <img src="@/assets/newImgs/HMScreen/iconPane.png" alt="" title="展开收起" @click="controlPanel" />
     </div>
@@ -152,6 +152,12 @@
     left: 0px;
     z-index: 220;
   }
+  .right30 {
+    right: 30px;
+  }
+  .right520 {
+    right: 520px;
+  }
   .controlHM {
     position: absolute;
     bottom: 50px;
diff --git a/src/views/sponeScreen/waterFlood/floodWZ.vue b/src/views/sponeScreen/waterFlood/floodWZ.vue
index 890df39..ab7696a 100644
--- a/src/views/sponeScreen/waterFlood/floodWZ.vue
+++ b/src/views/sponeScreen/waterFlood/floodWZ.vue
@@ -2,18 +2,56 @@
   <!-- 防汛物资 -->
   <div class="floodWZPage">
     <div class="partTitleHM">防汛物资</div>
-    <div class="partContHM">防汛物资1</div>
+    <div class="partContHM">
+      <div class="scrollMapHM">
+        <div class="scrollTitle flex">
+          <p>物资储备地点</p>
+          <p>物资详情</p>
+          <p>负责人</p>
+        </div>
+        <Vue3SeamlessScroll :list="dataList" :singleHeight="54" :singleWaitTime="2000" :hover="true" class="scroll">
+          <div class="scrollCont flex" v-for="item in dataList" :key="item.id">
+            <p class="ellipsis" :title="item.address">{{ item.address }}</p>
+            <p class="ellipsis" :title="item.materialDetails">{{ item.materialDetails }}</p>
+            <p class="ellipsis">{{ item.header }}<br />{{ item.headerPhone }}</p>
+          </div>
+        </Vue3SeamlessScroll>
+      </div>
+    </div>
   </div>
 </template>
 
 <script setup>
+import { FloodPreventionMaterialList } from '@/api/longoPeration/MaterialManagement';
+import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
+
 const { proxy } = getCurrentInstance();
 
-onMounted(() => {});
+const dataList = ref([]);
+const loading = ref(true);
+
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true;
+  let res = await FloodPreventionMaterialList({});
+  if (res && res.code == 200) {
+    dataList.value = res.data || [];
+    console.log(dataList.value);
+  }
+  loading.value = false;
+};
+onMounted(() => {
+  getList();
+});
 </script>
 
 <style lang="scss" scoped>
 .floodWZPage {
   width: 100%;
+  .scrollMapHM {
+    p {
+      width: 30%;
+    }
+  }
 }
 </style>
diff --git a/src/views/sponeScreen/waterFlood/index.vue b/src/views/sponeScreen/waterFlood/index.vue
index 5994da6..a48905c 100644
--- a/src/views/sponeScreen/waterFlood/index.vue
+++ b/src/views/sponeScreen/waterFlood/index.vue
@@ -7,10 +7,10 @@
       <CaldarRain></CaldarRain>
 
       <!-- 降雨报告 -->
-      <ReportRain></ReportRain>
+      <ReportRain class="mt-10"></ReportRain>
 
       <!-- 防汛物资 -->
-      <FloodWZ></FloodWZ>
+      <FloodWZ class="mt-10"></FloodWZ>
     </div>
     <!-- 右侧 -->
     <div :class="['publicRightHM', 'animate__animated', showPanel ? 'animate__fadeOutRight' : 'animate__fadeInRight']">
@@ -18,7 +18,7 @@
       <MonitorBZ></MonitorBZ>
 
       <!-- 监测设备 -->
-      <MonitorEquip></MonitorEquip>
+      <MonitorEquip class="mt-10"></MonitorEquip>
     </div>
   </div>
 </template>

diff --git a/src/api/longoPeration/MaterialManagement.js b/src/api/longoPeration/MaterialManagement.js
index 9b36e9c..c99206d 100644
--- a/src/api/longoPeration/MaterialManagement.js
+++ b/src/api/longoPeration/MaterialManagement.js
@@ -1,5 +1,5 @@
 import request from '@/utils/request';
-// 列表
+// 列表分页
 export function FloodPreventionMaterialpage(query) {
   return request({
     url: '/business/floodPreventionMaterial/page',
@@ -8,6 +8,15 @@
   });
 }
 
+// 列表
+export function FloodPreventionMaterialList(query) {
+  return request({
+    url: '/business/floodPreventionMaterial/list',
+    method: 'get',
+    params: query,
+  });
+}
+
 // 新增排水防涝--防汛物资
 export function FloodPreventionMaterialadd(data) {
   return request({
diff --git a/src/assets/newImgs/HMScreen/pumpBg.png b/src/assets/newImgs/HMScreen/pumpBg.png
new file mode 100644
index 0000000..89a1883
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/pumpBg.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/pumpOff.png b/src/assets/newImgs/HMScreen/pumpOff.png
new file mode 100644
index 0000000..ceb6c30
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/pumpOff.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/pumpOpen.png b/src/assets/newImgs/HMScreen/pumpOpen.png
new file mode 100644
index 0000000..721282b
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/pumpOpen.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/rainA.png b/src/assets/newImgs/HMScreen/rainA.png
new file mode 100644
index 0000000..7f9f19c
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/rainA.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/rainD.png b/src/assets/newImgs/HMScreen/rainD.png
new file mode 100644
index 0000000..6f9e7d8
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/rainD.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/rainP.png b/src/assets/newImgs/HMScreen/rainP.png
new file mode 100644
index 0000000..109353f
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/rainP.png
Binary files differ
diff --git a/src/assets/styles/publicXG.scss b/src/assets/styles/publicXG.scss
index ed0eeb5..2a1fafb 100644
--- a/src/assets/styles/publicXG.scss
+++ b/src/assets/styles/publicXG.scss
@@ -11,6 +11,12 @@
 .text-center {
   text-align: center;
 }
+.mt-10 {
+  margin-top: 10px !important;
+}
+.mt-5 {
+  margin-top: 5px !important;
+}
 
 .multiselect {
   line-height: 16px;
@@ -505,3 +511,42 @@
   width: 5px; /* 定义滚动条的宽度 */
   // height: 5px;
 }
+// 一张图自动滚动播放
+.scrollMapHM {
+  .scroll {
+    width: 100%;
+    height: 200px;
+    overflow: hidden;
+    display: inline-block;
+  }
+  .scrollTitle {
+    background: #005cba;
+    padding: 8px 3px;
+    justify-content: space-around;
+    align-items: center;
+    p {
+      color: #fff;
+      font-family: Source Han Sans CN;
+      font-weight: 400;
+      font-size: 14px;
+      text-align: center;
+    }
+  }
+  .scrollCont {
+    justify-content: space-around;
+    align-items: center;
+    background: #01355f;
+    height: 50px;
+    cursor: pointer;
+    &:nth-child(odd) {
+      background: #1b82b7;
+    }
+    p {
+      text-align: center;
+      color: #b8ecff;
+      font-weight: 400;
+      font-size: 14px;
+      padding: 5px 0px;
+    }
+  }
+}
diff --git a/src/main.js b/src/main.js
index 8e35824..2a0be40 100644
--- a/src/main.js
+++ b/src/main.js
@@ -5,7 +5,6 @@
 import locale from 'element-plus/lib/locale/lang/zh-cn'; // 中文语言
 import 'dayjs/locale/zh-cn'; //实现Element plus设置日历每周第一天从周一开始
 import '@/assets/styles/index.scss'; // global css
-import vue3SeamlessScroll from 'vue3-seamless-scroll';
 import 'animate.css'; //引入animate
 
 import App from './App';
@@ -96,7 +95,6 @@
 app.use(store);
 app.use(plugins);
 app.use(elementIcons);
-app.use(vue3SeamlessScroll);
 
 app.component('svg-icon', SvgIcon); //全局注册
 
diff --git a/src/views/sponeScreen/Echarts/echartBar3D.vue b/src/views/sponeScreen/Echarts/echartBar3D.vue
new file mode 100644
index 0000000..0df0053
--- /dev/null
+++ b/src/views/sponeScreen/Echarts/echartBar3D.vue
@@ -0,0 +1,227 @@
+<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, normalizeStyle } from 'vue';
+export default {
+  name: 'line-chart',
+  props: {
+    echartData: 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));
+      let option = {
+        color: [
+          '#63caff',
+          '#49beff',
+          '#03387a',
+          '#03387a',
+          '#03387a',
+          '#6c93ee',
+          '#a9abff',
+          '#f7a23f',
+          '#27bae7',
+          '#ff6d9d',
+          '#cb79ff',
+          '#f95b5a',
+          '#ccaf27',
+          '#38b99c',
+          '#93d0ff',
+          '#bd74e0',
+          '#fd77da',
+          '#dea700',
+        ],
+        grid: {
+          containLabel: true,
+          left: 20,
+          right: 20,
+          bottom: 10,
+          top: 40,
+        },
+        xAxis: {
+          axisLabel: {
+            color: '#c0c3cd',
+            fontSize: 14,
+            interval: 0,
+          },
+          axisTick: {
+            lineStyle: {
+              color: '#384267',
+            },
+            show: true,
+          },
+          splitLine: {
+            show: false,
+          },
+          axisLine: {
+            lineStyle: {
+              color: '#384267',
+              width: 1,
+              type: 'dashed',
+            },
+            show: true,
+          },
+          data: props.echartData.xAxis,
+          type: 'category',
+        },
+        yAxis: {
+          axisLabel: {
+            color: '#fff',
+            fontSize: 13,
+          },
+          axisTick: {
+            lineStyle: {
+              color: '#005CBA',
+              width: 1,
+            },
+            show: true,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: '#005CBA',
+              type: 'dashed',
+            },
+          },
+          axisLine: {
+            lineStyle: {
+              color: '#005CBA',
+              width: 1,
+              type: 'dashed',
+            },
+            show: true,
+          },
+          name: props.echartData.yName,
+          nameTextStyle: {
+            color: '#fff',
+          },
+        },
+        series: [
+          {
+            data: props.echartData.seriesData,
+            type: 'bar',
+            barMaxWidth: 'auto',
+            barWidth: 20,
+            itemStyle: {
+              color: {
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                type: 'linear',
+                global: false,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: '#0b9eff',
+                  },
+                  {
+                    offset: 1,
+                    color: '#63caff',
+                  },
+                ],
+              },
+            },
+            label: {
+              show: true,
+              position: 'top',
+              distance: 10,
+              color: '#fff',
+            },
+          },
+          {
+            data: [1, 1, 1, 1, 1, 1, 1, 1],
+            type: 'pictorialBar',
+            barMaxWidth: '20',
+            symbol: 'diamond',
+            symbolOffset: [0, '50%'],
+            symbolSize: [20, 15],
+          },
+          {
+            data: props.echartData.seriesData,
+            type: 'pictorialBar',
+            barMaxWidth: '20',
+            symbolPosition: 'end',
+            symbol: 'diamond',
+            symbolOffset: [0, '-50%'],
+            symbolSize: [20, 12],
+            zlevel: 2,
+          },
+          {
+            data: props.echartData.seriesDataMax,
+            type: 'bar',
+            barMaxWidth: 'auto',
+            barWidth: 20,
+            barGap: '-100%',
+            zlevel: -1,
+          },
+          {
+            data: [1, 1, 1, 1, 1, 1, 1, 1],
+            type: 'pictorialBar',
+            barMaxWidth: '20',
+            symbol: 'diamond',
+            symbolOffset: [0, '50%'],
+            symbolSize: [20, 15],
+            zlevel: -2,
+          },
+          {
+            data: props.echartData.seriesDataMax,
+            type: 'pictorialBar',
+            barMaxWidth: '20',
+            symbolPosition: 'end',
+            symbol: 'diamond',
+            symbolOffset: [0, '-50%'],
+            symbolSize: [20, 12],
+            zlevel: -1,
+          },
+        ],
+        tooltip: {
+          trigger: 'axis',
+          show: false,
+        },
+      };
+      option && chartDom.setOption(option, true);
+      allData.chart = chartDom;
+    };
+    watch(
+      () => props.refresh,
+      () => {
+        if (allData.chart) {
+          allData.chart.dispose();
+          allData.chart = null;
+        }
+        setTimeout(() => {
+          init();
+        }, 0);
+      }
+    );
+
+    onMounted(() => {
+      init();
+      window.addEventListener('resize', resizeTheChart);
+    });
+    return {
+      ...toRefs(allData),
+      resizeTheChart,
+      init,
+    };
+  },
+};
+</script>
diff --git a/src/views/sponeScreen/HaiMianScreen/index.vue b/src/views/sponeScreen/HaiMianScreen/index.vue
index b966b46..eec97fa 100644
--- a/src/views/sponeScreen/HaiMianScreen/index.vue
+++ b/src/views/sponeScreen/HaiMianScreen/index.vue
@@ -8,7 +8,7 @@
     <Legend :showLegend="showLegend" :class="['animate__animated', showPanel ? 'animate__fadeOutDown' : '']"></Legend>
 
     <!-- 控制面板按钮 -->
-    <div class="controlHM" :style="{ right: showPanel ? '30px' : '520px' }" v-if="menuIndex != 3">
+    <div :class="['controlHM', showPanel ? 'right30' : 'right520']" v-if="menuIndex != 3">
       <img src="@/assets/newImgs/HMScreen/iconLegend.png" alt="" title="图例控制" @click="controlLegend" />
       <img src="@/assets/newImgs/HMScreen/iconPane.png" alt="" title="展开收起" @click="controlPanel" />
     </div>
@@ -152,6 +152,12 @@
     left: 0px;
     z-index: 220;
   }
+  .right30 {
+    right: 30px;
+  }
+  .right520 {
+    right: 520px;
+  }
   .controlHM {
     position: absolute;
     bottom: 50px;
diff --git a/src/views/sponeScreen/waterFlood/floodWZ.vue b/src/views/sponeScreen/waterFlood/floodWZ.vue
index 890df39..ab7696a 100644
--- a/src/views/sponeScreen/waterFlood/floodWZ.vue
+++ b/src/views/sponeScreen/waterFlood/floodWZ.vue
@@ -2,18 +2,56 @@
   <!-- 防汛物资 -->
   <div class="floodWZPage">
     <div class="partTitleHM">防汛物资</div>
-    <div class="partContHM">防汛物资1</div>
+    <div class="partContHM">
+      <div class="scrollMapHM">
+        <div class="scrollTitle flex">
+          <p>物资储备地点</p>
+          <p>物资详情</p>
+          <p>负责人</p>
+        </div>
+        <Vue3SeamlessScroll :list="dataList" :singleHeight="54" :singleWaitTime="2000" :hover="true" class="scroll">
+          <div class="scrollCont flex" v-for="item in dataList" :key="item.id">
+            <p class="ellipsis" :title="item.address">{{ item.address }}</p>
+            <p class="ellipsis" :title="item.materialDetails">{{ item.materialDetails }}</p>
+            <p class="ellipsis">{{ item.header }}<br />{{ item.headerPhone }}</p>
+          </div>
+        </Vue3SeamlessScroll>
+      </div>
+    </div>
   </div>
 </template>
 
 <script setup>
+import { FloodPreventionMaterialList } from '@/api/longoPeration/MaterialManagement';
+import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
+
 const { proxy } = getCurrentInstance();
 
-onMounted(() => {});
+const dataList = ref([]);
+const loading = ref(true);
+
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true;
+  let res = await FloodPreventionMaterialList({});
+  if (res && res.code == 200) {
+    dataList.value = res.data || [];
+    console.log(dataList.value);
+  }
+  loading.value = false;
+};
+onMounted(() => {
+  getList();
+});
 </script>
 
 <style lang="scss" scoped>
 .floodWZPage {
   width: 100%;
+  .scrollMapHM {
+    p {
+      width: 30%;
+    }
+  }
 }
 </style>
diff --git a/src/views/sponeScreen/waterFlood/index.vue b/src/views/sponeScreen/waterFlood/index.vue
index 5994da6..a48905c 100644
--- a/src/views/sponeScreen/waterFlood/index.vue
+++ b/src/views/sponeScreen/waterFlood/index.vue
@@ -7,10 +7,10 @@
       <CaldarRain></CaldarRain>
 
       <!-- 降雨报告 -->
-      <ReportRain></ReportRain>
+      <ReportRain class="mt-10"></ReportRain>
 
       <!-- 防汛物资 -->
-      <FloodWZ></FloodWZ>
+      <FloodWZ class="mt-10"></FloodWZ>
     </div>
     <!-- 右侧 -->
     <div :class="['publicRightHM', 'animate__animated', showPanel ? 'animate__fadeOutRight' : 'animate__fadeInRight']">
@@ -18,7 +18,7 @@
       <MonitorBZ></MonitorBZ>
 
       <!-- 监测设备 -->
-      <MonitorEquip></MonitorEquip>
+      <MonitorEquip class="mt-10"></MonitorEquip>
     </div>
   </div>
 </template>
diff --git a/src/views/sponeScreen/waterFlood/pumpMonitor.vue b/src/views/sponeScreen/waterFlood/pumpMonitor.vue
index 812f3c4..8751fb0 100644
--- a/src/views/sponeScreen/waterFlood/pumpMonitor.vue
+++ b/src/views/sponeScreen/waterFlood/pumpMonitor.vue
@@ -1,19 +1,149 @@
 <template>
   <!-- 泵站运行监控 -->
   <div class="pumpJKPage">
-    <div class="partTitleHM">泵站运行监控</div>
-    <div class="partContHM">泵站运行监控</div>
+    <div class="partTitleHM">
+      泵站运行监控
+      <el-select
+        clearable
+        filterable
+        v-model="rainCode"
+        placeholder="请选择雨量站"
+        style="float: right; width: 130px; margin: 10px 60px 0px 0px"
+        size="small"
+      >
+        <el-option v-for="dict in rainType" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
+      </el-select>
+    </div>
+    <div class="partContHM">
+      <el-tabs v-model="activeName" class="pumptabs" @tab-click="handleClick">
+        <el-tab-pane :label="item.label" :name="item.value" v-for="item in tabList" :key="item.value"></el-tab-pane>
+      </el-tabs>
+      <div class="pumpCount flex">
+        <div class="part"><span class="yellow circle"></span>当日抽排量 <span style="color: #ffed52">10.8</span>m³</div>
+        <div class="part"><span class="blue circle"></span>累计抽排量 <span style="color: #3afff8">--</span>万m³</div>
+        <div class="part"><span class="green circle"></span>前池水位 <span style="color: #18e87a">--</span>m</div>
+      </div>
+      <div class="flex flex-justcontent-spacearound mt10">
+        <div class="pumpStatus">
+          <img src="@/assets/newImgs/HMScreen/pumpOff.png" alt="" />
+          <p>1#泵</p>
+        </div>
+        <div class="pumpStatus">
+          <img src="@/assets/newImgs/HMScreen/pumpOpen.png" alt="" />
+          <p>2#泵</p>
+        </div>
+        <div class="pumpStatus">
+          <img src="@/assets/newImgs/HMScreen/pumpOpen.png" alt="" />
+          <p>3#泵</p>
+        </div>
+        <div class="pumpStatus">
+          <img src="@/assets/newImgs/HMScreen/pumpOff.png" alt="" />
+          <p>4#泵</p>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script setup>
 const { proxy } = getCurrentInstance();
+const rainCode = ref('1');
+const rainType = ref([
+  { value: '1', label: '雨水泵站' },
+  { value: '2', label: '污水泵站' },
+  { value: '3', label: '合流泵站' },
+]);
+const activeName = ref('2');
+const tabList = ref([
+  { value: '1', label: '一号泵站' },
+  { value: '2', label: '二号泵站' },
+  { value: '3', label: '三号泵站' },
+  { value: '4', label: '四号泵站' },
+  { value: '5', label: '五号泵站' },
+  { value: '6', label: '六号泵站' },
+]);
+
+// tab泵站切换点击
+function handleClick(params) {
+  console.log(params);
+}
 
 onMounted(() => {});
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .pumpJKPage {
   width: 100%;
+  .partContHM {
+    .pumptabs {
+      .el-tabs__item {
+        font-family: Source Han Sans CN;
+        font-weight: 500;
+        font-size: 16px;
+        color: #b8ecff !important;
+      }
+      .el-tabs__item.is-active {
+        color: #3afff8 !important;
+        background: linear-gradient(0deg, #2ddaff 0%, rgba(45, 218, 255, 0) 100%);
+      }
+      .el-tabs__active-bar {
+        background: #3afff8 !important;
+      }
+      svg path {
+        fill: #3afff8 !important;
+        font-weight: bold;
+      }
+    }
+    .pumpCount {
+      width: 100%;
+      height: 15px;
+      background: url('@/assets/newImgs/HMScreen/pumpBg.png') no-repeat;
+      background-size: 100% 100%;
+      justify-content: space-around;
+      padding-bottom: 15px;
+      margin-top: 10px;
+
+      .part {
+        width: 33%;
+        font-size: 13px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        span {
+          margin: 0 5px;
+        }
+        .circle {
+          display: inline-block;
+          width: 5px;
+          height: 5px;
+          border-radius: 50%;
+          margin-right: 5px;
+        }
+        .yellow {
+          background: #ffed52;
+        }
+        .blue {
+          background: #3afff8;
+        }
+        .green {
+          background: #18e87a;
+        }
+      }
+    }
+    .pumpStatus {
+      justify-content: center;
+      img {
+        width: 66px;
+        height: 66px;
+      }
+      p {
+        text-align: center;
+        font-family: Source Han Sans CN;
+        font-weight: 400;
+        font-size: 16px;
+        color: #b8ecff;
+      }
+    }
+  }
 }
 </style>

diff --git a/src/api/longoPeration/MaterialManagement.js b/src/api/longoPeration/MaterialManagement.js
index 9b36e9c..c99206d 100644
--- a/src/api/longoPeration/MaterialManagement.js
+++ b/src/api/longoPeration/MaterialManagement.js
@@ -1,5 +1,5 @@
 import request from '@/utils/request';
-// 列表
+// 列表分页
 export function FloodPreventionMaterialpage(query) {
   return request({
     url: '/business/floodPreventionMaterial/page',
@@ -8,6 +8,15 @@
   });
 }
 
+// 列表
+export function FloodPreventionMaterialList(query) {
+  return request({
+    url: '/business/floodPreventionMaterial/list',
+    method: 'get',
+    params: query,
+  });
+}
+
 // 新增排水防涝--防汛物资
 export function FloodPreventionMaterialadd(data) {
   return request({
diff --git a/src/assets/newImgs/HMScreen/pumpBg.png b/src/assets/newImgs/HMScreen/pumpBg.png
new file mode 100644
index 0000000..89a1883
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/pumpBg.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/pumpOff.png b/src/assets/newImgs/HMScreen/pumpOff.png
new file mode 100644
index 0000000..ceb6c30
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/pumpOff.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/pumpOpen.png b/src/assets/newImgs/HMScreen/pumpOpen.png
new file mode 100644
index 0000000..721282b
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/pumpOpen.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/rainA.png b/src/assets/newImgs/HMScreen/rainA.png
new file mode 100644
index 0000000..7f9f19c
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/rainA.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/rainD.png b/src/assets/newImgs/HMScreen/rainD.png
new file mode 100644
index 0000000..6f9e7d8
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/rainD.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/rainP.png b/src/assets/newImgs/HMScreen/rainP.png
new file mode 100644
index 0000000..109353f
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/rainP.png
Binary files differ
diff --git a/src/assets/styles/publicXG.scss b/src/assets/styles/publicXG.scss
index ed0eeb5..2a1fafb 100644
--- a/src/assets/styles/publicXG.scss
+++ b/src/assets/styles/publicXG.scss
@@ -11,6 +11,12 @@
 .text-center {
   text-align: center;
 }
+.mt-10 {
+  margin-top: 10px !important;
+}
+.mt-5 {
+  margin-top: 5px !important;
+}
 
 .multiselect {
   line-height: 16px;
@@ -505,3 +511,42 @@
   width: 5px; /* 定义滚动条的宽度 */
   // height: 5px;
 }
+// 一张图自动滚动播放
+.scrollMapHM {
+  .scroll {
+    width: 100%;
+    height: 200px;
+    overflow: hidden;
+    display: inline-block;
+  }
+  .scrollTitle {
+    background: #005cba;
+    padding: 8px 3px;
+    justify-content: space-around;
+    align-items: center;
+    p {
+      color: #fff;
+      font-family: Source Han Sans CN;
+      font-weight: 400;
+      font-size: 14px;
+      text-align: center;
+    }
+  }
+  .scrollCont {
+    justify-content: space-around;
+    align-items: center;
+    background: #01355f;
+    height: 50px;
+    cursor: pointer;
+    &:nth-child(odd) {
+      background: #1b82b7;
+    }
+    p {
+      text-align: center;
+      color: #b8ecff;
+      font-weight: 400;
+      font-size: 14px;
+      padding: 5px 0px;
+    }
+  }
+}
diff --git a/src/main.js b/src/main.js
index 8e35824..2a0be40 100644
--- a/src/main.js
+++ b/src/main.js
@@ -5,7 +5,6 @@
 import locale from 'element-plus/lib/locale/lang/zh-cn'; // 中文语言
 import 'dayjs/locale/zh-cn'; //实现Element plus设置日历每周第一天从周一开始
 import '@/assets/styles/index.scss'; // global css
-import vue3SeamlessScroll from 'vue3-seamless-scroll';
 import 'animate.css'; //引入animate
 
 import App from './App';
@@ -96,7 +95,6 @@
 app.use(store);
 app.use(plugins);
 app.use(elementIcons);
-app.use(vue3SeamlessScroll);
 
 app.component('svg-icon', SvgIcon); //全局注册
 
diff --git a/src/views/sponeScreen/Echarts/echartBar3D.vue b/src/views/sponeScreen/Echarts/echartBar3D.vue
new file mode 100644
index 0000000..0df0053
--- /dev/null
+++ b/src/views/sponeScreen/Echarts/echartBar3D.vue
@@ -0,0 +1,227 @@
+<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, normalizeStyle } from 'vue';
+export default {
+  name: 'line-chart',
+  props: {
+    echartData: 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));
+      let option = {
+        color: [
+          '#63caff',
+          '#49beff',
+          '#03387a',
+          '#03387a',
+          '#03387a',
+          '#6c93ee',
+          '#a9abff',
+          '#f7a23f',
+          '#27bae7',
+          '#ff6d9d',
+          '#cb79ff',
+          '#f95b5a',
+          '#ccaf27',
+          '#38b99c',
+          '#93d0ff',
+          '#bd74e0',
+          '#fd77da',
+          '#dea700',
+        ],
+        grid: {
+          containLabel: true,
+          left: 20,
+          right: 20,
+          bottom: 10,
+          top: 40,
+        },
+        xAxis: {
+          axisLabel: {
+            color: '#c0c3cd',
+            fontSize: 14,
+            interval: 0,
+          },
+          axisTick: {
+            lineStyle: {
+              color: '#384267',
+            },
+            show: true,
+          },
+          splitLine: {
+            show: false,
+          },
+          axisLine: {
+            lineStyle: {
+              color: '#384267',
+              width: 1,
+              type: 'dashed',
+            },
+            show: true,
+          },
+          data: props.echartData.xAxis,
+          type: 'category',
+        },
+        yAxis: {
+          axisLabel: {
+            color: '#fff',
+            fontSize: 13,
+          },
+          axisTick: {
+            lineStyle: {
+              color: '#005CBA',
+              width: 1,
+            },
+            show: true,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: '#005CBA',
+              type: 'dashed',
+            },
+          },
+          axisLine: {
+            lineStyle: {
+              color: '#005CBA',
+              width: 1,
+              type: 'dashed',
+            },
+            show: true,
+          },
+          name: props.echartData.yName,
+          nameTextStyle: {
+            color: '#fff',
+          },
+        },
+        series: [
+          {
+            data: props.echartData.seriesData,
+            type: 'bar',
+            barMaxWidth: 'auto',
+            barWidth: 20,
+            itemStyle: {
+              color: {
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                type: 'linear',
+                global: false,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: '#0b9eff',
+                  },
+                  {
+                    offset: 1,
+                    color: '#63caff',
+                  },
+                ],
+              },
+            },
+            label: {
+              show: true,
+              position: 'top',
+              distance: 10,
+              color: '#fff',
+            },
+          },
+          {
+            data: [1, 1, 1, 1, 1, 1, 1, 1],
+            type: 'pictorialBar',
+            barMaxWidth: '20',
+            symbol: 'diamond',
+            symbolOffset: [0, '50%'],
+            symbolSize: [20, 15],
+          },
+          {
+            data: props.echartData.seriesData,
+            type: 'pictorialBar',
+            barMaxWidth: '20',
+            symbolPosition: 'end',
+            symbol: 'diamond',
+            symbolOffset: [0, '-50%'],
+            symbolSize: [20, 12],
+            zlevel: 2,
+          },
+          {
+            data: props.echartData.seriesDataMax,
+            type: 'bar',
+            barMaxWidth: 'auto',
+            barWidth: 20,
+            barGap: '-100%',
+            zlevel: -1,
+          },
+          {
+            data: [1, 1, 1, 1, 1, 1, 1, 1],
+            type: 'pictorialBar',
+            barMaxWidth: '20',
+            symbol: 'diamond',
+            symbolOffset: [0, '50%'],
+            symbolSize: [20, 15],
+            zlevel: -2,
+          },
+          {
+            data: props.echartData.seriesDataMax,
+            type: 'pictorialBar',
+            barMaxWidth: '20',
+            symbolPosition: 'end',
+            symbol: 'diamond',
+            symbolOffset: [0, '-50%'],
+            symbolSize: [20, 12],
+            zlevel: -1,
+          },
+        ],
+        tooltip: {
+          trigger: 'axis',
+          show: false,
+        },
+      };
+      option && chartDom.setOption(option, true);
+      allData.chart = chartDom;
+    };
+    watch(
+      () => props.refresh,
+      () => {
+        if (allData.chart) {
+          allData.chart.dispose();
+          allData.chart = null;
+        }
+        setTimeout(() => {
+          init();
+        }, 0);
+      }
+    );
+
+    onMounted(() => {
+      init();
+      window.addEventListener('resize', resizeTheChart);
+    });
+    return {
+      ...toRefs(allData),
+      resizeTheChart,
+      init,
+    };
+  },
+};
+</script>
diff --git a/src/views/sponeScreen/HaiMianScreen/index.vue b/src/views/sponeScreen/HaiMianScreen/index.vue
index b966b46..eec97fa 100644
--- a/src/views/sponeScreen/HaiMianScreen/index.vue
+++ b/src/views/sponeScreen/HaiMianScreen/index.vue
@@ -8,7 +8,7 @@
     <Legend :showLegend="showLegend" :class="['animate__animated', showPanel ? 'animate__fadeOutDown' : '']"></Legend>
 
     <!-- 控制面板按钮 -->
-    <div class="controlHM" :style="{ right: showPanel ? '30px' : '520px' }" v-if="menuIndex != 3">
+    <div :class="['controlHM', showPanel ? 'right30' : 'right520']" v-if="menuIndex != 3">
       <img src="@/assets/newImgs/HMScreen/iconLegend.png" alt="" title="图例控制" @click="controlLegend" />
       <img src="@/assets/newImgs/HMScreen/iconPane.png" alt="" title="展开收起" @click="controlPanel" />
     </div>
@@ -152,6 +152,12 @@
     left: 0px;
     z-index: 220;
   }
+  .right30 {
+    right: 30px;
+  }
+  .right520 {
+    right: 520px;
+  }
   .controlHM {
     position: absolute;
     bottom: 50px;
diff --git a/src/views/sponeScreen/waterFlood/floodWZ.vue b/src/views/sponeScreen/waterFlood/floodWZ.vue
index 890df39..ab7696a 100644
--- a/src/views/sponeScreen/waterFlood/floodWZ.vue
+++ b/src/views/sponeScreen/waterFlood/floodWZ.vue
@@ -2,18 +2,56 @@
   <!-- 防汛物资 -->
   <div class="floodWZPage">
     <div class="partTitleHM">防汛物资</div>
-    <div class="partContHM">防汛物资1</div>
+    <div class="partContHM">
+      <div class="scrollMapHM">
+        <div class="scrollTitle flex">
+          <p>物资储备地点</p>
+          <p>物资详情</p>
+          <p>负责人</p>
+        </div>
+        <Vue3SeamlessScroll :list="dataList" :singleHeight="54" :singleWaitTime="2000" :hover="true" class="scroll">
+          <div class="scrollCont flex" v-for="item in dataList" :key="item.id">
+            <p class="ellipsis" :title="item.address">{{ item.address }}</p>
+            <p class="ellipsis" :title="item.materialDetails">{{ item.materialDetails }}</p>
+            <p class="ellipsis">{{ item.header }}<br />{{ item.headerPhone }}</p>
+          </div>
+        </Vue3SeamlessScroll>
+      </div>
+    </div>
   </div>
 </template>
 
 <script setup>
+import { FloodPreventionMaterialList } from '@/api/longoPeration/MaterialManagement';
+import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
+
 const { proxy } = getCurrentInstance();
 
-onMounted(() => {});
+const dataList = ref([]);
+const loading = ref(true);
+
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true;
+  let res = await FloodPreventionMaterialList({});
+  if (res && res.code == 200) {
+    dataList.value = res.data || [];
+    console.log(dataList.value);
+  }
+  loading.value = false;
+};
+onMounted(() => {
+  getList();
+});
 </script>
 
 <style lang="scss" scoped>
 .floodWZPage {
   width: 100%;
+  .scrollMapHM {
+    p {
+      width: 30%;
+    }
+  }
 }
 </style>
diff --git a/src/views/sponeScreen/waterFlood/index.vue b/src/views/sponeScreen/waterFlood/index.vue
index 5994da6..a48905c 100644
--- a/src/views/sponeScreen/waterFlood/index.vue
+++ b/src/views/sponeScreen/waterFlood/index.vue
@@ -7,10 +7,10 @@
       <CaldarRain></CaldarRain>
 
       <!-- 降雨报告 -->
-      <ReportRain></ReportRain>
+      <ReportRain class="mt-10"></ReportRain>
 
       <!-- 防汛物资 -->
-      <FloodWZ></FloodWZ>
+      <FloodWZ class="mt-10"></FloodWZ>
     </div>
     <!-- 右侧 -->
     <div :class="['publicRightHM', 'animate__animated', showPanel ? 'animate__fadeOutRight' : 'animate__fadeInRight']">
@@ -18,7 +18,7 @@
       <MonitorBZ></MonitorBZ>
 
       <!-- 监测设备 -->
-      <MonitorEquip></MonitorEquip>
+      <MonitorEquip class="mt-10"></MonitorEquip>
     </div>
   </div>
 </template>
diff --git a/src/views/sponeScreen/waterFlood/pumpMonitor.vue b/src/views/sponeScreen/waterFlood/pumpMonitor.vue
index 812f3c4..8751fb0 100644
--- a/src/views/sponeScreen/waterFlood/pumpMonitor.vue
+++ b/src/views/sponeScreen/waterFlood/pumpMonitor.vue
@@ -1,19 +1,149 @@
 <template>
   <!-- 泵站运行监控 -->
   <div class="pumpJKPage">
-    <div class="partTitleHM">泵站运行监控</div>
-    <div class="partContHM">泵站运行监控</div>
+    <div class="partTitleHM">
+      泵站运行监控
+      <el-select
+        clearable
+        filterable
+        v-model="rainCode"
+        placeholder="请选择雨量站"
+        style="float: right; width: 130px; margin: 10px 60px 0px 0px"
+        size="small"
+      >
+        <el-option v-for="dict in rainType" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
+      </el-select>
+    </div>
+    <div class="partContHM">
+      <el-tabs v-model="activeName" class="pumptabs" @tab-click="handleClick">
+        <el-tab-pane :label="item.label" :name="item.value" v-for="item in tabList" :key="item.value"></el-tab-pane>
+      </el-tabs>
+      <div class="pumpCount flex">
+        <div class="part"><span class="yellow circle"></span>当日抽排量 <span style="color: #ffed52">10.8</span>m³</div>
+        <div class="part"><span class="blue circle"></span>累计抽排量 <span style="color: #3afff8">--</span>万m³</div>
+        <div class="part"><span class="green circle"></span>前池水位 <span style="color: #18e87a">--</span>m</div>
+      </div>
+      <div class="flex flex-justcontent-spacearound mt10">
+        <div class="pumpStatus">
+          <img src="@/assets/newImgs/HMScreen/pumpOff.png" alt="" />
+          <p>1#泵</p>
+        </div>
+        <div class="pumpStatus">
+          <img src="@/assets/newImgs/HMScreen/pumpOpen.png" alt="" />
+          <p>2#泵</p>
+        </div>
+        <div class="pumpStatus">
+          <img src="@/assets/newImgs/HMScreen/pumpOpen.png" alt="" />
+          <p>3#泵</p>
+        </div>
+        <div class="pumpStatus">
+          <img src="@/assets/newImgs/HMScreen/pumpOff.png" alt="" />
+          <p>4#泵</p>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script setup>
 const { proxy } = getCurrentInstance();
+const rainCode = ref('1');
+const rainType = ref([
+  { value: '1', label: '雨水泵站' },
+  { value: '2', label: '污水泵站' },
+  { value: '3', label: '合流泵站' },
+]);
+const activeName = ref('2');
+const tabList = ref([
+  { value: '1', label: '一号泵站' },
+  { value: '2', label: '二号泵站' },
+  { value: '3', label: '三号泵站' },
+  { value: '4', label: '四号泵站' },
+  { value: '5', label: '五号泵站' },
+  { value: '6', label: '六号泵站' },
+]);
+
+// tab泵站切换点击
+function handleClick(params) {
+  console.log(params);
+}
 
 onMounted(() => {});
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .pumpJKPage {
   width: 100%;
+  .partContHM {
+    .pumptabs {
+      .el-tabs__item {
+        font-family: Source Han Sans CN;
+        font-weight: 500;
+        font-size: 16px;
+        color: #b8ecff !important;
+      }
+      .el-tabs__item.is-active {
+        color: #3afff8 !important;
+        background: linear-gradient(0deg, #2ddaff 0%, rgba(45, 218, 255, 0) 100%);
+      }
+      .el-tabs__active-bar {
+        background: #3afff8 !important;
+      }
+      svg path {
+        fill: #3afff8 !important;
+        font-weight: bold;
+      }
+    }
+    .pumpCount {
+      width: 100%;
+      height: 15px;
+      background: url('@/assets/newImgs/HMScreen/pumpBg.png') no-repeat;
+      background-size: 100% 100%;
+      justify-content: space-around;
+      padding-bottom: 15px;
+      margin-top: 10px;
+
+      .part {
+        width: 33%;
+        font-size: 13px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        span {
+          margin: 0 5px;
+        }
+        .circle {
+          display: inline-block;
+          width: 5px;
+          height: 5px;
+          border-radius: 50%;
+          margin-right: 5px;
+        }
+        .yellow {
+          background: #ffed52;
+        }
+        .blue {
+          background: #3afff8;
+        }
+        .green {
+          background: #18e87a;
+        }
+      }
+    }
+    .pumpStatus {
+      justify-content: center;
+      img {
+        width: 66px;
+        height: 66px;
+      }
+      p {
+        text-align: center;
+        font-family: Source Han Sans CN;
+        font-weight: 400;
+        font-size: 16px;
+        color: #b8ecff;
+      }
+    }
+  }
 }
 </style>
diff --git a/src/views/sponeScreen/waterFlood/rainCaldar.vue b/src/views/sponeScreen/waterFlood/rainCaldar.vue
index 0900ade..bb38b27 100644
--- a/src/views/sponeScreen/waterFlood/rainCaldar.vue
+++ b/src/views/sponeScreen/waterFlood/rainCaldar.vue
@@ -1,19 +1,154 @@
 <template>
   <!-- 降雨日历 -->
   <div class="rainCaldarPage">
-    <div class="partTitleHM">降雨日历</div>
-    <div class="partContHM">降雨日历</div>
+    <div class="partTitleHM">
+      降雨日历
+      <el-date-picker
+        type="date"
+        v-model="dateDay"
+        value-format="YYYY-MM-DD"
+        placeholder="请选择日期"
+        style="float: right; width: 130px; margin: 10px 60px 0px 0px"
+        size="small"
+        v-if="dateIndex == 'day'"
+      />
+      <el-date-picker
+        type="month"
+        v-model="dateMonth"
+        value-format="YYYY-MM"
+        placeholder="请选择日期"
+        style="float: right; width: 130px; margin: 10px 60px 0px 0px"
+        size="small"
+        v-if="dateIndex == 'month'"
+      />
+      <el-date-picker
+        type="year"
+        v-model="dateYear"
+        value-format="YYYY"
+        placeholder="请选择日期"
+        style="float: right; width: 130px; margin: 10px 60px 0px 0px"
+        size="small"
+        v-if="dateIndex == 'year'"
+      />
+    </div>
+    <div class="partContHM">
+      <div class="flex flex-justcontent-spacebetween">
+        <p :class="['partD', dateIndex == 'day' ? 'active' : '']" @click="changeDate('day')">日</p>
+        <p :class="['partD', dateIndex == 'month' ? 'active' : '']" @click="changeDate('month')">月</p>
+        <p :class="['partD', dateIndex == 'year' ? 'active' : '']" @click="changeDate('year')">年</p>
+        <el-select clearable filterable v-model="rainCode" placeholder="请选择雨量站" style="width: 150px">
+          <el-option v-for="dict in rainList" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
+        </el-select>
+      </div>
+      <!-- 日 -->
+      <div class="partDay flex flex-justcontent-spacebetween" v-if="dateIndex == 'day'">
+        <div class="part">
+          <p>日期</p>
+          <p>06-12<br />2024</p>
+        </div>
+        <div class="part">
+          <p>累计降雨量</p>
+          <p>1.2<br />mm/24h</p>
+        </div>
+        <div class="part">
+          <p>雨强</p>
+          <p style="padding-top: 15px">小雨</p>
+        </div>
+      </div>
+      <!-- 月 -->
+      <div class="partDay" v-if="dateIndex == 'month'">
+        <ChartBar3D :refresh="refresh" :echartData="echartData"></ChartBar3D>
+      </div>
+
+      <!-- 年 -->
+      <div class="partDay" v-if="dateIndex == 'year'">
+        <ChartBar3D :refresh="refresh2" :echartData="echartData2"></ChartBar3D>
+      </div>
+    </div>
   </div>
 </template>
 
 <script setup>
+import ChartBar3D from '@/views/sponeScreen/Echarts/echartBar3D.vue';
 const { proxy } = getCurrentInstance();
 
+const dateDay = ref(proxy.moment(new Date()).format('YYYY-MM-DD'));
+const dateMonth = ref(proxy.moment(new Date()).format('YYYY-MM'));
+const dateYear = ref(proxy.moment(new Date()).format('YYYY-MM'));
+const rainCode = ref('1');
+const rainList = ref([
+  { value: '1', label: '汴京路雨量站' },
+  { value: '2', label: '黄河路雨量站' },
+]);
+const dateIndex = ref('day');
+const refresh = ref(1);
+const echartData = ref({
+  xAxis: ['06-01', '06-05', '06-10', '06-15', '06-20', '06-25', '06-30'],
+  yName: '降雨量mm',
+  seriesData: [23.2, 10, 0, 12, 5, 19, 56],
+  seriesDataMax: [100, 100, 100, 100, 100, 100, 100],
+});
+
+const refresh2 = ref(1);
+const echartData2 = ref({
+  xAxis: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'],
+  yName: '降雨量mm',
+  seriesData: [123.2, 100, 60, 102, 85, 19, 123.2, 100, 60, 42, 59, 99],
+  seriesDataMax: [300, 300, 300, 300, 300, 300, 300, 300, 300, 300, 300, 300],
+});
+
+// 点击切换
+function changeDate(val) {
+  dateIndex.value = val;
+}
+
 onMounted(() => {});
 </script>
 
 <style lang="scss" scoped>
 .rainCaldarPage {
   width: 100%;
+  .partContHM {
+    .partD {
+      width: 82px;
+      height: 30px;
+      line-height: 30px;
+      text-align: center;
+      background: url('@/assets/newImgs/HMScreen/rainD.png') no-repeat;
+      background-size: 100% 100%;
+      cursor: pointer;
+    }
+    .active {
+      background: url('@/assets/newImgs/HMScreen/rainA.png') no-repeat;
+      background-size: 100% 100%;
+      color: #fff;
+    }
+    .partDay {
+      margin-top: 10px;
+      height: 163px;
+      .part {
+        width: 132px;
+        height: 163px;
+        background: url('@/assets/newImgs/HMScreen/rainP.png') no-repeat;
+        background-size: 100% 100%;
+        p {
+          text-align: center;
+          &:nth-of-type(1) {
+            font-family: Source Han Sans CN;
+            font-weight: 500;
+            font-size: 16px;
+            color: #ffffff;
+            margin: 12px 0px 30px 0px;
+          }
+          &:nth-of-type(2) {
+            color: #3afff8;
+            font-family: Source Han Sans CN;
+            font-weight: 500;
+            font-size: 22px;
+          }
+        }
+      }
+    }
+  }
 }
 </style>

diff --git a/src/api/longoPeration/MaterialManagement.js b/src/api/longoPeration/MaterialManagement.js
index 9b36e9c..c99206d 100644
--- a/src/api/longoPeration/MaterialManagement.js
+++ b/src/api/longoPeration/MaterialManagement.js
@@ -1,5 +1,5 @@
 import request from '@/utils/request';
-// 列表
+// 列表分页
 export function FloodPreventionMaterialpage(query) {
   return request({
     url: '/business/floodPreventionMaterial/page',
@@ -8,6 +8,15 @@
   });
 }
 
+// 列表
+export function FloodPreventionMaterialList(query) {
+  return request({
+    url: '/business/floodPreventionMaterial/list',
+    method: 'get',
+    params: query,
+  });
+}
+
 // 新增排水防涝--防汛物资
 export function FloodPreventionMaterialadd(data) {
   return request({
diff --git a/src/assets/newImgs/HMScreen/pumpBg.png b/src/assets/newImgs/HMScreen/pumpBg.png
new file mode 100644
index 0000000..89a1883
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/pumpBg.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/pumpOff.png b/src/assets/newImgs/HMScreen/pumpOff.png
new file mode 100644
index 0000000..ceb6c30
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/pumpOff.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/pumpOpen.png b/src/assets/newImgs/HMScreen/pumpOpen.png
new file mode 100644
index 0000000..721282b
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/pumpOpen.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/rainA.png b/src/assets/newImgs/HMScreen/rainA.png
new file mode 100644
index 0000000..7f9f19c
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/rainA.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/rainD.png b/src/assets/newImgs/HMScreen/rainD.png
new file mode 100644
index 0000000..6f9e7d8
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/rainD.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/rainP.png b/src/assets/newImgs/HMScreen/rainP.png
new file mode 100644
index 0000000..109353f
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/rainP.png
Binary files differ
diff --git a/src/assets/styles/publicXG.scss b/src/assets/styles/publicXG.scss
index ed0eeb5..2a1fafb 100644
--- a/src/assets/styles/publicXG.scss
+++ b/src/assets/styles/publicXG.scss
@@ -11,6 +11,12 @@
 .text-center {
   text-align: center;
 }
+.mt-10 {
+  margin-top: 10px !important;
+}
+.mt-5 {
+  margin-top: 5px !important;
+}
 
 .multiselect {
   line-height: 16px;
@@ -505,3 +511,42 @@
   width: 5px; /* 定义滚动条的宽度 */
   // height: 5px;
 }
+// 一张图自动滚动播放
+.scrollMapHM {
+  .scroll {
+    width: 100%;
+    height: 200px;
+    overflow: hidden;
+    display: inline-block;
+  }
+  .scrollTitle {
+    background: #005cba;
+    padding: 8px 3px;
+    justify-content: space-around;
+    align-items: center;
+    p {
+      color: #fff;
+      font-family: Source Han Sans CN;
+      font-weight: 400;
+      font-size: 14px;
+      text-align: center;
+    }
+  }
+  .scrollCont {
+    justify-content: space-around;
+    align-items: center;
+    background: #01355f;
+    height: 50px;
+    cursor: pointer;
+    &:nth-child(odd) {
+      background: #1b82b7;
+    }
+    p {
+      text-align: center;
+      color: #b8ecff;
+      font-weight: 400;
+      font-size: 14px;
+      padding: 5px 0px;
+    }
+  }
+}
diff --git a/src/main.js b/src/main.js
index 8e35824..2a0be40 100644
--- a/src/main.js
+++ b/src/main.js
@@ -5,7 +5,6 @@
 import locale from 'element-plus/lib/locale/lang/zh-cn'; // 中文语言
 import 'dayjs/locale/zh-cn'; //实现Element plus设置日历每周第一天从周一开始
 import '@/assets/styles/index.scss'; // global css
-import vue3SeamlessScroll from 'vue3-seamless-scroll';
 import 'animate.css'; //引入animate
 
 import App from './App';
@@ -96,7 +95,6 @@
 app.use(store);
 app.use(plugins);
 app.use(elementIcons);
-app.use(vue3SeamlessScroll);
 
 app.component('svg-icon', SvgIcon); //全局注册
 
diff --git a/src/views/sponeScreen/Echarts/echartBar3D.vue b/src/views/sponeScreen/Echarts/echartBar3D.vue
new file mode 100644
index 0000000..0df0053
--- /dev/null
+++ b/src/views/sponeScreen/Echarts/echartBar3D.vue
@@ -0,0 +1,227 @@
+<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, normalizeStyle } from 'vue';
+export default {
+  name: 'line-chart',
+  props: {
+    echartData: 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));
+      let option = {
+        color: [
+          '#63caff',
+          '#49beff',
+          '#03387a',
+          '#03387a',
+          '#03387a',
+          '#6c93ee',
+          '#a9abff',
+          '#f7a23f',
+          '#27bae7',
+          '#ff6d9d',
+          '#cb79ff',
+          '#f95b5a',
+          '#ccaf27',
+          '#38b99c',
+          '#93d0ff',
+          '#bd74e0',
+          '#fd77da',
+          '#dea700',
+        ],
+        grid: {
+          containLabel: true,
+          left: 20,
+          right: 20,
+          bottom: 10,
+          top: 40,
+        },
+        xAxis: {
+          axisLabel: {
+            color: '#c0c3cd',
+            fontSize: 14,
+            interval: 0,
+          },
+          axisTick: {
+            lineStyle: {
+              color: '#384267',
+            },
+            show: true,
+          },
+          splitLine: {
+            show: false,
+          },
+          axisLine: {
+            lineStyle: {
+              color: '#384267',
+              width: 1,
+              type: 'dashed',
+            },
+            show: true,
+          },
+          data: props.echartData.xAxis,
+          type: 'category',
+        },
+        yAxis: {
+          axisLabel: {
+            color: '#fff',
+            fontSize: 13,
+          },
+          axisTick: {
+            lineStyle: {
+              color: '#005CBA',
+              width: 1,
+            },
+            show: true,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: '#005CBA',
+              type: 'dashed',
+            },
+          },
+          axisLine: {
+            lineStyle: {
+              color: '#005CBA',
+              width: 1,
+              type: 'dashed',
+            },
+            show: true,
+          },
+          name: props.echartData.yName,
+          nameTextStyle: {
+            color: '#fff',
+          },
+        },
+        series: [
+          {
+            data: props.echartData.seriesData,
+            type: 'bar',
+            barMaxWidth: 'auto',
+            barWidth: 20,
+            itemStyle: {
+              color: {
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                type: 'linear',
+                global: false,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: '#0b9eff',
+                  },
+                  {
+                    offset: 1,
+                    color: '#63caff',
+                  },
+                ],
+              },
+            },
+            label: {
+              show: true,
+              position: 'top',
+              distance: 10,
+              color: '#fff',
+            },
+          },
+          {
+            data: [1, 1, 1, 1, 1, 1, 1, 1],
+            type: 'pictorialBar',
+            barMaxWidth: '20',
+            symbol: 'diamond',
+            symbolOffset: [0, '50%'],
+            symbolSize: [20, 15],
+          },
+          {
+            data: props.echartData.seriesData,
+            type: 'pictorialBar',
+            barMaxWidth: '20',
+            symbolPosition: 'end',
+            symbol: 'diamond',
+            symbolOffset: [0, '-50%'],
+            symbolSize: [20, 12],
+            zlevel: 2,
+          },
+          {
+            data: props.echartData.seriesDataMax,
+            type: 'bar',
+            barMaxWidth: 'auto',
+            barWidth: 20,
+            barGap: '-100%',
+            zlevel: -1,
+          },
+          {
+            data: [1, 1, 1, 1, 1, 1, 1, 1],
+            type: 'pictorialBar',
+            barMaxWidth: '20',
+            symbol: 'diamond',
+            symbolOffset: [0, '50%'],
+            symbolSize: [20, 15],
+            zlevel: -2,
+          },
+          {
+            data: props.echartData.seriesDataMax,
+            type: 'pictorialBar',
+            barMaxWidth: '20',
+            symbolPosition: 'end',
+            symbol: 'diamond',
+            symbolOffset: [0, '-50%'],
+            symbolSize: [20, 12],
+            zlevel: -1,
+          },
+        ],
+        tooltip: {
+          trigger: 'axis',
+          show: false,
+        },
+      };
+      option && chartDom.setOption(option, true);
+      allData.chart = chartDom;
+    };
+    watch(
+      () => props.refresh,
+      () => {
+        if (allData.chart) {
+          allData.chart.dispose();
+          allData.chart = null;
+        }
+        setTimeout(() => {
+          init();
+        }, 0);
+      }
+    );
+
+    onMounted(() => {
+      init();
+      window.addEventListener('resize', resizeTheChart);
+    });
+    return {
+      ...toRefs(allData),
+      resizeTheChart,
+      init,
+    };
+  },
+};
+</script>
diff --git a/src/views/sponeScreen/HaiMianScreen/index.vue b/src/views/sponeScreen/HaiMianScreen/index.vue
index b966b46..eec97fa 100644
--- a/src/views/sponeScreen/HaiMianScreen/index.vue
+++ b/src/views/sponeScreen/HaiMianScreen/index.vue
@@ -8,7 +8,7 @@
     <Legend :showLegend="showLegend" :class="['animate__animated', showPanel ? 'animate__fadeOutDown' : '']"></Legend>
 
     <!-- 控制面板按钮 -->
-    <div class="controlHM" :style="{ right: showPanel ? '30px' : '520px' }" v-if="menuIndex != 3">
+    <div :class="['controlHM', showPanel ? 'right30' : 'right520']" v-if="menuIndex != 3">
       <img src="@/assets/newImgs/HMScreen/iconLegend.png" alt="" title="图例控制" @click="controlLegend" />
       <img src="@/assets/newImgs/HMScreen/iconPane.png" alt="" title="展开收起" @click="controlPanel" />
     </div>
@@ -152,6 +152,12 @@
     left: 0px;
     z-index: 220;
   }
+  .right30 {
+    right: 30px;
+  }
+  .right520 {
+    right: 520px;
+  }
   .controlHM {
     position: absolute;
     bottom: 50px;
diff --git a/src/views/sponeScreen/waterFlood/floodWZ.vue b/src/views/sponeScreen/waterFlood/floodWZ.vue
index 890df39..ab7696a 100644
--- a/src/views/sponeScreen/waterFlood/floodWZ.vue
+++ b/src/views/sponeScreen/waterFlood/floodWZ.vue
@@ -2,18 +2,56 @@
   <!-- 防汛物资 -->
   <div class="floodWZPage">
     <div class="partTitleHM">防汛物资</div>
-    <div class="partContHM">防汛物资1</div>
+    <div class="partContHM">
+      <div class="scrollMapHM">
+        <div class="scrollTitle flex">
+          <p>物资储备地点</p>
+          <p>物资详情</p>
+          <p>负责人</p>
+        </div>
+        <Vue3SeamlessScroll :list="dataList" :singleHeight="54" :singleWaitTime="2000" :hover="true" class="scroll">
+          <div class="scrollCont flex" v-for="item in dataList" :key="item.id">
+            <p class="ellipsis" :title="item.address">{{ item.address }}</p>
+            <p class="ellipsis" :title="item.materialDetails">{{ item.materialDetails }}</p>
+            <p class="ellipsis">{{ item.header }}<br />{{ item.headerPhone }}</p>
+          </div>
+        </Vue3SeamlessScroll>
+      </div>
+    </div>
   </div>
 </template>
 
 <script setup>
+import { FloodPreventionMaterialList } from '@/api/longoPeration/MaterialManagement';
+import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
+
 const { proxy } = getCurrentInstance();
 
-onMounted(() => {});
+const dataList = ref([]);
+const loading = ref(true);
+
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true;
+  let res = await FloodPreventionMaterialList({});
+  if (res && res.code == 200) {
+    dataList.value = res.data || [];
+    console.log(dataList.value);
+  }
+  loading.value = false;
+};
+onMounted(() => {
+  getList();
+});
 </script>
 
 <style lang="scss" scoped>
 .floodWZPage {
   width: 100%;
+  .scrollMapHM {
+    p {
+      width: 30%;
+    }
+  }
 }
 </style>
diff --git a/src/views/sponeScreen/waterFlood/index.vue b/src/views/sponeScreen/waterFlood/index.vue
index 5994da6..a48905c 100644
--- a/src/views/sponeScreen/waterFlood/index.vue
+++ b/src/views/sponeScreen/waterFlood/index.vue
@@ -7,10 +7,10 @@
       <CaldarRain></CaldarRain>
 
       <!-- 降雨报告 -->
-      <ReportRain></ReportRain>
+      <ReportRain class="mt-10"></ReportRain>
 
       <!-- 防汛物资 -->
-      <FloodWZ></FloodWZ>
+      <FloodWZ class="mt-10"></FloodWZ>
     </div>
     <!-- 右侧 -->
     <div :class="['publicRightHM', 'animate__animated', showPanel ? 'animate__fadeOutRight' : 'animate__fadeInRight']">
@@ -18,7 +18,7 @@
       <MonitorBZ></MonitorBZ>
 
       <!-- 监测设备 -->
-      <MonitorEquip></MonitorEquip>
+      <MonitorEquip class="mt-10"></MonitorEquip>
     </div>
   </div>
 </template>
diff --git a/src/views/sponeScreen/waterFlood/pumpMonitor.vue b/src/views/sponeScreen/waterFlood/pumpMonitor.vue
index 812f3c4..8751fb0 100644
--- a/src/views/sponeScreen/waterFlood/pumpMonitor.vue
+++ b/src/views/sponeScreen/waterFlood/pumpMonitor.vue
@@ -1,19 +1,149 @@
 <template>
   <!-- 泵站运行监控 -->
   <div class="pumpJKPage">
-    <div class="partTitleHM">泵站运行监控</div>
-    <div class="partContHM">泵站运行监控</div>
+    <div class="partTitleHM">
+      泵站运行监控
+      <el-select
+        clearable
+        filterable
+        v-model="rainCode"
+        placeholder="请选择雨量站"
+        style="float: right; width: 130px; margin: 10px 60px 0px 0px"
+        size="small"
+      >
+        <el-option v-for="dict in rainType" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
+      </el-select>
+    </div>
+    <div class="partContHM">
+      <el-tabs v-model="activeName" class="pumptabs" @tab-click="handleClick">
+        <el-tab-pane :label="item.label" :name="item.value" v-for="item in tabList" :key="item.value"></el-tab-pane>
+      </el-tabs>
+      <div class="pumpCount flex">
+        <div class="part"><span class="yellow circle"></span>当日抽排量 <span style="color: #ffed52">10.8</span>m³</div>
+        <div class="part"><span class="blue circle"></span>累计抽排量 <span style="color: #3afff8">--</span>万m³</div>
+        <div class="part"><span class="green circle"></span>前池水位 <span style="color: #18e87a">--</span>m</div>
+      </div>
+      <div class="flex flex-justcontent-spacearound mt10">
+        <div class="pumpStatus">
+          <img src="@/assets/newImgs/HMScreen/pumpOff.png" alt="" />
+          <p>1#泵</p>
+        </div>
+        <div class="pumpStatus">
+          <img src="@/assets/newImgs/HMScreen/pumpOpen.png" alt="" />
+          <p>2#泵</p>
+        </div>
+        <div class="pumpStatus">
+          <img src="@/assets/newImgs/HMScreen/pumpOpen.png" alt="" />
+          <p>3#泵</p>
+        </div>
+        <div class="pumpStatus">
+          <img src="@/assets/newImgs/HMScreen/pumpOff.png" alt="" />
+          <p>4#泵</p>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script setup>
 const { proxy } = getCurrentInstance();
+const rainCode = ref('1');
+const rainType = ref([
+  { value: '1', label: '雨水泵站' },
+  { value: '2', label: '污水泵站' },
+  { value: '3', label: '合流泵站' },
+]);
+const activeName = ref('2');
+const tabList = ref([
+  { value: '1', label: '一号泵站' },
+  { value: '2', label: '二号泵站' },
+  { value: '3', label: '三号泵站' },
+  { value: '4', label: '四号泵站' },
+  { value: '5', label: '五号泵站' },
+  { value: '6', label: '六号泵站' },
+]);
+
+// tab泵站切换点击
+function handleClick(params) {
+  console.log(params);
+}
 
 onMounted(() => {});
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .pumpJKPage {
   width: 100%;
+  .partContHM {
+    .pumptabs {
+      .el-tabs__item {
+        font-family: Source Han Sans CN;
+        font-weight: 500;
+        font-size: 16px;
+        color: #b8ecff !important;
+      }
+      .el-tabs__item.is-active {
+        color: #3afff8 !important;
+        background: linear-gradient(0deg, #2ddaff 0%, rgba(45, 218, 255, 0) 100%);
+      }
+      .el-tabs__active-bar {
+        background: #3afff8 !important;
+      }
+      svg path {
+        fill: #3afff8 !important;
+        font-weight: bold;
+      }
+    }
+    .pumpCount {
+      width: 100%;
+      height: 15px;
+      background: url('@/assets/newImgs/HMScreen/pumpBg.png') no-repeat;
+      background-size: 100% 100%;
+      justify-content: space-around;
+      padding-bottom: 15px;
+      margin-top: 10px;
+
+      .part {
+        width: 33%;
+        font-size: 13px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        span {
+          margin: 0 5px;
+        }
+        .circle {
+          display: inline-block;
+          width: 5px;
+          height: 5px;
+          border-radius: 50%;
+          margin-right: 5px;
+        }
+        .yellow {
+          background: #ffed52;
+        }
+        .blue {
+          background: #3afff8;
+        }
+        .green {
+          background: #18e87a;
+        }
+      }
+    }
+    .pumpStatus {
+      justify-content: center;
+      img {
+        width: 66px;
+        height: 66px;
+      }
+      p {
+        text-align: center;
+        font-family: Source Han Sans CN;
+        font-weight: 400;
+        font-size: 16px;
+        color: #b8ecff;
+      }
+    }
+  }
 }
 </style>
diff --git a/src/views/sponeScreen/waterFlood/rainCaldar.vue b/src/views/sponeScreen/waterFlood/rainCaldar.vue
index 0900ade..bb38b27 100644
--- a/src/views/sponeScreen/waterFlood/rainCaldar.vue
+++ b/src/views/sponeScreen/waterFlood/rainCaldar.vue
@@ -1,19 +1,154 @@
 <template>
   <!-- 降雨日历 -->
   <div class="rainCaldarPage">
-    <div class="partTitleHM">降雨日历</div>
-    <div class="partContHM">降雨日历</div>
+    <div class="partTitleHM">
+      降雨日历
+      <el-date-picker
+        type="date"
+        v-model="dateDay"
+        value-format="YYYY-MM-DD"
+        placeholder="请选择日期"
+        style="float: right; width: 130px; margin: 10px 60px 0px 0px"
+        size="small"
+        v-if="dateIndex == 'day'"
+      />
+      <el-date-picker
+        type="month"
+        v-model="dateMonth"
+        value-format="YYYY-MM"
+        placeholder="请选择日期"
+        style="float: right; width: 130px; margin: 10px 60px 0px 0px"
+        size="small"
+        v-if="dateIndex == 'month'"
+      />
+      <el-date-picker
+        type="year"
+        v-model="dateYear"
+        value-format="YYYY"
+        placeholder="请选择日期"
+        style="float: right; width: 130px; margin: 10px 60px 0px 0px"
+        size="small"
+        v-if="dateIndex == 'year'"
+      />
+    </div>
+    <div class="partContHM">
+      <div class="flex flex-justcontent-spacebetween">
+        <p :class="['partD', dateIndex == 'day' ? 'active' : '']" @click="changeDate('day')">日</p>
+        <p :class="['partD', dateIndex == 'month' ? 'active' : '']" @click="changeDate('month')">月</p>
+        <p :class="['partD', dateIndex == 'year' ? 'active' : '']" @click="changeDate('year')">年</p>
+        <el-select clearable filterable v-model="rainCode" placeholder="请选择雨量站" style="width: 150px">
+          <el-option v-for="dict in rainList" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
+        </el-select>
+      </div>
+      <!-- 日 -->
+      <div class="partDay flex flex-justcontent-spacebetween" v-if="dateIndex == 'day'">
+        <div class="part">
+          <p>日期</p>
+          <p>06-12<br />2024</p>
+        </div>
+        <div class="part">
+          <p>累计降雨量</p>
+          <p>1.2<br />mm/24h</p>
+        </div>
+        <div class="part">
+          <p>雨强</p>
+          <p style="padding-top: 15px">小雨</p>
+        </div>
+      </div>
+      <!-- 月 -->
+      <div class="partDay" v-if="dateIndex == 'month'">
+        <ChartBar3D :refresh="refresh" :echartData="echartData"></ChartBar3D>
+      </div>
+
+      <!-- 年 -->
+      <div class="partDay" v-if="dateIndex == 'year'">
+        <ChartBar3D :refresh="refresh2" :echartData="echartData2"></ChartBar3D>
+      </div>
+    </div>
   </div>
 </template>
 
 <script setup>
+import ChartBar3D from '@/views/sponeScreen/Echarts/echartBar3D.vue';
 const { proxy } = getCurrentInstance();
 
+const dateDay = ref(proxy.moment(new Date()).format('YYYY-MM-DD'));
+const dateMonth = ref(proxy.moment(new Date()).format('YYYY-MM'));
+const dateYear = ref(proxy.moment(new Date()).format('YYYY-MM'));
+const rainCode = ref('1');
+const rainList = ref([
+  { value: '1', label: '汴京路雨量站' },
+  { value: '2', label: '黄河路雨量站' },
+]);
+const dateIndex = ref('day');
+const refresh = ref(1);
+const echartData = ref({
+  xAxis: ['06-01', '06-05', '06-10', '06-15', '06-20', '06-25', '06-30'],
+  yName: '降雨量mm',
+  seriesData: [23.2, 10, 0, 12, 5, 19, 56],
+  seriesDataMax: [100, 100, 100, 100, 100, 100, 100],
+});
+
+const refresh2 = ref(1);
+const echartData2 = ref({
+  xAxis: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'],
+  yName: '降雨量mm',
+  seriesData: [123.2, 100, 60, 102, 85, 19, 123.2, 100, 60, 42, 59, 99],
+  seriesDataMax: [300, 300, 300, 300, 300, 300, 300, 300, 300, 300, 300, 300],
+});
+
+// 点击切换
+function changeDate(val) {
+  dateIndex.value = val;
+}
+
 onMounted(() => {});
 </script>
 
 <style lang="scss" scoped>
 .rainCaldarPage {
   width: 100%;
+  .partContHM {
+    .partD {
+      width: 82px;
+      height: 30px;
+      line-height: 30px;
+      text-align: center;
+      background: url('@/assets/newImgs/HMScreen/rainD.png') no-repeat;
+      background-size: 100% 100%;
+      cursor: pointer;
+    }
+    .active {
+      background: url('@/assets/newImgs/HMScreen/rainA.png') no-repeat;
+      background-size: 100% 100%;
+      color: #fff;
+    }
+    .partDay {
+      margin-top: 10px;
+      height: 163px;
+      .part {
+        width: 132px;
+        height: 163px;
+        background: url('@/assets/newImgs/HMScreen/rainP.png') no-repeat;
+        background-size: 100% 100%;
+        p {
+          text-align: center;
+          &:nth-of-type(1) {
+            font-family: Source Han Sans CN;
+            font-weight: 500;
+            font-size: 16px;
+            color: #ffffff;
+            margin: 12px 0px 30px 0px;
+          }
+          &:nth-of-type(2) {
+            color: #3afff8;
+            font-family: Source Han Sans CN;
+            font-weight: 500;
+            font-size: 22px;
+          }
+        }
+      }
+    }
+  }
 }
 </style>
diff --git a/src/views/sponeScreen/waterFlood/rainReport.vue b/src/views/sponeScreen/waterFlood/rainReport.vue
index a49d010..dab01b7 100644
--- a/src/views/sponeScreen/waterFlood/rainReport.vue
+++ b/src/views/sponeScreen/waterFlood/rainReport.vue
@@ -2,12 +2,56 @@
   <!-- 降雨报告 -->
   <div class="rainReportPage">
     <div class="partTitleHM">降雨报告</div>
-    <div class="partContHM">降雨报告</div>
+    <div class="partContHM">
+      <div class="scrollMapHM">
+        <div class="scrollTitle flex">
+          <p>开始时间</p>
+          <p>结束时间</p>
+          <p>雨强</p>
+          <p>累计降雨量</p>
+          <p>操作</p>
+        </div>
+        <Vue3SeamlessScroll :list="dataList" :singleHeight="53" :singleWaitTime="1500" :hover="true" class="scroll">
+          <div class="scrollCont flex" v-for="item in dataList" :key="item.id">
+            <p class="ellipsis">{{ item.start }}</p>
+            <p class="ellipsis">{{ item.end }}</p>
+            <p class="ellipsis">{{ item.yq }}</p>
+            <p class="ellipsis">{{ item.num }}mm</p>
+            <p class="ellipsis reports" @click="checkReport(item)">查看报告</p>
+          </div>
+        </Vue3SeamlessScroll>
+      </div>
+    </div>
+    <!-- 查看报告单 -->
+    <el-dialog title="降雨报告单" v-model="dialogShowDetail" width="1100px" append-to-body>
+      <ReportDetail v-if="dialogShowDetail" :rainId="rainId"></ReportDetail>
+    </el-dialog>
   </div>
 </template>
 
 <script setup>
+import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
+import ReportDetail from '@/views/floodSys/floodYP/historyEventDetail.vue';
+
 const { proxy } = getCurrentInstance();
+const dialogShowDetail = ref(false);
+const rainId = ref('');
+
+const dataList = ref([
+  { start: '2024-04-12 10:12:20', end: '2024-06-12 13:12:20', yq: '小雨', num: 3.2, id: 1 },
+  { start: '2024-04-13 10:12:20', end: '2024-06-12 13:12:20', yq: '大雨', num: 24.2, id: 1 },
+  { start: '2024-05-12 10:12:20', end: '2024-06-12 13:12:20', yq: '中雨', num: 8.5, id: 1 },
+  { start: '2024-05-15 10:12:20', end: '2024-06-12 13:12:20', yq: '小雨', num: 3.2, id: 1 },
+  { start: '2024-06-12 10:12:20', end: '2024-06-12 13:12:20', yq: '小雨', num: 3.2, id: 1 },
+  { start: '2024-06-15 10:12:20', end: '2024-06-12 13:12:20', yq: '小雨', num: 3.2, id: 1 },
+  { start: '2024-06-18 10:12:20', end: '2024-06-12 13:12:20', yq: '小雨', num: 3.2, id: 1 },
+]);
+
+// 查看报告
+function checkReport(item) {
+  rainId.value = '1804215833354420225';
+  dialogShowDetail.value = true;
+}
 
 onMounted(() => {});
 </script>
@@ -15,5 +59,13 @@
 <style lang="scss" scoped>
 .rainReportPage {
   width: 100%;
+  .scrollMapHM {
+    p {
+      width: 18%;
+    }
+    .reports {
+      color: #3afff8;
+    }
+  }
 }
 </style>