demo.html 35 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812
  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">
  18. 功能看板&nbsp;&nbsp;<span class="box_title_arrow">>>></span>
  19. </div>
  20. <div class="box_body" style="display: flex; flex-direction: column;">
  21. <!--测漏气-->
  22. <div style="width:1840px;height:480px;display:flex;flex-direction:row;">
  23. <div style="width: 920px; height: 480px; padding-right: 20px; display: flex; flex-direction: row; ">
  24. <table cellspacing="0" cellpadding="0" border="0" style="width:100%;">
  25. <tr class="tr_title_warning">
  26. <td colspan="9" style="color:white;">测漏气产量合格率</td>
  27. </tr>
  28. <tr class="tr_title_warning">
  29. <td>测漏气线</td>
  30. <td>日生产量</td>
  31. <td>日合格数</td>
  32. <td>日合格率</td>
  33. </tr>
  34. <tr class="tr_bg_light_warning" style="height:30px;">
  35. <td style="font-size: 18px; width: 11%">1</td>
  36. <td style="font-size: 18px; width: 11%">1314</td>
  37. <td style="font-size: 18px; width: 11%">1169</td>
  38. <td style="font-size: 18px; width: 11%">80%</td>
  39. </tr>
  40. <tr class="tr_bg_light_warning" style="height:30px;">
  41. <td style="font-size: 18px; width: 11%">2</td>
  42. <td style="font-size: 18px; width: 11%">1314</td>
  43. <td style="font-size: 18px; width: 11%">1169</td>
  44. <td style="font-size: 18px; width: 11%">80%</td>
  45. </tr>
  46. <tr class="tr_bg_light_warning" style="height:30px;">
  47. <td style="font-size: 18px; width: 11%">3</td>
  48. <td style="font-size: 18px; width: 11%">1314</td>
  49. <td style="font-size: 18px; width: 11%">1169</td>
  50. <td style="font-size: 18px; width: 11%">80%</td>
  51. </tr>
  52. <tr class="tr_bg_light_warning" style="height:30px;">
  53. <td style="font-size: 18px; width: 11%">4</td>
  54. <td style="font-size: 18px; width: 11%">1314</td>
  55. <td style="font-size: 18px; width: 11%">1169</td>
  56. <td style="font-size: 18px; width: 11%">80%</td>
  57. <tr class="tr_bg_light_warning" style="height:30px;">
  58. <td style="font-size: 18px; width: 11%">5</td>
  59. <td style="font-size: 18px; width: 11%">1314</td>
  60. <td style="font-size: 18px; width: 11%">1169</td>
  61. <td style="font-size: 18px; width: 11%">80%</td>
  62. </tr>
  63. <tr class="tr_bg_light_warning" style="height:30px;">
  64. <td style="font-size: 18px; width: 11%">6</td>
  65. <td style="font-size: 18px; width: 11%">1314</td>
  66. <td style="font-size: 18px; width: 11%">1169</td>
  67. <td style="font-size: 18px; width: 11%">80%</td>
  68. </tr>
  69. <tr class="tr_bg_light_warning" style="height:30px;">
  70. <td style="font-size: 18px; width: 11%">7</td>
  71. <td style="font-size: 18px; width: 11%">1314</td>
  72. <td style="font-size: 18px; width: 11%">1169</td>
  73. <td style="font-size: 18px; width: 11%">80%</td>
  74. </tr>
  75. <tr class="tr_bg_light_warning" style="height:30px;">
  76. <td style="font-size: 18px; width: 11%">8</td>
  77. <td style="font-size: 18px; width: 11%">1314</td>
  78. <td style="font-size: 18px; width: 11%">1169</td>
  79. <td style="font-size: 18px; width: 11%">80%</td>
  80. </tr>
  81. </table>
  82. </div>
  83. <div style="width: 920px; height: 480px; padding-right: 20px; display: flex; flex-direction: column; ">
  84. <div style="width: 100%; height: 480px; padding-right: 20px; display: flex; flex-direction: row; ">
  85. <div style="width: 25%; height: 250px;">
  86. <div style="color:white;font-size:20px;font-weight:600; text-align:center">测漏气1</div>
  87. <canvas id="canvasDefectA1" style="-moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; height: 200px; width: 100%"></canvas>
  88. </div>
  89. <div style="width: 25%; height: 250px;">
  90. <div style="color:white;font-size:20px;font-weight:600; text-align:center">测漏气2</div>
  91. <canvas id="canvasDefectA2" style="-moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; height: 200px; width: 100%"></canvas>
  92. </div>
  93. <div style="width: 25%; height: 250px;">
  94. <div style="color:white;font-size:20px;font-weight:600; text-align:center">测漏气3</div>
  95. <canvas id="canvasDefectA3" style="-moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; height: 200px; width: 100%"></canvas>
  96. </div>
  97. <div style="width: 25%; height: 250px;">
  98. <div style="color:white;font-size:20px;font-weight:600; text-align:center">测漏气4</div>
  99. <canvas id="canvasDefectA4" style="-moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; height: 200px; width: 100%"></canvas>
  100. </div>
  101. </div>
  102. <div style="width: 100%; height: 480px; padding-right: 20px; display: flex; flex-direction: row; ">
  103. <div style="width: 25%; height: 250px;">
  104. <div style="color:white;font-size:20px;font-weight:600; text-align:center">测漏气5</div>
  105. <canvas id="canvasDefectA5" 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: 250px;">
  108. <div style="color:white;font-size:20px;font-weight:600; text-align:center">测漏气6</div>
  109. <canvas id="canvasDefectA6" style="-moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; height: 200px; width: 100%"></canvas>
  110. </div>
  111. <div style="width: 25%; height: 250px;">
  112. <div style="color:white;font-size:20px;font-weight:600; text-align:center">测漏气7</div>
  113. <canvas id="canvasDefectA7" style="-moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; height: 200px; width: 100%"></canvas>
  114. </div>
  115. <div style="width: 25%; height: 250px;">
  116. <div style="color:white;font-size:20px;font-weight:600; text-align:center">测漏气8</div>
  117. <canvas id="canvasDefectA8" style="-moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; height: 200px; width: 100%"></canvas>
  118. </div>
  119. </div>
  120. </div>
  121. </div>
  122. <!--试水-->
  123. <div style="width: 1840px; height: 480px; display: flex; flex-direction: row;">
  124. <div style="width: 920px; height: 480px; padding-right: 20px; display: flex; flex-direction: row; ">
  125. <table cellspacing="0" cellpadding="0" border="0" style="width:100%;">
  126. <tr class="tr_title_warning">
  127. <td colspan="9" style="color:white;">试水产量合格率</td>
  128. </tr>
  129. <tr class="tr_title_warning">
  130. <td>试水线号</td>
  131. <td>日生产量</td>
  132. <td>日合格数</td>
  133. <td>日合格率</td>
  134. </tr>
  135. <tr class="tr_bg_light_warning" style="height:30px;">
  136. <td style="font-size: 18px; width: 11%">1</td>
  137. <td style="font-size: 18px; width: 11%">1314</td>
  138. <td style="font-size: 18px; width: 11%">1169</td>
  139. <td style="font-size: 18px; width: 11%">80%</td>
  140. </tr>
  141. <tr class="tr_bg_light_warning" style="height:30px;">
  142. <td style="font-size: 18px; width: 11%">2</td>
  143. <td style="font-size: 18px; width: 11%">1314</td>
  144. <td style="font-size: 18px; width: 11%">1169</td>
  145. <td style="font-size: 18px; width: 11%">80%</td>
  146. </tr>
  147. <tr class="tr_bg_light_warning" style="height:30px;">
  148. <td style="font-size: 18px; width: 11%">3</td>
  149. <td style="font-size: 18px; width: 11%">1314</td>
  150. <td style="font-size: 18px; width: 11%">1169</td>
  151. <td style="font-size: 18px; width: 11%">80%</td>
  152. </tr>
  153. <tr class="tr_bg_light_warning" style="height:30px;">
  154. <td style="font-size: 18px; width: 11%">4</td>
  155. <td style="font-size: 18px; width: 11%">1314</td>
  156. <td style="font-size: 18px; width: 11%">1169</td>
  157. <td style="font-size: 18px; width: 11%">80%</td>
  158. </tr>
  159. </table>
  160. </div>
  161. <div style="width: 920px; height: 480px; padding-right: 20px; display: flex; flex-direction: column; ">
  162. <div style="width: 100%; height: 480px; padding-right: 20px; display: flex; flex-direction: row; ">
  163. <div style="width: 50%; height: 250px;">
  164. <div style="color:white;font-size:20px;font-weight:600; text-align:center">试水1</div>
  165. <canvas id="canvasDefectB1" style="-moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; height: 200px; width: 100%"></canvas>
  166. </div>
  167. <div style="width: 50%; height: 250px;">
  168. <div style="color:white;font-size:20px;font-weight:600; text-align:center">试水2</div>
  169. <canvas id="canvasDefectB2" style="-moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; height: 200px; width: 100%"></canvas>
  170. </div>
  171. </div>
  172. <div style="width: 100%; height: 480px; padding-right: 20px; display: flex; flex-direction: row; ">
  173. <div style="width: 50%; height: 250px;">
  174. <div style="color:white;font-size:20px;font-weight:600; text-align:center">试水3</div>
  175. <canvas id="canvasDefectB3" style="-moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; height: 200px; width: 100%"></canvas>
  176. </div>
  177. <div style="width: 50%; height: 250px;">
  178. <div style="color:white;font-size:20px;font-weight:600; text-align:center">试水4</div>
  179. <canvas id="canvasDefectB4" style="-moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; height: 200px; width: 100%"></canvas>
  180. </div>
  181. </div>
  182. </div>
  183. </div>
  184. </div>
  185. </div>
  186. <script>
  187. $(document).ready(function () {
  188. initData();
  189. doGetData = setInterval(function () { timeUpdate(); }, 2000);
  190. });
  191. function timeUpdate() {
  192. loadData();
  193. }
  194. function loadData() {
  195. window.DefectA1.data.datasets[0].data = [
  196. randomScalingFactor(8),
  197. randomScalingFactor(8)
  198. ];
  199. window.DefectA1.update();
  200. window.DefectA2.data.datasets[0].data = [
  201. randomScalingFactor(8),
  202. randomScalingFactor(8)
  203. ];
  204. window.DefectA2.update();
  205. window.DefectA3.data.datasets[0].data = [
  206. randomScalingFactor(8),
  207. randomScalingFactor(8)
  208. ];
  209. window.DefectA3.update();
  210. window.DefectA4.data.datasets[0].data = [
  211. randomScalingFactor(8),
  212. randomScalingFactor(8)
  213. ];
  214. window.DefectA4.update();
  215. window.DefectB1.data.datasets[0].data = [
  216. randomScalingFactor(8),
  217. randomScalingFactor(8)
  218. ];
  219. window.DefectB1.update();
  220. window.DefectB2.data.datasets[0].data = [
  221. randomScalingFactor(8),
  222. randomScalingFactor(8)
  223. ];
  224. window.DefectB2.update();
  225. window.DefectB3.data.datasets[0].data = [
  226. randomScalingFactor(8),
  227. randomScalingFactor(8)
  228. ];
  229. window.DefectB3.update();
  230. window.DefectB4.data.datasets[0].data = [
  231. randomScalingFactor(8),
  232. randomScalingFactor(8)
  233. ];
  234. window.DefectB4.update();
  235. window.DefectA5.data.datasets[0].data = [
  236. randomScalingFactor(8),
  237. randomScalingFactor(8)
  238. ];
  239. window.DefectA5.update();
  240. window.DefectA6.data.datasets[0].data = [
  241. randomScalingFactor(8),
  242. randomScalingFactor(8)
  243. ];
  244. window.DefectA6.update();
  245. window.DefectA7.data.datasets[0].data = [
  246. randomScalingFactor(8),
  247. randomScalingFactor(8)
  248. ];
  249. window.DefectA7.update();
  250. window.DefectA8.data.datasets[0].data = [
  251. randomScalingFactor(8),
  252. randomScalingFactor(8)
  253. ];
  254. window.DefectA8.update();
  255. //产量计划达成
  256. window.MonthCL.data.datasets[0].data = [
  257. randomScalingFactor(1000),
  258. randomScalingFactor(1000)
  259. ];
  260. window.MonthCL.update();
  261. }
  262. function initData() {
  263. window.chartColors = {
  264. red: 'rgb(255, 99, 132)',
  265. orange: 'rgb(255, 159, 64)',
  266. yellow: 'rgb(255, 250, 86)',
  267. green: 'rgb(75, 192, 192)',
  268. blue: 'rgb(54, 162, 250)',
  269. purple: 'rgb(153, 102, 255)',
  270. grey: 'rgb(231,233,237)'
  271. };
  272. var color = Chart.helpers.color;
  273. window.randomScalingFactor = function (num) {
  274. return Math.round(Math.random() * num);
  275. }
  276. Chart.defaults.global.defaultFontColor = 'white';
  277. Chart.defaults.global.defaultFontSize = 18;
  278. Chart.defaults.global.legend.display = false;
  279. //测漏气设备OEE===========================================
  280. window.configDefectA1 = {
  281. data: {
  282. labels: ['工作时间', '故障时间'],
  283. datasets: [{
  284. label: 'OEE',
  285. backgroundColor: [
  286. color(window.chartColors.green).alpha(0.35).rgbString(),
  287. color(window.chartColors.orange).alpha(0.35).rgbString()
  288. ],
  289. fill: false,
  290. borderColor: [
  291. window.chartColors.green,
  292. window.chartColors.orange
  293. ],
  294. borderWidth: 2,
  295. pointRadius: 30,
  296. data: [0, 0]
  297. }]
  298. },
  299. type: 'pie',
  300. options: {
  301. legend: {
  302. display: true
  303. },
  304. title: {
  305. display: false,
  306. text: "测漏气1"
  307. },
  308. tooltips: {
  309. mode: 'point',
  310. intersect: false
  311. },
  312. responsive: true
  313. }
  314. };
  315. var ctxDefectA1 = document.getElementById("canvasDefectA1").getContext("2d");
  316. window.DefectA1 = new Chart(ctxDefectA1, configDefectA1);
  317. //===================================================
  318. //测漏气设备OEE===========================================
  319. window.configDefectA2 = {
  320. data: {
  321. labels: ['工作时间', '故障时间'],
  322. datasets: [{
  323. label: 'OEE',
  324. backgroundColor: [
  325. color(window.chartColors.green).alpha(0.35).rgbString(),
  326. color(window.chartColors.orange).alpha(0.35).rgbString()
  327. ],
  328. fill: false,
  329. borderColor: [
  330. window.chartColors.green,
  331. window.chartColors.orange
  332. ],
  333. borderWidth: 2,
  334. pointRadius: 30,
  335. data: [0, 0]
  336. }]
  337. },
  338. type: 'pie',
  339. options: {
  340. legend: {
  341. display: true
  342. },
  343. title: {
  344. display: false,
  345. text: "测漏气2"
  346. },
  347. tooltips: {
  348. mode: 'point',
  349. intersect: false
  350. },
  351. responsive: true
  352. }
  353. };
  354. var ctxDefectA2 = document.getElementById("canvasDefectA2").getContext("2d");
  355. window.DefectA2 = new Chart(ctxDefectA2, configDefectA2);
  356. //===================================================
  357. //测漏气设备OEE===========================================
  358. window.configDefectA3 = {
  359. data: {
  360. labels: ['工作时间', '故障时间'],
  361. datasets: [{
  362. label: 'OEE',
  363. backgroundColor: [
  364. color(window.chartColors.green).alpha(0.35).rgbString(),
  365. color(window.chartColors.orange).alpha(0.35).rgbString()
  366. ],
  367. fill: false,
  368. borderColor: [
  369. window.chartColors.green,
  370. window.chartColors.orange
  371. ],
  372. borderWidth: 2,
  373. pointRadius: 30,
  374. data: [0, 0]
  375. }]
  376. },
  377. type: 'pie',
  378. options: {
  379. legend: {
  380. display: true
  381. },
  382. title: {
  383. display: false,
  384. text: "测漏气3"
  385. },
  386. tooltips: {
  387. mode: 'point',
  388. intersect: false
  389. },
  390. responsive: true
  391. }
  392. };
  393. var ctxDefectA3 = document.getElementById("canvasDefectA3").getContext("2d");
  394. window.DefectA3 = new Chart(ctxDefectA3, configDefectA3);
  395. //===================================================
  396. //测漏气设备OEE===========================================
  397. window.configDefectA4 = {
  398. data: {
  399. labels: ['工作时间', '故障时间'],
  400. datasets: [{
  401. label: 'OEE',
  402. backgroundColor: [
  403. color(window.chartColors.green).alpha(0.35).rgbString(),
  404. color(window.chartColors.orange).alpha(0.35).rgbString()
  405. ],
  406. fill: false,
  407. borderColor: [
  408. window.chartColors.green,
  409. window.chartColors.orange
  410. ],
  411. borderWidth: 2,
  412. pointRadius: 30,
  413. data: [0, 0]
  414. }]
  415. },
  416. type: 'pie',
  417. options: {
  418. legend: {
  419. display: true
  420. },
  421. title: {
  422. display: false,
  423. text: "测漏气4"
  424. },
  425. tooltips: {
  426. mode: 'point',
  427. intersect: false
  428. },
  429. responsive: true
  430. }
  431. };
  432. var ctxDefectA4 = document.getElementById("canvasDefectA4").getContext("2d");
  433. window.DefectA4 = new Chart(ctxDefectA4, configDefectA4);
  434. //===================================================
  435. //测漏气设备OEE===========================================
  436. window.configDefectA5 = {
  437. data: {
  438. labels: ['工作时间', '故障时间'],
  439. datasets: [{
  440. label: 'OEE',
  441. backgroundColor: [
  442. color(window.chartColors.green).alpha(0.35).rgbString(),
  443. color(window.chartColors.orange).alpha(0.35).rgbString()
  444. ],
  445. fill: false,
  446. borderColor: [
  447. window.chartColors.green,
  448. window.chartColors.orange
  449. ],
  450. borderWidth: 2,
  451. pointRadius: 30,
  452. data: [0, 0]
  453. }]
  454. },
  455. type: 'pie',
  456. options: {
  457. legend: {
  458. display: true
  459. },
  460. title: {
  461. display: false,
  462. text: "测漏气5"
  463. },
  464. tooltips: {
  465. mode: 'point',
  466. intersect: false
  467. },
  468. responsive: true
  469. }
  470. };
  471. var ctxDefectA5 = document.getElementById("canvasDefectA5").getContext("2d");
  472. window.DefectA5 = new Chart(ctxDefectA5, configDefectA5);
  473. //===================================================
  474. //测漏气设备OEE===========================================
  475. window.configDefectA6 = {
  476. data: {
  477. labels: ['工作时间', '故障时间'],
  478. datasets: [{
  479. label: 'OEE',
  480. backgroundColor: [
  481. color(window.chartColors.green).alpha(0.35).rgbString(),
  482. color(window.chartColors.orange).alpha(0.35).rgbString()
  483. ],
  484. fill: false,
  485. borderColor: [
  486. window.chartColors.green,
  487. window.chartColors.orange
  488. ],
  489. borderWidth: 2,
  490. pointRadius: 30,
  491. data: [0, 0]
  492. }]
  493. },
  494. type: 'pie',
  495. options: {
  496. legend: {
  497. display: true
  498. },
  499. title: {
  500. display: false,
  501. text: "测漏气6"
  502. },
  503. tooltips: {
  504. mode: 'point',
  505. intersect: false
  506. },
  507. responsive: true
  508. }
  509. };
  510. var ctxDefectA6 = document.getElementById("canvasDefectA6").getContext("2d");
  511. window.DefectA6 = new Chart(ctxDefectA6, configDefectA6);
  512. //===================================================
  513. //测漏气设备OEE===========================================
  514. window.configDefectA7 = {
  515. data: {
  516. labels: ['工作时间', '故障时间'],
  517. datasets: [{
  518. label: 'OEE',
  519. backgroundColor: [
  520. color(window.chartColors.green).alpha(0.35).rgbString(),
  521. color(window.chartColors.orange).alpha(0.35).rgbString()
  522. ],
  523. fill: false,
  524. borderColor: [
  525. window.chartColors.green,
  526. window.chartColors.orange
  527. ],
  528. borderWidth: 2,
  529. pointRadius: 30,
  530. data: [0, 0]
  531. }]
  532. },
  533. type: 'pie',
  534. options: {
  535. legend: {
  536. display: true
  537. },
  538. title: {
  539. display: false,
  540. text: "测漏气7"
  541. },
  542. tooltips: {
  543. mode: 'point',
  544. intersect: false
  545. },
  546. responsive: true
  547. }
  548. };
  549. var ctxDefectA7 = document.getElementById("canvasDefectA7").getContext("2d");
  550. window.DefectA7 = new Chart(ctxDefectA7, configDefectA7);
  551. //===================================================
  552. //测漏气设备OEE===========================================
  553. window.configDefectA8 = {
  554. data: {
  555. labels: ['工作时间', '故障时间'],
  556. datasets: [{
  557. label: 'OEE',
  558. backgroundColor: [
  559. color(window.chartColors.green).alpha(0.35).rgbString(),
  560. color(window.chartColors.orange).alpha(0.35).rgbString()
  561. ],
  562. fill: false,
  563. borderColor: [
  564. window.chartColors.green,
  565. window.chartColors.orange
  566. ],
  567. borderWidth: 2,
  568. pointRadius: 30,
  569. data: [0, 0]
  570. }]
  571. },
  572. type: 'pie',
  573. options: {
  574. legend: {
  575. display: true
  576. },
  577. title: {
  578. display: false,
  579. text: "测漏气8"
  580. },
  581. tooltips: {
  582. mode: 'point',
  583. intersect: false
  584. },
  585. responsive: true
  586. }
  587. };
  588. var ctxDefectA8 = document.getElementById("canvasDefectA8").getContext("2d");
  589. window.DefectA8 = new Chart(ctxDefectA8, configDefectA8);
  590. //===================================================
  591. //试水设备OEE===========================================
  592. window.configDefectB1 = {
  593. data: {
  594. labels: ['工作时间', '故障时间'],
  595. datasets: [{
  596. label: 'OEE',
  597. backgroundColor: [
  598. color(window.chartColors.green).alpha(0.35).rgbString(),
  599. color(window.chartColors.orange).alpha(0.35).rgbString()
  600. ],
  601. fill: false,
  602. borderColor: [
  603. window.chartColors.green,
  604. window.chartColors.orange
  605. ],
  606. borderWidth: 2,
  607. pointRadius: 30,
  608. data: [0, 0]
  609. }]
  610. },
  611. type: 'pie',
  612. options: {
  613. legend: {
  614. display: true
  615. },
  616. title: {
  617. display: false,
  618. text: "试水1"
  619. },
  620. tooltips: {
  621. mode: 'point',
  622. intersect: false
  623. },
  624. responsive: true
  625. }
  626. };
  627. var ctxDefectB1 = document.getElementById("canvasDefectB1").getContext("2d");
  628. window.DefectB1 = new Chart(ctxDefectB1, configDefectB1);
  629. //===================================================
  630. //试水设备OEE===========================================
  631. window.configDefectB2 = {
  632. data: {
  633. labels: ['工作时间', '故障时间'],
  634. datasets: [{
  635. label: 'OEE',
  636. backgroundColor: [
  637. color(window.chartColors.green).alpha(0.35).rgbString(),
  638. color(window.chartColors.orange).alpha(0.35).rgbString()
  639. ],
  640. fill: false,
  641. borderColor: [
  642. window.chartColors.green,
  643. window.chartColors.orange
  644. ],
  645. borderWidth: 2,
  646. pointRadius: 30,
  647. data: [0, 0]
  648. }]
  649. },
  650. type: 'pie',
  651. options: {
  652. legend: {
  653. display: true
  654. },
  655. title: {
  656. display: false,
  657. text: "试水2"
  658. },
  659. tooltips: {
  660. mode: 'point',
  661. intersect: false
  662. },
  663. responsive: true
  664. }
  665. };
  666. var ctxDefectB2 = document.getElementById("canvasDefectB2").getContext("2d");
  667. window.DefectB2 = new Chart(ctxDefectB2, configDefectB2);
  668. //===================================================
  669. //试水设备OEE===========================================
  670. window.configDefectB3 = {
  671. data: {
  672. labels: ['工作时间', '故障时间'],
  673. datasets: [{
  674. label: 'OEE',
  675. backgroundColor: [
  676. color(window.chartColors.green).alpha(0.35).rgbString(),
  677. color(window.chartColors.orange).alpha(0.35).rgbString()
  678. ],
  679. fill: false,
  680. borderColor: [
  681. window.chartColors.green,
  682. window.chartColors.orange
  683. ],
  684. borderWidth: 2,
  685. pointRadius: 30,
  686. data: [0, 0]
  687. }]
  688. },
  689. type: 'pie',
  690. options: {
  691. legend: {
  692. display: true
  693. },
  694. title: {
  695. display: false,
  696. text: "试水3"
  697. },
  698. tooltips: {
  699. mode: 'point',
  700. intersect: false
  701. },
  702. responsive: true
  703. }
  704. };
  705. var ctxDefectB3 = document.getElementById("canvasDefectB3").getContext("2d");
  706. window.DefectB3 = new Chart(ctxDefectB3, configDefectB3);
  707. //===================================================
  708. //试水设备OEE===========================================
  709. window.configDefectB4 = {
  710. data: {
  711. labels: ['工作时间', '故障时间'],
  712. datasets: [{
  713. label: 'OEE',
  714. backgroundColor: [
  715. color(window.chartColors.green).alpha(0.35).rgbString(),
  716. color(window.chartColors.orange).alpha(0.35).rgbString()
  717. ],
  718. fill: false,
  719. borderColor: [
  720. window.chartColors.green,
  721. window.chartColors.orange
  722. ],
  723. borderWidth: 2,
  724. pointRadius: 30,
  725. data: [0, 0]
  726. }]
  727. },
  728. type: 'pie',
  729. options: {
  730. legend: {
  731. display: true
  732. },
  733. title: {
  734. display: false,
  735. text: "试水4"
  736. },
  737. tooltips: {
  738. mode: 'point',
  739. intersect: false
  740. },
  741. responsive: true
  742. }
  743. };
  744. var ctxDefectB4 = document.getElementById("canvasDefectB4").getContext("2d");
  745. window.DefectB4 = new Chart(ctxDefectB4, configDefectB4);
  746. //===================================================
  747. }
  748. </script>
  749. <script src="/Plugins/chartjs-2.8.0/chart-2.8.min.js"></script>
  750. <script src="/Plugins/chartjs-2.8.0/chartjs-plugin-datalabels.js"></script>
  751. <script src="/Plugins/chartjs-2.8.0/utils.js"></script>
  752. <script src="/Plugins/circleChart/circleChart.min.js"></script>
  753. </body>
  754. </html>