From a80545f7b2d0814f95879621199f4ecf2721d342 Mon Sep 17 00:00:00 2001 From: "wu.jian2" Date: Tue, 12 Mar 2024 09:46:54 +0800 Subject: [PATCH] =?UTF-8?q?refactor:=20=E4=BB=A3=E7=A0=81=E5=90=88?= =?UTF-8?q?=E5=B9=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../chart/components/ScreenBorderChart.java | 75 +------------------ .../service/impl/DataRoomPageServiceImpl.java | 9 +++ data-room-ui/example/router/index.js | 13 +++- .../packages/BigScreenDesign/LeftPanel.vue | 3 +- data-room-ui/packages/BigScreenRun/index.vue | 14 +++- data-room-ui/packages/EchartsRender/index.vue | 11 ++- .../packages/RemoteComponents/index.vue | 19 +++-- data-room-ui/packages/Render/index.vue | 3 +- .../packages/js/utils/jsonSerialize.js | 23 ++++++ 9 files changed, 81 insertions(+), 89 deletions(-) create mode 100644 data-room-ui/packages/js/utils/jsonSerialize.js diff --git a/DataRoom/dataroom-core/src/main/java/com/gccloud/dataroom/core/module/chart/components/ScreenBorderChart.java b/DataRoom/dataroom-core/src/main/java/com/gccloud/dataroom/core/module/chart/components/ScreenBorderChart.java index 62038cd9..9376a8a4 100644 --- a/DataRoom/dataroom-core/src/main/java/com/gccloud/dataroom/core/module/chart/components/ScreenBorderChart.java +++ b/DataRoom/dataroom-core/src/main/java/com/gccloud/dataroom/core/module/chart/components/ScreenBorderChart.java @@ -4,6 +4,9 @@ import com.gccloud.dataroom.core.module.chart.bean.Chart; import io.swagger.annotations.ApiModelProperty; import lombok.Data; +import java.util.HashMap; +import java.util.Map; + /** * 边框图表 * @author hongyang @@ -14,77 +17,7 @@ import lombok.Data; public class ScreenBorderChart extends Chart { @ApiModelProperty(notes = "个性化配置") - private Customize customize = new Customize(); - - @Data - public static class Customize { - - @ApiModelProperty(notes = "边框主颜色") - private String borderMainColor; - - @ApiModelProperty(notes = "边框次颜色") - private String borderSecondaryColor; - - @ApiModelProperty(notes = "背景颜色") - private String backgroundColor; - - @ApiModelProperty(notes = "边框颜色") - private String borderColor; - - @ApiModelProperty(notes = "边框宽度") - private Integer borderWidth; - - @ApiModelProperty(notes = "是否翻转") - private Boolean reverse; - - @ApiModelProperty(notes = "单次动画时长") - private Integer dur; - - @ApiModelProperty(notes = "颜色类型") - private String colorType; - - @ApiModelProperty(notes = "渐变色0值") - private String gradientColor0; - - @ApiModelProperty(notes = "渐变色1值") - private String gradientColor1; - - @ApiModelProperty(notes = "渐变色色值改变方向") - private String gradientDirection; - - @ApiModelProperty(notes = "透明度") - private Float opacity; - - @ApiModelProperty(notes = "字体大小") - private Integer fontSize; - - @ApiModelProperty(notes = "字体颜色") - private String fontColor; - - @ApiModelProperty(notes = "字体粗细") - private Integer fontWeight; - - @ApiModelProperty(notes = "中心文本") - private String text; - - @ApiModelProperty(notes = "长度") - private Integer height; - - @ApiModelProperty(notes = "宽度") - private Integer width; - - @ApiModelProperty(notes = "左上圆角") - private Integer radiusLeftTop; - - @ApiModelProperty(notes = "右上圆角") - private Integer radiusRightTop; - - @ApiModelProperty(notes = "左下圆角") - private Integer radiusLeftBottom; - - @ApiModelProperty(notes = "右下圆角") - private Integer radiusRightBottom; + private Map customize = new HashMap<>(); - } } diff --git a/DataRoom/dataroom-core/src/main/java/com/gccloud/dataroom/core/module/manage/service/impl/DataRoomPageServiceImpl.java b/DataRoom/dataroom-core/src/main/java/com/gccloud/dataroom/core/module/manage/service/impl/DataRoomPageServiceImpl.java index 9771b279..323557b8 100644 --- a/DataRoom/dataroom-core/src/main/java/com/gccloud/dataroom/core/module/manage/service/impl/DataRoomPageServiceImpl.java +++ b/DataRoom/dataroom-core/src/main/java/com/gccloud/dataroom/core/module/manage/service/impl/DataRoomPageServiceImpl.java @@ -346,6 +346,15 @@ public class DataRoomPageServiceImpl extends ServiceImpl refreshConfigList = pageConfig.getRefreshConfig(); + if (refreshConfigList != null) { + for (DataRoomPageDTO.RefreshConfig refreshConfig : refreshConfigList) { + String oldChartCode = refreshConfig.getCode(); + refreshConfig.setCode(chartCodeMap.get(oldChartCode)); + } + } String copyUrl = this.copyCoverPicture(oldCode, screenEntity.getCode()); if (StringUtils.isBlank(copyUrl)) { screenEntity.setCoverPicture(null); diff --git a/data-room-ui/example/router/index.js b/data-room-ui/example/router/index.js index 72b78a8e..e18aec9b 100644 --- a/data-room-ui/example/router/index.js +++ b/data-room-ui/example/router/index.js @@ -2,10 +2,15 @@ import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) -const baseRoutes = [{ - path: '/notPermission', - component: () => import('data-room-ui/NotPermission/index.vue') -}] +const baseRoutes = [ + { + path: '/notPermission', + component: () => import('data-room-ui/NotPermission/index.vue') + }, { + path: '/test', + component: () => import('data-room-ui/BizComponent_Demo') + } +] export const constantRoutes = [] diff --git a/data-room-ui/packages/BigScreenDesign/LeftPanel.vue b/data-room-ui/packages/BigScreenDesign/LeftPanel.vue index a52dc048..bd235c07 100644 --- a/data-room-ui/packages/BigScreenDesign/LeftPanel.vue +++ b/data-room-ui/packages/BigScreenDesign/LeftPanel.vue @@ -155,6 +155,7 @@ import decorationComponents from 'data-room-ui/js/config/decorationComponentsCon import LayerList from './LayerList/index.vue' import { mapMutations } from 'vuex' import IconSvg from 'data-room-ui/SvgIcon' +import { customSerialize } from 'data-room-ui/js/utils/jsonSerialize.js' export default { name: 'PageLeftPanel', components: { @@ -275,7 +276,7 @@ export default { /* 设置拖拽传输数据 */ event.dataTransfer.setData( 'dragComponent', - JSON.stringify({ + customSerialize({ ...element, offsetX: event.offsetX, offsetY: event.offsetY diff --git a/data-room-ui/packages/BigScreenRun/index.vue b/data-room-ui/packages/BigScreenRun/index.vue index 4c601fd1..d7aadd21 100644 --- a/data-room-ui/packages/BigScreenRun/index.vue +++ b/data-room-ui/packages/BigScreenRun/index.vue @@ -11,7 +11,7 @@ :style="renderStyle" >
@@ -43,6 +43,7 @@ import NotPermission from 'data-room-ui/NotPermission' import Configuration from 'data-room-ui/Render/Configuration.vue' import DataViewDialog from 'data-room-ui/BigScreenDesign/DataViewDialog/index.vue' import { getFileUrl } from 'data-room-ui/js/utils/file' +import cloneDeep from 'lodash/cloneDeep' export default { name: 'BigScreenRun', components: { @@ -66,7 +67,8 @@ export default { innerHeight: window.innerHeight, innerWidth: window.innerWidth, timer: null, - hasPermission: true + hasPermission: true, + initChartList: [], } }, computed: { @@ -145,6 +147,14 @@ export default { this.startTimer() } } + }, + chartList: { + handler (val) { + if (this.initChartList.length === 0) { + this.initChartList = cloneDeep(this.chartList) + } + }, + deep: true } }, beforeRouteLeave (to, from, next) { diff --git a/data-room-ui/packages/EchartsRender/index.vue b/data-room-ui/packages/EchartsRender/index.vue index b8451fdd..df3feb99 100644 --- a/data-room-ui/packages/EchartsRender/index.vue +++ b/data-room-ui/packages/EchartsRender/index.vue @@ -75,9 +75,11 @@ export default { const resizeObserver = new ResizeObserver(entries => { if (this.chart) { this.chart.resize() - let config = this.observeChart(entries) - config = this.seriesStyle(config) - config.option && this.chart.setOption(config.option) + if(this.config.name.includes('3D')){ + let config = this.observeChart(entries) + config = this.seriesStyle(config) + config.option && this.chart.setOption(config.option) + } } }) resizeObserver.observe(dragSelect) @@ -424,6 +426,9 @@ export default { }, // 对series里面的样式进行配置 seriesStyle (config) { + if(!config.name.includes('3D')){ + return config + } const _config = CloneDeep(config) const seriesCustom = _config.option.seriesCustom const ids = Object.keys(config.option.seriesCustom) diff --git a/data-room-ui/packages/RemoteComponents/index.vue b/data-room-ui/packages/RemoteComponents/index.vue index 626f7bd1..f0594a68 100644 --- a/data-room-ui/packages/RemoteComponents/index.vue +++ b/data-room-ui/packages/RemoteComponents/index.vue @@ -58,13 +58,18 @@ export default { }, methods: { changeData (config, filterList) { - // 当前组件的方法调用 - let remote = this.$refs['remoteComponent'+config.code] - if (remote && remote.changeData){ - remote.changeData(config, filterList) - } // 调用混入中的方法 - this.$options.mixins[1].methods.changeData.call(this, config, filterList) + let promise = this.$options.mixins[1].methods.changeData.call(this, config, filterList) + return promise.then(res => { + config = res + // 当前组件的方法调用 + let remote = this.$refs['remoteComponent'+config.code] + if (remote && remote.changeData){ + remote.changeData(config, filterList) + } + return config + }) + }, ...mapMutations('bigScreen', ['changeChartConfig']), // 尝试渲染远程文件或远程字符串 @@ -120,7 +125,7 @@ export default { } } }, - linkEvent (formData) { + linkEvent (formData) { this.linkage(formData) }, /** diff --git a/data-room-ui/packages/Render/index.vue b/data-room-ui/packages/Render/index.vue index aee9acfd..2c910ff2 100644 --- a/data-room-ui/packages/Render/index.vue +++ b/data-room-ui/packages/Render/index.vue @@ -93,6 +93,7 @@ import { compile } from 'tiny-sass-compiler/dist/tiny-sass-compiler.esm-browser. import plotList, { getCustomPlots } from '../G2Plots/plotList' import { settingToTheme } from 'data-room-ui/js/utils/themeFormatting' import { getFileUrl } from 'data-room-ui/js/utils/file' +import { customDeserialize } from 'data-room-ui/js/utils/jsonSerialize.js' export default { name: 'BigScreenRender', @@ -351,7 +352,7 @@ export default { // 新增元素 addChart (chart, position, isComponent) { const { left, top } = this.$el.getBoundingClientRect() - const _chart = !chart.code ? JSON.parse(chart) : chart + const _chart = !chart.code ? customDeserialize(chart) : chart let option = _chart.option if (_chart.type === 'customComponent') { option = { diff --git a/data-room-ui/packages/js/utils/jsonSerialize.js b/data-room-ui/packages/js/utils/jsonSerialize.js new file mode 100644 index 00000000..0f64d2bb --- /dev/null +++ b/data-room-ui/packages/js/utils/jsonSerialize.js @@ -0,0 +1,23 @@ +// 自定义序列化方法：解决JSON.stringify方法忽略函数属性的问题 +export function customSerialize (obj) { + // 将对象属性和函数转换为字符串形式 + const serializedObj = JSON.stringify(obj, function(key, value) { + if (typeof value === 'function') { + return value.toString() // 将函数转换为字符串 + } + return value // 保持其他属性不变 + }) + + return serializedObj +} +// 自定义反序列化方法 +export function customDeserialize(serializedObj){ + const parsedObject = JSON.parse(serializedObj, function(key, value) { + if (typeof value === 'string' && value.indexOf('function') === 0) { + // 将字符串还原为函数 + return new Function('return ' + value)() + } + return value // 保持其他属性不变 + }) + return parsedObject +}