|
|
@@ -7,8 +7,14 @@
|
|
|
<link rel="stylesheet" href="../../css/public.css" media="all">
|
|
|
<link rel="stylesheet" href="../../lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
|
|
|
<style>
|
|
|
+ html,body{
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
body {
|
|
|
background-color: #ffffff;
|
|
|
+ margin:0px ;
|
|
|
}
|
|
|
|
|
|
#file_list li {
|
|
|
@@ -20,7 +26,7 @@
|
|
|
|
|
|
#file_list li a {
|
|
|
display: inline-block;
|
|
|
- width: 50%;
|
|
|
+ width: 70%;
|
|
|
height: 100%;
|
|
|
box-sizing: border-box;
|
|
|
color: #fff;
|
|
|
@@ -32,7 +38,11 @@
|
|
|
text-overflow: ellipsis;
|
|
|
font-size: 12px;
|
|
|
}
|
|
|
-
|
|
|
+ #file_list li a.down{
|
|
|
+ width:auto;
|
|
|
+ position: absolute;
|
|
|
+ right: 0px;
|
|
|
+ }
|
|
|
table tr td, th {
|
|
|
font-size: 18px;
|
|
|
}
|
|
|
@@ -56,6 +66,21 @@
|
|
|
ul li a {
|
|
|
white-space: nowrap;
|
|
|
}
|
|
|
+ .layui-tab{
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ .layui-tab .layui-tab-content{
|
|
|
+ padding: 0px;
|
|
|
+ position: absolute;
|
|
|
+ top: 50px;
|
|
|
+ left: 10px;
|
|
|
+ right: 10px;
|
|
|
+ bottom: 10px;
|
|
|
+ }
|
|
|
+ .layui-tab-item{
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
</style>
|
|
|
</head>
|
|
|
<body>
|
|
|
@@ -65,7 +90,7 @@
|
|
|
<li class="layui-this" lay-id="0">档案信息</li>
|
|
|
<li id="file_tab_list">文件预览</li>
|
|
|
</ul>
|
|
|
- <div class="layui-tab-content" style="height: 100px;">
|
|
|
+ <div class="layui-tab-content">
|
|
|
<div class="layui-tab-item layui-show">
|
|
|
<div>
|
|
|
<table style="font-size:12px;" border="1" class="layui-table" cellspacing="0">
|
|
|
@@ -109,15 +134,13 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="layui-tab-item">
|
|
|
- <div class="layui-fluid" style="height: 100%">
|
|
|
- <div class="layui-row">
|
|
|
- <div class="layui-col-md2" id="files">
|
|
|
- <ul id="file_list" class="layui-bg-black" style="height: calc(90vh);">
|
|
|
- </ul>
|
|
|
- </div>
|
|
|
- <div class="layui-col-md10" id="pdf_yl">
|
|
|
- <iframe src="" frameborder="0" id="pdf_show" style="width: 100%; height: calc(90vh);"></iframe>
|
|
|
- </div>
|
|
|
+ <div class="layui-row">
|
|
|
+ <div class="layui-col-md2" id="files">
|
|
|
+ <ul id="file_list" class="layui-bg-black" style="height: calc(90vh);">
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <div class="layui-col-md10" id="pdf_yl">
|
|
|
+ <a class="pdf-box" id="pdf_show"></a>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -127,6 +150,8 @@
|
|
|
<script src="../../js/lay-module/utils/base64.min.js"></script>
|
|
|
<script src="../../lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
|
|
|
<script src="../../js/lay-config.js?v=1.0.4" charset="utf-8"></script>
|
|
|
+<script src="../../js/jquery-3.6.0.min.js"></script>
|
|
|
+<script src="../../js/jquery.media.js"></script>
|
|
|
<script>
|
|
|
var dataList = [];
|
|
|
var $;
|
|
|
@@ -144,14 +169,22 @@
|
|
|
return;
|
|
|
}
|
|
|
let isShowFile = true;
|
|
|
+
|
|
|
+ let pdfRender = (src)=>{
|
|
|
+ let pdf = $("#pdf_show")
|
|
|
+ let height = pdf.parents('.layui-tab-item').height()
|
|
|
+ let width = pdf.parent().width()
|
|
|
+ pdf.attr('href',src).media({width:width || '100%', height})
|
|
|
+ }
|
|
|
+
|
|
|
$(document).on('click', 'li>a', function () {
|
|
|
$("#file_list").children("li").removeClass("layui-bg-green")
|
|
|
let li = $(this).parent("li")
|
|
|
li.addClass("layui-bg-green")
|
|
|
let pef_src = $(this).attr('pdf_src')
|
|
|
- $("#pdf_show").prop('src', pef_src)
|
|
|
- });
|
|
|
+ pdfRender(pef_src)
|
|
|
|
|
|
+ });
|
|
|
let initFile = () => {
|
|
|
let html = '' // '<button onclick="batchDownload()">批量下载</button><br/>';
|
|
|
http.get('archive/archiveFile/selectByArchiveId', {
|
|
|
@@ -170,7 +203,7 @@
|
|
|
$("#files").hide();
|
|
|
$("#pdf_yl").removeClass();
|
|
|
$("#pdf_yl").addClass("layui-col-md12");
|
|
|
- let uploadPdf = '<a style="text-align: right;color:#9ef5f9;" download="' + obj.fileName + '" href="' + 'http://66.1.21.158:9091' + obj.filePath + obj.fileName + '">下载</a>';
|
|
|
+ let uploadPdf = '<a style="text-align: right;color:#009688;" download="' + obj.fileName + '" href="' + 'http://66.1.21.158:9091' + obj.filePath + obj.fileName + '">下载</a>';
|
|
|
$("#uploadFile").html(uploadPdf);
|
|
|
dataList.push(obj);
|
|
|
} else {
|
|
|
@@ -180,16 +213,19 @@
|
|
|
for (let i = 0; i < res.data.length; i++) {
|
|
|
let item = res.data[i]
|
|
|
dataList.push(item);
|
|
|
- let pef_src = 'http://66.1.21.158:8012/onlinePreview?officePreviewType=pdf&disabledownload=false&url=' + encodeURIComponent(Base64.encode('http://66.1.21.158:9091/' + item.filePath + '/' + item.fileName))
|
|
|
+ let url = 'http://66.1.21.158:9091/' + item.filePath + '/' + item.fileName
|
|
|
+ let cls = ''
|
|
|
if (i == 0) {
|
|
|
- html += '<li class="layui-bg-green">' +
|
|
|
- '<a title="' + (i + 1) + '、' + (item.jnml ? item.jnml : '档案文件') + '" pdf_src="' + pef_src + '">' + (i + 1) + '、' + (item.jnml ? item.jnml : '档案文件') + '</a>' +
|
|
|
- '<a style="text-align: right;"download="' + item.fileName + '" href="' + 'http://66.1.21.158:9091/' + item.filePath + '/' + item.fileName + '">下载</a></li>'
|
|
|
- $("#pdf_show").prop('src', pef_src)
|
|
|
- } else {
|
|
|
- html += '<li><a title="' + (i + 1) + '、' + (item.jnml ? item.jnml : '档案文件') + '" pdf_src="' + pef_src + '">' + (i + 1) + '、' + (item.jnml ? item.jnml : '档案文件') + '</a>' +
|
|
|
- '<a style="text-align: right;" download="' + item.fileName + '" href="' + 'http://66.1.21.158:9091/' + item.filePath + '/' + item.fileName + '">下载</a></li>'
|
|
|
+ cls= 'layui-bg-green'
|
|
|
+ pdfRender(url)
|
|
|
}
|
|
|
+
|
|
|
+ html += '<li class="' +cls+' "><a title="' + (i + 1) + '、' +
|
|
|
+ (item.jnml ? item.jnml : '档案文件') +
|
|
|
+ '" pdf_src="'
|
|
|
+ + url + '">' + (i + 1) + '、' + (item.jnml ? item.jnml : '档案文件') + '</a>' +
|
|
|
+ '<a class="down" target="_blank" download="' + item.fileName + '" href="' + url +
|
|
|
+ ' ">下载</a></li>'
|
|
|
}
|
|
|
$("#file_list").append(html)
|
|
|
} else {
|
wyy