diff --git a/src/assets/newImgs/pumpGY/car1.png b/src/assets/newImgs/pumpGY/car1.png
new file mode 100644
index 0000000..e0b92f6
--- /dev/null
+++ b/src/assets/newImgs/pumpGY/car1.png
Binary files differ

diff --git a/src/assets/newImgs/pumpGY/car1.png b/src/assets/newImgs/pumpGY/car1.png
new file mode 100644
index 0000000..e0b92f6
--- /dev/null
+++ b/src/assets/newImgs/pumpGY/car1.png
Binary files differ
diff --git a/src/assets/newImgs/pumpGY/car2.png b/src/assets/newImgs/pumpGY/car2.png
new file mode 100644
index 0000000..7128bfd
--- /dev/null
+++ b/src/assets/newImgs/pumpGY/car2.png
Binary files differ

diff --git a/src/assets/newImgs/pumpGY/car1.png b/src/assets/newImgs/pumpGY/car1.png
new file mode 100644
index 0000000..e0b92f6
--- /dev/null
+++ b/src/assets/newImgs/pumpGY/car1.png
Binary files differ
diff --git a/src/assets/newImgs/pumpGY/car2.png b/src/assets/newImgs/pumpGY/car2.png
new file mode 100644
index 0000000..7128bfd
--- /dev/null
+++ b/src/assets/newImgs/pumpGY/car2.png
Binary files differ
diff --git a/src/assets/newImgs/pumpGY/car3.png b/src/assets/newImgs/pumpGY/car3.png
new file mode 100644
index 0000000..6f14aeb
--- /dev/null
+++ b/src/assets/newImgs/pumpGY/car3.png
Binary files differ

diff --git a/src/assets/newImgs/pumpGY/car1.png b/src/assets/newImgs/pumpGY/car1.png
new file mode 100644
index 0000000..e0b92f6
--- /dev/null
+++ b/src/assets/newImgs/pumpGY/car1.png
Binary files differ
diff --git a/src/assets/newImgs/pumpGY/car2.png b/src/assets/newImgs/pumpGY/car2.png
new file mode 100644
index 0000000..7128bfd
--- /dev/null
+++ b/src/assets/newImgs/pumpGY/car2.png
Binary files differ
diff --git a/src/assets/newImgs/pumpGY/car3.png b/src/assets/newImgs/pumpGY/car3.png
new file mode 100644
index 0000000..6f14aeb
--- /dev/null
+++ b/src/assets/newImgs/pumpGY/car3.png
Binary files differ
diff --git a/src/assets/newImgs/pumpGY/car4.png b/src/assets/newImgs/pumpGY/car4.png
new file mode 100644
index 0000000..6102349
--- /dev/null
+++ b/src/assets/newImgs/pumpGY/car4.png
Binary files differ

diff --git a/src/assets/newImgs/pumpGY/car1.png b/src/assets/newImgs/pumpGY/car1.png
new file mode 100644
index 0000000..e0b92f6
--- /dev/null
+++ b/src/assets/newImgs/pumpGY/car1.png
Binary files differ
diff --git a/src/assets/newImgs/pumpGY/car2.png b/src/assets/newImgs/pumpGY/car2.png
new file mode 100644
index 0000000..7128bfd
--- /dev/null
+++ b/src/assets/newImgs/pumpGY/car2.png
Binary files differ
diff --git a/src/assets/newImgs/pumpGY/car3.png b/src/assets/newImgs/pumpGY/car3.png
new file mode 100644
index 0000000..6f14aeb
--- /dev/null
+++ b/src/assets/newImgs/pumpGY/car3.png
Binary files differ
diff --git a/src/assets/newImgs/pumpGY/car4.png b/src/assets/newImgs/pumpGY/car4.png
new file mode 100644
index 0000000..6102349
--- /dev/null
+++ b/src/assets/newImgs/pumpGY/car4.png
Binary files differ
diff --git a/src/assets/newImgs/pumpGY/car5.png b/src/assets/newImgs/pumpGY/car5.png
new file mode 100644
index 0000000..cef6803
--- /dev/null
+++ b/src/assets/newImgs/pumpGY/car5.png
Binary files differ

diff --git a/src/assets/newImgs/pumpGY/car1.png b/src/assets/newImgs/pumpGY/car1.png
new file mode 100644
index 0000000..e0b92f6
--- /dev/null
+++ b/src/assets/newImgs/pumpGY/car1.png
Binary files differ
diff --git a/src/assets/newImgs/pumpGY/car2.png b/src/assets/newImgs/pumpGY/car2.png
new file mode 100644
index 0000000..7128bfd
--- /dev/null
+++ b/src/assets/newImgs/pumpGY/car2.png
Binary files differ
diff --git a/src/assets/newImgs/pumpGY/car3.png b/src/assets/newImgs/pumpGY/car3.png
new file mode 100644
index 0000000..6f14aeb
--- /dev/null
+++ b/src/assets/newImgs/pumpGY/car3.png
Binary files differ
diff --git a/src/assets/newImgs/pumpGY/car4.png b/src/assets/newImgs/pumpGY/car4.png
new file mode 100644
index 0000000..6102349
--- /dev/null
+++ b/src/assets/newImgs/pumpGY/car4.png
Binary files differ
diff --git a/src/assets/newImgs/pumpGY/car5.png b/src/assets/newImgs/pumpGY/car5.png
new file mode 100644
index 0000000..cef6803
--- /dev/null
+++ b/src/assets/newImgs/pumpGY/car5.png
Binary files differ
diff --git a/src/assets/newImgs/pumpGY/equipL.png b/src/assets/newImgs/pumpGY/equipL.png
new file mode 100644
index 0000000..fa6f7d6
--- /dev/null
+++ b/src/assets/newImgs/pumpGY/equipL.png
Binary files differ

diff --git a/src/assets/newImgs/pumpGY/car1.png b/src/assets/newImgs/pumpGY/car1.png
new file mode 100644
index 0000000..e0b92f6
--- /dev/null
+++ b/src/assets/newImgs/pumpGY/car1.png
Binary files differ
diff --git a/src/assets/newImgs/pumpGY/car2.png b/src/assets/newImgs/pumpGY/car2.png
new file mode 100644
index 0000000..7128bfd
--- /dev/null
+++ b/src/assets/newImgs/pumpGY/car2.png
Binary files differ
diff --git a/src/assets/newImgs/pumpGY/car3.png b/src/assets/newImgs/pumpGY/car3.png
new file mode 100644
index 0000000..6f14aeb
--- /dev/null
+++ b/src/assets/newImgs/pumpGY/car3.png
Binary files differ
diff --git a/src/assets/newImgs/pumpGY/car4.png b/src/assets/newImgs/pumpGY/car4.png
new file mode 100644
index 0000000..6102349
--- /dev/null
+++ b/src/assets/newImgs/pumpGY/car4.png
Binary files differ
diff --git a/src/assets/newImgs/pumpGY/car5.png b/src/assets/newImgs/pumpGY/car5.png
new file mode 100644
index 0000000..cef6803
--- /dev/null
+++ b/src/assets/newImgs/pumpGY/car5.png
Binary files differ
diff --git a/src/assets/newImgs/pumpGY/equipL.png b/src/assets/newImgs/pumpGY/equipL.png
new file mode 100644
index 0000000..fa6f7d6
--- /dev/null
+++ b/src/assets/newImgs/pumpGY/equipL.png
Binary files differ
diff --git a/src/assets/newImgs/pumpGY/hmSS.png b/src/assets/newImgs/pumpGY/hmSS.png
new file mode 100644
index 0000000..65e5b03
--- /dev/null
+++ b/src/assets/newImgs/pumpGY/hmSS.png
Binary files differ

diff --git a/src/assets/newImgs/pumpGY/car1.png b/src/assets/newImgs/pumpGY/car1.png
new file mode 100644
index 0000000..e0b92f6
--- /dev/null
+++ b/src/assets/newImgs/pumpGY/car1.png
Binary files differ
diff --git a/src/assets/newImgs/pumpGY/car2.png b/src/assets/newImgs/pumpGY/car2.png
new file mode 100644
index 0000000..7128bfd
--- /dev/null
+++ b/src/assets/newImgs/pumpGY/car2.png
Binary files differ
diff --git a/src/assets/newImgs/pumpGY/car3.png b/src/assets/newImgs/pumpGY/car3.png
new file mode 100644
index 0000000..6f14aeb
--- /dev/null
+++ b/src/assets/newImgs/pumpGY/car3.png
Binary files differ
diff --git a/src/assets/newImgs/pumpGY/car4.png b/src/assets/newImgs/pumpGY/car4.png
new file mode 100644
index 0000000..6102349
--- /dev/null
+++ b/src/assets/newImgs/pumpGY/car4.png
Binary files differ
diff --git a/src/assets/newImgs/pumpGY/car5.png b/src/assets/newImgs/pumpGY/car5.png
new file mode 100644
index 0000000..cef6803
--- /dev/null
+++ b/src/assets/newImgs/pumpGY/car5.png
Binary files differ
diff --git a/src/assets/newImgs/pumpGY/equipL.png b/src/assets/newImgs/pumpGY/equipL.png
new file mode 100644
index 0000000..fa6f7d6
--- /dev/null
+++ b/src/assets/newImgs/pumpGY/equipL.png
Binary files differ
diff --git a/src/assets/newImgs/pumpGY/hmSS.png b/src/assets/newImgs/pumpGY/hmSS.png
new file mode 100644
index 0000000..65e5b03
--- /dev/null
+++ b/src/assets/newImgs/pumpGY/hmSS.png
Binary files differ
diff --git a/src/assets/newImgs/pumpGY/projectBg.jpg b/src/assets/newImgs/pumpGY/projectBg.jpg
new file mode 100644
index 0000000..f4c4135
--- /dev/null
+++ b/src/assets/newImgs/pumpGY/projectBg.jpg
Binary files differ

diff --git a/src/assets/newImgs/pumpGY/car1.png b/src/assets/newImgs/pumpGY/car1.png
new file mode 100644
index 0000000..e0b92f6
--- /dev/null
+++ b/src/assets/newImgs/pumpGY/car1.png
Binary files differ
diff --git a/src/assets/newImgs/pumpGY/car2.png b/src/assets/newImgs/pumpGY/car2.png
new file mode 100644
index 0000000..7128bfd
--- /dev/null
+++ b/src/assets/newImgs/pumpGY/car2.png
Binary files differ
diff --git a/src/assets/newImgs/pumpGY/car3.png b/src/assets/newImgs/pumpGY/car3.png
new file mode 100644
index 0000000..6f14aeb
--- /dev/null
+++ b/src/assets/newImgs/pumpGY/car3.png
Binary files differ
diff --git a/src/assets/newImgs/pumpGY/car4.png b/src/assets/newImgs/pumpGY/car4.png
new file mode 100644
index 0000000..6102349
--- /dev/null
+++ b/src/assets/newImgs/pumpGY/car4.png
Binary files differ
diff --git a/src/assets/newImgs/pumpGY/car5.png b/src/assets/newImgs/pumpGY/car5.png
new file mode 100644
index 0000000..cef6803
--- /dev/null
+++ b/src/assets/newImgs/pumpGY/car5.png
Binary files differ
diff --git a/src/assets/newImgs/pumpGY/equipL.png b/src/assets/newImgs/pumpGY/equipL.png
new file mode 100644
index 0000000..fa6f7d6
--- /dev/null
+++ b/src/assets/newImgs/pumpGY/equipL.png
Binary files differ
diff --git a/src/assets/newImgs/pumpGY/hmSS.png b/src/assets/newImgs/pumpGY/hmSS.png
new file mode 100644
index 0000000..65e5b03
--- /dev/null
+++ b/src/assets/newImgs/pumpGY/hmSS.png
Binary files differ
diff --git a/src/assets/newImgs/pumpGY/projectBg.jpg b/src/assets/newImgs/pumpGY/projectBg.jpg
new file mode 100644
index 0000000..f4c4135
--- /dev/null
+++ b/src/assets/newImgs/pumpGY/projectBg.jpg
Binary files differ
diff --git a/src/views/sponeScreen/HaiMianScreen/index.vue b/src/views/sponeScreen/HaiMianScreen/index.vue
index eaec872..2e52039 100644
--- a/src/views/sponeScreen/HaiMianScreen/index.vue
+++ b/src/views/sponeScreen/HaiMianScreen/index.vue
@@ -3,13 +3,13 @@
   <div class="hmMainPage">
     <!-- 地图 -->
     <!-- <GisMapMF v-show="menuIndex != 3"></GisMapMF> -->
-    <gisMapBox
+    <!-- <gisMapBox
       v-show="menuIndex != 3"
       :initJson="`/static/libs/mapbox/style/HaiMianScreen.json`"
       @map-click="mapClick"
       @map-moveOn="moveOn"
       @map-moveLeave="moveLeave"
-    ></gisMapBox>
+    ></gisMapBox> -->
 
     <!-- 图例 -->
     <Legend
@@ -119,14 +119,20 @@
     <!-- 降雨效果 -->
     <CanvasRain v-if="showRainFlow"></CanvasRain>
 
+    <!-- 典型项目效果 -->
+    <el-dialog v-model="showProjectDX" title="典型项目分析" style="width: 1650px" append-to-body>
+      <ProjectFX></ProjectFX>
+    </el-dialog>
+
     <!-- 典型项目设施效果 -->
-    <el-dialog v-model="showProjectDX" title="典型项目设施分析" style="width: 1430px" append-to-body>
+    <el-dialog v-model="showProjectSSDX" title="典型项目设施分析" style="width: 1430px" append-to-body>
       <ProjectSSDX></ProjectSSDX>
     </el-dialog>
   </div>
 </template>
 
 <script setup>
+import ProjectFX from '@/views/sponeScreen/projectHM/projectFX.vue'; //典型项目分析
 import ProjectSSDX from '@/views/sponeScreen/projectHM/projectSSDX.vue'; //典型项目设施分析
 import ProjectArea from '@/views/sponeScreen/projectHM/projectArea.vue'; //分区建议
 import gisMapBox from '@/views/gisMapPage/gisMapBox1.vue';
@@ -171,12 +177,13 @@
   { name: '排水防涝', id: 4 },
   { name: '长效运维', id: 5 },
 ]);
-const menuIndex = ref(1);
+const menuIndex = ref(2);
 const showPanel = ref(false);
 const showLegend = ref(false);
 const showPipe = ref(false);
 const showLandXDM = ref(false); //下垫面控制
-const showProjectDX = ref(false);
+const showProjectSSDX = ref(false);
+const showProjectDX = ref(true);
 const areaObj = ref({ value: '0' });
 const pointSourceData = ref({});
 // 下垫面统计
@@ -376,13 +383,18 @@
   bus.on('checkLandXDM', params => {
     showLandXDM.value = params;
   });
+  // 典型项目分析
+  bus.on('checkProjectFX', params => {
+    showProjectDX.value = true;
+  });
   // 典型项目设施分析
   bus.on('checkSSFX', params => {
-    showProjectDX.value = true;
+    showProjectSSDX.value = true;
   });
 });
 onBeforeUnmount(() => {
   bus.off('checkProjectArea');
+  bus.off('checkProjectFX');
   bus.off('checkRainL');
   bus.off('checkLandXDM');
   bus.off('checkSSFX');

diff --git a/src/assets/newImgs/pumpGY/car1.png b/src/assets/newImgs/pumpGY/car1.png
new file mode 100644
index 0000000..e0b92f6
--- /dev/null
+++ b/src/assets/newImgs/pumpGY/car1.png
Binary files differ
diff --git a/src/assets/newImgs/pumpGY/car2.png b/src/assets/newImgs/pumpGY/car2.png
new file mode 100644
index 0000000..7128bfd
--- /dev/null
+++ b/src/assets/newImgs/pumpGY/car2.png
Binary files differ
diff --git a/src/assets/newImgs/pumpGY/car3.png b/src/assets/newImgs/pumpGY/car3.png
new file mode 100644
index 0000000..6f14aeb
--- /dev/null
+++ b/src/assets/newImgs/pumpGY/car3.png
Binary files differ
diff --git a/src/assets/newImgs/pumpGY/car4.png b/src/assets/newImgs/pumpGY/car4.png
new file mode 100644
index 0000000..6102349
--- /dev/null
+++ b/src/assets/newImgs/pumpGY/car4.png
Binary files differ
diff --git a/src/assets/newImgs/pumpGY/car5.png b/src/assets/newImgs/pumpGY/car5.png
new file mode 100644
index 0000000..cef6803
--- /dev/null
+++ b/src/assets/newImgs/pumpGY/car5.png
Binary files differ
diff --git a/src/assets/newImgs/pumpGY/equipL.png b/src/assets/newImgs/pumpGY/equipL.png
new file mode 100644
index 0000000..fa6f7d6
--- /dev/null
+++ b/src/assets/newImgs/pumpGY/equipL.png
Binary files differ
diff --git a/src/assets/newImgs/pumpGY/hmSS.png b/src/assets/newImgs/pumpGY/hmSS.png
new file mode 100644
index 0000000..65e5b03
--- /dev/null
+++ b/src/assets/newImgs/pumpGY/hmSS.png
Binary files differ
diff --git a/src/assets/newImgs/pumpGY/projectBg.jpg b/src/assets/newImgs/pumpGY/projectBg.jpg
new file mode 100644
index 0000000..f4c4135
--- /dev/null
+++ b/src/assets/newImgs/pumpGY/projectBg.jpg
Binary files differ
diff --git a/src/views/sponeScreen/HaiMianScreen/index.vue b/src/views/sponeScreen/HaiMianScreen/index.vue
index eaec872..2e52039 100644
--- a/src/views/sponeScreen/HaiMianScreen/index.vue
+++ b/src/views/sponeScreen/HaiMianScreen/index.vue
@@ -3,13 +3,13 @@
   <div class="hmMainPage">
     <!-- 地图 -->
     <!-- <GisMapMF v-show="menuIndex != 3"></GisMapMF> -->
-    <gisMapBox
+    <!-- <gisMapBox
       v-show="menuIndex != 3"
       :initJson="`/static/libs/mapbox/style/HaiMianScreen.json`"
       @map-click="mapClick"
       @map-moveOn="moveOn"
       @map-moveLeave="moveLeave"
-    ></gisMapBox>
+    ></gisMapBox> -->
 
     <!-- 图例 -->
     <Legend
@@ -119,14 +119,20 @@
     <!-- 降雨效果 -->
     <CanvasRain v-if="showRainFlow"></CanvasRain>
 
+    <!-- 典型项目效果 -->
+    <el-dialog v-model="showProjectDX" title="典型项目分析" style="width: 1650px" append-to-body>
+      <ProjectFX></ProjectFX>
+    </el-dialog>
+
     <!-- 典型项目设施效果 -->
-    <el-dialog v-model="showProjectDX" title="典型项目设施分析" style="width: 1430px" append-to-body>
+    <el-dialog v-model="showProjectSSDX" title="典型项目设施分析" style="width: 1430px" append-to-body>
       <ProjectSSDX></ProjectSSDX>
     </el-dialog>
   </div>
 </template>
 
 <script setup>
+import ProjectFX from '@/views/sponeScreen/projectHM/projectFX.vue'; //典型项目分析
 import ProjectSSDX from '@/views/sponeScreen/projectHM/projectSSDX.vue'; //典型项目设施分析
 import ProjectArea from '@/views/sponeScreen/projectHM/projectArea.vue'; //分区建议
 import gisMapBox from '@/views/gisMapPage/gisMapBox1.vue';
@@ -171,12 +177,13 @@
   { name: '排水防涝', id: 4 },
   { name: '长效运维', id: 5 },
 ]);
-const menuIndex = ref(1);
+const menuIndex = ref(2);
 const showPanel = ref(false);
 const showLegend = ref(false);
 const showPipe = ref(false);
 const showLandXDM = ref(false); //下垫面控制
-const showProjectDX = ref(false);
+const showProjectSSDX = ref(false);
+const showProjectDX = ref(true);
 const areaObj = ref({ value: '0' });
 const pointSourceData = ref({});
 // 下垫面统计
@@ -376,13 +383,18 @@
   bus.on('checkLandXDM', params => {
     showLandXDM.value = params;
   });
+  // 典型项目分析
+  bus.on('checkProjectFX', params => {
+    showProjectDX.value = true;
+  });
   // 典型项目设施分析
   bus.on('checkSSFX', params => {
-    showProjectDX.value = true;
+    showProjectSSDX.value = true;
   });
 });
 onBeforeUnmount(() => {
   bus.off('checkProjectArea');
+  bus.off('checkProjectFX');
   bus.off('checkRainL');
   bus.off('checkLandXDM');
   bus.off('checkSSFX');
diff --git a/src/views/sponeScreen/projectHM/ProjectEvaluation.vue b/src/views/sponeScreen/projectHM/ProjectEvaluation.vue
index 1f31b6a..64e8ae9 100644
--- a/src/views/sponeScreen/projectHM/ProjectEvaluation.vue
+++ b/src/views/sponeScreen/projectHM/ProjectEvaluation.vue
@@ -187,12 +187,12 @@
 
 // 典型项目点击
 function changeProject(val) {
-  // bus.emit('checkProjectFX', XmList.value[val]);
-  newfiberMapbox.map.easeTo({
-    center: [114.381601, 34.793947],
-    zoom: 15.9,
-    pitch: 30,
-  });
+  bus.emit('checkProjectFX', XmList.value[val]);
+  // newfiberMapbox.map.easeTo({
+  //   center: [114.381601, 34.793947],
+  //   zoom: 15.9,
+  //   pitch: 30,
+  // });
 }
 
 // 项目设施分析点击

diff --git a/src/assets/newImgs/pumpGY/car1.png b/src/assets/newImgs/pumpGY/car1.png
new file mode 100644
index 0000000..e0b92f6
--- /dev/null
+++ b/src/assets/newImgs/pumpGY/car1.png
Binary files differ
diff --git a/src/assets/newImgs/pumpGY/car2.png b/src/assets/newImgs/pumpGY/car2.png
new file mode 100644
index 0000000..7128bfd
--- /dev/null
+++ b/src/assets/newImgs/pumpGY/car2.png
Binary files differ
diff --git a/src/assets/newImgs/pumpGY/car3.png b/src/assets/newImgs/pumpGY/car3.png
new file mode 100644
index 0000000..6f14aeb
--- /dev/null
+++ b/src/assets/newImgs/pumpGY/car3.png
Binary files differ
diff --git a/src/assets/newImgs/pumpGY/car4.png b/src/assets/newImgs/pumpGY/car4.png
new file mode 100644
index 0000000..6102349
--- /dev/null
+++ b/src/assets/newImgs/pumpGY/car4.png
Binary files differ
diff --git a/src/assets/newImgs/pumpGY/car5.png b/src/assets/newImgs/pumpGY/car5.png
new file mode 100644
index 0000000..cef6803
--- /dev/null
+++ b/src/assets/newImgs/pumpGY/car5.png
Binary files differ
diff --git a/src/assets/newImgs/pumpGY/equipL.png b/src/assets/newImgs/pumpGY/equipL.png
new file mode 100644
index 0000000..fa6f7d6
--- /dev/null
+++ b/src/assets/newImgs/pumpGY/equipL.png
Binary files differ
diff --git a/src/assets/newImgs/pumpGY/hmSS.png b/src/assets/newImgs/pumpGY/hmSS.png
new file mode 100644
index 0000000..65e5b03
--- /dev/null
+++ b/src/assets/newImgs/pumpGY/hmSS.png
Binary files differ
diff --git a/src/assets/newImgs/pumpGY/projectBg.jpg b/src/assets/newImgs/pumpGY/projectBg.jpg
new file mode 100644
index 0000000..f4c4135
--- /dev/null
+++ b/src/assets/newImgs/pumpGY/projectBg.jpg
Binary files differ
diff --git a/src/views/sponeScreen/HaiMianScreen/index.vue b/src/views/sponeScreen/HaiMianScreen/index.vue
index eaec872..2e52039 100644
--- a/src/views/sponeScreen/HaiMianScreen/index.vue
+++ b/src/views/sponeScreen/HaiMianScreen/index.vue
@@ -3,13 +3,13 @@
   <div class="hmMainPage">
     <!-- 地图 -->
     <!-- <GisMapMF v-show="menuIndex != 3"></GisMapMF> -->
-    <gisMapBox
+    <!-- <gisMapBox
       v-show="menuIndex != 3"
       :initJson="`/static/libs/mapbox/style/HaiMianScreen.json`"
       @map-click="mapClick"
       @map-moveOn="moveOn"
       @map-moveLeave="moveLeave"
-    ></gisMapBox>
+    ></gisMapBox> -->
 
     <!-- 图例 -->
     <Legend
@@ -119,14 +119,20 @@
     <!-- 降雨效果 -->
     <CanvasRain v-if="showRainFlow"></CanvasRain>
 
+    <!-- 典型项目效果 -->
+    <el-dialog v-model="showProjectDX" title="典型项目分析" style="width: 1650px" append-to-body>
+      <ProjectFX></ProjectFX>
+    </el-dialog>
+
     <!-- 典型项目设施效果 -->
-    <el-dialog v-model="showProjectDX" title="典型项目设施分析" style="width: 1430px" append-to-body>
+    <el-dialog v-model="showProjectSSDX" title="典型项目设施分析" style="width: 1430px" append-to-body>
       <ProjectSSDX></ProjectSSDX>
     </el-dialog>
   </div>
 </template>
 
 <script setup>
+import ProjectFX from '@/views/sponeScreen/projectHM/projectFX.vue'; //典型项目分析
 import ProjectSSDX from '@/views/sponeScreen/projectHM/projectSSDX.vue'; //典型项目设施分析
 import ProjectArea from '@/views/sponeScreen/projectHM/projectArea.vue'; //分区建议
 import gisMapBox from '@/views/gisMapPage/gisMapBox1.vue';
@@ -171,12 +177,13 @@
   { name: '排水防涝', id: 4 },
   { name: '长效运维', id: 5 },
 ]);
-const menuIndex = ref(1);
+const menuIndex = ref(2);
 const showPanel = ref(false);
 const showLegend = ref(false);
 const showPipe = ref(false);
 const showLandXDM = ref(false); //下垫面控制
-const showProjectDX = ref(false);
+const showProjectSSDX = ref(false);
+const showProjectDX = ref(true);
 const areaObj = ref({ value: '0' });
 const pointSourceData = ref({});
 // 下垫面统计
@@ -376,13 +383,18 @@
   bus.on('checkLandXDM', params => {
     showLandXDM.value = params;
   });
+  // 典型项目分析
+  bus.on('checkProjectFX', params => {
+    showProjectDX.value = true;
+  });
   // 典型项目设施分析
   bus.on('checkSSFX', params => {
-    showProjectDX.value = true;
+    showProjectSSDX.value = true;
   });
 });
 onBeforeUnmount(() => {
   bus.off('checkProjectArea');
+  bus.off('checkProjectFX');
   bus.off('checkRainL');
   bus.off('checkLandXDM');
   bus.off('checkSSFX');
diff --git a/src/views/sponeScreen/projectHM/ProjectEvaluation.vue b/src/views/sponeScreen/projectHM/ProjectEvaluation.vue
index 1f31b6a..64e8ae9 100644
--- a/src/views/sponeScreen/projectHM/ProjectEvaluation.vue
+++ b/src/views/sponeScreen/projectHM/ProjectEvaluation.vue
@@ -187,12 +187,12 @@
 
 // 典型项目点击
 function changeProject(val) {
-  // bus.emit('checkProjectFX', XmList.value[val]);
-  newfiberMapbox.map.easeTo({
-    center: [114.381601, 34.793947],
-    zoom: 15.9,
-    pitch: 30,
-  });
+  bus.emit('checkProjectFX', XmList.value[val]);
+  // newfiberMapbox.map.easeTo({
+  //   center: [114.381601, 34.793947],
+  //   zoom: 15.9,
+  //   pitch: 30,
+  // });
 }
 
 // 项目设施分析点击
diff --git a/src/views/sponeScreen/projectHM/canvasRain.vue b/src/views/sponeScreen/projectHM/canvasRain.vue
deleted file mode 100644
index 549c954..0000000
--- a/src/views/sponeScreen/projectHM/canvasRain.vue
+++ /dev/null
@@ -1,109 +0,0 @@
-<template>
-  <!-- 降雨效果canvas -->
-  <div class="canvasRainPage">
-    <canvas id="canvasRain"></canvas>
-  </div>
-</template>
-
-<script setup>
-const { proxy } = getCurrentInstance();
-const props = defineProps({
-  width: { type: Number },
-  height: { type: Number },
-});
-const timer = ref(null);
-
-// 画笔
-const ctx = ref(null);
-// 画布的宽高
-let w = props.width;
-let h = props.height;
-// 存放雨滴的数组
-let arr = [];
-// 雨滴的数量
-const size = ref(200);
-// 雨滴的构造函数
-class Rain {
-  x = random(w);
-  y = random(h);
-  ySpeed = random(2) + 8;
-  show() {
-    drawLine(this.x, this.y);
-  }
-  run() {
-    if (this.y > h) {
-      this.y = 0;
-      this.x = random(w);
-    }
-    this.y = this.y + this.ySpeed;
-  }
-}
-// 画线（雨滴）
-function drawLine(x1, y1) {
-  ctx.value.beginPath();
-  ctx.value.strokeStyle = 'rgba(35, 195, 255, 0.6)';
-  ctx.value.moveTo(x1, y1);
-  // 雨长度
-  ctx.value.lineTo(x1, y1 + 20);
-  ctx.value.stroke();
-}
-// 生成随机数
-function random(num) {
-  return Math.random() * num;
-}
-// 开始
-function start() {
-  for (let i = 0; i < size.value; i++) {
-    let rain = new Rain();
-    arr.push(rain);
-    rain.show();
-  }
-  timer.value = setInterval(() => {
-    ctx.value.clearRect(0, 0, w, h);
-    for (let i = 0; i < size.value; i++) {
-      arr[i].show();
-      arr[i].run();
-    }
-  }, 30);
-}
-// 初始化
-function init(ctx1) {
-  ctx.value = ctx1;
-  start();
-}
-
-// 清除画布
-function clearDraw() {
-  ctx.value.clearRect(0, 0, w, h);
-}
-
-// 初始化
-function initCanvas() {
-  const canvas = document.querySelector('#canvasRain');
-  ctx.value = canvas.getContext('2d');
-  canvas.width = w;
-  canvas.height = h;
-  init(ctx.value);
-}
-
-onMounted(() => {
-  initCanvas();
-});
-onBeforeUnmount(() => {
-  if (timer.value) clearInterval(timer.value);
-  clearDraw();
-});
-</script>
-
-<style lang="scss" scoped>
-.canvasRainPage {
-  width: 100%;
-  height: 100%;
-  background: rgba(0, 59, 109, 0.2);
-  position: absolute;
-  left: 0px;
-  top: 0px;
-  z-index: 100;
-  pointer-events: none;
-}
-</style>

diff --git a/src/assets/newImgs/pumpGY/car1.png b/src/assets/newImgs/pumpGY/car1.png
new file mode 100644
index 0000000..e0b92f6
--- /dev/null
+++ b/src/assets/newImgs/pumpGY/car1.png
Binary files differ
diff --git a/src/assets/newImgs/pumpGY/car2.png b/src/assets/newImgs/pumpGY/car2.png
new file mode 100644
index 0000000..7128bfd
--- /dev/null
+++ b/src/assets/newImgs/pumpGY/car2.png
Binary files differ
diff --git a/src/assets/newImgs/pumpGY/car3.png b/src/assets/newImgs/pumpGY/car3.png
new file mode 100644
index 0000000..6f14aeb
--- /dev/null
+++ b/src/assets/newImgs/pumpGY/car3.png
Binary files differ
diff --git a/src/assets/newImgs/pumpGY/car4.png b/src/assets/newImgs/pumpGY/car4.png
new file mode 100644
index 0000000..6102349
--- /dev/null
+++ b/src/assets/newImgs/pumpGY/car4.png
Binary files differ
diff --git a/src/assets/newImgs/pumpGY/car5.png b/src/assets/newImgs/pumpGY/car5.png
new file mode 100644
index 0000000..cef6803
--- /dev/null
+++ b/src/assets/newImgs/pumpGY/car5.png
Binary files differ
diff --git a/src/assets/newImgs/pumpGY/equipL.png b/src/assets/newImgs/pumpGY/equipL.png
new file mode 100644
index 0000000..fa6f7d6
--- /dev/null
+++ b/src/assets/newImgs/pumpGY/equipL.png
Binary files differ
diff --git a/src/assets/newImgs/pumpGY/hmSS.png b/src/assets/newImgs/pumpGY/hmSS.png
new file mode 100644
index 0000000..65e5b03
--- /dev/null
+++ b/src/assets/newImgs/pumpGY/hmSS.png
Binary files differ
diff --git a/src/assets/newImgs/pumpGY/projectBg.jpg b/src/assets/newImgs/pumpGY/projectBg.jpg
new file mode 100644
index 0000000..f4c4135
--- /dev/null
+++ b/src/assets/newImgs/pumpGY/projectBg.jpg
Binary files differ
diff --git a/src/views/sponeScreen/HaiMianScreen/index.vue b/src/views/sponeScreen/HaiMianScreen/index.vue
index eaec872..2e52039 100644
--- a/src/views/sponeScreen/HaiMianScreen/index.vue
+++ b/src/views/sponeScreen/HaiMianScreen/index.vue
@@ -3,13 +3,13 @@
   <div class="hmMainPage">
     <!-- 地图 -->
     <!-- <GisMapMF v-show="menuIndex != 3"></GisMapMF> -->
-    <gisMapBox
+    <!-- <gisMapBox
       v-show="menuIndex != 3"
       :initJson="`/static/libs/mapbox/style/HaiMianScreen.json`"
       @map-click="mapClick"
       @map-moveOn="moveOn"
       @map-moveLeave="moveLeave"
-    ></gisMapBox>
+    ></gisMapBox> -->
 
     <!-- 图例 -->
     <Legend
@@ -119,14 +119,20 @@
     <!-- 降雨效果 -->
     <CanvasRain v-if="showRainFlow"></CanvasRain>
 
+    <!-- 典型项目效果 -->
+    <el-dialog v-model="showProjectDX" title="典型项目分析" style="width: 1650px" append-to-body>
+      <ProjectFX></ProjectFX>
+    </el-dialog>
+
     <!-- 典型项目设施效果 -->
-    <el-dialog v-model="showProjectDX" title="典型项目设施分析" style="width: 1430px" append-to-body>
+    <el-dialog v-model="showProjectSSDX" title="典型项目设施分析" style="width: 1430px" append-to-body>
       <ProjectSSDX></ProjectSSDX>
     </el-dialog>
   </div>
 </template>
 
 <script setup>
+import ProjectFX from '@/views/sponeScreen/projectHM/projectFX.vue'; //典型项目分析
 import ProjectSSDX from '@/views/sponeScreen/projectHM/projectSSDX.vue'; //典型项目设施分析
 import ProjectArea from '@/views/sponeScreen/projectHM/projectArea.vue'; //分区建议
 import gisMapBox from '@/views/gisMapPage/gisMapBox1.vue';
@@ -171,12 +177,13 @@
   { name: '排水防涝', id: 4 },
   { name: '长效运维', id: 5 },
 ]);
-const menuIndex = ref(1);
+const menuIndex = ref(2);
 const showPanel = ref(false);
 const showLegend = ref(false);
 const showPipe = ref(false);
 const showLandXDM = ref(false); //下垫面控制
-const showProjectDX = ref(false);
+const showProjectSSDX = ref(false);
+const showProjectDX = ref(true);
 const areaObj = ref({ value: '0' });
 const pointSourceData = ref({});
 // 下垫面统计
@@ -376,13 +383,18 @@
   bus.on('checkLandXDM', params => {
     showLandXDM.value = params;
   });
+  // 典型项目分析
+  bus.on('checkProjectFX', params => {
+    showProjectDX.value = true;
+  });
   // 典型项目设施分析
   bus.on('checkSSFX', params => {
-    showProjectDX.value = true;
+    showProjectSSDX.value = true;
   });
 });
 onBeforeUnmount(() => {
   bus.off('checkProjectArea');
+  bus.off('checkProjectFX');
   bus.off('checkRainL');
   bus.off('checkLandXDM');
   bus.off('checkSSFX');
diff --git a/src/views/sponeScreen/projectHM/ProjectEvaluation.vue b/src/views/sponeScreen/projectHM/ProjectEvaluation.vue
index 1f31b6a..64e8ae9 100644
--- a/src/views/sponeScreen/projectHM/ProjectEvaluation.vue
+++ b/src/views/sponeScreen/projectHM/ProjectEvaluation.vue
@@ -187,12 +187,12 @@
 
 // 典型项目点击
 function changeProject(val) {
-  // bus.emit('checkProjectFX', XmList.value[val]);
-  newfiberMapbox.map.easeTo({
-    center: [114.381601, 34.793947],
-    zoom: 15.9,
-    pitch: 30,
-  });
+  bus.emit('checkProjectFX', XmList.value[val]);
+  // newfiberMapbox.map.easeTo({
+  //   center: [114.381601, 34.793947],
+  //   zoom: 15.9,
+  //   pitch: 30,
+  // });
 }
 
 // 项目设施分析点击
diff --git a/src/views/sponeScreen/projectHM/canvasRain.vue b/src/views/sponeScreen/projectHM/canvasRain.vue
deleted file mode 100644
index 549c954..0000000
--- a/src/views/sponeScreen/projectHM/canvasRain.vue
+++ /dev/null
@@ -1,109 +0,0 @@
-<template>
-  <!-- 降雨效果canvas -->
-  <div class="canvasRainPage">
-    <canvas id="canvasRain"></canvas>
-  </div>
-</template>
-
-<script setup>
-const { proxy } = getCurrentInstance();
-const props = defineProps({
-  width: { type: Number },
-  height: { type: Number },
-});
-const timer = ref(null);
-
-// 画笔
-const ctx = ref(null);
-// 画布的宽高
-let w = props.width;
-let h = props.height;
-// 存放雨滴的数组
-let arr = [];
-// 雨滴的数量
-const size = ref(200);
-// 雨滴的构造函数
-class Rain {
-  x = random(w);
-  y = random(h);
-  ySpeed = random(2) + 8;
-  show() {
-    drawLine(this.x, this.y);
-  }
-  run() {
-    if (this.y > h) {
-      this.y = 0;
-      this.x = random(w);
-    }
-    this.y = this.y + this.ySpeed;
-  }
-}
-// 画线（雨滴）
-function drawLine(x1, y1) {
-  ctx.value.beginPath();
-  ctx.value.strokeStyle = 'rgba(35, 195, 255, 0.6)';
-  ctx.value.moveTo(x1, y1);
-  // 雨长度
-  ctx.value.lineTo(x1, y1 + 20);
-  ctx.value.stroke();
-}
-// 生成随机数
-function random(num) {
-  return Math.random() * num;
-}
-// 开始
-function start() {
-  for (let i = 0; i < size.value; i++) {
-    let rain = new Rain();
-    arr.push(rain);
-    rain.show();
-  }
-  timer.value = setInterval(() => {
-    ctx.value.clearRect(0, 0, w, h);
-    for (let i = 0; i < size.value; i++) {
-      arr[i].show();
-      arr[i].run();
-    }
-  }, 30);
-}
-// 初始化
-function init(ctx1) {
-  ctx.value = ctx1;
-  start();
-}
-
-// 清除画布
-function clearDraw() {
-  ctx.value.clearRect(0, 0, w, h);
-}
-
-// 初始化
-function initCanvas() {
-  const canvas = document.querySelector('#canvasRain');
-  ctx.value = canvas.getContext('2d');
-  canvas.width = w;
-  canvas.height = h;
-  init(ctx.value);
-}
-
-onMounted(() => {
-  initCanvas();
-});
-onBeforeUnmount(() => {
-  if (timer.value) clearInterval(timer.value);
-  clearDraw();
-});
-</script>
-
-<style lang="scss" scoped>
-.canvasRainPage {
-  width: 100%;
-  height: 100%;
-  background: rgba(0, 59, 109, 0.2);
-  position: absolute;
-  left: 0px;
-  top: 0px;
-  z-index: 100;
-  pointer-events: none;
-}
-</style>
diff --git a/src/views/sponeScreen/projectHM/canvasRainP.vue b/src/views/sponeScreen/projectHM/canvasRainP.vue
new file mode 100644
index 0000000..a29b730
--- /dev/null
+++ b/src/views/sponeScreen/projectHM/canvasRainP.vue
@@ -0,0 +1,109 @@
+<template>
+  <!-- 降雨效果canvas -->
+  <div class="canvasRainPage">
+    <canvas id="canvasRainP"></canvas>
+  </div>
+</template>
+
+<script setup>
+const { proxy } = getCurrentInstance();
+const props = defineProps({
+  width: { type: Number },
+  height: { type: Number },
+});
+const timer = ref(null);
+
+// 画笔
+const ctx = ref(null);
+// 画布的宽高
+let w = props.width;
+let h = props.height;
+// 存放雨滴的数组
+let arr = [];
+// 雨滴的数量
+const size = ref(200);
+// 雨滴的构造函数
+class Rain {
+  x = random(w);
+  y = random(h);
+  ySpeed = random(2) + 8;
+  show() {
+    drawLine(this.x, this.y);
+  }
+  run() {
+    if (this.y > h) {
+      this.y = 0;
+      this.x = random(w);
+    }
+    this.y = this.y + this.ySpeed;
+  }
+}
+// 画线（雨滴）
+function drawLine(x1, y1) {
+  ctx.value.beginPath();
+  ctx.value.strokeStyle = 'rgba(35, 195, 255, 0.6)';
+  ctx.value.moveTo(x1, y1);
+  // 雨长度
+  ctx.value.lineTo(x1, y1 + 20);
+  ctx.value.stroke();
+}
+// 生成随机数
+function random(num) {
+  return Math.random() * num;
+}
+// 开始
+function start() {
+  for (let i = 0; i < size.value; i++) {
+    let rain = new Rain();
+    arr.push(rain);
+    rain.show();
+  }
+  timer.value = setInterval(() => {
+    ctx.value.clearRect(0, 0, w, h);
+    for (let i = 0; i < size.value; i++) {
+      arr[i].show();
+      arr[i].run();
+    }
+  }, 30);
+}
+// 初始化
+function init(ctx1) {
+  ctx.value = ctx1;
+  start();
+}
+
+// 清除画布
+function clearDraw() {
+  ctx.value.clearRect(0, 0, w, h);
+}
+
+// 初始化
+function initCanvas() {
+  const canvas = document.querySelector('#canvasRainP');
+  ctx.value = canvas.getContext('2d');
+  canvas.width = w;
+  canvas.height = h;
+  init(ctx.value);
+}
+
+onMounted(() => {
+  initCanvas();
+});
+onBeforeUnmount(() => {
+  if (timer.value) clearInterval(timer.value);
+  clearDraw();
+});
+</script>
+
+<style lang="scss" scoped>
+.canvasRainPage {
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 59, 109, 0.2);
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  z-index: 100;
+  pointer-events: none;
+}
+</style>

diff --git a/src/assets/newImgs/pumpGY/car1.png b/src/assets/newImgs/pumpGY/car1.png
new file mode 100644
index 0000000..e0b92f6
--- /dev/null
+++ b/src/assets/newImgs/pumpGY/car1.png
Binary files differ
diff --git a/src/assets/newImgs/pumpGY/car2.png b/src/assets/newImgs/pumpGY/car2.png
new file mode 100644
index 0000000..7128bfd
--- /dev/null
+++ b/src/assets/newImgs/pumpGY/car2.png
Binary files differ
diff --git a/src/assets/newImgs/pumpGY/car3.png b/src/assets/newImgs/pumpGY/car3.png
new file mode 100644
index 0000000..6f14aeb
--- /dev/null
+++ b/src/assets/newImgs/pumpGY/car3.png
Binary files differ
diff --git a/src/assets/newImgs/pumpGY/car4.png b/src/assets/newImgs/pumpGY/car4.png
new file mode 100644
index 0000000..6102349
--- /dev/null
+++ b/src/assets/newImgs/pumpGY/car4.png
Binary files differ
diff --git a/src/assets/newImgs/pumpGY/car5.png b/src/assets/newImgs/pumpGY/car5.png
new file mode 100644
index 0000000..cef6803
--- /dev/null
+++ b/src/assets/newImgs/pumpGY/car5.png
Binary files differ
diff --git a/src/assets/newImgs/pumpGY/equipL.png b/src/assets/newImgs/pumpGY/equipL.png
new file mode 100644
index 0000000..fa6f7d6
--- /dev/null
+++ b/src/assets/newImgs/pumpGY/equipL.png
Binary files differ
diff --git a/src/assets/newImgs/pumpGY/hmSS.png b/src/assets/newImgs/pumpGY/hmSS.png
new file mode 100644
index 0000000..65e5b03
--- /dev/null
+++ b/src/assets/newImgs/pumpGY/hmSS.png
Binary files differ
diff --git a/src/assets/newImgs/pumpGY/projectBg.jpg b/src/assets/newImgs/pumpGY/projectBg.jpg
new file mode 100644
index 0000000..f4c4135
--- /dev/null
+++ b/src/assets/newImgs/pumpGY/projectBg.jpg
Binary files differ
diff --git a/src/views/sponeScreen/HaiMianScreen/index.vue b/src/views/sponeScreen/HaiMianScreen/index.vue
index eaec872..2e52039 100644
--- a/src/views/sponeScreen/HaiMianScreen/index.vue
+++ b/src/views/sponeScreen/HaiMianScreen/index.vue
@@ -3,13 +3,13 @@
   <div class="hmMainPage">
     <!-- 地图 -->
     <!-- <GisMapMF v-show="menuIndex != 3"></GisMapMF> -->
-    <gisMapBox
+    <!-- <gisMapBox
       v-show="menuIndex != 3"
       :initJson="`/static/libs/mapbox/style/HaiMianScreen.json`"
       @map-click="mapClick"
       @map-moveOn="moveOn"
       @map-moveLeave="moveLeave"
-    ></gisMapBox>
+    ></gisMapBox> -->
 
     <!-- 图例 -->
     <Legend
@@ -119,14 +119,20 @@
     <!-- 降雨效果 -->
     <CanvasRain v-if="showRainFlow"></CanvasRain>
 
+    <!-- 典型项目效果 -->
+    <el-dialog v-model="showProjectDX" title="典型项目分析" style="width: 1650px" append-to-body>
+      <ProjectFX></ProjectFX>
+    </el-dialog>
+
     <!-- 典型项目设施效果 -->
-    <el-dialog v-model="showProjectDX" title="典型项目设施分析" style="width: 1430px" append-to-body>
+    <el-dialog v-model="showProjectSSDX" title="典型项目设施分析" style="width: 1430px" append-to-body>
       <ProjectSSDX></ProjectSSDX>
     </el-dialog>
   </div>
 </template>
 
 <script setup>
+import ProjectFX from '@/views/sponeScreen/projectHM/projectFX.vue'; //典型项目分析
 import ProjectSSDX from '@/views/sponeScreen/projectHM/projectSSDX.vue'; //典型项目设施分析
 import ProjectArea from '@/views/sponeScreen/projectHM/projectArea.vue'; //分区建议
 import gisMapBox from '@/views/gisMapPage/gisMapBox1.vue';
@@ -171,12 +177,13 @@
   { name: '排水防涝', id: 4 },
   { name: '长效运维', id: 5 },
 ]);
-const menuIndex = ref(1);
+const menuIndex = ref(2);
 const showPanel = ref(false);
 const showLegend = ref(false);
 const showPipe = ref(false);
 const showLandXDM = ref(false); //下垫面控制
-const showProjectDX = ref(false);
+const showProjectSSDX = ref(false);
+const showProjectDX = ref(true);
 const areaObj = ref({ value: '0' });
 const pointSourceData = ref({});
 // 下垫面统计
@@ -376,13 +383,18 @@
   bus.on('checkLandXDM', params => {
     showLandXDM.value = params;
   });
+  // 典型项目分析
+  bus.on('checkProjectFX', params => {
+    showProjectDX.value = true;
+  });
   // 典型项目设施分析
   bus.on('checkSSFX', params => {
-    showProjectDX.value = true;
+    showProjectSSDX.value = true;
   });
 });
 onBeforeUnmount(() => {
   bus.off('checkProjectArea');
+  bus.off('checkProjectFX');
   bus.off('checkRainL');
   bus.off('checkLandXDM');
   bus.off('checkSSFX');
diff --git a/src/views/sponeScreen/projectHM/ProjectEvaluation.vue b/src/views/sponeScreen/projectHM/ProjectEvaluation.vue
index 1f31b6a..64e8ae9 100644
--- a/src/views/sponeScreen/projectHM/ProjectEvaluation.vue
+++ b/src/views/sponeScreen/projectHM/ProjectEvaluation.vue
@@ -187,12 +187,12 @@
 
 // 典型项目点击
 function changeProject(val) {
-  // bus.emit('checkProjectFX', XmList.value[val]);
-  newfiberMapbox.map.easeTo({
-    center: [114.381601, 34.793947],
-    zoom: 15.9,
-    pitch: 30,
-  });
+  bus.emit('checkProjectFX', XmList.value[val]);
+  // newfiberMapbox.map.easeTo({
+  //   center: [114.381601, 34.793947],
+  //   zoom: 15.9,
+  //   pitch: 30,
+  // });
 }
 
 // 项目设施分析点击
diff --git a/src/views/sponeScreen/projectHM/canvasRain.vue b/src/views/sponeScreen/projectHM/canvasRain.vue
deleted file mode 100644
index 549c954..0000000
--- a/src/views/sponeScreen/projectHM/canvasRain.vue
+++ /dev/null
@@ -1,109 +0,0 @@
-<template>
-  <!-- 降雨效果canvas -->
-  <div class="canvasRainPage">
-    <canvas id="canvasRain"></canvas>
-  </div>
-</template>
-
-<script setup>
-const { proxy } = getCurrentInstance();
-const props = defineProps({
-  width: { type: Number },
-  height: { type: Number },
-});
-const timer = ref(null);
-
-// 画笔
-const ctx = ref(null);
-// 画布的宽高
-let w = props.width;
-let h = props.height;
-// 存放雨滴的数组
-let arr = [];
-// 雨滴的数量
-const size = ref(200);
-// 雨滴的构造函数
-class Rain {
-  x = random(w);
-  y = random(h);
-  ySpeed = random(2) + 8;
-  show() {
-    drawLine(this.x, this.y);
-  }
-  run() {
-    if (this.y > h) {
-      this.y = 0;
-      this.x = random(w);
-    }
-    this.y = this.y + this.ySpeed;
-  }
-}
-// 画线（雨滴）
-function drawLine(x1, y1) {
-  ctx.value.beginPath();
-  ctx.value.strokeStyle = 'rgba(35, 195, 255, 0.6)';
-  ctx.value.moveTo(x1, y1);
-  // 雨长度
-  ctx.value.lineTo(x1, y1 + 20);
-  ctx.value.stroke();
-}
-// 生成随机数
-function random(num) {
-  return Math.random() * num;
-}
-// 开始
-function start() {
-  for (let i = 0; i < size.value; i++) {
-    let rain = new Rain();
-    arr.push(rain);
-    rain.show();
-  }
-  timer.value = setInterval(() => {
-    ctx.value.clearRect(0, 0, w, h);
-    for (let i = 0; i < size.value; i++) {
-      arr[i].show();
-      arr[i].run();
-    }
-  }, 30);
-}
-// 初始化
-function init(ctx1) {
-  ctx.value = ctx1;
-  start();
-}
-
-// 清除画布
-function clearDraw() {
-  ctx.value.clearRect(0, 0, w, h);
-}
-
-// 初始化
-function initCanvas() {
-  const canvas = document.querySelector('#canvasRain');
-  ctx.value = canvas.getContext('2d');
-  canvas.width = w;
-  canvas.height = h;
-  init(ctx.value);
-}
-
-onMounted(() => {
-  initCanvas();
-});
-onBeforeUnmount(() => {
-  if (timer.value) clearInterval(timer.value);
-  clearDraw();
-});
-</script>
-
-<style lang="scss" scoped>
-.canvasRainPage {
-  width: 100%;
-  height: 100%;
-  background: rgba(0, 59, 109, 0.2);
-  position: absolute;
-  left: 0px;
-  top: 0px;
-  z-index: 100;
-  pointer-events: none;
-}
-</style>
diff --git a/src/views/sponeScreen/projectHM/canvasRainP.vue b/src/views/sponeScreen/projectHM/canvasRainP.vue
new file mode 100644
index 0000000..a29b730
--- /dev/null
+++ b/src/views/sponeScreen/projectHM/canvasRainP.vue
@@ -0,0 +1,109 @@
+<template>
+  <!-- 降雨效果canvas -->
+  <div class="canvasRainPage">
+    <canvas id="canvasRainP"></canvas>
+  </div>
+</template>
+
+<script setup>
+const { proxy } = getCurrentInstance();
+const props = defineProps({
+  width: { type: Number },
+  height: { type: Number },
+});
+const timer = ref(null);
+
+// 画笔
+const ctx = ref(null);
+// 画布的宽高
+let w = props.width;
+let h = props.height;
+// 存放雨滴的数组
+let arr = [];
+// 雨滴的数量
+const size = ref(200);
+// 雨滴的构造函数
+class Rain {
+  x = random(w);
+  y = random(h);
+  ySpeed = random(2) + 8;
+  show() {
+    drawLine(this.x, this.y);
+  }
+  run() {
+    if (this.y > h) {
+      this.y = 0;
+      this.x = random(w);
+    }
+    this.y = this.y + this.ySpeed;
+  }
+}
+// 画线（雨滴）
+function drawLine(x1, y1) {
+  ctx.value.beginPath();
+  ctx.value.strokeStyle = 'rgba(35, 195, 255, 0.6)';
+  ctx.value.moveTo(x1, y1);
+  // 雨长度
+  ctx.value.lineTo(x1, y1 + 20);
+  ctx.value.stroke();
+}
+// 生成随机数
+function random(num) {
+  return Math.random() * num;
+}
+// 开始
+function start() {
+  for (let i = 0; i < size.value; i++) {
+    let rain = new Rain();
+    arr.push(rain);
+    rain.show();
+  }
+  timer.value = setInterval(() => {
+    ctx.value.clearRect(0, 0, w, h);
+    for (let i = 0; i < size.value; i++) {
+      arr[i].show();
+      arr[i].run();
+    }
+  }, 30);
+}
+// 初始化
+function init(ctx1) {
+  ctx.value = ctx1;
+  start();
+}
+
+// 清除画布
+function clearDraw() {
+  ctx.value.clearRect(0, 0, w, h);
+}
+
+// 初始化
+function initCanvas() {
+  const canvas = document.querySelector('#canvasRainP');
+  ctx.value = canvas.getContext('2d');
+  canvas.width = w;
+  canvas.height = h;
+  init(ctx.value);
+}
+
+onMounted(() => {
+  initCanvas();
+});
+onBeforeUnmount(() => {
+  if (timer.value) clearInterval(timer.value);
+  clearDraw();
+});
+</script>
+
+<style lang="scss" scoped>
+.canvasRainPage {
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 59, 109, 0.2);
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  z-index: 100;
+  pointer-events: none;
+}
+</style>
diff --git a/src/views/sponeScreen/projectHM/canvasRainSS.vue b/src/views/sponeScreen/projectHM/canvasRainSS.vue
new file mode 100644
index 0000000..3ea8df1
--- /dev/null
+++ b/src/views/sponeScreen/projectHM/canvasRainSS.vue
@@ -0,0 +1,109 @@
+<template>
+  <!-- 降雨效果canvas -->
+  <div class="canvasRainPage">
+    <canvas id="canvasRainSS"></canvas>
+  </div>
+</template>
+
+<script setup>
+const { proxy } = getCurrentInstance();
+const props = defineProps({
+  width: { type: Number },
+  height: { type: Number },
+});
+const timer = ref(null);
+
+// 画笔
+const ctx = ref(null);
+// 画布的宽高
+let w = props.width;
+let h = props.height;
+// 存放雨滴的数组
+let arr = [];
+// 雨滴的数量
+const size = ref(200);
+// 雨滴的构造函数
+class Rain {
+  x = random(w);
+  y = random(h);
+  ySpeed = random(2) + 8;
+  show() {
+    drawLine(this.x, this.y);
+  }
+  run() {
+    if (this.y > h) {
+      this.y = 0;
+      this.x = random(w);
+    }
+    this.y = this.y + this.ySpeed;
+  }
+}
+// 画线（雨滴）
+function drawLine(x1, y1) {
+  ctx.value.beginPath();
+  ctx.value.strokeStyle = 'rgba(35, 195, 255, 0.6)';
+  ctx.value.moveTo(x1, y1);
+  // 雨长度
+  ctx.value.lineTo(x1, y1 + 20);
+  ctx.value.stroke();
+}
+// 生成随机数
+function random(num) {
+  return Math.random() * num;
+}
+// 开始
+function start() {
+  for (let i = 0; i < size.value; i++) {
+    let rain = new Rain();
+    arr.push(rain);
+    rain.show();
+  }
+  timer.value = setInterval(() => {
+    ctx.value.clearRect(0, 0, w, h);
+    for (let i = 0; i < size.value; i++) {
+      arr[i].show();
+      arr[i].run();
+    }
+  }, 30);
+}
+// 初始化
+function init(ctx1) {
+  ctx.value = ctx1;
+  start();
+}
+
+// 清除画布
+function clearDraw() {
+  ctx.value.clearRect(0, 0, w, h);
+}
+
+// 初始化
+function initCanvas() {
+  const canvas = document.querySelector('#canvasRainSS');
+  ctx.value = canvas.getContext('2d');
+  canvas.width = w;
+  canvas.height = h;
+  init(ctx.value);
+}
+
+onMounted(() => {
+  initCanvas();
+});
+onBeforeUnmount(() => {
+  if (timer.value) clearInterval(timer.value);
+  clearDraw();
+});
+</script>
+
+<style lang="scss" scoped>
+.canvasRainPage {
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 59, 109, 0.2);
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  z-index: 100;
+  pointer-events: none;
+}
+</style>

diff --git a/src/assets/newImgs/pumpGY/car1.png b/src/assets/newImgs/pumpGY/car1.png
new file mode 100644
index 0000000..e0b92f6
--- /dev/null
+++ b/src/assets/newImgs/pumpGY/car1.png
Binary files differ
diff --git a/src/assets/newImgs/pumpGY/car2.png b/src/assets/newImgs/pumpGY/car2.png
new file mode 100644
index 0000000..7128bfd
--- /dev/null
+++ b/src/assets/newImgs/pumpGY/car2.png
Binary files differ
diff --git a/src/assets/newImgs/pumpGY/car3.png b/src/assets/newImgs/pumpGY/car3.png
new file mode 100644
index 0000000..6f14aeb
--- /dev/null
+++ b/src/assets/newImgs/pumpGY/car3.png
Binary files differ
diff --git a/src/assets/newImgs/pumpGY/car4.png b/src/assets/newImgs/pumpGY/car4.png
new file mode 100644
index 0000000..6102349
--- /dev/null
+++ b/src/assets/newImgs/pumpGY/car4.png
Binary files differ
diff --git a/src/assets/newImgs/pumpGY/car5.png b/src/assets/newImgs/pumpGY/car5.png
new file mode 100644
index 0000000..cef6803
--- /dev/null
+++ b/src/assets/newImgs/pumpGY/car5.png
Binary files differ
diff --git a/src/assets/newImgs/pumpGY/equipL.png b/src/assets/newImgs/pumpGY/equipL.png
new file mode 100644
index 0000000..fa6f7d6
--- /dev/null
+++ b/src/assets/newImgs/pumpGY/equipL.png
Binary files differ
diff --git a/src/assets/newImgs/pumpGY/hmSS.png b/src/assets/newImgs/pumpGY/hmSS.png
new file mode 100644
index 0000000..65e5b03
--- /dev/null
+++ b/src/assets/newImgs/pumpGY/hmSS.png
Binary files differ
diff --git a/src/assets/newImgs/pumpGY/projectBg.jpg b/src/assets/newImgs/pumpGY/projectBg.jpg
new file mode 100644
index 0000000..f4c4135
--- /dev/null
+++ b/src/assets/newImgs/pumpGY/projectBg.jpg
Binary files differ
diff --git a/src/views/sponeScreen/HaiMianScreen/index.vue b/src/views/sponeScreen/HaiMianScreen/index.vue
index eaec872..2e52039 100644
--- a/src/views/sponeScreen/HaiMianScreen/index.vue
+++ b/src/views/sponeScreen/HaiMianScreen/index.vue
@@ -3,13 +3,13 @@
   <div class="hmMainPage">
     <!-- 地图 -->
     <!-- <GisMapMF v-show="menuIndex != 3"></GisMapMF> -->
-    <gisMapBox
+    <!-- <gisMapBox
       v-show="menuIndex != 3"
       :initJson="`/static/libs/mapbox/style/HaiMianScreen.json`"
       @map-click="mapClick"
       @map-moveOn="moveOn"
       @map-moveLeave="moveLeave"
-    ></gisMapBox>
+    ></gisMapBox> -->
 
     <!-- 图例 -->
     <Legend
@@ -119,14 +119,20 @@
     <!-- 降雨效果 -->
     <CanvasRain v-if="showRainFlow"></CanvasRain>
 
+    <!-- 典型项目效果 -->
+    <el-dialog v-model="showProjectDX" title="典型项目分析" style="width: 1650px" append-to-body>
+      <ProjectFX></ProjectFX>
+    </el-dialog>
+
     <!-- 典型项目设施效果 -->
-    <el-dialog v-model="showProjectDX" title="典型项目设施分析" style="width: 1430px" append-to-body>
+    <el-dialog v-model="showProjectSSDX" title="典型项目设施分析" style="width: 1430px" append-to-body>
       <ProjectSSDX></ProjectSSDX>
     </el-dialog>
   </div>
 </template>
 
 <script setup>
+import ProjectFX from '@/views/sponeScreen/projectHM/projectFX.vue'; //典型项目分析
 import ProjectSSDX from '@/views/sponeScreen/projectHM/projectSSDX.vue'; //典型项目设施分析
 import ProjectArea from '@/views/sponeScreen/projectHM/projectArea.vue'; //分区建议
 import gisMapBox from '@/views/gisMapPage/gisMapBox1.vue';
@@ -171,12 +177,13 @@
   { name: '排水防涝', id: 4 },
   { name: '长效运维', id: 5 },
 ]);
-const menuIndex = ref(1);
+const menuIndex = ref(2);
 const showPanel = ref(false);
 const showLegend = ref(false);
 const showPipe = ref(false);
 const showLandXDM = ref(false); //下垫面控制
-const showProjectDX = ref(false);
+const showProjectSSDX = ref(false);
+const showProjectDX = ref(true);
 const areaObj = ref({ value: '0' });
 const pointSourceData = ref({});
 // 下垫面统计
@@ -376,13 +383,18 @@
   bus.on('checkLandXDM', params => {
     showLandXDM.value = params;
   });
+  // 典型项目分析
+  bus.on('checkProjectFX', params => {
+    showProjectDX.value = true;
+  });
   // 典型项目设施分析
   bus.on('checkSSFX', params => {
-    showProjectDX.value = true;
+    showProjectSSDX.value = true;
   });
 });
 onBeforeUnmount(() => {
   bus.off('checkProjectArea');
+  bus.off('checkProjectFX');
   bus.off('checkRainL');
   bus.off('checkLandXDM');
   bus.off('checkSSFX');
diff --git a/src/views/sponeScreen/projectHM/ProjectEvaluation.vue b/src/views/sponeScreen/projectHM/ProjectEvaluation.vue
index 1f31b6a..64e8ae9 100644
--- a/src/views/sponeScreen/projectHM/ProjectEvaluation.vue
+++ b/src/views/sponeScreen/projectHM/ProjectEvaluation.vue
@@ -187,12 +187,12 @@
 
 // 典型项目点击
 function changeProject(val) {
-  // bus.emit('checkProjectFX', XmList.value[val]);
-  newfiberMapbox.map.easeTo({
-    center: [114.381601, 34.793947],
-    zoom: 15.9,
-    pitch: 30,
-  });
+  bus.emit('checkProjectFX', XmList.value[val]);
+  // newfiberMapbox.map.easeTo({
+  //   center: [114.381601, 34.793947],
+  //   zoom: 15.9,
+  //   pitch: 30,
+  // });
 }
 
 // 项目设施分析点击
diff --git a/src/views/sponeScreen/projectHM/canvasRain.vue b/src/views/sponeScreen/projectHM/canvasRain.vue
deleted file mode 100644
index 549c954..0000000
--- a/src/views/sponeScreen/projectHM/canvasRain.vue
+++ /dev/null
@@ -1,109 +0,0 @@
-<template>
-  <!-- 降雨效果canvas -->
-  <div class="canvasRainPage">
-    <canvas id="canvasRain"></canvas>
-  </div>
-</template>
-
-<script setup>
-const { proxy } = getCurrentInstance();
-const props = defineProps({
-  width: { type: Number },
-  height: { type: Number },
-});
-const timer = ref(null);
-
-// 画笔
-const ctx = ref(null);
-// 画布的宽高
-let w = props.width;
-let h = props.height;
-// 存放雨滴的数组
-let arr = [];
-// 雨滴的数量
-const size = ref(200);
-// 雨滴的构造函数
-class Rain {
-  x = random(w);
-  y = random(h);
-  ySpeed = random(2) + 8;
-  show() {
-    drawLine(this.x, this.y);
-  }
-  run() {
-    if (this.y > h) {
-      this.y = 0;
-      this.x = random(w);
-    }
-    this.y = this.y + this.ySpeed;
-  }
-}
-// 画线（雨滴）
-function drawLine(x1, y1) {
-  ctx.value.beginPath();
-  ctx.value.strokeStyle = 'rgba(35, 195, 255, 0.6)';
-  ctx.value.moveTo(x1, y1);
-  // 雨长度
-  ctx.value.lineTo(x1, y1 + 20);
-  ctx.value.stroke();
-}
-// 生成随机数
-function random(num) {
-  return Math.random() * num;
-}
-// 开始
-function start() {
-  for (let i = 0; i < size.value; i++) {
-    let rain = new Rain();
-    arr.push(rain);
-    rain.show();
-  }
-  timer.value = setInterval(() => {
-    ctx.value.clearRect(0, 0, w, h);
-    for (let i = 0; i < size.value; i++) {
-      arr[i].show();
-      arr[i].run();
-    }
-  }, 30);
-}
-// 初始化
-function init(ctx1) {
-  ctx.value = ctx1;
-  start();
-}
-
-// 清除画布
-function clearDraw() {
-  ctx.value.clearRect(0, 0, w, h);
-}
-
-// 初始化
-function initCanvas() {
-  const canvas = document.querySelector('#canvasRain');
-  ctx.value = canvas.getContext('2d');
-  canvas.width = w;
-  canvas.height = h;
-  init(ctx.value);
-}
-
-onMounted(() => {
-  initCanvas();
-});
-onBeforeUnmount(() => {
-  if (timer.value) clearInterval(timer.value);
-  clearDraw();
-});
-</script>
-
-<style lang="scss" scoped>
-.canvasRainPage {
-  width: 100%;
-  height: 100%;
-  background: rgba(0, 59, 109, 0.2);
-  position: absolute;
-  left: 0px;
-  top: 0px;
-  z-index: 100;
-  pointer-events: none;
-}
-</style>
diff --git a/src/views/sponeScreen/projectHM/canvasRainP.vue b/src/views/sponeScreen/projectHM/canvasRainP.vue
new file mode 100644
index 0000000..a29b730
--- /dev/null
+++ b/src/views/sponeScreen/projectHM/canvasRainP.vue
@@ -0,0 +1,109 @@
+<template>
+  <!-- 降雨效果canvas -->
+  <div class="canvasRainPage">
+    <canvas id="canvasRainP"></canvas>
+  </div>
+</template>
+
+<script setup>
+const { proxy } = getCurrentInstance();
+const props = defineProps({
+  width: { type: Number },
+  height: { type: Number },
+});
+const timer = ref(null);
+
+// 画笔
+const ctx = ref(null);
+// 画布的宽高
+let w = props.width;
+let h = props.height;
+// 存放雨滴的数组
+let arr = [];
+// 雨滴的数量
+const size = ref(200);
+// 雨滴的构造函数
+class Rain {
+  x = random(w);
+  y = random(h);
+  ySpeed = random(2) + 8;
+  show() {
+    drawLine(this.x, this.y);
+  }
+  run() {
+    if (this.y > h) {
+      this.y = 0;
+      this.x = random(w);
+    }
+    this.y = this.y + this.ySpeed;
+  }
+}
+// 画线（雨滴）
+function drawLine(x1, y1) {
+  ctx.value.beginPath();
+  ctx.value.strokeStyle = 'rgba(35, 195, 255, 0.6)';
+  ctx.value.moveTo(x1, y1);
+  // 雨长度
+  ctx.value.lineTo(x1, y1 + 20);
+  ctx.value.stroke();
+}
+// 生成随机数
+function random(num) {
+  return Math.random() * num;
+}
+// 开始
+function start() {
+  for (let i = 0; i < size.value; i++) {
+    let rain = new Rain();
+    arr.push(rain);
+    rain.show();
+  }
+  timer.value = setInterval(() => {
+    ctx.value.clearRect(0, 0, w, h);
+    for (let i = 0; i < size.value; i++) {
+      arr[i].show();
+      arr[i].run();
+    }
+  }, 30);
+}
+// 初始化
+function init(ctx1) {
+  ctx.value = ctx1;
+  start();
+}
+
+// 清除画布
+function clearDraw() {
+  ctx.value.clearRect(0, 0, w, h);
+}
+
+// 初始化
+function initCanvas() {
+  const canvas = document.querySelector('#canvasRainP');
+  ctx.value = canvas.getContext('2d');
+  canvas.width = w;
+  canvas.height = h;
+  init(ctx.value);
+}
+
+onMounted(() => {
+  initCanvas();
+});
+onBeforeUnmount(() => {
+  if (timer.value) clearInterval(timer.value);
+  clearDraw();
+});
+</script>
+
+<style lang="scss" scoped>
+.canvasRainPage {
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 59, 109, 0.2);
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  z-index: 100;
+  pointer-events: none;
+}
+</style>
diff --git a/src/views/sponeScreen/projectHM/canvasRainSS.vue b/src/views/sponeScreen/projectHM/canvasRainSS.vue
new file mode 100644
index 0000000..3ea8df1
--- /dev/null
+++ b/src/views/sponeScreen/projectHM/canvasRainSS.vue
@@ -0,0 +1,109 @@
+<template>
+  <!-- 降雨效果canvas -->
+  <div class="canvasRainPage">
+    <canvas id="canvasRainSS"></canvas>
+  </div>
+</template>
+
+<script setup>
+const { proxy } = getCurrentInstance();
+const props = defineProps({
+  width: { type: Number },
+  height: { type: Number },
+});
+const timer = ref(null);
+
+// 画笔
+const ctx = ref(null);
+// 画布的宽高
+let w = props.width;
+let h = props.height;
+// 存放雨滴的数组
+let arr = [];
+// 雨滴的数量
+const size = ref(200);
+// 雨滴的构造函数
+class Rain {
+  x = random(w);
+  y = random(h);
+  ySpeed = random(2) + 8;
+  show() {
+    drawLine(this.x, this.y);
+  }
+  run() {
+    if (this.y > h) {
+      this.y = 0;
+      this.x = random(w);
+    }
+    this.y = this.y + this.ySpeed;
+  }
+}
+// 画线（雨滴）
+function drawLine(x1, y1) {
+  ctx.value.beginPath();
+  ctx.value.strokeStyle = 'rgba(35, 195, 255, 0.6)';
+  ctx.value.moveTo(x1, y1);
+  // 雨长度
+  ctx.value.lineTo(x1, y1 + 20);
+  ctx.value.stroke();
+}
+// 生成随机数
+function random(num) {
+  return Math.random() * num;
+}
+// 开始
+function start() {
+  for (let i = 0; i < size.value; i++) {
+    let rain = new Rain();
+    arr.push(rain);
+    rain.show();
+  }
+  timer.value = setInterval(() => {
+    ctx.value.clearRect(0, 0, w, h);
+    for (let i = 0; i < size.value; i++) {
+      arr[i].show();
+      arr[i].run();
+    }
+  }, 30);
+}
+// 初始化
+function init(ctx1) {
+  ctx.value = ctx1;
+  start();
+}
+
+// 清除画布
+function clearDraw() {
+  ctx.value.clearRect(0, 0, w, h);
+}
+
+// 初始化
+function initCanvas() {
+  const canvas = document.querySelector('#canvasRainSS');
+  ctx.value = canvas.getContext('2d');
+  canvas.width = w;
+  canvas.height = h;
+  init(ctx.value);
+}
+
+onMounted(() => {
+  initCanvas();
+});
+onBeforeUnmount(() => {
+  if (timer.value) clearInterval(timer.value);
+  clearDraw();
+});
+</script>
+
+<style lang="scss" scoped>
+.canvasRainPage {
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 59, 109, 0.2);
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  z-index: 100;
+  pointer-events: none;
+}
+</style>
diff --git a/src/views/sponeScreen/projectHM/projectFX.vue b/src/views/sponeScreen/projectHM/projectFX.vue
new file mode 100644
index 0000000..9ba28b8
--- /dev/null
+++ b/src/views/sponeScreen/projectHM/projectFX.vue
@@ -0,0 +1,262 @@
+<template>
+  <!-- 典型项目分析 -->
+  <div class="projectFXPage">
+    <!-- 分析结果建议 -->
+    <div class="suggest">
+      <div class="center">2024-08-26 降雨起止时间1:15-3:45，24小时累计降雨量20.4mm，降雨等级 <span class="green">中雨</span></div>
+      <div class="cont">
+        <span class="numBg">1</span>
+        项目设计最大控制容积 <span class="green">3796.52m³</span>
+      </div>
+      <div class="cont">
+        <span class="numBg">2</span>
+        项目设计标准达标情况（降雨量≤54.62mm时，径流总量控制率≥90%）：本场降雨径流总量控制率 <span class="green">92%</span>，
+        <span class="green">达标</span>
+      </div>
+      <div class="cont">
+        <span class="numBg">3</span>
+        雨水管网产流开始时间1:45，结束时间4:45，累计流量 <span class="green">843.5m³</span>， 最大水深<span class="green"> 0.5m</span>
+      </div>
+    </div>
+
+    <!-- 降雨效果 -->
+    <CanvasRainP :width="1600" :height="800"></CanvasRainP>
+
+    <!-- 水位  -->
+    <img
+      src="@/assets/newImgs/pumpGY/water.png"
+      alt="左"
+      class="waterFlow"
+      :style="{ height: 120 * 0.3 + 'px', left: '73px', width: '846px' }"
+    />
+    <img
+      src="@/assets/newImgs/pumpGY/water.png"
+      alt="右"
+      class="waterFlow"
+      :style="{ height: 120 * 0.35 + 'px', right: '75px', width: '555px' }"
+    />
+
+    <!-- 实时数据 -->
+    <div class="realData">
+      <p style="left: 360px; bottom: 175px">实时水深：0.3米</p>
+      <p style="right: 300px; bottom: 175px">实时水深：0.35米</p>
+    </div>
+
+    <!-- 监测数据 -->
+    <div style="left: 170px; bottom: 455px" class="tipsM">
+      <span>流量：0.36 m/s</span>
+      <span>SS：67 mg/L</span>
+    </div>
+    <div style="left: 570px; bottom: 455px" class="tipsM">
+      <span>流量：0.36 m/s</span>
+      <span>SS：67 mg/L</span>
+    </div>
+    <div style="left: 800px; bottom: 455px" class="tipsM">
+      <span>流量：0.36 m/s</span>
+      <span>SS：67 mg/L</span>
+    </div>
+    <div style="left: 950px; bottom: 455px" class="tipsM">
+      <span>流量：0.36 m/s</span>
+      <span>SS：67 mg/L</span>
+    </div>
+    <div style="right: 140px; bottom: 455px" class="tipsM">
+      <span>流量：0.36 m/s</span>
+      <span>SS：67 mg/L</span>
+    </div>
+
+    <!-- 海绵设施 -->
+    <img
+      src="@/assets/newImgs/pumpGY/hmSS.png"
+      alt="海绵设施"
+      style="left: 530px; bottom: 385px; width: 63px; height: 63px; cursor: pointer"
+      @click="checkHmSS"
+      class="equipM"
+    />
+
+    <!-- 监测设备 -->
+    <img src="@/assets/newImgs/pumpGY/equipL.png" alt="设备左1" style="left: 130px; bottom: 75px" class="equipM" />
+    <img src="@/assets/newImgs/pumpGY/equipL.png" alt="设备左1" style="left: 540px; bottom: 75px" class="equipM" />
+    <img
+      src="@/assets/newImgs/pumpGY/equipL.png"
+      alt="设备右1"
+      style="right: 490px; bottom: 75px; transform: rotateY(180deg)"
+      class="equipM"
+    />
+    <img
+      src="@/assets/newImgs/pumpGY/equipL.png"
+      alt="设备右1"
+      style="right: 175px; bottom: 75px; transform: rotateY(180deg)"
+      class="equipM"
+    />
+
+    <!-- 汽车 -->
+    <img src="@/assets/newImgs/pumpGY/car1.png" alt="车1" style="bottom: 525px; width: 148px; height: 70px" class="carFX animate1" />
+    <img src="@/assets/newImgs/pumpGY/car2.png" alt="车2" style="bottom: 495px; width: 134px; height: 57px" class="carFX animate2" />
+    <img src="@/assets/newImgs/pumpGY/car4.png" alt="车4" style="bottom: 455px; width: 137px; height: 50px" class="carFX animate3" />
+    <img src="@/assets/newImgs/pumpGY/car5.png" alt="车5" style="bottom: 425px; width: 142px; height: 51px" class="carFX animate4" />
+    <img src="@/assets/newImgs/pumpGY/car3.png" alt="车3" style="bottom: 415px; width: 48px; height: 46px" class="carFX animate3" />
+  </div>
+</template>
+
+<script setup>
+import CanvasRainP from '@/views/sponeScreen/projectHM/canvasRainP.vue';
+import bus from '@/bus';
+const { proxy } = getCurrentInstance();
+
+// 海绵设施点击
+function checkHmSS() {
+  bus.emit('checkSSFX', {});
+}
+
+onMounted(() => {});
+</script>
+
+<style lang="scss">
+// prettier-ignore
+.projectFXPage {
+  width: 1600PX;
+  height: 800PX;
+  margin-bottom:20PX;
+  background: url('@/assets/newImgs/pumpGY/projectBg.jpg') no-repeat;
+  background-size: 100% 100%;
+  position:relative;
+  .equipM{
+    position: absolute; 
+    z-index: 30;
+    width:71PX;
+    height:329PX;
+  }
+  .carFX{
+    position: absolute; 
+    z-index: 10;
+  }
+  .animate1{
+    animation: carAni1 linear 10s infinite;
+    @keyframes carAni1 {
+      0%{right:5%;}
+      100%{right:92%}
+    }
+  }
+  .animate2{
+    animation: carAni2 ease-in-out 8s infinite;
+    @keyframes carAni2 {
+      0%{right:5%;}
+      100%{right:90%}
+    }
+  }
+  .animate3{
+    animation: carAni3 ease-in-out 8s infinite;
+    @keyframes carAni3 {
+      0%{left:5%;}
+      100%{left:90%}
+    }
+  }
+  .animate4{
+    animation: carAni4 linear 10s infinite;
+    @keyframes carAni4 {
+      0%{left:5%;}
+      100%{left:90%}
+    }
+  }
+  .animate3{
+    animation: carAni5 linear 20s infinite;
+    @keyframes carAni5 {
+      0%{left:0%;}
+      100%{left:94%}
+    }
+  }
+  .suggest{
+    position:absolute;
+    z-index: 20;
+    right:155PX;
+    top:-10PX;
+    width:421PX;
+    height:251PX;
+    background: url('@/assets/newImgs/pumpGY/tipsBg.png') no-repeat;
+    background-size: 100% 100%;
+    font-size:14PX;
+    padding:20PX;
+    font-family: Source Han Sans CN;
+    font-weight: 400;
+    color: #C1E8FF;
+    line-height: 24PX;
+    .iconSug{
+      cursor: pointer;
+      position:absolute;
+      top:20PX;
+      right:20PX;
+      width: 25PX;
+      height: 25PX;
+      svg{
+        width: 25PX;
+        height: 25PX;
+      }
+    }
+    .center{
+      margin:10PX 30px 10PX 0px;
+      text-align: center;
+      font-size:15PX;
+      color:#fff;
+    }
+    .cont{
+      padding-bottom:5PX;
+      margin-bottom:5PX;
+      border-bottom: 1px dashed #6A8CAE;
+      .numBg{
+        width:24PX;
+        height: 18PX;
+        line-height: 18PX;
+        display: inline-block;
+        background: url('@/assets/newImgs/pumpGY/numBg.png') no-repeat;
+        background-size: 100% 100%;
+        text-align: center;
+        color: #FFD200;
+      }
+    }
+    span{
+      font-weight: bold;
+    }
+  }
+  .waterFlow{
+    position:absolute;
+    z-index: 10;
+    bottom:60PX;
+  }
+    
+  .tipsM{
+    position:absolute;
+    z-index: 20;
+    background: linear-gradient(0deg, #057AD4 0%, #015080 100%);
+    border: 1px solid #057AD4;
+    padding:10PX;
+    color:#fff;
+    font-size:16PX;
+    width:140PX;
+    span{
+      width:100%;
+      display: inline-block;
+    }
+  }
+  .realData{
+    color:#fff;
+    p{
+      position:absolute;
+      z-index: 10;
+      width:160PX;
+      height: 26PX;
+      line-height: 26PX;
+      text-align: center;
+      background: #004DE0;
+      border-radius: 13PX;
+      font-size:16PX;
+    }
+    
+  }
+  .waterFX{
+    img{
+      position:absolute;
+      z-index: 10;
+    }
+  }
+}
+</style>

diff --git a/src/assets/newImgs/pumpGY/car1.png b/src/assets/newImgs/pumpGY/car1.png
new file mode 100644
index 0000000..e0b92f6
--- /dev/null
+++ b/src/assets/newImgs/pumpGY/car1.png
Binary files differ
diff --git a/src/assets/newImgs/pumpGY/car2.png b/src/assets/newImgs/pumpGY/car2.png
new file mode 100644
index 0000000..7128bfd
--- /dev/null
+++ b/src/assets/newImgs/pumpGY/car2.png
Binary files differ
diff --git a/src/assets/newImgs/pumpGY/car3.png b/src/assets/newImgs/pumpGY/car3.png
new file mode 100644
index 0000000..6f14aeb
--- /dev/null
+++ b/src/assets/newImgs/pumpGY/car3.png
Binary files differ
diff --git a/src/assets/newImgs/pumpGY/car4.png b/src/assets/newImgs/pumpGY/car4.png
new file mode 100644
index 0000000..6102349
--- /dev/null
+++ b/src/assets/newImgs/pumpGY/car4.png
Binary files differ
diff --git a/src/assets/newImgs/pumpGY/car5.png b/src/assets/newImgs/pumpGY/car5.png
new file mode 100644
index 0000000..cef6803
--- /dev/null
+++ b/src/assets/newImgs/pumpGY/car5.png
Binary files differ
diff --git a/src/assets/newImgs/pumpGY/equipL.png b/src/assets/newImgs/pumpGY/equipL.png
new file mode 100644
index 0000000..fa6f7d6
--- /dev/null
+++ b/src/assets/newImgs/pumpGY/equipL.png
Binary files differ
diff --git a/src/assets/newImgs/pumpGY/hmSS.png b/src/assets/newImgs/pumpGY/hmSS.png
new file mode 100644
index 0000000..65e5b03
--- /dev/null
+++ b/src/assets/newImgs/pumpGY/hmSS.png
Binary files differ
diff --git a/src/assets/newImgs/pumpGY/projectBg.jpg b/src/assets/newImgs/pumpGY/projectBg.jpg
new file mode 100644
index 0000000..f4c4135
--- /dev/null
+++ b/src/assets/newImgs/pumpGY/projectBg.jpg
Binary files differ
diff --git a/src/views/sponeScreen/HaiMianScreen/index.vue b/src/views/sponeScreen/HaiMianScreen/index.vue
index eaec872..2e52039 100644
--- a/src/views/sponeScreen/HaiMianScreen/index.vue
+++ b/src/views/sponeScreen/HaiMianScreen/index.vue
@@ -3,13 +3,13 @@
   <div class="hmMainPage">
     <!-- 地图 -->
     <!-- <GisMapMF v-show="menuIndex != 3"></GisMapMF> -->
-    <gisMapBox
+    <!-- <gisMapBox
       v-show="menuIndex != 3"
       :initJson="`/static/libs/mapbox/style/HaiMianScreen.json`"
       @map-click="mapClick"
       @map-moveOn="moveOn"
       @map-moveLeave="moveLeave"
-    ></gisMapBox>
+    ></gisMapBox> -->
 
     <!-- 图例 -->
     <Legend
@@ -119,14 +119,20 @@
     <!-- 降雨效果 -->
     <CanvasRain v-if="showRainFlow"></CanvasRain>
 
+    <!-- 典型项目效果 -->
+    <el-dialog v-model="showProjectDX" title="典型项目分析" style="width: 1650px" append-to-body>
+      <ProjectFX></ProjectFX>
+    </el-dialog>
+
     <!-- 典型项目设施效果 -->
-    <el-dialog v-model="showProjectDX" title="典型项目设施分析" style="width: 1430px" append-to-body>
+    <el-dialog v-model="showProjectSSDX" title="典型项目设施分析" style="width: 1430px" append-to-body>
       <ProjectSSDX></ProjectSSDX>
     </el-dialog>
   </div>
 </template>
 
 <script setup>
+import ProjectFX from '@/views/sponeScreen/projectHM/projectFX.vue'; //典型项目分析
 import ProjectSSDX from '@/views/sponeScreen/projectHM/projectSSDX.vue'; //典型项目设施分析
 import ProjectArea from '@/views/sponeScreen/projectHM/projectArea.vue'; //分区建议
 import gisMapBox from '@/views/gisMapPage/gisMapBox1.vue';
@@ -171,12 +177,13 @@
   { name: '排水防涝', id: 4 },
   { name: '长效运维', id: 5 },
 ]);
-const menuIndex = ref(1);
+const menuIndex = ref(2);
 const showPanel = ref(false);
 const showLegend = ref(false);
 const showPipe = ref(false);
 const showLandXDM = ref(false); //下垫面控制
-const showProjectDX = ref(false);
+const showProjectSSDX = ref(false);
+const showProjectDX = ref(true);
 const areaObj = ref({ value: '0' });
 const pointSourceData = ref({});
 // 下垫面统计
@@ -376,13 +383,18 @@
   bus.on('checkLandXDM', params => {
     showLandXDM.value = params;
   });
+  // 典型项目分析
+  bus.on('checkProjectFX', params => {
+    showProjectDX.value = true;
+  });
   // 典型项目设施分析
   bus.on('checkSSFX', params => {
-    showProjectDX.value = true;
+    showProjectSSDX.value = true;
   });
 });
 onBeforeUnmount(() => {
   bus.off('checkProjectArea');
+  bus.off('checkProjectFX');
   bus.off('checkRainL');
   bus.off('checkLandXDM');
   bus.off('checkSSFX');
diff --git a/src/views/sponeScreen/projectHM/ProjectEvaluation.vue b/src/views/sponeScreen/projectHM/ProjectEvaluation.vue
index 1f31b6a..64e8ae9 100644
--- a/src/views/sponeScreen/projectHM/ProjectEvaluation.vue
+++ b/src/views/sponeScreen/projectHM/ProjectEvaluation.vue
@@ -187,12 +187,12 @@
 
 // 典型项目点击
 function changeProject(val) {
-  // bus.emit('checkProjectFX', XmList.value[val]);
-  newfiberMapbox.map.easeTo({
-    center: [114.381601, 34.793947],
-    zoom: 15.9,
-    pitch: 30,
-  });
+  bus.emit('checkProjectFX', XmList.value[val]);
+  // newfiberMapbox.map.easeTo({
+  //   center: [114.381601, 34.793947],
+  //   zoom: 15.9,
+  //   pitch: 30,
+  // });
 }
 
 // 项目设施分析点击
diff --git a/src/views/sponeScreen/projectHM/canvasRain.vue b/src/views/sponeScreen/projectHM/canvasRain.vue
deleted file mode 100644
index 549c954..0000000
--- a/src/views/sponeScreen/projectHM/canvasRain.vue
+++ /dev/null
@@ -1,109 +0,0 @@
-<template>
-  <!-- 降雨效果canvas -->
-  <div class="canvasRainPage">
-    <canvas id="canvasRain"></canvas>
-  </div>
-</template>
-
-<script setup>
-const { proxy } = getCurrentInstance();
-const props = defineProps({
-  width: { type: Number },
-  height: { type: Number },
-});
-const timer = ref(null);
-
-// 画笔
-const ctx = ref(null);
-// 画布的宽高
-let w = props.width;
-let h = props.height;
-// 存放雨滴的数组
-let arr = [];
-// 雨滴的数量
-const size = ref(200);
-// 雨滴的构造函数
-class Rain {
-  x = random(w);
-  y = random(h);
-  ySpeed = random(2) + 8;
-  show() {
-    drawLine(this.x, this.y);
-  }
-  run() {
-    if (this.y > h) {
-      this.y = 0;
-      this.x = random(w);
-    }
-    this.y = this.y + this.ySpeed;
-  }
-}
-// 画线（雨滴）
-function drawLine(x1, y1) {
-  ctx.value.beginPath();
-  ctx.value.strokeStyle = 'rgba(35, 195, 255, 0.6)';
-  ctx.value.moveTo(x1, y1);
-  // 雨长度
-  ctx.value.lineTo(x1, y1 + 20);
-  ctx.value.stroke();
-}
-// 生成随机数
-function random(num) {
-  return Math.random() * num;
-}
-// 开始
-function start() {
-  for (let i = 0; i < size.value; i++) {
-    let rain = new Rain();
-    arr.push(rain);
-    rain.show();
-  }
-  timer.value = setInterval(() => {
-    ctx.value.clearRect(0, 0, w, h);
-    for (let i = 0; i < size.value; i++) {
-      arr[i].show();
-      arr[i].run();
-    }
-  }, 30);
-}
-// 初始化
-function init(ctx1) {
-  ctx.value = ctx1;
-  start();
-}
-
-// 清除画布
-function clearDraw() {
-  ctx.value.clearRect(0, 0, w, h);
-}
-
-// 初始化
-function initCanvas() {
-  const canvas = document.querySelector('#canvasRain');
-  ctx.value = canvas.getContext('2d');
-  canvas.width = w;
-  canvas.height = h;
-  init(ctx.value);
-}
-
-onMounted(() => {
-  initCanvas();
-});
-onBeforeUnmount(() => {
-  if (timer.value) clearInterval(timer.value);
-  clearDraw();
-});
-</script>
-
-<style lang="scss" scoped>
-.canvasRainPage {
-  width: 100%;
-  height: 100%;
-  background: rgba(0, 59, 109, 0.2);
-  position: absolute;
-  left: 0px;
-  top: 0px;
-  z-index: 100;
-  pointer-events: none;
-}
-</style>
diff --git a/src/views/sponeScreen/projectHM/canvasRainP.vue b/src/views/sponeScreen/projectHM/canvasRainP.vue
new file mode 100644
index 0000000..a29b730
--- /dev/null
+++ b/src/views/sponeScreen/projectHM/canvasRainP.vue
@@ -0,0 +1,109 @@
+<template>
+  <!-- 降雨效果canvas -->
+  <div class="canvasRainPage">
+    <canvas id="canvasRainP"></canvas>
+  </div>
+</template>
+
+<script setup>
+const { proxy } = getCurrentInstance();
+const props = defineProps({
+  width: { type: Number },
+  height: { type: Number },
+});
+const timer = ref(null);
+
+// 画笔
+const ctx = ref(null);
+// 画布的宽高
+let w = props.width;
+let h = props.height;
+// 存放雨滴的数组
+let arr = [];
+// 雨滴的数量
+const size = ref(200);
+// 雨滴的构造函数
+class Rain {
+  x = random(w);
+  y = random(h);
+  ySpeed = random(2) + 8;
+  show() {
+    drawLine(this.x, this.y);
+  }
+  run() {
+    if (this.y > h) {
+      this.y = 0;
+      this.x = random(w);
+    }
+    this.y = this.y + this.ySpeed;
+  }
+}
+// 画线（雨滴）
+function drawLine(x1, y1) {
+  ctx.value.beginPath();
+  ctx.value.strokeStyle = 'rgba(35, 195, 255, 0.6)';
+  ctx.value.moveTo(x1, y1);
+  // 雨长度
+  ctx.value.lineTo(x1, y1 + 20);
+  ctx.value.stroke();
+}
+// 生成随机数
+function random(num) {
+  return Math.random() * num;
+}
+// 开始
+function start() {
+  for (let i = 0; i < size.value; i++) {
+    let rain = new Rain();
+    arr.push(rain);
+    rain.show();
+  }
+  timer.value = setInterval(() => {
+    ctx.value.clearRect(0, 0, w, h);
+    for (let i = 0; i < size.value; i++) {
+      arr[i].show();
+      arr[i].run();
+    }
+  }, 30);
+}
+// 初始化
+function init(ctx1) {
+  ctx.value = ctx1;
+  start();
+}
+
+// 清除画布
+function clearDraw() {
+  ctx.value.clearRect(0, 0, w, h);
+}
+
+// 初始化
+function initCanvas() {
+  const canvas = document.querySelector('#canvasRainP');
+  ctx.value = canvas.getContext('2d');
+  canvas.width = w;
+  canvas.height = h;
+  init(ctx.value);
+}
+
+onMounted(() => {
+  initCanvas();
+});
+onBeforeUnmount(() => {
+  if (timer.value) clearInterval(timer.value);
+  clearDraw();
+});
+</script>
+
+<style lang="scss" scoped>
+.canvasRainPage {
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 59, 109, 0.2);
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  z-index: 100;
+  pointer-events: none;
+}
+</style>
diff --git a/src/views/sponeScreen/projectHM/canvasRainSS.vue b/src/views/sponeScreen/projectHM/canvasRainSS.vue
new file mode 100644
index 0000000..3ea8df1
--- /dev/null
+++ b/src/views/sponeScreen/projectHM/canvasRainSS.vue
@@ -0,0 +1,109 @@
+<template>
+  <!-- 降雨效果canvas -->
+  <div class="canvasRainPage">
+    <canvas id="canvasRainSS"></canvas>
+  </div>
+</template>
+
+<script setup>
+const { proxy } = getCurrentInstance();
+const props = defineProps({
+  width: { type: Number },
+  height: { type: Number },
+});
+const timer = ref(null);
+
+// 画笔
+const ctx = ref(null);
+// 画布的宽高
+let w = props.width;
+let h = props.height;
+// 存放雨滴的数组
+let arr = [];
+// 雨滴的数量
+const size = ref(200);
+// 雨滴的构造函数
+class Rain {
+  x = random(w);
+  y = random(h);
+  ySpeed = random(2) + 8;
+  show() {
+    drawLine(this.x, this.y);
+  }
+  run() {
+    if (this.y > h) {
+      this.y = 0;
+      this.x = random(w);
+    }
+    this.y = this.y + this.ySpeed;
+  }
+}
+// 画线（雨滴）
+function drawLine(x1, y1) {
+  ctx.value.beginPath();
+  ctx.value.strokeStyle = 'rgba(35, 195, 255, 0.6)';
+  ctx.value.moveTo(x1, y1);
+  // 雨长度
+  ctx.value.lineTo(x1, y1 + 20);
+  ctx.value.stroke();
+}
+// 生成随机数
+function random(num) {
+  return Math.random() * num;
+}
+// 开始
+function start() {
+  for (let i = 0; i < size.value; i++) {
+    let rain = new Rain();
+    arr.push(rain);
+    rain.show();
+  }
+  timer.value = setInterval(() => {
+    ctx.value.clearRect(0, 0, w, h);
+    for (let i = 0; i < size.value; i++) {
+      arr[i].show();
+      arr[i].run();
+    }
+  }, 30);
+}
+// 初始化
+function init(ctx1) {
+  ctx.value = ctx1;
+  start();
+}
+
+// 清除画布
+function clearDraw() {
+  ctx.value.clearRect(0, 0, w, h);
+}
+
+// 初始化
+function initCanvas() {
+  const canvas = document.querySelector('#canvasRainSS');
+  ctx.value = canvas.getContext('2d');
+  canvas.width = w;
+  canvas.height = h;
+  init(ctx.value);
+}
+
+onMounted(() => {
+  initCanvas();
+});
+onBeforeUnmount(() => {
+  if (timer.value) clearInterval(timer.value);
+  clearDraw();
+});
+</script>
+
+<style lang="scss" scoped>
+.canvasRainPage {
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 59, 109, 0.2);
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  z-index: 100;
+  pointer-events: none;
+}
+</style>
diff --git a/src/views/sponeScreen/projectHM/projectFX.vue b/src/views/sponeScreen/projectHM/projectFX.vue
new file mode 100644
index 0000000..9ba28b8
--- /dev/null
+++ b/src/views/sponeScreen/projectHM/projectFX.vue
@@ -0,0 +1,262 @@
+<template>
+  <!-- 典型项目分析 -->
+  <div class="projectFXPage">
+    <!-- 分析结果建议 -->
+    <div class="suggest">
+      <div class="center">2024-08-26 降雨起止时间1:15-3:45，24小时累计降雨量20.4mm，降雨等级 <span class="green">中雨</span></div>
+      <div class="cont">
+        <span class="numBg">1</span>
+        项目设计最大控制容积 <span class="green">3796.52m³</span>
+      </div>
+      <div class="cont">
+        <span class="numBg">2</span>
+        项目设计标准达标情况（降雨量≤54.62mm时，径流总量控制率≥90%）：本场降雨径流总量控制率 <span class="green">92%</span>，
+        <span class="green">达标</span>
+      </div>
+      <div class="cont">
+        <span class="numBg">3</span>
+        雨水管网产流开始时间1:45，结束时间4:45，累计流量 <span class="green">843.5m³</span>， 最大水深<span class="green"> 0.5m</span>
+      </div>
+    </div>
+
+    <!-- 降雨效果 -->
+    <CanvasRainP :width="1600" :height="800"></CanvasRainP>
+
+    <!-- 水位  -->
+    <img
+      src="@/assets/newImgs/pumpGY/water.png"
+      alt="左"
+      class="waterFlow"
+      :style="{ height: 120 * 0.3 + 'px', left: '73px', width: '846px' }"
+    />
+    <img
+      src="@/assets/newImgs/pumpGY/water.png"
+      alt="右"
+      class="waterFlow"
+      :style="{ height: 120 * 0.35 + 'px', right: '75px', width: '555px' }"
+    />
+
+    <!-- 实时数据 -->
+    <div class="realData">
+      <p style="left: 360px; bottom: 175px">实时水深：0.3米</p>
+      <p style="right: 300px; bottom: 175px">实时水深：0.35米</p>
+    </div>
+
+    <!-- 监测数据 -->
+    <div style="left: 170px; bottom: 455px" class="tipsM">
+      <span>流量：0.36 m/s</span>
+      <span>SS：67 mg/L</span>
+    </div>
+    <div style="left: 570px; bottom: 455px" class="tipsM">
+      <span>流量：0.36 m/s</span>
+      <span>SS：67 mg/L</span>
+    </div>
+    <div style="left: 800px; bottom: 455px" class="tipsM">
+      <span>流量：0.36 m/s</span>
+      <span>SS：67 mg/L</span>
+    </div>
+    <div style="left: 950px; bottom: 455px" class="tipsM">
+      <span>流量：0.36 m/s</span>
+      <span>SS：67 mg/L</span>
+    </div>
+    <div style="right: 140px; bottom: 455px" class="tipsM">
+      <span>流量：0.36 m/s</span>
+      <span>SS：67 mg/L</span>
+    </div>
+
+    <!-- 海绵设施 -->
+    <img
+      src="@/assets/newImgs/pumpGY/hmSS.png"
+      alt="海绵设施"
+      style="left: 530px; bottom: 385px; width: 63px; height: 63px; cursor: pointer"
+      @click="checkHmSS"
+      class="equipM"
+    />
+
+    <!-- 监测设备 -->
+    <img src="@/assets/newImgs/pumpGY/equipL.png" alt="设备左1" style="left: 130px; bottom: 75px" class="equipM" />
+    <img src="@/assets/newImgs/pumpGY/equipL.png" alt="设备左1" style="left: 540px; bottom: 75px" class="equipM" />
+    <img
+      src="@/assets/newImgs/pumpGY/equipL.png"
+      alt="设备右1"
+      style="right: 490px; bottom: 75px; transform: rotateY(180deg)"
+      class="equipM"
+    />
+    <img
+      src="@/assets/newImgs/pumpGY/equipL.png"
+      alt="设备右1"
+      style="right: 175px; bottom: 75px; transform: rotateY(180deg)"
+      class="equipM"
+    />
+
+    <!-- 汽车 -->
+    <img src="@/assets/newImgs/pumpGY/car1.png" alt="车1" style="bottom: 525px; width: 148px; height: 70px" class="carFX animate1" />
+    <img src="@/assets/newImgs/pumpGY/car2.png" alt="车2" style="bottom: 495px; width: 134px; height: 57px" class="carFX animate2" />
+    <img src="@/assets/newImgs/pumpGY/car4.png" alt="车4" style="bottom: 455px; width: 137px; height: 50px" class="carFX animate3" />
+    <img src="@/assets/newImgs/pumpGY/car5.png" alt="车5" style="bottom: 425px; width: 142px; height: 51px" class="carFX animate4" />
+    <img src="@/assets/newImgs/pumpGY/car3.png" alt="车3" style="bottom: 415px; width: 48px; height: 46px" class="carFX animate3" />
+  </div>
+</template>
+
+<script setup>
+import CanvasRainP from '@/views/sponeScreen/projectHM/canvasRainP.vue';
+import bus from '@/bus';
+const { proxy } = getCurrentInstance();
+
+// 海绵设施点击
+function checkHmSS() {
+  bus.emit('checkSSFX', {});
+}
+
+onMounted(() => {});
+</script>
+
+<style lang="scss">
+// prettier-ignore
+.projectFXPage {
+  width: 1600PX;
+  height: 800PX;
+  margin-bottom:20PX;
+  background: url('@/assets/newImgs/pumpGY/projectBg.jpg') no-repeat;
+  background-size: 100% 100%;
+  position:relative;
+  .equipM{
+    position: absolute; 
+    z-index: 30;
+    width:71PX;
+    height:329PX;
+  }
+  .carFX{
+    position: absolute; 
+    z-index: 10;
+  }
+  .animate1{
+    animation: carAni1 linear 10s infinite;
+    @keyframes carAni1 {
+      0%{right:5%;}
+      100%{right:92%}
+    }
+  }
+  .animate2{
+    animation: carAni2 ease-in-out 8s infinite;
+    @keyframes carAni2 {
+      0%{right:5%;}
+      100%{right:90%}
+    }
+  }
+  .animate3{
+    animation: carAni3 ease-in-out 8s infinite;
+    @keyframes carAni3 {
+      0%{left:5%;}
+      100%{left:90%}
+    }
+  }
+  .animate4{
+    animation: carAni4 linear 10s infinite;
+    @keyframes carAni4 {
+      0%{left:5%;}
+      100%{left:90%}
+    }
+  }
+  .animate3{
+    animation: carAni5 linear 20s infinite;
+    @keyframes carAni5 {
+      0%{left:0%;}
+      100%{left:94%}
+    }
+  }
+  .suggest{
+    position:absolute;
+    z-index: 20;
+    right:155PX;
+    top:-10PX;
+    width:421PX;
+    height:251PX;
+    background: url('@/assets/newImgs/pumpGY/tipsBg.png') no-repeat;
+    background-size: 100% 100%;
+    font-size:14PX;
+    padding:20PX;
+    font-family: Source Han Sans CN;
+    font-weight: 400;
+    color: #C1E8FF;
+    line-height: 24PX;
+    .iconSug{
+      cursor: pointer;
+      position:absolute;
+      top:20PX;
+      right:20PX;
+      width: 25PX;
+      height: 25PX;
+      svg{
+        width: 25PX;
+        height: 25PX;
+      }
+    }
+    .center{
+      margin:10PX 30px 10PX 0px;
+      text-align: center;
+      font-size:15PX;
+      color:#fff;
+    }
+    .cont{
+      padding-bottom:5PX;
+      margin-bottom:5PX;
+      border-bottom: 1px dashed #6A8CAE;
+      .numBg{
+        width:24PX;
+        height: 18PX;
+        line-height: 18PX;
+        display: inline-block;
+        background: url('@/assets/newImgs/pumpGY/numBg.png') no-repeat;
+        background-size: 100% 100%;
+        text-align: center;
+        color: #FFD200;
+      }
+    }
+    span{
+      font-weight: bold;
+    }
+  }
+  .waterFlow{
+    position:absolute;
+    z-index: 10;
+    bottom:60PX;
+  }
+    
+  .tipsM{
+    position:absolute;
+    z-index: 20;
+    background: linear-gradient(0deg, #057AD4 0%, #015080 100%);
+    border: 1px solid #057AD4;
+    padding:10PX;
+    color:#fff;
+    font-size:16PX;
+    width:140PX;
+    span{
+      width:100%;
+      display: inline-block;
+    }
+  }
+  .realData{
+    color:#fff;
+    p{
+      position:absolute;
+      z-index: 10;
+      width:160PX;
+      height: 26PX;
+      line-height: 26PX;
+      text-align: center;
+      background: #004DE0;
+      border-radius: 13PX;
+      font-size:16PX;
+    }
+    
+  }
+  .waterFX{
+    img{
+      position:absolute;
+      z-index: 10;
+    }
+  }
+}
+</style>
diff --git a/src/views/sponeScreen/projectHM/projectSSDX.vue b/src/views/sponeScreen/projectHM/projectSSDX.vue
index 9b58f47..19fd74d 100644
--- a/src/views/sponeScreen/projectHM/projectSSDX.vue
+++ b/src/views/sponeScreen/projectHM/projectSSDX.vue
@@ -27,7 +27,7 @@
     <img src="@/assets/newImgs/pumpGY/suggestP.png" alt="过程图片" class="progressP" v-if="showProgress" />
 
     <!-- 降雨效果 -->
-    <CanvasRain :width="1382" :height="800"></CanvasRain>
+    <CanvasRainSS :width="1382" :height="800"></CanvasRainSS>
 
     <!-- 水位 水流 -->
     <img src="@/assets/newImgs/pumpGY/water.png" alt="" class="waterFlow" :style="{ height: 30 + 'px' }" />
@@ -65,7 +65,7 @@
 </template>
 
 <script setup>
-import CanvasRain from '@/views/sponeScreen/projectHM/canvasRain.vue';
+import CanvasRainSS from '@/views/sponeScreen/projectHM/canvasRainSS.vue';
 const { proxy } = getCurrentInstance();
 const showProgress = ref(false);