|
|
<!DOCTYPE html><html style="height:100%">
<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>执行看板</title>
<link rel="stylesheet" href="~/Content/Cust069/css/index.css"> <link rel="stylesheet" href="~/Content/Cust069/fonts/icomoon.css"> <script src="~/Content/Cust069/js/jquery.min.js"></script> <script src="~/Content/js/echarts/echarts5.3.3.min.js"></script> <script src="~/Content/Cust069/js/index.js"></script>
<script src="~/Content/Cust069/js/china.js"></script> <script src="~/Content/Cust069/js/mymap.js"></script> <style> .mainbox { width:100%; } .logoclass { height: 3rem; padding-top: 0.5rem; float:right; } /*body { background-image:url(../../../../../Content/Cust003/images/bg2.jpg); }*/ /*logo标题*/ .TopNamelogo { vertical-align: middle; text-align: left; font-size: 24px; font-weight: 700; color: white; } /*.TopNamelogo img{ background-image
}*/ .animationNone { animation: none !important; }
.TopName { vertical-align: middle; text-align: center; font-size: 30px; font-weight: 700; color: white;
}
.TopNameTime { vertical-align: middle; text-align: center; font-size: 20px; font-weight: 700; margin-right:0rem; color: white; } .header { height:5rem; position:absolute; padding-top:1rem; /*padding-left: 3rem;*/ width:100%; } .header tbody, .header tr { width:100%; } .monitor .head { background: rgb(0 76 103); } .CustDiv1 div span:nth-child(1),.CustDiv1 div div span:nth-child(1) { width: 40% !important; } .CustDiv1 div span:nth-child(2),.CustDiv1 div div span:nth-child(2) { width: 20% !important; } .CustDiv1 div span:nth-child(3),.CustDiv1 div div span:nth-child(3) { width: 20% !important; } .CustDiv1 div span:nth-child(4),.CustDiv1 div div span:nth-child(4) { width: 20% !important; }
.CustDiv2 div span:nth-child(1),.CustDiv2 div div span:nth-child(1) { width: 22% !important; } .CustDiv2 div span:nth-child(2),.CustDiv2 div div span:nth-child(2) { width: 28% !important; } .CustDiv2 div span:nth-child(3),.CustDiv2 div div span:nth-child(3) { width: 20% !important; } .CustDiv2 div span:nth-child(4),.CustDiv2 div div span:nth-child(4) { width: 15% !important; } .CustDiv2 div span:nth-child(5),.CustDiv2 div div span:nth-child(5) { width: 15% !important; } .CustDiv2 div span:nth-child(6),.CustDiv2 div div span:nth-child(6) { width: 18% !important; }
.CustDiv3 div span:nth-child(1),.CustDiv3 div div span:nth-child(1) { width: 20% !important; } .CustDiv3 div span:nth-child(2),.CustDiv3 div div span:nth-child(2) { width: 25% !important; } .CustDiv3 div span:nth-child(3),.CustDiv3 div div span:nth-child(3) { width: 25% !important; } .CustDiv3 div span:nth-child(4),.CustDiv3 div div span:nth-child(4) { width: 30% !important; }
.CustDiv4 div span:nth-child(1),.CustDiv4 div div span:nth-child(1) { width: 30% !important; } .CustDiv4 div span:nth-child(2),.CustDiv4 div div span:nth-child(2) { width: 20% !important; } .CustDiv4 div span:nth-child(3),.CustDiv4 div div span:nth-child(3) { width: 20% !important; } .CustDiv4 div span:nth-child(4),.CustDiv4 div div span:nth-child(4) { width: 30% !important; }
.CustDiv5 div span:nth-child(1),.CustDiv5 div div span:nth-child(1) { width: 10% !important; } .CustDiv5 div span:nth-child(2),.CustDiv5 div div span:nth-child(2) { width: 35% !important; } .CustDiv5 div span:nth-child(3),.CustDiv5 div div span:nth-child(3) { width: 35% !important; } .CustDiv5 div span:nth-child(4),.CustDiv5 div div span:nth-child(4) { width: 10% !important; } .CustDiv5 div span:nth-child(5),.CustDiv5 div div span:nth-child(5) { width: 10% !important; }
.InfoNum { color:white; margin-left:70%; font-size:12px;
} #WWJGNum { color:white; margin-left:65%; font-size:12px; }/*.yellow {
color: yellow !important;
}*/ /*.red {
color: red !important; }*//*.green {
color: green !important; }*//*.white{ color:white !important; }*/
</style></head>
<body style="height:100%"> <table class="header"> <tr> <td style="width:12%"> <div class="TopNamelogo" id="TopNamelogo"> <img src="~/Content/img/AoMei.png" border="0" class="logoclass" style="margin-top:1.5rem" /> </div> </td>
<td style="width:18%"> @*<div class="TopNamelogo" id="TopNamelogo">苏州奥美</div>*@ </td> <td style="width:40%"> <div class="TopName" id="TopName">执行看板</div> <div class="TopNameTime" id="TopNameTime"></div> </td> <td > </td>
</tr> </table>
<div class="viewport" style="height:calc(85% )"> <div class="mainbox"> <div style="width:100%;height:3%;margin-bottom:1rem;text-align:center;font-size:1rem"> <table class="Tableinfo" style="color:white;width:100%;height:100%"> <tr>
<td> <span>原料库存:</span> <label id="YL"></label> </td> <td> <span>造粒料仓:</span> <label id="ZLL"></label> </td>
<td> <span>保护膜仓:</span> <label id="BHM"></label> </td> <td> <span>成品库存:</span> <label id="CP"></label> </td> <td>` <span>分切库存:</span> <label id="FQ"></label> </td> <td> <span>副产品库存:</span> <label id="FCP"></label> </td> </tr> </table> </div> <ul class="clearfix"> <li> <div style="height: calc(50% - 0.1rem);width: calc(30% - 0.1rem); float: left "> <div class="column">
<!--监控--> <div class="monitor panel"> <div class="inner"> <div class="tabs"> <a href="javascript:;" data-index="0" class="active"><span class="icon-cube"></span>成品发货一览</a> <label id="CPFHNum" class="InfoNum"></label> </div> <div class="content CustDiv1" style="display: block;" id="marqueelist1"> <div class="head"> <span class="col">发货单号</span> <span class="col">状态</span> <span class="col">滞留天数</span> <span class="col">业务员</span> @*<span class="col">计划完工日期</span> <span class="col">生产进度</span>*@ </div> <div class="marquee-view" id="marqueeCust1"> <div class="marquee" id="marqueeCustCH1"> </div> </div> </div> </div> </div>
</div> </div> <div style="height: calc(50% - 0.1rem);width: calc(39% - 0.1rem); float: left;padding-left:0.75rem "> <div class="column"> <!--监控--> <div class="monitor panel" > <div class="inner"> <div class="tabs">
<a href="javascript:;" data-index="0" class="active"><span class="icon-cube"></span>采购未到货一览</a> <label id="CGWDHNum" class="InfoNum"></label> </div> <div class="content CustDiv2" style="display: block;" id="marqueelist2"> <div class="head"> <span class="col">到货单</span> <span class="col">存货名称</span> <span class="col">规格型号</span> <span class="col">应到数量</span> <span class="col">未入库数量</span> <span class="col">供应商</span> </div> <div class="marquee-view" id="marqueeCust2"> <div class="marquee" id="marqueeCustCH2"> </div> </div> </div> </div> </div>
</div> </div> <div style="height: calc(50% - 0.1rem);width: calc(30% - 0.1rem); float: right "> <div class="column"> <!--监控--> <div class="monitor panel"> <div class="inner"> <div class="tabs"> <a href="javascript:;" data-index="0" class="active"><span class="icon-cube"></span>成品未入库</a> <label id="CPWRKNum" class="InfoNum"></label> </div> <div class="content CustDiv3" style="display: block;" id="marqueelist3"> <div class="head"> <span class="col">产线</span> <span class="col">存货名称</span> <span class="col">数量</span> <span class="col">滞留天数</span> @*<span class="col">计划完工日期</span> <span class="col">生产进度</span>*@ </div> <div class="marquee-view" id="marqueeCust3"> <div class="marquee" id="marqueeCustCH3"> </div> </div> </div> </div> </div> </div> </div> <div style="height: calc(50% - 0.1rem);width: calc(30% - 0.1rem); float: left "> <div class="column">
<!--监控--> <div class="monitor panel"> <div class="inner"> <div class="tabs"> <a href="javascript:;" data-index="0" class="active"><span class="icon-cube"></span>委外加工状态一览</a> <label id="WWJGNum" ></label> </div> <div class="content CustDiv4" style="display: block;" id="marqueelist4"> <div class="head">
<span class="col">委外订单号</span> <span class="col">状态</span> <span class="col">出库单号</span> <span class="col">发单时间</span> @*<span class="col">计划完工日期</span> <span class="col">生产进度</span>*@ </div> <div class="marquee-view" id="marqueeCust4"> <div class="marquee" id="marqueeCustCH4">
</div> </div> </div>
</div> </div>
</div> </div> <div style="height: calc(50% - 0.1rem);width: calc(39% - 0.1rem); float: left;padding-left:0.75rem "> <div class="column"> <!--监控--> <div class="monitor panel"> <div class="inner"> <div class="tabs">
<a href="javascript:;" data-index="0" class="active"><span class="icon-cube"></span>委外未到货一览</a> <label id="WWWDHNum" class="InfoNum"></label> </div> <div class="content CustDiv2" style="display: block;" id="marqueelist5"> <div class="head"> <span class="col">到货单</span> <span class="col">物料编码</span> <span class="col">规格型号</span> <span class="col">应到数量</span> <span class="col">未入库数量</span> <span class="col">供应商</span> </div> <div class="marquee-view" id="marqueeCust5"> <div class="marquee" id="marqueeCustCH5">
</div> </div> </div>
</div> </div>
</div> </div> <div style="height: calc(50% - 0.1rem);width: calc(30% - 0.1rem); float: right "> <div class="column"> <!--监控--> <div class="monitor panel"> <div class="inner"> <div class="tabs"> <a href="javascript:;" data-index="0" class="active"><span class="icon-cube"></span>今日调拨</a> <label id="DBNum" class="InfoNum"></label> </div> <div class="content CustDiv5" style="display: block;" id="marqueelist6"> <div class="head"> <span class="col">调拨仓</span> <span class="col">存货编码</span> <span class="col">存货名称|规格型号</span> <span class="col">数量</span> <span class="col">目标仓</span> @*<span class="col">调拨时间</span>*@ </div> <div class="marquee-view" id="marqueeCust6"> <div class="marquee" id="marqueeCustCH6">
</div> </div> </div>
</div> </div> </div> </div> </li> </ul></div> </div> <script> var DataF = 3000000;//单位秒 //刷新数据时间 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() { 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"); SetIfGo("marqueeCust1", "marqueeCustCH1", "marqueelist1");//判断是否需要滚动 SetIfGo("marqueeCust2", "marqueeCustCH2", "marqueelist2");//判断是否需要滚动 SetIfGo("marqueeCust3", "marqueeCustCH3", "marqueelist3");//判断是否需要滚动 SetIfGo("marqueeCust4", "marqueeCustCH4", "marqueelist4");//判断是否需要滚动 SetIfGo("marqueeCust5", "marqueeCustCH5", "marqueelist5");//判断是否需要滚动 SetIfGo("marqueeCust6", "marqueeCustCH6", "marqueelist6");//判断是否需要滚动 Get_InfoNum(); }
function SetIfGo(DivID, DivCHID, listID) { debugger; 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_marquee) { //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 SetIfGo(DivID, DivCHID) //{ // debugger; // var H_marqueediv = $("#" + DivCHID)[0]; // var H_marquee= H_marqueediv.clientHeight; // var H_marqueeView = $("#" + DivID)[0].clientHeight; // if (H_marquee < H_marqueeView) { // if ($("#" + DivID).hasClass("marquee-view")) { // $("#" + DivID).removeClass("marquee-view"); // } // if ($("#" + DivCHID).hasClass("marquee")) { // $("#" + DivCHID).removeClass("marquee"); // } // } // else { // if (!$("#" + DivID).hasClass("marquee-view")) { // $("#" + DivID).addClass("marquee-view"); // } // if (!$("#" + DivCHID).hasClass("marquee")) { // $("#" + DivCHID).removeClass("marquee"); // } // }
//}
function Get_KCInfo() { $.ajax({ url: "/SRM/WatchPanel/Get_KCInfo" + "?" + Math.random(), dataType: "json", async: false, success: function (data) { $("#YL").text(Number(data[0].YCL)+" T"); $("#CP").text(Number(data[0].CP) + " T"); $("#BHM").text(Number(data[0].BHM) + " R"); $("#ZLL").text(Number(data[0].ZLL) + " T"); $("#FQ").text(Number(data[0].FQ) + " T"); $("#FCP").text(Number(data[0].FCP) + " T");
}, error: function (aa) {
} }); }
function Get_InfoNum() { $.ajax({ url: "/SRM/WatchPanel/Get_InfoNum" + "?" + Math.random(), dataType: "json", async: false, success: function (data) { $("#CPFHNum").text(data[0].CPFH); $("#CGWDHNum").text(data[0].CGWDH); $("#CPWRKNum").text(data[0].CPWRK); $("#WWJGNum").text(data[0].WWJG); $("#DBNum").text(data[0].DB); $("#WWWDHNum").text(data[0].WWWDH);
}, error: function (aa) {
} }); }
//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 = ""; // var statusClass = ""; // if (data[0].Status == 'yellow') { // statusClass = "yellow"; // } else if (data[0].Status == 'red') { // statusClass = "red"; // } else if (data[0].Status == 'green') { // statusClass = "green"; // } // else { // statusClass = "white"; // } // html += ' <div class="row ' + statusClass + '"> '; // html += ' <span class="col">' + data[0].发货单号 + '</span> <span class="col">' + data[0].状态 + '</span>'; // html += ' <span class="col" >' + data[0].滞留天数 + '</span> <span class="col">' + data[0].管理员 + '</span> </div> '; // } // html += "</ul>"; // $("#marqueeCustCH1").css("animation-duration", data.length * 1.3 + "s");
// $("#" + marqueeID).html(html); // }, // error: function (aa) {
// } // }); //}
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 += ' <div class="row ' + statusClass + '"> '; html += ' <span class="col">' + data[i].发货单号 + '</span> <span class="col">' + data[i].状态 + '</span>'; html += ' <span class="col" >' + data[i].滞留天数 + '</span> <span class="col">' + data[i].管理员 + '</span> </div> '; } html += "</ul>"; $("#marqueeCustCH1").css("animation-duration", data.length * 1.3 + "s");
$("#" + 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 += ' <div class="row" > '; html += ' <span class="col">' + data[i].到货单 + '</span> <span class="col">' + data[i].存货名称 + '</span>'; html += ' <span class="col" >' + data[i].规格型号 + '</span> <span class="col">' + data[i].应到数量 + '</span> '; html += ' <span class="col" >' + data[i].未入库数量 + '</span> <span class="col">' + data[i].供应商 + '</span> </div> '; } html += "</ul>"; $("#marqueeCustCH2").css("animation-duration", data.length * 1.3 + "s"); $("#" + 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 += ' <div class="row ' + statusClass + '"> '; html += ' <span class="col">' + data[i].产线 + '</span> <span class="col">' + data[i].存货名称 + '</span>'; html += ' <span class="col" >' + data[i].数量 + '</span> <span class="col">' + data[i].滞留时间 + '</span> </div> '; } html += "</ul>"; $("#marqueeCustCH3").css("animation-duration", data.length * 1.3 + "s"); $("#" + 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 += ' <div class="row ' + statusClass + '"> '; html += ' <span class="col">' + data[i].委外订单号 + '</span> <span class="col">' + data[i].状态 + '</span>';
html += ' <span class="col" >' + data[i].出库单号 + '</span> <span class="col">' + data[i].发单时间 + '</span> </div> '; } html += "</ul>"; $("#marqueeCustCH4").css("animation-duration", data.length * 1.3 + "s"); $("#" + 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 += ' <div class="row"> '; html += ' <span class="col">' + data[i].到货单 + '</span> <span class="col">' + data[i].物料编码 + '</span>'; html += ' <span class="col">' + data[i].规格型号 + '</span> <span class="col">' + data[i].应到数量 + '</span>'; html += ' <span class="col" >' + data[i].未入库数量 + '</span> <span class="col">' + data[i].供应商 + '</span> </div> '; } html += "</ul>"; $("#marqueeCustCH5").css("animation-duration", data.length * 1.3 + "s"); $("#" + 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 += ' <div class="row"> '; html += ' <span class="col">' + data[i].调拨仓 + '</span> <span class="col">' + data[i].存货编码 + '</span>'; html += ' <span class="col" >' + data[i].存货名称 + '</span> <span class="col">' + data[i].数量 + '</span> '; html += ' <span class="col" >' + data[i].目标仓 + '</span> </div> '; } html += "</ul>"; $("#marqueeCustCH6").css("animation-duration", data.length * 1.3 + "s"); $("#" + marqueeID).html(html); } else { $("#" + marqueeID).html(""); } }, error: function (aa) {
} }); }
</script></body>
</html>
|
