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++){
        inner=inner+'<button 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("dev001");
        };
        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">'+ obj2[i].tower_data.DCS.hotTemp + '</p>\
                            <div>\
                                <h2 class="text-center">31.612</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.ch01.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.ch01.Vrms + ',' + obj2[i].tower_data.Moter.ch01.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.ch02.Vrms + ',' + obj2[i].tower_data.Moter.ch02.CV+'</p>\
                                            </div>\
                                        </div>\
                                        <div class="card col-lg-5">\
                                            <p class="fw-bold ">ch002,通道3</p>\
                                            <div>\
                                                <p class="text-center">'+ obj2[i].tower_data.Moter.ch01.Vrms + ',' + obj2[i].tower_data.Moter.ch01.CV+'</p>\
                                            </div>\
                                        </div>\
                                        <div class="card col-lg-5">\
                                            <p class="fw-bold ">ch002,通道4</p>\
                                            <div>\
                                                <p class="text-center">'+ obj2[i].tower_data.Moter.ch02.Vrms + ',' + obj2[i].tower_data.Moter.ch02.CV+'</p>\
                                            </div>\
                                        </div>\
                                    </div>\
                                </div>\
                            </div>\
                        </div>\
                    </div>';
                    
        }
    }
    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='';
    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;
}