<!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">
<meta http-equiv="refresh" content="300" /> <!-- 每 content 秒網頁自動更新-->
<!-- 新 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">
-->
<script>
$(document).ready(function(){
$("#coffee_title").text('發酵自動化');
// 桶槽入料顯示
ferment_input_status_N = ['{{FI1}}', '{{FI2}}']
console.log('ferment_input_status_N: ' + ferment_input_status_N)
for (let i=0; i<ferment_input_status_N.length; i++) {
// 顯示對應發酵桶槽號碼 F1~F6 和目前狀態
// console.log(i+1 + ' : '+ ferment_output_status[i])
// 1 : F_InputtingBean
// 2 : F_Waiting
if (ferment_input_status_N[i] == 'FI_InputtingBean') {
$("#FI"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
$("#FI"+parseInt(i+1)+"_status").text("FI" + parseInt(i+1) + " 入豆中")
} else if (ferment_input_status_N[i] == 'FI_Waiting') {
$("#FI"+parseInt(i+1)+"_status_dot").css("background-color", "lightgray")
$("#FI"+parseInt(i+1)+"_status").text("FI" + parseInt(i+1) + " 空桶等待")
} else if (ferment_input_status_N[i] == 'FI_OutputtingBean') {
$("#FI"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
$("#FI"+parseInt(i+1)+"_status").text("FI" + parseInt(i+1) + " 可出豆")
} else {
console.log('pass')
}
}
// 桶槽狀態顯示
ferment_tank_status_N = ['{{F1}}', '{{F2}}', '{{F3}}', '{{F4}}', '{{F5}}', '{{F6}}',
'{{F7}}', '{{F8}}', '{{F9}}', '{{F10}}', '{{F11}}', '{{F12}}']
console.log('ferment_tank_status_N: ' + ferment_tank_status_N)
for (let i=0; i<ferment_tank_status_N.length; i++) {
// 顯示對應發酵桶槽號碼 F1~F6 和目前狀態
// console.log(i+1 + ' : '+ ferment_tank_status[i])
// 1 : F_InputtingBean
// 2 : F_Waiting
if (ferment_tank_status_N[i] == 'F_InputtingBean') {
$("#F"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
$("#F"+parseInt(i+1)+"_status").text("F" + parseInt(i+1) + " 入豆中")
} else if (ferment_tank_status_N[i] == 'F_InputtingBean_Pause') {
$("#F"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
$("#F"+parseInt(i+1)+"_status").text("F" + parseInt(i+1) + " 入豆暫停")
} else if (ferment_tank_status_N[i] == 'F_InputtingBean_Finish') {
$("#F"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
$("#F"+parseInt(i+1)+"_status").text("F" + parseInt(i+1) + " 入豆完成")
} else if (ferment_tank_status_N[i] == 'F_InputtingWater') {
$("#F"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
$("#F"+parseInt(i+1)+"_status").text("F" + parseInt(i+1) + " 入水中")
} else if (ferment_tank_status_N[i] == 'F_Waiting') {
$("#F"+parseInt(i+1)+"_status_dot").css("background-color", "lightgray")
$("#F"+parseInt(i+1)+"_status").text("F" + parseInt(i+1) + " 空桶等待")
} else if (ferment_tank_status_N[i] == 'F_Cleaning') {
$("#F"+parseInt(i+1)+"_status_dot").css("background-color", "plum")
$("#F"+parseInt(i+1)+"_status").text("F" + parseInt(i+1) + " 清洗中")
} else if (ferment_tank_status_N[i] == 'F_Fermenting') {
$("#F"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
$("#F"+parseInt(i+1)+"_status").text("F" + parseInt(i+1) + " 發酵中")
} else if (ferment_tank_status_N[i] == 'F_OutputtingBean') {
$("#F"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
$("#F"+parseInt(i+1)+"_status").text("F" + parseInt(i+1) + " 可出豆")
} else if (ferment_tank_status_N[i] == 'F_Warning') {
$("#F"+parseInt(i+1)+"_status_dot").css("background-color", "crimson")
$("#F"+parseInt(i+1)+"_status").text("F" + parseInt(i+1) + " 發生錯誤")
$("#F"+parseInt(i+1)+"_status").css("color", "crimson")
} else {
console.log('pass')
}
}
// 桶槽出料顯示
ferment_output_status_N = ['{{FO1}}', '{{FO2}}']
console.log('ferment_output_status_N: ' + ferment_output_status_N)
for (let i=0; i<ferment_output_status_N.length; i++) {
// 顯示對應發酵桶槽號碼 F1~F6 和目前狀態
// console.log(i+1 + ' : '+ ferment_output_status[i])
// 1 : F_InputtingBean
// 2 : F_Waiting
if (ferment_output_status_N[i] == 'FO_InputtingBean') {
$("#FO"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
$("#FO"+parseInt(i+1)+"_status").text("FO" + parseInt(i+1) + " 入豆中")
} else if (ferment_output_status_N[i] == 'FO_Waiting') {
$("#FO"+parseInt(i+1)+"_status_dot").css("background-color", "lightgray")
$("#FO"+parseInt(i+1)+"_status").text("FO" + parseInt(i+1) + " 空桶等待")
} else if (ferment_output_status_N[i] == 'FO_OutputtingBean') {
$("#FO"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
$("#FO"+parseInt(i+1)+"_status").text("FO" + parseInt(i+1) + " 可出豆")
} else {
console.log('pass')
}
}
// css
// height: 185px; 取代成 height: 210px;
// FI2 FO2 top: 620px; 取代成 top: 645px;
});
</script>
<style>
.F_status_css {
font-weight: bold;
}
.FermentContainer_position {
position: absolute;
top: 95px;
left: 53px;
}
.F1_position {
position: absolute;
top: 155px;
left: 240px;
width: 160px;
height: 185px;
border-style: solid;
border-color: aqua;
}
.F2_position {
position: absolute;
top: 155px;
left: 415px;
width: 160px;
height: 185px;
border-style: solid;
border-color: aqua;
}
.F3_position {
position: absolute;
top: 155px;
left: 595px;
width: 160px;
height: 185px;
border-style: solid;
border-color: aqua;
}
.F4_position {
position: absolute;
top: 155px;
left: 780px;
width: 160px;
height: 185px;
border-style: solid;
border-color: aqua;
}
.F5_position {
position: absolute;
top: 155px;
left: 960px;
width: 160px;
height: 185px;
border-style: solid;
border-color: aqua;
}
.F6_position {
position: absolute;
top: 155px;
left: 1150px;
width: 160px;
height: 185px;
border-style: solid;
border-color: aqua;
}
.F7_position {
position: absolute;
top: 430px;
left: 245px;
width: 160px;
height: 185px;
border-style: solid;
border-color: aqua;
}
.F8_position {
position: absolute;
top: 430px;
left: 420px;
width: 160px;
height: 185px;
border-style: solid;
border-color: aqua;
}
.F9_position {
position: absolute;
top: 430px;
left: 600px;
width: 160px;
height: 185px;
border-style: solid;
border-color: aqua;
}
.F10_position {
position: absolute;
top: 430px;
left: 785px;
width: 160px;
height: 185px;
border-style: solid;
border-color: aqua;
}
.F11_position {
position: absolute;
top: 430px;
left: 970px;
width: 160px;
height: 185px;
border-style: solid;
border-color: aqua;
}
.F12_position {
position: absolute;
top: 430px;
left: 1155px;
width: 160px;
height: 185px;
border-style: solid;
border-color: aqua;
}
.FI1_position {
position: absolute;
top: 370px;
left: 245px;
height: 50px;
width: 200px;
border-style: solid;
border-color: aqua;
}
.FI2_position {
position: absolute;
top: 620px;
left: 245px;
height: 50px;
width: 200px;
border-style: solid;
border-color: aqua;
}
.FO1_position {
position: absolute;
top: 370px;
left: 1110px;
height: 50px;
width: 200px;
border-style: solid;
border-color: aqua;
}
.FO2_position {
position: absolute;
top: 620px;
left: 1110px;
height: 50px;
width: 200px;
border-style: solid;
border-color: aqua;
}
.footer{
position: absolute;
bottom: 0px;
width: 100%;
background-color: #eee;
text-align: center;
}
</style>
<script language="JavaScript">
// 指定 10秒 刷新網頁一次
var WebUpdate_set
// WebUpdate_set = setInterval(function(){WebUpdate()} , 60 * 1000)
function WebUpdate(){
console.log("-- 狀態更新 start --")
/*
$.get('/loading_container_status/F', '', function (res) {
}, 'json');
*/
console.log("-- 狀態更新 end --")
};
</script>
</head>
<body>
<div id="wrapper">
<div id="coffee_header">
<!-- 匯入共同使用的 header.html 內容 -->
{% include 'header.html' %}
</div>
<center><button type="submit" class="btn btn-primary" onclick="testing_F_auto()">發酵桶槽自動化測試</button></center>
<script>
function testing_F_auto(){
console.log("-- 自動化程式 start --")
$.get('/ferment_auto_status', '', function (res) {
Ferment_Input_1_STATUS = res.Ferment_Input_1
console.log('FI1: ' + res.Ferment_Input_1)
console.log('F1: ' + res.Ferment_Tank_1)
console.log('F2: ' + res.Ferment_Tank_2)
console.log('F3: ' + res.Ferment_Tank_3)
console.log('F4: ' + res.Ferment_Tank_4)
console.log('F5: ' + res.Ferment_Tank_5)
console.log('F6: ' + res.Ferment_Tank_6)
console.log('FO1: ' + res.Ferment_Output_1)
// ----- 發酵出料 FO1 狀態 --------------------------------------------------------------
ferment_input_status = [res.Ferment_Input_1]
for (let i=0; i<ferment_input_status.length; i++) {
// 顯示對應發酵桶槽號碼 F1~F6 和目前狀態
// console.log(i+1 + ' : '+ ferment_output_status[i])
// 1 : F_InputtingBean
// 2 : F_Waiting
if (ferment_input_status[i] == 'FI_InputtingBean') {
console.log('[動作] 發酵入料 FI' + parseInt(i+1) + ' 入豆中')
$("#FI"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
$("#FI"+parseInt(i+1)+"_status").text("FI" + parseInt(i+1) + " 入豆中")
} else if (ferment_input_status[i] == 'FI_Waiting') {
console.log('[動作] 發酵入料 FI' + parseInt(i+1) + ' 空桶等待')
$("#FI"+parseInt(i+1)+"_status_dot").css("background-color", "lightgray")
$("#FI"+parseInt(i+1)+"_status").text("FI" + parseInt(i+1) + " 空桶等待")
} else if (ferment_input_status[i] == 'FI_OutputtingBean') {
console.log('[動作] 發酵入料 FI' + parseInt(i+1) + ' 可出豆')
$("#FI"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
$("#FI"+parseInt(i+1)+"_status").text("FI" + parseInt(i+1) + " 可出豆")
} else {
console.log('pass')
}
}
// ----- 發酵桶槽 F1~F6 狀態 --------------------------------------------------------------
ferment_tank_status = [res.Ferment_Tank_1, res.Ferment_Tank_2, res.Ferment_Tank_3,
res.Ferment_Tank_4, res.Ferment_Tank_5, res.Ferment_Tank_6]
for (let i=0; i<ferment_tank_status.length; i++) {
// 顯示對應發酵桶槽號碼 F1~F6 和目前狀態
// console.log(i+1 + ' : '+ ferment_tank_status[i])
// 1 : F_InputtingBean
// 2 : F_Waiting
if (ferment_tank_status[i] == 'F_InputtingBean') {
console.log('[動作] 發酵桶槽 F' + parseInt(i+1) + ' 入豆中')
$("#F"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
$("#F"+parseInt(i+1)+"_status").text("F" + parseInt(i+1) + " 入豆中")
} else if (ferment_tank_status[i] == 'F_InputtingBean_Pause') {
console.log('[動作] 發酵桶槽 F' + parseInt(i+1) + ' 入豆暫停')
$("#F"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
$("#F"+parseInt(i+1)+"_status").text("F" + parseInt(i+1) + " 入豆暫停")
} else if (ferment_tank_status[i] == 'F_InputtingBean_Finish') {
console.log('[動作] 發酵桶槽 F' + parseInt(i+1) + ' 入豆完成')
$("#F"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
$("#F"+parseInt(i+1)+"_status").text("F" + parseInt(i+1) + " 入豆完成")
} else if (ferment_tank_status[i] == 'F_InputtingWater') {
console.log('[動作] 發酵桶槽 F' + parseInt(i+1) + ' 入水中')
$("#F"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
$("#F"+parseInt(i+1)+"_status").text("F" + parseInt(i+1) + " 入水中")
} else if (ferment_tank_status[i] == 'F_Waiting') {
console.log('[動作] 發酵桶槽 F' + parseInt(i+1) + ' 空桶等待')
$("#F"+parseInt(i+1)+"_status_dot").css("background-color", "lightgray")
$("#F"+parseInt(i+1)+"_status").text("F" + parseInt(i+1) + " 空桶等待")
} else if (ferment_tank_status[i] == 'F_Fermenting') {
console.log('[動作] 發酵桶槽 F' + parseInt(i+1) + ' 發酵中')
$("#F"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
$("#F"+parseInt(i+1)+"_status").text("F" + parseInt(i+1) + " 發酵中")
} else if (ferment_tank_status[i] == 'F_OutputtingBean') {
console.log('[動作] 發酵桶槽 F' + parseInt(i+1) + ' 可出豆')
$("#F"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
$("#F"+parseInt(i+1)+"_status").text("F" + parseInt(i+1) + " 可出豆")
} else if (ferment_tank_status[i] == 'F_Warning') {
console.log('[動作] 發酵桶槽 F' + parseInt(i+1) + ' 發生錯誤')
$("#F"+parseInt(i+1)+"_status_dot").css("background-color", "crimson")
$("#F"+parseInt(i+1)+"_status").text("F" + parseInt(i+1) + " 發生錯誤")
$("#F"+parseInt(i+1)+"_status").css("color", "crimson")
} else {
console.log('pass')
}
}
// ----- 發酵出料 FO1 狀態 --------------------------------------------------------------
ferment_output_status = [res.Ferment_Output_1]
for (let i=0; i<ferment_output_status.length; i++) {
// 顯示對應發酵桶槽號碼 F1~F6 和目前狀態
// console.log(i+1 + ' : '+ ferment_output_status[i])
// 1 : F_InputtingBean
// 2 : F_Waiting
if (ferment_output_status[i] == 'FO_InputtingBean') {
console.log('[動作] 發酵出料 FO' + parseInt(i+1) + ' 入豆中')
$("#FO"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
$("#FO"+parseInt(i+1)+"_status").text("FO" + parseInt(i+1) + " 入豆中")
} else if (ferment_output_status[i] == 'FO_Waiting') {
console.log('[動作] 發酵出料 FO' + parseInt(i+1) + ' 空桶等待')
$("#FO"+parseInt(i+1)+"_status_dot").css("background-color", "lightgray")
$("#FO"+parseInt(i+1)+"_status").text("FO" + parseInt(i+1) + " 空桶等待")
} else if (ferment_output_status[i] == 'FO_OutputtingBean') {
console.log('[動作] 發酵出料 FO' + parseInt(i+1) + ' 可出豆')
$("#FO"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
$("#FO"+parseInt(i+1)+"_status").text("FO" + parseInt(i+1) + " 可出豆")
} else {
console.log('pass')
}
}
/*
console.log(res.Ferment_Input_2)
console.log(res.Ferment_Tank_7)
console.log(res.Ferment_Tank_8)
console.log(res.Ferment_Tank_9)
console.log(res.Ferment_Tank_10)
console.log(res.Ferment_Tank_11)
console.log(res.Ferment_Tank_12)
console.log(res.Ferment_Output_1)
console.log(res.Ferment_Output_2)
*/
}, 'json');
// console.log("-- 自動化程式 end --")
}
</script>
<div>
<!-- 底圖 發酵貨櫃 12 個發酵桶槽 -->
<div id="FermentContainer_pic" class="FermentContainer_position" >
<!--
<img src="../static/img/web_ferment_container.png" width="1450x" style="margin: auto; position: relative; z-index: -1;">
-->
</div>
<!-- 發酵槽 F1 -->
<div id="F1" tabindex="0" class="F1_position" role="button">
<span id="F1_status" class="F_status_css">F1 status</span>
<!-- F1 狀態點點-->
<div id="F1_status_dot" style="width: 20px; height: 20px; background-color: black; border-radius: 50%;"></div>
</div>
<!-- 發酵槽 F2 -->
<div id="F2" tabindex="0" class="F2_position" role="button">
<span id="F2_status" class="F_status_css">F2 status</span>
<div id="F2_status_dot" style="width: 20px; height: 20px; background-color: black; border-radius: 50%;"></div>
</div>
<!-- 發酵槽 F3 -->
<div id="F3" tabindex="0" class="F3_position" role="button">
<span id="F3_status" class="F_status_css">F3 status</span>
<div id="F3_status_dot" style="width: 20px; height: 20px; background-color: black; border-radius: 50%;"></div>
</div>
<!-- 發酵槽 F4 -->
<div id="F4" tabindex="0" class="F4_position" role="button">
<span id="F4_status" class="F_status_css">F4 status</span>
<div id="F4_status_dot" style="width: 20px; height: 20px; background-color: black; border-radius: 50%;"></div>
</div>
<!-- 發酵槽 F5 -->
<div id="F5" tabindex="0" class="F5_position" role="button">
<span id="F5_status" class="F_status_css">F5 status</span>
<div id="F5_status_dot" style="width: 20px; height: 20px; background-color: black; border-radius: 50%;"></div>
</div>
<!-- 發酵槽 F6 -->
<div id="F6" tabindex="0" class="F6_position" role="button">
<span id="F6_status" class="F_status_css">F6 status</span>
<div id="F6_status_dot" style="width: 20px; height: 20px; background-color: black; border-radius: 50%;"></div>
</div>
<!-- 發酵槽 F7 -->
<div id="F7" tabindex="0" class="F7_position" role="button" style="vertical-align: bottom;">
<span id="F7_status" class="F_status_css">F7 status</span>
<div id="F7_status_dot" style="width: 20px; height: 20px; background-color: black; border-radius: 50%;"></div>
</div>
<!-- 發酵槽 F8 -->
<div id="F8" tabindex="0" class="F8_position" role="button">
<span id="F8_status" class="F_status_css">F8 status</span>
<div id="F8_status_dot" style="width: 20px; height: 20px; background-color: black; border-radius: 50%;"></div>
</div>
<!-- 發酵槽 F9 -->
<div id="F9" tabindex="0" class="F9_position" role="button">
<span id="F9_status" class="F_status_css">F9 status</span>
<div id="F9_status_dot" style="width: 20px; height: 20px; background-color: black; border-radius: 50%;"></div>
</div>
<!-- 發酵槽 F10 -->
<div id="F10" tabindex="0" class="F10_position" role="button">
<span id="F10_status" class="F_status_css">F10 status</span>
<div id="F10_status_dot" style="width: 20px; height: 20px; background-color: black; border-radius: 50%;"></div>
</div>
<!-- 發酵槽 F11 -->
<div id="F11" tabindex="0" class="F11_position" role="button">
<span id="F11_status" class="F_status_css">F11 status</span>
<div id="F11_status_dot" style="width: 20px; height: 20px; background-color: black; border-radius: 50%;"></div>
</div>
<!-- 發酵槽 F12 -->
<div id="F12" tabindex="0" class="F12_position" role="button">
<span id="F12_status" class="F_status_css">F12 status</span>
<div id="F12_status_dot" style="width: 20px; height: 20px; background-color: black; border-radius: 50%;"></div>
</div>
<!-- 發酵槽入料儲豆槽 FI1 -->
<div id="FI1" tabindex="0" class="FI1_position" role="button">
<span id="FI1_status" class="F_status_css">FI1 status</span>
<div id="FI1_status_dot" style="width: 20px; height: 20px; background-color: black; border-radius: 50%;"></div>
</div>
<!-- 發酵槽入料儲豆槽 FI2 -->
<div id="FI2" tabindex="0" class="FI2_position" role="button">
<span id="FI2_status" class="F_status_css">FI2 status</span>
<div id="FI2_status_dot" style="width: 20px; height: 20px; background-color: black; border-radius: 50%;"></div>
</div>
<!-- 發酵槽出料儲豆槽 FO1 -->
<div id="FO1" tabindex="0" class="FO1_position" role="button">
<span id="FO1_status" class="F_status_css">FO1 status</span>
<div id="FO1_status_dot" style="width: 20px; height: 20px; background-color: black; border-radius: 50%;"></div>
</div>
<!-- 發酵槽出料儲豆槽 FO2 -->
<div id="FO2" tabindex="0" class="FO2_position" role="button">
<span id="FO2_status" class="F_status_css">FO2 status</span>
<div id="FO2_status_dot" style="width: 20px; height: 20px; background-color: black; border-radius: 50%;"></div>
</div>
</div>
<div id="coffee_footer">
<!-- 匯入共同使用的 footer.html 內容 -->
{% include 'footer.html' %}
</div>
</div>
</body>
</html>