diff --git a/src/views/statistics/RovStatistics.vue b/src/views/statistics/RovStatistics.vue
index ef27558..97b9a2a 100644
--- a/src/views/statistics/RovStatistics.vue
+++ b/src/views/statistics/RovStatistics.vue
@@ -5,11 +5,7 @@
{{ currentTitle }}
全部遥控潜水器
-
+
{{ item.report_name }}
@@ -25,59 +21,34 @@
@@ -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, platformRov, rovUnit, rovUnitYear, rovDiving } 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.getRovList()
+ this.getRovUnit()
+ this.gitRovDiving()
+ this.gitRovUnitYear()
this.getChartBar({ year: '2025' })
},
mounted() {
- this.imageryViewModels = setImageryViewModels(this.CesiumHostAddr)
- this.initCesium() // 初始化航次地图
- this.initBaiduCesium() // 初始化参航单位地图
+ initMapbox("workUnitMap_rov", {
+ tileKey: "gaode",
+ zoom: 3,
+ 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资源
@@ -171,20 +160,20 @@ export default {
this.currentTitle = command
this.removeSingleLineImg()
if (command === '全部遥控潜水器') {
- this.getHovList()
- this.gitHovDiving()
- this.gitHovUnitYear()
+ this.getRovList()
+ this.gitRovDiving()
+ this.gitRovUnitYear()
this.getChartBar({ year: '2025' })
} else {
- this.getHovList({ platform_name: command })
- this.gitHovDiving({ platform_name: command })
- this.gitHovUnitYear({ platform_name: command })
+ this.getRovList({ platform_name: command })
+ this.gitRovDiving({ platform_name: command })
+ this.gitRovUnitYear({ platform_name: command })
this.getChartBar({ year: '2025', platform_name: command })
}
},
// 汇总统计数据
- getHovList(params = {}) {
- platformHov(params).then(res => {
+ getRovList(params = {}) {
+ platformRov(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()
+ getRovUnit() {
+ rovUnit().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_rov");
- // 创建参航单位标记
- 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,17 +271,23 @@ export default {
}
},
// 潜次统计
- gitHovDiving(params = {}) {
- hovDiving(params).then(res => {
+ gitRovDiving(params = {}) {
+ rovDiving(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.baiduCesiumContainer, {
+ this.baiduCesiumViewer = new Cesium.Viewer(this.$refs.workUnitMap_rov, {
sceneMode: Cesium.SceneMode.SCENE2D,
shadows: false,
timeline: false,
@@ -367,8 +383,8 @@ export default {
}
},
// 参潜单位年度
- gitHovUnitYear(params = {}) {
- hovUnitYear(params).then(res => {
+ gitRovUnitYear(params = {}) {
+ rovUnitYear(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 => {
+ platformRov(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;