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

[Frontend]修改歷史資料日曆文字顏色 | sidebar 告警設備名稱修正

Browse Source
This commit is contained in:
Celeste 2023-09-20 16:22:55 +08:00
parent 4f762c4201
commit ff5b5fa4b3
3 changed files with 432 additions and 310 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
Frontend/_alert.html
View File

@ -1074,10 +1074,11 @@
const building_name = pageAct.buildList.find( const building_name = pageAct.buildList.find(
({ building_tag }) => building_tag === data.split("_")[1] ({ building_tag }) => building_tag === data.split("_")[1]
)?.full_name; )?.full_name;
return allDevices.find((d) => d.device_number === data)?.full_name || return allDevices.find((d) => d.device_number === data)?.full_name ||
row.alarmClass === "Sys_Con_AlarmClass" (row.alarmClass === "Sys_Con_AlarmClass"
? `${building_name}_電錶邊緣控制器_${data.split("_")[7]}` ? `${building_name}_電錶邊緣控制器_${data.split("_")[7]}`
: ""; : "");
}, },
}, },
{ {

482
Frontend/_historyData.html
View File

@ -6,14 +6,17 @@
<div class="rounded border border-white"> <div class="rounded border border-white">
<div class="d-flex position-relative py-3 px-4"> <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> <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="輸入兩字以上"> <input type="text"
id="js_nested_list_filter"
class="form-control shadow-inset-1 pl-6 border-success"
placeholder="輸入兩字以上" />
</div> </div>
<!-- nav-menu-reset will reset the font colors --> <!-- 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 id="js_nested_list"
</ul> 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 class="filter-message js-filter-message m-0 text-left pl-4 py-3 fw-500"></div>
</div> </div>
</div> </div>
<div class="col-sm-12 col-xl-10"> <div class="col-sm-12 col-xl-10">
<div class="row bg-dark p-2"> <div class="row bg-dark p-2">
@ -27,31 +30,65 @@
<div class="row bg-dark p-2 mb-5 align-items-center"> <div class="row bg-dark p-2 mb-5 align-items-center">
<div class="col-auto"> <div class="col-auto">
<div class="btn-group"> <div class="btn-group">
<button type="button" onclick="setDateType('day', this)" class="btn btn-secondary waves-effect waves-themed">日期</button> <button type="button"
<button type="button" onclick="setDateType('range', this)" class="btn btn-secondary waves-effect waves-themed">區間</button> onclick="setDateType('day', this)"
<button type="button" onclick="setDateType('month', this)" class="btn btn-secondary waves-effect waves-themed">月</button> 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> </div>
<div class="col-auto"> <div class="col-auto">
<div class="btn-group"> <div class="btn-group">
<button type="button" onclick="setDateType('today', this)" class="btn btn-secondary waves-effect waves-themed">今天</button> <button type="button"
<button type="button" onclick="setDateType('ytd', this)" class="btn btn-secondary waves-effect waves-themed">昨天</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> </div>
<div class="col-auto"> <div class="col-auto">
<div class="form-group"> <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 selectDate"
<input class="form-control" id="getmonth" type="month" style="display: none" /> id="his_startdate"
data-val=""
type="date"
name="date"
value="" />
<input class="form-control flatpickr flatpickr-input selectDate"
id="getmonth"
type="month"
style="display: none" />
</div> </div>
</div> </div>
<div class="col-auto" id="his_enddate" style="display: none"> <div class="col-auto" id="his_enddate" style="display: none">
<div class="form-group"> <div class="form-group">
<input class="form-control" type="date" data-val="" name="date" value=""> <input class="form-control flatpickr flatpickr-input selectDate"
type="date"
data-val=""
name="date"
value="" />
</div> </div>
</div> </div>
<div class="col-auto"> <div class="col-auto">
<a href="#" onclick="searchDate()" class="btn btn-info">查詢</a> <a href="#" onclick="searchDate()" class="btn btn-info">查詢</a>
<a href="#" onclick="exportExcel()" class="btn btn-info waves-effect waves-themed"> <a href="#"
onclick="exportExcel()"
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>
@ -59,22 +96,23 @@
</div> </div>
<div class="row-cols-1 mb-2"> <div class="row-cols-1 mb-2">
<div id="devPointsList" class="btn-group"> <div id="devPointsList" class="btn-group"></div>
</div>
</div> </div>
<div> <div>
<div class="frame-wrap"> <div class="frame-wrap">
<table id="historyTable" class="table table-bordered table-striped text-center m-0 w-100"> <table id="historyTable"
</table> class="table table-bordered table-striped text-center m-0 w-100"></table>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</main> </main>
<style>
.flatpickr-monthDropdown-month {
color: black !important;
}
</style>
<script> <script>
var historyTable = null; var historyTable = null;
var buildingTag = null; var buildingTag = null;
@ -91,138 +129,174 @@
$("#his_building").find(".item").empty(); $("#his_building").find(".item").empty();
$("#his_building").find(".item").append(html); $("#his_building").find(".item").append(html);
if ($("#his_building .item label").first()) if ($("#his_building .item label").first())
$("#his_building .item label").first().click() $("#his_building .item label").first().click();
initList(); initList();
// default list filter // default list filter
initApp.listFilter($('#js_default_list'), $('#js_default_list_filter')); initApp.listFilter($("#js_default_list"), $("#js_default_list_filter"));
// custom response message // custom response message
initApp.listFilter($('#js-list-msg'), $('#js-list-msg-filter')); initApp.listFilter($("#js-list-msg"), $("#js-list-msg-filter"));
//accordion filter //accordion filter
initApp.listFilter($('#js_list_accordion'), $('#js_list_accordion_filter')); initApp.listFilter($("#js_list_accordion"), $("#js_list_accordion_filter"));
// nested list filter // nested list filter
initApp.listFilter($('#js_nested_list'), $('#js_nested_list_filter')); initApp.listFilter($("#js_nested_list"), $("#js_nested_list_filter"));
//init navigation //init navigation
initApp.buildNavigation($('#js_nested_list')); initApp.buildNavigation($("#js_nested_list"));
loadTable(null); loadTable(null);
$(`[onclick="setDateType('day', this)"]`).click(); $(`[onclick="setDateType('day', this)"]`).click();
$(`[onclick="setDateType('today', this)"]`).click(); $(`[onclick="setDateType('today', this)"]`).click();
onEvent('change', '#his_startdate', function () { onEvent("change", "#his_startdate", function () {
let today = displayDate(new Date(Date.now()), 'date').replaceAll('/', '-'); 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('/', '-'); "/",
"-"
);
let ytd = displayDate(
new Date(new Date().setDate(new Date(Date.now()).getDate() - 1)),
"date"
).replaceAll("/", "-");
if (pageAct.dateType == 'range') { if (pageAct.dateType == "range") {
if ($('#his_startdate').val() > $('#his_enddate input').val() && ($('#his_startdate').val() != "" && $('#his_enddate input').val() != "")) { if (
$('#his_startdate').val($('#his_startdate').data('val')); $("#his_startdate").val() > $("#his_enddate input").val() &&
toast_error('不可選擇大於結束時間'); $("#his_startdate").val() != "" &&
} $("#his_enddate input").val() != ""
else { ) {
$('#his_startdate').data('val', $('#his_startdate').val()); $("#his_startdate").val($("#his_startdate").data("val"));
$('#his_enddate input').data('val', $('#his_enddate input').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)"]`).addClass("btn-secondary");
$(`[onclick="setDateType('today', this)"]`).removeClass('btn-info'); $(`[onclick="setDateType('today', this)"]`).removeClass("btn-info");
$(`[onclick="setDateType('ytd', this)"]`).addClass('btn-secondary'); $(`[onclick="setDateType('ytd', this)"]`).addClass("btn-secondary");
$(`[onclick="setDateType('ytd', this)"]`).removeClass('btn-info'); $(`[onclick="setDateType('ytd', this)"]`).removeClass("btn-info");
if ($('#his_startdate').val() == $('#his_enddate input').val()) { if ($("#his_startdate").val() == $("#his_enddate input").val()) {
if ($('#his_startdate').val() == today) { if ($("#his_startdate").val() == today) {
$(`[onclick="setDateType('today', this)"]`).removeClass('btn-secondary'); $(`[onclick="setDateType('today', this)"]`).removeClass(
$(`[onclick="setDateType('today', this)"]`).addClass('btn-info'); "btn-secondary"
} );
else if ($('#his_startdate').val() == ytd) { $(`[onclick="setDateType('today', this)"]`).addClass("btn-info");
$(`[onclick="setDateType('ytd', this)"]`).removeClass('btn-secondary'); } else if ($("#his_startdate").val() == ytd) {
$(`[onclick="setDateType('ytd', this)"]`).addClass('btn-info'); $(`[onclick="setDateType('ytd', this)"]`).removeClass(
"btn-secondary"
);
$(`[onclick="setDateType('ytd', this)"]`).addClass("btn-info");
} }
} }
} }
} } else if ($(this).val() == today) {
else if ($(this).val() == today) { $(`[onclick="setDateType('today', this)"]`).removeClass(
$(`[onclick="setDateType('today', this)"]`).removeClass('btn-secondary'); "btn-secondary"
$(`[onclick="setDateType('today', this)"]`).addClass('btn-info'); );
$(`[onclick="setDateType('ytd', this)"]`).addClass('btn-secondary'); $(`[onclick="setDateType('today', this)"]`).addClass("btn-info");
$(`[onclick="setDateType('ytd', this)"]`).removeClass('btn-info'); $(`[onclick="setDateType('ytd', this)"]`).addClass("btn-secondary");
} $(`[onclick="setDateType('ytd', this)"]`).removeClass("btn-info");
else if ($(this).val() == ytd) { } else if ($(this).val() == ytd) {
$(`[onclick="setDateType('today', this)"]`).addClass('btn-secondary'); $(`[onclick="setDateType('today', this)"]`).addClass("btn-secondary");
$(`[onclick="setDateType('today', this)"]`).removeClass('btn-info'); $(`[onclick="setDateType('today', this)"]`).removeClass("btn-info");
$(`[onclick="setDateType('ytd', this)"]`).removeClass('btn-secondary'); $(`[onclick="setDateType('ytd', this)"]`).removeClass("btn-secondary");
$(`[onclick="setDateType('ytd', this)"]`).addClass('btn-info'); $(`[onclick="setDateType('ytd', this)"]`).addClass("btn-info");
} }
}); });
onEvent('change', '#his_enddate input', function () { onEvent("change", "#his_enddate input", function () {
let today = displayDate(new Date(Date.now()), 'date').replaceAll('/', '-'); 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('/', '-'); "/",
"-"
);
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() != "")) { if (
$('#his_enddate input').val($('#his_enddate input').data('val')); $("#his_startdate").val() > $("#his_enddate input").val() &&
toast_error('不可選擇大於結束時間'); $("#his_startdate").val() != "" &&
} $("#his_enddate input").val() != ""
else { ) {
$('#his_startdate').data('val', $('#his_startdate').val()); $("#his_enddate input").val($("#his_enddate input").data("val"));
$('#his_enddate input').data('val', $('#his_enddate input').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)"]`).addClass("btn-secondary");
$(`[onclick="setDateType('today', this)"]`).removeClass('btn-info'); $(`[onclick="setDateType('today', this)"]`).removeClass("btn-info");
$(`[onclick="setDateType('ytd', this)"]`).addClass('btn-secondary'); $(`[onclick="setDateType('ytd', this)"]`).addClass("btn-secondary");
$(`[onclick="setDateType('ytd', this)"]`).removeClass('btn-info'); $(`[onclick="setDateType('ytd', this)"]`).removeClass("btn-info");
if ($('#his_startdate').val() == $('#his_enddate input').val()) { if ($("#his_startdate").val() == $("#his_enddate input").val()) {
if ($('#his_startdate').val() == today) { if ($("#his_startdate").val() == today) {
$(`[onclick="setDateType('today', this)"]`).removeClass('btn-secondary'); $(`[onclick="setDateType('today', this)"]`).removeClass(
$(`[onclick="setDateType('today', this)"]`).addClass('btn-info'); "btn-secondary"
} );
else if ($('#his_startdate').val() == ytd) { $(`[onclick="setDateType('today', this)"]`).addClass("btn-info");
$(`[onclick="setDateType('ytd', this)"]`).removeClass('btn-secondary'); } else if ($("#his_startdate").val() == ytd) {
$(`[onclick="setDateType('ytd', this)"]`).addClass('btn-info'); $(`[onclick="setDateType('ytd', this)"]`).removeClass(
"btn-secondary"
);
$(`[onclick="setDateType('ytd', this)"]`).addClass("btn-info");
} }
} }
} }
}); });
}); });
function initList() { function initList() {
let sendData = { let sendData = {
building_tag: buildingTag building_tag: buildingTag,
} };
objSendData.Data = sendData; objSendData.Data = sendData;
let url = baseApiUrl + "/api/History/GetMainSub"; let url = baseApiUrl + "/api/History/GetMainSub";
function success(res) { function success(res) {
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) { if (pageAct.mainStatus) {
strHtml += `<li> strHtml += `<li>
<a href="#" data-filter-tags="${val.full_name.toLowerCase()}" data-maintag="${val.main_system_tag}"> <a href="#" data-filter-tags="${val.full_name.toLowerCase()}" data-maintag="${val.main_system_tag
<span class="nav-link-text">${val.full_name}</span> }">
<span class="nav-link-text">${val.full_name
}</span>
</a> </a>
<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;
strHtml += `<li> strHtml += `<li>
<a href="#" data-filter-tags="${val2.full_name.toLowerCase()}" data-subtag="${val2.sub_system_tag}"> <a href="#" data-filter-tags="${val2.full_name.toLowerCase()}" data-subtag="${val2.sub_system_tag
}">
<span class="nav-link-text"> <span class="nav-link-text">
${val2.full_name} ${val2.full_name}
</span> </span>
</a> </a>
<ul style="${(i1 != null ? index == i1 : first) && 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) {
if (val3.device_number.includes("$3")) if (val3.device_number.includes("$3"))
val3.device_number = val3.device_number.replace("$3", ""); val3.device_number = val3.device_number.replace("$3", "");
strHtml += `<li data-tabname="hisListItem"> 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}"> <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"> <span class="nav-link-text">
${val3.full_name} ${val3.full_name}
</span> </span>
@ -236,8 +310,7 @@
pageAct.deviceName = val3.full_name; pageAct.deviceName = val3.full_name;
devPointsList(); devPointsList();
} }
} } else {
else {
if (index2 == i2 && first) { if (index2 == i2 && first) {
first = false; first = false;
pageAct.deviceNumber = val3.device_number; pageAct.deviceNumber = val3.device_number;
@ -254,7 +327,7 @@
} }
}); });
$('#js_nested_list').html(strHtml); $("#js_nested_list").html(strHtml);
$(`[data-tabname="hisListItem"]`).YTTab(); $(`[data-tabname="hisListItem"]`).YTTab();
} }
$(loadEle).Loading("close"); $(loadEle).Loading("close");
@ -263,8 +336,8 @@
function devPointsList() { function devPointsList() {
let sendData = { let sendData = {
device_number: pageAct.deviceNumber device_number: pageAct.deviceNumber,
} };
objSendData.Data = sendData; objSendData.Data = sendData;
let url = baseApiUrl + "/api/History/GetDevPoi"; let url = baseApiUrl + "/api/History/GetDevPoi";
function success(res) { function success(res) {
@ -272,15 +345,19 @@
$.each(res.data, function (index, val) { $.each(res.data, function (index, val) {
if (index == 0) { 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>`; 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.deviceItem = val.points;
pageAct.devicePoiName = val.full_name + ' ' + val.points; pageAct.devicePoiName = val.full_name + " " + val.points;
} else { } 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>`; 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); $("#devPointsList").html(strHtml);
if (!hisFirst) { if (!hisFirst) {
searchDate(); searchDate();
@ -298,48 +375,60 @@
let sendData = { let sendData = {
device_number: pageAct.deviceNumber, device_number: pageAct.deviceNumber,
device_point: pageAct.deviceItem device_point: pageAct.deviceItem,
} };
objSendData.Data = sendData; objSendData.Data = sendData;
let url = baseApiUrl + "/api/DevGetWay"; let url = baseApiUrl + "/api/DevGetWay";
ytAjax = new YourTeam.Ajax(url, objSendData, function (res) { ytAjax = new YourTeam.Ajax(
url,
objSendData,
function (res) {
if (res && res.code == "0000") { if (res && res.code == "0000") {
pageAct.hisBuiName = res.data; pageAct.hisBuiName = res.data;
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,
pageAct.hisBuiName, pageAct.hisBuiName,
callBackFromHistory); callBackFromHistory
} );
else { } else {
$(loadEle).Loading("close"); $(loadEle).Loading("close");
} }
}, function (res) { $(loadEle).Loading("close"); }, "POST", true).send(); },
function (res) {
$(loadEle).Loading("close");
},
"POST",
true
).send();
} }
function callBackFromHistory(res = '{"count":0,"data":[]}') { function callBackFromHistory(res = '{"count":0,"data":[]}') {
res = JSON.parse(res); res = JSON.parse(res);
loadTable(res.data); loadTable(res.data);
if (historyTable != null) { if (historyTable != null) {
let t = $('#historyTable').dataTable(); let t = $("#historyTable").dataTable();
t.fnClearTable(); t.fnClearTable();
if (res.data.length > 0) if (res.data.length > 0) t.fnAddData(res.data);
t.fnAddData(res.data);
} }
} }
function setValue(deviceNumber, deviceName, deviceItem, elem) { function setValue(deviceNumber, deviceName, deviceItem, elem) {
hisFirst = false; hisFirst = false;
btnSelCss(elem); btnSelCss(elem);
if ((deviceNumber != null && deviceNumber != undefined) && (deviceName != null && deviceName != undefined)) { if (
deviceNumber != null &&
deviceNumber != undefined &&
deviceName != null &&
deviceName != undefined
) {
pageAct.deviceNumber = deviceNumber; pageAct.deviceNumber = deviceNumber;
pageAct.deviceName = deviceName; pageAct.deviceName = deviceName;
devPointsList(); devPointsList();
} } else if (deviceItem != null && deviceItem != undefined) {
else if (deviceItem != null && deviceItem != undefined) {
pageAct.devicePoiName = $(elem).text(); pageAct.devicePoiName = $(elem).text();
pageAct.deviceItem = deviceItem; pageAct.deviceItem = deviceItem;
@ -352,67 +441,82 @@
pageAct.dateType = type; pageAct.dateType = type;
let now = formatDate(new Date(Date.now()), "date"); let now = formatDate(new Date(Date.now()), "date");
let ytd = formatDate(new Date(new Date().setDate(new Date().getDate() - 1)), "date"); let ytd = formatDate(
let tmr = formatDate(new Date(new Date().setDate(new Date().getDate() + 1)), "date"); 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") { if (type == "day" || type == "today" || type == "ytd") {
let date = type == "ytd" ? ytd : now; let date = type == "ytd" ? ytd : now;
$('#his_startdate').css('display', 'block'); $("#his_startdate").css("display", "block");
$('#his_enddate').css('display', 'none'); $("#his_enddate").css("display", "none");
$('#getmonth').css('display', 'none'); $("#getmonth").css("display", "none");
$('#his_startdate').val(date); $("#his_startdate").val(date);
if (type == "today") if (type == "today")
getData(formatDate(now, "date", true), formatDate(now, "date", true)); getData(formatDate(now, "date", true), formatDate(now, "date", true));
else if (type == "ytd") else if (type == "ytd")
getData(formatDate(ytd, "date", true), formatDate(ytd, "date", true)); getData(formatDate(ytd, "date", true), formatDate(ytd, "date", true));
else { else {
$(`[onclick="setDateType('today', this)"]`).removeClass('btn-secondary'); $(`[onclick="setDateType('today', this)"]`).removeClass(
$(`[onclick="setDateType('today', this)"]`).addClass('btn-info'); "btn-secondary"
);
$(`[onclick="setDateType('today', this)"]`).addClass("btn-info");
} }
} } else if (type == "range") {
else if (type == "range") { $(
$(`[onclick="setDateType('today', this)"], [onclick="setDateType('ytd', this)"]`).removeClass('btn-info'); `[onclick="setDateType('today', this)"], [onclick="setDateType('ytd', this)"]`
$(`[onclick="setDateType('today', this)"], [onclick="setDateType('ytd', this)"]`).addClass('btn-secondary'); ).removeClass("btn-info");
$(
`[onclick="setDateType('today', this)"], [onclick="setDateType('ytd', this)"]`
).addClass("btn-secondary");
$('#his_startdate').css('display', 'block'); $("#his_startdate").css("display", "block");
$('#his_enddate').css('display', 'block'); $("#his_enddate").css("display", "block");
$('#getmonth').css('display', 'none'); $("#getmonth").css("display", "none");
$('#his_startdate').val(now); $("#his_startdate").val(now);
$('#his_startdate').data('val', now); $("#his_startdate").data("val", now);
$('#his_enddate input').val(tmr); $("#his_enddate input").val(tmr);
$('#his_enddate input').data('val', tmr); $("#his_enddate input").data("val", tmr);
} } else if (type == "month") {
else if (type == "month") { $(
$(`[onclick="setDateType('today', this)"], [onclick="setDateType('ytd', this)"]`).removeClass('btn-info'); `[onclick="setDateType('today', this)"], [onclick="setDateType('ytd', this)"]`
$(`[onclick="setDateType('today', this)"], [onclick="setDateType('ytd', this)"]`).addClass('btn-secondary'); ).removeClass("btn-info");
$(
`[onclick="setDateType('today', this)"], [onclick="setDateType('ytd', this)"]`
).addClass("btn-secondary");
$('#his_startdate').css('display', 'none'); $("#his_startdate").css("display", "none");
$('#his_enddate').css('display', 'none'); $("#his_enddate").css("display", "none");
$('#getmonth').css('display', 'block'); $("#getmonth").css("display", "block");
$('#getmonth').val(now.substr(0, 7)); $("#getmonth").val(now.substr(0, 7));
} } else if (type == "ytd") {
else if (type == "ytd") { $("#his_startdate").css("display", "block");
$('#his_startdate').css('display', 'block'); $("#his_enddate").css("display", "none");
$('#his_enddate').css('display', 'none'); $("#getmonth").css("display", "none");
$('#getmonth').css('display', 'none'); $("#his_startdate").val(ytd);
$('#his_startdate').val(ytd);
} }
} }
function searchDate() { function searchDate() {
let start = new Date($('#his_startdate').val()); let start = new Date($("#his_startdate").val());
let end = new Date($('#his_enddate input').val()); let end = new Date($("#his_enddate input").val());
if (pageAct.dateType == "today" || pageAct.dateType == "day" || pageAct.dateType == "ytd") if (
pageAct.dateType == "today" ||
pageAct.dateType == "day" ||
pageAct.dateType == "ytd"
)
end = start; end = start;
else if (pageAct.dateType == "month") { else if (pageAct.dateType == "month") {
start = new Date($('#getmonth').val()); start = new Date($("#getmonth").val());
end = new Date(start.valueOf()).setMonth(start.getMonth() + 1); end = new Date(start.valueOf()).setMonth(start.getMonth() + 1);
end = new Date(new Date(end).setDate(new Date(end).getDate() - 1)); end = new Date(new Date(end).setDate(new Date(end).getDate() - 1));
} } else if (pageAct.dateType != "range") return;
else if (pageAct.dateType != "range")
return;
pageAct.hisStartDate = start; pageAct.hisStartDate = start;
pageAct.hisEndDate = end; pageAct.hisEndDate = end;
@ -420,20 +524,18 @@
} }
function formatDate(date, type, send = false) { function formatDate(date, type, send = false) {
if (!send) if (!send) return displayDate(date, type).replaceAll("/", "-");
return displayDate(date, type).replaceAll("/", "-");
else { else {
date = displayDate(date, type); date = displayDate(date, type);
let month = date.split('/')[1]; let month = date.split("/")[1];
let year = date.split('/')[0]; let year = date.split("/")[0];
let day = date.split('/')[2]; let day = date.split("/")[2];
return month + "/" + day + "/" + year; return month + "/" + day + "/" + year;
} }
} }
function loadTable(data) { function loadTable(data) {
if (data) { if (data) {
$.each(data, function (i, v) { $.each(data, function (i, v) {
v.type = pageAct.devicePoiName.split(" ")[0]; v.type = pageAct.devicePoiName.split(" ")[0];
}); });
@ -441,41 +543,51 @@
let tag = "#historyTable"; let tag = "#historyTable";
let column_defs = [ let column_defs = [
{ "targets": [0], "width": "20%", "sortable": true }, { targets: [0], width: "20%", sortable: true },
{ "targets": [1], "width": "20%", "sortable": true }, { targets: [1], width: "20%", sortable: true },
{ "targets": [2], "width": "20%", "sortable": true } { targets: [2], width: "20%", sortable: true },
]; ];
let columns = [ let columns = [
{ {
"title": "類別", title: "類別",
"data": "type" data: "type",
}, },
{ {
"title": "設備名稱", title: "設備名稱",
"data": "deviceName", data: "deviceName",
}, },
{ {
"title": "數值", title: "數值",
"data": "value", data: "value",
"render": function (data) { render: function (data) {
if (isNaN(data.toString())) { if (isNaN(data.toString())) {
return data return data;
} }
return data.roundDecimal(2); return data.roundDecimal(2);
} },
}, },
{ {
"title": "紀錄時間", title: "紀錄時間",
"data": "timestamp", data: "timestamp",
"render": function (data) { render: function (data) {
return displayDate(data, "datetime"); return displayDate(data, "datetime");
} },
} },
]; ];
historyTable = new YourTeam.JqDataTables.getTableByStatic(tag, data, columns, column_defs, null, null, null, null, "tpi"); historyTable = new YourTeam.JqDataTables.getTableByStatic(
$(tag).DataTable().order([3, 'desc']); tag,
data,
columns,
column_defs,
null,
null,
null,
null,
"tpi"
);
$(tag).DataTable().order([3, "desc"]);
} }
} }
@ -543,7 +655,7 @@
$("[name=buildingRadio]:checked").parent().removeClass("btn-secondary"); $("[name=buildingRadio]:checked").parent().removeClass("btn-secondary");
$("[name=buildingRadio]:checked").parent().addClass("btn-info"); $("[name=buildingRadio]:checked").parent().addClass("btn-info");
buildingTag = buildingRadios.val(); //building tag buildingTag = buildingRadios.val(); //building tag
pageAct.hisBuiName = buildingRadios.prop('id').split("-")[1]; pageAct.hisBuiName = buildingRadios.prop("id").split("-")[1];
initList(); initList();
result = true; result = true;
} }

29
Frontend/index.html
View File

@ -1032,7 +1032,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
checkDevState(); checkDevState();
loadNoticeConSta(); loadNoticeConSta();
refreshSubPage() refreshSubPage();
allDevices = getAllDevice(); allDevices = getAllDevice();
if (pageAct.isShowBuildingInMenu) { if (pageAct.isShowBuildingInMenu) {
@ -1354,7 +1354,9 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
} else { } else {
$( $(
`#subSysBtn${lastPageAct.sysSubTag `#subSysBtn${lastPageAct.sysSubTag
}[data-building-tag=${buildingTagOnJquery(lastPageAct.buiTag)}]` }[data-building-tag=${buildingTagOnJquery(
lastPageAct.buiTag
)}]`
).click(); ).click();
} }
} else { } else {
@ -1909,7 +1911,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
} }
function setSysTagForPageAct(obj) { function setSysTagForPageAct(obj) {
console.log($(obj).data("subsysobj")) console.log($(obj).data("subsysobj"));
pageAct.sysMainTag = pageAct.sysMainTag =
$(obj).data("subsysobj")?.main_system_tag || $(obj).data("subsysobj")?.main_system_tag ||
pageAct.sysSubObj.main_system_tag; pageAct.sysSubObj.main_system_tag;
@ -2236,9 +2238,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
{ {
page: page, page: page,
tabname: "systemMonitor", tabname: "systemMonitor",
"building-tag": buildingTagOnJquery( "building-tag": buildingTagOnJquery(pageAct.buiTag),
pageAct.buiTag
),
}, },
"topFunBtn" "topFunBtn"
); );
@ -2328,16 +2328,25 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
]; ];
// 向 niagara 取得告警資料 // 向 niagara 取得告警資料
getDeviceAlarmCardByBaja(null, now, false, false, function (bajaDatas) { getDeviceAlarmCardByBaja(null, now, false, false, function (bajaDatas) {
let datas = bajaDatas.data.filter(({ alarmClass }) => alarmClass!== "defaultAlarmClass"); let datas = bajaDatas.data.filter(
({ alarmClass }) => alarmClass !== "defaultAlarmClass"
);
let titleHtml = `異常通知`; let titleHtml = `異常通知`;
let notices = []; let notices = [];
// 遍歷每個告警資料 // 遍歷每個告警資料
$.each(datas ?? [], (idx, data) => { $.each(datas ?? [], (idx, data) => {
if (noticeOptArr.findIndex((x) => x.id == data.uuid) == -1) { if (noticeOptArr.findIndex((x) => x.id == data.uuid) == -1) {
// 針對該告警對象的設備，從 allDevices 找出設備名稱 // 針對該告警對象的設備，從 allDevices 找出設備名稱
datas[idx].full_name = allDevices.filter( const building_name = pageAct.buildList.find(
(x) => x.device_number == data.devicePath ({ building_tag }) =>
)[0]?.full_name; building_tag === data.devicePath.split("_")[1]
)?.full_name;
datas[idx].full_name =
allDevices.filter((x) => x.device_number == data.devicePath)[0]
?.full_name || (data.alarmClass === "Sys_Con_AlarmClass"
? `${building_name}_電錶邊緣控制器_${data.split("_")[7]}`
: "");
let div1 = creDiv(["col-12"]); let div1 = creDiv(["col-12"]);
let button = creBtn( let button = creBtn(