mechanical/static/tower.js

var xhr = new XMLHttpRequest();
var url = "tower/org";
obj="";
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++){
        if(i>=3){
            inner=inner+'<button type="button" class="btn btn-primary m-1" onclick="tower_info(\''+data[0].tower_name+'\');">'+data[i].tower_name+'</button>';
        }
        else{
            inner=inner+'<button type="button" class="btn btn-primary m-1" onclick="tower_info(\''+data[i].tower_name+'\');">'+data[i].tower_name+'</button>';
        }
        
        console.log(inner);
    }
    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);
            tower_info(obj2[0].tower_name);
        };
        xhr2.send();
    }
    
  }


  
function tower_info(tower_str){
    tower = tower_str;
    console.log(tower);
    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> '
            //         ;
            
                    inner =' <h1 class="ms-3"><i style="color:#0174c7;" class="fas fa-file-signature me-1"></i>中控室DSC訊號</h1>\
                    <div class="row px-0 mx-0">\
                        <div class="card col-lg-2">\
                            <p class="data-title fw-bold">入水溫度</p>\
                            <div>\
                                <h2 class="text-center">'+ obj2[i].tower_data.DCS.hotTemp +'</h2>\
                                <P class="unit text-end">°C</P>\
                            </div>\
                        </div>\
                        <div class="card col-lg-2">\
                            <p class="data-title fw-bold">出水溫度</p>\
                            <div>\
                                <h2 class="text-center">'+ obj2[i].tower_data.DCS.coldTemp + '</h2>\
                                <P class="unit text-end">°C</P>\
                            </div>\
                        </div>\
                        <div class="card col-lg-2">\
                            <p class="data-title fw-bold ">水流量</p>\
                            <div>\
                                <h2 class="text-center">'+ obj2[i].tower_data.DCS.waterFlow + '</h2>\
                                <P class="unit text-end">M³/H</P>\
                            </div>\
                        </div>\
                        <div class="card col-lg-2">\
                            <p class="data-title fw-bold">風扇馬達電流</p>\
                            <div>\
                                <h2 class="text-center">'+ obj2[i].tower_data.DCS.fanMotorCur + '</h2>\
                                <P class="unit text-end">A</P>\
                            </div>\
                        </div>\
                        <div class="card col-lg-2">\
                            <p class="data-title fw-bold ">風扇馬達轉速頻率</p>\
                            <div>\
                                <h2 class="text-center">'+ obj2[i].tower_data.DCS.fanMotorSpeedFreq + '&ensp;</h2>\
                                <P class="unit text-end">Hz</P>\
                            </div>\
                        </div>\
                    </div>\
                    <div class="card mt-5">\
                        <div class="row">\
                            <div class="col-lg-6">\
                                <h1><i style="color:#0174c7;" class="fas fa-tachometer-alt me-2"></i>風扇震動</h1>\
                            </div>\
                            <div class="col-lg-6">\
                                <h1><i style="  color:#0174c7;" class="fas fa-cogs me-2"></i>馬達震動</h1>\
                            </div>\
                        </div>\
                        <div>\
                            <div class="row px-0 mx-0">\
                                <div class="col-lg-6">\
                                    <table class="table">\
                                        <thead>\
                                          <tr>\
                                            <th scope="col">數據名稱</th>\
                                            <th scope="col">值</th>\
                                            <th scope="col">單位</th>\
                                          </tr>\
                                        </thead>\
                                        <tbody>\
                                          <tr>\
                                            <td>馬達震動</td>\
                                            <td>'+ obj2[i].tower_data.Moter[0].Vrms + '</td>\
                                            <td>mm/s</td>\
                                          </tr>\
                                          <tr>\
                                            <td>減速機震動</td>\
                                            <td>'+ obj2[i].tower_data.Fan.reducer + '</td>\
                                            <td>mm/s</td>\
                                          </tr>\
                                          <tr>\
                                            <td>靜壓機</td>\
                                            <td>'+ obj2[i].tower_data.Fan.staticPressure + '</td>\
                                            <td>pa</td>\
                                          </tr>\
                                          <tr>\
                                            <td>水流量</td>\
                                            <td>'+ obj2[i].tower_data.Fan.waterFlow + '</td>\
                                            <td>M³/H</td>\
                                          </tr>\
                                          <tr>\
                                            <td>濕求溫度</td>\
                                            <td>'+ obj2[i].tower_data.Fan.wetTemp + '</td>\
                                            <td>°C</td>\
                                          </tr>\
                                          <tr>\
                                            <td>水冷槽溫度1</td>\
                                            <td>'+ obj2[i].tower_data.Fan.coldTempData1 + '</td>\
                                            <td>°C</td>\
                                          </tr>\
                                          <tr>\
                                            <td>水冷槽溫度2</td>\
                                            <td>'+ obj2[i].tower_data.Fan.coldTempData2 + '</td>\
                                            <td>°C</td>\
                                          </tr>\
                                        </tbody>\
                                      </table>\
                                </div>\
                                <div class="col-lg-6">\
                                    <div class="row px-0 mx-0">\
                                        <div class="card col-lg-5">\
                                            <p class="fw-bold ">ch001,通道1</p>\
                                            <div>\
                                                <p class="text-center">'+ obj2[i].tower_data.Moter[0].Vrms + ',' + obj2[i].tower_data.Moter[0].CV+'</p>\
                                            </div>\
                                        </div>\
                                        <div class="card col-lg-5">\
                                            <p class="fw-bold ">ch002,通道2</p>\
                                            <div>\
                                                <p class="text-center">'+ obj2[i].tower_data.Moter[1].Vrms + ',' + obj2[i].tower_data.Moter[1].CV+'</p>\
                                            </div>\
                                        </div>\
                                        <div class="card col-lg-5">\
                                            <p class="fw-bold ">ch003,通道3</p>\
                                            <div>\
                                                <p class="text-center">'+ obj2[i].tower_data.Moter[2].Vrms + ',' + obj2[i].tower_data.Moter[2].CV+'</p>\
                                            </div>\
                                        </div>\
                                        <div class="card col-lg-5">\
                                            <p class="fw-bold ">ch004,通道4</p>\
                                            <div>\
                                                <p class="text-center">'+ obj2[i].tower_data.Moter[3].Vrms + ',' + obj2[i].tower_data.Moter[3].CV+'</p>\
                                            </div>\
                                        </div>\
                                    </div>\
                                </div>\
                            </div>\
                        </div>\
                    </div>';
                    console.log(obj2[i].tower_data.Moter[3].Vrms);
        }
    }
    document.getElementById("tower_info").innerHTML = inner;
    console.log(inner);
    get_tower_perfrom('dev001');
    
}

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



function get_tower_perfrom(tower_id){

    var xhr3 = new XMLHttpRequest();
    var url3 = "tower/performance/"+tower_id;
    console.log("sss");
    obj3="";
    xhr3.open("GET",url3);
    xhr3.onload = function(){
        obj3 = JSON.parse(xhr3.responseText);
        console.log(obj3);
        tower_perform_show(obj3);

    };
    xhr3.send();
}

function tower_perform_show(obj_tmp){
    inner = "設計條件<br>" +
            "水流量: " + obj_tmp[0].designWFR + "<br>" +
            "風車馬力: " + obj_tmp[0].designHP + "<br>" +
            "額定電流: " + obj_tmp[0].designCurrent + "<br>" +
            "入水溫度: " + obj_tmp[0].designHWT + "<br>" +
            "出水溫度: " + obj_tmp[0].designCWT + "<br>" +
            "濕求溫度: " + obj_tmp[0].designWBT + "<br>" +
            "測試狀態<br> " +
            "水流量: " + obj_tmp[0].testWFR + "<br>" +
            "風車馬力: " + obj_tmp[0].testBHP + "<br>" +
            "運轉電流: " + obj_tmp[0].testCurrent + "<br>" +
            "入水溫度: " + obj_tmp[0].testHWT + "<br>" +
            "出水溫度: " + obj_tmp[0].testCorrectCWT + "<br>" +
            "濕球溫度: " + obj_tmp[0].testWBT + "<br>" +
            "風速: " + obj_tmp[0].testWindSpeed + "<br>" +
            "補充水量: " + obj_tmp[0].testMakeupWFR + "<br>" +
            "補充水溫: " + obj_tmp[0].testMakeupCWT + "<br>" +
            "CORRECT CWT: " + obj_tmp[0].testCorrectCWT + "<br>" +
            "COLLING RANGE: " + obj_tmp[0].testCoolingRange + "<br>" ;

    document.getElementById('tower_perfrom').innerHTML=inner;

}