<template> <div class="water-analysis-page"> <el-table :data="tableData" ref="tableRef" v-loading="tableLoading" @row-click="clickTableRow" highlight-current-row> <el-table-column label="年度" prop="examineYear" /> <el-table-column label="黑臭水体/个" prop="unRemoveNum" /> <el-table-column label="考核水体数/个" prop="totalNum" /> <el-table-column label="目标消除比%" prop="targetPercent" /> <el-table-column label="实际消除比%" prop="actualPercent"> <template #default="{ row }"> <span style="color: lime"> {{ row.actualPercent }} </span> </template> </el-table-column> <el-table-column label="达标情况" prop="reachStandard"> <template #default="scope"> <span :style="{ color: scope.row.reachStandard == 0 ? 'red' : 'lime', }" > <el-tag v-if="scope.row.reachStandard === ''" type="warning">未评价</el-tag> <el-tag v-else :type="scope.row.reachStandard == 0 ? 'error' : scope.row.reachStandard == 1 ? 'success' : ''"> {{ scope.row.reachStandard == 0 ? '不达标' : '达标' }} </el-tag> </span> </template> </el-table-column> </el-table> <!-- 地图水体点击弹窗 --> <el-dialog v-model="dialogShow" :title="ExamineYearA + blackWaterNameA + '水质监测详情'" :modal-append-to-body="false" 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 { preventionInfo, blackWaterInfoList, queryYearStatistic } from '@/api/spongePerformance/prevention'; import bus from '@/bus'; import { riverInfoWater } from '@/api/spongePerformance/surfaceWater'; import ChartBar3D from '@/views/sponeScreen/Echarts/echartBar3D.vue'; const { proxy } = getCurrentInstance(); const tableData = ref([]); const tableLoading = ref(true); const tableRef = ref(null); 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 emits = defineEmits(['clicksWaterBodies']); //获取列表数据 const getDataList = async () => { let params = { examineType: 'black_odor', }; const res = await preventionInfo(params); if (res && res.code == 200) { tableLoading.value = false; tableData.value = res.data; tableRef.value.setCurrentRow(tableData.value[0], true); //表格默认第一个高亮选中 clickTableRow(tableData.value[0]); //默认渲染第一行gis地图 console.log(tableData.value[0], 'tableData.value[0]'); } }; // 表格点击,查看对应的项目情况 function clickTableRow(row) { ExamineYearA.value = row.examineYear; row.blackOdorSampleInfos && row.blackOdorSampleInfos.map(item => { if (row.reachStandard == 0) { item.type = 'error_zishui'; //未消除 } else { item.type = 'success_zishui'; //已消除 } }); gisMapInit(row.blackOdorSampleInfos); addOdorousWaterBodies(row.examineYear); } // gis地图渲染 function gisMapInit(data) { // console.log('gis地图渲染数据--', data); if (!!!data) return; let keys = ['error_zishui', 'success_zishui']; newfiberMapbox.popupService.popups.forEach(popup => { nextTick(() => { newfiberMapbox.removePopup(popup); }); }); !!newfiberMapbox.map.getLayer('odorousWaterBodies') && newfiberMapbox.map.removeLayer('odorousWaterBodies'); !!newfiberMapbox.map.getSource('odorousWaterBodies') && newfiberMapbox.map.removeSource('odorousWaterBodies'); keys.forEach(key => { let coverflowFeature = []; let selectData = data.filter(i => i.type == key); selectData.forEach(item => { if (!!!item.riverInfo.lonLat) { return; } else { let coverflowPoint = turf.point(item.riverInfo.lonLat.split(',').map(Number), { ...item, riverName: `${item.riverName}`, reachStandard: `${item.reachStandard == 1 ? '达标' : '不达标'}`, blackOdorName: `${item.blackOdorName}`, color: item.reachStandard == 1 ? '#70b603' : '#d9001b', }); coverflowFeature.push(coverflowPoint); } }); let geojson1 = turf.featureCollection(coverflowFeature); addWaterloggingLayer(geojson1, 'odorousWaterBodies'); }); } //地图渲染内涝点 const addWaterloggingLayer = (geojson, layerName) => { !!!newfiberMapbox.map.getSource(layerName) && newfiberMapbox.map.addSource(layerName, { type: 'geojson', data: geojson }); !!!newfiberMapbox.map.getLayer(layerName) && newfiberMapbox.map.addLayer({ id: layerName, type: 'circle', source: layerName, paint: { 'circle-color': ['get', 'color'], 'circle-radius': 7, }, }); }; //地图渲染黑臭水体 const addOdorousWaterBodies = async Year => { // 飞哥 这=这里 let params = { examineYear: Year, }; const res = await blackWaterInfoList(params); console.log(res, 'ress'); if (res && res.code == 200) { let black_odor = [], black_odor_label = []; res.data.forEach(data => { data.fillcolor = '#d9001b'; let waterLine = turf.feature(Terraformer.WKT.parse(data.geometrys), data); let waterLabel = turf.center(waterLine, { properties: data, }); black_odor.push(waterLine); black_odor_label.push(waterLabel); }); let waterLineGeojson = turf.featureCollection(black_odor); let waterLabelGeojson = turf.featureCollection(black_odor_label); console.log('blackWaterGeojson---', waterLineGeojson); console.log('waterLabelGeojson---', waterLabelGeojson); !newfiberMapbox.map.getSource('waterLine') && newfiberMapbox.map.addSource('waterLine', { type: 'geojson', data: waterLineGeojson }); !newfiberMapbox.map.getSource('waterLabel') && newfiberMapbox.map.addSource('waterLabel', { type: 'geojson', data: waterLabelGeojson }); !newfiberMapbox.map.getLayer('waterLine') && newfiberMapbox.map.addLayer({ id: 'waterLine', type: 'line', source: 'waterLine', paint: { 'line-color': ['get', 'fillcolor'], 'line-width': 5, }, }); !newfiberMapbox.map.getLayer('waterLabel') && 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, }, }); //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(() => { getDataList(); setTimeout(() => { addOdorousWaterBodies(tableData.value[0].examineYear); }, 2000); setTimeout(() => { //newfiberMapbox.map.moveLayer('xiaoganWater', 'waterLine'); 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(() => { if (!!!newfiberMapbox) return; !!newfiberMapbox.map.getLayer('waterLine') && newfiberMapbox.map.removeLayer('waterLine'); !!newfiberMapbox.map.getSource('waterLine') && newfiberMapbox.map.removeSource('waterLine'); !!newfiberMapbox.map.getLayer('odorousWaterBodies') && newfiberMapbox.map.removeLayer('odorousWaterBodies'); !!newfiberMapbox.map.getSource('odorousWaterBodies') && newfiberMapbox.map.removeSource('odorousWaterBodies'); !!newfiberMapbox.map.getLayer('waterLabel') && newfiberMapbox.map.removeLayer('waterLabel'); !!newfiberMapbox.map.getSource('waterLabel') && newfiberMapbox.map.removeSource('waterLabel'); newfiberMapbox.popupService.popups.forEach(popup => { nextTick(() => { if (!!!newfiberMapbox) return; newfiberMapbox.removePopup(popup); }); }); }); </script> <style lang="scss"> .l7-popup-tip { display: none; } .l7-popup .l7-popup-content { padding: 0px; background: rgba(3, 59, 79, 0); } .l7-popup .l7-popup-content .l7-popup-close-button { display: none; } </style>