tzjy-code
/
DataRoom
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'master' of github.com:gcpaas/DataRoom

Browse Source
main
liu.shiyi 2 years ago
parent a15b2cc166 e2babbeeaa
commit 4c6ef576b3
1 changed files with 175 additions and 133 deletions
Show Stats Download Patch File Download Diff File

112
data-room-ui/packages/BasicComponents/Map/index.vue
Unescape Escape View File

@ -1,16 +1,9 @@
<template>
<div
style="width: 100%; height: 100%"
class="bs-design-wrap bs-bar"
style="width: 100%; height: 100%"
>
<el-button
v-if="level=='province'&&config.customize.down"
class="button"
type="text"
@click="jumpTo(config)"
>
返回上一级
</el-button>
<el-button v-if="currentDeep > 0" class="button" type='text' @click="jumpTo(config)"> 返回上一级</el-button>
<div
:id="`chart${config.code}`"
style="width: 100%; height: 100%"
@ -23,6 +16,7 @@ import * as echarts from 'echarts'
import commonMixins from 'data-room-ui/js/mixins/commonMixins.js'
import paramsMixins from 'data-room-ui/js/mixins/paramsMixins'
import linkageMixins from 'data-room-ui/js/mixins/linkageMixins'
export default {
name: 'MapCharts',
mixins: [paramsMixins, commonMixins, linkageMixins],
@ -38,6 +32,8 @@ export default {
},
data() {
return {
currentDeep: 0,
mapList: [],
charts: null,
hasData: false,
level: '',
@ -77,7 +73,8 @@ export default {
// 改变样式
// config = this.changeStyle(res)
this.newChart(config)
}).catch(() => {})
}).catch(() => {
})
} else {
// 否则说明是更新，这里的更新只指更新数据（改变样式时是直接调取changeStyle方法），因为更新数据会改变key,调用chart接口
this.changeData(config).then((res) => {
@ -89,7 +86,10 @@ export default {
dataFormatting(config, data) {
const dataList = []
data?.data?.forEach(item => {
dataList.push({ name: item[config.customize.name], value: [item[config.customize.xaxis], item[config.customize.yaxis], item[config.customize.value]] })
dataList.push({
name: item[config.customize.name],
value: [item[config.customize.xaxis], item[config.customize.yaxis], item[config.customize.value]]
})
})
config.option = {
...config.option,
@ -98,31 +98,35 @@ export default {
return config
},
async jumpTo(config) {
this.level = 'country'
const mapUrl = `${window.BS_CONFIG?.httpConfigs?.baseURL}/static/chinaMap/country/中华人民共和国.json`
const map = await this.$dataRoomAxios.get(decodeURI(mapUrl), {}, true)
this.option.geo.map = '中华人民共和国'
this.changeData({ ...config, customize: { ...config.customize, level: 'country', scope: '中国' } })
echarts.registerMap('中华人民共和国', map)
this.charts.setOption(this.option, true)
this.currentDeep--
let map = this.mapList[this.currentDeep]
// 移除mapList中的最后一个元素
this.mapList.pop()
let mapData = JSON.parse(map.geoJson)
this.option.geo.map = map.name;
this.changeData({...config, customize: {...config.customize, level: map.level, scope: map.name}})
echarts.registerMap(map.name, mapData);
this.charts.setOption(this.option, true);
},
async newChart(config) {
let center1 = config.customize.center1 ? config.customize.center1 + '%' : '50%'
let center2 = config.customize.center2 ? config.customize.center2 + '%' : '50%'
this.charts = echarts.init(
document.getElementById(`chart${this.config.code}`)
)
this.option = {
// 背景颜色
backgroundColor: config.customize.backgroundColor,
graphic: [
],
graphic: [],
geo: {
map: config.customize.scope,
zlevel: 10,
zlevel: 9,
show: true,
layoutCenter: ['50%', '50%'],
// 地图中心点位置
layoutCenter: [center1, center2],
roam: true,
layoutSize: '100%',
zoom: 1,
layoutSize: "100%",
zoom: config.customize.zoom || 1,
label: {
// 通常状态下的样式
normal: {
@ -225,7 +229,7 @@ export default {
brushType: 'stroke'
},
hoverAnimation: true,
zlevel: 1,
zlevel: 11,
// 这里渲染标志里的内容以及样式
label: {
show: true,
@ -280,21 +284,55 @@ export default {
}
}
}
const mapUrl = `${window.BS_CONFIG?.httpConfigs?.baseURL}/static/chinaMap/${config.customize.level}/${config.customize.dataMap}`
const map = await this.$dataRoomAxios.get(decodeURI(mapUrl), {}, true)
let hasMapId = !!config.customize.mapId
// 根据mapId获取地图数据
let mapInfoUrl = `${window.BS_CONFIG?.httpConfigs?.baseURL}/bigScreen/map/info/${config.customize.mapId}`
// 如果设置了地图id，就用地图id获取地图数据，否则用默认的世界地图
if (!hasMapId) {
mapInfoUrl = `${window.BS_CONFIG?.httpConfigs?.baseURL}/static/chinaMap/country/中华人民共和国.json`
}
const mapResp = await this.$dataRoomAxios.get(decodeURI(mapInfoUrl), {}, true)
const map = hasMapId ? JSON.parse(mapResp.data.geoJson) : mapResp
if (hasMapId && mapResp.data.uploadedGeoJson !== 1) {
// 没有上传过geoJson
this.$message({
message: '请先上传地图数据',
type: 'warning'
})
return
}
this.mapList.push(mapResp.data)
echarts.registerMap(config.customize.scope, map)
this.charts.setOption(this.option)
// 点击下钻
this.charts.on('click', async (params) => {
if (params.name == '') return
if (config.customize.down === false || this.level === 'province') return
this.level = 'province'
const mapUrl = `${window.BS_CONFIG?.httpConfigs?.baseURL}/static/chinaMap/province/${params.name}.json`
const map = await this.$dataRoomAxios.get(decodeURI(mapUrl), {}, true)
this.changeData({ ...config, customize: { ...config.customize, level: 'province', scope: params.name } })
this.option.geo.map = params.name
echarts.registerMap(params.name, map)
this.charts.setOption(this.option, true)
if (!config.customize.down) {
this.$message({
message: '该地图未开启下钻',
type: 'warning'
})
return
}
// 到达允许下钻的层数，则不再下钻
if (this.currentDeep >= config.customize.downLevel) return
const downMapUrl = `${window.BS_CONFIG?.httpConfigs?.baseURL}/bigScreen/map/data/${this.mapList[this.currentDeep].id}/${params.name}`
const downMap = await this.$dataRoomAxios.get(decodeURI(downMapUrl), {}, false)
// 地图不可用
if (downMap.available !== 1) {
this.$message({
message: '未找到该地图配置',
type: 'warning'
})
return
}
this.currentDeep++
this.mapList.push(downMap)
this.changeData({...config, customize: {...config.customize, scope: params.name}})
this.option.geo.map = params.name
echarts.registerMap(params.name, JSON.parse(downMap.geoJson));
this.charts.setOption(this.option, true);
});
}
}
}
@ -302,16 +340,20 @@ export default {
<style lang="scss" scoped>
@import '../../assets/style/echartStyle';
.light-theme {
background-color: #ffffff;
color: #000000;
}
.auto-theme {
background-color: rgba(0, 0, 0, 0);
}
.bs-design-wrap {
position: relative;
padding: 0 16px;
.button {
position: absolute;
z-index: 999;

Write Preview
Loading…
Cancel
Save