ctrl_DO_Vacuum.html 20 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505
  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="60" /> 每 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. <!-- Rita 乾燥貨櫃 - 入料、桶槽、出料制動器 function-->
  19. <script type="text/javascript" src="../static/js/dry_function.js"></script>
  20. <script language="JavaScript">
  21. // 指定 秒 刷新網頁一次
  22. var tid = '{{tid}}';
  23. console.log('tid:' + tid)
  24. $(function(){
  25. $("#ctrl_DO_Vacuum_title").text('乾燥出料儲豆槽 DO' + tid + ' 真空吸料機')
  26. $("#dry_output_page").text('乾燥出料儲豆槽 DO' + tid + ' 操作介面 ')
  27. $('#dry_output_page').attr("href", "/dry_container_input/" + tid)
  28. $("#coffee_title").text('DO' + tid + ' 乾燥出料儲豆槽_真空吸料機');
  29. });
  30. //WebUpdate_set = setInterval(function(){WebUpdate(dtn)} , 10 * 1000)
  31. </script>
  32. <style>
  33. .footer{
  34. position: absolute;
  35. width: 100%;
  36. background-color: #eee;
  37. text-align: center;
  38. }
  39. body {
  40. margin: 0;
  41. }
  42. .navbar-dark .navbar-nav .nav-link {
  43. color: white;
  44. cursor: pointer;
  45. text-decoration: none;
  46. width: 110px;
  47. height: 46px;
  48. }
  49. .nav-top {
  50. line-height: 40px;
  51. background-color: #C4C4C4;
  52. }
  53. .website_title {
  54. font-family: Roboto;
  55. font-style: normal;
  56. font-weight: normal;
  57. font-size: 30px;
  58. color: #000000;
  59. }
  60. .navbar-nav>li {
  61. float: none;
  62. display: inline-block;
  63. width: 100px;
  64. margin: 0 auto;
  65. text-align: center;
  66. }
  67. .navbar-nav>li a {
  68. font-size: 20px;
  69. }
  70. .main-page {
  71. margin-top: 200px;
  72. }
  73. .page-title {
  74. font-family: Roboto;
  75. font-style: normal;
  76. font-weight: bold;
  77. font-size: 36px;
  78. }
  79. .flex {
  80. display: flex;
  81. flex-direction: row;
  82. flex-wrap: wrap;
  83. justify-content: center;
  84. }
  85. .set-link {
  86. display: inline-block;
  87. width: 350px;
  88. height: 100px;
  89. line-height: 100px;
  90. background: #008CBA;
  91. border: 1px solid #CFCFCF;
  92. box-sizing: border-box;
  93. color: #FFFFFF;
  94. border-radius: 10px;
  95. font-size: 36px;
  96. }
  97. .cmn-toggle {
  98. position: absolute;
  99. margin-left: 0px;
  100. visibility: hidden;
  101. }
  102. .cmn-toggle+label {
  103. display: block;
  104. position: relative;
  105. cursor: pointer;
  106. outline: none;
  107. user-select: none;
  108. }
  109. input.cmn-toggle-round-flat+label {
  110. padding: 2px;
  111. width: 60px;
  112. height: 30px;
  113. background-color: #C0C0C0;
  114. border-radius: 60px;
  115. transition: background 0.4s;
  116. }
  117. input.cmn-toggle-round-flat+label:before,
  118. input.cmn-toggle-round-flat+label:after {
  119. display: block;
  120. position: absolute;
  121. content: "";
  122. }
  123. input.cmn-toggle-round-flat+label:before {
  124. top: 2px;
  125. left: 2px;
  126. bottom: 2px;
  127. right: 2px;
  128. background-color: #fff;
  129. border-radius: 60px;
  130. transition: background 0.4s;
  131. }
  132. input.cmn-toggle-round-flat+label:after {
  133. top: 4px;
  134. left: 4px;
  135. bottom: 4px;
  136. width: 24px;
  137. background-color: #dddddd;
  138. border-radius: 52px;
  139. transition: margin 0.4s, background 0.4s;
  140. }
  141. input.cmn-toggle-round-flat:checked+label {
  142. background-color: #C0C0C0;
  143. }
  144. input.cmn-toggle-round-flat:checked+label:after {
  145. margin-left: 27px;
  146. background-color: #008CBA;
  147. }
  148. @media(max-width:373px) {
  149. .card {
  150. margin-right: 0px;
  151. }
  152. .set-link {
  153. width: 250px;
  154. }
  155. }
  156. @media(max-width:577px) {}
  157. @media(min-width:576px) {}
  158. @media(min-width:768px) {
  159. .navbar-nav>li {
  160. margin-left: 0px;
  161. }
  162. .navbar-nav .li-block {
  163. display: none;
  164. }
  165. }
  166. @media(min-width:991px) {
  167. .navbar-nav>li {
  168. margin-left: 20px;
  169. }
  170. .navbar-nav .li-block {
  171. display: none;
  172. }
  173. }
  174. @media(min-width:1200px) {
  175. .navbar-nav>li {
  176. margin-left: 50px;
  177. }
  178. .navbar-nav .li-block {
  179. display: inline-block;
  180. width: 100px;
  181. }
  182. }
  183. @media(min-width:1400px) {
  184. .navbar-nav .li-block {
  185. display: inline-block;
  186. width: 200px;
  187. }
  188. }
  189. @media(min-width:1689px) {
  190. .navbar-nav>li {
  191. margin-left: 50px;
  192. }
  193. .navbar-nav .li-block {
  194. display: inline-block;
  195. width: 500px;
  196. }
  197. }
  198. </style>
  199. <script>
  200. // Rita 制動器運作
  201. var tank_num = '{{tid}}';
  202. </script>
  203. </head>
  204. <body>
  205. <div id="wrapper">
  206. <div id="coffee_header">
  207. <!-- 匯入共同使用的 header.html 內容 -->
  208. {% include 'header.html' %}
  209. </div>
  210. <!--
  211. <div style="text-align: left;">
  212. <a href="/dry" style="float: left;">&nbsp;&nbsp;&nbsp;返回乾燥貨櫃首頁</a>
  213. </div>
  214. <div style="text-align: right;">
  215. <a id="dry_output_page" href="/index_new" style="float: right;">___________________</a>
  216. </div>
  217. <div id="ctrl_DO_Vacuum_title" style="text-align: center; margin-top: 30px; font-size: 24px; margin-bottom: 15px;">
  218. 乾燥出料儲豆槽 DO_ 真空吸料機
  219. </div>
  220. -->
  221. <table border="1" style="margin: auto; font-size:18px; border:2px #cccccc solid;" width=700px cellpadding="8">
  222. <tr>
  223. <!--
  224. <td rowspan="3">
  225. 手動控制
  226. </td>
  227. -->
  228. <td>
  229. 真空吸料機 狀態
  230. </td>
  231. <td>
  232. {% if tank_vacuum == 1 %}
  233. <span style="color:#008CBA; font-size:18px;"><strong>ON</strong></span>
  234. {% elif tank_vacuum == 0 %}
  235. <span style="color:#acacac; font-size:18px;"><strong>OFF</strong></span>
  236. {% else %}
  237. <span style="color: #fc7373;; font-size:18px;">ERROR</span>
  238. {% endif %}
  239. </td>
  240. </tr>
  241. <tr>
  242. <td>開啟 真空吸料機</td>
  243. <td><input type="button" value="ON" onclick="outputVacuum_ON()"></td>
  244. </tr>
  245. <tr>
  246. <td>關閉 真空吸料機</td>
  247. <td><input type="button" value="OFF" onclick="outputVacuum_OFF()"></td>
  248. </tr>
  249. </table>
  250. <br>
  251. <table border="1" style="margin: auto; font-size:18px; border:2px #cccccc solid;" width=700px cellpadding="8">
  252. <tr>
  253. <td colspan="3">
  254. [出料儲豆槽] 生豆高度:<span id="UltraSonic_t_status">{{UltraSonic}}</span> 公分<br>
  255. </td>
  256. </tr>
  257. <tr>
  258. <!--
  259. <td rowspan="2">
  260. 排程控制
  261. </td>
  262. -->
  263. <td>
  264. 指定高度入料
  265. </td>
  266. <td>
  267. 儲豆槽內生豆入料高度&nbsp;
  268. <input name="testing_BeanIn_Height" type="text" value="0" style="width: 40px;">&nbsp;公分<br>
  269. 吸料時間&nbsp;
  270. <input name="testing_in_vacuum_in" type="text" value="1" style="width: 40px;">&nbsp;秒<br>
  271. 放料時間&nbsp;
  272. <input name="testing_in_vacuum_out" type="text" value="10" style="width: 40px;">&nbsp;秒<br>
  273. <span id="testing_in_vacuum_loop" style="color: #f00;"></span>
  274. </td>
  275. <td>
  276. <button type="submit" class="btn btn-primary" onclick="BeanInput()">指定高度入料</button>
  277. <script>
  278. var BeanIn_Process = 0;
  279. var BeanIn_interval;
  280. function BeanInput() {
  281. // clearInterval(WebUpdate_set);
  282. var testing_BeanIn_Height = $("input[name=testing_BeanIn_Height]").val();
  283. var testing_in_vacuum_in = $("input[name=testing_in_vacuum_in]").val();
  284. var testing_in_vacuum_out = $("input[name=testing_in_vacuum_out]").val();
  285. if (testing_BeanIn_Height != 0) {
  286. console.log('以指定高度 ' + testing_BeanIn_Height + ' 入豆')
  287. var BeanIn_interval = setInterval(BeanInHeight, 5000);
  288. function BeanInHeight(){
  289. if (BeanIn_Process == 1) {
  290. return;
  291. }
  292. BeanIn_Process == 1;
  293. $.ajax({
  294. async:false,
  295. type:"GET",
  296. url:"/dry_output_UltraSonic_" + tank_num,
  297. dataType:"json",
  298. success:function(response){
  299. var present_Bean_height = response.UltraSonic
  300. $('#UltraSonic_t_status').text(present_Bean_height)
  301. console.log('目前生豆高度: ' + present_Bean_height)
  302. if ( parseInt(present_Bean_height) < parseInt(testing_BeanIn_Height) ) {
  303. if (testing_in_vacuum_in == 1) {
  304. step = (parseInt(testing_BeanIn_Height) - parseInt(present_Bean_height)) * 871.2 / 100
  305. } else if (testing_in_vacuum_in > 1) {
  306. step = (parseInt(testing_BeanIn_Height) - parseInt(present_Bean_height)) * 871.2 / (220 * testing_in_vacuum_in)
  307. } else {
  308. step = '請輸入 1 以上的正整數'
  309. }
  310. if (( 2 < testing_in_vacuum_in && testing_in_vacuum_in <= 3 && step < 1 ) ||
  311. ( 3 < testing_in_vacuum_in && testing_in_vacuum_in <= 7 && step < 2 ) ||
  312. ( 7 < testing_in_vacuum_in && testing_in_vacuum_in <=10 && step < 3 )) {
  313. $('#testing_in_vacuum_loop').text('改以小量吸料時間入料')
  314. // break 適用在 for、while 的迴圈中, 若不是迴圈則使用 return
  315. // return
  316. // aaa tankVacuum_ON()
  317. console.log('tankVacuum_ON')
  318. var time = new Date();
  319. while ((new Date() - time) < 2 * 1000) { };
  320. // aaa tankVacuum_OFF()
  321. console.log('tankVacuum_OFF')
  322. var time = new Date();
  323. while ((new Date() - time) < 2 * 1000) { };
  324. $('#testing_in_vacuum_loop').text('改以小量吸料時間入料')
  325. } else {
  326. $('#testing_in_vacuum_loop').text('預估循環 ' + Math.ceil(step) + ' 次完成入料')
  327. // aaa outputVacuum_ON()
  328. console.log('outputVacuum_ON')
  329. var time = new Date();
  330. while ((new Date() - time) < testing_in_vacuum_in * 1000) { };
  331. // aaa outputVacuum_OFF()
  332. console.log('outputVacuum_OFF')
  333. var time = new Date();
  334. while ((new Date() - time) < testing_in_vacuum_out * 1000) { };
  335. }
  336. } else {
  337. clearInterval(BeanIn_interval)
  338. console.log('生豆已達指定高度!')
  339. $('#testing_in_vacuum_loop').text('入料完成')
  340. }
  341. BeanIn_Process == 0;
  342. },
  343. error:function(thrownError){
  344. console.log('Error: ' + thrownError)
  345. BeanIn_Process = 0;
  346. }
  347. })
  348. };
  349. } else if (testing_BeanIn_Height == 0) {
  350. console.log('請輸入大於 0 的數值')
  351. }
  352. // WebUpdate_set = setInterval(function(){WebUpdate(dtn)} , 10 * 1000);
  353. }
  354. </script>
  355. </td>
  356. </tr>
  357. <tr>
  358. <td>循環入料</td>
  359. <td>
  360. 吸料時間 &nbsp;
  361. <input name="Testing_starttime" value="3" type="text" style="width: 40px;">&nbsp;秒<br>
  362. 放料時間 &nbsp;
  363. <input name="Testing_endtime" value="5" type="text" style="width: 40px;">&nbsp;秒<br>
  364. 循環
  365. <input name="Testing_loop" value="3" type="text" style="width: 40px;">&nbsp;次
  366. </td>
  367. <td>
  368. <button type="submit" class="btn btn-primary" onclick="inputVacuumTest()">循環入料</button><br>
  369. <script>
  370. function inputVacuumTest() {
  371. // clearInterval(WebUpdate_set);
  372. var Testing_starttime = $("input[name=Testing_starttime]").val();
  373. var Testing_endtime = $("input[name=Testing_endtime]").val();
  374. var Testing_loop = $("input[name=Testing_loop]").val();
  375. var step;
  376. for (step = 1; step <= Testing_loop; step++) {
  377. console.log('循環第 ' + step + ' 次');
  378. outputVacuum_ON()
  379. console.log('outputVacuum_ON')
  380. var time = new Date();
  381. while ((new Date() - time) < Testing_starttime * 1000) { }
  382. outputVacuum_OFF()
  383. console.log('outputVacuum_OFF')
  384. var time = new Date();
  385. while ((new Date() - time) < Testing_endtime * 1000) { }
  386. }
  387. // WebUpdate_set = setInterval(function(){WebUpdate(dtn)} , 10 * 1000);
  388. }
  389. </script>
  390. </td>
  391. </tr>
  392. </table>
  393. <br>
  394. <div style="text-align: center;">
  395. 狀態更新時間(秒):
  396. <input name="webupdate_time" type="text" value="5" style="width: 40px;">
  397. <input type="button" value="設定更新時間" onclick="changeUpdate()">
  398. </div>
  399. <script language="JavaScript">
  400. function changeUpdate() {
  401. // clearInterval(WebUpdate_set);
  402. var webupdate_time = $("input[name=webupdate_time]").val()
  403. console.log('webupdate_time' + webupdate_time)
  404. WebUpdate_set = setInterval(function(){WebUpdate(dtn)} , webupdate_time * 1000);
  405. }
  406. // jQuery 更新感測器制動器狀態
  407. function WebUpdate(dtn) {
  408. $.get('/loading/DI' + dtn, '', function (res) {
  409. if (res.input_vacuum == 0) {
  410. $("#cmn-toggle-02").prop('checked', false);
  411. } else if (res.input_vacuum == 1) {
  412. $("#cmn-toggle-02").prop('checked', true);
  413. }
  414. }, 'json');
  415. }
  416. </script>
  417. <br>
  418. <!--
  419. <footer class="footer">
  420. <div style="text-align: center; margin-top: 10px; font-size: 13px; margin-bottom: 10px;">
  421. Copyright © 2021 Gold-in Tech. All Rights Reserved. 金子進科技股份有限公司 版權所有
  422. <a href="mailto:service.gitc@gmail.com" target="_blank">service.gitc@gmail.com</a>
  423. </div>
  424. </footer>
  425. -->
  426. <div id="coffee_footer">
  427. <!-- 匯入共同使用的 footer.html 內容 -->
  428. {% include 'footer.html' %}
  429. </div>
  430. </div>
  431. </body>
  432. </html>