coffeeproject20230512/coffeeproject/app/templates/auto_D.html

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

{% block script %}
    <script language="JavaScript">
        function myrefresh()
        { 
          $.get('/dry_auto_data', function (resText) {
                var DI = [resText.DI1,resText.DI2];
                var D=[resText.D1,resText.D2,resText.D3,resText.D4,resText.D5,resText.D6,resText.D7,resText.D8,resText.D9,resText.D10,resText.D11,resText.D12];
                var DO = [resText.DO1,resText.DO2];
                var a=[resText.vacuum_input,resText.vacuum,resText.threewayvalve_input,resText.diskvalve,resText.solenoid_disinfect,resText.solenoid_outer_water,resText.motor,resText.vacuum_pump,resText.heater1,resText.heater2,resText.vacuum_output]
                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')
                  }
                }
                for (let i=0; i<12; i++) {
                if (D[i] == 'D_InputtingBean') {
                    $("#D"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
                    $("#D"+parseInt(i+1)+"_status").text("D" + parseInt(i+1) + "  入豆中")
                  } else if (D[i] == 'D_InputtingBean_Pause') {
                    $("#D"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
                    $("#D"+parseInt(i+1)+"_status").text("D" + parseInt(i+1) + "  入豆暫停")
                  } else if (D[i] == 'D_InputtingBean_Finish') {
                    $("#D"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
                    $("#D"+parseInt(i+1)+"_status").text("D" + parseInt(i+1) + "  入豆完成")
                  } else if (D[i] == 'D_Waiting') {
                    $("#D"+parseInt(i+1)+"_status_dot").css("background-color", "lightgray")
                    $("#D"+parseInt(i+1)+"_status").text("D" + parseInt(i+1) + "  空桶等待")
                  } else if (D[i] == 'D_InputtingWater') {
                      $("#D"+parseInt(i+1)+"_status_dot").css("background-color", "DeepSkyBlue")
                      $("#D"+parseInt(i+1)+"_status").text("D" + parseInt(i+1) + " 外桶入水中")
                  } else if (D[i] == 'D_Cleaning') {
                    $("#D"+parseInt(i+1)+"_status_dot").css("background-color", "plum")
                    $("#D"+parseInt(i+1)+"_status").text("D" + parseInt(i+1) + "  清洗中")
                  } else if (D[i] == 'D_Drying') {
                    $("#D"+parseInt(i+1)+"_status_dot").css("background-color", "Peru")
                    $("#D"+parseInt(i+1)+"_status").text("D" + parseInt(i+1) + "  乾燥中")
                  } else if (D[i] == 'D_OutputtingBean') {
                    $("#D"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
                    $("#D"+parseInt(i+1)+"_status").text("D" + parseInt(i+1) + "  可出豆")
                  } else if (D[i] == 'D_Warning') {
                    $("#D"+parseInt(i+1)+"_status_dot").css("background-color", "crimson")
                    $("#D"+parseInt(i+1)+"_status").text("D" + parseInt(i+1) + "  發生錯誤")
                    $("#D"+parseInt(i+1)+"_status").css("color", "crimson")
                  } else if (D[i] == 'D_Stand_by') {
                    $("#D"+parseInt(i+1)+"_status_dot").css("background-color", "HotPink")
                    $("#D"+parseInt(i+1)+"_status").text("D" + parseInt(i+1) + " 待命")
                  } else {
                    console.log('pass')
                  }
                }                
                for (let i=0; i<2; i++) {
                if (DO[i] == 'DO_InputtingBean') {
                    $("#DO"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
                    $("#DO"+parseInt(i+1)+"_status").text("DO" + parseInt(i+1) + " 入豆中")

                  } else if (DO[i] == 'DO_Waiting') {
                    $("#DO"+parseInt(i+1)+"_status_dot").css("background-color", "lightgray")
                    $("#DO"+parseInt(i+1)+"_status").text("DO" + parseInt(i+1) + " 空桶等待")

                  } else if (DO[i] == 'DO_OutputtingBean') {
                    $("#DO"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
                    $("#DO"+parseInt(i+1)+"_status").text("DO" + parseInt(i+1) + " 可出豆")
                  } else if (DO[i] == 'DO_Stand_by') {
                    $("#DO"+parseInt(i+1)+"_status_dot").css("background-color", "HotPink")
                    $("#DO"+parseInt(i+1)+"_status").text("DO" + parseInt(i+1) + " 待命")

                  } else {
                    console.log('pass')
                  }                
                }
                        
          },'json');
          loading_D()
        }
        setInterval('myrefresh()',1000);
    </script>
    <script>
        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);
            // 桶槽入料顯示
            dry_input_status_N = ['{{DI1}}', '{{DI2}}']
            for (let i=0; i<dry_input_status_N.length; i++) {
                if (dry_input_status_N[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_N[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_N[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_N[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')
                }
            }
            // 桶槽狀態顯示
            dry_tank_status_N = ['{{D1}}', '{{D2}}', '{{D3}}', '{{D4}}', '{{D5}}', '{{D6}}',
                                 '{{D7}}', '{{D8}}', '{{D9}}', '{{D10}}', '{{D11}}', '{{D12}}']
            for (let i=0; i<dry_tank_status_N.length; i++) {
                if (dry_tank_status_N[i] == 'D_InputtingBean') {
                    $("#D"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
                    $("#D"+parseInt(i+1)+"_status").text("D" + parseInt(i+1) + "  入豆中")
                } else if (dry_tank_status_N[i] == 'D_InputtingBean_Pause') {
                    $("#D"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
                    $("#D"+parseInt(i+1)+"_status").text("D" + parseInt(i+1) + "  入豆暫停")
                } else if (dry_tank_status_N[i] == 'D_InputtingBean_Finish') {
                    $("#D"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
                    $("#D"+parseInt(i+1)+"_status").text("D" + parseInt(i+1) + "  入豆完成")
                } else if (dry_tank_status_N[i] == 'D_InputtingWater') {
                      $("#D"+parseInt(i+1)+"_status_dot").css("background-color", "DeepSkyBlue")
                      $("#D"+parseInt(i+1)+"_status").text("D" + parseInt(i+1) + "外桶入水中")
                } else if (dry_tank_status_N[i] == 'D_Waiting') {
                    $("#D"+parseInt(i+1)+"_status_dot").css("background-color", "lightgray")
                    $("#D"+parseInt(i+1)+"_status").text("D" + parseInt(i+1) + "  空桶等待")
                } else if (dry_tank_status_N[i] == 'D_Cleaning') {
                    $("#D"+parseInt(i+1)+"_status_dot").css("background-color", "plum")
                    $("#D"+parseInt(i+1)+"_status").text("D" + parseInt(i+1) + "  清洗中")
                } else if (dry_tank_status_N[i] == 'D_Drying') {
                    $("#D"+parseInt(i+1)+"_status_dot").css("background-color", "Peru")
                    $("#D"+parseInt(i+1)+"_status").text("D" + parseInt(i+1) + "  乾燥中")
                } else if (dry_tank_status_N[i] == 'D_OutputtingBean') {
                    $("#D"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
                    $("#D"+parseInt(i+1)+"_status").text("D" + parseInt(i+1) + "  可出豆")
                } else if (dry_tank_status_N[i] == 'D_Warning') {
                    $("#D"+parseInt(i+1)+"_status_dot").css("background-color", "crimson")
                    $("#D"+parseInt(i+1)+"_status").text("D" + parseInt(i+1) + "  發生錯誤")
                    $("#D"+parseInt(i+1)+"_status").css("color", "crimson")
                } else if (dry_input_status_N[i] == 'D_Stand_by') {
                    $("#D"+parseInt(i+1)+"_status_dot").css("background-color", "HotPink")
                    $("#D"+parseInt(i+1)+"_status").text("D" + parseInt(i+1) + " 待命")
                } else {
                    console.log('pass')
                }
            }
            // 桶槽出料顯示
            dry_output_status_N = ['{{DO1}}', '{{DO2}}']
                        for (let i=0; i<dry_output_status_N.length; i++) {
                if (dry_output_status_N[i] == 'DO_InputtingBean') {
                    $("#DO"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
                    $("#DO"+parseInt(i+1)+"_status").text("DO" + parseInt(i+1) + " 入豆中")

                } else if (dry_output_status_N[i] == 'DO_Waiting') {
                    $("#DO"+parseInt(i+1)+"_status_dot").css("background-color", "lightgray")
                    $("#DO"+parseInt(i+1)+"_status").text("DO" + parseInt(i+1) + " 空桶等待")

                } else if (dry_output_status_N[i] == 'DO_OutputtingBean') {
                    $("#DO"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
                    $("#DO"+parseInt(i+1)+"_status").text("DO" + parseInt(i+1) + " 可出豆")
                } else if (dry_output_status_N[i] == 'DO_Stand_by') {
                    $("#DO"+parseInt(i+1)+"_status_dot").css("background-color", "HotPink")
                    $("#DO"+parseInt(i+1)+"_status").text("DO" + parseInt(i+1) + " 待命")

                } else {
                    console.log('pass')
                }
    
            }
            loading_D()
        });
        
        function loading_D(){
            var dtid = '{{dtid}}';
            $.get('/loading/D'+dtid, '', function (resText) {
                var a=[resText.vacuum,resText.threewayvalve_input,resText.diskvalve,resText.solenoid_outer_water,resText.solenoid_disinfect,resText.solenoid_water_out,resText.motor,resText.vacuum_pump,resText.heater1,resText.heater2,resText.warning_light]
                for (let i=0; i<11; 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.soil_Temp);
                $("#sensor_5").text(resText.soil_Humidity);
                $("#sensor_6").text(resText.soil_EC);
                $("#sensor_7").text(resText.PA);
                $("#sensor_8").text(resText.motorEncoder);
                $("#sensor_9").text(resText.butterflyvalve);
                $("#sensor_10").text(resText.WaterLevel);
            }, 'json');     
        };
    </script>
{% endblock %}

{% block style %}  
    <style>
        .D_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>
                                   
                                    <div id="DI1" tabindex="0" class="DI1_position" role="button" style="text-align: center;">
                                        <span id="DI1_status" class="D_status_css">DI1 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="D1" tabindex="0" class="D1_position" role="button">
                                        <span id="D1_status" class="D_status_css">D1 status</span>
                                        <!-- D1 狀態點點-->
                                        
                                    </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="D2" tabindex="0" class="D2_position" role="button">
                                        <span id="D2_status" class="D_status_css">D2 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="D3" tabindex="0" class="D3_position" role="button">
                                        <span id="D3_status" class="D_status_css">D3 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="D4" tabindex="0" class="D4_position" role="button">
                                        <span id="D4_status" class="D_status_css">D4 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="D5" tabindex="0" class="D5_position" role="button">
                                        <span id="D5_status" class="D_status_css">D5 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="D6" tabindex="0" class="D6_position" role="button">
                                        <span id="D6_status" class="D_status_css">D6 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="DO1" tabindex="0" class="DO1_position" role="button">
                                        <span id="DO1_status" class="D_status_css">DO1 status</span>
                                    </div>
                                </td>
                            </tr>
                        </table>
                    </td>

                </tr>
                <tr>
                    <td  width="12.5%" style="border: lightsteelblue 1px solid;">
                        <div id="DI1_status_dot" style=" height: 20px; background-color: black;"></div>
                    </td>
                    <td  width="12.5%" style="border: lightsteelblue 1px solid;">
                        <div id="D1_status_dot" style=" height: 20px; background-color: black;"></div>
                    </td>
                    <td  width="12.5%" style="border: lightsteelblue 1px solid;">
                        <div id="D2_status_dot" style=" height: 20px; background-color: black;"></div>
                    </td>
                    <td width="12.5%" style="border: lightsteelblue 1px solid;">
                        <div id="D3_status_dot" style=" height: 20px; background-color: black;"></div>
                    </td>
                    <td  width="12.5%" style="border: lightsteelblue 1px solid;">
                        <div id="D4_status_dot" style="height: 20px; background-color: black;"></div>
                    </td>
                    <td width="12.5%" style="border: lightsteelblue 1px solid;">
                        <div id="D5_status_dot" style="height: 20px; background-color: black;"></div>
                    </td>
                     <td  width="12.5%" style="border: lightsteelblue 1px solid;">
                        <div id="D6_status_dot" style="height: 20px; background-color: black;"></div>
                    </td>
                    <td width="12.5%" style="border: lightsteelblue 1px solid;">
                        <div id="DO1_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="DI2" tabindex="0" class="DI2_position" role="button">
                                        <span id="DI2_status" class="D_status_css">DI2 status</span>
                                        <!-- D1 狀態點點-->
                                        
                                    </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="D7" tabindex="0" class="D7_position" role="button">
                                        <span id="D7_status" class="D_status_css">D7 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="D8" tabindex="0" class="D8_position" role="button">
                                        <span id="D8_status" class="D_status_css">D8 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="D9" tabindex="0" class="D9_position" role="button">
                                        <span id="D9_status" class="D_status_css">D9 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="D10" tabindex="0" class="D10_position" role="button">
                                        <span id="D10_status" class="D_status_css">D10 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="D11" tabindex="0" class="D11_position" role="button">
                                        <span id="D11_status" class="D_status_css">D11 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="D12" tabindex="0" class="D12_position" role="button">
                                        <span id="D12_status" class="D_status_css">D12 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="DO2" tabindex="0" class="DO2_position" role="button">
                                        <span id="DO2_status" class="D_status_css">DO2 status</span>
                                        
                                    </div>

                                </td>
                            </tr>
                        </table>
                    </td>
                    
                </tr>
                <tr>
                    <td  width="12.5%" style="border: lightsteelblue 1px solid;">
                        <div id="DI2_status_dot" style=" height: 20px; background-color: black;"></div>
                    </td>
                    <td  width="12.5%" style="border: lightsteelblue 1px solid;">
                        <div id="D7_status_dot" style=" height: 20px; background-color: black;"></div>
                    </td>
                    <td  width="12.5%" style="border: lightsteelblue 1px solid;">
                        <div id="D8_status_dot" style=" height: 20px; background-color: black;"></div>
                    </td>
                    <td width="12.5%" style="border: lightsteelblue 1px solid;">
                        <div id="D9_status_dot" style=" height: 20px; background-color: black;"></div>
                    </td>
                    <td  width="12.5%" style="border: lightsteelblue 1px solid;">
                        <div id="D10_status_dot" style="height: 20px; background-color: black;"></div>
                    </td>
                    <td width="12.5%" style="border: lightsteelblue 1px solid;">
                        <div id="D11_status_dot" style="height: 20px; background-color: black;"></div>
                    </td>
                     <td  width="12.5%" style="border: lightsteelblue 1px solid;">
                        <div id="D12_status_dot" style="height: 20px; background-color: black;"></div>
                    </td>
                    <td width="12.5%" style="border: lightsteelblue 1px solid;">
                        <div id="DO2_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="9%" style="border: lightsteelblue 1px solid;">
                            桶槽<br>真空吸料機
                        </td>
                        <td width="9%" style="border: lightsteelblue 1px solid;">
                            入料<br>三通閥
                        </td>
                        <td width="9%" style="border: lightsteelblue 1px solid;">
                            蝴蝶閥
                        </td>
                        <td width="9%" style="border: lightsteelblue 1px solid;">
                            保溫夾層進水<br>電磁閥
                        </td>
                        <td width="9%" style="border: lightsteelblue 1px solid;">
                            桶內消毒<br>電磁閥
                        </td>
                        <td width="9%" style="border: lightsteelblue 1px solid;">
                            排水廢水<br>電磁閥
                        </td>
                        <td width="9%" style="border: lightsteelblue 1px solid;">
                            馬達
                        </td>
                        <td width="9%" style="border: lightsteelblue 1px solid;">
                            乾燥<br>真空機
                        </td>
                        <td width="9%" style="border: lightsteelblue 1px solid;">
                            加熱器<br>1
                        </td>
                        <td width="9%" style="border: lightsteelblue 1px solid;">
                            加熱器<br>2
                        </td>
                        <td width="9%" 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>
                    </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;">
                            生豆<br>溫度
                        </td>
                        <td style="border: lightsteelblue 1px solid;">
                            生豆<br>濕度
                        </td>
                        <td style="border: lightsteelblue 1px solid;">
                            生豆<br>導電度
                        </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>
                    
                    </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>                
                    </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="Dry_Tank_bean_height" type="text" class="input-text" value="5">公分<br>
                        吸放料時間
                        <input name="Dry_Tank_vacuum_time" type="text" class="input-text" value="10">秒,
                        馬達轉速
                        <input name="Dry_Tank_motor_rpm" type="text" class="input-text" value="30">rpm<br>
                        ----- 溫度權重設定 ----------------------------------------------<br>
                        [SHT11]桶內溫度×權重
                        <input name="Dry_Tank_TempWeight_SHT11" type="text" class="input-text" value="0.5">
                        +
                        [soil]生豆溫度×權重
                        <input name="Dry_Tank_TempWeight_soil" type="text" class="input-text" value="0.5">
                        <br>
                        ----- 乾燥完成條件 (輸入 0 代表不設定) ------------------------<br>
                        指定溫度
                        <input name="Dry_Tank_drying_temp" type="text" class="input-text" value="40">℃<br>
                        消毒開啟
                        <input name="Dry_Tank_Disinfect_time" class="input-text" type="text" value="10">秒
                    </td>
                </tr>
                </table>
                </div>
                
                
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
{% endblock %}