Merge pull request #2118 from dataease/pr@dev@fix_map_drill_detail

fix: 地图钻取后查看详情范围没有切换
2022-04-14 17:19:53 +08:00 · 2022-04-14 17:19:53 +08:00 · 028db23fcf
commit 028db23fcf
parent 8e97cc0431 4bafec104e
6 changed files with 47 additions and 14 deletions
--- a/frontend/src/components/canvas/components/Toolbar.vue
+++ b/frontend/src/components/canvas/components/Toolbar.vue
@ -273,6 +273,7 @@ export default {
      }
      const components = deepCopy(this.componentData)
      components.forEach(view => {
+        if (view.DetailAreaCode) { view.DetailAreaCode = null }
        if (view.filters && view.filters.length > 0) { view.filters = [] }
        if (view.type === 'de-tabs') {
          view.options.tabList && view.options.tabList.length > 0 && view.options.tabList.forEach(tab => {
--- a/frontend/src/components/canvas/custom-component/UserView.vue
+++ b/frontend/src/components/canvas/custom-component/UserView.vue
@ -609,9 +609,9 @@ export default {
        const current = this.$refs[this.element.propValue.id]

        if (this.chart.isPlugin) {
-          current && current.callPluginInner && current.callPluginInner({ methodName: 'registerDynamicMap', methodParam: null })
+          current && current.callPluginInner && this.setDetailMapCode(null) && current.callPluginInner({ methodName: 'registerDynamicMap', methodParam: null })
        } else {
-          current && current.registerDynamicMap && current.registerDynamicMap(null)
+          current && current.registerDynamicMap && this.setDetailMapCode(null) && current.registerDynamicMap(null)
        }
      }
    },
@ -639,12 +639,17 @@ export default {
      this.currentAcreaNode = tempNode
      const current = this.$refs[this.element.propValue.id]
      if (this.chart.isPlugin) {
-        current && current.callPluginInner && current.callPluginInner({ methodName: 'registerDynamicMap', methodParam: this.currentAcreaNode.code })
+        current && current.callPluginInner && this.setDetailMapCode(this.currentAcreaNode.code) && current.callPluginInner({ methodName: 'registerDynamicMap', methodParam: this.currentAcreaNode.code })
      } else {
-        current && current.registerDynamicMap && current.registerDynamicMap(this.currentAcreaNode.code)
+        current && current.registerDynamicMap && this.setDetailMapCode(this.currentAcreaNode.code) && current.registerDynamicMap(this.currentAcreaNode.code)
      }
    },

+    setDetailMapCode(code) {
+      this.element.DetailAreaCode = code
+      return true
+    },
+
    // 切换下一级地图
    sendToChildren(param) {
      const length = param.data.dimensionList.length
@ -660,9 +665,9 @@ export default {
        this.currentAcreaNode = nextNode
        const current = this.$refs[this.element.propValue.id]
        if (this.chart.isPlugin) {
-          nextNode && current && current.callPluginInner && current.callPluginInner({ methodName: 'registerDynamicMap', methodParam: nextNode.code })
+          nextNode && current && current.callPluginInner && this.setDetailMapCode(nextNode.code) && current.callPluginInner({ methodName: 'registerDynamicMap', methodParam: nextNode.code })
        } else {
-          nextNode && current && current.registerDynamicMap && current.registerDynamicMap(nextNode.code)
+          nextNode && current && current.registerDynamicMap && this.setDetailMapCode(nextNode.code) && current.registerDynamicMap(nextNode.code)
        }
      }
    },
--- a/frontend/src/components/canvas/custom-component/UserViewDialog.vue
+++ b/frontend/src/components/canvas/custom-component/UserViewDialog.vue
@ -6,10 +6,10 @@
          <plugin-com
            v-if="chart.isPlugin"
            :component-name="chart.type + '-view'"
-            :obj="{chart}"
+            :obj="{chart: mapChart || chart}"
            class="chart-class"
          />
-          <chart-component v-else-if="!chart.type.includes('text') && chart.type !== 'label' && !chart.type.includes('table') && renderComponent() === 'echarts'" class="chart-class" :chart="chart" />
+          <chart-component v-else-if="!chart.type.includes('text') && chart.type !== 'label' && !chart.type.includes('table') && renderComponent() === 'echarts'" class="chart-class" :chart="mapChart || chart" />
          <chart-component-g2 v-else-if="!chart.type.includes('text') && chart.type !== 'label' && !chart.type.includes('table') && renderComponent() === 'antv'" class="chart-class" :chart="chart" />
          <chart-component-s2 v-else-if="chart.type === 'table-pivot' && renderComponent() === 'antv'" class="chart-class" :chart="chart" />
          <label-normal v-else-if="chart.type.includes('text')" :chart="chart" class="table-class" />
@ -62,6 +62,13 @@ export default {
    }
  },
  computed: {
+    mapChart() {
+      if (this.chart.type && (this.chart.type === 'map' || this.chart.type === 'buddle-map')) {
+        const temp = JSON.parse(JSON.stringify(this.chart))
+        return { ...temp, ...{ DetailAreaCode: this.curComponent.DetailAreaCode }}
+      }
+      return null
+    },
    showChartCanvas() {
      return !this.chart.type.includes('table')
    },
--- a/frontend/src/components/canvas/custom-component/UserViewMobileDialog.vue
+++ b/frontend/src/components/canvas/custom-component/UserViewMobileDialog.vue
@ -1,7 +1,13 @@
 <template>
  <de-container>
    <de-main-container v-if="chart.type !== 'table-normal' && chart.type !== 'table-info'" :style="customStyle" class="full-div">
-      <chart-component v-if="!chart.type.includes('text') && chart.type !== 'label' && !chart.type.includes('table') && renderComponent() === 'echarts'" class="chart-class" :chart="chart" />
+      <plugin-com
+        v-if="chart.isPlugin"
+        :component-name="chart.type + '-view'"
+        :obj="{chart: mapChart || chart}"
+        class="chart-class"
+      />
+      <chart-component v-else-if="!chart.type.includes('text') && chart.type !== 'label' && !chart.type.includes('table') && renderComponent() === 'echarts'" class="chart-class" :chart="mapChart || chart" />
      <chart-component-g2 v-else-if="!chart.type.includes('text') && chart.type !== 'label' && !chart.type.includes('table') && renderComponent() === 'antv'" class="chart-class" :chart="chart" />
      <chart-component-s2 v-else-if="chart.type === 'table-pivot' && renderComponent() === 'antv'" class="chart-class" :chart="chart" />
      <label-normal v-else-if="chart.type.includes('text')" :chart="chart" class="table-class" />
@ -44,6 +50,13 @@ export default {
    }
  },
  computed: {
+    mapChart() {
+      if (this.chart.type && (this.chart.type === 'map' || this.chart.type === 'buddle-map')) {
+        const temp = JSON.parse(JSON.stringify(this.chart))
+        return { ...temp, ...{ DetailAreaCode: this.curComponent.DetailAreaCode }}
+      }
+      return null
+    },
    customStyle() {
      let style = {
      }
--- a/frontend/src/views/chart/components/ChartComponent.vue
+++ b/frontend/src/views/chart/components/ChartComponent.vue
@ -229,7 +229,7 @@ export default {
          this.myChart.clear()
          return
        }
-        const cCode = this.dynamicAreaCode || customAttr.areaCode
+        const cCode = this.chart.DetailAreaCode || this.dynamicAreaCode || customAttr.areaCode
        if (this.$store.getters.geoMap[cCode]) {
          const json = this.$store.getters.geoMap[cCode]
          this.initMapChart(json, chart)
--- a/frontend/src/views/chart/view/ChartEdit.vue
+++ b/frontend/src/views/chart/view/ChartEdit.vue
@ -1403,6 +1403,7 @@ export default {
      return this.$store.state.panel.panelInfo
    },
    ...mapState([
+      'curComponent',
      'panelViewEditInfo'
    ])
    /* pluginRenderOptions() {
@ -2469,6 +2470,7 @@ export default {
        this.backToParent(0, length)
        this.currentAcreaNode = null
        const current = this.$refs.dynamicChart
+        this.setDetailMapCode(null)
        if (this.view.isPlugin) {
          current && current.callPluginInner && current.callPluginInner({ methodName: 'registerDynamicMap', methodParam: null })
        } else {
@ -2503,15 +2505,20 @@ export default {
      // this.$refs.dynamicChart && this.$refs.dynamicChart.registerDynamicMap && this.$refs.dynamicChart.registerDynamicMap(this.currentAcreaNode.code)
      const current = this.$refs.dynamicChart
      if (this.view.isPlugin) {
-        current && current.callPluginInner && current.callPluginInner({
+        current && current.callPluginInner && this.setDetailMapCode(this.currentAcreaNode.code) && current.callPluginInner({
          methodName: 'registerDynamicMap',
          methodParam: this.currentAcreaNode.code
        })
      } else {
-        current && current.registerDynamicMap && current.registerDynamicMap(this.currentAcreaNode.code)
+        current && current.registerDynamicMap && this.setDetailMapCode(this.currentAcreaNode.code) && current.registerDynamicMap(this.currentAcreaNode.code)
      }
    },

+    setDetailMapCode(code) {
+      this.curComponent.DetailAreaCode = code
+      return true
+    },
+
    // 切换下一级地图
    sendToChildren(param) {
      const length = param.data.dimensionList.length
@ -2530,12 +2537,12 @@ export default {
        // this.$refs.dynamicChart && this.$refs.dynamicChart.registerDynamicMap && this.$refs.dynamicChart.registerDynamicMap(nextNode.code)
        const current = this.$refs.dynamicChart
        if (this.view.isPlugin) {
-          nextNode && current && current.callPluginInner && current.callPluginInner({
+          nextNode && current && current.callPluginInner && this.setDetailMapCode(nextNode.code) && current.callPluginInner({
            methodName: 'registerDynamicMap',
            methodParam: nextNode.code
          })
        } else {
-          nextNode && current && current.registerDynamicMap && current.registerDynamicMap(nextNode.code)
+          nextNode && current && current.registerDynamicMap && this.setDetailMapCode(nextNode.code) && current.registerDynamicMap(nextNode.code)
        }
        return nextNode
      }