dry.html 50 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924
  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. <script src="../static/js/sign_in.js"></script>
  17. <link rel="stylesheet" href="../static/css/sign_in.css">
  18. -->
  19. <style>
  20. /* 各桶槽狀態大小的共同 CSS */
  21. .div_DryTank_position {
  22. text-align: center;
  23. font-weight: bold;
  24. border: 0px aquamarine solid;
  25. }
  26. .td-clickable:hover {
  27. /* background-color: rgb(238, 236, 236); */
  28. background-color: lavender;
  29. transition-duration: 0.5s;
  30. }
  31. /* 桶槽狀態顯示的顏色條 */
  32. .div_DryTank_Status {
  33. width: 140px;
  34. height: 20px;
  35. border-style: solid;
  36. border-color: whitesmoke;
  37. background-color: black;
  38. }
  39. .footer{
  40. position: absolute;
  41. bottom: 0px;
  42. width: 100%;
  43. background-color: #eee;
  44. text-align: center;
  45. }
  46. /* 致動器狀態的圈圈 */
  47. .actuator_status {
  48. width: 18px;
  49. height: 18px;
  50. background-color:black;
  51. border-radius: 50%;
  52. }
  53. /* 狀態外框的 CSS */
  54. .table_css {
  55. border: 0px lightsteelblue solid;
  56. margin-right: auto;
  57. margin-left: auto;
  58. text-align: center;
  59. margin-top: 5px;
  60. width: 80%;
  61. }
  62. </style>
  63. <script language="JavaScript">
  64. // 指定 10秒 刷新網頁一次
  65. var WebRestart
  66. // WebRestart = setTimeout(function () { location.reload() }, 10000);
  67. var status = '{{status}}';
  68. $(document).ready(function(){
  69. $("#coffee_title_pc").text("乾燥貨櫃");
  70. $("#coffee_title_phone").text("乾燥貨櫃");
  71. loading_D_status();
  72. });
  73. function loading_D_status(){
  74. $.get('/dry_status_update', '', function (res) {
  75. dry_tank_status = [res.D1, res.D2, res.D3, res.D4, res.D5, res.D6,
  76. res.D7, res.D8, res.D9, res.D10, res.D11, res.D12 ]
  77. for (let i=0; i<dry_tank_status.length; i++) {
  78. if (dry_tank_status[i] == 'D_InputtingBean') {
  79. $("#D"+parseInt(i+1)+"_bar").css("background-color", "MediumSeaGreen")
  80. $("#D"+parseInt(i+1)+"_status").text("D" + parseInt(i+1) + " 入豆中")
  81. } else if (dry_tank_status[i] == 'D_InputtingBean_Pause') {
  82. $("#D"+parseInt(i+1)+"_bar").css("background-color", "MediumSeaGreen")
  83. $("#D"+parseInt(i+1)+"_status").text("D" + parseInt(i+1) + " 入豆暫停")
  84. } else if (dry_tank_status[i] == 'D_InputtingBean_Finish') {
  85. $("#D"+parseInt(i+1)+"_bar").css("background-color", "MediumSeaGreen")
  86. $("#D"+parseInt(i+1)+"_status").text("D" + parseInt(i+1) + " 入豆完成")
  87. } else if (dry_tank_status[i] == 'D_Waiting') {
  88. $("#D"+parseInt(i+1)+"_bar").css("background-color", "lightgray")
  89. $("#D"+parseInt(i+1)+"_status").text("D" + parseInt(i+1) + " 空桶等待")
  90. } else if (dry_tank_status[i] == 'D_Cleaning') {
  91. $("#D"+parseInt(i+1)+"_bar").css("background-color", "plum")
  92. $("#D"+parseInt(i+1)+"_status").text("D" + parseInt(i+1) + " 清洗中")
  93. } else if (dry_tank_status[i] == 'D_Drying') {
  94. $("#D"+parseInt(i+1)+"_bar").css("background-color", "MediumSeaGreen")
  95. $("#D"+parseInt(i+1)+"_status").text("D" + parseInt(i+1) + " 乾燥中")
  96. } else if (dry_tank_status[i] == 'D_OutputtingBean') {
  97. $("#D"+parseInt(i+1)+"_bar").css("background-color", "MediumSeaGreen")
  98. $("#D"+parseInt(i+1)+"_status").text("D" + parseInt(i+1) + " 可出豆")
  99. } else if (dry_tank_status[i] == 'D_Warning') {
  100. $("#D"+parseInt(i+1)+"_status").text("D" + parseInt(i+1) + " 發生錯誤")
  101. $("#D"+parseInt(i+1)+"_status").css("color", "crimson")
  102. $("#D"+parseInt(i+1)+"_bar").css("background-color", "crimson")
  103. } else {
  104. console.log('pass')
  105. }
  106. }
  107. dry_input_status = [res.DI1, res.DI2]
  108. for (let i=0; i<dry_input_status.length; i++) {
  109. if (dry_input_status[i] == 'DI_InputtingBean') {
  110. $("#DI"+parseInt(i+1)+"_bar").css("background-color", "MediumSeaGreen")
  111. $("#DI"+parseInt(i+1)+"_status").text("DI" + parseInt(i+1) + " 入豆中")
  112. } else if (dry_input_status[i] == 'DI_Waiting') {
  113. $("#DI"+parseInt(i+1)+"_bar").css("background-color", "lightgray")
  114. $("#DI"+parseInt(i+1)+"_status").text("DI" + parseInt(i+1) + " 空桶等待")
  115. } else if (dry_input_status[i] == 'DI_OutputtingBean') {
  116. $("#DI"+parseInt(i+1)+"_bar").css("background-color", "MediumSeaGreen")
  117. $("#DI"+parseInt(i+1)+"_status").text("DI" + parseInt(i+1) + " 可出豆")
  118. } else {
  119. console.log('DI pass')
  120. }
  121. }
  122. dry_output_status = [res.DO1, res.DO2]
  123. for (let i=0; i<dry_output_status.length; i++) {
  124. if (dry_output_status[i] == 'DO_InputtingBean') {
  125. $("#DO"+parseInt(i+1)+"_bar").css("background-color", "MediumSeaGreen")
  126. $("#DO"+parseInt(i+1)+"_status").text("DO" + parseInt(i+1) + " 入豆中")
  127. } else if (dry_output_status[i] == 'DO_Waiting') {
  128. $("#DO"+parseInt(i+1)+"_bar").css("background-color", "lightgray")
  129. $("#DO"+parseInt(i+1)+"_status").text("DO" + parseInt(i+1) + " 空桶等待")
  130. } else if (dry_output_status[i] == 'DO_OutputtingBean') {
  131. $("#DO"+parseInt(i+1)+"_bar").css("background-color", "MediumSeaGreen")
  132. $("#DO"+parseInt(i+1)+"_status").text("DO" + parseInt(i+1) + " 可出豆")
  133. } else {
  134. console.log('DO pass')
  135. }
  136. }
  137. $("#tank_temp1_t_status").text(res.tank_temp1);
  138. }, 'json');
  139. }
  140. </script>
  141. </head>
  142. <body>
  143. <div id="wrapper">
  144. <div id="coffee_header">
  145. <!-- 匯入共同使用的 header.html 內容 -->
  146. {% include 'header.html' %}
  147. </div>
  148. <div style="height: 605px;">
  149. <table class="table_css" cellpadding="6" border="1">
  150. <!-- 第一列 DI1 / D1~D6 / DO1 -->
  151. <tr>
  152. <td class="td-clickable">
  153. <div id="DI1" tabindex="0" class="div_DryTank_position" role="button">
  154. <span id="DI1_status" class="demo_status_css">DI1 status</span>
  155. <div id="DI1_bar" class="div_DryTank_Status"></div>
  156. </div>
  157. </td>
  158. <td style="width: 10px; font-weight: 900;">
  159. 入料
  160. </td>
  161. <td class="td-clickable">
  162. <div id="D1" tabindex="0" class="div_DryTank_position" role="button">
  163. <span id="D1_status" class="demo_status_css">D1 status</span>
  164. <div id="D1_bar" class="div_DryTank_Status"></div>
  165. </div>
  166. </td>
  167. <td class="td-clickable">
  168. <div id="D2" tabindex="0" class="div_DryTank_position" role="button">
  169. <span id="D2_status" class="demo_status_css">D2 status</span>
  170. <div id="D2_bar" class="div_DryTank_Status"></div>
  171. </div>
  172. </td>
  173. <td class="td-clickable">
  174. <div id="D3" tabindex="0" class="div_DryTank_position" role="button">
  175. <span id="D3_status" class="demo_status_css">D3 status</span>
  176. <div id="D3_bar" class="div_DryTank_Status"></div>
  177. </div>
  178. </td>
  179. <td class="td-clickable">
  180. <div id="D4" tabindex="0" class="div_DryTank_position" role="button">
  181. <span id="D4_status" class="demo_status_css">D4 status</span>
  182. <div id="D4_bar" class="div_DryTank_Status"></div>
  183. </div>
  184. </td>
  185. <td class="td-clickable">
  186. <div id="D5" tabindex="0" class="div_DryTank_position" role="button">
  187. <span id="D5_status" class="demo_status_css">D5 status</span>
  188. <div id="D5_bar" class="div_DryTank_Status"></div>
  189. </div>
  190. </td>
  191. <td class="td-clickable">
  192. <div id="D6" tabindex="0" class="div_DryTank_position" role="button">
  193. <span id="D6_status" class="demo_status_css">D6 status</span>
  194. <div id="D6_bar" class="div_DryTank_Status"></div>
  195. </div>
  196. </td>
  197. <td style="width: 10px; font-weight: 900;">
  198. 出料
  199. </td>
  200. <td class="td-clickable">
  201. <div id="DO1" tabindex="0" class="div_DryTank_position" role="button">
  202. <span id="DO1_status" class="demo_status_css">DO1 status</span>
  203. <div id="DO1_bar" class="div_DryTank_Status"></div>
  204. </div>
  205. </td>
  206. </tr>
  207. <!-- 第二列 貨櫃圖片 -->
  208. <tr>
  209. <td colspan="10" class="td-clickable">
  210. <a href="/dry_auto" target="_blank">
  211. <img src="../static/img/web_dry_container.png" style="margin: auto; width: 1100px;">
  212. </a>
  213. </td>
  214. </tr>
  215. <!-- 第三列 DI2 / D7~D12 / DO2 -->
  216. <tr>
  217. <td class="td-clickable">
  218. <div id="DI2" tabindex="0" class="div_DryTank_position" role="button">
  219. <span id="DI2_status" class="demo_status_css">DI2 status</span>
  220. <div id="DI2_bar" class="div_DryTank_Status"></div>
  221. </div>
  222. </td>
  223. <td style="width: 10px; font-weight: 900;">
  224. 入料
  225. </td>
  226. <td class="td-clickable">
  227. <div id="D7" tabindex="0" class="div_DryTank_position" role="button">
  228. <span id="D7_status" class="demo_status_css">D7 status</span>
  229. <div id="D7_bar" class="div_DryTank_Status"></div>
  230. </div>
  231. </td>
  232. <td class="td-clickable">
  233. <div id="D8" tabindex="0" class="div_DryTank_position" role="button">
  234. <span id="D8_status" class="demo_status_css">D8 status</span>
  235. <div id="D8_bar" class="div_DryTank_Status"></div>
  236. </div>
  237. </td>
  238. <td class="td-clickable">
  239. <div id="D9" tabindex="0" class="div_DryTank_position" role="button">
  240. <span id="D9_status" class="demo_status_css">D9 status</span>
  241. <div id="D9_bar" class="div_DryTank_Status"></div>
  242. </div>
  243. </td>
  244. <td class="td-clickable">
  245. <div id="D10" tabindex="0" class="div_DryTank_position" role="button">
  246. <span id="D10_status" class="demo_status_css">D10 status</span>
  247. <div id="D10_bar" class="div_DryTank_Status"></div>
  248. </div>
  249. </td>
  250. <td class="td-clickable">
  251. <div id="D11" tabindex="0" class="div_DryTank_position" role="button">
  252. <span id="D11_status" class="demo_status_css">D11 status</span>
  253. <div id="D11_bar" class="div_DryTank_Status"></div>
  254. </div>
  255. </td>
  256. <td class="td-clickable">
  257. <div id="D12" tabindex="0" class="div_DryTank_position" role="button">
  258. <span id="D12_status" class="demo_status_css">D12 status</span>
  259. <div id="D12_bar" class="div_DryTank_Status"></div>
  260. </div>
  261. </td>
  262. <td style="width: 10px; font-weight: 900;">
  263. 出料
  264. </td>
  265. <td class="td-clickable">
  266. <div id="DO2" tabindex="0" class="div_DryTank_position" role="button">
  267. <span id="DO2_status" class="demo_status_css">DO2 status</span>
  268. <div id="DO2_bar" class="div_DryTank_Status"></div>
  269. </div>
  270. </td>
  271. </tr>
  272. </table>
  273. </div>
  274. <!-- 乾燥槽互動視窗(模态框) -->
  275. <div class="modal fade" id="D_Modal">
  276. <div class="modal-dialog modal-dialog-centered" style="width: 400px;">
  277. <div class="modal-content">
  278. <!-- 互動視窗 標題 -->
  279. <div class="modal-header">
  280. <h4 id="Modal_title" class="modal-title">乾燥槽 D1 狀態</h4>
  281. <button type="button" class="close" data-dismiss="modal">&times;</button>
  282. </div>
  283. <!-- 互動視窗 內容 -->
  284. <div class="modal-body">
  285. <table style="border:0px gray solid; width: 100%;" cellpadding="3">
  286. <!--<table style="border:0px gray solid;-->
  287. <tr>
  288. <td><strong><a id="actuator_link" href="">致動器狀態</a></strong></td>
  289. <td><strong><a id="sensor_link" href="">感測器狀態</a></strong></td>
  290. </tr>
  291. <tr>
  292. <td style="vertical-align:text-top;">
  293. <table style="border:0px gray solid;" cellpadding="3">
  294. <!--font-size:12px; -->
  295. <tr>
  296. <td>
  297. <div id="tank_vacuum_status" class="actuator_status">
  298. </div>
  299. </td>
  300. <td>
  301. <a id="Vacuum" href="">真空吸料機</a>
  302. <!--<span id="tank_vacuum_t_status"></span>-->
  303. </td>
  304. </tr>
  305. <tr>
  306. <td>
  307. <div id="tank_threewayvalve_input_status" class="actuator_status">
  308. </div>
  309. </td>
  310. <td>
  311. <a id="ThreeWayValveInput" href="">入料三通閥</a>
  312. <!--<span id="tank_threewayvalve_t_status"></span>-->
  313. </td>
  314. </tr>
  315. <tr>
  316. <td>
  317. <div id="tank_threewayvalve_bean_status" class="actuator_status">
  318. </div>
  319. </td>
  320. <td>
  321. <a id="ThreeWayValveBean" href="">測豆三通閥</a>
  322. <!--<span id="tank_threewayvalve_t_status"></span>-->
  323. </td>
  324. </tr>
  325. <tr>
  326. <td>
  327. <div id="tank_solenoid_disinfect_status" class="actuator_status">
  328. </div>
  329. </td>
  330. <td>
  331. <a id="SolenoidDisinfect" href="">消毒電磁閥</a>
  332. <!--<span id="tank_solenoid_disinfect_t_status"></span>-->
  333. </td>
  334. </tr>
  335. <tr>
  336. <td>
  337. <div id="tank_motor_status" class="actuator_status">
  338. </div>
  339. </td>
  340. <td>
  341. <a id="Motor" href="">馬達</a>
  342. <!--<span id="tank_motor_t_status"></span>-->
  343. </td>
  344. </tr>
  345. <tr>
  346. <td>
  347. <div id="tank_blower_status" class="actuator_status">
  348. </div>
  349. </td>
  350. <td>
  351. <a id="Blower" href="">鼓風機</a>
  352. <!--<span id="tank_blower_t_status"></span>-->
  353. </td>
  354. </tr>
  355. <tr>
  356. <td>
  357. <div id="tank_heater1_status" class="actuator_status">
  358. </div>
  359. </td>
  360. <td>
  361. <a id="Heater1" href="">加熱器 1</a>
  362. <!--<span id="tank_heater1_t_status"></span>-->
  363. </td>
  364. </tr>
  365. <tr>
  366. <td>
  367. <div id="tank_heater2_status" class="actuator_status">
  368. </div>
  369. </td>
  370. <td>
  371. <a id="Heater2" href="">加熱器 2</a>
  372. <!--<span id="tank_heater2_t_status"></span>-->
  373. </td>
  374. </tr>
  375. <tr>
  376. <td>
  377. <div id="tank_temp1_enable_status" class="actuator_status">
  378. </div>
  379. </td>
  380. <td>
  381. <a id="TempEnable" href="">溫控開關</a>
  382. <!--<span id="tank_temp1_enable_t_status"></span>-->
  383. </td>
  384. </tr>
  385. <tr>
  386. <td>
  387. <div id="tank_temp1_status" class="actuator_status">
  388. </div>
  389. </td>
  390. <td>
  391. <a id="Temp" href="">設定溫度</a>
  392. <!--<span id="tank_temp1_t_status"></span>-->
  393. </td>
  394. </tr>
  395. <tr>
  396. <td>
  397. <div id="tank_solenoid_water_status" class="actuator_status">
  398. </div>
  399. </td>
  400. <td>
  401. <a id="SolenoidWater" href="">排水電磁閥</a>
  402. <!--<span id="tank_solenoid_water_t_status"></span>-->
  403. </td>
  404. </tr>
  405. <tr>
  406. <td>
  407. <div id="tank_diskvalve_status" class="actuator_status">
  408. </div>
  409. </td>
  410. <td>
  411. <a id="DiskValve" href="">蝴蝶閥</a>
  412. <!--<span id="tank_diskvalve_t_status"></span>-->
  413. </td>
  414. </tr>
  415. </table>
  416. </td>
  417. <td style="vertical-align:text-top;">
  418. <table style="border:0px gray solid;" cellpadding="3">
  419. <!--font-size:12px; -->
  420. <tr>
  421. <td>
  422. <a id="UltraSonic" href="">咖啡生豆高度</a>
  423. </td>
  424. <td>
  425. <span id="UltraSonic_t_status"></span>
  426. </td>
  427. </tr>
  428. <tr>
  429. <td>
  430. <a id="SHT11_Temp" href="">乾燥槽溫度</a>
  431. </td>
  432. <td>
  433. <span id="SHT11_Temp_t_status"></span>
  434. </td>
  435. </tr>
  436. <tr>
  437. <td>
  438. <a id="SHT11_Humidity" href="">乾燥槽濕度</a>
  439. </td>
  440. <td>
  441. <span id="SHT11_Humidity_t_status"></span>
  442. </td>
  443. </tr>
  444. <tr>
  445. <td>
  446. <a id="soil_Temp" href="">咖啡生豆溫度</a>
  447. </td>
  448. <td>
  449. <span id="soil_Temp_t_status"></span>
  450. </td>
  451. </tr>
  452. <tr>
  453. <td>
  454. <a id="soil_Humidity" href="">咖啡生豆濕度</a>
  455. </td>
  456. <td>
  457. <span id="soil_Humidity_t_status"></span>
  458. </td>
  459. </tr>
  460. <tr>
  461. <td>
  462. <a id="soil_EC" href="">咖啡生豆 EC</a>
  463. </td>
  464. <td>
  465. <span id="soil_EC_t_status"></span>
  466. </td>
  467. </tr>
  468. <tr>
  469. <td>
  470. <a id="PA" href="">桶內壓力</a>
  471. </td>
  472. <td>
  473. <span id="PA_t_status"></span>
  474. </td>
  475. </tr>
  476. <tr>
  477. <td>
  478. <a id="camera_dry_tid" href=""><strong>攝影機畫面</strong></a>
  479. </td>
  480. </tr>
  481. </table>
  482. </td>
  483. </tr>
  484. </table>
  485. </div>
  486. </div>
  487. </div>
  488. </div>
  489. <!-- 乾燥槽入料儲豆槽互動視窗(模态框) -->
  490. <div class="modal fade" id="DI_Modal">
  491. <div class="modal-dialog modal-dialog-centered" style="width: 400px;">
  492. <div class="modal-content">
  493. <!-- 互動視窗 標題 -->
  494. <div class="modal-header">
  495. <h4 id="Modal_title_input" class="modal-title">乾燥入料儲豆槽 DI1 狀態</h4>
  496. <button type="button" class="close" data-dismiss="modal">&times;</button>
  497. </div>
  498. <!-- 互動視窗 內容 -->
  499. <div class="modal-body">
  500. <table style="border:0px gray solid; width: 100%;" cellpadding="3">
  501. <!--<table style="border:0px gray solid;-->
  502. <tr>
  503. <td><strong><a id="actuator_link_input" href="">致動器狀態</a></strong></td>
  504. <td><strong><a id="sensor_link_input" href="">感測器狀態</a></strong></td>
  505. </tr>
  506. <tr>
  507. <td style="vertical-align:text-top;">
  508. <table style="border:0px gray solid;" cellpadding="3">
  509. <!--font-size:12px; -->
  510. <tr>
  511. <td>
  512. <div id="input_vacuum_status" class="actuator_status">
  513. </div>
  514. </td>
  515. <td>
  516. <a id="Vacuum_input" href="">真空吸料機</a>
  517. <!--<span id="tank_vacuum_t_status"></span>-->
  518. </td>
  519. </tr>
  520. </table>
  521. </td>
  522. <td style="vertical-align:text-top;">
  523. <table style="border:0px gray solid;" cellpadding="3">
  524. <!--font-size:12px; -->
  525. <tr>
  526. <td>
  527. <a id="DI_UltraSonic" href="">咖啡生豆高度</a>
  528. </td>
  529. <td>
  530. <span id="DI_UltraSonic_t_status"></span>
  531. </td>
  532. </tr>
  533. <tr>
  534. <td>
  535. <a id="DI_camera_dry_tid" href=""><strong>攝影機畫面</strong></a>
  536. </td>
  537. </tr>
  538. </table>
  539. </td>
  540. </tr>
  541. </table>
  542. </div>
  543. </div>
  544. </div>
  545. </div>
  546. <!-- 乾燥槽出料儲豆槽互動視窗(模态框) -->
  547. <div class="modal fade" id="DO_Modal">
  548. <div class="modal-dialog modal-dialog-centered" style="width: 400px;">
  549. <div class="modal-content">
  550. <!-- 互動視窗 標題 -->
  551. <div class="modal-header">
  552. <h4 id="Modal_title_output" class="modal-title">乾燥入料儲豆槽 DI1 狀態</h4>
  553. <button type="button" class="close" data-dismiss="modal">&times;</button>
  554. </div>
  555. <!-- 互動視窗 內容 -->
  556. <div class="modal-body">
  557. <table style="border:0px gray solid; width: 100%;" cellpadding="3">
  558. <!--<table style="border:0px gray solid;-->
  559. <tr>
  560. <td><strong><a id="actuator_link_output" href="">致動器狀態</a></strong></td>
  561. <td><strong><a id="sensor_link_output" href="">感測器狀態</a></strong></td>
  562. </tr>
  563. <tr>
  564. <td style="vertical-align:text-top;">
  565. <table style="border:0px gray solid;" cellpadding="3">
  566. <!--font-size:12px; -->
  567. <tr>
  568. <td>
  569. <div id="output_vacuum_status"
  570. style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
  571. </div>
  572. </td>
  573. <td>
  574. <a id="Vacuum_output" href="">真空吸料機</a>
  575. <!--<span id="tank_vacuum_t_status"></span>-->
  576. </td>
  577. </tr>
  578. </table>
  579. </td>
  580. <td style="vertical-align:text-top;">
  581. <table style="border:0px gray solid;" cellpadding="3">
  582. <!--font-size:12px; -->
  583. <tr>
  584. <td>
  585. <a id="DO_UltraSonic" href="/chart_DO/UltraSonic/1">咖啡生豆高度</a>
  586. </td>
  587. <td>
  588. <span id="DO_UltraSonic_t_status"></span>
  589. </td>
  590. </tr>
  591. <tr>
  592. <td>
  593. <a id="DO_camera_dry_tid" href=""><strong>攝影機畫面</strong></a>
  594. </td>
  595. </tr>
  596. </table>
  597. </td>
  598. </tr>
  599. </table>
  600. </div>
  601. </div>
  602. </div>
  603. </div>
  604. <script>
  605. function update_data_D(dtid) {
  606. console.log('dry_tank_id:' + dtid)
  607. // dtid = dry_tank_id
  608. $.get('/loading/D' + dtid, '', function (res) {
  609. if (res.tank_vacuum == 0) {
  610. $("#tank_vacuum_status").css("background-color", "#C0C0C0")
  611. } else if (res.tank_vacuum == 1) {
  612. $("#tank_vacuum_status").css("background-color", "forestgreen")
  613. } else { $("#tank_vacuum_status").css("background-color", "crimson") }
  614. if (res.tank_threewayvalve_input == 0) {
  615. $("#tank_threewayvalve_input_status").css("background-color", "#C0C0C0")
  616. } else if (res.tank_threewayvalve_input == 1) {
  617. $("#tank_threewayvalve_input_status").css("background-color", "forestgreen")
  618. } else { $("#tank_threewayvalve_input_status").css("background-color", "crimson") }
  619. if (res.tank_threewayvalve_bean == 0) {
  620. $("#tank_threewayvalve_bean_status").css("background-color", "#C0C0C0")
  621. } else if (res.tank_threewayvalve_bean == 1) {
  622. $("#tank_threewayvalve_bean_status").css("background-color", "forestgreen")
  623. } else { $("#tank_threewayvalve_bean_status").css("background-color", "crimson") }
  624. if (res.tank_diskvalve == 0) {
  625. $("#tank_diskvalve_status").css("background-color", "#C0C0C0")
  626. } else if (res.tank_diskvalve == 1) {
  627. $("#tank_diskvalve_status").css("background-color", "forestgreen")
  628. } else { $("#tank_diskvalve_status").css("background-color", "crimson") }
  629. if (res.tank_solenoid_disinfect == 0) {
  630. $("#tank_solenoid_disinfect_status").css("background-color", "#C0C0C0")
  631. } else if (res.tank_solenoid_disinfect == 1) {
  632. $("#tank_solenoid_disinfect_status").css("background-color", "forestgreen")
  633. } else { $("#tank_solenoid_disinfect_status").css("background-color", "crimson") }
  634. if (res.tank_solenoid_water == 0) {
  635. $("#tank_solenoid_water_status").css("background-color", "#C0C0C0")
  636. } else if (res.tank_solenoid_water == 1) {
  637. $("#tank_solenoid_water_status").css("background-color", "forestgreen")
  638. } else { $("#tank_solenoid_water_status").css("background-color", "crimson") }
  639. if (res.tank_motor == 0) {
  640. $("#tank_motor_status").css("background-color", "#C0C0C0")
  641. } else if (res.tank_motor > 0 || res.tank_motor < 0) {
  642. $("#tank_motor_status").css("background-color", "forestgreen")
  643. } else { $("#tank_motor_status").css("background-color", "crimson") }
  644. if (res.tank_blower == 0) {
  645. $("#tank_blower_status").css("background-color", "#C0C0C0")
  646. } else if (res.tank_blower == 1) {
  647. $("#tank_blower_status").css("background-color", "forestgreen")
  648. } else { $("#tank_blower_status").css("background-color", "crimson") }
  649. if (res.tank_heater1 == 0) {
  650. $("#tank_heater1_status").css("background-color", "#C0C0C0")
  651. } else if (res.tank_heater1 == 1) {
  652. $("#tank_heater1_status").css("background-color", "forestgreen")
  653. } else { $("#tank_heater1_status").css("background-color", "crimson") }
  654. if (res.tank_heater2 == 0) {
  655. $("#tank_heater2_status").css("background-color", "#C0C0C0")
  656. } else if (res.tank_heater2 == 1) {
  657. $("#tank_heater2_status").css("background-color", "forestgreen")
  658. } else { $("#tank_heater2_status").css("background-color", "crimson") }
  659. if (res.tank_temp1_enable == 0) {
  660. $("#tank_temp1_enable_status").css("background-color", "#C0C0C0")
  661. } else if (res.tank_temp1_enable == 1) {
  662. $("#tank_temp1_enable_status").css("background-color", "forestgreen")
  663. } else { $("#tank_temp1_enable_status").css("background-color", "crimson") }
  664. if (res.tank_temp1 == 0) {
  665. $("#tank_temp1_status").css("background-color", "#C0C0C0")
  666. } else if (res.tank_temp1 > 0) {
  667. $("#tank_temp1_status").css("background-color", "forestgreen")
  668. } else { $("#tank_temp1_status").css("background-color", "crimson") }
  669. $("#tank_vacuum_t_status").text(res.tank_vacuum);
  670. $("#tank_threewayvalve_t_status").text(res.tank_threewayvalve);
  671. $("#tank_diskvalve_t_status").text(res.tank_diskvalve);
  672. $("#tank_solenoid_disinfect_t_status").text(res.tank_solenoid_disinfect);
  673. $("#tank_solenoid_water_t_status").text(res.tank_solenoid_water);
  674. $("#tank_motor_t_status").text(res.tank_motor);
  675. $("#tank_blower_t_status").text(res.tank_blower);
  676. $("#tank_heater1_t_status").text(res.tank_heater1);
  677. $("#tank_heater2_t_status").text(res.tank_heater2);
  678. $("#tank_temp1_enable_t_status").text(res.tank_temp1_enable);
  679. $("#tank_temp1_t_status").text(res.tank_temp1);
  680. $("#UltraSonic_t_status").text(res.UltraSonic);
  681. $("#SHT11_Temp_t_status").text(res.SHT11_Temp);
  682. $("#SHT11_Humidity_t_status").text(res.SHT11_Humidity);
  683. $("#soil_Temp_t_status").text(res.soil_Temp);
  684. $("#soil_Humidity_t_status").text(res.soil_Humidity);
  685. $("#soil_EC_t_status").text(res.soil_EC);
  686. $("#PA_t_status").text(res.PA);
  687. }, 'json');
  688. $('#Modal_title').text("乾燥槽 D" + dtid + " 狀態")
  689. if (status == 2) {
  690. $('#actuator_link').attr("title", "該使用者無修改權限")
  691. $('#sensor_link').attr("title", "該使用者無修改權限")
  692. $('#Vacuum').attr("title", "該使用者無修改權限")
  693. $('#ThreeWayValveInput').attr("title", "該使用者無修改權限")
  694. $('#ThreeWayValveBean').attr("title", "該使用者無修改權限")
  695. $('#SolenoidDisinfect').attr("title", "該使用者無修改權限")
  696. $('#Motor').attr("title", "該使用者無修改權限")
  697. $('#Blower').attr("title", "該使用者無修改權限")
  698. $('#Heater1').attr("title", "該使用者無修改權限")
  699. $('#Heater2').attr("title", "該使用者無修改權限")
  700. $('#TempEnable').attr("title", "該使用者無修改權限")
  701. $('#Temp').attr("title", "該使用者無修改權限")
  702. $('#SolenoidWater').attr("title", "該使用者無修改權限")
  703. $('#DiskValve').attr("title", "該使用者無修改權限")
  704. } else if ( (status == 0) || (status == 1) ) {
  705. $('#actuator_link').attr("href", "/dry_container_tank/" + dtid)
  706. $('#sensor_link').attr("href", "/dry_container_tank/" + dtid)
  707. $('#Vacuum').attr("href", "/ctrl_D_Vacuum/" + dtid)
  708. $('#ThreeWayValveInput').attr("href", "/ctrl_D_ThreeWayValveInput/" + dtid)
  709. $('#ThreeWayValveBean').attr("href", "/ctrl_D_ThreeWayValveBean/" + dtid)
  710. $('#SolenoidDisinfect').attr("href", "/ctrl_D_SolenoidDisinfect/" + dtid)
  711. $('#Motor').attr("href", "/ctrl_D_Motor/" + dtid)
  712. $('#Blower').attr("href", "/ctrl_D_Blower/" + dtid)
  713. $('#Heater1').attr("href", "/ctrl_D_Heater1/" + dtid)
  714. $('#Heater2').attr("href", "/ctrl_D_Heater2/" + dtid)
  715. $('#TempEnable').attr("href", "/ctrl_D_TempEnable/" + dtid)
  716. $('#Temp').attr("href", "/ctrl_D_Temp/" + dtid)
  717. $('#SolenoidWater').attr("href", "/ctrl_D_SolenoidWater/" + dtid)
  718. $('#DiskValve').attr("href", "/ctrl_D_DiskValve/" + dtid)
  719. }
  720. $('#SHT11_Temp').attr("href", "/chart_D/SHT11_Temp/" + dtid)
  721. $('#SHT11_Humidity').attr("href", "/chart_D/SHT11_Humidity/" + dtid)
  722. $('#UltraSonic').attr("href", "/chart_D/UltraSonic/" + dtid)
  723. $('#PA').attr("href", "/chart_D/PA/" + dtid)
  724. $('#soil_Temp').attr("href", "/chart_D/soil_Temp/" + dtid)
  725. $('#soil_Humidity').attr("href", "/chart_D/soil_Humidity/" + dtid)
  726. $('#soil_EC').attr("href", "/chart_D/soil_EC/" + dtid)
  727. $('#camera_dry_tid').attr("href", "/camera_D" + dtid)
  728. setTimeout(function(){ $('#D_Modal').modal('show'); }, 300)
  729. }
  730. function update_data_DI(ditid){
  731. console.log('dry_input_tank_id:' + ditid)
  732. // ditid = dry_input_tank_id
  733. $.get('/loading/DI' + ditid, '', function (res) {
  734. if (res.input_vacuum == 0) {
  735. $("#input_vacuum_status").css("background-color", "#C0C0C0")
  736. } else if (res.input_vacuum == 1) {
  737. $("#input_vacuum_status").css("background-color", "forestgreen")
  738. } else { $("#input_vacuum_status").css("background-color", "crimson") }
  739. $("#DI_UltraSonic_t_status").text(res.input_UltraSonic);
  740. }, 'json');
  741. $('#Modal_title_input').text("乾燥入料儲豆槽 DI" + ditid + " 狀態")
  742. if (status == 2) {
  743. $('#actuator_link').attr("title", "該使用者無修改權限")
  744. $('#sensor_link').attr("title", "該使用者無修改權限")
  745. $('#Vacuum_input').attr("title", "該使用者無修改權限")
  746. } else if ( (status == 0) || (status == 1) ) {
  747. $('#actuator_link_input').attr("href", "/dry_container_input/" + ditid)
  748. $('#sensor_link_input').attr("href", "/dry_container_input/" + ditid)
  749. $('#Vacuum_input').attr("href", "/ctrl_DI_Vacuum/" + ditid)
  750. }
  751. $('#DI_UltraSonic').attr("href", "/chart_DI/UltraSonic/" + ditid)
  752. $('#DI_camera_dry_tid').attr("href", "/camera_DI" + ditid)
  753. $('#DI_Modal').modal('show');
  754. };
  755. function update_data_DO(dotid){
  756. console.log('dry_output_tank_id:' + dotid)
  757. // dotid = dry_output_tank_id
  758. $.get('/loading/DO' + dotid, '', function (res) {
  759. if (res.output_vacuum == 0) {
  760. $("#output_vacuum_status").css("background-color", "#C0C0C0")
  761. } else if (res.output_vacuum == 1) {
  762. $("#output_vacuum_status").css("background-color", "forestgreen")
  763. } else { $("#output_vacuum_status").css("background-color", "crimson") }
  764. $("#DO_UltraSonic_t_status").text(res.output_UltraSonic);
  765. }, 'json');
  766. $('#Modal_title_output').text("乾燥出料儲豆槽 DO" + dotid + " 狀態")
  767. if (status == 2) {
  768. $('#actuator_link').attr("title", "該使用者無修改權限")
  769. $('#sensor_link').attr("title", "該使用者無修改權限")
  770. $('#Vacuum_output').attr("title", "該使用者無修改權限")
  771. } else if ( (status == 0) || (status == 1) ) {
  772. $('#actuator_link_output').attr("href", "/dry_container_output/" + dotid)
  773. $('#sensor_link_output').attr("href", "/dry_container_output/" + dotid)
  774. $('#Vacuum_output').attr("href", "/ctrl_DO_Vacuum/" + dotid)
  775. }
  776. $('#DO_UltraSonic').attr("href", "/chart_DO/UltraSonic/" + dotid)
  777. $('#DO_camera_dry_tid').attr("href", "/camera_DO" + dotid)
  778. $('#DO_Modal').modal('show');
  779. };
  780. var button_D1 = document.getElementById('D1');
  781. button_D1.addEventListener('click', function () { update_data_D("1") });
  782. var button_D2 = document.getElementById('D2');
  783. button_D2.addEventListener('click', function () { update_data_D("2") });
  784. var button_D3 = document.getElementById('D3');
  785. button_D3.addEventListener('click', function () { update_data_D("3") });
  786. var button_D4 = document.getElementById('D4');
  787. button_D4.addEventListener('click', function () { update_data_D("4") });
  788. var button_D5 = document.getElementById('D5');
  789. button_D5.addEventListener('click', function () { update_data_D("5") });
  790. var button_D6 = document.getElementById('D6');
  791. button_D6.addEventListener('click', function () { update_data_D("6") });
  792. var button_D7 = document.getElementById('D7');
  793. button_D7.addEventListener('click', function () { update_data_D("7") });
  794. var button_D8 = document.getElementById('D8');
  795. button_D8.addEventListener('click', function () { update_data_D("8") });
  796. var button_D9 = document.getElementById('D9');
  797. button_D9.addEventListener('click', function () { update_data_D("9") });
  798. var button_D10 = document.getElementById('D10');
  799. button_D10.addEventListener('click', function () { update_data_D("10") });
  800. var button_D11 = document.getElementById('D11');
  801. button_D11.addEventListener('click', function () { update_data_D("11") });
  802. var button_D12 = document.getElementById('D12');
  803. button_D12.addEventListener('click', function () { update_data_D("12") });
  804. var button_DI1 = document.getElementById('DI1');
  805. button_DI1.addEventListener('click', function () { update_data_DI("1") });
  806. var button_DI2 = document.getElementById('DI2');
  807. button_DI2.addEventListener('click', function () { update_data_DI("2") });
  808. var button_DO1 = document.getElementById('DO1');
  809. button_DO1.addEventListener('click', function () { update_data_DO("1") });
  810. var button_DO2 = document.getElementById('DO2');
  811. button_DO2.addEventListener('click', function () { update_data_DO("2") });
  812. </script>
  813. <!--
  814. <footer class="footer">
  815. <div style="text-align: center; margin-top: 10px; font-size: 13px; margin-bottom: 10px;">
  816. Copyright © 2021 Gold-in Tech. All Rights Reserved. 金子進科技股份有限公司 版權所有
  817. <a href="mailto:service.gitc@gmail.com" target="_blank">service.gitc@gmail.com</a>
  818. </div>
  819. </footer>
  820. -->
  821. <div id="coffee_footer">
  822. <!-- 匯入共同使用的 footer.html 內容 -->
  823. {% include 'footer.html' %}
  824. </div>
  825. </div>
  826. </body>
  827. </html>