ctrl_FI_Vacuum.html 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503
  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/ferment_function.js"></script>
  20. <script language="JavaScript">
  21. // 指定 秒 刷新網頁一次
  22. var tid = '{{tid}}';
  23. console.log('tid:' + tid)
  24. $(function(){
  25. $("#ctrl_FI_Vacuum_title").text('發酵入料儲豆槽 FI' + tid + ' 真空吸料機')
  26. $("#ferment_input_page").text('發酵入料儲豆槽 FI' + tid + ' 操作介面 ')
  27. $('#ferment_input_page').attr("href", "/ferment_container_input/" + tid)
  28. $("#coffee_title").text('FI' + 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="/ferment" style="float: left;">&nbsp;&nbsp;&nbsp;返回發酵貨櫃首頁</a>
  213. </div>
  214. <div style="text-align: right;">
  215. <a id="ferment_input_page" href="/index_new" style="float: right;">___________________</a>
  216. </div>
  217. <div id="ctrl_FI_Vacuum_title" style="text-align: center; margin-top: 30px; font-size: 24px; margin-bottom: 15px;">
  218. 發酵入料儲豆槽 FI_ 真空吸料機
  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="inputVacuum_ON()"></td>
  244. </tr>
  245. <tr>
  246. <td>關閉 真空吸料機</td>
  247. <td><input type="button" value="OFF" onclick="inputVacuum_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="4">
  254. [入料儲豆槽] 生豆高度:<span id="UltraSonic_t_status">{{UltraSonic}}</span> 公分<br>
  255. </td>
  256. </tr>
  257. <tr>
  258. <td>
  259. 指定高度入料
  260. </td>
  261. <td>
  262. 儲豆槽內生豆入料高度&nbsp;
  263. <input name="testing_BeanIn_Height" type="text" value="0" style="width: 40px;">&nbsp;公分<br>
  264. 吸料時間&nbsp;
  265. <input name="testing_in_vacuum_in" type="text" value="1" style="width: 40px;">&nbsp;秒<br>
  266. 放料時間&nbsp;
  267. <input name="testing_in_vacuum_out" type="text" value="10" style="width: 40px;">&nbsp;秒<br>
  268. <span id="testing_in_vacuum_loop" style="color: #f00;"></span>
  269. </td>
  270. <td>
  271. <button type="submit" class="btn btn-primary" onclick="BeanInput()">指定高度入料</button>
  272. <script>
  273. var BeanIn_Process = 0;
  274. var BeanIn_interval;
  275. function BeanInput() {
  276. // clearInterval(WebUpdate_set);
  277. var testing_BeanIn_Height = $("input[name=testing_BeanIn_Height]").val();
  278. var testing_in_vacuum_in = $("input[name=testing_in_vacuum_in]").val();
  279. var testing_in_vacuum_out = $("input[name=testing_in_vacuum_out]").val();
  280. if (testing_BeanIn_Height != 0) {
  281. console.log('以指定高度 ' + testing_BeanIn_Height + ' 入豆')
  282. var BeanIn_interval = setInterval(BeanInHeight, 5000);
  283. function BeanInHeight(){
  284. if (BeanIn_Process == 1) {
  285. return;
  286. }
  287. BeanIn_Process == 1;
  288. $.ajax({
  289. async:false,
  290. type:"GET",
  291. url:"/ferment_input_UltraSonic_" + tank_num,
  292. dataType:"json",
  293. success:function(response){
  294. var present_Bean_height = response.UltraSonic
  295. $('#UltraSonic_t_status').text(present_Bean_height)
  296. console.log('目前生豆高度: ' + present_Bean_height)
  297. if ( parseInt(present_Bean_height) < parseInt(testing_BeanIn_Height) ) {
  298. if (testing_in_vacuum_in == 1) {
  299. step = (parseInt(testing_BeanIn_Height) - parseInt(present_Bean_height)) * 871.2 / 100
  300. } else if (testing_in_vacuum_in > 1) {
  301. step = (parseInt(testing_BeanIn_Height) - parseInt(present_Bean_height)) * 871.2 / (220 * testing_in_vacuum_in)
  302. } else {
  303. step = '請輸入 1 以上的正整數'
  304. }
  305. if (( 2 < testing_in_vacuum_in && testing_in_vacuum_in <= 3 && step < 1 ) ||
  306. ( 3 < testing_in_vacuum_in && testing_in_vacuum_in <= 7 && step < 2 ) ||
  307. ( 7 < testing_in_vacuum_in && testing_in_vacuum_in <=10 && step < 3 )) {
  308. $('#testing_in_vacuum_loop').text('改以小量吸料時間入料')
  309. // break 適用在 for、while 的迴圈中, 若不是迴圈則使用 return
  310. // return
  311. // aaa inputVacuum_ON()
  312. console.log('inputVacuum_ON')
  313. var time = new Date();
  314. while ((new Date() - time) < 2 * 1000) { };
  315. // aaa inputVacuum_OFF()
  316. console.log('inputVacuum_OFF')
  317. var time = new Date();
  318. while ((new Date() - time) < 2 * 1000) { };
  319. $('#testing_in_vacuum_loop').text('改以小量吸料時間入料')
  320. } else {
  321. $('#testing_in_vacuum_loop').text('預估循環 ' + Math.ceil(step) + ' 次完成入料')
  322. // aaa inputVacuum_ON()
  323. console.log('inputVacuum_ON')
  324. var time = new Date();
  325. while ((new Date() - time) < testing_in_vacuum_in * 1000) { };
  326. // aaa inputVacuum_OFF()
  327. console.log('inputVacuum_OFF')
  328. var time = new Date();
  329. while ((new Date() - time) < testing_in_vacuum_out * 1000) { };
  330. }
  331. } else {
  332. clearInterval(BeanIn_interval)
  333. console.log('生豆已達指定高度!')
  334. $('#testing_in_vacuum_loop').text('入料完成')
  335. }
  336. BeanIn_Process == 0;
  337. },
  338. error:function(thrownError){
  339. console.log('Error: ' + thrownError)
  340. BeanIn_Process = 0;
  341. }
  342. })
  343. };
  344. } else if (testing_BeanIn_Height == 0) {
  345. console.log('請輸入大於 0 的數值')
  346. }
  347. // WebUpdate_set = setInterval(function(){WebUpdate(dtn)} , 10 * 1000);
  348. }
  349. </script>
  350. </td>
  351. </tr>
  352. <tr>
  353. <td>循環入料</td>
  354. <td>
  355. 吸料時間 &nbsp;
  356. <input name="Testing_starttime" value="3" type="text" style="width: 40px;">&nbsp;秒<br>
  357. 放料時間 &nbsp;
  358. <input name="Testing_endtime" value="5" type="text" style="width: 40px;">&nbsp;秒<br>
  359. 循環
  360. <input name="Testing_loop" value="3" type="text" style="width: 40px;">&nbsp;次
  361. </td>
  362. <td>
  363. <button type="submit" class="btn btn-primary" onclick="inputVacuumTest()">循環入料</button><br>
  364. <script>
  365. function inputVacuumTest() {
  366. // clearInterval(WebUpdate_set);
  367. var Testing_starttime = $("input[name=Testing_starttime]").val();
  368. var Testing_endtime = $("input[name=Testing_endtime]").val();
  369. var Testing_loop = $("input[name=Testing_loop]").val();
  370. var step;
  371. for (step = 1; step <= Testing_loop; step++) {
  372. console.log('循環第 ' + step + ' 次');
  373. inputVacuum_ON()
  374. console.log('inputVacuum_ON')
  375. var time = new Date();
  376. while ((new Date() - time) < Testing_starttime * 1000) { }
  377. inputVacuum_OFF()
  378. console.log('inputVacuum_OFF')
  379. var time = new Date();
  380. while ((new Date() - time) < Testing_endtime * 1000) { }
  381. }
  382. // WebUpdate_set = setInterval(function(){WebUpdate(dtn)} , 10 * 1000);
  383. }
  384. </script>
  385. </td>
  386. </tr>
  387. </table>
  388. <br>
  389. <div style="text-align: center;">
  390. 狀態更新時間(秒):
  391. <input name="webupdate_time" type="text" value="5" style="width: 40px;">
  392. <input type="button" value="設定更新時間" onclick="changeUpdate()">
  393. </div>
  394. <script language="JavaScript">
  395. function changeUpdate() {
  396. // clearInterval(WebUpdate_set);
  397. var webupdate_time = $("input[name=webupdate_time]").val()
  398. console.log('webupdate_time' + webupdate_time)
  399. WebUpdate_set = setInterval(function(){WebUpdate(dtn)} , webupdate_time * 1000);
  400. }
  401. // jQuery 更新感測器制動器狀態
  402. function WebUpdate(dtn) {
  403. $.get('/loading/FI' + dtn, '', function (res) {
  404. if (res.input_vacuum == 0) {
  405. $("#cmn-toggle-02").prop('checked', false);
  406. } else if (res.input_vacuum == 1) {
  407. $("#cmn-toggle-02").prop('checked', true);
  408. }
  409. }, 'json');
  410. }
  411. </script>
  412. <br>
  413. <!--
  414. <footer class="footer">
  415. <div style="text-align: center; margin-top: 10px; font-size: 13px; margin-bottom: 10px;">
  416. Copyright © 2021 Gold-in Tech. All Rights Reserved. 金子進科技股份有限公司 版權所有
  417. <a href="mailto:service.gitc@gmail.com" target="_blank">service.gitc@gmail.com</a>
  418. </div>
  419. </footer>
  420. -->
  421. <div id="coffee_footer">
  422. <!-- 匯入共同使用的 footer.html 內容 -->
  423. {% include 'footer.html' %}
  424. </div>
  425. </div>
  426. </body>
  427. </html>