demo.html 37 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  6. <link rel="shortcut icon" href="/img/logo.png" />
  7. <link rel="bookmark" href="/img/logo.png" />
  8. <link href="/Plugins/animate/animate.min.css" rel="stylesheet" />
  9. <link rel="stylesheet" href="../DashBoard.css?v3" />
  10. <script src="/Plugins/jquery-3.4.1/jquery-3.4.1.min.js"></script>
  11. <script src="/Plugins/animate/xanimate.js"></script>
  12. <script src="/Plugins/xrequest/xrequest.min.js"></script>
  13. <title>东科软件</title>
  14. </head>
  15. <body style="background-color:black;">
  16. <div class="box_1920_1080">
  17. <div class="box_title" style="display:flex;flex-direction:row;">
  18. <div style="width:30%;text-align:left;"></div>
  19. <div style="width: 40%; text-align: center; font-size: 38px; font-weight: 700">成检试水三检看板</div>
  20. <div style="width:30%;text-align:right;"><span class="box_title_loading" style="font-size:32px;" id="报表加载"></span></div>
  21. </div>
  22. <div class="box_body" style="display: flex; flex-direction: column;">
  23. <!--注浆数据表格-->
  24. <div style="width:1840px;height:680px;display:flex;flex-direction:row;">
  25. <div style="width: 48%; height: 680px;">
  26. <table cellspacing="0" cellpadding="0" border="0" style="width: 99.8%;">
  27. <tr class="tr_title_warning">
  28. <td colspan="10" style="color: white;">本烧产品外观检验统计</td>
  29. </tr>
  30. <tr class="tr_title_warning" style="height: 50px;">
  31. <td style="width: 10%; font-size: 10px; padding: 0px 0px 0px 0px;">产品型号</td>
  32. <td style="width: 10%; font-size: 10px; padding: 0px 0px 0px 0px;">成型产线</td>
  33. <td style="width: 10%; font-size: 10px; padding: 0px 0px 0px 0px;">检验数量</td>
  34. <td style="width: 10%; font-size: 10px; padding: 0px 0px 0px 0px;">正品数量</td>
  35. <td style="width: 10%; font-size: 10px; padding: 0px 0px 0px 0px;">副品数量</td>
  36. <td style="width: 10%; font-size: 10px; padding: 0px 0px 0px 0px;">次品数量</td>
  37. <td style="width: 10%; font-size: 10px; padding: 0px 0px 0px 0px;">重烧数量</td>
  38. <td style="width: 10%; font-size: 10px; padding: 0px 0px 0px 0px;">冷补数量</td>
  39. <td style="width: 10%; font-size: 10px; padding: 0px 0px 0px 0px; ">合格率</td>
  40. <td style="width: 10%; font-size: 10px; padding: 0px 0px 0px 0px; ">次品报废率</td>
  41. </tr>
  42. </table>
  43. <div style=" height: 522px; overflow: hidden; width: 100%;">
  44. <div>
  45. <table id="dayTable_template" style="display:none;">
  46. <tr class="tr_title_warning" style="height: 50px;">
  47. <td style="width: 10%; font-size: 10px; padding: 0px 0px 0px 0px;">{产品型号}</td>
  48. <td style="width: 10%; font-size: 10px; padding: 0px 0px 0px 0px;">{成型产线}</td>
  49. <td style="width: 10%; font-size: 10px; padding: 0px 0px 0px 0px;">{检验数量}</td>
  50. <td style="width: 10%; font-size: 10px; padding: 0px 0px 0px 0px; ">{正品数量}</td>
  51. <td style="width: 10%; font-size: 10px; padding: 0px 0px 0px 0px;">{副品数量}</td>
  52. <td style="width: 10%; font-size: 10px; padding: 0px 0px 0px 0px;">{次品数量}</td>
  53. <td style="width: 10%; font-size: 10px; padding: 0px 0px 0px 0px;">{重烧数量}</td>
  54. <td style="width: 10%; font-size: 10px; padding: 0px 0px 0px 0px;">{冷补数量}</td>
  55. <td style="width: 10%; font-size: 10px; padding: 0px 0px 0px 0px;">{合格率}</td>
  56. <td style="width: 10%; font-size: 10px; padding: 0px 0px 0px 0px;">{次品报废率}</td>
  57. </tr>
  58. </table>
  59. </div>
  60. <table id="dayTable" style="width: 100%; ">
  61. </table>
  62. </div>
  63. </div>
  64. <div style="width: 24%; height: 340px; position: absolute; right: 40px; ">
  65. <div style="color:white;font-size:20px;font-weight:600; text-align:center">智能装配1产量</div>
  66. <canvas id="canvasDayDCL" style="-moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; height: 300px; width: 100%;margin-top:-20px;"></canvas>
  67. </div>
  68. <div style="width: 24%; height: 340px; position: absolute; right: 480px; ">
  69. <div style="color:white;font-size:20px;font-weight:600; text-align:center">智能装配2产量</div>
  70. <canvas id="canvasDayDCL2" style="-moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; height: 300px; width: 100%;margin-top:-20px;"></canvas>
  71. </div>
  72. <div style="width: 24%; height: 340px; position: absolute; right: 40px; top:400px;">
  73. <div style="color:white;font-size:20px;font-weight:600; text-align:center">连体装配产量</div>
  74. <canvas id="canvasDayXCL" style="-moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; height: 300px; width: 100%;margin-top:-20px;"></canvas>
  75. </div>
  76. <div style="width: 24%; height: 340px; position: absolute; right: 480px; top:400px;">
  77. <div style="color:white;font-size:20px;font-weight:600; text-align:center">试水产量</div>
  78. <canvas id="canvasDayCLQ" style="-moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; height: 300px; width: 100%;margin-top:-20px;"></canvas>
  79. </div>
  80. </div>
  81. <!--缺陷统计-->
  82. <div style="width:1840px;height:230px;display:flex;flex-direction:row;">
  83. <div style="width: 30%; height: 230px;">
  84. <div style="color:white;font-size:20px;font-weight:600; text-align:center">成品检验七日趋势图</div>
  85. <canvas id="canvasDayZL" style="-moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; height: 200px; width: 100%"></canvas>
  86. </div>
  87. <div style="width: 18%; height: 230px;">
  88. <div style="color:white;font-size:20px;font-weight:600; text-align:center">成品检验缺陷TOP3</div>
  89. <canvas id="canvasDefectA" style="-moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; height: 200px; width: 100%"></canvas>
  90. </div>
  91. <div style="width: 18%; height: 230px;">
  92. <div style="color:white;font-size:20px;font-weight:600; text-align:center">成品检验缺陷位置TOP3</div>
  93. <canvas id="canvasDefectW" style="-moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; height: 200px; width: 100%"></canvas>
  94. </div>
  95. <div style="width: 36%; height: 310px;">
  96. </div>
  97. </div>
  98. </div>
  99. </div>
  100. <script>
  101. var mainInterval;
  102. var mainRowCount = 0;
  103. var mainInterva2;
  104. var mainRowCoun2 = 0;
  105. function loadMainTable() {
  106. if (mainInterval) {
  107. clearInterval(mainInterval);
  108. //console.log("Interval Stop!");
  109. }
  110. $.get("demo.ashx?m=MonthTable", function (data) {
  111. var json = JSON.parse(data);
  112. if (json["success"] == true) {
  113. $("#dayTable").html("");
  114. for (var i = 0; i < json["rows"].length; i++) {
  115. var temp = $("#dayTable_template").html();
  116. temp = temp.replace("<tbody>", "").replace("</tbody>", "");
  117. temp = temp.replace('{产品型号}', json["rows"][i]['产品型号']);
  118. temp = temp.replace('{成型产线}', json["rows"][i]['成型产线']);
  119. temp = temp.replace('{检验数量}', json["rows"][i]['检验数量']);
  120. temp = temp.replace('{正品数量}', json["rows"][i]['正品数量']);
  121. temp = temp.replace('{副品数量}', json["rows"][i]['副品数量']);
  122. temp = temp.replace('{次品数量}', json["rows"][i]['次品数量']);
  123. temp = temp.replace('{重烧数量}', json["rows"][i]['重烧数量']);
  124. temp = temp.replace('{冷补数量}', json["rows"][i]['冷补数量']);
  125. temp = temp.replace('{合格率}', json["rows"][i]['合格率']);
  126. temp = temp.replace('{次品报废率}', json["rows"][i]['次品报废率']);
  127. $("#dayTable").append(temp);
  128. }
  129. var num = parseInt(json["rows"].length);
  130. for (var i = 0; i < num; i++) {
  131. //获取日合格率
  132. var rh = document.getElementById("dayTable").rows[i].cells[8].innerHTML;
  133. var rh1 = parseInt(rh.replace(/[^\d.]/g, ""));
  134. //获取次品报废率
  135. var bf = document.getElementById("dayTable").rows[i].cells[9].innerHTML;
  136. var bf1 = parseInt(bf.replace(/[^\d.]/g, ""));
  137. //判断日半检合格率
  138. if (rh1 < 90) {
  139. document.getElementById("dayTable").rows[i].cells[8].style.color = 'red';
  140. }
  141. //判断日成检合格率
  142. if (bf1 > 4) {
  143. document.getElementById("dayTable").rows[i].cells[9].style.color = 'red';
  144. }
  145. }
  146. mainRowCount = json["rows"].length;
  147. mainInterval = setInterval(mainScroll, 3000);
  148. }
  149. });
  150. }
  151. function mainScroll() {
  152. var scrollHeight = $("#dayTable").find("tr").outerHeight();
  153. $("#dayTable").animate({ marginTop: -scrollHeight, }, 500,
  154. function () {
  155. $(this).css({ marginTop: "0px", }).find("tr:first").appendTo(this);
  156. if (--mainRowCount == -1) loadMainTable();
  157. }
  158. );
  159. }
  160. $(document).ready(function () {
  161. initData();
  162. doGetData = setInterval(function () { timeUpdate(); }, 300000);
  163. loadMainTable();
  164. setInterval(function () { loadMainTable(); }, 30000);
  165. DefectDataW();
  166. setInterval(function () { DefectDataW(); }, 60000);
  167. setInterval(function () { DdfectData(); }, 60000);
  168. //DdfectDataB();
  169. //setInterval(function () { DdfectDataB(); }, 5000);
  170. ZxData();
  171. setInterval(function () { ZxData(); }, 60000);
  172. CLQData();
  173. setInterval(function () { CLQData(); }, 60000);
  174. DataDCL();
  175. setInterval(function () { DataDCL(); }, 60000);
  176. ClData();
  177. setInterval(function () { ClData(); }, 60000);
  178. DataDCL2();
  179. setInterval(function () { DataDCL2(); }, 60000);
  180. });
  181. //智能装配2产量
  182. function DataDCL2() {
  183. $.get("demo.ashx?m=dcl2", function (data) {
  184. var json = JSON.parse(data);
  185. let a = [];
  186. let b = [];
  187. if (json["success"] == true) {
  188. //var num = parseInt(json["rows"][0]["ROWNUM"]);
  189. var num = parseInt(json["rows"].length);
  190. for (var i = 0; i < num; i++) {
  191. a.push(parseInt(json["rows"][i]["产量"]));
  192. b.push(json["rows"][i]["工号"]);
  193. }
  194. window.DayDCL2.data.datasets[0].data = a;
  195. window.DayDCL2.data.labels = b;
  196. window.DayDCL2.update();
  197. }
  198. });
  199. }
  200. //连体装配产量
  201. function ClData() {
  202. $.get("demo.ashx?m=cl", function (data) {
  203. var json = JSON.parse(data);
  204. let a = [];
  205. let b = [];
  206. if (json["success"] == true) {
  207. var num = parseInt(json["rows"].length);
  208. for (var i = 0; i < num; i++) {
  209. a.push(parseInt(json["rows"][i]["产量"]));
  210. b.push(json["rows"][i]["工号"]);
  211. }
  212. window.DayCL.data.datasets[0].data = a;
  213. window.DayCL.data.labels = b;
  214. window.DayCL.update();
  215. }
  216. });
  217. }
  218. //智能装配1产量
  219. function DataDCL() {
  220. $.get("demo.ashx?m=dcl", function (data) {
  221. var json = JSON.parse(data);
  222. let a = [];
  223. let b = [];
  224. if (json["success"] == true) {
  225. //var num = parseInt(json["rows"][0]["ROWNUM"]);
  226. var num = parseInt(json["rows"].length);
  227. for (var i = 0; i < num; i++) {
  228. a.push(parseInt(json["rows"][i]["产量"]));
  229. b.push(json["rows"][i]["工号"]);
  230. }
  231. window.DayDCL.data.datasets[0].data = a;
  232. window.DayDCL.data.labels = b;
  233. window.DayDCL.update();
  234. }
  235. });
  236. }
  237. //试水产量
  238. function CLQData() {
  239. $.get("demo.ashx?m=ss", function (data) {
  240. var json = JSON.parse(data);
  241. let a = [];
  242. let b = [];
  243. if (json["success"] == true) {
  244. var num = parseInt(json["rows"].length);
  245. for (var i = 0; i < num; i++) {
  246. a.push(parseInt(json["rows"][i]["产量"]));
  247. b.push(json["rows"][i]["工号"]);
  248. }
  249. window.DayCLQ.data.datasets[0].data = a;
  250. window.DayCLQ.data.labels = b;
  251. window.DayCLQ.update();
  252. }
  253. });
  254. }
  255. function DefectDataW() {
  256. $.get("demo.ashx?m=defectw", function (data) {
  257. var json = JSON.parse(data);
  258. if (json["success"] == true) {
  259. var defect1 = parseFloat(json["rows"][0]["缺陷数量"]);
  260. var defect2 = parseFloat(json["rows"][1]["缺陷数量"]);
  261. var defect3 = parseFloat(json["rows"][2]["缺陷数量"]);
  262. var defectname1 = json["rows"][0]["缺陷位置"];
  263. var defectname2 = json["rows"][1]["缺陷位置"];
  264. var defectname3 = json["rows"][2]["缺陷位置"];
  265. window.DefectW.data.datasets[0].data = [defect1, defect2, defect3];
  266. window.DefectW.data.labels = [defectname1, defectname2, defectname3]
  267. window.DefectW.update();
  268. }
  269. });
  270. }
  271. function DdfectData() {
  272. $.get("demo.ashx?m=defect", function (data) {
  273. var json = JSON.parse(data);
  274. if (json["success"] == true) {
  275. var defect1 = parseFloat(json["rows"][0]["数量"]);
  276. var defect2 = parseFloat(json["rows"][1]["数量"]);
  277. var defect3 = parseFloat(json["rows"][2]["数量"]);
  278. var defectname1 = json["rows"][0]["缺陷名称"];
  279. var defectname2 = json["rows"][1]["缺陷名称"];
  280. var defectname3 = json["rows"][2]["缺陷名称"];
  281. window.DefectA.data.datasets[0].data = [defect1, defect2, defect3];
  282. window.DefectA.data.labels = [defectname1, defectname2, defectname3]
  283. window.DefectA.update();
  284. }
  285. });
  286. }
  287. //function DdfectDataB() {
  288. // $.get("demo.ashx?m=defectb", function (data) {
  289. // var json = JSON.parse(data);
  290. // if (json["success"] == true) {
  291. // var defect1 = parseFloat(json["rows"][0]["数量"]);
  292. // var defect2 = parseFloat(json["rows"][1]["数量"]);
  293. // var defect3 = parseFloat(json["rows"][2]["数量"]);
  294. // var defectname1 = json["rows"][0]["缺陷名称"];
  295. // var defectname2 = json["rows"][1]["缺陷名称"];
  296. // var defectname3 = json["rows"][2]["缺陷名称"];
  297. // window.DefectB.data.datasets[0].data = [defect1, defect2, defect3];
  298. // window.DefectB.data.labels = [defectname1, defectname2, defectname3]
  299. // window.DefectB.update();
  300. // }
  301. // });
  302. //}
  303. function ZxData() {
  304. $.get("demo.ashx?m=zx", function (data) {
  305. var json = JSON.parse(data);
  306. if (json["success"] == true) {
  307. var BJ1 = parseFloat(json["rows"][0]["合格率"]);
  308. var BJ2 = parseFloat(json["rows"][1]["合格率"]);
  309. var BJ3 = parseFloat(json["rows"][2]["合格率"]);
  310. var BJ4 = parseFloat(json["rows"][3]["合格率"]);
  311. var BJ5 = parseFloat(json["rows"][4]["合格率"]);
  312. var BJ6 = parseFloat(json["rows"][5]["合格率"]);
  313. var BJ7 = parseFloat(json["rows"][6]["合格率"]);
  314. var day1 = json["rows"][0]["日期"];
  315. var day2 = json["rows"][1]["日期"];
  316. var day3 = json["rows"][2]["日期"];
  317. var day4 = json["rows"][3]["日期"];
  318. var day5 = json["rows"][4]["日期"];
  319. var day6 = json["rows"][5]["日期"];
  320. var day7 = json["rows"][6]["日期"];
  321. var count1 = parseFloat(json["rows"][0]["烧成合格数"]);
  322. var count2 = parseFloat(json["rows"][1]["烧成合格数"]);
  323. var count3 = parseFloat(json["rows"][2]["烧成合格数"]);
  324. var count4 = parseFloat(json["rows"][3]["烧成合格数"]);
  325. var count5 = parseFloat(json["rows"][4]["烧成合格数"]);
  326. var count6 = parseFloat(json["rows"][5]["烧成合格数"]);
  327. var count7 = parseFloat(json["rows"][6]["烧成合格数"]);
  328. window.DayZL.data.datasets[0].data = [BJ1, BJ2, BJ3, BJ4, BJ5, BJ6, BJ7];
  329. window.DayZL.data.datasets[1].data = [count1, count2, count3, count4, count5, count6, count7];
  330. window.DayZL.data.labels = [day1, day2, day3, day4, day5, day6, day7];
  331. window.DayZL.update();
  332. }
  333. });
  334. }
  335. function timeUpdate() {
  336. loadData();
  337. }
  338. function loadData() {
  339. //成型各项趋势图
  340. //window.DayZL.data.datasets[0].data = [
  341. // randomScalingFactor(1) + 80,
  342. // randomScalingFactor(1) + 80,
  343. // randomScalingFactor(1) + 80,
  344. // randomScalingFactor(1) + 80,
  345. // randomScalingFactor(1) + 80,
  346. // randomScalingFactor(1) + 80,
  347. // randomScalingFactor(1) + 80
  348. //];
  349. //window.DayZL.data.datasets[1].data = [
  350. // randomScalingFactor(1) + 70,
  351. // randomScalingFactor(1) + 70,
  352. // randomScalingFactor(1) + 70,
  353. // randomScalingFactor(1) + 70,
  354. // randomScalingFactor(1) + 70,
  355. // randomScalingFactor(1) + 70,
  356. // randomScalingFactor(1) + 70
  357. //];
  358. //window.DayZL.update();
  359. //成型缺陷top5
  360. //window.DefectA.data.datasets[0].data = [
  361. // randomScalingFactor(8),
  362. // randomScalingFactor(8),
  363. // randomScalingFactor(8)
  364. //];
  365. //window.DefectA.update();
  366. //成检缺陷top5
  367. //window.DefectB.data.datasets[0].data = [
  368. // randomScalingFactor(8),
  369. // randomScalingFactor(8),
  370. // randomScalingFactor(8)
  371. //];
  372. //window.DefectB.update();
  373. //产量计划达成
  374. //window.MonthCL.data.datasets[0].data = [
  375. // randomScalingFactor(1000),
  376. // randomScalingFactor(1000)
  377. //];
  378. //window.MonthCL.update();
  379. }
  380. function initData() {
  381. window.chartColors = {
  382. red: 'rgb(255, 99, 132)',
  383. orange: 'rgb(255, 159, 64)',
  384. yellow: 'rgb(255, 250, 86)',
  385. green: 'rgb(75, 192, 192)',
  386. blue: 'rgb(54, 162, 250)',
  387. purple: 'rgb(153, 102, 255)',
  388. grey: 'rgb(231,233,237)'
  389. };
  390. var color = Chart.helpers.color;
  391. window.randomScalingFactor = function (num) {
  392. return Math.round(Math.random() * num);
  393. }
  394. Chart.defaults.global.defaultFontColor = 'white';
  395. Chart.defaults.global.defaultFontSize = 18;
  396. Chart.defaults.global.legend.display = false;
  397. //成检合格率各项趋势图=====================================
  398. window.configDayZL = {
  399. data: {
  400. labels: ["01", "02", "03", "04", "05", "06", "07"],
  401. datasets: [{
  402. type: 'line',
  403. label: "合格率",
  404. yAxesGroup: 'A',
  405. yAxisID:'A',
  406. backgroundColor: color(window.chartColors.red).alpha(0.5).rgbString(),
  407. borderColor: window.chartColors.red,
  408. borderWidth: 2,
  409. pointRadius: 15,
  410. data: [0, 0, 0, 0, 0, 0, 0],
  411. fill: false
  412. },{
  413. label: '产量',
  414. yAxesGroup: 'B',
  415. yAxisID: 'B',
  416. backgroundColor: color(window.chartColors.blue).alpha(0.5).rgbString(),
  417. borderColor: window.chartColors.blue,
  418. borderWidth: 1,
  419. data: [100, 100, 100, 100, 100, 100, 100],
  420. fill: false
  421. }]
  422. },
  423. type: 'bar',
  424. options: {
  425. legend: {
  426. display: true
  427. },
  428. title: {
  429. display: false,
  430. text: '质量统计'
  431. },
  432. tooltips: {
  433. mode: 'index',
  434. intersect: false,
  435. },
  436. hover: {
  437. mode: 'nearest',
  438. intersect: true
  439. },
  440. scales: {
  441. xAxes: [{
  442. display: true,
  443. scaleLabel: {
  444. display: false,
  445. labelString: ''
  446. }
  447. }],
  448. yAxes: [{
  449. display: true,
  450. id:'B',
  451. name: 'B',
  452. scalePositionLeft: true,
  453. position:'left',
  454. scaleLabel: {
  455. display: false,
  456. labelString: 'Value'
  457. },
  458. ticks: {
  459. min: 0,
  460. stepSize: 1000,
  461. max: 5000
  462. }
  463. }
  464. , {
  465. display: true,
  466. id:'A',
  467. name: 'A',
  468. scalePositionLeft: false,
  469. position: 'right',
  470. scaleLabel: {
  471. display: false,
  472. labelString: 'Value2'
  473. },
  474. ticks: {
  475. min: 50,
  476. stepSize: 10,
  477. max: 100
  478. }
  479. }]
  480. }
  481. }
  482. };
  483. var ctxDayZL = document.getElementById("canvasDayZL").getContext("2d");
  484. window.DayZL = new Chart(ctxDayZL, configDayZL);
  485. //===================================================
  486. //成检缺陷TOP5===========================================
  487. window.configDefectA = {
  488. data: {
  489. labels: ['1', '2', '3'],
  490. datasets: [{
  491. label: '工序',
  492. backgroundColor: [
  493. color(window.chartColors.red).alpha(0.35).rgbString(),
  494. color(window.chartColors.blue).alpha(0.35).rgbString(),
  495. color(window.chartColors.green).alpha(0.35).rgbString(),
  496. color(window.chartColors.orange).alpha(0.35).rgbString(),
  497. color(window.chartColors.purple).alpha(0.35).rgbString()
  498. ],
  499. fill: false,
  500. borderColor: [
  501. window.chartColors.red,
  502. window.chartColors.blue,
  503. window.chartColors.green,
  504. window.chartColors.orange,
  505. window.chartColors.purple
  506. ],
  507. borderWidth: 2,
  508. pointRadius: 30,
  509. data: [0, 0, 0]
  510. }]
  511. },
  512. type: 'pie',
  513. options: {
  514. legend: {
  515. display: true
  516. },
  517. title: {
  518. display: false,
  519. text: "甲班缺陷"
  520. },
  521. tooltips: {
  522. mode: 'point',
  523. intersect: false
  524. },
  525. responsive: true
  526. }
  527. };
  528. var ctxDefectA = document.getElementById("canvasDefectA").getContext("2d");
  529. window.DefectA = new Chart(ctxDefectA, configDefectA);
  530. //===================================================
  531. //成检缺陷位置TOP5===========================================
  532. window.configDefectW = {
  533. data: {
  534. labels: ['1', '2', '3'],
  535. datasets: [{
  536. label: '工序',
  537. backgroundColor: [
  538. color(window.chartColors.red).alpha(0.35).rgbString(),
  539. color(window.chartColors.blue).alpha(0.35).rgbString(),
  540. color(window.chartColors.green).alpha(0.35).rgbString(),
  541. color(window.chartColors.orange).alpha(0.35).rgbString(),
  542. color(window.chartColors.purple).alpha(0.35).rgbString()
  543. ],
  544. fill: false,
  545. borderColor: [
  546. window.chartColors.red,
  547. window.chartColors.blue,
  548. window.chartColors.green,
  549. window.chartColors.orange,
  550. window.chartColors.purple
  551. ],
  552. borderWidth: 2,
  553. pointRadius: 30,
  554. data: [0, 0, 0]
  555. }]
  556. },
  557. type: 'pie',
  558. options: {
  559. legend: {
  560. display: true
  561. },
  562. title: {
  563. display: false,
  564. text: "甲班缺陷"
  565. },
  566. tooltips: {
  567. mode: 'point',
  568. intersect: false
  569. },
  570. responsive: true
  571. }
  572. };
  573. var ctxDefectW = document.getElementById("canvasDefectW").getContext("2d");
  574. window.DefectW = new Chart(ctxDefectW, configDefectW);
  575. //===================================================
  576. //试水产量柱状图=====================================
  577. window.canvasDayCLQ = {
  578. data: {
  579. labels: ["01", "02", "03", "04", "05", "06", "07"],
  580. datasets: [
  581. {
  582. label: "产量",
  583. fill: false,
  584. backgroundColor: color(window.chartColors.blue).alpha(0.6).rgbString(),
  585. borderColor: window.chartColors.blue,
  586. borderWidth: 2,
  587. pointRadius: 15,
  588. data: [0, 0, 0, 0, 0, 0, 0, 0]
  589. }
  590. ]
  591. },
  592. type: 'bar',
  593. options: {
  594. legend: {
  595. display: true
  596. },
  597. title: {
  598. display: true,
  599. text: ""
  600. },
  601. tooltips: {
  602. mode: 'point',
  603. intersect: false
  604. },
  605. responsive: true,
  606. scales: {
  607. xAxes: [{
  608. stacked: false,
  609. barThickness: 40
  610. }],
  611. yAxes: [{
  612. display: true,
  613. stacked: false,
  614. ticks: {
  615. min: 0,
  616. //stepSize: 100,
  617. //max: 500
  618. }
  619. }]
  620. }
  621. }
  622. };
  623. var ctxDayCLQ = document.getElementById("canvasDayCLQ").getContext("2d");
  624. window.DayCLQ = new Chart(ctxDayCLQ, canvasDayCLQ);
  625. //===================================================
  626. //智能装配1产量柱状图=====================================
  627. window.canvasDayDCL = {
  628. data: {
  629. labels: ["01", "02", "03", "04", "05", "06", "07"],
  630. datasets: [
  631. {
  632. label: "产量",
  633. fill: false,
  634. backgroundColor: color(window.chartColors.blue).alpha(0.6).rgbString(),
  635. borderColor: window.chartColors.blue,
  636. borderWidth: 2,
  637. pointRadius: 15,
  638. data: [0, 0, 0, 0, 0, 0, 0, 0]
  639. }
  640. ]
  641. },
  642. type: 'bar',
  643. options: {
  644. legend: {
  645. display: true
  646. },
  647. title: {
  648. display: true,
  649. text: ""
  650. },
  651. tooltips: {
  652. mode: 'point',
  653. intersect: false
  654. },
  655. responsive: true,
  656. scales: {
  657. xAxes: [{
  658. stacked: false,
  659. barThickness: 40
  660. }],
  661. yAxes: [{
  662. display: true,
  663. stacked: false,
  664. ticks: {
  665. min: 0,
  666. //stepSize: 100,
  667. //max: 500
  668. }
  669. }]
  670. }
  671. }
  672. };
  673. var ctxDayDCL = document.getElementById("canvasDayDCL").getContext("2d");
  674. window.DayDCL = new Chart(ctxDayDCL, canvasDayDCL);
  675. //===================================================
  676. //智能装配2产量柱状图=====================================
  677. window.canvasDayDCL2 = {
  678. data: {
  679. labels: ["01", "02", "03", "04", "05", "06", "07"],
  680. datasets: [
  681. {
  682. label: "产量",
  683. fill: false,
  684. backgroundColor: color(window.chartColors.blue).alpha(0.6).rgbString(),
  685. borderColor: window.chartColors.blue,
  686. borderWidth: 2,
  687. pointRadius: 15,
  688. data: [0, 0, 0, 0, 0, 0, 0, 0]
  689. }
  690. ]
  691. },
  692. type: 'bar',
  693. options: {
  694. legend: {
  695. display: true
  696. },
  697. title: {
  698. display: true,
  699. text: ""
  700. },
  701. tooltips: {
  702. mode: 'point',
  703. intersect: false
  704. },
  705. responsive: true,
  706. scales: {
  707. xAxes: [{
  708. stacked: false,
  709. barThickness: 40
  710. }],
  711. yAxes: [{
  712. display: true,
  713. stacked: false,
  714. ticks: {
  715. min: 0,
  716. //stepSize: 100,
  717. //max: 500
  718. }
  719. }]
  720. }
  721. }
  722. };
  723. var ctxDayDCL2 = document.getElementById("canvasDayDCL2").getContext("2d");
  724. window.DayDCL2 = new Chart(ctxDayDCL2, canvasDayDCL2);
  725. //===================================================
  726. //连体装配柱状图=====================================
  727. window.canvasDayXCL = {
  728. data: {
  729. labels: ["01", "02", "03", "04", "05", "06", "07"],
  730. datasets: [
  731. {
  732. label: "产量",
  733. fill: false,
  734. backgroundColor: color(window.chartColors.blue).alpha(0.6).rgbString(),
  735. borderColor: window.chartColors.blue,
  736. borderWidth: 2,
  737. pointRadius: 15,
  738. data: [0, 0, 0, 0, 0, 0, 0, 0]
  739. }
  740. ]
  741. },
  742. type: 'bar',
  743. options: {
  744. legend: {
  745. display: true
  746. },
  747. title: {
  748. display: true,
  749. text: ""
  750. },
  751. tooltips: {
  752. mode: 'point',
  753. intersect: false
  754. },
  755. responsive: true,
  756. scales: {
  757. xAxes: [{
  758. stacked: false,
  759. barThickness: 40
  760. }],
  761. yAxes: [{
  762. display: true,
  763. stacked: false,
  764. ticks: {
  765. min: 0,
  766. //stepSize: 100,
  767. //max: 500
  768. }
  769. }]
  770. }
  771. }
  772. };
  773. var ctxDayCL = document.getElementById("canvasDayXCL").getContext("2d");
  774. window.DayCL = new Chart(ctxDayCL, canvasDayXCL);
  775. //===================================================
  776. }
  777. </script>
  778. <script src="/Plugins/chartjs-2.8.0/chart-2.8.min.js"></script>
  779. <script src="/Plugins/chartjs-2.8.0/chartjs-plugin-datalabels.js"></script>
  780. <script src="/Plugins/chartjs-2.8.0/utils.js"></script>
  781. <script src="/Plugins/circleChart/circleChart.min.js"></script>
  782. </body>
  783. </html>