<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{{ title }}</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- 新 Bootstrap4 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.1.0/css/bootstrap.min.css">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<!-- popper.min.js 用于弹窗、提示、下拉菜单 -->
<script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script>
<!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
<script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<!--
<script src="../static/js/sign_in.js"></script>
<link rel="stylesheet" href="../static/css/sign_in.css">
-->
<style>
/* 各桶槽狀態大小的共同 CSS */
.div_DryTank_position {
text-align: center;
font-weight: bold;
border: 0px aquamarine solid;
}
.td-clickable:hover {
/* background-color: rgb(238, 236, 236); */
background-color: lavender;
transition-duration: 0.5s;
cursor: pointer;
}
/* 桶槽狀態顯示的顏色條 */
.div_DryTank_Status {
width: 140px;
height: 20px;
border-style: solid;
border-color: whitesmoke;
background-color: black;
}
.footer{
position: absolute;
bottom: 0px;
width: 100%;
background-color: #eee;
text-align: center;
}
/* 制動器狀態的圈圈 */
.actuator_status {
width: 18px;
height: 18px;
background-color:black;
border-radius: 50%;
}
/* 狀態外框的 CSS */
.table_css {
border: 0px lightsteelblue solid;
margin-right: auto;
margin-left: auto;
text-align: center;
margin-top: 5px;
width: 80%;
}
</style>
<script language="JavaScript">
// 指定 10秒 刷新網頁一次
var WebRestart
// WebRestart = setTimeout(function () { location.reload() }, 10000);
var status = '{{status}}';
$(document).ready(function(){
$("#coffee_title_pc").text("DEMO 貨櫃");
$("#coffee_title_phone").text("DEMO 貨櫃");
loading_D_status();
});
clean_input_status = ['{{CI1}}', '{{CI2}}']
console.log('clean_input_status: ' + clean_input_status)
clean_tank_status = ['{{C1}}', '{{C2}}']
console.log('clean_tank_status: ' + clean_tank_status)
reclaimedwater_tank_status = ['{{R1}}']
console.log('reclaimedwater_tank_status: ' + reclaimedwater_tank_status)
colorselect_tank_status = ['{{S1}}', '{{S2}}']
console.log('colorselect_tank_status: ' + colorselect_tank_status)
// colorselect_outputg_status = ['{{SOg1}}', '{{SOg2}}']
// console.log('colorselect_outputg_status: ' + colorselect_outputg_status)
// colorselect_outputb_status = ['{{SOb1}}', '{{SOb2}}']
// console.log('colorselect_outputb_status: ' + colorselect_outputb_status)
peel_tank_status = ['{{P1}}', '{{P2}}']
console.log('peel_tank_status: ' + peel_tank_status)
// peel_output_status = ['{{PO1}}', '{{PO2}}']
// console.log('peel_output_status: ' + peel_output_status)
ferment_tank_status = ['{{F1}}', '{{F2}}']
console.log('ferment_tank_status: ' + ferment_tank_status)
dry_tank_status = ['{{D1}}', '{{D2}}']
console.log('dry_tank_status: ' + dry_tank_status)
dry_output_status = ['{{DO1}}', '{{DO2}}']
console.log('dry_output_status: ' + dry_output_status)
peel_outputb_status = ['{{POb1}}']
console.log('peel_outputb_status: ' + peel_outputb_status)
function loading_D_status(){
// 狀態 入料儲豆槽
for (let i=0; i<clean_input_status.length; i++) {
if (clean_input_status[i] == 'CI_InputtingBean') {
$("#DM_InputBean_"+parseInt(i+1)+"_bar").css("background-color", "MediumSeaGreen")
$("#DM_InputBean_"+parseInt(i+1)+"_status").text("入豆中")
} else if (clean_input_status[i] == 'CI_Waiting') {
$("#DM_InputBean_"+parseInt(i+1)+"_bar").css("background-color", "lightgray")
$("#DM_InputBean_"+parseInt(i+1)+"_status").text("空桶等待")
} else if (clean_input_status[i] == 'CI_OutputtingBean') {
$("#DM_InputBean_"+parseInt(i+1)+"_bar").css("background-color", "MediumSeaGreen")
$("#DM_InputBean_"+parseInt(i+1)+"_status").text("可出豆")
} else if (clean_input_status[i] == 'CI_Warning') {
$("#DM_InputBean_"+parseInt(i+1)+"_bar").css("background-color", "crimson")
$("#DM_InputBean_"+parseInt(i+1)+"_status").text("發生錯誤")
$("#DM_InputBean_"+parseInt(i+1)+"_status").css("color", "crimson")
} else {
console.log('DM_InputBean pass')
}
}
// 狀態 清洗槽 1
for (let i=0; i<clean_tank_status.length; i++) {
if (clean_tank_status[i] == 'C_InputtingBean') {
$("#DM_Clean_"+parseInt(i+1)+"_bar").css("background-color", "MediumSeaGreen")
$("#DM_Clean_"+parseInt(i+1)+"_status").text("入豆中")
} else if (clean_tank_status[i] == 'C_Waiting') {
$("#DM_Clean_"+parseInt(i+1)+"_bar").css("background-color", "lightgray")
$("#DM_Clean_"+parseInt(i+1)+"_status").text("空桶等待")
} else if (clean_tank_status[i] == 'C_InputtingWater1') {
$("#DM_Clean_"+parseInt(i+1)+"_bar").css("background-color", "MediumSeaGreen")
$("#DM_Clean_"+parseInt(i+1)+"_status").text("入水 1")
} else if (clean_tank_status[i] == 'C_InputtingWater2') {
$("#DM_Clean_"+parseInt(i+1)+"_bar").css("background-color", "MediumSeaGreen")
$("#DM_Clean_"+parseInt(i+1)+"_status").text("入水 2")
} else if (clean_tank_status[i] == 'C_InputtingWater3') {
$("#DM_Clean_"+parseInt(i+1)+"_bar").css("background-color", "MediumSeaGreen")
$("#DM_Clean_"+parseInt(i+1)+"_status").text("入水 3")
} else if (clean_tank_status[i] == 'C_OutputtingBean') {
$("#DM_Clean_"+parseInt(i+1)+"_bar").css("background-color", "MediumSeaGreen")
$("#DM_Clean_"+parseInt(i+1)+"_status").text("可出豆")
} else if (clean_tank_status[i] == 'C_Warning') {
$("#DM_Clean_"+parseInt(i+1)+"_bar").css("background-color", "crimson")
$("#DM_Clean_"+parseInt(i+1)+"_status").text("發生錯誤")
$("#DM_Clean_"+parseInt(i+1)+"_status").css("color", "crimson")
} else {
console.log('DM_Clean pass')
}
}
// 狀態 中水桶
for (let i=0; i<reclaimedwater_tank_status.length; i++) {
if (reclaimedwater_tank_status[i] == 'R_Waiting') {
$("#DM_ReclaimedWater_"+parseInt(i+1)+"_bar").css("background-color", "lightgray")
$("#DM_ReclaimedWater_"+parseInt(i+1)+"_status").text("空桶等待")
} else {
console.log('DM_ReclaimedWater pass')
}
}
// 狀態 色選機
for (let i=0; i<colorselect_tank_status.length; i++) {
if (colorselect_tank_status[i] == 'S_Waiting') {
$("#DM_ColorSelect_"+parseInt(i+1)+"_bar").css("background-color", "lightgray")
$("#DM_ColorSelect_"+parseInt(i+1)+"_status").text("空桶等待")
} else if (colorselect_tank_status[i] == 'S_Warning') {
$("#DM_ColorSelect_"+parseInt(i+1)+"_bar").css("background-color", "crimson")
$("#DM_ColorSelect_"+parseInt(i+1)+"_status").text("發生錯誤")
$("#DM_ColorSelect_"+parseInt(i+1)+"_status").css("color", "crimson")
} else {
console.log('DM_ColorSelect pass')
}
}
// 狀態 脫皮機
for (let i=0; i<peel_tank_status.length; i++) {
if (peel_tank_status[i] == 'P_Waiting') {
$("#DM_Peel_"+parseInt(i+1)+"_bar").css("background-color", "lightgray")
$("#DM_Peel_"+parseInt(i+1)+"_status").text("空桶等待")
} else if (peel_tank_status[i] == 'P_Peeling') {
$("#DM_Peel_"+parseInt(i+1)+"_bar").css("background-color", "crimson")
$("#DM_Peel_"+parseInt(i+1)+"_status").text("發生錯誤")
$("#DM_Peel_"+parseInt(i+1)+"_status").css("color", "crimson")
} else {
console.log('DM_Peel pass')
}
}
// 狀態 發酵槽 1
for (let i=0; i<ferment_tank_status.length; i++) {
if (ferment_tank_status[i] == 'F_InputtingBean') {
$("#DM_Ferment_"+parseInt(i+1)+"_bar").css("background-color", "MediumSeaGreen")
$("#DM_Ferment_"+parseInt(i+1)+"_status").text("入豆中")
} else if (ferment_tank_status[i] == 'F_Waiting') {
$("#DM_Ferment_"+parseInt(i+1)+"_bar").css("background-color", "lightgray")
$("#DM_Ferment_"+parseInt(i+1)+"_status").text("空桶等待")
} else if (ferment_tank_status[i] == 'F_OutputtingBean') {
$("#DM_Ferment_"+parseInt(i+1)+"_bar").css("background-color", "MediumSeaGreen")
$("#DM_Ferment_"+parseInt(i+1)+"_status").text("可出豆")
} else if (ferment_tank_status[i] == 'F_InputtingBean_Pause') {
$("#DM_Ferment_"+parseInt(i+1)+"_bar").css("background-color", "MediumSeaGreen")
$("#DM_Ferment_"+parseInt(i+1)+"_status").text("入豆暫停")
} else if (ferment_tank_status[i] == 'F_InputtingBean_Finish') {
$("#DM_Ferment_"+parseInt(i+1)+"_bar").css("background-color", "MediumSeaGreen")
$("#DM_Ferment_"+parseInt(i+1)+"_status").text("入豆完成")
} else if (ferment_tank_status[i] == 'F_InputtingWater') {
$("#DM_Ferment_"+parseInt(i+1)+"_bar").css("background-color", "MediumSeaGreen")
$("#DM_Ferment_"+parseInt(i+1)+"_status").text("入水中")
} else if (ferment_tank_status[i] == 'F_Fermenting') {
$("#DM_Ferment_"+parseInt(i+1)+"_bar").css("background-color", "MediumSeaGreen")
$("#DM_Ferment_"+parseInt(i+1)+"_status").text("發酵中")
} else if (ferment_tank_status[i] == 'F_Warning') {
$("#DM_Ferment_"+parseInt(i+1)+"_bar").css("background-color", "crimson")
$("#DM_Ferment_"+parseInt(i+1)+"_status").text("發生錯誤")
$("#DM_Ferment_"+parseInt(i+1)+"_status").css("color", "crimson")
} else {
console.log('DM_Ferment pass')
}
}
// 狀態 乾燥槽
for (let i=0; i<dry_tank_status.length; i++) {
if (dry_tank_status[i] == 'D_InputtingBean') {
$("#DM_Dry_"+parseInt(i+1)+"_bar").css("background-color", "MediumSeaGreen")
$("#DM_Dry_"+parseInt(i+1)+"_status").text("入豆中")
} else if (dry_tank_status[i] == 'D_Waiting') {
$("#DM_Dry_"+parseInt(i+1)+"_bar").css("background-color", "lightgray")
$("#DM_Dry_"+parseInt(i+1)+"_status").text("空桶等待")
} else if (dry_tank_status[i] == 'D_Drying') {
$("#DM_Dry_"+parseInt(i+1)+"_bar").css("background-color", "MediumSeaGreen")
$("#DM_Dry_"+parseInt(i+1)+"_status").text("乾燥中")
} else if (dry_tank_status[i] == 'D_OutputtingBean') {
$("#DM_Dry_"+parseInt(i+1)+"_bar").css("background-color", "MediumSeaGreen")
$("#DM_Dry_"+parseInt(i+1)+"_status").text("可出豆")
} else if (dry_tank_status[i] == 'D_Warning') {
$("#DM_Dry_"+parseInt(i+1)+"_bar").css("background-color", "crimson")
$("#DM_Dry_"+parseInt(i+1)+"_status").text("發生錯誤")
$("#DM_Dry_"+parseInt(i+1)+"_status").css("color", "crimson")
} else {
console.log('DM_InputBean pass')
}
}
}
</script>
</head>
<body>
<div id="wrapper">
<div id="coffee_header">
<!-- 匯入共同使用的 header.html 內容 -->
{% include 'header.html' %}
</div>
<div style="height: 635px;">
<table class="table_css" cellpadding="6" border="1">
<!-- 第一列 -->
<tr>
<td class="td-clickable">
<div id="DM_InputBean_1" tabindex="0" class="div_DryTank_position" role="button">
<span class="demo_status_css">入料儲豆槽 1</span><br>
<span id="DM_InputBean_1_status" class="demo_status_css"></span>
<div id="DM_InputBean_1_bar" class="div_DryTank_Status"></div>
</div>
</td>
<td style="width: 10px; font-weight: 900;">
入料
</td>
<td class="td-clickable">
<div id="DM_Clean_1" tabindex="0" class="div_DryTank_position" role="button">
<span class="demo_status_css">清洗槽 1</span><br>
<span id="DM_Clean_1_status" class="demo_status_css"></span>
<div id="DM_Clean_1_bar" class="div_DryTank_Status"></div>
</div>
</td>
<td class="td-clickable">
<div id="DM_ReclaimedWater_1" tabindex="0" class="div_DryTank_position" role="button">
<span class="demo_status_css">中水桶</span><br>
<span id="DM_ReclaimedWater_1_status" class="demo_status_css"></span>
<div id="DM_ReclaimedWater_1_bar" class="div_DryTank_Status"></div>
</div>
</td>
<td class="td-clickable">
<div id="DM_ColorSelect_1" tabindex="0" class="div_DryTank_position" role="button">
<span class="demo_status_css">色選機 1</span><br>
<span id="DM_ColorSelect_1_status" class="demo_status_css"></span>
<div id="DM_ColorSelect_1_bar" class="div_DryTank_Status"></div>
</div>
</td>
<td class="td-clickable">
<div id="DM_Peel_1" tabindex="0" class="div_DryTank_position" role="button">
<span class="demo_status_css">脫皮機 1</span><br>
<span id="DM_Peel_1_status" class="demo_status_css"></span>
<div id="DM_Peel_1_bar" class="div_DryTank_Status"></div>
</div>
</td>
<td class="td-clickable">
<div id="DM_Ferment_1" tabindex="0" class="div_DryTank_position" role="button">
<span class="demo_status_css">發酵槽 1</span><br>
<span id="DM_Ferment_1_status" class="demo_status_css"></span>
<div id="DM_Ferment_1_bar" class="div_DryTank_Status"></div>
</div>
</td>
<td>
</td>
<td style="width: 10px; font-weight: 900;">
出料
</td>
<td class="td-clickable">
<div id="DM_BadBean_1" tabindex="0" class="div_DryTank_position" role="button">
<span class="demo_status_css">壞果儲豆槽</span><br>
<span id="DM_BadBean_1_status" class="demo_status_css"></span>
<div id="DM_BadBean_1_bar" class="div_DryTank_Status"></div>
</div>
</td>
</tr>
<!-- 第二列 貨櫃圖片 -->
<tr>
<td colspan="10" class="td-clickable">
<a href="/demo_auto" target="_blank">
<img src="../static/img/web_demo_container.png" style="margin: auto; width: 1100px;">
</a>
</td>
</tr>
<!-- 第三列 -->
<tr>
<td class="td-clickable">
<div id="DM_InputBean_2" tabindex="0" class="div_DryTank_position" role="button">
<span class="demo_status_css">入料儲豆槽 2</span><br>
<span id="DM_InputBean_2_status" class="demo_status_css"></span>
<div id="DM_InputBean_2_bar" class="div_DryTank_Status"></div>
</div>
</td>
<td style="width: 10px; font-weight: 900;">
入料
</td>
<td class="td-clickable">
<div id="DM_Clean_2" tabindex="0" class="div_DryTank_position" role="button">
<span class="demo_status_css">清洗槽 2</span><br>
<span id="DM_Clean_2_status" class="demo_status_css"></span>
<div id="DM_Clean_2_bar" class="div_DryTank_Status"></div>
</div>
</td>
<td>
</td>
<td class="td-clickable">
<div id="DM_ColorSelect_2" tabindex="0" class="div_DryTank_position" role="button">
<span class="demo_status_css">色選機 2</span><br>
<span id="DM_ColorSelect_2_status" class="demo_status_css"></span>
<div id="DM_ColorSelect_2_bar" class="div_DryTank_Status"></div>
</div>
</td>
<td class="td-clickable">
<div id="DM_Peel_2" tabindex="0" class="div_DryTank_position" role="button">
<span class="demo_status_css">脫皮機 2</span><br>
<span id="DM_Peel_2_status" class="demo_status_css"></span>
<div id="DM_Peel_2_bar" class="div_DryTank_Status"></div>
</div>
</td>
<td class="td-clickable">
<div id="DM_Ferment_2" tabindex="0" class="div_DryTank_position" role="button">
<span class="demo_status_css">發酵槽 2</span><br>
<span id="DM_Ferment_2_status" class="demo_status_css"></span>
<div id="DM_Ferment_2_bar" class="div_DryTank_Status"></div>
</div>
</td>
<td class="td-clickable">
<div id="DM_Dry_1" tabindex="0" class="div_DryTank_position" role="button">
<span class="demo_status_css">乾燥槽</span><br>
<span id="DM_Dry_1_status" class="demo_status_css"></span>
<div id="DM_Dry_1_bar" class="div_DryTank_Status"></div>
</div>
</td>
<td style="width: 10px; font-weight: 900;">
出料
</td>
<td class="td-clickable">
<div id="DM_OutputBean_1" tabindex="0" class="div_DryTank_position" role="button">
<span class="demo_status_css">出料儲豆槽</span><br>
<span id="DM_OutputBean_1_status" class="demo_status_css"></span>
<div id="DM_OutputBean_1_bar" class="div_DryTank_Status"></div>
</div>
</td>
</tr>
</table>
</div>
<!-- 乾燥槽 互動視窗(模态框) -->
<div class="modal fade" id="D_Modal">
<div class="modal-dialog modal-dialog-centered" style="width: 400px;">
<div class="modal-content">
<!-- 互動視窗 標題 -->
<div class="modal-header">
<h4 id="Modal_title" class="modal-title">乾燥槽 D1 狀態</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- 互動視窗 內容 -->
<div class="modal-body">
<table style="border:0px gray solid; width: 100%;" cellpadding="3">
<!--<table style="border:0px gray solid;-->
<tr>
<td><strong><a id="actuator_link" href="">制動器狀態</a></strong></td>
<td><strong><a id="sensor_link" href="">感測器狀態</a></strong></td>
</tr>
<tr>
<td style="vertical-align:text-top;">
<table style="border:0px gray solid;" cellpadding="3">
<!--font-size:12px; -->
<tr>
<td>
<div id="tank_vacuum_status" class="actuator_status">
</div>
</td>
<td>
<a id="Vacuum" href="">真空吸料機</a>
<!--<span id="tank_vacuum_t_status"></span>-->
</td>
</tr>
<tr>
<td>
<div id="tank_threewayvalve_input_status" class="actuator_status">
</div>
</td>
<td>
<a id="ThreeWayValveInput" href="">入料三通閥</a>
<!--<span id="tank_threewayvalve_t_status"></span>-->
</td>
</tr>
<tr>
<td>
<div id="tank_threewayvalve_bean_status" class="actuator_status">
</div>
</td>
<td>
<a id="ThreeWayValveBean" href="">測豆三通閥</a>
<!--<span id="tank_threewayvalve_t_status"></span>-->
</td>
</tr>
<tr>
<td>
<div id="tank_solenoid_disinfect_status" class="actuator_status">
</div>
</td>
<td>
<a id="SolenoidDisinfect" href="">消毒電磁閥</a>
<!--<span id="tank_solenoid_disinfect_t_status"></span>-->
</td>
</tr>
<tr>
<td>
<div id="tank_motor_status" class="actuator_status">
</div>
</td>
<td>
<a id="Motor" href="">馬達</a>
<!--<span id="tank_motor_t_status"></span>-->
</td>
</tr>
<tr>
<td>
<div id="tank_blower_status" class="actuator_status">
</div>
</td>
<td>
<a id="Blower" href="">鼓風機</a>
<!--<span id="tank_blower_t_status"></span>-->
</td>
</tr>
<tr>
<td>
<div id="tank_heater1_status" class="actuator_status">
</div>
</td>
<td>
<a id="Heater1" href="">加熱器 1</a>
<!--<span id="tank_heater1_t_status"></span>-->
</td>
</tr>
<tr>
<td>
<div id="tank_heater2_status" class="actuator_status">
</div>
</td>
<td>
<a id="Heater2" href="">加熱器 2</a>
<!--<span id="tank_heater2_t_status"></span>-->
</td>
</tr>
<tr>
<td>
<div id="tank_temp1_enable_status" class="actuator_status">
</div>
</td>
<td>
<a id="TempEnable" href="">溫控開關</a>
<!--<span id="tank_temp1_enable_t_status"></span>-->
</td>
</tr>
<tr>
<td>
<div id="tank_temp1_status" class="actuator_status">
</div>
</td>
<td>
<a id="Temp" href="">設定溫度</a>
<!--<span id="tank_temp1_t_status"></span>-->
</td>
</tr>
<tr>
<td>
<div id="tank_solenoid_water_status" class="actuator_status">
</div>
</td>
<td>
<a id="SolenoidWater" href="">排水電磁閥</a>
<!--<span id="tank_solenoid_water_t_status"></span>-->
</td>
</tr>
<tr>
<td>
<div id="tank_diskvalve_status" class="actuator_status">
</div>
</td>
<td>
<a id="DiskValve" href="">蝴蝶閥</a>
<!--<span id="tank_diskvalve_t_status"></span>-->
</td>
</tr>
</table>
</td>
<td style="vertical-align:text-top;">
<table style="border:0px gray solid;" cellpadding="3">
<!--font-size:12px; -->
<tr>
<td>
<a id="UltraSonic" href="">咖啡生豆高度</a>
</td>
<td>
<span id="UltraSonic_t_status"></span>
</td>
</tr>
<tr>
<td>
<a id="SHT11_Temp" href="">乾燥槽溫度</a>
</td>
<td>
<span id="SHT11_Temp_t_status"></span>
</td>
</tr>
<tr>
<td>
<a id="SHT11_Humidity" href="">乾燥槽濕度</a>
</td>
<td>
<span id="SHT11_Humidity_t_status"></span>
</td>
</tr>
<tr>
<td>
<a id="soil_Temp" href="">咖啡生豆溫度</a>
</td>
<td>
<span id="soil_Temp_t_status"></span>
</td>
</tr>
<tr>
<td>
<a id="soil_Humidity" href="">咖啡生豆濕度</a>
</td>
<td>
<span id="soil_Humidity_t_status"></span>
</td>
</tr>
<tr>
<td>
<a id="soil_EC" href="">咖啡生豆 EC</a>
</td>
<td>
<span id="soil_EC_t_status"></span>
</td>
</tr>
<tr>
<td>
<a id="PA" href="">桶內壓力</a>
</td>
<td>
<span id="PA_t_status"></span>
</td>
</tr>
<tr>
<td>
<a id="camera_dry_tid" href=""><strong>攝影機畫面</strong></a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
<!-- 入料儲豆槽 互動視窗(模态框) -->
<div class="modal fade" id="IB_Modal">
<div class="modal-dialog modal-dialog-centered" style="width: 400px;">
<div class="modal-content">
<!-- 互動視窗 標題 -->
<div class="modal-header">
<h4 id="Modal_IB_title" class="modal-title">入料儲豆槽 IB 狀態</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- 互動視窗 內容 -->
<div class="modal-body">
<table style="border:0px gray solid; width: 100%;" cellpadding="3">
<!--<table style="border:0px gray solid;-->
<tr>
<td><strong><a id="actuator_link" href="">制動器狀態</a></strong></td>
<td><strong><a id="sensor_link" href="">感測器狀態</a></strong></td>
</tr>
<tr>
<td style="vertical-align:text-top;">
<table style="border:0px gray solid;" cellpadding="3">
<!--font-size:12px; -->
<tr>
<td>
<div id="tank_vacuum_status" class="actuator_status">
</div>
</td>
<td>
<a id="Vacuum" href="">真空吸料機</a>
<!--<span id="tank_vacuum_t_status"></span>-->
</td>
</tr>
</table>
</td>
<td style="vertical-align:text-top;">
<table style="border:0px gray solid;" cellpadding="3">
<!--font-size:12px; -->
<tr>
<td>
<a id="UltraSonic" href="">咖啡生豆高度</a>
</td>
<td>
<span id="UltraSonic_t_status"></span>
</td>
</tr>
<tr>
<td>
<a id="camera_dry_tid" href=""><strong>攝影機畫面</strong></a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
<!-- 清洗槽 互動視窗(模态框) -->
<div class="modal fade" id="C_Modal">
<div class="modal-dialog modal-dialog-centered" style="width: 400px;">
<div class="modal-content">
<!-- 互動視窗 標題 -->
<div class="modal-header">
<h4 id="Modal_C_title" class="modal-title">入料儲豆槽 IB 狀態</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- 互動視窗 內容 -->
<div class="modal-body">
<table style="border:0px gray solid; width: 100%;" cellpadding="3">
<!--<table style="border:0px gray solid;-->
<tr>
<td><strong><a id="actuator_link" href="">制動器狀態</a></strong></td>
<td><strong><a id="sensor_link" href="">感測器狀態</a></strong></td>
</tr>
<tr>
<td style="vertical-align:text-top;">
<table style="border:0px gray solid;" cellpadding="3">
<!--font-size:12px; -->
<tr>
<td>
<div id="tank_vacuum_status" class="actuator_status">
</div>
</td>
<td>
<a id="Vacuum" href="">真空吸料機</a>
<!--<span id="tank_vacuum_t_status"></span>-->
</td>
</tr>
</table>
</td>
<td style="vertical-align:text-top;">
<table style="border:0px gray solid;" cellpadding="3">
<!--font-size:12px; -->
<tr>
<td>
<a id="UltraSonic" href="">咖啡生豆高度</a>
</td>
<td>
<span id="UltraSonic_t_status"></span>
</td>
</tr>
<tr>
<td>
<a id="camera_dry_tid" href=""><strong>攝影機畫面</strong></a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
<!-- 中水桶 互動視窗(模态框) -->
<div class="modal fade" id="RW_Modal">
<div class="modal-dialog modal-dialog-centered" style="width: 400px;">
<div class="modal-content">
<!-- 互動視窗 標題 -->
<div class="modal-header">
<h4 id="Modal_RW_title" class="modal-title">入料儲豆槽 IB 狀態</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- 互動視窗 內容 -->
<div class="modal-body">
<table style="border:0px gray solid; width: 100%;" cellpadding="3">
<!--<table style="border:0px gray solid;-->
<tr>
<td><strong><a id="actuator_link" href="">制動器狀態</a></strong></td>
<td><strong><a id="sensor_link" href="">感測器狀態</a></strong></td>
</tr>
<tr>
<td style="vertical-align:text-top;">
<table style="border:0px gray solid;" cellpadding="3">
<!--font-size:12px; -->
<tr>
<td>
<div id="tank_vacuum_status" class="actuator_status">
</div>
</td>
<td>
<a id="Vacuum" href="">真空吸料機</a>
<!--<span id="tank_vacuum_t_status"></span>-->
</td>
</tr>
</table>
</td>
<td style="vertical-align:text-top;">
<table style="border:0px gray solid;" cellpadding="3">
<!--font-size:12px; -->
<tr>
<td>
<a id="UltraSonic" href="">咖啡生豆高度</a>
</td>
<td>
<span id="UltraSonic_t_status"></span>
</td>
</tr>
<tr>
<td>
<a id="camera_dry_tid" href=""><strong>攝影機畫面</strong></a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
<!-- 色選機 互動視窗(模态框) -->
<div class="modal fade" id="CS_Modal">
<div class="modal-dialog modal-dialog-centered" style="width: 400px;">
<div class="modal-content">
<!-- 互動視窗 標題 -->
<div class="modal-header">
<h4 id="Modal_CS_title" class="modal-title">入料儲豆槽 IB 狀態</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- 互動視窗 內容 -->
<div class="modal-body">
<table style="border:0px gray solid; width: 100%;" cellpadding="3">
<!--<table style="border:0px gray solid;-->
<tr>
<td><strong><a id="actuator_link" href="">制動器狀態</a></strong></td>
<td><strong><a id="sensor_link" href="">感測器狀態</a></strong></td>
</tr>
<tr>
<td style="vertical-align:text-top;">
<table style="border:0px gray solid;" cellpadding="3">
<!--font-size:12px; -->
<tr>
<td>
<div id="tank_vacuum_status" class="actuator_status">
</div>
</td>
<td>
<a id="Vacuum" href="">真空吸料機</a>
<!--<span id="tank_vacuum_t_status"></span>-->
</td>
</tr>
</table>
</td>
<td style="vertical-align:text-top;">
<table style="border:0px gray solid;" cellpadding="3">
<!--font-size:12px; -->
<tr>
<td>
<a id="UltraSonic" href="">咖啡生豆高度</a>
</td>
<td>
<span id="UltraSonic_t_status"></span>
</td>
</tr>
<tr>
<td>
<a id="camera_dry_tid" href=""><strong>攝影機畫面</strong></a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
<!-- 脫皮機 互動視窗(模态框) -->
<div class="modal fade" id="P_Modal">
<div class="modal-dialog modal-dialog-centered" style="width: 400px;">
<div class="modal-content">
<!-- 互動視窗 標題 -->
<div class="modal-header">
<h4 id="Modal_P_title" class="modal-title">入料儲豆槽 IB 狀態</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- 互動視窗 內容 -->
<div class="modal-body">
<table style="border:0px gray solid; width: 100%;" cellpadding="3">
<!--<table style="border:0px gray solid;-->
<tr>
<td><strong><a id="actuator_link" href="">制動器狀態</a></strong></td>
<td><strong><a id="sensor_link" href="">感測器狀態</a></strong></td>
</tr>
<tr>
<td style="vertical-align:text-top;">
<table style="border:0px gray solid;" cellpadding="3">
<tr>
<td>
<div id="P_vacuum_status" class="actuator_status">
</div>
</td>
<td>
真空吸料機
</td>
</tr>
<tr>
<td>
<div id="tank_motor_status" class="actuator_status">
</div>
</td>
<td>
馬達
</td>
</tr>
</table>
</td>
<td style="vertical-align:text-top;">
<table style="border:0px gray solid;" cellpadding="3">
<!--font-size:12px; -->
<tr>
<td>
<a id="UltraSonic" href="">咖啡生豆高度</a>
</td>
<td>
<span id="UltraSonic_t_status"></span>
</td>
</tr>
<tr>
<td>
<a id="camera_dry_tid" href=""><strong>攝影機畫面</strong></a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
<!-- 發酵槽 互動視窗(模态框) -->
<div class="modal fade" id="F_Modal">
<div class="modal-dialog modal-dialog-centered" style="width: 400px;">
<div class="modal-content">
<!-- 互動視窗 標題 -->
<div class="modal-header">
<h4 id="Modal_F_title" class="modal-title">入料儲豆槽 IB 狀態</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- 互動視窗 內容 -->
<div class="modal-body">
<table style="border:0px gray solid; width: 100%;" cellpadding="3">
<!--<table style="border:0px gray solid;-->
<tr>
<td><strong><a id="actuator_link" href="">制動器狀態</a></strong></td>
<td><strong><a id="sensor_link" href="">感測器狀態</a></strong></td>
</tr>
<tr>
<td style="vertical-align:text-top;">
<table style="border:0px gray solid;" cellpadding="3">
<!--font-size:12px; -->
<tr>
<td>
<div id="tank_vacuum_status"
style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
</div>
</td>
<td>
<a id="Vacuum" href="">真空吸料機</a>
<!--<span id="tank_vacuum_t_status"></span>-->
</td>
</tr>
<tr>
<td>
<div id="tank_threewayvalve_input_status"
style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
</div>
</td>
<td>
<a id="ThreeWayValveInput" href="">入料三通閥</a>
<!--<span id="tank_threewayvalve_input_t_status"></span>-->
</td>
</tr>
<!-- <tr>
<td>
<div id="tank_solenoid_water_total_status"
style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
</div>
</td>
<td>
<a id="SolenoidWaterTotal" href="">總進水電磁閥</a>
<span id="tank_solenoid_water_total_t_status"></span>
</td>
</tr> -->
<tr>
<td>
<div id="outer_solenoid_water_status"
style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
</div>
</td>
<td>
<a id="SolenoidOuterWater" href="">保溫夾層進水電磁閥</a>
<!--<span id="outer_solenoid_water_t_status"></span>-->
</td>
</tr>
<tr>
<td>
<div id="tank_solenoid_water_in_status"
style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
</div>
</td>
<td>
<a id="SolenoidWaterIn" href="">桶內進水電磁閥</a>
<!--<span id="tank_solenoid_water_in_t_status"></span>-->
</td>
</tr>
<tr>
<td>
<div id="tank_pump_sensor_status"
style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
</div>
</td>
<td>
<a id="PumpSensor" href="">感測器抽水雙核隔膜泵</a>
<!--<span id="tank_pump_sensor_t_status"></span>-->
</td>
</tr>
<!-- <tr>
<td>
<div id="tank_threewayvalve_bean_status"
style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
</div>
</td>
<td>
<a id="ThreeWayValveBean" href="">感測模組下豆三通閥</a>
<span id="tank_threewayvalve_bean_t_status"></span>
</td>
</tr> -->
<tr>
<td>
<div id="outer_threewayvalve_float_status"
style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
</div>
</td>
<td>
<a id="ThreeWayValveFloat" href="">外桶浮選三通閥</a>
<!--<span id="outer_threewayvalve_float_t_status"></span>-->
</td>
</tr>
<tr>
<td>
<div id="tank_solenoid_disinfect_status"
style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
</div>
</td>
<td>
<a id="SolenoidDisinfect" href="">桶內消毒電磁閥</a>
<!--<span id="tank_solenoid_disinfect_t_status"></span>-->
</td>
</tr>
<tr>
<td>
<div id="tank_motor_status"
style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
</div>
</td>
<td>
<a id="Motor" href="">馬達</a>
<!--<span id="tank_motor_t_status"></span>-->
</td>
</tr>
<tr>
<td>
<div id="tank_heater1_status"
style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
</div>
</td>
<td>
<a id="Heater1" href="">加熱器 1</a>
<!--<span id="tank_heater1_t_status"></span>-->
</td>
</tr>
<tr>
<td>
<div id="tank_heater2_status"
style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
</div>
</td>
<td>
<a id="Heater2" href="">加熱器 2</a>
<!--<span id="tank_heater2_t_status"></span>-->
</td>
</tr>
<tr>
<td>
<div id="tank_temp_enable_status"
style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
</div>
</td>
<td>
<a id="TempEnable" href="">溫控開關</a>
<!--<span id="tank_temp_enable_t_status"></span>-->
</td>
</tr>
<tr>
<td>
<div id="tank_temp_status"
style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
</div>
</td>
<td>
<a id="temp" href="">溫度設定</a>
<!--<span id="tank_temp_t_status"></span>-->
</td>
</tr>
<tr>
<td>
<div id="tank_diskvalve_status"
style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
</div>
</td>
<td>
<a id="DiskValve" href="">蝴蝶閥</a>
<!--<span id="tank_diskvalve_t_status"></span>-->
</td>
</tr>
</table>
</td>
<td style="vertical-align:text-top;">
<table style="border:0px gray solid;" cellpadding="3">
<!--font-size:12px; -->
<tr>
<td>
<a id="UltraSonic" href="">水位/生豆高度</a>
</td>
<td>
<span id="UltraSonic_t_status"></span>
</td>
</tr>
<tr>
<td>
<a id="motorEncoder" href="">馬達編碼器</a>
</td>
<td>
<span id="motorEncoder_t_status"></span>
</td>
</tr>
<tr>
<td>
<a id="SHT11_Temp" href="">溫度</a>
</td>
<td>
<span id="SHT11_Temp_t_status"></span>
</td>
</tr>
<tr>
<td>
<a id="SHT11_Humidity" href="">濕度</a>
</td>
<td>
<span id="SHT11_Humidity_t_status"></span>
</td>
</tr>
<tr>
<td>
<a id="CO2" href="">二氧化碳</a>
</td>
<td>
<span id="CO2_t_status"></span>
</td>
</tr>
<tr>
<td>
<a id="PA" href="">大氣壓力</a>
</td>
<td>
<span id="PA_t_status"></span>
</td>
</tr>
<tr>
<td>
<a id="PH" href="">PH</a>
</td>
<td>
<span id="PH_t_status"></span>
</td>
</tr>
<tr>
<td>
<a id="ORP" href="">ORP</a>
</td>
<td>
<span id="ORP_t_status"></span>
</td>
</tr>
<tr>
<td>
<a id="DO" href="">DO</a>
</td>
<td>
<span id="DO_t_status"></span>
</td>
</tr>
<tr>
<td>
<a id="EC" href="">EC</a>
</td>
<td>
<span id="EC_t_status"></span>
</td>
</tr>
<tr>
<td>
保溫夾層水位
</td>
<td>
<!-- 滿 / 未滿 -->
<span id="WaterLevel_t_status"></span>
</td>
</tr>
<tr>
<td>
<a id="camera_ferment_tid" href=""><strong>攝影機畫面</strong></a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
<!-- 乾燥槽 互動視窗(模态框) -->
<div class="modal fade" id="D_Modal">
<div class="modal-dialog modal-dialog-centered" style="width: 400px;">
<div class="modal-content">
<!-- 互動視窗 標題 -->
<div class="modal-header">
<h4 id="Modal_D_title" class="modal-title">入料儲豆槽 IB 狀態</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- 互動視窗 內容 -->
<div class="modal-body">
<table style="border:0px gray solid; width: 100%;" cellpadding="3">
<!--<table style="border:0px gray solid;-->
<tr>
<td><strong><a id="actuator_link" href="">制動器狀態</a></strong></td>
<td><strong><a id="sensor_link" href="">感測器狀態</a></strong></td>
</tr>
<tr>
<td style="vertical-align:text-top;">
<table style="border:0px gray solid;" cellpadding="3">
<!--font-size:12px; -->
<tr>
<td>
<div id="tank_vacuum_status" class="actuator_status">
</div>
</td>
<td>
<a id="Vacuum" href="">真空吸料機</a>
<!--<span id="tank_vacuum_t_status"></span>-->
</td>
</tr>
</table>
</td>
<td style="vertical-align:text-top;">
<table style="border:0px gray solid;" cellpadding="3">
<!--font-size:12px; -->
<tr>
<td>
<a id="UltraSonic" href="">咖啡生豆高度</a>
</td>
<td>
<span id="UltraSonic_t_status"></span>
</td>
</tr>
<tr>
<td>
<a id="camera_dry_tid" href=""><strong>攝影機畫面</strong></a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
<!-- 壞果儲豆槽 互動視窗(模态框) -->
<div class="modal fade" id="BB_Modal">
<div class="modal-dialog modal-dialog-centered" style="width: 400px;">
<div class="modal-content">
<!-- 互動視窗 標題 -->
<div class="modal-header">
<h4 id="Modal_BB_title" class="modal-title">入料儲豆槽 IB 狀態</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- 互動視窗 內容 -->
<div class="modal-body">
<table style="border:0px gray solid; width: 100%;" cellpadding="3">
<!--<table style="border:0px gray solid;-->
<tr>
<td><strong><a id="actuator_link" href="">制動器狀態</a></strong></td>
<td><strong><a id="sensor_link" href="">感測器狀態</a></strong></td>
</tr>
<tr>
<td style="vertical-align:text-top;">
<table style="border:0px gray solid;" cellpadding="3">
<!--font-size:12px; -->
<tr>
<td>
<div id="tank_vacuum_status" class="actuator_status">
</div>
</td>
<td>
<a id="Vacuum" href="">真空吸料機</a>
<!--<span id="tank_vacuum_t_status"></span>-->
</td>
</tr>
</table>
</td>
<td style="vertical-align:text-top;">
<table style="border:0px gray solid;" cellpadding="3">
<!--font-size:12px; -->
<tr>
<td>
<a id="UltraSonic" href="">咖啡生豆高度</a>
</td>
<td>
<span id="UltraSonic_t_status"></span>
</td>
</tr>
<tr>
<td>
<a id="camera_dry_tid" href=""><strong>攝影機畫面</strong></a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
<!-- 出料儲豆槽 互動視窗(模态框) -->
<div class="modal fade" id="OB_Modal">
<div class="modal-dialog modal-dialog-centered" style="width: 400px;">
<div class="modal-content">
<!-- 互動視窗 標題 -->
<div class="modal-header">
<h4 id="Modal_OB_title" class="modal-title">入料儲豆槽 IB 狀態</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- 互動視窗 內容 -->
<div class="modal-body">
<table style="border:0px gray solid; width: 100%;" cellpadding="3">
<!--<table style="border:0px gray solid;-->
<tr>
<td><strong><a id="actuator_link" href="">制動器狀態</a></strong></td>
<td><strong><a id="sensor_link" href="">感測器狀態</a></strong></td>
</tr>
<tr>
<td style="vertical-align:text-top;">
<table style="border:0px gray solid;" cellpadding="3">
<!--font-size:12px; -->
<tr>
<td>
<div id="tank_vacuum_status" class="actuator_status">
</div>
</td>
<td>
<a id="Vacuum" href="">真空吸料機</a>
<!--<span id="tank_vacuum_t_status"></span>-->
</td>
</tr>
</table>
</td>
<td style="vertical-align:text-top;">
<table style="border:0px gray solid;" cellpadding="3">
<!--font-size:12px; -->
<tr>
<td>
<a id="UltraSonic" href="">咖啡生豆高度</a>
</td>
<td>
<span id="UltraSonic_t_status"></span>
</td>
</tr>
<tr>
<td>
<a id="camera_dry_tid" href=""><strong>攝影機畫面</strong></a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
<script>
// modal D
function update_data_D(dtid) {
console.log('dry_tank_id:' + dtid)
// dtid = dry_tank_id
$.get('/loading/D' + dtid, '', function (res) {
if (res.tank_vacuum == 0) {
$("#tank_vacuum_status").css("background-color", "#C0C0C0")
} else if (res.tank_vacuum == 1) {
$("#tank_vacuum_status").css("background-color", "forestgreen")
} else { $("#tank_vacuum_status").css("background-color", "crimson") }
if (res.tank_threewayvalve_input == 0) {
$("#tank_threewayvalve_input_status").css("background-color", "#C0C0C0")
} else if (res.tank_threewayvalve_input == 1) {
$("#tank_threewayvalve_input_status").css("background-color", "forestgreen")
} else { $("#tank_threewayvalve_input_status").css("background-color", "crimson") }
if (res.tank_threewayvalve_bean == 0) {
$("#tank_threewayvalve_bean_status").css("background-color", "#C0C0C0")
} else if (res.tank_threewayvalve_bean == 1) {
$("#tank_threewayvalve_bean_status").css("background-color", "forestgreen")
} else { $("#tank_threewayvalve_bean_status").css("background-color", "crimson") }
if (res.tank_diskvalve == 0) {
$("#tank_diskvalve_status").css("background-color", "#C0C0C0")
} else if (res.tank_diskvalve == 1) {
$("#tank_diskvalve_status").css("background-color", "forestgreen")
} else { $("#tank_diskvalve_status").css("background-color", "crimson") }
if (res.tank_solenoid_disinfect == 0) {
$("#tank_solenoid_disinfect_status").css("background-color", "#C0C0C0")
} else if (res.tank_solenoid_disinfect == 1) {
$("#tank_solenoid_disinfect_status").css("background-color", "forestgreen")
} else { $("#tank_solenoid_disinfect_status").css("background-color", "crimson") }
if (res.tank_solenoid_water == 0) {
$("#tank_solenoid_water_status").css("background-color", "#C0C0C0")
} else if (res.tank_solenoid_water == 1) {
$("#tank_solenoid_water_status").css("background-color", "forestgreen")
} else { $("#tank_solenoid_water_status").css("background-color", "crimson") }
if (res.tank_motor == 0) {
$("#tank_motor_status").css("background-color", "#C0C0C0")
} else if (res.tank_motor > 0 || res.tank_motor < 0) {
$("#tank_motor_status").css("background-color", "forestgreen")
} else { $("#tank_motor_status").css("background-color", "crimson") }
if (res.tank_blower == 0) {
$("#tank_blower_status").css("background-color", "#C0C0C0")
} else if (res.tank_blower == 1) {
$("#tank_blower_status").css("background-color", "forestgreen")
} else { $("#tank_blower_status").css("background-color", "crimson") }
if (res.tank_heater1 == 0) {
$("#tank_heater1_status").css("background-color", "#C0C0C0")
} else if (res.tank_heater1 == 1) {
$("#tank_heater1_status").css("background-color", "forestgreen")
} else { $("#tank_heater1_status").css("background-color", "crimson") }
if (res.tank_heater2 == 0) {
$("#tank_heater2_status").css("background-color", "#C0C0C0")
} else if (res.tank_heater2 == 1) {
$("#tank_heater2_status").css("background-color", "forestgreen")
} else { $("#tank_heater2_status").css("background-color", "crimson") }
if (res.tank_temp1_enable == 0) {
$("#tank_temp1_enable_status").css("background-color", "#C0C0C0")
} else if (res.tank_temp1_enable == 1) {
$("#tank_temp1_enable_status").css("background-color", "forestgreen")
} else { $("#tank_temp1_enable_status").css("background-color", "crimson") }
if (res.tank_temp1 == 0) {
$("#tank_temp1_status").css("background-color", "#C0C0C0")
} else if (res.tank_temp1 > 0) {
$("#tank_temp1_status").css("background-color", "forestgreen")
} else { $("#tank_temp1_status").css("background-color", "crimson") }
$("#tank_vacuum_t_status").text(res.tank_vacuum);
$("#tank_threewayvalve_t_status").text(res.tank_threewayvalve);
$("#tank_diskvalve_t_status").text(res.tank_diskvalve);
$("#tank_solenoid_disinfect_t_status").text(res.tank_solenoid_disinfect);
$("#tank_solenoid_water_t_status").text(res.tank_solenoid_water);
$("#tank_motor_t_status").text(res.tank_motor);
$("#tank_blower_t_status").text(res.tank_blower);
$("#tank_heater1_t_status").text(res.tank_heater1);
$("#tank_heater2_t_status").text(res.tank_heater2);
$("#tank_temp1_enable_t_status").text(res.tank_temp1_enable);
$("#tank_temp1_t_status").text(res.tank_temp1);
$("#UltraSonic_t_status").text(res.UltraSonic);
$("#SHT11_Temp_t_status").text(res.SHT11_Temp);
$("#SHT11_Humidity_t_status").text(res.SHT11_Humidity);
$("#soil_Temp_t_status").text(res.soil_Temp);
$("#soil_Humidity_t_status").text(res.soil_Humidity);
$("#soil_EC_t_status").text(res.soil_EC);
$("#PA_t_status").text(res.PA);
}, 'json');
$('#Modal_title').text("乾燥槽 D" + dtid + " 狀態")
if (status == 2) {
$('#actuator_link').attr("title", "該使用者無修改權限")
$('#sensor_link').attr("title", "該使用者無修改權限")
$('#Vacuum').attr("title", "該使用者無修改權限")
$('#ThreeWayValveInput').attr("title", "該使用者無修改權限")
$('#ThreeWayValveBean').attr("title", "該使用者無修改權限")
$('#SolenoidDisinfect').attr("title", "該使用者無修改權限")
$('#Motor').attr("title", "該使用者無修改權限")
$('#Blower').attr("title", "該使用者無修改權限")
$('#Heater1').attr("title", "該使用者無修改權限")
$('#Heater2').attr("title", "該使用者無修改權限")
$('#TempEnable').attr("title", "該使用者無修改權限")
$('#Temp').attr("title", "該使用者無修改權限")
$('#SolenoidWater').attr("title", "該使用者無修改權限")
$('#DiskValve').attr("title", "該使用者無修改權限")
} else if ( (status == 0) || (status == 1) ) {
$('#actuator_link').attr("href", "/dry_container_tank/" + dtid)
$('#sensor_link').attr("href", "/dry_container_tank/" + dtid)
$('#Vacuum').attr("href", "/ctrl_D_Vacuum/" + dtid)
$('#ThreeWayValveInput').attr("href", "/ctrl_D_ThreeWayValveInput/" + dtid)
$('#ThreeWayValveBean').attr("href", "/ctrl_D_ThreeWayValveBean/" + dtid)
$('#SolenoidDisinfect').attr("href", "/ctrl_D_SolenoidDisinfect/" + dtid)
$('#Motor').attr("href", "/ctrl_D_Motor/" + dtid)
$('#Blower').attr("href", "/ctrl_D_Blower/" + dtid)
$('#Heater1').attr("href", "/ctrl_D_Heater1/" + dtid)
$('#Heater2').attr("href", "/ctrl_D_Heater2/" + dtid)
$('#TempEnable').attr("href", "/ctrl_D_TempEnable/" + dtid)
$('#Temp').attr("href", "/ctrl_D_Temp/" + dtid)
$('#SolenoidWater').attr("href", "/ctrl_D_SolenoidWater/" + dtid)
$('#DiskValve').attr("href", "/ctrl_D_DiskValve/" + dtid)
}
$('#SHT11_Temp').attr("href", "/chart_D/SHT11_Temp/" + dtid)
$('#SHT11_Humidity').attr("href", "/chart_D/SHT11_Humidity/" + dtid)
$('#UltraSonic').attr("href", "/chart_D/UltraSonic/" + dtid)
$('#PA').attr("href", "/chart_D/PA/" + dtid)
$('#soil_Temp').attr("href", "/chart_D/soil_Temp/" + dtid)
$('#soil_Humidity').attr("href", "/chart_D/soil_Humidity/" + dtid)
$('#soil_EC').attr("href", "/chart_D/soil_EC/" + dtid)
$('#camera_dry_tid').attr("href", "/camera_D" + dtid)
setTimeout(function(){ $('#D_Modal').modal('show'); }, 300)
}
// modal IB
function update_data_IB(id) {
// ajax 制動器感測器數值
$('#Modal_IB_title').text("入料儲豆槽 " + id + " 狀態")
setTimeout(function(){ $('#IB_Modal').modal('show'); }, 300)
}
// modal C
function update_data_C(id) {
// ajax 制動器感測器數值
$('#Modal_C_title').text("清洗槽 " + id + " 狀態")
setTimeout(function(){ $('#C_Modal').modal('show'); }, 300)
}
// modal RW
function update_data_RW(id) {
// ajax 制動器感測器數值
$('#Modal_RW_title').text("中水桶 " + id + " 狀態")
setTimeout(function(){ $('#RW_Modal').modal('show'); }, 300)
}
// modal CS
function update_data_CS(id) {
// ajax 制動器感測器數值
$('#Modal_CS_title').text("色選機 " + id + " 狀態")
setTimeout(function(){ $('#CS_Modal').modal('show'); }, 300)
}
// modal P
function update_data_P(id) {
// ajax 制動器感測器數值
$('#Modal_P_title').text("脫皮機 " + id + " 狀態")
setTimeout(function(){ $('#P_Modal').modal('show'); }, 300)
}
// modal F
function update_data_F(id) {
// ajax 制動器感測器數值
$('#Modal_F_title').text("發酵槽 " + id + " 狀態")
setTimeout(function(){ $('#F_Modal').modal('show'); }, 300)
}
// modal D
function update_data_D(id) {
// ajax 制動器感測器數值
$('#Modal_D_title').text("乾燥槽 " + id + " 狀態")
setTimeout(function(){ $('#D_Modal').modal('show'); }, 300)
}
// modal BB
function update_data_BB(id) {
// ajax 制動器感測器數值
$('#Modal_BB_title').text("壞果儲豆槽 " + id + " 狀態")
setTimeout(function(){ $('#BB_Modal').modal('show'); }, 300)
}
// modal OB
function update_data_OB(id) {
// ajax 制動器感測器數值
$('#Modal_OB_title').text("出料儲豆槽 " + id + " 狀態")
setTimeout(function(){ $('#OB_Modal').modal('show'); }, 300)
}
var DM_InputBean_1 = document.getElementById('DM_InputBean_1');
DM_InputBean_1.addEventListener('click', function () { update_data_IB("1") });
var DM_InputBean_2 = document.getElementById('DM_InputBean_2');
DM_InputBean_2.addEventListener('click', function () { update_data_IB("2") });
var DM_Clean_1 = document.getElementById('DM_Clean_1');
DM_Clean_1.addEventListener('click', function () { update_data_C("1") });
var DM_Clean_2 = document.getElementById('DM_Clean_2');
DM_Clean_2.addEventListener('click', function () { update_data_C("2") });
var DM_ReclaimedWater_1 = document.getElementById('DM_ReclaimedWater_1');
DM_ReclaimedWater_1.addEventListener('click', function () { update_data_RW("1") });
var DM_ColorSelect_1 = document.getElementById('DM_ColorSelect_1');
DM_ColorSelect_1.addEventListener('click', function () { update_data_CS("1") });
var DM_ColorSelect_2 = document.getElementById('DM_ColorSelect_2');
DM_ColorSelect_2.addEventListener('click', function () { update_data_CS("2") });
var DM_Peel_1 = document.getElementById('DM_Peel_1');
DM_Peel_1.addEventListener('click', function () { update_data_P("1") });
var DM_Peel_2 = document.getElementById('DM_Peel_2');
DM_Peel_2.addEventListener('click', function () { update_data_P("2") });
var DM_Ferment_1 = document.getElementById('DM_Ferment_1');
DM_Ferment_1.addEventListener('click', function () { update_data_F("1") });
var DM_Ferment_2 = document.getElementById('DM_Ferment_2');
DM_Ferment_2.addEventListener('click', function () { update_data_F("2") });
var DM_Dry_1 = document.getElementById('DM_Dry_1');
DM_Dry_1.addEventListener('click', function () { update_data_D("1") });
var DM_BadBean_1 = document.getElementById('DM_BadBean_1');
DM_BadBean_1.addEventListener('click', function () { update_data_BB("1") });
var DM_OutputBean_1 = document.getElementById('DM_OutputBean_1');
DM_OutputBean_1.addEventListener('click', function () { update_data_OB("1") });
</script>
<div id="coffee_footer">
<!-- 匯入共同使用的 footer.html 內容 -->
{% include 'footer.html' %}
</div>
</div>
</body>
</html>