图片套版生成模块

This commit is contained in:
cuibaocheng 2021-04-28 14:03:06 +08:00
parent acef88c3b3
commit 1a877f7236
6 changed files with 158 additions and 111 deletions

View File

@ -118,6 +118,20 @@ public class PicturesTemplateServiceImpl extends DefaultBaseService implements I
} else { } else {
setAppSaveInfo(token, params); setAppSaveInfo(token, params);
} }
// 自定义尺寸做判断
if("-1".equals(picturesTemplateVO.getPicturesTemplateBack())) {
String size = picturesTemplateVO.getPicturesTemplateSize();
if(StringUtils.isEmpty(size)) {
throw new SaveException("自定义尺寸不能为空");
}
String[] arr = size.split("\\*");
if(arr.length != 2) {
throw new SaveException("自定义尺寸不合法");
}
if(!StringUtils.isNumeric(arr[0]) || !StringUtils.isNumeric(arr[1])) {
throw new SaveException("自定义尺寸不合法");
}
}
picturesTemplateDao.savePicturesTemplate(params); picturesTemplateDao.savePicturesTemplate(params);
return picturesTemplateId; return picturesTemplateId;
} }
@ -185,6 +199,20 @@ public class PicturesTemplateServiceImpl extends DefaultBaseService implements I
} else { } else {
setAppUpdateInfo(token, params); setAppUpdateInfo(token, params);
} }
// 自定义尺寸做判断
if("-1".equals(picturesTemplateVO.getPicturesTemplateBack())) {
String size = picturesTemplateVO.getPicturesTemplateSize();
if(StringUtils.isEmpty(size)) {
throw new SaveException("自定义尺寸不能为空");
}
String[] arr = size.split("\\*");
if(arr.length != 2) {
throw new SaveException("自定义尺寸不合法");
}
if(!StringUtils.isNumeric(arr[0]) || !StringUtils.isNumeric(arr[1])) {
throw new SaveException("自定义尺寸不合法");
}
}
picturesTemplateDao.updatePicturesTemplate(params); picturesTemplateDao.updatePicturesTemplate(params);
} }

View File

@ -2,7 +2,7 @@
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd"> <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="cn.com.tenlion.buildingpictures.dao.picturestemplate.IPicturesTemplateDao"> <mapper namespace="cn.com.tenlion.buildingpictures.dao.picturestemplate.IPicturesTemplateDao">
<resultMap id="picturesTemplateDTO" type="cn.com.tenlion.buildingpictures.pojo.dtos.picturestemplatearea.PicturesTemplateAreaDTO"> <resultMap id="picturesTemplateDTO" type="cn.com.tenlion.buildingpictures.pojo.dtos.picturestemplate.PicturesTemplateDTO">
<id column="pictures_template_id" property="picturesTemplateId"/> <id column="pictures_template_id" property="picturesTemplateId"/>
<result column="pictures_template_code" property="picturesTemplateCode"/> <result column="pictures_template_code" property="picturesTemplateCode"/>
<result column="pictures_template_background_image" property="picturesTemplateBackgroundImage"/> <result column="pictures_template_background_image" property="picturesTemplateBackgroundImage"/>

View File

@ -90,7 +90,7 @@
[ [
{type:'checkbox', fixed: 'left'}, {type:'checkbox', fixed: 'left'},
{field:'rowNum', width:80, title: '序号', fixed: 'left', align:'center', templet: '<span>{{d.LAY_INDEX}}</span>'}, {field:'rowNum', width:80, title: '序号', fixed: 'left', align:'center', templet: '<span>{{d.LAY_INDEX}}</span>'},
{field: 'picturesTemplateCode', width: 100, title: '页面编码', align:'center', {field: 'picturesTemplateCode', width: 100, title: '套版编码', align:'center',
templet: function(row) { templet: function(row) {
var rowData = row[this.field]; var rowData = row[this.field];
if(typeof(rowData) === 'undefined' || rowData == null || rowData == '') { if(typeof(rowData) === 'undefined' || rowData == null || rowData == '') {
@ -99,7 +99,7 @@
return rowData; return rowData;
} }
}, },
{field: 'picturesTemplateTitle', width: 350, title: '页面标题', align:'center', {field: 'picturesTemplateTitle', width: 350, title: '套版标题', align:'center',
templet: function(row) { templet: function(row) {
var rowData = row[this.field]; var rowData = row[this.field];
if(typeof(rowData) === 'undefined' || rowData == null || rowData == '') { if(typeof(rowData) === 'undefined' || rowData == null || rowData == '') {
@ -126,36 +126,32 @@
return rowData + 'px'; return rowData + 'px';
} }
}, },
{field: 'picturesTemplateBack', width: 150, title: '页面类型', align:'center', {field: 'picturesTemplateBack', width: 150, title: '生成尺寸', align:'center',
templet: function(row) { templet: function(row) {
var rowData = row[this.field]; var rowData = row[this.field];
if(typeof(rowData) === 'undefined' || rowData == null || rowData == '') { if(typeof(rowData) === 'undefined' || rowData == null || rowData == '') {
return '-'; return '-';
} }
if(rowData == '1') { return rowData;
return '一级页面(主页)';
}else{
return '二级页面(跳转页)';
}
} }
}, },
{field: 'picturesTemplatePublishStatus', width: 150, fixed: 'right', title: '页面发布', align:'center', {field: 'picturesTemplatePublishStatus', width: 150, fixed: 'right', title: '套版发布', align:'center',
templet: function(row) { templet: function(row) {
var rowData = row[this.field]; var rowData = row[this.field];
return '<input type="checkbox" value="' + rowData + '" '+ ( rowData == 1 ? "checked" : "") + ' picturesTemplateId="'+ row.picturesTemplateId +'" lay-filter="picturesTemplatePublishStatusEvent" name="picturesTemplatePublishStatus" lay-skin="switch" lay-text="开启|关闭">'; return '<input type="checkbox" value="' + rowData + '" '+ ( rowData == 1 ? "checked" : "") + ' picturesTemplateId="'+ row.picturesTemplateId +'" lay-filter="picturesTemplatePublishStatusEvent" name="picturesTemplatePublishStatus" lay-skin="switch" lay-text="开启|关闭">';
} }
}, },
{field:'picturesTemplateAreaEvent', width:120, title: '页面配置', fixed: 'right', align:'center', {field:'picturesTemplateAreaEvent', width:120, title: '套版配置', fixed: 'right', align:'center',
templet: function(row) { templet: function(row) {
return '<button lay-event="picturesTemplateAreaEvent" type="button" class="layui-btn layui-btn-xs layui-btn-radius">编辑模块配置</button>'; return '<button lay-event="picturesTemplateAreaEvent" type="button" class="layui-btn layui-btn-xs layui-btn-radius">编辑模块配置</button>';
} }
} }/
, /*,
{field:'picturesTemplateContentEvent', width:120, title: '页面样式', fixed: 'right', align:'center', {field:'picturesTemplateContentEvent', width:120, title: '套版样式', fixed: 'right', align:'center',
templet: function(row) { templet: function(row) {
return '<button lay-event="picturesTemplateContentEvent" type="button" class="layui-btn layui-btn-danger layui-btn-xs layui-btn-radius">编辑页面样式</button>'; return '<button lay-event="picturesTemplateContentEvent" type="button" class="layui-btn layui-btn-danger layui-btn-xs layui-btn-radius">编辑套版样式</button>';
} }
} }*/
] ]
], ],
page: true, page: true,
@ -204,7 +200,7 @@
if(layEvent === 'picturesTemplateAreaEvent') { if(layEvent === 'picturesTemplateAreaEvent') {
top.dialog.open({ top.dialog.open({
url: top.restAjax.path('route/picturestemplate/savepicturestemplatearea?picturesTemplateId={picturesTemplateId}&picturesTemplateCode={picturesTemplateCode}', [data.picturesTemplateId, data.picturesTemplateCode]), url: top.restAjax.path('route/picturestemplate/savepicturestemplatearea?picturesTemplateId={picturesTemplateId}&picturesTemplateCode={picturesTemplateCode}', [data.picturesTemplateId, data.picturesTemplateCode]),
title: "页面配置(" + data.picturesTemplateTitle + ")", title: "套版配置(" + data.picturesTemplateTitle + ")",
width: '100%' , width: '100%' ,
height:'100%', height:'100%',
onClose: function() { onClose: function() {
@ -262,7 +258,7 @@
} }
initTable(); initTable();
initDate(); initDate();
// 事件 - 页面变化 // 事件 - 套版变化
$win.on('resize', function() { $win.on('resize', function() {
clearTimeout(resizeTimeout); clearTimeout(resizeTimeout);
resizeTimeout = setTimeout(function() { resizeTimeout = setTimeout(function() {

View File

@ -22,59 +22,72 @@
</div> </div>
<div class="layui-card-body" style="padding: 15px;"> <div class="layui-card-body" style="padding: 15px;">
<form class="layui-form layui-form-pane" lay-filter="dataForm"> <form class="layui-form layui-form-pane" lay-filter="dataForm">
<input type="hidden" id="bigdataTemplatePublishStatus" name="bigdataTemplatePublishStatus" class="layui-input" placeholder="请输入页面发布状态" value="0" lay-verify="required"> <input type="hidden" id="picturesTemplatePublishStatus" name="picturesTemplatePublishStatus" class="layui-input" placeholder="请输入套版发布状态" value="0" lay-verify="required">
<div class="layui-form-item"> <div class="layui-form-item">
<label class="layui-form-label">页面编码<span style="color: red">*</span></label> <label class="layui-form-label">套版编码<span style="color: red">*</span></label>
<div class="layui-input-block"> <div class="layui-input-block">
<input type="text" id="bigdataTemplateCode" name="bigdataTemplateCode" class="layui-input" value="" placeholder="请输入页面编码" lay-verify="required"> <input type="text" id="picturesTemplateCode" name="picturesTemplateCode" class="layui-input" value="" placeholder="请输入套版编码" lay-verify="required">
</div> </div>
</div> </div>
<div class="layui-form-item"> <div class="layui-form-item">
<label class="layui-form-label">页面标题<span style="color: red">*</span></label> <label class="layui-form-label">套版名称<span style="color: red">*</span></label>
<div class="layui-input-block"> <div class="layui-input-block">
<input type="text" id="bigdataTemplateTitle" name="bigdataTemplateTitle" class="layui-input" value="" placeholder="请输入页面标题" lay-verify="required"> <input type="text" id="picturesTemplateTitle" name="picturesTemplateTitle" class="layui-input" value="" placeholder="请输入套版名称" lay-verify="required">
</div> </div>
</div> </div>
<div class="layui-form-item"> <div class="layui-form-item">
<label class="layui-form-label">画板高度<span style="color: red">*</span></label> <label class="layui-form-label">画板高度<span style="color: red">*</span></label>
<div class="layui-input-block"> <div class="layui-input-block">
<input type="number" step="0.01" id="bigdataTemplateHeight" name="bigdataTemplateHeight" class="layui-input" value="768" placeholder="请输入画板高度" lay-verify="required"> <input type="number" step="0.01" id="picturesTemplateHeight" name="picturesTemplateHeight" class="layui-input" value="768" placeholder="请输入画板高度" lay-verify="required">
</div> </div>
</div> </div>
<div class="layui-form-item"> <div class="layui-form-item">
<label class="layui-form-label">画板宽度<span style="color: red">*</span></label> <label class="layui-form-label">画板宽度<span style="color: red">*</span></label>
<div class="layui-input-block"> <div class="layui-input-block">
<input type="number" step="0.01" id="bigdataTemplateWidth" name="bigdataTemplateWidth" class="layui-input" value="1024" placeholder="请输入画板宽度" lay-verify="required"> <input type="number" step="0.01" id="picturesTemplateWidth" name="picturesTemplateWidth" class="layui-input" value="1024" placeholder="请输入画板宽度" lay-verify="required">
</div> </div>
</div> </div>
<!-- <div class="layui-form-item" pane>--> <div class="layui-form-item" pane>
<!-- <label class="layui-form-label">页面类型<span style="color: red">*</span></label>--> <label class="layui-form-label">生成尺寸<span style="color: red">*</span></label>
<!-- <div class="layui-input-block" >--> <div class="layui-input-block" >
<!-- <input type="radio" name="bigdataTemplateBack" value="1" title="一级页面(主页)">--> <input type="radio" lay-verify="required" name="picturesTemplateBack" value="0" lay-filter="picturesTemplateBackFilter" title="底图">
<!-- <input type="radio" name="bigdataTemplateBack" value="2" title="二级页面(跳转页)">--> <input type="radio" lay-verify="required"name="picturesTemplateBack" value="1" lay-filter="picturesTemplateBackFilter" title="A1">
<!-- </div>--> <input type="radio" lay-verify="required"name="picturesTemplateBack" value="2" lay-filter="picturesTemplateBackFilter" title="A2">
<!-- </div>--> <input type="radio" lay-verify="required"name="picturesTemplateBack" value="3" lay-filter="picturesTemplateBackFilter" title="A3">
<!-- <div class="layui-form-item" pane>--> <input type="radio" lay-verify="required"name="picturesTemplateBack" value="4" lay-filter="picturesTemplateBackFilter" title="A4">
<!-- <label class="layui-form-label">显示尺寸<span style="color: red">*</span></label>--> <input type="radio" lay-verify="required"name="picturesTemplateBack" value="5" lay-filter="picturesTemplateBackFilter" title="A5">
<!-- <div class="layui-input-block" >--> <input type="radio" lay-verify="required" name="picturesTemplateBack" value="6" lay-filter="picturesTemplateBackFilter" title="A6">
<!-- <input type="radio" name="bigdataTemplateSize" value="1" title="自定义宽高">--> <input type="radio" lay-verify="required" name="picturesTemplateBack" value="7" lay-filter="picturesTemplateBackFilter" title="A7">
<!-- <input type="radio" name="bigdataTemplateSize" value="2" title="自适应网页">--> <input type="radio" lay-verify="required" name="picturesTemplateBack" value="8" lay-filter="picturesTemplateBackFilter" title="A8">
<!--&lt;!&ndash; <input type="radio" name="bigdataTemplateSize" value="3" title="自适应屏幕">&ndash;&gt;--> <input type="radio" lay-verify="required" name="picturesTemplateBack" value="9" lay-filter="picturesTemplateBackFilter" title="A9">
<!-- </div>--> <input type="radio" lay-verify="required" name="picturesTemplateBack" value="10" lay-filter="picturesTemplateBackFilter" title="A10">
<!-- </div>--> <input type="radio" lay-verify="required" name="picturesTemplateBack" value="-1" lay-filter="picturesTemplateBackFilter" title="自定义">
</div>
</div>
<div id="showDataDiv"></div>
<script id="showDataScript" type="text/html">
{{# if(d == '-1') { }}
<div class="layui-form-item">
<label class="layui-form-label">自定义尺寸<span style="color: red">*</span></label>
<div class="layui-input-block" >
<input type="text" id="picturesTemplateSize" name="picturesTemplateSize" class="layui-input" value="" placeholder="请输入自定义尺寸|例如 1920*1080 " lay-verify="required">
</div>
</div>
{{# } }}
</script>
<!-- <div class="layui-form-item layui-form-text">--> <!-- <div class="layui-form-item layui-form-text">-->
<!-- <label class="layui-form-label">页面插件(自定义的css文件、js文件、ico文件等)</label>--> <!-- <label class="layui-form-label">套版插件(自定义的css文件、js文件、ico文件等)</label>-->
<!-- <div class="layui-input-block">--> <!-- <div class="layui-input-block">-->
<!-- <input type="hidden" id="bigdataTemplateFile" name="bigdataTemplateFile">--> <!-- <input type="hidden" id="picturesTemplateFile" name="picturesTemplateFile">-->
<!-- <div class="layui-btn-container" id="bigdataTemplateFileFileBox" style="border: 1px solid #e6e6e6;"></div>--> <!-- <div class="layui-btn-container" id="picturesTemplateFileFileBox" style="border: 1px solid #e6e6e6;"></div>-->
<!-- <script id="bigdataTemplateFileFileDownload" type="text/html">--> <!-- <script id="picturesTemplateFileFileDownload" type="text/html">-->
<!-- {{# var fileName = 'bigdataTemplateFile'; }}--> <!-- {{# var fileName = 'picturesTemplateFile'; }}-->
<!-- {{# if(d[fileName] != '') { }}--> <!-- {{# if(d[fileName] != '') { }}-->
<!-- {{# var files = d[fileName];}}--> <!-- {{# var files = d[fileName];}}-->
<!-- {{# for(var i = 0, item = files[i]; item = files[i++];) { }}--> <!-- {{# for(var i = 0, item = files[i]; item = files[i++];) { }}-->
<!-- <span class="layui-btn-group">--> <!-- <span class="layui-btn-group">-->
<!-- <div class="upload-file-box">--> <!-- <div class="upload-file-box">-->
<!-- <a class="upload-file-a" href="route/file/downloadfile/false/{{item.fileId}}" title="{{item.fileName}} - 点击下载">--> <!-- <a class="upload-file-a" href="route/file/download/false/{{item.fileId}}" title="{{item.fileName}} - 点击下载">-->
<!-- {{# if(item.fileType == 'doc' || item.fileType == 'docx') { }}--> <!-- {{# if(item.fileType == 'doc' || item.fileType == 'docx') { }}-->
<!-- <img src="assets/images/filetype/word.png"/>--> <!-- <img src="assets/images/filetype/word.png"/>-->
<!-- {{# } else if(item.fileType == 'xls' || item.fileType == 'xlsx') { }}--> <!-- {{# } else if(item.fileType == 'xls' || item.fileType == 'xlsx') { }}-->
@ -96,7 +109,7 @@
<!-- {{# } }}--> <!-- {{# } }}-->
<!-- </a>--> <!-- </a>-->
<!-- <span class="upload-file-title">{{item.fileName}}</span>--> <!-- <span class="upload-file-title">{{item.fileName}}</span>-->
<!-- <a class="layui-btn layui-btn-xs layui-btn-danger text-danger remove-file" href="javascript:void(0);" lay-form-button data-id="{{item.fileId}}" data-name="{{fileName}}" lay-filter="bigdataTemplateFileRemoveFile">--> <!-- <a class="layui-btn layui-btn-xs layui-btn-danger text-danger remove-file" href="javascript:void(0);" lay-form-button data-id="{{item.fileId}}" data-name="{{fileName}}" lay-filter="picturesTemplateFileRemoveFile">-->
<!-- <i class="fa fa-trash-o"></i>--> <!-- <i class="fa fa-trash-o"></i>-->
<!-- </a>--> <!-- </a>-->
<!-- </div>--> <!-- </div>-->
@ -105,7 +118,7 @@
<!-- {{# } }}--> <!-- {{# } }}-->
<!-- {{# if(d[fileName].length < 5) { }}--> <!-- {{# if(d[fileName].length < 5) { }}-->
<!-- <div class="upload-image-box" style="width: auto; height: auto; padding: 5px;">--> <!-- <div class="upload-image-box" style="width: auto; height: auto; padding: 5px;">-->
<!-- <a href="javascript:void(0);" lay-form-button data-explain="页面插件" data-name="bigdataTemplateFile" lay-filter="bigdataTemplateFileUploadFile">--> <!-- <a href="javascript:void(0);" lay-form-button data-explain="套版插件" data-name="picturesTemplateFile" lay-filter="picturesTemplateFileUploadFile">-->
<!-- <i class="fa fa-plus-square-o" style="font-size: 70px;"></i>--> <!-- <i class="fa fa-plus-square-o" style="font-size: 70px;"></i>-->
<!-- </a>--> <!-- </a>-->
<!-- </div>--> <!-- </div>-->
@ -115,20 +128,20 @@
<!-- </div>--> <!-- </div>-->
<div class="layui-form-item layui-form-text"> <div class="layui-form-item layui-form-text">
<label class="layui-form-label">页面背景<span style="color: red">*</span></label> <label class="layui-form-label">套版底<span style="color: red">*</span></label>
<div class="layui-input-block"> <div class="layui-input-block">
<input type="hidden" id="bigdataTemplateBackgroundImage" name="bigdataTemplateBackgroundImage"> <input type="hidden" id="picturesTemplateBackgroundImage" name="picturesTemplateBackgroundImage">
<div class="layui-btn-container" id="bigdataTemplateBackgroundImageFileBox" style="border: 1px solid #e6e6e6;"></div> <div class="layui-btn-container" id="picturesTemplateBackgroundImageFileBox" style="border: 1px solid #e6e6e6;"></div>
<script id="bigdataTemplateBackgroundImageFileDownload" type="text/html"> <script id="picturesTemplateBackgroundImageFileDownload" type="text/html">
{{# var fileName = 'bigdataTemplateBackgroundImage'; }} {{# var fileName = 'picturesTemplateBackgroundImage'; }}
{{# if(d[fileName].length > 0) { }} {{# if(d[fileName].length > 0) { }}
{{# var files = d[fileName];}} {{# var files = d[fileName];}}
{{# for(var i = 0, item = files[i]; item = files[i++];) { }} {{# for(var i = 0, item = files[i]; item = files[i++];) { }}
<div class="upload-image-box"> <div class="upload-image-box">
<span class="upload-image-span"> <span class="upload-image-span">
<img src="route/file/downloadfile/false/{{item.fileId}}" align="加载失败"> <img src="route/file/download/false/{{item.fileId}}" align="加载失败">
</span> </span>
<a class="layui-btn layui-btn-xs layui-btn-danger text-danger remove-image" href="javascript:void(0);" lay-form-button data-id="{{item.fileId}}" data-name="{{fileName}}" lay-filter="bigdataTemplateBackgroundImageRemoveFile"> <a class="layui-btn layui-btn-xs layui-btn-danger text-danger remove-image" href="javascript:void(0);" lay-form-button data-id="{{item.fileId}}" data-name="{{fileName}}" lay-filter="picturesTemplateBackgroundImageRemoveFile">
<i class="fa fa-trash-o"></i> <i class="fa fa-trash-o"></i>
</a> </a>
</div> </div>
@ -136,7 +149,7 @@
{{# } }} {{# } }}
{{# if(d[fileName].length < 1) { }} {{# if(d[fileName].length < 1) { }}
<div class="upload-image-box" style="width: auto; height: auto; padding: 5px;"> <div class="upload-image-box" style="width: auto; height: auto; padding: 5px;">
<a href="javascript:void(0);" lay-form-button data-explain="页面背景图" data-name="bigdataTemplateBackgroundImage" lay-filter="bigdataTemplateBackgroundImageUploadFile"> <a href="javascript:void(0);" lay-form-button data-explain="套版底图" data-name="picturesTemplateBackgroundImage" lay-filter="picturesTemplateBackgroundImageUploadFile">
<i class="fa fa-plus-square-o" style="font-size: 70px;"></i> <i class="fa fa-plus-square-o" style="font-size: 70px;"></i>
</a> </a>
</div> </div>
@ -175,6 +188,16 @@
var wangEditorObj = {}; var wangEditorObj = {};
var viewerObj = {}; var viewerObj = {};
form.on('radio(picturesTemplateBackFilter)', function (data) {
laytpl(document.getElementById('showDataScript').innerHTML).render(data.value + "", function(html) {
document.getElementById('showDataDiv').innerHTML = html;
form.render(null, 'dataForm');
});
if(data.value != '-1') {
$("#picturesTemplateSize").val("");
}
});
function closeBox() { function closeBox() {
parent.layer.close(parent.layer.getFrameIndex(window.name)); parent.layer.close(parent.layer.getFrameIndex(window.name));
} }
@ -202,7 +225,7 @@
return; return;
} }
top.restAjax.get(top.restAjax.path('api/file/listfilebyfileid', []), { top.restAjax.get(top.restAjax.path('api/file/list', []), {
ids: ids ids: ids
}, null, function(code, data) { }, null, function(code, data) {
refreshDownloadTemplet(fileName, data); refreshDownloadTemplet(fileName, data);
@ -216,8 +239,8 @@
// 获取高和宽 // 获取高和宽
form.on('submit(areaForm)', function(formData) { form.on('submit(areaForm)', function(formData) {
$("#bigdataTemplateHeight").val(screen.height); $("#picturesTemplateHeight").val(screen.height);
$("#bigdataTemplateWidth").val(screen.width); $("#picturesTemplateWidth").val(screen.width);
}); });
// 初始化视频 // 初始化视频
@ -228,18 +251,18 @@
variable: 'player', variable: 'player',
flashplayer: false, flashplayer: false,
video: { video: {
file: 'route/file/downloadfile/true/'+ item.fileId, file: 'route/file/download/true/'+ item.fileId,
type: 'video/mp4' type: 'video/mp4'
} }
}); });
} }
} }
function initBigdataTemplateFileUploadFile() { function initPicturesTemplateFileUploadFile() {
var files = $('#bigdataTemplateFile').val(); var files = $('#picturesTemplateFile').val();
initFileList('bigdataTemplateFile', files); initFileList('picturesTemplateFile', files);
form.on('button(bigdataTemplateFileUploadFile)', function(obj) { form.on('button(picturesTemplateFileUploadFile)', function(obj) {
var name = this.dataset.name; var name = this.dataset.name;
var explain = this.dataset.explain; var explain = this.dataset.explain;
top.dialog.file({ top.dialog.file({
@ -263,7 +286,7 @@
} }
}); });
}); });
form.on('button(bigdataTemplateFileRemoveFile)', function(obj) { form.on('button(picturesTemplateFileRemoveFile)', function(obj) {
var name = this.dataset.name; var name = this.dataset.name;
var id = this.dataset.id; var id = this.dataset.id;
var files = $('#'+ name).val().replace(id, ''); var files = $('#'+ name).val().replace(id, '');
@ -279,15 +302,15 @@
} }
// 初始化页面背景图图片上传 // 初始化套版底图图片上传
function initBigdataTemplateBackgroundImageUploadFile() { function initPicturesTemplateBackgroundImageUploadFile() {
var files = $('#bigdataTemplateBackgroundImage').val(); var files = $('#picturesTemplateBackgroundImage').val();
initFileList('bigdataTemplateBackgroundImage', files, function(fileName) { initFileList('picturesTemplateBackgroundImage', files, function(fileName) {
var viewer = new Viewer(document.getElementById(fileName +'FileBox'), {navbar: false}); var viewer = new Viewer(document.getElementById(fileName +'FileBox'), {navbar: false});
viewerObj[fileName] = viewer; viewerObj[fileName] = viewer;
}); });
form.on('button(bigdataTemplateBackgroundImageUploadFile)', function(obj) { form.on('button(picturesTemplateBackgroundImageUploadFile)', function(obj) {
var name = this.dataset.name; var name = this.dataset.name;
var explain = this.dataset.explain; var explain = this.dataset.explain;
top.dialog.file({ top.dialog.file({
@ -314,7 +337,7 @@
}); });
}); });
form.on('button(bigdataTemplateBackgroundImageRemoveFile)', function(obj) { form.on('button(picturesTemplateBackgroundImageRemoveFile)', function(obj) {
var name = this.dataset.name; var name = this.dataset.name;
var id = this.dataset.id; var id = this.dataset.id;
var files = $('#'+ name).val().replace(id, ''); var files = $('#'+ name).val().replace(id, '');
@ -333,9 +356,9 @@
// 初始化内容 // 初始化内容
function initData() { function initData() {
top.restAjax.get(top.restAjax.path('api/bigdatatemplate/getcurrentuseridinfo', []), {}, null, function(code, data) { top.restAjax.get(top.restAjax.path('api/picturestemplate/getcurrentuseridinfo', []), {}, null, function(code, data) {
initBigdataTemplateBackgroundImageUploadFile(); initPicturesTemplateBackgroundImageUploadFile();
initBigdataTemplateFileUploadFile(); // initPicturesTemplateFileUploadFile();
}, function(code, data) { }, function(code, data) {
top.dialog.msg(data.msg); top.dialog.msg(data.msg);
}, function() { }, function() {
@ -351,7 +374,7 @@
top.dialog.confirm(top.dataMessage.commit, function(index) { top.dialog.confirm(top.dataMessage.commit, function(index) {
top.dialog.close(index); top.dialog.close(index);
var loadLayerIndex; var loadLayerIndex;
top.restAjax.post(top.restAjax.path('api/bigdatatemplate/savebigdatatemplate', []), formData.field, null, function(code, data) { top.restAjax.post(top.restAjax.path('api/picturestemplate/savepicturestemplate', []), formData.field, null, function(code, data) {
var layerIndex = top.dialog.msg(top.dataMessage.commitSuccess, { var layerIndex = top.dialog.msg(top.dataMessage.commitSuccess, {
time: 0, time: 0,
btn: [top.dataMessage.button.yes, top.dataMessage.button.no], btn: [top.dataMessage.button.yes, top.dataMessage.button.no],

View File

@ -32,10 +32,10 @@
<div id="toolbar" > <div id="toolbar" >
<button type="button" class="layui-btn" id="btnAdd" lay-filter="btnAdd">添加区域</button> <button type="button" class="layui-btn" id="btnAdd" lay-filter="btnAdd">添加区域</button>
<button type="button" class="layui-btn layui-btn-primary" id="btnLock" lay-filter="btnLock">锁定区域</button> <button type="button" class="layui-btn layui-btn-primary" id="btnLock" lay-filter="btnLock">锁定区域</button>
<button type="button" class="layui-btn layui-btn-danger" lay-submit lay-filter="areaForm">重新生成该模板的静态页</button> <button type="button" class="layui-btn layui-btn-danger" lay-submit lay-filter="areaForm">生成套版图片</button>
</div> </div>
<div id="canvas" style=" width:{{d.bigdataTemplateWidth}}px;height:{{d.bigdataTemplateHeight}}px;"> <div id="canvas" style=" width:{{d.picturesTemplateWidth}}px;height:{{d.picturesTemplateHeight}}px;">
<img id="imgId" height="100%" width="100%" src="route/file/downloadfile/false/{{d.bigdataTemplateBackgroundImage}}" alt=""/> <img id="imgId" height="100%" width="100%" src="route/file/download/false/{{d.picturesTemplateBackgroundImage}}" alt=""/>
</div> </div>
<script src="assets/layuiadmin/layui/layui.js"></script> <script src="assets/layuiadmin/layui/layui.js"></script>
<script> <script>
@ -50,8 +50,8 @@
var table = layui.table; var table = layui.table;
var laytpl = layui.laytpl; var laytpl = layui.laytpl;
var laydate = layui.laydate; var laydate = layui.laydate;
var bigdataTemplateId = top.restAjax.params(window.location.href).bigdataTemplateId; var picturesTemplateId = top.restAjax.params(window.location.href).picturesTemplateId;
var bigdataTemplateCode = top.restAjax.params(window.location.href).bigdataTemplateCode; var picturesTemplateCode = top.restAjax.params(window.location.href).picturesTemplateCode;
var dataFormData = {}; var dataFormData = {};
function closeBox() { function closeBox() {
@ -62,7 +62,7 @@
if (e.keyCode == 83 && (navigator.platform.match("Mac") ? e.metaKey : e.ctrlKey)){ if (e.keyCode == 83 && (navigator.platform.match("Mac") ? e.metaKey : e.ctrlKey)){
e.preventDefault(); e.preventDefault();
var loadLayerIndex; var loadLayerIndex;
top.restAjax.get(top.restAjax.path('app/bigdatatemplate/buiderbigdatatemplaterelease/{bigdataTemplateCode}', [bigdataTemplateCode]), {}, null, function(code, data) { top.restAjax.get(top.restAjax.path('app/picturestemplate/buiderpicturestemplaterelease/{picturesTemplateCode}', [picturesTemplateCode]), {}, null, function(code, data) {
if(code == 200) { if(code == 200) {
top.layer.msg('重新生成该模板下全部页面执行成功!',{ top.layer.msg('重新生成该模板下全部页面执行成功!',{
icon: 1, icon: 1,
@ -103,8 +103,8 @@
} }
// 创建区域 // 创建区域
function createBox(data){ function createBox(data){
var dataId = data.bigdataTemplateAreaId || ''; var dataId = data.picturesTemplateAreaId || '';
var value = data.bigdataModuleName || '区域'; var value = data.picturesModuleName || '区域';
var color = data.templateAreaColor || ''; var color = data.templateAreaColor || '';
var height = data.templateAreaHeight || 0; var height = data.templateAreaHeight || 0;
var width = data.templateAreaWidth || 0; var width = data.templateAreaWidth || 0;
@ -114,7 +114,7 @@
var curNum = num++; var curNum = num++;
//创建区域块 //创建区域块
var pos = $("#canvas").position(); var pos = $("#canvas").position();
// background-image:url(route/file/downloadfile/false/'+ data.bigdataModulePhoto +'); // background-image:url(route/file/download/false/'+ data.picturesModulePhoto +');
var box = $('<div id="'+dataId+'" class="box" rel="'+curNum+'" areaName="' + value + '" dataId="'+dataId+'"><pre class="content" style="color:'+color+';">'+value+'</pre><div class="bg transparent" style="background-color:'+color+'"></div><div class="coor transparent"></div></div>').css({ var box = $('<div id="'+dataId+'" class="box" rel="'+curNum+'" areaName="' + value + '" dataId="'+dataId+'"><pre class="content" style="color:'+color+';">'+value+'</pre><div class="bg transparent" style="background-color:'+color+'"></div><div class="coor transparent"></div></div>').css({
width : width, width : width,
height : height, height : height,
@ -141,7 +141,7 @@
area: ['60%', '98%'], area: ['60%', '98%'],
shadeClose: false, shadeClose: false,
anim: 2, anim: 2,
content: top.restAjax.path('route/bigdatatemplatearea/updatebigdatatemplateareadata?bigdataTemplateAreaId={bigdataTemplateAreaId}', [id]), content: top.restAjax.path('route/picturestemplatearea/updatepicturestemplateareadata?picturesTemplateAreaId={picturesTemplateAreaId}', [id]),
end: function() { end: function() {
// location.reload(); // location.reload();
} }
@ -159,7 +159,7 @@
area: ['60%', '90%'], area: ['60%', '90%'],
shadeClose: false, shadeClose: false,
anim: 2, anim: 2,
content: top.restAjax.path('route/bigdatatemplatearea/updatebigdatatemplatearea?bigdataTemplateAreaId={bigdataTemplateAreaId}', [id]), content: top.restAjax.path('route/picturestemplatearea/updatepicturestemplatearea?picturesTemplateAreaId={picturesTemplateAreaId}', [id]),
end: function() { end: function() {
location.reload(); location.reload();
} }
@ -177,7 +177,7 @@
yes: function (index) { yes: function (index) {
top.dialog.close(index); top.dialog.close(index);
var layIndex; var layIndex;
top.restAjax.put(top.restAjax.path('api/bigdatatemplatearea/copybigdatatemplatearea/{bigdataTemplateAreaId}', [id]), {}, null, function (code, data) { top.restAjax.put(top.restAjax.path('api/picturestemplatearea/copypicturestemplatearea/{picturesTemplateAreaId}', [id]), {}, null, function (code, data) {
top.dialog.msg('复制成功', {time: 1000}); top.dialog.msg('复制成功', {time: 1000});
location.reload(); location.reload();
}, function (code, data) { }, function (code, data) {
@ -202,7 +202,7 @@
yes: function (index) { yes: function (index) {
top.dialog.close(index); top.dialog.close(index);
var layIndex; var layIndex;
top.restAjax.delete(top.restAjax.path('api/bigdatatemplatearea/removebigdatatemplatearea/{ids}', [id]), {}, null, function (code, data) { top.restAjax.delete(top.restAjax.path('api/picturestemplatearea/removepicturestemplatearea/{ids}', [id]), {}, null, function (code, data) {
top.dialog.msg(top.dataMessage.deleteSuccess, {time: 1000}); top.dialog.msg(top.dataMessage.deleteSuccess, {time: 1000});
location.reload(); location.reload();
}, function (code, data) { }, function (code, data) {
@ -228,7 +228,7 @@
area: ['60%', '90%'], area: ['60%', '90%'],
shadeClose: true, shadeClose: true,
anim: 2, anim: 2,
content: top.restAjax.path('route/bigdatatemplatearea/savebigdatatemplatearea?bigdataTemplateId={bigdataTemplateId}', [bigdataTemplateId]), content: top.restAjax.path('route/picturestemplatearea/savepicturestemplatearea?picturesTemplateId={picturesTemplateId}', [picturesTemplateId]),
end: function() { end: function() {
location.reload(); location.reload();
} }
@ -313,7 +313,7 @@
console.log("x坐标:"+x.replace("px","")+"y坐标:"+y.replace("px","")+"宽度:"+w+"高度:"+h+"id:"+id); console.log("x坐标:"+x.replace("px","")+"y坐标:"+y.replace("px","")+"宽度:"+w+"高度:"+h+"id:"+id);
var formData = {templateAreaLeft : x.replace("px","") , templateAreaTop : y.replace("px","") , templateAreaHeight : h , templateAreaWidth : w }; var formData = {templateAreaLeft : x.replace("px","") , templateAreaTop : y.replace("px","") , templateAreaHeight : h , templateAreaWidth : w };
var loadLayerIndex; var loadLayerIndex;
top.restAjax.put(top.restAjax.path('api/bigdatatemplatearea/updatebigdatatemplateareapoint/{bigdataTemplateAreaId}', [id]), formData, null, function(code, data) { top.restAjax.put(top.restAjax.path('api/picturestemplatearea/updatepicturestemplateareapoint/{picturesTemplateAreaId}', [id]), formData, null, function(code, data) {
}, function(code, data) { }, function(code, data) {
top.dialog.msg(data.msg, {time: 1000}); top.dialog.msg(data.msg, {time: 1000});
}, function() { }, function() {
@ -364,7 +364,7 @@
top.dialog.confirm(top.dataMessage.commit, function(index) { top.dialog.confirm(top.dataMessage.commit, function(index) {
top.dialog.close(index); top.dialog.close(index);
var loadLayerIndex; var loadLayerIndex;
top.restAjax.get(top.restAjax.path('app/bigdatatemplate/buiderbigdatatemplaterelease/{bigdataTemplateCode}', [bigdataTemplateCode]), {}, null, function(code, data) { top.restAjax.get(top.restAjax.path('app/picturestemplate/buiderpicturestemplaterelease/{picturesTemplateCode}', [picturesTemplateCode]), {}, null, function(code, data) {
if(code == 200) { if(code == 200) {
top.layer.msg('重新生成该模板下全部页面执行成功!',{ top.layer.msg('重新生成该模板下全部页面执行成功!',{
icon: 1, icon: 1,
@ -389,14 +389,14 @@
// 初始化内容 // 初始化内容
function initData() { function initData() {
var loadLayerIndex; var loadLayerIndex;
top.restAjax.get(top.restAjax.path('api/bigdatatemplate/getbigdatatemplatebyid/{bigdataTemplateId}', [bigdataTemplateId]), {}, null, function(code, data) { top.restAjax.get(top.restAjax.path('api/picturestemplate/getpicturestemplatebyid/{picturesTemplateId}', [picturesTemplateId]), {}, null, function(code, data) {
/* for(var i in data) { /* for(var i in data) {
dataFormData[i] = data[i] +''; dataFormData[i] = data[i] +'';
}*/ }*/
dataFormData = data; dataFormData = data;
dataFormData.templateHeight = data.bigdataTemplateHeight; //numDiv(data.showTemplateHeight, 2); dataFormData.templateHeight = data.picturesTemplateHeight; //numDiv(data.showTemplateHeight, 2);
dataFormData.templateWidth = data.bigdataTemplateWidth;//numDiv(data.showTemplateWidth, 2); dataFormData.templateWidth = data.picturesTemplateWidth;//numDiv(data.showTemplateWidth, 2);
//初始化设备点 //初始化设备点
$.each(data.areaList, function(i, row){ $.each(data.areaList, function(i, row){

View File

@ -8,7 +8,7 @@ import io.swagger.annotations.ApiModelProperty;
/** /**
* *
* @ClassName: PicturesTemplateVO * @ClassName: PicturesTemplateVO
* @Description: 图片套版的页面管理 * @Description: 图片套版的套版管理
* @Author: WenG * @Author: WenG
* @Date: 2020-10-20 10:49 * @Date: 2020-10-20 10:49
* @Version: 1.0 * @Version: 1.0
@ -16,34 +16,34 @@ import io.swagger.annotations.ApiModelProperty;
@ApiModel @ApiModel
public class PicturesTemplateVO { public class PicturesTemplateVO {
@ApiModelProperty(name = "picturesTemplateCode", value = "页面编码") @ApiModelProperty(name = "picturesTemplateCode", value = "套版编码")
@CheckEmptyAnnotation(name = "页面编码") @CheckEmptyAnnotation(name = "套版编码")
private String picturesTemplateCode; private String picturesTemplateCode;
@ApiModelProperty(name = "picturesTemplateBackgroundImage", value = "页面背景") @ApiModelProperty(name = "picturesTemplateBackgroundImage", value = "套版底")
@CheckEmptyAnnotation(name = "页面背景") @CheckEmptyAnnotation(name = "套版底")
private String picturesTemplateBackgroundImage; private String picturesTemplateBackgroundImage;
@ApiModelProperty(name = "picturesTemplateTitle", value = "页面标题") @ApiModelProperty(name = "picturesTemplateTitle", value = "套版名称")
@CheckEmptyAnnotation(name = "页面标题") @CheckEmptyAnnotation(name = "套版名称")
private String picturesTemplateTitle; private String picturesTemplateTitle;
@ApiModelProperty(name = "picturesTemplateHeight", value = "画板高度") @ApiModelProperty(name = "picturesTemplateHeight", value = "画板高度")
@CheckNumberAnnotation(name = "页面高度") @CheckNumberAnnotation(name = "套版高度")
private Double picturesTemplateHeight; private Double picturesTemplateHeight;
@ApiModelProperty(name = "picturesTemplateWidth", value = "画板宽度") @ApiModelProperty(name = "picturesTemplateWidth", value = "画板宽度")
@CheckNumberAnnotation(name = "页面宽度") @CheckNumberAnnotation(name = "套版宽度")
private Double picturesTemplateWidth; private Double picturesTemplateWidth;
@ApiModelProperty(name = "picturesTemplatePublishStatus", value = "页面发布状态") @ApiModelProperty(name = "picturesTemplatePublishStatus", value = "套版发布状态")
@CheckEmptyAnnotation(name = "页面发布状态") @CheckEmptyAnnotation(name = "套版发布状态")
private String picturesTemplatePublishStatus; private String picturesTemplatePublishStatus;
@ApiModelProperty(name = "picturesTemplatePublishTime", value = "页面发布时间") @ApiModelProperty(name = "picturesTemplatePublishTime", value = "套版发布时间")
private String picturesTemplatePublishTime; private String picturesTemplatePublishTime;
@ApiModelProperty(name = "picturesTemplateUrl", value = "页面访问地址") @ApiModelProperty(name = "picturesTemplateUrl", value = "套版访问地址")
private String picturesTemplateUrl; private String picturesTemplateUrl;
@ApiModelProperty(name = "picturesTemplateContent", value = "页面代码") @ApiModelProperty(name = "picturesTemplateContent", value = "套版代码")
private String picturesTemplateContent; private String picturesTemplateContent;
@ApiModelProperty(name = "picturesTemplateFile", value = "页面附件") @ApiModelProperty(name = "picturesTemplateFile", value = "套版附件")
private String picturesTemplateFile; private String picturesTemplateFile;
@ApiModelProperty(name = "picturesTemplateBack", value = "页面类型") @ApiModelProperty(name = "picturesTemplateBack", value = "生成尺寸")
@CheckEmptyAnnotation(name = "页面类型") @CheckEmptyAnnotation(name = "生成尺寸")
private String picturesTemplateBack; private String picturesTemplateBack;
@ApiModelProperty(name = "picturesTemplateSize", value = "显示尺寸") @ApiModelProperty(name = "picturesTemplateSize", value = "显示尺寸")
@CheckEmptyAnnotation(name = "显示尺寸") @CheckEmptyAnnotation(name = "显示尺寸")