diff --git a/src/views/pictureOnMap/page/DrainageSystem/YSIndex_right.vue b/src/views/pictureOnMap/page/DrainageSystem/YSIndex_right.vue
index 76d12a2..7c391a4 100644
--- a/src/views/pictureOnMap/page/DrainageSystem/YSIndex_right.vue
+++ b/src/views/pictureOnMap/page/DrainageSystem/YSIndex_right.vue
@@ -10,7 +10,7 @@
           <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 class="tre">目标：<span :class="`color${e.targetQuality}`">{{getChineseFun(level,'label', e.targetQuality,'value')}}</span></div>
           </div>
         </div>
       </div>
@@ -19,6 +19,7 @@
 </template>
 
 <script setup name="YSIndex_right">
+import { getChineseFun } from '@/utils/ruoyi';
 import { getPortChannelLengthSum } from '@/api/MonitorAssetsOnMap';
 import { ref, reactive, toRefs, onMounted } from "vue";
 const props = defineProps({
@@ -28,12 +29,29 @@
     default: "",
   },
 });
+const level=[
+  {
+    label:'1',
+    value:'Ⅰ',
+  },{
+    label:'2',
+    value:'Ⅱ',
+  },{
+    label:'3',
+    value:'Ⅲ',
+  },{
+    label:'4',
+    value:'Ⅳ',
+  },{
+    label:'5',
+    value:'Ⅴ',
+  },
+]
 const AllData = reactive({});
 watch(
   () => props.waterRegionCode,
   (val) => {
     console.log("YSIndex_right:分区编号变了", val);
-    debugger
     if(val!=''){
       filetData(val)
     }else{
@@ -138,7 +156,7 @@
       font-weight: bold;
       font-size: 14px;
       color: #CCDFFF;
-      width: 110px;
+      width: 120px;
     }
     .tre{
       width: 80px;
@@ -165,4 +183,19 @@
     }
   }
 }
+.color1{
+  color: #2AD4FF;
+}
+.color2{
+  color: #2AFFB1;
+}
+.color3{
+  color: #2AFFFC;
+}
+.color4{
+  color: #FFB61A;;
+}
+.color5{
+  color: #FD4D62;
+}
 </style>