clean - 複製.html 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Smart Coffee - clean</title>
  6. <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  7. <!-- 新 Bootstrap4 核心 CSS 文件 -->
  8. <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.1.0/css/bootstrap.min.css">
  9. <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
  10. <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
  11. <!-- popper.min.js 用于弹窗、提示、下拉菜单 -->
  12. <script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script>
  13. <!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
  14. <script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
  15. <!--
  16. <script src="../static/js/sign_in.js"></script>
  17. <link rel="stylesheet" href="../static/css/sign_in.css">
  18. -->
  19. <style>
  20. .C1_position {
  21. position: absolute;
  22. top: 135px;
  23. left: 210px;
  24. width: 170px;
  25. height: 230px;
  26. border-style: solid;
  27. border-color: aqua;
  28. }
  29. .C2_position {
  30. position: absolute;
  31. top: 400px;
  32. left: 210px;
  33. width: 170px;
  34. height: 230px;
  35. border-style: solid;
  36. border-color: aqua;
  37. }
  38. .S1_position {
  39. position: absolute;
  40. top: 135px;
  41. left: 550px;
  42. width: 170px;
  43. height: 230px;
  44. border-style: solid;
  45. border-color: aqua;
  46. }
  47. .S2_position {
  48. position: absolute;
  49. top: 400px;
  50. left: 550px;
  51. width: 170px;
  52. height: 230px;
  53. border-style: solid;
  54. border-color: aqua;
  55. }
  56. .P1_position {
  57. position: absolute;
  58. top: 135px;
  59. left: 890px;
  60. width: 170px;
  61. height: 230px;
  62. border-style: solid;
  63. border-color: aqua;
  64. }
  65. .P2_position {
  66. position: absolute;
  67. top: 400px;
  68. left: 890px;
  69. width: 170px;
  70. height: 230px;
  71. border-style: solid;
  72. border-color: aqua;
  73. }
  74. </style>
  75. <script language="JavaScript">
  76. // 指定 10秒 刷新網頁一次
  77. var WebRestart
  78. // WebRestart = setTimeout(function () { location.reload() }, 10000);
  79. </script>
  80. </head>
  81. <body>
  82. <!--
  83. background-color:rgb(0, 238, 255);
  84. -->
  85. <div style="text-align: center; margin-top: 30px;font-size: 24px;">
  86. Smart Coffee
  87. </div>
  88. <div>
  89. <!-- 底圖 清洗浮選貨櫃 12 個清洗浮選桶槽 -->
  90. <center><img src="../static/img/web_CleanColorPeel_container.png" width="1500x" style="margin: auto;"></center>
  91. <!-- 清洗浮選槽 C1 -->
  92. <div id="C1" tabindex="0" class="C1_position" role="button">
  93. C1 status
  94. <!-- C1 狀態點點-->
  95. <div id="C1_status" style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>
  96. </div>
  97. <!-- 清洗浮選槽 C2 -->
  98. <div id="C2" tabindex="0" class="C2_position" role="button">
  99. C2 status
  100. <div id="C2_status" style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>
  101. </div>
  102. <!-- 色選機 S1 -->
  103. <div id="S1" tabindex="0" class="S1_position" role="button">
  104. S1 status
  105. <div id="S1_status" style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>
  106. </div>
  107. <!-- 色選機 S2 -->
  108. <div id="S2" tabindex="0" class="S2_position" role="button">
  109. S2 status
  110. <div id="S2_status" style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>
  111. </div>
  112. <!-- 脫皮機 P1 -->
  113. <div id="P1" tabindex="0" class="P1_position" role="button">
  114. P1 status
  115. <div id="P1_status" style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>
  116. </div>
  117. <!-- 脫皮機 P2 -->
  118. <div id="P2" tabindex="0" class="P2_position" role="button">
  119. P2 status
  120. <div id="P2_status" style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>
  121. </div>
  122. </div>
  123. <!-- 模态框 -->
  124. <div class="modal fade" id="C1_Modal">
  125. <div class="modal-dialog modal-dialog-centered" style="width: 400px;">
  126. <div class="modal-content">
  127. <div class="modal-header">
  128. <h4 class="modal-title">清洗浮選槽 C1 狀態</h4>
  129. <button type="button" class="close" data-dismiss="modal">&times;</button>
  130. </div>
  131. <!-- 模态框主体 -->
  132. <div class="modal-body">
  133. <table style="border:0px gray solid; width: 100%;" cellpadding="3">
  134. <!--<table style="border:0px gray solid;-->
  135. <tr>
  136. <td><strong><a href="/clean_container/1">制動器狀態</a></strong></td>
  137. <td><strong><a href="/clean_container/1">感測器狀態</a></strong></td>
  138. </tr>
  139. <tr>
  140. <td style="vertical-align:text-top;">
  141. <table style="border:0px gray solid;" cellpadding="3">
  142. <tr>
  143. <td>
  144. <div id="tank_vacuum_status"
  145. style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
  146. </div>
  147. {% if tank_vacuum=='ON' %}
  148. <div id="C1_vacuum_tatus" style="width: 18px; height: 18px; background-color: forestgreen; border-radius: 50%;"></div>
  149. {% elif tank_vacuum=='OFF' %}
  150. <div id="C1_vacuum_tatus" style="width: 18px; height: 18px; background-color: #C0C0C0; border-radius: 50%;"></div>
  151. {% else %}
  152. <div id="C1_vacuum_tatus" style="width: 18px; height: 18px; background-color:crimson; border-radius: 50%;"></div>
  153. {% endif %}
  154. </td>
  155. <td>
  156. 真空吸料機
  157. </td>
  158. </tr>
  159. <tr>
  160. <td>
  161. <div id="tank_vacuum_status"
  162. style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
  163. </div>
  164. {% if tank_pump_waterFloat=='ON' %}
  165. <div id="C1_pump_waterFloat_tatus" style="width: 18px; height: 18px; background-color: forestgreen; border-radius: 50%;"></div>
  166. {% elif tank_pump_waterFloat=='OFF' %}
  167. <div id="C1_pump_waterFloat_tatus" style="width: 18px; height: 18px; background-color: #C0C0C0; border-radius: 50%;"></div>
  168. {% else %}
  169. <div id="C1_pump_waterFloat_tatus" style="width: 18px; height: 18px; background-color:crimson; border-radius: 50%;"></div>
  170. {% endif %}
  171. </td>
  172. <td>
  173. 浮選槽注水雙核隔膜泵
  174. </td>
  175. </tr>
  176. <tr>
  177. <td>
  178. <div id="tank_vacuum_status"
  179. style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
  180. </div>
  181. {% if tank_pump_waterL2=='ON' %}
  182. <div id="C1_pump_waterL2_tatus" style="width: 18px; height: 18px; background-color: forestgreen; border-radius: 50%;"></div>
  183. {% elif tank_pump_waterL2=='OFF' %}
  184. <div id="C1_pump_waterL2_tatus" style="width: 18px; height: 18px; background-color: #C0C0C0; border-radius: 50%;"></div>
  185. {% else %}
  186. <div id="C1_pump_waterL2_tatus" style="width: 18px; height: 18px; background-color:crimson; border-radius: 50%;"></div>
  187. {% endif %}
  188. </td>
  189. <td>
  190. 第 2 層灑水雙核隔膜泵
  191. </td>
  192. </tr>
  193. <tr>
  194. <td>
  195. <div id="tank_vacuum_status"
  196. style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
  197. </div>
  198. {% if tank_pump_waterL4=='ON' %}
  199. <div id="C1_pump_waterL4_tatus" style="width: 18px; height: 18px; background-color: forestgreen; border-radius: 50%;"></div>
  200. {% elif tank_pump_waterL4=='OFF' %}
  201. <div id="C1_pump_waterL4_tatus" style="width: 18px; height: 18px; background-color: #C0C0C0; border-radius: 50%;"></div>
  202. {% else %}
  203. <div id="C1_pump_waterL4_tatus" style="width: 18px; height: 18px; background-color:crimson; border-radius: 50%;"></div>
  204. {% endif %}
  205. </td>
  206. <td>
  207. 第 4 層灑水雙核隔膜泵
  208. </td>
  209. </tr>
  210. <tr>
  211. <td>
  212. <div id="tank_vacuum_status"
  213. style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
  214. </div>
  215. {% if tank_solenoid_waterL3=='ON' %}
  216. <div id="C1_solenoid_waterL3_tatus" style="width: 18px; height: 18px; background-color: forestgreen; border-radius: 50%;"></div>
  217. {% elif tank_vacuum=='OFF' %}
  218. <div id="C1_solenoid_waterL3_tatus" style="width: 18px; height: 18px; background-color: #C0C0C0; border-radius: 50%;"></div>
  219. {% else %}
  220. <div id="C1_solenoid_waterL3_tatus" style="width: 18px; height: 18px; background-color:crimson; border-radius: 50%;"></div>
  221. {% endif %}
  222. </td>
  223. <td>
  224. 清洗第 3 層電磁閥
  225. </td>
  226. </tr>
  227. <tr>
  228. <td>
  229. <div id="tank_vacuum_status"
  230. style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
  231. </div>
  232. {% if tank_solenoid_waterL5=='ON' %}
  233. <div id="C1_solenoid_waterL5_tatus" style="width: 18px; height: 18px; background-color: forestgreen; border-radius: 50%;"></div>
  234. {% elif tank_solenoid_waterL5=='OFF' %}
  235. <div id="C1_solenoid_waterL5_tatus" style="width: 18px; height: 18px; background-color: #C0C0C0; border-radius: 50%;"></div>
  236. {% else %}
  237. <div id="C1_solenoid_waterL5_tatus" style="width: 18px; height: 18px; background-color:crimson; border-radius: 50%;"></div>
  238. {% endif %}
  239. </td>
  240. <td>
  241. 清洗第 5 層電磁閥
  242. </td>
  243. </tr>
  244. <tr>
  245. <td>
  246. <div id="tank_vacuum_status"
  247. style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
  248. </div>
  249. {% if tank_stepping_motor==0 %}
  250. <div id="C1_steppingmotor_tatus" style="width: 18px; height: 18px; background-color: #C0C0C0; border-radius: 50%;"></div>
  251. {% elif (tank_stepping_motor>0) or (0>tank_stepping_motor) %}
  252. <div id="C1_steppingmotor_tatus" style="width: 18px; height: 18px; background-color: forestgreen; border-radius: 50%;"></div>
  253. {% else %}
  254. <div id="C1_steppingmotor_tatus" style="width: 18px; height: 18px; background-color:crimson; border-radius: 50%;"></div>
  255. {% endif %}
  256. </td>
  257. <td>
  258. ***步進馬達***
  259. </td>
  260. </tr>
  261. </table>
  262. </td>
  263. <td style="vertical-align:text-top;">
  264. <table style="border:0px gray solid;" cellpadding="3">
  265. <tr>
  266. <td>
  267. 咖啡生豆高度
  268. </td>
  269. <td>
  270. {{tank_UltraSonic.UltraSonic}}
  271. </td>
  272. </tr>
  273. </table>
  274. </td>
  275. </tr>
  276. </table>
  277. </div>
  278. </div>
  279. </div>
  280. </div>
  281. </div>
  282. <script>
  283. function update_data_C(ctid) {
  284. console.log('cleaning_tank_id:' + ctid)
  285. $.get('/loading/C' + ctid, '', function (res) {
  286. }, 'json');
  287. $('#C1_Modal').modal('show');
  288. }
  289. function update_data_S(stid) {
  290. console.log('ColorSelection_tank_id:' + stid)
  291. $.get('/loading/S' + stid, '', function (res) {
  292. }, 'json');
  293. $('#S1_Modal').modal('show');
  294. }
  295. function update_data_P(ptid) {
  296. console.log('peeling_tank_id:' + ptid)
  297. $.get('/loading/P' + ptid, '', function (res) {
  298. }, 'json');
  299. $('#P1_Modal').modal('show');
  300. }
  301. var button_C1 = document.getElementById('C1');
  302. button_C1.addEventListener('click', function () { update_data_C("1") });
  303. var button_C2 = document.getElementById('C2');
  304. button_C2.addEventListener('click', function () { update_data_C("2") });
  305. var button_S1 = document.getElementById('S1');
  306. button_S1.addEventListener('click', function () { update_data_S("1") });
  307. var button_S2 = document.getElementById('S2');
  308. button_S2.addEventListener('click', function () { update_data_S("2") });
  309. var button_P1 = document.getElementById('P1');
  310. button_P1.addEventListener('click', function () { update_data_P("1") });
  311. var button_P2 = document.getElementById('P2');
  312. button_P2.addEventListener('click', function () { update_data_P("2") });
  313. </script>
  314. </body>
  315. </html>