修改時間格式
This commit is contained in:
parent
9f78483b81
commit
a074dcd89a
@ -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,8 +103,8 @@
|
|||||||
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) {
|
||||||
|
if (pageAct.mainStatus) {
|
||||||
strHtml += `<li>
|
strHtml += `<li>
|
||||||
<a href="#" data-filter-tags="user interface buttons compass action dropdown navigation sidebars" data-maintag="${val.main_system_tag}">
|
<a href="#" data-filter-tags="user interface buttons compass action dropdown navigation sidebars" data-maintag="${val.main_system_tag}">
|
||||||
<span class="nav-link-text">${val.full_name}</span>
|
<span class="nav-link-text">${val.full_name}</span>
|
||||||
@ -104,6 +112,7 @@
|
|||||||
<ul style="${index == 0 ? `display:block;` : ``}">`;
|
<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 (pageAct.mainStatus) {
|
||||||
if (index == i1 && index2 == i2 && first) {
|
if (index == i1 && index2 == i2 && first) {
|
||||||
first = false;
|
first = false;
|
||||||
pageAct.deviceNumber = val3.device_number;
|
pageAct.deviceNumber = val3.device_number;
|
||||||
pageAct.deviceName = val3.full_name;
|
pageAct.deviceName = val3.full_name;
|
||||||
devPointsList();
|
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>`;
|
||||||
});
|
});
|
||||||
|
|
||||||
|
if (pageAct.mainStatus) {
|
||||||
strHtml += `</ul> </li>`;
|
strHtml += `</ul> </li>`;
|
||||||
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
$('#js_nested_list').html(strHtml);
|
$('#js_nested_list').html(strHtml);
|
||||||
@ -181,7 +203,7 @@
|
|||||||
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>
|
||||||
@ -189,6 +211,10 @@
|
|||||||
<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);
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -203,4 +229,70 @@
|
|||||||
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>
|
Loading…
Reference in New Issue
Block a user