<%@ page contentType="text/html;charset=UTF-8"%>
|
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
|
<c:set var="ctx" value="${pageContext.request.contextPath}" />
|
|
<html>
|
<head>
|
<script type="text/javascript"
|
src="${ctx}/static/jquery/jquery-3.1.0.min.js"></script>
|
|
<script type="text/javascript">
|
var interval = setInterval('refreshStatus()', 20000);
|
$(document).ready(function(){
|
var info = $("#info").attr("info");
|
$("#infos").html(info);
|
});
|
// 设备页面自动刷新
|
/* function refreshStatus() {
|
window.location.reload();
|
} */
|
// 停止页面自动刷新
|
function disableAutoRefresh() {
|
clearInterval(interval);
|
}
|
|
|
function test0() {
|
let exportFileContent = document.getElementById('mtable').outerHTML;
|
let blob = new Blob([exportFileContent], { type: 'text/plain;charset=utf-8' }); // 解决中文乱码问题
|
blob = new Blob([String.fromCharCode(0xFEFF), blob], { type: blob.type });
|
// 设置链接
|
let link = window.URL.createObjectURL(blob);
|
let a = document.createElement('a'); // 创建a标签
|
a.download = '原片消耗总报表.xls'; // 设置被下载的超链接目标（文件名）
|
a.href = link; // 设置a标签的链接
|
document.body.appendChild(a); // a标签添加到页面
|
a.click(); // 设置a标签触发单击事件
|
document.body.removeChild(a); // 移除a标签
|
}
|
</script>
|
<style>
|
.box table tr th,.box table tr td{
|
text-align:center;
|
}
|
.table-stripeds > tbody > tr:nth-of-type(odd) {
|
background-color: lightblue;
|
}
|
/* 设置最外层容器可以左右滚动*/
|
.mtable {
|
overflow-x: scroll;
|
overflow-y: hidden;
|
position: relative;
|
width: 100%;
|
height: 700px;
|
font-size: 13px;
|
}
|
|
table {
|
border: 1px solid #eee;
|
}
|
|
/* 调节表头宽度 */
|
table thead {
|
background-color: #f5f5f5;
|
width: calc(100%);
|
}
|
|
table thead tr th {
|
background: #5CADFE;
|
}
|
|
/* 固定表头 */
|
table thead,
|
tbody tr {
|
display: table;
|
width: 100%;
|
table-layout: fixed;
|
}
|
|
/* 控制表格滑动 */
|
table tbody {
|
display: block;
|
height: 600px;
|
overflow-y: scroll;
|
}
|
|
/* 隐藏 y轴的滚动条，仍然可以上下滚动 */
|
table tbody::-webkit-scrollbar {
|
display: none;
|
}
|
|
th,
|
td {
|
white-space: nowrap;
|
width: 130px;
|
height: 30px;
|
text-align: center;
|
overflow: hidden;
|
border: 1px solid #f5f5f5;
|
border-width: thin;
|
}
|
</style>
|
<title>切割报表</title>
|
</head>
|
<body>
|
<div class="content-wrapper">
|
<!-- <div style='height:20px;width:300px;background-color:#3C8DBC;float:right;'><span style = 'color:#fff;' >故障情况:</span><span id='infos'></span></div> -->
|
<section class="content-header">
|
<h1>切割总报表</small></h1>
|
|
<ol class="breadcrumb">
|
|
|
</ol>
|
</section>
|
<div id = "allstatu" allstatu = "${allstatu}"></div>
|
<div id = "info" info = "${info}"></div>
|
<!-- Main content -->
|
<section class="content container-fluid">
|
<form action="${ctx }/reportform/cutmanagerepoortform1" id="formid" method="get">
|
<div style="margin-top: 20px;">
|
|
开始时间：<input type="datetime-local" id="starttime" name="starttime" />
|
结束时间：<input type="datetime-local" id="findtime" name="findtime" />
|
<input type="submit" class="btn btn-primary " value="查询"/>
|
<button type="button" onclick="test0()" class="btn btn-primary ">导出表格</button>
|
</div>
|
</form>
|
|
<div class="box" style="height: 700px; overflow: auto;margin-top: 10px;">
|
<table class="table table-stripeds table-hover"
|
id="mtable" style="overflow-x: auto">
|
<thead>
|
<tr>
|
<th>长度</th>
|
<th>高度</th>
|
<th>厚度</th>
|
<th>颜色</th>
|
<th>数量</th>
|
<th>面积</th>
|
<th>尺寸</th>
|
<th>单位</th>
|
</tr>
|
</thead>
|
<tbody>
|
${cutmanagerepoortformhtml1}
|
</tbody>
|
</table>
|
</div>
|
</section>
|
<!-- /.content -->
|
</div>
|
<!-- /.content-wrapper -->
|
</body>
|
</html>
|
