From 9cc4dcaad41038f387a4ad181b79147b3671743a Mon Sep 17 00:00:00 2001 From: "liu.shiyi" Date: Wed, 30 Aug 2023 17:21:08 +0800 Subject: [PATCH] =?UTF-8?q?feat:=E4=BF=AE=E6=94=B9G2=E7=BB=84=E4=BB=B6?= =?UTF-8?q?=E7=9A=84=E6=9A=97=E9=BB=91=E4=B8=BB=E9=A2=98=E8=83=8C=E6=99=AF?= =?UTF-8?q?=E8=89=B2=E9=80=8F=E6=98=8E?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../BigScreenDesign/OverallSetting/index.vue | 24 +++++----- data-room-ui/packages/PlotRender/index.vue | 2 +- data-room-ui/packages/Render/index.vue | 4 +- .../packages/js/utils/themeFormatting.js | 48 +++++++++---------- 4 files changed, 38 insertions(+), 40 deletions(-) diff --git a/data-room-ui/packages/BigScreenDesign/OverallSetting/index.vue b/data-room-ui/packages/BigScreenDesign/OverallSetting/index.vue index 7805b42a..d62443db 100644 --- a/data-room-ui/packages/BigScreenDesign/OverallSetting/index.vue +++ b/data-room-ui/packages/BigScreenDesign/OverallSetting/index.vue @@ -441,18 +441,18 @@ export default { } }, // 改变 - changeChart (themeName) { - // 统一改变组件的主题 - const newChartList = cloneDeep(this.pageInfo.chartList) - const chartList = newChartList.map(chart => { - chart.option.theme = themeName - chart.key = new Date().getTime() - // this.changeChartKey(chart.code) - return chart - }) - // 可能需要强制性更新chartList - this.changeLayout(chartList) - }, + // changeChart (themeName) { + // // 统一改变组件的主题 + // const newChartList = cloneDeep(this.pageInfo.chartList) + // const chartList = newChartList.map(chart => { + // chart.option.theme = themeName + // chart.key = new Date().getTime() + // // this.changeChartKey(chart.code) + // return chart + // }) + // // 可能需要强制性更新chartList + // this.changeLayout(chartList) + // }, // 新增数据集 addCacheDataSet () { diff --git a/data-room-ui/packages/PlotRender/index.vue b/data-room-ui/packages/PlotRender/index.vue index 0cf2369d..78a616a7 100644 --- a/data-room-ui/packages/PlotRender/index.vue +++ b/data-room-ui/packages/PlotRender/index.vue @@ -211,7 +211,7 @@ export default { color: #000000; } .auto-theme{ - background-color: rgba(0,0,0,0); + background-color: transparent; } diff --git a/data-room-ui/packages/Render/index.vue b/data-room-ui/packages/Render/index.vue index 1605a56f..a1f97ca6 100644 --- a/data-room-ui/packages/Render/index.vue +++ b/data-room-ui/packages/Render/index.vue @@ -313,7 +313,7 @@ export default { if (_chart.type === 'customComponent') { option = { ...this.plotList?.find((plot) => plot.name === _chart.name)?.option, - theme: this.pageConfig.customTheme + theme: this.pageConfig.customTheme === 'dark' ? 'transparent' : 'light' } } const config = { @@ -345,7 +345,7 @@ export default { if (_chart.type === 'customComponent') { option = { ...this.plotList?.find((plot) => plot.name === _chart.name)?.option, - theme: this.pageConfig.customTheme + theme: this.pageConfig.customTheme === 'dark' ? 'transparent' : 'light' } } const config = { diff --git a/data-room-ui/packages/js/utils/themeFormatting.js b/data-room-ui/packages/js/utils/themeFormatting.js index 0d1e1ec9..681c39ce 100644 --- a/data-room-ui/packages/js/utils/themeFormatting.js +++ b/data-room-ui/packages/js/utils/themeFormatting.js @@ -1,5 +1,4 @@ - /** * @Description: 主题设置格式化 * @author liu.shiyi @@ -25,16 +24,16 @@ export function settingToTheme (config, type) { if (config.customize && Object.keys(config.customize).length) { // customize属性存在层级 for (const item in config.customize) { - const value = config.customize[item]; - //如果包含二级属性 - if (value && typeof value === 'object' && Object.keys(value).length){ + const value = config.customize[item] + // 如果包含二级属性 + if (value && typeof value === 'object' && Object.keys(value).length) { // 对于二级属性 for (const subKey in value) { - if (subKey.includes('color') || subKey.includes('Color') || subKey.includes('BGC')){ - theme[type][`${item}_${subKey}`] = value[subKey]; + if (subKey.includes('color') || subKey.includes('Color') || subKey.includes('BGC')) { + theme[type][`${item}_${subKey}`] = value[subKey] } } - }else{ + } else { // 如果只有一级属性 if (item.includes('color') || item.includes('Color') || item.includes('BGC')) { theme[type][item] = config.customize[item] @@ -45,7 +44,7 @@ export function settingToTheme (config, type) { } return theme } else { - return config?.theme || {dark:{}, light:{}} + return config?.theme || { dark: {}, light: {} } } } // 将保存的theme主题设置（颜色）存放到chartList @@ -53,7 +52,7 @@ export function themeToSetting (chartList, type) { // 排除掉主题非暗黑非明亮的情况 if (['dark', 'light'].includes(type)) { chartList.forEach(chart => { - chart.option.theme = type + chart.option.theme = type === 'dark' ? 'transparent' : 'light' if (chart.theme && chart.theme[type]) { // 如果是g2组件或者远程组件 if (['customComponent', 'remoteComponent'].includes(chart.type)) { @@ -67,24 +66,23 @@ export function themeToSetting (chartList, type) { } else { // 如果是普通组件 if (chart.customize && Object.keys(chart.customize).length) { - for(let key in chart.theme[type]){ - const value = chart.theme[type][key]; + for (const key in chart.theme[type]) { + const value = chart.theme[type][key] // 如果对应的是二级属性 - if (key.includes('_')){ - const [propertyName, subPropertyName] = key.split('_'); - if (!chart.customize[propertyName]) { - chart.customize[propertyName] = {} - }else{ - chart.customize[propertyName][subPropertyName] = value; - } - }else{ - // 对应的一级属性 - if (Object.prototype.hasOwnProperty.call(chart.customize, key)) { - // 更新 customize 中对应项的值为 theme 中的属性值 - chart.customize[key] = chart.theme[type][key] - } + if (key.includes('_')) { + const [propertyName, subPropertyName] = key.split('_') + if (!chart.customize[propertyName]) { + chart.customize[propertyName] = {} + } else { + chart.customize[propertyName][subPropertyName] = value } - + } else { + // 对应的一级属性 + if (Object.prototype.hasOwnProperty.call(chart.customize, key)) { + // 更新 customize 中对应项的值为 theme 中的属性值 + chart.customize[key] = chart.theme[type][key] + } + } } for (const item in chart.customize) { // 检查 obj 中是否存在与 customize 相对应的属性