diff --git a/frontend/src/components/canvas/custom-component/UserView.vue b/frontend/src/components/canvas/custom-component/UserView.vue index e89b31708f..4e91e732eb 100644 --- a/frontend/src/components/canvas/custom-component/UserView.vue +++ b/frontend/src/components/canvas/custom-component/UserView.vue @@ -16,7 +16,8 @@ {{ $t('chart.chart_error_tips') }} - + +
@@ -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)) + }) } } } diff --git a/frontend/src/views/chart/view/ChartEdit.vue b/frontend/src/views/chart/view/ChartEdit.vue index 9ce904ffea..e8e0746700 100644 --- a/frontend/src/views/chart/view/ChartEdit.vue +++ b/frontend/src/views/chart/view/ChartEdit.vue @@ -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