Merge pull request #2481 from dataease/pr@dev@refactor_theme

refactor: 主题控制适配所有过滤组件

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)
+}
+

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) {

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;
+      if (this.element.component !== 'de-select-grid') return null
-      const { backgroundColorSelect, color  } = this.element.commonBackground;
+      const { backgroundColorSelect, color } = this.element.commonBackground
       return {
         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')

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

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)

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: {}
     }

frontend/src/views/panel/SubjectSetting/PanelStyle/FilterStyleSelector.vue

@@ -0,0 +1,127 @@
+<template>
+  <div style="width: 100%">
+    <el-col>
+      <el-form ref="filterForm" :model="filterForm" label-width="80px" size="mini">
+        <div>
+          <el-form-item :label="$t('chart.text_h_position')" class="form-item">
+            <el-radio-group v-model="filterForm.horizontal" size="mini" @change="themeChange('horizontal')">
+              <el-radio-button label="left">{{ $t('chart.text_pos_left') }}</el-radio-button>
+              <el-radio-button label="center">{{ $t('chart.text_pos_center') }}</el-radio-button>
+              <el-radio-button label="right">{{ $t('chart.text_pos_right') }}</el-radio-button>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item :label="$t('chart.text_v_position')" class="form-item">
+            <el-radio-group v-model="filterForm.vertical" size="mini" @change="themeChange('vertical')">
+              <el-radio-button label="top">{{ $t('chart.text_pos_top') }}</el-radio-button>
+              <el-radio-button label="center">{{ $t('chart.text_pos_center') }}</el-radio-button>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item :label="'标题颜色'" class="form-item">
+            <el-color-picker v-model="filterForm.color" class="color-picker-style" :predefine="predefineColors" @change="themeChange('color')" />
+          </el-form-item>
+          <el-divider>输入框样式(颜色)</el-divider>
+          <el-row style="height: 40px;overflow: hidden;">
+            <el-col :span="4" style="padding-left: 10px;padding-top: 8px">
+              边框
+            </el-col>
+            <el-col :span="4" style="padding-top: 5px">
+              <el-color-picker v-model="filterForm.brColor" size="mini" class="color-picker-style" @change="themeChange('brColor')" :predefine="predefineColors" />
+            </el-col>
+            <el-col :span="4" style="padding-left: 10px;padding-top: 8px">
+              文字
+            </el-col>
+            <el-col :span="4" style="padding-top: 5px">
+              <el-color-picker v-model="filterForm.wordColor" size="mini" class="color-picker-style"  @change="themeChange('wordColor')"  :predefine="predefineColors" />
+            </el-col>
+            <el-col :span="4" style="padding-left: 10px;padding-top: 8px">
+              背景
+            </el-col>
+            <el-col :span="4" style="padding-top: 5px">
+              <el-color-picker v-model="filterForm.innerBgColor" size="mini" class="color-picker-style"  @change="themeChange('innerBgColor')"  :predefine="predefineColors" />
+            </el-col>
+          </el-row>
+        </div>
+      </el-form>
+    </el-col>
+  </div>
+</template>
+
+<script>
+import { COLOR_PANEL } from '@/views/chart/chart/chart'
+import { adaptCurThemeFilterStyleAll } from '@/components/canvas/utils/style'
+import { mapState } from 'vuex'
+
+export default {
+  name: 'FilterStyleSelector',
+  props: {
+  },
+  data() {
+    return {
+      filterForm: {},
+      fontSize: [],
+      isSetting: false,
+      predefineColors: COLOR_PANEL
+    }
+  },
+  computed: {
+    ...mapState([
+      'canvasStyleData'
+    ])
+  },
+  watch: {
+  },
+  mounted() {
+    this.initForm()
+  },
+  methods: {
+    initForm() {
+      this.filterForm = this.canvasStyleData.chartInfo.filterStyle
+    },
+    themeChange(styleKey) {
+      adaptCurThemeFilterStyleAll(styleKey)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.shape-item{
+  padding: 6px;
+  border: none;
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.form-item-slider ::v-deep .el-form-item__label{
+  font-size: 12px;
+  line-height: 38px;
+}
+.form-item ::v-deep .el-form-item__label{
+  font-size: 12px;
+}
+.el-select-dropdown__item{
+  padding: 0 20px;
+}
+span{
+  font-size: 12px
+}
+.el-form-item{
+  margin-bottom: 6px;
+}
+
+.switch-style{
+  position: absolute;
+  right: 10px;
+  margin-top: -4px;
+}
+.color-picker-style{
+  cursor: pointer;
+  z-index: 1003;
+}
+.el-divider__text{
+  font-size: 8px;
+  font-weight: 400;
+  color: rgb(144, 147, 153);
+}
+</style>

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')

frontend/src/views/panel/SubjectSetting/index.vue

@@ -27,6 +27,9 @@
         <el-collapse-item :title="'图表标题'" name="table">
           <view-title @onTextChange="onTextChange" />
         </el-collapse-item>
+        <el-collapse-item :title="'过滤组件'" name="filterComponent">
+          <FilterStyleSelector />
+        </el-collapse-item>
       </el-collapse>
     </div>
   </el-row>
@@ -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,

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的几倍）