From 9d773ba2251ac7872f0fce93c453457dcd9f2084 Mon Sep 17 00:00:00 2001 From: "liu.shiyi" Date: Thu, 31 Aug 2023 16:04:14 +0800 Subject: [PATCH] =?UTF-8?q?feat:=E5=A4=A7=E5=B1=8F=E9=85=8D=E7=BD=AE?= =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E4=B8=A4=E5=A5=97=E8=83=8C=E6=99=AF=E8=89=B2?= =?UTF-8?q?=E5=92=8C=E8=83=8C=E6=99=AF=E5=9B=BE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../OverallSetting/BgImgDialog.vue | 2 +- .../BigScreenDesign/OverallSetting/index.vue | 27 ++++++++++++------ .../BigScreenDesign/PageDesignTop.vue | 28 +++++++++++-------- .../packages/BigScreenDesign/index.vue | 1 - .../packages/BigScreenList/EditForm.vue | 2 ++ .../BigScreenManagement/addDialog.vue | 1 + data-room-ui/packages/BigScreenRun/index.vue | 8 +++--- .../packages/ComponentList/EditForm.vue | 2 ++ data-room-ui/packages/Render/index.vue | 4 +-- data-room-ui/packages/SourceList/EditForm.vue | 4 ++- data-room-ui/packages/js/store/actions.js | 2 ++ data-room-ui/packages/js/store/state.js | 2 ++ 12 files changed, 54 insertions(+), 29 deletions(-) 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..cc85e809 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, diff --git a/data-room-ui/packages/BigScreenDesign/PageDesignTop.vue b/data-room-ui/packages/BigScreenDesign/PageDesignTop.vue index 5d42ed8e..075b40ed 100644 --- a/data-room-ui/packages/BigScreenDesign/PageDesignTop.vue +++ b/data-room-ui/packages/BigScreenDesign/PageDesignTop.vue @@ -11,7 +11,14 @@
缩放比例 - + - +
@@ -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 @@ -224,15 +235,10 @@ export default { undoTimeLine: 'bigScreen/undoTimeLine', saveTimeLine: 'bigScreen/saveTimeLine' }), - changeZoom(val){ + changeZoom (val) { this.$emit('changeZoom', val) // console.log(val) }, - // 切换主题 - changeTheme (val) { - // 调取每个组件内部切换主题的方法 - this.$emit('updateTheme', val) - }, setAlign (command) { const pageInfo = cloneDeep(this.pageInfo) // 获取所有选中的组件 @@ -333,10 +339,10 @@ export default { return value1 - value2 // 升序 } }, - goBackManage(){ + goBackManage () { this.$refs.CloseDialog.init() }, - async backSave(){ + async backSave () { await this.save() this.backManagement() }, diff --git a/data-room-ui/packages/BigScreenDesign/index.vue b/data-room-ui/packages/BigScreenDesign/index.vue index dbdc2291..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" /> 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/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: {}, // 自定义主题配置