882 lines
26 KiB
Vue
882 lines
26 KiB
Vue
<template>
|
||
<div class="statistics">
|
||
<div class="banner">
|
||
<div class="banner-select-text banner-static-title">{{ currentTitle }}</div>
|
||
<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="unit-toolbar">
|
||
<div class="unit-toolbar-inner">
|
||
<div class="unit-filter-box">
|
||
<span class="banner-unit-label">统计单位</span>
|
||
<el-select
|
||
v-model="selectedUnits"
|
||
class="banner-unit-select"
|
||
multiple
|
||
filterable
|
||
clearable
|
||
size="small"
|
||
placeholder="请选择单位（不选表示全部）"
|
||
value-key="unit_name"
|
||
collapse-tags
|
||
@change="onBannerUnitsChange"
|
||
>
|
||
<el-option
|
||
v-for="unit in unitOptions"
|
||
:key="unit.unit_id || unit.unit_name"
|
||
:label="unit.unit_name"
|
||
:value="unit"
|
||
/>
|
||
</el-select>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 地图板块-->
|
||
<div class="map-module">
|
||
<div class="bezel">
|
||
<div class="map-title">参航单位</div>
|
||
<div id="baiduCesiumContainer" ref="baiduCesiumContainer" style="height: 100%;width:100%;" />
|
||
</div>
|
||
<div class="bezel">
|
||
<div class="map-title">航次地图</div>
|
||
<div class="map-year-panel">
|
||
<span class="map-year-label">年份</span>
|
||
<el-date-picker
|
||
v-model="voyageYear"
|
||
type="year"
|
||
size="small"
|
||
placeholder="全部"
|
||
class="map-year"
|
||
clearable
|
||
format="yyyy"
|
||
@change="selectVoyageYear"
|
||
/>
|
||
</div>
|
||
<div id="cesiumContainer" ref="cesiumContainer" style="height: 100%;width:100%;" />
|
||
</div>
|
||
</div>
|
||
<!-- echarts板块-->
|
||
<div class="echarts-module">
|
||
<div class="bezel">
|
||
<BarChart
|
||
:title="barVoyageCount.title"
|
||
:chart-data="barVoyageCount.salesData"
|
||
:categories="barVoyageCount.productCategories"
|
||
chart-type="single"
|
||
/>
|
||
</div>
|
||
<div class="bezel">
|
||
<BarChart
|
||
:title="barVoyageDays.title"
|
||
:chart-data="barVoyageDays.salesData"
|
||
:categories="barVoyageDays.productCategories"
|
||
chart-type="single"
|
||
/>
|
||
</div>
|
||
<div class="bezel">
|
||
<BarChart
|
||
:title="barPeopleDiving.title"
|
||
:chart-data="barPeopleDiving.salesData"
|
||
:categories="barPeopleDiving.productCategories"
|
||
chart-type="multiple"
|
||
/>
|
||
</div>
|
||
<div class="bezel">
|
||
<BarChart
|
||
:title="barFirstPeopleDiving.title"
|
||
:chart-data="barFirstPeopleDiving.salesData"
|
||
:categories="barFirstPeopleDiving.productCategories"
|
||
chart-type="multiple"
|
||
/>
|
||
</div>
|
||
<div class="bezel">
|
||
<BarChart
|
||
:title="mixedMileage.title"
|
||
:chart-data="mixedMileage.series"
|
||
:categories="mixedMileage.categories"
|
||
chart-type="mixed"
|
||
:dual-y-axis="true"
|
||
left-axis-name="次数"
|
||
right-axis-name="天数"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import BarChart from './components/BarChart.vue'
|
||
import { setImageryViewModels } from '../../utils/common'
|
||
import { unitTotal, hovUnit, hovDiving } from '../../api/statistics'
|
||
import { getYearRange } from '../../utils/index'
|
||
const Cesium = window.Cesium
|
||
|
||
/**
|
||
* @param {*} v 原始值
|
||
* @returns {number}
|
||
*/
|
||
function num(v) {
|
||
if (v == null || v === '') return 0
|
||
const n = Number(v)
|
||
return Number.isFinite(n) ? n : 0
|
||
}
|
||
|
||
export default {
|
||
components: {
|
||
BarChart
|
||
},
|
||
data() {
|
||
return {
|
||
currentTitle: '参航单位统计',
|
||
voyageYear: '',
|
||
unitOptions: [],
|
||
/** 与 Banner 多选绑定：筛选单位汇总图表与航次地图轨迹（空表示全部） */
|
||
selectedUnits: [],
|
||
/** unitTotal 全量缓存，便于按 Banner 选择做前端过滤 */
|
||
unitTotalRawList: [],
|
||
// 缓存 hovDiving 返回数据，便于多选单位时仅做前端过滤与重绘
|
||
hovDivingItems: [],
|
||
numbers: [
|
||
{
|
||
label: '参航单位数量',
|
||
value: '',
|
||
unit: '家'
|
||
},
|
||
{
|
||
label: '参航人数',
|
||
value: '',
|
||
unit: '人'
|
||
},
|
||
{
|
||
label: '深潜次数',
|
||
value: '',
|
||
unit: '次'
|
||
}
|
||
],
|
||
// Cesium相关 - 参航单位地图
|
||
baiduCesiumViewer: null,
|
||
baiduCesiumEntities: [], // 存储参航单位标记实体
|
||
viewer: null,
|
||
// 地图图层基础地址
|
||
CesiumHostAddr: `${window.location.protocol}//${window.location.hostname}:${window.location.port}/`,
|
||
trackLineLayers: [],
|
||
/** 航行次数（柱状） */
|
||
barVoyageCount: { title: '航行次数', salesData: [], productCategories: [] },
|
||
/** 参航天数（柱状） */
|
||
barVoyageDays: { title: '参航天数', salesData: [], productCategories: [] },
|
||
/** 参航人员数、深潜次数（柱状，多系列） */
|
||
barPeopleDiving: {
|
||
title: '参航人员数、深潜次数',
|
||
salesData: [
|
||
{ name: '参航人员数', type: 'bar', data: [] },
|
||
{ name: '深潜次数', type: 'bar', data: [] }
|
||
],
|
||
productCategories: []
|
||
},
|
||
/** 首次参航、首次深潜（柱状，多系列） */
|
||
barFirstPeopleDiving: {
|
||
title: '首次参航人数、首次深潜人数',
|
||
salesData: [
|
||
{ name: '首次参航人数', type: 'bar', data: [] },
|
||
{ name: '首次深潜人数', type: 'bar', data: [] }
|
||
],
|
||
productCategories: []
|
||
},
|
||
/** 航行次数（柱）+ 参航天数（折） */
|
||
mixedMileage: {
|
||
title: '航行次数与参航天数',
|
||
categories: [],
|
||
series: [
|
||
{ name: '航行次数', type: 'bar', data: [], yAxisIndex: 0 },
|
||
{ name: '参航天数', type: 'line', data: [], yAxisIndex: 1 }
|
||
]
|
||
}
|
||
}
|
||
},
|
||
created() {
|
||
this.loadUnitTotalFromApi()
|
||
this.getHovUnit()
|
||
this.gitHovDiving()
|
||
},
|
||
mounted() {
|
||
this.imageryViewModels = setImageryViewModels(this.CesiumHostAddr)
|
||
this.initCesium() // 初始化航次地图
|
||
this.initBaiduCesium() // 初始化参航单位地图
|
||
this.refreshTrackLines()
|
||
},
|
||
beforeDestroy() {
|
||
// 清理Cesium资源
|
||
if (this.baiduCesiumViewer) {
|
||
this.baiduCesiumViewer.destroy()
|
||
}
|
||
if (this.viewer) {
|
||
this.viewer.destroy()
|
||
}
|
||
},
|
||
methods: {
|
||
/**
|
||
* 刷新航次地图轨迹图层（按单位多选进行前端过滤）。
|
||
* @returns {void}
|
||
*/
|
||
refreshTrackLines() {
|
||
if (!this.viewer) return
|
||
this.removeSingleLineImg()
|
||
|
||
const selectedNameSet = new Set(
|
||
(this.selectedUnits || [])
|
||
.map(u => u && u.unit_name)
|
||
.filter(Boolean)
|
||
)
|
||
const selectedIdSet = new Set(
|
||
(this.selectedUnits || [])
|
||
.map(u => (u && (u.unit_id || u.unitId)) || null)
|
||
.filter(Boolean)
|
||
)
|
||
|
||
const unitFilterEnabled = selectedNameSet.size > 0 || selectedIdSet.size > 0
|
||
const itemsToShow = unitFilterEnabled
|
||
? (this.hovDivingItems || []).filter(item => {
|
||
const itemName = item.unit_name || item.unitName || item.unit_name_cn || null
|
||
const itemId = item.unit_id || item.unitId || item.unit_code || null
|
||
return selectedNameSet.has(itemName) || selectedIdSet.has(itemId)
|
||
})
|
||
: (this.hovDivingItems || [])
|
||
|
||
itemsToShow.forEach(item => {
|
||
this.addSingleLineImg(item)
|
||
})
|
||
},
|
||
|
||
/**
|
||
* Banner 统计单位多选变更：刷新汇总图表与航次地图轨迹。
|
||
* @returns {void}
|
||
*/
|
||
onBannerUnitsChange() {
|
||
this.applyFilteredUnitTotal()
|
||
this.refreshTrackLines()
|
||
},
|
||
|
||
/**
|
||
* 按 Banner 选中单位过滤 unitTotal 行，再写入 Banner 与图表。
|
||
* @returns {void}
|
||
*/
|
||
applyFilteredUnitTotal() {
|
||
const raw = this.unitTotalRawList || []
|
||
if (!raw.length) {
|
||
this.applyUnitTotalRows([])
|
||
return
|
||
}
|
||
const sel = this.selectedUnits || []
|
||
if (!sel.length) {
|
||
this.applyUnitTotalRows(raw)
|
||
return
|
||
}
|
||
const nameSet = new Set(sel.map(u => u && u.unit_name).filter(Boolean))
|
||
const filtered = raw.filter(row => nameSet.has(row.unit_name))
|
||
this.applyUnitTotalRows(filtered)
|
||
},
|
||
|
||
/**
|
||
* 拉取「单位汇总」报表（/report/unit/total.htm），驱动 Banner 与各柱状图。
|
||
* @returns {void}
|
||
*/
|
||
loadUnitTotalFromApi() {
|
||
unitTotal({})
|
||
.then(res => {
|
||
const list = res && Array.isArray(res.array) ? res.array : []
|
||
this.unitTotalRawList = list
|
||
this.applyFilteredUnitTotal()
|
||
})
|
||
.catch(() => {
|
||
this.unitTotalRawList = []
|
||
this.applyUnitTotalRows([])
|
||
})
|
||
},
|
||
|
||
/**
|
||
* 将 unitTotal 返回的按单位行写入 Banner 与图表。
|
||
* @param {Object[]} list 接口 array
|
||
* @returns {void}
|
||
*/
|
||
applyUnitTotalRows(list) {
|
||
if (!list.length) {
|
||
this.numbers[0].value = ''
|
||
this.numbers[1].value = ''
|
||
this.numbers[2].value = ''
|
||
this.barVoyageCount = { title: '航行次数', salesData: [], productCategories: [] }
|
||
this.barVoyageDays = { title: '参航天数', salesData: [], productCategories: [] }
|
||
this.barPeopleDiving = {
|
||
title: '参航人员数、深潜次数',
|
||
salesData: [
|
||
{ name: '参航人员数', type: 'bar', data: [] },
|
||
{ name: '深潜次数', type: 'bar', data: [] }
|
||
],
|
||
productCategories: []
|
||
}
|
||
this.barFirstPeopleDiving = {
|
||
title: '首次参航人数、首次深潜人数',
|
||
salesData: [
|
||
{ name: '首次参航人数', type: 'bar', data: [] },
|
||
{ name: '首次深潜人数', type: 'bar', data: [] }
|
||
],
|
||
productCategories: []
|
||
}
|
||
this.mixedMileage = {
|
||
title: '航行次数与参航天数',
|
||
categories: [],
|
||
series: [
|
||
{ name: '航行次数', type: 'bar', data: [], yAxisIndex: 0 },
|
||
{ name: '参航天数', type: 'line', data: [], yAxisIndex: 1 }
|
||
]
|
||
}
|
||
return
|
||
}
|
||
|
||
const sorted = [...list].sort((a, b) => num(b.voyage_total) - num(a.voyage_total))
|
||
const names = sorted.map(r => r.unit_name || '—')
|
||
const voyage = sorted.map(r => num(r.voyage_total))
|
||
const days = sorted.map(r => num(r.voyage_days))
|
||
const member = sorted.map(r => num(r.member_total))
|
||
const drving = sorted.map(r => num(r.drving_total))
|
||
const fVoyage = sorted.map(r => num(r.f_voyage_total))
|
||
const fDrving = sorted.map(r => num(r.f_drving_total))
|
||
|
||
this.numbers[0].value = sorted.length
|
||
this.numbers[1].value = sorted.reduce((s, r) => s + num(r.member_total), 0)
|
||
this.numbers[2].value = sorted.reduce((s, r) => s + num(r.drving_total), 0)
|
||
|
||
this.barVoyageCount = {
|
||
title: '航行次数',
|
||
salesData: voyage,
|
||
productCategories: names
|
||
}
|
||
this.barVoyageDays = {
|
||
title: '参航天数',
|
||
salesData: days,
|
||
productCategories: names
|
||
}
|
||
this.barPeopleDiving = {
|
||
title: '参航人员数、深潜次数',
|
||
salesData: [
|
||
{ name: '参航人员数', type: 'bar', data: member },
|
||
{ name: '深潜次数', type: 'bar', data: drving }
|
||
],
|
||
productCategories: names
|
||
}
|
||
this.barFirstPeopleDiving = {
|
||
title: '首次参航人数、首次深潜人数',
|
||
salesData: [
|
||
{ name: '首次参航人数', type: 'bar', data: fVoyage },
|
||
{ name: '首次深潜人数', type: 'bar', data: fDrving }
|
||
],
|
||
productCategories: names
|
||
}
|
||
this.mixedMileage = {
|
||
title: '航行次数与参航天数',
|
||
categories: names,
|
||
series: [
|
||
{ name: '航行次数', type: 'bar', data: voyage, yAxisIndex: 0 },
|
||
{ name: '参航天数', type: 'line', data: days, yAxisIndex: 1 }
|
||
]
|
||
}
|
||
},
|
||
// 下潜单位统计
|
||
getHovUnit() {
|
||
hovUnit().then(res => {
|
||
// 初始化单位下拉选项（去重）
|
||
const map = new Map()
|
||
;(res.array || []).forEach(unit => {
|
||
const k = unit.unit_id || unit.unitId || unit.unit_name
|
||
if (!map.has(k)) map.set(k, unit)
|
||
})
|
||
this.unitOptions = Array.from(map.values())
|
||
|
||
// 清除之前的标记
|
||
this.clearBaiduCesiumMarkers()
|
||
|
||
// 创建参航单位标记
|
||
this.createBaiduCesiumMarkers(res.array || [])
|
||
})
|
||
},
|
||
// 创建参航单位Cesium标记点
|
||
createBaiduCesiumMarkers(units) {
|
||
if (!this.baiduCesiumViewer) return
|
||
|
||
const entities = []
|
||
|
||
units.forEach((item, index) => {
|
||
// 创建标记实体
|
||
const entity = this.baiduCesiumViewer.entities.add({
|
||
position: Cesium.Cartesian3.fromDegrees(item.unit_lon, item.unit_lat),
|
||
billboard: {
|
||
image: '../../../static/img/01.png', // 正常状态的图标
|
||
width: 32,
|
||
height: 32,
|
||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||
horizontalOrigin: Cesium.HorizontalOrigin.CENTER
|
||
},
|
||
label: {
|
||
text: item.unit_name,
|
||
font: '14pt monospace',
|
||
style: Cesium.LabelStyle.FILL_AND_OUTLINE,
|
||
outlineWidth: 2,
|
||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||
pixelOffset: new Cesium.Cartesian2(0, -40), // 标签在标记下方
|
||
fillColor: Cesium.Color.WHITE,
|
||
outlineColor: Cesium.Color.BLACK
|
||
},
|
||
unitData: item, // 存储原始数据
|
||
index: index // 存储索引
|
||
})
|
||
entities.push(entity)
|
||
})
|
||
|
||
this.baiduCesiumEntities = entities
|
||
|
||
// 调整视角以显示所有标记
|
||
if (entities.length > 0) {
|
||
this.baiduCesiumViewer.zoomTo(entities)
|
||
}
|
||
},
|
||
// 清除参航单位标记
|
||
clearBaiduCesiumMarkers() {
|
||
if (this.baiduCesiumViewer && this.baiduCesiumEntities.length > 0) {
|
||
this.baiduCesiumEntities.forEach(entity => {
|
||
this.baiduCesiumViewer.entities.remove(entity)
|
||
})
|
||
this.baiduCesiumEntities = []
|
||
}
|
||
},
|
||
// 潜次统计
|
||
gitHovDiving(params = {}) {
|
||
hovDiving(params).then(res => {
|
||
this.hovDivingItems = res.array || []
|
||
this.refreshTrackLines()
|
||
})
|
||
},
|
||
// 初始化Cesium - 参航单位地图
|
||
initBaiduCesium() {
|
||
this.baiduCesiumViewer = new Cesium.Viewer(this.$refs.baiduCesiumContainer, {
|
||
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.baiduCesiumViewer._cesiumWidget._creditContainer.style.display = 'none'
|
||
this.baiduCesiumViewer.scene.sun.show = false
|
||
this.baiduCesiumViewer.scene.moon.show = false
|
||
this.baiduCesiumViewer.scene.fog.enabled = false
|
||
this.baiduCesiumViewer.scene.skyAtmosphere.show = false
|
||
this.baiduCesiumViewer.scene.sun.show = false
|
||
this.baiduCesiumViewer.scene.skyBox.show = false
|
||
this.baiduCesiumViewer.scene.globe.enableLighting = false
|
||
this.baiduCesiumViewer.shadowMap.darkness = 0.8
|
||
this.baiduCesiumViewer.scene._sunBloom = false
|
||
this.baiduCesiumViewer.scene.globe.showGroundAtmosphere = false
|
||
this.baiduCesiumViewer.scene.postProcessStages.fxaa.enabled = true
|
||
|
||
this.baiduCesiumViewer.camera.setView({
|
||
destination: Cesium.Cartesian3.fromDegrees(114.4040, 30.5196, 4000000)
|
||
})
|
||
},
|
||
// 初始化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.viewer && this.trackLineLayers.length) {
|
||
this.trackLineLayers.forEach(line => {
|
||
this.viewer.imageryLayers.remove(line)
|
||
})
|
||
}
|
||
// 清空引用，避免重复 remove 或无限增长
|
||
this.trackLineLayers = []
|
||
},
|
||
// 选择航次地图年份
|
||
selectVoyageYear(val) {
|
||
this.removeSingleLineImg()
|
||
if (val) {
|
||
const params = getYearRange(val)
|
||
this.gitHovDiving({ ...params })
|
||
} else {
|
||
this.gitHovDiving({})
|
||
}
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.statistics {
|
||
background-color: #ebf1f7;
|
||
|
||
.banner {
|
||
background-image: url(../../../static/images/bannerny1.jpg);
|
||
background-repeat: no-repeat;
|
||
background-position: center;
|
||
background-size: 100% 100%;
|
||
width: 100%;
|
||
height: 480px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
color: #fff;
|
||
|
||
.banner-topic {
|
||
font-size: 28px;
|
||
font-weight: 700;
|
||
margin-bottom: 18px;
|
||
text-shadow: 0 6px 22px rgba(0, 0, 0, 0.25);
|
||
letter-spacing: 0.02em;
|
||
}
|
||
|
||
.banner-type-dropdown {
|
||
margin-bottom: 40px;
|
||
}
|
||
|
||
.banner-static-title {
|
||
margin-bottom: 40px;
|
||
}
|
||
|
||
.banner-select-trigger {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 14px;
|
||
padding: 14px 24px 14px 28px;
|
||
border: 2px solid rgba(255, 255, 255, 0.88);
|
||
border-radius: 12px;
|
||
background: rgba(8, 40, 72, 0.42);
|
||
backdrop-filter: blur(10px);
|
||
-webkit-backdrop-filter: blur(10px);
|
||
box-shadow:
|
||
0 4px 20px rgba(0, 0, 0, 0.28),
|
||
inset 0 1px 0 rgba(255, 255, 255, 0.14);
|
||
cursor: pointer;
|
||
transition:
|
||
background 0.25s ease,
|
||
border-color 0.25s ease,
|
||
box-shadow 0.25s ease,
|
||
transform 0.25s ease;
|
||
user-select: none;
|
||
outline: none;
|
||
|
||
&:hover {
|
||
background: rgba(12, 55, 95, 0.58);
|
||
border-color: rgba(255, 255, 255, 0.98);
|
||
transform: translateY(-3px);
|
||
box-shadow:
|
||
0 12px 36px rgba(0, 0, 0, 0.38),
|
||
inset 0 1px 0 rgba(255, 255, 255, 0.22);
|
||
}
|
||
|
||
&:focus-visible {
|
||
outline: 3px solid rgba(255, 255, 255, 0.85);
|
||
outline-offset: 3px;
|
||
}
|
||
}
|
||
|
||
.banner-select-text {
|
||
font-size: 52px;
|
||
font-weight: bold;
|
||
color: #fff;
|
||
line-height: 1.15;
|
||
max-width: #{"min(90vw, 920px)"};
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.banner-select-chevron {
|
||
flex-shrink: 0;
|
||
opacity: 0.95;
|
||
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
|
||
}
|
||
|
||
.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;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
/** Banner 下方：统计单位筛选条，整行容器 + 右侧对齐独立框 */
|
||
.unit-toolbar {
|
||
width: 100%;
|
||
padding: 8px 50px 8px;
|
||
box-sizing: border-box;
|
||
background-color: #ebf1f7;
|
||
|
||
.unit-toolbar-inner {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
align-items: center;
|
||
width: 100%;
|
||
}
|
||
|
||
.unit-filter-box {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
padding: 10px 18px;
|
||
border-radius: 10px;
|
||
background: rgba(255, 255, 255, 0.92);
|
||
border: 1px solid rgba(0, 50, 90, 0.12);
|
||
box-shadow: 0 2px 10px rgba(0, 40, 80, 0.06);
|
||
}
|
||
|
||
.banner-unit-label {
|
||
font-size: 15px;
|
||
font-weight: 600;
|
||
letter-spacing: 0.06em;
|
||
color: rgba(28, 45, 63, 0.88);
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.banner-unit-select {
|
||
width: #{"min(72vw, 520px)"};
|
||
min-width: 200px;
|
||
|
||
::v-deep .el-input__inner {
|
||
min-height: 34px;
|
||
border-radius: 8px;
|
||
border: 1px solid rgba(0, 50, 90, 0.14);
|
||
background: #fff;
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
color: #1c2d3f;
|
||
}
|
||
|
||
::v-deep .el-select__tags {
|
||
max-width: 100%;
|
||
flex-wrap: wrap;
|
||
}
|
||
}
|
||
}
|
||
|
||
.map-module {
|
||
padding: 20px 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-panel {
|
||
position: absolute;
|
||
top: 16px;
|
||
right: 16px;
|
||
z-index: 8888;
|
||
display: flex;
|
||
align-items: center;
|
||
flex-wrap: wrap;
|
||
gap: 10px;
|
||
padding: 6px 10px 6px 12px;
|
||
border-radius: 10px;
|
||
background: rgba(255, 255, 255, 0.68);
|
||
border: 1px solid rgba(255, 255, 255, 0.55);
|
||
box-shadow: 0 4px 18px rgba(0, 0, 0, 0.14);
|
||
backdrop-filter: blur(12px);
|
||
-webkit-backdrop-filter: blur(12px);
|
||
transition:
|
||
background 0.25s ease,
|
||
border-color 0.25s ease,
|
||
box-shadow 0.25s ease,
|
||
transform 0.25s ease;
|
||
|
||
&:hover {
|
||
background: rgba(255, 255, 255, 0.82);
|
||
border-color: rgba(255, 255, 255, 0.92);
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.2);
|
||
}
|
||
}
|
||
|
||
.map-year-label {
|
||
font-size: 13px;
|
||
font-weight: 600;
|
||
color: rgba(28, 42, 58, 0.78);
|
||
letter-spacing: 0.04em;
|
||
user-select: none;
|
||
}
|
||
|
||
.map-year {
|
||
width: 120px;
|
||
|
||
::v-deep .el-input__inner {
|
||
height: 34px;
|
||
line-height: 34px;
|
||
padding-left: 30px;
|
||
padding-right: 28px;
|
||
border-radius: 8px;
|
||
border: 1px solid rgba(0, 50, 90, 0.12);
|
||
background: rgba(255, 255, 255, 0.55);
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
color: #1c2d3f;
|
||
transition:
|
||
background 0.2s ease,
|
||
border-color 0.2s ease,
|
||
box-shadow 0.2s ease;
|
||
}
|
||
|
||
::v-deep .el-input__inner:hover,
|
||
::v-deep .el-input__inner:focus {
|
||
border-color: rgba(0, 90, 150, 0.42);
|
||
background: rgba(255, 255, 255, 0.78);
|
||
box-shadow: 0 2px 8px rgba(0, 50, 100, 0.1);
|
||
}
|
||
|
||
::v-deep .el-input__prefix {
|
||
left: 8px;
|
||
}
|
||
|
||
::v-deep .el-input__suffix {
|
||
right: 6px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.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 lang="scss">
|
||
.banner-type-dropdown-popper.el-dropdown-menu {
|
||
min-width: 240px;
|
||
max-height: #{"min(60vh, 420px)"};
|
||
overflow-y: auto;
|
||
padding: 6px 0;
|
||
border-radius: 8px;
|
||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
|
||
}
|
||
|
||
.banner-type-dropdown-popper.el-dropdown-menu .el-dropdown-menu__item {
|
||
font-size: 16px;
|
||
line-height: 22px;
|
||
padding: 14px 22px;
|
||
}
|
||
</style>
|