index.html 61 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262
  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 rel="stylesheet" href="../DashBoard.css?v3" />
  9. <script src="/Plugins/jquery-3.4.1/jquery-3.4.1.min.js"></script>
  10. <script src="/Plugins/xrequest/xrequest.min.js"></script>
  11. <script src="/Plugins/xcountto/xcountTo2.js"></script>
  12. <title>东科软件</title>
  13. </head>
  14. <body>
  15. <div class="m4_box_1920_1080">
  16. <div class="m4_box_title" onclick="showHelp()" style="cursor:pointer">
  17. <div class="m4_box_title_arrow"></div><div class="m4_box_title_arrow2"></div> <div>设备状态</div><span class="m4_box_title_loading" id="报表加载"></span>
  18. </div>
  19. <div class="box_body" style="display: flex; flex-direction: column;">
  20. <!--测漏气-->
  21. <div style="width:1720px;height:840px;display:flex;flex-direction:row;">
  22. <div style="width: 920px; height:810px; padding-right: 20px; display: flex; flex-direction: row; ">
  23. <table cellspacing="0" cellpadding="0" border="0" style="width:100%;height:100%;">
  24. <!--<tr class="tr_title_warning">
  25. <td colspan="9" style="color:white;">测漏气产量合格率</td>
  26. </tr>-->
  27. <tr class="tr_title_warning">
  28. <td>设备名称</td>
  29. <td>日生产量</td>
  30. <!--<td>日合格数</td>
  31. <td>日合格率</td>-->
  32. <td>工作时间</td>
  33. <td>等待时间</td>
  34. <td>故障时间</td>
  35. </tr>
  36. <tr class="tr_bg_light_warning" style="height:30px;" id="tr1">
  37. <td style="font-size: 18px; width: 11%">A线-智能测漏机</td>
  38. <td style="font-size: 18px; width: 11%" id="pd1">--</td>
  39. <!--<td style="font-size: 18px; width: 11%" id="pg1">--</td>
  40. <td style="font-size: 18px; width: 11%" id="gp1">--</td>-->
  41. <td style="font-size: 18px; width: 11%" id="yx1">--</td>
  42. <td style="font-size: 18px; width: 11%" id="dd1">--</td>
  43. <td style="font-size: 18px; width: 11%" id="gz1">--</td>
  44. </tr>
  45. <tr class="tr_bg_light_warning" style="height:30px;" id="tr2">
  46. <td style="font-size: 18px; width: 11%">B线-智能测漏机</td>
  47. <td style="font-size: 18px; width: 11%" id="pd2">--</td>
  48. <!--<td style="font-size: 18px; width: 11%" id="pg2">--</td>
  49. <td style="font-size: 18px; width: 11%" id="gp2">--</td>-->
  50. <td style="font-size: 18px; width: 11%" id="yx2">--</td>
  51. <td style="font-size: 18px; width: 11%" id="dd2">--</td>
  52. <td style="font-size: 18px; width: 11%" id="gz2">--</td>
  53. </tr>
  54. <tr class="tr_bg_light_warning" style="height:30px;" id="tr3">
  55. <td style="font-size: 18px; width: 11%">C线-连体测漏机</td>
  56. <td style="font-size: 18px; width: 11%" id="pd3">--</td>
  57. <!--<td style="font-size: 18px; width: 11%" id="pg3">--</td>
  58. <td style="font-size: 18px; width: 11%" id="gp3">--</td>-->
  59. <td style="font-size: 18px; width: 11%" id="yx3">--</td>
  60. <td style="font-size: 18px; width: 11%" id="dd3">--</td>
  61. <td style="font-size: 18px; width: 11%" id="gz3">--</td>
  62. </tr>
  63. <tr class="tr_bg_light_warning" style="height:30px;" id="tr4">
  64. <td style="font-size: 18px; width: 11%">D线-连体测漏机</td>
  65. <td style="font-size: 18px; width: 11%" id="pd4">--</td>
  66. <!--<td style="font-size: 18px; width: 11%" id="pg4">--</td>
  67. <td style="font-size: 18px; width: 11%" id="gp4">--</td>-->
  68. <td style="font-size: 18px; width: 11%" id="yx4">--</td>
  69. <td style="font-size: 18px; width: 11%" id="dd4">--</td>
  70. <td style="font-size: 18px; width: 11%" id="gz4">--</td>
  71. </tr>
  72. <tr class="tr_bg_light_warning" style="height:30px;" id="tr5">
  73. <td style="font-size: 18px; width: 11%">E线-连体测漏机</td>
  74. <td style="font-size: 18px; width: 11%" id="pd5">--</td>
  75. <!--<td style="font-size: 18px; width: 11%" id="pg5">--</td>
  76. <td style="font-size: 18px; width: 11%" id="gp5">--</td>-->
  77. <td style="font-size: 18px; width: 11%" id="yx5">--</td>
  78. <td style="font-size: 18px; width: 11%" id="dd5">--</td>
  79. <td style="font-size: 18px; width: 11%" id="gz5">--</td>
  80. </tr>
  81. <tr class="tr_bg_light_warning" style="height:30px;" id="tr6">
  82. <td style="font-size: 18px; width: 11%">F线-连体测漏机</td>
  83. <td style="font-size: 18px; width: 11%" id="pd6">--</td>
  84. <!--<td style="font-size: 18px; width: 11%" id="pg6">--</td>
  85. <td style="font-size: 18px; width: 11%" id="gp6">--</td>-->
  86. <td style="font-size: 18px; width: 11%" id="yx6">--</td>
  87. <td style="font-size: 18px; width: 11%" id="dd6">--</td>
  88. <td style="font-size: 18px; width: 11%" id="gz6">--</td>
  89. </tr>
  90. <tr class="tr_bg_light_warning" style="height:30px;" id="tr7">
  91. <td style="font-size: 18px; width: 11%">G线-连体测漏机</td>
  92. <td style="font-size: 18px; width: 11%" id="pd7">--</td>
  93. <!--<td style="font-size: 18px; width: 11%" id="pg7">--</td>
  94. <td style="font-size: 18px; width: 11%" id="gp7">--</td>-->
  95. <td style="font-size: 18px; width: 11%" id="yx7">--</td>
  96. <td style="font-size: 18px; width: 11%" id="dd7">--</td>
  97. <td style="font-size: 18px; width: 11%" id="gz7">--</td>
  98. </tr>
  99. <tr class="tr_bg_light_warning" style="height:30px;" id="tr8">
  100. <td style="font-size: 18px; width: 11%">H线-智能测漏机</td>
  101. <td style="font-size: 18px; width: 11%" id="pd8">--</td>
  102. <!--<td style="font-size: 18px; width: 11%" id="pg8">--</td>
  103. <td style="font-size: 18px; width: 11%" id="gp8">--</td>-->
  104. <td style="font-size: 18px; width: 11%" id="yx8">--</td>
  105. <td style="font-size: 18px; width: 11%" id="dd8">--</td>
  106. <td style="font-size: 18px; width: 11%" id="gz8">--</td>
  107. </tr>
  108. <tr class="tr_bg_light_warning" style="height:30px;" id="str1">
  109. <td style="font-size: 18px; width: 11%">A线-倒水机</td>
  110. <td style="font-size: 18px; width: 11%" id="spd1">--</td>
  111. <td style="font-size: 18px; width: 11%" id="syx1">--</td>
  112. <td style="font-size: 18px; width: 11%" id="sdd1">--</td>
  113. <td style="font-size: 18px; width: 11%" id="sgz1">--</td>
  114. </tr>
  115. <tr class="tr_bg_light_warning" style="height:30px;" id="str2">
  116. <td style="font-size: 18px; width: 11%">B线-倒水机</td>
  117. <td style="font-size: 18px; width: 11%" id="spd2">--</td>
  118. <td style="font-size: 18px; width: 11%" id="syx2">--</td>
  119. <td style="font-size: 18px; width: 11%" id="sdd2">--</td>
  120. <td style="font-size: 18px; width: 11%" id="sgz2">--</td>
  121. </tr>
  122. <tr class="tr_bg_light_warning" style="height:30px;" id="str3">
  123. <td style="font-size: 18px; width: 11%">C线-倒水机</td>
  124. <td style="font-size: 18px; width: 11%" id="spd3">--</td>
  125. <td style="font-size: 18px; width: 11%" id="syx3">--</td>
  126. <td style="font-size: 18px; width: 11%" id="sdd3">--</td>
  127. <td style="font-size: 18px; width: 11%" id="sgz3">--</td>
  128. </tr>
  129. <tr class="tr_bg_light_warning" style="height:30px;" id="str4">
  130. <td style="font-size: 18px; width: 11%">D线-倒水机</td>
  131. <td style="font-size: 18px; width: 11%" id="spd4">--</td>
  132. <td style="font-size: 18px; width: 11%" id="syx4">--</td>
  133. <td style="font-size: 18px; width: 11%" id="sdd4">--</td>
  134. <td style="font-size: 18px; width: 11%" id="sgz4">--</td>
  135. </tr>
  136. </table>
  137. </div>
  138. <div style="width: 920px; height: 860px; padding-right: 20px; display: flex; flex-direction: column; ">
  139. <div style="width: 100%; height: 260px; padding-right: 20px; display: flex; flex-direction: row; ">
  140. <div style="width: 25%; height: 260px;">
  141. <div style="color: white; font-size: 16px; padding-top: 10px; font-weight: 600; text-align: center">A线-智能测漏机</div>
  142. <canvas id="canvasDefectA1" style="-moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; height: 200px; width: 100%"></canvas>
  143. <div id="currentA1" style="width: 20px; height: 20px; margin: 10px 0 0 96px; border-radius: 50%; "></div>
  144. </div>
  145. <div style="width: 25%; height: 260px;">
  146. <div style="color: white; font-size: 16px; padding-top: 10px; font-weight: 600; text-align: center ">B线-智能测漏机</div>
  147. <canvas id="canvasDefectA2" style="-moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; height: 200px; width: 100% "></canvas>
  148. <div id="currentA2" style="width: 20px; height: 20px; margin: 10px 0 0 96px; border-radius: 50%; "></div>
  149. </div>
  150. <div style="width: 25%; height: 260px;">
  151. <div style="color: white; font-size: 16px; padding-top: 10px; font-weight: 600; text-align: center ">C线-连体测漏机</div>
  152. <canvas id="canvasDefectA3" style="-moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; height: 200px; width: 100% "></canvas>
  153. <div id="currentA3" style="width: 20px; height: 20px; margin: 10px 0 0 96px; border-radius: 50%; "></div>
  154. </div>
  155. <div style="width: 25%; height: 260px;">
  156. <div style="color: white; font-size: 16px; padding-top: 10px; font-weight: 600; text-align: center ">D线-连体测漏机</div>
  157. <canvas id="canvasDefectA4" style="-moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; height: 200px; width: 100% "></canvas>
  158. <div id="currentA4" style="width: 20px; height: 20px; margin: 10px 0 0 96px; border-radius: 50%; "></div>
  159. </div>
  160. </div>
  161. <div style="width: 100%; height: 260px; padding-right: 20px; display: flex; flex-direction: row; ">
  162. <div style="width: 25%; height: 260px;">
  163. <div style="color: white; font-size: 16px; padding-top: 20px; font-weight: 600; text-align: center ">E线-连体测漏机</div>
  164. <canvas id="canvasDefectA5" style="-moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; height: 200px; width: 100% "></canvas>
  165. <div id="currentA5" style="width: 20px; height: 20px; margin: 10px 0 0 96px; border-radius: 50%; "></div>
  166. </div>
  167. <div style="width: 25%; height: 260px;">
  168. <div style="color: white; font-size: 16px; padding-top: 20px; font-weight: 600; text-align: center ">F线-连体测漏机</div>
  169. <canvas id="canvasDefectA6" style="-moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; height: 200px; width: 100% "></canvas>
  170. <div id="currentA6" style="width: 20px; height: 20px; margin: 10px 0 0 96px; border-radius: 50%; "></div>
  171. </div>
  172. <div style="width: 25%; height: 260px;">
  173. <div style="color: white; font-size: 16px; padding-top: 20px; font-weight: 600; text-align: center ">G线-连体测漏机</div>
  174. <canvas id="canvasDefectA7" style="-moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; height: 200px; width: 100% "></canvas>
  175. <div id="currentA7" style="width: 20px; height: 20px; margin: 10px 0 0 96px; border-radius: 50%; "></div>
  176. </div>
  177. <div style="width: 25%; height: 260px;">
  178. <div style="color: white; font-size: 16px; padding-top: 20px; font-weight: 600; text-align: center ">H线-智能测漏机</div>
  179. <canvas id="canvasDefectA8" style="-moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; height: 200px; width: 100% "></canvas>
  180. <div id="currentA8" style="width: 20px; height: 20px; margin: 10px 0 0 96px; border-radius: 50%; "></div>
  181. </div>
  182. </div>
  183. <div style="width: 100%; height: 260px; padding-right: 20px; display: flex; flex-direction: row; ">
  184. <div style="width: 25%; height: 260px;">
  185. <div style="color: white; font-size: 16px; padding-top: 30px; font-weight: 600; text-align: center ">A线-倒水机</div>
  186. <canvas id="canvasDefectA9" style="-moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; height: 200px; width: 100% "></canvas>
  187. <div id="currentA9" style="width: 20px; height: 20px; margin: 10px 0 0 96px; border-radius: 50%; "></div>
  188. </div>
  189. <div style="width: 25%; height: 260px;">
  190. <div style="color: white; font-size: 16px; padding-top: 30px; font-weight: 600; text-align: center ">B线-倒水机</div>
  191. <canvas id="canvasDefectA10" style="-moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; height: 200px; width: 100% "></canvas>
  192. <div id="currentA10" style="width: 20px; height: 20px; margin: 10px 0 0 96px; border-radius: 50%; "></div>
  193. </div>
  194. <div style="width: 25%; height: 260px;">
  195. <div style="color: white; font-size: 16px; padding-top: 30px; font-weight: 600; text-align: center ">C线-倒水机</div>
  196. <canvas id="canvasDefectA11" style="-moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; height: 200px; width: 100% "></canvas>
  197. <div id="currentA11" style="width: 20px; height: 20px; margin: 10px 0 0 96px; border-radius: 50%; "></div>
  198. </div>
  199. <div style="width: 25%; height: 260px;">
  200. <div style="color: white; font-size: 16px; padding-top: 30px; font-weight: 600; text-align: center ">D线-倒水机</div>
  201. <canvas id="canvasDefectA12" style="-moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; height: 200px; width: 100% "></canvas>
  202. <div id="currentA12" style="width: 20px; height: 20px; margin: 10px 0 0 96px; border-radius: 50%; "></div>
  203. </div>
  204. </div>
  205. </div>
  206. </div>
  207. <!--试水-->
  208. <!--<div style="width: 1720px; height: 480px; display: flex; flex-direction: row;">
  209. <div style="width: 920px; height: 480px; padding-right: 20px; display: flex; flex-direction: row; ">
  210. <table cellspacing="0" cellpadding="0" border="0" style="width:100%;">
  211. <tr class="tr_title_warning">
  212. <td colspan="9" style="color:white;">试水产量合格率</td>
  213. </tr>
  214. <tr class="tr_title_warning">
  215. <td>试水线号</td>
  216. <td>日生产量</td>
  217. <td>日合格数</td>
  218. <td>日合格率</td>
  219. </tr>
  220. <tr class="tr_bg_light_warning" style="height:30px;">
  221. <td style="font-size: 18px; width: 11%">1</td>
  222. <td style="font-size: 18px; width: 11%">--</td>
  223. <td style="font-size: 18px; width: 11%">--</td>
  224. <td style="font-size: 18px; width: 11%">--</td>
  225. </tr>
  226. <tr class="tr_bg_light_warning" style="height:30px;">
  227. <td style="font-size: 18px; width: 11%">2</td>
  228. <td style="font-size: 18px; width: 11%">--</td>
  229. <td style="font-size: 18px; width: 11%">--</td>
  230. <td style="font-size: 18px; width: 11%">--</td>
  231. </tr>
  232. <tr class="tr_bg_light_warning" style="height:30px;">
  233. <td style="font-size: 18px; width: 11%">3</td>
  234. <td style="font-size: 18px; width: 11%">--</td>
  235. <td style="font-size: 18px; width: 11%">--</td>
  236. <td style="font-size: 18px; width: 11%">--</td>
  237. </tr>
  238. <tr class="tr_bg_light_warning" style="height:30px;">
  239. <td style="font-size: 18px; width: 11%">4</td>
  240. <td style="font-size: 18px; width: 11%">--</td>
  241. <td style="font-size: 18px; width: 11%">--</td>
  242. <td style="font-size: 18px; width: 11%">--</td>
  243. </tr>
  244. </table>
  245. </div>
  246. <div style="width: 920px; height: 480px; padding-right: 20px; display: flex; flex-direction: column; ">
  247. <div style="width: 100%; height: 480px; padding-right: 20px; display: flex; flex-direction: row; ">
  248. <div style="width: 50%; height: 250px;">
  249. <div style="color:white;font-size:20px;font-weight:600; text-align:center">试水1</div>
  250. <canvas id="canvasDefectB1" style="-moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; height: 240px; width: 100%"></canvas>
  251. </div>
  252. <div style="width: 50%; height: 250px;">
  253. <div style="color:white;font-size:20px;font-weight:600; text-align:center">试水2</div>
  254. <canvas id="canvasDefectB2" style="-moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; height: 240px; width: 100%"></canvas>
  255. </div>
  256. </div>
  257. <div style="width: 100%; height: 480px; padding-right: 20px; display: flex; flex-direction: row; ">
  258. <div style="width: 50%; height: 250px;">
  259. <div style="color:white;font-size:20px;font-weight:600; text-align:center">试水3</div>
  260. <canvas id="canvasDefectB3" style="-moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; height: 240px; width: 100%"></canvas>
  261. </div>
  262. <div style="width: 50%; height: 250px;">
  263. <div style="color:white;font-size:20px;font-weight:600; text-align:center">试水4</div>
  264. <canvas id="canvasDefectB4" style="-moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; height: 240px; width: 100%"></canvas>
  265. </div>
  266. </div>
  267. </div>
  268. </div>-->
  269. </div>
  270. </div>
  271. <script>
  272. var refreshTime1 = 80000;
  273. var currentTime1 = 0;
  274. var doGetData;
  275. var doGetTime;
  276. var frameHeight;
  277. var tableHeight;
  278. var offsetHeight = 20;
  279. $(document).ready(function () {
  280. initData();
  281. doGetData = setInterval(function () { timeUpdate(); }, 1000);
  282. });
  283. function clearData() {
  284. //清除数据
  285. }
  286. function timeUpdate() {
  287. if (currentTime1 <= 0) {
  288. //clearData();
  289. //setTimeout(loadData(), 1000);
  290. loadData();
  291. currentTime1 = refreshTime1;
  292. }
  293. else {
  294. if (currentTime1 > 0) {
  295. $('#报表加载').html('刷新:' + currentTime1 / 1000 + ' 秒');
  296. currentTime1 = currentTime1 - 1000;
  297. }
  298. }
  299. //if (currentTime2 <= 0) {
  300. // //clearData();
  301. // setTimeout(loadDataCurrentStatus(), 1000);
  302. // //loadData();
  303. // currentTime2 = refreshTime2;
  304. //}
  305. //else {
  306. // if (currentTime2 > 0) {
  307. // $('#报表加载').html('刷新:' + currentTime2 / 1000 + ' 秒');
  308. // currentTime2 = currentTime2 - 1000;
  309. // }
  310. //}
  311. }
  312. function loadDataCurrentStatus() {
  313. $.get("rpt.ashx?m=pieCurrent", function (data) {
  314. var json = JSON.parse(data);
  315. if (json["success"] == true) {
  316. for (var i = 0; i < json["rows"].length; i++) {
  317. if (json["rows"][i]["状态"] == '1') {
  318. $('#currentA' + (i + 1).toString()).addClass("isGreen");
  319. } else if (json["rows"][i]["状态"] == '2') {
  320. $('#currentA' + (i + 1).toString()).addClass("isOrange");
  321. } else if (json["rows"][i]["状态"] == '3') {
  322. $('#currentA' + (i + 1).toString()).addClass("isRed");
  323. } else {
  324. $('#currentA' + (i + 1).toString()).addClass("isWhite");
  325. }
  326. }
  327. }
  328. });
  329. }
  330. function loadData() {
  331. $.get("rpt.ashx?m=table", function (data) {
  332. var json = JSON.parse(data);
  333. if (json["success"] == true) {
  334. for (var i = 0; i < json["rows"].length; i++) {
  335. if (json["rows"][i]["产量"] == "0") {
  336. $('#tr' + (i + 1).toString()).remove();
  337. } else {
  338. $('#pd' + (i + 1).toString()).text(json["rows"][i]["产量"]);
  339. //$('#pg' + (i + 1).toString()).text(json["rows"][i]["合格数"]);
  340. //$('#gp' + (i + 1).toString()).text(json["rows"][i]["合格率"]);
  341. $('#yx' + (i + 1).toString()).text(json["rows"][i]["工作时间"]);
  342. $('#dd' + (i + 1).toString()).text(json["rows"][i]["等待时间"]);
  343. $('#gz' + (i + 1).toString()).text(json["rows"][i]["故障时间"]);
  344. //$('#pd' + (i + 1).toString()).text(json["rows"][i]["产量"]);
  345. //$('#pg' + (i + 1).toString()).text(json["rows"][i]["合格数"]);
  346. //$('#gp' + (i + 1).toString()).text(json["rows"][i]["合格率"]);
  347. }
  348. }
  349. }
  350. });
  351. $.get("rpt.ashx?m=table1", function (data) {
  352. var json = JSON.parse(data);
  353. if (json["success"] == true) {
  354. for (var i = 0; i < json["rows"].length; i++) {
  355. if (json["rows"][i]["产量"] == "0") {
  356. $('#str' + (i + 1).toString()).remove();
  357. } else {
  358. $('#spd' + (i + 1).toString()).text(json["rows"][i]["产量"]);
  359. $('#syx' + (i + 1).toString()).text(json["rows"][i]["工作时间"]);
  360. $('#sdd' + (i + 1).toString()).text(json["rows"][i]["等待时间"]);
  361. $('#sgz' + (i + 1).toString()).text(json["rows"][i]["故障时间"]);
  362. }
  363. }
  364. }
  365. });
  366. $.get("rpt.ashx?m=pie1", function (data) {
  367. var json = JSON.parse(data);
  368. if (json["success"] == true) {
  369. window.DefectA1.data.datasets[0].data = [(json["rows"][0]["NUM1"]), (json["rows"][0]["NUM2"]), (json["rows"][0]["NUM3"])];
  370. window.DefectA1.update();
  371. }
  372. });
  373. $.get("rpt.ashx?m=pie2", function (data) {
  374. var json = JSON.parse(data);
  375. if (json["success"] == true) {
  376. window.DefectA2.data.datasets[0].data = [(json["rows"][0]["NUM1"]), (json["rows"][0]["NUM2"]), (json["rows"][0]["NUM3"])];
  377. window.DefectA2.update();
  378. }
  379. });
  380. $.get("rpt.ashx?m=pie3", function (data) {
  381. var json = JSON.parse(data);
  382. if (json["success"] == true) {
  383. window.DefectA3.data.datasets[0].data = [(json["rows"][0]["NUM1"]), (json["rows"][0]["NUM2"]), (json["rows"][0]["NUM3"])];
  384. window.DefectA3.update();
  385. }
  386. });
  387. $.get("rpt.ashx?m=pie4", function (data) {
  388. var json = JSON.parse(data);
  389. if (json["success"] == true) {
  390. window.DefectA4.data.datasets[0].data = [(json["rows"][0]["NUM1"]), (json["rows"][0]["NUM2"]), (json["rows"][0]["NUM3"])];
  391. window.DefectA4.update();
  392. }
  393. });
  394. $.get("rpt.ashx?m=pie5", function (data) {
  395. var json = JSON.parse(data);
  396. if (json["success"] == true) {
  397. window.DefectA5.data.datasets[0].data = [(json["rows"][0]["NUM1"]), (json["rows"][0]["NUM2"]), (json["rows"][0]["NUM3"])];
  398. window.DefectA5.update();
  399. }
  400. });
  401. $.get("rpt.ashx?m=pie6", function (data) {
  402. var json = JSON.parse(data);
  403. if (json["success"] == true) {
  404. window.DefectA6.data.datasets[0].data = [(json["rows"][0]["NUM1"]), (json["rows"][0]["NUM2"]), (json["rows"][0]["NUM3"])];
  405. window.DefectA6.update();
  406. }
  407. });
  408. $.get("rpt.ashx?m=pie7", function (data) {
  409. var json = JSON.parse(data);
  410. if (json["success"] == true) {
  411. window.DefectA7.data.datasets[0].data = [(json["rows"][0]["NUM1"]), (json["rows"][0]["NUM2"]), (json["rows"][0]["NUM3"])];
  412. window.DefectA7.update();
  413. }
  414. });
  415. $.get("rpt.ashx?m=pie8", function (data) {
  416. var json = JSON.parse(data);
  417. if (json["success"] == true) {
  418. window.DefectA8.data.datasets[0].data = [(json["rows"][0]["NUM1"]), (json["rows"][0]["NUM2"]), (json["rows"][0]["NUM3"])];
  419. window.DefectA8.update();
  420. }
  421. });
  422. $.get("rpt.ashx?m=pie9", function (data) {
  423. var json = JSON.parse(data);
  424. console.log("pie9", json);
  425. if (json["success"] == true) {
  426. window.DefectA9.data.datasets[0].data = [(json["rows"][0]["NUM1"]), (json["rows"][0]["NUM2"]), (json["rows"][0]["NUM3"])];
  427. window.DefectA9.update();
  428. }
  429. });
  430. $.get("rpt.ashx?m=pie10", function (data) {
  431. var json = JSON.parse(data);
  432. if (json["success"] == true) {
  433. window.DefectA10.data.datasets[0].data = [(json["rows"][0]["NUM1"]), (json["rows"][0]["NUM2"]), (json["rows"][0]["NUM3"])];
  434. window.DefectA10.update();
  435. }
  436. });
  437. $.get("rpt.ashx?m=pie11", function (data) {
  438. var json = JSON.parse(data);
  439. if (json["success"] == true) {
  440. window.DefectA11.data.datasets[0].data = [(json["rows"][0]["NUM1"]), (json["rows"][0]["NUM2"]), (json["rows"][0]["NUM3"])];
  441. window.DefectA11.update();
  442. }
  443. });
  444. $.get("rpt.ashx?m=pie12", function (data) {
  445. var json = JSON.parse(data);
  446. if (json["success"] == true) {
  447. window.DefectA12.data.datasets[0].data = [(json["rows"][0]["NUM1"]), (json["rows"][0]["NUM2"]), (json["rows"][0]["NUM3"])];
  448. window.DefectA12.update();
  449. }
  450. });
  451. $.get("rpt.ashx?m=pieCurrent", function (data) {
  452. var json = JSON.parse(data);
  453. if (json["success"] == true) {
  454. for (var i = 0; i < json["rows"].length; i++) {
  455. if (json["rows"][i]["状态"] == '1') {
  456. $('#currentA' + (i + 1).toString()).addClass("isGreen");
  457. } else if (json["rows"][i]["状态"] == '2') {
  458. $('#currentA' + (i + 1).toString()).addClass("isOrange");
  459. } else if (json["rows"][i]["状态"] == '3') {
  460. $('#currentA' + (i + 1).toString()).addClass("isRed");
  461. } else {
  462. $('#currentA' + (i + 1).toString()).addClass("isWhite");
  463. }
  464. }
  465. }
  466. });
  467. //window.DefectA1.data.datasets[0].data = [
  468. // randomScalingFactor(8),
  469. // randomScalingFactor(8)
  470. //];
  471. //window.DefectA1.update();
  472. //window.DefectA2.data.datasets[0].data = [
  473. // randomScalingFactor(8),
  474. // randomScalingFactor(8)
  475. //];
  476. //window.DefectA2.update();
  477. //window.DefectA3.data.datasets[0].data = [
  478. // randomScalingFactor(8),
  479. // randomScalingFactor(8)
  480. //];
  481. //window.DefectA3.update();
  482. //window.DefectA4.data.datasets[0].data = [
  483. // randomScalingFactor(8),
  484. // randomScalingFactor(8)
  485. //];
  486. //window.DefectA4.update();
  487. //window.DefectA5.data.datasets[0].data = [
  488. // randomScalingFactor(8),
  489. // randomScalingFactor(8)
  490. //];
  491. //window.DefectA5.update();
  492. //window.DefectA6.data.datasets[0].data = [
  493. // randomScalingFactor(8),
  494. // randomScalingFactor(8)
  495. //];
  496. //window.DefectA6.update();
  497. //window.DefectA7.data.datasets[0].data = [
  498. // randomScalingFactor(8),
  499. // randomScalingFactor(8)
  500. //];
  501. //window.DefectA7.update();
  502. //window.DefectA8.data.datasets[0].data = [
  503. // randomScalingFactor(8),
  504. // randomScalingFactor(8)
  505. //];
  506. //window.DefectA8.update();
  507. }
  508. function initData() {
  509. window.chartColors = {
  510. red: 'rgb(255, 99, 132)',
  511. orange: 'rgb(255, 159, 64)',
  512. yellow: 'rgb(255, 250, 86)',
  513. green: 'rgb(75, 192, 192)',
  514. blue: 'rgb(54, 162, 250)',
  515. purple: 'rgb(153, 102, 255)',
  516. grey: 'rgb(231,233,237)'
  517. };
  518. var color = Chart.helpers.color;
  519. window.randomScalingFactor = function (num) {
  520. return Math.round(Math.random() * num);
  521. }
  522. Chart.defaults.global.defaultFontColor = 'white';
  523. Chart.defaults.global.defaultFontSize = 16;
  524. Chart.defaults.global.legend.display = false;
  525. //测漏气设备OEE===========================================
  526. window.configDefectA1 = {
  527. data: {
  528. labels: ['工作时间', '等待时间', '故障时间'],
  529. datasets: [{
  530. label: 'OEE',
  531. backgroundColor: [
  532. color(window.chartColors.green).alpha(0.35).rgbString(),
  533. color(window.chartColors.orange).alpha(0.35).rgbString(),
  534. color(window.chartColors.red).alpha(0.35).rgbString()
  535. ],
  536. fill: false,
  537. borderColor: [
  538. window.chartColors.green,
  539. window.chartColors.orange,
  540. window.chartColors.red
  541. ],
  542. borderWidth: 2,
  543. pointRadius: 30,
  544. data: [0, 0, 0]
  545. }]
  546. },
  547. type: 'pie',
  548. options: {
  549. legend: {
  550. display: true
  551. },
  552. title: {
  553. display: false,
  554. text: "测漏气1"
  555. },
  556. tooltips: {
  557. mode: 'point',
  558. intersect: false
  559. },
  560. responsive: true
  561. }
  562. };
  563. var ctxDefectA1 = document.getElementById("canvasDefectA1").getContext("2d");
  564. window.DefectA1 = new Chart(ctxDefectA1, configDefectA1);
  565. //===================================================
  566. //测漏气设备OEE===========================================
  567. window.configDefectA2 = {
  568. data: {
  569. labels: ['工作时间', '等待时间', '故障时间'],
  570. datasets: [{
  571. label: 'OEE',
  572. backgroundColor: [
  573. color(window.chartColors.green).alpha(0.35).rgbString(),
  574. color(window.chartColors.orange).alpha(0.35).rgbString(),
  575. color(window.chartColors.red).alpha(0.35).rgbString()
  576. ],
  577. fill: false,
  578. borderColor: [
  579. window.chartColors.green,
  580. window.chartColors.orange,
  581. window.chartColors.red
  582. ],
  583. borderWidth: 2,
  584. pointRadius: 30,
  585. data: [0, 0, 0]
  586. }]
  587. },
  588. type: 'pie',
  589. options: {
  590. legend: {
  591. display: true
  592. },
  593. title: {
  594. display: false,
  595. text: "测漏气2"
  596. },
  597. tooltips: {
  598. mode: 'point',
  599. intersect: false
  600. },
  601. responsive: true
  602. }
  603. };
  604. var ctxDefectA2 = document.getElementById("canvasDefectA2").getContext("2d");
  605. window.DefectA2 = new Chart(ctxDefectA2, configDefectA2);
  606. //===================================================
  607. //测漏气设备OEE===========================================
  608. window.configDefectA3 = {
  609. data: {
  610. labels: ['工作时间', '等待时间', '故障时间'],
  611. datasets: [{
  612. label: 'OEE',
  613. backgroundColor: [
  614. color(window.chartColors.green).alpha(0.35).rgbString(),
  615. color(window.chartColors.orange).alpha(0.35).rgbString(),
  616. color(window.chartColors.red).alpha(0.35).rgbString()
  617. ],
  618. fill: false,
  619. borderColor: [
  620. window.chartColors.green,
  621. window.chartColors.orange,
  622. window.chartColors.red
  623. ],
  624. borderWidth: 2,
  625. pointRadius: 30,
  626. data: [0, 0, 0]
  627. }]
  628. },
  629. type: 'pie',
  630. options: {
  631. legend: {
  632. display: true
  633. },
  634. title: {
  635. display: false,
  636. text: "测漏气3"
  637. },
  638. tooltips: {
  639. mode: 'point',
  640. intersect: false
  641. },
  642. responsive: true
  643. }
  644. };
  645. var ctxDefectA3 = document.getElementById("canvasDefectA3").getContext("2d");
  646. window.DefectA3 = new Chart(ctxDefectA3, configDefectA3);
  647. //===================================================
  648. //测漏气设备OEE===========================================
  649. window.configDefectA4 = {
  650. data: {
  651. labels: ['工作时间', '等待时间', '故障时间'],
  652. datasets: [{
  653. label: 'OEE',
  654. backgroundColor: [
  655. color(window.chartColors.green).alpha(0.35).rgbString(),
  656. color(window.chartColors.orange).alpha(0.35).rgbString(),
  657. color(window.chartColors.red).alpha(0.35).rgbString()
  658. ],
  659. fill: false,
  660. borderColor: [
  661. window.chartColors.green,
  662. window.chartColors.orange,
  663. window.chartColors.red
  664. ],
  665. borderWidth: 2,
  666. pointRadius: 30,
  667. data: [0, 0, 0]
  668. }]
  669. },
  670. type: 'pie',
  671. options: {
  672. legend: {
  673. display: true
  674. },
  675. title: {
  676. display: false,
  677. text: "测漏气4"
  678. },
  679. tooltips: {
  680. mode: 'point',
  681. intersect: false
  682. },
  683. responsive: true
  684. }
  685. };
  686. var ctxDefectA4 = document.getElementById("canvasDefectA4").getContext("2d");
  687. window.DefectA4 = new Chart(ctxDefectA4, configDefectA4);
  688. //===================================================
  689. //测漏气设备OEE===========================================
  690. window.configDefectA5 = {
  691. data: {
  692. labels: ['工作时间', '等待时间', '故障时间'],
  693. datasets: [{
  694. label: 'OEE',
  695. backgroundColor: [
  696. color(window.chartColors.green).alpha(0.35).rgbString(),
  697. color(window.chartColors.orange).alpha(0.35).rgbString(),
  698. color(window.chartColors.red).alpha(0.35).rgbString()
  699. ],
  700. fill: false,
  701. borderColor: [
  702. window.chartColors.green,
  703. window.chartColors.orange,
  704. window.chartColors.red
  705. ],
  706. borderWidth: 2,
  707. pointRadius: 30,
  708. data: [0, 0, 0]
  709. }]
  710. },
  711. type: 'pie',
  712. options: {
  713. legend: {
  714. display: true
  715. },
  716. title: {
  717. display: false,
  718. text: "测漏气5"
  719. },
  720. tooltips: {
  721. mode: 'point',
  722. intersect: false
  723. },
  724. responsive: true
  725. }
  726. };
  727. var ctxDefectA5 = document.getElementById("canvasDefectA5").getContext("2d");
  728. window.DefectA5 = new Chart(ctxDefectA5, configDefectA5);
  729. //===================================================
  730. //测漏气设备OEE===========================================
  731. window.configDefectA6 = {
  732. data: {
  733. labels: ['工作时间', '等待时间', '故障时间'],
  734. datasets: [{
  735. label: 'OEE',
  736. backgroundColor: [
  737. color(window.chartColors.green).alpha(0.35).rgbString(),
  738. color(window.chartColors.orange).alpha(0.35).rgbString(),
  739. color(window.chartColors.red).alpha(0.35).rgbString()
  740. ],
  741. fill: false,
  742. borderColor: [
  743. window.chartColors.green,
  744. window.chartColors.orange,
  745. window.chartColors.red
  746. ],
  747. borderWidth: 2,
  748. pointRadius: 30,
  749. data: [0, 0, 0]
  750. }]
  751. },
  752. type: 'pie',
  753. options: {
  754. legend: {
  755. display: true
  756. },
  757. title: {
  758. display: false,
  759. text: "测漏气6"
  760. },
  761. tooltips: {
  762. mode: 'point',
  763. intersect: false
  764. },
  765. responsive: true
  766. }
  767. };
  768. var ctxDefectA6 = document.getElementById("canvasDefectA6").getContext("2d");
  769. window.DefectA6 = new Chart(ctxDefectA6, configDefectA6);
  770. //===================================================
  771. //测漏气设备OEE===========================================
  772. window.configDefectA7 = {
  773. data: {
  774. labels: ['工作时间', '等待时间', '故障时间'],
  775. datasets: [{
  776. label: 'OEE',
  777. backgroundColor: [
  778. color(window.chartColors.green).alpha(0.35).rgbString(),
  779. color(window.chartColors.orange).alpha(0.35).rgbString(),
  780. color(window.chartColors.red).alpha(0.35).rgbString()
  781. ],
  782. fill: false,
  783. borderColor: [
  784. window.chartColors.green,
  785. window.chartColors.orange,
  786. window.chartColors.red
  787. ],
  788. borderWidth: 2,
  789. pointRadius: 30,
  790. data: [0, 0, 0]
  791. }]
  792. },
  793. type: 'pie',
  794. options: {
  795. legend: {
  796. display: true
  797. },
  798. title: {
  799. display: false,
  800. text: "测漏气7"
  801. },
  802. tooltips: {
  803. mode: 'point',
  804. intersect: false
  805. },
  806. responsive: true
  807. }
  808. };
  809. var ctxDefectA7 = document.getElementById("canvasDefectA7").getContext("2d");
  810. window.DefectA7 = new Chart(ctxDefectA7, configDefectA7);
  811. //===================================================
  812. //测漏气设备OEE===========================================
  813. window.configDefectA8 = {
  814. data: {
  815. labels: ['工作时间', '等待时间', '故障时间'],
  816. datasets: [{
  817. label: 'OEE',
  818. backgroundColor: [
  819. color(window.chartColors.green).alpha(0.35).rgbString(),
  820. color(window.chartColors.orange).alpha(0.35).rgbString(),
  821. color(window.chartColors.red).alpha(0.35).rgbString()
  822. ],
  823. fill: false,
  824. borderColor: [
  825. window.chartColors.green,
  826. window.chartColors.orange,
  827. window.chartColors.red
  828. ],
  829. borderWidth: 2,
  830. pointRadius: 30,
  831. data: [0, 0, 0]
  832. }]
  833. },
  834. type: 'pie',
  835. options: {
  836. legend: {
  837. display: true
  838. },
  839. title: {
  840. display: false,
  841. text: "测漏气8"
  842. },
  843. tooltips: {
  844. mode: 'point',
  845. intersect: false
  846. },
  847. responsive: true
  848. }
  849. };
  850. var ctxDefectA8 = document.getElementById("canvasDefectA8").getContext("2d");
  851. window.DefectA8 = new Chart(ctxDefectA8, configDefectA8);
  852. //===================================================
  853. window.configDefectA9 = {
  854. data: {
  855. labels: ['工作时间', '等待时间', '故障时间'],
  856. datasets: [{
  857. label: 'OEE',
  858. backgroundColor: [
  859. color(window.chartColors.green).alpha(0.35).rgbString(),
  860. color(window.chartColors.orange).alpha(0.35).rgbString(),
  861. color(window.chartColors.red).alpha(0.35).rgbString()
  862. ],
  863. fill: false,
  864. borderColor: [
  865. window.chartColors.green,
  866. window.chartColors.orange,
  867. window.chartColors.red
  868. ],
  869. borderWidth: 2,
  870. pointRadius: 30,
  871. data: [0, 0, 0]
  872. }]
  873. },
  874. type: 'pie',
  875. options: {
  876. legend: {
  877. display: true
  878. },
  879. title: {
  880. display: false,
  881. text: "倒水机1"
  882. },
  883. tooltips: {
  884. mode: 'point',
  885. intersect: false
  886. },
  887. responsive: true
  888. }
  889. };
  890. var ctxDefectA9 = document.getElementById("canvasDefectA9").getContext("2d");
  891. window.DefectA9 = new Chart(ctxDefectA9, configDefectA9);
  892. window.configDefectA10 = {
  893. data: {
  894. labels: ['工作时间', '等待时间', '故障时间'],
  895. datasets: [{
  896. label: 'OEE',
  897. backgroundColor: [
  898. color(window.chartColors.green).alpha(0.35).rgbString(),
  899. color(window.chartColors.orange).alpha(0.35).rgbString(),
  900. color(window.chartColors.red).alpha(0.35).rgbString()
  901. ],
  902. fill: false,
  903. borderColor: [
  904. window.chartColors.green,
  905. window.chartColors.orange,
  906. window.chartColors.red
  907. ],
  908. borderWidth: 2,
  909. pointRadius: 30,
  910. data: [0, 0, 0]
  911. }]
  912. },
  913. type: 'pie',
  914. options: {
  915. legend: {
  916. display: true
  917. },
  918. title: {
  919. display: false,
  920. text: "倒水机2"
  921. },
  922. tooltips: {
  923. mode: 'point',
  924. intersect: false
  925. },
  926. responsive: true
  927. }
  928. };
  929. var ctxDefectA10 = document.getElementById("canvasDefectA10").getContext("2d");
  930. window.DefectA10 = new Chart(ctxDefectA10, configDefectA10);
  931. window.configDefectA11 = {
  932. data: {
  933. labels: ['工作时间', '等待时间', '故障时间'],
  934. datasets: [{
  935. label: 'OEE',
  936. backgroundColor: [
  937. color(window.chartColors.green).alpha(0.35).rgbString(),
  938. color(window.chartColors.orange).alpha(0.35).rgbString(),
  939. color(window.chartColors.red).alpha(0.35).rgbString()
  940. ],
  941. fill: false,
  942. borderColor: [
  943. window.chartColors.green,
  944. window.chartColors.orange,
  945. window.chartColors.red
  946. ],
  947. borderWidth: 2,
  948. pointRadius: 30,
  949. data: [0, 0, 0]
  950. }]
  951. },
  952. type: 'pie',
  953. options: {
  954. legend: {
  955. display: true
  956. },
  957. title: {
  958. display: false,
  959. text: "倒水机3"
  960. },
  961. tooltips: {
  962. mode: 'point',
  963. intersect: false
  964. },
  965. responsive: true
  966. }
  967. };
  968. var ctxDefectA11 = document.getElementById("canvasDefectA11").getContext("2d");
  969. window.DefectA11 = new Chart(ctxDefectA11, configDefectA11);
  970. window.configDefectA12 = {
  971. data: {
  972. labels: ['工作时间', '等待时间', '故障时间'],
  973. datasets: [{
  974. label: 'OEE',
  975. backgroundColor: [
  976. color(window.chartColors.green).alpha(0.35).rgbString(),
  977. color(window.chartColors.orange).alpha(0.35).rgbString(),
  978. color(window.chartColors.red).alpha(0.35).rgbString()
  979. ],
  980. fill: false,
  981. borderColor: [
  982. window.chartColors.green,
  983. window.chartColors.orange,
  984. window.chartColors.red
  985. ],
  986. borderWidth: 2,
  987. pointRadius: 30,
  988. data: [0, 0, 0]
  989. }]
  990. },
  991. type: 'pie',
  992. options: {
  993. legend: {
  994. display: true
  995. },
  996. title: {
  997. display: false,
  998. text: "倒水机4"
  999. },
  1000. tooltips: {
  1001. mode: 'point',
  1002. intersect: false
  1003. },
  1004. responsive: true
  1005. }
  1006. };
  1007. var ctxDefectA12 = document.getElementById("canvasDefectA12").getContext("2d");
  1008. window.DefectA12 = new Chart(ctxDefectA12, configDefectA12);
  1009. ////试水设备OEE===========================================
  1010. //window.configDefectB1 = {
  1011. // data: {
  1012. // labels: ['工作时间', '等待时间', '故障时间'],
  1013. // datasets: [{
  1014. // label: 'OEE',
  1015. // backgroundColor: [
  1016. // color(window.chartColors.green).alpha(0.35).rgbString(),
  1017. // color(window.chartColors.orange).alpha(0.35).rgbString()
  1018. // ],
  1019. // fill: false,
  1020. // borderColor: [
  1021. // window.chartColors.green,
  1022. // window.chartColors.orange
  1023. // ],
  1024. // borderWidth: 2,
  1025. // pointRadius: 30,
  1026. // data: [0,0,0]
  1027. // }]
  1028. // },
  1029. // type: 'pie',
  1030. // options: {
  1031. // legend: {
  1032. // display: true
  1033. // },
  1034. // title: {
  1035. // display: false,
  1036. // text: "试水1"
  1037. // },
  1038. // tooltips: {
  1039. // mode: 'point',
  1040. // intersect: false
  1041. // },
  1042. // responsive: true
  1043. // }
  1044. //};
  1045. //var ctxDefectB1 = document.getElementById("canvasDefectB1").getContext("2d");
  1046. //window.DefectB1 = new Chart(ctxDefectB1, configDefectB1);
  1047. ////===================================================
  1048. ////试水设备OEE===========================================
  1049. //window.configDefectB2 = {
  1050. // data: {
  1051. // labels: ['工作时间', '等待时间', '故障时间'],
  1052. // datasets: [{
  1053. // label: 'OEE',
  1054. // backgroundColor: [
  1055. // color(window.chartColors.green).alpha(0.35).rgbString(),
  1056. // color(window.chartColors.orange).alpha(0.35).rgbString()
  1057. // ],
  1058. // fill: false,
  1059. // borderColor: [
  1060. // window.chartColors.green,
  1061. // window.chartColors.orange
  1062. // ],
  1063. // borderWidth: 2,
  1064. // pointRadius: 30,
  1065. // data: [0,0,0]
  1066. // }]
  1067. // },
  1068. // type: 'pie',
  1069. // options: {
  1070. // legend: {
  1071. // display: true
  1072. // },
  1073. // title: {
  1074. // display: false,
  1075. // text: "试水2"
  1076. // },
  1077. // tooltips: {
  1078. // mode: 'point',
  1079. // intersect: false
  1080. // },
  1081. // responsive: true
  1082. // }
  1083. //};
  1084. //var ctxDefectB2 = document.getElementById("canvasDefectB2").getContext("2d");
  1085. //window.DefectB2 = new Chart(ctxDefectB2, configDefectB2);
  1086. ////===================================================
  1087. ////试水设备OEE===========================================
  1088. //window.configDefectB3 = {
  1089. // data: {
  1090. // labels: ['工作时间', '等待时间', '故障时间'],
  1091. // datasets: [{
  1092. // label: 'OEE',
  1093. // backgroundColor: [
  1094. // color(window.chartColors.green).alpha(0.35).rgbString(),
  1095. // color(window.chartColors.orange).alpha(0.35).rgbString()
  1096. // ],
  1097. // fill: false,
  1098. // borderColor: [
  1099. // window.chartColors.green,
  1100. // window.chartColors.orange
  1101. // ],
  1102. // borderWidth: 2,
  1103. // pointRadius: 30,
  1104. // data: [0,0,0]
  1105. // }]
  1106. // },
  1107. // type: 'pie',
  1108. // options: {
  1109. // legend: {
  1110. // display: true
  1111. // },
  1112. // title: {
  1113. // display: false,
  1114. // text: "试水3"
  1115. // },
  1116. // tooltips: {
  1117. // mode: 'point',
  1118. // intersect: false
  1119. // },
  1120. // responsive: true
  1121. // }
  1122. //};
  1123. //var ctxDefectB3 = document.getElementById("canvasDefectB3").getContext("2d");
  1124. //window.DefectB3 = new Chart(ctxDefectB3, configDefectB3);
  1125. ////===================================================
  1126. ////试水设备OEE===========================================
  1127. //window.configDefectB4 = {
  1128. // data: {
  1129. // labels: ['工作时间', '等待时间', '故障时间'],
  1130. // datasets: [{
  1131. // label: 'OEE',
  1132. // backgroundColor: [
  1133. // color(window.chartColors.green).alpha(0.35).rgbString(),
  1134. // color(window.chartColors.orange).alpha(0.35).rgbString()
  1135. // ],
  1136. // fill: false,
  1137. // borderColor: [
  1138. // window.chartColors.green,
  1139. // window.chartColors.orange
  1140. // ],
  1141. // borderWidth: 2,
  1142. // pointRadius: 30,
  1143. // data: [0,0,0]
  1144. // }]
  1145. // },
  1146. // type: 'pie',
  1147. // options: {
  1148. // legend: {
  1149. // display: true
  1150. // },
  1151. // title: {
  1152. // display: false,
  1153. // text: "试水4"
  1154. // },
  1155. // tooltips: {
  1156. // mode: 'point',
  1157. // intersect: false
  1158. // },
  1159. // responsive: true
  1160. // }
  1161. //};
  1162. //var ctxDefectB4 = document.getElementById("canvasDefectB4").getContext("2d");
  1163. //window.DefectB4 = new Chart(ctxDefectB4, configDefectB4);
  1164. ////===================================================
  1165. }
  1166. </script>
  1167. <script src="/Plugins/chartjs-2.8.0/chart-2.8.min.js"></script>
  1168. <script src="/Plugins/chartjs-2.8.0/chartjs-plugin-datalabels.js"></script>
  1169. <script src="/Plugins/chartjs-2.8.0/utils.js"></script>
  1170. <script src="/Plugins/circleChart/circleChart.min.js"></script>
  1171. <style>
  1172. .isGreen {
  1173. background-color: #33bad7;
  1174. box-shadow: 0 0 15px #13e5eb;
  1175. }
  1176. .isOrange {
  1177. background-color: #dd8935;
  1178. box-shadow: 0 0 15px orange;
  1179. }
  1180. .isRed {
  1181. background-color: #cf406d;
  1182. box-shadow: 0 0 15px #c35678;
  1183. }
  1184. .isWhite {
  1185. background-color: white;
  1186. box-shadow: 0 0 15px white;
  1187. }
  1188. </style>
  1189. </body>
  1190. </html>