forked from github/dataease
fix(视图): 地图地名映射配置以解决世界地图无法下钻
This commit is contained in:
fit2cloud-chenyw
parent
e83687c9e7
commit
6d64044bbe
@ -88,6 +88,11 @@ export function baseMapOption(chart_option, chart, themeStyle) {
|
||||
y.name = chart.data.x[i]
|
||||
chart_option.series[0].data.push(y)
|
||||
}
|
||||
if (chart.senior) {
|
||||
const senior = JSON.parse(chart.senior)
|
||||
|
||||
senior && senior.mapMapping && (chart_option.series[0].nameMap = senior.mapMapping)
|
||||
}
|
||||
}
|
||||
}
|
||||
componentStyle(chart_option, chart)
|
||||
|
||||
@ -81,7 +81,6 @@ import {
|
||||
geoJson
|
||||
} from '@/api/map/map'
|
||||
import ViewTrackBar from '@/components/canvas/components/Editor/ViewTrackBar'
|
||||
import eventBus from '@/components/canvas/utils/eventBus'
|
||||
|
||||
export default {
|
||||
name: 'ChartComponent',
|
||||
|
||||
207
frontend/src/views/chart/components/senior/MapMapping.vue
Normal file
207
frontend/src/views/chart/components/senior/MapMapping.vue
Normal file
@ -0,0 +1,207 @@
|
||||
<template>
|
||||
<div style="width: 100%;display: block !important;">
|
||||
<el-table
|
||||
:data="currentDatas"
|
||||
size="mini"
|
||||
:span-method="mergeCellMethod"
|
||||
style="width: 100%"
|
||||
:row-style="{height:0+'px'}"
|
||||
>
|
||||
<el-table-column
|
||||
label="图形"
|
||||
prop="mapArea"
|
||||
width="160"
|
||||
show-overflow-tooltip
|
||||
/>
|
||||
<el-table-column
|
||||
label="属性"
|
||||
width="50"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<el-input
|
||||
v-if="scope.row.isEdit"
|
||||
:ref="scope.row.mapArea + scope.$index + '-widget'"
|
||||
v-model="scope.row.attrArea"
|
||||
size="mini"
|
||||
@blur="finishEdit(scope.row)"
|
||||
@keyup.enter.native="$event.target.blur()"
|
||||
>
|
||||
|
||||
<i slot="suffix" class="el-icon-success el-input__icon map-mapping-ok" @click="finishEdit(scope.row)" />
|
||||
</el-input>
|
||||
|
||||
<el-button v-else size="mini" plain @click="triggerEdit(scope)">
|
||||
<span class="mapping-span">{{ scope.row.attrArea }}</span>
|
||||
<i class="el-icon-edit el-icon--right" />
|
||||
</el-button>
|
||||
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="right">
|
||||
|
||||
<template slot="header">
|
||||
<el-input
|
||||
v-model="keyWord"
|
||||
size="mini"
|
||||
placeholder="输入关键字搜索"
|
||||
/>
|
||||
</template>
|
||||
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="mapping-pagination">
|
||||
<el-pagination
|
||||
small
|
||||
layout="prev, pager, next"
|
||||
:page-size="pageSize"
|
||||
:total="total"
|
||||
:current-page="currentPage"
|
||||
@current-change="searchPager"
|
||||
@prev-click="searchPager"
|
||||
@next-click="searchPager"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: 'FunctionCfg',
|
||||
props: {
|
||||
chart: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
mappingForm: {},
|
||||
|
||||
keyWord: '',
|
||||
dynamicAreaCode: '',
|
||||
gridList: [],
|
||||
currentPage: 1,
|
||||
pageSize: 10,
|
||||
total: 0,
|
||||
currentDatas: [],
|
||||
usePage: true
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'chart': {
|
||||
handler: function() {
|
||||
this.initData()
|
||||
}
|
||||
},
|
||||
'keyWord': {
|
||||
handler: function() {
|
||||
this.buildGridList()
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.initData()
|
||||
},
|
||||
methods: {
|
||||
triggerEdit(scope) {
|
||||
this.$set(scope.row, 'isEdit', true)
|
||||
this.$nextTick(() => {
|
||||
this.$refs[scope.row.mapArea + scope.$index + '-widget'] && this.$refs[scope.row.mapArea + scope.$index + '-widget'].focus()
|
||||
})
|
||||
},
|
||||
finishEdit(row) {
|
||||
row.isEdit = false
|
||||
this.mappingForm[row.mapArea] = row.attrArea
|
||||
this.changeMapping()
|
||||
},
|
||||
|
||||
mergeCellMethod({ row, column, rowIndex, columnIndex }) {
|
||||
if (columnIndex === 1) {
|
||||
return [1, 2]
|
||||
}
|
||||
if (columnIndex === 2) {
|
||||
return [0, 0]
|
||||
}
|
||||
},
|
||||
|
||||
initData() {
|
||||
const chart = JSON.parse(JSON.stringify(this.chart))
|
||||
if (chart.senior) {
|
||||
let senior = null
|
||||
if (Object.prototype.toString.call(chart.senior) === '[object Object]') {
|
||||
senior = JSON.parse(JSON.stringify(chart.senior))
|
||||
} else {
|
||||
senior = JSON.parse(chart.senior)
|
||||
}
|
||||
if (senior.mapMapping) {
|
||||
this.mappingForm = senior.mapMapping
|
||||
} else {
|
||||
this.initMapping()
|
||||
}
|
||||
this.buildGridList()
|
||||
}
|
||||
},
|
||||
buildGridList() {
|
||||
this.gridList = Object.keys(this.mappingForm).map(key => {
|
||||
return {
|
||||
mapArea: key,
|
||||
attrArea: this.mappingForm[key] || key
|
||||
}
|
||||
})
|
||||
const baseDatas = JSON.parse(JSON.stringify(this.gridList))
|
||||
const tempDatas = baseDatas.filter(data => !this.keyWord || data.mapArea.toLowerCase().includes(this.keyWord.toLowerCase()) || (data.attrArea && data.attrArea.toLowerCase().includes(this.keyWord.toLowerCase())))
|
||||
if (this.usePage) {
|
||||
const start = (this.currentPage - 1) * this.pageSize
|
||||
let end = this.currentPage * this.pageSize
|
||||
if (end >= tempDatas.length) end = tempDatas.length
|
||||
this.currentDatas = tempDatas.slice(start, end)
|
||||
} else {
|
||||
this.currentDatas = tempDatas
|
||||
}
|
||||
this.total = tempDatas.length
|
||||
},
|
||||
initMapping() {
|
||||
const chart = JSON.parse(JSON.stringify(this.chart))
|
||||
const customAttr = JSON.parse(chart.customAttr)
|
||||
const cCode = this.chart.DetailAreaCode || this.dynamicAreaCode || customAttr.areaCode
|
||||
if (this.$store.getters.geoMap[cCode]) {
|
||||
const json = this.$store.getters.geoMap[cCode]
|
||||
const features = json.features
|
||||
this.mappingForm = {}
|
||||
features.forEach(feature => {
|
||||
this.mappingForm[feature.properties.name] = null
|
||||
})
|
||||
} else {
|
||||
this.$warning('请先选择地图范围')
|
||||
}
|
||||
},
|
||||
changeMapping() {
|
||||
this.$emit('onMapMappingChange', this.mappingForm)
|
||||
},
|
||||
searchPager(pageNumber) {
|
||||
this.currentPage = pageNumber
|
||||
this.buildGridList()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.mapping-span {
|
||||
display: inline-block;
|
||||
width: 90px;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
text-align: left
|
||||
}
|
||||
|
||||
.map-mapping-ok {
|
||||
cursor: pointer;
|
||||
}
|
||||
.map-mapping-ok:hover {
|
||||
color: #409eff;
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -703,7 +703,7 @@
|
||||
<el-tab-pane name="senior" :label="$t('chart.senior')" class="padding-tab" style="width: 350px;">
|
||||
<el-row class="view-panel">
|
||||
<div
|
||||
v-if="view.type && (view.type.includes('bar') || view.type.includes('line') || view.type.includes('mix') || view.type.includes('gauge') || view.type === 'text' || view.type.includes('table'))"
|
||||
v-if="view.type && (view.type.includes('bar') || view.type.includes('line') || view.type.includes('mix') || view.type.includes('gauge') || view.type === 'text' || view.type.includes('table') || view.type === 'map' || view.type === 'buddle-map')"
|
||||
style="overflow:auto;border-right: 1px solid #e6e6e6;height: 100%;width: 100%;"
|
||||
class="attr-style theme-border-class"
|
||||
>
|
||||
@ -761,6 +761,25 @@
|
||||
</el-collapse-item>
|
||||
</el-collapse>
|
||||
</el-row>
|
||||
|
||||
<el-row v-if="view.type && (view.type === 'map' || view.type === 'buddle-map')">
|
||||
|
||||
<span class="padding-lr">{{ $t('chart.senior_cfg') }}</span>
|
||||
<el-collapse v-model="attrActiveNames" class="style-collapse">
|
||||
|
||||
<el-collapse-item title="地名映射">
|
||||
<map-mapping
|
||||
:param="param"
|
||||
class="attr-selector"
|
||||
:chart="chart"
|
||||
@onMapMappingChange="onMapMappingChange"
|
||||
/>
|
||||
|
||||
</el-collapse-item>
|
||||
|
||||
</el-collapse>
|
||||
</el-row>
|
||||
|
||||
</div>
|
||||
<div v-else class="no-senior">
|
||||
{{ $t('chart.chart_no_senior') }}
|
||||
@ -1084,6 +1103,7 @@ import PluginCom from '@/views/system/plugin/PluginCom'
|
||||
import { mapState } from 'vuex'
|
||||
|
||||
import FunctionCfg from '@/views/chart/components/senior/FunctionCfg'
|
||||
import MapMapping from '@/views/chart/components/senior/MapMapping'
|
||||
import AssistLine from '@/views/chart/components/senior/AssistLine'
|
||||
import Threshold from '@/views/chart/components/senior/Threshold'
|
||||
import LabelNormalText from '@/views/chart/components/normal/LabelNormalText'
|
||||
@ -1129,7 +1149,8 @@ export default {
|
||||
ChartDragItem,
|
||||
DrillItem,
|
||||
DrillPath,
|
||||
PluginCom
|
||||
PluginCom,
|
||||
MapMapping
|
||||
},
|
||||
props: {
|
||||
param: {
|
||||
@ -1952,6 +1973,10 @@ export default {
|
||||
this.view.senior.scrollCfg = val
|
||||
this.calcStyle()
|
||||
},
|
||||
onMapMappingChange(val) {
|
||||
this.view.senior.mapMapping = val
|
||||
this.calcStyle()
|
||||
},
|
||||
|
||||
showDimensionEditFilter(item) {
|
||||
this.dimensionItem = JSON.parse(JSON.stringify(item))
|
||||
|
||||
Loading…
Reference in New Issue
Block a user