[Frontend][系統監控] 左方選單彈出程序建置

Frontend/_dashboard.html

@@ -240,13 +240,7 @@
 
     var tarElePath = '';
     var sysSubList = [];
-    var floList = [];          //每個樓層
-    var subSeviceData = [];    //每個設備訂閱點位值
-    var allEleDevList = [];
     var viewer3DNodeIds = [];
-    var elev3DBind = {};
-    var elev3DOption = {};
-    var elev3DObj = [];
     var timeOuters = [];
     var eveDayElecChart = null;
     var eveWeekElecChart = null;
@@ -288,25 +282,25 @@
     $(document).ready(function () {
         show3DModel();
         getSubList();
-        getElevData();
         getFirstEletric();
-        subDeviceSetStatus();
         timeOutGetData();
     });
 
     function demoSubList() {
         let isExiNames = $("#sysSubBtnList .dev-group button[id^=sysSubCardBtn]").toArray().map(x => $(x).text());
         let strHtml = ``;
+
         $.each(tempSysSubText, (idx, obj) => {
-            if (isExiNames.indexOf(obj.text) == -1) {
+            if (isExiNames.indexOf(obj.text) == -1 && $("#sysSubBtnList .dev-group").length < 12) {
                 let iconObj = sysIconList.filter(x => x.mainSys == obj.mainSys && x.subSys == obj.subSys)[0];
-                strHtml += `<div class="btn-group btn-group-lg col-lg-3 mb-4 dev-group">
+                strHtml = `<div class="btn-group btn-group-lg col-lg-3 mb-4 dev-group">
                             <button name="topFunBtn" data-page="alert" type="button" class="btn btn-secondary col-4"><i class="${iconObj.iconClass || "fal fa-hdd"} fa-2x py-2"></i></button>
                             <button id="sysSubCardBtn${obj.subSys}" type="button" class="btn btn-secondary" data-id="${obj.subSys}">${obj.text}</button>
                         </div>`;
+                $("#sysSubBtnList").append(strHtml);
             }
         })
-        $("#sysSubBtnList").append(strHtml);
+        
     }
 
     //取得 左下方 各系統小類
@@ -386,10 +380,8 @@
         let yesterday = displayDate(getTimeByType(null, -1), "date").replaceAll("/", "-") + "T00:00:00";
         let tomorrow = displayDate(getTimeByType(null, 1), "date").replaceAll("/", "-") + "T00:00:00";
 
-
-
         // 今日用電量
-        getElectricMeterDayDataByBaja(devNum + "_kWh_tot", n4Sup, today, tomorrow, (data) => {
+        getElectricMeterDayDataByBaja(devNum + "_KWH", n4Sup, today, tomorrow, (data) => {
             let result = data?.data[0]?.sum;
             result = result ? parseFloat(result).toFixed(2) : 0;
             $("#todayUseElec").text(result);
@@ -397,7 +389,7 @@
         })
 
         // 今日用電量 (每小時)
-        getElectricMeterHourDataByBaja(devNum + "_kWh_tot", n4Sup, yesterday, tomorrow, (data) => {
+        getElectricMeterHourDataByBaja(devNum + "_KWH", n4Sup, yesterday, tomorrow, (data) => {
 
             let todayData = data.data.filter(x => x.timestamp.$date.$year == getTimeByType("year") && x.timestamp.$date.$month == getTimeByType("month") && x.timestamp.$date.$day == getTimeByType("date"));
             let yesData = data.data.filter(x => x.timestamp.$date.$year == getTimeByType("year", -1) && x.timestamp.$date.$month == getTimeByType("month", -1) && x.timestamp.$date.$day == getTimeByType("date", -1));
@@ -406,7 +398,7 @@
         })
 
         // 昨日用電量
-        getElectricMeterDayDataByBaja(devNum + "_kWh_tot", n4Sup, yesterday, today, (data) => {
+        getElectricMeterDayDataByBaja(devNum + "_KWH", n4Sup, yesterday, today, (data) => {
             let result = data?.data[0]?.sum;
             result = result ? parseFloat(result).toFixed(2) : 0;
             $("#yesUseElec").text(result);
@@ -414,7 +406,7 @@
         })
 
         // 本週與上週用電量 (每天)
-        getElectricMeterDayDataByBaja(devNum + "_kWh_tot", n4Sup, prevTwoWeek, tomorrow, (data) => {
+        getElectricMeterDayDataByBaja(devNum + "_KWH", n4Sup, prevTwoWeek, tomorrow, (data) => {
             let curDay = (new Date()).getDay() == 0 ? 7 : (new Date()).getDay();
             let curWeekData = data.data.filter(x => strToDate(displayDate(new Date(), "date"), null, 0 - (curDay - 1)) <= strToDate(x.timestamp.$cEncStr));
             let prevWeekData = data.data.filter(x => strToDate(displayDate(new Date(), "date"), null, 0 - 7 - (curDay - 1)) <= strToDate(x.timestamp.$cEncStr) && strToDate(new Date(), null, 0 - 7) >= strToDate(x.timestamp.$cEncStr));
@@ -746,32 +738,6 @@
         })
     }
 
-    // 取得電梯資料
-    function getElevData() {
-        let url = baseApiUrl + "/api/Device/GetDeviceList";
-        let sendData = {
-            sub_system_tag: "EL",
-            building_tag: pageAct.buiTag,
-        };
-        objSendData.Data = sendData;
-        ytAjax = new YourTeam.Ajax(url, objSendData, function (res) {
-            if (!res || res.code != "0000" || !res.data) {
-
-            } else {
-                $.each(res.data, (index, floObj) => {
-                    let masters = floObj.device_list.map(x => x.device_number?.split("_")[5]).Distinct();
-                    $.each(masters, (idx, master) => {
-                        floObj.device_list.filter(x => x.device_number?.split("_")[5] == master).forEach((devObj) => {
-                            allEleDevList.push(devObj);
-                            allEleDevList = allEleDevList.oSort("priority");
-                        })
-                    })
-                })
-
-            }
-        }, null, "POST").send();
-    }
-
     //function timeOutGetData() {
     //    let timeOut3s = setInterval(() => {
     //        getAlarmSub();
@@ -784,155 +750,24 @@
 
     function show3DModel() {
         launchViewerNoTools(pageAct.urn, (viewer) => {
-            let nodeIds = allEleDevList.filter(x => !isNaN(parseInt(x.forge_dbid))).map(x => { return { devNum: x.device_number, nodeId: parseInt(x.forge_dbid) } });
+            let elevOption = {
+                selector: "#forgeViewer",
+                viewer: viewer,
+                ordPath: {
+                    "area_tag": pageAct.AreaTag,
+                    "building_tag": pageAct.buiTag,
+                },
+            }
 
-            $.each(nodeIds, (idx, item) => {
-                elev3DBind[item.devNum] = item.nodeId;
-            })
-            nodeIds = nodeIds.map(x => x.nodeId);
-            $.each(nodeIds, function (idx, node) {
-                let options = {
-                    element: $("#forgeViewer"),
-                    viewer: viewer,
-                    nodeId: node,
-                    floorHeight: elev3DOption.floorHeight ?? [],
-                    inited: function () {
-
-                    }
-                }
-                let elevator3DObj = new elevator3D(options);
-                let devNum = Object.keys(elev3DBind).filter(x => elev3DBind[x] == node)[0];
-                let subData = subSeviceData.filter(x => x.device_number == devNum)[0];
-
-                if (elev3DObj.filter(x => x.nodeId == node).length == 0) {
-                    elev3DObj.push({ id: devNum, nodeId: node, obj: elevator3DObj });
-                }
-
-                if (subData) {
-                    let elevObj = elev3DObj.filter(x => x.nodeId == node)[0];
-                    if (!elevObj.id) {
-                        elevObj.id = devNum;
-                    }
-                    elevObj.obj = Object.assign(elevObj, elevator3DObj ?? {})
-                    elevObj.obj.init(function () {
-                        let frags = elevObj.obj.fragProxys.filter(x => x.nodeId == node);
-                        frags.forEach((fragProxy) => {
-                            fragProxy.frag.position.z = elev3DOption.floorHeight.filter(x => x.floor == subData["CP"])[0]?.height ?? 0;
-                            fragProxy.frag.updateAnimTransform()
-                        })
-                        elevObj.obj.viewer.impl.sceneUpdated(true);
-                    })
-
-
-                }
-            })
+            // 電梯移動訂閱程序載入
+            let forge3DElev = new Forge3DElevFull(elevOption);
+            forge3DElev.bajaEndCallback = function () {
+                endPageLoading();
+            }
+            forge3DElev.init();
         });
     }
 
-    function subDeviceSetStatus() {
-        let subOrdPath = {
-            "area_tag": pageAct.AreaTag,
-            "building_tag": pageAct.buiTag,
-            "system_tag": "ELEV",
-            "name_tag": "EL",
-        };
-        myBaja = new subscriptionDevices();
-        myBaja.setSubscribeDevicesByBql(subOrdPath);
-        myBaja.setSubscribeDevicesCallBack(function (data) {
-
-            if (allEleDevList.length == 0) {
-                return false;
-            }
-            data.device_number = data.device_number_full;
-            let matchDevice = allEleDevList.filter(x => x.device_number == data.device_number)[0];
-            let master = matchDevice?.device_number.split("_")[5];
-
-            if (!matchDevice) {
-                return;
-            }
-            
-            if (data.point_name == "CP") {
-                if (elev3DObj.length != 0) {
-                    let elevObj = elev3DObj.filter(x => x.nodeId == elev3DBind[matchDevice.device_number])[0];
-                    if (elevObj && elevObj.id) {
-                        elevObj.obj.setElevatorFloor(data.value)
-                        elevObj.obj.movElevator();
-                    }
-                }
-            }
-
-            //將訂閱值塞入 subSeviceData
-            if (subSeviceData.findIndex(x => x.device_number == matchDevice.device_number) == -1) {
-                let obj = {};
-                obj.device_number = matchDevice.device_number;
-                subSeviceData.push(obj)
-            }
-
-            let subData = subSeviceData.filter(x => x.device_number == matchDevice.device_number)[0];
-
-            if (subData) {
-                subData[data.point_name] = data.value;
-            }
-
-        });
-        myBaja.setSubscribeDeviceEndCallBack(function (data) {
-
-            let devNumArr = data.map(x => { return { devNum: x.device_number_full, priority: allEleDevList.filter(y => y.device_number == x.device_number_full)[0]?.priority } }).DistinctBy("devNum");
-            devNumArr = devNumArr.oSort("priority");
-            $.each(devNumArr, (idx, devObj) => {
-                devNum = devObj.devNum;
-                let subData = subSeviceData.filter(x => x.device_number == devNum)[0];
-
-                if (subData) {
-                    //// 左側 3D 電梯 nodeID 與 device_number match
-                    //if (Object.keys(elev3DBind).indexOf(devNum) == -1 && viewer3DNodeIds.length != 0) {
-                    //    elev3DBind[devNum] = viewer3DNodeIds[Object.keys(elev3DBind).length];
-                    //}
-                    // 左側 3D 電梯 Viewer Option 設置
-                    /*elev3DOption.nodes = Object.keys(elev3DBind).map(x => elev3DBind[x]);*/
-
-                    floList = Object.keys(subData).filter(x => x.startsWith("SP_FLS_")).map(x => x?.split("SP_FLS_")[1]);
-
-                    elev3DOption.nodeId = elev3DBind[devNum];
-                    elev3DOption.floorHeight = floList.map((x) => { return { floor: x } });
-                    elev3DOption.floorHeight.forEach((floObj, idx) => {
-                        if (floObj.floor.startsWith("B")) {
-                            let floor = parseInt(floObj.floor.split("B")[1].split("F")[0]);
-                            floObj.height = floor * -13;
-                        } else {
-                            let floor = parseInt(floObj.floor.split("F")[0]);
-                            if (floor == 1) {
-                                floObj.height = 0;
-                            } else if (floor == 2) {
-                                floObj.height = 14.75;
-                            } else {
-                                floObj.height = (14.75 + ((floor - 2) * 9.75));
-                            }
-                        }
-                    })
-
-                    if (elev3DObj.length != 0) {
-                        let elevObj = elev3DObj.filter(x => x.nodeId == elev3DBind[devNum])[0];
-                        if (!elevObj.id) {
-                            elevObj.id = devNum;
-                        }
-                        elevObj.obj = Object.assign(elevObj.obj, elev3DOption);
-                        elevObj.obj.init(function () {
-                            let frags = elevObj.obj.fragProxys.filter(x => x.nodeId == elev3DBind[devNum]);
-                            frags.forEach((fragProxy) => {
-                                fragProxy.frag.position.z = elev3DOption.floorHeight.filter(x => x.floor == subData["CP"])[0]?.height ?? 0;
-                                fragProxy.frag.updateAnimTransform();
-                            })
-                            elevObj.obj.viewer.impl.sceneUpdated(true);
-                        });
-                    }
-                }
-            })
-
-        })
-    }
-
-
     $(window).on("timeout:5m", function () {
         console.log("五分鐘更新")
         getElectricBaja();

Frontend/css/site.css

@@ -223,6 +223,22 @@ input:-webkit-autofill {
     grid-template-columns: var(--c-grid-temp-col);
 }
 
+.vakata-context, .vakata-context ul { background-color: #3f3f3f; box-shadow: 2px 2px 2px #111111; }
+.vakata-context li > a { color: white; text-shadow: 1px 1px 0 #4b4b4b; }
+.vakata-context .vakata-context-hover > a { background-color: #666666; box-shadow: 0 0 2px #2f2f2f; }
+.vakata-context li > a:hover { background-color: #636363; box-shadow: 0 0 2px #2f2f2f; }
+
+.yt-left-navbar { position: fixed; left: 0; top: 0; height: 100%; z-index: 10; background-color: var(--theme-fusion-900); width: auto; max-width: 300px; margin-top: 4.125rem; }
+.yt-navbar-content ul { padding: 1rem 0rem; list-style-type: none; }
+.yt-navbar-content ul li { position: relative; display: flex; flex-wrap: wrap; }
+.yt-navbar-content ul li a { font-size: 0.9rem; padding: 0.75rem 2rem; position: relative; width: 100%; }
+.yt-navbar-content ul li a:hover { background-color: var(--theme-fusion-600); }
+.yt-navbar-content ul li a:active, .yt-navbar-content ul li a.active { background-color: var(--theme-fusion-500); }
+
+@media screen and (max-width: 576px){
+    .yt-left-navbar { width: 100%; max-width: 100%; margin-top: 0; }
+}
+
 @keyframes lds-ring {
     0% {
         transform: rotate(0deg);
@@ -287,14 +303,10 @@ input:-webkit-autofill {
     }
 }
 /* ================================================================ */
-/*                             單一方法                             */
-/* ================================================================ */
-
-
-/* cursor */
-.cur-def {
-    cursor: default !important;
-}
+    /*                             單一方法                             */
+    /* ================================================================ */
+    /* cursor */
+    .cur-def { cursor: default !important; }
 
 .cur-poi {
     cursor: pointer !important;

Frontend/js/forge/forgemodel.js

@@ -4,8 +4,7 @@ let fragProxy;
 var targetFloorZ;
 var elevatorSpeed;
 var selector = "#forgeViewer";
-var myDataList;
-var lightList = [];//燈光清單
+let myDataList;
 var levels;//剖面用
 var lowerIdx;//剖面的下方樓層
 var upperIdx;//剖面的上方樓層
@@ -82,7 +81,8 @@ function launchViewerForHotspot(urn, callback, _selector = "#forgeViewer") {
     });
 }
 
-function launchViewerNoTools(urn, callback) {
+function launchViewerNoTools(urn, callback, _selector = "#forgeViewer") {
+    selector = _selector;
     var options = {
         env: 'AutodeskProduction',
         getAccessToken: getForgeToken
@@ -319,9 +319,9 @@ function onDocumentLoadSuccess(doc, eleOption) {
         let instanceTree = viewer.model.getData().instanceTree;
         console.log(instanceTree.nodeAccess)
         allDbIdsStr = Object.keys(instanceTree.nodeAccess.dbIdToIndex);
-        getNodeIdByDbIds("【電梯】", (nodeIds) => {
-            $(selector).trigger("autodesk:loaded", nodeIds);
-        });
+        /*getNodeIdByDbIds("【電梯】", (nodeIds) => {*/
+        $(selector).trigger("autodesk:loaded");
+        /*});*/
 
     });
 
@@ -482,6 +482,7 @@ function getAllDbIds(viewer) {
  * Autodesk.Viewing.Document.load() failuire callback.
  */
 function onDocumentLoadFailure(viewerErrorCode) {
+    $(selector).trigger("autodesk:loaded");
     console.error("onDocumentLoadFailure() - errorCode:" + viewerErrorCode);
 }
 
@@ -676,7 +677,15 @@ function hideColor(nodeId) {//顏色改成透明
 
 }
 
-
+//------------------ 紀錄熱點座標 ---------------
+function getHopspotPoint(data) {
+    //var av = Autodesk.Viewing;
+    myDataList = data;
+    //viewer.addEventListener(av.GEOMETRY_LOADED_EVENT, addHotPoint, {
+    //    once: true,
+    //});
+}
+//-------------------- end ----------------------
 
 //------------------- 加入熱點 -----------------
 async function addHotPoint(data) {
@@ -707,13 +716,10 @@ async function addHotPoint(data) {
 
     myDataList.forEach((myData, index) => {
         const dbId = 10 + index;
-        const myPosition = JSON.parse(myData.device_coordinate_3d);
+        const myPosition = myData.position;
         const viewable = new DataVizCore.SpriteViewable(myPosition, style, dbId);
         myData._dbId = dbId;
         viewableData.addViewable(viewable);
-        if (myData.device_number.indexOf("_LT_L1_") > -1) {
-            lightList.push({ dbid: myData.forge_dbid, name: myData.device_number, spotLight: newLight(myPosition) });
-        }
     });
 
     await viewableData.finish();
@@ -726,6 +732,7 @@ async function addHotPoint(data) {
         if (event != undefined && event != null) {
             if (event.dbId >= dbIdStart && event.dbId <= dbIdEnd) {//event.dbId > 0 && event.dbId < 19
                 console.log(`Sprite clicked: ${event.dbId}`);
+                openHotspotModal();
                 for (let i = dbIdStart; i <= dbIdEnd; i++) {
                     changeColorForHotspot(i, false);
                     changeScaleForHotspot(i, false);
@@ -752,6 +759,7 @@ async function addHotPoint(data) {
     //        if (dbIds.length > 0) {
     //            // 處理已選取元件的邏輯
     //            $(selector).trigger("autodesk:click:sprite", event);
+    //            //openHotspotModal();
     //            console.log(`------ name: ${viewer.model.getInstanceTree().getNodeName(dbIds)} , dbId: ${dbIds}`);//, id: ${event.clickInfo.object.id}, position.x: ${event.clickInfo.point.x}, y: ${event.clickInfo.point.y}, z: ${event.clickInfo.point.z}
     //        } else {
     //            // 處理沒有選取元件的邏輯
@@ -796,14 +804,49 @@ async function changeScaleForHotspot(dbId, type = true) {
 
 //------------------- end --------------
 
-//------------------------------ 熱圖 ---------------------------------
-async function loadHeatmaps(model, roomsArr) {
-    const dataVizExtn = await viewer.loadExtension("Autodesk.DataVisualization");
-    var devices = [];
+//----------------- 開關熱點小視窗 ----------------------
+function openHotspotModal() {
+    //var modal = document.getElementById("hotspotModal");
+    //modal.style.display = "block";
+    //$("#pills-register-tab").removeClass("active");
+    //$("#pills-alarm-tab").removeClass("active");
+    //$("#pills-operation-tab").removeClass("active");
+    //$("#pills-login-tab").tab("show");
+}
 
-    myDataList.forEach((myData, index) => {
-        devices.push({ id: index, position: JSON.parse(myData.device_coordinate_3d), sensorTypes: ["temperature", "humidity"] });
-    });
+function closeHotspotModal() {
+    //var modal = document.getElementById("hotspotModal");
+    //modal.style.display = "none";
+
+}
+//------------------ end --------------------------------
+
+//------------------ 熱圖 -------------------------------
+async function loadHeatmaps(model) {
+    const dataVizExtn = await viewer.loadExtension("Autodesk.DataVisualization");
+
+    //取三個空調設備的位置打點
+    const devices = [
+        {
+            id: "Oficina 5",
+            //name: "Oficina-",
+            position: { x: 6.98, y: -19.00, z: 16.86 }, // x: 0, y: 25, z: -2.5      (-4.93, -20.61, 16.86)
+            sensorTypes: ["temperature", "humidity"]
+        },
+        {
+            id: "Oficina 4",
+            //name: "Oficina-",
+            position: { x: 35.85, y: -2.24, z: 16.86 }, // x: 0, y: 25.03, z: -2.52  (23.94, -3.85, 16.86)
+            sensorTypes: ["temperature", "humidity"]
+        },
+        {
+            id: "Oficina 3",
+            //name: "Oficina-",
+            position: { x: 6.98, y: -2.24, z: 16.86 }, // x: 0, y: 25.03, z: -2.52   (-4.93, -3.85, 16.86)
+            sensorTypes: ["temperature", "humidity"]
+        }
+    ];
+    //冷氣N5: (-4.93, -20.61, 16.86), N4: (23.94, -3.85, 16.86), N3: (-4.93, -3.85, 16.86)
 
     // Initialize sensor values
     let sensorVals = [];
@@ -812,9 +855,7 @@ async function loadHeatmaps(model, roomsArr) {
     }
 
     const roomDbIds = [];
-    for (var i = 0; i < roomsArr.length; i++) {
-        roomDbIds.push(roomsArr[i]);
-    }
+    roomDbIds.push(7567);
 
     const {
         SurfaceShadingData,
@@ -839,10 +880,11 @@ async function loadHeatmaps(model, roomsArr) {
 
     // Setup surface shading
     await dataVizExtn.setupSurfaceShading(model, heatmapData);
+
     dataVizExtn.registerSurfaceShadingColors("temperature", [0xff0000, 0x0000ff]);
 
     function getSensorValue(device, sensorType) {
-        return sensorVals[parseInt(device.id)];
+        return sensorVals[parseInt(device.id.slice(-1)) - 1];
     }
 
     dataVizExtn.renderSurfaceShading("Room Panel", "temperature", getSensorValue);
@@ -855,7 +897,95 @@ async function loadHeatmaps(model, roomsArr) {
         dataVizExtn.updateSurfaceShading(getSensorValue);
     }, 2000);
 }
-//------------------------------ end ----------------------------------
+//------------------ end --------------------------------
+async function loadHeatmapsForFloor(model) {
+
+    const dataVizExtn = await viewer.loadExtension("Autodesk.DataVisualization");
+
+    //x: -17.33, y: 51.03, z: -2.52
+    const devices = [
+        {
+            id: "Oficina 5",
+            //name: "Oficina-",
+            position: { x: 6.98, y: -19.00, z: 16.86 }, // x: 0, y: 25, z: -2.5      (-4.93, -20.61, 16.86)
+            sensorTypes: ["temperature", "humidity"]
+        },
+        {
+            id: "Oficina 4",
+            //name: "Oficina-",
+            position: { x: 35.85, y: -2.24, z: 16.86 }, // x: 0, y: 25.03, z: -2.52  (23.94, -3.85, 16.86)
+            sensorTypes: ["temperature", "humidity"]
+        },
+        {
+            id: "Oficina 3",
+            //name: "Oficina-",
+            position: { x: 6.98, y: -2.24, z: 16.86 }, // x: 0, y: 25.03, z: -2.52   (-4.93, -3.85, 16.86)
+            sensorTypes: ["temperature", "humidity"]
+        }
+    ];
+
+    // Initialize sensor values
+    let sensorVals = [];
+    for (let i = 0; i < devices.length; i++) {
+        sensorVals[i] = Math.random();
+    }
+
+    const roomDbIds = [];
+
+    roomDbIds.push(7567);
+
+    const {
+        SurfaceShadingData,
+        SurfaceShadingPoint,
+        SurfaceShadingNode,
+    } = Autodesk.DataVisualization.Core;
+
+    const shadingNode = new SurfaceShadingNode("Room Panel", roomDbIds);
+
+    devices.forEach((device) => {
+        const shadingPoint = new SurfaceShadingPoint(
+            device.id,
+            device.position,
+            device.sensorTypes
+        );
+        shadingNode.addPoint(shadingPoint);
+    });
+
+    const heatmapData = new SurfaceShadingData();
+    heatmapData.addChild(shadingNode);
+    heatmapData.initialize(model);
+
+    // Setup surface shading
+    await dataVizExtn.setupSurfaceShading(model, heatmapData);
+
+    //dataVizExtn.registerSurfaceShadingColors("co2", [0x00ff00, 0xff0000]);
+    dataVizExtn.registerSurfaceShadingColors("temperature", [0xff0000, 0x0000ff]);
+
+    function getSensorValue(device, sensorType) {
+        return sensorVals[parseInt(device.id.slice(-1)) - 1];
+    }
+
+    dataVizExtn.renderSurfaceShading("Room Panel", "temperature", getSensorValue);
+
+    setInterval(() => {
+        // Modify sensor values.
+        for (let i = 0; i < devices.length; i++) {
+            sensorVals[i] = Math.random();
+        }
+        dataVizExtn.updateSurfaceShading(getSensorValue);
+    }, 2000);
+}
+
+//
+async function loadHeatmap() {
+    const model = viewer.model;
+    loadHeatmaps(model);
+}
+
+async function loadHeatmapForFloor() {
+    const model = viewer.model;
+    loadHeatmapsForFloor(model);
+}
 
 //------------ 剖面 ----------------------
 async function getRemoteLevels() {
@@ -909,49 +1039,4 @@ function profile() {
     const lowerCutPlaneParam = this.getCutPlaneParam(lowerIdx, -1);
     this.viewer.setCutPlanes([upperCutPlaneParam, lowerCutPlaneParam]);
 }
-//----------------- end -----------------------------------------------
-//新增燈光
-async function newLight(lightPosition) {
-    //聚光燈
-    spotLight = new THREE.SpotLight(0xff0000, 200, 20, 0.6, 0.5, 10);
-    spotLight.position.set(lightPosition.x, lightPosition.y, lightPosition.z);
-    spotLight.castShadow = false;
-    spotLight.visible = true;
-    spotLight.target.position.set(lightPosition.x, lightPosition.y, lightPosition.z-20);
-    viewer.scene.add(spotLight.target);
-    viewer.scene.add(spotLight);
-    viewer.impl.sceneUpdated(true);
-
-    return spotLight;
-}
-
-//調整燈光參數 setLightValues(13593, 10, 10, 0.1, 0.3, 1, 0xffff00);
-async function setLightValues(dbid, intensity, distance, angle, penumbra, decay, color) {
-    for (var i = 0; i < lightList.length; i++) {
-        if (lightList[i].dbid == dbid) {
-            lightList[i].spotLight.intensity = intensity;
-            lightList[i].spotLight.distance = distance;
-            lightList[i].spotLight.angle = angle;
-            lightList[i].spotLight.penumbra = penumbra;
-            lightList[i].spotLight.decay = decay;
-            
-            var tempcolor = new THREE.Color().setHex(color);
-            lightList[i].spotLight.color = tempcolor;
-            viewer.impl.sceneUpdated(true);
-        }
-    }
-}
-
-
-//======================== 外部呼叫function ===========================
-//紀錄熱點座標
-function getHopspotPoint(data) {
-    myDataList = data;
-}
-
-//呼叫載入熱圖
-async function toLoadHeatmap(roomArr) {
-    const model = viewer.model;
-    loadHeatmaps(model, roomArr);
-}
-//============================= end ===================================
+//----------------- end -----------------------------------------------

Frontend/js/site.js

@@ -179,6 +179,10 @@ function creImg(ele, text = null, id = null, name = null, cls = [], data = {}, a
 function creI(cls = [], data = {}, attr = {}, id = null, name = null, text = null) {
     return creEle("i", text, id, name, cls, data, attr);
 }
+
+function creA(text = null, attr = {}, cls = [], id = null, data = {}, name = null) {
+    return creEle("a", text, id, name, cls, data, attr);
+}
 /**
  * 根據該棟建築底下的'所有'電梯執行緒物件
  * */

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

@@ -0,0 +1,148 @@
+/**
+ * YourTeam 上方 Tab 頁籤
+ * 
+ * 使用方式：
+ * <button type="button" data-tabname="testTab" data-target="testDiv1">頁籤按鈕1</button>
+ * <button type="button" data-tabname="testTab" data-target="testDiv2">頁籤按鈕2</button>
+ * 
+ * <div id="testDiv1" data-tabname="testTab" data-tabrole="child"></div>
+ * <div id="testDiv2" data-tabname="testTab" data-tabrole="child"></div>
+ * */
+var YT = YT || {};
+
+
+$(function () {
+    initNavBarByEle();
+})
+
+/**
+ * 初始全頁面 yt tab
+ * */
+function initNavBarByEle() {
+    /*_ytTabInited = [];*/
+    $(".yt-navbar").each(function (index, value) {
+        let type = null;
+        if ($(value).hasClass("yt-left-navbar")) {
+            type = "left";
+        }
+        let option = { element: value, type: type };
+        let navbar = new YourTeamNavbar(option);
+    })
+}
+
+class YourTeamNavbar {
+    constructor(option = {}) {
+        this.element = option.element;
+        this.type = option.type ?? "left";
+        this.isOpen = false;
+        this.init();
+    }
+
+    init = function () {
+        this.initClose();
+        this.checkIsOpen();
+        $(this.element)[0]._ytNavbar = this;
+        this.chkTrigger();
+    }
+
+    checkIsOpen = function () {
+        if ($(this.element).is(":visible")) {
+            this.isOpen = true;
+        } else {
+            this.isOpen = false;
+        }
+    }
+
+    open = function () {
+        if (this.type == "left") {
+            let curLeft = parseInt($(this.element).css("left").split("px")[0]);
+            if (curLeft >= 0) {
+                $(this.element).css("opacity", 0);
+                $(this.element).show();
+                let width = $(this.element)[0].offsetWidth;
+                $(this.element).css("left",0 -  width);
+                $(this.element).hide();
+                $(this.element).css("opacity", 1);
+            }
+            $(this.element).show();
+            $(this.element).animate({ left: 0}, 200, () => {
+                this.checkIsOpen();
+            })
+        }
+       
+    }
+
+    close = function () {
+        let width = $(this.element)[0].offsetWidth;
+        if (this.type == "left") {
+            $(this.element).animate({ left: 0 - width }, 200, () => {
+                $(this.element).hide();
+                this.checkIsOpen();
+            })
+        }
+    }
+
+    initClose = function () {
+        debugger
+        let width = $(this.element)[0].offsetWidth;
+        if (this.type == "left") {
+            $(this.element).css("left", 0 - width);
+            $(this.element).hide();
+        }
+    }
+
+    toggle = function () {
+        if (this.isOpen) {
+            this.close();
+        } else {
+            this.open();
+        }
+    }
+
+    chkTrigger = function () {
+        $("[data-toggle=navbar]").each((idx, ele) => {
+            let target = $(ele).data("target");
+            if ($(this.element)[0] == $(target)[0]) {
+                $(ele).off("click").on("click", () => {
+                    this.toggle();
+                })
+            }
+        })
+    }
+
+}
+
+$.fn.YTNavbar = function (method) {
+    let nbObj = $(this)[0]._ytNavbar;
+    let target = $(this).data("target");
+    if (!nbObj && $(target).length != 0) { 
+        nbObj = $(target)[0]._ytNavbar;
+    }
+
+    if (!nbObj) return this;
+
+    if (method == "show") {
+        nbObj.open();
+    } else if (method == "hide") {
+        nbObj.close();
+    } else if (method == "init") {
+        nbObj.init();
+    }
+
+    return nbObj;
+    
+}
+
+function getTogNavbar() {
+    $("[data-toggle=navbar]").each((idx, ele) => {
+        let target = $(ele).data("target");
+
+        $(ele).off("click").on("click", function () {
+            let ngObj = $(target)[0]._ytNavbar;
+            ngObj.toggle();
+        })
+    })
+
+}
+
+YT.NavBar = YT.NavBar || YourTeamNavbar;