demo.html 94 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628162916301631163216331634163516361637163816391640164116421643164416451646164716481649165016511652165316541655165616571658165916601661166216631664166516661667166816691670
  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. cursor: pointer;
  31. }
  32. /* 桶槽狀態顯示的顏色條 */
  33. .div_DryTank_Status {
  34. width: 140px;
  35. height: 20px;
  36. border-style: solid;
  37. border-color: whitesmoke;
  38. background-color: black;
  39. }
  40. .footer{
  41. position: absolute;
  42. bottom: 0px;
  43. width: 100%;
  44. background-color: #eee;
  45. text-align: center;
  46. }
  47. /* 制動器狀態的圈圈 */
  48. .actuator_status {
  49. width: 18px;
  50. height: 18px;
  51. background-color:black;
  52. border-radius: 50%;
  53. }
  54. /* 狀態外框的 CSS */
  55. .table_css {
  56. border: 0px lightsteelblue solid;
  57. margin-right: auto;
  58. margin-left: auto;
  59. text-align: center;
  60. margin-top: 5px;
  61. width: 80%;
  62. }
  63. </style>
  64. <script language="JavaScript">
  65. // 指定 10秒 刷新網頁一次
  66. var WebRestart
  67. // WebRestart = setTimeout(function () { location.reload() }, 10000);
  68. var status = '{{status}}';
  69. $(document).ready(function(){
  70. $("#coffee_title_pc").text("DEMO 貨櫃");
  71. $("#coffee_title_phone").text("DEMO 貨櫃");
  72. loading_D_status();
  73. });
  74. clean_input_status = ['{{CI1}}', '{{CI2}}']
  75. console.log('clean_input_status: ' + clean_input_status)
  76. clean_tank_status = ['{{C1}}', '{{C2}}']
  77. console.log('clean_tank_status: ' + clean_tank_status)
  78. reclaimedwater_tank_status = ['{{R1}}']
  79. console.log('reclaimedwater_tank_status: ' + reclaimedwater_tank_status)
  80. colorselect_tank_status = ['{{S1}}', '{{S2}}']
  81. console.log('colorselect_tank_status: ' + colorselect_tank_status)
  82. // colorselect_outputg_status = ['{{SOg1}}', '{{SOg2}}']
  83. // console.log('colorselect_outputg_status: ' + colorselect_outputg_status)
  84. // colorselect_outputb_status = ['{{SOb1}}', '{{SOb2}}']
  85. // console.log('colorselect_outputb_status: ' + colorselect_outputb_status)
  86. peel_tank_status = ['{{P1}}', '{{P2}}']
  87. console.log('peel_tank_status: ' + peel_tank_status)
  88. // peel_output_status = ['{{PO1}}', '{{PO2}}']
  89. // console.log('peel_output_status: ' + peel_output_status)
  90. ferment_tank_status = ['{{F1}}', '{{F2}}']
  91. console.log('ferment_tank_status: ' + ferment_tank_status)
  92. dry_tank_status = ['{{D1}}', '{{D2}}']
  93. console.log('dry_tank_status: ' + dry_tank_status)
  94. dry_output_status = ['{{DO1}}', '{{DO2}}']
  95. console.log('dry_output_status: ' + dry_output_status)
  96. peel_outputb_status = ['{{POb1}}']
  97. console.log('peel_outputb_status: ' + peel_outputb_status)
  98. function loading_D_status(){
  99. // 狀態 入料儲豆槽
  100. for (let i=0; i<clean_input_status.length; i++) {
  101. if (clean_input_status[i] == 'CI_InputtingBean') {
  102. $("#DM_InputBean_"+parseInt(i+1)+"_bar").css("background-color", "MediumSeaGreen")
  103. $("#DM_InputBean_"+parseInt(i+1)+"_status").text("入豆中")
  104. } else if (clean_input_status[i] == 'CI_Waiting') {
  105. $("#DM_InputBean_"+parseInt(i+1)+"_bar").css("background-color", "lightgray")
  106. $("#DM_InputBean_"+parseInt(i+1)+"_status").text("空桶等待")
  107. } else if (clean_input_status[i] == 'CI_OutputtingBean') {
  108. $("#DM_InputBean_"+parseInt(i+1)+"_bar").css("background-color", "MediumSeaGreen")
  109. $("#DM_InputBean_"+parseInt(i+1)+"_status").text("可出豆")
  110. } else if (clean_input_status[i] == 'CI_Warning') {
  111. $("#DM_InputBean_"+parseInt(i+1)+"_bar").css("background-color", "crimson")
  112. $("#DM_InputBean_"+parseInt(i+1)+"_status").text("發生錯誤")
  113. $("#DM_InputBean_"+parseInt(i+1)+"_status").css("color", "crimson")
  114. } else {
  115. console.log('DM_InputBean pass')
  116. }
  117. }
  118. // 狀態 清洗槽 1
  119. for (let i=0; i<clean_tank_status.length; i++) {
  120. if (clean_tank_status[i] == 'C_InputtingBean') {
  121. $("#DM_Clean_"+parseInt(i+1)+"_bar").css("background-color", "MediumSeaGreen")
  122. $("#DM_Clean_"+parseInt(i+1)+"_status").text("入豆中")
  123. } else if (clean_tank_status[i] == 'C_Waiting') {
  124. $("#DM_Clean_"+parseInt(i+1)+"_bar").css("background-color", "lightgray")
  125. $("#DM_Clean_"+parseInt(i+1)+"_status").text("空桶等待")
  126. } else if (clean_tank_status[i] == 'C_InputtingWater1') {
  127. $("#DM_Clean_"+parseInt(i+1)+"_bar").css("background-color", "MediumSeaGreen")
  128. $("#DM_Clean_"+parseInt(i+1)+"_status").text("入水 1")
  129. } else if (clean_tank_status[i] == 'C_InputtingWater2') {
  130. $("#DM_Clean_"+parseInt(i+1)+"_bar").css("background-color", "MediumSeaGreen")
  131. $("#DM_Clean_"+parseInt(i+1)+"_status").text("入水 2")
  132. } else if (clean_tank_status[i] == 'C_InputtingWater3') {
  133. $("#DM_Clean_"+parseInt(i+1)+"_bar").css("background-color", "MediumSeaGreen")
  134. $("#DM_Clean_"+parseInt(i+1)+"_status").text("入水 3")
  135. } else if (clean_tank_status[i] == 'C_OutputtingBean') {
  136. $("#DM_Clean_"+parseInt(i+1)+"_bar").css("background-color", "MediumSeaGreen")
  137. $("#DM_Clean_"+parseInt(i+1)+"_status").text("可出豆")
  138. } else if (clean_tank_status[i] == 'C_Warning') {
  139. $("#DM_Clean_"+parseInt(i+1)+"_bar").css("background-color", "crimson")
  140. $("#DM_Clean_"+parseInt(i+1)+"_status").text("發生錯誤")
  141. $("#DM_Clean_"+parseInt(i+1)+"_status").css("color", "crimson")
  142. } else {
  143. console.log('DM_Clean pass')
  144. }
  145. }
  146. // 狀態 中水桶
  147. for (let i=0; i<reclaimedwater_tank_status.length; i++) {
  148. if (reclaimedwater_tank_status[i] == 'R_Waiting') {
  149. $("#DM_ReclaimedWater_"+parseInt(i+1)+"_bar").css("background-color", "lightgray")
  150. $("#DM_ReclaimedWater_"+parseInt(i+1)+"_status").text("空桶等待")
  151. } else {
  152. console.log('DM_ReclaimedWater pass')
  153. }
  154. }
  155. // 狀態 色選機
  156. for (let i=0; i<colorselect_tank_status.length; i++) {
  157. if (colorselect_tank_status[i] == 'S_Waiting') {
  158. $("#DM_ColorSelect_"+parseInt(i+1)+"_bar").css("background-color", "lightgray")
  159. $("#DM_ColorSelect_"+parseInt(i+1)+"_status").text("空桶等待")
  160. } else if (colorselect_tank_status[i] == 'S_Warning') {
  161. $("#DM_ColorSelect_"+parseInt(i+1)+"_bar").css("background-color", "crimson")
  162. $("#DM_ColorSelect_"+parseInt(i+1)+"_status").text("發生錯誤")
  163. $("#DM_ColorSelect_"+parseInt(i+1)+"_status").css("color", "crimson")
  164. } else {
  165. console.log('DM_ColorSelect pass')
  166. }
  167. }
  168. // 狀態 脫皮機
  169. for (let i=0; i<peel_tank_status.length; i++) {
  170. if (peel_tank_status[i] == 'P_Waiting') {
  171. $("#DM_Peel_"+parseInt(i+1)+"_bar").css("background-color", "lightgray")
  172. $("#DM_Peel_"+parseInt(i+1)+"_status").text("空桶等待")
  173. } else if (peel_tank_status[i] == 'P_Peeling') {
  174. $("#DM_Peel_"+parseInt(i+1)+"_bar").css("background-color", "crimson")
  175. $("#DM_Peel_"+parseInt(i+1)+"_status").text("發生錯誤")
  176. $("#DM_Peel_"+parseInt(i+1)+"_status").css("color", "crimson")
  177. } else {
  178. console.log('DM_Peel pass')
  179. }
  180. }
  181. // 狀態 發酵槽 1
  182. for (let i=0; i<ferment_tank_status.length; i++) {
  183. if (ferment_tank_status[i] == 'F_InputtingBean') {
  184. $("#DM_Ferment_"+parseInt(i+1)+"_bar").css("background-color", "MediumSeaGreen")
  185. $("#DM_Ferment_"+parseInt(i+1)+"_status").text("入豆中")
  186. } else if (ferment_tank_status[i] == 'F_Waiting') {
  187. $("#DM_Ferment_"+parseInt(i+1)+"_bar").css("background-color", "lightgray")
  188. $("#DM_Ferment_"+parseInt(i+1)+"_status").text("空桶等待")
  189. } else if (ferment_tank_status[i] == 'F_OutputtingBean') {
  190. $("#DM_Ferment_"+parseInt(i+1)+"_bar").css("background-color", "MediumSeaGreen")
  191. $("#DM_Ferment_"+parseInt(i+1)+"_status").text("可出豆")
  192. } else if (ferment_tank_status[i] == 'F_InputtingBean_Pause') {
  193. $("#DM_Ferment_"+parseInt(i+1)+"_bar").css("background-color", "MediumSeaGreen")
  194. $("#DM_Ferment_"+parseInt(i+1)+"_status").text("入豆暫停")
  195. } else if (ferment_tank_status[i] == 'F_InputtingBean_Finish') {
  196. $("#DM_Ferment_"+parseInt(i+1)+"_bar").css("background-color", "MediumSeaGreen")
  197. $("#DM_Ferment_"+parseInt(i+1)+"_status").text("入豆完成")
  198. } else if (ferment_tank_status[i] == 'F_InputtingWater') {
  199. $("#DM_Ferment_"+parseInt(i+1)+"_bar").css("background-color", "MediumSeaGreen")
  200. $("#DM_Ferment_"+parseInt(i+1)+"_status").text("入水中")
  201. } else if (ferment_tank_status[i] == 'F_Fermenting') {
  202. $("#DM_Ferment_"+parseInt(i+1)+"_bar").css("background-color", "MediumSeaGreen")
  203. $("#DM_Ferment_"+parseInt(i+1)+"_status").text("發酵中")
  204. } else if (ferment_tank_status[i] == 'F_Warning') {
  205. $("#DM_Ferment_"+parseInt(i+1)+"_bar").css("background-color", "crimson")
  206. $("#DM_Ferment_"+parseInt(i+1)+"_status").text("發生錯誤")
  207. $("#DM_Ferment_"+parseInt(i+1)+"_status").css("color", "crimson")
  208. } else {
  209. console.log('DM_Ferment pass')
  210. }
  211. }
  212. // 狀態 乾燥槽
  213. for (let i=0; i<dry_tank_status.length; i++) {
  214. if (dry_tank_status[i] == 'D_InputtingBean') {
  215. $("#DM_Dry_"+parseInt(i+1)+"_bar").css("background-color", "MediumSeaGreen")
  216. $("#DM_Dry_"+parseInt(i+1)+"_status").text("入豆中")
  217. } else if (dry_tank_status[i] == 'D_Waiting') {
  218. $("#DM_Dry_"+parseInt(i+1)+"_bar").css("background-color", "lightgray")
  219. $("#DM_Dry_"+parseInt(i+1)+"_status").text("空桶等待")
  220. } else if (dry_tank_status[i] == 'D_Drying') {
  221. $("#DM_Dry_"+parseInt(i+1)+"_bar").css("background-color", "MediumSeaGreen")
  222. $("#DM_Dry_"+parseInt(i+1)+"_status").text("乾燥中")
  223. } else if (dry_tank_status[i] == 'D_OutputtingBean') {
  224. $("#DM_Dry_"+parseInt(i+1)+"_bar").css("background-color", "MediumSeaGreen")
  225. $("#DM_Dry_"+parseInt(i+1)+"_status").text("可出豆")
  226. } else if (dry_tank_status[i] == 'D_Warning') {
  227. $("#DM_Dry_"+parseInt(i+1)+"_bar").css("background-color", "crimson")
  228. $("#DM_Dry_"+parseInt(i+1)+"_status").text("發生錯誤")
  229. $("#DM_Dry_"+parseInt(i+1)+"_status").css("color", "crimson")
  230. } else {
  231. console.log('DM_InputBean pass')
  232. }
  233. }
  234. }
  235. </script>
  236. </head>
  237. <body>
  238. <div id="wrapper">
  239. <div id="coffee_header">
  240. <!-- 匯入共同使用的 header.html 內容 -->
  241. {% include 'header.html' %}
  242. </div>
  243. <div style="height: 635px;">
  244. <table class="table_css" cellpadding="6" border="1">
  245. <!-- 第一列 -->
  246. <tr>
  247. <td class="td-clickable">
  248. <div id="DM_InputBean_1" tabindex="0" class="div_DryTank_position" role="button">
  249. <span class="demo_status_css">入料儲豆槽 1</span><br>
  250. <span id="DM_InputBean_1_status" class="demo_status_css"></span>
  251. <div id="DM_InputBean_1_bar" class="div_DryTank_Status"></div>
  252. </div>
  253. </td>
  254. <td style="width: 10px; font-weight: 900;">
  255. 入料
  256. </td>
  257. <td class="td-clickable">
  258. <div id="DM_Clean_1" tabindex="0" class="div_DryTank_position" role="button">
  259. <span class="demo_status_css">清洗槽 1</span><br>
  260. <span id="DM_Clean_1_status" class="demo_status_css"></span>
  261. <div id="DM_Clean_1_bar" class="div_DryTank_Status"></div>
  262. </div>
  263. </td>
  264. <td class="td-clickable">
  265. <div id="DM_ReclaimedWater_1" tabindex="0" class="div_DryTank_position" role="button">
  266. <span class="demo_status_css">中水桶</span><br>
  267. <span id="DM_ReclaimedWater_1_status" class="demo_status_css"></span>
  268. <div id="DM_ReclaimedWater_1_bar" class="div_DryTank_Status"></div>
  269. </div>
  270. </td>
  271. <td class="td-clickable">
  272. <div id="DM_ColorSelect_1" tabindex="0" class="div_DryTank_position" role="button">
  273. <span class="demo_status_css">色選機 1</span><br>
  274. <span id="DM_ColorSelect_1_status" class="demo_status_css"></span>
  275. <div id="DM_ColorSelect_1_bar" class="div_DryTank_Status"></div>
  276. </div>
  277. </td>
  278. <td class="td-clickable">
  279. <div id="DM_Peel_1" tabindex="0" class="div_DryTank_position" role="button">
  280. <span class="demo_status_css">脫皮機 1</span><br>
  281. <span id="DM_Peel_1_status" class="demo_status_css"></span>
  282. <div id="DM_Peel_1_bar" class="div_DryTank_Status"></div>
  283. </div>
  284. </td>
  285. <td class="td-clickable">
  286. <div id="DM_Ferment_1" tabindex="0" class="div_DryTank_position" role="button">
  287. <span class="demo_status_css">發酵槽 1</span><br>
  288. <span id="DM_Ferment_1_status" class="demo_status_css"></span>
  289. <div id="DM_Ferment_1_bar" class="div_DryTank_Status"></div>
  290. </div>
  291. </td>
  292. <td>
  293. </td>
  294. <td style="width: 10px; font-weight: 900;">
  295. 出料
  296. </td>
  297. <td class="td-clickable">
  298. <div id="DM_BadBean_1" tabindex="0" class="div_DryTank_position" role="button">
  299. <span class="demo_status_css">壞果儲豆槽</span><br>
  300. <span id="DM_BadBean_1_status" class="demo_status_css"></span>
  301. <div id="DM_BadBean_1_bar" class="div_DryTank_Status"></div>
  302. </div>
  303. </td>
  304. </tr>
  305. <!-- 第二列 貨櫃圖片 -->
  306. <tr>
  307. <td colspan="10" class="td-clickable">
  308. <a href="/demo_auto" target="_blank">
  309. <img src="../static/img/web_demo_container.png" style="margin: auto; width: 1100px;">
  310. </a>
  311. </td>
  312. </tr>
  313. <!-- 第三列 -->
  314. <tr>
  315. <td class="td-clickable">
  316. <div id="DM_InputBean_2" tabindex="0" class="div_DryTank_position" role="button">
  317. <span class="demo_status_css">入料儲豆槽 2</span><br>
  318. <span id="DM_InputBean_2_status" class="demo_status_css"></span>
  319. <div id="DM_InputBean_2_bar" class="div_DryTank_Status"></div>
  320. </div>
  321. </td>
  322. <td style="width: 10px; font-weight: 900;">
  323. 入料
  324. </td>
  325. <td class="td-clickable">
  326. <div id="DM_Clean_2" tabindex="0" class="div_DryTank_position" role="button">
  327. <span class="demo_status_css">清洗槽 2</span><br>
  328. <span id="DM_Clean_2_status" class="demo_status_css"></span>
  329. <div id="DM_Clean_2_bar" class="div_DryTank_Status"></div>
  330. </div>
  331. </td>
  332. <td>
  333. </td>
  334. <td class="td-clickable">
  335. <div id="DM_ColorSelect_2" tabindex="0" class="div_DryTank_position" role="button">
  336. <span class="demo_status_css">色選機 2</span><br>
  337. <span id="DM_ColorSelect_2_status" class="demo_status_css"></span>
  338. <div id="DM_ColorSelect_2_bar" class="div_DryTank_Status"></div>
  339. </div>
  340. </td>
  341. <td class="td-clickable">
  342. <div id="DM_Peel_2" tabindex="0" class="div_DryTank_position" role="button">
  343. <span class="demo_status_css">脫皮機 2</span><br>
  344. <span id="DM_Peel_2_status" class="demo_status_css"></span>
  345. <div id="DM_Peel_2_bar" class="div_DryTank_Status"></div>
  346. </div>
  347. </td>
  348. <td class="td-clickable">
  349. <div id="DM_Ferment_2" tabindex="0" class="div_DryTank_position" role="button">
  350. <span class="demo_status_css">發酵槽 2</span><br>
  351. <span id="DM_Ferment_2_status" class="demo_status_css"></span>
  352. <div id="DM_Ferment_2_bar" class="div_DryTank_Status"></div>
  353. </div>
  354. </td>
  355. <td class="td-clickable">
  356. <div id="DM_Dry_1" tabindex="0" class="div_DryTank_position" role="button">
  357. <span class="demo_status_css">乾燥槽</span><br>
  358. <span id="DM_Dry_1_status" class="demo_status_css"></span>
  359. <div id="DM_Dry_1_bar" class="div_DryTank_Status"></div>
  360. </div>
  361. </td>
  362. <td style="width: 10px; font-weight: 900;">
  363. 出料
  364. </td>
  365. <td class="td-clickable">
  366. <div id="DM_OutputBean_1" tabindex="0" class="div_DryTank_position" role="button">
  367. <span class="demo_status_css">出料儲豆槽</span><br>
  368. <span id="DM_OutputBean_1_status" class="demo_status_css"></span>
  369. <div id="DM_OutputBean_1_bar" class="div_DryTank_Status"></div>
  370. </div>
  371. </td>
  372. </tr>
  373. </table>
  374. </div>
  375. <!-- 乾燥槽 互動視窗(模态框) -->
  376. <div class="modal fade" id="D_Modal">
  377. <div class="modal-dialog modal-dialog-centered" style="width: 400px;">
  378. <div class="modal-content">
  379. <!-- 互動視窗 標題 -->
  380. <div class="modal-header">
  381. <h4 id="Modal_title" class="modal-title">乾燥槽 D1 狀態</h4>
  382. <button type="button" class="close" data-dismiss="modal">&times;</button>
  383. </div>
  384. <!-- 互動視窗 內容 -->
  385. <div class="modal-body">
  386. <table style="border:0px gray solid; width: 100%;" cellpadding="3">
  387. <!--<table style="border:0px gray solid;-->
  388. <tr>
  389. <td><strong><a id="actuator_link" href="">制動器狀態</a></strong></td>
  390. <td><strong><a id="sensor_link" href="">感測器狀態</a></strong></td>
  391. </tr>
  392. <tr>
  393. <td style="vertical-align:text-top;">
  394. <table style="border:0px gray solid;" cellpadding="3">
  395. <!--font-size:12px; -->
  396. <tr>
  397. <td>
  398. <div id="tank_vacuum_status" class="actuator_status">
  399. </div>
  400. </td>
  401. <td>
  402. <a id="Vacuum" href="">真空吸料機</a>
  403. <!--<span id="tank_vacuum_t_status"></span>-->
  404. </td>
  405. </tr>
  406. <tr>
  407. <td>
  408. <div id="tank_threewayvalve_input_status" class="actuator_status">
  409. </div>
  410. </td>
  411. <td>
  412. <a id="ThreeWayValveInput" href="">入料三通閥</a>
  413. <!--<span id="tank_threewayvalve_t_status"></span>-->
  414. </td>
  415. </tr>
  416. <tr>
  417. <td>
  418. <div id="tank_threewayvalve_bean_status" class="actuator_status">
  419. </div>
  420. </td>
  421. <td>
  422. <a id="ThreeWayValveBean" href="">測豆三通閥</a>
  423. <!--<span id="tank_threewayvalve_t_status"></span>-->
  424. </td>
  425. </tr>
  426. <tr>
  427. <td>
  428. <div id="tank_solenoid_disinfect_status" class="actuator_status">
  429. </div>
  430. </td>
  431. <td>
  432. <a id="SolenoidDisinfect" href="">消毒電磁閥</a>
  433. <!--<span id="tank_solenoid_disinfect_t_status"></span>-->
  434. </td>
  435. </tr>
  436. <tr>
  437. <td>
  438. <div id="tank_motor_status" class="actuator_status">
  439. </div>
  440. </td>
  441. <td>
  442. <a id="Motor" href="">馬達</a>
  443. <!--<span id="tank_motor_t_status"></span>-->
  444. </td>
  445. </tr>
  446. <tr>
  447. <td>
  448. <div id="tank_blower_status" class="actuator_status">
  449. </div>
  450. </td>
  451. <td>
  452. <a id="Blower" href="">鼓風機</a>
  453. <!--<span id="tank_blower_t_status"></span>-->
  454. </td>
  455. </tr>
  456. <tr>
  457. <td>
  458. <div id="tank_heater1_status" class="actuator_status">
  459. </div>
  460. </td>
  461. <td>
  462. <a id="Heater1" href="">加熱器 1</a>
  463. <!--<span id="tank_heater1_t_status"></span>-->
  464. </td>
  465. </tr>
  466. <tr>
  467. <td>
  468. <div id="tank_heater2_status" class="actuator_status">
  469. </div>
  470. </td>
  471. <td>
  472. <a id="Heater2" href="">加熱器 2</a>
  473. <!--<span id="tank_heater2_t_status"></span>-->
  474. </td>
  475. </tr>
  476. <tr>
  477. <td>
  478. <div id="tank_temp1_enable_status" class="actuator_status">
  479. </div>
  480. </td>
  481. <td>
  482. <a id="TempEnable" href="">溫控開關</a>
  483. <!--<span id="tank_temp1_enable_t_status"></span>-->
  484. </td>
  485. </tr>
  486. <tr>
  487. <td>
  488. <div id="tank_temp1_status" class="actuator_status">
  489. </div>
  490. </td>
  491. <td>
  492. <a id="Temp" href="">設定溫度</a>
  493. <!--<span id="tank_temp1_t_status"></span>-->
  494. </td>
  495. </tr>
  496. <tr>
  497. <td>
  498. <div id="tank_solenoid_water_status" class="actuator_status">
  499. </div>
  500. </td>
  501. <td>
  502. <a id="SolenoidWater" href="">排水電磁閥</a>
  503. <!--<span id="tank_solenoid_water_t_status"></span>-->
  504. </td>
  505. </tr>
  506. <tr>
  507. <td>
  508. <div id="tank_diskvalve_status" class="actuator_status">
  509. </div>
  510. </td>
  511. <td>
  512. <a id="DiskValve" href="">蝴蝶閥</a>
  513. <!--<span id="tank_diskvalve_t_status"></span>-->
  514. </td>
  515. </tr>
  516. </table>
  517. </td>
  518. <td style="vertical-align:text-top;">
  519. <table style="border:0px gray solid;" cellpadding="3">
  520. <!--font-size:12px; -->
  521. <tr>
  522. <td>
  523. <a id="UltraSonic" href="">咖啡生豆高度</a>
  524. </td>
  525. <td>
  526. <span id="UltraSonic_t_status"></span>
  527. </td>
  528. </tr>
  529. <tr>
  530. <td>
  531. <a id="SHT11_Temp" href="">乾燥槽溫度</a>
  532. </td>
  533. <td>
  534. <span id="SHT11_Temp_t_status"></span>
  535. </td>
  536. </tr>
  537. <tr>
  538. <td>
  539. <a id="SHT11_Humidity" href="">乾燥槽濕度</a>
  540. </td>
  541. <td>
  542. <span id="SHT11_Humidity_t_status"></span>
  543. </td>
  544. </tr>
  545. <tr>
  546. <td>
  547. <a id="soil_Temp" href="">咖啡生豆溫度</a>
  548. </td>
  549. <td>
  550. <span id="soil_Temp_t_status"></span>
  551. </td>
  552. </tr>
  553. <tr>
  554. <td>
  555. <a id="soil_Humidity" href="">咖啡生豆濕度</a>
  556. </td>
  557. <td>
  558. <span id="soil_Humidity_t_status"></span>
  559. </td>
  560. </tr>
  561. <tr>
  562. <td>
  563. <a id="soil_EC" href="">咖啡生豆 EC</a>
  564. </td>
  565. <td>
  566. <span id="soil_EC_t_status"></span>
  567. </td>
  568. </tr>
  569. <tr>
  570. <td>
  571. <a id="PA" href="">桶內壓力</a>
  572. </td>
  573. <td>
  574. <span id="PA_t_status"></span>
  575. </td>
  576. </tr>
  577. <tr>
  578. <td>
  579. <a id="camera_dry_tid" href=""><strong>攝影機畫面</strong></a>
  580. </td>
  581. </tr>
  582. </table>
  583. </td>
  584. </tr>
  585. </table>
  586. </div>
  587. </div>
  588. </div>
  589. </div>
  590. <!-- 入料儲豆槽 互動視窗(模态框) -->
  591. <div class="modal fade" id="IB_Modal">
  592. <div class="modal-dialog modal-dialog-centered" style="width: 400px;">
  593. <div class="modal-content">
  594. <!-- 互動視窗 標題 -->
  595. <div class="modal-header">
  596. <h4 id="Modal_IB_title" class="modal-title">入料儲豆槽 IB 狀態</h4>
  597. <button type="button" class="close" data-dismiss="modal">&times;</button>
  598. </div>
  599. <!-- 互動視窗 內容 -->
  600. <div class="modal-body">
  601. <table style="border:0px gray solid; width: 100%;" cellpadding="3">
  602. <!--<table style="border:0px gray solid;-->
  603. <tr>
  604. <td><strong><a id="actuator_link" href="">制動器狀態</a></strong></td>
  605. <td><strong><a id="sensor_link" href="">感測器狀態</a></strong></td>
  606. </tr>
  607. <tr>
  608. <td style="vertical-align:text-top;">
  609. <table style="border:0px gray solid;" cellpadding="3">
  610. <!--font-size:12px; -->
  611. <tr>
  612. <td>
  613. <div id="tank_vacuum_status" class="actuator_status">
  614. </div>
  615. </td>
  616. <td>
  617. <a id="Vacuum" href="">真空吸料機</a>
  618. <!--<span id="tank_vacuum_t_status"></span>-->
  619. </td>
  620. </tr>
  621. </table>
  622. </td>
  623. <td style="vertical-align:text-top;">
  624. <table style="border:0px gray solid;" cellpadding="3">
  625. <!--font-size:12px; -->
  626. <tr>
  627. <td>
  628. <a id="UltraSonic" href="">咖啡生豆高度</a>
  629. </td>
  630. <td>
  631. <span id="UltraSonic_t_status"></span>
  632. </td>
  633. </tr>
  634. <tr>
  635. <td>
  636. <a id="camera_dry_tid" href=""><strong>攝影機畫面</strong></a>
  637. </td>
  638. </tr>
  639. </table>
  640. </td>
  641. </tr>
  642. </table>
  643. </div>
  644. </div>
  645. </div>
  646. </div>
  647. <!-- 清洗槽 互動視窗(模态框) -->
  648. <div class="modal fade" id="C_Modal">
  649. <div class="modal-dialog modal-dialog-centered" style="width: 400px;">
  650. <div class="modal-content">
  651. <!-- 互動視窗 標題 -->
  652. <div class="modal-header">
  653. <h4 id="Modal_C_title" class="modal-title">入料儲豆槽 IB 狀態</h4>
  654. <button type="button" class="close" data-dismiss="modal">&times;</button>
  655. </div>
  656. <!-- 互動視窗 內容 -->
  657. <div class="modal-body">
  658. <table style="border:0px gray solid; width: 100%;" cellpadding="3">
  659. <!--<table style="border:0px gray solid;-->
  660. <tr>
  661. <td><strong><a id="actuator_link" href="">制動器狀態</a></strong></td>
  662. <td><strong><a id="sensor_link" href="">感測器狀態</a></strong></td>
  663. </tr>
  664. <tr>
  665. <td style="vertical-align:text-top;">
  666. <table style="border:0px gray solid;" cellpadding="3">
  667. <!--font-size:12px; -->
  668. <tr>
  669. <td>
  670. <div id="tank_vacuum_status" class="actuator_status">
  671. </div>
  672. </td>
  673. <td>
  674. <a id="Vacuum" href="">真空吸料機</a>
  675. <!--<span id="tank_vacuum_t_status"></span>-->
  676. </td>
  677. </tr>
  678. </table>
  679. </td>
  680. <td style="vertical-align:text-top;">
  681. <table style="border:0px gray solid;" cellpadding="3">
  682. <!--font-size:12px; -->
  683. <tr>
  684. <td>
  685. <a id="UltraSonic" href="">咖啡生豆高度</a>
  686. </td>
  687. <td>
  688. <span id="UltraSonic_t_status"></span>
  689. </td>
  690. </tr>
  691. <tr>
  692. <td>
  693. <a id="camera_dry_tid" href=""><strong>攝影機畫面</strong></a>
  694. </td>
  695. </tr>
  696. </table>
  697. </td>
  698. </tr>
  699. </table>
  700. </div>
  701. </div>
  702. </div>
  703. </div>
  704. <!-- 中水桶 互動視窗(模态框) -->
  705. <div class="modal fade" id="RW_Modal">
  706. <div class="modal-dialog modal-dialog-centered" style="width: 400px;">
  707. <div class="modal-content">
  708. <!-- 互動視窗 標題 -->
  709. <div class="modal-header">
  710. <h4 id="Modal_RW_title" class="modal-title">入料儲豆槽 IB 狀態</h4>
  711. <button type="button" class="close" data-dismiss="modal">&times;</button>
  712. </div>
  713. <!-- 互動視窗 內容 -->
  714. <div class="modal-body">
  715. <table style="border:0px gray solid; width: 100%;" cellpadding="3">
  716. <!--<table style="border:0px gray solid;-->
  717. <tr>
  718. <td><strong><a id="actuator_link" href="">制動器狀態</a></strong></td>
  719. <td><strong><a id="sensor_link" href="">感測器狀態</a></strong></td>
  720. </tr>
  721. <tr>
  722. <td style="vertical-align:text-top;">
  723. <table style="border:0px gray solid;" cellpadding="3">
  724. <!--font-size:12px; -->
  725. <tr>
  726. <td>
  727. <div id="tank_vacuum_status" class="actuator_status">
  728. </div>
  729. </td>
  730. <td>
  731. <a id="Vacuum" href="">真空吸料機</a>
  732. <!--<span id="tank_vacuum_t_status"></span>-->
  733. </td>
  734. </tr>
  735. </table>
  736. </td>
  737. <td style="vertical-align:text-top;">
  738. <table style="border:0px gray solid;" cellpadding="3">
  739. <!--font-size:12px; -->
  740. <tr>
  741. <td>
  742. <a id="UltraSonic" href="">咖啡生豆高度</a>
  743. </td>
  744. <td>
  745. <span id="UltraSonic_t_status"></span>
  746. </td>
  747. </tr>
  748. <tr>
  749. <td>
  750. <a id="camera_dry_tid" href=""><strong>攝影機畫面</strong></a>
  751. </td>
  752. </tr>
  753. </table>
  754. </td>
  755. </tr>
  756. </table>
  757. </div>
  758. </div>
  759. </div>
  760. </div>
  761. <!-- 色選機 互動視窗(模态框) -->
  762. <div class="modal fade" id="CS_Modal">
  763. <div class="modal-dialog modal-dialog-centered" style="width: 400px;">
  764. <div class="modal-content">
  765. <!-- 互動視窗 標題 -->
  766. <div class="modal-header">
  767. <h4 id="Modal_CS_title" class="modal-title">入料儲豆槽 IB 狀態</h4>
  768. <button type="button" class="close" data-dismiss="modal">&times;</button>
  769. </div>
  770. <!-- 互動視窗 內容 -->
  771. <div class="modal-body">
  772. <table style="border:0px gray solid; width: 100%;" cellpadding="3">
  773. <!--<table style="border:0px gray solid;-->
  774. <tr>
  775. <td><strong><a id="actuator_link" href="">制動器狀態</a></strong></td>
  776. <td><strong><a id="sensor_link" href="">感測器狀態</a></strong></td>
  777. </tr>
  778. <tr>
  779. <td style="vertical-align:text-top;">
  780. <table style="border:0px gray solid;" cellpadding="3">
  781. <!--font-size:12px; -->
  782. <tr>
  783. <td>
  784. <div id="tank_vacuum_status" class="actuator_status">
  785. </div>
  786. </td>
  787. <td>
  788. <a id="Vacuum" href="">真空吸料機</a>
  789. <!--<span id="tank_vacuum_t_status"></span>-->
  790. </td>
  791. </tr>
  792. </table>
  793. </td>
  794. <td style="vertical-align:text-top;">
  795. <table style="border:0px gray solid;" cellpadding="3">
  796. <!--font-size:12px; -->
  797. <tr>
  798. <td>
  799. <a id="UltraSonic" href="">咖啡生豆高度</a>
  800. </td>
  801. <td>
  802. <span id="UltraSonic_t_status"></span>
  803. </td>
  804. </tr>
  805. <tr>
  806. <td>
  807. <a id="camera_dry_tid" href=""><strong>攝影機畫面</strong></a>
  808. </td>
  809. </tr>
  810. </table>
  811. </td>
  812. </tr>
  813. </table>
  814. </div>
  815. </div>
  816. </div>
  817. </div>
  818. <!-- 脫皮機 互動視窗(模态框) -->
  819. <div class="modal fade" id="P_Modal">
  820. <div class="modal-dialog modal-dialog-centered" style="width: 400px;">
  821. <div class="modal-content">
  822. <!-- 互動視窗 標題 -->
  823. <div class="modal-header">
  824. <h4 id="Modal_P_title" class="modal-title">入料儲豆槽 IB 狀態</h4>
  825. <button type="button" class="close" data-dismiss="modal">&times;</button>
  826. </div>
  827. <!-- 互動視窗 內容 -->
  828. <div class="modal-body">
  829. <table style="border:0px gray solid; width: 100%;" cellpadding="3">
  830. <!--<table style="border:0px gray solid;-->
  831. <tr>
  832. <td><strong><a id="actuator_link" href="">制動器狀態</a></strong></td>
  833. <td><strong><a id="sensor_link" href="">感測器狀態</a></strong></td>
  834. </tr>
  835. <tr>
  836. <td style="vertical-align:text-top;">
  837. <table style="border:0px gray solid;" cellpadding="3">
  838. <tr>
  839. <td>
  840. <div id="P_vacuum_status" class="actuator_status">
  841. </div>
  842. </td>
  843. <td>
  844. 真空吸料機
  845. </td>
  846. </tr>
  847. <tr>
  848. <td>
  849. <div id="tank_motor_status" class="actuator_status">
  850. </div>
  851. </td>
  852. <td>
  853. 馬達
  854. </td>
  855. </tr>
  856. </table>
  857. </td>
  858. <td style="vertical-align:text-top;">
  859. <table style="border:0px gray solid;" cellpadding="3">
  860. <!--font-size:12px; -->
  861. <tr>
  862. <td>
  863. <a id="UltraSonic" href="">咖啡生豆高度</a>
  864. </td>
  865. <td>
  866. <span id="UltraSonic_t_status"></span>
  867. </td>
  868. </tr>
  869. <tr>
  870. <td>
  871. <a id="camera_dry_tid" href=""><strong>攝影機畫面</strong></a>
  872. </td>
  873. </tr>
  874. </table>
  875. </td>
  876. </tr>
  877. </table>
  878. </div>
  879. </div>
  880. </div>
  881. </div>
  882. <!-- 發酵槽 互動視窗(模态框) -->
  883. <div class="modal fade" id="F_Modal">
  884. <div class="modal-dialog modal-dialog-centered" style="width: 400px;">
  885. <div class="modal-content">
  886. <!-- 互動視窗 標題 -->
  887. <div class="modal-header">
  888. <h4 id="Modal_F_title" class="modal-title">入料儲豆槽 IB 狀態</h4>
  889. <button type="button" class="close" data-dismiss="modal">&times;</button>
  890. </div>
  891. <!-- 互動視窗 內容 -->
  892. <div class="modal-body">
  893. <table style="border:0px gray solid; width: 100%;" cellpadding="3">
  894. <!--<table style="border:0px gray solid;-->
  895. <tr>
  896. <td><strong><a id="actuator_link" href="">制動器狀態</a></strong></td>
  897. <td><strong><a id="sensor_link" href="">感測器狀態</a></strong></td>
  898. </tr>
  899. <tr>
  900. <td style="vertical-align:text-top;">
  901. <table style="border:0px gray solid;" cellpadding="3">
  902. <!--font-size:12px; -->
  903. <tr>
  904. <td>
  905. <div id="tank_vacuum_status"
  906. style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
  907. </div>
  908. </td>
  909. <td>
  910. <a id="Vacuum" href="">真空吸料機</a>
  911. <!--<span id="tank_vacuum_t_status"></span>-->
  912. </td>
  913. </tr>
  914. <tr>
  915. <td>
  916. <div id="tank_threewayvalve_input_status"
  917. style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
  918. </div>
  919. </td>
  920. <td>
  921. <a id="ThreeWayValveInput" href="">入料三通閥</a>
  922. <!--<span id="tank_threewayvalve_input_t_status"></span>-->
  923. </td>
  924. </tr>
  925. <!-- <tr>
  926. <td>
  927. <div id="tank_solenoid_water_total_status"
  928. style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
  929. </div>
  930. </td>
  931. <td>
  932. <a id="SolenoidWaterTotal" href="">總進水電磁閥</a>
  933. <span id="tank_solenoid_water_total_t_status"></span>
  934. </td>
  935. </tr> -->
  936. <tr>
  937. <td>
  938. <div id="outer_solenoid_water_status"
  939. style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
  940. </div>
  941. </td>
  942. <td>
  943. <a id="SolenoidOuterWater" href="">保溫夾層進水電磁閥</a>
  944. <!--<span id="outer_solenoid_water_t_status"></span>-->
  945. </td>
  946. </tr>
  947. <tr>
  948. <td>
  949. <div id="tank_solenoid_water_in_status"
  950. style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
  951. </div>
  952. </td>
  953. <td>
  954. <a id="SolenoidWaterIn" href="">桶內進水電磁閥</a>
  955. <!--<span id="tank_solenoid_water_in_t_status"></span>-->
  956. </td>
  957. </tr>
  958. <tr>
  959. <td>
  960. <div id="tank_pump_sensor_status"
  961. style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
  962. </div>
  963. </td>
  964. <td>
  965. <a id="PumpSensor" href="">感測器抽水雙核隔膜泵</a>
  966. <!--<span id="tank_pump_sensor_t_status"></span>-->
  967. </td>
  968. </tr>
  969. <!-- <tr>
  970. <td>
  971. <div id="tank_threewayvalve_bean_status"
  972. style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
  973. </div>
  974. </td>
  975. <td>
  976. <a id="ThreeWayValveBean" href="">感測模組下豆三通閥</a>
  977. <span id="tank_threewayvalve_bean_t_status"></span>
  978. </td>
  979. </tr> -->
  980. <tr>
  981. <td>
  982. <div id="outer_threewayvalve_float_status"
  983. style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
  984. </div>
  985. </td>
  986. <td>
  987. <a id="ThreeWayValveFloat" href="">外桶浮選三通閥</a>
  988. <!--<span id="outer_threewayvalve_float_t_status"></span>-->
  989. </td>
  990. </tr>
  991. <tr>
  992. <td>
  993. <div id="tank_solenoid_disinfect_status"
  994. style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
  995. </div>
  996. </td>
  997. <td>
  998. <a id="SolenoidDisinfect" href="">桶內消毒電磁閥</a>
  999. <!--<span id="tank_solenoid_disinfect_t_status"></span>-->
  1000. </td>
  1001. </tr>
  1002. <tr>
  1003. <td>
  1004. <div id="tank_motor_status"
  1005. style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
  1006. </div>
  1007. </td>
  1008. <td>
  1009. <a id="Motor" href="">馬達</a>
  1010. <!--<span id="tank_motor_t_status"></span>-->
  1011. </td>
  1012. </tr>
  1013. <tr>
  1014. <td>
  1015. <div id="tank_heater1_status"
  1016. style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
  1017. </div>
  1018. </td>
  1019. <td>
  1020. <a id="Heater1" href="">加熱器 1</a>
  1021. <!--<span id="tank_heater1_t_status"></span>-->
  1022. </td>
  1023. </tr>
  1024. <tr>
  1025. <td>
  1026. <div id="tank_heater2_status"
  1027. style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
  1028. </div>
  1029. </td>
  1030. <td>
  1031. <a id="Heater2" href="">加熱器 2</a>
  1032. <!--<span id="tank_heater2_t_status"></span>-->
  1033. </td>
  1034. </tr>
  1035. <tr>
  1036. <td>
  1037. <div id="tank_temp_enable_status"
  1038. style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
  1039. </div>
  1040. </td>
  1041. <td>
  1042. <a id="TempEnable" href="">溫控開關</a>
  1043. <!--<span id="tank_temp_enable_t_status"></span>-->
  1044. </td>
  1045. </tr>
  1046. <tr>
  1047. <td>
  1048. <div id="tank_temp_status"
  1049. style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
  1050. </div>
  1051. </td>
  1052. <td>
  1053. <a id="temp" href="">溫度設定</a>
  1054. <!--<span id="tank_temp_t_status"></span>-->
  1055. </td>
  1056. </tr>
  1057. <tr>
  1058. <td>
  1059. <div id="tank_diskvalve_status"
  1060. style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
  1061. </div>
  1062. </td>
  1063. <td>
  1064. <a id="DiskValve" href="">蝴蝶閥</a>
  1065. <!--<span id="tank_diskvalve_t_status"></span>-->
  1066. </td>
  1067. </tr>
  1068. </table>
  1069. </td>
  1070. <td style="vertical-align:text-top;">
  1071. <table style="border:0px gray solid;" cellpadding="3">
  1072. <!--font-size:12px; -->
  1073. <tr>
  1074. <td>
  1075. <a id="UltraSonic" href="">水位/生豆高度</a>
  1076. </td>
  1077. <td>
  1078. <span id="UltraSonic_t_status"></span>
  1079. </td>
  1080. </tr>
  1081. <tr>
  1082. <td>
  1083. <a id="motorEncoder" href="">馬達編碼器</a>
  1084. </td>
  1085. <td>
  1086. <span id="motorEncoder_t_status"></span>
  1087. </td>
  1088. </tr>
  1089. <tr>
  1090. <td>
  1091. <a id="SHT11_Temp" href="">溫度</a>
  1092. </td>
  1093. <td>
  1094. <span id="SHT11_Temp_t_status"></span>
  1095. </td>
  1096. </tr>
  1097. <tr>
  1098. <td>
  1099. <a id="SHT11_Humidity" href="">濕度</a>
  1100. </td>
  1101. <td>
  1102. <span id="SHT11_Humidity_t_status"></span>
  1103. </td>
  1104. </tr>
  1105. <tr>
  1106. <td>
  1107. <a id="CO2" href="">二氧化碳</a>
  1108. </td>
  1109. <td>
  1110. <span id="CO2_t_status"></span>
  1111. </td>
  1112. </tr>
  1113. <tr>
  1114. <td>
  1115. <a id="PA" href="">大氣壓力</a>
  1116. </td>
  1117. <td>
  1118. <span id="PA_t_status"></span>
  1119. </td>
  1120. </tr>
  1121. <tr>
  1122. <td>
  1123. <a id="PH" href="">PH</a>
  1124. </td>
  1125. <td>
  1126. <span id="PH_t_status"></span>
  1127. </td>
  1128. </tr>
  1129. <tr>
  1130. <td>
  1131. <a id="ORP" href="">ORP</a>
  1132. </td>
  1133. <td>
  1134. <span id="ORP_t_status"></span>
  1135. </td>
  1136. </tr>
  1137. <tr>
  1138. <td>
  1139. <a id="DO" href="">DO</a>
  1140. </td>
  1141. <td>
  1142. <span id="DO_t_status"></span>
  1143. </td>
  1144. </tr>
  1145. <tr>
  1146. <td>
  1147. <a id="EC" href="">EC</a>
  1148. </td>
  1149. <td>
  1150. <span id="EC_t_status"></span>
  1151. </td>
  1152. </tr>
  1153. <tr>
  1154. <td>
  1155. 保溫夾層水位
  1156. </td>
  1157. <td>
  1158. <!-- 滿 / 未滿 -->
  1159. <span id="WaterLevel_t_status"></span>
  1160. </td>
  1161. </tr>
  1162. <tr>
  1163. <td>
  1164. <a id="camera_ferment_tid" href=""><strong>攝影機畫面</strong></a>
  1165. </td>
  1166. </tr>
  1167. </table>
  1168. </td>
  1169. </tr>
  1170. </table>
  1171. </div>
  1172. </div>
  1173. </div>
  1174. </div>
  1175. <!-- 乾燥槽 互動視窗(模态框) -->
  1176. <div class="modal fade" id="D_Modal">
  1177. <div class="modal-dialog modal-dialog-centered" style="width: 400px;">
  1178. <div class="modal-content">
  1179. <!-- 互動視窗 標題 -->
  1180. <div class="modal-header">
  1181. <h4 id="Modal_D_title" class="modal-title">入料儲豆槽 IB 狀態</h4>
  1182. <button type="button" class="close" data-dismiss="modal">&times;</button>
  1183. </div>
  1184. <!-- 互動視窗 內容 -->
  1185. <div class="modal-body">
  1186. <table style="border:0px gray solid; width: 100%;" cellpadding="3">
  1187. <!--<table style="border:0px gray solid;-->
  1188. <tr>
  1189. <td><strong><a id="actuator_link" href="">制動器狀態</a></strong></td>
  1190. <td><strong><a id="sensor_link" href="">感測器狀態</a></strong></td>
  1191. </tr>
  1192. <tr>
  1193. <td style="vertical-align:text-top;">
  1194. <table style="border:0px gray solid;" cellpadding="3">
  1195. <!--font-size:12px; -->
  1196. <tr>
  1197. <td>
  1198. <div id="tank_vacuum_status" class="actuator_status">
  1199. </div>
  1200. </td>
  1201. <td>
  1202. <a id="Vacuum" href="">真空吸料機</a>
  1203. <!--<span id="tank_vacuum_t_status"></span>-->
  1204. </td>
  1205. </tr>
  1206. </table>
  1207. </td>
  1208. <td style="vertical-align:text-top;">
  1209. <table style="border:0px gray solid;" cellpadding="3">
  1210. <!--font-size:12px; -->
  1211. <tr>
  1212. <td>
  1213. <a id="UltraSonic" href="">咖啡生豆高度</a>
  1214. </td>
  1215. <td>
  1216. <span id="UltraSonic_t_status"></span>
  1217. </td>
  1218. </tr>
  1219. <tr>
  1220. <td>
  1221. <a id="camera_dry_tid" href=""><strong>攝影機畫面</strong></a>
  1222. </td>
  1223. </tr>
  1224. </table>
  1225. </td>
  1226. </tr>
  1227. </table>
  1228. </div>
  1229. </div>
  1230. </div>
  1231. </div>
  1232. <!-- 壞果儲豆槽 互動視窗(模态框) -->
  1233. <div class="modal fade" id="BB_Modal">
  1234. <div class="modal-dialog modal-dialog-centered" style="width: 400px;">
  1235. <div class="modal-content">
  1236. <!-- 互動視窗 標題 -->
  1237. <div class="modal-header">
  1238. <h4 id="Modal_BB_title" class="modal-title">入料儲豆槽 IB 狀態</h4>
  1239. <button type="button" class="close" data-dismiss="modal">&times;</button>
  1240. </div>
  1241. <!-- 互動視窗 內容 -->
  1242. <div class="modal-body">
  1243. <table style="border:0px gray solid; width: 100%;" cellpadding="3">
  1244. <!--<table style="border:0px gray solid;-->
  1245. <tr>
  1246. <td><strong><a id="actuator_link" href="">制動器狀態</a></strong></td>
  1247. <td><strong><a id="sensor_link" href="">感測器狀態</a></strong></td>
  1248. </tr>
  1249. <tr>
  1250. <td style="vertical-align:text-top;">
  1251. <table style="border:0px gray solid;" cellpadding="3">
  1252. <!--font-size:12px; -->
  1253. <tr>
  1254. <td>
  1255. <div id="tank_vacuum_status" class="actuator_status">
  1256. </div>
  1257. </td>
  1258. <td>
  1259. <a id="Vacuum" href="">真空吸料機</a>
  1260. <!--<span id="tank_vacuum_t_status"></span>-->
  1261. </td>
  1262. </tr>
  1263. </table>
  1264. </td>
  1265. <td style="vertical-align:text-top;">
  1266. <table style="border:0px gray solid;" cellpadding="3">
  1267. <!--font-size:12px; -->
  1268. <tr>
  1269. <td>
  1270. <a id="UltraSonic" href="">咖啡生豆高度</a>
  1271. </td>
  1272. <td>
  1273. <span id="UltraSonic_t_status"></span>
  1274. </td>
  1275. </tr>
  1276. <tr>
  1277. <td>
  1278. <a id="camera_dry_tid" href=""><strong>攝影機畫面</strong></a>
  1279. </td>
  1280. </tr>
  1281. </table>
  1282. </td>
  1283. </tr>
  1284. </table>
  1285. </div>
  1286. </div>
  1287. </div>
  1288. </div>
  1289. <!-- 出料儲豆槽 互動視窗(模态框) -->
  1290. <div class="modal fade" id="OB_Modal">
  1291. <div class="modal-dialog modal-dialog-centered" style="width: 400px;">
  1292. <div class="modal-content">
  1293. <!-- 互動視窗 標題 -->
  1294. <div class="modal-header">
  1295. <h4 id="Modal_OB_title" class="modal-title">入料儲豆槽 IB 狀態</h4>
  1296. <button type="button" class="close" data-dismiss="modal">&times;</button>
  1297. </div>
  1298. <!-- 互動視窗 內容 -->
  1299. <div class="modal-body">
  1300. <table style="border:0px gray solid; width: 100%;" cellpadding="3">
  1301. <!--<table style="border:0px gray solid;-->
  1302. <tr>
  1303. <td><strong><a id="actuator_link" href="">制動器狀態</a></strong></td>
  1304. <td><strong><a id="sensor_link" href="">感測器狀態</a></strong></td>
  1305. </tr>
  1306. <tr>
  1307. <td style="vertical-align:text-top;">
  1308. <table style="border:0px gray solid;" cellpadding="3">
  1309. <!--font-size:12px; -->
  1310. <tr>
  1311. <td>
  1312. <div id="tank_vacuum_status" class="actuator_status">
  1313. </div>
  1314. </td>
  1315. <td>
  1316. <a id="Vacuum" href="">真空吸料機</a>
  1317. <!--<span id="tank_vacuum_t_status"></span>-->
  1318. </td>
  1319. </tr>
  1320. </table>
  1321. </td>
  1322. <td style="vertical-align:text-top;">
  1323. <table style="border:0px gray solid;" cellpadding="3">
  1324. <!--font-size:12px; -->
  1325. <tr>
  1326. <td>
  1327. <a id="UltraSonic" href="">咖啡生豆高度</a>
  1328. </td>
  1329. <td>
  1330. <span id="UltraSonic_t_status"></span>
  1331. </td>
  1332. </tr>
  1333. <tr>
  1334. <td>
  1335. <a id="camera_dry_tid" href=""><strong>攝影機畫面</strong></a>
  1336. </td>
  1337. </tr>
  1338. </table>
  1339. </td>
  1340. </tr>
  1341. </table>
  1342. </div>
  1343. </div>
  1344. </div>
  1345. </div>
  1346. <script>
  1347. // modal D
  1348. function update_data_D(dtid) {
  1349. console.log('dry_tank_id:' + dtid)
  1350. // dtid = dry_tank_id
  1351. $.get('/loading/D' + dtid, '', function (res) {
  1352. if (res.tank_vacuum == 0) {
  1353. $("#tank_vacuum_status").css("background-color", "#C0C0C0")
  1354. } else if (res.tank_vacuum == 1) {
  1355. $("#tank_vacuum_status").css("background-color", "forestgreen")
  1356. } else { $("#tank_vacuum_status").css("background-color", "crimson") }
  1357. if (res.tank_threewayvalve_input == 0) {
  1358. $("#tank_threewayvalve_input_status").css("background-color", "#C0C0C0")
  1359. } else if (res.tank_threewayvalve_input == 1) {
  1360. $("#tank_threewayvalve_input_status").css("background-color", "forestgreen")
  1361. } else { $("#tank_threewayvalve_input_status").css("background-color", "crimson") }
  1362. if (res.tank_threewayvalve_bean == 0) {
  1363. $("#tank_threewayvalve_bean_status").css("background-color", "#C0C0C0")
  1364. } else if (res.tank_threewayvalve_bean == 1) {
  1365. $("#tank_threewayvalve_bean_status").css("background-color", "forestgreen")
  1366. } else { $("#tank_threewayvalve_bean_status").css("background-color", "crimson") }
  1367. if (res.tank_diskvalve == 0) {
  1368. $("#tank_diskvalve_status").css("background-color", "#C0C0C0")
  1369. } else if (res.tank_diskvalve == 1) {
  1370. $("#tank_diskvalve_status").css("background-color", "forestgreen")
  1371. } else { $("#tank_diskvalve_status").css("background-color", "crimson") }
  1372. if (res.tank_solenoid_disinfect == 0) {
  1373. $("#tank_solenoid_disinfect_status").css("background-color", "#C0C0C0")
  1374. } else if (res.tank_solenoid_disinfect == 1) {
  1375. $("#tank_solenoid_disinfect_status").css("background-color", "forestgreen")
  1376. } else { $("#tank_solenoid_disinfect_status").css("background-color", "crimson") }
  1377. if (res.tank_solenoid_water == 0) {
  1378. $("#tank_solenoid_water_status").css("background-color", "#C0C0C0")
  1379. } else if (res.tank_solenoid_water == 1) {
  1380. $("#tank_solenoid_water_status").css("background-color", "forestgreen")
  1381. } else { $("#tank_solenoid_water_status").css("background-color", "crimson") }
  1382. if (res.tank_motor == 0) {
  1383. $("#tank_motor_status").css("background-color", "#C0C0C0")
  1384. } else if (res.tank_motor > 0 || res.tank_motor < 0) {
  1385. $("#tank_motor_status").css("background-color", "forestgreen")
  1386. } else { $("#tank_motor_status").css("background-color", "crimson") }
  1387. if (res.tank_blower == 0) {
  1388. $("#tank_blower_status").css("background-color", "#C0C0C0")
  1389. } else if (res.tank_blower == 1) {
  1390. $("#tank_blower_status").css("background-color", "forestgreen")
  1391. } else { $("#tank_blower_status").css("background-color", "crimson") }
  1392. if (res.tank_heater1 == 0) {
  1393. $("#tank_heater1_status").css("background-color", "#C0C0C0")
  1394. } else if (res.tank_heater1 == 1) {
  1395. $("#tank_heater1_status").css("background-color", "forestgreen")
  1396. } else { $("#tank_heater1_status").css("background-color", "crimson") }
  1397. if (res.tank_heater2 == 0) {
  1398. $("#tank_heater2_status").css("background-color", "#C0C0C0")
  1399. } else if (res.tank_heater2 == 1) {
  1400. $("#tank_heater2_status").css("background-color", "forestgreen")
  1401. } else { $("#tank_heater2_status").css("background-color", "crimson") }
  1402. if (res.tank_temp1_enable == 0) {
  1403. $("#tank_temp1_enable_status").css("background-color", "#C0C0C0")
  1404. } else if (res.tank_temp1_enable == 1) {
  1405. $("#tank_temp1_enable_status").css("background-color", "forestgreen")
  1406. } else { $("#tank_temp1_enable_status").css("background-color", "crimson") }
  1407. if (res.tank_temp1 == 0) {
  1408. $("#tank_temp1_status").css("background-color", "#C0C0C0")
  1409. } else if (res.tank_temp1 > 0) {
  1410. $("#tank_temp1_status").css("background-color", "forestgreen")
  1411. } else { $("#tank_temp1_status").css("background-color", "crimson") }
  1412. $("#tank_vacuum_t_status").text(res.tank_vacuum);
  1413. $("#tank_threewayvalve_t_status").text(res.tank_threewayvalve);
  1414. $("#tank_diskvalve_t_status").text(res.tank_diskvalve);
  1415. $("#tank_solenoid_disinfect_t_status").text(res.tank_solenoid_disinfect);
  1416. $("#tank_solenoid_water_t_status").text(res.tank_solenoid_water);
  1417. $("#tank_motor_t_status").text(res.tank_motor);
  1418. $("#tank_blower_t_status").text(res.tank_blower);
  1419. $("#tank_heater1_t_status").text(res.tank_heater1);
  1420. $("#tank_heater2_t_status").text(res.tank_heater2);
  1421. $("#tank_temp1_enable_t_status").text(res.tank_temp1_enable);
  1422. $("#tank_temp1_t_status").text(res.tank_temp1);
  1423. $("#UltraSonic_t_status").text(res.UltraSonic);
  1424. $("#SHT11_Temp_t_status").text(res.SHT11_Temp);
  1425. $("#SHT11_Humidity_t_status").text(res.SHT11_Humidity);
  1426. $("#soil_Temp_t_status").text(res.soil_Temp);
  1427. $("#soil_Humidity_t_status").text(res.soil_Humidity);
  1428. $("#soil_EC_t_status").text(res.soil_EC);
  1429. $("#PA_t_status").text(res.PA);
  1430. }, 'json');
  1431. $('#Modal_title').text("乾燥槽 D" + dtid + " 狀態")
  1432. if (status == 2) {
  1433. $('#actuator_link').attr("title", "該使用者無修改權限")
  1434. $('#sensor_link').attr("title", "該使用者無修改權限")
  1435. $('#Vacuum').attr("title", "該使用者無修改權限")
  1436. $('#ThreeWayValveInput').attr("title", "該使用者無修改權限")
  1437. $('#ThreeWayValveBean').attr("title", "該使用者無修改權限")
  1438. $('#SolenoidDisinfect').attr("title", "該使用者無修改權限")
  1439. $('#Motor').attr("title", "該使用者無修改權限")
  1440. $('#Blower').attr("title", "該使用者無修改權限")
  1441. $('#Heater1').attr("title", "該使用者無修改權限")
  1442. $('#Heater2').attr("title", "該使用者無修改權限")
  1443. $('#TempEnable').attr("title", "該使用者無修改權限")
  1444. $('#Temp').attr("title", "該使用者無修改權限")
  1445. $('#SolenoidWater').attr("title", "該使用者無修改權限")
  1446. $('#DiskValve').attr("title", "該使用者無修改權限")
  1447. } else if ( (status == 0) || (status == 1) ) {
  1448. $('#actuator_link').attr("href", "/dry_container_tank/" + dtid)
  1449. $('#sensor_link').attr("href", "/dry_container_tank/" + dtid)
  1450. $('#Vacuum').attr("href", "/ctrl_D_Vacuum/" + dtid)
  1451. $('#ThreeWayValveInput').attr("href", "/ctrl_D_ThreeWayValveInput/" + dtid)
  1452. $('#ThreeWayValveBean').attr("href", "/ctrl_D_ThreeWayValveBean/" + dtid)
  1453. $('#SolenoidDisinfect').attr("href", "/ctrl_D_SolenoidDisinfect/" + dtid)
  1454. $('#Motor').attr("href", "/ctrl_D_Motor/" + dtid)
  1455. $('#Blower').attr("href", "/ctrl_D_Blower/" + dtid)
  1456. $('#Heater1').attr("href", "/ctrl_D_Heater1/" + dtid)
  1457. $('#Heater2').attr("href", "/ctrl_D_Heater2/" + dtid)
  1458. $('#TempEnable').attr("href", "/ctrl_D_TempEnable/" + dtid)
  1459. $('#Temp').attr("href", "/ctrl_D_Temp/" + dtid)
  1460. $('#SolenoidWater').attr("href", "/ctrl_D_SolenoidWater/" + dtid)
  1461. $('#DiskValve').attr("href", "/ctrl_D_DiskValve/" + dtid)
  1462. }
  1463. $('#SHT11_Temp').attr("href", "/chart_D/SHT11_Temp/" + dtid)
  1464. $('#SHT11_Humidity').attr("href", "/chart_D/SHT11_Humidity/" + dtid)
  1465. $('#UltraSonic').attr("href", "/chart_D/UltraSonic/" + dtid)
  1466. $('#PA').attr("href", "/chart_D/PA/" + dtid)
  1467. $('#soil_Temp').attr("href", "/chart_D/soil_Temp/" + dtid)
  1468. $('#soil_Humidity').attr("href", "/chart_D/soil_Humidity/" + dtid)
  1469. $('#soil_EC').attr("href", "/chart_D/soil_EC/" + dtid)
  1470. $('#camera_dry_tid').attr("href", "/camera_D" + dtid)
  1471. setTimeout(function(){ $('#D_Modal').modal('show'); }, 300)
  1472. }
  1473. // modal IB
  1474. function update_data_IB(id) {
  1475. // ajax 制動器感測器數值
  1476. $('#Modal_IB_title').text("入料儲豆槽 " + id + " 狀態")
  1477. setTimeout(function(){ $('#IB_Modal').modal('show'); }, 300)
  1478. }
  1479. // modal C
  1480. function update_data_C(id) {
  1481. // ajax 制動器感測器數值
  1482. $('#Modal_C_title').text("清洗槽 " + id + " 狀態")
  1483. setTimeout(function(){ $('#C_Modal').modal('show'); }, 300)
  1484. }
  1485. // modal RW
  1486. function update_data_RW(id) {
  1487. // ajax 制動器感測器數值
  1488. $('#Modal_RW_title').text("中水桶 " + id + " 狀態")
  1489. setTimeout(function(){ $('#RW_Modal').modal('show'); }, 300)
  1490. }
  1491. // modal CS
  1492. function update_data_CS(id) {
  1493. // ajax 制動器感測器數值
  1494. $('#Modal_CS_title').text("色選機 " + id + " 狀態")
  1495. setTimeout(function(){ $('#CS_Modal').modal('show'); }, 300)
  1496. }
  1497. // modal P
  1498. function update_data_P(id) {
  1499. // ajax 制動器感測器數值
  1500. $('#Modal_P_title').text("脫皮機 " + id + " 狀態")
  1501. setTimeout(function(){ $('#P_Modal').modal('show'); }, 300)
  1502. }
  1503. // modal F
  1504. function update_data_F(id) {
  1505. // ajax 制動器感測器數值
  1506. $('#Modal_F_title').text("發酵槽 " + id + " 狀態")
  1507. setTimeout(function(){ $('#F_Modal').modal('show'); }, 300)
  1508. }
  1509. // modal D
  1510. function update_data_D(id) {
  1511. // ajax 制動器感測器數值
  1512. $('#Modal_D_title').text("乾燥槽 " + id + " 狀態")
  1513. setTimeout(function(){ $('#D_Modal').modal('show'); }, 300)
  1514. }
  1515. // modal BB
  1516. function update_data_BB(id) {
  1517. // ajax 制動器感測器數值
  1518. $('#Modal_BB_title').text("壞果儲豆槽 " + id + " 狀態")
  1519. setTimeout(function(){ $('#BB_Modal').modal('show'); }, 300)
  1520. }
  1521. // modal OB
  1522. function update_data_OB(id) {
  1523. // ajax 制動器感測器數值
  1524. $('#Modal_OB_title').text("出料儲豆槽 " + id + " 狀態")
  1525. setTimeout(function(){ $('#OB_Modal').modal('show'); }, 300)
  1526. }
  1527. var DM_InputBean_1 = document.getElementById('DM_InputBean_1');
  1528. DM_InputBean_1.addEventListener('click', function () { update_data_IB("1") });
  1529. var DM_InputBean_2 = document.getElementById('DM_InputBean_2');
  1530. DM_InputBean_2.addEventListener('click', function () { update_data_IB("2") });
  1531. var DM_Clean_1 = document.getElementById('DM_Clean_1');
  1532. DM_Clean_1.addEventListener('click', function () { update_data_C("1") });
  1533. var DM_Clean_2 = document.getElementById('DM_Clean_2');
  1534. DM_Clean_2.addEventListener('click', function () { update_data_C("2") });
  1535. var DM_ReclaimedWater_1 = document.getElementById('DM_ReclaimedWater_1');
  1536. DM_ReclaimedWater_1.addEventListener('click', function () { update_data_RW("1") });
  1537. var DM_ColorSelect_1 = document.getElementById('DM_ColorSelect_1');
  1538. DM_ColorSelect_1.addEventListener('click', function () { update_data_CS("1") });
  1539. var DM_ColorSelect_2 = document.getElementById('DM_ColorSelect_2');
  1540. DM_ColorSelect_2.addEventListener('click', function () { update_data_CS("2") });
  1541. var DM_Peel_1 = document.getElementById('DM_Peel_1');
  1542. DM_Peel_1.addEventListener('click', function () { update_data_P("1") });
  1543. var DM_Peel_2 = document.getElementById('DM_Peel_2');
  1544. DM_Peel_2.addEventListener('click', function () { update_data_P("2") });
  1545. var DM_Ferment_1 = document.getElementById('DM_Ferment_1');
  1546. DM_Ferment_1.addEventListener('click', function () { update_data_F("1") });
  1547. var DM_Ferment_2 = document.getElementById('DM_Ferment_2');
  1548. DM_Ferment_2.addEventListener('click', function () { update_data_F("2") });
  1549. var DM_Dry_1 = document.getElementById('DM_Dry_1');
  1550. DM_Dry_1.addEventListener('click', function () { update_data_D("1") });
  1551. var DM_BadBean_1 = document.getElementById('DM_BadBean_1');
  1552. DM_BadBean_1.addEventListener('click', function () { update_data_BB("1") });
  1553. var DM_OutputBean_1 = document.getElementById('DM_OutputBean_1');
  1554. DM_OutputBean_1.addEventListener('click', function () { update_data_OB("1") });
  1555. </script>
  1556. <div id="coffee_footer">
  1557. <!-- 匯入共同使用的 footer.html 內容 -->
  1558. {% include 'footer.html' %}
  1559. </div>
  1560. </div>
  1561. </body>
  1562. </html>