mechanical/static/history.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_history();

};
xhr.send();

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;
    onChangeColumn2();
}

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;
    onChangeColumn3();
}

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 click_button_history() {
    //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 = "history/?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);
            inner_table(obj2);
        };
        xhr2.send();
    }

}

function inner_table(obj){
    console.log(obj);
    inner ='<div class="hostory_table"> \
                <table> \
                    <tr>\
                        <th >Creat ID</th>\
                        <th >Creat time</th>\
                        <th >device Code</th>\
                        <th >channel Code</th>\
                        <th >record Feild</th>\
                        <th >record Mark</th>\
                        <th >remark Value</th>\
                        <th >remark Label</th>\
                        <th >remark Text</th>\
                        <th >remark Link</th>\
                        <th >device Name</th>\
                        <th >Channel Name</th>\
                        <th >Editor</th>\
                    </tr>';
    for (var i = 0; i < obj.length; i++) {
        inner+='<tr>\
                    <td >' + obj[i].id + '</td>\
                    <td >' + obj[i].updateTime + '</td>\
                    <td >' + obj[i].device_id + '</td>\
                    <td >' + obj[i].channelName + '</td>\
                    <td >CV_index</td>\
                    <td ></td>\
                    <td >' + obj[i].CVIndex + '</td>\
                    <td >WARING</td>\
                    <td >可輸入文字</td>\
                    <td ><button>圖片</button></td>\
                    <td >tmp</td>\
                    <td ></td>\
                    <td >FFT</td>\
                </tr>';
    } 
    document.getElementById("vibration_info").innerHTML = inner;
}