mechanical/static/tower.js

console.log(1);
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" style="padding:15px 30px; background:#fff; color:#002e86; border: 1px solid #002E86; border-radius: 10px; font-size:18px;" class="tower-btn me-3" onclick="tower_info(\'' + data[0].tower_name + '\');">' + data[i].tower_name + '</button>';
        }
        else {
            inner = inner + '<button type="button" style="padding:15px 30px; background:#fff; color:#002e86; border: 1px solid #002E86; border-radius: 10px; font-size:18px;" class="tower-btn me-3" 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) {
    $(document).on("click", ".tower-btn", function (event) {
        $(this).addClass("tower-active");
        $(".tower-active").siblings().removeClass('tower-active');
    });
    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 = '<div style="padding:15px;"><h1 style="color:#002e86">中控室DSC訊號</h1>\
                    <div class="row px-0 mx-0">\
                        <div class="card col-lg-2">\
                            <p  class="data-title fw-bold pt-3">入水溫度</p>\
                            <div>\
                                <h2 class="data-content text-center mt-3 pb-3">'+ obj2[i].tower_data.DCS.hotTemp + '<span style="font-size:20px;">&ensp;°C</span></h2>\
                            </div>\
                        </div>\
                        <div class="card col-lg-2">\
                            <p class="data-title fw-bold pt-3">出水溫度</p>\
                            <div>\
                                <h2 class="data-content text-center mt-3 pb-3">'+ obj2[i].tower_data.DCS.coldTemp + '<span style="font-size:20px;">&ensp;°C</span></h2>\
                            </div>\
                        </div>\
                        <div class="card col-lg-2">\
                            <p  class="data-title fw-bold pt-3">水流量</p>\
                            <div>\
                                <h2 class="data-content text-center mt-3 pb-3">'+ obj2[i].tower_data.DCS.waterFlow + '<span style="font-size:20px;">&ensp;M³/H</span></h2>\
                            </div>\
                        </div>\
                        <div class="card col-lg-2">\
                            <p class="data-title fw-bold pt-3">風扇馬達電流</p>\
                            <div>\
                                <h2 class="data-content text-center mt-3 pb-3">'+ obj2[i].tower_data.DCS.fanMotorCur + '<span style="font-size:20px;">&ensp;A</span></h2>\
                            </div>\
                        </div>\
                        <div class="card col-lg-2">\
                            <p  class="data-title fw-bold pt-3">風扇馬達轉速頻率</p>\
                            <div>\
                                <h2 class="data-content text-center mt-3 pb-3">'+ obj2[i].tower_data.DCS.fanMotorSpeedFreq + '<span style="font-size:20px;">&ensp;Hz</span></h2>\
                            </div>\
                        </div>\
                    </div>\
                    </div>\
                    <div class="mt-5">\
                        <div>\
                            <div class="row px-0 mx-0">\
                                <div class="col-lg-6">\
                                <div class="card">\
                                <h1 style="color:#002e86">風扇震動</h1>\
                                <div style="padding:15px">\
                                    <table style="font-size: 16px; border-color:#4c6caa; border-top:1px solid #4c6caa;" class="table text-center">\
                                        <thead style="background:#e4f8ff; color:#4c6caa;">\
                                          <tr>\
                                            <th class="border-0" scope="col">數據名稱</th>\
                                            <th class="border-0" scope="col">值</th>\
                                            <th class="border-0" 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>\
                                </div>\
                                <div style="margin-top:40px;" class="col-lg-6">\
                                <div>\
                                <h1 style="color:#002e86">馬達震動</h1>\
                                    <div class="row px-0 mx-0">\
                                        <div class="card col-lg-5">\
                                            <p class="fw-bold pt-4">ch001,通道1</p>\
                                            <div>\
                                                <p class="text-center pb-4">'+ obj2[i].tower_data.Moter[0].DataValue + ',' + obj2[i].tower_data.Moter[0].CVIndex + '</p>\
                                            </div>\
                                        </div>\
                                        <div class="card col-lg-5">\
                                            <p class="fw-bold pt-4">ch002,通道2</p>\
                                            <div>\
                                                <p class="text-center pb-4">'+ obj2[i].tower_data.Moter[1].DataValue + ',' + obj2[i].tower_data.Moter[1].CVIndex + '</p>\
                                            </div>\
                                        </div>\
                                        <div class="card col-lg-5">\
                                            <p class="fw-bold pt-4">ch003,通道3</p>\
                                            <div>\
                                                <p class="text-center pb-4">'+ obj2[i].tower_data.Moter[2].DataValue + ',' + obj2[i].tower_data.Moter[2].CVIndex + '</p>\
                                            </div>\
                                        </div>\
                                        <div class="card col-lg-5">\
                                            <p class="fw-bold pt-4">ch004,通道4</p>\
                                            <div>\
                                                <p class="text-center pb-4">'+ obj2[i].tower_data.Moter[3].DataValue + ',' + obj2[i].tower_data.Moter[3].CVIndex + '</p>\
                                            </div>\
                                        </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 = "<div class='mt-5'>\
            <div>\
                <div class='row px-0  mx-0'>\
                    <div class='col-lg-6'>\
                    <div class='card h-100'>\
                    <h1 style='color:#002e86'>設計條件</h1>\
                    <div style='padding:15px'>\
                    <table style='font-size: 16px; border-color:#4c6caa; border-top:1px solid #4c6caa;' class='table'>\
                    <thead style='background:#e4f8ff; color:#4c6caa;'>\
                    <tr>\
                    <th class='border-0' scope='col'>數據名稱</th>\
                    <th class='border-0' scope='col'>值</th>\
                    <th class='border-0' scope='col'>單位</th>\
                    </tr>\
                    </thead>\
                    <tbody>\
                    <tr>\
                        <td>水流量</td>\
                        <td>" + obj_tmp[0].designWFR + "</td>\
                        <td>M³/H</td>\
                    </tr>\
                    <tr>\
                        <td>風車馬力</td>\
                        <td>" + obj_tmp[0].designHP + "</td>\
                        <td>mm/s</td>\
                    </tr>\
                    <tr>\
                        <td>額定電流</td>\
                        <td>" + obj_tmp[0].designCurrent + "</td>\
                        <td>A</td>\
                    </tr>\
                    <tr>\
                        <td>入水溫度</td>\
                        <td>" + obj_tmp[0].designHWT + "</td>\
                        <td>°C</td>\
                    </tr>\
                    <tr>\
                    <td>出水溫度</td>\
                        <td>" + obj_tmp[0].designCWT + "</td>\
                        <td>°C</td>\
                    </tr>\
                    <tr>\
                        <td>濕求溫度</td>\
                        <td>" + obj_tmp[0].designWBT + "</td>\
                        <td>°C</td>\
                    </tr>\
                    </tbody>\
                    </table>\
                    </div>\
                    </div>\
                    </div>\
                    <div class='col-lg-6'>\
                    <div class='card h-100'>\
                    <h1 style='color:#002e86'>測試狀態</h1>\
                    <div style='padding:15px'>\
                    <table style='font-size: 16px; border-color:#4c6caa; border-top:1px solid #4c6caa;' class='table'>\
                    <thead style='background:#e4f8ff; color:#4c6caa;'>\
                    <tr>\
                    <th class='border-0' scope='col'>數據名稱</th>\
                    <th class='border-0' scope='col'>值</th>\
                    <th class='border-0' scope='col'>單位</th>\
                    </tr>\
                    </thead>\
                    <tbody>\
                    <tr>\
                        <td>水流量</td>\
                        <td>" + obj_tmp[0].testWFR + "</td>\
                        <td>M³/H</td>\
                    </tr>\
                    <tr>\
                        <td>風車馬力</td>\
                        <td> " + obj_tmp[0].testBHP + "</td>\
                        <td>mm/s</td>\
                    </tr>\
                    <tr>\
                        <td>運轉電流</td>\
                        <td>" + obj_tmp[0].testCurrent + "</td>\
                        <td>A</td>\
                    </tr>\
                    <tr>\
                        <td>入水溫度</td>\
                        <td>" + obj_tmp[0].testHWT + "</td>\
                        <td>°C</td>\
                    </tr>\
                    <tr>\
                    <td>出水溫度</td>\
                        <td>" + obj_tmp[0].testCorrectCWT + "</td>\
                        <td>°C</td>\
                    </tr>\
                    <tr>\
                        <td>濕求溫度</td>\
                        <td>" + obj_tmp[0].testWBT + "</td>\
                        <td>°C</td>\
                    </tr>\
                    <tr>\
                        <td>風速</td>\
                        <td>" + obj_tmp[0].testWindSpeed + "</td>\
                        <td>°C</td>\
                    </tr>\
                    <tr>\
                        <td>補充水量</td>\
                        <td>" + obj_tmp[0].testMakeupWFR + "</td>\
                        <td>°C</td>\
                    </tr>\
                    <tr>\
                        <td>補充水溫</td>\
                        <td>" + obj_tmp[0].testMakeupCWT + "</td>\
                        <td>°C</td>\
                    </tr>\
                    <tr>\
                        <td>CORRECT CWT</td>\
                        <td> " + obj_tmp[0].testCorrectCWT + "</td>\
                        <td>°C</td>\
                    </tr>\
                    <tr>\
                        <td>COLLING RANGE</td>\
                         <td> " + obj_tmp[0].testCoolingRange + "</td>\
                         <td>°C</td>\
                     </tr>\
                    </tbody>\
                    </table>\
                    </div>\
                    </div>\
                    </div>\
                </div>\
            </div>\
        </div>" ;
    // "測試狀態<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;

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

// }

get_predict();
function get_predict() {
    var xhr = new XMLHttpRequest();
    var url = "channel_predict/dev001/ch01";
    obj3 = "";

    xhr.open("GET", url);
    xhr.onload = function () {
        obj3 = JSON.parse(xhr.responseText);
        labels = new Array();
        for (var i = 0; i < obj3.data.length; i++) {
            labels.push(i);
        }
        console.log(obj3);
        var Data = {
            labels: labels, //顯示區間名稱
            datasets: [{
                label: "predict", // tootip 出現的名稱
                lineTension: 0, // 曲線的彎度，設0 表示直線
                backgroundColor: "#ea464d",
                borderColor: "#ea464d",
                borderWidth: 5,
                data: obj3.data, // 資料 
                fill: false, // 是否填滿色彩
            },]
        };
        var ctx = document.getElementById("channel_predict").getContext("2d");
        drawLineCanvas(ctx, Data);
    };
    xhr.send();
}
function drawLineCanvas(ctx, data) {
    window.myLine = new Chart(ctx, {  //先建立一個 chart
        type: 'line', // 型態
        data: data,
        showSymbol: false,
        options: {
            responsive: true,
            legend: { //是否要顯示圖示
                display: true,
            },
            tooltips: { //是否要顯示 tooltip
                enabled: true
            },
            scales: {  //是否要顯示 x、y 軸
                xAxes: [{
                    display: true
                }],
                yAxes: [{
                    display: true
                }]
            },
        }
    });
};