diff --git a/common/src/main/resources/template/tpl/dsFormPage/pageShow.html b/common/src/main/resources/template/tpl/dsFormPage/pageShow.html
index 0a79f0426e61583be743b3fb78cde5b1bebccd07..41cb99a82d97f95d5abf5cf1eb5358096c9e6c08 100644
--- a/common/src/main/resources/template/tpl/dsFormPage/pageShow.html
+++ b/common/src/main/resources/template/tpl/dsFormPage/pageShow.html
@@ -5,6 +5,7 @@
+
diff --git a/report/src/main/resources/template/assets/report/css/ruler.css b/report/src/main/resources/template/assets/report/css/ruler.css
index 7b656c3143644ccb231018c59b3587bbd959c688..553d9684baab1fac4a99cedaa76b373c8ef3f482 100644
--- a/report/src/main/resources/template/assets/report/css/ruler.css
+++ b/report/src/main/resources/template/assets/report/css/ruler.css
@@ -296,24 +296,7 @@ body {
cursor: e-resize;
}
-.echarts-box {
- width: 100%;
- height: 100%;
-}
-
-.table-box {
- width: 100%;
- height: 100%;
- position: absolute;
-}
-
-.word-box{
- width: 100%;
- height: 100%;
- position: absolute;
-}
-
-.img-box{
+.img-box, .dom-box, .word-box, .table-box, .echarts-box {
width: 100%;
height: 100%;
position: absolute;
diff --git a/report/src/main/resources/template/assets/report/js/skyeyeReportDesigner.js b/report/src/main/resources/template/assets/report/js/skyeyeReportDesigner.js
index f0e177cd336b32aba82ca74336ae38bce0fbb835..58de945edf218ae2c0b24c5b577fed97b5fe1bf7 100644
--- a/report/src/main/resources/template/assets/report/js/skyeyeReportDesigner.js
+++ b/report/src/main/resources/template/assets/report/js/skyeyeReportDesigner.js
@@ -13,6 +13,9 @@ var inPageWordMation = {};
// 已经添加上的文字模型
var inPageImgMation = {};
+// 已经添加上的装饰模型
+var inPageDomMation = {};
+
// 支持的编辑器类型
var editorType = {};
@@ -65,6 +68,16 @@ var imgCustomOptions = {
"optionalValue": [{"id": "solid", "name": "实线"}, {"id": "dashed", "name": "虚线"}]}
};
+// 装饰自定义属性
+var domCustomOptions = {
+ "custom.move.x": { "value": "0", "edit": 1, "remark": "鼠标拖动距离左侧的像素", "name": "X坐标", "editorType": "98", "editorChooseValue": "", "typeName": "坐标"},
+ "custom.move.y": { "value": "0", "edit": 1, "remark": "鼠标拖动距离顶部的像素", "name": "Y坐标", "editorType": "98", "editorChooseValue": "", "typeName": "坐标"},
+ "custom.box.border-color": { "value": "", "edit": 1, "remark": "盒子边框颜色", "name": "边框颜色", "editorType": "3", "editorChooseValue": "", "typeName": "盒子"},
+ "custom.box.border-width": { "value": "0", "edit": 1, "remark": "盒子边框宽度", "name": "边框宽度", "editorType": "4", "editorChooseValue": "", "typeName": "盒子"},
+ "custom.box.border-style": { "defaultValue": "solid", "edit": 1, "remark": "盒子边框样式", "name": "边框样式", "editorType": "1", "editorChooseValue": "", "typeName": "盒子",
+ "optionalValue": [{"id": "solid", "name": "实线"}, {"id": "dashed", "name": "虚线"}]}
+};
+
layui.define(["jquery", 'form', 'element'], function(exports) {
var jQuery = layui.jquery;
form = layui.form;
@@ -176,8 +189,9 @@ layui.define(["jquery", 'form', 'element'], function(exports) {
str = f.getWordModelHtml(item, str);
} else if(item.id == 'imgModel') {
str = f.getImgModelHtml(item, str);
+ } else if(item.id == 'domModel') {
+ str = f.getDomModelHtml(item, str);
} else if(item.id == 'tableModel') {
- // todo 待定
str = f.getTableModelHtml(item, str);
} else {
str = f.getEchartsHtml(item, str);
@@ -256,6 +270,21 @@ layui.define(["jquery", 'form', 'element'], function(exports) {
return str;
},
+ // 标题按钮--装饰模型获取html
+ getDomModelHtml: function(item, str) {
+ str = f.getCommonParentHeader(str, item);
+ $.each(item.children, function (j, bean) {
+ str += '' +
+ '
' +
+ '' + bean.name + '' +
+ '';
+ });
+ str += '' +
+ '' +
+ '';
+ return str;
+ },
+
// 标题按钮--文字模型获取html
getWordModelHtml: function(item, str) {
str = f.getCommonParentHeader(str, item);
@@ -334,6 +363,13 @@ layui.define(["jquery", 'form', 'element'], function(exports) {
f.addNewImgModel(modelId, imgModelMation);
});
+ // 装饰模型点击事件
+ skyeyeHeader.find(".domModle").click(function () {
+ var modelId = $(this).attr("rowId");
+ var domModelMation = f.getDomStyleMationById(modelId);
+ f.addNewDomModel(modelId, domModelMation);
+ });
+
// 表格模型点击事件
skyeyeHeader.find(".tableModel").click(function () {
var modelId = $(this).attr("rowId");
@@ -472,6 +508,18 @@ layui.define(["jquery", 'form', 'element'], function(exports) {
return boxId;
},
+ // 加载装饰模型
+ addNewDomModel: function(modelId, domStyleMation) {
+ // 加入页面属性
+ domStyleMation.attr = $.extend(true, {}, domCustomOptions, domStyleMation.attr);
+ // 获取boxId
+ var boxId = modelId + getRandomValueToString();
+ // 获取图片模型id
+ var domId = f.getDomBox(boxId, modelId, domStyleMation);
+ inPageDomMation[boxId] = $.extend(true, {}, domStyleMation);
+ return boxId;
+ },
+
// 根据id获取echarts信息
getEchartsMationById: function(id) {
var echartsMation;
@@ -508,6 +556,18 @@ layui.define(["jquery", 'form', 'element'], function(exports) {
return imgMation;
},
+ // 根据id获取装饰信息
+ getDomStyleMationById: function(id) {
+ var domMation;
+ $.each(params.headerMenuJson, function(i, item) {
+ if (!f.isNull(item.children) && item.id == 'domModel') {
+ domMation = getInPoingArr(item.children, "id", id);
+ return false;
+ }
+ });
+ return domMation;
+ },
+
getEchartsBox: function (boxId, modelId) {
var echartsId = "echarts" + boxId;
var echartsBox = document.createElement("div");
@@ -568,6 +628,30 @@ layui.define(["jquery", 'form', 'element'], function(exports) {
return imgId;
},
+ getDomBox: function (boxId, modelId, domStyleMation) {
+ var box = f.createBox(boxId, modelId, f.setDesignAttr(domStyleMation));
+
+ var domId = "dom" + boxId;
+ var domBox = document.createElement("div");
+ // 为div设置类名
+ domBox.className = "dom-box";
+ domBox.id = "label-" + domId;
+ domBox.onmousedown = ee => {
+ var id = $("#" + domId).parent().attr("id");
+ f.setMoveEvent(ee, $("#" + id));
+ // 阻止事件冒泡（针对父元素的move）
+ ee.stopPropagation();
+ };
+ box.appendChild(domBox);
+ var dom = document.createElement("div");
+ dom.id = domId;
+ dom.innerHTML = domStyleMation.content;
+ dom.style.width = "100%";
+ dom.style.height = "100%";
+ box.appendChild(dom);
+ return domId;
+ },
+
setDesignAttr: function(wordStyleMation) {
var otherStyle = {
width: wordStyleMation.defaultWidth + 'px',
@@ -793,7 +877,7 @@ layui.define(["jquery", 'form', 'element'], function(exports) {
// 不触发‘移除所有图表的编辑信息’的事件的对象的class--颜色选择器
var notTriggerRemove = ["layui-colorpicker-main", "layui-anim-scaleSpring"];
// 图表点击事件
- $("body").on('click', ".echarts-box, .word-box, .img-box, .table-box", function (e) {
+ $("body").on('click', ".echarts-box, .word-box, .img-box, .dom-box, .table-box", function (e) {
f.setChooseReportItem($(this));
e.stopPropagation();
});
@@ -832,6 +916,7 @@ layui.define(["jquery", 'form', 'element'], function(exports) {
var eachartsList = f.getEchartsListToSave();
var wordMationList = f.getWordMationListToSave();
var imgMationList = f.getImgMationListToSave();
+ var domMationList = f.getDomMationListToSave();
var tableMationList = f.getTableListToSave();
var bgImage = skyeyeReportContent.css("backgroundImage").replace('url(', '').replace(')', '');
@@ -845,6 +930,7 @@ layui.define(["jquery", 'form', 'element'], function(exports) {
modelList: eachartsList,
wordMationList: wordMationList,
imgMationList: imgMationList,
+ domMationList: domMationList,
tableMationList: tableMationList
};
AjaxPostUtil.request({url: sysMainMation.reportBasePath + "editReportPageContentById", params: {id: id, content: encodeURIComponent(JSON.stringify(params))}, type: 'json', method: "POST", callback: function(json) {
@@ -906,6 +992,23 @@ layui.define(["jquery", 'form', 'element'], function(exports) {
return imgMationList;
},
+ getDomMationListToSave: function () {
+ var domMationList = new Array();
+ $.each(skyeyeReportContent.find(".kuang"), function(i, item) {
+ if ($(item).find(".dom-box").length > 0) {
+ var boxId = $(item).data("boxId");
+ var domMation = inPageDomMation[boxId];
+ domMationList.push({
+ modelId: $(item).data("modelId"),
+ attrMation: domMation,
+ width: $(item).width(),
+ height: $(item).height()
+ });
+ }
+ });
+ return domMationList;
+ },
+
getWordMationListToSave: function () {
var wordMationList = new Array();
$.each(skyeyeReportContent.find(".kuang"), function(i, item) {
@@ -1134,6 +1237,8 @@ layui.define(["jquery", 'form', 'element'], function(exports) {
f.initWordMationData(widthScale, heightScale);
// 初始化小图片模型
f.initImgMationData(widthScale, heightScale);
+ // 初始化装饰模型
+ f.initDomMationData(widthScale, heightScale);
// 初始化背景
if(!f.isNull(params.initData.bgImage)){
skyeyeReportContent.css({
@@ -1228,6 +1333,27 @@ layui.define(["jquery", 'form', 'element'], function(exports) {
}
},
+ initDomMationData: function(widthScale, heightScale) {
+ var domMationList = params.initData.domMationList;
+ if (!f.isNull(domMationList)) {
+ $.each(domMationList, function (i, item) {
+ var leftNum = multiplication(item.attrMation.attr["custom.move.x"].defaultValue, widthScale);
+ var topNum = multiplication(item.attrMation.attr["custom.move.y"].defaultValue, heightScale);
+ item.attrMation.attr["custom.move.x"].defaultValue = leftNum;
+ item.attrMation.attr["custom.move.y"].defaultValue = topNum;
+ var boxId = f.addNewDomModel(item.modelId, item.attrMation);
+ $("#" + boxId).css({
+ left: leftNum + "px",
+ top: topNum + "px",
+ width: multiplication(item.width, widthScale),
+ height: multiplication(item.height, heightScale)
+ });
+ // 设置custom.box开头的属性值
+ setCustomBoxAttr(domCustomOptions, boxId, item);
+ });
+ }
+ },
+
// 初始化执行
init: function() {
f.box();
@@ -1328,6 +1454,8 @@ function dataValueChange(value, _this) {
resetWordModel(boxId);
} else if(_chooseMation.menuType == 'imgModel') {
resetImgModel(boxId);
+ } else if(_chooseMation.menuType == 'domModel') {
+ resetDomModel(boxId);
} else if(_chooseMation.menuType == 'tableModel') {
resetTableModel(boxId);
}
@@ -1356,6 +1484,10 @@ function resetImgModel(boxId) {
var imgMation = inPageImgMation[boxId];
}
+function resetDomModel(boxId) {
+ var domMation = inPageDomMation[boxId];
+}
+
function resetTableModel(boxId) {
var tableMation = inPageTable[boxId]
tableMation.tableColumnList = tableMation.attr['custom.tableColumn'].defaultValue
@@ -1380,6 +1512,12 @@ function getDataChooseMation(boxId) {
_object.menuType = 'imgModel';
}
}
+ if (isNull(_object)) {
+ _object = inPageDomMation[boxId];
+ if (!isNull(_object)) {
+ _object.menuType = 'domModel';
+ }
+ }
if (isNull(_object)) {
_object = inPageTable[boxId];
if (!isNull(_object)) {
diff --git a/report/src/main/resources/template/js/pageReportDesign/pageReportDesign.js b/report/src/main/resources/template/js/pageReportDesign/pageReportDesign.js
index b0599e439a028a4c5c746015e53717aec6caed18..3cabac516d7dca7f5ce61caf63064b03a70aca51 100644
--- a/report/src/main/resources/template/js/pageReportDesign/pageReportDesign.js
+++ b/report/src/main/resources/template/js/pageReportDesign/pageReportDesign.js
@@ -36,8 +36,14 @@ layui.config({
var imgModel = {};
// 获取所有小图片列表信息
AjaxPostUtil.request({url: sysMainMation.reportBasePath + "queryAllEnabledImgModelList", params: {}, type: 'json', method: "GET", callback: function(json) {
- imgModel = json.rows;
- }, async: false});
+ imgModel = json.rows;
+ }, async: false});
+
+ var domModel = {};
+ // 获取所有装饰列表信息
+ AjaxPostUtil.request({url: sysMainMation.reportBasePath + "queryAllEnabledDomModelList", params: {}, type: 'json', method: "GET", callback: function(json) {
+ domModel = json.rows;
+ }, async: false});
var initData = {};
// 获取初始化数据
@@ -66,6 +72,11 @@ layui.config({
"title": "小图片",
"id": "imgModel",
"children": imgModel
+ }, {
+ "icon": " fa fa-photo-video fa-fw",
+ "title": "装饰",
+ "id": "domModel",
+ "children": domModel
}, {
"icon": " fa fa-area-chart fa-fw",
"title": "图表",
diff --git a/report/src/main/resources/template/js/reportPage/reportPageShow.js b/report/src/main/resources/template/js/reportPage/reportPageShow.js
index f1cd884d34553bd6a93dcdf6de7160a70fb9fb06..2f2f2ca947fe6281f52f148b2dc6e06f3fcb6b2d 100644
--- a/report/src/main/resources/template/js/reportPage/reportPageShow.js
+++ b/report/src/main/resources/template/js/reportPage/reportPageShow.js
@@ -26,6 +26,8 @@ layui.config({
initEchartsData(widthScale, heightScale);
initWordMationData(widthScale, heightScale);
initTableMationData(widthScale, heightScale);
+ initImgMationData(widthScale, heightScale);
+ initDomMationData(widthScale, heightScale);
if (!isNull(initData.bgImage)){
content.css({
@@ -103,6 +105,48 @@ layui.config({
}
}
+ function initImgMationData(widthScale, heightScale) {
+ var imgMationList = initData.imgMationList;
+ if (!isNull(imgMationList)) {
+ $.each(imgMationList, function (i, item) {
+ var leftNum = multiplication(item.attrMation.attr["custom.move.x"].defaultValue, widthScale);
+ var topNum = multiplication(item.attrMation.attr["custom.move.y"].defaultValue, heightScale);
+ item.attrMation.attr["custom.move.x"].defaultValue = leftNum;
+ item.attrMation.attr["custom.move.y"].defaultValue = topNum;
+ var boxId = addNewImgModel(item.modelId, item.attrMation);
+ $("#" + boxId).css({
+ left: leftNum + "px",
+ top: topNum + "px",
+ width: multiplication(item.width, widthScale),
+ height: multiplication(item.height, heightScale)
+ });
+ // 设置custom.box开头的属性值
+ setCustomBoxAttr(wordCustomOptions, boxId, item);
+ });
+ }
+ }
+
+ function initDomMationData(widthScale, heightScale) {
+ var domMationList = initData.domMationList;
+ if (!isNull(domMationList)) {
+ $.each(domMationList, function (i, item) {
+ var leftNum = multiplication(item.attrMation.attr["custom.move.x"].defaultValue, widthScale);
+ var topNum = multiplication(item.attrMation.attr["custom.move.y"].defaultValue, heightScale);
+ item.attrMation.attr["custom.move.x"].defaultValue = leftNum;
+ item.attrMation.attr["custom.move.y"].defaultValue = topNum;
+ var boxId = addNewDomModel(item.modelId, item.attrMation);
+ $("#" + boxId).css({
+ left: leftNum + "px",
+ top: topNum + "px",
+ width: multiplication(item.width, widthScale),
+ height: multiplication(item.height, heightScale)
+ });
+ // 设置custom.box开头的属性值
+ setCustomBoxAttr(wordCustomOptions, boxId, item);
+ });
+ }
+ }
+
function getContentStr(str) {
if (!isNull(str)) {
str = str.replace(/%/g, '%25');
@@ -214,6 +258,29 @@ layui.config({
return boxId;
}
+ function addNewImgModel(modelId, imgStyleMation) {
+ // 加入页面属性
+ imgStyleMation.attr = $.extend(true, {}, imgCustomOptions, imgStyleMation.attr);
+ // 获取boxId
+ var boxId = modelId + getRandomValueToString();
+ // 获取图片模型id
+ var imgId = getImgBox(boxId, modelId, imgStyleMation);
+ inPageImgMation[boxId] = $.extend(true, {}, imgStyleMation);
+ return boxId;
+ }
+
+ // 加载装饰模型
+ function addNewDomModel(modelId, domStyleMation) {
+ // 加入页面属性
+ domStyleMation.attr = $.extend(true, {}, domCustomOptions, domStyleMation.attr);
+ // 获取boxId
+ var boxId = modelId + getRandomValueToString();
+ // 获取图片模型id
+ var domId = getDomBox(boxId, modelId, domStyleMation);
+ inPageDomMation[boxId] = $.extend(true, {}, domStyleMation);
+ return boxId;
+ }
+
function getEchartsBox(boxId, modelId) {
var echartsId = "echarts" + boxId;
var echartsBox = document.createElement("div");
@@ -232,10 +299,35 @@ layui.config({
var table = document.createElement("table");
table.id = tableBoxId;
box.appendChild(table);
-
return tableBoxId;
}
+ function getImgBox(boxId, modelId, imgStyleMation) {
+ var box = createBox(boxId, modelId, setDesignAttr(imgStyleMation));
+
+ var imgId = "img" + boxId;
+ var img = document.createElement("img");
+ img.id = imgId;
+ img.src = fileBasePath + imgStyleMation.imgPath;
+ img.style.width = "100%";
+ img.style.height = "100%";
+ box.appendChild(img);
+ return imgId;
+ }
+
+ function getDomBox(boxId, modelId, domStyleMation) {
+ var box = createBox(boxId, modelId, setDesignAttr(domStyleMation));
+
+ var domId = "dom" + boxId;
+ var dom = document.createElement("div");
+ dom.id = domId;
+ dom.innerHTML = domStyleMation.content;
+ dom.style.width = "100%";
+ dom.style.height = "100%";
+ box.appendChild(dom);
+ return domId;
+ }
+
function getWordBox(boxId, modelId, styleStr, wordStyleMation) {
var wordId = "word" + boxId;
var wordBox = document.createElement("font");