feat:修改部分基础组件的主题设置

data-room-ui/packages/BasicComponents/CurrentTime/index.vue

@@ -30,6 +30,9 @@
 <script>
 import moment from 'moment'
 import paramsMixins from 'data-room-ui/js/mixins/paramsMixins'
+import { settingToTheme } from 'data-room-ui/js/utils/themeFormatting'
+import _ from 'lodash'
+import {mapMutations, mapState} from 'vuex'
 export default {
   name: 'CurrentTime',
   mixins: [paramsMixins],
@@ -39,6 +42,12 @@ export default {
       default: () => ({})
     }
   },
+  computed: {
+    ...mapState({
+      customTheme: state => state.bigScreen.pageInfo.pageConfig.customTheme,
+      activeCode: state => state.bigScreen.activeCode
+    })
+  },
   data () {
     return {
       nowTime: '',
@@ -56,8 +65,19 @@ export default {
     }
   },
   methods: {
+    ...mapMutations({
+      changeChartConfig: 'bigScreen/changeChartConfig',
+      changeActiveItemConfig: 'bigScreen/changeActiveItemConfig'
+    }),
     changeStyle (config) {
       this.getCurrentTime(config.dateFormat)
+      config = { ...this.config, ...config }
+      // 样式改变时更新主题配置
+      config.theme = settingToTheme(_.cloneDeep(config), this.customTheme)
+      this.changeChartConfig(config)
+      if (config.code === this.activeCode) {
+        this.changeActiveItemConfig(config)
+      }
     },
     // 实时显示当前系统时间
     getCurrentTime (dateFormat) {

data-room-ui/packages/BasicComponents/DigitalFlop/index.vue

@@ -60,7 +60,7 @@ export default {
   },
   computed: {
     option () {
-      let str=this.config.option.data
+      let str = this.config.option.data
       if (!this.config.option.data) return { ...this.config.customize, data: [] }
       if (
         this.config.option.data.toString().split('').length <

data-room-ui/packages/BasicComponents/HorizontalLine/index.vue

@@ -49,9 +49,6 @@ export default {
   watch: {},
   mounted () {},
   methods: {
-    // 由于静态组件没有混入公共函数，所以需要定义一个changeStyle方法，以免报错
-    changeStyle () {
-    }
   }
 }
 </script>

data-room-ui/packages/BasicComponents/Input/index.vue

@@ -35,6 +35,8 @@
 <script>
 import commonMixins from 'data-room-ui/js/mixins/commonMixins'
 import linkageMixins from 'data-room-ui/js/mixins/linkageMixins'
+import {settingToTheme} from "data-room-ui/js/utils/themeFormatting";
+import _ from "lodash";
 export default {
   name: 'BasicComponentInput',
   mixins: [commonMixins, linkageMixins],
@@ -61,8 +63,8 @@ export default {
   },
   methods: {
     changeStyle (config) {
+      config = { ...this.config, ...config }
       const input = document.querySelector(`#el-input-${config.code}`)
-
       // const inputIcon = input.querySelector(`.${this.config.customize.icon.name}`)
       input.style.backgroundColor = config.customize.backgroundStyle.backgroundColor
       input.style.fontSize = config.customize.inputStyle.fontSize + 'px'
@@ -76,6 +78,12 @@ export default {
         const inputIcon = document.querySelector(`.${config.customize.icon.name}`)
         inputIcon.style.fontSize = config.customize.inputStyle.fontSize + 'px'
       }
+      // 样式改变时更新主题配置
+      config.theme = settingToTheme(_.cloneDeep(config), this.customTheme)
+      this.changeChartConfig(config)
+      if (config.code === this.activeCode) {
+        this.changeActiveItemConfig(config)
+      }
     }
   }
 }

data-room-ui/packages/BasicComponents/Picture/index.vue

@@ -23,9 +23,12 @@
   </div>
 </template>
 <script>
+import { refreshComponentMixin } from 'data-room-ui/js/mixins/refreshComponent'
+
 export default {
   name: 'PictureChart',
   components: {},
+  mixins: [refreshComponentMixin],
   props: {
     config: {
       type: Object,
@@ -41,9 +44,7 @@ export default {
   watch: {},
   mounted () {},
   methods: {
-    // 由于静态组件没有混入公共函数，所以需要定义一个changeStyle方法，以免报错
+
-    changeStyle () {
-    }
   }
 }
 </script>

data-room-ui/packages/BasicComponents/ThemeSwitcher/index.vue

@@ -65,7 +65,7 @@ export default {
     },
     handleChange (val) {
       const pageInfo = this.pageInfo
-      pageInfo.chartList = themeToSetting(pageInfo.chartList, val, this)
+      pageInfo.chartList = themeToSetting(pageInfo.chartList, val)
       this.changePageInfo(pageInfo)
     }
   }

data-room-ui/packages/BasicComponents/VerticalLine/index.vue

@@ -49,9 +49,6 @@ export default {
   watch: {},
   mounted () {},
   methods: {
-    // 由于静态组件没有混入公共函数，所以需要定义一个changeStyle方法，以免报错
-    changeStyle () {
-    }
   }
 }
 </script>

data-room-ui/packages/BigScreenDesign/index.vue

@@ -412,7 +412,7 @@ export default {
     // 切换主题时更新主题配置
     updateTheme (theme) {
       const pageInfo = this.pageInfo
-      pageInfo.chartList = themeToSetting(pageInfo.chartList, theme, this)
+      pageInfo.chartList = themeToSetting(pageInfo.chartList, theme)
       this.changePageInfo(pageInfo)
     },
     // 自定义属性更新

data-room-ui/packages/Render/index.vue

@@ -330,10 +330,10 @@ export default {
       config.key = config.code
       // TODO:新添加一个组件时应该有默认的两套主题
       // 先暂时只考虑g2组件
-      if (['customComponent'].includes(_chart.type)) {
+      // if (['customComponent'].includes(_chart.type)) {
-        config.theme = settingToTheme(config, 'dark')
+      config.theme = settingToTheme(config, 'dark')
-        config.theme = settingToTheme(config, 'light')
+      config.theme = settingToTheme(config, 'light')
-      }
+      // }
       this.addItem(config)
     },
     addSourceChart (chart, position) {

data-room-ui/packages/js/mixins/commonMixins.js

@@ -9,6 +9,8 @@ import { mapMutations, mapState } from 'vuex'
 import { EventBus } from 'data-room-ui/js/utils/eventBus'
 import { getChatInfo, getUpdateChartInfo } from '../api/bigScreenApi'
 import axiosFormatting from '../../js/utils/httpParamsFormatting'
+import {settingToTheme} from "data-room-ui/js/utils/themeFormatting";
+import _ from "lodash";
 export default {
   data () {
     return {
@@ -19,7 +21,9 @@ export default {
   },
   computed: {
     ...mapState({
-      pageCode: state => state.bigScreen.pageInfo.code
+      pageCode: state => state.bigScreen.pageInfo.code,
+      customTheme: state => state.bigScreen.pageInfo.pageConfig.customTheme,
+      activeCode: state => state.bigScreen.activeCode
     }),
     isPreview () {
       return (this.$route.path === window?.BS_CONFIG?.routers?.previewUrl) || (this.$route.path === '/big-screen/preview')
@@ -33,7 +37,8 @@ export default {
   },
   methods: {
     ...mapMutations({
-      changeChartConfig: 'bigScreen/changeChartConfig'
+      changeChartConfig: 'bigScreen/changeChartConfig',
+      changeActiveItemConfig: 'bigScreen/changeActiveItemConfig'
     }),
     /**
      * 初始化组件
@@ -184,8 +189,13 @@ export default {
       // 覆盖
     },
     changeStyle (config) {
-      // this.changeChartConfig(config)
+      config = { ...this.config, ...config }
-      // return config
+      // 样式改变时更新主题配置
+      config.theme = settingToTheme(_.cloneDeep(config), this.customTheme)
+      this.changeChartConfig(config)
+      if (config.code === this.activeCode) {
+        this.changeActiveItemConfig(config)
+      }
     },
     // 缓存组件数据监听
     watchCacheData () {

data-room-ui/packages/js/mixins/refreshComponent.js

@@ -1,3 +1,7 @@
+import { mapMutations, mapState } from 'vuex'
+import { settingToTheme } from 'data-room-ui/js/utils/themeFormatting'
+import _ from 'lodash'
+
 const refreshComponentMixin = {
   data () {
     return {
@@ -5,6 +9,10 @@ const refreshComponentMixin = {
     }
   },
   computed: {
+    ...mapState({
+      customTheme: state => state.bigScreen.pageInfo.pageConfig.customTheme,
+      activeCode: state => state.bigScreen.activeCode
+    }),
     Data () {
       return JSON.parse(JSON.stringify(this.config))
     }
@@ -22,8 +30,19 @@ const refreshComponentMixin = {
     }
   },
   methods: {
-    // 由于静态组件没有混入公共函数，所以需要定义一个changeStyle方法，以免报错
+    ...mapMutations({
-    changeStyle () {
+      changeChartConfig: 'bigScreen/changeChartConfig',
+      changeActiveItemConfig: 'bigScreen/changeActiveItemConfig'
+    }),
+    // 修改样式
+    changeStyle (config) {
+      config = { ...this.config, ...config }
+      // 样式改变时更新主题配置
+      config.theme = settingToTheme(_.cloneDeep(config), this.customTheme)
+      this.changeChartConfig(config)
+      if (config.code === this.activeCode) {
+        this.changeActiveItemConfig(config)
+      }
     }
   }
 }

data-room-ui/packages/js/utils/themeFormatting.js

@@ -12,28 +12,55 @@ export function settingToTheme (config, type) {
   // 排除掉主题非暗黑非明亮的情况
   if (['dark', 'light'].includes(type)) {
     const theme = { dark: { ...config?.theme?.dark }, light: { ...config?.theme?.light } }
-    config.setting.forEach((setItem) => {
+    // 根据组件的type来判断主题的转化方式
-      if (['gradual', 'colorPicker', 'colorSelect'].includes(setItem.type)) {
+    // 如果是g2组件或者远程组件
-        theme[type][setItem.field] = setItem.value
+    if (['customComponent', 'remoteComponent'].includes(config.type)) {
+      config.setting.forEach((setItem) => {
+        if (['gradual', 'colorPicker', 'colorSelect'].includes(setItem.type)) {
+          theme[type][setItem.field] = setItem.value
+        }
+      })
+    } else {
+      // 如果是普通组件
+      if (config.customize && Object.keys(config.customize).length) {
+        for (const item in config.customize) {
+          if (item.includes('color') || item.includes('Color')) {
+            theme[type][item] = config.customize[item]
+          }
+        }
       }
-    })
+    }
     return theme
   } else {
     return {}
   }
 }
 // 将保存的theme主题设置（颜色）存放到chartList
-export function themeToSetting (chartList, type, _this) {
+export function themeToSetting (chartList, type) {
   // 排除掉主题非暗黑非明亮的情况
   if (['dark', 'light'].includes(type)) {
     chartList.forEach(chart => {
       chart.option.theme = type
       if (chart.theme && chart.theme[type]) {
-        for (const item of chart.setting) {
+        // 如果是g2组件或者远程组件
-          // 检查 obj 中是否存在与 item.field 相对应的属性
+        if (['customComponent', 'remoteComponent'].includes(chart.type)) {
-          if (Object.prototype.hasOwnProperty.call(chart.theme[type], item.field)) {
+          for (const item of chart.setting) {
-            // 更新 setting 中对应项的 value 值为 theme 中的属性值
+            // 检查 obj 中是否存在与 item.field 相对应的属性
-            item.value = chart.theme[type][item.field]
+            if (Object.prototype.hasOwnProperty.call(chart.theme[type], item.field)) {
+              // 更新 setting 中对应项的 value 值为 theme 中的属性值
+              item.value = chart.theme[type][item.field]
+            }
+          }
+        } else {
+          // 如果是普通组件
+          if (chart.customize && Object.keys(chart.customize).length) {
+            for (const item in chart.customize) {
+              // 检查 obj 中是否存在与 customize 相对应的属性
+              if (Object.prototype.hasOwnProperty.call(chart.theme[type], item)) {
+                // 更新 customize 中对应项的值为 theme 中的属性值
+                chart.customize[item] = chart.theme[type][item]
+              }
+            }
           }
         }
       }