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;
}
</style>
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 相对应的属性