123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585 |
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Smart Coffee - dry</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>
- .D1_position {
- position: absolute;
- top: 135px;
- left: 210px;
- width: 175px;
- height: 230px;
- border-style: solid;
- border-color: aqua;
- }
- .D2_position {
- position: absolute;
- top: 135px;
- left: 400px;
- width: 175px;
- height: 230px;
- border-style: solid;
- border-color: aqua;
- }
- .D3_position {
- position: absolute;
- top: 135px;
- left: 590px;
- width: 170px;
- height: 230px;
- border-style: solid;
- border-color: aqua;
- }
- .D4_position {
- position: absolute;
- top: 135px;
- left: 785px;
- width: 165px;
- height: 230px;
- border-style: solid;
- border-color: aqua;
- }
- .D5_position {
- position: absolute;
- top: 135px;
- left: 965px;
- width: 165px;
- height: 230px;
- border-style: solid;
- border-color: aqua;
- }
- .D6_position {
- position: absolute;
- top: 135px;
- left: 1155px;
- width: 165px;
- height: 230px;
- border-style: solid;
- border-color: aqua;
- }
- </style>
- <script language="JavaScript">
- // 指定 10秒 刷新網頁一次
- var WebRestart
- // WebRestart = setTimeout(function () { location.reload() }, 10000);
- </script>
- <script>
- $('#D2').click(
- function () {
- $.get('/loading',
- '',
- function (res) {
- $("#SHT11_Temp_status").text(res.SHT11_Temp);
- },
- 'json'
- );
- }
- );
- function Peeling() {
- $.get('/loading', '', function (res) {
- //console.log(res.peeling);
- $("#SHT11_Temp_status").text(res.SHT11_Temp);
- }, 'json');
- };
- </script>
- </head>
- <body>
- <!--
- background-color:rgb(0, 238, 255);
- -->
- <div style="text-align: center; margin-top: 30px;font-size: 24px;">
- Smart Coffee
- </div>
- <div>
- <!-- 底圖 乾燥貨櫃 12 個乾燥桶槽 -->
- <center><img src="../static/img/web_dry_container.png" width="1500x" style="margin: auto;"></center>
- <!-- 乾燥槽 D1 START-->
- <div id="D1" tabindex="0" class="D1_position" role="button">
- D1
- status
- <!-- D1 狀態點點-->
- <div id="D1_status"
- style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>
- </div>
- <!-- 乾燥槽 D1 END-->
- <!-- 乾燥槽 D2 -->
- <div id="D2" tabindex="0" class="D2_position" role="button">
- D2
- status
- <div id="D2_status"
- style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>
- </div>
- <!-- 乾燥槽 D3 -->
- <div id="D3" tabindex="0" class="D3_position" role="button">
- D3
- status
- <div id="D3_status"
- style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>
- </div>
- <!-- 乾燥槽 D4 -->
- <div id="D4" tabindex="0" class="D4_position" role="button">
- D4
- status
- <div id="D4_status"
- style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>
- </div>
- <!-- 乾燥槽 D5 -->
- <div id="D5" tabindex="0" class="D5_position" role="button">
- D5
- status
- <div id="D5_status"
- style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>
- </div>
- <!-- 乾燥槽 D6 -->
- <div id="D6" tabindex="0" class="D6_position" role="button">
- D6
- status
- <div id="D6_status"
- style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>
- </div>
- </div>
- <!-- 模态框 -->
- <div class="modal fade" id="D1_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 href="/dry_container/1">制動器狀態</a></strong></td>
- <td><strong><a href="/dry_container/1">感測器狀態</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"
- style="width: 18px; height: 18px; background-color:crimson; border-radius: 50%;">
- </div>
- </td>
- <td>
- 真空吸料機
- <span id="tank_vacuum_t_status"></span>
- </td>
- </tr>
- <tr>
- <td>
- {% if tank_3wayvalve=='ON' %}
- <div id="D1_threewwayvalve_status"
- style="width: 18px; height: 18px; background-color: forestgreen; border-radius: 50%;">
- </div>
- {% elif tank_3wayvalve=='OFF' %}
- <div id="D1_threewwayvalve_status"
- style="width: 18px; height: 18px; background-color: #C0C0C0; border-radius: 50%;">
- </div>
- {% else %}
- <div id="D1_threewwayvalve_status"
- style="width: 18px; height: 18px; background-color: crimson; border-radius: 50%;">
- </div>
- {% endif %}
- </td>
- <td>
- 三通閥
- <span id="tank_3wayvalve_t_status"></span>
- </td>
- </tr>
- <tr>
- <td>
- {% if tank_solenoid_disinfect=='ON' %}
- <div id="D1_solenoid_disinfect_status"
- style="width: 18px; height: 18px; background-color: forestgreen; border-radius: 50%;">
- </div>
- {% elif tank_solenoid_disinfect=='OFF' %}
- <div id="D1_solenoid_disinfect_status"
- style="width: 18px; height: 18px; background-color: #C0C0C0; border-radius: 50%;">
- </div>
- {% else %}
- <div id="D1_solenoid_disinfect_status"
- style="width: 18px; height: 18px; background-color: crimson; border-radius: 50%;">
- </div>
- {% endif %}
- </td>
- <td>
- 消毒電磁閥
- <span id="tank_solenoid_disinfect_t_status"></span>
- </td>
- </tr>
- <tr>
- <td>
- {% if (tank_motor>0) or (0>tank_motor) %}
- <div id="D1_motor_status"
- style="width: 18px; height: 18px; background-color: forestgreen; border-radius: 50%;">
- </div>
- {% elif tank_motor==0 %}
- <div id="D1_motor_status"
- style="width: 18px; height: 18px; background-color: #C0C0C0; border-radius: 50%;">
- </div>
- {% else %}
- <div id="D1_motor_status"
- style="width: 18px; height: 18px; background-color: crimson; border-radius: 50%;">
- </div>
- {% endif %}
- </td>
- <td>
- 馬達
- <span id="tank_motor_t_status"></span>
- </td>
- </tr>
- <tr>
- <td>
- {% if tank_blower=='ON' %}
- <div id="D1_blower_status"
- style="width: 18px; height: 18px; background-color: forestgreen; border-radius: 50%;">
- </div>
- {% elif tank_blower=='OFF' %}
- <div id="D1_blower_status"
- style="width: 18px; height: 18px; background-color: #C0C0C0; border-radius: 50%;">
- </div>
- {% else %}
- <div id="D1_blower_status"
- style="width: 18px; height: 18px; background-color: crimson; border-radius: 50%;">
- </div>
- {% endif %}
- </td>
- <td>
- 鼓風機
- <span id="tank_blower_t_status"></span>
- </td>
- </tr>
- <tr>
- <td>
- {% if tank_heater1=='ON' %}
- <div id="D1_heater1_status"
- style="width: 18px; height: 18px; background-color: forestgreen; border-radius: 50%;">
- </div>
- {% elif tank_heater1=='OFF' %}
- <div id="D1_heater1_status"
- style="width: 18px; height: 18px; background-color: #C0C0C0; border-radius: 50%;">
- </div>
- {% else %}
- <div id="D1_heater1_status"
- style="width: 18px; height: 18px; background-color: crimson; border-radius: 50%;">
- </div>
- {% endif %}
- </td>
- <td>
- 加熱器 1
- <span id="tank_heater1_t_status"></span>
- </td>
- </tr>
- <tr>
- <td>
- {% if tank_heater2=='ON' %}
- <div id="D1_heater2_status"
- style="width: 18px; height: 18px; background-color: forestgreen; border-radius: 50%;">
- </div>
- {% elif tank_heater2=='OFF' %}
- <div id="D1_heater2_status"
- style="width: 18px; height: 18px; background-color: #C0C0C0; border-radius: 50%;">
- </div>
- {% else %}
- <div id="D1_heater2_status"
- style="width: 18px; height: 18px; background-color: crimson; border-radius: 50%;">
- </div>
- {% endif %}
- </td>
- <td>
- 加熱器 2
- <span id="tank_heater2_t_status"></span>
- </td>
- </tr>
- <tr>
- <td>
- {% if tank_temp1_enable=='ON' %}
- <div id="D1_temp_enable_status"
- style="width: 18px; height: 18px; background-color: forestgreen; border-radius: 50%;">
- </div>
- {% elif tank_temp1_enable=='OFF' %}
- <div id="D1_temp_enable_status"
- style="width: 18px; height: 18px; background-color: #C0C0C0; border-radius: 50%;">
- </div>
- {% else %}
- <div id="D1_temp_enable_status"
- style="width: 18px; height: 18px; background-color: crimson; border-radius: 50%;">
- </div>
- {% endif %}
- </td>
- <td>
- 溫控開關
- <span id="tank_temp1_enable_t_status"></span>
- </td>
- </tr>
- <tr>
- <td>
- {% if tank_temp1==0 %}
- <div id="D1_temp_status"
- style="width: 18px; height: 18px; background-color: #C0C0C0; border-radius: 50%;">
- </div>
- {% elif tank_temp1>0 %}
- <div id="D1_temp_status"
- style="width: 18px; height: 18px; background-color: forestgreen; border-radius: 50%;">
- </div>
- {% else %}
- <div id="D1_temp_status"
- style="width: 18px; height: 18px; background-color: crimson; border-radius: 50%;">
- </div>
- {% endif %}
- </td>
- <td>
- 溫度設定
- <span id="tank_temp1_t_status"></span>
- </td>
- </tr>
- <tr>
- <td>
- {% if tank_solenoid_water=='ON' %}
- <div id="D1_solenoid_water_status"
- style="width: 18px; height: 18px; background-color: forestgreen; border-radius: 50%;">
- </div>
- {% elif tank_solenoid_water=='OFF' %}
- <div id="D1_solenoid_water_status"
- style="width: 18px; height: 18px; background-color: #C0C0C0; border-radius: 50%;">
- </div>
- {% else %}
- <div id="D1_solenoid_water_status"
- style="width: 18px; height: 18px; background-color: crimson; border-radius: 50%;">
- </div>
- {% endif %}
- </td>
- <td>
- 排水電磁閥
- <span id="tank_solenoid_water_t_status"></span>
- </td>
- </tr>
- <tr>
- <td>
- {% if tank_diskvalve=='ON' %}
- <div id="D1_diskvalve_status"
- style="width: 18px; height: 18px; background-color: forestgreen; border-radius: 50%;">
- </div>
- {% elif tank_diskvalve=='OFF' %}
- <div id="D1_diskvalve_status"
- style="width: 18px; height: 18px; background-color: #C0C0C0; border-radius: 50%;">
- </div>
- {% else %}
- <div id="D1_diskvalve_status"
- style="width: 18px; height: 18px; background-color: crimson; border-radius: 50%;">
- </div>
- {% endif %}
- </td>
- <td>
- 蝴蝶閥
- <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>
- 咖啡生豆高度
- </td>
- <td>
- {{tank_UltraSonic.UltraSonic}}
- <span id="UltraSonic_status"></span>
- </td>
- </tr>
- <tr>
- <td>
- <a href="/chart/SHT11_Temp">乾燥槽溫度</a>
- </td>
- <td>
- {{tank_SHT11.SHT11_Temp}}
- <span id="SHT11_Temp_status"></span>
- </td>
- </tr>
- <tr>
- <td>
- 乾燥槽濕度
- </td>
- <td>
- {{tank_SHT11.SHT11_Humidity}}
- <span id="SHT11_Humidity_status"></span>
- </td>
- </tr>
- <tr>
- <td>
- 咖啡生豆溫度
- </td>
- <td>
- {{tank_Soil.soil_Temp}}
- <span id="soil_Temp_status"></span>
- </td>
- </tr>
- <tr>
- <td>
- 咖啡生豆濕度
- </td>
- <td>
- {{tank_Soil.soil_Humidity}}
- <span id="soil_Humidity_status"></span>
- </td>
- </tr>
- <tr>
- <td>
- 咖啡生豆 EC
- </td>
- <td>
- {{tank_Soil.soil_EC}}
- <span id="soil_EC_status"></span>
- </td>
- </tr>
- <tr>
- <td>
- 桶內壓力
- </td>
- <td>
- {{tank_PA.PA}}
- <span id="PA_status"></span>
- </td>
- </tr>
- </table>
- </td>
- </tr>
- </table>
- </div>
- </div>
- </div>
- </div>
- <script>
- var button_D1 = document.getElementById('D1');
- button_D1.addEventListener('click', function () {
- $('#D1_Modal').modal('show');
- });
- function update_data(dtn) {
- console.log('dry_tank_num:' + dtn)
- // dtn = dry_tank_num
- $.get('/loading/' + dtn, '', 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_3wayvalve == 0){$("#tank_3wayvalve_status").css("background-color", "#C0C0C0")
- }else if(res.tank_3wayvalve == 1){$("#tank_3wayvalve_status").css("background-color", "forestgreen")
- }else{$("#tank_3wayvalve_status").css("background-color", "crimson")}
- 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")}
-
- $("#tank_vacuum_t_status").text(res.tank_vacuum);
- $("#tank_3wayvalve_t_status").text(res.tank_3wayvalve);
- $("#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("乾燥槽 " + dtn + " 狀態")
- $('#D1_Modal').modal('show');
- }
- var button_D2 = document.getElementById('D2');
- button_D2.addEventListener('click', function(){update_data("D2")});
- var button_D3 = document.getElementById('D3');
- button_D3.addEventListener('click', function(){update_data("D3")});
-
- /*
- $('#D2').click(
- function(){
- $.get('/loading',
- '',
- function(res) {
- $("#SHT11_Temp_status").text(res.SHT11_Temp);
- },
- 'json'
- );
- }
- );
- */
- </script>
- </body>
- </html>
|