diff --git a/data-room-ui/packages/BigScreenDesign/RightSetting/index.vue b/data-room-ui/packages/BigScreenDesign/RightSetting/index.vue
index 3045ee2c..caaf0366 100644
--- a/data-room-ui/packages/BigScreenDesign/RightSetting/index.vue
+++ b/data-room-ui/packages/BigScreenDesign/RightSetting/index.vue
@@ -154,7 +154,7 @@ export default {
if (this.config.type === 'iframeChart') {
this.debounce(500, { ...val, type: this.config.type, code: this.config.code })
} else {
- this.$emit('updateSetting', { ...val, type: this.config.type, code: this.config.code })
+ this.$emit('updateSetting', { ...val, type: this.config.type, code: this.config.code, theme: this.config.theme })
}
} else {
this.$emit('updateDataSetting', this.config)
diff --git a/data-room-ui/packages/BigScreenDesign/index.vue b/data-room-ui/packages/BigScreenDesign/index.vue
index 344b520b..c7906394 100644
--- a/data-room-ui/packages/BigScreenDesign/index.vue
+++ b/data-room-ui/packages/BigScreenDesign/index.vue
@@ -9,6 +9,7 @@
:right-fold="rightVisiable"
@updateRightVisiable="updateRightVisiable"
@showPageInfo="showPageInfo"
+ @updateTheme="updateTheme"
@empty="empty"
/>
@@ -136,6 +137,7 @@ 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: {
@@ -216,7 +218,8 @@ export default {
hasGrid: (state) => state.bigScreen.hasGrid,
zoom: (state) => state.bigScreen.zoom,
fitZoom: (state) => state.bigScreen.fitZoom,
- iframeDialog: (state) => state.bigScreen.iframeDialog
+ iframeDialog: (state) => state.bigScreen.iframeDialog,
+ activeCode: state => state.bigScreen.activeCode
}),
pageCode () {
return this.code || this.$route.query.code
@@ -277,7 +280,9 @@ export default {
'changeZoom',
'clearTimeline',
'saveTimeLine',
- 'changeIframeDialog'
+ 'changeIframeDialog',
+ 'changePageInfo',
+ 'changeActiveItemConfig'
]),
// 判断页面权限
permission () {
@@ -404,6 +409,12 @@ export default {
})
.catch(() => {})
},
+ // 切换主题时更新主题配置
+ updateTheme (theme) {
+ const pageInfo = this.pageInfo
+ pageInfo.chartList = themeToSetting(pageInfo.chartList, theme, this)
+ this.changePageInfo(pageInfo)
+ },
// 自定义属性更新
updateSetting (config) {
if (config.type === 'map' || config.type === 'video') {
diff --git a/data-room-ui/packages/PlotRender/index.vue b/data-room-ui/packages/PlotRender/index.vue
index 12a7ef7f..818fad90 100644
--- a/data-room-ui/packages/PlotRender/index.vue
+++ b/data-room-ui/packages/PlotRender/index.vue
@@ -20,6 +20,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',
@@ -40,7 +41,8 @@ export default {
computed: {
...mapState('bigScreen', {
pageInfo: state => state.pageInfo,
- customTheme: state => state.pageInfo.pageConfig.customTheme
+ customTheme: state => state.pageInfo.pageConfig.customTheme,
+ activeCode: state => state.activeCode
}),
chatId () {
let prefix = 'chart_'
@@ -69,9 +71,8 @@ export default {
}
},
methods: {
- ...mapMutations('bigScreen', ['changeChartConfig']),
+ ...mapMutations('bigScreen', ['changeChartConfig', 'changeActiveItemConfig']),
chartInit () {
-
let config = this.config
// key和code相等，说明是一进来刷新，调用list接口
if (this.config.code === this.config.key || this.isPreview) {
@@ -81,7 +82,8 @@ export default {
this.changeDataByCode(config).then((res) => {
// 初始化图表
this.newChart(res)
- }).catch(() => {})
+ }).catch(() => {
+ })
} else {
// 否则说明是更新，这里的更新只指更新数据（改变样式时是直接调取changeStyle方法），因为更新数据会改变key,调用chart接口
this.changeData(config).then((res) => {
@@ -179,13 +181,15 @@ export default {
console.error(e)
}
}
+ // 将设置好的主题保存起来
+ config.theme = settingToTheme(_.cloneDeep(config), this.customTheme)
+ this.changeChartConfig(config)
+ if (config.code === this.activeCode) {
+ this.changeActiveItemConfig(config)
+ }
if (this.chart) {
this.chart.update(config.option)
}
- this.changeChartConfig(config)
- // 将设置好的主题保存起来
- console.log('changeStyle')
- config.theme = settingToTheme(config, this.customTheme)
return config
}
}
diff --git a/data-room-ui/packages/Render/index.vue b/data-room-ui/packages/Render/index.vue
index cbe886fe..cce8539f 100644
--- a/data-room-ui/packages/Render/index.vue
+++ b/data-room-ui/packages/Render/index.vue
@@ -329,9 +329,8 @@ export default {
}
config.key = config.code
// TODO:新添加一个组件时应该有默认的两套主题
- console.log('add')
// 先暂时只考虑g2组件
- if (['customComponent'].includes(chart.type)){
+ if (['customComponent'].includes(_chart.type)) {
config.theme = settingToTheme(config, 'dark')
config.theme = settingToTheme(config, 'light')
}
diff --git a/data-room-ui/packages/js/utils/themeFormatting.js b/data-room-ui/packages/js/utils/themeFormatting.js
index 80ffa149..fda771d3 100644
--- a/data-room-ui/packages/js/utils/themeFormatting.js
+++ b/data-room-ui/packages/js/utils/themeFormatting.js
@@ -1,9 +1,12 @@
+import _ from 'lodash'
+
/**
* @Description: 主题设置格式化
* @author liu.shiyi
* @date 2023/8/17 14:47
*/
// 将组件中的setting里面的主题设置（颜色）存放到theme里面
+
export function settingToTheme (config, type) {
// 考虑与上一次保存过的主题进行合并
// 排除掉主题非暗黑非明亮的情况
@@ -20,12 +23,11 @@ export function settingToTheme (config, type) {
}
}
// 将保存的theme主题设置（颜色）存放到chartList
-export function themeToSetting (chartList, type) {
+export function themeToSetting (chartList, type, _this) {
// 排除掉主题非暗黑非明亮的情况
if (['dark', 'light'].includes(type)) {
chartList.forEach(chart => {
chart.option.theme = type
- chart.key = new Date().getTime()
if (chart.theme && chart.theme[type]) {
for (const item of chart.setting) {
// 检查 obj 中是否存在与 item.field 相对应的属性
@@ -35,6 +37,9 @@ export function themeToSetting (chartList, type) {
}
}
}
+ if (_this && _this.$refs.Render?.$refs['RenderCard' + chart.code][0] && _this.$refs.Render.$refs['RenderCard' + chart.code][0].$refs[chart.code].changeStyle) {
+ _this.$refs.Render.$refs['RenderCard' + chart.code][0].$refs[chart.code].changeStyle(_.cloneDeep(chart))
+ }
})
}
return chartList