auto_CI.html 41 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747
  1. <!-- 宣告我們要套用模板 -->
  2. {% extends "base.html" %}
  3. {% block title %}{{ title }}{% endblock %}
  4. {% block script %}
  5. <script language="JavaScript">
  6. function myrefresh()
  7. {
  8. $.get('/clean_auto_data', function (resText) {
  9. var CI = [resText.CI1,resText.CI2];
  10. var C=[resText.C1,resText.C2,resText.C3,resText.C4];
  11. var R=[resText.R1];
  12. var S = [resText.S1,resText.S2];
  13. var SO = [resText.SO1,resText.SO2];
  14. var P = [resText.P1,resText.P2];
  15. var PO = [resText.PO1,resText.PO2];
  16. for (let i=0; i<2; i++) {
  17. if (CI[i] == 'CI_InputtingBean') {
  18. $("#CI"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
  19. $("#CI"+parseInt(i+1)+"_status").text("CI" + parseInt(i+1) + " 入豆中")
  20. } else if (CI[i] == 'CI_Waiting') {
  21. $("#CI"+parseInt(i+1)+"_status_dot").css("background-color", "lightgray")
  22. $("#CI"+parseInt(i+1)+"_status").text("CI" + parseInt(i+1) + " 空桶等待")
  23. } else if (CI[i] == 'CI_OutputtingBean') {
  24. $("#CI"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
  25. $("#CI"+parseInt(i+1)+"_status").text("CI" + parseInt(i+1) + " 可出豆")
  26. } else if (CI[i] == 'CI_Stand_by') {
  27. $("#CI"+parseInt(i+1)+"_status_dot").css("background-color", "HotPink")
  28. $("#CI"+parseInt(i+1)+"_status").text("CI" + parseInt(i+1) + " 待命")
  29. } else {
  30. console.log('pass')
  31. }
  32. }
  33. for (let i=0; i<4; i++) {
  34. if (C[i] == 'C_InputtingBean') {
  35. $("#C"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
  36. $("#C"+parseInt(i+1)+"_status").text("C" + parseInt(i+1) + " 入豆中")
  37. } else if (C[i] == 'C_Waiting') {
  38. $("#C"+parseInt(i+1)+"_status_dot").css("background-color", "lightgray")
  39. $("#C"+parseInt(i+1)+"_status").text("C" + parseInt(i+1) + " 空桶等待")
  40. } else if (C[i] == 'C_InputtingWater') {
  41. $("#C"+parseInt(i+1)+"_status_dot").css("background-color", "DeepSkyBlue")
  42. $("#C"+parseInt(i+1)+"_status").text("C" + parseInt(i+1) + " 內桶入水中")
  43. } else if (C[i] == 'C_Cleaning') {
  44. $("#C"+parseInt(i+1)+"_status_dot").css("background-color", "plum")
  45. $("#C"+parseInt(i+1)+"_status").text("C" + parseInt(i+1) + " 清洗中")
  46. } else if (C[i] == 'C_OutputtingWater') {
  47. $("#C"+parseInt(i+1)+"_status_dot").css("background-color", "DeepSkyBlue")
  48. $("#C"+parseInt(i+1)+"_status").text("C" + parseInt(i+1) + " 內桶排水中")
  49. } else if (C[i] == 'C_OutputtingBean') {
  50. $("#C"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
  51. $("#C"+parseInt(i+1)+"_status").text("C" + parseInt(i+1) + " 可出豆")
  52. } else if (C[i] == 'C_Warning') {
  53. $("#C"+parseInt(i+1)+"_status_dot").css("background-color", "crimson")
  54. $("#C"+parseInt(i+1)+"_status").text("C" + parseInt(i+1) + " 警告")
  55. } else if (C[i] == 'C_Stand_by') {
  56. $("#C"+parseInt(i+1)+"_status_dot").css("background-color", "HotPink")
  57. $("#C"+parseInt(i+1)+"_status").text("C" + parseInt(i+1) + " 待命")
  58. } else {
  59. console.log('pass')
  60. }
  61. }
  62. for (let i=0; i<1; i++) {
  63. if (R[i] == 'R_InputtingWater') {
  64. $("#R"+parseInt(i+1)+"_status_dot").css("background-color", "DeepSkyBlue")
  65. $("#R"+parseInt(i+1)+"_status").text("R" + parseInt(i+1) + " 入水中")
  66. } else if (R[i] == 'R_Waiting') {
  67. $("#R"+parseInt(i+1)+"_status_dot").css("background-color", "lightgray")
  68. $("#R"+parseInt(i+1)+"_status").text("R" + parseInt(i+1) + " 空桶等待")
  69. } else if (R[i] == 'R_OutputtingWater') {
  70. $("#R"+parseInt(i+1)+"_status_dot").css("background-color", "DeepSkyBlue")
  71. $("#R"+parseInt(i+1)+"_status").text("R" + parseInt(i+1) + " 排水中")
  72. } else if (R[i] == 'R_Stand_by') {
  73. $("#R"+parseInt(i+1)+"_status_dot").css("background-color", "HotPink")
  74. $("#R"+parseInt(i+1)+"_status").text("R" + parseInt(i+1) + " 待命")
  75. } else if (R[i] == 'R_Warning') {
  76. console.log('[動作] R桶警告 R' + parseInt(i+1) + ' 警告')
  77. $("#R"+parseInt(i+1)+"_status_dot").css("background-color", "crimson")
  78. $("#R"+parseInt(i+1)+"_status").text("R" + parseInt(i+1) + " 警告")
  79. } else {
  80. console.log('pass')
  81. }
  82. }
  83. for (let i=0; i<2; i++) {
  84. if (S[i] == 'S_InputtingBean') {
  85. $("#S"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
  86. $("#S"+parseInt(i+1)+"_status").text("S" + parseInt(i+1) + " 入豆中")
  87. } else if (S[i] == 'S_Waiting') {
  88. $("#S"+parseInt(i+1)+"_status_dot").css("background-color", "lightgray")
  89. $("#S"+parseInt(i+1)+"_status").text("S" + parseInt(i+1) + " 空桶等待")
  90. } else if (S[i] == 'S_OutputtingBean') {
  91. $("#S"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
  92. $("#S"+parseInt(i+1)+"_status").text("S" + parseInt(i+1) + " 可出豆")
  93. } else if (S[i] == 'S_Stand_by') {
  94. $("#S"+parseInt(i+1)+"_status_dot").css("background-color", "HotPink")
  95. $("#S"+parseInt(i+1)+"_status").text("S" + parseInt(i+1) + " 待命")
  96. } else {
  97. console.log('pass')
  98. }
  99. }
  100. for (let i=0; i<2; i++) {
  101. if (SO[i] == 'SO_InputtingBean') {
  102. $("#SO"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
  103. $("#SO"+parseInt(i+1)+"_status").text("SO" + parseInt(i+1) + " 入豆中")
  104. } else if (SO[i] == 'SO_Waiting') {
  105. $("#SO"+parseInt(i+1)+"_status_dot").css("background-color", "lightgray")
  106. $("#SO"+parseInt(i+1)+"_status").text("SO" + parseInt(i+1) + " 空桶等待")
  107. } else if (SO[i] == 'SO_OutputtingBean') {
  108. $("#SO"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
  109. $("#SO"+parseInt(i+1)+"_status").text("SO" + parseInt(i+1) + " 可出豆")
  110. } else if (SO[i] == 'SO_Stand_by') {
  111. $("#SO"+parseInt(i+1)+"_status_dot").css("background-color", "HotPink")
  112. $("#SO"+parseInt(i+1)+"_status").text("SO" + parseInt(i+1) + " 待命")
  113. } else {
  114. console.log('pass')
  115. }
  116. }
  117. for (let i=0; i<2; i++) {
  118. if (P[i] == 'P_InputtingBean') {
  119. $("#P"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
  120. $("#P"+parseInt(i+1)+"_status").text("P" + parseInt(i+1) + " 入豆中")
  121. } else if (P[i] == 'P_Waiting') {
  122. $("#P"+parseInt(i+1)+"_status_dot").css("background-color", "lightgray")
  123. $("#P"+parseInt(i+1)+"_status").text("P" + parseInt(i+1) + " 空桶等待")
  124. } else if (P[i] == 'P_OutputtingBean') {
  125. $("#P"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
  126. $("#P"+parseInt(i+1)+"_status").text("P" + parseInt(i+1) + " 可出豆")
  127. } else if (P[i] == 'P_Stand_by') {
  128. $("#P"+parseInt(i+1)+"_status_dot").css("background-color", "HotPink")
  129. $("#P"+parseInt(i+1)+"_status").text("P" + parseInt(i+1) + " 待命")
  130. } else {
  131. console.log('pass')
  132. }
  133. }
  134. for (let i=0; i<2; i++) {
  135. if (PO[i] == 'PO_InputtingBean') {
  136. $("#PO"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
  137. $("#PO"+parseInt(i+1)+"_status").text("PO" + parseInt(i+1) + " 入豆中")
  138. } else if (PO[i] == 'PO_Waiting') {
  139. $("#PO"+parseInt(i+1)+"_status_dot").css("background-color", "lightgray")
  140. $("#PO"+parseInt(i+1)+"_status").text("PO" + parseInt(i+1) + " 空桶等待")
  141. } else if (PO[i] == 'PO_OutputtingBean') {
  142. $("#PO"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
  143. $("#PO"+parseInt(i+1)+"_status").text("PO" + parseInt(i+1) + " 可出豆")
  144. } else if (PO[i] == 'PO_Stand_by') {
  145. $("#PO"+parseInt(i+1)+"_status_dot").css("background-color", "HotPink")
  146. $("#PO"+parseInt(i+1)+"_status").text("PO" + parseInt(i+1) + " 待命")
  147. } else {
  148. console.log('pass')
  149. }
  150. }
  151. },'json');
  152. loading_CI()
  153. }
  154. setInterval('myrefresh()',1000);
  155. </script>
  156. <script>
  157. var tank_num = '1';
  158. var status = '{{status}}';
  159. var username = '{{username}}';
  160. $(document).ready(function(){
  161. $("#coffee_title_pc").text('清洗入料自動化');
  162. $("#coffee_title_phone").text('清洗入料自動化');
  163. $('#navbarDropdown_user_pc').text(username);
  164. $('#navbarDropdown_user_phone').text(username);
  165. reclaimed_tank_status = ['{{CI1}}','{{CI2}}']
  166. for (let i=0; i<reclaimed_tank_status.length; i++) {
  167. if (reclaimed_tank_status[i] == 'CI_InputtingBean') {
  168. $("#CI"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
  169. $("#CI"+parseInt(i+1)+"_status").text("CI" + parseInt(i+1) + " 入豆中")
  170. } else if (reclaimed_tank_status[i] == 'CI_Waiting') {
  171. $("#CI"+parseInt(i+1)+"_status_dot").css("background-color", "lightgray")
  172. $("#CI"+parseInt(i+1)+"_status").text("CI" + parseInt(i+1) + " 空桶等待")
  173. } else if (reclaimed_tank_status[i] == 'CI_OutputtingBean') {
  174. $("#CI"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
  175. $("#CI"+parseInt(i+1)+"_status").text("CI" + parseInt(i+1) + " 可出豆")
  176. } else if (reclaimed_tank_status[i] == 'CI_Stand_by') {
  177. $("#CI"+parseInt(i+1)+"_status_dot").css("background-color", "HotPink")
  178. $("#CI"+parseInt(i+1)+"_status").text("CI" + parseInt(i+1) + " 待命")
  179. } else {
  180. console.log('pass')
  181. }
  182. }
  183. // 清洗桶槽入料顯示
  184. clean_input_status_N = ['{{C1}}', '{{C2}}', '{{C3}}', '{{C4}}']
  185. for (let i=0; i<clean_input_status_N.length; i++) {
  186. if (clean_input_status_N[i] == 'C_InputtingBean') {
  187. $("#C"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
  188. $("#C"+parseInt(i+1)+"_status").text("C" + parseInt(i+1) + " 入豆中")
  189. } else if (clean_input_status_N[i] == 'C_InputtingWater') {
  190. $("#C"+parseInt(i+1)+"_status_dot").css("background-color", "DeepSkyBlue")
  191. $("#C"+parseInt(i+1)+"_status").text("C" + parseInt(i+1) + " 內桶入水中")
  192. } else if (clean_input_status_N[i] == 'C_Cleaning') {
  193. $("#C"+parseInt(i+1)+"_status_dot").css("background-color", "plum")
  194. $("#C"+parseInt(i+1)+"_status").text("C" + parseInt(i+1) + " 清洗中")
  195. } else if (clean_input_status_N[i] == 'C_Waiting') {
  196. $("#C"+parseInt(i+1)+"_status_dot").css("background-color", "lightgray")
  197. $("#C"+parseInt(i+1)+"_status").text("C" + parseInt(i+1) + " 空桶等待")
  198. } else if (clean_input_status_N[i] == 'C_OutputtingWater') {
  199. $("#C"+parseInt(i+1)+"_status_dot").css("background-color", "DeepSkyBlue")
  200. $("#C"+parseInt(i+1)+"_status").text("C" + parseInt(i+1) + " 內桶排水中")
  201. } else if (clean_input_status_N[i] == 'C_OutputtingBean') {
  202. $("#C"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
  203. $("#C"+parseInt(i+1)+"_status").text("C" + parseInt(i+1) + " 可出豆")
  204. } else if (clean_input_status_N[i] == 'C_Stand_by') {
  205. $("#C"+parseInt(i+1)+"_status_dot").css("background-color", "HotPink")
  206. $("#C"+parseInt(i+1)+"_status").text("C" + parseInt(i+1) + " 待命")
  207. } else if (clean_input_status_N[i] == 'C_Warning') {
  208. $("#C"+parseInt(i+1)+"_status_dot").css("background-color", "crimson")
  209. $("#C"+parseInt(i+1)+"_status").text("C" + parseInt(i+1) + " 警告")
  210. } else {
  211. console.log('pass')
  212. }
  213. }
  214. // R中水桶顯示
  215. console.log('R1: ' + '{{R1}}')
  216. reclaimed_tank_status = ['{{R1}}']
  217. for (let i=0; i<reclaimed_tank_status.length; i++) {
  218. if (reclaimed_tank_status[i] == 'R_InputtingWater') {
  219. $("#R"+parseInt(i+1)+"_status_dot").css("background-color", "DeepSkyBlue")
  220. $("#R"+parseInt(i+1)+"_status").text("R" + parseInt(i+1) + " 入水中")
  221. } else if (reclaimed_tank_status[i] == 'R_Waiting') {
  222. $("#R"+parseInt(i+1)+"_status_dot").css("background-color", "lightgray")
  223. $("#R"+parseInt(i+1)+"_status").text("R" + parseInt(i+1) + " 空桶等待")
  224. } else if (reclaimed_tank_status[i] == 'R_OutputtingWater') {
  225. $("#R"+parseInt(i+1)+"_status_dot").css("background-color", "DeepSkyBlue")
  226. $("#R"+parseInt(i+1)+"_status").text("R" + parseInt(i+1) + " 排水中")
  227. } else if (reclaimed_tank_status[i] == 'R_Stand_by') {
  228. $("#R"+parseInt(i+1)+"_status_dot").css("background-color", "HotPink")
  229. $("#R"+parseInt(i+1)+"_status").text("R" + parseInt(i+1) + " 待命")
  230. } else {
  231. console.log('pass')
  232. }
  233. }
  234. // 色選顯示
  235. console.log('S1: ' + '{{S1}}')
  236. console.log('S2: ' + '{{S2}}')
  237. colorselect_tank_status = ['{{S1}}','{{S2}}']
  238. for (let i=0; i<colorselect_tank_status.length; i++) {
  239. if (colorselect_tank_status[i] == 'S_InputtingBean') {
  240. $("#S"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
  241. $("#S"+parseInt(i+1)+"_status").text("S" + parseInt(i+1) + " 入豆中")
  242. } else if (colorselect_tank_status[i] == 'S_Waiting') {
  243. $("#S"+parseInt(i+1)+"_status_dot").css("background-color", "lightgray")
  244. $("#S"+parseInt(i+1)+"_status").text("S" + parseInt(i+1) + " 空桶等待")
  245. } else if (colorselect_tank_status[i] == 'S_OutputtingBean') {
  246. $("#S"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
  247. $("#S"+parseInt(i+1)+"_status").text("S" + parseInt(i+1) + " 可出豆")
  248. } else if (colorselect_tank_status[i] == 'S_Stand_by') {
  249. $("#S"+parseInt(i+1)+"_status_dot").css("background-color", "HotPink")
  250. $("#S"+parseInt(i+1)+"_status").text("S" + parseInt(i+1) + " 待命")
  251. } else {
  252. console.log('pass')
  253. }
  254. }
  255. // 色選出料顯示
  256. colorselect_output_status = ['{{SO1}}','{{SO2}}']
  257. for (let i=0; i<colorselect_output_status.length; i++) {
  258. if (colorselect_output_status[i] == 'SO_InputtingBean') {
  259. $("#SO"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
  260. $("#SO"+parseInt(i+1)+"_status").text("SO" + parseInt(i+1) + " 入豆中")
  261. } else if (colorselect_output_status[i] == 'SO_Waiting') {
  262. $("#SO"+parseInt(i+1)+"_status_dot").css("background-color", "lightgray")
  263. $("#SO"+parseInt(i+1)+"_status").text("SO" + parseInt(i+1) + " 空桶等待")
  264. } else if (colorselect_output_status[i] == 'SO_OutputtingBean') {
  265. $("#SO"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
  266. $("#SO"+parseInt(i+1)+"_status").text("SO" + parseInt(i+1) + " 可出豆")
  267. } else if (colorselect_output_status[i] == 'SO_Stand_by') {
  268. $("#SO"+parseInt(i+1)+"_status_dot").css("background-color", "HotPink")
  269. $("#SO"+parseInt(i+1)+"_status").text("SO" + parseInt(i+1) + " 待命")
  270. } else {
  271. console.log('pass')
  272. }
  273. }
  274. // 脫皮顯示
  275. peel_tank_status = ['{{P1}}','{{P2}}']
  276. for (let i=0; i<peel_tank_status.length; i++) {
  277. if (peel_tank_status[i] == 'P_InputtingBean') {
  278. $("#P"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
  279. $("#P"+parseInt(i+1)+"_status").text("P" + parseInt(i+1) + " 入豆中")
  280. } else if (peel_tank_status[i] == 'P_Waiting') {
  281. $("#P"+parseInt(i+1)+"_status_dot").css("background-color", "lightgray")
  282. $("#P"+parseInt(i+1)+"_status").text("P" + parseInt(i+1) + " 空桶等待")
  283. } else if (peel_tank_status[i] == 'P_OutputtingBean') {
  284. $("#P"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
  285. $("#P"+parseInt(i+1)+"_status").text("P" + parseInt(i+1) + " 可出豆")
  286. } else if (peel_tank_status[i] == 'P_Stand_by') {
  287. $("#P"+parseInt(i+1)+"_status_dot").css("background-color", "HotPink")
  288. $("#P"+parseInt(i+1)+"_status").text("P" + parseInt(i+1) + " 待命")
  289. } else {
  290. console.log('pass')
  291. }
  292. }
  293. // 脫皮出料顯示
  294. peel_output_status = ['{{PO1}}','{{PO2}}']
  295. for (let i=0; i<peel_output_status.length; i++) {
  296. if (peel_output_status[i] == 'PO_InputtingBean') {
  297. $("#PO"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
  298. $("#PO"+parseInt(i+1)+"_status").text("PO" + parseInt(i+1) + " 入豆中")
  299. } else if (peel_output_status[i] == 'PO_Waiting') {
  300. $("#PO"+parseInt(i+1)+"_status_dot").css("background-color", "lightgray")
  301. $("#PO"+parseInt(i+1)+"_status").text("PO" + parseInt(i+1) + " 空桶等待")
  302. } else if (peel_output_status[i] == 'PO_OutputtingBean') {
  303. $("#PO"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
  304. $("#PO"+parseInt(i+1)+"_status").text("PO" + parseInt(i+1) + " 可出豆")
  305. } else if (peel_output_status[i] == 'PO_Stand_by') {
  306. $("#PO"+parseInt(i+1)+"_status_dot").css("background-color", "HotPink")
  307. $("#PO"+parseInt(i+1)+"_status").text("PO" + parseInt(i+1) + " 待命")
  308. } else {
  309. console.log('pass')
  310. }
  311. }
  312. loading_CI()
  313. });
  314. function loading_CI(){
  315. var citid = '{{citid}}';
  316. $.get('/loading/CI'+citid, '', function (resText) {
  317. var a = [resText.input_vacuum];
  318. for (let i=0; i<1; i++) {
  319. if (a[i] == 1) {
  320. $("#actuator_"+parseInt(i)+"_status").css("background-color", "MediumSeaGreen")
  321. } else if (a[i] == 0) {
  322. $("#actuator_"+parseInt(i)+"_status").css("background-color", "lightgray")
  323. }
  324. else {
  325. $("#actuator_"+parseInt(i)+"_status").css("background-color", "crimson")
  326. }
  327. }
  328. $("#sensor_00").text(resText.input_UltraSonic);
  329. }, 'json');
  330. };
  331. </script>
  332. {% endblock %}
  333. {% block style %}
  334. <style>
  335. .C_status_css {
  336. font-weight: bold;
  337. text-align: center;
  338. }
  339. .input-text {
  340. height: 25px;
  341. width: 40px;
  342. text-align: center;
  343. margin-left: 2px;
  344. margin-right: 5px;
  345. }
  346. </style>
  347. {% endblock %}
  348. {% block main %}
  349. <div class="album py-5 bg-light">
  350. <div class="container">
  351. <div class="row row-cols-1 row-cols-sm-1 row-cols-md-1 g-3">
  352. <div class="col">
  353. <div class="card shadow-sm">
  354. <div class="card-body">
  355. <div class="d-flex justify-content-between align-items-center">
  356. <table style="border: 3px lightsteelblue solid; margin-right: auto; margin-left: auto; text-align: center; margin-top: 5px;" cellpadding="5" border="1">
  357. <div style="text-align: center;">
  358. <tr>
  359. <td style="border: lightsteelblue 1px solid;" width="12.5%">
  360. <table style="border: 0px plum solid; margin-right: auto; margin-left: auto; text-align: center;" cellpadding="5">
  361. <tr>
  362. <td>
  363. <!-- 清洗入料 R1 -->
  364. <div id="CI1" tabindex="0" class="CI1_position" role="button">
  365. <span id="CI1_status" class="C_status_css">CI1 status</span>
  366. </div>
  367. </td>
  368. </tr>
  369. </table>
  370. </td>
  371. <td style="border: lightsteelblue 1px solid;" width="12.5%">
  372. <table style="border: 0px plum solid; margin-right: auto; margin-left: auto; text-align: center;" cellpadding="5">
  373. <tr>
  374. <td>
  375. <!-- 清洗槽 C1 -->
  376. <div id="C1" tabindex="0" class="C1_position" role="button">
  377. <span id="C1_status" class="C_status_css">C1 status</span>
  378. </div>
  379. </td>
  380. </tr>
  381. </table>
  382. </td>
  383. <td style="border: lightsteelblue 1px solid;" width="12.5%">
  384. <table style="border: 0px plum solid; margin-right: auto; margin-left: auto; text-align: center;" cellpadding="5">
  385. <tr>
  386. <td>
  387. <!-- 清洗槽 C2 -->
  388. <div id="C2" tabindex="0" class="C2_position" role="button">
  389. <span id="C2_status" class="C_status_css">C2 status</span>
  390. </div>
  391. </td>
  392. </tr>
  393. </table>
  394. </td>
  395. <td style="border: lightsteelblue 1px solid;" width="12.5%">
  396. <table style="border: 0px plum solid; margin-right: auto; margin-left: auto; text-align: center;" cellpadding="5">
  397. <tr>
  398. <td>
  399. <!-- 中水桶 R1 -->
  400. <div id="R1" tabindex="0" class="R1_position" role="button">
  401. <span id="R1_status" class="C_status_css">R1 status</span>
  402. </div>
  403. </td>
  404. </tr>
  405. </table>
  406. </td>
  407. <td style="border: lightsteelblue 1px solid;" width="12.5%">
  408. <table style="border: 0px plum solid; margin-right: auto; margin-left: auto; text-align: center;" cellpadding="5">
  409. <tr>
  410. <td>
  411. <!-- 色選槽 S1 -->
  412. <div id="S1" tabindex="0" class="S1_position" role="button">
  413. <span id="S1_status" class="C_status_css">S1 status</span>
  414. </div>
  415. </td>
  416. </tr>
  417. </table>
  418. </td>
  419. <td style="border: lightsteelblue 1px solid;" width="12.5%">
  420. <table style="border: 0px plum solid; margin-right: auto; margin-left: auto; text-align: center;" cellpadding="5">
  421. <tr>
  422. <td>
  423. <!-- 色選出料 SO1 -->
  424. <div id="SO1" tabindex="0" class="SO1_position" role="button">
  425. <span id="SO1_status" class="C_status_css">SO1 status</span>
  426. </div>
  427. </td>
  428. </tr>
  429. </table>
  430. </td>
  431. <td style="border: lightsteelblue 1px solid;" width="12.5%">
  432. <table style="border: 0px plum solid; margin-right: auto; margin-left: auto; text-align: center;" cellpadding="5">
  433. <tr>
  434. <td>
  435. <!-- 脫皮機 P1 -->
  436. <div id="P1" tabindex="0" class="P1_position" role="button">
  437. <span id="P1_status" class="C_status_css">P1 status</span>
  438. </div>
  439. </td>
  440. </tr>
  441. </table>
  442. </td>
  443. <td style="border: lightsteelblue 1px solid;" width="12.5%">
  444. <table style="border: 0px plum solid; margin-right: auto; margin-left: auto; text-align: center;" cellpadding="5">
  445. <tr>
  446. <td>
  447. <!-- 脫皮出料儲豆槽 PO1 -->
  448. <div id="PO1" tabindex="0" class="PO1_position" role="button">
  449. <span id="PO1_status" class="C_status_css">PO1 status</span>
  450. </div>
  451. </td>
  452. </tr>
  453. </table>
  454. </td>
  455. </tr>
  456. <tr>
  457. <td width="12.5%" style="border: lightsteelblue 1px solid;">
  458. <div id="CI1_status_dot" style="height: 20px; background-color: black;"></div>
  459. </td>
  460. <td width="12.5%" style="border: lightsteelblue 1px solid;">
  461. <div id="C1_status_dot" style="height: 20px; background-color: black;"></div>
  462. </td>
  463. <td width="12.5%" style="border: lightsteelblue 1px solid;">
  464. <div id="C2_status_dot" style="height: 20px; background-color: black;"></div>
  465. </td>
  466. <td width="12.5%" style="border: lightsteelblue 1px solid;">
  467. <div id="R1_status_dot" style=" height: 20px; background-color: black;"></div>
  468. </td>
  469. <td width="12.5%" style="border: lightsteelblue 1px solid;">
  470. <div id="S1_status_dot" style="height: 20px; background-color: black;"></div>
  471. </td>
  472. <td width="12.5%" style="border: lightsteelblue 1px solid;">
  473. <div id="SO1_status_dot" style="height: 20px; background-color: black;"></div>
  474. </td>
  475. <td width="12.5%" style="border: lightsteelblue 1px solid;">
  476. <div id="P1_status_dot" style="height: 20px; background-color: black;"></div>
  477. </td>
  478. <td width="12.5%" style="border: lightsteelblue 1px solid;">
  479. <div id="PO1_status_dot" style="height: 20px; background-color: black;"></div>
  480. </td>
  481. </tr>
  482. <tr>
  483. <td style="border: lightsteelblue 1px solid;" width="12.5%">
  484. 清洗入料儲豆槽
  485. </td>
  486. <td style="border: lightsteelblue 1px solid;" width="12.5%">
  487. 清洗槽
  488. </td>
  489. <td style="border: lightsteelblue 1px solid;" width="12.5%">
  490. 清洗槽
  491. </td>
  492. <td style="border: lightsteelblue 1px solid;" width="12.5%">
  493. 中水桶槽
  494. </td>
  495. <td style="border: lightsteelblue 1px solid;" width="12.5%">
  496. 色選機
  497. </td>
  498. <td style="border: lightsteelblue 1px solid;" width="12.5%">
  499. 色選出料儲豆槽
  500. </td>
  501. <td style="border: lightsteelblue 1px solid;" width="12.5%">
  502. 脫皮機
  503. </td>
  504. <td style="border: lightsteelblue 1px solid;" width="12.5%">
  505. 脫皮出料儲豆槽
  506. </td>
  507. </tr>
  508. <tr>
  509. <td style="border: lightsteelblue 1px solid;">
  510. <table style="border: 0px plum solid; margin-right: auto; margin-left: auto; text-align: center;" cellpadding="5">
  511. <tr>
  512. <td>
  513. <!-- 清洗入料 R1 -->
  514. <div id="CI2" tabindex="0" class="CI2_position" role="button">
  515. <span id="CI2_status" class="C_status_css">CI2 status</span>
  516. </div>
  517. </td>
  518. </tr>
  519. </table>
  520. </td>
  521. <td style="border: lightsteelblue 1px solid;">
  522. <table style="border: 0px plum solid; margin-right: auto; margin-left: auto; text-align: center;" cellpadding="5">
  523. <tr>
  524. <td>
  525. <!-- 脫皮機出料儲豆槽 C3 -->
  526. <div id="C3" tabindex="0" class="C3_position" role="button" style="text-align: center;">
  527. <span id="C3_status" class="C_status_css">C3 status</span>
  528. </div>
  529. </td>
  530. </tr>
  531. </table>
  532. </td>
  533. <td style="border: lightsteelblue 1px solid;">
  534. <table style="border: 0px plum solid; margin-right: auto; margin-left: auto; text-align: center;" cellpadding="5">
  535. <tr>
  536. <td>
  537. <!-- 發酵槽入料儲豆槽 FI2 -->
  538. <div id="C4" tabindex="0" class="C4_position" role="button">
  539. <span id="C4_status" class="C_status_css">C4 status</span>
  540. </div>
  541. </td>
  542. </tr>
  543. </table>
  544. </td>
  545. <td style="border: lightsteelblue 1px solid;">
  546. <table style="border: 0px plum solid; margin-right: auto; margin-left: auto; text-align: center;" cellpadding="5">
  547. </table>
  548. </td>
  549. <td style="border: lightsteelblue 1px solid;">
  550. <table style="border: 0px plum solid; margin-right: auto; margin-left: auto; text-align: center;" cellpadding="5">
  551. <tr>
  552. <td>
  553. <!-- 色選 S2 -->
  554. <div id="S2" tabindex="0" class="S2_position" role="button">
  555. <span id="S2_status" class="C_status_css">S2 status</span>
  556. </div>
  557. </td>
  558. </tr>
  559. </table>
  560. </td>
  561. <td style="border: lightsteelblue 1px solid;">
  562. <table style="border: 0px plum solid; margin-right: auto; margin-left: auto; text-align: center;" cellpadding="5">
  563. <tr>
  564. <td>
  565. <!-- 色選出料 SO2 -->
  566. <div id="SO2" tabindex="0" class="SO2_position" role="button">
  567. <span id="SO2_status" class="C_status_css">SO2 status</span>
  568. </div>
  569. </td>
  570. </tr>
  571. </table>
  572. </td>
  573. <td style="border: lightsteelblue 1px solid;">
  574. <table style="border: 0px plum solid; margin-right: auto; margin-left: auto; text-align: center;" cellpadding="5">
  575. <tr>
  576. <td>
  577. <!-- 脫皮機出料儲豆槽 P2 -->
  578. <div id="P2" tabindex="0" class="P2_position" role="button" style="text-align: center;">
  579. <span id="P2_status" class="C_status_css">P2 status</span>
  580. </div>
  581. </td>
  582. </tr>
  583. </table>
  584. </td>
  585. <td style="border: lightsteelblue 1px solid;">
  586. <table style="border: 0px plum solid; margin-right: auto; margin-left: auto; text-align: center;" cellpadding="5">
  587. <tr>
  588. <td>
  589. <!-- 脫皮機出料儲豆槽 PO2 -->
  590. <div id="PO2" tabindex="0" class="PO2_position" role="button" style="text-align: center;">
  591. <span id="PO2_status" class="C_status_css">PO2 status</span>
  592. </div>
  593. </td>
  594. </tr>
  595. </table>
  596. </td>
  597. </tr>
  598. <tr>
  599. <td width="12.5%" style="border: lightsteelblue 1px solid;">
  600. <div id="CI2_status_dot" style="height: 20px; background-color: black;"></div>
  601. </td>
  602. <td width="12.5%" style="border: lightsteelblue 1px solid;">
  603. <div id="C3_status_dot" style="height: 20px; background-color: black;"></div>
  604. </td>
  605. <td width="12.5%" style="border: lightsteelblue 1px solid;">
  606. <div id="C4_status_dot" style="height: 20px; background-color: black;"></div>
  607. </td>
  608. <td width="12.5%" style="border: lightsteelblue 1px solid;">
  609. </td>
  610. <td width="12.5%" style="border: lightsteelblue 1px solid;">
  611. <div id="S2_status_dot" style="height: 20px; background-color: black;"></div>
  612. </td>
  613. <td width="12.5%" style="border: lightsteelblue 1px solid;">
  614. <div id="SO2_status_dot" style="height: 20px; background-color: black;"></div>
  615. </td>
  616. <td width="12.5%" style="border: lightsteelblue 1px solid;">
  617. <div id="P2_status_dot" style="height: 20px; background-color: black;"></div>
  618. </td>
  619. <td width="12.5%" style="border: lightsteelblue 1px solid;">
  620. <div id="PO2_status_dot" style="height: 20px; background-color: black;"></div>
  621. </td>
  622. </tr>
  623. </table>
  624. </div>
  625. <!-- 發酵貨櫃 致動器狀態 感測器數值 -->
  626. <div style="text-align: center;">
  627. <table width="8%" style="border: 3px lightsteelblue solid; margin-right: auto; margin-left: auto; text-align: center; margin-top: 5px;" cellpadding="5" border="1">
  628. <tr>
  629. <td width="8%" style="border: lightsteelblue 1px solid;">
  630. 入料<br>真空吸料機
  631. </td>
  632. </tr>
  633. <tr>
  634. <td width="8%">
  635. <div id="actuator_0_status" style="height: 20px; background-color: lightgray;"></div>
  636. </td>
  637. </tr>
  638. </table>
  639. <table style="border: 3px lightsteelblue solid; margin-right: auto; margin-left: auto; text-align: center; margin-top: 5px;" cellpadding="5" border="1">
  640. <tr>
  641. <td style="border: lightsteelblue 1px solid;">
  642. 生豆<br>高度
  643. </td>
  644. </tr>
  645. <tr>
  646. <td>
  647. <span id="sensor_00"></span>
  648. </td>
  649. </tr>
  650. </table>
  651. <table style="border: 3px lightsteelblue solid; margin-right: auto; margin-left: auto; text-align: center; margin-top: 5px; line-height: 28px;" cellpadding="5" border="1">
  652. <tr>
  653. <td style="border: lightsteelblue 1px solid;">
  654. 入料儲豆槽<br>
  655. 參數設定
  656. </td>
  657. </tr>
  658. <tr>
  659. <td style="padding: 10px; text-align: left; vertical-align: text-top;">
  660. 生豆高度
  661. <input name="Ferment_Tank_bean_height" class="input-text" type="text" value="5">公分<br>
  662. 吸放料時間
  663. <input name="Ferment_Tank_vacuumON_time" class="input-text" type="text" value="5">秒<br>
  664. </td>
  665. </tr>
  666. </table>
  667. </div>
  668. </div>
  669. </div>
  670. </div>
  671. </div>
  672. </div>
  673. </div>
  674. </div>
  675. {% endblock %}