refactor: 代码合并

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

@@ -113,7 +113,7 @@ export default {
   methods: {
     init () {
       this.dialogVisible = true
-      this.imgUrl = this.form.bg
+      this.imgUrl = this.form.customTheme === 'dark' ? this.form.bg : this.form.lightBg
       this.fileList = this.imgUrl
         ? [{
             name: '背景图',

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

@@ -78,39 +78,39 @@
           </el-form-item>
           <el-form-item label="背景图">
             <el-button
-              v-if="!form.bg"
+              v-if="!form[currentBg]"
               type="primary"
               @click="$refs.bgImg.init()"
             >
               选择背景图
             </el-button>
             <el-image
-              v-if="form.bg"
+              v-if="form.currentBg"
               class="bg-img bs-el-img"
-              :src="form.bg"
+              :src="form[currentBg]"
               fit="cover"
               @click="$refs.bgImg.init()"
             />
             <div
-              v-show="form.bg"
+              v-show="form[currentBg]"
-              @click="form.bg = ''"
+              @click="form[currentBg] = ''"
             >
               <i class="el-icon-circle-close close-icon" />
             </div>
             <span
-              v-if="form.bg"
+              v-if="form[currentBg]"
               class="description"
             >（背景图优先级高于背景色，设置后将覆盖背景色）</span>
             <BgImg
               ref="bgImg"
               :form="form"
-              @imgUrl="form.bg = $event"
+              @imgUrl="form[currentBg] = $event"
             />
           </el-form-item>
           <el-form-item label="背景色">
             <ColorPicker
-              v-model="form.bgColor"
+              v-model="form[currentBgColor]"
-              :placeholder="form.bg ? '' : '请选择背景色'"
+              :placeholder="form[currentBg] ? '' : '请选择背景色'"
               :predefine-colors="predefineColors"
             />
           </el-form-item>
@@ -287,6 +287,8 @@ export default {
         h: 1080,
         bg: '',
         bgColor: '#151a26', // 背景色
+        lightBg: '',
+        lightBgColor: '#151a26',
         opacity: 100,
         customTheme: 'dark',
         themeJson: {},
@@ -315,6 +317,13 @@ export default {
       pageInfo: state => state.bigScreen.pageInfo,
       config: state => state.bigScreen.activeItemConfig
     }),
+    // 根据主题色来决定背景色和背景图绑定什么变量
+    currentBgColor () {
+      return this.form.customTheme === 'dark' ? 'bgColor' : 'lightBgColor'
+    },
+    currentBg () {
+      return this.form.customTheme === 'dark' ? 'bg' : 'lightBgColor'
+    },
     dsValue () {
       return this.form.cacheDataSets?.map(dSet => ({
         id: dSet.dataSetId,
@@ -382,7 +391,7 @@ export default {
         this.form.refreshConfig = []
       } else {
         this.pageInfo.chartList.forEach(chart => {
-          if (chart.dataSource?.businessKey) {
+          if (chart.dataSource?.businessKey || chart.type === 'marquee') {
             this.chartOptions.push({
               code: chart.code,
               title: chart.title,

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

@@ -240,11 +240,6 @@ export default {
       this.$emit('changeZoom', val)
       // console.log(val)
     },
-    // 切换主题
-    changeTheme (val) {
-      // 调取每个组件内部切换主题的方法
-      this.$emit('updateTheme', val)
-    },
     setAlign (command) {
       const pageInfo = cloneDeep(this.pageInfo)
       // 获取所有选中的组件

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

@@ -9,7 +9,6 @@
       :right-fold="rightVisiable"
       @updateRightVisiable="updateRightVisiable"
       @showPageInfo="showPageInfo"
-      @updateTheme="updateTheme"
       @changeZoom="changeScreenZoom"
       @empty="empty"
     />
@@ -138,7 +137,6 @@ 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: {
@@ -412,12 +410,6 @@ export default {
         })
         .catch(() => {})
     },
-    // 切换主题时更新主题配置
-    updateTheme (theme) {
-      const pageInfo = this.pageInfo
-      pageInfo.chartList = themeToSetting(pageInfo.chartList, theme)
-      this.changePageInfo(pageInfo)
-    },
     // 自定义属性更新
     updateSetting (config) {
       if (config.type === 'map' || config.type === 'video' ||config.type === 'flyMap') {

data-room-ui/packages/BigScreenList/EditForm.vue

@@ -262,9 +262,11 @@ export default {
             w: this.type === 'component' ? 1024 : 1920,
             h: this.type === 'component' ? 768 : 1080,
             bgColor: '#151a26',
+            lightBgColor: '#151a26',
             opacity: 100,
             customTheme: 'dark',
             bg: null,
+            lightBg: null,
             fitMode: 'auto'
           })
           this.resolutionRatio.w = this.type === 'component' ? 1024 : 1920

data-room-ui/packages/BigScreenManagement/addDialog.vue

@@ -365,6 +365,7 @@ export default {
             w: this.resolutionRatio.w || '1920',
             h: this.resolutionRatio.h || '1080',
             bgColor: '#151a26',
+            lightBgColor: '#151a26',
             opacity: 100,
             customTheme: 'dark'
           },

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

@@ -94,8 +94,8 @@ export default {
     previewWrapStyle () {
       const bg = this.fitMode !== 'none'
         ? {
-            backgroundColor: this.fitPageConfig.bgColor,
+            backgroundColor: this.fitPageConfig.customTheme === 'dark' ? this.fitPageConfig.bgColor : this.fitPageConfig.lightBgColor,
-            backgroundImage: `url(${this.fitPageConfig.bg})`,
+            backgroundImage: this.fitPageConfig.customTheme === 'dark' ? `url(${this.fitPageConfig.bg})` : `url(${this.fitPageConfig.lightBg})`,
             backgroundSize: 'cover'
           }
         : {}
@@ -116,8 +116,8 @@ export default {
 
       const bg = this.fitMode === 'none'
         ? {
-            backgroundColor: this.fitPageConfig.bgColor,
+            backgroundColor: this.fitPageConfig.customTheme === 'dark' ? this.fitPageConfig.bgColor : this.fitPageConfig.lightBgColor,
-            backgroundImage: `url(${this.fitPageConfig.bg})`,
+            backgroundImage: this.fitPageConfig.customTheme === 'dark' ? `url(${this.fitPageConfig.bg})` : `url(${this.fitPageConfig.lightBg})`,
             backgroundSize: 'cover'
           }
         : {}

data-room-ui/packages/ComponentList/EditForm.vue

@@ -298,6 +298,8 @@ export default {
             opacity: 100,
             customTheme: 'dark',
             bg: null,
+            lightBgColor: '#151a26',
+            lightBg: null,
             fitMode: 'auto'
           })
           this.resolutionRatio.w = this.type === 'component' ? 1024 : 1920

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

@@ -19,6 +19,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',
@@ -66,7 +67,7 @@ export default {
     'config.option.theme': {
       handler (val) {
         if (val) {
-          this.changeStyle(this.config)
+          this.changeStyle(this.config, true)
         }
       }
     }
@@ -175,7 +176,7 @@ export default {
       return config
     },
     // 组件的样式改变，返回改变后的config
-    changeStyle (config) {
+    changeStyle (config, isUpdateTheme) {
       config = { ...this.config, ...config }
       config = this.transformSettingToOption(config, 'custom')
       // 这里定义了option和setting是为了保证在执行eval时,optionHandler、dataHandler里面可能会用到，
@@ -189,8 +190,10 @@ export default {
           console.error(e)
         }
       }
-      // 将设置好的主题保存起来
+      // 只有样式改变时更新主题配置，切换主题时不需要保存
-      config.theme = settingToTheme(cloneDeep(config), this.customTheme)
+      if (!isUpdateTheme) {
+        config.theme = settingToTheme(_.cloneDeep(config), this.customTheme)
+      }
       this.changeChartConfig(config)
       if (config.code === this.activeCode) {
         this.changeActiveItemConfig(config)

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

@@ -19,8 +19,9 @@ import remoteVueLoader from 'remote-vue-loader'
 import { mapMutations, mapState } from 'vuex'
 import innerRemoteComponents, { getRemoteComponents } from 'data-room-ui/RemoteComponents/remoteComponentsList'
 import { getBizComponentInfo } from 'data-room-ui/js/api/bigScreenApi'
-import {settingToTheme} from "data-room-ui/js/utils/themeFormatting";
+import { settingToTheme } from 'data-room-ui/js/utils/themeFormatting'
-import _ from "lodash";
+import _ from 'lodash'
+import cloneDeep from 'lodash/cloneDeep'
 export default {
   name: 'LcdpRemoteComponent',
   mixins: [linkageMixins, commonMixins],
@@ -50,10 +51,18 @@ export default {
     'config.option.theme': {
       handler (val) {
         if (val) {
-          this.changeStyle(this.config)
+          this.changeStyle(this.config, true)
         }
       }
     }
+    // customTheme: {
+    //   handler (val) {
+    //     if (val) {
+    //       this.changeStyle(this.config, true)
+    //     }
+    //   },
+    //   deep: true
+    // }
   },
   created () {
     this.getRemoteComponent()
@@ -133,13 +142,19 @@ export default {
       // 去掉 export default及后面代码
       settingContent = settingContent.replace(/export default[\s\S]*/, '')
       eval(settingContent)
+      // this.config.option = {
+      //   ...this.config.option,
+      //   ...option
+      // }
       this.config.option = {
-        ...this.config.option,
+        ...option,
-        ...option
+        ...this.config.option
       }
       this.config.setting = setting
+      // 样式改变时更新主题配置
+      // this.config.theme = settingToTheme(cloneDeep(this.config), this.customTheme)
       // 获取到setting后将其转化为theme
-      this.config.theme = settingToTheme(this.config, this.customTheme)
+      // this.config.theme = settingToTheme(this.config, this.customTheme)
 
       return {
         option,
@@ -196,10 +211,8 @@ export default {
       return config
     },
     // 组件的样式改变，返回改变后的config
-    changeStyle (config) {
+    changeStyle (config, isUpdateTheme) {
       config = { ...this.config, ...config }
-      // 样式改变时更新主题配置
-      config.theme = settingToTheme(_.cloneDeep(config), this.customTheme)
       config = this.transformSettingToOption(config, 'custom')
       // 这里定义了option和setting是为了保证在执行eval时,optionHandler、dataHandler里面可能会用到，
       const option = config.option
@@ -212,6 +225,10 @@ export default {
           console.error(e)
         }
       }
+      // 只有样式改变时更新主题配置，切换主题时不需要保存
+      if (!isUpdateTheme) {
+        config.theme = settingToTheme(_.cloneDeep(config), this.customTheme)
+      }
       if (this.chart) {
         this.chart.update(config.option)
       }

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

@@ -6,8 +6,8 @@
     :style="{
       width: pageInfo.pageConfig.w + 'px',
       height: pageInfo.pageConfig.h + 'px',
-      backgroundColor: pageInfo.pageConfig.bgColor,
+      backgroundColor:pageInfo.pageConfig.customTheme ==='dark' ? pageInfo.pageConfig.bgColor : pageInfo.pageConfig.lightBgColor,
-      backgroundImage: `url(${pageInfo.pageConfig.bg})`
+      backgroundImage:pageInfo.pageConfig.customTheme ==='dark' ? `url(${pageInfo.pageConfig.bg})`:`url(${pageInfo.pageConfig.lightBg})`
     }"
     @drop="drop($event)"
     @dragover.prevent

data-room-ui/packages/SourceList/EditForm.vue

@@ -248,7 +248,9 @@ export default {
             bgColor: '#151a26',
             opacity: 100,
             customTheme: 'auto',
-            bg: null
+            bg: null,
+            lightBgColor: '#151a26',
+            lightBg: null
           })
           if (this.dataForm.type === 'bigScreen') {
             this.resolutionRatio.w = '1920'

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

@@ -59,6 +59,8 @@ export function handleResData (data) {
         w: 1920,
         h: 1080,
         bgColor: '#151a26', // 背景色
+        lightBgColor: '#151a26',
+        lightBg: '',
         bg: '', // 背景图
         customTheme: 'dark',
         opacity: 100

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

@@ -22,6 +22,8 @@ export const defaultData = {
       h: 1080,
       bgColor: '#151a26', // 背景色
       bg: '', // 背景图
+      lightBgColor: '#151a26',
+      lightBg: '',
       opacity: 100,
       customTheme: 'dark',
       themeJson: {}, // 自定义主题配置