|
|
@@ -0,0 +1,692 @@
|
|
|
+<!doctype html>
|
|
|
+<html lang="en">
|
|
|
+<head>
|
|
|
+ <meta charset="utf-8">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
|
+ <link rel="shortcut icon" href="/img/logo.png" />
|
|
|
+ <link rel="bookmark" href="/img/logo.png" />
|
|
|
+ <link href="/Plugins/animate/animate.min.css" rel="stylesheet" />
|
|
|
+ <link rel="stylesheet" href="../DashBoard.css?v3" />
|
|
|
+ <script src="/Plugins/jquery-3.4.1/jquery-3.4.1.min.js"></script>
|
|
|
+ <script src="/Plugins/animate/xanimate.js"></script>
|
|
|
+ <script src="/Plugins/xrequest/xrequest.min.js"></script>
|
|
|
+ <title>东科软件</title>
|
|
|
+</head>
|
|
|
+<body style="background-color:black;">
|
|
|
+
|
|
|
+ <div class="box_1920_1080">
|
|
|
+ <div class="box_title" style="display:flex;flex-direction:row;">
|
|
|
+ <div style="width:30%;text-align:left;"></div>
|
|
|
+ <div style="width: 40%; text-align: center; font-size: 38px; font-weight: 700">成检次品区看板</div>
|
|
|
+ <div style="width:30%;text-align:right;"><span class="box_title_loading" style="font-size:32px;" id="报表加载"></span></div>
|
|
|
+ </div>
|
|
|
+ <div class="box_body" style="display: flex; flex-direction: column;">
|
|
|
+
|
|
|
+ <!--月次品缺陷表格-->
|
|
|
+ <div style="width:1840px;height:920px;display:flex;flex-direction:row;">
|
|
|
+ <div style="width: 48%; height: 460px;">
|
|
|
+ <table cellspacing="0" cellpadding="0" border="0" style="width: 99.8%;">
|
|
|
+ <tr class="tr_title_warning">
|
|
|
+ <td colspan="10" style="color: white;">月次品缺陷数据汇总</td>
|
|
|
+ </tr>
|
|
|
+ <tr class="tr_title_warning" style="height: 51px;">
|
|
|
+ <td style="width: 14.2%; font-size: 10px; padding: 0px 0px 0px 0px;">缺陷名称</td>
|
|
|
+ <td style="width: 14.2%; font-size: 10px; padding: 0px 0px 0px 0px;">出窑数</td>
|
|
|
+ <td style="width: 14.2%; font-size: 10px; padding: 0px 0px 0px 0px;">缺陷数</td>
|
|
|
+ <td style="width: 14.2%; font-size: 10px; padding: 0px 0px 0px 0px;">缺陷占比</td>
|
|
|
+ <td style="width: 14.2%; font-size: 10px; padding: 0px 0px 0px 0px; ">同月比</td>
|
|
|
+ <td style="width: 14.2%; font-size: 10px; padding: 0px 0px 0px 0px;">上月比</td>
|
|
|
+ <td style="width: 14.2%; font-size: 10px; padding: 0px 0px 0px 0px;">对比趋势</td>
|
|
|
+ </tr>
|
|
|
+ </table>
|
|
|
+ <div style=" height: 360px; overflow: hidden; width: 100%;">
|
|
|
+ <div>
|
|
|
+ <table id="dayTable_template" style="display:none;">
|
|
|
+ <tr class="tr_title_warning" style="height: 51px;">
|
|
|
+ <td style="width: 14.2%; font-size: 10px; padding: 0px 0px 0px 0px;">{缺陷名称}</td>
|
|
|
+ <td style="width: 14.2%; font-size: 10px;">{出窑数}</td>
|
|
|
+ <td style="width: 14.2%; font-size: 10px; ">{缺陷数}</td>
|
|
|
+ <td style="width: 14.2%; font-size: 10px; ">{缺陷占比}</td>
|
|
|
+ <td style="width: 14.2%; font-size: 10px; ">{同月比}</td>
|
|
|
+ <td style="width: 14.2%; font-size: 10px; ">{上月比}</td>
|
|
|
+ <td style="width: 14.2%; font-size: 10px; ">{对比趋势}</td>
|
|
|
+ </tr>
|
|
|
+ </table>
|
|
|
+ </div>
|
|
|
+ <table id="dayTable" style="width: 100%;">
|
|
|
+ </table>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="width: 48%; height: 470px; margin-top: 458px; margin-left: -883.5px;">
|
|
|
+ <table cellspacing="0" cellpadding="0" border="0" style="width: 99.8%;">
|
|
|
+ <tr class="tr_title_warning">
|
|
|
+ <td colspan="10" style="color: white;">月次品缺陷位置数据汇总</td>
|
|
|
+ </tr>
|
|
|
+ <tr class="tr_title_warning" style="height: 51px;">
|
|
|
+ <td style="width: 14.2%; font-size: 10px; padding: 0px 0px 0px 0px;">缺陷位置名称</td>
|
|
|
+ <td style="width: 14.2%; font-size: 10px; padding: 0px 0px 0px 0px;">出窑数</td>
|
|
|
+ <td style="width: 14.2%; font-size: 10px; padding: 0px 0px 0px 0px;">缺陷数</td>
|
|
|
+ <td style="width: 14.2%; font-size: 10px; padding: 0px 0px 0px 0px;">缺陷占比</td>
|
|
|
+ <td style="width: 14.2%; font-size: 10px; padding: 0px 0px 0px 0px; ">同月比</td>
|
|
|
+ <td style="width: 14.2%; font-size: 10px; padding: 0px 0px 0px 0px;">上月比</td>
|
|
|
+ <td style="width: 14.2%; font-size: 10px; padding: 0px 0px 0px 0px;">对比趋势</td>
|
|
|
+ </tr>
|
|
|
+ </table>
|
|
|
+ <div style=" height: 370px; overflow: hidden; width: 100%;">
|
|
|
+ <div>
|
|
|
+ <table id="dayTable_templatedefect" style="display:none;">
|
|
|
+ <tr class="tr_title_warning" style="height: 51px;">
|
|
|
+ <td style="width: 14.2%; font-size: 10px; padding: 0px 0px 0px 0px;">{缺陷位置名称}</td>
|
|
|
+ <td style="width: 14.2%; font-size: 10px;">{出窑数}</td>
|
|
|
+ <td style="width: 14.2%; font-size: 10px; ">{缺陷数}</td>
|
|
|
+ <td style="width: 14.2%; font-size: 10px; ">{缺陷占比}</td>
|
|
|
+ <td style="width: 14.2%; font-size: 10px; ">{同月比}</td>
|
|
|
+ <td style="width: 14.2%; font-size: 10px; ">{上月比}</td>
|
|
|
+ <td style="width: 14.2%; font-size: 10px; ">{对比趋势}</td>
|
|
|
+ </tr>
|
|
|
+ </table>
|
|
|
+ </div>
|
|
|
+ <table id="TableDefect" style="width: 100%; ">
|
|
|
+ </table>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div style="width: 50%; height: 834px; right: 40px; margin-left: 35px;">
|
|
|
+ <table cellspacing="0" cellpadding="0" border="0" style="width: 99.8%;">
|
|
|
+ <tr class="tr_title_warning">
|
|
|
+ <td colspan="10" style="color: white;">今日次品明细数据</td>
|
|
|
+ </tr>
|
|
|
+ <tr class="tr_title_warning" style="height: 50px;">
|
|
|
+ <td style="width: 10%; font-size: 10px; padding: 0px 0px 0px 0px;">产品条码</td>
|
|
|
+ <td style="width: 10%; font-size: 10px; padding: 0px 0px 0px 0px;">产品编码</td>
|
|
|
+ <td style="width: 10%; font-size: 10px; padding: 0px 0px 0px 0px;">注浆日期</td>
|
|
|
+ <td style="width: 10%; font-size: 10px; padding: 0px 0px 0px 0px;">成型线模具</td>
|
|
|
+ <td style="width: 10%; font-size: 10px; padding: 0px 0px 0px 0px; ">施釉产线</td>
|
|
|
+ <td style="width: 10%; font-size: 10px; padding: 0px 0px 0px 0px;">窑炉编号</td>
|
|
|
+ <td style="width: 10%; font-size: 10px; padding: 0px 0px 0px 0px;">责任工号</td>
|
|
|
+ <td style="width: 10%; font-size: 10px; padding: 0px 0px 0px 0px; ">缺陷类别</td>
|
|
|
+ <td style="width: 10%; font-size: 10px; padding: 0px 0px 0px 0px;">缺陷名称</td>
|
|
|
+ <td style="width: 10%; font-size: 10px; padding: 0px 0px 0px 0px;">缺陷位置</td>
|
|
|
+ </tr>
|
|
|
+ </table>
|
|
|
+ <div style=" height: 834px; overflow: hidden; width: 100%;">
|
|
|
+ <div>
|
|
|
+ <table id="dayTable_templatedetail" style="display:none;">
|
|
|
+ <tr class="tr_title_warning" style="height: 50px;">
|
|
|
+ <td style="width: 10%; font-size: 10px; padding: 0px 0px 0px 0px;">{产品条码}</td>
|
|
|
+ <td style="width: 10%; font-size: 10px; padding: 0px 0px 0px 0px;">{产品编码}</td>
|
|
|
+ <td style="width: 10%; font-size: 10px; padding: 0px 0px 0px 0px;">{注浆日期}</td>
|
|
|
+ <td style="width: 10%; font-size: 10px; padding: 0px 0px 0px 0px;">{成型线模具}</td>
|
|
|
+ <td style="width: 10%; font-size: 10px; padding: 0px 0px 0px 0px;">{施釉产线}</td>
|
|
|
+ <td style="width: 10%; font-size: 10px; padding: 0px 0px 0px 0px;">{窑炉编号}</td>
|
|
|
+ <td style="width: 10%; font-size: 10px; padding: 0px 0px 0px 0px;">{责任工号}</td>
|
|
|
+ <td style="width: 10%; font-size: 10px; padding: 0px 0px 0px 0px;">{缺陷类别}</td>
|
|
|
+ <td style="width: 10%; font-size: 10px; padding: 0px 0px 0px 0px;">{缺陷名称}</td>
|
|
|
+ <td style="width: 10%; font-size: 10px; padding: 0px 0px 0px 0px;">{缺陷位置}</td>
|
|
|
+ </tr>
|
|
|
+ </table>
|
|
|
+ </div>
|
|
|
+ <table id="TableDefectDetail" style="width: 100%; ">
|
|
|
+ </table>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <script>
|
|
|
+ var mainInterval;
|
|
|
+ var mainRowCount = 0;
|
|
|
+
|
|
|
+ function loadMainTable() {
|
|
|
+ $.get("demo1.ashx?m=MonthTabletwo", function (data) {
|
|
|
+ var json = JSON.parse(data);
|
|
|
+ if (json["success"] == true) {
|
|
|
+ $("#dayTable").html("");
|
|
|
+ for (var i = 0; i < json["rows"].length; i++) {
|
|
|
+ var temp = $("#dayTable_template").html();
|
|
|
+ temp = temp.replace("<tbody>", "").replace("</tbody>", "");
|
|
|
+ temp = temp.replace('{缺陷名称}', json["rows"][i]['缺陷名称']);
|
|
|
+ temp = temp.replace('{出窑数}', json["rows"][i]['出窑数']);
|
|
|
+ temp = temp.replace('{缺陷数}', json["rows"][i]['缺陷数']);
|
|
|
+ temp = temp.replace('{缺陷占比}', json["rows"][i]['缺陷占比']);
|
|
|
+ temp = temp.replace('{同月比}', json["rows"][i]['同月比']);
|
|
|
+ temp = temp.replace('{上月比}', json["rows"][i]['上月比']);
|
|
|
+ temp = temp.replace('{对比趋势}', json["rows"][i]['对比趋势']);
|
|
|
+ $("#dayTable").append(temp);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ var num = parseInt(json["rows"].length);
|
|
|
+ for (var i = 0; i < num; i++) {
|
|
|
+ var a = document.getElementById("dayTable").rows[i].cells[6].innerHTML;
|
|
|
+ if (a == '下降↓') {
|
|
|
+ document.getElementById("dayTable").rows[i].cells[6].style.color = '#3bf738';
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ document.getElementById("dayTable").rows[i].cells[6].style.color = 'red';
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ function loadMainTableD() {
|
|
|
+ $.get("demo1.ashx?m=MonthTableD", function (data) {
|
|
|
+ var json = JSON.parse(data);
|
|
|
+ if (json["success"] == true) {
|
|
|
+ $("#TableDefect").html("");
|
|
|
+ for (var i = 0; i < json["rows"].length; i++) {
|
|
|
+ var temp = $("#dayTable_templatedefect").html();
|
|
|
+ temp = temp.replace("<tbody>", "").replace("</tbody>", "");
|
|
|
+ temp = temp.replace('{缺陷位置名称}', json["rows"][i]['缺陷位置名称']);
|
|
|
+ temp = temp.replace('{出窑数}', json["rows"][i]['出窑数']);
|
|
|
+ temp = temp.replace('{缺陷数}', json["rows"][i]['缺陷数']);
|
|
|
+ temp = temp.replace('{缺陷占比}', json["rows"][i]['缺陷占比']);
|
|
|
+ temp = temp.replace('{同月比}', json["rows"][i]['同月比']);
|
|
|
+ temp = temp.replace('{上月比}', json["rows"][i]['上月比']);
|
|
|
+ temp = temp.replace('{对比趋势}', json["rows"][i]['对比趋势']);
|
|
|
+ $("#TableDefect").append(temp);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ var num = parseInt(json["rows"].length);
|
|
|
+ for (var i = 0; i < num; i++) {
|
|
|
+ var a = document.getElementById("TableDefect").rows[i].cells[6].innerHTML;
|
|
|
+ if (a == '下降↓') {
|
|
|
+ document.getElementById("TableDefect").rows[i].cells[6].style.color = '#3bf738';
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ document.getElementById("TableDefect").rows[i].cells[6].style.color = 'red';
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ function loadMainDetail() {
|
|
|
+ $.get("demo1.ashx?m=MonthTableDetail", function (data) {
|
|
|
+ var json = JSON.parse(data);
|
|
|
+ if (json["success"] == true) {
|
|
|
+ $("#TableDefectDetail").html("");
|
|
|
+ for (var i = 0; i < json["rows"].length; i++) {
|
|
|
+ var temp = $("#dayTable_templatedetail").html();
|
|
|
+ temp = temp.replace("<tbody>", "").replace("</tbody>", "");
|
|
|
+ temp = temp.replace('{产品条码}', json["rows"][i]['产品条码']);
|
|
|
+ temp = temp.replace('{产品编码}', json["rows"][i]['产品编码']);
|
|
|
+ temp = temp.replace('{注浆日期}', json["rows"][i]['注浆日期']);
|
|
|
+ temp = temp.replace('{成型线模具}', json["rows"][i]['成型线模具']);
|
|
|
+ temp = temp.replace('{施釉产线}', json["rows"][i]['施釉产线']);
|
|
|
+ temp = temp.replace('{窑炉编号}', json["rows"][i]['窑炉编号']);
|
|
|
+ temp = temp.replace('{责任工号}', json["rows"][i]['责任工号']);
|
|
|
+ temp = temp.replace('{缺陷类别}', json["rows"][i]['缺陷类别']);
|
|
|
+ temp = temp.replace('{缺陷名称}', json["rows"][i]['缺陷名称']);
|
|
|
+ temp = temp.replace('{缺陷位置}', json["rows"][i]['缺陷位置']);
|
|
|
+ $("#TableDefectDetail").append(temp);
|
|
|
+ }
|
|
|
+ mainRowCount = json["rows"].length;
|
|
|
+ mainInterval = setInterval(mainScroll, 3000);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ $(document).ready(function () {
|
|
|
+ //initData();
|
|
|
+ doGetData = setInterval(function () { timeUpdate(); }, 5000);
|
|
|
+ loadMainTable();
|
|
|
+ setInterval(function () { loadMainTable(); }, 180000);
|
|
|
+ loadMainTableD();
|
|
|
+ setInterval(function () { loadMainTableD(); }, 180000);
|
|
|
+ loadMainDetail();
|
|
|
+ setInterval(function () { loadMainDetail(); }, 180000);
|
|
|
+ //DdfectData();
|
|
|
+ //setInterval(function () { DdfectData(); }, 5000);
|
|
|
+ //DdfectDataB();
|
|
|
+ //setInterval(function () { DdfectDataB(); }, 5000);
|
|
|
+ //ZxData();
|
|
|
+ //setInterval(function () { ZxData(); }, 5000);
|
|
|
+ //ClData();
|
|
|
+ //setInterval(function () { ClData(); }, 5000);
|
|
|
+ //ZxData()
|
|
|
+ //setInterval(function () { ZxData(); }, 5000);
|
|
|
+ });
|
|
|
+
|
|
|
+ //回收次品统计
|
|
|
+ function ClData() {
|
|
|
+ $.get("demo.ashx?m=cp", function (data) {
|
|
|
+ var json = JSON.parse(data);
|
|
|
+ let a = [];
|
|
|
+ let b = [];
|
|
|
+ if (json["success"] == true) {
|
|
|
+ var count1 = parseFloat(json["rows"][0]["数量"]);
|
|
|
+ var count2 = parseFloat(json["rows"][1]["数量"]);
|
|
|
+ var count3 = parseFloat(json["rows"][2]["数量"]);
|
|
|
+ var count4 = parseFloat(json["rows"][3]["数量"]);
|
|
|
+ var count5 = parseFloat(json["rows"][4]["数量"]);
|
|
|
+ var count6 = parseFloat(json["rows"][5]["数量"]);
|
|
|
+ var usercode1 = json["rows"][0]["日期"];
|
|
|
+ var usercode2 = json["rows"][1]["日期"];
|
|
|
+ var usercode3 = json["rows"][2]["日期"];
|
|
|
+ var usercode4 = json["rows"][3]["日期"];
|
|
|
+ var usercode5 = json["rows"][4]["日期"];
|
|
|
+ var usercode6 = json["rows"][5]["日期"];
|
|
|
+ window.DayCL.data.datasets[0].data = [count1, count2, count3, count4, count5, count6];
|
|
|
+ window.DayCL.data.labels = [usercode1, usercode2, usercode3, usercode4, usercode5, usercode6]
|
|
|
+ window.DayCL.update();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ function mainScroll() {
|
|
|
+ var scrollHeight = $("#TableDefectDetail").find("tr").outerHeight();
|
|
|
+ $("#TableDefectDetail").animate({ marginTop: -scrollHeight, }, 500,
|
|
|
+ function () {
|
|
|
+ $(this).css({ marginTop: "0px", }).find("tr:first").appendTo(this);
|
|
|
+ if (--mainRowCount == -1) loadMainTable();
|
|
|
+ }
|
|
|
+ );
|
|
|
+ }
|
|
|
+
|
|
|
+ //七日次品产量趋势图
|
|
|
+ function ZxData() {
|
|
|
+ $.get("demo1.ashx?m=zx", function (data) {
|
|
|
+ var json = JSON.parse(data);
|
|
|
+ if (json["success"] == true) {
|
|
|
+ var BJ1 = parseFloat(json["rows"][0]["次品率"]);
|
|
|
+ var BJ2 = parseFloat(json["rows"][1]["次品率"]);
|
|
|
+ var BJ3 = parseFloat(json["rows"][2]["次品率"]);
|
|
|
+ var BJ4 = parseFloat(json["rows"][3]["次品率"]);
|
|
|
+ var BJ5 = parseFloat(json["rows"][4]["次品率"]);
|
|
|
+ var BJ6 = parseFloat(json["rows"][5]["次品率"]);
|
|
|
+ var BJ7 = parseFloat(json["rows"][6]["次品率"]);
|
|
|
+ var day1 = json["rows"][0]["日期"];
|
|
|
+ var day2 = json["rows"][1]["日期"];
|
|
|
+ var day3 = json["rows"][2]["日期"];
|
|
|
+ var day4 = json["rows"][3]["日期"];
|
|
|
+ var day5 = json["rows"][4]["日期"];
|
|
|
+ var day6 = json["rows"][5]["日期"];
|
|
|
+ var day7 = json["rows"][6]["日期"];
|
|
|
+ var count1 = parseFloat(json["rows"][0]["次品数量"]);
|
|
|
+ var count2 = parseFloat(json["rows"][1]["次品数量"]);
|
|
|
+ var count3 = parseFloat(json["rows"][2]["次品数量"]);
|
|
|
+ var count4 = parseFloat(json["rows"][3]["次品数量"]);
|
|
|
+ var count5 = parseFloat(json["rows"][4]["次品数量"]);
|
|
|
+ var count6 = parseFloat(json["rows"][5]["次品数量"]);
|
|
|
+ var count7 = parseFloat(json["rows"][6]["次品数量"]);
|
|
|
+ window.DayZL.data.datasets[0].data = [BJ1, BJ2, BJ3, BJ4, BJ5, BJ6, BJ7];
|
|
|
+ window.DayZL.data.datasets[1].data = [count1, count2, count3, count4, count5, count6, count7];
|
|
|
+ window.DayZL.data.labels = [day1, day2, day3, day4, day5, day6, day7];
|
|
|
+ window.DayZL.update();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ //毛坯库库存
|
|
|
+ function DataKC() {
|
|
|
+ $.get("demo.ashx?m=kc", function (data) {
|
|
|
+ var json = JSON.parse(data);
|
|
|
+ if (json["success"] == true) {
|
|
|
+ var count1 = parseFloat(json["rows"][0]["数量"]);
|
|
|
+ var count2 = parseFloat(json["rows"][1]["数量"]);
|
|
|
+ var goodtype1 = json["rows"][0]["产品类别"];
|
|
|
+ var goodtype2 = json["rows"][1]["产品类别"];
|
|
|
+ window.Defectkc.data.datasets[0].data = [count1, count2];
|
|
|
+ window.Defectkc.data.labels = [goodtype1, goodtype2]
|
|
|
+ window.Defectkc.update();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ function DdfectData() {
|
|
|
+ $.get("demo.ashx?m=defect", function (data) {
|
|
|
+ var json = JSON.parse(data);
|
|
|
+ if (json["success"] == true) {
|
|
|
+ var defect1 = parseFloat(json["rows"][0]["数量"]);
|
|
|
+ var defect2 = parseFloat(json["rows"][1]["数量"]);
|
|
|
+ var defect3 = parseFloat(json["rows"][2]["数量"]);
|
|
|
+ var defectname1 = json["rows"][0]["缺陷名称"];
|
|
|
+ var defectname2 = json["rows"][1]["缺陷名称"];
|
|
|
+ var defectname3 = json["rows"][2]["缺陷名称"];
|
|
|
+ window.DefectA.data.datasets[0].data = [defect1, defect2, defect3];
|
|
|
+ window.DefectA.data.labels = [defectname1, defectname2, defectname3]
|
|
|
+ window.DefectA.update();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ function DdfectDataB() {
|
|
|
+ $.get("demo.ashx?m=defectb", function (data) {
|
|
|
+ var json = JSON.parse(data);
|
|
|
+ if (json["success"] == true) {
|
|
|
+ var defect1 = parseFloat(json["rows"][0]["数量"]);
|
|
|
+ var defect2 = parseFloat(json["rows"][1]["数量"]);
|
|
|
+ var defect3 = parseFloat(json["rows"][2]["数量"]);
|
|
|
+ var defectname1 = json["rows"][0]["缺陷名称"];
|
|
|
+ var defectname2 = json["rows"][1]["缺陷名称"];
|
|
|
+ var defectname3 = json["rows"][2]["缺陷名称"];
|
|
|
+ window.DefectB.data.datasets[0].data = [defect1, defect2, defect3];
|
|
|
+ window.DefectB.data.labels = [defectname1, defectname2, defectname3]
|
|
|
+ window.DefectB.update();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ function timeUpdate() {
|
|
|
+ loadData();
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ function loadData() {
|
|
|
+
|
|
|
+ //成型各项趋势图
|
|
|
+ //window.DayZL.data.datasets[0].data = [
|
|
|
+ // randomScalingFactor(1) + 80,
|
|
|
+ // randomScalingFactor(1) + 80,
|
|
|
+ // randomScalingFactor(1) + 80,
|
|
|
+ // randomScalingFactor(1) + 80,
|
|
|
+ // randomScalingFactor(1) + 80,
|
|
|
+ // randomScalingFactor(1) + 80,
|
|
|
+ // randomScalingFactor(1) + 80
|
|
|
+ //];
|
|
|
+ //window.DayZL.data.datasets[1].data = [
|
|
|
+ // randomScalingFactor(1) + 70,
|
|
|
+ // randomScalingFactor(1) + 70,
|
|
|
+ // randomScalingFactor(1) + 70,
|
|
|
+ // randomScalingFactor(1) + 70,
|
|
|
+ // randomScalingFactor(1) + 70,
|
|
|
+ // randomScalingFactor(1) + 70,
|
|
|
+ // randomScalingFactor(1) + 70
|
|
|
+ //];
|
|
|
+ //window.DayZL.update();
|
|
|
+
|
|
|
+ //成型缺陷top5
|
|
|
+ //window.DefectA.data.datasets[0].data = [
|
|
|
+ // randomScalingFactor(8),
|
|
|
+ // randomScalingFactor(8),
|
|
|
+ // randomScalingFactor(8)
|
|
|
+ //];
|
|
|
+ //window.DefectA.update();
|
|
|
+ //成检缺陷top5
|
|
|
+ //window.DefectB.data.datasets[0].data = [
|
|
|
+ // randomScalingFactor(8),
|
|
|
+ // randomScalingFactor(8),
|
|
|
+ // randomScalingFactor(8)
|
|
|
+ //];
|
|
|
+ //window.DefectB.update();
|
|
|
+
|
|
|
+ //产量计划达成
|
|
|
+ //window.MonthCL.data.datasets[0].data = [
|
|
|
+ // randomScalingFactor(1000),
|
|
|
+ // randomScalingFactor(1000)
|
|
|
+ //];
|
|
|
+ //window.MonthCL.update();
|
|
|
+ }
|
|
|
+
|
|
|
+ function initData() {
|
|
|
+ window.chartColors = {
|
|
|
+ red: 'rgb(255, 99, 132)',
|
|
|
+ orange: 'rgb(255, 159, 64)',
|
|
|
+ yellow: 'rgb(255, 250, 86)',
|
|
|
+ green: 'rgb(75, 192, 192)',
|
|
|
+ blue: 'rgb(54, 162, 250)',
|
|
|
+ purple: 'rgb(153, 102, 255)',
|
|
|
+ grey: 'rgb(231,233,237)'
|
|
|
+ };
|
|
|
+
|
|
|
+ var color = Chart.helpers.color;
|
|
|
+
|
|
|
+ window.randomScalingFactor = function (num) {
|
|
|
+ return Math.round(Math.random() * num);
|
|
|
+ }
|
|
|
+
|
|
|
+ Chart.defaults.global.defaultFontColor = 'white';
|
|
|
+ Chart.defaults.global.defaultFontSize = 18;
|
|
|
+ Chart.defaults.global.legend.display = false;
|
|
|
+
|
|
|
+ //半检一检各项趋势图=====================================
|
|
|
+ window.configDayZL = {
|
|
|
+ data: {
|
|
|
+ labels: ["01", "02", "03", "04", "05", "06", "07"],
|
|
|
+ datasets: [{
|
|
|
+ type: 'line',
|
|
|
+ label: "合格率",
|
|
|
+ yAxesGroup: 'A',
|
|
|
+ yAxisID: 'A',
|
|
|
+ backgroundColor: color(window.chartColors.red).alpha(0.5).rgbString(),
|
|
|
+ borderColor: window.chartColors.red,
|
|
|
+ borderWidth: 2,
|
|
|
+ pointRadius: 15,
|
|
|
+ data: [0, 0, 0, 0, 0, 0, 0],
|
|
|
+ fill: false
|
|
|
+ }, {
|
|
|
+ label: '次品数',
|
|
|
+ yAxesGroup: 'B',
|
|
|
+ yAxisID: 'B',
|
|
|
+ backgroundColor: color(window.chartColors.blue).alpha(0.5).rgbString(),
|
|
|
+ borderColor: window.chartColors.blue,
|
|
|
+ borderWidth: 1,
|
|
|
+ data: [100, 100, 100, 100, 100, 100, 100],
|
|
|
+ fill: false
|
|
|
+ }]
|
|
|
+ },
|
|
|
+ type: 'bar',
|
|
|
+ options: {
|
|
|
+ legend: {
|
|
|
+ display: true
|
|
|
+ },
|
|
|
+ title: {
|
|
|
+ display: false,
|
|
|
+ text: '质量统计'
|
|
|
+ },
|
|
|
+ tooltips: {
|
|
|
+ mode: 'index',
|
|
|
+ intersect: false,
|
|
|
+ },
|
|
|
+ hover: {
|
|
|
+ mode: 'nearest',
|
|
|
+ intersect: true
|
|
|
+ },
|
|
|
+ scales: {
|
|
|
+ xAxes: [{
|
|
|
+ display: true,
|
|
|
+ scaleLabel: {
|
|
|
+ display: false,
|
|
|
+ labelString: ''
|
|
|
+ }
|
|
|
+ }],
|
|
|
+ yAxes: [{
|
|
|
+ display: true,
|
|
|
+ id: 'B',
|
|
|
+ name: 'B',
|
|
|
+ scalePositionLeft: true,
|
|
|
+ position: 'left',
|
|
|
+ scaleLabel: {
|
|
|
+ display: false,
|
|
|
+ labelString: 'Value'
|
|
|
+ },
|
|
|
+ ticks: {
|
|
|
+ min: 0,
|
|
|
+ stepSize: 40,
|
|
|
+ max: 200
|
|
|
+ }
|
|
|
+ }
|
|
|
+ , {
|
|
|
+ display: true,
|
|
|
+ id: 'A',
|
|
|
+ name: 'A',
|
|
|
+ scalePositionLeft: false,
|
|
|
+ position: 'right',
|
|
|
+ scaleLabel: {
|
|
|
+ display: false,
|
|
|
+ labelString: 'Value2'
|
|
|
+ },
|
|
|
+ ticks: {
|
|
|
+ min: 0,
|
|
|
+ stepSize: 2,
|
|
|
+ max: 10
|
|
|
+ }
|
|
|
+ }]
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ };
|
|
|
+ var ctxDayZL = document.getElementById("canvasDayZL").getContext("2d");
|
|
|
+ window.DayZL = new Chart(ctxDayZL, configDayZL);
|
|
|
+ //===================================================
|
|
|
+
|
|
|
+ //成型缺陷TOP5===========================================
|
|
|
+ window.configDefectA = {
|
|
|
+ data: {
|
|
|
+ labels: ['1', '2', '3'],
|
|
|
+ datasets: [{
|
|
|
+ label: '工序',
|
|
|
+ backgroundColor: [
|
|
|
+ color(window.chartColors.red).alpha(0.35).rgbString(),
|
|
|
+ color(window.chartColors.blue).alpha(0.35).rgbString(),
|
|
|
+ color(window.chartColors.green).alpha(0.35).rgbString(),
|
|
|
+ color(window.chartColors.orange).alpha(0.35).rgbString(),
|
|
|
+ color(window.chartColors.purple).alpha(0.35).rgbString()
|
|
|
+ ],
|
|
|
+ fill: false,
|
|
|
+ borderColor: [
|
|
|
+ window.chartColors.red,
|
|
|
+ window.chartColors.blue,
|
|
|
+ window.chartColors.green,
|
|
|
+ window.chartColors.orange,
|
|
|
+ window.chartColors.purple
|
|
|
+ ],
|
|
|
+ borderWidth: 2,
|
|
|
+ pointRadius: 30,
|
|
|
+ data: [0, 0, 0]
|
|
|
+ }]
|
|
|
+ },
|
|
|
+ type: 'pie',
|
|
|
+ options: {
|
|
|
+ legend: {
|
|
|
+ display: true
|
|
|
+ },
|
|
|
+ title: {
|
|
|
+ display: false,
|
|
|
+ text: "甲班缺陷"
|
|
|
+ },
|
|
|
+ tooltips: {
|
|
|
+ mode: 'point',
|
|
|
+ intersect: false
|
|
|
+ },
|
|
|
+ responsive: true
|
|
|
+
|
|
|
+ }
|
|
|
+ };
|
|
|
+ var ctxDefectA = document.getElementById("canvasDefectA").getContext("2d");
|
|
|
+ window.DefectA = new Chart(ctxDefectA, configDefectA);
|
|
|
+ //===================================================
|
|
|
+
|
|
|
+ //成检缺陷TOP5===========================================
|
|
|
+ window.configDefectB = {
|
|
|
+ data: {
|
|
|
+ labels: ['缺陷1', '缺陷2', '缺陷3'],
|
|
|
+ datasets: [{
|
|
|
+ label: '工序',
|
|
|
+ backgroundColor: [
|
|
|
+ color(window.chartColors.red).alpha(0.35).rgbString(),
|
|
|
+ color(window.chartColors.blue).alpha(0.35).rgbString(),
|
|
|
+ color(window.chartColors.green).alpha(0.35).rgbString(),
|
|
|
+ color(window.chartColors.orange).alpha(0.35).rgbString(),
|
|
|
+ color(window.chartColors.purple).alpha(0.35).rgbString()
|
|
|
+ ],
|
|
|
+ fill: false,
|
|
|
+ borderColor: [
|
|
|
+ window.chartColors.red,
|
|
|
+ window.chartColors.blue,
|
|
|
+ window.chartColors.green,
|
|
|
+ window.chartColors.orange,
|
|
|
+ window.chartColors.purple
|
|
|
+ ],
|
|
|
+ borderWidth: 2,
|
|
|
+ pointRadius: 30,
|
|
|
+ data: [0, 0, 0]
|
|
|
+ }]
|
|
|
+ },
|
|
|
+ type: 'pie',
|
|
|
+ options: {
|
|
|
+ legend: {
|
|
|
+ display: true
|
|
|
+ },
|
|
|
+ title: {
|
|
|
+ display: false,
|
|
|
+ text: "甲班缺陷"
|
|
|
+ },
|
|
|
+ tooltips: {
|
|
|
+ mode: 'point',
|
|
|
+ intersect: false
|
|
|
+ },
|
|
|
+ responsive: true
|
|
|
+
|
|
|
+ }
|
|
|
+ };
|
|
|
+ var ctxDefectB = document.getElementById("canvasDefectB").getContext("2d");
|
|
|
+ window.DefectB = new Chart(ctxDefectB, configDefectB);
|
|
|
+ //===================================================
|
|
|
+
|
|
|
+ //甲班缺陷===========================================
|
|
|
+ window.canvasMonthCL = {
|
|
|
+ data: {
|
|
|
+ labels: ["01", "02", "03", "04", "05", "06", "07"],
|
|
|
+ datasets: [
|
|
|
+ {
|
|
|
+ label: "次品回收量",
|
|
|
+ fill: false,
|
|
|
+ backgroundColor: color(window.chartColors.blue).alpha(0.6).rgbString(),
|
|
|
+ borderColor: window.chartColors.blue,
|
|
|
+ borderWidth: 2,
|
|
|
+ pointRadius: 15,
|
|
|
+ data: [0, 0, 0, 0, 0, 0, 0, 0]
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ type: 'bar',
|
|
|
+ options: {
|
|
|
+ legend: {
|
|
|
+ display: true
|
|
|
+ },
|
|
|
+ title: {
|
|
|
+ display: true,
|
|
|
+ text: ""
|
|
|
+ },
|
|
|
+ tooltips: {
|
|
|
+ mode: 'point',
|
|
|
+ intersect: false
|
|
|
+ },
|
|
|
+ responsive: true,
|
|
|
+ scales: {
|
|
|
+ xAxes: [{
|
|
|
+ stacked: false
|
|
|
+ }],
|
|
|
+ yAxes: [{
|
|
|
+ display: true,
|
|
|
+ stacked: false,
|
|
|
+ ticks: {
|
|
|
+ min: 0,
|
|
|
+ stepSize: 200,
|
|
|
+ max: 1000
|
|
|
+ }
|
|
|
+ }]
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ };
|
|
|
+ var ctxDayCL = document.getElementById("canvasMonthCL").getContext("2d");
|
|
|
+ window.DayCL = new Chart(ctxDayCL, canvasMonthCL);
|
|
|
+ //===================================================
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ </script>
|
|
|
+
|
|
|
+ <script src="/Plugins/chartjs-2.8.0/chart-2.8.min.js"></script>
|
|
|
+ <script src="/Plugins/chartjs-2.8.0/chartjs-plugin-datalabels.js"></script>
|
|
|
+ <script src="/Plugins/chartjs-2.8.0/utils.js"></script>
|
|
|
+ <script src="/Plugins/circleChart/circleChart.min.js"></script>
|
|
|
+</body>
|
|
|
+</html>
|