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]}`
: ""; : "");
}, },
}, },
{ {

500
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,54 +30,89 @@
<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>
</div> </div>
</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(
if (res && res.code == "0000") { url,
pageAct.hisBuiName = res.data; objSendData,
getHistoryDataByBaja(pageAct.deviceNumber + "_" + pageAct.deviceItem, function (res) {
new Date(start).getTime(), if (res && res.code == "0000") {
new Date(end).getTime(), pageAct.hisBuiName = res.data;
pageAct.deviceName, getHistoryDataByBaja(
pageAct.hisBuiName, pageAct.deviceNumber + "_" + pageAct.deviceItem,
callBackFromHistory); new Date(start).getTime(),
} new Date(end).getTime(),
else { pageAct.deviceName,
pageAct.hisBuiName,
callBackFromHistory
);
} else {
$(loadEle).Loading("close");
}
},
function (res) {
$(loadEle).Loading("close"); $(loadEle).Loading("close");
} },
}, function (res) { $(loadEle).Loading("close"); }, "POST", true).send(); "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,10 +655,10 @@
$("[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;
} }
return result; return result;
} }
</script> </script>

237
Frontend/index.html
View File

@ -190,7 +190,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
<!--<span class="page-logo-text mr-1">SmartAdmin WebApp</span>--> <!--<span class="page-logo-text mr-1">SmartAdmin WebApp</span>-->
<!--<span class="position-absolute text-white opacity-50 small pos-top pos-right mr-2 mt-n2"></span> <!--<span class="position-absolute text-white opacity-50 small pos-top pos-right mr-2 mt-n2"></span>
<i class="fal fa-angle-down d-inline-block ml-1 fs-lg color-primary-300"></i>--> <i class="fal fa-angle-down d-inline-block ml-1 fs-lg color-primary-300"></i>-->
</a> </a>
</div> </div>
<!--DOC: nav menu layout change shortcut--> <!--DOC: nav menu layout change shortcut-->
@ -234,21 +234,21 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
</div> </div>
<!-- <div class="dropdown"> <!-- <div class="dropdown">
<a <a
class="dropdown-toggle fs-1" class="dropdown-toggle fs-1"
href="javascript:;" href="javascript:;"
role="button" role="button"
id="buiActDrop" id="buiActDrop"
data-target="buiList" data-target="buiList"
data-toggle="dropdown" data-toggle="dropdown"
aria-haspopup="true" aria-haspopup="true"
> >
</a> </a>
<div <div
id="buiList" id="buiList"
class="dropdown-menu dropdown-select-menu js-auto-close" class="dropdown-menu dropdown-select-menu js-auto-close"
></div> ></div>
</div> --> </div> -->
<div class="ml-auto d-flex" id="froLisPage"></div> <div class="ml-auto d-flex" id="froLisPage"></div>
<div class="ml-auto d-flex mr-3"> <div class="ml-auto d-flex mr-3">
@ -257,7 +257,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
id="toggleNoticeBtn" id="toggleNoticeBtn"
class="d-flex align-items-center justify-content-center ml-2"> class="d-flex align-items-center justify-content-center ml-2">
<!--<img src="img/demo/avatars/avatar-admin.png" class="profile-image rounded-circle" <!--<img src="img/demo/avatars/avatar-admin.png" class="profile-image rounded-circle"
alt="Dr. Codex Lantern">--> alt="Dr. Codex Lantern">-->
<!--you can also add username next to the avatar with the codes below:--> <!--you can also add username next to the avatar with the codes below:-->
<div class="row m-0 justify-content-center userblock"> <div class="row m-0 justify-content-center userblock">
<i id="noticeConIcon" class="fs-1-5 w-100 text-center"></i> <i id="noticeConIcon" class="fs-1-5 w-100 text-center"></i>
@ -275,7 +275,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
data-target="logoutList" data-target="logoutList"
class="d-flex align-items-center justify-content-center ml-2"> class="d-flex align-items-center justify-content-center ml-2">
<!--<img src="img/demo/avatars/avatar-admin.png" class="profile-image rounded-circle" <!--<img src="img/demo/avatars/avatar-admin.png" class="profile-image rounded-circle"
alt="Dr. Codex Lantern">--> alt="Dr. Codex Lantern">-->
<!--you can also add username next to the avatar with the codes below:--> <!--you can also add username next to the avatar with the codes below:-->
<div class="row m-0 justify-content-center userblock"> <div class="row m-0 justify-content-center userblock">
<i class="fas fa-user-circle fs-1-5 w-100 text-center"></i> <i class="fas fa-user-circle fs-1-5 w-100 text-center"></i>
@ -295,10 +295,10 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
</div> </div>
<div class="ml-2 text-center"> <div class="ml-2 text-center">
<!-- <label class="mb-0 fs-1-2"> <!-- <label class="mb-0 fs-1-2">
Diamond Controls<span class="fs-09 position-absolute" Diamond Controls<span class="fs-09 position-absolute"
>®</span >®</span
> </label > </label
><br /> --> ><br /> -->
<!-- <label class="mb-0 fs-1-1">智慧大樓管理平台</label> --> <!-- <label class="mb-0 fs-1-1">智慧大樓管理平台</label> -->
</div> </div>
</header> </header>
@ -314,25 +314,25 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
data-class="mobile-nav-on"></div> data-class="mobile-nav-on"></div>
<!-- <div id="sysMonNavbar" class="yt-navbar yt-left-navbar"> <!-- <div id="sysMonNavbar" class="yt-navbar yt-left-navbar">
<div class="yt-navbar-content"> <div class="yt-navbar-content">
<ul id="sysMonBtnList"></ul> <ul id="sysMonBtnList"></ul>
</div> </div>
</div> --> </div> -->
<!-- END Page Content --> <!-- END Page Content -->
<!-- BEGIN Page Footer --> <!-- BEGIN Page Footer -->
<!--<footer class="page-footer" role="contentinfo"> <!--<footer class="page-footer" role="contentinfo">
<div class="d-flex align-items-center flex-1 text-muted"> <div class="d-flex align-items-center flex-1 text-muted">
<span class="hidden-md-down fw-700">2022 © SmartAdmin by&nbsp;<a href='https://www.gotbootstrap.com' class='text-primary fw-500' title='gotbootstrap.com' target='_blank'>gotbootstrap.com</a></span> <span class="hidden-md-down fw-700">2022 © SmartAdmin by&nbsp;<a href='https://www.gotbootstrap.com' class='text-primary fw-500' title='gotbootstrap.com' target='_blank'>gotbootstrap.com</a></span>
</div> </div>
<div> <div>
<ul class="list-table m-0"> <ul class="list-table m-0">
<li><a href="intel_introduction.html" class="text-secondary fw-700">About</a></li> <li><a href="intel_introduction.html" class="text-secondary fw-700">About</a></li>
<li class="pl-3"><a href="info_app_licensing.html" class="text-secondary fw-700">License</a></li> <li class="pl-3"><a href="info_app_licensing.html" class="text-secondary fw-700">License</a></li>
<li class="pl-3"><a href="info_app_docs.html" class="text-secondary fw-700">Documentation</a></li> <li class="pl-3"><a href="info_app_docs.html" class="text-secondary fw-700">Documentation</a></li>
<li class="pl-3 fs-xl"><a href="https://wrapbootstrap.com/user/MyOrange" class="text-secondary" target="_blank"><i class="fal fa-question-circle" aria-hidden="true"></i></a></li> <li class="pl-3 fs-xl"><a href="https://wrapbootstrap.com/user/MyOrange" class="text-secondary" target="_blank"><i class="fal fa-question-circle" aria-hidden="true"></i></a></li>
</ul> </ul>
</div> </div>
</footer>--> </footer>-->
<!-- END Page Footer --> <!-- END Page Footer -->
<!-- BEGIN Shortcuts --> <!-- BEGIN Shortcuts -->
<!-- END Shortcuts --> <!-- END Shortcuts -->
@ -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 {
@ -1418,7 +1420,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
function drawErrRecTabBlo() { function drawErrRecTabBlo() {
let strHtml = `<table id="errRecTable" class="table table-bordered table-striped text-center m-0 w-100"> let strHtml = `<table id="errRecTable" class="table table-bordered table-striped text-center m-0 w-100">
</table>`; </table>`;
return strHtml; return strHtml;
} }
@ -1426,7 +1428,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
function drawOpeRecTabBlo() { function drawOpeRecTabBlo() {
let strHtml = `<table id="opeRecTable" class="table table-bordered table-striped text-center m-0 w-100"> let strHtml = `<table id="opeRecTable" class="table table-bordered table-striped text-center m-0 w-100">
</table>`; </table>`;
return strHtml; return strHtml;
} }
@ -1453,45 +1455,45 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
html: `<div class="card m-1 border device-wrap" data-number="${deviceNumber( html: `<div class="card m-1 border device-wrap" data-number="${deviceNumber(
devNum devNum
)}" data-position="left"> )}" data-position="left">
<div class="card-header p-3"> <div class="card-header p-3">
<div class="position-absolute mr-5" style="word-break: break-all;"> <div class="position-absolute mr-5" style="word-break: break-all;">
<label class="m-0 mt-2">${devName}</label> <label class="m-0 mt-2">${devName}</label>
</div> </div>
<div id="card-tab" class="row justify-content-end nav nav-tabs" role="tablist"> <div id="card-tab" class="row justify-content-end nav nav-tabs" role="tablist">
<button type="button" id="state-tab" <button type="button" id="state-tab"
data-toggle="tooltip" data-placement="bottom" title="即時監控" data-toggle="tooltip" data-placement="bottom" title="即時監控"
class="px-2 btn btn-icon border-0 nav-link active mx-1" role="tab" data-tabname="cardTab" data-target="#state"><i class="fa fa-desktop icon fa-2x"></i></button> class="px-2 btn btn-icon border-0 nav-link active mx-1" role="tab" data-tabname="cardTab" data-target="#state"><i class="fa fa-desktop icon fa-2x"></i></button>
${lightHtml} ${lightHtml}
<button type="button" id="info-tab" <button type="button" id="info-tab"
data-toggle="tooltip" data-placement="bottom" title="基本資料" data-toggle="tooltip" data-placement="bottom" title="基本資料"
class="px-2 btn btn-icon border-0 nav-link mx-1" role="tab" data-tabname="cardTab" data-target="#info"><i class="fa fa-cog icon fa-2x"></i></button> class="px-2 btn btn-icon border-0 nav-link mx-1" role="tab" data-tabname="cardTab" data-target="#info"><i class="fa fa-cog icon fa-2x"></i></button>
<button type="button" <button type="button"
d data-toggle="tooltip" data-placement="bottom" title="告警資料" d data-toggle="tooltip" data-placement="bottom" title="告警資料"
id="errRec-tab" class=" px-2 btn btn-icon border-0 nav-link mx-1 position-relative " role="tab" data-tabname="cardTab" data-target="#errRec"><i class="fas fa-exclamation-triangle fa-2x"></i></button> id="errRec-tab" class=" px-2 btn btn-icon border-0 nav-link mx-1 position-relative " role="tab" data-tabname="cardTab" data-target="#errRec"><i class="fas fa-exclamation-triangle fa-2x"></i></button>
<button type="button" <button type="button"
data-toggle="tooltip" data-placement="bottom" title="運維紀錄" data-toggle="tooltip" data-placement="bottom" title="運維紀錄"
id="opeRec-tab" class=" px-2 btn btn-icon border-0 nav-link mx-1" role="tab" data-tabname="cardTab" data-target="#opeRec"><i class="fa fa-bars icon fa-2x"></i></button> id="opeRec-tab" class=" px-2 btn btn-icon border-0 nav-link mx-1" role="tab" data-tabname="cardTab" data-target="#opeRec"><i class="fa fa-bars icon fa-2x"></i></button>
<button type="button" class="px-2 btn btn-icon border-0 nav-link mx-1"><i class="fas fa-times text-white-50 fa-2x" data-close="yttooltip"></i></button> <button type="button" class="px-2 btn btn-icon border-0 nav-link mx-1"><i class="fas fa-times text-white-50 fa-2x" data-close="yttooltip"></i></button>
</div>
</div> </div>
</div> <div class="card-body p-2 tab-content w-100">
<div class="card-body p-2 tab-content w-100"> <div id="state" class="show active w-100" data-tabname="cardTab" data-tabrole="child" >
<div id="state" class="show active w-100" data-tabname="cardTab" data-tabrole="child" > ${drawStateTabBlo(devNum)}
${drawStateTabBlo(devNum)} </div>
</div> <div id="info" data-tabname="cardTab" data-tabrole="child">
<div id="info" data-tabname="cardTab" data-tabrole="child">
</div>
<div id="errRec" data-tabname="cardTab" data-tabrole="child">
${drawErrRecTabBlo()}
</div>
<div id="opeRec" data-tabname="cardTab" data-tabrole="child">
${drawOpeRecTabBlo()}
</div>
</div> </div>
<div id="errRec" data-tabname="cardTab" data-tabrole="child"> </div>`,
${drawErrRecTabBlo()}
</div>
<div id="opeRec" data-tabname="cardTab" data-tabrole="child">
${drawOpeRecTabBlo()}
</div>
</div>
</div>`,
group: "device", group: "device",
// 在 _sysElevator.html 及 _sysMonAll.html 會用到 // 在 _sysElevator.html 及 _sysMonAll.html 會用到
onShow: function (tooltipEle, oriEle) { onShow: function (tooltipEle, oriEle) {
@ -1850,27 +1852,27 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
sysSubObj.device_normal_point_value != null sysSubObj.device_normal_point_value != null
) { ) {
strHtml += ` <div class="row m-0 align-items-center"> strHtml += ` <div class="row m-0 align-items-center">
<span id="sysNorLight" class="circle-light mr-2 " data-light-type="normal"></span> <span id="sysNorLight" class="circle-light mr-2 " data-light-type="normal"></span>
<label class="mb-0">${sysSubObj.device_normal_text}</label> <label class="mb-0">${sysSubObj.device_normal_text}</label>
</div>`; </div>`;
} }
if ( if (
sysSubObj.device_close_point_name != null && sysSubObj.device_close_point_name != null &&
sysSubObj.device_close_point_value != null sysSubObj.device_close_point_value != null
) { ) {
strHtml += ` <div class="row m-0 align-items-center"> strHtml += ` <div class="row m-0 align-items-center">
<span id="sysCloLight" class="circle-light mr-2" data-light-type="close"></span> <span id="sysCloLight" class="circle-light mr-2" data-light-type="close"></span>
<label class="mb-0">${sysSubObj.device_close_text}</label> <label class="mb-0">${sysSubObj.device_close_text}</label>
</div>`; </div>`;
} }
if ( if (
sysSubObj.device_error_point_name != null && sysSubObj.device_error_point_name != null &&
sysSubObj.device_error_point_value != null sysSubObj.device_error_point_value != null
) { ) {
strHtml += ` <div class="row m-0 align-items-center"> strHtml += ` <div class="row m-0 align-items-center">
<span id="sysErrLight" class="circle-light mr-2" data-light-type="error"></span> <span id="sysErrLight" class="circle-light mr-2" data-light-type="error"></span>
<label class="mb-0">${sysSubObj.device_error_text}</label> <label class="mb-0">${sysSubObj.device_error_text}</label>
</div>`; </div>`;
} }
return strHtml; return strHtml;
@ -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;
@ -2035,28 +2037,28 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
if (!res || res.code != "0000" || !res.data) { if (!res || res.code != "0000" || !res.data) {
} else { } else {
let strHtml = `<div class="btn-group mx-4"> let strHtml = `<div class="btn-group mx-4">
<a href="javascript:;" id="homeBtn" data-toggle="dropdown" data-page="dashboard" data-tabname="topFunBtn" class="text-center"> <a href="javascript:;" id="homeBtn" data-toggle="dropdown" data-page="dashboard" data-tabname="topFunBtn" class="text-center">
<i class="fal fa-home fa-2x"></i><br>首頁 <i class="fal fa-home fa-2x"></i><br>首頁
</a> </a>
<div class="dropdown-menu"> <div class="dropdown-menu">
<button class="dropdown-item d-none" name="topFunBtn" data-tabname="topFunBtn" data-page="dashboard" type="button" >儀錶板</button> <button class="dropdown-item d-none" name="topFunBtn" data-tabname="topFunBtn" data-page="dashboard" type="button" >儀錶板</button>
<button class="dropdown-item" name="topFunBtn" data-tabname="topFunBtn" data-page="schoolView" type="button">校園總覽</button> <button class="dropdown-item" name="topFunBtn" data-tabname="topFunBtn" data-page="schoolView" type="button">校園總覽</button>
<button class="dropdown-item" name="topFunBtn" data-tabname="topFunBtn" data-page="elecSingleLine" type="button">電表單線圖</button> <button class="dropdown-item" name="topFunBtn" data-tabname="topFunBtn" data-page="elecSingleLine" type="button">電表單線圖</button>
</div> </div>
</div>`; </div>`;
$.each(res.data, function (i, v) { $.each(res.data, function (i, v) {
if (v.authCode == "PF1") { if (v.authCode == "PF1") {
strHtml += `<div class="btn-group mx-4" > strHtml += `<div class="btn-group mx-4" >
<a href="javascript:;" id="sysMonTopBtn" class="text-center dropdown-toggle" data-toggle="dropdown" data-tabname="topFunBtn" class="text-center"> <a href="javascript:;" id="sysMonTopBtn" class="text-center dropdown-toggle" data-toggle="dropdown" data-tabname="topFunBtn" class="text-center">
<i class="fal fa-tv fa-2x"></i><br>${v.subName} <i class="fal fa-tv fa-2x"></i><br>${v.subName}
</a> </a>
<div style="transform: translateY(5%)"> <div style="transform: translateY(5%)">
<div class="dropdown-menu dropdown-menu-right sys_building_dropdown_menu" > <div class="dropdown-menu dropdown-menu-right sys_building_dropdown_menu" >
</div>
</div> </div>
</div> </div>
</div> `;
`;
hasMonitor = true; hasMonitor = true;
} else { } else {
@ -2077,11 +2079,11 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
? "fa-user" ? "fa-user"
: ""; : "";
strHtml += `<div class="btn-group mx-4"> strHtml += `<div class="btn-group mx-4">
<a href="javascript:;" name="topFunBtn" data-tabname="topFunBtn" class="dropdown-toggle no-arrow text-center" <a href="javascript:;" name="topFunBtn" data-tabname="topFunBtn" class="dropdown-toggle no-arrow text-center"
data-page="${v.showView}"> data-page="${v.showView}">
<i class="fal ${icon} fa-2x"></i><br>${v.subName} <i class="fal ${icon} fa-2x"></i><br>${v.subName}
</a> </a>
</div>`; </div>`;
} }
}); });
@ -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(