demo.html 33 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690
  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: 100%; height: 680px;">
  26. <table cellspacing="0" cellpadding="0" border="0" style="width:100%;">
  27. <tr class="tr_title_warning">
  28. <td colspan="2" style="color: white;">产线信息</td>
  29. <td colspan="3" style="color: white;">日注浆</td>
  30. <td colspan="3" style="color: white;">日半检</td>
  31. <td colspan="3" style="color: white;">日成检</td>
  32. <td colspan="3" style="color: white;">月注浆</td>
  33. <td colspan="3" style="color: white;">月半检</td>
  34. <td colspan="3" style="color: white;">月成检</td>
  35. </tr>
  36. <tr class="tr_title_warning">
  37. <!--<td style="width:7%;">成型线</td>-->
  38. <td style="width:4.5%;">工号</td>
  39. <td style="width:7.5%;">产品</td>
  40. <td style="width:4.5%;">注浆数</td>
  41. <td style="width:4.5%;">成型数</td>
  42. <td style="width:4.5%;">注成率</td>
  43. <td style="width:4.5%;">半检数</td>
  44. <td style="width:4.5%;">合格数</td>
  45. <td style="width:4.5%;">合格率</td>
  46. <td style="width:4.5%;">成检数</td>
  47. <td style="width:4.5%;">合格数</td>
  48. <td style="width:4.5%;">合格率</td>
  49. <td style="width:4.5%;">注浆数</td>
  50. <td style="width:4.5%;">成型数</td>
  51. <td style="width:4.5%;">注成率</td>
  52. <td style="width:4.5%;">半检数</td>
  53. <td style="width:4.5%;">合格数</td>
  54. <td style="width:4.5%;">合格率</td>
  55. <td style="width:4.5%;">成检数</td>
  56. <td style="width:4.5%;">合格数</td>
  57. <td style="width:4.5%;">合格率</td>
  58. </tr>
  59. </table>
  60. <div style=" height: 560px; overflow: hidden; width: 100%;">
  61. <div>
  62. <table id="dayTable_template" style="display:none;">
  63. <tr class="tr_title_warning" style="height: 60px;">
  64. <!--<td style="width: 7.1%; font-size: 14px;">{成型线}</td>-->
  65. <td style="width: 4.5%; font-size: 14px;">{工号}</td>
  66. <td style="width: 7.5%; font-size: 14px;">{产品}</td>
  67. <td style="width: 4.5%; font-size: 14px;">{日注浆数}</td>
  68. <td style="width: 4.5%; font-size: 14px;">{日成型数}</td>
  69. <td style="width: 4.5%; font-size: 14px;">{日注成率}</td>
  70. <td style="width: 4.5%; font-size: 14px;">{日半检数}</td>
  71. <td style="width: 4.5%; font-size: 14px;">{日半检合格数}</td>
  72. <td style="width: 4.5%; font-size: 14px;">{日半检合格率}</td>
  73. <td style="width: 4.5%; font-size: 14px;">{日成检数}</td>
  74. <td style="width: 4.5%; font-size: 14px;">{日成检合格数}</td>
  75. <td style="width: 4.5%; font-size: 14px;">{日成检合格率}</td>
  76. <td style="width: 4.5%; font-size: 14px;">{月注浆数}</td>
  77. <td style="width: 4.5%; font-size: 14px;">{月成型数}</td>
  78. <td style="width: 4.5%; font-size: 14px;">{月注成率}</td>
  79. <td style="width: 4.5%; font-size: 14px;">{月半检数}</td>
  80. <td style="width: 4.5%; font-size: 14px;">{月半检合格数}</td>
  81. <td style="width: 4.5%; font-size: 14px;">{月半检合格率}</td>
  82. <td style="width: 4.5%; font-size: 14px;">{月成检数}</td>
  83. <td style="width: 4.5%; font-size: 14px;">{月成检合格数}</td>
  84. <td style="width: 4.5%; font-size: 14px;">{月成检合格率}</td>
  85. </tr>
  86. </table>
  87. </div>
  88. <table id="dayTable" style="width: 100%;height:560px;">
  89. </table>
  90. </div>
  91. </div>
  92. </div>
  93. <!--缺陷统计-->
  94. <div style="width:100%;height:230px;display:flex;flex-direction:row;">
  95. <div style="width: 26%; height: 230px;">
  96. <div style="color:white;font-size:20px;font-weight:600; text-align:center">成型各项趋势图</div>
  97. <canvas id="canvasDayZL" style="-moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; height: 200px; width: 100%"></canvas>
  98. </div>
  99. <div style="width: 27%; height: 310px;">
  100. <div style="color:white;font-size:20px;font-weight:600; text-align:center">半检缺陷(今日TOP3)</div>
  101. <canvas id="canvasDefectA" style="-moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; height: 280px; width: 100%; margin-top: -38px; "></canvas>
  102. </div>
  103. <div style="width: 27%; height: 230px;">
  104. <div style="color:white;font-size:20px;font-weight:600; text-align:center">成检缺陷(今日TOP3)</div>
  105. <canvas id="canvasDefectC" style="-moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; height: 280px; width: 100%; margin-top: -38px;"></canvas>
  106. </div>
  107. <div style="width: 20%; height: 310px;">
  108. <div style="color:white;font-size:20px;font-weight:600; text-align:center">成型工号产量</div>
  109. <canvas id="canvasDayCL" style="-moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; height: 280px; width: 100%;margin-top:-38px;"></canvas>
  110. </div>
  111. </div>
  112. </div>
  113. </div>
  114. <script>
  115. var mainInterval;
  116. var mainRowCount = 0;
  117. function loadMainTable() {
  118. if (mainInterval) {
  119. clearInterval(mainInterval);
  120. console.log("Interval Stop!");
  121. }
  122. $.get("demo.ashx?m=MonthTable", function (data){
  123. var json = JSON.parse(data);
  124. if (json["success"] == true){
  125. $("#dayTable").html("");
  126. for (var i = 0; i < json["rows"].length; i++) {
  127. var temp = $("#dayTable_template").html();
  128. temp = temp.replace("<tbody>", "").replace("</tbody>", "");
  129. //temp = temp.replace('{成型线}', json["rows"][i]['成型线']);
  130. temp = temp.replace('{工号}', json["rows"][i]['工号']);
  131. temp = temp.replace('{产品}', json["rows"][i]['产品']);
  132. temp = temp.replace('{日注浆数}', json["rows"][i]['日注浆数']);
  133. temp = temp.replace('{日成型数}', json["rows"][i]['日成型数']);
  134. temp = temp.replace('{日注成率}', json["rows"][i]['日注成率']);
  135. temp = temp.replace('{日半检数}', json["rows"][i]['日半检数']);
  136. temp = temp.replace('{日半检合格数}', json["rows"][i]['日半检合格数']);
  137. temp = temp.replace('{日半检合格率}', json["rows"][i]['日半检合格率']);
  138. temp = temp.replace('{日成检数}', json["rows"][i]['日成检数']);
  139. temp = temp.replace('{日成检合格数}', json["rows"][i]['日成检合格数']);
  140. temp = temp.replace('{日成检合格率}', json["rows"][i]['日成检合格率']);
  141. temp = temp.replace('{月注浆数}', json["rows"][i]['月注浆数']);
  142. temp = temp.replace('{月成型数}', json["rows"][i]['月成型数']);
  143. temp = temp.replace('{月注成率}', json["rows"][i]['月注成率']);
  144. temp = temp.replace('{月半检数}', json["rows"][i]['月半检数']);
  145. temp = temp.replace('{月半检合格数}', json["rows"][i]['月半检合格数']);
  146. temp = temp.replace('{月半检合格率}', json["rows"][i]['月半检合格率']);
  147. temp = temp.replace('{月成检数}', json["rows"][i]['月成检数']);
  148. temp = temp.replace('{月成检合格数}', json["rows"][i]['月成检合格数']);
  149. temp = temp.replace('{月成检合格率}', json["rows"][i]['月成检合格率']);
  150. $("#dayTable").append(temp);
  151. }
  152. var num = parseInt(json["rows"].length);
  153. for (var i = 0; i < num; i++) {
  154. //获取日半检合格率
  155. var rb = document.getElementById("dayTable").rows[i].cells[7].innerHTML;
  156. var rb1 = parseInt(rb.replace(/[^\d.]/g, ""));
  157. //获取日成检合格率
  158. var rc = document.getElementById("dayTable").rows[i].cells[10].innerHTML;
  159. var rc1 = parseInt(rc.replace(/[^\d.]/g, ""));
  160. //获取月半检合格率
  161. var yb = document.getElementById("dayTable").rows[i].cells[16].innerHTML;
  162. var yb1 = parseInt(yb.replace(/[^\d.]/g, ""));
  163. //获取月成检合格率
  164. var yc = document.getElementById("dayTable").rows[i].cells[19].innerHTML;
  165. var yc1 = parseInt(yc.replace(/[^\d.]/g, ""));
  166. //判断日半检合格率
  167. if (rb1 < 95) {
  168. document.getElementById("dayTable").rows[i].cells[7].style.color = 'red';
  169. }
  170. //判断日成检合格率
  171. if (rc1 < 95) {
  172. document.getElementById("dayTable").rows[i].cells[10].style.color = 'red';
  173. }
  174. //判断月半检合格率
  175. if (yb1 < 95) {
  176. document.getElementById("dayTable").rows[i].cells[16].style.color = 'red';
  177. }
  178. //判断月成检合格率
  179. if (yc1 < 95) {
  180. document.getElementById("dayTable").rows[i].cells[19].style.color = 'red';
  181. }
  182. }
  183. mainRowCount = json["rows"].length;
  184. mainInterval = setInterval(mainScroll, 3000);
  185. }
  186. });
  187. }
  188. function mainScroll() {
  189. var scrollHeight = $("#dayTable").find("tr").outerHeight();
  190. $("#dayTable").animate({ marginTop: -scrollHeight, }, 500,
  191. function () {
  192. $(this).css({ marginTop: "0px", }).find("tr:first").appendTo(this);
  193. if (--mainRowCount == -1) loadMainTable();
  194. }
  195. );
  196. }
  197. $(document).ready(function () {
  198. initData();
  199. doGetData = setInterval(function () { timeUpdate(); }, 300000);
  200. loadMainTable();
  201. DdfectData();
  202. setInterval(function () { DdfectData(); }, 60000);
  203. ZxData();
  204. setInterval(function () { ZxData(); }, 60000);
  205. CLData();
  206. setInterval(function () { CLData(); }, 60000);
  207. DdfectDataC();
  208. setInterval(function () { DdfectDataC(); }, 60000);
  209. });
  210. function DdfectDataC() {
  211. $.get("demo.ashx?m=defectc", function (data) {
  212. var json = JSON.parse(data);
  213. if (json["success"] == true) {
  214. let a = [];
  215. let a1 = [];
  216. let a2 = [];
  217. let b = [];
  218. if (json["success"] == true) {
  219. //var num = parseInt(json["rows"][0]["ROWNUM"]);
  220. var num = parseInt(json["rows"].length);
  221. for (var i = 0; i < num; i++) {
  222. a.push(parseInt(json["rows"][i]["缺陷TOP1"]));
  223. a1.push(parseInt(json["rows"][i]["缺陷TOP2"]));
  224. a2.push(parseInt(json["rows"][i]["缺陷TOP3"]));
  225. b.push(json["rows"][i]["责任工号"]);
  226. }
  227. window.DefectC.data.datasets[0].label = json["rows"][0]["缺陷名称"];
  228. window.DefectC.data.datasets[1].label = json["rows"][1]["缺陷名称"];
  229. window.DefectC.data.datasets[2].label = json["rows"][2]["缺陷名称"];
  230. window.DefectC.data.datasets[0].data = a;
  231. window.DefectC.data.datasets[1].data = a1;
  232. window.DefectC.data.datasets[2].data = a2;
  233. window.DefectC.data.labels = b;
  234. window.DefectC.update();
  235. }
  236. }
  237. });
  238. }
  239. function CLData() {
  240. $.get("demo.ashx?m=cl", function (data) {
  241. var json = JSON.parse(data);
  242. let a = [];
  243. let b = [];
  244. if (json["success"] == true) {
  245. var num = parseInt(json["rows"][0]["ROWNUM"]);
  246. for (var i = 0; i < num; i++)
  247. {
  248. a.push(parseFloat(json["rows"][i]["COUNT"]));
  249. b.push(json["rows"][i]["USERCODE"]);
  250. }
  251. window.DayCL.data.datasets[0].data = a;
  252. window.DayCL.data.labels = b;
  253. //var count1 = parseFloat(json["rows"][0]["COUNT"]);
  254. //var count2 = parseFloat(json["rows"][1]["COUNT"]);
  255. //var count3 = parseFloat(json["rows"][2]["COUNT"]);
  256. //var count4 = parseFloat(json["rows"][3]["COUNT"]);
  257. //var count5 = parseFloat(json["rows"][4]["COUNT"]);
  258. //var count6 = parseFloat(json["rows"][5]["COUNT"]);
  259. //var usercode1 = json["rows"][0]["USERCODE"];
  260. //var usercode2 = json["rows"][1]["USERCODE"];
  261. //var usercode3 = json["rows"][2]["USERCODE"];
  262. //var usercode4 = json["rows"][3]["USERCODE"];
  263. //var usercode5 = json["rows"][4]["USERCODE"];
  264. //var usercode6 = json["rows"][5]["USERCODE"];
  265. //window.DayCL.data.datasets[0].data = [count1, count2, count3, count4, count5, count6];
  266. //window.DayCL.data.labels = [usercode1, usercode2, usercode3, usercode4, usercode5, usercode6]
  267. window.DayCL.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. let a = [];
  276. let a1 = [];
  277. let a2 = [];
  278. let b = [];
  279. if (json["success"] == true) {
  280. //var num = parseInt(json["rows"][0]["ROWNUM"]);
  281. var num = parseInt(json["rows"].length);
  282. for (var i = 0; i < num; i++) {
  283. a.push(parseInt(json["rows"][i]["缺陷TOP1"]));
  284. a1.push(parseInt(json["rows"][i]["缺陷TOP2"]));
  285. a2.push(parseInt(json["rows"][i]["缺陷TOP3"]));
  286. b.push(json["rows"][i]["责任工号"]);
  287. }
  288. window.DefectA.data.datasets[0].label = json["rows"][0]["缺陷名称"];
  289. window.DefectA.data.datasets[1].label = json["rows"][1]["缺陷名称"];
  290. window.DefectA.data.datasets[2].label = json["rows"][2]["缺陷名称"];
  291. window.DefectA.data.datasets[0].data = a;
  292. window.DefectA.data.datasets[1].data = a1;
  293. window.DefectA.data.datasets[2].data = a2;
  294. window.DefectA.data.labels = b;
  295. window.DefectA.update();
  296. }
  297. }
  298. });
  299. }
  300. function ZxData() {
  301. $.get("demo.ashx?m=zx", function (data) {
  302. var json = JSON.parse(data);
  303. if (json["success"] == true) {
  304. var BJ1 = parseFloat(json["rows"][0]["半检合格率"]);
  305. var BJ2 = parseFloat(json["rows"][1]["半检合格率"]);
  306. var BJ3 = parseFloat(json["rows"][2]["半检合格率"]);
  307. var BJ4 = parseFloat(json["rows"][3]["半检合格率"]);
  308. var BJ5 = parseFloat(json["rows"][4]["半检合格率"]);
  309. var BJ6 = parseFloat(json["rows"][5]["半检合格率"]);
  310. var BJ7 = parseFloat(json["rows"][6]["半检合格率"]);
  311. var BS1 = parseFloat(json["rows"][0]["本烧合格率"]);
  312. var BS2 = parseFloat(json["rows"][1]["本烧合格率"]);
  313. var BS3 = parseFloat(json["rows"][2]["本烧合格率"]);
  314. var BS4 = parseFloat(json["rows"][3]["本烧合格率"]);
  315. var BS5 = parseFloat(json["rows"][4]["本烧合格率"]);
  316. var BS6 = parseFloat(json["rows"][5]["本烧合格率"]);
  317. var BS7 = parseFloat(json["rows"][6]["本烧合格率"]);
  318. var day1 = json["rows"][0]["日期"];
  319. var day2 = json["rows"][1]["日期"];
  320. var day3 = json["rows"][2]["日期"];
  321. var day4 = json["rows"][3]["日期"];
  322. var day5 = json["rows"][4]["日期"];
  323. var day6 = json["rows"][5]["日期"];
  324. var day7 = json["rows"][6]["日期"];
  325. window.DayZL.data.datasets[0].data = [BJ1, BJ2, BJ3, BJ4, BJ5, BJ6, BJ7];
  326. window.DayZL.data.datasets[1].data = [BS1, BS2, BS3, BS4, BS5, BS6, BS7];
  327. window.DayZL.data.labels = [day1, day2, day3, day4, day5, day6, day7];
  328. window.DayZL.update();
  329. }
  330. });
  331. }
  332. function timeUpdate() {
  333. loadData();
  334. }
  335. function loadData() {
  336. //成型各项趋势图
  337. //window.DayZL.data.datasets[0].data = [
  338. // randomScalingFactor(1) + 80,
  339. // randomScalingFactor(1) + 80,
  340. // randomScalingFactor(1) + 80,
  341. // randomScalingFactor(1) + 80,
  342. // randomScalingFactor(1) + 80,
  343. // randomScalingFactor(1) + 80,
  344. // randomScalingFactor(1) + 80
  345. //];
  346. //window.DayZL.data.datasets[1].data = [
  347. // randomScalingFactor(1) + 70,
  348. // randomScalingFactor(1) + 70,
  349. // randomScalingFactor(1) + 70,
  350. // randomScalingFactor(1) + 70,
  351. // randomScalingFactor(1) + 70,
  352. // randomScalingFactor(1) + 70,
  353. // randomScalingFactor(1) + 70
  354. //];
  355. //window.DayZL.update();
  356. //成型缺陷top5
  357. //window.DefectA.data.datasets[0].data = [
  358. // randomScalingFactor(8),
  359. // randomScalingFactor(8),
  360. // randomScalingFactor(8)
  361. //];
  362. //window.DefectA.update();
  363. //成检缺陷top5
  364. //window.MonthCL.data.datasets[0].data = [
  365. // randomScalingFactor(8),
  366. // randomScalingFactor(8),
  367. // randomScalingFactor(8)
  368. //];
  369. //window.MonthCL.update();
  370. //产量计划达成
  371. //window.MonthCL.data.datasets[0].data = [
  372. // randomScalingFactor(1000),
  373. // randomScalingFactor(1000)
  374. //];
  375. //window.MonthCL.update();
  376. }
  377. function initData() {
  378. window.chartColors = {
  379. red: 'rgb(255, 99, 132)',
  380. orange: 'rgb(255, 159, 64)',
  381. yellow: 'rgb(255, 250, 86)',
  382. green: 'rgb(75, 192, 192)',
  383. blue: 'rgb(54, 162, 250)',
  384. purple: 'rgb(153, 102, 255)',
  385. grey: 'rgb(231,233,237)'
  386. };
  387. var color = Chart.helpers.color;
  388. window.randomScalingFactor = function (num) {
  389. return Math.round(Math.random() * num);
  390. }
  391. Chart.defaults.global.defaultFontColor = 'white';
  392. Chart.defaults.global.defaultFontSize = 18;
  393. Chart.defaults.global.legend.display = false;
  394. //成型各项趋势图=====================================
  395. window.configDayZL = {
  396. data: {
  397. labels: ["01", "02", "03", "04", "05", "06", "07"],
  398. datasets: [{
  399. label: "半检",
  400. backgroundColor: color(window.chartColors.red).alpha(0.35).rgbString(),
  401. borderColor: window.chartColors.red,
  402. borderWidth: 2,
  403. pointRadius: 15,
  404. data: [0, 0, 0, 0, 0, 0, 0],
  405. fill: false,
  406. }, {
  407. label: "一烧",
  408. fill: false,
  409. backgroundColor: color(window.chartColors.blue).alpha(0.35).rgbString(),
  410. borderColor: window.chartColors.blue,
  411. borderWidth: 2,
  412. pointRadius: 15,
  413. data: [0, 0, 0, 0, 0, 0, 0]
  414. }]
  415. },
  416. type: 'line',
  417. options: {
  418. responsive: true,
  419. legend: {
  420. display: true
  421. },
  422. title: {
  423. display: false,
  424. text: '质量统计'
  425. },
  426. tooltips: {
  427. mode: 'index',
  428. intersect: false,
  429. },
  430. hover: {
  431. mode: 'nearest',
  432. intersect: true
  433. },
  434. scales: {
  435. xAxes: [{
  436. display: true,
  437. scaleLabel: {
  438. display: false,
  439. labelString: ''
  440. }
  441. }],
  442. yAxes: [{
  443. display: true,
  444. scaleLabel: {
  445. display: false,
  446. labelString: 'Value'
  447. },
  448. ticks: {
  449. min: 85,
  450. stepSize:5,
  451. max: 100
  452. }
  453. }]
  454. }
  455. }
  456. };
  457. var ctxDayZL = document.getElementById("canvasDayZL").getContext("2d");
  458. window.DayZL = new Chart(ctxDayZL, configDayZL);
  459. //===================================================
  460. //成型缺陷TOP5===========================================
  461. window.configDefectA = {
  462. data: {
  463. labels: ["01", "02", "03", "04", "05", "06", "07"],
  464. datasets: [
  465. {
  466. label: "无",
  467. fill: false,
  468. backgroundColor: color(window.chartColors.blue).alpha(0.6).rgbString(),
  469. borderColor: window.chartColors.blue,
  470. borderWidth: 2,
  471. pointRadius: 15,
  472. data: [0, 0, 0, 0, 0, 0, 0, 0]
  473. }, {
  474. label: "无",
  475. fill: false,
  476. backgroundColor: color(window.chartColors.orange).alpha(0.6).rgbString(),
  477. borderColor: window.chartColors.orange,
  478. borderWidth: 2,
  479. pointRadius: 15,
  480. data: [0, 0, 0, 0, 0, 0, 0, 0]
  481. }
  482. , {
  483. label: "无",
  484. fill: false,
  485. backgroundColor: color(window.chartColors.red).alpha(0.6).rgbString(),
  486. borderColor: window.chartColors.red,
  487. borderWidth: 2,
  488. pointRadius: 15,
  489. data: [0, 0, 0, 0, 0, 0, 0, 0]
  490. }
  491. ]
  492. },
  493. type: 'bar',
  494. options: {
  495. legend: {
  496. display: true
  497. },
  498. title: {
  499. display: true,
  500. text: ""
  501. },
  502. tooltips: {
  503. mode: 'point',
  504. intersect: false
  505. },
  506. responsive: true,
  507. scales: {
  508. xAxes: [{
  509. stacked: false,
  510. axisLabel: {
  511. textStyle: {
  512. show: true,
  513. fontSize: '5',
  514. },
  515. }
  516. }],
  517. yAxes: [{
  518. display: true,
  519. stacked: false,
  520. Fontsize: '20',
  521. //ticks: {
  522. // min: 0,
  523. // stepSize: 5,
  524. // max: 30
  525. //}
  526. }]
  527. }
  528. }
  529. };
  530. var ctxDefectA = document.getElementById("canvasDefectA").getContext("2d");
  531. window.DefectA = new Chart(ctxDefectA, configDefectA);
  532. //===================================================
  533. //成检工号产量柱状图=====================================
  534. window.canvasDayCL = {
  535. data: {
  536. labels: ["01", "02", "03", "04", "05", "06", "07"],
  537. datasets: [
  538. {
  539. label: "注浆量",
  540. fill: false,
  541. backgroundColor: color(window.chartColors.blue).alpha(0.6).rgbString(),
  542. borderColor: window.chartColors.blue,
  543. borderWidth: 2,
  544. pointRadius: 15,
  545. data: [0, 0, 0, 0, 0, 0, 0, 0]
  546. }
  547. ]
  548. },
  549. type: 'bar',
  550. options: {
  551. legend: {
  552. display: true
  553. },
  554. title: {
  555. display: true,
  556. text: ""
  557. },
  558. tooltips: {
  559. mode: 'point',
  560. intersect: false
  561. },
  562. responsive: true,
  563. scales: {
  564. xAxes: [{
  565. stacked: false
  566. }],
  567. yAxes: [{
  568. display: true,
  569. stacked: false,
  570. ticks: {
  571. min: 0,
  572. stepSize: 100,
  573. max: 500
  574. }
  575. }]
  576. }
  577. }
  578. };
  579. var ctxDayCL = document.getElementById("canvasDayCL").getContext("2d");
  580. window.DayCL = new Chart(ctxDayCL, canvasDayCL);
  581. //===================================================
  582. //成型缺陷TOP5===========================================
  583. window.canvasDefectC = {
  584. data: {
  585. labels: ["01", "02", "03", "04", "05", "06", "07"],
  586. datasets: [
  587. {
  588. label: "无",
  589. fill: false,
  590. backgroundColor: color(window.chartColors.blue).alpha(0.6).rgbString(),
  591. borderColor: window.chartColors.blue,
  592. borderWidth: 2,
  593. pointRadius: 15,
  594. data: [0, 0, 0, 0, 0, 0, 0, 0]
  595. }, {
  596. label: "无",
  597. fill: false,
  598. backgroundColor: color(window.chartColors.orange).alpha(0.6).rgbString(),
  599. borderColor: window.chartColors.orange,
  600. borderWidth: 2,
  601. pointRadius: 15,
  602. data: [0, 0, 0, 0, 0, 0, 0, 0]
  603. }
  604. , {
  605. label: "无",
  606. fill: false,
  607. backgroundColor: color(window.chartColors.red).alpha(0.6).rgbString(),
  608. borderColor: window.chartColors.red,
  609. borderWidth: 2,
  610. pointRadius: 15,
  611. data: [0, 0, 0, 0, 0, 0, 0, 0]
  612. }
  613. ]
  614. },
  615. type: 'bar',
  616. options: {
  617. legend: {
  618. display: true
  619. },
  620. title: {
  621. display: true,
  622. text: ""
  623. },
  624. tooltips: {
  625. mode: 'point',
  626. intersect: false
  627. },
  628. responsive: true,
  629. scales: {
  630. xAxes: [{
  631. stacked: false
  632. }],
  633. yAxes: [{
  634. display: true,
  635. stacked: false,
  636. //ticks: {
  637. // min: 0,
  638. // stepSize: 2,
  639. // max: 18
  640. //}
  641. }]
  642. }
  643. }
  644. };
  645. var ctxDefectC = document.getElementById("canvasDefectC").getContext("2d");
  646. window.DefectC = new Chart(ctxDefectC, canvasDefectC);
  647. //===================================================
  648. }
  649. </script>
  650. <script src="/Plugins/chartjs-2.8.0/chart-2.8.min.js"></script>
  651. <script src="/Plugins/chartjs-2.8.0/chartjs-plugin-datalabels.js"></script>
  652. <script src="/Plugins/chartjs-2.8.0/utils.js"></script>
  653. <script src="/Plugins/circleChart/circleChart.min.js"></script>
  654. </body>
  655. </html>