<!-- 宣告我們要套用模板 -->
{% extends "base.html" %}
{% block title %}{{ title }}{% endblock %}
{% block script %}
<script language="JavaScript">
function myrefresh()
{
$.get('/clean_auto_data', function (resText) {
var CI = [resText.CI1,resText.CI2];
var C=[resText.C1,resText.C2,resText.C3,resText.C4];
var R=[resText.R1];
var S = [resText.S1,resText.S2];
var SO = [resText.SO1,resText.SO2];
var P = [resText.P1,resText.P2];
var PO = [resText.PO1,resText.PO2];
for (let i=0; i<2; i++) {
if (CI[i] == 'CI_InputtingBean') {
$("#CI"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
$("#CI"+parseInt(i+1)+"_status").text("CI" + parseInt(i+1) + " 入豆中")
} else if (CI[i] == 'CI_Waiting') {
$("#CI"+parseInt(i+1)+"_status_dot").css("background-color", "lightgray")
$("#CI"+parseInt(i+1)+"_status").text("CI" + parseInt(i+1) + " 空桶等待")
} else if (CI[i] == 'CI_OutputtingBean') {
$("#CI"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
$("#CI"+parseInt(i+1)+"_status").text("CI" + parseInt(i+1) + " 可出豆")
} else if (CI[i] == 'CI_Stand_by') {
$("#CI"+parseInt(i+1)+"_status_dot").css("background-color", "HotPink")
$("#CI"+parseInt(i+1)+"_status").text("CI" + parseInt(i+1) + " 待命")
} else {
console.log('pass')
}
}
for (let i=0; i<4; i++) {
if (C[i] == 'C_InputtingBean') {
$("#C"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
$("#C"+parseInt(i+1)+"_status").text("C" + parseInt(i+1) + " 入豆中")
} else if (C[i] == 'C_Waiting') {
$("#C"+parseInt(i+1)+"_status_dot").css("background-color", "lightgray")
$("#C"+parseInt(i+1)+"_status").text("C" + parseInt(i+1) + " 空桶等待")
} else if (C[i] == 'C_InputtingWater') {
$("#C"+parseInt(i+1)+"_status_dot").css("background-color", "DeepSkyBlue")
$("#C"+parseInt(i+1)+"_status").text("C" + parseInt(i+1) + " 內桶入水中")
} else if (C[i] == 'C_Cleaning') {
$("#C"+parseInt(i+1)+"_status_dot").css("background-color", "plum")
$("#C"+parseInt(i+1)+"_status").text("C" + parseInt(i+1) + " 清洗中")
} else if (C[i] == 'C_OutputtingWater') {
$("#C"+parseInt(i+1)+"_status_dot").css("background-color", "DeepSkyBlue")
$("#C"+parseInt(i+1)+"_status").text("C" + parseInt(i+1) + " 內桶排水中")
} else if (C[i] == 'C_OutputtingBean') {
$("#C"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
$("#C"+parseInt(i+1)+"_status").text("C" + parseInt(i+1) + " 可出豆")
} else if (C[i] == 'C_Warning') {
$("#C"+parseInt(i+1)+"_status_dot").css("background-color", "crimson")
$("#C"+parseInt(i+1)+"_status").text("C" + parseInt(i+1) + " 警告")
} else if (C[i] == 'C_Stand_by') {
$("#C"+parseInt(i+1)+"_status_dot").css("background-color", "HotPink")
$("#C"+parseInt(i+1)+"_status").text("C" + parseInt(i+1) + " 待命")
} else {
console.log('pass')
}
}
for (let i=0; i<1; i++) {
if (R[i] == 'R_InputtingWater') {
$("#R"+parseInt(i+1)+"_status_dot").css("background-color", "DeepSkyBlue")
$("#R"+parseInt(i+1)+"_status").text("R" + parseInt(i+1) + " 入水中")
} else if (R[i] == 'R_Waiting') {
$("#R"+parseInt(i+1)+"_status_dot").css("background-color", "lightgray")
$("#R"+parseInt(i+1)+"_status").text("R" + parseInt(i+1) + " 空桶等待")
} else if (R[i] == 'R_OutputtingWater') {
$("#R"+parseInt(i+1)+"_status_dot").css("background-color", "DeepSkyBlue")
$("#R"+parseInt(i+1)+"_status").text("R" + parseInt(i+1) + " 排水中")
} else if (R[i] == 'R_Stand_by') {
$("#R"+parseInt(i+1)+"_status_dot").css("background-color", "HotPink")
$("#R"+parseInt(i+1)+"_status").text("R" + parseInt(i+1) + " 待命")
} else if (R[i] == 'R_Warning') {
console.log('[動作] R桶警告 R' + parseInt(i+1) + ' 警告')
$("#R"+parseInt(i+1)+"_status_dot").css("background-color", "crimson")
$("#R"+parseInt(i+1)+"_status").text("R" + parseInt(i+1) + " 警告")
} else {
console.log('pass')
}
}
for (let i=0; i<2; i++) {
if (S[i] == 'S_InputtingBean') {
$("#S"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
$("#S"+parseInt(i+1)+"_status").text("S" + parseInt(i+1) + " 入豆中")
} else if (S[i] == 'S_Waiting') {
$("#S"+parseInt(i+1)+"_status_dot").css("background-color", "lightgray")
$("#S"+parseInt(i+1)+"_status").text("S" + parseInt(i+1) + " 空桶等待")
} else if (S[i] == 'S_OutputtingBean') {
$("#S"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
$("#S"+parseInt(i+1)+"_status").text("S" + parseInt(i+1) + " 可出豆")
} else if (S[i] == 'S_Stand_by') {
$("#S"+parseInt(i+1)+"_status_dot").css("background-color", "HotPink")
$("#S"+parseInt(i+1)+"_status").text("S" + parseInt(i+1) + " 待命")
} else {
console.log('pass')
}
}
for (let i=0; i<2; i++) {
if (SO[i] == 'SO_InputtingBean') {
$("#SO"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
$("#SO"+parseInt(i+1)+"_status").text("SO" + parseInt(i+1) + " 入豆中")
} else if (SO[i] == 'SO_Waiting') {
$("#SO"+parseInt(i+1)+"_status_dot").css("background-color", "lightgray")
$("#SO"+parseInt(i+1)+"_status").text("SO" + parseInt(i+1) + " 空桶等待")
} else if (SO[i] == 'SO_OutputtingBean') {
$("#SO"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
$("#SO"+parseInt(i+1)+"_status").text("SO" + parseInt(i+1) + " 可出豆")
} else if (SO[i] == 'SO_Stand_by') {
$("#SO"+parseInt(i+1)+"_status_dot").css("background-color", "HotPink")
$("#SO"+parseInt(i+1)+"_status").text("SO" + parseInt(i+1) + " 待命")
} else {
console.log('pass')
}
}
for (let i=0; i<2; i++) {
if (P[i] == 'P_InputtingBean') {
$("#P"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
$("#P"+parseInt(i+1)+"_status").text("P" + parseInt(i+1) + " 入豆中")
} else if (P[i] == 'P_Waiting') {
$("#P"+parseInt(i+1)+"_status_dot").css("background-color", "lightgray")
$("#P"+parseInt(i+1)+"_status").text("P" + parseInt(i+1) + " 空桶等待")
} else if (P[i] == 'P_OutputtingBean') {
$("#P"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
$("#P"+parseInt(i+1)+"_status").text("P" + parseInt(i+1) + " 可出豆")
} else if (P[i] == 'P_Stand_by') {
$("#P"+parseInt(i+1)+"_status_dot").css("background-color", "HotPink")
$("#P"+parseInt(i+1)+"_status").text("P" + parseInt(i+1) + " 待命")
} else {
console.log('pass')
}
}
for (let i=0; i<2; i++) {
if (PO[i] == 'PO_InputtingBean') {
$("#PO"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
$("#PO"+parseInt(i+1)+"_status").text("PO" + parseInt(i+1) + " 入豆中")
} else if (PO[i] == 'PO_Waiting') {
$("#PO"+parseInt(i+1)+"_status_dot").css("background-color", "lightgray")
$("#PO"+parseInt(i+1)+"_status").text("PO" + parseInt(i+1) + " 空桶等待")
} else if (PO[i] == 'PO_OutputtingBean') {
$("#PO"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
$("#PO"+parseInt(i+1)+"_status").text("PO" + parseInt(i+1) + " 可出豆")
} else if (PO[i] == 'PO_Stand_by') {
$("#PO"+parseInt(i+1)+"_status_dot").css("background-color", "HotPink")
$("#PO"+parseInt(i+1)+"_status").text("PO" + parseInt(i+1) + " 待命")
} else {
console.log('pass')
}
}
},'json');
loading_SO()
}
setInterval('myrefresh()',1000);
</script>
<script>
var tank_num = '1';
var status = '{{status}}';
var username = '{{username}}';
$(document).ready(function(){
$("#coffee_title_pc").text('色選機出料自動化');
$("#coffee_title_phone").text('色選機出料自動化');
$('#navbarDropdown_user_pc').text(username);
$('#navbarDropdown_user_phone').text(username);
reclaimed_tank_status = ['{{CI1}}','{{CI2}}']
for (let i=0; i<reclaimed_tank_status.length; i++) {
if (reclaimed_tank_status[i] == 'CI_InputtingBean') {
$("#CI"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
$("#CI"+parseInt(i+1)+"_status").text("CI" + parseInt(i+1) + " 入豆中")
} else if (reclaimed_tank_status[i] == 'CI_Waiting') {
$("#CI"+parseInt(i+1)+"_status_dot").css("background-color", "lightgray")
$("#CI"+parseInt(i+1)+"_status").text("CI" + parseInt(i+1) + " 空桶等待")
} else if (reclaimed_tank_status[i] == 'CI_OutputtingBean') {
$("#CI"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
$("#CI"+parseInt(i+1)+"_status").text("CI" + parseInt(i+1) + " 可出豆")
} else if (reclaimed_tank_status[i] == 'CI_Stand_by') {
$("#CI"+parseInt(i+1)+"_status_dot").css("background-color", "HotPink")
$("#CI"+parseInt(i+1)+"_status").text("CI" + parseInt(i+1) + " 待命")
} else {
console.log('pass')
}
}
// 清洗桶槽入料顯示
clean_input_status_N = ['{{C1}}', '{{C2}}', '{{C3}}', '{{C4}}']
for (let i=0; i<clean_input_status_N.length; i++) {
if (clean_input_status_N[i] == 'C_InputtingBean') {
$("#C"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
$("#C"+parseInt(i+1)+"_status").text("C" + parseInt(i+1) + " 入豆中")
} else if (clean_input_status_N[i] == 'C_InputtingWater') {
$("#C"+parseInt(i+1)+"_status_dot").css("background-color", "DeepSkyBlue")
$("#C"+parseInt(i+1)+"_status").text("C" + parseInt(i+1) + " 內桶入水中")
} else if (clean_input_status_N[i] == 'C_Cleaning') {
$("#C"+parseInt(i+1)+"_status_dot").css("background-color", "plum")
$("#C"+parseInt(i+1)+"_status").text("C" + parseInt(i+1) + " 清洗中")
} else if (clean_input_status_N[i] == 'C_Waiting') {
$("#C"+parseInt(i+1)+"_status_dot").css("background-color", "lightgray")
$("#C"+parseInt(i+1)+"_status").text("C" + parseInt(i+1) + " 空桶等待")
} else if (clean_input_status_N[i] == 'C_OutputtingWater') {
$("#C"+parseInt(i+1)+"_status_dot").css("background-color", "DeepSkyBlue")
$("#C"+parseInt(i+1)+"_status").text("C" + parseInt(i+1) + " 內桶排水中")
} else if (clean_input_status_N[i] == 'C_OutputtingBean') {
$("#C"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
$("#C"+parseInt(i+1)+"_status").text("C" + parseInt(i+1) + " 可出豆")
} else if (clean_input_status_N[i] == 'C_Stand_by') {
$("#C"+parseInt(i+1)+"_status_dot").css("background-color", "HotPink")
$("#C"+parseInt(i+1)+"_status").text("C" + parseInt(i+1) + " 待命")
} else if (clean_input_status_N[i] == 'C_Warning') {
$("#C"+parseInt(i+1)+"_status_dot").css("background-color", "crimson")
$("#C"+parseInt(i+1)+"_status").text("C" + parseInt(i+1) + " 警告")
} else {
console.log('pass')
}
}
// R中水桶顯示
console.log('R1: ' + '{{R1}}')
reclaimed_tank_status = ['{{R1}}']
for (let i=0; i<reclaimed_tank_status.length; i++) {
if (reclaimed_tank_status[i] == 'R_InputtingWater') {
$("#R"+parseInt(i+1)+"_status_dot").css("background-color", "DeepSkyBlue")
$("#R"+parseInt(i+1)+"_status").text("R" + parseInt(i+1) + " 入水中")
} else if (reclaimed_tank_status[i] == 'R_Waiting') {
$("#R"+parseInt(i+1)+"_status_dot").css("background-color", "lightgray")
$("#R"+parseInt(i+1)+"_status").text("R" + parseInt(i+1) + " 空桶等待")
} else if (reclaimed_tank_status[i] == 'R_OutputtingWater') {
$("#R"+parseInt(i+1)+"_status_dot").css("background-color", "DeepSkyBlue")
$("#R"+parseInt(i+1)+"_status").text("R" + parseInt(i+1) + " 排水中")
} else if (reclaimed_tank_status[i] == 'R_Stand_by') {
$("#R"+parseInt(i+1)+"_status_dot").css("background-color", "HotPink")
$("#R"+parseInt(i+1)+"_status").text("R" + parseInt(i+1) + " 待命")
} else {
console.log('pass')
}
}
// 色選顯示
console.log('S1: ' + '{{S1}}')
console.log('S2: ' + '{{S2}}')
colorselect_tank_status = ['{{S1}}','{{S2}}']
for (let i=0; i<colorselect_tank_status.length; i++) {
if (colorselect_tank_status[i] == 'S_InputtingBean') {
$("#S"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
$("#S"+parseInt(i+1)+"_status").text("S" + parseInt(i+1) + " 入豆中")
} else if (colorselect_tank_status[i] == 'S_Waiting') {
$("#S"+parseInt(i+1)+"_status_dot").css("background-color", "lightgray")
$("#S"+parseInt(i+1)+"_status").text("S" + parseInt(i+1) + " 空桶等待")
} else if (colorselect_tank_status[i] == 'S_OutputtingBean') {
$("#S"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
$("#S"+parseInt(i+1)+"_status").text("S" + parseInt(i+1) + " 可出豆")
} else if (colorselect_tank_status[i] == 'S_Stand_by') {
$("#S"+parseInt(i+1)+"_status_dot").css("background-color", "HotPink")
$("#S"+parseInt(i+1)+"_status").text("S" + parseInt(i+1) + " 待命")
} else {
console.log('pass')
}
}
// 色選出料顯示
colorselect_output_status = ['{{SO1}}','{{SO2}}']
for (let i=0; i<colorselect_output_status.length; i++) {
if (colorselect_output_status[i] == 'SO_InputtingBean') {
$("#SO"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
$("#SO"+parseInt(i+1)+"_status").text("SO" + parseInt(i+1) + " 入豆中")
} else if (colorselect_output_status[i] == 'SO_Waiting') {
$("#SO"+parseInt(i+1)+"_status_dot").css("background-color", "lightgray")
$("#SO"+parseInt(i+1)+"_status").text("SO" + parseInt(i+1) + " 空桶等待")
} else if (colorselect_output_status[i] == 'SO_OutputtingBean') {
$("#SO"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
$("#SO"+parseInt(i+1)+"_status").text("SO" + parseInt(i+1) + " 可出豆")
} else if (colorselect_output_status[i] == 'SO_Stand_by') {
$("#SO"+parseInt(i+1)+"_status_dot").css("background-color", "HotPink")
$("#SO"+parseInt(i+1)+"_status").text("SO" + parseInt(i+1) + " 待命")
} else {
console.log('pass')
}
}
// 脫皮顯示
peel_tank_status = ['{{P1}}','{{P2}}']
for (let i=0; i<peel_tank_status.length; i++) {
if (peel_tank_status[i] == 'P_InputtingBean') {
$("#P"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
$("#P"+parseInt(i+1)+"_status").text("P" + parseInt(i+1) + " 入豆中")
} else if (peel_tank_status[i] == 'P_Waiting') {
$("#P"+parseInt(i+1)+"_status_dot").css("background-color", "lightgray")
$("#P"+parseInt(i+1)+"_status").text("P" + parseInt(i+1) + " 空桶等待")
} else if (peel_tank_status[i] == 'P_OutputtingBean') {
$("#P"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
$("#P"+parseInt(i+1)+"_status").text("P" + parseInt(i+1) + " 可出豆")
} else if (peel_tank_status[i] == 'P_Stand_by') {
$("#P"+parseInt(i+1)+"_status_dot").css("background-color", "HotPink")
$("#P"+parseInt(i+1)+"_status").text("P" + parseInt(i+1) + " 待命")
} else {
console.log('pass')
}
}
// 脫皮出料顯示
peel_output_status = ['{{PO1}}','{{PO2}}']
for (let i=0; i<peel_output_status.length; i++) {
if (peel_output_status[i] == 'PO_InputtingBean') {
$("#PO"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
$("#PO"+parseInt(i+1)+"_status").text("PO" + parseInt(i+1) + " 入豆中")
} else if (peel_output_status[i] == 'PO_Waiting') {
$("#PO"+parseInt(i+1)+"_status_dot").css("background-color", "lightgray")
$("#PO"+parseInt(i+1)+"_status").text("PO" + parseInt(i+1) + " 空桶等待")
} else if (peel_output_status[i] == 'PO_OutputtingBean') {
$("#PO"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
$("#PO"+parseInt(i+1)+"_status").text("PO" + parseInt(i+1) + " 可出豆")
} else if (peel_output_status[i] == 'PO_Stand_by') {
$("#PO"+parseInt(i+1)+"_status_dot").css("background-color", "HotPink")
$("#PO"+parseInt(i+1)+"_status").text("PO" + parseInt(i+1) + " 待命")
} else {
console.log('pass')
}
}
loading_SO()
});
function loading_SO(){
var sotid = '{{sotid}}';
$.get('/loading/SO'+sotid, '', function (resText) {
$("#sensor_0").text(resText.tank_UltraSonic);
}, 'json');
};
</script>
{% endblock %}
{% block style %}
<style>
.C_status_css {
font-weight: bold;
text-align: center;
}
.input-text {
height: 25px;
width: 40px;
text-align: center;
margin-left: 2px;
margin-right: 5px;
}
</style>
{% endblock %}
{% block main %}
<div class="album py-5 bg-light">
<div class="container">
<div class="row row-cols-1 row-cols-sm-1 row-cols-md-1 g-3">
<div class="col">
<div class="card shadow-sm">
<div class="card-body">
<div class="d-flex justify-content-between align-items-center">
<table style="border: 3px lightsteelblue solid; margin-right: auto; margin-left: auto; text-align: center; margin-top: 5px;" cellpadding="5" border="1">
<div style="text-align: center;">
<tr>
<td style="border: lightsteelblue 1px solid;" width="12.5%">
<table style="border: 0px plum solid; margin-right: auto; margin-left: auto; text-align: center;" cellpadding="5">
<tr>
<td>
<!-- 清洗入料 R1 -->
<div id="CI1" tabindex="0" class="CI1_position" role="button">
<span id="CI1_status" class="C_status_css">CI1 status</span>
</div>
</td>
</tr>
</table>
</td>
<td style="border: lightsteelblue 1px solid;" width="12.5%">
<table style="border: 0px plum solid; margin-right: auto; margin-left: auto; text-align: center;" cellpadding="5">
<tr>
<td>
<!-- 清洗槽 C1 -->
<div id="C1" tabindex="0" class="C1_position" role="button">
<span id="C1_status" class="C_status_css">C1 status</span>
</div>
</td>
</tr>
</table>
</td>
<td style="border: lightsteelblue 1px solid;" width="12.5%">
<table style="border: 0px plum solid; margin-right: auto; margin-left: auto; text-align: center;" cellpadding="5">
<tr>
<td>
<!-- 清洗槽 C2 -->
<div id="C2" tabindex="0" class="C2_position" role="button">
<span id="C2_status" class="C_status_css">C2 status</span>
</div>
</td>
</tr>
</table>
</td>
<td style="border: lightsteelblue 1px solid;" width="12.5%">
<table style="border: 0px plum solid; margin-right: auto; margin-left: auto; text-align: center;" cellpadding="5">
<tr>
<td>
<!-- 中水桶 R1 -->
<div id="R1" tabindex="0" class="R1_position" role="button">
<span id="R1_status" class="C_status_css">R1 status</span>
</div>
</td>
</tr>
</table>
</td>
<td style="border: lightsteelblue 1px solid;" width="12.5%">
<table style="border: 0px plum solid; margin-right: auto; margin-left: auto; text-align: center;" cellpadding="5">
<tr>
<td>
<!-- 色選槽 S1 -->
<div id="S1" tabindex="0" class="S1_position" role="button">
<span id="S1_status" class="C_status_css">S1 status</span>
</div>
</td>
</tr>
</table>
</td>
<td style="border: lightsteelblue 1px solid;" width="12.5%">
<table style="border: 0px plum solid; margin-right: auto; margin-left: auto; text-align: center;" cellpadding="5">
<tr>
<td>
<!-- 色選出料 SO1 -->
<div id="SO1" tabindex="0" class="SO1_position" role="button">
<span id="SO1_status" class="C_status_css">SO1 status</span>
</div>
</td>
</tr>
</table>
</td>
<td style="border: lightsteelblue 1px solid;" width="12.5%">
<table style="border: 0px plum solid; margin-right: auto; margin-left: auto; text-align: center;" cellpadding="5">
<tr>
<td>
<!-- 脫皮機 P1 -->
<div id="P1" tabindex="0" class="P1_position" role="button">
<span id="P1_status" class="C_status_css">P1 status</span>
</div>
</td>
</tr>
</table>
</td>
<td style="border: lightsteelblue 1px solid;" width="12.5%">
<table style="border: 0px plum solid; margin-right: auto; margin-left: auto; text-align: center;" cellpadding="5">
<tr>
<td>
<!-- 脫皮出料儲豆槽 PO1 -->
<div id="PO1" tabindex="0" class="PO1_position" role="button">
<span id="PO1_status" class="C_status_css">PO1 status</span>
</div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="12.5%" style="border: lightsteelblue 1px solid;">
<div id="CI1_status_dot" style="height: 20px; background-color: black;"></div>
</td>
<td width="12.5%" style="border: lightsteelblue 1px solid;">
<div id="C1_status_dot" style="height: 20px; background-color: black;"></div>
</td>
<td width="12.5%" style="border: lightsteelblue 1px solid;">
<div id="C2_status_dot" style="height: 20px; background-color: black;"></div>
</td>
<td width="12.5%" style="border: lightsteelblue 1px solid;">
<div id="R1_status_dot" style=" height: 20px; background-color: black;"></div>
</td>
<td width="12.5%" style="border: lightsteelblue 1px solid;">
<div id="S1_status_dot" style="height: 20px; background-color: black;"></div>
</td>
<td width="12.5%" style="border: lightsteelblue 1px solid;">
<div id="SO1_status_dot" style="height: 20px; background-color: black;"></div>
</td>
<td width="12.5%" style="border: lightsteelblue 1px solid;">
<div id="P1_status_dot" style="height: 20px; background-color: black;"></div>
</td>
<td width="12.5%" style="border: lightsteelblue 1px solid;">
<div id="PO1_status_dot" style="height: 20px; background-color: black;"></div>
</td>
</tr>
<tr>
<td style="border: lightsteelblue 1px solid;" width="12.5%">
清洗入料儲豆槽
</td>
<td style="border: lightsteelblue 1px solid;" width="12.5%">
清洗槽
</td>
<td style="border: lightsteelblue 1px solid;" width="12.5%">
清洗槽
</td>
<td style="border: lightsteelblue 1px solid;" width="12.5%">
中水桶槽
</td>
<td style="border: lightsteelblue 1px solid;" width="12.5%">
色選機
</td>
<td style="border: lightsteelblue 1px solid;" width="12.5%">
色選出料儲豆槽
</td>
<td style="border: lightsteelblue 1px solid;" width="12.5%">
脫皮機
</td>
<td style="border: lightsteelblue 1px solid;" width="12.5%">
脫皮出料儲豆槽
</td>
</tr>
<tr>
<td style="border: lightsteelblue 1px solid;">
<table style="border: 0px plum solid; margin-right: auto; margin-left: auto; text-align: center;" cellpadding="5">
<tr>
<td>
<!-- 清洗入料 R1 -->
<div id="CI2" tabindex="0" class="CI2_position" role="button">
<span id="CI2_status" class="C_status_css">CI2 status</span>
</div>
</td>
</tr>
</table>
</td>
<td style="border: lightsteelblue 1px solid;">
<table style="border: 0px plum solid; margin-right: auto; margin-left: auto; text-align: center;" cellpadding="5">
<tr>
<td>
<!-- 脫皮機出料儲豆槽 C3 -->
<div id="C3" tabindex="0" class="C3_position" role="button" style="text-align: center;">
<span id="C3_status" class="C_status_css">C3 status</span>
</div>
</td>
</tr>
</table>
</td>
<td style="border: lightsteelblue 1px solid;">
<table style="border: 0px plum solid; margin-right: auto; margin-left: auto; text-align: center;" cellpadding="5">
<tr>
<td>
<!-- 發酵槽入料儲豆槽 FI2 -->
<div id="C4" tabindex="0" class="C4_position" role="button">
<span id="C4_status" class="C_status_css">C4 status</span>
</div>
</td>
</tr>
</table>
</td>
<td style="border: lightsteelblue 1px solid;">
<table style="border: 0px plum solid; margin-right: auto; margin-left: auto; text-align: center;" cellpadding="5">
</table>
</td>
<td style="border: lightsteelblue 1px solid;">
<table style="border: 0px plum solid; margin-right: auto; margin-left: auto; text-align: center;" cellpadding="5">
<tr>
<td>
<!-- 色選 S2 -->
<div id="S2" tabindex="0" class="S2_position" role="button">
<span id="S2_status" class="C_status_css">S2 status</span>
</div>
</td>
</tr>
</table>
</td>
<td style="border: lightsteelblue 1px solid;">
<table style="border: 0px plum solid; margin-right: auto; margin-left: auto; text-align: center;" cellpadding="5">
<tr>
<td>
<!-- 色選出料 SO2 -->
<div id="SO2" tabindex="0" class="SO2_position" role="button">
<span id="SO2_status" class="C_status_css">SO2 status</span>
</div>
</td>
</tr>
</table>
</td>
<td style="border: lightsteelblue 1px solid;">
<table style="border: 0px plum solid; margin-right: auto; margin-left: auto; text-align: center;" cellpadding="5">
<tr>
<td>
<!-- 脫皮機出料儲豆槽 P2 -->
<div id="P2" tabindex="0" class="P2_position" role="button" style="text-align: center;">
<span id="P2_status" class="C_status_css">P2 status</span>
</div>
</td>
</tr>
</table>
</td>
<td style="border: lightsteelblue 1px solid;">
<table style="border: 0px plum solid; margin-right: auto; margin-left: auto; text-align: center;" cellpadding="5">
<tr>
<td>
<!-- 脫皮機出料儲豆槽 PO2 -->
<div id="PO2" tabindex="0" class="PO2_position" role="button" style="text-align: center;">
<span id="PO2_status" class="C_status_css">PO2 status</span>
</div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="12.5%" style="border: lightsteelblue 1px solid;">
<div id="CI2_status_dot" style="height: 20px; background-color: black;"></div>
</td>
<td width="12.5%" style="border: lightsteelblue 1px solid;">
<div id="C3_status_dot" style="height: 20px; background-color: black;"></div>
</td>
<td width="12.5%" style="border: lightsteelblue 1px solid;">
<div id="C4_status_dot" style="height: 20px; background-color: black;"></div>
</td>
<td width="12.5%" style="border: lightsteelblue 1px solid;">
</td>
<td width="12.5%" style="border: lightsteelblue 1px solid;">
<div id="S2_status_dot" style="height: 20px; background-color: black;"></div>
</td>
<td width="12.5%" style="border: lightsteelblue 1px solid;">
<div id="SO2_status_dot" style="height: 20px; background-color: black;"></div>
</td>
<td width="12.5%" style="border: lightsteelblue 1px solid;">
<div id="P2_status_dot" style="height: 20px; background-color: black;"></div>
</td>
<td width="12.5%" style="border: lightsteelblue 1px solid;">
<div id="PO2_status_dot" style="height: 20px; background-color: black;"></div>
</td>
</tr>
</table>
</div>
<table style="border: 3px lightsteelblue solid; margin-right: auto; margin-left: auto; text-align: center; margin-top: 5px;" cellpadding="5" border="1">
<tr>
<td style="border: lightsteelblue 1px solid;">
生豆<br>高度
</td>
</tr>
<tr>
<td style="border: lightsteelblue 1px solid;">
<span id="sensor_0"></span>
</td>
</tr>
</table>
<table style="border: 3px lightsteelblue solid; margin-right: auto; margin-left: auto; text-align: center; margin-top: 5px; line-height: 28px;" cellpadding="5" border="1">
<tr>
<td style="border: lightsteelblue 1px solid;">
色選機出料槽<br>
參數設定
</td>
</tr>
<tr>
<td style="padding: 10px; text-align: left; vertical-align: text-top;">
生豆高度
<input name="Ferment_Tank_bean_height" class="input-text" type="text" value="5">公分<br>
吸放料時間
<input name="Ferment_Tank_vacuumON_time" class="input-text" type="text" value="5">秒<br>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{% endblock %}