<!DOCTYPE html>
|
<html>
|
<head>
|
<meta charset="utf-8">
|
<title>实时出入库</title>
|
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
|
<link href="./css/mui.min.css" rel="stylesheet" />
|
<style>
|
|
/*实时出入库信息*/
|
.inout_real{
|
display: block;
|
background: #fff;
|
border-top: 1px rgb(236, 234, 244) solid;
|
border-bottom: rgb(236, 234, 244) solid;
|
}
|
.inout_real .inout_title{
|
display: block;
|
font-size: 16px;
|
padding: 0 15px;
|
box-sizing: border-box;
|
color: #245ca7;
|
height: 40px;
|
line-height: 40px;
|
border-bottom: 1px #efefef solid;
|
}
|
.inout_real .inout_body1{
|
width: 50%;
|
float: left;
|
padding: 12px 0;
|
border-right: 1px rgb(236, 234, 244) solid;
|
border-bottom: 1px rgb(236, 234, 244) solid;
|
}
|
.inout_real .inout_body2{
|
height: 44px;
|
}
|
.inout_real .inout_body2 h3{
|
font-size: 16px;
|
}
|
.inout_real .t1{
|
font-size: 20px;
|
}
|
.inout_real .t2{
|
font-size: 16px;
|
font-weight: 400;
|
|
}
|
.inout_real .t3{
|
float:left;
|
width: 50%;
|
text-align: center;
|
margin-top: 10px;
|
}
|
.inout_real .t4{
|
float:right;
|
width: 50%;
|
text-align: center;
|
margin-top: 10px;
|
}
|
.inout_in1{
|
float: left;
|
width: 50%;
|
text-align: center
|
}
|
.inout_in2{
|
float: right;
|
width: 50%;
|
text-align: center
|
}
|
.inout_out1{
|
float: left;
|
width: 50%;
|
text-align: center
|
}
|
.inout_out2{
|
float: right;
|
width: 50%;
|
text-align: center
|
}
|
.inout_title1{
|
display: block;
|
font-size: 16px;
|
background: #fff;
|
padding: 0 15px;
|
box-sizing: border-box;
|
color: #245ca7;
|
height: 40px;
|
line-height: 40px;
|
border-bottom: 1px #efefef solid;
|
}
|
|
.inout_table {
|
margin-bottom: 6px;
|
}
|
|
.inout_table table {
|
width: 100%;
|
background-color: #fff !important
|
}
|
|
.inout_table tr {
|
font-size: 13px;
|
text-align: center;
|
line-height: 30px;
|
}
|
|
.inout_table th {
|
font-weight: 400;
|
min-width: 42px;
|
text-align: center;
|
}
|
.inout_table td {
|
min-width: 42px;
|
text-align: center;
|
padding: 0 2px;
|
}
|
.right{
|
border-right: 2px #efefef solid !important;
|
}
|
.back{
|
background: #bfdbf9;
|
}
|
</style>
|
</head>
|
<body>
|
<!--下拉刷新容器-->
|
<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
|
<div class="mui-scroll">
|
<!-- 统计信息-->
|
<div class="inout_real">
|
<div class="inout_title"><strong>统计信息</strong><span style="color: #333333;"> (下拉刷新)</span></div>
|
<div style="height: 76px;width: 100%;">
|
<div class="inout_body1">
|
<div class="inout_in1">
|
<h3 class="t1"><span id="inSumNum"></span>辆</h3>
|
<h3 class="t2">入库登记</h3>
|
</div>
|
<div class="inout_in2">
|
<h3 class="t1"><span id="inCompleteNum"></span>辆</h3>
|
<h3 class="t2">入库完成</h3>
|
</div>
|
</div>
|
<div class="inout_body1">
|
<div class="inout_out1">
|
<h3 class="t1"><span id="outSumNum"></span>辆</h3>
|
<h3 class="t2">出库登记</h3>
|
</div>
|
<div class="inout_out2">
|
<h3 class="t1"><span id="outCompleteNum"></span>辆</h3>
|
<h3 class="t2">出库完成</h3>
|
</div>
|
</div>
|
</div>
|
<div class="inout_body2">
|
<div class="t3">
|
<h3>
|
<span style="font-weight: 400;">入库完成率:</span>
|
<span id="perInComplete">0%</span>
|
</h3>
|
</div>
|
<div class="t4">
|
<h3>
|
<span style="font-weight: 400;">出库完成率:</span>
|
<span id="perOutComplete">0%</span>
|
</h3>
|
</div>
|
</div>
|
<div style="width: 100%;height: 40px;border-top: 1px #efefef solid;padding: 8px 0 8px 15px;">
|
<h3 style="font-size: 16px;font-weight: 400;">
|
<span>更新时间：</span>
|
<span id="updateTime"></span>
|
</h3>
|
</div>
|
</div>
|
<!--实时信息-->
|
<div class="inout_title1"><strong>实时信息</strong></div>
|
<div class="inout_table">
|
<table>
|
<thead>
|
<tr>
|
<th class="right">单据号</th>
|
<th class="right">车牌号</th>
|
<th class="right">类型</th>
|
<th class="right">当前流程</th>
|
<th>目标仓库</th>
|
</tr>
|
</thead>
|
<tbody id="inoutList">
|
<!-- <tr class="back">
|
<td class="right">03180001</td>
|
<td class="right">豫A12BC5</td>
|
<td class="right">入库</td>
|
<td class="right">值仓</td>
|
<td>43号仓</td>
|
</tr>
|
<tr>
|
<td class="right">03180001</td>
|
<td class="right">豫A12BC5</td>
|
<td class="right">入库</td>
|
<td class="right">值仓</td>
|
<td>43号仓</td>
|
</tr> -->
|
</tbody>
|
</table>
|
</div>
|
</div>
|
</div>
|
<script src="./js/mui.min.js"></script>
|
<script src="./js/jquery.min.js"></script>
|
<script type="text/javascript" charset="utf-8">
|
mui.init({
|
pullRefresh: {
|
container: '#pullrefresh',
|
down: {
|
callback: pullRefresh
|
}
|
// ,up: {
|
// contentrefresh: '正在加载...',
|
// callback: pullRefresh
|
// }
|
}
|
});
|
|
var url;
|
var inoutRealList;
|
var time;
|
var data = {
|
"interfaceId": "5203",
|
"sign": "10203",
|
"outId": "10203",
|
"reqDateTime": new Date(),
|
"tokenAuth": "",
|
"data": {}
|
};
|
mui.plusReady(function() {
|
var user = JSON.parse(localStorage.getItem('user'));
|
url = user.url + "/api-phone/gateway";
|
data.tokenAuth = user.tokenAuth;
|
})
|
/**
|
* 下拉或者刷新具体业务实现
|
*/
|
function pullRefresh() {
|
setTimeout(function() {
|
getInoutList();
|
}, 1000);
|
}
|
|
function getInoutList() {
|
inoutRealList = null;
|
time = null;
|
mui.ajax(url, {
|
type: "POST",
|
dataType: "json",
|
crossDomain: true,
|
contentType: "application/json;charset=utf-8",
|
data: JSON.stringify(data),
|
success: function(result) {
|
time = result.respDateTime;
|
if (result.code == "0000") {
|
inoutRealList = result.data;
|
renderInout();
|
} else {
|
renderInout();
|
}
|
},
|
error: function() {
|
mui.alert("系统繁忙,请重试！", "提示", ["确定"], function() {}, "div")
|
}
|
})
|
}
|
|
//渲染页面
|
function renderInout() {
|
//更新统计信息
|
$("#inSumNum").html(inoutRealList.inSumNum);
|
$("#inCompleteNum").html(inoutRealList.inCompleteNum);
|
$("#outSumNum").html(inoutRealList.outSumNum);
|
$("#outCompleteNum").html(inoutRealList.outCompleteNum);
|
if (inoutRealList.perInComplete) {
|
$("#perInComplete").html(inoutRealList.perInComplete);
|
}
|
if (inoutRealList.perOutComplete) {
|
$("#perOutComplete").html(inoutRealList.perOutComplete);
|
}
|
if (time) {
|
$("#updateTime").html(time);
|
}
|
//更新实时流水信息
|
var list = inoutRealList.listInout;
|
var html = '';
|
if (list != null && list.length > 0) {
|
$.each(list, function(index, item) {
|
if (index % 2 == 0) {
|
html += '<tr class="back">';
|
} else {
|
html += '<tr>';
|
}
|
html += '<td class="right">' + item.id.substring(6) + '</td>';
|
html += '<td class="right">' + item.plateNum + '</td>';
|
html += '<td class="right">' + item.typeName + '</td>';
|
html += '<td class="right">' + item.progressName + '</td>';
|
html += '<td>' + item.depotName + '</td></tr>';
|
})
|
mui.toast("数据已刷新！");
|
} else {
|
html += '<tr><td class="back" colspan="5">暂无出入库信息</td></tr>';
|
mui.toast("已刷新，暂无出入库信息！");
|
}
|
$("#inoutList").html(html);
|
mui('#pullrefresh').pullRefresh().endPulldownToRefresh();
|
// mui('#pullrefresh').pullRefresh().endPullupToRefresh();
|
|
}
|
</script>
|
</body>
|
</html>
|
