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
parent a15b2cc166 e2babbeeaa
commit 4c6ef576b3
1 changed files with 175 additions and 133 deletions

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

@ -1,16 +1,9 @@
<template> <template>
<div <div
style="width: 100%; height: 100%"
class="bs-design-wrap bs-bar" class="bs-design-wrap bs-bar"
style="width: 100%; height: 100%"
> >
<el-button <el-button v-if="currentDeep > 0" class="button" type='text' @click="jumpTo(config)"> 返回上一级</el-button>
v-if="level=='province'&&config.customize.down"
class="button"
type="text"
@click="jumpTo(config)"
>
返回上一级
</el-button>
<div <div
:id="`chart${config.code}`" :id="`chart${config.code}`"
style="width: 100%; height: 100%" 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 commonMixins from 'data-room-ui/js/mixins/commonMixins.js'
import paramsMixins from 'data-room-ui/js/mixins/paramsMixins' import paramsMixins from 'data-room-ui/js/mixins/paramsMixins'
import linkageMixins from 'data-room-ui/js/mixins/linkageMixins' import linkageMixins from 'data-room-ui/js/mixins/linkageMixins'
export default { export default {
name: 'MapCharts', name: 'MapCharts',
mixins: [paramsMixins, commonMixins, linkageMixins], mixins: [paramsMixins, commonMixins, linkageMixins],
@ -36,22 +30,24 @@ export default {
default: () => ({}) default: () => ({})
} }
}, },
data () { data() {
return { return {
currentDeep: 0,
mapList: [],
charts: null, charts: null,
hasData: false, hasData: false,
level:'', level: '',
option:{} option: {}
} }
}, },
computed: { computed: {
Data () { Data() {
return JSON.parse(JSON.stringify(this.config)) return JSON.parse(JSON.stringify(this.config))
} }
}, },
watch: { watch: {
Data: { Data: {
handler (newVal, oldVal) { handler(newVal, oldVal) {
if (newVal.w !== oldVal.w || newVal.h !== oldVal.h) { if (newVal.w !== oldVal.w || newVal.h !== oldVal.h) {
this.$nextTick(() => { this.$nextTick(() => {
this.charts.resize() this.charts.resize()
@ -61,14 +57,14 @@ export default {
deep: true deep: true
} }
}, },
mounted () { mounted() {
this.chartInit() this.chartInit()
}, },
beforeDestroy () { beforeDestroy() {
this.charts?.clear() this.charts?.clear()
}, },
methods: { methods: {
chartInit () { chartInit() {
const config = this.config const config = this.config
// key和code相等，说明是一进来刷新，调用list接口 // key和code相等，说明是一进来刷新，调用list接口
if (this.config.code === this.config.key || this.isPreview) { if (this.config.code === this.config.key || this.isPreview) {
@ -77,7 +73,8 @@ export default {
// 改变样式 // 改变样式
// config = this.changeStyle(res) // config = this.changeStyle(res)
this.newChart(config) this.newChart(config)
}).catch(() => {}) }).catch(() => {
})
} else { } else {
// 否则说明是更新，这里的更新只指更新数据（改变样式时是直接调取changeStyle方法），因为更新数据会改变key,调用chart接口 // 否则说明是更新，这里的更新只指更新数据（改变样式时是直接调取changeStyle方法），因为更新数据会改变key,调用chart接口
this.changeData(config).then((res) => { this.changeData(config).then((res) => {
@ -86,10 +83,13 @@ export default {
}) })
} }
}, },
dataFormatting (config, data) { dataFormatting(config, data) {
const dataList = [] const dataList = []
data?.data?.forEach(item => { 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 = {
...config.option, ...config.option,
@ -97,32 +97,36 @@ export default {
} }
return config return config
}, },
async jumpTo (config) { async jumpTo(config) {
this.level = 'country' this.currentDeep--
const mapUrl = `${window.BS_CONFIG?.httpConfigs?.baseURL}/static/chinaMap/country/中华人民共和国.json` let map = this.mapList[this.currentDeep]
const map = await this.$dataRoomAxios.get(decodeURI(mapUrl), {}, true) // 移除mapList中的最后一个元素
this.option.geo.map = '中华人民共和国' this.mapList.pop()
this.changeData({ ...config, customize: { ...config.customize, level: 'country', scope: '中国' } }) let mapData = JSON.parse(map.geoJson)
echarts.registerMap('中华人民共和国', map) this.option.geo.map = map.name;
this.charts.setOption(this.option, true) 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) { 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( this.charts = echarts.init(
document.getElementById(`chart${this.config.code}`) document.getElementById(`chart${this.config.code}`)
) )
this.option = { this.option = {
// 背景颜色 // 背景颜色
backgroundColor: config.customize.backgroundColor, backgroundColor: config.customize.backgroundColor,
graphic: [ graphic: [],
],
geo: { geo: {
map: config.customize.scope, map: config.customize.scope,
zlevel: 10, zlevel: 9,
show: true, show: true,
layoutCenter: ['50%', '50%'], // 地图中心点位置
layoutCenter: [center1, center2],
roam: true, roam: true,
layoutSize: '100%', layoutSize: "100%",
zoom: 1, zoom: config.customize.zoom || 1,
label: { label: {
// 通常状态下的样式 // 通常状态下的样式
normal: { normal: {
@ -177,97 +181,97 @@ export default {
}, },
series: config.customize.scatter series: config.customize.scatter
? [ ? [
// { // {
// type: 'effectScatter', // type: 'effectScatter',
// coordinateSystem: 'geo', // coordinateSystem: 'geo',
// effectType: 'ripple', // effectType: 'ripple',
// showEffectOn: 'render', // showEffectOn: 'render',
// rippleEffect: { // rippleEffect: {
// period: 10, // period: 10,
// scale: 10, // scale: 10,
// brushType: 'fill' // brushType: 'fill'
// }, // },
// hoverAnimation: true, // hoverAnimation: true,
// itemStyle: { // itemStyle: {
// normal: { // normal: {
// color: 'rgba(255, 235, 59, .7)', // color: 'rgba(255, 235, 59, .7)',
// shadowBlur: 10, // shadowBlur: 10,
// shadowColor: '#333' // shadowColor: '#333'
// } // }
// }, // },
// tooltip: { // tooltip: {
// formatter(params) { // formatter(params) {
// return `<p style="text-align:center;line-height: 30px;height:30px;font-size: 14px;border-bottom: 1px solid #7A8698;">${ // return `<p style="text-align:center;line-height: 30px;height:30px;font-size: 14px;border-bottom: 1px solid #7A8698;">${
// params.name // params.name
// }</p> // }</p>
// <div style="line-height:22px;margin-top:5px">GDP<span style="margin-left:12px;color:#fff;float:right">${ // <div style="line-height:22px;margin-top:5px">GDP<span style="margin-left:12px;color:#fff;float:right">${
// params.data?.value[2] || '--' // params.data?.value[2] || '--'
// }</span></div>` // }</span></div>`
// }, // },
// show: true // show: true
// }, // },
// zlevel: 1, // zlevel: 1,
// data: [ // data: [
// { name: '西藏自治区', value: [91.23, 29.5, 1] }, // { name: '西藏自治区', value: [91.23, 29.5, 1] },
// { name: '黑龙江省', value: [128.03, 47.01, 1007] }, // { name: '黑龙江省', value: [128.03, 47.01, 1007] },
// { name: '北京市', value: [116.4551, 40.2539, 5007] } // { name: '北京市', value: [116.4551, 40.2539, 5007] }
// ] // ]
// } // }
{ {
type: 'scatter', type: 'scatter',
coordinateSystem: 'geo', coordinateSystem: 'geo',
symbol: 'pin', symbol: 'pin',
legendHoverLink: true, legendHoverLink: true,
symbolSize: [60, 60], symbolSize: [60, 60],
showEffectOn: 'render', showEffectOn: 'render',
rippleEffect: { rippleEffect: {
brushType: 'stroke' brushType: 'stroke'
}, },
hoverAnimation: true, hoverAnimation: true,
zlevel: 1, zlevel: 11,
// 这里渲染标志里的内容以及样式 // 这里渲染标志里的内容以及样式
label: { label: {
show: true, show: true,
formatter (value) { formatter(value) {
return value.data.value[2] return value.data.value[2]
},
color: config.customize.scatterColor
},
// 标志的样式
itemStyle: {
normal: {
color: config.customize.scatterBackgroundColor,
shadowBlur: 2,
shadowColor: 'D8BC37'
}
}, },
data: config.option?.data color: config.customize.scatterColor
} },
] // 标志的样式
itemStyle: {
normal: {
color: config.customize.scatterBackgroundColor,
shadowBlur: 2,
shadowColor: 'D8BC37'
}
},
data: config.option?.data
}
]
: [ : [
{ {
type: 'map', type: 'map',
map: config.customize.scope, map: config.customize.scope,
geoIndex: 0, geoIndex: 0,
roam: false, roam: false,
zoom: 1.5, zoom: 1.5,
center: [105, 36], center: [105, 36],
showLegendSymbol: false, // 存在legend时显示 showLegendSymbol: false, // 存在legend时显示
data: config.option?.data, data: config.option?.data,
tooltip: { tooltip: {
formatter (params) { formatter(params) {
return `<p style="text-align:center;line-height: 30px;height:30px;font-size: 14px;border-bottom: 1px solid #7A8698;">${ return `<p style="text-align:center;line-height: 30px;height:30px;font-size: 14px;border-bottom: 1px solid #7A8698;">${
params.name params.name
}</p> }</p>
<div style="line-height:22px;margin-top:5px">GDP<span style="margin-left:12px;color:#fff;float:right">${ <div style="line-height:22px;margin-top:5px">GDP<span style="margin-left:12px;color:#fff;float:right">${
params.data?.value[2] || '--' params.data?.value[2] || '--'
}</span></div>` }</span></div>`
}, },
show: true show: true
}
} }
] }
]
} }
if (config.customize.visual) { if (config.customize.visual) {
this.option.visualMap = { this.option.visualMap = {
@ -280,21 +284,55 @@ export default {
} }
} }
} }
const mapUrl = `${window.BS_CONFIG?.httpConfigs?.baseURL}/static/chinaMap/${config.customize.level}/${config.customize.dataMap}` let hasMapId = !!config.customize.mapId
const map = await this.$dataRoomAxios.get(decodeURI(mapUrl), {}, true) // 根据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) echarts.registerMap(config.customize.scope, map)
this.charts.setOption(this.option) this.charts.setOption(this.option)
// 点击下钻
this.charts.on('click', async (params) => { this.charts.on('click', async (params) => {
if (params.name == '') return if (params.name == '') return
if (config.customize.down === false || this.level === 'province') return if (!config.customize.down) {
this.level = 'province' this.$message({
const mapUrl = `${window.BS_CONFIG?.httpConfigs?.baseURL}/static/chinaMap/province/${params.name}.json` message: '该地图未开启下钻',
const map = await this.$dataRoomAxios.get(decodeURI(mapUrl), {}, true) type: 'warning'
this.changeData({ ...config, customize: { ...config.customize, level: 'province', scope: params.name } }) })
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 this.option.geo.map = params.name
echarts.registerMap(params.name, map) echarts.registerMap(params.name, JSON.parse(downMap.geoJson));
this.charts.setOption(this.option, true) this.charts.setOption(this.option, true);
}) });
} }
} }
} }
@ -302,17 +340,21 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
@import '../../assets/style/echartStyle'; @import '../../assets/style/echartStyle';
.light-theme { .light-theme {
background-color: #ffffff; background-color: #ffffff;
color: #000000; color: #000000;
} }
.auto-theme { .auto-theme {
background-color: rgba(0, 0, 0, 0); background-color: rgba(0, 0, 0, 0);
} }
.bs-design-wrap{
.bs-design-wrap {
position: relative; position: relative;
padding: 0 16px; padding: 0 16px;
.button{
.button {
position: absolute; position: absolute;
z-index: 999; z-index: 999;
} }

Write Preview
Loading…
Cancel
Save