From fe63b85f09a3a3639c05e83110d830da9fd59911 Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Mon, 21 Feb 2022 17:58:33 +0800
Subject: [PATCH 1/5] =?UTF-8?q?feat:=20=E8=A7=86=E5=9B=BE=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E6=94=AF=E6=8C=81=E8=AE=BE=E7=BD=AE=E8=83=8C=E6=99=AF?=
 =?UTF-8?q?=E5=9B=BE=E7=89=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../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               | 196 +++++++++++++++---
 .../chart/components/normal/LabelNormal.vue   |   2 +-
 .../chart/components/table/TableNormal.vue    |   4 +-
 frontend/src/views/chart/view/ChartEdit.vue   |  33 ++-
 12 files changed, 296 insertions(+), 114 deletions(-)

diff --git a/frontend/src/components/canvas/components/Toolbar.vue b/frontend/src/components/canvas/components/Toolbar.vue
index a7663d7af6..da033cd36a 100644
--- a/frontend/src/components/canvas/components/Toolbar.vue
+++ b/frontend/src/components/canvas/components/Toolbar.vue
@@ -126,7 +126,8 @@ export default {
       'targetLinkageInfo',
       'mobileLayoutStatus',
       'mobileComponentData',
-      'componentDataCache'
+      'componentDataCache',
+      'styleChangeTimes'
     ])
   },
   created() {
diff --git a/frontend/src/components/canvas/custom-component/UserView.vue b/frontend/src/components/canvas/custom-component/UserView.vue
index a17634a791..69f5a4ee7c 100644
--- a/frontend/src/components/canvas/custom-component/UserView.vue
+++ b/frontend/src/components/canvas/custom-component/UserView.vue
@@ -8,62 +8,64 @@
       'rect-shape'
     ]"
   >
-    <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 :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" />
       </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>
@@ -90,6 +92,7 @@ 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 },
@@ -168,6 +171,31 @@ export default {
     this.bindPluginEvent()
   },
   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 df770bd6e8..179f42bcc7 100644
--- a/frontend/src/views/chart/chart/chart.js
+++ b/frontend/src/views/chart/chart/chart.js
@@ -1,3 +1,8 @@
+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'],
@@ -192,7 +197,10 @@ 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 3945d4f4bf..34445d128d 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 4175a70bf1..b67db98842 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 3082ccf498..aaadf57ee5 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;" :style="{ borderRadius: borderRadius}" />
+    <div :id="chartId" style="width: 100%;height: 100%;overflow: hidden;" />
     <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 66c9437c86..ce766e8f2a 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 e4b4b3b1fd..318997f0f1 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;" :style="bg_class">
+  <div ref="chartContainer" style="padding: 0;width: 100%;height: 100%;overflow: hidden;">
     <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;" :style="{background:container_bg_class.background}">
+    <div ref="tableContainer" style="width: 100%;overflow: hidden;padding: 8px;">
       <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,7 +109,6 @@ export default {
     },
     bg_class() {
       return {
-        borderRadius: this.borderRadius
       }
     }
   },
@@ -259,12 +258,7 @@ 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()
@@ -325,12 +319,6 @@ 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 d51a1ed91c..3d985280ff 100644
--- a/frontend/src/views/chart/components/component-style/BackgroundColorSelector.vue
+++ b/frontend/src/views/chart/components/component-style/BackgroundColorSelector.vue
@@ -1,24 +1,74 @@
 <template>
   <div style="width: 100%">
     <el-col>
-      <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-form-item>
-
-        <el-form-item :label="$t('chart.border_radius')" class="form-item form-item-slider">
+      <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 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-form-item>
-      </el-form>
+        </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-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 :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',
@@ -34,6 +84,10 @@ export default {
   },
   data() {
     return {
+      fileList: [],
+      dialogImageUrl: '',
+      dialogVisible: false,
+      uploadDisabled: false,
       colorForm: JSON.parse(JSON.stringify(DEFAULT_BACKGROUND_COLOR)),
       predefineColors: COLOR_PANEL
     }
@@ -62,41 +116,117 @@ 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')
     }
   }
 }
 </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;
-}
+  .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;
+  }
 </style>
diff --git a/frontend/src/views/chart/components/normal/LabelNormal.vue b/frontend/src/views/chart/components/normal/LabelNormal.vue
index 616692f810..a9e5e42994 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 c9afef2d35..1735e2e801 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;width: 100%;height: 100%;overflow: hidden;">
+  <div ref="tableContainer"  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,8 +124,6 @@ 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 1910837da0..4b918b9791 100644
--- a/frontend/src/views/chart/view/ChartEdit.vue
+++ b/frontend/src/views/chart/view/ChartEdit.vue
@@ -825,8 +825,8 @@
       </el-tabs>
 
       <el-col style="height: 100%;min-width: 500px;border-top: 1px solid #E6E6E6;">
-        <el-row style="width: 100%;height: 100%;" class="padding-lr">
-          <div ref="imageWrapper" style="height: 100%">
+        <el-row :style="componentBackGround" class="padding-lr">
+          <div ref="imageWrapper" style="height: 100%;">
             <plugin-com
               v-if="httpRequest.status && chart.type && view.isPlugin"
               ref="dynamicChart"
@@ -1064,6 +1064,7 @@ 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: {
@@ -1206,6 +1207,32 @@ 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: {
@@ -1233,6 +1260,7 @@ export default {
     // this.initAreas()
   },
   mounted() {
+    debugger
     this.bindPluginEvent()
     // this.get(this.$store.state.chart.viewId);
     this.getData(this.param.id)
@@ -1531,6 +1559,7 @@ 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'))

From e7ccb7c685dc9be73ce6240c9d6069dfcb9d7698 Mon Sep 17 00:00:00 2001
From: junjun <junjie.xia@fit2cloud.com>
Date: Mon, 21 Feb 2022 18:17:09 +0800
Subject: [PATCH 2/5] =?UTF-8?q?fix:=20=E4=BB=AA=E8=A1=A8=E6=9D=BF=E5=A4=8D?=
 =?UTF-8?q?=E5=88=B6=E9=80=8F=E8=A7=86=E5=9B=BE=E6=8A=A5=E9=94=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../java/io/dataease/base/mapper/ext/ExtChartViewMapper.xml     | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/backend/src/main/java/io/dataease/base/mapper/ext/ExtChartViewMapper.xml b/backend/src/main/java/io/dataease/base/mapper/ext/ExtChartViewMapper.xml
index e17913ef66..910eb49c84 100644
--- a/backend/src/main/java/io/dataease/base/mapper/ext/ExtChartViewMapper.xml
+++ b/backend/src/main/java/io/dataease/base/mapper/ext/ExtChartViewMapper.xml
@@ -94,6 +94,7 @@
             `type`,
             `title`,
             `x_axis`,
+            `x_axis_ext`,
             `y_axis`,
             `custom_attr`,
             `custom_style`,
@@ -119,6 +120,7 @@
         `type`,
         GET_CHART_VIEW_COPY_NAME ( #{oldChartId} ),
         `x_axis`,
+        `x_axis_ext`,
         `y_axis`,
         `custom_attr`,
         `custom_style`,

From 8823a6e035fa078e2e0ec521a4f7b15511cd5ee9 Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Tue, 22 Feb 2022 09:49:59 +0800
Subject: [PATCH 3/5] =?UTF-8?q?refactor:=20=E8=A7=86=E5=9B=BE=E5=8E=BB?=
 =?UTF-8?q?=E6=8E=89=E9=87=8D=E5=90=8D=E6=A0=A1=E9=AA=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../java/io/dataease/service/chart/ChartGroupService.java     | 4 ----
 .../main/java/io/dataease/service/chart/ChartViewService.java | 4 ----
 2 files changed, 8 deletions(-)

diff --git a/backend/src/main/java/io/dataease/service/chart/ChartGroupService.java b/backend/src/main/java/io/dataease/service/chart/ChartGroupService.java
index 51ae28e3ed..2ab6043ee2 100644
--- a/backend/src/main/java/io/dataease/service/chart/ChartGroupService.java
+++ b/backend/src/main/java/io/dataease/service/chart/ChartGroupService.java
@@ -130,9 +130,5 @@ public class ChartGroupService {
         if (ObjectUtils.isNotEmpty(chartGroup.getLevel())) {
             criteria.andLevelEqualTo(chartGroup.getLevel());
         }
-        List<ChartGroup> list = chartGroupMapper.selectByExample(chartGroupExample);
-        if (list.size() > 0) {
-            throw new RuntimeException(Translator.get("i18n_name_cant_repeat_same_group"));
-        }
     }
 }
diff --git a/backend/src/main/java/io/dataease/service/chart/ChartViewService.java b/backend/src/main/java/io/dataease/service/chart/ChartViewService.java
index 2eb4a6a591..78a32e13af 100644
--- a/backend/src/main/java/io/dataease/service/chart/ChartViewService.java
+++ b/backend/src/main/java/io/dataease/service/chart/ChartViewService.java
@@ -1656,10 +1656,6 @@ public class ChartViewService {
         if (StringUtils.isNotEmpty(chartView.getName())) {
             criteria.andNameEqualTo(chartView.getName());
         }
-        List<ChartViewWithBLOBs> list = chartViewMapper.selectByExampleWithBLOBs(chartViewExample);
-        if (list.size() > 0) {
-            throw new RuntimeException(Translator.get("i18n_name_cant_repeat_same_group"));
-        }
     }
 
     public ChartDetail getChartDetail(String id) {

From cd5fb46d0d0821daf37fb9e487a8d408afb22e6e Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Tue, 22 Feb 2022 11:04:05 +0800
Subject: [PATCH 4/5] =?UTF-8?q?refactor:=20=E5=8E=BB=E6=8E=89=E8=A7=86?=
 =?UTF-8?q?=E5=9B=BE=E6=9D=83=E9=99=90=E6=A0=A1=E9=AA=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../base/mapper/ext/ExtChartViewMapper.xml      |  9 +++------
 frontend/src/views/chart/view/ChartEdit.vue     | 17 -----------------
 2 files changed, 3 insertions(+), 23 deletions(-)

diff --git a/backend/src/main/java/io/dataease/base/mapper/ext/ExtChartViewMapper.xml b/backend/src/main/java/io/dataease/base/mapper/ext/ExtChartViewMapper.xml
index e17913ef66..0f3d43133a 100644
--- a/backend/src/main/java/io/dataease/base/mapper/ext/ExtChartViewMapper.xml
+++ b/backend/src/main/java/io/dataease/base/mapper/ext/ExtChartViewMapper.xml
@@ -10,19 +10,16 @@
 
     <select id="searchOneWithPrivileges" resultMap="BaseResultMapDTO">
         select
-        chart_view.*,
-        get_auths(id,'chart',#{userId}) as `privileges`
+        chart_view.*
         from chart_view where id = #{id}
     </select>
 
     <select id="searchOne" resultMap="BaseResultMapDTO">
         select
         id, `name`, scene_id, table_id, `type`, title, create_by, create_time, update_time,
-        style_priority,x_axis, y_axis, custom_attr, custom_style, custom_filter, snapshot,
-        get_auths(id,'chart',#{userId}) as `privileges`
-        from (select GET_V_AUTH_MODEL_ID_P_USE (#{userId}, 'chart') cids) t,chart_view
+        style_priority,x_axis, y_axis, custom_attr, custom_style, custom_filter, snapshot
+        from chart_view
         <where>
-            FIND_IN_SET(chart_view.id,cids)
             <if test="sceneId != null">
                 and scene_id = #{sceneId,jdbcType=VARCHAR}
             </if>
diff --git a/frontend/src/views/chart/view/ChartEdit.vue b/frontend/src/views/chart/view/ChartEdit.vue
index 4b918b9791..d7a8fb6a66 100644
--- a/frontend/src/views/chart/view/ChartEdit.vue
+++ b/frontend/src/views/chart/view/ChartEdit.vue
@@ -46,7 +46,6 @@
                 />
                 <el-button
                   :title="$t('chart.change_ds')"
-                  :disabled="!hasDataPermission('manage',param.privileges)"
                   icon="el-icon-refresh"
                   type="text"
                   size="mini"
@@ -62,7 +61,6 @@
                   animation="300"
                   :move="onMove"
                   class="drag-list"
-                  :disabled="!hasDataPermission('manage',param.privileges)"
                   @add="moveToDimension"
                 >
                   <transition-group>
@@ -88,7 +86,6 @@
                   animation="300"
                   :move="onMove"
                   class="drag-list"
-                  :disabled="!hasDataPermission('manage',param.privileges)"
                   @add="moveToQuota"
                 >
                   <transition-group>
@@ -157,7 +154,6 @@
                               <el-radio-group
                                 v-model="view.type"
                                 style="width: 100%"
-                                :disabled="!hasDataPermission('manage',param.privileges)"
                                 @change="changeChartType()"
                               >
                                 <chart-type ref="cu-chart-type" :chart="view" style="height: 480px" />
@@ -182,7 +178,6 @@
                           slot="reference"
                           size="mini"
                           style="padding: 6px;"
-                          :disabled="!hasDataPermission('manage',param.privileges)"
                         >
                           {{ $t('chart.change_chart_type') }}
                           <i class="el-icon-caret-bottom" />
@@ -202,7 +197,6 @@
                       <el-radio-group
                         v-model="view.resultMode"
                         class="radio-span"
-                        :disabled="!hasDataPermission('manage',param.privileges)"
                         size="mini"
                         @change="calcData"
                       >
@@ -212,7 +206,6 @@
                             v-model="view.resultCount"
                             class="result-count"
                             size="mini"
-                            :disabled="!hasDataPermission('manage',param.privileges)"
                             @change="calcData"
                           />
                         </el-radio>
@@ -237,7 +230,6 @@
                           :no-children-text="$t('commons.treeselect.no_children_text')"
                           :no-options-text="$t('commons.treeselect.no_options_text')"
                           :no-results-text="$t('commons.treeselect.no_results_text')"
-                          :disabled="!hasDataPermission('manage',param.privileges)"
                           @input="calcData"
                           @deselect="calcData"
                         />
@@ -256,7 +248,6 @@
                       </span>
                       <draggable
                         v-model="view.xaxisExt"
-                        :disabled="!hasDataPermission('manage',param.privileges)"
                         group="drag"
                         animation="300"
                         :move="onMove"
@@ -310,7 +301,6 @@
                       </span>
                       <draggable
                         v-model="view.xaxis"
-                        :disabled="!hasDataPermission('manage',param.privileges)"
                         group="drag"
                         animation="300"
                         :move="onMove"
@@ -364,7 +354,6 @@
                       </span>
                       <draggable
                         v-model="view.yaxis"
-                        :disabled="!hasDataPermission('manage',param.privileges)"
                         group="drag"
                         animation="300"
                         :move="onMove"
@@ -403,7 +392,6 @@
                       </span>
                       <draggable
                         v-model="view.yaxisExt"
-                        :disabled="!hasDataPermission('manage',param.privileges)"
                         group="drag"
                         animation="300"
                         :move="onMove"
@@ -442,7 +430,6 @@
                       </span>
                       <draggable
                         v-model="view.extStack"
-                        :disabled="!hasDataPermission('manage',param.privileges)"
                         group="drag"
                         animation="300"
                         :move="onMove"
@@ -484,7 +471,6 @@
                       </span>
                       <draggable
                         v-model="view.extBubble"
-                        :disabled="!hasDataPermission('manage',param.privileges)"
                         group="drag"
                         animation="300"
                         :move="onMove"
@@ -518,7 +504,6 @@
                       <!--                    </el-button>-->
                       <draggable
                         v-model="view.customFilter"
-                        :disabled="!hasDataPermission('manage',param.privileges)"
                         group="drag"
                         animation="300"
                         :move="onMove"
@@ -557,7 +542,6 @@
                       </span>
                       <draggable
                         v-model="view.drillFields"
-                        :disabled="!hasDataPermission('manage',param.privileges)"
                         group="drag"
                         animation="300"
                         :move="onMove"
@@ -609,7 +593,6 @@
                   <el-radio-group
                     v-model="view.stylePriority"
                     class="radio-span"
-                    :disabled="!hasDataPermission('manage',param.privileges)"
                     size="mini"
                     @change="calcStyle"
                   >

From 7c67717b3c3e288672c75474fbc84ddd29b9cb25 Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Tue, 22 Feb 2022 11:22:02 +0800
Subject: [PATCH 5/5] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E5=8F=AA=E4=BF=AE?=
 =?UTF-8?q?=E6=94=B9=E4=BB=AA=E8=A1=A8=E6=9D=BF=E5=90=8D=E7=A7=B0=E5=90=8E?=
 =?UTF-8?q?=EF=BC=8C=E7=A7=BB=E5=8A=A8=E7=AB=AF=E5=88=97=E8=A1=A8=E4=B8=8D?=
 =?UTF-8?q?=E6=98=BE=E7=A4=BA=E4=BB=AA=E8=A1=A8=E6=9D=BF=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../main/java/io/dataease/service/panel/PanelViewService.java  | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/backend/src/main/java/io/dataease/service/panel/PanelViewService.java b/backend/src/main/java/io/dataease/service/panel/PanelViewService.java
index d5e61935cc..82121c05a0 100644
--- a/backend/src/main/java/io/dataease/service/panel/PanelViewService.java
+++ b/backend/src/main/java/io/dataease/service/panel/PanelViewService.java
@@ -74,11 +74,12 @@ public class PanelViewService {
 
     @Transactional(propagation=Propagation.REQUIRES_NEW)
     public Boolean syncPanelViews(PanelGroupWithBLOBs panelGroup){
-        Boolean mobileLayout = false;
+        Boolean mobileLayout = null;
         String panelId = panelGroup.getId();
         Assert.notNull(panelId, "panelId cannot be null");
         String panelData = panelGroup.getPanelData();
         if(StringUtils.isNotEmpty(panelData)){
+            mobileLayout = false;
             JSONArray dataArray = JSON.parseArray(panelData);
             List<PanelViewInsertDTO> panelViewInsertDTOList = new ArrayList<>();
             for(int i=0;i<dataArray.size();i++){