From f528ab87379086442e902d952a5dab3e421f0b25 Mon Sep 17 00:00:00 2001
From: Celeste <aafree2014@gmail.com>
Date: Fri, 10 Mar 2023 15:43:43 +0800
Subject: [PATCH] =?UTF-8?q?[=E5=89=8D=E5=8F=B0]=20=E5=91=8A=E8=AD=A6?=
 =?UTF-8?q?=E7=B3=BB=E7=B5=B1=20=E7=95=B0=E5=B8=B8=E9=A1=9E=E5=88=A5?=
 =?UTF-8?q?=E9=A1=AF=E7=A4=BA=E4=BF=AE=E6=AD=A3=20|=20=E7=B6=AD=E4=BF=AE?=
 =?UTF-8?q?=E6=96=B0=E5=A2=9E=E7=B7=A8=E8=BC=AF=E9=8C=AF=E8=AA=A4=E4=BF=AE?=
 =?UTF-8?q?=E6=AD=A3=20|=20=E7=9B=A3=E6=8E=A7=E7=B3=BB=E7=B5=B1(=E9=9B=BB?=
 =?UTF-8?q?=E6=A2=AF)=20=E5=B0=8F=E5=8D=A1=E7=89=87=E5=85=A7=E5=AE=B9?=
 =?UTF-8?q?=E4=BF=AE=E6=94=B9=20|=20=E7=9B=A3=E6=8E=A7=E7=B3=BB=E7=B5=B1?=
 =?UTF-8?q?=20forgeViewer=20=E9=AB=98=E5=BA=A6=E6=8E=A7=E5=88=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 Frontend/_alert.html       |   26 +-
 Frontend/_dashboard.html   |   40 +-
 Frontend/_operation.html   |   76 +-
 Frontend/_sysElevator.html |   77 +-
 Frontend/_sysMonAll.html   |   75 +-
 Frontend/index.html        | 3542 ++++++++++++++++++------------------
 6 files changed, 1962 insertions(+), 1874 deletions(-)

diff --git a/Frontend/_alert.html b/Frontend/_alert.html
index 8973901..588e5d4 100644
--- a/Frontend/_alert.html
+++ b/Frontend/_alert.html
@@ -6,17 +6,25 @@
 				<div class="col-auto">
 					<div class="btn-group">
 						<button id="returnFalse" onclick="setReturn(false)" type="button"
-							class="btn btn-secondary waves-effect waves-themed">未復歸</button>
+								class="btn btn-secondary waves-effect waves-themed">
+							未復歸
+						</button>
 						<button id="returnTrue" onclick="setReturn(true)" type="button"
-							class="btn btn-secondary waves-effect waves-themed">已復歸</button>
+								class="btn btn-secondary waves-effect waves-themed">
+							已復歸
+						</button>
 					</div>
 				</div>
 				<div class="col-auto">
 					<div class="btn-group">
 						<button id="unconfirmed" onclick="setConfirm(false)" type="button"
-							class="btn btn-secondary waves-effect waves-themed">未確認</button>
+								class="btn btn-secondary waves-effect waves-themed">
+							未確認
+						</button>
 						<button id="confirmed" onclick="setConfirm(true)" type="button"
-							class="btn btn-secondary waves-effect waves-themed">已確認</button>
+								class="btn btn-secondary waves-effect waves-themed">
+							已確認
+						</button>
 					</div>
 				</div>
 				<div class="col-auto">
@@ -25,13 +33,13 @@
 				<div class="col-auto">
 					<div class="form-group">
 						<input class="form-control" id="alr_startdate" data-val="" type="date" name="alr_startdate" value=""
-							style="cursor: pointer">
+							   style="cursor: pointer">
 					</div>
 				</div>
 				<div class="col-auto">
 					<div class="form-group">
 						<input class="form-control" id="alr_enddate" data-val="" type="date" name="alr_enddate" value=""
-							style="cursor: pointer">
+							   style="cursor: pointer">
 					</div>
 				</div>
 				<hr>
@@ -70,7 +78,7 @@
 
 <!-- Modal center 保養/維修 -->
 <div class="modal fade" id="alr_opeRecModal" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static"
-	data-keyboard="false">
+	 data-keyboard="false">
 	<div class="modal-dialog modal-dialog-centered" role="document">
 		<div class="modal-content">
 			<div class="modal-header">
@@ -164,7 +172,7 @@
 							<div class="form-group">
 								<label class="form-label" for="inpDescription">結果描述</label>
 								<textarea class="form-control" type="text" id="inpDescription" name="inpDescription"
-									rows="7"></textarea>
+										  rows="7"></textarea>
 							</div>
 						</div>
 						<div class="col-md-12">
@@ -702,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;
 				}
 			},
 			{
diff --git a/Frontend/_dashboard.html b/Frontend/_dashboard.html
index 62e113b..d234eb4 100644
--- a/Frontend/_dashboard.html
+++ b/Frontend/_dashboard.html
@@ -19,7 +19,7 @@
                             </h3>
                         </div>
                         <i class="fal fa-user position-absolute pos-right pos-bottom opacity-15 mb-n1 mr-n1"
-                            style="font-size:6rem"></i>
+                           style="font-size:6rem"></i>
                     </div>
                 </div>
                 <div class="col-sm-6 col-xl-6">
@@ -31,7 +31,7 @@
                             </h3>
                         </div>
                         <i class="fal fa-gem position-absolute pos-right pos-bottom opacity-15  mb-n1 mr-n4"
-                            style="font-size: 6rem;"></i>
+                           style="font-size: 6rem;"></i>
                     </div>
                 </div>
                 <div class="col-lg-12">
@@ -43,8 +43,7 @@
                         </div>
                         <div class="panel-container show">
                             <div class="panel-content poisition-relative">
-                                <div
-                                    class="p-1 position-absolute pos-right pos-top mt-3 mr-3 z-index-cloud d-flex align-items-center justify-content-center">
+                                <div class="p-1 position-absolute pos-right pos-top mt-3 mr-3 z-index-cloud d-flex align-items-center justify-content-center">
                                     <!--<div class="border-faded border-top-0 border-left-0 border-bottom-0 py-2 pr-4 mr-3 hidden-sm-down">
                                         <div class="text-right fw-500 l-h-n d-flex flex-column">
                                             <div class="h3 m-0 d-flex align-items-center justify-content-end">
@@ -84,7 +83,7 @@
                             </h3>
                         </div>
                         <i class="fal fa-lightbulb position-absolute pos-right pos-bottom opacity-15 mb-n5 mr-n6"
-                            style="font-size: 8rem;"></i>
+                           style="font-size: 8rem;"></i>
                     </div>
                 </div>
                 <div class="col-sm-6 col-xl-6">
@@ -96,7 +95,7 @@
                             </h3>
                         </div>
                         <i class="fal fa-globe position-absolute pos-right pos-bottom opacity-15 mb-n1 mr-n4"
-                            style="font-size: 6rem;"></i>
+                           style="font-size: 6rem;"></i>
                     </div>
                 </div>
                 <div class="col-lg-12">
@@ -179,11 +178,11 @@
                         <div class="panel-container h-100 show">
                             <div class="panel-content poisition-relative p-0 row p-0 h-100">
                                 <div class="col-12 mb-2 position-relative row m-0 justify-content-center"
-                                    style="max-height: 150px;">
+                                     style="max-height: 150px;">
                                     <canvas class="chart" id="errRecChart"></canvas>
                                 </div>
                                 <div class="col-12 mb-2 position-relative row m-0 justify-content-center"
-                                    style="max-height: 150px;">
+                                     style="max-height: 150px;">
                                     <canvas class="chart" id="errChkChart"></canvas>
                                 </div>
                             </div>
@@ -201,11 +200,11 @@
                             <div class="panel-content poisition-relative row p-0 h-100 p-0">
 
                                 <div class="col-12 mb-2 position-relative row m-0 justify-content-center"
-                                    style="max-height:150px;">
+                                     style="max-height:150px;">
                                     <canvas class="chart" id="worOrdErrChart"></canvas>
                                 </div>
                                 <div class="col-12 mb-2 position-relative row m-0 justify-content-center"
-                                    style="max-height:150px;">
+                                     style="max-height:150px;">
                                     <canvas class="chart" id="worOrdFinChart"></canvas>
                                 </div>
                             </div>
@@ -462,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]);
@@ -561,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) {
@@ -865,9 +866,10 @@
             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('.');
-                if (img?.length) {
-                    img[length - 1] = 'gif';
+                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");
                 }
             }
@@ -879,7 +881,7 @@
             if (alaDevPath.indexOf(sysPath) == -1) {
                 const img = $(`.btn-group.dev-group[data-id*='${sysPath}'] img`)[0]?.src.split('.');
                 if (img?.length) {
-                    img[length - 1] = 'png';
+                    img[img.length - 1] = 'png';
                     $(`.btn-group.dev-group[data-id*='${sysPath}'] img`)[0].src = img.join('.')
                     $(ele).removeClass("blink");
                 }
@@ -901,11 +903,13 @@
             }
 
             // 電梯移動訂閱程序載入
-            let forge3DElev = new Forge3DElevFull(elevOption);
-            forge3DElev.bajaEndCallback = function () {
-                endPageLoading();
+            if (elevatorShow) {
+                let forge3DElev = new Forge3DElevFull(elevOption);
+                forge3DElev.bajaEndCallback = function () {
+                    endPageLoading();
+                }
+                forge3DElev.init();
             }
-            forge3DElev.init();
         });
     }
 
diff --git a/Frontend/_operation.html b/Frontend/_operation.html
index 32e9f52..1242fdf 100644
--- 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">
@@ -633,7 +652,7 @@
 				{
 					"title": "異常代號",
 					"data": "error_code",
-					render:(data)=>{
+					render: (data) => {
 						return data?.split('-')[0] || '';
 					}
 				},
@@ -751,7 +770,7 @@
 				{
 					"title": "異常代號",
 					"data": "error_code",
-					render:(data)=>{
+					render: (data) => {
 						return data?.split('-')[0] || '';
 					}
 				},
@@ -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>`;
 		});
-
 		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");
 	}
 
diff --git a/Frontend/_sysElevator.html b/Frontend/_sysElevator.html
index 1917699..fb6c8b4 100644
--- a/Frontend/_sysElevator.html
+++ b/Frontend/_sysElevator.html
@@ -1,25 +1,61 @@
 <style>
-    .elevator { background-color: #fff; min-height: 520px; }
+    .elevator {
+        background-color: #fff;
+        min-height: 520px;
+    }
 
-    .elevator-table-wrapper { padding: 0.8rem; }
+    .elevator-table-wrapper {
+        padding: 0.8rem;
+    }
 
-    table.elevator-build { /*border: 1px double #000;*/ }
+    table.elevator-build { /*border: 1px double #000;*/
+    }
 
-    table.elevator-build td { padding: 0.2rem 0.5rem; height: 50px; width: 45px; border: 1px solid #000; }
+        table.elevator-build td {
+            padding: 0.2rem 0.5rem;
+            height: 50px;
+            width: 45px;
+            border: 1px solid #000;
+        }
 
-    elevator .elevator-body, elevator .elevator-header { padding: 0.7rem; }
+    elevator .elevator-body, elevator .elevator-header {
+        padding: 0.7rem;
+    }
 
-    .elevator-item { position: absolute; width: 43px; height: 47px; border: 4px solid orange; }
+    .elevator-item {
+        position: absolute;
+        width: 43px;
+        height: 47px;
+        border: 4px solid orange;
+    }
 
-    .elevator-item-toup { border: 4px solid rgba(255,255,255,0); position: absolute; border-bottom: 0; z-index: 2; }
+    .elevator-item-toup {
+        border: 4px solid rgba(255,255,255,0);
+        position: absolute;
+        border-bottom: 0;
+        z-index: 2;
+    }
 
-    .elevator-item-todown { border: 4px solid rgba(255,255,255,0); position: absolute; border-top: 0; z-index: 2; }
+    .elevator-item-todown {
+        border: 4px solid rgba(255,255,255,0);
+        position: absolute;
+        border-top: 0;
+        z-index: 2;
+    }
 
-    .table-compact td { padding: 0.2rem 0.3rem; }
+    .table-compact td {
+        padding: 0.2rem 0.3rem;
+    }
 
-    #emerTurn tr td:nth-child(2) { width: 50%; text-align: center; justify-content: center; }
+    #emerTurn tr td:nth-child(2) {
+        width: 50%;
+        text-align: center;
+        justify-content: center;
+    }
 
-    #emerTurn tr td:nth-child(1) { width: 35%; }
+    #emerTurn tr td:nth-child(1) {
+        width: 35%;
+    }
 </style>
 
 <div class="d-flex">
@@ -899,7 +935,7 @@
 
         setBuildFloor();
         setCards();
-        
+
         setEleManTable();
         show3D();
     })
@@ -977,7 +1013,7 @@
             }
         }
         //現在樓層
-        if (data.point_name == "CP") {            
+        if (data.point_name == "CP") {
             console.log("電梯樓層", matchDevice.device_number, data.value)
             $(`#${matchDevice.device_number}_card [name=curFloor]`).text(data.value);
         }
@@ -1211,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: "載重" },
@@ -1266,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 =
             [
@@ -2375,7 +2411,7 @@
     //                         ↑  樓層平面圖  ↑
     //=====================================================================
 
-    // 設置 模型隱藏或透明 
+    // 設置 模型隱藏或透明
     function setInviForge(type, devDbIds) {
         // console.log("devDbIds", devDbIds)
         if (type == "Hide") {
@@ -2403,8 +2439,7 @@
     //載入3D模型
     function load3DModel() {
         launchViewer(pageAct.urn, (viewer) => {
-            
-            
+            document.querySelector("#guiviewer3d-toolbar").style.display = "none";
             let elevOption = {
                 selector: "#forgeViewer",
                 viewer: viewer,
@@ -2428,8 +2463,8 @@
                 subDeviceSetStatus(data);
             }
             forge3DElev.init();
-             
-            
+
+
         });
 
     }
diff --git a/Frontend/_sysMonAll.html b/Frontend/_sysMonAll.html
index 631021a..82dac73 100644
--- a/Frontend/_sysMonAll.html
+++ b/Frontend/_sysMonAll.html
@@ -2,39 +2,39 @@
 </style>
 
 <div class="row">
-  <div id="leftDiv" class="col-sm-12 col-xl-6">
+    <div id="leftDiv" class="col-sm-12 col-xl-6">
 
-  </div>
-  <div id="rightDiv" class="col-sm-12 col-xl-6">
+    </div>
+    <div id="rightDiv" class="col-sm-12 col-xl-6">
 
-  </div>
+    </div>
 </div>
 
 <!-- Modal center Add -->
 <div class="modal fade" id="lightSchModal" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static"
      data-keyboard="false">
-  <div class="modal-dialog modal-dialog-centered" role="document" style="min-width:60%">
-    <div class="modal-content">
-      <div class="modal-header">
-        <h4 class="modal-title">
-          燈控排程
-        </h4>
-        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-          <span aria-hidden="true"><i class="fal fa-times"></i></span>
-        </button>
-      </div>
-      <div class="modal-body">
-        <!--<table id="lightSchTable" class="table table-bordered table-striped text-center m-0 w-100">
-        </table>-->
-        <div id="lightSchBlock" style="height:60vh"></div>
+    <div class="modal-dialog modal-dialog-centered" role="document" style="min-width:60%">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h4 class="modal-title">
+                    燈控排程
+                </h4>
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                    <span aria-hidden="true"><i class="fal fa-times"></i></span>
+                </button>
+            </div>
+            <div class="modal-body">
+                <!--<table id="lightSchTable" class="table table-bordered table-striped text-center m-0 w-100">
+                </table>-->
+                <div id="lightSchBlock" style="height:60vh"></div>
 
-      </div>
-      <div class="modal-footer">
-        <button type="button" class="btn btn-secondary" data-dismiss="modal">關閉</button>
-        <button type="button" id="lightSchSavBtn" class="btn btn-primary">儲存</button>
-      </div>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" data-dismiss="modal">關閉</button>
+                <button type="button" id="lightSchSavBtn" class="btn btn-primary">儲存</button>
+            </div>
+        </div>
     </div>
-  </div>
 </div>
 
 <script>
@@ -48,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");
@@ -82,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>
-                            <div name="forgeViewer" style="height:85vh;"></div>`;
+                            `;
         break;
     }
 
@@ -138,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;
@@ -383,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;
   }
 
@@ -405,7 +415,7 @@
       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]);
@@ -462,11 +472,12 @@
             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") {
+        if ((pageAct.sysSubTag == "M12" || pageAct.sysSubTag == "ELEV") && elevatorShow) {
           let elevOption = {
             selector: "[name=forgeViewer]",
             viewer: viewer,
diff --git a/Frontend/index.html b/Frontend/index.html
index 54fac7f..e483f55 100644
--- a/Frontend/index.html
+++ b/Frontend/index.html
@@ -10,45 +10,45 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
 <html lang="zh-hant-TW" class="root-text-lg">
 
 <head>
-  <meta charset="utf-8">
-  <title>
-    Marketing Dashboard - Application Intel - SmartAdmin v4.5.1
-  </title>
-  <meta name="description" content="Marketing Dashboard">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no, minimal-ui">
-  <!-- Call App Mode on ios devices -->
-  <meta name="apple-mobile-web-app-capable" content="yes" />
-  <!-- Remove Tap Highlight on Windows Phone IE -->
-  <meta name="msapplication-tap-highlight" content="no">
-  <!-- base css -->
-  <link id="vendorsbundle" rel="stylesheet" media="screen, print" href="lib/vendors.bundle.css">
-  <link id="appbundle" rel="stylesheet" media="screen, print" href="lib/app.bundle.css">
-  <link id="mytheme" rel="stylesheet" media="screen, print" href="#">
-  <link id="myskin" rel="stylesheet" media="screen, print" href="lib/skins/skin-master.css">
-  <link rel="stylesheet" href="lib/notifications/toastr/toastr.min.css" />
-  <link rel="stylesheet" href="lib/dropzone/dropzone.css" />
-  <!-- Place favicon.ico in the root directory -->
-  <link rel="apple-touch-icon" sizes="180x180" href="img/favicon/apple-touch-icon.png">
-  <link rel="icon" type="image/png" sizes="32x32" href="img/favicon/favicon-32x32.png">
-  <link rel="mask-icon" href="img/favicon/safari-pinned-tab.svg" color="#5bbad5">
-  <!-- Font Awesome -->
-  <link href="lib/fontawesome-free/css/all.min.css" rel="stylesheet" />
-  <link href="lib/jquery-ui/jquery-ui.min.css" rel="stylesheet" />
+    <meta charset="utf-8">
+    <title>
+        Marketing Dashboard - Application Intel - SmartAdmin v4.5.1
+    </title>
+    <meta name="description" content="Marketing Dashboard">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no, minimal-ui">
+    <!-- Call App Mode on ios devices -->
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <!-- Remove Tap Highlight on Windows Phone IE -->
+    <meta name="msapplication-tap-highlight" content="no">
+    <!-- base css -->
+    <link id="vendorsbundle" rel="stylesheet" media="screen, print" href="lib/vendors.bundle.css">
+    <link id="appbundle" rel="stylesheet" media="screen, print" href="lib/app.bundle.css">
+    <link id="mytheme" rel="stylesheet" media="screen, print" href="#">
+    <link id="myskin" rel="stylesheet" media="screen, print" href="lib/skins/skin-master.css">
+    <link rel="stylesheet" href="lib/notifications/toastr/toastr.min.css" />
+    <link rel="stylesheet" href="lib/dropzone/dropzone.css" />
+    <!-- Place favicon.ico in the root directory -->
+    <link rel="apple-touch-icon" sizes="180x180" href="img/favicon/apple-touch-icon.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="img/favicon/favicon-32x32.png">
+    <link rel="mask-icon" href="img/favicon/safari-pinned-tab.svg" color="#5bbad5">
+    <!-- Font Awesome -->
+    <link href="lib/fontawesome-free/css/all.min.css" rel="stylesheet" />
+    <link href="lib/jquery-ui/jquery-ui.min.css" rel="stylesheet" />
 
-  <!--<link href="lib/chart.js/Chart.min.css" rel="stylesheet" />-->
-  <link href="lib/jstree-master/themes/default/style.min.css" rel="stylesheet" />
-  <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" 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 href="lib/chart.js/Chart.min.css" rel="stylesheet" />-->
+    <link href="lib/jstree-master/themes/default/style.min.css" rel="stylesheet" />
+    <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" 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">
 
 
 </head>
@@ -79,1762 +79,1762 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
 -->
 
 <body class="mod-bg-1 mod-nav-link mod-skin-dark mod-hide-info-card nav-function-top nav-function-fixed mod-lean-subheader desktop chrome webkit pace-done blur">
-  <!-- DOC: script to save and load page settings -->
-  <script>
-    /**
-     *	This script should be placed right after the body tag for fast execution
-     *	Note: the script is written in pure javascript and does not depend on thirdparty library
-     **/
-    'use strict';
-
-    var classHolder = document.getElementsByTagName("BODY")[0],
-      /**
-       * Load from localstorage
-       **/
-      themeSettings = (localStorage.getItem('themeSettings')) ? JSON.parse(localStorage.getItem('themeSettings')) :
-        {},
-      themeURL = themeSettings.themeURL || '',
-      themeOptions = themeSettings.themeOptions || '';
-    /**
-     * Load theme options
-     **/
-    if (themeSettings.themeOptions) {
-      classHolder.className = themeSettings.themeOptions;
-      console.log("%c✔ Theme settings loaded", "color: #148f32");
-    }
-    else {
-      console.log("%c✔ Heads up! Theme settings is empty or does not exist, loading default settings...", "color: #ed1c24");
-    }
-    if (themeSettings.themeURL && !document.getElementById('mytheme')) {
-      var cssfile = document.createElement('link');
-      cssfile.id = 'mytheme';
-      cssfile.rel = 'stylesheet';
-      cssfile.href = themeURL;
-      document.getElementsByTagName('head')[0].appendChild(cssfile);
-
-    }
-    else if (themeSettings.themeURL && document.getElementById('mytheme')) {
-      document.getElementById('mytheme').href = themeSettings.themeURL;
-    }
-    /**
-     * Save to localstorage
-     **/
-    var saveSettings = function () {
-      themeSettings.themeOptions = String(classHolder.className).split(/[^\w-]+/).filter(function (item) {
-        return /^(nav|header|footer|mod|display)-/i.test(item);
-      }).join(' ');
-      if (document.getElementById('mytheme')) {
-        themeSettings.themeURL = document.getElementById('mytheme').getAttribute("href");
-      };
-      localStorage.setItem('themeSettings', JSON.stringify(themeSettings));
-    }
-    /**
-     * Reset settings
-     **/
-    var resetSettings = function () {
-      localStorage.setItem("themeSettings", "");
-    }
-
-  </script>
-  <!-- BEGIN Page Wrapper -->
-  <div class="page-wrapper">
-    <div class="page-inner">
-      <!-- BEGIN Left Aside -->
-      <!-- END Left Aside -->
-      <div class="page-content-wrapper">
-        <!-- BEGIN Page Header -->
-        <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">
-              <img src="img/logo.png" alt="SmartAdmin WebApp" aria-roledescription="logo">
-
-              <!--<span class="page-logo-text mr-1">SmartAdmin WebApp</span>-->
-              <!--<span class="position-absolute text-white opacity-50 small pos-top pos-right mr-2 mt-n2"></span>
-              <i class="fal fa-angle-down d-inline-block ml-1 fs-lg color-primary-300"></i>-->
-            </a>
-
-          </div>
-          <!--DOC: nav menu layout change shortcut-->
-          <div class="hidden-md-down dropdown-icon-menu position-relative">
-            <a href="#" class="header-btn btn js-waves-off" data-action="toggle"
-               data-class="nav-function-hidden" title="Hide Navigation">
-              <i class="ni ni-menu"></i>
-            </a>
-            <ul>
-              <li>
-                <a href="#" class="btn js-waves-off" data-action="toggle"
-                   data-class="nav-function-minify" title="Minify Navigation">
-                  <i class="ni ni-minify-nav"></i>
-                </a>
-              </li>
-              <li>
-                <a href="#" class="btn js-waves-off" data-action="toggle"
-                   data-class="nav-function-fixed" title="Lock Navigation">
-                  <i class="ni ni-lock-nav"></i>
-                </a>
-              </li>
-            </ul>
-          </div>
-          <!--DOC: mobile button appears during mobile width-->
-          <div class="hidden-lg-up">
-            <a href="#" class="header-btn btn press-scale-down" data-action="toggle"
-               data-class="mobile-nav-on">
-              <i class="ni ni-menu"></i>
-            </a>
-          </div>
-
-          <div class="dropdown">
-            <a class="dropdown-toggle fs-1" href="javascript:;" role="button" id="buiActDrop"
-               data-target="buiList" data-toggle="dropdown" aria-haspopup="true">
-
-            </a>
-            <div id="buiList" class="dropdown-menu dropdown-select-menu js-auto-close">
-
-            </div>
-          </div>
-
-          <div class="ml-auto d-flex" id="froLisPage">
-
-          </div>
-          <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">
-                <!--<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>
-                </div>
-
-              </a>
-
-            </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">
-                <!--<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 class="fas fa-user-circle fs-1-5 w-100 text-center"></i>
-                  <span id="usrName" class="text-truncate text-truncate-header hidden-xs-down"></span>
-                </div>
-
-              </a>
-              <div id="logoutList" class="dropdown-menu dropdown-menu-right dropdown-lg">
-
-                <a id="logout" href="javascript:;" class="dropdown-item fw-500 pt-3 pb-3">
-                  <span>登出</span>
-                </a>
-              </div>
-            </div>
-
-          </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-1">智慧大樓管理平台</label>
-          </div>
-        </header>
-        <!-- END Page Header -->
-        <!-- BEGIN Page Content -->
-        <!-- the #js-page-content id is needed for some plugins to initialize -->
-        <!--@RenderBody()-->
-        <div id="app">
-
-        </div>
-
-        <!-- this overlay is activated only when mobile menu is triggered -->
-        <div class="page-content-overlay" data-action="toggle" data-class="mobile-nav-on"></div>
-
-        <div id="sysMonNavbar" class="yt-navbar yt-left-navbar">
-          <div class="yt-navbar-content">
-            <ul id="sysMonBtnList">
-            </ul>
-          </div>
-        </div>
-        <!-- END Page Content -->
-        <!-- BEGIN Page Footer -->
-        <!--<footer class="page-footer" role="contentinfo">
-            <div class="d-flex align-items-center flex-1 text-muted">
-                <span class="hidden-md-down fw-700">2022 © SmartAdmin by&nbsp;<a href='https://www.gotbootstrap.com' class='text-primary fw-500' title='gotbootstrap.com' target='_blank'>gotbootstrap.com</a></span>
-            </div>
-            <div>
-                <ul class="list-table m-0">
-                    <li><a href="intel_introduction.html" class="text-secondary fw-700">About</a></li>
-                    <li class="pl-3"><a href="info_app_licensing.html" class="text-secondary fw-700">License</a></li>
-                    <li class="pl-3"><a href="info_app_docs.html" class="text-secondary fw-700">Documentation</a></li>
-                    <li class="pl-3 fs-xl"><a href="https://wrapbootstrap.com/user/MyOrange" class="text-secondary" target="_blank"><i class="fal fa-question-circle" aria-hidden="true"></i></a></li>
-                </ul>
-            </div>
-        </footer>-->
-        <!-- END Page Footer -->
-        <!-- BEGIN Shortcuts -->
-        <!-- END Shortcuts -->
-        <!-- BEGIN Color profile -->
-        <!-- this area is hidden and will not be seen on screens or screen readers -->
-        <!-- we use this only for CSS color refernce for JS stuff -->
-        <p id="js-color-profile" class="d-none">
-          <span class="color-primary-50"></span>
-          <span class="color-primary-100"></span>
-          <span class="color-primary-200"></span>
-          <span class="color-primary-300"></span>
-          <span class="color-primary-400"></span>
-          <span class="color-primary-500"></span>
-          <span class="color-primary-600"></span>
-          <span class="color-primary-700"></span>
-          <span class="color-primary-800"></span>
-          <span class="color-primary-900"></span>
-          <span class="color-info-50"></span>
-          <span class="color-info-100"></span>
-          <span class="color-info-200"></span>
-          <span class="color-info-300"></span>
-          <span class="color-info-400"></span>
-          <span class="color-info-500"></span>
-          <span class="color-info-600"></span>
-          <span class="color-info-700"></span>
-          <span class="color-info-800"></span>
-          <span class="color-info-900"></span>
-          <span class="color-danger-50"></span>
-          <span class="color-danger-100"></span>
-          <span class="color-danger-200"></span>
-          <span class="color-danger-300"></span>
-          <span class="color-danger-400"></span>
-          <span class="color-danger-500"></span>
-          <span class="color-danger-600"></span>
-          <span class="color-danger-700"></span>
-          <span class="color-danger-800"></span>
-          <span class="color-danger-900"></span>
-          <span class="color-warning-50"></span>
-          <span class="color-warning-100"></span>
-          <span class="color-warning-200"></span>
-          <span class="color-warning-300"></span>
-          <span class="color-warning-400"></span>
-          <span class="color-warning-500"></span>
-          <span class="color-warning-600"></span>
-          <span class="color-warning-700"></span>
-          <span class="color-warning-800"></span>
-          <span class="color-warning-900"></span>
-          <span class="color-success-50"></span>
-          <span class="color-success-100"></span>
-          <span class="color-success-200"></span>
-          <span class="color-success-300"></span>
-          <span class="color-success-400"></span>
-          <span class="color-success-500"></span>
-          <span class="color-success-600"></span>
-          <span class="color-success-700"></span>
-          <span class="color-success-800"></span>
-          <span class="color-success-900"></span>
-          <span class="color-fusion-50"></span>
-          <span class="color-fusion-100"></span>
-          <span class="color-fusion-200"></span>
-          <span class="color-fusion-300"></span>
-          <span class="color-fusion-400"></span>
-          <span class="color-fusion-500"></span>
-          <span class="color-fusion-600"></span>
-          <span class="color-fusion-700"></span>
-          <span class="color-fusion-800"></span>
-          <span class="color-fusion-900"></span>
-        </p>
-        <!-- END Color profile -->
-      </div>
-    </div>
-  </div>
-  <!-- END Page Wrapper -->
-  <!-- BEGIN Messenger -->
-  <div class="modal fade js-modal-messenger modal-backdrop-transparent" tabindex="-1" role="dialog"
-       aria-hidden="true">
-    <div class="modal-dialog modal-dialog-right">
-      <div class="modal-content h-100">
-        <div class="dropdown-header bg-trans-gradient d-flex align-items-center w-100">
-          <div class="d-flex flex-row align-items-center mt-1 mb-1 color-white">
-            <span class="mr-2">
-              <span class="rounded-circle profile-image d-block"
-                    style="background-image:url('img/demo/avatars/avatar-d.png'); background-size: cover;"></span>
-            </span>
-            <div class="info-card-text">
-              <a href="javascript:void(0);" class="fs-lg text-truncate text-truncate-lg text-white"
-                 data-toggle="dropdown" aria-expanded="false">
-                Tracey Chang
-                <i class="fal fa-angle-down d-inline-block ml-1 text-white fs-md"></i>
-              </a>
-              <div class="dropdown-menu">
-                <a class="dropdown-item" href="#">Send Email</a>
-                <a class="dropdown-item" href="#">Create Appointment</a>
-                <a class="dropdown-item" href="#">Block User</a>
-              </div>
-              <span class="text-truncate text-truncate-md opacity-80">IT Director</span>
-            </div>
-          </div>
-          <button type="button" class="close text-white position-absolute pos-top pos-right p-2 m-1 mr-2"
-                  data-dismiss="modal" aria-label="Close">
-            <span aria-hidden="true"><i class="fal fa-times"></i></span>
-          </button>
-        </div>
-        <div class="modal-body p-0 h-100 d-flex">
-          <!-- BEGIN msgr-list -->
-          <div class="msgr-list d-flex flex-column bg-faded border-faded border-top-0 border-right-0 border-bottom-0 position-absolute pos-top pos-bottom">
-            <div>
-              <div class="height-4 width-3 h3 m-0 d-flex justify-content-center flex-column color-primary-500 pl-3 mt-2">
-                <i class="fal fa-search"></i>
-              </div>
-              <input type="text" class="form-control bg-white" id="msgr_listfilter_input"
-                     placeholder="Filter contacts" aria-label="FriendSearch"
-                     data-listfilter="#js-msgr-listfilter">
-            </div>
-            <div class="flex-1 h-100 custom-scroll">
-              <div class="w-100">
-                <ul id="js-msgr-listfilter" class="list-unstyled m-0">
-                  <li>
-                    <a href="#" class="d-table w-100 px-2 py-2 text-dark hover-white"
-                       data-filter-tags="tracey chang online">
-                      <div class="d-table-cell align-middle status status-success status-sm ">
-                        <span class="profile-image-md rounded-circle d-block"
-                              style="background-image:url('img/demo/avatars/avatar-d.png'); background-size: cover;"></span>
-                      </div>
-                      <div class="d-table-cell w-100 align-middle pl-2 pr-2">
-                        <div class="text-truncate text-truncate-md">
-                          Tracey Chang
-                          <small class="d-block font-italic text-success fs-xs">
-                            Online
-                          </small>
-                        </div>
-                      </div>
-                    </a>
-                  </li>
-                  <li>
-                    <a href="#" class="d-table w-100 px-2 py-2 text-dark hover-white"
-                       data-filter-tags="oliver kopyuv online">
-                      <div class="d-table-cell align-middle status status-success status-sm ">
-                        <span class="profile-image-md rounded-circle d-block"
-                              style="background-image:url('img/demo/avatars/avatar-b.png'); background-size: cover;"></span>
-                      </div>
-                      <div class="d-table-cell w-100 align-middle pl-2 pr-2">
-                        <div class="text-truncate text-truncate-md">
-                          Oliver Kopyuv
-                          <small class="d-block font-italic text-success fs-xs">
-                            Online
-                          </small>
-                        </div>
-                      </div>
-                    </a>
-                  </li>
-                  <li>
-                    <a href="#" class="d-table w-100 px-2 py-2 text-dark hover-white"
-                       data-filter-tags="dr john cook phd away">
-                      <div class="d-table-cell align-middle status status-warning status-sm ">
-                        <span class="profile-image-md rounded-circle d-block"
-                              style="background-image:url('img/demo/avatars/avatar-e.png'); background-size: cover;"></span>
-                      </div>
-                      <div class="d-table-cell w-100 align-middle pl-2 pr-2">
-                        <div class="text-truncate text-truncate-md">
-                          Dr. John Cook PhD
-                          <small class="d-block font-italic fs-xs">
-                            Away
-                          </small>
-                        </div>
-                      </div>
-                    </a>
-                  </li>
-                  <li>
-                    <a href="#" class="d-table w-100 px-2 py-2 text-dark hover-white"
-                       data-filter-tags="ali amdaney online">
-                      <div class="d-table-cell align-middle status status-success status-sm ">
-                        <span class="profile-image-md rounded-circle d-block"
-                              style="background-image:url('img/demo/avatars/avatar-g.png'); background-size: cover;"></span>
-                      </div>
-                      <div class="d-table-cell w-100 align-middle pl-2 pr-2">
-                        <div class="text-truncate text-truncate-md">
-                          Ali Amdaney
-                          <small class="d-block font-italic fs-xs text-success">
-                            Online
-                          </small>
-                        </div>
-                      </div>
-                    </a>
-                  </li>
-                  <li>
-                    <a href="#" class="d-table w-100 px-2 py-2 text-dark hover-white"
-                       data-filter-tags="sarah mcbrook online">
-                      <div class="d-table-cell align-middle status status-success status-sm">
-                        <span class="profile-image-md rounded-circle d-block"
-                              style="background-image:url('img/demo/avatars/avatar-h.png'); background-size: cover;"></span>
-                      </div>
-                      <div class="d-table-cell w-100 align-middle pl-2 pr-2">
-                        <div class="text-truncate text-truncate-md">
-                          Sarah McBrook
-                          <small class="d-block font-italic fs-xs text-success">
-                            Online
-                          </small>
-                        </div>
-                      </div>
-                    </a>
-                  </li>
-                  <li>
-                    <a href="#" class="d-table w-100 px-2 py-2 text-dark hover-white"
-                       data-filter-tags="ali amdaney offline">
-                      <div class="d-table-cell align-middle status status-sm">
-                        <span class="profile-image-md rounded-circle d-block"
-                              style="background-image:url('img/demo/avatars/avatar-a.png'); background-size: cover;"></span>
-                      </div>
-                      <div class="d-table-cell w-100 align-middle pl-2 pr-2">
-                        <div class="text-truncate text-truncate-md">
-                          oliver.kopyuv@gotbootstrap.com
-                          <small class="d-block font-italic fs-xs">
-                            Offline
-                          </small>
-                        </div>
-                      </div>
-                    </a>
-                  </li>
-                  <li>
-                    <a href="#" class="d-table w-100 px-2 py-2 text-dark hover-white"
-                       data-filter-tags="ali amdaney busy">
-                      <div class="d-table-cell align-middle status status-danger status-sm">
-                        <span class="profile-image-md rounded-circle d-block"
-                              style="background-image:url('img/demo/avatars/avatar-j.png'); background-size: cover;"></span>
-                      </div>
-                      <div class="d-table-cell w-100 align-middle pl-2 pr-2">
-                        <div class="text-truncate text-truncate-md">
-                          oliver.kopyuv@gotbootstrap.com
-                          <small class="d-block font-italic fs-xs text-danger">
-                            Busy
-                          </small>
-                        </div>
-                      </div>
-                    </a>
-                  </li>
-                  <li>
-                    <a href="#" class="d-table w-100 px-2 py-2 text-dark hover-white"
-                       data-filter-tags="ali amdaney offline">
-                      <div class="d-table-cell align-middle status status-sm">
-                        <span class="profile-image-md rounded-circle d-block"
-                              style="background-image:url('img/demo/avatars/avatar-c.png'); background-size: cover;"></span>
-                      </div>
-                      <div class="d-table-cell w-100 align-middle pl-2 pr-2">
-                        <div class="text-truncate text-truncate-md">
-                          oliver.kopyuv@gotbootstrap.com
-                          <small class="d-block font-italic fs-xs">
-                            Offline
-                          </small>
-                        </div>
-                      </div>
-                    </a>
-                  </li>
-                  <li>
-                    <a href="#" class="d-table w-100 px-2 py-2 text-dark hover-white"
-                       data-filter-tags="ali amdaney inactive">
-                      <div class="d-table-cell align-middle">
-                        <span class="profile-image-md rounded-circle d-block"
-                              style="background-image:url('img/demo/avatars/avatar-m.png'); background-size: cover;"></span>
-                      </div>
-                      <div class="d-table-cell w-100 align-middle pl-2 pr-2">
-                        <div class="text-truncate text-truncate-md">
-                          +714651347790
-                          <small class="d-block font-italic fs-xs opacity-50">
-                            Missed Call
-                          </small>
-                        </div>
-                      </div>
-                    </a>
-                  </li>
-                </ul>
-                <div class="filter-message js-filter-message"></div>
-              </div>
-            </div>
-            <div>
-              <a class="fs-xl d-flex align-items-center p-3">
-                <i class="fal fa-cogs"></i>
-              </a>
-            </div>
-          </div>
-          <!-- END msgr-list -->
-          <!-- BEGIN msgr -->
-          <div class="msgr d-flex h-100 flex-column bg-white">
-            <!-- BEGIN custom-scroll -->
-            <div class="custom-scroll flex-1 h-100">
-              <div id="chat_container" class="w-100 p-4">
-                <!-- start .chat-segment -->
-                <div class="chat-segment">
-                  <div class="time-stamp text-center mb-2 fw-400">
-                    Jun 19
-                  </div>
-                </div>
-                <!--  end .chat-segment -->
-                <!-- start .chat-segment -->
-                <div class="chat-segment chat-segment-sent">
-                  <div class="chat-message">
-                    <p>
-                      Hey Tracey, did you get my files?
-                    </p>
-                  </div>
-                  <div class="text-right fw-300 text-muted mt-1 fs-xs">
-                    3:00 pm
-                  </div>
-                </div>
-                <!--  end .chat-segment -->
-                <!-- start .chat-segment -->
-                <div class="chat-segment chat-segment-get">
-                  <div class="chat-message">
-                    <p>
-                      Hi
-                    </p>
-                    <p>
-                      Sorry going through a busy time in office. Yes I analyzed the solution.
-                    </p>
-                    <p>
-                      It will require some resource, which I could not manage.
-                    </p>
-                  </div>
-                  <div class="fw-300 text-muted mt-1 fs-xs">
-                    3:24 pm
-                  </div>
-                </div>
-                <!--  end .chat-segment -->
-                <!-- start .chat-segment -->
-                <div class="chat-segment chat-segment-sent chat-start">
-                  <div class="chat-message">
-                    <p>
-                      Okay
-                    </p>
-                  </div>
-                </div>
-                <!--  end .chat-segment -->
-                <!-- start .chat-segment -->
-                <div class="chat-segment chat-segment-sent chat-end">
-                  <div class="chat-message">
-                    <p>
-                      Sending you some dough today, you can allocate the resources to this
-                      project.
-                    </p>
-                  </div>
-                  <div class="text-right fw-300 text-muted mt-1 fs-xs">
-                    3:26 pm
-                  </div>
-                </div>
-                <!--  end .chat-segment -->
-                <!-- start .chat-segment -->
-                <div class="chat-segment chat-segment-get chat-start">
-                  <div class="chat-message">
-                    <p>
-                      Perfect. Thanks a lot!
-                    </p>
-                  </div>
-                </div>
-                <!--  end .chat-segment -->
-                <!-- start .chat-segment -->
-                <div class="chat-segment chat-segment-get">
-                  <div class="chat-message">
-                    <p>
-                      I will have them ready by tonight.
-                    </p>
-                  </div>
-                </div>
-                <!--  end .chat-segment -->
-                <!-- start .chat-segment -->
-                <div class="chat-segment chat-segment-get chat-end">
-                  <div class="chat-message">
-                    <p>
-                      Cheers
-                    </p>
-                  </div>
-                </div>
-                <!--  end .chat-segment -->
-                <!-- start .chat-segment for timestamp -->
-                <div class="chat-segment">
-                  <div class="time-stamp text-center mb-2 fw-400">
-                    Jun 20
-                  </div>
-                </div>
-                <!--  end .chat-segment for timestamp -->
-              </div>
-            </div>
-            <!-- END custom-scroll  -->
-            <!-- BEGIN msgr__chatinput -->
-            <div class="d-flex flex-column">
-              <div class="border-faded border-right-0 border-bottom-0 border-left-0 flex-1 mr-3 ml-3 position-relative shadow-top">
-                <div class="pt-3 pb-1 pr-0 pl-0 rounded-0" tabindex="-1">
-                  <div id="msgr_input" contenteditable="true"
-                       data-placeholder="Type your message here..."
-                       class="height-10 form-content-editable"></div>
-                </div>
-              </div>
-              <div class="height-8 px-3 d-flex flex-row align-items-center flex-wrap flex-shrink-0">
-                <a href="javascript:void(0);" class="btn btn-icon fs-xl width-1 mr-1"
-                   data-toggle="tooltip" data-original-title="More options" data-placement="top">
-                  <i class="fal fa-ellipsis-v-alt color-fusion-300"></i>
-                </a>
-                <a href="javascript:void(0);" class="btn btn-icon fs-xl mr-1" data-toggle="tooltip"
-                   data-original-title="Attach files" data-placement="top">
-                  <i class="fal fa-paperclip color-fusion-300"></i>
-                </a>
-                <a href="javascript:void(0);" class="btn btn-icon fs-xl mr-1" data-toggle="tooltip"
-                   data-original-title="Insert photo" data-placement="top">
-                  <i class="fal fa-camera color-fusion-300"></i>
-                </a>
-                <div class="ml-auto">
-                  <a href="javascript:void(0);" class="btn btn-info">Send</a>
-                </div>
-              </div>
-            </div>
-            <!-- END msgr__chatinput -->
-          </div>
-          <!-- END msgr -->
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <div id="noticeBlock"
-       style="position: fixed; top: 70px; right: 0px; padding: 20px; transition: 0.2s; z-index: 50000; height:100%; ">
-
-  </div>
-
-  <!--<button id="testsysbtn" class="btn btn-info col-1">系統監控(測試用)</button>-->
-  <!-- END Messenger -->
-  <!-- BEGIN Page Settings -->
-  <!-- END Page Settings -->
-  <!-- base vendor bundle:
-       DOC: if you remove pace.js from core please note on Internet Explorer some CSS animations may execute before a page is fully loaded, resulting 'jump' animations
-                  + pace.js (recommended)
-                  + jquery.js (core)
-                  + jquery-ui-cust.js (core)
-                  + popper.js (core)
-                  + bootstrap.js (core)
-                  + slimscroll.js (extension)
-                  + app.navigation.js (core)
-                  + ba-throttle-debounce.js (core)
-                  + waves.js (extension)
-                  + smartpanels.js (extension)
-                  + src/../jquery-snippets.js (core) -->
-  <!-- verdors.bundle.js 已含有 jquery Library v3.5.1-->
-  <script src="lib/vendors.bundle.js"></script>
-  <!-- toast 第三方套件 若 require 此套件只能用 define 使用，先暫時 html 引用-->
-  <script src="lib/notifications/toastr/toastr.min.js"></script>
-  <script src="js/toast.js"></script>
-  <script src="lib/echarts.min.js"></script>
-  <!--The order of scripts is irrelevant. Please check out the plugin pages for more details about these plugins below:-->
-  <script src="lib/statistics/easypiechart/easypiechart.bundle.js"></script>
-
-
-
-  <!--Bajascript-->
-  <script src="js/bajascript/bscriptReq.js"></script>
-  <!--<script type='text/javascript' src='/module/js/com/tridium/js/ext/require/require.min.js?version=1496767636459'></script>-->
-  <script src='js/bajascript/require.js'></script>
-
-  <script src="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/viewer3D.js"></script>
-  <script src="js/forge/forgemodel.js"></script>
-  <script src="js/yourteam/plugins/yt-alert/ytpop-alert.js"></script>
-
-
-  <script type='text/javascript'>
-    define('niagaraSystemProperties', function () {
-      return {
-      };
-    });
-  </script>
-  <script src="js/n4js/bajatest.js"></script>
-  <script src="js/n4js/electricmeterbaja.js"></script>
-  <script src="js/n4js/elevatorbaja.js"></script>
-  <script src="js/bajascript/require.config.js"></script>
-  <script src="js/FileSaver.js"></script>
-
-
-
-  <script>
-
-    /*$('#js-page-content').smartPanel();*/
-    var cookies = null;
-    var jwt = null;
-    var loadingTip = '';
-    var pageAct = {};  //記錄全頁面已選擇項目
-    var timeOuters = [];
-    pageAct.AreaTag = "";
-    if (location.href.indexOf("ord") != -1) {
-      location.href = "/file/index.html"
-    }
-    var lastPage = sessionStorage.getItem("lastPage");
-    // 執行初步 Loading
-    var loadEle = pageLoading();
-    var errRecTable = null, opeRecTable = null;
-    var tolSubList = [];
-    var allDevices = [];
-
-    /**
-    * 頁面 Loading 建立
-    * */
-    function pageLoading(text = null) {
-      let background = $(`<div class="loading-bg"></div>`);
-      let aleObj = YT.Alert.Tip(text || "讀取中，請稍後", "show");
-      $(background)[0]._aleObj = aleObj;
-      $("body").css("overflow", "hidden");
-      $("body .page-content-wrapper").append(background);
-      $(background).animate({ opacity: 1 }, 300);
-      return background;
-    }
-
-    try {
-      $(function () {
-        // 二次引用 jquery.js
-        // - 在 require 內部程序需要引用 jquery，由於 require 的套件需要依賴 jquery ，就算 HTML 已經引用 jquery， require 也無法參考
-        // - 上方 HTML 引用套件若有使用 jquery 內存數據程序 (ex: $(x).data() , $(x).trigger("custom event") , $.fn.custom ...)
-        // - 會被清洗，有類似程序需放入 loadPack1 Function rquired 引用
-        // (原 datatable.bundle.js require 會出問題，先以 cdn datatable.min.js引用)
-        require(["jquery"], loadedBasePack);
-
-      })
-
-      /**
-       * jquery.js 二次引用後 Callback，載入第三方套件
-       * */
-      function loadedBasePack() {
-        require(
-          [
-            "lib/bootstrap/bootstrap.bundle.min",
-            "lib/app.bundle",
-            "lib/app.menu",
-            "datatables.net.b4",
-            "n4js/alarmbaja",
-            "n4js/historybaja",
-            "n4js/accmanbaja",
-            "lib/statistics/flot/flot.bundle",
-            "lib/statistics/peity/peity.bundle",
-            "lib/jquery-validation/dist/jquery.validate",
-            /*"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",
-            "lib/dropzone/dropzone-min",
-            "lib/jstree-master/jstree.min",
-            "lib/notifications/sweetalert2/sweetalert2.bundle",
-          ], loadedMasterPack);
-
-      }
-      /**
-       * 第三方套件引用後 Callback，載入額外套件
-       * */
-      function loadedMasterPack() {
-        require(
-          [
-            "yourteam/yourteam.utility.class",
-            "yourteam/yourteam.ajax.class",
-            "yourteam/yourteam.jquery.datatables",
-            "yourteam/plugins/yt-tooltip/yt-tooltip",
-            "yourteam/plugins/yt-tab/yt-tab",
-            "yourteam/plugins/yt-navbar/yt-navbar",
-            "yourteam/plugins/yt-notice/yt-notice",
-            "style",
-
-          ], function () {
-            require(["init", "site"], loadedJsPack)
-          });
-      }
-
-
-      /**
-       * 全數套件讀取完成 Callback
-       * */
-      function loadedJsPack() {
-        cookies = new YourTeam.Utility.Cookie();
-        jwt = cookies.get("JWT-Authorization");
-        pageAct.AreaTag = initAreaTag;
-        loadEvent();
-
-        if (!jwt) {
-          if (location.href.indexOf("localhost:5966") != -1) {
-            location.href = "login.html";
-          }
-          myBaja = new MyBaja();
-          myBaja.setMyUserAccount(Login);
-        } else {
-          isValidLogin();
-        }
-
-        $(loadEle).Loading("close");
-      }
-
-      /**
-       * 登入驗證完成 Callback
-       * */
-      function isValidLogin() {
-
-        getUserInfo();
-        iniFroList();
-        showMainSys();
-        getBuiList();
-        getSysMonBtnList();
-        checkDevState();
-        loadNoticeConSta();
-
-        allDevices = getAllDevice();
-        if (lastPage) {
-          let lastPageAct = {};
-          if (isJSON(sessionStorage.getItem("pageAct"))) {
-            lastPageAct = JSON.parse(sessionStorage.getItem("pageAct"));
-          }
-          if ((lastPageAct.sysSubTag && lastPage == "systemMonitor") || lastPage == "sysElevator"
-            //  || lastPage == "sysSensor"
-          ) {
-            $(`#subSysBtn${lastPageAct.sysSubTag}`).click();
-            $("#sysMonTopBtn").YTTab("set");
-          } else {
-            $(`[data-tabname=topFunBtn][data-page=${lastPage}]`).YTTab("setAndClick");
-          }
-
-          /*$(`[name=topFunBtn][data-page=${lastPage}]`).click();*/
-        } else {
-          $("#app").load("_dashboard.html", loadCallback);
-        }
-
-        timeOutGetData();
-
-        function getBuiList() {
-          let url = baseApiUrl + "/api/Device/GetBuild";
-          ytAjax = new YourTeam.Ajax(url, null, function (res) {
-            if (!res || res.code != "0000" || !res.data) {
-
-            } else {
-              let strHtml = ``;
-              $.each(res.data, (index, buiObj) => {
-                strHtml += `<a id="buiBtn${buiObj.building_tag}" data-urn="${buiObj.urn_3D}" class="dropdown-item" href="javascript:;">${buiObj.full_name}</a>`;
-              })
-              $("#buiList").append(strHtml).droSetItem();  //droSetItem 預設第一筆 active
-            }
-          }, null, "POST").send();
-        }
-
-        //lily test
-        function checkDevState() {
-          //TPE_B1_LT_L1
-          //main_system_tag: pageAct.sysMainTag,
-          //building_tag: pageAct.buiTag,
-          //floor_tag: pageAct.floTag,
-          let systemPath = "TPE_B1";
-          // if (pageAct != undefined && pageAct != null && pageAct.sysMainTag != null && pageAct.buiTag != null) {
-          //     systemPath = "TPE_" + pageAct.buiTag + "_" + pageAct.sysMainTag + "_" + "EL";
-          // }
-          getOneSystemAlarmStateByBaja(systemPath, callbackForCheckDevState);
-          // console.log("systemP: " + systemPath);
-          // console.log("devList: " + deviceList[0].device_guid + ", " + deviceList[3].device_guid + ", " + deviceList[8].device_guid);
-          //callbackForCheckDevState("test");
-        }
-
-        function callbackForCheckDevState(result) {
-          // console.log("------ " + result);
-          // $.each(deviceList, (index, devObj) => {
-          //     if ((`${devObj.device_guid}`) == '4ed28a93-5025-11ed-b23e-0242ac110002'
-          //         || (`${devObj.device_guid}`) == '5d9fdff0-5343-43fe-86f4-bd73cdb15111') {
-          //         var str = "";
-          //         $(`#${devObj.device_guid}`).empty();
-          //         str = `<span class="status status-danger d-inline-block"><img src="${baseImgUrl + varPathImg + devObj.device_master_icon}" class="profile-image rounded-circle" onerror="defDev(this)" alt="..."></span> ${devObj.full_name}`;
-          //         $(`#${devObj.device_guid}`).append(str);
-          //     }
-          // })
-
-          // console.log(result);
-        }
-      }
-
-      // page loaded callback
-      function loadCallback() {
-        initTabsByEle();
-        resetYTTooltip();
-        $("#sysMonTopBtn").YTNavbar("hide");
-      }
-
-      // 事件先行讀取
-      function loadEvent() {
-        onEvent("click", "[name=topFunBtn]", function () {
-          _ytTabInited = [];
-          let page = $(this).data("page");
-          if (!page) {
-            return;
-          }
-          if (page != "systemMonitor" && page != "sysElevator"
-            //  && page != "sysSensor"
-          ) {
-            $("#sysMonBtnList [name=topFunBtn]").removeClass("active");
-            pageAct.sysMainTag = null;
-            pageAct.sysSubTag = null;
-          } else {
-            setSysTagForPageAct(this);
-            $("#sysMonTopBtn").YTTab("set");
-            $(`#subSysBtn${pageAct.sysSubTag}`).YTTab("set");
-          }
-          // 取消當前所有 baja 訂閱
-          $.each(tolSubList, (idx, sub) => {
-            sub.unsubscribeAll();
-            sub.detach();
-          })
-          // 清空 baja 訂閱紀錄
-          tolSubList = [];
-          // 清空 loading 狀態
-          endPageLoading();
-
-          $(loadEle).Loading("close");
-          $(".yt-alert").YTAlert().hide();
-          // 取得使用者資訊
-          getUserInfo();
-          // 存取現在頁面 (重整讀取紀錄用)
-          sessionStorage.setItem("lastPage", page);
-          sessionStorage.setItem("pageAct", JSON.stringify(pageAct));
-          // 讀取子頁面
-          $("#app").load(`_${page}.html`, loadCallback);
-
-        })
-
-        onEvent("click", "#logout", function () {
-          localStorage.removeItem("JWT-Authorization");
-          location.href = "/logout";
-        })
-
-
-        onEvent("active:change", "#buiList", function (e, actEle) {
-          if (actEle) {
-            pageAct.buiTag = $(actEle).prop("id").split("buiBtn")[1];
-            pageAct.urn = $(actEle).data("urn");
-          }
-
-        })
-
-        onEvent("yt:tab:change", "#lightSch-tab", function () {
-          if (pageAct.sysMainTag == "LT" && $("#lightSchModal").length != 0) {
-            setLightSchBlcok ? setLightSchBlcok(this) : "";
-            $("#lightSchModal").modal("show");
-          }
-        })
-
-        onEvent("yt:tab:prechange", "[data-tabname=topFunBtn]", function (e, arg) {
-          if ($(this)[0].id == "sysMonTopBtn" || !$(this).data("page")) {
-            arg.cancel = true;
-          }
-        })
-
-        onEvent("scroll", window, function () {
-          if ($(window).scrollTop() != 0) {
-            $("#noticeBlock").css("top", 0);
-          } else {
-            $("#noticeBlock").css("top", 70);
-          }
-        })
-
-        onEvent("click", "#testsysbtn", function () {
-
-        })
-
-        //onEvent("click", "button[id^=noticeChkBtn]", function () {
-        //    $(this).parents(".toast").YTNotice("hide");
-        //})
-
-        onEvent("click", "button[id^=noticeChkBtn]", function () {  /**button[id^=bajaAckBtn] */
-          let uuid = $(this).data("uuid");
-          let url = window.location.origin + "/obix/alarm/" + uuid + "/ack";
-          let myBaja = new MyBaja();
-          myBaja.setMyUserAccount((data) => {
-            let sendData = '<obj is="obix:AckAlarmIn"><str name="ackUser" val="obix" /></obj>';
-            $.post(url, sendData, (rel) => {
-              console.log(rel)
-              $(this).parents(".toast").YTNotice("hide");
-            }, "text")
-          })
-        })
-
-        onEvent("click", "#toggleNoticeBtn", function () {
-          chaNoticeConSta();
-        })
-
-        $(window).on("timeout:3s", function () {
-
-          getSystemAlarmByBaja((data) => {
-            if (typeof getAlarmSub != "undefined" && getAlarmSub) {
-              getAlarmSub(data);
-            }
-
-            alarmIconBlink();
-
-          })
-          getAlarm();
-        })
-
-      }
-
-      // 登入驗證
-      function Login(account) {
-        console.log(account)
-        /*if ($("#login-form").valid()) {*/
-
-        var url = baseApiUrl + "/api/Login/";
-        var send_data = {
-          account: account,
-          password: "rJ2T5Kkj"
-        }
-        if (location.href.indexOf("localhost:5966") != -1) {
-          location.href = "login.html";
-        }
-        $.ajax({
-          method: "post",
-          url: url,
-          data: JSON.stringify(send_data),
-          async: false,
-          contentType: "application/json; charset=UTF-8",
-          dataType: 'json',
-          success: function (rel) {
-            if (rel.code != "0000") {
-              toast_error(rel.msg || common.SysErr);
-              return;
-            }
-            else {
-              /*toast_ok(rel.msg);*/
-              cookies.create("JWT-Authorization", rel.data.token, 12 * 60 * 60 * 1000);
-              isValidLogin();
-            }
-          },
-          error: function (xhr, textStatus, thrownError) {
-            alert(common.SysErr);
-          }
-        });
-
-      }
-
-      //==============================================================================
-      //                       ↓  系統監控 - 共用 Function ↓
-      //==============================================================================
-
-      // Card - 基本資料 Table
-      function drawInfoTabBlo(devGuid) {
-
-        let tabEle = $(`<table class="table table-bordered table-striped text-center m-0">`);
-        let tbody = tabEle.append("<tbody>");
-        let columnNames = ["設備編號", "設備名稱"];
-
-        $.each(columnNames, (index, colName) => {
-          let tr = $("<tr></tr>");
-          let td = $("<td></td>");
-          td.text(colName);
-          tr.append(td);
-          tbody.append(tr);
-        })
-
-        let url = baseApiUrl + "/api/Device/GetBaseDevice";
-        let sendData = {
-          device_guid: devGuid,
-        };
-        objSendData.Data = sendData;
-        ytAjax = new YourTeam.Ajax(url, objSendData, function (res) {
-          if (!res || res.code != "0000" || !res.data) {
-
-          } else {
-            tbody.find("tr").eq(0).append(creEle("td", res.data.device_number));
-            tbody.find("tr").eq(1).append(creEle("td", res.data.full_name));
-          }
-        }, null, "POST").send();
-
-        return tabEle.prop("outerHTML");
-      }
-
-      // Card - 異常紀錄 block
-      function drawErrRecTabBlo() {
-        let strHtml = `<table id="errRecTable" class="table table-bordered table-striped text-center m-0 w-100">
-
-                                                                          </table>`
-        return strHtml;
-      }
-
-      // Card - 運維紀錄 block
-      function drawOpeRecTabBlo() {
-        let strHtml = `<table id="opeRecTable" class="table table-bordered table-striped text-center m-0 w-100">
-
-                                                                          </table>`
-        return strHtml;
-      }
-
-      // Card 呈現初始化
-      function initPopover(type = null, extOption = {}, selector = "[name=devItem]") {
-        if (type == null && pageAct.sysMainTag == "LT") {
-          type = "light";
-        }
-
-        $(selector).each((index, ele) => {
-          let devNum = $(ele).data("number"); //設備編號
-          let devGuid = $(ele).data("id"); //guid
-          let devName = $(ele).data("name"); //full_name
-          let lightHtml = type == "light" ? `<button type="button" data-toggle="tooltip" data-placement="bottom" title="燈控排程" id="lightSch-tab" class="px-2 btn btn-icon border-0 nav-link mx-1" role="tab" data-tabname="cardTab" data-target="#lightSch"><i class="fas fa-calendar-alt icon fa-2x"></i></button>` : "";
-
-          let option = {
-            html: `<div class="card m-1 border device-wrap" data-number="${devNum}" data-position="left">
-                                      <div class="card-header p-3">
-
-                                          <div class="position-absolute mr-5" style="word-break: break-all;">
-                                              <label class="m-0 mt-2">${devName}</label>
-                                          </div>
-                                          <div id="card-tab" class="row justify-content-end nav nav-tabs" role="tablist">
-                                              <button type="button" id="state-tab"
-                                              data-toggle="tooltip" data-placement="bottom" title="即時監控"
-                                              class="px-2 btn btn-icon border-0 nav-link active mx-1" role="tab" data-tabname="cardTab" data-target="#state"><i class="fa fa-desktop icon fa-2x"></i></button>
-                                              ${lightHtml}
-                                              <button type="button" id="info-tab"
-                                              data-toggle="tooltip" data-placement="bottom" title="基本資料"
-                                              class="px-2 btn btn-icon border-0 nav-link mx-1" role="tab" data-tabname="cardTab" data-target="#info"><i class="fa fa-cog icon fa-2x"></i></button>
-                                              <button type="button"
-                                              d data-toggle="tooltip" data-placement="bottom" title="告警資料"
-                                              id="errRec-tab" class=" px-2 btn btn-icon border-0 nav-link mx-1 position-relative " role="tab" data-tabname="cardTab" data-target="#errRec"><i class="fas fa-exclamation-triangle fa-2x"></i></button>
-                                              <button type="button"
-                                              data-toggle="tooltip" data-placement="bottom" title="運維紀錄"
-                                              id="opeRec-tab" class=" px-2 btn btn-icon border-0 nav-link mx-1" role="tab" data-tabname="cardTab" data-target="#opeRec"><i class="fa fa-bars icon fa-2x"></i></button>
-
-                                              <button type="button" class="px-2 btn btn-icon border-0 nav-link mx-1"><i class="fas fa-times text-white-50 fa-2x" data-close="yttooltip"></i></button>
-
-                                          </div>
-                                      </div>
-                                      <div class="card-body p-2 tab-content w-100">
-                                          <div id="state" class="show active w-100" data-tabname="cardTab" data-tabrole="child" >
-                                              ${drawStateTabBlo(devNum)}
-                                          </div>
-                                          <div id="info" data-tabname="cardTab" data-tabrole="child">
-
-                                          </div>
-                                          <div id="errRec" data-tabname="cardTab" data-tabrole="child">
-                                              ${drawErrRecTabBlo()}
-                                          </div>
-                                          <div id="opeRec" data-tabname="cardTab" data-tabrole="child">
-                                              ${drawOpeRecTabBlo()}
-                                          </div>
-                                      </div>
-                                  </div>`,
-            group: "device",
-            // 在 _sysElevator.html 及 _sysMonAll.html 會用到
-            onShow: function (tooltipEle, oriEle) {
-              // 執行 pop 視窗上方 Tab 類別
-              new YT.Tab({ tabName: "cardTab" });
-              // 系統監控才會有 data-devobj 屬性
-              let devObj = $(oriEle).data("devobj");
-              // 讀取運維列表
-              loadOpeRecTable(devGuid);
-              // 讀取異常列表
-              loadErr($(oriEle).data("number"));
-              // 讀取設備基本資料列表
-              $(tooltipEle).find("#info").html(typeof drawInfoTabBlo != "undefined" ? drawInfoTabBlo(devGuid) : "");
-              // 聚焦熱點
-              const eleDbId = $(oriEle).data("dbId")
-              if (eleDbId) {
-                if (alarmDbIdList.some(dbId => dbId == eleDbId)) {
-                  changeScaleForHotspot(eleDbId)
-                }
-                else {
-                  controlFocusHotspot(eleDbId);
-                }
-              }
-              // 3D 視角 ZOOM IN 聚焦
-
-              if (devObj) {
-                moveViewToDevice(devObj?.forge_dbid);
-              }
-
-              // pop 視窗卡片可拖移功能初始化
-              $(tooltipEle).draggable({
-                cursor: "move",
-                handle: ".card-header",  // 只能通过卡片的标题栏拖拽
-                containment: "document",
-                scroll: true
-              });
-              // pop 視窗卡片可縮放功能初始化
-              // $(tooltipEle).resizable({
-              //     // resize: function (event, ui) {
-              //     //     let iframe = $(ui.element).find("iframe");
-              //     //     if (iframe.length != 0) {
-              //     //         if (ui.size.width != ui.originalSize.width) {
-              //     //             iframe.css("width", "100%");
-              //     //         } else if (ui.size.height != ui.originalSize.height) {
-              //     //             iframe.css("height", "100%");
-              //     //         }
-              //     //     }
-              //     //     let cardBodyHeight = $(ui.element).find(".card-body").css("height");
-              //     //     $(ui.element).find(".scrolledTable").css("height", cardBodyHeight)
-
-              //     //     errRecTable.draw(false)
-              //     // },
-              //     // minWidth: 200,
-              //     // minHeight: 150,
-              // });
-              // 電梯管理 - Card table 更新
-              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(eleDbId, false);
-                }
-              }
-              // sysMonFloor Echart 解除 focus
-              typeof chartUnFocus != "undefined" ? chartUnFocus(oriEle) : "";
-            }
-          };
-
-          $.extend(option, extOption);
-
-          $(ele).YTTooltip(option);
-        })
-      }
-
-      // 卡片設備名稱點擊事件
-      function devItemNameEvent() {
-        onEvent("click", "[name=devItemName]", function () {
-          let devNum = $(this).data("number");
-          let devObj = $(`[name=devItem][data-number=${devNum}]`).data("devobj");
-          moveViewToDevice(devObj.forge_dbid);
-        })
-      }
-
-      // Card - 運維紀錄 Table
-      function loadOpeRecTable(devGuid) {
-        if (opeRecTable) {
-          opeRecTable.destroy();
-        }
-        let url = baseApiUrl + "/api/Device/GetOpeDevice?device_guid=" + devGuid;
-        let tag = "#opeRecTable";
-
-        let column_defs = [
-          { "targets": [0], "width": "8%", "sortable": true },
-          { "targets": [1], "width": "8%", "sortable": true },
-          { "targets": [2], "width": "7%", "sortable": true },
-          { "targets": [3], "width": "7%", "sortable": true },
-        ];
-
-        let columns = [
-          {
-            "title": "類型",
-            "data": "work_type_name",
-          },
-          {
-            "title": "項目",
-            "data": "fix_do",
-          },
-          {
-            "title": "處理人員",
-            "data": "work_person_name",
-          },
-          {
-            "title": "發生/完成時間",
-            "data": "finishTime",
-            "render": function (data, type, row) {
-              return row.createdAt + "<br>" + data;
-            },
-          },
-
-        ];
-
-        opeRecTable = new YourTeam.JqDataTables.getTableByAjax(url, tag, null, columns, column_defs, null, null, null, null, null, null, "<'scrolledTable'tpi>");
-      }
-
-      function loadLightSchTable(devGuid) {
-
-        /*let url = baseApiUrl + "/api/Device/GetOpeDevice?device_guid=" + devGuid;*/
-        let url = `https://63772efc5c47776512165937.mockapi.io/api/GetLightSche`;
-        let tag = "#lightSchTable";
-
-        let column_defs = [
-          { "targets": [0], "width": "14%", "sortable": true },
-          { "targets": [1], "width": "14%", "sortable": true },
-          { "targets": [2], "width": "14%", "sortable": true },
-          { "targets": [3], "width": "14%", "sortable": true },
-          { "targets": [4], "width": "14%", "sortable": true },
-          { "targets": [5], "width": "14%", "sortable": true },
-          { "targets": [6], "width": "16%", "sortable": true },
-        ];
-
-        let columns = [
-          {
-            "title": "序號",
-            "data": null,
-            "render": function (data, type, row, meta) {
-              return meta.row + 1;
-            },
-          },
-          {
-            "title": "排程名稱",
-            "data": "sch_name",
-          },
-          {
-            "title": "設備數量",
-            "data": "dev_cnt",
-          },
-          {
-            "title": "排程設定",
-            "data": "sch_set",
-          },
-          {
-            "title": "動作",
-            "data": "action",
-          },
-          {
-            "title": "狀態",
-            "data": "status",
-          },
-          {
-            "title": "功能",
-            "data": "sch_id",
-            "render": function (data, type, row) {
-              let btnDiv = creDiv(["row", "m-0", "justify-content-center"], { "style": "gap:10px" });
-              let icon = creI(["fas", "fa-pencil-alt"]);
-              btnDiv.append(creBtnHtml("觸發執行", "lightSchTabTogBtn" + data, null, ["btn", "btn-success"]));
-              btnDiv.append(creBtn("修改", "lightSchTabEdiBtn" + data, null, ["btn", "btn-danger"], { "toggle": "modal", "target": "#delModal" }).append(icon));
-              return btnDiv.outerHtml();
-            },
-          },
-
-        ];
-
-        let lightSchTable = new YourTeam.JqDataTables.getTableByAjax(url, tag, null, columns, column_defs, null, null, null, null, null, null, "tpi");
-      }
-
-      function controlFocusHotspot(dbId, open = true) {
-        // console.log("dbId", alarmDbIdList,dbId)
-        changeColorForHotspot(dbId, open ? "focus" : null);
-        changeScaleForHotspot(dbId, open);
-      }
-
-      // Baja 取得異常紀錄
-      function loadErr(allPath) {
-        if (allPath != undefined && allPath != null) {
-
-          getOneDeviceAlarmTop10ByBaja(allPath, callbackForErr);
+    <!-- DOC: script to save and load page settings -->
+    <script>
+        /**
+         *	This script should be placed right after the body tag for fast execution
+         *	Note: the script is written in pure javascript and does not depend on thirdparty library
+         **/
+        'use strict';
+
+        var classHolder = document.getElementsByTagName("BODY")[0],
+            /**
+             * Load from localstorage
+             **/
+            themeSettings = (localStorage.getItem('themeSettings')) ? JSON.parse(localStorage.getItem('themeSettings')) :
+                {},
+            themeURL = themeSettings.themeURL || '',
+            themeOptions = themeSettings.themeOptions || '';
+        /**
+         * Load theme options
+         **/
+        if (themeSettings.themeOptions) {
+            classHolder.className = themeSettings.themeOptions;
+            console.log("%c✔ Theme settings loaded", "color: #148f32");
         }
         else {
-          console.log("no device");
+            console.log("%c✔ Heads up! Theme settings is empty or does not exist, loading default settings...", "color: #ed1c24");
         }
-      }
-
-      // Card - 異常紀錄 Table
-      function callbackForErr(result) {
-        // console.log("@@@",result)
-        if (errRecTable) {
-          errRecTable.destroy();
-        }
-
-        let tag = "#errRecTable";
-        let datas;
-
-        let column_defs = [
-          { "targets": [0], "width": "15%", "sortable": true },
-          { "targets": [1], "width": "25%", "sortable": true },
-          { "targets": [2], "width": "25%", "sortable": true },
-          { "targets": [3], "width": "35%", "sortable": true },
-        ];
-
-        let columns = [
-          {
-            "title": "異常ID",
-            "data": "uuid",
-
-          },
-          {
-            "title": "異常原因",
-            "data": "msgText",
-          },
-          {
-            "title": "ACK確認",
-            "data": "ackState",
-          },
-          {
-            "title": "發生/完成時間",
-            "data": "normalTime",
-            // "render": function (data, type, row) {
-            //     return row.timestamp + "<br>" + data;
-            // },
-          },
-
-        ];
-
-        let json_object = JSON.parse(result);
-        datas = json_object['data'];
-        errRecTable = new YourTeam.JqDataTables.getTableByStatic(tag, datas, columns, column_defs, null, null, null, null, "<'scrolledTable'tpi>");
-
-      }
-
-      //根據 data-type 設置顏色 (判斷後台是否有設定，若無則帶預設)
-      function setLightColor() {
-        $(".dev-card").each((index, ele) => {
-          let type = $(ele).find("[data-light-type]").data("light-type");
-          let isFlashing = false;
-          let color = "#000";
-          switch (type) {
-            case "normal":
-              color = pageAct.sysSubObj.device_normal_color ?? "var(--theme-success)";
-              isFlashing = pageAct.sysSubObj.device_normal_flashing == "1";
-              break;
-            case "close":
-              color = pageAct.sysSubObj.device_close_color ?? "var(--theme-secondary)";
-              isFlashing = pageAct.sysSubObj.device_close_flashing == "1";
-              break;
-            case "error":
-              color = pageAct.sysSubObj.device_error_color ?? "var(--theme-danger)";
-              isFlashing = pageAct.sysSubObj.device_error_flashing == "1";
-              break;
-          }
-          $(ele).find("[data-light-type]").css("background-color", color);
-          //是否閃爍
-          if (isFlashing) {
-            $(ele).addClass("light-flash");
-          }
-        })
-      }
-
-      function crePosPopover(position, obj) {
-        let _position = {};
-        _position.tpLeft = position[0];
-        _position.tpTop = position[1];
-        _position.tpOffHeight = 24;
-        let parentEle = creDiv();
-        parentEle.append(`<a href="javascript:;" name="devItem" class=" ml-2 mb-0 ">詳細資料</a>`);
-        parentEle.data("id", obj.device_guid);
-        parentEle.data("number", obj.device_number);
-        parentEle.data("dbId", obj._dbId);
-        parentEle.data("name", obj.full_name);
-        initPopover(null, _position, parentEle);
-
-        return parentEle;
-      }
-
-      // 設置 Forge 3D 溫度條
-      function setTopHeatBar() {
-        let strHtml = `<canvas name="forgeHeatBar" width="200" height="30" style="z-index:9999"></canvas>`;
-        return strHtml;
-      }
-
-      //==============================================================================
-      //                       ↑  系統監控 - 共用 Function ↑
-      //==============================================================================
-
-    } catch (e) {
-      $(loadEle).Loading("close");
-    }
-
-    function setSysTagForPageAct(obj) {
-      pageAct.sysMainTag = $(obj).data("subSysObj").main_system_tag;
-      pageAct.sysSubTag = $(obj).data("subSysObj").sub_system_tag;
-      pageAct.sysSubName = $(obj).data("subSysObj").full_name;
-      pageAct.sysSubObj = $(obj).data("subSysObj");
-      getDevItem();
-    }
-
-    function getDevItem() {
-      let url = baseApiUrl + "/api/Device/GetDeviceItem";
-
-      objSendData.Data = {
-        main_system_tag: pageAct.sysMainTag,
-        sub_system_tag: pageAct.sysSubTag,
-      }
-      ytAjax = new YourTeam.Ajax(url, objSendData, function (res) {
-        if (!res || res.code != "0000" || !res.data) {
-
-        } else {
-          pageAct.devItems = res.data;
-        }
-      }, null, "POST").send();
-    }
-
-    function alarmIconBlink(data) {
-      if (data?.data.length != 0) {
-        $(".page-header [name=topFunBtn][data-page=alert] i").addClass("blink");
-      } else {
-        $(".page-header [name=topFunBtn][data-page=alert] i").removeClass("blink");
-      }
-    }
-
-    function timeOutGetData() {
-      let timeOut3s = null, timeOut5m = null;
-      let events = $._data($(window)[0], "events");
-
-      if (Object.keys(events).findIndex(x => x == "timeout:3s") != -1) {
-        timeOut3s = setInterval(() => {
-          $(window).trigger("timeout:3s");
-        }, 3000)
-      }
-
-      if (Object.keys(events).findIndex(x => x == "timeout:5m") != -1) {
-        timeOut5m = setInterval(() => {
-          $(window).trigger("timeout:5m");
-        }, 5 * 60 * 1000)
-      }
-
-      timeOuters = timeOuters.concat([timeOut3s, timeOut5m]);
-    }
-
-    function showMainSys() {
-      let url = baseApiUrl + "/Utility/isShowMaiSys";
-
-      ytAjax = new YourTeam.Ajax(url, null, function (res) {
-        if (!res || res.code != "0000") {
-
-        } else {
-          pageAct.mainStatus = res.data;
-        }
-      }, null, "POST").send();
-
-    }
-
-    function startPageLoading() {
-      if (!loadingTip) {
-        loadingTip = YT.Alert.Tip("資料讀取中...", "show");
-      }
-    }
-
-    function endPageLoading() {
-      if (loadingTip != null) {
-        $(loadingTip.ele).YTAlert().hide();
-        loadingTip = null;
-      }
-    }
-
-    function iniFroList() {
-      url = baseApiUrl + '/api/GetUsrFroList'
-      let hasMonitor = false;
-
-      ytAjax = new YourTeam.Ajax(url, null, function (res) {
-        if (!res || res.code != "0000" || !res.data) {
-
-        } else {
-          let strHtml = `<div class="btn-group mx-4">
-                                                                      <a href="javascript:;" name="topFunBtn" data-page="dashboard" data-tabname="topFunBtn" class="text-center">
-                                                                          <i class="fal fa-home fa-2x"></i><br>首頁
-                                                                      </a>
-                                                                      <!--<div class="dropdown-menu">
-                                                                          <button class="dropdown-item" type="button">Action</button>
-                                                                          <button class="dropdown-item" type="button">Another action</button>
-                                                                          <button class="dropdown-item" type="button">Something else here</button>
-                                                                      </div>-->
-                                                                  </div>`;
-
-          $.each(res.data, function (i, v) {
-            if (v.authCode == 'PF1') {
-              strHtml += `<div class="btn-group mx-4" >
-                                                                          <a href="javascript:;" id="sysMonTopBtn" class="text-center" data-toggle="navbar" data-target="#sysMonNavbar" data-tabname="topFunBtn" aria-haspopup="true" aria-expanded="false">
-                                                                              <i class="fal fa-tv fa-2x"></i><br>${v.subName}
-                                                                          </a>
-
-                                                                      </div>`;
-
-              hasMonitor = true;
-            }
-            else {
-              let icon = v.authCode == 'PF2' ? 'fa-chart-pie' : v.authCode == 'PF3' ? 'fa-chart-area' : v.authCode == 'PF4' ? 'fa-chart-line' : v.authCode == 'PF5' ? 'fa-bell' : v.authCode == 'PF6' ? 'fa-server' : v.authCode == 'PF7' ? 'fa-image' : v.authCode == 'PF8' ? 'fa-user' : '';
-              strHtml += `<div class="btn-group mx-4">
-                                                                          <a href="javascript:;" name="topFunBtn" data-tabname="topFunBtn" class="dropdown-toggle no-arrow text-center"
-                                                                             data-page="${v.showView}">
-                                                                              <i class="fal ${icon} fa-2x"></i><br>${v.subName}
-                                                                          </a>
-                                                                      </div>`;
-            }
-
-          });
-
-          $('#froLisPage').html(strHtml);
-          $("#sysMonTopBtn").YTNavbar("init");
-
+        if (themeSettings.themeURL && !document.getElementById('mytheme')) {
+            var cssfile = document.createElement('link');
+            cssfile.id = 'mytheme';
+            cssfile.rel = 'stylesheet';
+            cssfile.href = themeURL;
+            document.getElementsByTagName('head')[0].appendChild(cssfile);
 
         }
-      }, null, "POST").send();
-    }
-
-    function getSysMonBtnList() {
-      let url = baseApiUrl + "/api/Device/GetMainSub";
-      let sendData = {
-        building_tag: pageAct.buiTag,
-      };
-      objSendData.Data = sendData;
-      ytAjax = new YourTeam.Ajax(url, objSendData, function (res) {
-        if (!res || res.code != "0000" || !res.data) {
-
-        } else {
-          $("#sysMonBtnList").html("")
-
-          $.each(res.data.history_Main_Systems, (index, mainSysObj) => {
-            $.each(mainSysObj.history_Sub_systems, (index2, subSysObj) => {
-              let page = "systemMonitor";
-              if (subSysObj.sub_system_tag == "EL") {
-                page = "sysElevator";
-              }
-              // console.log(subSysObj.sub_system_tag)
-              // if (subSysObj.sub_system_tag == "M12") {
-              //     page = "sysSensor";
-              // }
-
-              let li = creEle("li");
-              let a = creA(subSysObj.full_name, { "href": "javascript:;" }, [], `subSysBtn${subSysObj.sub_system_tag}`, { page: page, tabname: "systemMonitor" }, "topFunBtn");
-              li.append(a);
-              a.data("subSysObj", subSysObj)
-              subSysObj.main_system_tag = mainSysObj.main_system_tag;
-              $("#sysMonBtnList").append(li);
-            })
-          })
+        else if (themeSettings.themeURL && document.getElementById('mytheme')) {
+            document.getElementById('mytheme').href = themeSettings.themeURL;
         }
-      }, null, "POST").send();
-    }
-
-    function getLogo() {
-      url = baseApiUrl + '/api/GetLogo';
-      ytAjax = new YourTeam.Ajax(url, null, function (res) {
-        $('[name=webLogo]').attr('src', baseImgUrl + '/img/' + res.data);
-      }, null, "POST").send();
-    }
-
-    function getUserInfo() {
-      let url = baseApiUrl + varApiUrl + "getUserFull";
-
-      ytAjax = new YourTeam.Ajax(url, null, function (res) {
-        if (!res || res.code != "0000") {
-
-        } else {
-          pageAct.userInfo = res.data;
-          let user = res.data;
-          $("#usrName").text(user.full_name);
+        /**
+         * Save to localstorage
+         **/
+        var saveSettings = function () {
+            themeSettings.themeOptions = String(classHolder.className).split(/[^\w-]+/).filter(function (item) {
+                return /^(nav|header|footer|mod|display)-/i.test(item);
+            }).join(' ');
+            if (document.getElementById('mytheme')) {
+                themeSettings.themeURL = document.getElementById('mytheme').getAttribute("href");
+            };
+            localStorage.setItem('themeSettings', JSON.stringify(themeSettings));
         }
-      }, null, "POST").send();
-    }
-
-    var noticeOptArr = [];
-    function getAlarmFromDB() {
-      let url = baseApiUrl + "/api/AlarmCard";
-      ytAjax = new YourTeam.Ajax(url, null, function (res) {
-        if (!res || res.code != "0000" || !res.data) {
-
-        } else {
-          let datas = res.data;
-
-
+        /**
+         * Reset settings
+         **/
+        var resetSettings = function () {
+            localStorage.setItem("themeSettings", "");
         }
-      }, null, "POST", true).send();
-    }
 
-    function getAlarm() {
-      let now = (new Date()).getTime();
-      let noticeObj =
-        [
-          { title: "異常編號", data: "uuid" },
-          { title: "異常等級", data: "priority" },
-          { title: "異常類別", data: "alarmClass" },
-          { title: "設備名稱", data: "full_name" },
-          { title: "異常訊息", data: "msgText" },
-        ];
-      // 向 niagara 取得告警資料
-      getDeviceAlarmCardByBaja(null, now, false, false, function (bajaDatas) {
-        let datas = bajaDatas.data;
-        let titleHtml = `異常通知`;
-        let notices = [];
-        // 遍歷每個告警資料
-        $.each((datas ?? []), (idx, data) => {
-          if (noticeOptArr.findIndex(x => x.id == data.uuid) == -1) {
-            // 針對該告警對象的設備，從 allDevices 找出設備名稱
-            datas[idx].full_name = allDevices.filter(x => x.device_number == data.devicePath)[0]?.full_name;
+    </script>
+    <!-- BEGIN Page Wrapper -->
+    <div class="page-wrapper">
+        <div class="page-inner">
+            <!-- BEGIN Left Aside -->
+            <!-- END Left Aside -->
+            <div class="page-content-wrapper">
+                <!-- BEGIN Page Header -->
+                <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">
+                            <img src="img/logo.png" alt="SmartAdmin WebApp" aria-roledescription="logo">
+
+                            <!--<span class="page-logo-text mr-1">SmartAdmin WebApp</span>-->
+                            <!--<span class="position-absolute text-white opacity-50 small pos-top pos-right mr-2 mt-n2"></span>
+                            <i class="fal fa-angle-down d-inline-block ml-1 fs-lg color-primary-300"></i>-->
+                        </a>
+
+                    </div>
+                    <!--DOC: nav menu layout change shortcut-->
+                    <div class="hidden-md-down dropdown-icon-menu position-relative">
+                        <a href="#" class="header-btn btn js-waves-off" data-action="toggle"
+                           data-class="nav-function-hidden" title="Hide Navigation">
+                            <i class="ni ni-menu"></i>
+                        </a>
+                        <ul>
+                            <li>
+                                <a href="#" class="btn js-waves-off" data-action="toggle"
+                                   data-class="nav-function-minify" title="Minify Navigation">
+                                    <i class="ni ni-minify-nav"></i>
+                                </a>
+                            </li>
+                            <li>
+                                <a href="#" class="btn js-waves-off" data-action="toggle"
+                                   data-class="nav-function-fixed" title="Lock Navigation">
+                                    <i class="ni ni-lock-nav"></i>
+                                </a>
+                            </li>
+                        </ul>
+                    </div>
+                    <!--DOC: mobile button appears during mobile width-->
+                    <div class="hidden-lg-up">
+                        <a href="#" class="header-btn btn press-scale-down" data-action="toggle"
+                           data-class="mobile-nav-on">
+                            <i class="ni ni-menu"></i>
+                        </a>
+                    </div>
+
+                    <div class="dropdown">
+                        <a class="dropdown-toggle fs-1" href="javascript:;" role="button" id="buiActDrop"
+                           data-target="buiList" data-toggle="dropdown" aria-haspopup="true">
+
+                        </a>
+                        <div id="buiList" class="dropdown-menu dropdown-select-menu js-auto-close">
+
+                        </div>
+                    </div>
+
+                    <div class="ml-auto d-flex" id="froLisPage">
+
+                    </div>
+                    <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">
+                                <!--<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>
+                                </div>
+
+                            </a>
+
+                        </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">
+                                <!--<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 class="fas fa-user-circle fs-1-5 w-100 text-center"></i>
+                                    <span id="usrName" class="text-truncate text-truncate-header hidden-xs-down"></span>
+                                </div>
+
+                            </a>
+                            <div id="logoutList" class="dropdown-menu dropdown-menu-right dropdown-lg">
+
+                                <a id="logout" href="javascript:;" class="dropdown-item fw-500 pt-3 pb-3">
+                                    <span>登出</span>
+                                </a>
+                            </div>
+                        </div>
+
+                    </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-1">智慧大樓管理平台</label>
+                    </div>
+                </header>
+                <!-- END Page Header -->
+                <!-- BEGIN Page Content -->
+                <!-- the #js-page-content id is needed for some plugins to initialize -->
+                <!--@RenderBody()-->
+                <div id="app">
+
+                </div>
+
+                <!-- this overlay is activated only when mobile menu is triggered -->
+                <div class="page-content-overlay" data-action="toggle" data-class="mobile-nav-on"></div>
+
+                <div id="sysMonNavbar" class="yt-navbar yt-left-navbar">
+                    <div class="yt-navbar-content">
+                        <ul id="sysMonBtnList">
+                        </ul>
+                    </div>
+                </div>
+                <!-- END Page Content -->
+                <!-- BEGIN Page Footer -->
+                <!--<footer class="page-footer" role="contentinfo">
+                    <div class="d-flex align-items-center flex-1 text-muted">
+                        <span class="hidden-md-down fw-700">2022 © SmartAdmin by&nbsp;<a href='https://www.gotbootstrap.com' class='text-primary fw-500' title='gotbootstrap.com' target='_blank'>gotbootstrap.com</a></span>
+                    </div>
+                    <div>
+                        <ul class="list-table m-0">
+                            <li><a href="intel_introduction.html" class="text-secondary fw-700">About</a></li>
+                            <li class="pl-3"><a href="info_app_licensing.html" class="text-secondary fw-700">License</a></li>
+                            <li class="pl-3"><a href="info_app_docs.html" class="text-secondary fw-700">Documentation</a></li>
+                            <li class="pl-3 fs-xl"><a href="https://wrapbootstrap.com/user/MyOrange" class="text-secondary" target="_blank"><i class="fal fa-question-circle" aria-hidden="true"></i></a></li>
+                        </ul>
+                    </div>
+                </footer>-->
+                <!-- END Page Footer -->
+                <!-- BEGIN Shortcuts -->
+                <!-- END Shortcuts -->
+                <!-- BEGIN Color profile -->
+                <!-- this area is hidden and will not be seen on screens or screen readers -->
+                <!-- we use this only for CSS color refernce for JS stuff -->
+                <p id="js-color-profile" class="d-none">
+                    <span class="color-primary-50"></span>
+                    <span class="color-primary-100"></span>
+                    <span class="color-primary-200"></span>
+                    <span class="color-primary-300"></span>
+                    <span class="color-primary-400"></span>
+                    <span class="color-primary-500"></span>
+                    <span class="color-primary-600"></span>
+                    <span class="color-primary-700"></span>
+                    <span class="color-primary-800"></span>
+                    <span class="color-primary-900"></span>
+                    <span class="color-info-50"></span>
+                    <span class="color-info-100"></span>
+                    <span class="color-info-200"></span>
+                    <span class="color-info-300"></span>
+                    <span class="color-info-400"></span>
+                    <span class="color-info-500"></span>
+                    <span class="color-info-600"></span>
+                    <span class="color-info-700"></span>
+                    <span class="color-info-800"></span>
+                    <span class="color-info-900"></span>
+                    <span class="color-danger-50"></span>
+                    <span class="color-danger-100"></span>
+                    <span class="color-danger-200"></span>
+                    <span class="color-danger-300"></span>
+                    <span class="color-danger-400"></span>
+                    <span class="color-danger-500"></span>
+                    <span class="color-danger-600"></span>
+                    <span class="color-danger-700"></span>
+                    <span class="color-danger-800"></span>
+                    <span class="color-danger-900"></span>
+                    <span class="color-warning-50"></span>
+                    <span class="color-warning-100"></span>
+                    <span class="color-warning-200"></span>
+                    <span class="color-warning-300"></span>
+                    <span class="color-warning-400"></span>
+                    <span class="color-warning-500"></span>
+                    <span class="color-warning-600"></span>
+                    <span class="color-warning-700"></span>
+                    <span class="color-warning-800"></span>
+                    <span class="color-warning-900"></span>
+                    <span class="color-success-50"></span>
+                    <span class="color-success-100"></span>
+                    <span class="color-success-200"></span>
+                    <span class="color-success-300"></span>
+                    <span class="color-success-400"></span>
+                    <span class="color-success-500"></span>
+                    <span class="color-success-600"></span>
+                    <span class="color-success-700"></span>
+                    <span class="color-success-800"></span>
+                    <span class="color-success-900"></span>
+                    <span class="color-fusion-50"></span>
+                    <span class="color-fusion-100"></span>
+                    <span class="color-fusion-200"></span>
+                    <span class="color-fusion-300"></span>
+                    <span class="color-fusion-400"></span>
+                    <span class="color-fusion-500"></span>
+                    <span class="color-fusion-600"></span>
+                    <span class="color-fusion-700"></span>
+                    <span class="color-fusion-800"></span>
+                    <span class="color-fusion-900"></span>
+                </p>
+                <!-- END Color profile -->
+            </div>
+        </div>
+    </div>
+    <!-- END Page Wrapper -->
+    <!-- BEGIN Messenger -->
+    <div class="modal fade js-modal-messenger modal-backdrop-transparent" tabindex="-1" role="dialog"
+         aria-hidden="true">
+        <div class="modal-dialog modal-dialog-right">
+            <div class="modal-content h-100">
+                <div class="dropdown-header bg-trans-gradient d-flex align-items-center w-100">
+                    <div class="d-flex flex-row align-items-center mt-1 mb-1 color-white">
+                        <span class="mr-2">
+                            <span class="rounded-circle profile-image d-block"
+                                  style="background-image:url('img/demo/avatars/avatar-d.png'); background-size: cover;"></span>
+                        </span>
+                        <div class="info-card-text">
+                            <a href="javascript:void(0);" class="fs-lg text-truncate text-truncate-lg text-white"
+                               data-toggle="dropdown" aria-expanded="false">
+                                Tracey Chang
+                                <i class="fal fa-angle-down d-inline-block ml-1 text-white fs-md"></i>
+                            </a>
+                            <div class="dropdown-menu">
+                                <a class="dropdown-item" href="#">Send Email</a>
+                                <a class="dropdown-item" href="#">Create Appointment</a>
+                                <a class="dropdown-item" href="#">Block User</a>
+                            </div>
+                            <span class="text-truncate text-truncate-md opacity-80">IT Director</span>
+                        </div>
+                    </div>
+                    <button type="button" class="close text-white position-absolute pos-top pos-right p-2 m-1 mr-2"
+                            data-dismiss="modal" aria-label="Close">
+                        <span aria-hidden="true"><i class="fal fa-times"></i></span>
+                    </button>
+                </div>
+                <div class="modal-body p-0 h-100 d-flex">
+                    <!-- BEGIN msgr-list -->
+                    <div class="msgr-list d-flex flex-column bg-faded border-faded border-top-0 border-right-0 border-bottom-0 position-absolute pos-top pos-bottom">
+                        <div>
+                            <div class="height-4 width-3 h3 m-0 d-flex justify-content-center flex-column color-primary-500 pl-3 mt-2">
+                                <i class="fal fa-search"></i>
+                            </div>
+                            <input type="text" class="form-control bg-white" id="msgr_listfilter_input"
+                                   placeholder="Filter contacts" aria-label="FriendSearch"
+                                   data-listfilter="#js-msgr-listfilter">
+                        </div>
+                        <div class="flex-1 h-100 custom-scroll">
+                            <div class="w-100">
+                                <ul id="js-msgr-listfilter" class="list-unstyled m-0">
+                                    <li>
+                                        <a href="#" class="d-table w-100 px-2 py-2 text-dark hover-white"
+                                           data-filter-tags="tracey chang online">
+                                            <div class="d-table-cell align-middle status status-success status-sm ">
+                                                <span class="profile-image-md rounded-circle d-block"
+                                                      style="background-image:url('img/demo/avatars/avatar-d.png'); background-size: cover;"></span>
+                                            </div>
+                                            <div class="d-table-cell w-100 align-middle pl-2 pr-2">
+                                                <div class="text-truncate text-truncate-md">
+                                                    Tracey Chang
+                                                    <small class="d-block font-italic text-success fs-xs">
+                                                        Online
+                                                    </small>
+                                                </div>
+                                            </div>
+                                        </a>
+                                    </li>
+                                    <li>
+                                        <a href="#" class="d-table w-100 px-2 py-2 text-dark hover-white"
+                                           data-filter-tags="oliver kopyuv online">
+                                            <div class="d-table-cell align-middle status status-success status-sm ">
+                                                <span class="profile-image-md rounded-circle d-block"
+                                                      style="background-image:url('img/demo/avatars/avatar-b.png'); background-size: cover;"></span>
+                                            </div>
+                                            <div class="d-table-cell w-100 align-middle pl-2 pr-2">
+                                                <div class="text-truncate text-truncate-md">
+                                                    Oliver Kopyuv
+                                                    <small class="d-block font-italic text-success fs-xs">
+                                                        Online
+                                                    </small>
+                                                </div>
+                                            </div>
+                                        </a>
+                                    </li>
+                                    <li>
+                                        <a href="#" class="d-table w-100 px-2 py-2 text-dark hover-white"
+                                           data-filter-tags="dr john cook phd away">
+                                            <div class="d-table-cell align-middle status status-warning status-sm ">
+                                                <span class="profile-image-md rounded-circle d-block"
+                                                      style="background-image:url('img/demo/avatars/avatar-e.png'); background-size: cover;"></span>
+                                            </div>
+                                            <div class="d-table-cell w-100 align-middle pl-2 pr-2">
+                                                <div class="text-truncate text-truncate-md">
+                                                    Dr. John Cook PhD
+                                                    <small class="d-block font-italic fs-xs">
+                                                        Away
+                                                    </small>
+                                                </div>
+                                            </div>
+                                        </a>
+                                    </li>
+                                    <li>
+                                        <a href="#" class="d-table w-100 px-2 py-2 text-dark hover-white"
+                                           data-filter-tags="ali amdaney online">
+                                            <div class="d-table-cell align-middle status status-success status-sm ">
+                                                <span class="profile-image-md rounded-circle d-block"
+                                                      style="background-image:url('img/demo/avatars/avatar-g.png'); background-size: cover;"></span>
+                                            </div>
+                                            <div class="d-table-cell w-100 align-middle pl-2 pr-2">
+                                                <div class="text-truncate text-truncate-md">
+                                                    Ali Amdaney
+                                                    <small class="d-block font-italic fs-xs text-success">
+                                                        Online
+                                                    </small>
+                                                </div>
+                                            </div>
+                                        </a>
+                                    </li>
+                                    <li>
+                                        <a href="#" class="d-table w-100 px-2 py-2 text-dark hover-white"
+                                           data-filter-tags="sarah mcbrook online">
+                                            <div class="d-table-cell align-middle status status-success status-sm">
+                                                <span class="profile-image-md rounded-circle d-block"
+                                                      style="background-image:url('img/demo/avatars/avatar-h.png'); background-size: cover;"></span>
+                                            </div>
+                                            <div class="d-table-cell w-100 align-middle pl-2 pr-2">
+                                                <div class="text-truncate text-truncate-md">
+                                                    Sarah McBrook
+                                                    <small class="d-block font-italic fs-xs text-success">
+                                                        Online
+                                                    </small>
+                                                </div>
+                                            </div>
+                                        </a>
+                                    </li>
+                                    <li>
+                                        <a href="#" class="d-table w-100 px-2 py-2 text-dark hover-white"
+                                           data-filter-tags="ali amdaney offline">
+                                            <div class="d-table-cell align-middle status status-sm">
+                                                <span class="profile-image-md rounded-circle d-block"
+                                                      style="background-image:url('img/demo/avatars/avatar-a.png'); background-size: cover;"></span>
+                                            </div>
+                                            <div class="d-table-cell w-100 align-middle pl-2 pr-2">
+                                                <div class="text-truncate text-truncate-md">
+                                                    oliver.kopyuv@gotbootstrap.com
+                                                    <small class="d-block font-italic fs-xs">
+                                                        Offline
+                                                    </small>
+                                                </div>
+                                            </div>
+                                        </a>
+                                    </li>
+                                    <li>
+                                        <a href="#" class="d-table w-100 px-2 py-2 text-dark hover-white"
+                                           data-filter-tags="ali amdaney busy">
+                                            <div class="d-table-cell align-middle status status-danger status-sm">
+                                                <span class="profile-image-md rounded-circle d-block"
+                                                      style="background-image:url('img/demo/avatars/avatar-j.png'); background-size: cover;"></span>
+                                            </div>
+                                            <div class="d-table-cell w-100 align-middle pl-2 pr-2">
+                                                <div class="text-truncate text-truncate-md">
+                                                    oliver.kopyuv@gotbootstrap.com
+                                                    <small class="d-block font-italic fs-xs text-danger">
+                                                        Busy
+                                                    </small>
+                                                </div>
+                                            </div>
+                                        </a>
+                                    </li>
+                                    <li>
+                                        <a href="#" class="d-table w-100 px-2 py-2 text-dark hover-white"
+                                           data-filter-tags="ali amdaney offline">
+                                            <div class="d-table-cell align-middle status status-sm">
+                                                <span class="profile-image-md rounded-circle d-block"
+                                                      style="background-image:url('img/demo/avatars/avatar-c.png'); background-size: cover;"></span>
+                                            </div>
+                                            <div class="d-table-cell w-100 align-middle pl-2 pr-2">
+                                                <div class="text-truncate text-truncate-md">
+                                                    oliver.kopyuv@gotbootstrap.com
+                                                    <small class="d-block font-italic fs-xs">
+                                                        Offline
+                                                    </small>
+                                                </div>
+                                            </div>
+                                        </a>
+                                    </li>
+                                    <li>
+                                        <a href="#" class="d-table w-100 px-2 py-2 text-dark hover-white"
+                                           data-filter-tags="ali amdaney inactive">
+                                            <div class="d-table-cell align-middle">
+                                                <span class="profile-image-md rounded-circle d-block"
+                                                      style="background-image:url('img/demo/avatars/avatar-m.png'); background-size: cover;"></span>
+                                            </div>
+                                            <div class="d-table-cell w-100 align-middle pl-2 pr-2">
+                                                <div class="text-truncate text-truncate-md">
+                                                    +714651347790
+                                                    <small class="d-block font-italic fs-xs opacity-50">
+                                                        Missed Call
+                                                    </small>
+                                                </div>
+                                            </div>
+                                        </a>
+                                    </li>
+                                </ul>
+                                <div class="filter-message js-filter-message"></div>
+                            </div>
+                        </div>
+                        <div>
+                            <a class="fs-xl d-flex align-items-center p-3">
+                                <i class="fal fa-cogs"></i>
+                            </a>
+                        </div>
+                    </div>
+                    <!-- END msgr-list -->
+                    <!-- BEGIN msgr -->
+                    <div class="msgr d-flex h-100 flex-column bg-white">
+                        <!-- BEGIN custom-scroll -->
+                        <div class="custom-scroll flex-1 h-100">
+                            <div id="chat_container" class="w-100 p-4">
+                                <!-- start .chat-segment -->
+                                <div class="chat-segment">
+                                    <div class="time-stamp text-center mb-2 fw-400">
+                                        Jun 19
+                                    </div>
+                                </div>
+                                <!--  end .chat-segment -->
+                                <!-- start .chat-segment -->
+                                <div class="chat-segment chat-segment-sent">
+                                    <div class="chat-message">
+                                        <p>
+                                            Hey Tracey, did you get my files?
+                                        </p>
+                                    </div>
+                                    <div class="text-right fw-300 text-muted mt-1 fs-xs">
+                                        3:00 pm
+                                    </div>
+                                </div>
+                                <!--  end .chat-segment -->
+                                <!-- start .chat-segment -->
+                                <div class="chat-segment chat-segment-get">
+                                    <div class="chat-message">
+                                        <p>
+                                            Hi
+                                        </p>
+                                        <p>
+                                            Sorry going through a busy time in office. Yes I analyzed the solution.
+                                        </p>
+                                        <p>
+                                            It will require some resource, which I could not manage.
+                                        </p>
+                                    </div>
+                                    <div class="fw-300 text-muted mt-1 fs-xs">
+                                        3:24 pm
+                                    </div>
+                                </div>
+                                <!--  end .chat-segment -->
+                                <!-- start .chat-segment -->
+                                <div class="chat-segment chat-segment-sent chat-start">
+                                    <div class="chat-message">
+                                        <p>
+                                            Okay
+                                        </p>
+                                    </div>
+                                </div>
+                                <!--  end .chat-segment -->
+                                <!-- start .chat-segment -->
+                                <div class="chat-segment chat-segment-sent chat-end">
+                                    <div class="chat-message">
+                                        <p>
+                                            Sending you some dough today, you can allocate the resources to this
+                                            project.
+                                        </p>
+                                    </div>
+                                    <div class="text-right fw-300 text-muted mt-1 fs-xs">
+                                        3:26 pm
+                                    </div>
+                                </div>
+                                <!--  end .chat-segment -->
+                                <!-- start .chat-segment -->
+                                <div class="chat-segment chat-segment-get chat-start">
+                                    <div class="chat-message">
+                                        <p>
+                                            Perfect. Thanks a lot!
+                                        </p>
+                                    </div>
+                                </div>
+                                <!--  end .chat-segment -->
+                                <!-- start .chat-segment -->
+                                <div class="chat-segment chat-segment-get">
+                                    <div class="chat-message">
+                                        <p>
+                                            I will have them ready by tonight.
+                                        </p>
+                                    </div>
+                                </div>
+                                <!--  end .chat-segment -->
+                                <!-- start .chat-segment -->
+                                <div class="chat-segment chat-segment-get chat-end">
+                                    <div class="chat-message">
+                                        <p>
+                                            Cheers
+                                        </p>
+                                    </div>
+                                </div>
+                                <!--  end .chat-segment -->
+                                <!-- start .chat-segment for timestamp -->
+                                <div class="chat-segment">
+                                    <div class="time-stamp text-center mb-2 fw-400">
+                                        Jun 20
+                                    </div>
+                                </div>
+                                <!--  end .chat-segment for timestamp -->
+                            </div>
+                        </div>
+                        <!-- END custom-scroll  -->
+                        <!-- BEGIN msgr__chatinput -->
+                        <div class="d-flex flex-column">
+                            <div class="border-faded border-right-0 border-bottom-0 border-left-0 flex-1 mr-3 ml-3 position-relative shadow-top">
+                                <div class="pt-3 pb-1 pr-0 pl-0 rounded-0" tabindex="-1">
+                                    <div id="msgr_input" contenteditable="true"
+                                         data-placeholder="Type your message here..."
+                                         class="height-10 form-content-editable"></div>
+                                </div>
+                            </div>
+                            <div class="height-8 px-3 d-flex flex-row align-items-center flex-wrap flex-shrink-0">
+                                <a href="javascript:void(0);" class="btn btn-icon fs-xl width-1 mr-1"
+                                   data-toggle="tooltip" data-original-title="More options" data-placement="top">
+                                    <i class="fal fa-ellipsis-v-alt color-fusion-300"></i>
+                                </a>
+                                <a href="javascript:void(0);" class="btn btn-icon fs-xl mr-1" data-toggle="tooltip"
+                                   data-original-title="Attach files" data-placement="top">
+                                    <i class="fal fa-paperclip color-fusion-300"></i>
+                                </a>
+                                <a href="javascript:void(0);" class="btn btn-icon fs-xl mr-1" data-toggle="tooltip"
+                                   data-original-title="Insert photo" data-placement="top">
+                                    <i class="fal fa-camera color-fusion-300"></i>
+                                </a>
+                                <div class="ml-auto">
+                                    <a href="javascript:void(0);" class="btn btn-info">Send</a>
+                                </div>
+                            </div>
+                        </div>
+                        <!-- END msgr__chatinput -->
+                    </div>
+                    <!-- END msgr -->
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div id="noticeBlock"
+         style="position: fixed; top: 70px; right: 0px; padding: 20px; transition: 0.2s; z-index: 50000; height:100%; ">
+
+    </div>
+
+    <!--<button id="testsysbtn" class="btn btn-info col-1">系統監控(測試用)</button>-->
+    <!-- END Messenger -->
+    <!-- BEGIN Page Settings -->
+    <!-- END Page Settings -->
+    <!-- base vendor bundle:
+         DOC: if you remove pace.js from core please note on Internet Explorer some CSS animations may execute before a page is fully loaded, resulting 'jump' animations
+                    + pace.js (recommended)
+                    + jquery.js (core)
+                    + jquery-ui-cust.js (core)
+                    + popper.js (core)
+                    + bootstrap.js (core)
+                    + slimscroll.js (extension)
+                    + app.navigation.js (core)
+                    + ba-throttle-debounce.js (core)
+                    + waves.js (extension)
+                    + smartpanels.js (extension)
+                    + src/../jquery-snippets.js (core) -->
+    <!-- verdors.bundle.js 已含有 jquery Library v3.5.1-->
+    <script src="lib/vendors.bundle.js"></script>
+    <!-- toast 第三方套件 若 require 此套件只能用 define 使用，先暫時 html 引用-->
+    <script src="lib/notifications/toastr/toastr.min.js"></script>
+    <script src="js/toast.js"></script>
+    <script src="lib/echarts.min.js"></script>
+    <!--The order of scripts is irrelevant. Please check out the plugin pages for more details about these plugins below:-->
+    <script src="lib/statistics/easypiechart/easypiechart.bundle.js"></script>
+
+
+
+    <!--Bajascript-->
+    <script src="js/bajascript/bscriptReq.js"></script>
+    <!--<script type='text/javascript' src='/module/js/com/tridium/js/ext/require/require.min.js?version=1496767636459'></script>-->
+    <script src='js/bajascript/require.js'></script>
+
+    <script src="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/viewer3D.js"></script>
+    <script src="js/forge/forgemodel.js"></script>
+    <script src="js/yourteam/plugins/yt-alert/ytpop-alert.js"></script>
+
+
+    <script type='text/javascript'>
+        define('niagaraSystemProperties', function () {
+            return {
+            };
+        });
+    </script>
+    <script src="js/n4js/bajatest.js"></script>
+    <script src="js/n4js/electricmeterbaja.js"></script>
+    <script src="js/n4js/elevatorbaja.js"></script>
+    <script src="js/bajascript/require.config.js"></script>
+    <script src="js/FileSaver.js"></script>
+
+
+
+    <script>
+
+        /*$('#js-page-content').smartPanel();*/
+        var cookies = null;
+        var jwt = null;
+        var loadingTip = '';
+        var pageAct = {};  //記錄全頁面已選擇項目
+        var timeOuters = [];
+        pageAct.AreaTag = "";
+        if (location.href.indexOf("ord") != -1) {
+            location.href = "/file/index.html"
+        }
+        var lastPage = sessionStorage.getItem("lastPage");
+        // 執行初步 Loading
+        var loadEle = pageLoading();
+        var errRecTable = null, opeRecTable = null;
+        var tolSubList = [];
+        var allDevices = [];
+
+        /**
+        * 頁面 Loading 建立
+        * */
+        function pageLoading(text = null) {
+            let background = $(`<div class="loading-bg"></div>`);
+            let aleObj = YT.Alert.Tip(text || "讀取中，請稍後", "show");
+            $(background)[0]._aleObj = aleObj;
+            $("body").css("overflow", "hidden");
+            $("body .page-content-wrapper").append(background);
+            $(background).animate({ opacity: 1 }, 300);
+            return background;
+        }
+
+        try {
+            $(function () {
+                // 二次引用 jquery.js
+                // - 在 require 內部程序需要引用 jquery，由於 require 的套件需要依賴 jquery ，就算 HTML 已經引用 jquery， require 也無法參考
+                // - 上方 HTML 引用套件若有使用 jquery 內存數據程序 (ex: $(x).data() , $(x).trigger("custom event") , $.fn.custom ...)
+                // - 會被清洗，有類似程序需放入 loadPack1 Function rquired 引用
+                // (原 datatable.bundle.js require 會出問題，先以 cdn datatable.min.js引用)
+                require(["jquery"], loadedBasePack);
 
-            let div1 = creDiv(["col-12"]);
-            let button = creBtn("確認", "noticeChkBtn", null, ["btn btn-sm btn-secondary ml-auto col-4"], { uuid: data.uuid });
-            let btnDiv = creDiv(["d-flex m-0 gap-5 mt-2"]);
-            btnDiv.append(button);
-            // 繪製 每行告警資訊
-            noticeObj.forEach(notice => {
-              let div2 = creDiv(["row", "m-0"]);
-              let span1 = creSpan(notice.title + "：", ["m-0"]);
-              if (notice.data === 'uuid') {
-                data[notice.data] = data[notice.data].split("-")[0]
-              }
-              span1.append(creSpan(data[notice.data]));
-              div2.append(span1);
-              div1.append(div2);
             })
 
-            div1.append(btnDiv);
-            // 拚湊 YTNotice 通知套件所需參數
-            let main = {
-              title: titleHtml,
-              content: div1.outerHtml(),
-              type: "warning",
-              id: data.uuid,
-              hasCloseBtn: true,
-              timeText: displayDate(data.timestamp),
+            /**
+             * jquery.js 二次引用後 Callback，載入第三方套件
+             * */
+            function loadedBasePack() {
+                require(
+                    [
+                        "lib/bootstrap/bootstrap.bundle.min",
+                        "lib/app.bundle",
+                        "lib/app.menu",
+                        "datatables.net.b4",
+                        "n4js/alarmbaja",
+                        "n4js/historybaja",
+                        "n4js/accmanbaja",
+                        "lib/statistics/flot/flot.bundle",
+                        "lib/statistics/peity/peity.bundle",
+                        "lib/jquery-validation/dist/jquery.validate",
+                        /*"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",
+                        "lib/dropzone/dropzone-min",
+                        "lib/jstree-master/jstree.min",
+                        "lib/notifications/sweetalert2/sweetalert2.bundle",
+                    ], loadedMasterPack);
+
             }
-            noticeOptArr.push(main);
-            notices.push(main);
-          }
-        })
-        if (notices.length != 0) {
-          $("#noticeBlock").YTNotice("add_many", notices.oSort("id").reverse());
+            /**
+             * 第三方套件引用後 Callback，載入額外套件
+             * */
+            function loadedMasterPack() {
+                require(
+                    [
+                        "yourteam/yourteam.utility.class",
+                        "yourteam/yourteam.ajax.class",
+                        "yourteam/yourteam.jquery.datatables",
+                        "yourteam/plugins/yt-tooltip/yt-tooltip",
+                        "yourteam/plugins/yt-tab/yt-tab",
+                        "yourteam/plugins/yt-navbar/yt-navbar",
+                        "yourteam/plugins/yt-notice/yt-notice",
+                        "style",
+
+                    ], function () {
+                        require(["init", "site"], loadedJsPack)
+                    });
+            }
+
+
+            /**
+             * 全數套件讀取完成 Callback
+             * */
+            function loadedJsPack() {
+                cookies = new YourTeam.Utility.Cookie();
+                jwt = cookies.get("JWT-Authorization");
+                pageAct.AreaTag = initAreaTag;
+                loadEvent();
+
+                if (!jwt) {
+                    if (location.href.indexOf("localhost:5966") != -1) {
+                        location.href = "login.html";
+                    }
+                    myBaja = new MyBaja();
+                    myBaja.setMyUserAccount(Login);
+                } else {
+                    isValidLogin();
+                }
+
+                $(loadEle).Loading("close");
+            }
+
+            /**
+             * 登入驗證完成 Callback
+             * */
+            function isValidLogin() {
+
+                getUserInfo();
+                iniFroList();
+                showMainSys();
+                getBuiList();
+                getSysMonBtnList();
+                checkDevState();
+                loadNoticeConSta();
+
+                allDevices = getAllDevice();
+                if (lastPage) {
+                    let lastPageAct = {};
+                    if (isJSON(sessionStorage.getItem("pageAct"))) {
+                        lastPageAct = JSON.parse(sessionStorage.getItem("pageAct"));
+                    }
+                    if ((lastPageAct.sysSubTag && lastPage == "systemMonitor") || lastPage == "sysElevator"
+                        //  || lastPage == "sysSensor"
+                    ) {
+                        $(`#subSysBtn${lastPageAct.sysSubTag}`).click();
+                        $("#sysMonTopBtn").YTTab("set");
+                    } else {
+                        $(`[data-tabname=topFunBtn][data-page=${lastPage}]`).YTTab("setAndClick");
+                    }
+
+                    /*$(`[name=topFunBtn][data-page=${lastPage}]`).click();*/
+                } else {
+                    $("#app").load("_dashboard.html", loadCallback);
+                }
+
+                timeOutGetData();
+
+                function getBuiList() {
+                    let url = baseApiUrl + "/api/Device/GetBuild";
+                    ytAjax = new YourTeam.Ajax(url, null, function (res) {
+                        if (!res || res.code != "0000" || !res.data) {
+
+                        } else {
+                            let strHtml = ``;
+                            $.each(res.data, (index, buiObj) => {
+                                strHtml += `<a id="buiBtn${buiObj.building_tag}" data-urn="${buiObj.urn_3D}" class="dropdown-item" href="javascript:;">${buiObj.full_name}</a>`;
+                            })
+                            $("#buiList").append(strHtml).droSetItem();  //droSetItem 預設第一筆 active
+                        }
+                    }, null, "POST").send();
+                }
+
+                //lily test
+                function checkDevState() {
+                    //TPE_B1_LT_L1
+                    //main_system_tag: pageAct.sysMainTag,
+                    //building_tag: pageAct.buiTag,
+                    //floor_tag: pageAct.floTag,
+                    let systemPath = "TPE_B1";
+                    // if (pageAct != undefined && pageAct != null && pageAct.sysMainTag != null && pageAct.buiTag != null) {
+                    //     systemPath = "TPE_" + pageAct.buiTag + "_" + pageAct.sysMainTag + "_" + "EL";
+                    // }
+                    getOneSystemAlarmStateByBaja(systemPath, callbackForCheckDevState);
+                    // console.log("systemP: " + systemPath);
+                    // console.log("devList: " + deviceList[0].device_guid + ", " + deviceList[3].device_guid + ", " + deviceList[8].device_guid);
+                    //callbackForCheckDevState("test");
+                }
+
+                function callbackForCheckDevState(result) {
+                    // console.log("------ " + result);
+                    // $.each(deviceList, (index, devObj) => {
+                    //     if ((`${devObj.device_guid}`) == '4ed28a93-5025-11ed-b23e-0242ac110002'
+                    //         || (`${devObj.device_guid}`) == '5d9fdff0-5343-43fe-86f4-bd73cdb15111') {
+                    //         var str = "";
+                    //         $(`#${devObj.device_guid}`).empty();
+                    //         str = `<span class="status status-danger d-inline-block"><img src="${baseImgUrl + varPathImg + devObj.device_master_icon}" class="profile-image rounded-circle" onerror="defDev(this)" alt="..."></span> ${devObj.full_name}`;
+                    //         $(`#${devObj.device_guid}`).append(str);
+                    //     }
+                    // })
+
+                    // console.log(result);
+                }
+            }
+
+            // page loaded callback
+            function loadCallback() {
+                initTabsByEle();
+                resetYTTooltip();
+                $("#sysMonTopBtn").YTNavbar("hide");
+            }
+
+            // 事件先行讀取
+            function loadEvent() {
+                onEvent("click", "[name=topFunBtn]", function () {
+                    _ytTabInited = [];
+                    let page = $(this).data("page");
+                    if (!page) {
+                        return;
+                    }
+                    if (page != "systemMonitor" && page != "sysElevator"
+                        //  && page != "sysSensor"
+                    ) {
+                        $("#sysMonBtnList [name=topFunBtn]").removeClass("active");
+                        pageAct.sysMainTag = null;
+                        pageAct.sysSubTag = null;
+                    } else {
+                        setSysTagForPageAct(this);
+                        $("#sysMonTopBtn").YTTab("set");
+                        $(`#subSysBtn${pageAct.sysSubTag}`).YTTab("set");
+                    }
+                    // 取消當前所有 baja 訂閱
+                    $.each(tolSubList, (idx, sub) => {
+                        sub.unsubscribeAll();
+                        sub.detach();
+                    })
+                    // 清空 baja 訂閱紀錄
+                    tolSubList = [];
+                    // 清空 loading 狀態
+                    endPageLoading();
+
+                    $(loadEle).Loading("close");
+                    $(".yt-alert").YTAlert().hide();
+                    // 取得使用者資訊
+                    getUserInfo();
+                    // 存取現在頁面 (重整讀取紀錄用)
+                    sessionStorage.setItem("lastPage", page);
+                    sessionStorage.setItem("pageAct", JSON.stringify(pageAct));
+                    // 讀取子頁面
+                    $("#app").load(`_${page}.html`, loadCallback);
+
+                })
+
+                onEvent("click", "#logout", function () {
+                    localStorage.removeItem("JWT-Authorization");
+                    location.href = "/logout";
+                })
+
+
+                onEvent("active:change", "#buiList", function (e, actEle) {
+                    if (actEle) {
+                        pageAct.buiTag = $(actEle).prop("id").split("buiBtn")[1];
+                        pageAct.urn = $(actEle).data("urn");
+                    }
+
+                })
+
+                onEvent("yt:tab:change", "#lightSch-tab", function () {
+                    if (pageAct.sysMainTag == "LT" && $("#lightSchModal").length != 0) {
+                        setLightSchBlcok ? setLightSchBlcok(this) : "";
+                        $("#lightSchModal").modal("show");
+                    }
+                })
+
+                onEvent("yt:tab:prechange", "[data-tabname=topFunBtn]", function (e, arg) {
+                    if ($(this)[0].id == "sysMonTopBtn" || !$(this).data("page")) {
+                        arg.cancel = true;
+                    }
+                })
+
+                onEvent("scroll", window, function () {
+                    if ($(window).scrollTop() != 0) {
+                        $("#noticeBlock").css("top", 0);
+                    } else {
+                        $("#noticeBlock").css("top", 70);
+                    }
+                })
+
+                onEvent("click", "#testsysbtn", function () {
+
+                })
+
+                //onEvent("click", "button[id^=noticeChkBtn]", function () {
+                //    $(this).parents(".toast").YTNotice("hide");
+                //})
+
+                onEvent("click", "button[id^=noticeChkBtn]", function () {  /**button[id^=bajaAckBtn] */
+                    let uuid = $(this).data("uuid");
+                    let url = window.location.origin + "/obix/alarm/" + uuid + "/ack";
+                    let myBaja = new MyBaja();
+                    myBaja.setMyUserAccount((data) => {
+                        let sendData = '<obj is="obix:AckAlarmIn"><str name="ackUser" val="obix" /></obj>';
+                        $.post(url, sendData, (rel) => {
+                            console.log(rel)
+                            $(this).parents(".toast").YTNotice("hide");
+                        }, "text")
+                    })
+                })
+
+                onEvent("click", "#toggleNoticeBtn", function () {
+                    chaNoticeConSta();
+                })
+
+                $(window).on("timeout:3s", function () {
+
+                    getSystemAlarmByBaja((data) => {
+                        if (typeof getAlarmSub != "undefined" && getAlarmSub) {
+                            getAlarmSub(data);
+                        }
+
+                        alarmIconBlink();
+
+                    })
+                    getAlarm();
+                })
+
+            }
+
+            // 登入驗證
+            function Login(account) {
+                console.log(account)
+                /*if ($("#login-form").valid()) {*/
+
+                var url = baseApiUrl + "/api/Login/";
+                var send_data = {
+                    account: account,
+                    password: "rJ2T5Kkj"
+                }
+                if (location.href.indexOf("localhost:5966") != -1) {
+                    location.href = "login.html";
+                }
+                $.ajax({
+                    method: "post",
+                    url: url,
+                    data: JSON.stringify(send_data),
+                    async: false,
+                    contentType: "application/json; charset=UTF-8",
+                    dataType: 'json',
+                    success: function (rel) {
+                        if (rel.code != "0000") {
+                            toast_error(rel.msg || common.SysErr);
+                            return;
+                        }
+                        else {
+                            /*toast_ok(rel.msg);*/
+                            cookies.create("JWT-Authorization", rel.data.token, 12 * 60 * 60 * 1000);
+                            isValidLogin();
+                        }
+                    },
+                    error: function (xhr, textStatus, thrownError) {
+                        alert(common.SysErr);
+                    }
+                });
+
+            }
+
+            //==============================================================================
+            //                       ↓  系統監控 - 共用 Function ↓
+            //==============================================================================
+
+            // Card - 基本資料 Table
+            function drawInfoTabBlo(devGuid) {
+
+                let tabEle = $(`<table class="table table-bordered table-striped text-center m-0">`);
+                let tbody = tabEle.append("<tbody>");
+                let columnNames = ["設備編號", "設備名稱"];
+
+                $.each(columnNames, (index, colName) => {
+                    let tr = $("<tr></tr>");
+                    let td = $("<td></td>");
+                    td.text(colName);
+                    tr.append(td);
+                    tbody.append(tr);
+                })
+
+                let url = baseApiUrl + "/api/Device/GetBaseDevice";
+                let sendData = {
+                    device_guid: devGuid,
+                };
+                objSendData.Data = sendData;
+                ytAjax = new YourTeam.Ajax(url, objSendData, function (res) {
+                    if (!res || res.code != "0000" || !res.data) {
+
+                    } else {
+                        tbody.find("tr").eq(0).append(creEle("td", res.data.device_number));
+                        tbody.find("tr").eq(1).append(creEle("td", res.data.full_name));
+                    }
+                }, null, "POST").send();
+
+                return tabEle.prop("outerHTML");
+            }
+
+            // Card - 異常紀錄 block
+            function drawErrRecTabBlo() {
+                let strHtml = `<table id="errRecTable" class="table table-bordered table-striped text-center m-0 w-100">
+
+                                                                            </table>`
+                return strHtml;
+            }
+
+            // Card - 運維紀錄 block
+            function drawOpeRecTabBlo() {
+                let strHtml = `<table id="opeRecTable" class="table table-bordered table-striped text-center m-0 w-100">
+
+                                                                            </table>`
+                return strHtml;
+            }
+
+            // Card 呈現初始化
+            function initPopover(type = null, extOption = {}, selector = "[name=devItem]") {
+                if (type == null && pageAct.sysMainTag == "LT") {
+                    type = "light";
+                }
+
+                $(selector).each((index, ele) => {
+                    let devNum = $(ele).data("number"); //設備編號
+                    let devGuid = $(ele).data("id"); //guid
+                    let devName = $(ele).data("name"); //full_name
+                    let lightHtml = type == "light" ? `<button type="button" data-toggle="tooltip" data-placement="bottom" title="燈控排程" id="lightSch-tab" class="px-2 btn btn-icon border-0 nav-link mx-1" role="tab" data-tabname="cardTab" data-target="#lightSch"><i class="fas fa-calendar-alt icon fa-2x"></i></button>` : "";
+
+                    let option = {
+                        html: `<div class="card m-1 border device-wrap" data-number="${devNum}" data-position="left">
+                                        <div class="card-header p-3">
+
+                                            <div class="position-absolute mr-5" style="word-break: break-all;">
+                                                <label class="m-0 mt-2">${devName}</label>
+                                            </div>
+                                            <div id="card-tab" class="row justify-content-end nav nav-tabs" role="tablist">
+                                                <button type="button" id="state-tab"
+                                                data-toggle="tooltip" data-placement="bottom" title="即時監控"
+                                                class="px-2 btn btn-icon border-0 nav-link active mx-1" role="tab" data-tabname="cardTab" data-target="#state"><i class="fa fa-desktop icon fa-2x"></i></button>
+                                                ${lightHtml}
+                                                <button type="button" id="info-tab"
+                                                data-toggle="tooltip" data-placement="bottom" title="基本資料"
+                                                class="px-2 btn btn-icon border-0 nav-link mx-1" role="tab" data-tabname="cardTab" data-target="#info"><i class="fa fa-cog icon fa-2x"></i></button>
+                                                <button type="button"
+                                                d data-toggle="tooltip" data-placement="bottom" title="告警資料"
+                                                id="errRec-tab" class=" px-2 btn btn-icon border-0 nav-link mx-1 position-relative " role="tab" data-tabname="cardTab" data-target="#errRec"><i class="fas fa-exclamation-triangle fa-2x"></i></button>
+                                                <button type="button"
+                                                data-toggle="tooltip" data-placement="bottom" title="運維紀錄"
+                                                id="opeRec-tab" class=" px-2 btn btn-icon border-0 nav-link mx-1" role="tab" data-tabname="cardTab" data-target="#opeRec"><i class="fa fa-bars icon fa-2x"></i></button>
+
+                                                <button type="button" class="px-2 btn btn-icon border-0 nav-link mx-1"><i class="fas fa-times text-white-50 fa-2x" data-close="yttooltip"></i></button>
+
+                                            </div>
+                                        </div>
+                                        <div class="card-body p-2 tab-content w-100">
+                                            <div id="state" class="show active w-100" data-tabname="cardTab" data-tabrole="child" >
+                                                ${drawStateTabBlo(devNum)}
+                                            </div>
+                                            <div id="info" data-tabname="cardTab" data-tabrole="child">
+
+                                            </div>
+                                            <div id="errRec" data-tabname="cardTab" data-tabrole="child">
+                                                ${drawErrRecTabBlo()}
+                                            </div>
+                                            <div id="opeRec" data-tabname="cardTab" data-tabrole="child">
+                                                ${drawOpeRecTabBlo()}
+                                            </div>
+                                        </div>
+                                    </div>`,
+                        group: "device",
+                        // 在 _sysElevator.html 及 _sysMonAll.html 會用到
+                        onShow: function (tooltipEle, oriEle) {
+                            // 執行 pop 視窗上方 Tab 類別
+                            new YT.Tab({ tabName: "cardTab" });
+                            // 系統監控才會有 data-devobj 屬性
+                            let devObj = $(oriEle).data("devobj");
+                            // 讀取運維列表
+                            loadOpeRecTable(devGuid);
+                            // 讀取異常列表
+                            loadErr($(oriEle).data("number"));
+                            // 讀取設備基本資料列表
+                            $(tooltipEle).find("#info").html(typeof drawInfoTabBlo != "undefined" ? drawInfoTabBlo(devGuid) : "");
+                            // 聚焦熱點
+                            const eleDbId = $(oriEle).data("dbId")
+                            if (eleDbId) {
+                                if (alarmDbIdList.some(dbId => dbId == eleDbId)) {
+                                    changeScaleForHotspot(eleDbId)
+                                }
+                                else {
+                                    controlFocusHotspot(eleDbId);
+                                }
+                            }
+                            // 3D 視角 ZOOM IN 聚焦
+
+                            if (devObj) {
+                                moveViewToDevice(devObj?.forge_dbid);
+                            }
+
+                            // pop 視窗卡片可拖移功能初始化
+                            $(tooltipEle).draggable({
+                                cursor: "move",
+                                handle: ".card-header",  // 只能通过卡片的标题栏拖拽
+                                containment: "document",
+                                scroll: true
+                            });
+                            // pop 視窗卡片可縮放功能初始化
+                            // $(tooltipEle).resizable({
+                            //     // resize: function (event, ui) {
+                            //     //     let iframe = $(ui.element).find("iframe");
+                            //     //     if (iframe.length != 0) {
+                            //     //         if (ui.size.width != ui.originalSize.width) {
+                            //     //             iframe.css("width", "100%");
+                            //     //         } else if (ui.size.height != ui.originalSize.height) {
+                            //     //             iframe.css("height", "100%");
+                            //     //         }
+                            //     //     }
+                            //     //     let cardBodyHeight = $(ui.element).find(".card-body").css("height");
+                            //     //     $(ui.element).find(".scrolledTable").css("height", cardBodyHeight)
+
+                            //     //     errRecTable.draw(false)
+                            //     // },
+                            //     // minWidth: 200,
+                            //     // minHeight: 150,
+                            // });
+                            // 電梯管理 - Card table 更新
+                            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(eleDbId, false);
+                                }
+                            }
+                            // sysMonFloor Echart 解除 focus
+                            typeof chartUnFocus != "undefined" ? chartUnFocus(oriEle) : "";
+                        }
+                    };
+
+                    $.extend(option, extOption);
+
+                    $(ele).YTTooltip(option);
+                })
+            }
+
+            // 卡片設備名稱點擊事件
+            function devItemNameEvent() {
+                onEvent("click", "[name=devItemName]", function () {
+                    let devNum = $(this).data("number");
+                    let devObj = $(`[name=devItem][data-number=${devNum}]`).data("devobj");
+                    moveViewToDevice(devObj.forge_dbid);
+                })
+            }
+
+            // Card - 運維紀錄 Table
+            function loadOpeRecTable(devGuid) {
+                if (opeRecTable) {
+                    opeRecTable.destroy();
+                }
+                let url = baseApiUrl + "/api/Device/GetOpeDevice?device_guid=" + devGuid;
+                let tag = "#opeRecTable";
+
+                let column_defs = [
+                    { "targets": [0], "width": "8%", "sortable": true },
+                    { "targets": [1], "width": "8%", "sortable": true },
+                    { "targets": [2], "width": "7%", "sortable": true },
+                    { "targets": [3], "width": "7%", "sortable": true },
+                ];
+
+                let columns = [
+                    {
+                        "title": "類型",
+                        "data": "work_type_name",
+                    },
+                    {
+                        "title": "項目",
+                        "data": "fix_do",
+                    },
+                    {
+                        "title": "處理人員",
+                        "data": "work_person_name",
+                    },
+                    {
+                        "title": "發生/完成時間",
+                        "data": "finishTime",
+                        "render": function (data, type, row) {
+                            return row.createdAt + "<br>" + data;
+                        },
+                    },
+
+                ];
+
+                opeRecTable = new YourTeam.JqDataTables.getTableByAjax(url, tag, null, columns, column_defs, null, null, null, null, null, null, "<'scrolledTable'tpi>");
+            }
+
+            function loadLightSchTable(devGuid) {
+
+                /*let url = baseApiUrl + "/api/Device/GetOpeDevice?device_guid=" + devGuid;*/
+                let url = `https://63772efc5c47776512165937.mockapi.io/api/GetLightSche`;
+                let tag = "#lightSchTable";
+
+                let column_defs = [
+                    { "targets": [0], "width": "14%", "sortable": true },
+                    { "targets": [1], "width": "14%", "sortable": true },
+                    { "targets": [2], "width": "14%", "sortable": true },
+                    { "targets": [3], "width": "14%", "sortable": true },
+                    { "targets": [4], "width": "14%", "sortable": true },
+                    { "targets": [5], "width": "14%", "sortable": true },
+                    { "targets": [6], "width": "16%", "sortable": true },
+                ];
+
+                let columns = [
+                    {
+                        "title": "序號",
+                        "data": null,
+                        "render": function (data, type, row, meta) {
+                            return meta.row + 1;
+                        },
+                    },
+                    {
+                        "title": "排程名稱",
+                        "data": "sch_name",
+                    },
+                    {
+                        "title": "設備數量",
+                        "data": "dev_cnt",
+                    },
+                    {
+                        "title": "排程設定",
+                        "data": "sch_set",
+                    },
+                    {
+                        "title": "動作",
+                        "data": "action",
+                    },
+                    {
+                        "title": "狀態",
+                        "data": "status",
+                    },
+                    {
+                        "title": "功能",
+                        "data": "sch_id",
+                        "render": function (data, type, row) {
+                            let btnDiv = creDiv(["row", "m-0", "justify-content-center"], { "style": "gap:10px" });
+                            let icon = creI(["fas", "fa-pencil-alt"]);
+                            btnDiv.append(creBtnHtml("觸發執行", "lightSchTabTogBtn" + data, null, ["btn", "btn-success"]));
+                            btnDiv.append(creBtn("修改", "lightSchTabEdiBtn" + data, null, ["btn", "btn-danger"], { "toggle": "modal", "target": "#delModal" }).append(icon));
+                            return btnDiv.outerHtml();
+                        },
+                    },
+
+                ];
+
+                let lightSchTable = new YourTeam.JqDataTables.getTableByAjax(url, tag, null, columns, column_defs, null, null, null, null, null, null, "tpi");
+            }
+
+            function controlFocusHotspot(dbId, open = true) {
+                // console.log("dbId", alarmDbIdList,dbId)
+                changeColorForHotspot(dbId, open ? "focus" : null);
+                changeScaleForHotspot(dbId, open);
+            }
+
+            // Baja 取得異常紀錄
+            function loadErr(allPath) {
+                if (allPath != undefined && allPath != null) {
+
+                    getOneDeviceAlarmTop10ByBaja(allPath, callbackForErr);
+                }
+                else {
+                    console.log("no device");
+                }
+            }
+
+            // Card - 異常紀錄 Table
+            function callbackForErr(result) {
+                // console.log("@@@",result)
+                if (errRecTable) {
+                    errRecTable.destroy();
+                }
+
+                let tag = "#errRecTable";
+                let datas;
+
+                let column_defs = [
+                    { "targets": [0], "width": "15%", "sortable": true },
+                    { "targets": [1], "width": "25%", "sortable": true },
+                    { "targets": [2], "width": "25%", "sortable": true },
+                    { "targets": [3], "width": "35%", "sortable": true },
+                ];
+
+                let columns = [
+                    {
+                        "title": "異常ID",
+                        "data": "uuid",
+
+                    },
+                    {
+                        "title": "異常原因",
+                        "data": "msgText",
+                    },
+                    {
+                        "title": "ACK確認",
+                        "data": "ackState",
+                    },
+                    {
+                        "title": "發生/完成時間",
+                        "data": "normalTime",
+                        // "render": function (data, type, row) {
+                        //     return row.timestamp + "<br>" + data;
+                        // },
+                    },
+
+                ];
+
+                let json_object = JSON.parse(result);
+                datas = json_object['data'];
+                errRecTable = new YourTeam.JqDataTables.getTableByStatic(tag, datas, columns, column_defs, null, null, null, null, "<'scrolledTable'tpi>");
+
+            }
+
+            //根據 data-type 設置顏色 (判斷後台是否有設定，若無則帶預設)
+            function setLightColor() {
+                $(".dev-card").each((index, ele) => {
+                    let type = $(ele).find("[data-light-type]").data("light-type");
+                    let isFlashing = false;
+                    let color = "#000";
+                    switch (type) {
+                        case "normal":
+                            color = pageAct.sysSubObj.device_normal_color ?? "var(--theme-success)";
+                            isFlashing = pageAct.sysSubObj.device_normal_flashing == "1";
+                            break;
+                        case "close":
+                            color = pageAct.sysSubObj.device_close_color ?? "var(--theme-secondary)";
+                            isFlashing = pageAct.sysSubObj.device_close_flashing == "1";
+                            break;
+                        case "error":
+                            color = pageAct.sysSubObj.device_error_color ?? "var(--theme-danger)";
+                            isFlashing = pageAct.sysSubObj.device_error_flashing == "1";
+                            break;
+                    }
+                    $(ele).find("[data-light-type]").css("background-color", color);
+                    //是否閃爍
+                    if (isFlashing) {
+                        $(ele).addClass("light-flash");
+                    }
+                })
+            }
+
+            function crePosPopover(position, obj) {
+                let _position = {};
+                _position.tpLeft = position[0];
+                _position.tpTop = position[1];
+                _position.tpOffHeight = 24;
+                let parentEle = creDiv();
+                parentEle.append(`<a href="javascript:;" name="devItem" class=" ml-2 mb-0 ">詳細資料</a>`);
+                parentEle.data("id", obj.device_guid);
+                parentEle.data("number", obj.device_number);
+                parentEle.data("dbId", obj._dbId);
+                parentEle.data("name", obj.full_name);
+                initPopover(null, _position, parentEle);
+
+                return parentEle;
+            }
+
+            // 設置 Forge 3D 溫度條
+            function setTopHeatBar() {
+                let strHtml = `<canvas name="forgeHeatBar" width="200" height="30" style="position: absolute; z-index:9999"></canvas>`;
+                return strHtml;
+            }
+
+            //==============================================================================
+            //                       ↑  系統監控 - 共用 Function ↑
+            //==============================================================================
+
+        } catch (e) {
+            $(loadEle).Loading("close");
+        }
+
+        function setSysTagForPageAct(obj) {
+            pageAct.sysMainTag = $(obj).data("subSysObj").main_system_tag;
+            pageAct.sysSubTag = $(obj).data("subSysObj").sub_system_tag;
+            pageAct.sysSubName = $(obj).data("subSysObj").full_name;
+            pageAct.sysSubObj = $(obj).data("subSysObj");
+            getDevItem();
+        }
+
+        function getDevItem() {
+            let url = baseApiUrl + "/api/Device/GetDeviceItem";
+
+            objSendData.Data = {
+                main_system_tag: pageAct.sysMainTag,
+                sub_system_tag: pageAct.sysSubTag,
+            }
+            ytAjax = new YourTeam.Ajax(url, objSendData, function (res) {
+                if (!res || res.code != "0000" || !res.data) {
+
+                } else {
+                    pageAct.devItems = res.data;
+                }
+            }, null, "POST").send();
+        }
+
+        function alarmIconBlink(data) {
+            if (data?.data.length != 0) {
+                $(".page-header [name=topFunBtn][data-page=alert] i").addClass("blink");
+            } else {
+                $(".page-header [name=topFunBtn][data-page=alert] i").removeClass("blink");
+            }
+        }
+
+        function timeOutGetData() {
+            let timeOut3s = null, timeOut5m = null;
+            let events = $._data($(window)[0], "events");
+
+            if (Object.keys(events).findIndex(x => x == "timeout:3s") != -1) {
+                timeOut3s = setInterval(() => {
+                    $(window).trigger("timeout:3s");
+                }, 3000)
+            }
+
+            if (Object.keys(events).findIndex(x => x == "timeout:5m") != -1) {
+                timeOut5m = setInterval(() => {
+                    $(window).trigger("timeout:5m");
+                }, 5 * 60 * 1000)
+            }
+
+            timeOuters = timeOuters.concat([timeOut3s, timeOut5m]);
+        }
+
+        function showMainSys() {
+            let url = baseApiUrl + "/Utility/isShowMaiSys";
+
+            ytAjax = new YourTeam.Ajax(url, null, function (res) {
+                if (!res || res.code != "0000") {
+
+                } else {
+                    pageAct.mainStatus = res.data;
+                }
+            }, null, "POST").send();
 
         }
-      })
-    }
 
-    function getAllDevice() {
-      let url = baseApiUrl + "/api/Device/GetAllDevice";
-      let result = [];
-
-      ytAjax = new YourTeam.Ajax(url, null, function (res) {
-        if (!res || res.code != "0000" || !res.data) {
-
-        } else {
-          result = res.data;
+        function startPageLoading() {
+            if (!loadingTip) {
+                loadingTip = YT.Alert.Tip("資料讀取中...", "show");
+            }
         }
-      }, null, "POST").send();
-      return result;
-    }
 
-    function loadNoticeConSta() {
-      let noticeStatus = localStorage.getItem("noticeStatus");
-      chaNoticeConSta(noticeStatus ?? "show");
-    }
-
-    function chaNoticeConSta(type = null) {
-      let showText = $("#toggleNoticeBtn #noticeConText").data("show");
-      let hideText = $("#toggleNoticeBtn #noticeConText").data("hide");
-      let iconArr = ["fal fa-comment-slash", "fal fa-comment-dots"];
-      $("#noticeConIcon").removeClass(iconArr[0]).removeClass(iconArr[1]);
-      if (type != null) {
-        if (type == "hide") {
-          setHide();
-        } else if (type == "show") {
-          setShow();
+        function endPageLoading() {
+            if (loadingTip != null) {
+                $(loadingTip.ele).YTAlert().hide();
+                loadingTip = null;
+            }
         }
-      } else {
-        if ($("#noticeBlock").is(":visible")) {
-          setHide();
-        } else if (!$("#noticeBlock").is(":visible")) {
-          setShow();
+
+        function iniFroList() {
+            url = baseApiUrl + '/api/GetUsrFroList'
+            let hasMonitor = false;
+
+            ytAjax = new YourTeam.Ajax(url, null, function (res) {
+                if (!res || res.code != "0000" || !res.data) {
+
+                } else {
+                    let strHtml = `<div class="btn-group mx-4">
+                                                                        <a href="javascript:;" name="topFunBtn" data-page="dashboard" data-tabname="topFunBtn" class="text-center">
+                                                                            <i class="fal fa-home fa-2x"></i><br>首頁
+                                                                        </a>
+                                                                        <!--<div class="dropdown-menu">
+                                                                            <button class="dropdown-item" type="button">Action</button>
+                                                                            <button class="dropdown-item" type="button">Another action</button>
+                                                                            <button class="dropdown-item" type="button">Something else here</button>
+                                                                        </div>-->
+                                                                    </div>`;
+
+                    $.each(res.data, function (i, v) {
+                        if (v.authCode == 'PF1') {
+                            strHtml += `<div class="btn-group mx-4" >
+                                                                            <a href="javascript:;" id="sysMonTopBtn" class="text-center" data-toggle="navbar" data-target="#sysMonNavbar" data-tabname="topFunBtn" aria-haspopup="true" aria-expanded="false">
+                                                                                <i class="fal fa-tv fa-2x"></i><br>${v.subName}
+                                                                            </a>
+
+                                                                        </div>`;
+
+                            hasMonitor = true;
+                        }
+                        else {
+                            let icon = v.authCode == 'PF2' ? 'fa-chart-pie' : v.authCode == 'PF3' ? 'fa-chart-area' : v.authCode == 'PF4' ? 'fa-chart-line' : v.authCode == 'PF5' ? 'fa-bell' : v.authCode == 'PF6' ? 'fa-server' : v.authCode == 'PF7' ? 'fa-image' : v.authCode == 'PF8' ? 'fa-user' : '';
+                            strHtml += `<div class="btn-group mx-4">
+                                                                            <a href="javascript:;" name="topFunBtn" data-tabname="topFunBtn" class="dropdown-toggle no-arrow text-center"
+                                                                               data-page="${v.showView}">
+                                                                                <i class="fal ${icon} fa-2x"></i><br>${v.subName}
+                                                                            </a>
+                                                                        </div>`;
+                        }
+
+                    });
+
+                    $('#froLisPage').html(strHtml);
+                    $("#sysMonTopBtn").YTNavbar("init");
+
+
+                }
+            }, null, "POST").send();
         }
-      }
 
-      function setShow() {
-        $("#toggleNoticeBtn").find("#noticeConText").text(hideText);
-        $("#noticeConIcon").addClass(iconArr[0]);
-        $("#noticeBlock").show();
-        $("#noticeBlock").animate({ opacity: 1 }, 200)
-        localStorage.setItem("noticeStatus", "show");
-      }
+        function getSysMonBtnList() {
+            let url = baseApiUrl + "/api/Device/GetMainSub";
+            let sendData = {
+                building_tag: pageAct.buiTag,
+            };
+            objSendData.Data = sendData;
+            ytAjax = new YourTeam.Ajax(url, objSendData, function (res) {
+                if (!res || res.code != "0000" || !res.data) {
 
-      function setHide() {
-        $("#toggleNoticeBtn").find("#noticeConText").text(showText);
-        $("#noticeConIcon").addClass(iconArr[1]);
-        $("#noticeBlock").animate({ opacity: 0 }, 200, function () {
-          $("#noticeBlock").hide();
-        })
-        localStorage.setItem("noticeStatus", "hide");
-      }
+                } else {
+                    $("#sysMonBtnList").html("")
 
-    }
-  </script>
+                    $.each(res.data.history_Main_Systems, (index, mainSysObj) => {
+                        $.each(mainSysObj.history_Sub_systems, (index2, subSysObj) => {
+                            let page = "systemMonitor";
+                            if (subSysObj.sub_system_tag == "EL") {
+                                page = "sysElevator";
+                            }
+                            // console.log(subSysObj.sub_system_tag)
+                            // if (subSysObj.sub_system_tag == "M12") {
+                            //     page = "sysSensor";
+                            // }
+
+                            let li = creEle("li");
+                            let a = creA(subSysObj.full_name, { "href": "javascript:;" }, [], `subSysBtn${subSysObj.sub_system_tag}`, { page: page, tabname: "systemMonitor" }, "topFunBtn");
+                            li.append(a);
+                            a.data("subSysObj", subSysObj)
+                            subSysObj.main_system_tag = mainSysObj.main_system_tag;
+                            $("#sysMonBtnList").append(li);
+                        })
+                    })
+                }
+            }, null, "POST").send();
+        }
+
+        function getLogo() {
+            url = baseApiUrl + '/api/GetLogo';
+            ytAjax = new YourTeam.Ajax(url, null, function (res) {
+                $('[name=webLogo]').attr('src', baseImgUrl + '/img/' + res.data);
+            }, null, "POST").send();
+        }
+
+        function getUserInfo() {
+            let url = baseApiUrl + varApiUrl + "getUserFull";
+
+            ytAjax = new YourTeam.Ajax(url, null, function (res) {
+                if (!res || res.code != "0000") {
+
+                } else {
+                    pageAct.userInfo = res.data;
+                    let user = res.data;
+                    $("#usrName").text(user.full_name);
+                }
+            }, null, "POST").send();
+        }
+
+        var noticeOptArr = [];
+        function getAlarmFromDB() {
+            let url = baseApiUrl + "/api/AlarmCard";
+            ytAjax = new YourTeam.Ajax(url, null, function (res) {
+                if (!res || res.code != "0000" || !res.data) {
+
+                } else {
+                    let datas = res.data;
+
+
+                }
+            }, null, "POST", true).send();
+        }
+
+        function getAlarm() {
+            let now = (new Date()).getTime();
+            let noticeObj =
+                [
+                    { title: "異常編號", data: "uuid" },
+                    { title: "異常等級", data: "priority" },
+                    { title: "異常類別", data: "alarmClass" },
+                    { title: "設備名稱", data: "full_name" },
+                    { title: "異常訊息", data: "msgText" },
+                ];
+            // 向 niagara 取得告警資料
+            getDeviceAlarmCardByBaja(null, now, false, false, function (bajaDatas) {
+                let datas = bajaDatas.data;
+                let titleHtml = `異常通知`;
+                let notices = [];
+                // 遍歷每個告警資料
+                $.each((datas ?? []), (idx, data) => {
+                    if (noticeOptArr.findIndex(x => x.id == data.uuid) == -1) {
+                        // 針對該告警對象的設備，從 allDevices 找出設備名稱
+                        datas[idx].full_name = allDevices.filter(x => x.device_number == data.devicePath)[0]?.full_name;
+
+                        let div1 = creDiv(["col-12"]);
+                        let button = creBtn("確認", "noticeChkBtn", null, ["btn btn-sm btn-secondary ml-auto col-4"], { uuid: data.uuid });
+                        let btnDiv = creDiv(["d-flex m-0 gap-5 mt-2"]);
+                        btnDiv.append(button);
+                        // 繪製 每行告警資訊
+                        noticeObj.forEach(notice => {
+                            let div2 = creDiv(["row", "m-0"]);
+                            let span1 = creSpan(notice.title + "：", ["m-0"]);
+                            if (notice.data === 'uuid') {
+                                data[notice.data] = data[notice.data].split("-")[0]
+                            }
+                            span1.append(creSpan(data[notice.data]));
+                            div2.append(span1);
+                            div1.append(div2);
+                        })
+
+                        div1.append(btnDiv);
+                        // 拚湊 YTNotice 通知套件所需參數
+                        let main = {
+                            title: titleHtml,
+                            content: div1.outerHtml(),
+                            type: "warning",
+                            id: data.uuid,
+                            hasCloseBtn: true,
+                            timeText: displayDate(data.timestamp),
+                        }
+                        noticeOptArr.push(main);
+                        notices.push(main);
+                    }
+                })
+                if (notices.length != 0) {
+                    $("#noticeBlock").YTNotice("add_many", notices.oSort("id").reverse());
+
+                }
+            })
+        }
+
+        function getAllDevice() {
+            let url = baseApiUrl + "/api/Device/GetAllDevice";
+            let result = [];
+
+            ytAjax = new YourTeam.Ajax(url, null, function (res) {
+                if (!res || res.code != "0000" || !res.data) {
+
+                } else {
+                    result = res.data;
+                }
+            }, null, "POST").send();
+            return result;
+        }
+
+        function loadNoticeConSta() {
+            let noticeStatus = localStorage.getItem("noticeStatus");
+            chaNoticeConSta(noticeStatus ?? "show");
+        }
+
+        function chaNoticeConSta(type = null) {
+            let showText = $("#toggleNoticeBtn #noticeConText").data("show");
+            let hideText = $("#toggleNoticeBtn #noticeConText").data("hide");
+            let iconArr = ["fal fa-comment-slash", "fal fa-comment-dots"];
+            $("#noticeConIcon").removeClass(iconArr[0]).removeClass(iconArr[1]);
+            if (type != null) {
+                if (type == "hide") {
+                    setHide();
+                } else if (type == "show") {
+                    setShow();
+                }
+            } else {
+                if ($("#noticeBlock").is(":visible")) {
+                    setHide();
+                } else if (!$("#noticeBlock").is(":visible")) {
+                    setShow();
+                }
+            }
+
+            function setShow() {
+                $("#toggleNoticeBtn").find("#noticeConText").text(hideText);
+                $("#noticeConIcon").addClass(iconArr[0]);
+                $("#noticeBlock").show();
+                $("#noticeBlock").animate({ opacity: 1 }, 200)
+                localStorage.setItem("noticeStatus", "show");
+            }
+
+            function setHide() {
+                $("#toggleNoticeBtn").find("#noticeConText").text(showText);
+                $("#noticeConIcon").addClass(iconArr[1]);
+                $("#noticeBlock").animate({ opacity: 0 }, 200, function () {
+                    $("#noticeBlock").hide();
+                })
+                localStorage.setItem("noticeStatus", "hide");
+            }
+
+        }
+    </script>
 
 </body>
 <!-- END Body -->