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

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

@ -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 = `
<table class="popup-table" style="min-width:320px;">
<thead>
<tr>
<td colspan="2">参航信息</td>
<td colspan="2">单位参航信息</td>
</tr>
</thead>
<tr>
<td colspan="2">单位名称: <b>${unitReports[0].unit_name}</b></td>
</tr>
<tr>
<td>首潜人数: <b>${unitReports[0].f_drving_total || ""}</b></td>
<td>首次参航人数: <b>${unitReports[0].f_voyage_total || ""}</b></td>
<td>参航次数: <b>${unitReports[0].voyage_total || "/"}</b></td>
<td>参航天数: <b>${unitReports[0].voyage_days || "/"}</b></td>
</tr>
<tr>
<td>参航次数: <b>${unitReports[0].voyage_total || ""}</b></td>
<td>参航天数: <b>${unitReports[0].voyage_days || ""}</b></td>
<td>参航人数: <b>${unitReports[0].member_total || "/"}</b></td>
<td>下潜次数: <b>${unitReports[0].drving_total || "/"}</b></td>
</tr>
<tr>
<td>参航人数: <b>${unitReports[0].member_total || ""}</b></td>
<td>下潜次数: <b>${unitReports[0].drving_total || ""}</b></td>
<td>首潜人数: <b>${unitReports[0].f_drving_total || "/"}</b></td>
<td>首次参航人数: <b>${unitReports[0].f_voyage_total || "/"}</b></td>
</tr>
</table>`;
@ -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];

19
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 { 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,8 +318,8 @@ export default {
const geojson = {
type: 'FeatureCollection',
features: []
}
; (res.array || []).forEach(element => {
};
(res.array || []).forEach(element => {
geojson.features.push({
type: 'Feature',
geometry: {
@ -333,8 +333,17 @@ export default {
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));
});
})
},
}