[後台] 新增查詢 Niagara 設備資料
This commit is contained in:
keke
parent
67a441b98b
commit
088552a6bb
@ -52,6 +52,13 @@
|
|||||||
<div class="card-body row">
|
<div class="card-body row">
|
||||||
<div class="col-12">
|
<div class="col-12">
|
||||||
<!-- datatable start -->
|
<!-- datatable start -->
|
||||||
|
<div class="btn-group flex-wrap building_select"></div>
|
||||||
|
<hr />
|
||||||
|
<div class="btn-group flex-wrap systemMainType_select"></div>
|
||||||
|
<hr />
|
||||||
|
<div class="btn-group flex-wrap systemSubType_select"></div>
|
||||||
|
<hr />
|
||||||
|
<button class="btn btn-primary" id="search">搜尋</button>
|
||||||
<table id="niagara_data_table" class="table table-bordered table-hover m-0 text-center">
|
<table id="niagara_data_table" class="table table-bordered table-hover m-0 text-center">
|
||||||
<thead class="thead-themed">
|
<thead class="thead-themed">
|
||||||
<tr>
|
<tr>
|
||||||
@ -60,7 +67,7 @@
|
|||||||
<th>point_name</th>
|
<th>point_name</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody class="raw_data">
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
@ -79,6 +86,7 @@
|
|||||||
var buildingId, building;
|
var buildingId, building;
|
||||||
var rawDataImportTable;
|
var rawDataImportTable;
|
||||||
var ds;
|
var ds;
|
||||||
|
var dataInTable;
|
||||||
|
|
||||||
var today = new Date();
|
var today = new Date();
|
||||||
var date = today.getFullYear() + '-' + (today.getMonth() + 1) + '-' + today.getDate();
|
var date = today.getFullYear() + '-' + (today.getMonth() + 1) + '-' + today.getDate();
|
||||||
@ -89,6 +97,9 @@
|
|||||||
|
|
||||||
projectName();
|
projectName();
|
||||||
rawDataImportTable = $("#niagara_data_table").DataTable({
|
rawDataImportTable = $("#niagara_data_table").DataTable({
|
||||||
|
paging: false,
|
||||||
|
searching: false,
|
||||||
|
destroy: true,
|
||||||
"columns": [
|
"columns": [
|
||||||
{
|
{
|
||||||
"data": "value"
|
"data": "value"
|
||||||
@ -131,6 +142,8 @@
|
|||||||
var dateTime = date + ' ' + time;
|
var dateTime = date + ' ' + time;
|
||||||
document.getElementById('loadDataText').innerText = "共 " + rel.data.length + " 筆資料 \n" + dateTime;
|
document.getElementById('loadDataText').innerText = "共 " + rel.data.length + " 筆資料 \n" + dateTime;
|
||||||
}
|
}
|
||||||
|
dataInTable = data;
|
||||||
|
console.log("---", dataInTable);
|
||||||
return data;
|
return data;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -253,5 +266,145 @@
|
|||||||
}
|
}
|
||||||
}, 'json');
|
}, 'json');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
let buildingValue, systemMainId, systemMainValue, systemSubId, systemSubValue;
|
||||||
|
|
||||||
|
document.querySelector(".building_select").addEventListener("click", (e) => {
|
||||||
|
buildingValue = e.target.dataset.value;
|
||||||
|
$(".building_select .btn-info.active").removeClass('btn-info active')
|
||||||
|
$(e.target).addClass('btn-info active');
|
||||||
|
})
|
||||||
|
document.querySelector(".systemSubType_select").addEventListener("click", (e) => {
|
||||||
|
systemSubId = e.target.dataset.value;
|
||||||
|
systemSubValue = e.target.dataset.systemValue;
|
||||||
|
$(".systemSubType_select .btn-info.active").removeClass('btn-info active')
|
||||||
|
$(e.target).addClass('btn-info active');
|
||||||
|
})
|
||||||
|
|
||||||
|
$(function () {
|
||||||
|
// 產生所有棟別下拉式選單
|
||||||
|
fetch("/BuildInfo/BuildInfoList", {
|
||||||
|
method: "POST"
|
||||||
|
}).then(res => res.json()).then(({ data }) => {
|
||||||
|
const buildingElement = document.querySelector(".building_select");
|
||||||
|
|
||||||
|
console.log(data);
|
||||||
|
let str = "";
|
||||||
|
data.forEach(({ full_name, building_tag
|
||||||
|
}) => {
|
||||||
|
if (building_tag.includes("$3")) {
|
||||||
|
building_tag = building_tag.replace("$3", "");
|
||||||
|
}
|
||||||
|
str += `<button data-value=${building_tag} class='btn'>${full_name}</button>`;
|
||||||
|
})
|
||||||
|
buildingElement.innerHTML = str;
|
||||||
|
});
|
||||||
|
|
||||||
|
// 產生所有大類系統下拉式選單
|
||||||
|
const systemMainTypeElement = document.querySelector(".systemMainType_select");
|
||||||
|
let init_id = '';
|
||||||
|
fetch("/SystemCategory/SystemMainList", {
|
||||||
|
method: "POST"
|
||||||
|
}).then(res => res.json()).then(({ data }) => {
|
||||||
|
//console.log(data);
|
||||||
|
init_id = data[0].id;
|
||||||
|
//console.log(init_id);
|
||||||
|
let str = "";
|
||||||
|
data.forEach(({ id, system_key, system_value
|
||||||
|
}) => {
|
||||||
|
str += `<button data-value=${id} data-system-value=${system_value} class='btn'>${system_key}</button>`;
|
||||||
|
})
|
||||||
|
systemMainTypeElement.innerHTML = str;
|
||||||
|
FetchSystenSubList(init_id);
|
||||||
|
});
|
||||||
|
|
||||||
|
// 產生所有小類系統下拉式選單
|
||||||
|
systemMainTypeElement.addEventListener("click", (e) => {
|
||||||
|
systemMainId = e.target.dataset.value;
|
||||||
|
systemMainValue = e.target.dataset.systemValue;
|
||||||
|
$(".systemMainType_select .btn-info.active").removeClass('btn-info active')
|
||||||
|
$(e.target).addClass('btn-info active');
|
||||||
|
//console.log(value);
|
||||||
|
|
||||||
|
FetchSystenSubList(systemMainId);
|
||||||
|
})
|
||||||
|
});
|
||||||
|
|
||||||
|
function FetchSystenSubList(id) {
|
||||||
|
var formData = new FormData();
|
||||||
|
formData.append("id", parseInt(id));
|
||||||
|
|
||||||
|
fetch("/SystemCategory/SystemSubList", {
|
||||||
|
method: "POST",
|
||||||
|
body: formData
|
||||||
|
}).then(res => res.json()).then(({ data }) => {
|
||||||
|
const systemSubTypeElement = document.querySelector(".systemSubType_select");
|
||||||
|
|
||||||
|
//console.log(data);
|
||||||
|
let str = "";
|
||||||
|
data.forEach(({ id, system_key, system_value
|
||||||
|
}) => {
|
||||||
|
str += `<button data-value=${id} data-system-value=${system_value} class='btn'>${system_key}</button>`;
|
||||||
|
});
|
||||||
|
systemSubTypeElement.innerHTML = str;
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 查詢功能，查棟別跟大類
|
||||||
|
const searchButton = document.querySelector("#search");
|
||||||
|
searchButton.addEventListener("click", (e) => {
|
||||||
|
//const buildingValue = document.querySelector(".building_select").value;
|
||||||
|
//const systemMainId = document.querySelector(".systemMainType_select").value;
|
||||||
|
//const systemMainValue = document.querySelector(`option[value='${systemMainId}']`).getAttribute("data-system-value");
|
||||||
|
//const systemSubId = document.querySelector(".systemSubType_select").value;
|
||||||
|
//const systemSubValue = document.querySelector(`option[value='${systemSubId}']`).getAttribute("data-system-value");
|
||||||
|
|
||||||
|
console.log("111", buildingValue, systemMainValue);
|
||||||
|
|
||||||
|
const table_body = document.querySelector('.raw_data');
|
||||||
|
let rawdata_table_body = '';
|
||||||
|
let count = 1;
|
||||||
|
//dataInTable.forEach(({ tag_name, value, point_name
|
||||||
|
//}) => {
|
||||||
|
// console.log("111", buildingValue, systemMainValue, systemSubValue);
|
||||||
|
// console.log("222", tag_name.includes(`_${buildingValue}_`), tag_name.includes(`_${systemMainValue}_`), tag_name.includes(`_${systemSubValue}_`));
|
||||||
|
// console.log("333", tag_name, value);
|
||||||
|
// console.log("444", rawdata_table_body);
|
||||||
|
|
||||||
|
// if (tag_name.includes(`_${buildingValue}_`) && tag_name.includes(`_${systemMainValue}_`)) {
|
||||||
|
// console.log("333", tag_name, value);
|
||||||
|
// let odd_or_even = '';
|
||||||
|
// if (count % 2 == 0) {
|
||||||
|
// odd_or_even = 'odd';
|
||||||
|
// } else {
|
||||||
|
// odd_or_even = 'even';
|
||||||
|
// }
|
||||||
|
|
||||||
|
// rawdata_table_body += `<tr role="row" class="${odd_or_even}"><td class="sorting_1 dtr-control">${value}</td><td>${tag_name}</td><td>${point_name}</td></tr>`;
|
||||||
|
// }
|
||||||
|
|
||||||
|
//});
|
||||||
|
//table_body.innerHTML = rawdata_table_body;
|
||||||
|
let search_str = `_${buildingValue}_${systemMainValue}_${systemSubValue}_`;
|
||||||
|
console.log("$$$", search_str, dataInTable.filter(({ tag_name }) => tag_name.includes(search_str)))
|
||||||
|
$("#niagara_data_table").DataTable({
|
||||||
|
paging: false,
|
||||||
|
searching: false,
|
||||||
|
destroy: true,
|
||||||
|
"columns": [
|
||||||
|
{
|
||||||
|
"data": "value"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"data": "tag_name"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"data": "point_name"
|
||||||
|
},
|
||||||
|
],
|
||||||
|
data: dataInTable.filter(({ tag_name }) => tag_name.includes(search_str))
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
}
|
}
|
||||||
Loading…
Reference in New Issue
Block a user