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

// }

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>';
                inner += '\
                <tbody>\
                <tr>\
                    <td>' + obj2[i].tower_data.Moter[ii].channelName + '</td>\
                    <td>' + obj2[i].tower_data.Moter[ii].DataValue + '</td>\
                    <td style="color:#078b07" class="fw-bold">健康<i class="fas fa-check-circle ps-1"></i></td>\
                    <td>' + obj2[i].tower_data.Moter[ii].CVIndex + '</td>\
                    <td><a href="/channel" target="_blank" title="通道資訊">通道資訊</a></td>\
                 </tr>\
                </tbody>'
            }
        }
    }
    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;
}