demo.html 30 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619
  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="3" 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:1840px;height:230px;display:flex;flex-direction:row;">
  95. <div style="width: 25%; 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: 25%; height: 230px;">
  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: 200px; width: 100%"></canvas>
  102. </div>
  103. <div style="width: 25%; 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: 200px; width: 100%"></canvas>
  106. </div>
  107. <div style="width: 25%; 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[8].innerHTML;
  156. var rb1 = parseInt(rb.replace(/[^\d.]/g, ""));
  157. //获取日成检合格率
  158. var rc = document.getElementById("dayTable").rows[i].cells[11].innerHTML;
  159. var rc1 = parseInt(rc.replace(/[^\d.]/g, ""));
  160. //获取月半检合格率
  161. var yb = document.getElementById("dayTable").rows[i].cells[17].innerHTML;
  162. var yb1 = parseInt(yb.replace(/[^\d.]/g, ""));
  163. //获取月成检合格率
  164. var yc = document.getElementById("dayTable").rows[i].cells[20].innerHTML;
  165. var yc1 = parseInt(yc.replace(/[^\d.]/g, ""));
  166. //判断日半检合格率
  167. if (rb1 < 95) {
  168. document.getElementById("dayTable").rows[i].cells[8].style.color = 'red';
  169. }
  170. //判断日成检合格率
  171. if (rc1 < 92) {
  172. document.getElementById("dayTable").rows[i].cells[11].style.color = 'red';
  173. }
  174. //判断月半检合格率
  175. if (yb1 < 95) {
  176. document.getElementById("dayTable").rows[i].cells[17].style.color = 'red';
  177. }
  178. //判断月成检合格率
  179. if (yc1 < 92) {
  180. document.getElementById("dayTable").rows[i].cells[20].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(); }, 5000);
  200. loadMainTable();
  201. DdfectData();
  202. setInterval(function () { DdfectData(); }, 5000);
  203. ZxData();
  204. setInterval(function () { ZxData(); }, 5000);
  205. CLData();
  206. setInterval(function () { CLData(); }, 5000);
  207. DdfectDataC();
  208. setInterval(function () { DdfectDataC(); }, 5000);
  209. });
  210. function DdfectDataC() {
  211. $.get("demo.ashx?m=defectc", function (data) {
  212. var json = JSON.parse(data);
  213. if (json["success"] == true) {
  214. var defect1 = parseFloat(json["rows"][0]["数量"]);
  215. var defect2 = parseFloat(json["rows"][1]["数量"]);
  216. var defect3 = parseFloat(json["rows"][2]["数量"]);
  217. var defectname1 = json["rows"][0]["缺陷名称"];
  218. var defectname2 = json["rows"][1]["缺陷名称"];
  219. var defectname3 = json["rows"][2]["缺陷名称"];
  220. window.DefectC.data.datasets[0].data = [defect1, defect2, defect3];
  221. window.DefectC.data.labels = [defectname1, defectname2, defectname3]
  222. window.DefectC.update();
  223. }
  224. });
  225. }
  226. function CLData() {
  227. $.get("demo.ashx?m=cl", function (data) {
  228. var json = JSON.parse(data);
  229. let a = [];
  230. let b = [];
  231. if (json["success"] == true) {
  232. var num = parseInt(json["rows"][0]["ROWNUM"]);
  233. for (var i = 0; i < num; i++)
  234. {
  235. a.push(parseFloat(json["rows"][i]["COUNT"]));
  236. b.push(json["rows"][i]["USERCODE"]);
  237. }
  238. window.DayCL.data.datasets[0].data = a;
  239. window.DayCL.data.labels = b;
  240. //var count1 = parseFloat(json["rows"][0]["COUNT"]);
  241. //var count2 = parseFloat(json["rows"][1]["COUNT"]);
  242. //var count3 = parseFloat(json["rows"][2]["COUNT"]);
  243. //var count4 = parseFloat(json["rows"][3]["COUNT"]);
  244. //var count5 = parseFloat(json["rows"][4]["COUNT"]);
  245. //var count6 = parseFloat(json["rows"][5]["COUNT"]);
  246. //var usercode1 = json["rows"][0]["USERCODE"];
  247. //var usercode2 = json["rows"][1]["USERCODE"];
  248. //var usercode3 = json["rows"][2]["USERCODE"];
  249. //var usercode4 = json["rows"][3]["USERCODE"];
  250. //var usercode5 = json["rows"][4]["USERCODE"];
  251. //var usercode6 = json["rows"][5]["USERCODE"];
  252. //window.DayCL.data.datasets[0].data = [count1, count2, count3, count4, count5, count6];
  253. //window.DayCL.data.labels = [usercode1, usercode2, usercode3, usercode4, usercode5, usercode6]
  254. window.DayCL.update();
  255. }
  256. });
  257. }
  258. function DdfectData() {
  259. $.get("demo.ashx?m=defect", function (data) {
  260. var json = JSON.parse(data);
  261. if (json["success"] == true) {
  262. let a = [];
  263. let b = [];
  264. if (json["success"] == true) {
  265. //var num = parseInt(json["rows"][0]["ROWNUM"]);
  266. var num = parseInt(json["rows"].length);
  267. for (var i = 0; i < num; i++) {
  268. a.push(parseInt(json["rows"][i]["数量"]));
  269. b.push(json["rows"][i]["缺陷名称"]);
  270. }
  271. window.DefectA.data.datasets[0].data = a;
  272. window.DefectA.data.labels = b;
  273. window.DefectA.update();
  274. }
  275. }
  276. });
  277. }
  278. function ZxData() {
  279. $.get("demo.ashx?m=zx", function (data) {
  280. var json = JSON.parse(data);
  281. if (json["success"] == true) {
  282. var BJ1 = parseFloat(json["rows"][0]["半检合格率"]);
  283. var BJ2 = parseFloat(json["rows"][1]["半检合格率"]);
  284. var BJ3 = parseFloat(json["rows"][2]["半检合格率"]);
  285. var BJ4 = parseFloat(json["rows"][3]["半检合格率"]);
  286. var BJ5 = parseFloat(json["rows"][4]["半检合格率"]);
  287. var BJ6 = parseFloat(json["rows"][5]["半检合格率"]);
  288. var BJ7 = parseFloat(json["rows"][6]["半检合格率"]);
  289. var BS1 = parseFloat(json["rows"][0]["本烧合格率"]);
  290. var BS2 = parseFloat(json["rows"][1]["本烧合格率"]);
  291. var BS3 = parseFloat(json["rows"][2]["本烧合格率"]);
  292. var BS4 = parseFloat(json["rows"][3]["本烧合格率"]);
  293. var BS5 = parseFloat(json["rows"][4]["本烧合格率"]);
  294. var BS6 = parseFloat(json["rows"][5]["本烧合格率"]);
  295. var BS7 = parseFloat(json["rows"][6]["本烧合格率"]);
  296. var day1 = parseFloat(json["rows"][0]["日期"]);
  297. var day2 = parseFloat(json["rows"][1]["日期"]);
  298. var day3 = parseFloat(json["rows"][2]["日期"]);
  299. var day4 = parseFloat(json["rows"][3]["日期"]);
  300. var day5 = parseFloat(json["rows"][4]["日期"]);
  301. var day6 = parseFloat(json["rows"][5]["日期"]);
  302. var day7 = parseFloat(json["rows"][6]["日期"]);
  303. window.DayZL.data.datasets[0].data = [BJ1, BJ2, BJ3, BJ4, BJ5, BJ6, BJ7];
  304. window.DayZL.data.datasets[1].data = [BS1, BS2, BS3, BS4, BS5, BS6, BS7];
  305. window.DayZL.data.labels = [day1, day2, day3, day4, day5, day6, day7];
  306. window.DayZL.update();
  307. }
  308. });
  309. }
  310. function timeUpdate() {
  311. loadData();
  312. }
  313. function loadData() {
  314. //成型各项趋势图
  315. //window.DayZL.data.datasets[0].data = [
  316. // randomScalingFactor(1) + 80,
  317. // randomScalingFactor(1) + 80,
  318. // randomScalingFactor(1) + 80,
  319. // randomScalingFactor(1) + 80,
  320. // randomScalingFactor(1) + 80,
  321. // randomScalingFactor(1) + 80,
  322. // randomScalingFactor(1) + 80
  323. //];
  324. //window.DayZL.data.datasets[1].data = [
  325. // randomScalingFactor(1) + 70,
  326. // randomScalingFactor(1) + 70,
  327. // randomScalingFactor(1) + 70,
  328. // randomScalingFactor(1) + 70,
  329. // randomScalingFactor(1) + 70,
  330. // randomScalingFactor(1) + 70,
  331. // randomScalingFactor(1) + 70
  332. //];
  333. //window.DayZL.update();
  334. //成型缺陷top5
  335. //window.DefectA.data.datasets[0].data = [
  336. // randomScalingFactor(8),
  337. // randomScalingFactor(8),
  338. // randomScalingFactor(8)
  339. //];
  340. //window.DefectA.update();
  341. //成检缺陷top5
  342. window.MonthCL.data.datasets[0].data = [
  343. randomScalingFactor(8),
  344. randomScalingFactor(8),
  345. randomScalingFactor(8)
  346. ];
  347. window.MonthCL.update();
  348. //产量计划达成
  349. window.MonthCL.data.datasets[0].data = [
  350. randomScalingFactor(1000),
  351. randomScalingFactor(1000)
  352. ];
  353. window.MonthCL.update();
  354. }
  355. function initData() {
  356. window.chartColors = {
  357. red: 'rgb(255, 99, 132)',
  358. orange: 'rgb(255, 159, 64)',
  359. yellow: 'rgb(255, 250, 86)',
  360. green: 'rgb(75, 192, 192)',
  361. blue: 'rgb(54, 162, 250)',
  362. purple: 'rgb(153, 102, 255)',
  363. grey: 'rgb(231,233,237)'
  364. };
  365. var color = Chart.helpers.color;
  366. window.randomScalingFactor = function (num) {
  367. return Math.round(Math.random() * num);
  368. }
  369. Chart.defaults.global.defaultFontColor = 'white';
  370. Chart.defaults.global.defaultFontSize = 18;
  371. Chart.defaults.global.legend.display = false;
  372. //成型各项趋势图=====================================
  373. window.configDayZL = {
  374. data: {
  375. labels: ["01", "02", "03", "04", "05", "06", "07"],
  376. datasets: [{
  377. label: "半检",
  378. backgroundColor: color(window.chartColors.red).alpha(0.35).rgbString(),
  379. borderColor: window.chartColors.red,
  380. borderWidth: 2,
  381. pointRadius: 15,
  382. data: [0, 0, 0, 0, 0, 0, 0],
  383. fill: false,
  384. }, {
  385. label: "一烧",
  386. fill: false,
  387. backgroundColor: color(window.chartColors.blue).alpha(0.35).rgbString(),
  388. borderColor: window.chartColors.blue,
  389. borderWidth: 2,
  390. pointRadius: 15,
  391. data: [0, 0, 0, 0, 0, 0, 0]
  392. }]
  393. },
  394. type: 'line',
  395. options: {
  396. responsive: true,
  397. legend: {
  398. display: true
  399. },
  400. title: {
  401. display: false,
  402. text: '质量统计'
  403. },
  404. tooltips: {
  405. mode: 'index',
  406. intersect: false,
  407. },
  408. hover: {
  409. mode: 'nearest',
  410. intersect: true
  411. },
  412. scales: {
  413. xAxes: [{
  414. display: true,
  415. scaleLabel: {
  416. display: false,
  417. labelString: ''
  418. }
  419. }],
  420. yAxes: [{
  421. display: true,
  422. scaleLabel: {
  423. display: false,
  424. labelString: 'Value'
  425. },
  426. ticks: {
  427. min: 50,
  428. stepSize: 10,
  429. max: 100
  430. }
  431. }]
  432. }
  433. }
  434. };
  435. var ctxDayZL = document.getElementById("canvasDayZL").getContext("2d");
  436. window.DayZL = new Chart(ctxDayZL, configDayZL);
  437. //===================================================
  438. //成型缺陷TOP5===========================================
  439. window.configDefectA = {
  440. data: {
  441. labels: ['1', '2', '3'],
  442. datasets: [{
  443. label: '工序',
  444. backgroundColor: [
  445. color(window.chartColors.red).alpha(0.35).rgbString(),
  446. color(window.chartColors.blue).alpha(0.35).rgbString(),
  447. color(window.chartColors.green).alpha(0.35).rgbString(),
  448. color(window.chartColors.orange).alpha(0.35).rgbString(),
  449. color(window.chartColors.purple).alpha(0.35).rgbString()
  450. ],
  451. fill: false,
  452. borderColor: [
  453. window.chartColors.red,
  454. window.chartColors.blue,
  455. window.chartColors.green,
  456. window.chartColors.orange,
  457. window.chartColors.purple
  458. ],
  459. borderWidth: 2,
  460. pointRadius: 30,
  461. data: [0, 0, 0]
  462. }]
  463. },
  464. type: 'pie',
  465. options: {
  466. legend: {
  467. display: true
  468. },
  469. title: {
  470. display: false,
  471. text: "甲班缺陷"
  472. },
  473. tooltips: {
  474. mode: 'point',
  475. intersect: false
  476. },
  477. responsive: true
  478. }
  479. };
  480. var ctxDefectA = document.getElementById("canvasDefectA").getContext("2d");
  481. window.DefectA = new Chart(ctxDefectA, configDefectA);
  482. //===================================================
  483. //成检工号产量柱状图=====================================
  484. window.canvasDayCL = {
  485. data: {
  486. labels: ["01", "02", "03", "04", "05", "06", "07"],
  487. datasets: [
  488. {
  489. label: "注浆量",
  490. fill: false,
  491. backgroundColor: color(window.chartColors.blue).alpha(0.6).rgbString(),
  492. borderColor: window.chartColors.blue,
  493. borderWidth: 2,
  494. pointRadius: 15,
  495. data: [0, 0, 0, 0, 0, 0, 0, 0]
  496. }
  497. ]
  498. },
  499. type: 'bar',
  500. options: {
  501. legend: {
  502. display: true
  503. },
  504. title: {
  505. display: true,
  506. text: ""
  507. },
  508. tooltips: {
  509. mode: 'point',
  510. intersect: false
  511. },
  512. responsive: true,
  513. scales: {
  514. xAxes: [{
  515. stacked: false
  516. }],
  517. yAxes: [{
  518. display: true,
  519. stacked: false,
  520. ticks: {
  521. min: 0,
  522. stepSize: 100,
  523. max: 500
  524. }
  525. }]
  526. }
  527. }
  528. };
  529. var ctxDayCL = document.getElementById("canvasDayCL").getContext("2d");
  530. window.DayCL = new Chart(ctxDayCL, canvasDayCL);
  531. //===================================================
  532. //成型缺陷TOP5===========================================
  533. window.canvasDefectC = {
  534. data: {
  535. labels: ['1', '2', '3'],
  536. datasets: [{
  537. label: '工序',
  538. backgroundColor: [
  539. color(window.chartColors.red).alpha(0.35).rgbString(),
  540. color(window.chartColors.blue).alpha(0.35).rgbString(),
  541. color(window.chartColors.green).alpha(0.35).rgbString(),
  542. color(window.chartColors.orange).alpha(0.35).rgbString(),
  543. color(window.chartColors.purple).alpha(0.35).rgbString()
  544. ],
  545. fill: false,
  546. borderColor: [
  547. window.chartColors.red,
  548. window.chartColors.blue,
  549. window.chartColors.green,
  550. window.chartColors.orange,
  551. window.chartColors.purple
  552. ],
  553. borderWidth: 2,
  554. pointRadius: 30,
  555. data: [0, 0, 0]
  556. }]
  557. },
  558. type: 'pie',
  559. options: {
  560. legend: {
  561. display: true
  562. },
  563. title: {
  564. display: false,
  565. text: "甲班缺陷"
  566. },
  567. tooltips: {
  568. mode: 'point',
  569. intersect: false
  570. },
  571. responsive: true
  572. }
  573. };
  574. var ctxDefectC = document.getElementById("canvasDefectC").getContext("2d");
  575. window.DefectC = new Chart(ctxDefectC, canvasDefectC);
  576. //===================================================
  577. }
  578. </script>
  579. <script src="/Plugins/chartjs-2.8.0/chart-2.8.min.js"></script>
  580. <script src="/Plugins/chartjs-2.8.0/chartjs-plugin-datalabels.js"></script>
  581. <script src="/Plugins/chartjs-2.8.0/utils.js"></script>
  582. <script src="/Plugins/circleChart/circleChart.min.js"></script>
  583. </body>
  584. </html>