| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924 | <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>{{ title }}</title>    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">    <!-- 新 Bootstrap4 核心 CSS 文件 -->    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.1.0/css/bootstrap.min.css">    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>    <!-- popper.min.js 用于弹窗、提示、下拉菜单 -->    <script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script>    <!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->    <script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>    <!--    <script src="../static/js/sign_in.js"></script>    <link rel="stylesheet" href="../static/css/sign_in.css">    -->    <style>        /* 各桶槽狀態大小的共同 CSS */        .div_DryTank_position {            text-align: center;            font-weight: bold;            border: 0px aquamarine solid;        }        .td-clickable:hover {            /* background-color: rgb(238, 236, 236); */            background-color: lavender;            transition-duration: 0.5s;        }        /* 桶槽狀態顯示的顏色條 */        .div_DryTank_Status {            width: 140px;             height: 20px;             border-style: solid;             border-color: whitesmoke;             background-color: black;        }        .footer{            position: absolute;            bottom: 0px;            width: 100%;            background-color: #eee;            text-align: center;        }        /* 致動器狀態的圈圈 */        .actuator_status {            width: 18px;             height: 18px;             background-color:black;             border-radius: 50%;        }        /* 狀態外框的 CSS */        .table_css {            border: 0px lightsteelblue solid;             margin-right: auto;             margin-left: auto;             text-align: center;             margin-top: 5px;             width: 80%;        }    </style>    <script language="JavaScript">        // 指定 10秒 刷新網頁一次        var WebRestart        // WebRestart = setTimeout(function () { location.reload() }, 10000);        var status = '{{status}}';        $(document).ready(function(){            $("#coffee_title_pc").text("乾燥貨櫃");            $("#coffee_title_phone").text("乾燥貨櫃");            loading_D_status();        });        function loading_D_status(){            $.get('/dry_status_update', '', function (res) {                dry_tank_status = [res.D1, res.D2, res.D3, res.D4, res.D5, res.D6,                                    res.D7, res.D8, res.D9, res.D10, res.D11, res.D12 ]                for (let i=0; i<dry_tank_status.length; i++) {                    if (dry_tank_status[i] == 'D_InputtingBean') {                        $("#D"+parseInt(i+1)+"_bar").css("background-color", "MediumSeaGreen")                        $("#D"+parseInt(i+1)+"_status").text("D" + parseInt(i+1) + "  入豆中")                    } else if (dry_tank_status[i] == 'D_InputtingBean_Pause') {                        $("#D"+parseInt(i+1)+"_bar").css("background-color", "MediumSeaGreen")                        $("#D"+parseInt(i+1)+"_status").text("D" + parseInt(i+1) + "  入豆暫停")                    } else if (dry_tank_status[i] == 'D_InputtingBean_Finish') {                        $("#D"+parseInt(i+1)+"_bar").css("background-color", "MediumSeaGreen")                        $("#D"+parseInt(i+1)+"_status").text("D" + parseInt(i+1) + "  入豆完成")                    } else if (dry_tank_status[i] == 'D_Waiting') {                        $("#D"+parseInt(i+1)+"_bar").css("background-color", "lightgray")                        $("#D"+parseInt(i+1)+"_status").text("D" + parseInt(i+1) + "  空桶等待")                    } else if (dry_tank_status[i] == 'D_Cleaning') {                        $("#D"+parseInt(i+1)+"_bar").css("background-color", "plum")                        $("#D"+parseInt(i+1)+"_status").text("D" + parseInt(i+1) + "  清洗中")                    } else if (dry_tank_status[i] == 'D_Drying') {                        $("#D"+parseInt(i+1)+"_bar").css("background-color", "MediumSeaGreen")                        $("#D"+parseInt(i+1)+"_status").text("D" + parseInt(i+1) + "  乾燥中")                    } else if (dry_tank_status[i] == 'D_OutputtingBean') {                        $("#D"+parseInt(i+1)+"_bar").css("background-color", "MediumSeaGreen")                        $("#D"+parseInt(i+1)+"_status").text("D" + parseInt(i+1) + "  可出豆")                    } else if (dry_tank_status[i] == 'D_Warning') {                        $("#D"+parseInt(i+1)+"_status").text("D" + parseInt(i+1) + "  發生錯誤")                        $("#D"+parseInt(i+1)+"_status").css("color", "crimson")                        $("#D"+parseInt(i+1)+"_bar").css("background-color", "crimson")                    } else {                        console.log('pass')                    }                }                dry_input_status = [res.DI1, res.DI2]                for (let i=0; i<dry_input_status.length; i++) {                    if (dry_input_status[i] == 'DI_InputtingBean') {                        $("#DI"+parseInt(i+1)+"_bar").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)+"_bar").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)+"_bar").css("background-color", "MediumSeaGreen")                        $("#DI"+parseInt(i+1)+"_status").text("DI" + parseInt(i+1) + " 可出豆")                    } else {                        console.log('DI pass')                    }                }                dry_output_status = [res.DO1, res.DO2]                for (let i=0; i<dry_output_status.length; i++) {                    if (dry_output_status[i] == 'DO_InputtingBean') {                        $("#DO"+parseInt(i+1)+"_bar").css("background-color", "MediumSeaGreen")                        $("#DO"+parseInt(i+1)+"_status").text("DO" + parseInt(i+1) + " 入豆中")                    } else if (dry_output_status[i] == 'DO_Waiting') {                        $("#DO"+parseInt(i+1)+"_bar").css("background-color", "lightgray")                        $("#DO"+parseInt(i+1)+"_status").text("DO" + parseInt(i+1) + " 空桶等待")                    } else if (dry_output_status[i] == 'DO_OutputtingBean') {                        $("#DO"+parseInt(i+1)+"_bar").css("background-color", "MediumSeaGreen")                        $("#DO"+parseInt(i+1)+"_status").text("DO" + parseInt(i+1) + " 可出豆")                    } else {                        console.log('DO pass')                    }                }                                $("#tank_temp1_t_status").text(res.tank_temp1);            }, 'json');        }    </script></head><body>    <div id="wrapper">        <div id="coffee_header">            <!-- 匯入共同使用的 header.html 內容 -->            {% include 'header.html' %}        </div>        <div style="height: 605px;">            <table class="table_css" cellpadding="6" border="1">                <!-- 第一列 DI1 / D1~D6 / DO1 -->                <tr>                    <td class="td-clickable">                        <div id="DI1" tabindex="0" class="div_DryTank_position" role="button">                            <span id="DI1_status" class="demo_status_css">DI1 status</span>                            <div id="DI1_bar" class="div_DryTank_Status"></div>                        </div>                    </td>                    <td style="width: 10px; font-weight: 900;">                        入料                    </td>                    <td class="td-clickable">                        <div id="D1" tabindex="0" class="div_DryTank_position" role="button">                            <span id="D1_status" class="demo_status_css">D1 status</span>                            <div id="D1_bar" class="div_DryTank_Status"></div>                        </div>                    </td>                    <td class="td-clickable">                        <div id="D2" tabindex="0" class="div_DryTank_position" role="button">                            <span id="D2_status" class="demo_status_css">D2 status</span>                            <div id="D2_bar" class="div_DryTank_Status"></div>                        </div>                    </td>                    <td class="td-clickable">                        <div id="D3" tabindex="0" class="div_DryTank_position" role="button">                            <span id="D3_status" class="demo_status_css">D3 status</span>                            <div id="D3_bar" class="div_DryTank_Status"></div>                        </div>                    </td>                    <td class="td-clickable">                        <div id="D4" tabindex="0" class="div_DryTank_position" role="button">                            <span id="D4_status" class="demo_status_css">D4 status</span>                            <div id="D4_bar" class="div_DryTank_Status"></div>                        </div>                    </td>                    <td class="td-clickable">                        <div id="D5" tabindex="0" class="div_DryTank_position" role="button">                            <span id="D5_status" class="demo_status_css">D5 status</span>                            <div id="D5_bar" class="div_DryTank_Status"></div>                        </div>                    </td>                    <td class="td-clickable">                        <div id="D6" tabindex="0" class="div_DryTank_position" role="button">                            <span id="D6_status" class="demo_status_css">D6 status</span>                            <div id="D6_bar" class="div_DryTank_Status"></div>                        </div>                    </td>                    <td style="width: 10px; font-weight: 900;">                        出料                    </td>                    <td class="td-clickable">                        <div id="DO1" tabindex="0" class="div_DryTank_position" role="button">                            <span id="DO1_status" class="demo_status_css">DO1 status</span>                            <div id="DO1_bar" class="div_DryTank_Status"></div>                        </div>                    </td>                </tr>                <!-- 第二列 貨櫃圖片 -->                <tr>                    <td colspan="10" class="td-clickable">                        <a href="/dry_auto" target="_blank">                            <img src="../static/img/web_dry_container.png" style="margin: auto; width: 1100px;">                        </a>                    </td>                </tr>                <!-- 第三列 DI2 / D7~D12 / DO2 -->                <tr>                    <td class="td-clickable">                        <div id="DI2" tabindex="0" class="div_DryTank_position" role="button">                            <span id="DI2_status" class="demo_status_css">DI2 status</span>                            <div id="DI2_bar" class="div_DryTank_Status"></div>                        </div>                    </td>                    <td style="width: 10px; font-weight: 900;">                        入料                    </td>                    <td class="td-clickable">                        <div id="D7" tabindex="0" class="div_DryTank_position" role="button">                            <span id="D7_status" class="demo_status_css">D7 status</span>                            <div id="D7_bar" class="div_DryTank_Status"></div>                        </div>                    </td>                    <td class="td-clickable">                        <div id="D8" tabindex="0" class="div_DryTank_position" role="button">                            <span id="D8_status" class="demo_status_css">D8 status</span>                            <div id="D8_bar" class="div_DryTank_Status"></div>                        </div>                    </td>                    <td class="td-clickable">                        <div id="D9" tabindex="0" class="div_DryTank_position" role="button">                            <span id="D9_status" class="demo_status_css">D9 status</span>                            <div id="D9_bar" class="div_DryTank_Status"></div>                        </div>                    </td>                    <td class="td-clickable">                        <div id="D10" tabindex="0" class="div_DryTank_position" role="button">                            <span id="D10_status" class="demo_status_css">D10 status</span>                            <div id="D10_bar" class="div_DryTank_Status"></div>                        </div>                    </td>                    <td class="td-clickable">                        <div id="D11" tabindex="0" class="div_DryTank_position" role="button">                            <span id="D11_status" class="demo_status_css">D11 status</span>                            <div id="D11_bar" class="div_DryTank_Status"></div>                        </div>                    </td>                    <td class="td-clickable">                        <div id="D12" tabindex="0" class="div_DryTank_position" role="button">                            <span id="D12_status" class="demo_status_css">D12 status</span>                            <div id="D12_bar" class="div_DryTank_Status"></div>                        </div>                    </td>                    <td style="width: 10px; font-weight: 900;">                        出料                    </td>                    <td class="td-clickable">                        <div id="DO2" tabindex="0" class="div_DryTank_position" role="button">                            <span id="DO2_status" class="demo_status_css">DO2 status</span>                            <div id="DO2_bar" class="div_DryTank_Status"></div>                        </div>                    </td>                </tr>            </table>        </div>        <!-- 乾燥槽互動視窗(模态框) -->        <div class="modal fade" id="D_Modal">            <div class="modal-dialog modal-dialog-centered" style="width: 400px;">                <div class="modal-content">                    <!-- 互動視窗 標題 -->                    <div class="modal-header">                        <h4 id="Modal_title" class="modal-title">乾燥槽 D1 狀態</h4>                        <button type="button" class="close" data-dismiss="modal">×</button>                    </div>                    <!-- 互動視窗 內容 -->                    <div class="modal-body">                        <table style="border:0px gray solid; width: 100%;" cellpadding="3">                            <!--<table style="border:0px gray solid;-->                            <tr>                                <td><strong><a id="actuator_link" href="">致動器狀態</a></strong></td>                                <td><strong><a id="sensor_link" href="">感測器狀態</a></strong></td>                            </tr>                            <tr>                                <td style="vertical-align:text-top;">                                    <table style="border:0px gray solid;" cellpadding="3">                                        <!--font-size:12px; -->                                        <tr>                                            <td>                                                <div id="tank_vacuum_status" class="actuator_status">                                                </div>                                            </td>                                            <td>                                                <a id="Vacuum" href="">真空吸料機</a>                                                <!--<span id="tank_vacuum_t_status"></span>-->                                            </td>                                        </tr>                                        <tr>                                            <td>                                                <div id="tank_threewayvalve_input_status" class="actuator_status">                                                </div>                                            </td>                                            <td>                                                <a id="ThreeWayValveInput" href="">入料三通閥</a>                                                <!--<span id="tank_threewayvalve_t_status"></span>-->                                            </td>                                        </tr>                                        <tr>                                            <td>                                                <div id="tank_threewayvalve_bean_status" class="actuator_status">                                                </div>                                            </td>                                            <td>                                                <a id="ThreeWayValveBean" href="">測豆三通閥</a>                                                <!--<span id="tank_threewayvalve_t_status"></span>-->                                            </td>                                        </tr>                                        <tr>                                            <td>                                                <div id="tank_solenoid_disinfect_status" class="actuator_status">                                                </div>                                            </td>                                            <td>                                                <a id="SolenoidDisinfect" href="">消毒電磁閥</a>                                                <!--<span id="tank_solenoid_disinfect_t_status"></span>-->                                            </td>                                        </tr>                                        <tr>                                            <td>                                                <div id="tank_motor_status" class="actuator_status">                                                </div>                                            </td>                                            <td>                                                <a id="Motor" href="">馬達</a>                                                <!--<span id="tank_motor_t_status"></span>-->                                            </td>                                        </tr>                                        <tr>                                            <td>                                                <div id="tank_blower_status" class="actuator_status">                                                </div>                                            </td>                                            <td>                                                <a id="Blower" href="">鼓風機</a>                                                <!--<span id="tank_blower_t_status"></span>-->                                            </td>                                        </tr>                                        <tr>                                            <td>                                                <div id="tank_heater1_status" class="actuator_status">                                                </div>                                            </td>                                            <td>                                                <a id="Heater1" href="">加熱器 1</a>                                                <!--<span id="tank_heater1_t_status"></span>-->                                            </td>                                        </tr>                                        <tr>                                            <td>                                                <div id="tank_heater2_status" class="actuator_status">                                                </div>                                            </td>                                            <td>                                                <a id="Heater2" href="">加熱器 2</a>                                                <!--<span id="tank_heater2_t_status"></span>-->                                            </td>                                        </tr>                                        <tr>                                            <td>                                                <div id="tank_temp1_enable_status" class="actuator_status">                                                </div>                                            </td>                                            <td>                                                <a id="TempEnable" href="">溫控開關</a>                                                <!--<span id="tank_temp1_enable_t_status"></span>-->                                            </td>                                        </tr>                                        <tr>                                            <td>                                                <div id="tank_temp1_status" class="actuator_status">                                                </div>                                            </td>                                            <td>                                                <a id="Temp" href="">設定溫度</a>                                                <!--<span id="tank_temp1_t_status"></span>-->                                            </td>                                        </tr>                                        <tr>                                            <td>                                                <div id="tank_solenoid_water_status" class="actuator_status">                                                </div>                                            </td>                                            <td>                                                <a id="SolenoidWater" href="">排水電磁閥</a>                                                <!--<span id="tank_solenoid_water_t_status"></span>-->                                            </td>                                        </tr>                                        <tr>                                            <td>                                                <div id="tank_diskvalve_status" class="actuator_status">                                                </div>                                            </td>                                            <td>                                                <a id="DiskValve" href="">蝴蝶閥</a>                                                <!--<span id="tank_diskvalve_t_status"></span>-->                                            </td>                                        </tr>                                    </table>                                </td>                                <td style="vertical-align:text-top;">                                    <table style="border:0px gray solid;" cellpadding="3">                                        <!--font-size:12px; -->                                        <tr>                                            <td>                                                <a id="UltraSonic" href="">咖啡生豆高度</a>                                            </td>                                            <td>                                                <span id="UltraSonic_t_status"></span>                                            </td>                                        </tr>                                        <tr>                                            <td>                                                <a id="SHT11_Temp" href="">乾燥槽溫度</a>                                            </td>                                            <td>                                                <span id="SHT11_Temp_t_status"></span>                                            </td>                                        </tr>                                        <tr>                                            <td>                                                <a id="SHT11_Humidity" href="">乾燥槽濕度</a>                                            </td>                                            <td>                                                <span id="SHT11_Humidity_t_status"></span>                                            </td>                                        </tr>                                        <tr>                                            <td>                                                <a id="soil_Temp" href="">咖啡生豆溫度</a>                                            </td>                                            <td>                                                <span id="soil_Temp_t_status"></span>                                            </td>                                        </tr>                                        <tr>                                            <td>                                                <a id="soil_Humidity" href="">咖啡生豆濕度</a>                                            </td>                                            <td>                                                <span id="soil_Humidity_t_status"></span>                                            </td>                                        </tr>                                        <tr>                                            <td>                                                <a id="soil_EC" href="">咖啡生豆 EC</a>                                            </td>                                            <td>                                                <span id="soil_EC_t_status"></span>                                            </td>                                        </tr>                                        <tr>                                            <td>                                                <a id="PA" href="">桶內壓力</a>                                            </td>                                            <td>                                                <span id="PA_t_status"></span>                                            </td>                                        </tr>                                        <tr>                                            <td>                                                <a id="camera_dry_tid" href=""><strong>攝影機畫面</strong></a>                                            </td>                                        </tr>                                    </table>                                </td>                            </tr>                        </table>                    </div>                </div>            </div>        </div>        <!-- 乾燥槽入料儲豆槽互動視窗(模态框) -->        <div class="modal fade" id="DI_Modal">            <div class="modal-dialog modal-dialog-centered" style="width: 400px;">                <div class="modal-content">                    <!-- 互動視窗 標題 -->                    <div class="modal-header">                        <h4 id="Modal_title_input" class="modal-title">乾燥入料儲豆槽 DI1 狀態</h4>                        <button type="button" class="close" data-dismiss="modal">×</button>                    </div>                    <!-- 互動視窗 內容 -->                    <div class="modal-body">                        <table style="border:0px gray solid; width: 100%;" cellpadding="3">                            <!--<table style="border:0px gray solid;-->                            <tr>                                <td><strong><a id="actuator_link_input" href="">致動器狀態</a></strong></td>                                <td><strong><a id="sensor_link_input" href="">感測器狀態</a></strong></td>                            </tr>                            <tr>                                <td style="vertical-align:text-top;">                                    <table style="border:0px gray solid;" cellpadding="3">                                        <!--font-size:12px; -->                                        <tr>                                            <td>                                                <div id="input_vacuum_status" class="actuator_status">                                                </div>                                            </td>                                            <td>                                                <a id="Vacuum_input" href="">真空吸料機</a>                                                <!--<span id="tank_vacuum_t_status"></span>-->                                            </td>                                        </tr>                                    </table>                                </td>                                <td style="vertical-align:text-top;">                                    <table style="border:0px gray solid;" cellpadding="3">                                        <!--font-size:12px; -->                                        <tr>                                            <td>                                                <a id="DI_UltraSonic" href="">咖啡生豆高度</a>                                            </td>                                            <td>                                                <span id="DI_UltraSonic_t_status"></span>                                            </td>                                        </tr>                                        <tr>                                            <td>                                                <a id="DI_camera_dry_tid" href=""><strong>攝影機畫面</strong></a>                                            </td>                                        </tr>                                    </table>                                </td>                            </tr>                        </table>                    </div>                </div>            </div>        </div>            <!-- 乾燥槽出料儲豆槽互動視窗(模态框) -->            <div class="modal fade" id="DO_Modal">                <div class="modal-dialog modal-dialog-centered" style="width: 400px;">                    <div class="modal-content">                                <!-- 互動視窗 標題 -->                        <div class="modal-header">                            <h4 id="Modal_title_output" class="modal-title">乾燥入料儲豆槽 DI1 狀態</h4>                            <button type="button" class="close" data-dismiss="modal">×</button>                        </div>                                <!-- 互動視窗 內容 -->                        <div class="modal-body">                            <table style="border:0px gray solid; width: 100%;" cellpadding="3">                                <!--<table style="border:0px gray solid;-->                                <tr>                                    <td><strong><a id="actuator_link_output" href="">致動器狀態</a></strong></td>                                    <td><strong><a id="sensor_link_output" href="">感測器狀態</a></strong></td>                                </tr>                                <tr>                                    <td style="vertical-align:text-top;">                                        <table style="border:0px gray solid;" cellpadding="3">                                            <!--font-size:12px; -->                                            <tr>                                                <td>                                                    <div id="output_vacuum_status"                                                        style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">                                                    </div>                                                </td>                                                <td>                                                    <a id="Vacuum_output" href="">真空吸料機</a>                                                    <!--<span id="tank_vacuum_t_status"></span>-->                                                </td>                                            </tr>                                        </table>                                    </td>                                    <td style="vertical-align:text-top;">                                        <table style="border:0px gray solid;" cellpadding="3">                                            <!--font-size:12px; -->                                            <tr>                                                <td>                                                    <a id="DO_UltraSonic" href="/chart_DO/UltraSonic/1">咖啡生豆高度</a>                                                </td>                                                <td>                                                    <span id="DO_UltraSonic_t_status"></span>                                                </td>                                            </tr>                                            <tr>                                                <td>                                                    <a id="DO_camera_dry_tid" href=""><strong>攝影機畫面</strong></a>                                                </td>                                            </tr>                                        </table>                                    </td>                                </tr>                            </table>                        </div>                    </div>                </div>            </div>        <script>            function update_data_D(dtid) {                console.log('dry_tank_id:' + dtid)                // dtid = dry_tank_id                $.get('/loading/D' + dtid, '', function (res) {                    if (res.tank_vacuum == 0) {                        $("#tank_vacuum_status").css("background-color", "#C0C0C0")                    } else if (res.tank_vacuum == 1) {                        $("#tank_vacuum_status").css("background-color", "forestgreen")                    } else { $("#tank_vacuum_status").css("background-color", "crimson") }                    if (res.tank_threewayvalve_input == 0) {                        $("#tank_threewayvalve_input_status").css("background-color", "#C0C0C0")                    } else if (res.tank_threewayvalve_input == 1) {                        $("#tank_threewayvalve_input_status").css("background-color", "forestgreen")                    } else { $("#tank_threewayvalve_input_status").css("background-color", "crimson") }                    if (res.tank_threewayvalve_bean == 0) {                        $("#tank_threewayvalve_bean_status").css("background-color", "#C0C0C0")                    } else if (res.tank_threewayvalve_bean == 1) {                        $("#tank_threewayvalve_bean_status").css("background-color", "forestgreen")                    } else { $("#tank_threewayvalve_bean_status").css("background-color", "crimson") }                    if (res.tank_diskvalve == 0) {                        $("#tank_diskvalve_status").css("background-color", "#C0C0C0")                    } else if (res.tank_diskvalve == 1) {                        $("#tank_diskvalve_status").css("background-color", "forestgreen")                    } else { $("#tank_diskvalve_status").css("background-color", "crimson") }                    if (res.tank_solenoid_disinfect == 0) {                        $("#tank_solenoid_disinfect_status").css("background-color", "#C0C0C0")                    } else if (res.tank_solenoid_disinfect == 1) {                        $("#tank_solenoid_disinfect_status").css("background-color", "forestgreen")                    } else { $("#tank_solenoid_disinfect_status").css("background-color", "crimson") }                    if (res.tank_solenoid_water == 0) {                        $("#tank_solenoid_water_status").css("background-color", "#C0C0C0")                    } else if (res.tank_solenoid_water == 1) {                        $("#tank_solenoid_water_status").css("background-color", "forestgreen")                    } else { $("#tank_solenoid_water_status").css("background-color", "crimson") }                    if (res.tank_motor == 0) {                        $("#tank_motor_status").css("background-color", "#C0C0C0")                    } else if (res.tank_motor > 0 || res.tank_motor < 0) {                        $("#tank_motor_status").css("background-color", "forestgreen")                    } else { $("#tank_motor_status").css("background-color", "crimson") }                    if (res.tank_blower == 0) {                        $("#tank_blower_status").css("background-color", "#C0C0C0")                    } else if (res.tank_blower == 1) {                        $("#tank_blower_status").css("background-color", "forestgreen")                    } else { $("#tank_blower_status").css("background-color", "crimson") }                    if (res.tank_heater1 == 0) {                        $("#tank_heater1_status").css("background-color", "#C0C0C0")                    } else if (res.tank_heater1 == 1) {                        $("#tank_heater1_status").css("background-color", "forestgreen")                    } else { $("#tank_heater1_status").css("background-color", "crimson") }                    if (res.tank_heater2 == 0) {                        $("#tank_heater2_status").css("background-color", "#C0C0C0")                    } else if (res.tank_heater2 == 1) {                        $("#tank_heater2_status").css("background-color", "forestgreen")                    } else { $("#tank_heater2_status").css("background-color", "crimson") }                    if (res.tank_temp1_enable == 0) {                        $("#tank_temp1_enable_status").css("background-color", "#C0C0C0")                    } else if (res.tank_temp1_enable == 1) {                        $("#tank_temp1_enable_status").css("background-color", "forestgreen")                    } else { $("#tank_temp1_enable_status").css("background-color", "crimson") }                    if (res.tank_temp1 == 0) {                        $("#tank_temp1_status").css("background-color", "#C0C0C0")                    } else if (res.tank_temp1 > 0) {                        $("#tank_temp1_status").css("background-color", "forestgreen")                    } else { $("#tank_temp1_status").css("background-color", "crimson") }                    $("#tank_vacuum_t_status").text(res.tank_vacuum);                    $("#tank_threewayvalve_t_status").text(res.tank_threewayvalve);                    $("#tank_diskvalve_t_status").text(res.tank_diskvalve);                    $("#tank_solenoid_disinfect_t_status").text(res.tank_solenoid_disinfect);                    $("#tank_solenoid_water_t_status").text(res.tank_solenoid_water);                    $("#tank_motor_t_status").text(res.tank_motor);                    $("#tank_blower_t_status").text(res.tank_blower);                    $("#tank_heater1_t_status").text(res.tank_heater1);                    $("#tank_heater2_t_status").text(res.tank_heater2);                    $("#tank_temp1_enable_t_status").text(res.tank_temp1_enable);                    $("#tank_temp1_t_status").text(res.tank_temp1);                    $("#UltraSonic_t_status").text(res.UltraSonic);                    $("#SHT11_Temp_t_status").text(res.SHT11_Temp);                    $("#SHT11_Humidity_t_status").text(res.SHT11_Humidity);                    $("#soil_Temp_t_status").text(res.soil_Temp);                    $("#soil_Humidity_t_status").text(res.soil_Humidity);                    $("#soil_EC_t_status").text(res.soil_EC);                    $("#PA_t_status").text(res.PA);                }, 'json');                $('#Modal_title').text("乾燥槽 D" + dtid + " 狀態")                if (status == 2) {                    $('#actuator_link').attr("title", "該使用者無修改權限")                    $('#sensor_link').attr("title", "該使用者無修改權限")                    $('#Vacuum').attr("title", "該使用者無修改權限")                    $('#ThreeWayValveInput').attr("title", "該使用者無修改權限")                    $('#ThreeWayValveBean').attr("title", "該使用者無修改權限")                    $('#SolenoidDisinfect').attr("title", "該使用者無修改權限")                    $('#Motor').attr("title", "該使用者無修改權限")                    $('#Blower').attr("title", "該使用者無修改權限")                    $('#Heater1').attr("title", "該使用者無修改權限")                    $('#Heater2').attr("title", "該使用者無修改權限")                    $('#TempEnable').attr("title", "該使用者無修改權限")                    $('#Temp').attr("title", "該使用者無修改權限")                    $('#SolenoidWater').attr("title", "該使用者無修改權限")                    $('#DiskValve').attr("title", "該使用者無修改權限")                } else if ( (status == 0) || (status == 1) ) {                    $('#actuator_link').attr("href", "/dry_container_tank/" + dtid)                    $('#sensor_link').attr("href", "/dry_container_tank/" + dtid)                    $('#Vacuum').attr("href", "/ctrl_D_Vacuum/" + dtid)                    $('#ThreeWayValveInput').attr("href", "/ctrl_D_ThreeWayValveInput/" + dtid)                    $('#ThreeWayValveBean').attr("href", "/ctrl_D_ThreeWayValveBean/" + dtid)                    $('#SolenoidDisinfect').attr("href", "/ctrl_D_SolenoidDisinfect/" + dtid)                    $('#Motor').attr("href", "/ctrl_D_Motor/" + dtid)                    $('#Blower').attr("href", "/ctrl_D_Blower/" + dtid)                    $('#Heater1').attr("href", "/ctrl_D_Heater1/" + dtid)                    $('#Heater2').attr("href", "/ctrl_D_Heater2/" + dtid)                    $('#TempEnable').attr("href", "/ctrl_D_TempEnable/" + dtid)                    $('#Temp').attr("href", "/ctrl_D_Temp/" + dtid)                    $('#SolenoidWater').attr("href", "/ctrl_D_SolenoidWater/" + dtid)                    $('#DiskValve').attr("href", "/ctrl_D_DiskValve/" + dtid)                }                                $('#SHT11_Temp').attr("href", "/chart_D/SHT11_Temp/" + dtid)                $('#SHT11_Humidity').attr("href", "/chart_D/SHT11_Humidity/" + dtid)                $('#UltraSonic').attr("href", "/chart_D/UltraSonic/" + dtid)                $('#PA').attr("href", "/chart_D/PA/" + dtid)                $('#soil_Temp').attr("href", "/chart_D/soil_Temp/" + dtid)                $('#soil_Humidity').attr("href", "/chart_D/soil_Humidity/" + dtid)                $('#soil_EC').attr("href", "/chart_D/soil_EC/" + dtid)                $('#camera_dry_tid').attr("href", "/camera_D" + dtid)                                setTimeout(function(){ $('#D_Modal').modal('show'); }, 300)                            }            function update_data_DI(ditid){                console.log('dry_input_tank_id:' + ditid)                // ditid = dry_input_tank_id                $.get('/loading/DI' + ditid, '', function (res) {                    if (res.input_vacuum == 0) {                        $("#input_vacuum_status").css("background-color", "#C0C0C0")                    } else if (res.input_vacuum == 1) {                        $("#input_vacuum_status").css("background-color", "forestgreen")                    } else { $("#input_vacuum_status").css("background-color", "crimson") }                    $("#DI_UltraSonic_t_status").text(res.input_UltraSonic);                }, 'json');                                $('#Modal_title_input').text("乾燥入料儲豆槽 DI" + ditid + " 狀態")                if (status == 2) {                    $('#actuator_link').attr("title", "該使用者無修改權限")                    $('#sensor_link').attr("title", "該使用者無修改權限")                    $('#Vacuum_input').attr("title", "該使用者無修改權限")                } else if ( (status == 0) || (status == 1) ) {                    $('#actuator_link_input').attr("href", "/dry_container_input/" + ditid)                    $('#sensor_link_input').attr("href", "/dry_container_input/" + ditid)                    $('#Vacuum_input').attr("href", "/ctrl_DI_Vacuum/" + ditid)                }                $('#DI_UltraSonic').attr("href", "/chart_DI/UltraSonic/" + ditid)                $('#DI_camera_dry_tid').attr("href", "/camera_DI" + ditid)                $('#DI_Modal').modal('show');            };            function update_data_DO(dotid){                console.log('dry_output_tank_id:' + dotid)                // dotid = dry_output_tank_id                $.get('/loading/DO' + dotid, '', function (res) {                    if (res.output_vacuum == 0) {                        $("#output_vacuum_status").css("background-color", "#C0C0C0")                    } else if (res.output_vacuum == 1) {                        $("#output_vacuum_status").css("background-color", "forestgreen")                    } else { $("#output_vacuum_status").css("background-color", "crimson") }                    $("#DO_UltraSonic_t_status").text(res.output_UltraSonic);                }, 'json');                                $('#Modal_title_output').text("乾燥出料儲豆槽 DO" + dotid + " 狀態")                if (status == 2) {                    $('#actuator_link').attr("title", "該使用者無修改權限")                    $('#sensor_link').attr("title", "該使用者無修改權限")                    $('#Vacuum_output').attr("title", "該使用者無修改權限")                } else if ( (status == 0) || (status == 1) ) {                    $('#actuator_link_output').attr("href", "/dry_container_output/" + dotid)                    $('#sensor_link_output').attr("href", "/dry_container_output/" + dotid)                    $('#Vacuum_output').attr("href", "/ctrl_DO_Vacuum/" + dotid)                }                $('#DO_UltraSonic').attr("href", "/chart_DO/UltraSonic/" + dotid)                $('#DO_camera_dry_tid').attr("href", "/camera_DO" + dotid)                $('#DO_Modal').modal('show');            };            var button_D1 = document.getElementById('D1');            button_D1.addEventListener('click', function () { update_data_D("1") });            var button_D2 = document.getElementById('D2');            button_D2.addEventListener('click', function () { update_data_D("2") });            var button_D3 = document.getElementById('D3');            button_D3.addEventListener('click', function () { update_data_D("3") });            var button_D4 = document.getElementById('D4');            button_D4.addEventListener('click', function () { update_data_D("4") });            var button_D5 = document.getElementById('D5');            button_D5.addEventListener('click', function () { update_data_D("5") });            var button_D6 = document.getElementById('D6');            button_D6.addEventListener('click', function () { update_data_D("6") });            var button_D7 = document.getElementById('D7');            button_D7.addEventListener('click', function () { update_data_D("7") });            var button_D8 = document.getElementById('D8');            button_D8.addEventListener('click', function () { update_data_D("8") });            var button_D9 = document.getElementById('D9');            button_D9.addEventListener('click', function () { update_data_D("9") });            var button_D10 = document.getElementById('D10');            button_D10.addEventListener('click', function () { update_data_D("10") });            var button_D11 = document.getElementById('D11');            button_D11.addEventListener('click', function () { update_data_D("11") });            var button_D12 = document.getElementById('D12');            button_D12.addEventListener('click', function () { update_data_D("12") });            var button_DI1 = document.getElementById('DI1');            button_DI1.addEventListener('click', function () { update_data_DI("1") });            var button_DI2 = document.getElementById('DI2');            button_DI2.addEventListener('click', function () { update_data_DI("2") });            var button_DO1 = document.getElementById('DO1');            button_DO1.addEventListener('click', function () { update_data_DO("1") });            var button_DO2 = document.getElementById('DO2');            button_DO2.addEventListener('click', function () { update_data_DO("2") });        </script><!--        <footer class="footer">            <div style="text-align: center; margin-top: 10px; font-size: 13px; margin-bottom: 10px;">                Copyright © 2021 Gold-in Tech. All Rights Reserved. 金子進科技股份有限公司 版權所有                <a href="mailto:service.gitc@gmail.com" target="_blank">service.gitc@gmail.com</a>            </div>        </footer>-->        <div id="coffee_footer">            <!-- 匯入共同使用的 footer.html 內容 -->            {% include 'footer.html' %}        </div>    </div></body></html>
 |