mechanical/static/channel.js

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";
    obj3="";

    xhr.open("GET",url);
    xhr.onload = function(){
        obj3 = JSON.parse(xhr.responseText);
        insertHTML(obj3);
        console.log(obj3);
};
xhr.send();
}

function insertHTML(data){
    console.log(data);
    //aria.innerHTML=data[0].tower_name;
    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;
}

get_data();
get_chart_data();

// 三張圖表
function get_chart_data(){
    var xhr = new XMLHttpRequest();
    var url = "channel_chart/dev001/ch01";
    obj="";

    xhr.open("GET",url);
    xhr.onload = function(){
        obj = JSON.parse(xhr.responseText);
        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: 3,
                    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,
                    }]
                },
            }
    });
};

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";
    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: 3,
                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);
    console.log(obj4.value)
    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: 2,
                data:obj4.value, // 資料
                fill: false, // 是否填滿色彩
            },]
        };
        var ctx = document.getElementById("channel_frequency").getContext("2d");
        drawLineCanvas2(ctx,Data);
    };
    xhr.send();
}