Skip to content

S
Skyeye

doc_wei / Skyeye

通知 1173
Star 154
Fork 127
S
Skyeye
提交 ec08e873 编写于 作者: doc_wei's avatar doc_wei
浏览文件
操作

feat: 报表设计新增装饰模型

上级 b7a0dd76
隐藏空白更改
内联 并排
Showing with 248 addition and 23 deletion
common/src/main/resources/template/tpl/dsFormPage/pageShow.html
浏览文件 @ ec08e873
......@@ -5,6 +5,7 @@
<title></title>
<link href="../../assets/lib/layui/css/layui.css" rel="stylesheet" />
<link href="../../assets/lib/winui/css/winui.css" rel="stylesheet" />
<link href="../../assets/lib/layui/css/codemirror.css" rel="stylesheet" />
</head>
<body>
......
report/src/main/resources/template/assets/report/css/ruler.css
浏览文件 @ ec08e873
......@@ -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;
......
report/src/main/resources/template/assets/report/js/skyeyeReportDesigner.js
浏览文件 @ ec08e873
......@@ -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 += '<a class="li domModle layui-col-xs3" href="javascript:void(0);" rowId="' + bean.id + '" title="' + bean.name + '">' +
'<img class="image" src="' + bean.imgPath + '"/>' +
'<span class="text">' + bean.name + '</span>' +
'</a>';
});
str += '</div>' +
'</div>' +
'</div>';
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)) {
......
report/src/main/resources/template/js/pageReportDesign/pageReportDesign.js
浏览文件 @ ec08e873
......@@ -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": "图表",
......
report/src/main/resources/template/js/reportPage/reportPageShow.js
浏览文件 @ ec08e873
......@@ -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");
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或