src/views/statistics/AuvStatistics.vue

@@ -283,11 +283,10 @@ export default {
   background-color: #ebf1f7;
 
   .banner {
-    background-color: #012458;
     background-image: url(../../../static/images/bannerny1.jpg);
     background-repeat: no-repeat;
     background-position: center;
-    background-size: contain;
+    background-size: 100% 100%;
     width: 100%;
     height: 480px;
     display: flex;

src/views/statistics/HovStatistics.vue

@@ -283,11 +283,10 @@ export default {
   background-color: #ebf1f7;
 
   .banner {
-    background-color: #012458;
     background-image: url(../../../static/images/bannerny1.jpg);
     background-repeat: no-repeat;
     background-position: center;
-    background-size: contain;
+    background-size: 100% 100%;
     width: 100%;
     height: 480px;
     display: flex;

src/views/statistics/RovStatistics.vue

@@ -282,11 +282,10 @@ export default {
   background-color: #ebf1f7;
 
   .banner {
-    background-color: #012458;
     background-image: url(../../../static/images/bannerny1.jpg);
     background-repeat: no-repeat;
     background-position: center;
-    background-size: contain;
+    background-size: 100% 100%;
     width: 100%;
     height: 480px;
     display: flex;

src/views/statistics/ShipStatistics.vue

@@ -70,13 +70,14 @@
 </template>
 
 <script>
+import Vue from 'vue'
 import BarChart from './components/BarChart.vue'
 import PieChart from './components/PieChart.vue'
 import { reportList, shipTotal, shipUnit, shipUnitYear, shipVoyage } from '../../api/statistics'
 import { getYearRange, filterDictItems } from '../../utils/index'
-import { initMapbox } from '@/utils/mapbox-utils'
-import { loadVectorLayer, loadJsonPointFeature } from '@/utils/vector-layer-utils'
-import { ColorGenerator } from '@/utils/color-generator'
+import { initMapbox, handleWheel, initSprites, triggerLayerClick } from "@/utils/mapbox-utils";
+import { loadVectorLayer, loadJsonLineFeature, loadJsonPointFeature, highlightFeaturesByProperty } from '@/utils/vector-layer-utils'
+import { ColorGenerator } from '@/utils/color-generator';
 
 export default {
   components: {
@@ -133,20 +134,20 @@ export default {
     this.getChartBar({ year: '2025' })
   },
   mounted() {
-    initMapbox('workUnitMap_ship', {
-      tileKey: 'gaode',
+    initMapbox("workUnitMap_ship", {
+      tileKey: "gaode",
       zoom: 3,
       center: [110, 31],
       minZoom: 2,
       maxZoom: 29
-    })
-    initMapbox('voyageMap_ship', {
-      tileKey: 'GEBCO_basemap_NCEI',
+    });
+    initMapbox("voyageMap_ship", {
+      tileKey: "GEBCO_basemap_NCEI",
       zoom: 3,
       center: [113, 15],
       minZoom: 2,
       maxZoom: 29
-    })
+    });
   },
   beforeDestroy() {
 
@@ -188,15 +189,15 @@ export default {
     // 参航单位统计
     getShipUnit() {
       shipUnit().then(res => {
-        const geojson = {
-          type: 'FeatureCollection',
+        let geojson = {
+          type: "FeatureCollection",
           features: []
-        }
+        };
         res.array.forEach(element => {
           geojson.features.push({
-            type: 'Feature',
+            type: "Feature",
             geometry: {
-              type: 'Point',
+              type: "Point",
               coordinates: [element.unit_lon, element.unit_lat]
             },
             properties: {
@@ -205,9 +206,9 @@ export default {
               create_time: element.create_time,
               tsy_id: element.tsy_id
             }
-          })
-        })
-        loadJsonPointFeature('workUnit', 'blue', geojson, 'unit_name', 'workUnitMap_ship')
+          });
+        });
+        loadJsonPointFeature("workUnit", "blue", geojson, "unit_name", "workUnitMap_ship");
 
         const typeCount = res.array.reduce((acc, unit) => {
           const type = unit.unit_type
@@ -224,13 +225,13 @@ export default {
     // 航次统计
     gitShipVoyage(params = {}) {
       shipVoyage(params).then(res => {
-        let i = 0
-        const colors = ColorGenerator.generateDivergingColors(res.array.length)
+        let i = 0;
+        const colors = ColorGenerator.generateDivergingColors(res.array.length);
         // 添加轨迹图层
         res.array.forEach(item => {
           // 加载轨迹图层
-          loadVectorLayer(item.voyage_name, ['line', 'symbol'], [colors[i], '#FFFFFF'], 'visible', 'voyageMap_ship', 'dsds')
-          i++
+          loadVectorLayer(item.voyage_name, ["line", "symbol"], [colors[i], "#FFFFFF"], "visible", "voyageMap_ship", "dsds");
+          i++;
         })
       })
     },
@@ -305,11 +306,10 @@ export default {
   background-color: #ebf1f7;
 
   .banner {
-    background-color: #012458;
     background-image: url(../../../static/images/bannerny1.jpg);
     background-repeat: no-repeat;
     background-position: center;
-    background-size: contain;
+    background-size: 100% 100%;
     width: 100%;
     height: 480px;
     display: flex;

src/views/statistics/UuvMemberStatistics.vue

@@ -266,11 +266,10 @@ export default {
   background-color: #ebf1f7;
 
   .banner {
-    background-color: #012458;
     background-image: url(../../../static/images/bannerny1.jpg);
     background-repeat: no-repeat;
     background-position: center;
-    background-size: contain;
+    background-size: 100% 100%;
     width: 100%;
     height: 480px;
     display: flex;

src/views/statistics/UuvUnitStatistics.vue

@@ -395,11 +395,10 @@ export default {
   background-color: #ebf1f7;
 
   .banner {
-    background-color: #012458;
     background-image: url(../../../static/images/bannerny1.jpg);
     background-repeat: no-repeat;
     background-position: center;
-    background-size: contain;
+    background-size: 100% 100%;
     width: 100%;
     height: 480px;
     display: flex;