auto_R.html 44 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784
  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_R()
  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_R()
  313. });
  314. function loading_R(){
  315. var rtid = '{{rtid}}';
  316. $.get('/loading/R'+rtid, '', function (resText) {
  317. var a = [resText.tank_solenoid_water_in,resText.tank_solenoid_reclaimed_out,resText.tank_solenoid_water_out,resText.tank_pump_reclaimed_out];
  318. for (let i=0; i<4; 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.tank_UltraSonic);
  329. $("#sensor_1").text(resText.tank_Turbidity);
  330. }, 'json');
  331. };
  332. </script>
  333. {% endblock %}
  334. {% block style %}
  335. <style>
  336. .C_status_css {
  337. font-weight: bold;
  338. text-align: center;
  339. }
  340. .input-text {
  341. height: 25px;
  342. width: 40px;
  343. text-align: center;
  344. margin-left: 2px;
  345. margin-right: 5px;
  346. }
  347. </style>
  348. {% endblock %}
  349. {% block main%}
  350. <div class="album py-5 bg-light">
  351. <div class="container">
  352. <div class="row row-cols-1 row-cols-sm-1 row-cols-md-1 g-3">
  353. <div class="col">
  354. <div class="card shadow-sm">
  355. <div class="card-body">
  356. <div class="d-flex justify-content-between align-items-center">
  357. <table style="border: 3px lightsteelblue solid; margin-right: auto; margin-left: auto; text-align: center; margin-top: 5px;" cellpadding="5" border="1">
  358. <div style="text-align: center;">
  359. <tr>
  360. <td style="border: lightsteelblue 1px solid;" width="12.5%">
  361. <table style="border: 0px plum solid; margin-right: auto; margin-left: auto; text-align: center;" cellpadding="5">
  362. <tr>
  363. <td>
  364. <!-- 清洗入料 R1 -->
  365. <div id="CI1" tabindex="0" class="CI1_position" role="button">
  366. <span id="CI1_status" class="C_status_css">CI1 status</span>
  367. </div>
  368. </td>
  369. </tr>
  370. </table>
  371. </td>
  372. <td style="border: lightsteelblue 1px solid;" width="12.5%">
  373. <table style="border: 0px plum solid; margin-right: auto; margin-left: auto; text-align: center;" cellpadding="5">
  374. <tr>
  375. <td>
  376. <!-- 清洗槽 C1 -->
  377. <div id="C1" tabindex="0" class="C1_position" role="button">
  378. <span id="C1_status" class="C_status_css">C1 status</span>
  379. </div>
  380. </td>
  381. </tr>
  382. </table>
  383. </td>
  384. <td style="border: lightsteelblue 1px solid;" width="12.5%">
  385. <table style="border: 0px plum solid; margin-right: auto; margin-left: auto; text-align: center;" cellpadding="5">
  386. <tr>
  387. <td>
  388. <!-- 清洗槽 C2 -->
  389. <div id="C2" tabindex="0" class="C2_position" role="button">
  390. <span id="C2_status" class="C_status_css">C2 status</span>
  391. </div>
  392. </td>
  393. </tr>
  394. </table>
  395. </td>
  396. <td style="border: lightsteelblue 1px solid;" width="12.5%">
  397. <table style="border: 0px plum solid; margin-right: auto; margin-left: auto; text-align: center;" cellpadding="5">
  398. <tr>
  399. <td>
  400. <!-- 中水桶 R1 -->
  401. <div id="R1" tabindex="0" class="R1_position" role="button">
  402. <span id="R1_status" class="C_status_css">R1 status</span>
  403. </div>
  404. </td>
  405. </tr>
  406. </table>
  407. </td>
  408. <td style="border: lightsteelblue 1px solid;" width="12.5%">
  409. <table style="border: 0px plum solid; margin-right: auto; margin-left: auto; text-align: center;" cellpadding="5">
  410. <tr>
  411. <td>
  412. <!-- 色選槽 S1 -->
  413. <div id="S1" tabindex="0" class="S1_position" role="button">
  414. <span id="S1_status" class="C_status_css">S1 status</span>
  415. </div>
  416. </td>
  417. </tr>
  418. </table>
  419. </td>
  420. <td style="border: lightsteelblue 1px solid;" width="12.5%">
  421. <table style="border: 0px plum solid; margin-right: auto; margin-left: auto; text-align: center;" cellpadding="5">
  422. <tr>
  423. <td>
  424. <!-- 色選出料 SO1 -->
  425. <div id="SO1" tabindex="0" class="SO1_position" role="button">
  426. <span id="SO1_status" class="C_status_css">SO1 status</span>
  427. </div>
  428. </td>
  429. </tr>
  430. </table>
  431. </td>
  432. <td style="border: lightsteelblue 1px solid;" width="12.5%">
  433. <table style="border: 0px plum solid; margin-right: auto; margin-left: auto; text-align: center;" cellpadding="5">
  434. <tr>
  435. <td>
  436. <!-- 脫皮機 P1 -->
  437. <div id="P1" tabindex="0" class="P1_position" role="button">
  438. <span id="P1_status" class="C_status_css">P1 status</span>
  439. </div>
  440. </td>
  441. </tr>
  442. </table>
  443. </td>
  444. <td style="border: lightsteelblue 1px solid;" width="12.5%">
  445. <table style="border: 0px plum solid; margin-right: auto; margin-left: auto; text-align: center;" cellpadding="5">
  446. <tr>
  447. <td>
  448. <!-- 脫皮出料儲豆槽 PO1 -->
  449. <div id="PO1" tabindex="0" class="PO1_position" role="button">
  450. <span id="PO1_status" class="C_status_css">PO1 status</span>
  451. </div>
  452. </td>
  453. </tr>
  454. </table>
  455. </td>
  456. </tr>
  457. <tr>
  458. <td width="12.5%" style="border: lightsteelblue 1px solid;">
  459. <div id="CI1_status_dot" style="height: 20px; background-color: black;"></div>
  460. </td>
  461. <td width="12.5%" style="border: lightsteelblue 1px solid;">
  462. <div id="C1_status_dot" style="height: 20px; background-color: black;"></div>
  463. </td>
  464. <td width="12.5%" style="border: lightsteelblue 1px solid;">
  465. <div id="C2_status_dot" style="height: 20px; background-color: black;"></div>
  466. </td>
  467. <td width="12.5%" style="border: lightsteelblue 1px solid;">
  468. <div id="R1_status_dot" style=" height: 20px; background-color: black;"></div>
  469. </td>
  470. <td width="12.5%" style="border: lightsteelblue 1px solid;">
  471. <div id="S1_status_dot" style="height: 20px; background-color: black;"></div>
  472. </td>
  473. <td width="12.5%" style="border: lightsteelblue 1px solid;">
  474. <div id="SO1_status_dot" style="height: 20px; background-color: black;"></div>
  475. </td>
  476. <td width="12.5%" style="border: lightsteelblue 1px solid;">
  477. <div id="P1_status_dot" style="height: 20px; background-color: black;"></div>
  478. </td>
  479. <td width="12.5%" style="border: lightsteelblue 1px solid;">
  480. <div id="PO1_status_dot" style="height: 20px; background-color: black;"></div>
  481. </td>
  482. </tr>
  483. <tr>
  484. <td style="border: lightsteelblue 1px solid;" width="12.5%">
  485. 清洗入料儲豆槽
  486. </td>
  487. <td style="border: lightsteelblue 1px solid;" width="12.5%">
  488. 清洗槽
  489. </td>
  490. <td style="border: lightsteelblue 1px solid;" width="12.5%">
  491. 清洗槽
  492. </td>
  493. <td style="border: lightsteelblue 1px solid;" width="12.5%">
  494. 中水桶槽
  495. </td>
  496. <td style="border: lightsteelblue 1px solid;" width="12.5%">
  497. 色選機
  498. </td>
  499. <td style="border: lightsteelblue 1px solid;" width="12.5%">
  500. 色選出料儲豆槽
  501. </td>
  502. <td style="border: lightsteelblue 1px solid;" width="12.5%">
  503. 脫皮機
  504. </td>
  505. <td style="border: lightsteelblue 1px solid;" width="12.5%">
  506. 脫皮出料儲豆槽
  507. </td>
  508. </tr>
  509. <tr>
  510. <td style="border: lightsteelblue 1px solid;">
  511. <table style="border: 0px plum solid; margin-right: auto; margin-left: auto; text-align: center;" cellpadding="5">
  512. <tr>
  513. <td>
  514. <!-- 清洗入料 R1 -->
  515. <div id="CI2" tabindex="0" class="CI2_position" role="button">
  516. <span id="CI2_status" class="C_status_css">CI2 status</span>
  517. </div>
  518. </td>
  519. </tr>
  520. </table>
  521. </td>
  522. <td style="border: lightsteelblue 1px solid;">
  523. <table style="border: 0px plum solid; margin-right: auto; margin-left: auto; text-align: center;" cellpadding="5">
  524. <tr>
  525. <td>
  526. <!-- 脫皮機出料儲豆槽 C3 -->
  527. <div id="C3" tabindex="0" class="C3_position" role="button" style="text-align: center;">
  528. <span id="C3_status" class="C_status_css">C3 status</span>
  529. </div>
  530. </td>
  531. </tr>
  532. </table>
  533. </td>
  534. <td style="border: lightsteelblue 1px solid;">
  535. <table style="border: 0px plum solid; margin-right: auto; margin-left: auto; text-align: center;" cellpadding="5">
  536. <tr>
  537. <td>
  538. <!-- 發酵槽入料儲豆槽 FI2 -->
  539. <div id="C4" tabindex="0" class="C4_position" role="button">
  540. <span id="C4_status" class="C_status_css">C4 status</span>
  541. </div>
  542. </td>
  543. </tr>
  544. </table>
  545. </td>
  546. <td style="border: lightsteelblue 1px solid;">
  547. <table style="border: 0px plum solid; margin-right: auto; margin-left: auto; text-align: center;" cellpadding="5">
  548. </table>
  549. </td>
  550. <td style="border: lightsteelblue 1px solid;">
  551. <table style="border: 0px plum solid; margin-right: auto; margin-left: auto; text-align: center;" cellpadding="5">
  552. <tr>
  553. <td>
  554. <!-- 色選 S2 -->
  555. <div id="S2" tabindex="0" class="S2_position" role="button">
  556. <span id="S2_status" class="C_status_css">S2 status</span>
  557. </div>
  558. </td>
  559. </tr>
  560. </table>
  561. </td>
  562. <td style="border: lightsteelblue 1px solid;">
  563. <table style="border: 0px plum solid; margin-right: auto; margin-left: auto; text-align: center;" cellpadding="5">
  564. <tr>
  565. <td>
  566. <!-- 色選出料 SO2 -->
  567. <div id="SO2" tabindex="0" class="SO2_position" role="button">
  568. <span id="SO2_status" class="C_status_css">SO2 status</span>
  569. </div>
  570. </td>
  571. </tr>
  572. </table>
  573. </td>
  574. <td style="border: lightsteelblue 1px solid;">
  575. <table style="border: 0px plum solid; margin-right: auto; margin-left: auto; text-align: center;" cellpadding="5">
  576. <tr>
  577. <td>
  578. <!-- 脫皮機出料儲豆槽 P2 -->
  579. <div id="P2" tabindex="0" class="P2_position" role="button" style="text-align: center;">
  580. <span id="P2_status" class="C_status_css">P2 status</span>
  581. </div>
  582. </td>
  583. </tr>
  584. </table>
  585. </td>
  586. <td style="border: lightsteelblue 1px solid;">
  587. <table style="border: 0px plum solid; margin-right: auto; margin-left: auto; text-align: center;" cellpadding="5">
  588. <tr>
  589. <td>
  590. <!-- 脫皮機出料儲豆槽 PO2 -->
  591. <div id="PO2" tabindex="0" class="PO2_position" role="button" style="text-align: center;">
  592. <span id="PO2_status" class="C_status_css">PO2 status</span>
  593. </div>
  594. </td>
  595. </tr>
  596. </table>
  597. </td>
  598. </tr>
  599. <tr>
  600. <td width="12.5%" style="border: lightsteelblue 1px solid;">
  601. <div id="CI2_status_dot" style="height: 20px; background-color: black;"></div>
  602. </td>
  603. <td width="12.5%" style="border: lightsteelblue 1px solid;">
  604. <div id="C3_status_dot" style="height: 20px; background-color: black;"></div>
  605. </td>
  606. <td width="12.5%" style="border: lightsteelblue 1px solid;">
  607. <div id="C4_status_dot" style="height: 20px; background-color: black;"></div>
  608. </td>
  609. <td width="12.5%" style="border: lightsteelblue 1px solid;">
  610. </td>
  611. <td width="12.5%" style="border: lightsteelblue 1px solid;">
  612. <div id="S2_status_dot" style="height: 20px; background-color: black;"></div>
  613. </td>
  614. <td width="12.5%" style="border: lightsteelblue 1px solid;">
  615. <div id="SO2_status_dot" style="height: 20px; background-color: black;"></div>
  616. </td>
  617. <td width="12.5%" style="border: lightsteelblue 1px solid;">
  618. <div id="P2_status_dot" style="height: 20px; background-color: black;"></div>
  619. </td>
  620. <td width="12.5%" style="border: lightsteelblue 1px solid;">
  621. <div id="PO2_status_dot" style="height: 20px; background-color: black;"></div>
  622. </td>
  623. </tr>
  624. </table>
  625. </div>
  626. <!-- 發酵貨櫃 致動器狀態 感測器數值 -->
  627. <div style="text-align: center;">
  628. <table style="border: 3px lightsteelblue solid; margin-right: auto; margin-left: auto; text-align: center; margin-top: 5px;" cellpadding="5" border="1">
  629. <tr>
  630. <td width="25%" style="border: lightsteelblue 1px solid;">
  631. 清水入水<br>電磁閥
  632. </td>
  633. <td width="25%" style="border: lightsteelblue 1px solid;">
  634. 排水中水<br>電磁閥
  635. </td>
  636. <td width="25%" style="border: lightsteelblue 1px solid;">
  637. 排水廢水<br>電磁閥
  638. </td>
  639. <td width="25%" style="border: lightsteelblue 1px solid;">
  640. 入水清洗槽<br>幫浦
  641. </td>
  642. </tr>
  643. <tr>
  644. <td style="border: lightsteelblue 1px solid;">
  645. <div id="actuator_0_status" style="margin:0 auto; height: 20px; background-color: lightgray;"></div>
  646. </td>
  647. <td style="border: lightsteelblue 1px solid;">
  648. <div id="actuator_1_status" style="margin:0 auto; height: 20px; background-color: lightgray;"></div>
  649. </td>
  650. <td style="border: lightsteelblue 1px solid;">
  651. <div id="actuator_2_status" style="margin:0 auto; height: 20px; background-color: lightgray;"></div>
  652. </td>
  653. <td style="border: lightsteelblue 1px solid;">
  654. <div id="actuator_3_status" style="margin:0 auto; height: 20px; background-color: lightgray;"></div>
  655. </td>
  656. </tr>
  657. </table>
  658. <table style="border: 3px lightsteelblue solid; margin-right: auto; margin-left: auto; text-align: center; margin-top: 5px;" cellpadding="5" border="1">
  659. <tr>
  660. <td style="border: lightsteelblue 1px solid;">
  661. 水位<br>高度
  662. </td>
  663. <td style="border: lightsteelblue 1px solid;">
  664. 濁度計
  665. </td>
  666. </tr>
  667. <tr>
  668. <td style="border: lightsteelblue 1px solid;">
  669. <span id="sensor_00"></span>
  670. </td>
  671. <td style="border: lightsteelblue 1px solid;">
  672. <span id="sensor_1"></span>
  673. </td>
  674. </tr>
  675. </table>
  676. <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">
  677. <tr>
  678. <td style="border: lightsteelblue 1px solid;">
  679. 中水槽<br>
  680. 參數設定
  681. </td>
  682. </tr>
  683. <tr>
  684. <td style="padding: 10px; text-align: left; vertical-align: text-top;">
  685. 生豆高度
  686. <input name="Ferment_Tank_bean_height" class="input-text" type="text" value="5">公分<br>
  687. 吸放料時間
  688. <input name="Ferment_Tank_vacuumON_time" class="input-text" type="text" value="5">秒<br>
  689. 水位高度
  690. <input name="Ferment_Tank_water_height" class="input-text" type="text" value="8">公分<br>
  691. 馬達轉速
  692. <input name="Ferment_Tank_motor_rpm" class="input-text" type="text" value="15">rpm<br>
  693. 廢水排放
  694. <input name="Ferment_Tank_WaterOut_time" class="input-text" type="text" value="60">秒, 消毒開啟
  695. <input name="Ferment_Tank_Disinfect_time" class="input-text" type="text" value="10">秒<br>
  696. </td>
  697. </tr>
  698. </table>
  699. </div>
  700. </div>
  701. </div>
  702. </div>
  703. </div>
  704. </div>
  705. </div>
  706. </div>
  707. {% endblock %}