From f3eff66b21a72c3cef879f1ed8c5dcb8b2209278 Mon Sep 17 00:00:00 2001 From: wangjiahao <1522128093@qq.com> Date: Wed, 22 Jun 2022 21:38:04 +0800 Subject: [PATCH] =?UTF-8?q?refactor:=20=E4=BB=AA=E8=A1=A8=E6=9D=BF?= =?UTF-8?q?=E4=B8=BB=E9=A2=98=E5=A2=9E=E5=8A=A0=E6=8E=A7=E5=88=B6=E8=8C=83?= =?UTF-8?q?=E5=9B=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../canvas/custom-component/UserView.vue | 11 +++--- frontend/src/components/canvas/utils/style.js | 2 +- frontend/src/views/chart/chart/chart.js | 39 +++++++++++++++---- frontend/src/views/chart/view/ChartStyle.vue | 14 ------- .../PanelStyle/OverallSetting.vue | 11 +++--- 5 files changed, 43 insertions(+), 34 deletions(-) diff --git a/frontend/src/components/canvas/custom-component/UserView.vue b/frontend/src/components/canvas/custom-component/UserView.vue index d8440509d3..f326f4f2d2 100644 --- a/frontend/src/components/canvas/custom-component/UserView.vue +++ b/frontend/src/components/canvas/custom-component/UserView.vue @@ -426,7 +426,7 @@ export default { }, optFromBatchSingleProp(param) { this.$store.state.styleChangeTimes++ - const updateParams = { } + const updateParams = { 'id': this.chart.id } if (param.custom === 'customAttr') { const sourceCustomAttr = JSON.parse(this.sourceCustomAttrStr) sourceCustomAttr[param.property][param.value.modifyName] = param.value[param.value.modifyName] @@ -444,15 +444,14 @@ export default { this.$store.commit('recordViewEdit', { viewId: this.chart.id, hasEdit: true }) this.mergeScale() }, - optFromBatchThemeChange() { - const updateParams = { } + optFromBatchThemeChange(changeType) { + const updateParams = { 'id': this.chart.id } const sourceCustomAttr = JSON.parse(this.sourceCustomAttrStr) const sourceCustomStyle = JSON.parse(this.sourceCustomStyleStr) adaptCurTheme(sourceCustomStyle, sourceCustomAttr) this.sourceCustomAttrStr = JSON.stringify(sourceCustomAttr) this.chart.customAttr = this.sourceCustomAttrStr updateParams['customAttr'] = this.sourceCustomAttrStr - this.sourceCustomStyleStr = JSON.stringify(sourceCustomStyle) this.chart.customStyle = this.sourceCustomStyleStr updateParams['customStyle'] = this.sourceCustomStyleStr @@ -488,10 +487,10 @@ export default { this.batchOptChange(param) }) bus.$on('onSubjectChange', () => { - this.optFromBatchThemeChange() + this.optFromBatchThemeChange('subject') }) bus.$on('onThemeColorChange', () => { - this.optFromBatchThemeChange() + this.optFromBatchThemeChange('themeColor') }) bus.$on('onThemeAttrChange', (param) => { this.optFromBatchSingleProp(param) diff --git a/frontend/src/components/canvas/utils/style.js b/frontend/src/components/canvas/utils/style.js index c4ea8ab0f2..44faacff25 100644 --- a/frontend/src/components/canvas/utils/style.js +++ b/frontend/src/components/canvas/utils/style.js @@ -303,7 +303,7 @@ export function recursionThemTransObj(template, infoObj, color) { } else { // 如果是对象 继续进行递归 if (infoObj[templateKey]) { - recursionTransObj(template[templateKey], infoObj[templateKey], color) + recursionThemTransObj(template[templateKey], infoObj[templateKey], color) } } } diff --git a/frontend/src/views/chart/chart/chart.js b/frontend/src/views/chart/chart/chart.js index 70fd3ef36d..e7052bd5ad 100644 --- a/frontend/src/views/chart/chart/chart.js +++ b/frontend/src/views/chart/chart/chart.js @@ -2,13 +2,27 @@ export const DEFAULT_COLOR_CASE = { value: 'default', colors: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'], alpha: 100, - tableHeaderBgColor: '#e1eaff', - tableItemBgColor: '#ffffff', + tableHeaderBgColor: '#6D9A49', + tableItemBgColor: '#FFFFFF', tableFontColor: '#000000', tableStripe: true, dimensionColor: '#000000', - quotaColor: '#000000', - tableBorderColor: '#cfdaf4', + quotaColor: '#4E81BB', + tableBorderColor: '#E6E7E4', + seriesColors: [] // 格式：{"name":"s1","color":"","isCustom":false} +} + +export const DEFAULT_COLOR_CASE_DARK = { + value: 'default', + colors: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'], + alpha: 100, + tableHeaderBgColor: '#4E81BB', + tableItemBgColor: '#131E42', + tableFontColor: '#ffffff', + tableStripe: true, + dimensionColor: '#ffffff', + quotaColor: '#4E81BB', + tableBorderColor: '#CCCCCC', seriesColors: [] // 格式：{"name":"s1","color":"","isCustom":false} } export const DEFAULT_SIZE = { @@ -125,12 +139,23 @@ export const DEFAULT_TOTAL = { export const DEFAULT_TITLE_STYLE = { show: true, fontSize: '18', - color: '#303133', - hPosition: 'center', + color: '#000000', + hPosition: 'left', vPosition: 'top', isItalic: false, - isBolder: false + isBolder: true } + +export const DEFAULT_TITLE_STYLE_DARK = { + show: true, + fontSize: '18', + color: '#FFFFFF', + hPosition: 'left', + vPosition: 'top', + isItalic: false, + isBolder: true +} + export const DEFAULT_LEGEND_STYLE = { show: true, hPosition: 'center', diff --git a/frontend/src/views/chart/view/ChartStyle.vue b/frontend/src/views/chart/view/ChartStyle.vue index a590d5e8db..c21c820781 100644 --- a/frontend/src/views/chart/view/ChartStyle.vue +++ b/frontend/src/views/chart/view/ChartStyle.vue @@ -12,20 +12,6 @@ style="overflow:auto;border-right: 1px solid #e6e6e6;height: 100%;width: 100%;padding-right: 6px" class="attr-style theme-border-class" > - - {{ $t('chart.style_priority') }} - - - {{ $t('chart.chart') }} - {{ $t('chart.dashboard') }} - - - {{ $t('chart.shape_attr') }} diff --git a/frontend/src/views/panel/SubjectSetting/PanelStyle/OverallSetting.vue b/frontend/src/views/panel/SubjectSetting/PanelStyle/OverallSetting.vue index 61fe822b00..3a573d2999 100644 --- a/frontend/src/views/panel/SubjectSetting/PanelStyle/OverallSetting.vue +++ b/frontend/src/views/panel/SubjectSetting/PanelStyle/OverallSetting.vue @@ -65,6 +65,7 @@ import { LIGHT_THEME_PANEL_BACKGROUND } from '@/components/canvas/utils/style' import bus from '@/utils/bus' +import { DEFAULT_COLOR_CASE_DARK, DEFAULT_TITLE_STYLE_DARK, DEFAULT_COLOR_CASE, DEFAULT_TITLE_STYLE } from '@/views/chart/chart/chart' export default { name: 'OverallSetting', data() { @@ -74,12 +75,6 @@ export default { } }, watch: { - // canvasStyleData: { - // handler(newVal, oldVla) { - // console.log('canvasStyleData=' + JSON.stringify(this.canvasStyleData)) - // }, - // deep: true - // } }, computed: { ...mapState([ @@ -100,9 +95,13 @@ export default { if (this.overallSettingForm.panel.themeColor === 'light') { this.canvasStyleData.panel.color = LIGHT_THEME_PANEL_BACKGROUND this.canvasStyleData.chartInfo.chartCommonStyle.color = LIGHT_THEME_COMPONENT_BACKGROUND + this.canvasStyleData.chartInfo.chartTitle = DEFAULT_TITLE_STYLE + this.canvasStyleData.chartInfo.chartColor = DEFAULT_COLOR_CASE } else { this.canvasStyleData.panel.color = DARK_THEME_PANEL_BACKGROUND this.canvasStyleData.chartInfo.chartCommonStyle.color = DARK_THEME_COMPONENT_BACKGROUND + this.canvasStyleData.chartInfo.chartTitle = DEFAULT_TITLE_STYLE_DARK + this.canvasStyleData.chartInfo.chartColor = DEFAULT_COLOR_CASE_DARK } adaptCurThemeCommonStyleAll() bus.$emit('onThemeColorChange')