feat:g2添加黑暗及明亮主题设置

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

@@ -115,6 +115,12 @@
           </el-form-item>
         </el-form>
       </div>
+      <div>
+        <SettingTitle>主题配置</SettingTitle>
+        <div class="bs-overall-setting-wrap">
+          <OverallThemeSet />
+        </div>
+      </div>
       <div>
         <SettingTitle>定时器</SettingTitle>
         <!-- 定时器空数据 -->
@@ -188,6 +194,7 @@ import ColorPicker from 'data-room-ui/ColorPicker/index.vue'
 import BgImg from './BgImgDialog.vue'
 import { mapState, mapMutations } from 'vuex'
 import { getThemeConfig } from 'data-room-ui/js/api/bigScreenApi'
+import OverallThemeSet from 'data-room-ui/OverallThemeSet/index.vue'
 // import _ from 'lodash'
 import cloneDeep from 'lodash/cloneDeep'
 import { G2 } from '@antv/g2plot'
@@ -196,7 +203,8 @@ export default {
   components: {
     ColorPicker,
     SettingTitle,
-    BgImg
+    BgImg,
+    OverallThemeSet
   },
   directives: {
     block: {

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

@@ -19,6 +19,8 @@ import commonMixins from 'data-room-ui/js/mixins/commonMixins'
 import { mapState, mapMutations } from 'vuex'
 import * as g2Plot from '@antv/g2plot'
 import plotList, { getCustomPlots } from '../G2Plots/plotList'
+import { settingToTheme } from 'data-room-ui/js/utils/themeFormatting'
+
 export default {
   name: 'PlotCustomComponent',
   mixins: [commonMixins, linkageMixins],
@@ -69,6 +71,7 @@ export default {
   methods: {
     ...mapMutations('bigScreen', ['changeChartConfig']),
     chartInit () {
+
       let config = this.config
       // key和code相等，说明是一进来刷新，调用list接口
       if (this.config.code === this.config.key || this.isPreview) {
@@ -157,7 +160,7 @@ export default {
         config.option.data = data
       } else {
         // 数据返回失败则赋前端的模拟数据
-        config.option.data = this.plotList?.find(plot => plot.name === config.name)?.option?.data
+        config.option.data = this.plotList?.find(plot => plot.name === config.name)?.option?.data || config?.option?.data
       }
       return config
     },
@@ -180,6 +183,9 @@ export default {
         this.chart.update(config.option)
       }
       this.changeChartConfig(config)
+      // 将设置好的主题保存起来
+      console.log('changeStyle')
+      config.theme = settingToTheme(config, this.customTheme)
       return config
     }
   }

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

@@ -176,7 +176,7 @@ export default {
         config.option.data = data
       } else {
         // 数据返回失败则赋前端的模拟数据
-        config.option.data = this.plotList?.find(plot => plot.name === config.name)?.option?.data
+        config.option.data = this.plotList?.find(plot => plot.name === config.name)?.option?.data || config?.option?.data
       }
       return config
     },

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

@@ -82,6 +82,8 @@ import 'vue-draggable-resizable-gorkys/dist/VueDraggableResizable.css'
 import { randomString } from '../js/utils'
 import { compile } from 'tiny-sass-compiler/dist/tiny-sass-compiler.esm-browser.prod.js'
 import plotList, { getCustomPlots } from '../G2Plots/plotList'
+import { settingToTheme } from 'data-room-ui/js/utils/themeFormatting'
+
 export default {
   name: 'BigScreenRender',
   components: {
@@ -326,6 +328,13 @@ export default {
         option
       }
       config.key = config.code
+      // TODO:新添加一个组件时应该有默认的两套主题
+      console.log('add')
+      // 先暂时只考虑g2组件
+      if (['customComponent'].includes(chart.type)){
+        config.theme = settingToTheme(config, 'dark')
+        config.theme = settingToTheme(config, 'light')
+      }
       this.addItem(config)
     },
     addSourceChart (chart, position) {

data-room-ui/packages/js/store/actions.js

@@ -6,6 +6,8 @@ import { getScreenInfo, getDataSetDetails, getDataByDataSetId } from '../api/big
 import { stringToFunction } from '../utils/evalFunctions'
 import { EventBus } from '../utils/eventBus'
 import plotList from 'data-room-ui/G2Plots/plotList'
+import { settingToTheme, themeToSetting } from 'data-room-ui/js/utils/themeFormatting'
+
 export default {
   // 初始化页面数据
   initLayout ({ commit, dispatch }, code) {
@@ -69,6 +71,7 @@ export function handleResData (data) {
   let originalConfig = {}
   pageInfo.chartList.forEach((chart) => {
     if (!['customComponent', 'remoteComponent'].includes(chart.type)) {
+      // TODO:一般组件也需要添加主题的兼容处理
       originalConfig = { option: { ...setModules[chart.type] }, ...dataModules[chart.type] }
       // 如果没有版本号，或者版本号修改了则需要进行旧数据兼容
       if ((!chart.version) || chart.version !== originalConfig.version) {
@@ -90,9 +93,16 @@ export function handleResData (data) {
           chart = compatibility(chart, originalConfig)
         }
       }
+      // 初始化时应该判断，是否存在theme配置，没有的话添加默认的两套主题，这是为了兼容旧组件
+      if (!chart.theme) {
+        chart.theme = settingToTheme(chart, 'dark')
+        chart.theme = settingToTheme(chart, 'light')
+      }
     }
     chart.key = chart.code
   })
+  // 主题兼容
+  pageInfo.chartList = themeToSetting(pageInfo.chartList, pageInfo.pageConfig.customTheme)
   // 存储修改后的配置
   localStorage.setItem('pageInfo', JSON.stringify(pageInfo))
   return pageInfo

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

@@ -0,0 +1,41 @@
+/**
+* @Description: 主题设置格式化
+* @author liu.shiyi
+* @date 2023/8/17 14:47
+*/
+// 将组件中的setting里面的主题设置（颜色）存放到theme里面
+export function settingToTheme (config, type) {
+  // 考虑与上一次保存过的主题进行合并
+  // 排除掉主题非暗黑非明亮的情况
+  if (['dark', 'light'].includes(type)) {
+    const theme = { dark: { ...config?.theme?.dark }, light: { ...config?.theme?.light } }
+    config.setting.forEach((setItem) => {
+      if (['gradual', 'colorPicker'].includes(setItem.type)) {
+        theme[type][setItem.field] = setItem.value
+      }
+    })
+    return theme
+  } else {
+    return {}
+  }
+}
+// 将保存的theme主题设置（颜色）存放到chartList
+export function themeToSetting (chartList, type) {
+  // 排除掉主题非暗黑非明亮的情况
+  if (['dark', 'light'].includes(type)) {
+    chartList.forEach(chart => {
+      chart.option.theme = type
+      chart.key = new Date().getTime()
+      if (chart.theme && chart.theme[type]) {
+        for (const item of chart.setting) {
+          // 检查 obj 中是否存在与 item.field 相对应的属性
+          if (Object.prototype.hasOwnProperty.call(chart.theme[type], item.field)) {
+            // 更新 setting 中对应项的 value 值为 theme 中的属性值
+            item.value = chart.theme[type][item.field]
+          }
+        }
+      }
+    })
+  }
+  return chartList
+}