- <template>
- <!-- 地表水体考核年度统计表 -->
- <div class="dbsWaterCount">
- <el-table :data="tableData" max-height="500" 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="actualPercent">
- <template #default="{ row }">
- <span style="color: lime">
- {{ row.actualPercent }}
- </span>
- </template>
- </el-table-column>
- <el-table-column label="目标达标率%" prop="targetPercent" />
- <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-column label="水体检测记录">
- <template #default="{ row }">
- <el-button link type="primary" icon="View" @click="onCheck(row)">查看</el-button>
- </template>
- </el-table-column>
- </el-table>
- </div>
- </template>
- <script setup>
- import { defineEmits, onBeforeUnmount } from 'vue';
- import { preventionInfo } from '@/api/spongePerformance/prevention';
- import bus from '@/bus';
-
- const { proxy } = getCurrentInstance();
- const tableData = ref([]);
- const tableLoading = ref(true);
- const tableRef = ref(null);
- const emits = defineEmits();
-
- //获取列表数据
- const getDataList = async () => {
- let params = {
- examineType: 'water_quality',
- };
- const res = await preventionInfo(params);
- if (res && res.code == 200) {
- tableLoading.value = false;
- tableData.value = res.data;
- if (Boolean(tableData.value.length)) {
- tableData.value.forEach(item => {
- if (item.waterQualitySampleInfos) {
- item.waterQualitySampleInfos.forEach(element => {
- element.examineYear = item.examineYear;
- });
- }
- });
- }
- tableRef.value.setCurrentRow(tableData.value[0], true); //表格默认第一个高亮选中
- clickTableRow(tableData.value[0]); //默认渲染第一行gis地图
- }
- };
- //查看点击事件
- const onCheck = row => {
- emits('searchClick', { ...row, type: 1 });
- };
- // 表格点击,查看对应的项目情况
- function clickTableRow(row) {
- // console.log(row);
- row.waterQualitySampleInfos &&
- row.waterQualitySampleInfos.map(item => {
- if (row.reachStandard == 0) {
- item.type = 'error_zishui'; //未消除
- } else {
- item.type = 'success_zishui'; //已消除
- }
- });
- gisMapInit(row.waterQualitySampleInfos);
- }
-
- // 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);
- });
- });
- if (newfiberMapbox.map.getLayer('surfaceWater')) {
- newfiberMapbox.map.removeLayer('surfaceWater');
- newfiberMapbox.map.removeSource('surfaceWater');
- }
- 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 ? '达标' : '不达标'}`,
- waterQualityName: `${item.waterQualityName}`,
- color: item.reachStandard == 1 ? '#70b603' : '#d9001b',
- });
- coverflowFeature.push(coverflowPoint);
- }
- });
- let geojson1 = turf.featureCollection(coverflowFeature);
- addWaterloggingLayer(geojson1, 'surfaceWater');
- // bus.emit('getGeojsonByType', {
- // type: key,
- // callback: geojson => {
- // setTimeout(() => {
- // bus.emit('removeMapDatas', [key]);
- // if (!!!geojson.features.length) bus.emit('setGeoJSON', { json: geojson1, key });
- // bus.emit('setLayerVisible', { layername: key, isCheck: true });
- // }, 2000);
- // },
- // });
- geojson1.features.forEach(feature => {
- return newfiberMapbox.addPopup(
- new mapboxL7.Popup({
- title: '',
-
- html: `
- <div class='popupMapPoint successPopup' style="background:rgba(129, 211, 248, 0.5); border: 2px solid #81d3f8;"><div class='titles' style="padding-left:10px">${feature.properties.riverName}</div>
- <div class='part'>水质类别:${feature.properties.waterQualityName}</div>
- <div class='part'>是否达标:${feature.properties.reachStandard}</div>
- </div>`,
- lngLat: {
- lng: feature.geometry.coordinates[0],
- lat: feature.geometry.coordinates[1],
- },
- anchor: 'center',
- offsets: [0, 90],
- autoClose: false,
- })
- );
- });
- });
- newfiberMapbox.map.on('click', 'surfaceWater', 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 == 'surfaceWater');
- console.log('clickfeature', '点击事件', clickfeature);
- emits('clicksurfaceWater', clickfeature[0].properties);
- });
- }
- //地图渲染点位
- 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,
- },
- });
- };
- onMounted(() => {
- getDataList();
- });
- onBeforeUnmount(() => {
- if (!newfiberMapbox) return;
- newfiberMapbox.popupService.popups.forEach(popup => {
- nextTick(() => {
- if (!newfiberMapbox) return;
- newfiberMapbox.removePopup(popup);
- });
- });
- if (newfiberMapbox.map.getLayer('surfaceWater')) {
- newfiberMapbox.map.removeLayer('surfaceWater');
- newfiberMapbox.map.removeSource('surfaceWater');
- }
- });
- </script>
- <style lang="scss" scoped>
- .dbsWaterCount {
- margin-top: 20px;
- }
- .l7-popup-tip {
- display: none !important;
- }
- .l7-popup .l7-popup-content {
- padding: 0px;
- background: rgba(3, 59, 79, 0) !important;
- }
- .l7-popup-content {
- padding: 0px;
- background: rgba(3, 59, 79, 0) !important;
- }
- .l7-popup .l7-popup-content .l7-popup-close-button {
- display: none !important;
- }
- .surfaceWatermaps #mapboxContainer {
- display: none !important;
- }
- .mapPage #mapboxContainer {
- display: none !important;
- }
- .successPopup {
- border-radius: 8px;
- background-color: rgba(129, 211, 248, 0.5);
- border: 2px solid #81d3f8;
- padding: 5px;
- }
- .titles {
- font-size: 16px;
- padding: 10px;
- }
- </style>