自定义图片上传重新画页面和新逻辑

lib/EmergencyService/zdxtEmergencyBootStart/src/main/resources/static/project/smallProgram/css/carousel.css

@@ -0,0 +1,54 @@
+/*定义css变量*/
+:root{
+    --mywidth: 500px;
+    --myheight: 100%;
+}
+
+*{
+    margin: 0;
+    padding: 0;
+}
+ul{
+    list-style: none;
+}
+.carousel-content{
+    width: var(--mywidth);
+    height: var(--myheight);
+    position: relative;
+    overflow: hidden;
+    border-radius:10px;
+}
+.carousel{
+    height: var(--myheight);
+    position: absolute;
+}
+.carousel li{
+    float: left;
+}
+.carousel li,.carousel li img{
+    width: var(--mywidth);
+    height: var(--myheight);
+}
+.img-index{
+    position: absolute;
+    bottom: 8px;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+}
+.img-index li{
+    float: left;
+    width: 18px;
+    height: 18px;
+    line-height: 18px;
+    text-align: center;
+    border-radius: 10px;
+    background-color: rgba(0,0,0,0.2);
+    font-size: 12px;
+    cursor: pointer;
+    margin: 0 3px;
+    color: #fff;
+}
+.img-index li.js_index,.img-index li:hover{
+    background-color: rgba(0,0,0,0.7);
+}

lib/EmergencyService/zdxtEmergencyBootStart/src/main/resources/static/project/smallProgram/js/carousel.js

@@ -0,0 +1,168 @@
+;(function($){
+	$.fn.carousel = function(param){
+		var carousel = param.carousel,//轮播框架
+		indexContainer = param.indexContainer,//下标框架
+		list = $(carousel).children("li"),//轮播内容
+		len = list.length,//轮播内容数量
+		prev = param.prev,//上翻按钮
+		next = param.next,//下翻按钮
+		timing = param.timing,//自动轮播间隔时间
+		animateTime = param.animateTime,//动画时间
+		autoPlay = param.autoPlay,//自动播放 true/false
+		timer,//定时器
+		index = 1,//索引值
+		indexList,//下标列表
+		indexClassName = "js_index",//下标高亮类名
+		action = true,//开始滚动 true/false
+		totalWidtn = list.width()*(list.length+2),//轮播框架总宽度
+		direction = param.direction;//滚动方向
+		
+		/*初始化*/
+		for(var i = 1;i <= list.length;i++){
+			$(indexContainer).append("<li>"+i+"</li>")
+		}
+		$(carousel).width(totalWidtn)
+		.append($(list[0]).clone())
+		.prepend($(list[list.length-1]).clone())
+		.css("left","-"+list.width()+"px");
+		list = $(carousel).children("li");
+		indexList = $(indexContainer).children("li");
+		$(indexList[index-1]).addClass(indexClassName);
+
+		/*判断是否自动播放*/
+		if (autoPlay) {
+			startTiming();
+			$(carousel+","+prev+","+next+","+indexContainer).hover(function(){
+				window.clearInterval(timer);
+			},function(){
+				startTiming();
+			});
+		}
+
+		/*计时方法*/
+		function startTiming(){
+			/*判断方向*/
+			switch (direction) {
+				case "right" :
+					timer = window.setInterval("$.rightChangeImg();",timing);
+				break;
+				case "left" :
+					timer = window.setInterval("$.leftChangeImg();",timing);
+				break;
+				default:
+					timer = window.setInterval("$.leftChangeImg();",timing);
+			}
+		};
+
+		/*切换高亮下标*/
+		$.extend({changeIndex:function(index){
+			$(indexList).removeClass(indexClassName);
+			$(indexList[index]).addClass(indexClassName);
+		}});
+		
+
+		/*向左切换图片*/
+		$.extend({leftChangeImg:function(){
+			action = false;
+			if (index==len) {
+				index = 0;
+				$(carousel).stop(true,true).css("left","0px");
+			}
+			index++;
+			$(carousel).stop(true,true).animate({
+				left : "-="+list.width()+"px"
+			},animateTime);
+			setTimeout(function(){
+				if (index==len) {
+					index = 0;
+					$(carousel).stop(true,true).css("left","0px");
+				}
+				action = true;
+			},animateTime);
+			$.changeIndex(index-1);
+		}});
+
+		/*向右切换图片*/
+		$.extend({rightChangeImg:function(){
+			action = false;
+			if (index==0) {
+				index = len;
+				$(carousel).stop(true,true).css("left","-"+left+"px");
+			}
+			index--;
+			var left = totalWidtn-list.width()*2;
+			$(carousel).stop(true,true).animate({
+				left : "+="+list.width()+"px"
+			},animateTime);
+			setTimeout(function(){
+				if (index==0) {
+					index = len;
+					$(carousel).stop(true,true).css("left","-"+left+"px");
+				}
+				action = true;
+			},animateTime);
+			if (index == 0) {
+				$.changeIndex(len-1);
+			}else{
+				$.changeIndex(index-1);
+			}
+		}});
+
+		/*下翻点击处理*/
+		$(next).on("click",function(){
+			var nowLeft = Math.abs(parseInt($(carousel).css("left")));
+			var left = totalWidtn-list.width()*2;
+			if (action) {
+				if (nowLeft == left) {
+					index = 0;
+					$(carousel).stop(true,true).css("left","0px");
+				}
+				$.leftChangeImg();
+			}
+		});
+
+		/*上翻点击处理*/
+		$(prev).on("click",function(){
+			var nowLeft = Math.abs(parseInt($(carousel).css("left")));
+			var left = totalWidtn-list.width()*2;
+			if (action) {
+				if (nowLeft == 0) {
+					index = len;
+					$(carousel).stop(true,true).css("left","-"+left+"px");
+				}
+				$.rightChangeImg();
+			}
+		});
+
+		/*下标点击处理*/
+		indexList.on("click",function(){
+			var no = $(this).index()+1;
+			if (action) {
+				if (no > index) {
+					$.changeIndex(no-1);
+					action = false;
+					var left = (no - index)*list.width();
+					index = no;
+					$(carousel).stop(true,true).animate({
+						left : "-="+left+"px"
+					},animateTime);
+					setTimeout(function(){
+						action = true;
+					},animateTime);
+				}else if (no < index) {
+					$.changeIndex(no-1);
+					action = false;
+					var left = (index - no)*list.width();
+					index = no;
+					$(carousel).stop(true,true).animate({
+						left : "+="+left+"px"
+					},animateTime);
+					setTimeout(function(){
+						action = true;
+					},animateTime);
+				}
+	
+			}
+		});
+	}
+})(jQuery);

lib/EmergencyService/zdxtEmergencyBootStart/src/main/resources/templates/project/smallProgram/image/settings.html

@@ -0,0 +1,307 @@
+<!DOCTYPE html>
+<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
+<head>
+	<th:block th:include="zdxtInclude :: header('自定义图片')"/>
+	<link rel="stylesheet" href="/project/smallProgram/css/carousel.css" type="text/css"/>
+	<style>
+		.page-row {
+			display: flex;
+			justify-content: flex-start;
+		}
+		.box {
+			border: 1px dashed grey;
+		}
+		 .maddin {
+			 display: flex; /* 设置为flex布局 */
+			 align-items: center; /* 将子元素在交叉轴上居中对齐 */
+			 justify-content: center; /* 将子元素在主轴上水平居中对齐 */
+		 }
+	</style>
+</head>
+<body class="gray-bg">
+<div class="container-div">
+	<div class="tabs-container">
+		<ul class="nav nav-tabs">
+			<li class="active"><a data-toggle="tab" href="#tab-1" aria-expanded="true">首页</a></li>
+			<li class=""><a data-toggle="tab" href="#tab-2" aria-expanded="false">自定义-1</a></li>
+			<li class=""><a data-toggle="tab" href="#tab-3" aria-expanded="false">自定义-2</a></li>
+			<li class=""><a data-toggle="tab" href="#tab-4" aria-expanded="false">我的</a></li>
+		</ul>
+		<div class="tab-content">
+			<div id="tab-1" class="tab-pane active">
+				<div class="page-row" style="height: 756px;">
+					<div style="height: 100%; width: 60%;">
+						<form class="form-horizontal m" id="form-home-add">
+							<div class="form-group">
+								<label class="col-sm-2 control-label is-required">顶部图：</label>
+								<div class="col-sm-5">
+									<input id="file-home-top" onchange="showImg(this,'home-top')" name="file" type="file" multiple>
+								</div>
+								<div class="col-sm-5">
+									<input class="form-control" type="text" name="title" id="title" placeholder="场景">
+								</div>
+							</div>
+							<div class="form-group">
+								<label class="col-sm-2 control-label is-required">功能设置：</label>
+								<div class="col-sm-5">
+									<input class="form-control" type="text" name="title" id="title" placeholder="名称设置">
+								</div>
+								<div class="col-sm-5">
+									<input class="form-control" type="text" name="title" id="title" placeholder="图片设置">
+								</div>
+<!--								<div class="col-sm-4">-->
+<!--									<select name="page" class="form-control m-b" th:with="type=${@dict.getType('owning_page')}">-->
+<!--										<option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>-->
+<!--									</select>-->
+<!--								</div>-->
+<!--								<label class="col-sm-2 control-label is-required">位置：</label>-->
+<!--								<div class="col-sm-4">-->
+<!--									<select name="position" class="form-control m-b" th:with="type=${@dict.getType('owning_position')}">-->
+<!--										<option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>-->
+<!--									</select>-->
+<!--								</div>-->
+							</div>
+							<hr/>
+							<div class="form-group">
+								<label class="col-sm-2 control-label is-required">banner：</label>
+								<div class="col-sm-5">
+									<input id="file-home-banner1" onchange="showImg(this,'home-banner-1')" name="file" type="file" placeholder="图1" multiple>
+								</div>
+								<div class="col-sm-5">
+									<input id="file-home-banner2" onchange="showImg(this,'home-banner-2')" name="file" type="file" multiple>
+								</div>
+							</div>
+							<div class="form-group">
+								<div class="col-sm-2"></div>
+								<div class="col-sm-5">
+									<input id="file-home-banner3" onchange="showImg(this,'home-banner-3')" name="file" type="file" multiple>
+								</div>
+								<div class="col-sm-5">
+									<input id="file-home-banner4" onchange="showImg(this,'home-banner-4')" name="file" type="file" multiple>
+								</div>
+							</div>
+							<div class="form-group">
+								<label class="col-sm-2 control-label is-required">功能设置：</label>
+								<div class="col-sm-5">
+									<input class="form-control" type="text" name="title" id="title" placeholder="名称设置">
+								</div>
+								<div class="col-sm-5">
+									<input class="form-control" type="text" name="title" id="title" placeholder="图片设置">
+								</div>
+							</div>
+							<hr/>
+							<div class="form-group">
+								<label class="col-sm-2 control-label is-required">底图左：</label>
+								<div class="col-sm-5">
+									<input id="file-home-bottom-left" onchange="showImg(this,'home-bottom-left')" name="file" type="file" multiple>
+								</div>
+								<div class="col-sm-5">
+									<input class="form-control" type="text" name="title" id="title" placeholder="场景">
+								</div>
+							</div>
+							<div class="form-group">
+								<label class="col-sm-2 control-label is-required">功能设置：</label>
+								<div class="col-sm-5">
+									<input class="form-control" type="text" name="title" id="title" placeholder="名称设置">
+								</div>
+								<div class="col-sm-5">
+									<input class="form-control" type="text" name="title" id="title" placeholder="图片设置">
+								</div>
+							</div>
+							<hr/>
+							<div class="form-group">
+								<label class="col-sm-2 control-label is-required">底图右上：</label>
+								<div class="col-sm-5">
+									<input id="file-home-bottom-right-top" onchange="showImg(this,'home-bottom-right-top')" name="file" type="file" multiple>
+								</div>
+								<div class="col-sm-5">
+									<input class="form-control" type="text" name="title" id="title" placeholder="场景">
+								</div>
+							</div>
+							<div class="form-group">
+								<label class="col-sm-2 control-label is-required">功能设置：</label>
+								<div class="col-sm-5">
+									<input class="form-control" type="text" name="title" id="title" placeholder="名称设置">
+								</div>
+								<div class="col-sm-5">
+									<input class="form-control" type="text" name="title" id="title" placeholder="图片设置">
+								</div>
+							</div>
+							<hr/>
+							<div class="form-group">
+								<label class="col-sm-2 control-label is-required">底图右下：</label>
+								<div class="col-sm-5">
+									<input id="file-home-bottom-right-bottom" onchange="showImg(this,'home-bottom-right-bottom')" name="file" type="file" multiple>
+								</div>
+								<div class="col-sm-5">
+									<input class="form-control" type="text" name="title" id="title" placeholder="场景">
+								</div>
+							</div>
+							<div class="form-group">
+								<label class="col-sm-2 control-label is-required">功能设置：</label>
+								<div class="col-sm-5">
+									<input class="form-control" type="text" name="title" id="title" placeholder="名称设置">
+								</div>
+								<div class="col-sm-5">
+									<input class="form-control" type="text" name="title" id="title" placeholder="图片设置">
+								</div>
+							</div>
+						</form>
+					</div>
+					<div style="height: 100%; width: 40%;">
+						<div class="box" style="width: 500px; height: 100px;">
+							<img id="home-top" width="100%" height="100%" />
+						</div>
+						<div class="box" style="width: 500px; height: 150px;">
+<!--							<img id="home-banner" width="100%" height="100%" />-->
+							<div class="carousel-content">
+							<ul class="carousel">
+								<li><img id="home-banner-1" width="100%" height="100%"></li>
+								<li><img id="home-banner-2" width="100%" height="100%"></li>
+								<li><img id="home-banner-3" width="100%" height="100%"></li>
+								<li><img id="home-banner-4" width="100%" height="100%"></li>
+							</ul>
+							<ul class="img-index"></ul>
+							</div>
+						</div>
+						<div class="page-row" style="width: 500px; height: 150px;">
+							<div class="box" style="width: 50%; height: 250px;">
+								<img id="home-bottom-left" width="100%" height="100%" />
+							</div>
+							<div style="width: 50%; height: 250px;">
+								<div style="padding-left: 5px;">
+									<div class="box" style="width: 100%; height: 115px;">
+										<img id="home-bottom-right-top" width="100%" height="100%" />
+									</div>
+									<div class="box" style="width: 100%; height: 115px;">
+										<img id="home-bottom-right-bottom" width="100%" height="100%" />
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>>
+			</div>
+			<div id="tab-2" class="tab-pane">
+				<div class="col-sm-4" style="background: #0a55a1; height: 100%;">2-left</div>
+				<div class="col-sm-4" style="background: #0fd115; height: 100%;">2-midden</div>
+				<div class="col-sm-4" style="background: #f1c40f; height: 100%;">2-right</div>
+			</div>
+			<div id="tab-3" class="tab-pane">
+				<div class="col-sm-4" style="background: #0a55a1; height: 100%;">3-left</div>
+				<div class="col-sm-4" style="background: #0fd115; height: 100%;">3-midden</div>
+				<div class="col-sm-4" style="background: #f1c40f; height: 100%;">3-right</div>
+			</div>
+			<div id="tab-4" class="tab-pane">
+				<div class="col-sm-4" style="background: #0a55a1; height: 100%;">4-left</div>
+				<div class="col-sm-4" style="background: #0fd115; height: 100%;">4-midden</div>
+				<div class="col-sm-4" style="background: #f1c40f; height: 100%;">4-right</div>
+			</div>
+		</div>
+	</div>
+</div>
+<th:block th:include="zdxtInclude :: footer"/>
+<script src="/project/smallProgram/js/carousel.js" type="text/javascript"></script>
+<script th:inline="javascript">
+	var editFlag = [[${@permission.hasPermi('custom:image:edit')}]];
+	var removeFlag = [[${@permission.hasPermi('custom:image:remove')}]];
+	var prefix = ctx + "small/customImage";
+
+
+	$(function () {
+		queryList();
+		bannerPlay();
+	});
+
+	/** 获取列表 */
+	function queryList() {
+		$.ajax({
+			url: prefix+'/list',        //后台url
+			data: {},
+			type: "POST",
+			dataType: 'json',
+			success: function (data) {      //成功，回调函数
+				for (var i=0; i<data.rows.length; i++) {
+					queryFiles(data.rows[i]);
+				}
+			},
+			error: function (er) {          //失败，回调函数
+			}
+		});
+	}
+
+	function queryFiles(obj) {
+		$.ajax({
+			type: "POST",
+			url: prefix + "/queryFilesPost",
+			data: {"key": obj.guid},
+			dataType: 'json',
+			success: function (data) {
+				console.log(data.data.filePreview.fileList[0]);
+				$('#' + obj.page +'-'+ obj.position).attr("src", data.data.filePreview.fileList[0]);
+			}
+		});
+	}
+
+	/** 轮播图 */
+	function bannerPlay() {
+		$(".carousel-content").carousel({
+			carousel: ".carousel", //轮播图容器
+			indexContainer: ".img-index", //下标容器
+			timing: 3000, //自动播放间隔
+			animateTime: 700, //动画时间
+			autoPlay: true, //是否自动播放 true/false
+			direction: "left", //滚动方向 right/left
+		});
+	}
+
+	/** 显示图片 */
+	function showImg(fileObj,imgId) {
+		var file=fileObj.files[0];
+		var byteSize = file.size / 1024;
+		console.log(byteSize)
+		if (byteSize <= 70000) {
+			var r = new FileReader();
+			r.readAsDataURL(file);
+			$(r).load(function () {
+				var txt = this.result;
+				var img = new Image();
+				img.src = txt;
+				img.onload = function(){
+					if(img.width <= 50000 && img.height <= 50000){
+						$('#' + imgId).attr("src", txt);
+						uploadFiles(file, imgId);
+					}else{
+						$.modal.msgError("尺寸不对 " + img.width + "*" + img.height);
+					}
+				}
+			})
+		} else {
+			$.modal.msgError("文件大小超出 " + byteSize);
+		}
+	}
+
+	/** 上传图片 */
+	function uploadFiles(file, imgId){
+		var form = new FormData();
+		form.append("imgId",imgId);
+		form.append("file",file);
+		$.ajax({
+			url: prefix+'/addSettings',        //后台url
+			data: form,
+			cache: false,
+			async: true,
+			type: "POST",
+			dataType: 'json',              //数据返回类型，可以是xml、json等
+			processData: false,
+			contentType: false,
+			success: function (data) {      //成功，回调函数
+			},
+			error: function (er) {          //失败，回调函数
+			}
+		});
+	}
+
+</script>
+</body>
+</html>

lib/EmergencyService/zdxtEmergencyKnowledgeService/src/main/java/com/zdxt/knowledge/controller/CustomImageController.java

@@ -12,8 +12,10 @@ import org.springframework.ui.ModelMap;
 import org.springframework.web.bind.annotation.*;
 import org.springframework.web.multipart.MultipartFile;
 
+import javax.servlet.http.HttpServletRequest;
 import java.util.HashMap;
 import java.util.List;
+import java.util.Map;
 
 /**
  * 自定义图片管理Controller
@@ -29,6 +31,12 @@ public class CustomImageController extends BaseController {
     @Autowired
     private ICustomImageService customImageService;
 
+    @RequiresPermissions("custom:image:view")
+    @GetMapping("/settings")
+    public String settings() {
+        return prefix + "/settings";
+    }
+
     @RequiresPermissions("custom:image:view")
     @GetMapping()
     public String image() {
@@ -76,6 +84,31 @@ public class CustomImageController extends BaseController {
         return resNum > 0 ? ZDResponse.success("操作成功", resNum) : ZDResponse.error("操作失败", resNum);
     }
 
+    /**
+     * 新增保存自定义图片管理
+     */
+    @RequiresPermissions("custom:image:add")
+    @PostMapping("/addSettings")
+    @ResponseBody
+    public ZDResponse addSettings(@RequestParam("file") MultipartFile file, HttpServletRequest request) {
+        String imgId = request.getParameter("imgId");
+        String page = imgId.substring(0, imgId.indexOf('-'));
+        String position = imgId.substring(imgId.indexOf('-')+1, imgId.length());
+        String sortTmp = imgId.substring(imgId.length()-1, imgId.length());
+        Long sort = 0l;
+        try {
+            sort = Long.valueOf(sortTmp);
+        } catch (Exception e) {}
+        CustomImage customImage = new CustomImage();
+        customImage.setTitle(imgId);
+        customImage.setPage(page);
+        customImage.setPosition(position);
+        customImage.setSrot(sort);
+        System.out.println(file);
+        int resNum = customImageService.insertCustomImage(customImage, file);
+        return resNum > 0 ? ZDResponse.success("操作成功", resNum) : ZDResponse.error("操作失败", resNum);
+    }
+
     /**
      * 修改自定义图片管理
      */

lib/EmergencyService/zdxtEmergencyKnowledgeService/src/main/java/com/zdxt/knowledge/service/ICustomImageService.java

@@ -44,6 +44,7 @@ public interface ICustomImageService
      * @param customImage 自定义图片管理
      * @return 结果
      */
+    public int insertCustomImage(CustomImage customImage, MultipartFile file);
     public int insertCustomImage(CustomImage customImage, MultipartFile[] files);
 
     /**

lib/EmergencyService/zdxtEmergencyKnowledgeService/src/main/java/com/zdxt/knowledge/service/impl/CustomImageServiceImpl.java

@@ -80,6 +80,29 @@ public class CustomImageServiceImpl implements ICustomImageService
      * @return 结果
      */
     @Override
+    public int insertCustomImage(CustomImage customImage, MultipartFile file)
+    {
+        // 先根据title查出之前的数据删除数据和附件
+        CustomImage params = new CustomImage();
+        params.setTitle(customImage.getTitle());
+        List<CustomImage> oldList = customImageMapper.selectCustomImageList(params);
+        if (null != oldList && oldList.size() > 0) {
+            for (CustomImage old : oldList) {
+                zdxtFileCommonApi.deleteZdxtFileByIds(old.getGuid());
+                this.deleteCustomImageById(old.getGuid());
+            }
+        }
+        customImage.setGuid(StringUtils.getUUID());
+        customImage.setCreator(userApi.getCurrentUser().getUserName());
+        int resNum = customImageMapper.insertCustomImage(customImage);
+
+        // 上传文件，并在附件表中添加记录
+        if (resNum > 0 && ObjectUtil.isNotEmpty(file)) {
+            zdxtFileCommonApi.insertZdxtFile(file, customImage.getGuid(), fileUploadApi.upload(file));
+        }
+        return resNum;
+    }
+    @Override
     public int insertCustomImage(CustomImage customImage, MultipartFile[] files)
     {
         customImage.setGuid(StringUtils.getUUID());

lib/EmergencyService/zdxtEmergencyKnowledgeService/src/main/resources/mapper/CustomImageMapper.xml

@@ -76,7 +76,7 @@ PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
             <if test="createTime != null ">#{createTime},</if>
             <if test="updator != null  and updator != ''">#{updator},</if>
             <if test="updateTime != null ">#{updateTime},</if>
-            (select IFNULL((max(srot)+1), 1) as srot from custom_image tmp),
+            <if test="srot != null ">#{srot},</if>
          </trim>
     </insert>