更换地图
This commit is contained in:
@@ -4,7 +4,8 @@
|
|||||||
<meta charset="UTF-8"/>
|
<meta charset="UTF-8"/>
|
||||||
<link rel="icon" href="/favicon.ico"/>
|
<link rel="icon" href="/favicon.ico"/>
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||||
<title>Vite App</title>
|
<script src="/cdn/echarts.min.js"></script>
|
||||||
|
<title>仟吉大屏</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="app"></div>
|
<div id="app"></div>
|
||||||
|
|||||||
45
public/cdn/echarts.min.js
vendored
Normal file
45
public/cdn/echarts.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
@@ -53,7 +53,6 @@ export default {
|
|||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
this.scaleByAspect()
|
this.scaleByAspect()
|
||||||
window.onresize = () => this.scaleByAspect()
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
111
src/views/AppMap.vue
Normal file
111
src/views/AppMap.vue
Normal file
@@ -0,0 +1,111 @@
|
|||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "AppMap",
|
||||||
|
label: "地图",
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
map: null,
|
||||||
|
layers: [],
|
||||||
|
geoJson: null
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
search: v => v.$marketBoard.search
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
search: {
|
||||||
|
deep: true, handler() {
|
||||||
|
this.getData().then(() => this.map.refreshData())
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
loadLib() {
|
||||||
|
return Promise.all([
|
||||||
|
'/presource/datascreen/js/turf.min.js',
|
||||||
|
].map(e => $loadScript('js', e)))
|
||||||
|
},
|
||||||
|
getData() {
|
||||||
|
const {$http, $waitFor} = window
|
||||||
|
const {groupCodeList, currentDate, hourNum} = this.search
|
||||||
|
return $waitFor($http).then(() => Promise.all([
|
||||||
|
$http.post("/data-boot/la/screen/marketBoard/storeReport", {
|
||||||
|
groupCodeList, currentDate, hourNum
|
||||||
|
}).then(res => {
|
||||||
|
if (res?.data) {
|
||||||
|
return this.layers = res.data || []
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
axios.get('http://10.0.97.209/blade-visual/map/data?id=1456').then(res => {
|
||||||
|
if (res?.data) {
|
||||||
|
return this.geoJson = res.data
|
||||||
|
}
|
||||||
|
})
|
||||||
|
]))
|
||||||
|
},
|
||||||
|
initMap() {
|
||||||
|
const {echarts, turf} = window
|
||||||
|
const boundary = turf.union(this.geoJson)
|
||||||
|
boundary.properties.name = "boundary"
|
||||||
|
this.geoJson.features.unshift(boundary)
|
||||||
|
echarts.registerMap('zhengzhou', this.geoJson)
|
||||||
|
this.map = echarts.init(this.$el)
|
||||||
|
const areaColor = {
|
||||||
|
type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [
|
||||||
|
{offset: 0, color: 'rgba(61,127,255,0.35)'},
|
||||||
|
{offset: 1, color: '#09E2F8'},
|
||||||
|
]
|
||||||
|
}
|
||||||
|
this.map.setOption({
|
||||||
|
geo: {
|
||||||
|
map: 'zhengzhou', roam: true, emphasis: {disabled: true},
|
||||||
|
itemStyle: {areaColor: "transparent", borderColor: '#97CAE6'},
|
||||||
|
silent: true,
|
||||||
|
label: {show: true, color: '#fff'},
|
||||||
|
regions: [
|
||||||
|
{name: "boundary", itemStyle: {areaColor, shadowColor: "#1A80BF", shadowOffsetY: 2}, label: {show: false}}
|
||||||
|
],
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{type: 'scatter', coordinateSystem: 'geo', itemStyle: {color: '#66FFFF'}},
|
||||||
|
{type: 'effectScatter', coordinateSystem: 'geo', itemStyle: {color: '#FFD15C'}}
|
||||||
|
],
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'item', formatter: params => {
|
||||||
|
const {name, marker, value: [x, y, bakeStockAmt = 0, preSaleNum = 0]} = params
|
||||||
|
return `${marker} ${name}<br/>现烤库存金额：${bakeStockAmt}<br/>现烤销售机会：${preSaleNum}`
|
||||||
|
}
|
||||||
|
},
|
||||||
|
})
|
||||||
|
this.refreshData()
|
||||||
|
},
|
||||||
|
convertData(layers) {
|
||||||
|
const result = {normal: [], abnormal: []}
|
||||||
|
layers.forEach(e => {
|
||||||
|
const item = {name: e.storeName, value: [e.longitude, e.latitude, e.bakeStockAmt, e.preSaleNum]}
|
||||||
|
if (e.bakeStockAmt > 0) {
|
||||||
|
result.normal.push(item)
|
||||||
|
} else {
|
||||||
|
result.abnormal.push(item)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
return Object.values(result).map(data => ({data}))
|
||||||
|
},
|
||||||
|
refreshData() {
|
||||||
|
this.map.setOption({series: this.convertData(this.layers)})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.loadLib().then(() => Promise.all([
|
||||||
|
this.getData(),
|
||||||
|
])).then(() => this.initMap())
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="AppMap"/>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
</style>
|
||||||
Reference in New Issue
Block a user