From d2e40baf2d6ee0469d9b788048d5c6a2c316a694 Mon Sep 17 00:00:00 2001
From: junjie <junjie.xia@fit2cloud.com>
Date: Wed, 20 Oct 2021 11:32:05 +0800
Subject: [PATCH 1/5] =?UTF-8?q?feat:=E5=A2=9E=E5=8A=A0=E9=BB=98=E8=AE=A4?=
 =?UTF-8?q?=E9=A2=9C=E8=89=B2=E7=AD=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/icons/svg/more_v.svg             |  1 +
 frontend/src/views/chart/chart/chart.js       | 13 ++++++++++
 .../chart/components/ChartComponentG2.vue     |  2 --
 .../BackgroundColorSelector.vue               |  7 ++---
 .../component-style/LegendSelector.vue        |  7 ++---
 .../component-style/LegendSelectorAntV.vue    |  7 ++---
 .../component-style/SplitSelector.vue         | 13 +++++-----
 .../component-style/SplitSelectorAntV.vue     |  9 ++++---
 .../component-style/TitleSelector.vue         |  7 ++---
 .../component-style/TitleSelectorAntV.vue     |  7 ++---
 .../component-style/XAxisSelector.vue         | 11 ++++----
 .../component-style/XAxisSelectorAntV.vue     | 11 ++++----
 .../component-style/YAxisExtSelector.vue      | 11 ++++----
 .../component-style/YAxisExtSelectorAntV.vue  | 11 ++++----
 .../component-style/YAxisSelector.vue         | 11 ++++----
 .../component-style/YAxisSelectorAntV.vue     | 11 ++++----
 .../components/shape-attr/ColorSelector.vue   | 17 ++++++------
 .../components/shape-attr/LabelSelector.vue   |  9 ++++---
 .../shape-attr/LabelSelectorAntV.vue          |  9 ++++---
 .../components/shape-attr/TooltipSelector.vue |  7 ++---
 .../shape-attr/TooltipSelectorAntV.vue        |  7 ++---
 frontend/src/views/chart/group/Group.vue      |  7 +++--
 frontend/src/views/chart/view/ChartEdit.vue   |  4 ++-
 frontend/src/views/chart/view/ChartType.vue   | 26 ++++++++++---------
 frontend/src/views/dataset/data/ViewTable.vue |  7 ++---
 frontend/src/views/dataset/group/Group.vue    |  7 +++--
 26 files changed, 140 insertions(+), 99 deletions(-)
 create mode 100644 frontend/src/icons/svg/more_v.svg

diff --git a/frontend/src/icons/svg/more_v.svg b/frontend/src/icons/svg/more_v.svg
new file mode 100644
index 0000000000..68c0c57c70
--- /dev/null
+++ b/frontend/src/icons/svg/more_v.svg
@@ -0,0 +1 @@
+<svg t="1634698675666" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2280" width="200" height="200"><path d="M437.333333 224C437.333333 183.466667 471.466667 149.333333 512 149.333333s74.666667 34.133333 74.666667 74.666667S552.533333 298.666667 512 298.666667s-74.666667-34.133333-74.666667-74.666667zM439.466667 512c0-40.533333 34.133333-74.666667 74.666666-74.666667s74.666667 34.133333 74.666667 74.666667-34.133333 74.666667-74.666667 74.666667-74.666667-34.133333-74.666666-74.666667zM437.333333 800c0-40.533333 34.133333-74.666667 74.666667-74.666667s74.666667 34.133333 74.666667 74.666667S552.533333 874.666667 512 874.666667s-74.666667-34.133333-74.666667-74.666667z" p-id="2281"></path></svg>
diff --git a/frontend/src/views/chart/chart/chart.js b/frontend/src/views/chart/chart/chart.js
index 1e5aa69017..1d20681aab 100644
--- a/frontend/src/views/chart/chart/chart.js
+++ b/frontend/src/views/chart/chart/chart.js
@@ -853,3 +853,16 @@ export const BASE_MIX = {
     }
   ]
 }
+
+export const COLOR_PANEL = [
+  '#ff4500',
+  '#ff8c00',
+  '#ffd700',
+  '#90ee90',
+  '#00ced1',
+  '#1e90ff',
+  '#c71585',
+  '#999999',
+  '#ffffff',
+  '#000000'
+]
diff --git a/frontend/src/views/chart/components/ChartComponentG2.vue b/frontend/src/views/chart/components/ChartComponentG2.vue
index e56db9c78a..03b3fc9a27 100644
--- a/frontend/src/views/chart/components/ChartComponentG2.vue
+++ b/frontend/src/views/chart/components/ChartComponentG2.vue
@@ -145,8 +145,6 @@ export default {
         this.myChart = baseAreaOptionAntV(this.myChart, this.chartId, chart, this.antVAction)
       } else if (chart.type === 'scatter') {
         this.myChart = baseScatterOptionAntV(this.myChart, this.chartId, chart, this.antVAction)
-      } else if (chart.type === 'chart-mix') {
-        this.myChart = baseMixOptionAntV(this.myChart, this.chartId, chart, this.antVAction)
       } else if (chart.type === 'radar') {
         this.myChart = baseRadarOptionAntV(this.myChart, this.chartId, chart, this.antVAction)
       } else if (chart.type === 'gauge') {
diff --git a/frontend/src/views/chart/components/component-style/BackgroundColorSelector.vue b/frontend/src/views/chart/components/component-style/BackgroundColorSelector.vue
index 294b9c7629..3ee96ded4d 100644
--- a/frontend/src/views/chart/components/component-style/BackgroundColorSelector.vue
+++ b/frontend/src/views/chart/components/component-style/BackgroundColorSelector.vue
@@ -3,7 +3,7 @@
     <el-col>
       <el-form ref="colorForm" :model="colorForm" label-width="80px" size="mini" :disabled="param && !hasDataPermission('manage',param.privileges)">
         <el-form-item :label="$t('chart.color')" class="form-item">
-          <el-color-picker v-model="colorForm.color" class="color-picker-style" @change="changeBackgroundStyle" />
+          <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" />
@@ -18,7 +18,7 @@
 </template>
 
 <script>
-import { DEFAULT_BACKGROUND_COLOR } from '../../chart/chart'
+import { COLOR_PANEL, DEFAULT_BACKGROUND_COLOR } from '../../chart/chart'
 
 export default {
   name: 'BackgroundColorSelector',
@@ -34,7 +34,8 @@ export default {
   },
   data() {
     return {
-      colorForm: JSON.parse(JSON.stringify(DEFAULT_BACKGROUND_COLOR))
+      colorForm: JSON.parse(JSON.stringify(DEFAULT_BACKGROUND_COLOR)),
+      predefineColors: COLOR_PANEL
     }
   },
   watch: {
diff --git a/frontend/src/views/chart/components/component-style/LegendSelector.vue b/frontend/src/views/chart/components/component-style/LegendSelector.vue
index 271bf5e6dd..48508bf452 100644
--- a/frontend/src/views/chart/components/component-style/LegendSelector.vue
+++ b/frontend/src/views/chart/components/component-style/LegendSelector.vue
@@ -28,7 +28,7 @@
             </el-select>
           </el-form-item>
           <el-form-item :label="$t('chart.text_color')" class="form-item">
-            <el-color-picker v-model="legendForm.textStyle.color" class="color-picker-style" @change="changeLegendStyle" />
+            <el-color-picker v-model="legendForm.textStyle.color" class="color-picker-style" :predefine="predefineColors" @change="changeLegendStyle" />
           </el-form-item>
           <el-form-item :label="$t('chart.text_h_position')" class="form-item">
             <el-radio-group v-model="legendForm.hPosition" size="mini" @change="changeLegendStyle">
@@ -51,7 +51,7 @@
 </template>
 
 <script>
-import { DEFAULT_LEGEND_STYLE } from '../../chart/chart'
+import { COLOR_PANEL, DEFAULT_LEGEND_STYLE } from '../../chart/chart'
 
 export default {
   name: 'LegendSelector',
@@ -77,7 +77,8 @@ export default {
         { name: this.$t('chart.line_symbol_triangle'), value: 'triangle' },
         { name: this.$t('chart.line_symbol_diamond'), value: 'diamond' }
       ],
-      isSetting: false
+      isSetting: false,
+      predefineColors: COLOR_PANEL
     }
   },
   watch: {
diff --git a/frontend/src/views/chart/components/component-style/LegendSelectorAntV.vue b/frontend/src/views/chart/components/component-style/LegendSelectorAntV.vue
index 982ba8f15c..1b8fc02722 100644
--- a/frontend/src/views/chart/components/component-style/LegendSelectorAntV.vue
+++ b/frontend/src/views/chart/components/component-style/LegendSelectorAntV.vue
@@ -28,7 +28,7 @@
             </el-select>
           </el-form-item>
           <el-form-item :label="$t('chart.text_color')" class="form-item">
-            <el-color-picker v-model="legendForm.textStyle.color" class="color-picker-style" @change="changeLegendStyle" />
+            <el-color-picker v-model="legendForm.textStyle.color" class="color-picker-style" :predefine="predefineColors" @change="changeLegendStyle" />
           </el-form-item>
           <el-form-item :label="$t('chart.text_h_position')" class="form-item">
             <el-radio-group v-model="legendForm.hPosition" size="mini" @change="changeLegendStyle">
@@ -51,7 +51,7 @@
 </template>
 
 <script>
-import { DEFAULT_LEGEND_STYLE } from '../../chart/chart'
+import { COLOR_PANEL, DEFAULT_LEGEND_STYLE } from '../../chart/chart'
 
 export default {
   name: 'LegendSelectorAntV',
@@ -75,7 +75,8 @@ export default {
         { name: this.$t('chart.line_symbol_triangle'), value: 'triangle' },
         { name: this.$t('chart.line_symbol_diamond'), value: 'diamond' }
       ],
-      isSetting: false
+      isSetting: false,
+      predefineColors: COLOR_PANEL
     }
   },
   watch: {
diff --git a/frontend/src/views/chart/components/component-style/SplitSelector.vue b/frontend/src/views/chart/components/component-style/SplitSelector.vue
index a2cef6e5b7..3d932d27a9 100644
--- a/frontend/src/views/chart/components/component-style/SplitSelector.vue
+++ b/frontend/src/views/chart/components/component-style/SplitSelector.vue
@@ -6,7 +6,7 @@
           <el-checkbox v-model="splitForm.name.show" @change="changeSplitStyle">{{ $t('chart.show') }}</el-checkbox>
         </el-form-item>
         <el-form-item :label="$t('chart.color')" class="form-item">
-          <el-color-picker v-model="splitForm.name.color" class="color-picker-style" @change="changeSplitStyle" />
+          <el-color-picker v-model="splitForm.name.color" class="color-picker-style" :predefine="predefineColors" @change="changeSplitStyle" />
         </el-form-item>
         <el-form-item :label="$t('chart.text_fontsize')" class="form-item form-item-slider">
           <el-select v-model="splitForm.name.fontSize" :placeholder="$t('chart.text_fontsize')" @change="changeSplitStyle">
@@ -17,13 +17,13 @@
           <el-checkbox v-model="splitForm.axisLine.show" @change="changeSplitStyle">{{ $t('chart.show') }}</el-checkbox>
         </el-form-item>
         <el-form-item :label="$t('chart.axis_color')" class="form-item">
-          <el-color-picker v-model="splitForm.axisLine.lineStyle.color" class="color-picker-style" @change="changeSplitStyle" />
+          <el-color-picker v-model="splitForm.axisLine.lineStyle.color" class="color-picker-style" :predefine="predefineColors" @change="changeSplitStyle" />
         </el-form-item>
         <el-form-item :label="$t('chart.axis_label')" class="form-item">
           <el-checkbox v-model="splitForm.axisLabel.show" @change="changeSplitStyle">{{ $t('chart.show') }}</el-checkbox>
         </el-form-item>
         <el-form-item :label="$t('chart.axis_label_color')" class="form-item">
-          <el-color-picker v-model="splitForm.axisLabel.color" class="color-picker-style" @change="changeSplitStyle" />
+          <el-color-picker v-model="splitForm.axisLabel.color" class="color-picker-style" :predefine="predefineColors" @change="changeSplitStyle" />
         </el-form-item>
         <el-form-item :label="$t('chart.label_fontsize')" class="form-item form-item-slider">
           <el-select v-model="splitForm.axisLabel.fontSize" :placeholder="$t('chart.label_fontsize')" @change="changeSplitStyle">
@@ -34,7 +34,7 @@
           <el-checkbox v-model="splitForm.splitLine.show" @change="changeSplitStyle">{{ $t('chart.show') }}</el-checkbox>
         </el-form-item>
         <el-form-item :label="$t('chart.split_color')" class="form-item">
-          <el-color-picker v-model="splitForm.splitLine.lineStyle.color" class="color-picker-style" @change="changeSplitStyle" />
+          <el-color-picker v-model="splitForm.splitLine.lineStyle.color" class="color-picker-style" :predefine="predefineColors" @change="changeSplitStyle" />
         </el-form-item>
         <el-form-item :label="$t('chart.shadow')" class="form-item">
           <el-checkbox v-model="splitForm.splitArea.show" @change="changeSplitStyle">{{ $t('chart.show') }}</el-checkbox>
@@ -45,7 +45,7 @@
 </template>
 
 <script>
-import { DEFAULT_SPLIT } from '../../chart/chart'
+import { COLOR_PANEL, DEFAULT_SPLIT } from '../../chart/chart'
 
 export default {
   name: 'SplitSelector',
@@ -63,7 +63,8 @@ export default {
     return {
       splitForm: JSON.parse(JSON.stringify(DEFAULT_SPLIT)),
       isSetting: false,
-      fontSize: []
+      fontSize: [],
+      predefineColors: COLOR_PANEL
     }
   },
   watch: {
diff --git a/frontend/src/views/chart/components/component-style/SplitSelectorAntV.vue b/frontend/src/views/chart/components/component-style/SplitSelectorAntV.vue
index 5378642eee..3a6854fdc1 100644
--- a/frontend/src/views/chart/components/component-style/SplitSelectorAntV.vue
+++ b/frontend/src/views/chart/components/component-style/SplitSelectorAntV.vue
@@ -6,7 +6,7 @@
           <el-checkbox v-model="splitForm.name.show" @change="changeSplitStyle">{{ $t('chart.show') }}</el-checkbox>
         </el-form-item>
         <el-form-item :label="$t('chart.color')" class="form-item">
-          <el-color-picker v-model="splitForm.name.color" class="color-picker-style" @change="changeSplitStyle" />
+          <el-color-picker v-model="splitForm.name.color" class="color-picker-style" :predefine="predefineColors" @change="changeSplitStyle" />
         </el-form-item>
         <el-form-item :label="$t('chart.text_fontsize')" class="form-item form-item-slider">
           <el-select v-model="splitForm.name.fontSize" :placeholder="$t('chart.text_fontsize')" @change="changeSplitStyle">
@@ -17,7 +17,7 @@
         <!--          <el-checkbox v-model="splitForm.axisLine.show" @change="changeSplitStyle">{{ $t('chart.show') }}</el-checkbox>-->
         <!--        </el-form-item>-->
         <el-form-item :label="$t('chart.axis_color')" class="form-item">
-          <el-color-picker v-model="splitForm.axisLine.lineStyle.color" class="color-picker-style" @change="changeSplitStyle" />
+          <el-color-picker v-model="splitForm.axisLine.lineStyle.color" class="color-picker-style" :predefine="predefineColors" @change="changeSplitStyle" />
         </el-form-item>
         <!--        <el-form-item :label="$t('chart.axis_label')" class="form-item">-->
         <!--          <el-checkbox v-model="splitForm.axisLabel.show" @change="changeSplitStyle">{{ $t('chart.show') }}</el-checkbox>-->
@@ -45,7 +45,7 @@
 </template>
 
 <script>
-import { DEFAULT_SPLIT } from '../../chart/chart'
+import { COLOR_PANEL, DEFAULT_SPLIT } from '../../chart/chart'
 
 export default {
   name: 'SplitSelectorAntV',
@@ -63,7 +63,8 @@ export default {
     return {
       splitForm: JSON.parse(JSON.stringify(DEFAULT_SPLIT)),
       isSetting: false,
-      fontSize: []
+      fontSize: [],
+      predefineColors: COLOR_PANEL
     }
   },
   watch: {
diff --git a/frontend/src/views/chart/components/component-style/TitleSelector.vue b/frontend/src/views/chart/components/component-style/TitleSelector.vue
index 59f479f1a1..c8ae807466 100644
--- a/frontend/src/views/chart/components/component-style/TitleSelector.vue
+++ b/frontend/src/views/chart/components/component-style/TitleSelector.vue
@@ -22,7 +22,7 @@
             </el-select>
           </el-form-item>
           <el-form-item :label="$t('chart.text_color')" class="form-item">
-            <el-color-picker v-model="titleForm.color" class="color-picker-style" @change="changeTitleStyle" />
+            <el-color-picker v-model="titleForm.color" class="color-picker-style" :predefine="predefineColors" @change="changeTitleStyle" />
           </el-form-item>
           <el-form-item v-show="chart.type && chart.type !== 'liquid'" :label="$t('chart.text_h_position')" class="form-item">
             <el-radio-group v-model="titleForm.hPosition" size="mini" @change="changeTitleStyle">
@@ -49,7 +49,7 @@
 </template>
 
 <script>
-import { DEFAULT_TITLE_STYLE } from '../../chart/chart'
+import { COLOR_PANEL, DEFAULT_TITLE_STYLE } from '../../chart/chart'
 
 export default {
   name: 'TitleSelector',
@@ -67,7 +67,8 @@ export default {
     return {
       titleForm: JSON.parse(JSON.stringify(DEFAULT_TITLE_STYLE)),
       fontSize: [],
-      isSetting: false
+      isSetting: false,
+      predefineColors: COLOR_PANEL
     }
   },
   watch: {
diff --git a/frontend/src/views/chart/components/component-style/TitleSelectorAntV.vue b/frontend/src/views/chart/components/component-style/TitleSelectorAntV.vue
index 10e6ef36f6..a2937bee6c 100644
--- a/frontend/src/views/chart/components/component-style/TitleSelectorAntV.vue
+++ b/frontend/src/views/chart/components/component-style/TitleSelectorAntV.vue
@@ -22,7 +22,7 @@
             </el-select>
           </el-form-item>
           <el-form-item :label="$t('chart.text_color')" class="form-item">
-            <el-color-picker v-model="titleForm.color" class="color-picker-style" @change="changeTitleStyle" />
+            <el-color-picker v-model="titleForm.color" class="color-picker-style" :predefine="predefineColors" @change="changeTitleStyle" />
           </el-form-item>
           <el-form-item v-show="chart.type && chart.type !== 'liquid'" :label="$t('chart.text_h_position')" class="form-item">
             <el-radio-group v-model="titleForm.hPosition" size="mini" @change="changeTitleStyle">
@@ -42,7 +42,7 @@
 </template>
 
 <script>
-import { DEFAULT_TITLE_STYLE } from '../../chart/chart'
+import { COLOR_PANEL, DEFAULT_TITLE_STYLE } from '../../chart/chart'
 
 export default {
   name: 'TitleSelectorAntV',
@@ -60,7 +60,8 @@ export default {
     return {
       titleForm: JSON.parse(JSON.stringify(DEFAULT_TITLE_STYLE)),
       fontSize: [],
-      isSetting: false
+      isSetting: false,
+      predefineColors: COLOR_PANEL
     }
   },
   watch: {
diff --git a/frontend/src/views/chart/components/component-style/XAxisSelector.vue b/frontend/src/views/chart/components/component-style/XAxisSelector.vue
index 9a962076ad..2706619bce 100644
--- a/frontend/src/views/chart/components/component-style/XAxisSelector.vue
+++ b/frontend/src/views/chart/components/component-style/XAxisSelector.vue
@@ -16,7 +16,7 @@
             <el-input v-model="axisForm.name" size="mini" @blur="changeXAxisStyle" />
           </el-form-item>
           <el-form-item :label="$t('chart.axis_name_color')" class="form-item">
-            <el-color-picker v-model="axisForm.nameTextStyle.color" class="color-picker-style" @change="changeXAxisStyle" />
+            <el-color-picker v-model="axisForm.nameTextStyle.color" class="color-picker-style" :predefine="predefineColors" @change="changeXAxisStyle" />
           </el-form-item>
           <el-form-item :label="$t('chart.axis_name_fontsize')" class="form-item">
             <el-select v-model="axisForm.nameTextStyle.fontSize" :placeholder="$t('chart.axis_name_fontsize')" @change="changeXAxisStyle">
@@ -59,7 +59,7 @@
           </el-form-item>
           <span v-show="axisForm.splitLine.show">
             <el-form-item :label="$t('chart.axis_color')" class="form-item">
-              <el-color-picker v-model="axisForm.splitLine.lineStyle.color" class="el-color-picker" @change="changeXAxisStyle" />
+              <el-color-picker v-model="axisForm.splitLine.lineStyle.color" class="el-color-picker" :predefine="predefineColors" @change="changeXAxisStyle" />
             </el-form-item>
             <el-form-item :label="$t('chart.axis_width')" class="form-item form-item-slider">
               <el-slider v-model="axisForm.splitLine.lineStyle.width" :min="1" :max="10" show-input :show-input-controls="false" input-size="mini" @change="changeXAxisStyle" />
@@ -78,7 +78,7 @@
           </el-form-item>
           <span v-show="axisForm.axisLabel.show">
             <el-form-item :label="$t('chart.axis_label_color')" class="form-item">
-              <el-color-picker v-model="axisForm.axisLabel.color" class="el-color-picker" @change="changeXAxisStyle" />
+              <el-color-picker v-model="axisForm.axisLabel.color" class="el-color-picker" :predefine="predefineColors" @change="changeXAxisStyle" />
             </el-form-item>
             <el-form-item :label="$t('chart.axis_label_rotate')" class="form-item form-item-slider">
               <el-slider v-model="axisForm.axisLabel.rotate" show-input :show-input-controls="false" :min="-90" :max="90" input-size="mini" @change="changeXAxisStyle" />
@@ -100,7 +100,7 @@
 </template>
 
 <script>
-import { DEFAULT_XAXIS_STYLE } from '../../chart/chart'
+import { COLOR_PANEL, DEFAULT_XAXIS_STYLE } from '../../chart/chart'
 
 export default {
   name: 'XAxisSelector',
@@ -118,7 +118,8 @@ export default {
     return {
       axisForm: JSON.parse(JSON.stringify(DEFAULT_XAXIS_STYLE)),
       isSetting: false,
-      fontSize: []
+      fontSize: [],
+      predefineColors: COLOR_PANEL
     }
   },
   watch: {
diff --git a/frontend/src/views/chart/components/component-style/XAxisSelectorAntV.vue b/frontend/src/views/chart/components/component-style/XAxisSelectorAntV.vue
index 394dc3fdbc..1eda3c6655 100644
--- a/frontend/src/views/chart/components/component-style/XAxisSelectorAntV.vue
+++ b/frontend/src/views/chart/components/component-style/XAxisSelectorAntV.vue
@@ -16,7 +16,7 @@
             <el-input v-model="axisForm.name" size="mini" @blur="changeXAxisStyle" />
           </el-form-item>
           <el-form-item :label="$t('chart.axis_name_color')" class="form-item">
-            <el-color-picker v-model="axisForm.nameTextStyle.color" class="color-picker-style" @change="changeXAxisStyle" />
+            <el-color-picker v-model="axisForm.nameTextStyle.color" class="color-picker-style" :predefine="predefineColors" @change="changeXAxisStyle" />
           </el-form-item>
           <el-form-item :label="$t('chart.axis_name_fontsize')" class="form-item">
             <el-select v-model="axisForm.nameTextStyle.fontSize" :placeholder="$t('chart.axis_name_fontsize')" @change="changeXAxisStyle">
@@ -59,7 +59,7 @@
           </el-form-item>
           <span v-show="axisForm.splitLine.show">
             <el-form-item :label="$t('chart.axis_color')" class="form-item">
-              <el-color-picker v-model="axisForm.splitLine.lineStyle.color" class="el-color-picker" @change="changeXAxisStyle" />
+              <el-color-picker v-model="axisForm.splitLine.lineStyle.color" class="el-color-picker" :predefine="predefineColors" @change="changeXAxisStyle" />
             </el-form-item>
             <el-form-item :label="$t('chart.axis_width')" class="form-item form-item-slider">
               <el-slider v-model="axisForm.splitLine.lineStyle.width" :min="1" :max="10" show-input :show-input-controls="false" input-size="mini" @change="changeXAxisStyle" />
@@ -71,7 +71,7 @@
           </el-form-item>
           <span v-show="axisForm.axisLabel.show">
             <el-form-item :label="$t('chart.axis_label_color')" class="form-item">
-              <el-color-picker v-model="axisForm.axisLabel.color" class="el-color-picker" @change="changeXAxisStyle" />
+              <el-color-picker v-model="axisForm.axisLabel.color" class="el-color-picker" :predefine="predefineColors" @change="changeXAxisStyle" />
             </el-form-item>
             <el-form-item :label="$t('chart.axis_label_rotate')" class="form-item form-item-slider">
               <el-slider v-model="axisForm.axisLabel.rotate" show-input :show-input-controls="false" :min="-90" :max="90" input-size="mini" @change="changeXAxisStyle" />
@@ -89,7 +89,7 @@
 </template>
 
 <script>
-import { DEFAULT_XAXIS_STYLE } from '../../chart/chart'
+import { COLOR_PANEL, DEFAULT_XAXIS_STYLE } from '../../chart/chart'
 
 export default {
   name: 'XAxisSelectorAntV',
@@ -107,7 +107,8 @@ export default {
     return {
       axisForm: JSON.parse(JSON.stringify(DEFAULT_XAXIS_STYLE)),
       isSetting: false,
-      fontSize: []
+      fontSize: [],
+      predefineColors: COLOR_PANEL
     }
   },
   watch: {
diff --git a/frontend/src/views/chart/components/component-style/YAxisExtSelector.vue b/frontend/src/views/chart/components/component-style/YAxisExtSelector.vue
index 80050de243..6ed7b72151 100644
--- a/frontend/src/views/chart/components/component-style/YAxisExtSelector.vue
+++ b/frontend/src/views/chart/components/component-style/YAxisExtSelector.vue
@@ -16,7 +16,7 @@
             <el-input v-model="axisForm.name" size="mini" @blur="changeYAxisStyle" />
           </el-form-item>
           <el-form-item :label="$t('chart.axis_name_color')" class="form-item">
-            <el-color-picker v-model="axisForm.nameTextStyle.color" class="color-picker-style" @change="changeYAxisStyle" />
+            <el-color-picker v-model="axisForm.nameTextStyle.color" class="color-picker-style" :predefine="predefineColors" @change="changeYAxisStyle" />
           </el-form-item>
           <el-form-item :label="$t('chart.axis_name_fontsize')" class="form-item">
             <el-select v-model="axisForm.nameTextStyle.fontSize" :placeholder="$t('chart.axis_name_fontsize')" @change="changeYAxisStyle">
@@ -59,7 +59,7 @@
           </el-form-item>
           <span v-show="axisForm.splitLine.show">
             <el-form-item :label="$t('chart.axis_color')" class="form-item">
-              <el-color-picker v-model="axisForm.splitLine.lineStyle.color" class="el-color-picker" @change="changeYAxisStyle" />
+              <el-color-picker v-model="axisForm.splitLine.lineStyle.color" class="el-color-picker" :predefine="predefineColors" @change="changeYAxisStyle" />
             </el-form-item>
             <el-form-item :label="$t('chart.axis_width')" class="form-item form-item-slider">
               <el-slider v-model="axisForm.splitLine.lineStyle.width" :min="1" :max="10" show-input :show-input-controls="false" input-size="mini" @change="changeYAxisStyle" />
@@ -78,7 +78,7 @@
           </el-form-item>
           <span v-show="axisForm.axisLabel.show">
             <el-form-item :label="$t('chart.axis_label_color')" class="form-item">
-              <el-color-picker v-model="axisForm.axisLabel.color" class="el-color-picker" @change="changeYAxisStyle" />
+              <el-color-picker v-model="axisForm.axisLabel.color" class="el-color-picker" :predefine="predefineColors" @change="changeYAxisStyle" />
             </el-form-item>
             <el-form-item :label="$t('chart.axis_label_rotate')" class="form-item form-item-slider">
               <el-slider v-model="axisForm.axisLabel.rotate" show-input :show-input-controls="false" :min="-90" :max="90" input-size="mini" @change="changeYAxisStyle" />
@@ -100,7 +100,7 @@
 </template>
 
 <script>
-import { DEFAULT_YAXIS_EXT_STYLE } from '../../chart/chart'
+import { COLOR_PANEL, DEFAULT_YAXIS_EXT_STYLE } from '../../chart/chart'
 
 export default {
   name: 'YAxisExtSelector',
@@ -118,7 +118,8 @@ export default {
     return {
       axisForm: JSON.parse(JSON.stringify(DEFAULT_YAXIS_EXT_STYLE)),
       isSetting: false,
-      fontSize: []
+      fontSize: [],
+      predefineColors: COLOR_PANEL
     }
   },
   watch: {
diff --git a/frontend/src/views/chart/components/component-style/YAxisExtSelectorAntV.vue b/frontend/src/views/chart/components/component-style/YAxisExtSelectorAntV.vue
index 5fa2d342f9..28b24cc025 100644
--- a/frontend/src/views/chart/components/component-style/YAxisExtSelectorAntV.vue
+++ b/frontend/src/views/chart/components/component-style/YAxisExtSelectorAntV.vue
@@ -16,7 +16,7 @@
             <el-input v-model="axisForm.name" size="mini" @blur="changeYAxisStyle" />
           </el-form-item>
           <el-form-item :label="$t('chart.axis_name_color')" class="form-item">
-            <el-color-picker v-model="axisForm.nameTextStyle.color" class="color-picker-style" @change="changeYAxisStyle" />
+            <el-color-picker v-model="axisForm.nameTextStyle.color" class="color-picker-style" :predefine="predefineColors" @change="changeYAxisStyle" />
           </el-form-item>
           <el-form-item :label="$t('chart.axis_name_fontsize')" class="form-item">
             <el-select v-model="axisForm.nameTextStyle.fontSize" :placeholder="$t('chart.axis_name_fontsize')" @change="changeYAxisStyle">
@@ -59,7 +59,7 @@
           </el-form-item>
           <span v-show="axisForm.splitLine.show">
             <el-form-item :label="$t('chart.axis_color')" class="form-item">
-              <el-color-picker v-model="axisForm.splitLine.lineStyle.color" class="el-color-picker" @change="changeYAxisStyle" />
+              <el-color-picker v-model="axisForm.splitLine.lineStyle.color" class="el-color-picker" :predefine="predefineColors" @change="changeYAxisStyle" />
             </el-form-item>
             <el-form-item :label="$t('chart.axis_width')" class="form-item form-item-slider">
               <el-slider v-model="axisForm.splitLine.lineStyle.width" :min="1" :max="10" show-input :show-input-controls="false" input-size="mini" @change="changeYAxisStyle" />
@@ -71,7 +71,7 @@
           </el-form-item>
           <span v-show="axisForm.axisLabel.show">
             <el-form-item :label="$t('chart.axis_label_color')" class="form-item">
-              <el-color-picker v-model="axisForm.axisLabel.color" class="el-color-picker" @change="changeYAxisStyle" />
+              <el-color-picker v-model="axisForm.axisLabel.color" class="el-color-picker" :predefine="predefineColors" @change="changeYAxisStyle" />
             </el-form-item>
             <el-form-item :label="$t('chart.axis_label_rotate')" class="form-item form-item-slider">
               <el-slider v-model="axisForm.axisLabel.rotate" show-input :show-input-controls="false" :min="-90" :max="90" input-size="mini" @change="changeYAxisStyle" />
@@ -89,7 +89,7 @@
 </template>
 
 <script>
-import { DEFAULT_YAXIS_EXT_STYLE } from '../../chart/chart'
+import { COLOR_PANEL, DEFAULT_YAXIS_EXT_STYLE } from '../../chart/chart'
 
 export default {
   name: 'YAxisExtSelectorAntV',
@@ -107,7 +107,8 @@ export default {
     return {
       axisForm: JSON.parse(JSON.stringify(DEFAULT_YAXIS_EXT_STYLE)),
       isSetting: false,
-      fontSize: []
+      fontSize: [],
+      predefineColors: COLOR_PANEL
     }
   },
   watch: {
diff --git a/frontend/src/views/chart/components/component-style/YAxisSelector.vue b/frontend/src/views/chart/components/component-style/YAxisSelector.vue
index 87cac4d88a..d981c1879b 100644
--- a/frontend/src/views/chart/components/component-style/YAxisSelector.vue
+++ b/frontend/src/views/chart/components/component-style/YAxisSelector.vue
@@ -16,7 +16,7 @@
             <el-input v-model="axisForm.name" size="mini" @blur="changeYAxisStyle" />
           </el-form-item>
           <el-form-item :label="$t('chart.axis_name_color')" class="form-item">
-            <el-color-picker v-model="axisForm.nameTextStyle.color" class="color-picker-style" @change="changeYAxisStyle" />
+            <el-color-picker v-model="axisForm.nameTextStyle.color" class="color-picker-style" :predefine="predefineColors" @change="changeYAxisStyle" />
           </el-form-item>
           <el-form-item :label="$t('chart.axis_name_fontsize')" class="form-item">
             <el-select v-model="axisForm.nameTextStyle.fontSize" :placeholder="$t('chart.axis_name_fontsize')" @change="changeYAxisStyle">
@@ -59,7 +59,7 @@
           </el-form-item>
           <span v-show="axisForm.splitLine.show">
             <el-form-item :label="$t('chart.axis_color')" class="form-item">
-              <el-color-picker v-model="axisForm.splitLine.lineStyle.color" class="el-color-picker" @change="changeYAxisStyle" />
+              <el-color-picker v-model="axisForm.splitLine.lineStyle.color" class="el-color-picker" :predefine="predefineColors" @change="changeYAxisStyle" />
             </el-form-item>
             <el-form-item :label="$t('chart.axis_width')" class="form-item form-item-slider">
               <el-slider v-model="axisForm.splitLine.lineStyle.width" :min="1" :max="10" show-input :show-input-controls="false" input-size="mini" @change="changeYAxisStyle" />
@@ -78,7 +78,7 @@
           </el-form-item>
           <span v-show="axisForm.axisLabel.show">
             <el-form-item :label="$t('chart.axis_label_color')" class="form-item">
-              <el-color-picker v-model="axisForm.axisLabel.color" class="el-color-picker" @change="changeYAxisStyle" />
+              <el-color-picker v-model="axisForm.axisLabel.color" class="el-color-picker" :predefine="predefineColors" @change="changeYAxisStyle" />
             </el-form-item>
             <el-form-item :label="$t('chart.axis_label_rotate')" class="form-item form-item-slider">
               <el-slider v-model="axisForm.axisLabel.rotate" show-input :show-input-controls="false" :min="-90" :max="90" input-size="mini" @change="changeYAxisStyle" />
@@ -100,7 +100,7 @@
 </template>
 
 <script>
-import { DEFAULT_YAXIS_STYLE } from '../../chart/chart'
+import { COLOR_PANEL, DEFAULT_YAXIS_STYLE } from '../../chart/chart'
 
 export default {
   name: 'YAxisSelector',
@@ -118,7 +118,8 @@ export default {
     return {
       axisForm: JSON.parse(JSON.stringify(DEFAULT_YAXIS_STYLE)),
       isSetting: false,
-      fontSize: []
+      fontSize: [],
+      predefineColors: COLOR_PANEL
     }
   },
   watch: {
diff --git a/frontend/src/views/chart/components/component-style/YAxisSelectorAntV.vue b/frontend/src/views/chart/components/component-style/YAxisSelectorAntV.vue
index dfc2e5c914..1bd3392688 100644
--- a/frontend/src/views/chart/components/component-style/YAxisSelectorAntV.vue
+++ b/frontend/src/views/chart/components/component-style/YAxisSelectorAntV.vue
@@ -16,7 +16,7 @@
             <el-input v-model="axisForm.name" size="mini" @blur="changeYAxisStyle" />
           </el-form-item>
           <el-form-item :label="$t('chart.axis_name_color')" class="form-item">
-            <el-color-picker v-model="axisForm.nameTextStyle.color" class="color-picker-style" @change="changeYAxisStyle" />
+            <el-color-picker v-model="axisForm.nameTextStyle.color" class="color-picker-style" :predefine="predefineColors" @change="changeYAxisStyle" />
           </el-form-item>
           <el-form-item :label="$t('chart.axis_name_fontsize')" class="form-item">
             <el-select v-model="axisForm.nameTextStyle.fontSize" :placeholder="$t('chart.axis_name_fontsize')" @change="changeYAxisStyle">
@@ -70,7 +70,7 @@
           </el-form-item>
           <span v-show="axisForm.splitLine.show">
             <el-form-item :label="$t('chart.axis_color')" class="form-item">
-              <el-color-picker v-model="axisForm.splitLine.lineStyle.color" class="el-color-picker" @change="changeYAxisStyle" />
+              <el-color-picker v-model="axisForm.splitLine.lineStyle.color" class="el-color-picker" :predefine="predefineColors" @change="changeYAxisStyle" />
             </el-form-item>
             <el-form-item :label="$t('chart.axis_width')" class="form-item form-item-slider">
               <el-slider v-model="axisForm.splitLine.lineStyle.width" :min="1" :max="10" show-input :show-input-controls="false" input-size="mini" @change="changeYAxisStyle" />
@@ -82,7 +82,7 @@
           </el-form-item>
           <span v-show="axisForm.axisLabel.show">
             <el-form-item :label="$t('chart.axis_label_color')" class="form-item">
-              <el-color-picker v-model="axisForm.axisLabel.color" class="el-color-picker" @change="changeYAxisStyle" />
+              <el-color-picker v-model="axisForm.axisLabel.color" class="el-color-picker" :predefine="predefineColors" @change="changeYAxisStyle" />
             </el-form-item>
             <el-form-item :label="$t('chart.axis_label_rotate')" class="form-item form-item-slider">
               <el-slider v-model="axisForm.axisLabel.rotate" show-input :show-input-controls="false" :min="-90" :max="90" input-size="mini" @change="changeYAxisStyle" />
@@ -100,7 +100,7 @@
 </template>
 
 <script>
-import { DEFAULT_YAXIS_STYLE } from '../../chart/chart'
+import { COLOR_PANEL, DEFAULT_YAXIS_STYLE } from '../../chart/chart'
 
 export default {
   name: 'YAxisSelectorAntV',
@@ -118,7 +118,8 @@ export default {
     return {
       axisForm: JSON.parse(JSON.stringify(DEFAULT_YAXIS_STYLE)),
       isSetting: false,
-      fontSize: []
+      fontSize: [],
+      predefineColors: COLOR_PANEL
     }
   },
   watch: {
diff --git a/frontend/src/views/chart/components/shape-attr/ColorSelector.vue b/frontend/src/views/chart/components/shape-attr/ColorSelector.vue
index f499f1cc66..9eda638590 100644
--- a/frontend/src/views/chart/components/shape-attr/ColorSelector.vue
+++ b/frontend/src/views/chart/components/shape-attr/ColorSelector.vue
@@ -36,7 +36,7 @@
                 <div style="display: flex;align-items: center;margin-top: 10px;">
                   <span class="color-label" />
                   <span>
-                    <el-color-picker v-model="customColor" class="color-picker-style" @change="switchColorCase" />
+                    <el-color-picker v-model="customColor" class="color-picker-style" :predefine="predefineColors" @change="switchColorCase" />
                   </span>
                 </div>
               </div>
@@ -47,21 +47,21 @@
           </el-form-item>
 
           <el-form-item v-show="(chart.type && chart.type.includes('text')) || sourceType==='panelTable'" :label="$t('chart.quota_color')" class="form-item">
-            <el-color-picker v-model="colorForm.quotaColor" class="color-picker-style" @change="changeColorCase" />
+            <el-color-picker v-model="colorForm.quotaColor" class="color-picker-style" :predefine="predefineColors" @change="changeColorCase" />
           </el-form-item>
           <el-form-item v-show="(chart.type && chart.type.includes('text')) || sourceType==='panelTable'" :label="$t('chart.dimension_color')" class="form-item">
-            <el-color-picker v-model="colorForm.dimensionColor" class="color-picker-style" @change="changeColorCase" />
+            <el-color-picker v-model="colorForm.dimensionColor" class="color-picker-style" :predefine="predefineColors" @change="changeColorCase" />
           </el-form-item>
         </div>
         <div v-if="sourceType==='view' || sourceType==='panelTable'">
           <el-form-item v-show="(chart.type && chart.type.includes('table')) || sourceType==='panelTable'" :label="$t('chart.table_header_bg')" class="form-item">
-            <el-color-picker v-model="colorForm.tableHeaderBgColor" class="color-picker-style" @change="changeColorCase" />
+            <el-color-picker v-model="colorForm.tableHeaderBgColor" class="color-picker-style" :predefine="predefineColors" @change="changeColorCase" />
           </el-form-item>
           <el-form-item v-show="(chart.type && chart.type.includes('table')) || sourceType==='panelTable'" :label="$t('chart.table_item_bg')" class="form-item">
-            <el-color-picker v-model="colorForm.tableItemBgColor" class="color-picker-style" @change="changeColorCase" />
+            <el-color-picker v-model="colorForm.tableItemBgColor" class="color-picker-style" :predefine="predefineColors" @change="changeColorCase" />
           </el-form-item>
           <el-form-item v-show="(chart.type && chart.type.includes('table')) || sourceType==='panelTable'" :label="$t('chart.table_item_font_color')" class="form-item">
-            <el-color-picker v-model="colorForm.tableFontColor" class="color-picker-style" @change="changeColorCase" />
+            <el-color-picker v-model="colorForm.tableFontColor" class="color-picker-style" :predefine="predefineColors" @change="changeColorCase" />
           </el-form-item>
           <!--              暂时不支持该功能-->
           <!--              <el-form-item v-show="(chart.type && chart.type.includes('table')) || sourceType==='panelTable'" :label="$t('chart.stripe')" class="form-item">-->
@@ -78,7 +78,7 @@
 </template>
 
 <script>
-import { DEFAULT_COLOR_CASE } from '../../chart/chart'
+import { COLOR_PANEL, DEFAULT_COLOR_CASE } from '../../chart/chart'
 
 export default {
   name: 'ColorSelector',
@@ -183,7 +183,8 @@ export default {
       ],
       colorForm: JSON.parse(JSON.stringify(DEFAULT_COLOR_CASE)),
       customColor: null,
-      colorIndex: 0
+      colorIndex: 0,
+      predefineColors: COLOR_PANEL
     }
   },
   watch: {
diff --git a/frontend/src/views/chart/components/shape-attr/LabelSelector.vue b/frontend/src/views/chart/components/shape-attr/LabelSelector.vue
index 4801f322cc..e94542193d 100644
--- a/frontend/src/views/chart/components/shape-attr/LabelSelector.vue
+++ b/frontend/src/views/chart/components/shape-attr/LabelSelector.vue
@@ -15,7 +15,7 @@
             </el-select>
           </el-form-item>
           <el-form-item :label="$t('chart.text_color')" class="form-item">
-            <el-color-picker v-model="labelForm.color" class="color-picker-style" @change="changeLabelAttr" />
+            <el-color-picker v-model="labelForm.color" class="color-picker-style" :predefine="predefineColors" @change="changeLabelAttr" />
           </el-form-item>
           <el-form-item v-show="chart.type && chart.type !== 'liquid'" :label="$t('chart.label_position')" class="form-item">
             <el-select v-model="labelForm.position" :placeholder="$t('chart.label_position')" @change="changeLabelAttr">
@@ -49,7 +49,7 @@
           </el-select>
         </el-form-item>
         <el-form-item :label="$t('chart.text_color')" class="form-item">
-          <el-color-picker v-model="labelForm.color" class="color-picker-style" @change="changeLabelAttr" />
+          <el-color-picker v-model="labelForm.color" class="color-picker-style" :predefine="predefineColors" @change="changeLabelAttr" />
         </el-form-item>
         <el-form-item class="form-item">
           <span slot="label">
@@ -65,7 +65,7 @@
 </template>
 
 <script>
-import { DEFAULT_LABEL } from '../../chart/chart'
+import { COLOR_PANEL, DEFAULT_LABEL } from '../../chart/chart'
 
 export default {
   name: 'LabelSelector',
@@ -92,7 +92,8 @@ export default {
         { name: this.$t('chart.text_pos_bottom'), value: 'bottom' },
         { name: this.$t('chart.text_pos_left'), value: 'left' },
         { name: this.$t('chart.text_pos_right'), value: 'right' }
-      ]
+      ],
+      predefineColors: COLOR_PANEL
     }
   },
   watch: {
diff --git a/frontend/src/views/chart/components/shape-attr/LabelSelectorAntV.vue b/frontend/src/views/chart/components/shape-attr/LabelSelectorAntV.vue
index 476c98d9b4..52c90ecdf3 100644
--- a/frontend/src/views/chart/components/shape-attr/LabelSelectorAntV.vue
+++ b/frontend/src/views/chart/components/shape-attr/LabelSelectorAntV.vue
@@ -15,7 +15,7 @@
             </el-select>
           </el-form-item>
           <el-form-item :label="$t('chart.text_color')" class="form-item">
-            <el-color-picker v-model="labelForm.color" class="color-picker-style" @change="changeLabelAttr" />
+            <el-color-picker v-model="labelForm.color" class="color-picker-style" :predefine="predefineColors" @change="changeLabelAttr" />
           </el-form-item>
           <el-form-item v-show="chart.type && chart.type !== 'liquid' && chart.type !== 'pie-rose'" :label="$t('chart.label_position')" class="form-item">
             <el-select v-model="labelForm.position" :placeholder="$t('chart.label_position')" @change="changeLabelAttr">
@@ -35,7 +35,7 @@
           </el-select>
         </el-form-item>
         <el-form-item :label="$t('chart.text_color')" class="form-item">
-          <el-color-picker v-model="labelForm.color" class="color-picker-style" @change="changeLabelAttr" />
+          <el-color-picker v-model="labelForm.color" class="color-picker-style" :predefine="predefineColors" @change="changeLabelAttr" />
         </el-form-item>
       </el-form>
     </el-col>
@@ -43,7 +43,7 @@
 </template>
 
 <script>
-import { DEFAULT_LABEL } from '../../chart/chart'
+import { COLOR_PANEL, DEFAULT_LABEL } from '../../chart/chart'
 
 export default {
   name: 'LabelSelectorAntV',
@@ -70,7 +70,8 @@ export default {
         { name: this.$t('chart.text_pos_bottom'), value: 'bottom' },
         { name: this.$t('chart.text_pos_left'), value: 'left' },
         { name: this.$t('chart.text_pos_right'), value: 'right' }
-      ]
+      ],
+      predefineColors: COLOR_PANEL
     }
   },
   watch: {
diff --git a/frontend/src/views/chart/components/shape-attr/TooltipSelector.vue b/frontend/src/views/chart/components/shape-attr/TooltipSelector.vue
index d56d8df48d..3804118b83 100644
--- a/frontend/src/views/chart/components/shape-attr/TooltipSelector.vue
+++ b/frontend/src/views/chart/components/shape-attr/TooltipSelector.vue
@@ -18,7 +18,7 @@
             </el-select>
           </el-form-item>
           <el-form-item :label="$t('chart.text_color')" class="form-item">
-            <el-color-picker v-model="tooltipForm.textStyle.color" class="color-picker-style" @change="changeTooltipAttr" />
+            <el-color-picker v-model="tooltipForm.textStyle.color" class="color-picker-style" :predefine="predefineColors" @change="changeTooltipAttr" />
           </el-form-item>
           <el-form-item class="form-item">
             <span slot="label">
@@ -53,7 +53,7 @@
 </template>
 
 <script>
-import { DEFAULT_TOOLTIP } from '../../chart/chart'
+import { COLOR_PANEL, DEFAULT_TOOLTIP } from '../../chart/chart'
 
 export default {
   name: 'TooltipSelector',
@@ -71,7 +71,8 @@ export default {
     return {
       tooltipForm: JSON.parse(JSON.stringify(DEFAULT_TOOLTIP)),
       fontSize: [],
-      isSetting: false
+      isSetting: false,
+      predefineColors: COLOR_PANEL
     }
   },
   watch: {
diff --git a/frontend/src/views/chart/components/shape-attr/TooltipSelectorAntV.vue b/frontend/src/views/chart/components/shape-attr/TooltipSelectorAntV.vue
index e7efc00d5e..99732aa68b 100644
--- a/frontend/src/views/chart/components/shape-attr/TooltipSelectorAntV.vue
+++ b/frontend/src/views/chart/components/shape-attr/TooltipSelectorAntV.vue
@@ -12,7 +12,7 @@
             </el-select>
           </el-form-item>
           <el-form-item :label="$t('chart.text_color')" class="form-item">
-            <el-color-picker v-model="tooltipForm.textStyle.color" class="color-picker-style" @change="changeTooltipAttr" />
+            <el-color-picker v-model="tooltipForm.textStyle.color" class="color-picker-style" :predefine="predefineColors" @change="changeTooltipAttr" />
           </el-form-item>
         </div>
       </el-form>
@@ -21,7 +21,7 @@
 </template>
 
 <script>
-import { DEFAULT_TOOLTIP } from '../../chart/chart'
+import { COLOR_PANEL, DEFAULT_TOOLTIP } from '../../chart/chart'
 
 export default {
   name: 'TooltipSelectorAntV',
@@ -39,7 +39,8 @@ export default {
     return {
       tooltipForm: JSON.parse(JSON.stringify(DEFAULT_TOOLTIP)),
       fontSize: [],
-      isSetting: false
+      isSetting: false,
+      predefineColors: COLOR_PANEL
     }
   },
   watch: {
diff --git a/frontend/src/views/chart/group/Group.vue b/frontend/src/views/chart/group/Group.vue
index fca04a6c3e..1152de154e 100644
--- a/frontend/src/views/chart/group/Group.vue
+++ b/frontend/src/views/chart/group/Group.vue
@@ -880,11 +880,14 @@ export default {
       // if (this.tDs && this.tDs.type === 'group') {
       //   return
       // }
-      this.dsForm.sceneId = this.tDs.id
+      const oldSceneId = this.dsForm.sceneId
+      const newSceneId = this.tDs.id
+      this.dsForm.sceneId = newSceneId
       post('/chart/view/save', this.dsForm).then(res => {
         this.closeMoveDs()
         // this.tableTree()
-        this.refreshNodeBy(this.dsForm.sceneId)
+        this.refreshNodeBy(oldSceneId)
+        this.refreshNodeBy(newSceneId)
       })
     },
     targetDs(val) {
diff --git a/frontend/src/views/chart/view/ChartEdit.vue b/frontend/src/views/chart/view/ChartEdit.vue
index f37d2cc4be..a2154c5fe0 100644
--- a/frontend/src/views/chart/view/ChartEdit.vue
+++ b/frontend/src/views/chart/view/ChartEdit.vue
@@ -3,6 +3,7 @@
     <!--    <span v-show="false">{{ vId }}</span>-->
     <!-- <el-row style="height: 40px;background-color: white" class="padding-lr"> -->
     <el-row style="height: 40px;" class="padding-lr">
+      <span class="title-text" style="line-height: 40px;">{{ view.name }}</span>
       <el-popover
         placement="right-start"
         width="400"
@@ -11,7 +12,7 @@
         @hide="hideTab"
       >
         <dataset-chart-detail type="chart" :data="view" :tab-status="tabStatus" />
-        <span slot="reference" class="title-text" style="line-height: 40px;cursor: pointer;">{{ view.name }}</span>
+        <svg-icon slot="reference" icon-class="more_v" style="cursor: pointer;" />
       </el-popover>
       <span style="float: right;line-height: 40px;">
         <!--        <el-button v-if="hasDataPermission('manage',param.privileges)" size="mini" @click="changeDs">-->
@@ -927,6 +928,7 @@ export default {
       view.extStack = JSON.stringify(view.extStack)
       view.drillFields = JSON.stringify(view.drillFields)
       view.extBubble = JSON.stringify(view.extBubble)
+      delete view.data
       post('/chart/view/save', view).then(response => {
         // this.get(response.data.id);
         // this.getData(response.data.id)
diff --git a/frontend/src/views/chart/view/ChartType.vue b/frontend/src/views/chart/view/ChartType.vue
index 5cbe4c62fd..84f6a26080 100644
--- a/frontend/src/views/chart/view/ChartType.vue
+++ b/frontend/src/views/chart/view/ChartType.vue
@@ -56,16 +56,16 @@
         </el-radio>
       </div>
       <div style="width: 100%;display: flex;display: -webkit-flex;justify-content: space-between;flex-direction: row;flex-wrap: wrap;">
-        <el-radio value="chart-mix" label="chart-mix">
-          <span :title="$t('chart.chart_mix')">
-            <svg-icon icon-class="chart-mix" class="chart-icon" />
-          </span>
-        </el-radio>
-        <el-radio value="map" label="map">
-          <span :title="$t('chart.chart_map')">
-            <svg-icon icon-class="map" class="chart-icon" />
-          </span>
-        </el-radio>
+<!--        <el-radio value="chart-mix" label="chart-mix">-->
+<!--          <span :title="$t('chart.chart_mix')">-->
+<!--            <svg-icon icon-class="chart-mix" class="chart-icon" />-->
+<!--          </span>-->
+<!--        </el-radio>-->
+<!--        <el-radio value="map" label="map">-->
+<!--          <span :title="$t('chart.chart_map')">-->
+<!--            <svg-icon icon-class="map" class="chart-icon" />-->
+<!--          </span>-->
+<!--        </el-radio>-->
         <el-radio value="radar" label="radar">
           <span :title="$t('chart.chart_radar')">
             <svg-icon icon-class="radar" class="chart-icon" />
@@ -81,8 +81,6 @@
             <svg-icon icon-class="pie" class="chart-icon" />
           </span>
         </el-radio>
-      </div>
-      <div style="width: 100%;display: flex;display: -webkit-flex;justify-content: space-between;flex-direction: row;flex-wrap: wrap;">
         <el-radio value="pie-rose" label="pie-rose">
           <span :title="$t('chart.chart_pie_rose')">
             <svg-icon icon-class="pie-rose" class="chart-icon" />
@@ -93,6 +91,8 @@
             <svg-icon icon-class="funnel" class="chart-icon" />
           </span>
         </el-radio>
+      </div>
+      <div style="width: 100%;display: flex;display: -webkit-flex;justify-content: space-between;flex-direction: row;flex-wrap: wrap;">
         <el-radio value="treemap" label="treemap">
           <span :title="$t('chart.chart_treemap')">
             <svg-icon icon-class="treemap" class="chart-icon" />
@@ -104,6 +104,8 @@
           </span>
         </el-radio>
         <el-radio value="" label="" disabled class="disabled-none-cursor"><svg-icon icon-class="" class="chart-icon" /></el-radio>
+        <el-radio value="" label="" disabled class="disabled-none-cursor"><svg-icon icon-class="" class="chart-icon" /></el-radio>
+        <el-radio value="" label="" disabled class="disabled-none-cursor"><svg-icon icon-class="" class="chart-icon" /></el-radio>
       </div>
     </div>
     <div v-else-if="chart.render && chart.render === 'echarts'">
diff --git a/frontend/src/views/dataset/data/ViewTable.vue b/frontend/src/views/dataset/data/ViewTable.vue
index 675416e63d..2643786a16 100644
--- a/frontend/src/views/dataset/data/ViewTable.vue
+++ b/frontend/src/views/dataset/data/ViewTable.vue
@@ -2,6 +2,9 @@
   <el-row style="height: 100%;overflow-y: hidden;width: 100%;">
     <!--    <span v-show="false">{{ tableRefresh }}</span>-->
     <el-row style="height: 26px;">
+      <span class="title-text" style="line-height: 26px;">
+        {{ table.name }}
+      </span>
       <el-popover
         placement="right-start"
         width="400"
@@ -10,9 +13,7 @@
         @hide="hideTab"
       >
         <dataset-chart-detail type="dataset" :data="table" :tab-status="tabStatus" />
-        <span slot="reference" class="title-text" style="line-height: 26px;cursor: pointer;">
-          {{ table.name }}
-        </span>
+        <svg-icon slot="reference" icon-class="more_v" style="cursor: pointer;" />
       </el-popover>
       <el-row v-if="hasDataPermission('manage',param.privileges)" style="float: right">
         <el-dropdown v-if="table.type ==='excel'" style="margin-right: 10px;" size="small" trigger="click" @command="clickEditExcel">
diff --git a/frontend/src/views/dataset/group/Group.vue b/frontend/src/views/dataset/group/Group.vue
index b25b5d598d..f3a5948034 100644
--- a/frontend/src/views/dataset/group/Group.vue
+++ b/frontend/src/views/dataset/group/Group.vue
@@ -770,11 +770,14 @@ export default {
       }
     },
     saveMoveDs() {
-      this.dsForm.sceneId = this.tDs.id
+      const oldSceneId = this.dsForm.sceneId
+      const newSceneId = this.tDs.id
+      this.dsForm.sceneId = newSceneId
       this.dsForm.isRename = true
       alter(this.dsForm).then(res => {
         this.closeMoveDs()
-        this.refreshNodeBy(this.dsForm.sceneId)
+        this.refreshNodeBy(oldSceneId)
+        this.refreshNodeBy(newSceneId)
       })
     },
     targetDs(val) {

From e80060c0427a7690e9778ec11b5bd82e270551d9 Mon Sep 17 00:00:00 2001
From: junjie <junjie.xia@fit2cloud.com>
Date: Wed, 20 Oct 2021 11:46:49 +0800
Subject: [PATCH 2/5] =?UTF-8?q?feat:=E8=A7=86=E5=9B=BE=E3=80=81=E6=95=B0?=
 =?UTF-8?q?=E6=8D=AE=E9=9B=86title=E5=90=8E=E5=A2=9E=E5=8A=A0'...'?=
 =?UTF-8?q?=E5=9B=BE=E6=A0=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/views/chart/view/ChartEdit.vue   | 2 +-
 frontend/src/views/dataset/data/ViewTable.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/views/chart/view/ChartEdit.vue b/frontend/src/views/chart/view/ChartEdit.vue
index a2154c5fe0..90f5c8c9bf 100644
--- a/frontend/src/views/chart/view/ChartEdit.vue
+++ b/frontend/src/views/chart/view/ChartEdit.vue
@@ -12,7 +12,7 @@
         @hide="hideTab"
       >
         <dataset-chart-detail type="chart" :data="view" :tab-status="tabStatus" />
-        <svg-icon slot="reference" icon-class="more_v" style="cursor: pointer;" />
+        <svg-icon class="title-text" slot="reference" icon-class="more_v" style="cursor: pointer;" />
       </el-popover>
       <span style="float: right;line-height: 40px;">
         <!--        <el-button v-if="hasDataPermission('manage',param.privileges)" size="mini" @click="changeDs">-->
diff --git a/frontend/src/views/dataset/data/ViewTable.vue b/frontend/src/views/dataset/data/ViewTable.vue
index 2643786a16..e8e6ba1834 100644
--- a/frontend/src/views/dataset/data/ViewTable.vue
+++ b/frontend/src/views/dataset/data/ViewTable.vue
@@ -13,7 +13,7 @@
         @hide="hideTab"
       >
         <dataset-chart-detail type="dataset" :data="table" :tab-status="tabStatus" />
-        <svg-icon slot="reference" icon-class="more_v" style="cursor: pointer;" />
+        <svg-icon slot="reference" class="title-text" icon-class="more_v" style="cursor: pointer;" />
       </el-popover>
       <el-row v-if="hasDataPermission('manage',param.privileges)" style="float: right">
         <el-dropdown v-if="table.type ==='excel'" style="margin-right: 10px;" size="small" trigger="click" @command="clickEditExcel">

From 656cd6f2c941b981e971eacdd70e17b259c3b9b7 Mon Sep 17 00:00:00 2001
From: junjie <junjie.xia@fit2cloud.com>
Date: Wed, 20 Oct 2021 12:25:51 +0800
Subject: [PATCH 3/5] =?UTF-8?q?refactor=EF=BC=9A=E4=BB=A3=E7=A0=81?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../chart/components/ChartComponentG2.vue     |  1 -
 frontend/src/views/chart/view/ChartType.vue   | 20 +++++++++----------
 2 files changed, 10 insertions(+), 11 deletions(-)

diff --git a/frontend/src/views/chart/components/ChartComponentG2.vue b/frontend/src/views/chart/components/ChartComponentG2.vue
index 03b3fc9a27..78c14b8e61 100644
--- a/frontend/src/views/chart/components/ChartComponentG2.vue
+++ b/frontend/src/views/chart/components/ChartComponentG2.vue
@@ -22,7 +22,6 @@ import { baseGaugeOptionAntV } from '@/views/chart/chart/gauge/gauge_antv'
 import { baseFunnelOptionAntV } from '@/views/chart/chart/funnel/funnel_antv'
 import { baseTreemapOptionAntV } from '@/views/chart/chart/treemap/treemap_antv'
 import { baseRadarOptionAntV } from '@/views/chart/chart/radar/radar_antv'
-import { baseMixOptionAntV } from '@/views/chart/chart/mix/mix_antv'
 
 export default {
   name: 'ChartComponentG2',
diff --git a/frontend/src/views/chart/view/ChartType.vue b/frontend/src/views/chart/view/ChartType.vue
index 84f6a26080..9a7259695d 100644
--- a/frontend/src/views/chart/view/ChartType.vue
+++ b/frontend/src/views/chart/view/ChartType.vue
@@ -56,16 +56,16 @@
         </el-radio>
       </div>
       <div style="width: 100%;display: flex;display: -webkit-flex;justify-content: space-between;flex-direction: row;flex-wrap: wrap;">
-<!--        <el-radio value="chart-mix" label="chart-mix">-->
-<!--          <span :title="$t('chart.chart_mix')">-->
-<!--            <svg-icon icon-class="chart-mix" class="chart-icon" />-->
-<!--          </span>-->
-<!--        </el-radio>-->
-<!--        <el-radio value="map" label="map">-->
-<!--          <span :title="$t('chart.chart_map')">-->
-<!--            <svg-icon icon-class="map" class="chart-icon" />-->
-<!--          </span>-->
-<!--        </el-radio>-->
+        <!--        <el-radio value="chart-mix" label="chart-mix">-->
+        <!--          <span :title="$t('chart.chart_mix')">-->
+        <!--            <svg-icon icon-class="chart-mix" class="chart-icon" />-->
+        <!--          </span>-->
+        <!--        </el-radio>-->
+        <!--        <el-radio value="map" label="map">-->
+        <!--          <span :title="$t('chart.chart_map')">-->
+        <!--            <svg-icon icon-class="map" class="chart-icon" />-->
+        <!--          </span>-->
+        <!--        </el-radio>-->
         <el-radio value="radar" label="radar">
           <span :title="$t('chart.chart_radar')">
             <svg-icon icon-class="radar" class="chart-icon" />

From a7144fd0cb0755a47c9a82ef0db67503205f2c5c Mon Sep 17 00:00:00 2001
From: fit2cloud-chenyw <yawen.chen@fit2cloud.com>
Date: Wed, 20 Oct 2021 14:03:50 +0800
Subject: [PATCH 4/5] =?UTF-8?q?feat:=20=E5=85=AC=E5=85=B1=E9=93=BE?=
 =?UTF-8?q?=E6=8E=A5=E5=A2=9E=E5=8A=A0=E6=9C=89=E6=95=88=E6=9C=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../io/dataease/base/domain/PanelLink.java    |  2 +
 .../base/domain/PanelLinkExample.java         | 60 ++++++++++++++
 .../dataease/base/mapper/PanelLinkMapper.xml  | 25 ++++--
 .../base/mapper/ext/ExtPanelLinkMapper.java   | 11 +++
 .../base/mapper/ext/ExtPanelLinkMapper.xml    | 17 ++++
 .../controller/panel/api/LinkApi.java         |  5 ++
 .../controller/panel/server/LinkServer.java   | 10 +++
 .../request/panel/link/OverTimeRequest.java   | 19 +++++
 .../dataease/dto/panel/link/GenerateDto.java  |  2 +
 .../dataease/dto/panel/link/ValidateDto.java  |  3 +
 .../service/panel/PanelLinkService.java       | 22 +++++
 .../resources/db/migration/V27__de1.4.sql     |  4 +
 .../src/main/resources/generatorConfig.xml    |  2 +-
 frontend/package.json                         |  2 +-
 frontend/src/api/link/index.js                |  8 ++
 frontend/src/lang/en.js                       |  2 +
 frontend/src/lang/tw.js                       | 19 +++++
 frontend/src/lang/zh.js                       |  4 +-
 frontend/src/link/link.js                     |  2 +-
 frontend/src/views/link/generate/index.vue    | 81 ++++++++++++++++++-
 frontend/src/views/link/index.vue             | 14 +++-
 frontend/src/views/link/overtime/index.vue    |  3 +
 22 files changed, 302 insertions(+), 15 deletions(-)
 create mode 100644 backend/src/main/java/io/dataease/base/mapper/ext/ExtPanelLinkMapper.java
 create mode 100644 backend/src/main/java/io/dataease/base/mapper/ext/ExtPanelLinkMapper.xml
 create mode 100644 backend/src/main/java/io/dataease/controller/request/panel/link/OverTimeRequest.java
 create mode 100644 frontend/src/views/link/overtime/index.vue

diff --git a/backend/src/main/java/io/dataease/base/domain/PanelLink.java b/backend/src/main/java/io/dataease/base/domain/PanelLink.java
index efe0e389fb..966a8c59c3 100644
--- a/backend/src/main/java/io/dataease/base/domain/PanelLink.java
+++ b/backend/src/main/java/io/dataease/base/domain/PanelLink.java
@@ -13,5 +13,7 @@ public class PanelLink implements Serializable {
 
     private String pwd;
 
+    private Long overTime;
+
     private static final long serialVersionUID = 1L;
 }
\ No newline at end of file
diff --git a/backend/src/main/java/io/dataease/base/domain/PanelLinkExample.java b/backend/src/main/java/io/dataease/base/domain/PanelLinkExample.java
index 0dccb6d0b7..99e7fb3f91 100644
--- a/backend/src/main/java/io/dataease/base/domain/PanelLinkExample.java
+++ b/backend/src/main/java/io/dataease/base/domain/PanelLinkExample.java
@@ -363,6 +363,66 @@ public class PanelLinkExample {
             addCriterion("pwd not between", value1, value2, "pwd");
             return (Criteria) this;
         }
+
+        public Criteria andOverTimeIsNull() {
+            addCriterion("over_time is null");
+            return (Criteria) this;
+        }
+
+        public Criteria andOverTimeIsNotNull() {
+            addCriterion("over_time is not null");
+            return (Criteria) this;
+        }
+
+        public Criteria andOverTimeEqualTo(Long value) {
+            addCriterion("over_time =", value, "overTime");
+            return (Criteria) this;
+        }
+
+        public Criteria andOverTimeNotEqualTo(Long value) {
+            addCriterion("over_time <>", value, "overTime");
+            return (Criteria) this;
+        }
+
+        public Criteria andOverTimeGreaterThan(Long value) {
+            addCriterion("over_time >", value, "overTime");
+            return (Criteria) this;
+        }
+
+        public Criteria andOverTimeGreaterThanOrEqualTo(Long value) {
+            addCriterion("over_time >=", value, "overTime");
+            return (Criteria) this;
+        }
+
+        public Criteria andOverTimeLessThan(Long value) {
+            addCriterion("over_time <", value, "overTime");
+            return (Criteria) this;
+        }
+
+        public Criteria andOverTimeLessThanOrEqualTo(Long value) {
+            addCriterion("over_time <=", value, "overTime");
+            return (Criteria) this;
+        }
+
+        public Criteria andOverTimeIn(List<Long> values) {
+            addCriterion("over_time in", values, "overTime");
+            return (Criteria) this;
+        }
+
+        public Criteria andOverTimeNotIn(List<Long> values) {
+            addCriterion("over_time not in", values, "overTime");
+            return (Criteria) this;
+        }
+
+        public Criteria andOverTimeBetween(Long value1, Long value2) {
+            addCriterion("over_time between", value1, value2, "overTime");
+            return (Criteria) this;
+        }
+
+        public Criteria andOverTimeNotBetween(Long value1, Long value2) {
+            addCriterion("over_time not between", value1, value2, "overTime");
+            return (Criteria) this;
+        }
     }
 
     public static class Criteria extends GeneratedCriteria {
diff --git a/backend/src/main/java/io/dataease/base/mapper/PanelLinkMapper.xml b/backend/src/main/java/io/dataease/base/mapper/PanelLinkMapper.xml
index 130aeb61df..eedc1062fe 100644
--- a/backend/src/main/java/io/dataease/base/mapper/PanelLinkMapper.xml
+++ b/backend/src/main/java/io/dataease/base/mapper/PanelLinkMapper.xml
@@ -6,6 +6,7 @@
     <result column="valid" jdbcType="BIT" property="valid" />
     <result column="enable_pwd" jdbcType="BIT" property="enablePwd" />
     <result column="pwd" jdbcType="VARCHAR" property="pwd" />
+    <result column="over_time" jdbcType="BIGINT" property="overTime" />
   </resultMap>
   <sql id="Example_Where_Clause">
     <where>
@@ -66,7 +67,7 @@
     </where>
   </sql>
   <sql id="Base_Column_List">
-    resource_id, `valid`, enable_pwd, pwd
+    resource_id, `valid`, enable_pwd, pwd, over_time
   </sql>
   <select id="selectByExample" parameterType="io.dataease.base.domain.PanelLinkExample" resultMap="BaseResultMap">
     select
@@ -100,9 +101,9 @@
   </delete>
   <insert id="insert" parameterType="io.dataease.base.domain.PanelLink">
     insert into panel_link (resource_id, `valid`, enable_pwd, 
-      pwd)
+      pwd, over_time)
     values (#{resourceId,jdbcType=VARCHAR}, #{valid,jdbcType=BIT}, #{enablePwd,jdbcType=BIT}, 
-      #{pwd,jdbcType=VARCHAR})
+      #{pwd,jdbcType=VARCHAR}, #{overTime,jdbcType=BIGINT})
   </insert>
   <insert id="insertSelective" parameterType="io.dataease.base.domain.PanelLink">
     insert into panel_link
@@ -119,6 +120,9 @@
       <if test="pwd != null">
         pwd,
       </if>
+      <if test="overTime != null">
+        over_time,
+      </if>
     </trim>
     <trim prefix="values (" suffix=")" suffixOverrides=",">
       <if test="resourceId != null">
@@ -133,6 +137,9 @@
       <if test="pwd != null">
         #{pwd,jdbcType=VARCHAR},
       </if>
+      <if test="overTime != null">
+        #{overTime,jdbcType=BIGINT},
+      </if>
     </trim>
   </insert>
   <select id="countByExample" parameterType="io.dataease.base.domain.PanelLinkExample" resultType="java.lang.Long">
@@ -156,6 +163,9 @@
       <if test="record.pwd != null">
         pwd = #{record.pwd,jdbcType=VARCHAR},
       </if>
+      <if test="record.overTime != null">
+        over_time = #{record.overTime,jdbcType=BIGINT},
+      </if>
     </set>
     <if test="_parameter != null">
       <include refid="Update_By_Example_Where_Clause" />
@@ -166,7 +176,8 @@
     set resource_id = #{record.resourceId,jdbcType=VARCHAR},
       `valid` = #{record.valid,jdbcType=BIT},
       enable_pwd = #{record.enablePwd,jdbcType=BIT},
-      pwd = #{record.pwd,jdbcType=VARCHAR}
+      pwd = #{record.pwd,jdbcType=VARCHAR},
+      over_time = #{record.overTime,jdbcType=BIGINT}
     <if test="_parameter != null">
       <include refid="Update_By_Example_Where_Clause" />
     </if>
@@ -183,6 +194,9 @@
       <if test="pwd != null">
         pwd = #{pwd,jdbcType=VARCHAR},
       </if>
+      <if test="overTime != null">
+        over_time = #{overTime,jdbcType=BIGINT},
+      </if>
     </set>
     where resource_id = #{resourceId,jdbcType=VARCHAR}
   </update>
@@ -190,7 +204,8 @@
     update panel_link
     set `valid` = #{valid,jdbcType=BIT},
       enable_pwd = #{enablePwd,jdbcType=BIT},
-      pwd = #{pwd,jdbcType=VARCHAR}
+      pwd = #{pwd,jdbcType=VARCHAR},
+      over_time = #{overTime,jdbcType=BIGINT}
     where resource_id = #{resourceId,jdbcType=VARCHAR}
   </update>
 </mapper>
\ No newline at end of file
diff --git a/backend/src/main/java/io/dataease/base/mapper/ext/ExtPanelLinkMapper.java b/backend/src/main/java/io/dataease/base/mapper/ext/ExtPanelLinkMapper.java
new file mode 100644
index 0000000000..621ccfe6f0
--- /dev/null
+++ b/backend/src/main/java/io/dataease/base/mapper/ext/ExtPanelLinkMapper.java
@@ -0,0 +1,11 @@
+package io.dataease.base.mapper.ext;
+
+import org.apache.ibatis.annotations.Param;
+
+import io.dataease.controller.request.panel.link.OverTimeRequest;
+
+public interface ExtPanelLinkMapper {
+
+    void updateOverTime(@Param("request") OverTimeRequest request);
+    
+}
diff --git a/backend/src/main/java/io/dataease/base/mapper/ext/ExtPanelLinkMapper.xml b/backend/src/main/java/io/dataease/base/mapper/ext/ExtPanelLinkMapper.xml
new file mode 100644
index 0000000000..6e6b278b3f
--- /dev/null
+++ b/backend/src/main/java/io/dataease/base/mapper/ext/ExtPanelLinkMapper.xml
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
+<mapper namespace="io.dataease.base.mapper.ext.ExtPanelLinkMapper">
+
+   
+
+    
+
+
+    <update id="updateOverTime"  >
+       update panel_link set over_time = #{request.overTime} where resource_id = #{request.resourceId}
+    </update>
+
+
+
+
+</mapper>
diff --git a/backend/src/main/java/io/dataease/controller/panel/api/LinkApi.java b/backend/src/main/java/io/dataease/controller/panel/api/LinkApi.java
index b37daef68e..56a1b0f245 100644
--- a/backend/src/main/java/io/dataease/controller/panel/api/LinkApi.java
+++ b/backend/src/main/java/io/dataease/controller/panel/api/LinkApi.java
@@ -6,6 +6,7 @@ import io.dataease.controller.ResultHolder;
 import io.dataease.controller.request.chart.ChartExtRequest;
 import io.dataease.controller.request.panel.link.EnablePwdRequest;
 import io.dataease.controller.request.panel.link.LinkRequest;
+import io.dataease.controller.request.panel.link.OverTimeRequest;
 import io.dataease.controller.request.panel.link.PasswordRequest;
 import io.dataease.dto.panel.link.GenerateDto;
 import io.dataease.dto.panel.link.ValidateDto;
@@ -29,6 +30,10 @@ public interface LinkApi {
     @PostMapping("/enablePwd")
     void enablePwd(EnablePwdRequest request);
 
+    @ApiOperation("过期时间")
+    @PostMapping("/resetOverTime")
+    void resetOverTime(OverTimeRequest request);
+
     @ApiOperation("启用/禁用链接分享")
     @PostMapping("/switchLink")
     void switchLink(LinkRequest request);
diff --git a/backend/src/main/java/io/dataease/controller/panel/server/LinkServer.java b/backend/src/main/java/io/dataease/controller/panel/server/LinkServer.java
index cd63ab3b2b..bd7a982145 100644
--- a/backend/src/main/java/io/dataease/controller/panel/server/LinkServer.java
+++ b/backend/src/main/java/io/dataease/controller/panel/server/LinkServer.java
@@ -8,6 +8,7 @@ import io.dataease.controller.panel.api.LinkApi;
 import io.dataease.controller.request.chart.ChartExtRequest;
 import io.dataease.controller.request.panel.link.EnablePwdRequest;
 import io.dataease.controller.request.panel.link.LinkRequest;
+import io.dataease.controller.request.panel.link.OverTimeRequest;
 import io.dataease.controller.request.panel.link.PasswordRequest;
 import io.dataease.controller.request.panel.link.ValidateRequest;
 import io.dataease.dto.panel.link.GenerateDto;
@@ -46,6 +47,14 @@ public class LinkServer implements LinkApi {
         panelLinkService.changeEnablePwd(request);
     }
 
+    
+
+    @Override
+    public void resetOverTime(@RequestBody OverTimeRequest request) {
+        panelLinkService.overTime(request);
+        
+    }
+
     @Override
     public void switchLink(@RequestBody LinkRequest request) {
         panelLinkService.changeValid(request);
@@ -74,6 +83,7 @@ public class LinkServer implements LinkApi {
         dto.setValid(one.getValid());
         dto.setEnablePwd(one.getEnablePwd());
         dto.setPassPwd(panelLinkService.validateHeads(one));
+        dto.setExpire(panelLinkService.isExpire(one));
         return dto;
     }
 
diff --git a/backend/src/main/java/io/dataease/controller/request/panel/link/OverTimeRequest.java b/backend/src/main/java/io/dataease/controller/request/panel/link/OverTimeRequest.java
new file mode 100644
index 0000000000..47545b0845
--- /dev/null
+++ b/backend/src/main/java/io/dataease/controller/request/panel/link/OverTimeRequest.java
@@ -0,0 +1,19 @@
+package io.dataease.controller.request.panel.link;
+
+import io.swagger.annotations.ApiModelProperty;
+import lombok.Data;
+import lombok.Getter;
+import lombok.Setter;
+
+@Data
+@Getter
+@Setter
+public class OverTimeRequest {
+
+    @ApiModelProperty("资源ID")
+    private String resourceId;
+
+    @ApiModelProperty("过期时间")
+    private Long overTime;
+    
+}
diff --git a/backend/src/main/java/io/dataease/dto/panel/link/GenerateDto.java b/backend/src/main/java/io/dataease/dto/panel/link/GenerateDto.java
index 5958d12f9a..efad91a31a 100644
--- a/backend/src/main/java/io/dataease/dto/panel/link/GenerateDto.java
+++ b/backend/src/main/java/io/dataease/dto/panel/link/GenerateDto.java
@@ -14,4 +14,6 @@ public class GenerateDto {
     private String uri;
     @ApiModelProperty("密码")
     private String pwd;
+    @ApiModelProperty("有效期")
+    private Long overTime;
 }
diff --git a/backend/src/main/java/io/dataease/dto/panel/link/ValidateDto.java b/backend/src/main/java/io/dataease/dto/panel/link/ValidateDto.java
index 7d92ecbe80..29f70f2630 100644
--- a/backend/src/main/java/io/dataease/dto/panel/link/ValidateDto.java
+++ b/backend/src/main/java/io/dataease/dto/panel/link/ValidateDto.java
@@ -6,6 +6,9 @@ import lombok.Data;
 @Data
 public class ValidateDto {
 
+    @ApiModelProperty("是否过期")
+    private boolean expire;
+
     @ApiModelProperty("是否可用")
     private boolean valid;
     @ApiModelProperty("是否启用密码")
diff --git a/backend/src/main/java/io/dataease/service/panel/PanelLinkService.java b/backend/src/main/java/io/dataease/service/panel/PanelLinkService.java
index ddb7d29fa1..609eb65c1e 100644
--- a/backend/src/main/java/io/dataease/service/panel/PanelLinkService.java
+++ b/backend/src/main/java/io/dataease/service/panel/PanelLinkService.java
@@ -9,10 +9,12 @@ import io.dataease.base.domain.PanelGroupWithBLOBs;
 import io.dataease.base.domain.PanelLink;
 import io.dataease.base.mapper.PanelGroupMapper;
 import io.dataease.base.mapper.PanelLinkMapper;
+import io.dataease.base.mapper.ext.ExtPanelLinkMapper;
 import io.dataease.commons.utils.ServletUtils;
 import io.dataease.controller.ResultHolder;
 import io.dataease.controller.request.panel.link.EnablePwdRequest;
 import io.dataease.controller.request.panel.link.LinkRequest;
+import io.dataease.controller.request.panel.link.OverTimeRequest;
 import io.dataease.controller.request.panel.link.PasswordRequest;
 import io.dataease.dto.panel.link.GenerateDto;
 import org.apache.commons.lang3.ObjectUtils;
@@ -45,6 +47,9 @@ public class PanelLinkService {
     @Resource
     private PanelGroupMapper panelGroupMapper;
 
+    @Resource
+    private ExtPanelLinkMapper extPanelLinkMapper;
+
     public void changeValid(LinkRequest request){
         PanelLink po = new PanelLink();
         po.setResourceId(request.getResourceId());
@@ -66,6 +71,14 @@ public class PanelLinkService {
         mapper.updateByPrimaryKeySelective(po);
     }
 
+    public void overTime(OverTimeRequest request) {
+        /* PanelLink po = new PanelLink();
+        po.setResourceId(request.getResourceId());
+        po.setOverTime(request.getOverTime());
+        mapper.updateByPrimaryKeySelective(po); */
+        extPanelLinkMapper.updateOverTime(request);
+    }
+
     public PanelLink findOne(String resourceId){
         PanelLink panelLink = mapper.selectByPrimaryKey(resourceId);
         return panelLink;
@@ -123,6 +136,7 @@ public class PanelLinkService {
         result.setEnablePwd(linl.getEnablePwd());
         result.setPwd(linl.getPwd());
         result.setUri(baseUrl+buildLinkParam(linl.getResourceId()));
+        result.setOverTime(linl.getOverTime());
         return result;
     }
 
@@ -144,6 +158,14 @@ public class PanelLinkService {
         return verify;
     }
 
+    // 验证链接是否过期
+    public Boolean isExpire(PanelLink panelLink) {
+        if (ObjectUtils.isEmpty(panelLink.getOverTime())) {
+            return false;
+        }
+        return System.currentTimeMillis() > panelLink.getOverTime();        
+    }
+
     public boolean validatePwd(PasswordRequest request) throws Exception {
         String password = decryptParam(request.getPassword());
         String resourceId = request.getResourceId();
diff --git a/backend/src/main/resources/db/migration/V27__de1.4.sql b/backend/src/main/resources/db/migration/V27__de1.4.sql
index ff0edde3c0..5a2d140e1c 100644
--- a/backend/src/main/resources/db/migration/V27__de1.4.sql
+++ b/backend/src/main/resources/db/migration/V27__de1.4.sql
@@ -1,3 +1,7 @@
 ALTER TABLE `chart_view` ADD COLUMN `render` varchar(50)  COMMENT '视图渲染方式' AFTER `type`;
 UPDATE `chart_view` SET `render` = 'echarts' WHERE `type` != 'liquid';
 UPDATE `chart_view` SET `render` = 'antv' WHERE `type` = 'liquid';
+
+
+
+ALTER TABLE `panel_link` ADD COLUMN `over_time` bigint(13) NULL DEFAULT NULL COMMENT '有效截止时间' AFTER `pwd`;
diff --git a/backend/src/main/resources/generatorConfig.xml b/backend/src/main/resources/generatorConfig.xml
index ade934dfaf..77eee6083d 100644
--- a/backend/src/main/resources/generatorConfig.xml
+++ b/backend/src/main/resources/generatorConfig.xml
@@ -65,7 +65,7 @@
         <!--要生成的数据库表 -->
 
 
-        <table tableName="chart_view"/>
+        <table tableName="panel_link"/>
 
 <!--        <table tableName="sys_dict_item"/>-->
 <!--        <table tableName="dataset_table_field"/>-->
diff --git a/frontend/package.json b/frontend/package.json
index 6aeade1894..e867c675c2 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -22,7 +22,7 @@
     "core-js": "^2.6.5",
     "echarts": "^5.0.1",
     "element-resize-detector": "^1.2.3",
-    "element-ui": "2.13.0",
+    "element-ui": "2.15.6",
     "file-save": "^0.2.0",
     "file-saver": "^2.0.5",
     "fit2cloud-ui": "1.5.0-beta.0",
diff --git a/frontend/src/api/link/index.js b/frontend/src/api/link/index.js
index fd637069d0..b7884dd916 100644
--- a/frontend/src/api/link/index.js
+++ b/frontend/src/api/link/index.js
@@ -26,6 +26,14 @@ export function setPwd(data) {
   })
 }
 
+export function setOverTime(data) {
+  return request({
+    url: 'api/link/resetOverTime',
+    method: 'post',
+    data
+  })
+}
+
 export function switchValid(data) {
   return request({
     url: 'api/link/switchLink',
diff --git a/frontend/src/lang/en.js b/frontend/src/lang/en.js
index 7ed129df3f..8f5e667022 100644
--- a/frontend/src/lang/en.js
+++ b/frontend/src/lang/en.js
@@ -1180,6 +1180,8 @@ export default {
     passwd_protect: 'Password Protect',
     link: 'Link',
     link_share: 'Share Link',
+    over_time: 'Over time',
+    link_expire: 'Link is expire',
     link_share_desc: 'After opening the link, anyone can access the dashboard through this link.',
     share: 'Share',
     datalist: 'Chart List',
diff --git a/frontend/src/lang/tw.js b/frontend/src/lang/tw.js
index 5782cb9485..860a748b81 100644
--- a/frontend/src/lang/tw.js
+++ b/frontend/src/lang/tw.js
@@ -1183,6 +1183,8 @@ export default {
     passwd_protect: '密碼保護',
     link: '鏈接',
     link_share: '鏈接分享',
+    over_time: '有效期',
+    link_expire: '鏈接已過期！',
     link_share_desc: '開啓鏈接後，任何人可通過此鏈接訪問儀表板。',
     share: '分享',
     datalist: '視圖列表',
@@ -1535,6 +1537,23 @@ export default {
   deyear: {
     label: '年份',
     placeholder: '請選擇年份'
+  },
+  deshowdate: {
+    label: '時間',
+    show_week: '顯示星期',
+    show_date: '顯示日期',
+    time_format: '時間格式',
+    date_format: '日期格式',
+    custom: '自定義格式',
+    open_mode: '展示風格',
+    m_default: '簡單風格',
+    m_elec: '電子時鐘',
+    m_simple: '簡單錶盤',
+    m_complex: '複雜錶盤',
+    select_openMode: '請選擇展示風格',
+    select_time_format: '請選擇時間各式',
+    select_date_format: '請選擇日期格式'
+
   }
 }
 
diff --git a/frontend/src/lang/zh.js b/frontend/src/lang/zh.js
index 230926a63a..273602a890 100644
--- a/frontend/src/lang/zh.js
+++ b/frontend/src/lang/zh.js
@@ -1187,6 +1187,8 @@ export default {
     copy_short_link_passwd: '复制短链接及密码',
     passwd_protect: '密码保护',
     link: '链接',
+    over_time: '有效期',
+    link_expire: '链接已过期！',
     link_share: '链接分享',
     link_share_desc: '开启链接后，任何人可通过此链接访问仪表板。',
     share: '分享',
@@ -1558,7 +1560,7 @@ export default {
     m_complex: '复杂表盘',
     select_openMode: '请选择展示风格',
     select_time_format: '请选择时间格式',
-    select_date_format: '请选择时间格式'
+    select_date_format: '请选择日期格式'
 
   }
 }
diff --git a/frontend/src/link/link.js b/frontend/src/link/link.js
index 420cb45093..4999c9d1f3 100644
--- a/frontend/src/link/link.js
+++ b/frontend/src/link/link.js
@@ -9,7 +9,7 @@ import '@/components/canvas/custom-component' // 注册自定义组件
 import widgets from '@/components/widget'
 import * as echarts from 'echarts'
 import UmyUi from 'umy-ui'
-
+import '@/utils/DateUtil'
 Vue.use(UmyUi)
 Vue.prototype.$echarts = echarts
 Vue.config.productionTip = false
diff --git a/frontend/src/views/link/generate/index.vue b/frontend/src/views/link/generate/index.vue
index 61d1c68099..1f3ddc0c66 100644
--- a/frontend/src/views/link/generate/index.vue
+++ b/frontend/src/views/link/generate/index.vue
@@ -2,7 +2,7 @@
   <div>
     <el-form ref="createOrganization" inline :model="form" size="small" label-width="80px">
 
-      <el-form-item :label="$t('panel.link_share')">
+      <el-form-item ref="form" :label="$t('panel.link_share')">
         <el-switch
           v-model="valid"
           style="width: 370px;"
@@ -22,6 +22,19 @@
         />
       </el-form-item>
 
+      <el-form-item v-if="valid" :label="$t('panel.over_time')">
+        <el-date-picker
+          v-model="form.overTime"
+          type="datetime"
+          placeholder="选择日期时间"
+          align="right"
+          value-format="timestamp"
+          :picker-options="pickerOptions"
+          default-time="23:59:59"
+          @change="resetOverTime"
+        />
+      </el-form-item>
+
       <el-form-item v-if="valid" label=" ">
         <el-checkbox v-model="form.enablePwd" @change="resetEnablePwd">{{ $t('panel.passwd_protect') }}  </el-checkbox>
 
@@ -45,7 +58,7 @@
 </template>
 <script>
 
-import { loadGenerate, setPwd, switchValid, switchEnablePwd, shortUrl } from '@/api/link'
+import { loadGenerate, setPwd, switchValid, switchEnablePwd, shortUrl, setOverTime } from '@/api/link'
 import { encrypt, decrypt } from '@/utils/rsaEncrypt'
 export default {
 
@@ -65,7 +78,28 @@ export default {
       valid: false,
       form: {},
       newUrl: null,
-      defaultForm: { enablePwd: false, pwd: null, uri: null }
+      defaultForm: { enablePwd: false, pwd: null, uri: null },
+      pickerOptions: {
+        disabledDate: time => {
+          return time < (Date.now() - 8.64e7)
+        },
+        shortcuts: [{
+          text: '一天',
+          onClick: function(picker) {
+            picker.$emit('pick', this.limitDate('day'))
+          }.bind(this)
+        }, {
+          text: '一周',
+          onClick: (picker) => {
+            picker.$emit('pick', this.limitDate('week'))
+          }
+        }, {
+          text: '一月',
+          onClick: (picker) => {
+            picker.$emit('pick', this.limitDate('month'))
+          }
+        }]
+      }
     }
   },
   computed: {
@@ -80,12 +114,14 @@ export default {
   methods: {
     currentGenerate() {
       loadGenerate(this.resourceId).then(res => {
-        const { valid, enablePwd, pwd, uri } = res.data
+        const { valid, enablePwd, pwd, uri, overTime } = res.data
         this.valid = valid
         this.form.enablePwd = enablePwd
         this.form.uri = uri ? (this.origin + uri) : uri
         // 返回的密码是共钥加密后的 所以展示需要私钥解密一波
         pwd && (this.form.pwd = decrypt(pwd))
+        /* overTime && (this.form.overTime = overTime) */
+        overTime && (this.$set(this.form, 'overTime', overTime))
         this.requestShort()
       })
     },
@@ -122,6 +158,16 @@ export default {
         value && !this.form.pwd && this.resetPwd()
       })
     },
+    resetOverTime(value) {
+      const param = {
+        resourceId: this.resourceId,
+        overTime: value
+      }
+      setOverTime(param).then(res => {
+        // this.form.overTime = value
+        this.$forceUpdate()
+      })
+    },
 
     onCopy(e) {
     //   alert('You just copied: ' + e.text)
@@ -152,6 +198,33 @@ export default {
           this.newUrl = res.data
         }
       })
+    },
+
+    limitDate(type) {
+      const now = new Date()
+      const nowTime = now.getTime()
+      const oneDay = 24 * 60 * 60 * 1000
+
+      if (type === 'day') {
+        const tom = new Date(nowTime + oneDay)
+        return new Date(tom.format('yyyy-MM-dd') + ' 23:59:59')
+      }
+      if (type === 'week') {
+        const tom = new Date(nowTime + oneDay * 7)
+        return new Date(tom.format('yyyy-MM-dd') + ' 23:59:59')
+      }
+      if (type === 'month') {
+        const result = new Date()
+        const curMonth = now.getMonth() + 1
+        if (curMonth === 12) {
+          result.setYear(now.getYear() + 1)
+          result.setMonth(0)
+        } else {
+          result.setMonth(curMonth)
+        }
+        return new Date(result.format('yyyy-MM-dd') + ' 23:59:59')
+      }
+      return null
     }
   }
 }
diff --git a/frontend/src/views/link/index.vue b/frontend/src/views/link/index.vue
index 85a6502241..6b35bffe81 100644
--- a/frontend/src/views/link/index.vue
+++ b/frontend/src/views/link/index.vue
@@ -3,6 +3,7 @@
     <link-error v-if="showIndex===0" :resource-id="resourceId" />
     <link-pwd v-if="showIndex===1" :resource-id="resourceId" @fresh-token="refreshToken" />
     <link-view v-if="showIndex===2" :resource-id="resourceId" />
+    <link-expire v-if="showIndex===3" :resource-id="resourceId" />
   </div>
 </template>
 <script>
@@ -11,9 +12,10 @@ import { validate } from '@/api/link'
 import LinkView from './view'
 import LinkError from './error'
 import LinkPwd from './pwd'
+import LinkExpire from './overtime'
 export default {
   components: {
-    LinkError, LinkPwd, LinkView
+    LinkError, LinkPwd, LinkView, LinkExpire
   },
   data() {
     return {
@@ -31,7 +33,7 @@ export default {
     loadInit() {
       this.link = getQueryVariable(this.PARAMKEY)
       validate({ link: this.link }).then(res => {
-        const { resourceId, valid, enablePwd, passPwd } = res.data
+        const { resourceId, valid, enablePwd, passPwd, expire } = res.data
         this.resourceId = resourceId
         // 如果链接无效 直接显示无效页面
         if (!valid || !resourceId) {
@@ -39,6 +41,11 @@ export default {
           return
         }
 
+        if (expire) {
+          this.showExpire()
+          return
+        }
+
         if (enablePwd && !passPwd) {
           this.showPwd()
           return
@@ -64,6 +71,9 @@ export default {
     // 显示仪表板
     showView() {
       this.showIndex = 2
+    },
+    showExpire() {
+      this.showIndex = 3
     }
   }
 }
diff --git a/frontend/src/views/link/overtime/index.vue b/frontend/src/views/link/overtime/index.vue
new file mode 100644
index 0000000000..d5f7712187
--- /dev/null
+++ b/frontend/src/views/link/overtime/index.vue
@@ -0,0 +1,3 @@
+<template>
+  <el-empty :description="$t('panel.link_expire')" />
+</template>

From 78f5a9892a9934bd3083d1c2c2c6a2dc3e021827 Mon Sep 17 00:00:00 2001
From: junjie <junjie.xia@fit2cloud.com>
Date: Wed, 20 Oct 2021 17:12:09 +0800
Subject: [PATCH 5/5] =?UTF-8?q?feat:=E8=AF=A6=E6=83=85icon?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/views/chart/view/ChartEdit.vue   | 9 ++++++++-
 frontend/src/views/dataset/data/ViewTable.vue | 9 ++++++++-
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/frontend/src/views/chart/view/ChartEdit.vue b/frontend/src/views/chart/view/ChartEdit.vue
index 90f5c8c9bf..ce5f124960 100644
--- a/frontend/src/views/chart/view/ChartEdit.vue
+++ b/frontend/src/views/chart/view/ChartEdit.vue
@@ -12,7 +12,8 @@
         @hide="hideTab"
       >
         <dataset-chart-detail type="chart" :data="view" :tab-status="tabStatus" />
-        <svg-icon class="title-text" slot="reference" icon-class="more_v" style="cursor: pointer;" />
+        <!--        <svg-icon slot="reference" class="title-text" icon-class="more_v" style="cursor: pointer;" />-->
+        <i slot="reference" class="el-icon-warning icon-class" style="margin-left: 4px;cursor: pointer;" />
       </el-popover>
       <span style="float: right;line-height: 40px;">
         <!--        <el-button v-if="hasDataPermission('manage',param.privileges)" size="mini" @click="changeDs">-->
@@ -1868,5 +1869,11 @@ export default {
       background-color: var(--MainBG) !important;
       border-color: var(--TableBorderColor) !important;
   }
+  .icon-class{
+    color:#6c6c6c;
+  }
+  .blackTheme .icon-class{
+    color: #cccccc;
+  }
 
 </style>
diff --git a/frontend/src/views/dataset/data/ViewTable.vue b/frontend/src/views/dataset/data/ViewTable.vue
index e8e6ba1834..584e475d50 100644
--- a/frontend/src/views/dataset/data/ViewTable.vue
+++ b/frontend/src/views/dataset/data/ViewTable.vue
@@ -13,7 +13,8 @@
         @hide="hideTab"
       >
         <dataset-chart-detail type="dataset" :data="table" :tab-status="tabStatus" />
-        <svg-icon slot="reference" class="title-text" icon-class="more_v" style="cursor: pointer;" />
+        <!--        <svg-icon slot="reference" class="title-text" icon-class="more_v" style="cursor: pointer;" />-->
+        <i slot="reference" class="el-icon-warning icon-class" style="margin-left: 4px;cursor: pointer;font-size: 14px;" />
       </el-popover>
       <el-row v-if="hasDataPermission('manage',param.privileges)" style="float: right">
         <el-dropdown v-if="table.type ==='excel'" style="margin-right: 10px;" size="small" trigger="click" @command="clickEditExcel">
@@ -227,4 +228,10 @@ export default {
   .form-item {
     margin-bottom: 6px;
   }
+  .icon-class{
+    color:#6c6c6c;
+  }
+  .blackTheme .icon-class{
+    color: #cccccc;
+  }
 </style>