1
0

ferment_auto_1004.html 26 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576
  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. <meta http-equiv="refresh" content="300" /> <!-- 每 content 秒網頁自動更新-->
  8. <!-- 新 Bootstrap4 核心 CSS 文件 -->
  9. <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.1.0/css/bootstrap.min.css">
  10. <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
  11. <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
  12. <!-- popper.min.js 用于弹窗、提示、下拉菜单 -->
  13. <script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script>
  14. <!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
  15. <script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
  16. <!--
  17. <script src="../static/js/sign_in.js"></script>
  18. <link rel="stylesheet" href="../static/css/sign_in.css">
  19. -->
  20. <script>
  21. $(document).ready(function(){
  22. $("#coffee_title").text('發酵自動化');
  23. // 桶槽入料顯示
  24. ferment_input_status_N = ['{{FI1}}', '{{FI2}}']
  25. console.log('ferment_input_status_N: ' + ferment_input_status_N)
  26. for (let i=0; i<ferment_input_status_N.length; i++) {
  27. // 顯示對應發酵桶槽號碼 F1~F6 和目前狀態
  28. // console.log(i+1 + ' : '+ ferment_output_status[i])
  29. // 1 : F_InputtingBean
  30. // 2 : F_Waiting
  31. if (ferment_input_status_N[i] == 'FI_InputtingBean') {
  32. $("#FI"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
  33. $("#FI"+parseInt(i+1)+"_status").text("FI" + parseInt(i+1) + " 入豆中")
  34. } else if (ferment_input_status_N[i] == 'FI_Waiting') {
  35. $("#FI"+parseInt(i+1)+"_status_dot").css("background-color", "lightgray")
  36. $("#FI"+parseInt(i+1)+"_status").text("FI" + parseInt(i+1) + " 空桶等待")
  37. } else if (ferment_input_status_N[i] == 'FI_OutputtingBean') {
  38. $("#FI"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
  39. $("#FI"+parseInt(i+1)+"_status").text("FI" + parseInt(i+1) + " 可出豆")
  40. } else {
  41. console.log('pass')
  42. }
  43. }
  44. // 桶槽狀態顯示
  45. ferment_tank_status_N = ['{{F1}}', '{{F2}}', '{{F3}}', '{{F4}}', '{{F5}}', '{{F6}}',
  46. '{{F7}}', '{{F8}}', '{{F9}}', '{{F10}}', '{{F11}}', '{{F12}}']
  47. console.log('ferment_tank_status_N: ' + ferment_tank_status_N)
  48. for (let i=0; i<ferment_tank_status_N.length; i++) {
  49. // 顯示對應發酵桶槽號碼 F1~F6 和目前狀態
  50. // console.log(i+1 + ' : '+ ferment_tank_status[i])
  51. // 1 : F_InputtingBean
  52. // 2 : F_Waiting
  53. if (ferment_tank_status_N[i] == 'F_InputtingBean') {
  54. $("#F"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
  55. $("#F"+parseInt(i+1)+"_status").text("F" + parseInt(i+1) + " 入豆中")
  56. } else if (ferment_tank_status_N[i] == 'F_InputtingBean_Pause') {
  57. $("#F"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
  58. $("#F"+parseInt(i+1)+"_status").text("F" + parseInt(i+1) + " 入豆暫停")
  59. } else if (ferment_tank_status_N[i] == 'F_InputtingBean_Finish') {
  60. $("#F"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
  61. $("#F"+parseInt(i+1)+"_status").text("F" + parseInt(i+1) + " 入豆完成")
  62. } else if (ferment_tank_status_N[i] == 'F_InputtingWater') {
  63. $("#F"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
  64. $("#F"+parseInt(i+1)+"_status").text("F" + parseInt(i+1) + " 入水中")
  65. } else if (ferment_tank_status_N[i] == 'F_Waiting') {
  66. $("#F"+parseInt(i+1)+"_status_dot").css("background-color", "lightgray")
  67. $("#F"+parseInt(i+1)+"_status").text("F" + parseInt(i+1) + " 空桶等待")
  68. } else if (ferment_tank_status_N[i] == 'F_Cleaning') {
  69. $("#F"+parseInt(i+1)+"_status_dot").css("background-color", "plum")
  70. $("#F"+parseInt(i+1)+"_status").text("F" + parseInt(i+1) + " 清洗中")
  71. } else if (ferment_tank_status_N[i] == 'F_Fermenting') {
  72. $("#F"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
  73. $("#F"+parseInt(i+1)+"_status").text("F" + parseInt(i+1) + " 發酵中")
  74. } else if (ferment_tank_status_N[i] == 'F_OutputtingBean') {
  75. $("#F"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
  76. $("#F"+parseInt(i+1)+"_status").text("F" + parseInt(i+1) + " 可出豆")
  77. } else if (ferment_tank_status_N[i] == 'F_Warning') {
  78. $("#F"+parseInt(i+1)+"_status_dot").css("background-color", "crimson")
  79. $("#F"+parseInt(i+1)+"_status").text("F" + parseInt(i+1) + " 發生錯誤")
  80. $("#F"+parseInt(i+1)+"_status").css("color", "crimson")
  81. } else {
  82. console.log('pass')
  83. }
  84. }
  85. // 桶槽出料顯示
  86. ferment_output_status_N = ['{{FO1}}', '{{FO2}}']
  87. console.log('ferment_output_status_N: ' + ferment_output_status_N)
  88. for (let i=0; i<ferment_output_status_N.length; i++) {
  89. // 顯示對應發酵桶槽號碼 F1~F6 和目前狀態
  90. // console.log(i+1 + ' : '+ ferment_output_status[i])
  91. // 1 : F_InputtingBean
  92. // 2 : F_Waiting
  93. if (ferment_output_status_N[i] == 'FO_InputtingBean') {
  94. $("#FO"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
  95. $("#FO"+parseInt(i+1)+"_status").text("FO" + parseInt(i+1) + " 入豆中")
  96. } else if (ferment_output_status_N[i] == 'FO_Waiting') {
  97. $("#FO"+parseInt(i+1)+"_status_dot").css("background-color", "lightgray")
  98. $("#FO"+parseInt(i+1)+"_status").text("FO" + parseInt(i+1) + " 空桶等待")
  99. } else if (ferment_output_status_N[i] == 'FO_OutputtingBean') {
  100. $("#FO"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
  101. $("#FO"+parseInt(i+1)+"_status").text("FO" + parseInt(i+1) + " 可出豆")
  102. } else {
  103. console.log('pass')
  104. }
  105. }
  106. // css
  107. // height: 185px; 取代成 height: 210px;
  108. // FI2 FO2 top: 620px; 取代成 top: 645px;
  109. });
  110. </script>
  111. <style>
  112. .F_status_css {
  113. font-weight: bold;
  114. }
  115. .FermentContainer_position {
  116. position: absolute;
  117. top: 95px;
  118. left: 53px;
  119. }
  120. .F1_position {
  121. position: absolute;
  122. top: 155px;
  123. left: 240px;
  124. width: 160px;
  125. height: 185px;
  126. border-style: solid;
  127. border-color: aqua;
  128. }
  129. .F2_position {
  130. position: absolute;
  131. top: 155px;
  132. left: 415px;
  133. width: 160px;
  134. height: 185px;
  135. border-style: solid;
  136. border-color: aqua;
  137. }
  138. .F3_position {
  139. position: absolute;
  140. top: 155px;
  141. left: 595px;
  142. width: 160px;
  143. height: 185px;
  144. border-style: solid;
  145. border-color: aqua;
  146. }
  147. .F4_position {
  148. position: absolute;
  149. top: 155px;
  150. left: 780px;
  151. width: 160px;
  152. height: 185px;
  153. border-style: solid;
  154. border-color: aqua;
  155. }
  156. .F5_position {
  157. position: absolute;
  158. top: 155px;
  159. left: 960px;
  160. width: 160px;
  161. height: 185px;
  162. border-style: solid;
  163. border-color: aqua;
  164. }
  165. .F6_position {
  166. position: absolute;
  167. top: 155px;
  168. left: 1150px;
  169. width: 160px;
  170. height: 185px;
  171. border-style: solid;
  172. border-color: aqua;
  173. }
  174. .F7_position {
  175. position: absolute;
  176. top: 430px;
  177. left: 245px;
  178. width: 160px;
  179. height: 185px;
  180. border-style: solid;
  181. border-color: aqua;
  182. }
  183. .F8_position {
  184. position: absolute;
  185. top: 430px;
  186. left: 420px;
  187. width: 160px;
  188. height: 185px;
  189. border-style: solid;
  190. border-color: aqua;
  191. }
  192. .F9_position {
  193. position: absolute;
  194. top: 430px;
  195. left: 600px;
  196. width: 160px;
  197. height: 185px;
  198. border-style: solid;
  199. border-color: aqua;
  200. }
  201. .F10_position {
  202. position: absolute;
  203. top: 430px;
  204. left: 785px;
  205. width: 160px;
  206. height: 185px;
  207. border-style: solid;
  208. border-color: aqua;
  209. }
  210. .F11_position {
  211. position: absolute;
  212. top: 430px;
  213. left: 970px;
  214. width: 160px;
  215. height: 185px;
  216. border-style: solid;
  217. border-color: aqua;
  218. }
  219. .F12_position {
  220. position: absolute;
  221. top: 430px;
  222. left: 1155px;
  223. width: 160px;
  224. height: 185px;
  225. border-style: solid;
  226. border-color: aqua;
  227. }
  228. .FI1_position {
  229. position: absolute;
  230. top: 370px;
  231. left: 245px;
  232. height: 50px;
  233. width: 200px;
  234. border-style: solid;
  235. border-color: aqua;
  236. }
  237. .FI2_position {
  238. position: absolute;
  239. top: 620px;
  240. left: 245px;
  241. height: 50px;
  242. width: 200px;
  243. border-style: solid;
  244. border-color: aqua;
  245. }
  246. .FO1_position {
  247. position: absolute;
  248. top: 370px;
  249. left: 1110px;
  250. height: 50px;
  251. width: 200px;
  252. border-style: solid;
  253. border-color: aqua;
  254. }
  255. .FO2_position {
  256. position: absolute;
  257. top: 620px;
  258. left: 1110px;
  259. height: 50px;
  260. width: 200px;
  261. border-style: solid;
  262. border-color: aqua;
  263. }
  264. .footer{
  265. position: absolute;
  266. bottom: 0px;
  267. width: 100%;
  268. background-color: #eee;
  269. text-align: center;
  270. }
  271. </style>
  272. <script language="JavaScript">
  273. // 指定 10秒 刷新網頁一次
  274. var WebUpdate_set
  275. // WebUpdate_set = setInterval(function(){WebUpdate()} , 60 * 1000)
  276. function WebUpdate(){
  277. console.log("-- 狀態更新 start --")
  278. /*
  279. $.get('/loading_container_status/F', '', function (res) {
  280. }, 'json');
  281. */
  282. console.log("-- 狀態更新 end --")
  283. };
  284. </script>
  285. </head>
  286. <body>
  287. <div id="wrapper">
  288. <div id="coffee_header">
  289. <!-- 匯入共同使用的 header.html 內容 -->
  290. {% include 'header.html' %}
  291. </div>
  292. <center><button type="submit" class="btn btn-primary" onclick="testing_F_auto()">發酵桶槽自動化測試</button></center>
  293. <script>
  294. function testing_F_auto(){
  295. console.log("-- 自動化程式 start --")
  296. $.get('/ferment_auto_status', '', function (res) {
  297. Ferment_Input_1_STATUS = res.Ferment_Input_1
  298. console.log('FI1: ' + res.Ferment_Input_1)
  299. console.log('F1: ' + res.Ferment_Tank_1)
  300. console.log('F2: ' + res.Ferment_Tank_2)
  301. console.log('F3: ' + res.Ferment_Tank_3)
  302. console.log('F4: ' + res.Ferment_Tank_4)
  303. console.log('F5: ' + res.Ferment_Tank_5)
  304. console.log('F6: ' + res.Ferment_Tank_6)
  305. console.log('FO1: ' + res.Ferment_Output_1)
  306. // ----- 發酵出料 FO1 狀態 --------------------------------------------------------------
  307. ferment_input_status = [res.Ferment_Input_1]
  308. for (let i=0; i<ferment_input_status.length; i++) {
  309. // 顯示對應發酵桶槽號碼 F1~F6 和目前狀態
  310. // console.log(i+1 + ' : '+ ferment_output_status[i])
  311. // 1 : F_InputtingBean
  312. // 2 : F_Waiting
  313. if (ferment_input_status[i] == 'FI_InputtingBean') {
  314. console.log('[動作] 發酵入料 FI' + parseInt(i+1) + ' 入豆中')
  315. $("#FI"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
  316. $("#FI"+parseInt(i+1)+"_status").text("FI" + parseInt(i+1) + " 入豆中")
  317. } else if (ferment_input_status[i] == 'FI_Waiting') {
  318. console.log('[動作] 發酵入料 FI' + parseInt(i+1) + ' 空桶等待')
  319. $("#FI"+parseInt(i+1)+"_status_dot").css("background-color", "lightgray")
  320. $("#FI"+parseInt(i+1)+"_status").text("FI" + parseInt(i+1) + " 空桶等待")
  321. } else if (ferment_input_status[i] == 'FI_OutputtingBean') {
  322. console.log('[動作] 發酵入料 FI' + parseInt(i+1) + ' 可出豆')
  323. $("#FI"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
  324. $("#FI"+parseInt(i+1)+"_status").text("FI" + parseInt(i+1) + " 可出豆")
  325. } else {
  326. console.log('pass')
  327. }
  328. }
  329. // ----- 發酵桶槽 F1~F6 狀態 --------------------------------------------------------------
  330. ferment_tank_status = [res.Ferment_Tank_1, res.Ferment_Tank_2, res.Ferment_Tank_3,
  331. res.Ferment_Tank_4, res.Ferment_Tank_5, res.Ferment_Tank_6]
  332. for (let i=0; i<ferment_tank_status.length; i++) {
  333. // 顯示對應發酵桶槽號碼 F1~F6 和目前狀態
  334. // console.log(i+1 + ' : '+ ferment_tank_status[i])
  335. // 1 : F_InputtingBean
  336. // 2 : F_Waiting
  337. if (ferment_tank_status[i] == 'F_InputtingBean') {
  338. console.log('[動作] 發酵桶槽 F' + parseInt(i+1) + ' 入豆中')
  339. $("#F"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
  340. $("#F"+parseInt(i+1)+"_status").text("F" + parseInt(i+1) + " 入豆中")
  341. } else if (ferment_tank_status[i] == 'F_InputtingBean_Pause') {
  342. console.log('[動作] 發酵桶槽 F' + parseInt(i+1) + ' 入豆暫停')
  343. $("#F"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
  344. $("#F"+parseInt(i+1)+"_status").text("F" + parseInt(i+1) + " 入豆暫停")
  345. } else if (ferment_tank_status[i] == 'F_InputtingBean_Finish') {
  346. console.log('[動作] 發酵桶槽 F' + parseInt(i+1) + ' 入豆完成')
  347. $("#F"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
  348. $("#F"+parseInt(i+1)+"_status").text("F" + parseInt(i+1) + " 入豆完成")
  349. } else if (ferment_tank_status[i] == 'F_InputtingWater') {
  350. console.log('[動作] 發酵桶槽 F' + parseInt(i+1) + ' 入水中')
  351. $("#F"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
  352. $("#F"+parseInt(i+1)+"_status").text("F" + parseInt(i+1) + " 入水中")
  353. } else if (ferment_tank_status[i] == 'F_Waiting') {
  354. console.log('[動作] 發酵桶槽 F' + parseInt(i+1) + ' 空桶等待')
  355. $("#F"+parseInt(i+1)+"_status_dot").css("background-color", "lightgray")
  356. $("#F"+parseInt(i+1)+"_status").text("F" + parseInt(i+1) + " 空桶等待")
  357. } else if (ferment_tank_status[i] == 'F_Fermenting') {
  358. console.log('[動作] 發酵桶槽 F' + parseInt(i+1) + ' 發酵中')
  359. $("#F"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
  360. $("#F"+parseInt(i+1)+"_status").text("F" + parseInt(i+1) + " 發酵中")
  361. } else if (ferment_tank_status[i] == 'F_OutputtingBean') {
  362. console.log('[動作] 發酵桶槽 F' + parseInt(i+1) + ' 可出豆')
  363. $("#F"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
  364. $("#F"+parseInt(i+1)+"_status").text("F" + parseInt(i+1) + " 可出豆")
  365. } else if (ferment_tank_status[i] == 'F_Warning') {
  366. console.log('[動作] 發酵桶槽 F' + parseInt(i+1) + ' 發生錯誤')
  367. $("#F"+parseInt(i+1)+"_status_dot").css("background-color", "crimson")
  368. $("#F"+parseInt(i+1)+"_status").text("F" + parseInt(i+1) + " 發生錯誤")
  369. $("#F"+parseInt(i+1)+"_status").css("color", "crimson")
  370. } else {
  371. console.log('pass')
  372. }
  373. }
  374. // ----- 發酵出料 FO1 狀態 --------------------------------------------------------------
  375. ferment_output_status = [res.Ferment_Output_1]
  376. for (let i=0; i<ferment_output_status.length; i++) {
  377. // 顯示對應發酵桶槽號碼 F1~F6 和目前狀態
  378. // console.log(i+1 + ' : '+ ferment_output_status[i])
  379. // 1 : F_InputtingBean
  380. // 2 : F_Waiting
  381. if (ferment_output_status[i] == 'FO_InputtingBean') {
  382. console.log('[動作] 發酵出料 FO' + parseInt(i+1) + ' 入豆中')
  383. $("#FO"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
  384. $("#FO"+parseInt(i+1)+"_status").text("FO" + parseInt(i+1) + " 入豆中")
  385. } else if (ferment_output_status[i] == 'FO_Waiting') {
  386. console.log('[動作] 發酵出料 FO' + parseInt(i+1) + ' 空桶等待')
  387. $("#FO"+parseInt(i+1)+"_status_dot").css("background-color", "lightgray")
  388. $("#FO"+parseInt(i+1)+"_status").text("FO" + parseInt(i+1) + " 空桶等待")
  389. } else if (ferment_output_status[i] == 'FO_OutputtingBean') {
  390. console.log('[動作] 發酵出料 FO' + parseInt(i+1) + ' 可出豆')
  391. $("#FO"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
  392. $("#FO"+parseInt(i+1)+"_status").text("FO" + parseInt(i+1) + " 可出豆")
  393. } else {
  394. console.log('pass')
  395. }
  396. }
  397. /*
  398. console.log(res.Ferment_Input_2)
  399. console.log(res.Ferment_Tank_7)
  400. console.log(res.Ferment_Tank_8)
  401. console.log(res.Ferment_Tank_9)
  402. console.log(res.Ferment_Tank_10)
  403. console.log(res.Ferment_Tank_11)
  404. console.log(res.Ferment_Tank_12)
  405. console.log(res.Ferment_Output_1)
  406. console.log(res.Ferment_Output_2)
  407. */
  408. }, 'json');
  409. // console.log("-- 自動化程式 end --")
  410. }
  411. </script>
  412. <div>
  413. <!-- 底圖 發酵貨櫃 12 個發酵桶槽 -->
  414. <div id="FermentContainer_pic" class="FermentContainer_position" >
  415. <!--
  416. <img src="../static/img/web_ferment_container.png" width="1450x" style="margin: auto; position: relative; z-index: -1;">
  417. -->
  418. </div>
  419. <!-- 發酵槽 F1 -->
  420. <div id="F1" tabindex="0" class="F1_position" role="button">
  421. <span id="F1_status" class="F_status_css">F1 status</span>
  422. <!-- F1 狀態點點-->
  423. <div id="F1_status_dot" style="width: 20px; height: 20px; background-color: black; border-radius: 50%;"></div>
  424. </div>
  425. <!-- 發酵槽 F2 -->
  426. <div id="F2" tabindex="0" class="F2_position" role="button">
  427. <span id="F2_status" class="F_status_css">F2 status</span>
  428. <div id="F2_status_dot" style="width: 20px; height: 20px; background-color: black; border-radius: 50%;"></div>
  429. </div>
  430. <!-- 發酵槽 F3 -->
  431. <div id="F3" tabindex="0" class="F3_position" role="button">
  432. <span id="F3_status" class="F_status_css">F3 status</span>
  433. <div id="F3_status_dot" style="width: 20px; height: 20px; background-color: black; border-radius: 50%;"></div>
  434. </div>
  435. <!-- 發酵槽 F4 -->
  436. <div id="F4" tabindex="0" class="F4_position" role="button">
  437. <span id="F4_status" class="F_status_css">F4 status</span>
  438. <div id="F4_status_dot" style="width: 20px; height: 20px; background-color: black; border-radius: 50%;"></div>
  439. </div>
  440. <!-- 發酵槽 F5 -->
  441. <div id="F5" tabindex="0" class="F5_position" role="button">
  442. <span id="F5_status" class="F_status_css">F5 status</span>
  443. <div id="F5_status_dot" style="width: 20px; height: 20px; background-color: black; border-radius: 50%;"></div>
  444. </div>
  445. <!-- 發酵槽 F6 -->
  446. <div id="F6" tabindex="0" class="F6_position" role="button">
  447. <span id="F6_status" class="F_status_css">F6 status</span>
  448. <div id="F6_status_dot" style="width: 20px; height: 20px; background-color: black; border-radius: 50%;"></div>
  449. </div>
  450. <!-- 發酵槽 F7 -->
  451. <div id="F7" tabindex="0" class="F7_position" role="button" style="vertical-align: bottom;">
  452. <span id="F7_status" class="F_status_css">F7 status</span>
  453. <div id="F7_status_dot" style="width: 20px; height: 20px; background-color: black; border-radius: 50%;"></div>
  454. </div>
  455. <!-- 發酵槽 F8 -->
  456. <div id="F8" tabindex="0" class="F8_position" role="button">
  457. <span id="F8_status" class="F_status_css">F8 status</span>
  458. <div id="F8_status_dot" style="width: 20px; height: 20px; background-color: black; border-radius: 50%;"></div>
  459. </div>
  460. <!-- 發酵槽 F9 -->
  461. <div id="F9" tabindex="0" class="F9_position" role="button">
  462. <span id="F9_status" class="F_status_css">F9 status</span>
  463. <div id="F9_status_dot" style="width: 20px; height: 20px; background-color: black; border-radius: 50%;"></div>
  464. </div>
  465. <!-- 發酵槽 F10 -->
  466. <div id="F10" tabindex="0" class="F10_position" role="button">
  467. <span id="F10_status" class="F_status_css">F10 status</span>
  468. <div id="F10_status_dot" style="width: 20px; height: 20px; background-color: black; border-radius: 50%;"></div>
  469. </div>
  470. <!-- 發酵槽 F11 -->
  471. <div id="F11" tabindex="0" class="F11_position" role="button">
  472. <span id="F11_status" class="F_status_css">F11 status</span>
  473. <div id="F11_status_dot" style="width: 20px; height: 20px; background-color: black; border-radius: 50%;"></div>
  474. </div>
  475. <!-- 發酵槽 F12 -->
  476. <div id="F12" tabindex="0" class="F12_position" role="button">
  477. <span id="F12_status" class="F_status_css">F12 status</span>
  478. <div id="F12_status_dot" style="width: 20px; height: 20px; background-color: black; border-radius: 50%;"></div>
  479. </div>
  480. <!-- 發酵槽入料儲豆槽 FI1 -->
  481. <div id="FI1" tabindex="0" class="FI1_position" role="button">
  482. <span id="FI1_status" class="F_status_css">FI1 status</span>
  483. <div id="FI1_status_dot" style="width: 20px; height: 20px; background-color: black; border-radius: 50%;"></div>
  484. </div>
  485. <!-- 發酵槽入料儲豆槽 FI2 -->
  486. <div id="FI2" tabindex="0" class="FI2_position" role="button">
  487. <span id="FI2_status" class="F_status_css">FI2 status</span>
  488. <div id="FI2_status_dot" style="width: 20px; height: 20px; background-color: black; border-radius: 50%;"></div>
  489. </div>
  490. <!-- 發酵槽出料儲豆槽 FO1 -->
  491. <div id="FO1" tabindex="0" class="FO1_position" role="button">
  492. <span id="FO1_status" class="F_status_css">FO1 status</span>
  493. <div id="FO1_status_dot" style="width: 20px; height: 20px; background-color: black; border-radius: 50%;"></div>
  494. </div>
  495. <!-- 發酵槽出料儲豆槽 FO2 -->
  496. <div id="FO2" tabindex="0" class="FO2_position" role="button">
  497. <span id="FO2_status" class="F_status_css">FO2 status</span>
  498. <div id="FO2_status_dot" style="width: 20px; height: 20px; background-color: black; border-radius: 50%;"></div>
  499. </div>
  500. </div>
  501. <div id="coffee_footer">
  502. <!-- 匯入共同使用的 footer.html 內容 -->
  503. {% include 'footer.html' %}
  504. </div>
  505. </div>
  506. </body>
  507. </html>