Merge pull request #603 from dataease/pr@dev@panal_map_drill

feat: 仪表板增加地图下钻上卷

frontend/src/components/canvas/custom-component/UserView.vue

@@ -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))
+      })
     }
   }
 }

frontend/src/views/chart/view/ChartEdit.vue

@@ -1444,11 +1444,11 @@ export default {
     },
 
     initAreas() {
-    //   let mapping
+      let mapping
-    //   if ((mapping = localStorage.getItem('areaMapping')) !== null) {
+      if ((mapping = localStorage.getItem('areaMapping')) !== null) {
-    //     this.places = JSON.parse(mapping)
+        this.places = JSON.parse(mapping)
-    //     return
+        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 = []
-
+      if (this.chart.type === 'map') {
-      this.backToParent(0, length)
+        this.backToParent(0, length)
-      this.currentAcreaNode = null
+        this.currentAcreaNode = null
+      }
     },
     drillJump(index) {
       const length = this.drillClickDimensionList.length