1
0

dry_auto.html 39 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805
  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="10" />每 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_pc").text('乾燥自動化');
  23. $("#coffee_title_phone").text('乾燥自動化');
  24. // 桶槽入料顯示
  25. dry_input_status_N = ['{{DI1}}', '{{DI2}}']
  26. // 桶槽狀態顯示
  27. dry_tank_status_N = ['{{D1}}', '{{D2}}', '{{D3}}', '{{D4}}', '{{D5}}', '{{D6}}',
  28. '{{D7}}', '{{D8}}', '{{D9}}', '{{D10}}', '{{D11}}', '{{D12}}']
  29. // 桶槽出料顯示
  30. dry_output_status_N = ['{{DO1}}', '{{DO2}}']
  31. loading_D_status()
  32. loading_D()
  33. var data
  34. var dry_status_interval
  35. // css
  36. // height: 185px; 取代成 height: 210px;
  37. // DI2 DO2 top: 620px; 取代成 top: 645px;
  38. });
  39. function loading_D_status(){
  40. // console.log('dry_input_status_N: ' + dry_input_status_N)
  41. for (let i=0; i<dry_input_status_N.length; i++) {
  42. // 顯示對應乾燥桶槽號碼 D1~D6 和目前狀態
  43. // console.log(i+1 + ' : '+ dry_input_status_N[i])
  44. // 1 : F_InputtingBean
  45. // 2 : F_Waiting
  46. if (dry_input_status_N[i] == 'DI_InputtingBean') {
  47. $("#DI"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
  48. $("#DI"+parseInt(i+1)+"_status").text("DI" + parseInt(i+1) + " 入豆中")
  49. } else if (dry_input_status_N[i] == 'DI_Waiting') {
  50. $("#DI"+parseInt(i+1)+"_status_dot").css("background-color", "lightgray")
  51. $("#DI"+parseInt(i+1)+"_status").text("DI" + parseInt(i+1) + " 空桶等待")
  52. } else if (dry_input_status_N[i] == 'DI_OutputtingBean') {
  53. $("#DI"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
  54. $("#DI"+parseInt(i+1)+"_status").text("DI" + parseInt(i+1) + " 可出豆")
  55. } else {
  56. console.log('pass')
  57. }
  58. }
  59. // console.log('dry_tank_status_N: ' + dry_tank_status_N)
  60. for (let i=0; i<dry_tank_status_N.length; i++) {
  61. // 顯示對應乾燥桶槽號碼 D1~D6 和目前狀態
  62. // console.log(i+1 + ' : '+ dry_tank_status_N[i])
  63. // 1 : D_InputtingBean
  64. // 2 : D_Waiting
  65. if (dry_tank_status_N[i] == 'D_InputtingBean') {
  66. $("#D"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
  67. $("#D"+parseInt(i+1)+"_status").text("D" + parseInt(i+1) + " 入豆中")
  68. } else if (dry_tank_status_N[i] == 'D_InputtingBean_Pause') {
  69. $("#D"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
  70. $("#D"+parseInt(i+1)+"_status").text("D" + parseInt(i+1) + " 入豆暫停")
  71. } else if (dry_tank_status_N[i] == 'D_InputtingBean_Finish') {
  72. $("#D"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
  73. $("#D"+parseInt(i+1)+"_status").text("D" + parseInt(i+1) + " 入豆完成")
  74. } else if (dry_tank_status_N[i] == 'D_Waiting') {
  75. $("#D"+parseInt(i+1)+"_status_dot").css("background-color", "lightgray")
  76. $("#D"+parseInt(i+1)+"_status").text("D" + parseInt(i+1) + " 空桶等待")
  77. } else if (dry_tank_status_N[i] == 'D_Cleaning') {
  78. $("#D"+parseInt(i+1)+"_status_dot").css("background-color", "plum")
  79. $("#D"+parseInt(i+1)+"_status").text("D" + parseInt(i+1) + " 清洗中")
  80. } else if (dry_tank_status_N[i] == 'D_Drying') {
  81. $("#D"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
  82. $("#D"+parseInt(i+1)+"_status").text("D" + parseInt(i+1) + " 乾燥中")
  83. } else if (dry_tank_status_N[i] == 'D_OutputtingBean') {
  84. $("#D"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
  85. $("#D"+parseInt(i+1)+"_status").text("D" + parseInt(i+1) + " 可出豆")
  86. } else if (dry_tank_status_N[i] == 'D_Warning') {
  87. $("#D"+parseInt(i+1)+"_status_dot").css("background-color", "crimson")
  88. $("#D"+parseInt(i+1)+"_status").text("D" + parseInt(i+1) + " 發生錯誤")
  89. $("#D"+parseInt(i+1)+"_status").css("color", "crimson")
  90. } else {
  91. console.log('pass')
  92. }
  93. }
  94. // console.log('dry_output_status_N: ' + dry_output_status_N)
  95. for (let i=0; i<dry_output_status_N.length; i++) {
  96. // 顯示對應乾燥桶槽號碼 D1~D6 和目前狀態
  97. // console.log(i+1 + ' : '+ dry_output_status[i])
  98. // 1 : D_InputtingBean
  99. // 2 : D_Waiting
  100. if (dry_output_status_N[i] == 'DO_InputtingBean') {
  101. $("#DO"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
  102. $("#DO"+parseInt(i+1)+"_status").text("DO" + parseInt(i+1) + " 入豆中")
  103. } else if (dry_output_status_N[i] == 'DO_Waiting') {
  104. $("#DO"+parseInt(i+1)+"_status_dot").css("background-color", "lightgray")
  105. $("#DO"+parseInt(i+1)+"_status").text("DO" + parseInt(i+1) + " 空桶等待")
  106. } else if (dry_output_status_N[i] == 'DO_OutputtingBean') {
  107. $("#DO"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
  108. $("#DO"+parseInt(i+1)+"_status").text("DO" + parseInt(i+1) + " 可出豆")
  109. } else {
  110. console.log('pass')
  111. }
  112. }
  113. }
  114. function loading_D(){
  115. $.get('/loading/DI1', '', function (res) {
  116. $("#actuator_00").text(res.input_vacuum);
  117. $("#sensor_00").text(res.input_UltraSonic);
  118. }, 'json');
  119. $.get('/loading/D2', '', function (res) {
  120. $("#actuator_1").text(res.tank_vacuum);
  121. $("#actuator_2").text(res.tank_threewayvalve);
  122. $("#actuator_3").text(res.tank_diskvalve);
  123. $("#actuator_4").text(res.tank_solenoid_disinfect);
  124. $("#actuator_5").text(res.tank_solenoid_water);
  125. $("#actuator_6").text(res.tank_motor);
  126. $("#actuator_7").text(res.tank_blower);
  127. $("#actuator_8").text(res.tank_heater1);
  128. $("#actuator_9").text(res.tank_heater2);
  129. $("#actuator_10").text(res.tank_temp1_enable);
  130. $("#actuator_11").text(res.tank_temp1);
  131. $("#sensor_1").text(res.UltraSonic);
  132. $("#sensor_2").text(res.SHT11_Temp);
  133. $("#sensor_3").text(res.SHT11_Humidity);
  134. $("#sensor_4").text(res.soil_Temp);
  135. $("#sensor_5").text(res.soil_Humidity);
  136. $("#sensor_6").text(res.soil_EC);
  137. $("#sensor_7").text(res.PA);
  138. }, 'json');
  139. $.get('/loading/DO1', '', function (res) {
  140. $("#actuator_99").text(res.output_vacuum);
  141. $("#sensor_99").text(res.output_UltraSonic);
  142. }, 'json');
  143. };
  144. function getting_parameters_D(){
  145. var Dry_Input_bean_height = $("input[name=Dry_Input_bean_height]").val();
  146. var Dry_Input_vacuumON_time = $("input[name=Dry_Input_vacuumON_time]").val();
  147. var Dry_Input_vacuumOFF_time = $("input[name=Dry_Input_vacuumOFF_time]").val();
  148. var Dry_Tank_bean_height = $("input[name=Dry_Tank_bean_height]").val();
  149. var Dry_Tank_vacuumON_time = $("input[name=Dry_Tank_vacuumON_time]").val();
  150. var Dry_Tank_vacuumOFF_time = $("input[name=Dry_Tank_vacuumOFF_time]").val();
  151. var Dry_Tank_drying_temp = $("input[name=Dry_Tank_drying_temp]").val();
  152. var Dry_Tank_drying_time = $("input[name=Dry_Tank_drying_time]").val();
  153. var Dry_Tank_drying_EC = $("input[name=Dry_Tank_drying_EC]").val();
  154. var Dry_Tank_motor_rpm = $("input[name=Dry_Tank_motor_rpm]").val();
  155. var Dry_Tank_TempWeight_SHT11 = $("input[name=Dry_Tank_TempWeight_SHT11]").val();
  156. var Dry_Tank_TempWeight_soil = $("input[name=Dry_Tank_TempWeight_soil]").val();
  157. var Dry_Tank_drying_Humidity = $("input[name=Dry_Tank_drying_Humidity]").val();
  158. var Dry_Output_bean_height = $("input[name=Dry_Output_bean_height]").val();
  159. var Dry_Output_vacuumON_time = $("input[name=Dry_Output_vacuumON_time]").val();
  160. var Dry_Output_vacuumOFF_time = $("input[name=Dry_Output_vacuumOFF_time]").val();
  161. var Dry_Tank_Disinfect_time = $("input[name=Dry_Tank_Disinfect_time]").val();
  162. data = {"command": "Dry_auto_parameter",
  163. "Dry_Input_bean_height": Dry_Input_bean_height,
  164. "Dry_Input_vacuumON_time": Dry_Input_vacuumON_time,
  165. "Dry_Input_vacuumOFF_time": Dry_Input_vacuumOFF_time,
  166. "Dry_Tank_bean_height": Dry_Tank_bean_height,
  167. "Dry_Tank_vacuumON_time": Dry_Tank_vacuumON_time,
  168. "Dry_Tank_vacuumOFF_time": Dry_Tank_vacuumOFF_time,
  169. "Dry_Tank_drying_temp": Dry_Tank_drying_temp,
  170. "Dry_Tank_drying_time": Dry_Tank_drying_time,
  171. "Dry_Tank_drying_EC": Dry_Tank_drying_EC,
  172. "Dry_Tank_motor_rpm": Dry_Tank_motor_rpm,
  173. "Dry_Tank_TempWeight_SHT11": Dry_Tank_TempWeight_SHT11,
  174. "Dry_Tank_TempWeight_soil": Dry_Tank_TempWeight_soil,
  175. "Dry_Tank_drying_Humidity": Dry_Tank_drying_Humidity,
  176. "Dry_Output_bean_height": Dry_Output_bean_height,
  177. "Dry_Output_vacuumON_time": Dry_Output_vacuumON_time,
  178. "Dry_Output_vacuumOFF_time": Dry_Output_vacuumOFF_time,
  179. "Dry_Tank_Disinfect_time": Dry_Tank_Disinfect_time
  180. };
  181. }
  182. </script>
  183. <style>
  184. .D_status_css {
  185. font-weight: bold;
  186. text-align: center;
  187. }
  188. .DryContainer_position {
  189. position: absolute;
  190. top: 95px;
  191. left: 53px;
  192. }
  193. .D1_position {
  194. width: 110px;
  195. }
  196. .D2_position {
  197. width: 110px;
  198. }
  199. .D3_position {
  200. width: 110px;
  201. }
  202. .D4_position {
  203. width: 110px;
  204. }
  205. .D5_position {
  206. width: 110px;
  207. }
  208. .D6_position {
  209. width: 110px;
  210. }
  211. .D7_position {
  212. width: 110px;
  213. }
  214. .D8_position {
  215. width: 110px;
  216. }
  217. .D9_position {
  218. width: 110px;
  219. }
  220. .D10_position {
  221. width: 110px;
  222. }
  223. .D11_position {
  224. width: 110px;
  225. }
  226. .D12_position {
  227. width: 110px;
  228. }
  229. .DI1_position {
  230. width: 110px;
  231. }
  232. .DI2_position {
  233. width: 110px;
  234. }
  235. .DO1_position {
  236. width: 110px;
  237. }
  238. .DO2_position {
  239. width: 110px;
  240. }
  241. .footer{
  242. position: absolute;
  243. bottom: 0px;
  244. width: 100%;
  245. background-color: #eee;
  246. text-align: center;
  247. }
  248. .input-text {
  249. height: 25px;
  250. width: 40px;
  251. text-align: center;
  252. margin-left: 2px;
  253. margin-right: 5px;
  254. }
  255. </style>
  256. </head>
  257. <body>
  258. <div id="wrapper">
  259. <div id="coffee_header">
  260. <!-- 匯入共同使用的 header.html 內容 -->
  261. {% include 'header.html' %}
  262. </div>
  263. <div>
  264. <div style="text-align: center;">
  265. <button style="margin: 5px 10px 0px 10px;" type="submit" class="btn btn-primary" onclick="dry_auto_status_stop()">
  266. <u>狀態判斷_停止</u></button>
  267. <script>
  268. function dry_auto_status_stop(){
  269. // clearInterval(loading_D_interval)
  270. clearInterval(dry_status_interval)
  271. console.log("------- 狀態自動化判斷 停止 -------")
  272. }
  273. </script>
  274. <button style="margin: 5px 10px 0px 10px;" type="submit" class="btn btn-primary" onclick="dry_auto_status_testing()">
  275. <u>[測試] 乾燥自動化_狀態判斷</u></button>
  276. <script>
  277. var loading_D_interval
  278. // var loading_D_interval
  279. var dry_status_process = 0;
  280. function dry_auto_status_testing(){
  281. console.log("------- 狀態自動化判斷 開始 -------")
  282. // 取得桶槽狀態
  283. // loading_D_interval = setInterval(loading_D, 10*1000)
  284. // 取得目前乾燥參數
  285. getting_parameters_D()
  286. // 更新桶槽狀態
  287. dry_status_interval = setInterval(dry_auto_status, 10*1000);
  288. function dry_auto_status(){
  289. if (dry_status_process == 1) { return };
  290. dry_status_process = 1;
  291. $.get('dry_auto_status', data, function (res){
  292. DI1 = res.Dry_Input_1
  293. D1 = res.Dry_Tank_1
  294. D2 = res.Dry_Tank_2
  295. D3 = res.Dry_Tank_3
  296. D4 = res.Dry_Tank_4
  297. D5 = res.Dry_Tank_5
  298. D6 = res.Dry_Tank_6
  299. DO1 = res.Dry_Output_1
  300. console.log('DI1: ' + DI1)
  301. console.log('D1: ' + D1)
  302. console.log('D2: ' + D2)
  303. console.log('D3: ' + D3)
  304. console.log('D4: ' + D4)
  305. console.log('D5: ' + D5)
  306. console.log('D6: ' + D6)
  307. console.log('DO1: ' + DO1)
  308. // ----- 乾燥入料 DI1 狀態 --------------------------------------------------------------
  309. dry_input_status_N = [res.Dry_Input_1]
  310. // ----- 乾燥桶槽 D1~D6 狀態 --------------------------------------------------------------
  311. dry_tank_status_N = [res.Dry_Tank_1, res.Dry_Tank_2, res.Dry_Tank_3, res.Dry_Tank_4, res.Dry_Tank_5, res.Dry_Tank_6]
  312. // ----- 乾燥出料 DO1 狀態 --------------------------------------------------------------
  313. dry_output_status_N = [res.Dry_Output_1]
  314. loading_D_status()
  315. dry_status_process = 0;
  316. }, 'json');
  317. };
  318. };
  319. </script>
  320. </div>
  321. <!-- 乾燥貨櫃 狀態表格 -->
  322. <table style="border: 3px lightsteelblue solid; margin-right: auto; margin-left: auto; text-align: center; margin-top: 10px;" cellpadding="5" border="1">
  323. <tr>
  324. <td style="border: lightsteelblue 1px solid;">
  325. <table style="border: 0px plum solid; margin-right: auto; margin-left: auto; text-align: center;" cellpadding="5">
  326. <tr>
  327. <td>
  328. <!-- 乾燥槽入料儲豆槽 DI1 -->
  329. <div id="DI1" tabindex="0" class="DI1_position" role="button" style="text-align: center;">
  330. <span id="DI1_status" class="D_status_css">DI1 status</span>
  331. <div id="DI1_status_dot" style="width: 110px; height: 20px; background-color: black;"></div>
  332. </div>
  333. </td>
  334. </tr>
  335. </table>
  336. </td>
  337. <td style="border: lightsteelblue 1px solid;">
  338. <table style="border: 0px plum solid; margin-right: auto; margin-left: auto; text-align: center;" cellpadding="5">
  339. <tr>
  340. <td>
  341. <!-- 乾燥槽 D1 -->
  342. <div id="D1" tabindex="0" class="D1_position" role="button">
  343. <span id="D1_status" class="D_status_css">D1 status</span>
  344. <!-- D1 狀態點點-->
  345. <div id="D1_status_dot" style="width: 110px; height: 20px; background-color: black;"></div>
  346. </div>
  347. </td>
  348. <td>
  349. <!-- 乾燥槽 D2 -->
  350. <div id="D2" tabindex="0" class="D2_position" role="button">
  351. <span id="D2_status" class="D_status_css">D2 status</span>
  352. <div id="D2_status_dot" style="width: 110px; height: 20px; background-color: black;"></div>
  353. </div>
  354. </td>
  355. <td>
  356. <!-- 乾燥槽 D3 -->
  357. <div id="D3" tabindex="0" class="D3_position" role="button">
  358. <span id="D3_status" class="D_status_css">D3 status</span>
  359. <div id="D3_status_dot" style="width: 110px; height: 20px; background-color: black;"></div>
  360. </div>
  361. </td>
  362. <td>
  363. <!-- 乾燥槽 D4 -->
  364. <div id="D4" tabindex="0" class="D4_position" role="button">
  365. <span id="D4_status" class="D_status_css">D4 status</span>
  366. <div id="D4_status_dot" style="width: 110px; height: 20px; background-color: black;"></div>
  367. </div>
  368. </td>
  369. <td>
  370. <!-- 乾燥槽 D5 -->
  371. <div id="D5" tabindex="0" class="D5_position" role="button">
  372. <span id="D5_status" class="D_status_css">D5 status</span>
  373. <div id="D5_status_dot" style="width: 110px; height: 20px; background-color: black;"></div>
  374. </div>
  375. </td>
  376. <td>
  377. <!-- 乾燥槽 D6 -->
  378. <div id="D6" tabindex="0" class="D6_position" role="button">
  379. <span id="D6_status" class="D_status_css">D6 status</span>
  380. <div id="D6_status_dot" style="width: 110px; height: 20px; background-color: black;"></div>
  381. </div>
  382. </td>
  383. </tr>
  384. </table>
  385. </td>
  386. <td style="border: lightsteelblue 1px solid;">
  387. <table style="border: 0px plum solid; margin-right: auto; margin-left: auto; text-align: center;" cellpadding="5">
  388. <tr>
  389. <td>
  390. <!-- 乾燥槽出料儲豆槽 DO1 -->
  391. <div id="DO1" tabindex="0" class="DO1_position" role="button">
  392. <span id="DO1_status" class="D_status_css">DO1 status</span>
  393. <div id="DO1_status_dot" style="width: 110px; height: 20px; background-color: black;"></div>
  394. </div>
  395. </td>
  396. </tr>
  397. </table>
  398. </td>
  399. </tr>
  400. <tr>
  401. <td style="border: lightsteelblue 1px solid;">
  402. 入料儲豆槽
  403. </td>
  404. <td style="border: lightsteelblue 1px solid;">
  405. 乾燥桶槽
  406. </td>
  407. <td style="border: lightsteelblue 1px solid;">
  408. 出料儲豆槽
  409. </td>
  410. </tr>
  411. <tr>
  412. <td style="border: lightsteelblue 1px solid;">
  413. <table style="border: 0px plum solid; margin-right: auto; margin-left: auto; text-align: center;" cellpadding="5">
  414. <tr>
  415. <td>
  416. <!-- 乾燥槽入料儲豆槽 DI2 -->
  417. <div id="DI2" tabindex="0" class="DI2_position" role="button">
  418. <span id="DI2_status" class="D_status_css">DI2 status</span>
  419. <div id="DI2_status_dot" style="width: 110px; height: 20px; background-color: black;"></div>
  420. </div>
  421. </td>
  422. </tr>
  423. </table>
  424. </td>
  425. <td style="border: lightsteelblue 1px solid;">
  426. <table style="border: 0px plum solid; margin-right: auto; margin-left: auto; text-align: center;" cellpadding="5">
  427. <tr>
  428. <td>
  429. <!-- 乾燥槽 D7 -->
  430. <div id="D7" tabindex="0" class="D7_position" role="button" style="vertical-align: bottom;">
  431. <span id="D7_status" class="D_status_css">D7 status</span>
  432. <div id="D7_status_dot" style="width: 110px; height: 20px; background-color: black;"></div>
  433. </div>
  434. </td>
  435. <td>
  436. <!-- 乾燥槽 D8 -->
  437. <div id="D8" tabindex="0" class="D8_position" role="button">
  438. <span id="D8_status" class="D_status_css">D8 status</span>
  439. <div id="D8_status_dot" style="width: 110px; height: 20px; background-color: black;"></div>
  440. </div>
  441. </td>
  442. <td>
  443. <!-- 乾燥槽 D9 -->
  444. <div id="D9" tabindex="0" class="D9_position" role="button">
  445. <span id="D9_status" class="D_status_css">D9 status</span>
  446. <div id="D9_status_dot" style="width: 110px; height: 20px; background-color: black;"></div>
  447. </div>
  448. </td>
  449. <td>
  450. <!-- 乾燥槽 D10 -->
  451. <div id="D10" tabindex="0" class="D10_position" role="button">
  452. <span id="D10_status" class="D_status_css">D10 status</span>
  453. <div id="D10_status_dot" style="width: 110px; height: 20px; background-color: black;"></div>
  454. </div>
  455. </td>
  456. <td>
  457. <!-- 乾燥槽 D11 -->
  458. <div id="D11" tabindex="0" class="D11_position" role="button">
  459. <span id="D11_status" class="D_status_css">D11 status</span>
  460. <div id="D11_status_dot" style="width: 110px; height: 20px; background-color: black;"></div>
  461. </div>
  462. </td>
  463. <td>
  464. <!-- 乾燥槽 D12 -->
  465. <div id="D12" tabindex="0" class="D12_position" role="button">
  466. <span id="D12_status" class="D_status_css">D12 status</span>
  467. <div id="D12_status_dot" style="width: 110px; height: 20px; background-color: black;"></div>
  468. </div>
  469. </td>
  470. </tr>
  471. </table>
  472. </td>
  473. <td style="border: lightsteelblue 1px solid;">
  474. <table style="border: 0px plum solid; margin-right: auto; margin-left: auto; text-align: center;" cellpadding="5">
  475. <tr>
  476. <td>
  477. <!-- 乾燥槽出料儲豆槽 DO2 -->
  478. <div id="DO2" tabindex="0" class="DO2_position" role="button">
  479. <span id="DO2_status" class="D_status_css">DO2 status</span>
  480. <div id="DO2_status_dot" style="width: 110px; height: 20px; background-color: black;"></div>
  481. </div>
  482. </td>
  483. </tr>
  484. </table>
  485. </td>
  486. </tr>
  487. </table>
  488. <!-- 乾燥貨櫃 致動器狀態 感測器數值 -->
  489. <div style="text-align: center;">
  490. <table style="border: 3px lightsteelblue solid; margin-right: auto; margin-left: auto; text-align: center; margin-top: 5px;" cellpadding="5" border="1">
  491. <tr>
  492. <td>
  493. 入料<br>Vacuum
  494. </td>
  495. <td>
  496. 桶槽<br>
  497. Vacuum
  498. </td>
  499. <td>
  500. 入料<br>三通閥
  501. </td>
  502. <td>
  503. 蝴蝶閥
  504. </td>
  505. <td>
  506. 消毒<br>電磁閥
  507. </td>
  508. <td>
  509. 排水<br>電磁閥
  510. </td>
  511. <td>
  512. 馬達
  513. </td>
  514. <td>
  515. 鼓風機
  516. </td>
  517. <td>
  518. 加熱器<br>1
  519. </td>
  520. <td>
  521. 加熱器<br>2
  522. </td>
  523. <td>
  524. 溫控開關
  525. </td>
  526. <td>
  527. 設定溫度
  528. </td>
  529. <td>
  530. 出料<br>Vacuum
  531. </td>
  532. </tr>
  533. <tr>
  534. <td>
  535. <span id="actuator_00">x</span>
  536. </td>
  537. <td>
  538. <span id="actuator_1">x</span>
  539. </td>
  540. <td>
  541. <span id="actuator_2">x</span>
  542. </td>
  543. <td>
  544. <span id="actuator_3">x</span>
  545. </td>
  546. <td>
  547. <span id="actuator_4">x</span>
  548. </td>
  549. <td>
  550. <span id="actuator_5">x</span>
  551. </td>
  552. <td>
  553. <span id="actuator_6">x</span>
  554. </td>
  555. <td>
  556. <span id="actuator_7">x</span>
  557. </td>
  558. <td>
  559. <span id="actuator_8">x</span>
  560. </td>
  561. <td>
  562. <span id="actuator_9">x</span>
  563. </td>
  564. <td>
  565. <span id="actuator_10">x</span>
  566. </td>
  567. <td>
  568. <span id="actuator_11">x</span>
  569. </td>
  570. <td>
  571. <span id="actuator_99">x</span>
  572. </td>
  573. </tr>
  574. </table>
  575. <table style="border: 3px lightsteelblue solid; margin-right: auto; margin-left: auto; text-align: center; margin-top: 5px;" cellpadding="5" border="1">
  576. <tr>
  577. <td>
  578. 入料<br>高度
  579. </td>
  580. <td>
  581. 桶內<br>高度
  582. </td>
  583. <td>
  584. SHT11<br>溫度
  585. </td>
  586. <td>
  587. SHT11<br>濕度
  588. </td>
  589. <td>
  590. Soil<br>溫度
  591. </td>
  592. <td>
  593. Soil<br>濕度
  594. </td>
  595. <td>
  596. Soil<br>EC
  597. </td>
  598. <td>
  599. PA
  600. </td>
  601. <td>
  602. 出料<br>高度
  603. </td>
  604. </tr>
  605. <tr>
  606. <td>
  607. <span id="sensor_00">00</span>
  608. </td>
  609. <td>
  610. <span id="sensor_1">00</span>
  611. </td>
  612. <td>
  613. <span id="sensor_2">00</span>
  614. </td>
  615. <td>
  616. <span id="sensor_3">00</span>
  617. </td>
  618. <td>
  619. <span id="sensor_4">00</span>
  620. </td>
  621. <td>
  622. <span id="sensor_5">00</span>
  623. </td>
  624. <td>
  625. <span id="sensor_6">00</span>
  626. </td>
  627. <td>
  628. <span id="sensor_7">00</span>
  629. </td>
  630. <td>
  631. <span id="sensor_99">00</span>
  632. </td>
  633. </tr>
  634. </table>
  635. </div>
  636. <!-- 乾燥貨櫃 參數設定 -->
  637. <table style="border: 3px lightsteelblue solid; margin-right: auto; margin-left: auto; text-align: center; margin-top: 10px;" cellpadding="5" border="1">
  638. <tr>
  639. <td>
  640. 入料儲豆槽<br>
  641. 參數設定
  642. </td>
  643. <td>
  644. 桶槽<br>
  645. 參數設定
  646. </td>
  647. <td>
  648. 出料儲豆槽<br>
  649. 參數設定
  650. </td>
  651. </tr>
  652. <tr>
  653. <td style="padding: 10px; text-align: left; vertical-align: text-top;">
  654. 生豆高度
  655. <input name="Dry_Input_bean_height" type="text" class="input-text" value="5">公分<br>
  656. 吸料時間
  657. <input name="Dry_Input_vacuumON_time" type="text" class="input-text" value="5">秒<br>
  658. 放料時間
  659. <input name="Dry_Input_vacuumOFF_time" type="text" class="input-text" value="10">秒<br>
  660. </td>
  661. <td style="padding: 10px; text-align: left; vertical-align: text-top;">
  662. 生豆高度
  663. <input name="Dry_Tank_bean_height" type="text" class="input-text" value="5">公分<br>
  664. 吸料時間
  665. <input name="Dry_Tank_vacuumON_time" type="text" class="input-text" value="10">秒,
  666. 放料時間
  667. <input name="Dry_Tank_vacuumOFF_time" type="text" class="input-text" value="10">秒<br>
  668. 馬達轉速
  669. <input name="Dry_Tank_motor_rpm" type="text" class="input-text" value="30">rpm<br>
  670. ----- 溫度權重設定 ----------------------------------------------<br>
  671. [SHT11]桶內溫度×權重
  672. <input name="Dry_Tank_TempWeight_SHT11" type="text" class="input-text" value="0.5">
  673. +
  674. [soil]生豆溫度×權重
  675. <input name="Dry_Tank_TempWeight_soil" type="text" class="input-text" value="0.5">
  676. <br>
  677. ----- 乾燥完成條件 (輸入 0 代表不設定) ------------------------<br>
  678. 指定溫度
  679. <input name="Dry_Tank_drying_temp" type="text" class="input-text" value="40">℃
  680. , 指定濕度
  681. <input name="Dry_Tank_drying_Humidity" type="text" class="input-text" value="30">%
  682. , 持溫時間
  683. <input name="Dry_Tank_drying_time" type="text" class="input-text" value="60">秒<br>
  684. <del>指定 EC</del>
  685. <input name="Dry_Tank_drying_EC" type="text" class="input-text" value="300">,
  686. 消毒開啟
  687. <input name="Dry_Tank_Disinfect_time" class="input-text" type="text" value="10">秒
  688. </td>
  689. <td style="padding: 10px; text-align: left; vertical-align: text-top;">
  690. 生豆高度
  691. <input name="Dry_Output_bean_height" type="text" class="input-text" value="5">公分<br>
  692. 吸料時間
  693. <input name="Dry_Output_vacuumON_time" type="text" class="input-text" value="5"> 秒<br>
  694. 放料時間
  695. <input name="Dry_Output_vacuumOFF_time" type="text" class="input-text" value="10"> 秒<br>
  696. </td>
  697. </tr>
  698. </table>
  699. <center><button style="margin: 15px 10px 0px 10px;" type="submit" class="btn btn-primary" onclick="dry_auto()">
  700. [測試] MQTT + 每 60 秒更新貨櫃狀態</button></center>
  701. <script>
  702. function dry_auto(){
  703. getting_parameters_D()
  704. $.post('/mqtt/101', data, function (res) {
  705. console.log('data: ', data)
  706. console.log('res: ', res)
  707. }, 'text')
  708. var dry_interval = setInterval(testing_D_auto, 30*1000)
  709. }
  710. </script>
  711. <center><button style="margin: 15px 10px 0px 10px;" type="submit" class="btn btn-primary" onclick="testing_D_auto()">
  712. [測試] 乾燥貨櫃狀態</button></center>
  713. <script>
  714. function testing_D_auto(){
  715. $.get('/dry_auto', '', function (res) {
  716. console.log('DI1: ' + res.Dry_Input_1)
  717. console.log('D1: ' + res.Dry_Tank_1)
  718. console.log('D2: ' + res.Dry_Tank_2)
  719. console.log('D3: ' + res.Dry_Tank_3)
  720. console.log('D4: ' + res.Dry_Tank_4)
  721. console.log('D5: ' + res.Dry_Tank_5)
  722. console.log('D6: ' + res.Dry_Tank_6)
  723. console.log('DO1: ' + res.Dry_Output_1)
  724. // ----- 乾燥入料 DI1 狀態 --------------------------------------------------------------
  725. dry_input_status_N = [res.Dry_Input_1]
  726. // ----- 乾燥桶槽 D1~D6 狀態 --------------------------------------------------------------
  727. dry_tank_status_N = [res.Dry_Tank_1, res.Dry_Tank_2, res.Dry_Tank_3, res.Dry_Tank_4, res.Dry_Tank_5, res.Dry_Tank_6]
  728. // ----- 乾燥出料 DO1 狀態 --------------------------------------------------------------
  729. dry_output_status_N = [res.Dry_Output_1]
  730. loading_D_status()
  731. }, 'json');
  732. // console.log("-- 自動化程式 end --")
  733. }
  734. </script>
  735. </div>
  736. <div id="coffee_footer">
  737. <!-- 匯入共同使用的 footer.html 內容 -->
  738. {% include 'footer.html' %}
  739. </div>
  740. <br>
  741. <br>
  742. <br>
  743. </div>
  744. </body>
  745. </html>