feat:初步实现主题切换

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

@@ -10,6 +10,16 @@
       <span class="logo-text name-span">{{ pageInfo.name }}</span>
     </div>
     <div class="head-btn-group">
+      <el-switch
+        v-model="pageInfo.pageConfig.customTheme"
+        active-text="暗黑"
+        inactive-text="明亮"
+        class="bs-el-switch theme-switch"
+        active-color="#007aff"
+        active-value="dark"
+        inactive-value="light"
+        @change="changeTheme"
+      />
       <el-tooltip
         v-for="(mode,index) in alignList"
         :key="mode.value"
@@ -113,6 +123,7 @@ import {
   translateBlobToBase64
 } from 'data-room-ui/js/utils/compressImg'
 import * as imageConversion from 'image-conversion'
+import { themeToSetting } from 'data-room-ui/js/utils/themeFormatting'
 export default {
   name: 'PageTopSetting',
   components: {
@@ -209,6 +220,11 @@ export default {
       undoTimeLine: 'bigScreen/undoTimeLine',
       saveTimeLine: 'bigScreen/saveTimeLine'
     }),
+    // 切换主题
+    changeTheme (val) {
+      // 调取每个组件内部切换主题的方法
+      this.$emit('updateTheme', val)
+    },
     setAlign (command) {
       const pageInfo = cloneDeep(this.pageInfo)
       // 获取所有选中的组件
@@ -539,7 +555,7 @@ export default {
   .head-btn-group {
     display: flex;
     margin-left: 50px;
-
+    align-items: center;
     i {
       font-size: 14px;
     }
@@ -575,5 +591,14 @@ export default {
       text-overflow: ellipsis;
     }
   }
+  .theme-switch{
+    margin-right: 10px;
+    /deep/.el-switch__label{
+      color: #bcc9d4!important;
+    }
+    /deep/.el-switch__label.is-active{
+      color: var(--bs-el-color-primary)!important;
+    }
+  }
 }
 </style>

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

@@ -154,7 +154,7 @@ export default {
           if (this.config.type === 'iframeChart') {
             this.debounce(500, { ...val, type: this.config.type, code: this.config.code })
           } else {
-            this.$emit('updateSetting', { ...val, type: this.config.type, code: this.config.code })
+            this.$emit('updateSetting', { ...val, type: this.config.type, code: this.config.code, theme: this.config.theme })
           }
         } else {
           this.$emit('updateDataSetting', this.config)

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

@@ -9,6 +9,7 @@
       :right-fold="rightVisiable"
       @updateRightVisiable="updateRightVisiable"
       @showPageInfo="showPageInfo"
+      @updateTheme="updateTheme"
       @empty="empty"
     />
     <div class="drag-wrap">
@@ -136,6 +137,7 @@ import { isFirefox } from 'data-room-ui/js/utils/userAgent'
 import { handleResData } from 'data-room-ui/js/store/actions.js'
 import { EventBus } from 'data-room-ui/js/utils/eventBus'
 import NotPermission from 'data-room-ui/NotPermission'
+import { themeToSetting } from 'data-room-ui/js/utils/themeFormatting'
 export default {
   name: 'BigScreenDesign',
   components: {
@@ -216,7 +218,8 @@ export default {
       hasGrid: (state) => state.bigScreen.hasGrid,
       zoom: (state) => state.bigScreen.zoom,
       fitZoom: (state) => state.bigScreen.fitZoom,
-      iframeDialog: (state) => state.bigScreen.iframeDialog
+      iframeDialog: (state) => state.bigScreen.iframeDialog,
+      activeCode: state => state.bigScreen.activeCode
     }),
     pageCode () {
       return this.code || this.$route.query.code
@@ -277,7 +280,9 @@ export default {
       'changeZoom',
       'clearTimeline',
       'saveTimeLine',
-      'changeIframeDialog'
+      'changeIframeDialog',
+      'changePageInfo',
+      'changeActiveItemConfig'
     ]),
     // 判断页面权限
     permission () {
@@ -404,6 +409,12 @@ export default {
         })
         .catch(() => {})
     },
+    // 切换主题时更新主题配置
+    updateTheme (theme) {
+      const pageInfo = this.pageInfo
+      pageInfo.chartList = themeToSetting(pageInfo.chartList, theme, this)
+      this.changePageInfo(pageInfo)
+    },
     // 自定义属性更新
     updateSetting (config) {
       if (config.type === 'map' || config.type === 'video') {

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

@@ -20,6 +20,7 @@ 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'
+import _ from 'lodash'
 
 export default {
   name: 'PlotCustomComponent',
@@ -40,7 +41,8 @@ export default {
   computed: {
     ...mapState('bigScreen', {
       pageInfo: state => state.pageInfo,
-      customTheme: state => state.pageInfo.pageConfig.customTheme
+      customTheme: state => state.pageInfo.pageConfig.customTheme,
+      activeCode: state => state.activeCode
     }),
     chatId () {
       let prefix = 'chart_'
@@ -69,9 +71,8 @@ export default {
     }
   },
   methods: {
-    ...mapMutations('bigScreen', ['changeChartConfig']),
+    ...mapMutations('bigScreen', ['changeChartConfig', 'changeActiveItemConfig']),
     chartInit () {
-
       let config = this.config
       // key和code相等，说明是一进来刷新，调用list接口
       if (this.config.code === this.config.key || this.isPreview) {
@@ -81,7 +82,8 @@ export default {
         this.changeDataByCode(config).then((res) => {
           // 初始化图表
           this.newChart(res)
-        }).catch(() => {})
+        }).catch(() => {
+        })
       } else {
         // 否则说明是更新，这里的更新只指更新数据（改变样式时是直接调取changeStyle方法），因为更新数据会改变key,调用chart接口
         this.changeData(config).then((res) => {
@@ -179,13 +181,15 @@ export default {
           console.error(e)
         }
       }
+      // 将设置好的主题保存起来
+      config.theme = settingToTheme(_.cloneDeep(config), this.customTheme)
+      this.changeChartConfig(config)
+      if (config.code === this.activeCode) {
+        this.changeActiveItemConfig(config)
+      }
       if (this.chart) {
         this.chart.update(config.option)
       }
-      this.changeChartConfig(config)
-      // 将设置好的主题保存起来
-      console.log('changeStyle')
-      config.theme = settingToTheme(config, this.customTheme)
       return config
     }
   }

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

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

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

@@ -1,9 +1,12 @@
+import _ from 'lodash'
+
 /**
 * @Description: 主题设置格式化
 * @author liu.shiyi
 * @date 2023/8/17 14:47
 */
 // 将组件中的setting里面的主题设置（颜色）存放到theme里面
+
 export function settingToTheme (config, type) {
   // 考虑与上一次保存过的主题进行合并
   // 排除掉主题非暗黑非明亮的情况
@@ -20,12 +23,11 @@ export function settingToTheme (config, type) {
   }
 }
 // 将保存的theme主题设置（颜色）存放到chartList
-export function themeToSetting (chartList, type) {
+export function themeToSetting (chartList, type, _this) {
   // 排除掉主题非暗黑非明亮的情况
   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 相对应的属性
@@ -35,6 +37,9 @@ export function themeToSetting (chartList, type) {
           }
         }
       }
+      if (_this && _this.$refs.Render?.$refs['RenderCard' + chart.code][0] && _this.$refs.Render.$refs['RenderCard' + chart.code][0].$refs[chart.code].changeStyle) {
+        _this.$refs.Render.$refs['RenderCard' + chart.code][0].$refs[chart.code].changeStyle(_.cloneDeep(chart))
+      }
     })
   }
   return chartList