UuvStatistics 更改为 AuvStatistics，更新路由地址

src/router/index.js

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

src/views/statistics/AuvStatistics.vue

@@ -5,11 +5,7 @@
         <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>
@@ -25,59 +21,34 @@
     <div class="map-module">
       <div class="bezel">
         <div class="map-title">下潜单位</div>
-        <div id="baiduCesiumContainer" ref="baiduCesiumContainer" style="height: 100%;width:100%;" />
+        <div id="workUnitMap_auv" ref="workUnitMap_auv" style="height: 100%;width:100%;" />
       </div>
       <div class="bezel">
         <div class="map-title">下潜地图</div>
-        <div id="cesiumContainer" ref="cesiumContainer" style="height: 100%;width:100%;" />
+        <div id="voyageMap_auv" ref="voyageMap_auv" 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"
-          chart-type="single"
-        />
+        <BarChart :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"
-          chart-type="stacked"
-          stack-name="新增单位数"
-        />
+        <BarChart :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>
@@ -87,8 +58,11 @@
 import BarChart from './components/BarChart.vue'
 import PieChart from './components/PieChart.vue'
 import { setImageryViewModels } from '../../utils/common'
-import { reportList, platformHov, hovUnit, hovUnitYear, hovDiving } from '../../api/statistics'
+import { reportList, platformAuv, auvUnit, auvUnitYear, auvDiving } 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 {
@@ -139,16 +113,31 @@ export default {
   },
   created() {
     this.getTypeList()
-    this.getHovList()
-    this.getHovUnit()
-    this.gitHovDiving()
-    this.gitHovUnitYear()
+    this.getAuvList()
+    this.getAuvUnit()
+    this.gitAuvDiving()
+    this.gitAuvUnitYear()
     this.getChartBar({ year: '2025' })
   },
   mounted() {
-    this.imageryViewModels = setImageryViewModels(this.CesiumHostAddr)
-    this.initCesium() // 初始化航次地图
-    this.initBaiduCesium() // 初始化参航单位地图
+    initMapbox("workUnitMap_auv", {
+      tileKey: "gaode",
+      zoom: 3,
+      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资源
@@ -171,20 +160,20 @@ export default {
       this.currentTitle = command
       this.removeSingleLineImg()
       if (command === '全部无人航行潜水器') {
-        this.getHovList()
-        this.gitHovDiving()
-        this.gitHovUnitYear()
+        this.getAuvList()
+        this.gitAuvDiving()
+        this.gitAuvUnitYear()
         this.getChartBar({ year: '2025' })
       } else {
-        this.getHovList({ platform_name: command })
-        this.gitHovDiving({ platform_name: command })
-        this.gitHovUnitYear({ platform_name: command })
+        this.getAuvList({ platform_name: command })
+        this.gitAuvDiving({ platform_name: command })
+        this.gitAuvUnitYear({ platform_name: command })
         this.getChartBar({ year: '2025', platform_name: command })
       }
     },
     // 汇总统计数据
-    getHovList(params = {}) {
-      platformHov(params).then(res => {
+    getAuvList(params = {}) {
+      platformAuv(params).then(res => {
         const obj = res.array[0]
         this.numbers[0].value = obj.diving_total
         this.numbers[1].value = obj.driver_member_total
@@ -193,13 +182,34 @@ export default {
       })
     },
     // 下潜单位统计
-    getHovUnit() {
-      hovUnit().then(res => {
-        // 清除之前的标记
-        this.clearBaiduCesiumMarkers()
+    getAuvUnit() {
+      auvUnit().then(res => {
+        let geojson = {
+          type: "FeatureCollection",
+          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.createBaiduCesiumMarkers(res.array)
+        // // 清除之前的标记
+        // this.clearBaiduCesiumMarkers()
+
+        // // 创建参航单位标记
+        // this.createBaiduCesiumMarkers(res.array)
         const typeCount = res.array.reduce((acc, unit) => {
           const type = unit.unit_type
           acc[type] = (acc[type] || 0) + 1 // 如果类型已存在则计数+1，否则初始化为1
@@ -261,11 +271,17 @@ export default {
       }
     },
     // 潜次统计
-    gitHovDiving(params = {}) {
-      hovDiving(params).then(res => {
+    gitAuvDiving(params = {}) {
+      auvDiving(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)
         })
       })
     },
@@ -367,8 +383,8 @@ export default {
       }
     },
     // 参潜单位年度
-    gitHovUnitYear(params = {}) {
-      hovUnitYear(params).then(res => {
+    gitAuvUnitYear(params = {}) {
+      auvUnitYear(params).then(res => {
         const originalData = res.array
         const sortedData = originalData.sort((a, b) => a.voyage_year - b.voyage_year)
         this.barData2 = {
@@ -391,7 +407,7 @@ export default {
     },
     // 柱状图数据
     getChartBar(params) {
-      platformHov(params).then(res => {
+      platformAuv(params).then(res => {
         const originalData = res.array
         const sortedData = originalData.sort((a, b) => a.year - b.year)
         this.barData1 = {
@@ -452,24 +468,29 @@ 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%;
@@ -487,6 +508,7 @@ export default {
         z-index: 8888;
         font-size: 22px;
       }
+
       .map-year {
         position: absolute;
         top: 20px;
@@ -497,6 +519,7 @@ 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('uuv')"
+          @click.native="goToDetail('auv')"
         >
           <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">{{ uuv.length }}艘</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>
+              <p class="card-count">{{ auv.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>
             </div>
           </div>
         </el-card>
@@ -137,7 +137,7 @@ export default {
       ship: [],
       hov: [],
       rov: [],
-      uuv: []
+      auv: []
     }
   },
   created() {
@@ -152,7 +152,7 @@ export default {
         this.ship = filterDictItems(res.array, '科考船')
         this.hov = filterDictItems(res.array, '载人潜水器')
         this.rov = filterDictItems(res.array, '遥控潜水器')
-        this.uuv = filterDictItems(res.array, '无人航行潜水器')
+        this.auv = filterDictItems(res.array, '无人航行潜水器')
       })
     },
   }