更新船舶统计页面相关逻辑

src/views/statistics/ShipStatistics.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
+          <el-dropdown-item v-for="item in titles" :key="item.tsy_id" :command="item.report_name">
-            v-for="item in titles"
-            :key="item.tsy_id"
-            :command="item.report_name"
-          >
             {{ item.report_name }}
           </el-dropdown-item>
         </el-dropdown-menu>
@@ -25,72 +21,49 @@
     <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_ship" ref="workUnitMap_ship" style="height: 100%;width:100%;" />
       </div>
       <div class="bezel">
         <div class="map-title">航次地图</div>
-        <el-date-picker
+        <el-date-picker v-model="voyageYear" type="year" size="mini" placeholder="选择年" class="map-year" format="yyyy"
-          v-model="voyageYear"
+          @change="selectVoyageYear" />
-          type="year"
+        <div id="voyageMap_ship" ref="voyageMap_ship" style="height: 100%;width:100%;" />
-          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
+        <BarChart :title="barData1.title" :chart-data="barData1.salesData" :categories="barData1.productCategories"
-          :title="barData1.title"
+          chart-type="single" />
-          :chart-data="barData1.salesData"
-          :categories="barData1.productCategories"
-          chart-type="single"
-        />
       </div>
       <div class="bezel">
-        <BarChart
+        <BarChart :title="barData2.title" :chart-data="barData2.salesData" :categories="barData2.productCategories"
-          :title="barData2.title"
+          chart-type="stacked" stack-name="新增单位数" />
-          :chart-data="barData2.salesData"
-          :categories="barData2.productCategories"
-          chart-type="stacked"
-          stack-name="新增单位数"
-        />
       </div>
       <div class="bezel">
-        <BarChart
+        <BarChart :title="barData3.title" :chart-data="barData3.salesData" :categories="barData3.productCategories" />
-          :title="barData3.title"
-          :chart-data="barData3.salesData"
-          :categories="barData3.productCategories"
-        />
       </div>
       <div class="bezel">
-        <BarChart
+        <BarChart :title="barData4.title" :chart-data="barData4.salesData" :categories="barData4.productCategories" />
-          :title="barData4.title"
-          :chart-data="barData4.salesData"
-          :categories="barData4.productCategories"
-        />
       </div>
       <div class="bezel">
-        <PieChart
+        <PieChart :chart-data="pieData" title="参航单位类型" chart-type="ring" />
-          :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 {
@@ -153,9 +126,23 @@ export default {
     this.getChartBar({ year: '2025' })
   },
   mounted() {
-    this.imageryViewModels = setImageryViewModels(this.CesiumHostAddr)
+    initMapbox("workUnitMap_ship", {
-    this.initCesium() // 初始化航次地图
+      tileKey: "gaode",
-    this.initBaiduCesium() // 初始化参航单位地图
+      zoom: 3,
+      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资源
@@ -203,11 +190,31 @@ export default {
     // 参航单位统计
     getShipUnit() {
       shipUnit().then(res => {
-        // 清除之前的标记
+        let geojson = {
-        this.clearBaiduCesiumMarkers()
+          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_ship");
 
-        // 创建参航单位标记
+        // // 清除之前的标记
-        this.createBaiduCesiumMarkers(res.array)
+        // this.clearBaiduCesiumMarkers()
+        // // 创建参航单位标记
+        // this.createBaiduCesiumMarkers(res.array)
 
         const typeCount = res.array.reduce((acc, unit) => {
           const type = unit.unit_type
@@ -272,15 +279,22 @@ 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.baiduCesiumContainer, {
+      this.baiduCesiumViewer = new Cesium.Viewer(this.$refs.workUnitMap_ship, {
         sceneMode: Cesium.SceneMode.SCENE2D,
         shadows: false,
         timeline: false,
@@ -316,7 +330,7 @@ export default {
     // 初始化cesium
     initCesium() {
       Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJkY2Y5NWY2Ni1mODQ1LTQ3YTUtYjc4Zi1jYzhjMGI2YzcxMWYiLCJpZCI6MTI5ODMwLCJpYXQiOjE2Nzk0Njk5NTd9.DTH54ioOH-HLqeNIetBe9hFyrPOX2Vp1AQmZzw8TIZ4'
-      this.viewer = new Cesium.Viewer('cesiumContainer', {
+      this.viewer = new Cesium.Viewer('voyageMap_ship', {
         sceneMode: Cesium.SceneMode.SCENE2D,
         shadows: false,
         timeline: false,
@@ -468,24 +482,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%;
@@ -503,6 +522,7 @@ export default {
         z-index: 8888;
         font-size: 22px;
       }
+
       .map-year {
         position: absolute;
         top: 20px;
@@ -513,6 +533,7 @@ export default {
       }
     }
   }
+
   .echarts-module {
     padding: 0 50px 50px;
     display: grid;