From 3386b1dd7384ab7200e7d290168207e46eef3de5 Mon Sep 17 00:00:00 2001
From: junjie <junjie.xia@fit2cloud.com>
Date: Mon, 16 Aug 2021 16:23:57 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E8=A7=86=E5=9B=BE=E6=94=AF=E6=8C=81?=
 =?UTF-8?q?=E7=AE=80=E5=8D=95=E9=A2=9C=E8=89=B2=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/lang/en.js                       |  4 +-
 frontend/src/lang/tw.js                       |  4 +-
 frontend/src/lang/zh.js                       |  4 +-
 .../components/shape-attr/ColorSelector.vue   | 90 +++++++++++++++++--
 4 files changed, 91 insertions(+), 11 deletions(-)

diff --git a/frontend/src/lang/en.js b/frontend/src/lang/en.js
index 4d44955432..5610bfa22e 100644
--- a/frontend/src/lang/en.js
+++ b/frontend/src/lang/en.js
@@ -840,7 +840,9 @@ export default {
     bubble_symbol: 'Shape',
     gap_width: 'Gap Width',
     width: 'Width',
-    height: 'Height'
+    height: 'Height',
+    system_case: 'System',
+    custom_case: 'Custom'
   },
   dataset: {
     sheet_warn: 'There are multiple sheet pages, and the first one is extracted by default',
diff --git a/frontend/src/lang/tw.js b/frontend/src/lang/tw.js
index de5f09c092..db021d0347 100644
--- a/frontend/src/lang/tw.js
+++ b/frontend/src/lang/tw.js
@@ -840,7 +840,9 @@ export default {
     bubble_symbol: '圖形',
     gap_width: '間隔',
     width: '寬度',
-    height: '高度'
+    height: '高度',
+    system_case: '系統方案',
+    custom_case: '自定義'
   },
   dataset: {
     sheet_warn: '有多個sheet頁面，默認抽取第一個',
diff --git a/frontend/src/lang/zh.js b/frontend/src/lang/zh.js
index 555aaad834..5589c11340 100644
--- a/frontend/src/lang/zh.js
+++ b/frontend/src/lang/zh.js
@@ -840,7 +840,9 @@ export default {
     bubble_symbol: '图形',
     gap_width: '间隔',
     width: '宽度',
-    height: '高度'
+    height: '高度',
+    system_case: '系统方案',
+    custom_case: '自定义'
   },
   dataset: {
     sheet_warn: '有多个 Sheet 页，默认抽取第一个',
diff --git a/frontend/src/views/chart/components/shape-attr/ColorSelector.vue b/frontend/src/views/chart/components/shape-attr/ColorSelector.vue
index f397633982..e3f270a9ef 100644
--- a/frontend/src/views/chart/components/shape-attr/ColorSelector.vue
+++ b/frontend/src/views/chart/components/shape-attr/ColorSelector.vue
@@ -4,14 +4,46 @@
       <el-form ref="colorForm" :model="colorForm" label-width="80px" size="mini" :disabled="param && !hasDataPermission('manage',param.privileges)">
         <div v-if="sourceType==='view' || sourceType==='panelEchart'">
           <el-form-item v-show="chart.type && !chart.type.includes('table') && !chart.type.includes('text')" :label="$t('chart.color_case')" class="form-item">
-            <el-select v-model="colorForm.value" :placeholder="$t('chart.pls_slc_color_case')" size="mini" @change="changeColorCase">
-              <el-option v-for="option in colorCases" :key="option.value" :label="option.name" :value="option.value" style="display: flex;align-items: center;">
-                <div style="float: left">
-                  <span v-for="(c,index) in option.colors" :key="index" :style="{width: '20px',height: '20px',float: 'left',backgroundColor: c}" />
+            <el-popover
+              placement="bottom"
+              width="400"
+              trigger="click"
+              :disabled="param && !hasDataPermission('manage',param.privileges)"
+            >
+              <div style="padding: 6px 10px;">
+                <div>
+                  <span class="color-label">{{ $t('chart.system_case') }}</span>
+                  <el-select v-model="colorForm.value" :placeholder="$t('chart.pls_slc_color_case')" size="mini" @change="changeColorCase">
+                    <el-option v-for="option in colorCases" :key="option.value" :label="option.name" :value="option.value" style="display: flex;align-items: center;">
+                      <div style="float: left">
+                        <span v-for="(c,index) in option.colors" :key="index" :style="{width: '20px',height: '20px',float: 'left',backgroundColor: c}" />
+                      </div>
+                      <span style="margin-left: 4px;">{{ option.name }}</span>
+                    </el-option>
+                  </el-select>
+                  <el-button size="mini" type="text" style="margin-left: 2px;" @click="resetCustomColor">{{ $t('commons.reset') }}</el-button>
                 </div>
-                <span style="margin-left: 4px;">{{ option.name }}</span>
-              </el-option>
-            </el-select>
+                <div style="display: flex;align-items: center;margin-top: 10px;">
+                  <span class="color-label">{{ $t('chart.custom_case') }}</span>
+                  <span>
+                    <el-radio-group v-model="customColor" class="color-type">
+                      <el-radio v-for="(c,index) in colorForm.colors" :key="index" :label="c" style="padding: 2px;" @change="switchColor(index)">
+                        <span :style="{width: '20px',height: '20px',display:'inline-block',backgroundColor: c}" />
+                      </el-radio>
+                    </el-radio-group>
+                  </span>
+                </div>
+                <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" />
+                  </span>
+                </div>
+              </div>
+              <div slot="reference" style="cursor: pointer;margin-top: 2px;">
+                <span v-for="(c,index) in colorForm.colors" :key="index" :style="{width: '20px',height: '20px',display:'inline-block',backgroundColor: c}" />
+              </div>
+            </el-popover>
           </el-form-item>
 
           <el-form-item v-show="(chart.type && chart.type.includes('text')) || sourceType==='panelTable'" :label="$t('chart.dimension_color')" class="form-item">
@@ -149,12 +181,16 @@ export default {
           colors: ['#00a3af', '#4da798', '#57baaa', '#62d0bd', '#6ee4d0', '#86e7d6', '#aeede1', '#bde1e6', '#e5e5e5']
         }
       ],
-      colorForm: JSON.parse(JSON.stringify(DEFAULT_COLOR_CASE))
+      colorForm: JSON.parse(JSON.stringify(DEFAULT_COLOR_CASE)),
+      customColor: null,
+      colorIndex: 0
     }
   },
   watch: {
     'chart': {
       handler: function() {
+        this.customColor = null
+        this.colorIndex = 0
         this.init()
       }
     }
@@ -172,6 +208,8 @@ export default {
       val.value = items[0].value
       val.colors = items[0].colors
       this.$emit('onColorChange', val)
+      this.customColor = null
+      this.colorIndex = 0
     },
     init() {
       const chart = JSON.parse(JSON.stringify(this.chart))
@@ -184,8 +222,26 @@ export default {
         }
         if (customAttr.color) {
           this.colorForm = customAttr.color
+          if (!this.customColor) {
+            this.customColor = this.colorForm.colors[0]
+            this.colorIndex = 0
+          }
         }
       }
+    },
+
+    switchColor(index) {
+      this.colorIndex = index
+    },
+    switchColorCase() {
+      this.colorForm.colors[this.colorIndex] = this.customColor
+      this.$emit('onColorChange', this.colorForm)
+    },
+
+    resetCustomColor() {
+      this.customColor = this.colorForm.colors[0]
+      this.colorIndex = 0
+      this.changeColorCase()
     }
   }
 }
@@ -220,4 +276,22 @@ export default {
     cursor: pointer;
     z-index: 1003;
   }
+  .color-label{
+    display: inline-block;
+    width: 60px;
+  }
+
+  .color-type>>>.el-radio__input{
+    display: none;
+  }
+  .el-radio{
+    margin:0 4px 0 0!important;
+  }
+  .el-radio>>>.el-radio__label{
+    padding-left: 0;
+  }
+
+  .el-radio.is-checked{
+    border: 1px solid #0a7be0;
+  }
 </style>