refactor: 仪表板主题增加控制范围

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)

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

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

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"
     >
-      <el-row v-if="!batchOptStatus" class="padding-lr">
-        <span class="title-text">{{ $t('chart.style_priority') }}</span>
-        <el-row>
-          <el-radio-group
-            v-model="view.stylePriority"
-            class="radio-span"
-            size="mini"
-            @change="calcStyle"
-          >
-            <el-radio label="view"><span>{{ $t('chart.chart') }}</span></el-radio>
-            <el-radio label="panel"><span>{{ $t('chart.dashboard') }}</span></el-radio>
-          </el-radio-group>
-        </el-row>
-      </el-row>
       <el-row>
         <span class="padding-lr">{{ $t('chart.shape_attr') }}</span>
         <el-collapse v-model="attrActiveNames" class="style-collapse">

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