diff --git a/Frontend/_sysMonAll.html b/Frontend/_sysMonAll.html
index 72defa2..0e2778f 100644
--- a/Frontend/_sysMonAll.html
+++ b/Frontend/_sysMonAll.html
@@ -74,7 +74,10 @@
                             </div>`;
                 break;
             case 3:
-                strHtml = `<div name="forgeViewer" style="height:85vh;"></div>`;
+                strHtml = `<div class="d-flex mb-4" style="gap:15px">
+                                ${setTopHeatBar()}
+                            </div>
+                            <div name="forgeViewer" style="height:85vh;"></div>`;
                 break;
         }
 
@@ -92,11 +95,12 @@
         }
         myBaja.setSubscribeDevicesByBql(ordPath);
         myBaja.setSubscribeDevicesCallBack(function (data) {
-            
+            console.log(data)
             let matchDevice = allDevList.filter(x => x.device_number == data.device_number_full)[0];
             if (!matchDevice) {
                 return false;
             }
+            console.log(data)
             //將訂閱值塞入 subDeviceData
             if (subDeviceData.findIndex(x => x.device_number == matchDevice.device_number) == -1) {
                 let obj = {};
@@ -142,10 +146,10 @@
         });
 
     }
+
     function lightDevForgeSpotLig(devObj) {
         
-        let position = isJSON(devObj.device_coordinate_3d) ? JSON.parse(devObj.device_coordinate_3d) : {};
-        newLight(position);
+        
     }
 
     // 從設備訂閱更新每個設備卡片即時點位
@@ -211,6 +215,12 @@
         return strHtml;
     }
 
+    // 設置 Forge 3D 溫度條
+    function setTopHeatBar() {
+        let strHtml = `<canvas name="forgeHeatBar" width="200" height="30" style="z-index:9999"></canvas>`;
+        return strHtml;
+    }
+
     // forge 3D 異常點位變紅色
     function setForgeHotSpotColor(device) {
         let subData = subDeviceData.filter(x => x.device_number == device.device_number)[0]
@@ -331,14 +341,19 @@
                        </div>`
         return strHtml;
     }
+
     function iframeResize(obj) {
         obj.style.height = obj.contentWindow.document.documentElement.scrollHeight + 'px';
     }
+
     function show3DModel(urn) {
         $(loadEle).Loading("start");
+        getLightData(allDevList);
         launchViewerForHotspot(urn, (viewer, nodeIds) => {
+            showHeat("[name=forgeHeatBar]");
             let devDbIds = allDevList.map(x => x.forge_dbid);
             /*hideAllObjects(devDbIds);*/
+            
             setTransparentBuilding(0, devDbIds);
             $(loadEle).Loading("close");
 
diff --git a/Frontend/css/site.css b/Frontend/css/site.css
index 8258bc3..a878acc 100644
--- a/Frontend/css/site.css
+++ b/Frontend/css/site.css
@@ -93,6 +93,20 @@ input:-webkit-autofill { background-color: rgba(0, 0, 0, 0.15) !important; }
 .device-wrap .card-body #info, .device-wrap .card-body #errRec, .device-wrap .card-body #opeRec { min-width: 500px; }
 .scrolledTable { overflow-y: auto; clear: both; max-height:100%;}
 
+/*a[data-tabname="topFunBtn"] { color: #fff }
+
+a[data-tabname="topFunBtn"].active { color: #886ab5 }
+a[data-tabname="topFunBtn"]:hover { color: var(--theme-primary-50); }
+
+.userblock {
+    color:#fff;
+}
+.userblock:hover { color: var(--theme-primary-50); }
+.dropdown.show .userblock { color: var(--theme-primary-50) !important; }*/
+.page-header a {color:#fff !important;}
+.page-header a:hover { color: var(--theme-primary-50) !important; }
+.page-header a.active { color: var(--theme-primary-500) !important; }
+.dropdown.show a { color: var(--theme-primary-50) !important; }
 @media screen and (max-width: 576px) { .yt-left-navbar { width: 100%; max-width: 100%; margin-top: 0; }
 }
 
diff --git a/Frontend/index.html b/Frontend/index.html
index b097139..f3eeba6 100644
--- a/Frontend/index.html
+++ b/Frontend/index.html
@@ -180,7 +180,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                     </div>
 
                     <div class="dropdown">
-                        <a class="dropdown-toggle" href="javascript:;" role="button" id="buiActDrop"
+                        <a class="dropdown-toggle fs-1" href="javascript:;" role="button" id="buiActDrop"
                            data-target="buiList" data-toggle="dropdown" aria-haspopup="true">
 
                         </a>
@@ -199,8 +199,11 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                                 <!--<img src="img/demo/avatars/avatar-admin.png" class="profile-image rounded-circle"
                                 alt="Dr. Codex Lantern">-->
                                 <!--you can also add username next to the avatar with the codes below:-->
-                                <span id="usrName" class="ml-1 mr-2 text-truncate text-truncate-header hidden-xs-down"></span>
-                                <i class="ni ni-chevron-down hidden-xs-down"></i>
+                                <div class="row m-0 justify-content-center userblock">
+                                    <i class="fas fa-user-circle fs-1-5 w-100 text-center"></i>
+                                    <span id="usrName" class="text-truncate text-truncate-header hidden-xs-down"></span>
+                                </div>
+                                
                             </a>
                             <div id="logoutList" class="dropdown-menu dropdown-menu-right dropdown-lg">
 
@@ -772,7 +775,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                         "lib/statistics/flot/flot.bundle",
                         "lib/statistics/peity/peity.bundle",
                         "lib/jquery-validation/dist/jquery.validate",
-                        "lib/jquery-validation/dist/additional-methods.min",
+                        /*"lib/jquery-validation/dist/additional-methods.min",*/  /* 會影響 messages_zh_TW 文字呈現 */
                         "lib/jquery-validation/dist/localization/messages_zh_TW",
                         "lib/jquery-ui/jquery-ui.min",
                         "lib/chart.js/Chart.min",
@@ -840,10 +843,11 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                     if (isJSON(sessionStorage.getItem("pageAct"))) {
                         lastPageAct = JSON.parse(sessionStorage.getItem("pageAct"));
                     }
-                    if (lastPageAct.sysSubTag) {
+                    if (lastPageAct.sysSubTag && lastPage == "systemMonitor") {
                         $(`#subSysBtn${lastPageAct.sysSubTag}`).click();
+                        $("#sysMonTopBtn").YTTab("set");
                     } else {
-                        $(`[name=topFunBtn][data-page=${lastPage}]`).click();
+                        $(`[data-tabname=topFunBtn][data-page=${lastPage}]`).YTTab("setAndClick");
                     }
                     
                     /*$(`[name=topFunBtn][data-page=${lastPage}]`).click();*/
@@ -911,12 +915,17 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                 onEvent("click", "[name=topFunBtn]", function () {
                     _ytTabInited = [];
                     let page = $(this).data("page");
-
+                    if (!page) {
+                        return;
+                    }
                     if (page != "systemMonitor") {
                         $("#sysMonBtnList .dropdown-item").removeClass("active");
                         pageAct.sysMainTag = null;
+                        pageAct.sysSubTag = null;
                     } else {
                         setSysTagForPageAct(this);
+                        $("#sysMonTopBtn").YTTab("set");
+                        $(`#subSysBtn${pageAct.sysSubTag}`).YTTab("set");
                     }
                     $.each(tolSubList, (idx, sub) => {
                         sub.unsubscribeAll();
@@ -934,6 +943,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                     }
 
                     getUserInfo();
+                    
                     sessionStorage.setItem("lastPage", page);
                     sessionStorage.setItem("pageAct", JSON.stringify(pageAct));
                     $("#app").load(`_${page}.html`, loadCallback);
@@ -945,6 +955,13 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                     location.href = "/logout";
                 })
 
+                onEvent("click", "#sysMonBtnList a", function (e) {
+                    //pageAct.sysMainTag = $(this).data("subSysObj").main_system_tag;
+                    //pageAct.sysSubTag = $(this).data("subSysObj").sub_system_tag;
+                    //pageAct.sysSubName = $(this).data("subSysObj").full_name;
+                    //pageAct.sysSubObj = $(this).data("subSysObj");
+                    //getDevItem();
+                })
 
                 onEvent("active:change", "#buiList", function (e, actEle) {
                     if (actEle) {
@@ -961,6 +978,12 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                     }
                 })
 
+                onEvent("yt:tab:prechange", "[data-tabname=topFunBtn]", function (e, arg) {
+                    if ($(this)[0].id == "sysMonTopBtn" || !$(this).data("page")) {
+                        arg.cancel = true;
+                    }
+                })
+
                 onEvent("click", "#testsysbtn", function () {
 
                 })
@@ -1460,7 +1483,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
 
                 } else {
                     let strHtml = `<div class="btn-group mx-4">
-                                                        <a href="javascript:;" name="topFunBtn" data-page="dashboard" class="text-center">
+                                                        <a href="javascript:;" name="topFunBtn" data-page="dashboard" data-tabname="topFunBtn" class="text-center">
                                                             <i class="fal fa-home fa-2x"></i><br>首頁
                                                         </a>
                                                         <!--<div class="dropdown-menu">
@@ -1473,7 +1496,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                     $.each(res.data, function (i, v) {
                         if (v.authCode == 'PF1') {
                             strHtml += `<div class="btn-group mx-4" >
-                                                            <a href="javascript:;" id="sysMonTopBtn" class="text-center" data-toggle="navbar" data-target="#sysMonNavbar" aria-haspopup="true" aria-expanded="false">
+                                                            <a href="javascript:;" id="sysMonTopBtn" class="text-center" data-toggle="navbar" data-target="#sysMonNavbar" data-tabname="topFunBtn" aria-haspopup="true" aria-expanded="false">
                                                                 <i class="fal fa-tv fa-2x"></i><br>${v.subName}
                                                             </a>
 
@@ -1482,9 +1505,9 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                             hasMonitor = true;
                         }
                         else {
-                            let icon = v.authCode == 'PF2' ? 'fa-chart-pie' : v.authCode == 'PF3' ? 'fa-chart-area' : v.authCode == 'PF4' ? 'fa-bell' : v.authCode == 'PF5' ? 'fa-server' : v.authCode == 'PF6' ? 'fa-image' : v.authCode == 'PF7' ? 'fa-user' : '';
+                            let icon = v.authCode == 'PF2' ? 'fa-chart-pie' : v.authCode == 'PF3' ? 'fa-chart-area' : v.authCode == 'PF4' ? 'fa-chart-line' : v.authCode == 'PF5' ? 'fa-bell' : v.authCode == 'PF6' ? 'fa-server' : v.authCode == 'PF7' ? 'fa-image' : v.authCode == 'PF8' ? 'fa-user' : '';
                             strHtml += `<div class="btn-group mx-4">
-                                                            <a href="javascript:;" name="topFunBtn" class="dropdown-toggle no-arrow text-center"
+                                                            <a href="javascript:;" name="topFunBtn" data-tabname="topFunBtn" class="dropdown-toggle no-arrow text-center"
                                                                data-page="${v.showView}">
                                                                 <i class="fal ${icon} fa-2x"></i><br>${v.subName}
                                                             </a>
diff --git a/Frontend/js/forge/forgemodel.js b/Frontend/js/forge/forgemodel.js
index a021bc5..bb766d5 100644
--- a/Frontend/js/forge/forgemodel.js
+++ b/Frontend/js/forge/forgemodel.js
@@ -334,7 +334,7 @@ function onDocumentLoadSuccess(doc, eleOption) {
     if (lightDataList != undefined && lightDataList != null && lightDataList.length > 0) {
         lightDataList.forEach((myData, index) => {
             //if (myData.priority == 5) {
-                const position = JSON.parse(myData.device_node_coordinate_3d);
+                const position = JSON.parse(myData.device_coordinate_3d);
                 lightList.push({ dbid: myData.forge_dbid, spotLight: newLight(position) });
             //}
         });
@@ -1167,6 +1167,42 @@ function showAllObjects() {
     }
 }
 
+function showHeat(selector) {
+    const labels = [
+        `${(10).toFixed(2)}${"°C"}`,
+        `${(40 / 2).toFixed(2)}${"°C"}`,
+        `${(30).toFixed(2)}${"°C"}`
+    ];
+    const colorStops = ['blue', 'green', 'yellow', 'red'];
+    createHeatmapRect(labels, colorStops, selector);
+}
+
+function createHeatmapRect(labels, colorStops, selector) {
+    if (!$(selector)[0]) {
+        return;
+    }
+    const context = $(selector)[0].getContext('2d');
+    let i, len;
+    context.clearRect(0, 0, 300, 50);
+    context.fillStyle = 'back';//white
+    for (i = 0, len = labels.length; i < len; i++) {
+        let x = 10 + 280 * i / (len - 1);
+        if (i === len - 1) {
+            x -= context.measureText(labels[i]).width;
+        }
+        else if (i > 0) {
+            x -= 0.5 * context.measureText(labels[i]).width;
+        }
+        context.fillText(labels[i], x, 10);
+    }
+    const gradient = context.createLinearGradient(0, 0, 300, 0);
+    for (i = 0, len = colorStops.length; i < len; i++) {
+        gradient.addColorStop(i / (len - 1), colorStops[i]);
+    }
+    context.fillStyle = gradient;
+    context.fillRect(10, 20, 280, 20);
+}
+
 //======================== 外部呼叫function ===========================
 //紀錄熱點座標
 function getHopspotPoint(data) {
diff --git a/Frontend/js/site.js b/Frontend/js/site.js
index 537eeba..c2b6413 100644
--- a/Frontend/js/site.js
+++ b/Frontend/js/site.js
@@ -368,16 +368,29 @@ function dayToChiDay(num) {
 }
 
 // 取得現在或前後時間，輸出單位依據 type
-function getTimeByType(type = null, cal = 0) {
+function getTimeByType(type = null, cal = 0, unit = "d") {
     let now = new Date();
-    return strToDate(now, type, cal);
+    return strToDate(now, type, cal, unit);
 }
 
 // 取得某當下時間或前後時間，輸出單位依據 type
-function strToDate(text, type = null, cal = 0) {
-    let calDay = function (_d, _cal) {
-        return new Date(_d.getTime() + (cal * 24 * 60 * 60 * 1000));
+function strToDate(text, type = null, cal = 0, unit = "d") {
+    let dec = 24 * 60 * 60 * 1000;
+
+    if (unit == "d") {
+        dec = 24 * 60 * 60 * 1000;
+    } else if (unit == "h") {
+        dec = 60 * 60 * 1000;
+    } else if (unit == "m") {
+        dec = 60 * 1000;
+    } else if (unit == "s") {
+        dec = 1000;
     }
+
+    let calDay = function (_d, _cal) {
+        return new Date(_d.getTime() + (cal * dec));
+    }
+
     let tarDate = new Date(text);
     let result = 0;
     if (type == "year") {
@@ -394,6 +407,23 @@ function strToDate(text, type = null, cal = 0) {
     return result;
 }
 
+function dateRanCutPart(start, end, cutNum) {
+    let sTime = (new Date(start)).getTime();
+    let eTime = (new Date(end)).getTime();
+    let cutTimeArr = [];
+    if (sTime < eTime) return [];
+
+    
+    let partNum = (sTime - eTime) / cutNum;
+    for (let i = eTime; i <= sTime; i = i + partNum) {
+        cutTimeArr.push(i)
+    }
+
+    cutTimeArr.forEach(x => new Date(x));
+
+    return cutTimeArr;
+}
+
 function isJSON(str) {
     try {
         JSON.parse(str);
diff --git a/Frontend/js/style.js b/Frontend/js/style.js
index 5bf799d..edee415 100644
--- a/Frontend/js/style.js
+++ b/Frontend/js/style.js
@@ -307,7 +307,14 @@ function displayDate(dateTime, dateType = "YMdHms", locale = 'zh-TW') {
     if (dateTime) {
         let regex = /^\/Date\((\d+)\)\/$/gm;
 
-        let t = Date.parse(dateTime);  //若從資料庫回傳 /Date(xxxxxxxxxxxxxx)/ DateTime格式 
+        let t = null;  //若從資料庫回傳 /Date(xxxxxxxxxxxxxx)/ DateTime格式 
+
+        if (typeof dateTime == "number" && dateTime > 1000000) {
+            dateTime = new Date(dateTime);
+        } 
+
+        t = Date.parse(dateTime);
+
         if (regex.test(dateTime)) {
             t = parseInt(dateTime.replace(regex, '$1'));
         }
@@ -354,9 +361,30 @@ function displayDate(dateTime, dateType = "YMdHms", locale = 'zh-TW') {
             hour = d.getHours();
             minute = d.getMinutes();
         }
+    
         date = [year, String(month).padStart(2, '0'), String(day).padStart(2, '0')].filter(n => n).join("/");
-        time = [String(hour).padStart(2, '0'), String(minute).padStart(2, '0')].filter(n => n).join(":");
-        result = date.toString() + " " + time.toString();
+      
+        time = [String(hour).padStart(2, '0'), String(minute).padStart(2, '0')];
+        
+        if (dateType != "date" && dateType != "time" && dateType != "datetime") {
+            let showArr = [];
+            if (year) showArr.push(year);
+            if (month) showArr.push(month.toString().padStart(2, '0'));
+            if (day) showArr.push(day.toString().padStart(2, '0'));
+            if (showArr.length != 0) {
+                result += showArr.join("/");
+                showArr = [];
+            }
+            if (hour) showArr.push(hour.toString().padStart(2, '0'));
+            if (minute) showArr.push(minute.toString().padStart(2, '0'));
+            if (second) showArr.push(second.toString().padStart(2, '0'));
+            if (millisecond) showArr.push(millisecond.toString().padStart(3, '0'));
+            if (showArr.length != 0) {
+                result += " " + showArr.join(":");
+            }
+        } else { 
+            result = date.toString() + " " + time.toString();
+        }
 
         if (dateType == "date") {
             result = date.toString();
diff --git a/Frontend/js/yourteam/plugins/yt-navbar/yt-navbar.js b/Frontend/js/yourteam/plugins/yt-navbar/yt-navbar.js
index 47c155a..9f2a40c 100644
--- a/Frontend/js/yourteam/plugins/yt-navbar/yt-navbar.js
+++ b/Frontend/js/yourteam/plugins/yt-navbar/yt-navbar.js
@@ -103,7 +103,7 @@ class YourTeamNavbar {
         $("[data-toggle=navbar]").each((idx, ele) => {
             let target = $(ele).data("target");
             if ($(this.element)[0] == $(target)[0]) {
-                $(ele).off("click").on("click", () => {
+                $(ele).on("click", () => {
                     this.toggle();
                 })
             }
diff --git a/Frontend/js/yourteam/plugins/yt-tab/yt-tab.js b/Frontend/js/yourteam/plugins/yt-tab/yt-tab.js
index f51b490..e66aa46 100644
--- a/Frontend/js/yourteam/plugins/yt-tab/yt-tab.js
+++ b/Frontend/js/yourteam/plugins/yt-tab/yt-tab.js
@@ -33,7 +33,10 @@ function initTabsByEle() {
 class YourTeamTab {
     constructor(option = {}) {
         this.tabName = option.tabName ?? null;
+        this.activeEle = null;
+        this.eventArg = { cancel: false };
         this.init()
+
     }
 
     init = function () {
@@ -44,23 +47,49 @@ class YourTeamTab {
         this.event();
         $(`[data-tabname=${this.tabName}][data-tabrole=child]`).css("display", "none");
         if ($(`[data-tabname=${this.tabName}][data-target].active`).length == 0) {
-            $(`[data-tabname=${this.tabName}][data-target]`).first().trigger("click");
+            let parTabEle = $(`[data-tabname=${this.tabName}][data-target]`).first();
+            if (parTabEle.data("toggle") == "tab" || !parTabEle.data("toggle")) { 
+                $(`[data-tabname=${this.tabName}][data-target]`).first().trigger("click");
+            }
         } else {
             $(`[data-tabname=${this.tabName}][data-target].active`).first().trigger("click");
         }
-
+        
         _ytTabInited.push(this.tabName);
+        this.setThisObj();
+    }
+
+    setThisObj = function () {
+        $(`[data-tabname=${this.tabName}]`).each((idx, ele) => {
+            $(ele)[0]._ytTab = this;
+        })
+    }
+
+    setActItem = function (element) {
+        
+        this.activeEle = element;
+    }
+
+    updActClass = function () {
+        $(`[data-tabname=${this.tabName}]:not([data-tabrole=child])`).removeClass("active");
+        $(this.activeEle).addClass("active");
     }
 
     event = function () {
         let clsObj = this;
 
         // Tab Item 按鈕 click
-        $(`[data-tabname=${this.tabName}]`).off("click").on("click", function (e) {
+        $(`[data-tabname=${this.tabName}]`).on("click", function (e) {
             let target = $(this).data("target");
             let obj = this;
-            $(`[data-tabname=${clsObj.tabName}]:not([data-tabrole=child])`).removeClass("active");
-            $(obj).addClass("active");
+            clsObj.eventArg.cancel = false;
+            $(obj).trigger("yt:tab:prechange", clsObj.eventArg)
+            
+            if (clsObj.eventArg.cancel) {
+                return;
+            }
+            clsObj.activeEle = obj;
+            clsObj.updActClass();
             // 觸發 yt:tab:change事件
             $(obj).trigger("yt:tab:change");
             if (target) {
@@ -80,4 +109,30 @@ class YourTeamTab {
     }
 }
 
+$.fn.YTTab = function (method,...arg) {
+    let tabObj = $(this)[0]._ytTab;
+
+    if (!tabObj) {
+        let tabName = $(this).data("tabname");
+        if (tabName && _ytTabInited.indexOf(tabName) == -1) {
+            let ytTab = new YT.Tab({ tabName: tabName })
+            _ytTabInited.push(tabName);
+            tabObj = ytTab;
+        } else {
+            return this;
+        }
+    }
+    
+    if (method == "set") {
+        tabObj.setActItem(this);
+        tabObj.updActClass();
+    } else if (method == "setAndClick") {
+        tabObj.setActItem(this);
+        $(this).click();
+    }
+
+    return tabObj;
+
+}
+
 YT.Tab = YT.Tab || YourTeamTab;
\ No newline at end of file