diff --git a/report-ui/src/mixins/common.js b/report-ui/src/mixins/common.js
index 42a5258c..f4dfba9e 100644
--- a/report-ui/src/mixins/common.js
+++ b/report-ui/src/mixins/common.js
@@ -291,7 +291,7 @@ export default {
}
},
isObjectFn(value) {
- return Object.prototype.toString.call(value) === "[object Array]";
+ return Object.prototype.toString.call(value) === "[object Object]";
},
urlEncode(val) {
return encodeURIComponent(val)
diff --git a/report-ui/src/utils/screenMixins.js b/report-ui/src/utils/screenMixins.js
index 96031f14..5d345279 100644
--- a/report-ui/src/utils/screenMixins.js
+++ b/report-ui/src/utils/screenMixins.js
@@ -1,10 +1,12 @@
import { Revoke } from "@/utils/revoke";
import { getToken } from "@/utils/auth";
-import { insertDashboard, detailDashboard, importDashboard, exportDashboard, } from "@/api/bigscreen";
+import { getToolByCode } from "@/views/bigscreenDesigner/designer/tools/index";
+import { insertDashboard, detailDashboard, exportDashboard, } from "@/api/bigscreen";
const mixin = {
data() {
return {
- uploadUrl: process.env.BASE_API + "/reportDashboard/import/" + this.$route.query.reportCode,
+ reportCode: this.$route.query.reportCode,
+ uploadUrl: process.env.BASE_API + "/reportDashboard/import/" + this.reportCode,
rightClickIndex: -1,
}
},
@@ -26,7 +28,7 @@ const mixin = {
this.sizeRange.some((item, index) => {
if (item <= 100 * this.bigscreenScaleInWorkbench) {
obj.index = index;
- obj.size = 100 * this.bigscreenScaleInWorkbench; // item
+ obj.size = 100 * this.bigscreenScaleInWorkbench;
}
});
if (obj.index === -1) {
@@ -55,7 +57,7 @@ const mixin = {
},
created() {
this.revoke = new Revoke();
- this.initEchartData();
+ this.getData();
},
methods: {
/**
@@ -63,22 +65,14 @@ const mixin = {
* 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;
+ switch (num) {
+ case 0: this.currentSizeRangeIndex === 0 ? '' : this.currentSizeRangeIndex -= 1;
+ break;
+ case 1: this.currentSizeRangeIndex === 8 ? '' : this.currentSizeRangeIndex += 1;
+ break;
+ case 2: this.currentSizeRangeIndex = this.defaultSize.index;
}
- this.scaleNum =
- this.currentSizeRangeIndex === this.defaultSize.index
- ? this.defaultSize.size
- : this.sizeRange[this.currentSizeRangeIndex];
+ this.scaleNum = this.currentSizeRangeIndex === this.defaultSize.index ? this.defaultSize.size : this.sizeRange[this.currentSizeRangeIndex];
},
// 初始化 修正插件样式
initVueRulerTool() {
@@ -86,52 +80,106 @@ const mixin = {
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 xHtmlContent = "";
+ let yHtmlContent = "";
let currentNum = 0;
while (currentNum < +this.bigscreenWidth) {
- xHtmlContent += `${currentNum}`;
+ xHtmlContent += `${currentNum}`;
currentNum += 50;
}
currentNum = 0;
while (currentNum < +this.bigscreenHeight) {
- yHtmlContent += `${currentNum}`;
+ yHtmlContent += `${currentNum}`;
currentNum += 50;
}
vueRulerX.innerHTML = xHtmlContent;
vueRulerY.innerHTML = yHtmlContent;
},
- async initEchartData() {
- const reportCode = this.$route.query.reportCode;
- const { code, data } = await detailDashboard(reportCode);
+ // 初始化接口数据
+ async getData() {
+ const { code, data } = await detailDashboard(this.reportCode);
if (code != 200) return;
- const processData = this.handleInitEchartsData(data);
- const screenData = this.handleBigScreen(data.dashboard);
- this.widgets = processData;
- this.dashboard = screenData;
+ this.widgets = this.initWidgetsData(data);
+ this.dashboard = this.initScreenData(data.dashboard);
this.bigscreenWidth = this.dashboard.width;
this.bigscreenHeight = this.dashboard.height;
},
+ // 组件数据
+ initWidgetsData(data) {
+ const widgets = data.dashboard ? data.dashboard.widgets : [];
+ const widgetsData = [];
+ for (let i = 0; i < widgets.length; i++) {
+ const widget = widgets[i]
+ const { setup, data, position } = { ...widget.value }
+ const obj = {
+ type: widget.type,
+ value: { setup, data, position }
+ };
+ const tool = this.deepClone(getToolByCode(widget.type));
+ if (!tool) {
+ const message = "暂未提供该组件或该组件下线了,组件code: " + widget.type;
+ if (process.env.NODE_ENV === "development") {
+ this.$message.error(message);
+ }
+ continue; // 找不到就跳过,避免整个报表都加载不出来
+ }
+ obj.options = this.setDefaultWidgetConfigValue(widget.value, tool.options);
+ obj.value.widgetId = obj.value.setup.widgetId;
+ widgetsData.push(obj);
+ }
+ return widgetsData;
+ },
+ // 重写默认数据
+ setDefaultWidgetConfigValue(data, option) {
+ this.setConfigValue(data.setup, option.setup)
+ this.setConfigValue(data.position, option.position)
+ this.setConfigValue(data.data, option.data)
+ return option;
+ },
+ setConfigValue(objValue, setup) {
+ Object.keys(objValue).forEach(key => {
+ setup.forEach(item => {
+ if (this.isObjectFn(item) && key == item.name) {
+ item.value = objValue[key]
+ }
+ if (this.isArrayFn(item)) {
+ item.forEach(itemChild => {
+ itemChild.list.forEach(el => {
+ if (key == el.name) {
+ el.value = objValue[key]
+ }
+ })
+ })
+ }
+ })
+ })
+ },
+ // 大屏数据
+ initScreenData(data) {
+ const optionScreen = getToolByCode("screen").options;
+ this.setConfigValue(data, optionScreen.setup)
+ this.setOptionsOnClickScreen();
+ return {
+ backgroundColor:
+ (data && data.backgroundColor) || (!data ? "#1e1e1e" : ""),
+ backgroundImage: (data && data.backgroundImage) || "",
+ height: (data && data.height) || "1080",
+ title: (data && data.title) || "",
+ width: (data && data.width) || "1920",
+ };
+ },
// 保存数据
async saveData() {
if (!this.widgets || this.widgets.length == 0) {
return this.$message.error("请添加组件");
}
+ const { title, width, height, backgroundColor, backgroundImage } = { ...this.dashboard }
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,
- },
+ reportCode: this.reportCode,
+ dashboard: { title, width, height, backgroundColor, backgroundImage },
widgets: this.widgets,
};
screenData.widgets.forEach((widget) => {
@@ -142,18 +190,19 @@ const mixin = {
this.$message.success("保存成功!");
}
},
+ // 预览
viewScreen() {
let routeUrl = this.$router.resolve({
path: "/bigscreen/viewer",
- query: { reportCode: this.$route.query.reportCode },
+ query: { reportCode: this.reportCode },
});
window.open(routeUrl.href, "_blank");
},
async exportDashboard(val) {
- const fileName = this.$route.query.reportCode + ".zip";
+ const fileName = this.reportCode + ".zip";
const param = {
- reportCode: this.$route.query.reportCode,
+ reportCode: this.reportCode,
showDataSet: val,
};
exportDashboard(param).then((res) => {
diff --git a/report-ui/src/views/bigscreenDesigner/designer/index.vue b/report-ui/src/views/bigscreenDesigner/designer/index.vue
index 67bda382..d3fe7199 100644
--- a/report-ui/src/views/bigscreenDesigner/designer/index.vue
+++ b/report-ui/src/views/bigscreenDesigner/designer/index.vue
@@ -516,94 +516,6 @@ export default {
return item.value.data;
});
},
- handleBigScreen(data) {
- const optionScreen = getToolByCode("screen").options;
- const setup = optionScreen.setup;
- for (const key in data) {
- for (let i = 0; i < setup.length; i++) {
- if (key == setup[i].name) {
- setup[i].value = data[key];
- }
- }
- }
- this.setOptionsOnClickScreen();
- return {
- backgroundColor:
- (data && data.backgroundColor) || (!data ? "#1e1e1e" : ""),
- backgroundImage: (data && data.backgroundImage) || "",
- height: (data && data.height) || "1080",
- title: (data && data.title) || "",
- width: (data && data.width) || "1920",
- };
- },
- handleInitEchartsData(data) {
- const widgets = data.dashboard ? data.dashboard.widgets : [];
- const widgetsData = [];
- for (let i = 0; i < widgets.length; i++) {
- let obj = {};
- obj.type = widgets[i].type;
- obj.value = {
- setup: widgets[i].value.setup,
- data: widgets[i].value.data,
- position: widgets[i].value.position,
- };
- const tool = this.deepClone(getToolByCode(widgets[i].type));
- if (!tool) {
- const message =
- "暂未提供该组件或该组件下线了,组件code: " + widgets[i].type;
- console.error(message);
- if (process.env.NODE_ENV === "development") {
- // 40@remarks 看生产要不要提示
- this.$message.error(message);
- }
- continue; // 找不到就跳过,避免整个报表都加载不出来
- }
- const option = tool.options;
- const options = this.handleOptionsData(widgets[i].value, option);
- obj.options = options;
- obj.value.widgetId = obj.value.setup.widgetId;
- widgetsData.push(obj);
- }
- return widgetsData;
- },
- handleOptionsData(data, option) {
- for (const key in data.setup) {
- for (let i = 0; i < option.setup.length; i++) {
- let item = option.setup[i];
- if (this.isObjectFn(item)) {
- if (key == option.setup[i].name) {
- option.setup[i].value = data.setup[key];
- }
- } else if (this.isArrayFn(item)) {
- for (let j = 0; j < item.length; j++) {
- const list = item[j].list;
- list.forEach((el) => {
- if (key == el.name) {
- el.value = data.setup[key];
- }
- });
- }
- }
- }
- }
- // position
- for (const key in data.position) {
- for (let i = 0; i < option.position.length; i++) {
- if (key == option.position[i].name) {
- option.position[i].value = data.position[key];
- }
- }
- }
- // data
- for (const key in data.data) {
- for (let i = 0; i < option.data.length; i++) {
- if (key == option.data[i].name) {
- option.data[i].value = data.data[key];
- }
- }
- }
- return option;
- },
// 在缩放模式下的大小
getPXUnderScale(px) {