From 5fb8488519048eefac4fb941a8e8fcfe39fe4e66 Mon Sep 17 00:00:00 2001
From: fit2cloud-chenyw <yawen.chen@fit2cloud.com>
Date: Mon, 22 Aug 2022 04:54:40 -0400
Subject: [PATCH] =?UTF-8?q?feat(=E8=A7=86=E5=9B=BE-=E5=9C=B0=E5=9B=BE):=20?=
 =?UTF-8?q?=E5=9C=B0=E5=9B=BE=E8=BE=B9=E7=BA=BF=E9=A2=9C=E8=89=B2=E9=85=8D?=
 =?UTF-8?q?=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/lang/en.js                          |  1 +
 frontend/src/lang/tw.js                          |  1 +
 frontend/src/lang/zh.js                          |  3 ++-
 frontend/src/views/chart/chart/chart.js          | 16 +++++++++++++---
 frontend/src/views/chart/chart/map/map.js        |  3 +++
 frontend/src/views/chart/chart/util.js           |  3 ++-
 .../components/shape-attr/ColorSelector.vue      |  4 ++++
 7 files changed, 26 insertions(+), 5 deletions(-)

diff --git a/frontend/src/lang/en.js b/frontend/src/lang/en.js
index eae90eb142..2e1ed6677d 100644
--- a/frontend/src/lang/en.js
+++ b/frontend/src/lang/en.js
@@ -866,6 +866,7 @@ export default {
     color_technology: 'Technology',
     color_simple: 'Simple',
     not_alpha: 'Opacity',
+    area_border_color: 'Map border',
     size: 'Size',
     bar_width: 'Column Width',
     bar_gap: 'Column septum',
diff --git a/frontend/src/lang/tw.js b/frontend/src/lang/tw.js
index f720d8054e..32e58c6cf7 100644
--- a/frontend/src/lang/tw.js
+++ b/frontend/src/lang/tw.js
@@ -867,6 +867,7 @@ export default {
     color_technology: '科技',
     color_simple: '簡潔',
     not_alpha: '不透明度',
+    area_border_color: '地圖邊線',
     size: '大小',
     bar_width: '柱寬',
     bar_gap: '柱間隔',
diff --git a/frontend/src/lang/zh.js b/frontend/src/lang/zh.js
index ea70df3db7..c7c4776e1d 100644
--- a/frontend/src/lang/zh.js
+++ b/frontend/src/lang/zh.js
@@ -693,7 +693,7 @@ export default {
     edite_organization: '编辑组织'
   },
   system_parameter_setting: {
-    mailbox_service_settings: '邮件设置', 
+    mailbox_service_settings: '邮件设置',
     test_connection: '测试连接',
     SMTP_host: 'SMTP主机',
     basic_setting: '基础设置',
@@ -869,6 +869,7 @@ export default {
     color_technology: '科技',
     color_simple: '简洁',
     not_alpha: '不透明度',
+    area_border_color: '地图边线',
     size: '大小',
     bar_width: '柱宽',
     bar_gap: '柱间隔',
diff --git a/frontend/src/views/chart/chart/chart.js b/frontend/src/views/chart/chart/chart.js
index 7ad8ffe703..91de281b9b 100644
--- a/frontend/src/views/chart/chart/chart.js
+++ b/frontend/src/views/chart/chart/chart.js
@@ -23,7 +23,8 @@ export const DEFAULT_COLOR_CASE = {
   dimensionColor: '#000000',
   quotaColor: '#4E81BB',
   tableBorderColor: '#E6E7E4',
-  seriesColors: [] // 格式：{"name":"s1","color":"","isCustom":false}
+  seriesColors: [], // 格式：{"name":"s1","color":"","isCustom":false}
+  areaBorderColor: '#303133'
 }
 
 export const DEFAULT_COLOR_CASE_DARK = {
@@ -37,7 +38,8 @@ export const DEFAULT_COLOR_CASE_DARK = {
   dimensionColor: '#ffffff',
   quotaColor: '#4E81BB',
   tableBorderColor: '#CCCCCC',
-  seriesColors: [] // 格式：{"name":"s1","color":"","isCustom":false}
+  seriesColors: [], // 格式：{"name":"s1","color":"","isCustom":false}
+  areaBorderColor: '#EBEEF5'
 }
 export const DEFAULT_SIZE = {
   barDefault: true,
@@ -835,7 +837,15 @@ export const BASE_MAP = {
       type: 'map',
       map: 'MAP',
       roam: true,
-      data: []
+      data: [],
+      itemStyle: {
+        normal: {
+
+        },
+        emphasis: {
+
+        }
+      }
     }
   ]
 }
diff --git a/frontend/src/views/chart/chart/map/map.js b/frontend/src/views/chart/chart/map/map.js
index 0547b29a58..95f22ab71d 100644
--- a/frontend/src/views/chart/chart/map/map.js
+++ b/frontend/src/views/chart/chart/map/map.js
@@ -9,6 +9,9 @@ export function baseMapOption(chart_option, chart, themeStyle, curAreaCode) {
     customAttr = JSON.parse(chart.customAttr)
     if (customAttr.color) {
       chart_option.color = customAttr.color.colors
+      if (customAttr.color.areaBorderColor) {
+        chart_option.series[0].itemStyle.normal.borderColor = customAttr.color.areaBorderColor
+      }
     }
     // tooltip
     if (customAttr.tooltip) {
diff --git a/frontend/src/views/chart/chart/util.js b/frontend/src/views/chart/chart/util.js
index 912cb1005c..b44f3fa95a 100644
--- a/frontend/src/views/chart/chart/util.js
+++ b/frontend/src/views/chart/chart/util.js
@@ -2600,7 +2600,8 @@ export const TYPE_CONFIGS = [
       'color-selector': [
         'value',
         'custom',
-        'alpha'
+        'alpha',
+        'area-border-color'
       ],
       'label-selector': [
         'show',
diff --git a/frontend/src/views/chart/components/shape-attr/ColorSelector.vue b/frontend/src/views/chart/components/shape-attr/ColorSelector.vue
index ed1a587b69..493bf0d848 100644
--- a/frontend/src/views/chart/components/shape-attr/ColorSelector.vue
+++ b/frontend/src/views/chart/components/shape-attr/ColorSelector.vue
@@ -105,6 +105,10 @@
         <el-form-item v-show="showProperty('alpha')" :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="changeColorCase('alpha')" />
         </el-form-item>
+
+        <el-form-item v-show="showProperty('area-border-color') " :label="$t('chart.area_border_color')" class="form-item">
+          <el-color-picker v-model="colorForm.areaBorderColor" class="color-picker-style" :predefine="predefineColors" @change="changeColorCase('areaBorderColor')" />
+        </el-form-item>
       </el-form>
     </el-col>
   </div>