78 lines
2.2 KiB
Plaintext
78 lines
2.2 KiB
Plaintext
<%@ 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">×</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>
|