diff --git a/data-room-ui/packages/BigScreenDesign/OverallSetting/BgImgDialog.vue b/data-room-ui/packages/BigScreenDesign/OverallSetting/BgImgDialog.vue
index ff521b41..64836437 100644
--- a/data-room-ui/packages/BigScreenDesign/OverallSetting/BgImgDialog.vue
+++ b/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: '背景图',
diff --git a/data-room-ui/packages/BigScreenDesign/OverallSetting/index.vue b/data-room-ui/packages/BigScreenDesign/OverallSetting/index.vue
index d62443db..cdcdd2bf 100644
--- a/data-room-ui/packages/BigScreenDesign/OverallSetting/index.vue
+++ b/data-room-ui/packages/BigScreenDesign/OverallSetting/index.vue
@@ -78,39 +78,39 @@
选择背景图
(背景图优先级高于背景色,设置后将覆盖背景色)
@@ -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,
diff --git a/data-room-ui/packages/BigScreenDesign/PageDesignTop.vue b/data-room-ui/packages/BigScreenDesign/PageDesignTop.vue
index ed9a424a..720679c4 100644
--- a/data-room-ui/packages/BigScreenDesign/PageDesignTop.vue
+++ b/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)
// 获取所有选中的组件
diff --git a/data-room-ui/packages/BigScreenDesign/index.vue b/data-room-ui/packages/BigScreenDesign/index.vue
index 0220ce2f..308d0950 100644
--- a/data-room-ui/packages/BigScreenDesign/index.vue
+++ b/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') {
diff --git a/data-room-ui/packages/BigScreenList/EditForm.vue b/data-room-ui/packages/BigScreenList/EditForm.vue
index dd35948b..52075ad6 100644
--- a/data-room-ui/packages/BigScreenList/EditForm.vue
+++ b/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
diff --git a/data-room-ui/packages/BigScreenManagement/addDialog.vue b/data-room-ui/packages/BigScreenManagement/addDialog.vue
index f0f46d9e..c7727d90 100644
--- a/data-room-ui/packages/BigScreenManagement/addDialog.vue
+++ b/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'
},
diff --git a/data-room-ui/packages/BigScreenRun/index.vue b/data-room-ui/packages/BigScreenRun/index.vue
index c90b6149..9bc0302e 100644
--- a/data-room-ui/packages/BigScreenRun/index.vue
+++ b/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'
}
: {}
diff --git a/data-room-ui/packages/ComponentList/EditForm.vue b/data-room-ui/packages/ComponentList/EditForm.vue
index 1adfc664..1ddda72b 100644
--- a/data-room-ui/packages/ComponentList/EditForm.vue
+++ b/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
diff --git a/data-room-ui/packages/PlotRender/index.vue b/data-room-ui/packages/PlotRender/index.vue
index 78a616a7..787d4d1a 100644
--- a/data-room-ui/packages/PlotRender/index.vue
+++ b/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)
diff --git a/data-room-ui/packages/RemoteComponents/index.vue b/data-room-ui/packages/RemoteComponents/index.vue
index 093c14b9..f24580f8 100644
--- a/data-room-ui/packages/RemoteComponents/index.vue
+++ b/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 _ from "lodash";
+import { settingToTheme } from 'data-room-ui/js/utils/themeFormatting'
+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)
}
diff --git a/data-room-ui/packages/Render/index.vue b/data-room-ui/packages/Render/index.vue
index a1f97ca6..c42d95c6 100644
--- a/data-room-ui/packages/Render/index.vue
+++ b/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
diff --git a/data-room-ui/packages/SourceList/EditForm.vue b/data-room-ui/packages/SourceList/EditForm.vue
index 212eb803..3c561f6b 100644
--- a/data-room-ui/packages/SourceList/EditForm.vue
+++ b/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'
diff --git a/data-room-ui/packages/js/store/actions.js b/data-room-ui/packages/js/store/actions.js
index 72b92b98..b70c4b79 100644
--- a/data-room-ui/packages/js/store/actions.js
+++ b/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
diff --git a/data-room-ui/packages/js/store/state.js b/data-room-ui/packages/js/store/state.js
index 73146ca2..8250cf45 100644
--- a/data-room-ui/packages/js/store/state.js
+++ b/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: {}, // 自定义主题配置