From fbeb89fdf5ac8f72573d4738f2cabe7525ee3222 Mon Sep 17 00:00:00 2001 From: wangjiahao <1522128093@qq.com> Date: Thu, 23 Jun 2022 12:01:33 +0800 Subject: [PATCH] =?UTF-8?q?refactor:=20=E4=B8=BB=E9=A2=98=E6=8E=A7?= =?UTF-8?q?=E5=88=B6=E9=80=82=E9=85=8D=E6=89=80=E6=9C=89=E8=BF=87=E6=BB=A4?= =?UTF-8?q?=E7=BB=84=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/canvas/utils/style.js | 23 ++++ frontend/src/components/canvas/utils/utils.js | 2 +- .../src/components/dataease/DeOutWidget.vue | 14 +- .../chart/components/ChartComponentG2.vue | 2 +- .../chart/components/ChartComponentS2.vue | 2 +- .../PanelStyle/ComponentStyle.vue | 1 - .../PanelStyle/FilterStyleSelector.vue | 127 ++++++++++++++++++ .../PanelStyle/OverallSetting.vue | 4 + .../src/views/panel/SubjectSetting/index.vue | 5 + frontend/src/views/panel/panel.js | 31 ++++- 10 files changed, 193 insertions(+), 18 deletions(-) create mode 100644 frontend/src/views/panel/SubjectSetting/PanelStyle/FilterStyleSelector.vue diff --git a/frontend/src/components/canvas/utils/style.js b/frontend/src/components/canvas/utils/style.js index 44faacff25..7aaf7cc246 100644 --- a/frontend/src/components/canvas/utils/style.js +++ b/frontend/src/components/canvas/utils/style.js @@ -332,6 +332,9 @@ export function adaptCurTheme(customStyle, customAttr) { } customAttr['color'] = { ...canvasStyle.chartInfo.chartColor } customStyle['text'] = { ...canvasStyle.chartInfo.chartTitle, title: customStyle['text']['title'] } + if (customStyle.background) { + delete customStyle.background + } } export function adaptCurThemeCommonStyle(component) { @@ -339,6 +342,12 @@ export function adaptCurThemeCommonStyle(component) { for (const key in commonStyle) { component.commonBackground[key] = commonStyle[key] } + if (isFilterComponent(component.component)) { + const filterStyle = store.state.canvasStyleData.chartInfo.filterStyle + for (const styleKey in component.style) { + component.style[styleKey] = filterStyle[styleKey] + } + } return component } @@ -349,3 +358,17 @@ export function adaptCurThemeCommonStyleAll() { }) } +export function adaptCurThemeFilterStyleAll(styleKey) { + const componentData = store.state.componentData + const filterStyle = store.state.canvasStyleData.chartInfo.filterStyle + componentData.forEach((item) => { + if (isFilterComponent(item.component)) { + item.style[styleKey] = filterStyle[styleKey] + } + }) +} + +export function isFilterComponent(component) { + return ['de-select', 'de-select-grid', 'de-date', 'de-input-search', 'de-number-range', 'de-select-tree'].includes(component) +} + diff --git a/frontend/src/components/canvas/utils/utils.js b/frontend/src/components/canvas/utils/utils.js index 97a233fbf1..71bf73e6e8 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, FILTER_COMMON_STYLE, PANEL_CHART_INFO } from '@/views/panel/panel' import html2canvas from 'html2canvasde' export function deepCopy(target) { diff --git a/frontend/src/components/dataease/DeOutWidget.vue b/frontend/src/components/dataease/DeOutWidget.vue index 223b0e4ede..a185ebe983 100644 --- a/frontend/src/components/dataease/DeOutWidget.vue +++ b/frontend/src/components/dataease/DeOutWidget.vue @@ -27,8 +27,8 @@ :is="element.component" v-if="element.type==='custom'" :id="'component' + element.id" - class="component-custom" ref="deOutWidget" + class="component-custom" :out-style="element.style" :element="element" :in-draw="inDraw" @@ -105,31 +105,29 @@ export default { 'curCanvasScale' ]), deSelectGridBg() { - if (this.element.component !== 'de-select-grid') return null; - const { backgroundColorSelect, color } = this.element.commonBackground; + if (this.element.component !== 'de-select-grid') return null + const { backgroundColorSelect, color } = this.element.commonBackground return { - background: backgroundColorSelect ? color : '#fff', + background: backgroundColorSelect ? color : '#fff', border: backgroundColorSelect ? 'none' : '1px solid #d7dae2' } }, isFilterComponent() { - return ['de-select', 'de-select-grid', 'de-date', "de-input-search", "de-number-range", "de-select-tree"].includes(this.element.component) + return ['de-select', 'de-select-grid', 'de-date', 'de-input-search', 'de-number-range', 'de-select-tree'].includes(this.element.component) } }, watch: { 'element.style': { handler(val) { - this.handlerPositionChange(val); + this.handlerPositionChange(val) }, deep: true, immediate: true } }, mounted() { - // this.watchSize() }, created() { - // console.log('aaaaaa') const { horizontal, vertical, brColor, wordColor, innerBgColor } = this.element.style this.$set(this.element.style, 'horizontal', horizontal || 'left') this.$set(this.element.style, 'vertical', vertical || 'center') diff --git a/frontend/src/views/chart/components/ChartComponentG2.vue b/frontend/src/views/chart/components/ChartComponentG2.vue index 3cbf812a97..3fbbac736a 100644 --- a/frontend/src/views/chart/components/ChartComponentG2.vue +++ b/frontend/src/views/chart/components/ChartComponentG2.vue @@ -79,7 +79,7 @@ export default { textAlign: 'left', fontStyle: 'normal', fontWeight: 'normal', - background: hexColorToRGBA('#ffffff', 0) + background: '' }, title_show: true, antVRenderStatus: false diff --git a/frontend/src/views/chart/components/ChartComponentS2.vue b/frontend/src/views/chart/components/ChartComponentS2.vue index eb193fc74d..9ca6507cd9 100644 --- a/frontend/src/views/chart/components/ChartComponentS2.vue +++ b/frontend/src/views/chart/components/ChartComponentS2.vue @@ -87,7 +87,7 @@ export default { textAlign: 'left', fontStyle: 'normal', fontWeight: 'normal', - background: hexColorToRGBA('#ffffff', 0) + background: '' }, container_bg_class: { background: hexColorToRGBA('#ffffff', 0) diff --git a/frontend/src/views/panel/SubjectSetting/PanelStyle/ComponentStyle.vue b/frontend/src/views/panel/SubjectSetting/PanelStyle/ComponentStyle.vue index 06db3b6fb6..a5c6413ed4 100644 --- a/frontend/src/views/panel/SubjectSetting/PanelStyle/ComponentStyle.vue +++ b/frontend/src/views/panel/SubjectSetting/PanelStyle/ComponentStyle.vue @@ -29,7 +29,6 @@ export default { name: 'ComponentStyle', data() { return { - basePath: 'chartInfo.chartCommonStyle.', predefineColors: COLOR_PANEL, componentStyleForm: {} } diff --git a/frontend/src/views/panel/SubjectSetting/PanelStyle/FilterStyleSelector.vue b/frontend/src/views/panel/SubjectSetting/PanelStyle/FilterStyleSelector.vue new file mode 100644 index 0000000000..9715d0340d --- /dev/null +++ b/frontend/src/views/panel/SubjectSetting/PanelStyle/FilterStyleSelector.vue @@ -0,0 +1,127 @@ + + + + + diff --git a/frontend/src/views/panel/SubjectSetting/PanelStyle/OverallSetting.vue b/frontend/src/views/panel/SubjectSetting/PanelStyle/OverallSetting.vue index 3a573d2999..6d2e690fdc 100644 --- a/frontend/src/views/panel/SubjectSetting/PanelStyle/OverallSetting.vue +++ b/frontend/src/views/panel/SubjectSetting/PanelStyle/OverallSetting.vue @@ -66,6 +66,7 @@ import { } 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' +import { FILTER_COMMON_STYLE, FILTER_COMMON_STYLE_DARK } from '@/views/panel/panel' export default { name: 'OverallSetting', data() { @@ -92,16 +93,19 @@ export default { if (modifyName === 'themeColor') { // 主题变更 this.canvasStyleData.chartInfo.chartCommonStyle.backgroundColorSelect = true + this.canvasStyleData.panel.backgroundType = 'color' 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 + this.canvasStyleData.chartInfo.filterStyle = FILTER_COMMON_STYLE } 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 + this.canvasStyleData.chartInfo.filterStyle = FILTER_COMMON_STYLE_DARK } adaptCurThemeCommonStyleAll() bus.$emit('onThemeColorChange') diff --git a/frontend/src/views/panel/SubjectSetting/index.vue b/frontend/src/views/panel/SubjectSetting/index.vue index 4f2976b92d..a34ae52d3f 100644 --- a/frontend/src/views/panel/SubjectSetting/index.vue +++ b/frontend/src/views/panel/SubjectSetting/index.vue @@ -27,6 +27,9 @@ + + + @@ -42,9 +45,11 @@ import OverallSetting from '@/views/panel/SubjectSetting/PanelStyle/OverallSetti import ViewTitle from '@/views/panel/SubjectSetting/PanelStyle/ViewTitle' import ComponentStyle from '@/views/panel/SubjectSetting/PanelStyle/ComponentStyle' import { adaptCurThemeCommonStyleAll } from '@/components/canvas/utils/style' +import FilterStyleSelector from '@/views/panel/SubjectSetting/PanelStyle/FilterStyleSelector' export default { components: { + FilterStyleSelector, ComponentStyle, ViewTitle, slider, diff --git a/frontend/src/views/panel/panel.js b/frontend/src/views/panel/panel.js index 8e3723cfac..34dfa43a0b 100644 --- a/frontend/src/views/panel/panel.js +++ b/frontend/src/views/panel/panel.js @@ -3,6 +3,24 @@ import { DEFAULT_COLOR_CASE, DEFAULT_TITLE_STYLE } from '@/views/chart/chart/cha import { deepCopy } from '@/components/canvas/utils/utils' import { COMMON_BACKGROUND_BASE } from '@/components/canvas/custom-component/component-list' +export const FILTER_COMMON_STYLE = { + horizontal: 'left', + vertical: 'center', + color: '#000000', + brColor: '', + wordColor: '', + innerBgColor: '' +} + +export const FILTER_COMMON_STYLE_DARK = { + horizontal: 'left', + vertical: 'center', + color: '#FFFFFF', + brColor: '', + wordColor: '#4E4B4B', + innerBgColor: '#131E42' +} + export const DEFAULT_PANEL_STYLE = { themeColor: 'light', color: '#ffffff', @@ -13,6 +31,13 @@ export const DEFAULT_PANEL_STYLE = { resultCount: 1000 // 视图结果显示条数 } +export const PANEL_CHART_INFO = { + chartTitle: DEFAULT_TITLE_STYLE, + chartColor: DEFAULT_COLOR_CASE, + chartCommonStyle: COMMON_BACKGROUND_BASE, + filterStyle: FILTER_COMMON_STYLE +} + export const CANVAS_STYLE = { width: 1600, height: 900, @@ -34,12 +59,6 @@ export const CANVAS_STYLE = { chartInfo: PANEL_CHART_INFO } -export const PANEL_CHART_INFO = { - chartTitle: DEFAULT_TITLE_STYLE, - chartColor: DEFAULT_COLOR_CASE, - chartCommonStyle: COMMON_BACKGROUND_BASE -} - export const AIDED_DESIGN = { showGrid: false, matrixBase: 1 // 当前matrix的基数 （是pcMatrixCount的几倍）