feat:初步实现主题切换

2 years ago · dca8d3cd68
parent 6addbba742
commit dca8d3cd68
6 changed files with 60 additions and 16 deletions
--- a/data-room-ui/packages/BigScreenDesign/PageDesignTop.vue
+++ b/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>
--- a/data-room-ui/packages/BigScreenDesign/RightSetting/index.vue
+++ b/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)
--- a/data-room-ui/packages/BigScreenDesign/index.vue
+++ b/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') {
--- a/data-room-ui/packages/PlotRender/index.vue
+++ b/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
    }
  }
--- a/data-room-ui/packages/Render/index.vue
+++ b/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')
      }
--- a/data-room-ui/packages/js/utils/themeFormatting.js
+++ b/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