coffeeproject20230512/coffeeproject/app/templates/auto_F.html

<!-- 宣告我們要套用模板 -->
{% extends "base.html" %}
{% block title %}{{ title }}{% endblock %}

{% block script %}
    <script language="JavaScript">
        function myrefresh()
        {
          $.get('/ferment_auto_data', function (resText) {
                var PO = [resText.PO1,resText.PO2];
                var FI = [resText.FI1,resText.FI2];
                var F=[resText.F1,resText.F2,resText.F3,resText.F4,resText.F5,resText.F6,resText.F7,resText.F8,resText.F9,resText.F10,resText.F11,resText.F12];
                var FO = [resText.FO1,resText.FO2];
                var DI = [resText.DI1,resText.DI2];                                                             
                
                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')
                  }
                }
                for (let i=0; i<2; i++) {
                    if (FI[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 (FI[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 (FI[i] == 'FI_OutputtingBean') {
                        $("#FI"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
                        $("#FI"+parseInt(i+1)+"_status").text("FI" + parseInt(i+1) + " 可出豆")
                  } else if (FI[i] == 'FI_Stand_by') {
                        $("#FI"+parseInt(i+1)+"_status_dot").css("background-color", "HotPink")
                        $("#FI"+parseInt(i+1)+"_status").text("FI" + parseInt(i+1) + " 待命")
                  } else {
                    console.log('pass')
                  }
                }
                for (let i=0; i<12; i++) {
                    if (F[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 (F[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 (F[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 (F[i] == 'F_InputtingWater') {
                      $("#F"+parseInt(i+1)+"_status_dot").css("background-color", "DeepSkyBlue")
                      $("#F"+parseInt(i+1)+"_status").text("F" + parseInt(i+1) + "  內外桶入水中")
                  } else if (F[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 (F[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 (F[i] == 'F_Fermenting') {
                      $("#F"+parseInt(i+1)+"_status_dot").css("background-color", "NavajoWhite")
                      $("#F"+parseInt(i+1)+"_status").text("F" + parseInt(i+1) + "  發酵中")
                  } else if (F[i] == 'F_OutputtingWater') {
                      $("#F"+parseInt(i+1)+"_status_dot").css("background-color", "DeepSkyBlue")
                      $("#F"+parseInt(i+1)+"_status").text("F" + parseInt(i+1) + "  內桶排水中")
                  } else if (F[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 (F[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 if (F[i] == 'F_Stand_by') {
                      $("#F"+parseInt(i+1)+"_status_dot").css("background-color", "HotPink")
                      $("#F"+parseInt(i+1)+"_status").text("F" + parseInt(i+1) + " 待命中")
                  } else {
                    console.log('pass')
                  }
                }                
                for (let i=0; i<2; i++) {
                if (FO[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 (FO[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 (FO[i] == 'FO_OutputtingBean') {
                    $("#FO"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
                    $("#FO"+parseInt(i+1)+"_status").text("FO" + parseInt(i+1) + " 可出豆")
                  } else if (FO[i] == 'FO_Stand_by') {
                    $("#FO"+parseInt(i+1)+"_status_dot").css("background-color", "HotPink")
                    $("#FO"+parseInt(i+1)+"_status").text("FO" + parseInt(i+1) + " 待命")

                  } else {
                    console.log('pass')
                  }                
                }
                for (let i=0; i<2; i++) {
                    if (DI[i] == 'DI_InputtingBean') {
                        $("#DI"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
                        $("#DI"+parseInt(i+1)+"_status").text("DI" + parseInt(i+1) + " 入豆中")
                  } else if (DI[i] == 'DI_Waiting') {
                        $("#DI"+parseInt(i+1)+"_status_dot").css("background-color", "lightgray")
                        $("#DI"+parseInt(i+1)+"_status").text("DI" + parseInt(i+1) + " 空桶等待")
                  } else if (DI[i] == 'DI_OutputtingBean') {
                        $("#DI"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
                        $("#DI"+parseInt(i+1)+"_status").text("DI" + parseInt(i+1) + " 可出豆")
                  } else if (DI[i] == 'DI_Stand_by') {
                        $("#DI"+parseInt(i+1)+"_status_dot").css("background-color", "HotPink")
                        $("#DI"+parseInt(i+1)+"_status").text("DI" + parseInt(i+1) + " 待命")
                  } else {
                    console.log('pass')
                  }
                }
                
          },'json');
          loading_F()
        }
        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);
            // 脫皮機
            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')
                }
            }
            // 乾燥入料
            dry_input_status = ['{{DI1}}','{{DI2}}']
            for (let i=0; i<dry_input_status.length; i++) {
                if (dry_input_status[i] == 'DI_InputtingBean') {
                    $("#DI"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
                    $("#DI"+parseInt(i+1)+"_status").text("DI" + parseInt(i+1) + " 入豆中")
                } else if (dry_input_status[i] == 'DI_Waiting') {
                    $("#DI"+parseInt(i+1)+"_status_dot").css("background-color", "lightgray")
                    $("#DI"+parseInt(i+1)+"_status").text("DI" + parseInt(i+1) + " 空桶等待")
                } else if (dry_input_status[i] == 'DI_OutputtingBean') {
                    $("#DI"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
                    $("#DI"+parseInt(i+1)+"_status").text("DI" + parseInt(i+1) + " 可出豆")
                } else if (dry_input_status[i] == 'DI_Stand_by') {
                    $("#DI"+parseInt(i+1)+"_status_dot").css("background-color", "HotPink")
                    $("#DI"+parseInt(i+1)+"_status").text("DI" + parseInt(i+1) + " 待命")
                } else {
                    console.log('pass')
                }
            }
            // 桶槽入料
            ferment_input_status_N = ['{{FI1}}', '{{FI2}}']
            for (let i=0; i<ferment_input_status_N.length; i++) {
                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 if (ferment_input_status_N[i] == 'FI_Stand_by') {
                    $("#FI"+parseInt(i+1)+"_status_dot").css("background-color", "HotPink")
                    $("#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}}']
            for (let i=0; i<ferment_tank_status_N.length; i++) {
                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", "DeepSkyBlue")
                    $("#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", "NavajoWhite")
                    $("#F"+parseInt(i+1)+"_status").text("F" + parseInt(i+1) + "  發酵中")
                } else if (ferment_tank_status_N[i] == 'F_OutputtingWater') {
                      $("#F"+parseInt(i+1)+"_status_dot").css("background-color", "DeepSkyBlue")
                      $("#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 if (ferment_tank_status_N[i] == 'F_Stand_by') {
                    $("#F"+parseInt(i+1)+"_status_dot").css("background-color", "HotPink")
                    $("#F"+parseInt(i+1)+"_status").text("F" + parseInt(i+1) + " 待命中")
                } else {
                    console.log('pass')
                }
            }

            // 桶槽出料顯示
            ferment_output_status_N = ['{{FO1}}', '{{FO2}}']
            for (let i=0; i<ferment_output_status_N.length; i++) {
                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 if (ferment_output_status_N[i] == 'FO_Stand_by') {
                    $("#FO"+parseInt(i+1)+"_status_dot").css("background-color", "HotPink")
                    $("#FO"+parseInt(i+1)+"_status").text("FO" + parseInt(i+1) + " 待命")
                } else {
                    console.log('pass')
                }
             loading_F()
            }
        });
        $(function(){
            $('#cb_cleaning').on('change', function () {
                if ($('#cb_cleaning').prop('checked')) {
                    $("input[name='Ferment_auto_cleaning_Ftimes']").attr('disabled', false);
                    $("input[name='Ferment_auto_cleaning_Ftimes']").attr('value', '1');
                } else {
                    $("input[name='Ferment_auto_cleaning_Ftimes']").attr('disabled', true);
                }
            })
            $('#cb_calibratingEC').on('change', function () {
                if ($('#cb_calibratingEC').prop('checked')) {
                    $("input[name='Ferment_auto_calibratingEC_Ftimes']").attr('disabled', false);
                    $("input[name='Ferment_auto_calibratingEC_Ftimes']").attr('value', '1');
                } else {
                    $("input[name='Ferment_auto_calibratingEC_Ftimes']").attr('disabled', true);
                }
            })
            $('#cb_calibratingSTIR').on('change', function () {
                if ($('#cb_calibratingSTIR').prop('checked')) {
                    $("input[name='Ferment_auto_calibratingSTIR_Ftimes']").attr('disabled', false);
                    $("input[name='Ferment_auto_calibratingSTIR_Ftimes']").attr('value', '1');
                } else {
                    $("input[name='Ferment_auto_calibratingSTIR_Ftimes']").attr('disabled', true);
                }
            })
        })

        function loading_F(){
            var ftid = '{{ftid}}';
            console.log(ftid)
            $.get('/loading/F'+ftid, '', function (resText) {
            var a = [resText.vacuum,resText.threewayvalve_input,resText.diskvalve,resText.solenoid_tank_pump,resText.solenoid_disinfect,resText.solenoid_outer_water,resText.solenoid_water_in,resText.solenoid_water_out,resText.pump_sensor,resText.threewayvalve_outer_float,resText.heater1,resText.heater2,resText.motor,resText.warning_light];
               for (let i=0; i<14; 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_1").text(resText.UltraSonic);
                $("#sensor_2").text(resText.SHT11_Temp);
                $("#sensor_3").text(resText.SHT11_Humidity);
                $("#sensor_4").text(resText.CO2);
                $("#sensor_5").text(resText.PA);
                $("#sensor_6").text(resText.PH);
                $("#sensor_7").text(resText.ORP);
                $("#sensor_8").text(resText.DO);
                $("#sensor_9").text(resText.EC);
                $("#sensor_10").text(resText.WaterLevel);
                $("#sensor_11").text(resText.motorEncoder);
                $("#sensor_12").text(resText.butterflyvalve);
            }, 'json');


        }
    </script>
{% endblock %}

{% block style %}
    <style>
        .F_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>
                                   <!-- 發酵槽入料儲豆槽 FI1 -->
                                    <div id="FI1" tabindex="0" class="FI1_position" role="button" style="text-align: center;">
                                        <span id="FI1_status" class="F_status_css">FI1 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>
                                    
                                    <div id="F1" tabindex="0" class="F1_position" role="button">
                                        <span id="F1_status" class="F_status_css">F1 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>
                                    
                                   <div id="F2" tabindex="0" class="F2_position" role="button">
                                        <span id="F2_status" class="F_status_css">F2 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>
                                    
                                    <div id="F3" tabindex="0" class="F3_position" role="button">
                                        <span id="F3_status" class="F_status_css">F3 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>
                                    
                                    <div id="F4" tabindex="0" class="F4_position" role="button">
                                        <span id="F4_status" class="F_status_css">F4 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>
                                   <div id="F5" tabindex="0" class="F5_position" role="button">
                                        <span id="F5_status" class="F_status_css">F5 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>
                                    <div id="F6" tabindex="0" class="F6_position" role="button">
                                        <span id="F6_status" class="F_status_css">F6 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>
                                   <div id="FO1" tabindex="0" class="FO1_position" role="button">
                                        <span id="FO1_status" class="F_status_css">FO1 status</span>
                                        
                                    </div>
                                </td>
                            </tr>
                        </table>
                    </td>

                </tr>
                <tr>
                    <td  width="12.5%" style="border: lightsteelblue 1px solid;">
                        <div id="FI1_status_dot" style="height: 20px; background-color: black;"></div>
                    </td>
                    <td  width="12.5%" style="border: lightsteelblue 1px solid;">
                        <div id="F1_status_dot" style=" height: 20px; background-color: black;"></div>
                    </td>
                    <td  width="12.5%" style="border: lightsteelblue 1px solid;">
                        <div id="F2_status_dot" style=" height: 20px; background-color: black;"></div>
                    </td>
                    <td width="12.5%" style="border: lightsteelblue 1px solid;">
                        <div id="F3_status_dot" style=" height: 20px; background-color: black;"></div>
                    </td>
                    <td  width="12.5%" style="border: lightsteelblue 1px solid;">
                        <div id="F4_status_dot" style="height: 20px; background-color: black;"></div>
                    </td>
                    <td width="12.5%" style="border: lightsteelblue 1px solid;">
                        <div id="F5_status_dot" style="height: 20px; background-color: black;"></div>
                    </td>
                     <td  width="12.5%" style="border: lightsteelblue 1px solid;">
                        <div id="F6_status_dot" style="height: 20px; background-color: black;"></div>
                    </td>
                    <td width="12.5%" style="border: lightsteelblue 1px solid;">
                        <div id="FO1_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>
                                    <div id="FI2" tabindex="0" class="FI2_position" role="button">
                                        <span id="FI2_status" class="F_status_css">FI2 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>
                                   <div id="F7" tabindex="0" class="F7_position" role="button">
                                        <span id="F7_status" class="F_status_css">F7 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>
                                    <div id="F8" tabindex="0" class="F8_position" role="button">
                                        <span id="F8_status" class="F_status_css">F8 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>
                                    <div id="F9" tabindex="0" class="F9_position" role="button">
                                        <span id="F9_status" class="F_status_css">F9 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>
                                     <div id="F10" tabindex="0" class="F10_position" role="button">
                                        <span id="F10_status" class="F_status_css">F10 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>
                                    <div id="F11" tabindex="0" class="F11_position" role="button">
                                        <span id="F11_status" class="F_status_css">F11 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>
                                    <div id="F12" tabindex="0" class="F12_position" role="button">
                                        <span id="F12_status" class="F_status_css">F12 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>
                                   <div id="FO2" tabindex="0" class="FO2_position" role="button">
                                        <span id="FO2_status" class="F_status_css">FO2 status</span>
                                        
                                    </div>

                                </td>
                            </tr>
                        </table>
                    </td>
                    
                </tr>
                <tr>
                    <td  width="12.5%" style="border: lightsteelblue 1px solid;">
                        <div id="FI2_status_dot" style=" height: 20px; background-color: black;"></div>
                    </td>
                    <td  width="12.5%" style="border: lightsteelblue 1px solid;">
                        <div id="F7_status_dot" style=" height: 20px; background-color: black;"></div>
                    </td>
                    <td  width="12.5%" style="border: lightsteelblue 1px solid;">
                        <div id="F8_status_dot" style=" height: 20px; background-color: black;"></div>
                    </td>
                    <td width="12.5%" style="border: lightsteelblue 1px solid;">
                        <div id="F9_status_dot" style=" height: 20px; background-color: black;"></div>
                    </td>
                    <td  width="12.5%" style="border: lightsteelblue 1px solid;">
                        <div id="F10_status_dot" style="height: 20px; background-color: black;"></div>
                    </td>
                    <td width="12.5%" style="border: lightsteelblue 1px solid;">
                        <div id="F11_status_dot" style="height: 20px; background-color: black;"></div>
                    </td>
                     <td  width="12.5%" style="border: lightsteelblue 1px solid;">
                        <div id="F12_status_dot" style="height: 20px; background-color: black;"></div>
                    </td>
                    <td width="12.5%" style="border: lightsteelblue 1px solid;">
                        <div id="FO2_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="7%" style="border: lightsteelblue 1px solid;">
                            桶槽<br>真空吸料機
                        </td>
                        <td width="7%" style="border: lightsteelblue 1px solid;">
                            入料<br>三通閥
                        </td>
                        <td width="7%" style="border: lightsteelblue 1px solid;">
                            蝴蝶閥
                        </td>
                        <td width="7%" style="border: lightsteelblue 1px solid;">
                            逆洗幫浦<br>電磁閥
                        </td>
                        <td width="7%" style="border: lightsteelblue 1px solid;">
                            桶內消毒<br>電磁閥
                        </td>
                        <td width="7%" style="border: lightsteelblue 1px solid;">
                            保溫夾層進水<br>電磁閥
                        </td>
                        <td width="7%" style="border: lightsteelblue 1px solid;">
                            清水入水<br>電磁閥
                        </td>
                        <td width="7%" style="border: lightsteelblue 1px solid;">
                            排水廢水<br>電磁閥
                        </td>
                        <td width="7%" style="border: lightsteelblue 1px solid;">
                            感測器抽水<br>雙核隔膜泵
                        </td>
                        <td width="7%" style="border: lightsteelblue 1px solid;">
                            外桶浮選<br>三通閥
                        </td>
                        <td width="7%" style="border: lightsteelblue 1px solid;">
                            加熱器<br>1
                        </td>
                        <td width="7%" style="border: lightsteelblue 1px solid;">
                            加熱器<br>2
                        </td>
                        <td width="7%" style="border: lightsteelblue 1px solid;">
                            馬達
                        </td>
                        <td width="7%" 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>
                        <td style="border: lightsteelblue 1px solid;">
                            <div id="actuator_2_status" style="margin:0 auto;  height: 20px; background-color: lightgray;"></div>
                        </td>
                        <td style="border: lightsteelblue 1px solid;">
                            <div id="actuator_3_status" style="margin:0 auto;  height: 20px; background-color: lightgray;"></div>
                        </td>
                        <td style="border: lightsteelblue 1px solid;">
                            <div id="actuator_4_status" style="margin:0 auto;  height: 20px; background-color: lightgray;"></div>
                        </td>
                        <td style="border: lightsteelblue 1px solid;">
                            <div id="actuator_5_status" style="margin:0 auto;  height: 20px; background-color: lightgray;"></div>
                        </td>
                        <td style="border: lightsteelblue 1px solid;">
                            <div id="actuator_6_status" style="margin:0 auto;  height: 20px; background-color: lightgray;"></div>
                        </td>
                        <td style="border: lightsteelblue 1px solid;">
                            <div id="actuator_7_status" style="margin:0 auto;  height: 20px; background-color: lightgray;"></div>
                        </td>
                        <td style="border: lightsteelblue 1px solid;">
                            <div id="actuator_8_status" style="margin:0 auto;  height: 20px; background-color: lightgray;"></div>
                        </td>
                        <td style="border: lightsteelblue 1px solid;">
                            <div id="actuator_9_status" style="margin:0 auto;  height: 20px; background-color: lightgray;"></div>
                        </td>
                        <td style="border: lightsteelblue 1px solid;">
                            <div id="actuator_10_status" style="margin:0 auto;  height: 20px; background-color: lightgray;"></div>
                        </td>
                        <td style="border: lightsteelblue 1px solid;">
                            <div id="actuator_11_status" style="margin:0 auto;  height: 20px; background-color: lightgray;"></div>
                        </td>
                        <td style="border: lightsteelblue 1px solid;">
                            <div id="actuator_12_status" style="margin:0 auto;  height: 20px; background-color: lightgray;"></div>
                        </td>
                        <td style="border: lightsteelblue 1px solid;">
                            <div id="actuator_13_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>
                        <td style="border: lightsteelblue 1px solid;">
                            溫度
                        </td>
                        <td style="border: lightsteelblue 1px solid;">
                            濕度
                        </td>
                        <td style="border: lightsteelblue 1px solid;">
                            二氧化碳
                        </td>
                        <td style="border: lightsteelblue 1px solid;">
                            大氣壓力
                        </td>
                        <td style="border: lightsteelblue 1px solid;">
                            水質<br>酸鹼度
                        </td>
                        <td style="border: lightsteelblue 1px solid;">
                            水質<br>氧化還原電位
                        </td>
                        <td style="border: lightsteelblue 1px solid;">
                            水質<br>溶氧量
                        </td>
                        <td style="border: lightsteelblue 1px solid;">
                            水質<br>導電度
                        </td>
                        <td style="border: lightsteelblue 1px solid;">
                            保溫夾層<br>水位
                        </td>
                        <td style="border: lightsteelblue 1px solid;"> 
                            馬達<br>編碼器
                        </td>
                        <td style="border: lightsteelblue 1px solid;">
                            蝴蝶閥<br>編碼器
                        </td>
                    
                    </tr>
                    <tr>
                       
                        <td style="border: lightsteelblue 1px solid;"> 
                            <span id="sensor_1"></span>
                        </td>
                        <td style="border: lightsteelblue 1px solid;">
                            <span id="sensor_2"></span>
                        </td>
                        <td style="border: lightsteelblue 1px solid;"> 
                            <span id="sensor_3"></span>
                        </td>
                        <td style="border: lightsteelblue 1px solid;">
                            <span id="sensor_4"></span>
                        </td>
                        <td style="border: lightsteelblue 1px solid;">
                            <span id="sensor_5"></span>
                        </td>
                        <td style="border: lightsteelblue 1px solid;">
                            <span id="sensor_6"></span>
                        </td>
                        <td style="border: lightsteelblue 1px solid;">
                            <span id="sensor_7"></span>
                        </td>
                        <td style="border: lightsteelblue 1px solid;">
                            <span id="sensor_8"></span>
                        </td>
                        <td style="border: lightsteelblue 1px solid;">
                            <span id="sensor_9"></span>
                        </td>
                        <td style="border: lightsteelblue 1px solid;">
                            <span id="sensor_10"></span>
                        </td>
                        <td style="border: lightsteelblue 1px solid;">
                            <span id="sensor_11"></span>
                        </td>
                        <td style="border: lightsteelblue 1px solid;">
                            <span id="sensor_12"></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_vacuum_time" class="input-text" type="text" value="5">秒<br>
                        水位高度
                        <input name="Ferment_Tank_water_height" class="input-text" type="text" value="8">公分<br>
                        馬達轉速
                        <input name="Ferment_Tank_motor_rpm" class="input-text" type="text" value="15">rpm<br>
                        發酵溫度
                        <input name="Ferment_Tank_fermenting_temp" class="input-text" type="text" value="30">℃<br>
                        廢水排放
                        <input name="Ferment_Tank_WaterOut_time" class="input-text" type="text" value="60">秒, 消毒開啟
                        <input name="Ferment_Tank_Disinfect_time" class="input-text" type="text" value="10">秒<br>

                    </td>
                </tr>
                </table>
                </div>
                
                
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
{% endblock %}