update

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5502
+}

static/home.js

@@ -57,7 +57,7 @@ function company_show(){
     for(var i=0;i<obj[1].length;i++){
         if(company_arr.indexOf(obj[1][i].company)==-1){
             inner+="<button class='btn text-white' id='company " +obj[1][i].company+ "' onclick=\"factory_show(\'"+obj[1][i].company+"\');\"";
-            inner += ">公司"+obj[1][i].company+"</button><br>";
+            inner += ">公司"+obj[1][i].company+"</button>";
             company_arr.push(obj[1][i].company);
             console.log(obj[1][i].company);
         }
@@ -81,21 +81,43 @@ function company_health(company_arr){
     }
 }
 
+// function factory_show(company){
+//     var inner='<p class="fw-bold">廠區資訊:</p>';
+//     var factory_arr = new Array();
+//     for(var i=0;i<obj[1].length;i++){
+//         if(factory_arr.indexOf(obj[1][i].factory)==-1 && obj[1][i].company==company){
+//             inner+="<button class='btn text-white m-1' id='factory " +obj[1][i].factory+ "' onclick=\"department_show(\'"+obj[1][i].company+"\',\'"+obj[1][i].factory+"\');\"";
+//             inner += ">廠區"+obj[1][i].factory+"</button><br>";
+//             factory_arr.push(obj[1][i].factory);
+//         }
+//     }
+//     //測試用
+//     inner+="<button class='btn btn btn-outline-success m-1' id='factory B' onclick=\"department_show(\'"+obj[1][0].company+"\',\'B\');\"";
+//     inner += ">廠區B</button><br>";
+//     inner+="<button class='btn btn btn-outline-success m-1' id='factory C' onclick=\"department_show(\'"+obj[1][0].company+"\',\'C\');\"";
+//     inner += ">廠區C</button><br>";
+//     document.getElementById('company').innerHTML="";
+//     document.getElementById('company_name').innerHTML="<button type='button' class='btn btn-primary m-1' onclick=\"company_show();\">返回</button> 公司"+ company + "";
+//     document.getElementById('factory_select').innerHTML=inner;
+//     factory_health(factory_arr);
+//     document.getElementById("map").style.display="";
+    
+// }
 function factory_show(company){
-    var inner='<p>廠區資訊</p>';
+    var inner='<p class="fw-bold">廠區資訊</p>';
     var factory_arr = new Array();
     for(var i=0;i<obj[1].length;i++){
         if(factory_arr.indexOf(obj[1][i].factory)==-1 && obj[1][i].company==company){
-            inner+="<button class='btn text-white m-1' id='factory " +obj[1][i].factory+ "' onclick=\"department_show(\'"+obj[1][i].company+"\',\'"+obj[1][i].factory+"\');\"";
-            inner += ">廠區"+obj[1][i].factory+"</button><br>";
+            inner+="<button type='button' class='btn text-white m-1' id='factory " +obj[1][i].factory+ "' onclick=\"department_show(\'"+obj[1][i].company+"\',\'"+obj[1][i].factory+"\');\"";
+            inner += ">廠區"+obj[1][i].factory+"</button>";
             factory_arr.push(obj[1][i].factory);
         }
     }
     //測試用
-    inner+="<button class='btn btn btn-outline-success m-1' id='factory B' onclick=\"department_show(\'"+obj[1][0].company+"\',\'B\');\"";
-    inner += ">廠區B</button><br>";
-    inner+="<button class='btn btn btn-outline-success m-1' id='factory C' onclick=\"department_show(\'"+obj[1][0].company+"\',\'C\');\"";
-    inner += ">廠區C</button><br>";
+    inner+="<button type='button' class='btn btn btn-outline-success m-1' id='factory B' onclick=\"department_show(\'"+obj[1][0].company+"\',\'B\');\"";
+    inner += ">廠區B</button>";
+    inner+="<button type='button' class='btn btn btn-outline-success m-1' id='factory C' onclick=\"department_show(\'"+obj[1][0].company+"\',\'C\');\"";
+    inner += ">廠區C</button>";
     document.getElementById('company').innerHTML="";
     document.getElementById('company_name').innerHTML="<button type='button' class='btn btn-primary m-1' onclick=\"company_show();\">返回</button> 公司"+ company + "";
     document.getElementById('factory_select').innerHTML=inner;
@@ -123,7 +145,7 @@ function department_show(company,factory){
     var department_arr = new Array();
     for(var i=0;i<obj[1].length;i++){
         if(department_arr.indexOf(obj[1][i].department)==-1 && obj[1][i].company==company&& obj[1][i].factory==factory){
-            inner+='<option value="'+obj[1][i].department+'">課'+obj[1][i].department+'</option>';
+            inner+='<option selected value="'+obj[1][i].department+'">課'+obj[1][i].department+'</option>';
             department_arr.push(obj[1][i].department);
         }
     }
@@ -146,11 +168,11 @@ function department_show(company,factory){
 
 function department_change(){
     console.log("change");
-    var inner='<table style="font-size: 16px;" class="table text-center"><thead><tr><th>機組</th><th>健康狀態</th><th>查看</th></tr></thead>';
+    var inner='<table style="font-size: 16px;" class="table text-center"><thead><tr><th>機組</th><th>健康狀態</th><th>機組狀態</th></tr></thead>';
     var tower_group_arr = new Array();
     for(var i=0;i<obj[1].length;i++){
         if(tower_group_arr.indexOf(obj[1][i].group)==-1 && obj[1][i].company==document.getElementById('company_text').innerHTML&& obj[1][i].factory==document.getElementById('factory_text').innerHTML&& obj[1][i].department==document.getElementById("department_list").value){
-            inner+='<tr><td>' + obj[1][i].group + '</td><td>健康</td><td><button class="btn btn-primary m-1" onclick=\"towerGroup_show();\">更多</button></td></tr>' ;
+            inner+='<tr><td>' + obj[1][i].group + '</td><td>健康</td><td><button class="btn btn-primary m-1" onclick=\"towerGroup_show();\">查看</button></td></tr><tr><td>2</td><td>健康</td><td><button class="btn btn-primary m-1" onclick=\"towerGroup_show();\">查看</button></td></tr><tr><td>3</td><td>健康</td><td><button class="btn btn-primary m-1" onclick=\"towerGroup_show();\">查看</button></td></tr>' ;
             tower_group_arr.push(obj[1][i].group);
         }
     }
@@ -175,10 +197,10 @@ function towerGroup_show(){
 
 function tower(tower_group){
     //顯示tower
-    var inner= '<p>機組'+tower_group +'</p><table style="font-size: 16px;" class="table text-center"><tr><th>設備</th><th>馬達效能</th><th>查看</th></tr>';
+    var inner= '<p class="fw-bold">機組'+tower_group +'</p><table style="font-size: 16px;" class="table text-center"><tr><th>設備</th><th>馬達效能</th><th>機組狀態</th></tr>';
     for(var i=0;i<obj[1].length;i++){
         if(obj[1][i].company==document.getElementById('company_text').innerHTML&& obj[1][i].factory==document.getElementById('factory_text').innerHTML&& obj[1][i].department==document.getElementById("department_text").innerHTML&&obj[1][i].group==tower_group){
-            inner+='<tr><td>' + obj[1][i].tower + '</td><td>健康</td><td>更多</td></tr>';
+            inner+='<tr><td>' + obj[1][i].tower + '</td><td>健康</td><td><button class="btn btn-primary m-1">查看</button></td></tr>';
         }
     }
 

static/index.css

@@ -202,7 +202,7 @@ font-size: 2.4vmin;
 .card{
 margin: 2.3vmin;
 box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
-border-radius:15px;
+border-radius:10px;
 padding: 15px;
 }
 .unit{
@@ -337,13 +337,20 @@ h1{
   }
 
   #app {
-    width: 400px;
-    height: 400px;
+    width: 100%;
+    height: 300px;
+    float: left;
   }
-
-  #system-table{
-    border:none !important;
+  #app2 {
+    width: 100%;
+    height: 300px;
+    float: left;
   }
-  th{
+  #app3 {
+    width: 100%;
+    height: 300px;
+    float: left;
+  }
+  #system-table{
     border:none !important;
   }

static/tower.js

@@ -1,8 +1,8 @@
 var xhr = new XMLHttpRequest();
 var url = "tower/org";
-obj="";
-xhr.open("GET",url);
-xhr.onload = function(){
+obj = "";
+xhr.open("GET", url);
+xhr.onload = function () {
     obj = JSON.parse(xhr.responseText);
     //insertHTML();
     start();
@@ -15,52 +15,52 @@ xhr.onload = function(){
 };
 xhr.send();
 
-function insertHTML(data){
-    
+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++){
-        if(i>=3){
-            inner=inner+'<button type="button" class="btn btn-primary m-1" onclick="tower_info(\''+data[0].tower_name+'\');">'+data[i].tower_name+'</button>';
+    var inner = '';
+    for (var i = 0; i < data.length; i++) {
+        if (i >= 3) {
+            inner = inner + '<button type="button" class="btn btn-primary m-1" onclick="tower_info(\'' + data[0].tower_name + '\');">' + data[i].tower_name + '</button>';
         }
-        else{
-            inner=inner+'<button type="button" class="btn btn-primary m-1" onclick="tower_info(\''+data[i].tower_name+'\');">'+data[i].tower_name+'</button>';
+        else {
+            inner = inner + '<button type="button" class="btn btn-primary m-1" onclick="tower_info(\'' + data[i].tower_name + '\');">' + data[i].tower_name + '</button>';
         }
-        
+
         console.log(inner);
     }
-    tower_select.innerHTML=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 ;
+    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(){
+        xhr2.open("GET", url2);
+        xhr2.onload = function () {
             obj2 = JSON.parse(xhr2.responseText);
             insertHTML(obj2);
             tower_info(obj2[0].tower_name);
         };
         xhr2.send();
     }
-    
-  }
+
+}
+
 
 
-  
-function tower_info(tower_str){
+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){
+    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> '   + 
@@ -79,13 +79,13 @@ function tower_info(tower_str){
             //         '<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>\
+
+            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">入水溫度</p>\
                             <div>\
-                                <h2 class="text-center">'+ obj2[i].tower_data.DCS.hotTemp +'</h2>\
+                                <h2 class="text-center">'+ obj2[i].tower_data.DCS.hotTemp + '</h2>\
                                 <P class="unit text-end">°C</P>\
                             </div>\
                         </div>\
@@ -130,7 +130,7 @@ function tower_info(tower_str){
                         <div>\
                             <div class="row px-0 mx-0">\
                                 <div class="col-lg-6">\
-                                    <table class="table">\
+                                    <table style="font-size:16px;" class="table">\
                                         <thead>\
                                           <tr>\
                                             <th scope="col">數據名稱</th>\
@@ -182,25 +182,25 @@ function tower_info(tower_str){
                                         <div class="card col-lg-5">\
                                             <p class="fw-bold ">ch001,通道1</p>\
                                             <div>\
-                                                <p class="text-center">'+ obj2[i].tower_data.Moter[0].Vrms + ',' + obj2[i].tower_data.Moter[0].CV+'</p>\
+                                                <p class="text-center">'+ obj2[i].tower_data.Moter[0].Vrms + ',' + obj2[i].tower_data.Moter[0].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[1].Vrms + ',' + obj2[i].tower_data.Moter[1].CV+'</p>\
+                                                <p class="text-center">'+ obj2[i].tower_data.Moter[1].Vrms + ',' + obj2[i].tower_data.Moter[1].CV + '</p>\
                                             </div>\
                                         </div>\
                                         <div class="card col-lg-5">\
                                             <p class="fw-bold ">ch003,通道3</p>\
                                             <div>\
-                                                <p class="text-center">'+ obj2[i].tower_data.Moter[2].Vrms + ',' + obj2[i].tower_data.Moter[2].CV+'</p>\
+                                                <p class="text-center">'+ obj2[i].tower_data.Moter[2].Vrms + ',' + obj2[i].tower_data.Moter[2].CV + '</p>\
                                             </div>\
                                         </div>\
                                         <div class="card col-lg-5">\
                                             <p class="fw-bold ">ch004,通道4</p>\
                                             <div>\
-                                                <p class="text-center">'+ obj2[i].tower_data.Moter[3].Vrms + ',' + obj2[i].tower_data.Moter[3].CV+'</p>\
+                                                <p class="text-center">'+ obj2[i].tower_data.Moter[3].Vrms + ',' + obj2[i].tower_data.Moter[3].CV + '</p>\
                                             </div>\
                                         </div>\
                                     </div>\
@@ -208,13 +208,13 @@ function tower_info(tower_str){
                             </div>\
                         </div>\
                     </div>';
-                    console.log(obj2[i].tower_data.Moter[3].Vrms);
+            console.log(obj2[i].tower_data.Moter[3].Vrms);
         }
     }
     document.getElementById("tower_info").innerHTML = inner;
     console.log(inner);
     get_tower_perfrom('dev001');
-    
+
 }
 
 //document就是這html文件。
@@ -222,100 +222,100 @@ function tower_info(tower_str){
 
 
 
-function start(){
-    companySelect=document.getElementById("company-list");
-    factorySelect=document.getElementById("factory-list");
-    departmentSelect=document.getElementById("department-list");
-    towerGroupSelect=document.getElementById("towerGroup-list");
-    var inner='';
+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>';
+
+    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;
+    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='';
+    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++){
-        
-        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>';
+    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;
+
+    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='';
+    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>';
+    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;
+    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='';
+    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>';
+    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;
 }
 
 
 
-function get_tower_perfrom(tower_id){
+function get_tower_perfrom(tower_id) {
 
     var xhr3 = new XMLHttpRequest();
-    var url3 = "tower/performance/"+tower_id;
+    var url3 = "tower/performance/" + tower_id;
     console.log("sss");
-    obj3="";
-    xhr3.open("GET",url3);
-    xhr3.onload = function(){
+    obj3 = "";
+    xhr3.open("GET", url3);
+    xhr3.onload = function () {
         obj3 = JSON.parse(xhr3.responseText);
         console.log(obj3);
         tower_perform_show(obj3);
@@ -324,42 +324,182 @@ function get_tower_perfrom(tower_id){
     xhr3.send();
 }
 
-function tower_perform_show(obj_tmp){
-    inner = "設計條件<br>" +
-            "水流量: " + obj_tmp[0].designWFR + "<br>" +
-            "風車馬力: " + obj_tmp[0].designHP + "<br>" +
-            "額定電流: " + obj_tmp[0].designCurrent + "<br>" +
-            "入水溫度: " + obj_tmp[0].designHWT + "<br>" +
-            "出水溫度: " + obj_tmp[0].designCWT + "<br>" +
-            "濕求溫度: " + obj_tmp[0].designWBT + "<br>" +
-            "測試狀態<br> " +
-            "水流量: " + obj_tmp[0].testWFR + "<br>" +
-            "風車馬力: " + obj_tmp[0].testBHP + "<br>" +
-            "運轉電流: " + obj_tmp[0].testCurrent + "<br>" +
-            "入水溫度: " + obj_tmp[0].testHWT + "<br>" +
-            "出水溫度: " + obj_tmp[0].testCorrectCWT + "<br>" +
-            "濕球溫度: " + obj_tmp[0].testWBT + "<br>" +
-            "風速: " + obj_tmp[0].testWindSpeed + "<br>" +
-            "補充水量: " + obj_tmp[0].testMakeupWFR + "<br>" +
-            "補充水溫: " + obj_tmp[0].testMakeupCWT + "<br>" +
-            "CORRECT CWT: " + obj_tmp[0].testCorrectCWT + "<br>" +
-            "COLLING RANGE: " + obj_tmp[0].testCoolingRange + "<br>" ;
-
-    document.getElementById('tower_perfrom').innerHTML=inner;
+function tower_perform_show(obj_tmp) {
+    inner = "<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='row px-0  mx-0'>\
+                    <div class='col-lg-6'>\
+                    <table style='font-size:16px;' class='table'>\
+                    <thead>\
+                    <tr>\
+                    <th scope='col'>數據名稱</th>\
+                    <th scope='col'>值</th>\
+                    <th scope='col'>單位</th>\
+                    </tr>\
+                    </thead>\
+                    <tbody>\
+                    <tr>\
+                        <td>水流量</td>\
+                        <td>" + obj_tmp[0].designWFR + "</td>\
+                        <td>M³/H</td>\
+                    </tr>\
+                    <tr>\
+                        <td>風車馬力</td>\
+                        <td>" + obj_tmp[0].designHP + "</td>\
+                        <td>mm/s</td>\
+                    </tr>\
+                    <tr>\
+                        <td>額定電流</td>\
+                        <td>" + obj_tmp[0].designCurrent + "</td>\
+                        <td>A</td>\
+                    </tr>\
+                    <tr>\
+                        <td>入水溫度</td>\
+                        <td>" + obj_tmp[0].designHWT + "</td>\
+                        <td>°C</td>\
+                    </tr>\
+                    <tr>\
+                    <td>出水溫度</td>\
+                        <td>" + obj_tmp[0].designCWT + "</td>\
+                        <td>°C</td>\
+                    </tr>\
+                    <tr>\
+                        <td>濕求溫度</td>\
+                        <td>" + obj_tmp[0].designWBT + "</td>\
+                        <td>°C</td>\
+                    </tr>\
+                    </tbody>\
+                    </table>\
+                    </div>\
+                    <div class='col-lg-6'>\
+                    <table style='font-size:16px;' class='table'>\
+                    <thead>\
+                    <tr>\
+                    <th scope='col'>數據名稱</th>\
+                    <th scope='col'>值</th>\
+                    <th scope='col'>單位</th>\
+                    </tr>\
+                    </thead>\
+                    <tbody>\
+                    <tr>\
+                        <td>水流量</td>\
+                        <td>" + obj_tmp[0].testWFR + "</td>\
+                        <td>M³/H</td>\
+                    </tr>\
+                    <tr>\
+                        <td>風車馬力</td>\
+                        <td> " + obj_tmp[0].testBHP + "</td>\
+                        <td>mm/s</td>\
+                    </tr>\
+                    <tr>\
+                        <td>運轉電流</td>\
+                        <td>" + obj_tmp[0].testCurrent + "</td>\
+                        <td>A</td>\
+                    </tr>\
+                    <tr>\
+                        <td>入水溫度</td>\
+                        <td>" + obj_tmp[0].testHWT + "</td>\
+                        <td>°C</td>\
+                    </tr>\
+                    <tr>\
+                    <td>出水溫度</td>\
+                        <td>" + obj_tmp[0].testCorrectCWT + "</td>\
+                        <td>°C</td>\
+                    </tr>\
+                    <tr>\
+                        <td>濕求溫度</td>\
+                        <td>" + obj_tmp[0].testWBT + "</td>\
+                        <td>°C</td>\
+                    </tr>\
+                    <tr>\
+                        <td>風速</td>\
+                        <td>" + obj_tmp[0].testWindSpeed + "</td>\
+                        <td>°C</td>\
+                    </tr>\
+                    <tr>\
+                        <td>補充水量</td>\
+                        <td>" + obj_tmp[0].testMakeupWFR + "</td>\
+                        <td>°C</td>\
+                    </tr>\
+                    <tr>\
+                        <td>補充水溫</td>\
+                        <td>" + obj_tmp[0].testMakeupCWT + "</td>\
+                        <td>°C</td>\
+                    </tr>\
+                    <tr>\
+                        <td>CORRECT CWT</td>\
+                        <td> " + obj_tmp[0].testCorrectCWT + "</td>\
+                        <td>°C</td>\
+                    </tr>\
+                    <tr>\
+                        <td>COLLING RANGE</td>\
+                         <td> " + obj_tmp[0].testCoolingRange + "</td>\
+                         <td>°C</td>\
+                     </tr>\
+                    </tbody>\
+                    </table>\
+                    </div>\
+                </div>\
+            </div>\
+        </div>" ;
+        // "測試狀態<br> " +
+        // "水流量: " + obj_tmp[0].testWFR + "<br>" +
+        // "風車馬力: " + obj_tmp[0].testBHP + "<br>" +
+        // "運轉電流: " + obj_tmp[0].testCurrent + "<br>" +
+        // "入水溫度: " + obj_tmp[0].testHWT + "<br>" +
+        // "出水溫度: " + obj_tmp[0].testCorrectCWT + "<br>" +
+        // "濕球溫度: " + obj_tmp[0].testWBT + "<br>" +
+        // "風速: " + obj_tmp[0].testWindSpeed + "<br>" +
+        // "補充水量: " + obj_tmp[0].testMakeupWFR + "<br>" +
+        // "補充水溫: " + obj_tmp[0].testMakeupCWT + "<br>" +
+        // "CORRECT CWT: " + obj_tmp[0].testCorrectCWT + "<br>" +
+        // "COLLING RANGE: " + obj_tmp[0].testCoolingRange + "<br>";
+
+    document.getElementById('tower_perfrom').innerHTML = inner;
 
 }
+// function tower_perform_show(obj_tmp){
+//     inner = "設計條件<br>" +
+//             "水流量: " + obj_tmp[0].designWFR + "<br>" +
+//             "風車馬力: " + obj_tmp[0].designHP + "<br>" +
+//             "額定電流: " + obj_tmp[0].designCurrent + "<br>" +
+//             "入水溫度: " + obj_tmp[0].designHWT + "<br>" +
+//             "出水溫度: " + obj_tmp[0].designCWT + "<br>" +
+//             "濕求溫度: " + obj_tmp[0].designWBT + "<br>" +
+//             "測試狀態<br> " +
+//             "水流量: " + obj_tmp[0].testWFR + "<br>" +
+//             "風車馬力: " + obj_tmp[0].testBHP + "<br>" +
+//             "運轉電流: " + obj_tmp[0].testCurrent + "<br>" +
+//             "入水溫度: " + obj_tmp[0].testHWT + "<br>" +
+//             "出水溫度: " + obj_tmp[0].testCorrectCWT + "<br>" +
+//             "濕球溫度: " + obj_tmp[0].testWBT + "<br>" +
+//             "風速: " + obj_tmp[0].testWindSpeed + "<br>" +
+//             "補充水量: " + obj_tmp[0].testMakeupWFR + "<br>" +
+//             "補充水溫: " + obj_tmp[0].testMakeupCWT + "<br>" +
+//             "CORRECT CWT: " + obj_tmp[0].testCorrectCWT + "<br>" +
+//             "COLLING RANGE: " + obj_tmp[0].testCoolingRange + "<br>" ;
+
+//     document.getElementById('tower_perfrom').innerHTML=inner;
+
+// }
 
 get_predict();
-function get_predict(){
+function get_predict() {
     var xhr = new XMLHttpRequest();
     var url = "channel_predict/dev001/ch01";
-    obj3="";
+    obj3 = "";
 
-    xhr.open("GET",url);
-    xhr.onload = function(){
+    xhr.open("GET", url);
+    xhr.onload = function () {
         obj3 = JSON.parse(xhr.responseText);
         labels = new Array();
-        for(var i=0;i<obj3.data.length;i++){
+        for (var i = 0; i < obj3.data.length; i++) {
             labels.push(i);
         }
         console.log(obj3)
@@ -371,35 +511,36 @@ function get_predict(){
                 backgroundColor: "#ea464d",
                 borderColor: "#ea464d",
                 borderWidth: 5,
-                data:obj3.data, // 資料
+                data: obj3.data, // 資料
                 fill: false, // 是否填滿色彩
             },]
         };
         var ctx = document.getElementById("channel_predict").getContext("2d");
-        drawLineCanvas(ctx,Data);
+        drawLineCanvas(ctx, Data);
     };
     xhr.send();
 }
-function drawLineCanvas(ctx,data) {
+function drawLineCanvas(ctx, data) {
     window.myLine = new Chart(ctx, {  //先建立一個 chart
         type: 'line', // 型態
         data: data,
+        showSymbol:false,
         options: {
-                responsive: true,
-                legend: { //是否要顯示圖示
-                    display: true,
-                },
-                tooltips: { //是否要顯示 tooltip
-                    enabled: true
-                },
-                scales: {  //是否要顯示 x、y 軸
-                    xAxes: [{
-                        display: true
-                    }],
-                    yAxes: [{
-                        display: true
-                    }]
-                },
-            }
+            responsive: true,
+            legend: { //是否要顯示圖示
+                display: true,
+            },
+            tooltips: { //是否要顯示 tooltip
+                enabled: true
+            },
+            scales: {  //是否要顯示 x、y 軸
+                xAxes: [{
+                    display: true
+                }],
+                yAxes: [{
+                    display: true
+                }]
+            },
+        }
     });
 };

static/vibration.js

@@ -1,9 +1,9 @@
 var xhr = new XMLHttpRequest();
 var url = "tower/org";
-obj="";
+obj = "";
 obj2 = "";
-xhr.open("GET",url);
-xhr.onload = function(){
+xhr.open("GET", url);
+xhr.onload = function () {
     obj = JSON.parse(xhr.responseText);
     //insertHTML();
     start();
@@ -16,28 +16,28 @@ xhr.onload = function(){
 };
 xhr.send();
 
-function insertHTML(data){
-    
+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+='<option value="'+data[i].tower_name+'">'+data[i].tower_name+'</option>';
+    var inner = '';
+    for (var i = 0; i < data.length; i++) {
+        inner += '<option value="' + data[i].tower_name + '">' + data[i].tower_name + '</option>';
     }
-    document.getElementById("tower").innerHTML=inner;
+    document.getElementById("tower").innerHTML = inner;
 }
 
 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 ;
+    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(){
+        xhr2.open("GET", url2);
+        xhr2.onload = function () {
             obj2 = JSON.parse(xhr2.responseText);
             insertHTML(obj2);
             console.log(obj2);
@@ -45,26 +45,54 @@ function click_button() {
         };
         xhr2.send();
     }
-    
-  }
+
+}
+
 
 
-  
-function show_tower_info(){
-    tower =document.getElementById("tower").value;
+// function show_tower_info(){
+//     tower =document.getElementById("tower").value;
+//     console.log(tower);
+//     inner = '';
+//     for(var i=0;i<obj2.length;i++){
+//         if(obj2[i].tower_name === tower){
+//             for(var ii=0;ii<obj2[i].tower_data.Moter.length;ii++){
+//                 inner += '<p >編號' + obj2[i].tower_data.Moter[ii].channelName + '  Vrms:'+ obj2[i].tower_data.Moter[ii].DataValue + ',健康指標:健康 健康狀態' + obj2[i].tower_data.Moter[ii].CVIndex+'</p>';
+//                 inner += '<a href="/channel" target="_blank" title="通道資訊">通道資訊</a><br>';
+//             }
+//         }
+//     }
+//     document.getElementById("tower_info").innerHTML = inner;
+//     console.log(inner);
+
+// }
+
+function show_tower_info() {
+    tower = document.getElementById("tower").value;
     console.log(tower);
     inner = '';
-    for(var i=0;i<obj2.length;i++){
-        if(obj2[i].tower_name === tower){
-            for(var ii=0;ii<obj2[i].tower_data.Moter.length;ii++){
-                inner += '<p >編號' + obj2[i].tower_data.Moter[ii].channelName + '  Vrms:'+ obj2[i].tower_data.Moter[ii].DataValue + ',健康指標:健康 健康狀態' + obj2[i].tower_data.Moter[ii].CVIndex+'</p>';
-                inner += '<a href="/channel" target="_blank" title="通道資訊">通道資訊</a><br>';
+    for (var i = 0; i < obj2.length; i++) {
+        if (obj2[i].tower_name === tower) {
+            for (var ii = 0; ii < obj2[i].tower_data.Moter.length; ii++) {
+                // inner += '<p>編號' + obj2[i].tower_data.Moter[ii].channelName + '  Vrms:' + obj2[i].tower_data.Moter[ii].DataValue + ',健康指標:健康 健康狀態' + obj2[i].tower_data.Moter[ii].CVIndex + '</p>';
+                // inner += '<a href="/channel" target="_blank" title="通道資訊">通道資訊</a><br>';
+                inner += '\
+                <tbody>\
+                <tr>\
+                <tr>\
+                <td>' + obj2[i].tower_data.Moter[ii].channelName + '</td>\
+                <td>' + obj2[i].tower_data.Moter[ii].DataValue + '</td>\
+                <td style="color:#078b07" class="fw-bold">健康<i class="fas fa-check-circle ps-1"></i></td>\
+                <td>' + obj2[i].tower_data.Moter[ii].CVIndex + '</td>\
+                <td><a href="/channel" target="_blank" title="通道資訊">通道資訊</a></td>\
+                 </tr>\
+                </tbody>'
             }
         }
     }
     document.getElementById("tower_info").innerHTML = inner;
     console.log(inner);
-    
+
 }
 
 //document就是這html文件。
@@ -72,88 +100,88 @@ function show_tower_info(){
 
 
 
-function start(){
-    companySelect=document.getElementById("company-list");
-    factorySelect=document.getElementById("factory-list");
-    departmentSelect=document.getElementById("department-list");
-    towerGroupSelect=document.getElementById("towerGroup-list");
-    var inner='';
+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>';
+
+    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;
+    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='';
+    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++){
-        
-        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>';
+    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;
+
+    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='';
+    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>';
+    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;
+    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='';
+    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>';
+    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;
 }
 
 

templates/home.html

@@ -11,33 +11,34 @@
 <p id="factory_text" hidden></p>
 <p id="department_text" hidden></p>
 <p id="towergroup_text" hidden></p>
+
 <div class="card">
-    <div id='company'>
-    
-    </div>
-    <div id='factory'>
-        <p id='company_name'></p>
+    <h1 class="fw-bold">機組狀態</h1>
+<div class="ps-3" id='company'></div>
+<div id='factory'>
+    <p id='company_name'></p>
+    <div class="mb-3" id='factory_select'> </div>
         <div class="row px-0 mx-0">
             <div class="col-lg-6">
-                <div id='factory_select'> </div>
+                <div style="display: none;" id="map"></div>
             </div>
             <div class="col-lg-6">
-                <div id="map"></div>
+                <div id='department'>
+                    <select style="display: none;" class="form-select" id="department_list" onChange="department_change();">
+                    </select>
+                    <div id='department_show'>
+                
+                    </div>
+                </div>
+                <div id='towergroup'>
+                
+                </div>
             </div>
         </div>
     </div>
-    <div id='department'>
-        <select id="department_list" onChange="department_change();">
-        </select>
-        <div id='department_show'>
-    
-        </div>
-    </div>
-    <div id='towergroup'>
-    
-    </div>
 </div>
 <script type="text/javascript" src="static/home.js"></script>
 
-<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDNaWlcg9y27m2ZpzXQ2EhH1BZW2WAxA6E&callback=initMap" asyncdefer></script>
+<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDNaWlcg9y27m2ZpzXQ2EhH1BZW2WAxA6E&callback=initMap"
+    asyncdefer></script>
 {% endblock %}

templates/index.html

@@ -45,7 +45,7 @@
         <li><a href="/home" class="side-bar-link active">總覽</a></li>
         <li><a href="/tower" class="side-bar-link">水塔監控</a></li>
         <li><a href="/optim" class="side-bar-link">智能最佳化</a></li>
-        <li><a href="/vibration" class="side-bar-link">震動監控</a></li>
+        <li><a href="/vibration" class="side-bar-link">振動監控</a></li>
         <li><a href="/history" class="side-bar-link">歷史資料</a></li>
         <li><a href="/device" class="side-bar-link">設備設定</a></li>
         <li><a href="/system" class="side-bar-link">系統設定</a></li>

templates/optim.html

@@ -23,53 +23,161 @@
   </select>
   <button id="tower_btn" onclick="click_button();"><i class="fas fa-search me-2"></i>搜尋</button>
 </div>
-<div>
-<p>機組A 總共有{{count}}座水塔</p>
-  </div>
+<div class="ps-5 fw-bold">
+  <p>機組A 總共有{{count}}座水塔</p>
+</div>
+
 <body>
   <div id="tower_temperature">
     <div id="tower_temperature">
       <div class="row px-0 mx-0">
-        <div class="col-lg-4">
+        <div class="col-lg-4 text-center">
           <div scr="hot_water" class="fw-bold">
             <h1><i style="color:#FF0000;" class="fas fa-thermometer-half me-2"></i>熱水溫度(°C)</h1>
-            <div id="hot_water_data">
-              <font size="1">{{ x }}</font><br>
-            </div>
+            <!-- <font size="1">{{ x }}</font><br> -->
+            <div id="app" class="chart"></div>
           </div>
         </div>
         <div class="col-lg-4 text-center">
           <div id="cold_water" class="fw-bold">
             <h1><i style="color:#0174c7;" class="fas fa-thermometer-half me-2"></i>冷水溫度(°C)</h1>
-            <font size="1">{{ y }}</font><br>
+            <!-- <font size="1">{{ y }}</font><br> -->
+            <div id="app2"></div>
           </div>
         </div>
-        <div class="col-lg-4 text-end">
+        <div class="col-lg-4 text-center">
           <div id="wet_water" class="fw-bold">
             <h1><i style="color:#3dba1e;" class="fas fa-thermometer-half me-2"></i>濕球溫度(°C)</h1>
-            <font size="1">{{ z }}</font><br>
+            <!-- <font size="1">{{ z }}</font><br> -->
+            <div id="app3"></div>
+
           </div>
         </div>
       </div>
     </div>
+
+    <script src="/static/echarts.min.js"></script>
+    <script src="/static/echarts-liquidfill.js"></script>
     <script>
-    var hot = '{{x}}'
-    var cold = '{{y}}'
-    var wet = '{{z}}'
-    console.log(hot)
-    console.log(hot)
-    console.log(wet)
-      const chart = echarts.init(document.getElementById("hot_water_data"));
+      var hot = '{{x}}'
+      var cold = '{{y}}'
+      var wet = '{{z}}'
+      console.log(hot);
+      console.log(cold);
+      console.log(wet);
+      var chart = echarts.init(document.getElementById("app"));
       chart.setOption({
         series: [
           {
             type: "liquidFill",
-            data: [0.6, 0.5, 0.4, 0.3]
+            name: 'Liquid Fill',
+            data: [{
+              name: 'First Data',
+              value: 0.6,
+              itemStyle: {
+                color: '#FF0000'
+              },
+            }],
+            radius: '70%',
+            outline: {
+              show: false
+            },
+            radius: '70%',
+                    outline: {
+                        show: false
+                    },
+            outline: {
+              show: false
+            },
+            label: {
+              formatter: function (param) {
+                return hot;
+              },
+              fontSize: 28
+            }
           }
-        ]
+        ],
       });
     </script>
-     <script>
+    <script>
+      var hot = '{{x}}'
+      var cold = '{{y}}'
+      var wet = '{{z}}'
+      console.log(hot);
+      console.log(cold);
+      console.log(wet);
+      const chart2 = echarts.init(document.getElementById("app2"));
+      chart2.setOption({
+        series: [
+          {
+            type: "liquidFill",
+            name: 'Liquid Fill',
+            data: [{
+              name: 'First Data',
+              value: 0.6,
+              itemStyle: {
+                color: '#0174c7'
+              },
+            }],
+            radius: '70%',
+            outline: {
+              show: false
+            },
+            radius: '70%',
+                    outline: {
+                        show: false
+                    },
+            outline: {
+              show: false
+            },
+            label: {
+              formatter: function (param) {
+                return cold;
+              },
+              fontSize: 28
+            }
+          }
+        ],
+      });
+    </script>
+    <script>
+      var hot = '{{x}}'
+      var cold = '{{y}}'
+      var wet = '{{z}}'
+      console.log(hot);
+      console.log(cold);
+      console.log(wet);
+      const chart3 = echarts.init(document.getElementById("app3"));
+      chart3.setOption({
+        series: [
+          {
+            type: "liquidFill",
+            name: 'Liquid Fill',
+            data: [{
+              name: 'First Data',
+              value: 0.6,
+              itemStyle: {
+                color: '#3dba1e'
+              },
+            }],
+            radius: '70%',
+                    outline: {
+                        show: false
+                    },
+            outline: {
+              show: false
+            },
+            label: {
+              formatter: function (param) {
+                return wet;
+              },
+              fontSize: 28
+            }
+          }
+        ],
+      });
+    </script>
+    <!-- <script>
       const chart2 = echarts.init(document.getElementById("cold_water_data"));
       chart2.setOption({
         series: [
@@ -90,10 +198,10 @@
           }
         ]
       });
-    </script>
-    
+    </script> -->
+
     <!-- css -->
-    <!-- <style>
+    <style>
       table {
         font-family: arial, sans-serif;
         border-collapse: collapse;
@@ -110,7 +218,7 @@
       tr:nth-child(even) {
         background-color: #dddddd;
       }
-    </style> -->
+    </style>
 
     <section class="tower_data my-3">
       <div class="card">
@@ -138,8 +246,8 @@
           <div class="col-lg-6">
             <table class="table">
               <tr>
-                <th>目前溫度</th>
-                <th>{{ x }} 度C</th>
+                <td>目前溫度</td>
+                <td>{{ x }} 度C</td>
               </tr>
               <tr>
                 <td>流量建議調整為</td>
@@ -181,8 +289,6 @@
         return response.json();
       })
       .then(function (myJson) {
-        console.log(myJson);
-        console.log(1);
         hot_water.setOption({
             series: [
                 {

templates/tower.html

@@ -52,6 +52,9 @@
 </div>
 <div id='test'></div>
 <div id='tower_info'></div>
-<div id='tower_perfrom'></div>
-<canvas id="channel_predict" width="40" height="40"></canvas>
+<div class="mt-3" id='tower_perfrom'></div>
+<div class="card mt-5">
+    <h1 class="ms-3"><i style="color:#0174c7;" class="fas fa-chart-line me-2"></i>水塔效能趨勢圖</h1>
+    <canvas style="width: 75%;" id="channel_predict"></canvas>
+</div>
 {% endblock %}

templates/vibration_test.html

@@ -24,15 +24,57 @@
     <button id="tower_btn" onclick="click_button();"><i class="fas fa-search me-2"></i>搜尋</button>
 </div>
 <div id="tower-box">
-    <div id="tower-img" class="card text-white">
+    <div id="tower-img" class="text-white p-3">
         <select id="tower" onChange="show_tower_info();">
         </select>
     </div>
 </div>
-<p>設備狀態:正常 連線狀態:正常</p><br>
-<p>設備位區:台塑 設備位置:公用四廠</p><br>
-<p>負責人:*** 最後更新時間:2021/09/15 18:09:</p><br>
+<div class="state card">
+    <div class="row px-0 mx-0">
+        <div class="col-lg-6">
+            <div class="device">
+                <p class="fw-bold mb-0">設備狀態:</p>
+                <h1 style="color: #078B07;">健康<i style="color: #078B07;" class="fas fa-check-circle ps-1"></i></h1>
+            </div>
+            <div class="Connect">
+                <p class="fw-bold mb-0">連線狀態:</p>
+                <h1 style="color: #078B07;">正常</h1>
+            </div>
+        </div>
+        <div class="col-lg-6">
+            <div>
+                <p>設備位區:<span class="fw-bold">台塑</span></p>
+            </div>
+            <div>
+                <p>設備位置:<span class="fw-bold">公用四廠</span></p>
+            </div>
+            <div>
+                <p>負責人:<span class="fw-bold">***</span></p>
+            </div>
+
+        </div>
+        <hr>
+        <div>
+            <p class="mb-0">最後更新時間:2021/09/15 18:09</p>
+        </div>
+    </div>
+</div>
 <div id='test'></div>
-<div id='tower_info'></div>
+<div class="card mt-5">
+    <table style="font-size: 16px;" class="table text-center">
+        <thead>
+            <tr>
+                <th>編號</th>
+                <th>vrms(mm/s)</th>
+                <th>健康指標</th>
+                <th>健康狀態</th>
+                <th>連線運作狀態</th>
+            </tr>
+            <tbody id="tower_info">
+
+            </tbody>
+        </thead>
+    </table>
+</div>
 <div id='tower_perfrom'></div>
 {% endblock %}