fix: 仪表盘样式设置 回显不准确问题

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

@@ -2,10 +2,10 @@
   <div v-loading="requestStatus==='waiting'" class="rect-shape">
     <div v-if="requestStatus==='error'" class="chart-error-class">
       <div style="font-size: 12px; color: #9ea6b2;height: 100%;display: flex;align-items: center;justify-content: center;">
-        <span v-if="message.response.data.message">{{ message.response.data.message }}<span>,{{ $t('chart.chart_show_error') }}
+        {{ message }},{{ $t('chart.chart_show_error') }}
         <br>
         {{ $t('chart.chart_error_tips') }}
-        </span></span></div>
+      </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" />
     <table-normal v-if="requestStatus==='success'&&chart.type && chart.type.includes('table')" :ref="element.propValue.id" :chart="chart" class="table-class" />
@@ -180,7 +180,11 @@ export default {
           return true
         }).catch(err => {
           this.requestStatus = 'error'
+          if (err && err.response && err.response.data) {
+            this.message = err.response.data.message
+          } else {
             this.message = err
+          }
           return true
         })
       }

frontend/src/views/chart/components/component-style/BackgroundColorSelector.vue

@@ -42,6 +42,18 @@ export default {
   watch: {
     'chart': {
       handler: function() {
+        this.init()
+      }
+    }
+  },
+  mounted() {
+    this.init()
+  },
+  methods: {
+    changeBackgroundStyle() {
+      this.$emit('onChangeBackgroundForm', this.colorForm)
+    },
+    init() {
       const chart = JSON.parse(JSON.stringify(this.chart))
       if (chart.customStyle) {
         let customStyle = null
@@ -56,14 +68,6 @@ export default {
       }
     }
   }
-  },
-  mounted() {
-  },
-  methods: {
-    changeBackgroundStyle() {
-      this.$emit('onChangeBackgroundForm', this.colorForm)
-    }
-  }
 }
 </script>
 

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

@@ -126,22 +126,12 @@ export default {
   watch: {
     'chart': {
       handler: function() {
-        const chart = JSON.parse(JSON.stringify(this.chart))
-        if (chart.customAttr) {
-          let customAttr = null
-          if (Object.prototype.toString.call(chart.customAttr) === '[object Object]') {
-            customAttr = JSON.parse(JSON.stringify(chart.customAttr))
-          } else {
-            customAttr = JSON.parse(chart.customAttr)
-          }
-          if (customAttr.color) {
-            this.colorForm = customAttr.color
-          }
-        }
+        this.init()
       }
     }
   },
   mounted() {
+    this.init()
   },
   methods: {
     changeColorCase() {
@@ -153,6 +143,20 @@ export default {
       val.value = items[0].value
       val.colors = items[0].colors
       this.$emit('onColorChange', val)
+    },
+    init() {
+      const chart = JSON.parse(JSON.stringify(this.chart))
+      if (chart.customAttr) {
+        let customAttr = null
+        if (Object.prototype.toString.call(chart.customAttr) === '[object Object]') {
+          customAttr = JSON.parse(JSON.stringify(chart.customAttr))
+        } else {
+          customAttr = JSON.parse(chart.customAttr)
+        }
+        if (customAttr.color) {
+          this.colorForm = customAttr.color
+        }
+      }
     }
   }
 }

frontend/src/views/panel/SubjectSetting/index.vue

@@ -17,7 +17,7 @@
         <el-collapse-item :title="$t('chart.module_style')" name="component">
           <el-row style="background-color: #f7f8fa; margin: 5px">
             <!--            <title-selector class="attr-selector" :chart="chart" @onTextChange="onTextChange" />-->
-            <background-color-selector class="attr-selector" :chart="chart" @onChangeBackgroundForm="onChangeBackgroundForm" />
+            <background-color-selector v-if="chart" class="attr-selector" :chart="chart" @onChangeBackgroundForm="onChangeBackgroundForm" />
           </el-row>
         </el-collapse-item>
         <el-collapse-item :title="$t('chart.shape_attr')" name="graphical">
@@ -27,7 +27,7 @@
         </el-collapse-item>
         <el-collapse-item :title="$t('panel.table')" name="table">
           <el-row style="background-color: #f7f8fa; margin: 5px">
-            <color-selector v-if="tableChartShow" index="10002" :source-type="'panelTable'" class="attr-selector" :chart="tableChart" @onColorChange="onTableColorChange" />
+            <color-selector index="10002" :source-type="'panelTable'" class="attr-selector" :chart="tableChart" @onColorChange="onTableColorChange" />
           </el-row>
         </el-collapse-item>
       </el-collapse>
@@ -58,7 +58,7 @@ export default {
     return {
       panelInfo: this.$store.state.panel.panelInfo,
       activeNames: ['panel'],
-      chart: {},
+      chart: null,
       tableChart: null,
       collapseShow: true,
       tableChartShow: true
@@ -76,9 +76,9 @@ export default {
       this.collapseShow = false
       this.$nextTick(() => (this.collapseShow = true))
     })
-    this.init()
   },
   created() {
+    this.init()
   },
 
   methods: {