colorselect_container_tank.html 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324
  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. <!-- 新 Bootstrap4 核心 CSS 文件 -->
  8. <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.1.0/css/bootstrap.min.css">
  9. <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
  10. <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
  11. <!-- popper.min.js 用于弹窗、提示、下拉菜单 -->
  12. <script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script>
  13. <!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
  14. <script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
  15. <!--可用來建立使用者小圖示-->
  16. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  17. <script language="JavaScript">
  18. var ptid = '{{tid}}';
  19. $(document).ready(function(){
  20. $("#coffee_title_pc").text('S' + ptid + ' 色選機操作介面');
  21. $("#coffee_title_phone").text('S' + ptid + ' 操作介面');
  22. });
  23. var WebUpdate_set = setInterval(function(){WebUpdate(ptid)} , 10 * 1000);
  24. </script>
  25. <script>
  26. // 清洗浮選 致動器開關
  27. var tank_num = '{{tid}}';
  28. // 桶內 真空吸料機
  29. function tankVacuum(params) {
  30. if (params == '1') {
  31. var data = { "tank_num": "S" + tank_num, "command": "tank_vacuum_status", "value": "on" };
  32. } else if (params == '0') {
  33. var data = { "tank_num": "S" + tank_num, "command": "tank_vacuum_status", "value": "off" };
  34. } else {
  35. var status = "off";
  36. var check = $("input[name=tank_vacuum_status]:checked");
  37. console.log('check:', check);
  38. //大於0代表有被選中
  39. if (check.length > 0) {
  40. status = "on";
  41. $("#cmn-toggle-65").prop('checked', false);
  42. if (!confirm("你確定要開啟真空吸料機嗎?")) {
  43. return false;
  44. };
  45. } else {
  46. $("#cmn-toggle-65").prop('checked', true);
  47. if (!confirm("你確定要關閉真空吸料機嗎?")) {
  48. return false;
  49. };
  50. };
  51. var data = { "tank_num": "S" + tank_num, "command": "tank_vacuum_status", "value": status };
  52. }
  53. $.post('/mqtt/{{tid}}', data, function (res) {
  54. console.log('data:', data)
  55. if (res == 'on') {
  56. $("#cmn-toggle-35").prop('checked', true);
  57. } else if (res == 'off') {
  58. $("#cmn-toggle-35").prop('checked', false);
  59. } else {
  60. };
  61. }, 'text')
  62. }
  63. // 馬達
  64. function tankMotor_set() {
  65. var motor_data = $("#motor_rpm_data").val();
  66. console.log("motor_data: " + motor_data)
  67. if (motor_data == '') {
  68. //$("#cmn-toggle-20").prop('checked', false);
  69. alert("請先輸入要運轉的值!");
  70. return false;
  71. } else if (motor_data == 0) {
  72. alert("轉速 0 為關閉馬達");
  73. } else if (Number(motor_data) < -50 || Number(motor_data) > 50 || !Number(motor_data)) {
  74. //
  75. //$("#cmn-toggle-20").prop('checked', false);
  76. alert("您輸入的值已超過範圍,請重新輸入!" + !Number(motor_data));
  77. return false;
  78. };
  79. var value = "off";
  80. //var check = $("input[name=peeling-machine-on]:checked");
  81. if (motor_data != 0) {
  82. value = motor_data;
  83. //$("#cmn-toggle-20").prop('checked', false);
  84. if (!confirm("你確定要開啟攪拌馬達,運轉速度為 " + motor_data + " RPM 嗎?")) {
  85. return false;
  86. };
  87. } else {
  88. //$("#cmn-toggle-20").prop('checked', true);
  89. if (!confirm("你確定要關閉攪拌馬達嗎?")) {
  90. return false;
  91. };
  92. };
  93. var data = { "tank_num": "S" + tank_num, "command": "tank_motor_status", "value": motor_data };
  94. $.post('/mqtt/{{tid}}', data, function (res) {
  95. console.log('data:', data)
  96. if (res == 'on') {
  97. //$("#cmn-toggle-14").prop('checked', true); // prop 設置元素屬型與元素值, 設定 checked 屬性為 true
  98. setTimeout("alert('攪拌馬達_開啟成功!')", 500); // 設定時間執行函式 delay(500), 只執行一次
  99. var timer = setInterval(Rotate, 60000); // 啟動後會在 60000 毫秒(更新時間一分鐘)內不斷執行 (原因須配合更新時間?)
  100. } else if (res == 'off') {
  101. //$("#cmn-toggle-14").prop('checked', false);
  102. setTimeout("alert('攪拌馬達_關閉成功!')", 500);
  103. clearInterval(timer); // 取消 timer 的不斷執行
  104. $("#motor_rpm_status").text(''); // 設置 #motor_rpm_status 的文字為空, #井字號
  105. } else {
  106. alert(res);
  107. };
  108. }, 'text')
  109. };
  110. function tankMotor(params) {
  111. var data = { "tank_num": "S" + tank_num, "command": "tank_motor_status", "value": params };
  112. $.post('/mqtt/{{tid}}', data, function (res) {
  113. console.log('data:', data)
  114. if (res == 'on') {
  115. var timer = setInterval(Rotate, 60000);
  116. } else if (res == 'off') {
  117. clearInterval(timer);
  118. $("#motor_rpm_status").text('');
  119. } else {
  120. };
  121. }, 'text')
  122. };
  123. function Rotate() {
  124. $.get('/peel', '', function (res) {
  125. //console.log(res.peeling);
  126. $("#motor_rpm_status").text(res.peeling + ' rpm(每1分鐘更新一次)');
  127. }, 'json');
  128. setTimeout(function () { location.reload(); }, 500);
  129. };
  130. // 馬達 反轉
  131. function tankMotor_Reverse() {
  132. $("#input").attr('placeholder');
  133. var tankMotor_now = ($('#motor_rpm_data').attr('placeholder'))*-1
  134. console.log('tankMotor_now: ' + tankMotor_now)
  135. tankMotor(String(tankMotor_now))
  136. setTimeout(function () { location.reload(); }, 3*1000);
  137. }
  138. // 噴嘴
  139. function tankNozzle(params) {
  140. if (params == '1') {
  141. var data = { "tank_num": "S" + tank_num, "command": "tank_nozzle_status", "value": "on" };
  142. } else if (params == '0') {
  143. var data = { "tank_num": "S" + tank_num, "command": "tank_nozzle_status", "value": "off" };
  144. } else {
  145. var status = "off";
  146. var check = $("input[name=tank_nozzle_status]:checked");
  147. //大於0代表有被選中
  148. if (check.length > 0) {
  149. status = "on";
  150. $("#cmn-toggle-38").prop('checked', false);
  151. if (!confirm("你確定要開啟噴嘴嗎?")) {
  152. return false;
  153. };
  154. } else {
  155. $("#cmn-toggle-38").prop('checked', true);
  156. if (!confirm("你確定要關閉噴嘴嗎?")) {
  157. return false;
  158. };
  159. };
  160. var data = { "tank_num": "S" + tank_num, "command": "tank_nozzle_status", "value": status };
  161. }
  162. $.post('/mqtt/{{tid}}', data, function (res) {
  163. console.log('data:', data)
  164. if (res == 'on') {
  165. $("#cmn-toggle-38").prop('checked', true);
  166. } else if (res == 'off') {
  167. $("#cmn-toggle-38").prop('checked', false);
  168. } else {
  169. };
  170. }, 'text')
  171. }
  172. </script>
  173. <script language="JavaScript">
  174. function changeUpdate() {
  175. clearInterval(WebUpdate_set);
  176. var webupdate_time = $("input[name=webupdate_time]").val()
  177. console.log('webupdate_time' + webupdate_time)
  178. WebUpdate_set = setInterval(function(){WebUpdate(ptid)} , webupdate_time * 1000);
  179. }
  180. </script>
  181. </head>
  182. <body>
  183. <div id="wrapper">
  184. <div id="coffee_header">
  185. <!-- 匯入共同使用的 header.html 內容 -->
  186. {% include 'header.html' %}
  187. </div>
  188. <h4>致動器</h4>
  189. <table border="1" class="table-all" cellpadding="3" style="text-align: center;">
  190. <tr>
  191. <td style="color:red;">Valve</td>
  192. <td>真空吸料機</td>
  193. <td>馬達</td>
  194. <td>噴嘴</td>
  195. </tr>
  196. <tr>
  197. <td>
  198. <span style="color:#C0C0C0;">off</span>
  199. <span style="color:#008CBA;">on</span>
  200. </td>
  201. <td>
  202. <div class="switch_div">
  203. <div class="switch">
  204. <input type="checkbox" class="cmn-toggle cmn-toggle-round" id="cmn-toggle-34">
  205. </div>
  206. <div class="switch text-center">
  207. {% if tank_vacuum== 1 %}
  208. <input type="checkbox" class="cmn-toggle cmn-toggle-round-flat" id="cmn-toggle-35" checked
  209. name="tank_vacuum_status" value="ON" onclick="tankVacuum()">
  210. {% else %}
  211. <input type="checkbox" class="cmn-toggle cmn-toggle-round-flat" id="cmn-toggle-35"
  212. name="tank_vacuum_status" value="OFF" onclick="tankVacuum()">
  213. {% endif %}
  214. <label class="label_ActuatorStatus" for="cmn-toggle-35"></label>
  215. </div>
  216. <div class="switch">
  217. <input type="checkbox" class="cmn-toggle cmn-toggle-yes-no" id="cmn-toggle-36">
  218. </div>
  219. </div>
  220. </td>
  221. <td>
  222. <input type="text" class="input-text" id="motor_rpm_data" placeholder="{{tank_motor}}" value="">RPM<br>
  223. <input type="button" class="input-button" value="Confirm" name="tank_motor_status" onclick="tankMotor_set()">
  224. </td>
  225. <td>
  226. <div class="switch_div">
  227. <div class="switch">
  228. <input type="checkbox" class="cmn-toggle cmn-toggle-round" id="cmn-toggle-37">
  229. </div>
  230. <div class="switch text-center">
  231. {% if tank_nozzle == 1 %}
  232. <input type="checkbox" class="cmn-toggle cmn-toggle-round-flat" id="cmn-toggle-38" checked
  233. name="tank_nozzle_status" value="ON" onclick="tankNozzle()">
  234. {% else %}
  235. <input type="checkbox" class="cmn-toggle cmn-toggle-round-flat" id="cmn-toggle-38"
  236. name="tank_nozzle_status" value="OFF" onclick="tankNozzle()">
  237. {% endif %}
  238. <label class="label_ActuatorStatus" for="cmn-toggle-38"></label>
  239. </div>
  240. <div class="switch">
  241. <input type="checkbox" class="cmn-toggle cmn-toggle-yes-no" id="cmn-toggle-39">
  242. </div>
  243. </div>
  244. </td>
  245. </tr>
  246. <tr>
  247. <td><span style="color:#008CBA;"><b>ON</b></span></td>
  248. <td><input type="button" class="input-button-on" value="ON" onclick="tankVacuum('1')"></td>
  249. <td>
  250. <input type="button" class="input-button-on" value="20" onclick="tankMotor('20')">
  251. <input type="button" class="input-button-on" value="Rev." onclick="tankMotor_Reverse()">
  252. </td>
  253. <td><input type="button" class="input-button-on" value="ON" onclick="tankNozzle('1')"></td>
  254. </tr>
  255. <tr>
  256. <td><span style="color:#C0C0C0;"><b>OFF</b></span></td>
  257. <td><input type="button" class="input-button-off" value="OFF" onclick="tankVacuum('0')"></td>
  258. <td><input type="button" class="input-button-off" value="0" onclick="tankMotor('0')"></td>
  259. <td><input type="button" class="input-button-off" value="OFF" onclick="tankNozzle('0')"></td>
  260. </tr>
  261. </table>
  262. <br>
  263. <h4>感測器</h4>
  264. <table border="1" class="table-all" cellpadding="3">
  265. <tr>
  266. <td style="background-color:#f3f3f3">生豆高度</td>
  267. <td><span id="UltraSonic_t_status">{{tank_UltraSonic.UltraSonic}}</span> 公分</td>
  268. <td style="background-color:#f3f3f3">顏色感測器</td>
  269. <td><span id="Color_t_status">{{tank_color.color}}</span> (單位)</td>
  270. </tr>
  271. </table>
  272. <div id="coffee_footer">
  273. <!-- 匯入共同使用的 footer.html 內容 -->
  274. {% include 'footer.html' %}
  275. </div>
  276. </div>
  277. </body>
  278. <script>
  279. // jQuery 更新感測器致動器狀態
  280. function WebUpdate(ptid) {
  281. $.get('/loading/S' + ptid, '', function (res) {
  282. if (res.tank_vacuum == 0) {
  283. $("#cmn-toggle-35").prop('checked', false);
  284. } else if (res.tank_vacuum == 1) {
  285. $("#cmn-toggle-35").prop('checked', true);
  286. }
  287. if (res.tank_nozzle == 0) {
  288. $("#cmn-toggle-38").prop('checked', false);
  289. } else if (res.tank_nozzle == 1) {
  290. $("#cmn-toggle-38").prop('checked', true);
  291. }
  292. $("#motor_rpm_data").attr("placeholder", res.tank_motor);
  293. $("#UltraSonic_t_status").text(res.UltraSonic);
  294. $("#Color_t_status").text(res.color);
  295. }, 'json');
  296. }
  297. </script>
  298. </html>