<!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>
|
<style>
|
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;
|
}
|
</style>
|
<script type="text/javascript">
|
var Warehouse = '150'; //原材料仓库
|
var interval0;//计时器
|
$(function () {
|
DataGrid();
|
// 定时器
|
interval0 = setInterval(function () {
|
DataGrid();
|
}, 120000);
|
})
|
function DataGrid() {
|
$.ajax({
|
url: "http://172.16.72.3:86/DaLian/RawMaterial",
|
dataType: "JSON",
|
async: false,//使用同步的方式,true为异步方式
|
type: "POST",
|
data: { "Warehouse": Warehouse },
|
success: function (data) {
|
$("#stockqty").html(data.dt[0].STOCKQTY);
|
$("#todayinqty").html(data.dt[0].TODAYINQTY);
|
$("#todayoutqty").html(data.dt[0].TODAYOUTQTY);
|
$("#thismonthinqty").html(data.dt[0].THISMONTHINQTY);
|
$("#thismonthoutqty").html(data.dt[0].THISMONTHOUTQTY);
|
$("#turnoverday").html(data.dt[0].TURNOVERDAY);
|
$(".hd").html("");
|
var StepHtml = "";
|
StepHtml += "<ul>";
|
var result = [];
|
for (var i = 0; i < data.dt1.length; i += 2) {
|
result.push(data.dt1.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].PartName + "</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].StockQty + "</span></span>";
|
StepHtml += "<span class='mr'><i class='icon_style icon_r'></i><span class='text_s'>" + result[j][m].InRoomQty + "</span></span>";
|
StepHtml += "<span><i class='icon_style icon_c'></i><span class=text_s>" + result[j][m].OutRoomQty + "</span></span>";
|
StepHtml += "</div>";
|
StepHtml += "<div class='content_style w58'>";
|
for (var k = 0; k < result[j][m].list.length; k++) {
|
if (result[j][m].list[k].LocationStatus == "Y") {
|
StepHtml += "<div class='content_mod content_mod_bg_true'>";
|
StepHtml += "<p class='mt12'>" + result[j][m].list[k].LocationCode + "</p>";
|
StepHtml += "<p class='mb9'>" + result[j][m].list[k].LocationQty + "</p>";
|
StepHtml += "</div>";
|
}
|
else if (result[j][m].list[k].LocationStatus == "N") {
|
StepHtml += "<div class='content_mod content_mod_bg_tf'>";
|
StepHtml += "<p class='mt12'>" + result[j][m].list[k].LocationCode + "</p>";
|
StepHtml += "<p class='mb9'>" + result[j][m].list[k].LocationQty + "</p>";
|
StepHtml += "</div>";
|
}
|
else {
|
StepHtml += "<div class='content_mod content_mod_bg_false'>";
|
StepHtml += " </div>";
|
}
|
}
|
StepHtml += "</div>";
|
StepHtml += "</div>";
|
}
|
StepHtml += "</li>";
|
}
|
StepHtml += "</ul>";
|
$(".hd").append(StepHtml);
|
var time = 80;
|
$(".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='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 class='title_o'>FIFO详情</div>
|
<div class='flex_t'>
|
<div class='hd'>
|
<ul>
|
|
</ul>
|
</div>
|
</div>
|
</body>
|
|
</html>
|
