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();
    };
    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> '
                //         ;
                        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='<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;
    }