diff --git a/src/views/DialogTabs/component/gwpm.vue b/src/views/DialogTabs/component/gwpm.vue
index ffe00aa..0a31516 100644
--- a/src/views/DialogTabs/component/gwpm.vue
+++ b/src/views/DialogTabs/component/gwpm.vue
@@ -1,5 +1,67 @@
 <template>
-  <div id="gwpm">111</div>
+  <div id="gwpm">
+    <div class="pipePou flex">
+      <div class="leftP">
+        <!-- 井深 -->
+        <div class="part partJ">井深：5.8米</div>
+
+        <!-- 水高度 -->
+        <img src="@/assets/images/fhpl/pipeW.png" alt="" class="water" style="height: 80px" />
+        <div class="part partW">水深：3.5米</div>
+
+        <!-- 瞬时流量 -->
+        <div class="part partL" style="width: 180px">瞬时流量：0.06m³/s</div>
+
+        <!-- 设备 -->
+        <img src="@/assets/images/fhpl/equip.png" alt="" class="equipA" />
+      </div>
+      <div class="rightP">
+        <div class="title">基本信息</div>
+        <div class="part flex">
+          <div class="biaoti">所在位置：</div>
+          <div class="cont">东关大街与长青路交叉口</div>
+        </div>
+        <div class="part flex">
+          <div class="biaoti">管网流向：</div>
+          <div class="cont">由南到北</div>
+        </div>
+        <div class="part flex">
+          <div class="biaoti">井盖材质：</div>
+          <div class="cont">铸铁</div>
+        </div>
+        <div class="part flex">
+          <div class="biaoti">管径：</div>
+          <div class="cont">800mm</div>
+        </div>
+        <div class="part flex">
+          <div class="biaoti">安装高度：</div>
+          <div class="cont">4.80米</div>
+        </div>
+        <div class="part flex">
+          <div class="biaoti">井深：</div>
+          <div class="cont">5.80米</div>
+        </div>
+
+        <div class="title" style="margin-top: 50px">实时数据</div>
+        <div class="part flex">
+          <div class="biaoti">水深：</div>
+          <div class="cont">5.50米</div>
+        </div>
+        <div class="part flex">
+          <div class="biaoti">温度：</div>
+          <div class="cont">30.8℃</div>
+        </div>
+        <div class="part flex">
+          <div class="biaoti">瞬时流量：</div>
+          <div class="cont">0.06m³/s</div>
+        </div>
+        <div class="part flex">
+          <div class="biaoti">SS：</div>
+          <div class="cont">38.6mg/L</div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script setup name="gwpm">
@@ -12,7 +74,79 @@
 #gwpm {
   width: 100%;
   height: 100%;
-  text-align: center;
-  // background: red;
+
+  .pipePou {
+    .leftP {
+      width: 1000px;
+      height: 570px;
+      background: url('@/assets/images/fhpl/pipe.gif') no-repeat;
+      background-size: 100% 100%;
+      position: relative;
+      .water {
+        position: absolute;
+        bottom: 50px;
+        left: 0px;
+        z-index: 10;
+        width: 530px;
+        height: 128px;
+      }
+      .part {
+        border-radius: 12px;
+        width: 110px;
+        height: 26px;
+        line-height: 26px;
+        font-family: Source Han Sans CN;
+        font-weight: 400;
+        font-size: 16px;
+        color: #ffffff;
+        text-align: center;
+      }
+      .partW {
+        position: absolute;
+        bottom: 190px;
+        left: 60px;
+        z-index: 10;
+      }
+      .partJ {
+        position: absolute;
+        top: 175px;
+        right: 105px;
+        z-index: 10;
+      }
+      .partL {
+        position: absolute;
+        bottom: 190px;
+        right: 20px;
+        z-index: 10;
+      }
+      .equipA {
+        position: absolute;
+        bottom: 60px;
+        left: 30px;
+        z-index: 15;
+        width: 470px;
+        height: 339px;
+      }
+    }
+    .rightP {
+      margin-left: 30px;
+      color: #fff;
+      .title {
+        border-left: 5px solid #67bcfa;
+        padding-left: 8px;
+        font-size: 16px;
+        font-weight: 600;
+        margin-top: 20px;
+      }
+      .part {
+        margin: 15px 0px 10px 10px;
+        color: #c8dbe0;
+        font-size: 15px;
+        .biaoti {
+          width: 100px;
+        }
+      }
+    }
+  }
 }
 </style>

diff --git a/src/views/DialogTabs/component/gwpm.vue b/src/views/DialogTabs/component/gwpm.vue
index ffe00aa..0a31516 100644
--- a/src/views/DialogTabs/component/gwpm.vue
+++ b/src/views/DialogTabs/component/gwpm.vue
@@ -1,5 +1,67 @@
 <template>
-  <div id="gwpm">111</div>
+  <div id="gwpm">
+    <div class="pipePou flex">
+      <div class="leftP">
+        <!-- 井深 -->
+        <div class="part partJ">井深：5.8米</div>
+
+        <!-- 水高度 -->
+        <img src="@/assets/images/fhpl/pipeW.png" alt="" class="water" style="height: 80px" />
+        <div class="part partW">水深：3.5米</div>
+
+        <!-- 瞬时流量 -->
+        <div class="part partL" style="width: 180px">瞬时流量：0.06m³/s</div>
+
+        <!-- 设备 -->
+        <img src="@/assets/images/fhpl/equip.png" alt="" class="equipA" />
+      </div>
+      <div class="rightP">
+        <div class="title">基本信息</div>
+        <div class="part flex">
+          <div class="biaoti">所在位置：</div>
+          <div class="cont">东关大街与长青路交叉口</div>
+        </div>
+        <div class="part flex">
+          <div class="biaoti">管网流向：</div>
+          <div class="cont">由南到北</div>
+        </div>
+        <div class="part flex">
+          <div class="biaoti">井盖材质：</div>
+          <div class="cont">铸铁</div>
+        </div>
+        <div class="part flex">
+          <div class="biaoti">管径：</div>
+          <div class="cont">800mm</div>
+        </div>
+        <div class="part flex">
+          <div class="biaoti">安装高度：</div>
+          <div class="cont">4.80米</div>
+        </div>
+        <div class="part flex">
+          <div class="biaoti">井深：</div>
+          <div class="cont">5.80米</div>
+        </div>
+
+        <div class="title" style="margin-top: 50px">实时数据</div>
+        <div class="part flex">
+          <div class="biaoti">水深：</div>
+          <div class="cont">5.50米</div>
+        </div>
+        <div class="part flex">
+          <div class="biaoti">温度：</div>
+          <div class="cont">30.8℃</div>
+        </div>
+        <div class="part flex">
+          <div class="biaoti">瞬时流量：</div>
+          <div class="cont">0.06m³/s</div>
+        </div>
+        <div class="part flex">
+          <div class="biaoti">SS：</div>
+          <div class="cont">38.6mg/L</div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script setup name="gwpm">
@@ -12,7 +74,79 @@
 #gwpm {
   width: 100%;
   height: 100%;
-  text-align: center;
-  // background: red;
+
+  .pipePou {
+    .leftP {
+      width: 1000px;
+      height: 570px;
+      background: url('@/assets/images/fhpl/pipe.gif') no-repeat;
+      background-size: 100% 100%;
+      position: relative;
+      .water {
+        position: absolute;
+        bottom: 50px;
+        left: 0px;
+        z-index: 10;
+        width: 530px;
+        height: 128px;
+      }
+      .part {
+        border-radius: 12px;
+        width: 110px;
+        height: 26px;
+        line-height: 26px;
+        font-family: Source Han Sans CN;
+        font-weight: 400;
+        font-size: 16px;
+        color: #ffffff;
+        text-align: center;
+      }
+      .partW {
+        position: absolute;
+        bottom: 190px;
+        left: 60px;
+        z-index: 10;
+      }
+      .partJ {
+        position: absolute;
+        top: 175px;
+        right: 105px;
+        z-index: 10;
+      }
+      .partL {
+        position: absolute;
+        bottom: 190px;
+        right: 20px;
+        z-index: 10;
+      }
+      .equipA {
+        position: absolute;
+        bottom: 60px;
+        left: 30px;
+        z-index: 15;
+        width: 470px;
+        height: 339px;
+      }
+    }
+    .rightP {
+      margin-left: 30px;
+      color: #fff;
+      .title {
+        border-left: 5px solid #67bcfa;
+        padding-left: 8px;
+        font-size: 16px;
+        font-weight: 600;
+        margin-top: 20px;
+      }
+      .part {
+        margin: 15px 0px 10px 10px;
+        color: #c8dbe0;
+        font-size: 15px;
+        .biaoti {
+          width: 100px;
+        }
+      }
+    }
+  }
 }
 </style>
diff --git a/src/views/DialogTabs/component/jcsj.vue b/src/views/DialogTabs/component/jcsj.vue
index 42fe5ec..2cb0eae 100644
--- a/src/views/DialogTabs/component/jcsj.vue
+++ b/src/views/DialogTabs/component/jcsj.vue
@@ -1,11 +1,54 @@
 <template>
-  <div id="jcsj">22</div>
+  <div id="jcsj">
+    <div class="pipeMonitor">
+      <div class="selectToolList">
+        <el-date-picker
+          v-model="pipeTime"
+          type="daterange"
+          start-placeholder="开始时间"
+          end-placeholder="结束时间"
+          style="width: 240px"
+        />
+        <el-button type="primary" @click="changePipeDate" style="margin: -4px 0px 0px 8px">搜索</el-button>
+      </div>
+      <div id="monitorPipe">123213213</div>
+    </div>
+  </div>
 </template>
 
 <script setup name="jcsj">
 import { ref, reactive, toRefs, onMounted } from 'vue';
+import chartOption from '@/views/oneMap/Echarts/pieChart_1.js';
+import * as echarts from 'echarts';
+const { proxy } = getCurrentInstance();
 
-onMounted(() => {});
+const pipeTime = ref([proxy.moment(new Date()).subtract(3, 'days').format('YYYY-MM-DD'), proxy.moment().format('YYYY-MM-DD')]);
+
+// 监测数据日期搜索
+function changePipeDate() {
+  initPipeChart();
+}
+
+//管网监测趋势图
+let pipeChart = null;
+const initPipeChart = () => {
+  pipeChart && pipeChart.dispose();
+  pipeChart = echarts.init(document.getElementById('monitorPipe'));
+  chartOption.floodOneMapPipeSupervise.yAxis[0].name = '水位(m)';
+  chartOption.floodOneMapPipeSupervise.yAxis[1].name = '雨量(mm)';
+  chartOption.floodOneMapPipeSupervise.legend.data = ['水位', '雨量'];
+  chartOption.floodOneMapPipeSupervise.series[0].name = '水位';
+  chartOption.floodOneMapPipeSupervise.series[1].name = '雨量';
+  chartOption.floodOneMapPipeSupervise.series[1].type = 'bar';
+  chartOption.floodOneMapPipeSupervise.series[1].barWidth = '10';
+  chartOption.floodOneMapPipeSupervise.yAxis[1].inverse = true; //翻转
+  chartOption.floodOneMapPipeSupervise.graphic.invisible = true; // 暂无数据
+  pipeChart.clear();
+  pipeChart.setOption(chartOption.floodOneMapPipeSupervise);
+};
+onMounted(() => {
+  initPipeChart();
+});
 </script>
 
 <style lang="scss" scoped>
@@ -13,6 +56,11 @@
   width: 100%;
   height: 100%;
   text-align: center;
-  // background: red;
+
+  #monitorPipe {
+    width: 1300px;
+    height: 570px;
+    margin-top: 10px;
+  }
 }
 </style>

diff --git a/src/views/DialogTabs/component/gwpm.vue b/src/views/DialogTabs/component/gwpm.vue
index ffe00aa..0a31516 100644
--- a/src/views/DialogTabs/component/gwpm.vue
+++ b/src/views/DialogTabs/component/gwpm.vue
@@ -1,5 +1,67 @@
 <template>
-  <div id="gwpm">111</div>
+  <div id="gwpm">
+    <div class="pipePou flex">
+      <div class="leftP">
+        <!-- 井深 -->
+        <div class="part partJ">井深：5.8米</div>
+
+        <!-- 水高度 -->
+        <img src="@/assets/images/fhpl/pipeW.png" alt="" class="water" style="height: 80px" />
+        <div class="part partW">水深：3.5米</div>
+
+        <!-- 瞬时流量 -->
+        <div class="part partL" style="width: 180px">瞬时流量：0.06m³/s</div>
+
+        <!-- 设备 -->
+        <img src="@/assets/images/fhpl/equip.png" alt="" class="equipA" />
+      </div>
+      <div class="rightP">
+        <div class="title">基本信息</div>
+        <div class="part flex">
+          <div class="biaoti">所在位置：</div>
+          <div class="cont">东关大街与长青路交叉口</div>
+        </div>
+        <div class="part flex">
+          <div class="biaoti">管网流向：</div>
+          <div class="cont">由南到北</div>
+        </div>
+        <div class="part flex">
+          <div class="biaoti">井盖材质：</div>
+          <div class="cont">铸铁</div>
+        </div>
+        <div class="part flex">
+          <div class="biaoti">管径：</div>
+          <div class="cont">800mm</div>
+        </div>
+        <div class="part flex">
+          <div class="biaoti">安装高度：</div>
+          <div class="cont">4.80米</div>
+        </div>
+        <div class="part flex">
+          <div class="biaoti">井深：</div>
+          <div class="cont">5.80米</div>
+        </div>
+
+        <div class="title" style="margin-top: 50px">实时数据</div>
+        <div class="part flex">
+          <div class="biaoti">水深：</div>
+          <div class="cont">5.50米</div>
+        </div>
+        <div class="part flex">
+          <div class="biaoti">温度：</div>
+          <div class="cont">30.8℃</div>
+        </div>
+        <div class="part flex">
+          <div class="biaoti">瞬时流量：</div>
+          <div class="cont">0.06m³/s</div>
+        </div>
+        <div class="part flex">
+          <div class="biaoti">SS：</div>
+          <div class="cont">38.6mg/L</div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script setup name="gwpm">
@@ -12,7 +74,79 @@
 #gwpm {
   width: 100%;
   height: 100%;
-  text-align: center;
-  // background: red;
+
+  .pipePou {
+    .leftP {
+      width: 1000px;
+      height: 570px;
+      background: url('@/assets/images/fhpl/pipe.gif') no-repeat;
+      background-size: 100% 100%;
+      position: relative;
+      .water {
+        position: absolute;
+        bottom: 50px;
+        left: 0px;
+        z-index: 10;
+        width: 530px;
+        height: 128px;
+      }
+      .part {
+        border-radius: 12px;
+        width: 110px;
+        height: 26px;
+        line-height: 26px;
+        font-family: Source Han Sans CN;
+        font-weight: 400;
+        font-size: 16px;
+        color: #ffffff;
+        text-align: center;
+      }
+      .partW {
+        position: absolute;
+        bottom: 190px;
+        left: 60px;
+        z-index: 10;
+      }
+      .partJ {
+        position: absolute;
+        top: 175px;
+        right: 105px;
+        z-index: 10;
+      }
+      .partL {
+        position: absolute;
+        bottom: 190px;
+        right: 20px;
+        z-index: 10;
+      }
+      .equipA {
+        position: absolute;
+        bottom: 60px;
+        left: 30px;
+        z-index: 15;
+        width: 470px;
+        height: 339px;
+      }
+    }
+    .rightP {
+      margin-left: 30px;
+      color: #fff;
+      .title {
+        border-left: 5px solid #67bcfa;
+        padding-left: 8px;
+        font-size: 16px;
+        font-weight: 600;
+        margin-top: 20px;
+      }
+      .part {
+        margin: 15px 0px 10px 10px;
+        color: #c8dbe0;
+        font-size: 15px;
+        .biaoti {
+          width: 100px;
+        }
+      }
+    }
+  }
 }
 </style>
diff --git a/src/views/DialogTabs/component/jcsj.vue b/src/views/DialogTabs/component/jcsj.vue
index 42fe5ec..2cb0eae 100644
--- a/src/views/DialogTabs/component/jcsj.vue
+++ b/src/views/DialogTabs/component/jcsj.vue
@@ -1,11 +1,54 @@
 <template>
-  <div id="jcsj">22</div>
+  <div id="jcsj">
+    <div class="pipeMonitor">
+      <div class="selectToolList">
+        <el-date-picker
+          v-model="pipeTime"
+          type="daterange"
+          start-placeholder="开始时间"
+          end-placeholder="结束时间"
+          style="width: 240px"
+        />
+        <el-button type="primary" @click="changePipeDate" style="margin: -4px 0px 0px 8px">搜索</el-button>
+      </div>
+      <div id="monitorPipe">123213213</div>
+    </div>
+  </div>
 </template>
 
 <script setup name="jcsj">
 import { ref, reactive, toRefs, onMounted } from 'vue';
+import chartOption from '@/views/oneMap/Echarts/pieChart_1.js';
+import * as echarts from 'echarts';
+const { proxy } = getCurrentInstance();
 
-onMounted(() => {});
+const pipeTime = ref([proxy.moment(new Date()).subtract(3, 'days').format('YYYY-MM-DD'), proxy.moment().format('YYYY-MM-DD')]);
+
+// 监测数据日期搜索
+function changePipeDate() {
+  initPipeChart();
+}
+
+//管网监测趋势图
+let pipeChart = null;
+const initPipeChart = () => {
+  pipeChart && pipeChart.dispose();
+  pipeChart = echarts.init(document.getElementById('monitorPipe'));
+  chartOption.floodOneMapPipeSupervise.yAxis[0].name = '水位(m)';
+  chartOption.floodOneMapPipeSupervise.yAxis[1].name = '雨量(mm)';
+  chartOption.floodOneMapPipeSupervise.legend.data = ['水位', '雨量'];
+  chartOption.floodOneMapPipeSupervise.series[0].name = '水位';
+  chartOption.floodOneMapPipeSupervise.series[1].name = '雨量';
+  chartOption.floodOneMapPipeSupervise.series[1].type = 'bar';
+  chartOption.floodOneMapPipeSupervise.series[1].barWidth = '10';
+  chartOption.floodOneMapPipeSupervise.yAxis[1].inverse = true; //翻转
+  chartOption.floodOneMapPipeSupervise.graphic.invisible = true; // 暂无数据
+  pipeChart.clear();
+  pipeChart.setOption(chartOption.floodOneMapPipeSupervise);
+};
+onMounted(() => {
+  initPipeChart();
+});
 </script>
 
 <style lang="scss" scoped>
@@ -13,6 +56,11 @@
   width: 100%;
   height: 100%;
   text-align: center;
-  // background: red;
+
+  #monitorPipe {
+    width: 1300px;
+    height: 570px;
+    margin-top: 10px;
+  }
 }
 </style>
diff --git a/src/views/oneMap/SmartDrainage/PsRightBox.vue b/src/views/oneMap/SmartDrainage/PsRightBox.vue
index 7b11990..8f2990c 100644
--- a/src/views/oneMap/SmartDrainage/PsRightBox.vue
+++ b/src/views/oneMap/SmartDrainage/PsRightBox.vue
@@ -110,6 +110,7 @@
 <script setup>
 import { ref, reactive, toRefs, onMounted, onBeforeUnmount } from 'vue';
 import AssessmentjsEcharts from '@/views/oneMap/Echarts/AssessmentjsEcharts.vue';
+import bus from '@/bus';
 const listData = ref([
   { siteName: '东关大街与长青路交叉口', siteStatus: '在线', warnInfo: '无风险' },
   { siteName: '大桥街与延河西路交叉口', siteStatus: '离线', warnInfo: '无风险' },
@@ -145,6 +146,16 @@
 function monitorclick(val) {
   monitorname.value = val.name;
 }
+// 弹框
+function showMapDalog(val) {
+  console.log(val.siteName, 'val.siteName');
+  let data = {
+    title: val.siteName,
+    comIDs: ['gwpm', 'jcsj'],
+  };
+  bus.emit('publicDialog', data);
+  // showPipe.value = true;
+}
 </script>
 
 <style lang="scss" scoped>
@@ -193,6 +204,7 @@
           overflow-y: auto;
           padding: 0 16px;
           list-style: none;
+          cursor: pointer;
           .listOne {
             margin-top: 5px;
             background: linear-gradient(0deg, #008599 0%, #08596d 100%);

diff --git a/src/views/DialogTabs/component/gwpm.vue b/src/views/DialogTabs/component/gwpm.vue
index ffe00aa..0a31516 100644
--- a/src/views/DialogTabs/component/gwpm.vue
+++ b/src/views/DialogTabs/component/gwpm.vue
@@ -1,5 +1,67 @@
 <template>
-  <div id="gwpm">111</div>
+  <div id="gwpm">
+    <div class="pipePou flex">
+      <div class="leftP">
+        <!-- 井深 -->
+        <div class="part partJ">井深：5.8米</div>
+
+        <!-- 水高度 -->
+        <img src="@/assets/images/fhpl/pipeW.png" alt="" class="water" style="height: 80px" />
+        <div class="part partW">水深：3.5米</div>
+
+        <!-- 瞬时流量 -->
+        <div class="part partL" style="width: 180px">瞬时流量：0.06m³/s</div>
+
+        <!-- 设备 -->
+        <img src="@/assets/images/fhpl/equip.png" alt="" class="equipA" />
+      </div>
+      <div class="rightP">
+        <div class="title">基本信息</div>
+        <div class="part flex">
+          <div class="biaoti">所在位置：</div>
+          <div class="cont">东关大街与长青路交叉口</div>
+        </div>
+        <div class="part flex">
+          <div class="biaoti">管网流向：</div>
+          <div class="cont">由南到北</div>
+        </div>
+        <div class="part flex">
+          <div class="biaoti">井盖材质：</div>
+          <div class="cont">铸铁</div>
+        </div>
+        <div class="part flex">
+          <div class="biaoti">管径：</div>
+          <div class="cont">800mm</div>
+        </div>
+        <div class="part flex">
+          <div class="biaoti">安装高度：</div>
+          <div class="cont">4.80米</div>
+        </div>
+        <div class="part flex">
+          <div class="biaoti">井深：</div>
+          <div class="cont">5.80米</div>
+        </div>
+
+        <div class="title" style="margin-top: 50px">实时数据</div>
+        <div class="part flex">
+          <div class="biaoti">水深：</div>
+          <div class="cont">5.50米</div>
+        </div>
+        <div class="part flex">
+          <div class="biaoti">温度：</div>
+          <div class="cont">30.8℃</div>
+        </div>
+        <div class="part flex">
+          <div class="biaoti">瞬时流量：</div>
+          <div class="cont">0.06m³/s</div>
+        </div>
+        <div class="part flex">
+          <div class="biaoti">SS：</div>
+          <div class="cont">38.6mg/L</div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script setup name="gwpm">
@@ -12,7 +74,79 @@
 #gwpm {
   width: 100%;
   height: 100%;
-  text-align: center;
-  // background: red;
+
+  .pipePou {
+    .leftP {
+      width: 1000px;
+      height: 570px;
+      background: url('@/assets/images/fhpl/pipe.gif') no-repeat;
+      background-size: 100% 100%;
+      position: relative;
+      .water {
+        position: absolute;
+        bottom: 50px;
+        left: 0px;
+        z-index: 10;
+        width: 530px;
+        height: 128px;
+      }
+      .part {
+        border-radius: 12px;
+        width: 110px;
+        height: 26px;
+        line-height: 26px;
+        font-family: Source Han Sans CN;
+        font-weight: 400;
+        font-size: 16px;
+        color: #ffffff;
+        text-align: center;
+      }
+      .partW {
+        position: absolute;
+        bottom: 190px;
+        left: 60px;
+        z-index: 10;
+      }
+      .partJ {
+        position: absolute;
+        top: 175px;
+        right: 105px;
+        z-index: 10;
+      }
+      .partL {
+        position: absolute;
+        bottom: 190px;
+        right: 20px;
+        z-index: 10;
+      }
+      .equipA {
+        position: absolute;
+        bottom: 60px;
+        left: 30px;
+        z-index: 15;
+        width: 470px;
+        height: 339px;
+      }
+    }
+    .rightP {
+      margin-left: 30px;
+      color: #fff;
+      .title {
+        border-left: 5px solid #67bcfa;
+        padding-left: 8px;
+        font-size: 16px;
+        font-weight: 600;
+        margin-top: 20px;
+      }
+      .part {
+        margin: 15px 0px 10px 10px;
+        color: #c8dbe0;
+        font-size: 15px;
+        .biaoti {
+          width: 100px;
+        }
+      }
+    }
+  }
 }
 </style>
diff --git a/src/views/DialogTabs/component/jcsj.vue b/src/views/DialogTabs/component/jcsj.vue
index 42fe5ec..2cb0eae 100644
--- a/src/views/DialogTabs/component/jcsj.vue
+++ b/src/views/DialogTabs/component/jcsj.vue
@@ -1,11 +1,54 @@
 <template>
-  <div id="jcsj">22</div>
+  <div id="jcsj">
+    <div class="pipeMonitor">
+      <div class="selectToolList">
+        <el-date-picker
+          v-model="pipeTime"
+          type="daterange"
+          start-placeholder="开始时间"
+          end-placeholder="结束时间"
+          style="width: 240px"
+        />
+        <el-button type="primary" @click="changePipeDate" style="margin: -4px 0px 0px 8px">搜索</el-button>
+      </div>
+      <div id="monitorPipe">123213213</div>
+    </div>
+  </div>
 </template>
 
 <script setup name="jcsj">
 import { ref, reactive, toRefs, onMounted } from 'vue';
+import chartOption from '@/views/oneMap/Echarts/pieChart_1.js';
+import * as echarts from 'echarts';
+const { proxy } = getCurrentInstance();
 
-onMounted(() => {});
+const pipeTime = ref([proxy.moment(new Date()).subtract(3, 'days').format('YYYY-MM-DD'), proxy.moment().format('YYYY-MM-DD')]);
+
+// 监测数据日期搜索
+function changePipeDate() {
+  initPipeChart();
+}
+
+//管网监测趋势图
+let pipeChart = null;
+const initPipeChart = () => {
+  pipeChart && pipeChart.dispose();
+  pipeChart = echarts.init(document.getElementById('monitorPipe'));
+  chartOption.floodOneMapPipeSupervise.yAxis[0].name = '水位(m)';
+  chartOption.floodOneMapPipeSupervise.yAxis[1].name = '雨量(mm)';
+  chartOption.floodOneMapPipeSupervise.legend.data = ['水位', '雨量'];
+  chartOption.floodOneMapPipeSupervise.series[0].name = '水位';
+  chartOption.floodOneMapPipeSupervise.series[1].name = '雨量';
+  chartOption.floodOneMapPipeSupervise.series[1].type = 'bar';
+  chartOption.floodOneMapPipeSupervise.series[1].barWidth = '10';
+  chartOption.floodOneMapPipeSupervise.yAxis[1].inverse = true; //翻转
+  chartOption.floodOneMapPipeSupervise.graphic.invisible = true; // 暂无数据
+  pipeChart.clear();
+  pipeChart.setOption(chartOption.floodOneMapPipeSupervise);
+};
+onMounted(() => {
+  initPipeChart();
+});
 </script>
 
 <style lang="scss" scoped>
@@ -13,6 +56,11 @@
   width: 100%;
   height: 100%;
   text-align: center;
-  // background: red;
+
+  #monitorPipe {
+    width: 1300px;
+    height: 570px;
+    margin-top: 10px;
+  }
 }
 </style>
diff --git a/src/views/oneMap/SmartDrainage/PsRightBox.vue b/src/views/oneMap/SmartDrainage/PsRightBox.vue
index 7b11990..8f2990c 100644
--- a/src/views/oneMap/SmartDrainage/PsRightBox.vue
+++ b/src/views/oneMap/SmartDrainage/PsRightBox.vue
@@ -110,6 +110,7 @@
 <script setup>
 import { ref, reactive, toRefs, onMounted, onBeforeUnmount } from 'vue';
 import AssessmentjsEcharts from '@/views/oneMap/Echarts/AssessmentjsEcharts.vue';
+import bus from '@/bus';
 const listData = ref([
   { siteName: '东关大街与长青路交叉口', siteStatus: '在线', warnInfo: '无风险' },
   { siteName: '大桥街与延河西路交叉口', siteStatus: '离线', warnInfo: '无风险' },
@@ -145,6 +146,16 @@
 function monitorclick(val) {
   monitorname.value = val.name;
 }
+// 弹框
+function showMapDalog(val) {
+  console.log(val.siteName, 'val.siteName');
+  let data = {
+    title: val.siteName,
+    comIDs: ['gwpm', 'jcsj'],
+  };
+  bus.emit('publicDialog', data);
+  // showPipe.value = true;
+}
 </script>
 
 <style lang="scss" scoped>
@@ -193,6 +204,7 @@
           overflow-y: auto;
           padding: 0 16px;
           list-style: none;
+          cursor: pointer;
           .listOne {
             margin-top: 5px;
             background: linear-gradient(0deg, #008599 0%, #08596d 100%);
diff --git a/src/views/oneMap/floodPrevention/FholRightBox.vue b/src/views/oneMap/floodPrevention/FholRightBox.vue
index d63c62f..b06717b 100644
--- a/src/views/oneMap/floodPrevention/FholRightBox.vue
+++ b/src/views/oneMap/floodPrevention/FholRightBox.vue
@@ -85,7 +85,7 @@
   </div>
 
   <!-- 管网监测点详情 -->
-  <el-dialog
+  <!-- <el-dialog
     v-model="showPipe"
     id="dialogContent"
     title="管网运行监测"
@@ -94,7 +94,7 @@
     :close-on-click-modal="false"
   >
     <PipeDetail v-if="showPipe"></PipeDetail>
-  </el-dialog>
+  </el-dialog> -->
 </template>
 
 <script setup>
@@ -189,7 +189,7 @@
     status: 1,
   },
 ];
-const showPipe = ref(false);
+// const showPipe = ref(false);
 // 弹框
 function showMapDalog(val) {
   console.log(val.siteName, 'val.siteName');