first commit

WebRoot/jsp/work/channelPortConfigModal.jsp

@@ -0,0 +1,77 @@
+<%@ page language="java" pageEncoding="UTF-8"%>
+<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
+<!-- 引入viewer.js-->
+<link rel="stylesheet"
+	  href="<%=request.getContextPath()%>/node_modules/viewer-js/viewer.min.css" />
+<script type="text/javascript"
+		src="<%=request.getContextPath()%>/node_modules/viewer-js/viewer.min.js"
+		charset="utf-8"></script>
+<style type="text/css">
+	.viewer{
+		margin: 0;
+		padding: 0;
+		min-height: 470px;
+	}
+	.viewer>li{
+		overflow: hidden;
+		width: calc(100% / 2);
+		float: left;
+		cursor: pointer;
+		padding: 0 1px;
+	}
+	.viewer>li>img{
+		width: 100%;
+	}
+</style>
+<script type="text/javascript">
+	var tbName = 'tb_doc_file';
+	$(function(){
+		$('#viewer').empty();
+		var viewer = null;
+		$.post(ext.contextPath + '/base/getInputFileListById.do', {
+			id: '${channelPortConfig.id}',
+			masterId: '${channelPortConfig.id}',
+			tbName: tbName
+		}, function (data) {
+			if (data.length > 0) {
+				for (var i = 0; i < data.length; i++) {
+					var previewConfig = new Object();
+					var path = data[i].abspath;
+					path = path.substring(path.indexOf('webapps') + 7, path.length);
+					path = ext.basePath.replace(ext.contextPath, '') + path.replace(/\\/g, "\/");
+					let str = '<li><img src="'+path+'" alt="'+data[i].filename+'"></li>';
+					$('#viewer').append(str);
+				}
+				if (viewer) {
+					viewer.destroy();
+				}
+				viewer = new Viewer(document.getElementById('viewer'), {
+					url: 'data-original',
+					fullscreen: false,
+				});
+			}
+		}, 'json');
+	});
+</script>
+<div class="modal fade" id="imgModal">
+  <div class="modal-dialog modal-xlg">
+    <div class="modal-content">
+      <div class="modal-header">
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+          <span aria-hidden="true">&times;</span></button>
+        <h4 class="modal-title">${channelPortConfig.name}(${channelPortConfig.area.name})</h4>
+      </div>
+      <div class="modal-body">
+		  <p>${channelPortConfig.describe}</p>
+		  <%--<p>${channelPortConfig.remarks}</p>--%>
+
+		  <!-- 多张图片 -->
+		  <ul id="viewer" class="viewer">
+		  </ul>
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-default pull-left" data-dismiss="modal">关闭</button>
+      </div>
+    </div>
+  </div>
+</div>