From f735110794a45db056ffce48b97de2c3d0615965 Mon Sep 17 00:00:00 2001
From: fit2cloud-chenyw <yawen.chen@fit2cloud.com>
Date: Thu, 6 Oct 2022 15:53:30 +0800
Subject: [PATCH] =?UTF-8?q?fix(=E8=A7=86=E5=9B=BE-=E5=9C=B0=E5=9B=BE):=20?=
 =?UTF-8?q?=E6=89=8B=E6=9F=84=E6=96=87=E5=AD=97=E9=A2=9C=E8=89=B2=E6=B2=A1?=
 =?UTF-8?q?=E6=9C=89=E8=B7=9F=E9=9A=8F=E4=BB=AA=E8=A1=A8=E6=9D=BF=E8=83=8C?=
 =?UTF-8?q?=E6=99=AF=E5=8F=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/views/chart/chart/map/map.js     |  9 ++--
 .../views/chart/components/ChartComponent.vue | 50 +++++++++++--------
 2 files changed, 33 insertions(+), 26 deletions(-)

diff --git a/frontend/src/views/chart/chart/map/map.js b/frontend/src/views/chart/chart/map/map.js
index 95f22ab71d..a30bd8b8aa 100644
--- a/frontend/src/views/chart/chart/map/map.js
+++ b/frontend/src/views/chart/chart/map/map.js
@@ -1,5 +1,5 @@
 // import { hexColorToRGBA } from '@/views/chart/chart/util'
-import { componentStyle, reverseColor } from '../common/common'
+import { componentStyle } from '../common/common'
 import { BASE_ECHARTS_SELECT, DEFAULT_TOOLTIP } from '@/views/chart/chart/chart'
 
 export function baseMapOption(chart_option, chart, themeStyle, curAreaCode) {
@@ -81,10 +81,9 @@ export function baseMapOption(chart_option, chart, themeStyle, curAreaCode) {
         chart_option.visualMap.inRange.color = customAttr.color.colors
         chart_option.visualMap.inRange.colorAlpha = customAttr.color.alpha / 100
       }
-      if (themeStyle && themeStyle.backgroundColorSelect) {
-        const panelColor = themeStyle.color
-        const reverseValue = reverseColor(panelColor)
-        chart_option.visualMap.textStyle = { color: reverseValue }
+      if (themeStyle) {
+        
+        chart_option.visualMap.textStyle = { color: themeStyle }
       }
       for (let i = 0; i < valueArr.length; i++) {
         const y = valueArr[i]
diff --git a/frontend/src/views/chart/components/ChartComponent.vue b/frontend/src/views/chart/components/ChartComponent.vue
index e65897ed6d..2604cc3c17 100644
--- a/frontend/src/views/chart/components/ChartComponent.vue
+++ b/frontend/src/views/chart/components/ChartComponent.vue
@@ -82,6 +82,7 @@ import {
 } from '@/api/map/map'
 import ViewTrackBar from '@/components/canvas/components/Editor/ViewTrackBar'
 import { reverseColor } from '../chart/common/common'
+import { mapState } from 'vuex'
 export default {
   name: 'ChartComponent',
   components: {
@@ -148,7 +149,10 @@ export default {
   computed: {
     trackBarStyleTime() {
       return this.trackBarStyle
-    }
+    },
+    ...mapState([
+      'canvasStyleData'
+    ])
   },
   watch: {
     chart: {
@@ -165,7 +169,7 @@ export default {
         this.preDraw()
       }
     },
-    'themeStyle.commonBackground.color'(value, old) {
+    'themeStyle.backgroundColorSelect'(value, old) {
       if (value !== old) {
         this.preDraw()
       }
@@ -230,15 +234,7 @@ export default {
       let themeStyle = null
       if (this.themeStyle) {
         themeStyle = JSON.parse(JSON.stringify(this.themeStyle))
-        if (themeStyle && themeStyle.commonBackground) {
-          const viewBGColor = themeStyle.commonBackground.color
-          if (viewBGColor !== '#FFFFFF') {
-            const reverseValue = reverseColor(viewBGColor)
-            this.buttonTextColor = reverseValue
-          } else {
-            this.buttonTextColor = null
-          }
-        }
+        
         if (themeStyle && themeStyle.backgroundColorSelect) {
           const panelColor = themeStyle.color
           if (panelColor !== '#FFFFFF') {
@@ -247,6 +243,16 @@ export default {
           } else {
             this.buttonTextColor = null
           }
+        } else if(this.canvasStyleData.openCommonStyle && this.canvasStyleData.panel.backgroundType === 'color') {
+          const panelColor = this.canvasStyleData.panel.color
+          if (panelColor !== '#FFFFFF') {
+            const reverseValue = reverseColor(panelColor)
+            this.buttonTextColor = reverseValue
+          } else {
+            this.buttonTextColor = null
+          }
+        } else {
+          this.buttonTextColor = null
         }
       }
     },
@@ -329,15 +335,7 @@ export default {
       let themeStyle = null
       if (this.themeStyle) {
         themeStyle = JSON.parse(JSON.stringify(this.themeStyle))
-        if (themeStyle && themeStyle.commonBackground) {
-          const viewBGColor = themeStyle.commonBackground.color
-          if (viewBGColor !== '#FFFFFF') {
-            const reverseValue = reverseColor(viewBGColor)
-            this.buttonTextColor = reverseValue
-          } else {
-            this.buttonTextColor = null
-          }
-        }
+        
         if (themeStyle && themeStyle.backgroundColorSelect) {
           const panelColor = themeStyle.color
           if (panelColor !== '#FFFFFF') {
@@ -346,9 +344,19 @@ export default {
           } else {
             this.buttonTextColor = null
           }
+        } else if(this.canvasStyleData.openCommonStyle && this.canvasStyleData.panel.backgroundType === 'color') {
+          const panelColor = this.canvasStyleData.panel.color
+          if (panelColor !== '#FFFFFF') {
+            const reverseValue = reverseColor(panelColor)
+            this.buttonTextColor = reverseValue
+          } else {
+            this.buttonTextColor = null
+          }
+        } else {
+          this.buttonTextColor = null
         }
       }
-      const chart_option = baseMapOption(base_json, chart, themeStyle, curAreaCode)
+      const chart_option = baseMapOption(base_json, chart, this.buttonTextColor, curAreaCode)
       this.myEcharts(chart_option)
       const opt = this.myChart.getOption()
       if (opt && opt.series) {