[Frontend][系統監控] 3D viewer 跑版問題解決 | 電梯 2d 平面圖訂閱串接 | 2D動畫調整

Frontend/_sysElevator.html

@@ -3,7 +3,9 @@
         background-color: #fff;
         min-height: 520px;
     }
-
+    .elevator-table-wrapper {
+        padding:0.8rem;
+    }
     table.elevator-build {
         /*border: 1px double #000;*/
     }
@@ -25,6 +27,20 @@
         height: 47px;
         border: 4px solid orange;
     }
+
+    .elevator-item-toup {
+        border: 4px solid rgba(255,255,255,0);
+        position: absolute;
+        border-bottom: 0;
+        z-index: 2;
+    }
+
+    .elevator-item-todown {
+        border: 4px solid rgba(255,255,255,0);
+        position: absolute;
+        border-top: 0;
+        z-index: 2;
+    }
 </style>
 
 <div class="d-flex">
@@ -35,30 +51,22 @@
             <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="#3dDiv">
+                        <button class="btn btn-secondary btn-sm active" data-tabname="floShowType" data-target="#2dDiv">
-                            3D
-                        </button>
-                        <button class="btn btn-secondary btn-sm" data-tabname="floShowType" data-target="#2dDiv">
                             2D
                         </button>
-                    </div>
+                        <button class="btn btn-secondary btn-sm" data-tabname="floShowType" data-target="#3dDiv">
-                    <div class="row m-0 align-items-center p-2 gap-3 btn-group btn-group-toggle">
+                            3D
-                        <button id="upFloBtn" class="btn btn-secondary btn-sm">
-                            上樓
-                        </button>
-                        <button id="downFloBtn" class="btn btn-secondary btn-sm">
-                            下樓
                         </button>
                     </div>
                 </div>
-                <div class="elevator-body d-flex align-items-center justify-content-center yt-table-container">
+                <div class="elevator-body d-flex align-items-center justify-content-center">
-                    <div id="3dDiv" data-tabname="floShowType" data-tabrole="child">
+                    <div id="2dDiv" class="p-2" data-tabname="floShowType" data-tabrole="child">
-                        <div id="forgeViewer"></div>
-                    </div>
-                    <div id="2dDiv" data-tabname="floShowType" data-tabrole="child">
                         <table id="floorTable" class="elevator-build m-auto">
                         </table>
                     </div>
+                    <div id="3dDiv" class="w-100" data-tabname="floShowType" data-tabrole="child">
+                        <div id="forgeViewer"></div>
+                    </div>
                 </div>
             </div>
             <!--<div>
@@ -886,10 +894,10 @@
 
 <script>
     var eleManTable = null;
-    var allDevList = [];
+    var allDevList = [];       //每個設備
-    var subSeviceData = [];
+    var subSeviceData = [];    //每個設備訂閱點位值
-    var floList = [];
+    var floList = [];          //每個樓層
-    var elevObj = null;
+    var elevObj = null;        //左側 2D 電梯物件
     var subOrdPath = {
         "building_tag": pageAct.buiTag,
         "system_tag": pageAct.sysMainTag,
@@ -903,20 +911,19 @@
     var zoomToggle = 3;
     $(function () {
         initChart();
+        
         setBuildFloor();
         setCards();
         subDeviceSetStatus();
         setEleManTable();
+        console.log("--- load 3d ---");
+        load3DModel();
     })
 
     function getFloDevList() {
 
     }
 
-    $(document).ready(function () {
-        load3DModel();
-    });
-
     //baja 訂閱設備
     function subDeviceSetStatus() {
         myBaja = new subscriptionDevices();
@@ -953,7 +960,7 @@
             }
             //現在樓層
             if (data.point_name == "CP") {
-                $(`#${matchDevice.device_number}_card [name=curFloor]`).text(data.value + "F");
+                $(`#${matchDevice.device_number}_card [name=curFloor]`).text(data.value);
             }
             //往上或往下
             if (getValueByName("RD") == "UP") {
@@ -986,7 +993,9 @@
             if (subData) {
                 subData[data.point_name] = data.value;
             }
+            // 設置燈色、卡片閃爍
             setLightColor();
+            // Card table 更新
             subDeviceSetTable(matchDevice.device_number);
             // 重繪 電梯管理 列表
             reloadEleManTable(setEleManTabDataFromBaja());
@@ -994,8 +1003,6 @@
             subDeviceSetEleManDet(matchDevice.device_number);
             // 電梯管理 不服務樓層 detail
             subDeviceSetEleManNotSerFloor(master);
-
-            console.log(elevObj)
         });
 
     }
@@ -1042,21 +1049,28 @@
 
         function creLight(type = "trueText") {
             let lightType = type == "trueText" ? "bg-success" : "bg-danger";
-            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 } });
+        //左側 2D 電梯物件 樓層資料更新
+        if (elevObj.floors.length != floList.length) {
+            elevObj.floors = floList.map((x, idx) => { return { id: x, name: x, sort: idx + 1 } });
+            elevObj.elevators = allDevList.map((x) => { return { id: x.device_number } });
+            elevObj.curElevFloor[matchDevice.device_number] = subData["CP"];
             elevObj.redraw();
+        } else {
             
+            elevObj.setElevFloor(matchDevice.device_number, subData["CP"]);
+        }
+        elevObj.setEleMovStatus(matchDevice.device_number, subData["RD"] == "UP" ? 1 : subData["RD"] == "DOWN" ? 2 : 0);
         //現在樓層
         if (subData["CP"]) {
-            $(`#imdStaTable_${devNum} [name=curFloor]`).text(subData["CP"] + "F");
+            $(`#imdStaTable_${devNum} [name=curFloor]`).text(subData["CP"]);
         }
         //往上或往下
         if (subData["RD"] == "UP") {
@@ -1127,33 +1141,12 @@
 
     }
 
-    
-
     //左側 2D 樓層 Table
     function setBuildFloor() {
-        let floors = floList.map((x, idx) => { return { id: x, name: x, sort: idx } });
+        elevObj = new ElevatorHandler("#floorTable");
-        let options = {
-            floors: floors,
-            elevators: [
-                {id:"elevator01"},
-            ],
-            curElevFloor: {"elevator01":"1F"}
-        }
-        console.log(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);
-        })
     }
 
+    // Card 即時狀態
     function drawStateTabBlo(devNum) {
         let div = creDiv(["row"]);
         div.append(creDiv(["col-xl-6"]).append(drawImdStaBlock(devNum)))
@@ -1161,6 +1154,7 @@
         return div.outerHtml();
     }
 
+    // Card 即時狀態 - 左側 table
     function drawImdStaBlock(devNum) {
         let tabEle = $(`<table id="imdStaTable_${devNum}" class="table table-bordered table-striped text-center m-0">`);
         let tbody = tabEle.append("<tbody>");
@@ -1215,6 +1209,7 @@
         return tabEle.outerHtml();
     }
 
+    // Card 即時狀態 - 右側 table
     function drawOpeModBlock(devNum) {
         let tabEle = $(`<table id="opeModTable_${devNum}" class="table table-bordered table-striped text-center m-0">`);
         let tbody = tabEle.append("<tbody>");
@@ -1252,6 +1247,7 @@
         return tabEle.outerHtml();
     }
 
+    // 電梯管理 Modal - 資料更新
     function reloadEleManTable(datas) {
 
         let tabCols = eleManTable.context[0].aoColumns.map(x => x.data);
@@ -1266,6 +1262,7 @@
         eleManTable.clear().rows.add(datas).draw();
     }
 
+    // 電梯管理 Modal - table 初始化
     function setEleManTable() {
         let tag = "#eleManTable";
         let datas = [];
@@ -1464,6 +1461,7 @@
         })
     })
 
+     // 電梯管理 Modal 不服務樓層 設定不服務樓層(BAJA)
     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()
@@ -1610,7 +1608,6 @@
         resetData();
     })
 
-
     function initChart() {
         let chartDom = $("#floChart")[0];
         floChart = echarts.init(chartDom, null, { width: 'auto' });
@@ -2284,16 +2281,7 @@
 
     //載入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/css/site.css

@@ -55,6 +55,12 @@ label[id$='-error'].error {
     animation: flashing-c 0.5s linear infinite;
 }
 
+.light-flash-c-bd {
+    --flash-color-1: #ffa100;
+    --flash-color-2: #26272b;
+    animation: flashing-c-bd 0.5s linear infinite;
+}
+
 /* checkbox switch */
 input.toggle:checked::before {
    content: '';
@@ -131,6 +137,23 @@ input.toggle:checked {
     }
 }
 
+@keyframes flashing-c-bd {
+    0% {
+        border-color: var(--flash-color-1);
+    }
+
+    49% {
+        border-color: var(--flash-color-1);
+    }
+
+    50% {
+        border-color: var(--flash-color-2);
+    }
+
+    99% {
+        border-color: var(--flash-color-2);
+    }
+}
 /* ================================================================ */
 /*                             單一方法                             */
 /* ================================================================ */

Frontend/index.html

@@ -2528,15 +2528,15 @@ 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>
 
-    <script src="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/viewer3D.js"></script>
+    
-    <script src="js/forge/forgemodel.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'>

Frontend/js/forge/forgemodel.js

@@ -1,11 +1,50 @@
 var viewer;
 
+// const devices = [
+//     {
+//         id: "Sensor 1",
+//         position: {
+//             x: -22.779729106182415,
+//             y: 5.431043023608719,
+//             z: 4.553068469137088,
+//         },
+//         type: "combo",
+//         sensorTypes: ["temperature", "co2"],
+//         dbId: 1,
+//     },
+//     {
+//         id: "Sensor 2",
+//         position: {
+//             x: 0.20752051811882666,
+//             y: 5.431043023608719,
+//             z: 4.553068469137088,
+//         },
+//         type: "combo",
+//         sensorTypes: ["temperature", "co2"],
+//         dbId: 2,
+//     },
+// ];
+
+// var sensorStyleDefinitions = {
+//     co2: {
+//         url: "https://d2zqnmauvnpnnm.cloudfront.net/assets-1/images/co2.svg",
+//         color: 0xffffff,
+//     },
+//     temperature: {
+//         url: "https://d2zqnmauvnpnnm.cloudfront.net/assets-1/images/thermometer.svg",
+//         color: 0xffffff,
+//     },
+//     default: {
+//         url: "https://d2zqnmauvnpnnm.cloudfront.net/assets-1/images/circle.svg",
+//         color: 0xffffff,
+//     },
+// };
+
 // Initialize sensor values
 //let sensorVals = [];
 let fragProxy;
 var targetFloorZ;
 var elevatorSpeed;
-let bulbLight;
 // for (let i = 0; i < devices.length; i++) {
 //     sensorVals[i] = Math.random();
 // }
@@ -13,13 +52,12 @@ let bulbLight;
 function launchViewer(urn) {
     var options = {
         env: 'AutodeskProduction',
-        getAccessToken: getForgeToken,
+        getAccessToken: getForgeToken
-        language: 'en'
     };
 
     Autodesk.Viewing.Initializer(options, () => {
         viewer = new Autodesk.Viewing.GuiViewer3D(document.getElementById('forgeViewer'));
-        //viewer = new Autodesk.Viewing.Viewer3D(document.getElementById('forgeViewer'));//這是沒有工具列的
+        //viewer = new Autodesk.Viewing.Viewer3D(document.getElementById('forgeViewer'));
         viewer.start();
         var documentId = 'urn:' + urn;
         Autodesk.Viewing.Document.load(documentId, onDocumentLoadSuccess, onDocumentLoadFailure);
@@ -89,61 +127,32 @@ function onDocumentLoadSuccess(doc) {
     //     var currSelection = viewer.getSelection();
     //     var domElem = document.getElementById('id_printer');
     //     domElem.innerText = currSelection[0];
-
-    //    const targetElem = currSelection[0];
-
-    //    const model = viewer.model;
-    //    const instanceTree = model.getData().instanceTree;
-    //    const fragList = model.getFragmentList();
-
-    //    let bounds = new THREE.Box3();
-
-    //    instanceTree.enumNodeFragments(targetElem, (fragId) => {
-    //        let box = new THREE.Box3();
-    //        fragList.getWorldBounds(fragId, box);
-    //        bounds.union(box);
-    //    }, true);
-
-    //    const position = bounds.center();
-    //    console.log(position)
-
     // });
 
-    viewer.addEventListener(Autodesk.Viewing.GEOMETRY_LOADED_EVENT, function (data) {
+    //viewer.addEventListener(Autodesk.Viewing.GEOMETRY_LOADED_EVENT, function () {
-        //var viewer = data.target;
         // var instanceTree = viewer.model.getData().instanceTree;
         // var allDbIdsStr = Object.keys(instanceTree.nodeAccess.dbIdToIndex);
         // var domElem = document.getElementById('all_id');
         // domElem.innerText = allDbIdsStr;
 
-
         // let tree = viewer.model.getData().instanceTree;
         // let nodeId = 10952;
 
         // tree.enumNodeFragments(nodeId, function (frag) {
         //     fragProxy = viewer.impl.getFragmentProxy(viewer.model, frag);
-        //    console.log("p:" + fragProxy.position);
         //     fragProxy.getAnimTransform();
         //     let fragPosition = new THREE.Vector3(0, 0, 0);// 一樓0 二樓15 三樓 26
-        //    fragProxy.position = fragPosition;
+
-        //    fragProxy.updateAnimTransform();
+        //     fragProxy.position = fragPosition
+
+        //     fragProxy.updateAnimTransform()
+
         // });
         // viewer.impl.sceneUpdated(true);
 
-    });//, { once: true, }
+    //});
 
-    //bulbLight = new THREE.PointLight(0xff0000, 20, 2, 1);//0xffee88
-    //bulbLight.position.set(39.33340644836426, 19.965089797973633, 18);//17.880840301513672
-    //bulbLight.castShadow = true;
-    //bulbLight.power = 100;// 110000;
-    //bulbLight.emissiveIntensity = bulbLight.intensity / Math.pow(0.02, 2.0);
-    //viewer.scene.add(bulbLight);
-}
     
-function setLightPower(value) {
-    bulbLight.intensity = (value * 10);
-    viewer.impl.sceneUpdated(true);
-    //bulbLight.power = value;
 }
 
 function setElevatorFloor(floor) {

Frontend/js/n4js/alarmbaja.js

@@ -12,6 +12,39 @@ function addzero(num) {
  * @param {any} alarmClass
  * @param {any} callback
  */
+// function getAlarmByBaja(startDate_millisecond, endDate_millisecond, isRecover, isAck, alarmClass, callback) {
+//     let _sourceTmp;
+//     var _result = "";
+//     var _ss = "";
+//     var _bfName = "";
+//     var _sourceName = "";
+//     var _index = 0;
+//     var _recoverState = isRecover ? "!= null" : "= null";
+//     var _ackState = isAck ? "= 1" : "!= 1";
+
+//     require(['baja!'], function (baja) {
+//         baja.Ord.make("local:|foxs:|alarm:|bql:select timestamp, ackState, alarmClass, alarmClassDisplayName, alarmValue, alarmData, alarmData.sourceName, uuid, alarmData.msgText, alarmData.numericValue, alarmData.presentValue, alarmData.status, alarmData.toState, normalTime from openAlarms where alarmClass = '" + alarmClass + "' and timestamp.millis > " + startDate_millisecond + " and timestamp.millis < " + endDate_millisecond + " and normalTime " + _recoverState + " order by timestamp asc").get()
+//             .then(function (table) {
+//                 return table.cursor({
+//                     each: function (record) {
+//                         _sourceTmp = (record.get('alarmData').get('sourceName')).toString().split('_');
+//                         _bfName = _sourceTmp[1] + "-" + _sourceTmp[4];
+//                         _sourceName = _sourceTmp[7] + "-" + _sourceTmp[8];
+//                         _ss += ', "' + _index + '": {"buildingFloorName_zh":"' + _bfName + '", "uuid":"' + record.get('uuid') + '", "timestamp":"' + record.get('timestamp') + '", "alarmClass":"' + record.get('alarmClass') + '", "sourceName_zh":"' + _sourceName + '", "msgText":"' + record.get('alarmData').get('msgText') + '", "ackState":"' + record.get('ackState') + '", "normalTime":"' + record.get('normalTime') + '"}';
+//                         _index++;
+//                     },
+//                     after: function () {
+//                         _result += '{' + '"count": ' + _index;
+//                         _result += _ss;
+//                         _result += '}';
+//                         if (typeof callback === 'function') {
+//                             callback(_result);
+//                         }
+//                     }
+//                 });
+//             });
+//     });
+// }
 function getAlarmByBaja(startDate_millisecond, endDate_millisecond, isRecover, isAck, alarmClass, callback) {
     let _sourceTmp;
     var _result = "";
@@ -57,6 +90,35 @@ function getAlarmByBaja(startDate_millisecond, endDate_millisecond, isRecover, i
  * @param {any} devicePath
  * @param {any} callback
  */
+// function getOneDeviceAlarmTop10ByBaja(devicePath, callback) {
+//     var _result = "";
+//     var _ss = "";
+//     var _index = 0;
+//     //{ "count":2,"data": [{ "time": "2022/11/14 15:00:00", "errId": "0001", "ackCheck": "未確認", "errReason": "燈泡故障" }, { "time": "2022/11/14 15:00:00", "errId": "0002", "ackCheck": "未確認", "errReason": "燈泡故障" }]}
+//     require(['baja!'], function (baja) {
+//         baja.Ord.make("local:|foxs:|alarm:|bql:select top 10 timestamp, ackState, alarmData, alarmData.sourceName, sourceState, uuid, alarmData.msgText, normalTime where alarmData.sourceName like '%" + devicePath + "%' order by timestamp desc").get()
+//             .then(function (table) {
+//                 return table.cursor({
+//                     each: function (record) {
+//                         if (_index == 0)
+//                             _ss += '{"uuid":"' + record.get('uuid') + '", "msgText":"' + record.get('alarmData').get('msgText') + '", "ackState":"' + record.get('ackState') + '", "timestamp":"' + record.get('timestamp') + '"}';
+//                         else
+//                             _ss += ',{"uuid":"' + record.get('uuid') + '", "msgText":"' + record.get('alarmData').get('msgText') + '", "ackState":"' + record.get('ackState') + '", "timestamp":"' + record.get('timestamp') + '"}';
+//                         _index++;
+//                     },
+//                     after: function () {
+//                         _result += '{' + '"count": ' + _index +', "data":[';
+
+//                         _result += _ss+']';
+//                         _result += '}';
+//                         if (typeof callback === 'function') {
+//                             callback(_result);
+//                         }
+//                     }
+//                 });
+//             });
+//     });
+// }
 function getOneDeviceAlarmTop10ByBaja(devicePath, callback) {
     var _result = "";
     var _ss = "";
@@ -109,6 +171,31 @@ function getOneDeviceAlarmTop10ByBaja(devicePath, callback) {
  * @param {any} systemPath
  * @param {any} callback
  */
+// function getOneSystemAlarmStateByBaja(systemPath, callback) {
+//     var _result = "";
+//     var _ss = "";
+//     var _index = 0;
+
+//     require(['baja!'], function (baja) {
+//         baja.Ord.make("local:|foxs:|alarm:|bql:select alarmData, alarmData.sourceName, sourceState, uuid where alarmData.sourceName like '%" + systemPath + "%' order by timestamp desc").get()
+//             .then(function (table) {
+//                 return table.cursor({
+//                     each: function (record) {
+//                         _ss += ', "' + _index + '": {"uuid":"' + record.get('uuid') + '", "sourceName":"' + record.get('alarmData').get('sourceName') + '", "sourceState":"' + record.get('sourceState') + '"}';
+//                         _index++;
+//                     },
+//                     after: function () {
+//                         _result += '{' + '"count": ' + _index;
+//                         _result += _ss;
+//                         _result += '}';
+//                         if (typeof callback === 'function') {
+//                             callback(_result);
+//                         }
+//                     }
+//                 });
+//             });
+//     });
+// }
 function getOneSystemAlarmStateByBaja(systemPath, callback) {
     var _result = "";
     var _ss = "";

Frontend/js/n4js/historybaja.js

@@ -8,6 +8,32 @@
  * @param {any} company
  * @param {any} callback
  */
+// function getHistoryDataByBaja(devicePath, startDate_millisecond, endDate_millisecond, deviceName, company, callback) {
+//     var _result = "";
+//     var _ss = "";
+//     var _index = 0;
+
+//     require(['baja!'], function (baja) {
+//         baja.Ord.make('local:|foxs:|history:/' + company + '/' + devicePath + '|bql:select * from control:ControlPoint where timestamp.millis > ' + startDate_millisecond + ' and timestamp.millis < ' + endDate_millisecond).get()
+//             .then(function (table) {
+//                 return table.cursor({
+//                     each: function (record) {
+//                         _ss += ', "' + _index + '": {"deviceName":"' + deviceName + '", "value":' + record.get('value') + ', "timestamp":"' + record.get('timestamp') + '"}';
+//                         _index++;
+//                     },
+//                     after: function () {
+//                         _result += '{' + '"count": ' + _index;
+//                         _result += _ss;
+//                         _result += '}';
+//                         if (typeof callback === 'function') {
+//                             callback(_result);
+//                         }
+//                     }
+//                 });
+//             });
+//     });
+// }
+
 function getHistoryDataByBaja(devicePath, startDate_millisecond, endDate_millisecond, deviceName, company, callback) {
     var _result = "";
     var _ss = "";

Frontend/js/site.js

@@ -114,11 +114,11 @@ class ElevatorHandler {
         this.eleId = "";
         this.eleWra = $("<div></div>");
         this.speed = 0.3;
-        this.monStatus = 0;  // 0=no 1=up 2=down
+        this.movStatus = {};  // {id:elevator01,value: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.elevators = typeof option.elevators == "undefined" ? [{ id: "elevator01" }] : option.elevators;
+        this.elevators = typeof option.elevators == "undefined" ? [{}] : option.elevators;  // {id:elevator01}
         this.curElevFloor = typeof option.curElevFloor == "undefined" ? {} : option.curElevFloor;
         this.setTimeout = null;
         this.init();
@@ -130,7 +130,6 @@ class ElevatorHandler {
         if (Object.keys(this.curElevFloor).length != 0) { 
             $.each(Object.keys(this.curElevFloor), (idx, elevKey) => {
                 this.setElevFloor(elevKey,this.curElevFloor[elevKey]);
-
             })
         }
     }
@@ -161,11 +160,17 @@ class ElevatorHandler {
             let th = creEle("th");
             th.css({ "width": `${_w}px`, "height": `${_h}px` });
             if (e != 1 && e != _elevators.length + 2) {
-                let elevId = _elevators[e - 2].id;
+                let elevId = _elevators[e - 2]?.id;
                 // 電梯方框
                 let span = creEle("span", null, "elevator-item-" + (elevId), null, ["elevator-item"]);
+                let spanUp = creEle("span", null, null, null, ["elevator-item-toup"]);
+                let spanDown = creEle("span", null, null, null, ["elevator-item-todown"]);
                 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`})
+                spanUp.css({ "width": `${_w - 3}px`, "height": `${(_h - 3) / 2}px`, "top": `1.5px`, "transition":`transform ${1 / this.speed}s cubic-bezier(0.43, 0.05, 0.62, 1) 0s`})
+                spanDown.css({ "width": `${_w - 3}px`, "height": `${(_h - 3) / 2}px`, "top": `1.5px`, "transition":`transform ${1 / this.speed}s cubic-bezier(0.43, 0.05, 0.62, 1) 0s`,"top":`${1.5 + (_h-3) / 2}px`})
+                th.append(spanUp);
                 th.append(span);
+                th.append(spanDown);
             }
             theadTr.append(th);
         }
@@ -221,25 +226,46 @@ class ElevatorHandler {
         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;
+        let cssEle = [$(`#elevator-item-${elevId}`)[0], $(`#elevator-item-${elevId}`).prev("span.elevator-item-toup")[0], $(`#elevator-item-${elevId}`).next("span.elevator-item-todown")[0]]
         clearTimeout(this.setTimeout); 
-            console.log(this.movStatus)
+        console.log("123",this.movStatus)
-        if (this.movStatus != 0) { 
+        if (this.movStatus[elevId] != 0) { 
-            $(`#elevator-item-${elevId}`).css("transition", `transform ${1 / this.speed}s cubic-bezier(0, 0, 0.62, 1) 0s`);
+            $(cssEle).css("transition", `transform ${1 / this.speed * Math.abs(gapFloor)}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;
         }
+        //if (gapFloor < 0) {
+        //    this.movStatus[elevId] = 2;
+        //} else if (gapFloor > 0) {
+        //    this.movStatus[elevId] = 1;
+        //} else {
+        //    this.movStatus[elevId] = 0;
+        //}
         this.setTimeout = setTimeout(() => {
-            this.movStatus = 0;
+            /*this.movStatus[elevId] = 0;*/
-            $(`#elevator-item-${elevId}`).css("transition", `transform ${1 / this.speed}s cubic-bezier(0.43, 0.05, 0.62, 1) 0s`)
+            $(cssEle).css("transition", `transform ${1 / this.speed * Math.abs(gapFloor)}s cubic-bezier(0.43, 0.05, 0.62, 1) 0s`);
-        }, (1 / this.speed) * 1000)
+            this.setEleUpDownStyle(elevId);
-        $(`#elevator-item-${elevId}`).css("transform", `translateY(${this.floorHeight * (this.floors.length - tarSort)}px)`);
+        }, (1 / this.speed * Math.abs(gapFloor)) * 1000)
+        this.setEleUpDownStyle(elevId);
+        this.curElevFloor[elevId] = floId;
+        $(cssEle).css("transition", `transform ${1 / this.speed * Math.abs(gapFloor)}s cubic-bezier(0.43, 0.05, 0.62, 1) 0s`)
+        $(cssEle).css("transform", `translateY(${this.floorHeight * (this.floors.length - tarSort)}px)`);
     }
 
+    setEleMovStatus = function (elevId,status) {
+        this.movStatus[elevId] = status;
+    }
+
+    setEleUpDownStyle = function (elevId) {
+        if (this.movStatus[elevId] == 1) {
+            $(`#elevator-item-${elevId}`).prev("span.elevator-item-toup").addClass("light-flash-c-bd")
+                .css("--flash-color-1", "#44ea8e").css("--flash-color-2", "rgba(255,255,255,0)");
+        } else if (this.movStatus[elevId] == 2) {
+            $(`#elevator-item-${elevId}`).next("span.elevator-item-todown").addClass("light-flash-c-bd")
+                .css("--flash-color-1", "#44ea8e").css("--flash-color-2", "rgba(255,255,255,0)");
+        } else {
+            $(`#elevator-item-${elevId}`).prev("span.elevator-item-toup").removeClass("light-flash-c-bd");
+            $(`#elevator-item-${elevId}`).next("span.elevator-item-todown").removeClass("light-flash-c-bd");
+        }
+    }
 
     setCurElevFloor = function (elevId,floId) {
         this.curElevFloor[elevId] = floId;
@@ -248,6 +274,11 @@ class ElevatorHandler {
     redraw = function () {
         $(this.ele).empty();
         this.setTabFloor();
+        if (Object.keys(this.curElevFloor).length != 0) {
+            $.each(Object.keys(this.curElevFloor), (idx, elevKey) => {
+                this.setElevFloor(elevKey, this.curElevFloor[elevKey]);
+            })
+        }
     }
     
 }

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

@@ -19,12 +19,13 @@ $(function () {
  * 初始全頁面 yt tab
  * */
 function initTabsByEle() {
+    _ytTabInited = [];
     $("[data-tabname][data-target]:not([data-tabrole=child])").each(function (index, value) {
         let tabName = $(value).data("tabname");
-        if (_ytTabInited.indexOf(tabName) == -1) {
+        
         var ytTab = new YT.Tab({ tabName: tabName })
         _ytTabInited.push(tabName);
-        }
+        
     })
 }
 

Frontend/js/yourteam/yourteam.jquery.datatables.js

@@ -58,7 +58,7 @@ function fnInitJqDataTablesNoData(tag, dataSet = null, columns = null, columnDef
         "columns": columns,
         "aoColumnDefs": columnDefs,
         "stateSave": true,
-        "pagingType": "simple",
+        "pagingType": "full_numbers",
         "destroy": false,
         "initComplete": initComplete,
         "drawCallback": fnDrawCallBack,