上傳檔案到 'static'

static/index.js

@@ -10,15 +10,15 @@ $("#btn_login").click(function () {
     xhr.onreadystatechange = function () {
       if (xhr.readyState === 4) {
         console.log(xhr.status);
-        responseOBJ = JSON.parse(xhr.responseText)          // error
+        responseOBJ = JSON.parse(xhr.responseText) ;         // error
         console.log(responseOBJ.access_token);
         // document.cookie = 'jwt_token='+responseOBJ.jwt_token    // access_token -> jwt_token
         document.cookie = 'jwt_token='+responseOBJ.access_token; 
         console.log('cookie: ');
         console.log(document.cookie);     // test log
         console.log('登入成功');
-        alert('登入成功!!')
-        window.location.replace("/home")
+        alert('登入成功!!');
+        window.location.replace("/home");
       }
     };
     var data = "grant_type=&username=" + $('#username').val() + "&password="+$('#password').val()+"&scope=&client_id=&client_secret=";

static/index2.css

@@ -59,6 +59,8 @@ text-align:center;
 
 .navbar {
 box-shadow: 0 2px 2px -2px rgba(0,0,0,.2);
+position:fixed;
+top:0px;
 }
 
 .navbar-brand img{
@@ -132,4 +134,77 @@ background: #002e86;
 border-color: #002e86;
 padding-top: .5rem;
 padding-bottom: .5rem;
-}
+}
+
+/* 版本一 */
+body{
+    background: #f8f9fb;
+    }
+    .option{
+    background: #0174c7;
+    color:#000;
+    }
+    .tower-data{
+    width: 80vw;
+    margin: 0 auto;
+    }
+    #select_boxes{
+    padding: 10px 25px;
+    }
+    .select-item{
+    width: 20%;
+    padding: 10px;
+    margin: 10px;
+    border-radius: 5px;
+    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
+    border:none;
+    
+    }
+    #tower_btn{
+    padding: 8px 15px;
+    margin: 10px;
+    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
+    border:none;
+    border-radius: 5px;
+    background: #fff;
+    color:#0174c7;
+    transition: 0.3s;
+    }
+    #tower_btn:hover{
+    background: #0174c7;
+    color:#fff;
+    }
+    #tower-box{
+    padding: 10px;
+    }
+    #tower{
+    width: 100%;
+    padding: 10px;
+    border-radius: 5px;
+    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
+    border:none;
+    
+    }
+    h1{
+    font-size: 1.6rem;
+    font-weight: 900;
+    padding: 15px;
+    
+    }
+    p{
+    font-size: 2.4vmin;
+    }
+    
+    .card{
+    margin: 2.3vmin;
+    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
+    border-radius:15px;
+    padding: 15px;
+    }
+    .unit{
+    font-size: 25px;
+    font-weight: 900;
+    }
+    .data-title{
+    color:#495057;
+    }

static/table.js

@@ -1,30 +1,45 @@
-function creatTable(data){
-    //這個函式的引數可以是從後臺傳過來的也可以是從其他任何地方傳過來的
-    //這裡我假設這個data是一個長度為5的字串陣列 我要把他放在表格的一行裡面，分成五列
-  
-    var tableData = "<table><thead><tr><th>使用者身分</th><th>使用者名稱</th><th>帳號</th><th>電子郵件</th><th>權限設定</th><th>修改密碼</th><th>備註</th><th>+新增</th></tr></thead><tbody>"
-  
-    //動態增加5個td,並且把data陣列的五個值賦給每個td
-    // for(var i=0;i < data.length;i++){
-    //     tableData += "<td>" + data[i] + "</td>"
-    // }
-    for(var i = 0; i < data.length; i++) {
-        tableData += "<tr>"
-        for(var j = 0; j < data[i].length; j++) {
-            tableData += "<td>" + data[i][j] + "</td>"
-        }
-        tableData += "</tr>";
-    }
-  
-    tableData+= "</tbody></table>"
-  
-    //現在tableData已經生成好了，把他賦值給上面的tbody
-    $("#info_table").html(tableData)
-}
-
-
-data = [['Super Admin', '超級管理員', 'Admin', 'admin@gmail.com', '設定', '修改', '', '新增']]
-// 之後透過 fetch 取得fastapi後端資料!
-creatTable(data);
-console.log('Table data 寫入!');
-
+function creatTable(data){
+    //這個函式的引數可以是從後臺傳過來的也可以是從其他任何地方傳過來的
+    //這裡我假設這個data是一個長度為5的字串陣列 我要把他放在表格的一行裡面，分成五列
+    alert("eee");
+    var tableData = "<table><thead><tr><th>使用者層級</th><th>使用者名稱</th><th>帳號</th><th>電子郵件</th><th>權限設定</th><th>修改密碼</th><th>備註</th><th>+新增</th></tr></thead><tbody>"
+  
+    //動態增加5個td,並且把data陣列的五個值賦給每個td
+    // for(var i=0;i < data.length;i++){
+    //     tableData += "<td>" + data[i] + "</td>"
+    // }
+    for(var i = 0; i < data.length; i++) {
+        tableData += "<tr>"
+        tableData += "<td>" + data[i].roleType + "</td>" +
+                     "<td>" + data[i].username + "</td>" +
+                     "<td></td>" +           
+                     "<td></td>" +
+                     "<td><button>設定</button></td>" +
+                     "<td><button>修改密碼</button></td>" +
+                     "<td></td>" +
+                     "<td></td>" ;
+        tableData += "</tr>";
+    }
+  
+    tableData+= "</tbody></table>"
+  
+    //現在tableData已經生成好了，把他賦值給上面的tbody
+    $("#info_table").html(tableData)
+}
+
+//alert("response");
+
+// 之後透過 fetch 取得fastapi後端資料!
+var xhr = new XMLHttpRequest();
+var url = "member";
+obj="";
+xhr.open("GET",url);
+xhr.onload = function(){
+    obj = JSON.parse(xhr.responseText);
+        //insertHTML();
+    alert(obj);
+};
+xhr.send();
+creatTable(obj);
+console.log('Table data 寫入!');
+

static/tower.js

@@ -1,287 +1,296 @@
-    var xhr = new XMLHttpRequest();
-    var url = "tower/org";
-    obj="";
-    xhr.open("GET",url);
-    xhr.onload = function(){
-        obj = JSON.parse(xhr.responseText);
-        //insertHTML();
-        start();
-    };
-    xhr.send();
+var xhr = new XMLHttpRequest();
+var url = "tower/org";
+obj="";
+xhr.open("GET",url);
+xhr.onload = function(){
+    obj = JSON.parse(xhr.responseText);
+    //insertHTML();
+    start();
+    onChangeColumn1();
+    onChangeColumn2();
+    onChangeColumn3();
 
-    function insertHTML(data){
-        
-        var aria = document.getElementById('test');
-        var tower_select = document.getElementById('tower');
-        //aria.innerHTML=data[0].tower_name;
-        var inner='<option value=0>請選擇水塔</option>';
-        for(var i=0;i<data.length;i++){
-            inner=inner+'<option value="'+data[i].tower_name+'">'+data[i].tower_name+'</option>';
-        }
-        tower_select.innerHTML=inner;
-    }
-    obj2 = "";
-    function click_button() {
-        //alert("click");
-        companySelect=document.getElementById("company-list");
-        factorySelect=document.getElementById("factory-list");
-        departmentSelect=document.getElementById("department-list");
-        towerGroupSelect=document.getElementById("towerGroup-list");
-        if(companySelect.value!=0 && factorySelect.value!=0 && departmentSelect.value!=0 && towerGroupSelect.value!=0){
-            var url2 = "tower/?company="+ companySelect.value + "&factory=" +  factorySelect.value + "&department=" +departmentSelect.value + "&towerGroup=" +towerGroupSelect.value ;
-            var xhr2 = new XMLHttpRequest();
-            xhr2.open("GET",url2);
-            xhr2.onload = function(){
-                obj2 = JSON.parse(xhr2.responseText);
-                insertHTML(obj2);
-            };
-            xhr2.send();
-        }
-        
-      }
+    click_button();
 
-    function tower_info(){
-        towerSelect=document.getElementById("tower");
-        tower = towerSelect.value;
-        inner = "";
-        for(var i=0;i<obj2.length;i++){
-            if(obj2[i].tower_name == tower){
-                // inner = '<p> DCS </P> '+
-                //         '<p> 入水溫度 = '+ obj2[i].tower_data.DCS.hotTemp + ' </P> '   + 
-                //         '<p> 出水溫度 = '+ obj2[i].tower_data.DCS.coldTemp + ' </P> '   + 
-                //         '<p> 水流量 = '+ obj2[i].tower_data.DCS.waterFlow + ' </P> '   + 
-                //         '<p> 風扇馬達電流 = '+ obj2[i].tower_data.DCS.fanMotorCur + ' </P> '   + 
-                //         '<p> 風扇馬達轉速頻率 = '+ obj2[i].tower_data.DCS.fanMotorSpeedFreq + ' </P><br> '   + 
-                //         '<p> 風扇震動 </P> '+
-                //         '<p> 馬達震動 = '+ obj2[i].tower_data.Moter.ch01.Vrms + ' </P> '   + 
-                //         '<p> 減速機震動 = '+ obj2[i].tower_data.Fan.reducer + ' </P> '   + 
-                //         '<p> 靜壓機 = '+ obj2[i].tower_data.Fan.staticPressure + ' </P> '   +
-                //         '<p> 水流量 = '+ obj2[i].tower_data.Fan.waterFlow + ' </P> '   + 
-                //         '<p> 濕求溫度 = '+ obj2[i].tower_data.Fan.wetTemp + ' </P> '   + 
-                //         '<p> 水冷槽溫度1 = '+ obj2[i].tower_data.Fan.coldTempData1 + ' </P> '   +
-                //         '<p> 水冷槽溫度2 = '+ obj2[i].tower_data.Fan.coldTempData2 + ' </P><br> '   +
-                //         '<p> 馬達震動 </P> '+
-                //         '<p> ch001,通道1'+ obj2[i].tower_data.Moter.ch01.Vrms + ',' + obj2[i].tower_data.Moter.ch01.CV+' </P> '   + 
-                //         '<p> ch002,通道2'+ obj2[i].tower_data.Moter.ch02.Vrms + ',' + obj2[i].tower_data.Moter.ch02.CV+' </P> '
-                //         ;
-                        inner =' <h1 class="ms-3"><i style="  color:#0174c7;" class="fas fa-file-signature me-1"></i>中控室DSC訊號</h1>\
-                        <div class="row px-0 mx-0">\
-                            <div class="card col-lg-2">\
-                                <p class="data-title fw-bold">'+ obj2[i].tower_data.DCS.hotTemp + '</p>\
-                                <div>\
-                                    <h2 class="text-center">31.612</h2>\
-                                    <P class="unit text-end">°C</P>\
-                                </div>\
+};
+xhr.send();
+
+function insertHTML(data){
+    
+    var tower_select = document.getElementById('tower');
+    //aria.innerHTML=data[0].tower_name;
+    var inner='';
+    for(var i=0;i<data.length;i++){
+        inner=inner+'<button onclick="tower_info(\''+data[i].tower_name+'\');">'+data[i].tower_name+'</button>';
+        console.log(inner);
+    }
+    tower_select.innerHTML=inner;
+}
+obj2 = "";
+function click_button() {
+    //alert("click");
+    companySelect=document.getElementById("company-list");
+    factorySelect=document.getElementById("factory-list");
+    departmentSelect=document.getElementById("department-list");
+    towerGroupSelect=document.getElementById("towerGroup-list");
+    if(companySelect.value!=0 && factorySelect.value!=0 && departmentSelect.value!=0 && towerGroupSelect.value!=0){
+        var url2 = "tower/?company="+ companySelect.value + "&factory=" +  factorySelect.value + "&department=" +departmentSelect.value + "&towerGroup=" +towerGroupSelect.value ;
+        var xhr2 = new XMLHttpRequest();
+        xhr2.open("GET",url2);
+        xhr2.onload = function(){
+            obj2 = JSON.parse(xhr2.responseText);
+            insertHTML(obj2);
+            tower_info("dev001");
+        };
+        xhr2.send();
+    }
+    
+  }
+  
+function tower_info(tower_str){
+    tower = tower_str;
+    console.log(tower);
+    inner = "";
+    for(var i=0;i<obj2.length;i++){
+        if(obj2[i].tower_name == tower){
+            // inner = '<p> DCS </P> '+
+            //         '<p> 入水溫度 = '+ obj2[i].tower_data.DCS.hotTemp + ' </P> '   + 
+            //         '<p> 出水溫度 = '+ obj2[i].tower_data.DCS.coldTemp + ' </P> '   + 
+            //         '<p> 水流量 = '+ obj2[i].tower_data.DCS.waterFlow + ' </P> '   + 
+            //         '<p> 風扇馬達電流 = '+ obj2[i].tower_data.DCS.fanMotorCur + ' </P> '   + 
+            //         '<p> 風扇馬達轉速頻率 = '+ obj2[i].tower_data.DCS.fanMotorSpeedFreq + ' </P><br> '   + 
+            //         '<p> 風扇震動 </P> '+
+            //         '<p> 馬達震動 = '+ obj2[i].tower_data.Moter.ch01.Vrms + ' </P> '   + 
+            //         '<p> 減速機震動 = '+ obj2[i].tower_data.Fan.reducer + ' </P> '   + 
+            //         '<p> 靜壓機 = '+ obj2[i].tower_data.Fan.staticPressure + ' </P> '   +
+            //         '<p> 水流量 = '+ obj2[i].tower_data.Fan.waterFlow + ' </P> '   + 
+            //         '<p> 濕求溫度 = '+ obj2[i].tower_data.Fan.wetTemp + ' </P> '   + 
+            //         '<p> 水冷槽溫度1 = '+ obj2[i].tower_data.Fan.coldTempData1 + ' </P> '   +
+            //         '<p> 水冷槽溫度2 = '+ obj2[i].tower_data.Fan.coldTempData2 + ' </P><br> '   +
+            //         '<p> 馬達震動 </P> '+
+            //         '<p> ch001,通道1'+ obj2[i].tower_data.Moter.ch01.Vrms + ',' + obj2[i].tower_data.Moter.ch01.CV+' </P> '   + 
+            //         '<p> ch002,通道2'+ obj2[i].tower_data.Moter.ch02.Vrms + ',' + obj2[i].tower_data.Moter.ch02.CV+' </P> '
+            //         ;
+            
+                    inner =' <h1 class="ms-3"><i style="  color:#0174c7;" class="fas fa-file-signature me-1"></i>中控室DSC訊號</h1>\
+                    <div class="row px-0 mx-0">\
+                        <div class="card col-lg-2">\
+                            <p class="data-title fw-bold">'+ obj2[i].tower_data.DCS.hotTemp + '</p>\
+                            <div>\
+                                <h2 class="text-center">31.612</h2>\
+                                <P class="unit text-end">°C</P>\
                             </div>\
-                            <div class="card col-lg-2">\
-                                <p class="data-title fw-bold">出水溫度</p>\
-                                <div>\
-                                    <h2 class="text-center">'+ obj2[i].tower_data.DCS.coldTemp + '</h2>\
-                                    <P class="unit text-end">°C</P>\
-                                </div>\
+                        </div>\
+                        <div class="card col-lg-2">\
+                            <p class="data-title fw-bold">出水溫度</p>\
+                            <div>\
+                                <h2 class="text-center">'+ obj2[i].tower_data.DCS.coldTemp + '</h2>\
+                                <P class="unit text-end">°C</P>\
                             </div>\
-                            <div class="card col-lg-2">\
-                                <p class="data-title fw-bold ">水流量</p>\
-                                <div>\
-                                    <h2 class="text-center">'+ obj2[i].tower_data.DCS.waterFlow + '</h2>\
-                                    <P class="unit text-end">M³/H</P>\
-                                </div>\
+                        </div>\
+                        <div class="card col-lg-2">\
+                            <p class="data-title fw-bold ">水流量</p>\
+                            <div>\
+                                <h2 class="text-center">'+ obj2[i].tower_data.DCS.waterFlow + '</h2>\
+                                <P class="unit text-end">M³/H</P>\
                             </div>\
-                            <div class="card col-lg-2">\
-                                <p class="data-title fw-bold">風扇馬達電流</p>\
-                                <div>\
-                                    <h2 class="text-center">'+ obj2[i].tower_data.DCS.fanMotorCur + '</h2>\
-                                    <P class="unit text-end">A</P>\
-                                </div>\
+                        </div>\
+                        <div class="card col-lg-2">\
+                            <p class="data-title fw-bold">風扇馬達電流</p>\
+                            <div>\
+                                <h2 class="text-center">'+ obj2[i].tower_data.DCS.fanMotorCur + '</h2>\
+                                <P class="unit text-end">A</P>\
                             </div>\
-                            <div class="card col-lg-2">\
-                                <p class="data-title fw-bold ">風扇馬達轉速頻率</p>\
-                                <div>\
-                                    <h2 class="text-center">'+ obj2[i].tower_data.DCS.fanMotorSpeedFreq + '&ensp;</h2>\
-                                    <P class="unit text-end">Hz</P>\
-                                </div>\
+                        </div>\
+                        <div class="card col-lg-2">\
+                            <p class="data-title fw-bold ">風扇馬達轉速頻率</p>\
+                            <div>\
+                                <h2 class="text-center">'+ obj2[i].tower_data.DCS.fanMotorSpeedFreq + '&ensp;</h2>\
+                                <P class="unit text-end">Hz</P>\
+                            </div>\
+                        </div>\
+                    </div>\
+                    <div class="card mt-5">\
+                        <div class="row">\
+                            <div class="col-lg-6">\
+                                <h1><i style="  color:#0174c7;" class="fas fa-tachometer-alt me-2"></i>風扇震動</h1>\
+                            </div>\
+                            <div class="col-lg-6">\
+                                <h1><i style="  color:#0174c7;" class="fas fa-cogs me-2"></i>馬達震動</h1>\
                             </div>\
                         </div>\
-                        <div class="card mt-5">\
-                            <div class="row">\
+                        <div>\
+                            <div class="row px-0 mx-0">\
                                 <div class="col-lg-6">\
-                                    <h1><i style="  color:#0174c7;" class="fas fa-tachometer-alt me-2"></i>風扇震動</h1>\
+                                    <table class="table">\
+                                        <thead>\
+                                          <tr>\
+                                            <th scope="col">數據名稱</th>\
+                                            <th scope="col">值</th>\
+                                            <th scope="col">單位</th>\
+                                          </tr>\
+                                        </thead>\
+                                        <tbody>\
+                                          <tr>\
+                                            <td>馬達震動</td>\
+                                            <td>'+ obj2[i].tower_data.Moter.ch01.Vrms + '</td>\
+                                            <td>mm/s</td>\
+                                          </tr>\
+                                          <tr>\
+                                            <td>減速機震動</td>\
+                                            <td>'+ obj2[i].tower_data.Fan.reducer + '</td>\
+                                            <td>mm/s</td>\
+                                          </tr>\
+                                          <tr>\
+                                            <td>靜壓機</td>\
+                                            <td>'+ obj2[i].tower_data.Fan.staticPressure + '</td>\
+                                            <td>pa</td>\
+                                          </tr>\
+                                          <tr>\
+                                            <td>水流量</td>\
+                                            <td>'+ obj2[i].tower_data.Fan.waterFlow + '</td>\
+                                            <td>M³/H</td>\
+                                          </tr>\
+                                          <tr>\
+                                            <td>濕求溫度</td>\
+                                            <td>'+ obj2[i].tower_data.Fan.wetTemp + '</td>\
+                                            <td>°C</td>\
+                                          </tr>\
+                                          <tr>\
+                                            <td>水冷槽溫度1</td>\
+                                            <td>'+ obj2[i].tower_data.Fan.coldTempData1 + '</td>\
+                                            <td>°C</td>\
+                                          </tr>\
+                                          <tr>\
+                                            <td>水冷槽溫度2</td>\
+                                            <td>'+ obj2[i].tower_data.Fan.coldTempData2 + '</td>\
+                                            <td>°C</td>\
+                                          </tr>\
+                                        </tbody>\
+                                      </table>\
                                 </div>\
                                 <div class="col-lg-6">\
-                                    <h1><i style="  color:#0174c7;" class="fas fa-cogs me-2"></i>馬達震動</h1>\
-                                </div>\
-                            </div>\
-                            <div>\
-                                <div class="row px-0 mx-0">\
-                                    <div class="col-lg-6">\
-                                        <table class="table">\
-                                            <thead>\
-                                              <tr>\
-                                                <th scope="col">數據名稱</th>\
-                                                <th scope="col">值</th>\
-                                                <th scope="col">單位</th>\
-                                              </tr>\
-                                            </thead>\
-                                            <tbody>\
-                                              <tr>\
-                                                <td>馬達震動</td>\
-                                                <td>'+ obj2[i].tower_data.Moter.ch01.Vrms + '</td>\
-                                                <td>mm/s</td>\
-                                              </tr>\
-                                              <tr>\
-                                                <td>減速機震動</td>\
-                                                <td>'+ obj2[i].tower_data.Fan.reducer + '</td>\
-                                                <td>mm/s</td>\
-                                              </tr>\
-                                              <tr>\
-                                                <td>靜壓機</td>\
-                                                <td>'+ obj2[i].tower_data.Fan.staticPressure + '</td>\
-                                                <td>pa</td>\
-                                              </tr>\
-                                              <tr>\
-                                                <td>水流量</td>\
-                                                <td>'+ obj2[i].tower_data.Fan.waterFlow + '</td>\
-                                                <td>M³/H</td>\
-                                              </tr>\
-                                              <tr>\
-                                                <td>濕求溫度</td>\
-                                                <td>'+ obj2[i].tower_data.Fan.wetTemp + '</td>\
-                                                <td>°C</td>\
-                                              </tr>\
-                                              <tr>\
-                                                <td>水冷槽溫度1</td>\
-                                                <td>'+ obj2[i].tower_data.Fan.coldTempData1 + '</td>\
-                                                <td>°C</td>\
-                                              </tr>\
-                                              <tr>\
-                                                <td>水冷槽溫度2</td>\
-                                                <td>'+ obj2[i].tower_data.Fan.coldTempData2 + '</td>\
-                                                <td>°C</td>\
-                                              </tr>\
-                                            </tbody>\
-                                          </table>\
-                                    </div>\
-                                    <div class="col-lg-6">\
-                                        <div class="row px-0 mx-0">\
-                                            <div class="card col-lg-5">\
-                                                <p class="fw-bold ">ch001,通道1</p>\
-                                                <div>\
-                                                    <p class="text-center">'+ obj2[i].tower_data.Moter.ch01.Vrms + ',' + obj2[i].tower_data.Moter.ch01.CV+'</p>\
-                                                </div>\
+                                    <div class="row px-0 mx-0">\
+                                        <div class="card col-lg-5">\
+                                            <p class="fw-bold ">ch001,通道1</p>\
+                                            <div>\
+                                                <p class="text-center">'+ obj2[i].tower_data.Moter.ch01.Vrms + ',' + obj2[i].tower_data.Moter.ch01.CV+'</p>\
                                             </div>\
-                                            <div class="card col-lg-5">\
-                                                <p class="fw-bold ">ch002,通道2</p>\
-                                                <div>\
-                                                    <p class="text-center">'+ obj2[i].tower_data.Moter.ch02.Vrms + ',' + obj2[i].tower_data.Moter.ch02.CV+'</p>\
-                                                </div>\
+                                        </div>\
+                                        <div class="card col-lg-5">\
+                                            <p class="fw-bold ">ch002,通道2</p>\
+                                            <div>\
+                                                <p class="text-center">'+ obj2[i].tower_data.Moter.ch02.Vrms + ',' + obj2[i].tower_data.Moter.ch02.CV+'</p>\
                                             </div>\
-                                            <div class="card col-lg-5">\
-                                                <p class="fw-bold ">ch002,通道3</p>\
-                                                <div>\
-                                                    <p class="text-center">'+ obj2[i].tower_data.Moter.ch01.Vrms + ',' + obj2[i].tower_data.Moter.ch01.CV+'</p>\
-                                                </div>\
+                                        </div>\
+                                        <div class="card col-lg-5">\
+                                            <p class="fw-bold ">ch002,通道3</p>\
+                                            <div>\
+                                                <p class="text-center">'+ obj2[i].tower_data.Moter.ch01.Vrms + ',' + obj2[i].tower_data.Moter.ch01.CV+'</p>\
                                             </div>\
-                                            <div class="card col-lg-5">\
-                                                <p class="fw-bold ">ch002,通道4</p>\
-                                                <div>\
-                                                    <p class="text-center">'+ obj2[i].tower_data.Moter.ch02.Vrms + ',' + obj2[i].tower_data.Moter.ch02.CV+'</p>\
-                                                </div>\
+                                        </div>\
+                                        <div class="card col-lg-5">\
+                                            <p class="fw-bold ">ch002,通道4</p>\
+                                            <div>\
+                                                <p class="text-center">'+ obj2[i].tower_data.Moter.ch02.Vrms + ',' + obj2[i].tower_data.Moter.ch02.CV+'</p>\
                                             </div>\
                                         </div>\
                                     </div>\
                                 </div>\
                             </div>\
-                        </div>';
-                        
-            }
+                        </div>\
+                    </div>';
+                    
         }
-        document.getElementById("tower_info").innerHTML = inner;
     }
-    //document就是這html文件。
-    //getElementById是裡面的方法，參數給"college-list"抓到這id標籤列
+    document.getElementById("tower_info").innerHTML = inner;
+}
+
+//document就是這html文件。
+//getElementById是裡面的方法，參數給"college-list"抓到這id標籤列
+
+
+
+function start(){
+    companySelect=document.getElementById("company-list");
+    factorySelect=document.getElementById("factory-list");
+    departmentSelect=document.getElementById("department-list");
+    towerGroupSelect=document.getElementById("towerGroup-list");
+    var inner='';
+    var company_arr = new Array();
     
+    for(var i=0;i<obj.length;i++){
+        if(company_arr.indexOf(obj[i].company)==-1 && obj[i].able==1){
+            inner=inner+'<option value="'+obj[i].company+'">公司'+obj[i].company+'</option>';
+            company_arr.push(obj[i].company);
+        }
+    }
     
+    //innerHTML 賦值inner給這element屬性
+    companySelect.innerHTML=inner;
+}
+//製造一個字串，以html的語法填入院的陣列
+
 
-    function start(){
-        companySelect=document.getElementById("company-list");
-        factorySelect=document.getElementById("factory-list");
-        departmentSelect=document.getElementById("department-list");
-        towerGroupSelect=document.getElementById("towerGroup-list");
-        var inner='<option value=0>請選擇公司</option>';
-        var company_arr = new Array();
+
+function onChangeColumn1() {
+    companySelect=document.getElementById("company-list");
+    factorySelect=document.getElementById("factory-list");
+    departmentSelect=document.getElementById("department-list");
+    towerGroupSelect=document.getElementById("towerGroup-list");
+    factorySelect.innerHTML='';
+    let factory_arr = new Array();
+    let factory_inner = '';
+    for(var i=0;i<obj.length;i++){
         
-        for(var i=0;i<obj.length;i++){
-            if(company_arr.indexOf(obj[i].company)==-1 && obj[i].able==1){
-                inner=inner+'<option value="'+obj[i].company+'">公司'+obj[i].company+'</option>';
-                company_arr.push(obj[i].company);
+        if( companySelect.value == obj[i].company){
+            if(factory_arr.indexOf(obj[i].factory)==-1 && obj[i].able==1){
+                factory_inner=factory_inner+'<option value="'+obj[i].factory+'">工廠'+obj[i].factory+'</option>';
+                factory_arr.push(obj[i].factory);
             }
         }
-        
-        //innerHTML 賦值inner給這element屬性
-        companySelect.innerHTML=inner;
+        //alert(companySelect.value);
     }
-    //製造一個字串，以html的語法填入院的陣列
-    
     
+    factorySelect.innerHTML=factory_inner;
+}
 
-    function onChangeColumn1() {
-        companySelect=document.getElementById("company-list");
-        factorySelect=document.getElementById("factory-list");
-        departmentSelect=document.getElementById("department-list");
-        towerGroupSelect=document.getElementById("towerGroup-list");
-        factorySelect.innerHTML='<option value=0>請選擇工廠</option>';
-        let factory_arr = new Array();
-        let factory_inner = '<option value=0>請選擇工廠</option>';
-        for(var i=0;i<obj.length;i++){
-            
-            if( companySelect.value == obj[i].company){
-                if(factory_arr.indexOf(obj[i].factory)==-1 && obj[i].able==1){
-                    factory_inner=factory_inner+'<option value="'+obj[i].factory+'">工廠'+obj[i].factory+'</option>';
-                    factory_arr.push(obj[i].factory);
-                }
+function onChangeColumn2() {
+    companySelect=document.getElementById("company-list");
+    factorySelect=document.getElementById("factory-list");
+    departmentSelect=document.getElementById("department-list");
+    towerGroupSelect=document.getElementById("towerGroup-list");
+    departmentSelect.innerHTML='';
+    let department_arr = new Array();
+    let department_inner = '';
+    for(var i=0;i<obj.length;i++){
+        if( companySelect.value == obj[i].company && factorySelect.value == obj[i].factory){
+            if(department_arr.indexOf(obj[i].department)==-1 && obj[i].able==1){
+                department_inner=department_inner+'<option value="'+obj[i].department+'">廠區'+obj[i].department+'</option>';
+                department_arr.push(obj[i].department);
             }
-            //alert(companySelect.value);
         }
         
-        factorySelect.innerHTML=factory_inner;
     }
+    document.getElementById("department-list").innerHTML=department_inner;
+}
 
-    function onChangeColumn2() {
-        companySelect=document.getElementById("company-list");
-        factorySelect=document.getElementById("factory-list");
-        departmentSelect=document.getElementById("department-list");
-        towerGroupSelect=document.getElementById("towerGroup-list");
-        departmentSelect.innerHTML='<option value=0>請選擇廠區</option>';
-        let department_arr = new Array();
-        let department_inner = '<option value=0>請選擇廠區</option>';
-        for(var i=0;i<obj.length;i++){
-            if( companySelect.value == obj[i].company && factorySelect.value == obj[i].factory){
-                if(department_arr.indexOf(obj[i].department)==-1 && obj[i].able==1){
-                    department_inner=department_inner+'<option value="'+obj[i].department+'">廠區'+obj[i].department+'</option>';
-                    department_arr.push(obj[i].department);
+function onChangeColumn3() {
+    companySelect=document.getElementById("company-list");
+    factorySelect=document.getElementById("factory-list");
+    departmentSelect=document.getElementById("department-list");
+    towerGroupSelect=document.getElementById("towerGroup-list");
+    towerGroupSelect.innerHTML='';
+    let towerGroup_inner = '';
+    for(var i=0;i<obj.length;i++){
+        if( companySelect.value == obj[i].company && factorySelect.value == obj[i].factory && departmentSelect.value == obj[i].department){
+            if( obj[i].able==1){
+                for(var ii=0;ii<obj[i].group.length;ii++){
+                    towerGroup_inner=towerGroup_inner+'<option value="'+obj[i].group[ii]+'">機組'+obj[i].group[ii]+'</option>';
                 }
             }
-            
         }
-        document.getElementById("department-list").innerHTML=department_inner;
+        
     }
-
-    function onChangeColumn3() {
-        companySelect=document.getElementById("company-list");
-        factorySelect=document.getElementById("factory-list");
-        departmentSelect=document.getElementById("department-list");
-        towerGroupSelect=document.getElementById("towerGroup-list");
-        towerGroupSelect.innerHTML='<option value=0>請選擇機組</option>';
-        let towerGroup_inner = '<option value=0>請選擇機組</option>';
-        for(var i=0;i<obj.length;i++){
-            if( companySelect.value == obj[i].company && factorySelect.value == obj[i].factory && departmentSelect.value == obj[i].department){
-                if( obj[i].able==1){
-                    for(var ii=0;ii<obj[i].group.length;ii++){
-                        towerGroup_inner=towerGroup_inner+'<option value="'+obj[i].group[ii]+'">機組'+obj[i].group[ii]+'</option>';
-                    }
-                }
-            }
-            
-        }
-        document.getElementById("towerGroup-list").innerHTML= towerGroup_inner;
-    }
+    document.getElementById("towerGroup-list").innerHTML= towerGroup_inner;
+}

static/tower2.js

@@ -0,0 +1,159 @@
+var xhr = new XMLHttpRequest();
+    var url = "tower/org";
+    obj="";
+    xhr.open("GET",url);
+    xhr.onload = function(){
+        obj = JSON.parse(xhr.responseText);
+        //insertHTML();
+        start();
+    };
+    xhr.send();
+
+    function insertHTML(data){
+        
+        var aria = document.getElementById('test');
+        var tower_select = document.getElementById('tower');
+        //aria.innerHTML=data[0].tower_name;
+        var inner='<option value=0>請選擇水塔</option>';
+        for(var i=0;i<data.length;i++){
+            inner=inner+'<option value="'+data[i].tower_name+'">'+data[i].tower_name+'</option>';
+        }
+        tower_select.innerHTML=inner;
+    }
+    obj2 = "";
+    function click_button() {
+        //alert("click");
+        companySelect=document.getElementById("company-list");
+        factorySelect=document.getElementById("factory-list");
+        departmentSelect=document.getElementById("department-list");
+        towerGroupSelect=document.getElementById("towerGroup-list");
+        if(companySelect.value!=0 && factorySelect.value!=0 && departmentSelect.value!=0 && towerGroupSelect.value!=0){
+            var url2 = "tower/?company="+ companySelect.value + "&factory=" +  factorySelect.value + "&department=" +departmentSelect.value + "&towerGroup=" +towerGroupSelect.value ;
+            var xhr2 = new XMLHttpRequest();
+            xhr2.open("GET",url2);
+            xhr2.onload = function(){
+                obj2 = JSON.parse(xhr2.responseText);
+                insertHTML(obj2);
+            };
+            xhr2.send();
+        }
+        
+      }
+
+    function tower_info(){
+        towerSelect=document.getElementById("tower");
+        tower = towerSelect.value;
+        inner = "";
+        for(var i=0;i<obj2.length;i++){
+            if(obj2[i].tower_name == tower){
+                inner = '<p> DCS </P> '+
+                        '<p> 入水溫度 = '+ obj2[i].tower_data.DCS.hotTemp + ' </P> '   + 
+                        '<p> 出水溫度 = '+ obj2[i].tower_data.DCS.coldTemp + ' </P> '   + 
+                        '<p> 水流量 = '+ obj2[i].tower_data.DCS.waterFlow + ' </P> '   + 
+                        '<p> 風扇馬達電流 = '+ obj2[i].tower_data.DCS.fanMotorCur + ' </P> '   + 
+                        '<p> 風扇馬達轉速頻率 = '+ obj2[i].tower_data.DCS.fanMotorSpeedFreq + ' </P><br> '   + 
+                        '<p> 風扇震動 </P> '+
+                        '<p> 馬達震動 = '+ obj2[i].tower_data.Moter.ch01.Vrms + ' </P> '   + 
+                        '<p> 減速機震動 = '+ obj2[i].tower_data.Fan.reducer + ' </P> '   + 
+                        '<p> 靜壓機 = '+ obj2[i].tower_data.Fan.staticPressure + ' </P> '   +
+                        '<p> 水流量 = '+ obj2[i].tower_data.Fan.waterFlow + ' </P> '   + 
+                        '<p> 濕求溫度 = '+ obj2[i].tower_data.Fan.wetTemp + ' </P> '   + 
+                        '<p> 水冷槽溫度1 = '+ obj2[i].tower_data.Fan.coldTempData1 + ' </P> '   +
+                        '<p> 水冷槽溫度2 = '+ obj2[i].tower_data.Fan.coldTempData2 + ' </P><br> '   +
+                        '<p> 馬達震動 </P> '+
+                        '<p> ch001,通道1'+ obj2[i].tower_data.Moter.ch01.Vrms + ',' + obj2[i].tower_data.Moter.ch01.CV+' </P> '   + 
+                        '<p> ch002,通道2'+ obj2[i].tower_data.Moter.ch02.Vrms + ',' + obj2[i].tower_data.Moter.ch02.CV+' </P> '
+                        ;
+            }
+        }
+        console.log(obj2[0].tower_data.DCS.hotTemp);
+        document.getElementById("tower_info").innerHTML = inner;
+    }
+    //document就是這html文件。
+    //getElementById是裡面的方法，參數給"college-list"抓到這id標籤列
+    
+    
+
+    function start(){
+        companySelect=document.getElementById("company-list");
+        factorySelect=document.getElementById("factory-list");
+        departmentSelect=document.getElementById("department-list");
+        towerGroupSelect=document.getElementById("towerGroup-list");
+        var inner='<option value=0>請選擇公司</option>';
+        var company_arr = new Array();
+        
+        for(var i=0;i<obj.length;i++){
+            if(company_arr.indexOf(obj[i].company)==-1 && obj[i].able==1){
+                inner=inner+'<option value="'+obj[i].company+'">公司'+obj[i].company+'</option>';
+                company_arr.push(obj[i].company);
+            }
+        }
+        
+        //innerHTML 賦值inner給這element屬性
+        companySelect.innerHTML=inner;
+    }
+    //製造一個字串，以html的語法填入院的陣列
+    
+    
+
+    function onChangeColumn1() {
+        companySelect=document.getElementById("company-list");
+        factorySelect=document.getElementById("factory-list");
+        departmentSelect=document.getElementById("department-list");
+        towerGroupSelect=document.getElementById("towerGroup-list");
+        factorySelect.innerHTML='<option value=0>請選擇工廠</option>';
+        let factory_arr = new Array();
+        let factory_inner = '<option value=0>請選擇工廠</option>';
+        for(var i=0;i<obj.length;i++){
+            
+            if( companySelect.value == obj[i].company){
+                if(factory_arr.indexOf(obj[i].factory)==-1 && obj[i].able==1){
+                    factory_inner=factory_inner+'<option value="'+obj[i].factory+'">工廠'+obj[i].factory+'</option>';
+                    factory_arr.push(obj[i].factory);
+                }
+            }
+            //alert(companySelect.value);
+        }
+        
+        factorySelect.innerHTML=factory_inner;
+    }
+
+    function onChangeColumn2() {
+        companySelect=document.getElementById("company-list");
+        factorySelect=document.getElementById("factory-list");
+        departmentSelect=document.getElementById("department-list");
+        towerGroupSelect=document.getElementById("towerGroup-list");
+        departmentSelect.innerHTML='<option value=0>請選擇廠區</option>';
+        let department_arr = new Array();
+        let department_inner = '<option value=0>請選擇廠區</option>';
+        for(var i=0;i<obj.length;i++){
+            if( companySelect.value == obj[i].company && factorySelect.value == obj[i].factory){
+                if(department_arr.indexOf(obj[i].department)==-1 && obj[i].able==1){
+                    department_inner=department_inner+'<option value="'+obj[i].department+'">廠區'+obj[i].department+'</option>';
+                    department_arr.push(obj[i].department);
+                }
+            }
+            
+        }
+        document.getElementById("department-list").innerHTML=department_inner;
+    }
+
+    function onChangeColumn3() {
+        companySelect=document.getElementById("company-list");
+        factorySelect=document.getElementById("factory-list");
+        departmentSelect=document.getElementById("department-list");
+        towerGroupSelect=document.getElementById("towerGroup-list");
+        towerGroupSelect.innerHTML='<option value=0>請選擇機組</option>';
+        let towerGroup_inner = '<option value=0>請選擇機組</option>';
+        for(var i=0;i<obj.length;i++){
+            if( companySelect.value == obj[i].company && factorySelect.value == obj[i].factory && departmentSelect.value == obj[i].department){
+                if( obj[i].able==1){
+                    for(var ii=0;ii<obj[i].group.length;ii++){
+                        towerGroup_inner=towerGroup_inner+'<option value="'+obj[i].group[ii]+'">機組'+obj[i].group[ii]+'</option>';
+                    }
+                }
+            }
+            
+        }
+        document.getElementById("towerGroup-list").innerHTML= towerGroup_inner;
+    }