更新 rov 统计页面相关逻辑
This commit is contained in:
parent
124b943e7b
commit
bb39307b8a
|
|
@ -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_rov" ref="workUnitMap_rov" 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_rov" ref="voyageMap_rov" 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, 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;
|
||||
|
|
|
|||
Loading…
Reference in New Issue