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 20:15:42 +08:00
parent 378d1b8778
commit 621b368d38
2 changed files with 31 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -236,7 +236,7 @@ export async function showUnitReport(mapId, unit, coordinate, callbackOnClose =
}
const description = `
<table class="popup-table" style="min-width:320px;">
<table class="popup-table" style="min-width:280px;">
<thead>
<tr>
<td colspan="2">单位参航信息</td>
@ -259,7 +259,7 @@ export async function showUnitReport(mapId, unit, coordinate, callbackOnClose =
</tr>
</table>`;
showPopupDetails({ mapId, coordinate, description, maxWidth: "350px", callbackOnClose: callbackOnClose });
showPopupDetails({ mapId, coordinate, description, maxWidth: "300px", callbackOnClose: callbackOnClose });
}
export function changeCursor(layerId, mapId = "homeMap", cursor = "pointer") {

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

@ -85,6 +85,8 @@ export default {
selectedUnits: [],
/** unitTotal 全量缓存，便于按 Banner 选择做前端过滤 */
unitTotalRawList: [],
// 全量单位列表，用于地图点选时绑定 Banner
totalUnits: [],
numbers: [
{
label: '参航单位数量',
@ -143,8 +145,8 @@ export default {
mounted() {
initMapbox('workUnitMap_uuv', {
tileKey: 'gaode',
zoom: 3,
center: [110, 33],
zoom: 2.8,
center: [120, 31],
minZoom: 2,
maxZoom: 29
})
@ -184,6 +186,7 @@ export default {
const filtered = raw.filter(row => nameSet.has(row.unit_name))
this.applyUnitTotalRows(filtered)
console.log('applyFilteredUnitTotal', this.selectedUnits);
// 地图显示最后一个选中单位的相关信息
showUnitReport('workUnitMap_uuv', this.selectedUnits.at(-1).unit_name, [this.selectedUnits.at(-1).unit_lon, this.selectedUnits.at(-1).unit_lat])
},
@ -299,12 +302,13 @@ export default {
*/
getHovUnit() {
hovUnit().then(res => {
const map = new Map()
; (res.array || []).forEach(unit => {
const k = unit.unit_id || unit.unitId || unit.unit_name
if (!map.has(k)) map.set(k, unit)
})
this.unitOptions = Array.from(map.values())
// 参航单位不一定下潜
// const map = new Map();
// (res.array || []).forEach(unit => {
// const k = unit.unit_id || unit.unitId || unit.unit_name
// if (!map.has(k)) map.set(k, unit)
// })
// this.unitOptions = Array.from(map.values());
})
},
@ -314,11 +318,19 @@ export default {
*/
getShipUnit() {
shipUnit().then(res => {
this.totalUnits = res.array || [];
const map = new Map();
this.totalUnits.forEach(unit => {
const k = unit.unit_id || unit.unitId || unit.unit_name
if (!map.has(k)) map.set(k, unit)
})
this.unitOptions = Array.from(map.values())
const geojson = {
type: 'FeatureCollection',
features: []
};
(res.array || []).forEach(element => {
this.totalUnits.forEach(element => {
geojson.features.push({
type: 'Feature',
geometry: {
@ -338,24 +350,21 @@ export default {
Vue.config.maps['workUnitMap_uuv'].on('click', 'workUnit', async (e) => {
if (!e.features || e.features.length <= 0)
return;
// 绑定地图单击的单位与 Banner 选项，保持地图点选与 Banner 选项同步
this.selectedUnits = this.totalUnits.filter(u => u.unit_name === e.features[0].properties.unit_name);
// 地图点选弹窗显示单位信息
showUnitReport('workUnitMap_uuv', e.features[0].properties.unit_name, e.features[0].geometry.coordinates,this.resetFilter);
showUnitReport('workUnitMap_uuv', e.features[0].properties.unit_name, e.features[0].geometry.coordinates, this.resetFilter);
// 同步更新单位统计图
this.applyUnitTotalRows((this.unitTotalRawList || []).filter(row => row.unit_name === e.features[0].properties.unit_name));
});
})
},
resetFilter(){
const raw = this.unitTotalRawList || []
const sel = this.selectedUnits || []
if (!sel.length) {
this.applyUnitTotalRows(raw)
return
}
const nameSet = new Set(sel.map(u => u && u.unit_name).filter(Boolean))
const filtered = raw.filter(row => nameSet.has(row.unit_name))
this.applyUnitTotalRows(filtered)
resetFilter() {
// 关闭地图弹窗后恢复全部单位统计显示
this.selectedUnits = [];
this.applyUnitTotalRows(this.unitTotalRawList || []);
}
}
}