src/api/statistics.js

@@ -70,26 +70,6 @@ export function hovDiving(data) {
   })
 }
 
-// 遥控潜水器潜次统计
-export function rovDiving(data) {
-  return request({
-    url: '/report/platform/rov/diving.htm',
-    method: 'post',
-    type: 'application/x-www-form-urlencoded',
-    data
-  })
-}
-
-// 无人航行潜水器潜次统计
-export function auvDiving(data) {
-  return request({
-    url: '/report/platform/auv/diving.htm',
-    method: 'post',
-    type: 'application/x-www-form-urlencoded',
-    data
-  })
-}
-
 // 载人潜水器参航单位统计
 export function hovUnit(data) {
   return request({
@@ -100,24 +80,6 @@ export function hovUnit(data) {
   })
 }
 
-export function rovUnit(data) {
-  return request({
-    url: '/report/platform/rov/unit.htm',
-    method: 'post',
-    type: 'application/x-www-form-urlencoded',
-    data
-  })
-}
-
-export function auvUnit(data) {
-  return request({
-    url: '/report/platform/auv/unit.htm',
-    method: 'post',
-    type: 'application/x-www-form-urlencoded',
-    data
-  })
-}
-
 // 载人潜水器参航单位统计(年度)
 export function hovUnitYear(data) {
   return request({
@@ -128,24 +90,6 @@ export function hovUnitYear(data) {
   })
 }
 
-export function rovUnitYear(data) {
-  return request({
-    url: '/report/platform/rov/unit/year.htm',
-    method: 'post',
-    type: 'application/x-www-form-urlencoded',
-    data
-  })
-}
-
-export function auvUnitYear(data) {
-  return request({
-    url: '/report/platform/auv/unit/year.htm',
-    method: 'post',
-    type: 'application/x-www-form-urlencoded',
-    data
-  })
-}
-
 // 无人航行潜水器统计
 export function platformAuv(data) {
   return request({

src/main.js

@@ -50,10 +50,4 @@ if (Vue.config.firstRender) {
     });
 }
 
-window.mapboxgl.accessToken = 'pk.eyJ1IjoicWRod2kiLCJhIjoiY2xiaXppcjEyMGNhMjNwbzVrcHl4d20zOSJ9.0ETMJM3-zllFh2GRrRVUZg'
+window.mapboxgl.accessToken = 'pk.eyJ1IjoicWRod2kiLCJhIjoiY2xiaXppcjEyMGNhMjNwbzVrcHl4d20zOSJ9.0ETMJM3-zllFh2GRrRVUZg'
-
-Vue.config.tiles = {
-  "world_horizon_1": `${Vue.config.baseUrl}/geoserver/gwc/service/wmts/rest/ougp:world_horizon_1/EPSG:900913/EPSG:900913:{z}/{y}/{x}?format=image/jpeg`,
-  "GEBCO_basemap_NCEI": "https://tiles.arcgis.com/tiles/C8EMgrsFcRFL6LrL/arcgis/rest/services/GEBCO_basemap_NCEI/MapServer/tile/{z}/{y}/{x}",
-  "gaode":"https://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&scl=2&style=8&x={x}&y={y}&z={z}"
-};

src/router/index.js

@@ -379,9 +379,9 @@ export const constantRoutes = [
         }
       },
       {
-        path: 'auv',
+        path: 'uuv',
-        name: 'auv',
+        name: 'uuv',
-        component: () => import('@/views/statistics/AuvStatistics.vue'),
+        component: () => import('@/views/statistics/UuvStatistics.vue'),
         meta: {
           title: '无人潜水器汇总统计',
           icon: 'peoples',

src/utils/mapbox-utils.js

@@ -1,96 +1,5 @@
 import Vue from 'vue'
 
-export function initMapbox(mapId, options = {}) {
-    const map = new window.mapboxgl.Map({
-        container: mapId,
-        // style: 'mapbox://styles/mapbox/standard',
-        style: {
-            "version": 8,
-            "name": "default_style",
-            // mapbox地图使用的图标
-            "sprite": `${Vue.config.baseUrl}/oe/${Vue.config.wwwrootBaseUrl}/sprites/sprite`,
-            // 使用官方标注字体（需联网）
-            "glyphs": "mapbox://fonts/mapbox/{fontstack}/{range}.pbf",
-            // 自部署标注字体（无需联网），glyphs 前有两个斜杠时，可能导致404
-            // "glyphs": `${Vue.config.baseUrl}/oe/${Vue.config.wwwrootBaseUrl}/glyphs/{fontstack}/{range}.pbf`,
-            "sources": {
-                "影像地图": {
-                    "type": "raster",
-                    "tiles": [
-                        Vue.config.tiles[options.tileKey || "gaode"]
-                    ],
-                    "tileSize": 256,
-                    // "minzoom": 0,
-                    // "maxzoom": baseMapMaxZoom
-                }
-            },
-            "layers": [
-                {
-                    "id": "影像地图",
-                    "type": "raster",
-                    "source": "影像地图",
-                    "layout": { visibility: "visible" },
-                    // "minzoom": 0,
-                    // "maxzoom": baseMapMaxZoom
-                }
-            ]
-        },
-        config: {
-            basemap: {
-                theme: 'monochrome',
-                lightPreset: 'night'
-            }
-        },
-        zoom: options.zoom || 5,
-        center: options.center || [112, 20],
-        minZoom: options.minZoom || 2,
-        maxZoom: options.maxZoom || 29,
-        trackResize: true,
-        scrollZoom: false, // 禁用滚轮缩放
-        // 地图默认字体
-        localIdeographFontFamily: "Microsoft YoHei, 'Noto Sans', 'Noto Sans CJK SC', sans-serif",
-        pitch: 0,
-        bearing: 0,
-        // // 禁用所有旋转和俯仰角控制
-        // dragRotate: false,
-        // touchZoomRotate: false,
-        // pitchWithRotate: false,
-        // maxBounds: [[-180, -90], [180, 90]],// Set the map's geographical boundaries.
-        antialias: true,
-        attributionControl: false,
-        boxZoom: true,//如果为true，则启用了“缩放框”交互，按住shift并在地图上拖框放大
-        preserveDrawingBuffer: false,//如果为true，地图的canvas可以使用导出到png，通过map.getCanvas().toDataURL()。默认为false，会提高地图性能。
-        projection: 'equirectangular', // 设置投影方式，经纬度直投（解决缩放级别大于26时瓦片消失的问题）
-    });
-    Vue.config.maps[mapId] = map;
-
-    // 确保窗口大小改变时，地图能正确铺满容器
-    window.addEventListener('resize', (event) => {
-        map.resize();
-        // // maps.forEach((key: string, value: any) => {
-        // //     console.log(`${key}: ${value}`);
-        // // });
-        // for (let [key, value] of Object.entries(maps)) {
-        //   // value.resize();
-        // }
-        // Object.values(maps).forEach((map) => {
-        //   map.resize();
-        // });
-    });
-
-    // handleWheel("voyageMap_ship");
-    Vue.config.maps[mapId].scrollZoom.enable();
-    initSprites(mapId)
-
-    map.on('load', () => {
-        // 加载海岸线
-        // loadVectorLayer("GSHHS_f_L1", ["line"], ["#5c71c3"], "visible", "workUnitMap_ship", 'ougp');
-        // 加载等深线
-        // loadVectorLayer("contour-4500m", ["line"], ["#FEFEFE"], "visible", "workUnitMap_ship", 'ougp');
-        // loadVectorLayer("contour-6000m", ["line"], ["#FEFEFE"], "visible", "workUnitMap_ship", 'ougp');
-    });
-}
-
 /**
  * 获取所有图层信息
  * @param {mapboxgl.Map} map - Mapbox 地图实例
@@ -223,7 +132,7 @@ export async function triggerLayerClick(mapId, sourceLayerId, layerId, lnglat, o
 
     // 在浏览器控制台或 triggerLayerClick 中运行（替换 sourceId/sourceLayerName）
     const feats = map.querySourceFeatures(sourceId, { sourceLayer: "sample_station_TS-46-1_Ship_CTDI_SY" }) || [];
-    console.log(sourceId, ">>>>>>>>>>>>>>>>>>>>sample_station_TS-46-1_Ship_CTDI_SY", ' ======sample of features:', feats.slice(0, 5));
+    console.log(sourceId,">>>>>>>>>>>>>>>>>>>>sample_station_TS-46-1_Ship_CTDI_SY",' ======sample of features:', feats.slice(0, 5));
     console.log('props keys:', feats.slice(0, 5).map(f => Object.keys(f.properties || {})));
 
     let relatedTracks = map.querySourceFeatures(sourceId, {

src/utils/vector-layer-utils.js

@@ -464,7 +464,9 @@ export async function loadJsonLineFeature(layerId, color, geojson, mapId) {
     }
 }
 
-export async function loadJsonPointFeature(layerId, color, geojson,text_field, mapId) {
+export async function loadJsonPointFeature(layerId, color, geojson, mapId) {
+    // console.log("layerId: ",layerId);
+
     let source = Vue.config.maps[mapId].getSource(layerId);
     if (!source) {
         Vue.config.maps[mapId].addSource(layerId, {
@@ -488,7 +490,7 @@ export async function loadJsonPointFeature(layerId, color, geojson,text_field, m
                 'icon-image': 'dot.png',
                 'icon-size': 0.5,
                 // get the title name from the source's "title" property
-                'text-field': ['get', text_field],
+                'text-field': ['get', 'sample_name'],
                 'text-font': [
                     'Open Sans Semibold',
                     'Arial Unicode MS Bold'

src/views/dataSearch.vue

@@ -707,7 +707,7 @@ export default {
           "sources": {
             "影像地图": {
               "type": "raster",
-              "tiles": [Vue.config.tiles["GEBCO_basemap_NCEI"]],
+              "tiles": [`${Vue.config.baseUrl}/geoserver/gwc/service/wmts/rest/ougp:world/EPSG:900913/EPSG:900913:{z}/{y}/{x}?format=image/jpeg`],
               "tileSize": 256,
               // "minzoom": 0,
               // "maxzoom": baseMapMaxZoom

src/views/statistics/HovStatistics.vue

@@ -25,11 +25,11 @@
     <div class="map-module">
       <div class="bezel">
         <div class="map-title">下潜单位</div>
-        <div id="workUnitMap_hov" ref="workUnitMap_hov" style="height: 100%;width:100%;" />
+        <div id="baiduCesiumContainer" ref="baiduCesiumContainer" style="height: 100%;width:100%;" />
       </div>
       <div class="bezel">
         <div class="map-title">下潜地图</div>
-        <div id="voyageMap_hov" ref="voyageMap_hov" style="height: 100%;width:100%;" />
+        <div id="cesiumContainer" ref="cesiumContainer" style="height: 100%;width:100%;" />
       </div>
     </div>
     <!-- echarts板块-->
@@ -89,9 +89,6 @@ import PieChart from './components/PieChart.vue'
 import { setImageryViewModels } from '../../utils/common'
 import { reportList, platformHov, hovUnit, hovUnitYear, hovDiving } from '../../api/statistics'
 import { filterDictItems } from '../../utils/index'
-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';
 const Cesium = window.Cesium
 
 export default {
@@ -149,24 +146,9 @@ export default {
     this.getChartBar({ year: '2025' })
   },
   mounted() {
-     initMapbox("workUnitMap_hov", {
+    this.imageryViewModels = setImageryViewModels(this.CesiumHostAddr)
-      tileKey: "gaode",
+    this.initCesium() // 初始化航次地图
-      zoom: 3,
+    this.initBaiduCesium() // 初始化参航单位地图
-      center: [110, 31],
-      minZoom: 2,
-      maxZoom: 29
-    });
-    initMapbox("voyageMap_hov", {
-      tileKey: "GEBCO_basemap_NCEI",
-      zoom: 4,
-      center: [113, 15],
-      minZoom: 2,
-      maxZoom: 29
-    });
-
-   // this.imageryViewModels = setImageryViewModels(this.CesiumHostAddr)
-    // this.initCesium() // 初始化航次地图
-    // this.initBaiduCesium() // 初始化参航单位地图
   },
   beforeDestroy() {
     // 清理Cesium资源
@@ -213,32 +195,11 @@ export default {
     // 下潜单位统计
     getHovUnit() {
       hovUnit().then(res => {
-        let geojson = {
+        // 清除之前的标记
-          type: "FeatureCollection",
+        this.clearBaiduCesiumMarkers()
-          features: []
-        };
-        res.array.forEach(element => {
-          geojson.features.push({
-            type: "Feature",
-            geometry: {
-              type: "Point",
-              coordinates: [element.unit_lon, element.unit_lat]
-            },
-            properties: {
-              unit_name: element.unit_name,
-              unit_type: element.unit_type,
-              create_time: element.create_time,
-              tsy_id: element.tsy_id
-            }
-          });
-        });
-        loadJsonPointFeature("workUnit", "blue", geojson, "unit_name", "workUnitMap_hov");
 
-        // // 清除之前的标记
+        // 创建参航单位标记
-        // this.clearBaiduCesiumMarkers()
+        this.createBaiduCesiumMarkers(res.array)
-
-        // // 创建参航单位标记
-        // this.createBaiduCesiumMarkers(res.array)
         const typeCount = res.array.reduce((acc, unit) => {
           const type = unit.unit_type
           acc[type] = (acc[type] || 0) + 1 // 如果类型已存在则计数+1，否则初始化为1
@@ -302,21 +263,15 @@ export default {
     // 潜次统计
     gitHovDiving(params = {}) {
       hovDiving(params).then(res => {
-        let i = 0;
-        const colors = ColorGenerator.generateDivergingColors(res.array.length);
         // 添加轨迹图层
         res.array.forEach(item => {
-          // 加载轨迹图层
+          this.addSingleLineImg(item)
-          loadVectorLayer(item.diving_sn, ["line", "symbol"], [colors[i], "#FFFFFF"], "visible", "voyageMap_hov", "dsds");
-          i++;
-      
-          // this.addSingleLineImg(item)
         })
       })
     },
     // 初始化Cesium - 参航单位地图
     initBaiduCesium() {
-      this.baiduCesiumViewer = new Cesium.Viewer(this.$refs.workUnitMap_hov, {
+      this.baiduCesiumViewer = new Cesium.Viewer(this.$refs.baiduCesiumContainer, {
         sceneMode: Cesium.SceneMode.SCENE2D,
         shadows: false,
         timeline: false,
@@ -352,7 +307,7 @@ export default {
     // 初始化cesium
     initCesium() {
       Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJkY2Y5NWY2Ni1mODQ1LTQ3YTUtYjc4Zi1jYzhjMGI2YzcxMWYiLCJpZCI6MTI5ODMwLCJpYXQiOjE2Nzk0Njk5NTd9.DTH54ioOH-HLqeNIetBe9hFyrPOX2Vp1AQmZzw8TIZ4'
-      this.viewer = new Cesium.Viewer('voyageMap_hov', {
+      this.viewer = new Cesium.Viewer('cesiumContainer', {
         sceneMode: Cesium.SceneMode.SCENE2D,
         shadows: false,
         timeline: false,

src/views/statistics/RovStatistics.vue

@@ -5,7 +5,11 @@
         <span class="titles">{{ currentTitle }}<i class="el-icon-arrow-down el-icon--right" /></span>
         <el-dropdown-menu slot="dropdown">
           <el-dropdown-item command="全部遥控潜水器">全部遥控潜水器</el-dropdown-item>
-          <el-dropdown-item v-for="item in titles" :key="item.tsy_id" :command="item.report_name">
+          <el-dropdown-item
+            v-for="item in titles"
+            :key="item.tsy_id"
+            :command="item.report_name"
+          >
             {{ item.report_name }}
           </el-dropdown-item>
         </el-dropdown-menu>
@@ -21,34 +25,59 @@
     <div class="map-module">
       <div class="bezel">
         <div class="map-title">下潜单位</div>
-        <div id="workUnitMap_rov" ref="workUnitMap_rov" style="height: 100%;width:100%;" />
+        <div id="baiduCesiumContainer" ref="baiduCesiumContainer" style="height: 100%;width:100%;" />
       </div>
       <div class="bezel">
         <div class="map-title">下潜地图</div>
-        <div id="voyageMap_rov" ref="voyageMap_rov" style="height: 100%;width:100%;" />
+        <div id="cesiumContainer" ref="cesiumContainer" style="height: 100%;width:100%;" />
       </div>
     </div>
     <!-- echarts板块-->
     <div class="echarts-module">
       <div class="bezel">
-        <BarChart :title="barData1.title" :chart-data="barData1.salesData" :categories="barData1.productCategories"
+        <BarChart
-          chart-type="single" />
+          :title="barData1.title"
+          :chart-data="barData1.salesData"
+          :categories="barData1.productCategories"
+          chart-type="single"
+        />
       </div>
       <div class="bezel">
-        <BarChart :title="barData2.title" :chart-data="barData2.salesData" :categories="barData2.productCategories"
+        <BarChart
-          chart-type="stacked" stack-name="新增单位数" />
+          :title="barData2.title"
+          :chart-data="barData2.salesData"
+          :categories="barData2.productCategories"
+          chart-type="stacked"
+          stack-name="新增单位数"
+        />
       </div>
       <div class="bezel">
-        <BarChart :title="barData3.title" :chart-data="barData3.salesData" :categories="barData3.productCategories" />
+        <BarChart
+          :title="barData3.title"
+          :chart-data="barData3.salesData"
+          :categories="barData3.productCategories"
+        />
       </div>
       <div class="bezel">
-        <BarChart :title="barData4.title" :chart-data="barData4.salesData" :categories="barData4.productCategories" />
+        <BarChart
+          :title="barData4.title"
+          :chart-data="barData4.salesData"
+          :categories="barData4.productCategories"
+        />
       </div>
       <div class="bezel">
-        <BarChart :title="barData5.title" :chart-data="barData5.salesData" :categories="barData5.productCategories" />
+        <BarChart
+          :title="barData5.title"
+          :chart-data="barData5.salesData"
+          :categories="barData5.productCategories"
+        />
       </div>
       <div class="bezel">
-        <PieChart :chart-data="pieData" title="下潜单位类型" chart-type="ring" />
+        <PieChart
+          :chart-data="pieData"
+          title="下潜单位类型"
+          chart-type="ring"
+        />
       </div>
     </div>
   </div>
@@ -58,11 +87,8 @@
 import BarChart from './components/BarChart.vue'
 import PieChart from './components/PieChart.vue'
 import { setImageryViewModels } from '../../utils/common'
-import { reportList, platformRov, rovUnit, rovUnitYear, rovDiving } from '../../api/statistics'
+import { reportList, platformHov, hovUnit, hovUnitYear, hovDiving } from '../../api/statistics'
 import { filterDictItems } from '../../utils/index'
-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';
 const Cesium = window.Cesium
 
 export default {
@@ -113,31 +139,16 @@ export default {
   },
   created() {
     this.getTypeList()
-    this.getRovList()
+    this.getHovList()
-    this.getRovUnit()
+    this.getHovUnit()
-    this.gitRovDiving()
+    this.gitHovDiving()
-    this.gitRovUnitYear()
+    this.gitHovUnitYear()
     this.getChartBar({ year: '2025' })
   },
   mounted() {
-    initMapbox("workUnitMap_rov", {
+    this.imageryViewModels = setImageryViewModels(this.CesiumHostAddr)
-      tileKey: "gaode",
+    this.initCesium() // 初始化航次地图
-      zoom: 3,
+    this.initBaiduCesium() // 初始化参航单位地图
-      center: [110, 31],
-      minZoom: 2,
-      maxZoom: 29
-    });
-    initMapbox("voyageMap_rov", {
-      tileKey: "GEBCO_basemap_NCEI",
-      zoom: 4,
-      center: [113, 15],
-      minZoom: 2,
-      maxZoom: 29
-    });
-
-    // this.imageryViewModels = setImageryViewModels(this.CesiumHostAddr)
-    // this.initCesium() // 初始化航次地图
-    // this.initBaiduCesium() // 初始化参航单位地图
   },
   beforeDestroy() {
     // 清理Cesium资源
@@ -160,20 +171,20 @@ export default {
       this.currentTitle = command
       this.removeSingleLineImg()
       if (command === '全部遥控潜水器') {
-        this.getRovList()
+        this.getHovList()
-        this.gitRovDiving()
+        this.gitHovDiving()
-        this.gitRovUnitYear()
+        this.gitHovUnitYear()
         this.getChartBar({ year: '2025' })
       } else {
-        this.getRovList({ platform_name: command })
+        this.getHovList({ platform_name: command })
-        this.gitRovDiving({ platform_name: command })
+        this.gitHovDiving({ platform_name: command })
-        this.gitRovUnitYear({ platform_name: command })
+        this.gitHovUnitYear({ platform_name: command })
         this.getChartBar({ year: '2025', platform_name: command })
       }
     },
     // 汇总统计数据
-    getRovList(params = {}) {
+    getHovList(params = {}) {
-      platformRov(params).then(res => {
+      platformHov(params).then(res => {
         const obj = res.array[0]
         this.numbers[0].value = obj.diving_total
         this.numbers[1].value = obj.driver_member_total
@@ -182,34 +193,13 @@ export default {
       })
     },
     // 下潜单位统计
-    getRovUnit() {
+    getHovUnit() {
-      rovUnit().then(res => {
+      hovUnit().then(res => {
-        let geojson = {
+        // 清除之前的标记
-          type: "FeatureCollection",
+        this.clearBaiduCesiumMarkers()
-          features: []
-        };
-        res.array.forEach(element => {
-          geojson.features.push({
-            type: "Feature",
-            geometry: {
-              type: "Point",
-              coordinates: [element.unit_lon, element.unit_lat]
-            },
-            properties: {
-              unit_name: element.unit_name,
-              unit_type: element.unit_type,
-              create_time: element.create_time,
-              tsy_id: element.tsy_id
-            }
-          });
-        });
-        loadJsonPointFeature("workUnit", "blue", geojson, "unit_name", "workUnitMap_rov");
 
-        // // 清除之前的标记
+        // 创建参航单位标记
-        // this.clearBaiduCesiumMarkers()
+        this.createBaiduCesiumMarkers(res.array)
-
-        // // 创建参航单位标记
-        // this.createBaiduCesiumMarkers(res.array)
         const typeCount = res.array.reduce((acc, unit) => {
           const type = unit.unit_type
           acc[type] = (acc[type] || 0) + 1 // 如果类型已存在则计数+1，否则初始化为1
@@ -271,23 +261,17 @@ export default {
       }
     },
     // 潜次统计
-    gitRovDiving(params = {}) {
+    gitHovDiving(params = {}) {
-      rovDiving(params).then(res => {
+      hovDiving(params).then(res => {
-        let i = 0;
-        const colors = ColorGenerator.generateDivergingColors(res.array.length);
         // 添加轨迹图层
         res.array.forEach(item => {
-          // 加载轨迹图层
+          this.addSingleLineImg(item)
-          loadVectorLayer(item.diving_sn, ["line", "symbol"], [colors[i], "#FFFFFF"], "visible", "voyageMap_rov", "dsds");
-          i++;
-
-          // this.addSingleLineImg(item)
         })
       })
     },
     // 初始化Cesium - 参航单位地图
     initBaiduCesium() {
-      this.baiduCesiumViewer = new Cesium.Viewer(this.$refs.workUnitMap_rov, {
+      this.baiduCesiumViewer = new Cesium.Viewer(this.$refs.baiduCesiumContainer, {
         sceneMode: Cesium.SceneMode.SCENE2D,
         shadows: false,
         timeline: false,
@@ -383,8 +367,8 @@ export default {
       }
     },
     // 参潜单位年度
-    gitRovUnitYear(params = {}) {
+    gitHovUnitYear(params = {}) {
-      rovUnitYear(params).then(res => {
+      hovUnitYear(params).then(res => {
         const originalData = res.array
         const sortedData = originalData.sort((a, b) => a.voyage_year - b.voyage_year)
         this.barData2 = {
@@ -407,7 +391,7 @@ export default {
     },
     // 柱状图数据
     getChartBar(params) {
-      platformRov(params).then(res => {
+      platformHov(params).then(res => {
         const originalData = res.array
         const sortedData = originalData.sort((a, b) => a.year - b.year)
         this.barData1 = {
@@ -468,29 +452,24 @@ export default {
         flex-direction: column;
         justify-content: center;
         align-items: center;
-
         .value {
           font-size: 56px;
           font-weight: bold;
-
           .unit {
             font-size: 26px;
           }
         }
-
         .label {
           font-size: 18px;
         }
       }
     }
   }
-
   .map-module {
     padding: 50px 50px;
     display: flex;
     justify-content: space-between;
     gap: 50px;
-
     .bezel {
       flex: 1;
       width: 100%;
@@ -508,7 +487,6 @@ export default {
         z-index: 8888;
         font-size: 22px;
       }
-
       .map-year {
         position: absolute;
         top: 20px;
@@ -519,7 +497,6 @@ export default {
       }
     }
   }
-
   .echarts-module {
     padding: 0 50px 50px;
     display: grid;

src/views/statistics/ShipStatistics.vue

@@ -5,7 +5,11 @@
         <span class="titles">{{ currentTitle }}<i class="el-icon-arrow-down el-icon--right" /></span>
         <el-dropdown-menu slot="dropdown">
           <el-dropdown-item command="全部科考船">全部科考船</el-dropdown-item>
-          <el-dropdown-item v-for="item in titles" :key="item.tsy_id" :command="item.report_name">
+          <el-dropdown-item
+            v-for="item in titles"
+            :key="item.tsy_id"
+            :command="item.report_name"
+          >
             {{ item.report_name }}
           </el-dropdown-item>
         </el-dropdown-menu>
@@ -21,49 +25,72 @@
     <div class="map-module">
       <div class="bezel">
         <div class="map-title">参航单位</div>
-        <div id="workUnitMap_ship" ref="workUnitMap_ship" style="height: 100%;width:100%;" />
+        <div id="baiduCesiumContainer" ref="baiduCesiumContainer" style="height: 100%;width:100%;" />
       </div>
       <div class="bezel">
         <div class="map-title">航次地图</div>
-        <el-date-picker v-model="voyageYear" type="year" size="mini" placeholder="选择年" class="map-year" format="yyyy"
+        <el-date-picker
-          @change="selectVoyageYear" />
+          v-model="voyageYear"
-        <div id="voyageMap_ship" ref="voyageMap_ship" style="height: 100%;width:100%;" />
+          type="year"
+          size="mini"
+          placeholder="选择年"
+          class="map-year"
+          format="yyyy"
+          @change="selectVoyageYear"
+        />
+        <div id="cesiumContainer" ref="cesiumContainer" style="height: 100%;width:100%;" />
       </div>
     </div>
     <!-- echarts板块-->
     <div class="echarts-module">
       <div class="bezel">
-        <BarChart :title="barData1.title" :chart-data="barData1.salesData" :categories="barData1.productCategories"
+        <BarChart
-          chart-type="single" />
+          :title="barData1.title"
+          :chart-data="barData1.salesData"
+          :categories="barData1.productCategories"
+          chart-type="single"
+        />
       </div>
       <div class="bezel">
-        <BarChart :title="barData2.title" :chart-data="barData2.salesData" :categories="barData2.productCategories"
+        <BarChart
-          chart-type="stacked" stack-name="新增单位数" />
+          :title="barData2.title"
+          :chart-data="barData2.salesData"
+          :categories="barData2.productCategories"
+          chart-type="stacked"
+          stack-name="新增单位数"
+        />
       </div>
       <div class="bezel">
-        <BarChart :title="barData3.title" :chart-data="barData3.salesData" :categories="barData3.productCategories" />
+        <BarChart
+          :title="barData3.title"
+          :chart-data="barData3.salesData"
+          :categories="barData3.productCategories"
+        />
       </div>
       <div class="bezel">
-        <BarChart :title="barData4.title" :chart-data="barData4.salesData" :categories="barData4.productCategories" />
+        <BarChart
+          :title="barData4.title"
+          :chart-data="barData4.salesData"
+          :categories="barData4.productCategories"
+        />
       </div>
       <div class="bezel">
-        <PieChart :chart-data="pieData" title="参航单位类型" chart-type="ring" />
+        <PieChart
+          :chart-data="pieData"
+          title="参航单位类型"
+          chart-type="ring"
+        />
       </div>
     </div>
   </div>
 </template>
 
 <script>
-import Vue from 'vue'
 import BarChart from './components/BarChart.vue'
 import PieChart from './components/PieChart.vue'
 import { setImageryViewModels } from '../../utils/common'
 import { reportList, shipTotal, shipUnit, shipUnitYear, shipVoyage } from '../../api/statistics'
 import { getYearRange, filterDictItems } from '../../utils/index'
-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';
-
 const Cesium = window.Cesium
 
 export default {
@@ -126,23 +153,9 @@ export default {
     this.getChartBar({ year: '2025' })
   },
   mounted() {
-    initMapbox("workUnitMap_ship", {
+    this.imageryViewModels = setImageryViewModels(this.CesiumHostAddr)
-      tileKey: "gaode",
+    this.initCesium() // 初始化航次地图
-      zoom: 3,
+    this.initBaiduCesium() // 初始化参航单位地图
-      center: [110, 31],
-      minZoom: 2,
-      maxZoom: 29
-    });
-    initMapbox("voyageMap_ship", {
-      tileKey: "GEBCO_basemap_NCEI",
-      zoom: 4,
-      center: [113, 15],
-      minZoom: 2,
-      maxZoom: 29
-    });
-    // this.imageryViewModels = setImageryViewModels(this.CesiumHostAddr)
-    // this.initBaiduCesium() // 初始化参航单位地图
-    // this.initCesium() // 初始化航次地图
   },
   beforeDestroy() {
     // 清理Cesium资源
@@ -190,31 +203,11 @@ export default {
     // 参航单位统计
     getShipUnit() {
       shipUnit().then(res => {
-        let geojson = {
+        // 清除之前的标记
-          type: "FeatureCollection",
+        this.clearBaiduCesiumMarkers()
-          features: []
-        };
-        res.array.forEach(element => {
-          geojson.features.push({
-            type: "Feature",
-            geometry: {
-              type: "Point",
-              coordinates: [element.unit_lon, element.unit_lat]
-            },
-            properties: {
-              unit_name: element.unit_name,
-              unit_type: element.unit_type,
-              create_time: element.create_time,
-              tsy_id: element.tsy_id
-            }
-          });
-        });
-        loadJsonPointFeature("workUnit", "blue", geojson, "unit_name", "workUnitMap_ship");
 
-        // // 清除之前的标记
+        // 创建参航单位标记
-        // this.clearBaiduCesiumMarkers()
+        this.createBaiduCesiumMarkers(res.array)
-        // // 创建参航单位标记
-        // this.createBaiduCesiumMarkers(res.array)
 
         const typeCount = res.array.reduce((acc, unit) => {
           const type = unit.unit_type
@@ -279,22 +272,15 @@ export default {
     // 航次统计
     gitShipVoyage(params = {}) {
       shipVoyage(params).then(res => {
-        let i = 0;
-        const colors = ColorGenerator.generateDivergingColors(res.array.length);
         // 添加轨迹图层
         res.array.forEach(item => {
-          // 加载轨迹图层
+          this.addSingleLineImg(item)
-          loadVectorLayer(item.voyage_name, ["line", "symbol"], [colors[i], "#FFFFFF"], "visible", "voyageMap_ship", "dsds");
-          i++;
-
-          // this.addSingleLineImg(item)
         })
       })
     },
-
     // 初始化Cesium - 参航单位地图
     initBaiduCesium() {
-      this.baiduCesiumViewer = new Cesium.Viewer(this.$refs.workUnitMap_ship, {
+      this.baiduCesiumViewer = new Cesium.Viewer(this.$refs.baiduCesiumContainer, {
         sceneMode: Cesium.SceneMode.SCENE2D,
         shadows: false,
         timeline: false,
@@ -330,7 +316,7 @@ export default {
     // 初始化cesium
     initCesium() {
       Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJkY2Y5NWY2Ni1mODQ1LTQ3YTUtYjc4Zi1jYzhjMGI2YzcxMWYiLCJpZCI6MTI5ODMwLCJpYXQiOjE2Nzk0Njk5NTd9.DTH54ioOH-HLqeNIetBe9hFyrPOX2Vp1AQmZzw8TIZ4'
-      this.viewer = new Cesium.Viewer('voyageMap_ship', {
+      this.viewer = new Cesium.Viewer('cesiumContainer', {
         sceneMode: Cesium.SceneMode.SCENE2D,
         shadows: false,
         timeline: false,
@@ -482,29 +468,24 @@ export default {
         flex-direction: column;
         justify-content: center;
         align-items: center;
-
         .value {
           font-size: 56px;
           font-weight: bold;
-
           .unit {
             font-size: 26px;
           }
         }
-
         .label {
           font-size: 18px;
         }
       }
     }
   }
-
   .map-module {
     padding: 50px 50px;
     display: flex;
     justify-content: space-between;
     gap: 50px;
-
     .bezel {
       flex: 1;
       width: 100%;
@@ -522,7 +503,6 @@ export default {
         z-index: 8888;
         font-size: 22px;
       }
-
       .map-year {
         position: absolute;
         top: 20px;
@@ -533,7 +513,6 @@ export default {
       }
     }
   }
-
   .echarts-module {
     padding: 0 50px 50px;
     display: grid;

src/views/statistics/UuvStatistics.vue

@@ -5,7 +5,11 @@
         <span class="titles">{{ currentTitle }}<i class="el-icon-arrow-down el-icon--right" /></span>
         <el-dropdown-menu slot="dropdown">
           <el-dropdown-item command="全部无人航行潜水器">全部无人航行潜水器</el-dropdown-item>
-          <el-dropdown-item v-for="item in titles" :key="item.tsy_id" :command="item.report_name">
+          <el-dropdown-item
+            v-for="item in titles"
+            :key="item.tsy_id"
+            :command="item.report_name"
+          >
             {{ item.report_name }}
           </el-dropdown-item>
         </el-dropdown-menu>
@@ -21,34 +25,59 @@
     <div class="map-module">
       <div class="bezel">
         <div class="map-title">下潜单位</div>
-        <div id="workUnitMap_auv" ref="workUnitMap_auv" style="height: 100%;width:100%;" />
+        <div id="baiduCesiumContainer" ref="baiduCesiumContainer" style="height: 100%;width:100%;" />
       </div>
       <div class="bezel">
         <div class="map-title">下潜地图</div>
-        <div id="voyageMap_auv" ref="voyageMap_auv" style="height: 100%;width:100%;" />
+        <div id="cesiumContainer" ref="cesiumContainer" style="height: 100%;width:100%;" />
       </div>
     </div>
     <!-- echarts板块-->
     <div class="echarts-module">
       <div class="bezel">
-        <BarChart :title="barData1.title" :chart-data="barData1.salesData" :categories="barData1.productCategories"
+        <BarChart
-          chart-type="single" />
+          :title="barData1.title"
+          :chart-data="barData1.salesData"
+          :categories="barData1.productCategories"
+          chart-type="single"
+        />
       </div>
       <div class="bezel">
-        <BarChart :title="barData2.title" :chart-data="barData2.salesData" :categories="barData2.productCategories"
+        <BarChart
-          chart-type="stacked" stack-name="新增单位数" />
+          :title="barData2.title"
+          :chart-data="barData2.salesData"
+          :categories="barData2.productCategories"
+          chart-type="stacked"
+          stack-name="新增单位数"
+        />
       </div>
       <div class="bezel">
-        <BarChart :title="barData3.title" :chart-data="barData3.salesData" :categories="barData3.productCategories" />
+        <BarChart
+          :title="barData3.title"
+          :chart-data="barData3.salesData"
+          :categories="barData3.productCategories"
+        />
       </div>
       <div class="bezel">
-        <BarChart :title="barData4.title" :chart-data="barData4.salesData" :categories="barData4.productCategories" />
+        <BarChart
+          :title="barData4.title"
+          :chart-data="barData4.salesData"
+          :categories="barData4.productCategories"
+        />
       </div>
       <div class="bezel">
-        <BarChart :title="barData5.title" :chart-data="barData5.salesData" :categories="barData5.productCategories" />
+        <BarChart
+          :title="barData5.title"
+          :chart-data="barData5.salesData"
+          :categories="barData5.productCategories"
+        />
       </div>
       <div class="bezel">
-        <PieChart :chart-data="pieData" title="下潜单位类型" chart-type="ring" />
+        <PieChart
+          :chart-data="pieData"
+          title="下潜单位类型"
+          chart-type="ring"
+        />
       </div>
     </div>
   </div>
@@ -58,11 +87,8 @@
 import BarChart from './components/BarChart.vue'
 import PieChart from './components/PieChart.vue'
 import { setImageryViewModels } from '../../utils/common'
-import { reportList, platformAuv, auvUnit, auvUnitYear, auvDiving } from '../../api/statistics'
+import { reportList, platformHov, hovUnit, hovUnitYear, hovDiving } from '../../api/statistics'
 import { filterDictItems } from '../../utils/index'
-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';
 const Cesium = window.Cesium
 
 export default {
@@ -113,31 +139,16 @@ export default {
   },
   created() {
     this.getTypeList()
-    this.getAuvList()
+    this.getHovList()
-    this.getAuvUnit()
+    this.getHovUnit()
-    this.gitAuvDiving()
+    this.gitHovDiving()
-    this.gitAuvUnitYear()
+    this.gitHovUnitYear()
     this.getChartBar({ year: '2025' })
   },
   mounted() {
-    initMapbox("workUnitMap_auv", {
+    this.imageryViewModels = setImageryViewModels(this.CesiumHostAddr)
-      tileKey: "gaode",
+    this.initCesium() // 初始化航次地图
-      zoom: 3,
+    this.initBaiduCesium() // 初始化参航单位地图
-      center: [110, 31],
-      minZoom: 2,
-      maxZoom: 29
-    });
-    initMapbox("voyageMap_auv", {
-      tileKey: "GEBCO_basemap_NCEI",
-      zoom: 4,
-      center: [113, 15],
-      minZoom: 2,
-      maxZoom: 29
-    });
-
-    // this.imageryViewModels = setImageryViewModels(this.CesiumHostAddr)
-    // this.initCesium() // 初始化航次地图
-    // this.initBaiduCesium() // 初始化参航单位地图
   },
   beforeDestroy() {
     // 清理Cesium资源
@@ -160,20 +171,20 @@ export default {
       this.currentTitle = command
       this.removeSingleLineImg()
       if (command === '全部无人航行潜水器') {
-        this.getAuvList()
+        this.getHovList()
-        this.gitAuvDiving()
+        this.gitHovDiving()
-        this.gitAuvUnitYear()
+        this.gitHovUnitYear()
         this.getChartBar({ year: '2025' })
       } else {
-        this.getAuvList({ platform_name: command })
+        this.getHovList({ platform_name: command })
-        this.gitAuvDiving({ platform_name: command })
+        this.gitHovDiving({ platform_name: command })
-        this.gitAuvUnitYear({ platform_name: command })
+        this.gitHovUnitYear({ platform_name: command })
         this.getChartBar({ year: '2025', platform_name: command })
       }
     },
     // 汇总统计数据
-    getAuvList(params = {}) {
+    getHovList(params = {}) {
-      platformAuv(params).then(res => {
+      platformHov(params).then(res => {
         const obj = res.array[0]
         this.numbers[0].value = obj.diving_total
         this.numbers[1].value = obj.driver_member_total
@@ -182,34 +193,13 @@ export default {
       })
     },
     // 下潜单位统计
-    getAuvUnit() {
+    getHovUnit() {
-      auvUnit().then(res => {
+      hovUnit().then(res => {
-        let geojson = {
+        // 清除之前的标记
-          type: "FeatureCollection",
+        this.clearBaiduCesiumMarkers()
-          features: []
-        };
-        res.array.forEach(element => {
-          geojson.features.push({
-            type: "Feature",
-            geometry: {
-              type: "Point",
-              coordinates: [element.unit_lon, element.unit_lat]
-            },
-            properties: {
-              unit_name: element.unit_name,
-              unit_type: element.unit_type,
-              create_time: element.create_time,
-              tsy_id: element.tsy_id
-            }
-          });
-        });
-        loadJsonPointFeature("workUnit", "blue", geojson, "unit_name", "workUnitMap_auv");
 
-        // // 清除之前的标记
+        // 创建参航单位标记
-        // this.clearBaiduCesiumMarkers()
+        this.createBaiduCesiumMarkers(res.array)
-
-        // // 创建参航单位标记
-        // this.createBaiduCesiumMarkers(res.array)
         const typeCount = res.array.reduce((acc, unit) => {
           const type = unit.unit_type
           acc[type] = (acc[type] || 0) + 1 // 如果类型已存在则计数+1，否则初始化为1
@@ -271,17 +261,11 @@ export default {
       }
     },
     // 潜次统计
-    gitAuvDiving(params = {}) {
+    gitHovDiving(params = {}) {
-      auvDiving(params).then(res => {
+      hovDiving(params).then(res => {
-        let i = 0;
-        const colors = ColorGenerator.generateDivergingColors(res.array.length);
         // 添加轨迹图层
         res.array.forEach(item => {
-          // 加载轨迹图层
+          this.addSingleLineImg(item)
-          loadVectorLayer(item.diving_sn, ["line", "symbol"], [colors[i], "#FFFFFF"], "visible", "voyageMap_auv", "dsds");
-          i++;
-
-          // this.addSingleLineImg(item)
         })
       })
     },
@@ -383,8 +367,8 @@ export default {
       }
     },
     // 参潜单位年度
-    gitAuvUnitYear(params = {}) {
+    gitHovUnitYear(params = {}) {
-      auvUnitYear(params).then(res => {
+      hovUnitYear(params).then(res => {
         const originalData = res.array
         const sortedData = originalData.sort((a, b) => a.voyage_year - b.voyage_year)
         this.barData2 = {
@@ -407,7 +391,7 @@ export default {
     },
     // 柱状图数据
     getChartBar(params) {
-      platformAuv(params).then(res => {
+      platformHov(params).then(res => {
         const originalData = res.array
         const sortedData = originalData.sort((a, b) => a.year - b.year)
         this.barData1 = {
@@ -468,29 +452,24 @@ export default {
         flex-direction: column;
         justify-content: center;
         align-items: center;
-
         .value {
           font-size: 56px;
           font-weight: bold;
-
           .unit {
             font-size: 26px;
           }
         }
-
         .label {
           font-size: 18px;
         }
       }
     }
   }
-
   .map-module {
     padding: 50px 50px;
     display: flex;
     justify-content: space-between;
     gap: 50px;
-
     .bezel {
       flex: 1;
       width: 100%;
@@ -508,7 +487,6 @@ export default {
         z-index: 8888;
         font-size: 22px;
       }
-
       .map-year {
         position: absolute;
         top: 20px;
@@ -519,7 +497,6 @@ export default {
       }
     }
   }
-
   .echarts-module {
     padding: 0 50px 50px;
     display: grid;

src/views/statistics/index.vue

@@ -71,7 +71,7 @@
         <el-card
           class="stat-card"
           shadow="hover"
-          @click.native="goToDetail('auv')"
+          @click.native="goToDetail('uuv')"
         >
           <div class="card-content">
             <div class="card-icon">
@@ -79,8 +79,8 @@
             </div>
             <div class="card-info">
               <h3 class="card-title">无人航行潜水器汇总统计</h3>
-              <p class="card-count">{{ auv.length }}艘</p>
+              <p class="card-count">{{ uuv.length }}艘</p>
-              <p class="card-desc"><span v-for="(item, index) in auv" :key="index">{{ item.report_name }}<span v-if="index !== auv.length - 1">、</span></span> </p>
+              <p class="card-desc"><span v-for="(item, index) in uuv" :key="index">{{ item.report_name }}<span v-if="index !== uuv.length - 1">、</span></span> </p>
             </div>
           </div>
         </el-card>
@@ -137,7 +137,7 @@ export default {
       ship: [],
       hov: [],
       rov: [],
-      auv: []
+      uuv: []
     }
   },
   created() {
@@ -152,7 +152,7 @@ export default {
         this.ship = filterDictItems(res.array, '科考船')
         this.hov = filterDictItems(res.array, '载人潜水器')
         this.rov = filterDictItems(res.array, '遥控潜水器')
-        this.auv = filterDictItems(res.array, '无人航行潜水器')
+        this.uuv = filterDictItems(res.array, '无人航行潜水器')
       })
     },
   }