clean_container_tank.html 43 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903
  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="5" /> 每 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. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  18. <!-- Socket.IO -->
  19. <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.0/socket.io.dev.js"></script>
  20. <script language="JavaScript">
  21. // 指定 10秒 刷新網頁一次
  22. var ctn = '{{tid}}';
  23. var status = '{{status}}';
  24. console.log('ctn:' + ctn)
  25. $(function(){
  26. $("#coffee_title_pc").text('C' + ctn + ' 清洗浮選槽操作介面');
  27. $("#coffee_title_phone").text('C' + ctn + ' 清洗浮選槽操作介面');
  28. if (status == 2) {
  29. $('input').prop('disabled', true);
  30. $('button').prop('disabled', true);
  31. } else if ( (status == 0) || (status == 1) ) {
  32. $('input').prop('disabled', false);
  33. $('button').prop('disabled', false);
  34. }
  35. });
  36. var WebUpdate_set;
  37. WebUpdate_set = setInterval(function(){WebUpdate(ctn)} , 10 * 1000)
  38. </script>
  39. <script>
  40. // 清洗浮選 致動器開關
  41. var tank_num = '{{tid}}';
  42. // 桶內 真空吸料機
  43. function tankVacuum(params) {
  44. if (params == '1') {
  45. var data = { "tank_num": "C" + tank_num, "command": "tank_vacuum_status", "value": "on" };
  46. } else if (params == '0') {
  47. var data = { "tank_num": "C" + tank_num, "command": "tank_vacuum_status", "value": "off" };
  48. } else {
  49. var status = "off";
  50. var check = $("input[name=tank_vacuum_status]:checked");
  51. //大於0代表有被選中
  52. if (check.length > 0) {
  53. status = "on";
  54. $("#cmn-toggle-02").prop('checked', false);
  55. if (!confirm("你確定要開啟真空吸料機嗎?")) {
  56. return false;
  57. };
  58. } else {
  59. $("#cmn-toggle-02").prop('checked', true);
  60. if (!confirm("你確定要關閉真空吸料機嗎?")) {
  61. return false;
  62. };
  63. };
  64. var data = { "tank_num": "C" + tank_num, "command": "tank_vacuum_status", "value": status };
  65. }
  66. $.post('/mqtt/{{tid}}', data, function (res) {
  67. console.log('data:', data)
  68. if (res == 'on') {
  69. $("#cmn-toggle-02").prop('checked', true);
  70. } else if (res == 'off') {
  71. $("#cmn-toggle-02").prop('checked', false);
  72. } else {
  73. };
  74. }, 'text')
  75. }
  76. // 桶內 吸料機三通閥
  77. function tankThreeWayValveInput(params) {
  78. if (params == '1') {
  79. var data = { "tank_num": "C" + tank_num, "command": "tank_threewayvalve_input_status", "value": "on" };
  80. } else if (params == '0') {
  81. var data = { "tank_num": "C" + tank_num, "command": "tank_threewayvalve_input_status", "value": "off" };
  82. } else {
  83. var status = "off";
  84. var check = $("input[name=tank_threewayvalve_input_status]:checked");
  85. //大於0代表有被選中
  86. if (check.length > 0) {
  87. status = "on";
  88. $("#cmn-toggle-05").prop('checked', false);
  89. if (!confirm("你確定要開啟吸料機三通閥[入料]嗎?")) {
  90. return false;
  91. };
  92. } else {
  93. $("#cmn-toggle-05").prop('checked', true);
  94. if (!confirm("你確定要開啟吸料機三通閥[排氣]嗎?")) {
  95. return false;
  96. };
  97. };
  98. var data = { "tank_num": "C" + tank_num, "command": "tank_threewayvalve_input_status", "value": status };
  99. }
  100. $.post('/mqtt/{{tid}}', data, function (res) {
  101. console.log('data:', data)
  102. if (res == 'on') {
  103. $("#cmn-toggle-05").prop('checked', true);
  104. } else if (res == 'off') {
  105. $("#cmn-toggle-05").prop('checked', false);
  106. } else {
  107. };
  108. }, 'text')
  109. }
  110. // 桶內 馬達
  111. function tankMotor_set() {
  112. var motor_data = $("input[id=motor_rpm_data]").val();
  113. if (motor_data == '') {
  114. alert("請先輸入要運轉的值!");
  115. return false;
  116. } else if (motor_data == 0) {
  117. alert("轉速 0 為關閉馬達");
  118. } else if (Number(motor_data) < -50 || Number(motor_data) > 50 || !Number(motor_data)) {
  119. alert("您輸入的值已超過範圍,請重新輸入!" + !Number(motor_data));
  120. return false;
  121. };
  122. var value = "off";
  123. if (motor_data != 0) {
  124. value = motor_data;
  125. if (!confirm("你確定要開啟攪拌馬達,運轉速度為 " + motor_data + " RPM 嗎?")) {
  126. return false;
  127. };
  128. } else {
  129. if (!confirm("你確定要關閉攪拌馬達嗎?")) {
  130. return false;
  131. };
  132. };
  133. var data = { "tank_num": "C" + tank_num, "command": "tank_motor_status", "value": motor_data };
  134. $.post('/mqtt/{{tid}}', data, function (res) {
  135. console.log('data:', data)
  136. if (res == 'on') {
  137. setTimeout("alert('攪拌馬達_開啟成功!')", 500);
  138. var timer = setInterval(Rotate, 60000);
  139. } else if (res == 'off') {
  140. setTimeout("alert('攪拌馬達_關閉成功!')", 500);
  141. clearInterval(timer);
  142. $("#motor_rpm_status").text('')
  143. } else {
  144. alert(res);
  145. };
  146. }, 'text')
  147. };
  148. function tankMotor(params) {
  149. var params_int = parseInt(params)
  150. if (-50 <= params_int <= 50) {
  151. var data = { "tank_num": "C" + tank_num, "command": "tank_motor_status", "value": params };
  152. } else {
  153. var data = { "tank_num": "C" + tank_num, "command": "tank_motor_status", "value": '0' };
  154. }
  155. $.post('/mqtt/{{tid}}', data, function (res) {
  156. console.log('data:', data)
  157. if (res == 'on') {
  158. $("#cmn-toggle-08").prop('checked', true);
  159. } else if (res == 'off') {
  160. $("#cmn-toggle-08").prop('checked', false);
  161. } else {
  162. };
  163. }, 'text')
  164. }
  165. // 桶內 中水入水電磁閥
  166. function tankSolenoidReclaimedIn(params) {
  167. if (params == '1') {
  168. var data = { "tank_num": "C" + tank_num, "command": "tank_solenoid_reclaimed_in_status", "value": "on" };
  169. } else if (params == '0') {
  170. var data = { "tank_num": "C" + tank_num, "command": "tank_solenoid_reclaimed_in_status", "value": "off" };
  171. } else {
  172. var status = "off";
  173. var check = $("input[name=tank_solenoid_reclaimed_in_status]:checked");
  174. //大於0代表有被選中
  175. if (check.length > 0) {
  176. status = "on";
  177. $("#cmn-toggle-11").prop('checked', false);
  178. if (!confirm("你確定要開啟中水入水電磁閥嗎?")) {
  179. return false;
  180. };
  181. } else {
  182. $("#cmn-toggle-11").prop('checked', true);
  183. if (!confirm("你確定要關閉中水入水電磁閥嗎?")) {
  184. return false;
  185. };
  186. };
  187. var data = { "tank_num": "C" + tank_num, "command": "tank_solenoid_reclaimed_in_status", "value": status };
  188. }
  189. $.post('/mqtt/{{tid}}', data, function (res) {
  190. console.log('data:', data)
  191. if (res == 'on') {
  192. $("#cmn-toggle-11").prop('checked', true);
  193. } else if (res == 'off') {
  194. $("#cmn-toggle-11").prop('checked', false);
  195. } else {
  196. };
  197. }, 'text')
  198. }
  199. // 桶內 清水入水電磁閥
  200. function tankSolenoidWaterIn(params) {
  201. if (params == '1') {
  202. var data = { "tank_num": "C" + tank_num, "command": "tank_solenoid_water_in_status", "value": "on" };
  203. } else if (params == '0') {
  204. var data = { "tank_num": "C" + tank_num, "command": "tank_solenoid_water_in_status", "value": "off" };
  205. } else {
  206. var status = "off";
  207. var check = $("input[name=tank_solenoid_water_in_status]:checked");
  208. //大於0代表有被選中
  209. if (check.length > 0) {
  210. status = "on";
  211. $("#cmn-toggle-14").prop('checked', false);
  212. if (!confirm("你確定要開啟清水入水電磁閥嗎?")) {
  213. return false;
  214. };
  215. } else {
  216. $("#cmn-toggle-14").prop('checked', true);
  217. if (!confirm("你確定要關閉清水入水電磁閥嗎?")) {
  218. return false;
  219. };
  220. };
  221. var data = { "tank_num": "C" + tank_num, "command": "tank_solenoid_water_in_status", "value": status };
  222. }
  223. $.post('/mqtt/{{tid}}', data, function (res) {
  224. console.log('data:', data)
  225. if (res == 'on') {
  226. $("#cmn-toggle-14").prop('checked', true);
  227. } else if (res == 'off') {
  228. $("#cmn-toggle-14").prop('checked', false);
  229. } else {
  230. };
  231. }, 'text')
  232. }
  233. // 桶內 幫浦 (清水入水)
  234. function tankPumpWaterIn(params) {
  235. if (params == '1') {
  236. var data = { "tank_num": "C" + tank_num, "command": "tank_pump_water_in_status", "value": "on" };
  237. } else if (params == '0') {
  238. var data = { "tank_num": "C" + tank_num, "command": "tank_pump_water_in_status", "value": "off" };
  239. } else {
  240. var status = "off";
  241. var check = $("input[name=tank_pump_water_in_status]:checked");
  242. //大於0代表有被選中
  243. if (check.length > 0) {
  244. status = "on";
  245. $("#cmn-toggle-17").prop('checked', false);
  246. if (!confirm("你確定要開啟清水入水幫浦嗎?")) {
  247. return false;
  248. };
  249. } else {
  250. $("#cmn-toggle-17").prop('checked', true);
  251. if (!confirm("你確定要關閉清水入水幫浦嗎?")) {
  252. return false;
  253. };
  254. };
  255. var data = { "tank_num": "C" + tank_num, "command": "tank_pump_water_in_status", "value": status };
  256. }
  257. $.post('/mqtt/{{tid}}', data, function (res) {
  258. console.log('data:', data)
  259. if (res == 'on') {
  260. $("#cmn-toggle-17").prop('checked', true);
  261. } else if (res == 'off') {
  262. $("#cmn-toggle-17").prop('checked', false);
  263. } else {
  264. };
  265. }, 'text')
  266. }
  267. // 桶內 排水廢水電磁閥
  268. function tankSolenoidWaterOut(params) {
  269. if (params == '1') {
  270. var data = { "tank_num": "C" + tank_num, "command": "tank_solenoid_water_out_status", "value": "on" };
  271. } else if (params == '0') {
  272. var data = { "tank_num": "C" + tank_num, "command": "tank_solenoid_water_out_status", "value": "off" };
  273. } else {
  274. var status = "off";
  275. var check = $("input[name=tank_solenoid_water_out_status]:checked");
  276. //大於0代表有被選中
  277. if (check.length > 0) {
  278. status = "on";
  279. $("#cmn-toggle-20").prop('checked', false);
  280. if (!confirm("你確定要開啟排水廢水電磁閥嗎?")) {
  281. return false;
  282. };
  283. } else {
  284. $("#cmn-toggle-20").prop('checked', true);
  285. if (!confirm("你確定要關閉排水廢水電磁閥嗎?")) {
  286. return false;
  287. };
  288. };
  289. var data = { "tank_num": "C" + tank_num, "command": "tank_solenoid_water_out_status", "value": status };
  290. }
  291. $.post('/mqtt/{{tid}}', data, function (res) {
  292. console.log('data:', data)
  293. if (res == 'on') {
  294. $("#cmn-toggle-20").prop('checked', true);
  295. } else if (res == 'off') {
  296. $("#cmn-toggle-20").prop('checked', false);
  297. } else {
  298. };
  299. }, 'text')
  300. }
  301. // 桶內 排水中水電磁閥
  302. function tankSolenoidReclaimedOut(params) {
  303. if (params == '1') {
  304. var data = { "tank_num": "C" + tank_num, "command": "tank_solenoid_reclaimed_out_status", "value": "on" };
  305. } else if (params == '0') {
  306. var data = { "tank_num": "C" + tank_num, "command": "tank_solenoid_reclaimed_out_status", "value": "off" };
  307. } else {
  308. var status = "off";
  309. var check = $("input[name=tank_solenoid_reclaimed_out_status]:checked");
  310. //大於0代表有被選中
  311. if (check.length > 0) {
  312. status = "on";
  313. $("#cmn-toggle-23").prop('checked', false);
  314. if (!confirm("你確定要開啟排水中水電磁閥嗎?")) {
  315. return false;
  316. };
  317. } else {
  318. $("#cmn-toggle-23").prop('checked', true);
  319. if (!confirm("你確定要關閉排水中水電磁閥嗎?")) {
  320. return false;
  321. };
  322. };
  323. var data = { "tank_num": "C" + tank_num, "command": "tank_solenoid_reclaimed_out_status", "value": status };
  324. }
  325. $.post('/mqtt/{{tid}}', data, function (res) {
  326. console.log('data:', data)
  327. if (res == 'on') {
  328. $("#cmn-toggle-23").prop('checked', true);
  329. } else if (res == 'off') {
  330. $("#cmn-toggle-23").prop('checked', false);
  331. } else {
  332. };
  333. }, 'text')
  334. }
  335. // 桶內 消毒電磁閥
  336. function tankSolenoidDisinfect(params) {
  337. if (params == '1') {
  338. var data = { "tank_num": "C" + tank_num, "command": "tank_solenoid_disinfect_status", "value": "on" };
  339. } else if (params == '0') {
  340. var data = { "tank_num": "C" + tank_num, "command": "tank_solenoid_disinfect_status", "value": "off" };
  341. } else {
  342. var status = "off";
  343. var check = $("input[name=tank_solenoid_disinfect_status]:checked");
  344. //大於0代表有被選中
  345. if (check.length > 0) {
  346. status = "on";
  347. $("#cmn-toggle-26").prop('checked', false);
  348. if (!confirm("你確定要開啟消毒電磁閥嗎?")) {
  349. return false;
  350. };
  351. } else {
  352. $("#cmn-toggle-26").prop('checked', true);
  353. if (!confirm("你確定要關閉消毒電磁閥嗎?")) {
  354. return false;
  355. };
  356. };
  357. var data = { "tank_num": "C" + tank_num, "command": "tank_solenoid_disinfect_status", "value": status };
  358. }
  359. $.post('/mqtt/{{tid}}', data, function (res) {
  360. console.log('data:', data)
  361. if (res == 'on') {
  362. $("#cmn-toggle-26").prop('checked', true);
  363. } else if (res == 'off') {
  364. $("#cmn-toggle-26").prop('checked', false);
  365. } else {
  366. };
  367. }, 'text')
  368. }
  369. // 桶內 混合槽幫浦
  370. function tankPumpDisinfect(params) {
  371. if (params == '1') {
  372. var data = { "tank_num": "C" + tank_num, "command": "tank_pump_disinfect_status", "value": "on" };
  373. } else if (params == '0') {
  374. var data = { "tank_num": "C" + tank_num, "command": "tank_pump_disinfect_status", "value": "off" };
  375. } else {
  376. var status = "off";
  377. var check = $("input[name=tank_pump_disinfect_status]:checked");
  378. //大於0代表有被選中
  379. if (check.length > 0) {
  380. status = "on";
  381. $("#cmn-toggle-29").prop('checked', false);
  382. if (!confirm("你確定要開啟混合槽幫浦嗎?")) {
  383. return false;
  384. };
  385. } else {
  386. $("#cmn-toggle-29").prop('checked', true);
  387. if (!confirm("你確定要關閉混合槽幫浦嗎?")) {
  388. return false;
  389. };
  390. };
  391. var data = { "tank_num": "C" + tank_num, "command": "tank_pump_disinfect_status", "value": status };
  392. }
  393. $.post('/mqtt/{{tid}}', data, function (res) {
  394. console.log('data:', data)
  395. if (res == 'on') {
  396. $("#cmn-toggle-29").prop('checked', true);
  397. } else if (res == 'off') {
  398. $("#cmn-toggle-29").prop('checked', false);
  399. } else {
  400. };
  401. }, 'text')
  402. }
  403. // 桶內 蝴蝶閥
  404. function tankDiskvalve(params) {
  405. if (params == '1') {
  406. var data = { "tank_num": "C" + tank_num, "command": "tank_diskvalve_status", "value": "on" };
  407. } else if (params == '0') {
  408. var data = { "tank_num": "C" + tank_num, "command": "tank_diskvalve_status", "value": "off" };
  409. } else {
  410. var status = "off";
  411. var check = $("input[name=tank_diskvalve_status]:checked");
  412. //大於0代表有被選中
  413. if (check.length > 0) {
  414. status = "on";
  415. $("#cmn-toggle-32").prop('checked', false);
  416. if (!confirm("你確定要開啟蝴蝶閥嗎?")) {
  417. return false;
  418. };
  419. } else {
  420. $("#cmn-toggle-32").prop('checked', true);
  421. if (!confirm("你確定要關閉蝴蝶閥嗎?")) {
  422. return false;
  423. };
  424. };
  425. var data = { "tank_num": "C" + tank_num, "command": "tank_diskvalve_status", "value": status };
  426. }
  427. $.post('/mqtt/{{tid}}', data, function (res) {
  428. console.log('data:', data)
  429. if (res == 'on') {
  430. $("#cmn-toggle-32").prop('checked', true);
  431. } else if (res == 'off') {
  432. $("#cmn-toggle-32").prop('checked', false);
  433. } else {
  434. };
  435. }, 'text')
  436. }
  437. </script>
  438. <script language="JavaScript">
  439. function changeUpdate() {
  440. clearInterval(WebUpdate_set);
  441. var webupdate_time = $("input[name=webupdate_time]").val()
  442. console.log('webupdate_time' + webupdate_time)
  443. WebUpdate_set = setInterval(function(){WebUpdate(ctn)} , webupdate_time * 1000);
  444. }
  445. // jQuery 更新感測器致動器狀態
  446. function WebUpdate(ctn) {
  447. $.get('/loading/C' + ctn, '', function (res) {
  448. if (res.tank_vacuum == 0) {
  449. $("#cmn-toggle-02").prop('checked', false);
  450. } else if (res.tank_vacuum == 1) {
  451. $("#cmn-toggle-02").prop('checked', true);
  452. }
  453. if (res.tank_threewayvalve_input == 0) {
  454. $("#cmn-toggle-05").prop('checked', false);
  455. } else if (res.tank_threewayvalve_input == 1) {
  456. $("#cmn-toggle-05").prop('checked', true);
  457. }
  458. if (res.tank_solenoid_reclaimed_in == 0) {
  459. $("#cmn-toggle-11").prop('checked', false);
  460. } else if (res.tank_solenoid_reclaimed_in == 1) {
  461. $("#cmn-toggle-11").prop('checked', true);
  462. }
  463. if (res.tank_solenoid_water_in == 0) {
  464. $("#cmn-toggle-14").prop('checked', false);
  465. } else if (res.tank_solenoid_water_in == 1) {
  466. $("#cmn-toggle-14").prop('checked', true);
  467. }
  468. if (res.tank_pump_water_in == 0) {
  469. $("#cmn-toggle-17").prop('checked', false);
  470. } else if (res.tank_pump_water_in == 1) {
  471. $("#cmn-toggle-17").prop('checked', true);
  472. }
  473. if (res.tank_solenoid_water_out == 0) {
  474. $("#cmn-toggle-20").prop('checked', false);
  475. } else if (res.tank_solenoid_water_out == 1) {
  476. $("#cmn-toggle-20").prop('checked', true);
  477. }
  478. if (res.tank_solenoid_reclaimed_out == 0) {
  479. $("#cmn-toggle-23").prop('checked', false);
  480. } else if (res.tank_solenoid_reclaimed_out == 1) {
  481. $("#cmn-toggle-23").prop('checked', true);
  482. }
  483. if (res.tank_solenoid_disinfect == 0) {
  484. $("#cmn-toggle-26").prop('checked', false);
  485. } else if (res.tank_solenoid_disinfect == 1) {
  486. $("#cmn-toggle-26").prop('checked', true);
  487. }
  488. if (res.tank_pump_disinfect == 0) {
  489. $("#cmn-toggle-29").prop('checked', false);
  490. } else if (res.tank_pump_disinfect == 1) {
  491. $("#cmn-toggle-29").prop('checked', true);
  492. }
  493. if (res.tank_diskvalve == 0) {
  494. $("#cmn-toggle-32").prop('checked', false);
  495. } else if (res.tank_diskvalve == 1) {
  496. $("#cmn-toggle-32").prop('checked', true);
  497. }
  498. $("#motor_rpm_data").attr("placeholder", res.tank_motor);
  499. $("#UltraSonic_t_status").text(res.UltraSonic);
  500. $("#MotorEncoder_t_status").text(res.Encoder);
  501. $("#tankTurbidity_t_status").text(res.tankTurbidity);
  502. $("#filterTurbidity_t_status").text(res.filterTurbidity);
  503. // setTimeout(function(){WebUpdate(ctn)}, 10 * 1000);
  504. }, 'json');
  505. }
  506. </script>
  507. </head>
  508. <body>
  509. <div id="wrapper">
  510. <div id="coffee_header">
  511. <!-- 匯入共同使用的 header.html 內容 -->
  512. {% include 'header.html' %}
  513. </div>
  514. <h4>致動器</h4>
  515. <table border="1" class="table-all" cellpadding="3" style="text-align: center;">
  516. <tr>
  517. <td style="color:red;">Valve</td>
  518. <td>真空吸料機</td>
  519. <td>吸料機<br>三通閥</td>
  520. <td>馬達</td>
  521. <td>中水入水<br>電磁閥</td>
  522. <td>清水入水<br>電磁閥</td>
  523. <td>幫浦<br>(清水入水)</td>
  524. <td>排水廢水<br>電磁閥</td>
  525. <td>排水中水<br>電磁閥</td>
  526. <td>消毒<br>電磁閥</td>
  527. <td>混合槽<br>幫浦</td>
  528. <td>蝴蝶閥</td>
  529. </tr>
  530. <tr>
  531. <td>
  532. <span style="color:#C0C0C0;">off</span>
  533. <span style="color:#008CBA;">on</span>
  534. </td>
  535. <td>
  536. <div class="switch_div">
  537. <div>
  538. <input type="checkbox" class="cmn-toggle cmn-toggle-round" id="cmn-toggle-01">
  539. </div>
  540. <div class="text-center">
  541. {% if tank_vacuum == 1 %}
  542. <input type="checkbox" class="cmn-toggle cmn-toggle-round-flat" id="cmn-toggle-02" checked
  543. name="tank_vacuum_status" value="ON" onclick="tankVacuum()">
  544. {% else %}
  545. <input type="checkbox" class="cmn-toggle cmn-toggle-round-flat" id="cmn-toggle-02"
  546. name="tank_vacuum_status" value="OFF" onclick="tankVacuum()">
  547. {% endif %}
  548. <label class="label_ActuatorStatus" for="cmn-toggle-02"></label>
  549. </div>
  550. <div>
  551. <input type="checkbox" class="cmn-toggle cmn-toggle-yes-no" id="cmn-toggle-03">
  552. </div>
  553. </div>
  554. </td>
  555. <td>
  556. <div class="switch_div">
  557. <div>
  558. <input type="checkbox" class="cmn-toggle cmn-toggle-round" id="cmn-toggle-04">
  559. </div>
  560. <div class="text-center">
  561. {% if tank_threewayvalve_input == 1 %}
  562. <input type="checkbox" class="cmn-toggle cmn-toggle-round-flat" id="cmn-toggle-05" checked
  563. name="tank_threewayvalve_input_status" value="ON" onclick="tankThreeWayValveInput()">
  564. {% else %}
  565. <input type="checkbox" class="cmn-toggle cmn-toggle-round-flat" id="cmn-toggle-05"
  566. name="tank_threewayvalve_input_status" value="OFF" onclick="tankThreeWayValveInput()">
  567. {% endif %}
  568. <label class="label_ActuatorStatus" for="cmn-toggle-05"></label>
  569. </div>
  570. <div>
  571. <input type="checkbox" class="cmn-toggle cmn-toggle-yes-no" id="cmn-toggle-06">
  572. </div>
  573. </div>
  574. </td>
  575. <td>
  576. <input type="text" class="input-text" id="motor_rpm_data" placeholder="{{tank_motor}}" value="">RPM
  577. <br>
  578. <span id="motor_rpm_status" style="color:red;"></span>
  579. <input type="button" class="input-button" value="Confirm" name="tank_motor_status" onclick="tankMotor_set()">
  580. </td>
  581. <td>
  582. <div class="switch_div">
  583. <div>
  584. <input type="checkbox" class="cmn-toggle cmn-toggle-round" id="cmn-toggle-10">
  585. </div>
  586. <div class="text-center">
  587. {% if tank_solenoid_reclaimed_in == 1 %}
  588. <input type="checkbox" class="cmn-toggle cmn-toggle-round-flat" id="cmn-toggle-11" checked
  589. name="tank_solenoid_reclaimed_in_status" value="ON" onclick="tankSolenoidReclaimedIn()">
  590. {% else %}
  591. <input type="checkbox" class="cmn-toggle cmn-toggle-round-flat" id="cmn-toggle-11"
  592. name="tank_solenoid_reclaimed_in_status" value="OFF" onclick="tankSolenoidReclaimedIn()">
  593. {% endif %}
  594. <label class="label_ActuatorStatus" for="cmn-toggle-11"></label>
  595. </div>
  596. <div>
  597. <input type="checkbox" class="cmn-toggle cmn-toggle-yes-no" id="cmn-toggle-12">
  598. </div>
  599. </div>
  600. </td>
  601. <td>
  602. <div class="switch_div">
  603. <div>
  604. <input type="checkbox" class="cmn-toggle cmn-toggle-round" id="cmn-toggle-13">
  605. </div>
  606. <div class="text-center">
  607. {% if tank_solenoid_water_in == 1 %}
  608. <input type="checkbox" class="cmn-toggle cmn-toggle-round-flat" id="cmn-toggle-14" checked
  609. name="tank_solenoid_water_in_status" value="ON" onclick="tankSolenoidWaterIn()">
  610. {% else %}
  611. <input type="checkbox" class="cmn-toggle cmn-toggle-round-flat" id="cmn-toggle-14"
  612. name="tank_solenoid_water_in_status" value="OFF" onclick="tankSolenoidWaterIn()">
  613. {% endif %}
  614. <label class="label_ActuatorStatus" for="cmn-toggle-14"></label>
  615. </div>
  616. <div>
  617. <input type="checkbox" class="cmn-toggle cmn-toggle-yes-no" id="cmn-toggle-15">
  618. </div>
  619. </div>
  620. </td>
  621. <td>
  622. <div class="switch_div">
  623. <div>
  624. <input type="checkbox" class="cmn-toggle cmn-toggle-round" id="cmn-toggle-16">
  625. </div>
  626. <div class="text-center">
  627. {% if tank_pump_water_in == 1 %}
  628. <input type="checkbox" class="cmn-toggle cmn-toggle-round-flat" id="cmn-toggle-17" checked
  629. name="tank_pump_water_in_status" value="ON" onclick="tankPumpWaterIn()">
  630. {% else %}
  631. <input type="checkbox" class="cmn-toggle cmn-toggle-round-flat" id="cmn-toggle-17"
  632. name="tank_pump_water_in_status" value="OFF" onclick="tankPumpWaterIn()">
  633. {% endif %}
  634. <label class="label_ActuatorStatus" for="cmn-toggle-17"></label>
  635. </div>
  636. <div>
  637. <input type="checkbox" class="cmn-toggle cmn-toggle-yes-no" id="cmn-toggle-18">
  638. </div>
  639. </div>
  640. </td>
  641. <td>
  642. <div class="switch_div">
  643. <div>
  644. <input type="checkbox" class="cmn-toggle cmn-toggle-round" id="cmn-toggle-19">
  645. </div>
  646. <div class="text-center">
  647. {% if tank_solenoid_water_out == 1 %}
  648. <input type="checkbox" class="cmn-toggle cmn-toggle-round-flat" id="cmn-toggle-20" checked
  649. name="tank_solenoid_water_out_status" value="ON" onclick="tankSolenoidWaterOut()">
  650. {% else %}
  651. <input type="checkbox" class="cmn-toggle cmn-toggle-round-flat" id="cmn-toggle-20"
  652. name="tank_solenoid_water_out_status" value="OFF" onclick="tankSolenoidWaterOut()">
  653. {% endif %}
  654. <label class="label_ActuatorStatus" for="cmn-toggle-20"></label>
  655. </div>
  656. <div>
  657. <input type="checkbox" class="cmn-toggle cmn-toggle-yes-no" id="cmn-toggle-21">
  658. </div>
  659. </div>
  660. </td>
  661. <td>
  662. <div class="switch_div">
  663. <div>
  664. <input type="checkbox" class="cmn-toggle cmn-toggle-round" id="cmn-toggle-22">
  665. </div>
  666. <div class="text-center">
  667. {% if tank_solenoid_reclaimed_out == 1 %}
  668. <input type="checkbox" class="cmn-toggle cmn-toggle-round-flat" id="cmn-toggle-23" checked
  669. name="tank_solenoid_reclaimed_out_status" value="ON" onclick="tankSolenoidReclaimedOut()">
  670. {% else %}
  671. <input type="checkbox" class="cmn-toggle cmn-toggle-round-flat" id="cmn-toggle-23"
  672. name="tank_solenoid_reclaimed_out_status" value="OFF" onclick="tankSolenoidReclaimedOut()">
  673. {% endif %}
  674. <label class="label_ActuatorStatus" for="cmn-toggle-23"></label>
  675. </div>
  676. <div>
  677. <input type="checkbox" class="cmn-toggle cmn-toggle-yes-no" id="cmn-toggle-24">
  678. </div>
  679. </div>
  680. </td>
  681. <td>
  682. <div class="switch_div">
  683. <div>
  684. <input type="checkbox" class="cmn-toggle cmn-toggle-round" id="cmn-toggle-25">
  685. </div>
  686. <div class="text-center">
  687. {% if tank_solenoid_disinfect == 1 %}
  688. <input type="checkbox" class="cmn-toggle cmn-toggle-round-flat" id="cmn-toggle-26" checked
  689. name="tank_solenoid_disinfect_status" value="ON" onclick="tankSolenoidDisinfect()">
  690. {% else %}
  691. <input type="checkbox" class="cmn-toggle cmn-toggle-round-flat" id="cmn-toggle-26"
  692. name="tank_solenoid_disinfect_status" value="OFF" onclick="tankSolenoidDisinfect()">
  693. {% endif %}
  694. <label class="label_ActuatorStatus" for="cmn-toggle-26"></label>
  695. </div>
  696. <div>
  697. <input type="checkbox" class="cmn-toggle cmn-toggle-yes-no" id="cmn-toggle-27">
  698. </div>
  699. </div>
  700. </td>
  701. <td>
  702. <div class="switch_div">
  703. <div>
  704. <input type="checkbox" class="cmn-toggle cmn-toggle-round" id="cmn-toggle-28">
  705. </div>
  706. <div class="text-center">
  707. {% if tank_pump_disinfect == 1 %}
  708. <input type="checkbox" class="cmn-toggle cmn-toggle-round-flat" id="cmn-toggle-29" checked
  709. name="tank_pump_disinfect_status" value="ON" onclick="tankPumpDisinfect()">
  710. {% else %}
  711. <input type="checkbox" class="cmn-toggle cmn-toggle-round-flat" id="cmn-toggle-29"
  712. name="tank_pump_disinfect_status" value="OFF" onclick="tankPumpDisinfect()">
  713. {% endif %}
  714. <label class="label_ActuatorStatus" for="cmn-toggle-29"></label>
  715. </div>
  716. <div>
  717. <input type="checkbox" class="cmn-toggle cmn-toggle-yes-no" id="cmn-toggle-30">
  718. </div>
  719. </div>
  720. </td>
  721. <td>
  722. <div class="switch_div">
  723. <div>
  724. <input type="checkbox" class="cmn-toggle cmn-toggle-round" id="cmn-toggle-31">
  725. </div>
  726. <div class="text-center">
  727. {% if tank_diskvalve == 1 %}
  728. <input type="checkbox" class="cmn-toggle cmn-toggle-round-flat" id="cmn-toggle-32" checked
  729. name="tank_diskvalve_status" value="ON" onclick="tankDiskvalve()">
  730. {% else %}
  731. <input type="checkbox" class="cmn-toggle cmn-toggle-round-flat" id="cmn-toggle-32"
  732. name="tank_diskvalve_status" value="OFF" onclick="tankDiskvalve()">
  733. {% endif %}
  734. <label class="label_ActuatorStatus" for="cmn-toggle-32"></label>
  735. </div>
  736. <div>
  737. <input type="checkbox" class="cmn-toggle cmn-toggle-yes-no" id="cmn-toggle-33">
  738. </div>
  739. </div>
  740. </td>
  741. </tr>
  742. <tr>
  743. <td><span style="color:#008CBA;"><b>ON</b></span></td>
  744. <td><input type="button" class="input-button-on" value="ON" onclick="tankVacuum('1')"></td>
  745. <td><input type="button" class="input-button-on" value="ON" onclick="tankThreeWayValveInput('1')"></td>
  746. <td><input type="button" class="input-button-on" value="20" onclick="tankMotor('20')"></td>
  747. <td><input type="button" class="input-button-on" value="ON" onclick="tankSolenoidReclaimedIn('1')"></td>
  748. <td><input type="button" class="input-button-on" value="ON" onclick="tankSolenoidWaterIn('1')"></td>
  749. <td><input type="button" class="input-button-on" value="ON" onclick="tankPumpWaterIn('1')"></td>
  750. <td><input type="button" class="input-button-on" value="ON" onclick="tankSolenoidWaterOut('1')"></td>
  751. <td><input type="button" class="input-button-on" value="ON" onclick="tankSolenoidReclaimedOut('1')"></td>
  752. <td><input type="button" class="input-button-on" value="ON" onclick="tankSolenoidDisinfect('1')"></td>
  753. <td><input type="button" class="input-button-on" value="ON" onclick="tankPumpDisinfect('1')"></td>
  754. <td><input type="button" class="input-button-on" value="ON" onclick="tankDiskvalve('1')"></td>
  755. </tr>
  756. <tr>
  757. <td><span style="color:#C0C0C0;"><b>OFF</b></span></td>
  758. <td><input type="button" class="input-button-off" value="OFF" onclick="tankVacuum('0')"></td>
  759. <td><input type="button" class="input-button-off" value="OFF" onclick="tankThreeWayValveInput('0')"></td>
  760. <td><input type="button" class="input-button-off" value="0" onclick="tankMotor('0')"></td>
  761. <td><input type="button" class="input-button-off" value="OFF" onclick="tankSolenoidReclaimedIn('0')"></td>
  762. <td><input type="button" class="input-button-off" value="OFF" onclick="tankSolenoidWaterIn('0')"></td>
  763. <td><input type="button" class="input-button-off" value="OFF" onclick="tankPumpWaterIn('0')"></td>
  764. <td><input type="button" class="input-button-off" value="OFF" onclick="tankSolenoidWaterOut('0')"></td>
  765. <td><input type="button" class="input-button-off" value="OFF" onclick="tankSolenoidReclaimedOut('0')"></td>
  766. <td><input type="button" class="input-button-off" value="OFF" onclick="tankSolenoidDisinfect('0')"></td>
  767. <td><input type="button" class="input-button-off" value="OFF" onclick="tankPumpDisinfect('0')"></td>
  768. <td><input type="button" class="input-button-off" value="OFF" onclick="tankDiskvalve('0')"></td>
  769. </tr>
  770. </table>
  771. <br>
  772. <h4>感測器</h4>
  773. <table border="1" class="table-all" cellpadding="5">
  774. <tr>
  775. <td style="background-color:#f3f3f3">生豆高度</td>
  776. <td><span id="UltraSonic_t_status">{{tank_UltraSonic.UltraSonic}}</span> 公分</td>
  777. <td style="background-color:#f3f3f3">桶內濁度計</td>
  778. <td><span id="tankTurbidity_t_status">{{tank_Turbidity.tankTurbidity}}</span> NTU</td>
  779. </tr>
  780. <tr>
  781. <td style="background-color:#f3f3f3">馬達編碼器</td>
  782. <td><span id="MotorEncoder_t_status">{{tank_Encoder.Encoder}}</span> RPM</td>
  783. <td style="background-color:#f3f3f3">過濾器濁度計</td>
  784. <td><span id="filterTurbidity_t_status">{{filter_Turbidity.filterTurbidity}}</span> NYU</td>
  785. </tr>
  786. </table>
  787. <br>
  788. <h4>排程測試</h4>
  789. <table border="1" class="table-all" cellpadding="5">
  790. <tr>
  791. <td>排氣下豆測試</td>
  792. </tr>
  793. <tr>
  794. <td>
  795. 吸料
  796. <input type="text" class="input-text" name="waiting_time_8" value="5">
  797. <br>
  798. 放料
  799. <input type="text" class="input-text" name="waiting_time_9" value="10">
  800. <br>
  801. 循環
  802. <input type="text" class="input-text" name="waiting_loop_3" value="4">
  803. </td>
  804. </tr>
  805. <tr>
  806. <td>
  807. <button type="submit" class="btn btn-primary" onclick="tank_BeanInputAir_testing()">排氣下豆測試</button>
  808. <script>
  809. function tank_BeanInputAir_testing() {
  810. // 循環次數
  811. var loop3 = $("input[name=waiting_loop_3]").val();
  812. console.log('--- 循環 ' + loop3 + ' 次 ---')
  813. for (step = 1; step <= loop3; step++) {
  814. // 真空吸料機 ON
  815. tankVacuum_ON()
  816. console.log('tankVacuum_ON')
  817. // 吸料時間
  818. var time8 = $("input[name=waiting_time_8]").val();
  819. console.log('等待 ' + time8 + ' 秒')
  820. var time = new Date();
  821. while ((new Date() - time) < time8 * 1000) { };
  822. // 真空吸料機 OFF
  823. tankVacuum_OFF()
  824. console.log('tankVacuum_OFF')
  825. // 吸料時間
  826. var time9 = $("input[name=waiting_time_9]").val();
  827. console.log('等待 ' + time9 + ' 秒')
  828. var time = new Date();
  829. while ((new Date() - time) < time9 * 1000) { };
  830. }
  831. }
  832. </script>
  833. </td>
  834. </tr>
  835. </table>
  836. <div id="coffee_footer">
  837. <!-- 匯入共同使用的 footer.html 內容 -->
  838. {% include 'footer.html' %}
  839. </div>
  840. </div>
  841. </body>
  842. </html>