forked from github/dataease
Merge pull request #603 from dataease/pr@dev@panal_map_drill
feat: 仪表板增加地图下钻上卷
This commit is contained in:
fit2cloud-chenyw
GitHub
commit
1bd7b6056b
@ -16,7 +16,8 @@
|
||||
{{ $t('chart.chart_error_tips') }}
|
||||
</div>
|
||||
</div>
|
||||
<chart-component v-if="requestStatus==='success'&&chart.type && !chart.type.includes('table') && !chart.type.includes('text')" :ref="element.propValue.id" class="chart-class" :chart="chart" :track-menu="trackMenu" @onChartClick="chartClick" />
|
||||
<!-- <chart-component v-if="requestStatus==='success'&&chart.type && !chart.type.includes('table') && !chart.type.includes('text')" :ref="element.propValue.id" class="chart-class" :chart="chart" :track-menu="trackMenu" @onChartClick="chartClick" /> -->
|
||||
<chart-component :ref="element.propValue.id" class="chart-class" :chart="chart" :track-menu="trackMenu" @onChartClick="chartClick" />
|
||||
<table-normal v-if="requestStatus==='success'&&chart.type && chart.type.includes('table')" :ref="element.propValue.id" :chart="chart" class="table-class" />
|
||||
<label-normal v-if="requestStatus==='success'&&chart.type && chart.type.includes('text')" :ref="element.propValue.id" :chart="chart" class="table-class" />
|
||||
<div style="position: absolute;left: 20px;bottom:14px;">
|
||||
@ -41,7 +42,7 @@ import eventBus from '@/components/canvas/utils/eventBus'
|
||||
import { deepCopy } from '@/components/canvas/utils/utils'
|
||||
import { getToken, getLinkToken } from '@/utils/auth'
|
||||
import DrillPath from '@/views/chart/view/DrillPath'
|
||||
|
||||
import { areaMapping } from '@/api/map/map'
|
||||
export default {
|
||||
name: 'UserView',
|
||||
components: { ChartComponent, TableNormal, LabelNormal, DrillPath },
|
||||
@ -85,7 +86,8 @@ export default {
|
||||
message: null,
|
||||
drillClickDimensionList: [],
|
||||
drillFilters: [],
|
||||
drillFields: []
|
||||
drillFields: [],
|
||||
places: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@ -135,7 +137,6 @@ export default {
|
||||
},
|
||||
linkageFilters: {
|
||||
handler(newVal, oldVal) {
|
||||
debugger
|
||||
isChange(newVal, oldVal) && this.getData(this.element.propValue.viewId)
|
||||
},
|
||||
deep: true
|
||||
@ -169,6 +170,7 @@ export default {
|
||||
this.refId = uuid.v1
|
||||
// this.filter.filter = this.$store.getters.conditions
|
||||
this.getData(this.element.propValue.viewId)
|
||||
this.initAreas()
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
@ -216,7 +218,6 @@ export default {
|
||||
if (response.success) {
|
||||
this.chart = response.data
|
||||
this.chart.drillFields = this.chart.drillFields ? JSON.parse(this.chart.drillFields) : []
|
||||
debugger
|
||||
if (!response.data.drill) {
|
||||
this.drillClickDimensionList.splice(this.drillClickDimensionList.length - 1, 1)
|
||||
}
|
||||
@ -259,16 +260,100 @@ export default {
|
||||
},
|
||||
|
||||
chartClick(param) {
|
||||
debugger
|
||||
if (this.drillClickDimensionList.length < this.chart.drillFields.length - 1) {
|
||||
this.chart.type === 'map' && this.sendToChildren(param)
|
||||
this.drillClickDimensionList.push({ dimensionList: param.data.dimensionList })
|
||||
this.getData(this.element.propValue.viewId)
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
resetDrill() {
|
||||
const length = this.drillClickDimensionList.length
|
||||
this.drillClickDimensionList = []
|
||||
if (this.chart.type === 'map') {
|
||||
this.backToParent(0, length)
|
||||
}
|
||||
},
|
||||
|
||||
drillJump(index) {
|
||||
const length = this.drillClickDimensionList.length
|
||||
this.drillClickDimensionList = this.drillClickDimensionList.slice(0, index)
|
||||
if (this.chart.type === 'map') {
|
||||
this.backToParent(index, length)
|
||||
}
|
||||
this.getData(this.element.propValue.viewId)
|
||||
},
|
||||
// 回到父级地图
|
||||
backToParent(index, length) {
|
||||
if (length <= 0) return
|
||||
const times = length - 1 - index
|
||||
|
||||
let temp = times
|
||||
let tempNode = this.currentAcreaNode
|
||||
while (temp >= 0) {
|
||||
tempNode = this.findEntityByCode(tempNode.pcode, this.places)
|
||||
temp--
|
||||
}
|
||||
|
||||
this.currentAcreaNode = tempNode
|
||||
const current = this.$refs[this.element.propValue.id]
|
||||
current && current.registerDynamicMap && current.registerDynamicMap(this.currentAcreaNode.code)
|
||||
// this.$refs.dynamicChart && this.$refs.dynamicChart.registerDynamicMap && this.$refs.dynamicChart.registerDynamicMap(this.currentAcreaNode.code)
|
||||
},
|
||||
|
||||
// 切换下一级地图
|
||||
sendToChildren(param) {
|
||||
const length = param.data.dimensionList.length
|
||||
const name = param.data.dimensionList[length - 1].value
|
||||
let aCode = null
|
||||
if (this.currentAcreaNode) {
|
||||
aCode = this.currentAcreaNode.code
|
||||
}
|
||||
// const aCode = this.currentAcreaNode ? this.currentAcreaNode.code : null
|
||||
const customAttr = JSON.parse(this.chart.customAttr)
|
||||
const currentNode = this.findEntityByCode(aCode || customAttr.areaCode, this.places)
|
||||
if (currentNode && currentNode.children && currentNode.children.length > 0) {
|
||||
const nextNode = currentNode.children.find(item => item.name === name)
|
||||
// this.view.customAttr.areaCode = nextNode.code
|
||||
this.currentAcreaNode = nextNode
|
||||
const current = this.$refs[this.element.propValue.id]
|
||||
current && current.registerDynamicMap && current.registerDynamicMap(nextNode.code)
|
||||
}
|
||||
},
|
||||
// 根据地名获取areaCode
|
||||
// findEntityByname(name, array) {
|
||||
// if (array === null || array.length === 0) array = this.places
|
||||
// for (let index = 0; index < array.length; index++) {
|
||||
// const node = array[index]
|
||||
// if (node.name === name) return node
|
||||
// if (node.children && node.children.length > 0) {
|
||||
// const temp = this.findEntityByname(name, node.children)
|
||||
// if (temp) return temp
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
findEntityByCode(code, array) {
|
||||
if (array === null || array.length === 0) array = this.places
|
||||
for (let index = 0; index < array.length; index++) {
|
||||
const node = array[index]
|
||||
if (node.code === code) return node
|
||||
if (node.children && node.children.length > 0) {
|
||||
const temp = this.findEntityByCode(code, node.children)
|
||||
if (temp) return temp
|
||||
}
|
||||
}
|
||||
},
|
||||
initAreas() {
|
||||
let mapping
|
||||
if ((mapping = localStorage.getItem('areaMapping')) !== null) {
|
||||
this.places = JSON.parse(mapping)
|
||||
return
|
||||
}
|
||||
Object.keys(this.places).length === 0 && areaMapping().then(res => {
|
||||
this.places = res.data
|
||||
localStorage.setItem('areaMapping', JSON.stringify(res.data))
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1444,11 +1444,11 @@ export default {
|
||||
},
|
||||
|
||||
initAreas() {
|
||||
// let mapping
|
||||
// if ((mapping = localStorage.getItem('areaMapping')) !== null) {
|
||||
// this.places = JSON.parse(mapping)
|
||||
// return
|
||||
// }
|
||||
let mapping
|
||||
if ((mapping = localStorage.getItem('areaMapping')) !== null) {
|
||||
this.places = JSON.parse(mapping)
|
||||
return
|
||||
}
|
||||
Object.keys(this.places).length === 0 && areaMapping().then(res => {
|
||||
this.places = res.data
|
||||
localStorage.setItem('areaMapping', JSON.stringify(res.data))
|
||||
@ -1522,9 +1522,10 @@ export default {
|
||||
resetDrill() {
|
||||
const length = this.drillClickDimensionList.length
|
||||
this.drillClickDimensionList = []
|
||||
|
||||
this.backToParent(0, length)
|
||||
this.currentAcreaNode = null
|
||||
if (this.chart.type === 'map') {
|
||||
this.backToParent(0, length)
|
||||
this.currentAcreaNode = null
|
||||
}
|
||||
},
|
||||
drillJump(index) {
|
||||
const length = this.drillClickDimensionList.length
|
||||
|
||||
Loading…
Reference in New Issue
Block a user