1
0

clean.html 57 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128
  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. .modal_status_css {
  27. width: 18px;
  28. height: 18px;
  29. background-color:black;
  30. border-radius: 50%;
  31. }
  32. .status_css {
  33. width: 20px;
  34. height: 20px;
  35. background-color: cornflowerblue;
  36. border-radius: 50%;
  37. }
  38. .C1_position {
  39. position: absolute;
  40. top: 135px;
  41. left: 205px;
  42. width: 180px;
  43. height: 230px;
  44. border-style: solid;
  45. border-color: aqua;
  46. }
  47. .C3_position {
  48. position: absolute;
  49. top: 400px;
  50. left: 205px;
  51. width: 180px;
  52. height: 230px;
  53. border-style: solid;
  54. border-color: aqua;
  55. }
  56. .C2_position {
  57. position: absolute;
  58. top: 135px;
  59. left: 405px;
  60. width: 180px;
  61. height: 230px;
  62. border-style: solid;
  63. border-color: aqua;
  64. }
  65. .C4_position {
  66. position: absolute;
  67. top: 400px;
  68. left: 405px;
  69. width: 180px;
  70. height: 230px;
  71. border-style: solid;
  72. border-color: aqua;
  73. }
  74. .R1_position {
  75. position: absolute;
  76. top: 160px;
  77. left: 600px;
  78. width: 200px;
  79. height: 360px;
  80. border-style: solid;
  81. border-color: aqua;
  82. }
  83. .S1_position {
  84. position: absolute;
  85. top: 135px;
  86. left: 945px;
  87. width: 115px;
  88. height: 230px;
  89. border-style: solid;
  90. border-color: aqua;
  91. }
  92. .S2_position {
  93. position: absolute;
  94. top: 400px;
  95. left: 945px;
  96. width: 115px;
  97. height: 230px;
  98. border-style: solid;
  99. border-color: aqua;
  100. }
  101. .SO1_position {
  102. position: absolute;
  103. top: 135px;
  104. left: 1065px;
  105. width: 60px;
  106. height: 230px;
  107. border-style: solid;
  108. border-color: aqua;
  109. }
  110. .SO2_position {
  111. position: absolute;
  112. top: 400px;
  113. left: 1065px;
  114. width: 60px;
  115. height: 230px;
  116. border-style: solid;
  117. border-color: aqua;
  118. }
  119. .P1_position {
  120. position: absolute;
  121. top: 135px;
  122. left: 1150px;
  123. width: 95px;
  124. height: 230px;
  125. border-style: solid;
  126. border-color: aqua;
  127. }
  128. .P2_position {
  129. position: absolute;
  130. top: 400px;
  131. left: 1150px;
  132. width: 95px;
  133. height: 230px;
  134. border-style: solid;
  135. border-color: aqua;
  136. }
  137. .PO1_position {
  138. position: absolute;
  139. top: 135px;
  140. left: 1250px;
  141. width: 50px;
  142. height: 230px;
  143. border-style: solid;
  144. border-color: aqua;
  145. }
  146. .PO2_position {
  147. position: absolute;
  148. top: 400px;
  149. left: 1250px;
  150. width: 50px;
  151. height: 230px;
  152. border-style: solid;
  153. border-color: aqua;
  154. }
  155. </style>
  156. <script language="JavaScript">
  157. // 指定 10秒 刷新網頁一次
  158. var WebRestart
  159. // WebRestart = setTimeout(function () { location.reload() }, 10000);
  160. </script>
  161. </head>
  162. <body>
  163. <div id="wrapper">
  164. <div id="coffee_header">
  165. <!-- 匯入共同使用的 header.html 內容 -->
  166. {% include 'header.html' %}
  167. </div>
  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" class="status_css"></div>
  176. </div>
  177. <!-- 清洗浮選槽 C3 -->
  178. <div id="C3" tabindex="0" class="C3_position" role="button">
  179. C3 status
  180. <div id="C3_status" class="status_css"></div>
  181. </div>
  182. <!-- 清洗浮選 C2 出料儲豆槽 -->
  183. <div id="C2" tabindex="0" class="C2_position" role="button">
  184. C2 status
  185. <!-- C2 狀態點點-->
  186. <div id="C2_status" class="status_css"></div>
  187. </div>
  188. <!-- 清洗浮選 C4 出料儲豆槽 -->
  189. <div id="C4" tabindex="0" class="C4_position" role="button">
  190. C4 status
  191. <!-- C4 狀態點點-->
  192. <div id="C4_status" class="status_css"></div>
  193. </div>
  194. <!-- 中水桶 -->
  195. <div id="R1" tabindex="0" class="R1_position" role="button">
  196. R1 status
  197. <!-- R1 狀態點點-->
  198. <div id="R1_status" class="status_css"></div>
  199. </div>
  200. <!-- 色選機 S1 -->
  201. <div id="S1" tabindex="0" class="S1_position" role="button">
  202. S1 status
  203. <div id="S1_status" class="status_css"></div>
  204. </div>
  205. <!-- 色選機 S2 -->
  206. <div id="S2" tabindex="0" class="S2_position" role="button">
  207. S2 status
  208. <div id="S2_status" class="status_css"></div>
  209. </div>
  210. <!-- 色選機 SO1 出料儲豆槽 -->
  211. <div id="SO1" tabindex="0" class="SO1_position" role="button">
  212. SO1 status
  213. <div id="SO1_status" class="status_css" style="background-color: crimson;"></div>
  214. </div>
  215. <!-- 色選機 SO2 出料儲豆槽 -->
  216. <div id="SO2" tabindex="0" class="SO2_position" role="button">
  217. SO2 status
  218. <div id="SO2_status" class="status_css" style="background-color: crimson;"></div>
  219. </div>
  220. <!-- 脫皮機 P1 -->
  221. <div id="P1" tabindex="0" class="P1_position" role="button">
  222. P1 status
  223. <div id="P1_status" class="status_css"></div>
  224. </div>
  225. <!-- 脫皮機 P2 -->
  226. <div id="P2" tabindex="0" class="P2_position" role="button">
  227. P2 status
  228. <div id="P2_status" class="status_css"></div>
  229. </div>
  230. <!-- 脫皮機 PO1 出料儲豆槽 -->
  231. <div id="PO1" tabindex="0" class="PO1_position" role="button">
  232. PO1 status
  233. <div id="PO1_status" class="status_css" style="background-color: crimson;"></div>
  234. </div>
  235. <!-- 脫皮機 PO2 出料儲豆槽 -->
  236. <div id="PO2" tabindex="0" class="PO2_position" role="button">
  237. PO2 status
  238. <div id="PO2_status" class="status_css" style="background-color: crimson;"></div>
  239. </div>
  240. </div>
  241. <!-- 清洗浮選 模态框 -->
  242. <div class="modal fade" id="C_Modal">
  243. <div class="modal-dialog modal-dialog-centered" style="width: 400px;">
  244. <div class="modal-content">
  245. <div class="modal-header">
  246. <h4 id="C_Modal_title" class="modal-title">清洗浮選槽 C1 狀態</h4>
  247. <button type="button" class="close" data-dismiss="modal">&times;</button>
  248. </div>
  249. <!-- 模态框主体 -->
  250. <div class="modal-body">
  251. <table style="border:0px gray solid; width: 100%;" cellpadding="3">
  252. <!--<table style="border:0px gray solid;-->
  253. <tr>
  254. <td><strong><a id="C_actuator_link" href="/clean_container_tank/1">致動器狀態</a></strong></td>
  255. <td><strong><a id="C_sensor_link" href="/clean_container_tank/1">感測器狀態</a></strong></td>
  256. </tr>
  257. <tr>
  258. <td style="vertical-align:text-top;">
  259. <table style="border:0px gray solid;" cellpadding="3">
  260. <tr>
  261. <td>
  262. <div id="Ctank_vacuum_status" class="modal_status_css">
  263. </div>
  264. </td>
  265. <td>
  266. 真空吸料機
  267. </td>
  268. </tr>
  269. <tr>
  270. <td>
  271. <div id="Ctank_threewayvalve_input_status" class="modal_status_css">
  272. </div>
  273. </td>
  274. <td>
  275. 吸料機三通閥
  276. </td>
  277. </tr>
  278. <tr>
  279. <td>
  280. <div id="Ctank_motor_status" class="modal_status_css">
  281. </div>
  282. </td>
  283. <td>
  284. 馬達
  285. </td>
  286. </tr>
  287. <tr>
  288. <td>
  289. <div id="Ctank_solenoid_reclaimed_in_status" class="modal_status_css">
  290. </div>
  291. </td>
  292. <td>
  293. 中水入水電磁閥
  294. </td>
  295. </tr>
  296. <tr>
  297. <td>
  298. <div id="Ctank_solenoid_water_in_status" class="modal_status_css">
  299. </div>
  300. </td>
  301. <td>
  302. 清水入水電磁閥
  303. </td>
  304. </tr>
  305. <tr>
  306. <td>
  307. <div id="Ctank_pump_water_in_status" class="modal_status_css">
  308. </div>
  309. </td>
  310. <td>
  311. 幫浦(清水入水)
  312. </td>
  313. </tr>
  314. <tr>
  315. <td>
  316. <div id="Ctank_solenoid_water_out_status" class="modal_status_css">
  317. </div>
  318. </td>
  319. <td>
  320. 排水廢水電磁閥
  321. </td>
  322. <tr>
  323. <td>
  324. <div id="Ctank_solenoid_reclaimed_out_status" class="modal_status_css">
  325. </div>
  326. </td>
  327. <td>
  328. 排水中水電磁閥
  329. </td>
  330. </tr>
  331. <tr>
  332. <td>
  333. <div id="Ctank_solenoid_disinfect_status" class="modal_status_css">
  334. </div>
  335. </td>
  336. <td>
  337. 消毒電磁閥
  338. </td>
  339. </tr>
  340. <tr>
  341. <td>
  342. <div id="Ctank_pump_disinfect_status" class="modal_status_css">
  343. </div>
  344. </td>
  345. <td>
  346. 混合槽幫浦
  347. </td>
  348. </tr>
  349. <tr>
  350. <td>
  351. <div id="Ctank_diskvalve_status" class="modal_status_css">
  352. </div>
  353. </td>
  354. <td>
  355. 蝴蝶閥
  356. </td>
  357. </tr>
  358. </tr>
  359. </table>
  360. </td>
  361. <td style="vertical-align:text-top;">
  362. <table style="border:0px gray solid;" cellpadding="3">
  363. <tr>
  364. <td>
  365. 生豆生水高度
  366. </td>
  367. <td>
  368. <span id="CUltraSonic_t_status"></span>
  369. </td>
  370. </tr>
  371. <tr>
  372. <td>
  373. 馬達編碼器
  374. </td>
  375. <td>
  376. <span id="CMotorEncoder_t_status"></span>
  377. </td>
  378. </tr>
  379. <tr>
  380. <td>
  381. 內桶濁度計
  382. </td>
  383. <td>
  384. <span id="CtankTurbidity_t_status"></span>
  385. </td>
  386. </tr>
  387. <tr>
  388. <td>
  389. 過濾器濁度計
  390. </td>
  391. <td>
  392. <span id="CfilterTurbidity_t_status"></span>
  393. </td>
  394. </tr>
  395. <tr>
  396. <td>
  397. <a id="camera_clean_tid" href=""><strong>攝影機畫面</strong></a>
  398. </td>
  399. </tr>
  400. </table>
  401. </td>
  402. </tr>
  403. </table>
  404. </div>
  405. </div>
  406. </div>
  407. </div>
  408. <!-- 清洗浮選 出料儲豆槽 模态框 -->
  409. <div class="modal fade" id="CO_Modal">
  410. <div class="modal-dialog modal-dialog-centered" style="width: 400px;">
  411. <div class="modal-content">
  412. <div class="modal-header">
  413. <h4 id="CO_Modal_title" class="modal-title">清洗浮選出料儲豆槽 CO1 狀態</h4>
  414. <button type="button" class="close" data-dismiss="modal">&times;</button>
  415. </div>
  416. <!-- 模态框主体 -->
  417. <div class="modal-body">
  418. <table style="border:0px gray solid; width: 100%;" cellpadding="3">
  419. <!--<table style="border:0px gray solid;-->
  420. <tr>
  421. <td><strong><a id="CO_actuator_link" href="/clean_container/1">致動器狀態</a></strong></td>
  422. <td><strong><a id="CO_sensor_link" href="/clean_container/1">感測器狀態</a></strong></td>
  423. </tr>
  424. <tr>
  425. <td style="vertical-align:text-top;">
  426. <table style="border:0px gray solid;" cellpadding="3">
  427. <tr>
  428. <td>
  429. <div id="CO_vacuum_status" class="modal_status_css">
  430. </div>
  431. </td>
  432. <td>
  433. 真空吸料機
  434. </td>
  435. </tr>
  436. </table>
  437. </td>
  438. <td style="vertical-align:text-top;">
  439. <table style="border:0px gray solid;" cellpadding="3">
  440. <tr>
  441. <td>
  442. (感測器)
  443. </td>
  444. <td>
  445. <span id="">000</span>
  446. </td>
  447. </tr>
  448. <tr>
  449. <td>
  450. <a id="CO_camera_clean_tid" href=""><strong>攝影機畫面</strong></a>
  451. </td>
  452. </tr>
  453. </table>
  454. </td>
  455. </tr>
  456. </table>
  457. </div>
  458. </div>
  459. </div>
  460. </div>
  461. <!-- 色選機 模态框 -->
  462. <div class="modal fade" id="S_Modal">
  463. <div class="modal-dialog modal-dialog-centered" style="width: 400px;">
  464. <div class="modal-content">
  465. <div class="modal-header">
  466. <h4 id="S_Modal_title" class="modal-title">色選機 S1 狀態</h4>
  467. <button type="button" class="close" data-dismiss="modal">&times;</button>
  468. </div>
  469. <!-- 模态框主体 -->
  470. <div class="modal-body">
  471. <table style="border:0px gray solid; width: 100%;" cellpadding="3">
  472. <!--<table style="border:0px gray solid;-->
  473. <tr>
  474. <td><strong><a id="S_actuator_link" href="/colorselect_container_tank/1">致動器狀態</a></strong></td>
  475. <td><strong><a id="S_sensor_link" href="/colorselect_container_tank/1">感測器狀態</a></strong></td>
  476. </tr>
  477. <tr>
  478. <td style="vertical-align:text-top;">
  479. <table style="border:0px gray solid;" cellpadding="3">
  480. <tr>
  481. <td>
  482. <div id="S_vacuum_status" class="modal_status_css">
  483. </div>
  484. </td>
  485. <td>
  486. 真空吸料機
  487. </td>
  488. </tr>
  489. <tr>
  490. <td>
  491. <div id="S_motor_status" class="modal_status_css">
  492. </div>
  493. </td>
  494. <td>
  495. 馬達
  496. </td>
  497. </tr>
  498. <tr>
  499. <td>
  500. <div id="S_nozzle_status" class="modal_status_css">
  501. </div>
  502. </td>
  503. <td>
  504. 噴嘴
  505. </td>
  506. </tr>
  507. </table>
  508. </td>
  509. <td style="vertical-align:text-top;">
  510. <table style="border:0px gray solid;" cellpadding="3">
  511. <tr>
  512. <td>
  513. 超音波感測器
  514. </td>
  515. <td>
  516. <span id="S_UltraSonic_status"></span>
  517. </td>
  518. </tr>
  519. <tr>
  520. <td>
  521. 顏色感測器
  522. </td>
  523. <td>
  524. <span id="S_color_status"></span>
  525. </td>
  526. </tr>
  527. <tr>
  528. <td>
  529. <a id="S_camera_colorselect_tid" href=""><strong>攝影機畫面</strong></a>
  530. </td>
  531. </tr>
  532. </table>
  533. </td>
  534. </tr>
  535. </table>
  536. </div>
  537. </div>
  538. </div>
  539. </div>
  540. <!-- 色選機 出料儲豆槽 模态框 -->
  541. <div class="modal fade" id="SO_Modal">
  542. <div class="modal-dialog modal-dialog-centered" style="width: 400px;">
  543. <div class="modal-content">
  544. <div class="modal-header">
  545. <h4 id="SO_Modal_title" class="modal-title">色選機出料儲豆槽 SO1 狀態</h4>
  546. <button type="button" class="close" data-dismiss="modal">&times;</button>
  547. </div>
  548. <!-- 模态框主体 -->
  549. <div class="modal-body">
  550. <table style="border:0px gray solid; width: 100%;" cellpadding="3">
  551. <!--<table style="border:0px gray solid;-->
  552. <tr>
  553. <td><strong><a id="SO_actuator_link" href="/colorselect_container/1">致動器狀態</a></strong></td>
  554. <td><strong><a id="SO_sensor_link" href="/colorselect_container/1">感測器狀態</a></strong></td>
  555. </tr>
  556. <tr>
  557. <td style="vertical-align:text-top;">
  558. <table style="border:0px gray solid;" cellpadding="3">
  559. <tr>
  560. <td>
  561. <div id="SO_vacuum_status" class="modal_status_css">
  562. </div>
  563. </td>
  564. <td>
  565. 真空吸料機
  566. </td>
  567. </tr>
  568. </table>
  569. </td>
  570. <td style="vertical-align:text-top;">
  571. <table style="border:0px gray solid;" cellpadding="3">
  572. <tr>
  573. <td>
  574. (感測器)
  575. </td>
  576. <td>
  577. <span id="">000</span>
  578. </td>
  579. </tr>
  580. <tr>
  581. <td>
  582. <a id="SO_camera_colorselect_tid" href=""><strong>攝影機畫面</strong></a>
  583. </td>
  584. </tr>
  585. </table>
  586. </td>
  587. </tr>
  588. </table>
  589. </div>
  590. </div>
  591. </div>
  592. </div>
  593. <!-- 脫皮機 模态框 -->
  594. <div class="modal fade" id="P_Modal">
  595. <div class="modal-dialog modal-dialog-centered" style="width: 400px;">
  596. <div class="modal-content">
  597. <div class="modal-header">
  598. <h4 id="P_Modal_title" class="modal-title">脫皮機 P1 狀態</h4>
  599. <button type="button" class="close" data-dismiss="modal">&times;</button>
  600. </div>
  601. <!-- 模态框主体 -->
  602. <div class="modal-body">
  603. <table style="border:0px gray solid; width: 100%;" cellpadding="3">
  604. <!--<table style="border:0px gray solid;-->
  605. <tr>
  606. <td><strong><a id="P_actuator_link" href="">致動器狀態</a></strong></td>
  607. <td><strong><a id="P_sensor_link" href="">感測器狀態</a></strong></td>
  608. </tr>
  609. <tr>
  610. <td style="vertical-align:text-top;">
  611. <table style="border:0px gray solid;" cellpadding="3">
  612. <tr>
  613. <td>
  614. <div id="P_vacuum_status" class="modal_status_css">
  615. </div>
  616. </td>
  617. <td>
  618. 真空吸料機
  619. </td>
  620. </tr>
  621. <tr>
  622. <td>
  623. <div id="tank_motor_status" class="modal_status_css">
  624. </div>
  625. </td>
  626. <td>
  627. 馬達
  628. </td>
  629. </tr>
  630. </table>
  631. </td>
  632. <td style="vertical-align:text-top;">
  633. <table style="border:0px gray solid;" cellpadding="3">
  634. <tr>
  635. <td>
  636. (感測器)
  637. </td>
  638. <td>
  639. <span id="SENSOR_t_status">000</span>
  640. </td>
  641. </tr>
  642. <tr>
  643. <td>
  644. <a id="camera_peel_tid" href=""><strong>攝影機畫面</strong></a>
  645. </td>
  646. </tr>
  647. </table>
  648. </td>
  649. </tr>
  650. </table>
  651. </div>
  652. </div>
  653. </div>
  654. </div>
  655. <!-- 脫皮機 出料儲豆槽 模态框 -->
  656. <div class="modal fade" id="PO_Modal">
  657. <div class="modal-dialog modal-dialog-centered" style="width: 400px;">
  658. <div class="modal-content">
  659. <div class="modal-header">
  660. <h4 id="PO_Modal_title" class="modal-title">脫皮機出料儲豆槽 PO1 狀態</h4>
  661. <button type="button" class="close" data-dismiss="modal">&times;</button>
  662. </div>
  663. <!-- 模态框主体 -->
  664. <div class="modal-body">
  665. <table style="border:0px gray solid; width: 100%;" cellpadding="3">
  666. <!--<table style="border:0px gray solid;-->
  667. <tr>
  668. <td><strong><a id="PO_actuator_link" href="/clean_container/1">致動器狀態</a></strong></td>
  669. <td><strong><a id="PO_sensor_link" href="/clean_container/1">感測器狀態</a></strong></td>
  670. </tr>
  671. <tr>
  672. <td style="vertical-align:text-top;">
  673. <table style="border:0px gray solid;" cellpadding="3">
  674. <tr>
  675. <td>
  676. <div id="PO_vacuum_status" class="modal_status_css">
  677. </div>
  678. </td>
  679. <td>
  680. 真空吸料機
  681. </td>
  682. </tr>
  683. </table>
  684. </td>
  685. <td style="vertical-align:text-top;">
  686. <table style="border:0px gray solid;" cellpadding="3">
  687. <tr>
  688. <td>
  689. (感測器)
  690. </td>
  691. <td>
  692. <span id="">000</span>
  693. </td>
  694. </tr>
  695. <tr>
  696. <td>
  697. <a id="PO_camera_peel_tid" href=""><strong>攝影機畫面</strong></a>
  698. </td>
  699. </tr>
  700. </table>
  701. </td>
  702. </tr>
  703. </table>
  704. </div>
  705. </div>
  706. </div>
  707. </div>
  708. <!-- 中水桶 模态框 -->
  709. <div class="modal fade" id="R_Modal">
  710. <div class="modal-dialog modal-dialog-centered" style="width: 400px;">
  711. <div class="modal-content">
  712. <div class="modal-header">
  713. <h4 id="R_Modal_title" class="modal-title">中水桶 R1 狀態</h4>
  714. <button type="button" class="close" data-dismiss="modal">&times;</button>
  715. </div>
  716. <!-- 模态框主体 -->
  717. <div class="modal-body">
  718. <table style="border:0px gray solid; width: 100%;" cellpadding="3">
  719. <!--<table style="border:0px gray solid;-->
  720. <tr>
  721. <td><strong><a id="R_actuator_link" href="/reclimedwater_tank/1">致動器狀態</a></strong></td>
  722. <td><strong><a id="R_sensor_link" href="/reclimedwater_tank/1">感測器狀態</a></strong></td>
  723. </tr>
  724. <tr>
  725. <td style="vertical-align:text-top;">
  726. <table style="border:0px gray solid;" cellpadding="3">
  727. <tr>
  728. <td>
  729. <div id="R_solenoid_water_in_status" class="modal_status_css">
  730. </div>
  731. </td>
  732. <td>
  733. 清水入水電磁閥
  734. </td>
  735. </tr>
  736. <tr>
  737. <td>
  738. <div id="R_solenoid_reclaimed_out_status" class="modal_status_css">
  739. </div>
  740. </td>
  741. <td>
  742. 中水出水電磁閥
  743. </td>
  744. </tr>
  745. <tr>
  746. <td>
  747. <div id="R_solenoid_water_out_status" class="modal_status_css">
  748. </div>
  749. </td>
  750. <td>
  751. 廢水出水電磁閥
  752. </td>
  753. </tr>
  754. <tr>
  755. <td>
  756. <div id="R_pump_reclaimed_out_status" class="modal_status_css">
  757. </div>
  758. </td>
  759. <td>
  760. 入水清洗槽幫浦
  761. </td>
  762. </tr>
  763. </table>
  764. </td>
  765. <td style="vertical-align:text-top;">
  766. <table style="border:0px gray solid;" cellpadding="3">
  767. <tr>
  768. <td>
  769. (感測器)
  770. </td>
  771. <td>
  772. <span id="">000</span>
  773. </td>
  774. </tr>
  775. <tr>
  776. <td>
  777. <a id="R_camera_reclaimedwater_tid" href=""><strong>攝影機畫面</strong></a>
  778. </td>
  779. </tr>
  780. </table>
  781. </td>
  782. </tr>
  783. </table>
  784. </div>
  785. </div>
  786. </div>
  787. </div>
  788. <script>
  789. function update_data_C(ctid) {
  790. console.log('clean_tank_id:' + ctid)
  791. $.get('/loading/C' + ctid, '', function (res) {
  792. if (res.tank_vacuum == 0) {
  793. $("#Ctank_vacuum_status").css("background-color", "#C0C0C0")
  794. } else if (res.tank_vacuum == 1) {
  795. $("#Ctank_vacuum_status").css("background-color", "forestgreen")
  796. } else { $("#Ctank_vacuum_status").css("background-color", "crimson") }
  797. if (res.tank_threewayvalve_input == 0) {
  798. $("#Ctank_threewayvalve_input_status").css("background-color", "#C0C0C0")
  799. } else if (res.tank_threewayvalve_input == 1) {
  800. $("#Ctank_threewayvalve_input_status").css("background-color", "forestgreen")
  801. } else { $("#Ctank_threewayvalve_input_status").css("background-color", "crimson") }
  802. if (res.tank_motor == 0) {
  803. $("#Ctank_motor_status").css("background-color", "#C0C0C0")
  804. } else { $("#Ctank_motor_status").css("background-color", "forestgreen") }
  805. if (res.tank_solenoid_reclaimed_in == 0) {
  806. $("#Ctank_solenoid_reclaimed_in_status").css("background-color", "#C0C0C0")
  807. } else if (res.tank_solenoid_reclaimed_in == 1) {
  808. $("#Ctank_solenoid_reclaimed_in_status").css("background-color", "forestgreen")
  809. } else { $("#Ctank_solenoid_reclaimed_in_status").css("background-color", "crimson") }
  810. if (res.tank_solenoid_water_in == 0) {
  811. $("#Ctank_solenoid_water_in_status").css("background-color", "#C0C0C0")
  812. } else if (res.tank_solenoid_water_in == 1) {
  813. $("#Ctank_solenoid_water_in_status").css("background-color", "forestgreen")
  814. } else { $("#Ctank_solenoid_water_in_status").css("background-color", "crimson") }
  815. if (res.tank_solenoid_water_out == 0) {
  816. $("#Ctank_solenoid_water_out_status").css("background-color", "#C0C0C0")
  817. } else if (res.tank_solenoid_water_out == 1) {
  818. $("#Ctank_solenoid_water_out_status").css("background-color", "forestgreen")
  819. } else { $("#Ctank_solenoid_water_out_status").css("background-color", "crimson") }
  820. if (res.tank_solenoid_reclaimed_out == 0) {
  821. $("#Ctank_solenoid_reclaimed_out_status").css("background-color", "#C0C0C0")
  822. } else if (res.tank_solenoid_reclaimed_out == 1) {
  823. $("#Ctank_solenoid_reclaimed_out_status").css("background-color", "forestgreen")
  824. } else { $("#Ctank_solenoid_reclaimed_out_status").css("background-color", "crimson") }
  825. if (res.tank_solenoid_disinfect == 0) {
  826. $("#Ctank_solenoid_disinfect_status").css("background-color", "#C0C0C0")
  827. } else if (res.tank_solenoid_disinfect == 1) {
  828. $("#Ctank_solenoid_disinfect_status").css("background-color", "forestgreen")
  829. } else { $("#Ctank_solenoid_disinfect_status").css("background-color", "crimson") }
  830. if (res.tank_pump_disinfect == 0) {
  831. $("#Ctank_pump_disinfect_status").css("background-color", "#C0C0C0")
  832. } else if (res.tank_pump_disinfect == 1) {
  833. $("#Ctank_pump_disinfect_status").css("background-color", "forestgreen")
  834. } else { $("#Ctank_pump_disinfect_status").css("background-color", "crimson") }
  835. if (res.tank_diskvalve == 0) {
  836. $("#Ctank_diskvalve_status").css("background-color", "#C0C0C0")
  837. } else if (res.tank_diskvalve == 1) {
  838. $("#Ctank_diskvalve_status").css("background-color", "forestgreen")
  839. } else { $("#Ctank_diskvalve_status").css("background-color", "crimson") }
  840. if (res.tank_pump_water_in == 0) {
  841. $("#Ctank_pump_water_in_status").css("background-color", "#C0C0C0")
  842. } else if (res.tank_pump_water_in == 1) {
  843. $("#Ctank_pump_water_in_status").css("background-color", "forestgreen")
  844. } else { $("#Ctank_pump_water_in_status").css("background-color", "crimson") }
  845. $("#CUltraSonic_t_status").text(res.UltraSonic);
  846. $("#CMotorEncoder_t_status").text(res.Encoder);
  847. $("#CtankTurbidity_t_status").text(res.tankTurbidity);
  848. $("#CfilterTurbidity_t_status").text(res.filterTurbidity);
  849. }, 'json');
  850. $('#C_Modal_title').text("清洗浮選槽 C" + ctid + " 狀態");
  851. $('#C_actuator_link').attr("href", "/clean_container_tank/" + ctid);
  852. $('#C_sensor_link').attr("href", "/clean_container_tank/" + ctid);
  853. $('#camera_clean_tid').attr("href", "/camera_C" + ctid);
  854. $('#C_Modal').modal('show');
  855. }
  856. function update_data_SO(sotid){
  857. console.log('color-select_tank_id:' + sotid)
  858. $.get('/loading/SO' + sotid, '', function (res) {
  859. if (res.output_vacuum == 0) {
  860. $("#SO_vacuum_status").css("background-color", "#C0C0C0")
  861. } else if (res.output_vacuum == 1) {
  862. $("#SO_vacuum_status").css("background-color", "forestgreen")
  863. } else { $("#SO_vacuum_status").css("background-color", "crimson") }
  864. }, 'json');
  865. $('#SO_Modal_title').text("色選機出料儲豆槽 SO" + sotid + " 狀態");
  866. $('#SO_actuator_link').attr("href", "/colorselect_container/" + sotid);
  867. $('#SO_sensor_link').attr("href", "/colorselect_container/" + sotid);
  868. $('#SO_camera_colorselect_tid').attr("href", "/camera_SO" + sotid);
  869. $('#SO_Modal').modal('show');
  870. }
  871. function update_data_S(stid) {
  872. console.log('color-select_tank_id:' + stid)
  873. $.get('/loading/S' + stid, '', function (res) {
  874. if (res.tank_vacuum == 0) {
  875. $("#S_vacuum_status").css("background-color", "#C0C0C0")
  876. } else if (res.tank_vacuum == 1) {
  877. $("#S_vacuum_status").css("background-color", "forestgreen")
  878. } else { $("#S_vacuum_status").css("background-color", "crimson") }
  879. if (res.tank_motor == 0) {
  880. $("#S_motor_status").css("background-color", "#C0C0C0")
  881. } else if (res.tank_motor > 0 || res.tank_motor < 0) {
  882. $("#S_motor_status").css("background-color", "forestgreen")
  883. } else { $("#S_motor_status").css("background-color", "crimson") }
  884. if (res.tank_nozzle == 0) {
  885. $("#S_nozzle_status").css("background-color", "#C0C0C0")
  886. } else if (res.tank_nozzle > 0 || res.tank_motor < 0) {
  887. $("#S_nozzle_status").css("background-color", "forestgreen")
  888. } else { $("#S_nozzle_status").css("background-color", "crimson") }
  889. $("#S_UltraSonic_status").text(res.UltraSonic);
  890. $("#S_color_status").text(res.color);
  891. }, 'json');
  892. $('#S_Modal_title').text("色選機 S" + stid + " 狀態");
  893. $('#S_actuator_link').attr("href", "/colorselect_container_tank/" + stid);
  894. $('#S_sensor_link').attr("href", "/colorselect_container_tank/" + stid);
  895. $('#S_camera_colorselect_tid').attr("href", "/camera_S" + stid);
  896. $('#S_Modal').modal('show');
  897. }
  898. function update_data_P(ptid) {
  899. console.log('peel_tank_id:' + ptid)
  900. $.get('/loading/P' + ptid, '', function (res) {
  901. if (res.tank_vacuum == 0) {
  902. $("#P_vacuum_status").css("background-color", "#C0C0C0")
  903. } else if (res.tank_vacuum == 1) {
  904. $("#P_vacuum_status").css("background-color", "forestgreen")
  905. } else { $("#P_vacuum_status").css("background-color", "crimson") }
  906. if (res.tank_motor > 0) {
  907. $("#tank_motor_status").css("background-color", "forestgreen")
  908. } else if (res.tank_motor == 0) {
  909. $("#tank_motor_status").css("background-color", "#C0C0C0")
  910. } else { $("#tank_motor_status").css("background-color", "crimson") }
  911. }, 'json');
  912. $('#P_Modal_title').text("脫皮機 P" + ptid + " 狀態");
  913. $('#P_actuator_link').attr("href", "/peel_container_tank/" + ptid);
  914. $('#P_sensor_link').attr("href", "/peel_container_tank/" + ptid);
  915. $('#camera_peel_tid').attr("href", "/camera_P" + ptid);
  916. $('#P_Modal').modal('show');
  917. }
  918. function update_data_CO(cotid){
  919. console.log('clean_output_tank_id:' + cotid)
  920. $.get('loading/CO' + cotid, '', function (res){
  921. if (res.output_vacuum == 0) {
  922. $("#CO_vacuum_status").css("background-color", "#C0C0C0")
  923. } else if (res.output_vacuum == 1) {
  924. $("#CO_vacuum_status").css("background-color", "forestgreen")
  925. } else { $("#CO_vacuum_status").css("background-color", "crimson") }
  926. }, 'json');
  927. $('#CO_Modal_title').text("清洗浮選出料儲豆槽 CO" + cotid + " 狀態");
  928. $('#CO_actuator_link').attr("href", "/clean_container/" + cotid);
  929. $('#CO_sensor_link').attr("href", "/clean_container/" + cotid);
  930. $('#CO_camera_clean_tid').attr("href", "/camera_CO" + cotid);
  931. $('#CO_Modal').modal('show');
  932. }
  933. function update_data_PO(potid){
  934. console.log('peel_output_tank_id' + potid)
  935. $.get('loading/PO' + potid, '', function (res){
  936. if (res.output_vacuum == 0) {
  937. $("#PO_vacuum_status").css("background-color", "#C0C0C0")
  938. } else if (res.output_vacuum == 1) {
  939. $("#PO_vacuum_status").css("background-color", "forestgreen")
  940. } else { $("#PO_vacuum_status").css("background-color", "crimson") }
  941. }, 'json');
  942. $('#PO_Modal_title').text("脫皮機出料儲豆槽 PO" + potid + " 狀態");
  943. $('#PO_actuator_link').attr("href", "/peel_container/" + potid);
  944. $('#PO_sensor_link').attr("href", "/peel_container/" + potid);
  945. $('#PO_camera_peel_tid').attr("href", "/camera_PO" + potid);
  946. $('#PO_Modal').modal('show');
  947. }
  948. function update_data_R(rtid){
  949. console.log('reclimedwater_tank_id: ' + rtid)
  950. $.get('/loading/R' + rtid, '', function (res) {
  951. if (res.tank_solenoid_water_in == 0) {
  952. $("#R_solenoid_water_in_status").css("background-color", "#C0C0C0")
  953. } else if (res.tank_solenoid_water_in == 1) {
  954. $("#R_solenoid_water_in_status").css("background-color", "forestgreen")
  955. } else { $("#R_solenoid_water_in_status").css("background-color", "crimson") }
  956. if (res.tank_solenoid_reclaimed_out == 0) {
  957. $("#R_solenoid_reclaimed_out_status").css("background-color", "#C0C0C0")
  958. } else if (res.tank_solenoid_reclaimed_out == 1) {
  959. $("#R_solenoid_reclaimed_out_status").css("background-color", "forestgreen")
  960. } else { $("#R_solenoid_reclaimed_out_status").css("background-color", "crimson") }
  961. if (res.tank_solenoid_water_out == 0) {
  962. $("#R_solenoid_water_out_status").css("background-color", "#C0C0C0")
  963. } else if (res.tank_solenoid_water_out == 1) {
  964. $("#R_solenoid_water_out_status").css("background-color", "forestgreen")
  965. } else { $("#R_solenoid_water_out_status").css("background-color", "crimson") }
  966. if (res.tank_pump_reclaimed_out == 0) {
  967. $("#R_pump_reclaimed_out_status").css("background-color", "#C0C0C0")
  968. } else if (res.tank_pump_reclaimed_out == 1) {
  969. $("#R_pump_reclaimed_out_status").css("background-color", "forestgreen")
  970. } else { $("#R_pump_reclaimed_out_status").css("background-color", "crimson") }
  971. }, 'json');
  972. $('#R_Modal_title').text("中水桶 R" + rtid + " 狀態");
  973. $('#R_actuator_link').attr("href", "/reclaimedwater_tank/" + rtid);
  974. $('#R_sensor_link').attr("href", "/reclaimedwater_tank/" + rtid);
  975. $('#R_camera_reclaimedwater_tid').attr("href", "/camera_R" + rtid);
  976. $('#R_Modal').modal('show');
  977. }
  978. var button_C1 = document.getElementById('C1');
  979. button_C1.addEventListener('click', function () { update_data_C("1") });
  980. var button_C3 = document.getElementById('C3');
  981. button_C3.addEventListener('click', function () { update_data_C("3") });
  982. var button_C2 = document.getElementById('C2');
  983. button_C2.addEventListener('click', function () { update_data_C("2") });
  984. var button_C4 = document.getElementById('C4');
  985. button_C4.addEventListener('click', function () { update_data_C("4") });
  986. var button_R1 = document.getElementById('R1');
  987. button_R1.addEventListener('click', function () { update_data_R("1") });
  988. var button_S1 = document.getElementById('S1');
  989. button_S1.addEventListener('click', function () { update_data_S("1") });
  990. var button_S2 = document.getElementById('S2');
  991. button_S2.addEventListener('click', function () { update_data_S("2") });
  992. var button_SO1 = document.getElementById('SO1');
  993. button_SO1.addEventListener('click', function () { update_data_SO("1") });
  994. var button_SO2 = document.getElementById('SO2');
  995. button_SO2.addEventListener('click', function () { update_data_SO("2") });
  996. var button_P1 = document.getElementById('P1');
  997. button_P1.addEventListener('click', function () { update_data_P("1") });
  998. var button_P2 = document.getElementById('P2');
  999. button_P2.addEventListener('click', function () { update_data_P("2") });
  1000. var button_PO1 = document.getElementById('PO1');
  1001. button_PO1.addEventListener('click', function () { update_data_PO("1") });
  1002. var button_PO2 = document.getElementById('PO2');
  1003. button_PO2.addEventListener('click', function () { update_data_PO("2") });
  1004. </script>
  1005. <div id="coffee_footer">
  1006. <!-- 匯入共同使用的 footer.html 內容 -->
  1007. {% include 'footer.html' %}
  1008. </div>
  1009. </div>
  1010. </body>
  1011. </html>