From 8dd8e289bc6c43dd890868977ea9d38769200ab0 Mon Sep 17 00:00:00 2001 From: "liu.shiyi" Date: Thu, 31 Aug 2023 14:47:25 +0800 Subject: [PATCH 1/3] =?UTF-8?q?feat:=E6=9A=82=E6=97=B6=E6=8F=90=E4=BA=A4?= =?UTF-8?q?=E4=B8=9A=E5=8A=A1=E7=BB=84=E4=BB=B6=E4=B8=BB=E9=A2=98=E8=AE=BE?= =?UTF-8?q?=E7=BD=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../packages/BigScreenDesign/index.vue | 8 ----- .../packages/RemoteComponents/index.vue | 35 ++++++++++++++----- 2 files changed, 26 insertions(+), 17 deletions(-) diff --git a/data-room-ui/packages/BigScreenDesign/index.vue b/data-room-ui/packages/BigScreenDesign/index.vue index be4e1acc..138dd271 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" @empty="empty" />
@@ -137,7 +136,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: { @@ -411,12 +409,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/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) } From 9d773ba2251ac7872f0fce93c453457dcd9f2084 Mon Sep 17 00:00:00 2001 From: "liu.shiyi" Date: Thu, 31 Aug 2023 16:04:14 +0800 Subject: [PATCH 2/3] =?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: {}, // 自定义主题配置 From 6ce4a191932d1f7666310de727a8649fab541feb Mon Sep 17 00:00:00 2001 From: "liu.shiyi" Date: Thu, 31 Aug 2023 16:23:13 +0800 Subject: [PATCH 3/3] =?UTF-8?q?feat:=E4=BF=AE=E5=A4=8Dg2=E7=BB=84=E4=BB=B6?= =?UTF-8?q?=E4=B8=BB=E9=A2=98=E8=AE=BE=E7=BD=AE=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- data-room-ui/packages/PlotRender/index.vue | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) 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)