banner背景图片调整

src/views/statistics/AuvStatistics.vue

@@ -467,10 +467,11 @@ 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: 100% 100%;
+    background-size: contain;
     width: 100%;
     height: 480px;
     display: flex;

src/views/statistics/HovStatistics.vue

@@ -489,10 +489,11 @@ 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: 100% 100%;
+    background-size: contain;
     width: 100%;
     height: 480px;
     display: flex;

src/views/statistics/RovStatistics.vue

@@ -467,10 +467,11 @@ 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: 100% 100%;
+    background-size: contain;
     width: 100%;
     height: 480px;
     display: flex;

src/views/statistics/ShipStatistics.vue

@@ -44,7 +44,7 @@
     <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>
@@ -61,14 +61,18 @@
             @change="selectVoyageYear"
           />
         </div>
-        <div id="voyageMap_ship" ref="voyageMap_ship" 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
@@ -88,29 +92,36 @@
         />
       </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 {
@@ -169,29 +180,18 @@ export default {
   created() {
     this.getTypeList()
     this.getShipList()
-    this.getShipUnit()
-    this.gitShipVoyage()
     this.gitShipUnitYear()
     this.getChartBar({ year: '2025' })
   },
   mounted() {
-    initMapbox("workUnitMap_ship", {
+    this.imageryViewModels = setImageryViewModels(this.CesiumHostAddr)
-      tileKey: "gaode",
+    this.initCesium() // 初始化航次地图
-      zoom: 3,
+    this.initBaiduCesium() // 初始化参航单位地图
-      center: [110, 31],
+    // 依赖 Cesium Viewer 的接口须在地图就绪后调用（created 阶段 viewer 尚未创建）
-      minZoom: 2,
+    this.$nextTick(() => {
-      maxZoom: 29
+      this.getShipUnit()
-    });
+      this.gitShipVoyage()
-    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资源
@@ -239,31 +239,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
@@ -328,22 +308,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,
@@ -379,7 +352,7 @@ export default {
     // 初始化cesium
     initCesium() {
       Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJkY2Y5NWY2Ni1mODQ1LTQ3YTUtYjc4Zi1jYzhjMGI2YzcxMWYiLCJpZCI6MTI5ODMwLCJpYXQiOjE2Nzk0Njk5NTd9.DTH54ioOH-HLqeNIetBe9hFyrPOX2Vp1AQmZzw8TIZ4'
-      this.viewer = new Cesium.Viewer(this.$refs.voyageMap_ship, {
+      this.viewer = new Cesium.Viewer('cesiumContainer', {
         sceneMode: Cesium.SceneMode.SCENE2D,
         shadows: false,
         timeline: false,
@@ -509,10 +482,11 @@ 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: 100% 100%;
+    background-size: contain;
     width: 100%;
     height: 480px;
     display: flex;
@@ -596,29 +570,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%;
@@ -711,7 +680,6 @@ export default {
       }
     }
   }
-
   .echarts-module {
     padding: 0 50px 50px;
     display: grid;

src/views/statistics/UuvMemberStatistics.vue

@@ -266,10 +266,11 @@ 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: 100% 100%;
+    background-size: contain;
     width: 100%;
     height: 480px;
     display: flex;

src/views/statistics/UuvUnitStatistics.vue

@@ -440,10 +440,11 @@ 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: 100% 100%;
+    background-size: contain;
     width: 100%;
     height: 480px;
     display: flex;