From 76162f146103a51344c6dbeaf17eec7780dfaf30 Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Tue, 22 Jun 2021 11:25:59 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BB=AA=E8=A1=A8=E7=9B=98=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F=E8=AE=BE=E7=BD=AE=20=E5=9B=9E=E6=98=BE=E4=B8=8D?=
 =?UTF-8?q?=E5=87=86=E7=A1=AE=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../canvas/custom-component/UserView.vue      | 14 ++++++----
 .../BackgroundColorSelector.vue               | 28 +++++++++++--------
 .../components/shape-attr/ColorSelector.vue   | 28 +++++++++++--------
 .../src/views/panel/SubjectSetting/index.vue  |  8 +++---
 4 files changed, 45 insertions(+), 33 deletions(-)

diff --git a/frontend/src/components/canvas/custom-component/UserView.vue b/frontend/src/components/canvas/custom-component/UserView.vue
index 2c9d282a7a..092a9669c9 100644
--- a/frontend/src/components/canvas/custom-component/UserView.vue
+++ b/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') }}
-          <br>
-          {{ $t('chart.chart_error_tips') }}
-        </span></span></div>
+        {{ message }},{{ $t('chart.chart_show_error') }}
+        <br>
+        {{ $t('chart.chart_error_tips') }}
+      </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'
-          this.message = err
+          if (err && err.response && err.response.data) {
+            this.message = err.response.data.message
+          } else {
+            this.message = err
+          }
           return true
         })
       }
diff --git a/frontend/src/views/chart/components/component-style/BackgroundColorSelector.vue b/frontend/src/views/chart/components/component-style/BackgroundColorSelector.vue
index 76fb8d145b..e802ac43d2 100644
--- a/frontend/src/views/chart/components/component-style/BackgroundColorSelector.vue
+++ b/frontend/src/views/chart/components/component-style/BackgroundColorSelector.vue
@@ -42,26 +42,30 @@ export default {
   watch: {
     'chart': {
       handler: function() {
-        const chart = JSON.parse(JSON.stringify(this.chart))
-        if (chart.customStyle) {
-          let customStyle = null
-          if (Object.prototype.toString.call(chart.customStyle) === '[object Object]') {
-            customStyle = JSON.parse(JSON.stringify(chart.customStyle))
-          } else {
-            customStyle = JSON.parse(chart.customStyle)
-          }
-          if (customStyle.background) {
-            this.colorForm = customStyle.background
-          }
-        }
+        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
+        if (Object.prototype.toString.call(chart.customStyle) === '[object Object]') {
+          customStyle = JSON.parse(JSON.stringify(chart.customStyle))
+        } else {
+          customStyle = JSON.parse(chart.customStyle)
+        }
+        if (customStyle.background) {
+          this.colorForm = customStyle.background
+        }
+      }
     }
   }
 }
diff --git a/frontend/src/views/chart/components/shape-attr/ColorSelector.vue b/frontend/src/views/chart/components/shape-attr/ColorSelector.vue
index 5a74f28dac..cf98d8293f 100644
--- a/frontend/src/views/chart/components/shape-attr/ColorSelector.vue
+++ b/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
+        }
+      }
     }
   }
 }
diff --git a/frontend/src/views/panel/SubjectSetting/index.vue b/frontend/src/views/panel/SubjectSetting/index.vue
index 346105ab3d..fad042a16c 100644
--- a/frontend/src/views/panel/SubjectSetting/index.vue
+++ b/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: {