You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
141 lines
6.2 KiB
141 lines
6.2 KiB
2 years ago
|
<!DOCTYPE html>
|
||
|
|
<!--解决idea thymeleaf 表达式模板报红波浪线-->
|
||
|
|
<!--suppress ALL -->
|
||
|
|
<html xmlns:th="http://www.thymeleaf.org" lang="zh-CN">
|
||
|
|
<head>
|
||
|
|
<!-- 引入公用部分 -->
|
||
|
|
<script th:replace="common/head::static"></script>
|
||
|
|
<!-- 样式 -->
|
||
|
|
<link th:href="@{/css/common/contianer.css}" rel="stylesheet" type="text/css"/>
|
||
|
|
<link th:href="@{/css/sys/file/fileView.css}" rel="stylesheet" type="text/css"/>
|
||
|
|
<script th:inline="javascript">
|
||
|
|
const file = /*[[${fileData}]]*/ {};
|
||
|
|
const fileViewUrl = /*[[${fileViewUrl}]]*/ '';
|
||
|
|
const downloadUrl = /*[[${downloadUrl}]]*/ '';
|
||
|
|
</script>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="layui-row">
|
||
|
|
<div class="layui-col-md10">
|
||
|
|
<div class="layui-card">
|
||
|
|
<!--<div class="layui-card-header"></div>-->
|
||
|
|
<div class="layui-card-body" id="fileViewer">
|
||
|
|
<div class="file-viewer-container">
|
||
|
|
<iframe id="office-online" height="100%" width="100%" scrolling="0"
|
||
|
|
style="overflow: hidden; border: 0;"></iframe>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="layui-col-md2">
|
||
|
|
<div class="layui-card">
|
||
|
|
<!--<div class="layui-card-header">文件属性</div>-->
|
||
|
|
<div class="layui-card-body" style="padding: 0; padding-top: 15px;">
|
||
|
|
<div class="file-property">
|
||
|
|
<label class="field-name">文件名称</label>
|
||
|
|
<label class="field-value" name="fileName"></label>
|
||
|
|
</div>
|
||
|
|
<div class="file-property">
|
||
|
|
<label class="field-name">文件密级</label>
|
||
|
|
<label class="field-value" name="secretLevel"></label>
|
||
|
|
</div>
|
||
|
|
<div class="file-property">
|
||
|
|
<label class="field-name">录入人员</label>
|
||
|
|
<label class="field-value" name="entryStaff"></label>
|
||
|
|
</div>
|
||
|
|
<div class="file-property">
|
||
|
|
<label class="field-name">导弹编号</label>
|
||
|
|
<label class="field-value" name="missileNumber"></label>
|
||
|
|
</div>
|
||
|
|
<div class="file-property">
|
||
|
|
<label class="field-name">目标/靶标类型</label>
|
||
|
|
<label class="field-value" name="targetNumber"></label>
|
||
|
|
</div>
|
||
|
|
<div class="file-property">
|
||
|
|
<label class="field-name">文件来源</label>
|
||
|
|
<label class="field-value" name="source"></label>
|
||
|
|
</div>
|
||
|
|
<div class="file-property">
|
||
|
|
<label class="field-name">目标性质</label>
|
||
|
|
<label class="field-value" name="taskNature"></label>
|
||
|
|
</div>
|
||
|
|
<div class="file-property">
|
||
|
|
<label class="field-name">部队代号</label>
|
||
|
|
<label class="field-value" name="troopCode"></label>
|
||
|
|
</div>
|
||
|
|
<div class="file-property">
|
||
|
|
<label class="field-name">装备型号</label>
|
||
|
|
<label class="field-value" name="equipmentModel"></label>
|
||
|
|
</div>
|
||
|
|
<div class="file-property">
|
||
|
|
<label class="field-name">任务时间</label>
|
||
|
|
<label class="field-value" th:text="${file_inputDate}"></label>
|
||
|
|
</div>
|
||
|
|
<div class="file-property">
|
||
|
|
<label class="field-name">文件描述</label>
|
||
|
|
<label class="field-value" name="remark"></label>
|
||
|
|
</div>
|
||
|
|
<div class="file-property" th:each="labelSet, iterState:${LabelConfigSet}">
|
||
|
|
<label class="field-name" th:text="${labelSet.fieldTitle}">标签类型</label>
|
||
|
|
<div class="field-value label-set-component read-only"
|
||
|
|
th:data-id="${labelSet.id}"
|
||
|
|
th:data-field-title="${labelSet.fieldTitle}"
|
||
|
|
th:data-label-id="${labelSet.labelId}"
|
||
|
|
th:data-label-title="${labelSet.labelTitle}"
|
||
|
|
th:data-label-id-path="${labelSet.labelIdPath}"
|
||
|
|
th:data-label-title-path="${labelSet.labelTitlePath}"></div>
|
||
|
|
</div>
|
||
|
|
<div class="file-property">
|
||
|
|
<label class="field-name">其他标签</label>
|
||
|
|
<div class=" other-label-item read-only"></div>
|
||
|
|
</div>
|
||
|
|
<div class="layui-form-item" style="display: flex; flex-direction: column;">
|
||
|
|
<input type="hidden" name="id">
|
||
|
|
<button class="layui-btn layui-btn-sm" type="button" id="download-btn" style="margin: 10px 70px"
|
||
|
|
th:text="${'下载('+ readableFileSize +')'}">
|
||
|
|
下载该文件
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
<!-- js -->
|
||
|
|
<script th:replace="common/head::static-foot"></script>
|
||
|
|
<script th:src="@{/js/sys/file/view.js}"></script>
|
||
|
|
<script>
|
||
|
|
/**
|
||
|
|
* 切换显示文件展示区域
|
||
|
|
* @param type 展示类型
|
||
|
|
*/
|
||
|
|
function showFileViewer(type) {
|
||
|
|
$('#fileViewer .file-viewer').addClass('layui-hide');
|
||
|
|
$(`#file-viewer-${type}`).removeClass('layui-hide');
|
||
|
|
$('ul.file-viewer-tab li:first').click()
|
||
|
|
}
|
||
|
|
|
||
|
|
const sizeInit = () => {
|
||
|
|
$("div.layui-card:eq(0) .layui-card-body").height(window.innerHeight - 6).css('padding', 0);
|
||
|
|
$("div.layui-card:eq(1) .layui-card-body").height(window.innerHeight - 20);
|
||
|
|
}
|
||
|
|
window.onresize = sizeInit;
|
||
|
|
sizeInit();
|
||
|
|
|
||
|
|
//返回列表页
|
||
|
|
$('#backBtn').on('click', function () {
|
||
|
|
window.parent.closeDetailsLayer();
|
||
|
|
});
|
||
|
|
$('ul.file-viewer-tab li').on('click', function () {
|
||
|
|
$(this).siblings().removeClass('tab-active');
|
||
|
|
$(this).addClass('tab-active');
|
||
|
|
let index = $('ul.file-viewer-tab li').index(this);
|
||
|
|
$(`#fileViewer .file-viewer-item`).removeClass('item-show');
|
||
|
|
$(`#fileViewer .file-viewer-item:eq(${index})`).addClass('item-show');
|
||
|
|
})
|
||
|
|
$('#download-btn').on('click', function () {
|
||
|
|
window.open(downloadUrl)
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</html>
|