From 50a31237529352d12880455127eb8a2b2fb9a4ba Mon Sep 17 00:00:00 2001 From: hym Date: Thu, 2 Apr 2026 14:25:50 +0800 Subject: [PATCH] =?UTF-8?q?UuvStatistics=20=E6=9B=B4=E6=94=B9=E4=B8=BA=20A?= =?UTF-8?q?uvStatistics=EF=BC=8C=E6=9B=B4=E6=96=B0=E8=B7=AF=E7=94=B1?= =?UTF-8?q?=E5=9C=B0=E5=9D=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/router/index.js | 6 +- .../{UuvStatistics.vue => AuvStatistics.vue} | 159 ++++++++++-------- src/views/statistics/index.vue | 10 +- 3 files changed, 99 insertions(+), 76 deletions(-) rename src/views/statistics/{UuvStatistics.vue => AuvStatistics.vue} (78%) diff --git a/src/router/index.js b/src/router/index.js index 273c7dc..bacc661 100644 --- a/src/router/index.js +++ b/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', diff --git a/src/views/statistics/UuvStatistics.vue b/src/views/statistics/AuvStatistics.vue similarity index 78% rename from src/views/statistics/UuvStatistics.vue rename to src/views/statistics/AuvStatistics.vue index 26bd797..fd50320 100644 --- a/src/views/statistics/UuvStatistics.vue +++ b/src/views/statistics/AuvStatistics.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, 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; diff --git a/src/views/statistics/index.vue b/src/views/statistics/index.vue index da79f8b..813fbb8 100644 --- a/src/views/statistics/index.vue +++ b/src/views/statistics/index.vue @@ -71,7 +71,7 @@
@@ -79,8 +79,8 @@

无人航行潜水器汇总统计

-

{{ uuv.length }}艘

-

{{ item.report_name }}、

+

{{ auv.length }}艘

+

{{ item.report_name }}、

@@ -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, '无人航行潜水器') }) }, }