feat:大屏配置添加两套背景色和背景图

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"
-              @click="form.bg = ''"
+              v-show="form[currentBg]"
+              @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"
-              :placeholder="form.bg ? '' : '请选择背景色'"
+              v-model="form[currentBgColor]"
+              :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,

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

@@ -11,7 +11,14 @@
     </div>
     <div class="head-btn-group">
       <span style="margin-right:8px;font-size:12px">缩放比例</span>
-      <el-input-number style="margin-right:20px" :value="zoom" @change="changeZoom" :min="1" :max="100" label="描述文字"></el-input-number>
+      <el-input-number
+        style="margin-right:20px"
+        :value="zoom"
+        :min="1"
+        :max="100"
+        label="描述文字"
+        @change="changeZoom"
+      />
       <el-dropdown
         trigger="click"
         class="align-list-dropdown"
@@ -99,7 +106,11 @@
       :page-info="pageInfo"
       @replaceItByTemplate="replaceItByTemplate"
     />
-    <CloseDialog ref="CloseDialog" @back="backManagement" @backSave="backSave" />
+    <CloseDialog
+      ref="CloseDialog"
+      @back="backManagement"
+      @backSave="backSave"
+    />
     <AssignDialog ref="AssignDialog" />
     <HistoryList ref="HistoryList" />
   </div>
@@ -195,7 +206,7 @@ export default {
       timelineStore: (state) => state.bigScreen.timelineStore,
       currentTimeLine: (state) => state.bigScreen.currentTimeLine,
       activeCodes: state => state.bigScreen.activeCodes,
-      zoom: (state) => state.bigScreen.zoom,
+      zoom: (state) => state.bigScreen.zoom
     }),
     pageCode () {
       return this.$route.query.code || this.code
@@ -228,11 +239,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"
     />

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,
-            backgroundImage: `url(${this.fitPageConfig.bg})`,
+            backgroundColor: this.fitPageConfig.customTheme === 'dark' ? this.fitPageConfig.bgColor : this.fitPageConfig.lightBgColor,
+            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,
-            backgroundImage: `url(${this.fitPageConfig.bg})`,
+            backgroundColor: this.fitPageConfig.customTheme === 'dark' ? this.fitPageConfig.bgColor : this.fitPageConfig.lightBgColor,
+            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/Render/index.vue

@@ -6,8 +6,8 @@
     :style="{
       width: pageInfo.pageConfig.w + 'px',
       height: pageInfo.pageConfig.h + 'px',
-      backgroundColor: pageInfo.pageConfig.bgColor,
-      backgroundImage: `url(${pageInfo.pageConfig.bg})`
+      backgroundColor:pageInfo.pageConfig.customTheme ==='dark' ? pageInfo.pageConfig.bgColor : pageInfo.pageConfig.lightBgColor,
+      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: {}, // 自定义主题配置