From ee83bad2e967d2751461e72cce5d4387895761c2 Mon Sep 17 00:00:00 2001 From: qianlishi Date: Thu, 16 Mar 2023 14:51:39 +0800 Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- report-ui/src/utils/screenMixins.js | 231 +++++++++++++++ .../bigscreenDesigner/designer/index.vue | 280 +----------------- 2 files changed, 234 insertions(+), 277 deletions(-) diff --git a/report-ui/src/utils/screenMixins.js b/report-ui/src/utils/screenMixins.js index 038b0b45..96031f14 100644 --- a/report-ui/src/utils/screenMixins.js +++ b/report-ui/src/utils/screenMixins.js @@ -1,5 +1,236 @@ +import { Revoke } from "@/utils/revoke"; +import { getToken } from "@/utils/auth"; +import { insertDashboard, detailDashboard, importDashboard, exportDashboard, } from "@/api/bigscreen"; const mixin = { + data() { + return { + uploadUrl: process.env.BASE_API + "/reportDashboard/import/" + this.$route.query.reportCode, + rightClickIndex: -1, + } + }, + computed: { + step() { + return Number(100 / (this.bigscreenScaleInWorkbench * 100)); + }, + headers() { + return { + Authorization: getToken(), + }; + }, + // 初始的缩放百分比 和 下标 + defaultSize() { + const obj = { + index: -1, + size: "50", + }; + this.sizeRange.some((item, index) => { + if (item <= 100 * this.bigscreenScaleInWorkbench) { + obj.index = index; + obj.size = 100 * this.bigscreenScaleInWorkbench; // item + } + }); + if (obj.index === -1) { + obj.index = 0; + obj.size = this.sizeRange[0]; + } + return obj; + }, + }, + watch: { + defaultSize: { + handler(val) { + if (val !== -1) { + this.currentSizeRangeIndex = val.index; + this.scaleNum = val.size; + } + }, + immediate: true, + }, + bigscreenWidth() { + this.initVueRulerTool(); + }, + bigscreenHeight() { + this.initVueRulerTool(); + }, + }, + created() { + this.revoke = new Revoke(); + this.initEchartData(); + }, methods: { + /** + * @param num: 0缩小 1放大 2默认比例 + * sizeRange: [20, 40, 60, 72, 100, 150, 200, 300, 400] + */ + setSize(num) { + if (num === 0) { + // 缩小 + if (this.currentSizeRangeIndex === 0) return; + this.currentSizeRangeIndex -= 1; + } else if (num === 1) { + // 放大 + if (this.currentSizeRangeIndex === 8) return; + this.currentSizeRangeIndex += 1; + } else if (num === 2) { + // 正常比例 + this.currentSizeRangeIndex = this.defaultSize.index; + } + this.scaleNum = + this.currentSizeRangeIndex === this.defaultSize.index + ? this.defaultSize.size + : this.sizeRange[this.currentSizeRangeIndex]; + }, + // 初始化 修正插件样式 + initVueRulerTool() { + const vueRulerToolDom = this.$refs["vue-ruler-tool"].$el; // 操作面板 第三方插件工具 + const contentDom = vueRulerToolDom.querySelector(".vue-ruler-content"); + const vueRulerX = vueRulerToolDom.querySelector(".vue-ruler-h"); // 横向标尺 + const vueRulerY = vueRulerToolDom.querySelector(".vue-ruler-v"); // 纵向标尺 + // vueRulerToolDom.style.cssText += ';width:' + (this.bigscreenWidth + 18) + 'px !important;height:' + (this.bigscreenHeight + 18) + 'px !important;' + contentDom.style.width = "100%"; + contentDom.style.height = "100%"; + + let xHtmlContent = ""; // '0' + let yHtmlContent = ""; // '0' + let currentNum = 0; + while (currentNum < +this.bigscreenWidth) { + xHtmlContent += `${currentNum}`; + currentNum += 50; + } + currentNum = 0; + while (currentNum < +this.bigscreenHeight) { + yHtmlContent += `${currentNum}`; + currentNum += 50; + } + vueRulerX.innerHTML = xHtmlContent; + vueRulerY.innerHTML = yHtmlContent; + }, + async initEchartData() { + const reportCode = this.$route.query.reportCode; + const { code, data } = await detailDashboard(reportCode); + if (code != 200) return; + const processData = this.handleInitEchartsData(data); + const screenData = this.handleBigScreen(data.dashboard); + this.widgets = processData; + this.dashboard = screenData; + this.bigscreenWidth = this.dashboard.width; + this.bigscreenHeight = this.dashboard.height; + }, + // 保存数据 + async saveData() { + if (!this.widgets || this.widgets.length == 0) { + return this.$message.error("请添加组件"); + } + const screenData = { + reportCode: this.$route.query.reportCode, + dashboard: { + title: this.dashboard.title, + width: this.dashboard.width, + height: this.dashboard.height, + backgroundColor: this.dashboard.backgroundColor, + backgroundImage: this.dashboard.backgroundImage, + }, + widgets: this.widgets, + }; + screenData.widgets.forEach((widget) => { + widget.value.setup.widgetId = widget.value.widgetId; + }); + const { code, data } = await insertDashboard(screenData); + if (code == "200") { + this.$message.success("保存成功！"); + } + }, + viewScreen() { + let routeUrl = this.$router.resolve({ + path: "/bigscreen/viewer", + query: { reportCode: this.$route.query.reportCode }, + }); + window.open(routeUrl.href, "_blank"); + }, + async exportDashboard(val) { + const fileName = this.$route.query.reportCode + ".zip"; + + const param = { + reportCode: this.$route.query.reportCode, + showDataSet: val, + }; + exportDashboard(param).then((res) => { + const that = this; + const type = res.type; + if (type == "application/json") { + let reader = new FileReader(); + reader.readAsText(res, "utf-8"); + reader.onload = function () { + const data = JSON.parse(reader.result); + that.$message.error(data.message); + }; + return; + } + const blob = new Blob([res], { type: "application/octet-stream" }); + if (window.navigator.msSaveOrOpenBlob) { + //msSaveOrOpenBlob方法返回bool值 + navigator.msSaveBlob(blob, fileName); //本地保存 + } else { + const link = document.createElement("a"); //a标签下载 + link.href = window.URL.createObjectURL(blob); + link.download = fileName; + link.click(); + window.URL.revokeObjectURL(link.href); + } + }); + }, + handleUndo() { + const record = this.revoke.undo(); + if (!record) { + return false; + } + this.widgets = record; + }, + handleRedo() { + const record = this.revoke.redo(); + 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", + }); + }, + // 右键 + rightClick(event, index) { + this.rightClickIndex = index; + const left = event.clientX; + const top = event.clientY; + if (left || top) { + this.styleObj = { + left: left + "px", + top: top + "px", + display: "block", + }; + } + this.visibleContentMenu = true; + return false; + }, // 数组 元素互换位置 swapArr(arr, oldIndex, newIndex) { arr[oldIndex] = arr.splice(newIndex, 1, arr[oldIndex])[0]; diff --git a/report-ui/src/views/bigscreenDesigner/designer/index.vue b/report-ui/src/views/bigscreenDesigner/designer/index.vue index e8bfe268..67e0c84a 100644 --- a/report-ui/src/views/bigscreenDesigner/designer/index.vue +++ b/report-ui/src/views/bigscreenDesigner/designer/index.vue @@ -130,13 +130,9 @@ content="缩小" placement="bottom" > - - - @@ -228,10 +223,6 @@ -
{ - if (item <= 100 * this.bigscreenScaleInWorkbench) { - obj.index = index; - obj.size = 100 * this.bigscreenScaleInWorkbench; // item - } - }); - if (obj.index === -1) { - obj.index = 0; - obj.size = this.sizeRange[0]; - } - return obj; - }, // 大屏在设计模式的大小 bigscreenWidthInWorkbench() { return this.getPXUnderScale(this.bigscreenWidth) + this.widthPaddingTools; @@ -538,29 +478,8 @@ export default { }, deep: true, }, - defaultSize: { - handler(val) { - if (val !== -1) { - this.currentSizeRangeIndex = val.index; - this.scaleNum = val.size; - } - }, - immediate: true, - }, - bigscreenWidth() { - this.initVueRulerTool(); - }, - bigscreenHeight() { - this.initVueRulerTool(); - }, - }, - created() { - /* 以下是记录历史的 */ - this.revoke = new Revoke(); }, mounted() { - // 如果是新的设计工作台 - this.initEchartData(); this.widgets = []; window.addEventListener("mouseup", () => { this.grade = false; @@ -570,81 +489,6 @@ export default { }); }, methods: { - /** - * @param num: 0缩小 1放大 2默认比例 - * sizeRange: [20, 40, 60, 72, 100, 150, 200, 300, 400] - */ - setSize(num) { - if (num === 0) { - // 缩小 - if (this.currentSizeRangeIndex === 0) return; - this.currentSizeRangeIndex -= 1; - } else if (num === 1) { - // 放大 - if (this.currentSizeRangeIndex === 8) return; - this.currentSizeRangeIndex += 1; - } else if (num === 2) { - // 正常比例 - this.currentSizeRangeIndex = this.defaultSize.index; - } - this.scaleNum = - this.currentSizeRangeIndex === this.defaultSize.index - ? this.defaultSize.size - : this.sizeRange[this.currentSizeRangeIndex]; - }, - // 初始化 修正插件样式 - initVueRulerTool() { - const vueRulerToolDom = this.$refs["vue-ruler-tool"].$el; // 操作面板 第三方插件工具 - const contentDom = vueRulerToolDom.querySelector(".vue-ruler-content"); - const vueRulerX = vueRulerToolDom.querySelector(".vue-ruler-h"); // 横向标尺 - const vueRulerY = vueRulerToolDom.querySelector(".vue-ruler-v"); // 纵向标尺 - // vueRulerToolDom.style.cssText += ';width:' + (this.bigscreenWidth + 18) + 'px !important;height:' + (this.bigscreenHeight + 18) + 'px !important;' - contentDom.style.width = "100%"; - contentDom.style.height = "100%"; - - let xHtmlContent = ""; // '0' - let yHtmlContent = ""; // '0' - let currentNum = 0; - while (currentNum < +this.bigscreenWidth) { - xHtmlContent += `${currentNum}`; - currentNum += 50; - } - currentNum = 0; - while (currentNum < +this.bigscreenHeight) { - yHtmlContent += `${currentNum}`; - currentNum += 50; - } - vueRulerX.innerHTML = xHtmlContent; - vueRulerY.innerHTML = yHtmlContent; - }, - /** - * @description: 恢复 - * @param {*} - * @return {*} - */ - handleUndo() { - const record = this.revoke.undo(); - if (!record) { - return false; - } - this.widgets = record; - }, - /** - * @description: 重做 - * @param {*} - * @return {*} - */ - handleRedo() { - const record = this.revoke.redo(); - if (!record) { - return false; - } - this.widgets = record; - }, handlerLayerWidget(val) { const layerWidgetArr = []; for (let i = 0; i < val.length; i++) { @@ -672,17 +516,6 @@ export default { return item.value.data; }); }, - async initEchartData() { - const reportCode = this.$route.query.reportCode; - const { code, data } = await detailDashboard(reportCode); - if (code != 200) return; - const processData = this.handleInitEchartsData(data); - const screenData = this.handleBigScreen(data.dashboard); - this.widgets = processData; - this.dashboard = screenData; - this.bigscreenWidth = this.dashboard.width; - this.bigscreenHeight = this.dashboard.height; - }, handleBigScreen(data) { const optionScreen = getToolByCode("screen").options; const setup = optionScreen.setup; @@ -771,97 +604,6 @@ export default { } return option; }, - // 保存数据 - async saveData() { - if (!this.widgets || this.widgets.length == 0) { - this.$message.error("请添加组件"); - return; - } - const screenData = { - reportCode: this.$route.query.reportCode, - dashboard: { - title: this.dashboard.title, - width: this.dashboard.width, - height: this.dashboard.height, - backgroundColor: this.dashboard.backgroundColor, - backgroundImage: this.dashboard.backgroundImage, - }, - widgets: this.widgets, - }; - screenData.widgets.forEach((widget) => { - widget.value.setup.widgetId = widget.value.widgetId; - }); - const { code, data } = await insertDashboard(screenData); - if (code == "200") { - this.$message.success("保存成功！"); - } - }, - // 预览 - viewScreen() { - let routeUrl = this.$router.resolve({ - path: "/bigscreen/viewer", - query: { reportCode: this.$route.query.reportCode }, - }); - window.open(routeUrl.href, "_blank"); - }, - // 导出 - async exportDashboard(val) { - const fileName = this.$route.query.reportCode + ".zip"; - - const param = { - reportCode: this.$route.query.reportCode, - showDataSet: val, - }; - exportDashboard(param).then((res) => { - const that = this; - const type = res.type; - if (type == "application/json") { - let reader = new FileReader(); - reader.readAsText(res, "utf-8"); - reader.onload = function () { - const data = JSON.parse(reader.result); - that.$message.error(data.message); - }; - return; - } - - const blob = new Blob([res], { type: "application/octet-stream" }); - if (window.navigator.msSaveOrOpenBlob) { - //msSaveOrOpenBlob方法返回bool值 - navigator.msSaveBlob(blob, fileName); //本地保存 - } else { - const link = document.createElement("a"); //a标签下载 - link.href = window.URL.createObjectURL(blob); - link.download = fileName; - link.click(); - window.URL.revokeObjectURL(link.href); - } - }); - }, - // 上传成功的回调 - handleUpload(response, file, fileList) { - //清除el-upload组件中的文件 - 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", - }); - }, // 在缩放模式下的大小 getPXUnderScale(px) { @@ -952,7 +694,6 @@ export default { // 激活新组件的配置属性 this.setOptionsOnClickWidget(this.widgets.length - 1); }, - // 对组件默认值处理 handleDefaultValue(widgetJson) { for (const key in widgetJson) { @@ -1005,7 +746,6 @@ export default { this.activeName = "first"; this.widgetOptions = getToolByCode("screen")["options"]; }, - // 如果是点击某个组件，获取该组件的配置项 setOptionsOnClickWidget(obj) { this.screenCode = ""; @@ -1054,7 +794,7 @@ export default { console.log("val", val); console.log(this.widgetOptions); if (this.screenCode == "screen") { - let newSetup = new Array(); + let newSetup = []; this.dashboard = this.deepClone(val); console.log("asd", this.dashboard); console.log(this.widgetOptions); @@ -1085,20 +825,6 @@ export default { } } }, - rightClick(event, index) { - this.rightClickIndex = index; - const left = event.clientX; - const top = event.clientY; - if (left || top) { - this.styleObj = { - left: left + "px", - top: top + "px", - display: "block", - }; - } - this.visibleContentMenu = true; - return false; - }, setDefaultValue(options, val) { for (let i = 0; i < options.length; i++) { if (Object.prototype.toString.call(options[i]) == "[object Object]") {