<template> <!-- 可透水面积 --> <div class="ktsmjPage"> <div class="partTitleHM"> 产出绩效 <div class="tabs flex"> <div class="tabItem" v-for="item in tabs" :key="item.id" :class="{ active: curTab === item.id }" @click="tabClick(item)"> {{ item.name }} </div> </div> </div> <div class="ListBoxBody"> <div class="content"> <div class="target flex flex-j-left flex-align-center"> <div class="titles titlesmb"> <div class="mbs">目标</div> </div> <div class="valsText" :title="quotaInfo.improveGoals">{{ quotaInfo.improveGoals }}</div> </div> <div class="measures flex flex-j-left flex-align-center"> <div class="titles titlecs"> <div class="mbs">措施</div> </div> <div class="valsText" :title="quotaInfo.reformMethod">{{ quotaInfo.reformMethod }}</div> </div> <el-table ref="table" :data="tableData" style="width: 100%" max-height="120" v-if="curTab == 1"> <el-table-column label="改造工程" prop="reformProjectName" show-overflow-tooltip /> <el-table-column label="提升成效" prop="reformAchievement" show-overflow-tooltip /> </el-table> <el-table ref="table" :data="tableData" style="width: 100%" max-height="120" v-if="curTab == 2"> <el-table-column label="现状水域" prop="partitionName" show-overflow-tooltip /> <el-table-column label="水域面积(㎡)" prop="reformAchievement" show-overflow-tooltip /> </el-table> <div class="achievements flex flex-j-left flex-align-center"> <div class="titles titlecg"> <div class="mbs">成果</div> </div> <div class="vals" :class="quotaInfo.isCompliance == '1' ? 'colors1' : 'colors2'"> {{ quotaInfo.isCompliance == '1' ? '达标' : '不达标' }} </div> <el-button size="small" type="fail" style="margin-left: 50%" @click="getZzcl">佐证材料</el-button> </div> <div class="bottom"> {{ quotaInfo.remark }} </div> </div> </div> </div> </template> <script setup> import kaifengTouShuiArea from '@/assets/geojson/kaifeng/kaifengTouShuiArea.json'; //可透水面积 import kaifengNatureWater from '@/assets/geojson/kaifeng/kaifengNatureWater.json'; //天然水域 import newfiberMapBoxVectorLayer from '@/views/sponeScreen/gisMF/mapboxVectorLayer.js'; import tuLi72X from '@/assets/newImgs/tuLi72X.png'; import bus from '@/bus'; const { proxy } = getCurrentInstance(); import { quotaCommomInfoList, hmyztQuotaDataList } from '@/api/sponeScreen/jxkh.js'; const tabs = ref([ { id: 1, name: '可透水' }, { id: 2, name: '天然水域' }, ]); const curTab = ref(1); const quotaInfo = ref({}); //改造措施数据 const tableData = ref([]); const type = ref('ktsdmmj'); const currentYear = ref(2023); // 获取佐证材料 function getZzcl() { bus.emit('getZzclData', curTab.value); } const tabClick = item => { curTab.value = item.id; bus.emit('removeKHLayer'); //清除图层 if (curTab.value == 1) { type.value = 'ktsdmmj'; // 可透水图层渲染 newfiberMapBoxVectorLayer.addGeojsonSymbol('kaifengTouShuiArea', kaifengTouShuiArea, tuLi72X, 20, 1.3); //图层名、图层geojson,图标,标注每行多少个字,行间距 setTimeout(() => { newfiberMapbox.map.easeTo({ center: [114.345, 34.803], zoom: 13.0, }); }, 500); } else { type.value = 'trsymj'; // 天然水域图层渲染 newfiberMapBoxVectorLayer.addGeojsonSymbol('kaifengNatureWater', kaifengNatureWater, tuLi72X, 20, 1.3); //图层名、图层geojson,图标,标注每行多少个字,行间距 setTimeout(() => { newfiberMapbox.map.easeTo({ center: [114.345, 34.808], zoom: 13.4, }); }, 500); } getjb(); getkhzn(); }; // 产出绩效公共指标信息 async function getjb() { let res = await quotaCommomInfoList({ quotaCode: type.value, }); if (res && res.code == 200) { let data = res.data; quotaInfo.value = data && data.length ? data[0] : {}; quotaInfo.value.remarkData = quotaInfo.value.remark ? quotaInfo.value.remark.split(';') : []; } } // 产出绩效公共指标信息 async function getkhzn() { let res = await hmyztQuotaDataList({ quotaType: type.value, }); if (res && res.code == 200) { tableData.value = res.data; } } onMounted(() => { // 切换年份 bus.on('changeYearKH', e => { currentYear.value = e; getjb(); getkhzn(); }); }); onBeforeUnmount(() => { bus.off('changeYearKH'); }); </script> <style lang="scss" scoped> .ktsmjPage { width: 460px; .ListBoxBody { background: rgba(8, 75, 125, 1); padding: 10px; margin-top: -3px; .content { height: 100%; .target, .measures, .achievements { background: linear-gradient(0deg, rgba(26, 109, 255, 0.2) 0%, rgba(40, 193, 250, 0.2) 100%) !important; border-radius: 3px; width: 100%; height: 40px; padding: 0 10px; .titles { width: 50px; font-size: 16px; color: #ffffff; position: relative; height: 20px; margin-top: 15px; .mbs { position: absolute; top: -10px; left: 5px; } } .titlesmb { background: url('@/assets/newImgs/HMScreen/jxkh/mb.png') no-repeat; } .titlecs { background: url('@/assets/newImgs/HMScreen/jxkh/cs.png') no-repeat; } .titlecg { background: url('@/assets/newImgs/HMScreen/jxkh/cg.png') no-repeat; } } .measures { margin-top: 5px; } .valsText { color: #58d6ff; margin-left: 10px; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .achievements { font-family: Source Han Sans CN; font-size: 18px; margin-top: 10px !important; .vals { color: #00fe00 !important; margin-left: 20px; } .colors1 { color: #00fe00; } .colors2 { color: #ff5e66; } } .bottom { width: 100%; height: 40px; background: linear-gradient(0deg, rgba(26, 109, 255, 0.2) 0%, rgba(40, 193, 250, 0.2) 100%) !important; color: #58d6ff; font-size: 14px; padding: 5px; overflow: auto; } } } .tabs { float: right; margin: 8px 40px 0px 0px; .tabItem { width: 78px; height: 24px; line-height: 24px; background: url('@/assets/newImgs/HMScreen/jxkh/normal.png') no-repeat; background-size: 100% 100%; margin-left: 10px; font-size: 14px; color: #ffffff; text-align: center; cursor: pointer; &:first-of-type { margin-left: 0; } &.active { background: url('@/assets/newImgs/HMScreen/jxkh/active.png') no-repeat; background-size: 100% 100%; } } } } </style>