|
|
<!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.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 { width: 100%; padding-bottom: 0.1rem; }
.animationNone { animation: none !important; }
.CustDiv1 ul li:nth-child(1), .CustDiv1 div div ul li:nth-child(1) { width: 5% !important; }
.CustDiv1 ul li:nth-child(2), .CustDiv1 div div ul li:nth-child(2) { /* width: 28% !important; */ }
.CustDiv1 ul li:nth-child(3), .CustDiv1 div div ul li:nth-child(3) { width: 11% !important; }
.CustDiv1 ul li:nth-child(4), .CustDiv1 div div ul li:nth-child(4) { width: 11% !important; }
.CustDiv1 ul li:nth-child(5), .CustDiv1 div div ul li:nth-child(5) { width: 19% !important; }
.CustDiv1 ul li:nth-child(6), .CustDiv1 div div ul li:nth-child(6) { width: 11% !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: 11% !important; }
.CustDiv4 ul li:nth-child(5), .CustDiv4 div div ul li:nth-child(5) { width: 11% !important; }
.CustDiv4 ul li:nth-child(6), .CustDiv4 div div ul li:nth-child(6) { width: 18% !important; }
.CustDiv4 ul li:nth-child(7), .CustDiv4 div div ul li:nth-child(7) { width: 11% !important; }
.CustDiv2 ul li:nth-child(1), .CustDiv2 div div ul li:nth-child(1) { width: 22% !important; }
.CustDiv2 ul li:nth-child(2), .CustDiv2 div div ul li:nth-child(2) { width: 15% !important; }
.CustDiv2 ul li:nth-child(3), .CustDiv2 div div ul li:nth-child(3) { width: 15% !important; }
.CustDiv2 ul li:nth-child(4), .CustDiv2 div div ul li:nth-child(4) { width: 15% !important; }
.CustDiv2 ul li:nth-child(5), .CustDiv2 div div ul li:nth-child(5) { width: 15% !important; }
.CustDiv2 ul li:nth-child(6), .CustDiv2 div div ul li:nth-child(6) { width: 8% !important; }
.CustDiv2 ul li:nth-child(7), .CustDiv2 div div ul li:nth-child(7) { width: 10% !important; }
.leftMain_top, .leftMain_bottom { height: calc(46.5%); }
.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: 10px; font-weight: 700; color: white; } /*td { box-sizing:inherit; }*/ .rightMain_bottomIn .biaoge_list ul li { overflow: hidden; padding-right: 0px; }
#div1 { display: flex; }
#div1-C1 { font-size: 18px; margin-left: 115px; margin-top: 50px; }
#div1-C1 div { margin-top: 20px; color: white; text-align: center; width: 130px; }
#div1-C2 { font-size: 18px; margin-left: 15px; margin-top: 50px; }
#div1-C2 div { margin-top: 23px; width: 200px; height: 20px; background-color: #0000CD; text-align: center; }
#div1-C3 { font-size: 18px; margin-left: 15px; margin-top: 50px; }
#div1-C3 div { margin-top: 20px; color: white; /*border-left:solid 1px #AFEEEE; border-right:solid 1px #AFEEEE; border-radius:25px;*/ text-align: center; width: 30px; }
#div3 { display: flex; color: white; }
#div3-C1 { width: 50%; }
#div3-C2 { width: 50%; }
#div3-C1-C1 { text-align: center; width: 100%; font-size: 25px; background-color: #6495ED; }
#div3-C1-C2 { margin-top: 10px; display: flex; }
#div3-C1-C2-div1 { width: 25px; margin-left: 20px; }
#div3-C1-C2-div2 { width: 25px; margin-left: 20px; }
#div3-C2-C1 { text-align: center; width: 97%; font-size: 25px; background-color: #6495ED; }
#div3-C2-C2 { margin-top: 10px; display: flex; }
#div3-C2-C2-div1 { width: 25px; }
#div3-C2-C2-div2 { width: 20px; }
#div3-C1-C2 span { margin-left: 20px; text-align: center; }
#div3-C2-C2 span { margin-left: 20px; text-align: center; }
#div1-C2 { color: white; text-align: center; } </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" /> @*<img src="~/Content/img/wechat.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 class="leftMain_top" style="height:90%"> <div class="leftMain_topIn"> <ul> <li class="LineLi" style="width:100%"> <div class="rightMain_bottom"> <div class="rightMain_bottomIn"> @*<h3> 插件车间生产加工数据</h3>*@ <div class="biaoge biaoge_list" id="marqueelist2" style="width: 100%; "> <div class="biaoge_listIn CustDiv1"> <ul class="ul_title"> <li>序号</li> <li>生产编号</li> <li>产品名称</li> <li>用户单位</li> <li>客户交货期</li> <li>生产状态</li> <li>进度</li> </ul> <div class="ul_list" id="marqueeCust2"> <div class="ul_listIn ul_listInCust" 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> </ul> </div> </div>
@*</div>*@
<div style="clear: both"></div> </div>
<script>
var DataF = 30;// 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(); GetArea1(); GetArea2('marqueeCustCH2', 1); //GetZhiXing_MO("marqueeCustCH1", "30"); //GetZhiXing_MO("marqueeCustCH2", "60"); //GetZhiXing_MO("marqueeCustCH3", "90"); //GetZhiXing_RCVUnInWare(); // SetIfGo("marqueeCust1", "marqueeCustCH1", "marqueelist1");//判断是否需要滚动 // SetIfGo("marqueeCust2", "marqueeCustCH2", "marqueelist2");//判断是否需要滚动 // SetIfGo("marqueeCust3", "marqueeCustCH3", "marqueelist3");//判断是否需要滚动 //SetIfGo("RCVUNINView", "RCVUNIN", "marqueelist4");//判断是否需要滚动
}
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 echart1_1() { // // 基于准备好的dom，初始化echarts实例 // var myChart = echarts.init(document.getElementById('echart1_1'));
// var MonthArray = new Array(); // var MonthPercent = new Array(); // var MonthPercent_BZ = 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_BZ.push(99.5); // }
// //MonthPercent = [80, 75.23, 98, 40, 60,53];//测试 // var colors = ['#9c90e7', '#4ff494', '#f2c290', '#FFD700', '#f3aaf5', '#fcfb68'] // var colors2 = ['#6A5ACD', '#3D9140', '#ED9121', '#DAA569', '#A066D3', '#E3CF57']; // 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[2].seriesName + ':' + params[2].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": [ // { // max: 100, // "type": "value", // axisTick: { // show: true, // lineStyle: { // show: true, // color: "rgba(255,255,255,.9)", // }, // }, // splitLine: { show: false, }, // axisLine: { // show: true, // lineStyle: { // show: true, // //fontSize: 9, // color: "rgba(255,255,255,.9)", // }, // }, // axisLabel: { // show: true, // color: "rgba(255,255,255,.9)"
// }, // axisLine: { // show: true, // lineStyle: { // show: true, // color: "rgba(255,255,255,.9)", // }, // },
// } // ], // "series": [ // { // "name": "合格率", // "type": "bar", // "data": MonthPercent, // barWidth: _BarWidth, // "itemStyle": { // "normal": { // barBorderRadius: _barBorderRadius_M, // //color: function (params) // //{ // // return colors[params.dataIndex]; // //}, // color: function (params) { // return new echarts.graphic.LinearGradient( // 0, // 0, // 0, // 1, // [ // { offset: 0, color: colors[params.dataIndex] },
// { offset: 1, color: colors2[params.dataIndex] } // ] // ) // }, // barBorderRadius: [3, 3, 3, 3],
// } // }, // animation: false, // barGap: '-100%', // barCategoryGap: '40%', // label: { // show: true, // formatter: '{c}%', // },
// } // , // { // "name": "合格率", // "type": "line", // "data": MonthPercent, // barWidth: _BarWidth, // "itemStyle": { // "normal": { // color: "#96aef1",
// } // }, // label: { // show: false, // //position: 'outside', // formatter: '{c}%', // },
// } // , // { // "name": "标准值", // "type": "line", // "data": MonthPercent_BZ,
// "itemStyle": { // "normal": {
// } // }, // label: { // show: false, // //position: 'outside', // formatter: '{c}%', // }
// },
// ] // };
// myChart.setOption(option); // } // else { // return null; // } // }, // error: function (aa) { // return null; // } // });
//} //区域一
function GetArea1() { $.ajax({ url: "/SRM/WatchPanel/GetAreal1", dataType: "json", async: false, success: function (data) { if (data != false && data != null) { //月度生产 月度发车 上月实际生产 月度实际发车 上月完成数量 上上月完成数量 $("#mothPlan").html(data[0].月度生产); $("#motnSales").html(data[0].月度发车); $("#lastMothSales").html(data[0].上月度发车); $("#yearSales").html(data[0].年度发车); } else { $("#" + marqueeID).html(""); } }, error: function (aa) {
} }); } function GetArea3() { // 基于准备好的dom，初始化echarts实例
//var MonthArray = new Array(); //var MonthPercent = new Array(); //var MonthPercent_BZ = new Array();
$.ajax({ url: "/SRM/WatchPanel/GetOutput?XX=XX&" + Math.random(), dataType: "json", async: false, success: function (data) { console.log(data); if (data != false && data != null && data.length > 0) { var value = 0; var value1 = 0; var value2 = 0; var value3 = 0; var value4 = 0; var value5 = 0; var value6 = 0; var value7 = 0; for (var i = 0; i < data.length; i++) { value = data[i].上月度生产; value1 = data[i].上月完成; value2 = data[i].前月度生产; value3 = data[i].前月完成; value4 = data[i].上月比; value5 = data[i].前月比; value6 = data[0].前月; value7 = data[0].上月; } $("#div3-C1-C1").html(value7 + "月完成率"); $("#div3-C2-C1").html(value6 + "月完成率"); $("#div3-C1-C2-div1").html(value3); $("#lastMothPlan").html(value3); $("#yearProduct").html(data[0].年度生产); $("#div3-C1-C2-div2").html(value2); $("#div3-C2-C2-div1").html(value1); $("#div3-C2-C2-div2").html(value); //MonthPercent = [80, 75.23, 98, 40, 60,53];//测试
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); } else { return null; } }, error: function (aa) { return null; } });
}
function GetArea2(marqueeID, ItemNumber) { $.ajax({ url: "/SRM/WatchPanel/GetProductProgress?ItemNumber=" + ItemNumber + "&" + Math.random(), dataType: "json", async: false, success: function (data) { if (data != false && data != null) { var html = ""; for (var i = 0; i < data.length; i++) { html += '<ul class="ul_con">'; html += '<li>' + data[i].序号 + '</li>'; html += '<li>' + data[i].销售车辆号 + '</li><li>' + data[i].产品名称 + '</li><li>' + data[i].用户单位 + '</li>'; html += '<li>' + data[i].客户交货期 + '</li><li>' + data[i].生产状态 + '</li>'; html += '<li>' + data[i].进度 + '</li></ul>'; } $(".ul_listInCust").css("animation-duration", data.length * 1.3 + "s"); $("#" + marqueeID).html(html);
// Set background color of odd-indexed ul elements to black $("#" + marqueeID + " ul:nth-child(odd)").css("background-color", "rgba(0, 1, 0, 0.1)"); } else { $("#" + marqueeID).html(""); } }, error: function (aa) { // Handle error } }); }
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 += ' <ul class="ul_con"> <li >' + data[i].LOTNO + '</li> <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> </ul> ';
} html += "</ul>"; $("#RCVUNIN").html(html); } else { $("#RCVUNIN").html(""); } }, error: function (aa) {
} }); }
</script></body></html>
|
