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

fix: 完善飞线地图组件的联动和被联动功能；

Browse Source
main
hong.yang 1 year ago
parent 43faf11d9b
commit 5ab2dccba7
1 changed files with 262 additions and 201 deletions
Show Stats Download Patch File Download Diff File

463
data-room-ui/packages/BasicComponents/FlyMap/index.vue
Unescape Escape View File

@ -3,7 +3,7 @@
class="bs-design-wrap bs-bar" class="bs-design-wrap bs-bar"
style="width: 100%; height: 100%" style="width: 100%; height: 100%"
> >
<el-button v-if="currentDeep > 0" class="button" type='text' @click="jumpTo(config)"> 返回上一级</el-button> <el-button v-if="currentDeep > 0" class="button" type='text' @click="backToPreviousLevel(config)"> 返回上一级</el-button>
<div <div
:id="`chart${config.code}`" :id="`chart${config.code}`"
style="width: 100%; height: 100%" style="width: 100%; height: 100%"
@ -84,250 +84,311 @@ export default {
}) })
} }
}, },
/**
* 数据格式化
* 该方法继承自commonMixins
* @param {*} config
* @param {Array} data
*/
dataFormatting(config, data) { dataFormatting(config, data) {
let coordinates = {}
if (data.data) {
coordinates = this.formatMapData(data.data)
}
config.option = { config.option = {
...config.option, ...config.option,
data: data?.data data: data?.data,
...coordinates
} }
return config return config
}, },
async jumpTo(config) { /**
* 格式化地图飞线数据
* @param {Array} data
*/
formatMapData(data) {
const lines_coord = []
let from_coord = []
let to_coord = []
if (data) {
// 起点名称
const fromName = this.config.customize.dataField?.fromName || 'from'
// 起点经度
const fromLng = this.config.customize.dataField?.fromLng || 'lng1'
// 起点纬度
const fromLat = this.config.customize.dataField?.fromLat || 'lat1'
// 终点名称
const toName = this.config.customize.dataField?.toName || 'to'
// 终点经度
const toLng = this.config.customize.dataField?.toLng || 'lng2'
// 终点纬度
const toLat = this.config.customize.dataField?.toLat || 'lat2'
// 值
const value = this.config.customize.dataField?.value || 'value'
data.forEach(val => {
// 飞线
lines_coord.push({value: val[value], msg: {...val}, coords: [[val[fromLng], val[fromLat]], [val[toLng], val[toLat]]]})
// 起点散点
from_coord.push({name: val[fromName], value: [val[fromLng], val[fromLat], val[value]], msg: {...val}})
// 终点散点
to_coord.push({name: val[toName], value: [val[toLng], val[toLat], val[value]], msg: {...val}})
})
}
return {
lines_coord,
from_coord,
to_coord
}
},
/**
* 返回上一级
* @param {*} config
*/
async backToPreviousLevel(config) {
this.currentDeep-- this.currentDeep--
let map = this.mapList[this.currentDeep] let map = this.mapList[this.currentDeep]
// 移除mapList中的最后一个元素 // 移除mapList中的最后一个元素
this.mapList.pop() this.mapList.pop()
let mapData = JSON.parse(map.geoJson) let mapData = JSON.parse(map.geoJson)
this.option.geo.map = map.name; this.option.geo.map = map.name;
this.changeData({...config, customize: {...config.customize, level: map.level, scope: map.name}}) // this.changeData({...config, customize: {...config.customize, level: map.level, scope: map.name}})
echarts.registerMap(map.name, mapData); echarts.registerMap(map.name, mapData);
this.charts.setOption(this.option, true); this.charts.setOption(this.option, true);
}, },
/**
* 修改地图数据
* @param {Array} data
*/
changeMapData(data) {
let coordinates = this.formatMapData(data)
this.option.series[0].data = coordinates.to_coord
this.option.series[1].data = coordinates.from_coord
this.option.series[2].data = coordinates.lines_coord
this.charts.setOption(this.option)
},
/**
* 初始化地图
* 该方法继承自commonMixins
* @param {*} config
*/
async newChart(config) { async newChart(config) {
this.charts = echarts.init( this.charts = echarts.init(
document.getElementById(`chart${this.config.code}`) document.getElementById(`chart${this.config.code}`)
) )
// 处理option，将配置项转换为echarts的option
this.handleOption(config)
this.level = config.customize.level this.level = config.customize.level
const lines_coord = []
let fromCoord = []
let coord = []
let hasMapId = !!config.customize.mapId let hasMapId = !!config.customize.mapId
// 根据mapId获取地图数据 // 根据mapId获取地图数据
let mapInfoUrl = `${window.BS_CONFIG?.httpConfigs?.baseURL}/bigScreen/map/info/${config.customize.mapId}` let mapInfoUrl = `${window.BS_CONFIG?.httpConfigs?.baseURL}/bigScreen/map/info/${config.customize.mapId}`
// 如果设置了地图id，就用地图id获取地图数据，否则用默认的世界地图 // 如果设置了地图id，就用地图id获取地图数据，否则用默认的世界地图
if (!hasMapId) { if (!hasMapId) {
mapInfoUrl = `${window.BS_CONFIG?.httpConfigs?.baseURL}/bigScreen/map/default/worldMap/world` mapInfoUrl = `${window.BS_CONFIG?.httpConfigs?.baseURL}/bigScreen/map/default/worldMap/world`
} }
this.$dataRoomAxios.get(mapInfoUrl, {}, true).then(res => { const mapResp = await this.$dataRoomAxios.get(decodeURI(mapInfoUrl), {}, true)
if (this.config.option.data) { let mapData = hasMapId ? JSON.parse(mapResp.data.geoJson) : mapResp
// 起点名称 if (hasMapId && mapResp.data.uploadedGeoJson !== 1) {
const fromName = config.customize.dataField?.fromName || 'from' // 没有上传过geoJson
// 起点经度 this.$message({
const fromLng = config.customize.dataField?.fromLng || 'lng1' message: '请先上传地图数据',
// 起点纬度 type: 'warning'
const fromLat = config.customize.dataField?.fromLat || 'lat1' })
// 终点名称 return
const toName = config.customize.dataField?.toName || 'to' }
// 终点经度 this.mapList.push(mapResp.data)
const toLng = config.customize.dataField?.toLng || 'lng2' echarts.registerMap(config.customize.scope, mapData)
// 终点纬度 this.charts.setOption(this.option)
const toLat = config.customize.dataField?.toLat || 'lat2' // 注册点击事件
// 值 this.registerClickEvent(config)
const value = config.customize.dataField?.value || 'value' },
/**
this.config.option.data.forEach(val => { * 处理配置项option
// 飞线 * @param {*} config
lines_coord.push({value: val[value], msg: {...val}, coords: [[val[fromLng], val[fromLat]], [val[toLng], val[toLat]]]}) */
// 起点散点 handleOption(config) {
fromCoord.push({name: val[fromName], value: [val[fromLng], val[fromLat], val[value]], msg: {...val}}) this.option = {
// 终点散点 nameMap: config.customize.level == '0' ? nameMap : '',
coord.push({name: val[toName], value: [val[toLng], val[toLat], val[value]], msg: {...val}}) // graphic: [
}) // ],
} geo: {
let mapData = hasMapId ? JSON.parse(res.data.geoJson) : res map: config.customize.scope,
if (hasMapId && res.data.uploadedGeoJson !== 1) { zlevel: 10,
// 没有上传过geoJson show: true,
this.$message({ layoutCenter: ['50%', '50%'],
message: '请先上传地图数据', roam: true,
type: 'warning' layoutSize: "100%",
}) zoom: 1,
return label: {
} // 通常状态下的样式
normal: {
this.mapList.push(res.data) show: config.customize.mapName,
echarts.registerMap(config.customize.scope, mapData) textStyle: {
this.option = { color: config.customize.mapNameColor || '#fff',
nameMap: config.customize.level == '0' ? nameMap : '', fontSize: config.customize.mapNameSize || 12,
// graphic: [ fontWeight: config.customize.mapNameWeight || 500
// ],
geo: {
map: config.customize.scope,
zlevel: 10,
show: true,
layoutCenter: ['50%', '50%'],
roam: true,
layoutSize: "100%",
zoom: 1,
label: {
// 通常状态下的样式
normal: {
show: config.customize.mapName,
textStyle: {
color: config.customize.mapNameColor || '#fff',
fontSize: config.customize.mapNameSize || 12,
fontWeight: config.customize.mapNameWeight || 500
}
},
// 鼠标放上去的样式
emphasis: {
textStyle: {
color: config.customize.mapNameColor || '#fff',
fontSize: config.customize.mapNameSize || 12,
fontWeight: config.customize.mapNameWeight || 500
}
} }
}, },
// 地图区域的样式设置 // 鼠标放上去的样式
itemStyle: { emphasis: {
normal: { textStyle: {
borderColor: config.customize.mapLineColor, color: config.customize.mapNameColor || '#fff',
borderWidth: 1, fontSize: config.customize.mapNameSize || 12,
areaColor: config.customize.areaColor, fontWeight: config.customize.mapNameWeight || 500
shadowColor: 'fffff',
shadowOffsetX: -2,
shadowOffsetY: 2,
shadowBlur: 10
},
// 鼠标放上去高亮的样式
emphasis: {
areaColor: '#389BB7',
borderWidth: 0
} }
} }
}, },
tooltip: { // 地图区域的样式设置
backgroundColor: config.customize.tooltipBackgroundColor, itemStyle: {
borderColor: config.customize.borderColor, normal: {
show: true, borderColor: config.customize.mapLineColor,
textStyle: { borderWidth: 1,
color: config.customize.fontColor, areaColor: config.customize.areaColor,
shadowColor: 'fffff',
shadowOffsetX: -2,
shadowOffsetY: 2,
shadowBlur: 10
}, },
// 鼠标放上去高亮的样式
emphasis: {
areaColor: '#389BB7',
borderWidth: 0
}
}
},
tooltip: {
backgroundColor: config.customize.tooltipBackgroundColor,
borderColor: config.customize.borderColor,
show: true,
textStyle: {
color: config.customize.fontColor,
}, },
series: [ },
{ series: [
type: 'effectScatter', {
coordinateSystem: 'geo', type: 'effectScatter',
zlevel: 15, coordinateSystem: 'geo',
symbolSize: 8, zlevel: 15,
rippleEffect: { symbolSize: 8,
period: 4, brushType: 'stroke', scale: 4 rippleEffect: {
}, period: 4, brushType: 'stroke', scale: 4
tooltip: {
trigger: 'item',
formatter(params) {
const a = eval(config.customize.scatterFormatter)
return a
},
},
itemStyle: {
color: config.customize.scatterColor,
opacity: 1
},
data: coord
}, },
{ tooltip: {
type: 'effectScatter', trigger: 'item',
coordinateSystem: 'geo', formatter(params) {
zlevel: 15, const a = eval(config.customize.scatterFormatter)
symbolSize: 12, return a
tooltip: {
trigger: 'item',
formatter(params) {
const a = eval(config.customize.scatterFormatter)
return a
},
}, },
rippleEffect: { },
period: 6, brushType: 'stroke', scale: 8 itemStyle: {
color: config.customize.scatterColor,
opacity: 1
},
data: config.option.to_coord
},
{
type: 'effectScatter',
coordinateSystem: 'geo',
zlevel: 15,
symbolSize: 12,
tooltip: {
trigger: 'item',
formatter(params) {
const a = eval(config.customize.scatterFormatter)
return a
}, },
},
rippleEffect: {
period: 6, brushType: 'stroke', scale: 8
},
itemStyle: { itemStyle: {
color: config.customize.scatterCenterColor, color: config.customize.scatterCenterColor,
opacity: 1 opacity: 1
},
data: fromCoord
}, },
{ data: config.option.from_coord
type: 'lines', },
coordinateSystem: 'geo', {
zlevel: 15, type: 'lines',
tooltip: { coordinateSystem: 'geo',
trigger: 'item', zlevel: 15,
formatter(params) { tooltip: {
const a = eval(config.customize.lineFormatter) trigger: 'item',
return a formatter(params) {
}, const a = eval(config.customize.lineFormatter)
}, return a
effect: {
show: true,
period: 5,
trailLength: 0,
symbol: config.customize.symbol,
color: config.customize.symbolColor,
symbolSize: config.customize.symbolSize,
},
lineStyle: {
normal: {
color: function (value) {
return '#ffffff'
}, width: 2, opacity: 0.6, curveness: 0.2
}
}, },
data: lines_coord },
} effect: {
show: true,
period: 5,
trailLength: 0,
symbol: config.customize.symbol,
color: config.customize.symbolColor,
symbolSize: config.customize.symbolSize,
},
lineStyle: {
normal: {
color: function (value) {
return '#ffffff'
}, width: 2, opacity: 0.6, curveness: 0.2
}
},
data: config.option.lines_coord
}
] ]
} }
if (config.customize.visual) { if (config.customize.visual) {
this.option.visualMap = { this.option.visualMap = {
show: false, show: false,
min: config.customize.range[0], min: config.customize.range[0],
max: config.customize.range[1], max: config.customize.range[1],
seriesIndex: [0, 2], seriesIndex: [0, 2],
inRange: { inRange: {
color: config.customize.rangeColor color: config.customize.rangeColor
}
} }
} }
this.charts.setOption(this.option) }
// 点击下钻 },
this.charts.on('click', async (params) => { /**
if (params.name == '') return * 注册点击事件
if (!config.customize.down) { * @param config 地图组件配置项
return */
} registerClickEvent(config) {
// 到达允许下钻的层数，则不再下钻 this.charts.on('click', async (params) => {
if (this.currentDeep >= config.customize.downLevel) return let data = params?.data?.msg
const mapUrl = `${window.BS_CONFIG?.httpConfigs?.baseURL}/bigScreen/map/data/${this.mapList[this.currentDeep].id}/${params.name}` if (data) {
const map = await this.$dataRoomAxios.get(decodeURI(mapUrl), {}, false) this.linkage({...data, clickAreaName: params.name})
// 地图不可用 } else {
if (map.available !== 1) { this.linkage({clickAreaName: params.name})
this.$message({ }
message: '未找到该地图配置', if (params.name == '') return
type: 'warning' if (!config.customize.down) {
}) return
return }
} // 到达允许下钻的层数，则不再下钻
this.currentDeep++ if (this.currentDeep >= config.customize.downLevel) return
this.mapList.push(map) console.log('mapList',this.mapList)
this.changeData({...config, customize: {...config.customize, scope: params.name}}) const mapUrl = `${window.BS_CONFIG?.httpConfigs?.baseURL}/bigScreen/map/data/${this.mapList[this.currentDeep].id}/${params.name}`
this.option.geo.map = params.name const map = await this.$dataRoomAxios.get(decodeURI(mapUrl), {}, false)
echarts.registerMap(params.name, JSON.parse(map.geoJson)); // 地图不可用
this.charts.setOption(this.option, true); if (map.available !== 1) {
}); this.$message({
}) message: '未找到该地图配置',
type: 'warning'
})
return
}
this.currentDeep++
this.mapList.push(map)
// this.changeData({...config, customize: {...config.customize, scope: params.name}})
this.option.geo.map = params.name
echarts.registerMap(params.name, JSON.parse(map.geoJson));
this.charts.setOption(this.option, true);
});
} }
} }
} }
</script> </script>

Write Preview
Loading…
Cancel
Save