update

static/channel.js

@@ -152,11 +152,11 @@ xhr.send();
 function insertHTML(data){
     console.log(data);
     //aria.innerHTML=data[0].tower_name;
-    var inner='<table> <tr> <th>主軸分析 </th><th>軸承分析 </th><th>馬達分析 </th><th>齒輪分析 </th> </tr> <tr>';
-    inner+='<td>正常 不平衡 '+data.DW_Unbalance+'</td><td>正常 油膜旋震 '+data.DW_Whirl+'</td><td>正常 氣隙不均 '+data.DW_AirGap+'</td><td>正常 齒輪不對中 '+data.DW_GMisalignment+'</td></tr><tr>';
-    inner+='<td>正常 軸彎曲 '+data.DW_Unbalance+'</td><td>正常 油膜晃蕩 '+data.DW_Whirl+'</td><td>正常 轉子條斷裂 '+data.DW_AirGap+'</td><td>正常 齒輪斷齒 '+data.DW_GMisalignment+'</td></tr><tr>';
-    inner+='<td>正常 不對中 '+data.DW_Unbalance+'</td><td>正常 內還損傷 '+data.DW_Whirl+'</td><td>正常 相位問題 '+data.DW_AirGap+'</td><td>正常 齒輪磨損 '+data.DW_GMisalignment+'</td></tr><tr>';
-    inner+='<td>正常 鬆動 '+data.DW_Unbalance+'</td><td>正常 外環損傷 '+data.DW_Whirl+'</td><td></td><td>正常 齒輪彎曲 '+data.DW_GMisalignment+'</td></tr><tr>';
+    var inner='<table style="font-size:16px;" class="table"> <tr> <th>主軸分析 </th><th>軸承分析 </th><th>馬達分析 </th><th>齒輪分析 </th> </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><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>';
     
     document.getElementById("channel").innerHTML=inner;
@@ -165,6 +165,7 @@ function insertHTML(data){
 get_data();
 get_chart_data();
 
+// 三張圖表
 function get_chart_data(){
     var xhr = new XMLHttpRequest();
     var url = "channel_chart/dev001/ch01";
@@ -181,7 +182,7 @@ function get_chart_data(){
                     lineTension: 0, // 曲線的彎度，設0 表示直線
                     backgroundColor: "#ea464d",
                     borderColor: "#ea464d",
-                    borderWidth: 5,
+                    borderWidth: 3,
                     data:obj[i].data, // 資料
                     fill: false, // 是否填滿色彩
                 },]
@@ -222,23 +223,81 @@ function drawLineCanvas(ctx,data) {
                 tooltips: { //是否要顯示 tooltip
                     enabled: true
                 },
-                scales: {  //是否要顯示 x、y 軸
+                scales: {  //是否要顯示 x、y 軸               
                     xAxes: [{
                         display: true
                     }],
                     yAxes: [{
-                        display: true
+                        display: true,
                     }]
                 },
             }
     });
 };
 
+function drawLineCanvas2(ctx,data) {
+    window.myLine = new Chart(ctx, {  //第二個 chart
+        type: 'line', // 型態
+        data: data,
+        options: {
+                responsive: true,
+                legend: { //是否要顯示圖示
+                    display: true,
+                },
+                tooltips: { //是否要顯示 tooltip
+                    enabled: true
+                },
+                elements:{
+                    point:{
+                        radius:0
+                    }
+                },
+                scales: {  //是否要顯示 x、y 軸               
+                    xAxes: [{
+                        display: true,
+                    }],
+                    yAxes: [{
+                        display: true,
+                        ticks:{
+                            beginAtZero:true,
+                            stepSize:0.1,
+                            max:0.6,
+                        }
+                    }]
+                },
+            }
+    });
+};
+
+function drawLineCanvas(ctx,data) {
+    window.myLine = new Chart(ctx, {  //先建立一個 chart
+        type: 'line', // 型態
+        data: data,
+        options: {
+                responsive: true,
+                legend: { //是否要顯示圖示
+                    display: true,
+                },
+                tooltips: { //是否要顯示 tooltip
+                    enabled: true
+                },
+                scales: {  //是否要顯示 x、y 軸               
+                    xAxes: [{
+                        display: true
+                    }],
+                    yAxes: [{
+                        display: true,
+                    }]
+                },
+            }
+    });
+};
 // window.onload = function () {
 //     var ctx = document.getElementById("canvas").getContext("2d");
 //     drawLineCanvas(ctx,lineChartData);
 // };
 get_predict();
+// 第四張
 function get_predict(){
     var xhr = new XMLHttpRequest();
     var url = "channel_predict/dev001/ch01";
@@ -248,6 +307,7 @@ function get_predict(){
     xhr.onload = function(){
         obj3 = JSON.parse(xhr.responseText);
         labels = new Array();
+       
         for(var i=0;i<obj3.data.length;i++){
             labels.push(i);
         }
@@ -258,7 +318,7 @@ function get_predict(){
                 lineTension: 0, // 曲線的彎度，設0 表示直線
                 backgroundColor: "#ea464d",
                 borderColor: "#ea464d",
-                borderWidth: 5,
+                borderWidth: 3,
                 data:obj3.data, // 資料
                 fill: false, // 是否填滿色彩
             },]
@@ -268,6 +328,7 @@ function get_predict(){
     };
     xhr.send();
 }
+// 第五張
 get_frequency();
 function get_frequency(){
     var xhr = new XMLHttpRequest();
@@ -275,6 +336,7 @@ function get_frequency(){
     obj4="";
 
     xhr.open("GET",url);
+    console.log(obj4.value)
     xhr.onload = function(){
         obj4 = JSON.parse(xhr.responseText);
         var Data = {
@@ -284,13 +346,15 @@ function get_frequency(){
                 lineTension: 0, // 曲線的彎度，設0 表示直線
                 backgroundColor: "#ea464d",
                 borderColor: "#ea464d",
-                borderWidth: 5,
+                borderWidth: 2,
                 data:obj4.value, // 資料
                 fill: false, // 是否填滿色彩
             },]
         };
         var ctx = document.getElementById("channel_frequency").getContext("2d");
-        drawLineCanvas(ctx,Data);
+        drawLineCanvas2(ctx,Data);
     };
     xhr.send();
-}
+}
+
+

static/home.js

@@ -56,7 +56,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+="<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>";
             company_arr.push(obj[1][i].company);
             console.log(obj[1][i].company);

static/index.css

@@ -353,4 +353,5 @@ h1{
   }
   #system-table{
     border:none !important;
-  }
+  }
+

templates/channel.html

@@ -24,19 +24,134 @@
     <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">
         <select id="tower" onChange="show_tower_info();">
         </select>
     </div>
 </div>
-<div id='channel'></div>
-<div id='channel_health'><p>健康指數:86 預測健康指標:89</p></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>
+        </div>
+        <div class="col-lg-6 text-center">
+            <div>
+                <h1>預測健康指標</h1>
+                <canvas id="foo2"></canvas>
+                <h1 style="color: #078B07;">89</h1>
+            </div>
+        </div>
+    </div>
+</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>
+<script>
+    // 儀錶板
+    var opts = {
+        angle: 0, // The span of the gauge arc
+        lineWidth: 0.5, // The line thickness
+        radiusScale: 1, // Relative radius
+        pointer: {
+            length: 0.6, // // Relative to gauge radius
+            strokeWidth: 0.035, // The thickness
+            color: '#000000' // Fill color
+        },
+        staticZones: [
+            { strokeStyle: "#F03E3E", min: 0, max: 30 }, // Red from 100 to 130
+            { strokeStyle: "#FFDD00", min: 30, max: 50 }, // Yellow
+            { strokeStyle: "#30B32D", min: 50, max: 100 }, // Green
+        ],
+        staticLabels: {
+            font: "16px sans-serif",  // Specifies font
+            labels: [30, 50, 100],  // Print labels at these values
+            color: "#000000",  // Optional: Label text color
+            fractionDigits: 0  // Optional: Numerical precision. 0=round off.
+        },
+        limitMax: false,     // If false, max value increases automatically if value > maxValue
+        limitMin: false,     // If true, the min value of the gauge will be fixed
+        colorStart: '#6FADCF',   // Colors
+        colorStop: '#8FC0DA',    // just experiment with them
+        strokeColor: '#E0E0E0',  // to see which ones work best for you
+        generateGradient: true,
+        highDpiSupport: true,     // High resolution support
+
+    };
+    var target = document.getElementById('foo'); // your canvas element
+    var gauge = new Gauge(target).setOptions(opts); // create sexy gauge!
+    gauge.maxValue = 100; // set max gauge value
+    gauge.setMinValue(0);  // Prefer setter over gauge.minValue = 0
+    gauge.animationSpeed = 1; // set animation speed (32 is default value)
+    gauge.set(86); // set actual valu
+</script>
+<script>
+    // 儀錶板
+    var opts = {
+        angle: 0, // The span of the gauge arc
+        lineWidth: 0.5, // The line thickness
+        radiusScale: 1, // Relative radius
+        pointer: {
+            length: 0.6, // // Relative to gauge radius
+            strokeWidth: 0.035, // The thickness
+            color: '#000000' // Fill color
+        },
+        staticZones: [
+            { strokeStyle: "#F03E3E", min: 0, max: 30 }, // Red from 100 to 130
+            { strokeStyle: "#FFDD00", min: 30, max: 50 }, // Yellow
+            { strokeStyle: "#30B32D", min: 50, max: 100 }, // Green
+        ],
+        staticLabels: {
+            font: "16px sans-serif",  // Specifies font
+            labels: [30, 50, 100],  // Print labels at these values
+            color: "#000000",  // Optional: Label text color
+            fractionDigits: 0  // Optional: Numerical precision. 0=round off.
+        },
+        limitMax: false,     // If false, max value increases automatically if value > maxValue
+        limitMin: false,     // If true, the min value of the gauge will be fixed
+        colorStart: '#6FADCF',   // Colors
+        colorStop: '#8FC0DA',    // just experiment with them
+        strokeColor: '#E0E0E0',  // to see which ones work best for you
+        generateGradient: true,
+        highDpiSupport: true,     // High resolution support
+
+    };
+    var target = document.getElementById('foo2'); // your canvas element
+    var gauge = new Gauge(target).setOptions(opts); // create sexy gauge!
+    gauge.maxValue = 100; // set max gauge value
+    gauge.setMinValue(0);  // Prefer setter over gauge.minValue = 0
+    gauge.animationSpeed = 1; // set animation speed (32 is default value)
+    gauge.set(89); // set actual valu
+</script>
+
+<div id='channel' class="card"></div>
 <div id='chart_info'></div>
-<p>預測資訊 預測結果 正常 未來1125筆後CV值 0.801</p>
-<canvas id="channel_predict" width="40" height="40"></canvas>
-<canvas id="channel_frequency" width="40" height="40"></canvas>
-<canvas id="CV_index" width="40" height="40"></canvas>
-<canvas id="RPM" width="40" height="40"></canvas>
-<canvas id="Vrms" width="40" height="40"></canvas>
+
+<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/index.html

@@ -70,6 +70,7 @@
     integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT"
     crossorigin="anonymous"></script>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
+  <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>
   <script type="text/javascript" src="/static/index.js"></script>
 </body>
 

templates/optim.html

@@ -227,7 +227,7 @@
             <h1 class="ps-0">當前狀態</h1>
           </div>
           <div class="col-lg-6">
-            <h1 class="ps-0">校能最佳化</h1>
+            <h1 class="ps-0">效能最佳化</h1>
           </div>
         </div>
         <div class="row px-0 mx-0">

templates/vibration_test.html

@@ -61,6 +61,7 @@
 </div>
 <div id='test'></div>
 <div class="card mt-5">
+    <h1>通道列表</h1>
     <table style="font-size: 16px;" class="table text-center">
         <thead>
             <tr>