jay.chang/ibms-MCUT
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改時間格式

Browse Source
This commit is contained in:
dev02 2022-11-24 10:43:44 +08:00
parent 9f78483b81
commit a074dcd89a
1 changed files with 124 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

156
Frontend/_historyData.html
View File

@ -18,24 +18,31 @@
<div class="row bg-dark p-2 mb-5"> <div class="row bg-dark p-2 mb-5">
<div class="col-auto"> <div class="col-auto">
<div class="btn-group"> <div class="btn-group">
<button type="button" class="btn btn-secondary waves-effect waves-themed">日期</button> <button type="button" onclick="setDateType('day')" class="btn btn-secondary waves-effect waves-themed">日期</button>
<button type="button" class="btn btn-secondary waves-effect waves-themed">日區間</button> <button type="button" onclick="setDateType('range')" class="btn btn-secondary waves-effect waves-themed">日區間</button>
<button type="button" class="btn btn-secondary waves-effect waves-themed">月</button> <button type="button" onclick="setDateType('month')" class="btn btn-secondary waves-effect waves-themed">月</button>
</div> </div>
</div> </div>
<div class="col-auto"> <div class="col-auto">
<div class="btn-group"> <div class="btn-group">
<button type="button" class="btn btn-secondary waves-effect waves-themed">今天</button> <button type="button" onclick="setDateType('today')" class="btn btn-secondary waves-effect waves-themed">今天</button>
<button type="button" class="btn btn-secondary waves-effect waves-themed">昨天</button> <button type="button" onclick="setDateType('ytd')" class="btn btn-secondary waves-effect waves-themed">昨天</button>
</div> </div>
</div> </div>
<div class="col-auto"> <div class="col-auto">
<div class="form-group"> <div class="form-group">
<input class="form-control" id="example-date" type="date" name="date" value="2023-07-23"> <input class="form-control" id="startdate" type="date" name="date" value="">
<input class="form-control" id="getmonth" type="month" style="display: none"/>
</div>
</div>
<div class="col-auto" id="enddate" style="display: none">
<div class="form-group">
<input class="form-control" type="date" name="date" value="">
</div> </div>
</div> </div>
<div class="col-auto"> <div class="col-auto">
<a href="#" class="btn btn-info">查詢</a>　<a href="#" class="btn btn-info waves-effect waves-themed"> <a href="#" onclick="searchDate()" class="btn btn-info">查詢</a>
<a href="#" class="btn btn-info waves-effect waves-themed">
<span class="fal fa-file-excel mr-1"></span> <span class="fal fa-file-excel mr-1"></span>
匯出 匯出
</a> </a>
@ -86,6 +93,7 @@
}); });
function initList() { function initList() {
pageAct.mainStatus = false;
let sendData = { let sendData = {
building_tag: pageAct.buiTag building_tag: pageAct.buiTag
} }
@ -95,15 +103,16 @@
let strHtml = ``; let strHtml = ``;
let i1 = null, i2 = null, first = true; let i1 = null, i2 = null, first = true;
$.each(res.data.history_Main_Systems, function (index, val) { $.each(res.data.history_Main_Systems, function (index, val) {
strHtml += `<li> if (pageAct.mainStatus) {
<a href="#" data-filter-tags="user interface buttons compass action dropdown navigation sidebars" data-maintag="${val.main_system_tag}"> strHtml += `<li>
<span class="nav-link-text">${val.full_name}</span> <a href="#" data-filter-tags="user interface buttons compass action dropdown navigation sidebars" data-maintag="${val.main_system_tag}">
</a> <span class="nav-link-text">${val.full_name}</span>
<ul style="${index == 0 ? `display:block;` : ``}">`; </a>
<ul style="${index == 0 ? `display:block;` : ``}">`;
i1 = (val.history_Sub_systems != null && i1 == null) ? index : null; i1 = (val.history_Sub_systems != null && i1 == null) ? index : null;
}
$.each(val.history_Sub_systems, function (index2, val2) { $.each(val.history_Sub_systems, function (index2, val2) {
i2 = (val2.device != null && i2 == null) ? index2 : null; i2 = (val2.device != null && i2 == null) ? index2 : null;
@ -114,7 +123,7 @@
${val2.full_name} ${val2.sub_system_tag} ${val2.full_name} ${val2.sub_system_tag}
</span> </span>
</a> </a>
<ul style="${index == i1 && index2 == i2 ? `display:block;` : ``}">`; <ul style="${(i1 != null ? index == i1 : first) && index2 == i2 ? `display:block;` : ``}">`;
$.each(val2.device, function (index3, val3) { $.each(val2.device, function (index3, val3) {
strHtml += `<li> strHtml += `<li>
@ -125,16 +134,29 @@
</a> </a>
</li>`; </li>`;
if (index == i1 && index2 == i2 && first) { if (pageAct.mainStatus) {
first = false; if (index == i1 && index2 == i2 && first) {
pageAct.deviceNumber = val3.device_number; first = false;
pageAct.deviceName = val3.full_name; pageAct.deviceNumber = val3.device_number;
devPointsList(); 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>`; strHtml += `</ul> </li>`;
}); });
strHtml += `</ul> </li>`;
if (pageAct.mainStatus) {
strHtml += `</ul> </li>`;
}
}); });
$('#js_nested_list').html(strHtml); $('#js_nested_list').html(strHtml);
@ -169,10 +191,10 @@
var sdt = new Date(); var sdt = new Date();
var edt = new Date(new Date().setDate(sdt.getDate() + 1)); var edt = new Date(new Date().setDate(sdt.getDate() + 1));
start = start ?? sdt.toLocaleDateString(); start = start ?? sdt.toLocaleDateString();
end = end ?? edt.toLocaleDateString(); end = end ?? edt.toLocaleDateString();
getHistoryDataByBaja(pageAct.deviceNumber + "_" + pageAct.deviceItem, getHistoryDataByBaja(pageAct.deviceNumber + "_" + pageAct.deviceItem,
new Date(start).getTime(), new Date(start).getTime(),
new Date(end).getTime(), new Date(end).getTime(),
pageAct.deviceName, pageAct.deviceName,
"Mitsubishi_Sup", "Mitsubishi_Sup",
callBackFromHistory); callBackFromHistory);
@ -181,14 +203,18 @@
function callBackFromHistory(res) { function callBackFromHistory(res) {
let strHtml = ``; let strHtml = ``;
res = JSON.parse(res); res = JSON.parse(res);
console.log(res); if (res.data.length > 0) {
$.each(res.data, function (index, val) { $.each(res.data, function (index, val) {
strHtml += `<tr> strHtml += `<tr>
<td>${val.deviceName}</td> <td>${val.deviceName}</td>
<td>${val.value}</td> <td>${val.value}</td>
<td>${displayDate(val.timestamp)}</td> <td>${displayDate(val.timestamp)}</td>
</tr>`; </tr>`;
}); });
}
else
strHtml += `<tr><td colspan="3">查無資料</td></tr>`;
$('#tableData tbody').html(strHtml); $('#tableData tbody').html(strHtml);
} }
@ -202,5 +228,71 @@
pageAct.deviceItem = deviceItem; pageAct.deviceItem = deviceItem;
getData(); getData();
} }
}
function setDateType(type) {
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;
$('#startdate').css('display', 'block');
$('#enddate').css('display', 'none');
$('#getmonth').css('display', 'none');
$('#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 if (type == "range") {
$('#startdate').css('display', 'block');
$('#enddate').css('display', 'block');
$('#getmonth').css('display', 'none');
$('#startdate').val(now);
$('#enddate input').val(tmr);
}
else if (type == "month") {
$('#startdate').css('display', 'none');
$('#enddate').css('display', 'none');
$('#getmonth').css('display', 'block');
$('#getmonth').val(now.substr(0, 7));
}
else if (type == "ytd") {
$('#startdate').css('display', 'block');
$('#enddate').css('display', 'none');
$('#getmonth').css('display', 'none');
$('#startdate').val(ytd);
}
}
function searchDate() {
let start = new Date($('#startdate').val());
let end = new Date(new Date().setDate(new Date($('#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;
}
} }
</script> </script>