diff --git a/src/utils/vector-layer-utils.js b/src/utils/vector-layer-utils.js index 9c801b5..c4f97de 100644 --- a/src/utils/vector-layer-utils.js +++ b/src/utils/vector-layer-utils.js @@ -150,7 +150,8 @@ export function setHighlight(layerId, sourceId, mapId = "homeMap") { return; if (mapId == "workUnitMap_uuv") { - showUnitReport(mapId, e.features[0].properties.unit_name, e.features[0].geometry.coordinates); + // 相关逻辑位于单位统计页面 + // showUnitReport(mapId, e.features[0].properties.unit_name, e.features[0].geometry.coordinates); return; } @@ -166,9 +167,6 @@ export function setHighlight(layerId, sourceId, mapId = "homeMap") { // // const featuresByLayer = groupFeaturesByLayer(allFeatures); // // console.log('点击位置附近的所有要素:', featuresByLayer); - // console.log(e.features.length, e.features); - // console.log("1 e: ", e); - let feature = e.features[0]; if (e.features.length > 1 && e.options) feature = e.features.filter(f => f.properties.sample_name == e.options.sample_name)[0]; @@ -193,9 +191,6 @@ export function setHighlight(layerId, sourceId, mapId = "homeMap") { clickedLineIds = clickedLineIds.filter((item) => item !== clickedLineId); } else { Vue.config.maps[mapId].setFeatureState({ source: sourceId, sourceLayer: sourceLayer, id: clickedLineId }, { click: true }); - // 显示信息框 - // if (sourceId === 'GMSL Cable Data') - // document.getElementById("cable-overlay")!.style.display = 'block'; // 单击时加入选择列表(用于单击 ESC 键时取消选择状态) clickedLineIds.push(clickedLineId); // document.removeEventListener("keydown", removeHighlight, true); @@ -246,27 +241,28 @@ export async function showUnitReport(mapId, unit, coordinates) { alert("未查询到相关单位的统计信息"); return; } + const description = ` - + - + - - + + - - + + - - + + `; @@ -341,9 +337,6 @@ export function showSampleStationInfo(layerId, mapId = "homeMap") { // if (typeof e.preventDefault === "function") // e.preventDefault(); - // console.log(e.features.length, e.features); - // console.log("2 e: ", e); - let feature = e.features[0]; if (e.features.length > 1) feature = e.features.filter(f => f.properties.sample_name == e.options.sample_name)[0]; diff --git a/src/views/statistics/UuvUnitStatistics.vue b/src/views/statistics/UuvUnitStatistics.vue index 9e7d7df..362d9d9 100644 --- a/src/views/statistics/UuvUnitStatistics.vue +++ b/src/views/statistics/UuvUnitStatistics.vue @@ -60,7 +60,7 @@ import BarChart from './components/BarChart.vue' import { unitTotal, hovUnit, shipUnit, shipVoyage } from '../../api/statistics' import { getYearRange } from '../../utils/index' import { initMapbox, handleWheel } from '@/utils/mapbox-utils' -import { loadVectorLayer, loadJsonPointFeature, showPopupDetails,showUnitReport } from '@/utils/vector-layer-utils' +import { loadVectorLayer, loadJsonPointFeature, showPopupDetails, showUnitReport } from '@/utils/vector-layer-utils' import { ColorGenerator } from '@/utils/color-generator' /** @@ -318,23 +318,32 @@ export default { const geojson = { type: 'FeatureCollection', features: [] - } - ; (res.array || []).forEach(element => { - geojson.features.push({ - type: 'Feature', - geometry: { - type: 'Point', - coordinates: [element.unit_lon, element.unit_lat] - }, - properties: { - unit_name: element.unit_name, - unit_type: element.unit_type, - create_time: element.create_time, - tsy_id: element.tsy_id - } - }) + }; + (res.array || []).forEach(element => { + geojson.features.push({ + type: 'Feature', + geometry: { + type: 'Point', + coordinates: [element.unit_lon, element.unit_lat] + }, + properties: { + unit_name: element.unit_name, + unit_type: element.unit_type, + create_time: element.create_time, + tsy_id: element.tsy_id + } }) - loadJsonPointFeature('workUnit', 'blue', geojson, 'unit_name', 'workUnitMap_uuv') + }); + loadJsonPointFeature('workUnit', 'blue', geojson, 'unit_name', 'workUnitMap_uuv'); + + Vue.config.maps['workUnitMap_uuv'].on('click', 'workUnit', async (e) => { + if (!e.features || e.features.length <= 0) + return; + // 地图点选弹窗显示单位信息 + showUnitReport('workUnitMap_uuv', e.features[0].properties.unit_name, e.features[0].geometry.coordinates); + // 同步更新单位统计图 + this.applyUnitTotalRows((this.unitTotalRawList || []).filter(row => row.unit_name === e.features[0].properties.unit_name)); + }); }) }, }