From dca8d3cd68f998ba9d4bc3b513f3cb94695dec83 Mon Sep 17 00:00:00 2001 From: "liu.shiyi" Date: Thu, 24 Aug 2023 16:11:03 +0800 Subject: [PATCH] =?UTF-8?q?feat:=E5=88=9D=E6=AD=A5=E5=AE=9E=E7=8E=B0?= =?UTF-8?q?=E4=B8=BB=E9=A2=98=E5=88=87=E6=8D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../BigScreenDesign/PageDesignTop.vue | 27 ++++++++++++++++++- .../BigScreenDesign/RightSetting/index.vue | 2 +- .../packages/BigScreenDesign/index.vue | 15 +++++++++-- data-room-ui/packages/PlotRender/index.vue | 20 ++++++++------ data-room-ui/packages/Render/index.vue | 3 +-- .../packages/js/utils/themeFormatting.js | 9 +++++-- 6 files changed, 60 insertions(+), 16 deletions(-) diff --git a/data-room-ui/packages/BigScreenDesign/PageDesignTop.vue b/data-room-ui/packages/BigScreenDesign/PageDesignTop.vue index 0c7c2e94..fc4f00fb 100644 --- a/data-room-ui/packages/BigScreenDesign/PageDesignTop.vue +++ b/data-room-ui/packages/BigScreenDesign/PageDesignTop.vue @@ -10,6 +10,16 @@ {{ pageInfo.name }}
+ 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