|
|
<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title>生产管理看板</title> <script type="text/javascript" src="~/Content/Cust011/js/jquery.js"></script> <link rel="stylesheet" href="~/Content/Cust011/css/comon0.css?ss=12" /> <script type="text/javascript" src="~/Content/Cust011/js/echarts.min.js"></script>
<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" /> @*<script language="JavaScript" src="~/Content/Cust011/js/js.js?ss=4"></script>*@ <style> .logoclass { height:1rem; } .TopNamelogo { position:absolute; } .ul_listIn { -webkit-animation: 14s gundong linear infinite normal; animation: 14s gundong linear infinite normal; position: relative;} .rightMain_bottomIn, .rightMain_bottom,.biaoge { height:100%; } .rightMain_bottomIn { border: none; width: unset; min-height: unset; position: relative; padding: unset; } .rightMain_bottomIn .biaoge_list .ul_con { border-bottom: 1px solid rgba(255, 255, 255, .1);}
.rightMain_bottomIn .biaoge_list ul li { width: 20%; text-align: center; color: rgba(255, 255, 255, .9); font-size: 0.18rem; height: 0.4rem; line-height: 0.4rem; border-bottom: 1px solid rgba(255, 255, 255, .1); white-space: normal !important; height: auto; } table td { font-size: .18rem; color: rgba(255, 255, 255, .6);}
.rightMain_bottomIn .biaoge_list .ul_title { background: -webkit-linear-gradient(left, rgb(5 17 50 / 10%), rgb(5 17 50 / 50%), rgb(5 17 50 / 10%)); } .LineStringSet span { color: #fff; }
.ZPClass ul li:nth-child(1), .ZPClass ul li:nth-child(1) { width: 5% !important; }
.ZPClass ul li:nth-child(2), .ZPClass ul li:nth-child(2) { width: 12% !important; } .ZPClass ul li:nth-child(3), .ZPClass ul li:nth-child(3) { width: 6% !important; } .ZPClass ul li:nth-child(4), .ZPClass ul li:nth-child(4) { width: 6% !important; } .ZPClass ul li:nth-child(5), .ZPClass ul li:nth-child(5) { width: 12% !important; } .ZPClass ul li:nth-child(6), .ZPClass ul li:nth-child(6) { width: 19% !important; } .ZPClass ul li:nth-child(7), .ZPClass ul li:nth-child(7) { width: 19% !important; } .ZPClass ul li:nth-child(8), .ZPClass ul li:nth-child(8) { width: 6% !important; } .ZPClass ul li:nth-child(9), .ZPClass ul li:nth-child(9) { width: 6% !important; } .ZPClass ul li:nth-child(10), .ZPClass ul li:nth-child(10) { width: 9% !important; }
.rateCClass { margin:0.6rem; }
.rateCClass { width: 2.4rem; z-index:99; }
/* 方法1：Flexbox布局（推荐） */.equal-width-list { list-style: none; margin-bottom: 40px;}
.equal-width-list li { display: flex; padding: 0.04rem;}
.equal-width-list li span { flex: 1; text-align: center; font-weight: 500; color:#fff; font-size:0.2rem; }
.left-span { background-color: #344244d1; color: white; }
.right-span { background-color: #395cabb5; color: white;}
</style></head><body> <div class="head"> <img class="TopNamelogo logoclass" src="~/Content/img/logo.png" border="0" /> <h1><a href="">金豪生产管理看板</a></h1> <div class="time" id="showTime">2019/12/05 16:16:54</div> </div> <div class="mainbox"> <ul class="clearfix" style="height: calc(30%)"> <li style="width: calc(65%)">
<div class="boxall" style="height: calc(100% - 0.15rem)"> <div class="alltitle">十天生产订单开工&生产汇总</div> <div class="boxnav" id="echarts1"></div> </div>
</li>
<li style="width: calc(35%)"> <div class="rateCClass " style=" position:absolute;" > <ul class="equal-width-list"> <li><span class="left-span">设备总数</span><span class="right-span" id="ZQTYStr">0</span></li> <li> <span class="left-span">开机总数</span><span class="right-span" id="QTYStr">0</span> </li> <li> <span class="left-span">设备开机率</span><span class="right-span" id="EQPRateStr">0</span> </li> </ul> </div> <div class="boxall" style="height: calc(100% - 0.15rem);"> <div class="alltitle">设备开机率</div> <div class="boxnav" id="echarts3"></div> </div>
</li> </ul>
<ul class="clearfix" style="height: calc(35% )">
<li style="width: calc(100%)">
<div class="boxall" style="height: calc(100% - 0.15rem )"> <div class="alltitle">当天定子生产工单明细</div> <div class="boxnav" id=""> <div class="rightMain_bottom"> <div class="rightMain_bottomIn">
<div class="biaoge biaoge_list" id="UserWork1_list"> <div class="biaoge_listIn ZPClass">
<ul class="ul_title"> <li>序号</li> <li>工单代码</li> <li>计划数量</li> <li>完工数量</li> <li>产品代码</li> <li>产品名称</li> <li>产品规格</li> <li>机台号</li> <li>模具号</li> <li>客户</li> </ul> <div class="ul_list" id="UserWork1_Upp"> <div class="ul_listIn ul_listInCust1 ZPClass" id="UserWork1">
</div> </div> </div> </div>
</div> </div> </div> </div>
</li> </ul>
<ul class="clearfix" style="height: calc(35% )">
<li style="width: calc(100%)">
<div class="boxall" style="height: calc(100% - 0.15rem )"> <div class="alltitle">当天转子生产工单明细</div> <div class="boxnav" id=""> <div class="rightMain_bottom"> <div class="rightMain_bottomIn">
<div class="biaoge biaoge_list" id="UserWork2_list"> <div class="biaoge_listIn ZPClass"> <ul class="ul_title"> <li>序号</li> <li>工单代码</li> <li>计划数量</li> <li>完工数量</li> <li>产品代码</li> <li>产品名称</li> <li>产品规格</li> <li>机台号</li> <li>模具号</li> <li>客户</li> </ul> <div class="ul_list" id="UserWork2_Upp"> <div class="ul_listIn ul_listInCust2 ZPClass" id="UserWork2">
</div> </div> </div> </div>
</div> </div> </div> </div>
</li> </ul>
</div> <script>
$(document).ready(function () { var whei = $(window).width() $("html").css({ fontSize: whei / 20 }) $(window).resize(function () { var whei = $(window).width() $("html").css({ fontSize: whei / 20 }) }); }); var DataF = 300;// 300;//单位秒 //刷新数据时间
$(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; //填充到组件中 $("#showTime").text(theDateStr); // setTimeout 在执行时,是在载入后延迟指定时间后,去执行一次表达式,仅执行一次 window.setTimeout(getTime, 1000); } function GetDataZong() { echarts_1(); echarts_3(); table_1(); SetIfGo("UserWork1_Upp", "UserWork1", "UserWork1_list");//判断是否需要滚动 table_2(); SetIfGo("UserWork2_Upp", "UserWork2", "UserWork2_list");//判断是否需要滚动 }
//十天生产订单开工&生产汇总 function echarts_1() { var myChart = echarts.init(document.getElementById('echarts1'));
var MoQty = new Array();//工单开工数量 var ComInQty = new Array();//工单产出数量 var MonthData = new Array();
//测试 //MonthData = ["1月", "2月", "3月"]; //ComInQty = ["200", "100", "140","200", "100", "140","200", "100", "140","200", "100", "140"]; //MoQty = ["4", "2", "7"]; $.ajax({ url: "/SRM/WatchPanel/GetList1?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++) {
MoQty.push(data[i].开工数); MonthData.push(data[i].日期); ComInQty.push(data[i].生产数); }
} } });
option = { tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' }, }, "grid": { "top": "40", "right": "10", "bottom": "20", "left": "60", }, legend: { data: ['开工数', '完工数'], right: 'center', width: '100%', textStyle: { color: "#fff" }, itemWidth: 12, itemHeight: 10, },
"xAxis": [ { "type": "category", data: MonthData, axisLine: { lineStyle: { color: "rgba(255,255,255,.2)" } }, axisLabel: { textStyle: { color: "rgba(255,255,255,.7)", fontSize: '14', }, },
}, ], "yAxis": [ { "type": "value", "name": "工单数", axisTick: { show: false }, splitLine: { show: false,
}, axisLabel: { "show": true, fontSize: 14, color: "rgba(255,255,255,.7)"
}, axisLine: { min: 0, max: 10, lineStyle: { color: 'rgba(255,255,255,.2)' } },
}
], "series": [
{ "name": "开工数", "type": "bar", "data": MoQty, "barWidth": "15%", "itemStyle": { "normal": { barBorderRadius: 15, color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#145ab0e6' }, { offset: 1, color: '#3783e0e6' }]), } }, //"barGap": "0.2" }, { "name": "完工数", "type": "bar", "data": ComInQty, "barWidth": "15%", "itemStyle": { "normal": { barBorderRadius: 15, color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#8bd46e' }, { offset: 1, color: '#09bcb7' }]), } }, // "barGap": "0.2" },
] };
myChart.setOption(option); window.addEventListener("resize", function () { myChart.resize(); });
} //定子 function table_1() { $.ajax({ url: "/SRM/WatchPanel/GetGridJson2?ttype=" + escape("定子") + "&" + 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'> <li>" + data[i].序号 + "</li> <li>" + data[i].工单代码 + "</li> <li>" + data[i].计划数量 + "</li> <li>" + data[i].完工数量 + "</li> <li>" + data[i].产品代码 + "</li> <li>" + data[i].产品名称 + "</li> <li>" + data[i].产品规格 + "</li> <li>" + data[i].机台号 + "</li> <li>" + data[i].模具号 + "</li> <li>" + data[i].客户 + "</li> </ul>"; } $(".ul_listInCust1").css("animation-duration", data.length * 3 + "s"); document.getElementById("UserWork1").innerHTML = html;
} } }); } ///转子 function table_2() {
$.ajax({ url: "/SRM/WatchPanel/GetGridJson2?ttype=" + escape("转子") + "&" + 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'> <li>" + data[i].序号 + "</li> <li>" + data[i].工单代码 + "</li> <li>" + data[i].计划数量 + "</li> <li>" + data[i].完工数量 + "</li> <li>" + data[i].产品代码 + "</li> <li>" + data[i].产品名称 + "</li> <li>" + data[i].产品规格 + "</li> <li>" + data[i].机台号 + "</li> <li>" + data[i].模具号 + "</li> <li>" + data[i].客户 + "</li> </ul>";
} $(".ul_listInCust2").css("animation-duration", data.length * 3 + "s"); document.getElementById("UserWork2").innerHTML = html;
} } });
}
//设备开机率 function echarts_3() { // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('echarts3'));
var EQPRATE =0;
$.ajax({ url: "/SRM/WatchPanel/GetGridJson7?XX=XX&" + Math.random(), dataType: "json", async: false, success: function (data) { if (data != false && data != null && data.length > 0) { EQPRATE=data[0].EQPRATE ; $("#ZQTYStr").html(data[0].ZQTY);
$("#QTYStr").html(data[0].QTY); $("#EQPRateStr").html(data[0].EQPRATE+'%'); } } });
// EQPRATE = 65; option = { series: [ { type: 'gauge', radius: "94%", center: ["74%", "48%"], itemStyle: { color: '#58D9F9', shadowColor: 'rgba(0,138,255,0.45)', shadowBlur: 10, shadowOffsetX: 2, shadowOffsetY: 2, }, progress: { show: true, roundCap: true, width: 18 }, pointer: { length: "60%" }, axisLine: { roundCap: true, lineStyle: { width: 8, color: [[1, '#37a2da']] } }, axisTick: { splitNumber: 4, length:4, lineStyle: { width: 2, color: '#999' } }, splitLine: { length: 12, lineStyle: { width: 1, color: '#999' } }, axisLabel: { distance: 4, color: '#999', fontSize: 9, }, title: { show: false }, detail: { width: '20%', lineHeight: 40, height: 20, formatter: '{value} %', offsetCenter: [0, '65%'], valueAnimation: false, rich: { value: { fontSize: 30, fontWeight: 'bolder', color: '#777' }, unit: { fontSize: 20, color: '#999', padding: [0, 0, -20, 10] } } }, data: [ { value: EQPRATE } ] } ] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); window.addEventListener("resize", function () { myChart.resize(); }); }
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"); } } }
</script> </body>
</html>
|
