diff --git a/src/views/pictureOnMap/inputSearch.vue b/src/views/pictureOnMap/inputSearch.vue
index ee0ad81..d732a0b 100644
--- a/src/views/pictureOnMap/inputSearch.vue
+++ b/src/views/pictureOnMap/inputSearch.vue
@@ -3,7 +3,7 @@
     <el-select
       v-model="selectmodel"
       placeholder="请输入关键字"
-      style="width: 140px;position: relative;"
+      style="width: 140px; position: relative"
       filterable
       popper-class="inputSearchselectclass"
       :filter-method="filterMethod"
@@ -11,10 +11,10 @@
       clearable
       @change="selectchange"
     >
-        <el-tabs v-model="activeName" class="selectTabs demo-tabs" stretch  @tab-click="tabsClick">
-    <el-tab-pane label="资产" name="zhandian"></el-tab-pane>
-    <el-tab-pane label="道路" name="daolu"></el-tab-pane>
-  </el-tabs>
+      <el-tabs v-model="activeName" class="selectTabs demo-tabs" stretch @tab-click="tabsClick">
+        <el-tab-pane label="资产" name="zhandian"></el-tab-pane>
+        <el-tab-pane label="道路" name="daolu"></el-tab-pane>
+      </el-tabs>
       <el-option v-for="(item, index) in filterList" :key="item.id + index + item.id" :label="item.name" :value="item.geometry">
         <el-tooltip
           effect="dark"
@@ -55,42 +55,42 @@
 const selectmodel = ref('');
 const getItem = ref({});
 // 道路数据
-const roadData=ref(
-  [{
-  data:[
+const roadData = ref([
   {
-    id:1,
-    name:'软件园中路',
-    geometry:'',
-    pointTypeName:'什么什么路'
+    data: [
+      {
+        id: 1,
+        name: '软件园中路',
+        geometry: '',
+        pointTypeName: '什么什么路',
+      },
+      {
+        id: 2,
+        name: '光谷大道',
+        geometry: '',
+        pointTypeName: '什么路',
+      },
+      {
+        id: 3,
+        name: '光谷大道1',
+        geometry: '',
+        pointTypeName: '什么路',
+      },
+      {
+        id: 4,
+        name: '光谷大道3',
+        geometry: '',
+        pointTypeName: '什么路',
+      },
+      {
+        id: 5,
+        name: '关山大道',
+        geometry: '',
+        pointTypeName: '1什么路',
+      },
+    ],
   },
-  {
-    id:2,
-    name:'光谷大道',
-    geometry:'',
-    pointTypeName:'什么路'
-  },
-  {
-    id:3,
-    name:'光谷大道1',
-    geometry:'',
-    pointTypeName:'什么路'
-  },
-  {
-    id:4,
-    name:'光谷大道3',
-    geometry:'',
-    pointTypeName:'什么路'
-  },
-  {
-    id:5,
-    name:'关山大道',
-    geometry:'',
-    pointTypeName:'1什么路'
-  },
-]
-  }]
-)
+]);
 watch(
   () => appStore.MapData,
   (newValue, oldValue) => {
@@ -168,17 +168,16 @@
   // bus.emit('removeMapDatas',['temporary']);
 }, 500);
 
-const tabsClick=(e)=>{
-  let type=e.paneName
-  getItem.value=''
-  selectmodel.value=''
-  if(type=='zhandian'){
-    GetSearchList(appStore.MapData)
-  }else if(type=='daolu'){
-    GetSearchList(roadData.value)
-
+const tabsClick = e => {
+  let type = e.paneName;
+  getItem.value = '';
+  selectmodel.value = '';
+  if (type == 'zhandian') {
+    GetSearchList(appStore.MapData);
+  } else if (type == 'daolu') {
+    GetSearchList(roadData.value);
   }
-}
+};
 onMounted(() => {
   bus.on('YQ_head', val => {
     console.log('appStore.MapData', appStore.MapData);
@@ -197,20 +196,21 @@
 <style lang="scss" scoped>
 .inputSearch {
   position: fixed;
-  right: 175px;
+  right: 190px;
   top: 19px;
   z-index: 999;
   border-radius: 6px;
 }
 .selectTabs {
   position: absolute;
-  
+
   width: 100%;
   left: 0;
   top: 0;
 }
 
 :deep(.el-input__wrapper) {
+  height: 30px !important;
   background: #0d2359 !important;
   border-radius: 6px;
   box-shadow: 0 0 0 0.00521rem var(--el-select-input-focus-border-color) inset !important;
@@ -237,9 +237,9 @@
   background: #0d2359 !important;
   border-radius: 6px !important;
   border: 1px solid #0b9bff !important;
-  .el-scrollbar{
-  padding-top: 40px;
-}
+  .el-scrollbar {
+    padding-top: 40px;
+  }
   .el-select-dropdown__item {
     font-family: Source Han Sans CN;
     font-weight: bold;

diff --git a/src/views/pictureOnMap/inputSearch.vue b/src/views/pictureOnMap/inputSearch.vue
index ee0ad81..d732a0b 100644
--- a/src/views/pictureOnMap/inputSearch.vue
+++ b/src/views/pictureOnMap/inputSearch.vue
@@ -3,7 +3,7 @@
     <el-select
       v-model="selectmodel"
       placeholder="请输入关键字"
-      style="width: 140px;position: relative;"
+      style="width: 140px; position: relative"
       filterable
       popper-class="inputSearchselectclass"
       :filter-method="filterMethod"
@@ -11,10 +11,10 @@
       clearable
       @change="selectchange"
     >
-        <el-tabs v-model="activeName" class="selectTabs demo-tabs" stretch  @tab-click="tabsClick">
-    <el-tab-pane label="资产" name="zhandian"></el-tab-pane>
-    <el-tab-pane label="道路" name="daolu"></el-tab-pane>
-  </el-tabs>
+      <el-tabs v-model="activeName" class="selectTabs demo-tabs" stretch @tab-click="tabsClick">
+        <el-tab-pane label="资产" name="zhandian"></el-tab-pane>
+        <el-tab-pane label="道路" name="daolu"></el-tab-pane>
+      </el-tabs>
       <el-option v-for="(item, index) in filterList" :key="item.id + index + item.id" :label="item.name" :value="item.geometry">
         <el-tooltip
           effect="dark"
@@ -55,42 +55,42 @@
 const selectmodel = ref('');
 const getItem = ref({});
 // 道路数据
-const roadData=ref(
-  [{
-  data:[
+const roadData = ref([
   {
-    id:1,
-    name:'软件园中路',
-    geometry:'',
-    pointTypeName:'什么什么路'
+    data: [
+      {
+        id: 1,
+        name: '软件园中路',
+        geometry: '',
+        pointTypeName: '什么什么路',
+      },
+      {
+        id: 2,
+        name: '光谷大道',
+        geometry: '',
+        pointTypeName: '什么路',
+      },
+      {
+        id: 3,
+        name: '光谷大道1',
+        geometry: '',
+        pointTypeName: '什么路',
+      },
+      {
+        id: 4,
+        name: '光谷大道3',
+        geometry: '',
+        pointTypeName: '什么路',
+      },
+      {
+        id: 5,
+        name: '关山大道',
+        geometry: '',
+        pointTypeName: '1什么路',
+      },
+    ],
   },
-  {
-    id:2,
-    name:'光谷大道',
-    geometry:'',
-    pointTypeName:'什么路'
-  },
-  {
-    id:3,
-    name:'光谷大道1',
-    geometry:'',
-    pointTypeName:'什么路'
-  },
-  {
-    id:4,
-    name:'光谷大道3',
-    geometry:'',
-    pointTypeName:'什么路'
-  },
-  {
-    id:5,
-    name:'关山大道',
-    geometry:'',
-    pointTypeName:'1什么路'
-  },
-]
-  }]
-)
+]);
 watch(
   () => appStore.MapData,
   (newValue, oldValue) => {
@@ -168,17 +168,16 @@
   // bus.emit('removeMapDatas',['temporary']);
 }, 500);
 
-const tabsClick=(e)=>{
-  let type=e.paneName
-  getItem.value=''
-  selectmodel.value=''
-  if(type=='zhandian'){
-    GetSearchList(appStore.MapData)
-  }else if(type=='daolu'){
-    GetSearchList(roadData.value)
-
+const tabsClick = e => {
+  let type = e.paneName;
+  getItem.value = '';
+  selectmodel.value = '';
+  if (type == 'zhandian') {
+    GetSearchList(appStore.MapData);
+  } else if (type == 'daolu') {
+    GetSearchList(roadData.value);
   }
-}
+};
 onMounted(() => {
   bus.on('YQ_head', val => {
     console.log('appStore.MapData', appStore.MapData);
@@ -197,20 +196,21 @@
 <style lang="scss" scoped>
 .inputSearch {
   position: fixed;
-  right: 175px;
+  right: 190px;
   top: 19px;
   z-index: 999;
   border-radius: 6px;
 }
 .selectTabs {
   position: absolute;
-  
+
   width: 100%;
   left: 0;
   top: 0;
 }
 
 :deep(.el-input__wrapper) {
+  height: 30px !important;
   background: #0d2359 !important;
   border-radius: 6px;
   box-shadow: 0 0 0 0.00521rem var(--el-select-input-focus-border-color) inset !important;
@@ -237,9 +237,9 @@
   background: #0d2359 !important;
   border-radius: 6px !important;
   border: 1px solid #0b9bff !important;
-  .el-scrollbar{
-  padding-top: 40px;
-}
+  .el-scrollbar {
+    padding-top: 40px;
+  }
   .el-select-dropdown__item {
     font-family: Source Han Sans CN;
     font-weight: bold;
diff --git a/src/views/pictureOnMap/page/DrainageSystem/YSIndex.vue b/src/views/pictureOnMap/page/DrainageSystem/YSIndex.vue
index ca12460..6f1cdc3 100644
--- a/src/views/pictureOnMap/page/DrainageSystem/YSIndex.vue
+++ b/src/views/pictureOnMap/page/DrainageSystem/YSIndex.vue
@@ -129,16 +129,6 @@
       >
         <!-- 顶部公共标题 -->
         <div class="CrumbesTitle">
-          <!-- 一级 -->
-          <!-- <span
-            class="crumbs2"
-            v-for="item in AllData.TitleName"
-            :key="item.grade"
-            v-show="item.abbreviation"
-          >
-            {{ item.grade != "one" ? "/" : "" }}
-            {{ item.abbreviation ? item.abbreviation : "" }}
-          </span> -->
           <span class="crumbs2">{{ AllData.ClicksiteName }}</span>
         </div>
         <div class="modular1_right">
@@ -236,6 +226,23 @@
         </div>
       </div>
     </Transition>
+    <Transition name="fade_right">
+      <div
+        :class="['moduleBox', 'moduleBoxRight']"
+        v-if="
+          !showPanel &&
+          !AllData.RightShow &&
+          (AllData.regionGrade == 'one' || AllData.regionGrade == 'two')
+        "
+      >
+        <div class="CrumbesTitle">
+          <span class="crumbs2">港渠统计</span>
+        </div>
+        <div class="modularRight2">
+          <YSRight :waterRegionCode="AllData.waterRegionCode"></YSRight>
+        </div>
+      </div>
+    </Transition>
   </div>
 </template>
 
@@ -256,6 +263,7 @@
 import DraLineChartsLeft from "./components/DraLineChartsLeft.vue";
 // 右侧面板接入
 import RightCharts from "./components/RightCharts.vue";
+import YSRight from "./YSIndex_right.vue";
 // 面板控制组件
 import PanelDisplayHidden from "@/views/pictureOnMap/page/components/PanelDisplayHidden.vue";
 const showPanel = ref(false); //面板展开收起
@@ -269,6 +277,7 @@
   regionName: "", //分区名称
   waterRegionCode: "", //分区编号
   RightShow: false, //右侧面板是否显示--基于是否选择站点进行判断
+  RightShowID: "",
   TitleName: [
     {
       abbreviation: "一级分区", //分区缩写-动态
@@ -402,6 +411,7 @@
 const MBClick = (item) => {
   console.log(item);
   AllData.RightShow = false;
+  AllData.RightShowID = "";
   // 赋值需要进行echarts数据请求的数据
   AllData.regionGrade = item.grade;
   AllData.regionName = item.Name;
@@ -538,6 +548,7 @@
   if (Row.layerId == "排水分区") {
     // 片区
     AllData.RightShow = false;
+    AllData.RightShowID = false;
     //   if (!!!Row.properties.pid) return;
     //   原本是判断没有pid就不请求↑↑↑,现在gis图层数据改变,从而使用层级来判断↓↓↓
     if (Row.properties.level == "4") return;
@@ -644,41 +655,48 @@
   } else if (Row.layerId == "point") {
     // 点位
     if (Row.properties.pointType == "rainwater_pipeline_quality") {
-      AllData.ClicksiteName = Row.properties.name;
-      AllData.RightShow = true;
-      //   Row.properties.wellCode
-      //   获取管网信息
-      MonitorAPI.pipelinePointPage({
-        pointNumber: Row.properties.wellCode,
-      }).then((res) => {
-        if (res && res.code == 200) {
-          AllData.GWBD = res.data[0];
-        }
-      });
-      //   根据type 判断是管井还是接驳口
-      if (Row.properties.type == "rainwater_pipeline_quality_area1") {
-        // 接驳口
-        AllData.isJBK = true;
+      if (AllData.RightShowID == Row.properties.id) {
+        // 说明是同样的一个点点了两次,所以进行关闭
+        AllData.RightShow = false;
+        AllData.RightShowID = "";
       } else {
-        // 管井或其他
-        AllData.isJBK = false;
+        AllData.ClicksiteName = Row.properties.name;
+        AllData.RightShow = true;
+        AllData.RightShowID = Row.properties.id;
+        //   Row.properties.wellCode
+        //   获取管网信息
+        MonitorAPI.pipelinePointPage({
+          pointNumber: Row.properties.wellCode,
+        }).then((res) => {
+          if (res && res.code == 200) {
+            AllData.GWBD = res.data[0];
+          }
+        });
+        //   根据type 判断是管井还是接驳口
+        if (Row.properties.type == "rainwater_pipeline_quality_area1") {
+          // 接驳口
+          AllData.isJBK = true;
+        } else {
+          // 管井或其他
+          AllData.isJBK = false;
+        }
+        //   上下游水量分析
+        getDataSXY(Row.properties);
+        //   获取echarts数据
+        //   setTimeout(() => {
+        AllData.chartDataRight = {
+          yAxis: [],
+          yAxis_Name: "降雨量",
+          yAxis2: [],
+          yAxis2_Name: "流速",
+          yAxis3: [],
+          yAxis3_Name: "水深",
+          xAxis: [],
+        };
+        AllData.refreshRight = 0;
+        GetRightCharts(Row.properties);
+        //   }, 900);
       }
-      //   上下游水量分析
-      getDataSXY(Row.properties);
-      //   获取echarts数据
-      //   setTimeout(() => {
-      AllData.chartDataRight = {
-        yAxis: [],
-        yAxis_Name: "降雨量",
-        yAxis2: [],
-        yAxis2_Name: "流速",
-        yAxis3: [],
-        yAxis3_Name: "水深",
-        xAxis: [],
-      };
-      AllData.refreshRight = 0;
-      GetRightCharts(Row.properties);
-      //   }, 900);
     }
   }
 };
@@ -787,7 +805,7 @@
         AllData.refresh1++;
         AllData.TjData1 = res.data.pipelinePointCount
           .reduce((accu, curren) => Number(accu) + Number(curren))
-          .toFixed(2);
+          .toFixed(0);
         AllData.TjData1Unit = "个";
       }
       if (AllData.regionGrade == "four") {
@@ -926,25 +944,25 @@
         res.data.forEach((element) => {
           XData.push(element.lakeName);
           data1.push(element.nowWaterlevel);
-          data2.push(element.fortifyWaterlevel);
+          data2.push(element.bestPromitWaterlevel);
           data3.push(element.volume);
         });
         AllData.chartData1.xAxis = XData; //X轴数据
-        AllData.chartData1.y1_Unit = "m"; //Y轴单位
-        AllData.chartData1.y2_Unit = "万方"; //2号Y轴单位
+        AllData.chartData1.y1_Unit = "万方"; //Y轴单位
+        AllData.chartData1.y2_Unit = "m"; //2号Y轴单位
         AllData.chartData1.y2_show = true; //是否展示右侧的2号轴
         AllData.chartData1.yAxis1_bar = data3; //数据1
         AllData.chartData1.yAxis1_bar_Name = "库容量"; //数据1的名称
-        AllData.chartData1.yAxis1_bar_index = 1;
+        AllData.chartData1.yAxis1_bar_index = 0;
         AllData.chartData1.yAxis2_bar = null; //数据2
         AllData.chartData1.yAxis2_bar_Name = ""; //数据1的名称
         AllData.chartData1.yAxis2_bar_index = 0;
         AllData.chartData1.yAxis2_line = data2;
         AllData.chartData1.yAxis2_line_Name = "控制水位";
-        AllData.chartData1.yAxis2_line_Index = 0;
+        AllData.chartData1.yAxis2_line_Index = 1;
         AllData.chartData1.yAxis3_line = data1;
         AllData.chartData1.yAxis3_line_Name = "当前水位";
-        AllData.chartData1.yAxis3_line_Index = 0;
+        AllData.chartData1.yAxis3_line_Index = 1;
         AllData.refresh1++;
         AllData.TjData1 = null;
         AllData.TjData1Unit = null;
@@ -1080,6 +1098,8 @@
     yAxis3_line_Index: 0,
   };
   AllData.refresh1++;
+  AllData.TjData1 = null;
+  AllData.TjData1Unit = null;
   AllData.chartData3 = {
     xAxis: [], //X轴数据
     y1_Unit: "", //Y轴单位
@@ -1099,6 +1119,8 @@
     yAxis3_line_Index: 0,
   };
   AllData.refresh3++;
+  AllData.TjData3 = null;
+  AllData.TjData3Unit = null;
   AllData.chartData2 = {
     xAxis: [],
     yAxis: [],
@@ -1108,6 +1130,8 @@
     y1_Unit: "km",
   };
   AllData.refresh2++;
+  AllData.TjData2 = null;
+  AllData.TjData2Unit = null;
 };
 onMounted(() => {
   let initeGLTimer = setInterval(() => {
@@ -1152,6 +1176,9 @@
       font-weight: bold;
       font-size: 20px;
       color: #ffffff;
+      overflow: hidden;
+      text-overflow: ellipsis; /* 超出宽度200px后显示省略号 */
+      white-space: nowrap; /* 限制不允许换行 */
     }
   }
   .modular1,
@@ -1276,5 +1303,12 @@
       }
     }
   }
+
+  .modularRight2 {
+    width: 100%;
+    height: calc(100% - 50px);
+    overflow: auto;
+    background: #0d2359;
+  }
 }
 </style>

diff --git a/src/views/pictureOnMap/inputSearch.vue b/src/views/pictureOnMap/inputSearch.vue
index ee0ad81..d732a0b 100644
--- a/src/views/pictureOnMap/inputSearch.vue
+++ b/src/views/pictureOnMap/inputSearch.vue
@@ -3,7 +3,7 @@
     <el-select
       v-model="selectmodel"
       placeholder="请输入关键字"
-      style="width: 140px;position: relative;"
+      style="width: 140px; position: relative"
       filterable
       popper-class="inputSearchselectclass"
       :filter-method="filterMethod"
@@ -11,10 +11,10 @@
       clearable
       @change="selectchange"
     >
-        <el-tabs v-model="activeName" class="selectTabs demo-tabs" stretch  @tab-click="tabsClick">
-    <el-tab-pane label="资产" name="zhandian"></el-tab-pane>
-    <el-tab-pane label="道路" name="daolu"></el-tab-pane>
-  </el-tabs>
+      <el-tabs v-model="activeName" class="selectTabs demo-tabs" stretch @tab-click="tabsClick">
+        <el-tab-pane label="资产" name="zhandian"></el-tab-pane>
+        <el-tab-pane label="道路" name="daolu"></el-tab-pane>
+      </el-tabs>
       <el-option v-for="(item, index) in filterList" :key="item.id + index + item.id" :label="item.name" :value="item.geometry">
         <el-tooltip
           effect="dark"
@@ -55,42 +55,42 @@
 const selectmodel = ref('');
 const getItem = ref({});
 // 道路数据
-const roadData=ref(
-  [{
-  data:[
+const roadData = ref([
   {
-    id:1,
-    name:'软件园中路',
-    geometry:'',
-    pointTypeName:'什么什么路'
+    data: [
+      {
+        id: 1,
+        name: '软件园中路',
+        geometry: '',
+        pointTypeName: '什么什么路',
+      },
+      {
+        id: 2,
+        name: '光谷大道',
+        geometry: '',
+        pointTypeName: '什么路',
+      },
+      {
+        id: 3,
+        name: '光谷大道1',
+        geometry: '',
+        pointTypeName: '什么路',
+      },
+      {
+        id: 4,
+        name: '光谷大道3',
+        geometry: '',
+        pointTypeName: '什么路',
+      },
+      {
+        id: 5,
+        name: '关山大道',
+        geometry: '',
+        pointTypeName: '1什么路',
+      },
+    ],
   },
-  {
-    id:2,
-    name:'光谷大道',
-    geometry:'',
-    pointTypeName:'什么路'
-  },
-  {
-    id:3,
-    name:'光谷大道1',
-    geometry:'',
-    pointTypeName:'什么路'
-  },
-  {
-    id:4,
-    name:'光谷大道3',
-    geometry:'',
-    pointTypeName:'什么路'
-  },
-  {
-    id:5,
-    name:'关山大道',
-    geometry:'',
-    pointTypeName:'1什么路'
-  },
-]
-  }]
-)
+]);
 watch(
   () => appStore.MapData,
   (newValue, oldValue) => {
@@ -168,17 +168,16 @@
   // bus.emit('removeMapDatas',['temporary']);
 }, 500);
 
-const tabsClick=(e)=>{
-  let type=e.paneName
-  getItem.value=''
-  selectmodel.value=''
-  if(type=='zhandian'){
-    GetSearchList(appStore.MapData)
-  }else if(type=='daolu'){
-    GetSearchList(roadData.value)
-
+const tabsClick = e => {
+  let type = e.paneName;
+  getItem.value = '';
+  selectmodel.value = '';
+  if (type == 'zhandian') {
+    GetSearchList(appStore.MapData);
+  } else if (type == 'daolu') {
+    GetSearchList(roadData.value);
   }
-}
+};
 onMounted(() => {
   bus.on('YQ_head', val => {
     console.log('appStore.MapData', appStore.MapData);
@@ -197,20 +196,21 @@
 <style lang="scss" scoped>
 .inputSearch {
   position: fixed;
-  right: 175px;
+  right: 190px;
   top: 19px;
   z-index: 999;
   border-radius: 6px;
 }
 .selectTabs {
   position: absolute;
-  
+
   width: 100%;
   left: 0;
   top: 0;
 }
 
 :deep(.el-input__wrapper) {
+  height: 30px !important;
   background: #0d2359 !important;
   border-radius: 6px;
   box-shadow: 0 0 0 0.00521rem var(--el-select-input-focus-border-color) inset !important;
@@ -237,9 +237,9 @@
   background: #0d2359 !important;
   border-radius: 6px !important;
   border: 1px solid #0b9bff !important;
-  .el-scrollbar{
-  padding-top: 40px;
-}
+  .el-scrollbar {
+    padding-top: 40px;
+  }
   .el-select-dropdown__item {
     font-family: Source Han Sans CN;
     font-weight: bold;
diff --git a/src/views/pictureOnMap/page/DrainageSystem/YSIndex.vue b/src/views/pictureOnMap/page/DrainageSystem/YSIndex.vue
index ca12460..6f1cdc3 100644
--- a/src/views/pictureOnMap/page/DrainageSystem/YSIndex.vue
+++ b/src/views/pictureOnMap/page/DrainageSystem/YSIndex.vue
@@ -129,16 +129,6 @@
       >
         <!-- 顶部公共标题 -->
         <div class="CrumbesTitle">
-          <!-- 一级 -->
-          <!-- <span
-            class="crumbs2"
-            v-for="item in AllData.TitleName"
-            :key="item.grade"
-            v-show="item.abbreviation"
-          >
-            {{ item.grade != "one" ? "/" : "" }}
-            {{ item.abbreviation ? item.abbreviation : "" }}
-          </span> -->
           <span class="crumbs2">{{ AllData.ClicksiteName }}</span>
         </div>
         <div class="modular1_right">
@@ -236,6 +226,23 @@
         </div>
       </div>
     </Transition>
+    <Transition name="fade_right">
+      <div
+        :class="['moduleBox', 'moduleBoxRight']"
+        v-if="
+          !showPanel &&
+          !AllData.RightShow &&
+          (AllData.regionGrade == 'one' || AllData.regionGrade == 'two')
+        "
+      >
+        <div class="CrumbesTitle">
+          <span class="crumbs2">港渠统计</span>
+        </div>
+        <div class="modularRight2">
+          <YSRight :waterRegionCode="AllData.waterRegionCode"></YSRight>
+        </div>
+      </div>
+    </Transition>
   </div>
 </template>
 
@@ -256,6 +263,7 @@
 import DraLineChartsLeft from "./components/DraLineChartsLeft.vue";
 // 右侧面板接入
 import RightCharts from "./components/RightCharts.vue";
+import YSRight from "./YSIndex_right.vue";
 // 面板控制组件
 import PanelDisplayHidden from "@/views/pictureOnMap/page/components/PanelDisplayHidden.vue";
 const showPanel = ref(false); //面板展开收起
@@ -269,6 +277,7 @@
   regionName: "", //分区名称
   waterRegionCode: "", //分区编号
   RightShow: false, //右侧面板是否显示--基于是否选择站点进行判断
+  RightShowID: "",
   TitleName: [
     {
       abbreviation: "一级分区", //分区缩写-动态
@@ -402,6 +411,7 @@
 const MBClick = (item) => {
   console.log(item);
   AllData.RightShow = false;
+  AllData.RightShowID = "";
   // 赋值需要进行echarts数据请求的数据
   AllData.regionGrade = item.grade;
   AllData.regionName = item.Name;
@@ -538,6 +548,7 @@
   if (Row.layerId == "排水分区") {
     // 片区
     AllData.RightShow = false;
+    AllData.RightShowID = false;
     //   if (!!!Row.properties.pid) return;
     //   原本是判断没有pid就不请求↑↑↑,现在gis图层数据改变,从而使用层级来判断↓↓↓
     if (Row.properties.level == "4") return;
@@ -644,41 +655,48 @@
   } else if (Row.layerId == "point") {
     // 点位
     if (Row.properties.pointType == "rainwater_pipeline_quality") {
-      AllData.ClicksiteName = Row.properties.name;
-      AllData.RightShow = true;
-      //   Row.properties.wellCode
-      //   获取管网信息
-      MonitorAPI.pipelinePointPage({
-        pointNumber: Row.properties.wellCode,
-      }).then((res) => {
-        if (res && res.code == 200) {
-          AllData.GWBD = res.data[0];
-        }
-      });
-      //   根据type 判断是管井还是接驳口
-      if (Row.properties.type == "rainwater_pipeline_quality_area1") {
-        // 接驳口
-        AllData.isJBK = true;
+      if (AllData.RightShowID == Row.properties.id) {
+        // 说明是同样的一个点点了两次,所以进行关闭
+        AllData.RightShow = false;
+        AllData.RightShowID = "";
       } else {
-        // 管井或其他
-        AllData.isJBK = false;
+        AllData.ClicksiteName = Row.properties.name;
+        AllData.RightShow = true;
+        AllData.RightShowID = Row.properties.id;
+        //   Row.properties.wellCode
+        //   获取管网信息
+        MonitorAPI.pipelinePointPage({
+          pointNumber: Row.properties.wellCode,
+        }).then((res) => {
+          if (res && res.code == 200) {
+            AllData.GWBD = res.data[0];
+          }
+        });
+        //   根据type 判断是管井还是接驳口
+        if (Row.properties.type == "rainwater_pipeline_quality_area1") {
+          // 接驳口
+          AllData.isJBK = true;
+        } else {
+          // 管井或其他
+          AllData.isJBK = false;
+        }
+        //   上下游水量分析
+        getDataSXY(Row.properties);
+        //   获取echarts数据
+        //   setTimeout(() => {
+        AllData.chartDataRight = {
+          yAxis: [],
+          yAxis_Name: "降雨量",
+          yAxis2: [],
+          yAxis2_Name: "流速",
+          yAxis3: [],
+          yAxis3_Name: "水深",
+          xAxis: [],
+        };
+        AllData.refreshRight = 0;
+        GetRightCharts(Row.properties);
+        //   }, 900);
       }
-      //   上下游水量分析
-      getDataSXY(Row.properties);
-      //   获取echarts数据
-      //   setTimeout(() => {
-      AllData.chartDataRight = {
-        yAxis: [],
-        yAxis_Name: "降雨量",
-        yAxis2: [],
-        yAxis2_Name: "流速",
-        yAxis3: [],
-        yAxis3_Name: "水深",
-        xAxis: [],
-      };
-      AllData.refreshRight = 0;
-      GetRightCharts(Row.properties);
-      //   }, 900);
     }
   }
 };
@@ -787,7 +805,7 @@
         AllData.refresh1++;
         AllData.TjData1 = res.data.pipelinePointCount
           .reduce((accu, curren) => Number(accu) + Number(curren))
-          .toFixed(2);
+          .toFixed(0);
         AllData.TjData1Unit = "个";
       }
       if (AllData.regionGrade == "four") {
@@ -926,25 +944,25 @@
         res.data.forEach((element) => {
           XData.push(element.lakeName);
           data1.push(element.nowWaterlevel);
-          data2.push(element.fortifyWaterlevel);
+          data2.push(element.bestPromitWaterlevel);
           data3.push(element.volume);
         });
         AllData.chartData1.xAxis = XData; //X轴数据
-        AllData.chartData1.y1_Unit = "m"; //Y轴单位
-        AllData.chartData1.y2_Unit = "万方"; //2号Y轴单位
+        AllData.chartData1.y1_Unit = "万方"; //Y轴单位
+        AllData.chartData1.y2_Unit = "m"; //2号Y轴单位
         AllData.chartData1.y2_show = true; //是否展示右侧的2号轴
         AllData.chartData1.yAxis1_bar = data3; //数据1
         AllData.chartData1.yAxis1_bar_Name = "库容量"; //数据1的名称
-        AllData.chartData1.yAxis1_bar_index = 1;
+        AllData.chartData1.yAxis1_bar_index = 0;
         AllData.chartData1.yAxis2_bar = null; //数据2
         AllData.chartData1.yAxis2_bar_Name = ""; //数据1的名称
         AllData.chartData1.yAxis2_bar_index = 0;
         AllData.chartData1.yAxis2_line = data2;
         AllData.chartData1.yAxis2_line_Name = "控制水位";
-        AllData.chartData1.yAxis2_line_Index = 0;
+        AllData.chartData1.yAxis2_line_Index = 1;
         AllData.chartData1.yAxis3_line = data1;
         AllData.chartData1.yAxis3_line_Name = "当前水位";
-        AllData.chartData1.yAxis3_line_Index = 0;
+        AllData.chartData1.yAxis3_line_Index = 1;
         AllData.refresh1++;
         AllData.TjData1 = null;
         AllData.TjData1Unit = null;
@@ -1080,6 +1098,8 @@
     yAxis3_line_Index: 0,
   };
   AllData.refresh1++;
+  AllData.TjData1 = null;
+  AllData.TjData1Unit = null;
   AllData.chartData3 = {
     xAxis: [], //X轴数据
     y1_Unit: "", //Y轴单位
@@ -1099,6 +1119,8 @@
     yAxis3_line_Index: 0,
   };
   AllData.refresh3++;
+  AllData.TjData3 = null;
+  AllData.TjData3Unit = null;
   AllData.chartData2 = {
     xAxis: [],
     yAxis: [],
@@ -1108,6 +1130,8 @@
     y1_Unit: "km",
   };
   AllData.refresh2++;
+  AllData.TjData2 = null;
+  AllData.TjData2Unit = null;
 };
 onMounted(() => {
   let initeGLTimer = setInterval(() => {
@@ -1152,6 +1176,9 @@
       font-weight: bold;
       font-size: 20px;
       color: #ffffff;
+      overflow: hidden;
+      text-overflow: ellipsis; /* 超出宽度200px后显示省略号 */
+      white-space: nowrap; /* 限制不允许换行 */
     }
   }
   .modular1,
@@ -1276,5 +1303,12 @@
       }
     }
   }
+
+  .modularRight2 {
+    width: 100%;
+    height: calc(100% - 50px);
+    overflow: auto;
+    background: #0d2359;
+  }
 }
 </style>
diff --git a/src/views/pictureOnMap/page/DrainageSystem/YSIndex_right.vue b/src/views/pictureOnMap/page/DrainageSystem/YSIndex_right.vue
new file mode 100644
index 0000000..662d24f
--- /dev/null
+++ b/src/views/pictureOnMap/page/DrainageSystem/YSIndex_right.vue
@@ -0,0 +1,30 @@
+<template>
+  <div id="YSIndex_right">姗姐姗姐姗姐</div>
+</template>
+
+<script setup name="YSIndex_right">
+import { ref, reactive, toRefs, onMounted } from "vue";
+const props = defineProps({
+  //分区编号
+  waterRegionCode: {
+    type: [String],
+    default: "",
+  },
+});
+const AllData = reactive({});
+watch(
+  () => props.waterRegionCode,
+  (val) => {
+    console.log("YSIndex_right:分区编号变了", val);
+  },
+  { immediate: true }
+);
+onMounted(() => {});
+</script>
+
+<style lang="scss" scoped>
+#YSIndex_right {
+  width: 100%;
+  height: 100%;
+}
+</style>

diff --git a/src/views/pictureOnMap/inputSearch.vue b/src/views/pictureOnMap/inputSearch.vue
index ee0ad81..d732a0b 100644
--- a/src/views/pictureOnMap/inputSearch.vue
+++ b/src/views/pictureOnMap/inputSearch.vue
@@ -3,7 +3,7 @@
     <el-select
       v-model="selectmodel"
       placeholder="请输入关键字"
-      style="width: 140px;position: relative;"
+      style="width: 140px; position: relative"
       filterable
       popper-class="inputSearchselectclass"
       :filter-method="filterMethod"
@@ -11,10 +11,10 @@
       clearable
       @change="selectchange"
     >
-        <el-tabs v-model="activeName" class="selectTabs demo-tabs" stretch  @tab-click="tabsClick">
-    <el-tab-pane label="资产" name="zhandian"></el-tab-pane>
-    <el-tab-pane label="道路" name="daolu"></el-tab-pane>
-  </el-tabs>
+      <el-tabs v-model="activeName" class="selectTabs demo-tabs" stretch @tab-click="tabsClick">
+        <el-tab-pane label="资产" name="zhandian"></el-tab-pane>
+        <el-tab-pane label="道路" name="daolu"></el-tab-pane>
+      </el-tabs>
       <el-option v-for="(item, index) in filterList" :key="item.id + index + item.id" :label="item.name" :value="item.geometry">
         <el-tooltip
           effect="dark"
@@ -55,42 +55,42 @@
 const selectmodel = ref('');
 const getItem = ref({});
 // 道路数据
-const roadData=ref(
-  [{
-  data:[
+const roadData = ref([
   {
-    id:1,
-    name:'软件园中路',
-    geometry:'',
-    pointTypeName:'什么什么路'
+    data: [
+      {
+        id: 1,
+        name: '软件园中路',
+        geometry: '',
+        pointTypeName: '什么什么路',
+      },
+      {
+        id: 2,
+        name: '光谷大道',
+        geometry: '',
+        pointTypeName: '什么路',
+      },
+      {
+        id: 3,
+        name: '光谷大道1',
+        geometry: '',
+        pointTypeName: '什么路',
+      },
+      {
+        id: 4,
+        name: '光谷大道3',
+        geometry: '',
+        pointTypeName: '什么路',
+      },
+      {
+        id: 5,
+        name: '关山大道',
+        geometry: '',
+        pointTypeName: '1什么路',
+      },
+    ],
   },
-  {
-    id:2,
-    name:'光谷大道',
-    geometry:'',
-    pointTypeName:'什么路'
-  },
-  {
-    id:3,
-    name:'光谷大道1',
-    geometry:'',
-    pointTypeName:'什么路'
-  },
-  {
-    id:4,
-    name:'光谷大道3',
-    geometry:'',
-    pointTypeName:'什么路'
-  },
-  {
-    id:5,
-    name:'关山大道',
-    geometry:'',
-    pointTypeName:'1什么路'
-  },
-]
-  }]
-)
+]);
 watch(
   () => appStore.MapData,
   (newValue, oldValue) => {
@@ -168,17 +168,16 @@
   // bus.emit('removeMapDatas',['temporary']);
 }, 500);
 
-const tabsClick=(e)=>{
-  let type=e.paneName
-  getItem.value=''
-  selectmodel.value=''
-  if(type=='zhandian'){
-    GetSearchList(appStore.MapData)
-  }else if(type=='daolu'){
-    GetSearchList(roadData.value)
-
+const tabsClick = e => {
+  let type = e.paneName;
+  getItem.value = '';
+  selectmodel.value = '';
+  if (type == 'zhandian') {
+    GetSearchList(appStore.MapData);
+  } else if (type == 'daolu') {
+    GetSearchList(roadData.value);
   }
-}
+};
 onMounted(() => {
   bus.on('YQ_head', val => {
     console.log('appStore.MapData', appStore.MapData);
@@ -197,20 +196,21 @@
 <style lang="scss" scoped>
 .inputSearch {
   position: fixed;
-  right: 175px;
+  right: 190px;
   top: 19px;
   z-index: 999;
   border-radius: 6px;
 }
 .selectTabs {
   position: absolute;
-  
+
   width: 100%;
   left: 0;
   top: 0;
 }
 
 :deep(.el-input__wrapper) {
+  height: 30px !important;
   background: #0d2359 !important;
   border-radius: 6px;
   box-shadow: 0 0 0 0.00521rem var(--el-select-input-focus-border-color) inset !important;
@@ -237,9 +237,9 @@
   background: #0d2359 !important;
   border-radius: 6px !important;
   border: 1px solid #0b9bff !important;
-  .el-scrollbar{
-  padding-top: 40px;
-}
+  .el-scrollbar {
+    padding-top: 40px;
+  }
   .el-select-dropdown__item {
     font-family: Source Han Sans CN;
     font-weight: bold;
diff --git a/src/views/pictureOnMap/page/DrainageSystem/YSIndex.vue b/src/views/pictureOnMap/page/DrainageSystem/YSIndex.vue
index ca12460..6f1cdc3 100644
--- a/src/views/pictureOnMap/page/DrainageSystem/YSIndex.vue
+++ b/src/views/pictureOnMap/page/DrainageSystem/YSIndex.vue
@@ -129,16 +129,6 @@
       >
         <!-- 顶部公共标题 -->
         <div class="CrumbesTitle">
-          <!-- 一级 -->
-          <!-- <span
-            class="crumbs2"
-            v-for="item in AllData.TitleName"
-            :key="item.grade"
-            v-show="item.abbreviation"
-          >
-            {{ item.grade != "one" ? "/" : "" }}
-            {{ item.abbreviation ? item.abbreviation : "" }}
-          </span> -->
           <span class="crumbs2">{{ AllData.ClicksiteName }}</span>
         </div>
         <div class="modular1_right">
@@ -236,6 +226,23 @@
         </div>
       </div>
     </Transition>
+    <Transition name="fade_right">
+      <div
+        :class="['moduleBox', 'moduleBoxRight']"
+        v-if="
+          !showPanel &&
+          !AllData.RightShow &&
+          (AllData.regionGrade == 'one' || AllData.regionGrade == 'two')
+        "
+      >
+        <div class="CrumbesTitle">
+          <span class="crumbs2">港渠统计</span>
+        </div>
+        <div class="modularRight2">
+          <YSRight :waterRegionCode="AllData.waterRegionCode"></YSRight>
+        </div>
+      </div>
+    </Transition>
   </div>
 </template>
 
@@ -256,6 +263,7 @@
 import DraLineChartsLeft from "./components/DraLineChartsLeft.vue";
 // 右侧面板接入
 import RightCharts from "./components/RightCharts.vue";
+import YSRight from "./YSIndex_right.vue";
 // 面板控制组件
 import PanelDisplayHidden from "@/views/pictureOnMap/page/components/PanelDisplayHidden.vue";
 const showPanel = ref(false); //面板展开收起
@@ -269,6 +277,7 @@
   regionName: "", //分区名称
   waterRegionCode: "", //分区编号
   RightShow: false, //右侧面板是否显示--基于是否选择站点进行判断
+  RightShowID: "",
   TitleName: [
     {
       abbreviation: "一级分区", //分区缩写-动态
@@ -402,6 +411,7 @@
 const MBClick = (item) => {
   console.log(item);
   AllData.RightShow = false;
+  AllData.RightShowID = "";
   // 赋值需要进行echarts数据请求的数据
   AllData.regionGrade = item.grade;
   AllData.regionName = item.Name;
@@ -538,6 +548,7 @@
   if (Row.layerId == "排水分区") {
     // 片区
     AllData.RightShow = false;
+    AllData.RightShowID = false;
     //   if (!!!Row.properties.pid) return;
     //   原本是判断没有pid就不请求↑↑↑,现在gis图层数据改变,从而使用层级来判断↓↓↓
     if (Row.properties.level == "4") return;
@@ -644,41 +655,48 @@
   } else if (Row.layerId == "point") {
     // 点位
     if (Row.properties.pointType == "rainwater_pipeline_quality") {
-      AllData.ClicksiteName = Row.properties.name;
-      AllData.RightShow = true;
-      //   Row.properties.wellCode
-      //   获取管网信息
-      MonitorAPI.pipelinePointPage({
-        pointNumber: Row.properties.wellCode,
-      }).then((res) => {
-        if (res && res.code == 200) {
-          AllData.GWBD = res.data[0];
-        }
-      });
-      //   根据type 判断是管井还是接驳口
-      if (Row.properties.type == "rainwater_pipeline_quality_area1") {
-        // 接驳口
-        AllData.isJBK = true;
+      if (AllData.RightShowID == Row.properties.id) {
+        // 说明是同样的一个点点了两次,所以进行关闭
+        AllData.RightShow = false;
+        AllData.RightShowID = "";
       } else {
-        // 管井或其他
-        AllData.isJBK = false;
+        AllData.ClicksiteName = Row.properties.name;
+        AllData.RightShow = true;
+        AllData.RightShowID = Row.properties.id;
+        //   Row.properties.wellCode
+        //   获取管网信息
+        MonitorAPI.pipelinePointPage({
+          pointNumber: Row.properties.wellCode,
+        }).then((res) => {
+          if (res && res.code == 200) {
+            AllData.GWBD = res.data[0];
+          }
+        });
+        //   根据type 判断是管井还是接驳口
+        if (Row.properties.type == "rainwater_pipeline_quality_area1") {
+          // 接驳口
+          AllData.isJBK = true;
+        } else {
+          // 管井或其他
+          AllData.isJBK = false;
+        }
+        //   上下游水量分析
+        getDataSXY(Row.properties);
+        //   获取echarts数据
+        //   setTimeout(() => {
+        AllData.chartDataRight = {
+          yAxis: [],
+          yAxis_Name: "降雨量",
+          yAxis2: [],
+          yAxis2_Name: "流速",
+          yAxis3: [],
+          yAxis3_Name: "水深",
+          xAxis: [],
+        };
+        AllData.refreshRight = 0;
+        GetRightCharts(Row.properties);
+        //   }, 900);
       }
-      //   上下游水量分析
-      getDataSXY(Row.properties);
-      //   获取echarts数据
-      //   setTimeout(() => {
-      AllData.chartDataRight = {
-        yAxis: [],
-        yAxis_Name: "降雨量",
-        yAxis2: [],
-        yAxis2_Name: "流速",
-        yAxis3: [],
-        yAxis3_Name: "水深",
-        xAxis: [],
-      };
-      AllData.refreshRight = 0;
-      GetRightCharts(Row.properties);
-      //   }, 900);
     }
   }
 };
@@ -787,7 +805,7 @@
         AllData.refresh1++;
         AllData.TjData1 = res.data.pipelinePointCount
           .reduce((accu, curren) => Number(accu) + Number(curren))
-          .toFixed(2);
+          .toFixed(0);
         AllData.TjData1Unit = "个";
       }
       if (AllData.regionGrade == "four") {
@@ -926,25 +944,25 @@
         res.data.forEach((element) => {
           XData.push(element.lakeName);
           data1.push(element.nowWaterlevel);
-          data2.push(element.fortifyWaterlevel);
+          data2.push(element.bestPromitWaterlevel);
           data3.push(element.volume);
         });
         AllData.chartData1.xAxis = XData; //X轴数据
-        AllData.chartData1.y1_Unit = "m"; //Y轴单位
-        AllData.chartData1.y2_Unit = "万方"; //2号Y轴单位
+        AllData.chartData1.y1_Unit = "万方"; //Y轴单位
+        AllData.chartData1.y2_Unit = "m"; //2号Y轴单位
         AllData.chartData1.y2_show = true; //是否展示右侧的2号轴
         AllData.chartData1.yAxis1_bar = data3; //数据1
         AllData.chartData1.yAxis1_bar_Name = "库容量"; //数据1的名称
-        AllData.chartData1.yAxis1_bar_index = 1;
+        AllData.chartData1.yAxis1_bar_index = 0;
         AllData.chartData1.yAxis2_bar = null; //数据2
         AllData.chartData1.yAxis2_bar_Name = ""; //数据1的名称
         AllData.chartData1.yAxis2_bar_index = 0;
         AllData.chartData1.yAxis2_line = data2;
         AllData.chartData1.yAxis2_line_Name = "控制水位";
-        AllData.chartData1.yAxis2_line_Index = 0;
+        AllData.chartData1.yAxis2_line_Index = 1;
         AllData.chartData1.yAxis3_line = data1;
         AllData.chartData1.yAxis3_line_Name = "当前水位";
-        AllData.chartData1.yAxis3_line_Index = 0;
+        AllData.chartData1.yAxis3_line_Index = 1;
         AllData.refresh1++;
         AllData.TjData1 = null;
         AllData.TjData1Unit = null;
@@ -1080,6 +1098,8 @@
     yAxis3_line_Index: 0,
   };
   AllData.refresh1++;
+  AllData.TjData1 = null;
+  AllData.TjData1Unit = null;
   AllData.chartData3 = {
     xAxis: [], //X轴数据
     y1_Unit: "", //Y轴单位
@@ -1099,6 +1119,8 @@
     yAxis3_line_Index: 0,
   };
   AllData.refresh3++;
+  AllData.TjData3 = null;
+  AllData.TjData3Unit = null;
   AllData.chartData2 = {
     xAxis: [],
     yAxis: [],
@@ -1108,6 +1130,8 @@
     y1_Unit: "km",
   };
   AllData.refresh2++;
+  AllData.TjData2 = null;
+  AllData.TjData2Unit = null;
 };
 onMounted(() => {
   let initeGLTimer = setInterval(() => {
@@ -1152,6 +1176,9 @@
       font-weight: bold;
       font-size: 20px;
       color: #ffffff;
+      overflow: hidden;
+      text-overflow: ellipsis; /* 超出宽度200px后显示省略号 */
+      white-space: nowrap; /* 限制不允许换行 */
     }
   }
   .modular1,
@@ -1276,5 +1303,12 @@
       }
     }
   }
+
+  .modularRight2 {
+    width: 100%;
+    height: calc(100% - 50px);
+    overflow: auto;
+    background: #0d2359;
+  }
 }
 </style>
diff --git a/src/views/pictureOnMap/page/DrainageSystem/YSIndex_right.vue b/src/views/pictureOnMap/page/DrainageSystem/YSIndex_right.vue
new file mode 100644
index 0000000..662d24f
--- /dev/null
+++ b/src/views/pictureOnMap/page/DrainageSystem/YSIndex_right.vue
@@ -0,0 +1,30 @@
+<template>
+  <div id="YSIndex_right">姗姐姗姐姗姐</div>
+</template>
+
+<script setup name="YSIndex_right">
+import { ref, reactive, toRefs, onMounted } from "vue";
+const props = defineProps({
+  //分区编号
+  waterRegionCode: {
+    type: [String],
+    default: "",
+  },
+});
+const AllData = reactive({});
+watch(
+  () => props.waterRegionCode,
+  (val) => {
+    console.log("YSIndex_right:分区编号变了", val);
+  },
+  { immediate: true }
+);
+onMounted(() => {});
+</script>
+
+<style lang="scss" scoped>
+#YSIndex_right {
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/src/views/pictureOnMap/page/DrainageSystem/components/DraBarCharts2Y.vue b/src/views/pictureOnMap/page/DrainageSystem/components/DraBarCharts2Y.vue
index e421b34..3611592 100644
--- a/src/views/pictureOnMap/page/DrainageSystem/components/DraBarCharts2Y.vue
+++ b/src/views/pictureOnMap/page/DrainageSystem/components/DraBarCharts2Y.vue
@@ -128,6 +128,7 @@
               //   return value.toFixed(2); // 保留两位小数
               // },
             },
+            max: Math.ceil(Math.max.apply(null, props.data.yAxis1_bar) * 1.2),
             nameTextStyle: {
               color: "#AAC1CF",
             },
@@ -181,11 +182,12 @@
           name: props.data.y2_Unit,
           type: "value",
           min: 0,
+          minInterval: 1,
           axisLabel: {
             color: "#AAC1CF",
             show: true,
             // formatter: function (value) {
-            //   return value.toFixed(2); // 保留两位小数
+            //   return value.toFixed(0); // 保留两位小数
             // },
           },
           nameTextStyle: {
@@ -197,7 +199,7 @@
               color: "#2161a8",
             },
           },
-          // alignTicks: true,
+          alignTicks: true,
           position: "right",
           offset: 0,
         });
@@ -226,6 +228,17 @@
                 return value + unit;
               },
             },
+
+            label: {
+              show: true,
+              position: "top",
+              valueAnimation: true,
+              color: "inherit",
+              fontSize: 12,
+              formatter: (params) => {
+                return params.value;
+              },
+            },
           },
           {
             name: props.data.yAxis1_bar_Name,

diff --git a/src/views/pictureOnMap/inputSearch.vue b/src/views/pictureOnMap/inputSearch.vue
index ee0ad81..d732a0b 100644
--- a/src/views/pictureOnMap/inputSearch.vue
+++ b/src/views/pictureOnMap/inputSearch.vue
@@ -3,7 +3,7 @@
     <el-select
       v-model="selectmodel"
       placeholder="请输入关键字"
-      style="width: 140px;position: relative;"
+      style="width: 140px; position: relative"
       filterable
       popper-class="inputSearchselectclass"
       :filter-method="filterMethod"
@@ -11,10 +11,10 @@
       clearable
       @change="selectchange"
     >
-        <el-tabs v-model="activeName" class="selectTabs demo-tabs" stretch  @tab-click="tabsClick">
-    <el-tab-pane label="资产" name="zhandian"></el-tab-pane>
-    <el-tab-pane label="道路" name="daolu"></el-tab-pane>
-  </el-tabs>
+      <el-tabs v-model="activeName" class="selectTabs demo-tabs" stretch @tab-click="tabsClick">
+        <el-tab-pane label="资产" name="zhandian"></el-tab-pane>
+        <el-tab-pane label="道路" name="daolu"></el-tab-pane>
+      </el-tabs>
       <el-option v-for="(item, index) in filterList" :key="item.id + index + item.id" :label="item.name" :value="item.geometry">
         <el-tooltip
           effect="dark"
@@ -55,42 +55,42 @@
 const selectmodel = ref('');
 const getItem = ref({});
 // 道路数据
-const roadData=ref(
-  [{
-  data:[
+const roadData = ref([
   {
-    id:1,
-    name:'软件园中路',
-    geometry:'',
-    pointTypeName:'什么什么路'
+    data: [
+      {
+        id: 1,
+        name: '软件园中路',
+        geometry: '',
+        pointTypeName: '什么什么路',
+      },
+      {
+        id: 2,
+        name: '光谷大道',
+        geometry: '',
+        pointTypeName: '什么路',
+      },
+      {
+        id: 3,
+        name: '光谷大道1',
+        geometry: '',
+        pointTypeName: '什么路',
+      },
+      {
+        id: 4,
+        name: '光谷大道3',
+        geometry: '',
+        pointTypeName: '什么路',
+      },
+      {
+        id: 5,
+        name: '关山大道',
+        geometry: '',
+        pointTypeName: '1什么路',
+      },
+    ],
   },
-  {
-    id:2,
-    name:'光谷大道',
-    geometry:'',
-    pointTypeName:'什么路'
-  },
-  {
-    id:3,
-    name:'光谷大道1',
-    geometry:'',
-    pointTypeName:'什么路'
-  },
-  {
-    id:4,
-    name:'光谷大道3',
-    geometry:'',
-    pointTypeName:'什么路'
-  },
-  {
-    id:5,
-    name:'关山大道',
-    geometry:'',
-    pointTypeName:'1什么路'
-  },
-]
-  }]
-)
+]);
 watch(
   () => appStore.MapData,
   (newValue, oldValue) => {
@@ -168,17 +168,16 @@
   // bus.emit('removeMapDatas',['temporary']);
 }, 500);
 
-const tabsClick=(e)=>{
-  let type=e.paneName
-  getItem.value=''
-  selectmodel.value=''
-  if(type=='zhandian'){
-    GetSearchList(appStore.MapData)
-  }else if(type=='daolu'){
-    GetSearchList(roadData.value)
-
+const tabsClick = e => {
+  let type = e.paneName;
+  getItem.value = '';
+  selectmodel.value = '';
+  if (type == 'zhandian') {
+    GetSearchList(appStore.MapData);
+  } else if (type == 'daolu') {
+    GetSearchList(roadData.value);
   }
-}
+};
 onMounted(() => {
   bus.on('YQ_head', val => {
     console.log('appStore.MapData', appStore.MapData);
@@ -197,20 +196,21 @@
 <style lang="scss" scoped>
 .inputSearch {
   position: fixed;
-  right: 175px;
+  right: 190px;
   top: 19px;
   z-index: 999;
   border-radius: 6px;
 }
 .selectTabs {
   position: absolute;
-  
+
   width: 100%;
   left: 0;
   top: 0;
 }
 
 :deep(.el-input__wrapper) {
+  height: 30px !important;
   background: #0d2359 !important;
   border-radius: 6px;
   box-shadow: 0 0 0 0.00521rem var(--el-select-input-focus-border-color) inset !important;
@@ -237,9 +237,9 @@
   background: #0d2359 !important;
   border-radius: 6px !important;
   border: 1px solid #0b9bff !important;
-  .el-scrollbar{
-  padding-top: 40px;
-}
+  .el-scrollbar {
+    padding-top: 40px;
+  }
   .el-select-dropdown__item {
     font-family: Source Han Sans CN;
     font-weight: bold;
diff --git a/src/views/pictureOnMap/page/DrainageSystem/YSIndex.vue b/src/views/pictureOnMap/page/DrainageSystem/YSIndex.vue
index ca12460..6f1cdc3 100644
--- a/src/views/pictureOnMap/page/DrainageSystem/YSIndex.vue
+++ b/src/views/pictureOnMap/page/DrainageSystem/YSIndex.vue
@@ -129,16 +129,6 @@
       >
         <!-- 顶部公共标题 -->
         <div class="CrumbesTitle">
-          <!-- 一级 -->
-          <!-- <span
-            class="crumbs2"
-            v-for="item in AllData.TitleName"
-            :key="item.grade"
-            v-show="item.abbreviation"
-          >
-            {{ item.grade != "one" ? "/" : "" }}
-            {{ item.abbreviation ? item.abbreviation : "" }}
-          </span> -->
           <span class="crumbs2">{{ AllData.ClicksiteName }}</span>
         </div>
         <div class="modular1_right">
@@ -236,6 +226,23 @@
         </div>
       </div>
     </Transition>
+    <Transition name="fade_right">
+      <div
+        :class="['moduleBox', 'moduleBoxRight']"
+        v-if="
+          !showPanel &&
+          !AllData.RightShow &&
+          (AllData.regionGrade == 'one' || AllData.regionGrade == 'two')
+        "
+      >
+        <div class="CrumbesTitle">
+          <span class="crumbs2">港渠统计</span>
+        </div>
+        <div class="modularRight2">
+          <YSRight :waterRegionCode="AllData.waterRegionCode"></YSRight>
+        </div>
+      </div>
+    </Transition>
   </div>
 </template>
 
@@ -256,6 +263,7 @@
 import DraLineChartsLeft from "./components/DraLineChartsLeft.vue";
 // 右侧面板接入
 import RightCharts from "./components/RightCharts.vue";
+import YSRight from "./YSIndex_right.vue";
 // 面板控制组件
 import PanelDisplayHidden from "@/views/pictureOnMap/page/components/PanelDisplayHidden.vue";
 const showPanel = ref(false); //面板展开收起
@@ -269,6 +277,7 @@
   regionName: "", //分区名称
   waterRegionCode: "", //分区编号
   RightShow: false, //右侧面板是否显示--基于是否选择站点进行判断
+  RightShowID: "",
   TitleName: [
     {
       abbreviation: "一级分区", //分区缩写-动态
@@ -402,6 +411,7 @@
 const MBClick = (item) => {
   console.log(item);
   AllData.RightShow = false;
+  AllData.RightShowID = "";
   // 赋值需要进行echarts数据请求的数据
   AllData.regionGrade = item.grade;
   AllData.regionName = item.Name;
@@ -538,6 +548,7 @@
   if (Row.layerId == "排水分区") {
     // 片区
     AllData.RightShow = false;
+    AllData.RightShowID = false;
     //   if (!!!Row.properties.pid) return;
     //   原本是判断没有pid就不请求↑↑↑,现在gis图层数据改变,从而使用层级来判断↓↓↓
     if (Row.properties.level == "4") return;
@@ -644,41 +655,48 @@
   } else if (Row.layerId == "point") {
     // 点位
     if (Row.properties.pointType == "rainwater_pipeline_quality") {
-      AllData.ClicksiteName = Row.properties.name;
-      AllData.RightShow = true;
-      //   Row.properties.wellCode
-      //   获取管网信息
-      MonitorAPI.pipelinePointPage({
-        pointNumber: Row.properties.wellCode,
-      }).then((res) => {
-        if (res && res.code == 200) {
-          AllData.GWBD = res.data[0];
-        }
-      });
-      //   根据type 判断是管井还是接驳口
-      if (Row.properties.type == "rainwater_pipeline_quality_area1") {
-        // 接驳口
-        AllData.isJBK = true;
+      if (AllData.RightShowID == Row.properties.id) {
+        // 说明是同样的一个点点了两次,所以进行关闭
+        AllData.RightShow = false;
+        AllData.RightShowID = "";
       } else {
-        // 管井或其他
-        AllData.isJBK = false;
+        AllData.ClicksiteName = Row.properties.name;
+        AllData.RightShow = true;
+        AllData.RightShowID = Row.properties.id;
+        //   Row.properties.wellCode
+        //   获取管网信息
+        MonitorAPI.pipelinePointPage({
+          pointNumber: Row.properties.wellCode,
+        }).then((res) => {
+          if (res && res.code == 200) {
+            AllData.GWBD = res.data[0];
+          }
+        });
+        //   根据type 判断是管井还是接驳口
+        if (Row.properties.type == "rainwater_pipeline_quality_area1") {
+          // 接驳口
+          AllData.isJBK = true;
+        } else {
+          // 管井或其他
+          AllData.isJBK = false;
+        }
+        //   上下游水量分析
+        getDataSXY(Row.properties);
+        //   获取echarts数据
+        //   setTimeout(() => {
+        AllData.chartDataRight = {
+          yAxis: [],
+          yAxis_Name: "降雨量",
+          yAxis2: [],
+          yAxis2_Name: "流速",
+          yAxis3: [],
+          yAxis3_Name: "水深",
+          xAxis: [],
+        };
+        AllData.refreshRight = 0;
+        GetRightCharts(Row.properties);
+        //   }, 900);
       }
-      //   上下游水量分析
-      getDataSXY(Row.properties);
-      //   获取echarts数据
-      //   setTimeout(() => {
-      AllData.chartDataRight = {
-        yAxis: [],
-        yAxis_Name: "降雨量",
-        yAxis2: [],
-        yAxis2_Name: "流速",
-        yAxis3: [],
-        yAxis3_Name: "水深",
-        xAxis: [],
-      };
-      AllData.refreshRight = 0;
-      GetRightCharts(Row.properties);
-      //   }, 900);
     }
   }
 };
@@ -787,7 +805,7 @@
         AllData.refresh1++;
         AllData.TjData1 = res.data.pipelinePointCount
           .reduce((accu, curren) => Number(accu) + Number(curren))
-          .toFixed(2);
+          .toFixed(0);
         AllData.TjData1Unit = "个";
       }
       if (AllData.regionGrade == "four") {
@@ -926,25 +944,25 @@
         res.data.forEach((element) => {
           XData.push(element.lakeName);
           data1.push(element.nowWaterlevel);
-          data2.push(element.fortifyWaterlevel);
+          data2.push(element.bestPromitWaterlevel);
           data3.push(element.volume);
         });
         AllData.chartData1.xAxis = XData; //X轴数据
-        AllData.chartData1.y1_Unit = "m"; //Y轴单位
-        AllData.chartData1.y2_Unit = "万方"; //2号Y轴单位
+        AllData.chartData1.y1_Unit = "万方"; //Y轴单位
+        AllData.chartData1.y2_Unit = "m"; //2号Y轴单位
         AllData.chartData1.y2_show = true; //是否展示右侧的2号轴
         AllData.chartData1.yAxis1_bar = data3; //数据1
         AllData.chartData1.yAxis1_bar_Name = "库容量"; //数据1的名称
-        AllData.chartData1.yAxis1_bar_index = 1;
+        AllData.chartData1.yAxis1_bar_index = 0;
         AllData.chartData1.yAxis2_bar = null; //数据2
         AllData.chartData1.yAxis2_bar_Name = ""; //数据1的名称
         AllData.chartData1.yAxis2_bar_index = 0;
         AllData.chartData1.yAxis2_line = data2;
         AllData.chartData1.yAxis2_line_Name = "控制水位";
-        AllData.chartData1.yAxis2_line_Index = 0;
+        AllData.chartData1.yAxis2_line_Index = 1;
         AllData.chartData1.yAxis3_line = data1;
         AllData.chartData1.yAxis3_line_Name = "当前水位";
-        AllData.chartData1.yAxis3_line_Index = 0;
+        AllData.chartData1.yAxis3_line_Index = 1;
         AllData.refresh1++;
         AllData.TjData1 = null;
         AllData.TjData1Unit = null;
@@ -1080,6 +1098,8 @@
     yAxis3_line_Index: 0,
   };
   AllData.refresh1++;
+  AllData.TjData1 = null;
+  AllData.TjData1Unit = null;
   AllData.chartData3 = {
     xAxis: [], //X轴数据
     y1_Unit: "", //Y轴单位
@@ -1099,6 +1119,8 @@
     yAxis3_line_Index: 0,
   };
   AllData.refresh3++;
+  AllData.TjData3 = null;
+  AllData.TjData3Unit = null;
   AllData.chartData2 = {
     xAxis: [],
     yAxis: [],
@@ -1108,6 +1130,8 @@
     y1_Unit: "km",
   };
   AllData.refresh2++;
+  AllData.TjData2 = null;
+  AllData.TjData2Unit = null;
 };
 onMounted(() => {
   let initeGLTimer = setInterval(() => {
@@ -1152,6 +1176,9 @@
       font-weight: bold;
       font-size: 20px;
       color: #ffffff;
+      overflow: hidden;
+      text-overflow: ellipsis; /* 超出宽度200px后显示省略号 */
+      white-space: nowrap; /* 限制不允许换行 */
     }
   }
   .modular1,
@@ -1276,5 +1303,12 @@
       }
     }
   }
+
+  .modularRight2 {
+    width: 100%;
+    height: calc(100% - 50px);
+    overflow: auto;
+    background: #0d2359;
+  }
 }
 </style>
diff --git a/src/views/pictureOnMap/page/DrainageSystem/YSIndex_right.vue b/src/views/pictureOnMap/page/DrainageSystem/YSIndex_right.vue
new file mode 100644
index 0000000..662d24f
--- /dev/null
+++ b/src/views/pictureOnMap/page/DrainageSystem/YSIndex_right.vue
@@ -0,0 +1,30 @@
+<template>
+  <div id="YSIndex_right">姗姐姗姐姗姐</div>
+</template>
+
+<script setup name="YSIndex_right">
+import { ref, reactive, toRefs, onMounted } from "vue";
+const props = defineProps({
+  //分区编号
+  waterRegionCode: {
+    type: [String],
+    default: "",
+  },
+});
+const AllData = reactive({});
+watch(
+  () => props.waterRegionCode,
+  (val) => {
+    console.log("YSIndex_right:分区编号变了", val);
+  },
+  { immediate: true }
+);
+onMounted(() => {});
+</script>
+
+<style lang="scss" scoped>
+#YSIndex_right {
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/src/views/pictureOnMap/page/DrainageSystem/components/DraBarCharts2Y.vue b/src/views/pictureOnMap/page/DrainageSystem/components/DraBarCharts2Y.vue
index e421b34..3611592 100644
--- a/src/views/pictureOnMap/page/DrainageSystem/components/DraBarCharts2Y.vue
+++ b/src/views/pictureOnMap/page/DrainageSystem/components/DraBarCharts2Y.vue
@@ -128,6 +128,7 @@
               //   return value.toFixed(2); // 保留两位小数
               // },
             },
+            max: Math.ceil(Math.max.apply(null, props.data.yAxis1_bar) * 1.2),
             nameTextStyle: {
               color: "#AAC1CF",
             },
@@ -181,11 +182,12 @@
           name: props.data.y2_Unit,
           type: "value",
           min: 0,
+          minInterval: 1,
           axisLabel: {
             color: "#AAC1CF",
             show: true,
             // formatter: function (value) {
-            //   return value.toFixed(2); // 保留两位小数
+            //   return value.toFixed(0); // 保留两位小数
             // },
           },
           nameTextStyle: {
@@ -197,7 +199,7 @@
               color: "#2161a8",
             },
           },
-          // alignTicks: true,
+          alignTicks: true,
           position: "right",
           offset: 0,
         });
@@ -226,6 +228,17 @@
                 return value + unit;
               },
             },
+
+            label: {
+              show: true,
+              position: "top",
+              valueAnimation: true,
+              color: "inherit",
+              fontSize: 12,
+              formatter: (params) => {
+                return params.value;
+              },
+            },
           },
           {
             name: props.data.yAxis1_bar_Name,
diff --git a/src/views/pictureOnMap/page/DrainageSystem/components/DraBarChartsLeft.vue b/src/views/pictureOnMap/page/DrainageSystem/components/DraBarChartsLeft.vue
index 727f6a8..b12fa14 100644
--- a/src/views/pictureOnMap/page/DrainageSystem/components/DraBarChartsLeft.vue
+++ b/src/views/pictureOnMap/page/DrainageSystem/components/DraBarChartsLeft.vue
@@ -70,7 +70,7 @@
         },
         legend: {
           textStyle: {
-            color: "#FFFFFF", // 这里设置为红色
+            color: "#FFFFFF",
           },
         },
         grid: {
@@ -87,7 +87,7 @@
             align: "right",
             fontSize: 10,
           },
-          max: Math.ceil(Math.max.apply(null, props.data.yAxis2) * 1.1),
+          max: Math.ceil(Math.max.apply(null, props.data.yAxis2) * 1.2),
           nameLocation: "start",
           type: "value",
           minInterval: 1,
@@ -109,7 +109,7 @@
           axisLabel: {
             color: "#EBFEFF",
             show: true,
-            fontSize: 12,
+            fontSize: props.data.xAxis.length > 8 ? 8 : 12,
           },
           nameTextStyle: {
             color: "#FFFFFF",
@@ -119,31 +119,48 @@
           {
             name: props.data.yAxis2_Name,
             type: "bar",
-            barWidth: 10,
+            // barWidth: 10,
             // label: {
             //   show: true,
             // },
             data: props.data.yAxis2,
             barGap: "-100%",
             itemStyle: {
-              borderRadius: [20, 20, 20, 20],
+              borderRadius: [0, 20, 20, 0],
               color: "#31FEDF",
             },
+            label: {
+              show: true,
+              position: "right",
+              valueAnimation: true,
+              color: "inherit",
+              fontSize: 12,
+              formatter: (params) => {
+                return params.value + props.data.y1_Unit;
+              },
+            },
           },
           {
             name: props.data.yAxis_Name,
             type: "bar",
-            barWidth: 10,
+            // barWidth: 10,
             // label: {
             //   show: true,
             // },
             data: props.data.yAxis,
             itemStyle: {
               borderRadius: [20, 20, 20, 20],
-              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
-                { offset: 0, color: "#FF6464" },
-                { offset: 1, color: "#FF9A9A" },
-              ]),
+              color: "#FF6464",
+            },
+            label: {
+              show: false,
+              position: "right",
+              valueAnimation: true,
+              color: "inherit",
+              fontSize: 12,
+              formatter: (params) => {
+                return params.value + props.data.y1_Unit;
+              },
             },
           },
         ],

diff --git a/src/views/pictureOnMap/inputSearch.vue b/src/views/pictureOnMap/inputSearch.vue
index ee0ad81..d732a0b 100644
--- a/src/views/pictureOnMap/inputSearch.vue
+++ b/src/views/pictureOnMap/inputSearch.vue
@@ -3,7 +3,7 @@
     <el-select
       v-model="selectmodel"
       placeholder="请输入关键字"
-      style="width: 140px;position: relative;"
+      style="width: 140px; position: relative"
       filterable
       popper-class="inputSearchselectclass"
       :filter-method="filterMethod"
@@ -11,10 +11,10 @@
       clearable
       @change="selectchange"
     >
-        <el-tabs v-model="activeName" class="selectTabs demo-tabs" stretch  @tab-click="tabsClick">
-    <el-tab-pane label="资产" name="zhandian"></el-tab-pane>
-    <el-tab-pane label="道路" name="daolu"></el-tab-pane>
-  </el-tabs>
+      <el-tabs v-model="activeName" class="selectTabs demo-tabs" stretch @tab-click="tabsClick">
+        <el-tab-pane label="资产" name="zhandian"></el-tab-pane>
+        <el-tab-pane label="道路" name="daolu"></el-tab-pane>
+      </el-tabs>
       <el-option v-for="(item, index) in filterList" :key="item.id + index + item.id" :label="item.name" :value="item.geometry">
         <el-tooltip
           effect="dark"
@@ -55,42 +55,42 @@
 const selectmodel = ref('');
 const getItem = ref({});
 // 道路数据
-const roadData=ref(
-  [{
-  data:[
+const roadData = ref([
   {
-    id:1,
-    name:'软件园中路',
-    geometry:'',
-    pointTypeName:'什么什么路'
+    data: [
+      {
+        id: 1,
+        name: '软件园中路',
+        geometry: '',
+        pointTypeName: '什么什么路',
+      },
+      {
+        id: 2,
+        name: '光谷大道',
+        geometry: '',
+        pointTypeName: '什么路',
+      },
+      {
+        id: 3,
+        name: '光谷大道1',
+        geometry: '',
+        pointTypeName: '什么路',
+      },
+      {
+        id: 4,
+        name: '光谷大道3',
+        geometry: '',
+        pointTypeName: '什么路',
+      },
+      {
+        id: 5,
+        name: '关山大道',
+        geometry: '',
+        pointTypeName: '1什么路',
+      },
+    ],
   },
-  {
-    id:2,
-    name:'光谷大道',
-    geometry:'',
-    pointTypeName:'什么路'
-  },
-  {
-    id:3,
-    name:'光谷大道1',
-    geometry:'',
-    pointTypeName:'什么路'
-  },
-  {
-    id:4,
-    name:'光谷大道3',
-    geometry:'',
-    pointTypeName:'什么路'
-  },
-  {
-    id:5,
-    name:'关山大道',
-    geometry:'',
-    pointTypeName:'1什么路'
-  },
-]
-  }]
-)
+]);
 watch(
   () => appStore.MapData,
   (newValue, oldValue) => {
@@ -168,17 +168,16 @@
   // bus.emit('removeMapDatas',['temporary']);
 }, 500);
 
-const tabsClick=(e)=>{
-  let type=e.paneName
-  getItem.value=''
-  selectmodel.value=''
-  if(type=='zhandian'){
-    GetSearchList(appStore.MapData)
-  }else if(type=='daolu'){
-    GetSearchList(roadData.value)
-
+const tabsClick = e => {
+  let type = e.paneName;
+  getItem.value = '';
+  selectmodel.value = '';
+  if (type == 'zhandian') {
+    GetSearchList(appStore.MapData);
+  } else if (type == 'daolu') {
+    GetSearchList(roadData.value);
   }
-}
+};
 onMounted(() => {
   bus.on('YQ_head', val => {
     console.log('appStore.MapData', appStore.MapData);
@@ -197,20 +196,21 @@
 <style lang="scss" scoped>
 .inputSearch {
   position: fixed;
-  right: 175px;
+  right: 190px;
   top: 19px;
   z-index: 999;
   border-radius: 6px;
 }
 .selectTabs {
   position: absolute;
-  
+
   width: 100%;
   left: 0;
   top: 0;
 }
 
 :deep(.el-input__wrapper) {
+  height: 30px !important;
   background: #0d2359 !important;
   border-radius: 6px;
   box-shadow: 0 0 0 0.00521rem var(--el-select-input-focus-border-color) inset !important;
@@ -237,9 +237,9 @@
   background: #0d2359 !important;
   border-radius: 6px !important;
   border: 1px solid #0b9bff !important;
-  .el-scrollbar{
-  padding-top: 40px;
-}
+  .el-scrollbar {
+    padding-top: 40px;
+  }
   .el-select-dropdown__item {
     font-family: Source Han Sans CN;
     font-weight: bold;
diff --git a/src/views/pictureOnMap/page/DrainageSystem/YSIndex.vue b/src/views/pictureOnMap/page/DrainageSystem/YSIndex.vue
index ca12460..6f1cdc3 100644
--- a/src/views/pictureOnMap/page/DrainageSystem/YSIndex.vue
+++ b/src/views/pictureOnMap/page/DrainageSystem/YSIndex.vue
@@ -129,16 +129,6 @@
       >
         <!-- 顶部公共标题 -->
         <div class="CrumbesTitle">
-          <!-- 一级 -->
-          <!-- <span
-            class="crumbs2"
-            v-for="item in AllData.TitleName"
-            :key="item.grade"
-            v-show="item.abbreviation"
-          >
-            {{ item.grade != "one" ? "/" : "" }}
-            {{ item.abbreviation ? item.abbreviation : "" }}
-          </span> -->
           <span class="crumbs2">{{ AllData.ClicksiteName }}</span>
         </div>
         <div class="modular1_right">
@@ -236,6 +226,23 @@
         </div>
       </div>
     </Transition>
+    <Transition name="fade_right">
+      <div
+        :class="['moduleBox', 'moduleBoxRight']"
+        v-if="
+          !showPanel &&
+          !AllData.RightShow &&
+          (AllData.regionGrade == 'one' || AllData.regionGrade == 'two')
+        "
+      >
+        <div class="CrumbesTitle">
+          <span class="crumbs2">港渠统计</span>
+        </div>
+        <div class="modularRight2">
+          <YSRight :waterRegionCode="AllData.waterRegionCode"></YSRight>
+        </div>
+      </div>
+    </Transition>
   </div>
 </template>
 
@@ -256,6 +263,7 @@
 import DraLineChartsLeft from "./components/DraLineChartsLeft.vue";
 // 右侧面板接入
 import RightCharts from "./components/RightCharts.vue";
+import YSRight from "./YSIndex_right.vue";
 // 面板控制组件
 import PanelDisplayHidden from "@/views/pictureOnMap/page/components/PanelDisplayHidden.vue";
 const showPanel = ref(false); //面板展开收起
@@ -269,6 +277,7 @@
   regionName: "", //分区名称
   waterRegionCode: "", //分区编号
   RightShow: false, //右侧面板是否显示--基于是否选择站点进行判断
+  RightShowID: "",
   TitleName: [
     {
       abbreviation: "一级分区", //分区缩写-动态
@@ -402,6 +411,7 @@
 const MBClick = (item) => {
   console.log(item);
   AllData.RightShow = false;
+  AllData.RightShowID = "";
   // 赋值需要进行echarts数据请求的数据
   AllData.regionGrade = item.grade;
   AllData.regionName = item.Name;
@@ -538,6 +548,7 @@
   if (Row.layerId == "排水分区") {
     // 片区
     AllData.RightShow = false;
+    AllData.RightShowID = false;
     //   if (!!!Row.properties.pid) return;
     //   原本是判断没有pid就不请求↑↑↑,现在gis图层数据改变,从而使用层级来判断↓↓↓
     if (Row.properties.level == "4") return;
@@ -644,41 +655,48 @@
   } else if (Row.layerId == "point") {
     // 点位
     if (Row.properties.pointType == "rainwater_pipeline_quality") {
-      AllData.ClicksiteName = Row.properties.name;
-      AllData.RightShow = true;
-      //   Row.properties.wellCode
-      //   获取管网信息
-      MonitorAPI.pipelinePointPage({
-        pointNumber: Row.properties.wellCode,
-      }).then((res) => {
-        if (res && res.code == 200) {
-          AllData.GWBD = res.data[0];
-        }
-      });
-      //   根据type 判断是管井还是接驳口
-      if (Row.properties.type == "rainwater_pipeline_quality_area1") {
-        // 接驳口
-        AllData.isJBK = true;
+      if (AllData.RightShowID == Row.properties.id) {
+        // 说明是同样的一个点点了两次,所以进行关闭
+        AllData.RightShow = false;
+        AllData.RightShowID = "";
       } else {
-        // 管井或其他
-        AllData.isJBK = false;
+        AllData.ClicksiteName = Row.properties.name;
+        AllData.RightShow = true;
+        AllData.RightShowID = Row.properties.id;
+        //   Row.properties.wellCode
+        //   获取管网信息
+        MonitorAPI.pipelinePointPage({
+          pointNumber: Row.properties.wellCode,
+        }).then((res) => {
+          if (res && res.code == 200) {
+            AllData.GWBD = res.data[0];
+          }
+        });
+        //   根据type 判断是管井还是接驳口
+        if (Row.properties.type == "rainwater_pipeline_quality_area1") {
+          // 接驳口
+          AllData.isJBK = true;
+        } else {
+          // 管井或其他
+          AllData.isJBK = false;
+        }
+        //   上下游水量分析
+        getDataSXY(Row.properties);
+        //   获取echarts数据
+        //   setTimeout(() => {
+        AllData.chartDataRight = {
+          yAxis: [],
+          yAxis_Name: "降雨量",
+          yAxis2: [],
+          yAxis2_Name: "流速",
+          yAxis3: [],
+          yAxis3_Name: "水深",
+          xAxis: [],
+        };
+        AllData.refreshRight = 0;
+        GetRightCharts(Row.properties);
+        //   }, 900);
       }
-      //   上下游水量分析
-      getDataSXY(Row.properties);
-      //   获取echarts数据
-      //   setTimeout(() => {
-      AllData.chartDataRight = {
-        yAxis: [],
-        yAxis_Name: "降雨量",
-        yAxis2: [],
-        yAxis2_Name: "流速",
-        yAxis3: [],
-        yAxis3_Name: "水深",
-        xAxis: [],
-      };
-      AllData.refreshRight = 0;
-      GetRightCharts(Row.properties);
-      //   }, 900);
     }
   }
 };
@@ -787,7 +805,7 @@
         AllData.refresh1++;
         AllData.TjData1 = res.data.pipelinePointCount
           .reduce((accu, curren) => Number(accu) + Number(curren))
-          .toFixed(2);
+          .toFixed(0);
         AllData.TjData1Unit = "个";
       }
       if (AllData.regionGrade == "four") {
@@ -926,25 +944,25 @@
         res.data.forEach((element) => {
           XData.push(element.lakeName);
           data1.push(element.nowWaterlevel);
-          data2.push(element.fortifyWaterlevel);
+          data2.push(element.bestPromitWaterlevel);
           data3.push(element.volume);
         });
         AllData.chartData1.xAxis = XData; //X轴数据
-        AllData.chartData1.y1_Unit = "m"; //Y轴单位
-        AllData.chartData1.y2_Unit = "万方"; //2号Y轴单位
+        AllData.chartData1.y1_Unit = "万方"; //Y轴单位
+        AllData.chartData1.y2_Unit = "m"; //2号Y轴单位
         AllData.chartData1.y2_show = true; //是否展示右侧的2号轴
         AllData.chartData1.yAxis1_bar = data3; //数据1
         AllData.chartData1.yAxis1_bar_Name = "库容量"; //数据1的名称
-        AllData.chartData1.yAxis1_bar_index = 1;
+        AllData.chartData1.yAxis1_bar_index = 0;
         AllData.chartData1.yAxis2_bar = null; //数据2
         AllData.chartData1.yAxis2_bar_Name = ""; //数据1的名称
         AllData.chartData1.yAxis2_bar_index = 0;
         AllData.chartData1.yAxis2_line = data2;
         AllData.chartData1.yAxis2_line_Name = "控制水位";
-        AllData.chartData1.yAxis2_line_Index = 0;
+        AllData.chartData1.yAxis2_line_Index = 1;
         AllData.chartData1.yAxis3_line = data1;
         AllData.chartData1.yAxis3_line_Name = "当前水位";
-        AllData.chartData1.yAxis3_line_Index = 0;
+        AllData.chartData1.yAxis3_line_Index = 1;
         AllData.refresh1++;
         AllData.TjData1 = null;
         AllData.TjData1Unit = null;
@@ -1080,6 +1098,8 @@
     yAxis3_line_Index: 0,
   };
   AllData.refresh1++;
+  AllData.TjData1 = null;
+  AllData.TjData1Unit = null;
   AllData.chartData3 = {
     xAxis: [], //X轴数据
     y1_Unit: "", //Y轴单位
@@ -1099,6 +1119,8 @@
     yAxis3_line_Index: 0,
   };
   AllData.refresh3++;
+  AllData.TjData3 = null;
+  AllData.TjData3Unit = null;
   AllData.chartData2 = {
     xAxis: [],
     yAxis: [],
@@ -1108,6 +1130,8 @@
     y1_Unit: "km",
   };
   AllData.refresh2++;
+  AllData.TjData2 = null;
+  AllData.TjData2Unit = null;
 };
 onMounted(() => {
   let initeGLTimer = setInterval(() => {
@@ -1152,6 +1176,9 @@
       font-weight: bold;
       font-size: 20px;
       color: #ffffff;
+      overflow: hidden;
+      text-overflow: ellipsis; /* 超出宽度200px后显示省略号 */
+      white-space: nowrap; /* 限制不允许换行 */
     }
   }
   .modular1,
@@ -1276,5 +1303,12 @@
       }
     }
   }
+
+  .modularRight2 {
+    width: 100%;
+    height: calc(100% - 50px);
+    overflow: auto;
+    background: #0d2359;
+  }
 }
 </style>
diff --git a/src/views/pictureOnMap/page/DrainageSystem/YSIndex_right.vue b/src/views/pictureOnMap/page/DrainageSystem/YSIndex_right.vue
new file mode 100644
index 0000000..662d24f
--- /dev/null
+++ b/src/views/pictureOnMap/page/DrainageSystem/YSIndex_right.vue
@@ -0,0 +1,30 @@
+<template>
+  <div id="YSIndex_right">姗姐姗姐姗姐</div>
+</template>
+
+<script setup name="YSIndex_right">
+import { ref, reactive, toRefs, onMounted } from "vue";
+const props = defineProps({
+  //分区编号
+  waterRegionCode: {
+    type: [String],
+    default: "",
+  },
+});
+const AllData = reactive({});
+watch(
+  () => props.waterRegionCode,
+  (val) => {
+    console.log("YSIndex_right:分区编号变了", val);
+  },
+  { immediate: true }
+);
+onMounted(() => {});
+</script>
+
+<style lang="scss" scoped>
+#YSIndex_right {
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/src/views/pictureOnMap/page/DrainageSystem/components/DraBarCharts2Y.vue b/src/views/pictureOnMap/page/DrainageSystem/components/DraBarCharts2Y.vue
index e421b34..3611592 100644
--- a/src/views/pictureOnMap/page/DrainageSystem/components/DraBarCharts2Y.vue
+++ b/src/views/pictureOnMap/page/DrainageSystem/components/DraBarCharts2Y.vue
@@ -128,6 +128,7 @@
               //   return value.toFixed(2); // 保留两位小数
               // },
             },
+            max: Math.ceil(Math.max.apply(null, props.data.yAxis1_bar) * 1.2),
             nameTextStyle: {
               color: "#AAC1CF",
             },
@@ -181,11 +182,12 @@
           name: props.data.y2_Unit,
           type: "value",
           min: 0,
+          minInterval: 1,
           axisLabel: {
             color: "#AAC1CF",
             show: true,
             // formatter: function (value) {
-            //   return value.toFixed(2); // 保留两位小数
+            //   return value.toFixed(0); // 保留两位小数
             // },
           },
           nameTextStyle: {
@@ -197,7 +199,7 @@
               color: "#2161a8",
             },
           },
-          // alignTicks: true,
+          alignTicks: true,
           position: "right",
           offset: 0,
         });
@@ -226,6 +228,17 @@
                 return value + unit;
               },
             },
+
+            label: {
+              show: true,
+              position: "top",
+              valueAnimation: true,
+              color: "inherit",
+              fontSize: 12,
+              formatter: (params) => {
+                return params.value;
+              },
+            },
           },
           {
             name: props.data.yAxis1_bar_Name,
diff --git a/src/views/pictureOnMap/page/DrainageSystem/components/DraBarChartsLeft.vue b/src/views/pictureOnMap/page/DrainageSystem/components/DraBarChartsLeft.vue
index 727f6a8..b12fa14 100644
--- a/src/views/pictureOnMap/page/DrainageSystem/components/DraBarChartsLeft.vue
+++ b/src/views/pictureOnMap/page/DrainageSystem/components/DraBarChartsLeft.vue
@@ -70,7 +70,7 @@
         },
         legend: {
           textStyle: {
-            color: "#FFFFFF", // 这里设置为红色
+            color: "#FFFFFF",
           },
         },
         grid: {
@@ -87,7 +87,7 @@
             align: "right",
             fontSize: 10,
           },
-          max: Math.ceil(Math.max.apply(null, props.data.yAxis2) * 1.1),
+          max: Math.ceil(Math.max.apply(null, props.data.yAxis2) * 1.2),
           nameLocation: "start",
           type: "value",
           minInterval: 1,
@@ -109,7 +109,7 @@
           axisLabel: {
             color: "#EBFEFF",
             show: true,
-            fontSize: 12,
+            fontSize: props.data.xAxis.length > 8 ? 8 : 12,
           },
           nameTextStyle: {
             color: "#FFFFFF",
@@ -119,31 +119,48 @@
           {
             name: props.data.yAxis2_Name,
             type: "bar",
-            barWidth: 10,
+            // barWidth: 10,
             // label: {
             //   show: true,
             // },
             data: props.data.yAxis2,
             barGap: "-100%",
             itemStyle: {
-              borderRadius: [20, 20, 20, 20],
+              borderRadius: [0, 20, 20, 0],
               color: "#31FEDF",
             },
+            label: {
+              show: true,
+              position: "right",
+              valueAnimation: true,
+              color: "inherit",
+              fontSize: 12,
+              formatter: (params) => {
+                return params.value + props.data.y1_Unit;
+              },
+            },
           },
           {
             name: props.data.yAxis_Name,
             type: "bar",
-            barWidth: 10,
+            // barWidth: 10,
             // label: {
             //   show: true,
             // },
             data: props.data.yAxis,
             itemStyle: {
               borderRadius: [20, 20, 20, 20],
-              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
-                { offset: 0, color: "#FF6464" },
-                { offset: 1, color: "#FF9A9A" },
-              ]),
+              color: "#FF6464",
+            },
+            label: {
+              show: false,
+              position: "right",
+              valueAnimation: true,
+              color: "inherit",
+              fontSize: 12,
+              formatter: (params) => {
+                return params.value + props.data.y1_Unit;
+              },
             },
           },
         ],
diff --git a/src/views/pictureOnMap/page/DrainageSystem/components/DraLineChartsLeft.vue b/src/views/pictureOnMap/page/DrainageSystem/components/DraLineChartsLeft.vue
index 263ec56..1542859 100644
--- a/src/views/pictureOnMap/page/DrainageSystem/components/DraLineChartsLeft.vue
+++ b/src/views/pictureOnMap/page/DrainageSystem/components/DraLineChartsLeft.vue
@@ -152,9 +152,6 @@
               color: "aqua", // 数据点颜色
             },
           },
-
-
-          
           {
             name: props.data.yAxis3_line_Name,
             type: "line",

diff --git a/src/views/pictureOnMap/inputSearch.vue b/src/views/pictureOnMap/inputSearch.vue
index ee0ad81..d732a0b 100644
--- a/src/views/pictureOnMap/inputSearch.vue
+++ b/src/views/pictureOnMap/inputSearch.vue
@@ -3,7 +3,7 @@
     <el-select
       v-model="selectmodel"
       placeholder="请输入关键字"
-      style="width: 140px;position: relative;"
+      style="width: 140px; position: relative"
       filterable
       popper-class="inputSearchselectclass"
       :filter-method="filterMethod"
@@ -11,10 +11,10 @@
       clearable
       @change="selectchange"
     >
-        <el-tabs v-model="activeName" class="selectTabs demo-tabs" stretch  @tab-click="tabsClick">
-    <el-tab-pane label="资产" name="zhandian"></el-tab-pane>
-    <el-tab-pane label="道路" name="daolu"></el-tab-pane>
-  </el-tabs>
+      <el-tabs v-model="activeName" class="selectTabs demo-tabs" stretch @tab-click="tabsClick">
+        <el-tab-pane label="资产" name="zhandian"></el-tab-pane>
+        <el-tab-pane label="道路" name="daolu"></el-tab-pane>
+      </el-tabs>
       <el-option v-for="(item, index) in filterList" :key="item.id + index + item.id" :label="item.name" :value="item.geometry">
         <el-tooltip
           effect="dark"
@@ -55,42 +55,42 @@
 const selectmodel = ref('');
 const getItem = ref({});
 // 道路数据
-const roadData=ref(
-  [{
-  data:[
+const roadData = ref([
   {
-    id:1,
-    name:'软件园中路',
-    geometry:'',
-    pointTypeName:'什么什么路'
+    data: [
+      {
+        id: 1,
+        name: '软件园中路',
+        geometry: '',
+        pointTypeName: '什么什么路',
+      },
+      {
+        id: 2,
+        name: '光谷大道',
+        geometry: '',
+        pointTypeName: '什么路',
+      },
+      {
+        id: 3,
+        name: '光谷大道1',
+        geometry: '',
+        pointTypeName: '什么路',
+      },
+      {
+        id: 4,
+        name: '光谷大道3',
+        geometry: '',
+        pointTypeName: '什么路',
+      },
+      {
+        id: 5,
+        name: '关山大道',
+        geometry: '',
+        pointTypeName: '1什么路',
+      },
+    ],
   },
-  {
-    id:2,
-    name:'光谷大道',
-    geometry:'',
-    pointTypeName:'什么路'
-  },
-  {
-    id:3,
-    name:'光谷大道1',
-    geometry:'',
-    pointTypeName:'什么路'
-  },
-  {
-    id:4,
-    name:'光谷大道3',
-    geometry:'',
-    pointTypeName:'什么路'
-  },
-  {
-    id:5,
-    name:'关山大道',
-    geometry:'',
-    pointTypeName:'1什么路'
-  },
-]
-  }]
-)
+]);
 watch(
   () => appStore.MapData,
   (newValue, oldValue) => {
@@ -168,17 +168,16 @@
   // bus.emit('removeMapDatas',['temporary']);
 }, 500);
 
-const tabsClick=(e)=>{
-  let type=e.paneName
-  getItem.value=''
-  selectmodel.value=''
-  if(type=='zhandian'){
-    GetSearchList(appStore.MapData)
-  }else if(type=='daolu'){
-    GetSearchList(roadData.value)
-
+const tabsClick = e => {
+  let type = e.paneName;
+  getItem.value = '';
+  selectmodel.value = '';
+  if (type == 'zhandian') {
+    GetSearchList(appStore.MapData);
+  } else if (type == 'daolu') {
+    GetSearchList(roadData.value);
   }
-}
+};
 onMounted(() => {
   bus.on('YQ_head', val => {
     console.log('appStore.MapData', appStore.MapData);
@@ -197,20 +196,21 @@
 <style lang="scss" scoped>
 .inputSearch {
   position: fixed;
-  right: 175px;
+  right: 190px;
   top: 19px;
   z-index: 999;
   border-radius: 6px;
 }
 .selectTabs {
   position: absolute;
-  
+
   width: 100%;
   left: 0;
   top: 0;
 }
 
 :deep(.el-input__wrapper) {
+  height: 30px !important;
   background: #0d2359 !important;
   border-radius: 6px;
   box-shadow: 0 0 0 0.00521rem var(--el-select-input-focus-border-color) inset !important;
@@ -237,9 +237,9 @@
   background: #0d2359 !important;
   border-radius: 6px !important;
   border: 1px solid #0b9bff !important;
-  .el-scrollbar{
-  padding-top: 40px;
-}
+  .el-scrollbar {
+    padding-top: 40px;
+  }
   .el-select-dropdown__item {
     font-family: Source Han Sans CN;
     font-weight: bold;
diff --git a/src/views/pictureOnMap/page/DrainageSystem/YSIndex.vue b/src/views/pictureOnMap/page/DrainageSystem/YSIndex.vue
index ca12460..6f1cdc3 100644
--- a/src/views/pictureOnMap/page/DrainageSystem/YSIndex.vue
+++ b/src/views/pictureOnMap/page/DrainageSystem/YSIndex.vue
@@ -129,16 +129,6 @@
       >
         <!-- 顶部公共标题 -->
         <div class="CrumbesTitle">
-          <!-- 一级 -->
-          <!-- <span
-            class="crumbs2"
-            v-for="item in AllData.TitleName"
-            :key="item.grade"
-            v-show="item.abbreviation"
-          >
-            {{ item.grade != "one" ? "/" : "" }}
-            {{ item.abbreviation ? item.abbreviation : "" }}
-          </span> -->
           <span class="crumbs2">{{ AllData.ClicksiteName }}</span>
         </div>
         <div class="modular1_right">
@@ -236,6 +226,23 @@
         </div>
       </div>
     </Transition>
+    <Transition name="fade_right">
+      <div
+        :class="['moduleBox', 'moduleBoxRight']"
+        v-if="
+          !showPanel &&
+          !AllData.RightShow &&
+          (AllData.regionGrade == 'one' || AllData.regionGrade == 'two')
+        "
+      >
+        <div class="CrumbesTitle">
+          <span class="crumbs2">港渠统计</span>
+        </div>
+        <div class="modularRight2">
+          <YSRight :waterRegionCode="AllData.waterRegionCode"></YSRight>
+        </div>
+      </div>
+    </Transition>
   </div>
 </template>
 
@@ -256,6 +263,7 @@
 import DraLineChartsLeft from "./components/DraLineChartsLeft.vue";
 // 右侧面板接入
 import RightCharts from "./components/RightCharts.vue";
+import YSRight from "./YSIndex_right.vue";
 // 面板控制组件
 import PanelDisplayHidden from "@/views/pictureOnMap/page/components/PanelDisplayHidden.vue";
 const showPanel = ref(false); //面板展开收起
@@ -269,6 +277,7 @@
   regionName: "", //分区名称
   waterRegionCode: "", //分区编号
   RightShow: false, //右侧面板是否显示--基于是否选择站点进行判断
+  RightShowID: "",
   TitleName: [
     {
       abbreviation: "一级分区", //分区缩写-动态
@@ -402,6 +411,7 @@
 const MBClick = (item) => {
   console.log(item);
   AllData.RightShow = false;
+  AllData.RightShowID = "";
   // 赋值需要进行echarts数据请求的数据
   AllData.regionGrade = item.grade;
   AllData.regionName = item.Name;
@@ -538,6 +548,7 @@
   if (Row.layerId == "排水分区") {
     // 片区
     AllData.RightShow = false;
+    AllData.RightShowID = false;
     //   if (!!!Row.properties.pid) return;
     //   原本是判断没有pid就不请求↑↑↑,现在gis图层数据改变,从而使用层级来判断↓↓↓
     if (Row.properties.level == "4") return;
@@ -644,41 +655,48 @@
   } else if (Row.layerId == "point") {
     // 点位
     if (Row.properties.pointType == "rainwater_pipeline_quality") {
-      AllData.ClicksiteName = Row.properties.name;
-      AllData.RightShow = true;
-      //   Row.properties.wellCode
-      //   获取管网信息
-      MonitorAPI.pipelinePointPage({
-        pointNumber: Row.properties.wellCode,
-      }).then((res) => {
-        if (res && res.code == 200) {
-          AllData.GWBD = res.data[0];
-        }
-      });
-      //   根据type 判断是管井还是接驳口
-      if (Row.properties.type == "rainwater_pipeline_quality_area1") {
-        // 接驳口
-        AllData.isJBK = true;
+      if (AllData.RightShowID == Row.properties.id) {
+        // 说明是同样的一个点点了两次,所以进行关闭
+        AllData.RightShow = false;
+        AllData.RightShowID = "";
       } else {
-        // 管井或其他
-        AllData.isJBK = false;
+        AllData.ClicksiteName = Row.properties.name;
+        AllData.RightShow = true;
+        AllData.RightShowID = Row.properties.id;
+        //   Row.properties.wellCode
+        //   获取管网信息
+        MonitorAPI.pipelinePointPage({
+          pointNumber: Row.properties.wellCode,
+        }).then((res) => {
+          if (res && res.code == 200) {
+            AllData.GWBD = res.data[0];
+          }
+        });
+        //   根据type 判断是管井还是接驳口
+        if (Row.properties.type == "rainwater_pipeline_quality_area1") {
+          // 接驳口
+          AllData.isJBK = true;
+        } else {
+          // 管井或其他
+          AllData.isJBK = false;
+        }
+        //   上下游水量分析
+        getDataSXY(Row.properties);
+        //   获取echarts数据
+        //   setTimeout(() => {
+        AllData.chartDataRight = {
+          yAxis: [],
+          yAxis_Name: "降雨量",
+          yAxis2: [],
+          yAxis2_Name: "流速",
+          yAxis3: [],
+          yAxis3_Name: "水深",
+          xAxis: [],
+        };
+        AllData.refreshRight = 0;
+        GetRightCharts(Row.properties);
+        //   }, 900);
       }
-      //   上下游水量分析
-      getDataSXY(Row.properties);
-      //   获取echarts数据
-      //   setTimeout(() => {
-      AllData.chartDataRight = {
-        yAxis: [],
-        yAxis_Name: "降雨量",
-        yAxis2: [],
-        yAxis2_Name: "流速",
-        yAxis3: [],
-        yAxis3_Name: "水深",
-        xAxis: [],
-      };
-      AllData.refreshRight = 0;
-      GetRightCharts(Row.properties);
-      //   }, 900);
     }
   }
 };
@@ -787,7 +805,7 @@
         AllData.refresh1++;
         AllData.TjData1 = res.data.pipelinePointCount
           .reduce((accu, curren) => Number(accu) + Number(curren))
-          .toFixed(2);
+          .toFixed(0);
         AllData.TjData1Unit = "个";
       }
       if (AllData.regionGrade == "four") {
@@ -926,25 +944,25 @@
         res.data.forEach((element) => {
           XData.push(element.lakeName);
           data1.push(element.nowWaterlevel);
-          data2.push(element.fortifyWaterlevel);
+          data2.push(element.bestPromitWaterlevel);
           data3.push(element.volume);
         });
         AllData.chartData1.xAxis = XData; //X轴数据
-        AllData.chartData1.y1_Unit = "m"; //Y轴单位
-        AllData.chartData1.y2_Unit = "万方"; //2号Y轴单位
+        AllData.chartData1.y1_Unit = "万方"; //Y轴单位
+        AllData.chartData1.y2_Unit = "m"; //2号Y轴单位
         AllData.chartData1.y2_show = true; //是否展示右侧的2号轴
         AllData.chartData1.yAxis1_bar = data3; //数据1
         AllData.chartData1.yAxis1_bar_Name = "库容量"; //数据1的名称
-        AllData.chartData1.yAxis1_bar_index = 1;
+        AllData.chartData1.yAxis1_bar_index = 0;
         AllData.chartData1.yAxis2_bar = null; //数据2
         AllData.chartData1.yAxis2_bar_Name = ""; //数据1的名称
         AllData.chartData1.yAxis2_bar_index = 0;
         AllData.chartData1.yAxis2_line = data2;
         AllData.chartData1.yAxis2_line_Name = "控制水位";
-        AllData.chartData1.yAxis2_line_Index = 0;
+        AllData.chartData1.yAxis2_line_Index = 1;
         AllData.chartData1.yAxis3_line = data1;
         AllData.chartData1.yAxis3_line_Name = "当前水位";
-        AllData.chartData1.yAxis3_line_Index = 0;
+        AllData.chartData1.yAxis3_line_Index = 1;
         AllData.refresh1++;
         AllData.TjData1 = null;
         AllData.TjData1Unit = null;
@@ -1080,6 +1098,8 @@
     yAxis3_line_Index: 0,
   };
   AllData.refresh1++;
+  AllData.TjData1 = null;
+  AllData.TjData1Unit = null;
   AllData.chartData3 = {
     xAxis: [], //X轴数据
     y1_Unit: "", //Y轴单位
@@ -1099,6 +1119,8 @@
     yAxis3_line_Index: 0,
   };
   AllData.refresh3++;
+  AllData.TjData3 = null;
+  AllData.TjData3Unit = null;
   AllData.chartData2 = {
     xAxis: [],
     yAxis: [],
@@ -1108,6 +1130,8 @@
     y1_Unit: "km",
   };
   AllData.refresh2++;
+  AllData.TjData2 = null;
+  AllData.TjData2Unit = null;
 };
 onMounted(() => {
   let initeGLTimer = setInterval(() => {
@@ -1152,6 +1176,9 @@
       font-weight: bold;
       font-size: 20px;
       color: #ffffff;
+      overflow: hidden;
+      text-overflow: ellipsis; /* 超出宽度200px后显示省略号 */
+      white-space: nowrap; /* 限制不允许换行 */
     }
   }
   .modular1,
@@ -1276,5 +1303,12 @@
       }
     }
   }
+
+  .modularRight2 {
+    width: 100%;
+    height: calc(100% - 50px);
+    overflow: auto;
+    background: #0d2359;
+  }
 }
 </style>
diff --git a/src/views/pictureOnMap/page/DrainageSystem/YSIndex_right.vue b/src/views/pictureOnMap/page/DrainageSystem/YSIndex_right.vue
new file mode 100644
index 0000000..662d24f
--- /dev/null
+++ b/src/views/pictureOnMap/page/DrainageSystem/YSIndex_right.vue
@@ -0,0 +1,30 @@
+<template>
+  <div id="YSIndex_right">姗姐姗姐姗姐</div>
+</template>
+
+<script setup name="YSIndex_right">
+import { ref, reactive, toRefs, onMounted } from "vue";
+const props = defineProps({
+  //分区编号
+  waterRegionCode: {
+    type: [String],
+    default: "",
+  },
+});
+const AllData = reactive({});
+watch(
+  () => props.waterRegionCode,
+  (val) => {
+    console.log("YSIndex_right:分区编号变了", val);
+  },
+  { immediate: true }
+);
+onMounted(() => {});
+</script>
+
+<style lang="scss" scoped>
+#YSIndex_right {
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/src/views/pictureOnMap/page/DrainageSystem/components/DraBarCharts2Y.vue b/src/views/pictureOnMap/page/DrainageSystem/components/DraBarCharts2Y.vue
index e421b34..3611592 100644
--- a/src/views/pictureOnMap/page/DrainageSystem/components/DraBarCharts2Y.vue
+++ b/src/views/pictureOnMap/page/DrainageSystem/components/DraBarCharts2Y.vue
@@ -128,6 +128,7 @@
               //   return value.toFixed(2); // 保留两位小数
               // },
             },
+            max: Math.ceil(Math.max.apply(null, props.data.yAxis1_bar) * 1.2),
             nameTextStyle: {
               color: "#AAC1CF",
             },
@@ -181,11 +182,12 @@
           name: props.data.y2_Unit,
           type: "value",
           min: 0,
+          minInterval: 1,
           axisLabel: {
             color: "#AAC1CF",
             show: true,
             // formatter: function (value) {
-            //   return value.toFixed(2); // 保留两位小数
+            //   return value.toFixed(0); // 保留两位小数
             // },
           },
           nameTextStyle: {
@@ -197,7 +199,7 @@
               color: "#2161a8",
             },
           },
-          // alignTicks: true,
+          alignTicks: true,
           position: "right",
           offset: 0,
         });
@@ -226,6 +228,17 @@
                 return value + unit;
               },
             },
+
+            label: {
+              show: true,
+              position: "top",
+              valueAnimation: true,
+              color: "inherit",
+              fontSize: 12,
+              formatter: (params) => {
+                return params.value;
+              },
+            },
           },
           {
             name: props.data.yAxis1_bar_Name,
diff --git a/src/views/pictureOnMap/page/DrainageSystem/components/DraBarChartsLeft.vue b/src/views/pictureOnMap/page/DrainageSystem/components/DraBarChartsLeft.vue
index 727f6a8..b12fa14 100644
--- a/src/views/pictureOnMap/page/DrainageSystem/components/DraBarChartsLeft.vue
+++ b/src/views/pictureOnMap/page/DrainageSystem/components/DraBarChartsLeft.vue
@@ -70,7 +70,7 @@
         },
         legend: {
           textStyle: {
-            color: "#FFFFFF", // 这里设置为红色
+            color: "#FFFFFF",
           },
         },
         grid: {
@@ -87,7 +87,7 @@
             align: "right",
             fontSize: 10,
           },
-          max: Math.ceil(Math.max.apply(null, props.data.yAxis2) * 1.1),
+          max: Math.ceil(Math.max.apply(null, props.data.yAxis2) * 1.2),
           nameLocation: "start",
           type: "value",
           minInterval: 1,
@@ -109,7 +109,7 @@
           axisLabel: {
             color: "#EBFEFF",
             show: true,
-            fontSize: 12,
+            fontSize: props.data.xAxis.length > 8 ? 8 : 12,
           },
           nameTextStyle: {
             color: "#FFFFFF",
@@ -119,31 +119,48 @@
           {
             name: props.data.yAxis2_Name,
             type: "bar",
-            barWidth: 10,
+            // barWidth: 10,
             // label: {
             //   show: true,
             // },
             data: props.data.yAxis2,
             barGap: "-100%",
             itemStyle: {
-              borderRadius: [20, 20, 20, 20],
+              borderRadius: [0, 20, 20, 0],
               color: "#31FEDF",
             },
+            label: {
+              show: true,
+              position: "right",
+              valueAnimation: true,
+              color: "inherit",
+              fontSize: 12,
+              formatter: (params) => {
+                return params.value + props.data.y1_Unit;
+              },
+            },
           },
           {
             name: props.data.yAxis_Name,
             type: "bar",
-            barWidth: 10,
+            // barWidth: 10,
             // label: {
             //   show: true,
             // },
             data: props.data.yAxis,
             itemStyle: {
               borderRadius: [20, 20, 20, 20],
-              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
-                { offset: 0, color: "#FF6464" },
-                { offset: 1, color: "#FF9A9A" },
-              ]),
+              color: "#FF6464",
+            },
+            label: {
+              show: false,
+              position: "right",
+              valueAnimation: true,
+              color: "inherit",
+              fontSize: 12,
+              formatter: (params) => {
+                return params.value + props.data.y1_Unit;
+              },
             },
           },
         ],
diff --git a/src/views/pictureOnMap/page/DrainageSystem/components/DraLineChartsLeft.vue b/src/views/pictureOnMap/page/DrainageSystem/components/DraLineChartsLeft.vue
index 263ec56..1542859 100644
--- a/src/views/pictureOnMap/page/DrainageSystem/components/DraLineChartsLeft.vue
+++ b/src/views/pictureOnMap/page/DrainageSystem/components/DraLineChartsLeft.vue
@@ -152,9 +152,6 @@
               color: "aqua", // 数据点颜色
             },
           },
-
-
-          
           {
             name: props.data.yAxis3_line_Name,
             type: "line",
diff --git a/src/views/pictureOnMap/page/WaterAssets/DrainageFacilitiesLeft/Rain/index.vue b/src/views/pictureOnMap/page/WaterAssets/DrainageFacilitiesLeft/Rain/index.vue
index 29fd07b..9b72658 100644
--- a/src/views/pictureOnMap/page/WaterAssets/DrainageFacilitiesLeft/Rain/index.vue
+++ b/src/views/pictureOnMap/page/WaterAssets/DrainageFacilitiesLeft/Rain/index.vue
@@ -8,6 +8,7 @@
         :XAxis="chartInfo2.XAxis"
         :YAxis="chartInfo2.YAxis"
         :typeName="chartInfo2.typeName"
+        :zoomData="chartInfo2.zoomData"
       ></yushuibengzhanEcharts>
     </div>
     <div class="small-TitleBox">调蓄池({{ tiaoxuchiCount }})</div>
@@ -55,6 +56,7 @@
   // YAxis: [50, 145, 34, 170, 144, 220],
   XAxis: [],
   YAxis: [],
+  zoomData: [0, 100],
   typeName: '装机功率(kw)',
   loading: true,
 });

diff --git a/src/views/pictureOnMap/inputSearch.vue b/src/views/pictureOnMap/inputSearch.vue
index ee0ad81..d732a0b 100644
--- a/src/views/pictureOnMap/inputSearch.vue
+++ b/src/views/pictureOnMap/inputSearch.vue
@@ -3,7 +3,7 @@
     <el-select
       v-model="selectmodel"
       placeholder="请输入关键字"
-      style="width: 140px;position: relative;"
+      style="width: 140px; position: relative"
       filterable
       popper-class="inputSearchselectclass"
       :filter-method="filterMethod"
@@ -11,10 +11,10 @@
       clearable
       @change="selectchange"
     >
-        <el-tabs v-model="activeName" class="selectTabs demo-tabs" stretch  @tab-click="tabsClick">
-    <el-tab-pane label="资产" name="zhandian"></el-tab-pane>
-    <el-tab-pane label="道路" name="daolu"></el-tab-pane>
-  </el-tabs>
+      <el-tabs v-model="activeName" class="selectTabs demo-tabs" stretch @tab-click="tabsClick">
+        <el-tab-pane label="资产" name="zhandian"></el-tab-pane>
+        <el-tab-pane label="道路" name="daolu"></el-tab-pane>
+      </el-tabs>
       <el-option v-for="(item, index) in filterList" :key="item.id + index + item.id" :label="item.name" :value="item.geometry">
         <el-tooltip
           effect="dark"
@@ -55,42 +55,42 @@
 const selectmodel = ref('');
 const getItem = ref({});
 // 道路数据
-const roadData=ref(
-  [{
-  data:[
+const roadData = ref([
   {
-    id:1,
-    name:'软件园中路',
-    geometry:'',
-    pointTypeName:'什么什么路'
+    data: [
+      {
+        id: 1,
+        name: '软件园中路',
+        geometry: '',
+        pointTypeName: '什么什么路',
+      },
+      {
+        id: 2,
+        name: '光谷大道',
+        geometry: '',
+        pointTypeName: '什么路',
+      },
+      {
+        id: 3,
+        name: '光谷大道1',
+        geometry: '',
+        pointTypeName: '什么路',
+      },
+      {
+        id: 4,
+        name: '光谷大道3',
+        geometry: '',
+        pointTypeName: '什么路',
+      },
+      {
+        id: 5,
+        name: '关山大道',
+        geometry: '',
+        pointTypeName: '1什么路',
+      },
+    ],
   },
-  {
-    id:2,
-    name:'光谷大道',
-    geometry:'',
-    pointTypeName:'什么路'
-  },
-  {
-    id:3,
-    name:'光谷大道1',
-    geometry:'',
-    pointTypeName:'什么路'
-  },
-  {
-    id:4,
-    name:'光谷大道3',
-    geometry:'',
-    pointTypeName:'什么路'
-  },
-  {
-    id:5,
-    name:'关山大道',
-    geometry:'',
-    pointTypeName:'1什么路'
-  },
-]
-  }]
-)
+]);
 watch(
   () => appStore.MapData,
   (newValue, oldValue) => {
@@ -168,17 +168,16 @@
   // bus.emit('removeMapDatas',['temporary']);
 }, 500);
 
-const tabsClick=(e)=>{
-  let type=e.paneName
-  getItem.value=''
-  selectmodel.value=''
-  if(type=='zhandian'){
-    GetSearchList(appStore.MapData)
-  }else if(type=='daolu'){
-    GetSearchList(roadData.value)
-
+const tabsClick = e => {
+  let type = e.paneName;
+  getItem.value = '';
+  selectmodel.value = '';
+  if (type == 'zhandian') {
+    GetSearchList(appStore.MapData);
+  } else if (type == 'daolu') {
+    GetSearchList(roadData.value);
   }
-}
+};
 onMounted(() => {
   bus.on('YQ_head', val => {
     console.log('appStore.MapData', appStore.MapData);
@@ -197,20 +196,21 @@
 <style lang="scss" scoped>
 .inputSearch {
   position: fixed;
-  right: 175px;
+  right: 190px;
   top: 19px;
   z-index: 999;
   border-radius: 6px;
 }
 .selectTabs {
   position: absolute;
-  
+
   width: 100%;
   left: 0;
   top: 0;
 }
 
 :deep(.el-input__wrapper) {
+  height: 30px !important;
   background: #0d2359 !important;
   border-radius: 6px;
   box-shadow: 0 0 0 0.00521rem var(--el-select-input-focus-border-color) inset !important;
@@ -237,9 +237,9 @@
   background: #0d2359 !important;
   border-radius: 6px !important;
   border: 1px solid #0b9bff !important;
-  .el-scrollbar{
-  padding-top: 40px;
-}
+  .el-scrollbar {
+    padding-top: 40px;
+  }
   .el-select-dropdown__item {
     font-family: Source Han Sans CN;
     font-weight: bold;
diff --git a/src/views/pictureOnMap/page/DrainageSystem/YSIndex.vue b/src/views/pictureOnMap/page/DrainageSystem/YSIndex.vue
index ca12460..6f1cdc3 100644
--- a/src/views/pictureOnMap/page/DrainageSystem/YSIndex.vue
+++ b/src/views/pictureOnMap/page/DrainageSystem/YSIndex.vue
@@ -129,16 +129,6 @@
       >
         <!-- 顶部公共标题 -->
         <div class="CrumbesTitle">
-          <!-- 一级 -->
-          <!-- <span
-            class="crumbs2"
-            v-for="item in AllData.TitleName"
-            :key="item.grade"
-            v-show="item.abbreviation"
-          >
-            {{ item.grade != "one" ? "/" : "" }}
-            {{ item.abbreviation ? item.abbreviation : "" }}
-          </span> -->
           <span class="crumbs2">{{ AllData.ClicksiteName }}</span>
         </div>
         <div class="modular1_right">
@@ -236,6 +226,23 @@
         </div>
       </div>
     </Transition>
+    <Transition name="fade_right">
+      <div
+        :class="['moduleBox', 'moduleBoxRight']"
+        v-if="
+          !showPanel &&
+          !AllData.RightShow &&
+          (AllData.regionGrade == 'one' || AllData.regionGrade == 'two')
+        "
+      >
+        <div class="CrumbesTitle">
+          <span class="crumbs2">港渠统计</span>
+        </div>
+        <div class="modularRight2">
+          <YSRight :waterRegionCode="AllData.waterRegionCode"></YSRight>
+        </div>
+      </div>
+    </Transition>
   </div>
 </template>
 
@@ -256,6 +263,7 @@
 import DraLineChartsLeft from "./components/DraLineChartsLeft.vue";
 // 右侧面板接入
 import RightCharts from "./components/RightCharts.vue";
+import YSRight from "./YSIndex_right.vue";
 // 面板控制组件
 import PanelDisplayHidden from "@/views/pictureOnMap/page/components/PanelDisplayHidden.vue";
 const showPanel = ref(false); //面板展开收起
@@ -269,6 +277,7 @@
   regionName: "", //分区名称
   waterRegionCode: "", //分区编号
   RightShow: false, //右侧面板是否显示--基于是否选择站点进行判断
+  RightShowID: "",
   TitleName: [
     {
       abbreviation: "一级分区", //分区缩写-动态
@@ -402,6 +411,7 @@
 const MBClick = (item) => {
   console.log(item);
   AllData.RightShow = false;
+  AllData.RightShowID = "";
   // 赋值需要进行echarts数据请求的数据
   AllData.regionGrade = item.grade;
   AllData.regionName = item.Name;
@@ -538,6 +548,7 @@
   if (Row.layerId == "排水分区") {
     // 片区
     AllData.RightShow = false;
+    AllData.RightShowID = false;
     //   if (!!!Row.properties.pid) return;
     //   原本是判断没有pid就不请求↑↑↑,现在gis图层数据改变,从而使用层级来判断↓↓↓
     if (Row.properties.level == "4") return;
@@ -644,41 +655,48 @@
   } else if (Row.layerId == "point") {
     // 点位
     if (Row.properties.pointType == "rainwater_pipeline_quality") {
-      AllData.ClicksiteName = Row.properties.name;
-      AllData.RightShow = true;
-      //   Row.properties.wellCode
-      //   获取管网信息
-      MonitorAPI.pipelinePointPage({
-        pointNumber: Row.properties.wellCode,
-      }).then((res) => {
-        if (res && res.code == 200) {
-          AllData.GWBD = res.data[0];
-        }
-      });
-      //   根据type 判断是管井还是接驳口
-      if (Row.properties.type == "rainwater_pipeline_quality_area1") {
-        // 接驳口
-        AllData.isJBK = true;
+      if (AllData.RightShowID == Row.properties.id) {
+        // 说明是同样的一个点点了两次,所以进行关闭
+        AllData.RightShow = false;
+        AllData.RightShowID = "";
       } else {
-        // 管井或其他
-        AllData.isJBK = false;
+        AllData.ClicksiteName = Row.properties.name;
+        AllData.RightShow = true;
+        AllData.RightShowID = Row.properties.id;
+        //   Row.properties.wellCode
+        //   获取管网信息
+        MonitorAPI.pipelinePointPage({
+          pointNumber: Row.properties.wellCode,
+        }).then((res) => {
+          if (res && res.code == 200) {
+            AllData.GWBD = res.data[0];
+          }
+        });
+        //   根据type 判断是管井还是接驳口
+        if (Row.properties.type == "rainwater_pipeline_quality_area1") {
+          // 接驳口
+          AllData.isJBK = true;
+        } else {
+          // 管井或其他
+          AllData.isJBK = false;
+        }
+        //   上下游水量分析
+        getDataSXY(Row.properties);
+        //   获取echarts数据
+        //   setTimeout(() => {
+        AllData.chartDataRight = {
+          yAxis: [],
+          yAxis_Name: "降雨量",
+          yAxis2: [],
+          yAxis2_Name: "流速",
+          yAxis3: [],
+          yAxis3_Name: "水深",
+          xAxis: [],
+        };
+        AllData.refreshRight = 0;
+        GetRightCharts(Row.properties);
+        //   }, 900);
       }
-      //   上下游水量分析
-      getDataSXY(Row.properties);
-      //   获取echarts数据
-      //   setTimeout(() => {
-      AllData.chartDataRight = {
-        yAxis: [],
-        yAxis_Name: "降雨量",
-        yAxis2: [],
-        yAxis2_Name: "流速",
-        yAxis3: [],
-        yAxis3_Name: "水深",
-        xAxis: [],
-      };
-      AllData.refreshRight = 0;
-      GetRightCharts(Row.properties);
-      //   }, 900);
     }
   }
 };
@@ -787,7 +805,7 @@
         AllData.refresh1++;
         AllData.TjData1 = res.data.pipelinePointCount
           .reduce((accu, curren) => Number(accu) + Number(curren))
-          .toFixed(2);
+          .toFixed(0);
         AllData.TjData1Unit = "个";
       }
       if (AllData.regionGrade == "four") {
@@ -926,25 +944,25 @@
         res.data.forEach((element) => {
           XData.push(element.lakeName);
           data1.push(element.nowWaterlevel);
-          data2.push(element.fortifyWaterlevel);
+          data2.push(element.bestPromitWaterlevel);
           data3.push(element.volume);
         });
         AllData.chartData1.xAxis = XData; //X轴数据
-        AllData.chartData1.y1_Unit = "m"; //Y轴单位
-        AllData.chartData1.y2_Unit = "万方"; //2号Y轴单位
+        AllData.chartData1.y1_Unit = "万方"; //Y轴单位
+        AllData.chartData1.y2_Unit = "m"; //2号Y轴单位
         AllData.chartData1.y2_show = true; //是否展示右侧的2号轴
         AllData.chartData1.yAxis1_bar = data3; //数据1
         AllData.chartData1.yAxis1_bar_Name = "库容量"; //数据1的名称
-        AllData.chartData1.yAxis1_bar_index = 1;
+        AllData.chartData1.yAxis1_bar_index = 0;
         AllData.chartData1.yAxis2_bar = null; //数据2
         AllData.chartData1.yAxis2_bar_Name = ""; //数据1的名称
         AllData.chartData1.yAxis2_bar_index = 0;
         AllData.chartData1.yAxis2_line = data2;
         AllData.chartData1.yAxis2_line_Name = "控制水位";
-        AllData.chartData1.yAxis2_line_Index = 0;
+        AllData.chartData1.yAxis2_line_Index = 1;
         AllData.chartData1.yAxis3_line = data1;
         AllData.chartData1.yAxis3_line_Name = "当前水位";
-        AllData.chartData1.yAxis3_line_Index = 0;
+        AllData.chartData1.yAxis3_line_Index = 1;
         AllData.refresh1++;
         AllData.TjData1 = null;
         AllData.TjData1Unit = null;
@@ -1080,6 +1098,8 @@
     yAxis3_line_Index: 0,
   };
   AllData.refresh1++;
+  AllData.TjData1 = null;
+  AllData.TjData1Unit = null;
   AllData.chartData3 = {
     xAxis: [], //X轴数据
     y1_Unit: "", //Y轴单位
@@ -1099,6 +1119,8 @@
     yAxis3_line_Index: 0,
   };
   AllData.refresh3++;
+  AllData.TjData3 = null;
+  AllData.TjData3Unit = null;
   AllData.chartData2 = {
     xAxis: [],
     yAxis: [],
@@ -1108,6 +1130,8 @@
     y1_Unit: "km",
   };
   AllData.refresh2++;
+  AllData.TjData2 = null;
+  AllData.TjData2Unit = null;
 };
 onMounted(() => {
   let initeGLTimer = setInterval(() => {
@@ -1152,6 +1176,9 @@
       font-weight: bold;
       font-size: 20px;
       color: #ffffff;
+      overflow: hidden;
+      text-overflow: ellipsis; /* 超出宽度200px后显示省略号 */
+      white-space: nowrap; /* 限制不允许换行 */
     }
   }
   .modular1,
@@ -1276,5 +1303,12 @@
       }
     }
   }
+
+  .modularRight2 {
+    width: 100%;
+    height: calc(100% - 50px);
+    overflow: auto;
+    background: #0d2359;
+  }
 }
 </style>
diff --git a/src/views/pictureOnMap/page/DrainageSystem/YSIndex_right.vue b/src/views/pictureOnMap/page/DrainageSystem/YSIndex_right.vue
new file mode 100644
index 0000000..662d24f
--- /dev/null
+++ b/src/views/pictureOnMap/page/DrainageSystem/YSIndex_right.vue
@@ -0,0 +1,30 @@
+<template>
+  <div id="YSIndex_right">姗姐姗姐姗姐</div>
+</template>
+
+<script setup name="YSIndex_right">
+import { ref, reactive, toRefs, onMounted } from "vue";
+const props = defineProps({
+  //分区编号
+  waterRegionCode: {
+    type: [String],
+    default: "",
+  },
+});
+const AllData = reactive({});
+watch(
+  () => props.waterRegionCode,
+  (val) => {
+    console.log("YSIndex_right:分区编号变了", val);
+  },
+  { immediate: true }
+);
+onMounted(() => {});
+</script>
+
+<style lang="scss" scoped>
+#YSIndex_right {
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/src/views/pictureOnMap/page/DrainageSystem/components/DraBarCharts2Y.vue b/src/views/pictureOnMap/page/DrainageSystem/components/DraBarCharts2Y.vue
index e421b34..3611592 100644
--- a/src/views/pictureOnMap/page/DrainageSystem/components/DraBarCharts2Y.vue
+++ b/src/views/pictureOnMap/page/DrainageSystem/components/DraBarCharts2Y.vue
@@ -128,6 +128,7 @@
               //   return value.toFixed(2); // 保留两位小数
               // },
             },
+            max: Math.ceil(Math.max.apply(null, props.data.yAxis1_bar) * 1.2),
             nameTextStyle: {
               color: "#AAC1CF",
             },
@@ -181,11 +182,12 @@
           name: props.data.y2_Unit,
           type: "value",
           min: 0,
+          minInterval: 1,
           axisLabel: {
             color: "#AAC1CF",
             show: true,
             // formatter: function (value) {
-            //   return value.toFixed(2); // 保留两位小数
+            //   return value.toFixed(0); // 保留两位小数
             // },
           },
           nameTextStyle: {
@@ -197,7 +199,7 @@
               color: "#2161a8",
             },
           },
-          // alignTicks: true,
+          alignTicks: true,
           position: "right",
           offset: 0,
         });
@@ -226,6 +228,17 @@
                 return value + unit;
               },
             },
+
+            label: {
+              show: true,
+              position: "top",
+              valueAnimation: true,
+              color: "inherit",
+              fontSize: 12,
+              formatter: (params) => {
+                return params.value;
+              },
+            },
           },
           {
             name: props.data.yAxis1_bar_Name,
diff --git a/src/views/pictureOnMap/page/DrainageSystem/components/DraBarChartsLeft.vue b/src/views/pictureOnMap/page/DrainageSystem/components/DraBarChartsLeft.vue
index 727f6a8..b12fa14 100644
--- a/src/views/pictureOnMap/page/DrainageSystem/components/DraBarChartsLeft.vue
+++ b/src/views/pictureOnMap/page/DrainageSystem/components/DraBarChartsLeft.vue
@@ -70,7 +70,7 @@
         },
         legend: {
           textStyle: {
-            color: "#FFFFFF", // 这里设置为红色
+            color: "#FFFFFF",
           },
         },
         grid: {
@@ -87,7 +87,7 @@
             align: "right",
             fontSize: 10,
           },
-          max: Math.ceil(Math.max.apply(null, props.data.yAxis2) * 1.1),
+          max: Math.ceil(Math.max.apply(null, props.data.yAxis2) * 1.2),
           nameLocation: "start",
           type: "value",
           minInterval: 1,
@@ -109,7 +109,7 @@
           axisLabel: {
             color: "#EBFEFF",
             show: true,
-            fontSize: 12,
+            fontSize: props.data.xAxis.length > 8 ? 8 : 12,
           },
           nameTextStyle: {
             color: "#FFFFFF",
@@ -119,31 +119,48 @@
           {
             name: props.data.yAxis2_Name,
             type: "bar",
-            barWidth: 10,
+            // barWidth: 10,
             // label: {
             //   show: true,
             // },
             data: props.data.yAxis2,
             barGap: "-100%",
             itemStyle: {
-              borderRadius: [20, 20, 20, 20],
+              borderRadius: [0, 20, 20, 0],
               color: "#31FEDF",
             },
+            label: {
+              show: true,
+              position: "right",
+              valueAnimation: true,
+              color: "inherit",
+              fontSize: 12,
+              formatter: (params) => {
+                return params.value + props.data.y1_Unit;
+              },
+            },
           },
           {
             name: props.data.yAxis_Name,
             type: "bar",
-            barWidth: 10,
+            // barWidth: 10,
             // label: {
             //   show: true,
             // },
             data: props.data.yAxis,
             itemStyle: {
               borderRadius: [20, 20, 20, 20],
-              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
-                { offset: 0, color: "#FF6464" },
-                { offset: 1, color: "#FF9A9A" },
-              ]),
+              color: "#FF6464",
+            },
+            label: {
+              show: false,
+              position: "right",
+              valueAnimation: true,
+              color: "inherit",
+              fontSize: 12,
+              formatter: (params) => {
+                return params.value + props.data.y1_Unit;
+              },
             },
           },
         ],
diff --git a/src/views/pictureOnMap/page/DrainageSystem/components/DraLineChartsLeft.vue b/src/views/pictureOnMap/page/DrainageSystem/components/DraLineChartsLeft.vue
index 263ec56..1542859 100644
--- a/src/views/pictureOnMap/page/DrainageSystem/components/DraLineChartsLeft.vue
+++ b/src/views/pictureOnMap/page/DrainageSystem/components/DraLineChartsLeft.vue
@@ -152,9 +152,6 @@
               color: "aqua", // 数据点颜色
             },
           },
-
-
-          
           {
             name: props.data.yAxis3_line_Name,
             type: "line",
diff --git a/src/views/pictureOnMap/page/WaterAssets/DrainageFacilitiesLeft/Rain/index.vue b/src/views/pictureOnMap/page/WaterAssets/DrainageFacilitiesLeft/Rain/index.vue
index 29fd07b..9b72658 100644
--- a/src/views/pictureOnMap/page/WaterAssets/DrainageFacilitiesLeft/Rain/index.vue
+++ b/src/views/pictureOnMap/page/WaterAssets/DrainageFacilitiesLeft/Rain/index.vue
@@ -8,6 +8,7 @@
         :XAxis="chartInfo2.XAxis"
         :YAxis="chartInfo2.YAxis"
         :typeName="chartInfo2.typeName"
+        :zoomData="chartInfo2.zoomData"
       ></yushuibengzhanEcharts>
     </div>
     <div class="small-TitleBox">调蓄池({{ tiaoxuchiCount }})</div>
@@ -55,6 +56,7 @@
   // YAxis: [50, 145, 34, 170, 144, 220],
   XAxis: [],
   YAxis: [],
+  zoomData: [0, 100],
   typeName: '装机功率(kw)',
   loading: true,
 });
diff --git a/src/views/pictureOnMap/page/WaterAssets/DrainageFacilitiesLeft/Rain/yushuibengzhanEcharts.vue b/src/views/pictureOnMap/page/WaterAssets/DrainageFacilitiesLeft/Rain/yushuibengzhanEcharts.vue
index 0ae672f..02fb7e6 100644
--- a/src/views/pictureOnMap/page/WaterAssets/DrainageFacilitiesLeft/Rain/yushuibengzhanEcharts.vue
+++ b/src/views/pictureOnMap/page/WaterAssets/DrainageFacilitiesLeft/Rain/yushuibengzhanEcharts.vue
@@ -29,6 +29,10 @@
     type: [String, Number],
     default: '',
   },
+  zoomData: {
+    type: Array,
+    default: () => [0, 100],
+  },
 });
 
 watch(
@@ -127,6 +131,18 @@
         padding: [-8, 0, 0, -100], // 四个数字分别为上右下左与原位置距离
       },
     },
+
+    dataZoom: [
+      {
+        type: 'inside', // 支持内部鼠标滚动平移
+        start: props.zoomData[0],
+        end: props.zoomData[1],
+        yAxisIndex: 0,
+        zoomOnMouseWheel: true, // 关闭滚轮缩放
+        moveOnMouseWheel: true, // 开启滚轮平移
+        moveOnMouseMove: false, // 鼠标移动能触发数据窗口平移
+      },
+    ],
     series: [
       {
         data: props.YAxis,

diff --git a/src/views/pictureOnMap/inputSearch.vue b/src/views/pictureOnMap/inputSearch.vue
index ee0ad81..d732a0b 100644
--- a/src/views/pictureOnMap/inputSearch.vue
+++ b/src/views/pictureOnMap/inputSearch.vue
@@ -3,7 +3,7 @@
     <el-select
       v-model="selectmodel"
       placeholder="请输入关键字"
-      style="width: 140px;position: relative;"
+      style="width: 140px; position: relative"
       filterable
       popper-class="inputSearchselectclass"
       :filter-method="filterMethod"
@@ -11,10 +11,10 @@
       clearable
       @change="selectchange"
     >
-        <el-tabs v-model="activeName" class="selectTabs demo-tabs" stretch  @tab-click="tabsClick">
-    <el-tab-pane label="资产" name="zhandian"></el-tab-pane>
-    <el-tab-pane label="道路" name="daolu"></el-tab-pane>
-  </el-tabs>
+      <el-tabs v-model="activeName" class="selectTabs demo-tabs" stretch @tab-click="tabsClick">
+        <el-tab-pane label="资产" name="zhandian"></el-tab-pane>
+        <el-tab-pane label="道路" name="daolu"></el-tab-pane>
+      </el-tabs>
       <el-option v-for="(item, index) in filterList" :key="item.id + index + item.id" :label="item.name" :value="item.geometry">
         <el-tooltip
           effect="dark"
@@ -55,42 +55,42 @@
 const selectmodel = ref('');
 const getItem = ref({});
 // 道路数据
-const roadData=ref(
-  [{
-  data:[
+const roadData = ref([
   {
-    id:1,
-    name:'软件园中路',
-    geometry:'',
-    pointTypeName:'什么什么路'
+    data: [
+      {
+        id: 1,
+        name: '软件园中路',
+        geometry: '',
+        pointTypeName: '什么什么路',
+      },
+      {
+        id: 2,
+        name: '光谷大道',
+        geometry: '',
+        pointTypeName: '什么路',
+      },
+      {
+        id: 3,
+        name: '光谷大道1',
+        geometry: '',
+        pointTypeName: '什么路',
+      },
+      {
+        id: 4,
+        name: '光谷大道3',
+        geometry: '',
+        pointTypeName: '什么路',
+      },
+      {
+        id: 5,
+        name: '关山大道',
+        geometry: '',
+        pointTypeName: '1什么路',
+      },
+    ],
   },
-  {
-    id:2,
-    name:'光谷大道',
-    geometry:'',
-    pointTypeName:'什么路'
-  },
-  {
-    id:3,
-    name:'光谷大道1',
-    geometry:'',
-    pointTypeName:'什么路'
-  },
-  {
-    id:4,
-    name:'光谷大道3',
-    geometry:'',
-    pointTypeName:'什么路'
-  },
-  {
-    id:5,
-    name:'关山大道',
-    geometry:'',
-    pointTypeName:'1什么路'
-  },
-]
-  }]
-)
+]);
 watch(
   () => appStore.MapData,
   (newValue, oldValue) => {
@@ -168,17 +168,16 @@
   // bus.emit('removeMapDatas',['temporary']);
 }, 500);
 
-const tabsClick=(e)=>{
-  let type=e.paneName
-  getItem.value=''
-  selectmodel.value=''
-  if(type=='zhandian'){
-    GetSearchList(appStore.MapData)
-  }else if(type=='daolu'){
-    GetSearchList(roadData.value)
-
+const tabsClick = e => {
+  let type = e.paneName;
+  getItem.value = '';
+  selectmodel.value = '';
+  if (type == 'zhandian') {
+    GetSearchList(appStore.MapData);
+  } else if (type == 'daolu') {
+    GetSearchList(roadData.value);
   }
-}
+};
 onMounted(() => {
   bus.on('YQ_head', val => {
     console.log('appStore.MapData', appStore.MapData);
@@ -197,20 +196,21 @@
 <style lang="scss" scoped>
 .inputSearch {
   position: fixed;
-  right: 175px;
+  right: 190px;
   top: 19px;
   z-index: 999;
   border-radius: 6px;
 }
 .selectTabs {
   position: absolute;
-  
+
   width: 100%;
   left: 0;
   top: 0;
 }
 
 :deep(.el-input__wrapper) {
+  height: 30px !important;
   background: #0d2359 !important;
   border-radius: 6px;
   box-shadow: 0 0 0 0.00521rem var(--el-select-input-focus-border-color) inset !important;
@@ -237,9 +237,9 @@
   background: #0d2359 !important;
   border-radius: 6px !important;
   border: 1px solid #0b9bff !important;
-  .el-scrollbar{
-  padding-top: 40px;
-}
+  .el-scrollbar {
+    padding-top: 40px;
+  }
   .el-select-dropdown__item {
     font-family: Source Han Sans CN;
     font-weight: bold;
diff --git a/src/views/pictureOnMap/page/DrainageSystem/YSIndex.vue b/src/views/pictureOnMap/page/DrainageSystem/YSIndex.vue
index ca12460..6f1cdc3 100644
--- a/src/views/pictureOnMap/page/DrainageSystem/YSIndex.vue
+++ b/src/views/pictureOnMap/page/DrainageSystem/YSIndex.vue
@@ -129,16 +129,6 @@
       >
         <!-- 顶部公共标题 -->
         <div class="CrumbesTitle">
-          <!-- 一级 -->
-          <!-- <span
-            class="crumbs2"
-            v-for="item in AllData.TitleName"
-            :key="item.grade"
-            v-show="item.abbreviation"
-          >
-            {{ item.grade != "one" ? "/" : "" }}
-            {{ item.abbreviation ? item.abbreviation : "" }}
-          </span> -->
           <span class="crumbs2">{{ AllData.ClicksiteName }}</span>
         </div>
         <div class="modular1_right">
@@ -236,6 +226,23 @@
         </div>
       </div>
     </Transition>
+    <Transition name="fade_right">
+      <div
+        :class="['moduleBox', 'moduleBoxRight']"
+        v-if="
+          !showPanel &&
+          !AllData.RightShow &&
+          (AllData.regionGrade == 'one' || AllData.regionGrade == 'two')
+        "
+      >
+        <div class="CrumbesTitle">
+          <span class="crumbs2">港渠统计</span>
+        </div>
+        <div class="modularRight2">
+          <YSRight :waterRegionCode="AllData.waterRegionCode"></YSRight>
+        </div>
+      </div>
+    </Transition>
   </div>
 </template>
 
@@ -256,6 +263,7 @@
 import DraLineChartsLeft from "./components/DraLineChartsLeft.vue";
 // 右侧面板接入
 import RightCharts from "./components/RightCharts.vue";
+import YSRight from "./YSIndex_right.vue";
 // 面板控制组件
 import PanelDisplayHidden from "@/views/pictureOnMap/page/components/PanelDisplayHidden.vue";
 const showPanel = ref(false); //面板展开收起
@@ -269,6 +277,7 @@
   regionName: "", //分区名称
   waterRegionCode: "", //分区编号
   RightShow: false, //右侧面板是否显示--基于是否选择站点进行判断
+  RightShowID: "",
   TitleName: [
     {
       abbreviation: "一级分区", //分区缩写-动态
@@ -402,6 +411,7 @@
 const MBClick = (item) => {
   console.log(item);
   AllData.RightShow = false;
+  AllData.RightShowID = "";
   // 赋值需要进行echarts数据请求的数据
   AllData.regionGrade = item.grade;
   AllData.regionName = item.Name;
@@ -538,6 +548,7 @@
   if (Row.layerId == "排水分区") {
     // 片区
     AllData.RightShow = false;
+    AllData.RightShowID = false;
     //   if (!!!Row.properties.pid) return;
     //   原本是判断没有pid就不请求↑↑↑,现在gis图层数据改变,从而使用层级来判断↓↓↓
     if (Row.properties.level == "4") return;
@@ -644,41 +655,48 @@
   } else if (Row.layerId == "point") {
     // 点位
     if (Row.properties.pointType == "rainwater_pipeline_quality") {
-      AllData.ClicksiteName = Row.properties.name;
-      AllData.RightShow = true;
-      //   Row.properties.wellCode
-      //   获取管网信息
-      MonitorAPI.pipelinePointPage({
-        pointNumber: Row.properties.wellCode,
-      }).then((res) => {
-        if (res && res.code == 200) {
-          AllData.GWBD = res.data[0];
-        }
-      });
-      //   根据type 判断是管井还是接驳口
-      if (Row.properties.type == "rainwater_pipeline_quality_area1") {
-        // 接驳口
-        AllData.isJBK = true;
+      if (AllData.RightShowID == Row.properties.id) {
+        // 说明是同样的一个点点了两次,所以进行关闭
+        AllData.RightShow = false;
+        AllData.RightShowID = "";
       } else {
-        // 管井或其他
-        AllData.isJBK = false;
+        AllData.ClicksiteName = Row.properties.name;
+        AllData.RightShow = true;
+        AllData.RightShowID = Row.properties.id;
+        //   Row.properties.wellCode
+        //   获取管网信息
+        MonitorAPI.pipelinePointPage({
+          pointNumber: Row.properties.wellCode,
+        }).then((res) => {
+          if (res && res.code == 200) {
+            AllData.GWBD = res.data[0];
+          }
+        });
+        //   根据type 判断是管井还是接驳口
+        if (Row.properties.type == "rainwater_pipeline_quality_area1") {
+          // 接驳口
+          AllData.isJBK = true;
+        } else {
+          // 管井或其他
+          AllData.isJBK = false;
+        }
+        //   上下游水量分析
+        getDataSXY(Row.properties);
+        //   获取echarts数据
+        //   setTimeout(() => {
+        AllData.chartDataRight = {
+          yAxis: [],
+          yAxis_Name: "降雨量",
+          yAxis2: [],
+          yAxis2_Name: "流速",
+          yAxis3: [],
+          yAxis3_Name: "水深",
+          xAxis: [],
+        };
+        AllData.refreshRight = 0;
+        GetRightCharts(Row.properties);
+        //   }, 900);
       }
-      //   上下游水量分析
-      getDataSXY(Row.properties);
-      //   获取echarts数据
-      //   setTimeout(() => {
-      AllData.chartDataRight = {
-        yAxis: [],
-        yAxis_Name: "降雨量",
-        yAxis2: [],
-        yAxis2_Name: "流速",
-        yAxis3: [],
-        yAxis3_Name: "水深",
-        xAxis: [],
-      };
-      AllData.refreshRight = 0;
-      GetRightCharts(Row.properties);
-      //   }, 900);
     }
   }
 };
@@ -787,7 +805,7 @@
         AllData.refresh1++;
         AllData.TjData1 = res.data.pipelinePointCount
           .reduce((accu, curren) => Number(accu) + Number(curren))
-          .toFixed(2);
+          .toFixed(0);
         AllData.TjData1Unit = "个";
       }
       if (AllData.regionGrade == "four") {
@@ -926,25 +944,25 @@
         res.data.forEach((element) => {
           XData.push(element.lakeName);
           data1.push(element.nowWaterlevel);
-          data2.push(element.fortifyWaterlevel);
+          data2.push(element.bestPromitWaterlevel);
           data3.push(element.volume);
         });
         AllData.chartData1.xAxis = XData; //X轴数据
-        AllData.chartData1.y1_Unit = "m"; //Y轴单位
-        AllData.chartData1.y2_Unit = "万方"; //2号Y轴单位
+        AllData.chartData1.y1_Unit = "万方"; //Y轴单位
+        AllData.chartData1.y2_Unit = "m"; //2号Y轴单位
         AllData.chartData1.y2_show = true; //是否展示右侧的2号轴
         AllData.chartData1.yAxis1_bar = data3; //数据1
         AllData.chartData1.yAxis1_bar_Name = "库容量"; //数据1的名称
-        AllData.chartData1.yAxis1_bar_index = 1;
+        AllData.chartData1.yAxis1_bar_index = 0;
         AllData.chartData1.yAxis2_bar = null; //数据2
         AllData.chartData1.yAxis2_bar_Name = ""; //数据1的名称
         AllData.chartData1.yAxis2_bar_index = 0;
         AllData.chartData1.yAxis2_line = data2;
         AllData.chartData1.yAxis2_line_Name = "控制水位";
-        AllData.chartData1.yAxis2_line_Index = 0;
+        AllData.chartData1.yAxis2_line_Index = 1;
         AllData.chartData1.yAxis3_line = data1;
         AllData.chartData1.yAxis3_line_Name = "当前水位";
-        AllData.chartData1.yAxis3_line_Index = 0;
+        AllData.chartData1.yAxis3_line_Index = 1;
         AllData.refresh1++;
         AllData.TjData1 = null;
         AllData.TjData1Unit = null;
@@ -1080,6 +1098,8 @@
     yAxis3_line_Index: 0,
   };
   AllData.refresh1++;
+  AllData.TjData1 = null;
+  AllData.TjData1Unit = null;
   AllData.chartData3 = {
     xAxis: [], //X轴数据
     y1_Unit: "", //Y轴单位
@@ -1099,6 +1119,8 @@
     yAxis3_line_Index: 0,
   };
   AllData.refresh3++;
+  AllData.TjData3 = null;
+  AllData.TjData3Unit = null;
   AllData.chartData2 = {
     xAxis: [],
     yAxis: [],
@@ -1108,6 +1130,8 @@
     y1_Unit: "km",
   };
   AllData.refresh2++;
+  AllData.TjData2 = null;
+  AllData.TjData2Unit = null;
 };
 onMounted(() => {
   let initeGLTimer = setInterval(() => {
@@ -1152,6 +1176,9 @@
       font-weight: bold;
       font-size: 20px;
       color: #ffffff;
+      overflow: hidden;
+      text-overflow: ellipsis; /* 超出宽度200px后显示省略号 */
+      white-space: nowrap; /* 限制不允许换行 */
     }
   }
   .modular1,
@@ -1276,5 +1303,12 @@
       }
     }
   }
+
+  .modularRight2 {
+    width: 100%;
+    height: calc(100% - 50px);
+    overflow: auto;
+    background: #0d2359;
+  }
 }
 </style>
diff --git a/src/views/pictureOnMap/page/DrainageSystem/YSIndex_right.vue b/src/views/pictureOnMap/page/DrainageSystem/YSIndex_right.vue
new file mode 100644
index 0000000..662d24f
--- /dev/null
+++ b/src/views/pictureOnMap/page/DrainageSystem/YSIndex_right.vue
@@ -0,0 +1,30 @@
+<template>
+  <div id="YSIndex_right">姗姐姗姐姗姐</div>
+</template>
+
+<script setup name="YSIndex_right">
+import { ref, reactive, toRefs, onMounted } from "vue";
+const props = defineProps({
+  //分区编号
+  waterRegionCode: {
+    type: [String],
+    default: "",
+  },
+});
+const AllData = reactive({});
+watch(
+  () => props.waterRegionCode,
+  (val) => {
+    console.log("YSIndex_right:分区编号变了", val);
+  },
+  { immediate: true }
+);
+onMounted(() => {});
+</script>
+
+<style lang="scss" scoped>
+#YSIndex_right {
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/src/views/pictureOnMap/page/DrainageSystem/components/DraBarCharts2Y.vue b/src/views/pictureOnMap/page/DrainageSystem/components/DraBarCharts2Y.vue
index e421b34..3611592 100644
--- a/src/views/pictureOnMap/page/DrainageSystem/components/DraBarCharts2Y.vue
+++ b/src/views/pictureOnMap/page/DrainageSystem/components/DraBarCharts2Y.vue
@@ -128,6 +128,7 @@
               //   return value.toFixed(2); // 保留两位小数
               // },
             },
+            max: Math.ceil(Math.max.apply(null, props.data.yAxis1_bar) * 1.2),
             nameTextStyle: {
               color: "#AAC1CF",
             },
@@ -181,11 +182,12 @@
           name: props.data.y2_Unit,
           type: "value",
           min: 0,
+          minInterval: 1,
           axisLabel: {
             color: "#AAC1CF",
             show: true,
             // formatter: function (value) {
-            //   return value.toFixed(2); // 保留两位小数
+            //   return value.toFixed(0); // 保留两位小数
             // },
           },
           nameTextStyle: {
@@ -197,7 +199,7 @@
               color: "#2161a8",
             },
           },
-          // alignTicks: true,
+          alignTicks: true,
           position: "right",
           offset: 0,
         });
@@ -226,6 +228,17 @@
                 return value + unit;
               },
             },
+
+            label: {
+              show: true,
+              position: "top",
+              valueAnimation: true,
+              color: "inherit",
+              fontSize: 12,
+              formatter: (params) => {
+                return params.value;
+              },
+            },
           },
           {
             name: props.data.yAxis1_bar_Name,
diff --git a/src/views/pictureOnMap/page/DrainageSystem/components/DraBarChartsLeft.vue b/src/views/pictureOnMap/page/DrainageSystem/components/DraBarChartsLeft.vue
index 727f6a8..b12fa14 100644
--- a/src/views/pictureOnMap/page/DrainageSystem/components/DraBarChartsLeft.vue
+++ b/src/views/pictureOnMap/page/DrainageSystem/components/DraBarChartsLeft.vue
@@ -70,7 +70,7 @@
         },
         legend: {
           textStyle: {
-            color: "#FFFFFF", // 这里设置为红色
+            color: "#FFFFFF",
           },
         },
         grid: {
@@ -87,7 +87,7 @@
             align: "right",
             fontSize: 10,
           },
-          max: Math.ceil(Math.max.apply(null, props.data.yAxis2) * 1.1),
+          max: Math.ceil(Math.max.apply(null, props.data.yAxis2) * 1.2),
           nameLocation: "start",
           type: "value",
           minInterval: 1,
@@ -109,7 +109,7 @@
           axisLabel: {
             color: "#EBFEFF",
             show: true,
-            fontSize: 12,
+            fontSize: props.data.xAxis.length > 8 ? 8 : 12,
           },
           nameTextStyle: {
             color: "#FFFFFF",
@@ -119,31 +119,48 @@
           {
             name: props.data.yAxis2_Name,
             type: "bar",
-            barWidth: 10,
+            // barWidth: 10,
             // label: {
             //   show: true,
             // },
             data: props.data.yAxis2,
             barGap: "-100%",
             itemStyle: {
-              borderRadius: [20, 20, 20, 20],
+              borderRadius: [0, 20, 20, 0],
               color: "#31FEDF",
             },
+            label: {
+              show: true,
+              position: "right",
+              valueAnimation: true,
+              color: "inherit",
+              fontSize: 12,
+              formatter: (params) => {
+                return params.value + props.data.y1_Unit;
+              },
+            },
           },
           {
             name: props.data.yAxis_Name,
             type: "bar",
-            barWidth: 10,
+            // barWidth: 10,
             // label: {
             //   show: true,
             // },
             data: props.data.yAxis,
             itemStyle: {
               borderRadius: [20, 20, 20, 20],
-              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
-                { offset: 0, color: "#FF6464" },
-                { offset: 1, color: "#FF9A9A" },
-              ]),
+              color: "#FF6464",
+            },
+            label: {
+              show: false,
+              position: "right",
+              valueAnimation: true,
+              color: "inherit",
+              fontSize: 12,
+              formatter: (params) => {
+                return params.value + props.data.y1_Unit;
+              },
             },
           },
         ],
diff --git a/src/views/pictureOnMap/page/DrainageSystem/components/DraLineChartsLeft.vue b/src/views/pictureOnMap/page/DrainageSystem/components/DraLineChartsLeft.vue
index 263ec56..1542859 100644
--- a/src/views/pictureOnMap/page/DrainageSystem/components/DraLineChartsLeft.vue
+++ b/src/views/pictureOnMap/page/DrainageSystem/components/DraLineChartsLeft.vue
@@ -152,9 +152,6 @@
               color: "aqua", // 数据点颜色
             },
           },
-
-
-          
           {
             name: props.data.yAxis3_line_Name,
             type: "line",
diff --git a/src/views/pictureOnMap/page/WaterAssets/DrainageFacilitiesLeft/Rain/index.vue b/src/views/pictureOnMap/page/WaterAssets/DrainageFacilitiesLeft/Rain/index.vue
index 29fd07b..9b72658 100644
--- a/src/views/pictureOnMap/page/WaterAssets/DrainageFacilitiesLeft/Rain/index.vue
+++ b/src/views/pictureOnMap/page/WaterAssets/DrainageFacilitiesLeft/Rain/index.vue
@@ -8,6 +8,7 @@
         :XAxis="chartInfo2.XAxis"
         :YAxis="chartInfo2.YAxis"
         :typeName="chartInfo2.typeName"
+        :zoomData="chartInfo2.zoomData"
       ></yushuibengzhanEcharts>
     </div>
     <div class="small-TitleBox">调蓄池({{ tiaoxuchiCount }})</div>
@@ -55,6 +56,7 @@
   // YAxis: [50, 145, 34, 170, 144, 220],
   XAxis: [],
   YAxis: [],
+  zoomData: [0, 100],
   typeName: '装机功率(kw)',
   loading: true,
 });
diff --git a/src/views/pictureOnMap/page/WaterAssets/DrainageFacilitiesLeft/Rain/yushuibengzhanEcharts.vue b/src/views/pictureOnMap/page/WaterAssets/DrainageFacilitiesLeft/Rain/yushuibengzhanEcharts.vue
index 0ae672f..02fb7e6 100644
--- a/src/views/pictureOnMap/page/WaterAssets/DrainageFacilitiesLeft/Rain/yushuibengzhanEcharts.vue
+++ b/src/views/pictureOnMap/page/WaterAssets/DrainageFacilitiesLeft/Rain/yushuibengzhanEcharts.vue
@@ -29,6 +29,10 @@
     type: [String, Number],
     default: '',
   },
+  zoomData: {
+    type: Array,
+    default: () => [0, 100],
+  },
 });
 
 watch(
@@ -127,6 +131,18 @@
         padding: [-8, 0, 0, -100], // 四个数字分别为上右下左与原位置距离
       },
     },
+
+    dataZoom: [
+      {
+        type: 'inside', // 支持内部鼠标滚动平移
+        start: props.zoomData[0],
+        end: props.zoomData[1],
+        yAxisIndex: 0,
+        zoomOnMouseWheel: true, // 关闭滚轮缩放
+        moveOnMouseWheel: true, // 开启滚轮平移
+        moveOnMouseMove: false, // 鼠标移动能触发数据窗口平移
+      },
+    ],
     series: [
       {
         data: props.YAxis,
diff --git a/src/views/pictureOnMap/page/WaterAssets/DrainageFacilitiesLeft/sewage/index.vue b/src/views/pictureOnMap/page/WaterAssets/DrainageFacilitiesLeft/sewage/index.vue
index e9968a4..49b81a5 100644
--- a/src/views/pictureOnMap/page/WaterAssets/DrainageFacilitiesLeft/sewage/index.vue
+++ b/src/views/pictureOnMap/page/WaterAssets/DrainageFacilitiesLeft/sewage/index.vue
@@ -51,6 +51,7 @@
         :XAxis="chartInfo2.XAxis"
         :YAxis="chartInfo2.YAxis"
         :typeName="chartInfo2.typeName"
+        :zoomData="chartInfo2.zoomData"
       ></yushuibengzhanEcharts>
     </div>
   </div>
@@ -141,6 +142,7 @@
   // YAxis: [50, 145, 34, 170, 144, 220],
   XAxis: [],
   YAxis: [],
+  zoomData: [20, 30],
   typeName: '数量(个)',
   loading: true,
 });