Merge pull request #1789 from dataease/pr@dev@refactor_plugin_view

refactor: 完善视图插件

frontend/src/components/AsyncComponent/index.vue

@@ -65,8 +65,12 @@ export default {
     this.refId = uuid.v1
   },
   methods: {
-    chartResize() {
+    /* chartResize() {
       this.$refs[this.refId] && this.$refs[this.refId].chartResize && this.$refs[this.refId].chartResize()
+    }, */
+    callPluginInner(param) {
+      const { methodName, methodParam } = param
+      this.$refs[this.refId] && this.$refs[this.refId][methodName] && this.$refs[this.refId][methodName](methodParam)
     }
   }
 }

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

@@ -298,7 +298,9 @@ export default {
         }
         // 如果gap有变化刷新
         if (this.preCanvasPanel && this.preCanvasPanel.gap !== newVal.panel.gap) {
-          this.$refs[this.element.propValue.id].chartResize()
+          this.chart.isPlugin
+            ? this.$refs[this.element.propValue.id].callPluginInner({ methodName: 'chartResize' })
+            : this.$refs[this.element.propValue.id].chartResize()
         }
         this.preCanvasPanel = deepCopy(newVal.panel)
       },
@@ -313,7 +315,9 @@ export default {
             this.changeIndex++
             this.chartResize(this.changeIndex)
           } else {
-            this.$refs[this.element.propValue.id].chartResize()
+            this.chart.isPlugin
+              ? this.$refs[this.element.propValue.id].callPluginInner({ methodName: 'chartResize' })
+              : this.$refs[this.element.propValue.id].chartResize()
           }
         }
       },
@@ -333,7 +337,7 @@ export default {
     },
     'chartType': function(newVal, oldVal) {
       // this.isPlugin = this.plugins.some(plugin => plugin.value === this.chart.type)
-      if (newVal === 'map' && newVal !== oldVal) {
+      if ((newVal === 'map' || newVal === 'buddle-map') && newVal !== oldVal) {
         this.initAreas()
       }
     },
@@ -360,6 +364,10 @@ export default {
     bindPluginEvent() {
       bus.$on('plugin-chart-click', this.chartClick)
       bus.$on('plugin-jump-click', this.jumpClick)
+      bus.$on('plugin-add-view-track-filter', this.addViewTrackFilter)
+    },
+    addViewTrackFilter(linkageParam) {
+      this.$store.commit('addViewTrackFilter', linkageParam)
     },
     // 根据仪表板的缩放比例，修改视图内部参数
     mergeScale() {
@@ -477,7 +485,7 @@ export default {
 
     chartClick(param) {
       if (this.drillClickDimensionList.length < this.chart.drillFields.length - 1) {
-        this.chart.type === 'map' && this.sendToChildren(param)
+        (this.chart.type === 'map' || this.chart.type === 'buddle-map') && this.sendToChildren(param)
         this.drillClickDimensionList.push({ dimensionList: param.data.dimensionList })
         this.getData(this.element.propValue.viewId)
       } else if (this.chart.drillFields.length > 0) {
@@ -547,17 +555,22 @@ export default {
     resetDrill() {
       const length = this.drillClickDimensionList.length
       this.drillClickDimensionList = []
-      if (this.chart.type === 'map') {
+      if (this.chart.type === 'map' || this.chart.type === 'buddle-map') {
         this.backToParent(0, length)
         const current = this.$refs[this.element.propValue.id]
+
+        if (this.chart.isPlugin) {
+          current && current.callPluginInner({ methodName: 'registerDynamicMap', methodParam: null })
+        } else {
           current && current.registerDynamicMap && current.registerDynamicMap(null)
         }
+      }
     },
 
     drillJump(index) {
       const length = this.drillClickDimensionList.length
       this.drillClickDimensionList = this.drillClickDimensionList.slice(0, index)
-      if (this.chart.type === 'map') {
+      if (this.chart.type === 'map' || this.chart.type === 'buddle-map') {
         this.backToParent(index, length)
       }
       this.getData(this.element.propValue.viewId)
@@ -576,7 +589,11 @@ export default {
 
       this.currentAcreaNode = tempNode
       const current = this.$refs[this.element.propValue.id]
+      if (this.chart.isPlugin) {
+        current && current.callPluginInner({ methodName: 'registerDynamicMap', methodParam: this.currentAcreaNode.code })
+      } else {
         current && current.registerDynamicMap && current.registerDynamicMap(this.currentAcreaNode.code)
+      }
     },
 
     // 切换下一级地图
@@ -593,8 +610,12 @@ export default {
         const nextNode = currentNode.children.find(item => item.name === name)
         this.currentAcreaNode = nextNode
         const current = this.$refs[this.element.propValue.id]
+        if (this.chart.isPlugin) {
+          nextNode && current && current.callPluginInner({ methodName: 'registerDynamicMap', methodParam: nextNode.code })
+        } else {
           nextNode && current && current.registerDynamicMap && current.registerDynamicMap(nextNode.code)
         }
+      }
     },
 
     findEntityByCode(code, array) {
@@ -622,7 +643,12 @@ export default {
       const areaNode = this.findEntityByname(name, [])
       if (!areaNode) return
       const current = this.$refs[this.element.propValue.id]
+
+      if (this.chart.isPlugin) {
+        current && current.callPluginInner({ methodName: 'registerDynamicMap', methodParam: areaNode.code })
+      } else {
         current && current.registerDynamicMap && current.registerDynamicMap(areaNode.code)
+      }
     },
     // 根据地名获取areaCode
     findEntityByname(name, array) {
@@ -650,7 +676,9 @@ export default {
       if (this.$refs[this.element.propValue.id]) {
         this.timeMachine = setTimeout(() => {
           if (index === this.changeIndex) {
-            this.$refs[this.element.propValue.id].chartResize()
+            this.chart.isPlugin
+              ? this.$refs[this.element.propValue.id].callPluginInner({ methodName: 'chartResize' })
+              : this.$refs[this.element.propValue.id].chartResize()
           }
           this.destroyTimeMachine()
         }, 50)

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

@@ -829,6 +829,7 @@
           <div ref="imageWrapper" style="height: 100%">
             <plugin-com
               v-if="httpRequest.status && chart.type && view.isPlugin"
+              ref="dynamicChart"
               :component-name="chart.type + '-view'"
               :obj="{chart}"
               class="chart-class"
@@ -1221,7 +1222,7 @@ export default {
     },
     'chartType': function(newVal, oldVal) {
       this.view.isPlugin = this.$refs['cu-chart-type'] && this.$refs['cu-chart-type'].currentIsPlugin(newVal)
-      if (newVal === 'map' && newVal !== oldVal) {
+      if ((newVal === 'map' || newVal === 'buddle-map') && newVal !== oldVal) {
         this.initAreas()
       }
       this.$emit('typeChange', newVal)
@@ -1249,6 +1250,7 @@ export default {
       bus.$on('show-edit-filter', this.showEditFilter)
       bus.$on('calc-data', this.calcData)
       bus.$on('plugins-calc-style', this.calcStyle)
+      bus.$on('plugin-chart-click', this.chartClick)
     },
     initTableData(id) {
       if (id != null) {
@@ -2096,7 +2098,7 @@ export default {
     chartClick(param) {
       if (this.drillClickDimensionList.length < this.view.drillFields.length - 1) {
         // const isSwitch = (this.chart.type === 'map' && this.sendToChildren(param))
-        if (this.chart.type === 'map') {
+        if (this.chart.type === 'map' || this.chart.type === 'buddle-map') {
           if (this.sendToChildren(param)) {
             this.drillClickDimensionList.push({ dimensionList: param.data.dimensionList })
             // this.getData(this.param.id)
@@ -2119,16 +2121,22 @@ export default {
     resetDrill() {
       const length = this.drillClickDimensionList.length
       this.drillClickDimensionList = []
-      if (this.chart.type === 'map') {
+      if (this.chart.type === 'map' || this.chart.type === 'buddle-map') {
         this.backToParent(0, length)
         this.currentAcreaNode = null
-        this.$refs.dynamicChart && this.$refs.dynamicChart.registerDynamicMap && this.$refs.dynamicChart.registerDynamicMap(null)
+        const current = this.$refs.dynamicChart
+        if (this.view.isPlugin) {
+          current && current.callPluginInner({ methodName: 'registerDynamicMap', methodParam: null })
+        } else {
+          current && current.registerDynamicMap && current.registerDynamicMap(null)
+        }
+        // this.$refs.dynamicChart && this.$refs.dynamicChart.registerDynamicMap && this.$refs.dynamicChart.registerDynamicMap(null)
       }
     },
     drillJump(index) {
       const length = this.drillClickDimensionList.length
       this.drillClickDimensionList = this.drillClickDimensionList.slice(0, index)
-      if (this.chart.type === 'map') {
+      if (this.chart.type === 'map' || this.chart.type === 'buddle-map') {
         this.backToParent(index, length)
       }
 
@@ -2148,7 +2156,13 @@ export default {
       }
 
       this.currentAcreaNode = tempNode
-      this.$refs.dynamicChart && this.$refs.dynamicChart.registerDynamicMap && this.$refs.dynamicChart.registerDynamicMap(this.currentAcreaNode.code)
+      // 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({ methodName: 'registerDynamicMap', methodParam: this.currentAcreaNode.code })
+      } else {
+        current && current.registerDynamicMap && current.registerDynamicMap(this.currentAcreaNode.code)
+      }
     },
 
     // 切换下一级地图
@@ -2166,22 +2180,17 @@ export default {
         if (!nextNode || !nextNode.code) return null
         // this.view.customAttr.areaCode = nextNode.code
         this.currentAcreaNode = nextNode
-        this.$refs.dynamicChart && this.$refs.dynamicChart.registerDynamicMap && this.$refs.dynamicChart.registerDynamicMap(nextNode.code)
+        // 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({ methodName: 'registerDynamicMap', methodParam: nextNode.code })
+        } else {
+          nextNode && current && current.registerDynamicMap && current.registerDynamicMap(nextNode.code)
+        }
         return nextNode
       }
     },
-    // 根据地名获取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++) {

frontend/src/views/system/plugin/PluginCom.vue

@@ -79,8 +79,11 @@ export default {
       const { eventName, eventParam } = param
       bus.$emit(eventName, eventParam)
     },
-    chartResize() {
+    /* chartResize() {
       this.$refs[this.refId] && this.$refs[this.refId].chartResize && this.$refs[this.refId].chartResize()
+    }, */
+    callPluginInner(param) {
+      this.$refs[this.refId] && this.$refs[this.refId].callPluginInner && this.$refs[this.refId].callPluginInner(param)
     }
   }
 }