From 7eac3fa0a6a68a3ec578e03d7a59d0ce14704e88 Mon Sep 17 00:00:00 2001
From: fit2cloud-chenyw <yawen.chen@fit2cloud.com>
Date: Tue, 20 Sep 2022 16:24:50 +0800
Subject: [PATCH] =?UTF-8?q?style(=E8=A7=86=E5=9B=BE):=20=E4=B8=8B=E9=92=BB?=
 =?UTF-8?q?=E5=8C=BA=E5=9F=9F=E4=BB=A5=E5=8F=8A=E5=9C=B0=E5=9B=BE=E7=BC=A9?=
 =?UTF-8?q?=E6=94=BE=E6=96=87=E5=AD=97=E8=B7=9F=E9=9A=8F=E8=A7=86=E5=9B=BE?=
 =?UTF-8?q?=E8=83=8C=E6=99=AF=E6=94=B9=E5=8F=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../canvas/custom-component/UserView.vue      |  8 ++--
 frontend/src/views/background/index.vue       |  4 +-
 .../views/chart/components/ChartComponent.vue | 18 +++++++
 frontend/src/views/chart/view/DrillPath.vue   | 48 ++++++++++++++++++-
 4 files changed, 70 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/canvas/custom-component/UserView.vue b/frontend/src/components/canvas/custom-component/UserView.vue
index e658c49cd7..68a044312f 100644
--- a/frontend/src/components/canvas/custom-component/UserView.vue
+++ b/frontend/src/components/canvas/custom-component/UserView.vue
@@ -109,7 +109,7 @@
       @onJumpClick="jumpClick"
     />
     <div style="position: absolute;left: 8px;bottom:8px;">
-      <drill-path :drill-filters="drillFilters" @onDrillJump="drillJump" />
+      <drill-path :drill-filters="drillFilters" :theme-style="element.commonBackground" @onDrillJump="drillJump" />
     </div>
   </div>
 </template>
@@ -582,14 +582,14 @@ export default {
             this.chart['position'] = this.inTab ? 'tab' : 'panel'
             // 记录当前数据
             this.panelViewDetailsInfo[id] = JSON.stringify(this.chart)
-            if(this.element.needAdaptor){
+            if (this.element.needAdaptor) {
               const customStyleObj = JSON.parse(this.chart.customStyle)
               const customAttrObj = JSON.parse(this.chart.customAttr)
               adaptCurTheme(customStyleObj, customAttrObj)
               this.chart.customStyle = JSON.stringify(customStyleObj)
               this.chart.customAttr = JSON.stringify(customAttrObj)
-              viewEditSave(this.panelInfo.id,{ id: this.chart.id, customStyle: this.chart.customStyle, customAttr: this.chart.customAttr })
-              this.$store.commit('adaptorStatusDisable',this.element.id)
+              viewEditSave(this.panelInfo.id, { id: this.chart.id, customStyle: this.chart.customStyle, customAttr: this.chart.customAttr })
+              this.$store.commit('adaptorStatusDisable', this.element.id)
             }
             this.sourceCustomAttrStr = this.chart.customAttr
             this.sourceCustomStyleStr = this.chart.customStyle
diff --git a/frontend/src/views/background/index.vue b/frontend/src/views/background/index.vue
index 5b1ff9de34..9474251b10 100644
--- a/frontend/src/views/background/index.vue
+++ b/frontend/src/views/background/index.vue
@@ -80,7 +80,7 @@
           </el-col>
           <el-col :span="20" class="main-row">
             <el-row v-for="(value, key) in BackgroundShowMap" :key="key">
-<!--              <el-col :span="24"><span>{{ key }}</span> </el-col>-->
+
               <el-col
                 v-for="item in value"
                 :key="item.id"
@@ -132,7 +132,7 @@
 import { queryBackground } from '@/api/background/background'
 import BackgroundItem from '@/views/background/BackgroundItem'
 import { mapState } from 'vuex'
-import {deepCopy, imgUrlTrans} from '@/components/canvas/utils/utils'
+import { deepCopy, imgUrlTrans } from '@/components/canvas/utils/utils'
 import { COLOR_PANEL } from '@/views/chart/chart/chart'
 import { uploadFileResult } from '@/api/staticResource/staticResource'
 import { COMMON_BACKGROUND_NONE } from '@/components/canvas/custom-component/component-list'
diff --git a/frontend/src/views/chart/components/ChartComponent.vue b/frontend/src/views/chart/components/ChartComponent.vue
index 7c6afd991e..2593b9d237 100644
--- a/frontend/src/views/chart/components/ChartComponent.vue
+++ b/frontend/src/views/chart/components/ChartComponent.vue
@@ -220,6 +220,15 @@ 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') {
@@ -310,6 +319,15 @@ 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') {
diff --git a/frontend/src/views/chart/view/DrillPath.vue b/frontend/src/views/chart/view/DrillPath.vue
index e1f8a70ba6..825f889e06 100644
--- a/frontend/src/views/chart/view/DrillPath.vue
+++ b/frontend/src/views/chart/view/DrillPath.vue
@@ -1,34 +1,78 @@
 <template>
   <div v-if="drillFilters && drillFilters.length > 0">
     <el-breadcrumb separator-class="el-icon-arrow-right" class="drill-style">
-      <el-breadcrumb-item class="drill-item" @click.native="drillJump(0)">{{ $t('commons.all') }}</el-breadcrumb-item>
-      <el-breadcrumb-item v-for="(filter,index) in drillFilters" :key="index" class="drill-item" @click.native="drillJump(index + 1)">{{ filter.value[0] }}</el-breadcrumb-item>
+      <el-breadcrumb-item class="drill-item" @click.native="drillJump(0)">
+        <span :style="{'color': textColor}">{{ $t('commons.all') }}</span>
+      </el-breadcrumb-item>
+      <el-breadcrumb-item v-for="(filter,index) in drillFilters" :key="index" class="drill-item" @click.native="drillJump(index + 1)">
+        <span :style="{'color': textColor}">{{ filter.value[0] }}</span>
+      </el-breadcrumb-item>
     </el-breadcrumb>
   </div>
 </template>
 
 <script>
+import { reverseColor } from '@/views/chart/chart/common/common'
 export default {
   name: 'DrillPath',
   props: {
     drillFilters: {
       type: Array,
       default: () => []
+    },
+    themeStyle: {
+      type: Object,
+      required: false,
+      default: null
     }
   },
   data() {
     return {
+      textColor: null
     }
   },
   watch: {
+    'themeStyle.commonBackground.color'() {
+      this.loadThemeStyle()
+    },
+    'themeStyle.color'() {
+      this.loadThemeStyle()
+    }
   },
   mounted() {
   },
+  created() {
+    this.loadThemeStyle()
+  },
   methods: {
     drillJump(index) {
       if (index < this.drillFilters.length) {
         this.$emit('onDrillJump', index)
       }
+    },
+    loadThemeStyle() {
+      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.textColor = reverseValue
+          } else {
+            this.textColor = null
+          }
+        }
+        if (themeStyle && themeStyle.backgroundColorSelect) {
+          const panelColor = themeStyle.color
+          if (panelColor !== '#FFFFFF') {
+            const reverseValue = reverseColor(panelColor)
+            this.textColor = reverseValue
+          } else {
+            this.textColor = null
+          }
+        }
+      }
     }
   }
 }