|
|
<!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=7" /> <script type="text/javascript" src="~/Content/Cust011/js/echarts.min.js"></script> @*<script language="JavaScript" src="~/Content/Cust011/js/js.js?ss=4"></script>*@ <style> .logoclass { height:1rem; } .TopNamelogo { position:absolute; } </style></head><body> @*<div class="loading"> <div class="loadbox"><img src="~/Content/Cust011/images/loading.gif" /> 页面加载中...</div> </div>*@ <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(35%)"> <li> <div class="boxall" style="height: calc(100% - 0.15rem)"> <div class="alltitle">工单产出统计</div> <div class="boxnav" id="echarts1"></div> </div>
</li> <li> <div class="boxall" style="height: calc(100% - 0.15rem)"> <div class="alltitle"> <p>在制统计</p> </div> <div class="boxnav yqlist" style="height: calc(100% - 0.05rem)"> <ul> <li class="LineStringSet"> <div class="yq" id="yq">170</div> <span>在制数</span> </li> <li class="LineStringSet"> <div class="yq">139</div> <span>入库数</span> </li> <li class="LineStringSet"> <div class="yq">141</div> <span>合格数</span> </li> <li class="LineStringSet"> <div class="yq">3</div> <span>不良数</span> </li> </ul> </div> </div>
</li> <li > <div class="boxall" style="height: calc(100% - 0.15rem)"> <div class="alltitle">不良品分析</div> <div class="boxnav" id="echarts5"></div> </div> </li> </ul>
<ul class="clearfix" style="height: calc(35% )">
<li style="width: calc(50%)">
<div class="boxall" style="height: calc(100% - 0.15rem)"> <div class="alltitle">不良品分布</div> <div class="boxnav" id="echarts6" style="height: calc(100% - 0.3rem)"></div> </div> <li style="width: calc(50%)"> <div class="boxall" style="height: calc(100% - 0.15rem )"> <div class="alltitle">人员任务</div> <div class="boxnav" id=""> <table border="0" cellspacing="0"> <tr> <th></th> <th>字段</th> <th>字段</th> <th>字段</th> <th>字段</th> </tr> <tr> <th>字段</th> <td>8098</td> <td>19.80%</td> <td>22</td> <td>368</td> </tr> <tr> <th>字段</th> <td>7506</td> <td>6.70%</td> <td>22</td> <td>339</td> </tr> <tr> <th>字段</th> <td>3261</td> <td>32.30%</td> <td>10</td> <td>325.7</td> </tr> <tr> <th>字段</th> <td>1993</td> <td>201%</td> <td>10</td> <td>199</td> </tr> </table> </div> </div>
</li> </ul> <ul class="clearfix" style="height: calc(30% )"> <li style="width: calc(100%)"> <div class="boxall" style="height: calc(100% - 0.15rem )"> <div class="alltitle">工单进度执行跟踪</div> <div class="boxnav" id=""> <table border="0" cellspacing="0"> <tr> <th>字段</th> <th>字段</th> <th>字段</th> <th>字段</th> <th>字段</th> <th>字段</th> <th>字段</th> </tr> <tr> <td>8098</td> <td>19.80%</td> <td>22</td> <td>8098</td> <td>19.80%</td> <td>22</td> <td>368</td> </tr> <tr> <td>7506</td> <td>6.70%</td> <td>22</td> <td>7506</td> <td>6.70%</td> <td>22</td> <td>339</td> </tr> <tr> <td>3261</td> <td>32.30%</td> <td>10</td> <td>3261</td> <td>32.30%</td> <td>10</td> <td>325.7</td> </tr> <tr> <td>1993</td> <td>201%</td> <td>10</td> <td>1993</td> <td>201%</td> <td>10</td> <td>199</td> </tr> </table> </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_6(); echarts_5(); // GetZhiXing_MO("marqueeCustCH1", "30");
// SetIfGo("marqueeCust1", "marqueeCustCH1", "marqueelist1");//判断是否需要滚动 // GetOtherData(); // echart2_2(); // echart2_3();
}
function echarts_1() { var myChart = echarts.init(document.getElementById('echarts1'));
var ComInQty = new Array();//工单入库数量 var MoQty = new Array();//工单用量 var MonthData = new Array();
//测试 MonthData = ["1月", "2月", "3月"]; ComInQty = ["200", "100", "140"]; MoQty = ["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].月份); // ComInQty.push(data[i].工单入库数量); // MoQty.push(data[i].工单用量);
// }
// } // } //});
option = { tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' }, }, "grid": { "top": "20%", "right": "50", "bottom": "20", "left": "30", }, 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,.1)" } }, 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,.6)"
}, axisLine: { min: 0, max: 10, lineStyle: { color: 'rgba(255,255,255,.1)' } },//左线色
}, { "type": "value", "name": "工单数量", "show": true, "axisLabel": { "show": true, fontSize: 14, formatter: "{value} ", color: "rgba(255,255,255,.6)" }, axisTick: { show: false }, axisLine: { lineStyle: { color: 'rgba(255,255,255,.1)' } },//右线色 splitLine: { show: true, lineStyle: { color: 'rgba(255,255,255,.1)' } },//x轴线 }, ], "series": [
{ "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" }, //{ // "name": "工单数量", // "type": "bar", // "data": MoQty, // "barWidth": "15%", // "itemStyle": { // "normal": { // barBorderRadius: 15, // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ // offset: 0, // color: '#248ff7' // }, { // offset: 1, // color: '#6851f1' // }]), // } // }, // "barGap": "0.2" //}, { "name": "工单数量", "type": "line", smooth: true, "yAxisIndex": 1, "data": MoQty, lineStyle: { normal: { width: 2 }, }, "itemStyle": { "normal": { "color": '#6851f1'//'#248ff7' //"#86d370",
} },
} ] };
myChart.setOption(option); window.addEventListener("resize", function () { myChart.resize(); });
}
function echarts_6() { // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('echarts6'));
option = { title: { text: '5132', subtext: '总体', x: 'center', y: '40%', textStyle: { color: '#fff', fontSize: 22, lineHeight: 10, }, subtextStyle: { color: '#90979c', fontSize: 16, lineHeight: 10,
}, }, tooltip: { trigger: 'item', formatter: "{b} : {c} ({d}%)" },
visualMap: { show: false, min: 500, max: 600, inRange: { //colorLightness: [0, 1] } }, series: [{ name: '访问来源', type: 'pie', radius: ['50%', '70%'], center: ['50%', '50%'], color: ['rgb(131,249,103)', '#FBFE27', '#FE5050', '#1DB7E5'], //'#FBFE27','rgb(11,228,96)','#FE5050' data: [{ "value": 1924, "name": "字段名称1" }, { "value": 1055, "name": "字段名称2" }, { "value": 1532, "name": "字段名称3" } ].sort(function (a, b) { return a.value - b.value }), roseType: 'radius',
label: { normal: { formatter: ['{c|{c}万}', '{b|{b}}'].join('\n'), rich: { c: { color: 'rgb(241,246,104)', fontSize: 20, fontWeight: 'bold', lineHeight: 5 }, b: { color: 'rgb(98,137,169)', fontSize: 14, height: 44 }, }, } }, labelLine: { normal: { lineStyle: { color: 'rgb(98,137,169)', }, smooth: 0.2, length: 10, length2: 20,
} } }] };
// 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); window.addEventListener("resize", function () { myChart.resize(); }); }
function echarts_5() { // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('echarts5'));
option = { tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' }, }, "grid": { "top": "15%", "right": "10%", "bottom": "20", "left": "10%", }, legend: { data: ['字段1', '字段2'], right: 'center', top: 0, textStyle: { color: "#fff" }, itemWidth: 12, itemHeight: 10, }, "xAxis": [ { "type": "category",
data: ['2016', '2017', '2018', '2019'], axisLine: { lineStyle: { color: "rgba(255,255,255,.1)" } }, axisLabel: { textStyle: { color: "rgba(255,255,255,.7)", fontSize: '14', }, },
}, ], "yAxis": [ { "type": "value", "name": "单位1", splitLine: { show: false }, axisTick: { show: false }, "axisLabel": { "show": true, color: "rgba(255,255,255,.6)"
}, axisLine: { lineStyle: { color: 'rgba(255,255,255,.1)' } },//左线色
}, { "type": "value", "name": "单位2", "show": true, axisTick: { show: false }, "axisLabel": { "show": true, formatter: "{value} %", color: "rgba(255,255,255,.6)" }, axisLine: { lineStyle: { color: 'rgba(255,255,255,.1)' } },//右线色 splitLine: { show: true, lineStyle: { color: 'rgba(255,255,255,.1)' } },//x轴线 }, ], "series": [
{ "name": "字段1", "type": "bar", "data": [ 18453.35, 20572.22, 24274.22, 30500.00 ], "barWidth": "20%",
"itemStyle": { "normal": { barBorderRadius: 15, color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#fccb05' }, { offset: 1, color: '#f5804d' }]), } }, "barGap": "0" }, { "name": "字段2", "type": "line", "yAxisIndex": 1,
"data": [0, 11.48, 18.00, 25.65], lineStyle: { normal: { width: 2 }, }, "itemStyle": { "normal": { "color": "#ff3300",
} }, "smooth": true } ] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); window.addEventListener("resize", function () { myChart.resize(); }); } </script> </body>
</html>
|
