参航单位使用船侧数据，优化地图弹窗与统计数据交互逻辑。

src/utils/vector-layer-utils.js

@@ -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") {

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,
+      zoom: 2.8,
-      center: [110, 33],
+      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 map = new Map();
-            const k = unit.unit_id || unit.unitId || unit.unit_name
+        // (res.array || []).forEach(unit => {
-            if (!map.has(k)) map.set(k, 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())
+        // })
+        // 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(){
+    resetFilter() {
-      const raw = this.unitTotalRawList || []
+      // 关闭地图弹窗后恢复全部单位统计显示
-      const sel = this.selectedUnits || []
+      this.selectedUnits = [];
-      if (!sel.length) {
+      this.applyUnitTotalRows(this.unitTotalRawList || []);
-        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)
     }
   }
 }