Merge pull request #431 from dataease/pr@v1.1@fix_仪表板编辑视图样式回显问题

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

@@ -101,25 +101,29 @@ 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.legend) {
-            this.legendForm = customStyle.legend
-          }
-        }
+        this.initData()
       }
     }
   },
   mounted() {
     this.init()
+    this.initData()
   },
   methods: {
+    initData() {
+      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.legend) {
+          this.legendForm = customStyle.legend
+        }
+      }
+    },
     init() {
       const arr = []
       for (let i = 10; i <= 60; i = i + 2) {

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

@@ -81,27 +81,31 @@ 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.split) {
-            this.splitForm = customStyle.split
-          } else {
-            this.splitForm = JSON.parse(JSON.stringify(DEFAULT_SPLIT))
-          }
-        }
+        this.initData()
       }
     }
   },
   mounted() {
     this.init()
+    this.initData()
   },
   methods: {
+    initData() {
+      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.split) {
+          this.splitForm = customStyle.split
+        } else {
+          this.splitForm = JSON.parse(JSON.stringify(DEFAULT_SPLIT))
+        }
+      }
+    },
     init() {
       const arr = []
       for (let i = 6; i <= 40; i = i + 2) {

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

@@ -91,26 +91,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.text) {
-            this.titleForm = customStyle.text
-          }
-          this.titleForm.title = this.chart.title
-        }
+        this.initData()
       }
     }
   },
   mounted() {
     this.init()
+    this.initData()
   },
   methods: {
+    initData() {
+      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.text) {
+          this.titleForm = customStyle.text
+        }
+        this.titleForm.title = this.chart.title
+      }
+    },
     init() {
       const arr = []
       for (let i = 10; i <= 60; i = i + 2) {

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

@@ -112,31 +112,35 @@ 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.xAxis) {
-            this.axisForm = customStyle.xAxis
-            if (!this.axisForm.splitLine) {
-              this.axisForm.splitLine = JSON.parse(JSON.stringify(DEFAULT_XAXIS_STYLE.splitLine))
-            }
-            if (!this.axisForm.nameTextStyle) {
-              this.axisForm.nameTextStyle = JSON.parse(JSON.stringify(DEFAULT_XAXIS_STYLE.nameTextStyle))
-            }
-          }
-        }
+        this.initData()
       }
     }
   },
   mounted() {
     this.init()
+    this.initData()
   },
   methods: {
+    initData() {
+      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.xAxis) {
+          this.axisForm = customStyle.xAxis
+          if (!this.axisForm.splitLine) {
+            this.axisForm.splitLine = JSON.parse(JSON.stringify(DEFAULT_XAXIS_STYLE.splitLine))
+          }
+          if (!this.axisForm.nameTextStyle) {
+            this.axisForm.nameTextStyle = JSON.parse(JSON.stringify(DEFAULT_XAXIS_STYLE.nameTextStyle))
+          }
+        }
+      }
+    },
     init() {
       const arr = []
       for (let i = 6; i <= 40; i = i + 2) {

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

@@ -112,31 +112,35 @@ 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.yAxis) {
-            this.axisForm = customStyle.yAxis
-            if (!this.axisForm.splitLine) {
-              this.axisForm.splitLine = JSON.parse(JSON.stringify(DEFAULT_YAXIS_STYLE.splitLine))
-            }
-            if (!this.axisForm.nameTextStyle) {
-              this.axisForm.nameTextStyle = JSON.parse(JSON.stringify(DEFAULT_YAXIS_STYLE.nameTextStyle))
-            }
-          }
-        }
+        this.initData()
       }
     }
   },
   mounted() {
     this.init()
+    this.initData()
   },
   methods: {
+    initData() {
+      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.yAxis) {
+          this.axisForm = customStyle.yAxis
+          if (!this.axisForm.splitLine) {
+            this.axisForm.splitLine = JSON.parse(JSON.stringify(DEFAULT_YAXIS_STYLE.splitLine))
+          }
+          if (!this.axisForm.nameTextStyle) {
+            this.axisForm.nameTextStyle = JSON.parse(JSON.stringify(DEFAULT_YAXIS_STYLE.nameTextStyle))
+          }
+        }
+      }
+    },
     init() {
       const arr = []
       for (let i = 6; i <= 40; i = i + 2) {

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

@@ -12,7 +12,7 @@
             <!--            <el-form-item :label="$t('chart.show')" class="form-item">-->
             <!--              <el-checkbox v-model="labelForm.show" @change="changeLabelAttr">{{ $t('chart.show') }}</el-checkbox>-->
             <!--            </el-form-item>-->
-            <el-form-item :label="$t('chart.pie_label_line_show')" class="form-item">
+            <el-form-item v-show="chart.type && !chart.type.includes('pie')" :label="$t('chart.pie_label_line_show')" class="form-item">
               <el-checkbox v-model="labelForm.labelLine.show" @change="changeLabelAttr">{{ $t('chart.pie_label_line_show') }}</el-checkbox>
             </el-form-item>
             <el-form-item :label="$t('chart.text_fontsize')" class="form-item">
@@ -116,28 +116,32 @@ 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.label) {
-            this.labelForm = customAttr.label
-            if (!this.labelForm.labelLine) {
-              this.labelForm.labelLine = JSON.parse(JSON.stringify(DEFAULT_LABEL.labelLine))
-            }
-          }
-        }
+        this.initData()
       }
     }
   },
   mounted() {
     this.init()
+    this.initData()
   },
   methods: {
+    initData() {
+      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.label) {
+          this.labelForm = customAttr.label
+          if (!this.labelForm.labelLine) {
+            this.labelForm.labelLine = JSON.parse(JSON.stringify(DEFAULT_LABEL.labelLine))
+          }
+        }
+      }
+    },
     init() {
       const arr = []
       for (let i = 10; i <= 20; i = i + 2) {

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

@@ -183,25 +183,29 @@ 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.size) {
-            this.sizeForm = customAttr.size
-          }
-        }
+        this.initData()
       }
     }
   },
   mounted() {
     this.init()
+    this.initData()
   },
   methods: {
+    initData() {
+      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.size) {
+          this.sizeForm = customAttr.size
+        }
+      }
+    },
     init() {
       const arr = []
       for (let i = 10; i <= 60; i = i + 2) {

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

@@ -95,25 +95,29 @@ 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.tooltip) {
-            this.tooltipForm = customAttr.tooltip
-          }
-        }
+        this.initData()
       }
     }
   },
   mounted() {
     this.init()
+    this.initData()
   },
   methods: {
+    initData() {
+      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.tooltip) {
+          this.tooltipForm = customAttr.tooltip
+        }
+      }
+    },
     init() {
       const arr = []
       for (let i = 10; i <= 20; i = i + 2) {

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

@@ -1128,10 +1128,12 @@ export default {
     },
 
     changeChart() {
-      this.view.tableId = this.changeTable.id
-      this.view.xaxis = []
-      this.view.yaxis = []
-      this.view.customFilter = []
+      if (this.view.tableId !== this.changeTable.id) {
+        this.view.tableId = this.changeTable.id
+        this.view.xaxis = []
+        this.view.yaxis = []
+        this.view.customFilter = []
+      }
       this.save(true, 'chart', false)
     },