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>=5){
inner=inner+'<button type="button" class="btn btn-primary m-1" onclick="tower_info(\''+data[i-5].tower_name+'\');">'+data[i].tower_name+'</button>';
}
else{
inner=inner+'<button type="button" class="btn btn-primary m-1" 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">入水溫度</p>\
<div>\
<h2 class="text-center">'+ obj2[i].tower_data.DCS.hotTemp +'</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 + ' </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[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 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[0].Vrms + ',' + obj2[i].tower_data.Moter[0].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[1].Vrms + ',' + obj2[i].tower_data.Moter[1].CV+'</p>\
</div>\
</div>\
<div class="card col-lg-5">\
<p class="fw-bold ">ch003,通道3</p>\
<div>\
<p class="text-center">'+ obj2[i].tower_data.Moter[2].Vrms + ',' + obj2[i].tower_data.Moter[2].CV+'</p>\
</div>\
</div>\
<div class="card col-lg-5">\
<p class="fw-bold ">ch004,通道4</p>\
<div>\
<p class="text-center">'+ obj2[i].tower_data.Moter[3].Vrms + ',' + obj2[i].tower_data.Moter[3].CV+'</p>\
</div>\
</div>\
</div>\
</div>\
</div>\
</div>\
</div>';
console.log(obj2[i].tower_data.Moter[3].Vrms);
}
}
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;
}