diff --git a/src/views/oneMap/SmartDrainage/PsRightBox.vue b/src/views/oneMap/SmartDrainage/PsRightBox.vue
index 8f2990c..b80cc87 100644
--- a/src/views/oneMap/SmartDrainage/PsRightBox.vue
+++ b/src/views/oneMap/SmartDrainage/PsRightBox.vue
@@ -17,7 +17,36 @@
           {{ item.name }}
         </div>
       </div>
-      <div class="leftSubTabsBox">
+      <div class="waterBox" v-if="monitorname == '水位监测(0/7)'">
+        <div class="waterroll">
+          <div class="tableHeader">
+            <span class="tableHeaderList tableList1">序号</span>
+            <span class="tableHeaderList tableList2">河道</span>
+            <span class="tableHeaderList tableList3">当前水位(m)</span>
+            <span class="tableHeaderList tableList4">控制常水位(m)</span>
+            <span class="tableHeaderList tableList5">状态</span>
+          </div>
+          <div class="tableBody">
+            <div class="tableBodyList" v-for="item in FXJCData">
+              <span class="tableBodyList_span1">{{ item.xh }}</span>
+              <span class="tableBodyList_span2">{{ item.hd }} </span>
+              <span class="tableBodyList_span3">{{ item.dqsw }}</span>
+              <span class="tableBodyList_span4">{{ item.kzsw }} </span>
+              <span class="tableBodyList_span5">
+                <el-tag type="success" v-if="item.zk == '1'">正 常</el-tag>
+              </span>
+            </div>
+          </div>
+        </div>
+        <div class="watercontent">
+          <div class="Titlelarge">河湖简介：延河</div>
+          <div class="Contentdetails">
+            延河为黄河右岸一级支流,发源于陕西省靖边县天赐湾乡周山南麓，经安塞县镰刀湾乡杨石寺村附近进人延安境内,自西北流向东南,经安塞、宝塔、延长等县(区),于延长南河沟乡凉水岸汇人黄河。延河全长286.9km,流城面积7725
+            km?,平均比降3.3%。市内河长248.5 km,市内面积7321 km?,主要支流有杏子河、坪桥川、西川河、南川河、蟠龙川等。
+          </div>
+        </div>
+      </div>
+      <div class="leftSubTabsBox" v-if="monitorname == '漫溢监测(1/12)' || monitorname == '积水监测(3/13)'">
         <div class="tabContent">
           <ul>
             <li class="listOne curCick" v-for="(i, index) in listData" :key="index" @click="showMapDalog(i)">
@@ -111,12 +140,16 @@
 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: '无风险' },
-  { siteName: '文化沟路与延河西路交叉口', siteStatus: '在线', warnInfo: '无风险' },
+const listData = ref([{ siteName: '东关大街与长青路交叉口', siteStatus: '在线', warnInfo: '无风险' }]);
+const FXJCData = ref([
+  {
+    xh: '0',
+    hd: '延河',
+    dqsw: 961.26,
+    kzsw: 960.26,
+    zk: '1',
+  },
 ]);
-
 const yearList = ref([
   { name: '月', value: 1 },
   { name: '年', value: 2 },
@@ -127,7 +160,7 @@
 ]);
 const monitorData = ref([
   { name: '漫溢监测(1/12)', value: 1 },
-  { name: '积水监测(0/13)', value: 2 },
+  { name: '积水监测(3/13)', value: 2 },
   { name: '水位监测(0/7)', value: 2 },
 ]);
 const chartData2 = ref({
@@ -145,6 +178,17 @@
 }
 function monitorclick(val) {
   monitorname.value = val.name;
+  if (monitorname.value == '漫溢监测(1/12)') {
+    listData.value = [{ siteName: '东关大街与长青路交叉口', siteStatus: '在线', warnInfo: '无风险' }];
+  } else if (monitorname.value == '积水监测(3/13)') {
+    listData.value = [
+      { siteName: '东关大街与长青路交叉口', siteStatus: '在线', warnInfo: '无风险' },
+      { siteName: '大桥街与延河西路交叉口', siteStatus: '在线', warnInfo: '无风险' },
+      { siteName: '文化沟路与延河西路交叉口', siteStatus: '在线', warnInfo: '无风险' },
+    ];
+  } else {
+    console.log(monitorname.value, '  monitorname.value');
+  }
 }
 // 弹框
 function showMapDalog(val) {
@@ -196,6 +240,7 @@
     .leftSubTabsBox {
       width: 440px;
       height: calc(100% - 50px);
+      margin: 0 auto;
       .tabContent {
         height: calc(100% - 1px);
         ul {
@@ -274,6 +319,144 @@
         }
       }
     }
+    .waterBox {
+      margin: 5px auto;
+      width: 430px;
+      height: calc(100% - 45px);
+      .waterroll {
+        height: 60%;
+        // background: yellowgreen;
+        .tableHeader {
+          width: 100%;
+          height: 34px;
+          background: linear-gradient(0deg, #00fbffa3 0%, #00fbff00 100%);
+          border-radius: 2px;
+          border: 1px solid #74dde1;
+          display: flex;
+          .tableHeaderList {
+            font-family: Source Han Sans CN;
+            font-weight: 400;
+            font-size: 14px;
+            color: #ffffff;
+            height: 34px;
+            line-height: 34px;
+            // padding-left: 5px;
+            // text-align: center;
+          }
+          .tableList1 {
+            width: 10%;
+            text-align: center;
+          }
+          .tableList2 {
+            width: 10%;
+            text-align: center;
+          }
+          .tableList3 {
+            width: 25%;
+            text-align: center;
+          }
+          .tableList4 {
+            width: 35%;
+            text-align: center;
+          }
+          .tableList5 {
+            width: 20%;
+            text-align: center;
+          }
+        }
+        .tableBody {
+          width: 100%;
+          height: calc(100% - 38px);
+          overflow: auto;
+          // background: red;
+          .tableBodyList {
+            height: 34px;
+            line-height: 34px;
+            width: 100%;
+            display: flex;
+            /* 选择偶数行 */
+            &:nth-child(even) {
+              background: linear-gradient(0deg, #008599 0%, #08596d 100%);
+            }
+
+            .tableBodyList_span1 {
+              font-family: Source Han Sans CN;
+              font-weight: 400;
+              font-size: 14px;
+              color: #ffffff;
+              height: 34px;
+              line-height: 34px;
+              text-align: center;
+              width: 10%;
+
+              // background: red;
+              // padding-left: 5px;
+            }
+            .tableBodyList_span2 {
+              font-family: Source Han Sans CN;
+              font-weight: 400;
+              font-size: 14px;
+              color: #ffffff;
+              height: 34px;
+              line-height: 34px;
+              text-align: center;
+              width: 10%;
+            }
+            .tableBodyList_span3 {
+              font-family: Source Han Sans CN;
+              font-weight: 400;
+              font-size: 14px;
+              color: #ffffff;
+              height: 34px;
+              line-height: 34px;
+              text-align: center;
+              width: 25%;
+            }
+
+            .tableBodyList_span4 {
+              font-family: Source Han Sans CN;
+              font-weight: 400;
+              font-size: 14px;
+              color: #ffffff;
+              height: 34px;
+              line-height: 43px;
+              text-align: center;
+              width: 35%;
+            }
+            .tableBodyList_span5 {
+              font-family: Source Han Sans CN;
+              font-weight: 400;
+              font-size: 14px;
+              color: #ffffff;
+              height: 34px;
+              line-height: 43px;
+              text-align: center;
+              width: 20%;
+              cursor: pointer;
+            }
+          }
+        }
+      }
+      .watercontent {
+        height: 40%;
+        .Titlelarge {
+          font-family: PangMenZhengDao;
+          font-weight: 400;
+          font-size: 23px;
+          color: #ebfeff;
+        }
+        .Contentdetails {
+          height: calc(100% - 30px);
+          overflow: auto;
+          // background: red;
+          text-indent: 20px;
+          font-family: Source Han Sans CN;
+          font-weight: 500;
+          font-size: 14px;
+          color: #c1d3d4;
+        }
+      }
+    }
   }
 }
 .WarningSou {