ibms-MCUT/Frontend/_historyData.html

684 lines
23 KiB
HTML

<main id="js-page-content" role="main" class="page-content">
<h1 class="p-2 mb-0">歷史資料</h1>
<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">
<div class="row bg-dark p-2">
<div>
<div class="py-2 col-12" id="his_building">
<div class="item btn-group btn-group-toggle"
data-toggle="buttons"></div>
</div>
</div>
</div>
<div class="row bg-dark p-2 mb-5 align-items-center">
<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 flatpickr flatpickr-input selectDate"
id="his_startdate"
data-val=""
type="date"
name="date"
value="" />
<input class="form-control flatpickr flatpickr-input selectMonth"
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 flatpickr flatpickr-input selectDate"
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>
<style>
.flatpickr-monthDropdown-month {
color: black !important;
}
</style>
<script>
var historyTable = null;
var buildingTag = null;
pageAct.hisBuiName = "";
hisFirst = true;
$(function () {
flatpickr(".selectDate", {
locale: "zh_tw",
});
flatpickr(".selectMonth", {
dateFormat: "Y-m",
locale: "zh_tw",
onMonthChange: (selectedDates, dateStr, instance) => {
const curMon = new Date(
`${instance.currentYear}-${instance.currentMonth + 1}`
);
instance.setDate(curMon);
},
onYearChange: (selectedDates, dateStr, instance) => {
const curMon = new Date(
`${instance.currentYear}-${instance.currentMonth + 1}`
);
instance.setDate(curMon);
},
});
let html = "";
for (let building of pageAct.buildList) {
html += `<label class="btn btn-secondary">
<input type="radio" name="buildingRadio" id="radio-${building.getway}" value="${building.building_tag}" onChange="SelectBuild(this,'${building.building_tag}')"> ${building.full_name}
</label>`;
}
$("#his_building").find(".item").empty();
$("#his_building").find(".item").append(html);
if ($("#his_building .item label").first())
$("#his_building .item label").first().click();
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() != ""
) {
$("#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() != ""
) {
$("#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: buildingTag,
};
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) {
if (val3.device_number.includes("$3"))
val3.device_number = val3.device_number.replace("$3", "");
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();
}
$(loadEle).Loading("close");
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;
} 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);
if (!hisFirst) {
searchDate();
}
}
ytAjax = new YourTeam.Ajax(url, objSendData, success, null, "POST").send();
}
function getData(start = null, end = null) {
$(loadEle).Loading("start");
var sdt = new Date();
var edt = new Date(new Date().setDate(sdt.getDate() + 1));
start = start + " 00:00:00" ?? sdt.toLocaleDateString();
end = end + " 23:59:59" ?? edt.toLocaleDateString();
let sendData = {
device_number: pageAct.deviceNumber,
device_point: pageAct.deviceItem,
};
objSendData.Data = sendData;
let url = baseApiUrl + "/api/DevGetWay";
ytAjax = new YourTeam.Ajax(
url,
objSendData,
function (res) {
if (res && res.code == "0000") {
pageAct.hisBuiName = res.data;
getHistoryDataByBaja(
pageAct.deviceNumber + "_" + pageAct.deviceItem,
new Date(start).getTime(),
new Date(end).getTime(),
pageAct.deviceName,
pageAct.hisBuiName,
callBackFromHistory
);
} else {
$(loadEle).Loading("close");
}
},
function (res) {
$(loadEle).Loading("close");
},
"POST",
true
).send();
}
function callBackFromHistory(res = '{"count":0,"data":[]}') {
res = JSON.parse(res);
loadTable(res.data);
if (historyTable != null) {
let t = $("#historyTable").dataTable();
t.fnClearTable();
if (res.data.length > 0) t.fnAddData(res.data);
}
}
function setValue(deviceNumber, deviceName, deviceItem, elem) {
hisFirst = false;
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;
searchDate();
}
}
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"
);
$(".flatpickr-innerContainer").show();
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(now, "date", true));
else if (type == "ytd")
getData(formatDate(ytd, "date", true), formatDate(ytd, "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));
$(".flatpickr-innerContainer").hide();
} 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($("#his_enddate input").val());
if (
pageAct.dateType == "today" ||
pageAct.dateType == "day" ||
pageAct.dateType == "ytd"
)
end = start;
else if (pageAct.dateType == "month") {
start = new Date($("#getmonth").val());
end = new Date(start.valueOf()).setMonth(start.getMonth() + 1);
end = new Date(new Date(end).setDate(new Date(end).getDate() - 1));
} else if (pageAct.dateType != "range") return;
pageAct.hisStartDate = start;
pageAct.hisEndDate = end;
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) {
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.toString())) {
return data;
}
return data.roundDecimal(2);
},
},
{
title: "紀錄時間",
data: "timestamp",
render: function (data) {
return displayDate(data, "datetime");
},
},
];
historyTable = new YourTeam.JqDataTables.getTableByStatic(
tag,
data,
columns,
column_defs,
null,
null,
null,
null,
"tpi"
);
$(tag).DataTable().order([3, "desc"]);
}
}
function exportExcel() {
$(loadEle).Loading("start");
let token = cookies.get("JWT-Authorization");
let url = baseApiUrl + "/api/ExportHistory";
let v = {};
v.starttime = pageAct.hisStartDate;
v.endtime = pageAct.hisEndDate;
v.dateType = pageAct.dateType;
v.device_number = pageAct.deviceNumber;
objSendData.Data = v;
$.ajax({
type: "POST",
url: url,
data: JSON.stringify(objSendData.Data),
aysnc: true,
headers: {
Authorization: "Bearer " + token,
},
contentType: "application/json; charset=utf-8",
xhrFields: {
responseType: "blob", // to avoid binary data being mangled on charset conversion
},
success: function (rel, text, xhr) {
if (rel) {
downloadByBlob(xhr, rel);
}
$(loadEle).Loading("close");
},
error: function () {
$(loadEle).Loading("close");
},
complete: (xhr) => {
setLoading(false);
},
});
// ytAjax = new YourTeam.Ajax(url, objSendData, function (rel) {
// $(loadEle).Loading("close");
// }, function (rel) {
// if (rel) {
// downloadByBlob(xhr, rel);
// }
// $(loadEle).Loading("close");
// }, "POST",true).send();
}
//選擇棟別
function SelectBuild(e, building_tag) {
$(loadEle).Loading("start");
checkIsSelectedBuilding();
}
function checkIsSelectedBuilding() {
let result = false;
let buildingRadios = $("[name=buildingRadio]:checked");
buildingTag = null;
if (buildingRadios && buildingRadios.length > 0) {
$("[name=buildingRadio]").parent().removeClass("btn-info");
$("[name=buildingRadio]").parent().addClass("btn-secondary");
$("[name=buildingRadio]:checked").parent().removeClass("btn-secondary");
$("[name=buildingRadio]:checked").parent().addClass("btn-info");
buildingTag = buildingRadios.val(); //building tag
pageAct.hisBuiName = buildingRadios.prop("id").split("-")[1];
initList();
result = true;
}
return result;
}
</script>