feat: 地图增加下钻上卷

frontend/src/views/chart/chart/chart.js

@@ -618,7 +618,8 @@ export const BASE_MAP = {
     calculable: true,
     inRange: {
       color: ['lightskyblue', 'yellow', 'orangered']
-    }
+    },
+    right: 0
   },
   //   legend: {},
   series: [

frontend/src/views/chart/components/ChartComponent.vue

@@ -55,7 +55,9 @@ export default {
         left: '0px',
         top: '0px'
       },
-      pointParam: null
+      pointParam: null,
+
+      downOrUp: false
     }
   },
 
@@ -143,19 +145,18 @@ export default {
         const customAttr = JSON.parse(chart.customAttr)
         if (!customAttr.areaCode) return
 
-        if (this.currentGeoJson) {
-          this.initMapChart(this.currentGeoJson, chart)
-          return
-        }
+        // if (this.currentGeoJson) {
+        //   this.initMapChart(this.currentGeoJson, chart)
+        //   return
+        // }
 
-        if (this.$store.getters.geoMap[customAttr.areaCode]) {
-          this.currentGeoJson = this.$store.getters.geoMap[customAttr.areaCode]
-          this.initMapChart(this.currentGeoJson, chart)
-          return
-        }
+        // if (this.$store.getters.geoMap[customAttr.areaCode]) {
+        //   this.currentGeoJson = this.$store.getters.geoMap[customAttr.areaCode]
+        //   this.initMapChart(this.currentGeoJson, chart)
+        //   return
+        // }
 
         geoJson(customAttr.areaCode).then(res => {
-          // this.initMapChart(res.data, chart)
           this.initMapChart(res, chart)
 
           this.$store.dispatch('map/setGeo', {
@@ -163,16 +164,24 @@ export default {
             value: res
             // value: res.data
           })
-          // this.currentGeoJson = res.data
           this.currentGeoJson = res
         })
         return
       }
       this.myEcharts(chart_option)
     },
+    registerDynamicMap(areaCode) {
+      geoJson(areaCode).then(res => {
+        this.downOrUp = true
+        this.$echarts.registerMap('MAP', res)
+      })
+    },
+
     initMapChart(geoJson, chart) {
-      // this.$echarts.registerMap('HK', geoJson)
-      this.$echarts.getMap('MAP') || this.$echarts.registerMap('MAP', geoJson)
+      if (!this.$echarts.getMap('MAP') || !this.downOrUp) {
+        this.$echarts.registerMap('MAP', geoJson)
+      }
+      // this.$echarts.getMap('MAP') || this.$echarts.registerMap('MAP', geoJson)
       const base_json = JSON.parse(JSON.stringify(BASE_MAP))
       const chart_option = baseMapOption(base_json, chart)
       this.myEcharts(chart_option)

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

@@ -483,7 +483,7 @@
       <el-col style="height: 100%;min-width: 500px;border-top: 1px solid #E6E6E6;">
         <el-row style="width: 100%;height: 100%;" class="padding-lr">
           <div ref="imageWrapper" style="height: 100%">
-            <chart-component v-if="httpRequest.status && chart.type && !chart.type.includes('table') && !chart.type.includes('text')" :chart-id="chart.id" :chart="chart" class="chart-class" @onChartClick="chartClick" />
+            <chart-component v-if="httpRequest.status && chart.type && !chart.type.includes('table') && !chart.type.includes('text')" ref="dynamicChart" :chart-id="chart.id" :chart="chart" class="chart-class" @onChartClick="chartClick" />
             <table-normal v-if="httpRequest.status && chart.type && chart.type.includes('table')" :chart="chart" class="table-class" />
             <label-normal v-if="httpRequest.status && chart.type && chart.type.includes('text')" :chart="chart" class="table-class" />
             <div v-if="!httpRequest.status" class="chart-error-class">
@@ -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))
@@ -1513,18 +1513,85 @@ export default {
 
     chartClick(param) {
       if (this.drillClickDimensionList.length < this.view.drillFields.length - 1) {
+        this.chart.type === 'map' && this.sendToChildren(param)
         this.drillClickDimensionList.push({ dimensionList: param.data.dimensionList })
         this.getData(this.param.id)
       }
     },
 
     resetDrill() {
+      const length = this.drillClickDimensionList.length
       this.drillClickDimensionList = []
+
+      this.backToParent(0, length)
+      this.currentAcreaNode = null
     },
     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.param.id)
+    },
+    // 回到父级地图
+    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
+      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 currentNode = this.findEntityByCode(aCode || this.view.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
+        this.$refs.dynamicChart && this.$refs.dynamicChart.registerDynamicMap && this.$refs.dynamicChart.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
+        }
+      }
     }
+
   }
 }
 </script>