<!DOCTYPE html>
|
<html lang="zh-cn">
|
|
<head>
|
<meta charset="UTF-8">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
<title>成品仓库FIFO看板</title>
|
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
|
<link rel="stylesheet" type="text/css" href="css/bootstrap-table.min.css">
|
<link rel="stylesheet" type="text/css" href="css/index.css">
|
<script src="js/jquery.min.js"></script>
|
<script src='js/echarts.min.js'></script>
|
<script src="js/bootstrap.min.js"></script>
|
<script src='js/bootstrap-table.min.js'></script>
|
<script src='js/bootstrap-table-zh-CN.min.js'></script>
|
<script src="js/jquery.SuperSlide.2.1.3.js"></script>
|
<script src='js/template.js'></script>
|
<script src="js/jquery.qrcode.min.js"></script>
|
<script src="js/webConfig.js"></script>
|
<style>
|
.clock {
|
font-family: 'BebasNeueRegular', Arial, Helvetica, sans-serif;
|
font-size: 20px;
|
width: 450px;
|
float: right;
|
color: #fff;
|
margin-top: -75px;
|
margin-right: 5px;
|
color: #09d1ea;
|
}
|
|
.clock #Date {
|
text-align: center;
|
text-shadow: 0 0 0px #00c6ff;
|
}
|
|
.clock ul {
|
width: 450px;
|
margin: 0 auto;
|
padding: 0px;
|
list-style: none;
|
text-align: right;
|
margin-left: 15px;
|
position: relative;
|
}
|
|
.clock ul li {
|
display: inline;
|
font-size: 24px;
|
text-align: left;
|
font-family: 'BebasNeueRegular', Arial, Helvetica, sans-serif;
|
text-shadow: 0 0 0px #00c6ff;
|
}
|
|
body {
|
padding-left: 50px;
|
padding-right: 50px;
|
}
|
|
.title {
|
font-size: 44px;
|
font-family: PingFangSC;
|
font-weight: 500;
|
color: rgba(9, 209, 234, 1);
|
text-align: center;
|
background: url(img/img_little_new.png) center no-repeat;
|
margin-bottom: 30px;
|
}
|
|
.flex {
|
display: flex;
|
display: -webkit-flex;
|
justify-content: space-between;
|
flex-direction: row;
|
flex-wrap: wrap;
|
}
|
|
.flex .flex_item {
|
width: 16%;
|
height: 180px;
|
border: 3px solid #080c1c;
|
border-radius: 5px;
|
margin-bottom: 10px;
|
background: url(img/3-3.png) #02040d no-repeat center top;
|
position: relative;
|
}
|
|
.flex span {
|
position: absolute;
|
top: 50%;
|
margin-top: 0;
|
font-size: 23px;
|
font-family: PingFangSC;
|
font-weight: 400;
|
color: rgba(255, 255, 255, 1);
|
width: 100%;
|
text-align: center;
|
}
|
|
.flex p {
|
margin-bottom: 5px;
|
color: #a5a5a7;
|
position: absolute;
|
bottom: 0;
|
font-size: 16px;
|
font-family: PingFangSC;
|
font-weight: 400;
|
width: 100%
|
}
|
|
.title_o {
|
margin-top: 15px;
|
margin-bottom: 10px;
|
font-size: 18px;
|
font-family: PingFangSC;
|
font-weight: 400;
|
color: rgba(9, 209, 234, 1);
|
}
|
|
.flex_t li {
|
width: 100%;
|
}
|
|
.content_name {
|
font-size: 16px;
|
font-family: PingFangSC;
|
font-weight: 400;
|
color: rgba(255, 255, 255, 1);
|
margin-bottom: 12px;
|
}
|
|
.content_style {
|
display: inline-block;
|
vertical-align: top;
|
}
|
|
.w44 {
|
width: 44%;
|
margin-right: 15px;
|
padding: 10px 13px 5px 13px;
|
}
|
|
.w58 {
|
width: 53.5%;
|
}
|
|
.bg_color {
|
background: #0C0C18;
|
}
|
|
.icon_style {
|
display: inline-block;
|
width: 40px;
|
height: 40px;
|
margin-right: 10px;
|
}
|
|
.icon_n {
|
background: url(img/icon_n.png) no-repeat center;
|
}
|
|
.icon_r {
|
background: url(img/icon_r.png) no-repeat center;
|
}
|
|
.icon_c {
|
background: url(img/icon_c.png) no-repeat center;
|
}
|
|
.content {
|
display: inline-block;
|
width: 49.3%;
|
height: 130px !important;
|
background: rgba(4, 4, 5, 0) rgba(8, 14, 45, 0.28);
|
border-radius: 8px;
|
border: 2px solid rgba(39, 51, 91, 0.5);
|
padding: 15px;
|
margin-right: 20px;
|
margin-bottom: 10px;
|
}
|
|
.content:nth-child(2n) {
|
margin-right: 0;
|
}
|
|
.content_style span {
|
font-size: 14px;
|
font-family: PingFangSC;
|
font-weight: 400;
|
color: rgba(255, 255, 255, 1);
|
}
|
|
.mr {
|
margin-right: 35px;
|
}
|
|
.text_s {
|
vertical-align: 12px;
|
}
|
|
.content_mod {
|
width: 80px;
|
height: 60px;
|
border-radius: 2px;
|
display: inline-block;
|
margin-right: 10px;
|
vertical-align: top;
|
}
|
|
.content_mod:nth-child(5n) {
|
margin-right: 0px;
|
}
|
|
.content_mod_bg_true {
|
background: url(img/new_icon_true.png) no-repeat center;
|
border: 1px solid rgba(55, 184, 200, 1);
|
}
|
|
.content_mod_bg_tf {
|
background: url(img/new_icon_tf.png) no-repeat center;
|
border: 1px solid rgba(124, 87, 255, 1);
|
}
|
|
.content_mod_bg_false {
|
background: url(img/new_icon_false.png) no-repeat center;
|
}
|
|
.mt12 {
|
margin: 12px 0 0 0;
|
}
|
|
.mb9 {
|
margin: 0 0 7px 0;
|
}
|
|
.flex_t {
|
height: 680px;
|
overflow: hidden;
|
}
|
|
|
.col-sm-12 {
|
position: relative;
|
min-height: 1px;
|
padding-right: 0px;
|
padding-left: 0px;
|
}
|
</style>
|
<script type="text/javascript">
|
//配置参数
|
var HouseCode = '509'//仓库看板仓库编码
|
|
|
|
|
var interva0;//计时器
|
var interva1;//计时器
|
$(document).ready(function () {
|
|
// 创建两个变量，一个数组中的月和日的名称
|
var monthNames = ["1 月", "2 月", "3 月", "4 月", "5 月", "6 月", "7 月", "8 月", "9 月", "10 月", "11 月", "12 月"];
|
setInterval(function () {
|
var date1 = new Date;
|
var year = date1.getFullYear();
|
var month = date1.getMonth();
|
var day = date1.getDate();
|
var hh = date1.getHours();
|
var mm = date1.getMinutes();
|
var ss = date1.getSeconds();
|
var dayNames = new Array("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六");
|
var Stamp = new Date();
|
|
|
$('#Date').html(year + " 年" + " " + monthNames[month] + ' ' + day + " 日 " + ' ' + dayNames[Stamp.getDay()]);
|
$("#hours").html((hh < 10 ? ("0" + hh) : hh));
|
$("#min").html((mm < 10 ? ("0" + mm) : mm));
|
$("#sec").html((ss < 10 ? ("0" + ss) : ss));
|
|
}, 1000);
|
|
});
|
$(function () {
|
TopMap();
|
DataGrid();
|
// 定时器
|
interva1 = setInterval(function () {
|
TopMap();
|
}, 60000);
|
// 定时器
|
interva1 = setInterval(function () {
|
DataGrid();
|
}, 120000);
|
})
|
function TopMap() {
|
$.ajax({
|
url: GetWEBURL() + "loaddata/HouseTopData",
|
dataType: "JSON",
|
async: false,//使用同步的方式,true为异步方式
|
type: "Get",
|
data: { "HouseCode": HouseCode },
|
success: function (data) {
|
$("#stockqty").html(data.data[0].FQTY);
|
$("#todayinqty").html(data.data[1].FQTY);
|
$("#todayoutqty").html(data.data[2].FQTY);
|
$("#thismonthinqty").html(data.data[3].FQTY);
|
$("#thismonthoutqty").html(data.data[4].FQTY);
|
$("#turnoverday").html("");
|
},
|
error: function (data) {
|
|
}
|
})
|
}
|
function DataGrid() {
|
$.ajax({
|
url: GetWEBURL() + "loaddata/HouseDataTable",
|
dataType: "JSON",
|
async: false,//使用同步的方式,true为异步方式
|
type: "Get",
|
data: { "HouseCode": HouseCode },
|
success: function (data) {
|
console.info(data);
|
$(".hd").html("");
|
var StepHtml = "";
|
StepHtml += "<ul>";
|
var result = [];
|
for (var i = 0; i < data.data.length; i += 2) {
|
result.push(data.data.slice(i, i + 2));
|
}
|
for (var j = 0; j < result.length; j++) {
|
StepHtml += "<li>";
|
for (var m = 0; m < result[j].length; m++) {
|
StepHtml += "<div class='content'>";
|
StepHtml += "<div class='content_name'>" + result[j][m].FNAME + "</div>";
|
StepHtml += "<div class='content_style bg_color w44'>";
|
StepHtml += "<span class='mr'><i class='icon_style icon_n'></i><span class='text_s'>" + result[j][m].FQTY + "</span></span>";
|
StepHtml += "<span class='mr'><i class='icon_style icon_r'></i><span class='text_s'>" + result[j][m].InQty + "</span></span>";
|
StepHtml += "<span><i class='icon_style icon_c'></i><span class=text_s>" + result[j][m].OutQty + "</span></span>";
|
StepHtml += "</div>";
|
StepHtml += "<div class='content_style w58'>";
|
StepHtml += "<div class='content_mod content_mod_bg_true'>";
|
StepHtml += "<p class='mt12'>A01</p>";
|
StepHtml += "<p class='mb9'>" + result[j][m].FQTY + "</p>";
|
StepHtml += "</div>";
|
|
//StepHtml += "<div class='content_mod content_mod_bg_tf'>";
|
//StepHtml += "<p class='mt12'></p>";
|
//StepHtml += "<p class='mb9'></p>";
|
//StepHtml += "</div>";
|
|
StepHtml += "<div class='content_mod content_mod_bg_false'>";
|
StepHtml += " </div>";
|
StepHtml += "<div class='content_mod content_mod_bg_false'>";
|
StepHtml += " </div>";
|
StepHtml += "<div class='content_mod content_mod_bg_false'>";
|
StepHtml += " </div>";
|
|
StepHtml += "</div>";
|
StepHtml += "</div>";
|
}
|
StepHtml += "</li>";
|
}
|
StepHtml += "</ul>";
|
$(".hd").append(StepHtml);
|
var time = 30;
|
$(".flex_t").slide({ mainCell: ".hd ul", autoPlay: true, effect: "topMarquee", opp: false, vis: 6, interTime: time, mouseOverStop: false });
|
},
|
error: function (data) {
|
|
}
|
})
|
|
|
|
|
}
|
</script>
|
</head>
|
|
<body>
|
<div class='title'>成品仓库FIFO看板</div>
|
|
<div class="clock">
|
<ul>
|
<li id="Date"></li>
|
<li id="hours"> </li>
|
<li id="point">:</li>
|
<li id="min"> </li>
|
<li id="point">:</li>
|
<li id="sec"> </li>
|
</ul>
|
|
</div>
|
<div class="col-sm-12">
|
<div class='flex'>
|
<div class='flex_item'>
|
<span id="stockqty"></span>
|
<p>当前库存量</p>
|
</div>
|
|
<div class='flex_item'>
|
<span id="todayinqty"></span>
|
<p>今日入库数</p>
|
</div>
|
|
<div class='flex_item'>
|
<span id="todayoutqty"></span>
|
<p>今日出库数</p>
|
</div>
|
|
<div class='flex_item'>
|
<span id="thismonthinqty"></span>
|
<p>本月入库数</p>
|
</div>
|
|
<div class='flex_item'>
|
<span id="thismonthoutqty"></span>
|
<p>本月出库数</p>
|
</div>
|
|
|
<div class='flex_item'>
|
<span id="turnoverday"></span>
|
<p>库存周转天数</p>
|
</div>
|
|
|
</div>
|
</div>
|
<div class='title_o'>FIFO详情</div>
|
<div class='flex_t'>
|
<div class='hd'>
|
<ul>
|
|
</ul>
|
</div>
|
</div>
|
</body>
|
|
</html>
|
