From a4420a22a7fccc78db06049f5447591b52d887ac Mon Sep 17 00:00:00 2001
From: fit2cloud-chenyw <yawen.chen@fit2cloud.com>
Date: Wed, 25 Aug 2021 15:49:59 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E8=A1=A8=E6=A0=BC=E5=92=8C=E8=A7=86?=
 =?UTF-8?q?=E5=9B=BE=E7=B1=BB=E5=9E=8B=E5=9C=86=E8=A7=92=E6=97=A0=E6=95=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../chart/components/normal/LabelNormal.vue   | 23 +++++++++++++--
 .../chart/components/table/TableNormal.vue    | 29 +++++++++++++++----
 2 files changed, 45 insertions(+), 7 deletions(-)

diff --git a/frontend/src/views/chart/components/normal/LabelNormal.vue b/frontend/src/views/chart/components/normal/LabelNormal.vue
index 1f5b9becdb..27f728943c 100644
--- a/frontend/src/views/chart/components/normal/LabelNormal.vue
+++ b/frontend/src/views/chart/components/normal/LabelNormal.vue
@@ -1,5 +1,5 @@
 <template>
-  <div ref="tableContainer" :style="bg_class" style="padding: 8px;">
+  <div ref="tableContainer" :style="bg_class" style="padding: 8px;width: 100%;height: 100%;overflow: hidden;">
     <p v-show="title_show" ref="title" :style="title_class">{{ chart.title }}</p>
     <div
       v-if="chart.data && chart.data.x && chart.data.x.length > 0 && chart.data.series && chart.data.series.length > 0 && chart.data.series[0].data && chart.data.series[0].data.length > 0"
@@ -76,9 +76,18 @@ export default {
       bg_class: {
         background: hexColorToRGBA('#ffffff', 0)
       },
-      title_show: true
+      title_show: true,
+      borderRadius: '0px'
     }
   },
+  computed: {
+    // bg_class() {
+    //   return {
+    //     background: hexColorToRGBA('#ffffff', 0),
+    //     borderRadius: this.borderRadius
+    //   }
+    // }
+  },
   watch: {
     chart() {
       this.init()
@@ -100,6 +109,16 @@ export default {
       window.onresize = function() {
         that.calcHeight()
       }
+      this.setBackGroundBorder()
+    },
+    setBackGroundBorder() {
+      if (this.chart.customStyle) {
+        const customStyle = JSON.parse(this.chart.customStyle)
+        if (customStyle.background) {
+          this.borderRadius = (customStyle.background.borderRadius || 0) + 'px'
+          this.bg_class.borderRadius = this.borderRadius
+        }
+      }
     },
     calcHeight() {
       const that = this
diff --git a/frontend/src/views/chart/components/table/TableNormal.vue b/frontend/src/views/chart/components/table/TableNormal.vue
index 0b1e0a6e83..e0ff19f7fb 100644
--- a/frontend/src/views/chart/components/table/TableNormal.vue
+++ b/frontend/src/views/chart/components/table/TableNormal.vue
@@ -1,5 +1,5 @@
 <template>
-  <div ref="tableContainer" :style="bg_class" style="padding: 8px;">
+  <div ref="tableContainer" :style="bg_class" style="padding: 8px;width: 100%;height: 100%;overflow: hidden;">
     <p v-show="title_show" ref="title" :style="title_class">{{ chart.title }}</p>
     <ux-grid
       ref="plxTable"
@@ -68,9 +68,10 @@ export default {
         fontStyle: 'normal',
         fontWeight: 'normal'
       },
-      bg_class: {
-        background: hexColorToRGBA('#ffffff', 0)
-      },
+      //   bg_class: {
+      //     background: hexColorToRGBA('#ffffff', 0),
+      //     borderRadius: this.borderRadius
+      //   },
       table_header_class: {
         fontSize: '12px',
         color: '#606266',
@@ -89,7 +90,16 @@ export default {
         background: '#ffffff',
         height: '36px'
       },
-      title_show: true
+      title_show: true,
+      borderRadius: '0px'
+    }
+  },
+  computed: {
+    bg_class() {
+      return {
+        background: hexColorToRGBA('#ffffff', 0),
+        borderRadius: this.borderRadius
+      }
     }
   },
   watch: {
@@ -111,6 +121,15 @@ export default {
         this.initData()
         this.calcHeightDelay()
       })
+      this.setBackGroundBorder()
+    },
+    setBackGroundBorder() {
+      if (this.chart.customStyle) {
+        const customStyle = JSON.parse(this.chart.customStyle)
+        if (customStyle.background) {
+          this.borderRadius = (customStyle.background.borderRadius || 0) + 'px'
+        }
+      }
     },
     initData() {
       const that = this