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

2022-11-28 18:08:50 +08:00 · 2022-11-28 18:08:50 +08:00 · d1f6cc2782
commit d1f6cc2782
parent b871f5063e
3 changed files with 133 additions and 26 deletions
--- a/Frontend/_sysElevator.html
+++ b/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: [
-                { name: "B2F", sort: 0 },
-                { name: "B1F", sort: 1 },
-                { name: "1F", sort: 2 },
-                { name: "2F", sort: 3 },
-                { name: "3F", sort: 4 },
-                { name: "4F", sort: 5 },
-                { name: "5F", sort: 6 },
-                { name: "6F", sort: 7 },
+            floors: floors,
+            elevators: [
+                {id:"elevator01"},
            ],
+            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 @@
            });
        }
    }
+
+    //載入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>-->
--- a/Frontend/index.html
+++ b/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");
--- a/Frontend/js/site.js
+++ b/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"]);
-                span.css({ "width": `${_w - 3}px`, "height": `${_h - 3}px`, "top": `1.5px`})
+                let span = creEle("span", null, "elevator-item-" + (elevId), null, ["elevator-item"]);
+                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();
+    }
    
 }