revisit
/
DSDSWeb
1
0
Fork 0
Code Issues 3 Pull Requests Packages Projects Releases Wiki Activity

优化单位统计页面地图点选交互逻辑

This commit is contained in:
hym 2026-04-05 09:12:20 +08:00
parent e783375fbf
commit 399ad08a12
2 changed files with 37 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
src/utils/vector-layer-utils.js
View File

@ -150,7 +150,8 @@ export function setHighlight(layerId, sourceId, mapId = "homeMap") {
return; return;
if (mapId == "workUnitMap_uuv") { 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; return;
} }
@ -166,9 +167,6 @@ export function setHighlight(layerId, sourceId, mapId = "homeMap") {
// // const featuresByLayer = groupFeaturesByLayer(allFeatures); // // const featuresByLayer = groupFeaturesByLayer(allFeatures);
// // console.log('点击位置附近的所有要素:', featuresByLayer); // // console.log('点击位置附近的所有要素:', featuresByLayer);
// console.log(e.features.length, e.features);
// console.log("1 e: ", e);
let feature = e.features[0]; let feature = e.features[0];
if (e.features.length > 1 && e.options) if (e.features.length > 1 && e.options)
feature = e.features.filter(f => f.properties.sample_name == e.options.sample_name)[0]; 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); clickedLineIds = clickedLineIds.filter((item) => item !== clickedLineId);
} else { } else {
Vue.config.maps[mapId].setFeatureState({ source: sourceId, sourceLayer: sourceLayer, id: clickedLineId }, { click: true }); 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 键时取消选择状态） // 单击时加入选择列表（用于单击 ESC 键时取消选择状态）
clickedLineIds.push(clickedLineId); clickedLineIds.push(clickedLineId);
// document.removeEventListener("keydown", removeHighlight, true); // document.removeEventListener("keydown", removeHighlight, true);
@ -246,27 +241,28 @@ export async function showUnitReport(mapId, unit, coordinates) {
alert("未查询到相关单位的统计信息"); alert("未查询到相关单位的统计信息");
return; return;
} }
const description = ` const description = `
<table class="popup-table" style="min-width:320px;"> <table class="popup-table" style="min-width:320px;">
<thead> <thead>
<tr> <tr>
<td colspan="2">参航信息</td> <td colspan="2">单位参航信息</td>
</tr> </tr>
</thead> </thead>
<tr> <tr>
<td colspan="2">单位名称: <b>${unitReports[0].unit_name}</b></td> <td colspan="2">单位名称: <b>${unitReports[0].unit_name}</b></td>
</tr> </tr>
<tr> <tr>
<td>首潜人数: <b>${unitReports[0].f_drving_total || ""}</b></td> <td>参航次数: <b>${unitReports[0].voyage_total || "/"}</b></td>
<td>首次参航人数: <b>${unitReports[0].f_voyage_total || ""}</b></td> <td>参航天数: <b>${unitReports[0].voyage_days || "/"}</b></td>
</tr> </tr>
<tr> <tr>
<td>参航次数: <b>${unitReports[0].voyage_total || ""}</b></td> <td>参航人数: <b>${unitReports[0].member_total || "/"}</b></td>
<td>参航天数: <b>${unitReports[0].voyage_days || ""}</b></td> <td>下潜次数: <b>${unitReports[0].drving_total || "/"}</b></td>
</tr> </tr>
<tr> <tr>
<td>参航人数: <b>${unitReports[0].member_total || ""}</b></td> <td>首潜人数: <b>${unitReports[0].f_drving_total || "/"}</b></td>
<td>下潜次数: <b>${unitReports[0].drving_total || ""}</b></td> <td>首次参航人数: <b>${unitReports[0].f_voyage_total || "/"}</b></td>
</tr> </tr>
</table>`; </table>`;
@ -341,9 +337,6 @@ export function showSampleStationInfo(layerId, mapId = "homeMap") {
// if (typeof e.preventDefault === "function") // if (typeof e.preventDefault === "function")
// e.preventDefault(); // e.preventDefault();
// console.log(e.features.length, e.features);
// console.log("2 e: ", e);
let feature = e.features[0]; let feature = e.features[0];
if (e.features.length > 1) if (e.features.length > 1)
feature = e.features.filter(f => f.properties.sample_name == e.options.sample_name)[0]; feature = e.features.filter(f => f.properties.sample_name == e.options.sample_name)[0];

43
src/views/statistics/UuvUnitStatistics.vue
View File

@ -60,7 +60,7 @@ import BarChart from './components/BarChart.vue'
import { unitTotal, hovUnit, shipUnit, shipVoyage } from '../../api/statistics' import { unitTotal, hovUnit, shipUnit, shipVoyage } from '../../api/statistics'
import { getYearRange } from '../../utils/index' import { getYearRange } from '../../utils/index'
import { initMapbox, handleWheel } from '@/utils/mapbox-utils' 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' import { ColorGenerator } from '@/utils/color-generator'
/** /**
@ -318,23 +318,32 @@ export default {
const geojson = { const geojson = {
type: 'FeatureCollection', type: 'FeatureCollection',
features: [] features: []
} };
; (res.array || []).forEach(element => { (res.array || []).forEach(element => {
geojson.features.push({ geojson.features.push({
type: 'Feature', type: 'Feature',
geometry: { geometry: {
type: 'Point', type: 'Point',
coordinates: [element.unit_lon, element.unit_lat] coordinates: [element.unit_lon, element.unit_lat]
}, },
properties: { properties: {
unit_name: element.unit_name, unit_name: element.unit_name,
unit_type: element.unit_type, unit_type: element.unit_type,
create_time: element.create_time, create_time: element.create_time,
tsy_id: element.tsy_id 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));
});
}) })
}, },
} }