diff --git a/src/views/pictureOnMap/index.vue b/src/views/pictureOnMap/index.vue
index 5823b2f..b0eaa08 100644
--- a/src/views/pictureOnMap/index.vue
+++ b/src/views/pictureOnMap/index.vue
@@ -279,6 +279,9 @@
     type = "rainwater_pipeline_quality";
     dialogConfig.RefName = "jiancefenxiGWFX";
   }
+
+  if (Name == "排口水质") {
+  }
   let params = {
     dataCode: type,
     scene: specificFun(type) || "basis_monitor",

diff --git a/src/views/pictureOnMap/index.vue b/src/views/pictureOnMap/index.vue
index 5823b2f..b0eaa08 100644
--- a/src/views/pictureOnMap/index.vue
+++ b/src/views/pictureOnMap/index.vue
@@ -279,6 +279,9 @@
     type = "rainwater_pipeline_quality";
     dialogConfig.RefName = "jiancefenxiGWFX";
   }
+
+  if (Name == "排口水质") {
+  }
   let params = {
     dataCode: type,
     scene: specificFun(type) || "basis_monitor",
diff --git a/src/views/pictureOnMap/page/DrainageSystem/YSIndex.vue b/src/views/pictureOnMap/page/DrainageSystem/YSIndex.vue
index ab2e36e..2003971 100644
--- a/src/views/pictureOnMap/page/DrainageSystem/YSIndex.vue
+++ b/src/views/pictureOnMap/page/DrainageSystem/YSIndex.vue
@@ -804,6 +804,11 @@
           AllData.RightShow = true;
         }
       }
+      // 排口水质/流量
+      if (Row.properties.pointType == "outlet_quality" || "outlet_water_level") {
+        // 定位雨水系统二级菜单下右侧排口信息echarts列表
+        bus.emit("SZEchartsScrollTop", Row.properties);
+      }
     }
     // }
   }

diff --git a/src/views/pictureOnMap/index.vue b/src/views/pictureOnMap/index.vue
index 5823b2f..b0eaa08 100644
--- a/src/views/pictureOnMap/index.vue
+++ b/src/views/pictureOnMap/index.vue
@@ -279,6 +279,9 @@
     type = "rainwater_pipeline_quality";
     dialogConfig.RefName = "jiancefenxiGWFX";
   }
+
+  if (Name == "排口水质") {
+  }
   let params = {
     dataCode: type,
     scene: specificFun(type) || "basis_monitor",
diff --git a/src/views/pictureOnMap/page/DrainageSystem/YSIndex.vue b/src/views/pictureOnMap/page/DrainageSystem/YSIndex.vue
index ab2e36e..2003971 100644
--- a/src/views/pictureOnMap/page/DrainageSystem/YSIndex.vue
+++ b/src/views/pictureOnMap/page/DrainageSystem/YSIndex.vue
@@ -804,6 +804,11 @@
           AllData.RightShow = true;
         }
       }
+      // 排口水质/流量
+      if (Row.properties.pointType == "outlet_quality" || "outlet_water_level") {
+        // 定位雨水系统二级菜单下右侧排口信息echarts列表
+        bus.emit("SZEchartsScrollTop", Row.properties);
+      }
     }
     // }
   }
diff --git a/src/views/pictureOnMap/page/DrainageSystem/YSIndex_right2.vue b/src/views/pictureOnMap/page/DrainageSystem/YSIndex_right2.vue
index fea3dc3..4453800 100644
--- a/src/views/pictureOnMap/page/DrainageSystem/YSIndex_right2.vue
+++ b/src/views/pictureOnMap/page/DrainageSystem/YSIndex_right2.vue
@@ -4,311 +4,324 @@
       <div class="leve2Title flex flex-justcontent-spacebetween">
         <div>历史水质</div>
         <div>
-              <el-select
-      v-model="AllData.selectmodel"
-      placeholder="请选择湖泊"
-      style="width: 90px;position: relative;margin-bottom: 5px;"
-      filterable
-      size="small"
-      placement="bottom"
-      @change="selectchange"
-    >
-
-      <el-option v-for="(item) in AllData.filterList" :key="item.lakerId" :label="item.lakerName" :value="item.lakerId">
-      </el-option>
-    </el-select>
+          <el-select
+            v-model="AllData.selectmodel"
+            placeholder="请选择湖泊"
+            style="width: 90px; position: relative; margin-bottom: 5px"
+            filterable
+            size="small"
+            placement="bottom"
+            @change="selectchange"
+          >
+            <el-option
+              v-for="item in AllData.filterList"
+              :key="item.lakerId"
+              :label="item.lakerName"
+              :value="item.lakerId"
+            >
+            </el-option>
+          </el-select>
         </div>
       </div>
       <div id="history">
-      <HistorySZChart :echartData="AllData.szHistoryData" :refresh="AllData.szHistoryrefresh"/>
-
+        <HistorySZChart
+          :echartData="AllData.szHistoryData"
+          :refresh="AllData.szHistoryrefresh"
+        />
       </div>
     </div>
-    <el-tabs v-model="AllData.activeName" class="demo-tabs" @tab-click="handleClick" stretch>
-    <el-tab-pane label="港渠" name="GQ"></el-tab-pane>
-    <el-tab-pane label="排口" name="PK"></el-tab-pane>
-  </el-tabs>
-  <div class="chartsbox" v-if="AllData.activeName=='GQ'">
-        <div class="eachLake" v-for="(item) in AllData.allSZ" :key="item.stCode" >
-      <div class="h100">
-        <div class="leve2Title">{{item.stName}}</div>
-        <div id="Charts">
-                      <ShuiZhicharts
+    <el-tabs
+      v-model="AllData.activeName"
+      class="demo-tabs"
+      @tab-click="handleClick"
+      stretch
+    >
+      <el-tab-pane label="港渠" name="GQ"></el-tab-pane>
+      <el-tab-pane label="排口" name="PK"></el-tab-pane>
+    </el-tabs>
+    <div class="chartsbox" v-if="AllData.activeName == 'GQ'" ref="scrollContainer">
+      <div class="eachLake" v-for="item in AllData.allSZ" :key="item.stCode">
+        <div class="h100">
+          <div class="leve2Title">{{ item.stName }}</div>
+          <div id="Charts">
+            <ShuiZhicharts
               :data="item.chartInfo"
               :refresh="item.chartInfo.refresh"
             ></ShuiZhicharts>
+          </div>
         </div>
       </div>
-      
+      <div class="flex flex-justcontent-center" v-if="AllData.allSZ.length == 0">
+        暂无数据
+      </div>
     </div>
-     <div class="flex flex-justcontent-center" v-if="AllData.allSZ.length==0">
-    暂无数据
-  </div>
-  </div>
 
-  <div class="chartsbox" v-if="AllData.activeName=='PK'">
-        <div class="eachLake" v-for="(item) in AllData.allPK" :key="item.stCode" >
-      <div class="h100">
-        <div class="leve2Title">{{item.stName}}</div>
-        <div id="Charts">
-                      <Paikoucharts 
-          :refresh="item.chartInfo.refresh"
-          :XAxis="item.chartInfo.XAxis"
-          :YAxis="item.chartInfo.YAxis"
-          :yAxisarr="item.chartInfo.yAxisarr"
-        >
-        </Paikoucharts>
+    <div class="chartsbox" v-if="AllData.activeName == 'PK'" ref="scrollContainer">
+      <div
+        class="eachLake"
+        ref="PKeachLake"
+        v-for="item in AllData.allPK"
+        :key="item.stCode"
+      >
+        <div class="h100">
+          <div class="leve2Title">{{ item.stName }}</div>
+          <div id="Charts">
+            <Paikoucharts
+              :refresh="item.chartInfo.refresh"
+              :XAxis="item.chartInfo.XAxis"
+              :YAxis="item.chartInfo.YAxis"
+              :yAxisarr="item.chartInfo.yAxisarr"
+            >
+            </Paikoucharts>
+          </div>
         </div>
       </div>
-      
+      <div class="flex flex-justcontent-center" v-if="AllData.allPK.length == 0">
+        暂无数据
+      </div>
     </div>
-        <div class="flex flex-justcontent-center"   v-if="AllData.allPK.length==0">
-    暂无数据
-
-  </div>
-  </div>
-
-
   </div>
 </template>
 
 <script setup name="YSIndex_right2">
-import { ref, reactive, toRefs, onMounted } from 'vue';
-import { getWaterQualityEchart,riverQualityGetHistory } from '@/api/MonitorAssetsOnMap';
+import { ref, reactive, toRefs, onMounted, nextTick } from "vue";
+import { getWaterQualityEchart, riverQualityGetHistory } from "@/api/MonitorAssetsOnMap";
 import ShuiZhicharts from "./components/ShuiZhicharts.vue";
 import Paikoucharts from "./components/Paikoucharts.vue";
 import HistorySZChart from "./components/HistorySZChart.vue";
+import bus from "@/bus";
 
 const props = defineProps({
   //分区编号
   waterRegionCode: {
     type: [String],
-    default: '',
+    default: "",
   },
-
 });
 const AllData = reactive({
-  selectmodel:'',
-  filterList:[],
-  activeName:'',
-  GQdata:[],
-  PKdata:[],
-  allSZ:[],
-  allPK:[],
-  szHistoryData:[],
-  szHistoryrefresh:[],
-
+  selectmodel: "",
+  filterList: [],
+  activeName: "",
+  GQdata: [],
+  PKdata: [],
+  allSZ: [],
+  allPK: [],
+  szHistoryData: [],
+  szHistoryrefresh: [],
 });
-
+const scrollContainer = ref(null);
+const PKeachLake = ref(null);
 watch(
   () => props.waterRegionCode,
-  val => {
-    console.log('YSIndex_right2:分区编号变了2', val);
+  (val) => {
+    console.log("YSIndex_right2:分区编号变了2", val);
     // debugger
-    if(val){
+    if (val) {
       getHistoryData();
       getData();
-
     }
-
   },
   { immediate: true, deep: true }
 );
 function selectchange(value) {
-  console.log('value',value);
-  AllData.filterList.map((e)=>{
-    if(e.lakerId==value){
-              AllData.szHistoryData=e
+  console.log("value", value);
+  AllData.filterList.map((e) => {
+    if (e.lakerId == value) {
+      AllData.szHistoryData = e;
 
-      AllData.szHistoryrefresh=Math.random()
+      AllData.szHistoryrefresh = Math.random();
     }
-  })
-
+  });
 }
-function handleClick(e){
-  console.log('e',e.props.name);
-  console.log('AllData.activeName',AllData.activeName);
-  if(e.props.name=='GQ'){
-    chuliDataFunGQ()
-  }else {
-    chuliDataFunPK()
-
+function handleClick(e) {
+  console.log("e", e.props.name);
+  console.log("AllData.activeName", AllData.activeName);
+  if (e.props.name == "GQ") {
+    chuliDataFunGQ();
+  } else {
+    chuliDataFunPK();
   }
 }
-function getHistoryData(){
-  let params={
-    waterRegionCode:props.waterRegionCode,
+function getHistoryData() {
+  let params = {
+    waterRegionCode: props.waterRegionCode,
     // lakerId:5,
+  };
+  riverQualityGetHistory(params).then((res) => {
+    console.log("水质历史数据", res);
+    if (res.code == 200) {
+      AllData.filterList = res.data;
+      if (res.data?.length > 0) {
+        AllData.selectmodel = res.data[0].lakerId;
 
-  }
-  riverQualityGetHistory(params).then(res=>{
-    console.log('水质历史数据',res);
-      if(res.code==200){
-
-      AllData.filterList=res.data
-      if(res.data?.length>0){
-      AllData.selectmodel=res.data[0].lakerId
-
-        AllData.szHistoryData=res.data[0]
-      AllData.szHistoryrefresh=Math.random()
+        AllData.szHistoryData = res.data[0];
+        AllData.szHistoryrefresh = Math.random();
       }
-
-      }
-  })
-}
-function getData(){
-    getWaterQualityEchart(props.waterRegionCode).then(res=>{
-
-      console.log('水质',res);
-    if(res.code==200){
-      AllData.GQdata=res.data.portChannelDataList
-      AllData.PKdata=res.data.outletDataList
-      if(AllData.GQdata.length>0){
-        AllData.activeName='GQ'
-      chuliDataFunGQ()
-      return
-      }else if(AllData.PKdata.length>0) {
-        AllData.activeName='PK'
-      chuliDataFunPK()
-      return
-      }else {
-         AllData.activeName='GQ'
-      chuliDataFunGQ()
-      }
-
-      
     }
-  })
+  });
 }
-function chuliDataFunGQ(){
-         let arr=[]
-       let data=AllData.GQdata
-       data.forEach((e)=>{
-        let obj={
-          stName:e.stName,
-          stCode:e.stCode,
-          targetQuality:e.targetQuality,
-          chartInfo:{
-            name:'',
-            XAxis:[],
-            nh4n:[],
-            DO:[],
-            codcr:[],
-            cond:[],
-            ph:[],
-            marklineObj:{
-            nh4n:'',
-            DO:'',
-            codcr:'',
-            cond:'',
-            ph:'',
-       },
-            refresh:1
-          }
-        }
-        let at=obj.chartInfo
-       at.XAxis = e.siteEchartDto.times;
-        if(e.targetQuality==1){
-          at.marklineObj.nh4n=0.15
-          at.marklineObj.DO=7.5
-          at.marklineObj.codcr=15
-          at.marklineObj.cond=''
-          at.marklineObj.ph=''
-        }else if(e.targetQuality==2){
-           at.marklineObj.nh4n=0.5
-          at.marklineObj.DO=6
-          at.marklineObj.codcr=15
-          at.marklineObj.cond=''
-          at.marklineObj.ph=''
-        }else if(e.targetQuality==3){
-           at.marklineObj.nh4n=1
-          at.marklineObj.DO=5
-          at.marklineObj.codcr=20
-          at.marklineObj.cond=''
-          at.marklineObj.ph=''
-        }else if(e.targetQuality==4){
-           at.marklineObj.nh4n=1.5
-          at.marklineObj.DO=3
-          at.marklineObj.codcr=30
-          at.marklineObj.cond=''
-          at.marklineObj.ph=''
-        }else if(e.targetQuality==5){
-           at.marklineObj.nh4n=2
-          at.marklineObj.DO=2
-          at.marklineObj.codcr=40
-          at.marklineObj.cond=''
-          at.marklineObj.ph=''
-        }
-        e.siteEchartDto.datas.forEach((j) => {
-          
-        switch (j.dataKey) {
-          case "nh4n":
-            at.nh4n = j.datas;
-            break;
-          case "DO":
-            at.DO = j.datas;
-            break;
-          case "codcr":
-            at.codcr = j.datas;
-            break;
-          case "cond":
-            at.cond = j.datas;
-            break;
-            case "ph":
-            at.ph = j.datas;
-            break;
-        }
-      });
-      if(e.siteEchartDto?.times?.length>0){
-        arr.push(obj)
+function getData() {
+  getWaterQualityEchart(props.waterRegionCode).then((res) => {
+    console.log("水质", res);
+    if (res.code == 200) {
+      AllData.GQdata = res.data.portChannelDataList;
+      AllData.PKdata = res.data.outletDataList;
+      if (AllData.GQdata.length > 0) {
+        AllData.activeName = "GQ";
+        chuliDataFunGQ();
+        return;
+      } else if (AllData.PKdata.length > 0) {
+        AllData.activeName = "PK";
+        chuliDataFunPK();
+        return;
+      } else {
+        AllData.activeName = "GQ";
+        chuliDataFunGQ();
       }
-      
-       obj.chartInfo.refresh =Math.random()
-      
-       })
-      AllData.allSZ=arr
-      console.log('AllData.allSZ',AllData.allSZ);
+    }
+  });
 }
-function chuliDataFunPK(){
-    let arr=[]
-       let data=AllData.PKdata
-       console.log('dataPK',data);
-       data.forEach((e)=>{
-        let obj={
-          stName:e.stName,
-          stCode:e.stCode,
-          targetQuality:e.targetQuality,
-          chartInfo:{
-              refresh: 1,
-  DataName: '',
-  XAxis: [],
-  typeName: '',
-  YAxis: [0, 1, 6, 3, 4],
-  loading: false,
-  yAxisarr: [
+function chuliDataFunGQ() {
+  let arr = [];
+  let data = AllData.GQdata;
+  data.forEach((e) => {
+    let obj = {
+      stName: e.stName,
+      stCode: e.stCode,
+      targetQuality: e.targetQuality,
+      chartInfo: {
+        name: "",
+        XAxis: [],
+        nh4n: [],
+        DO: [],
+        codcr: [],
+        cond: [],
+        ph: [],
+        marklineObj: {
+          nh4n: "",
+          DO: "",
+          codcr: "",
+          cond: "",
+          ph: "",
+        },
+        refresh: 1,
+      },
+    };
+    let at = obj.chartInfo;
+    at.XAxis = e.siteEchartDto.times;
+    if (e.targetQuality == 1) {
+      at.marklineObj.nh4n = 0.15;
+      at.marklineObj.DO = 7.5;
+      at.marklineObj.codcr = 15;
+      at.marklineObj.cond = "";
+      at.marklineObj.ph = "";
+    } else if (e.targetQuality == 2) {
+      at.marklineObj.nh4n = 0.5;
+      at.marklineObj.DO = 6;
+      at.marklineObj.codcr = 15;
+      at.marklineObj.cond = "";
+      at.marklineObj.ph = "";
+    } else if (e.targetQuality == 3) {
+      at.marklineObj.nh4n = 1;
+      at.marklineObj.DO = 5;
+      at.marklineObj.codcr = 20;
+      at.marklineObj.cond = "";
+      at.marklineObj.ph = "";
+    } else if (e.targetQuality == 4) {
+      at.marklineObj.nh4n = 1.5;
+      at.marklineObj.DO = 3;
+      at.marklineObj.codcr = 30;
+      at.marklineObj.cond = "";
+      at.marklineObj.ph = "";
+    } else if (e.targetQuality == 5) {
+      at.marklineObj.nh4n = 2;
+      at.marklineObj.DO = 2;
+      at.marklineObj.codcr = 40;
+      at.marklineObj.cond = "";
+      at.marklineObj.ph = "";
+    }
+    e.siteEchartDto.datas.forEach((j) => {
+      switch (j.dataKey) {
+        case "nh4n":
+          at.nh4n = j.datas;
+          break;
+        case "DO":
+          at.DO = j.datas;
+          break;
+        case "codcr":
+          at.codcr = j.datas;
+          break;
+        case "cond":
+          at.cond = j.datas;
+          break;
+        case "ph":
+          at.ph = j.datas;
+          break;
+      }
+    });
+    if (e.siteEchartDto?.times?.length > 0) {
+      arr.push(obj);
+    }
 
-  ],
-  marklinearr: [
-
-  ],
-          }
-        }
-        let at=obj.chartInfo
-         e.siteEchartDto.datas.map(item => {
+    obj.chartInfo.refresh = Math.random();
+  });
+  AllData.allSZ = arr;
+  console.log("AllData.allSZ", AllData.allSZ);
+}
+function chuliDataFunPK() {
+  let arr = [];
+  let data = AllData.PKdata;
+  console.log("dataPK", data);
+  data.forEach((e) => {
+    let obj = {
+      stName: e.stName,
+      stCode: e.stCode,
+      targetQuality: e.targetQuality,
+      chartInfo: {
+        refresh: 1,
+        DataName: "",
+        XAxis: [],
+        typeName: "",
+        YAxis: [0, 1, 6, 3, 4],
+        loading: false,
+        yAxisarr: [],
+        marklinearr: [],
+      },
+    };
+    let at = obj.chartInfo;
+    e.siteEchartDto.datas.map((item) => {
       at.marklinearr.push(...item.cordonLineList);
     });
-       at.XAxis = e.siteEchartDto.times;
-        at.yAxisarr = e.siteEchartDto.datas;
-              if(e.siteEchartDto?.times?.length>0){
-        arr.push(obj)
-      }
-       at.refresh =Math.random()
-
-       })
-       console.log('arrPK',arr);
-          AllData.allPK=arr
+    at.XAxis = e.siteEchartDto.times;
+    at.yAxisarr = e.siteEchartDto.datas;
+    if (e.siteEchartDto?.times?.length > 0) {
+      arr.push(obj);
+    }
+    at.refresh = Math.random();
+  });
+  console.log("arrPK", arr);
+  AllData.allPK = arr;
 }
+// 通过name去定位到某一个echarts
+const SZEchartsScrollTop = (item) => {
+  AllData.activeName = "PK";
+  chuliDataFunPK();
+  nextTick(() => {
+    //  获取一个单位的echart元素高度
+    let EchartsHeight = PKeachLake.value[0].offsetHeight;
+    // 获取当前站点名称在所有数据中的索引
+    var index = AllData.allPK.findIndex(function (element) {
+      return element.stName == item.name;
+    });
+    scrollContainer.value.scrollTop = index * EchartsHeight;
+  });
+};
 onMounted(() => {
+  bus.on("SZEchartsScrollTop", SZEchartsScrollTop);
+});
+
+onBeforeUnmount(() => {
+  bus.off("SZEchartsScrollTop");
 });
 </script>
 
@@ -316,12 +329,12 @@
 #YSIndex_right2 {
   width: 100%;
   height: 100%;
-  
-  .historySZ{
+
+  .historySZ {
     height: calc((100% - 30px) / 3);
-    
   }
-  #Charts,#history {
+  #Charts,
+  #history {
     width: calc(100% - 10px);
 
     height: calc(100% - 32px);
@@ -331,12 +344,10 @@
     overflow-y: auto;
   }
   .eachLake {
-height: calc((100% - 30px) / 2);
+    height: calc((100% - 30px) / 2);
   }
-  :deep(.el-select .el-input__inner){
+  :deep(.el-select .el-input__inner) {
     color: #fff;
-    
   }
-
 }
 </style>

diff --git a/src/views/pictureOnMap/index.vue b/src/views/pictureOnMap/index.vue
index 5823b2f..b0eaa08 100644
--- a/src/views/pictureOnMap/index.vue
+++ b/src/views/pictureOnMap/index.vue
@@ -279,6 +279,9 @@
     type = "rainwater_pipeline_quality";
     dialogConfig.RefName = "jiancefenxiGWFX";
   }
+
+  if (Name == "排口水质") {
+  }
   let params = {
     dataCode: type,
     scene: specificFun(type) || "basis_monitor",
diff --git a/src/views/pictureOnMap/page/DrainageSystem/YSIndex.vue b/src/views/pictureOnMap/page/DrainageSystem/YSIndex.vue
index ab2e36e..2003971 100644
--- a/src/views/pictureOnMap/page/DrainageSystem/YSIndex.vue
+++ b/src/views/pictureOnMap/page/DrainageSystem/YSIndex.vue
@@ -804,6 +804,11 @@
           AllData.RightShow = true;
         }
       }
+      // 排口水质/流量
+      if (Row.properties.pointType == "outlet_quality" || "outlet_water_level") {
+        // 定位雨水系统二级菜单下右侧排口信息echarts列表
+        bus.emit("SZEchartsScrollTop", Row.properties);
+      }
     }
     // }
   }
diff --git a/src/views/pictureOnMap/page/DrainageSystem/YSIndex_right2.vue b/src/views/pictureOnMap/page/DrainageSystem/YSIndex_right2.vue
index fea3dc3..4453800 100644
--- a/src/views/pictureOnMap/page/DrainageSystem/YSIndex_right2.vue
+++ b/src/views/pictureOnMap/page/DrainageSystem/YSIndex_right2.vue
@@ -4,311 +4,324 @@
       <div class="leve2Title flex flex-justcontent-spacebetween">
         <div>历史水质</div>
         <div>
-              <el-select
-      v-model="AllData.selectmodel"
-      placeholder="请选择湖泊"
-      style="width: 90px;position: relative;margin-bottom: 5px;"
-      filterable
-      size="small"
-      placement="bottom"
-      @change="selectchange"
-    >
-
-      <el-option v-for="(item) in AllData.filterList" :key="item.lakerId" :label="item.lakerName" :value="item.lakerId">
-      </el-option>
-    </el-select>
+          <el-select
+            v-model="AllData.selectmodel"
+            placeholder="请选择湖泊"
+            style="width: 90px; position: relative; margin-bottom: 5px"
+            filterable
+            size="small"
+            placement="bottom"
+            @change="selectchange"
+          >
+            <el-option
+              v-for="item in AllData.filterList"
+              :key="item.lakerId"
+              :label="item.lakerName"
+              :value="item.lakerId"
+            >
+            </el-option>
+          </el-select>
         </div>
       </div>
       <div id="history">
-      <HistorySZChart :echartData="AllData.szHistoryData" :refresh="AllData.szHistoryrefresh"/>
-
+        <HistorySZChart
+          :echartData="AllData.szHistoryData"
+          :refresh="AllData.szHistoryrefresh"
+        />
       </div>
     </div>
-    <el-tabs v-model="AllData.activeName" class="demo-tabs" @tab-click="handleClick" stretch>
-    <el-tab-pane label="港渠" name="GQ"></el-tab-pane>
-    <el-tab-pane label="排口" name="PK"></el-tab-pane>
-  </el-tabs>
-  <div class="chartsbox" v-if="AllData.activeName=='GQ'">
-        <div class="eachLake" v-for="(item) in AllData.allSZ" :key="item.stCode" >
-      <div class="h100">
-        <div class="leve2Title">{{item.stName}}</div>
-        <div id="Charts">
-                      <ShuiZhicharts
+    <el-tabs
+      v-model="AllData.activeName"
+      class="demo-tabs"
+      @tab-click="handleClick"
+      stretch
+    >
+      <el-tab-pane label="港渠" name="GQ"></el-tab-pane>
+      <el-tab-pane label="排口" name="PK"></el-tab-pane>
+    </el-tabs>
+    <div class="chartsbox" v-if="AllData.activeName == 'GQ'" ref="scrollContainer">
+      <div class="eachLake" v-for="item in AllData.allSZ" :key="item.stCode">
+        <div class="h100">
+          <div class="leve2Title">{{ item.stName }}</div>
+          <div id="Charts">
+            <ShuiZhicharts
               :data="item.chartInfo"
               :refresh="item.chartInfo.refresh"
             ></ShuiZhicharts>
+          </div>
         </div>
       </div>
-      
+      <div class="flex flex-justcontent-center" v-if="AllData.allSZ.length == 0">
+        暂无数据
+      </div>
     </div>
-     <div class="flex flex-justcontent-center" v-if="AllData.allSZ.length==0">
-    暂无数据
-  </div>
-  </div>
 
-  <div class="chartsbox" v-if="AllData.activeName=='PK'">
-        <div class="eachLake" v-for="(item) in AllData.allPK" :key="item.stCode" >
-      <div class="h100">
-        <div class="leve2Title">{{item.stName}}</div>
-        <div id="Charts">
-                      <Paikoucharts 
-          :refresh="item.chartInfo.refresh"
-          :XAxis="item.chartInfo.XAxis"
-          :YAxis="item.chartInfo.YAxis"
-          :yAxisarr="item.chartInfo.yAxisarr"
-        >
-        </Paikoucharts>
+    <div class="chartsbox" v-if="AllData.activeName == 'PK'" ref="scrollContainer">
+      <div
+        class="eachLake"
+        ref="PKeachLake"
+        v-for="item in AllData.allPK"
+        :key="item.stCode"
+      >
+        <div class="h100">
+          <div class="leve2Title">{{ item.stName }}</div>
+          <div id="Charts">
+            <Paikoucharts
+              :refresh="item.chartInfo.refresh"
+              :XAxis="item.chartInfo.XAxis"
+              :YAxis="item.chartInfo.YAxis"
+              :yAxisarr="item.chartInfo.yAxisarr"
+            >
+            </Paikoucharts>
+          </div>
         </div>
       </div>
-      
+      <div class="flex flex-justcontent-center" v-if="AllData.allPK.length == 0">
+        暂无数据
+      </div>
     </div>
-        <div class="flex flex-justcontent-center"   v-if="AllData.allPK.length==0">
-    暂无数据
-
-  </div>
-  </div>
-
-
   </div>
 </template>
 
 <script setup name="YSIndex_right2">
-import { ref, reactive, toRefs, onMounted } from 'vue';
-import { getWaterQualityEchart,riverQualityGetHistory } from '@/api/MonitorAssetsOnMap';
+import { ref, reactive, toRefs, onMounted, nextTick } from "vue";
+import { getWaterQualityEchart, riverQualityGetHistory } from "@/api/MonitorAssetsOnMap";
 import ShuiZhicharts from "./components/ShuiZhicharts.vue";
 import Paikoucharts from "./components/Paikoucharts.vue";
 import HistorySZChart from "./components/HistorySZChart.vue";
+import bus from "@/bus";
 
 const props = defineProps({
   //分区编号
   waterRegionCode: {
     type: [String],
-    default: '',
+    default: "",
   },
-
 });
 const AllData = reactive({
-  selectmodel:'',
-  filterList:[],
-  activeName:'',
-  GQdata:[],
-  PKdata:[],
-  allSZ:[],
-  allPK:[],
-  szHistoryData:[],
-  szHistoryrefresh:[],
-
+  selectmodel: "",
+  filterList: [],
+  activeName: "",
+  GQdata: [],
+  PKdata: [],
+  allSZ: [],
+  allPK: [],
+  szHistoryData: [],
+  szHistoryrefresh: [],
 });
-
+const scrollContainer = ref(null);
+const PKeachLake = ref(null);
 watch(
   () => props.waterRegionCode,
-  val => {
-    console.log('YSIndex_right2:分区编号变了2', val);
+  (val) => {
+    console.log("YSIndex_right2:分区编号变了2", val);
     // debugger
-    if(val){
+    if (val) {
       getHistoryData();
       getData();
-
     }
-
   },
   { immediate: true, deep: true }
 );
 function selectchange(value) {
-  console.log('value',value);
-  AllData.filterList.map((e)=>{
-    if(e.lakerId==value){
-              AllData.szHistoryData=e
+  console.log("value", value);
+  AllData.filterList.map((e) => {
+    if (e.lakerId == value) {
+      AllData.szHistoryData = e;
 
-      AllData.szHistoryrefresh=Math.random()
+      AllData.szHistoryrefresh = Math.random();
     }
-  })
-
+  });
 }
-function handleClick(e){
-  console.log('e',e.props.name);
-  console.log('AllData.activeName',AllData.activeName);
-  if(e.props.name=='GQ'){
-    chuliDataFunGQ()
-  }else {
-    chuliDataFunPK()
-
+function handleClick(e) {
+  console.log("e", e.props.name);
+  console.log("AllData.activeName", AllData.activeName);
+  if (e.props.name == "GQ") {
+    chuliDataFunGQ();
+  } else {
+    chuliDataFunPK();
   }
 }
-function getHistoryData(){
-  let params={
-    waterRegionCode:props.waterRegionCode,
+function getHistoryData() {
+  let params = {
+    waterRegionCode: props.waterRegionCode,
     // lakerId:5,
+  };
+  riverQualityGetHistory(params).then((res) => {
+    console.log("水质历史数据", res);
+    if (res.code == 200) {
+      AllData.filterList = res.data;
+      if (res.data?.length > 0) {
+        AllData.selectmodel = res.data[0].lakerId;
 
-  }
-  riverQualityGetHistory(params).then(res=>{
-    console.log('水质历史数据',res);
-      if(res.code==200){
-
-      AllData.filterList=res.data
-      if(res.data?.length>0){
-      AllData.selectmodel=res.data[0].lakerId
-
-        AllData.szHistoryData=res.data[0]
-      AllData.szHistoryrefresh=Math.random()
+        AllData.szHistoryData = res.data[0];
+        AllData.szHistoryrefresh = Math.random();
       }
-
-      }
-  })
-}
-function getData(){
-    getWaterQualityEchart(props.waterRegionCode).then(res=>{
-
-      console.log('水质',res);
-    if(res.code==200){
-      AllData.GQdata=res.data.portChannelDataList
-      AllData.PKdata=res.data.outletDataList
-      if(AllData.GQdata.length>0){
-        AllData.activeName='GQ'
-      chuliDataFunGQ()
-      return
-      }else if(AllData.PKdata.length>0) {
-        AllData.activeName='PK'
-      chuliDataFunPK()
-      return
-      }else {
-         AllData.activeName='GQ'
-      chuliDataFunGQ()
-      }
-
-      
     }
-  })
+  });
 }
-function chuliDataFunGQ(){
-         let arr=[]
-       let data=AllData.GQdata
-       data.forEach((e)=>{
-        let obj={
-          stName:e.stName,
-          stCode:e.stCode,
-          targetQuality:e.targetQuality,
-          chartInfo:{
-            name:'',
-            XAxis:[],
-            nh4n:[],
-            DO:[],
-            codcr:[],
-            cond:[],
-            ph:[],
-            marklineObj:{
-            nh4n:'',
-            DO:'',
-            codcr:'',
-            cond:'',
-            ph:'',
-       },
-            refresh:1
-          }
-        }
-        let at=obj.chartInfo
-       at.XAxis = e.siteEchartDto.times;
-        if(e.targetQuality==1){
-          at.marklineObj.nh4n=0.15
-          at.marklineObj.DO=7.5
-          at.marklineObj.codcr=15
-          at.marklineObj.cond=''
-          at.marklineObj.ph=''
-        }else if(e.targetQuality==2){
-           at.marklineObj.nh4n=0.5
-          at.marklineObj.DO=6
-          at.marklineObj.codcr=15
-          at.marklineObj.cond=''
-          at.marklineObj.ph=''
-        }else if(e.targetQuality==3){
-           at.marklineObj.nh4n=1
-          at.marklineObj.DO=5
-          at.marklineObj.codcr=20
-          at.marklineObj.cond=''
-          at.marklineObj.ph=''
-        }else if(e.targetQuality==4){
-           at.marklineObj.nh4n=1.5
-          at.marklineObj.DO=3
-          at.marklineObj.codcr=30
-          at.marklineObj.cond=''
-          at.marklineObj.ph=''
-        }else if(e.targetQuality==5){
-           at.marklineObj.nh4n=2
-          at.marklineObj.DO=2
-          at.marklineObj.codcr=40
-          at.marklineObj.cond=''
-          at.marklineObj.ph=''
-        }
-        e.siteEchartDto.datas.forEach((j) => {
-          
-        switch (j.dataKey) {
-          case "nh4n":
-            at.nh4n = j.datas;
-            break;
-          case "DO":
-            at.DO = j.datas;
-            break;
-          case "codcr":
-            at.codcr = j.datas;
-            break;
-          case "cond":
-            at.cond = j.datas;
-            break;
-            case "ph":
-            at.ph = j.datas;
-            break;
-        }
-      });
-      if(e.siteEchartDto?.times?.length>0){
-        arr.push(obj)
+function getData() {
+  getWaterQualityEchart(props.waterRegionCode).then((res) => {
+    console.log("水质", res);
+    if (res.code == 200) {
+      AllData.GQdata = res.data.portChannelDataList;
+      AllData.PKdata = res.data.outletDataList;
+      if (AllData.GQdata.length > 0) {
+        AllData.activeName = "GQ";
+        chuliDataFunGQ();
+        return;
+      } else if (AllData.PKdata.length > 0) {
+        AllData.activeName = "PK";
+        chuliDataFunPK();
+        return;
+      } else {
+        AllData.activeName = "GQ";
+        chuliDataFunGQ();
       }
-      
-       obj.chartInfo.refresh =Math.random()
-      
-       })
-      AllData.allSZ=arr
-      console.log('AllData.allSZ',AllData.allSZ);
+    }
+  });
 }
-function chuliDataFunPK(){
-    let arr=[]
-       let data=AllData.PKdata
-       console.log('dataPK',data);
-       data.forEach((e)=>{
-        let obj={
-          stName:e.stName,
-          stCode:e.stCode,
-          targetQuality:e.targetQuality,
-          chartInfo:{
-              refresh: 1,
-  DataName: '',
-  XAxis: [],
-  typeName: '',
-  YAxis: [0, 1, 6, 3, 4],
-  loading: false,
-  yAxisarr: [
+function chuliDataFunGQ() {
+  let arr = [];
+  let data = AllData.GQdata;
+  data.forEach((e) => {
+    let obj = {
+      stName: e.stName,
+      stCode: e.stCode,
+      targetQuality: e.targetQuality,
+      chartInfo: {
+        name: "",
+        XAxis: [],
+        nh4n: [],
+        DO: [],
+        codcr: [],
+        cond: [],
+        ph: [],
+        marklineObj: {
+          nh4n: "",
+          DO: "",
+          codcr: "",
+          cond: "",
+          ph: "",
+        },
+        refresh: 1,
+      },
+    };
+    let at = obj.chartInfo;
+    at.XAxis = e.siteEchartDto.times;
+    if (e.targetQuality == 1) {
+      at.marklineObj.nh4n = 0.15;
+      at.marklineObj.DO = 7.5;
+      at.marklineObj.codcr = 15;
+      at.marklineObj.cond = "";
+      at.marklineObj.ph = "";
+    } else if (e.targetQuality == 2) {
+      at.marklineObj.nh4n = 0.5;
+      at.marklineObj.DO = 6;
+      at.marklineObj.codcr = 15;
+      at.marklineObj.cond = "";
+      at.marklineObj.ph = "";
+    } else if (e.targetQuality == 3) {
+      at.marklineObj.nh4n = 1;
+      at.marklineObj.DO = 5;
+      at.marklineObj.codcr = 20;
+      at.marklineObj.cond = "";
+      at.marklineObj.ph = "";
+    } else if (e.targetQuality == 4) {
+      at.marklineObj.nh4n = 1.5;
+      at.marklineObj.DO = 3;
+      at.marklineObj.codcr = 30;
+      at.marklineObj.cond = "";
+      at.marklineObj.ph = "";
+    } else if (e.targetQuality == 5) {
+      at.marklineObj.nh4n = 2;
+      at.marklineObj.DO = 2;
+      at.marklineObj.codcr = 40;
+      at.marklineObj.cond = "";
+      at.marklineObj.ph = "";
+    }
+    e.siteEchartDto.datas.forEach((j) => {
+      switch (j.dataKey) {
+        case "nh4n":
+          at.nh4n = j.datas;
+          break;
+        case "DO":
+          at.DO = j.datas;
+          break;
+        case "codcr":
+          at.codcr = j.datas;
+          break;
+        case "cond":
+          at.cond = j.datas;
+          break;
+        case "ph":
+          at.ph = j.datas;
+          break;
+      }
+    });
+    if (e.siteEchartDto?.times?.length > 0) {
+      arr.push(obj);
+    }
 
-  ],
-  marklinearr: [
-
-  ],
-          }
-        }
-        let at=obj.chartInfo
-         e.siteEchartDto.datas.map(item => {
+    obj.chartInfo.refresh = Math.random();
+  });
+  AllData.allSZ = arr;
+  console.log("AllData.allSZ", AllData.allSZ);
+}
+function chuliDataFunPK() {
+  let arr = [];
+  let data = AllData.PKdata;
+  console.log("dataPK", data);
+  data.forEach((e) => {
+    let obj = {
+      stName: e.stName,
+      stCode: e.stCode,
+      targetQuality: e.targetQuality,
+      chartInfo: {
+        refresh: 1,
+        DataName: "",
+        XAxis: [],
+        typeName: "",
+        YAxis: [0, 1, 6, 3, 4],
+        loading: false,
+        yAxisarr: [],
+        marklinearr: [],
+      },
+    };
+    let at = obj.chartInfo;
+    e.siteEchartDto.datas.map((item) => {
       at.marklinearr.push(...item.cordonLineList);
     });
-       at.XAxis = e.siteEchartDto.times;
-        at.yAxisarr = e.siteEchartDto.datas;
-              if(e.siteEchartDto?.times?.length>0){
-        arr.push(obj)
-      }
-       at.refresh =Math.random()
-
-       })
-       console.log('arrPK',arr);
-          AllData.allPK=arr
+    at.XAxis = e.siteEchartDto.times;
+    at.yAxisarr = e.siteEchartDto.datas;
+    if (e.siteEchartDto?.times?.length > 0) {
+      arr.push(obj);
+    }
+    at.refresh = Math.random();
+  });
+  console.log("arrPK", arr);
+  AllData.allPK = arr;
 }
+// 通过name去定位到某一个echarts
+const SZEchartsScrollTop = (item) => {
+  AllData.activeName = "PK";
+  chuliDataFunPK();
+  nextTick(() => {
+    //  获取一个单位的echart元素高度
+    let EchartsHeight = PKeachLake.value[0].offsetHeight;
+    // 获取当前站点名称在所有数据中的索引
+    var index = AllData.allPK.findIndex(function (element) {
+      return element.stName == item.name;
+    });
+    scrollContainer.value.scrollTop = index * EchartsHeight;
+  });
+};
 onMounted(() => {
+  bus.on("SZEchartsScrollTop", SZEchartsScrollTop);
+});
+
+onBeforeUnmount(() => {
+  bus.off("SZEchartsScrollTop");
 });
 </script>
 
@@ -316,12 +329,12 @@
 #YSIndex_right2 {
   width: 100%;
   height: 100%;
-  
-  .historySZ{
+
+  .historySZ {
     height: calc((100% - 30px) / 3);
-    
   }
-  #Charts,#history {
+  #Charts,
+  #history {
     width: calc(100% - 10px);
 
     height: calc(100% - 32px);
@@ -331,12 +344,10 @@
     overflow-y: auto;
   }
   .eachLake {
-height: calc((100% - 30px) / 2);
+    height: calc((100% - 30px) / 2);
   }
-  :deep(.el-select .el-input__inner){
+  :deep(.el-select .el-input__inner) {
     color: #fff;
-    
   }
-
 }
 </style>
diff --git a/vite.config.js b/vite.config.js
index a6b0a22..f7906cb 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -6,9 +6,9 @@
 
 const Timestamp = new Date().getTime(); //随机时间戳
 // let ipLink = 'https://dhgx.wh-nf.cn:8201/prod-api';
-// let ipLink = 'http://192.168.16.135:9100';
+let ipLink = 'https://server1.wh-nf.cn:8201/prod-api';
 // let ipLink = 'http://192.168.16.124:9100';
-let ipLink = 'http://192.168.20.43:9100'; // 刘总
+// let ipLink = 'http://192.168.20.43:9100'; // 刘总
 /*  */
 // https://vitejs.dev/config/
 export default defineConfig(({ mode, command }) => {