From bcfaf4d4e1cac1da2779c3db1736a7e9544a1593 Mon Sep 17 00:00:00 2001 From: fit2cloudrd Date: Mon, 1 Aug 2022 17:53:58 +0800 Subject: [PATCH] =?UTF-8?q?refactor(=E4=BB=AA=E8=A1=A8=E6=9D=BF):=20?= =?UTF-8?q?=E7=BB=84=E4=BB=B6=E9=80=82=E9=85=8D=E4=B8=BB=E9=A2=98=E8=89=B2?= =?UTF-8?q?=E5=8F=98=E5=8C=96=20(#2752)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * refactor(仪表板): 主题色更换保留原标题显示方式 * refator(仪表板): 主题色切换，过滤组件默认颜色设置 * refator(仪表板): 主题色切换，适配tab组件 * refactor(仪表板): 符号地图适配主题变化 Co-authored-by: wangjiahao <1522128093@qq.com> --- .../canvas/custom-component/UserView.vue | 2 +- frontend/src/components/canvas/utils/style.js | 31 ++++++++++++++++--- frontend/src/components/canvas/utils/utils.js | 3 +- .../src/components/widget/DeWidget/DeTabs.vue | 22 ++++++++----- frontend/src/views/chart/chart/chart.js | 14 +++++++++ .../PanelStyle/OverallSetting.vue | 4 ++- frontend/src/views/panel/panel.js | 11 +++++-- 7 files changed, 71 insertions(+), 16 deletions(-) diff --git a/frontend/src/components/canvas/custom-component/UserView.vue b/frontend/src/components/canvas/custom-component/UserView.vue index 91d9454afc..f757ade7c5 100644 --- 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 diff --git a/frontend/src/components/canvas/utils/style.js b/frontend/src/components/canvas/utils/style.js index a2ee7a9f10..3a539de589 100644 --- 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) +} + diff --git a/frontend/src/components/canvas/utils/utils.js b/frontend/src/components/canvas/utils/utils.js index 0aeeca52c6..afff73316d 100644 --- 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) => { diff --git a/frontend/src/components/widget/DeWidget/DeTabs.vue b/frontend/src/components/widget/DeWidget/DeTabs.vue index 97ed4dcb29..ec85d71934 100644 --- a/frontend/src/components/widget/DeWidget/DeTabs.vue +++ b/frontend/src/components/widget/DeWidget/DeTabs.vue @@ -20,7 +20,7 @@ @@ -69,7 +69,7 @@ :edit-mode="editMode" :h="tabH" /> -
+
{ + try { + _this.$refs[this.activeTabName][0].resizeChart() + } catch (e) { + // ignore + } + }) + } + }, active: { handler(newVal, oldVla) { let activeTabInner diff --git a/frontend/src/views/chart/chart/chart.js b/frontend/src/views/chart/chart/chart.js index bd9461dfb3..6138eec421 100644 --- 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'], diff --git a/frontend/src/views/panel/SubjectSetting/PanelStyle/OverallSetting.vue b/frontend/src/views/panel/SubjectSetting/PanelStyle/OverallSetting.vue index c1ca5b3b81..252efc1ec5 100644 --- 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') diff --git a/frontend/src/views/panel/panel.js b/frontend/src/views/panel/panel.js index 206e7479c8..66ae68688f 100644 --- 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 = {