|
|
<!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: 2rem; 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; }
.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; margin-right:3rem; 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: 20% !important; } .CustDiv1 div span:nth-child(2),.CustDiv1 div div span:nth-child(2) { width: 28% !important; } .CustDiv1 div span:nth-child(3),.CustDiv1 div div span:nth-child(3) { width: 11% !important; } .CustDiv1 div span:nth-child(4),.CustDiv1 div div span:nth-child(4) { width: 11% !important; } .CustDiv1 div span:nth-child(5),.CustDiv1 div div span:nth-child(5) { width: 19% !important; } .CustDiv1 div span:nth-child(6),.CustDiv1 div div span:nth-child(6) { width: 11% !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: 15% !important; } .CustDiv2 div span:nth-child(3),.CustDiv2 div div span:nth-child(3) { width: 15% !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: 8% !important; } .CustDiv2 div span:nth-child(7),.CustDiv2 div div span:nth-child(7) { width: 10% !important; } </style></head>
<body style="height:100%"> <table class="header"> <tr> <td style="width:12%"> <div class="TopNamelogo" id="TopNamelogo"> <img src="~/Content/img/ninghong.jpg" border="0" class="logoclass" /> </div> </td>
<td style="width:18%"> <div class="TopNamelogo" id="TopNamelogo">振翔</div> </td> <td style="width:40%"> <div class="TopName" id="TopName">执行看板</div> </td> <td > <div class="TopNameTime" id="TopNameTime"></div> </td>
</tr> </table> <div class="viewport" style="height:calc(100% )"> <div class="mainbox"> <ul class="clearfix"> <li> <div style="height: calc(50% - 0.1rem);width: calc(33% - 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>SMT车间生产加工数据</a> </div> <div class="content CustDiv1" style="display: block;" > <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 class="row"> <span class="col">20180701</span> <span class="col">1120180701</span> <span class="col">10</span> <span class="col">20</span> <span class="col">2023-03-10</span> <span class="col">100%</span> </div>*@ </div> </div> </div> </div> </div>
</div> </div> <div style="height: calc(50% - 0.1rem);width: calc(33% - 0.1rem); float: left;padding-left:0.5rem "> <div class="column"> <!--监控--> <div class="monitor panel" style="border-image:none;"> <div class="inner"> <div class="tabs">
<a href="javascript:;" data-index="0" class="active"><span class="icon-cube"></span>插件车间生产加工数据</a> </div> <div class="content CustDiv1" style="display: block;"> <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(33% - 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> </div> <div class="content CustDiv1" style="display: block;"> <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(50% - 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>IPQC检验合格率</a>
</div> <div class="content " style="display: block;"> <div id="echart1_1" style="width:100%;height:100%"></div> </div> </div> </div> </div> </div> <div style="height: calc(50% - 0.1rem);width: calc(50% - 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> </div> <div class="content CustDiv2" style="display: block;"> <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> <span class="col">检验人员</span> </div> <div class="marquee-view" id="RCVUNINView"> <div class="marquee" id="RCVUNIN"> <div class="row"> <span class="col">100%</span> <span class="col">100%</span> <span class="col">100%</span> <span class="col">100%</span> <span class="col">100%</span> <span class="col">100%</span> <span class="col">100%</span> </div> </div> </div> </div> </div> </div> </div> </div></li> </ul></div> </div> <script> var DataF = 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(); GetZhiXing_MO("marqueeCustCH1", "30"); GetZhiXing_MO("marqueeCustCH2", "60"); GetZhiXing_MO("marqueeCustCH3", "90"); GetZhiXing_RCVUnInWare(); SetIfGo("marqueeCust1", "marqueeCustCH1");//判断是否需要滚动 SetIfGo("marqueeCust2", "marqueeCustCH2");//判断是否需要滚动 SetIfGo("marqueeCust3", "marqueeCustCH3");//判断是否需要滚动 SetIfGo("RCVUNINView", "RCVUNIN");//判断是否需要滚动 }
function SetIfGo(DivID, DivCHID) { 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 echart1_1() { // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('echart1_1'));
var MonthArray = new Array(); var MonthPercent = new Array();
$.ajax({ url: "/SRM/WatchPanel/GetZhiXing_OQC?XX=XX&" + Math.random(), dataType: "json", async: false, success: function (data) { if (data != false && data != null && data.length > 0) { for (var i = 0; i < data.length; i++) { MonthArray.push(data[i].月份); MonthPercent.push(data[i].PercentNum); }
//MonthPercent = [10, 40.23, 70, 40, 0];//测试 var colors = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'] option = { color: colors, tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' }, formatter: function (params) { var showHtm = ""; showHtm = params[0].name + "月:" + '<br>' + params[0].seriesName + ':' + params[0].data+"%";
return showHtm; } }, grid: { "top": "15", "right": "20", "bottom": "20", "left": "40",
}, legend: { show: false, },
"xAxis": [ {
data: MonthArray, axisLine: { show: true, lineStyle: { color: "rgba(255,255,255,.9)", } }, axisTick: { show: true, }, axisLabel: { textStyle: { show: true, //fontSize: 9, color: "rgba(255,255,255,.9)", }, },
}, ], "yAxis": [ { "type": "value", axisTick: { show: true }, splitLine: { show: false, }, axisLine: { show: true, }, axisLabel: { show: true, //fontSize: 9, color: "rgba(255,255,255,.9)"
}, axisLine: { show: true },
} ], "series": [
{ "name": "合格率", "type": "bar", "data": MonthPercent, barWidth: _BarWidth, "itemStyle": { "normal": { barBorderRadius: _barBorderRadius_M,
} }, label: { show: true, //position: 'outside', formatter: '{c}%', },
}
] };
myChart.setOption(option); } else { return null; } }, error: function (aa) { return null; } });
}
function GetZhiXing_MO(marqueeID, ItemNumber) { $.ajax({ url: "/SRM/WatchPanel/GetZhiXing_MO?ItemNumber=" + ItemNumber + "&" + 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"> <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>"; $("#" + marqueeID).html(html); } else { $("#" + marqueeID).html(""); } }, error: function (aa) { } }); }
function GetZhiXing_RCVUnInWare() { $.ajax({ url: "/SRM/WatchPanel/GetZhiXing_RCVUnInWare?XX=XX&" + 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"> <span class="col">' + data[i].LOTNO + '</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> '; html += ' <span class="col" >' + data[i].数量 + '</span> </div> ';
} html += "</ul>"; $("#RCVUNIN" ).html(html); } else { $("#RCVUNIN" ).html(""); } }, error: function (aa) {
} }); }
function GetZhiXing_OQC( ) { $.ajax({ url: "/SRM/WatchPanel/GetZhiXing_OQC?XX=XX&" + Math.random(), dataType: "json", async: false, success: function (data) { if (data != false && data != null && data.length > 0) { return data; } else { return null; } }, error: function (aa) { return null; } }); } </script></body>
</html>
|
