From ef6d79003574a57c47e9b2f54fa73c7abbd723c3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E5=98=89=E8=B1=AA?=
 <42510293+ziyujiahao@users.noreply.github.com>
Date: Wed, 23 Feb 2022 12:10:40 +0800
Subject: [PATCH] =?UTF-8?q?revert:=20=E8=A7=86=E5=9B=BE=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E6=94=AF=E6=8C=81=E8=AE=BE=E7=BD=AE=E8=83=8C=E6=99=AF=E5=9B=BE?=
 =?UTF-8?q?=E7=89=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: 视图组件支持设置背景图片

* feat: 视图组件支持设置背景图片

* refactor: 增加白名单

* Revert "feat: 视图组件支持设置背景图片"

This reverts commit fe63b85f09a3a3639c05e83110d830da9fd59911.

# Conflicts:
#	frontend/src/views/chart/components/component-style/BackgroundColorSelector.vue
---
 .../components/canvas/components/Toolbar.vue  |   3 +-
 .../canvas/custom-component/UserView.vue      | 138 +++++-------
 frontend/src/views/chart/chart/chart.js       |   8 -
 .../src/views/chart/chart/common/common.js    |   2 +-
 .../views/chart/chart/common/common_antv.js   |   2 +-
 .../views/chart/components/ChartComponent.vue |   2 +-
 .../chart/components/ChartComponentG2.vue     |   2 +-
 .../chart/components/ChartComponentS2.vue     |  18 +-
 .../BackgroundColorSelector.vue               | 207 +++---------------
 .../chart/components/normal/LabelNormal.vue   |   2 +-
 .../chart/components/table/TableNormal.vue    |   4 +-
 frontend/src/views/chart/view/ChartEdit.vue   |  33 +--
 12 files changed, 114 insertions(+), 307 deletions(-)

diff --git a/frontend/src/components/canvas/components/Toolbar.vue b/frontend/src/components/canvas/components/Toolbar.vue
index da033cd36a..a7663d7af6 100644
--- a/frontend/src/components/canvas/components/Toolbar.vue
+++ b/frontend/src/components/canvas/components/Toolbar.vue
@@ -126,8 +126,7 @@ export default {
       'targetLinkageInfo',
       'mobileLayoutStatus',
       'mobileComponentData',
-      'componentDataCache',
-      'styleChangeTimes'
+      'componentDataCache'
     ])
   },
   created() {
diff --git a/frontend/src/components/canvas/custom-component/UserView.vue b/frontend/src/components/canvas/custom-component/UserView.vue
index afb2d2f3bd..a0243333f4 100644
--- a/frontend/src/components/canvas/custom-component/UserView.vue
+++ b/frontend/src/components/canvas/custom-component/UserView.vue
@@ -8,65 +8,63 @@
       'rect-shape'
     ]"
   >
-    <div :style="componentBackGround">
-      <EditBarView v-if="editBarViewShowFlag" :is-edit="isEdit" :view-id="element.propValue.viewId" @showViewDetails="openChartDetailsDialog" />
-      <div v-if="requestStatus==='error'" class="chart-error-class">
-        <div class="chart-error-message-class">
-          {{ message }},{{ $t('chart.chart_show_error') }}
-          <br>
-          {{ $t('chart.chart_error_tips') }}
-        </div>
-      </div>
-      <plugin-com
-        v-if="chart.isPlugin"
-        :ref="element.propValue.id"
-        :component-name="chart.type + '-view'"
-        :obj="{chart, trackMenu, searchCount, terminalType: scaleCoefficientType}"
-        class="chart-class"
-      />
-      <chart-component
-        v-else-if="charViewShowFlag"
-        :ref="element.propValue.id"
-        class="chart-class"
-        :chart="chart"
-        :track-menu="trackMenu"
-        :search-count="searchCount"
-        :terminal-type="scaleCoefficientType"
-        @onChartClick="chartClick"
-        @onJumpClick="jumpClick"
-      />
-      <chart-component-g2
-        v-else-if="charViewG2ShowFlag"
-        :ref="element.propValue.id"
-        class="chart-class"
-        :chart="chart"
-        :track-menu="trackMenu"
-        :search-count="searchCount"
-        @onChartClick="chartClick"
-        @onJumpClick="jumpClick"
-      />
-      <chart-component-s2
-        v-else-if="charViewS2ShowFlag"
-        :ref="element.propValue.id"
-        class="chart-class"
-        :chart="chart"
-        :track-menu="trackMenu"
-        :search-count="searchCount"
-        @onChartClick="chartClick"
-        @onJumpClick="jumpClick"
-      />
-      <table-normal
-        v-else-if="tableShowFlag"
-        :ref="element.propValue.id"
-        :show-summary="chart.type === 'table-normal'"
-        :chart="chart"
-        class="table-class"
-      />
-      <label-normal v-else-if="labelShowFlag" :ref="element.propValue.id" :chart="chart" class="table-class" />
-      <div style="position: absolute;left: 8px;bottom:8px;">
-        <drill-path :drill-filters="drillFilters" @onDrillJump="drillJump" />
+    <EditBarView v-if="editBarViewShowFlag" :is-edit="isEdit" :view-id="element.propValue.viewId" @showViewDetails="openChartDetailsDialog" />
+    <div v-if="requestStatus==='error'" class="chart-error-class">
+      <div class="chart-error-message-class">
+        {{ message }},{{ $t('chart.chart_show_error') }}
+        <br>
+        {{ $t('chart.chart_error_tips') }}
       </div>
     </div>
+    <plugin-com
+      v-if="chart.isPlugin"
+      :ref="element.propValue.id"
+      :component-name="chart.type + '-view'"
+      :obj="{chart, trackMenu, searchCount, terminalType: scaleCoefficientType}"
+      class="chart-class"
+    />
+    <chart-component
+      v-else-if="charViewShowFlag"
+      :ref="element.propValue.id"
+      class="chart-class"
+      :chart="chart"
+      :track-menu="trackMenu"
+      :search-count="searchCount"
+      :terminal-type="scaleCoefficientType"
+      @onChartClick="chartClick"
+      @onJumpClick="jumpClick"
+    />
+    <chart-component-g2
+      v-else-if="charViewG2ShowFlag"
+      :ref="element.propValue.id"
+      class="chart-class"
+      :chart="chart"
+      :track-menu="trackMenu"
+      :search-count="searchCount"
+      @onChartClick="chartClick"
+      @onJumpClick="jumpClick"
+    />
+    <chart-component-s2
+      v-else-if="charViewS2ShowFlag"
+      :ref="element.propValue.id"
+      class="chart-class"
+      :chart="chart"
+      :track-menu="trackMenu"
+      :search-count="searchCount"
+      @onChartClick="chartClick"
+      @onJumpClick="jumpClick"
+    />
+    <table-normal
+      v-else-if="tableShowFlag"
+      :ref="element.propValue.id"
+      :show-summary="chart.type === 'table-normal'"
+      :chart="chart"
+      class="table-class"
+    />
+    <label-normal v-else-if="labelShowFlag" :ref="element.propValue.id" :chart="chart" class="table-class" />
+    <div style="position: absolute;left: 8px;bottom:8px;">
+      <drill-path :drill-filters="drillFilters" @onDrillJump="drillJump" />
+    </div>
   </div>
 </template>
 
@@ -92,7 +90,6 @@ import EditBarView from '@/components/canvas/components/Editor/EditBarView'
 import { customAttrTrans, customStyleTrans, recursionTransObj } from '@/components/canvas/utils/style'
 import ChartComponentS2 from '@/views/chart/components/ChartComponentS2'
 import PluginCom from '@/views/system/plugin/PluginCom'
-import { hexColorToRGBA } from '@/views/chart/chart/util'
 export default {
   name: 'UserView',
   components: { PluginCom, ChartComponentS2, EditBarView, ChartComponent, TableNormal, LabelNormal, DrillPath, ChartComponentG2 },
@@ -169,31 +166,6 @@ export default {
   },
 
   computed: {
-    // 视图
-    componentBackGround() {
-      const customStyle = JSON.parse(this.chart.customStyle)
-      let style = {
-        height: '100%',
-        width: '100%',
-        backgroundSize: '100% 100% !important',
-        borderRadius: '0px'
-      }
-      if (customStyle && customStyle.background) {
-        style.borderRadius = customStyle.background.borderRadius + 'px!important'
-        if (customStyle.background.backgroundType === 'outImage' && typeof (customStyle.background.outImage) === 'string') {
-          style = {
-            background: `url(${customStyle.background.outImage}) no-repeat`,
-            ...style
-          }
-        } else if (!customStyle.background.backgroundType || customStyle.background.backgroundType === 'color') {
-          style = {
-            background: hexColorToRGBA(customStyle.background.color, customStyle.background.alpha),
-            ...style
-          }
-        }
-      }
-      return style
-    },
     scaleCoefficient() {
       if (this.terminal === 'pc' && !this.mobileLayoutStatus) {
         return 1.1
diff --git a/frontend/src/views/chart/chart/chart.js b/frontend/src/views/chart/chart/chart.js
index 179f42bcc7..df770bd6e8 100644
--- a/frontend/src/views/chart/chart/chart.js
+++ b/frontend/src/views/chart/chart/chart.js
@@ -1,8 +1,3 @@
-import {ApplicationContext} from "@/utils/ApplicationContext";
-import {BASE_MOBILE_STYLE, HYPERLINKS} from "@/components/canvas/custom-component/component-list";
-import store from "@/store";
-import {deepCopy, resetID} from "@/components/canvas/utils/utils";
-
 export const DEFAULT_COLOR_CASE = {
   value: 'default',
   colors: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'],
@@ -197,10 +192,7 @@ export const DEFAULT_YAXIS_EXT_STYLE = {
   }
 }
 export const DEFAULT_BACKGROUND_COLOR = {
-  backgroundType: 'color',
   color: '#ffffff',
-  outImage: null,
-  innerImage: null,
   alpha: 100,
   borderRadius: 5
 }
diff --git a/frontend/src/views/chart/chart/common/common.js b/frontend/src/views/chart/chart/common/common.js
index 34445d128d..3945d4f4bf 100644
--- a/frontend/src/views/chart/chart/common/common.js
+++ b/frontend/src/views/chart/chart/common/common.js
@@ -174,7 +174,7 @@ export function componentStyle(chart_option, chart) {
       chart_option.radar.splitArea = customStyle.split.splitArea
     }
     if (customStyle.background) {
-      // chart_option.backgroundColor = hexColorToRGBA(customStyle.background.color, customStyle.background.alpha)
+      chart_option.backgroundColor = hexColorToRGBA(customStyle.background.color, customStyle.background.alpha)
     }
   }
 }
diff --git a/frontend/src/views/chart/chart/common/common_antv.js b/frontend/src/views/chart/chart/common/common_antv.js
index b67db98842..4175a70bf1 100644
--- a/frontend/src/views/chart/chart/common/common_antv.js
+++ b/frontend/src/views/chart/chart/common/common_antv.js
@@ -40,7 +40,7 @@ export function getTheme(chart) {
     customStyle = JSON.parse(chart.customStyle)
     // bg
     if (customStyle.background) {
-      // bgColor = hexColorToRGBA(customStyle.background.color, customStyle.background.alpha)
+      bgColor = hexColorToRGBA(customStyle.background.color, customStyle.background.alpha)
     }
     // legend
     if (customStyle.legend) {
diff --git a/frontend/src/views/chart/components/ChartComponent.vue b/frontend/src/views/chart/components/ChartComponent.vue
index aaadf57ee5..3082ccf498 100644
--- a/frontend/src/views/chart/components/ChartComponent.vue
+++ b/frontend/src/views/chart/components/ChartComponent.vue
@@ -7,7 +7,7 @@
       :style="trackBarStyleTime"
       @trackClick="trackClick"
     />
-    <div :id="chartId" style="width: 100%;height: 100%;overflow: hidden;" />
+    <div :id="chartId" style="width: 100%;height: 100%;overflow: hidden;" :style="{ borderRadius: borderRadius}" />
     <div v-if="chart.type === 'map'" class="map-zoom-box">
       <div style="margin-bottom: 0.5em;">
         <el-button size="mini" icon="el-icon-plus" circle @click="roamMap(true)" />
diff --git a/frontend/src/views/chart/components/ChartComponentG2.vue b/frontend/src/views/chart/components/ChartComponentG2.vue
index ce766e8f2a..66c9437c86 100644
--- a/frontend/src/views/chart/components/ChartComponentG2.vue
+++ b/frontend/src/views/chart/components/ChartComponentG2.vue
@@ -87,7 +87,7 @@ export default {
     },
     bg_class() {
       return {
-        // borderRadius: this.borderRadius
+        borderRadius: this.borderRadius
       }
     }
   },
diff --git a/frontend/src/views/chart/components/ChartComponentS2.vue b/frontend/src/views/chart/components/ChartComponentS2.vue
index 318997f0f1..e4b4b3b1fd 100644
--- a/frontend/src/views/chart/components/ChartComponentS2.vue
+++ b/frontend/src/views/chart/components/ChartComponentS2.vue
@@ -1,10 +1,10 @@
 <template>
-  <div ref="chartContainer" style="padding: 0;width: 100%;height: 100%;overflow: hidden;">
+  <div ref="chartContainer" style="padding: 0;width: 100%;height: 100%;overflow: hidden;" :style="bg_class">
     <view-track-bar ref="viewTrack" :track-menu="trackMenu" class="track-bar" :style="trackBarStyleTime" @trackClick="trackClick" />
     <span v-if="chart.type" v-show="title_show" ref="title" :style="title_class" style="cursor: default;display: block;">
       <p style="padding:6px 10px 0 10px;margin: 0;overflow: hidden;white-space: pre;text-overflow: ellipsis;">{{ chart.title }}</p>
     </span>
-    <div ref="tableContainer" style="width: 100%;overflow: hidden;padding: 8px;">
+    <div ref="tableContainer" style="width: 100%;overflow: hidden;padding: 8px;" :style="{background:container_bg_class.background}">
       <div v-if="chart.type === 'table-normal'" :id="chartId" style="width: 100%;overflow: hidden;" :class="chart.drill ? 'table-dom-normal-drill' : 'table-dom-normal'" />
       <div v-if="chart.type === 'table-info'" :id="chartId" style="width: 100%;overflow: hidden;" :class="chart.drill ? 'table-dom-info-drill' : 'table-dom-info'" />
       <div v-if="chart.type === 'table-pivot'" :id="chartId" style="width: 100%;overflow: hidden;" class="table-dom-normal" />
@@ -109,6 +109,7 @@ export default {
     },
     bg_class() {
       return {
+        borderRadius: this.borderRadius
       }
     }
   },
@@ -258,7 +259,12 @@ export default {
       }
     },
     setBackGroundBorder() {
-
+      if (this.chart.customStyle) {
+        const customStyle = JSON.parse(this.chart.customStyle)
+        if (customStyle.background) {
+          this.borderRadius = (customStyle.background.borderRadius || 0) + 'px'
+        }
+      }
     },
     chartResize() {
       this.initData()
@@ -319,6 +325,12 @@ export default {
             this.$refs.title.style.fontSize = customStyle.text.fontSize + 'px'
           }
         }
+        if (customStyle.background) {
+          this.title_class.background = hexColorToRGBA(customStyle.background.color, customStyle.background.alpha)
+          this.borderRadius = (customStyle.background.borderRadius || 0) + 'px'
+
+          this.container_bg_class.background = hexColorToRGBA(customStyle.background.color, customStyle.background.alpha)
+        }
       }
     },
 
diff --git a/frontend/src/views/chart/components/component-style/BackgroundColorSelector.vue b/frontend/src/views/chart/components/component-style/BackgroundColorSelector.vue
index 58f84de123..d51a1ed91c 100644
--- a/frontend/src/views/chart/components/component-style/BackgroundColorSelector.vue
+++ b/frontend/src/views/chart/components/component-style/BackgroundColorSelector.vue
@@ -1,82 +1,24 @@
 <template>
   <div style="width: 100%">
     <el-col>
-      <el-row>
-        <el-col :span="5" class="col-label-item">
-          <el-radio v-model="colorForm.backgroundType" label="color" @change="changeBackgroundStyle"><span class="label-item">{{ $t('chart.color') }}</span></el-radio>
-        </el-col>
-        <el-col :span="19">
-          <el-color-picker v-model="colorForm.color" :predefine="predefineColors" size="mini" style="cursor: pointer;z-index: 1004;" @change="changeBackgroundStyle" />
-        </el-col>
-      </el-row>
-<!--      <el-row>-->
-<!--        <el-col :span="5" class="col-label-item">-->
-<!--          <el-radio v-model="colorForm.backgroundType" label="innerImage" @change="changeBackgroundStyle"><span class="label-item">边框</span></el-radio>-->
-<!--        </el-col>-->
-<!--        <el-col :span="19">-->
-<!--          <el-button @click="openBoardDialog"> 选择边框</el-button>-->
-<!--        </el-col>-->
-<!--      </el-row>-->
-      <el-row style="height: 60px;margin-top:10px;overflow: hidden">
-        <el-col :span="5" class="col-label-item">
-          <el-radio v-model="colorForm.backgroundType" label="outImage" @change="changeBackgroundStyle"><span class="label-item">{{ $t('panel.photo') }}</span></el-radio>
-        </el-col>
-        <el-col :span="9">
-          <el-upload
-            action=""
-            accept=".jpeg,.jpg,.png,.gif,.svg"
-            class="avatar-uploader"
-            list-type="picture-card"
-            :class="{disabled:uploadDisabled}"
-            :on-preview="handlePictureCardPreview"
-            :on-remove="handleRemove"
-            :file-list="fileList"
-            :on-change="onChange"
-            :http-request="upload"
-          >
-            <i class="el-icon-plus" />
-          </el-upload>
-          <el-dialog top="25vh" width="600px" :modal-append-to-body="false" :visible.sync="dialogVisible">
-            <img width="100%" :src="dialogImageUrl" alt="">
-          </el-dialog>
-        </el-col>
-      </el-row>
-      <el-row>
-        <el-col :span="5" class="col-label-item">
-          <span class="label-item">{{ $t('chart.border_radius') }}</span>
-        </el-col>
-        <el-col :span="19">
-          <el-slider v-model="colorForm.borderRadius" show-input :show-input-controls="false" input-size="mini" @change="changeBackgroundStyle" />
-        </el-col>
-      </el-row>
-      <el-row v-if="colorForm.backgroundType==='color'">
-        <el-col :span="5" class="col-label-item">
-          <span class="label-item">{{ $t('chart.not_alpha') }}</span>
-        </el-col>
-        <el-col :span="19">
+      <el-form ref="colorForm" :model="colorForm" label-width="80px" size="mini">
+        <el-form-item :label="$t('chart.color')" class="form-item">
+          <el-color-picker v-model="colorForm.color" class="color-picker-style" :predefine="predefineColors" @change="changeBackgroundStyle" />
+        </el-form-item>
+        <el-form-item :label="$t('chart.not_alpha')" class="form-item form-item-slider">
           <el-slider v-model="colorForm.alpha" show-input :show-input-controls="false" input-size="mini" @change="changeBackgroundStyle" />
-        </el-col>
-      </el-row>
-    </el-col>
-    <!--      <el-form ref="colorForm" :model="colorForm" label-width="80px" size="mini" :disabled="param && !hasDataPermission('manage',param.privileges)">-->
-    <!--        &lt;!&ndash;        <el-form-item :label="$t('chart.color')" class="form-item">&ndash;&gt;-->
-    <!--        &lt;!&ndash;          <el-color-picker v-model="colorForm.color" class="color-picker-style" :predefine="predefineColors" @change="changeBackgroundStyle" />&ndash;&gt;-->
-    <!--        &lt;!&ndash;        </el-form-item>&ndash;&gt;-->
-    <!--        <el-form-item :label="$t('chart.not_alpha')" class="form-item form-item-slider">-->
-    <!--          <el-slider v-model="colorForm.alpha" show-input :show-input-controls="false" input-size="mini" @change="changeBackgroundStyle" />-->
-    <!--        </el-form-item>-->
+        </el-form-item>
 
-    <!--        <el-form-item :label="$t('chart.border_radius')" class="form-item form-item-slider">-->
-    <!--          <el-slider v-model="colorForm.borderRadius" show-input :show-input-controls="false" input-size="mini" @change="changeBackgroundStyle" />-->
-    <!--        </el-form-item>-->
-    <!--      </el-form>-->
-    <!--    </el-col>-->
+        <el-form-item :label="$t('chart.border_radius')" class="form-item form-item-slider">
+          <el-slider v-model="colorForm.borderRadius" show-input :show-input-controls="false" input-size="mini" @change="changeBackgroundStyle" />
+        </el-form-item>
+      </el-form>
+    </el-col>
   </div>
 </template>
 
 <script>
 import { COLOR_PANEL, DEFAULT_BACKGROUND_COLOR } from '../../chart/chart'
-import { deepCopy } from '@/components/canvas/utils/utils'
 
 export default {
   name: 'BackgroundColorSelector',
@@ -92,10 +34,6 @@ export default {
   },
   data() {
     return {
-      fileList: [],
-      dialogImageUrl: '',
-      dialogVisible: false,
-      uploadDisabled: false,
       colorForm: JSON.parse(JSON.stringify(DEFAULT_BACKGROUND_COLOR)),
       predefineColors: COLOR_PANEL
     }
@@ -124,120 +62,41 @@ export default {
           customStyle = JSON.parse(chart.customStyle)
         }
         if (customStyle.background) {
-          debugger
           this.colorForm = customStyle.background
-          this.colorForm.backgroundType = this.colorForm.backgroundType || 'color'
-          if (this.colorForm.outImage && typeof (this.colorForm.outImage) === 'string') {
-            this.fileList.push({ url: this.colorForm.outImage })
-          }
         }
       }
-    },
-    onChangeType() {
-      this.changeBackgroundStyle()
-    },
-    handleRemove(file, fileList) {
-      this.uploadDisabled = false
-      this.colorForm.outImage = null
-      this.fileList = []
-      this.changeBackgroundStyle()
-    },
-    handlePictureCardPreview(file) {
-      this.dialogImageUrl = file.url
-      this.dialogVisible = true
-    },
-    onChange(file, fileList) {
-      var _this = this
-      _this.uploadDisabled = true
-      const reader = new FileReader()
-      reader.onload = function() {
-        _this.colorForm.outImage = reader.result
-        _this.changeBackgroundStyle()
-      }
-      this.$store.state.styleChangeTimes++
-      reader.readAsDataURL(file.raw)
-    },
-    upload(file) {
-      // console.log('this is upload')
-    },
-    openBoardDialog() {
-      // console.log('this is upload')
     }
   }
 }
 </script>
 
 <style scoped>
-  .shape-item{
-    padding: 6px;
-    border: none;
-    width: 100%;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-  }
-  .form-item-slider>>>.el-form-item__label{
-    font-size: 12px;
-    line-height: 38px;
-  }
-  .form-item>>>.el-form-item__label{
-    font-size: 12px;
-  }
-  .el-select-dropdown__item{
-    padding: 0 20px;
-  }
+.shape-item{
+  padding: 6px;
+  border: none;
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.form-item-slider>>>.el-form-item__label{
+  font-size: 12px;
+  line-height: 38px;
+}
+.form-item>>>.el-form-item__label{
+  font-size: 12px;
+}
+.el-select-dropdown__item{
+  padding: 0 20px;
+}
   span{
     font-size: 12px
   }
   .el-form-item{
     margin-bottom: 6px;
   }
-  .color-picker-style{
-    cursor: pointer;
-    z-index: 1003;
-  }
-  .avatar-uploader>>>.el-upload {
-    width: 100px;
-    height: 60px;
-    line-height: 70px;
-  }
-  .avatar-uploader>>>.el-upload-list li{
-    width: 100px !important;
-    height: 60px !important;
-  }
-  .disabled>>>.el-upload--picture-card {
-    display: none;
-  }
-  .shape-item{
-    padding: 6px;
-    border: none;
-    width: 100%;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-  }
-  .form-item-slider>>>.el-form-item__label{
-    font-size: 12px;
-    line-height: 38px;
-  }
-  .form-item>>>.el-form-item__label{
-    font-size: 12px;
-  }
-  .el-select-dropdown__item{
-    padding: 0 20px;
-  }
-  span{
-    font-size: 12px
-  }
-  .el-form-item{
-    margin-bottom: 6px;
-  }
-  .label-item{
-    font-size: 12px;
-    font-weight: bold;
-  }
-  .col-label-item{
-    text-align: right;
-    padding-right: 10px;
-  }
+.color-picker-style{
+  cursor: pointer;
+  z-index: 1003;
+}
 </style>
diff --git a/frontend/src/views/chart/components/normal/LabelNormal.vue b/frontend/src/views/chart/components/normal/LabelNormal.vue
index a9e5e42994..616692f810 100644
--- a/frontend/src/views/chart/components/normal/LabelNormal.vue
+++ b/frontend/src/views/chart/components/normal/LabelNormal.vue
@@ -161,7 +161,7 @@ export default {
           this.title_class.fontWeight = customStyle.text.isBolder ? 'bold' : 'normal'
         }
         if (customStyle.background) {
-          // this.bg_class.background = hexColorToRGBA(customStyle.background.color, customStyle.background.alpha)
+          this.bg_class.background = hexColorToRGBA(customStyle.background.color, customStyle.background.alpha)
         }
       }
     },
diff --git a/frontend/src/views/chart/components/table/TableNormal.vue b/frontend/src/views/chart/components/table/TableNormal.vue
index 1735e2e801..c9afef2d35 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="padding: 8px;width: 100%;height: 100%;overflow: hidden;">
+  <div ref="tableContainer" :style="bg_class" style="padding: 8px;width: 100%;height: 100%;overflow: hidden;">
     <el-row style="height: 100%;">
       <p v-show="title_show" ref="title" :style="title_class">{{ chart.title }}</p>
       <ux-grid
@@ -124,6 +124,8 @@ export default {
   computed: {
     bg_class() {
       return {
+        background: hexColorToRGBA('#ffffff', 0),
+        borderRadius: this.borderRadius
       }
     }
   },
diff --git a/frontend/src/views/chart/view/ChartEdit.vue b/frontend/src/views/chart/view/ChartEdit.vue
index d7a8fb6a66..b04e610cfd 100644
--- a/frontend/src/views/chart/view/ChartEdit.vue
+++ b/frontend/src/views/chart/view/ChartEdit.vue
@@ -808,8 +808,8 @@
       </el-tabs>
 
       <el-col style="height: 100%;min-width: 500px;border-top: 1px solid #E6E6E6;">
-        <el-row :style="componentBackGround" class="padding-lr">
-          <div ref="imageWrapper" style="height: 100%;">
+        <el-row style="width: 100%;height: 100%;" class="padding-lr">
+          <div ref="imageWrapper" style="height: 100%">
             <plugin-com
               v-if="httpRequest.status && chart.type && view.isPlugin"
               ref="dynamicChart"
@@ -1047,7 +1047,6 @@ import { compareItem } from '@/views/chart/chart/compare'
 import ChartComponentS2 from '@/views/chart/components/ChartComponentS2'
 import DimensionExtItem from '@/views/chart/components/drag-item/DimensionExtItem'
 import PluginCom from '@/views/system/plugin/PluginCom'
-import { hexColorToRGBA } from '@/views/chart/chart/util'
 export default {
   name: 'ChartEdit',
   components: {
@@ -1190,32 +1189,6 @@ export default {
   computed: {
     chartType() {
       return this.chart.type
-    },
-    // 视图
-    componentBackGround() {
-      const customStyle = JSON.parse(JSON.stringify(this.view.customStyle))
-      let style = {
-        height: '100%',
-        width: '100%',
-        backgroundSize: '100% 100% !important'
-      }
-      debugger
-      if (customStyle && customStyle.background) {
-        style['borderRadius'] = customStyle.background.borderRadius + 'px'
-        if (customStyle.background.backgroundType === 'outImage' && typeof (customStyle.background.outImage) === 'string') {
-          style = {
-            background: `url(${customStyle.background.outImage}) no-repeat`,
-            ...style
-          }
-        } else if (!customStyle.background.backgroundType || customStyle.background.backgroundType === 'color') {
-          style = {
-            background: hexColorToRGBA(customStyle.background.color, customStyle.background.alpha),
-            ...style
-          }
-        }
-      }
-
-      return style
     }
   },
   watch: {
@@ -1243,7 +1216,6 @@ export default {
     // this.initAreas()
   },
   mounted() {
-    debugger
     this.bindPluginEvent()
     // this.get(this.$store.state.chart.viewId);
     this.getData(this.param.id)
@@ -1542,7 +1514,6 @@ export default {
         this.closeChangeChart()
         // 从仪表板入口关闭
         if (this.$route.path.indexOf('panel') > -1) {
-          this.$store.commit('recordSnapshot')
           bus.$emit('PanelSwitchComponent', { name: 'PanelEdit' })
         }
         this.$success(this.$t('commons.save_success'))