mechanical/static/vibration.js

var xhr = new XMLHttpRequest();
var url = "tower/org";
obj="";
obj2 = "";
xhr.open("GET",url);
xhr.onload = function(){
    obj = JSON.parse(xhr.responseText);
    //insertHTML();
    start();
    onChangeColumn1();
    onChangeColumn2();
    onChangeColumn3();

    click_button();

};
xhr.send();

function insertHTML(data){
    
    var tower_select = document.getElementById('tower');
    //aria.innerHTML=data[0].tower_name;
    var inner='';
    for(var i=0;i<data.length;i++){
        inner+='<option value="'+data[i].tower_name+'">'+data[i].tower_name+'</option>';
    }
    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);
            insertHTML(obj2);
            console.log(obj2);
            show_tower_info();
        };
        xhr2.send();
    }
    
  }


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

//document就是這html文件。
//getElementById是裡面的方法，參數給"college-list"抓到這id標籤列



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;
}