地图信息弹窗增加透明度样式

src/style/style.scss

@@ -1783,6 +1783,12 @@ header{
     display: none !important;
 }
 
+.mapboxgl-popup-content {
+    background-color: rgba(255, 255, 255, 0.9) !important;
+    padding-bottom: 5px !important;
+    border-radius: 5px !important;
+}
+
 .popup-table {
     border-spacing: 0;
     font-family: 'Microsoft YaHei';

src/utils/vector-layer-utils.js

@@ -145,10 +145,15 @@ export async function loadVectorFeature(layerId, feature, color, visibility, map
 export function setHighlight(layerId, sourceId, mapId = "homeMap") {
     let hoveredLineId = null;
     let clickedLineId = null;
-    Vue.config.maps[mapId].on('click', layerId, (e) => {
+    Vue.config.maps[mapId].on('click', layerId, async (e) => {
         if (!e.features || e.features.length <= 0)
             return;
 
+        if (mapId == "workUnitMap_uuv") {
+            showUnitReport(mapId, e.features[0].properties.unit_name, e.features[0].geometry.coordinates);
+            return;
+        }
+
         // // 查询点击点周围的所有要素（使用边界框）
         // const bbox = [
         //     [e.point.x - 10, e.point.y - 10],  // 左上
@@ -203,6 +208,9 @@ export function setHighlight(layerId, sourceId, mapId = "homeMap") {
 
     // When the user moves their mouse over the state-fill layer, we'll update the feature state for the feature under the mouse.
     Vue.config.maps[mapId].on('mousemove', layerId, (e) => {
+        if (mapId == "workUnitMap_uuv")
+            return;
+
         if (e.features.length <= 0)
             return;
         sourceLayer = e.features[0].sourceLayer;
@@ -231,6 +239,40 @@ export function setHighlight(layerId, sourceId, mapId = "homeMap") {
     });
 }
 
+export async function showUnitReport(mapId, unit, coordinates) {
+    const result = await (await fetch(`${Vue.config.baseUrl}/ds/report/unit/total.htm?unit=${unit}`)).json();
+    const unitReports = result.array || [];
+    if (!unitReports.length) {
+        alert("未查询到相关单位的统计信息");
+        return;
+    }
+    const description = `
+        <table class="popup-table" style="min-width:320px;">
+            <thead>
+            <tr>
+            <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>
+            </tr>
+            <tr>
+            <td>参航次数: <b>${unitReports[0].voyage_total || ""}</b></td>
+            <td>参航天数: <b>${unitReports[0].voyage_days || ""}</b></td>
+            </tr>
+            <tr>
+            <td>参航人数: <b>${unitReports[0].member_total || ""}</b></td>
+            <td>下潜次数: <b>${unitReports[0].drving_total || ""}</b></td>
+            </tr>
+        </table>`;
+
+    showPopupDetails(mapId, coordinates, description, "350px");
+}
+
 export function changeCursor(layerId, mapId = "homeMap", cursor = "pointer") {
     Vue.config.maps[mapId].on("mouseenter", layerId, () => {
         Vue.config.maps[mapId].getCanvas().style.cursor = cursor;

src/views/statistics/UuvUnitStatistics.vue

@@ -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 } from '@/utils/vector-layer-utils'
+import { loadVectorLayer, loadJsonPointFeature, showPopupDetails,showUnitReport } from '@/utils/vector-layer-utils'
 import { ColorGenerator } from '@/utils/color-generator'
 
 /**
@@ -184,6 +184,9 @@ export default {
       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)
+
+      // 地图显示最后一个选中单位的相关信息
+      showUnitReport('workUnitMap_uuv', this.selectedUnits.at(-1).unit_name, [this.selectedUnits.at(-1).unit_lon, this.selectedUnits.at(-1).unit_lat])
     },
 
     /**