123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128 |
- <!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">
- -->
- <script>
- $(document).ready(function(){
- $("#coffee_title_pc").text('清洗貨櫃');
- $("#coffee_title_phone").text('清洗貨櫃');
- });
- </script>
- <style>
- .modal_status_css {
- width: 18px;
- height: 18px;
- background-color:black;
- border-radius: 50%;
- }
- .status_css {
- width: 20px;
- height: 20px;
- background-color: cornflowerblue;
- border-radius: 50%;
- }
- .C1_position {
- position: absolute;
- top: 135px;
- left: 205px;
- width: 180px;
- height: 230px;
- border-style: solid;
- border-color: aqua;
- }
- .C3_position {
- position: absolute;
- top: 400px;
- left: 205px;
- width: 180px;
- height: 230px;
- border-style: solid;
- border-color: aqua;
- }
- .C2_position {
- position: absolute;
- top: 135px;
- left: 405px;
- width: 180px;
- height: 230px;
- border-style: solid;
- border-color: aqua;
- }
- .C4_position {
- position: absolute;
- top: 400px;
- left: 405px;
- width: 180px;
- height: 230px;
- border-style: solid;
- border-color: aqua;
- }
- .R1_position {
- position: absolute;
- top: 160px;
- left: 600px;
- width: 200px;
- height: 360px;
- border-style: solid;
- border-color: aqua;
- }
- .S1_position {
- position: absolute;
- top: 135px;
- left: 945px;
- width: 115px;
- height: 230px;
- border-style: solid;
- border-color: aqua;
- }
- .S2_position {
- position: absolute;
- top: 400px;
- left: 945px;
- width: 115px;
- height: 230px;
- border-style: solid;
- border-color: aqua;
- }
- .SO1_position {
- position: absolute;
- top: 135px;
- left: 1065px;
- width: 60px;
- height: 230px;
- border-style: solid;
- border-color: aqua;
- }
- .SO2_position {
- position: absolute;
- top: 400px;
- left: 1065px;
- width: 60px;
- height: 230px;
- border-style: solid;
- border-color: aqua;
- }
- .P1_position {
- position: absolute;
- top: 135px;
- left: 1150px;
- width: 95px;
- height: 230px;
- border-style: solid;
- border-color: aqua;
- }
- .P2_position {
- position: absolute;
- top: 400px;
- left: 1150px;
- width: 95px;
- height: 230px;
- border-style: solid;
- border-color: aqua;
- }
- .PO1_position {
- position: absolute;
- top: 135px;
- left: 1250px;
- width: 50px;
- height: 230px;
- border-style: solid;
- border-color: aqua;
- }
- .PO2_position {
- position: absolute;
- top: 400px;
- left: 1250px;
- width: 50px;
- height: 230px;
- border-style: solid;
- border-color: aqua;
- }
- </style>
- <script language="JavaScript">
- // 指定 10秒 刷新網頁一次
- var WebRestart
- // WebRestart = setTimeout(function () { location.reload() }, 10000);
- </script>
- </head>
- <body>
- <div id="wrapper">
- <div id="coffee_header">
- <!-- 匯入共同使用的 header.html 內容 -->
- {% include 'header.html' %}
- </div>
- <div>
- <!-- 底圖 清洗浮選貨櫃 12 個清洗浮選桶槽 -->
- <center><img src="../static/img/web_CleanColorPeel_container.png" style="margin: auto; width: 1430px;"></center>
- <!-- 清洗浮選槽 C1 -->
- <div id="C1" tabindex="0" class="C1_position" role="button">
- C1 status
- <!-- C1 狀態點點-->
- <div id="C1_status" class="status_css"></div>
- </div>
-
- <!-- 清洗浮選槽 C3 -->
- <div id="C3" tabindex="0" class="C3_position" role="button">
- C3 status
- <div id="C3_status" class="status_css"></div>
- </div>
- <!-- 清洗浮選 C2 出料儲豆槽 -->
- <div id="C2" tabindex="0" class="C2_position" role="button">
- C2 status
- <!-- C2 狀態點點-->
- <div id="C2_status" class="status_css"></div>
- </div>
- <!-- 清洗浮選 C4 出料儲豆槽 -->
- <div id="C4" tabindex="0" class="C4_position" role="button">
- C4 status
- <!-- C4 狀態點點-->
- <div id="C4_status" class="status_css"></div>
- </div>
- <!-- 中水桶 -->
- <div id="R1" tabindex="0" class="R1_position" role="button">
- R1 status
- <!-- R1 狀態點點-->
- <div id="R1_status" class="status_css"></div>
- </div>
- <!-- 色選機 S1 -->
- <div id="S1" tabindex="0" class="S1_position" role="button">
- S1 status
- <div id="S1_status" class="status_css"></div>
- </div>
- <!-- 色選機 S2 -->
- <div id="S2" tabindex="0" class="S2_position" role="button">
- S2 status
- <div id="S2_status" class="status_css"></div>
- </div>
- <!-- 色選機 SO1 出料儲豆槽 -->
- <div id="SO1" tabindex="0" class="SO1_position" role="button">
- SO1 status
- <div id="SO1_status" class="status_css" style="background-color: crimson;"></div>
- </div>
- <!-- 色選機 SO2 出料儲豆槽 -->
- <div id="SO2" tabindex="0" class="SO2_position" role="button">
- SO2 status
- <div id="SO2_status" class="status_css" style="background-color: crimson;"></div>
- </div>
- <!-- 脫皮機 P1 -->
- <div id="P1" tabindex="0" class="P1_position" role="button">
- P1 status
- <div id="P1_status" class="status_css"></div>
- </div>
- <!-- 脫皮機 P2 -->
- <div id="P2" tabindex="0" class="P2_position" role="button">
- P2 status
- <div id="P2_status" class="status_css"></div>
- </div>
- <!-- 脫皮機 PO1 出料儲豆槽 -->
- <div id="PO1" tabindex="0" class="PO1_position" role="button">
- PO1 status
- <div id="PO1_status" class="status_css" style="background-color: crimson;"></div>
- </div>
- <!-- 脫皮機 PO2 出料儲豆槽 -->
- <div id="PO2" tabindex="0" class="PO2_position" role="button">
- PO2 status
- <div id="PO2_status" class="status_css" style="background-color: crimson;"></div>
- </div>
-
- </div>
- <!-- 清洗浮選 模态框 -->
- <div class="modal fade" id="C_Modal">
- <div class="modal-dialog modal-dialog-centered" style="width: 400px;">
- <div class="modal-content">
- <div class="modal-header">
- <h4 id="C_Modal_title" class="modal-title">清洗浮選槽 C1 狀態</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="C_actuator_link" href="/clean_container_tank/1">致動器狀態</a></strong></td>
- <td><strong><a id="C_sensor_link" href="/clean_container_tank/1">感測器狀態</a></strong></td>
- </tr>
- <tr>
- <td style="vertical-align:text-top;">
- <table style="border:0px gray solid;" cellpadding="3">
- <tr>
- <td>
- <div id="Ctank_vacuum_status" class="modal_status_css">
- </div>
-
- </td>
- <td>
- 真空吸料機
- </td>
- </tr>
- <tr>
- <td>
- <div id="Ctank_threewayvalve_input_status" class="modal_status_css">
- </div>
- </td>
- <td>
- 吸料機三通閥
- </td>
- </tr>
- <tr>
- <td>
- <div id="Ctank_motor_status" class="modal_status_css">
- </div>
- </td>
- <td>
- 馬達
- </td>
- </tr>
- <tr>
- <td>
- <div id="Ctank_solenoid_reclaimed_in_status" class="modal_status_css">
- </div>
- </td>
- <td>
- 中水入水電磁閥
- </td>
- </tr>
- <tr>
- <td>
- <div id="Ctank_solenoid_water_in_status" class="modal_status_css">
- </div>
- </td>
- <td>
- 清水入水電磁閥
- </td>
- </tr>
- <tr>
- <td>
- <div id="Ctank_pump_water_in_status" class="modal_status_css">
- </div>
- </td>
- <td>
- 幫浦(清水入水)
- </td>
- </tr>
- <tr>
- <td>
- <div id="Ctank_solenoid_water_out_status" class="modal_status_css">
- </div>
- </td>
- <td>
- 排水廢水電磁閥
- </td>
- <tr>
- <td>
- <div id="Ctank_solenoid_reclaimed_out_status" class="modal_status_css">
- </div>
- </td>
- <td>
- 排水中水電磁閥
- </td>
- </tr>
- <tr>
- <td>
- <div id="Ctank_solenoid_disinfect_status" class="modal_status_css">
- </div>
- </td>
- <td>
- 消毒電磁閥
- </td>
- </tr>
- <tr>
- <td>
- <div id="Ctank_pump_disinfect_status" class="modal_status_css">
- </div>
- </td>
- <td>
- 混合槽幫浦
- </td>
- </tr>
- <tr>
- <td>
- <div id="Ctank_diskvalve_status" class="modal_status_css">
- </div>
- </td>
- <td>
- 蝴蝶閥
- </td>
- </tr>
- </tr>
- </table>
- </td>
- <td style="vertical-align:text-top;">
- <table style="border:0px gray solid;" cellpadding="3">
- <tr>
- <td>
- 生豆生水高度
- </td>
- <td>
- <span id="CUltraSonic_t_status"></span>
- </td>
- </tr>
- <tr>
- <td>
- 馬達編碼器
- </td>
- <td>
- <span id="CMotorEncoder_t_status"></span>
- </td>
- </tr>
- <tr>
- <td>
- 內桶濁度計
- </td>
- <td>
- <span id="CtankTurbidity_t_status"></span>
- </td>
- </tr>
- <tr>
- <td>
- 過濾器濁度計
- </td>
- <td>
- <span id="CfilterTurbidity_t_status"></span>
- </td>
- </tr>
- <tr>
- <td>
- <a id="camera_clean_tid" href=""><strong>攝影機畫面</strong></a>
- </td>
- </tr>
- </table>
- </td>
- </tr>
- </table>
- </div>
- </div>
- </div>
- </div>
- <!-- 清洗浮選 出料儲豆槽 模态框 -->
- <div class="modal fade" id="CO_Modal">
- <div class="modal-dialog modal-dialog-centered" style="width: 400px;">
- <div class="modal-content">
- <div class="modal-header">
- <h4 id="CO_Modal_title" class="modal-title">清洗浮選出料儲豆槽 CO1 狀態</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="CO_actuator_link" href="/clean_container/1">致動器狀態</a></strong></td>
- <td><strong><a id="CO_sensor_link" href="/clean_container/1">感測器狀態</a></strong></td>
- </tr>
- <tr>
- <td style="vertical-align:text-top;">
- <table style="border:0px gray solid;" cellpadding="3">
- <tr>
- <td>
- <div id="CO_vacuum_status" class="modal_status_css">
- </div>
-
- </td>
- <td>
- 真空吸料機
- </td>
- </tr>
- </table>
- </td>
- <td style="vertical-align:text-top;">
- <table style="border:0px gray solid;" cellpadding="3">
- <tr>
- <td>
- (感測器)
- </td>
- <td>
- <span id="">000</span>
- </td>
- </tr>
- <tr>
- <td>
- <a id="CO_camera_clean_tid" href=""><strong>攝影機畫面</strong></a>
- </td>
- </tr>
- </table>
- </td>
- </tr>
- </table>
- </div>
- </div>
- </div>
- </div>
- <!-- 色選機 模态框 -->
- <div class="modal fade" id="S_Modal">
- <div class="modal-dialog modal-dialog-centered" style="width: 400px;">
- <div class="modal-content">
- <div class="modal-header">
- <h4 id="S_Modal_title" class="modal-title">色選機 S1 狀態</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="S_actuator_link" href="/colorselect_container_tank/1">致動器狀態</a></strong></td>
- <td><strong><a id="S_sensor_link" href="/colorselect_container_tank/1">感測器狀態</a></strong></td>
- </tr>
- <tr>
- <td style="vertical-align:text-top;">
- <table style="border:0px gray solid;" cellpadding="3">
- <tr>
- <td>
- <div id="S_vacuum_status" class="modal_status_css">
- </div>
- </td>
- <td>
- 真空吸料機
- </td>
- </tr>
- <tr>
- <td>
- <div id="S_motor_status" class="modal_status_css">
- </div>
- </td>
- <td>
- 馬達
- </td>
- </tr>
- <tr>
- <td>
- <div id="S_nozzle_status" class="modal_status_css">
- </div>
- </td>
- <td>
- 噴嘴
- </td>
- </tr>
- </table>
- </td>
- <td style="vertical-align:text-top;">
- <table style="border:0px gray solid;" cellpadding="3">
- <tr>
- <td>
- 超音波感測器
- </td>
- <td>
- <span id="S_UltraSonic_status"></span>
- </td>
- </tr>
- <tr>
- <td>
- 顏色感測器
- </td>
- <td>
- <span id="S_color_status"></span>
- </td>
- </tr>
- <tr>
- <td>
- <a id="S_camera_colorselect_tid" href=""><strong>攝影機畫面</strong></a>
- </td>
- </tr>
- </table>
- </td>
- </tr>
- </table>
- </div>
- </div>
- </div>
- </div>
- <!-- 色選機 出料儲豆槽 模态框 -->
- <div class="modal fade" id="SO_Modal">
- <div class="modal-dialog modal-dialog-centered" style="width: 400px;">
- <div class="modal-content">
- <div class="modal-header">
- <h4 id="SO_Modal_title" class="modal-title">色選機出料儲豆槽 SO1 狀態</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="SO_actuator_link" href="/colorselect_container/1">致動器狀態</a></strong></td>
- <td><strong><a id="SO_sensor_link" href="/colorselect_container/1">感測器狀態</a></strong></td>
- </tr>
- <tr>
- <td style="vertical-align:text-top;">
- <table style="border:0px gray solid;" cellpadding="3">
- <tr>
- <td>
- <div id="SO_vacuum_status" class="modal_status_css">
- </div>
-
- </td>
- <td>
- 真空吸料機
- </td>
- </tr>
- </table>
- </td>
- <td style="vertical-align:text-top;">
- <table style="border:0px gray solid;" cellpadding="3">
- <tr>
- <td>
- (感測器)
- </td>
- <td>
- <span id="">000</span>
- </td>
- </tr>
- <tr>
- <td>
- <a id="SO_camera_colorselect_tid" href=""><strong>攝影機畫面</strong></a>
- </td>
- </tr>
- </table>
- </td>
- </tr>
- </table>
- </div>
- </div>
- </div>
- </div>
- <!-- 脫皮機 模态框 -->
- <div class="modal fade" id="P_Modal">
- <div class="modal-dialog modal-dialog-centered" style="width: 400px;">
- <div class="modal-content">
- <div class="modal-header">
- <h4 id="P_Modal_title" class="modal-title">脫皮機 P1 狀態</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="P_actuator_link" href="">致動器狀態</a></strong></td>
- <td><strong><a id="P_sensor_link" href="">感測器狀態</a></strong></td>
- </tr>
- <tr>
- <td style="vertical-align:text-top;">
- <table style="border:0px gray solid;" cellpadding="3">
- <tr>
- <td>
- <div id="P_vacuum_status" class="modal_status_css">
- </div>
-
- </td>
- <td>
- 真空吸料機
- </td>
- </tr>
- <tr>
- <td>
- <div id="tank_motor_status" class="modal_status_css">
- </div>
- </td>
- <td>
- 馬達
- </td>
- </tr>
- </table>
- </td>
- <td style="vertical-align:text-top;">
- <table style="border:0px gray solid;" cellpadding="3">
- <tr>
- <td>
- (感測器)
- </td>
- <td>
- <span id="SENSOR_t_status">000</span>
- </td>
- </tr>
- <tr>
- <td>
- <a id="camera_peel_tid" href=""><strong>攝影機畫面</strong></a>
- </td>
- </tr>
- </table>
- </td>
- </tr>
- </table>
- </div>
- </div>
- </div>
- </div>
- <!-- 脫皮機 出料儲豆槽 模态框 -->
- <div class="modal fade" id="PO_Modal">
- <div class="modal-dialog modal-dialog-centered" style="width: 400px;">
- <div class="modal-content">
- <div class="modal-header">
- <h4 id="PO_Modal_title" class="modal-title">脫皮機出料儲豆槽 PO1 狀態</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="PO_actuator_link" href="/clean_container/1">致動器狀態</a></strong></td>
- <td><strong><a id="PO_sensor_link" href="/clean_container/1">感測器狀態</a></strong></td>
- </tr>
- <tr>
- <td style="vertical-align:text-top;">
- <table style="border:0px gray solid;" cellpadding="3">
- <tr>
- <td>
- <div id="PO_vacuum_status" class="modal_status_css">
- </div>
-
- </td>
- <td>
- 真空吸料機
- </td>
- </tr>
- </table>
- </td>
- <td style="vertical-align:text-top;">
- <table style="border:0px gray solid;" cellpadding="3">
- <tr>
- <td>
- (感測器)
- </td>
- <td>
- <span id="">000</span>
- </td>
- </tr>
- <tr>
- <td>
- <a id="PO_camera_peel_tid" href=""><strong>攝影機畫面</strong></a>
- </td>
- </tr>
- </table>
- </td>
- </tr>
- </table>
- </div>
- </div>
- </div>
- </div>
- <!-- 中水桶 模态框 -->
- <div class="modal fade" id="R_Modal">
- <div class="modal-dialog modal-dialog-centered" style="width: 400px;">
- <div class="modal-content">
- <div class="modal-header">
- <h4 id="R_Modal_title" class="modal-title">中水桶 R1 狀態</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="R_actuator_link" href="/reclimedwater_tank/1">致動器狀態</a></strong></td>
- <td><strong><a id="R_sensor_link" href="/reclimedwater_tank/1">感測器狀態</a></strong></td>
- </tr>
- <tr>
- <td style="vertical-align:text-top;">
- <table style="border:0px gray solid;" cellpadding="3">
- <tr>
- <td>
- <div id="R_solenoid_water_in_status" class="modal_status_css">
- </div>
- </td>
- <td>
- 清水入水電磁閥
- </td>
- </tr>
- <tr>
- <td>
- <div id="R_solenoid_reclaimed_out_status" class="modal_status_css">
- </div>
- </td>
- <td>
- 中水出水電磁閥
- </td>
- </tr>
- <tr>
- <td>
- <div id="R_solenoid_water_out_status" class="modal_status_css">
- </div>
- </td>
- <td>
- 廢水出水電磁閥
- </td>
- </tr>
- <tr>
- <td>
- <div id="R_pump_reclaimed_out_status" class="modal_status_css">
- </div>
- </td>
- <td>
- 入水清洗槽幫浦
- </td>
- </tr>
-
-
- </table>
- </td>
- <td style="vertical-align:text-top;">
- <table style="border:0px gray solid;" cellpadding="3">
- <tr>
- <td>
- (感測器)
- </td>
- <td>
- <span id="">000</span>
- </td>
- </tr>
- <tr>
- <td>
- <a id="R_camera_reclaimedwater_tid" href=""><strong>攝影機畫面</strong></a>
- </td>
- </tr>
- </table>
- </td>
- </tr>
- </table>
- </div>
- </div>
- </div>
- </div>
- <script>
- function update_data_C(ctid) {
- console.log('clean_tank_id:' + ctid)
- $.get('/loading/C' + ctid, '', function (res) {
- if (res.tank_vacuum == 0) {
- $("#Ctank_vacuum_status").css("background-color", "#C0C0C0")
- } else if (res.tank_vacuum == 1) {
- $("#Ctank_vacuum_status").css("background-color", "forestgreen")
- } else { $("#Ctank_vacuum_status").css("background-color", "crimson") }
- if (res.tank_threewayvalve_input == 0) {
- $("#Ctank_threewayvalve_input_status").css("background-color", "#C0C0C0")
- } else if (res.tank_threewayvalve_input == 1) {
- $("#Ctank_threewayvalve_input_status").css("background-color", "forestgreen")
- } else { $("#Ctank_threewayvalve_input_status").css("background-color", "crimson") }
- if (res.tank_motor == 0) {
- $("#Ctank_motor_status").css("background-color", "#C0C0C0")
- } else { $("#Ctank_motor_status").css("background-color", "forestgreen") }
-
- if (res.tank_solenoid_reclaimed_in == 0) {
- $("#Ctank_solenoid_reclaimed_in_status").css("background-color", "#C0C0C0")
- } else if (res.tank_solenoid_reclaimed_in == 1) {
- $("#Ctank_solenoid_reclaimed_in_status").css("background-color", "forestgreen")
- } else { $("#Ctank_solenoid_reclaimed_in_status").css("background-color", "crimson") }
- if (res.tank_solenoid_water_in == 0) {
- $("#Ctank_solenoid_water_in_status").css("background-color", "#C0C0C0")
- } else if (res.tank_solenoid_water_in == 1) {
- $("#Ctank_solenoid_water_in_status").css("background-color", "forestgreen")
- } else { $("#Ctank_solenoid_water_in_status").css("background-color", "crimson") }
- if (res.tank_solenoid_water_out == 0) {
- $("#Ctank_solenoid_water_out_status").css("background-color", "#C0C0C0")
- } else if (res.tank_solenoid_water_out == 1) {
- $("#Ctank_solenoid_water_out_status").css("background-color", "forestgreen")
- } else { $("#Ctank_solenoid_water_out_status").css("background-color", "crimson") }
- if (res.tank_solenoid_reclaimed_out == 0) {
- $("#Ctank_solenoid_reclaimed_out_status").css("background-color", "#C0C0C0")
- } else if (res.tank_solenoid_reclaimed_out == 1) {
- $("#Ctank_solenoid_reclaimed_out_status").css("background-color", "forestgreen")
- } else { $("#Ctank_solenoid_reclaimed_out_status").css("background-color", "crimson") }
- if (res.tank_solenoid_disinfect == 0) {
- $("#Ctank_solenoid_disinfect_status").css("background-color", "#C0C0C0")
- } else if (res.tank_solenoid_disinfect == 1) {
- $("#Ctank_solenoid_disinfect_status").css("background-color", "forestgreen")
- } else { $("#Ctank_solenoid_disinfect_status").css("background-color", "crimson") }
- if (res.tank_pump_disinfect == 0) {
- $("#Ctank_pump_disinfect_status").css("background-color", "#C0C0C0")
- } else if (res.tank_pump_disinfect == 1) {
- $("#Ctank_pump_disinfect_status").css("background-color", "forestgreen")
- } else { $("#Ctank_pump_disinfect_status").css("background-color", "crimson") }
- if (res.tank_diskvalve == 0) {
- $("#Ctank_diskvalve_status").css("background-color", "#C0C0C0")
- } else if (res.tank_diskvalve == 1) {
- $("#Ctank_diskvalve_status").css("background-color", "forestgreen")
- } else { $("#Ctank_diskvalve_status").css("background-color", "crimson") }
- if (res.tank_pump_water_in == 0) {
- $("#Ctank_pump_water_in_status").css("background-color", "#C0C0C0")
- } else if (res.tank_pump_water_in == 1) {
- $("#Ctank_pump_water_in_status").css("background-color", "forestgreen")
- } else { $("#Ctank_pump_water_in_status").css("background-color", "crimson") }
- $("#CUltraSonic_t_status").text(res.UltraSonic);
- $("#CMotorEncoder_t_status").text(res.Encoder);
- $("#CtankTurbidity_t_status").text(res.tankTurbidity);
- $("#CfilterTurbidity_t_status").text(res.filterTurbidity);
- }, 'json');
- $('#C_Modal_title').text("清洗浮選槽 C" + ctid + " 狀態");
- $('#C_actuator_link').attr("href", "/clean_container_tank/" + ctid);
- $('#C_sensor_link').attr("href", "/clean_container_tank/" + ctid);
- $('#camera_clean_tid').attr("href", "/camera_C" + ctid);
- $('#C_Modal').modal('show');
- }
- function update_data_SO(sotid){
- console.log('color-select_tank_id:' + sotid)
- $.get('/loading/SO' + sotid, '', function (res) {
- if (res.output_vacuum == 0) {
- $("#SO_vacuum_status").css("background-color", "#C0C0C0")
- } else if (res.output_vacuum == 1) {
- $("#SO_vacuum_status").css("background-color", "forestgreen")
- } else { $("#SO_vacuum_status").css("background-color", "crimson") }
- }, 'json');
- $('#SO_Modal_title').text("色選機出料儲豆槽 SO" + sotid + " 狀態");
- $('#SO_actuator_link').attr("href", "/colorselect_container/" + sotid);
- $('#SO_sensor_link').attr("href", "/colorselect_container/" + sotid);
- $('#SO_camera_colorselect_tid').attr("href", "/camera_SO" + sotid);
- $('#SO_Modal').modal('show');
- }
- function update_data_S(stid) {
- console.log('color-select_tank_id:' + stid)
- $.get('/loading/S' + stid, '', function (res) {
- if (res.tank_vacuum == 0) {
- $("#S_vacuum_status").css("background-color", "#C0C0C0")
- } else if (res.tank_vacuum == 1) {
- $("#S_vacuum_status").css("background-color", "forestgreen")
- } else { $("#S_vacuum_status").css("background-color", "crimson") }
- if (res.tank_motor == 0) {
- $("#S_motor_status").css("background-color", "#C0C0C0")
- } else if (res.tank_motor > 0 || res.tank_motor < 0) {
- $("#S_motor_status").css("background-color", "forestgreen")
- } else { $("#S_motor_status").css("background-color", "crimson") }
- if (res.tank_nozzle == 0) {
- $("#S_nozzle_status").css("background-color", "#C0C0C0")
- } else if (res.tank_nozzle > 0 || res.tank_motor < 0) {
- $("#S_nozzle_status").css("background-color", "forestgreen")
- } else { $("#S_nozzle_status").css("background-color", "crimson") }
- $("#S_UltraSonic_status").text(res.UltraSonic);
- $("#S_color_status").text(res.color);
-
- }, 'json');
- $('#S_Modal_title').text("色選機 S" + stid + " 狀態");
- $('#S_actuator_link').attr("href", "/colorselect_container_tank/" + stid);
- $('#S_sensor_link').attr("href", "/colorselect_container_tank/" + stid);
- $('#S_camera_colorselect_tid').attr("href", "/camera_S" + stid);
- $('#S_Modal').modal('show');
- }
- function update_data_P(ptid) {
- console.log('peel_tank_id:' + ptid)
- $.get('/loading/P' + ptid, '', function (res) {
- if (res.tank_vacuum == 0) {
- $("#P_vacuum_status").css("background-color", "#C0C0C0")
- } else if (res.tank_vacuum == 1) {
- $("#P_vacuum_status").css("background-color", "forestgreen")
- } else { $("#P_vacuum_status").css("background-color", "crimson") }
- if (res.tank_motor > 0) {
- $("#tank_motor_status").css("background-color", "forestgreen")
- } else if (res.tank_motor == 0) {
- $("#tank_motor_status").css("background-color", "#C0C0C0")
- } else { $("#tank_motor_status").css("background-color", "crimson") }
- }, 'json');
- $('#P_Modal_title').text("脫皮機 P" + ptid + " 狀態");
- $('#P_actuator_link').attr("href", "/peel_container_tank/" + ptid);
- $('#P_sensor_link').attr("href", "/peel_container_tank/" + ptid);
- $('#camera_peel_tid').attr("href", "/camera_P" + ptid);
- $('#P_Modal').modal('show');
- }
- function update_data_CO(cotid){
- console.log('clean_output_tank_id:' + cotid)
- $.get('loading/CO' + cotid, '', function (res){
- if (res.output_vacuum == 0) {
- $("#CO_vacuum_status").css("background-color", "#C0C0C0")
- } else if (res.output_vacuum == 1) {
- $("#CO_vacuum_status").css("background-color", "forestgreen")
- } else { $("#CO_vacuum_status").css("background-color", "crimson") }
- }, 'json');
- $('#CO_Modal_title').text("清洗浮選出料儲豆槽 CO" + cotid + " 狀態");
- $('#CO_actuator_link').attr("href", "/clean_container/" + cotid);
- $('#CO_sensor_link').attr("href", "/clean_container/" + cotid);
- $('#CO_camera_clean_tid').attr("href", "/camera_CO" + cotid);
- $('#CO_Modal').modal('show');
- }
- function update_data_PO(potid){
- console.log('peel_output_tank_id' + potid)
- $.get('loading/PO' + potid, '', function (res){
- if (res.output_vacuum == 0) {
- $("#PO_vacuum_status").css("background-color", "#C0C0C0")
- } else if (res.output_vacuum == 1) {
- $("#PO_vacuum_status").css("background-color", "forestgreen")
- } else { $("#PO_vacuum_status").css("background-color", "crimson") }
- }, 'json');
- $('#PO_Modal_title').text("脫皮機出料儲豆槽 PO" + potid + " 狀態");
- $('#PO_actuator_link').attr("href", "/peel_container/" + potid);
- $('#PO_sensor_link').attr("href", "/peel_container/" + potid);
- $('#PO_camera_peel_tid').attr("href", "/camera_PO" + potid);
- $('#PO_Modal').modal('show');
- }
- function update_data_R(rtid){
- console.log('reclimedwater_tank_id: ' + rtid)
- $.get('/loading/R' + rtid, '', function (res) {
- if (res.tank_solenoid_water_in == 0) {
- $("#R_solenoid_water_in_status").css("background-color", "#C0C0C0")
- } else if (res.tank_solenoid_water_in == 1) {
- $("#R_solenoid_water_in_status").css("background-color", "forestgreen")
- } else { $("#R_solenoid_water_in_status").css("background-color", "crimson") }
- if (res.tank_solenoid_reclaimed_out == 0) {
- $("#R_solenoid_reclaimed_out_status").css("background-color", "#C0C0C0")
- } else if (res.tank_solenoid_reclaimed_out == 1) {
- $("#R_solenoid_reclaimed_out_status").css("background-color", "forestgreen")
- } else { $("#R_solenoid_reclaimed_out_status").css("background-color", "crimson") }
- if (res.tank_solenoid_water_out == 0) {
- $("#R_solenoid_water_out_status").css("background-color", "#C0C0C0")
- } else if (res.tank_solenoid_water_out == 1) {
- $("#R_solenoid_water_out_status").css("background-color", "forestgreen")
- } else { $("#R_solenoid_water_out_status").css("background-color", "crimson") }
- if (res.tank_pump_reclaimed_out == 0) {
- $("#R_pump_reclaimed_out_status").css("background-color", "#C0C0C0")
- } else if (res.tank_pump_reclaimed_out == 1) {
- $("#R_pump_reclaimed_out_status").css("background-color", "forestgreen")
- } else { $("#R_pump_reclaimed_out_status").css("background-color", "crimson") }
-
- }, 'json');
- $('#R_Modal_title').text("中水桶 R" + rtid + " 狀態");
- $('#R_actuator_link').attr("href", "/reclaimedwater_tank/" + rtid);
- $('#R_sensor_link').attr("href", "/reclaimedwater_tank/" + rtid);
- $('#R_camera_reclaimedwater_tid').attr("href", "/camera_R" + rtid);
- $('#R_Modal').modal('show');
- }
- var button_C1 = document.getElementById('C1');
- button_C1.addEventListener('click', function () { update_data_C("1") });
- var button_C3 = document.getElementById('C3');
- button_C3.addEventListener('click', function () { update_data_C("3") });
- var button_C2 = document.getElementById('C2');
- button_C2.addEventListener('click', function () { update_data_C("2") });
- var button_C4 = document.getElementById('C4');
- button_C4.addEventListener('click', function () { update_data_C("4") });
- var button_R1 = document.getElementById('R1');
- button_R1.addEventListener('click', function () { update_data_R("1") });
- var button_S1 = document.getElementById('S1');
- button_S1.addEventListener('click', function () { update_data_S("1") });
- var button_S2 = document.getElementById('S2');
- button_S2.addEventListener('click', function () { update_data_S("2") });
- var button_SO1 = document.getElementById('SO1');
- button_SO1.addEventListener('click', function () { update_data_SO("1") });
- var button_SO2 = document.getElementById('SO2');
- button_SO2.addEventListener('click', function () { update_data_SO("2") });
- var button_P1 = document.getElementById('P1');
- button_P1.addEventListener('click', function () { update_data_P("1") });
- var button_P2 = document.getElementById('P2');
- button_P2.addEventListener('click', function () { update_data_P("2") });
- var button_PO1 = document.getElementById('PO1');
- button_PO1.addEventListener('click', function () { update_data_PO("1") });
- var button_PO2 = document.getElementById('PO2');
- button_PO2.addEventListener('click', function () { update_data_PO("2") });
- </script>
- <div id="coffee_footer">
- <!-- 匯入共同使用的 footer.html 內容 -->
- {% include 'footer.html' %}
- </div>
- </div>
- </body>
- </html>
|