|
|
|
|
@ -1,11 +1,10 @@
|
|
|
|
|
<template> |
|
|
|
|
<section class="map-container" ref="mapWrapperRef"> |
|
|
|
|
<AirQuality class="air-quality block-box" /> |
|
|
|
|
<Weather class="weather block-box" /> |
|
|
|
|
<Numbox class="num-box block-box" /> |
|
|
|
|
<Tabber class="tabber-box" /> |
|
|
|
|
<Tabber class="tabber-box" @change-type="changeType" /> |
|
|
|
|
<Norm class="block-box nomr-box" /> |
|
|
|
|
<section class="legend"> |
|
|
|
|
<section class="legend block-box"> |
|
|
|
|
<div class="legend-item"> |
|
|
|
|
<span class="legend-text color-#58D764">绿色柱</span> |
|
|
|
|
<span class="legend-label">区域企业数占比</span> |
|
|
|
|
@ -22,35 +21,19 @@
|
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
<script setup lang="ts"> |
|
|
|
|
import AirQuality from './airQuality.vue' |
|
|
|
|
import Weather from './weather.vue' |
|
|
|
|
import Numbox from './numbox.vue' |
|
|
|
|
import Tabber from './tabber.vue' |
|
|
|
|
import Norm from './norm.vue' |
|
|
|
|
import { ScreenApi } from '@/api/screen' |
|
|
|
|
import * as echarts from 'echarts' |
|
|
|
|
|
|
|
|
|
let observer: Nullable<ResizeObserver> = null |
|
|
|
|
const mapWrapperRef = ref() |
|
|
|
|
const mapPoint = [ |
|
|
|
|
{ name: '七里河镇', value: ['41.339430', '121.261680'] }, |
|
|
|
|
{ name: '大榆树堡镇', value: ['41.523050', '121.462200'] }, |
|
|
|
|
{ name: '稍户营子镇', value: ['41.745590', '121.571260'] }, |
|
|
|
|
{ name: '九道岭镇', value: ['41.596910', '121.306600'] }, |
|
|
|
|
{ name: '高台子镇', value: ['41.701760', '121.369400'] }, |
|
|
|
|
{ name: '瓦子峪镇', value: ['41.682170', '121.534570'] }, |
|
|
|
|
{ name: '张家堡镇', value: ['41.392910', '121.442170'] }, |
|
|
|
|
{ name: '头道河镇', value: ['41.522750', '121.151930'] }, |
|
|
|
|
{ name: '留龙沟镇', value: ['41.404170', '121.05586'] }, |
|
|
|
|
{ name: '大定堡满族乡', value: ['41.403600', '121.12812'] }, |
|
|
|
|
{ name: '义州街道', value: ['41.535923', '121.238258'] }, |
|
|
|
|
{ name: '城关街道', value: ['41.535923', '121.23825'] }, |
|
|
|
|
{ name: '刘龙台镇', value: ['41.512160', '120.924230'] }, |
|
|
|
|
{ name: '头台镇', value: ['41.640424', '121.202267'] }, |
|
|
|
|
{ name: '前杨镇', value: ['41.506351', '121.222911'] }, |
|
|
|
|
{ name: '聚粮屯镇', value: ['41.512976', '121.318992'] }, |
|
|
|
|
{ name: '地藏寺满族乡', value: ['41.426387', '120.952806'] }, |
|
|
|
|
{ name: '白庙子乡', value: ['41.25', '120.22'] } |
|
|
|
|
] |
|
|
|
|
const mapChartRef = ref() |
|
|
|
|
const queryParams = reactive({ |
|
|
|
|
selectWeek: undefined |
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
const mapOption: any = ref({ |
|
|
|
|
geo: [ |
|
|
|
|
@ -79,6 +62,9 @@ const mapOption: any = ref({
|
|
|
|
|
borderColor: '#34F6BA' |
|
|
|
|
}, |
|
|
|
|
zLevel: 0, |
|
|
|
|
tooltip: { |
|
|
|
|
show: false |
|
|
|
|
}, |
|
|
|
|
emphasis: { |
|
|
|
|
disabled: true |
|
|
|
|
}, |
|
|
|
|
@ -100,6 +86,9 @@ const mapOption: any = ref({
|
|
|
|
|
emphasis: { |
|
|
|
|
disabled: true |
|
|
|
|
}, |
|
|
|
|
tooltip: { |
|
|
|
|
show: false |
|
|
|
|
}, |
|
|
|
|
zlevel: -1 |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
@ -110,6 +99,9 @@ const mapOption: any = ref({
|
|
|
|
|
areaColor: '#078B63', |
|
|
|
|
borderColor: 'transparent' |
|
|
|
|
}, |
|
|
|
|
tooltip: { |
|
|
|
|
show: false |
|
|
|
|
}, |
|
|
|
|
emphasis: { |
|
|
|
|
disabled: true |
|
|
|
|
}, |
|
|
|
|
@ -119,6 +111,9 @@ const mapOption: any = ref({
|
|
|
|
|
map: 'yx', |
|
|
|
|
layoutCenter: ['50%', '52%'], |
|
|
|
|
layoutSize: '80%', |
|
|
|
|
tooltip: { |
|
|
|
|
show: false |
|
|
|
|
}, |
|
|
|
|
itemStyle: { |
|
|
|
|
areaColor: '#002C1F', |
|
|
|
|
borderColor: 'transparent', |
|
|
|
|
@ -136,24 +131,46 @@ const mapOption: any = ref({
|
|
|
|
|
series: [], |
|
|
|
|
xAxis: [], |
|
|
|
|
yAxis: [], |
|
|
|
|
grid: [] |
|
|
|
|
grid: [], |
|
|
|
|
tooltip: { |
|
|
|
|
trigger: 'axis', |
|
|
|
|
backgroundColor: 'rgba(31,150,55,0.85)', |
|
|
|
|
borderColor: 'transparent', |
|
|
|
|
textStyle: { |
|
|
|
|
color: '#fff' |
|
|
|
|
}, |
|
|
|
|
axisPointer: { |
|
|
|
|
type: 'shadow', |
|
|
|
|
label: { |
|
|
|
|
backgroundColor: '#6a7985' |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
formatter: (v) => { |
|
|
|
|
return `${v[0].data.region}<br />${v[0].marker} ${v[0].name} ${v[0].value}%` |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
const handlerResize = () => { |
|
|
|
|
unref(mapChartRef).resizeHandler() |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
const initMap = () => { |
|
|
|
|
const initMap = async () => { |
|
|
|
|
const res = await ScreenApi.getMapData(queryParams) |
|
|
|
|
const mapData = res.map((i) => { |
|
|
|
|
return { |
|
|
|
|
...i, |
|
|
|
|
gps: i.location.split(',').map((i) => Number(i)) |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
const chartInstance = unref(mapChartRef).getChartRef() |
|
|
|
|
const BARWIDTH = 18 |
|
|
|
|
const SYMBOLHEIGHT = 10 |
|
|
|
|
echarts.util.each(mapPoint, (dataItem, id) => { |
|
|
|
|
const BARWIDTH = 15 |
|
|
|
|
const SYMBOLHEIGHT = 6 |
|
|
|
|
echarts.util.each(mapData as any, (dataItem: any, id) => { |
|
|
|
|
//获取对应城市的经纬度 |
|
|
|
|
const geoCoord = dataItem.value.reverse() |
|
|
|
|
const geoCoord = dataItem.gps.reverse() |
|
|
|
|
//把对应城市的经纬度转换成像素值，好让柱状图展示在对应的城市上 |
|
|
|
|
const coord = chartInstance.convertToPixel('geo', geoCoord) |
|
|
|
|
const value1 = Math.floor(Math.random() * 100) |
|
|
|
|
const value2 = Math.floor(Math.random() * 100) |
|
|
|
|
const idx = `${id}` |
|
|
|
|
mapOption.value.xAxis.push({ |
|
|
|
|
id: idx, |
|
|
|
|
@ -168,7 +185,8 @@ const initMap = () => {
|
|
|
|
|
}, |
|
|
|
|
axisLabel: { |
|
|
|
|
color: '#fff', |
|
|
|
|
fontSize: 10 |
|
|
|
|
fontSize: 8, |
|
|
|
|
padding: [2, 0, 0, 20] |
|
|
|
|
}, |
|
|
|
|
nameTextStyle: { |
|
|
|
|
color: '#fff' |
|
|
|
|
@ -198,8 +216,8 @@ const initMap = () => {
|
|
|
|
|
}) |
|
|
|
|
mapOption.value.grid.push({ |
|
|
|
|
id: idx, |
|
|
|
|
width: 45, |
|
|
|
|
height: 60, |
|
|
|
|
width: 40, |
|
|
|
|
height: 45, |
|
|
|
|
left: coord[0] - 10, |
|
|
|
|
top: coord[1] - 65, |
|
|
|
|
zLevel: 0 |
|
|
|
|
@ -225,26 +243,23 @@ const initMap = () => {
|
|
|
|
|
}, |
|
|
|
|
data: [ |
|
|
|
|
{ |
|
|
|
|
value: value1, |
|
|
|
|
value: dataItem.taskRate, |
|
|
|
|
itemStyle: { |
|
|
|
|
color: 'rgba(251,233,71,0.8)' |
|
|
|
|
}, |
|
|
|
|
label: { |
|
|
|
|
// formatter: value1.toString() |
|
|
|
|
} |
|
|
|
|
name: '任务数', |
|
|
|
|
region: dataItem.name |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
value: value2, |
|
|
|
|
value: dataItem.enterpriseRate, |
|
|
|
|
itemStyle: { |
|
|
|
|
color: 'rgba(88,215,100,0.8)' |
|
|
|
|
}, |
|
|
|
|
label: { |
|
|
|
|
// formatter: value2.toString() |
|
|
|
|
} |
|
|
|
|
name: '企业数', |
|
|
|
|
region: dataItem.name |
|
|
|
|
} |
|
|
|
|
] |
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
// 背景柱状图 |
|
|
|
|
mapOption.value.series.push({ |
|
|
|
|
name: `${dataItem.name}2`, |
|
|
|
|
@ -253,6 +268,9 @@ const initMap = () => {
|
|
|
|
|
xAxisIndex: idx, |
|
|
|
|
yAxisIndex: idx, |
|
|
|
|
zLevel: 3, |
|
|
|
|
tooltip: { |
|
|
|
|
show: false |
|
|
|
|
}, |
|
|
|
|
barWidth: BARWIDTH, |
|
|
|
|
label: { |
|
|
|
|
show: false, |
|
|
|
|
@ -322,20 +340,23 @@ const initMap = () => {
|
|
|
|
|
coordinateSystem: 'cartesian2d', |
|
|
|
|
xAxisIndex: idx, |
|
|
|
|
yAxisIndex: idx, |
|
|
|
|
tooltip: { |
|
|
|
|
show: false |
|
|
|
|
}, |
|
|
|
|
symbolSize: [BARWIDTH, SYMBOLHEIGHT], |
|
|
|
|
symbolOffset: [0, -5], |
|
|
|
|
symbolOffset: [0, -2], |
|
|
|
|
symbolPosition: 'end', |
|
|
|
|
symbol: 'circle', |
|
|
|
|
zLevel: 4, |
|
|
|
|
data: [ |
|
|
|
|
{ |
|
|
|
|
value: value1, |
|
|
|
|
value: dataItem.taskRate, |
|
|
|
|
itemStyle: { |
|
|
|
|
color: '#fbe947' |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
value: value2, |
|
|
|
|
value: dataItem.enterpriseRate, |
|
|
|
|
itemStyle: { |
|
|
|
|
color: 'rgb(88,215,100)' |
|
|
|
|
} |
|
|
|
|
@ -351,25 +372,46 @@ const initMap = () => {
|
|
|
|
|
yAxisIndex: idx, |
|
|
|
|
symbolPosition: 'end', |
|
|
|
|
symbol: 'circle', |
|
|
|
|
tooltip: { |
|
|
|
|
show: false |
|
|
|
|
}, |
|
|
|
|
zLevel: 3, |
|
|
|
|
label: { |
|
|
|
|
show: false |
|
|
|
|
show: true, |
|
|
|
|
position: 'top', |
|
|
|
|
fontSize: 8, |
|
|
|
|
distance: 2, |
|
|
|
|
textBorderColor: 'transparent', |
|
|
|
|
textShadowColor: 'transparent', |
|
|
|
|
formatter: (v) => { |
|
|
|
|
return v.name == '企业数' ? `${dataItem.enterpriseRate}%` : `${dataItem.taskRate}%` |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
symbolSize: [BARWIDTH, SYMBOLHEIGHT], |
|
|
|
|
symbolOffset: [0, -5], |
|
|
|
|
symbolOffset: [0, 0], |
|
|
|
|
barGap: '-100%', |
|
|
|
|
data: [ |
|
|
|
|
{ |
|
|
|
|
value: 100, |
|
|
|
|
itemStyle: { |
|
|
|
|
color: 'rgba(251,233,71,0.6)' |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
label: { |
|
|
|
|
color: 'rgba(251,233,71,1)', |
|
|
|
|
offset: [-2, 0] |
|
|
|
|
}, |
|
|
|
|
name: '任务数' |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
value: 100, |
|
|
|
|
itemStyle: { |
|
|
|
|
color: 'rgba(88,215,100,0.6)' |
|
|
|
|
} |
|
|
|
|
color: 'rgba(88,215,100,.6)' |
|
|
|
|
}, |
|
|
|
|
label: { |
|
|
|
|
color: 'rgba(88,215,100,1)', |
|
|
|
|
offset: [2, 0] |
|
|
|
|
}, |
|
|
|
|
name: '企业数' |
|
|
|
|
} |
|
|
|
|
] |
|
|
|
|
}) |
|
|
|
|
@ -380,6 +422,9 @@ const initMap = () => {
|
|
|
|
|
coordinateSystem: 'cartesian2d', |
|
|
|
|
xAxisIndex: idx, |
|
|
|
|
yAxisIndex: idx, |
|
|
|
|
tooltip: { |
|
|
|
|
show: false |
|
|
|
|
}, |
|
|
|
|
zLevel: 3, |
|
|
|
|
symbolPosition: 'end', |
|
|
|
|
symbol: 'circle', |
|
|
|
|
@ -388,7 +433,7 @@ const initMap = () => {
|
|
|
|
|
}, |
|
|
|
|
barGap: '-100%', |
|
|
|
|
symbolSize: [BARWIDTH, SYMBOLHEIGHT], |
|
|
|
|
symbolOffset: [0, -5], |
|
|
|
|
symbolOffset: [0, -2], |
|
|
|
|
data: [ |
|
|
|
|
{ |
|
|
|
|
value: 0, |
|
|
|
|
@ -407,12 +452,25 @@ const initMap = () => {
|
|
|
|
|
}) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
onMounted(() => { |
|
|
|
|
observer = new ResizeObserver(handlerResize) |
|
|
|
|
observer.observe(mapWrapperRef.value) |
|
|
|
|
const changeType = (v) => { |
|
|
|
|
queryParams.selectWeek = v |
|
|
|
|
nextTick(() => { |
|
|
|
|
clearBar() |
|
|
|
|
initMap() |
|
|
|
|
}) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
const clearBar = () => { |
|
|
|
|
mapOption.value.series = [] |
|
|
|
|
mapOption.value.xAxis = [] |
|
|
|
|
mapOption.value.yAxis = [] |
|
|
|
|
mapOption.value.grid = [] |
|
|
|
|
// unref(mapChartRef).getChartRef().clear() |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
onMounted(() => { |
|
|
|
|
observer = new ResizeObserver(handlerResize) |
|
|
|
|
observer.observe(mapWrapperRef.value) |
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
onUnmounted(() => { |
|
|
|
|
@ -455,17 +513,11 @@ onUnmounted(() => {
|
|
|
|
|
padding: 12px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.air-quality { |
|
|
|
|
position: absolute; |
|
|
|
|
left: 12px; |
|
|
|
|
top: 0; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.nomr-box { |
|
|
|
|
position: absolute; |
|
|
|
|
right: 12px; |
|
|
|
|
top: 68%; |
|
|
|
|
transform: translateY(-50%); |
|
|
|
|
left: 104px; |
|
|
|
|
top: 0; |
|
|
|
|
padding: 12px 24px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.weather { |
|
|
|
|
@ -477,7 +529,7 @@ onUnmounted(() => {
|
|
|
|
|
|
|
|
|
|
.num-box { |
|
|
|
|
position: absolute; |
|
|
|
|
right: 12px; |
|
|
|
|
right: 104px; |
|
|
|
|
top: 0; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
@ -498,8 +550,9 @@ onUnmounted(() => {
|
|
|
|
|
|
|
|
|
|
.legend { |
|
|
|
|
position: absolute; |
|
|
|
|
left: 20%; |
|
|
|
|
top: 20%; |
|
|
|
|
right: 104px; |
|
|
|
|
bottom: 20%; |
|
|
|
|
padding: 12px; |
|
|
|
|
display: flex; |
|
|
|
|
flex-flow: column nowrap; |
|
|
|
|
gap: 12px; |
|
|
|
|
|
