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: {}, // 自定义主题配置