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

feat: 地图、飞线地图组件优化，修改地图GEO获取方式，新增地图数据管理路由

Browse Source 
地图、飞线地图组件优化，修改地图GEO获取方式，新增地图数据管理路由
main
hong.yang 2 years ago
parent 69f1c09415
commit 5621735a1e
11 changed files with 661 additions and 379 deletions
Show Stats Download Patch File Download Diff File

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

@ -1,9 +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 class="button" v-if="this.level=='province'&&config.customize.down" @click="jumpTo(config)" type='text' > 返回上一级</el-button> <el-button v-if="currentDeep > 0" 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%"
@ -17,6 +17,7 @@ import {nameMap} from './json/mapData.js'
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],
@ -30,22 +31,24 @@ export default {
default: () => ({}) default: () => ({})
} }
}, },
data () { data() {
return { return {
charts: null, charts: null,
hasData: false, hasData: false,
level:'', level: '',
option:{} option: {},
mapList: [],
currentDeep: 0,
} }
}, },
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()
@ -55,14 +58,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) {
@ -71,7 +74,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) => {
@ -80,51 +84,74 @@ export default {
}) })
} }
}, },
dataFormatting (config, data) { dataFormatting(config, data) {
config.option = { config.option = {
...config.option, ...config.option,
data: data?.data data: data?.data
} }
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.changeData({...config, customize: {...config.customize, level: map.level, scope: map.name}})
echarts.registerMap(map.name, mapData);
this.charts.setOption(this.option, true); this.charts.setOption(this.option, true);
}, },
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}`)
) )
this.level=config.customize.level this.level = config.customize.level
const lines_coord = [] const lines_coord = []
let fromCoord=[] let fromCoord = []
let coord=[] let coord = []
const mapUrl =config.customize.level==='world'?`${window.BS_CONFIG?.httpConfigs?.baseURL}/static/worldMap/world.json`:`${window.BS_CONFIG?.httpConfigs?.baseURL}/static/chinaMap/${config.customize.level}/${config.customize.dataMap}`
this.$dataRoomAxios.get(decodeURI(mapUrl), {}, true).then(res=>{ let hasMapId = !!config.customize.mapId
this.config.option.data.forEach(val => {
lines_coord.push({value:val.value,msg:{...val}, coords:[[val.lat1,val.lng1],[val.lat2,val.lng2]]}) // 根据mapId获取地图数据
if(val.type==='move_in'){ let mapInfoUrl = `${window.BS_CONFIG?.httpConfigs?.baseURL}/bigScreen/map/info/${config.customize.mapId}`
coord.push({name:val.from,value:[val.lat1,val.lng1,val.value],msg:{...val}}) // 如果设置了地图id，就用地图id获取地图数据，否则用默认的世界地图
fromCoord.push({name:val.to,value:[val.lat2,val.lng2,val.value],msg:{...val}}) if (!hasMapId) {
}else{ mapInfoUrl = `${window.BS_CONFIG?.httpConfigs?.baseURL}/static/worldMap/world.json`
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}}) this.$dataRoomAxios.get(mapInfoUrl, {}, true).then(res => {
} if (this.config.option.data) {
}) this.config.option.data.forEach(val => {
echarts.registerMap(config.customize.scope, res) lines_coord.push({value: val.value, msg: {...val}, coords: [[val.lat1, val.lng1], [val.lat2, val.lng2]]})
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}})
} 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}})
}
})
}
let mapData = hasMapId ? JSON.parse(res.data.geoJson) : res
if (hasMapId && res.data.uploadedGeoJson !== 1) {
// 没有上传过geoJson
this.$message({
message: '请先上传地图数据',
type: 'warning'
})
return
}
this.mapList.push(res.data)
echarts.registerMap(config.customize.scope, mapData)
this.option = { this.option = {
nameMap:config.customize.level=='world'?nameMap:'', nameMap: config.customize.level == '0' ? nameMap : '',
// graphic: [ // graphic: [
// ], // ],
geo: { geo: {
map: config.customize.scope, map: config.customize.scope,
zlevel: 10, zlevel: 10,
show:true, show: true,
layoutCenter: ['50%', '50%'], layoutCenter: ['50%', '50%'],
roam: true, roam: true,
layoutSize: "100%", layoutSize: "100%",
@ -166,74 +193,81 @@ export default {
backgroundColor: config.customize.tooltipBackgroundColor, backgroundColor: config.customize.tooltipBackgroundColor,
borderColor: config.customize.borderColor, borderColor: config.customize.borderColor,
show: true, show: true,
textStyle: { textStyle: {
color: config.customize.fontColor, color: config.customize.fontColor,
}, },
}, },
series: [ series: [
{ {
type:'effectScatter', type: 'effectScatter',
coordinateSystem: 'geo', coordinateSystem: 'geo',
zlevel: 15, zlevel: 15,
symbolSize:8, symbolSize: 8,
rippleEffect: { rippleEffect: {
period: 4, brushType: 'stroke', scale: 4 period: 4, brushType: 'stroke', scale: 4
}, },
tooltip: { tooltip: {
trigger: 'item', trigger: 'item',
formatter(params) { formatter(params) {
const a= eval(config.customize.scatterFormatter) const a = eval(config.customize.scatterFormatter)
return a return a
},
},
itemStyle:{
color:config.customize.scatterColor,
opacity:1
}, },
data:coord },
itemStyle: {
color: config.customize.scatterColor,
opacity: 1
},
data: coord
}, },
{ {
type:'effectScatter', type: 'effectScatter',
coordinateSystem: 'geo', coordinateSystem: 'geo',
zlevel: 15, zlevel: 15,
symbolSize:12, symbolSize: 12,
tooltip: { tooltip: {
trigger: 'item', trigger: 'item',
formatter(params) { formatter(params) {
const a= eval(config.customize.scatterFormatter) const a = eval(config.customize.scatterFormatter)
return a return a
},
},
rippleEffect: {
period: 6, brushType: 'stroke', scale: 8
}, },
},
rippleEffect: {
period: 6, brushType: 'stroke', scale: 8
},
itemStyle:{ itemStyle: {
color:config.customize.scatterCenterColor, color: config.customize.scatterCenterColor,
opacity:1 opacity: 1
}, },
data:fromCoord data: fromCoord
}, },
{ {
type:'lines', type: 'lines',
coordinateSystem:'geo', coordinateSystem: 'geo',
zlevel: 15, zlevel: 15,
tooltip: { tooltip: {
trigger: 'item', trigger: 'item',
formatter(params) { formatter(params) {
const a= eval(config.customize.lineFormatter) const a = eval(config.customize.lineFormatter)
return a 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){ effect: {
return '#ffffff' show: true,
},width: 2, opacity: 0.6, curveness: 0.2 } period: 5,
}, trailLength: 0,
data:lines_coord 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
} }
] ]
@ -243,24 +277,42 @@ export default {
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.setOption(this.option)
this.charts.on('click', async(params)=> { // 点击下钻
if(params.name=='') return this.charts.on('click', async (params) => {
if(config.customize.down===false||this.level==='province') return if (params.name == '') return
this.level='province' if (!config.customize.down) {
const mapUrl =`${window.BS_CONFIG?.httpConfigs?.baseURL}/static/chinaMap/province/${params.name}.json` this.$message({
const map = await this.$dataRoomAxios.get(decodeURI(mapUrl), {}, true) message: '该地图未开启下钻',
this.changeData({...config,customize:{...config.customize,level:'province',scope:params.name}}) type: 'warning'
})
return
}
// 到达允许下钻的层数，则不再下钻
if (this.currentDeep >= config.customize.downLevel) return
const mapUrl = `${window.BS_CONFIG?.httpConfigs?.baseURL}/bigScreen/map/data/${this.mapList[this.currentDeep].id}/${params.name}`
const map = await this.$dataRoomAxios.get(decodeURI(mapUrl), {}, false)
// 地图不可用
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 this.option.geo.map = params.name
echarts.registerMap(params.name, map); echarts.registerMap(params.name, JSON.parse(map.geoJson));
this.charts.setOption(this.option, true); this.charts.setOption(this.option, true);
}); });
}) })
} }
} }
@ -269,17 +321,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 {
padding: 0 16px; padding: 0 16px;
position: relative; position: relative;
.button{
.button {
position: absolute; position: absolute;
z-index: 999; z-index: 999;
} }

150
data-room-ui/packages/BasicComponents/FlyMap/setting.vue
Unescape Escape View File

@ -55,40 +55,56 @@
@change="changeLevel()" @change="changeLevel()"
> >
<el-option <el-option
label="世界" v-for="level in levelList"
value="world" :key="level.value"
/> :label="level.label"
<el-option :value="level.value"
label="国家"
value="country"
/>
<el-option
label="省份"
value="province"
/> />
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item <el-form-item
v-if="config.customize.level == 'province'" label="地图"
label="地图显示区域"
label-width="100px" label-width="100px"
> >
<el-select <el-cascader
v-model="config.customize.dataMap" ref="cascade"
popper-class="bs-el-select" v-model="config.customize.mapId"
class="bs-el-select" popper-class="bs-el-cascader"
@change="changeMap" :options="mapTree"
> :props="{ value: 'id', label: 'name', children: 'children', emitPath: false }"
<el-option @change="mapSelect">
v-for="map in mapList"
:key="map.name" <template slot-scope="{ node, data }">
:label="map.name" <span style="float: left">{{ data.name }}</span>
:value="map.url" <span v-if="data.disabled" style="float: right; color: #8492a6; font-size: 13px"> 未配置 </span>
/> </template>
</el-select> </el-cascader>
</el-form-item> </el-form-item>
<!-- <el-form-item-->
<!-- v-if="config.customize.level == 'province'"-->
<!-- label="地图显示区域"-->
<!-- label-width="100px"-->
<!-- >-->
<!-- <el-select-->
<!-- v-model="config.customize.dataMap"-->
<!-- popper-class="bs-el-select"-->
<!-- class="bs-el-select"-->
<!-- @change="changeMap"-->
<!-- >-->
<!-- <el-option-->
<!-- v-for="map in mapList"-->
<!-- :key="map.name"-->
<!-- :label="map.name"-->
<!-- :value="map.url"-->
<!-- />-->
<!-- </el-select>-->
<!-- </el-form-item>-->
<el-form-item <el-form-item
v-if="config.customize.level == 'country'"
label="是否开启下钻" label="是否开启下钻"
label-width="100px" label-width="100px"
> >
@ -98,6 +114,24 @@
active-color="#007aff" active-color="#007aff"
/> />
</el-form-item> </el-form-item>
<el-form-item
v-if="config.customize.down"
label="允许下钻层级"
label-width="100px"
>
<el-select
v-model="config.customize.downLevel"
popper-class="bs-el-select"
class="bs-el-select">
<el-option
v-for="level in downLevelList"
:key="level.value"
:label="level.label"
:value="level.value"
/>
</el-select>
</el-form-item>
<!-- <el-form-item <!-- <el-form-item
v-if="config.customize.down" v-if="config.customize.down"
label="头部字体颜色" label="头部字体颜色"
@ -323,7 +357,9 @@ export default {
props: {}, props: {},
data () { data () {
return { return {
mapTree: [],
mapList: [], mapList: [],
currentMap: {},
predefineThemeColors: [ predefineThemeColors: [
'#007aff', '#007aff',
'#1aa97b', '#1aa97b',
@ -352,7 +388,27 @@ export default {
name:'无', name:'无',
value:'none' value:'none'
} }
] ],
levelList: [
{value: '0', label: '世界'},
{value: '1', label: '国家'},
{value: '2', label: '省份'},
{value: '3', label: '城市'},
{value: '4', label: '区县'}
],
// 旧版本地图等级，该数据用于兼容旧版本
oldLevelMap: {
'world' : '0',
'country' : '1',
'province' : '2',
},
downLevelList: [
{value: 1, label: '下钻一层'},
{value: 2, label: '下钻两层'},
{value: 3, label: '下钻三层'},
{value: 4, label: '下钻四层'},
{value: 5, label: '下钻五层'}
],
} }
}, },
computed: { computed: {
@ -366,37 +422,40 @@ export default {
} }
}, },
watch: { watch: {
'config.customize.level': { // 'config.customize.level': {
handler (val) { // handler (val) {
this.getMapList() // this.getMapList()
} // }
} // }
}, },
mounted () { mounted () {
this.getMapList() // this.getMapList()
this.getMapTree()
}, },
methods: { methods: {
getMapList () { getMapList () {
this.$dataRoomAxios.get(`${window.BS_CONFIG?.httpConfigs?.baseURL}/bigScreen/design/map/list/${this.config.customize.level}`).then((res) => { this.$dataRoomAxios.get(`${window.BS_CONFIG?.httpConfigs?.baseURL}/bigScreen/design/map/list/${this.config.customize.level}`).then((res) => {
this.mapList = res this.mapList = res
}) })
},
getMapTree() {
const levelConst = ['0', '1', '2', '3', '4']
if (!levelConst.includes(this.config.customize.level)) {
this.config.customize.level = this.oldLevelMap[this.config.customize.level] || '0'
}
this.$dataRoomAxios.get(`${window.BS_CONFIG?.httpConfigs?.baseURL}/bigScreen/map/tree/${this.config.customize.level}`).then((res) => {
this.mapTree = res
})
},
mapSelect (mapId) {
let mapData = this.$refs['cascade'].getCheckedNodes()[0].data
this.currentMap = mapData
}, },
changeMap(val){ changeMap(val){
this.config.customize.scope=val.slice(0,-5) this.config.customize.scope=val.slice(0,-5)
}, },
changeLevel () { changeLevel () {
if (this.config.customize.level === 'country') { this.getMapTree()
this.config.customize.dataMap = '中华人民共和国.json'
this.config.customize.scope='中国'
} else if (this.config.customize.level === 'province') {
this.getMapList()
this.config.customize.dataMap = '安徽省.json'
this.config.customize.scope='安徽省'
this.config.customize.down=false
}else{
this.config.customize.scope='世界'
this.config.customize.down=false
}
}, },
delColor () { delColor () {
this.colors = [] this.colors = []
@ -431,4 +490,5 @@ export default {
.lc-field-body { .lc-field-body {
padding: 12px 16px; padding: 12px 16px;
} }
</style> </style>

6
data-room-ui/packages/BasicComponents/FlyMap/settingConfig.js
Unescape Escape View File

@ -41,6 +41,8 @@ const customConfig = {
contribution: false contribution: false
}, },
customize: { customize: {
// 地图id
mapId: '',
// 是否显示文字 // 是否显示文字
mapName: false, mapName: false,
// 悬浮框背景色 // 悬浮框背景色
@ -62,6 +64,8 @@ const customConfig = {
fontSize:'30', fontSize:'30',
// 是否开启下钻 // 是否开启下钻
down: false, down: false,
// 允许下钻的层级
downLevel: 1,
// 轨迹图像 // 轨迹图像
symbol: 'arrow', symbol: 'arrow',
// 轨迹颜色 // 轨迹颜色
@ -69,7 +73,7 @@ const customConfig = {
// 轨迹大小 // 轨迹大小
symbolSize:8, symbolSize:8,
// 地图级别 // 地图级别
level: 'country', level: 1,
// 范围 // 范围
scope: '中国', scope: '中国',
// 地图区域颜色 // 地图区域颜色

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

@ -1,9 +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 class="button" v-if="this.level=='province'&&config.customize.down" @click="jumpTo(config)" type='text' > 返回上一级</el-button> <el-button v-if="currentDeep > 0" 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%"
@ -16,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],
@ -29,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()
@ -54,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) {
@ -70,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) => {
@ -79,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,
@ -90,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.changeData({...config, customize: {...config.customize, level: map.level, scope: map.name}})
echarts.registerMap(map.name, mapData);
this.charts.setOption(this.option, true); 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: {
@ -170,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
}, },
// 标志的样式 color: config.customize.scatterColor
itemStyle: { },
normal: { // 标志的样式
color: config.customize.scatterBackgroundColor, itemStyle: {
shadowBlur: 2, normal: {
shadowColor: 'D8BC37' color: config.customize.scatterBackgroundColor,
} shadowBlur: 2,
}, shadowColor: 'D8BC37'
data: config.option?.data }
} },
] 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 = {
@ -273,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)=> { // 点击下钻
if(params.name=='') return this.charts.on('click', async (params) => {
if(config.customize.down===false||this.level==='province') return if (params.name == '') return
this.level='province' if (!config.customize.down) {
const mapUrl =`${window.BS_CONFIG?.httpConfigs?.baseURL}/static/chinaMap/province/${params.name}.json` this.$message({
const map = await this.$dataRoomAxios.get(decodeURI(mapUrl), {}, true) message: '该地图未开启下钻',
this.changeData({...config,customize:{...config.customize,level:'province',scope:params.name}}) type: 'warning'
this.option.geo.map = params.name })
echarts.registerMap(params.name, map); return
this.charts.setOption(this.option, true); }
}); // 到达允许下钻的层数，则不再下钻
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);
});
} }
} }
} }
@ -295,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;
} }

153
data-room-ui/packages/BasicComponents/Map/setting.vue
Unescape Escape View File

@ -55,36 +55,33 @@
@change="changeLevel()" @change="changeLevel()"
> >
<el-option <el-option
label="国家" v-for="level in levelList"
value="country" :key="level.value"
/> :label="level.label"
<el-option :value="level.value"
label="省份"
value="province"
/> />
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item <el-form-item
v-if="config.customize.level == 'province'" label="地图"
label="地图显示区域"
label-width="100px" label-width="100px"
> >
<el-select <el-cascader
v-model="config.customize.dataMap" ref="cascade"
popper-class="bs-el-select" v-model="config.customize.mapId"
class="bs-el-select" popper-class="bs-el-cascader"
@change="changeMap()" :options="mapTree"
> :props="{ value: 'id', label: 'name', children: 'children', emitPath: false }"
<el-option @change="mapSelect">
v-for="map in mapList"
:key="map.name" <template slot-scope="{ node, data }">
:label="map.name" <span style="float: left">{{ data.name }}</span>
:value="map.url" <span v-if="data.disabled" style="float: right; color: #8492a6; font-size: 13px"> 未配置 </span>
/> </template>
</el-select> </el-cascader>
</el-form-item> </el-form-item>
<el-form-item <el-form-item
v-if="config.customize.level == 'country'"
label="是否开启下钻" label="是否开启下钻"
label-width="100px" label-width="100px"
> >
@ -94,6 +91,59 @@
active-color="#007aff" active-color="#007aff"
/> />
</el-form-item> </el-form-item>
<el-form-item
label="比例"
label-width="100px"
>
<el-slider
v-model="config.customize.zoom"
class="bs-el-slider-dark"
:step="0.1"
:min="0.1"
:max="5"
></el-slider>
</el-form-item>
<el-form-item
label="中心点x轴位置"
label-width="100px"
>
<el-slider
class="bs-el-slider-dark"
v-model="config.customize.center1"
:step="1"
:min="1"
:max="100"
></el-slider>
</el-form-item>
<el-form-item
label="中心点y轴位置"
label-width="100px"
>
<el-slider
class="bs-el-slider-dark"
v-model="config.customize.center2"
:step="1"
:min="1"
:max="100"
></el-slider>
</el-form-item>
<el-form-item
v-if="config.customize.down"
label="允许下钻层级"
label-width="100px"
>
<el-select
v-model="config.customize.downLevel"
popper-class="bs-el-select"
class="bs-el-select">
<el-option
v-for="level in downLevelList"
:key="level.value"
:label="level.label"
:value="level.value"
/>
</el-select>
</el-form-item>
<el-form-item <el-form-item
v-if="config.customize.down" v-if="config.customize.down"
label="头部字体颜色" label="头部字体颜色"
@ -295,7 +345,29 @@ export default {
'#2B74CF', '#2B74CF',
'#00BC9D', '#00BC9D',
'#ED7D32' '#ED7D32'
] ],
mapTree: [],
currentMap: {},
levelList: [
{value: '0', label: '世界'},
{value: '1', label: '国家'},
{value: '2', label: '省份'},
{value: '3', label: '城市'},
{value: '4', label: '区县'}
],
// 旧版本地图等级，该数据用于兼容旧版本
oldLevelMap: {
'world' : '0',
'country' : '1',
'province' : '2',
},
downLevelList: [
{value: 1, label: '下钻一层'},
{value: 2, label: '下钻两层'},
{value: 3, label: '下钻三层'},
{value: 4, label: '下钻四层'},
{value: 5, label: '下钻五层'}
],
} }
}, },
computed: { computed: {
@ -310,30 +382,27 @@ export default {
}, },
watch: {}, watch: {},
mounted () { mounted () {
this.getMapList() this.getMapTree()
}, },
methods: { methods: {
getMapList () { getMapTree() {
this.$dataRoomAxios.get(`${window.BS_CONFIG?.httpConfigs?.baseURL}/bigScreen/design/map/list/${this.config.customize.level}`).then((res) => { const levelConst = ['0', '1', '2', '3', '4']
this.mapList = res if (!levelConst.includes(this.config.customize.level)) {
this.config.customize.level = this.oldLevelMap[this.config.customize.level] || '0'
}
this.$dataRoomAxios.get(`${window.BS_CONFIG?.httpConfigs?.baseURL}/bigScreen/map/tree/${this.config.customize.level}`).then((res) => {
this.mapTree = res
}) })
}, },
mapSelect (mapId) {
let mapData = this.$refs['cascade'].getCheckedNodes()[0].data
this.currentMap = mapData
},
changeMap(val){ changeMap(val){
this.config.customize.scope=val.slice(0,-5) this.config.customize.scope=val.slice(0,-5)
}, },
changeLevel () { changeLevel () {
this.getMapList() this.getMapTree()
if (this.config.customize.level === 'country') {
this.config.customize.dataMap = '中华人民共和国.json'
this.config.customize.scope='中国'
} else if (this.config.customize.level === 'province') {
this.config.customize.dataMap = '安徽省.json'
this.config.customize.scope='安徽省'
this.config.customize.down=false
}else{
this.config.customize.scope='世界'
this.config.customize.down=false
}
}, },
delColor () { delColor () {
this.colors = [] this.colors = []
@ -368,4 +437,10 @@ export default {
.lc-field-body { .lc-field-body {
padding: 12px 16px; padding: 12px 16px;
} }
/deep/.bs-el-slider-dark {
.el-slider__runway {
background-color: var(--bs-el-background-1) !important;
}
}
</style> </style>

9
data-room-ui/packages/BasicComponents/Map/settingConfig.js
Unescape Escape View File

@ -41,6 +41,11 @@ const customConfig = {
contribution: false contribution: false
}, },
customize: { customize: {
mapId: '',
// 缩放尺寸
zoom: 1,
center1: 50,
center2: 50,
// 是否显示文字 // 是否显示文字
mapName: true, mapName: true,
// 地图背景色 // 地图背景色
@ -61,8 +66,10 @@ const customConfig = {
fontSize: '30', fontSize: '30',
// 是否开启下钻 // 是否开启下钻
down: false, down: false,
// 允许下钻的层级
downLevel: 1,
// 地图级别 // 地图级别
level: 'country', level: 1,
// 范围 // 范围
scope: '中国', scope: '中国',
// 地图区域颜色 // 地图区域颜色

12
data-room-ui/packages/Layout/BigScreenHomeLayout/index.vue
Unescape Escape View File

@ -114,12 +114,12 @@ export default {
path: window?.BS_CONFIG?.routers?.dataSetUrl || '/big-screen-dataSet', path: window?.BS_CONFIG?.routers?.dataSetUrl || '/big-screen-dataSet',
icon: 'icon-data' icon: 'icon-data'
}, },
// { {
// id: 5, id: 5,
// name: '地图数据管理', name: '地图数据管理',
// path: '/big-screen-map-data', path: '/big-screen-map-data',
// icon: 'icon-data' icon: 'icon-data'
// } }
] ]
} }
}, },

43
data-room-ui/packages/MapDataManagement/src/AddForm.vue
Unescape Escape View File

@ -37,20 +37,35 @@
/> />
</el-form-item> </el-form-item>
<el-form-item <el-form-item
label="地图编码" label="地图标识"
prop="mapCode" prop="mapCode"
> >
<template slot="label">
<span>地图标识</span>
<el-tooltip
v-if="mapForm.parentId !== '0'"
class="item"
effect="light"
content="子级的地图标识解析自上级地图的子区块数据"
placement="top"
>
<i
class="el-icon-warning-outline"
style="color: #E3C98C;margin-left: 6px;font-size:14px"
/>
</el-tooltip>
</template>
<el-input <el-input
v-if="mapForm.parentId === '0'" v-if="mapForm.parentId === '0'"
v-model="mapForm.mapCode" v-model="mapForm.mapCode"
class="bs-el-input" class="bs-el-input"
placeholder="请输入地图编码" placeholder="请输入地图标识"
/> />
<el-select <el-select
v-else v-else
v-model="mapForm.mapCode" v-model="mapForm.mapCode"
class="bs-el-select" class="bs-el-select"
placeholder="请选择地图编码" placeholder="请选择地图标识"
popper-class="bs-el-select" popper-class="bs-el-select"
> >
<el-option <el-option
@ -84,17 +99,6 @@
/> />
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item
label="开启下钻"
prop="enableDown"
>
<el-switch
v-model="mapForm.enableDown"
:active-value="1"
:inactive-value="0"
class="bs-el-switch"
/>
</el-form-item>
<el-form-item <el-form-item
label="geoJson上传" label="geoJson上传"
> >
@ -165,8 +169,8 @@ export default {
}, },
computed: { computed: {
autoParseNextLevelShow () { autoParseNextLevelShow () {
// geoJson 不为空，且支持下钻 // geoJson 不为空
return !this.isEmpty(this.mapForm.geoJson) && this.mapForm.enableDown === 1 return !this.isEmpty(this.mapForm.geoJson)
} }
}, },
data () { data () {
@ -174,13 +178,14 @@ export default {
if (this.mapForm.parentId !== '0') { if (this.mapForm.parentId !== '0') {
// 不需要校验 // 不需要校验
callback() callback()
return
} }
repeatCheck({ repeatCheck({
parentId: this.mapForm.parentId, parentId: this.mapForm.parentId,
mapCode: value mapCode: value
}).then(res => { }).then(res => {
if (res) { if (res) {
callback(new Error('地图编码已存在')) callback(new Error('地图标识已存在'))
} else { } else {
callback() callback()
} }
@ -197,14 +202,13 @@ export default {
mapCode: '', mapCode: '',
name: '', name: '',
level: 0, level: 0,
enableDown: 0,
geoJson: {}, geoJson: {},
uploadedGeoJson: 0, uploadedGeoJson: 0,
autoParseNextLevel: 0 autoParseNextLevel: 0
}, },
rules: { rules: {
mapCode: [ mapCode: [
{ required: true, message: '请选择地图编码', trigger: 'blur' }, { required: true, message: '请选择地图标识', trigger: 'blur' },
{ validator: validateCode, trigger: 'blur' } { validator: validateCode, trigger: 'blur' }
], ],
name: [ name: [
@ -231,7 +235,6 @@ export default {
mapCode: `map-${new Date().getTime()}`, mapCode: `map-${new Date().getTime()}`,
name: '', name: '',
level: 0, level: 0,
enableDown: 0,
geoJson: {}, geoJson: {},
uploadedGeoJson: 0, uploadedGeoJson: 0,
autoParseNextLevel: 0 autoParseNextLevel: 0

78
data-room-ui/packages/MapDataManagement/src/EditForm.vue
Unescape Escape View File

@ -37,20 +37,49 @@
/> />
</el-form-item> </el-form-item>
<el-form-item <el-form-item
label="地图编码" label="地图标识"
prop="mapCode" prop="mapCode"
> >
<template slot="label">
<span>地图标识</span>
<el-tooltip
v-if="mapForm.parentId !== '0'"
class="item"
effect="light"
content="地图标识取自上级地图JSON数据中的properties.name值，用于在地图中显示地区名称"
placement="top"
>
<i
class="el-icon-warning-outline"
style="color: #E3C98C;margin-left: 6px;font-size:14px"
/>
</el-tooltip>
</template>
<el-input <el-input
v-model="mapForm.mapCode" v-model="mapForm.mapCode"
class="bs-el-input" class="bs-el-input"
disabled placeholder="请输入地图标识"
placeholder="请输入地图编码"
/> />
</el-form-item> </el-form-item>
<el-form-item <el-form-item
label="地图级别" label="地图级别"
prop="level" prop="level"
> >
<template slot="label">
<span>地图级别</span>
<el-tooltip
v-if="mapForm.parentId !== '0'"
class="item"
effect="light"
content="子级地图的级别根据上级地图自动递增，不可修改"
placement="top"
>
<i
class="el-icon-warning-outline"
style="color: #E3C98C;margin-left: 6px;font-size:14px"
/>
</el-tooltip>
</template>
<el-select <el-select
v-model="mapForm.level" v-model="mapForm.level"
disabled disabled
@ -66,17 +95,6 @@
/> />
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item
label="开启下钻"
prop="enableDown"
>
<el-switch
v-model="mapForm.enableDown"
:active-value="1"
:inactive-value="0"
class="bs-el-switch"
/>
</el-form-item>
<el-form-item <el-form-item
label="geoJson" label="geoJson"
> >
@ -140,7 +158,7 @@
<script> <script>
import _ from 'lodash' import _ from 'lodash'
import vueJsonViewer from 'vue-json-viewer' import vueJsonViewer from 'vue-json-viewer'
import {mapUpdate} from 'data-room-ui/js/utils/mapDataService' import {mapUpdate, getMapChildFromGeoJson} from 'data-room-ui/js/utils/mapDataService'
export default { export default {
name: "EditForm", name: "EditForm",
@ -149,11 +167,33 @@ export default {
}, },
computed: { computed: {
autoParseNextLevelShow() { autoParseNextLevelShow() {
// geoJson 不为空，且支持下钻,且未上传过（说明是刚上传的） // geoJson 不为空，且未上传过（说明是刚上传的）
return !this.isWhitespace(this.mapForm.geoJson) && this.mapForm.enableDown === 1 && this.mapForm.uploadedGeoJson === 0 return !this.isWhitespace(this.mapForm.geoJson) && this.mapForm.uploadedGeoJson === 0
} }
}, },
data() { data() {
const validateCode = (rule, value, callback) => {
console.log(this.mapForm.parentId)
if (this.mapForm.parentId === '0' || this.mapForm.parentId === 0) {
// 不需要校验
callback()
return
}
getMapChildFromGeoJson(this.mapForm.parentId).then(children => {
let repeat = false
children.forEach(child => {
if (child.exist && child.name === value) {
repeat = true
}
})
if (repeat) {
callback(new Error('地图标识已存在'))
} else {
callback()
}
})
}
return { return {
mapFormVisible: false, mapFormVisible: false,
geoJsonVisible: false, geoJsonVisible: false,
@ -165,14 +205,14 @@ export default {
mapCode: '', mapCode: '',
name: '', name: '',
level: 0, level: 0,
enableDown: 0,
geoJson: '', geoJson: '',
uploadedGeoJson: 0, uploadedGeoJson: 0,
autoParseNextLevel: 0 autoParseNextLevel: 0
}, },
rules: { rules: {
mapCode: [ mapCode: [
{required: true, message: '请输入地图编码', trigger: 'blur'} {required: true, message: '请输入地图标识', trigger: 'blur'},
{ validator: validateCode, trigger: 'blur' }
], ],
name: [ name: [
{required: true, message: '请输入地图名称', trigger: 'blur'} {required: true, message: '请输入地图名称', trigger: 'blur'}

16
data-room-ui/packages/MapDataManagement/src/index.vue
Unescape Escape View File

@ -11,7 +11,7 @@
class="bs-el-input" class="bs-el-input"
clearable clearable
maxlength="200" maxlength="200"
placeholder="请输入地图名称或编码" placeholder="请输入地图名称或标识"
/> />
</el-form-item> </el-form-item>
<el-form-item class="filter-item"> <el-form-item class="filter-item">
@ -73,7 +73,7 @@
/> />
<el-table-column <el-table-column
align="center" align="center"
label="编码" label="标识"
prop="mapCode" prop="mapCode"
show-overflow-tooltip show-overflow-tooltip
/> />
@ -91,17 +91,6 @@
<span v-else-if="scope.row.level === 4">区县</span> <span v-else-if="scope.row.level === 4">区县</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column
align="center"
label="开启下钻"
prop="enableDown"
show-overflow-tooltip
>
<template slot-scope="scope">
<span v-if="scope.row.enableDown === 1">是</span>
<span v-else>否</span>
</template>
</el-table-column>
<el-table-column <el-table-column
align="center" align="center"
label="已上传配置JSON" label="已上传配置JSON"
@ -230,7 +219,6 @@ export default {
searchForm: { searchForm: {
searchKey: '', searchKey: '',
level: null, level: null,
enableDown: null,
uploadedGeoJson: null, uploadedGeoJson: null,
parentId: '0' parentId: '0'
}, },

2
data-room-ui/packages/js/utils/mapDataService.js
Unescape Escape View File

@ -37,7 +37,7 @@ const mapDelete = (id = '-1') => Vue.prototype.$dataRoomAxios.post(`/bigScreen/m
* 级联删除地图 * 级联删除地图
* @param id * @param id
*/ */
const mapCascadeDelete = (id = '-1') => Vue.prototype.$dataRoomAxios.post(`/bigScreen/map/cascadeDelete/${id}`) const mapCascadeDelete = (id = '-1') => Vue.prototype.$dataRoomAxios.post(`/bigScreen/map/cascadingDelete/${id}`)
/** /**
* 根据父编码解析父级json中的子级 * 根据父编码解析父级json中的子级

Write Preview
Loading…
Cancel
Save