coffeeproject20230512/coffeeproject/app/templates/auto_P.html

<!-- 宣告我們要套用模板 -->
{% 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 %}