1
0

clean_1118備份測試footer.html 40 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>{{ title }}</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. <script>
  20. $(document).ready(function(){
  21. $("#coffee_title_pc").text('清洗貨櫃');
  22. $("#coffee_title_phone").text('清洗貨櫃');
  23. });
  24. </script>
  25. <style>
  26. .C1_position {
  27. position: absolute;
  28. top: 135px;
  29. left: 205px;
  30. width: 175px;
  31. height: 230px;
  32. border-style: solid;
  33. border-color: aqua;
  34. }
  35. .C2_position {
  36. position: absolute;
  37. top: 400px;
  38. left: 205px;
  39. width: 175px;
  40. height: 230px;
  41. border-style: solid;
  42. border-color: aqua;
  43. }
  44. .CO1_position {
  45. position: absolute;
  46. top: 135px;
  47. left: 400px;
  48. width: 175px;
  49. height: 230px;
  50. border-style: solid;
  51. border-color: aqua;
  52. }
  53. .CO2_position {
  54. position: absolute;
  55. top: 400px;
  56. left: 400px;
  57. width: 175px;
  58. height: 230px;
  59. border-style: solid;
  60. border-color: aqua;
  61. }
  62. .S1_position {
  63. position: absolute;
  64. top: 135px;
  65. left: 945px;
  66. width: 115px;
  67. height: 230px;
  68. border-style: solid;
  69. border-color: aqua;
  70. }
  71. .S2_position {
  72. position: absolute;
  73. top: 400px;
  74. left: 945px;
  75. width: 115px;
  76. height: 230px;
  77. border-style: solid;
  78. border-color: aqua;
  79. }
  80. .SO1_position {
  81. position: absolute;
  82. top: 135px;
  83. left: 1065px;
  84. width: 60px;
  85. height: 230px;
  86. border-style: solid;
  87. border-color: aqua;
  88. }
  89. .SO2_position {
  90. position: absolute;
  91. top: 400px;
  92. left: 1065px;
  93. width: 60px;
  94. height: 230px;
  95. border-style: solid;
  96. border-color: aqua;
  97. }
  98. .P1_position {
  99. position: absolute;
  100. top: 135px;
  101. left: 1150px;
  102. width: 95px;
  103. height: 230px;
  104. border-style: solid;
  105. border-color: aqua;
  106. }
  107. .P2_position {
  108. position: absolute;
  109. top: 400px;
  110. left: 1150px;
  111. width: 95px;
  112. height: 230px;
  113. border-style: solid;
  114. border-color: aqua;
  115. }
  116. .PO1_position {
  117. position: absolute;
  118. top: 135px;
  119. left: 1250px;
  120. width: 50px;
  121. height: 230px;
  122. border-style: solid;
  123. border-color: aqua;
  124. }
  125. .PO2_position {
  126. position: absolute;
  127. top: 400px;
  128. left: 1250px;
  129. width: 50px;
  130. height: 230px;
  131. border-style: solid;
  132. border-color: aqua;
  133. }
  134. /* .footer{
  135. position: absolute;
  136. bottom: 0px;
  137. width: 100%;
  138. background-color: #eee;
  139. text-align: center;
  140. } */
  141. </style>
  142. <script language="JavaScript">
  143. // 指定 10秒 刷新網頁一次
  144. var WebRestart
  145. // WebRestart = setTimeout(function () { location.reload() }, 10000);
  146. </script>
  147. </head>
  148. <body>
  149. <div id="wrapper">
  150. <div id="coffee_header">
  151. <!-- 匯入共同使用的 header.html 內容 -->
  152. {% include 'header.html' %}
  153. </div>
  154. <!--
  155. background-color:rgb(0, 238, 255);
  156. -->
  157. <!--
  158. <div style="text-align: left;">
  159. <a href="/index_new" style="float: left;">&nbsp;&nbsp;&nbsp;返回貨櫃首頁</a>
  160. </div>
  161. <div style="text-align: right;">
  162. <a href="/camera_clean" style="float: right;">清洗貨櫃攝影機&nbsp;&nbsp;&nbsp;</a>
  163. </div>
  164. <div style="text-align: center; margin-top: 30px; font-size: 24px;">
  165. Smart Coffee
  166. </div>
  167. -->
  168. <div>
  169. <!-- 底圖 清洗浮選貨櫃 12 個清洗浮選桶槽 -->
  170. <center><img src="../static/img/web_CleanColorPeel_container.png" style="margin: auto; width: 1430px;"></center>
  171. <!-- 清洗浮選槽 C1 -->
  172. <div id="C1" tabindex="0" class="C1_position" role="button">
  173. C1 status
  174. <!-- C1 狀態點點-->
  175. <div id="C1_status" style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>
  176. </div>
  177. <!-- 清洗浮選槽 C2 -->
  178. <div id="C2" tabindex="0" class="C2_position" role="button">
  179. C2 status
  180. <div id="C2_status" style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>
  181. </div>
  182. <!-- 清洗浮選 CO1 出料儲豆槽 -->
  183. <div id="CO1" tabindex="0" class="CO1_position" role="button">
  184. CO1 status
  185. <!-- CO1 狀態點點-->
  186. <div id="CO1_status" style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>
  187. </div>
  188. <!-- 清洗浮選 CO2 出料儲豆槽 -->
  189. <div id="CO2" tabindex="0" class="CO2_position" role="button">
  190. CO2 status
  191. <!-- CO2 狀態點點-->
  192. <div id="CO2_status" style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>
  193. </div>
  194. <!-- 色選機 S1 -->
  195. <div id="S1" tabindex="0" class="S1_position" role="button">
  196. S1 status
  197. <div id="S1_status" style="width: 20px; height: 20px; background-color: crimson; border-radius: 50%;"></div>
  198. </div>
  199. <!-- 色選機 S2 -->
  200. <div id="S2" tabindex="0" class="S2_position" role="button">
  201. S2 status
  202. <div id="S2_status" style="width: 20px; height: 20px; background-color: crimson; border-radius: 50%;"></div>
  203. </div>
  204. <!-- 色選機 SO1 出料儲豆槽 -->
  205. <div id="SO1" tabindex="0" class="SO1_position" role="button">
  206. SO1 status
  207. <div id="SO1_status" style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>
  208. </div>
  209. <!-- 色選機 SO2 出料儲豆槽 -->
  210. <div id="SO2" tabindex="0" class="SO2_position" role="button">
  211. SO2 status
  212. <div id="SO2_status" style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>
  213. </div>
  214. <!-- 脫皮機 P1 -->
  215. <div id="P1" tabindex="0" class="P1_position" role="button">
  216. P1 status
  217. <div id="P1_status" style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>
  218. </div>
  219. <!-- 脫皮機 P2 -->
  220. <div id="P2" tabindex="0" class="P2_position" role="button">
  221. P2 status
  222. <div id="P2_status" style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>
  223. </div>
  224. <!-- 脫皮機 PO1 出料儲豆槽 -->
  225. <div id="PO1" tabindex="0" class="PO1_position" role="button">
  226. PO1 status
  227. <div id="PO1_status" style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>
  228. </div>
  229. <!-- 脫皮機 PO2 出料儲豆槽 -->
  230. <div id="PO2" tabindex="0" class="PO2_position" role="button">
  231. PO2 status
  232. <div id="PO2_status" style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>
  233. </div>
  234. </div>
  235. <!-- 清洗浮選 模态框 -->
  236. <div class="modal fade" id="C_Modal">
  237. <div class="modal-dialog modal-dialog-centered" style="width: 400px;">
  238. <div class="modal-content">
  239. <div class="modal-header">
  240. <h4 id="C_Modal_title" class="modal-title">清洗浮選槽 C1 狀態</h4>
  241. <button type="button" class="close" data-dismiss="modal">&times;</button>
  242. </div>
  243. <!-- 模态框主体 -->
  244. <div class="modal-body">
  245. <table style="border:0px gray solid; width: 100%;" cellpadding="3">
  246. <!--<table style="border:0px gray solid;-->
  247. <tr>
  248. <td><strong><a id="C_actuator_link" href="/clean_container/1">制動器狀態</a></strong></td>
  249. <td><strong><a id="C_sensor_link" href="/clean_container/1">感測器狀態</a></strong></td>
  250. </tr>
  251. <tr>
  252. <td style="vertical-align:text-top;">
  253. <table style="border:0px gray solid;" cellpadding="3">
  254. <tr>
  255. <td>
  256. <div id="C_vacuum_status"
  257. style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
  258. </div>
  259. </td>
  260. <td>
  261. 真空吸料機
  262. </td>
  263. </tr>
  264. <tr>
  265. <td>
  266. <div id="tank_pump_waterInput_status"
  267. style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
  268. </div>
  269. </td>
  270. <td>
  271. 入水口_雙核泵
  272. </td>
  273. </tr>
  274. <tr>
  275. <td>
  276. <div id="tank_pump_waterL2L3_status"
  277. style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
  278. </div>
  279. </td>
  280. <td>
  281. 出水口 2、3_雙核泵
  282. </td>
  283. </tr>
  284. <tr>
  285. <td>
  286. <div id="tank_pump_waterL4L5_status"
  287. style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
  288. </div>
  289. </td>
  290. <td>
  291. 出水口 4、5_雙核泵
  292. </td>
  293. </tr>
  294. <tr>
  295. <td>
  296. <div id="tank_solenoid_waterL2L3_status"
  297. style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
  298. </div>
  299. </td>
  300. <td>
  301. 出水口 2、3_電磁閥
  302. </td>
  303. </tr>
  304. <tr>
  305. <td>
  306. <div id="tank_solenoid_waterL4L5_status"
  307. style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
  308. </div>
  309. </td>
  310. <td>
  311. 出水口 4、5_電磁閥
  312. </td>
  313. </tr>
  314. <tr>
  315. <td>
  316. <div id="tank_stepping_motor_status"
  317. style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
  318. </div>
  319. </td>
  320. <td>
  321. 步進馬達
  322. </td>
  323. </tr>
  324. </table>
  325. </td>
  326. <td style="vertical-align:text-top;">
  327. <table style="border:0px gray solid;" cellpadding="3">
  328. <tr>
  329. <td>
  330. 咖啡生豆高度
  331. </td>
  332. <td>
  333. <span id="UltraSonic_t_status"></span>
  334. </td>
  335. </tr>
  336. <tr>
  337. <td>
  338. <a id="camera_clean_tid" href=""><strong>攝影機畫面</strong></a>
  339. </td>
  340. </tr>
  341. </table>
  342. </td>
  343. </tr>
  344. </table>
  345. </div>
  346. </div>
  347. </div>
  348. </div>
  349. <!-- 清洗浮選 出料儲豆槽 模态框 -->
  350. <div class="modal fade" id="CO_Modal">
  351. <div class="modal-dialog modal-dialog-centered" style="width: 400px;">
  352. <div class="modal-content">
  353. <div class="modal-header">
  354. <h4 id="CO_Modal_title" class="modal-title">清洗浮選出料儲豆槽 CO1 狀態</h4>
  355. <button type="button" class="close" data-dismiss="modal">&times;</button>
  356. </div>
  357. <!-- 模态框主体 -->
  358. <div class="modal-body">
  359. <table style="border:0px gray solid; width: 100%;" cellpadding="3">
  360. <!--<table style="border:0px gray solid;-->
  361. <tr>
  362. <td><strong><a id="CO_actuator_link" href="/clean_container/1">制動器狀態</a></strong></td>
  363. <td><strong><a id="CO_sensor_link" href="/clean_container/1">感測器狀態</a></strong></td>
  364. </tr>
  365. <tr>
  366. <td style="vertical-align:text-top;">
  367. <table style="border:0px gray solid;" cellpadding="3">
  368. <tr>
  369. <td>
  370. <div id="CO_vacuum_status"
  371. style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
  372. </div>
  373. </td>
  374. <td>
  375. 真空吸料機
  376. </td>
  377. </tr>
  378. </table>
  379. </td>
  380. <td style="vertical-align:text-top;">
  381. <table style="border:0px gray solid;" cellpadding="3">
  382. <tr>
  383. <td>
  384. (感測器)
  385. </td>
  386. <td>
  387. <span id="">000</span>
  388. </td>
  389. </tr>
  390. <tr>
  391. <td>
  392. <a id="CO_camera_clean_tid" href=""><strong>攝影機畫面</strong></a>
  393. </td>
  394. </tr>
  395. </table>
  396. </td>
  397. </tr>
  398. </table>
  399. </div>
  400. </div>
  401. </div>
  402. </div>
  403. <!-- 色選機 模态框 -->
  404. <!-- 色選機 出料儲豆槽 模态框 -->
  405. <div class="modal fade" id="SO_Modal">
  406. <div class="modal-dialog modal-dialog-centered" style="width: 400px;">
  407. <div class="modal-content">
  408. <div class="modal-header">
  409. <h4 id="SO_Modal_title" class="modal-title">色選機出料儲豆槽 CO1 狀態</h4>
  410. <button type="button" class="close" data-dismiss="modal">&times;</button>
  411. </div>
  412. <!-- 模态框主体 -->
  413. <div class="modal-body">
  414. <table style="border:0px gray solid; width: 100%;" cellpadding="3">
  415. <!--<table style="border:0px gray solid;-->
  416. <tr>
  417. <td><strong><a id="SO_actuator_link" href="/colorselect_container/1">制動器狀態</a></strong></td>
  418. <td><strong><a id="SO_sensor_link" href="/colorselect_container/1">感測器狀態</a></strong></td>
  419. </tr>
  420. <tr>
  421. <td style="vertical-align:text-top;">
  422. <table style="border:0px gray solid;" cellpadding="3">
  423. <tr>
  424. <td>
  425. <div id="SO_vacuum_status"
  426. style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
  427. </div>
  428. </td>
  429. <td>
  430. 真空吸料機
  431. </td>
  432. </tr>
  433. </table>
  434. </td>
  435. <td style="vertical-align:text-top;">
  436. <table style="border:0px gray solid;" cellpadding="3">
  437. <tr>
  438. <td>
  439. (感測器)
  440. </td>
  441. <td>
  442. <span id="">000</span>
  443. </td>
  444. </tr>
  445. <tr>
  446. <td>
  447. <a id="SO_camera_colorselect_tid" href=""><strong>攝影機畫面</strong></a>
  448. </td>
  449. </tr>
  450. </table>
  451. </td>
  452. </tr>
  453. </table>
  454. </div>
  455. </div>
  456. </div>
  457. </div>
  458. <!-- 脫皮機 模态框 -->
  459. <div class="modal fade" id="P_Modal">
  460. <div class="modal-dialog modal-dialog-centered" style="width: 400px;">
  461. <div class="modal-content">
  462. <div class="modal-header">
  463. <h4 id="P_Modal_title" class="modal-title">脫皮機 P1 狀態</h4>
  464. <button type="button" class="close" data-dismiss="modal">&times;</button>
  465. </div>
  466. <!-- 模态框主体 -->
  467. <div class="modal-body">
  468. <table style="border:0px gray solid; width: 100%;" cellpadding="3">
  469. <!--<table style="border:0px gray solid;-->
  470. <tr>
  471. <td><strong><a id="P_actuator_link" href="">制動器狀態</a></strong></td>
  472. <td><strong><a id="P_sensor_link" href="">感測器狀態</a></strong></td>
  473. </tr>
  474. <tr>
  475. <td style="vertical-align:text-top;">
  476. <table style="border:0px gray solid;" cellpadding="3">
  477. <tr>
  478. <td>
  479. <div id="P_vacuum_status"
  480. style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
  481. </div>
  482. </td>
  483. <td>
  484. 真空吸料機
  485. </td>
  486. </tr>
  487. <tr>
  488. <td>
  489. <div id="tank_motor_status"
  490. style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
  491. </div>
  492. </td>
  493. <td>
  494. 馬達
  495. </td>
  496. </tr>
  497. </table>
  498. </td>
  499. <td style="vertical-align:text-top;">
  500. <table style="border:0px gray solid;" cellpadding="3">
  501. <tr>
  502. <td>
  503. (感測器)
  504. </td>
  505. <td>
  506. <span id="SENSOR_t_status">000</span>
  507. </td>
  508. </tr>
  509. <tr>
  510. <td>
  511. <a id="camera_peel_tid" href=""><strong>攝影機畫面</strong></a>
  512. </td>
  513. </tr>
  514. </table>
  515. </td>
  516. </tr>
  517. </table>
  518. </div>
  519. </div>
  520. </div>
  521. </div>
  522. <!-- 脫皮機 出料儲豆槽 模态框 -->
  523. <div class="modal fade" id="PO_Modal">
  524. <div class="modal-dialog modal-dialog-centered" style="width: 400px;">
  525. <div class="modal-content">
  526. <div class="modal-header">
  527. <h4 id="PO_Modal_title" class="modal-title">脫皮機出料儲豆槽 PO1 狀態</h4>
  528. <button type="button" class="close" data-dismiss="modal">&times;</button>
  529. </div>
  530. <!-- 模态框主体 -->
  531. <div class="modal-body">
  532. <table style="border:0px gray solid; width: 100%;" cellpadding="3">
  533. <!--<table style="border:0px gray solid;-->
  534. <tr>
  535. <td><strong><a id="PO_actuator_link" href="/clean_container/1">制動器狀態</a></strong></td>
  536. <td><strong><a id="PO_sensor_link" href="/clean_container/1">感測器狀態</a></strong></td>
  537. </tr>
  538. <tr>
  539. <td style="vertical-align:text-top;">
  540. <table style="border:0px gray solid;" cellpadding="3">
  541. <tr>
  542. <td>
  543. <div id="PO_vacuum_status"
  544. style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
  545. </div>
  546. </td>
  547. <td>
  548. 真空吸料機
  549. </td>
  550. </tr>
  551. </table>
  552. </td>
  553. <td style="vertical-align:text-top;">
  554. <table style="border:0px gray solid;" cellpadding="3">
  555. <tr>
  556. <td>
  557. (感測器)
  558. </td>
  559. <td>
  560. <span id="">000</span>
  561. </td>
  562. </tr>
  563. <tr>
  564. <td>
  565. <a id="PO_camera_peel_tid" href=""><strong>攝影機畫面</strong></a>
  566. </td>
  567. </tr>
  568. </table>
  569. </td>
  570. </tr>
  571. </table>
  572. </div>
  573. </div>
  574. </div>
  575. </div>
  576. <script>
  577. function update_data_C(ctid) {
  578. console.log('clean_tank_id:' + ctid)
  579. $.get('/loading/C' + ctid, '', function (res) {
  580. if (res.tank_vacuum == 0) {
  581. $("#C_vacuum_status").css("background-color", "#C0C0C0")
  582. } else if (res.tank_vacuum == 1) {
  583. $("#C_vacuum_status").css("background-color", "forestgreen")
  584. } else { $("#C_vacuum_status").css("background-color", "crimson") }
  585. if (res.tank_pump_waterInput == 0) {
  586. $("#tank_pump_waterInput_status").css("background-color", "#C0C0C0")
  587. } else if (res.tank_pump_waterInput == 1) {
  588. $("#tank_pump_waterInput_status").css("background-color", "forestgreen")
  589. } else { $("#tank_pump_waterInput_status").css("background-color", "crimson") }
  590. if (res.tank_pump_waterL2L3 == 0) {
  591. $("#tank_pump_waterL2L3_status").css("background-color", "#C0C0C0")
  592. } else if (res.tank_pump_waterL2L3 == 1) {
  593. $("#tank_pump_waterL2L3_status").css("background-color", "forestgreen")
  594. } else { $("#tank_pump_waterL2L3_status").css("background-color", "crimson") }
  595. if (res.tank_pump_waterL4L5 == 0) {
  596. $("#tank_pump_waterL4L5_status").css("background-color", "#C0C0C0")
  597. } else if (res.tank_pump_waterL4L5 == 1) {
  598. $("#tank_pump_waterL4L5_status").css("background-color", "forestgreen")
  599. } else { $("#tank_pump_waterL4L5_status").css("background-color", "crimson") }
  600. if (res.tank_solenoid_waterL2L3 == 0) {
  601. $("#tank_solenoid_waterL2L3_status").css("background-color", "#C0C0C0")
  602. } else if (res.tank_solenoid_waterL2L3 == 1) {
  603. $("#tank_solenoid_waterL2L3_status").css("background-color", "forestgreen")
  604. } else { $("#tank_solenoid_waterL2L3_status").css("background-color", "crimson") }
  605. if (res.tank_solenoid_waterL4L5 == 0) {
  606. $("#tank_solenoid_waterL4L5_status").css("background-color", "#C0C0C0")
  607. } else if (res.tank_solenoid_waterL4L5 == 1) {
  608. $("#tank_solenoid_waterL4L5_status").css("background-color", "forestgreen")
  609. } else { $("#tank_solenoid_waterL4L5_status").css("background-color", "crimson") }
  610. if (res.tank_stepping_motor == 'stop' || res.tank_stepping_motor == '0' ) {
  611. $("#tank_stepping_motor_status").css("background-color", "#C0C0C0")
  612. } else if (res.tank_stepping_motor == 'up' || res.tank_stepping_motor == 'down' ) {
  613. $("#tank_stepping_motor_status").css("background-color", "forestgreen")
  614. } else { $("#tank_stepping_motor_status").css("background-color", "crimson") }
  615. $("#UltraSonic_t_status").text(res.UltraSonic);
  616. }, 'json');
  617. $('#C_Modal_title').text("清洗浮選槽 C" + ctid + " 狀態");
  618. $('#C_actuator_link').attr("href", "/clean_container/" + ctid);
  619. $('#C_sensor_link').attr("href", "/clean_container/" + ctid);
  620. $('#camera_clean_tid').attr("href", "/camera_C" + ctid);
  621. $('#C_Modal').modal('show');
  622. }
  623. function update_data_SO(sotid){
  624. console.log('color-select_tank_id:' + sotid)
  625. $.get('/loading/SO' + sotid, '', function (res) {
  626. if (res.output_vacuum == 0) {
  627. $("#SO_vacuum_status").css("background-color", "#C0C0C0")
  628. } else if (res.output_vacuum == 1) {
  629. $("#SO_vacuum_status").css("background-color", "forestgreen")
  630. } else { $("#SO_vacuum_status").css("background-color", "crimson") }
  631. }, 'json');
  632. $('#SO_Modal_title').text("色選機出料儲豆槽 SO" + sotid + " 狀態");
  633. $('#SO_actuator_link').attr("href", "/colorselect_container/" + sotid);
  634. $('#SO_sensor_link').attr("href", "/colorselect_container/" + sotid);
  635. $('#SO_camera_colorselect_tid').attr("href", "/camera_SO" + sotid);
  636. $('#SO_Modal').modal('show');
  637. }
  638. function update_data_S(stid) {
  639. console.log('color-select_tank_id:' + stid)
  640. $.get('/loading/S' + stid, '', function (res) {
  641. }, 'json');
  642. $('#camera_colorselect_tid').attr("href", "/camera_S" + stid);
  643. $('#S1_Modal').modal('show');
  644. }
  645. function update_data_P(ptid) {
  646. console.log('peel_tank_id:' + ptid)
  647. $.get('/loading/P' + ptid, '', function (res) {
  648. if (res.tank_vacuum == 0) {
  649. $("#P_vacuum_status").css("background-color", "#C0C0C0")
  650. } else if (res.tank_vacuum == 1) {
  651. $("#P_vacuum_status").css("background-color", "forestgreen")
  652. } else { $("#P_vacuum_status").css("background-color", "crimson") }
  653. if (res.tank_motor > 0) {
  654. $("#tank_motor_status").css("background-color", "forestgreen")
  655. } else if (res.tank_motor == 0) {
  656. $("#tank_motor_status").css("background-color", "#C0C0C0")
  657. } else { $("#tank_motor_status").css("background-color", "crimson") }
  658. }, 'json');
  659. $('#P_Modal_title').text("脫皮機 P" + ptid + " 狀態");
  660. $('#P_actuator_link').attr("href", "/peel_container_tank/" + ptid);
  661. $('#P_sensor_link').attr("href", "/peel_container_tank/" + ptid);
  662. $('#camera_peel_tid').attr("href", "/camera_P" + ptid);
  663. $('#P_Modal').modal('show');
  664. }
  665. function update_data_CO(cotid){
  666. console.log('clean_output_tank_id:' + cotid)
  667. $.get('loading/CO' + cotid, '', function (res){
  668. if (res.output_vacuum == 0) {
  669. $("#CO_vacuum_status").css("background-color", "#C0C0C0")
  670. } else if (res.output_vacuum == 1) {
  671. $("#CO_vacuum_status").css("background-color", "forestgreen")
  672. } else { $("#CO_vacuum_status").css("background-color", "crimson") }
  673. }, 'json');
  674. $('#CO_Modal_title').text("清洗浮選出料儲豆槽 CO" + cotid + " 狀態");
  675. $('#CO_actuator_link').attr("href", "/clean_container/" + cotid);
  676. $('#CO_sensor_link').attr("href", "/clean_container/" + cotid);
  677. $('#CO_camera_clean_tid').attr("href", "/camera_CO" + cotid);
  678. $('#CO_Modal').modal('show');
  679. }
  680. function update_data_PO(potid){
  681. console.log('peel_output_tank_id' + potid)
  682. $.get('loading/PO' + potid, '', function (res){
  683. if (res.output_vacuum == 0) {
  684. $("#PO_vacuum_status").css("background-color", "#C0C0C0")
  685. } else if (res.output_vacuum == 1) {
  686. $("#PO_vacuum_status").css("background-color", "forestgreen")
  687. } else { $("#PO_vacuum_status").css("background-color", "crimson") }
  688. }, 'json');
  689. $('#PO_Modal_title').text("脫皮機出料儲豆槽 PO" + potid + " 狀態");
  690. $('#PO_actuator_link').attr("href", "/peel_container/" + potid);
  691. $('#PO_sensor_link').attr("href", "/peel_container/" + potid);
  692. $('#PO_camera_peel_tid').attr("href", "/camera_PO" + potid);
  693. $('#PO_Modal').modal('show');
  694. }
  695. var button_C1 = document.getElementById('C1');
  696. button_C1.addEventListener('click', function () { update_data_C("1") });
  697. var button_C2 = document.getElementById('C2');
  698. button_C2.addEventListener('click', function () { update_data_C("2") });
  699. var button_CO1 = document.getElementById('CO1');
  700. button_CO1.addEventListener('click', function () { update_data_CO("1") });
  701. var button_CO2 = document.getElementById('CO2');
  702. button_CO2.addEventListener('click', function () { update_data_CO("2") });
  703. var button_S1 = document.getElementById('S1');
  704. button_S1.addEventListener('click', function () { update_data_S("1") });
  705. var button_S2 = document.getElementById('S2');
  706. button_S2.addEventListener('click', function () { update_data_S("2") });
  707. var button_SO1 = document.getElementById('SO1');
  708. button_SO1.addEventListener('click', function () { update_data_SO("1") });
  709. var button_SO2 = document.getElementById('SO2');
  710. button_SO2.addEventListener('click', function () { update_data_SO("2") });
  711. var button_P1 = document.getElementById('P1');
  712. button_P1.addEventListener('click', function () { update_data_P("1") });
  713. var button_P2 = document.getElementById('P2');
  714. button_P2.addEventListener('click', function () { update_data_P("2") });
  715. var button_PO1 = document.getElementById('PO1');
  716. button_PO1.addEventListener('click', function () { update_data_PO("1") });
  717. var button_PO2 = document.getElementById('PO2');
  718. button_PO2.addEventListener('click', function () { update_data_PO("2") });
  719. </script>
  720. <!--
  721. <footer class="footer">
  722. <div style="text-align: center; margin-top: 10px; font-size: 13px; margin-bottom: 10px;">
  723. Copyright © 2021 Gold-in Tech. All Rights Reserved. 金子進科技股份有限公司 版權所有
  724. <a href="mailto:service.gitc@gmail.com" target="_blank">service.gitc@gmail.com</a>
  725. </div>
  726. </footer>
  727. -->
  728. <div id="coffee_footer">
  729. <!-- 匯入共同使用的 footer.html 內容 -->
  730. {% include 'footer.html' %}
  731. </div>
  732. </div>
  733. </body>
  734. </html>