From 5bd6f97396b79db09de81e824e9467a5639d73e2 Mon Sep 17 00:00:00 2001 From: cuibaocheng Date: Sat, 18 Sep 2021 17:27:35 +0800 Subject: [PATCH] =?UTF-8?q?1.=20=E6=A8=A1=E6=9D=BF=E5=B7=A5=E5=85=B7?= =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E6=A0=87=E5=B0=BA=E5=8A=9F=E8=83=BD=E3=80=81?= =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E9=94=AE=E7=9B=98=E8=B0=83=E8=8A=82=E5=B0=BA?= =?UTF-8?q?=E5=AF=B8=E5=8A=9F=E8=83=BD=E3=80=81=E5=A2=9E=E5=8A=A0=E4=BF=AE?= =?UTF-8?q?=E6=94=B9=E5=B0=BA=E5=AF=B8=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../IPicturesTemplateAreaService.java | 2 +- .../save-bigdatatemplatearea.html | 147 +++++++++++++++- .../PicturesTemplateAreaController.java | 4 +- .../impl/PicturesTemplateAreaServiceImpl.java | 9 +- .../save-picturestemplatearea.html | 164 +++++++++++++++++- 5 files changed, 313 insertions(+), 13 deletions(-) diff --git a/interface-building-pictures/src/main/java/cn/com/tenlion/buildingpictures/service/picturestemplatearea/IPicturesTemplateAreaService.java b/interface-building-pictures/src/main/java/cn/com/tenlion/buildingpictures/service/picturestemplatearea/IPicturesTemplateAreaService.java index 11047f2..9b38a46 100644 --- a/interface-building-pictures/src/main/java/cn/com/tenlion/buildingpictures/service/picturestemplatearea/IPicturesTemplateAreaService.java +++ b/interface-building-pictures/src/main/java/cn/com/tenlion/buildingpictures/service/picturestemplatearea/IPicturesTemplateAreaService.java @@ -159,7 +159,7 @@ public interface IPicturesTemplateAreaService { SuccessResultData updatePicturesTemplateAreaPoint(String picturesTemplateAreaId, PicturesTemplateAreaPiointVO picturesTemplateAreaPiointVO) throws Exception; - SuccessResult copyPicturesTemplateAreaPoint(String picturesTemplateAreaId, String templateAreaSource) throws Exception; + SuccessResult copyPicturesTemplateAreaPoint(String picturesTemplateAreaId, String templateAreaSource, Boolean copySize) throws Exception; SuccessResult updatePicturesTemplateAreaPointModuleData(String picturesTemplateAreaId, String templateAreaModuleData) throws Exception; diff --git a/module-bigdata/src/main/resources/templates/bigdatatemplate/save-bigdatatemplatearea.html b/module-bigdata/src/main/resources/templates/bigdatatemplate/save-bigdatatemplatearea.html index 358e917..2f06e90 100644 --- a/module-bigdata/src/main/resources/templates/bigdatatemplate/save-bigdatatemplatearea.html +++ b/module-bigdata/src/main/resources/templates/bigdatatemplate/save-bigdatatemplatearea.html @@ -6,6 +6,7 @@ + @@ -26,6 +27,9 @@ #debug{position:absolute;right:10px;top:10px;z-index:88;border:1px solid #ccc;width:100px;height:100px;background:#fff;} #toolbar{position:absolute;left:10px;top:10px;z-index:88;} + .line-t,.line-l,.line-r,.line-b{position: absolute;display: none;z-index: 1000000} + .line-t,.line-b{border-top: 2px dashed #eee;width:100%;} + .line-l,.line-r{width: 2px;box-sizing:border-box;border-right: 2px dashed #eee;height: 100%;top:0;} @@ -36,6 +40,10 @@
+
+
+
+
@@ -173,7 +181,56 @@ console.log("向下移动1: x坐标:"+ x +"y坐标:"+ y +"宽度:"+ w +"高度:"+ h +"id:"+ id); } } + // W.高度+1 + if (e.keyCode == 87 ){ + e.preventDefault(); + h = h + 1; + if(h >= dataFormData.picturesTemplateHeight) { + layer.msg("超出最大高度"); + noChange = true; + }else{ + $('#'+id).height(h); + console.log("高度+1: x坐标:"+ x +"y坐标:"+ y +"宽度:"+ w +"高度:"+ h +"id:"+ id); + } + } + // S.高度-1 + if (e.keyCode == 83 ){ + e.preventDefault(); + h = h - 1; + if(h >= dataFormData.picturesTemplateHeight) { + layer.msg("超出最大高度"); + noChange = true; + }else{ + $('#'+id).height(h); + console.log("高度+1: x坐标:"+ x +"y坐标:"+ y +"宽度:"+ w +"高度:"+ h +"id:"+ id); + } + } + // A.宽度-1 + if (e.keyCode == 65 ){ + e.preventDefault(); + w = w - 1; + if(w >= dataFormData.picturesTemplateWidth) { + layer.msg("超出最大宽度"); + noChange = true; + }else{ + $('#'+id).width(w); + console.log("高度+1: x坐标:"+ x +"y坐标:"+ y +"宽度:"+ w +"高度:"+ h +"id:"+ id); + } + } + // D.宽度+1 + if (e.keyCode == 68 ){ + e.preventDefault(); + w = w + 1; + if(w >= dataFormData.picturesTemplateWidth) { + layer.msg("超出最大宽度"); + noChange = true; + }else{ + $('#'+id).width(w); + console.log("高度+1: x坐标:"+ x +"y坐标:"+ y +"宽度:"+ w +"高度:"+ h +"id:"+ id); + } + } if(!noChange) { + lineChange(id, h, w, x, y); var formData = {templateAreaLeft : x , templateAreaTop : y , templateAreaHeight : h , templateAreaWidth : w }; top.restAjax.put(top.restAjax.path('api/picturestemplatearea/updatepicturestemplateareapoint/{picturesTemplateAreaId}', [id]), formData, null, function(code, data) { if(data.data) { @@ -221,12 +278,13 @@ layer.close(index); top.dialog.msg("复制出一个新的区域", { time: 0, - btn: ["确定复制", "我再想想"], + area: ['450px', '90px'], + btn: ["确定复制", "确定并复制该区域尺寸","我再想想"], shade: 0.3, - yes: function (index) { + btn1: function (index) { top.dialog.close(index); var layIndex; - top.restAjax.put(top.restAjax.path('api/picturestemplatearea/copypicturestemplatearea/{picturesTemplateAreaId}/{templateAreaSource}', [id, code]), {}, null, function (code, data) { + top.restAjax.put(top.restAjax.path('api/picturestemplatearea/copypicturestemplatearea/{picturesTemplateAreaId}/{templateAreaSource}?copySize=false', [id, code]), {}, null, function (code, data) { top.dialog.msg('复制成功', {time: 1000}); location.reload(); }, function (code, data) { @@ -236,6 +294,23 @@ }, function () { top.dialog.close(layIndex); }); + }, + btn2: function (index) { + top.dialog.close(index); + var layIndex; + top.restAjax.put(top.restAjax.path('api/picturestemplatearea/copypicturestemplatearea/{picturesTemplateAreaId}/{templateAreaSource}?copySize=true', [id, code]), {}, null, function (code, data) { + top.dialog.msg('复制成功', {time: 1000}); + location.reload(); + }, function (code, data) { + top.dialog.msg(data.msg); + }, function () { + layIndex = top.dialog.msg('正在复制中...', {icon: 16, time: 0, shade: 0.3}); + }, function () { + top.dialog.close(layIndex); + }); + }, + btn3: function (index) { + top.dialog.close(index); } }); } @@ -267,6 +342,40 @@ }); }, }, + { + text: '更改尺寸', action: function (e) { + e.preventDefault(); + //当前区域的id + var id = $('.box[rel=' + curNum + ']').attr("id"); + var x = Number($("#" + id).css("left").replace("px", "")); + var y = Number($("#" + id).css("top").replace("px", "")); + layer.open({ + id: 1, + type: 1, + area: ['450px', '200px'], + shade: 0, + title: '更改区域的高与宽', + content: "", + btn: ['确认', '取消'], + yes: function (index1, layero) { + //获取输入框里面的值 + var heightText = $("#heightText").val(); + var widthText = $("#widthText").val(); + if (Number(heightText) < dataFormData.picturesTemplateHeight && Number(widthText) < dataFormData.picturesTemplateWidth) { + $("#" + id).width(widthText); + $("#" + id).height(heightText); + $("#" + id).click(); + } else { + layer.msg("尺寸超出范围"); + } + layer.close(index1); + }, + no: function (index, layero) { + layer.close(index); + } + }); + } + }, {divider: true} ] ); } @@ -380,6 +489,52 @@ var currentFormData = new Map(); + function lineChange(id, height, width, left, top) { + $('.line').show(); + $('.line-t').css({'borderColor': '#FFF'}); + $('.line-l').css({'borderColor': '#FFF'}); + $('.line-r').css({'borderColor': '#FFF'}); + $('.line-b').css({'borderColor': '#FFF'}); + $('.line-t').css({'top': top}) + $('.line-l').css({'left': left}) + $('.line-r').css({'left': (left + width) + 'px'}) + $('.line-b').css({'top': (top + height) + 'px'}) + var bottom = top + height; + var right = left + width; + // 判断哪个div的边线, 与当前的8条边线相交汇 + var boxArray = $(".box"); + for(var i = 0; i < boxArray.length; i++) { + var box = boxArray[i] + did = $(box).attr("id"); + w = $(box).width(); + h = $(box).height(); + x = $(box).css("left"); + y = $(box).css("top"); + x = Number(x.replace('px','')); + y = Number(y.replace('px','')); + r = x + w; + b = y + h; + if(id != did) { + // 谁与当前上边重合 + if(top == y || top == b) { + $('.line-t').css({'borderColor': 'red'}); + } + // 谁与当前下边重合 + if(bottom == y || bottom == b) { + $('.line-b').css({'borderColor': 'red'}); + } + // 谁与当前左线重合 + if(left == x || left == r) { + $('.line-l').css({'borderColor': 'red'}); + } + // 谁与当前右线重合 + if(right == x || right == r) { + $('.line-r').css({'borderColor': 'red'}); + } + } + } + } + //修改区域点的x,y,width,height $(document).on('mouseup', '#canvas', function(e){ if(lock == true){ @@ -399,6 +554,9 @@ h = $(this).height(); x = $('#'+id).css("left"); y = $('#'+id).css("top"); + + lineChange(id, h, w, Number(x.replace('px','')), Number(y.replace('px',''))); + 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 , id : id}; var oldData = currentFormData.get(id);