Merge pull request #2489 from dataease/pr@dev@style_panel

style: 主题样式适配调整

frontend/src/components/canvas/custom-component/UserView.vue

@@ -206,7 +206,6 @@ export default {
       changeIndex: 0,
       changeScaleIndex: 0,
       pre: null,
-      preCanvasPanel: null,
       // string
       sourceCustomAttrStr: null,
       // obj
@@ -315,6 +314,9 @@ export default {
     resultCount() {
       return this.canvasStyleData.panel && this.canvasStyleData.panel.resultCount || null
     },
+    gap() {
+      return this.canvasStyleData.panel && this.canvasStyleData.panel.gap || null
+    },
     innerPadding() {
       return this.element.commonBackground && this.element.commonBackground.innerPadding || 0
     },
@@ -353,21 +355,14 @@ export default {
       },
       deep: true
     },
-    // deep监听panel 如果改变 提交到 store
+    resultCount: function() {
-    canvasStyleData: {
-      handler(newVal, oldVla) {
-        // this.mergeStyle()
-        // 如果视图结果模式模式 或者 视图结果获取数量改变 刷新视图
-        if (!this.preCanvasPanel || this.preCanvasPanel.resultCount !== newVal.panel.resultCount || this.preCanvasPanel.resultMode !== newVal.panel.resultMode) {
       this.getData(this.element.propValue.viewId, false)
-        }
-        // 如果gap有变化刷新
-        if (this.preCanvasPanel && this.preCanvasPanel.gap !== newVal.panel.gap) {
-          this.resizeChart()
-        }
-        this.preCanvasPanel = deepCopy(newVal.panel)
     },
-      deep: true
+    resultMode: function() {
+      this.getData(this.element.propValue.viewId, false)
+    },
+    gap: function() {
+      this.resizeChart()
     },
     // 监听外部的样式变化 （非实时性要求）
     'hw': {

frontend/src/components/canvas/utils/style.js

@@ -344,7 +344,7 @@ export function adaptCurThemeCommonStyle(component) {
   }
   if (isFilterComponent(component.component)) {
     const filterStyle = store.state.canvasStyleData.chartInfo.filterStyle
-    for (const styleKey in component.style) {
+    for (const styleKey in filterStyle) {
       component.style[styleKey] = filterStyle[styleKey]
     }
   }
@@ -366,6 +366,7 @@ export function adaptCurThemeFilterStyleAll(styleKey) {
       item.style[styleKey] = filterStyle[styleKey]
     }
   })
+  console.log('componentData=' + JSON.stringify(componentData))
 }
 
 export function isFilterComponent(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, FILTER_COMMON_STYLE, PANEL_CHART_INFO } from '@/views/panel/panel'
+import { AIDED_DESIGN, PANEL_CHART_INFO } from '@/views/panel/panel'
 import html2canvas from 'html2canvasde'
 
 export function deepCopy(target) {

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

@@ -25,6 +25,7 @@
 
 import { mapState } from 'vuex'
 import { COLOR_PANEL } from '@/views/chart/chart/chart'
+import bus from '@/utils/bus'
 export default {
   name: 'ComponentStyle',
   data() {
@@ -37,10 +38,11 @@ export default {
     'canvasStyleData',
     'componentData'
   ]),
-  watch: {
-  },
   created() {
     this.initForm()
+    bus.$on('onThemeColorChange', () => {
+      this.initForm()
+    })
   },
   methods: {
     initForm() {

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

@@ -6,14 +6,14 @@
           <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 :disabled="filterForm.vertical === 'center'" 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-button :disabled="filterForm.horizontal === 'center'" label="center">{{ $t('chart.text_pos_center') }}</el-radio-button>
             </el-radio-group>
           </el-form-item>
           <el-form-item :label="'标题颜色'" class="form-item">
@@ -25,19 +25,19 @@
               边框
             </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-color-picker v-model="filterForm.brColor" size="mini" class="color-picker-style" :predefine="predefineColors" @change="themeChange('brColor')" />
             </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-color-picker v-model="filterForm.wordColor" size="mini" class="color-picker-style" :predefine="predefineColors" @change="themeChange('wordColor')" />
             </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-color-picker v-model="filterForm.innerBgColor" size="mini" class="color-picker-style" :predefine="predefineColors" @change="themeChange('innerBgColor')" />
             </el-col>
           </el-row>
         </div>
@@ -50,6 +50,7 @@
 import { COLOR_PANEL } from '@/views/chart/chart/chart'
 import { adaptCurThemeFilterStyleAll } from '@/components/canvas/utils/style'
 import { mapState } from 'vuex'
+import bus from '@/utils/bus'
 
 export default {
   name: 'FilterStyleSelector',
@@ -68,10 +69,13 @@ export default {
       'canvasStyleData'
     ])
   },
-  watch: {
+  created() {
+    this.initForm()
+    bus.$on('onThemeColorChange', () => {
+      this.initForm()
+    })
   },
   mounted() {
-    this.initForm()
   },
   methods: {
     initForm() {

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

@@ -16,7 +16,7 @@
         </el-form-item>
         <el-form-item :label="$t('panel.refresh_frequency')" class="form-item">
           <el-input v-model="overallSettingForm.refreshTime" class="el-input-refresh-time" type="number" size="mini" controls-position="right" :min="1" :max="3600" @change="themeChange" />
-          <el-select v-model="overallSettingForm.refreshUnit" class="el-input-refresh-unit" @change="themeChange">
+          <el-select v-model="overallSettingForm.refreshUnit" class="el-input-refresh-unit margin-left4" @change="themeChange">
             <el-option :label="$t('panel.minute')" :value="'minute'" />
             <el-option :label="$t('panel.second')" :value="'second'" />
           </el-select>
@@ -67,6 +67,8 @@ import {
 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'
+import { deepCopy } from '@/components/canvas/utils/utils'
+
 export default {
   name: 'OverallSetting',
   data() {
@@ -95,17 +97,17 @@ export default {
         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.panel.color = deepCopy(LIGHT_THEME_PANEL_BACKGROUND)
-          this.canvasStyleData.chartInfo.chartCommonStyle.color = LIGHT_THEME_COMPONENT_BACKGROUND
+          this.canvasStyleData.chartInfo.chartCommonStyle.color = deepCopy(LIGHT_THEME_COMPONENT_BACKGROUND)
-          this.canvasStyleData.chartInfo.chartTitle = DEFAULT_TITLE_STYLE
+          this.canvasStyleData.chartInfo.chartTitle = deepCopy(DEFAULT_TITLE_STYLE)
-          this.canvasStyleData.chartInfo.chartColor = DEFAULT_COLOR_CASE
+          this.canvasStyleData.chartInfo.chartColor = deepCopy(DEFAULT_COLOR_CASE)
-          this.canvasStyleData.chartInfo.filterStyle = FILTER_COMMON_STYLE
+          this.canvasStyleData.chartInfo.filterStyle = deepCopy(FILTER_COMMON_STYLE)
         } else {
-          this.canvasStyleData.panel.color = DARK_THEME_PANEL_BACKGROUND
+          this.canvasStyleData.panel.color = deepCopy(DARK_THEME_PANEL_BACKGROUND)
-          this.canvasStyleData.chartInfo.chartCommonStyle.color = DARK_THEME_COMPONENT_BACKGROUND
+          this.canvasStyleData.chartInfo.chartCommonStyle.color = deepCopy(DARK_THEME_COMPONENT_BACKGROUND)
-          this.canvasStyleData.chartInfo.chartTitle = DEFAULT_TITLE_STYLE_DARK
+          this.canvasStyleData.chartInfo.chartTitle = deepCopy(DEFAULT_TITLE_STYLE_DARK)
-          this.canvasStyleData.chartInfo.chartColor = DEFAULT_COLOR_CASE_DARK
+          this.canvasStyleData.chartInfo.chartColor = deepCopy(DEFAULT_COLOR_CASE_DARK)
-          this.canvasStyleData.chartInfo.filterStyle = FILTER_COMMON_STYLE_DARK
+          this.canvasStyleData.chartInfo.filterStyle = deepCopy(FILTER_COMMON_STYLE_DARK)
         }
         adaptCurThemeCommonStyleAll()
         bus.$emit('onThemeColorChange')
@@ -127,9 +129,12 @@ export default {
 }
 
 .el-input-refresh-loading{
-  margin-left: 5px;
+  margin-left: 4px;
   font-size: 12px;
 }
+.margin-left4{
+  margin-left: 4px;
+}
 ::v-deep .el-input__inner{
   padding: 0px 5px!important;
 }

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

@@ -82,6 +82,7 @@
 <script>
 import { COLOR_PANEL } from '@/views/chart/chart/chart'
 import { mapState } from 'vuex'
+import bus from "@/utils/bus";
 
 export default {
   name: 'ColorSelector',
@@ -180,21 +181,11 @@ export default {
   computed: mapState([
     'canvasStyleData'
   ]),
-  watch: {
-    'chart.id': {
-      handler: function() {
-        this.customColor = null
-        this.colorIndex = 0
-      }
-    },
-    'chart': {
-      handler: function() {
-        this.init()
-      }
-    }
-  },
   created() {
     this.initForm()
+    bus.$on('onThemeColorChange', () => {
+      this.initForm()
+    })
   },
   mounted() {
   },
@@ -214,7 +205,6 @@ export default {
 
       // reset custom color
       this.colorForm.seriesColors = []
-
       this.changeColorCase(modifyName)
     },
     changeColorCase(modifyName) {

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

@@ -1,106 +0,0 @@
-<template>
-  <div>
-    <div style="width: 100%;">
-      <el-popover
-        placement="right"
-        width="400"
-        trigger="click"
-      >
-        <el-col>
-          <el-form ref="colorForm" label-width="110px" size="mini">
-            <el-form-item :label="'视图加载提示'" class="form-item form-item-slider">
-              <el-checkbox v-model="canvasStyleData.refreshViewLoading" @change="onChangePanelStyle" />
-            </el-form-item>
-            <el-form-item :label="'刷新时间单位'" class="form-item form-item-slider">
-              <el-radio-group v-model="canvasStyleData.refreshUnit" @change="onChangePanelStyle">
-                <el-radio label="second">秒</el-radio>
-                <el-radio label="minute">分</el-radio>
-              </el-radio-group>
-            </el-form-item>
-            <el-form-item :label="'刷新时间频率'" class="form-item form-item-slider">
-              <el-slider
-                v-model="canvasStyleData.refreshTime"
-                show-input
-                :show-input-controls="false"
-                input-size="mini"
-                :min="1"
-                :max="3600"
-                @change="onChangePanelStyle"
-              />
-            </el-form-item>
-          </el-form>
-        </el-col>
-        <el-button slot="reference" size="mini" class="shape-item">{{ $t('panel.refresh_time') }} <i
-          class="el-icon-setting el-icon--right"
-        /></el-button>
-      </el-popover>
-    </div>
-  </div>
-</template>
-
-<script>
-
-export default {
-  name: 'PanelRefreshTime',
-  props: {},
-  computed: {
-    canvasStyleData() {
-      return this.$store.state.canvasStyleData
-    }
-  },
-  created() {
-  },
-  methods: {
-    onChangePanelStyle() {
-      this.$store.state.styleChangeTimes++
-    }
-  }
-}
-</script>
-
-<style scoped>
-  .avatar-uploader >>> .el-upload {
-    width: 100px;
-    height: 60px;
-    line-height: 70px;
-  }
-
-  .avatar-uploader >>> .el-upload-list li {
-    width: 100px !important;
-    height: 60px !important;
-  }
-
-  .disabled >>> .el-upload--picture-card {
-    display: none;
-  }
-
-  .shape-item {
-    padding: 6px;
-    border: none;
-    width: 100%;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-  }
-
-  .form-item-slider >>> .el-form-item__label {
-    font-size: 12px;
-    line-height: 38px;
-  }
-
-  .form-item >>> .el-form-item__label {
-    font-size: 12px;
-  }
-
-  .el-select-dropdown__item {
-    padding: 0 20px;
-  }
-
-  span {
-    font-size: 12px
-  }
-
-  .el-form-item {
-    margin-bottom: 6px;
-  }
-</style>

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

@@ -1,135 +0,0 @@
-<template>
-  <div>
-    <div style="width: 100%;">
-      <el-popover
-        placement="right"
-        width="400"
-        trigger="click"
-      >
-        <el-row>
-          <el-col :span="16">
-            <el-radio-group v-model="panel.resultMode" class="radio-span" size="mini" @change="onChangePanelStyle">
-              <el-radio label="all"><span>{{ $t('panel.view') }}</span></el-radio>
-              <el-radio label="custom">
-                <span>{{ $t('panel.panel') }} </span>
-              </el-radio>
-            </el-radio-group>
-          </el-col>
-          <el-col :span="8" class="slider-area">
-            <el-slider
-              v-model="panel.resultCount"
-              :disabled="panel.resultMode==='all'"
-              style="margin-left: 5px"
-              show-input
-              :show-input-controls="false"
-              :show-tooltip="false"
-              input-size="mini"
-              :min="1"
-              :max="10000"
-              @change="onChangePanelStyle"
-            />
-          </el-col>
-        </el-row>
-        <el-row>
-          <span style="color: #909399; font-size: 8px;margin-left: 3px">
-            Tips: {{ $t('panel.panel_view_result_tips') }}
-          </span>
-        </el-row>
-        <el-button slot="reference" size="mini" class="shape-item">{{ $t('panel.panel_view_result_show') }}<i
-          class="el-icon-setting el-icon--right"
-        /></el-button>
-      </el-popover>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'PanelViewResult',
-  props: {},
-  data() {
-    return {
-      panel: null
-    }
-  },
-  computed: {
-    canvasStyleData() {
-      return this.$store.state.canvasStyleData
-    }
-  },
-
-  created() {
-    // 初始化赋值
-    this.panel = this.canvasStyleData.panel
-  },
-  methods: {
-    onChangePanelStyle() {
-      this.$store.state.styleChangeTimes++
-    }
-  }
-}
-</script>
-
-<style scoped>
-  .avatar-uploader >>> .el-upload {
-    width: 100px;
-    height: 60px;
-    line-height: 70px;
-  }
-
-  .avatar-uploader >>> .el-upload-list li {
-    width: 100px !important;
-    height: 60px !important;
-  }
-
-  .disabled >>> .el-upload--picture-card {
-    display: none;
-  }
-
-  .shape-item {
-    padding: 6px;
-    border: none;
-    width: 100%;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-  }
-
-  .form-item-slider >>> .el-form-item__label {
-    font-size: 12px;
-    line-height: 38px;
-  }
-
-  .form-item >>> .el-form-item__label {
-    font-size: 12px;
-  }
-
-  .el-select-dropdown__item {
-    padding: 0 20px;
-  }
-
-  span {
-    font-size: 12px
-  }
-
-  .el-form-item {
-    margin-bottom: 6px;
-  }
-
-  .radio-span {
-    margin-top: 10px;
-  }
-
-  .radio-span >>> .el-radio__label {
-    margin-left: 4px;
-  }
-
-  .slider-area >>> .el-slider__runway {
-    display: none;
-  }
-
-  .result-count {
-    width: 80px;
-  }
-
-</style>

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

@@ -39,7 +39,9 @@
 </template>
 
 <script>
-import { COLOR_PANEL, DEFAULT_TITLE_STYLE } from '@/views/chart/chart/chart'
+import { COLOR_PANEL } from '@/views/chart/chart/chart'
+import { mapState } from 'vuex'
+import bus from '@/utils/bus'
 
 export default {
   name: 'TitleSelector',
@@ -47,26 +49,28 @@ export default {
   },
   data() {
     return {
-      titleForm: JSON.parse(JSON.stringify(DEFAULT_TITLE_STYLE)),
+      titleForm: {},
       fontSize: [],
       isSetting: false,
       predefineColors: COLOR_PANEL
     }
   },
-  computed: {
+  computed: mapState([
-
+    'canvasStyleData'
-  },
+  ]),
-  watch: {
+  created() {
-    'chart': {
+    this.initForm()
-      handler: function() {
+    bus.$on('onThemeColorChange', () => {
-        this.initData()
+      this.initForm()
-      }
+    })
-    }
   },
   mounted() {
     this.init()
   },
   methods: {
+    initForm() {
+      this.titleForm = this.canvasStyleData.chartInfo.chartTitle
+    },
     init() {
       const arr = []
       for (let i = 10; i <= 60; i = i + 2) {
@@ -81,9 +85,6 @@ export default {
       this.titleForm['modifyName'] = modifyName
       this.$emit('onTextChange', this.titleForm)
     },
-    inputOnInput: function(e) {
-      this.$forceUpdate()
-    },
     showProperty(property) {
       return this.propertyInner.includes(property)
     }

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

@@ -766,7 +766,6 @@ export default {
             component = deepCopy(componentTemp)
           }
         })
-
         if (component.type === 'picture-add') {
           this.goFile()
           this.clearCurrentInfo()
@@ -851,6 +850,7 @@ export default {
         this.$store.commit('addComponent', { component })
         this.$store.commit('recordSnapshot', 'handleDrop')
       }
+      adaptCurThemeCommonStyle(component)
       this.clearCurrentInfo()
     },
     clearCurrentInfo() {
@@ -889,6 +889,7 @@ export default {
     },
     sureFilter() {
       this.currentFilterCom = this.$refs['filter-setting-' + this.currentFilterCom.id].getElementInfo()
+      adaptCurThemeCommonStyle(this.currentFilterCom)
       this.$store.commit('setComponentWithId', this.currentFilterCom)
       this.$store.commit('recordSnapshot', 'sureFilter')
       this.$store.commit('setCurComponent', { component: this.currentFilterCom, index: this.curComponentIndex })

frontend/src/views/panel/panel.js

@@ -5,7 +5,7 @@ import { COMMON_BACKGROUND_BASE } from '@/components/canvas/custom-component/com
 
 export const FILTER_COMMON_STYLE = {
   horizontal: 'left',
-  vertical: 'center',
+  vertical: 'top',
   color: '#000000',
   brColor: '',
   wordColor: '',
@@ -14,9 +14,9 @@ export const FILTER_COMMON_STYLE = {
 
 export const FILTER_COMMON_STYLE_DARK = {
   horizontal: 'left',
-  vertical: 'center',
+  vertical: 'top',
   color: '#FFFFFF',
-  brColor: '',
+  brColor: '#4E4B4B',
   wordColor: '#4E4B4B',
   innerBgColor: '#131E42'
 }