上傳檔案到 'static'

static/channel.js

@@ -1,12 +1,150 @@
+obj="";
+obj2 = "";
+get_org();
+function get_org(){
+    var xhr = new XMLHttpRequest();
+    var url = "/org";
+   
+    xhr.open("GET",url);
+    xhr.onload = function(){
+        obj = JSON.parse(xhr.responseText);
+        //insertHTML();
+        start();
+        onChangeColumn1();
+        onChangeColumn2();
+        onChangeColumn3();
+
+    click_button();
+
+};
+xhr.send();
+}
+
+function insertHTML2(data){
+    
+    //aria.innerHTML=data[0].tower_name;
+    var inner='';
+    for(var i=0;i<data.length;i++){
+        inner+='<option value="'+data[i].tower_name+'">'+data[i].tower_name+'</option>';
+    }
+    document.getElementById("tower").innerHTML=inner;
+}
+
+function click_button() {
+    //alert("click");
+    companySelect=document.getElementById("company-list");
+    factorySelect=document.getElementById("factory-list");
+    departmentSelect=document.getElementById("department-list");
+    towerGroupSelect=document.getElementById("towerGroup-list");
+    if(companySelect.value!=0 && factorySelect.value!=0 && departmentSelect.value!=0 && towerGroupSelect.value!=0){
+        var url2 = "tower/?company="+ companySelect.value + "&factory=" +  factorySelect.value + "&department=" +departmentSelect.value + "&towerGroup=" +towerGroupSelect.value ;
+        var xhr2 = new XMLHttpRequest();
+        xhr2.open("GET",url2);
+        xhr2.onload = function(){
+            obj2 = JSON.parse(xhr2.responseText);
+            insertHTML2(obj2);
+            console.log(obj2);
+            
+        };
+        xhr2.send();
+    }
+    
+  }
+
+  function start(){
+    companySelect=document.getElementById("company-list");
+    factorySelect=document.getElementById("factory-list");
+    departmentSelect=document.getElementById("department-list");
+    towerGroupSelect=document.getElementById("towerGroup-list");
+    var inner='';
+    var company_arr = new Array();
+    
+    for(var i=0;i<obj.length;i++){
+        if(company_arr.indexOf(obj[i].company)==-1 && obj[i].able==1){
+            inner=inner+'<option value="'+obj[i].company+'">公司'+obj[i].company+'</option>';
+            company_arr.push(obj[i].company);
+        }
+    }
+    
+    //innerHTML 賦值inner給這element屬性
+    companySelect.innerHTML=inner;
+}
+//製造一個字串，以html的語法填入院的陣列
+
+
+
+function onChangeColumn1() {
+    companySelect=document.getElementById("company-list");
+    factorySelect=document.getElementById("factory-list");
+    departmentSelect=document.getElementById("department-list");
+    towerGroupSelect=document.getElementById("towerGroup-list");
+    factorySelect.innerHTML='';
+    let factory_arr = new Array();
+    let factory_inner = '';
+    for(var i=0;i<obj.length;i++){
+        
+        if( companySelect.value == obj[i].company){
+            if(factory_arr.indexOf(obj[i].factory)==-1 && obj[i].able==1){
+                factory_inner=factory_inner+'<option value="'+obj[i].factory+'">廠區'+obj[i].factory+'</option>';
+                factory_arr.push(obj[i].factory);
+            }
+        }
+        //alert(companySelect.value);
+    }
+    
+    factorySelect.innerHTML=factory_inner;
+}
+
+function onChangeColumn2() {
+    companySelect=document.getElementById("company-list");
+    factorySelect=document.getElementById("factory-list");
+    departmentSelect=document.getElementById("department-list");
+    towerGroupSelect=document.getElementById("towerGroup-list");
+    departmentSelect.innerHTML='';
+    let department_arr = new Array();
+    let department_inner = '';
+    for(var i=0;i<obj.length;i++){
+        if( companySelect.value == obj[i].company && factorySelect.value == obj[i].factory){
+            if(department_arr.indexOf(obj[i].department)==-1 && obj[i].able==1){
+                department_inner=department_inner+'<option value="'+obj[i].department+'">課'+obj[i].department+'</option>';
+                department_arr.push(obj[i].department);
+            }
+        }
+        
+    }
+    document.getElementById("department-list").innerHTML=department_inner;
+}
+
+function onChangeColumn3() {
+    companySelect=document.getElementById("company-list");
+    factorySelect=document.getElementById("factory-list");
+    departmentSelect=document.getElementById("department-list");
+    towerGroupSelect=document.getElementById("towerGroup-list");
+    towerGroupSelect.innerHTML='';
+    let towerGroup_inner = '';
+    for(var i=0;i<obj.length;i++){
+        if( companySelect.value == obj[i].company && factorySelect.value == obj[i].factory && departmentSelect.value == obj[i].department){
+            if( obj[i].able==1){
+                for(var ii=0;ii<obj[i].group.length;ii++){
+                    towerGroup_inner=towerGroup_inner+'<option value="'+obj[i].group[ii]+'">機組'+obj[i].group[ii]+'</option>';
+                }
+            }
+        }
+        
+    }
+    document.getElementById("towerGroup-list").innerHTML= towerGroup_inner;
+}
+
 function get_data(){
     var xhr = new XMLHttpRequest();
     var url = "channel/dev001/ch01";
-    obj="";
+    obj3="";
 
     xhr.open("GET",url);
     xhr.onload = function(){
-        obj = JSON.parse(xhr.responseText);
-        insertHTML(obj);
+        obj3 = JSON.parse(xhr.responseText);
+        insertHTML(obj3);
+        console.log(obj3);
 };
 xhr.send();
 }
@@ -15,11 +153,11 @@ 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>';
-    inner+='<td> </td><td>滾珠損傷 '+data.DW_Whirl+'</td><td></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>正常 相位問題 '+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>';
+    inner+='<td> </td><td>正常 滾珠損傷 '+data.DW_Whirl+'</td><td></td><td>正常 齒輪偏心 '+data.DW_GMisalignment+'</td></tr><tr>';
     
     document.getElementById("channel").innerHTML=inner;
 }
@@ -35,8 +173,124 @@ function get_chart_data(){
     xhr.open("GET",url);
     xhr.onload = function(){
         obj = JSON.parse(xhr.responseText);
-        document.getElementById("chart_info").innerHTML=obj;
-        console.log(obj[0]);
+        for(var i=0;i<obj.length;i++){
+            var Data = {
+                labels: ["9/18", "9/19", "9/20", "9/21", "9/22", "9/23", "9/24"], //顯示區間名稱
+                datasets: [{
+                    label: obj[i].name, // tootip 出現的名稱
+                    lineTension: 0, // 曲線的彎度，設0 表示直線
+                    backgroundColor: "#ea464d",
+                    borderColor: "#ea464d",
+                    borderWidth: 5,
+                    data:obj[i].data, // 資料
+                    fill: false, // 是否填滿色彩
+                },]
+            };
+            var ctx = document.getElementById(obj[i].name).getContext("2d");
+            drawLineCanvas(ctx,Data);
+
+        }
 };
 xhr.send();
+}
+
+
+
+
+// var lineChartData = {
+//     labels: ["9/18", "9/19", "9/20", "9/21", "9/22", "9/23", "9/24"], //顯示區間名稱
+//     datasets: [{
+//         label: '未曾使用', // tootip 出現的名稱
+//         lineTension: 0, // 曲線的彎度，設0 表示直線
+//         backgroundColor: "#ea464d",
+//         borderColor: "#ea464d",
+//         borderWidth: 5,
+//         data: [10, 12, 15, 18, 22, 33, 50, 60, 130], // 資料
+//         fill: false, // 是否填滿色彩
+//     },]
+// };
+
+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";
+    obj3="";
+
+    xhr.open("GET",url);
+    xhr.onload = function(){
+        obj3 = JSON.parse(xhr.responseText);
+        labels = new Array();
+        for(var i=0;i<obj3.data.length;i++){
+            labels.push(i);
+        }
+        var Data = {
+            labels: labels, //顯示區間名稱
+            datasets: [{
+                label: "predict", // tootip 出現的名稱
+                lineTension: 0, // 曲線的彎度，設0 表示直線
+                backgroundColor: "#ea464d",
+                borderColor: "#ea464d",
+                borderWidth: 5,
+                data:obj3.data, // 資料
+                fill: false, // 是否填滿色彩
+            },]
+        };
+        var ctx = document.getElementById("channel_predict").getContext("2d");
+        drawLineCanvas(ctx,Data);
+    };
+    xhr.send();
+}
+get_frequency();
+function get_frequency(){
+    var xhr = new XMLHttpRequest();
+    var url = "channel_frequency/dev001/ch01";
+    obj4="";
+
+    xhr.open("GET",url);
+    xhr.onload = function(){
+        obj4 = JSON.parse(xhr.responseText);
+        var Data = {
+            labels: obj4.Hz, //顯示區間名稱
+            datasets: [{
+                label: "frequency", // tootip 出現的名稱
+                lineTension: 0, // 曲線的彎度，設0 表示直線
+                backgroundColor: "#ea464d",
+                borderColor: "#ea464d",
+                borderWidth: 5,
+                data:obj4.value, // 資料
+                fill: false, // 是否填滿色彩
+            },]
+        };
+        var ctx = document.getElementById("channel_frequency").getContext("2d");
+        drawLineCanvas(ctx,Data);
+    };
+    xhr.send();
 }

static/vibration.js

@@ -57,7 +57,8 @@ function show_tower_info(){
     for(var i=0;i<obj2.length;i++){
         if(obj2[i].tower_name === tower){
             for(var ii=0;ii<obj2[i].tower_data.Moter.length;ii++){
-                inner += '<p >'+ obj2[i].tower_data.Moter[ii].DataValue + ',' + obj2[i].tower_data.Moter[ii].CVIndex+'</p>';
+                inner += '<p >編號' + obj2[i].tower_data.Moter[ii].channelName + '  Vrms:'+ obj2[i].tower_data.Moter[ii].DataValue + ',健康指標:健康 健康狀態' + obj2[i].tower_data.Moter[ii].CVIndex+'</p>';
+                inner += '<a href="/channel" target="_blank" title="通道資訊">通道資訊</a><br>';
             }
         }
     }