diff --git a/src/utils/vector-layer-utils.js b/src/utils/vector-layer-utils.js index 65efad8..dea83a8 100644 --- a/src/utils/vector-layer-utils.js +++ b/src/utils/vector-layer-utils.js @@ -236,7 +236,7 @@ export async function showUnitReport(mapId, unit, coordinate, callbackOnClose = } const description = ` - + @@ -259,7 +259,7 @@ export async function showUnitReport(mapId, unit, coordinate, callbackOnClose = `; - showPopupDetails({ mapId, coordinate, description, maxWidth: "350px", callbackOnClose: callbackOnClose }); + showPopupDetails({ mapId, coordinate, description, maxWidth: "300px", callbackOnClose: callbackOnClose }); } export function changeCursor(layerId, mapId = "homeMap", cursor = "pointer") { diff --git a/src/views/statistics/UuvUnitStatistics.vue b/src/views/statistics/UuvUnitStatistics.vue index 1a4c12b..3c8eba6 100644 --- a/src/views/statistics/UuvUnitStatistics.vue +++ b/src/views/statistics/UuvUnitStatistics.vue @@ -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 || []); } } }