- <template>
- <!-- 雨水资源化利用 -->
- <div class="rainLYPage">
- <div class="ListBoxHeader">
- <div class="partTitleHM">
- 雨水资源化利用
- <div class="tabs flex">
- <div class="tabItem" v-for="item in tabList" :key="item.id" :class="{ active: curTab === item.id }" @click="tabClick(item)">
- {{ item.name }}
- </div>
- </div>
- </div>
- </div>
- <div class="ConstrucClass">
- <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">{{ 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">{{ quotaInfo.reformMethod }}</div>
- </div>
- <el-table ref="table" :data="tableData" max-height="120">
- <el-table-column label="改造工程" prop="reformProjectName" 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>
- </div>
- <div class="bottom flex-v">
- <span v-for="item in quotaInfo.remarkData">{{ item }}</span>
- </div>
- </div>
- </div>
- </div>
- </template>
- <script setup>
- import kaifengRainUse from '@/assets/geojson/kaifeng/kaifengRainUse.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 quotaInfo = ref({}); //改造措施数据
- const tableData = ref([]);
- const tabList = ref([{ id: '1', name: '雨水资源化利用' }]);
- const curTab = ref('1');
- const tabClick = item => {
- curTab.value = item.id;
- getjb();
- getkhzn();
- // 渲染图层
- bus.emit('removeKHLayer'); //清除图层
- newfiberMapBoxVectorLayer.addGeojsonSymbol('kaifengRainUse', kaifengRainUse, tuLi72X, 20, 1.3); //图层名、图层geojson,图标,标注每行多少个字,行间距
- setTimeout(() => {
- newfiberMapbox.map.easeTo({
- center: [114.305, 34.802],
- zoom: 12.2,
- });
- }, 500);
- };
-
- // 产出绩效公共指标信息
- async function getjb() {
- let res = await quotaCommomInfoList({
- quotaCode: 'yszyhly',
- });
- 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: 'yszyhly',
- });
- if (res && res.code == 200) {
- tableData.value = res.data;
- }
- }
-
- onMounted(() => {
- getjb();
- getkhzn();
- });
- </script>
- <style lang="scss" scoped>
- .rainLYPage {
- width: 460px;
- margin: 5px auto;
- .ConstrucClass {
- background: rgba(8, 75, 125, 1);
- padding: 10px;
- margin-top: -3px;
- .content {
- width: 100%;
- 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 {
- width: 350px;
- 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: 50px;
- 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;
- justify-content: flex-start;
- display: flex;
- span {
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- }
- }
- }
- }
-
- .tabs {
- float: right;
- margin: 8px 40px 0px 0px;
- .tabItem {
- width: 105px;
- 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>