dry_1118修改狀態顯示表格.html 45 KB

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