[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++;
|
||||
})
|
||||
|
||||
}
|
||||
@ -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 ↑
|
||||
//==============================================================================
|
||||
@ -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,9 +1427,13 @@ async function download(token,url, filename,callback = null) {
|
||||
}
|
||||
|
||||
function onEvent(type, selector, callback) {
|
||||
if (selector == "body" || selector == window) {
|
||||
$(selector).on(type, callback);
|
||||
} else {
|
||||
$("body").off(type, selector);
|
||||
$("body").on(type, selector, callback);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* element array sort
|
||||
|
||||
Loading…
Reference in New Issue
Block a user