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

Frontend/_sysElevator.html

@@ -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");
             }
         }
         //現在樓層

Frontend/_sysMonAll.html

@@ -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() : "";
             }

Frontend/_sysMonFloor.html

@@ -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();
 
-            
         });
     }
 

Frontend/index.html

@@ -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++;
                 })
 
             }
@@ -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 ↑
             //==============================================================================
@@ -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>

Frontend/js/forge/forgemodel.js

@@ -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);
 }
 
 //------------------- 加入熱點 -----------------

Frontend/js/site.js

@@ -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 電梯

Frontend/js/style.js

@@ -1427,8 +1427,12 @@ 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);
+    }
 }
 
 /**