Merge branch 'master' of https://gitea.mjm-staging.developers-homelab.net/BIMS/BIMS

2023-03-14 11:56:16 +08:00 · 2023-03-14 11:56:16 +08:00 · 70d691fde3
commit 70d691fde3
parent e3700b63b8 5b496e07b7
25 changed files with 4184 additions and 2768 deletions
--- a/Backend/appsettings.Development.json
+++ b/Backend/appsettings.Development.json
@ -16,8 +16,8 @@
    "MySqlDBConfig": {
      "Server": "FYlY+w0XDIz+jmF2rlZWJw==", //0.201
      "Port": "js2LutKe+rdjzdxMPQUrvQ==",
-      //"Database": "VJB2XC+lAtzuHObDGMVOAA==", //30  
-      "Database": "IgYBsgG2VLKKxFb64j7LOA==", //wsp
+      "Database": "VJB2XC+lAtzuHObDGMVOAA==", //30  
+      //"Database": "IgYBsgG2VLKKxFb64j7LOA==", //wsp
      "Root": "SzdxEgaJJ7tcTCrUl2zKsA==",
      "Password": "FVAPxztxpY4gJJKQ/se4bQ=="
    }
--- a/Backend/wwwroot/forgeDemo.html
+++ b/Backend/wwwroot/forgeDemo.html
@ -275,8 +275,10 @@
            // 0224 電梯 30
            //launchViewer("dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6dmVnb29nemNhdmNia2l0aHl2bHJzdnJjdGg2dHR3eWgtMjAyMzAyX2libXMvJUUzJTgwJTkwJUU1JThGJUIwJUU1JThDJTk3JUU0JUI4JUFEJUU4JThGJUIxJUU1JUE0JUE3JUU2JUE4JTkzJUUzJTgwJTkxQVJDJUU5JTlCJTk5JUU2JUE4JUExJUU1JUJDJThGK01FUCVFNiU4QiU4NiVFNyVCMyVCQiVFNyVCNSVCMV8lRTklOUIlQkIlRTYlQTIlQUYlRTclQjQlQjAlRTclQUYlODAlRTclODklODhfMDIyNC5ud2Q")

+            // 0303
+            launchViewer("dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6dmVnb29nemNhdmNia2l0aHl2bHJzdnJjdGg2dHR3eWgtMjAyMzAyX2libXMvJUUzJTgwJTkwJUU1JThGJUIwJUU1JThDJTk3JUU0JUI4JUFEJUU4JThGJUIxJUU1JUE0JUE3JUU2JUE4JTkzJUUzJTgwJTkxQVJDJUU5JTlCJTk5JUU2JUE4JUExJUU1JUJDJThGK01FUCVFNiU4QiU4NiVFNyVCMyVCQiVFNyVCNSVCMV8lRTklOUIlQkIlRTYlQTIlQUYlRTclQjQlQjAlRTclQUYlODAlRTclODklODhfMDMwMy5ud2Q")
            // 0221 WSP
-            launchViewer("dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6dmVnb29nemNhdmNia2l0aHl2bHJzdnJjdGg2dHR3eWgtMjAyMzAyX2libXMvQmFucWlhbyUyMFRhaXBlaSUyME1haW4lMjBPZmZpY2UtQUxMXzAyMjEubndk")
+            //launchViewer("dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6dmVnb29nemNhdmNia2l0aHl2bHJzdnJjdGg2dHR3eWgtMjAyMzAyX2libXMvQmFucWlhbyUyMFRhaXBlaSUyME1haW4lMjBPZmZpY2UtQUxMXzAyMjEubndk")

        });
        function move1Floor() {
--- a/Frontend/_alert.html
+++ b/Frontend/_alert.html
@ -710,7 +710,7 @@
 				"title": "異常類別",
 				"data": "alarmClass",
 				"render": function (data) {
-					return data.split('_')[0] + "-" + data.split('_')[1];
+					return data.includes("_") ? data.split('_')[0] + "-" + data.split('_')[1] : data;
 				}
 			},
 			{
--- a/Frontend/_dashboard.html
+++ b/Frontend/_dashboard.html
@ -461,7 +461,7 @@
                    }
                }).then(res => res.json())
                .then(data => {
-                    console.log(allAlarmCount)
+                    // console.log(allAlarmCount)
                    const { finish, notfinish } = data.data
                    chartWorOrdFin([finish, notfinish]); // 已完成 未完成
                    chartWorOrdErr([allAlarmCount - (finish + notfinish), finish + notfinish]);
@ -560,10 +560,12 @@
        }

        if (eveDayElecChart == null) {
+            // console.log(eveDayElecChart)
            eveDayElecChart = new Chart(eveDayElecChartCanvas, {
                data: eveDayElecChartData,
                options: eveDayElecChartOptions
            })
+            // console.log(eveDayElecChart)
        } else {
            eveDayElecChart.data.datasets.forEach((dataset) => {
                if (dataset.order == 1) {
@ -863,24 +865,27 @@
        $.each(data.data, (idx, alaObj) => {
            if (alaObj.alarmClass.indexOf("_") != -1) {
                let mainSubSys = alaObj.alarmClass.split("_").slice(0, 2).join("/");
-                const img = $(`.btn-group.dev-group[data-id*='${mainSubSys}'] img`)[0]?.src.split('.')
-                const { length } = img
-                img[length - 1] = 'gif'
+                const img = $(`.btn-group.dev-group[data-id*='${mainSubSys}'] img`)[0]?.src.split('.');
+                if (img?.length > 0) {
+                    img[img.length - 1] = 'gif';
                    $(`.btn-group.dev-group[data-id*='${mainSubSys}'] img`)[0].src = img.join('.')
+                    // console.log($(`.btn-group.dev-group[data-id*='${mainSubSys}'] img`)[0].src)
                    $(`.btn-group.dev-group[data-id*='${mainSubSys}'] img`).addClass("blink");
                }
+            }
        })
        $(`.dev-group img.blink`).each((idx, ele) => {
            let devPath = $(ele).parents(".dev-group").data("id");
            let sysPath = devPath.split("/").slice(3, 5).join("/");
            let alaDevPath = data.data.map(x => x.alarmClass?.split("_").slice(0, 2).join("/"));
            if (alaDevPath.indexOf(sysPath) == -1) {
-                const img = $(`.btn-group.dev-group[data-id*='${sysPath}'] img`)[0]?.src.split('.')
-                const { length } = img
-                img[length - 1] = 'png'
+                const img = $(`.btn-group.dev-group[data-id*='${sysPath}'] img`)[0]?.src.split('.');
+                if (img?.length) {
+                    img[img.length - 1] = 'png';
                    $(`.btn-group.dev-group[data-id*='${sysPath}'] img`)[0].src = img.join('.')
                    $(ele).removeClass("blink");
                }
+            }
        })
    }

@ -898,11 +903,13 @@
            }

            // 電梯移動訂閱程序載入
+            if (elevatorShow) {
                let forge3DElev = new Forge3DElevFull(elevOption);
                forge3DElev.bajaEndCallback = function () {
                    endPageLoading();
                }
                forge3DElev.init();
+            }
        });
    }

--- a/Frontend/_energyManagement.html
+++ b/Frontend/_energyManagement.html
@ -1,5 +1,5 @@
 <main id="js-page-content" role="main" class="page-content">
-    <h1 class="p-2 mb-0">運維管理</h1>
+  <h1 class="p-2 mb-0">能源管理</h1>
  <div class="row">
    <div class="col-12">
      <div class="btn-group mb-3">
@ -277,8 +277,8 @@
            if (type == 0)
            //  && filNotShowSysSub.indexOf(subSysObj.sub_system_tag) == -1
             {
-                            document.querySelector(".elecCompNoDataTitle").textContent = "用電比較";
-                            document.querySelector(".todayElecNoDataTitle").textContent = "今日耗電量 (kWh)";
+              document.querySelector(".elecCompNoDataTitle").textContent= "用電比較";
+              document.querySelector(".todayElecNoDataTitle").textContent= "今日耗電量 (kWh)";
              const full_name = mainSysObj.system_remark.split("-")[1];
              strHtml += `<div class="col-sm-12 col-xl-4 mb-2">
                <div class="card elecCard cur-poi" data-id="${mainSysObj.mainSubTag}" data-name="${mainSysObj.mainSubTag}">
@ -295,9 +295,9 @@
                    </div>
                </div>
            </div>`;
-                        } else if (type == 3 && mainSysObj.mainSubTag == "ELEV_EL") {
-                            document.querySelector(".elecCompNoDataTitle").textContent = "供電比較";
-                            document.querySelector(".todayElecNoDataTitle").textContent = "今日供電量 (kWh)";
+            } else if(type == 3 && mainSysObj.mainSubTag == "ELEV_EL"){
+              document.querySelector(".elecCompNoDataTitle").textContent= "供電比較";
+              document.querySelector(".todayElecNoDataTitle").textContent= "今日供電量 (kWh)";
              

              const full_name = mainSysObj.system_remark.split("-")[1];
@ -814,9 +814,8 @@
                if (!chart.data) return [];
                return chart.data.datasets.map(
                  (dataset, index) => ({
-
                    datasetIndex: index,
-                                        text: `${dataset.label} ${dataset.data[0]} KW`,
+                    text: dataset.label !== "即時功率"?`${dataset.label} ${dataset.data[0]} KW`: `${dataset.label} KW`,
                    fontColor: color.fusion._100,
                    lineDash: dataset.borderDash ? [5, 5] : [],
                    lineWidth: 5,
@ -868,8 +867,8 @@
        data: autDemChartData,
        options: autDemChartOptions,
        plugins: [{
-                    beforeInit: function (chart, args, options) {
-                        chart.legend.afterFit = function () {
+        beforeInit: function(chart, args, options) {
+            chart.legend.afterFit = function() {
        this.height = this.height + 50;
      };
        }
--- a/Frontend/_historyData.html
+++ b/Frontend/_historyData.html
@ -33,7 +33,7 @@
                <div class="col-auto">
                    <div class="form-group">
                        <input class="form-control" id="his_startdate" data-val="" type="date" name="date" value="">
-                        <input class="form-control" id="getmonth" type="month" style="display: none" />
+                        <input class="form-control" id="getmonth" type="month" style="display: none"/>
                    </div>
                </div>
                <div class="col-auto" id="his_enddate" style="display: none">
@ -176,7 +176,7 @@
            $.each(res.data.history_Main_Systems, function (index, val) {
                if (pageAct.mainStatus) {
                    strHtml += `<li>
-                                    <a href="#" data-filter-tags="${val.full_name.toLowerCase()}" data-maintag="${val.main_system_tag}">
+                                    <a href="#" data-filter-tags="${val.full_name.toLowerCase() }" data-maintag="${val.main_system_tag}">
                                        <span class="nav-link-text">${val.full_name}</span>
                                    </a>
                                    <ul style="${index == 0 ? `display:block;` : ``}">`;
@ -188,7 +188,7 @@
                    i2 = (val2.device != null && i2 == null) ? index2 : null;
                    
                    strHtml += `<li>
-                                    <a href="#" data-filter-tags="${val2.full_name.toLowerCase()}"  data-subtag="${val2.sub_system_tag}">
+                                    <a href="#" data-filter-tags="${val2.full_name.toLowerCase() }"  data-subtag="${val2.sub_system_tag}">
                                        <span class="nav-link-text">
                                            ${val2.full_name}
                                        </span>
@ -197,7 +197,7 @@

                    $.each(val2.device, function (index3, val3) {
                        strHtml += `<li data-tabname="hisListItem">
-                                        <a href="#" onClick="setValue('${val3.device_number}', '${val3.full_name}', null)" data-filter-tags="${val3.full_name.toLowerCase()} ${val3.device_serial_tag.toLowerCase()}" data-devnum="${val3.device_number}">
+                                        <a href="#" onClick="setValue('${val3.device_number}', '${val3.full_name}', null)" data-filter-tags="${val3.full_name.toLowerCase() } ${val3.device_serial_tag.toLowerCase()}" data-devnum="${val3.device_number}">
                                            <span class="nav-link-text">
                                                ${val3.full_name}
                                            </span>
@ -276,7 +276,7 @@
 		    callBackFromHistory);
    }

-    function callBackFromHistory(res = '{"count":0,"data":[]}') {
+    function callBackFromHistory(res='{"count":0,"data":[]}') {        
        // console.log("@H1",res)
        res = JSON.parse(res);
        // console.log("@history",res.data)
@ -382,7 +382,7 @@
            date = displayDate(date, type);
            let month = date.split('/')[1];
            let year = date.split('/')[0];
-            let day = date.split('/')[2];
+			         let day= date.split('/')[2];
            return month + "/" + day + "/" + year;
 		}
    }
@ -416,7 +416,7 @@
 				"title": "數值",
                "data": "value",
                "render": function (data) {
-                    if (isNaN(data)) {
+                    if(isNaN(data)){
                        return data
                    }
                    return data.roundDecimal(2);
--- a/Frontend/_operation.html
+++ b/Frontend/_operation.html
@ -8,13 +8,22 @@
 					<div class="btn-group">
 						<button type="button" onclick="setType(2)" class="btn btn-secondary waves-effect waves-themed">維修</button>
 						<button type="button" onclick="setType(1)" class="btn btn-secondary waves-effect waves-themed">保養記錄</button>
-						<button type="button" onclick="setType(null)" class="btn btn-secondary waves-effect waves-themed">廠商資料</button>
+						<button type="button" onclick="setType(null)"
+								class="btn btn-secondary waves-effect waves-themed">
+							廠商資料
+						</button>
 					</div>
 				</div>
 				<div id="setDate" class="col-auto">
 					<div class="btn-group">
-						<button onclick="setDate('tdy')" type="button" class="btn btn-secondary waves-effect waves-themed">今天</button>
-						<button onclick="setDate('ytd')" type="button" class="btn btn-secondary waves-effect waves-themed">昨天</button>
+						<button onclick="setDate('tdy')" type="button"
+								class="btn btn-secondary waves-effect waves-themed">
+							今天
+						</button>
+						<button onclick="setDate('ytd')" type="button"
+								class="btn btn-secondary waves-effect waves-themed">
+							昨天
+						</button>
 					</div>
 				</div>
 				<div class="col-auto">
@ -60,7 +69,7 @@
 						<a href="#" id="newForm" class="btn btn-success" data-toggle="modal" data-target="#opeFirmModal">新增</a>
 						<a href="#" onclick="exportExcel()" class="btn btn-info waves-effect waves-themed">
 							<span class="fal fa-file-excel mr-1"></span>
-							匯出
+							<span>匯出</span>
 						</a>
 					</div>
 					<table id="opeFirmTable" class="table table-bordered table-striped text-center m-0 w-100">
@ -76,7 +85,8 @@
 </main>

 <!-- Modal center 廠商資料 -->
-<div class="modal fade" id="opeFirmModal" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static" data-keyboard="false">
+<div class="modal fade" id="opeFirmModal" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static"
+	 data-keyboard="false">
 	<div class="modal-dialog modal-dialog-centered" role="document">
 		<div class="modal-content">
 			<div class="modal-header">
@ -152,7 +162,8 @@
 </div>

 <!-- Modal center 維修-->
-<div class="modal fade" id="opeRecModal_2" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static" data-keyboard="false">
+<div class="modal fade" id="opeRecModal_2" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static"
+	 data-keyboard="false">
 	<div class="modal-dialog modal-dialog-centered" role="document">
 		<div class="modal-content">
 			<div class="modal-header">
@ -222,12 +233,14 @@
 								<div class="form-control" id="inpStatus_2">
 									<div class="row container">
 										<div class="">
-											<input class="custom-radio-input" type="radio" name="inpSta_2" id="inpSta_2_0" value="0" data-value="0" checked>
+											<input class="custom-radio-input" type="radio" name="inpSta_2" id="inpSta_2_0" value="0"
+												   data-value="0" checked>
 											<label class="form-label" for="inpSta_0">未完成</label>
 										</div>

 										<div class="px-4">
-											<input class="custom-radio-input" type="radio" name="inpSta_2" id="inpSta_2_1" value="1" data-value="1">
+											<input class="custom-radio-input" type="radio" name="inpSta_2" id="inpSta_2_1" value="1"
+												   data-value="1">
 											<label class="form-label" for="inpSta_1">完成</label>
 										</div>
 									</div>
@ -251,7 +264,8 @@
 						<div class="col-md-12">
 							<div class="form-group">
 								<label class="form-label" for="inpDescription_2">結果描述</label>
-								<textarea class="form-control" type="text" id="inpDescription_2" name="inpDescription_2" rows="7"></textarea>
+								<textarea class="form-control" type="text" id="inpDescription_2" name="inpDescription_2"
+										  rows="7"></textarea>
 							</div>
 						</div>
 						<div class="col-md-12">
@ -288,7 +302,8 @@
 </div>

 <!-- Modal center 保養 -->
-<div class="modal fade" id="opeRecModal" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static" data-keyboard="false">
+<div class="modal fade" id="opeRecModal" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static"
+	 data-keyboard="false">
 	<div class="modal-dialog modal-dialog-centered" role="document">
 		<div class="modal-content">
 			<div class="modal-header">
@ -350,12 +365,14 @@
 								<div class="form-control" id="inpStatus">
 									<div class="row container">
 										<div class="">
-											<input class="custom-radio-input" type="radio" name="inpSta" id="inpSta_0" data-value="0" value="0" checked>
+											<input class="custom-radio-input" type="radio" name="inpSta" id="inpSta_0" data-value="0"
+												   value="0" checked>
 											<label class="form-label" for="inpSta_0">未完成</label>
 										</div>

 										<div class="px-4">
-											<input class="custom-radio-input" type="radio" name="inpSta" id="inpSta_1" data-value="1" value="1">
+											<input class="custom-radio-input" type="radio" name="inpSta" id="inpSta_1" data-value="1"
+												   value="1">
 											<label class="form-label" for="inpSta_1">完成</label>
 										</div>
 									</div>
@ -379,7 +396,8 @@
 						<div class="col-md-12">
 							<div class="form-group">
 								<label class="form-label" for="inpDescription">結果描述</label>
-								<textarea class="form-control" type="text" id="inpDescription" name="inpDescription" rows="7"></textarea>
+								<textarea class="form-control" type="text" id="inpDescription" name="inpDescription"
+										  rows="7"></textarea>
 							</div>
 						</div>
 						<div class="col-md-12">
@ -416,7 +434,8 @@
 </div>

 <!-- Modal center 刪除 -->
-<div class="modal fade" id="delModal" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static" data-keyboard="false">
+<div class="modal fade" id="delModal" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static"
+	 data-keyboard="false">
 	<div class="modal-dialog modal-dialog-centered" role="document">
 		<div class="modal-content">
 			<div class="modal-header">
@ -979,7 +998,8 @@
 			loadOpeRecTable();
 	}

-	function exportExcel() {
+	function exportExcel(e) {
+		console.log("export", e)
 		let url = baseApiUrl + "/operation/OpeExportExcel";

 		objSendData.Data = {
@ -987,7 +1007,7 @@
 			startdate: pageAct.startdate == undefined ? null : pageAct.startdate,
 			enddate: pageAct.enddate == undefined ? null : pageAct.enddate,
 		};
-
+		console.log("data", objSendData.Data)
 		ytAjax = new YourTeam.Ajax(url, objSendData, function (rel) {
 			if (rel.code == "0000")
 				location.href = baseApiUrl + "/api/df?path=" + rel.data.split('/')[0] + "&fileName=" + rel.data.split('/')[1] + "&token=" + cookies.get("JWT-Authorization");
@ -1355,12 +1375,18 @@
 				if (!res || res.code != "0000" || !res.data) {

 				} else {
+					pageAct.sysMain = res.data.device_system_category_layer2;
 					pageAct.sysSub = res.data.device_system_category_layer3;
 					pageAct.number = res.data.fix_do_code;
-					selOpeFir();
-					errCodeList();
+
+
+					callbackForErr(JSON.stringify({
+						count: [res.data].length,
+						data: [{ uuid: res.data.error_code }]
+					}));
 					$(pageAct.work_type == "1" ? '#inpNumber' : '#inpNumber_2').val(res.data.formId);
 					$(pageAct.work_type == "1" ? '#inpWorTyp' : '#inpWorTyp_2').val(res.data.work_type);
+					$(pageAct.work_type == "1" ? '#inpErrCode' : '#inpErrCode_2').val(res.data.error_code);
 					$(pageAct.work_type == "1" ? '#inpFixDo' : '#inpFixDo_2').val(res.data.fix_do);
 					$(pageAct.work_type == "1" ? '#inpFixDoCode' : '#inpFixDoCode_2').val(res.data.fix_do_code);
 					$(pageAct.work_type == "1" ? '#inpFixFirm' : '#inpFixFirm_2').val(res.data.fix_firm);
@ -1369,6 +1395,9 @@
 					$(pageAct.work_type == "1" ? '#inpStaTime' : '#inpStaTime_2').val(displayDate(res.data.start_time, 'date').replaceAll('/', '-'));
 					$(pageAct.work_type == "1" ? '#inpNotice' : '#inpNotice_2').val(res.data.notice);
 					$(pageAct.work_type == "1" ? '#inpDescription' : '#inpDescription_2').val(res.data.description);
+					let elemSel = $(pageAct.work_type == "1" ? '#inpFixDoCode' : '#inpFixDoCode_2').find('option:selected');;
+					pageAct.number = elemSel.val();
+					selOpeFir();

 					ope_imgHtml = null;
 					$.each(res.data.lorf, function (i, v) {
@ -1464,17 +1493,18 @@
 	}

 	function callbackForErr(res) {
-		res = JSON.parse(res);
+		res = JSON.parse(res) || res;
+		console.log(res)
 		strHtml = ``;

 		$.each(res.data, function (i, v) {
 			msg = v.msgText != null ? ($.trim(v.msgText.toString()).length > 0 ? v.msgText.split(':')[0] : '') : '';
-			strHtml += `<option value=${v.uuid}>${v.uuid}</option>`;
+            strHtml += `<option value=${v.uuid}>${v.uuid.split("-")[0]}</option>`;
 		});
-
 		if (res.count > 0)
 			$(pageAct.work_type == '1' ? '#inpErrCode' : '#inpErrCode_2').html(strHtml);
-
+		else
+			$(pageAct.work_type == '1' ? '#inpErrCode' : '#inpErrCode_2').html("");
 		$(loadEle).Loading("close");
 	}

--- a/Frontend/_sysElevator.html
+++ b/Frontend/_sysElevator.html
@ -1014,7 +1014,7 @@
        }
        //現在樓層
        if (data.point_name == "CP") {
-            //console.log("電梯樓層", matchDevice.device_number, data.value)
+            console.log("電梯樓層", matchDevice.device_number, data.value)
            $(`#${matchDevice.device_number}_card [name=curFloor]`).text(data.value);
        }

@ -1247,12 +1247,12 @@

    // Card 即時狀態 - 左側 table
    function drawImdStaBlock(devNum) {
-        let tabEle = $(`<table id="imdStaTable_${devNum}" class="table table-bordered table-striped text-center m-0">`);
+        let tabEle = $(`<table id="imdStaTable_${devNum}" class="table table-bordered table-striped text-center m-0" style="min-width: 200px">`);
        let tbody = tabEle.append("<tbody>");
        let rows =
            [
                { id: "devName", text: "號機" },
-                { id: "devNum", text: "Tag Name" },
+                // { id: "devNum", text: "Tag Name" },
                { id: "status", text: "狀態" },
                { id: "group", text: "組別" },
                { id: "weight", text: "載重" },
@ -1302,7 +1302,7 @@

    // Card 即時狀態 - 右側 table
    function drawOpeModBlock(devNum) {
-        let tabEle = $(`<table id="opeModTable_${devNum}" class="table table-bordered table-striped text-center m-0">`);
+        let tabEle = $(`<table id="opeModTable_${devNum}" class="table table-bordered table-striped text-center m-0"  style="min-width: 200px">`);
        let tbody = tabEle.append("<tbody>");
        let rows =
            [
@ -2439,8 +2439,7 @@
    //載入3D模型
    function load3DModel() {
        launchViewer(pageAct.urn, (viewer) => {
-
-
+            document.querySelector("#guiviewer3d-toolbar").style.display = "none";
            let elevOption = {
                selector: "#forgeViewer",
                viewer: viewer,
--- a/Frontend/_sysMonAll.html
+++ b/Frontend/_sysMonAll.html
@ -39,6 +39,7 @@

 <script>
  var allDevList = [];  //全設備清單
+  var alarmDbIdList = []; // 紀錄異常 forge 圓點，避免點擊與異常顏色衝突
  var subDeviceData = [];
  var heatMap = null;
  var buildMenuData = {};
@ -47,7 +48,7 @@

  $(function () {
    getBuildMenu((arr, data) => {
-            // console.log(arr)
+      console.log("系統監控",arr, data)
      buildMenuData = data;
      if (arr.indexOf(4) != -1) {
        getFloDevList(arr[0] == 4 ? "left" : "right");
@ -81,10 +82,12 @@
                            </div>`;
        break;
      case 3:
-                strHtml = `<div class="d-flex mb-4" style="gap:15px">
+        strHtml = `<div class="d-flex mb-4" style="position: relative; gap:15px">
+                                <div name="forgeViewer" style="position: absolute;width: 100%;height:85vh;">
                                ${setTopHeatBar()}
                                  </div>
-                            <div name="forgeViewer" style="height:85vh;"></div>`;
+                            </div>
+                            `;
        break;
    }

@ -137,6 +140,7 @@
      }

      if (data.point_name == "Temp") {
+        console.log("Temp",data.device_number_full, parseInt(data.value))
        heatMap?.changeTemp(data.device_number_full, !isNaN(parseInt(data.value)) ? parseInt(data.value) : 0);
        let devIdx = allDevList.findIndex(x => x.device_number == data.device_number_full);
        allDevList[devIdx]._temp = !isNaN(parseInt(data.value)) ? parseInt(data.value) : 0;
@ -248,8 +252,15 @@
  // forge 3D 異常點位變紅色
  function setForgeHotSpotColor(device) {
    let subData = subDeviceData.filter(x => x.device_number == device.device_number)[0]
-        if (subData && subData[device.device_error_point_name] == device.device_error_point_value && !isNaN(parseInt(device.spriteDbid))) {
-            changeColorForHotspot(parseInt(device.spriteDbid), "error");
+    if (subData && subData[device.device_error_point_name] == device.device_error_point_value && (!isNaN(parseInt(device.spriteDbid)) || !isNaN(parseInt(device._dbId)))) {
+      const _dbId = parseInt(device.spriteDbid) || parseInt(device._dbId)
+      alarmDbIdList = [...alarmDbIdList, _dbId]
+      // console.log("異常", _dbId)
+      changeColorForHotspot(_dbId, "error");
+    } else if (subData[device.device_error_point_name] !== device.device_error_point_value && (!isNaN(parseInt(device.spriteDbid)) || !isNaN(parseInt(device._dbId)))) {
+      const _dbId = parseInt(device.spriteDbid) || parseInt(device._dbId)
+      let index = alarmDbIdList.findIndex(dbId => dbId == _dbId);
+      index !== -1 && alarmDbIdList.splice(index, 1)
    }
  }

@ -375,10 +386,17 @@
    let position = $(`.card.device-wrap[data-number=${devNum}]`).data("position") || "left";
    let width = buildMenuData[position + "_icon_click_url_width"] ? buildMenuData[position + "_icon_click_url_width"] + "px" : "100%";
    let height = buildMenuData[position + "_icon_click_url_height"] ? buildMenuData[position + "_icon_click_url_height"] + "px" : "100%";
-
-        let strHtml = `<div style="width:${width};height:${height};">
+    let strHtml
+if(pageAct.sysSubTag == "C") {
+  strHtml = `<div style="width:${width};height:${height};">
+                            <iframe src="./px/CCTV/TEST_RENDER.mp4" style="width:${width};height:${height};"></iframe>
+                       </div>`
+} else {
+  strHtml = `<div style="width:${width};height:${height};">
                            <iframe src="/ord?station:%7Cslot:/${devPath}|view:?fullScreen=true" style="width:${width};height:${height};"></iframe>
                       </div>`
+}
+
    return strHtml;
  }

@ -389,15 +407,15 @@
  function show3DModel(urn) {
    $(loadEle).Loading("start");
    launchViewerForHotspot(urn, (viewer, nodeIds) => {
-
-            addHotPoint(viewer)
+      // 隱藏 toolbar
+      document.querySelector("#guiviewer3d-toolbar").style.display = "none";
      let devDbIds = allDevList.map(x => x.forge_dbid);
      // 大類
      let subDevDbId = [];
      allDevList.forEach(({ device_nodes }) => {
        subDevDbId = [...subDevDbId, ...device_nodes.map(n => n.forge_dbid)]
      })
-            //console.log(devDbIds, subDevDbId)
+      // console.log(devDbIds, subDevDbId)
      // 從資料庫設定不可視模型的類型，若沒有取道該小類不可視類型，則套用資料庫設定預設類型
      if (forgeInvType) {
        setInviForge(forgeInvType, [...devDbIds, ...subDevDbId]);
@ -409,6 +427,7 @@
      let sensorObjs = []
      let devices = []
      if (pageAct.sysSubTag === "M12") {
+        addHotPoint(viewer)
        allDevList.forEach((device) => {
          const sensorObj = new Forge3DSensor({
            viewer: viewer,
@ -447,15 +466,18 @@
          sensorObjs.push(sensorObj)
        })
      } else {
-                allDevList.map(x => {
+        devices = allDevList.map(x => {
          return {
            roomDbId: !isNaN(parseInt(x.room_dbid)) ? parseInt(x.room_dbid) : -1,
            id: x.device_number,
            position: isJSON(x.device_coordinate_3d) ? JSON.parse(x.device_coordinate_3d) : {}, // x: 0, y: 25, z: -2.5      (3.35, -4.81, 12.88
            sensorTypes: ["temperature", "humidity"],
-                        temp: 0,
+            temp: 30,
+            forgeDbId: parseInt(x.forge_dbid)
          }
        })
+
+        if ((pageAct.sysSubTag == "M12" || pageAct.sysSubTag == "ELEV") && elevatorShow) {
          let elevOption = {
            selector: "[name=forgeViewer]",
            viewer: viewer,
@ -472,12 +494,14 @@
          }
          forge3DElev.init();
        }
+      }

      let option = {
        devices: devices,
      }

      if (pageAct.sysMainTag !== "LT" && pageAct.sysSubTag !== "M12") {
+        console.log(pageAct.sysSubTag, option)
        heatMap = new ADHeatMaps(option);
        heatMap.onComplete = () => {
          $.each(allDevList, (idx, dev) => {
@ -550,7 +574,7 @@
      "device_system_tag": pageAct.sysMainTag,
      "device_name_tag": pageAct.sysSubTag,
    };
-        //console.log(sendData)
+    console.log(sendData)
    objSendData.Data = sendData;
    ytAjax = new YourTeam.Ajax(url, objSendData, function (res) {
      if (!res || res.code != "0000" || !res.data) {
@ -567,8 +591,6 @@
          $.extend(item, data);
          myDataList.push(item);
        })
-
-                //console.log("1", myDataList)
        setHotspotPoint(myDataList);
        if (pageAct.sysMainTag == "LT") {
          setLightPoint(myDataList);
@ -580,7 +602,7 @@
  }

  function setHotspotPoint(myDataList = []) {
-         //console.log("2",myDataList)
+    console.log("2", myDataList)
    getHopspotPoint(myDataList);
  }

@ -617,7 +639,10 @@
  var parentEle = "";
  onEvent("autodesk:click:sprite", "[name=forgeViewer]", function (e, obj) {
    forgeUnFocusAll();
-        let position = [obj.event.target.toolController.lastClickX - 100, obj.event.target.toolController.lastClickY - 100];
+    let rect = $("[name=forgeViewer]")[0].getBoundingClientRect();
+    let position = [rect.left + rect.width / 2, rect.top + rect.height / 3]
+    // console.log(position)
+    // let position = [obj.event.target.toolController.lastClickX - 300, obj.event.target.toolController.lastClickY - 300];
    let devObj = obj.myData;
    let name = allDevList.filter(x => x.device_guid == devObj.device_guid)[0]?.full_name || devObj.full_name;
    devObj.full_name = name;
@ -650,7 +675,15 @@

  function forgeUnFocusAll() {
    $("#floDevList a[name=devItem]").each((idx, ele) => {
-            controlFocusHotspot($(ele).data("dbId"), false);
+      const eleDbId = $(ele).data("dbId")
+      if (alarmDbIdList.some(dbId => dbId == eleDbId)) {
+        changeScaleForHotspot(eleDbId, false)
+        return
+      }
+      else {
+        // 3D 熱點解除
+        controlFocusHotspot(eleDbId, false);
+      }
    })
  }
 </script>
--- a/Frontend/_sysMonFloor.html
+++ b/Frontend/_sysMonFloor.html
@ -46,8 +46,10 @@
        });
        initChart();
        getFloData();
-
+        getFloData();
+        if (pageAct.sysSubTag !== "L1") {
            subDevice();
+        }
    })

    onEvent("click", "#resChartZoom", function () {
@ -87,7 +89,6 @@
        //currentData = selected_floor_objs[0].device;

        currentData = $.map(devList, function (item) {
-
            //資料處理
            if (selected_floor.device_number != undefined
                && selected_floor.device_number != null
@ -109,6 +110,7 @@
                && item.device_nodes != null
                && item.device_nodes.length > 0) {

+                console.log("燈", item, selected_floor)
                if (item.device_master_number == selected_floor.device_master) {
                    //var datatable_data = {
                    //    device_full_name: item.full_name,
@ -152,8 +154,9 @@
            }
            return item;
        });
+        console.log("currentData", currentData)
        if (currentData == null || currentData.length == 0) {
-            this.currentData = [];
+            currentData = [];
        }

        // myBaja.setPrepareSubscribeDevices(currentData);
@ -187,6 +190,7 @@
                // animationDurationUpdate: 1500,
                tooltip: {
                    formatter: function (params) {
+                        console.log("params", params)
                        if (params.data.device_node_guid != undefined && params.data.device_node_guid != null && params.data.device_node_guid != "") {
                            return `<div >
              名稱：${params.data.device_node_full_name}<br>
@ -206,7 +210,7 @@
                    map: 'floor_svg',
                    roam: true,
                    scaleLimit: {  //限制放大縮小倍數
-                        max: 32,
+                        max: 16,
                        min: 1
                    },
                    layoutSize: '100%',
@ -220,7 +224,7 @@
                        coordinateSystem: 'geo',
                        geoIndex: 0,
                        symbol: 'circle',
-                        symbolSize: 10,
+                        symbolSize: 20,
                        symbolOffset: [10, 10],
                        label: {
                            show: false
@ -232,7 +236,7 @@
                        type: 'scatter',
                        coordinateSystem: 'geo',
                        geoIndex: 0,
-                        symbolSize: 30,
+                        symbolSize: 50,
                        label: {
                            formatter: '{b}',
                            position: 'bottom',
@ -256,7 +260,7 @@
                        coordinateSystem: 'geo',
                        geoIndex: 0,
                        showEffectOn: 'render',
-                        symbolSize: 30,
+                        symbolSize: 50,
                        label: {
                            formatter: '{b}',
                            position: 'bottom',
@ -280,7 +284,7 @@
                        coordinateSystem: 'geo',
                        geoIndex: 0,
                        symbol: 'circle',
-                        symbolSize: 10,
+                        symbolSize: 20,
                        symbolOffset: [10, 10],
                        label: {
                            show: false
@ -292,7 +296,7 @@
                        type: 'scatter',
                        coordinateSystem: 'geo',
                        geoIndex: 0,
-                        symbolSize: 30,
+                        symbolSize: 50,
                        label: {
                            formatter: '{b}',
                            position: 'bottom',
@ -332,7 +336,10 @@
                chartUnFocusAll();
                if (params.componentType == "series") {
                    let data = params.data;
-                    let position = [params.event.event.clientX, params.event.event.clientY];
+                    let rect = $("#floChart")[0].getBoundingClientRect();
+                    let position = [rect.left + rect.width / 2, rect.top + rect.height / 4]
+                    // console.log(position)
+                    // let position = [params.event.event.clientX+100, params.event.event.clientY-300];
                    data._dbId = data._dbId ?? null;
                    parentEle = crePosPopover(position, data);
                    $(parentEle).click();
@ -380,6 +387,8 @@
                        currentData.forEach(function (cData) {
                            if (cData.device_guid == point.device_guid) {
                                cData._dbId = dbid;
+                                cData.spriteDbid = dbid;
+                                setForgeHotSpotColor(cData);
                            }
                        })
                    });
@ -453,6 +462,13 @@
            if (!matchDevice) {
                return false;
            }
+            //將訂閱值塞入 subDeviceData
+            if (subDeviceData.findIndex(x => x.device_number == matchDevice.device_number) == -1) {
+                let obj = {};
+                obj.device_number = matchDevice.device_number;
+                obj.dbid = matchDevice.forge_dbid;
+                subDeviceData.push(obj)
+            }
            let norDevPoiName = matchDevice.device_normal_point_name;
            let cloDevPoiName = matchDevice.device_close_point_name;
            let errDevPoiName = matchDevice.device_error_point_name;
@ -464,13 +480,18 @@
            }


-            if (data.point_name == "SSC") {
+            if (data.point_name == "SSC" && pageAct.sysSubTag === "L1") {
                const lightOn = data.value.includes("true")
                setLightOpenOrClose(lightOn, matchDevice.device_guid);
                if (lightOn) {
+                    //console.log(matchDevice)
                    setLightValues(matchDevice.device_guid, 200, 0xe1cf18);
+                    console.log("SSC", matchDevice.device_number, 40)
+                    heatMap?.changeTemp(matchDevice.device_number, 40);
                } else {
                    setLightValues(matchDevice.device_guid, 0, 0xffffff);
+                    // console.log("SSC",matchDevice.device_number, 0)
+                    heatMap?.changeTemp(matchDevice.device_number, 0);
                }
            }

@ -482,6 +503,7 @@
            } else if (data.point_name == errDevPoiName && data.value == matchDevice.device_error_point_value) {
                $(`#${matchDevice.device_number}_status`).attr("data-light-type", "error").data("light-type", "error");
            }
+            setForgeHotSpotColor(matchDevice);

        });

@ -640,7 +662,7 @@

    // 重設平面圖設備資料
    function resetData() {
-
+        console.log("reset", currentData)
        const scatter_symbol_convertData = function (data, zoom) { //正常、關閉排除CCVT(圓點)
            let res = [], temp = [];
            data.forEach(function (item, index) {
@ -827,6 +849,7 @@
                                item_node.device_image = item.device_image;
                                temp.push(item_node);
                            });
+
                        } else {
                            temp.push(item)
                        }
@ -1082,11 +1105,17 @@
                nextFloor = nextFloor.split("U")[1];
            }

+
            getLevelsData(curFloTag, nextFloor, function () {
+                viewer.model.search("天花板", (nodeIds) => {
+                    // console.log("2",nodeIds)
+                    viewer.hide(nodeIds)
+                }, (e) => { console.log(e) })
                $(loadEle).Loading("close");
            });
            setHeatMap();

+            if (pageAct.sysSubTag == "ELEV") {
                let elevOption = {
                    viewer: viewer,
                    ordPath: {
@ -1100,12 +1129,13 @@
                    endPageLoading();
                }
                forge3DElev.init();
+            }

        });
    }

    function setHeatMap() {
-        if (pageAct.sysMainTag !== "LT" && pageAct.sysSubTag !== "M12") {
+        if (pageAct.sysSubTag !== "M12") {
            devices = currentData.map(x => {
                return {
                    roomDbId: !isNaN(parseInt(x.room_dbid)) ? parseInt(x.room_dbid) : -1,
@ -1124,9 +1154,9 @@

            heatMap = new ADHeatMaps(option);
            heatMap.onComplete = () => {
-
                $.each(currentData, (idx, dev) => {
                    heatMap.changeTemp(dev.device_number, dev._temp || 0);
+                    subDevice();
                })
            }
        }
@ -1171,7 +1201,10 @@
    onEvent("autodesk:click:sprite", "#forgeViewer", function (e, obj) {
        forgeUnFocusAll();
        chartUnFocusAll();
-        let position = [obj.event.target.toolController.lastClickX, obj.event.target.toolController.lastClickY];
+        let rect = $("#forgeViewer")[0].getBoundingClientRect();
+        let position = [rect.left + rect.width / 2, rect.top + rect.height / 4]
+        // console.log(position)
+        // let position = [obj.event.target.toolController.lastClickX, obj.event.target.toolController.lastClickY];
        let devObj = obj.myData;
        let name = currentData.filter(x => x.device_guid == devObj.device_guid)[0]?.full_name;
        devObj.full_name = name;
@ -1196,7 +1229,15 @@

    function forgeUnFocusAll() {
        $.each(currentData, (idx, cData) => {
-            controlFocusHotspot(cData._dbId, false);
+            const eleDbId = cData._dbId
+            if (alarmDbIdList.some(dbId => dbId == eleDbId)) {
+                changeScaleForHotspot(eleDbId, false)
+                return
+            }
+            else {
+                // 3D 熱點解除
+                controlFocusHotspot(eleDbId, false);
+            }
        })
    }

@ -1204,7 +1245,7 @@
        let option = floChart.getOption();
        option.series.forEach(function (series) {
            series.data.forEach(function (point) {
-                point.symbolSize = 10;
+                point.symbolSize = 20;
            });
        });
        floChart.setOption(option);
@ -1217,7 +1258,7 @@
        option.series.forEach(function (series) {
            series.data.forEach(function (point) {
                if (point.device_guid == devGuid) {
-                    point.symbolSize = 10;
+                    point.symbolSize = 20;
                }
            });
        });
--- a/Frontend/css/site.css
+++ b/Frontend/css/site.css
@ -1,100 +1,320 @@

-:root { --yt-main-gray: #c2c7d0; --yt-main-black: #212529; --yt-main-gray-hover: #c2c7d0; --yt-gray: #505050; --yt-gray-hover: #3c3c3c; --yt-gray-2: #8f8c8c; --yt-gray-2-hover: #646060; --yt-gray-3: #ededed; --yt-gray-4: #dddddd; --yt-pink: #ff95d0; --yt-pink-hover: #ef84c0; --yt-red-2: #d34949; --yt-yellow-1: #ffc902; }
+:root {
+  --yt-main-gray: #c2c7d0;
+  --yt-main-black: #212529;
+  --yt-main-gray-hover: #c2c7d0;
+  --yt-gray: #505050;
+  --yt-gray-hover: #3c3c3c;
+  --yt-gray-2: #8f8c8c;
+  --yt-gray-2-hover: #646060;
+  --yt-gray-3: #ededed;
+  --yt-gray-4: #dddddd;
+  --yt-pink: #ff95d0;
+  --yt-pink-hover: #ef84c0;
+  --yt-red-2: #d34949;
+  --yt-yellow-1: #ffc902;
+}


-.mod-skin-dark:not(.mod-skin-light) .panel-hdr, .mod-skin-dark:not(.mod-skin-light) .card-header { background: rgba(0, 0, 0, 0.03); }
+.mod-skin-dark:not(.mod-skin-light) .panel-hdr, .mod-skin-dark:not(.mod-skin-light) .card-header {
+  background: rgba(0, 0, 0, 0.03);
+}

-.btn-sm-2 { padding: 2px 19px; }
+.btn-sm-2 {
+  padding: 2px 19px;
+}

-.table td { word-break: break-all; }
+.table td {
+  word-break: break-all;
+}

-label[id$='-error'].error { color: var(--yt-red-2); }
+label[id$='-error'].error {
+  color: var(--yt-red-2);
+}

 /*[id^=yt_tooltip] { min-width: 650px !important; }*/

-.circle-light { display: inline-block; width: 25px; height: 25px; border-radius: 50px; }
+.circle-light {
+  display: inline-block;
+  width: 25px;
+  height: 25px;
+  border-radius: 50px;
+}

-.light-flash { --flash-color-1: #ffa100; --flash-color-2: #26272b; animation: flashing-bg 0.5s linear infinite; }
+.light-flash {
+  --flash-color-1: #ffa100;
+  --flash-color-2: #26272b;
+  animation: flashing-bg 0.5s linear infinite;
+}

-.light-flash-c { --flash-color-1: #ffa100; --flash-color-2: #26272b; animation: flashing-c 0.5s linear infinite; }
+.light-flash-c {
+  --flash-color-1: #ffa100;
+  --flash-color-2: #26272b;
+  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; }
+.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: ''; position: absolute; top: 2px; left: 24px; display: block; border-radius: 25px; width: 20px; height: 20px; background: #3f8635; }
+input.toggle:checked::before {
+  content: '';
+  position: absolute;
+  top: 2px;
+  left: 24px;
+  display: block;
+  border-radius: 25px;
+  width: 20px;
+  height: 20px;
+  background: #3f8635;
+}

-input.toggle::before { content: ''; position: absolute; top: 2px; left: 3px; display: block; border-radius: 25px; width: 20px; height: 20px; background: #656565; transition: 0.2s; }
+input.toggle::before {
+  content: '';
+  position: absolute;
+  top: 2px;
+  left: 3px;
+  display: block;
+  border-radius: 25px;
+  width: 20px;
+  height: 20px;
+  background: #656565;
+  transition: 0.2s;
+}

-input.toggle { cursor: pointer; appearance: none; position: relative; width: 48px; height: 24px; background: #464646; border-radius: 50px; align-content: center; }
+input.toggle {
+  cursor: pointer;
+  appearance: none;
+  position: relative;
+  width: 48px;
+  height: 24px;
+  background: #464646;
+  border-radius: 50px;
+  align-content: center;
+}

-input.toggle:checked { background: #97c193; }
+  input.toggle:checked {
+    background: #97c193;
+  }

-.loading-bg { background: #0000009c; background-repeat: no-repeat; opacity: 0; width: 100%; height: 100vh; position: fixed; z-index: 3000; }
+.loading-bg {
+  background: #0000009c;
+  background-repeat: no-repeat;
+  opacity: 0;
+  width: 100%;
+  height: 100vh;
+  position: fixed;
+  z-index: 3000;
+}

-.dropdown-menu { z-index: 3000; }
+.dropdown-menu {
+  z-index: 3000;
+}

-.adsk-viewing-viewer { top: 0px; }
+.adsk-viewing-viewer {
+  top: 0px;
+}

-.lds-ring { display: inline-block; position: relative; width: 25px; height: 25px; margin-right: 0.8rem; }
+.lds-ring {
+  display: inline-block;
+  position: relative;
+  width: 25px;
+  height: 25px;
+  margin-right: 0.8rem;
+}

-.lds-ring div { top: -4px; box-sizing: border-box; display: block; position: absolute; width: 25px; height: 25px; margin: 6px; border: 6px solid #fff; border-radius: 50%; animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite; border-color: #fff transparent transparent transparent; }
+  .lds-ring div {
+    top: -4px;
+    box-sizing: border-box;
+    display: block;
+    position: absolute;
+    width: 25px;
+    height: 25px;
+    margin: 6px;
+    border: 6px solid #fff;
+    border-radius: 50%;
+    animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+    border-color: #fff transparent transparent transparent;
+  }

-.lds-ring div:nth-child(1) { animation-delay: -0.45s; }
+    .lds-ring div:nth-child(1) {
+      animation-delay: -0.45s;
+    }

-.lds-ring div:nth-child(2) { animation-delay: -0.3s; }
+    .lds-ring div:nth-child(2) {
+      animation-delay: -0.3s;
+    }

-.lds-ring div:nth-child(3) { animation-delay: -0.15s; }
+    .lds-ring div:nth-child(3) {
+      animation-delay: -0.15s;
+    }

 /* js-tree */
-.jstree-node { padding-bottom: 3px; }
-.jstree-default-dark { background-color: transparent; }
-.jstree a.jstree-anchor { color: #d6d6d6 !important; }
+.jstree-node {
+  padding-bottom: 3px;
+}

-.dropzone .dz-preview.dz-file-preview .dz-image { background: linear-gradient(to bottom, #675d72, #4d4a56) !important; }
+.jstree-default-dark {
+  background-color: transparent;
+}

-.dz-remove { position: absolute; top: -8px; right: -8px; z-index: 100; }
+.jstree a.jstree-anchor {
+  color: #d6d6d6 !important;
+}

-.dz-remove span { width: 30px; height: 30px; font-size: 24px; border-radius: 10px; color: white; cursor: pointer !important; padding-top: 3px; transition: 0.2s; }
+.dropzone .dz-preview.dz-file-preview .dz-image {
+  background: linear-gradient(to bottom, #675d72, #4d4a56) !important;
+}

-.dz-remove span.mi-delete { background: var(--danger); }
+.dz-remove {
+  position: absolute;
+  top: -8px;
+  right: -8px;
+  z-index: 100;
+}

-.dz-remove span.mi-cancel { font-size: 30px; color: var(--color_grey); }
+  .dz-remove span {
+    width: 30px;
+    height: 30px;
+    font-size: 24px;
+    border-radius: 10px;
+    color: white;
+    cursor: pointer !important;
+    padding-top: 3px;
+    transition: 0.2s;
+  }

-.dz-remove:hover span { transform: scale(1.1); transition: 0.2s; }
-.dropzone .dz-preview.dz-image-preview { background-color: transparent !important; }
+    .dz-remove span.mi-delete {
+      background: var(--danger);
+    }

-input:-webkit-autofill { background-color: rgba(0, 0, 0, 0.15) !important; }
+    .dz-remove span.mi-cancel {
+      font-size: 30px;
+      color: var(--color_grey);
+    }

-.d-grid { display: grid; }
+  .dz-remove:hover span {
+    transform: scale(1.1);
+    transition: 0.2s;
+  }

-.grid-gap-1 { grid-gap: 1px; }
-.grid-gap-2 { grid-gap: 2px; }
-.grid-gap-3 { grid-gap: 3px; }
-.grid-gap-4 { grid-gap: 4px; }
-.grid-gap-5 { grid-gap: 5px; }
-.grid-gap-c { grid-gap: var(--c-grid-gap); }
+.dropzone .dz-preview.dz-image-preview {
+  background-color: transparent !important;
+}

-.grid-temp-col-c { grid-template-columns: var(--c-grid-temp-col); }
+input:-webkit-autofill {
+  background-color: rgba(0, 0, 0, 0.15) !important;
+}

-.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; }
+.d-grid {
+  display: grid;
+}

-.yt-left-navbar { position: fixed; left: 0; top: 0; height: 100%; z-index: 10; background-color: rgb(25 25 25 / 95%); 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-light); }
+.grid-gap-1 {
+  grid-gap: 1px;
+}

-.card-header.p-3.ui-draggable-handle:hover { cursor: move; }
+.grid-gap-2 {
+  grid-gap: 2px;
+}

-.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%;}
+.grid-gap-3 {
+  grid-gap: 3px;
+}
+
+.grid-gap-4 {
+  grid-gap: 4px;
+}
+
+.grid-gap-5 {
+  grid-gap: 5px;
+}
+
+.grid-gap-c {
+  grid-gap: var(--c-grid-gap);
+}
+
+.grid-temp-col-c {
+  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: rgb(25 25 25 / 95%);
+  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-light);
+      }
+
+.card-header.p-3.ui-draggable-handle:hover {
+  cursor: move;
+}
+
+.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%;
+}

 #toast-container > div {
-    width:330px !important;
+  width: 330px !important;
 }
 /*a[data-tabname="topFunBtn"] { color: #fff }

@ -106,216 +326,417 @@ a[data-tabname="topFunBtn"]:hover { color: var(--theme-primary-50); }
 }
 .userblock:hover { color: var(--theme-primary-50); }
 .dropdown.show .userblock { color: var(--theme-primary-50) !important; }*/
-.page-header a, #sysMonBtnList a { color: #fff !important; }
-.page-header a:hover, #sysMonBtnList a:hover { color: var(--theme-primary-50) !important; }
-.page-header a.active, #sysMonBtnList 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; }
+.page-header a, #sysMonBtnList a {
+  color: #fff !important;
+}
+
+  .page-header a:hover, #sysMonBtnList a:hover {
+    color: var(--theme-primary-50) !important;
+  }
+
+  .page-header a.active, #sysMonBtnList 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;
+  }
 }

@keyframes lds-ring {
-    0% { transform: rotate(0deg); }
+  0% {
+    transform: rotate(0deg);
+  }

-    100% { transform: rotate(360deg); }
+  100% {
+    transform: rotate(360deg);
+  }
 }

@keyframes flashing-c {
-    0% { color: var(--flash-color-1); }
+  0% {
+    color: var(--flash-color-1);
+  }

-    49% { color: var(--flash-color-1); }
+  49% {
+    color: var(--flash-color-1);
+  }

-    50% { color: var(--flash-color-2); }
+  50% {
+    color: var(--flash-color-2);
+  }

-    99% { color: var(--flash-color-2); }
+  99% {
+    color: var(--flash-color-2);
+  }
 }

@keyframes flashing-bg {
-    0% { background: var(--flash-color-1); }
+  0% {
+    background: var(--flash-color-1);
+  }

-    49% { background: var(--flash-color-1); }
+  49% {
+    background: var(--flash-color-1);
+  }

-    50% { background: var(--flash-color-2); }
+  50% {
+    background: var(--flash-color-2);
+  }

-    99% { background: var(--flash-color-2); }
+  99% {
+    background: var(--flash-color-2);
+  }
 }

@keyframes flashing-c-bd {
-    0% { border-color: var(--flash-color-1); }
+  0% {
+    border-color: var(--flash-color-1);
+  }

-    49% { border-color: var(--flash-color-1); }
+  49% {
+    border-color: var(--flash-color-1);
+  }

-    50% { border-color: var(--flash-color-2); }
+  50% {
+    border-color: var(--flash-color-2);
+  }

-    99% { border-color: var(--flash-color-2); }
+  99% {
+    border-color: var(--flash-color-2);
+  }
 }
 /* ================================================================ */
 /*                             單一方法                             */
 /* ================================================================ */
 /* cursor */
-.cur-def { cursor: default !important; }
+.cur-def {
+  cursor: default !important;
+}

-.cur-poi { cursor: pointer !important; }
+.cur-poi {
+  cursor: pointer !important;
+}

 /*left 距離*/
-.left-05 { left: 0.5rem !important; }
+.left-05 {
+  left: 0.5rem !important;
+}

-.left-04 { left: 0.4rem !important; }
+.left-04 {
+  left: 0.4rem !important;
+}

-.left-03 { left: 0.3rem !important; }
+.left-03 {
+  left: 0.3rem !important;
+}

-.left-02 { left: 0.2rem !important; }
+.left-02 {
+  left: 0.2rem !important;
+}

-.left-01 { left: 0.1rem !important; }
+.left-01 {
+  left: 0.1rem !important;
+}

 /*right 距離*/
-.right-05 { right: 0.5rem !important; }
+.right-05 {
+  right: 0.5rem !important;
+}

-.right-04 { right: 0.4rem !important; }
+.right-04 {
+  right: 0.4rem !important;
+}

-.right-03 { right: 0.3rem !important; }
+.right-03 {
+  right: 0.3rem !important;
+}

-.right-02 { right: 0.2rem !important; }
+.right-02 {
+  right: 0.2rem !important;
+}

-.right-01 { right: 0.1rem !important; }
+.right-01 {
+  right: 0.1rem !important;
+}

 /*bottom 0.5rem*/
-.bm-05 { bottom: 0.5rem !important; }
+.bm-05 {
+  bottom: 0.5rem !important;
+}

-.bm-04 { bottom: 0.4rem !important; }
+.bm-04 {
+  bottom: 0.4rem !important;
+}

-.bm-03 { bottom: 0.3rem !important; }
+.bm-03 {
+  bottom: 0.3rem !important;
+}

-.bm-02 { bottom: 0.2rem !important; }
+.bm-02 {
+  bottom: 0.2rem !important;
+}

-.bm-01 { bottom: 0.1rem !important; }
+.bm-01 {
+  bottom: 0.1rem !important;
+}

 /*top 0.5rem*/
-.tp-05 { top: 0.5rem !important; }
+.tp-05 {
+  top: 0.5rem !important;
+}

-.tp-04 { top: 0.4rem !important; }
+.tp-04 {
+  top: 0.4rem !important;
+}

-.tp-03 { top: 0.3rem !important; }
+.tp-03 {
+  top: 0.3rem !important;
+}

-.tp-02 { top: 0.2rem !important; }
+.tp-02 {
+  top: 0.2rem !important;
+}

-.tp-01 { top: 0.1rem !important; }
+.tp-01 {
+  top: 0.1rem !important;
+}

 /* font-weight */
-.fw-1 { font-weight: 100; }
+.fw-1 {
+  font-weight: 100;
+}

-.fw-2 { font-weight: 200; }
+.fw-2 {
+  font-weight: 200;
+}

-.fw-3 { font-weight: 300; }
+.fw-3 {
+  font-weight: 300;
+}

-.fw-4 { font-weight: 400; }
+.fw-4 {
+  font-weight: 400;
+}

-.fw-5 { font-weight: 500; }
+.fw-5 {
+  font-weight: 500;
+}

-.fw-6 { font-weight: 600; }
+.fw-6 {
+  font-weight: 600;
+}

-.fw-7 { font-weight: 700; }
+.fw-7 {
+  font-weight: 700;
+}

-.fw-8 { font-weight: 800; }
+.fw-8 {
+  font-weight: 800;
+}

-.fw-9 { font-weight: 900; }
+.fw-9 {
+  font-weight: 900;
+}

 /* font-size */
-.fs-05 { font-size: 0.5rem; }
+.fs-05 {
+  font-size: 0.5rem;
+}

-.fs-075 { font-size: 0.75rem; }
+.fs-075 {
+  font-size: 0.75rem;
+}

-.fs-09 { font-size: 0.9rem; }
+.fs-09 {
+  font-size: 0.9rem;
+}

-.fs-1 { font-size: 1rem; }
+.fs-1 {
+  font-size: 1rem;
+}

-.fs-1-05 { font-size: 1.05rem; }
+.fs-1-05 {
+  font-size: 1.05rem;
+}

-.fs-1-1 { font-size: 1.1rem; }
+.fs-1-1 {
+  font-size: 1.1rem;
+}

-.fs-1-2 { font-size: 1.2rem; }
+.fs-1-2 {
+  font-size: 1.2rem;
+}

-.fs-1-3 { font-size: 1.3rem; }
+.fs-1-3 {
+  font-size: 1.3rem;
+}

-.fs-1-5 { font-size: 1.5rem; }
+.fs-1-5 {
+  font-size: 1.5rem;
+}

-.fs-2 { font-size: 2rem; }
+.fs-2 {
+  font-size: 2rem;
+}

-.fs-2-5 { font-size: 2.5rem; }
+.fs-2-5 {
+  font-size: 2.5rem;
+}

 /* border width */
-.bd-0 { border-width: 0px; }
+.bd-0 {
+  border-width: 0px;
+}

-.bd-1 { border-width: 1px; }
+.bd-1 {
+  border-width: 1px;
+}

-.bd-2 { border-width: 2px; }
+.bd-2 {
+  border-width: 2px;
+}

 /* border direction */
-.bd-l { border-left-style: solid; }
+.bd-l {
+  border-left-style: solid;
+}

-.bd-r { border-right-style: solid; }
+.bd-r {
+  border-right-style: solid;
+}

-.bd-t { border-top-style: solid; }
+.bd-t {
+  border-top-style: solid;
+}

-.bd-b { border-bottom-style: solid; }
+.bd-b {
+  border-bottom-style: solid;
+}

 /* border radius */
-.br-1 { border-radius: 1px; }
+.br-1 {
+  border-radius: 1px;
+}

-.br-2 { border-radius: 2px; }
+.br-2 {
+  border-radius: 2px;
+}

-.br-3 { border-radius: 3px; }
+.br-3 {
+  border-radius: 3px;
+}

-.br-4 { border-radius: 4px; }
+.br-4 {
+  border-radius: 4px;
+}

-.br-5 { border-radius: 5px; }
+.br-5 {
+  border-radius: 5px;
+}

 /* flex-gap */
-.gap-1 { gap: 1px; }
+.gap-1 {
+  gap: 1px;
+}

-.gap-2 { gap: 2px; }
+.gap-2 {
+  gap: 2px;
+}

-.gap-3 { gap: 3px; }
+.gap-3 {
+  gap: 3px;
+}

-.gap-4 { gap: 4px; }
+.gap-4 {
+  gap: 4px;
+}

-.gap-5 { gap: 5px; }
+.gap-5 {
+  gap: 5px;
+}

-.gap-6 { gap: 6px; }
+.gap-6 {
+  gap: 6px;
+}

-.gap-7 { gap: 7px; }
+.gap-7 {
+  gap: 7px;
+}

-.gap-8 { gap: 8px; }
+.gap-8 {
+  gap: 8px;
+}

 /* vertical-align */
-.va-t { vertical-align: top; }
+.va-t {
+  vertical-align: top;
+}

-.va-m { vertical-align: middle; }
+.va-m {
+  vertical-align: middle;
+}

-.va-b { vertical-align: bottom; }
+.va-b {
+  vertical-align: bottom;
+}

-.bg-orange { background-color: #ffa100; }
+.bg-orange {
+  background-color: #ffa100;
+}

 /* text color */
-.t-main-purple { color: #623c80 !important; }
+.t-main-purple {
+  color: #623c80 !important;
+}

-.t-black { color: #000 !important; }
+.t-black {
+  color: #000 !important;
+}

-.t-white { color: #fff !important; }
+.t-white {
+  color: #fff !important;
+}

-.t-fb-blue { color: #466ac2 !important; }
+.t-fb-blue {
+  color: #466ac2 !important;
+}

-.t-line-green { color: #54C814 !important; }
+.t-line-green {
+  color: #54C814 !important;
+}

-.t-red { color: #db0000 !important; }
+.t-red {
+  color: #db0000 !important;
+}

-.t-red-2 { color: var(--yt-red-2) !important; }
+.t-red-2 {
+  color: var(--yt-red-2) !important;
+}

-.t-gray { color: var(--yt-gray); }
+.t-gray {
+  color: var(--yt-gray);
+}

-.t-main-gray { color: var(--yt-main-gray); }
+.t-main-gray {
+  color: var(--yt-main-gray);
+}

-.t-gray-2 { color: var(--yt-gray-2) !important; }
+.t-gray-2 {
+  color: var(--yt-gray-2) !important;
+}

-.t-gray-3 { color: var(--yt-gray-3); }
+.t-gray-3 {
+  color: var(--yt-gray-3);
+}

-.t-yellow { color: var(--yt-yellow-1); }
+.t-yellow {
+  color: var(--yt-yellow-1);
+}
--- a/Frontend/img/forge/sensor_circle.svg
+++ b/Frontend/img/forge/sensor_circle.svg
@ -1,7 +1,17 @@
-<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" version="1.1">
-
- <g>
-  <title>Layer 1</title>
-  <circle fill="none" id="svg_1" r="8" cy="8" cx="8"/>
+<svg width="164" height="164" viewBox="0 0 164 164" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<g filter="url(#filter0_d)">
+		<circle cx="81.7363" cy="81.8212" r="70.3389" fill="white"/>
+		<!-- <circle cx="81.7363" cy="81.8212" r="62.3112" stroke="white" stroke-width="16.0554"/> -->
 	</g>
+	<defs>
+		<filter id="filter0_d" x="0.174763" y="0.259602" width="163.123" height="163.123" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+			<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+			<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+			<feOffset/>
+			<feGaussianBlur stdDeviation="5.61135"/>
+			<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+			<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
+			<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
+		</filter>
+	</defs>
 </svg>
--- a/Frontend/index.html
+++ b/Frontend/index.html
@ -41,12 +41,14 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
    <link href="lib/jstree-master/themes/default-dark/style.min.css" rel="stylesheet" />
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <!--<link rel="stylesheet" media="screen, print" href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap.min.css">-->
-    <link rel="stylesheet" media="screen, print" href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap4.min.css">
+    <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="css/yourteam/plugins/yt-notice/yt-notice.css" />
    <link rel="stylesheet" href="css/yourteam/plugins/yt-alert/ytpop-alert.css" />
-    <link rel="stylesheet" href="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/style.min.css" type="text/css">
+    <link rel="stylesheet" href="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/style.min.css"
+          type="text/css">


 </head>
@ -144,7 +146,8 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                <header class="page-header" role="banner">
                    <!--we need this logo when user switches to nav-function-top-->
                    <div class="page-logo">
-                        <a href="javascript:;" name="topFunBtn" data-page="dashboard" class="page-logo-link press-scale-down d-flex align-items-center position-relative">
+                        <a href="javascript:;" name="topFunBtn" data-page="dashboard"
+                           class="page-logo-link press-scale-down d-flex align-items-center position-relative">
                            <img src="img/logo.png" alt="SmartAdmin WebApp" aria-roledescription="logo">

                            <!--<span class="page-logo-text mr-1">SmartAdmin WebApp</span>-->
@ -198,13 +201,15 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                    <div class="ml-auto d-flex mr-3">

                        <div class="dropdown">
-                            <a href="javascript:;" id="toggleNoticeBtn" class="d-flex align-items-center justify-content-center ml-2">
+                            <a href="javascript:;" id="toggleNoticeBtn"
+                               class="d-flex align-items-center justify-content-center ml-2">
                                <!--<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:-->
                                <div class="row m-0 justify-content-center userblock">
                                    <i id="noticeConIcon" class=" fs-1-5 w-100 text-center"></i>
-                                    <span id="noticeConText" class="text-truncate text-truncate-header hidden-xs-down" data-hide="隱藏警告" data-show="顯示警告"></span>
+                                    <span id="noticeConText" class="text-truncate text-truncate-header hidden-xs-down"
+                                          data-hide="隱藏警告" data-show="顯示警告"></span>
                                </div>

                            </a>
@ -212,7 +217,8 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                        </div>
                        <!--app user menu-->
                        <div class="dropdown">
-                            <a href="#" data-toggle="dropdown" data-target="logoutList" class="d-flex align-items-center justify-content-center ml-2">
+                            <a href="#" data-toggle="dropdown" data-target="logoutList"
+                               class="d-flex align-items-center justify-content-center ml-2">
                                <!--<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:-->
@ -232,7 +238,9 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li

                    </div>
                    <div class="ml-2 text-center">
-                        <label class="mb-0 fs-1-2">Diamond Controls<span class="fs-09 position-absolute">®</span></label><br>
+                        <label class="mb-0 fs-1-2">
+                            Diamond Controls<span class="fs-09 position-absolute">®</span>
+                        </label><br>
                        <label class="mb-0 fs-1-1">智慧大樓管理平台</label>
                    </div>
                </header>
@ -685,7 +693,8 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
        </div>
    </div>

-    <div id="noticeBlock" style="position: fixed; top: 70px; right: 0px; padding: 20px; transition: 0.2s; z-index: 50000; height:100%; ">
+    <div id="noticeBlock"
+         style="position: fixed; top: 70px; right: 0px; padding: 20px; transition: 0.2s; z-index: 50000; height:100%; ">

    </div>

@ -803,8 +812,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                        /*"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_4.1.2/chart.umd", // B4
-                        "lib/chart.js/chart.min", // 本機
+                        "lib/chart.js/chart.min",
                        "lib/dropzone/dropzone-min",
                        "lib/jstree-master/jstree.min",
                        "lib/notifications/sweetalert2/sweetalert2.bundle",
@ -1216,8 +1224,14 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                            // 讀取設備基本資料列表
                            $(tooltipEle).find("#info").html(typeof drawInfoTabBlo != "undefined" ? drawInfoTabBlo(devGuid) : "");
                            // 聚焦熱點
-                            if ($(oriEle).data("dbId")) {
-                                controlFocusHotspot($(oriEle).data("dbId"));
+                            const eleDbId = $(oriEle).data("dbId")
+                            if (eleDbId) {
+                                if (alarmDbIdList.some(dbId => dbId == eleDbId)) {
+                                    changeScaleForHotspot(eleDbId)
+                                }
+                                else {
+                                    controlFocusHotspot(eleDbId);
+                                }
                            }
                            // 3D 視角 ZOOM IN 聚焦

@ -1255,8 +1269,16 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                            typeof subDeviceSetTable != "undefined" ? subDeviceSetTable($(oriEle).data("number")) : ""
                        },
                        onHide: function (tooltipEle, oriEle) {
+                            const eleDbId = $(oriEle).data("dbId")
+                            if (eleDbId) {
+                                if (alarmDbIdList.some(dbId => dbId == eleDbId)) {
+                                    changeScaleForHotspot(eleDbId, false)
+                                }
+                                else {
                                    // 3D 熱點解除
-                            controlFocusHotspot($(oriEle).data("dbId"), false);
+                                    controlFocusHotspot(eleDbId, false);
+                                }
+                            }
                            // sysMonFloor Echart 解除 focus
                            typeof chartUnFocus != "undefined" ? chartUnFocus(oriEle) : "";
                        }
@ -1380,6 +1402,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
            }

            function controlFocusHotspot(dbId, open = true) {
+                // console.log("dbId", alarmDbIdList,dbId)
                changeColorForHotspot(dbId, open ? "focus" : null);
                changeScaleForHotspot(dbId, open);
            }
@ -1488,7 +1511,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li

            // 設置 Forge 3D 溫度條
            function setTopHeatBar() {
-                let strHtml = `<canvas name="forgeHeatBar" width="200" height="30" style="z-index:9999"></canvas>`;
+                let strHtml = `<canvas name="forgeHeatBar" width="200" height="30" style="position: absolute; z-index:9999"></canvas>`;
                return strHtml;
            }

--- a/Frontend/js/forge/forgemodel.js
+++ b/Frontend/js/forge/forgemodel.js
@ -8,8 +8,8 @@ var myDataList;
 var lightDataList;
 var lightList = [];//燈光清單
 var levels;//剖面用
-var lowerIdx;//剖面的下方樓層
-var upperIdx;//剖面的上方樓層
+var lowerIdx = 0;//剖面的下方樓層
+var upperIdx = 0;//剖面的上方樓層

 function launchViewer(urn, callback, failCallback, _selector = "#forgeViewer") {
    selector = _selector;
@ -340,12 +340,12 @@ class elevator3D {
    }
 }

+
 function onDocumentLoadSuccess(doc, eleOption) {

    var viewables = doc.getRoot().getDefaultGeometry();
    viewer.loadDocumentNode(doc, viewables).then(i => {
        // documented loaded, any action?
-
    });
    // viewer.addEventListener(Autodesk.Viewing.AGGREGATE_SELECTION_CHANGED_EVENT, (args) => {
    //     var currSelection = viewer.getSelection();
@ -559,6 +559,7 @@ class ADHeatMaps {
        this.roomDbIds = [];  //房間 dbId
        this.model = null;
        this.dataVizExtn = null;
+        this.shadingData = null;
        this.onComplete = option.onComplete ?? null;
        this.init();
    }
@ -571,54 +572,78 @@ class ADHeatMaps {
        this.model = viewer.model;
        this.addHeatMaps()
    }
+
    async addHeatMaps() {
        const {
            SurfaceShadingData,
            SurfaceShadingPoint,
            SurfaceShadingNode,
+            SurfaceShadingGroup
        } = Autodesk.DataVisualization.Core;
+        // test
+        const shadingGroup = new SurfaceShadingGroup('iot-heatmap');
+        const rooms = new Map();
+
+        for (const { id, roomDbId, position, sensorTypes } of this.devices) {
+            // console.log(id, roomDbId, position, sensorTypes)
+            if (!id || roomDbId == -1) {
+                continue;
+            }
+            if (!rooms.has(roomDbId)) {
+                const room = new SurfaceShadingNode(id, roomDbId);
+                shadingGroup.addChild(room);
+                rooms.set(roomDbId, room);
+            }
+            const room = rooms.get(roomDbId);
+            room.addPoint(new SurfaceShadingPoint(id, position, sensorTypes));
+        }
+        this.shadingData = new SurfaceShadingData();
+        this.shadingData.addChild(shadingGroup)
+        this.shadingData.initialize(this.model);
+        await this.dataVizExtn.setupSurfaceShading(this.model, this.shadingData);
+        this.dataVizExtn.renderSurfaceShading('iot-heatmap', "temperature", this.getSensorValue.bind(this));

        //let nodeIds = await getNodeIdByDbIds(this.checkNodeString);
        //nodeIds = Array.from(nodeIds);
        //nodeIds = nodeIds.map(x => { return { room: x[0] , nodeId: x[1]} });
-        this.roomDbIds = this.devices.filter(x => x.roomDbId != -1).map(x => x.roomDbId).Distinct();
+        // this.roomDbIds = this.devices.filter(x => x.roomDbId != -1).map(x => x.roomDbId).Distinct();

-        // 建立一個 SurfaceShadingData 物件，並將 SurfaceShadingNode 加入到該物件中
-        const heatmapData = new SurfaceShadingData();
+        // // 建立一個 SurfaceShadingData 物件，並將 SurfaceShadingNode 加入到該物件中
+        // const heatmapData = new SurfaceShadingData();

-        $.each(this.roomDbIds, (idx, rDbid) => {
-            // 建立一個名為 "Room Panel" 的 SurfaceShadingNode 物件，並將房間的模型給傳入，只在該房間呈現溫度
-            const shadingNode = new SurfaceShadingNode("RoomPanel" + rDbid, rDbid);
+        // $.each(this.roomDbIds, (idx, rDbid) => {
+        //     // 建立一個名為 "Room Panel" 的 SurfaceShadingNode 物件，並將房間的模型給傳入，只在該房間呈現溫度
+        //     const shadingNode = new SurfaceShadingNode("RoomPanel" + rDbid, rDbid);

-            // 遍歷每個設備，建立一個 SurfaceShadingPoint 物件並加入到 SurfaceShadingNode 中，透過這些設備渲染溫度
-            this.devices.filter(x => x.roomDbId == rDbid).forEach((device) => {
-                const shadingPoint = new SurfaceShadingPoint(
-                    device.id,
-                    undefined,
-                    device.sensorTypes
-                );
-                shadingPoint.positionFromDBId(this.model, device.roomDbId)
-                shadingNode.addPoint(shadingPoint);
-                // device.temp = 0;
-            });
+        //     // 遍歷每個設備，建立一個 SurfaceShadingPoint 物件並加入到 SurfaceShadingNode 中，透過這些設備渲染溫度
+        //     this.devices.filter(x => x.roomDbId == rDbid).forEach((device) => {
+        //         const shadingPoint = new SurfaceShadingPoint(
+        //             device.id,
+        //             undefined,
+        //             device.sensorTypes
+        //         );
+        //         shadingPoint.positionFromDBId(this.model, device.roomDbId)
+        //         shadingNode.addPoint(shadingPoint);
+        //         // device.temp = 0;
+        //     });

-            heatmapData.addChild(shadingNode);
-        })
+        //     heatmapData.addChild(shadingNode);
+        // })

-        // 將資料初始化並顯示在模型上
-        heatmapData.initialize(this.model);
+        // // 將資料初始化並顯示在模型上
+        // heatmapData.initialize(this.model);

-        // 對模型做表面顏色的渲染
-        await this.dataVizExtn.setupSurfaceShading(this.model, heatmapData);
+        // // 對模型做表面顏色的渲染
+        // await this.dataVizExtn.setupSurfaceShading(this.model, heatmapData);

-        // 對 "temperature" 的溫度設定兩種顏色：紅色和藍色
-        this.dataVizExtn.registerSurfaceShadingColors("temperature", [0x0000ff, 0x00ff00, 0xffff00, 0xff0000]);
+        // // 對 "temperature" 的溫度設定兩種顏色：紅色和藍色
+        // this.dataVizExtn.registerSurfaceShadingColors("temperature", [0x0000ff, 0x00ff00, 0xffff00, 0xff0000]);

-        $.each(this.roomDbIds, (idx, rDbid) => {
-            this.dataVizExtn.renderSurfaceShading("RoomPanel" + rDbid, "temperature", this.getSensorValue.bind(this));
-        })
+        // $.each(this.roomDbIds, (idx, rDbid) => {
+        //     this.dataVizExtn.renderSurfaceShading("RoomPanel" + rDbid, "temperature", this.getSensorValue.bind(this));
+        // })

-        /*this.changeTemp(this.tempVal);*/
+        //   /*this.changeTemp(this.tempVal);*/
        this.onComplete ? this.onComplete() : "";
    }

@ -629,7 +654,7 @@ class ADHeatMaps {
    }

    // 改變溫度
-    changeTemp = function (devId, temp) {
+    changeTemp = async function (devId, temp) {
        this.tempVal = temp;
        // 透過 device id 取得 roomDbId
        this.devices.forEach((dev) => {
@ -637,9 +662,18 @@ class ADHeatMaps {
                dev.temp = temp;
            }
        })
-        $.each(this.roomDbIds, async (idx, rDbid) => {
-            this.dataVizExtn.renderSurfaceShading("RoomPanel" + rDbid, "temperature", this.getSensorValue.bind(this));
-        })
+
+        if (!this.shadingData) {
+            await this.addHeatMaps();
+            this.dataVizExtn.renderSurfaceShading('iot-heatmap', "temperature", this.getSensorValue.bind(this));
+        }
+        else {
+            this.dataVizExtn.updateSurfaceShading(this.getSensorValue.bind(this));
+        }
+        // $.each(this.roomDbIds, async (idx, rDbid) => {
+        //     this.dataVizExtn.renderSurfaceShading("RoomPanel" + rDbid, "temperature", this.getSensorValue.bind(this));
+        // })
+
        //if (rDbid != null) {
        //    // 取得新的溫度值
        //    let getSensorValue = (device, sensorType) => {
@ -740,10 +774,11 @@ async function getLightData(data) {
 }

 async function testNewLight(dataList) {
+    console.log("dataList", dataList)
    dataList.forEach((myData, index) => {
        const position = JSON.parse(myData.device_coordinate_3d);
        if (lightList.findIndex(x => x.device_guid == myData.device_guid) == -1) {
-            lightList.push({ dbid: myData.forge_dbid, device_guid: myData.device_guid, lightObject: new THREE.SpotLight(0xe1cf18, 0, 20, 0.6, 0.5, 10) });
+            lightList.push({ dbid: myData.forge_dbid, device_guid: myData.device_guid, lightObject: new THREE.SpotLight(0xe1cf18, 10, 200, 1, 1, 2) });
        }

        lightList[index].lightObject.position.set(position.x, position.y, position.z);
@ -798,7 +833,6 @@ async function addHotPoint(data) {

    const viewableData = new DataVizCore.ViewableData();
    viewableData.spriteSize = 24; // Sprites as points of size 24 x 24 pixels
-    console.log()
    myDataList.forEach((myData, index) => {
        const dbId = 10 + index;
        const myPosition = myData.position;
@ -820,7 +854,7 @@ async function addHotPoint(data) {
                // console.log(`Sprite clicked: ${event.dbId}`);

                for (let i = dbIdStart; i <= myDataList.length + 10; i++) {
-                    changeColorForHotspot(i);
+                    !alarmDbIdList.some(dbId => dbId == i) && changeColorForHotspot(i);
                    changeScaleForHotspot(i, true);
                }
                let myData = myDataList.filter(x => x._dbId == event.dbId)[0];
@ -831,7 +865,7 @@ async function addHotPoint(data) {
                }
                $(selector).trigger("autodesk:click:sprite", { event, myData });
            } else {
-                changeColorForHotspot(event.dbId, null);
+                !alarmDbIdList.some(dbId => dbId == i) && changeColorForHotspot(event.dbId, null);
                changeScaleForHotspot(event.dbId, false);
                $(selector).trigger("autodesk:clickOut:sprite", { event });
            }
@ -881,7 +915,6 @@ async function addHotPoint(data) {
 // 熱點 更換顏色
 async function changeColorForHotspot(dbId, type = null) {
    const dataVizExtn = await viewer.loadExtension("Autodesk.DataVisualization");
-    // console.log(dbId, dataVizExtn.viewableData.getViewableColor(dbId, false))
    let spriteColorFocus = new THREE.Color(0xffffff);
    if (type == "focus" && pageAct.sysSubTag !== "M12") {
        spriteColorFocus = new THREE.Color(0x00ffe1);
@ -919,6 +952,7 @@ async function changeScaleForHotspot(dbId, type = true) {

 //------------------ 熱圖 -------------------------------
 async function loadHeatmaps(model) {
+    //console.log("熱圖 loadHeat")
    const dataVizExtn = await viewer.loadExtension("Autodesk.DataVisualization");

    //取三個空調設備的位置打點
@ -1084,28 +1118,73 @@ async function loadHeatmapForFloor() {
 }

 //------------ 剖面 ----------------------
-async function getRemoteLevels() {
-    const aecData = await Autodesk.Viewing.Document.getAecModelData(this.viewer.model.getDocumentNode());
-    if (!aecData || !aecData.levels) return null;

-    const levels2 = aecData.levels;
-    levels2.sort((a, b) => b.elevation - a.elevation);
-    return levels2;
+function findLevels(model) {
+    return new Promise((resolve, reject) => {
+        model.search("layer", (nodeIds) => {
+            let levels = []
+            const tree = viewer.model.getInstanceTree();
+            for (let i = 0; i < nodeIds.length; i++) {
+                const dbId = nodeIds[i];
+                const name = tree.getNodeName(dbId);
+                if (!name || name.includes('<沒有層級>')) continue;
+                levels.push({
+                    guid: dbId,
+                    name,
+                    dbId,
+                    extension: {
+                        buildingStory: true,
+                        structure: false,
+                        computationHeight: 0,
+                        groundPlane: false,
+                        hasAssociatedViewPlans: false,
+                    }
+                });
+            }
+            resolve(levels)
+        }, (e) => { reject(e) })
+    });
+}
+
+
+async function getRemoteLevels() {
+
+    let aecData = await Autodesk.Viewing.Document.getAecModelData(this.viewer.model.getDocumentNode());
+
+    let levels;
+    if (!aecData || !aecData.levels) {
+        const levelExt = await viewer.loadExtension('Autodesk.AEC.LevelsExtension');
+        levelExt.setAecModelData(undefined, viewer.model); //!<<< Clear before reset
+        levels = await findLevels(viewer.model)
+        aecdata = Autodesk.AEC.AecModelData.computeLevels(levels, viewer.model); //!<<< Rebuild aec model data
+    } else {
+        levels = aecData.levels;
+    }
+    levels.sort((a, b) => b.elevation - a.elevation);
+    return levels;
 }

 async function getLevelsData(lowerFloor, upperFloor, callback = null) {
+    console.log(lowerFloor, upperFloor)
    // 樓層正規化 取得樓層
    const floorRegex = /[\d|\w]+F/gmi;
+    const floorRegex2 = /^FL[\d|\w]+/gmi;
    const data = await this.getRemoteLevels();
+    console.log(data)
    for (var i = 0; i < data.length; i++) {
-        let name = data[i].name?.match(floorRegex);
-        if (name && name[0] == lowerFloor) {
+        let name = data[i].name?.match(floorRegex) || data[i].name?.match(floorRegex2)[0].split("L")[1] + "F";
+        if (name && name[0] == lowerFloor || name == lowerFloor) {
            lowerIdx = i;
        }
-        if (name && name[0] == upperFloor) {
+        if (name && name[0] == upperFloor || name == upperFloor) {
+            if (i > upperIdx && lowerFloor == upperFloor) {
+
+            } else {
                upperIdx = i;
            }
        }
+    }
+
    this.levels = data;
    profile(callback);
 }
@ -1120,7 +1199,7 @@ function getCutPlaneParam(idx, n) {
    const globalOffset = model.getData().globalOffset;
    const units = model.getUnitString();
    const elevRaw = Autodesk.Viewing.Private.convertUnits('ft', units, 1, level.elevation);
-
+    console.log(globalOffset, units, elevRaw)
    let d = elevRaw - globalOffset.z - 0.5;
    if (n == 1)
        d = -1 * d;
--- a/Frontend/js/init.js
+++ b/Frontend/js/init.js
@ -7,8 +7,8 @@ var baseImgUrl = "https://localhost:44376"; // 本地開發用
 //var baseImgUrl = "http://220.132.206.5:8848"; // production 用

 // WSP
-//var baseApiUrl = "http://220.132.206.5"; // production 用
-//var baseImgUrl = "http://220.132.206.5:8849"; // production 用
+// var baseApiUrl = "http://220.132.206.5:8001"; // production 用
+// var baseImgUrl = "http://220.132.206.5:8849"; // production 用

 //var baseApiUrl = "http://localhost";
 //var baseImgUrl = "http://localhost:8848";
@ -31,11 +31,17 @@ var common = {
 }
 var objSendData = { Data: null };
 // Mitsubishi
+var elevatorShow = true
+var port = "";
 var initAreaTag = "TPE";
 var n4Sup = "Mitsubishi_JACE8000";
+
 // WSP
-//var initAreaTag = "NTPC";
-//var n4Sup = "Banqiao";
+// var elevatorShow = false
+// var port = "4912";
+// var initAreaTag = "NTPC";
+// var n4Sup = "WSP_Supervisor";
+
 var forgeTokenBase = {
    url: baseApiUrl + '/api/forge/oauth/token',
    res_access_token: ["dictionary", "access_token"],
--- a/Frontend/js/n4js/alarmbaja.js
+++ b/Frontend/js/n4js/alarmbaja.js
@ -4,14 +4,14 @@ function addzero(num) {
 }

 /**
- * 取得異常資料 by baja
- * @param {any} startDate_millisecond
- * @param {any} endDate_millisecond
- * @param {any} isRecover
- * @param {any} isAck
- * @param {any} alarmClass
- * @param {any} callback
- */
+* 取得異常資料 by baja
+* @param {any} startDate_millisecond
+* @param {any} endDate_millisecond
+* @param {any} isRecover
+* @param {any} isAck
+* @param {any} alarmClass
+* @param {any} callback
+*/
 // function getAlarmByBaja(startDate_millisecond, endDate_millisecond, isRecover, isAck, alarmClass, callback) {
 //     let _sourceTmp;
 //     var _result = "";
@ -128,10 +128,10 @@ function getAlarmByBaja(startDate_millisecond, endDate_millisecond, isRecover, i
 }

 /**
- * 取得單一設備最新10筆異常資料 by baja
- * @param {any} devicePath
- * @param {any} callback
- */
+* 取得單一設備最新10筆異常資料 by baja
+* @param {any} devicePath
+* @param {any} callback
+*/
 // function getOneDeviceAlarmTop10ByBaja(devicePath, callback) {
 //     var _result = "";
 //     var _ss = "";
@ -204,10 +204,10 @@ function getOneDeviceAlarmTop10ByBaja(devicePath, callback) {
 }

 /**
- * 在單一系統下，取得各個設備的異常狀態
- * @param {any} systemPath
- * @param {any} callback
- */
+* 在單一系統下，取得各個設備的異常狀態
+* @param {any} systemPath
+* @param {any} callback
+*/
 // function getOneSystemAlarmStateByBaja(systemPath, callback) {
 //     var _result = "";
 //     var _ss = "";
@ -265,10 +265,10 @@ function getOneSystemAlarmStateByBaja(systemPath, callback) {
 }

 /**
- * 在單一系統下，取得各個系統的狀態 異常與否
- * @param {any} systemPath
- * @param {any} callback
- */
+* 在單一系統下，取得各個系統的狀態 異常與否
+* @param {any} systemPath
+* @param {any} callback
+*/
 function getOneSystemStateByBaja(systemPath, callback) {
  var _result = "";
  var _ss = "";
@ -302,9 +302,9 @@ function getOneSystemStateByBaja(systemPath, callback) {
 }

 /**
- * [首頁] 查詢異常數量
- * @param {any} callback
- */
+* [首頁] 查詢異常數量
+* @param {any} callback
+*/
 function getAlarmCountByBaja(callback) {
  var _result = { count: 0 };
  var _index = 0;
@ -330,9 +330,9 @@ function getAlarmCountByBaja(callback) {
 }

 /**
- * [首頁] 查詢復歸數量
- * @param {any} callback
- */
+* [首頁] 查詢復歸數量
+* @param {any} callback
+*/
 function getRecoverCountByBaja(callback) {
  var _result = { count: 0 };
  var _index = 0;
@ -358,9 +358,9 @@ function getRecoverCountByBaja(callback) {
 }

 /**
- * [首頁] 查詢已確認異常數量
- * @param {any} callback
- */
+* [首頁] 查詢已確認異常數量
+* @param {any} callback
+*/
 function getCheckedAckedCountByBaja(callback) {
  var _result = { count: 0 };
  var _index = 0;
@ -386,9 +386,9 @@ function getCheckedAckedCountByBaja(callback) {
 }

 /**
- * [首頁] 查詢未確認異常數量
- * @param {any} callback
- */
+* [首頁] 查詢未確認異常數量
+* @param {any} callback
+*/
 function getUnCheckedAckedCountByBaja(callback) {
  var _result = { count: 0 };
  var _index = 0;
@ -414,19 +414,21 @@ function getUnCheckedAckedCountByBaja(callback) {
 }

 /**
- * [首頁] 取得現在是異常的系統 (較快)
- * @param {any} callback
- */
+* [首頁] 取得現在是異常的系統 (較快)
+* @param {any} callback
+*/
 function getSystemAlarmByBaja(callback) {
  var _result = { count: 0, data: [] };
  var _index = 0;

  require(['baja!'], function (baja) {
+    // console.log("ip:202.39.218.221|foxs:4912|alarm:|bql:select alarmClass where isAlarm")
    //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 where isAlarm").get()
    baja.Ord.make("local:|foxs:|alarm:|bql:select alarmClass where isAlarm").get()
      .then(function (table) {
        return table.cursor({
          each: function (record) {
+            // console.log(record)
            let main = {};
            main.alarmClass = record.get('alarmClass');

@ -519,10 +521,10 @@ function getSystemAlarmByBaja(callback) {
 // }

 /**
- *  取得單一設備異常
- * @param {any} devicePath
- * @param {any} callback
- */
+*  取得單一設備異常
+* @param {any} devicePath
+* @param {any} callback
+*/
 function getOneDeviceAlarmByBaja(devicePath, callback) {
  let _sourceTmp;
  var _result = "";
@ -532,7 +534,7 @@ function getOneDeviceAlarmByBaja(devicePath, callback) {
  var _index = 0;

  require(['baja!'], function (baja) {
-            console.log("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 where alarmData.sourceName like '%" + devicePath + "%' order by timestamp desc");
+    // console.log("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 where alarmData.sourceName like '%" + devicePath + "%' order by timestamp desc");
    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 where alarmData.sourceName like '%" + devicePath + "%' order by timestamp desc").get()
      .then(function (table) {
        return table.cursor({
@ -559,6 +561,70 @@ function getOneDeviceAlarmByBaja(devicePath, callback) {
  });
 }

+function getOtherAlarmByBaja(startDate_millisecond, endDate_millisecond, isRecover, isAck, callback) {
+  var _result = { count: 0, data: [] };
+  var _index = 0;
+  var _recoverState = isRecover ? "!= null" : "= null";
+  var _ackState = isAck ? "= 'acked'" : "= 'unacked'";
+
+  let startUrl = "";
+  if (startDate_millisecond) {
+    startUrl = "timestamp.millis >= " + startDate_millisecond + " and ";
+  }
+  console.log("告警2", "local:|foxs:|alarm:|bql:select timestamp, ackTime, priority ,ackState, alarmClass, alarmClassDisplayName, alarmValue, alarmData, alarmData.sourceName, uuid, alarmData.msgText, alarmData.numericValue, alarmData.presentValue, alarmData.status, alarmData.toState, normalTime where " + startUrl + "timestamp.millis <= " + endDate_millisecond + " and normalTime " + _recoverState + " and ackState " + _ackState + " order by timestamp desc");
+  require(['baja!'], function (baja) {
+
+    baja.Ord.make("local:|foxs:|alarm:|bql:select timestamp, ackTime, priority ,ackState, alarmClass, alarmClassDisplayName, alarmValue, alarmData, alarmData.sourceName, uuid, alarmData.msgText, alarmData.numericValue, alarmData.presentValue, alarmData.status, alarmData.toState, normalTime where " + startUrl + "timestamp.millis <= " + endDate_millisecond + " and normalTime " + _recoverState + " and ackState " + _ackState + " order by timestamp desc").get()
+      .then(function (table) {
+        return table.cursor({
+          each: function (record) {
+            // console.log(record)
+            let main = {};
+            //   const alarmDisplayName = record.get('alarmData').get('sourceName').split(":")[1] ?? record.get('alarmData').get('sourceName').split(":")[0]
+            const alarmDisplayName = record.get('alarmData').get('sourceName').split(":")[1] ?? record.get('alarmData').get('sourceName')
+            _sourceTmp = alarmDisplayName.split('_');
+            let _bfName = _sourceTmp[1] + "-" + _sourceTmp[4]
+            let _sourceName = _sourceTmp.slice(0, 8).join("_");
+            _sourceTmp = _sourceTmp[7] + "-" + _sourceTmp[8];
+            console.log(record.get('alarmData').get('sourceName'), _bfName, _sourceName)
+
+            main.buildingFloorName_zh = _bfName;
+            main.sourceName_zh = _sourceName;
+            main.uuid = record.get('uuid').$val;
+            main.timestamp = record.get('timestamp').$cEncStr;
+            main.alarmClass = record.get('alarmClass');
+            main.point = _sourceTmp;
+            main.sourceTmp = _sourceTmp;
+            main.devicePath = _sourceName;
+            main.msgText = record.get('alarmData').get('msgText');
+            main.normalTime = record.get('normalTime');
+            main.priority = record.get('priority');
+            main.ackedTime = record.get('ackTime').$cEncStr;
+            main.ackState = record.get('ackState').$ordinal
+            if (_sourceTmp.includes("undefined")) {
+              main.buildingFloorName_zh = "無";
+              main.alarmClass = "系統/設備異常";
+              main.sourceTmp = "無";
+              main.msgText = "";
+              _result.data.push(main);
+            }
+
+            _index++;
+          },
+          after: function () {
+            _result.count = _index;
+            if (typeof callback === 'function') {
+              //console.log(_result)
+              callback(_result);
+            }
+          },
+          limit: -1,
+          offset: 0
+        });
+      });
+  });
+}
+
 function getAllDeviceAlarmByBaja(startDate_millisecond, endDate_millisecond, isRecover, isAck, callback) {
  var _result = { count: 0, data: [] };
  var _index = 0;
@ -569,7 +635,7 @@ function getAllDeviceAlarmByBaja(startDate_millisecond, endDate_millisecond, isR
  if (startDate_millisecond) {
    startUrl = "timestamp.millis >= " + startDate_millisecond + " and ";
  }
-    console.log("告警", "local:|foxs:|alarm:|bql:select timestamp, ackTime, priority ,ackState, alarmClass, alarmClassDisplayName, alarmValue, alarmData, alarmData.sourceName, uuid, alarmData.msgText, alarmData.numericValue, alarmData.presentValue, alarmData.status, alarmData.toState, normalTime where " + startUrl + "timestamp.millis <= " + endDate_millisecond + " and normalTime " + _recoverState + " and ackState " + _ackState + " order by timestamp desc");
+  //   console.log("告警", "local:|foxs:|alarm:|bql:select timestamp, ackTime, priority ,ackState, alarmClass, alarmClassDisplayName, alarmValue, alarmData, alarmData.sourceName, uuid, alarmData.msgText, alarmData.numericValue, alarmData.presentValue, alarmData.status, alarmData.toState, normalTime where " + startUrl + "timestamp.millis <= " + endDate_millisecond + " and normalTime " + _recoverState + " and ackState " + _ackState + " order by timestamp desc");
  require(['baja!'], function (baja) {

    baja.Ord.make("local:|foxs:|alarm:|bql:select timestamp, ackTime, priority ,ackState, alarmClass, alarmClassDisplayName, alarmValue, alarmData, alarmData.sourceName, uuid, alarmData.msgText, alarmData.numericValue, alarmData.presentValue, alarmData.status, alarmData.toState, normalTime where " + startUrl + "timestamp.millis <= " + endDate_millisecond + " and normalTime " + _recoverState + " and ackState " + _ackState + " order by timestamp desc").get()
@ -578,9 +644,8 @@ function getAllDeviceAlarmByBaja(startDate_millisecond, endDate_millisecond, isR
          each: function (record) {
            // console.log(record)
            let main = {};
-                        // console.log(record.get('alarmData').get('sourceName'),record.get('timestamp').$cEncStr)
-                        const alarmDisplayName = record.get('alarmData').get('sourceName').split(":")[1] ?? record.get('alarmData').get('sourceName').split(":")[0]
-                        //console.log(alarmDisplayName)
+            //   const alarmDisplayName = record.get('alarmData').get('sourceName').split(":")[1] ?? record.get('alarmData').get('sourceName').split(":")[0]
+            const alarmDisplayName = record.get('alarmData').get('sourceName').split(":")[1] ?? record.get('alarmData').get('sourceName')
            _sourceTmp = alarmDisplayName.split('_');
            let _bfName = _sourceTmp[1] + "-" + _sourceTmp[4]
            let _sourceName = _sourceTmp.slice(0, 8).join("_");
@ -599,10 +664,14 @@ function getAllDeviceAlarmByBaja(startDate_millisecond, endDate_millisecond, isR
            main.priority = record.get('priority');
            main.ackedTime = record.get('ackTime').$cEncStr;
            main.ackState = record.get('ackState').$ordinal
-                        if (!_sourceTmp.includes("undefined")) {
+            if (_sourceTmp.includes("undefined")) {
              // console.log(main.ackState)
-                            _result.data.push(main);
+              main.buildingFloorName_zh = "無";
+              main.alarmClass = "系統/設備異常";
+              main.sourceTmp = "無";
+              main.msgText = "";
            }
+            _result.data.push(main);
            _index++;
          },
          after: function () {
@ -660,10 +729,10 @@ function getDeviceAlarmCardByBaja(startDate_millisecond, endDate_millisecond, is
            main.priority = record.get('priority');
            main.ackedTime = record.get('ackTime').$cEncStr;
            main.ackState = record.get('ackState').$ordinal
-                        if (!_sourceTmp.includes("undefined")) {
-                            // console.log(main.ackState)
+            //   if (!_sourceTmp.includes("undefined")) {
+            //       // console.log(main.ackState)
+            //     }
            _result.data.push(main);
-                        }
            _index++;
          },
          after: function () {
@ -681,9 +750,9 @@ function getDeviceAlarmCardByBaja(startDate_millisecond, endDate_millisecond, is
 }

 /**
- * [首頁] 圓餅圖資料 - 全部的異常
- * @param {any} callback
- */
+* [首頁] 圓餅圖資料 - 全部的異常
+* @param {any} callback
+*/
 function getAlarmForChartDataByBaja(callback) {
  var _result = "";
  var _ss = "";
--- a/Frontend/js/n4js/bajatest.js
+++ b/Frontend/js/n4js/bajatest.js
@ -35,6 +35,7 @@ class subscriptionDevices {
    };

    setSubscribeDevicesCallBack = function (callBackFunc) {
+        // console.log(callBackFunc)
        if (callBackFunc != undefined && callBackFunc != null) {
            this.changeCallback = callBackFunc;
        }
@ -55,6 +56,8 @@ class subscriptionDevices {
            var sub = new baja.Subscriber();

            sub.attach('changed', function (prop) {
+                // console.log(prop)
+                // console.log(prop.getName())
                if (prop.getName() === 'out') {
                    var out_value = this.getOutDisplay();
                    var target_device_number = this.$parent.getDisplayName().split('_').slice(0, 5).join('_');
@ -83,7 +86,6 @@ class subscriptionDevices {
                        "point_name": point_name ? point_name : null,
                        "value": key
                    }
-
                    if (_this.changeCallback != undefined && _this.changeCallback != null) {
                        _this.changeCallback(modify_target_device, true); //第2參數用在平面圖，刷新畫面
                    }
@ -161,13 +163,12 @@ class subscriptionDevices {
                                if (_this.changeCallback != undefined && _this.changeCallback != null) {
                                    _this.changeCallback(modify_target_device);
                                }
-
-
                                baja.Ord.make("local:|foxs:|station:|" + this.getDisplay("slotPath"))
                                    .get()
                                    .then(function (component) {
                                        component_index++;
                                        var target_device_number = component.$parent.getDisplayName().split('_').slice(0, 5).join('_');
+                                        // console.log(component, component.getDisplayName())
                                        var point_name = component.getDisplayName();

                                        // //依據Facets判斷回傳的內容值為何
@ -517,7 +518,7 @@ function BajaSubscribeAlarmsByBql(ordPathForAlarm) {
        });

        //使用bql語法
-        console.log(`local:|foxs:|alarm:|bql:select top 1 timestamp, sourceState, normalTime where alarmData.sourceName like '%${ordPathForAlarm.area_tag}_${ordPathForAlarm.building_tag}_${ordPathForAlarm.system_tag}_${ordPathForAlarm.name_tag}_%' order by timestamp desc`);
+        // console.log(`local:|foxs:|alarm:|bql:select top 1 timestamp, sourceState, normalTime where alarmData.sourceName like '%${ordPathForAlarm.area_tag}_${ordPathForAlarm.building_tag}_${ordPathForAlarm.system_tag}_${ordPathForAlarm.name_tag}_%' order by timestamp desc`);
        baja.Ord.make(`local:|foxs:|alarm:|bql:select top 1 timestamp, sourceState, alarmData, alarmData.sourceName, normalTime where alarmData.sourceName like '%${ordPathForAlarm.area_tag}_${ordPathForAlarm.building_tag}_${ordPathForAlarm.system_tag}_${ordPathForAlarm.name_tag}_%' order by timestamp desc`)
            .get(
                function (table) {
@ -636,7 +637,7 @@ function BajaSubscribeElectricmeterByBql(ordPathForElectricmeter) {
        });

        //使用bql語法
-        console.log(`local:|foxs:|station:|slot:/${ordPathForElectricmeter.devicePath}|bql:select name, out, out.value, slotPath, facets from control:ControlPoint`);
+        // console.log(`local:|foxs:|station:|slot:/${ordPathForElectricmeter.devicePath}|bql:select name, out, out.value, slotPath, facets from control:ControlPoint`);
        baja.Ord.make(`local:|foxs:|station:|slot:/${ordPathForElectricmeter.devicePath}|bql:select name, out, out.value, slotPath, facets from control:ControlPoint`)
            .get(
                function (table) {
--- a/Frontend/js/n4js/historybaja.js
+++ b/Frontend/js/n4js/historybaja.js
@ -52,13 +52,12 @@ function getHistoryDataByBaja(devicePath, startDate_millisecond, endDate_millise
                        // else
                        //     _ss += ',{"deviceName":"' + deviceName + '", "value":' + record.get('value') + ', "timestamp":"' + record.get('timestamp').$cEncStr
                        //     + '"}';
-            _ss.push({
-              deviceName: deviceName, value: record.get('value'), timestamp: record.get('timestamp').$cEncStr
+                        _ss.push({deviceName:deviceName, value:record.get('value'), timestamp:record.get('timestamp').$cEncStr
                    });
                        _index++;
                    },
                    after: function () {
-            _result = { count: _index, data: _ss }
+                        _result={count: _index, data: _ss}
                        // _result += '{' + '"count": ' + _index + ', "data":[';
                        // _result += _ss;
                        // _result += ']}';
@ -72,7 +71,7 @@ function getHistoryDataByBaja(devicePath, startDate_millisecond, endDate_millise
                    offset: 0
                });
            })
-      .catch(() => {
+            .catch(()=>{
                console.log("error");
                // const res = JSON.stringify({count:0, data:[]})
                callback()
--- a/Frontend/js/site.js
+++ b/Frontend/js/site.js
@ -596,11 +596,11 @@ class Forge3DElevFull {
                        frags.forEach((fragProxy) => {
                            fragProxy.frag.position.z = this.elev3DOption.floorHeight.filter(x => x.floor == subData["CP"])[0]?.height ?? 0;
                            let start = 0;
-                            if (node === 13777 && start == 0) {
                            // 改變感測器熱點位置
-                                this.sensorObjs && this.sensorObjs[0]?.changePos(node + 2, fragProxy.frag.position.z);
-                                start = 1;
-                            }
+                            this.sensorObjs && this.sensorObjs[0]?.changePos(node+2, fragProxy.frag.position.z);
+                            // if (node === 15200 && start == 0) {
+                            //     start = 1;
+                            // }
                            fragProxy.frag.updateAnimTransform();
                        })
                        elevObj.obj.viewer.impl.sceneUpdated(true);
@ -649,11 +649,11 @@ class Forge3DElevFull {
                    frags.forEach((fragProxy) => {
                        fragProxy.frag.position.z = this.elev3DOption.floorHeight.filter(x => x.floor == subData["CP"])[0]?.height ?? 0;
                        let start = 0;
-                        if (node === 13777 && start == 0) {
-                            // 改變感測器熱點位置
-                            this.sensorObjs && this.sensorObjs[0]?.changePos(node + 2, fragProxy.frag.position.z);
-                            start = 1;
-                        }
+                        this.sensorObjs && this.sensorObjs[0]?.changePos(node+2, fragProxy.frag.position.z);
+                        // if (node === 15200 && start == 0) {
+                        //     // 改變感測器熱點位置
+                        //     start = 1;
+                        // }
                        fragProxy.frag.updateAnimTransform()
                    })
                    elevObj.obj.viewer.impl.sceneUpdated(true);
@ -714,8 +714,8 @@ class Forge3DSensor {
        this.DataVizCore = null;
        this.tempVal = 20;
        this.curDevice = option.curDevice ?? null;
-        this.selector = option.selector ?? "#forgeViewer"
-        this.elevCb = option.elevCb ?? null
+        this.selector=option.selector?? "#forgeViewer"
+        this.elevCb = option.elevCb?? null
        this.#init();
    }

@ -725,7 +725,7 @@ class Forge3DSensor {
        this.ordPath.name_tag = this.sysSubTag;
        this.dataVizExtn = await this.viewer.loadExtension("Autodesk.DataVisualization");
        this.DataVizCore = Autodesk.DataVisualization.Core;
-        await this.addHotPoint();
+        await this.registerHotPoint()
        this.changeColorForSensorHotspot(this.curDevice.forge_dbid, 35)
        this.subSensorDevice();
        this.elevCb()
@ -733,14 +733,14 @@ class Forge3DSensor {

    }

-    // 建立熱點
-    async addHotPoint() {
+    // // 建立熱點
+    // async addHotPoint() {

-        // this.dataVizExtn.removeAllViewables()
-        await this.registerHotPoint()
-        this.subSensorDevice();
-        // console.log("2",this.dataVizExtn)
-    }
+    //     // this.dataVizExtn.removeAllViewables()
+    //     await this.registerHotPoint()
+    //     this.subSensorDevice();
+    //     // console.log("2",this.dataVizExtn)
+    // }

    async registerHotPoint(color = "") {
        var viewer = this.viewer;
--- a/Frontend/js/yourteam/yourteam.jquery.datatables.js
+++ b/Frontend/js/yourteam/yourteam.jquery.datatables.js
@ -143,7 +143,7 @@ function fnInitJqDataTablesAjax(apiUrl, tag, sendData = null, columns, columns_d
    //let sData = data ? (data.Data ? JSON.stringify(data.Data) : null) : null;  
    if (sendData == null) { 
        sendData = function (json) {
-            console.log("讀取列表", json)
+            // console.log("讀取列表", json)
            if (json.code && json.code == "0000") {
                return json.data;
            }
--- a/Frontend/lib/skins/skin-master.css
+++ b/Frontend/lib/skins/skin-master.css
--- a/FrontendWebApi/ApiControllers/DeviceManageController.cs
+++ b/FrontendWebApi/ApiControllers/DeviceManageController.cs
@ -10,6 +10,7 @@ using Repository.FrontendRepository.Interface;
 using System;
 using System.Collections.Generic;
 using System.Collections.Specialized;
+using System.Data.SqlTypes;
 using System.Diagnostics;
 using System.IO;
 using System.Linq;
@ -261,6 +262,9 @@ namespace FrontendWebApi.ApiControllers
        {
            ApiResult<List<FloorList>> apiResult = new ApiResult<List<FloorList>>();

+            //是否顯示DeviceNode
+            string sqlStringqueryModuleLightNodeDisplay = $"SELECT system_value FROM variable WHERE system_type = 'module' AND system_key = 'displaynode'";
+            string  displayNode = await backendRepository.GetOneAsync<string>(sqlStringqueryModuleLightNodeDisplay);
            if (string.IsNullOrEmpty(fd.sub_system_tag))
            {
                apiResult.Code = "0001";
@ -317,7 +321,7 @@ namespace FrontendWebApi.ApiControllers
                    f.device_list = dl;
                }

-
+                apiResult.Module = displayNode;
                apiResult.Data = fl;
                apiResult.Code = "0000";
            }
@ -751,12 +755,30 @@ namespace FrontendWebApi.ApiControllers
                        @device_name_tag = p.device_name_tag,
                        @device_floor_tag = p.device_floor_tag
                    };
-                    var d = await backendRepository.GetAllAsync<DevForCor>($@"select device_guid,device_number,device_floor_tag,device_coordinate_3d,forge_dbid, full_name
+                    var dl = await backendRepository.GetAllAsync<DevForCor>($@"select device_guid,device_number,device_floor_tag,device_coordinate_3d,forge_dbid, full_name
                                                                                from device where deleted = 0 and device_area_tag = @device_area_tag and device_building_tag = @device_building_tag 
                                                                                and device_system_tag = @device_system_tag and device_name_tag = @device_name_tag 
                                                                                and device_floor_tag = ifnull(@device_floor_tag, device_floor_tag) ", param);

-                    apiResult.Data = d;
+                    foreach (var d in dl)
+                    {
+                        var sql_node = $@"SELECT
+                                            dn.device_node_guid,
+                                            dn.device_guid,
+                                            dn.full_name AS Device_node_full_name,
+                                            dn.device_node_coordinate,
+                                            dn.priority,
+			                                dn.forge_dbid
+                                        FROM device_node dn
+                                        WHERE dn.deleted = 0 AND dn.device_guid = @device_guid
+                                        ORDER BY dn.priority ASC";
+
+                        d.Device_nodes = await backendRepository.GetAllAsync<DeviceNode>(sql_node, new { device_guid = d.device_guid });
+                    }
+
+
+
+                    apiResult.Data = dl;
                    apiResult.Code = "0000";
                }
                else
--- a/FrontendWebApi/Models/Device.cs
+++ b/FrontendWebApi/Models/Device.cs
@ -149,6 +149,7 @@ namespace FrontendWebApi.Models
        public string device_coordinate_3d { get; set; }
        public string full_name { get; set; }
        public int? forge_dbid { get; set; }
+        public List<DeviceNode> Device_nodes { get; set; }
    }

    public class DevNodeForCor
--- a/FrontendWebApi/Models/Share.cs
+++ b/FrontendWebApi/Models/Share.cs
@ -202,6 +202,7 @@ namespace FrontendWebApi.Models
        ErrorCode errorCode = new ErrorCode();
        private string msg = string.Empty;
        public string Code { get; set; }
+        public string Module { get; set; }
        public string Msg
        {
            get