mechanical/static/tower2.js

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

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

    function tower_info(){
        towerSelect=document.getElementById("tower");
        tower = towerSelect.value;
        inner = "";
        for(var i=0;i<obj2.length;i++){
            if(obj2[i].tower_name == tower){
                inner = '<p> DCS </P> '+
                        '<p> 入水溫度 = '+ obj2[i].tower_data.DCS.hotTemp + ' </P> '   + 
                        '<p> 出水溫度 = '+ obj2[i].tower_data.DCS.coldTemp + ' </P> '   + 
                        '<p> 水流量 = '+ obj2[i].tower_data.DCS.waterFlow + ' </P> '   + 
                        '<p> 風扇馬達電流 = '+ obj2[i].tower_data.DCS.fanMotorCur + ' </P> '   + 
                        '<p> 風扇馬達轉速頻率 = '+ obj2[i].tower_data.DCS.fanMotorSpeedFreq + ' </P><br> '   + 
                        '<p> 風扇震動 </P> '+
                        '<p> 馬達震動 = '+ obj2[i].tower_data.Moter.ch01.Vrms + ' </P> '   + 
                        '<p> 減速機震動 = '+ obj2[i].tower_data.Fan.reducer + ' </P> '   + 
                        '<p> 靜壓機 = '+ obj2[i].tower_data.Fan.staticPressure + ' </P> '   +
                        '<p> 水流量 = '+ obj2[i].tower_data.Fan.waterFlow + ' </P> '   + 
                        '<p> 濕求溫度 = '+ obj2[i].tower_data.Fan.wetTemp + ' </P> '   + 
                        '<p> 水冷槽溫度1 = '+ obj2[i].tower_data.Fan.coldTempData1 + ' </P> '   +
                        '<p> 水冷槽溫度2 = '+ obj2[i].tower_data.Fan.coldTempData2 + ' </P><br> '   +
                        '<p> 馬達震動 </P> '+
                        '<p> ch001,通道1'+ obj2[i].tower_data.Moter.ch01.Vrms + ',' + obj2[i].tower_data.Moter.ch01.CV+' </P> '   + 
                        '<p> ch002,通道2'+ obj2[i].tower_data.Moter.ch02.Vrms + ',' + obj2[i].tower_data.Moter.ch02.CV+' </P> '
                        ;
            }
        }
        console.log(obj2[0].tower_data.DCS.hotTemp);
        document.getElementById("tower_info").innerHTML = 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='<option value=0>請選擇公司</option>';
        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='<option value=0>請選擇工廠</option>';
        let factory_arr = new Array();
        let factory_inner = '<option value=0>請選擇工廠</option>';
        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='<option value=0>請選擇廠區</option>';
        let department_arr = new Array();
        let department_inner = '<option value=0>請選擇廠區</option>';
        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='<option value=0>請選擇機組</option>';
        let towerGroup_inner = '<option value=0>請選擇機組</option>';
        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;
    }