[Frontend][系統監控] 電梯 class 建置 | 切換2D/3D紐建置

Frontend/_sysElevator.html

@@ -18,6 +18,13 @@
     elevator .elevator-body, elevator .elevator-header {
         padding: 0.7rem;
     }
+
+    .elevator-item {
+        position: absolute;
+        width: 43px;
+        height: 47px;
+        border: 4px solid orange;
+    }
 </style>
 
 <div class="d-flex">
@@ -27,16 +34,23 @@
         <div style="position:relative ">
             <div id="elevatorBlock" class="elevator">
                 <div class="elevator-header">
-
+                    <div class="row m-0 align-items-center p-2 gap-3 btn-group btn-group-toggle">
+                        <button class="btn btn-secondary btn-sm active" data-tabname="floShowType" data-target="#2dDiv">2D
+                        </button>
+                        <button class="btn btn-secondary btn-sm" data-tabname="floShowType" data-target="#3dDiv">3D
+                        </button>
                     </div>
-                <div class="elevator-body d-flex align-items-center justify-content-center h-100 yt-table-container">
+                </div>
-                    <div id="floorTable_wrapper" class="elevator-build-container">
+                <div class="elevator-body d-flex align-items-center justify-content-center yt-table-container">
+                    <div id="2dDiv" data-tabname="floShowType" data-tabrole="child">
                         <table id="floorTable" class="elevator-build m-auto">
                         </table>
                     </div>
+                    <div id="3dDiv" data-tabname="floShowType" data-tabrole="child">
 
                     </div>
                 </div>
+            </div>
             <!--<div>
                 <img src="img/elevator.jpg" class="img-fluid" style="min-height: 520px" />
             </div>-->
@@ -861,8 +875,6 @@
 </div>
 
 <script>
-
-    var floors = ["B2F", "B1F", "1F", "2F", "3F", "4F", "5F", "6F"];
     var eleManTable = null;
     var allDevList = [];
     var subSeviceData = [];
@@ -879,7 +891,7 @@
     var zoomToggle = 3;
     $(function () {
         initChart();
-        setBuildFloor(floors.length, 3);
+        setBuildFloor();
         setCards();
         subDeviceSetStatus();
         setEleManTable();
@@ -1091,52 +1103,24 @@
 
     }
 
+    
+
     //左側 2D 樓層 Table
-    function setBuildFloor(floorCnt = 10, eleCnt = 3) {
+    function setBuildFloor() {
-        let tbody = creEle("tbody");
+        let options = {
-        //樓層從小到大
+            floors: [
-        let rfloors = floors.reverse();
+                { name: "B2F", sort: 0 },
-        let eleCircle = creDiv(["elevator-circle"]);
+                { name: "B1F", sort: 1 },
-        //樓層表格建置
+                { name: "1F", sort: 2 },
-        for (let f = 1; f <= floorCnt; f++) {
+                { name: "2F", sort: 3 },
-            let tr = creEle("tr");
+                { name: "3F", sort: 4 },
-            for (let e = 1; e <= eleCnt + 2; e++) {
+                { name: "4F", sort: 5 },
-                let td = creEle("td");
+                { name: "5F", sort: 6 },
-                if (e == 1) {
+                { name: "6F", sort: 7 },
-                    td.addClass("t-black")
+            ],
-                    td.text(rfloors[f - 1]);
-                } else if (e == eleCnt + 2) {
-                }
-                else {
-                    let div = creDiv(["d-flex", "justify-content-center", "align-items-end", "h-100"]);
-                    div.append(`<i class="fas fa-door-open fs-1-05"></i>`)
-                    td.append(div)
-                }
-                tr.append(td);
-            }
-            tbody.append(tr);
-            $("#floorTable_wrapper").append(eleCircle)
         }
 
-        $("#floorTable").html(tbody);
+        let eleObj = new ElevatorHandler("#floorTable", options);
-
-
-        $("#floorTable tbody tr").each((index, tr) => {
-
-            $(tr).find("td:eq(0)").css("border-left", "0");
-            $(tr).find("td:eq(-1)").css("border-right", "0");
-
-            if (index == 0) {
-                $(tr).find("td").each((index, td) => {
-                    $(td).css("border-top", "0");
-                })
-            } else if (index == $("#floorTable tbody tr").length - 1) {
-                $(tr).find("td").each((index, td) => {
-                    $(td).css("border-bottom", "0");
-                })
-            }
-        })
-
     }
 
     function drawStateTabBlo(devNum) {
@@ -1426,7 +1410,7 @@
                 onEvent("click", `#${scheSelector}`, function () {
                     let devNumPath = devNum.split("_").join("/");
                     let point = $(this).data("point");
-                    let ifHtml = `<iframe src="http://localhost:8080/ord?station:%7Cslot:${devNumPath}/Sch_${point}|view:?fullScreen=true" width="100%" height="100%" style="height:30rem"></iframe>`
+                    let ifHtml = `<iframe src="/ord?station:%7Cslot:${devNumPath}/Sch_${point}|view:?fullScreen=true" width="100%" height="100%" style="height:30rem"></iframe>`
                     $("#bajaSche").html(ifHtml);
                 })
             })
@@ -1443,7 +1427,7 @@
         modalTogDiv("#eleManModal", "#tabDiv", "#detMasDiv", "next", function () {
             subDeviceSetEleManNotSerFloor(master);
             let devNumPath = subData.device_number?.split("_").join("/");
-            let ifHtml = `<iframe src="http://localhost:8080/ord?station:%7Cslot:${devNumPath}/Sch_FLS|view:?fullScreen=true" width="100%" height="100%" style="height:30rem"></iframe>`
+            let ifHtml = `<iframe src="/ord?station:%7Cslot:${devNumPath}/Sch_FLS|view:?fullScreen=true" width="100%" height="100%" style="height:30rem"></iframe>`
             $("#bajaMasSche").html(ifHtml);
 
         })

Frontend/index.html

@@ -2701,8 +2701,8 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                 }
                 $.each(tolSubList, (idx, sub) => {
                     console.log("sub",sub,idx)
-                    //sub.unsubscribeAll();
+                    sub.unsubscribeAll();
-                    //sub.detach();
+                    sub.detach();
                 })
                 $("#app").load(`_${page}.html`, loadCallback);
             })

Frontend/js/site.js

@@ -107,3 +107,103 @@ function creOption(text = null, value = null, data = {}, attr = {}, cls = [], na
     attr = value != null ? attr.value = value : attr;
     return creEle("option", text, id, name, cls, data, attr);
 }
+
+class ElevatorHandler {
+    constructor(ele, option = {}) {
+        this.ele = ele;
+        this.eleId = "";
+        this.eleWra = $("<div></div>");
+        this.speed = 0;
+        this.monStatus = 0;  // 0=no 1=up 2=down
+        this.floorHeight = typeof option.fHeight == "undefined" ? 50 : option.fHeight;
+        this.floorWidth = typeof option.fWidth == "undefined" ? 45 : option.fWidth;
+        this.floors = typeof option.floors == "undefined" ? [{}] : option.floors;
+        this.eleCnt = typeof option.eleCnt == "undefined" ? 3 : option.eleCnt;
+        this.init();
+    }
+
+    init = function () {
+        this.setTabWra();
+        this.setTabFloor();
+    }
+
+    // 設置 wrapper
+    setTabWra = function () {
+        let id = $(this.ele).prop("id");
+        this.eleId = id;
+        if ($(this.ele).parent(".elevator-table-wrapper").length != 0) {
+            $(this.ele).unwrap(".elevator-table-wrapper");
+        }
+        let wrapper = creDiv(["elevator-table-wrapper"], null, `${id}_wrapper`);
+        $(this.ele).wrap(wrapper);
+        this.eleWra = wrapper;
+    }
+
+    // 設置 table 樓層
+    setTabFloor = function () {
+        let _w = this.floorWidth, _h = this.floorHeight;
+        let thead = creEle("thead"), tbody = creEle("tbody");
+        let _floors = this.floors, _ele = this.ele, _eleCnt = this.eleCnt;
+        //樓層從小到大
+        _floors = _floors.oSort("sort").reverse().map(x => x.name);
+
+        let theadTr = creEle("tr");
+        for (let e = 1; e <= _eleCnt + 2; e++) {
+            let th = creEle("th");
+            th.css({ "width": `${_w}px`, "height": `${_h}px` });
+            if (e != 1 && e != _eleCnt + 2) {
+                // 電梯方框
+                let span = creEle("span", null, "elevator-item-" + (e - 1), null, ["elevator-item"]);
+                span.css({ "width": `${_w - 3}px`, "height": `${_h - 3}px`, "top": `1.5px`})
+                th.append(span);
+            }
+            theadTr.append(th);
+        }
+        thead.css("position", "absolute");
+        thead.append(theadTr);
+
+        //樓層表格建置 tbody
+        for (let f = 1; f <= _floors.length; f++) {
+            let tr = creEle("tr");
+            for (let e = 1; e <= _eleCnt + 2; e++) {
+                let td = creEle("td");
+                td.css({ "width": `${_w}px`, "height": `${_h}px` });
+                if (e == 1) {
+                    td.addClass("t-black")
+                    td.text(_floors[f - 1]);
+                } else if (e == _eleCnt + 2) {
+                }
+                else {
+                    let div = creDiv(["d-flex", "justify-content-center", "align-items-end", "h-100"]);
+                    div.append(`<i class="fas fa-door-open fs-1-05"></i>`)
+                    td.append(div)
+                }
+                tr.append(td);
+            }
+            tbody.append(tr);
+        }
+
+        $(_ele).append(thead);
+        $(_ele).append(tbody);
+
+        //表格外圍無框線
+        $(_ele).find("tbody tr").each((index, tr) => {
+
+            $(tr).find("td:eq(0)").css("border-left", "0");
+            $(tr).find("td:eq(-1)").css("border-right", "0");
+
+            if (index == 0) {
+                $(tr).find("td").each((index, td) => {
+                    $(td).css("border-top", "0");
+                })
+            } else if (index == $("#floorTable tbody tr").length - 1) {
+                $(tr).find("td").each((index, td) => {
+                    $(td).css("border-bottom", "0");
+                })
+            }
+        })
+
+    }
+
+
+}

Frontend/js/style.js

@@ -51,6 +51,19 @@ Array.prototype.DistinctBy = function (...otherCol) {
 
     return result;
 }
+Array.prototype.nSort = function () {
+    function compareNumbers(a, b) {
+        return a - b;
+    }
+    return this.sort(compareNumbers);
+}
+
+Array.prototype.oSort = function (key) {
+    function compareNumbers(a, b) {
+        return a[key] - b[key];
+    }
+    return this.sort(compareNumbers);
+}
 BigInt.prototype.toJSON = function () { return this.toString() }
 
 $.fn.classList = function () { return this[0].className.split(/\s+/); };

Frontend/js/yourteam/plugins/yt-tooltip/yt-tooltip.js

@@ -71,7 +71,7 @@ $.fn.YTTooltip = function (option) {
                 obj.tooltipDiv = clone;
                 //顯示 tooltip
                 $(clone).css({ "display": display, "position": "absolute" });
-                obj.onShow ? obj.onShow(clone,obj.ele,obj) : "";
+                
                 //tooltip 高寬
                 let toolWidth = $(clone)[0].offsetWidth;
                 let toolHeight = $(clone)[0].offsetHeight;
@@ -95,7 +95,9 @@ $.fn.YTTooltip = function (option) {
                 } else if (obj.direction == "top" || obj.direction == "bottom"){
                     $(clone).css({ left: offset.left, top: top});
                 }
-
+                setTimeout(function () { 
+                    obj.onShow ? obj.onShow(clone, obj.ele, obj) : "";
+                }, 10)
                 event();
             } else {
                 obj.hideTooltipEvent(tooId);