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

[前台] 系統監控 開關燈 | 告警 縮短異常編號 | 能源管理 文字修正 | 歷史資料 邊提文字位置修正

Browse Source
This commit is contained in:
Celeste 2023-02-18 21:00:48 +08:00
parent 9a27834be0
commit 55bff6fca3
8 changed files with 2100 additions and 3010 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
Frontend/_alert.html
View File

@ -228,7 +228,7 @@
$('input[type=checkbox][data-type=sub]').on('click', function () { $('input[type=checkbox][data-type=sub]').on('click', function () {
if (!pageAct.selAllSysSub) { if (!pageAct.selAllSysSub) {
console.log(this); // console.log(this);
pageAct.selAllSysSub = true; pageAct.selAllSysSub = true;
$.each($('input[type=checkbox][data-type=sub]:checked'), function (i, v) { $.each($('input[type=checkbox][data-type=sub]:checked'), function (i, v) {
@ -646,6 +646,7 @@
let tag = "#alertTable"; let tag = "#alertTable";
$.each(data, function (i, v) { $.each(data, function (i, v) {
// console.log(v.uuid.$val, v.uuid)
v.formId = AlertList(v.uuid.$val || v.uuid); v.formId = AlertList(v.uuid.$val || v.uuid);
}); });
@ -669,6 +670,9 @@
{ {
"title": "異常ID", "title": "異常ID",
"data": "uuid", "data": "uuid",
render: (data) => {
return data.split("-")[0]
}
}, },
{ {
"title": "異常類別", "title": "異常類別",
@ -788,7 +792,7 @@
function selOpeFir() { function selOpeFir() {
let url = baseApiUrl + "/operation/OpeFirSel"; let url = baseApiUrl + "/operation/OpeFirSel";
objSendData.Data = { sub_system_tag: $('input[data-type=sub]').map(function (i, v) { return $(v).prop('id'); }).toArray() }; objSendData.Data = { sub_system_tag: $('input[data-type=sub]').map(function (i, v) { return $(v).prop('id'); }).toArray() };
console.log(objSendData.Data) // console.log(objSendData.Data)
ytAjax = new YourTeam.Ajax(url, objSendData, function (res) { ytAjax = new YourTeam.Ajax(url, objSendData, function (res) {
if (!res || res.code != "0000" || !res.data) { if (!res || res.code != "0000" || !res.data) {

1703
Frontend/_energyManagement.html
View File

File diff suppressed because it is too large Load Diff

815
Frontend/_historyData.html
View File

@ -1,194 +1,193 @@
<main id="js-page-content" role="main" class="page-content"> <main id="js-page-content" role="main" class="page-content">
<div class="row"> <h1 class="p-2 mb-0">歷史資料</h1>
<div class="col-sm-12 col-xl-2">
<div class="rounded border border-white"> <div class="row">
<div class="d-flex position-relative py-3 px-4"> <div class="col-sm-12 col-xl-2">
<i class="fal fa-search color-success-700 position-absolute pos-left fs-lg px-3 py-2 mt-1 ml-4"></i> <div class="rounded border border-white">
<input type="text" id="js_nested_list_filter" class="form-control shadow-inset-1 pl-6 border-success" placeholder="輸入兩字以上"> <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 mb-5">
<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" id="his_startdate" data-val="" type="date" name="date" value="">
<input class="form-control" 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" 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>
<!-- 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>
<div class="col-sm-12 col-xl-10">
<h1 class="p-2 mb-0">歷史資料瀏覽</h1>
<div class="row bg-dark p-2 mb-5">
<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" id="his_startdate" data-val="" type="date" name="date" value="">
<input class="form-control" 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" 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> </main>
<script> <script>
var historyTable = null; var historyTable = null;
$(function () { $(function () {
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_enddate input').val() && ($('#his_startdate').val() != "" && $('#his_enddate input').val() != "")) {
console.log('aaaa'); $('#his_startdate').val($('#his_startdate').data('val'));
$('#his_startdate').val($('#his_startdate').data('val')); toast_error('不可選擇大於結束時間');
toast_error('不可選擇大於結束時間'); }
} else {
else { $('#his_startdate').data('val', $('#his_startdate').val());
$('#his_startdate').data('val', $('#his_startdate').val()); $('#his_enddate input').data('val', $('#his_enddate input').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('btn-secondary');
$(`[onclick="setDateType('today', this)"]`).addClass('btn-info'); $(`[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 ($('#his_startdate').val() == ytd) { else if ($(this).val() == today) {
$(`[onclick="setDateType('ytd', this)"]`).removeClass('btn-secondary'); $(`[onclick="setDateType('today', this)"]`).removeClass('btn-secondary');
$(`[onclick="setDateType('ytd', this)"]`).addClass('btn-info'); $(`[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');
else if ($(this).val() == today) { $(`[onclick="setDateType('ytd', this)"]`).removeClass('btn-secondary');
$(`[onclick="setDateType('today', this)"]`).removeClass('btn-secondary'); $(`[onclick="setDateType('ytd', this)"]`).addClass('btn-info');
$(`[onclick="setDateType('today', this)"]`).addClass('btn-info'); }
$(`[onclick="setDateType('ytd', this)"]`).addClass('btn-secondary'); });
$(`[onclick="setDateType('ytd', this)"]`).removeClass('btn-info');
} onEvent('change', '#his_enddate input', function () {
else if ($(this).val() == ytd) { let today = displayDate(new Date(Date.now()), 'date').replaceAll('/', '-');
$(`[onclick="setDateType('today', this)"]`).addClass('btn-secondary'); let ytd = displayDate(new Date(new Date().setDate(new Date(Date.now()).getDate() - 1)), 'date').replaceAll('/', '-');
$(`[onclick="setDateType('today', this)"]`).removeClass('btn-info');
$(`[onclick="setDateType('ytd', this)"]`).removeClass('btn-secondary'); if ($('#his_startdate').val() > $('#his_enddate input').val() && ($('#his_startdate').val() != "" && $('#his_enddate input').val() != "")) {
$(`[onclick="setDateType('ytd', this)"]`).addClass('btn-info'); $('#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');
}
}
}
});
}); });
onEvent('change', '#his_enddate input', function () { function initList() {
let today = displayDate(new Date(Date.now()), 'date').replaceAll('/', '-'); let sendData = {
let ytd = displayDate(new Date(new Date().setDate(new Date(Date.now()).getDate() - 1)), 'date').replaceAll('/', '-'); building_tag: pageAct.buiTag
if ($('#his_startdate').val() > $('#his_enddate input').val() && ($('#his_startdate').val() != "" && $('#his_enddate input').val() != "")) {
console.log('bbbb');
$('#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');
}
} }
} objSendData.Data = sendData;
}); let url = baseApiUrl + "/api/History/GetMainSub";
}); function success(res) {
let strHtml = ``;
let i1 = null, i2 = null, first = true;
function initList() { $.each(res.data.history_Main_Systems, function (index, val) {
let sendData = { if (pageAct.mainStatus) {
building_tag: pageAct.buiTag strHtml += `<li>
}
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}"> <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}
@ -196,8 +195,8 @@
</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) {
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}
@ -205,250 +204,250 @@
</a> </a>
</li>`; </li>`;
if (pageAct.mainStatus) { if (pageAct.mainStatus) {
if (index == i1 && index2 == i2 && first) { if (index == i1 && index2 == i2 && first) {
first = false; first = false;
pageAct.deviceNumber = val3.device_number; pageAct.deviceNumber = val3.device_number;
pageAct.deviceName = val3.full_name; pageAct.deviceName = val3.full_name;
devPointsList(); devPointsList();
} }
} }
else {
if (index2 == i2 && first) {
first = false;
pageAct.deviceNumber = val3.device_number;
pageAct.deviceName = val3.full_name;
devPointsList();
}
}
});
strHtml += `</ul> </li>`;
});
if (pageAct.mainStatus) {
strHtml += `</ul> </li>`;
}
});
$('#js_nested_list').html(strHtml);
$(`[data-tabname="hisListItem"]`).YTTab();
}
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;
pageAct.deviceComName = val.parent_path;
getData();
} 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);
}
ytAjax = new YourTeam.Ajax(url, objSendData, success, null, "POST").send();
}
function getData(start = null, end = null) {
var sdt = new Date();
var edt = new Date(new Date().setDate(sdt.getDate() + 1));
start = start ?? sdt.toLocaleDateString();
end = end ?? edt.toLocaleDateString();
$(loadEle).Loading("start");
callBackFromHistory()
getHistoryDataByBaja(pageAct.deviceNumber + "_" + pageAct.deviceItem,
new Date(start).getTime(),
new Date(end).getTime(),
pageAct.deviceName,
pageAct.deviceComName,
callBackFromHistory);
}
function callBackFromHistory(res = '{"count":0,"data":[]}') {
// console.log("@H1",res)
res = JSON.parse(res);
// console.log("@history",res.data)
loadTable(res.data);
if (historyTable != null) {
let t = $('#historyTable').dataTable();
t.fnClearTable();
if (res.data.length > 0)
t.fnAddData(res.data);
}
$(loadEle).Loading("close");
}
function setValue(deviceNumber, deviceName, deviceItem, elem) {
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;
getData();
}
}
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");
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(tmr, "date", true));
else if (type == "ytd")
getData(formatDate(ytd, "date", true), formatDate(now, "date", true));
else { else {
if (index2 == i2 && first) { $(`[onclick="setDateType('today', this)"]`).removeClass('btn-secondary');
first = false; $(`[onclick="setDateType('today', this)"]`).addClass('btn-info');
pageAct.deviceNumber = val3.device_number;
pageAct.deviceName = val3.full_name;
devPointsList();
}
} }
}); }
strHtml += `</ul> </li>`; 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));
}
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(new Date().setDate(new Date($('#his_enddate input').val()).getDate() + 1));
if (pageAct.dateType == "day")
end = new Date(new Date().setDate(start.getDate() + 1));
else if (pageAct.dateType == "month") {
start = new Date($('#getmonth').val());
end = new Date(new Date().setDate(start.getDate() + 30));
}
else if (pageAct.dateType != "range")
return;
getData(formatDate(start, "date", true), formatDate(end, "date", true));
}
function formatDate(date, type, send = false) {
if (!send)
return displayDate(date, type).replaceAll("/", "-");
else {
date = displayDate(date, type);
let month = date.split('/')[1];
let year = date.split('/')[0];
let day = date.split('/')[2];
return month + "/" + day + "/" + year;
}
}
function loadTable(data) {
if (data) {
$.each(data, function (i, v) {
// console.log("loadTable",pageAct.devicePoiName.split(" ")[0])
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)) {
return data
}
return data.roundDecimal(2);
}
},
{
"title": "紀錄時間",
"data": "timestamp",
"render": function (data) {
// console.log(data)
return displayDate(data, "datetime");
}
}
];
historyTable = new YourTeam.JqDataTables.getTableByStatic(tag, data, columns, column_defs, null, null, null, null, "tpi");
}
function exportExcel() {
let url = baseApiUrl + "/History/OpeExportExcel";
objSendData.Data = $('#historyTable').dataTable().fnGetData();
$.each(objSendData.Data, function (i, v) {
v.starttime = (pageAct.dateType == "month" ? new Date($('#getmonth').val()) : new Date($('#his_startdate').val()));
v.endtime = $('#his_enddate input').val() === "" ? null : new Date($('#his_enddate input').val());
v.dateType = pageAct.dateType;
}); });
if (pageAct.mainStatus) { ytAjax = new YourTeam.Ajax(url, objSendData, function (rel) {
strHtml += `</ul> </li>`; if (rel.code == "0000")
} location.href = baseApiUrl + "/api/df?path=" + rel.data.split('/')[0] + "&fileName=" + rel.data.split('/')[1] + "&token=" + cookies.get("JWT-Authorization");
}); }, null, "POST").send();
$('#js_nested_list').html(strHtml);
$(`[data-tabname="hisListItem"]`).YTTab();
} }
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;
pageAct.deviceComName = val.parent_path;
getData();
} 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);
}
ytAjax = new YourTeam.Ajax(url, objSendData, success, null, "POST").send();
}
function getData(start = null, end = null) {
var sdt = new Date();
var edt = new Date(new Date().setDate(sdt.getDate() + 1));
start = start ?? sdt.toLocaleDateString();
end = end ?? edt.toLocaleDateString();
$(loadEle).Loading("start");
callBackFromHistory()
getHistoryDataByBaja(pageAct.deviceNumber + "_" + pageAct.deviceItem,
new Date(start).getTime(),
new Date(end).getTime(),
pageAct.deviceName,
pageAct.deviceComName,
callBackFromHistory);
}
function callBackFromHistory(res = '{"count":0,"data":[]}') {
// console.log("@H1",res)
res = JSON.parse(res);
// console.log("@history",res.data)
loadTable(res.data);
if (historyTable != null) {
let t = $('#historyTable').dataTable();
t.fnClearTable();
if (res.data.length > 0)
t.fnAddData(res.data);
}
$(loadEle).Loading("close");
}
function setValue(deviceNumber, deviceName, deviceItem, elem) {
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;
getData();
}
}
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");
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(tmr, "date", true));
else if (type == "ytd")
getData(formatDate(ytd, "date", true), formatDate(now, "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));
}
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(new Date().setDate(new Date($('#his_enddate input').val()).getDate() + 1));
if (pageAct.dateType == "day")
end = new Date(new Date().setDate(start.getDate() + 1));
else if (pageAct.dateType == "month") {
start = new Date($('#getmonth').val());
end = new Date(new Date().setDate(start.getDate() + 30));
}
else if (pageAct.dateType != "range")
return;
getData(formatDate(start, "date", true), formatDate(end, "date", true));
}
function formatDate(date, type, send = false) {
if (!send)
return displayDate(date, type).replaceAll("/", "-");
else {
date = displayDate(date, type);
let month = date.split('/')[1];
let year = date.split('/')[0];
let day = date.split('/')[2];
return month + "/" + day + "/" + year;
}
}
function loadTable(data) {
if (data) {
$.each(data, function (i, v) {
// console.log("loadTable",pageAct.devicePoiName.split(" ")[0])
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)) {
return data
}
return data.roundDecimal(2);
}
},
{
"title": "紀錄時間",
"data": "timestamp",
"render": function (data) {
// console.log(data)
return displayDate(data, "datetime");
}
}
];
historyTable = new YourTeam.JqDataTables.getTableByStatic(tag, data, columns, column_defs, null, null, null, null, "tpi");
}
function exportExcel() {
let url = baseApiUrl + "/History/OpeExportExcel";
objSendData.Data = $('#historyTable').dataTable().fnGetData();
$.each(objSendData.Data, function (i, v) {
v.starttime = (pageAct.dateType == "month" ? new Date($('#getmonth').val()) : new Date($('#his_startdate').val()));
v.endtime = $('#his_enddate input').val() === "" ? null : new Date($('#his_enddate input').val());
v.dateType = pageAct.dateType;
});
ytAjax = new YourTeam.Ajax(url, objSendData, function (rel) {
if (rel.code == "0000")
location.href = baseApiUrl + "/api/df?path=" + rel.data.split('/')[0] + "&fileName=" + rel.data.split('/')[1] + "&token=" + cookies.get("JWT-Authorization");
}, null, "POST").send();
}
</script> </script>

2
Frontend/_operation.html
View File

@ -504,7 +504,7 @@
setDate(null, startdate, enddate); setDate(null, startdate, enddate);
}); });
$(`[onclick="setType(null)"]`).click(); $(`[onclick="setType(2)"]`).click();
initDate(); initDate();
event(); event();

17
Frontend/_sysMonAll.html
View File

@ -102,7 +102,7 @@
} }
myBaja.setSubscribeDevicesByBql(ordPath); myBaja.setSubscribeDevicesByBql(ordPath);
myBaja.setSubscribeDevicesCallBack(function (data) { myBaja.setSubscribeDevicesCallBack(function (data) {
//console.log(data)
let matchDevice = allDevList.filter(x => x.device_number == data.device_number_full)[0]; let matchDevice = allDevList.filter(x => x.device_number == data.device_number_full)[0];
if (!matchDevice) { if (!matchDevice) {
return false; return false;
@ -126,6 +126,16 @@
let cloDevPoiName = matchDevice.device_close_point_name; let cloDevPoiName = matchDevice.device_close_point_name;
let errDevPoiName = matchDevice.device_error_point_name; let errDevPoiName = matchDevice.device_error_point_name;
if (data.point_name == "SSC") {
const lightOn = data.value.includes("true")
setLightOpenOrClose(lightOn, matchDevice.device_guid);
if (lightOn) {
setLightValues(matchDevice.device_guid, 200, 0xe1cf18);
} else {
setLightValues(matchDevice.device_guid, 0, 0xe1cf18);
}
}
if (data.point_name == "Temp") { if (data.point_name == "Temp") {
heatMap?.changeTemp(data.device_number_full, !isNaN(parseInt(data.value)) ? parseInt(data.value) : 0); heatMap?.changeTemp(data.device_number_full, !isNaN(parseInt(data.value)) ? parseInt(data.value) : 0);
let devIdx = allDevList.findIndex(x => x.device_number == data.device_number_full); let devIdx = allDevList.findIndex(x => x.device_number == data.device_number_full);
@ -406,7 +416,9 @@
"area_tag": pageAct.AreaTag, "area_tag": pageAct.AreaTag,
"building_tag": pageAct.buiTag, "building_tag": pageAct.buiTag,
}, },
selector: "[name=forgeViewer]",
curDevice: { curDevice: {
...device,
roomDbId: !isNaN(parseInt(device.room_dbid)) ? parseInt(device.room_dbid) : -1, roomDbId: !isNaN(parseInt(device.room_dbid)) ? parseInt(device.room_dbid) : -1,
id: device.device_number, id: device.device_number,
position: isJSON(device.device_coordinate_3d) ? JSON.parse(device.device_coordinate_3d) : {}, // x: 0, y: 25, z: -2.5 (3.35, -4.81, 12.88 position: isJSON(device.device_coordinate_3d) ? JSON.parse(device.device_coordinate_3d) : {}, // x: 0, y: 25, z: -2.5 (3.35, -4.81, 12.88
@ -576,7 +588,7 @@
var parentEle = ""; var parentEle = "";
onEvent("autodesk:click:sprite", "[name=forgeViewer]", function (e, obj) { onEvent("autodesk:click:sprite", "[name=forgeViewer]", function (e, obj) {
forgeUnFocusAll(); forgeUnFocusAll();
let position = [obj.event.target.toolController.lastClickX, obj.event.target.toolController.lastClickY]; let position = [obj.event.target.toolController.lastClickX - 100, obj.event.target.toolController.lastClickY - 100];
let devObj = obj.myData; let devObj = obj.myData;
let name = allDevList.filter(x => x.device_guid == devObj.device_guid)[0]?.full_name; let name = allDevList.filter(x => x.device_guid == devObj.device_guid)[0]?.full_name;
devObj.full_name = name; devObj.full_name = name;
@ -589,7 +601,6 @@
}) })
onEvent("autodesk:complete:sprite", "[name=forgeViewer]", function (e, obj) { onEvent("autodesk:complete:sprite", "[name=forgeViewer]", function (e, obj) {
$("#floDevList a[name=devItem]").each((idx, ele) => { $("#floDevList a[name=devItem]").each((idx, ele) => {
let devNum = $(ele).data("number"); let devNum = $(ele).data("number");
let dbid = obj.myDataList.filter(x => x.device_number == devNum)[0]?._dbId; let dbid = obj.myDataList.filter(x => x.device_number == devNum)[0]?._dbId;

11
Frontend/_sysMonFloor.html
View File

@ -459,6 +459,17 @@
currentData[devIdx]._temp = !isNaN(parseInt(data.value)) ? parseInt(data.value) : 0; currentData[devIdx]._temp = !isNaN(parseInt(data.value)) ? parseInt(data.value) : 0;
} }
if (data.point_name == "SSC") {
const lightOn = data.value.includes("true")
setLightOpenOrClose(lightOn, matchDevice.device_guid);
if (lightOn) {
setLightValues(matchDevice.device_guid, 200, 0xe1cf18);
} else {
setLightValues(matchDevice.device_guid, 0, 0xffffff);
}
}
if (data.point_name == norDevPoiName && data.value == matchDevice.device_normal_point_value) { if (data.point_name == norDevPoiName && data.value == matchDevice.device_normal_point_value) {
//顯示正常燈號 //顯示正常燈號
$(`#${matchDevice.device_number}_status`).attr("data-light-type", "normal").data("light-type", "normal"); $(`#${matchDevice.device_number}_status`).attr("data-light-type", "normal").data("light-type", "normal");

2497
Frontend/index.html
View File

File diff suppressed because it is too large Load Diff

57
Frontend/js/forge/forgemodel.js
View File

@ -748,7 +748,7 @@ async function testNewLight(dataList) {
dataList.forEach((myData, index) => { dataList.forEach((myData, index) => {
const position = JSON.parse(myData.device_coordinate_3d); const position = JSON.parse(myData.device_coordinate_3d);
if (lightList.findIndex(x => x.device_guid == myData.device_guid) == -1) { if (lightList.findIndex(x => x.device_guid == myData.device_guid) == -1) {
lightList.push({ dbid: myData.forge_dbid, device_guid: myData.device_guid, lightObject: new THREE.SpotLight(0xff0000, 200, 20, 0.6, 0.5, 10) }); lightList.push({ dbid: myData.forge_dbid, device_guid: myData.device_guid, lightObject: new THREE.SpotLight(0xe1cf18, 200, 20, 0.6, 0.5, 10) });
} }
lightList[index].lightObject.position.set(position.x, position.y, position.z); lightList[index].lightObject.position.set(position.x, position.y, position.z);
@ -795,7 +795,7 @@ async function addHotPoint(data) {
//熱點 點擊事件註冊 //熱點 點擊事件註冊
viewer.addEventListener(DataVizCore.MOUSE_CLICK, onSpriteClicked);// SPRITE_SELECTED viewer.addEventListener(DataVizCore.MOUSE_CLICK, onSpriteClicked);// SPRITE_SELECTED
// viewer.addEventListener(DataVizCore.MOUSE_CLICK, onSpriteClickedOut);
//viewer.addEventListener( //viewer.addEventListener(
// Autodesk.Viewing.SELECTION_CHANGED_EVENT, // Autodesk.Viewing.SELECTION_CHANGED_EVENT,
// onSelectionChange // onSelectionChange
@ -820,25 +820,13 @@ async function addHotPoint(data) {
//---------------- 熱點點擊事件 -------------------- //---------------- 熱點點擊事件 --------------------
function onSpriteClicked(event) { function onSpriteClicked(event) {
event.hasStopped = true; event.hasStopped = true;
if (pageAct.sysSubTag === "M12" && event != undefined && event != null) {
if (event.dbId >= dbIdStart) {
changeColorForHotspot(event.dbId);
changeScaleForHotspot(event.dbId, false);
let myData = [this.curDevice].filter(x => x.forge_dbid == event.dbId)[0];
moveViewToDevice(myData.forge_dbid);//移動視角至該設備
$(selector).trigger("autodesk:click:sprite", { event, myData });
} else {
$(selector).trigger("autodesk:clickOut:sprite", { event });
}
}
if (event != undefined && event != null) { if (event != undefined && event != null) {
if (event.dbId >= dbIdStart) {//event.dbId > 0 && event.dbId < 19 if (event.dbId >= dbIdStart) {//event.dbId > 0 && event.dbId < 19
// console.log(`Sprite clicked: ${event.dbId}`); // console.log(`Sprite clicked: ${event.dbId}`);
for (let i = dbIdStart; i <= myDataList.length + 10; i++) { for (let i = dbIdStart; i <= myDataList.length + 10; i++) {
changeColorForHotspot(i); changeColorForHotspot(i);
changeScaleForHotspot(i, false); changeScaleForHotspot(i, true);
} }
let myData = myDataList.filter(x => x._dbId == event.dbId)[0]; let myData = myDataList.filter(x => x._dbId == event.dbId)[0];
if (lightList != undefined && lightList != null && lightList.length > 0) { if (lightList != undefined && lightList != null && lightList.length > 0) {
@ -848,6 +836,8 @@ async function addHotPoint(data) {
} }
$(selector).trigger("autodesk:click:sprite", { event, myData }); $(selector).trigger("autodesk:click:sprite", { event, myData });
} else { } else {
changeColorForHotspot(event.dbId, null);
changeScaleForHotspot(event.dbId, false);
$(selector).trigger("autodesk:clickOut:sprite", { event }); $(selector).trigger("autodesk:clickOut:sprite", { event });
} }
@ -860,6 +850,21 @@ async function addHotPoint(data) {
} }
} }
// function onSpriteClickedOut(event){
// event.hasStopped = true;
// if (event != undefined && event != null) {
// if (event.dbId >= dbIdStart) {
// for (let i = dbIdStart; i <= myDataList.length + 10; i++) {
// changeColorForHotspot(event.dbId);
// changeScaleForHotspot(event.dbId, false);
// }
// let myData = myDataList.filter(x => x._dbId == event.dbId)[0];
// debugger
// $(selector).trigger("autodesk:clickOut:sprite", { event });
// }
// }
// }
//function onSelectionChange(event) { //function onSelectionChange(event) {
// if (event != undefined && event != null) { // if (event != undefined && event != null) {
// const dbIds = event.dbIdArray; // const dbIds = event.dbIdArray;
@ -881,7 +886,7 @@ async function addHotPoint(data) {
// 熱點 更換顏色 // 熱點 更換顏色
async function changeColorForHotspot(dbId, type = null) { async function changeColorForHotspot(dbId, type = null) {
const dataVizExtn = await viewer.loadExtension("Autodesk.DataVisualization"); const dataVizExtn = await viewer.loadExtension("Autodesk.DataVisualization");
// console.log(dbId, dataVizExtn.viewableData.getViewableColor(dbId, false)) console.log(dbId, dataVizExtn.viewableData.getViewableColor(dbId, false))
let spriteColorFocus = dataVizExtn.viewableData?.getViewableColor(dbId, false) || new THREE.Color(0xffffff); let spriteColorFocus = dataVizExtn.viewableData?.getViewableColor(dbId, false) || new THREE.Color(0xffffff);
if (type == "focus" && pageAct.sysSubTag !== "M12") { if (type == "focus" && pageAct.sysSubTag !== "M12") {
spriteColorFocus = new THREE.Color(0x00ffe1); spriteColorFocus = new THREE.Color(0x00ffe1);
@ -897,26 +902,6 @@ async function changeColorForHotspot(dbId, type = null) {
} }
// 熱點 更換顏色---環境感知器
async function changeColorForSensorHotspot(dbId, temp) {
const dataVizExtn = await viewer.loadExtension("Autodesk.DataVisualization");
const temps = [new THREE.Color(0x0000ff), new THREE.Color(0x00ff00), new THREE.Color(0xffff00), new THREE.Color(0xff0000)]
let index = Math.floor(temp / 10);
if (index > 3) {
index = 3
}
const viewablesToUpdate = dbId;
const color = temps[index]
dataVizExtn.invalidateViewables(viewablesToUpdate, (viewable) => {
return {
color: color,
};
});
console.log(dataVizExtn)
}
// 熱點 更換大小 // 熱點 更換大小
async function changeScaleForHotspot(dbId, type = true) { async function changeScaleForHotspot(dbId, type = true) {
const dataVizExtn = await viewer.loadExtension("Autodesk.DataVisualization"); const dataVizExtn = await viewer.loadExtension("Autodesk.DataVisualization");