diff --git a/src/api/MonitorAssetsOnMap.js b/src/api/MonitorAssetsOnMap.js
index 109d251..c339842 100644
--- a/src/api/MonitorAssetsOnMap.js
+++ b/src/api/MonitorAssetsOnMap.js
@@ -291,6 +291,14 @@
     params: query,
   });
 }
+//港渠列表
+export function getPortChannelLengthSum(params) {
+  return request({
+    url: '/business/drainageDispatch/getPortChannelLengthSum',
+    method: 'get',
+    params,
+  });
+}
 // 河湖水文历史
 export function hisHydrologyList(query) {
   return request({

diff --git a/src/api/MonitorAssetsOnMap.js b/src/api/MonitorAssetsOnMap.js
index 109d251..c339842 100644
--- a/src/api/MonitorAssetsOnMap.js
+++ b/src/api/MonitorAssetsOnMap.js
@@ -291,6 +291,14 @@
     params: query,
   });
 }
+//港渠列表
+export function getPortChannelLengthSum(params) {
+  return request({
+    url: '/business/drainageDispatch/getPortChannelLengthSum',
+    method: 'get',
+    params,
+  });
+}
 // 河湖水文历史
 export function hisHydrologyList(query) {
   return request({
diff --git a/src/assets/images/pictureOnMap/ystj.png b/src/assets/images/pictureOnMap/ystj.png
new file mode 100644
index 0000000..c2841a7
--- /dev/null
+++ b/src/assets/images/pictureOnMap/ystj.png
Binary files differ

diff --git a/src/api/MonitorAssetsOnMap.js b/src/api/MonitorAssetsOnMap.js
index 109d251..c339842 100644
--- a/src/api/MonitorAssetsOnMap.js
+++ b/src/api/MonitorAssetsOnMap.js
@@ -291,6 +291,14 @@
     params: query,
   });
 }
+//港渠列表
+export function getPortChannelLengthSum(params) {
+  return request({
+    url: '/business/drainageDispatch/getPortChannelLengthSum',
+    method: 'get',
+    params,
+  });
+}
 // 河湖水文历史
 export function hisHydrologyList(query) {
   return request({
diff --git a/src/assets/images/pictureOnMap/ystj.png b/src/assets/images/pictureOnMap/ystj.png
new file mode 100644
index 0000000..c2841a7
--- /dev/null
+++ b/src/assets/images/pictureOnMap/ystj.png
Binary files differ
diff --git a/src/assets/images/pictureOnMap/ystjbg.png b/src/assets/images/pictureOnMap/ystjbg.png
new file mode 100644
index 0000000..973cd6f
--- /dev/null
+++ b/src/assets/images/pictureOnMap/ystjbg.png
Binary files differ

diff --git a/src/api/MonitorAssetsOnMap.js b/src/api/MonitorAssetsOnMap.js
index 109d251..c339842 100644
--- a/src/api/MonitorAssetsOnMap.js
+++ b/src/api/MonitorAssetsOnMap.js
@@ -291,6 +291,14 @@
     params: query,
   });
 }
+//港渠列表
+export function getPortChannelLengthSum(params) {
+  return request({
+    url: '/business/drainageDispatch/getPortChannelLengthSum',
+    method: 'get',
+    params,
+  });
+}
 // 河湖水文历史
 export function hisHydrologyList(query) {
   return request({
diff --git a/src/assets/images/pictureOnMap/ystj.png b/src/assets/images/pictureOnMap/ystj.png
new file mode 100644
index 0000000..c2841a7
--- /dev/null
+++ b/src/assets/images/pictureOnMap/ystj.png
Binary files differ
diff --git a/src/assets/images/pictureOnMap/ystjbg.png b/src/assets/images/pictureOnMap/ystjbg.png
new file mode 100644
index 0000000..973cd6f
--- /dev/null
+++ b/src/assets/images/pictureOnMap/ystjbg.png
Binary files differ
diff --git a/src/views/pictureOnMap/page/DrainageSystem/YSIndex_right.vue b/src/views/pictureOnMap/page/DrainageSystem/YSIndex_right.vue
index e8e520d..76d12a2 100644
--- a/src/views/pictureOnMap/page/DrainageSystem/YSIndex_right.vue
+++ b/src/views/pictureOnMap/page/DrainageSystem/YSIndex_right.vue
@@ -1,8 +1,25 @@
 <template>
-  <div id="YSIndex_right"></div>
+  <div id="YSIndex_right">
+    <div class="canalAll flex flex-justcontent-spacebetween flex-align-center">
+      全区合计<span><b class="lus">{{gqData.portChannelNum}}</b>条</span><span><b class="las">{{gqData.lengthSum}}</b>km</span>
+    </div>
+    <div class="canalList">
+      <div class="list flex" v-for="i in allList" :key="i">
+        <div class="name flex flex-justcontent-center flex-align-center"><div>{{i.waterRegionName}}<br/>({{i.lengthSum}})</div></div>
+        <div class="info flex-1">
+          <div class="ditch flex flex-justcontent-center" v-for="e in i.portChannelList" :key="e">
+            <div class="one">{{e.name}}</div>
+            <div class="two flex-1 flex flex-align-center"><div class="inBra" :style="{width:`${e.length/8*100}%`}"><span :style="{right:e.length<2?'-24px':''}">{{e.length}}</span></div></div>
+            <div class="tre">目标：<span>{{e.targetQuality}}</span></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script setup name="YSIndex_right">
+import { getPortChannelLengthSum } from '@/api/MonitorAssetsOnMap';
 import { ref, reactive, toRefs, onMounted } from "vue";
 const props = defineProps({
   //分区编号
@@ -16,10 +33,32 @@
   () => props.waterRegionCode,
   (val) => {
     console.log("YSIndex_right:分区编号变了", val);
+    debugger
+    if(val!=''){
+      filetData(val)
+    }else{
+      getData()
+    }
   },
-  { immediate: true }
+  { immediate: true ,deep:true}
 );
-onMounted(() => {});
+let gqData=ref({})
+let allList=ref([])
+function getData(){
+  getPortChannelLengthSum().then(res=>{
+    if(res.code==200){
+      gqData.value=res.data
+      allList.value=gqData.value.waterRegionList
+    }
+  })
+}
+function filetData(id){
+  let list=gqData.value.waterRegionList.find(i=>{return i.waterRegionId==id})
+  allList.value=[list]
+}
+onMounted(() => {
+  // getData()
+});
 </script>
 
 <style lang="scss" scoped>
@@ -27,4 +66,103 @@
   width: 100%;
   height: 100%;
 }
+.canalAll{
+  height: 54px;
+  background: url('@/assets/images/pictureOnMap/ystjbg.png') no-repeat;
+  background-size:100% 100%;
+  font-weight: bold;
+  font-size: 16px;
+  color: #FFFFFF;
+  padding: 0 45px 0 25px;
+  position: relative;
+  &::before{
+    content: '';
+    width:47px;
+    height:14px;
+    background: url('@/assets/images/pictureOnMap/ystj.png') no-repeat;
+    background-size:100% 100%;
+    position: absolute;
+    left: 30%;
+    top: 50%;
+    transform: translate(-50%,-50%);
+  }
+  span{
+    font-weight: 400;
+    font-size: 14px;
+    color: #CCDFFF;
+  }
+  b{
+    font-weight: bold;
+    font-size: 24px;
+    margin-right:8px;
+    font-family:'DINPro';
+  }
+  .lus{
+    color: #27F388;
+  }
+  .las{
+    color: #2FE9FF;
+  }
+}
+.canalList{
+  height: calc(100% - 64px);
+  margin-top: 10px;
+  overflow: auto;
+  .list{
+    background: linear-gradient(0deg, #00134F 0%, #003065 100%);
+    border-radius: 6px;
+    border: 1px solid #163F80;
+    border-radius: 6px;
+    overflow: hidden;
+    margin-bottom: 10px;
+  }
+  .info{
+    min-height:70px;
+    padding: 10px 0 10px 10px;
+    overflow: hidden;
+  }
+  .name{
+    width: 80px;
+    background: linear-gradient(0deg, rgba(0,98,183,0.9) 0%, rgba(0,98,183,0.3) 100%);
+    border-radius: 6px;
+    overflow: hidden;
+    font-size: 16px;
+    color: #FFFFFF;
+    line-height:22px;
+    text-align: center;
+    padding: 0 12px;
+  }
+  .ditch{
+    height: 24px;
+    .one{
+      font-weight: bold;
+      font-size: 14px;
+      color: #CCDFFF;
+      width: 110px;
+    }
+    .tre{
+      width: 80px;
+      font-weight: bold;
+      font-size: 14px;
+      color: #CCDFFF;
+      padding-left: 4px;
+    }
+  }
+  .inBra{
+    width: 30%;
+    position: relative;
+    height: 12px;
+    border-radius: 0 6px 6px 0px;
+    background: linear-gradient(90deg, #0066E5, #00B6FF);
+    span{
+      position: absolute;
+      right:4px;
+      top: 0;
+      line-height: 12px;
+      font-weight: 400;
+      font-size: 12px;
+      color: #FFFFFF;
+    }
+  }
+}
 </style>