<%@ page contentType="text/html;charset=UTF-8"%>
|
|
<html>
|
<head>
|
<link rel="stylesheet" href="../static/AdminLTE/bower_components/bootstrap/dist/css/bootstrap.min.css">
|
<!-- Font Awesome -->
|
<link rel="stylesheet" href="../static/AdminLTE/bower_components/font-awesome/css/font-awesome.min.css">
|
<!-- Ionicons -->
|
<link rel="stylesheet" href="../static/AdminLTE/bower_components/Ionicons/css/ionicons.min.css">
|
<!-- Theme style -->
|
<link rel="stylesheet" href="../static/AdminLTE/dist/css/AdminLTE.min.css">
|
<link rel="stylesheet" href="../static/AdminLTE/dist/css/skins/skin-blue.min.css">
|
<link type="text/css" rel="stylesheet" href="../static/AdminLTE/bower_components/bootstrap/dist/css/bootstrap.css">
|
<script type="text/javascript"
|
src="../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 style="padding: 20px;background-color:#D5EAFF;height:100%">
|
<div id='app'>
|
<!-- <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">
|
<div style="margin-top: 20px;">
|
流程卡：<input v-model="liuchengka" type="text" id="engineeringid" name="engineeringid" />
|
线路：<input v-model="gongchenghao" type="text" id="processcardid" name="processcardid" />
|
开始时间：<input v-model="stateTime" type="datetime-local" id="starttime" name="starttime" />
|
结束时间：<input v-model="endTime" type="datetime-local" id="findtime" name="findtime" />
|
<input @click="selectGlass" type="button" class="btn btn-primary " value="查询"/>
|
<button type="button" onclick="test0()" class="btn btn-primary ">导出表格</button>
|
</div>
|
<h3>总面积：{{countGlass[0][0]}}平方米 总周长：{{countGlass[0][1]}}米 总片数：{{countGlass[0][2]}}</h3>
|
|
<div class="box" style="height: 700px;width:100%; overflow: auto;margin-top: 10px;">
|
<table class="table table-stripeds table-hover" id="mtable"
|
style="overflow-x: auto">
|
<thead>
|
<tr>
|
<th>序号</th>
|
<th>玻璃ID</th>
|
<th>长度</th>
|
<th>宽度</th>
|
<th>厚度</th>
|
<th>颜色</th>
|
<th>流程卡</th>
|
<th>工程号</th>
|
<th>批次号</th>
|
<th>完成时间</th>
|
|
</tr>
|
</thead>
|
<tbody>
|
<tr v-show="Object.keys(items).length!=0" v-for="(items,index) in shuzu">
|
<td>{{index+1}}</td>
|
<td v-for="(item,key,index) in items">
|
{{item}}
|
</td>
|
</tr>
|
</tbody>
|
</table>
|
</div>
|
</section>
|
<!-- /.content -->
|
</div>
|
<!-- /.content-wrapper -->
|
</body>
|
<script src="../js/vue.min.js"></script>
|
<script src="../js/mixins.js"></script>
|
<script>
|
let app = new Vue({
|
el:'#app',
|
mixins:[mixin],
|
data:{
|
shuzu:[],
|
stateTime:"",
|
endTime:"",
|
liuchengka:'',
|
gongchenghao:"",
|
countGlass:[]
|
},
|
methods:{
|
selectGlass:function(){
|
let canshu={
|
stateTime:this.stateTime,
|
endTime:this.endTime,
|
liuchengka:this.liuchengka,
|
gongchenghao:this.gongchenghao
|
}
|
let sql="{call AXJ_baobiao_lengjiagong_chaxun(?,?,?,?,?)}~"+JSON.stringify(canshu);
|
loadAjxs('报表冷加工',sql,2,"shuzu");
|
sql="{call AXJ_baobiao_lengjiagong_zhouchangchaxun(?,?,?,?,?)}~"+JSON.stringify(canshu);
|
loadAjxs('报表冷加工',sql,2,"countGlass");
|
}
|
},
|
mounted:function(){
|
let canshu={
|
stateTime:'',
|
endTime:'',
|
liuchengka:'',
|
gongchenghao:''
|
}
|
let sql="{call AXJ_baobiao_lengjiagong_chaxun(?,?,?,?,?)}~"+JSON.stringify(canshu);
|
loadAjxs('报表冷加工',sql,2,"shuzu");
|
sql="{call AXJ_baobiao_lengjiagong_zhouchangchaxun(?,?,?,?,?)}~"+JSON.stringify(canshu);
|
loadAjxs('报表冷加工',sql,2,"countGlass");
|
}
|
})
|
</script>
|
</html>
|
