- <template>
- <!-- 工程法 -->
- <div class="water-analysis-page">
- <el-table
- :key="isFlag"
- :data="tableData"
- max-height="500"
- v-loading="tableLoading"
- @row-click="clickModal"
- highlight-current-row
- ref="tableModalGC"
- >
- <el-table-column type="index" width="55" label="序号" />
- <el-table-column :label="i.value" :prop="i.key" show-overflow-tooltip v-for="i in cloums">
- <template #default="{ row }" v-if="i.key == 'isStandard'">
- <el-tag round :type="row.isStandard === '' ? 'warning' : row.isStandard === '1' ? 'success' : 'error'">
- {{ row.isStandard === '' ? '未填报' : row.isStandard === '1' ? '达标' : '未达标' }}
- </el-tag>
- </template>
- </el-table-column>
- <el-table-column label="操作" width="120">
- <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 { waterLoggingCleanProject } from '@/api/spongePerformance/prevention';
- const { proxy } = getCurrentInstance();
- import { nextTick, reactive } from 'vue';
- import { waterloggingPointList } from '@/api/sponeScreen/syntherticData.js';
-
- let isFlag = ref(1);
- const cloums = ref([
- { value: '考核年份', key: 'year' },
- { value: '消除个数', key: 'noFloodWaterLoggingPointNum' },
- { value: '总数', key: 'waterLoggingPointNum' },
- { value: '消除比例%', key: 'noFloodPercent' },
- { value: '目标%', key: 'targetPercent' },
- { value: '达标情况', key: 'isStandard' },
- ]);
-
- const { params } = defineProps(['params']);
- const emits = defineEmits();
- const tableModalGC = ref(null);
- const floodPointList = ref([]);
- const waterLoggingData = ref([]);
- const waterLoggingDataByType = ref([]);
- //动态组件
- let dataForm = reactive({
- tableData: '',
- tableDateTwo: '',
- tableLoading: true,
- });
- let { date, tableData, tableDateTwo, tableLoading } = toRefs(dataForm);
- //获取列表数据
- //搜索
- const search = p => {
- dynamic_page_data_typeM(p);
- isFlag.value++;
- };
- defineExpose({ search });
- // 查看上报数据
- const onCheck = (row, ty, t) => {
- console.log('row', row, waterLoggingData.value);
- emits('searchClick', {
- data: row,
- type: 1,
- list: waterLoggingData.value,
- });
- };
- const dynamic_page_data_typeM = async id => {
- let res = await waterLoggingCleanProject(id);
- if (res && res.code == 200) {
- tableData.value = res.data;
- tableModalGC.value.setCurrentRow(tableData.value[0], true); //表格默认第一个高亮选中
- tableLoading.value = false;
- console.log('tableData.value', tableData.value);
- addWaterLoggingByType(tableData.value[0].floodPointList);
- }
- };
- //地图添加消除与未消除内涝点
- const addWaterLoggingByType = data => {
- let success_zishuiDate = [];
- let error_zishuiDate = [];
- if (data.length) {
- data.map(item => {
- item.color = '#d9001b';
- item.isClear = false;
- });
- error_zishuiDate = data;
- waterLoggingData.value.forEach(element => {
- data.forEach(item => {
- if (item.name != element.name) {
- success_zishuiDate.push(element);
- }
- });
- });
- waterLoggingDataByType.value = success_zishuiDate.concat(error_zishuiDate);
- } else waterLoggingDataByType.value = waterLoggingData.value;
- let waterLogjson = getWaterloggingGeojson(waterLoggingDataByType.value);
- if (!newfiberMapbox.map.getLayer('waterLoging')) {
- addWaterloggingLayer(waterLogjson, 'waterLoging');
- } else {
- newfiberMapbox.map.getSource('waterLoging').setData(waterLogjson);
- }
- addwaterlogingPopup(waterLogjson);
- };
- // 工程法表格点击
- function clickModal(row) {
- floodPointList.value = row.floodPointList;
- // gis渲染点位
- addWaterLoggingByType(floodPointList.value);
- }
- //获取25个内涝点
- const getWaterlogging = async () => {
- let res = await waterloggingPointList();
- if (res && res.code == 200) {
- waterLoggingData.value = res.data;
- waterLoggingData.value.forEach(element => {
- element.color = '#70b603';
- element.isClear = true;
- });
- }
- };
- //内涝点geojson
- const getWaterloggingGeojson = data => {
- let features = [];
- data.forEach(element => {
- let feature = {
- type: 'Feature',
- geometry: {
- type: 'Point',
- coordinates: [Number(element.longitude), Number(element.latitude)],
- },
- properties: element,
- };
- features.push(feature);
- });
- return {
- type: 'FeatureCollection',
- features: features,
- };
- };
- //地图渲染内涝点
- 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 addwaterlogingPopup = geojson => {
- newfiberMapbox.popupService.popups.forEach(popup => {
- nextTick(() => {
- newfiberMapbox.removePopup(popup);
- });
- });
- geojson.features.forEach(feature => {
- let popupClass;
- !!feature.properties.isClear ? (popupClass = 'successPopup') : (popupClass = 'errorPopup');
- !!feature.properties.isClear ? (feature.properties.isClear = '已消除') : (feature.properties.isClear = '未消除');
- return newfiberMapbox.addPopup(
- new mapboxL7.Popup({
- title: '',
- html: `
- <div class=${popupClass}><div class='title'>${feature.properties.name}</div>
- <div class='part'>${feature.properties.isClear}</div>
- </div>`,
- lngLat: {
- lng: feature.geometry.coordinates[0],
- lat: feature.geometry.coordinates[1],
- },
- anchor: 'center',
- offsets: [0, 60],
- autoClose: false,
- })
- );
- });
- };
- onMounted(() => {
- dynamic_page_data_typeM(params);
- getWaterlogging();
- setTimeout(() => {
- newfiberMapbox.map.on('click', 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 == 'waterLoging');
- console.log('clickfeature', '点击事件', clickfeature);
- });
- }, 5000);
- });
- onBeforeUnmount(() => {
- if (!!!newfiberMapbox) return;
- !!newfiberMapbox.map.getLayer('waterLoging') && newfiberMapbox.map.removeLayer('waterLoging');
- !!newfiberMapbox.map.getSource('waterLoging') && newfiberMapbox.map.removeSource('waterLoging');
- newfiberMapbox.popupService.popups.forEach(popup => {
- nextTick(() => {
- newfiberMapbox.removePopup(popup);
- });
- });
- });
- </script>
- <style lang="scss">
- .l7-popup-tip {
- display: none;
- }
- .l7-popup .l7-popup-content {
- padding: 0px;
- background: #033b4f;
- border-radius: 8px;
- }
- .l7-popup .l7-popup-content .l7-popup-close-button {
- display: none;
- }
- .errorPopup {
- border-radius: 8px;
- background-color: rgba(247, 189, 15, 0.5);
- border: 2px solid #f7bd0f;
- padding: 5px;
- color: #000;
- }
- .successPopup {
- border-radius: 8px;
- background-color: rgba(129, 211, 248, 0.5);
- border: 2px solid #81d3f8;
- padding: 5px;
- }
- .title {
- font-size: 16px;
- }
- </style>