- <template>
- <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/><span>{{i.lengthSum}}km</span></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 :class="`color${e.targetQuality}`">{{getChineseFun(level,'label', e.targetQuality,'value')||'--'}}</span></div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </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({
- //分区编号
- waterRegionCode: {
- type: [String],
- 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{
- getData()
- }
- },
- { immediate: true ,deep:true}
- );
- 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>
- #YSIndex_right {
- 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;
- span{
- white-space: nowrap;
- }
- }
- .ditch{
- height: 24px;
- .one{
- font-weight: bold;
- font-size: 14px;
- color: #CCDFFF;
- width: 120px;
- }
- .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;
- }
- }
- }
- .color1{
- color: #2AD4FF;
- }
- .color2{
- color: #2AFFB1;
- }
- .color3{
- color: #2AFFFC;
- }
- .color4{
- color: #FFB61A;;
- }
- .color5{
- color: #FD4D62;
- }
- </style>