From 8f894b81958097a50e169def0d45542b9ef9304d Mon Sep 17 00:00:00 2001 From: qianlishi Date: Fri, 17 Mar 2023 10:01:35 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BB=A3=E7=A0=81=E6=95=B4=E7=90=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- report-ui/src/utils/screenMixins.js | 38 ++----- .../bigscreenDesigner/designer/index.vue | 104 ++++++------------ 2 files changed, 42 insertions(+), 100 deletions(-) diff --git a/report-ui/src/utils/screenMixins.js b/report-ui/src/utils/screenMixins.js index 5d345279..271b3fe5 100644 --- a/report-ui/src/utils/screenMixins.js +++ b/report-ui/src/utils/screenMixins.js @@ -7,6 +7,7 @@ const mixin = { return { reportCode: this.$route.query.reportCode, uploadUrl: process.env.BASE_API + "/reportDashboard/import/" + this.reportCode, + revoke: null, //处理历史记录 rightClickIndex: -1, } }, @@ -186,9 +187,7 @@ const mixin = { widget.value.setup.widgetId = widget.value.widgetId; }); const { code, data } = await insertDashboard(screenData); - if (code == "200") { - this.$message.success("保存成功！"); - } + if (code == "200") return this.$message.success("保存成功！"); }, // 预览 viewScreen() { @@ -232,38 +231,19 @@ const mixin = { }, handleUndo() { const record = this.revoke.undo(); - if (!record) { - return false; - } + if (!record) return false; this.widgets = record; }, handleRedo() { const record = this.revoke.redo(); - if (!record) { - return false; - } + if (!record) return false; this.widgets = record; }, handleUpload(response, file, fileList) { this.$refs.upload.clearFiles(); - this.initEchartData(); - if (response.code == "200") { - this.$message({ - message: "导入成功！", - type: "success", - }); - } else { - this.$message({ - message: response.message, - type: "error", - }); - } - }, - handleError(err) { - this.$message({ - message: "上传失败！", - type: "error", - }); + this.getData(); + if (response.code == "200") return this.$message.success('导入成功！') + this.$message.error(response.message) }, // 右键 rightClick(event, index) { @@ -294,7 +274,7 @@ const mixin = { const obj = this.widgets[this.rightClickIndex]; this.$set(obj.value.position, "disabled", true); }, - // 解除锁定 + // 解除锁定 noLockLayer() { const obj = this.widgets[this.rightClickIndex]; this.$set(obj.value.position, "disabled", false); @@ -348,7 +328,7 @@ const mixin = { } else { this.widgets.unshift(this.widgets.splice(this.rightClickIndex, 1)[0]); } - }, + } } } diff --git a/report-ui/src/views/bigscreenDesigner/designer/index.vue b/report-ui/src/views/bigscreenDesigner/designer/index.vue index d3fe7199..baa44952 100644 --- a/report-ui/src/views/bigscreenDesigner/designer/index.vue +++ b/report-ui/src/views/bigscreenDesigner/designer/index.vue @@ -183,7 +183,6 @@ :headers="headers" accept=".zip" :on-success="handleUpload" - :on-error="handleError" :show-file-list="false" :limit="1" > @@ -283,7 +282,7 @@ @onActivated="setOptionsOnClickWidget" @contextmenu.prevent.native="rightClick($event, index)" @mousedown.prevent.native="widgetsClick(index)" - @mouseup.prevent.native="widgetsMouseup" + @mouseup.prevent.native="grade = false" /> @@ -381,31 +380,14 @@ export default { bigscreenWidth: 1920, // 大屏设计的大小 bigscreenHeight: 1080, - revoke: null, //处理历史记录 2022-02-22 + dashboard: {}, + // 大屏的标记 screenCode: "", dragWidgetCode: "", //从工具栏拖拽的组件code // 大屏画布中的组件 - widgets: [ - { - // type和value最终存到数据库中去，保存到gaea_report_dashboard_widget中 - type: "widget-text", - value: { - setup: {}, - data: {}, - position: { - width: 100, - height: 100, - left: 0, - top: 0, - zIndex: 0, - }, - }, - // options属性是从工具栏中拿到的tools中拿到 - options: [], - }, - ], // 工作区中拖放的组件 + widgets: [], // 工作区中拖放的组件 // 当前激活组件 widgetIndex: 0, // 当前激活组件右侧配置属性 @@ -469,7 +451,7 @@ export default { watch: { widgets: { handler(val) { - this.handlerLayerWidget(val); + this.getLayerData(val); this.handlerdynamicDataParamsConfig(val); //以下部分是记录历史 this.$nextTick(() => { @@ -489,7 +471,8 @@ export default { }); }, methods: { - handlerLayerWidget(val) { + // 获取图层数据 + getLayerData(val) { const layerWidgetArr = []; for (let i = 0; i < val.length; i++) { const obj = {}; @@ -516,7 +499,6 @@ export default { return item.value.data; }); }, - // 在缩放模式下的大小 getPXUnderScale(px) { return this.bigscreenScaleInWorkbench * px; @@ -569,9 +551,6 @@ export default { this.currentSizeRangeIndex === this.defaultSize.index ? this.bigscreenScaleInWorkbench : this.sizeRange[this.currentSizeRangeIndex] / 100; - // 计算在缩放模式下的x y - // const x = widgetLeftInWorkbench / this.bigscreenScaleInWorkbench - // const y = widgetTopInWorkbench / this.bigscreenScaleInWorkbench const x = widgetLeftInWorkbench / targetScale; const y = widgetTopInWorkbench / targetScale; @@ -593,9 +572,8 @@ export default { options: tool.options, }; // 处理默认值 - const widgetJsonValue = this.handleDefaultValue(widgetJson); + const widgetJsonValue = this.getWidgetConfigValue(widgetJson); - //2022年02月22日 修复：可以拖拽放到鼠标的位置 widgetJsonValue.value.position.left = x - widgetJsonValue.value.position.width / 2; widgetJsonValue.value.position.top = @@ -606,46 +584,33 @@ export default { // 激活新组件的配置属性 this.setOptionsOnClickWidget(this.widgets.length - 1); }, - // 对组件默认值处理 - handleDefaultValue(widgetJson) { - console.log(widgetJson); - for (const key in widgetJson) { - if (key == "options") { - // collapse、data、position、setup - // setup 处理 - for (let i = 0; i < widgetJson.options.setup.length; i++) { - const item = widgetJson.options.setup[i]; - if (this.isObjectFn(item)) { - widgetJson.value.setup[item.name] = item.value; - } else if (this.isArrayFn(item)) { - for (let j = 0; j < item.length; j++) { - const list = item[j].list; - list.forEach((el) => { - widgetJson.value.setup[el.name] = el.value; - }); - } - } - } - // position - for (let i = 0; i < widgetJson.options.position.length; i++) { - const item = widgetJson.options.position[i]; - if (item.value) { - widgetJson.value.position[item.name] = item.value; - } - } - // data 处理 - if (widgetJson.options.data && widgetJson.options.data.length > 0) { - for (let i = 0; i < widgetJson.options.data.length; i++) { - const item = widgetJson.options.data[i]; - if (item.value) { - widgetJson.value.data[item.name] = item.value; - } - } - } - } - } + getWidgetConfigValue(widgetJson) { + this.setWidgetConfigValue( + widgetJson.options.setup, + widgetJson.value.setup + ); + this.setWidgetConfigValue( + widgetJson.options.position, + widgetJson.value.position + ); + this.setWidgetConfigValue(widgetJson.options.data, widgetJson.value.data); + return widgetJson; }, + setWidgetConfigValue(config, configValue) { + config.forEach((item) => { + if (this.isObjectFn(item)) { + configValue[item.name] = item.value; + } + if (this.isArrayFn(item)) { + item.forEach((itemChild) => { + itemChild.forEach((ev) => { + configValue[ev.name] = ev.value; + }); + }); + } + }); + }, layerClick(index) { this.widgetIndex = index; this.widgetsClick(index); @@ -690,9 +655,6 @@ export default { this.setOptionsOnClickWidget(index); this.grade = true; }, - widgetsMouseup(e) { - this.grade = false; - }, handleMouseDown() { const draggableArr = this.$refs.widgets; for (let i = 0; i < draggableArr.length; i++) {