123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752 |
- <!-- 宣告我們要套用模板 -->
- {% 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_P()
- }
- 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_P()
- });
- function loading_P(){
- var ptid = '{{ptid}}';
- $.get('/loading/P'+ptid, '', function (resText) {
- var a = [resText.tank_vacuum,resText.tank_motor];
- for (let i=0; i<2; i++) {
- if (a[i] == 1) {
- $("#actuator_"+parseInt(i)+"_status").css("background-color", "MediumSeaGreen")
- } else if (a[i] == 0) {
- $("#actuator_"+parseInt(i)+"_status").css("background-color", "lightgray")
- }
- else {
- $("#actuator_"+parseInt(i)+"_status").css("background-color", "crimson")
- }
- }
- $("#sensor_3").text(resText.motorEncoder);
- }, '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>
- <!-- 發酵貨櫃 致動器狀態 感測器數值 -->
- <div style="text-align: center;">
- <table style="border: 3px lightsteelblue solid; margin-right: auto; margin-left: auto; text-align: center; margin-top: 5px;" cellpadding="5" border="1">
- <tr>
- <td width="50%" style="border: lightsteelblue 1px solid;" >
- 桶槽<br>真空吸料機
- </td>
- <td width="50%" style="border: lightsteelblue 1px solid;">
- 馬達
- </td>
- </tr>
- <tr>
- <td style="border: lightsteelblue 1px solid;">
- <div id="actuator_0_status" style="margin:0 auto; height: 20px; background-color: lightgray;"></div>
- </td>
- <td style="border: lightsteelblue 1px solid;">
- <div id="actuator_1_status" style="margin:0 auto; height: 20px; background-color: lightgray;"></div>
- </td>
- </tr>
- </table>
- <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_3"></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_motor_rpm" class="input-text" type="text" value="15">rpm<br>
- </td>
- </tr>
- </table>
- </div>
-
-
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- {% endblock %}
|