From 0299a079fd19ccc50431166e837494cbd3e87493 Mon Sep 17 00:00:00 2001 From: dev01 Date: Thu, 12 Jan 2023 18:22:18 +0800 Subject: [PATCH] =?UTF-8?q?[Frontend][=E5=85=A8=E5=9F=9F=E5=8A=9F=E8=83=BD?= =?UTF-8?q?]=20notice=20=E8=A8=8A=E6=81=AF=E8=AD=A6=E5=91=8A=E7=A8=8B?= =?UTF-8?q?=E5=BA=8F=E8=AA=BF=E6=95=B4=20|=20=E4=B8=B2=E6=8E=A5=E5=BE=8C?= =?UTF-8?q?=E5=8F=B0=20API?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- Frontend/_dashboard.html | 2 +- Frontend/index.html | 186 +++++++----- Frontend/js/site.js | 138 --------- .../yourteam/plugins/yt-notice/yt-notice.js | 270 ++++++++++++++++++ 4 files changed, 383 insertions(+), 213 deletions(-) create mode 100644 Frontend/js/yourteam/plugins/yt-notice/yt-notice.js diff --git a/Frontend/_dashboard.html b/Frontend/_dashboard.html index 3dfeeb0..c61fae7 100644 --- a/Frontend/_dashboard.html +++ b/Frontend/_dashboard.html @@ -396,7 +396,7 @@ let curDay = (new Date()).getDay() == 0 ? 7 : (new Date()).getDay(); let curWeekData = data.data.filter(x => strToDate(displayDate(new Date(), "date"), null, 1 - 7) <= strToDate(x.timestamp.$cEncStr)); let prevWeekData = data.data.filter(x => strToDate(displayDate(new Date(), "date"), null, 1 - 14) <= strToDate(x.timestamp.$cEncStr) && strToDate(new Date(), null, 1 - 7) >= strToDate(x.timestamp.$cEncStr)); - debugger + chartEveWeeksElec(curWeekData, prevWeekData) chkBajaLoaded(); }) diff --git a/Frontend/index.html b/Frontend/index.html index e0ddb44..f0efff1 100644 --- a/Frontend/index.html +++ b/Frontend/index.html @@ -44,6 +44,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li + @@ -667,7 +668,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li -
+
@@ -802,6 +803,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li "yourteam/plugins/yt-tooltip/yt-tooltip", "yourteam/plugins/yt-tab/yt-tab", "yourteam/plugins/yt-navbar/yt-navbar", + "yourteam/plugins/yt-notice/yt-notice", "style", ], function () { @@ -843,7 +845,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li getBuiList(); getSysMonBtnList(); checkDevState(); - + if (lastPage) { let lastPageAct = {}; if (isJSON(sessionStorage.getItem("pageAct"))) { @@ -942,7 +944,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li endPageLoading(); $(".yt-alert").YTAlert().hide(); - + getUserInfo(); @@ -957,7 +959,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li location.href = "/logout"; }) - + onEvent("active:change", "#buiList", function (e, actEle) { if (actEle) { pageAct.buiTag = $(actEle).prop("id").split("buiBtn")[1]; @@ -986,11 +988,15 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li $("#noticeBlock").css("top", 70); } }) - + onEvent("click", "#testsysbtn", function () { }) - let fronIdx = 1; + + onEvent("click", "button[id^=noticeChkBtn]", function () { + $(this).parents(".toast").YTNotice("hide"); + }) + $(window).on("timeout:3s", function () { getSystemAlarmByBaja((data) => { @@ -1000,28 +1006,9 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li alarmIconBlink(); }) - let content = `
-
- 異常編號：001 -
-
- 異常等級：2 -
-
- 異常類別：S01 -
-
- 設備名稱：電表01 -
-
- 異常訊息：壞掉 -
- -
` - let titleHtml = `異常通知` - - $("#noticeBlock").YTNotice("add", titleHtml + fronIdx, content,"warning"); - fronIdx++; + + getAlarmFromDB(); + }) } @@ -1104,7 +1091,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li function drawErrRecTabBlo() { let strHtml = ` -
` + ` return strHtml; } @@ -1112,7 +1099,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li function drawOpeRecTabBlo() { let strHtml = ` -
` + ` return strHtml; } @@ -1129,35 +1116,35 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li let lightHtml = type == "light" ? `` : ""; let option = { html: `
-
+
-
- +
+ +
+
+ + ${lightHtml} + + + + +
-
- - ${lightHtml} - - - - -
-
-
-
- ${drawStateTabBlo(devNum)} -
-
+
+
+ ${drawStateTabBlo(devNum)} +
+
+
+
+ ${drawErrRecTabBlo()} +
+
+ ${drawOpeRecTabBlo()} +
-
- ${drawErrRecTabBlo()} -
-
- ${drawOpeRecTabBlo()} -
-
-
`, +
`, group: "device", onShow: function (tooltipEle, oriEle) { // 執行 pop 視窗上方 Tab 類別 @@ -1535,35 +1522,35 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li } else { let strHtml = `
- -
首頁 - - -
`; + +
首頁 + + +
`; $.each(res.data, function (i, v) { if (v.authCode == 'PF1') { strHtml += `
- + -
`; +
`; 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 += `
- -
${v.subName} - -
`; + +
${v.subName} + + `; } }); @@ -1628,7 +1615,58 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li }, null, "POST").send(); } - + var noticeOptArr = []; + function getAlarmFromDB() { + let url = baseApiUrl + "/api/AlarmCard"; + ytAjax = new YourTeam.Ajax(url, null, function (res) { + if (!res || res.code != "0000" || !res.data) { + + } else { + let datas = res.data; + let titleHtml = `異常通知`; + let notices = []; + $.each(datas, (idx, data) => { + if (noticeOptArr.findIndex(x => x.id == data.id) == -1) { + let content = `
+
+ 異常編號：${data.id} +
+
+ 異常等級：${data.priority} +
+
+ 異常類別：${data.alarmClass_txt} +
+
+ 設備名稱：${data.device_name} +
+
+ 異常訊息：${data.errMsg} +
+
+ + +
+
` + let main = { + title: titleHtml, + content: content, + type: "warning", + id: data.id, + hasCloseBtn: false, + timeText: displayDate(data.timestamp), + } + noticeOptArr.push(main); + notices.push(main); + } + }) + if (notices.length != 0) { + $("#noticeBlock").YTNotice("add_many", notices.oSort("id").reverse()); + } + console.log("res", res) + } + }, null, "POST",true).send(); + } diff --git a/Frontend/js/site.js b/Frontend/js/site.js index ec0da10..194259f 100644 --- a/Frontend/js/site.js +++ b/Frontend/js/site.js @@ -457,144 +457,6 @@ function addBsToast(container, type = "warning",title="",content ="", id, datas ` } -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 = $(``); - - this.setIcon(this.iconClass); - this.eTitle = $(``); - this.eTimeAgo = $(`just now`); - this.eCloseBtn = $(``); - this.eContent = $(`
`); - 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 = $(``); - 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 電梯 * */ diff --git a/Frontend/js/yourteam/plugins/yt-notice/yt-notice.js b/Frontend/js/yourteam/plugins/yt-notice/yt-notice.js new file mode 100644 index 0000000..cc959e4 --- /dev/null +++ b/Frontend/js/yourteam/plugins/yt-notice/yt-notice.js @@ -0,0 +1,270 @@ +/** + * YourTeam Notice 訊息彈出小視窗 (on base bootstrap v4 toast) + * + * 使用方式： + *
+ +
+ * + * + * */ + + +class YTNotice { + constructor(option = {}) { + this.id = option.id ?? null; + this.title = option.title ?? ""; + this.content = option.content ?? ""; + this.type = option.type ?? null; + this.hasCloseBtn = option.hasCloseBtn ?? true; + this.keepTime = 0; + this.timeText = option.timeText ?? "剛剛"; + this.iconClass = option.iconClass ?? ""; + this.container = ""; + this.eIcon = ""; + this.eTitle = ""; + this.eTimeAgo = ""; + this.eCloseBtn = ""; + this.eContent = ""; + this.init(); + } + + init = function () { + this.setNoticeId(); + this.setIconClass(); + this.setContainer(); + + if (this.title) { + this.setTitle(this.title); + } + if (this.content) { + this.setContent(this.content); + } + if (this.timeText) { + this.setTimeAgo(this.timeText); + } + + $(this.container)[0]._ytNotice = this; + } + + setNoticeId = function () { + if (this.id == null) { + this.id = YT.Math.Random(10000000, 99999999); + } + } + + setContainer = function () { + this.container = $(``); + + this.setIcon(this.iconClass); + this.eTitle = $(``); + this.eTimeAgo = $(``); + this.eCloseBtn = $(``); + this.eContent = $(`
`); + 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); + if (this.hasCloseBtn) { + 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 = $(``); + 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 = []; + this.eScroll = $(`
`); + this.noticeContainer = ""; + this.scrollY = option.scrollY ?? true; + + this.init(); + } + + init = function () { + this.drawInitScroll(); + this.drawElement(); + + if (this.scrollY) { + this.noticeContainer = this.eScroll; + } else { + this.noticeContainer = this.element; + } + + this.updEleObj(); + } + + drawInitScroll = function () { + if (this.scrollY) { + $(this.eScroll).css("height", "100%"); + $(this.eScroll).css("overflow-y", "auto"); + $(this.element).append(this.eScroll); + } + } + + drawElement = function () { + $(this.element).addClass("yt-notice-block"); + } + + showOneNotice = function (obj = null,append = "prepend") { + if (obj) { + if (append == "prepend") { + $(this.noticeContainer).prepend(obj.container); + } else if (append == "append") { + $(this.noticeContainer).append(obj.container); + } + $(obj.container).toast("show"); + } + } + + hideOneNotice = function (obj = null) { + if (obj) { + let toast = ""; + if (obj.is("div.toast")) { + toast = obj; + } else { + toast = obj.container; + } + + $(toast).toast('dispose'); + + setTimeout(() => { + $(toast).remove(); + + let tarNoticeId = $(obj)[0]._ytNotice.id + let tarNoticeIdx = this.noticeArr.findIndex(x => x.obj.id == tarNoticeId); + if (tarNoticeIdx != -1) { + this.noticeArr[tarNoticeIdx].canShow = false; + } + + this.showNotices(); + }, 500) + + + } + this.updEleObj(); + } + + checkCanShow = function (notice = null) { + let lastNoticeOffset = $(this.noticeContainer).find(".toast").last().offset(); + if ($(this.noticeContainer).find(".toast").last().length == 0) { + return true; + } + + if ($(notice.obj.container).is(":visible")) { + return false; + } + + if (!notice.canShow) { + return false; + } + + if (lastNoticeOffset.top + this.offsetBottom > $(window).height()) { + return false; + } else { + return true; + } + } + + showNotices = function () { + $.each(this.noticeArr, (idx, notice) => { + if (this.checkCanShow(notice)) { + this.showOneNotice(notice.obj,"append"); + } + }) + } + + pushNotice = function (option = {}) { + if (this.noticeArr.findIndex(x => x.obj.id == option.id) == -1) { + let notice = new YTNotice(option); + this.noticeArr.push({ obj: notice, time: (new Date()).getTime(), canShow: true }); + } + this.updEleObj(); + } + + updEleObj = function () { + $(this.element)[0]._noticeBlock = this; + } +} + +$.fn.YTNotice = function (method = "init", ...args) { + let _this = this; + + if (method == "init") { + initNoticeBlock(); + } + + let noticeBlock = _this[0]._noticeBlock; + if (!noticeBlock) { + initNoticeBlock(); + noticeBlock = _this[0]._noticeBlock; + } + + if (method == "add") { + + noticeBlock.pushNotice(args[0] ?? {}); + noticeBlock.showNotices(); + + } else if (method == "add_many") { + + args[0].forEach((arg, idx) => { + noticeBlock.pushNotice(arg); + }) + + noticeBlock.showNotices(); + } else if (method == "hide") { + if (args.length == 0) { + noticeBlock = $(_this).parents(".yt-notice-block")[0]._noticeBlock; + noticeBlock.hideOneNotice(this); + } + } + + function initNoticeBlock() { + let option = {}; + option.element = _this; + let noticeBlock = new YTNoticeBlock(option); + } + +}