fix: 地图组件优化

地图组件优化
main
hong.yang 2 years ago
parent ef8f838664
commit 5fd5689dfb

@ -326,11 +326,21 @@ export default {
})
return
}
let geoJsonObj
try {
geoJsonObj = JSON.parse(downMap.geoJson)
} catch (error) {
this.$message({
message: params.name + '地图数据格式错误',
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));
echarts.registerMap(params.name, geoJsonObj);
this.charts.setOption(this.option, true);
});
}

@ -73,7 +73,6 @@
:options="mapTree"
:props="{ value: 'id', label: 'name', children: 'children', emitPath: false }"
@change="mapSelect">
<template slot-scope="{ node, data }">
<span style="float: left">{{ data.name }}</span>
<span v-if="data.disabled" style="float: right; color: #8492a6; font-size: 13px"> </span>
@ -91,6 +90,23 @@
active-color="#007aff"
/>
</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
label="比例"
label-width="100px"
@ -104,7 +120,7 @@
></el-slider>
</el-form-item>
<el-form-item
label="中心点x轴位置"
label="中心点横向偏移"
label-width="100px"
>
<el-slider
@ -116,7 +132,7 @@
></el-slider>
</el-form-item>
<el-form-item
label="中心点y轴位置"
label="中心点纵向偏移"
label-width="100px"
>
<el-slider
@ -127,23 +143,6 @@
: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
v-if="config.customize.down"
label="头部字体颜色"

@ -677,6 +677,7 @@ export default {
//notify
.ds-el-notify {
background-color: var(--bs-el-background-1)!important;
border: var(--bs-el-border)!important;
.el-notification__title{
color: #fff!important;
}

@ -244,12 +244,14 @@ export default {
value: 4
}
],
mapList: []
mapList: [],
//
tipped: false
}
},
mounted() {
this.init()
},
methods: {
init() {
@ -258,6 +260,9 @@ export default {
mapList(this.searchForm).then(res => {
this.mapList = res
this.searchLoading = false
if (!this.tipped && this.mapList.length === 0) {
this.tip()
}
}).catch(err => {
this.searchLoading = false
})
@ -310,6 +315,18 @@ export default {
}).catch(() => {
})
},
tip() {
//
const htmlStr = `<span>大屏设计器提供了全国省市区县的地图数据,<a href="https://www.yuque.com/chuinixiongkou/bigscreen/kdrm8g3c8zfgaaq6#xjE8w" style="color: #00a0e9" target="_blank">点击查看</a></span>`
this.$notify({
title: '推荐',
dangerouslyUseHTMLString: true,
message: htmlStr,
customClass: 'ds-el-notify',
type: 'warning',
duration: 5000
})
},
deleteMapCascade(map) {
this.$confirm('该地图存在子级,是否直接删除该地图以及其所有子级?', '提示', {
confirmButtonText: '确定',
@ -413,3 +430,19 @@ export default {
height: 150px;
}
</style>
<style lang="scss">
//notify
.ds-el-notify {
background-color: var(--bs-el-background-1)!important;
border: var(--bs-el-border)!important;
.el-notification__title{
color: #fff!important;
}
.el-notification__content{
color: #fff!important;
}
.el-notification__closeBtn{
color: #fff!important;
}
}
</style>

Loading…
Cancel
Save