diff --git a/data-room-ui/packages/BasicComponents/FlyMap/index.vue b/data-room-ui/packages/BasicComponents/FlyMap/index.vue index 49dbbd49..50cb866f 100644 --- a/data-room-ui/packages/BasicComponents/FlyMap/index.vue +++ b/data-room-ui/packages/BasicComponents/FlyMap/index.vue @@ -100,8 +100,7 @@ export default { if(val.type==='move_in'){ coord.push({name:val.from,value:[val.lat1,val.lng1,val.value],msg:{...val}}) fromCoord.push({name:val.to,value:[val.lat2,val.lng2,val.value],msg:{...val}}) - } - if(val.type==='move_out'){ + }else{ coord.push({name:val.to,value:[val.lat2,val.lng2,val.value],msg:{...val}}) fromCoord.push({name:val.from,value:[val.lat1,val.lng1,val.value],msg:{...val}}) } diff --git a/data-room-ui/packages/BasicComponents/FlyMap/setting.vue b/data-room-ui/packages/BasicComponents/FlyMap/setting.vue index 41eea263..ed96a6a4 100644 --- a/data-room-ui/packages/BasicComponents/FlyMap/setting.vue +++ b/data-room-ui/packages/BasicComponents/FlyMap/setting.vue @@ -106,7 +106,7 @@ > @@ -376,6 +376,7 @@ export default { } else if (this.config.customize.level === 'province') { this.getMapList() this.config.customize.dataMap = '安徽省.json' + this.config.customize.down=false }else{ this.config.customize.down=false } diff --git a/data-room-ui/packages/BasicComponents/Map/index.vue b/data-room-ui/packages/BasicComponents/Map/index.vue index dddb8911..1bf49012 100644 --- a/data-room-ui/packages/BasicComponents/Map/index.vue +++ b/data-room-ui/packages/BasicComponents/Map/index.vue @@ -31,7 +31,8 @@ export default { data () { return { charts: null, - hasData: false + hasData: false, + level:'' } }, computed: { @@ -94,8 +95,16 @@ export default { const option = { // 背景颜色 backgroundColor: config.customize.backgroundColor, + graphic: [ + ], geo: { map: config.customize.scope, + zlevel: 10, + show:true, + layoutCenter: ['50%', '50%'], + roam: true, + layoutSize: "100%", + zoom: 1, label: { // 通常状态下的样式 normal: { @@ -253,10 +262,73 @@ export default { } } } + if(config.customize.down){ + // config?.customize?.graphic?.forEach((item,index)=>{ + option.graphic.push({ + type: "text", + left: `220px`, + top: "5%", + style: { + text: '中国', + font: `bolder ${config.customize.fontSize}px "Microsoft YaHei", sans-serif`, + fill: config.customize.fontGraphicColor, + }, + onclick:async()=>{ + this.level='country' + const index = option.graphic.findIndex(i => i.style.text === '中国'); + // 点击元素之后的所有元素全部删除 + option.graphic.splice(index + 1); + const mapUrl =`${window.BS_CONFIG?.httpConfigs?.baseURL}/static/chinaMap/country/中华人民共和国.json` + const map = await this.$dataRoomAxios.get(decodeURI(mapUrl), {}, true) + option.geo.map = '中华人民共和国' + this.changeData({...config,customize:{...config.customize,level:'country',scope:'中国'}}) + echarts.registerMap('中华人民共和国', map); + this.charts.setOption(option, true); + + } + },) + // }) + } const mapUrl = `${window.BS_CONFIG?.httpConfigs?.baseURL}/static/chinaMap/${config.customize.level}/${config.customize.dataMap}` const map = await this.$dataRoomAxios.get(decodeURI(mapUrl), {}, true) echarts.registerMap(config.customize.scope, map) this.charts.setOption(option) + this.charts.on('click', async(params)=> { + const index = option.graphic.findIndex(i => i.style.text === params.name); + if(params.name=='' || index !== -1) return + if(config.customize.down===false||this.level==='province') return + const idx = option.graphic.length + 1; + option.graphic.push({ + type: "text", + left: `${idx * 220}px`, + top: "5%", + style: { + text: params.name, + font: `bolder ${config.customize.fontSize}px "Microsoft YaHei", sans-serif`, + fill: config.customize.fontGraphicColor, + }, + onclick: async() => { + const mapUrl =`${window.BS_CONFIG?.httpConfigs?.baseURL}/static/chinaMap/${params.name=='中华人民共和国'?'country':'province'}/${params.name}.json` + const map = await this.$dataRoomAxios.get(decodeURI(mapUrl), {}, true) + // 利用函数的作用域,可以直接拿上面的name来用 + const index = option.graphic.findIndex(i => i.style.text === params.name); + // 点击元素之后的所有元素全部删除 + option.graphic.splice(index + 1); + // 很多操作重复了,你可以将公共部分抽离出来 + option.geo.map = params.name; + this.changeData({...config,customize:{...config.customize,level:'province',scope:params.name}}) + echarts.registerMap(params.name, map); + this.charts.setOption(option, true); + }, + }); + 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}}) + option.geo.map = params.name + echarts.registerMap(params.name, map); + this.charts.setOption(option, true); + }); } } } diff --git a/data-room-ui/packages/BasicComponents/Map/setting.vue b/data-room-ui/packages/BasicComponents/Map/setting.vue index dc9c9eae..244d5b13 100644 --- a/data-room-ui/packages/BasicComponents/Map/setting.vue +++ b/data-room-ui/packages/BasicComponents/Map/setting.vue @@ -74,6 +74,39 @@ /> + + + + + + + + +