Merge pull request #2389 from dataease/pr@dev@feat_new-version

fix: 修复部分类型视图无法自定义颜色的问题

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

@@ -524,7 +524,7 @@ export default {
         }
       }
     },
-    getData(id, cache = true) {
+    getData(id, cache = true, dataBroadcast = false) {
       if (id) {
         this.requestStatus = 'waiting'
         this.message = null
@@ -549,7 +549,7 @@ export default {
           // 将视图传入echart组件
           if (response.success) {
             this.chart = response.data
-            this.getDataOnly(response.data)
+            this.getDataOnly(response.data, dataBroadcast)
             this.chart['position'] = this.inTab ? 'tab' : 'panel'
             // 记录当前数据
             this.panelViewDetailsInfo[id] = JSON.stringify(this.chart)
@@ -845,7 +845,7 @@ export default {
     getDataEdit(param) {
       this.$store.state.styleChangeTimes++
       if (param.type === 'propChange') {
-        this.getData(param.viewId, false)
+        this.getData(param.viewId, false, true)
       } else if (param.type === 'styleChange') {
         this.chart.customAttr = param.viewInfo.customAttr
         this.chart.customStyle = param.viewInfo.customStyle
@@ -860,7 +860,7 @@ export default {
         this.mergeScale()
       }
     },
-    getDataOnly(sourceResponseData) {
+    getDataOnly(sourceResponseData, dataBroadcast) {
       if (this.isEdit) {
         if ((this.filter.filter && this.filter.filter.length) || (this.filter.linkageFilters && this.filter.linkageFilters.length)) {
           viewData(this.chart.id, this.panelInfo.id, {
@@ -869,9 +869,15 @@ export default {
             queryFrom: 'panel'
           }).then(response => {
             this.componentViewsData[this.chart.id] = response.data
+            if (dataBroadcast) {
+              bus.$emit('prop-change-data')
+            }
           })
         } else {
           this.componentViewsData[this.chart.id] = sourceResponseData
+          if (dataBroadcast) {
+            bus.$emit('prop-change-data')
+          }
         }
       }
     }

frontend/src/views/chart/components/shape-attr/ColorSelector.vue

@@ -118,6 +118,7 @@
 import { COLOR_PANEL, DEFAULT_COLOR_CASE } from '../../chart/chart'
 import { getColors } from '@/views/chart/chart/util'
 import { mapState } from 'vuex'
+import bus from '@/utils/bus'
 
 export default {
   name: 'ColorSelector',
@@ -248,11 +249,15 @@ export default {
   },
   computed: {
     ...mapState([
-      'batchOptStatus'
+      'batchOptStatus',
+      'componentViewsData'
     ])
   },
   mounted() {
     this.init()
+    bus.$on('prop-change-data', () => {
+      this.initCustomColor()
+    })
   },
   methods: {
     changeColorOption(modifyName = 'value') {
@@ -336,8 +341,10 @@ export default {
           this.chart.type === 'funnel' ||
           this.chart.type === 'radar' ||
           this.chart.type === 'scatter')) {
-        const chart = JSON.parse(JSON.stringify(this.chart))
+        if (this.componentViewsData[this.chart.id]) {
-        this.colorForm.seriesColors = getColors(chart, this.colorForm.colors, reset)
+          const chart = JSON.parse(JSON.stringify(this.componentViewsData[this.chart.id]))
+          this.colorForm.seriesColors = getColors(chart, this.colorForm.colors, reset)
+        }
       }
     }
   }

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

@@ -1199,8 +1199,8 @@ export default {
     ...mapState([
       'curComponent',
       'panelViewEditInfo',
-      'allViewRender',
+      'allViewRender'
-      'componentViewsData'
+
     ])
     /* pluginRenderOptions() {
       const plugins = localStorage.getItem('plugin-views') && JSON.parse(localStorage.getItem('plugin-views')) || []
@@ -1283,9 +1283,9 @@ export default {
       this.resetDrill()
       this.initFromPanel()
       this.getChart(this.param.id)
-      if (this.componentViewsData[this.param.id]) {
+      // if (this.componentViewsData[this.param.id]) {
-        this.chart = this.componentViewsData[this.param.id]
+      //   this.chart = this.componentViewsData[this.param.id]
-      }
+      // }
     },
     bindPluginEvent() {
       bus.$on('show-dimension-edit-filter', this.showDimensionEditFilter)