You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

784 lines
30 KiB

<!DOCTYPE html>
<html>
<head>
<!--更多资源: -->
<meta charset="utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>执行看板</title>
<!--大屏-->
<link type="text/css" href="~/Content/Cust003/css/public.css" rel="stylesheet" />
<link type="text/css" href="~/Content/Cust003/css/icon.css" rel="stylesheet" />
<link type="text/css" href="~/Content/Cust003/css/index.css" rel="stylesheet" />
<link rel="stylesheet" href="~/Content/Cust069/fonts/icomoon.css">
<script src="~/Content/js/jquery/jquery-2.1.1.min.js" type="text/javascript"></script>
@*<script src="~/Content/Cust003/js/jquery-1.11.0.min.js" type="text/javascript"></script>*@
<script src="~/Content/Cust003/js/jquery.numscroll.js"
type="text/javascript"
charset="utf-8"></script>
<script src="~/Content/js/echarts/echarts5.3.3.min.js"></script>
<style>
h3 {
color: #FFFFFF;
text-shadow: #05d1fc 0px 1px 3px, #05d1fc 1px 0px 3px,#05d1fc 0px -1px 3px, #05d1fc -1px 0px 3px;
filter: glow(color=#00FFCC,strength=3);
}
.rightMain_top {
width: 100%;
padding-bottom: 0.1rem;
}
.animationNone {
animation: none !important;
}
.CustDiv2 ul li:nth-child(1), .CustDiv2 div div ul li:nth-child(1) {
width: 20% !important;
}
.CustDiv2 ul li:nth-child(2), .CustDiv2 div div ul li:nth-child(2) {
width: 25% !important;
}
.CustDiv2 ul li:nth-child(3), .CustDiv2 div div ul li:nth-child(3) {
width: 11% !important;
}
.CustDiv2 ul li:nth-child(4), .CustDiv2 div div ul li:nth-child(4) {
width: 11% !important;
}
.CustDiv2 ul li:nth-child(5), .CustDiv2 div div ul li:nth-child(5) {
width: 11% !important;
}
.CustDiv2 ul li:nth-child(6), .CustDiv2 div div ul li:nth-child(6) {
width: 35% !important;
}
.CustDiv3 ul li:nth-child(1), .CustDiv3 div div ul li:nth-child(1) {
width: 20% !important;
}
.CustDiv3 ul li:nth-child(2), .CustDiv3 div div ul li:nth-child(2) {
width: 28% !important;
}
.CustDiv3 ul li:nth-child(3), .CustDiv3 div div ul li:nth-child(3) {
width: 11% !important;
}
.CustDiv3 ul li:nth-child(4), .CustDiv3 div div ul li:nth-child(4) {
width: 15% !important;
}
.CustDiv3 ul li:nth-child(5), .CustDiv3 div div ul li:nth-child(5) {
width: 25% !important;
}
.CustDiv3 ul li:nth-child(6), .CustDiv3 div div ul li:nth-child(6) {
width: 0% !important;
}
/*.CustDiv4 ul li:nth-child(1), .CustDiv4 div div ul li:nth-child(1) {
width: 5% !important;
}*/
.CustDiv4 ul li:nth-child(2), .CustDiv4 div div ul li:nth-child(2) {
width: 18% !important;
}
.CustDiv4 ul li:nth-child(3), .CustDiv4 div div ul li:nth-child(3) {
width: 26% !important;
}
.CustDiv4 ul li:nth-child(4), .CustDiv4 div div ul li:nth-child(4) {
width: 30% !important;
}
.CustDiv4 ul li:nth-child(5), .CustDiv4 div div ul li:nth-child(5) {
width: 5% !important;
}
.CustDiv4 ul li:nth-child(6), .CustDiv4 div div ul li:nth-child(6) {
width: 5% !important;
}
.CustDiv4 ul li:nth-child(7), .CustDiv4 div div ul li:nth-child(7) {
width: 5% !important;
}
.CustDiv1 ul li:nth-child(1), .CustDiv1 div div ul li:nth-child(1) {
width: 30% !important;
}
.CustDiv1 ul li:nth-child(2), .CustDiv1 div div ul li:nth-child(2) {
width: 20% !important;
}
.CustDiv1 ul li:nth-child(3), .CustDiv1 div div ul li:nth-child(3) {
width: 20% !important;
}
.CustDiv1 ul li:nth-child(4), .CustDiv1 div div ul li:nth-child(4) {
width: 20% !important;
}
.CustDiv1 ul li:nth-child(5), .CustDiv1 div div ul li:nth-child(5) {
width: 10% !important;
}
.CustDiv1 ul li:nth-child(6), .CustDiv1 div div ul li:nth-child(6) {
width: 30% !important;
}
.CustDiv1 ul li:nth-child(7), .CustDiv1 div div ul li:nth-child(7) {
width: 10% !important;
}
.leftMain_top, .leftMain_bottom {
height: calc(45%);
}
.leftMain_topIn, .leftMain_bottomIn, .leftMain_topIn ul:nth-child(1),
.leftMain_bottomIn ul:nth-child(1), .rightMain_bottom, .rightMain_bottomIn {
height: 100%;
}
img {
height: 0.2rem;
width: 0.5rem;
padding-top: 0.05rem;
}
.bg {
padding-top: 0.01rem;
}
.title {
height: 8%;
text-shadow: #01db78 0px 2px 3px, #01db78 1px 0px 3px, #05d1fc 0px -2px 3px, #05d1fc -1px 0px 3px;
}
.TopName {
vertical-align: middle;
text-align: center;
font-size: 30px;
font-weight: 700;
color: white;
}
.TopNameTime {
vertical-align: middle;
text-align: right;
font-size: 20px;
font-weight: 700;
color: white;
}
/*td {
box-sizing:inherit;
}*/
.rightMain_bottomIn .biaoge_list ul li {
overflow: hidden;
padding-right: 0px;
}
.Tableinfo td{
display: inline-block;
width: 13% !important;
/*border: 1px solid white;*/
margin-left: 3%;
}
.yellow {
/*background-color: #FAC858;*/
background-color: yellow;
color:white !important;
}
.red {
/*background-color: #FF79BC;*/
background-color: red;
color:white !important;
}
.green {
/*background-color: #FF79BC;*/
background-color: green;
color:white !important;
}
.white{
color:white !important;
}
</style>
<script type="text/javascript">
document.documentElement.style.fontSize =
(document.documentElement.clientWidth / 768) * 100 + 'px'
</script>
<script src="~/Content/Cust003/js/echarts.min.js"></script>
</head>
<body>
<div class="bg">
<table class="title">
<tr>
<td style="width:20%">
@*<div class="TopNamelogo" id="TopNamelogo">
<img src="~/Content/img/ninghong.jpg" border="0" class="logoclass" />
</div>*@
</td>
<td style="width:60%">
<div class="TopName" id="TopName">执行看板</div>
</td>
<td style="width:20%">
<div class="TopNameTime" id="TopNameTime"></div>
</td>
</tr>
</table>
@*<div class="title">执行看板</div>*@
<div style="width:80%;height:3%;margin-left:10%;margin-bottom:1%;" >
<table class="Tableinfo" style="color:white;width:100%;height:100%">
<tr>
<td>
<span>原料库存:</span>
<label id="YL"></label>
</td>
<td>
<span>成品库存:</span>
<label id="CP"></label>
</td>
<td>
<span>保护膜仓:</span>
<label id="BHM"></label>
</td>
<td>
<span>造粒料仓:</span>
<label id="ZLL"></label>
</td>
<td>
<span>分切库存:</span>
<label id="FQ"></label>
</td>
<td>
<span>副产品库存:</span>
<label id="FCP"></label>
</td>
</tr>
</table>
</div>
<div class="leftMain_top">
<div class="leftMain_topIn">
<ul>
<li class="LineLi">
<div class="rightMain_bottom">
<div class="rightMain_bottomIn">
<h3> 成品发货一览</h3>
<div class="biaoge biaoge_list" id="marqueelist1"
style="width: 100%; ">
<div class="biaoge_listIn CustDiv1">
<ul class="ul_title">
<li>发货单号</li>
<li>状态</li>
<li>滞留天数</li>
<li>管理员</li>
</ul>
<div class="ul_list" id="marqueeCust1">
<div class="ul_listIn" id="marqueeCustCH1">
</div>
</div>
</div>
</div>
<span class="border_bg_leftTop"></span>
@*<span class="border_bg_rightTop"></span>
<span class="border_bg_leftBottom"></span>*@
<span class="border_bg_rightBottom"></span>
</div>
</div>
@*</div>*@
</li>
<li class="LineLi">
<div class="rightMain_bottom">
<div class="rightMain_bottomIn">
<h3> 采购未到货一览</h3>
<div class="biaoge biaoge_list" id="marqueelist2"
style="width: 100%; ">
<div class="biaoge_listIn CustDiv2">
<ul class="ul_title">
<li>到货单</li>
<li>存货名称</li>
<li>规格型号</li>
<li>应到数量</li>
<li>未入库数量</li>
<li>供应商</li>
</ul>
<div class="ul_list" id="marqueeCust2">
<div class="ul_listIn" id="marqueeCustCH2">
</div>
</div>
</div>
</div>
<span class="border_bg_leftTop"></span>
@*<span class="border_bg_rightTop"></span>
<span class="border_bg_leftBottom"></span>*@
<span class="border_bg_rightBottom"></span>
</div>
</div>
</li>
<li class="LineLi">
<div class="rightMain_bottom">
<div class="rightMain_bottomIn">
<h3> 成品未入库</h3>
<div class="biaoge biaoge_list" id="marqueelist3"
style="width: 100%; ">
<div class="biaoge_listIn CustDiv4">
<ul class="ul_title">
<li>产线</li>
<li>存货编码</li>
<li>数量</li>
<li>滞留天数</li>
</ul>
<div class="ul_list" id="marqueeCust3">
<div class="ul_listIn" id="marqueeCustCH3">
</div>
</div>
</div>
</div>
<span class="border_bg_leftTop"></span>
@*<span class="border_bg_rightTop"></span>
<span class="border_bg_leftBottom"></span>*@
<span class="border_bg_rightBottom"></span>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="leftMain_bottom">
<div class="leftMain_bottomIn">
<ul>
<li class="LineLi">
<div class="rightMain_bottom">
<div class="rightMain_bottomIn">
<h3> 委外加工状态一览</h3>
<div class="biaoge biaoge_list" id="marqueelist4"
style="width: 100%; ">
<div class="biaoge_listIn CustDiv1">
<ul class="ul_title">
<li>委外订单号</li>
<li>状态</li>
<li>出库单号</li>
<li>发单时间</li>
</ul>
<div class="ul_list" id="marqueeCust4">
<div class="ul_listIn" id="marqueeCustCH4">
</div>
</div>
</div>
</div>
<span class="border_bg_leftTop"></span>
@*<span class="border_bg_rightTop"></span>*@
@*<span class="border_bg_leftBottom"></span>*@
<span class="border_bg_rightBottom"></span>
</div>
</div>
</li>
<li class="LineLi">
<div class="rightMain_bottom">
<div class="rightMain_bottomIn">
<h3> 委外未到货一览</h3>
<div class="biaoge biaoge_list" id="marqueelist5"
style="width: 100%; ">
<div class="biaoge_listIn CustDiv2">
<ul class="ul_title">
<li>到货单</li>
<li>物料编码</li>
<li>规格型号</li>
<li>应到数量</li>
<li>未入库数量</li>
<li>供应商</li>
</ul>
<div class="ul_list" id="marqueeCust5">
<div class="ul_listIn" id="marqueeCustCH5">
</div>
</div>
</div>
</div>
<span class="border_bg_leftTop"></span>
@*<span class="border_bg_rightTop"></span>
<span class="border_bg_leftBottom"></span>*@
<span class="border_bg_rightBottom"></span>
</div>
</div>
</li>
<li class="LineLi">
<div class="rightMain_bottom">
<div class="rightMain_bottomIn">
<h3> 今日调拨</h3>
<div class="biaoge biaoge_list" id="marqueelist6"
style="width: 100%; ">
<div class="biaoge_listIn CustDiv3">
<ul class="ul_title">
<li>存货编码</li>
<li>存货名称</li>
<li>数量</li>
<li>产线</li>
<li>调拨时间</li>
</ul>
<div class="ul_list" id="marqueeCust6">
<div class="ul_listIn" id="marqueeCustCH6">
</div>
</div>
</div>
</div>
<span class="border_bg_leftTop"></span>
@*<span class="border_bg_rightTop"></span>
<span class="border_bg_leftBottom"></span>*@
<span class="border_bg_rightBottom"></span>
</div>
</div>
</li>
</ul>
</div>
</div>
@*</div>*@
<div style="clear: both"></div>
</div>
<script>
var DataF = 3000000;// 300;//单位秒 //刷新数据时间
var _BarWidth = "25%";
var _barBorderRadius_M = 2;
$(function () {
getTime();
GetDataZong();
//刷新数据
timer = setInterval(function () {
GetDataZong();
}, DataF * 1000);
});
function getTime() {
var days = new Array("日", "一", "二", "三", "四", "五", "六");
var currentDT = new Date();
var y, m, date, day, hs, ms, ss, theDateStr;
y = currentDT.getFullYear(); //四位整数表示的年份
m = currentDT.getMonth() < 10 ? '0' + (currentDT.getMonth() + 1) : (currentDT.getMonth() + 1); //月
date = currentDT.getDate() < 10 ? '0' + currentDT.getDate() : currentDT.getDate(); //日
day = currentDT.getDay(); //星期
hs = currentDT.getHours() < 10 ? '0' + currentDT.getHours() : currentDT.getHours(); //时
ms = currentDT.getMinutes() < 10 ? '0' + currentDT.getMinutes() : currentDT.getMinutes(); //分
ss = currentDT.getSeconds() < 10 ? '0' + currentDT.getSeconds() : currentDT.getSeconds(); //秒
theDateStr = y + "-" + m + "-" + date + " " + hs + ":" + ms + ":" + ss;
//填充到组件中
$("#TopNameTime").text(theDateStr);
// setTimeout 在执行时,是在载入后延迟指定时间后,去执行一次表达式,仅执行一次
window.setTimeout(getTime, 1000);
}
function GetDataZong() {
//echart1_1();
Get_KCInfo();
Get_Table1("marqueeCustCH1", "30");
Get_Table2("marqueeCustCH2", "60");
Get_Table3("marqueeCustCH3", "90");
Get_Table4("marqueeCustCH4", "90");
Get_Table5("marqueeCustCH5", "90");
Get_Table6("marqueeCustCH6", "90");
GetZhiXing_RCVUnInWare();
SetIfGo("marqueeCust1", "marqueeCustCH1", "marqueelist1");//判断是否需要滚动
SetIfGo("marqueeCust2", "marqueeCustCH2", "marqueelist2");//判断是否需要滚动
SetIfGo("marqueeCust3", "marqueeCustCH3", "marqueelist3");//判断是否需要滚动
SetIfGo("RCVUNINView", "RCVUNIN", "marqueelist4");//判断是否需要滚动
}
function Get_KCInfo() {
$.ajax({
url: "/SRM/WatchPanel/Get_KCInfo" + "?" + Math.random(),
dataType: "json",
async: false,
success: function (data) {
$("#YL").text(data[0].YCL);
$("#CP").text(data[0].CP);
$("#BHM").text(data[0].BHM);
$("#ZLL").text(data[0].ZLL);
$("#FQ").text(data[0].FQ);
$("#FCP").text(data[0].FCP);
},
error: function (aa) {
}
});
}
function SetIfGo(DivID, DivCHID,listID)
{
var ListDIV = $("#" + listID)[0].clientHeight;
var H_marqueediv = $("#" + DivCHID)[0];
//var H_marquee= H_marqueediv.clientHeight;
var H_marqueeView = $("#" + DivID)[0].clientHeight;
if ((ListDIV-40) > H_marqueeView) {
if (!$("#" + DivID).hasClass("animationNone")) {
$("#" + DivID).addClass("animationNone");
}
if (!$("#" + DivCHID).hasClass("animationNone")) {
$("#" + DivCHID).addClass("animationNone");
}
}
else {
if ($("#" + DivID).hasClass("animationNone")) {
$("#" + DivID).removeClass("animationNone");
}
if ($("#" + DivCHID).hasClass("animationNone")) {
$("#" + DivCHID).removeClass("animationNone");
}
}
}
function Get_Table1(marqueeID, ItemNumber) {
$.ajax({
url: "/SRM/WatchPanel/Get_Table1" + "?" + Math.random(),
dataType: "json",
async: false,
success: function (data) {
if (data != false && data != null && data.length > 0) {
var html = "";
for (var i = 0; i < data.length; i++) {
var statusClass = "";
if (data[i].Status == 'yellow') {
statusClass = "yellow";
} else if (data[i].Status == 'red') {
statusClass = "red";
} else if (data[i].Status == 'green') {
statusClass = "green";
}
else {
statusClass = "white";
}
html += '<ul class="ul_con ' + statusClass + '"> ';
html += ' <li>' + data[i].发货单号 + '</li> <li>' + data[i].状态 + '</li>';
html += '<li>' + data[i].滞留天数 + '</li> <li>' + data[i].管理员 + '</li> </ul> ';
}
$("#" + marqueeID).html(html);
} else {
$("#" + marqueeID).html("");
}
},
error: function (aa) {
}
});
}
function Get_Table2(marqueeID, ItemNumber) {
$.ajax({
url: "/SRM/WatchPanel/Get_Table2" + "?" + Math.random(),
dataType: "json",
async: false,
success: function (data) {
if (data != false && data != null && data.length > 0) {
var html = "";
for (var i = 0; i < data.length; i++) {
html += ' <ul class="ul_con"> ';
html += '<li>' + data[i].到货单 + '</li> <li>' + data[i].存货名称 + '</li>';
html += '<li>' + data[i].规格型号 + '</li> <li>' + data[i].应到数量 + '</li>';
html += '<li>' + data[i].未入库数量 + '</li> <li>' + data[i].供应商 + '</li> </ul> ';
}
$("#" + marqueeID).html(html);
} else {
$("#" + marqueeID).html("");
}
},
error: function (aa) {
}
});
}
function Get_Table3(marqueeID, ItemNumber) {
$.ajax({
url: "/SRM/WatchPanel/Get_Table3" + "?" + Math.random(),
dataType: "json",
async: false,
success: function (data) {
if (data != false && data != null && data.length > 0) {
var html = "";
for (var i = 0; i < data.length; i++) {
var statusClass = "";
if (data[i].Status === 'yellow') {
statusClass = "yellow";
} else if (data[i].Status === 'red') {
statusClass = "red";
} else if (data[i].Status === 'green') {
statusClass = "green";
}
html += '<ul class="ul_con ' + statusClass + '">';
html += '<li>' + data[i].产线 + '</li> <li>' + data[i].存货编码 + '</li>';
html += '<li>' + data[i].数量 + '</li> <li>' + data[i].滞留时间 + '</li> </ul> ';
}
$("#" + marqueeID).html(html);
} else {
$("#" + marqueeID).html("");
}
},
error: function (aa) {
}
});
}
function Get_Table4(marqueeID, ItemNumber) {
$.ajax({
url: "/SRM/WatchPanel/Get_Table4" + "?" + Math.random(),
dataType: "json",
async: false,
success: function (data) {
if (data != false && data != null && data.length > 0) {
var html = "";
for (var i = 0; i < data.length; i++) {
var statusClass = "";
if (data[i].Status === 'yellow') {
statusClass = "yellow";
} else if (data[i].Status === 'red') {
statusClass = "red";
} else if (data[i].Status === 'green') {
statusClass = "green";
}
html += '<ul class="ul_con ' + statusClass + '">';
html += '<li>' + data[i].委外订单号 + '</li> <li>' + data[i].状态 + '</li>';
html += '<li>' + data[i].出库单号 + '</li> <li>' + data[i].发单时间 + '</li> </ul> ';
}
$("#" + marqueeID).html(html);
} else {
$("#" + marqueeID).html("");
}
},
error: function (aa) {
}
});
}
function Get_Table5(marqueeID, ItemNumber) {
$.ajax({
url: "/SRM/WatchPanel/Get_Table5" + "?" + Math.random(),
dataType: "json",
async: false,
success: function (data) {
if (data != false && data != null && data.length > 0) {
var html = "";
for (var i = 0; i < data.length; i++) {
html += ' <ul class="ul_con"> ';
html += '<li>' + data[i].到货单 + '</li> <li>' + data[i].物料编码 + '</li>';
html += '<li>' + data[i].规格型号 + '</li> <li>' + data[i].应到数量 + '</li>';
html += '<li>' + data[i].未入库数量 + '</li> <li>' + data[i].供应商 + '</li> </ul> ';
}
$("#" + marqueeID).html(html);
} else {
$("#" + marqueeID).html("");
}
},
error: function (aa) {
}
});
}
function Get_Table6(marqueeID, ItemNumber) {
$.ajax({
url: "/SRM/WatchPanel/Get_Table6" + "?" + Math.random(),
dataType: "json",
async: false,
success: function (data) {
if (data != false && data != null && data.length > 0) {
var html = "";
for (var i = 0; i < data.length; i++) {
html += ' <ul class="ul_con"> ';
html += '<li>' + data[i].存货编码 + '</li> <li>' + data[i].存货名称 + '</li>';
html += '<li>' + data[i].数量 + '</li> <li>' + data[i].产线 + '</li> </ul> ';
}
$("#" + marqueeID).html(html);
} else {
$("#" + marqueeID).html("");
}
},
error: function (aa) {
}
});
}
</script>
</body>
</html>