demo.html 35 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703
  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小时产量曲线图-->
  24. <div style="width:1840px;height:200px;display:flex;flex-direction:row;">
  25. <div style="width: 100%; height: 200px;">
  26. <div style="color:white;font-size:20px;font-weight:600; text-align:center">每小时产量</div>
  27. <canvas id="canvasHourCL" style="-moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; height: 150px; width: 100%"></canvas>
  28. </div>
  29. </div>
  30. <!--7日产量和质量表格-->
  31. <div style="width:1840px;height:530px;display:flex;flex-direction:row;">
  32. <div style="width: 50%;height:530px;padding-right:20px;">
  33. <!--7日产量-->
  34. <table cellspacing="0" cellpadding="0" border="0" style="width:100%;">
  35. <tr class="tr_title_warning">
  36. <td colspan="9" style="color:white;">近7日产量</td>
  37. </tr>
  38. <tr class="tr_title_warning">
  39. <td>班组</td>
  40. <td>工序</td>
  41. <td>03-01</td>
  42. <td>03-02</td>
  43. <td>03-03</td>
  44. <td>03-04</td>
  45. <td>03-05</td>
  46. <td>03-06</td>
  47. <td>03-07</td>
  48. </tr>
  49. <tr class="tr_bg_light_warning" style="height:30px;">
  50. <td style="font-size: 18px; width: 11%" rowspan="3">甲班</td>
  51. <td style="font-size: 18px; width: 11%">入库数</td>
  52. <td style="font-size: 18px; width: 11%">1049</td>
  53. <td style="font-size: 18px; width: 11%">1314</td>
  54. <td style="font-size: 18px; width: 11%">1169</td>
  55. <td style="font-size: 18px; width: 11%">919</td>
  56. <td style="font-size: 18px; width: 11%">1160</td>
  57. <td style="font-size: 18px; width: 11%">1045</td>
  58. <td style="font-size: 18px; width: 11%">1045</td>
  59. </tr>
  60. <tr class="tr_bg_light_warning" style="height:30px;">
  61. <td style="font-size: 18px; width: 11%">登窑数</td>
  62. <td style="font-size: 18px; width: 11%">892</td>
  63. <td style="font-size: 18px; width: 11%">828</td>
  64. <td style="font-size: 18px; width: 11%">955</td>
  65. <td style="font-size: 18px; width: 11%">1115</td>
  66. <td style="font-size: 18px; width: 11%">1172</td>
  67. <td style="font-size: 18px; width: 11%">1230</td>
  68. <td style="font-size: 18px; width: 11%">1230</td>
  69. </tr>
  70. <tr class="tr_bg_dark_warning" style="height:30px;">
  71. <td style="font-size: 18px; width: 11%">窑车数</td>
  72. <td style="font-size: 18px; width: 11%">1049</td>
  73. <td style="font-size: 18px; width: 11%">1314</td>
  74. <td style="font-size: 18px; width: 11%">1169</td>
  75. <td style="font-size: 18px; width: 11%">919</td>
  76. <td style="font-size: 18px; width: 11%">1160</td>
  77. <td style="font-size: 18px; width: 11%">1045</td>
  78. <td style="font-size: 18px; width: 11%">1045</td>
  79. </tr>
  80. <tr class="tr_bg_light_warning" style="height:30px;">
  81. <td style="font-size: 18px; width: 11%" rowspan="3">乙班</td>
  82. <td style="font-size: 18px; width: 11%">入库数</td>
  83. <td style="font-size: 18px; width: 11%">1049</td>
  84. <td style="font-size: 18px; width: 11%">1314</td>
  85. <td style="font-size: 18px; width: 11%">1169</td>
  86. <td style="font-size: 18px; width: 11%">919</td>
  87. <td style="font-size: 18px; width: 11%">1160</td>
  88. <td style="font-size: 18px; width: 11%">1045</td>
  89. <td style="font-size: 18px; width: 11%">1045</td>
  90. </tr>
  91. <tr class="tr_bg_light_warning" style="height:30px;">
  92. <td style="font-size: 18px; width: 11%">登窑数</td>
  93. <td style="font-size: 18px; width: 11%">892</td>
  94. <td style="font-size: 18px; width: 11%">828</td>
  95. <td style="font-size: 18px; width: 11%">955</td>
  96. <td style="font-size: 18px; width: 11%">1115</td>
  97. <td style="font-size: 18px; width: 11%">1172</td>
  98. <td style="font-size: 18px; width: 11%">1230</td>
  99. <td style="font-size: 18px; width: 11%">1230</td>
  100. </tr>
  101. <tr class="tr_bg_dark_warning" style="height:30px;">
  102. <td style="font-size: 18px; width: 11%">窑车数</td>
  103. <td style="font-size: 18px; width: 11%">1049</td>
  104. <td style="font-size: 18px; width: 11%">1314</td>
  105. <td style="font-size: 18px; width: 11%">1169</td>
  106. <td style="font-size: 18px; width: 11%">919</td>
  107. <td style="font-size: 18px; width: 11%">1160</td>
  108. <td style="font-size: 18px; width: 11%">1045</td>
  109. <td style="font-size: 18px; width: 11%">1045</td>
  110. </tr>
  111. <tr class="tr_bg_light_warning" style="height:30px;">
  112. <td style="font-size: 18px; width: 11%" rowspan="3">整体</td>
  113. <td style="font-size: 18px; width: 11%">入库数</td>
  114. <td style="font-size: 18px; width: 11%">1049</td>
  115. <td style="font-size: 18px; width: 11%">1314</td>
  116. <td style="font-size: 18px; width: 11%">1169</td>
  117. <td style="font-size: 18px; width: 11%">919</td>
  118. <td style="font-size: 18px; width: 11%">1160</td>
  119. <td style="font-size: 18px; width: 11%">1045</td>
  120. <td style="font-size: 18px; width: 11%">1045</td>
  121. </tr>
  122. <tr class="tr_bg_light_warning" style="height:30px;">
  123. <td style="font-size: 18px; width: 11%">登窑数</td>
  124. <td style="font-size: 18px; width: 11%">892</td>
  125. <td style="font-size: 18px; width: 11%">828</td>
  126. <td style="font-size: 18px; width: 11%">955</td>
  127. <td style="font-size: 18px; width: 11%">1115</td>
  128. <td style="font-size: 18px; width: 11%">1172</td>
  129. <td style="font-size: 18px; width: 11%">1230</td>
  130. <td style="font-size: 18px; width: 11%">1230</td>
  131. </tr>
  132. <tr class="tr_bg_dark_warning" style="height:30px;">
  133. <td style="font-size: 18px; width: 11%">窑车数</td>
  134. <td style="font-size: 18px; width: 11%">1049</td>
  135. <td style="font-size: 18px; width: 11%">1314</td>
  136. <td style="font-size: 18px; width: 11%">1169</td>
  137. <td style="font-size: 18px; width: 11%">919</td>
  138. <td style="font-size: 18px; width: 11%">1160</td>
  139. <td style="font-size: 18px; width: 11%">1045</td>
  140. <td style="font-size: 18px; width: 11%">1045</td>
  141. </tr>
  142. </table>
  143. </div>
  144. <div style="width: 50%;height:530px;">
  145. <!--7日质量-->
  146. <table cellspacing="0" cellpadding="0" border="0" style="width:100%;">
  147. <tr class="tr_title_warning">
  148. <td colspan="9" style="color:white;">近7日质量</td>
  149. </tr>
  150. <tr class="tr_title_warning">
  151. <td>班组</td>
  152. <td>工序</td>
  153. <td>03-01</td>
  154. <td>03-02</td>
  155. <td>03-03</td>
  156. <td>03-04</td>
  157. <td>03-05</td>
  158. <td>03-06</td>
  159. <td>03-07</td>
  160. </tr>
  161. <tr class="tr_bg_light_warning" style="height:30px;">
  162. <td style="font-size: 18px; width: 11%" rowspan="3">甲班</td>
  163. <td style="font-size: 18px; width: 11%">缺陷数</td>
  164. <td style="font-size: 18px; width: 11%">62</td>
  165. <td style="font-size: 18px; width: 11%">90</td>
  166. <td style="font-size: 18px; width: 11%">79</td>
  167. <td style="font-size: 18px; width: 11%">79</td>
  168. <td style="font-size: 18px; width: 11%">55</td>
  169. <td style="font-size: 18px; width: 11%">54</td>
  170. <td style="font-size: 18px; width: 11%">55</td>
  171. </tr>
  172. <tr class="tr_bg_light_warning" style="height:30px;">
  173. <td style="font-size: 18px; width: 11%">出窑数</td>
  174. <td style="font-size: 18px; width: 11%">1010</td>
  175. <td style="font-size: 18px; width: 11%">1383</td>
  176. <td style="font-size: 18px; width: 11%">1063</td>
  177. <td style="font-size: 18px; width: 11%">987</td>
  178. <td style="font-size: 18px; width: 11%">950</td>
  179. <td style="font-size: 18px; width: 11%">1048</td>
  180. <td style="font-size: 18px; width: 11%">1230</td>
  181. </tr>
  182. <tr class="tr_bg_dark_warning" style="height:30px;">
  183. <td style="font-size: 18px; width: 11%">优等率</td>
  184. <td style="font-size: 18px; width: 11%">93.86%</td>
  185. <td style="font-size: 18px; width: 11%">93.49%</td>
  186. <td style="font-size: 18px; width: 11%">92.57%</td>
  187. <td style="font-size: 18px; width: 11%">93.00%</td>
  188. <td style="font-size: 18px; width: 11%">94.21%</td>
  189. <td style="font-size: 18px; width: 11%">94.85%</td>
  190. <td style="font-size: 18px; width: 11%">93.86%</td>
  191. </tr>
  192. <tr class="tr_bg_light_warning" style="height:30px;">
  193. <td style="font-size: 18px; width: 11%" rowspan="3">乙班</td>
  194. <td style="font-size: 18px; width: 11%">缺陷数</td>
  195. <td style="font-size: 18px; width: 11%">62</td>
  196. <td style="font-size: 18px; width: 11%">90</td>
  197. <td style="font-size: 18px; width: 11%">79</td>
  198. <td style="font-size: 18px; width: 11%">79</td>
  199. <td style="font-size: 18px; width: 11%">55</td>
  200. <td style="font-size: 18px; width: 11%">54</td>
  201. <td style="font-size: 18px; width: 11%">55</td>
  202. </tr>
  203. <tr class="tr_bg_light_warning" style="height:30px;">
  204. <td style="font-size: 18px; width: 11%">出窑数</td>
  205. <td style="font-size: 18px; width: 11%">1010</td>
  206. <td style="font-size: 18px; width: 11%">1383</td>
  207. <td style="font-size: 18px; width: 11%">1063</td>
  208. <td style="font-size: 18px; width: 11%">987</td>
  209. <td style="font-size: 18px; width: 11%">950</td>
  210. <td style="font-size: 18px; width: 11%">1048</td>
  211. <td style="font-size: 18px; width: 11%">1230</td>
  212. </tr>
  213. <tr class="tr_bg_dark_warning" style="height:30px;">
  214. <td style="font-size: 18px; width: 11%">优等率</td>
  215. <td style="font-size: 18px; width: 11%">93.86%</td>
  216. <td style="font-size: 18px; width: 11%">93.49%</td>
  217. <td style="font-size: 18px; width: 11%">92.57%</td>
  218. <td style="font-size: 18px; width: 11%">93.00%</td>
  219. <td style="font-size: 18px; width: 11%">94.21%</td>
  220. <td style="font-size: 18px; width: 11%">94.85%</td>
  221. <td style="font-size: 18px; width: 11%">93.86%</td>
  222. </tr>
  223. <tr class="tr_bg_light_warning" style="height:30px;">
  224. <td style="font-size: 18px; width: 11%" rowspan="3">整体</td>
  225. <td style="font-size: 18px; width: 11%">缺陷数</td>
  226. <td style="font-size: 18px; width: 11%">62</td>
  227. <td style="font-size: 18px; width: 11%">90</td>
  228. <td style="font-size: 18px; width: 11%">79</td>
  229. <td style="font-size: 18px; width: 11%">79</td>
  230. <td style="font-size: 18px; width: 11%">55</td>
  231. <td style="font-size: 18px; width: 11%">54</td>
  232. <td style="font-size: 18px; width: 11%">55</td>
  233. </tr>
  234. <tr class="tr_bg_light_warning" style="height:30px;">
  235. <td style="font-size: 18px; width: 11%">出窑数</td>
  236. <td style="font-size: 18px; width: 11%">1010</td>
  237. <td style="font-size: 18px; width: 11%">1383</td>
  238. <td style="font-size: 18px; width: 11%">1063</td>
  239. <td style="font-size: 18px; width: 11%">987</td>
  240. <td style="font-size: 18px; width: 11%">950</td>
  241. <td style="font-size: 18px; width: 11%">1048</td>
  242. <td style="font-size: 18px; width: 11%">1230</td>
  243. </tr>
  244. <tr class="tr_bg_dark_warning" style="height:30px;">
  245. <td style="font-size: 18px; width: 11%">优等率</td>
  246. <td style="font-size: 18px; width: 11%">93.86%</td>
  247. <td style="font-size: 18px; width: 11%">93.49%</td>
  248. <td style="font-size: 18px; width: 11%">92.57%</td>
  249. <td style="font-size: 18px; width: 11%">93.00%</td>
  250. <td style="font-size: 18px; width: 11%">94.21%</td>
  251. <td style="font-size: 18px; width: 11%">94.85%</td>
  252. <td style="font-size: 18px; width: 11%">93.86%</td>
  253. </tr>
  254. </table>
  255. </div>
  256. </div>
  257. <!--缺陷统计-->
  258. <div style="width:1840px;height:230px;display:flex;flex-direction:row;">
  259. <div style="width: 25%; height: 230px;">
  260. <div style="color:white;font-size:20px;font-weight:600; text-align:center">甲班缺陷(今日TOP3)</div>
  261. <canvas id="canvasDefectA" style="-moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; height: 200px; width: 100%"></canvas>
  262. </div>
  263. <div style="width: 25%; height: 230px;">
  264. <div style="color:white;font-size:20px;font-weight:600; text-align:center">乙班缺陷(今日TOP3)</div>
  265. <canvas id="canvasDefectB" style="-moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; height: 200px; width: 100%"></canvas>
  266. </div>
  267. <div style="width: 25%; height: 230px;">
  268. <div style="color:white;font-size:20px;font-weight:600; text-align:center">质量统计(7日)</div>
  269. <canvas id="canvasDayZL" style="-moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; height: 200px; width: 100%"></canvas>
  270. </div>
  271. <div style="width: 25%; height: 230px;">
  272. <div style="color:white;font-size:20px;font-weight:600; text-align:center">产量计划达成(月)</div>
  273. <canvas id="canvasMonthCL" style="-moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; height: 200px; width: 100%"></canvas>
  274. </div>
  275. </div>
  276. </div>
  277. </div>
  278. <script>
  279. $(document).ready(function () {
  280. initData();
  281. doGetData = setInterval(function () { timeUpdate(); }, 2000);
  282. });
  283. function timeUpdate() {
  284. loadData();
  285. }
  286. function loadData() {
  287. //24小时产量
  288. window.HourCL.data.datasets[0].data = [
  289. randomScalingFactor(8) + 5,
  290. randomScalingFactor(8) + 5,
  291. randomScalingFactor(8) + 5,
  292. randomScalingFactor(8) + 5,
  293. randomScalingFactor(8) + 5,
  294. randomScalingFactor(8) + 5,
  295. randomScalingFactor(8) + 5,
  296. randomScalingFactor(8) + 5,
  297. randomScalingFactor(8) + 5,
  298. randomScalingFactor(8) + 5,
  299. randomScalingFactor(8) + 5,
  300. randomScalingFactor(8) + 5,
  301. randomScalingFactor(8) + 5,
  302. randomScalingFactor(8) + 5,
  303. randomScalingFactor(8) + 5,
  304. randomScalingFactor(8) + 5,
  305. randomScalingFactor(8) + 5,
  306. randomScalingFactor(8) + 5,
  307. randomScalingFactor(8) + 5,
  308. randomScalingFactor(8) + 5,
  309. randomScalingFactor(8) + 5,
  310. randomScalingFactor(8) + 5,
  311. randomScalingFactor(8) + 5,
  312. randomScalingFactor(8) + 5
  313. ];
  314. window.HourCL.data.datasets[1].data = [
  315. randomScalingFactor(8),
  316. randomScalingFactor(8),
  317. randomScalingFactor(8),
  318. randomScalingFactor(8),
  319. randomScalingFactor(8),
  320. randomScalingFactor(8),
  321. randomScalingFactor(8),
  322. randomScalingFactor(8),
  323. randomScalingFactor(8),
  324. randomScalingFactor(8),
  325. randomScalingFactor(8),
  326. randomScalingFactor(8),
  327. randomScalingFactor(8),
  328. randomScalingFactor(8),
  329. randomScalingFactor(8),
  330. randomScalingFactor(8),
  331. randomScalingFactor(8),
  332. randomScalingFactor(8),
  333. randomScalingFactor(8),
  334. randomScalingFactor(8),
  335. randomScalingFactor(8),
  336. randomScalingFactor(8),
  337. randomScalingFactor(8),
  338. randomScalingFactor(8)
  339. ];
  340. window.HourCL.update();
  341. //甲乙班缺陷top3
  342. //window.canvasDefectA.data.labels = ['', '', '', '', ''];
  343. window.DefectA.data.datasets[0].data = [
  344. randomScalingFactor(8),
  345. randomScalingFactor(8),
  346. randomScalingFactor(8)
  347. ];
  348. window.DefectA.update();
  349. window.DefectB.data.datasets[0].data = [
  350. randomScalingFactor(8),
  351. randomScalingFactor(8),
  352. randomScalingFactor(8)
  353. ];
  354. window.DefectB.update();
  355. //质量统计
  356. window.DayZL.data.datasets[0].data = [
  357. randomScalingFactor(30) + 70,
  358. randomScalingFactor(30) + 70,
  359. randomScalingFactor(30) + 70,
  360. randomScalingFactor(30) + 70,
  361. randomScalingFactor(30) + 70,
  362. randomScalingFactor(30) + 70,
  363. randomScalingFactor(30) + 70
  364. ];
  365. window.DayZL.data.datasets[1].data = [
  366. randomScalingFactor(10) + 60,
  367. randomScalingFactor(10) + 60,
  368. randomScalingFactor(10) + 60,
  369. randomScalingFactor(10) + 60,
  370. randomScalingFactor(10) + 60,
  371. randomScalingFactor(10) + 60,
  372. randomScalingFactor(10) + 60
  373. ];
  374. window.DayZL.update();
  375. //产量计划达成
  376. window.MonthCL.data.datasets[0].data = [
  377. randomScalingFactor(1000),
  378. randomScalingFactor(1000)
  379. ];
  380. window.MonthCL.update();
  381. }
  382. function initData() {
  383. window.chartColors = {
  384. red: 'rgb(255, 99, 132)',
  385. orange: 'rgb(255, 159, 64)',
  386. yellow: 'rgb(255, 250, 86)',
  387. green: 'rgb(75, 192, 192)',
  388. blue: 'rgb(54, 162, 250)',
  389. purple: 'rgb(153, 102, 255)',
  390. grey: 'rgb(231,233,237)'
  391. };
  392. var color = Chart.helpers.color;
  393. window.randomScalingFactor = function (num) {
  394. return Math.round(Math.random() * num);
  395. }
  396. Chart.defaults.global.defaultFontColor = 'white';
  397. Chart.defaults.global.defaultFontSize = 18;
  398. Chart.defaults.global.legend.display = false;
  399. //每小时产量=========================================
  400. window.configHourCL = {
  401. data: {
  402. labels: ["00-01", "01-02", "02-03", "03-04", "04-05", "05-06", "06-07", "07-08", "08-09", "09-10", "10-11", "11-12", "12-13", "13-14", "14-15", "15-16", "16-17", "17-18", "18-19", "19-20", "20-21", "21-22", "22-23", "23-00"],
  403. datasets: [{
  404. label: "甲班产量",
  405. backgroundColor: color(window.chartColors.orange).alpha(0.6).rgbString(),
  406. borderColor: window.chartColors.orange,
  407. borderWidth: 2,
  408. pointRadius: 15,
  409. data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  410. fill: false,
  411. }, {
  412. label: "乙班产量",
  413. fill: false,
  414. backgroundColor: color(window.chartColors.blue).alpha(0.6).rgbString(),
  415. borderColor: window.chartColors.blue,
  416. borderWidth: 2,
  417. pointRadius: 15,
  418. data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
  419. }]
  420. },
  421. type: 'line',
  422. options: {
  423. responsive: true,
  424. legend: {
  425. display: true
  426. },
  427. title: {
  428. display: false,
  429. text: '每小时产量'
  430. },
  431. tooltips: {
  432. mode: 'index',
  433. intersect: false,
  434. },
  435. hover: {
  436. mode: 'nearest',
  437. intersect: true
  438. },
  439. scales: {
  440. xAxes: [{
  441. display: true,
  442. scaleLabel: {
  443. display: false,
  444. labelString: ''
  445. }
  446. }],
  447. yAxes: [{
  448. display: true,
  449. scaleLabel: {
  450. display: false,
  451. labelString: 'Value'
  452. }
  453. }]
  454. }
  455. }
  456. };
  457. var ctxHourCL = document.getElementById("canvasHourCL").getContext("2d");
  458. window.HourCL = new Chart(ctxHourCL, configHourCL);
  459. //===================================================
  460. //甲班缺陷===========================================
  461. window.configDefectA = {
  462. data: {
  463. labels: ['缺陷1', '缺陷2', '缺陷3'],
  464. datasets: [{
  465. label: '工序',
  466. backgroundColor: [
  467. color(window.chartColors.red).alpha(0.35).rgbString(),
  468. color(window.chartColors.blue).alpha(0.35).rgbString(),
  469. color(window.chartColors.green).alpha(0.35).rgbString(),
  470. color(window.chartColors.orange).alpha(0.35).rgbString(),
  471. color(window.chartColors.purple).alpha(0.35).rgbString()
  472. ],
  473. fill: false,
  474. borderColor: [
  475. window.chartColors.red,
  476. window.chartColors.blue,
  477. window.chartColors.green,
  478. window.chartColors.orange,
  479. window.chartColors.purple
  480. ],
  481. borderWidth: 2,
  482. pointRadius: 30,
  483. data: [0, 0, 0]
  484. }]
  485. },
  486. type: 'pie',
  487. options: {
  488. legend: {
  489. display: true
  490. },
  491. title: {
  492. display: false,
  493. text: "甲班缺陷"
  494. },
  495. tooltips: {
  496. mode: 'point',
  497. intersect: false
  498. },
  499. responsive: true
  500. }
  501. };
  502. var ctxDefectA = document.getElementById("canvasDefectA").getContext("2d");
  503. window.DefectA = new Chart(ctxDefectA, configDefectA);
  504. //===================================================
  505. //甲班缺陷===========================================
  506. window.configDefectB = {
  507. data: {
  508. labels: ['缺陷1', '缺陷2', '缺陷3'],
  509. datasets: [{
  510. label: '工序',
  511. backgroundColor: [
  512. color(window.chartColors.red).alpha(0.35).rgbString(),
  513. color(window.chartColors.blue).alpha(0.35).rgbString(),
  514. color(window.chartColors.green).alpha(0.35).rgbString(),
  515. color(window.chartColors.orange).alpha(0.35).rgbString(),
  516. color(window.chartColors.purple).alpha(0.35).rgbString()
  517. ],
  518. fill: false,
  519. borderColor: [
  520. window.chartColors.red,
  521. window.chartColors.blue,
  522. window.chartColors.green,
  523. window.chartColors.orange,
  524. window.chartColors.purple
  525. ],
  526. borderWidth: 2,
  527. pointRadius: 30,
  528. data: [0, 0, 0]
  529. }]
  530. },
  531. type: 'pie',
  532. options: {
  533. legend: {
  534. display: true
  535. },
  536. title: {
  537. display: false,
  538. text: "甲班缺陷"
  539. },
  540. tooltips: {
  541. mode: 'point',
  542. intersect: false
  543. },
  544. responsive: true
  545. }
  546. };
  547. var ctxDefectB = document.getElementById("canvasDefectB").getContext("2d");
  548. window.DefectB = new Chart(ctxDefectB, configDefectB);
  549. //===================================================
  550. //质量统计=========================================
  551. window.configDayZL = {
  552. data: {
  553. labels: ["01", "02", "03", "04", "05", "06", "07"],
  554. datasets: [{
  555. label: "甲班合格率",
  556. backgroundColor: color(window.chartColors.orange).alpha(0.6).rgbString(),
  557. borderColor: window.chartColors.orange,
  558. borderWidth: 2,
  559. pointRadius: 15,
  560. data: [0, 0, 0, 0, 0, 0, 0],
  561. fill: false,
  562. }, {
  563. label: "乙班合格率",
  564. fill: false,
  565. backgroundColor: color(window.chartColors.blue).alpha(0.6).rgbString(),
  566. borderColor: window.chartColors.blue,
  567. borderWidth: 2,
  568. pointRadius: 15,
  569. data: [0, 0, 0, 0, 0, 0, 0]
  570. }]
  571. },
  572. type: 'line',
  573. options: {
  574. responsive: true,
  575. legend: {
  576. display: true
  577. },
  578. title: {
  579. display: false,
  580. text: '质量统计'
  581. },
  582. tooltips: {
  583. mode: 'index',
  584. intersect: false,
  585. },
  586. hover: {
  587. mode: 'nearest',
  588. intersect: true
  589. },
  590. scales: {
  591. xAxes: [{
  592. display: true,
  593. scaleLabel: {
  594. display: false,
  595. labelString: ''
  596. }
  597. }],
  598. yAxes: [{
  599. display: true,
  600. scaleLabel: {
  601. display: false,
  602. labelString: 'Value'
  603. },
  604. ticks: {
  605. min: 40,
  606. stepSize: 20,
  607. max: 100
  608. }
  609. }]
  610. }
  611. }
  612. };
  613. var ctxDayZL = document.getElementById("canvasDayZL").getContext("2d");
  614. window.DayZL = new Chart(ctxDayZL, configDayZL);
  615. //===================================================
  616. //甲班缺陷===========================================
  617. window.configMonthCL = {
  618. data: {
  619. labels: ['实际产量', '目标产量'],
  620. datasets: [{
  621. label: '工序',
  622. backgroundColor: [
  623. color(window.chartColors.red).alpha(0.35).rgbString(),
  624. color(window.chartColors.blue).alpha(0.35).rgbString(),
  625. color(window.chartColors.green).alpha(0.35).rgbString(),
  626. color(window.chartColors.orange).alpha(0.35).rgbString(),
  627. color(window.chartColors.purple).alpha(0.35).rgbString()
  628. ],
  629. fill: false,
  630. borderColor: [
  631. window.chartColors.red,
  632. window.chartColors.blue,
  633. window.chartColors.green,
  634. window.chartColors.orange,
  635. window.chartColors.purple
  636. ],
  637. borderWidth: 2,
  638. pointRadius: 30,
  639. data: [0, 0]
  640. }]
  641. },
  642. type: 'doughnut',
  643. options: {
  644. legend: {
  645. display: true
  646. },
  647. title: {
  648. display: false,
  649. text: ""
  650. },
  651. tooltips: {
  652. mode: 'point',
  653. intersect: false
  654. },
  655. responsive: true
  656. }
  657. };
  658. var ctxMonthCL = document.getElementById("canvasMonthCL").getContext("2d");
  659. window.MonthCL = new Chart(ctxMonthCL, configMonthCL);
  660. //===================================================
  661. }
  662. </script>
  663. <script src="/Plugins/chartjs-2.8.0/chart-2.8.min.js"></script>
  664. <script src="/Plugins/chartjs-2.8.0/chartjs-plugin-datalabels.js"></script>
  665. <script src="/Plugins/chartjs-2.8.0/utils.js"></script>
  666. <script src="/Plugins/circleChart/circleChart.min.js"></script>
  667. </body>
  668. </html>