[Frontend][系統監控] 訂閱 ST 點位改為恢復持續閃爍問題解決 | Notice 警告視窗封裝程序建置 | NoticeBlock 警告區塊封裝程序建置 | [系統監控] 平面圖增加溫度條
This commit is contained in:
parent
d63e517b3c
commit
e24712fe42
@ -968,7 +968,9 @@
|
||||
$(`#${matchDevice.device_number}_card [name=devStatus]`).text(data.value);
|
||||
//若為異常(match資料庫點位值)且後台有設定為閃爍
|
||||
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");
|
||||
}
|
||||
}
|
||||
//現在樓層
|
||||
|
||||
@ -189,6 +189,8 @@
|
||||
//是否閃爍
|
||||
if (isFlashing) {
|
||||
$(ele).parents(".card.device-wrap").addClass("light-flash");
|
||||
} else {
|
||||
$(ele).parents(".card.device-wrap").removeClass("light-flash");
|
||||
}
|
||||
})
|
||||
}
|
||||
@ -219,12 +221,6 @@
|
||||
return strHtml;
|
||||
}
|
||||
|
||||
// 設置 Forge 3D 溫度條
|
||||
function setTopHeatBar() {
|
||||
let strHtml = `<canvas name="forgeHeatBar" width="200" height="30" style="z-index:9999"></canvas>`;
|
||||
return strHtml;
|
||||
}
|
||||
|
||||
// forge 3D 異常點位變紅色
|
||||
function setForgeHotSpotColor(device) {
|
||||
let subData = subDeviceData.filter(x => x.device_number == device.device_number)[0]
|
||||
@ -474,7 +470,6 @@
|
||||
setHotspotPoint(myDataList);
|
||||
if (pageAct.sysMainTag == "LT") {
|
||||
setLightPoint(myDataList);
|
||||
console.log("myDataList", myDataList)
|
||||
}
|
||||
callback ? callback() : "";
|
||||
}
|
||||
|
||||
@ -18,6 +18,9 @@
|
||||
<div id="floChart" style="height : 80vh!important;width:100%"></div>
|
||||
</div>
|
||||
<div class="col-6 my-3">
|
||||
<div id="forgeHeatBarDiv" class="d-flex mb-4" style="gap:15px">
|
||||
|
||||
</div>
|
||||
<div id="forgeViewer"></div>
|
||||
</div>
|
||||
</div>
|
||||
@ -32,6 +35,7 @@
|
||||
var global_emergency_alarm_device_number = [];
|
||||
var zoomToggle = 3;
|
||||
$(function () {
|
||||
drawHeatBar();
|
||||
getHotspotPoint(() => {
|
||||
show3DModel(pageAct.urn);
|
||||
});
|
||||
@ -465,10 +469,17 @@
|
||||
|
||||
floMyBaja.setSubscribeDeviceEndCallBack(function (data) {
|
||||
endPageLoading();
|
||||
if (data.findIndex(x => x.point_name == "Temp") != -1) {
|
||||
// 顯示溫度條
|
||||
showHeat("[name=forgeHeatBar]");
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
function drawHeatBar() {
|
||||
$("#forgeHeatBarDiv").html(setTopHeatBar());
|
||||
}
|
||||
|
||||
// 電梯 3D 位置呈現
|
||||
function set3DElevPos(viewer) {
|
||||
@ -1070,7 +1081,6 @@
|
||||
}
|
||||
forge3DElev.init();
|
||||
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
@ -667,6 +667,10 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
|
||||
</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>-->
|
||||
<!-- END Messenger -->
|
||||
<!-- BEGIN Page Settings -->
|
||||
@ -840,7 +844,6 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
|
||||
getSysMonBtnList();
|
||||
checkDevState();
|
||||
|
||||
|
||||
if (lastPage) {
|
||||
let lastPageAct = {};
|
||||
if (isJSON(sessionStorage.getItem("pageAct"))) {
|
||||
@ -922,7 +925,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
|
||||
if (!page) {
|
||||
return;
|
||||
}
|
||||
if (page != "systemMonitor") {
|
||||
if (page != "systemMonitor" && page != "sysElevator") {
|
||||
$("#sysMonBtnList .dropdown-item").removeClass("active");
|
||||
pageAct.sysMainTag = null;
|
||||
pageAct.sysSubTag = null;
|
||||
@ -939,12 +942,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
|
||||
endPageLoading();
|
||||
$(".yt-alert").YTAlert().hide();
|
||||
|
||||
if (typeof timeOuters != "undefined" && timeOuters) {
|
||||
$.each(timeOuters, (idx, timeOut) => {
|
||||
clearInterval(timeOut);
|
||||
})
|
||||
timeOuters = [];
|
||||
}
|
||||
|
||||
|
||||
getUserInfo();
|
||||
|
||||
@ -959,13 +957,6 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
|
||||
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) {
|
||||
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 () {
|
||||
|
||||
})
|
||||
|
||||
let fronIdx = 1;
|
||||
$(window).on("timeout:3s", function () {
|
||||
|
||||
getSystemAlarmByBaja((data) => {
|
||||
@ -1001,7 +1000,28 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
|
||||
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() {
|
||||
let strHtml = `<table id="errRecTable" class="table table-bordered table-striped text-center m-0 w-100">
|
||||
|
||||
</table>`
|
||||
</table>`
|
||||
return strHtml;
|
||||
}
|
||||
|
||||
@ -1092,7 +1112,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
|
||||
function drawOpeRecTabBlo() {
|
||||
let strHtml = `<table id="opeRecTable" class="table table-bordered table-striped text-center m-0 w-100">
|
||||
|
||||
</table>`
|
||||
</table>`
|
||||
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 option = {
|
||||
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;">
|
||||
<label class="m-0 mt-2">${devName}</label>
|
||||
</div>
|
||||
<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>
|
||||
${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="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 class="btn p-2"><i class="fas fa-times fs-1 text-white-50" data-close="yttooltip"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
<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%">
|
||||
${drawStateTabBlo(devNum)}
|
||||
</div>
|
||||
<div id="info" data-tabname="cardTab" data-tabrole="child">
|
||||
<div class="position-absolute w-50" style="word-break: break-all;">
|
||||
<label class="m-0 mt-2">${devName}</label>
|
||||
</div>
|
||||
<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>
|
||||
${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="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 class="btn p-2"><i class="fas fa-times fs-1 text-white-50" data-close="yttooltip"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
<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%">
|
||||
${drawStateTabBlo(devNum)}
|
||||
</div>
|
||||
<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>
|
||||
<div id="errRec" data-tabname="cardTab" data-tabrole="child">
|
||||
${drawErrRecTabBlo()}
|
||||
</div>
|
||||
<div id="opeRec" data-tabname="cardTab" data-tabrole="child">
|
||||
${drawOpeRecTabBlo()}
|
||||
</div>
|
||||
</div>
|
||||
</div>`,
|
||||
group: "device",
|
||||
onShow: function (tooltipEle, oriEle) {
|
||||
// 執行 pop 視窗上方 Tab 類別
|
||||
@ -1164,7 +1184,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
|
||||
});
|
||||
// pop 視窗卡片可縮放功能初始化
|
||||
$(tooltipEle).resizable({
|
||||
resize: function (event,ui) {
|
||||
resize: function (event, ui) {
|
||||
let iframe = $(ui.element).find("iframe");
|
||||
if (iframe.length != 0) {
|
||||
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)
|
||||
},
|
||||
minWidth: 200,
|
||||
minHeight:150,
|
||||
minHeight: 150,
|
||||
});
|
||||
// 電梯管理 - Card table 更新
|
||||
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;
|
||||
}
|
||||
|
||||
// 設置 Forge 3D 溫度條
|
||||
function setTopHeatBar() {
|
||||
let strHtml = `<canvas name="forgeHeatBar" width="200" height="30" style="z-index:9999"></canvas>`;
|
||||
return strHtml;
|
||||
}
|
||||
|
||||
//==============================================================================
|
||||
// ↑ 系統監控 - 共用 Function ↑
|
||||
//==============================================================================
|
||||
@ -1509,35 +1535,35 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
|
||||
|
||||
} else {
|
||||
let strHtml = `<div class="btn-group mx-4">
|
||||
<a href="javascript:;" name="topFunBtn" data-page="dashboard" data-tabname="topFunBtn" class="text-center">
|
||||
<i class="fal fa-home fa-2x"></i><br>首頁
|
||||
</a>
|
||||
<!--<div class="dropdown-menu">
|
||||
<button class="dropdown-item" type="button">Action</button>
|
||||
<button class="dropdown-item" type="button">Another action</button>
|
||||
<button class="dropdown-item" type="button">Something else here</button>
|
||||
</div>-->
|
||||
</div>`;
|
||||
<a href="javascript:;" name="topFunBtn" data-page="dashboard" data-tabname="topFunBtn" class="text-center">
|
||||
<i class="fal fa-home fa-2x"></i><br>首頁
|
||||
</a>
|
||||
<!--<div class="dropdown-menu">
|
||||
<button class="dropdown-item" type="button">Action</button>
|
||||
<button class="dropdown-item" type="button">Another action</button>
|
||||
<button class="dropdown-item" type="button">Something else here</button>
|
||||
</div>-->
|
||||
</div>`;
|
||||
|
||||
$.each(res.data, function (i, v) {
|
||||
if (v.authCode == 'PF1') {
|
||||
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">
|
||||
<i class="fal fa-tv fa-2x"></i><br>${v.subName}
|
||||
</a>
|
||||
<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}
|
||||
</a>
|
||||
|
||||
</div>`;
|
||||
</div>`;
|
||||
|
||||
hasMonitor = true;
|
||||
}
|
||||
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' : '';
|
||||
strHtml += `<div class="btn-group mx-4">
|
||||
<a href="javascript:;" name="topFunBtn" data-tabname="topFunBtn" class="dropdown-toggle no-arrow text-center"
|
||||
data-page="${v.showView}">
|
||||
<i class="fal ${icon} fa-2x"></i><br>${v.subName}
|
||||
</a>
|
||||
</div>`;
|
||||
<a href="javascript:;" name="topFunBtn" data-tabname="topFunBtn" class="dropdown-toggle no-arrow text-center"
|
||||
data-page="${v.showView}">
|
||||
<i class="fal ${icon} fa-2x"></i><br>${v.subName}
|
||||
</a>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
});
|
||||
@ -1581,12 +1607,12 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
|
||||
}, null, "POST").send();
|
||||
}
|
||||
|
||||
function getLogo() {
|
||||
function getLogo() {
|
||||
url = baseApiUrl + '/api/GetLogo';
|
||||
ytAjax = new YourTeam.Ajax(url, null, function (res) {
|
||||
$('[name=webLogo]').attr('src', baseImgUrl + '/img/' + res.data);
|
||||
}, null, "POST").send();
|
||||
}
|
||||
}
|
||||
|
||||
function getUserInfo() {
|
||||
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();
|
||||
}
|
||||
|
||||
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>
|
||||
|
||||
</body>
|
||||
|
||||
@ -734,12 +734,16 @@ async function testNewLight(dataList) {
|
||||
lightList[index].lightObject.position.set(position.x, position.y, position.z);
|
||||
lightList[index].lightObject.castShadow = 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);
|
||||
viewer.impl.sceneUpdated(true);
|
||||
|
||||
//let spotLightHelper = new THREE.SpotLightHelper(lightList[index].lightObject);
|
||||
//viewer.scene.add(spotLightHelper);
|
||||
|
||||
|
||||
});
|
||||
viewer.impl.sceneUpdated(true);
|
||||
}
|
||||
|
||||
//------------------- 加入熱點 -----------------
|
||||
|
||||
@ -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">×</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">×</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 電梯
|
||||
|
||||
@ -1427,8 +1427,12 @@ async function download(token,url, filename,callback = null) {
|
||||
}
|
||||
|
||||
function onEvent(type, selector, callback) {
|
||||
$("body").off(type, selector);
|
||||
$("body").on(type, selector, callback);
|
||||
if (selector == "body" || selector == window) {
|
||||
$(selector).on(type, callback);
|
||||
} else {
|
||||
$("body").off(type, selector);
|
||||
$("body").on(type, selector, callback);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
Loading…
Reference in New Issue
Block a user