[Frontend] 系統監控 - 電梯動畫建置 | 電梯 class 包裝調整

Frontend/_sysElevator.html

@@ -1,7 +1,7 @@
 <style>
     .elevator {
         background-color: #fff;
-        height: 520px;
+        min-height: 520px;
     }
 
     table.elevator-build {
@@ -35,9 +35,19 @@
             <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 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 class="btn btn-secondary btn-sm" data-tabname="floShowType" data-target="#3dDiv">
+                            3D
+                        </button>
+                    </div>
+                    <div class="row m-0 align-items-center p-2 gap-3 btn-group btn-group-toggle">
+                        <button id="upFloBtn" class="btn btn-secondary btn-sm">
+                            上樓
+                        </button>
+                        <button id="downFloBtn" class="btn btn-secondary btn-sm">
+                            下樓
                         </button>
                     </div>
                 </div>
@@ -47,7 +57,7 @@
                         </table>
                     </div>
                     <div id="3dDiv" data-tabname="floShowType" data-tabrole="child">
-
+                        <div id="forgeViewer"></div>
                     </div>
                 </div>
             </div>
@@ -878,6 +888,8 @@
     var eleManTable = null;
     var allDevList = [];
     var subSeviceData = [];
+    var floList = [];
+    var elevObj = null;
     var subOrdPath = {
         "building_tag": pageAct.buiTag,
         "system_tag": pageAct.sysMainTag,
@@ -891,11 +903,15 @@
     var zoomToggle = 3;
     $(function () {
         initChart();
+        
         setBuildFloor();
         setCards();
         subDeviceSetStatus();
         setEleManTable();
+        console.log("--- load 3d ---");
+        load3DModel();
     })
+
     function getFloDevList() {
 
     }
@@ -977,6 +993,8 @@
             subDeviceSetEleManDet(matchDevice.device_number);
             // 電梯管理 不服務樓層 detail
             subDeviceSetEleManNotSerFloor(master);
+
+            console.log(elevObj)
         });
 
     }
@@ -1023,12 +1041,17 @@
 
         function creLight(type = "trueText") {
             let lightType = type == "trueText" ? "bg-success" : "bg-danger";
-            return creEle("span", null, null, null, [lightType, "circle-light"]).outerHtml();
+            debugger
+            return $(creEle("span", null, null, null, [lightType, "circle-light"])).outerHtml();
         }
 
         let masterTag = devNum?.split("_")[5];
 
         let notSerFloors = Object.keys(subData).filter(x => x.startsWith("SP_FLS_") && subData[x] == "trueText").map(x => x?.split("SP_FLS_")[1]);
+        floList = Object.keys(subData).filter(x => x.startsWith("SP_FLS_")).map(x => x?.split("SP_FLS_")[1]);
+        
+        elevObj.floors = floList.map((x, idx) => { return { id: x, name: x, sort: idx } });
+        elevObj.redraw();
 
         //現在樓層
         if (subData["CP"]) {
@@ -1107,20 +1130,27 @@
 
     //左側 2D 樓層 Table
     function setBuildFloor() {
+        let floors = floList.map((x, idx) => { return { id: x, name: x, sort: idx } });
         let options = {
-            floors: [
+            floors: floors,
-                { name: "B2F", sort: 0 },
+            elevators: [
-                { name: "B1F", sort: 1 },
+                {id:"elevator01"},
-                { name: "1F", sort: 2 },
-                { name: "2F", sort: 3 },
-                { name: "3F", sort: 4 },
-                { name: "4F", sort: 5 },
-                { name: "5F", sort: 6 },
-                { name: "6F", sort: 7 },
             ],
+            curElevFloor: {"elevator01":"1F"}
         }
-
+        console.log(options)
-        let eleObj = new ElevatorHandler("#floorTable", options);
+        
+        elevObj = new ElevatorHandler("#floorTable", options);
+        
+        let curSort = 3;
+        onEvent("click", "#upFloBtn", function () {
+            curSort++;
+            elevObj.setElevFloor("elevator01", options.floors.filter(x => x.sort == curSort)[0]?.id);
+        })
+        onEvent("click", "#downFloBtn", function () {
+            curSort--;
+            elevObj.setElevFloor("elevator01", options.floors.filter(x => x.sort == curSort)[0]?.id);
+        })
     }
 
     function drawStateTabBlo(devNum) {
@@ -1433,6 +1463,15 @@
         })
     })
 
+    onEvent("click", "#eleManTable [name^=notSerChk]", function () {
+        require(['baja!'], function (baja) {
+            baja.Ord.make("local:|foxs:|station:|slot:/TPE/B1/ELEV/EL/R2F/NA/ELEV1/N1|bql:select name, displayName, out, out.value, slotPath, parent.name as 'device_number' from control:ControlPoint where name = 'CP' or name = 'RD' or name = 'DS' or name = 'ST' or name = 'LOAD' or name = 'MID' or name = 'HAND' or name = 'IND' or name = 'MD' or name = 'DNO'").get()
+                .then(function (table) {
+                });
+        });
+
+    })
+
     // 切換 modal 內 div 頁面
     function modalTogDiv(modal, div1, div2, type = "next", callback = null) {
         $(modal).find(div1).parent("div").css("overflow", "hidden");
@@ -2241,4 +2280,20 @@
             });
         }
     }
-</script>
+
+    //載入3D模型
+    function load3DModel() {
+        console.log("launchViewer~");
+        /*launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6LW1vZGVsX3Rlc3QxMTIxLyVFMyU4MCU5MFRFU1QlRTMlODAlOTEubndk');*/
+    }
+</script>
+
+
+<!--<link rel="stylesheet" href="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/style.min.css" type="text/css">
+
+
+
+<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>
+<script src="js/init.js"></script>
+<script src="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/viewer3D.js"></script>
+<script src="js/forge/forgemodel.js"></script>-->

Frontend/index.html

@@ -37,6 +37,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
     <link rel="stylesheet" media="screen, print" href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap4.min.css">
     <link rel="stylesheet" href="css/site.css" />
     <link rel="stylesheet" href="css/yourteam/plugins/yt-tooltip/yt-tooltip.css" />
+    <!--<link rel="stylesheet" href="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/style.min.css" type="text/css">-->
 </head>
 <!-- BEGIN Body -->
 <!-- Possible Classes
@@ -2527,11 +2528,16 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
     <!--The order of scripts is irrelevant. Please check out the plugin pages for more details about these plugins below:-->
     <script src="lib/statistics/easypiechart/easypiechart.bundle.js"></script>
 
+    
+
     <!--Bajascript-->
     <script src="js/bajascript/bscriptReq.js"></script>
     <!--<script type='text/javascript' src='/module/js/com/tridium/js/ext/require/require.min.js?version=1496767636459'></script>-->
     <script src='js/bajascript/require.js'></script>
 
+    <!--<script src="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/viewer3D.js"></script>-->
+    <!--<script src="js/forge/forgemodel.js"></script>-->
+
 
     <script type='text/javascript'>
         define('niagaraSystemProperties', function () {
@@ -2543,6 +2549,8 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
     <script src="js/bajascript/require.config.js"></script>
     <script src="js/FileSaver.js"></script>
 
+    
+
     <script>
         /*$('#js-page-content').smartPanel();*/
         var jwt = localStorage.getItem("JWT-Authorization");

Frontend/js/site.js

@@ -113,18 +113,26 @@ class ElevatorHandler {
         this.ele = ele;
         this.eleId = "";
         this.eleWra = $("<div></div>");
-        this.speed = 0;
+        this.speed = 0.3;
         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.elevators = typeof option.elevators == "undefined" ? [{ id: "elevator01" }] : option.elevators;
+        this.curElevFloor = typeof option.curElevFloor == "undefined" ? {} : option.curElevFloor;
+        this.setTimeout = null;
         this.init();
     }
 
     init = function () {
         this.setTabWra();
         this.setTabFloor();
+        if (Object.keys(this.curElevFloor).length != 0) { 
+            $.each(Object.keys(this.curElevFloor), (idx, elevKey) => {
+                this.setElevFloor(elevKey,this.curElevFloor[elevKey]);
+
+            })
+        }
     }
 
     // 設置 wrapper
@@ -143,18 +151,20 @@ class ElevatorHandler {
     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;
+        let _floors = this.floors, _ele = this.ele, _elevators = this.elevators;
         //樓層從小到大
         _floors = _floors.oSort("sort").reverse().map(x => x.name);
 
         let theadTr = creEle("tr");
-        for (let e = 1; e <= _eleCnt + 2; e++) {
+     
+        for (let e = 1; e <= _elevators.length + 2; e++) {
             let th = creEle("th");
             th.css({ "width": `${_w}px`, "height": `${_h}px` });
-            if (e != 1 && e != _eleCnt + 2) {
+            if (e != 1 && e != _elevators.length + 2) {
+                let elevId = _elevators[e - 2].id;
                 // 電梯方框
-                let span = creEle("span", null, "elevator-item-" + (e - 1), null, ["elevator-item"]);
+                let span = creEle("span", null, "elevator-item-" + (elevId), null, ["elevator-item"]);
-                span.css({ "width": `${_w - 3}px`, "height": `${_h - 3}px`, "top": `1.5px`})
+                span.css({ "width": `${_w - 3}px`, "height": `${_h - 3}px`, "top": `1.5px`, "transition":`transform ${1 / this.speed}s cubic-bezier(0.43, 0.05, 0.62, 1) 0s`})
                 th.append(span);
             }
             theadTr.append(th);
@@ -165,13 +175,14 @@ class ElevatorHandler {
         //樓層表格建置 tbody
         for (let f = 1; f <= _floors.length; f++) {
             let tr = creEle("tr");
-            for (let e = 1; e <= _eleCnt + 2; e++) {
+            
+            for (let e = 1; e <= _elevators.length + 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 if (e == _elevators.length + 2) {
                 }
                 else {
                     let div = creDiv(["d-flex", "justify-content-center", "align-items-end", "h-100"]);
@@ -205,5 +216,38 @@ class ElevatorHandler {
 
     }
 
+    setElevFloor = function (elevId, floId) {
+        let curFloId = this.curElevFloor[elevId];
+        let curSort = this.floors.filter(x => x.id == curFloId).map(x => x.sort)[0];
+        let tarSort = this.floors.filter(x => x.id == floId).map(x => x.sort)[0];
+        let gapFloor = tarSort - curSort;
+        clearTimeout(this.setTimeout); 
+            console.log(this.movStatus)
+        if (this.movStatus != 0) { 
+            $(`#elevator-item-${elevId}`).css("transition", `transform ${1 / this.speed}s cubic-bezier(0, 0, 0.62, 1) 0s`);
+        }
+        if (gapFloor < 0) {
+            this.movStatus = 2;
+        } else if (gapFloor > 0) {
+            this.movStatus = 1;
+        } else {
+            this.movStatus = 0;
+        }
+        this.setTimeout = setTimeout(() => {
+            this.movStatus = 0;
+            $(`#elevator-item-${elevId}`).css("transition", `transform ${1 / this.speed}s cubic-bezier(0.43, 0.05, 0.62, 1) 0s`)
+        }, (1 / this.speed) * 1000)
+        $(`#elevator-item-${elevId}`).css("transform", `translateY(${this.floorHeight * (this.floors.length - tarSort)}px)`);
+    }
 
+
+    setCurElevFloor = function (elevId,floId) {
+        this.curElevFloor[elevId] = floId;
+    }
+
+    redraw = function () {
+        $(this.ele).empty();
+        this.setTabFloor();
+    }
+    
 }