refactor(仪表板): 组件适配主题色变化 (#2752)

* refactor(仪表板): 主题色更换保留原标题显示方式 * refator(仪表板): 主题色切换，过滤组件默认颜色设置 * refator(仪表板): 主题色切换，适配tab组件 * refactor(仪表板): 符号地图适配主题变化 Co-authored-by: wangjiahao <1522128093@qq.com>
2022-08-01 17:53:58 +08:00 · 2022-08-01 17:53:58 +08:00 · bcfaf4d4e1
commit bcfaf4d4e1
parent 73cb6b3f46
7 changed files with 71 additions and 16 deletions
--- a/frontend/src/components/canvas/custom-component/UserView.vue
+++ b/frontend/src/components/canvas/custom-component/UserView.vue
@ -460,7 +460,7 @@ export default {
      const updateParams = { 'id': this.chart.id }
      const sourceCustomAttr = JSON.parse(this.sourceCustomAttrStr)
      const sourceCustomStyle = JSON.parse(this.sourceCustomStyleStr)
-      adaptCurTheme(sourceCustomStyle, sourceCustomAttr)
+      adaptCurTheme(sourceCustomStyle, sourceCustomAttr, this.chart.type)
      this.sourceCustomAttrStr = JSON.stringify(sourceCustomAttr)
      this.chart.customAttr = this.sourceCustomAttrStr
      updateParams['customAttr'] = this.sourceCustomAttrStr
--- a/frontend/src/components/canvas/utils/style.js
+++ b/frontend/src/components/canvas/utils/style.js
@ -256,6 +256,10 @@ export const THEME_ATTR_TRANS_MAIN = {
  }
 }

+export const THEME_ATTR_TRANS_MAIN_SYMBOL = {
+  'label': ['color']
+}
+
 export const THEME_ATTR_TRANS_SLAVE1_BACKGROUND = {
  'tooltip': ['backgroundColor']
 }
@ -321,7 +325,7 @@ export function componentScalePublic(chartInfo, heightScale, widthScale) {
  return chartInfo
 }

-export function adaptCurTheme(customStyle, customAttr) {
+export function adaptCurTheme(customStyle, customAttr, chartType) {
  const canvasStyle = store.state.canvasStyleData
  const themeColor = canvasStyle.panel.themeColor
  if (themeColor === 'light') {
@ -329,14 +333,24 @@ export function adaptCurTheme(customStyle, customAttr) {
    recursionThemTransObj(THEME_STYLE_TRANS_SLAVE1, customStyle, LIGHT_THEME_COLOR_SLAVE1)
    recursionThemTransObj(THEME_ATTR_TRANS_MAIN, customAttr, LIGHT_THEME_COLOR_MAIN)
    recursionThemTransObj(THEME_ATTR_TRANS_SLAVE1_BACKGROUND, customAttr, LIGHT_THEME_COMPONENT_BACKGROUND)
+    if (chartType === 'symbol-map') {
+      // 符号地图特殊处理
+      Vue.set(customStyle['baseMapStyle'], 'baseMapTheme', 'light')
+    }
  } else {
    recursionThemTransObj(THEME_STYLE_TRANS_MAIN, customStyle, DARK_THEME_COLOR_MAIN)
    recursionThemTransObj(THEME_STYLE_TRANS_SLAVE1, customStyle, DARK_THEME_COLOR_SLAVE1)
-    recursionThemTransObj(THEME_ATTR_TRANS_MAIN, customAttr, DARK_THEME_COLOR_MAIN)
-    recursionThemTransObj(THEME_ATTR_TRANS_SLAVE1_BACKGROUND, customAttr, DARK_THEME_COMPONENT_BACKGROUND_BACK)
+    if (chartType === 'symbol-map') {
+      // 符号地图特殊处理
+      Vue.set(customStyle['baseMapStyle'], 'baseMapTheme', 'dark')
+      recursionThemTransObj(THEME_ATTR_TRANS_MAIN_SYMBOL, customAttr, '#000000')
+    } else {
+      recursionThemTransObj(THEME_ATTR_TRANS_MAIN, customAttr, DARK_THEME_COLOR_MAIN)
+      recursionThemTransObj(THEME_ATTR_TRANS_SLAVE1_BACKGROUND, customAttr, DARK_THEME_COMPONENT_BACKGROUND_BACK)
+    }
  }
  customAttr['color'] = { ...canvasStyle.chartInfo.chartColor }
-  customStyle['text'] = { ...canvasStyle.chartInfo.chartTitle, title: customStyle['text']['title'] }
+  customStyle['text'] = { ...canvasStyle.chartInfo.chartTitle, title: customStyle['text']['title'], show: customStyle['text']['show'] }
  if (customStyle.background) {
    delete customStyle.background
  }
@ -352,6 +366,11 @@ export function adaptCurThemeCommonStyle(component) {
    for (const styleKey in filterStyle) {
      Vue.set(component.style, styleKey, filterStyle[styleKey])
    }
+  } else if (isTabComponent(component.component)) {
+    const tabStyle = store.state.canvasStyleData.chartInfo.tabStyle
+    for (const styleKey in tabStyle) {
+      Vue.set(component.style, styleKey, tabStyle[styleKey])
+    }
  } else {
    if (component.style.color) {
      if (store.state.canvasStyleData.panel.themeColor === 'light') {
@ -385,3 +404,7 @@ export function isFilterComponent(component) {
  return ['de-select', 'de-select-grid', 'de-date', 'de-input-search', 'de-number-range', 'de-select-tree'].includes(component)
 }

+export function isTabComponent(component) {
+  return ['de-tabs'].includes(component)
+}
+
--- a/frontend/src/components/canvas/utils/utils.js
+++ b/frontend/src/components/canvas/utils/utils.js
@ -8,7 +8,7 @@ import {
 } from '@/utils/ApplicationContext'
 import { uuid } from 'vue-uuid'
 import store from '@/store'
-import { AIDED_DESIGN, PANEL_CHART_INFO } from '@/views/panel/panel'
+import { AIDED_DESIGN, PANEL_CHART_INFO, TAB_COMMON_STYLE } from '@/views/panel/panel'
 import html2canvas from 'html2canvasde'

 export function deepCopy(target) {
@ -82,6 +82,7 @@ export function panelDataPrepare(componentData, componentStyle, callback) {
  componentStyle.refreshUnit = (componentStyle.refreshUnit || 'minute')
  componentStyle.aidedDesign = (componentStyle.aidedDesign || deepCopy(AIDED_DESIGN))
  componentStyle.chartInfo = (componentStyle.chartInfo || deepCopy(PANEL_CHART_INFO))
+  componentStyle.chartInfo.tabStyle = (componentStyle.chartInfo.tabStyle || deepCopy(TAB_COMMON_STYLE))
  componentStyle.themeId = (componentStyle.themeId || 'NO_THEME')
  componentStyle.panel.themeColor = (componentStyle.panel.themeColor || 'light')
  componentData.forEach((item, index) => {
--- a/frontend/src/components/widget/DeWidget/DeTabs.vue
+++ b/frontend/src/components/widget/DeWidget/DeTabs.vue
@ -20,7 +20,7 @@
      <el-tab-pane
        v-for="(item, index) in element.options.tabList"
        :key="item.name+index"
-        :lazy="true"
+        :lazy="false"
        :name="item.name"
      >
        <span slot="label">
@ -69,7 +69,7 @@
          :edit-mode="editMode"
          :h="tabH"
        />
-        <div v-if="activeTabName === item.name" class="de-tab-content">
+        <div class="de-tab-content">
          <user-view
            v-if="item.content && item.content.type==='view' && item.content.propValue && item.content.propValue.viewId"
            :ref="item.name"
@ -162,6 +162,7 @@ import { mapState } from 'vuex'
 import { chartCopy } from '@/api/chart/chart'
 import { buildFilterMap } from '@/utils/conditionUtil'
 import TabUseList from '@/views/panel/AssistComponent/tabUseList'
+import { $error } from '@/utils/message'

 export default {
  name: 'DeTabls',
@ -263,11 +264,18 @@ export default {
    }
  },
  watch: {
-    // curComponent: {
-    //   handler(newVal, oldVla) {
-    //   },
-    //   deep: true
-    // },
+    activeTabName: {
+      handler(newVal, oldVla) {
+        const _this = this
+        _this.$nextTick(() => {
+          try {
+            _this.$refs[this.activeTabName][0].resizeChart()
+          } catch (e) {
+            // ignore
+          }
+        })
+      }
+    },
    active: {
      handler(newVal, oldVla) {
        let activeTabInner
--- a/frontend/src/views/chart/chart/chart.js
+++ b/frontend/src/views/chart/chart/chart.js
@ -1,3 +1,17 @@
+export const DEFAULT_TAB_COLOR_CASE_DARK = {
+  headFontColor: '#FFFFFF',
+  headFontActiveColor: '#FFFFFF',
+  headBorderColor: '',
+  headBorderActiveColor: ''
+}
+
+export const DEFAULT_TAB_COLOR_CASE_LIGHT = {
+  headFontColor: '#OOOOOO',
+  headFontActiveColor: '#OOOOOO',
+  headBorderColor: '',
+  headBorderActiveColor: ''
+}
+
 export const DEFAULT_COLOR_CASE = {
  value: 'default',
  colors: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'],
--- a/frontend/src/views/panel/SubjectSetting/PanelStyle/OverallSetting.vue
+++ b/frontend/src/views/panel/SubjectSetting/PanelStyle/OverallSetting.vue
@ -128,7 +128,7 @@ import {
  DEFAULT_COLOR_CASE_DARK,
  DEFAULT_TITLE_STYLE_DARK,
  DEFAULT_COLOR_CASE,
-  DEFAULT_TITLE_STYLE
+  DEFAULT_TITLE_STYLE, DEFAULT_TAB_COLOR_CASE_LIGHT, DEFAULT_TAB_COLOR_CASE_DARK
 } from '@/views/chart/chart/chart'
 import { FILTER_COMMON_STYLE, FILTER_COMMON_STYLE_DARK } from '@/views/panel/panel'
 import { deepCopy } from '@/components/canvas/utils/utils'
@ -167,12 +167,14 @@ export default {
          this.canvasStyleData.chartInfo.chartTitle = deepCopy(DEFAULT_TITLE_STYLE)
          this.canvasStyleData.chartInfo.chartColor = deepCopy(DEFAULT_COLOR_CASE)
          this.canvasStyleData.chartInfo.filterStyle = deepCopy(FILTER_COMMON_STYLE)
+          this.canvasStyleData.chartInfo.tabStyle = deepCopy(DEFAULT_TAB_COLOR_CASE_LIGHT)
        } else {
          this.canvasStyleData.panel.color = deepCopy(DARK_THEME_PANEL_BACKGROUND)
          this.canvasStyleData.chartInfo.chartCommonStyle.color = deepCopy(DARK_THEME_COMPONENT_BACKGROUND)
          this.canvasStyleData.chartInfo.chartTitle = deepCopy(DEFAULT_TITLE_STYLE_DARK)
          this.canvasStyleData.chartInfo.chartColor = deepCopy(DEFAULT_COLOR_CASE_DARK)
          this.canvasStyleData.chartInfo.filterStyle = deepCopy(FILTER_COMMON_STYLE_DARK)
+          this.canvasStyleData.chartInfo.tabStyle = deepCopy(DEFAULT_TAB_COLOR_CASE_DARK)
        }
        adaptCurThemeCommonStyleAll()
        bus.$emit('onThemeColorChange')
--- a/frontend/src/views/panel/panel.js
+++ b/frontend/src/views/panel/panel.js
@ -2,6 +2,12 @@
 import { DEFAULT_COLOR_CASE, DEFAULT_TITLE_STYLE } from '@/views/chart/chart/chart'
 import { deepCopy } from '@/components/canvas/utils/utils'
 import { COMMON_BACKGROUND_BASE } from '@/components/canvas/custom-component/component-list'
+export const TAB_COMMON_STYLE = {
+  headFontColor: '#000000',
+  headFontActiveColor: '#000000',
+  headBorderColor: null,
+  headBorderActiveColor: null
+}

 export const FILTER_COMMON_STYLE = {
  horizontal: 'left',
@ -17,7 +23,7 @@ export const FILTER_COMMON_STYLE_DARK = {
  vertical: 'top',
  color: '#FFFFFF',
  brColor: '#4E4B4B',
-  wordColor: '#4E4B4B',
+  wordColor: '#FFFFFF',
  innerBgColor: '#131E42'
 }

@ -35,7 +41,8 @@ export const PANEL_CHART_INFO = {
  chartTitle: DEFAULT_TITLE_STYLE,
  chartColor: DEFAULT_COLOR_CASE,
  chartCommonStyle: COMMON_BACKGROUND_BASE,
-  filterStyle: FILTER_COMMON_STYLE
+  filterStyle: FILTER_COMMON_STYLE,
+  tabStyle: TAB_COMMON_STYLE
 }

 export const CANVAS_STYLE = {