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

diff --git a/src/assets/newImgs/HMScreen/pipeBg.png b/src/assets/newImgs/HMScreen/pipeBg.png
new file mode 100644
index 0000000..d73e9a9
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/pipeBg.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/pipeMonitor.gif b/src/assets/newImgs/HMScreen/pipeMonitor.gif
new file mode 100644
index 0000000..8ccebac
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/pipeMonitor.gif
Binary files differ

diff --git a/src/assets/newImgs/HMScreen/pipeBg.png b/src/assets/newImgs/HMScreen/pipeBg.png
new file mode 100644
index 0000000..d73e9a9
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/pipeBg.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/pipeMonitor.gif b/src/assets/newImgs/HMScreen/pipeMonitor.gif
new file mode 100644
index 0000000..8ccebac
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/pipeMonitor.gif
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/water.gif b/src/assets/newImgs/HMScreen/water.gif
new file mode 100644
index 0000000..040d837
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/water.gif
Binary files differ

diff --git a/src/assets/newImgs/HMScreen/pipeBg.png b/src/assets/newImgs/HMScreen/pipeBg.png
new file mode 100644
index 0000000..d73e9a9
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/pipeBg.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/pipeMonitor.gif b/src/assets/newImgs/HMScreen/pipeMonitor.gif
new file mode 100644
index 0000000..8ccebac
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/pipeMonitor.gif
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/water.gif b/src/assets/newImgs/HMScreen/water.gif
new file mode 100644
index 0000000..040d837
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/water.gif
Binary files differ
diff --git a/src/views/sponeScreen/HaiMianScreen/index.vue b/src/views/sponeScreen/HaiMianScreen/index.vue
index a562224..3762d58 100644
--- a/src/views/sponeScreen/HaiMianScreen/index.vue
+++ b/src/views/sponeScreen/HaiMianScreen/index.vue
@@ -127,10 +127,16 @@
     <el-dialog v-model="showProjectSSDX" title="典型项目设施分析" style="width: 1430px" append-to-body>
       <ProjectSSDX :projectParams="projectParamsSS" v-if="showProjectSSDX"></ProjectSSDX>
     </el-dialog>
+
+    <!-- 18个内涝积水点弹窗 -->
+    <el-dialog v-model="showJSD" :title="titleJSD" style="width: 900px" append-to-body>
+      <WaterLogging18 :detailJSD="detailJSD" v-if="showJSD"></WaterLogging18>
+    </el-dialog>
   </div>
 </template>
 
 <script setup>
+import WaterLogging18 from '@/views/sponeScreen/waterFlood/waterLogging18.vue'; //18个内涝积水点弹窗
 import ProjectFX from '@/views/sponeScreen/projectHM/projectFX.vue'; //典型项目分析
 import ProjectSSDX from '@/views/sponeScreen/projectHM/projectSSDX.vue'; //典型项目设施分析
 import ProjectArea from '@/views/sponeScreen/projectHM/projectArea.vue'; //分区建议
@@ -187,6 +193,9 @@
 const showProjectDX = ref(false);
 const areaObj = ref({ value: '0' });
 const pointSourceData = ref({});
+const detailJSD = ref({});
+const showJSD = ref(false);
+const titleJSD = ref('');
 // 下垫面统计
 const landArr = ref([
   { title: '水田', color: '#f8d072' },
@@ -406,6 +415,12 @@
     projectParamsSS.value = params;
     showProjectSSDX.value = true;
   });
+  // 内涝积水点点击
+  bus.on('waterLogging18', params => {
+    detailJSD.value = params;
+    titleJSD.value = (params.name || '') + ' 水位监测';
+    showJSD.value = true;
+  });
 });
 onBeforeUnmount(() => {
   bus.off('checkProjectArea');

diff --git a/src/assets/newImgs/HMScreen/pipeBg.png b/src/assets/newImgs/HMScreen/pipeBg.png
new file mode 100644
index 0000000..d73e9a9
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/pipeBg.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/pipeMonitor.gif b/src/assets/newImgs/HMScreen/pipeMonitor.gif
new file mode 100644
index 0000000..8ccebac
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/pipeMonitor.gif
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/water.gif b/src/assets/newImgs/HMScreen/water.gif
new file mode 100644
index 0000000..040d837
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/water.gif
Binary files differ
diff --git a/src/views/sponeScreen/HaiMianScreen/index.vue b/src/views/sponeScreen/HaiMianScreen/index.vue
index a562224..3762d58 100644
--- a/src/views/sponeScreen/HaiMianScreen/index.vue
+++ b/src/views/sponeScreen/HaiMianScreen/index.vue
@@ -127,10 +127,16 @@
     <el-dialog v-model="showProjectSSDX" title="典型项目设施分析" style="width: 1430px" append-to-body>
       <ProjectSSDX :projectParams="projectParamsSS" v-if="showProjectSSDX"></ProjectSSDX>
     </el-dialog>
+
+    <!-- 18个内涝积水点弹窗 -->
+    <el-dialog v-model="showJSD" :title="titleJSD" style="width: 900px" append-to-body>
+      <WaterLogging18 :detailJSD="detailJSD" v-if="showJSD"></WaterLogging18>
+    </el-dialog>
   </div>
 </template>
 
 <script setup>
+import WaterLogging18 from '@/views/sponeScreen/waterFlood/waterLogging18.vue'; //18个内涝积水点弹窗
 import ProjectFX from '@/views/sponeScreen/projectHM/projectFX.vue'; //典型项目分析
 import ProjectSSDX from '@/views/sponeScreen/projectHM/projectSSDX.vue'; //典型项目设施分析
 import ProjectArea from '@/views/sponeScreen/projectHM/projectArea.vue'; //分区建议
@@ -187,6 +193,9 @@
 const showProjectDX = ref(false);
 const areaObj = ref({ value: '0' });
 const pointSourceData = ref({});
+const detailJSD = ref({});
+const showJSD = ref(false);
+const titleJSD = ref('');
 // 下垫面统计
 const landArr = ref([
   { title: '水田', color: '#f8d072' },
@@ -406,6 +415,12 @@
     projectParamsSS.value = params;
     showProjectSSDX.value = true;
   });
+  // 内涝积水点点击
+  bus.on('waterLogging18', params => {
+    detailJSD.value = params;
+    titleJSD.value = (params.name || '') + ' 水位监测';
+    showJSD.value = true;
+  });
 });
 onBeforeUnmount(() => {
   bus.off('checkProjectArea');
diff --git a/src/views/sponeScreen/gisMF/cesiumPopup.vue b/src/views/sponeScreen/gisMF/cesiumPopup.vue
index 16bba35..cd7e9d1 100644
--- a/src/views/sponeScreen/gisMF/cesiumPopup.vue
+++ b/src/views/sponeScreen/gisMF/cesiumPopup.vue
@@ -6,7 +6,6 @@
       <div class="titleNamePP" v-if="allData.dataList.sewageName">{{ allData.dataList.sewageName }}</div>
       <div class="titleNamePP" v-if="allData.dataList.roadName">{{ allData.dataList.roadName }}</div>
       <div class="titleNamePP" v-if="allData.dataList.stName">{{ allData.dataList.stName }}</div>
-      <div class="titleNamePP" v-if="allData.dataList.waterloggingName">{{ allData.dataList.waterloggingName }}</div>
       <div class="titleNamePP" v-if="allData.dataList.materialName">{{ allData.dataList.materialName }}</div>
 
       <div class="PopupClosed">
@@ -77,28 +76,6 @@
       </div>
     </div>
 
-    <!-- 积水点 -->
-    <div class="basicInfo" v-if="allData.dataList.type == 'waterLoging'">
-      <div class="mt-10">
-        <div class="flex flex-start">
-          <div>
-            <el-date-picker
-              v-model="allData.dateTimeJSD"
-              type="daterange"
-              value-format="YYYY-MM-DD"
-              start-placeholder="开始时间"
-              end-placeholder="结束时间"
-              :clearable="false"
-              size="small"
-              style="width: 240px; margin-right: 10px"
-            />
-          </div>
-          <el-button type="primary" size="small" @click="changeDateJSD">搜索</el-button>
-        </div>
-        <div id="chartHistoryJSD" v-loading="jsdLoading"></div>
-      </div>
-    </div>
-
     <!-- 河道水位监测 -->
     <div class="basicInfo" v-if="allData.dataList.type == 'waterCourse'">
       <div class="mt-10">
@@ -186,60 +163,6 @@
   });
 }
 
-// 积水点
-let chartJSD = null;
-function changeDateJSD() {
-  allData.dataList.waterloggingName = allData.dataList.name;
-  if (!!chartJSD) chartJSD.dispose();
-  setTimeout(async () => {
-    chartJSD = echarts.init(document.getElementById('chartHistoryJSD'));
-
-    chartOption.popupRainTrend.legend.data = ['积水深度'];
-    chartOption.popupRainTrend.yAxis.name = 'cm'; //单位
-    chartOption.popupRainTrend.xAxis.data = [];
-    chartOption.popupRainTrend.xAxis.boundaryGap = true;
-    chartOption.popupRainTrend.series.name = '积水深度';
-    chartOption.popupRainTrend.series.barWidth = 3;
-    chartOption.popupRainTrend.series.data = [];
-    chartOption.popupRainTrend.graphic.invisible = false; //暂无数据
-    chartOption.popupRainTrend.graphic.style.text = '暂无内涝点积水数据';
-    chartJSD.clear();
-    chartJSD.setOption(chartOption.popupRainTrend);
-
-    // 非自建设备，暂未共享数据
-    // let params = {
-    //   startTime: allData.dateTimeJSD[0],
-    //   endTime: allData.dateTimeJSD[1],
-    //   stCode: allData.dataList['stCode'],
-    // };
-    // jsdLoading.value = true;
-    // let res = await graphicReport(params);
-    // if (res && res.code == 200) {
-    //   let datas = res.data;
-    //   chartOption.popupRainTrend.legend.data = [datas.propertyMonitorList[0].monitorPropertyName];
-    //   chartOption.popupRainTrend.yAxis.name = datas.propertyMonitorList[0].propertyUnit; //单位
-    //   chartOption.popupRainTrend.xAxis.data = datas.propertyMonitorXList;
-    //   chartOption.popupRainTrend.xAxis.boundaryGap = true;
-    //   chartOption.popupRainTrend.series.name = datas.propertyMonitorList[0].monitorPropertyName;
-    //   chartOption.popupRainTrend.series.barWidth = 3;
-    //   chartOption.popupRainTrend.series.data = datas.propertyMonitorList[0].ylist;
-    //   // 设置鼠标滚轮放大缩小展示数据区间
-    //   chartOption.popupRainTrend.dataZoom = [
-    //     { type: 'inside', startValue: datas.propertyMonitorXList[datas.propertyMonitorXList.length - 48] },
-    //   ];
-    //   if (datas.propertyMonitorXList > 0) {
-    //     chartOption.popupRainTrend.graphic.invisible = true; //暂无数据
-    //   } else {
-    //     chartOption.popupRainTrend.graphic.invisible = false; //暂无数据
-    //   }
-    //   chartOption.popupRainTrend.graphic.invisible = true; //暂无数据
-    //   chartJSD.clear();
-    //   chartJSD.setOption(chartOption.popupRainTrend);
-    //   jsdLoading.value = false;
-    // }
-  });
-}
-
 // 雨量站弹窗内容
 const changeDate = () => {
   getSuperViseData();
@@ -414,9 +337,10 @@
     allData.popupShow = true;
     if (allData.dataList.siteType == 'rain') changeDate(); //雨量站曲线图
     if (allData.dataList.type == 'waterCourse') changeDateSW(); //河道水位计
-    //内涝积水点
+    //内涝积水点 18个
     if (allData.dataList.type == 'waterLoging') {
-      changeDateJSD();
+      allData.popupShow = false;
+      bus.emit('waterLogging18', allData.dataList);
     }
   });
 });

diff --git a/src/assets/newImgs/HMScreen/pipeBg.png b/src/assets/newImgs/HMScreen/pipeBg.png
new file mode 100644
index 0000000..d73e9a9
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/pipeBg.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/pipeMonitor.gif b/src/assets/newImgs/HMScreen/pipeMonitor.gif
new file mode 100644
index 0000000..8ccebac
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/pipeMonitor.gif
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/water.gif b/src/assets/newImgs/HMScreen/water.gif
new file mode 100644
index 0000000..040d837
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/water.gif
Binary files differ
diff --git a/src/views/sponeScreen/HaiMianScreen/index.vue b/src/views/sponeScreen/HaiMianScreen/index.vue
index a562224..3762d58 100644
--- a/src/views/sponeScreen/HaiMianScreen/index.vue
+++ b/src/views/sponeScreen/HaiMianScreen/index.vue
@@ -127,10 +127,16 @@
     <el-dialog v-model="showProjectSSDX" title="典型项目设施分析" style="width: 1430px" append-to-body>
       <ProjectSSDX :projectParams="projectParamsSS" v-if="showProjectSSDX"></ProjectSSDX>
     </el-dialog>
+
+    <!-- 18个内涝积水点弹窗 -->
+    <el-dialog v-model="showJSD" :title="titleJSD" style="width: 900px" append-to-body>
+      <WaterLogging18 :detailJSD="detailJSD" v-if="showJSD"></WaterLogging18>
+    </el-dialog>
   </div>
 </template>
 
 <script setup>
+import WaterLogging18 from '@/views/sponeScreen/waterFlood/waterLogging18.vue'; //18个内涝积水点弹窗
 import ProjectFX from '@/views/sponeScreen/projectHM/projectFX.vue'; //典型项目分析
 import ProjectSSDX from '@/views/sponeScreen/projectHM/projectSSDX.vue'; //典型项目设施分析
 import ProjectArea from '@/views/sponeScreen/projectHM/projectArea.vue'; //分区建议
@@ -187,6 +193,9 @@
 const showProjectDX = ref(false);
 const areaObj = ref({ value: '0' });
 const pointSourceData = ref({});
+const detailJSD = ref({});
+const showJSD = ref(false);
+const titleJSD = ref('');
 // 下垫面统计
 const landArr = ref([
   { title: '水田', color: '#f8d072' },
@@ -406,6 +415,12 @@
     projectParamsSS.value = params;
     showProjectSSDX.value = true;
   });
+  // 内涝积水点点击
+  bus.on('waterLogging18', params => {
+    detailJSD.value = params;
+    titleJSD.value = (params.name || '') + ' 水位监测';
+    showJSD.value = true;
+  });
 });
 onBeforeUnmount(() => {
   bus.off('checkProjectArea');
diff --git a/src/views/sponeScreen/gisMF/cesiumPopup.vue b/src/views/sponeScreen/gisMF/cesiumPopup.vue
index 16bba35..cd7e9d1 100644
--- a/src/views/sponeScreen/gisMF/cesiumPopup.vue
+++ b/src/views/sponeScreen/gisMF/cesiumPopup.vue
@@ -6,7 +6,6 @@
       <div class="titleNamePP" v-if="allData.dataList.sewageName">{{ allData.dataList.sewageName }}</div>
       <div class="titleNamePP" v-if="allData.dataList.roadName">{{ allData.dataList.roadName }}</div>
       <div class="titleNamePP" v-if="allData.dataList.stName">{{ allData.dataList.stName }}</div>
-      <div class="titleNamePP" v-if="allData.dataList.waterloggingName">{{ allData.dataList.waterloggingName }}</div>
       <div class="titleNamePP" v-if="allData.dataList.materialName">{{ allData.dataList.materialName }}</div>
 
       <div class="PopupClosed">
@@ -77,28 +76,6 @@
       </div>
     </div>
 
-    <!-- 积水点 -->
-    <div class="basicInfo" v-if="allData.dataList.type == 'waterLoging'">
-      <div class="mt-10">
-        <div class="flex flex-start">
-          <div>
-            <el-date-picker
-              v-model="allData.dateTimeJSD"
-              type="daterange"
-              value-format="YYYY-MM-DD"
-              start-placeholder="开始时间"
-              end-placeholder="结束时间"
-              :clearable="false"
-              size="small"
-              style="width: 240px; margin-right: 10px"
-            />
-          </div>
-          <el-button type="primary" size="small" @click="changeDateJSD">搜索</el-button>
-        </div>
-        <div id="chartHistoryJSD" v-loading="jsdLoading"></div>
-      </div>
-    </div>
-
     <!-- 河道水位监测 -->
     <div class="basicInfo" v-if="allData.dataList.type == 'waterCourse'">
       <div class="mt-10">
@@ -186,60 +163,6 @@
   });
 }
 
-// 积水点
-let chartJSD = null;
-function changeDateJSD() {
-  allData.dataList.waterloggingName = allData.dataList.name;
-  if (!!chartJSD) chartJSD.dispose();
-  setTimeout(async () => {
-    chartJSD = echarts.init(document.getElementById('chartHistoryJSD'));
-
-    chartOption.popupRainTrend.legend.data = ['积水深度'];
-    chartOption.popupRainTrend.yAxis.name = 'cm'; //单位
-    chartOption.popupRainTrend.xAxis.data = [];
-    chartOption.popupRainTrend.xAxis.boundaryGap = true;
-    chartOption.popupRainTrend.series.name = '积水深度';
-    chartOption.popupRainTrend.series.barWidth = 3;
-    chartOption.popupRainTrend.series.data = [];
-    chartOption.popupRainTrend.graphic.invisible = false; //暂无数据
-    chartOption.popupRainTrend.graphic.style.text = '暂无内涝点积水数据';
-    chartJSD.clear();
-    chartJSD.setOption(chartOption.popupRainTrend);
-
-    // 非自建设备，暂未共享数据
-    // let params = {
-    //   startTime: allData.dateTimeJSD[0],
-    //   endTime: allData.dateTimeJSD[1],
-    //   stCode: allData.dataList['stCode'],
-    // };
-    // jsdLoading.value = true;
-    // let res = await graphicReport(params);
-    // if (res && res.code == 200) {
-    //   let datas = res.data;
-    //   chartOption.popupRainTrend.legend.data = [datas.propertyMonitorList[0].monitorPropertyName];
-    //   chartOption.popupRainTrend.yAxis.name = datas.propertyMonitorList[0].propertyUnit; //单位
-    //   chartOption.popupRainTrend.xAxis.data = datas.propertyMonitorXList;
-    //   chartOption.popupRainTrend.xAxis.boundaryGap = true;
-    //   chartOption.popupRainTrend.series.name = datas.propertyMonitorList[0].monitorPropertyName;
-    //   chartOption.popupRainTrend.series.barWidth = 3;
-    //   chartOption.popupRainTrend.series.data = datas.propertyMonitorList[0].ylist;
-    //   // 设置鼠标滚轮放大缩小展示数据区间
-    //   chartOption.popupRainTrend.dataZoom = [
-    //     { type: 'inside', startValue: datas.propertyMonitorXList[datas.propertyMonitorXList.length - 48] },
-    //   ];
-    //   if (datas.propertyMonitorXList > 0) {
-    //     chartOption.popupRainTrend.graphic.invisible = true; //暂无数据
-    //   } else {
-    //     chartOption.popupRainTrend.graphic.invisible = false; //暂无数据
-    //   }
-    //   chartOption.popupRainTrend.graphic.invisible = true; //暂无数据
-    //   chartJSD.clear();
-    //   chartJSD.setOption(chartOption.popupRainTrend);
-    //   jsdLoading.value = false;
-    // }
-  });
-}
-
 // 雨量站弹窗内容
 const changeDate = () => {
   getSuperViseData();
@@ -414,9 +337,10 @@
     allData.popupShow = true;
     if (allData.dataList.siteType == 'rain') changeDate(); //雨量站曲线图
     if (allData.dataList.type == 'waterCourse') changeDateSW(); //河道水位计
-    //内涝积水点
+    //内涝积水点 18个
     if (allData.dataList.type == 'waterLoging') {
-      changeDateJSD();
+      allData.popupShow = false;
+      bus.emit('waterLogging18', allData.dataList);
     }
   });
 });
diff --git a/src/views/sponeScreen/gisMF/legendKF.vue b/src/views/sponeScreen/gisMF/legendKF.vue
index 2ce595e..73dd686 100644
--- a/src/views/sponeScreen/gisMF/legendKF.vue
+++ b/src/views/sponeScreen/gisMF/legendKF.vue
@@ -38,12 +38,8 @@
 import { getImageUrl } from '@/utils/ruoyi';
 import cesiumMapCommonLegend from './cesiumMapLegend.js';
 import newfiberMapBoxVectorLayer from './mapboxVectorLayer.js';
-import changeMapStyle from './changeMapStyle.js';
 import topography from '@/assets/newImgs/topography.png';
-import cesiumPaiShuiArea from './cesiumPaiShuiArea.js';
-import newfiberVectorLayer from './newfiberVectorLayer.js';
 import bus from '@/bus/index';
-import { realtimeRainfallStatistics } from '@/api/floodSys/oneMap.js';
 import { nextTick } from 'vue';
 import rainStation_icon from '@/assets/cesiumMap/legendIcon/rainStation_icon.png';
 import { rainRainlist } from '@/api/newPageline/riverCapacity.js';
@@ -53,7 +49,6 @@
 const allMapList = ref([]);
 const showLegend = ref(false);
 const builtCityTimer = ref(null);
-const cityAreaTimer = ref(null);
 const centerCityTimer = ref(null);
 const rainDataTimer = ref(null); //雨量站实时刷新
 // 面板内容展开收起控制
@@ -65,7 +60,6 @@
 watch(
   () => props.showLegend,
   () => {
-    // console.log('showLegend---', props.showLegend);
     showLegend.value = props.showLegend;
   },
   { immediate: true }

diff --git a/src/assets/newImgs/HMScreen/pipeBg.png b/src/assets/newImgs/HMScreen/pipeBg.png
new file mode 100644
index 0000000..d73e9a9
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/pipeBg.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/pipeMonitor.gif b/src/assets/newImgs/HMScreen/pipeMonitor.gif
new file mode 100644
index 0000000..8ccebac
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/pipeMonitor.gif
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/water.gif b/src/assets/newImgs/HMScreen/water.gif
new file mode 100644
index 0000000..040d837
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/water.gif
Binary files differ
diff --git a/src/views/sponeScreen/HaiMianScreen/index.vue b/src/views/sponeScreen/HaiMianScreen/index.vue
index a562224..3762d58 100644
--- a/src/views/sponeScreen/HaiMianScreen/index.vue
+++ b/src/views/sponeScreen/HaiMianScreen/index.vue
@@ -127,10 +127,16 @@
     <el-dialog v-model="showProjectSSDX" title="典型项目设施分析" style="width: 1430px" append-to-body>
       <ProjectSSDX :projectParams="projectParamsSS" v-if="showProjectSSDX"></ProjectSSDX>
     </el-dialog>
+
+    <!-- 18个内涝积水点弹窗 -->
+    <el-dialog v-model="showJSD" :title="titleJSD" style="width: 900px" append-to-body>
+      <WaterLogging18 :detailJSD="detailJSD" v-if="showJSD"></WaterLogging18>
+    </el-dialog>
   </div>
 </template>
 
 <script setup>
+import WaterLogging18 from '@/views/sponeScreen/waterFlood/waterLogging18.vue'; //18个内涝积水点弹窗
 import ProjectFX from '@/views/sponeScreen/projectHM/projectFX.vue'; //典型项目分析
 import ProjectSSDX from '@/views/sponeScreen/projectHM/projectSSDX.vue'; //典型项目设施分析
 import ProjectArea from '@/views/sponeScreen/projectHM/projectArea.vue'; //分区建议
@@ -187,6 +193,9 @@
 const showProjectDX = ref(false);
 const areaObj = ref({ value: '0' });
 const pointSourceData = ref({});
+const detailJSD = ref({});
+const showJSD = ref(false);
+const titleJSD = ref('');
 // 下垫面统计
 const landArr = ref([
   { title: '水田', color: '#f8d072' },
@@ -406,6 +415,12 @@
     projectParamsSS.value = params;
     showProjectSSDX.value = true;
   });
+  // 内涝积水点点击
+  bus.on('waterLogging18', params => {
+    detailJSD.value = params;
+    titleJSD.value = (params.name || '') + ' 水位监测';
+    showJSD.value = true;
+  });
 });
 onBeforeUnmount(() => {
   bus.off('checkProjectArea');
diff --git a/src/views/sponeScreen/gisMF/cesiumPopup.vue b/src/views/sponeScreen/gisMF/cesiumPopup.vue
index 16bba35..cd7e9d1 100644
--- a/src/views/sponeScreen/gisMF/cesiumPopup.vue
+++ b/src/views/sponeScreen/gisMF/cesiumPopup.vue
@@ -6,7 +6,6 @@
       <div class="titleNamePP" v-if="allData.dataList.sewageName">{{ allData.dataList.sewageName }}</div>
       <div class="titleNamePP" v-if="allData.dataList.roadName">{{ allData.dataList.roadName }}</div>
       <div class="titleNamePP" v-if="allData.dataList.stName">{{ allData.dataList.stName }}</div>
-      <div class="titleNamePP" v-if="allData.dataList.waterloggingName">{{ allData.dataList.waterloggingName }}</div>
       <div class="titleNamePP" v-if="allData.dataList.materialName">{{ allData.dataList.materialName }}</div>
 
       <div class="PopupClosed">
@@ -77,28 +76,6 @@
       </div>
     </div>
 
-    <!-- 积水点 -->
-    <div class="basicInfo" v-if="allData.dataList.type == 'waterLoging'">
-      <div class="mt-10">
-        <div class="flex flex-start">
-          <div>
-            <el-date-picker
-              v-model="allData.dateTimeJSD"
-              type="daterange"
-              value-format="YYYY-MM-DD"
-              start-placeholder="开始时间"
-              end-placeholder="结束时间"
-              :clearable="false"
-              size="small"
-              style="width: 240px; margin-right: 10px"
-            />
-          </div>
-          <el-button type="primary" size="small" @click="changeDateJSD">搜索</el-button>
-        </div>
-        <div id="chartHistoryJSD" v-loading="jsdLoading"></div>
-      </div>
-    </div>
-
     <!-- 河道水位监测 -->
     <div class="basicInfo" v-if="allData.dataList.type == 'waterCourse'">
       <div class="mt-10">
@@ -186,60 +163,6 @@
   });
 }
 
-// 积水点
-let chartJSD = null;
-function changeDateJSD() {
-  allData.dataList.waterloggingName = allData.dataList.name;
-  if (!!chartJSD) chartJSD.dispose();
-  setTimeout(async () => {
-    chartJSD = echarts.init(document.getElementById('chartHistoryJSD'));
-
-    chartOption.popupRainTrend.legend.data = ['积水深度'];
-    chartOption.popupRainTrend.yAxis.name = 'cm'; //单位
-    chartOption.popupRainTrend.xAxis.data = [];
-    chartOption.popupRainTrend.xAxis.boundaryGap = true;
-    chartOption.popupRainTrend.series.name = '积水深度';
-    chartOption.popupRainTrend.series.barWidth = 3;
-    chartOption.popupRainTrend.series.data = [];
-    chartOption.popupRainTrend.graphic.invisible = false; //暂无数据
-    chartOption.popupRainTrend.graphic.style.text = '暂无内涝点积水数据';
-    chartJSD.clear();
-    chartJSD.setOption(chartOption.popupRainTrend);
-
-    // 非自建设备，暂未共享数据
-    // let params = {
-    //   startTime: allData.dateTimeJSD[0],
-    //   endTime: allData.dateTimeJSD[1],
-    //   stCode: allData.dataList['stCode'],
-    // };
-    // jsdLoading.value = true;
-    // let res = await graphicReport(params);
-    // if (res && res.code == 200) {
-    //   let datas = res.data;
-    //   chartOption.popupRainTrend.legend.data = [datas.propertyMonitorList[0].monitorPropertyName];
-    //   chartOption.popupRainTrend.yAxis.name = datas.propertyMonitorList[0].propertyUnit; //单位
-    //   chartOption.popupRainTrend.xAxis.data = datas.propertyMonitorXList;
-    //   chartOption.popupRainTrend.xAxis.boundaryGap = true;
-    //   chartOption.popupRainTrend.series.name = datas.propertyMonitorList[0].monitorPropertyName;
-    //   chartOption.popupRainTrend.series.barWidth = 3;
-    //   chartOption.popupRainTrend.series.data = datas.propertyMonitorList[0].ylist;
-    //   // 设置鼠标滚轮放大缩小展示数据区间
-    //   chartOption.popupRainTrend.dataZoom = [
-    //     { type: 'inside', startValue: datas.propertyMonitorXList[datas.propertyMonitorXList.length - 48] },
-    //   ];
-    //   if (datas.propertyMonitorXList > 0) {
-    //     chartOption.popupRainTrend.graphic.invisible = true; //暂无数据
-    //   } else {
-    //     chartOption.popupRainTrend.graphic.invisible = false; //暂无数据
-    //   }
-    //   chartOption.popupRainTrend.graphic.invisible = true; //暂无数据
-    //   chartJSD.clear();
-    //   chartJSD.setOption(chartOption.popupRainTrend);
-    //   jsdLoading.value = false;
-    // }
-  });
-}
-
 // 雨量站弹窗内容
 const changeDate = () => {
   getSuperViseData();
@@ -414,9 +337,10 @@
     allData.popupShow = true;
     if (allData.dataList.siteType == 'rain') changeDate(); //雨量站曲线图
     if (allData.dataList.type == 'waterCourse') changeDateSW(); //河道水位计
-    //内涝积水点
+    //内涝积水点 18个
     if (allData.dataList.type == 'waterLoging') {
-      changeDateJSD();
+      allData.popupShow = false;
+      bus.emit('waterLogging18', allData.dataList);
     }
   });
 });
diff --git a/src/views/sponeScreen/gisMF/legendKF.vue b/src/views/sponeScreen/gisMF/legendKF.vue
index 2ce595e..73dd686 100644
--- a/src/views/sponeScreen/gisMF/legendKF.vue
+++ b/src/views/sponeScreen/gisMF/legendKF.vue
@@ -38,12 +38,8 @@
 import { getImageUrl } from '@/utils/ruoyi';
 import cesiumMapCommonLegend from './cesiumMapLegend.js';
 import newfiberMapBoxVectorLayer from './mapboxVectorLayer.js';
-import changeMapStyle from './changeMapStyle.js';
 import topography from '@/assets/newImgs/topography.png';
-import cesiumPaiShuiArea from './cesiumPaiShuiArea.js';
-import newfiberVectorLayer from './newfiberVectorLayer.js';
 import bus from '@/bus/index';
-import { realtimeRainfallStatistics } from '@/api/floodSys/oneMap.js';
 import { nextTick } from 'vue';
 import rainStation_icon from '@/assets/cesiumMap/legendIcon/rainStation_icon.png';
 import { rainRainlist } from '@/api/newPageline/riverCapacity.js';
@@ -53,7 +49,6 @@
 const allMapList = ref([]);
 const showLegend = ref(false);
 const builtCityTimer = ref(null);
-const cityAreaTimer = ref(null);
 const centerCityTimer = ref(null);
 const rainDataTimer = ref(null); //雨量站实时刷新
 // 面板内容展开收起控制
@@ -65,7 +60,6 @@
 watch(
   () => props.showLegend,
   () => {
-    // console.log('showLegend---', props.showLegend);
     showLegend.value = props.showLegend;
   },
   { immediate: true }
diff --git a/src/views/sponeScreen/waterFlood/index.vue b/src/views/sponeScreen/waterFlood/index.vue
index 98f6ce4..ef1b58b 100644
--- a/src/views/sponeScreen/waterFlood/index.vue
+++ b/src/views/sponeScreen/waterFlood/index.vue
@@ -91,7 +91,7 @@
 // 实时报警
 function realDataWarn() {
   rtuWarnRecordRealtimeDetail().then(res => {
-    console.log('实时告警数据---', res);
+    console.log('实时告警数据---', res.data);
     let datas = res.data || [];
     if (datas.length > 0) {
       // 渲染报警图层

diff --git a/src/assets/newImgs/HMScreen/pipeBg.png b/src/assets/newImgs/HMScreen/pipeBg.png
new file mode 100644
index 0000000..d73e9a9
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/pipeBg.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/pipeMonitor.gif b/src/assets/newImgs/HMScreen/pipeMonitor.gif
new file mode 100644
index 0000000..8ccebac
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/pipeMonitor.gif
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/water.gif b/src/assets/newImgs/HMScreen/water.gif
new file mode 100644
index 0000000..040d837
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/water.gif
Binary files differ
diff --git a/src/views/sponeScreen/HaiMianScreen/index.vue b/src/views/sponeScreen/HaiMianScreen/index.vue
index a562224..3762d58 100644
--- a/src/views/sponeScreen/HaiMianScreen/index.vue
+++ b/src/views/sponeScreen/HaiMianScreen/index.vue
@@ -127,10 +127,16 @@
     <el-dialog v-model="showProjectSSDX" title="典型项目设施分析" style="width: 1430px" append-to-body>
       <ProjectSSDX :projectParams="projectParamsSS" v-if="showProjectSSDX"></ProjectSSDX>
     </el-dialog>
+
+    <!-- 18个内涝积水点弹窗 -->
+    <el-dialog v-model="showJSD" :title="titleJSD" style="width: 900px" append-to-body>
+      <WaterLogging18 :detailJSD="detailJSD" v-if="showJSD"></WaterLogging18>
+    </el-dialog>
   </div>
 </template>
 
 <script setup>
+import WaterLogging18 from '@/views/sponeScreen/waterFlood/waterLogging18.vue'; //18个内涝积水点弹窗
 import ProjectFX from '@/views/sponeScreen/projectHM/projectFX.vue'; //典型项目分析
 import ProjectSSDX from '@/views/sponeScreen/projectHM/projectSSDX.vue'; //典型项目设施分析
 import ProjectArea from '@/views/sponeScreen/projectHM/projectArea.vue'; //分区建议
@@ -187,6 +193,9 @@
 const showProjectDX = ref(false);
 const areaObj = ref({ value: '0' });
 const pointSourceData = ref({});
+const detailJSD = ref({});
+const showJSD = ref(false);
+const titleJSD = ref('');
 // 下垫面统计
 const landArr = ref([
   { title: '水田', color: '#f8d072' },
@@ -406,6 +415,12 @@
     projectParamsSS.value = params;
     showProjectSSDX.value = true;
   });
+  // 内涝积水点点击
+  bus.on('waterLogging18', params => {
+    detailJSD.value = params;
+    titleJSD.value = (params.name || '') + ' 水位监测';
+    showJSD.value = true;
+  });
 });
 onBeforeUnmount(() => {
   bus.off('checkProjectArea');
diff --git a/src/views/sponeScreen/gisMF/cesiumPopup.vue b/src/views/sponeScreen/gisMF/cesiumPopup.vue
index 16bba35..cd7e9d1 100644
--- a/src/views/sponeScreen/gisMF/cesiumPopup.vue
+++ b/src/views/sponeScreen/gisMF/cesiumPopup.vue
@@ -6,7 +6,6 @@
       <div class="titleNamePP" v-if="allData.dataList.sewageName">{{ allData.dataList.sewageName }}</div>
       <div class="titleNamePP" v-if="allData.dataList.roadName">{{ allData.dataList.roadName }}</div>
       <div class="titleNamePP" v-if="allData.dataList.stName">{{ allData.dataList.stName }}</div>
-      <div class="titleNamePP" v-if="allData.dataList.waterloggingName">{{ allData.dataList.waterloggingName }}</div>
       <div class="titleNamePP" v-if="allData.dataList.materialName">{{ allData.dataList.materialName }}</div>
 
       <div class="PopupClosed">
@@ -77,28 +76,6 @@
       </div>
     </div>
 
-    <!-- 积水点 -->
-    <div class="basicInfo" v-if="allData.dataList.type == 'waterLoging'">
-      <div class="mt-10">
-        <div class="flex flex-start">
-          <div>
-            <el-date-picker
-              v-model="allData.dateTimeJSD"
-              type="daterange"
-              value-format="YYYY-MM-DD"
-              start-placeholder="开始时间"
-              end-placeholder="结束时间"
-              :clearable="false"
-              size="small"
-              style="width: 240px; margin-right: 10px"
-            />
-          </div>
-          <el-button type="primary" size="small" @click="changeDateJSD">搜索</el-button>
-        </div>
-        <div id="chartHistoryJSD" v-loading="jsdLoading"></div>
-      </div>
-    </div>
-
     <!-- 河道水位监测 -->
     <div class="basicInfo" v-if="allData.dataList.type == 'waterCourse'">
       <div class="mt-10">
@@ -186,60 +163,6 @@
   });
 }
 
-// 积水点
-let chartJSD = null;
-function changeDateJSD() {
-  allData.dataList.waterloggingName = allData.dataList.name;
-  if (!!chartJSD) chartJSD.dispose();
-  setTimeout(async () => {
-    chartJSD = echarts.init(document.getElementById('chartHistoryJSD'));
-
-    chartOption.popupRainTrend.legend.data = ['积水深度'];
-    chartOption.popupRainTrend.yAxis.name = 'cm'; //单位
-    chartOption.popupRainTrend.xAxis.data = [];
-    chartOption.popupRainTrend.xAxis.boundaryGap = true;
-    chartOption.popupRainTrend.series.name = '积水深度';
-    chartOption.popupRainTrend.series.barWidth = 3;
-    chartOption.popupRainTrend.series.data = [];
-    chartOption.popupRainTrend.graphic.invisible = false; //暂无数据
-    chartOption.popupRainTrend.graphic.style.text = '暂无内涝点积水数据';
-    chartJSD.clear();
-    chartJSD.setOption(chartOption.popupRainTrend);
-
-    // 非自建设备，暂未共享数据
-    // let params = {
-    //   startTime: allData.dateTimeJSD[0],
-    //   endTime: allData.dateTimeJSD[1],
-    //   stCode: allData.dataList['stCode'],
-    // };
-    // jsdLoading.value = true;
-    // let res = await graphicReport(params);
-    // if (res && res.code == 200) {
-    //   let datas = res.data;
-    //   chartOption.popupRainTrend.legend.data = [datas.propertyMonitorList[0].monitorPropertyName];
-    //   chartOption.popupRainTrend.yAxis.name = datas.propertyMonitorList[0].propertyUnit; //单位
-    //   chartOption.popupRainTrend.xAxis.data = datas.propertyMonitorXList;
-    //   chartOption.popupRainTrend.xAxis.boundaryGap = true;
-    //   chartOption.popupRainTrend.series.name = datas.propertyMonitorList[0].monitorPropertyName;
-    //   chartOption.popupRainTrend.series.barWidth = 3;
-    //   chartOption.popupRainTrend.series.data = datas.propertyMonitorList[0].ylist;
-    //   // 设置鼠标滚轮放大缩小展示数据区间
-    //   chartOption.popupRainTrend.dataZoom = [
-    //     { type: 'inside', startValue: datas.propertyMonitorXList[datas.propertyMonitorXList.length - 48] },
-    //   ];
-    //   if (datas.propertyMonitorXList > 0) {
-    //     chartOption.popupRainTrend.graphic.invisible = true; //暂无数据
-    //   } else {
-    //     chartOption.popupRainTrend.graphic.invisible = false; //暂无数据
-    //   }
-    //   chartOption.popupRainTrend.graphic.invisible = true; //暂无数据
-    //   chartJSD.clear();
-    //   chartJSD.setOption(chartOption.popupRainTrend);
-    //   jsdLoading.value = false;
-    // }
-  });
-}
-
 // 雨量站弹窗内容
 const changeDate = () => {
   getSuperViseData();
@@ -414,9 +337,10 @@
     allData.popupShow = true;
     if (allData.dataList.siteType == 'rain') changeDate(); //雨量站曲线图
     if (allData.dataList.type == 'waterCourse') changeDateSW(); //河道水位计
-    //内涝积水点
+    //内涝积水点 18个
     if (allData.dataList.type == 'waterLoging') {
-      changeDateJSD();
+      allData.popupShow = false;
+      bus.emit('waterLogging18', allData.dataList);
     }
   });
 });
diff --git a/src/views/sponeScreen/gisMF/legendKF.vue b/src/views/sponeScreen/gisMF/legendKF.vue
index 2ce595e..73dd686 100644
--- a/src/views/sponeScreen/gisMF/legendKF.vue
+++ b/src/views/sponeScreen/gisMF/legendKF.vue
@@ -38,12 +38,8 @@
 import { getImageUrl } from '@/utils/ruoyi';
 import cesiumMapCommonLegend from './cesiumMapLegend.js';
 import newfiberMapBoxVectorLayer from './mapboxVectorLayer.js';
-import changeMapStyle from './changeMapStyle.js';
 import topography from '@/assets/newImgs/topography.png';
-import cesiumPaiShuiArea from './cesiumPaiShuiArea.js';
-import newfiberVectorLayer from './newfiberVectorLayer.js';
 import bus from '@/bus/index';
-import { realtimeRainfallStatistics } from '@/api/floodSys/oneMap.js';
 import { nextTick } from 'vue';
 import rainStation_icon from '@/assets/cesiumMap/legendIcon/rainStation_icon.png';
 import { rainRainlist } from '@/api/newPageline/riverCapacity.js';
@@ -53,7 +49,6 @@
 const allMapList = ref([]);
 const showLegend = ref(false);
 const builtCityTimer = ref(null);
-const cityAreaTimer = ref(null);
 const centerCityTimer = ref(null);
 const rainDataTimer = ref(null); //雨量站实时刷新
 // 面板内容展开收起控制
@@ -65,7 +60,6 @@
 watch(
   () => props.showLegend,
   () => {
-    // console.log('showLegend---', props.showLegend);
     showLegend.value = props.showLegend;
   },
   { immediate: true }
diff --git a/src/views/sponeScreen/waterFlood/index.vue b/src/views/sponeScreen/waterFlood/index.vue
index 98f6ce4..ef1b58b 100644
--- a/src/views/sponeScreen/waterFlood/index.vue
+++ b/src/views/sponeScreen/waterFlood/index.vue
@@ -91,7 +91,7 @@
 // 实时报警
 function realDataWarn() {
   rtuWarnRecordRealtimeDetail().then(res => {
-    console.log('实时告警数据---', res);
+    console.log('实时告警数据---', res.data);
     let datas = res.data || [];
     if (datas.length > 0) {
       // 渲染报警图层
diff --git a/src/views/sponeScreen/waterFlood/pipeDetail.vue b/src/views/sponeScreen/waterFlood/pipeDetail.vue
index 4db8ce8..c7ef6c3 100644
--- a/src/views/sponeScreen/waterFlood/pipeDetail.vue
+++ b/src/views/sponeScreen/waterFlood/pipeDetail.vue
@@ -111,20 +111,7 @@
 
       <!-- 发送短信给城管局相关人员 -->
       <el-dialog v-model="dialogShow" title="监测报警反馈" width="600px" append-to-body>
-        <el-form :model="formData" label-width="100px" :rules="formRules">
-          <el-form-item label="负责人:" prop="name">
-            <el-input clearable v-model="formData.name" placeholder="请输入负责人"></el-input>
-          </el-form-item>
-          <el-form-item label="负责人电话:" prop="phone">
-            <el-input clearable v-model="formData.phone" max-length="11" placeholder="请输入负责人电话"></el-input>
-          </el-form-item>
-          <el-form-item label="短信预览:" prop="content">
-            <el-input type="textarea" disabled :rows="4" v-model="formData.content" placeholder=""></el-input>
-          </el-form-item>
-          <el-form-item>
-            <el-button type="warning" icon="Phone" @click="dialogShow = false">发送短信</el-button>
-          </el-form-item>
-        </el-form>
+        <SendMessage :realData="realData" :pipeDetail="pipeDetail"></SendMessage>
       </el-dialog>
     </div>
   </div>
@@ -132,9 +119,9 @@
 
 <script setup>
 import chartOption from '@/components/Echarts/pieChart_1.js';
+import SendMessage from '@/views/sponeScreen/waterFlood/sendMessage.vue';
 import * as echarts from 'echarts';
 import { graphicReport, realtimeDataLatest, getStationDetail } from '@/api/dataAnalysis/syntherticData';
-import { nextTick } from 'vue';
 
 const { proxy } = getCurrentInstance();
 const tabActive = ref('1');
@@ -145,15 +132,6 @@
 const valIndex = ref(0);
 const dialogShow = ref(false);
 const waterHeight = ref(0);
-const formData = ref({
-  name: '李文峰',
-  phone: '13837899917',
-  content: '',
-});
-const formRules = ref({
-  name: [{ required: true, message: '请输入负责人', trigger: 'blur' }],
-  phone: [{ required: true, message: '请输入负责人电话', trigger: 'blur' }],
-});
 
 const props = defineProps({
   pipeParams: {
@@ -233,7 +211,7 @@
 };
 
 // 获取管网详情实时数据
-function getDetailData() {
+function getDataReal() {
   // 实时数据
   realtimeDataLatest(props.pipeParams.stCode).then(res => {
     realData.value = res.data;
@@ -302,25 +280,11 @@
   getStationData();
   // 项目建设中需要获取某一天的监测数据，排水防涝里面获取实时数据
   if (props.ifReal) {
-    getDetailData();
+    getDataReal();
   } else {
     pipeTime.value = [localStorage.getItem('setRainDateKF'), localStorage.getItem('setRainDateKF')];
     getHistoryData();
   }
-
-  // 短信内容
-  setTimeout(() => {
-    formData.value.content =
-      '【开封海绵办】在' +
-      realData.value.stName +
-      ',时间：' +
-      realData.value.tt +
-      ',监测到水深为' +
-      realData.value.z +
-      '米，管网直径为' +
-      (pipeDetail.value.pipelineDiameterTemp || '--') +
-      '米，发生了满管溢流风险，请及时前往查看并做好处理措施。';
-  }, 1500);
 });
 </script>
 

diff --git a/src/assets/newImgs/HMScreen/pipeBg.png b/src/assets/newImgs/HMScreen/pipeBg.png
new file mode 100644
index 0000000..d73e9a9
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/pipeBg.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/pipeMonitor.gif b/src/assets/newImgs/HMScreen/pipeMonitor.gif
new file mode 100644
index 0000000..8ccebac
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/pipeMonitor.gif
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/water.gif b/src/assets/newImgs/HMScreen/water.gif
new file mode 100644
index 0000000..040d837
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/water.gif
Binary files differ
diff --git a/src/views/sponeScreen/HaiMianScreen/index.vue b/src/views/sponeScreen/HaiMianScreen/index.vue
index a562224..3762d58 100644
--- a/src/views/sponeScreen/HaiMianScreen/index.vue
+++ b/src/views/sponeScreen/HaiMianScreen/index.vue
@@ -127,10 +127,16 @@
     <el-dialog v-model="showProjectSSDX" title="典型项目设施分析" style="width: 1430px" append-to-body>
       <ProjectSSDX :projectParams="projectParamsSS" v-if="showProjectSSDX"></ProjectSSDX>
     </el-dialog>
+
+    <!-- 18个内涝积水点弹窗 -->
+    <el-dialog v-model="showJSD" :title="titleJSD" style="width: 900px" append-to-body>
+      <WaterLogging18 :detailJSD="detailJSD" v-if="showJSD"></WaterLogging18>
+    </el-dialog>
   </div>
 </template>
 
 <script setup>
+import WaterLogging18 from '@/views/sponeScreen/waterFlood/waterLogging18.vue'; //18个内涝积水点弹窗
 import ProjectFX from '@/views/sponeScreen/projectHM/projectFX.vue'; //典型项目分析
 import ProjectSSDX from '@/views/sponeScreen/projectHM/projectSSDX.vue'; //典型项目设施分析
 import ProjectArea from '@/views/sponeScreen/projectHM/projectArea.vue'; //分区建议
@@ -187,6 +193,9 @@
 const showProjectDX = ref(false);
 const areaObj = ref({ value: '0' });
 const pointSourceData = ref({});
+const detailJSD = ref({});
+const showJSD = ref(false);
+const titleJSD = ref('');
 // 下垫面统计
 const landArr = ref([
   { title: '水田', color: '#f8d072' },
@@ -406,6 +415,12 @@
     projectParamsSS.value = params;
     showProjectSSDX.value = true;
   });
+  // 内涝积水点点击
+  bus.on('waterLogging18', params => {
+    detailJSD.value = params;
+    titleJSD.value = (params.name || '') + ' 水位监测';
+    showJSD.value = true;
+  });
 });
 onBeforeUnmount(() => {
   bus.off('checkProjectArea');
diff --git a/src/views/sponeScreen/gisMF/cesiumPopup.vue b/src/views/sponeScreen/gisMF/cesiumPopup.vue
index 16bba35..cd7e9d1 100644
--- a/src/views/sponeScreen/gisMF/cesiumPopup.vue
+++ b/src/views/sponeScreen/gisMF/cesiumPopup.vue
@@ -6,7 +6,6 @@
       <div class="titleNamePP" v-if="allData.dataList.sewageName">{{ allData.dataList.sewageName }}</div>
       <div class="titleNamePP" v-if="allData.dataList.roadName">{{ allData.dataList.roadName }}</div>
       <div class="titleNamePP" v-if="allData.dataList.stName">{{ allData.dataList.stName }}</div>
-      <div class="titleNamePP" v-if="allData.dataList.waterloggingName">{{ allData.dataList.waterloggingName }}</div>
       <div class="titleNamePP" v-if="allData.dataList.materialName">{{ allData.dataList.materialName }}</div>
 
       <div class="PopupClosed">
@@ -77,28 +76,6 @@
       </div>
     </div>
 
-    <!-- 积水点 -->
-    <div class="basicInfo" v-if="allData.dataList.type == 'waterLoging'">
-      <div class="mt-10">
-        <div class="flex flex-start">
-          <div>
-            <el-date-picker
-              v-model="allData.dateTimeJSD"
-              type="daterange"
-              value-format="YYYY-MM-DD"
-              start-placeholder="开始时间"
-              end-placeholder="结束时间"
-              :clearable="false"
-              size="small"
-              style="width: 240px; margin-right: 10px"
-            />
-          </div>
-          <el-button type="primary" size="small" @click="changeDateJSD">搜索</el-button>
-        </div>
-        <div id="chartHistoryJSD" v-loading="jsdLoading"></div>
-      </div>
-    </div>
-
     <!-- 河道水位监测 -->
     <div class="basicInfo" v-if="allData.dataList.type == 'waterCourse'">
       <div class="mt-10">
@@ -186,60 +163,6 @@
   });
 }
 
-// 积水点
-let chartJSD = null;
-function changeDateJSD() {
-  allData.dataList.waterloggingName = allData.dataList.name;
-  if (!!chartJSD) chartJSD.dispose();
-  setTimeout(async () => {
-    chartJSD = echarts.init(document.getElementById('chartHistoryJSD'));
-
-    chartOption.popupRainTrend.legend.data = ['积水深度'];
-    chartOption.popupRainTrend.yAxis.name = 'cm'; //单位
-    chartOption.popupRainTrend.xAxis.data = [];
-    chartOption.popupRainTrend.xAxis.boundaryGap = true;
-    chartOption.popupRainTrend.series.name = '积水深度';
-    chartOption.popupRainTrend.series.barWidth = 3;
-    chartOption.popupRainTrend.series.data = [];
-    chartOption.popupRainTrend.graphic.invisible = false; //暂无数据
-    chartOption.popupRainTrend.graphic.style.text = '暂无内涝点积水数据';
-    chartJSD.clear();
-    chartJSD.setOption(chartOption.popupRainTrend);
-
-    // 非自建设备，暂未共享数据
-    // let params = {
-    //   startTime: allData.dateTimeJSD[0],
-    //   endTime: allData.dateTimeJSD[1],
-    //   stCode: allData.dataList['stCode'],
-    // };
-    // jsdLoading.value = true;
-    // let res = await graphicReport(params);
-    // if (res && res.code == 200) {
-    //   let datas = res.data;
-    //   chartOption.popupRainTrend.legend.data = [datas.propertyMonitorList[0].monitorPropertyName];
-    //   chartOption.popupRainTrend.yAxis.name = datas.propertyMonitorList[0].propertyUnit; //单位
-    //   chartOption.popupRainTrend.xAxis.data = datas.propertyMonitorXList;
-    //   chartOption.popupRainTrend.xAxis.boundaryGap = true;
-    //   chartOption.popupRainTrend.series.name = datas.propertyMonitorList[0].monitorPropertyName;
-    //   chartOption.popupRainTrend.series.barWidth = 3;
-    //   chartOption.popupRainTrend.series.data = datas.propertyMonitorList[0].ylist;
-    //   // 设置鼠标滚轮放大缩小展示数据区间
-    //   chartOption.popupRainTrend.dataZoom = [
-    //     { type: 'inside', startValue: datas.propertyMonitorXList[datas.propertyMonitorXList.length - 48] },
-    //   ];
-    //   if (datas.propertyMonitorXList > 0) {
-    //     chartOption.popupRainTrend.graphic.invisible = true; //暂无数据
-    //   } else {
-    //     chartOption.popupRainTrend.graphic.invisible = false; //暂无数据
-    //   }
-    //   chartOption.popupRainTrend.graphic.invisible = true; //暂无数据
-    //   chartJSD.clear();
-    //   chartJSD.setOption(chartOption.popupRainTrend);
-    //   jsdLoading.value = false;
-    // }
-  });
-}
-
 // 雨量站弹窗内容
 const changeDate = () => {
   getSuperViseData();
@@ -414,9 +337,10 @@
     allData.popupShow = true;
     if (allData.dataList.siteType == 'rain') changeDate(); //雨量站曲线图
     if (allData.dataList.type == 'waterCourse') changeDateSW(); //河道水位计
-    //内涝积水点
+    //内涝积水点 18个
     if (allData.dataList.type == 'waterLoging') {
-      changeDateJSD();
+      allData.popupShow = false;
+      bus.emit('waterLogging18', allData.dataList);
     }
   });
 });
diff --git a/src/views/sponeScreen/gisMF/legendKF.vue b/src/views/sponeScreen/gisMF/legendKF.vue
index 2ce595e..73dd686 100644
--- a/src/views/sponeScreen/gisMF/legendKF.vue
+++ b/src/views/sponeScreen/gisMF/legendKF.vue
@@ -38,12 +38,8 @@
 import { getImageUrl } from '@/utils/ruoyi';
 import cesiumMapCommonLegend from './cesiumMapLegend.js';
 import newfiberMapBoxVectorLayer from './mapboxVectorLayer.js';
-import changeMapStyle from './changeMapStyle.js';
 import topography from '@/assets/newImgs/topography.png';
-import cesiumPaiShuiArea from './cesiumPaiShuiArea.js';
-import newfiberVectorLayer from './newfiberVectorLayer.js';
 import bus from '@/bus/index';
-import { realtimeRainfallStatistics } from '@/api/floodSys/oneMap.js';
 import { nextTick } from 'vue';
 import rainStation_icon from '@/assets/cesiumMap/legendIcon/rainStation_icon.png';
 import { rainRainlist } from '@/api/newPageline/riverCapacity.js';
@@ -53,7 +49,6 @@
 const allMapList = ref([]);
 const showLegend = ref(false);
 const builtCityTimer = ref(null);
-const cityAreaTimer = ref(null);
 const centerCityTimer = ref(null);
 const rainDataTimer = ref(null); //雨量站实时刷新
 // 面板内容展开收起控制
@@ -65,7 +60,6 @@
 watch(
   () => props.showLegend,
   () => {
-    // console.log('showLegend---', props.showLegend);
     showLegend.value = props.showLegend;
   },
   { immediate: true }
diff --git a/src/views/sponeScreen/waterFlood/index.vue b/src/views/sponeScreen/waterFlood/index.vue
index 98f6ce4..ef1b58b 100644
--- a/src/views/sponeScreen/waterFlood/index.vue
+++ b/src/views/sponeScreen/waterFlood/index.vue
@@ -91,7 +91,7 @@
 // 实时报警
 function realDataWarn() {
   rtuWarnRecordRealtimeDetail().then(res => {
-    console.log('实时告警数据---', res);
+    console.log('实时告警数据---', res.data);
     let datas = res.data || [];
     if (datas.length > 0) {
       // 渲染报警图层
diff --git a/src/views/sponeScreen/waterFlood/pipeDetail.vue b/src/views/sponeScreen/waterFlood/pipeDetail.vue
index 4db8ce8..c7ef6c3 100644
--- a/src/views/sponeScreen/waterFlood/pipeDetail.vue
+++ b/src/views/sponeScreen/waterFlood/pipeDetail.vue
@@ -111,20 +111,7 @@
 
       <!-- 发送短信给城管局相关人员 -->
       <el-dialog v-model="dialogShow" title="监测报警反馈" width="600px" append-to-body>
-        <el-form :model="formData" label-width="100px" :rules="formRules">
-          <el-form-item label="负责人:" prop="name">
-            <el-input clearable v-model="formData.name" placeholder="请输入负责人"></el-input>
-          </el-form-item>
-          <el-form-item label="负责人电话:" prop="phone">
-            <el-input clearable v-model="formData.phone" max-length="11" placeholder="请输入负责人电话"></el-input>
-          </el-form-item>
-          <el-form-item label="短信预览:" prop="content">
-            <el-input type="textarea" disabled :rows="4" v-model="formData.content" placeholder=""></el-input>
-          </el-form-item>
-          <el-form-item>
-            <el-button type="warning" icon="Phone" @click="dialogShow = false">发送短信</el-button>
-          </el-form-item>
-        </el-form>
+        <SendMessage :realData="realData" :pipeDetail="pipeDetail"></SendMessage>
       </el-dialog>
     </div>
   </div>
@@ -132,9 +119,9 @@
 
 <script setup>
 import chartOption from '@/components/Echarts/pieChart_1.js';
+import SendMessage from '@/views/sponeScreen/waterFlood/sendMessage.vue';
 import * as echarts from 'echarts';
 import { graphicReport, realtimeDataLatest, getStationDetail } from '@/api/dataAnalysis/syntherticData';
-import { nextTick } from 'vue';
 
 const { proxy } = getCurrentInstance();
 const tabActive = ref('1');
@@ -145,15 +132,6 @@
 const valIndex = ref(0);
 const dialogShow = ref(false);
 const waterHeight = ref(0);
-const formData = ref({
-  name: '李文峰',
-  phone: '13837899917',
-  content: '',
-});
-const formRules = ref({
-  name: [{ required: true, message: '请输入负责人', trigger: 'blur' }],
-  phone: [{ required: true, message: '请输入负责人电话', trigger: 'blur' }],
-});
 
 const props = defineProps({
   pipeParams: {
@@ -233,7 +211,7 @@
 };
 
 // 获取管网详情实时数据
-function getDetailData() {
+function getDataReal() {
   // 实时数据
   realtimeDataLatest(props.pipeParams.stCode).then(res => {
     realData.value = res.data;
@@ -302,25 +280,11 @@
   getStationData();
   // 项目建设中需要获取某一天的监测数据，排水防涝里面获取实时数据
   if (props.ifReal) {
-    getDetailData();
+    getDataReal();
   } else {
     pipeTime.value = [localStorage.getItem('setRainDateKF'), localStorage.getItem('setRainDateKF')];
     getHistoryData();
   }
-
-  // 短信内容
-  setTimeout(() => {
-    formData.value.content =
-      '【开封海绵办】在' +
-      realData.value.stName +
-      ',时间：' +
-      realData.value.tt +
-      ',监测到水深为' +
-      realData.value.z +
-      '米，管网直径为' +
-      (pipeDetail.value.pipelineDiameterTemp || '--') +
-      '米，发生了满管溢流风险，请及时前往查看并做好处理措施。';
-  }, 1500);
 });
 </script>
 
diff --git a/src/views/sponeScreen/waterFlood/sendMessage.vue b/src/views/sponeScreen/waterFlood/sendMessage.vue
new file mode 100644
index 0000000..130dc29
--- /dev/null
+++ b/src/views/sponeScreen/waterFlood/sendMessage.vue
@@ -0,0 +1,60 @@
+<template>
+  <!-- 发送短信弹窗 -->
+  <div class="publicContainer">
+    <el-form :model="formData" label-width="100px" :rules="formRules">
+      <el-form-item label="负责人:" prop="name">
+        <el-input clearable v-model="formData.name" placeholder="请输入负责人"></el-input>
+      </el-form-item>
+      <el-form-item label="负责人电话:" prop="phone">
+        <el-input clearable v-model="formData.phone" max-length="11" placeholder="请输入负责人电话"></el-input>
+      </el-form-item>
+      <el-form-item label="短信预览:" prop="content">
+        <el-input type="textarea" disabled :rows="4" v-model="formData.content" placeholder=""></el-input>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="warning" icon="Phone">发送短信</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script setup>
+const { proxy } = getCurrentInstance();
+
+const props = defineProps({
+  realData: {
+    type: Object,
+  },
+  pipeDetail: {
+    type: Object,
+  },
+});
+
+const formData = ref({
+  name: '李文峰',
+  phone: '13837899917',
+  content: '',
+});
+const formRules = ref({
+  name: [{ required: true, message: '请输入负责人', trigger: 'blur' }],
+  phone: [{ required: true, message: '请输入负责人电话', trigger: 'blur' }],
+});
+
+onMounted(() => {
+  // 短信内容
+  setTimeout(() => {
+    formData.value.content =
+      '【开封海绵办】在' +
+      props.realData.stName +
+      ',时间：' +
+      props.realData.tt +
+      ',监测到水深为' +
+      props.realData.z +
+      '米，管网直径为' +
+      (props.pipeDetail.pipelineDiameterTemp || '--') +
+      '米，发生了满管溢流风险，请及时前往查看并做好处理措施。';
+  }, 500);
+});
+</script>
+
+<style lang="scss" scoped></style>

diff --git a/src/assets/newImgs/HMScreen/pipeBg.png b/src/assets/newImgs/HMScreen/pipeBg.png
new file mode 100644
index 0000000..d73e9a9
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/pipeBg.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/pipeMonitor.gif b/src/assets/newImgs/HMScreen/pipeMonitor.gif
new file mode 100644
index 0000000..8ccebac
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/pipeMonitor.gif
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/water.gif b/src/assets/newImgs/HMScreen/water.gif
new file mode 100644
index 0000000..040d837
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/water.gif
Binary files differ
diff --git a/src/views/sponeScreen/HaiMianScreen/index.vue b/src/views/sponeScreen/HaiMianScreen/index.vue
index a562224..3762d58 100644
--- a/src/views/sponeScreen/HaiMianScreen/index.vue
+++ b/src/views/sponeScreen/HaiMianScreen/index.vue
@@ -127,10 +127,16 @@
     <el-dialog v-model="showProjectSSDX" title="典型项目设施分析" style="width: 1430px" append-to-body>
       <ProjectSSDX :projectParams="projectParamsSS" v-if="showProjectSSDX"></ProjectSSDX>
     </el-dialog>
+
+    <!-- 18个内涝积水点弹窗 -->
+    <el-dialog v-model="showJSD" :title="titleJSD" style="width: 900px" append-to-body>
+      <WaterLogging18 :detailJSD="detailJSD" v-if="showJSD"></WaterLogging18>
+    </el-dialog>
   </div>
 </template>
 
 <script setup>
+import WaterLogging18 from '@/views/sponeScreen/waterFlood/waterLogging18.vue'; //18个内涝积水点弹窗
 import ProjectFX from '@/views/sponeScreen/projectHM/projectFX.vue'; //典型项目分析
 import ProjectSSDX from '@/views/sponeScreen/projectHM/projectSSDX.vue'; //典型项目设施分析
 import ProjectArea from '@/views/sponeScreen/projectHM/projectArea.vue'; //分区建议
@@ -187,6 +193,9 @@
 const showProjectDX = ref(false);
 const areaObj = ref({ value: '0' });
 const pointSourceData = ref({});
+const detailJSD = ref({});
+const showJSD = ref(false);
+const titleJSD = ref('');
 // 下垫面统计
 const landArr = ref([
   { title: '水田', color: '#f8d072' },
@@ -406,6 +415,12 @@
     projectParamsSS.value = params;
     showProjectSSDX.value = true;
   });
+  // 内涝积水点点击
+  bus.on('waterLogging18', params => {
+    detailJSD.value = params;
+    titleJSD.value = (params.name || '') + ' 水位监测';
+    showJSD.value = true;
+  });
 });
 onBeforeUnmount(() => {
   bus.off('checkProjectArea');
diff --git a/src/views/sponeScreen/gisMF/cesiumPopup.vue b/src/views/sponeScreen/gisMF/cesiumPopup.vue
index 16bba35..cd7e9d1 100644
--- a/src/views/sponeScreen/gisMF/cesiumPopup.vue
+++ b/src/views/sponeScreen/gisMF/cesiumPopup.vue
@@ -6,7 +6,6 @@
       <div class="titleNamePP" v-if="allData.dataList.sewageName">{{ allData.dataList.sewageName }}</div>
       <div class="titleNamePP" v-if="allData.dataList.roadName">{{ allData.dataList.roadName }}</div>
       <div class="titleNamePP" v-if="allData.dataList.stName">{{ allData.dataList.stName }}</div>
-      <div class="titleNamePP" v-if="allData.dataList.waterloggingName">{{ allData.dataList.waterloggingName }}</div>
       <div class="titleNamePP" v-if="allData.dataList.materialName">{{ allData.dataList.materialName }}</div>
 
       <div class="PopupClosed">
@@ -77,28 +76,6 @@
       </div>
     </div>
 
-    <!-- 积水点 -->
-    <div class="basicInfo" v-if="allData.dataList.type == 'waterLoging'">
-      <div class="mt-10">
-        <div class="flex flex-start">
-          <div>
-            <el-date-picker
-              v-model="allData.dateTimeJSD"
-              type="daterange"
-              value-format="YYYY-MM-DD"
-              start-placeholder="开始时间"
-              end-placeholder="结束时间"
-              :clearable="false"
-              size="small"
-              style="width: 240px; margin-right: 10px"
-            />
-          </div>
-          <el-button type="primary" size="small" @click="changeDateJSD">搜索</el-button>
-        </div>
-        <div id="chartHistoryJSD" v-loading="jsdLoading"></div>
-      </div>
-    </div>
-
     <!-- 河道水位监测 -->
     <div class="basicInfo" v-if="allData.dataList.type == 'waterCourse'">
       <div class="mt-10">
@@ -186,60 +163,6 @@
   });
 }
 
-// 积水点
-let chartJSD = null;
-function changeDateJSD() {
-  allData.dataList.waterloggingName = allData.dataList.name;
-  if (!!chartJSD) chartJSD.dispose();
-  setTimeout(async () => {
-    chartJSD = echarts.init(document.getElementById('chartHistoryJSD'));
-
-    chartOption.popupRainTrend.legend.data = ['积水深度'];
-    chartOption.popupRainTrend.yAxis.name = 'cm'; //单位
-    chartOption.popupRainTrend.xAxis.data = [];
-    chartOption.popupRainTrend.xAxis.boundaryGap = true;
-    chartOption.popupRainTrend.series.name = '积水深度';
-    chartOption.popupRainTrend.series.barWidth = 3;
-    chartOption.popupRainTrend.series.data = [];
-    chartOption.popupRainTrend.graphic.invisible = false; //暂无数据
-    chartOption.popupRainTrend.graphic.style.text = '暂无内涝点积水数据';
-    chartJSD.clear();
-    chartJSD.setOption(chartOption.popupRainTrend);
-
-    // 非自建设备，暂未共享数据
-    // let params = {
-    //   startTime: allData.dateTimeJSD[0],
-    //   endTime: allData.dateTimeJSD[1],
-    //   stCode: allData.dataList['stCode'],
-    // };
-    // jsdLoading.value = true;
-    // let res = await graphicReport(params);
-    // if (res && res.code == 200) {
-    //   let datas = res.data;
-    //   chartOption.popupRainTrend.legend.data = [datas.propertyMonitorList[0].monitorPropertyName];
-    //   chartOption.popupRainTrend.yAxis.name = datas.propertyMonitorList[0].propertyUnit; //单位
-    //   chartOption.popupRainTrend.xAxis.data = datas.propertyMonitorXList;
-    //   chartOption.popupRainTrend.xAxis.boundaryGap = true;
-    //   chartOption.popupRainTrend.series.name = datas.propertyMonitorList[0].monitorPropertyName;
-    //   chartOption.popupRainTrend.series.barWidth = 3;
-    //   chartOption.popupRainTrend.series.data = datas.propertyMonitorList[0].ylist;
-    //   // 设置鼠标滚轮放大缩小展示数据区间
-    //   chartOption.popupRainTrend.dataZoom = [
-    //     { type: 'inside', startValue: datas.propertyMonitorXList[datas.propertyMonitorXList.length - 48] },
-    //   ];
-    //   if (datas.propertyMonitorXList > 0) {
-    //     chartOption.popupRainTrend.graphic.invisible = true; //暂无数据
-    //   } else {
-    //     chartOption.popupRainTrend.graphic.invisible = false; //暂无数据
-    //   }
-    //   chartOption.popupRainTrend.graphic.invisible = true; //暂无数据
-    //   chartJSD.clear();
-    //   chartJSD.setOption(chartOption.popupRainTrend);
-    //   jsdLoading.value = false;
-    // }
-  });
-}
-
 // 雨量站弹窗内容
 const changeDate = () => {
   getSuperViseData();
@@ -414,9 +337,10 @@
     allData.popupShow = true;
     if (allData.dataList.siteType == 'rain') changeDate(); //雨量站曲线图
     if (allData.dataList.type == 'waterCourse') changeDateSW(); //河道水位计
-    //内涝积水点
+    //内涝积水点 18个
     if (allData.dataList.type == 'waterLoging') {
-      changeDateJSD();
+      allData.popupShow = false;
+      bus.emit('waterLogging18', allData.dataList);
     }
   });
 });
diff --git a/src/views/sponeScreen/gisMF/legendKF.vue b/src/views/sponeScreen/gisMF/legendKF.vue
index 2ce595e..73dd686 100644
--- a/src/views/sponeScreen/gisMF/legendKF.vue
+++ b/src/views/sponeScreen/gisMF/legendKF.vue
@@ -38,12 +38,8 @@
 import { getImageUrl } from '@/utils/ruoyi';
 import cesiumMapCommonLegend from './cesiumMapLegend.js';
 import newfiberMapBoxVectorLayer from './mapboxVectorLayer.js';
-import changeMapStyle from './changeMapStyle.js';
 import topography from '@/assets/newImgs/topography.png';
-import cesiumPaiShuiArea from './cesiumPaiShuiArea.js';
-import newfiberVectorLayer from './newfiberVectorLayer.js';
 import bus from '@/bus/index';
-import { realtimeRainfallStatistics } from '@/api/floodSys/oneMap.js';
 import { nextTick } from 'vue';
 import rainStation_icon from '@/assets/cesiumMap/legendIcon/rainStation_icon.png';
 import { rainRainlist } from '@/api/newPageline/riverCapacity.js';
@@ -53,7 +49,6 @@
 const allMapList = ref([]);
 const showLegend = ref(false);
 const builtCityTimer = ref(null);
-const cityAreaTimer = ref(null);
 const centerCityTimer = ref(null);
 const rainDataTimer = ref(null); //雨量站实时刷新
 // 面板内容展开收起控制
@@ -65,7 +60,6 @@
 watch(
   () => props.showLegend,
   () => {
-    // console.log('showLegend---', props.showLegend);
     showLegend.value = props.showLegend;
   },
   { immediate: true }
diff --git a/src/views/sponeScreen/waterFlood/index.vue b/src/views/sponeScreen/waterFlood/index.vue
index 98f6ce4..ef1b58b 100644
--- a/src/views/sponeScreen/waterFlood/index.vue
+++ b/src/views/sponeScreen/waterFlood/index.vue
@@ -91,7 +91,7 @@
 // 实时报警
 function realDataWarn() {
   rtuWarnRecordRealtimeDetail().then(res => {
-    console.log('实时告警数据---', res);
+    console.log('实时告警数据---', res.data);
     let datas = res.data || [];
     if (datas.length > 0) {
       // 渲染报警图层
diff --git a/src/views/sponeScreen/waterFlood/pipeDetail.vue b/src/views/sponeScreen/waterFlood/pipeDetail.vue
index 4db8ce8..c7ef6c3 100644
--- a/src/views/sponeScreen/waterFlood/pipeDetail.vue
+++ b/src/views/sponeScreen/waterFlood/pipeDetail.vue
@@ -111,20 +111,7 @@
 
       <!-- 发送短信给城管局相关人员 -->
       <el-dialog v-model="dialogShow" title="监测报警反馈" width="600px" append-to-body>
-        <el-form :model="formData" label-width="100px" :rules="formRules">
-          <el-form-item label="负责人:" prop="name">
-            <el-input clearable v-model="formData.name" placeholder="请输入负责人"></el-input>
-          </el-form-item>
-          <el-form-item label="负责人电话:" prop="phone">
-            <el-input clearable v-model="formData.phone" max-length="11" placeholder="请输入负责人电话"></el-input>
-          </el-form-item>
-          <el-form-item label="短信预览:" prop="content">
-            <el-input type="textarea" disabled :rows="4" v-model="formData.content" placeholder=""></el-input>
-          </el-form-item>
-          <el-form-item>
-            <el-button type="warning" icon="Phone" @click="dialogShow = false">发送短信</el-button>
-          </el-form-item>
-        </el-form>
+        <SendMessage :realData="realData" :pipeDetail="pipeDetail"></SendMessage>
       </el-dialog>
     </div>
   </div>
@@ -132,9 +119,9 @@
 
 <script setup>
 import chartOption from '@/components/Echarts/pieChart_1.js';
+import SendMessage from '@/views/sponeScreen/waterFlood/sendMessage.vue';
 import * as echarts from 'echarts';
 import { graphicReport, realtimeDataLatest, getStationDetail } from '@/api/dataAnalysis/syntherticData';
-import { nextTick } from 'vue';
 
 const { proxy } = getCurrentInstance();
 const tabActive = ref('1');
@@ -145,15 +132,6 @@
 const valIndex = ref(0);
 const dialogShow = ref(false);
 const waterHeight = ref(0);
-const formData = ref({
-  name: '李文峰',
-  phone: '13837899917',
-  content: '',
-});
-const formRules = ref({
-  name: [{ required: true, message: '请输入负责人', trigger: 'blur' }],
-  phone: [{ required: true, message: '请输入负责人电话', trigger: 'blur' }],
-});
 
 const props = defineProps({
   pipeParams: {
@@ -233,7 +211,7 @@
 };
 
 // 获取管网详情实时数据
-function getDetailData() {
+function getDataReal() {
   // 实时数据
   realtimeDataLatest(props.pipeParams.stCode).then(res => {
     realData.value = res.data;
@@ -302,25 +280,11 @@
   getStationData();
   // 项目建设中需要获取某一天的监测数据，排水防涝里面获取实时数据
   if (props.ifReal) {
-    getDetailData();
+    getDataReal();
   } else {
     pipeTime.value = [localStorage.getItem('setRainDateKF'), localStorage.getItem('setRainDateKF')];
     getHistoryData();
   }
-
-  // 短信内容
-  setTimeout(() => {
-    formData.value.content =
-      '【开封海绵办】在' +
-      realData.value.stName +
-      ',时间：' +
-      realData.value.tt +
-      ',监测到水深为' +
-      realData.value.z +
-      '米，管网直径为' +
-      (pipeDetail.value.pipelineDiameterTemp || '--') +
-      '米，发生了满管溢流风险，请及时前往查看并做好处理措施。';
-  }, 1500);
 });
 </script>
 
diff --git a/src/views/sponeScreen/waterFlood/sendMessage.vue b/src/views/sponeScreen/waterFlood/sendMessage.vue
new file mode 100644
index 0000000..130dc29
--- /dev/null
+++ b/src/views/sponeScreen/waterFlood/sendMessage.vue
@@ -0,0 +1,60 @@
+<template>
+  <!-- 发送短信弹窗 -->
+  <div class="publicContainer">
+    <el-form :model="formData" label-width="100px" :rules="formRules">
+      <el-form-item label="负责人:" prop="name">
+        <el-input clearable v-model="formData.name" placeholder="请输入负责人"></el-input>
+      </el-form-item>
+      <el-form-item label="负责人电话:" prop="phone">
+        <el-input clearable v-model="formData.phone" max-length="11" placeholder="请输入负责人电话"></el-input>
+      </el-form-item>
+      <el-form-item label="短信预览:" prop="content">
+        <el-input type="textarea" disabled :rows="4" v-model="formData.content" placeholder=""></el-input>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="warning" icon="Phone">发送短信</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script setup>
+const { proxy } = getCurrentInstance();
+
+const props = defineProps({
+  realData: {
+    type: Object,
+  },
+  pipeDetail: {
+    type: Object,
+  },
+});
+
+const formData = ref({
+  name: '李文峰',
+  phone: '13837899917',
+  content: '',
+});
+const formRules = ref({
+  name: [{ required: true, message: '请输入负责人', trigger: 'blur' }],
+  phone: [{ required: true, message: '请输入负责人电话', trigger: 'blur' }],
+});
+
+onMounted(() => {
+  // 短信内容
+  setTimeout(() => {
+    formData.value.content =
+      '【开封海绵办】在' +
+      props.realData.stName +
+      ',时间：' +
+      props.realData.tt +
+      ',监测到水深为' +
+      props.realData.z +
+      '米，管网直径为' +
+      (props.pipeDetail.pipelineDiameterTemp || '--') +
+      '米，发生了满管溢流风险，请及时前往查看并做好处理措施。';
+  }, 500);
+});
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/src/views/sponeScreen/waterFlood/waterLogging18.vue b/src/views/sponeScreen/waterFlood/waterLogging18.vue
new file mode 100644
index 0000000..1cff2e9
--- /dev/null
+++ b/src/views/sponeScreen/waterFlood/waterLogging18.vue
@@ -0,0 +1,165 @@
+<template>
+  <!-- 18个内涝积水点弹窗 -->
+  <div class="waterLoggingPage">
+    <div class="titleBg">关联管网信息</div>
+    <div class="flex">
+      <img src="@/assets/newImgs/HMScreen/pipeMonitor.gif" alt="" class="showGif" />
+      <div class="content">
+        <div class="flex flex-align-center">
+          <img src="@/assets/newImgs/HMScreen/water.gif" alt="" width="64" />
+          <div class="cont">
+            <div>当前水深：<span class="number">0</span> 厘米</div>
+            <div>设备状态：<span class="success">在线</span></div>
+          </div>
+        </div>
+        <div class="flex flex-align-center flex-wrap flex-justcontent-spacebetween" style="margin: 5px auto">
+          <div class="part" style="width: 100%">管网名称：{{ props.detailJSD.name || '--' }}</div>
+          <div :class="['part', realData.z >= pipeDetail.pipelineDiameterTemp ? 'red' : '']">实时水深：{{ realData.z || '--' }} 米</div>
+          <div class="part">井深：{{ pipeDetail.bottomBuriedDepthTemp || '--' }} 米</div>
+          <div class="part">管网直径：{{ pipeDetail.pipelineDiameterTemp || '--' }} 米</div>
+          <div class="part" style="width: 100%">更新时间：{{ realData.tt || '--' }}</div>
+          <div class="part">负责人：李强</div>
+          <div class="part">电话：13321190334</div>
+        </div>
+
+        <div class="flex flex-align-center flex-wrap flex-justcontent-start">
+          <el-button type="warning" class="mt-10" v-if="realData.z >= (pipeDetail.pipelineDiameterTemp || '2')" @click="dialogShow = true">
+            有满管溢流风险，通知相关责任人进行处理
+          </el-button>
+        </div>
+      </div>
+    </div>
+
+    <div class="titleBg mt-10">视频监控</div>
+    <img src="@/assets/newImgs/HMScreen/videoTest.png" alt="" style="height: 419px; width: 100%" />
+
+    <!-- 发送短信给城管局相关人员 -->
+    <el-dialog v-model="dialogShow" title="监测报警反馈" width="600px" append-to-body>
+      <SendMessage :realData="realData" :pipeDetail="pipeDetail"></SendMessage>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+import { graphicReport, realtimeDataLatest, getStationDetail, getStationList } from '@/api/dataAnalysis/syntherticData';
+import SendMessage from '@/views/sponeScreen/waterFlood/sendMessage.vue';
+
+const { proxy } = getCurrentInstance();
+const realData = ref({});
+const pipeDetail = ref({});
+const dialogShow = ref(false);
+
+const props = defineProps({
+  detailJSD: {
+    type: Object,
+  },
+});
+
+// 获取管网详情实时数据
+function getDataReal() {
+  if (!!!props.detailJSD.stCodes) return;
+  // 实时数据
+  realtimeDataLatest(props.detailJSD.stCodes).then(res => {
+    realData.value = res.data;
+  });
+}
+
+// 获取管网详情某一天数据
+async function getHistoryData() {
+  let params = {
+    startTime: localStorage.getItem('setRainDateKF'),
+    endTime: localStorage.getItem('setRainDateKF'),
+    stCode: props.detailJSD.stCodes, //关联站点code
+  };
+  //管网监测值
+  let res = await graphicReport(params);
+  if (res && res.code == 200) {
+    let datas = res.data;
+    // 取最大的值
+    let max = Math.max(...nameToData(datas.propertyMonitorList, '水位'));
+    let valIndex = nameToData(datas.propertyMonitorList, '水位').findIndex(item => {
+      return item == max;
+    });
+    realData.value.z = nameToData(datas.propertyMonitorList, '水位')[valIndex];
+    realData.value.tt = datas.propertyMonitorXList[valIndex];
+  }
+}
+
+// 公共方法，根据监测名称来匹配对应的数值
+function nameToData(data, name) {
+  let arr = data.filter(item => item.monitorPropertyName == name);
+  let lists = arr[0] ? arr[0].ylist : [];
+  return lists;
+}
+
+// 获取站点详情
+function getStationData() {
+  if (!!!props.detailJSD.stCodes) return;
+  getStationList({ monitorTargetType: 'pipeline' }).then(res => {
+    let datas = res.data;
+    let id = datas.filter(item => item.stCode == props.detailJSD.stCodes)[0].id;
+    getStationDetail(id).then(res => {
+      pipeDetail.value = res.data;
+    });
+  });
+}
+
+onMounted(() => {
+  getStationData();
+  if (localStorage.getItem('showHistoryMonitor') == '1') {
+    // 历史
+    getHistoryData();
+  } else {
+    // 实时
+    getDataReal();
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.waterLoggingPage {
+  width: 100%;
+  color: #b8ecff;
+  font-size: 15px;
+  font-weight: 400;
+  margin-bottom: 20px;
+  .titleBg {
+    width: 100%;
+    height: 35px;
+    line-height: 35px;
+    background: url('@/assets/newImgs/HMScreen/pipeBg.png') no-repeat;
+    background-size: 100% 100%;
+    padding: 0px 30px;
+    margin: 0px 0px 10px -10px;
+  }
+  .showGif {
+    height: 260px;
+  }
+  .content {
+    margin: 10px 0px 0px 20px;
+    .cont {
+      margin-left: 10px;
+      .number {
+        font-family: 'YouSheBiaoTiHei';
+        font-size: 30px;
+      }
+      .success {
+        padding: 1px 10px;
+        background: #00c855;
+        border-radius: 12px;
+        display: inline-block;
+      }
+      .fail {
+        background: #a6a6a6;
+        border-radius: 12px;
+        display: inline-block;
+        padding: 1px 10px;
+      }
+    }
+  }
+  .part {
+    margin-top: 8px;
+    width: 50%;
+  }
+}
+</style>