1
0

ferment.html 55 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069
  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. var status = '{{status}}';
  21. $(document).ready(function(){
  22. $("#coffee_title_pc").text('發酵貨櫃');
  23. $("#coffee_title_phone").text('發酵貨櫃');
  24. });
  25. </script>
  26. <style>
  27. .FermentContainer_position {
  28. position: absolute;
  29. top: 95px;
  30. left: 53px;
  31. }
  32. .F1_position {
  33. position: absolute;
  34. top: 155px;
  35. left: 240px;
  36. width: 160px;
  37. height: 210px;
  38. border-style: solid;
  39. border-color: aqua;
  40. }
  41. .F2_position {
  42. position: absolute;
  43. top: 155px;
  44. left: 415px;
  45. width: 160px;
  46. height: 210px;
  47. border-style: solid;
  48. border-color: aqua;
  49. }
  50. .F3_position {
  51. position: absolute;
  52. top: 155px;
  53. left: 595px;
  54. width: 160px;
  55. height: 210px;
  56. border-style: solid;
  57. border-color: aqua;
  58. }
  59. .F4_position {
  60. position: absolute;
  61. top: 155px;
  62. left: 780px;
  63. width: 160px;
  64. height: 210px;
  65. border-style: solid;
  66. border-color: aqua;
  67. }
  68. .F5_position {
  69. position: absolute;
  70. top: 155px;
  71. left: 960px;
  72. width: 160px;
  73. height: 210px;
  74. border-style: solid;
  75. border-color: aqua;
  76. }
  77. .F6_position {
  78. position: absolute;
  79. top: 155px;
  80. left: 1150px;
  81. width: 160px;
  82. height: 210px;
  83. border-style: solid;
  84. border-color: aqua;
  85. }
  86. .F7_position {
  87. position: absolute;
  88. top: 430px;
  89. left: 245px;
  90. width: 160px;
  91. height: 210px;
  92. border-style: solid;
  93. border-color: aqua;
  94. }
  95. .F8_position {
  96. position: absolute;
  97. top: 430px;
  98. left: 420px;
  99. width: 160px;
  100. height: 210px;
  101. border-style: solid;
  102. border-color: aqua;
  103. }
  104. .F9_position {
  105. position: absolute;
  106. top: 430px;
  107. left: 600px;
  108. width: 160px;
  109. height: 210px;
  110. border-style: solid;
  111. border-color: aqua;
  112. }
  113. .F10_position {
  114. position: absolute;
  115. top: 430px;
  116. left: 785px;
  117. width: 160px;
  118. height: 210px;
  119. border-style: solid;
  120. border-color: aqua;
  121. }
  122. .F11_position {
  123. position: absolute;
  124. top: 430px;
  125. left: 970px;
  126. width: 160px;
  127. height: 210px;
  128. border-style: solid;
  129. border-color: aqua;
  130. }
  131. .F12_position {
  132. position: absolute;
  133. top: 430px;
  134. left: 1155px;
  135. width: 160px;
  136. height: 210px;
  137. border-style: solid;
  138. border-color: aqua;
  139. }
  140. .FI1_position {
  141. position: absolute;
  142. top: 210px;
  143. left: 140px;
  144. width: 50px;
  145. height: 140px;
  146. border-style: solid;
  147. border-color: aqua;
  148. }
  149. .FI2_position {
  150. position: absolute;
  151. top: 430px;
  152. left: 140px;
  153. width: 50px;
  154. height: 140px;
  155. border-style: solid;
  156. border-color: aqua;
  157. }
  158. .FO1_position {
  159. position: absolute;
  160. top: 195px;
  161. left: 1350px;
  162. width: 50px;
  163. height: 140px;
  164. border-style: solid;
  165. border-color: aqua;
  166. }
  167. .FO2_position {
  168. position: absolute;
  169. top: 480px;
  170. left: 1350px;
  171. width: 50px;
  172. height: 140px;
  173. border-style: solid;
  174. border-color: aqua;
  175. }
  176. .footer{
  177. position: absolute;
  178. bottom: 0px;
  179. width: 100%;
  180. background-color: #eee;
  181. text-align: center;
  182. }
  183. </style>
  184. <script language="JavaScript">
  185. // 指定 10秒 刷新網頁一次
  186. var WebRestart
  187. // WebRestart = setTimeout(function () { location.reload() }, 10000);
  188. </script>
  189. </head>
  190. <body>
  191. <div id="wrapper">
  192. <div id="coffee_header">
  193. <!-- 匯入共同使用的 header.html 內容 -->
  194. {% include 'header.html' %}
  195. </div>
  196. <div>
  197. <!-- 底圖 發酵貨櫃 12 個發酵桶槽 -->
  198. <div id="FermentContainer_pic" class="FermentContainer_position" >
  199. <img src="../static/img/web_ferment_container.png" width="1450x" style="margin: auto;">
  200. </div>
  201. <!-- 發酵槽 F1 -->
  202. <div id="F1" tabindex="0" class="F1_position" role="button">
  203. F1 status
  204. <!-- F1 狀態點點-->
  205. <div id="F1_status" style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>
  206. </div>
  207. <!-- 發酵槽 F2 -->
  208. <div id="F2" tabindex="0" class="F2_position" role="button">
  209. F2 status
  210. <div id="F2_status" style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>
  211. </div>
  212. <!-- 發酵槽 F3 -->
  213. <div id="F3" tabindex="0" class="F3_position" role="button">
  214. F3 status
  215. <div id="F3_status" style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>
  216. </div>
  217. <!-- 發酵槽 F4 -->
  218. <div id="F4" tabindex="0" class="F4_position" role="button">
  219. F4 status
  220. <div id="F4_status" style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>
  221. </div>
  222. <!-- 發酵槽 F5 -->
  223. <div id="F5" tabindex="0" class="F5_position" role="button">
  224. F5 status
  225. <div id="F5_status" style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>
  226. </div>
  227. <!-- 發酵槽 F6 -->
  228. <div id="F6" tabindex="0" class="F6_position" role="button">
  229. F6 status
  230. <div id="F6_status" style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>
  231. </div>
  232. <!-- 發酵槽 F7 -->
  233. <div id="F7" tabindex="0" class="F7_position" role="button" style="vertical-align: bottom;">
  234. F7 status
  235. <div id="F7_status" style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>
  236. </div>
  237. <!-- 發酵槽 F8 -->
  238. <div id="F8" tabindex="0" class="F8_position" role="button">
  239. F8 status
  240. <div id="F8_status" style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>
  241. </div>
  242. <!-- 發酵槽 F9 -->
  243. <div id="F9" tabindex="0" class="F9_position" role="button">
  244. F9 status
  245. <div id="F9_status" style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>
  246. </div>
  247. <!-- 發酵槽 F10 -->
  248. <div id="F10" tabindex="0" class="F10_position" role="button">
  249. F10 status
  250. <div id="F10_status" style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>
  251. </div>
  252. <!-- 發酵槽 F11 -->
  253. <div id="F11" tabindex="0" class="F11_position" role="button">
  254. F11 status
  255. <div id="F11_status" style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>
  256. </div>
  257. <!-- 發酵槽 F12 -->
  258. <div id="F12" tabindex="0" class="F12_position" role="button">
  259. F12 status
  260. <div id="F12_status" style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>
  261. </div>
  262. <!-- 發酵槽入料儲豆槽 FI1 -->
  263. <div id="FI1" tabindex="0" class="FI1_position" role="button">
  264. FI1 status
  265. <div id="FI1_status" style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>
  266. </div>
  267. <!-- 發酵槽入料儲豆槽 FI2 -->
  268. <div id="FI2" tabindex="0" class="FI2_position" role="button">
  269. FI2 status
  270. <div id="FI2_status" style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>
  271. </div>
  272. <!-- 發酵槽出料儲豆槽 FO1 -->
  273. <div id="FO1" tabindex="0" class="FO1_position" role="button">
  274. FO1 status
  275. <div id="FO1_status" style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>
  276. </div>
  277. <!-- 發酵槽出料儲豆槽 FO2 -->
  278. <div id="FO2" tabindex="0" class="FO2_position" role="button">
  279. FO2 status
  280. <div id="FO2_status" style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>
  281. </div>
  282. </div>
  283. <!-- 發酵槽互動視窗(模态框) -->
  284. <div class="modal fade" id="F_Modal">
  285. <div class="modal-dialog modal-dialog-centered" style="width: 410px;">
  286. <div class="modal-content">
  287. <!-- 互動視窗 標題 -->
  288. <div class="modal-header">
  289. <h4 id="Modal_title" class="modal-title">發酵槽 F1 狀態</h4>
  290. <button type="button" class="close" data-dismiss="modal">&times;</button>
  291. </div>
  292. <!-- 互動視窗 內容 -->
  293. <div class="modal-body">
  294. <table style="border:0px gray solid; width: 100%;" cellpadding="3">
  295. <!--<table style="border:0px gray solid;-->
  296. <tr>
  297. <td><strong><a id="actuator_link" href="/ferment_container/1">致動器狀態</a></strong></td>
  298. <td><strong><a id="sensor_link" href="/ferment_container/1">感測器狀態</a></strong></td>
  299. </tr>
  300. <tr>
  301. <td style="vertical-align:text-top;">
  302. <table style="border:0px gray solid;" cellpadding="3">
  303. <!--font-size:12px; -->
  304. <tr>
  305. <td>
  306. <div id="tank_vacuum_status"
  307. style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
  308. </div>
  309. </td>
  310. <td>
  311. <a id="Vacuum" href="">真空吸料機</a>
  312. <!--<span id="tank_vacuum_t_status"></span>-->
  313. </td>
  314. </tr>
  315. <tr>
  316. <td>
  317. <div id="tank_threewayvalve_input_status"
  318. style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
  319. </div>
  320. </td>
  321. <td>
  322. <a id="ThreeWayValveInput" href="">入料三通閥</a>
  323. <!--<span id="tank_threewayvalve_input_t_status"></span>-->
  324. </td>
  325. </tr>
  326. <!-- <tr>
  327. <td>
  328. <div id="tank_solenoid_water_total_status"
  329. style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
  330. </div>
  331. </td>
  332. <td>
  333. <a id="SolenoidWaterTotal" href="">總進水電磁閥</a>
  334. <span id="tank_solenoid_water_total_t_status"></span>
  335. </td>
  336. </tr> -->
  337. <tr>
  338. <td>
  339. <div id="outer_solenoid_water_status"
  340. style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
  341. </div>
  342. </td>
  343. <td>
  344. <a id="SolenoidOuterWater" href="">保溫夾層進水電磁閥</a>
  345. <!--<span id="outer_solenoid_water_t_status"></span>-->
  346. </td>
  347. </tr>
  348. <tr>
  349. <td>
  350. <div id="tank_solenoid_water_in_status"
  351. style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
  352. </div>
  353. </td>
  354. <td>
  355. <a id="SolenoidWaterIn" href="">桶內進水電磁閥</a>
  356. <!--<span id="tank_solenoid_water_in_t_status"></span>-->
  357. </td>
  358. </tr>
  359. <tr>
  360. <td>
  361. <div id="tank_pump_sensor_status"
  362. style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
  363. </div>
  364. </td>
  365. <td>
  366. <a id="PumpSensor" href="">感測器抽水雙核隔膜泵</a>
  367. <!--<span id="tank_pump_sensor_t_status"></span>-->
  368. </td>
  369. </tr>
  370. <!-- <tr>
  371. <td>
  372. <div id="tank_threewayvalve_bean_status"
  373. style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
  374. </div>
  375. </td>
  376. <td>
  377. <a id="ThreeWayValveBean" href="">感測模組下豆三通閥</a>
  378. <span id="tank_threewayvalve_bean_t_status"></span>
  379. </td>
  380. </tr> -->
  381. <tr>
  382. <td>
  383. <div id="outer_threewayvalve_float_status"
  384. style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
  385. </div>
  386. </td>
  387. <td>
  388. <a id="ThreeWayValveFloat" href="">外桶浮選三通閥</a>
  389. <!--<span id="outer_threewayvalve_float_t_status"></span>-->
  390. </td>
  391. </tr>
  392. <tr>
  393. <td>
  394. <div id="tank_solenoid_disinfect_status"
  395. style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
  396. </div>
  397. </td>
  398. <td>
  399. <a id="SolenoidDisinfect" href="">桶內消毒電磁閥</a>
  400. <!--<span id="tank_solenoid_disinfect_t_status"></span>-->
  401. </td>
  402. </tr>
  403. <tr>
  404. <td>
  405. <div id="tank_motor_status"
  406. style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
  407. </div>
  408. </td>
  409. <td>
  410. <a id="Motor" href="">馬達</a>
  411. <!--<span id="tank_motor_t_status"></span>-->
  412. </td>
  413. </tr>
  414. <tr>
  415. <td>
  416. <div id="tank_heater1_status"
  417. style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
  418. </div>
  419. </td>
  420. <td>
  421. <a id="Heater1" href="">加熱器 1</a>
  422. <!--<span id="tank_heater1_t_status"></span>-->
  423. </td>
  424. </tr>
  425. <tr>
  426. <td>
  427. <div id="tank_heater2_status"
  428. style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
  429. </div>
  430. </td>
  431. <td>
  432. <a id="Heater2" href="">加熱器 2</a>
  433. <!--<span id="tank_heater2_t_status"></span>-->
  434. </td>
  435. </tr>
  436. <tr>
  437. <td>
  438. <div id="tank_temp_enable_status"
  439. style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
  440. </div>
  441. </td>
  442. <td>
  443. <a id="TempEnable" href="">溫控開關</a>
  444. <!--<span id="tank_temp_enable_t_status"></span>-->
  445. </td>
  446. </tr>
  447. <tr>
  448. <td>
  449. <div id="tank_temp_status"
  450. style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
  451. </div>
  452. </td>
  453. <td>
  454. <a id="temp" href="">溫度設定</a>
  455. <!--<span id="tank_temp_t_status"></span>-->
  456. </td>
  457. </tr>
  458. <tr>
  459. <td>
  460. <div id="tank_diskvalve_status"
  461. style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
  462. </div>
  463. </td>
  464. <td>
  465. <a id="DiskValve" href="">蝴蝶閥</a>
  466. <!--<span id="tank_diskvalve_t_status"></span>-->
  467. </td>
  468. </tr>
  469. </table>
  470. </td>
  471. <td style="vertical-align:text-top;">
  472. <table style="border:0px gray solid;" cellpadding="3">
  473. <tr>
  474. <td>
  475. <a id="UltraSonic" href="">水位/生豆高度</a>
  476. </td>
  477. <td>
  478. <span id="UltraSonic_t_status"></span>
  479. </td>
  480. </tr>
  481. <tr>
  482. <td>
  483. <a id="motorEncoder" href="">馬達編碼器</a>
  484. </td>
  485. <td>
  486. <span id="motorEncoder_t_status"></span>
  487. </td>
  488. </tr>
  489. <tr>
  490. <td>
  491. <a id="SHT11_Temp" href="">溫度</a>
  492. </td>
  493. <td>
  494. <span id="SHT11_Temp_t_status"></span>
  495. </td>
  496. </tr>
  497. <tr>
  498. <td>
  499. <a id="SHT11_Humidity" href="">濕度</a>
  500. </td>
  501. <td>
  502. <span id="SHT11_Humidity_t_status"></span>
  503. </td>
  504. </tr>
  505. <tr>
  506. <td>
  507. <a id="CO2" href="">二氧化碳</a>
  508. </td>
  509. <td>
  510. <span id="CO2_t_status"></span>
  511. </td>
  512. </tr>
  513. <tr>
  514. <td>
  515. <a id="PA" href="">大氣壓力</a>
  516. </td>
  517. <td>
  518. <span id="PA_t_status"></span>
  519. </td>
  520. </tr>
  521. <tr>
  522. <td>
  523. <a id="PH" href="">PH</a>
  524. </td>
  525. <td>
  526. <span id="PH_t_status"></span>
  527. </td>
  528. </tr>
  529. <tr>
  530. <td>
  531. <a id="ORP" href="">ORP</a>
  532. </td>
  533. <td>
  534. <span id="ORP_t_status"></span>
  535. </td>
  536. </tr>
  537. <tr>
  538. <td>
  539. <a id="DO" href="">DO</a>
  540. </td>
  541. <td>
  542. <span id="DO_t_status"></span>
  543. </td>
  544. </tr>
  545. <tr>
  546. <td>
  547. <a id="EC" href="">EC</a>
  548. </td>
  549. <td>
  550. <span id="EC_t_status"></span>
  551. </td>
  552. </tr>
  553. <tr>
  554. <td>
  555. 保溫夾層水位
  556. </td>
  557. <td>
  558. <!-- 滿 / 未滿 -->
  559. <span id="WaterLevel_t_status"></span>
  560. </td>
  561. </tr>
  562. <tr>
  563. <td>
  564. <a id="camera_ferment_tid" href=""><strong>攝影機畫面</strong></a>
  565. </td>
  566. </tr>
  567. </table>
  568. </td>
  569. </tr>
  570. </table>
  571. </div>
  572. </div>
  573. </div>
  574. </div>
  575. <!-- 發酵槽入料儲豆槽互動視窗(模态框) -->
  576. <div class="modal fade" id="FI_Modal">
  577. <div class="modal-dialog modal-dialog-centered" style="width: 410px;">
  578. <div class="modal-content">
  579. <!-- 互動視窗 標題 -->
  580. <div class="modal-header">
  581. <h4 id="Modal_title_input" class="modal-title">發酵入料儲豆槽 FI1 狀態</h4>
  582. <button type="button" class="close" data-dismiss="modal">&times;</button>
  583. </div>
  584. <!-- 互動視窗 內容 -->
  585. <div class="modal-body">
  586. <table style="border:0px gray solid; width: 100%;" cellpadding="3">
  587. <!--<table style="border:0px gray solid;-->
  588. <tr>
  589. <td><strong><a id="actuator_link_input" href="">致動器狀態</a></strong></td>
  590. <td><strong><a id="sensor_link_input" href="">感測器狀態</a></strong></td>
  591. </tr>
  592. <tr>
  593. <td style="vertical-align:text-top;">
  594. <table style="border:0px gray solid;" cellpadding="3">
  595. <!--font-size:12px; -->
  596. <tr>
  597. <td>
  598. <div id="input_vacuum_status"
  599. style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
  600. </div>
  601. </td>
  602. <td>
  603. <a id="input_Vacuum" href="">真空吸料機</a>
  604. <span id="input_vacuum_status"></span>
  605. </td>
  606. </tr>
  607. </table>
  608. </td>
  609. <td style="vertical-align:text-top;">
  610. <table style="border:0px gray solid;" cellpadding="3">
  611. <tr>
  612. <td>
  613. <a id="FI_UltraSonic" href="">咖啡生豆高度</a>
  614. </td>
  615. <td>
  616. <span id="FI_UltraSonic_t_status"></span>
  617. </td>
  618. </tr>
  619. <tr>
  620. <td>
  621. <a id="FI_camera_ferment_tid" href=""><strong>攝影機畫面</strong></a>
  622. </td>
  623. </tr>
  624. </table>
  625. </td>
  626. </tr>
  627. </table>
  628. </div>
  629. </div>
  630. </div>
  631. </div>
  632. <!-- 發酵槽出料儲豆槽互動視窗(模态框) -->
  633. <div class="modal fade" id="FO_Modal">
  634. <div class="modal-dialog modal-dialog-centered" style="width: 410px;">
  635. <div class="modal-content">
  636. <!-- 互動視窗 標題 -->
  637. <div class="modal-header">
  638. <h4 id="Modal_title_output" class="modal-title">發酵出料儲豆槽 FO1 狀態</h4>
  639. <button type="button" class="close" data-dismiss="modal">&times;</button>
  640. </div>
  641. <!-- 互動視窗 內容 -->
  642. <div class="modal-body">
  643. <table style="border:0px gray solid; width: 100%;" cellpadding="3">
  644. <!--<table style="border:0px gray solid;-->
  645. <tr>
  646. <td><strong><a id="actuator_link_output" href="">致動器狀態</a></strong></td>
  647. <td><strong><a id="sensor_link_output" href="">感測器狀態</a></strong></td>
  648. </tr>
  649. <tr>
  650. <td style="vertical-align:text-top;">
  651. <table style="border:0px gray solid;" cellpadding="3">
  652. <!--font-size:12px; -->
  653. <tr>
  654. <td>
  655. <div id="output_vacuum_status"
  656. style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
  657. </div>
  658. </td>
  659. <td>
  660. <a id="output_Vacuum" href="">真空吸料機</a>
  661. <span id="output_vacuum_status"></span>
  662. </td>
  663. </tr>
  664. </table>
  665. </td>
  666. <td style="vertical-align:text-top;">
  667. <table style="border:0px gray solid;" cellpadding="3">
  668. <tr>
  669. <td>
  670. <a id="FO_UltraSonic" href="">咖啡生豆高度</a>
  671. </td>
  672. <td>
  673. <span id="FO_UltraSonic_t_status"></span>
  674. </td>
  675. </tr>
  676. <tr>
  677. <td>
  678. <a id="FO_camera_ferment_tid" href=""><strong>攝影機畫面</strong></a>
  679. </td>
  680. </tr>
  681. </table>
  682. </td>
  683. </tr>
  684. </table>
  685. </div>
  686. </div>
  687. </div>
  688. </div>
  689. <script>
  690. /*
  691. var button_F1 = document.getElementById('F1');
  692. button_F1.addEventListener('click', showTankDetail);
  693. //var button_F2 = document.getElementById('F2');
  694. //button_F2.addEventListener('click', showTankDetail);
  695. var tank_num = 0;
  696. function showTankDetail() {
  697. // 打開模態框
  698. $('#Modal').modal('show');
  699. };
  700. */
  701. function update_data_F(ftid) {
  702. console.log('ferment_tank_id:' + ftid)
  703. // ftid = dry_tank_id
  704. $.get('/loading/F' + ftid, '', function (res) {
  705. if (res.tank_vacuum == 0) {
  706. $("#tank_vacuum_status").css("background-color", "#C0C0C0")
  707. } else if (res.tank_vacuum == 1) {
  708. $("#tank_vacuum_status").css("background-color", "forestgreen")
  709. } else { $("#tank_vacuum_status").css("background-color", "crimson") }
  710. if (res.tank_threewayvalve_input == 0) {
  711. $("#tank_threewayvalve_input_status").css("background-color", "#C0C0C0")
  712. } else if (res.tank_threewayvalve_input == 1) {
  713. $("#tank_threewayvalve_input_status").css("background-color", "forestgreen")
  714. } else { $("#tank_threewayvalve_input_status").css("background-color", "crimson") }
  715. if (res.tank_diskvalve == 0) {
  716. $("#tank_diskvalve_status").css("background-color", "#C0C0C0")
  717. } else if (res.tank_diskvalve == 1) {
  718. $("#tank_diskvalve_status").css("background-color", "forestgreen")
  719. } else { $("#tank_diskvalve_status").css("background-color", "crimson") }
  720. if (res.tank_solenoid_water_total == 0) {
  721. $("#tank_solenoid_water_total_status").css("background-color", "#C0C0C0")
  722. } else if (res.tank_solenoid_water_total == 1) {
  723. $("#tank_solenoid_water_total_status").css("background-color", "forestgreen")
  724. } else { $("#tank_solenoid_water_total_status").css("background-color", "crimson") }
  725. if (res.tank_solenoid_disinfect == 0) {
  726. $("#tank_solenoid_disinfect_status").css("background-color", "#C0C0C0")
  727. } else if (res.tank_solenoid_disinfect == 1) {
  728. $("#tank_solenoid_disinfect_status").css("background-color", "forestgreen")
  729. } else { $("#tank_solenoid_disinfect_status").css("background-color", "crimson") }
  730. if (res.outer_solenoid_water == 0) {
  731. $("#outer_solenoid_water_status").css("background-color", "#C0C0C0")
  732. } else if (res.outer_solenoid_water == 1) {
  733. $("#outer_solenoid_water_status").css("background-color", "forestgreen")
  734. } else { $("#outer_solenoid_water_status").css("background-color", "crimson") }
  735. if (res.tank_solenoid_water_in == 0) {
  736. $("#tank_solenoid_water_in_status").css("background-color", "#C0C0C0")
  737. } else if (res.tank_solenoid_water_in == 1) {
  738. $("#tank_solenoid_water_in_status").css("background-color", "forestgreen")
  739. } else { $("#tank_solenoid_water_in_status").css("background-color", "crimson") }
  740. if (res.tank_pump_sensor == 0) {
  741. $("#tank_pump_sensor_status").css("background-color", "#C0C0C0")
  742. } else if (res.tank_pump_sensor == 1) {
  743. $("#tank_pump_sensor_status").css("background-color", "forestgreen")
  744. } else { $("#tank_pump_sensor_status").css("background-color", "crimson") }
  745. if (res.tank_threewayvalve_bean == 0) {
  746. $("#tank_threewayvalve_bean_status").css("background-color", "#C0C0C0")
  747. } else if (res.tank_threewayvalve_bean == 1) {
  748. $("#tank_threewayvalve_bean_status").css("background-color", "forestgreen")
  749. } else { $("#tank_threewayvalve_bean_status").css("background-color", "crimson") }
  750. if (res.outer_threewayvalve_float == 0) {
  751. $("#outer_threewayvalve_float_status").css("background-color", "#C0C0C0")
  752. } else if (res.outer_threewayvalve_float == 1) {
  753. $("#outer_threewayvalve_float_status").css("background-color", "forestgreen")
  754. } else { $("#outer_threewayvalve_float_status").css("background-color", "crimson") }
  755. if (res.tank_motor == 0) {
  756. $("#tank_motor_status").css("background-color", "#C0C0C0")
  757. } else if (res.tank_motor > 0 || res.tank_motor < 0) {
  758. $("#tank_motor_status").css("background-color", "forestgreen")
  759. } else { $("#tank_motor_status").css("background-color", "crimson") }
  760. if (res.tank_heater1 == 0) {
  761. $("#tank_heater1_status").css("background-color", "#C0C0C0")
  762. } else if (res.tank_heater1 == 1) {
  763. $("#tank_heater1_status").css("background-color", "forestgreen")
  764. } else { $("#tank_heater1_status").css("background-color", "crimson") }
  765. if (res.tank_heater2 == 0) {
  766. $("#tank_heater2_status").css("background-color", "#C0C0C0")
  767. } else if (res.tank_heater2 == 1) {
  768. $("#tank_heater2_status").css("background-color", "forestgreen")
  769. } else { $("#tank_heater2_status").css("background-color", "crimson") }
  770. if (res.tank_temp_enable == 0) {
  771. $("#tank_temp_enable_status").css("background-color", "#C0C0C0")
  772. } else if (res.tank_temp_enable == 1) {
  773. $("#tank_temp_enable_status").css("background-color", "forestgreen")
  774. } else { $("#tank_temp_enable_status").css("background-color", "crimson") }
  775. if (res.tank_temp == 0) {
  776. $("#tank_temp_status").css("background-color", "#C0C0C0")
  777. } else if (res.tank_temp > 0) {
  778. $("#tank_temp_status").css("background-color", "forestgreen")
  779. } else { $("#tank_temp_status").css("background-color", "crimson") }
  780. $("#tank_vacuum_t_status").text(res.tank_vacuum);
  781. $("#tank_threewayvalve_input_t_status").text(res.tank_threewayvalve_input);
  782. $("#tank_diskvalve_t_status").text(res.tank_diskvalve);
  783. $("#tank_solenoid_water_total_t_status").text(res.tank_solenoid_water_total);
  784. $("#tank_solenoid_disinfect_t_status").text(res.tank_solenoid_disinfect);
  785. $("#outer_solenoid_water_t_status").text(res.outer_solenoid_water);
  786. $("#tank_solenoid_water_in_t_status").text(res.tank_solenoid_water_in);
  787. $("#tank_pump_sensor_t_status").text(res.tank_pump_sensor);
  788. $("#tank_threewayvalve_bean_t_status").text(res.tank_threewayvalve_bean);
  789. $("#outer_threewayvalve_float_t_status").text(res.outer_threewayvalve_float);
  790. $("#tank_motor_t_status").text(res.tank_motor);
  791. $("#tank_heater1_t_status").text(res.tank_heater1);
  792. $("#tank_heater2_t_status").text(res.tank_heater2);
  793. $("#tank_temp_enable_t_status").text(res.tank_temp_enable);
  794. $("#tank_temp_t_status").text(res.tank_temp);
  795. $("#UltraSonic_t_status").text(res.UltraSonic);
  796. $("#motorEncoder_t_status").text(res.motorEncoder)
  797. $("#SHT11_Temp_t_status").text(res.SHT11_Temp);
  798. $("#SHT11_Humidity_t_status").text(res.SHT11_Humidity);
  799. $("#CO2_t_status").text(res.CO2);
  800. $("#PH_t_status").text(res.PH);
  801. $("#ORP_t_status").text(res.ORP);
  802. $("#DO_t_status").text(res.DO);
  803. $("#EC_t_status").text(res.EC);
  804. $("#PA_t_status").text(res.PA);
  805. $("#WaterLevel_t_status").text(res.WaterLevel);
  806. if (res.WaterLevel == 0) {
  807. $("#WaterLevel_t_status").text("未滿");
  808. } else if (res.WaterLevel == 1) {
  809. $("#WaterLevel_t_status").text("滿");}
  810. }, 'json');
  811. $('#Modal_title').text("發酵槽 F" + ftid + " 狀態")
  812. if (status == 2) {
  813. $('#actuator_link').attr("title", "該使用者無修改權限")
  814. $('#sensor_link').attr("title", "該使用者無修改權限")
  815. $('#Vacuum').attr("title", "該使用者無修改權限")
  816. $('#ThreeWayValveInput').attr("title", "該使用者無修改權限")
  817. $('#SolenoidWaterTotal').attr("title", "該使用者無修改權限")
  818. $('#SolenoidOuterWater').attr("title", "該使用者無修改權限")
  819. $('#SolenoidWaterIn').attr("title", "該使用者無修改權限")
  820. $('#PumpSensor').attr("title", "該使用者無修改權限")
  821. $('#ThreeWayValveBean').attr("title", "該使用者無修改權限")
  822. $('#ThreeWayValveFloat').attr("title", "該使用者無修改權限")
  823. $('#SolenoidDisinfect').attr("title", "該使用者無修改權限")
  824. $('#Motor').attr("title", "該使用者無修改權限")
  825. $('#Heater1').attr("title", "該使用者無修改權限")
  826. $('#Heater2').attr("title", "該使用者無修改權限")
  827. $('#TempEnable').attr("title", "該使用者無修改權限")
  828. $('#temp').attr("title", "該使用者無修改權限")
  829. $('#DiskValve').attr("title", "該使用者無修改權限")
  830. } else if ( (status == 0) || (status == 1) ) {
  831. $('#actuator_link').attr("href", "/ferment_container_tank/" + ftid)
  832. $('#sensor_link').attr("href", "/ferment_container_tank/" + ftid)
  833. $('#Vacuum').attr("href", "/ctrl_F_Vacuum/" + ftid)
  834. $('#ThreeWayValveInput').attr("href", "/ctrl_F_ThreeWayValveInput/" + ftid)
  835. $('#SolenoidWaterTotal').attr("href", "/ctrl_F_SolenoidWaterTotal/" + ftid)
  836. $('#SolenoidOuterWater').attr("href", "/ctrl_F_SolenoidOuterWater/" + ftid)
  837. $('#SolenoidWaterIn').attr("href", "/ctrl_F_SolenoidWaterIn/" + ftid)
  838. $('#PumpSensor').attr("href", "/ctrl_F_PumpSensor/" + ftid)
  839. $('#ThreeWayValveBean').attr("href", "/ctrl_F_ThreeWayValveBean/" + ftid)
  840. $('#ThreeWayValveFloat').attr("href", "/ctrl_F_ThreeWayValveFloat/" + ftid)
  841. $('#SolenoidDisinfect').attr("href", "/ctrl_F_SolenoidDisinfect/" + ftid)
  842. $('#Motor').attr("href", "/ctrl_F_Motor/" + ftid)
  843. $('#Heater1').attr("href", "/ctrl_F_Heater1/" + ftid)
  844. $('#Heater2').attr("href", "/ctrl_F_Heater2/" + ftid)
  845. $('#TempEnable').attr("href", "/ctrl_F_TempEnable/" + ftid)
  846. $('#temp').attr("href", "/ctrl_F_Temp/" + ftid)
  847. $('#DiskValve').attr("href", "/ctrl_F_DiskValve/" + ftid)
  848. }
  849. $("#LiDAR").attr("href", "/chart_F/LiDAR/" + ftid)
  850. $("#UltraSonic").attr("href", "/chart_F/UltraSonic/" + ftid)
  851. $("#motorEncoder").attr("href", "/chart_F/motorEncoder/" + ftid)
  852. $("#SHT11_Temp").attr("href", "/chart_F/SHT11_Temp/" + ftid)
  853. $("#SHT11_Humidity").attr("href", "/chart_F/SHT11_Humidity/" + ftid)
  854. $("#CO2").attr("href", "/chart_F/CO2/" + ftid)
  855. $("#PH").attr("href", "/chart_F/PH/" + ftid)
  856. $("#ORP").attr("href", "/chart_F/ORP/" + ftid)
  857. $("#DO").attr("href", "/chart_F/DO/" + ftid)
  858. $("#EC").attr("href", "/chart_F/EC/" + ftid)
  859. $("#PA").attr("href", "/chart_F/PA/" + ftid)
  860. $('#camera_ferment_tid').attr("href", "/camera_F" + ftid)
  861. $('#F_Modal').modal('show');
  862. }
  863. function update_data_FI(fitid){
  864. console.log('ferment_input_tank_id:' + fitid)
  865. // fitid = ferment_input_tank_id
  866. $.get('/loading/FI' + fitid, '', function (res) {
  867. if (res.input_vacuum == 0) {
  868. $("#input_vacuum_status").css("background-color", "#C0C0C0")
  869. } else if (res.input_vacuum == 1) {
  870. $("#input_vacuum_status").css("background-color", "forestgreen")
  871. } else { $("#input_vacuum_status").css("background-color", "crimson") }
  872. $("#FI_UltraSonic_t_status").text(res.input_UltraSonic);
  873. }, 'json');
  874. $('#Modal_title_input').text("發酵入料儲豆槽 FI" + fitid + " 狀態")
  875. if (status == 2) {
  876. $('#actuator_link_input').attr("title", "該使用者無修改權限")
  877. $('#sensor_link_input').attr("title", "該使用者無修改權限")
  878. $('#input_Vacuum').attr("title", "該使用者無修改權限")
  879. } else if ( (status == 0) || (status == 1) ) {
  880. $('#actuator_link_input').attr("href", "/ferment_container_input/" + fitid)
  881. $('#sensor_link_input').attr("href", "/ferment_container_input/" + fitid)
  882. $('#input_Vacuum').attr("href", "/ctrl_FI_Vacuum/" + fitid)
  883. }
  884. $('#FI_UltraSonic').attr("href", "/chart_FI/UltraSonic/" + fitid)
  885. $('#FI_camera_ferment_tid').attr("href", "/camera_FI" + fitid)
  886. $('#FI_Modal').modal('show');
  887. };
  888. function update_data_FO(fotid){
  889. console.log('ferment_output_tank_id:' + fotid)
  890. // fitid = ferment_input_tank_id
  891. $.get('/loading/FO' + fotid, '', function (res) {
  892. if (res.output_vacuum == 0) {
  893. $("#output_vacuum_status").css("background-color", "#C0C0C0")
  894. } else if (res.output_vacuum == 1) {
  895. $("#output_vacuum_status").css("background-color", "forestgreen")
  896. } else { $("#output_vacuum_status").css("background-color", "crimson") }
  897. $("#FO_UltraSonic_t_status").text(res.output_UltraSonic);
  898. }, 'json');
  899. $('#Modal_title_output').text("發酵出料儲豆槽 FO" + fotid + " 狀態")
  900. if (status == 2) {
  901. $('#actuator_link_output').attr("title", "該使用者無修改權限")
  902. $('#sensor_link_output').attr("title", "該使用者無修改權限")
  903. $('#output_Vacuum').attr("title", "該使用者無修改權限")
  904. } else if ( (status == 0) || (status == 1) ) {
  905. $('#actuator_link_output').attr("href", "/ferment_container_output/" + fotid)
  906. $('#sensor_link_output').attr("href", "/ferment_container_output/" + fotid)
  907. $('#output_Vacuum').attr("href", "/ctrl_FO_Vacuum/" + fotid)
  908. }
  909. $('#FO_UltraSonic').attr("href", "/chart_FO/UltraSonic/" + fotid)
  910. $('#FO_camera_ferment_tid').attr("href", "/camera_FO" + fotid)
  911. $('#FO_Modal').modal('show');
  912. };
  913. var button_F1 = document.getElementById('F1');
  914. button_F1.addEventListener('click', function () { update_data_F("1") });
  915. var button_F2 = document.getElementById('F2');
  916. button_F2.addEventListener('click', function () { update_data_F("2") });
  917. var button_F3 = document.getElementById('F3');
  918. button_F3.addEventListener('click', function () { update_data_F("3") });
  919. var button_F4 = document.getElementById('F4');
  920. button_F4.addEventListener('click', function () { update_data_F("4") });
  921. var button_F5 = document.getElementById('F5');
  922. button_F5.addEventListener('click', function () { update_data_F("5") });
  923. var button_F6 = document.getElementById('F6');
  924. button_F6.addEventListener('click', function () { update_data_F("6") });
  925. var button_F7 = document.getElementById('F7');
  926. button_F7.addEventListener('click', function () { update_data_F("7") });
  927. var button_F8 = document.getElementById('F8');
  928. button_F8.addEventListener('click', function () { update_data_F("8") });
  929. var button_F9 = document.getElementById('F9');
  930. button_F9.addEventListener('click', function () { update_data_F("9") });
  931. var button_F10 = document.getElementById('F10');
  932. button_F10.addEventListener('click', function () { update_data_F("10") });
  933. var button_F11 = document.getElementById('F11');
  934. button_F11.addEventListener('click', function () { update_data_F("11") });
  935. var button_F12 = document.getElementById('F12');
  936. button_F12.addEventListener('click', function () { update_data_F("12") });
  937. var button_FI1 = document.getElementById('FI1');
  938. button_FI1.addEventListener('click', function () { update_data_FI("1") });
  939. var button_FI2 = document.getElementById('FI2');
  940. button_FI2.addEventListener('click', function () { update_data_FI("2") });
  941. var button_FO1 = document.getElementById('FO1');
  942. button_FO1.addEventListener('click', function () { update_data_FO("1") });
  943. var button_FO2 = document.getElementById('FO2');
  944. button_FO2.addEventListener('click', function () { update_data_FO("2") });
  945. </script>
  946. <footer class="footer">
  947. <div style="text-align: center; margin-top: 10px; font-size: 13px; margin-bottom: 10px;">
  948. Copyright © 2021 Gold-in Tech. All Rights Reserved. 金子進科技股份有限公司 版權所有
  949. <a href="mailto:service.gitc@gmail.com" target="_blank">service.gitc@gmail.com</a>
  950. </div>
  951. </footer>
  952. <div id="coffee_footer">
  953. <!-- 匯入共同使用的 footer.html 內容 -->
  954. {% include 'footer.html' %}
  955. </div>
  956. </div>
  957. </body>
  958. </html>