490 lines
20 KiB
Vue
490 lines
20 KiB
Vue
|
<template>
|
|||
|
|
<div class="statistics">
|
|||
|
|
<div class="banner">
|
|||
|
|
<el-dropdown @command="handleCommand">
|
|||
|
|
<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"
|
|||
|
|
>
|
|||
|
|
{{ item.report_name }}
|
|||
|
|
</el-dropdown-item>
|
|||
|
|
</el-dropdown-menu>
|
|||
|
|
</el-dropdown>
|
|||
|
|
<div class="numbers">
|
|||
|
|
<div v-for="(item, index) in numbers" :key="index" class="item">
|
|||
|
|
<div class="value">{{ item.value }}<span class="unit">{{ item.unit }}</span></div>
|
|||
|
|
<div class="label">{{ item.label }}</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<!-- 地图板块-->
|
|||
|
|
<div class="map-module">
|
|||
|
|
<div class="bezel">
|
|||
|
|
<div class="map-title">下潜单位</div>
|
|||
|
|
<baidu-map
|
|||
|
|
:center="baiduCenter"
|
|||
|
|
:zoom="baiduZoom"
|
|||
|
|
:scroll-wheel-zoom="true"
|
|||
|
|
map-type="BMAP_SATELLITE_MAP"
|
|||
|
|
style="width: 100%; height: 100%"
|
|||
|
|
>
|
|||
|
|
<bm-marker
|
|||
|
|
v-for="(item, index) in baiduMarker"
|
|||
|
|
:key="index"
|
|||
|
|
:position="item.position"
|
|||
|
|
:dragging="true"
|
|||
|
|
:icon="item.icon"
|
|||
|
|
@click="tapBaidu(item, index)"
|
|||
|
|
>
|
|||
|
|
<bm-label
|
|||
|
|
:content="item.content"
|
|||
|
|
:offset="item.offset"
|
|||
|
|
/>
|
|||
|
|
</bm-marker>
|
|||
|
|
</baidu-map>
|
|||
|
|
</div>
|
|||
|
|
<div class="bezel">
|
|||
|
|
<div class="map-title">下潜地图</div>
|
|||
|
|
<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"
|
|||
|
|
chart-type="single"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<div class="bezel">
|
|||
|
|
<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"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<div class="bezel">
|
|||
|
|
<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"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<div class="bezel">
|
|||
|
|
<PieChart
|
|||
|
|
:chart-data="pieData"
|
|||
|
|
title="下潜单位类型"
|
|||
|
|
chart-type="ring"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
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 { filterDictItems } from '../../utils/index'
|
|||
|
|
const Cesium = window.Cesium
|
|||
|
|
|
|||
|
|
export default {
|
|||
|
|
components: {
|
|||
|
|
BarChart,
|
|||
|
|
PieChart
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
currentTitle: '全部无人航行潜水器',
|
|||
|
|
titles: [],
|
|||
|
|
numbers: [
|
|||
|
|
{
|
|||
|
|
label: '潜次数',
|
|||
|
|
value: '',
|
|||
|
|
unit: '次'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: '下潜人数',
|
|||
|
|
value: '',
|
|||
|
|
unit: '人'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: '下潜单位',
|
|||
|
|
value: '',
|
|||
|
|
unit: '家'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: '数据样品个数',
|
|||
|
|
value: '',
|
|||
|
|
unit: '个'
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
baiduCenter: { lng: 114.4040, lat: 30.5196 },
|
|||
|
|
baiduZoom: 5,
|
|||
|
|
baiduMarker: [],
|
|||
|
|
activeMarkerIndex: -1, // 当前激活的标记点索引
|
|||
|
|
viewer: null,
|
|||
|
|
// 地图图层基础地址
|
|||
|
|
CesiumHostAddr: `${window.location.protocol}//${window.location.hostname}:${window.location.port}/`,
|
|||
|
|
trackLineLayers: [],
|
|||
|
|
barData1: {},
|
|||
|
|
barData2: {},
|
|||
|
|
barData3: {},
|
|||
|
|
barData4: {},
|
|||
|
|
barData5: {},
|
|||
|
|
pieData: []
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
created() {
|
|||
|
|
this.getTypeList()
|
|||
|
|
this.getHovList()
|
|||
|
|
this.getHovUnit()
|
|||
|
|
this.gitHovDiving()
|
|||
|
|
this.gitHovUnitYear()
|
|||
|
|
this.getChartBar({ year: '2025' })
|
|||
|
|
},
|
|||
|
|
mounted() {
|
|||
|
|
this.imageryViewModels = setImageryViewModels(this.CesiumHostAddr)
|
|||
|
|
this.initCesium()
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
// 无人航行潜水器数据
|
|||
|
|
getTypeList() {
|
|||
|
|
reportList().then(res => {
|
|||
|
|
this.titles = filterDictItems(res.array, '无人航行潜水器')
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
// 选择无人航行潜水器
|
|||
|
|
handleCommand(command) {
|
|||
|
|
this.currentTitle = command
|
|||
|
|
this.removeSingleLineImg()
|
|||
|
|
if (command === '全部无人航行潜水器') {
|
|||
|
|
this.getHovList()
|
|||
|
|
this.gitHovDiving()
|
|||
|
|
this.gitHovUnitYear()
|
|||
|
|
this.getChartBar({ year: '2025' })
|
|||
|
|
} else {
|
|||
|
|
this.getHovList({ platform_name: command })
|
|||
|
|
this.gitHovDiving({ platform_name: command })
|
|||
|
|
this.gitHovUnitYear({ platform_name: command })
|
|||
|
|
this.getChartBar({ year: '2025', platform_name: command })
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
// 汇总统计数据
|
|||
|
|
getHovList(params = {}) {
|
|||
|
|
platformHov(params).then(res => {
|
|||
|
|
const obj = res.array[0]
|
|||
|
|
this.numbers[0].value = obj.diving_total
|
|||
|
|
this.numbers[1].value = obj.driver_member_total
|
|||
|
|
this.numbers[2].value = obj.unit_total
|
|||
|
|
this.numbers[3].value = obj.dataset_total
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
// 下潜单位统计
|
|||
|
|
getHovUnit() {
|
|||
|
|
hovUnit().then(res => {
|
|||
|
|
this.baiduMarker = res.array.map(item => {
|
|||
|
|
return {
|
|||
|
|
position: {
|
|||
|
|
lng: item.unit_lon,
|
|||
|
|
lat: item.unit_lat
|
|||
|
|
},
|
|||
|
|
content: item.unit_name,
|
|||
|
|
offset: { width: 16, height: 32 },
|
|||
|
|
icon: {
|
|||
|
|
url: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAE9klEQVR4AZxXXWgcVRT+zkwaBS0mu1FpSyHFbKoIQjFoRSh5EX8QbYVKq4I+hLa7qRWCf32QRoh/gfqSzcYQiyDUlgZFffHnoRGhQsFQwWLYbKx9kFokuwkRSrHZuf3OzOzuTGaS3c3lfnPO/c65Z76Zu3Nn1kIT7Y6Jy9sSuUJfe64wRZsnlnzkfa5Pc5ooiYYEdOTmHkzkZsftGzcusfiEAL0AuomNPrp9bkJzNFfnMFa31xWQzBWOOjC/AnIAXrtK870IPjTi7FeorxyhMRo5oHOSnMvBmn1NAYnR/KAB3q9VkKFSJrWJeLKYTh1dSG8/rVBfOWITIEPwm87VGv4w1qwqIJEr7IVYx/xZ05a9YXMp0/WOP17VaI7mMmGagNZwayG+xQpIjv/1MNPPEOBVfF7KpHrmD3b+o+NGoLk6R+f6+Wf8mv6wZmIFGKf8mpsi+Hshk3rZ9ddxcOeyhk6t1tRBABEB7dn8UzBmv5/T59uQSY7lH+JtPZ7IzX3poXBcuVBSbeDVYE23do13vYgAse3dGjEG35TSqR/UDyKZze8xRr4jNwCY5zxgQDmNkQ91rWFYS8lKbfUriAjg1e9xg4I/XBs4tI3NdBrL/hiQBID/mHvKhfrkNKY5jIV7pZYxXu1ANCRgY3YmyVgHwQuzfndt4GCZFv42TCepi9zCdpb6u19QqO9yMJ1eDkfBbqq1OvxzVKMhAS0GmysR28B7jCqEZ3UHpDg5VzqUqt4h1zdyzkuBl4NaC9YKnkMzQgJ4C20lFSLXr6gNgmu5RcfGKv+kNogKV8kJxhzH8XdIwLY3tAZjIQGL/d2/MbhIoIxbHlAbhAi+1bEYK/JoVrhKjuZVsQGPVPxWe3Gm4qsNCVDCAD+7ViQiAIJJjRFPtPON2DZS6FWorxyBQA6qzXFcAQJcuHKw51qVpxMRIMa5QJ7dPM5DqOsjReIEwfOg17IxpRCgsu4n/BwEm4j1jI65PGfVBhERANtyt2CB2a1XF0xWn1tsH094mL7+SBdoFdPKaYzjUE9kZx/jXd3hkctfebZ2jAhwf9HwbrXVIpG11qnFTGqUJ+shEj56lNNYBJY873NnS/33/eL7VRMR4Ee8tTbmlbi74OfUNW3Z2V1M8rZi4BT9SI8VwKuahHg/RrFxLDKrQcKyRJcKWos1P0VMixXg5jl4Ty3XtrfeR4XmrUQyW3iW3F4CMMi6NuawqoBSf+pH5nPf55EfJk0txeBUi7HwNmfyVcGXWiY1qX4cVhWgycvX/9e7cFH9ZpYiedcWPflOzrtmO+XqJxrHkb6mgKWB+0tGREVwGdHQUrSNFXbweVcBOmdo/tV7+UEbOW+VWFOAZi2ku07TfkYAXIqOXMHdVBDT7hz993bLYAQit1HEFB/ND2LSQlRdAZq93Hrr67TnCfBzezgxOrdV/ZUoy+IEuUcBuWrb1ptooDUkYKlva0kco98CJUC2Q5xhrGiJ3Bw52ac0n5z0/KF71rz1mqdoSIAmFg93n+fv4Yj6gOxrH52tXiFPzj8t5g2wcQs/Usx0fU23od6wAK22kE6dhGAQbCLyUfvYn0+3fXJpFx/0cbCRGy5mukfoNtybEqBV+bZ7VwxOqs8357hVLvsvL3xRTHe9pXwzaFqAFi/2p14C5DLATzjB3aBfzKRexDraugToeUqZrm20+kqe9n0Oo70ecxMAAP//0tEICQAAAAZJREFUAwDQYMDuVKkB5gAAAABJRU5ErkJggg==',
|
|||
|
|
size: { width: 32, height: 32 }
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
const typeCount = res.array.reduce((acc, unit) => {
|
|||
|
|
const type = unit.unit_type
|
|||
|
|
acc[type] = (acc[type] || 0) + 1 // 如果类型已存在则计数+1，否则初始化为1
|
|||
|
|
return acc
|
|||
|
|
}, {})
|
|||
|
|
this.pieData = Object.entries(typeCount).map(([type, count]) => ({
|
|||
|
|
name: type,
|
|||
|
|
value: count
|
|||
|
|
}))
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
// 潜次统计
|
|||
|
|
gitHovDiving(params = {}) {
|
|||
|
|
hovDiving(params).then(res => {
|
|||
|
|
// 添加轨迹图层
|
|||
|
|
res.array.forEach(item => {
|
|||
|
|
this.addSingleLineImg(item)
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
tapBaidu(item, index) {
|
|||
|
|
// 重置所有标记点为普通图标
|
|||
|
|
this.baiduMarker.forEach(marker => {
|
|||
|
|
marker.icon.url = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAE9klEQVR4AZxXXWgcVRT+zkwaBS0mu1FpSyHFbKoIQjFoRSh5EX8QbYVKq4I+hLa7qRWCf32QRoh/gfqSzcYQiyDUlgZFffHnoRGhQsFQwWLYbKx9kFokuwkRSrHZuf3OzOzuTGaS3c3lfnPO/c65Z76Zu3Nn1kIT7Y6Jy9sSuUJfe64wRZsnlnzkfa5Pc5ooiYYEdOTmHkzkZsftGzcusfiEAL0AuomNPrp9bkJzNFfnMFa31xWQzBWOOjC/AnIAXrtK870IPjTi7FeorxyhMRo5oHOSnMvBmn1NAYnR/KAB3q9VkKFSJrWJeLKYTh1dSG8/rVBfOWITIEPwm87VGv4w1qwqIJEr7IVYx/xZ05a9YXMp0/WOP17VaI7mMmGagNZwayG+xQpIjv/1MNPPEOBVfF7KpHrmD3b+o+NGoLk6R+f6+Wf8mv6wZmIFGKf8mpsi+Hshk3rZ9ddxcOeyhk6t1tRBABEB7dn8UzBmv5/T59uQSY7lH+JtPZ7IzX3poXBcuVBSbeDVYE23do13vYgAse3dGjEG35TSqR/UDyKZze8xRr4jNwCY5zxgQDmNkQ91rWFYS8lKbfUriAjg1e9xg4I/XBs4tI3NdBrL/hiQBID/mHvKhfrkNKY5jIV7pZYxXu1ANCRgY3YmyVgHwQuzfndt4GCZFv42TCepi9zCdpb6u19QqO9yMJ1eDkfBbqq1OvxzVKMhAS0GmysR28B7jCqEZ3UHpDg5VzqUqt4h1zdyzkuBl4NaC9YKnkMzQgJ4C20lFSLXr6gNgmu5RcfGKv+kNogKV8kJxhzH8XdIwLY3tAZjIQGL/d2/MbhIoIxbHlAbhAi+1bEYK/JoVrhKjuZVsQGPVPxWe3Gm4qsNCVDCAD+7ViQiAIJJjRFPtPON2DZS6FWorxyBQA6qzXFcAQJcuHKw51qVpxMRIMa5QJ7dPM5DqOsjReIEwfOg17IxpRCgsu4n/BwEm4j1jI65PGfVBhERANtyt2CB2a1XF0xWn1tsH094mL7+SBdoFdPKaYzjUE9kZx/jXd3hkctfebZ2jAhwf9HwbrXVIpG11qnFTGqUJ+shEj56lNNYBJY873NnS/33/eL7VRMR4Ee8tTbmlbi74OfUNW3Z2V1M8rZi4BT9SI8VwKuahHg/RrFxLDKrQcKyRJcKWos1P0VMixXg5jl4Ty3XtrfeR4XmrUQyW3iW3F4CMMi6NuawqoBSf+pH5nPf55EfJk0txeBUi7HwNmfyVcGXWiY1qX4cVhWgycvX/9e7cFH9ZpYiedcWPflOzrtmO+XqJxrHkb6mgKWB+0tGREVwGdHQUrSNFXbweVcBOmdo/tV7+UEbOW+VWFOAZi2ku07TfkYAXIqOXMHdVBDT7hz993bLYAQit1HEFB/ND2LSQlRdAZq93Hrr67TnCfBzezgxOrdV/ZUoy+IEuUcBuWrb1ptooDUkYKlva0kco98CJUC2Q5xhrGiJ3Bw52ac0n5z0/KF71rz1mqdoSIAmFg93n+fv4Yj6gOxrH52tXiFPzj8t5g2wcQs/Usx0fU23od6wAK22kE6dhGAQbCLyUfvYn0+3fXJpFx/0cbCRGy5mukfoNtybEqBV+bZ7VwxOqs8357hVLvsvL3xRTHe9pXwzaFqAFi/2p14C5DLATzjB3aBfzKRexDraugToeUqZrm20+kqe9n0Oo70ecxMAAP//0tEICQAAAAZJREFUAwDQYMDuVKkB5gAAAABJRU5ErkJggg=='
|
|||
|
|
marker.icon.size = { width: 32, height: 32 }
|
|||
|
|
marker.offset = { width: 16, height: 32 }
|
|||
|
|
})
|
|||
|
|
// 设置当前点击的标记点为高亮图标
|
|||
|
|
this.baiduMarker[index].icon.url = 'data:image/png;base64,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'
|
|||
|
|
this.baiduMarker[index].icon.size = { width: 48, height: 48 } // 高亮时稍大一些
|
|||
|
|
this.baiduMarker[index].offset = { width: 24, height: 48 } // 高亮时稍大一些
|
|||
|
|
// 记录当前激活的标记点索引
|
|||
|
|
this.activeMarkerIndex = index
|
|||
|
|
},
|
|||
|
|
// 初始化cesium
|
|||
|
|
initCesium() {
|
|||
|
|
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJkY2Y5NWY2Ni1mODQ1LTQ3YTUtYjc4Zi1jYzhjMGI2YzcxMWYiLCJpZCI6MTI5ODMwLCJpYXQiOjE2Nzk0Njk5NTd9.DTH54ioOH-HLqeNIetBe9hFyrPOX2Vp1AQmZzw8TIZ4'
|
|||
|
|
this.viewer = new Cesium.Viewer('cesiumContainer', {
|
|||
|
|
sceneMode: Cesium.SceneMode.SCENE2D,
|
|||
|
|
shadows: false,
|
|||
|
|
timeline: false,
|
|||
|
|
baseLayerPicker: false,
|
|||
|
|
// 设置自定义底图
|
|||
|
|
imageryProviderViewModels: this.imageryViewModels,
|
|||
|
|
// 关闭默认的地形底图
|
|||
|
|
terrainProviderViewModels: [],
|
|||
|
|
fullscreenButton: false,
|
|||
|
|
selectionIndicator: false,
|
|||
|
|
homeButton: false,
|
|||
|
|
sceneModePicker: false,
|
|||
|
|
animation: false,
|
|||
|
|
infoBox: false,
|
|||
|
|
geocoder: false,
|
|||
|
|
navigationHelpButton: false
|
|||
|
|
})
|
|||
|
|
this.viewer._cesiumWidget._creditContainer.style.display = 'none'
|
|||
|
|
this.viewer.scene.sun.show = false
|
|||
|
|
this.viewer.scene.moon.show = false
|
|||
|
|
this.viewer.scene.fog.enabled = false
|
|||
|
|
this.viewer.scene.skyAtmosphere.show = false
|
|||
|
|
this.viewer.scene.sun.show = false
|
|||
|
|
this.viewer.scene.skyBox.show = false
|
|||
|
|
this.viewer.scene.globe.enableLighting = false
|
|||
|
|
this.viewer.shadowMap.darkness = 0.8
|
|||
|
|
this.viewer.scene._sunBloom = false
|
|||
|
|
this.viewer.scene.globe.showGroundAtmosphere = false
|
|||
|
|
this.viewer.scene.postProcessStages.fxaa.enabled = true
|
|||
|
|
|
|||
|
|
this.viewer.camera.setView({
|
|||
|
|
// 指定相机初始位置
|
|||
|
|
destination: Cesium.Cartesian3.fromDegrees(112, 18, 4000000)
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
// 添加轨迹图层
|
|||
|
|
addSingleLineImg(item) {
|
|||
|
|
const trackLine = new Cesium.WebMapTileServiceImageryProvider(
|
|||
|
|
{
|
|||
|
|
url: `${this.CesiumHostAddr}geoserver/gwc/service/wmts/rest/dsds:${item.diving_sn}/{TileMatrixSet}/{TileMatrixSet}:{TileMatrix}/{TileRow}/{TileCol}?format=image/png`,
|
|||
|
|
layer: `dsds:${item.diving_sn}`,
|
|||
|
|
style: 'default',
|
|||
|
|
format: 'image/png',
|
|||
|
|
tileMatrixSetID: 'EPSG:4326',
|
|||
|
|
tilingScheme: new Cesium.GeographicTilingScheme()
|
|||
|
|
}
|
|||
|
|
)
|
|||
|
|
const trackLineLayer = this.viewer.imageryLayers.addImageryProvider(trackLine)
|
|||
|
|
this.trackLineLayers.push(trackLineLayer)
|
|||
|
|
},
|
|||
|
|
// 移除轨迹图层
|
|||
|
|
removeSingleLineImg() {
|
|||
|
|
if (this.trackLineLayers.length) {
|
|||
|
|
this.trackLineLayers.forEach(line => {
|
|||
|
|
this.viewer.imageryLayers.remove(line)
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
// 参潜单位年度
|
|||
|
|
gitHovUnitYear(params = {}) {
|
|||
|
|
hovUnitYear(params).then(res => {
|
|||
|
|
const originalData = res.array
|
|||
|
|
const sortedData = originalData.sort((a, b) => a.voyage_year - b.voyage_year)
|
|||
|
|
this.barData2 = {
|
|||
|
|
title: '年度参潜单位',
|
|||
|
|
salesData: [
|
|||
|
|
{
|
|||
|
|
name: '参潜单位',
|
|||
|
|
data: sortedData.map(item => item.unit_total),
|
|||
|
|
stack: '新增单位数'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '新增单位',
|
|||
|
|
data: sortedData.map(item => item.year_unit_total),
|
|||
|
|
stack: '新增单位数'
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
productCategories: sortedData.map(item => item.voyage_year.toString())
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
// 柱状图数据
|
|||
|
|
getChartBar(params) {
|
|||
|
|
platformHov(params).then(res => {
|
|||
|
|
const originalData = res.array
|
|||
|
|
const sortedData = originalData.sort((a, b) => a.year - b.year)
|
|||
|
|
this.barData1 = {
|
|||
|
|
title: '年度潜次数',
|
|||
|
|
salesData: sortedData.map(item => item.diving_total),
|
|||
|
|
productCategories: sortedData.map(item => item.year.toString())
|
|||
|
|
}
|
|||
|
|
this.barData3 = {
|
|||
|
|
title: '样品集个数',
|
|||
|
|
salesData: sortedData.map(item => item.dataset_total),
|
|||
|
|
productCategories: sortedData.map(item => item.year.toString())
|
|||
|
|
}
|
|||
|
|
this.barData4 = {
|
|||
|
|
title: '水中时间',
|
|||
|
|
salesData: sortedData.map(item => item.water_total),
|
|||
|
|
productCategories: sortedData.map(item => item.year.toString())
|
|||
|
|
}
|
|||
|
|
this.barData5 = {
|
|||
|
|
title: '水中作业时间',
|
|||
|
|
salesData: sortedData.map(item => item.job_total),
|
|||
|
|
productCategories: sortedData.map(item => item.year.toString())
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped lang="scss">
|
|||
|
|
.statistics {
|
|||
|
|
background-color: #ebf1f7;
|
|||
|
|
|
|||
|
|
.banner {
|
|||
|
|
background-image: url(../../../static/images/bannerny1.jpg);
|
|||
|
|
width: 100%;
|
|||
|
|
height: 480px;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
color: #fff;
|
|||
|
|
|
|||
|
|
.titles {
|
|||
|
|
margin-bottom: 40px;
|
|||
|
|
font-size: 56px;
|
|||
|
|
color: #fff;
|
|||
|
|
font-weight: bold;
|
|||
|
|
cursor: pointer;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.numbers {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
gap: 80px;
|
|||
|
|
|
|||
|
|
.item {
|
|||
|
|
display: flex;
|
|||
|
|
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%;
|
|||
|
|
height: 520px;
|
|||
|
|
border-radius: 10px;
|
|||
|
|
overflow: hidden;
|
|||
|
|
border: 1px solid #ccc;
|
|||
|
|
position: relative;
|
|||
|
|
|
|||
|
|
.map-title {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 20px;
|
|||
|
|
left: 20px;
|
|||
|
|
color: white;
|
|||
|
|
z-index: 8888;
|
|||
|
|
font-size: 22px;
|
|||
|
|
}
|
|||
|
|
.map-year {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 20px;
|
|||
|
|
right: 20px;
|
|||
|
|
color: white;
|
|||
|
|
z-index: 8888;
|
|||
|
|
width: 100px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.echarts-module {
|
|||
|
|
padding: 0 50px 50px;
|
|||
|
|
display: grid;
|
|||
|
|
grid-template-columns: repeat(3, 1fr);
|
|||
|
|
gap: 50px;
|
|||
|
|
grid-auto-rows: 300px;
|
|||
|
|
|
|||
|
|
.bezel {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
border-radius: 10px;
|
|||
|
|
overflow: hidden;
|
|||
|
|
border: 1px solid #ccc;
|
|||
|
|
position: relative;
|
|||
|
|
|
|||
|
|
.map-title {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 20px;
|
|||
|
|
left: 20px;
|
|||
|
|
color: white;
|
|||
|
|
z-index: 8888;
|
|||
|
|
font-size: 22px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
|
|||
|
|
<style>
|
|||
|
|
/* 隐藏百度地图Logo和版权信息 */
|
|||
|
|
.anchorBL {
|
|||
|
|
display: none !important;
|
|||
|
|
}
|
|||
|
|
.BMap_cpyCtrl {
|
|||
|
|
display: none !important;
|
|||
|
|
}
|
|||
|
|
.el-icon-arrow-down {
|
|||
|
|
font-size: 12px
|
|||
|
|
}
|
|||
|
|
</style>
|