update

home.js

@@ -1,3 +1,5 @@
+
+
 start();
 user_role = '';
 data = '';
@@ -57,7 +59,7 @@ function company_show(){
     check = 0;
     for(var i=0;i<obj[1].length;i++){
         if(company_arr.indexOf(obj[1][i].company)==-1){
-            inner+="<button class='btn text-white m-1' id='company " +obj[1][i].company+ "' onclick=\"factory_show(\'"+obj[1][i].company+"\');\"";
+            inner+="<i id='company2 " +obj[1][i].company+ "' class='fas fa-circle'></i><button style='color:#002E85; width:150px; padding:15px 30px; border:1px solid #002E86; background:none;' class='me-1' id='company " +obj[1][i].company+ "' onclick=\"factory_show(\'"+obj[1][i].company+"\');\"";
             inner += ">公司"+obj[1][i].company+"</button>";
             company_arr.push(obj[1][i].company);
             console.log(obj[1][i].company);
@@ -72,7 +74,9 @@ function company_health(company_arr){
     //使公司按鈕變色
     for(var i=0;i<company_arr.length;i++){
         //初始化(健康)
-        document.getElementById('company ' + company_arr[i]).style.background="green";
+        // document.getElementById('company ' + company_arr[i]).style.background="green";
+        document.getElementById('company2 ' + company_arr[i]).style.color="green";
+
     }
     for(var i=0;i<obj[1].length;i++){
         if(obj[1][i].health!=1 && obj[1][i].company==document.getElementById('company_text').innerHTML){

static/channel.js

@@ -154,13 +154,13 @@ xhr.send();
 function insertHTML(data){
     console.log(data);
     //aria.innerHTML=data[0].tower_name;
-    var inner='<h1>故障診斷</h1><table style="font-size:16px;" class="table"> <tr> <th>主軸分析 </th><th>軸承分析 </th><th>馬達分析 </th><th>齒輪分析 </th> </tr> <tr>';
+    var inner='<h1 style="color:#002e86;">故障診斷</h1><div style="padding:15px;"><table style="font-size: 16px; border-color:#4c6caa; border-top:1px solid #4c6caa;" class="table text-center"><thead style="background:#e4f8ff; color:#4c6caa;"><tr><th class="border-0">主軸分析 </th><th class="border-0">軸承分析 </th><th class="border-0">馬達分析 </th><th class="border-0">齒輪分析</th></tr></thead><tr>';
     inner+='<td><span style="color: #078B07;">正常</span>  不平衡 '+data.DW_Unbalance+'</td><td><span style="color: #078B07;">正常</span>  油膜旋震 '+data.DW_Whirl+'</td><td><span style="color: #078B07;">正常</span>  氣隙不均 '+data.DW_AirGap+'</td><td><span style="color: #078B07;">正常</span>  齒輪不對中 '+data.DW_GMisalignment+'</td></tr><tr>';
     inner+='<td><span style="color: #078B07;">正常</span>  軸彎曲 '+data.DW_Unbalance+'</td><td><span style="color: #078B07;">正常</span>  油膜晃蕩 '+data.DW_Whirl+'</td><td><span style="color: #078B07;">正常</span>  轉子條斷裂 '+data.DW_AirGap+'</td><td><span style="color: #078B07;">正常</span>  齒輪斷齒 '+data.DW_GMisalignment+'</td></tr><tr>';
     inner+='<td><span style="color: #078B07;">正常</span>  不對中 '+data.DW_Unbalance+'</td><td><span style="color: #078B07;">正常</span>  內還損傷 '+data.DW_Whirl+'</td><td><span style="color: #078B07;">正常</span>  相位問題 '+data.DW_AirGap+'</td><td><span style="color: #078B07;">正常</span>  齒輪磨損 '+data.DW_GMisalignment+'</td></tr><tr>';
     inner+='<td><span style="color: #078B07;">正常</span>  鬆動 '+data.DW_Unbalance+'</td><td><span style="color: #078B07;">正常</span>  外環損傷 '+data.DW_Whirl+'</td><td></td><td><span style="color: #078B07;">正常</span>  齒輪彎曲 '+data.DW_GMisalignment+'</td></tr><tr>';
     inner+='<td> </td><td>正常 滾珠損傷 '+data.DW_Whirl+'</td><td></td><td>正常 齒輪偏心 '+data.DW_GMisalignment+'</td></tr><tr>';
-    
+    inner+='</div>'
     document.getElementById("channel").innerHTML=inner;
 }
 

static/home.js

@@ -1,4 +1,9 @@
 
+function navlinkactive(){
+   $('#nav-home').addClass('active');
+
+}
+navlinkactive();
 start();
 user_role = '';
 data = '';
@@ -53,17 +58,18 @@ function clear(){
 
 function company_show(){
     //顯示company按鈕
-    var inner='';
+    var inner='<div class="card pb-5"><h1 style="color:#002E86;" class="fw-bold">機組狀態</h1><div class="row row-cols-lg-6 mx-0">';
     var company_arr = new Array();
     check = 0;
     for(var i=0;i<obj[1].length;i++){
         if(company_arr.indexOf(obj[1][i].company)==-1){
-            inner+="<button class='btn text-white m-1' id='company " +obj[1][i].company+ "' onclick=\"factory_show(\'"+obj[1][i].company+"\');\"";
-            inner += ">公司"+obj[1][i].company+"</button>";
+            inner+="<div class='col'><button style='color:#002E85; width:150px; padding:15px 20px; border:1px solid #002E86;background:none; border-radius: 10px;' class='me-3' id='company " +obj[1][i].company+ "' onclick=\"factory_show(\'"+obj[1][i].company+"\');\"";
+            inner += "><i id='company2 " +obj[1][i].company+ "' class='fas fa-check-circle me-2'></i>公司"+obj[1][i].company+"</button></div>";
             company_arr.push(obj[1][i].company);
             console.log(obj[1][i].company);
         }
     }
+    inner += '</div></div>';
     clear();
     document.getElementById('company').innerHTML=inner;
     company_health(company_arr);
@@ -73,7 +79,9 @@ function company_health(company_arr){
     //使公司按鈕變色
     for(var i=0;i<company_arr.length;i++){
         //初始化(健康)
-        document.getElementById('company ' + company_arr[i]).style.background="green";
+        // document.getElementById('company ' + company_arr[i]).style.background="green";
+        document.getElementById('company2 ' + company_arr[i]).style.color="green";
+
     }
     for(var i=0;i<obj[1].length;i++){
         if(obj[1][i].health!=1 && obj[1][i].company==document.getElementById('company_text').innerHTML){
@@ -106,23 +114,25 @@ function company_health(company_arr){
     
 // }
 function factory_show(company){
-    var inner='<p class="fw-bold">廠區資訊</p>';
+  var inner='<div class="card p-5"><table class="table" style="border-color:#002e86;"><p class="mb-0" style="color:#002e86; border-bottom:1px solid #002e86;"><span style="font-size:24px;font-weight:900;" class="me-3 mb-3"> 公司'+ company + '</span>-廠區資訊</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 type='button' style='font-size:24px; padding:20px 100px' class='btn text-white me-3 mb-3' id='factory " +obj[1][i].factory+ "' onclick=\"change_map(\'"+obj[1][i].company+"\',\'"+obj[1][i].factory+"\');\"";
-            inner += ">廠區"+obj[1][i].factory+"</button><button  style='padding:20px 30px;font-size:20px;'  class='btn btn-primary mb-3' onclick=\"department_show(\'"+obj[1][i].company+"\',\'"+obj[1][i].factory+"\');\"> 查看</button>";
+            inner+="<tbody><tr><td><i style='font-size:20px;' id='factory2 " +obj[1][i].factory+ "' class='fas fa-check-circle me-2 my-2'></i></td><td><button type='button' style='font-size:20px; color:#002e86; background:none;' class='me-3 border-0  my-2' id='factory " +obj[1][i].factory+ "' onclick=\"change_map(\'"+obj[1][i].company+"\',\'"+obj[1][i].factory+"\');\"";
+            inner += ">廠區"+obj[1][i].factory+"</button></td><td><button type='button' style='font-size:16px; padding:5px 30px; background:none; border:1px solid #002E86; color:#002e86;'  class='rounded-pill  my-2' onclick=\"department_show(\'"+obj[1][i].company+"\',\'"+obj[1][i].factory+"\');\"> 查看</button></td><tr>";
             factory_arr.push(obj[1][i].factory);
         }
     }
     //測試用
-    inner+="<div><button type='button'  style='font-size:24px; padding:20px 100px' class='btn btn btn-success me-3 mb-3' id='factory B' onclick=\"change_map(\'"+obj[1][0].company+"\',\'B\');\"";
-    inner += ">廠區B</button><button style='padding:20px 30px;font-size:20px;' class='btn btn-primary mb-3' onclick=\"department_show(\'"+obj[1][0].company+"\',\'B\');\">查看 </button></div>";
-    inner+="<div><button type='button' style='font-size:24px; padding:20px 100px' class='btn btn btn-success  me-3 mb-3' id='factory C' onclick=\"change_map(\'"+obj[1][0].company+"\',\'C\');\"";
-    inner += ">廠區C</button><button  style='padding:20px 30px;font-size:20px;'  class='btn btn-primary mb-3' onclick=\"department_show(\'"+obj[1][0].company+"\',\'C\');\"> 查看</button></div>";
+    inner+="<tr><td><i style='font-size:20px; color:green;' class='fas fa-check-circle me-2  my-2'></i></td><td><button type='button' style='font-size:20px; color:#002e86; background:none;' class='me-3 border-0  my-2' id='factory B' onclick=\"change_map(\'"+obj[1][0].company+"\',\'B\');\"";
+    inner += ">廠區B</button></td><td><button style='font-size:16px; padding:5px 30px; background:none; border:1px solid #002E86; color:#002e86;' class='rounded-pill my-2' onclick=\"department_show(\'"+obj[1][0].company+"\',\'B\');\">查看 </button></td></tr>";
+
+    inner+="<tr><td><i style='font-size:20px; color:green;' class='fas fa-check-circle me-2  my-2'></i></td><td><button type='button' style='font-size:20px; color:#002e86; background:none;' class='me-3 border-0  my-2' id='factory C' onclick=\"change_map(\'"+obj[1][0].company+"\',\'C\');\"";
+    inner += ">廠區C</button></td><td><button style='font-size:16px; padding:5px 30px; background:none; border:1px solid #002E86; color:#002e86;' class='rounded-pill my-2' onclick=\"department_show(\'"+obj[1][0].company+"\',\'C\');\"> 查看</button></td></tr>";
+    inner +="</tbody></table></div>"
     document.getElementById('company').innerHTML="";
     document.getElementById('company_text').innerHTML=company;
-    document.getElementById('company_name').innerHTML="<button type='button' class='btn btn-primary m-1' onclick=\"company_show();\">返回</button> 公司"+ company + "";
+    document.getElementById('company_name').innerHTML="<span style='color:#002E86; font-size:25.6px;' class='fw-bold'>機組狀態</span><button type='button' style='background:#002E86; padding:10px 30px; font-size:16px;' class='text-white ms-4  rounded-pill border-0' onclick=\"company_show();\">返回</button>";
     document.getElementById('factory_select').innerHTML=inner;
     factory_health(factory_arr);
     document.getElementById("map").style.display="";
@@ -133,7 +143,9 @@ function factory_health(factory_arr){
     //使工廠按鈕變色
     for(var i=0;i<factory_arr.length;i++){
         //初始化(健康)
-        document.getElementById('factory ' + factory_arr[i]).style.background="green";
+        // document.getElementById('factory ' + factory_arr[i]).style.background="green";
+        document.getElementById('factory2 ' + factory_arr[i]).style.color="green";
+
     }
     for(var i=0;i<obj[1].length;i++){
         if(obj[1][i].health!=1){
@@ -146,6 +158,7 @@ function factory_health(factory_arr){
 function department_show(company,factory){
     var inner='';
     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 selected value="'+obj[1][i].department+'">課'+obj[1][i].department+'</option>';
@@ -157,7 +170,7 @@ function department_show(company,factory){
     document.getElementById('department_list').innerHTML=inner;
     console.log("click");
     clear();
-    document.getElementById('company_name').innerHTML="<button type='button' class='btn btn-primary m-1' onclick=\"factory_show('"+company+"');\">返回</button> 目前位置: 公司 " + company+ " 廠區"+ factory + "";
+    document.getElementById('company_name').innerHTML="<span style='color:#002E86; font-size:25.6px;' class='fw-bold'>機組狀態</span><button type='button' style='background:#002E86; padding:10px 30px; font-size:16px;' class='text-white ms-4 rounded-pill border-0' onclick=\"factory_show('"+company+"');\">返回</button> <div class='mt-3' style='color:#002e86; font-size:20px;'>目前位置: 公司 " + company+ " >廠區"+ factory + "</div>";
     document.getElementById("department_list").style.display="";
     department_change();
 }
@@ -178,16 +191,16 @@ function change_map(company,factory){
 function department_change(){
     console.log("change");
     check = 0 ;
-    var inner='<table style="font-size: 16px;" class="table text-center"><thead><tr><th>機組</th><th>健康狀態</th><th>機組狀態</th></tr></thead>';
+    var inner='<div class="card"><table style="font-size: 16px; border-color:#4c6caa; border-top:1px solid #4c6caa;" class="table text-center"><thead style="background:#e4f8ff; color:#4c6caa;"><tr><th class="border-0">機組</th><th class="border-0">健康狀態</th><th class="border-0">機組狀態</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 style="color:#078b07" class="fw-bold">健康<i class="fas fa-check-circle ps-1"></i></td>\<td><button class="btn btn-primary m-1" onclick=\"towerGroup_show();\">查看</button></td></tr>' ;
+            inner+='<tr><td><p class="my-2">' + obj[1][i].group + '</p></td><td style="color:#078b07" class="fw-bold"><p class="my-2">健康<i class="fas fa-check-circle ps-1 my-2"></i></p></td><td><button style="font-size:16px; padding:5px 30px; background:none; border:1px solid #002E86; color:#002e86;" class="rounded-pill my-2" onclick=\"towerGroup_show();\">查看</button></td></tr>' ;
             tower_group_arr.push(obj[1][i].group);
             console.log(inner);
         }
     }
-    inner += '</table>';
+    inner += '</table></div>';
     document.getElementById('department_text').innerHTML=document.getElementById("department_list").value;
     document.getElementById('department_show').innerHTML=inner;
     
@@ -206,20 +219,20 @@ function towerGroup_show(){
     clear();
     company = document.getElementById('company_text').innerHTML
     factory= document.getElementById('factory_text').innerHTML
-    document.getElementById('company_name').innerHTML="<button type='button' class='btn btn-primary m-1' onclick=\"department_show('"+company+"','" + factory+"');\">返回</button>目前位置: 公司 " + company+ " 廠區 " + factory+ " 課"+ document.getElementById("department_list").value + "";
+    document.getElementById('company_name').innerHTML="<span style='color:#002E86; font-size:25.6px;' class='fw-bold'>機組狀態</span><button type='button' style='background:#002E86; padding:10px 30px; font-size:16px;' class='text-white ms-4 rounded-pill border-0' onclick=\"department_show('"+company+"','" + factory+"');\">返回</button><div class='mt-3' style='color:#002e86; font-size:20px;'>目前位置: 公司 " + company+ " >廠區 " + factory+ " >課"+ document.getElementById("department_list").value + "</div>";
     document.getElementById('towergroup').innerHTML=inner;
 }
 
 function tower(tower_group){
     //顯示tower
-    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>';
+    var inner= '<div class="card mb-5"><p style="color:#002E86;" class="fw-bold">機組'+tower_group +'</p><table style="font-size: 16px; border-color:#4c6caa; border-top:1px solid #4c6caa;" class="table text-center"><thead style="background:#e4f8ff; color:#4c6caa;"><tr><th class="border-0">設備</th><th class="border-0">馬達效能</th><th class="border-0">機組狀態</th></tr></thead>';
     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 style="color:#078b07" class="fw-bold">健康<i class="fas fa-check-circle ps-1"></i></td>\<td><button class="btn btn-primary m-1">查看</button></td></tr>';
+            inner+='<tr><td><p class="my-2">' + obj[1][i].tower + '</p></td><td style="color:#078b07" class="fw-bold"><p class="my-2">健康<i class="fas fa-check-circle ps-1"></i></p></td>\<td><button style="font-size:16px; padding:5px 30px; background:none; border:1px solid #002E86; color:#002e86;" class="rounded-pill my-2" >查看</button></td></tr>';
         }
     }
 
-    inner += '</table>'
+    inner += '</table></div>'
     return inner;
 }
 

static/index.css

@@ -9,17 +9,19 @@
 /* width:120px; */
 /*     height:120px; */
 /*     text-align:center; */
-line-height:40px;
+line-height:35px;
 height: 100%;
 width: 250px;
 position: fixed;
 z-index: 1;
 top: 59.6333px;
 left: 0;
-background: url(../static/img/sidebar.png);
-background-size: cover;
+background: #fff;
+color:#002e86;
 overflow-x: hidden;
 transition: 0.5s;
+box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
+border-radius: 10px;
 }
 
 #nav-side-bar .bar_img {
@@ -64,46 +66,57 @@ text-align:center;
     width: 100vw !important;
     z-index: 100;
     opacity: 1 !important;
-    background: #fff !important;
+    background:#002e86 !important;
+    color: #fff;
+}
+.nav-link{
+  color:#fff !important;
 }
 
 .navbar-brand img{
-width: 120px;
+width: 150px;
 }
 
 .nav-side-bar ul {
 margin-top: 3rem;
-margin-left: 2.5rem;
+margin-left: 1rem;
 padding-left: 0rem;
 
 }
 
 .nav-side-bar li {
 padding: .5rem 0; 
-
+margin-right: 10px;
 }
 
 .nav-side-bar .side-bar-link {
 display: block;
 text-decoration-line: none;
-font-size: .9rem;
-color: white;
+font-size: 18px;
+color: #002e86;
 padding-left: 2rem;
 }
 
 .nav-side-bar .side-bar-link.active, .nav-side-bar .side-bar-link:hover {
-background: white;
-color: black;
-border-top-left-radius: 8px;
-border-bottom-left-radius: 8px;
-position: relative;
+  background: #002e86;
+  color: #fff;
+  border-radius: 8px;
+  position: relative;
+}
+
+.side-img{
+  filter: invert(18%) sepia(35%) saturate(4882%) hue-rotate(209deg) brightness(84%) contrast(112%);
+
+}
+.nav-side-bar .side-bar-link.active .side-img, .nav-side-bar .side-bar-link:hover .side-img {
+  filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(93deg) brightness(103%) contrast(103%);
 }
 
 .nav-side-bar .side-bar-link.active::after {
 position: absolute;
 right: 1rem;
 top: -2px;
-content: ">";
+/* content: ">"; */
 }
 
 .login_form {
@@ -141,9 +154,11 @@ padding-bottom: .5rem;
 }
 /* 水塔監控 */
 /* =================================================== */
-body{
+
+/* body{
 background: #f8f9fb;
-}
+} */
+
 .option{
 background: #0174c7;
 color:#000;
@@ -152,38 +167,34 @@ color:#000;
 width: 80vw;
 margin: 0 auto;
 }
-#select_boxes{
-padding: 10px 25px;
-}
 .select-item{
-width: 20%;
-padding: 10px;
-margin: 10px;
+width: 16vw;
+padding: 12px;
+margin-right:1.5%;
 border-radius: 5px;
-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
-border:none;
+font-size: 16px;
+color:#002e86;
+font-weight: 900;
+border:1px solid #002e86;
 
 }
 #tower_btn{
-padding: 8px 15px;
+width: 8vw;
+
+padding: 12px;
 margin: 10px;
-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
-border:none;
 border-radius: 5px;
-background: #fff;
-color:#0174c7;
+font-size: 16px;
+border:none;
+font-weight: 900;
+background: #002e86;
+color:#fff;
 transition: 0.3s;
 }
 #tower_btn:hover{
 background: #0174c7;
 color:#fff;
 }
-#tower-box{
-padding: 10px;
-}
-#tower{
-border:none;
-}
 h1{
 font-size: 1.6rem;
 font-weight: 900;
@@ -193,19 +204,34 @@ padding: 15px;
 p{
 font-size: 2.4vmin;
 }
-
-.card{
+#select_boxes{
+margin: 2.3vmin;
+}
+#tower_temperature,.card{
 margin: 2.3vmin;
 box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
 border-radius:10px;
-padding: 15px;
+padding: 10px;
+}
+
+.card2{
+margin: 1vmin;
+border-radius:10px;
+/* display: flex; */
+padding: 10px;
+box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
+background-color: #fff;
 }
 .unit{
 font-size: 25px;
 font-weight: 900;
 }
 .data-title{
-color:#495057;
+color:#002e86;
+}
+.data-content{
+  color:#707070;
+  font-weight: 900;
 }
 
 #map{
@@ -232,10 +258,7 @@ table {
   /* tr:nth-child(even) {
     background-color: #dddddd;
   } */
-#tower_temperature{
-    padding: 10px 25px;
-    
-}
+
 h1{
   font-size: 1.6rem;
   font-weight: 900;
@@ -254,24 +277,28 @@ h1{
   }
   .horizontal .progress-bar {
     float: left;
-    height: 50px;
+    /* height: 50px; */
     width: 100%;
     padding: 3px 0;
   }
+  .progress-bar{
+    background: none !important;
+  }
 
   .horizontal .progress-track {
     position: relative;
     width: 100%;
-    height: 50px;
-    background: #ebebeb;
+    /* height: 50px; */
+    background: #e4f8ff;
   }
 
   .horizontal .progress-fill {
     position: relative;
-    background: #2883fa;
-    height: 50px;
+    /* background: #2883fa; */
+    background: #002e86;
+    /* height: 50px; */
     width: 50%;
-    color: #080707;
+    color: #fff;
     text-align: center;
     font-family: "Lato", "Verdana", sans-serif;
     font-size: 16px;
@@ -280,10 +307,12 @@ h1{
 
   .horizontal .progress-fill2 {
     position: relative;
-    background: #ba711e;
-    height: 50px;
+    /* background: #ba711e; */
+    background: #002e86;
+
+    /* height: 50px; */
     width: 50%;
-    color: #080707;
+    color: #fff;
     text-align: center;
     font-family: "Lato", "Verdana", sans-serif;
     font-size: 16px;
@@ -292,10 +321,12 @@ h1{
 
   .horizontal .progress-fill3 {
     position: relative;
-    background: #3dba1e;
-    height: 50px;
+    /* background: #3dba1e; */
+    background: #002e86;
+
+    /* height: 50px; */
     width: 50%;
-    color: #080707;
+    color: #fff;
     text-align: center;
     font-family: "Lato", "Verdana", sans-serif;
     font-size: 16px;
@@ -304,10 +335,12 @@ h1{
 
   .horizontal .progress-fill4 {
     position: relative;
-    background: #f0ff1f;
-    height: 50px;
+    /* background: #f0ff1f; */
+    background: #002e86;
+
+    /* height: 50px; */
     width: 50%;
-    color: #080707;
+    color: #fff;
     text-align: center;
     font-family: "Lato", "Verdana", sans-serif;
     font-size: 16px;
@@ -346,7 +379,13 @@ h1{
     height: 300px;
     float: left;
   }
-  #system-table{
-    border:none !important;
-  }
 
+.form-select{
+  border-color:#002e86;
+  color:#002e86;
+}
+
+.tower-active{
+  background: #002e86 !important;
+  color:#fff !important;
+}

static/optim.js

@@ -0,0 +1,108 @@
+
+function drawLineCanvas2(ctx, data) {
+    window.myLine = new Chart(ctx, {  //第二個 chart
+        type: 'line', // 型態
+        data: data,
+        options: {
+            plugins: {
+                legend: {
+                    display: false,
+                },
+            },
+            responsive: true,
+            legend: { //是否要顯示圖示
+                display: true,
+            },
+            tooltips: { //是否要顯示 tooltip
+                enabled: true
+            },
+            scales: {  //是否要顯示 x、y 軸 
+                x:{
+                    title: {
+                        display: true,
+                        text: '時間',
+                        color: '#000',
+                        font: {
+                            family: 'Times',
+                            size: 20,
+                            style: 'normal',
+                            lineHeight: 1.2
+                        },
+                    },
+                },              
+                y: {
+                    min: 20,
+                    max: 40,
+                    title: {
+                        display: true,
+                        text: '濕球溫度(°C)',
+                        color: '#000',
+                        font: {
+                            family: 'Times',
+                            size: 20,
+                            style: 'normal',
+                            lineHeight: 1.2
+                        },
+                    },
+                }
+            },
+
+        },
+        plugins: [ChartDataLabels],
+        // options: {
+        //     plugins:{
+        //         legend:{
+        //             display:false,
+        //         },
+        //         datalabels: {
+        //             color: 'red',
+        //             anchor: 'end'
+        //         },
+        //     }
+        // },
+
+    });
+};
+
+var lineChartData = {
+    labels: ["36小時前", "30小時前", "24小時前", "18小時前", "12小時前", "6小時"], //顯示區間名稱
+    datasets: [{
+        label: 'x', // tootip 出現的名稱
+        lineTension: 0, // 曲線的彎度，設0 表示直線
+        backgroundColor: "#ea464d",
+        borderColor: "#ea464d",
+        borderWidth: 5,
+        data: [25, 32, 29, 31, 27, 33], // 資料
+        datalabels: {
+            // color: 'red',
+            align: 'end',
+            anchor: 'end',
+            borderRadius: 4,
+            color: 'black',
+            font: {
+                weight: 'bold',
+                size: 24,
+            },
+
+        },
+        fill: false, // 是否填滿色彩
+    }, {
+        label: '下限提示線',
+        lineTension: 0,
+        fill: false,
+        backgroundColor: "#29b288",
+        borderColor: "#29b288",
+        borderWidth: 5,
+        data: [28, 28, 28, 28, 28, 28],
+        datalabels: {
+            display: false,
+        },
+    },]
+};
+
+window.onload = function () {
+    var ctx = document.getElementById("optim-predict").getContext("2d");
+    drawLineCanvas2(ctx, lineChartData);
+}
+
+

static/table.js

@@ -1,9 +1,11 @@
+
+
 data="";
 function creatTable(){
     //這個函式的引數可以是從後臺傳過來的也可以是從其他任何地方傳過來的
     //這裡我假設這個data是一個長度為5的字串陣列 我要把他放在表格的一行裡面，分成五列
     //alert("eee");
-    var tableData = '<div class="border rounded-3 py-3"><table style="font-size: 18px;" id="system-table" class="table text-center table-borderless"><thead><tr><th>單位分類</th><th>使用者分類</th><th>帳號</th><th>電子郵件</th><th>權限設定</th><th>備註</th><th>+新增</th></tr></thead><tbody></div>'
+    var tableData = '<div class="card"><div style="padding:15px;"><table style="font-size: 16px; border-color:#4c6caa; border-top:1px solid #4c6caa;" id="system-table" class="table"><thead style="background:#e4f8ff; color:#4c6caa;"><tr><th class="border-0">單位分類</th><th class="border-0">使用者分類</th><th class="border-0">帳號</th><th class="border-0">電子郵件</th><th class="border-0">權限設定</th><th class="border-0">備註</th><th class="border-0">+新增</th></tr></thead><tbody></div>'
   
     //動態增加5個td,並且把data陣列的五個值賦給每個td
     // for(var i=0;i < data.length;i++){
@@ -34,17 +36,17 @@ function creatTable(){
         }
 
         
-        tableData += "<td>" + str + "</td>" +
-                     "<td>" + str2 + "</td>" +
-                     "<td>" + data[i].username + "</td>" +
+        tableData += "<td style='vertical-align:middle;'>" + str + "</td>" +
+                     "<td style='vertical-align:middle;'>" + str2 + "</td>" +
+                     "<td style='vertical-align:middle;'>" + data[i].username + "</td>" +
                      "<td></td>" +           
-                     "<td><button class='btn btn-primary m-2' onclick=\"member_auth(\'"+data[i].username+"\');\"><i style='color:#fff;' class='fas fa-cog me-2'></i>設定</button></td>"+
+                     "<td><button style='padding:5px 10px; background:#002e86; color:#fff; border: 1px solid #002E86; border-radius: 10px; font-size:14px;' class='tower-btn my-3' onclick=\"member_auth(\'"+data[i].username+"\');\"><i style='color:#fff;' class='fas fa-cog me-1'></i>設定</button></td>"+
                      "<td></td>" +
                      "<td></td>" ;
         tableData += "</tr>";
     }
   
-    tableData+= "</tbody></table>";
+    tableData+= "</tbody></table></div>";
   
     //現在tableData已經生成好了，把他賦值給上面的tbody
     $("#info_table").html(tableData);
@@ -63,9 +65,12 @@ function creatTable(){
 // }
 function member_auth(username){
     $("#info_table").html("");
-    inner = "<p>請設定以下權限:</p>\
-    <div style='font-size: 16px;' class='border rounded-3 py-3'>\
-    <table class='table table-borderless' id = \"change\"> <tr> <th>帳號</th><th>管理員</th><th>可用</th></tr>\
+    inner = "\
+    <div class='card mt-0'>\
+    <h1 style='color:#002e86'>請設定以下權限:</h1>\
+    <div style='font-size: 16px;' class='py-3'>\
+    <div style='padding:15px'>\
+    <table style='font-size: 16px; border-color:#4c6caa; border-top:1px solid #4c6caa;' class='table' id = \"change\"><thead style='background:#e4f8ff; color:#4c6caa;'><tr><th>帳號</th><th>管理員</th><th>可用</th></tr></thead>\
     <tr>\
     <td >" + username + "</td>\
     <td><input class='form-check-input ms-3' type='checkbox' type=\"checkbox\" id=\"isAdmin\" >"+ " </td>\
@@ -73,9 +78,11 @@ function member_auth(username){
     </tr>\
     </table>\
     </div>\
-    <div class='mt-4 pb-3'>\
-    <button type='button' class='btn btn-primary me-3' onclick=\"put();\">確認 </button>\
-    <button type='button' class='btn btn-primary me-3' onclick=\"start();\">取消 </button>\
+    <div style='padding:15px;' class='mt-4 pb-3'>\
+    <button type='button' style='background:#002e86; color:#fff; border: 1px solid #002E86; border-radius: 10px;' class='btn text-white me-2' onclick=\"put();\">確認 </button>\
+    <button type='button' style='background:#002e86; color:#fff; border: 1px solid #002E86; border-radius: 10px;' class='btn text-white' onclick=\"start();\">取消 </button>\
+    </div>\
+    </div>\
     </div>\
     ";
   
@@ -130,4 +137,14 @@ function start(){
     console.log('Table data 寫入!');
 }
 
+// function toggless(){
+//     $(this).addClass("tower-active");
+//     $(".tower-active").siblings().removeClass('tower-active');
+// }
+
+
 
+    $('.system-btn').click(function() {
+        $(this).addClass("tower-active");
+        $(".tower-active").siblings().removeClass('tower-active');
+    });

static/tower.js

@@ -1,4 +1,5 @@
 
+console.log(1);
 var xhr = new XMLHttpRequest();
 var url = "tower/org";
 obj = "";
@@ -23,10 +24,10 @@ function insertHTML(data) {
     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>';
+            inner = inner + '<button type="button" style="padding:15px 30px; background:#fff; color:#002e86; border: 1px solid #002E86; border-radius: 10px; font-size:18px;" class="tower-btn me-3" 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>';
+            inner = inner + '<button type="button" style="padding:15px 30px; background:#fff; color:#002e86; border: 1px solid #002E86; border-radius: 10px; font-size:18px;" class="tower-btn me-3" onclick="tower_info(\'' + data[i].tower_name + '\');">' + data[i].tower_name + '</button>';
         }
 
         console.log(inner);
@@ -57,6 +58,10 @@ function click_button() {
 
 
 function tower_info(tower_str) {
+    $(document).on("click", ".tower-btn", function (event) {
+        $(this).addClass("tower-active");
+        $(".tower-active").siblings().removeClass('tower-active');
+    });
     tower = tower_str;
     console.log(tower);
     inner = "";
@@ -81,62 +86,53 @@ function tower_info(tower_str) {
             //         '<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 = '<div style="padding:15px;"><h1 style="color:#002e86">中控室DSC訊號</h1>\
                     <div class="row px-0 mx-0">\
                         <div class="card col-lg-2">\
-                            <p class="data-title fw-bold">入水溫度</p>\
+                            <p  class="data-title fw-bold pt-3">入水溫度</p>\
                             <div>\
-                                <h2 class="text-center">'+ obj2[i].tower_data.DCS.hotTemp + '</h2>\
-                                <P class="unit text-end">°C</P>\
+                                <h2 class="data-content text-center mt-3 pb-3">'+ obj2[i].tower_data.DCS.hotTemp + '<span style="font-size:20px;">&ensp;°C</span></h2>\
                             </div>\
                         </div>\
                         <div class="card col-lg-2">\
-                            <p class="data-title fw-bold">出水溫度</p>\
+                            <p class="data-title fw-bold pt-3">出水溫度</p>\
                             <div>\
-                                <h2 class="text-center">'+ obj2[i].tower_data.DCS.coldTemp + '</h2>\
-                                <P class="unit text-end">°C</P>\
+                                <h2 class="data-content text-center mt-3 pb-3">'+ obj2[i].tower_data.DCS.coldTemp + '<span style="font-size:20px;">&ensp;°C</span></h2>\
                             </div>\
                         </div>\
                         <div class="card col-lg-2">\
-                            <p class="data-title fw-bold ">水流量</p>\
+                            <p  class="data-title fw-bold pt-3">水流量</p>\
                             <div>\
-                                <h2 class="text-center">'+ obj2[i].tower_data.DCS.waterFlow + '</h2>\
-                                <P class="unit text-end">M³/H</P>\
+                                <h2 class="data-content text-center mt-3 pb-3">'+ obj2[i].tower_data.DCS.waterFlow + '<span style="font-size:20px;">&ensp;M³/H</span></h2>\
                             </div>\
                         </div>\
                         <div class="card col-lg-2">\
-                            <p class="data-title fw-bold">風扇馬達電流</p>\
+                            <p class="data-title fw-bold pt-3">風扇馬達電流</p>\
                             <div>\
-                                <h2 class="text-center">'+ obj2[i].tower_data.DCS.fanMotorCur + '</h2>\
-                                <P class="unit text-end">A</P>\
+                                <h2 class="data-content text-center mt-3 pb-3">'+ obj2[i].tower_data.DCS.fanMotorCur + '<span style="font-size:20px;">&ensp;A</span></h2>\
                             </div>\
                         </div>\
                         <div class="card col-lg-2">\
-                            <p class="data-title fw-bold ">風扇馬達轉速頻率</p>\
+                            <p  class="data-title fw-bold pt-3">風扇馬達轉速頻率</p>\
                             <div>\
-                                <h2 class="text-center">'+ obj2[i].tower_data.DCS.fanMotorSpeedFreq + '&ensp;</h2>\
-                                <P class="unit text-end">Hz</P>\
+                                <h2 class="data-content text-center mt-3 pb-3">'+ obj2[i].tower_data.DCS.fanMotorSpeedFreq + '<span style="font-size:20px;">&ensp;Hz</span></h2>\
                             </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>\
+                    <div class="mt-5">\
                         <div>\
                             <div class="row px-0 mx-0">\
                                 <div class="col-lg-6">\
-                                    <table style="font-size:16px;" class="table">\
-                                        <thead>\
+                                <div class="card">\
+                                <h1 style="color:#002e86">風扇震動</h1>\
+                                <div style="padding:15px">\
+                                    <table style="font-size: 16px; border-color:#4c6caa; border-top:1px solid #4c6caa;" class="table text-center">\
+                                        <thead style="background:#e4f8ff; color:#4c6caa;">\
                                           <tr>\
-                                            <th scope="col">數據名稱</th>\
-                                            <th scope="col">值</th>\
-                                            <th scope="col">單位</th>\
+                                            <th class="border-0" scope="col">數據名稱</th>\
+                                            <th class="border-0" scope="col">值</th>\
+                                            <th class="border-0" scope="col">單位</th>\
                                           </tr>\
                                         </thead>\
                                         <tbody>\
@@ -177,35 +173,40 @@ function tower_info(tower_str) {
                                           </tr>\
                                         </tbody>\
                                       </table>\
+                                      </div>\
+                                    </div>\
                                 </div>\
-                                <div class="col-lg-6">\
+                                <div style="margin-top:40px;" class="col-lg-6">\
+                                <div>\
+                                <h1 style="color:#002e86">馬達震動</h1>\
                                     <div class="row px-0 mx-0">\
                                         <div class="card col-lg-5">\
-                                            <p class="fw-bold ">ch001,通道1</p>\
+                                            <p class="fw-bold pt-4">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 pb-4">'+ 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>\
+                                            <p class="fw-bold pt-4">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 pb-4">'+ 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>\
+                                            <p class="fw-bold pt-4">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 pb-4">'+ 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>\
+                                            <p class="fw-bold pt-4">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 pb-4">'+ obj2[i].tower_data.Moter[3].Vrms + ',' + obj2[i].tower_data.Moter[3].CV + '</p>\
                                             </div>\
                                         </div>\
                                     </div>\
                                 </div>\
+                                </div>\
                             </div>\
                         </div>\
                     </div>';
@@ -326,22 +327,19 @@ function get_tower_perfrom(tower_id) {
 }
 
 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>\
+    inner = "<div class='mt-5'>\
             <div>\
                 <div class='row px-0  mx-0'>\
                     <div class='col-lg-6'>\
-                    <table style='font-size:16px;' class='table'>\
-                    <thead>\
+                    <div class='card h-100'>\
+                    <h1 style='color:#002e86'>設計條件</h1>\
+                    <div style='padding:15px'>\
+                    <table style='font-size: 16px; border-color:#4c6caa; border-top:1px solid #4c6caa;' class='table'>\
+                    <thead style='background:#e4f8ff; color:#4c6caa;'>\
                     <tr>\
-                    <th scope='col'>數據名稱</th>\
-                    <th scope='col'>值</th>\
-                    <th scope='col'>單位</th>\
+                    <th class='border-0' scope='col'>數據名稱</th>\
+                    <th class='border-0' scope='col'>值</th>\
+                    <th class='border-0' scope='col'>單位</th>\
                     </tr>\
                     </thead>\
                     <tbody>\
@@ -378,13 +376,18 @@ function tower_perform_show(obj_tmp) {
                     </tbody>\
                     </table>\
                     </div>\
+                    </div>\
+                    </div>\
                     <div class='col-lg-6'>\
-                    <table style='font-size:16px;' class='table'>\
-                    <thead>\
+                    <div class='card h-100'>\
+                    <h1 style='color:#002e86'>測試狀態</h1>\
+                    <div style='padding:15px'>\
+                    <table style='font-size: 16px; border-color:#4c6caa; border-top:1px solid #4c6caa;' class='table'>\
+                    <thead style='background:#e4f8ff; color:#4c6caa;'>\
                     <tr>\
-                    <th scope='col'>數據名稱</th>\
-                    <th scope='col'>值</th>\
-                    <th scope='col'>單位</th>\
+                    <th class='border-0' scope='col'>數據名稱</th>\
+                    <th class='border-0' scope='col'>值</th>\
+                    <th class='border-0' scope='col'>單位</th>\
                     </tr>\
                     </thead>\
                     <tbody>\
@@ -446,21 +449,23 @@ function tower_perform_show(obj_tmp) {
                     </tbody>\
                     </table>\
                     </div>\
+                    </div>\
+                    </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>";
+    // "測試狀態<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;
 
@@ -503,7 +508,7 @@ function get_predict() {
         for (var i = 0; i < obj3.data.length; i++) {
             labels.push(i);
         }
-        console.log(obj3)
+        console.log(obj3);
         var Data = {
             labels: labels, //顯示區間名稱
             datasets: [{
@@ -512,7 +517,7 @@ function get_predict() {
                 backgroundColor: "#ea464d",
                 borderColor: "#ea464d",
                 borderWidth: 5,
-                data: obj3.data, // 資料
+                data: obj3.data, // 資料 
                 fill: false, // 是否填滿色彩
             },]
         };
@@ -525,7 +530,7 @@ function drawLineCanvas(ctx, data) {
     window.myLine = new Chart(ctx, {  //先建立一個 chart
         type: 'line', // 型態
         data: data,
-        showSymbol:false,
+        showSymbol: false,
         options: {
             responsive: true,
             legend: { //是否要顯示圖示

static/vibration.js

@@ -80,12 +80,11 @@ function show_tower_info() {
                 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>\
+                    <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>'
             }

templates/channel.html

@@ -8,47 +8,116 @@
 {% block body %}
 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.js"></script>
 <script type="text/javascript" src="/static/channel.js"></script>
-<div id='select_boxes'>
-    <select class="select-item" id="company-list" onChange="onChangeColumn1();">
-        <option value=0>公司A</option>
-    </select>
-    <select class="select-item" id="factory-list" onChange="onChangeColumn2();">
-        <option value=0>工廠A</option>
-    </select>
-    <select class="select-item" id="department-list" onChange="onChangeColumn3();">
-        <option value=0>廠區A</option>
-    </select>
-    <select class="select-item" id="towerGroup-list">
-        <option value=0>機組1</option>
-    </select>
-    <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="text-white">
-        <select id="tower" onChange="show_tower_info();">
+<div style="overflow: hidden;">
+    <div id='select_boxes'>
+        <select class="select-item" id="company-list" onChange="onChangeColumn1();">
+            <option value=0>公司A</option>
+        </select>
+        <select class="select-item" id="factory-list" onChange="onChangeColumn2();">
+            <option value=0>工廠A</option>
+        </select>
+        <select class="select-item" id="department-list" onChange="onChangeColumn3();">
+            <option value=0>廠區A</option>
         </select>
+        <select class="select-item" id="towerGroup-list">
+            <option value=0>機組1</option>
+        </select>
+        <button class="me-0" id="tower_btn" onclick="click_button();"><i class="fas fa-search me-2"></i>搜尋</button>
+    </div>
+    <div id="select_boxes">
+        <div id="tower-img" class="text-white">
+            <select class="select-item" id="tower" onChange="show_tower_info();">
+            </select>
+        </div>
     </div>
-</div>
 
-<div id='channel_health'>
-    <div class="row px-0 mx-0">
-        <div class="col-lg-6 text-center">
-            <div>
-                <h1>健康指數</h1>
-                <canvas id="foo"></canvas>
-                <h1 style="color: #078B07;" class="text-center">86 &ensp;健康<i style="color: #078B07;"
-                        class="fas fa-check-circle ps-1"></i></h1>
+    <div id='channel_health'>
+        <div class="row">
+            <div class="col-lg-4">
+                <div class="h-100">
+                    <div class="card">
+                        <h1 style="color:#002e86;" class="pb-0">健康指數:<span style="color:#078B07;">86 &ensp;健康<i
+                                    style="color: #078B07;" class="fas fa-check-circle ps-1"></i></span></h1>
+                        <h1 class="my-0 py-0">
+                            <hr class="mt-1 mb-3" style="background:#002e86; height: 1px; opacity: 1;">
+                        </h1>
+                        <canvas id="foo"></canvas>
+                        <!-- <h1 style="color: #078B07;" class="text-center">86 &ensp;健康<i style="color: #078B07;"
+                                class="fas fa-check-circle ps-1"></i></h1> -->
+                    </div>
+                    <div class="card mb-0">
+                        <h1 style="color:#002e86;" class='pb-0'>預測健康指標:<span style="color:#078B07">89</span></h1>
+                        <h1 class="my-0 py-0">
+                            <hr class="mt-1 mb-3" style="background:#002e86; height: 1px; opacity: 1;">
+                        </h1>
+                        <canvas id="foo2"></canvas>
+                        <!-- <h1 style="color: #078B07;">89</h1> -->
+                    </div>
+                </div>
+            </div>
+            <div class="col-lg-8">
+                <div id='channel' style="height: 97%;" class="card pb-0"></div>
+            </div>
+        </div>
+    </div>
+    <div id='chart_info'></div>
+    </h1>
+    <div class="card mt-5">
+        <h1 style="color:#002e86;">預測資訊</h1>
+        <h1 class="my-0 py-0">
+            <hr class="mt-1 mb-3" style="background:#002e86; height: 1px; opacity: 1;">
+        </h1>
+        <p style="color:#002e86; padding-left: 15px; font-weight: 900;">預測結果:<span
+                style="color: #078B07;">&ensp;正常</span> 未來1125筆後CV值:<span style="color: #078B07;">&ensp;0.801</span></p>
+        <div style="padding:15px;">
+            <canvas id="channel_predict"></canvas>
+        </div>
+    </div>
+    <div class="card">
+        <h1 style="color:#002e86;">最新頻域圖</h1>
+        <h1 class="my-0 py-0">
+            <hr class="mt-1 mb-3" style="background:#002e86; height: 1px; opacity: 1;">
+        </h1>
+        <div style="padding:15px">
+            <canvas id="channel_frequency"></canvas>
+        </div>
+    </div>
+
+    <div class="card">
+        <h1 style="color:#002e86;">七日內健康指標累計圖表</h1>
+        <h1 class="my-0 py-0">
+            <hr class="mt-1 mb-3" style="background:#002e86; height: 1px; opacity: 1;">
+        </h1>
+        <div style="padding:30px">
+            <canvas id="CV_index"></canvas>
+        </div>
+    </div>
+    <div class="row">
+        <div class="col-lg-6">
+            <div class="card">
+                <h1 style="color:#002e86;">七日內 Vrms 累計圖表 (mm/s)</h1>
+                <h1 class="my-0 py-0">
+                    <hr class="mt-1 mb-3" style="background:#002e86; height: 1px; opacity: 1;">
+                </h1>
+                <div style="padding: 15px;">
+                    <canvas id="RPM"></canvas>
+                </div>
             </div>
         </div>
-        <div class="col-lg-6 text-center">
-            <div>
-                <h1>預測健康指標</h1>
-                <canvas id="foo2"></canvas>
-                <h1 style="color: #078B07;">89</h1>
+        <div class="col-lg-6">
+            <div class="card">
+                <h1 style="color:#002e86;">七日內 RMS 累計圖表 (g)</h1>
+                <h1 class="my-0 py-0">
+                    <hr class="mt-1 mb-3" style="background:#002e86; height: 1px; opacity: 1;">
+                </h1>
+                <div style="padding: 15px;">
+                    <canvas id="Vrms"></canvas>
+                </div>
             </div>
         </div>
     </div>
 </div>
+<div id='tower_perfrom'></div>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/gauge.js/1.3.7/gauge.min.js"
     integrity="sha512-J0d1VfdfTSDoDPEsahCtf2nC+groXdWkuQFyJjS+s3CpKj63X9Hf3pMEJtjIJt/ODh0QwTRx2/OioL+9fMoqSA=="
     crossorigin="anonymous" referrerpolicy="no-referrer"></script>
@@ -129,29 +198,5 @@
     gauge.set(89); // set actual valu
 </script>
 
-<div id='channel' class="card"></div>
-<div id='chart_info'></div>
 
-<h1 class="ps-3">預測資訊 預測結果 <span style="color: #078B07;">正常</span> 未來1125筆後CV值<span style="color: #078B07;">0.801</span> </h1>
-<div class="card">
-    <canvas id="channel_predict"></canvas>
-</div>
-<div class="card">
-    <canvas id="channel_frequency"></canvas>
-</div>
-
-<div class="card">
-    <div class="row px-0 mx-0">
-        <div class="col-lg-12">
-            <canvas id="CV_index"></canvas>
-        </div>
-        <div class="col-lg-6">
-            <canvas id="RPM"></canvas>
-        </div>
-        <div class="col-lg-6">
-            <canvas id="Vrms"></canvas>
-        </div>
-    </div>
-</div>
-<div id='tower_perfrom'></div>
 {% endblock %}

templates/home.html

@@ -12,26 +12,36 @@
 <p id="department_text" hidden></p>
 <p id="towergroup_text" hidden></p>
 
-<div class="card">
-    <h1 class="fw-bold">機組狀態</h1>
-
+<div>
+    <!-- <h1 style="color:#002E86;" class="fw-bold">機組狀態<span style="font-size: 16px;" id="company_name"></span></h1> -->
     <div id='factory'>
-        <p id='company_name'></p>
-        <div class="row px-0 mx-0">
-            <div class="col-lg-6">
-                <div>
-                    <div class="ps-3" id='company'></div>
-                    <div class="mb-3" id='factory_select'> </div>
-                </div>
+        <div style="font-size: 20px;" id='company'></div>
+        <div style="margin: 2.3vmin; padding: 15px;" class="row px-0 mb-0">
+            <div class="col-4">
+                <div id='company_name' class="mt-5"></div>
+            </div>
+            <div class="col-4">
+                <!-- <div style='margin: 2.3vmin; padding: 15px;' id='company_name' class="mt-5"></div> -->
+            </div>
+            <div class="col-4 d-flex align-items-end pe-0">
+                    <select style="display: none;" class="form-select w-100" id="department_list"
+                    onChange="department_change();"></select>
             </div>
-            <div class="col-lg-6">
-                <div style="display: none;" id="map"></div>
+        
+        </div>
+        <div>
+            <div class="row px-0 mx-0">
+                <div class="col-lg-5">
+                    <div class="mb-3" id='factory_select'></div>
+                </div>
+                <div class="col-lg-6">
+                    <div style="display: none;" id="map"></div>
+                </div>
             </div>
         </div>
     </div>
+    <!-- <div style='margin: 2.3vmin; padding: 15px;' id='company_name2'></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>

templates/index.html

@@ -7,11 +7,15 @@
   <!-- link -->
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"
     integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
+
   <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css"
     integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
+
   <link rel="stylesheet" href="/static/index.css">
+
   <script src="https://code.jquery.com/jquery-3.6.0.min.js"
     integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
+    
   <script type="text/javascript" charset="utf-8" src="/static/echarts.js "></script>
   <script type="text/javascript" src="/static/time.js"></script>
   <!-- <script type="text/javascript" charset="utf-8" src="static/echarts-liquidfill.js"></script> -->
@@ -20,8 +24,9 @@
 
 <body>
   <nav class="navbar navbar-expand-lg navbar-light">
+    <h1></h1>
     <div class="container-fluid">
-      <a class="navbar-brand" href="#"><img src="/static/img/PMS_LOGO.png" alt=""></a>
+      <a class="navbar-brand" href="#"><img src="/static/img/nav+sidebar/PMS_LOGO_白.png" alt=""></a>
       <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
         aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
         <span class="navbar-toggler-icon"></span>
@@ -42,14 +47,18 @@
   <div id='sitebody'>
     <div id="nav-side-bar" class="nav-side-bar">
       <ul>
-        <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="/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>
+        <li style="list-style-type: none;"><a href="/home" id="nav-home" class="side-bar-link py-1"><img class="side-img me-2" width="20" src="../static/img/nav+sidebar/Icon awesome-home.png" alt="">總覽</a></li>
+        <li style="list-style-type: none;"><a href="/tower" id="nav-tower" class="side-bar-link"><img class="side-img me-2" width="20" src="../static/img/nav+sidebar/Group 32.png" class="me-2" alt="">水塔監控</a></li>
+        <li style="list-style-type: none;"><a href="/optim" id="nav-optim" class="side-bar-link"><img class="side-img me-2" width="20" src="../static/img/nav+sidebar/Icon awesome-cloud.png" alt="">智能最佳化</a></li>
+        <li style="list-style-type: none;"><a href="/vibration" id="nav-vibration" class="side-bar-link"><img class="side-img me-2" width="20" src="../static/img/nav+sidebar/Icon awesome-chart-bar.png" alt="">振動監控</a></li>
+        <li style="list-style-type: none;"><a href="/history" id="nav-history" class="side-bar-link"><img class="side-img me-2" width="20" src="../static/img/nav+sidebar/Icon awesome-history.png" alt="">歷史資料</a></li>
+        <li style="list-style-type: none;"><a href="/device" id="nav-device" class="side-bar-link"><img class="side-img me-2" width="20" src="../static/img/nav+sidebar/Icon awesome-list-alt.png"  alt="">設備設定</a></li>
+        <li style="list-style-type: none;"><a href="/system" id="nav-system" class="side-bar-link"><img class="side-img me-2" width="20" src="../static/img/nav+sidebar/Icon ionic-ios-settings.png"  alt="">系統設定</a></li>
       </ul>
+      <div style="padding: 10px;">
+        <img class="img-fluid" src="../static/img/nav+sidebar/Group 33.png" alt="">
+      </div>
+      <p style="color:#002e86; font-size: 16px;" class="text-center">© 2021 - Version: v1.2.3</p>
     </div>
     <!-- <script>
       $(".side-bar-link").click(function () {
@@ -69,6 +78,7 @@
 
 
   </div>
+
   <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"
     integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p"
     crossorigin="anonymous"></script>

templates/optim.html

@@ -6,6 +6,13 @@
 
 
 {% block body %}
+<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.js"></script> -->
+<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/2.0.0-rc.1/chartjs-plugin-datalabels.min.js" integrity="sha512-+UYTD5L/bU1sgAfWA0ELK5RlQ811q8wZIocqI7+K0Lhh8yVdIoAMEs96wJAIbgFvzynPm36ZCXtkydxu1cs27w==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+<script src="../static/optim.js"></script>
+
+
+
 <script type="text/javascript" src="/static/tower.js"></script>
 
 <div id='select_boxes'>
@@ -21,43 +28,192 @@
   <select class="select-item" id="towerGroup-list">
     <option value=0>機組</option>
   </select>
-  <button id="tower_btn" onclick="click_button();"><i class="fas fa-search me-2"></i>搜尋</button>
-</div>
-<div class="ps-5 fw-bold">
-  <p>機組1 總共有{{count}}座水塔</p>
+  <button class="me-0" id="tower_btn" onclick="click_button();"><i class="fas fa-search me-3"></i>搜尋</button>
 </div>
 
 <body>
-  <div id="tower_temperature">
-    <div id="tower_temperature">
-      <div class="row px-0 mx-0">
-        <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>
-            <!-- <font size="1">{{ x }}</font><br> -->
-            <div id="app" class="chart"></div>
+  <div>
+    <div style="padding: 15px;">
+      <h1 class="mb-0" style="color:#002e86">機組1 總共有{{count}}座水塔</h1>
+    </div>
+    <div class="card">
+      <p  style="color:#002e86; padding: 15px;">濕球溫度預測:預測未來72小時濕球溫度不會低於下限</p>
+      <canvas  id="optim-predict"></canvas>
+    </div>
+    <div class="row px-0 mx-0 mb-5">
+      <div class="col-lg-8">
+        <div class="card2 h-100">
+          <div class="fw-bold">
+            <h1 class="mb-0" style="color:#002e86">水塔效能最佳化</h1>
+
+            <h1 class="mt-0 pt-0">
+              <hr class="my-1" style="background:#002e86; height: 1px; opacity: 1;">
+            </h1>
           </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> -->
-            <div id="app2"></div>
+          <div class="row px-0 mx-0">
+            <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> -->
+                <p style="color:#002e86;">熱水溫度(°C)</p>
+
+                <!-- <font size="1">{{ x }}</font><br> -->
+                <div style="margin-top: -60px;" 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> -->
+                <p style="color:#002e86;">冷水溫度(°C)</p>
+
+                <!-- <font size="1">{{ y }}</font><br> -->
+                <div style="margin-top: -60px;" style="margin-top: -80px;" id="app2"></div>
+              </div>
+            </div>
+            <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> -->
+                <p style="color:#002e86;">濕球溫度(°C)</p>
+
+                <!-- <font size="1">{{ z }}</font><br> -->
+                <div style="margin-top: -60px;" id="app3"></div>
+
+              </div>
+            </div>
           </div>
         </div>
-        <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> -->
-            <div id="app3"></div>
-
+      </div>
+      <div class="col-lg-4">
+        <div class="card2 h-100">
+          <h1 style="color:#002e86" class="mb-0">當前狀態</h1>
+          <h1 class="my-0 py-0">
+            <hr class="my-1" style="background:#002e86; height: 1px; opacity: 1;">
+          </h1>
+          <div style="font-weight:normal; padding: 15px;">
+            <table class="table table-borderless">
+              <tr>
+                <td>水流量</td>
+                <td>{{ waterflow }} M*3/H</td>
+              </tr>
+              <tr>
+                <td>風扇數</td>
+                <td>{{ fannum }} 台</td>
+              </tr>
+            </table>
           </div>
         </div>
       </div>
     </div>
 
+    <section class="tower_data my-3 mb-5">
+      <div class="row px-0 mx-0">
+        <div class="col-lg-6">
+          <div class="card2 h-100">
+            <h1 style="color:#002e86">效能最佳化</h1>
+            <h1 class="my-0 py-0">
+              <hr class="my-1" style="background:#002e86; height: 1px; opacity: 1;">
+            </h1>
+            <div style="padding: 15px;">
+              <table class="table">
+                <tr>
+                  <td>目前溫度</td>
+                  <td>{{ x }} 度C</td>
+                </tr>
+                <tr>
+                  <td>流量建議調整為</td>
+                  <td>{{ flowchange }} M*3/H</td>
+                </tr>
+                <tr>
+                  <td>可節省水費</td>
+                  <td>{{ savewater }} 元/天</td>
+                </tr>
+                <tr>
+                  <td>風扇建議調整為</td>
+                  <td>{{ fanchange }} 台</td>
+                </tr>
+                <tr>
+                  <td>可節省電費</td>
+                  <td>{{ saveelec }} 元/天</td>
+                </tr>
+                <tr>
+                  <td>總節省費用</td>
+                  <td>{{ total }} 元/天</td>
+                </tr>
+              </table>
+            </div>
+          </div>
+        </div>
+        <div class="col-lg-6">
+          <div class="card2 h-100">
+            <div class="horizontal flat">
+              <!-- <h1><i style="color:#0174c7;" class="far fa-chart-bar me-1"></i>測試驗證</h1> -->
+              <h1 style="color:#002e86">測試驗證</h1>
+              <h1 class="my-0 py-0">
+                <hr class="my-1" style="background:#002e86; height: 1px; opacity: 1;">
+              </h1>
+              <div class="progress-content" style="padding: 15px;">
+                <p class="mb-0">水流量:</p>
+                <div class="progress-group mb-2">
+                  <!-- <div class="progress-label d-flex align-items-center justify-content-end">水流量</div> -->
+                  <!-- <span>100%</span> -->
+                  <div class="progress-bar horizontal my-1">
+                    <div class="progress-track">
+                      <div class="progress-fill d-flex align-items-center justify-content-center">
+                        <span>100%</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <p class="mb-0">風扇數:</p>
+
+                <div class="progress-group mb-2">
+                  <!-- <div class="progress-label d-flex align-items-center justify-content-end">風扇數</div> -->
+                  <div class="progress-bar horizontal my-1">
+                    <div class="progress-track">
+                      <div class="progress-fill2 d-flex align-items-center justify-content-center">
+                        <span>75%</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <p class="mb-0">濕求溫度:</p>
+
+                <div class="progress-group mb-2">
+                  <!-- <div class="progress-label d-flex align-items-center justify-content-end">濕求溫度</div> -->
+                  <div class="progress-bar horizontal my-1">
+                    <div class="progress-track">
+                      <div class="progress-fill3 d-flex align-items-center justify-content-center">
+                        <span>60%</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <p class="mb-0">熱水溫度:</p>
+
+                <div class="progress-group">
+                  <!-- <div class="progress-label d-flex align-items-center justify-content-end">熱水溫度</div> -->
+                  <div class="progress-bar horizontal my-1">
+                    <div class="progress-track">
+                      <div class="progress-fill4 d-flex align-items-center justify-content-center">
+                        <span>20%</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
     <script src="/static/echarts.min.js"></script>
     <script src="/static/echarts-liquidfill.js"></script>
+    <script>
+      function navlinkactive() {
+        $('#nav-optim').addClass('active');
+
+      };
+      navlinkactive();
+    </script>
     <script>
       var hot = '{{x}}'
       var cold = '{{y}}'
@@ -83,9 +239,9 @@
               show: false
             },
             radius: '70%',
-                    outline: {
-                        show: false
-                    },
+            outline: {
+              show: false
+            },
             outline: {
               show: false
             },
@@ -124,9 +280,9 @@
               show: false
             },
             radius: '70%',
-                    outline: {
-                        show: false
-                    },
+            outline: {
+              show: false
+            },
             outline: {
               show: false
             },
@@ -161,9 +317,9 @@
               },
             }],
             radius: '70%',
-                    outline: {
-                        show: false
-                    },
+            outline: {
+              show: false
+            },
             outline: {
               show: false
             },
@@ -177,6 +333,11 @@
         ],
       });
     </script>
+    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.min.js"
+      integrity="sha512-Wt1bJGtlnMtGP0dqNFH1xlkLBNpEodaiQ8ZN5JLA5wpc1sUlk/O5uuOMNgvzddzkpvZ9GLyYNa8w2s7rqiTk5Q=="
+      crossorigin="anonymous" referrerpolicy="no-referrer"></script> -->
+
+    
     <!-- <script>
       const chart2 = echarts.init(document.getElementById("cold_water_data"));
       chart2.setOption({
@@ -206,74 +367,22 @@
         font-family: arial, sans-serif;
         border-collapse: collapse;
         width: 50%;
+        padding: 15px !important;
       }
 
       td,
       th {
-        border: 1px solid #dddddd;
+        border: none !important;
         text-align: left;
         padding: 8px;
+        font-size: 2.4vmin;
       }
 
       tr:nth-child(even) {
-        background-color: #dddddd;
+        background-color: #e4f8ff;
       }
     </style>
 
-    <section class="tower_data my-3">
-      <div class="card">
-        <div class="row px-0 mx-0">
-          <div class="col-lg-6">
-            <h1 class="ps-0">當前狀態</h1>
-          </div>
-          <div class="col-lg-6">
-            <h1 class="ps-0">效能最佳化</h1>
-          </div>
-        </div>
-        <div class="row px-0 mx-0">
-          <div class="col-lg-6">
-            <table class="table">
-              <tr>
-                <td>水流量</td>
-                <td>{{ waterflow }} M*3/H</td>
-              </tr>
-              <tr>
-                <td>風扇數</td>
-                <td>{{ fannum }} 台</td>
-              </tr>
-            </table>
-          </div>
-          <div class="col-lg-6">
-            <table class="table">
-              <tr>
-                <th>目前溫度</th>
-                <th>{{ x }} 度C</th>
-              </tr>
-              <tr>
-                <td>流量建議調整為</td>
-                <td>{{ flowchange }} M*3/H</td>
-              </tr>
-              <tr>
-                <td>可節省水費</td>
-                <td>{{ savewater }} 元/天</td>
-              </tr>
-              <tr>
-                <td>風扇建議調整為</td>
-                <td>{{ fanchange }} 台</td>
-              </tr>
-              <tr>
-                <td>可節省電費</td>
-                <td>{{ saveelec }} 元/天</td>
-              </tr>
-              <tr>
-                <td>總節省費用</td>
-                <td>{{ total }} 元/天</td>
-              </tr>
-            </table>
-          </div>
-        </div>
-      </div>
-    </section>
 
     <!-- <script src="/static/echarts.min.js"></script>
     <script src="/static/echarts-liquidfill.js"></script>
@@ -435,7 +544,7 @@
       }
     </style> -->
 
-    <div class="card mt-5">
+    <!-- <div class="card mt-5">
       <div class="horizontal flat">
         <h1><i style="color:#0174c7;" class="far fa-chart-bar me-1"></i>測試驗證</h1>
         <div class="progress-group">
@@ -478,24 +587,24 @@
             </div>
           </div>
         </div>
-      </div>
-      <script>$(function () {
-          $('.progress-fill span').each(function () {
-            var percent = $(this).html();
-            $(this).parent().css('width', percent);
-          });
-          $('.progress-fill2 span').each(function () {
-            var percent = $(this).html();
-            $(this).parent().css('width', percent);
-          });
-          $('.progress-fill3 span').each(function () {
-            var percent = $(this).html();
-            $(this).parent().css('width', percent);
-          });
-          $('.progress-fill4 span').each(function () {
-            var percent = $(this).html();
-            $(this).parent().css('width', percent);
-          });
-        });</script>
-
-      {% endblock %}
+      </div> -->
+    <script>$(function () {
+        $('.progress-fill span').each(function () {
+          var percent = $(this).html();
+          $(this).parent().css('width', percent);
+        });
+        $('.progress-fill2 span').each(function () {
+          var percent = $(this).html();
+          $(this).parent().css('width', percent);
+        });
+        $('.progress-fill3 span').each(function () {
+          var percent = $(this).html();
+          $(this).parent().css('width', percent);
+        });
+        $('.progress-fill4 span').each(function () {
+          var percent = $(this).html();
+          $(this).parent().css('width', percent);
+        });
+      });</script>
+    <!-- <script></script> -->
+    {% endblock %}

templates/system.html

@@ -6,20 +6,49 @@
 
 
 {% block body %}
-    <div class="card">
-        <div id="tmp" class="mb-4">
-            <button type="button" class="btn btn-outline-primary me-3">使用者</button>
-            <button type="button" class="btn btn-outline-primary me-3">聯絡人</button>
-            <button type="button" class="btn btn-outline-primary me-3">環境設置</button>
-            <button type="button" class="btn btn-outline-primary me-3">LINE群組設定</button>
-    
-        </div>
-        <div id="info_table">
-            
-        </div>
-        <div style="width: 40vw;" id="member_auth">
-    
+<div>
+    <div id="tmp" style="padding:15px;" class="my-3">
+        <div style="padding-left:15px;">
+            <button type="button"
+                style="padding:10px 30px; background:#FFF; color:#002E86; border: 1px solid #002E86; border-radius: 10px; font-size:16px;"
+                class="me-2 fw-bold system-btn">使用者</button>
+            <button type="button"
+                style="padding:10px 30px; background:#FFF; color:#002E86; border: 1px solid #002E86; border-radius: 10px; font-size:16px;"
+                class="me-2 fw-bold system-btn">聯絡人</button>
+            <button type="button"
+                style="padding:10px 30px; background:#FFF; color:#002E86; border: 1px solid #002E86; border-radius: 10px; font-size:16px;"
+                class="me-2 fw-bold system-btn">環境設置</button>
+            <button type="button"
+                style="padding:10px 30px; background:#FFF; color:#002E86; border: 1px solid #002E86; border-radius: 10px; font-size:16px;"
+                class="me-2 fw-bold system-btn">LINE群組設定</button>
         </div>
     </div>
-    <script type="text/javascript" src="static/table.js"></script>
+    <div id="info_table"></div>
+    <div style="padding:15px">
+        <div style="width: 40vw;" id="member_auth"></div>
+    </div>
+</div>
+<script type="text/javascript" src="static/table.js"></script>
+<script>
+    function navlinkactive() {
+        $('#nav-system').addClass('active');
+    }
+    navlinkactive();
+
+    // $(document).on("click", ".system-btn", function (event) {
+    //     $(this).addClass("tower-active");
+    //     $(".tower-active").siblings().removeClass('tower-active');
+    // });
+
+    $('.system-btn').click(function() {
+        $(this).addClass("tower-active");
+        // $(".tower-active").siblings().removeClass('tower-active');
+    });
+
+
+    // $('.system-btn').click(function() {
+    //     $(this).addClass("tower-active");
+    //     $(".tower-active").siblings().removeClass('tower-active');
+    // });
+</script>
 {% endblock %}

templates/tower.html

@@ -40,14 +40,22 @@
     <select class="select-item" id="towerGroup-list">
         <option value=0>機組1</option>
     </select>
-    <button id="tower_btn" onclick="click_button();"><i class="fas fa-search me-2"></i>搜尋</button>
+    <button class="me-0" 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="card pb-5">
+        <h1 style="color:#002e86">監控區</h1>
+        <h1 class="my-0 py-0">
+            <hr class="mt-1 mb-5" style="background:#002e86; height: 1px; opacity: 1;">
+        </h1>
         <div class="text-center">
-            <img style="width: 80%;" src="/static/img/1631004814192.jpg" class="img-fluid" alt="...">
+            <img style="width: 60%;" src="/static/img/1631004814192.jpg" class="img-fluid" alt="...">
         </div>
-        <div class="mt-3" id="tower">
+    </div>
+    <div style="padding: 15px;">
+        <h1 style="color:#002e86">水塔資訊</h1>
+        <div style="padding: 15px;">
+            <div id="tower"></div>
         </div>
     </div>
 </div>
@@ -55,7 +63,22 @@
 <div id='tower_info'></div>
 <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>
+    <h1 style="color:#002e86">水塔效能趨勢圖</h1>
+    <h1 class="my-0 py-0">
+        <hr class="mt-1 mb-3" style="background:#002e86; height: 1px; opacity: 1;">
+    </h1>
+    <div style="padding: 15px;">
+        <canvas style="width: 50%;" id="channel_predict"></canvas>
+    </div>
 </div>
+
+<script>
+    function navlinkactive() {
+        $('#nav-tower').addClass('active');
+    }
+    navlinkactive();
+
+  
+
+</script>
 {% endblock %}

templates/vibration.html

@@ -12,7 +12,7 @@
         
     </div>
     <div id="history_record" style="width: 600px;height:600px;float:right"></div>
-    
+ 
     <script>
         var curr_health = echarts.init(document.getElementById("curr_health"));
         var pred_health = echarts.init(document.getElementById("pred_health"));

templates/vibration_test.html

@@ -8,105 +8,130 @@
 {% block body %}
 
 <script type="text/javascript" src="/static/vibration.js"></script>
-<div id='select_boxes'>
-    <select class="select-item" id="company-list" onChange="onChangeColumn1();">
-        <option value=0>公司A</option>
-    </select>
-    <select class="select-item" id="factory-list" onChange="onChangeColumn2();">
-        <option value=0>工廠A</option>
-    </select>
-    <select class="select-item" id="department-list" onChange="onChangeColumn3();">
-        <option value=0>廠區A</option>
-    </select>
-    <select class="select-item" id="towerGroup-list">
-        <option value=0>機組1</option>
-    </select>
-    <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="text-white p-3">
-        <select id="tower" onChange="show_tower_info();">
+<div style="overflow: hidden;">
+    <div id='select_boxes'>
+        <select class="select-item" id="company-list" onChange="onChangeColumn1();">
+            <option value=0>公司A</option>
+        </select>
+        <select class="select-item" id="factory-list" onChange="onChangeColumn2();">
+            <option value=0>工廠A</option>
+        </select>
+        <select class="select-item" id="department-list" onChange="onChangeColumn3();">
+            <option value=0>廠區A</option>
         </select>
+        <select class="select-item" id="towerGroup-list">
+            <option value=0>機組1</option>
+        </select>
+        <button class="me-0" id="tower_btn" onclick="click_button();"><i class="fas fa-search me-2"></i>搜尋</button>
     </div>
-</div>
-<div class="state card">
-    <div class="row px-0 mx-0">
-        <div class="col-lg-6">
-            <div class="row px-0 mx-0">
-                <div class="col-lg-6 py-3">
-
-                    <img style="object-fit: cover; width: 200px; height: 200px;border-radius: 50%;" class="img-fluid" src="/static/img/dev001.png" alt="">
- 
-                </div>
-                <div class="col-lg-6 py-3">
-                    <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 id="select_boxes">
+        <div id="tower-img">
+            <select class="select-item" id="tower" onChange="show_tower_info();">
+            </select>
+        </div>
+    </div>
+    <div class="state">
+        <div class="row">
+            <div class="col-lg-8 pe-0">
+                <div class="card h-100">
+                    <div>
+                        <div style="float:left;" class="device">
+                            <h1 style="color:#002e86;" class="fw-bold mb-0">設備狀態:<span style="color: #078B07;">健康<i
+                                        class="fas fa-check-circle ps-1"></i></span></h1>
+                            <!-- <h1 style="color: #078B07;"></h1> -->
+                        </div>
+                        <div style="float:left;" class="Connect">
+                            <h1 style="color:#002e86;" class="fw-bold mb-0">連線狀態:<span style="color: #078B07;">正常<i
+                                        class="fas fa-check-circle ps-1"></i></span></h1>
+                        </div>
+                        <div style="float:left; margin-top: 15px;">
+                            <p class="mb-0">最後更新時間:2021/09/15 18:09</p>
+                        </div>
                     </div>
-                    <div class="Connect">
-                        <p class="fw-bold mb-0">連線狀態:</p>
-                        <h1 style="color: #078B07;">正常</h1>
+                    <h1 class="my-0 py-0">
+                        <hr class="my-1" style="background:#002e86; height: 1px; opacity: 1;">
+                    </h1>
+                    <div>
+                        <div class="row px-0 mx-0">
+                            <div class="col-lg-6">
+                                <img class="img-fluid w-100 mt-4" src="/static/img/dev001.png" alt="">
+                            </div>
+                            <div class="col-lg-3">
+                                <img class="img-fluid mt-2" src="/static/img/dev001-pic1.png" alt="">
+                                <img class="img-fluid mt-2" src="/static/img/dev001-pic2.png" alt="">
+                            </div>
+                            <div style="color:#002e86" class="col-lg-3 py-3 px-0 fw-bold">
+                                <div style="margin-top: 50px;">
+                                    <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>
+                        </div>
                     </div>
                 </div>
             </div>
-        </div>
-        <div class="col-lg-6 py-3">
-            <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>
-                <p class="mb-0 mt-5">最後更新時間:2021/09/15 18:09</p>
+            <div class="col-lg-4 ps-0">
+                <div class="card h-100">
+                    <h1 style="color:#002e86">通道雷達圖</h1>
+                    <h1 class="my-0 py-0">
+                        <hr class="my-1" style="background:#002e86; height: 1px; opacity: 1;">
+                    </h1>
+                </div>
             </div>
-
         </div>
-        <hr>
-        <div class="col-lg-12">
-            <div style="width: 60%; margin: auto;">
-                <div class="row px-0 mx-0">
-                    <div class="col-lg-6">
-                        <img class="img-fluid" src="/static/img/dev001-pic1.png" alt="">
+    </div>
+    <div id='test'></div>
+    
+    <div class="my-5">
+        <div class="row">
+            <div class="col-lg-5 pe-0">
+                <div class="card h-100">
+                    <h1 style="color:#002e86;">通道照片</h1>
+                    <h1 class="my-0 py-0">
+                        <hr class="my-1" style="background:#002e86; height: 1px; opacity: 1;">
+                    </h1>
+                    <div style="padding: 15px;">
+                        <img class="img-fluid mt-3" src="/static/img/dev001-chl.png" alt="">
                     </div>
-                    <div class="col-lg-6">
-                        <img class="img-fluid" src="/static/img/dev001-pic2.png" alt="">
+                </div>
+            </div>
+            <div class="col-lg-7 ps-0">
+                <div class="card h-100">
+                    <h1 class="pb-0" style="color:#002e86;">通道列表</h1>
+                    <div style="padding:15px;">
+                        <table style="font-size: 16px; border-color:#4c6caa; border-top:1px solid #4c6caa;" class="table text-center">
+                            <thead style="background:#e4f8ff; color:#4c6caa;">
+                                <tr>
+                                    <th class="border-0">編號</th>
+                                    <th class="border-0">vrms(mm/s)</th>
+                                    <th class="border-0">健康狀態</th>
+                                    <th class="border-0">健康指標</th>
+                                    <th class="border-0">連線運作狀態</th>
+                                </tr>
+                            <tbody id="tower_info">
+            
+                            </tbody>
+                            </thead>
+                        </table>
                     </div>
                 </div>
             </div>
+    
         </div>
     </div>
+    <div id='tower_perfrom'></div>
 </div>
-<div id='test'></div>
 
-<div class="card mt-5">
-    <div class="row px-0 mx-0">
-        <div class="col-lg-6">
-            <h1>通道照片</h1>
-            <img class="img-fluid" src="/static/img/dev001-chl.png" alt="">
-        </div>
-        <div class="col-lg-6">
-            <h1>通道列表</h1>
-            <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>
-</div>
-<div id='tower_perfrom'></div>
+
+<script>
+    function navlinkactive() {
+        $('#nav-vibration').addClass('active');
+    }
+    navlinkactive();
+</script>
 {% endblock %}