|
|
<!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.numscroll.js" type="text/javascript" charset="utf-8"></script> <script src="~/Content/js/echarts/echarts5.3.3.js"></script>
<script src="~/Content/js/echarts4.8/echarts-liquidfill.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,.leftMain_bottom ul li { width: 100%; } .leftWZ ul { height: 50%; } .titleCust { background-color:#bbcec830; }
.animationNone { animation: none !important; }
.leftWZ ul li { width:calc(25% ) !important; color:white; float:left; vertical-align: bottom; text-align: center; height:100%; }
.leftMain_top, .leftMain_bottom { height: calc( 46% ); }
.leftMain_topIn, .leftMain_bottomIn, .leftMain_topInUL, .rightMain_bottom, .rightMain_bottomIn,.leftMain_bottom ul { 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; } .rightMain_bottomIn .biaoge_list ul li { overflow: hidden; padding-right: 0px; } .rightMain_bottomIn .biaoge { height: calc(100% ); } .zantingCla li { color:yellow !important; } .allnav { /*height: calc(100% - 0.01rem);*/ height: 100%; width:100%; position:relative; }
.TopAll { height:calc(33% - 0.1rem); }
</style> <script type="text/javascript"> document.documentElement.style.fontSize = (document.documentElement.clientWidth / 768) * 100 + 'px' </script>
</head>
<body>
<div class="bg"> <table class="title"> <tr> <td style="width:20%"> <div class="TopNamelogo" id="TopNamelogo"> <img src="~/Content/img/zhenxiang.png" 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="leftMain_top TopAll" > <div class="leftMain_topIn"> <ul class="leftMain_topInUL"> <li class="LineLi" style="width:33%">
<div class="rightMain_bottom"> <div class="rightMain_bottomIn" style="height:calc( 100% )"> <div class="biaoge biaoge_list" id="marqueelist1" style="width: 100%; "> <div class="allnav" id="echart2_2"></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" style="width:33%">
<div class="rightMain_bottom"> <div class="leftWZ" style="height:calc( 50% )"> <ul> <li class="titleCust">待检数量</li> <li class="titleCust">已检数量</li> <li class="titleCust">待整改车辆</li> <li class="titleCust">已整改车辆</li> </ul> <ul id="ttt2"> <li>0台</li> <li>0台</li> <li>0台</li> <li>0台</li> </ul> </div> <div class="leftWZ" style="height:calc( 50% )">
<ul> <li class="titleCust">XX</li> <li class="titleCust">XX</li> <li class="titleCust">待整改车辆</li> <li class="titleCust">已整改车辆</li> </ul> <ul id="ttt2"> <li>0台</li> <li>0台</li> <li>0台</li> <li>0台</li> </ul> </div>
</div> </li> <li class="LineLi" style="width:33%">
<div class="rightMain_bottom"> <div class="rightMain_bottomIn"> <div class="biaoge biaoge_list" id="marqueelist1" style="width: 100%; "> <div class="allnav" id="echart33"> </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 TopAll" > <div class="leftMain_bottomIn"> <ul> <li class="LineLi" style="width:50%">
<div class="rightMain_bottom"> <div class="rightMain_bottomIn"> @*<h3> SMT车间生产加工数据</h3>*@ <div class="biaoge biaoge_list" style="width: 100%; "> <div class="biaoge_listIn CustDiv4"> <ul class="ul_title"> <li>销售车号</li> <li>部件</li> <li>人员</li> <li>项目</li> <li>时间</li> <li>类型</li> <li>结果</li>
</ul> <div class="ul_list" id="marqueeCust1"> <div class="ul_listIn ul_listInCust" 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>
</li> <li class="LineLi" style="width:50%">
<div class="rightMain_bottom"> <div class="rightMain_bottomIn"> @*<h3> SMT车间生产加工数据</h3>*@ <div class="biaoge biaoge_list" style="width: 100%; "> <div class="biaoge_listIn CustDiv4"> <ul class="ul_title"> <li>销售车号</li> <li>部件</li> <li>人员</li> <li>项目</li> <li>时间</li> <li>类型</li> <li>结果</li>
</ul> <div class="ul_list" id="marqueeCust33"> <div class="ul_listIn ul_listInCust" id="marquee33">
</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 TopAll" > <div class="leftMain_bottomIn"> <ul> <li class="LineLi" style="width:100%">
<div class="rightMain_bottom"> <div class="rightMain_bottomIn"> @*<h3> SMT车间生产加工数据</h3>*@ <div class="biaoge biaoge_list" style="width: 100%; "> <div class="biaoge_listIn CustDiv4"> <ul class="ul_title"> <li>销售车号</li> <li>部件</li> <li>人员</li> <li>项目</li> <li>时间</li> <li>类型</li> <li>结果</li>
</ul> <div class="ul_list" id="marqueeCust1"> <div class="ul_listIn ul_listInCust" 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>
</li>
</ul> </div> </div>
<div style="clear: both"></div> </div>
<script>
var DataF = 300;// 300;//单位秒 //刷新数据时间 var _BarWidth = "25%"; var _barBorderRadius_M = 2; var myChart = echarts.init(document.getElementById('echart2_2')); var myChartArea3 = echarts.init(document.getElementById('echart33')); $(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() {
// GetZhiXing_MO("marqueeCustCH1", "30"); // SetIfGo("marqueeCust1", "marqueeCustCH1", "marqueelist1");//判断是否需要滚动 // GetOtherData(); // echart2_2(); // echart2_3(); }
function SetIfGo(DivID, DivCHID,listID) { var ListDIV = $("#" + listID)[0].clientHeight; var H_marqueediv = $("#" + DivCHID)[0]; 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 GetZhiXing_MO(marqueeID, ItemNumber) { $.ajax({ url: "/SRM/WatchPanel/GetCKData?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 += "<ul>"; html += ' <li >' + data[i].销售车号 + '</li> '; 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> ';
} $(".ul_listInCust").css("animation-duration", data.length * 1.3 + "s"); $("#" + marqueeID).html(html); } else { $("#" + marqueeID).html(""); } }, error: function (aa) {
} }); } function GetOtherData() { $.ajax({ url: "/SRM/WatchPanel/GetOtherData?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++) { $("#ttt2").html ( "<li>" + data[i].待检车辆 + "台</li> <li>" + data[i].已检车辆 + "台</li> <li>" + data[i].待整改 + "台</li> <li>" + data[i].已整改 + "台</li>"); }
} } }); } function echart2_2() { // 基于准备好的dom，初始化echarts实例 var colors = ['#4992ff', '#7cffb2', '#fddd60', '#ff6e76']; var colors2 = ['#4992ff40', '#7cffb230', '#fddd609e', '#ff6e7678'];
var MonArray = new Array();//月份["2023-01","2023-02","2023-03","2023-04"] var ZongArray = new Array();//Qty [89,90,60,90]
$.ajax({ url: "/SRM/WatchPanel/GetCKOKRate?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++) { MonArray.push(data[i].月份); ZongArray.push(data[i].Qty); }
} } });
option = { 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": "35", "right": "5", "bottom": "20", "left": "30",
}, legend: { show: false, }, title: { text: '一次性验收合格率', textStyle: { fontSize: 15, color: "rgba(250, 249, 249, 1)", }, },
"xAxis": [ { "type": "category", data: MonArray, axisLine: { show: true, lineStyle: { color: "rgba(255,255,255,.5)", } }, axisTick: { show: false, }, axisLabel: { textStyle: { fontSize: 9, color: "rgba(255,255,255,.8)", }, },
}, ], "yAxis": [ { "type": "value", axisTick: { show: false }, splitLine: { show: false, }, "axisLabel": { "show": true, fontSize: 9, color: "rgba(255,255,255,.8)"
}, axisLine: { show: true, lineStyle: { color: "rgba(255,255,255,.5)", } },
},
], "series": [
{ "name": "一次检验合格率", "type": "line", "data": ZongArray, areaStyle: {}, "itemStyle": { "normal": { barBorderRadius: _barBorderRadius_M, color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#8bd46e' }, { offset: 1, color: '#09bcb7' }]), } }, "barGap": "0.2", stack: 'SunShi', } ] };
myChart.setOption(option);
}
function echart2_3() { // 基于准备好的dom，初始化echarts实例 var colors = ['#7cffb220', '#7cffb2', '#04040445', '#ff6e76'];
var ZongArray = 0;//[89, 90, 60, 90]//new Array();//工作总时间
$.ajax({ url: "/SRM/WatchPanel/GetCKOKRateALL?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++) { ZongArray=data[i].Qty; }
} } });
//ZongArray = 0.7; var options = {
title: { text: '质量控制指标', textStyle: { fontSize: 15, color: "rgba(250, 249, 249, 1)", }, } , series: [ { type: 'liquidFill', radius: '85%', color: [ { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [ { offset: 0, color: colors[1], }, { offset: 1, color: colors[0], }, ], globalCoord: false, }, ], data: [ZongArray, ZongArray-0.1, ZongArray], // data个数代表波浪数 backgroundStyle: { borderWidth: 1, color: colors[2], }, label: { normal: { textStyle: { fontSize: 26, color: '#fff', }, }, }, outline: { // show: false borderDistance: 0, itemStyle: { borderWidth: 6, borderColor: colors[1], }, }, } ], };
myChartArea3.setOption(options);
}
function GetArea3() { var value = 0.4; var value1 = 0.6; var value2 = 0.3; var value3 = 0.4; var value4 = 0.5; var value5 = 0.4; var value6 = 0.4; var value7 = 0.5; $("#div3-C1-C1").html(value7 + "月完成率"); $("#div3-C2-C1").html(value6 + "月完成率"); $("#div3-C1-C2-div1").html(value3); $("#lastMothPlan").html(value3); $("#div3-C1-C2-div2").html(value2); $("#div3-C2-C2-div1").html(value1); $("#div3-C2-C2-div2").html(value);
var data = [value5, value5, value5]; var option3 = {
title: [ { text: value7 + '月完成率', x: '22%', y: '90%', textStyle: { fontSize: 14, fontWeight: '100', color: '#5dc3ea', lineHeight: 16, textAlign: 'center', }, }, { text: value6 + '月完成率', x: '76%', y: '90%', textStyle: { fontSize: 14, fontWeight: '100', color: '#5dc3ea', lineHeight: 16, textAlign: 'center', }, }, ], series: [ { type: 'liquidFill', radius: '85%', center: ['30%', '48%'], color: [ { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [ { offset: 0, color: '#446bf5', }, { offset: 1, color: '#0000FF', }, ], globalCoord: false, }, ], data: [value5, value5, value5], // data个数代表波浪数 backgroundStyle: { borderWidth: 1, color: 'RGBA(51, 66, 127, 0.7)', }, label: { normal: { textStyle: { fontSize: 14, color: '#fff', }, }, }, outline: { // show: false borderDistance: 0, itemStyle: { borderWidth: 6, borderColor: '#0000FF', }, }, },
{ //第二个球的填充 type: 'liquidFill', radius: '85%', center: ['84%', '45%'], color: [ { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [ { offset: 0, color: '#2aa1e3', }, { offset: 1, color: '#08bbc9', }, ], globalCoord: false, }, ], data: [value4, value4, value4], // data个数代表波浪数 backgroundStyle: { borderWidth: 1, color: 'RGBA(51, 66, 127, 0.7)', }, label: { normal: { textStyle: { fontSize: 28, color: '#fff', }, }, }, outline: { // show: false borderDistance: 0, itemStyle: { borderWidth: 6, borderColor: '#08bbc9', }, }, }, ], };
myChartArea3.setOption(option3);
}
//工单产出统计 function echart1_1() { // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('echart1_1')); var colors = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
var RK_Num = new Array();//工单入库数量 var moNum = new Array();//工单用量 var MonthData = new Array(); //测试 MonthData = ["1月", "2月", "3月"]; RK_Num = ["200", "100", "140"]; moNum = ["4", "2", "7"]; //$.ajax({ // url: "/SRM/WatchPanel/GetWipZ?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++) { // MonthData.push(data[i].月份); // RK_Num.push(data[i].工单入库数量); // moNum.push(data[i].工单用量);
// }
// } // } //});
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 + '<br>' + params[1].seriesName + ':' + params[1].data ;
return showHtm; } }, grid: { "top": "5", "right": "30", "bottom": "30", "left": "30",
}, legend: { show: false, },
"xAxis": [ { "type": "category", data: MonthData, axisLine: { show: false, lineStyle: { color: "rgba(255,255,255,.5)", } }, axisTick: { show: false, },
axisLabel: { textStyle: { fontSize: 9, color: "rgba(255,255,255,.5)", }, rotate: 60, },
}, ], "yAxis": [ { min: 0, max: function (value) { return value.max; }, "type": "value", axisTick: { show: false }, splitLine: { show: false, }, axisLine: { show: false, }, "axisLabel": { "show": true, fontSize: 9, color: "rgba(255,255,255,.5)"
}, axisLine: {
show: false },
}, { min: 0, max: function (value) { return value.max; }, "type": "value", axisTick: { show: false }, splitLine: { show: false, }, axisLine: { show: false, }, "axisLabel": { "show": true, fontSize: 9, color: "rgba(255,255,255,.5)"
}, axisLine: {
show: false },
}, ], "series": [
{ "name": "工单入库数量", "type": "bar", "data": RK_Num, barWidth: _BarWidth, "itemStyle": { "normal": { barBorderRadius: _barBorderRadius_M,
} }, barGap: "0.2", // stack: 'total', }, { "name": "工单用量", "type": "line", "data": moNum, lineStyle: { normal: { width: 2 }, }, "itemStyle": { "normal": { "color": "#3496f8", } }, "yAxisIndex": 1, symbolSize: 0, } ] };
myChart.setOption(option);
}
</script></body></html>
|
