454 lines
18 KiB
HTML
454 lines
18 KiB
HTML
<main id="js-page-content" role="main" class="page-content">
|
|
<div class="row">
|
|
<div class="col-sm-12 col-xl-2">
|
|
<div class="rounded border border-white">
|
|
<div class="d-flex position-relative py-3 px-4">
|
|
<i class="fal fa-search color-success-700 position-absolute pos-left fs-lg px-3 py-2 mt-1 ml-4"></i>
|
|
<input type="text" id="js_nested_list_filter" class="form-control shadow-inset-1 pl-6 border-success" placeholder="輸入兩字以上">
|
|
</div>
|
|
<!-- nav-menu-reset will reset the font colors -->
|
|
<ul id="js_nested_list" class="nav-menu nav-menu-reset nav-menu-compact mb-sm-4 mb-md-0 rounded border border-white" data-nav-accordion="true">
|
|
</ul>
|
|
<div class="filter-message js-filter-message m-0 text-left pl-4 py-3 fw-500"></div>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="col-sm-12 col-xl-10">
|
|
<h1 class="p-2 mb-0">歷史資料瀏覽</h1>
|
|
<div class="row bg-dark p-2 mb-5">
|
|
<div class="col-auto">
|
|
<div class="btn-group">
|
|
<button type="button" onclick="setDateType('day', this)" class="btn btn-secondary waves-effect waves-themed">日期</button>
|
|
<button type="button" onclick="setDateType('range', this)" class="btn btn-secondary waves-effect waves-themed">日區間</button>
|
|
<button type="button" onclick="setDateType('month', this)" class="btn btn-secondary waves-effect waves-themed">月</button>
|
|
</div>
|
|
</div>
|
|
<div class="col-auto">
|
|
<div class="btn-group">
|
|
<button type="button" onclick="setDateType('today', this)" class="btn btn-secondary waves-effect waves-themed">今天</button>
|
|
<button type="button" onclick="setDateType('ytd', this)" class="btn btn-secondary waves-effect waves-themed">昨天</button>
|
|
</div>
|
|
</div>
|
|
<div class="col-auto">
|
|
<div class="form-group">
|
|
<input class="form-control" id="his_startdate" data-val="" type="date" name="date" value="">
|
|
<input class="form-control" id="getmonth" type="month" style="display: none" />
|
|
</div>
|
|
</div>
|
|
<div class="col-auto" id="his_enddate" style="display: none">
|
|
<div class="form-group">
|
|
<input class="form-control" type="date" data-val="" name="date" value="">
|
|
</div>
|
|
</div>
|
|
<div class="col-auto">
|
|
<a href="#" onclick="searchDate()" class="btn btn-info">查詢</a>
|
|
<a href="#" onclick="exportExcel()" class="btn btn-info waves-effect waves-themed">
|
|
<span class="fal fa-file-excel mr-1"></span>
|
|
匯出
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row-cols-1 mb-2">
|
|
<div id="devPointsList" class="btn-group">
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<div class="frame-wrap">
|
|
<table id="historyTable" class="table table-bordered table-striped text-center m-0 w-100">
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</main>
|
|
|
|
<script>
|
|
var historyTable = null;
|
|
$(function () {
|
|
initList();
|
|
|
|
// default list filter
|
|
initApp.listFilter($('#js_default_list'), $('#js_default_list_filter'));
|
|
// custom response message
|
|
initApp.listFilter($('#js-list-msg'), $('#js-list-msg-filter'));
|
|
//accordion filter
|
|
initApp.listFilter($('#js_list_accordion'), $('#js_list_accordion_filter'));
|
|
// nested list filter
|
|
initApp.listFilter($('#js_nested_list'), $('#js_nested_list_filter'));
|
|
//init navigation
|
|
initApp.buildNavigation($('#js_nested_list'));
|
|
|
|
loadTable(null);
|
|
$(`[onclick="setDateType('day', this)"]`).click();
|
|
$(`[onclick="setDateType('today', this)"]`).click();
|
|
|
|
onEvent('change', '#his_startdate', function () {
|
|
let today = displayDate(new Date(Date.now()), 'date').replaceAll('/', '-');
|
|
let ytd = displayDate(new Date(new Date().setDate(new Date(Date.now()).getDate() - 1)), 'date').replaceAll('/', '-');
|
|
|
|
if (pageAct.dateType == 'range') {
|
|
if ($('#his_startdate').val() > $('#his_enddate input').val() && ($('#his_startdate').val() != "" && $('#his_enddate input').val() != "")) {
|
|
console.log('aaaa');
|
|
$('#his_startdate').val($('#his_startdate').data('val'));
|
|
toast_error('不可選擇大於結束時間');
|
|
}
|
|
else {
|
|
$('#his_startdate').data('val', $('#his_startdate').val());
|
|
$('#his_enddate input').data('val', $('#his_enddate input').val());
|
|
|
|
$(`[onclick="setDateType('today', this)"]`).addClass('btn-secondary');
|
|
$(`[onclick="setDateType('today', this)"]`).removeClass('btn-info');
|
|
$(`[onclick="setDateType('ytd', this)"]`).addClass('btn-secondary');
|
|
$(`[onclick="setDateType('ytd', this)"]`).removeClass('btn-info');
|
|
|
|
if ($('#his_startdate').val() == $('#his_enddate input').val()) {
|
|
if ($('#his_startdate').val() == today) {
|
|
$(`[onclick="setDateType('today', this)"]`).removeClass('btn-secondary');
|
|
$(`[onclick="setDateType('today', this)"]`).addClass('btn-info');
|
|
}
|
|
else if ($('#his_startdate').val() == ytd) {
|
|
$(`[onclick="setDateType('ytd', this)"]`).removeClass('btn-secondary');
|
|
$(`[onclick="setDateType('ytd', this)"]`).addClass('btn-info');
|
|
}
|
|
}
|
|
}
|
|
}
|
|
else if ($(this).val() == today) {
|
|
$(`[onclick="setDateType('today', this)"]`).removeClass('btn-secondary');
|
|
$(`[onclick="setDateType('today', this)"]`).addClass('btn-info');
|
|
$(`[onclick="setDateType('ytd', this)"]`).addClass('btn-secondary');
|
|
$(`[onclick="setDateType('ytd', this)"]`).removeClass('btn-info');
|
|
}
|
|
else if ($(this).val() == ytd) {
|
|
$(`[onclick="setDateType('today', this)"]`).addClass('btn-secondary');
|
|
$(`[onclick="setDateType('today', this)"]`).removeClass('btn-info');
|
|
$(`[onclick="setDateType('ytd', this)"]`).removeClass('btn-secondary');
|
|
$(`[onclick="setDateType('ytd', this)"]`).addClass('btn-info');
|
|
}
|
|
});
|
|
|
|
onEvent('change', '#his_enddate input', function () {
|
|
let today = displayDate(new Date(Date.now()), 'date').replaceAll('/', '-');
|
|
let ytd = displayDate(new Date(new Date().setDate(new Date(Date.now()).getDate() - 1)), 'date').replaceAll('/', '-');
|
|
|
|
if ($('#his_startdate').val() > $('#his_enddate input').val() && ($('#his_startdate').val() != "" && $('#his_enddate input').val() != "")) {
|
|
console.log('bbbb');
|
|
$('#his_enddate input').val($('#his_enddate input').data('val'));
|
|
toast_error('不可選擇大於結束時間');
|
|
}
|
|
else {
|
|
$('#his_startdate').data('val', $('#his_startdate').val());
|
|
$('#his_enddate input').data('val', $('#his_enddate input').val());
|
|
|
|
$(`[onclick="setDateType('today', this)"]`).addClass('btn-secondary');
|
|
$(`[onclick="setDateType('today', this)"]`).removeClass('btn-info');
|
|
$(`[onclick="setDateType('ytd', this)"]`).addClass('btn-secondary');
|
|
$(`[onclick="setDateType('ytd', this)"]`).removeClass('btn-info');
|
|
|
|
if ($('#his_startdate').val() == $('#his_enddate input').val()) {
|
|
if ($('#his_startdate').val() == today) {
|
|
$(`[onclick="setDateType('today', this)"]`).removeClass('btn-secondary');
|
|
$(`[onclick="setDateType('today', this)"]`).addClass('btn-info');
|
|
}
|
|
else if ($('#his_startdate').val() == ytd) {
|
|
$(`[onclick="setDateType('ytd', this)"]`).removeClass('btn-secondary');
|
|
$(`[onclick="setDateType('ytd', this)"]`).addClass('btn-info');
|
|
}
|
|
}
|
|
}
|
|
});
|
|
});
|
|
|
|
function initList() {
|
|
let sendData = {
|
|
building_tag: pageAct.buiTag
|
|
}
|
|
objSendData.Data = sendData;
|
|
let url = baseApiUrl + "/api/History/GetMainSub";
|
|
function success(res) {
|
|
let strHtml = ``;
|
|
let i1 = null, i2 = null, first = true;
|
|
|
|
$.each(res.data.history_Main_Systems, function (index, val) {
|
|
if (pageAct.mainStatus) {
|
|
strHtml += `<li>
|
|
<a href="#" data-filter-tags="${val.full_name.toLowerCase()}" data-maintag="${val.main_system_tag}">
|
|
<span class="nav-link-text">${val.full_name}</span>
|
|
</a>
|
|
<ul style="${index == 0 ? `display:block;` : ``}">`;
|
|
|
|
i1 = (val.history_Sub_systems != null && i1 == null) ? index : null;
|
|
}
|
|
|
|
$.each(val.history_Sub_systems, function (index2, val2) {
|
|
i2 = (val2.device != null && i2 == null) ? index2 : null;
|
|
|
|
strHtml += `<li>
|
|
<a href="#" data-filter-tags="${val2.full_name.toLowerCase()}" data-subtag="${val2.sub_system_tag}">
|
|
<span class="nav-link-text">
|
|
${val2.full_name}
|
|
</span>
|
|
</a>
|
|
<ul style="${(i1 != null ? index == i1 : first) && index2 == i2 ? `display:block;` : ``}">`;
|
|
|
|
$.each(val2.device, function (index3, val3) {
|
|
strHtml += `<li data-tabname="hisListItem">
|
|
<a href="#" onClick="setValue('${val3.device_number}', '${val3.full_name}', null)" data-filter-tags="${val3.full_name.toLowerCase()} ${val3.device_serial_tag.toLowerCase()}" data-devnum="${val3.device_number}">
|
|
<span class="nav-link-text">
|
|
${val3.full_name}
|
|
</span>
|
|
</a>
|
|
</li>`;
|
|
|
|
if (pageAct.mainStatus) {
|
|
if (index == i1 && index2 == i2 && first) {
|
|
first = false;
|
|
pageAct.deviceNumber = val3.device_number;
|
|
pageAct.deviceName = val3.full_name;
|
|
devPointsList();
|
|
}
|
|
}
|
|
else {
|
|
if (index2 == i2 && first) {
|
|
first = false;
|
|
pageAct.deviceNumber = val3.device_number;
|
|
pageAct.deviceName = val3.full_name;
|
|
devPointsList();
|
|
}
|
|
}
|
|
});
|
|
strHtml += `</ul> </li>`;
|
|
});
|
|
|
|
if (pageAct.mainStatus) {
|
|
strHtml += `</ul> </li>`;
|
|
}
|
|
});
|
|
|
|
$('#js_nested_list').html(strHtml);
|
|
$(`[data-tabname="hisListItem"]`).YTTab();
|
|
}
|
|
ytAjax = new YourTeam.Ajax(url, objSendData, success, null, "POST").send();
|
|
}
|
|
|
|
function devPointsList() {
|
|
let sendData = {
|
|
device_number: pageAct.deviceNumber
|
|
}
|
|
objSendData.Data = sendData;
|
|
let url = baseApiUrl + "/api/History/GetDevPoi";
|
|
function success(res) {
|
|
let strHtml = ``;
|
|
|
|
$.each(res.data, function (index, val) {
|
|
if (index == 0) {
|
|
strHtml += `<button onClick="setValue(null, null, '${val.points}', this)" type="button" class="btn btn-info waves-effect waves-themed">${val.full_name || val.points}</button>`;
|
|
pageAct.deviceItem = val.points;
|
|
pageAct.devicePoiName = val.full_name + ' ' + val.points;
|
|
pageAct.deviceComName = val.parent_path;
|
|
getData();
|
|
} else {
|
|
strHtml += `<button onClick="setValue(null, null, '${val.points}', this)" type="button" class="btn btn-secondary waves-effect waves-themed">${val.full_name || val.points}</button>`;
|
|
}
|
|
});
|
|
|
|
$('#devPointsList').html(strHtml);
|
|
}
|
|
ytAjax = new YourTeam.Ajax(url, objSendData, success, null, "POST").send();
|
|
}
|
|
|
|
function getData(start = null, end = null) {
|
|
var sdt = new Date();
|
|
var edt = new Date(new Date().setDate(sdt.getDate() + 1));
|
|
start = start ?? sdt.toLocaleDateString();
|
|
end = end ?? edt.toLocaleDateString();
|
|
$(loadEle).Loading("start");
|
|
callBackFromHistory()
|
|
getHistoryDataByBaja(pageAct.deviceNumber + "_" + pageAct.deviceItem,
|
|
new Date(start).getTime(),
|
|
new Date(end).getTime(),
|
|
pageAct.deviceName,
|
|
pageAct.deviceComName,
|
|
callBackFromHistory);
|
|
}
|
|
|
|
function callBackFromHistory(res = '{"count":0,"data":[]}') {
|
|
// console.log("@H1",res)
|
|
res = JSON.parse(res);
|
|
// console.log("@history",res.data)
|
|
loadTable(res.data);
|
|
if (historyTable != null) {
|
|
let t = $('#historyTable').dataTable();
|
|
|
|
t.fnClearTable();
|
|
if (res.data.length > 0)
|
|
t.fnAddData(res.data);
|
|
}
|
|
$(loadEle).Loading("close");
|
|
}
|
|
|
|
function setValue(deviceNumber, deviceName, deviceItem, elem) {
|
|
btnSelCss(elem);
|
|
|
|
if ((deviceNumber != null && deviceNumber != undefined) && (deviceName != null && deviceName != undefined)) {
|
|
pageAct.deviceNumber = deviceNumber;
|
|
pageAct.deviceName = deviceName;
|
|
devPointsList();
|
|
}
|
|
else if (deviceItem != null && deviceItem != undefined) {
|
|
pageAct.devicePoiName = $(elem).text();
|
|
pageAct.deviceItem = deviceItem;
|
|
getData();
|
|
}
|
|
}
|
|
|
|
function setDateType(type, elem) {
|
|
btnSelCss(elem);
|
|
|
|
pageAct.dateType = type;
|
|
let now = formatDate(new Date(Date.now()), "date");
|
|
let ytd = formatDate(new Date(new Date().setDate(new Date().getDate() - 1)), "date");
|
|
let tmr = formatDate(new Date(new Date().setDate(new Date().getDate() + 1)), "date");
|
|
|
|
if (type == "day" || type == "today" || type == "ytd") {
|
|
let date = type == "ytd" ? ytd : now;
|
|
$('#his_startdate').css('display', 'block');
|
|
$('#his_enddate').css('display', 'none');
|
|
$('#getmonth').css('display', 'none');
|
|
$('#his_startdate').val(date);
|
|
|
|
if (type == "today")
|
|
getData(formatDate(now, "date", true), formatDate(tmr, "date", true));
|
|
else if (type == "ytd")
|
|
getData(formatDate(ytd, "date", true), formatDate(now, "date", true));
|
|
else {
|
|
$(`[onclick="setDateType('today', this)"]`).removeClass('btn-secondary');
|
|
$(`[onclick="setDateType('today', this)"]`).addClass('btn-info');
|
|
}
|
|
}
|
|
else if (type == "range") {
|
|
$(`[onclick="setDateType('today', this)"], [onclick="setDateType('ytd', this)"]`).removeClass('btn-info');
|
|
$(`[onclick="setDateType('today', this)"], [onclick="setDateType('ytd', this)"]`).addClass('btn-secondary');
|
|
|
|
$('#his_startdate').css('display', 'block');
|
|
$('#his_enddate').css('display', 'block');
|
|
$('#getmonth').css('display', 'none');
|
|
$('#his_startdate').val(now);
|
|
$('#his_startdate').data('val', now);
|
|
$('#his_enddate input').val(tmr);
|
|
$('#his_enddate input').data('val', tmr);
|
|
}
|
|
else if (type == "month") {
|
|
$(`[onclick="setDateType('today', this)"], [onclick="setDateType('ytd', this)"]`).removeClass('btn-info');
|
|
$(`[onclick="setDateType('today', this)"], [onclick="setDateType('ytd', this)"]`).addClass('btn-secondary');
|
|
|
|
$('#his_startdate').css('display', 'none');
|
|
$('#his_enddate').css('display', 'none');
|
|
$('#getmonth').css('display', 'block');
|
|
$('#getmonth').val(now.substr(0, 7));
|
|
}
|
|
else if (type == "ytd") {
|
|
$('#his_startdate').css('display', 'block');
|
|
$('#his_enddate').css('display', 'none');
|
|
$('#getmonth').css('display', 'none');
|
|
$('#his_startdate').val(ytd);
|
|
}
|
|
}
|
|
|
|
function searchDate() {
|
|
let start = new Date($('#his_startdate').val());
|
|
let end = new Date(new Date().setDate(new Date($('#his_enddate input').val()).getDate() + 1));
|
|
|
|
if (pageAct.dateType == "day")
|
|
end = new Date(new Date().setDate(start.getDate() + 1));
|
|
else if (pageAct.dateType == "month") {
|
|
start = new Date($('#getmonth').val());
|
|
end = new Date(new Date().setDate(start.getDate() + 30));
|
|
}
|
|
else if (pageAct.dateType != "range")
|
|
return;
|
|
|
|
getData(formatDate(start, "date", true), formatDate(end, "date", true));
|
|
}
|
|
|
|
function formatDate(date, type, send = false) {
|
|
if (!send)
|
|
return displayDate(date, type).replaceAll("/", "-");
|
|
else {
|
|
date = displayDate(date, type);
|
|
let month = date.split('/')[1];
|
|
let year = date.split('/')[0];
|
|
let day = date.split('/')[2];
|
|
return month + "/" + day + "/" + year;
|
|
}
|
|
}
|
|
|
|
function loadTable(data) {
|
|
if (data) {
|
|
$.each(data, function (i, v) {
|
|
// console.log("loadTable",pageAct.devicePoiName.split(" ")[0])
|
|
v.type = pageAct.devicePoiName.split(" ")[0];
|
|
});
|
|
}
|
|
|
|
let tag = "#historyTable";
|
|
|
|
let column_defs = [
|
|
{ "targets": [0], "width": "20%", "sortable": true },
|
|
{ "targets": [1], "width": "20%", "sortable": true },
|
|
{ "targets": [2], "width": "20%", "sortable": true }
|
|
];
|
|
|
|
let columns = [
|
|
{
|
|
"title": "類別",
|
|
"data": "type"
|
|
},
|
|
{
|
|
"title": "設備名稱",
|
|
"data": "deviceName",
|
|
},
|
|
{
|
|
"title": "數值",
|
|
"data": "value",
|
|
"render": function (data) {
|
|
if (isNaN(data)) {
|
|
return data
|
|
}
|
|
return data.roundDecimal(2);
|
|
}
|
|
},
|
|
{
|
|
"title": "紀錄時間",
|
|
"data": "timestamp",
|
|
"render": function (data) {
|
|
// console.log(data)
|
|
return displayDate(data, "datetime");
|
|
}
|
|
}
|
|
];
|
|
|
|
historyTable = new YourTeam.JqDataTables.getTableByStatic(tag, data, columns, column_defs, null, null, null, null, "tpi");
|
|
}
|
|
|
|
function exportExcel() {
|
|
let url = baseApiUrl + "/History/OpeExportExcel";
|
|
objSendData.Data = $('#historyTable').dataTable().fnGetData();
|
|
|
|
$.each(objSendData.Data, function (i, v) {
|
|
v.starttime = (pageAct.dateType == "month" ? new Date($('#getmonth').val()) : new Date($('#his_startdate').val()));
|
|
v.endtime = $('#his_enddate input').val() === "" ? null : new Date($('#his_enddate input').val());
|
|
v.dateType = pageAct.dateType;
|
|
});
|
|
|
|
ytAjax = new YourTeam.Ajax(url, objSendData, function (rel) {
|
|
if (rel.code == "0000")
|
|
location.href = baseApiUrl + "/api/df?path=" + rel.data.split('/')[0] + "&fileName=" + rel.data.split('/')[1] + "&token=" + cookies.get("JWT-Authorization");
|
|
}, null, "POST").send();
|
|
}
|
|
</script> |