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

[Frontend][系統監控] 訂閱 ST 點位改為恢復持續閃爍問題解決 | Notice 警告視窗封裝程序建置 | NoticeBlock 警告區塊封裝程序建置 | [系統監控] 平面圖增加溫度條

Browse Source
This commit is contained in:
dev01 2023-01-11 18:37:58 +08:00
parent d63e517b3c
commit e24712fe42
7 changed files with 288 additions and 140 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
Frontend/_sysElevator.html
View File

@ -968,7 +968,9 @@
$(`#${matchDevice.device_number}_card [name=devStatus]`).text(data.value); $(`#${matchDevice.device_number}_card [name=devStatus]`).text(data.value);
//若為異常(match資料庫點位值)且後台有設定為閃爍 //若為異常(match資料庫點位值)且後台有設定為閃爍
if (getValueByName("ST") == matchDevice.device_error_point_value) { if (getValueByName("ST") == matchDevice.device_error_point_value) {
$(`#${matchDevice.device_number}_card`).addClass("light-flash") $(`#${matchDevice.device_number}_card`).addClass("light-flash");
} else {
$(`#${matchDevice.device_number}_card`).removeClass("light-flash");
} }
} }
//現在樓層 //現在樓層

9
Frontend/_sysMonAll.html
View File

@ -189,6 +189,8 @@
//是否閃爍 //是否閃爍
if (isFlashing) { if (isFlashing) {
$(ele).parents(".card.device-wrap").addClass("light-flash"); $(ele).parents(".card.device-wrap").addClass("light-flash");
} else {
$(ele).parents(".card.device-wrap").removeClass("light-flash");
} }
}) })
} }
@ -219,12 +221,6 @@
return strHtml; return strHtml;
} }
// 設置 Forge 3D 溫度條
function setTopHeatBar() {
let strHtml = `<canvas name="forgeHeatBar" width="200" height="30" style="z-index:9999"></canvas>`;
return strHtml;
}
// forge 3D 異常點位變紅色 // forge 3D 異常點位變紅色
function setForgeHotSpotColor(device) { function setForgeHotSpotColor(device) {
let subData = subDeviceData.filter(x => x.device_number == device.device_number)[0] let subData = subDeviceData.filter(x => x.device_number == device.device_number)[0]
@ -474,7 +470,6 @@
setHotspotPoint(myDataList); setHotspotPoint(myDataList);
if (pageAct.sysMainTag == "LT") { if (pageAct.sysMainTag == "LT") {
setLightPoint(myDataList); setLightPoint(myDataList);
console.log("myDataList", myDataList)
} }
callback ? callback() : ""; callback ? callback() : "";
} }

12
Frontend/_sysMonFloor.html
View File

@ -18,6 +18,9 @@
<div id="floChart" style="height : 80vh!important;width:100%"></div> <div id="floChart" style="height : 80vh!important;width:100%"></div>
</div> </div>
<div class="col-6 my-3"> <div class="col-6 my-3">
<div id="forgeHeatBarDiv" class="d-flex mb-4" style="gap:15px">
</div>
<div id="forgeViewer"></div> <div id="forgeViewer"></div>
</div> </div>
</div> </div>
@ -32,6 +35,7 @@
var global_emergency_alarm_device_number = []; var global_emergency_alarm_device_number = [];
var zoomToggle = 3; var zoomToggle = 3;
$(function () { $(function () {
drawHeatBar();
getHotspotPoint(() => { getHotspotPoint(() => {
show3DModel(pageAct.urn); show3DModel(pageAct.urn);
}); });
@ -465,10 +469,17 @@
floMyBaja.setSubscribeDeviceEndCallBack(function (data) { floMyBaja.setSubscribeDeviceEndCallBack(function (data) {
endPageLoading(); endPageLoading();
if (data.findIndex(x => x.point_name == "Temp") != -1) {
// 顯示溫度條
showHeat("[name=forgeHeatBar]");
}
}); });
} }
function drawHeatBar() {
$("#forgeHeatBarDiv").html(setTopHeatBar());
}
// 電梯 3D 位置呈現 // 電梯 3D 位置呈現
function set3DElevPos(viewer) { function set3DElevPos(viewer) {
@ -1070,7 +1081,6 @@
} }
forge3DElev.init(); forge3DElev.init();
}); });
} }

210
Frontend/index.html
View File

@ -667,6 +667,10 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
</div> </div>
</div> </div>
<div id="noticeBlock" style="position: fixed; top: 70px; right: 0px; padding: 20px; transition: 0.2s; z-index: 50000; ">
</div>
<!--<button id="testsysbtn" class="btn btn-info col-1">系統監控(測試用)</button>--> <!--<button id="testsysbtn" class="btn btn-info col-1">系統監控(測試用)</button>-->
<!-- END Messenger --> <!-- END Messenger -->
<!-- BEGIN Page Settings --> <!-- BEGIN Page Settings -->
@ -840,7 +844,6 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
getSysMonBtnList(); getSysMonBtnList();
checkDevState(); checkDevState();
if (lastPage) { if (lastPage) {
let lastPageAct = {}; let lastPageAct = {};
if (isJSON(sessionStorage.getItem("pageAct"))) { if (isJSON(sessionStorage.getItem("pageAct"))) {
@ -922,7 +925,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
if (!page) { if (!page) {
return; return;
} }
if (page != "systemMonitor") { if (page != "systemMonitor" && page != "sysElevator") {
$("#sysMonBtnList .dropdown-item").removeClass("active"); $("#sysMonBtnList .dropdown-item").removeClass("active");
pageAct.sysMainTag = null; pageAct.sysMainTag = null;
pageAct.sysSubTag = null; pageAct.sysSubTag = null;
@ -939,12 +942,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
endPageLoading(); endPageLoading();
$(".yt-alert").YTAlert().hide(); $(".yt-alert").YTAlert().hide();
if (typeof timeOuters != "undefined" && timeOuters) {
$.each(timeOuters, (idx, timeOut) => {
clearInterval(timeOut);
})
timeOuters = [];
}
getUserInfo(); getUserInfo();
@ -959,13 +957,6 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
location.href = "/logout"; location.href = "/logout";
}) })
onEvent("click", "#sysMonBtnList a", function (e) {
//pageAct.sysMainTag = $(this).data("subSysObj").main_system_tag;
//pageAct.sysSubTag = $(this).data("subSysObj").sub_system_tag;
//pageAct.sysSubName = $(this).data("subSysObj").full_name;
//pageAct.sysSubObj = $(this).data("subSysObj");
//getDevItem();
})
onEvent("active:change", "#buiList", function (e, actEle) { onEvent("active:change", "#buiList", function (e, actEle) {
if (actEle) { if (actEle) {
@ -988,10 +979,18 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
} }
}) })
onEvent("scroll", window, function () {
if ($(window).scrollTop() != 0) {
$("#noticeBlock").css("top", 0);
} else {
$("#noticeBlock").css("top", 70);
}
})
onEvent("click", "#testsysbtn", function () { onEvent("click", "#testsysbtn", function () {
}) })
let fronIdx = 1;
$(window).on("timeout:3s", function () { $(window).on("timeout:3s", function () {
getSystemAlarmByBaja((data) => { getSystemAlarmByBaja((data) => {
@ -1001,7 +1000,28 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
alarmIconBlink(); alarmIconBlink();
}) })
showWarToast(); let content = `<div class="col-12">
<div class="row m-0">
<span class="m-0">異常編號：<span>001</span></span>
</div>
<div class="row m-0">
<span class="m-0">異常等級：<span>2</span></span>
</div>
<div class="row m-0">
<span class="m-0">異常類別：<span>S01</span></span>
</div>
<div class="row m-0">
<span class="m-0">設備名稱：<span>電表01</span></span>
</div>
<div class="row m-0">
<span class="m-0">異常訊息：<span>壞掉</span></span>
</div>
</div>`
let titleHtml = `異常通知`
$("#noticeBlock").YTNotice("add", titleHtml + fronIdx, content,"warning");
fronIdx++;
}) })
} }
@ -1084,7 +1104,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;
} }
@ -1092,7 +1112,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;
} }
@ -1109,35 +1129,35 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
let lightHtml = type == "light" ? `<button type="button" id="lightSch-tab" class="btn btn-icon nav-link" role="tab" data-tabname="cardTab" data-target="#lightSch"><i class="fas fa-calendar-alt"></i></button>` : ""; let lightHtml = type == "light" ? `<button type="button" id="lightSch-tab" class="btn btn-icon nav-link" role="tab" data-tabname="cardTab" data-target="#lightSch"><i class="fas fa-calendar-alt"></i></button>` : "";
let option = { let option = {
html: `<div class="card m-1 border device-wrap"> html: `<div class="card m-1 border device-wrap">
<div class="card-header p-3"> <div class="card-header p-3">
<div class="position-absolute w-50" style="word-break: break-all;"> <div class="position-absolute w-50" 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" class="btn btn-icon nav-link active" role="tab" data-tabname="cardTab" data-target="#state"><i class="fa fa-desktop icon"></i></button> <button type="button" id="state-tab" class="btn btn-icon nav-link active" role="tab" data-tabname="cardTab" data-target="#state"><i class="fa fa-desktop icon"></i></button>
${lightHtml} ${lightHtml}
<button type="button" id="info-tab" class="btn btn-icon nav-link" role="tab" data-tabname="cardTab" data-target="#info"><i class="fa fa-cog icon"></i></button> <button type="button" id="info-tab" class="btn btn-icon nav-link" role="tab" data-tabname="cardTab" data-target="#info"><i class="fa fa-cog icon"></i></button>
<button type="button" id="errRec-tab" class="btn btn-icon nav-link" role="tab" data-tabname="cardTab" data-target="#errRec"><i class="fas fa-exclamation-triangle"></i></button> <button type="button" id="errRec-tab" class="btn btn-icon nav-link" role="tab" data-tabname="cardTab" data-target="#errRec"><i class="fas fa-exclamation-triangle"></i></button>
<button type="button" id="opeRec-tab" class="btn btn-icon nav-link" role="tab" data-tabname="cardTab" data-target="#opeRec"><i class="fa fa-bars icon"></i></button> <button type="button" id="opeRec-tab" class="btn btn-icon nav-link" role="tab" data-tabname="cardTab" data-target="#opeRec"><i class="fa fa-bars icon"></i></button>
<button class="btn p-2"><i class="fas fa-times fs-1 text-white-50" data-close="yttooltip"></i></button> <button class="btn p-2"><i class="fas fa-times fs-1 text-white-50" data-close="yttooltip"></i></button>
</div> </div>
</div> </div>
<div class="card-body p-2 tab-content"> <div class="card-body p-2 tab-content">
<div id="state" class="show active" data-tabname="cardTab" data-tabrole="child" style="height:100%;width:100%"> <div id="state" class="show active" data-tabname="cardTab" data-tabrole="child" style="height:100%;width:100%">
${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>
<div id="errRec" data-tabname="cardTab" data-tabrole="child"> <div id="errRec" data-tabname="cardTab" data-tabrole="child">
${drawErrRecTabBlo()} ${drawErrRecTabBlo()}
</div> </div>
<div id="opeRec" data-tabname="cardTab" data-tabrole="child"> <div id="opeRec" data-tabname="cardTab" data-tabrole="child">
${drawOpeRecTabBlo()} ${drawOpeRecTabBlo()}
</div> </div>
</div> </div>
</div>`, </div>`,
group: "device", group: "device",
onShow: function (tooltipEle, oriEle) { onShow: function (tooltipEle, oriEle) {
// 執行 pop 視窗上方 Tab 類別 // 執行 pop 視窗上方 Tab 類別
@ -1164,7 +1184,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
}); });
// pop 視窗卡片可縮放功能初始化 // pop 視窗卡片可縮放功能初始化
$(tooltipEle).resizable({ $(tooltipEle).resizable({
resize: function (event,ui) { resize: function (event, ui) {
let iframe = $(ui.element).find("iframe"); let iframe = $(ui.element).find("iframe");
if (iframe.length != 0) { if (iframe.length != 0) {
if (ui.size.width != ui.originalSize.width) { if (ui.size.width != ui.originalSize.width) {
@ -1179,7 +1199,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
errRecTable.draw(false) errRecTable.draw(false)
}, },
minWidth: 200, minWidth: 200,
minHeight:150, minHeight: 150,
}); });
// 電梯管理 - Card table 更新 // 電梯管理 - Card table 更新
typeof subDeviceSetTable != "undefined" ? subDeviceSetTable($(oriEle).data("number")) : "" typeof subDeviceSetTable != "undefined" ? subDeviceSetTable($(oriEle).data("number")) : ""
@ -1415,6 +1435,12 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
return parentEle; return parentEle;
} }
// 設置 Forge 3D 溫度條
function setTopHeatBar() {
let strHtml = `<canvas name="forgeHeatBar" width="200" height="30" style="z-index:9999"></canvas>`;
return strHtml;
}
//============================================================================== //==============================================================================
// ↑ 系統監控 - 共用 Function ↑ // ↑ 系統監控 - 共用 Function ↑
//============================================================================== //==============================================================================
@ -1509,35 +1535,35 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
} else { } else {
let strHtml = `<div class="btn-group mx-4"> let strHtml = `<div class="btn-group mx-4">
<a href="javascript:;" name="topFunBtn" data-page="dashboard" data-tabname="topFunBtn" class="text-center"> <a href="javascript:;" name="topFunBtn" 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" type="button">Action</button> <button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item" type="button">Another action</button> <button class="dropdown-item" type="button">Another action</button>
<button class="dropdown-item" type="button">Something else here</button> <button class="dropdown-item" type="button">Something else here</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" data-toggle="navbar" data-target="#sysMonNavbar" data-tabname="topFunBtn" aria-haspopup="true" aria-expanded="false"> <a href="javascript:;" id="sysMonTopBtn" class="text-center" data-toggle="navbar" data-target="#sysMonNavbar" data-tabname="topFunBtn" aria-haspopup="true" aria-expanded="false">
<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>`; </div>`;
hasMonitor = true; hasMonitor = true;
} }
else { else {
let icon = v.authCode == 'PF2' ? 'fa-chart-pie' : v.authCode == 'PF3' ? 'fa-chart-area' : v.authCode == 'PF4' ? 'fa-chart-line' : v.authCode == 'PF5' ? 'fa-bell' : v.authCode == 'PF6' ? 'fa-server' : v.authCode == 'PF7' ? 'fa-image' : v.authCode == 'PF8' ? 'fa-user' : ''; let icon = v.authCode == 'PF2' ? 'fa-chart-pie' : v.authCode == 'PF3' ? 'fa-chart-area' : v.authCode == 'PF4' ? 'fa-chart-line' : v.authCode == 'PF5' ? 'fa-bell' : v.authCode == 'PF6' ? 'fa-server' : v.authCode == 'PF7' ? 'fa-image' : v.authCode == 'PF8' ? '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>`;
} }
}); });
@ -1581,12 +1607,12 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
}, null, "POST").send(); }, null, "POST").send();
} }
function getLogo() { function getLogo() {
url = baseApiUrl + '/api/GetLogo'; url = baseApiUrl + '/api/GetLogo';
ytAjax = new YourTeam.Ajax(url, null, function (res) { ytAjax = new YourTeam.Ajax(url, null, function (res) {
$('[name=webLogo]').attr('src', baseImgUrl + '/img/' + res.data); $('[name=webLogo]').attr('src', baseImgUrl + '/img/' + res.data);
}, null, "POST").send(); }, null, "POST").send();
} }
function getUserInfo() { function getUserInfo() {
let url = baseApiUrl + varApiUrl + "getUserFull"; let url = baseApiUrl + varApiUrl + "getUserFull";
@ -1602,55 +1628,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
}, null, "POST").send(); }, null, "POST").send();
} }
function showWarToast() {
//let options = {
// "closeButton": false,
// "debug": false,
// "newestOnTop": true,
// "progressBar": false,
// "positionClass": "toast-top-right",
// "preventDuplicates": false,
// "onclick": null,
// "showDuration": "300",
// "hideDuration": "1000",
// "timeOut": 0,
// "extendedTimeOut": 0,
// "showEasing": "swing",
// "hideEasing": "linear",
// "showMethod": "fadeIn",
// "hideMethod": "fadeOut",
// "tapToDismiss": false
//}
//if ($("#toast-container .toast").length < 2) {
// let strConHtml = `<div class="col-12">
// <div class="row m-0">
// <span class="m-0">異常編號：<span>001</span></span>
// </div>
// <div class="row m-0">
// <span class="m-0">異常等級：<span>2</span></span>
// </div>
// <div class="row m-0">
// <span class="m-0">異常類別：<span>S01</span></span>
// </div>
// <div class="row m-0">
// <span class="m-0">設備名稱：<span>電表01</span></span>
// </div>
// <div class="row m-0">
// <span class="m-0">異常訊息：<span>壞掉</span></span>
// </div>
// </div>`;
// let titleHtml = `<div class="col-12">
// <div class="row m-0">
// <span class="fs-1">異常通知</span>
// <span class="ml-auto">2023/01/01 12:00:00</span>
// </div>
// </div>`
// toastr.warning(strConHtml, titleHtml, options)
//}
}
</script> </script>
</body> </body>

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

@ -734,12 +734,16 @@ async function testNewLight(dataList) {
lightList[index].lightObject.position.set(position.x, position.y, position.z); lightList[index].lightObject.position.set(position.x, position.y, position.z);
lightList[index].lightObject.castShadow = true; lightList[index].lightObject.castShadow = true;
lightList[index].lightObject.visible = true; lightList[index].lightObject.visible = true;
lightList[index].lightObject.target.position.set(position.x, position.y, position.z - 20); lightList[index].lightObject.target.position.set(position.x, position.y, position.z - 100);
viewer.scene.add(lightList[index].lightObject.target); viewer.scene.add(lightList[index].lightObject.target);
viewer.scene.add(lightList[index].lightObject); viewer.scene.add(lightList[index].lightObject);
viewer.impl.sceneUpdated(true);
//let spotLightHelper = new THREE.SpotLightHelper(lightList[index].lightObject);
//viewer.scene.add(spotLightHelper);
}); });
viewer.impl.sceneUpdated(true);
} }
//------------------- 加入熱點 ----------------- //------------------- 加入熱點 -----------------

155
Frontend/js/site.js
View File

@ -439,6 +439,161 @@ function isJSON(str) {
} }
} }
function addBsToast(container, type = "warning",title="",content ="", id, datas = {}, option = {}) {
datas = Object.keys(datas).length != 0 ? `${Object.keys(datas).map(x => `data-${x}="${datas[x]}"`).join(" ")}` : "";
let iconClass = option.iconHtml ?? `fas fa-exclamation-triangle`;
let strHtml = `<div class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-autohide="false" ${datas}>
<div class="toast-header ${warning ? `bg-` + warning : ""}">
<i class="${iconClass}"></i>
<strong class="mr-auto">${title}</strong>
<small class="text-muted">just now</small>
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="toast-body">
${content}
</div>
</div>`
}
class YTNotice {
constructor(option = {}) {
this.title = option.title ?? "";
this.content = option.content ?? "";
this.type = option.type ?? null;
this.keepTime = 0;
this.iconClass = option.iconClass ?? "";
this.container = "";
this.eIcon = "";
this.eTitle = "";
this.eTimeAgo = "";
this.eCloseBtn = "";
this.eContent = "";
this.init();
}
init = function () {
this.setIconClass();
this.setContainer();
if (this.title) {
this.setTitle(this.title);
}
if (this.content) {
this.setContent(this.content);
}
}
setContainer = function () {
this.container = $(`<div class="toast fade" role="alert" aria-live="assertive" aria-atomic="true" data-autohide="false">
<div class="toast-header">
</div>
<div class="toast-body">
</div>
</div>`);
this.setIcon(this.iconClass);
this.eTitle = $(`<strong class="mr-auto notice-title"></strong>`);
this.eTimeAgo = $(`<small class="text-muted notice-ago ml-4">just now</small>`);
this.eCloseBtn = $(`<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close"><span aria-hidden="true">&times;</span></button>`);
this.eContent = $(`<div class="notice-content"></div>`);
if (this.type != null) {
this.container.find(".toast-header").append(this.eIcon);
this.eIcon.addClass("text-" + this.type);
}
this.container.find(".toast-header").append(this.eTitle);
this.container.find(".toast-header").append(this.eTimeAgo);
this.container.find(".toast-header").append(this.eCloseBtn);
this.container.find(".toast-body").append(this.eContent);
}
setIconClass = function () {
if (this.type == "success") {
this.iconClass = `fas fa-check`;
} else if (this.type == "warning") {
this.iconClass = `fas fa-exclamation-triangle`;
} else if (this.type == "danger") {
this.iconClass = `fas fa-times`;
}
}
setIcon = function (iconClass) {
this.eIcon = $(`<i class="mr-2"></i>`);
this.eIcon.addClass(iconClass);
}
setTitle = function (title = "") {
this.eTitle.html(title);
}
setTimeAgo = function (timeAgo = "") {
this.eTimeAgo.text(timeAgo);
}
setContent = function (content = "") {
this.eContent.html(content);
}
}
class YTNoticeBlock {
constructor(option = {}) {
this.element = option.element;
this.offsetBottom = 200;
this.noticeArr = [];
}
addNotice = function (option = {}) {
let notice = new YTNotice(option);
$(this.element).prepend(notice.container);
let lastNoticeOffset = $(this.element).find(".toast").last().offset();
if (lastNoticeOffset.top + this.offsetBottom > $(window).height()) {
$(this.noticeArr[0].obj.container).toast('dispose');
setTimeout(() => {
$(this.noticeArr[0].obj.container).remove();
this.noticeArr.shift();
}, 500)
}
$(notice.container).toast('show');
this.noticeArr.push({ obj: notice, time: (new Date()).getTime() });
}
}
$.fn.YTNotice = function (method = "init", ...args) {
let _this = this;
if (method == "init") {
initNoticeBlock();
}
if (method == "add") {
let argArr = ["title", "content", "type", "iconClass"];
let opt = {};
let noticeBlock = _this[0]._noticeBlock;
if (!noticeBlock) {
initNoticeBlock();
noticeBlock = _this[0]._noticeBlock;
}
argArr.forEach((arg, idx) => {
opt[argArr[idx]] = args[idx];
})
noticeBlock.addNotice(opt);
}
function initNoticeBlock() {
let option = {};
option.element = _this;
let noticeBlock = new YTNoticeBlock(option);
_this[0]._noticeBlock = noticeBlock;
}
}
/** /**
* 取得資料庫電梯設備，根據 baja 訂閱移動 3D 電梯 * 取得資料庫電梯設備，根據 baja 訂閱移動 3D 電梯

8
Frontend/js/style.js
View File

@ -1427,8 +1427,12 @@ async function download(token,url, filename,callback = null) {
} }
function onEvent(type, selector, callback) { function onEvent(type, selector, callback) {
$("body").off(type, selector); if (selector == "body" || selector == window) {
$("body").on(type, selector, callback); $(selector).on(type, callback);
} else {
$("body").off(type, selector);
$("body").on(type, selector, callback);
}
} }
/** /**