- <template>
- <div class="chanChuJiXiao">
- <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">{{ 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" 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" height="120" v-if="curTab == 2">
- <el-table-column label="污水处理厂" prop="partitionName" show-overflow-tooltip />
- <el-table-column label="进水量(万t/d)" prop="reformAchievement" show-overflow-tooltip />
- </el-table>
-
- <el-table ref="table" :data="tableData" height="120" v-if="curTab == 3">
- <el-table-column label="污水处理厂" prop="partitionName" show-overflow-tooltip />
- <el-table-column label="进水BOD浓度(mg/L)" 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 flex-v">
- <span v-for="item in quotaInfo.remarkData">{{ item }}</span>
- </div>
- </div>
- </div>
-
- <!-- 地图水体点击弹窗 -->
- <el-dialog v-model="dialogShow" :title="ExamineYearA + blackWaterNameA + '水质监测详情'" append-to-body width="900px">
- <div class="hcstDialog">
- <div class="part">
- <div class="title">透明度(cm)</div>
- <ChartBar3D :echartData="echartData1" class="chart" :key="refresh1"></ChartBar3D>
- </div>
- <div class="part">
- <div class="title">氨氮(mg/L)</div>
- <ChartBar3D :key="refresh2" :echartData="echartData2" class="chart"></ChartBar3D>
- </div>
- <div class="part">
- <div class="title">溶解氧(mg/L)</div>
- <ChartBar3D :key="refresh3" :echartData="echartData3" class="chart"></ChartBar3D>
- </div>
- <div class="part">
- <div class="title">氧化还原电位(mV)</div>
- <ChartBar3D :echartData="echartData4" class="chart" :key="refresh4"></ChartBar3D>
- </div>
- </div>
- </el-dialog>
- </div>
- </template>
- <script setup>
- import bus from '@/bus';
- import { blackWaterInfoList, queryYearStatistic } from '@/api/spongePerformance/prevention';
- import ChartBar3D from '@/views/sponeScreen/Echarts/echartBar3D.vue';
- import { quotaCommomInfoList, hmyztQuotaDataList } from '@/api/sponeScreen/jxkh.js';
- import kaifengShengHuoWS from '@/assets/geojson/kaifeng/kaifengShengHuoWS.json'; //生活污水
- import kaifengBOD from '@/assets/geojson/kaifeng/kaifengBOD.json'; //进水BOD
- import newfiberMapBoxVectorLayer from '@/views/sponeScreen/gisMF/mapboxVectorLayer.js';
- import tuLi72X from '@/assets/newImgs/tuLi72X.png';
- import riverList from './riverHupo.js';
-
- const { proxy } = getCurrentInstance();
- const dialogShow = ref(false);
- const ExamineYearA = ref('');
- const blackWaterCodeA = ref('');
- const blackWaterNameA = ref('');
- const refresh1 = ref(1);
- const refresh2 = ref(1);
- const refresh3 = ref(1);
- const refresh4 = ref(1);
- const echartData1 = ref({
- // xAxis: ['3月', '4月', '9月', '11月'],
- // seriesData: [126, 162, 119, 86, 113],
- });
- const echartData2 = ref({
- // xAxis: ['3月', '4月', '9月', '11月'],
- // seriesData: [0.8, 0.35, 1.12, 0.9, 0.98],
- });
- const echartData3 = ref({
- // xAxis: ['3月', '4月', '9月', '11月'],
- // seriesData: [5.4, 13, 9.2, 10.4, 8.9],
- });
- const echartData4 = ref({
- // xAxis: ['3月', '4月', '9月', '11月'],
- // seriesData: [126, 162, 119, 86, 113],
- });
- const tabs = ref([
- { id: 1, name: '河湖水质' },
- { id: 2, name: '生活污水' },
- { id: 3, name: '进水BOD' },
- ]);
- const curTab = ref(1);
-
- const quotaInfo = ref({}); //改造措施数据
- const tableData = ref([]);
- const type = ref('hcst');
- 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 = 'hcst';
- addOdorousWaterBodies(); //河湖水质图层
- setTimeout(() => {
- newfiberMapbox.map.easeTo({
- center: [114.365, 34.803],
- zoom: 11.9,
- });
- }, 500);
- } else if (curTab.value == 2) {
- type.value = 'shwssjl';
- // 生活污水收集率
- newfiberMapBoxVectorLayer.addGeojsonSymbol('kaifengShengHuoWS', kaifengShengHuoWS, tuLi72X, 20, 1.3, 5); //图层名、图层geojson,图标,标注每行多少个字,行间距
- setTimeout(() => {
- newfiberMapbox.map.easeTo({
- center: [114.365, 34.763],
- zoom: 11.6,
- });
- }, 500);
- } else {
- type.value = 'cqjsbod';
- // 进水BOD
- newfiberMapBoxVectorLayer.addGeojsonSymbol('kaifengBOD', kaifengBOD, tuLi72X, 20, 1.3, 5); //图层名、图层geojson,图标,标注每行多少个字,行间距
- setTimeout(() => {
- newfiberMapbox.map.easeTo({
- center: [114.365, 34.763],
- zoom: 11.6,
- });
- }, 500);
- }
- getjb();
- getkhzn();
- };
-
- // 产出绩效公共指标信息
- async function getjb() {
- let res = await quotaCommomInfoList({
- quotaCode: type.value,
- year: currentYear.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,
- year: currentYear.value,
- });
- if (res && res.code == 200) {
- tableData.value = res.data;
- }
- }
-
- //地图渲染河湖水质
- const addOdorousWaterBodies = async () => {
- let params = {
- examineYear: currentYear.value,
- };
- let res = await blackWaterInfoList(params);
- if (res && res.code == 200) {
- let datas = res.data;
- let black_odor = [],
- black_odor_label = [];
- //河湖水质,新增一些其他的湖泊
- datas = datas.concat(riverList);
- datas.forEach(item => {
- item.isExamine = 1; //全部都治理完毕
- item.fillcolor = item.isExamine == 1 ? '#B673FF' : '#d9001b';
- let waterLine = turf.feature(Terraformer.WKT.parse(item.geometrys), item);
- let waterLabel = turf.center(waterLine, {
- properties: item,
- });
- black_odor.push(waterLine);
- black_odor_label.push(waterLabel);
- });
- let waterLineGeojson = turf.featureCollection(black_odor);
- let waterLabelGeojson = turf.featureCollection(black_odor_label);
- if (!newfiberMapbox.map.getLayer('waterLine')) {
- newfiberMapbox.map.addSource('waterLine', { type: 'geojson', data: waterLineGeojson });
- newfiberMapbox.map.addSource('waterLabel', { type: 'geojson', data: waterLabelGeojson });
- newfiberMapbox.map.addLayer({
- id: 'waterLine',
- type: 'line',
- source: 'waterLine',
- paint: {
- 'line-color': ['get', 'fillcolor'],
- 'line-width': 5,
- },
- });
-
- newfiberMapbox.map.addLayer({
- id: 'waterLabel',
- type: 'symbol',
- source: 'waterLabel',
- layout: {
- 'text-field': ['get', 'blackWaterName'],
- 'text-font': ['KlokanTech Noto Sans Regular'],
- 'text-size': 16,
- 'text-offset': [0, 2],
- },
- paint: {
- 'text-halo-color': 'rgba(238, 251, 255,1)',
- 'text-color': ['get', 'fillcolor'],
- 'icon-opacity': 1,
- 'text-halo-width': 1,
- },
- });
- } else {
- newfiberMapbox.map.getSource('waterLine').setData(waterLineGeojson);
- newfiberMapbox.map.getSource('waterLabel').setData(waterLabelGeojson);
- }
-
- //newfiberMapbox.map.moveLayer('waterLine', 'odorousWaterBodies');
- }
- };
-
- // 点击河湖水质查看监测指标详情
- const queryYearStatist = async () => {
- let params = {
- blackWaterCode: blackWaterCodeA.value,
- sampleDate: ExamineYearA.value,
- };
- const res = await queryYearStatistic(params);
- refresh1.value++;
- refresh2.value++;
- refresh3.value++;
- refresh4.value++;
- echartData1.value.xAxis = res.data.datelist;
- echartData1.value.seriesData = res.data.tralist;
- echartData2.value.xAxis = res.data.datelist;
- echartData2.value.seriesData = res.data.nh3nlist;
- echartData3.value.xAxis = res.data.datelist;
- echartData3.value.seriesData = res.data.dolist;
- echartData4.value.xAxis = res.data.datelist;
- echartData4.value.seriesData = res.data.orplist;
- // console.log(echartData1.value, '123');
- };
-
- onMounted(() => {
- // 切换年份
- bus.on('changeYearKH', e => {
- currentYear.value = e;
- getjb();
- getkhzn();
- setTimeout(() => {
- // 地图河湖水质点击查看监测数据详情
- newfiberMapbox.map.on('click', 'waterLine', e => {
- let clickfeature = newfiberMapbox.map
- .queryRenderedFeatures([
- [e.point.x - 10 / 2, e.point.y - 10 / 2],
- [e.point.x + 10 / 2, e.point.y + 10 / 2],
- ])
- // .filter(i => i.layer.id == 'odorousWaterBodies' || i.layer.id == 'waterLine');
- .filter(i => i.layer.id == 'waterLine');
- dialogShow.value = true;
- blackWaterCodeA.value = clickfeature[0].properties.blackWaterCode;
- blackWaterNameA.value = clickfeature[0].properties.blackWaterName;
-
- queryYearStatist();
- console.log('clickfeature', '点击事件11', clickfeature);
- // emits('clicksWaterBodies', clickfeature[0].properties);
- });
- }, 5000);
- });
- });
- onBeforeUnmount(() => {
- bus.off('changeYearKH');
- });
- </script>
- <style lang="scss">
- .hcstDialog {
- display: flex;
- flex-wrap: wrap;
- .part {
- width: 48%;
- margin-right: 2%;
- .title {
- font-size: 18px;
- font-weight: bold;
- color: #fff;
- }
- .chart {
- height: 300px !important;
- }
- }
- }
- .chanChuJiXiao {
- 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: 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;
- overflow-y: scroll;
- justify-content: flex-start;
- display: flex;
- }
- }
- }
-
- .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%;
- }
- }
- }
- }
- .jcxx {
- width: 450px;
- height: 360px;
- color: #ffffff;
- .hcmsg {
- font-size: 14px;
- line-height: 20px;
- }
- .img_box {
- margin-top: 10px;
- width: 100%;
- height: 160px;
- overflow-y: scroll;
- flex-wrap: wrap;
- .img {
- width: 100px;
- height: 100px;
- }
- }
- }
- </style>