From 8eed17987b167ea80d00bf2c327265b9abeda7ff Mon Sep 17 00:00:00 2001
From: Celeste <aafree2014@gmail.com>
Date: Mon, 21 Aug 2023 17:37:26 +0800
Subject: [PATCH] =?UTF-8?q?[Frontend]=20=E4=BF=AE=E6=94=B9=E7=B3=BB?=
 =?UTF-8?q?=E7=B5=B1=E7=9B=A3=E6=8E=A7=E7=82=BA=E4=B8=8B=E6=8B=89=E9=81=B8?=
 =?UTF-8?q?=E5=96=AE=20|=20=E7=B3=BB=E7=B5=B1=E7=9B=A3=E6=8E=A7=E5=81=B4?=
 =?UTF-8?q?=E9=82=8A=E9=81=B8=E5=96=AE=E6=94=B9=E5=9B=BA=E5=AE=9A=E4=B8=94?=
 =?UTF-8?q?=E7=82=BA=E5=B0=8F=E9=A1=9E|=E6=A0=A1=E5=9C=92=E7=B8=BD?=
 =?UTF-8?q?=E8=A6=BD=E5=8F=8A=E9=9B=BB=E8=A1=A8=E5=A1=97=E6=94=B9=E7=82=BA?=
 =?UTF-8?q?=E6=BB=BF=E7=89=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 Frontend/_alert.html          | 2156 ++++++++--------
 Frontend/_dashboard.html      |  156 +-
 Frontend/_elecSingleLine.html |   12 +-
 Frontend/_historyData.html    | 1014 ++++----
 Frontend/_schoolView.html     |   16 +-
 Frontend/_systemMonitor.html  |  128 +-
 Frontend/index.html           | 4485 ++++++++++++++++-----------------
 Frontend/js/site.js           |   53 +-
 8 files changed, 3960 insertions(+), 4060 deletions(-)

diff --git a/Frontend/_alert.html b/Frontend/_alert.html
index 8406a1f..0c30dea 100644
--- a/Frontend/_alert.html
+++ b/Frontend/_alert.html
@@ -1,1191 +1,1191 @@
 <main id="js-page-content" role="main" class="page-content">
-	<div class="row">
-		<div class="col-sm-12 col-xl-12">
-			<h1 class="p-2 mb-0">即時告警</h1>
-			<div class="row bg-dark p-2">
-				<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>
-						<button id="returnTrue" onclick="setReturn(true)" type="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>
-						<button id="confirmed" onclick="setConfirm(true)" type="button"
-								class="btn btn-secondary waves-effect waves-themed">
-							已確認
-						</button>
-					</div>
-				</div>
-				<div class="col-auto">
-					<a href="#" id="nearthirty" class="btn btn-secondary">近30天</a>
-				</div>
-				<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">
-					</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">
-					</div>
-				</div>
-				<hr>
+		<div class="row">
+				<div class="col-sm-12 col-xl-12">
+						<h1 class="p-2 mb-0">即時告警</h1>
+						<div class="row bg-dark p-2">
+								<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>
+												<button id="returnTrue" onclick="setReturn(true)" type="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>
+												<button id="confirmed" onclick="setConfirm(true)" type="button"
+																				class="btn btn-secondary waves-effect waves-themed">
+														已確認
+												</button>
+										</div>
+								</div>
+								<div class="col-auto">
+										<a href="#" id="nearthirty" class="btn btn-secondary">近30天</a>
+								</div>
+								<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">
+										</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">
+										</div>
+								</div>
+								<hr>
 
-			</div>
+						</div>
 
-			<div class="row bg-dark p-2 align-items-center">
-				<div class="col-auto">
-					<a href="#" id="selAllSys" onclick="selAllSysVal(this)" class="btn btn-info">全選類別</a>
-				</div>
-				<div class="col-auto">
-					<div id="alr_mainList" class="frame-wrap">
-					</div>
-				</div>
-			</div>
-			<div class="row bg-dark p-2 mb-5 align-items-center">
-				<div class="col-auto" style="padding-left: 133px">
-					<div id="alr_subList" class="frame-wrap">
-					</div>
-				</div>
-			</div>
-			<!--<div class="row bg-dark p-2 align-items-center" id="alr_mainList">
-					</div>
-					<div class="row bg-dark p-2 mb-5 align-items-center" id="alr_subList">
-					</div>-->
+						<div class="row bg-dark p-2 align-items-center">
+								<div class="col-auto">
+										<a href="#" id="selAllSys" onclick="selAllSysVal(this)" class="btn btn-info">全選類別</a>
+								</div>
+								<div class="col-auto">
+										<div id="alr_mainList" class="frame-wrap">
+										</div>
+								</div>
+						</div>
+						<div class="row bg-dark p-2 mb-5 align-items-center">
+								<div class="col-auto" style="padding-left: 133px">
+										<div id="alr_subList" class="frame-wrap">
+										</div>
+								</div>
+						</div>
+						<!--<div class="row bg-dark p-2 align-items-center" id="alr_mainList">
+								</div>
+								<div class="row bg-dark p-2 mb-5 align-items-center" id="alr_subList">
+								</div>-->
 
-			<div>
-				<div class="frame-wrap">
-					<table id="alertTable" class="table table-bordered table-striped text-center m-0 w-100">
-					</table>
+						<div>
+								<div class="frame-wrap">
+										<table id="alertTable" class="table table-bordered table-striped text-center m-0 w-100">
+										</table>
+								</div>
+						</div>
 				</div>
-			</div>
 		</div>
-	</div>
 </main>
 
 <!-- Modal center 保養/維修 -->
 <div class="modal fade" id="alr_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">
-				<h4 id="opeRecTitle" 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>
-			<form id="alr_opeRecForm">
-				<div class="modal-body">
-					<div class="row">
-						<div class="col-md-6">
-							<div class="form-group">
-								<label class="form-label" for="inpErrCode">異常編號</label>
-								<select class="form-control" id="inpErrCode" name="inpErrCode" disabled>
-									<option value=''>未選擇</option>
-								</select>
-							</div>
+					data-keyboard="false">
+		<div class="modal-dialog modal-dialog-centered" role="document">
+				<div class="modal-content">
+						<div class="modal-header">
+								<h4 id="opeRecTitle" 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="col-md-6">
-							<div class="form-group">
-								<label class="form-label" for="inpStaTime">預計開始時間</label>
-								<input type="date" id="inpStaTime" name="inpStaTime" class="form-control">
-							</div>
-						</div>
-						<div class="col-md-6">
-							<div class="form-group">
-								<label class="form-label" for="inpWorTyp">項目</label>
-								<select class="form-control custom-select-ri" id="inpWorTyp" name="inpWorTyp" disabled>
-									<option value='2' selected>維修</option>
-								</select>
-							</div>
-						</div>
-						<div class="col-md-6">
-							<div class="form-group">
-								<label class="form-label" for="inpFixDo">維修項目</label>
-								<input type="text" id="inpFixDo" name="inpFixDo" class="form-control">
-							</div>
-						</div>
-						<div class="col-md-6">
-							<div class="form-group">
-								<label class="form-label" for="inpFixDoCode">維修項目代碼(設備編號)</label>
-								<select class="form-control" id="inpFixDoCode" name="inpFixDoCode">
-									<option value=''>未選擇</option>
-								</select>
-							</div>
-						</div>
-						<div class="col-md-6">
-							<div class="form-group">
-								<label class="form-label" for="inpFixFirm">負責廠商</label>
-								<select class="form-control" id="inpFixFirm" name="inpFixFirm">
-									<option value=''>未選擇</option>
-								</select>
-							</div>
-						</div>
-						<div class="col-md-6">
-							<div class="form-group">
-								<label class="form-label" for="inpStatus">狀態</label>
-								<div class="form-control" id="inpStatus">
-									<div class="row container">
-										<div class="">
-											<input class="custom-radio-input" type="radio" name="inpSta" id="inpSta_0" value="0" checked>
-											<label class="form-label" for="inpSta_0">未完成</label>
-										</div>
+						<form id="alr_opeRecForm">
+								<div class="modal-body">
+										<div class="row">
+												<div class="col-md-6">
+														<div class="form-group">
+																<label class="form-label" for="inpErrCode">異常編號</label>
+																<select class="form-control" id="inpErrCode" name="inpErrCode" disabled>
+																		<option value=''>未選擇</option>
+																</select>
+														</div>
+												</div>
+												<div class="col-md-6">
+														<div class="form-group">
+																<label class="form-label" for="inpStaTime">預計開始時間</label>
+																<input type="date" id="inpStaTime" name="inpStaTime" class="form-control">
+														</div>
+												</div>
+												<div class="col-md-6">
+														<div class="form-group">
+																<label class="form-label" for="inpWorTyp">項目</label>
+																<select class="form-control custom-select-ri" id="inpWorTyp" name="inpWorTyp" disabled>
+																		<option value='2' selected>維修</option>
+																</select>
+														</div>
+												</div>
+												<div class="col-md-6">
+														<div class="form-group">
+																<label class="form-label" for="inpFixDo">維修項目</label>
+																<input type="text" id="inpFixDo" name="inpFixDo" class="form-control">
+														</div>
+												</div>
+												<div class="col-md-6">
+														<div class="form-group">
+																<label class="form-label" for="inpFixDoCode">維修項目代碼(設備編號)</label>
+																<select class="form-control" id="inpFixDoCode" name="inpFixDoCode">
+																		<option value=''>未選擇</option>
+																</select>
+														</div>
+												</div>
+												<div class="col-md-6">
+														<div class="form-group">
+																<label class="form-label" for="inpFixFirm">負責廠商</label>
+																<select class="form-control" id="inpFixFirm" name="inpFixFirm">
+																		<option value=''>未選擇</option>
+																</select>
+														</div>
+												</div>
+												<div class="col-md-6">
+														<div class="form-group">
+																<label class="form-label" for="inpStatus">狀態</label>
+																<div class="form-control" id="inpStatus">
+																		<div class="row container">
+																				<div class="">
+																						<input class="custom-radio-input" type="radio" name="inpSta" id="inpSta_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" value="1">
-											<label class="form-label" for="inpSta_1">完成</label>
-										</div>
-									</div>
-								</div>
-							</div>
-						</div>
-						<div class="col-md-6">
-							<div class="form-group">
-								<label class="form-label" for="inpWorPerId">工作人員編號</label>
-								<select class="form-control" id="inpWorPerId" name="inpWorPerId">
-									<option value=''>未選擇</option>
-								</select>
-							</div>
-						</div>
-						<div class="col-md-12">
-							<div class="form-group">
-								<label class="form-label" for="inpNotice">注意事項</label>
-								<textarea class="form-control" type="text" id="inpNotice" name="inpNotice" rows="7"></textarea>
-							</div>
-						</div>
-						<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>
-							</div>
-						</div>
-						<div class="col-md-12">
-							<label class="form-label">上傳檔案</label>
-							<div id='alr_forImage' class="col-sm-12 forimage mt-2 p-0">
-							</div>
-							<div id='alr_forFile' class="col-sm-12 forfile mt-2 p-0">
-							</div>
+																				<div class="px-4">
+																						<input class="custom-radio-input" type="radio" name="inpSta" id="inpSta_1" value="1">
+																						<label class="form-label" for="inpSta_1">完成</label>
+																				</div>
+																		</div>
+																</div>
+														</div>
+												</div>
+												<div class="col-md-6">
+														<div class="form-group">
+																<label class="form-label" for="inpWorPerId">工作人員編號</label>
+																<select class="form-control" id="inpWorPerId" name="inpWorPerId">
+																		<option value=''>未選擇</option>
+																</select>
+														</div>
+												</div>
+												<div class="col-md-12">
+														<div class="form-group">
+																<label class="form-label" for="inpNotice">注意事項</label>
+																<textarea class="form-control" type="text" id="inpNotice" name="inpNotice" rows="7"></textarea>
+														</div>
+												</div>
+												<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>
+														</div>
+												</div>
+												<div class="col-md-12">
+														<label class="form-label">上傳檔案</label>
+														<div id='alr_forImage' class="col-sm-12 forimage mt-2 p-0">
+														</div>
+														<div id='alr_forFile' class="col-sm-12 forfile mt-2 p-0">
+														</div>
 
-							<div class="form-group dropzone" id="alr_dropZone">
-								<div class="dz-message">
-									<div class="drag-icon-cph">
-										<i class="material-icons">backup</i>
-									</div>
-									<h3>選擇一個文件或拖放到這裡</h3>
-									<p class="mb-0 col-grey">
-										PDF檔案不超過 3MB
-									</p>
+														<div class="form-group dropzone" id="alr_dropZone">
+																<div class="dz-message">
+																		<div class="drag-icon-cph">
+																				<i class="material-icons">backup</i>
+																		</div>
+																		<h3>選擇一個文件或拖放到這裡</h3>
+																		<p class="mb-0 col-grey">
+																				PDF檔案不超過 3MB
+																		</p>
+																</div>
+																<div class="fallback">
+																		<input name="file" type="file" multiple />
+																</div>
+														</div>
+												</div>
+										</div>
 								</div>
-								<div class="fallback">
-									<input name="file" type="file" multiple />
+								<div class="modal-footer">
+										<button type="button" class="btn btn-secondary" id="alr_OpeRecCanBtn" data-dismiss="modal">關閉</button>
+										<button type="button" class="btn btn-primary" id="alr_OpeRecSendBtn" e-prevent>儲存</button>
 								</div>
-							</div>
-						</div>
-					</div>
+						</form>
 				</div>
-				<div class="modal-footer">
-					<button type="button" class="btn btn-secondary" id="alr_OpeRecCanBtn" data-dismiss="modal">關閉</button>
-					<button type="button" class="btn btn-primary" id="alr_OpeRecSendBtn" e-prevent>儲存</button>
-				</div>
-			</form>
 		</div>
-	</div>
 </div>
 
 <!-- Modal center 維修-->
 <div class="modal fade" id="alr_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">
-				<h4 id="alr_opeRecTitle" 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>
-			<form id="alr_opeRecForm_2">
-				<div class="modal-body">
-					<div class="row">
-						<div class="col-md-6">
-							<div class="form-group">
-								<label class="form-label" for="alr_inpNumber_2">表單編號</label>
-								<input type="text" id="alr_inpNumber_2" name="" class="form-control" disabled>
-							</div>
+		<div class="modal-dialog modal-dialog-centered" role="document">
+				<div class="modal-content">
+						<div class="modal-header">
+								<h4 id="alr_opeRecTitle" 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="col-md-6">
-							<div class="form-group">
-								<label class="form-label" for="alr_inpErrCode_2">異常編號</label>
-								<select class="form-control" id="alr_inpErrCode_2" name="alr_inpErrCode_2" disabled>
-									<option value=''>未選擇</option>
-								</select>
-							</div>
-						</div>
-						<div class="col-md-6">
-							<div class="form-group">
-								<label class="form-label" for="alr_inpStaTime_2">預計開始時間</label>
-								<input type="date" id="alr_inpStaTime_2" name="alr_inpStaTime_2" class="form-control" disabled>
-							</div>
-						</div>
-						<div class="col-md-6">
-							<div class="form-group">
-								<label class="form-label" for="alr_inpWorTyp_2">項目</label>
-								<select class="form-control custom-select-ri" id="alr_inpWorTyp_2" name="alr_inpWorTyp_2" disabled>
-									<option value=2 selected>維修</option>
-								</select>
-							</div>
-						</div>
-						<div class="col-md-6">
-							<div class="form-group">
-								<label class="form-label" for="alr_inpFixDo_2">維修項目</label>
-								<input type="text" id="alr_inpFixDo_2" name="alr_inpFixDo_2" class="form-control" disabled>
-							</div>
-						</div>
-						<div class="col-md-6">
-							<div class="form-group">
-								<label class="form-label" for="alr_inpFixDoCode_2">維修項目代碼(設備編號)</label>
-								<select class="form-control" id="alr_inpFixDoCode_2" name="alr_inpFixDoCode_2" disabled>
-									<option value=''>未選擇</option>
-								</select>
-							</div>
-						</div>
-						<div class="col-md-6">
-							<div class="form-group">
-								<label class="form-label" for="alr_inpFixFirm_2">負責廠商</label>
-								<select class="form-control" id="alr_inpFixFirm_2" name="alr_inpFixFirm_2" disabled>
-									<option value=''>未選擇</option>
-								</select>
-							</div>
-						</div>
-						<div class="col-md-6">
-							<div class="form-group">
-								<label class="form-label" for="alr_inpStatus_2">狀態</label>
-								<div class="form-control" id="alr_inpStatus_2">
-									<div class="row container">
-										<div class="">
-											<input class="custom-radio-input" type="radio" name="alr_inpSta_2" id="alr_inpSta_2_0" value="0" data-value="0" checked disabled>
-											<label class="form-label" for="alr_inpSta_0">未完成</label>
-										</div>
+						<form id="alr_opeRecForm_2">
+								<div class="modal-body">
+										<div class="row">
+												<div class="col-md-6">
+														<div class="form-group">
+																<label class="form-label" for="alr_inpNumber_2">表單編號</label>
+																<input type="text" id="alr_inpNumber_2" name="" class="form-control" disabled>
+														</div>
+												</div>
+												<div class="col-md-6">
+														<div class="form-group">
+																<label class="form-label" for="alr_inpErrCode_2">異常編號</label>
+																<select class="form-control" id="alr_inpErrCode_2" name="alr_inpErrCode_2" disabled>
+																		<option value=''>未選擇</option>
+																</select>
+														</div>
+												</div>
+												<div class="col-md-6">
+														<div class="form-group">
+																<label class="form-label" for="alr_inpStaTime_2">預計開始時間</label>
+																<input type="date" id="alr_inpStaTime_2" name="alr_inpStaTime_2" class="form-control" disabled>
+														</div>
+												</div>
+												<div class="col-md-6">
+														<div class="form-group">
+																<label class="form-label" for="alr_inpWorTyp_2">項目</label>
+																<select class="form-control custom-select-ri" id="alr_inpWorTyp_2" name="alr_inpWorTyp_2" disabled>
+																		<option value=2 selected>維修</option>
+																</select>
+														</div>
+												</div>
+												<div class="col-md-6">
+														<div class="form-group">
+																<label class="form-label" for="alr_inpFixDo_2">維修項目</label>
+																<input type="text" id="alr_inpFixDo_2" name="alr_inpFixDo_2" class="form-control" disabled>
+														</div>
+												</div>
+												<div class="col-md-6">
+														<div class="form-group">
+																<label class="form-label" for="alr_inpFixDoCode_2">維修項目代碼(設備編號)</label>
+																<select class="form-control" id="alr_inpFixDoCode_2" name="alr_inpFixDoCode_2" disabled>
+																		<option value=''>未選擇</option>
+																</select>
+														</div>
+												</div>
+												<div class="col-md-6">
+														<div class="form-group">
+																<label class="form-label" for="alr_inpFixFirm_2">負責廠商</label>
+																<select class="form-control" id="alr_inpFixFirm_2" name="alr_inpFixFirm_2" disabled>
+																		<option value=''>未選擇</option>
+																</select>
+														</div>
+												</div>
+												<div class="col-md-6">
+														<div class="form-group">
+																<label class="form-label" for="alr_inpStatus_2">狀態</label>
+																<div class="form-control" id="alr_inpStatus_2">
+																		<div class="row container">
+																				<div class="">
+																						<input class="custom-radio-input" type="radio" name="alr_inpSta_2" id="alr_inpSta_2_0" value="0" data-value="0" checked disabled>
+																						<label class="form-label" for="alr_inpSta_0">未完成</label>
+																				</div>
 
-										<div class="px-4">
-											<input class="custom-radio-input" type="radio" name="alr_inpSta_2" id="alr_inpSta_2_1" value="1" data-value="1" disabled>
-											<label class="form-label" for="alr_inpSta_1">完成</label>
-										</div>
-									</div>
-								</div>
-							</div>
-						</div>
-						<div class="col-md-6">
-							<div class="form-group">
-								<label class="form-label" for="alr_inpWorPerId_2">工作人員編號</label>
-								<select class="form-control" id="alr_inpWorPerId_2" name="alr_inpWorPerId_2" disabled>
-									<option value=''>未選擇</option>
-								</select>
-							</div>
-						</div>
-						<div class="col-md-12">
-							<div class="form-group">
-								<label class="form-label" for="alr_inpNotice_2">注意事項</label>
-								<textarea class="form-control" type="text" id="alr_inpNotice_2" name="alr_inpNotice_2" rows="7" disabled></textarea>
-							</div>
-						</div>
-						<div class="col-md-12">
-							<div class="form-group">
-								<label class="form-label" for="alr_inpDescription_2">結果描述</label>
-								<textarea class="form-control" type="text" id="alr_inpDescription_2" name="alr_inpDescription_2" rows="7" disabled></textarea>
-							</div>
-						</div>
-						<div class="col-md-12">
-							<label class="form-label">上傳檔案</label>
-							<div id='alr_ope_forImage_2' class="col-sm-12 forimage mt-2 p-0">
-							</div>
-							<div id='alr_ope_forFile_2' class="col-sm-12 forfile mt-2 p-0">
-							</div>
+																				<div class="px-4">
+																						<input class="custom-radio-input" type="radio" name="alr_inpSta_2" id="alr_inpSta_2_1" value="1" data-value="1" disabled>
+																						<label class="form-label" for="alr_inpSta_1">完成</label>
+																				</div>
+																		</div>
+																</div>
+														</div>
+												</div>
+												<div class="col-md-6">
+														<div class="form-group">
+																<label class="form-label" for="alr_inpWorPerId_2">工作人員編號</label>
+																<select class="form-control" id="alr_inpWorPerId_2" name="alr_inpWorPerId_2" disabled>
+																		<option value=''>未選擇</option>
+																</select>
+														</div>
+												</div>
+												<div class="col-md-12">
+														<div class="form-group">
+																<label class="form-label" for="alr_inpNotice_2">注意事項</label>
+																<textarea class="form-control" type="text" id="alr_inpNotice_2" name="alr_inpNotice_2" rows="7" disabled></textarea>
+														</div>
+												</div>
+												<div class="col-md-12">
+														<div class="form-group">
+																<label class="form-label" for="alr_inpDescription_2">結果描述</label>
+																<textarea class="form-control" type="text" id="alr_inpDescription_2" name="alr_inpDescription_2" rows="7" disabled></textarea>
+														</div>
+												</div>
+												<div class="col-md-12">
+														<label class="form-label">上傳檔案</label>
+														<div id='alr_ope_forImage_2' class="col-sm-12 forimage mt-2 p-0">
+														</div>
+														<div id='alr_ope_forFile_2' class="col-sm-12 forfile mt-2 p-0">
+														</div>
 
-							<div class="form-group dropzone" id="ope_dropZone_2">
-								<div class="dz-message">
-									<div class="drag-icon-cph">
-										<i class="material-icons">backup</i>
-									</div>
-									<h3>選擇一個文件或拖放到這裡</h3>
-									<p class="mb-0 col-grey">
-										PDF檔案不超過 10MB
-									</p>
+														<div class="form-group dropzone" id="ope_dropZone_2">
+																<div class="dz-message">
+																		<div class="drag-icon-cph">
+																				<i class="material-icons">backup</i>
+																		</div>
+																		<h3>選擇一個文件或拖放到這裡</h3>
+																		<p class="mb-0 col-grey">
+																				PDF檔案不超過 10MB
+																		</p>
+																</div>
+																<div class="fallback">
+																		<input name="file" type="file" multiple disabled />
+																</div>
+														</div>
+												</div>
+										</div>
 								</div>
-								<div class="fallback">
-									<input name="file" type="file" multiple disabled />
+								<div class="modal-footer">
+										<button type="button" class="btn btn-secondary" id="alr_OpeRecCanBtn_2" data-dismiss="modal">關閉</button>
 								</div>
-							</div>
-						</div>
-					</div>
+						</form>
 				</div>
-				<div class="modal-footer">
-					<button type="button" class="btn btn-secondary" id="alr_OpeRecCanBtn_2" data-dismiss="modal">關閉</button>
-				</div>
-			</form>
 		</div>
-	</div>
 </div>
 
 <script>
-	pageAct.selSysMain = null;
-	pageAct.selSysSub = null;
-	pageAct.alr_startdate = null;
-	pageAct.alr_enddate = null;
-	pageAct.imageFile = [];
-	pageAct.alrSelSysMain = []
-	pageAct.alrSelSysSub = [];
-	pageAct.selAllSysSub = false;
-	pageAct.addSelMain = null;
-	pageAct.addSelSub = null;
-	first = true;
-	// let dataAlarm = [];
-	var historyTable = null;
-	var elemIndex = 0;
-	var index = 0;
+		pageAct.selSysMain = null;
+		pageAct.selSysSub = null;
+		pageAct.alr_startdate = null;
+		pageAct.alr_enddate = null;
+		pageAct.imageFile = [];
+		pageAct.alrSelSysMain = []
+		pageAct.alrSelSysSub = [];
+		pageAct.selAllSysSub = false;
+		pageAct.addSelMain = null;
+		pageAct.addSelSub = null;
+		first = true;
+		// let dataAlarm = [];
+		var historyTable = null;
+		var elemIndex = 0;
+		var index = 0;
 
-	$(function () {
-		initDropzone();
-		setReturn(false);
-		setConfirm(false);
-		event();
-		sysList();
-		$('#nearthirty').click();
+		$(function () {
+				initDropzone();
+				setReturn(false);
+				setConfirm(false);
+				event();
+				sysList();
+				$('#nearthirty').click();
 
-		$('input[type=checkbox][data-type=main]').parent().on('change', function () {
-			pageAct.main_system_tag = $('input[type=checkbox]').map(function (i, v) {
-				if ($(v).data('type') == 'main') {
-					if ($(v).is(':checked')) {
-						$(`[data-main=` + $(v).prop('id') + `]`).attr('hidden', false);
-						return $(v).prop('id')
-					}
-					else
-						$(`[data-main=` + $(v).prop('id') + `]`).attr('hidden', true);
-				}
-			}).toArray();
+				$('input[type=checkbox][data-type=main]').parent().on('change', function () {
+						pageAct.main_system_tag = $('input[type=checkbox]').map(function (i, v) {
+								if ($(v).data('type') == 'main') {
+										if ($(v).is(':checked')) {
+												$(`[data-main=` + $(v).prop('id') + `]`).attr('hidden', false);
+												return $(v).prop('id')
+										}
+										else
+												$(`[data-main=` + $(v).prop('id') + `]`).attr('hidden', true);
+								}
+						}).toArray();
 
-			pageAct.SysType = null;
-		});
+						pageAct.SysType = null;
+				});
 
-		$('input[type=checkbox][data-type=sub]').on('click', function (e) {
-			if (!pageAct.selAllSysSub) {
-				// console.log(this);
-				pageAct.selAllSysSub = true;
+				$('input[type=checkbox][data-type=sub]').on('click', function (e) {
+						if (!pageAct.selAllSysSub) {
+								// console.log(this);
+								pageAct.selAllSysSub = true;
 
-				//$.each($('input[type=checkbox][data-type=sub]:checked'), function (i, v) {
-				//	$(v).click();
+								//$.each($('input[type=checkbox][data-type=sub]:checked'), function (i, v) {
+								//	$(v).click();
+								//});
+
+								if (pageAct.SysType == "all") {
+										if ($(this).is(':checked')) {
+												$(this).prop('checked', true);
+												$(this).click();
+										}
+								}
+								pageAct.selAllSysSub = false;
+
+								$('#selAllSys').html('全選類別');
+
+								pageAct.SysType = null;
+								getData();
+						}
+				});
+
+				//$('#alr_mainList').on('click', 'a[data-type=alr_main]', function () {
+				//	$(this).parent().parent().find('a').removeClass('btn-info');
+				//	$(this).parent().parent().find('a').addClass('btn-secondary');
+				//	$(this).addClass('btn-info');
+
+				//	$('a[data-type=alr_sub]').parent().parent().find('a').removeClass('btn-info');
+				//	$('a[data-type=alr_sub]').parent().parent().find('a').addClass('btn-secondary');
+
+				//	pageAct.SysType = null;
 				//});
 
-				if (pageAct.SysType == "all") {
-					if ($(this).is(':checked')) {
-						$(this).prop('checked', true);
-						$(this).click();
-					}
-				}
-				pageAct.selAllSysSub = false;
+				//$('#alr_subList, #alr_mainList').on('click', 'a[data-type=alr_sub][id!=selAllSys]', function () {
+				//	pageAct.selSysMain = $(this).parent().data('main');
+				//	pageAct.selSysSub = $(this).prop('id');
 
-				$('#selAllSys').html('全選類別');
+				//	if ($('#selAllSys').hasClass('btn-info')) {
+				//		$('#selAllSys').removeClass('btn-info');
+				//		$('#selAllSys').addClass('btn-secondary');
+				//		$('#alr_mainList a[data-type=alr_main]').removeClass('btn-info');
+				//		$('#alr_mainList a[data-type=alr_main]').addClass('btn-secondary');
+				//		$(`#alr_mainList a[data-type=alr_main][id=` + pageAct.selSysMain + `]`).addClass('btn-info');
+				//		$('#alr_subList a[data-type=alr_sub]').parent().attr('hidden', true);
+				//		$('#alr_subList a[data-type=alr_sub]').parent('[data-main=' + pageAct.selSysMain + ']').attr('hidden', false);
+				//	}
 
-				pageAct.SysType = null;
-				getData();
-			}
+				//	$(this).parent().parent().find('a').removeClass('btn-info');
+				//	$(this).parent().parent().find('a').addClass('btn-secondary');
+				//	$(this).addClass('btn-info');
+
+				//	pageAct.SysType = null;
+				//	getData();
+				//});
+
+				first = false;
 		});
 
-		//$('#alr_mainList').on('click', 'a[data-type=alr_main]', function () {
-		//	$(this).parent().parent().find('a').removeClass('btn-info');
-		//	$(this).parent().parent().find('a').addClass('btn-secondary');
-		//	$(this).addClass('btn-info');
+		function event() {
+				onEvent('click', '#nearthirty', function () {
+						let today = displayDate(new Date(Date.now()), "date").replaceAll('/', '-');
+						let thirtyDays = displayDate(new Date(new Date().setDate(new Date(Date.now()).getDate() - 30)), "date").replaceAll('/', '-');
+						$('#alr_startdate').val(thirtyDays);
+						$('#alr_startdate').data('val', thirtyDays);
+						$('#alr_enddate').val(today);
+						$('#alr_enddate').data('val', today);
+						if (!$(this).hasClass('btn-info'))
+								elemSelCol($(this));
 
-		//	$('a[data-type=alr_sub]').parent().parent().find('a').removeClass('btn-info');
-		//	$('a[data-type=alr_sub]').parent().parent().find('a').addClass('btn-secondary');
+						pageAct.alr_startdate = $("#alr_startdate").val();
+						pageAct.alr_enddate = $("#alr_enddate").val();
+						pageAct.SysType = 'all';
 
-		//	pageAct.SysType = null;
-		//});
+						if (!first) getData();
+						else selAllSysVal($('#selAllSys'))
+						// getData();
+				});
 
-		//$('#alr_subList, #alr_mainList').on('click', 'a[data-type=alr_sub][id!=selAllSys]', function () {
-		//	pageAct.selSysMain = $(this).parent().data('main');
-		//	pageAct.selSysSub = $(this).prop('id');
+				onEvent('change', '#alr_startdate, #alr_enddate', function () {
+						if ($('#alr_startdate').val() > $('#alr_enddate').val()) {
+								$('#alr_startdate').val($('#alr_startdate').data('val'));
+								$('#alr_enddate').val($('#alr_enddate').data('val'));
+								toast_error('不可選擇大於結束時間');
+						}
+						else {
+								let today = displayDate(new Date(Date.now()), "date").replaceAll('/', '-');
+								let alr_enddate = displayDate(new Date(new Date().setDate(new Date($('#alr_enddate').val()).getDate() - 30)), "date").replaceAll('/', '-');
+								let alr_startdate = $('#alr_startdate').val();
+								if (alr_enddate == alr_startdate && $('#alr_enddate').val() == today) {
+										$('#nearthirty').click();
+								}
+								else {
+										$('#nearthirty').removeClass('btn-info');
+										$('#nearthirty').addClass('btn-secondary');
+								}
 
-		//	if ($('#selAllSys').hasClass('btn-info')) {
-		//		$('#selAllSys').removeClass('btn-info');
-		//		$('#selAllSys').addClass('btn-secondary');
-		//		$('#alr_mainList a[data-type=alr_main]').removeClass('btn-info');
-		//		$('#alr_mainList a[data-type=alr_main]').addClass('btn-secondary');
-		//		$(`#alr_mainList a[data-type=alr_main][id=` + pageAct.selSysMain + `]`).addClass('btn-info');
-		//		$('#alr_subList a[data-type=alr_sub]').parent().attr('hidden', true);
-		//		$('#alr_subList a[data-type=alr_sub]').parent('[data-main=' + pageAct.selSysMain + ']').attr('hidden', false);
-		//	}
+								$('#alr_startdate').data('val', $('#alr_startdate').val());
+								$('#alr_enddate').data('val', $('#alr_enddate').val());
+						}
 
-		//	$(this).parent().parent().find('a').removeClass('btn-info');
-		//	$(this).parent().parent().find('a').addClass('btn-secondary');
-		//	$(this).addClass('btn-info');
+						pageAct.alr_startdate = $("#alr_startdate").val();
+						pageAct.alr_enddate = $("#alr_enddate").val();
+						getData();
+				});
 
-		//	pageAct.SysType = null;
-		//	getData();
-		//});
+				onEvent('click', 'a[data-type=alr_main]', function () {
+						$(`a[data-type=alr_sub]`).parent(`[data-main!=` + $(this).prop('id') + `]`).attr('hidden', true);
+						$(`a[data-type=alr_sub]`).parent(`[data-main=` + $(this).prop('id') + `]`).attr('hidden', false);
+				});
 
-		first = false;
-	});
+				onEvent('click', '#alertTable a[id=alr_recModal]', function () {
+						$('#alr_forImage').html('');
+						$('#alr_forFile').html('');
+						$('#inpNotice').val('');
+						$('#inpDescription').val('');
+						let alr_table = $('#alertTable').DataTable();
+						let alr_elem = $(this).parent().parent();
+						let alr_tableData = alr_table.row(alr_elem).data();
+						$('#inpErrCode').html(`<option value = ${alr_tableData.uuid}>${alr_tableData.msgText}</option>`);
+						$('#inpStaTime').val(displayDate(new Date(Date.now()), "date").replaceAll('/', '-'));
+						let deviceNumber = null;
+						let system = $(this).data("system");
+						pageAct.addSelMain = system.split("-")[0];
+						pageAct.addSelSub = system.split("-")[1];
 
-	function event() {
-		onEvent('click', '#nearthirty', function () {
-			let today = displayDate(new Date(Date.now()), "date").replaceAll('/', '-');
-			let thirtyDays = displayDate(new Date(new Date().setDate(new Date(Date.now()).getDate() - 30)), "date").replaceAll('/', '-');
-			$('#alr_startdate').val(thirtyDays);
-			$('#alr_startdate').data('val', thirtyDays);
-			$('#alr_enddate').val(today);
-			$('#alr_enddate').data('val', today);
-			if (!$(this).hasClass('btn-info'))
-				elemSelCol($(this));
+						deviceNumber = pageAct.AreaTag + "_" + alr_tableData.buildingFloorName_zh.toString().split('-')[0] + "_" + alr_tableData.alarmClass.toString().split('_')[0] + "_"
+								+ alr_tableData.alarmClass.toString().split('_')[1] + "_" + alr_tableData.buildingFloorName_zh.toString().split('-')[1] + "_" + alr_tableData.sourceName_zh.toString().split('-')[0] + "_"
+								+ alr_tableData.sourceName_zh.toString().split('-')[1];
 
-			pageAct.alr_startdate = $("#alr_startdate").val();
-			pageAct.alr_enddate = $("#alr_enddate").val();
-			pageAct.SysType = 'all';
+						selUser();
+						selDevice();
+						selOpeFir();
+						getUser();
 
-			if (!first) getData();
-			else selAllSysVal($('#selAllSys'))
-			// getData();
-		});
+						$('#inpFixDoCode option[data-sub=' + alr_tableData.alarmClass.toString().split('_')[1] + '][data-main=' + alr_tableData.alarmClass.toString().split('_')[0] + ']').attr('hidden', false);
+						$('#inpFixDoCode option[data-sub!=' + alr_tableData.alarmClass.toString().split('_')[1] + '][data-main!=' + alr_tableData.alarmClass.toString().split('_')[0] + ']').attr('hidden', true);
 
-		onEvent('change', '#alr_startdate, #alr_enddate', function () {
-			if ($('#alr_startdate').val() > $('#alr_enddate').val()) {
-				$('#alr_startdate').val($('#alr_startdate').data('val'));
-				$('#alr_enddate').val($('#alr_enddate').data('val'));
-				toast_error('不可選擇大於結束時間');
-			}
-			else {
-				let today = displayDate(new Date(Date.now()), "date").replaceAll('/', '-');
-				let alr_enddate = displayDate(new Date(new Date().setDate(new Date($('#alr_enddate').val()).getDate() - 30)), "date").replaceAll('/', '-');
-				let alr_startdate = $('#alr_startdate').val();
-				if (alr_enddate == alr_startdate && $('#alr_enddate').val() == today) {
-					$('#nearthirty').click();
+						let alr_fixDoCode = $($('#inpFixDoCode option[data-sub=' + alr_tableData.alarmClass.toString().split('_')[1] + '][data-main=' + alr_tableData.alarmClass.toString().split('_')[0] + ']')[0]).val();
+						$('#inpFixDoCode').val(alr_fixDoCode);
+				});
+
+				onEvent('click', '#alr_OpeRecSendBtn', function () {
+
+						let form = $("#alr_opeRecForm");
+						$(form).validate({
+								rules: {
+										inpWorTyp: { required: true },
+										inpFixDo: { required: true },
+										inpFixDoCode: { required: true },
+										inpFixFirm: { required: true },
+										inpStatus: { required: true },
+										inpWorPerId: { required: true },
+								}
+						});
+
+						if ($(form).valid()) {
+								let url = baseApiUrl + "/operation/SavOpeRecord";
+
+								let fd = new FormData();
+								$.each(pageAct.imageFile, function (i, v) {
+										fd.append("lorf[" + i + "].id", v.id);
+										fd.append("lorf[" + i + "].file", v.file);
+										fd.append("lorf[" + i + "].save_file_name", v.save_file_name);
+										fd.append("lorf[" + i + "].ori_file_name", v.ori_file_name);
+								});
+
+								fd.append("error_code", $('#inpErrCode').val());
+								fd.append("location", "台北" + $('#buiActDrop').text() + pageAct.floor);
+								fd.append("location_code", pageAct.AreaTag + pageAct.buiTag + pageAct.floor);
+								fd.append("device_system_category_layer2", pageAct.addSelMain);
+								fd.append("device_system_category_layer3", pageAct.addSelSub);
+								fd.append("work_type", parseInt($('#inpWorTyp').val()));
+								fd.append("fix_do", $('#inpFixDo').val());
+								fd.append("fix_do_code", $('#inpFixDoCode').val());
+								fd.append("fix_firm", parseInt($('#inpFixFirm').val()));
+								fd.append("status", parseInt($('#inpStatus').val()));
+								fd.append("work_person_id", $('#inpWorPerId').val());
+								fd.append("start_time", ($('#inpStaTime').val() || null) == null ? null : new Date($('#inpStaTime').val()).toISOString());
+								fd.append("notice", $('#inpNotice').val() || null);
+								fd.append("description", $('#inpDescription').val() || null);
+
+								objSendData.Data = sendData;
+								$.ajax({
+										url: url,
+										type: "POST",
+										data: fd,
+										async: false,
+										cache: false,
+										contentType: false,
+										processData: false,
+										beforeSend: function (xhr) { xhr.setRequestHeader('Authorization', "Bearer " + cookies.get("JWT-Authorization")) },
+										success: function (res) {
+												if (!res || res.code != "0000" || !res.data) {
+
+												} else {
+														//toast_ok(common.AddSuc);
+														//$("#opeFirmModal").modal("hide");
+														$("#alr_OpeRecCanBtn").click();
+														getData();
+												}
+										}
+								});
+
+								//ytAjax = new YourTeam.Ajax(url, objSendData, function (res) {
+								//	if (!res || res.code != "0000" || !res.data) {
+
+								//	} else {
+								//		//toast_ok(common.AddSuc);
+								//		//$("#opeFirmModal").modal("hide");
+								//		$("#OpeRecCanBtn").click();
+								//		refTable();
+								//	}
+								//}, null, "POST").send();
+						}
+				});
+		}
+
+		function setReturn(bool) {
+				pageAct.return = bool;
+				$('#returnFalse').removeClass('btn-info');
+				$('#returnTrue').removeClass('btn-info');
+				if (!bool) {
+						$('#returnFalse').removeClass('btn-secondary');
+						$('#returnFalse').addClass('btn-info');
+						$('#returnTrue').addClass('btn-secondary');
 				}
 				else {
-					$('#nearthirty').removeClass('btn-info');
-					$('#nearthirty').addClass('btn-secondary');
+						$('#returnTrue').removeClass('btn-secondary');
+						$('#returnTrue').addClass('btn-info');
+						$('#returnFalse').addClass('btn-secondary');
 				}
 
-				$('#alr_startdate').data('val', $('#alr_startdate').val());
-				$('#alr_enddate').data('val', $('#alr_enddate').val());
-			}
+				if (!first)
+						getData();
+		}
 
-			pageAct.alr_startdate = $("#alr_startdate").val();
-			pageAct.alr_enddate = $("#alr_enddate").val();
-			getData();
-		});
-
-		onEvent('click', 'a[data-type=alr_main]', function () {
-			$(`a[data-type=alr_sub]`).parent(`[data-main!=` + $(this).prop('id') + `]`).attr('hidden', true);
-			$(`a[data-type=alr_sub]`).parent(`[data-main=` + $(this).prop('id') + `]`).attr('hidden', false);
-		});
-
-		onEvent('click', '#alertTable a[id=alr_recModal]', function () {
-			$('#alr_forImage').html('');
-			$('#alr_forFile').html('');
-			$('#inpNotice').val('');
-			$('#inpDescription').val('');
-			let alr_table = $('#alertTable').DataTable();
-			let alr_elem = $(this).parent().parent();
-			let alr_tableData = alr_table.row(alr_elem).data();
-			$('#inpErrCode').html(`<option value = ${alr_tableData.uuid}>${alr_tableData.msgText}</option>`);
-			$('#inpStaTime').val(displayDate(new Date(Date.now()), "date").replaceAll('/', '-'));
-			let deviceNumber = null;
-			let system = $(this).data("system");
-			pageAct.addSelMain = system.split("-")[0];
-			pageAct.addSelSub = system.split("-")[1];
-
-			deviceNumber = pageAct.AreaTag + "_" + alr_tableData.buildingFloorName_zh.toString().split('-')[0] + "_" + alr_tableData.alarmClass.toString().split('_')[0] + "_"
-				+ alr_tableData.alarmClass.toString().split('_')[1] + "_" + alr_tableData.buildingFloorName_zh.toString().split('-')[1] + "_" + alr_tableData.sourceName_zh.toString().split('-')[0] + "_"
-				+ alr_tableData.sourceName_zh.toString().split('-')[1];
-
-			selUser();
-			selDevice();
-			selOpeFir();
-			getUser();
-
-			$('#inpFixDoCode option[data-sub=' + alr_tableData.alarmClass.toString().split('_')[1] + '][data-main=' + alr_tableData.alarmClass.toString().split('_')[0] + ']').attr('hidden', false);
-			$('#inpFixDoCode option[data-sub!=' + alr_tableData.alarmClass.toString().split('_')[1] + '][data-main!=' + alr_tableData.alarmClass.toString().split('_')[0] + ']').attr('hidden', true);
-
-			let alr_fixDoCode = $($('#inpFixDoCode option[data-sub=' + alr_tableData.alarmClass.toString().split('_')[1] + '][data-main=' + alr_tableData.alarmClass.toString().split('_')[0] + ']')[0]).val();
-			$('#inpFixDoCode').val(alr_fixDoCode);
-		});
-
-		onEvent('click', '#alr_OpeRecSendBtn', function () {
-
-			let form = $("#alr_opeRecForm");
-			$(form).validate({
-				rules: {
-					inpWorTyp: { required: true },
-					inpFixDo: { required: true },
-					inpFixDoCode: { required: true },
-					inpFixFirm: { required: true },
-					inpStatus: { required: true },
-					inpWorPerId: { required: true },
+		function setConfirm(bool) {
+				pageAct.confirm = bool;
+				$('#unconfirmed').removeClass('btn-info');
+				$('#confirmed').removeClass('btn-info');
+				if (!bool) {
+						$('#unconfirmed').removeClass('btn-secondary');
+						$('#unconfirmed').addClass('btn-info');
+						$('#confirmed').addClass('btn-secondary');
 				}
-			});
+				else {
+						$('#confirmed').removeClass('btn-secondary');
+						$('#confirmed').addClass('btn-info');
+						$('#unconfirmed').addClass('btn-secondary');
+				}
+				if (!first)
+						getData();
+		}
 
-			if ($(form).valid()) {
-				let url = baseApiUrl + "/operation/SavOpeRecord";
-
-				let fd = new FormData();
-				$.each(pageAct.imageFile, function (i, v) {
-					fd.append("lorf[" + i + "].id", v.id);
-					fd.append("lorf[" + i + "].file", v.file);
-					fd.append("lorf[" + i + "].save_file_name", v.save_file_name);
-					fd.append("lorf[" + i + "].ori_file_name", v.ori_file_name);
-				});
-
-				fd.append("error_code", $('#inpErrCode').val());
-				fd.append("location", "台北" + $('#buiActDrop').text() + pageAct.floor);
-				fd.append("location_code", pageAct.AreaTag + pageAct.buiTag + pageAct.floor);
-				fd.append("device_system_category_layer2", pageAct.addSelMain);
-				fd.append("device_system_category_layer3", pageAct.addSelSub);
-				fd.append("work_type", parseInt($('#inpWorTyp').val()));
-				fd.append("fix_do", $('#inpFixDo').val());
-				fd.append("fix_do_code", $('#inpFixDoCode').val());
-				fd.append("fix_firm", parseInt($('#inpFixFirm').val()));
-				fd.append("status", parseInt($('#inpStatus').val()));
-				fd.append("work_person_id", $('#inpWorPerId').val());
-				fd.append("start_time", ($('#inpStaTime').val() || null) == null ? null : new Date($('#inpStaTime').val()).toISOString());
-				fd.append("notice", $('#inpNotice').val() || null);
-				fd.append("description", $('#inpDescription').val() || null);
+		function elemSelCol(elem) {
+				if (elem.hasClass('btn-secondary')) {
+						$(elem).removeClass('btn-secondary');
+						$(elem).addClass('btn-info');
+				}
+				else if (elem.hasClass('btn-info')) {
+						$(elem).removeClass('btn-info');
+						$(elem).addClass('btn-secondary');
+				}
+		}
 
+		function sysList() {
+				let url = baseApiUrl + "/api/GetMainSub";
+				let sendData = {
+						building_tag: pageAct.buiTag
+				}
 				objSendData.Data = sendData;
-				$.ajax({
-					url: url,
-					type: "POST",
-					data: fd,
-					async: false,
-					cache: false,
-					contentType: false,
-					processData: false,
-					beforeSend: function (xhr) { xhr.setRequestHeader('Authorization', "Bearer " + cookies.get("JWT-Authorization")) },
-					success: function (res) {
-						if (!res || res.code != "0000" || !res.data) {
+				function success(res) {
+						let mainStrHtml = ``;
+						let subStrHtml = ``;
+						let display = pageAct.mainStatus ? "hidden" : "";
+						let firstSub = '';
+						let firstMain = '';
 
-						} else {
-							//toast_ok(common.AddSuc);
-							//$("#opeFirmModal").modal("hide");
-							$("#alr_OpeRecCanBtn").click();
-							getData();
-						}
-					}
-				});
+						//if (pageAct.mainStatus) {
+						//	mainStrHtml += `<div class="col-auto">
+						//						<a href="#" id="selAllSys" onclick="selAllSysVal(this)" class="btn btn-secondary">全部類別</a>
+						//					</div>`;
+						//}
+						//else {
+						//	subStrHtml += `<div class="col-auto">
+						//						<a href="#" id="selAllSys" onclick="selAllSysVal(this)" class="btn btn-secondary">全部類別</a>
+						//					</div>`;
+						//}
 
-				//ytAjax = new YourTeam.Ajax(url, objSendData, function (res) {
-				//	if (!res || res.code != "0000" || !res.data) {
+						//$.each(res.data.history_Main_Systems, function (i, v) {
+						//	if (pageAct.mainStatus) {
+						//		mainStrHtml += `<div class="col-auto">
+						//							<a href="#" class="btn btn-secondary" id=${v.main_system_tag} data-type="alr_main">${v.full_name}</a>
+						//						</div>`;
+						//	}
 
-				//	} else {
-				//		//toast_ok(common.AddSuc);
-				//		//$("#opeFirmModal").modal("hide");
-				//		$("#OpeRecCanBtn").click();
-				//		refTable();
-				//	}
-				//}, null, "POST").send();
-			}
-		});
-	}
+						//	$.each(v.history_Sub_systems, function (i2, v2) {
+						//		let selected = (i2 == 0 && i == 0) ? "info" : "secondary";
+						//		subStrHtml += `<div class="col-auto" data-main="${v.main_system_tag}" ${display}>
+						//							<a href="#" class="btn btn-${selected}" id="${v2.sub_system_tag}" data-type="alr_sub">${v2.full_name}</a>
+						//						</div>`;
 
-	function setReturn(bool) {
-		pageAct.return = bool;
-		$('#returnFalse').removeClass('btn-info');
-		$('#returnTrue').removeClass('btn-info');
-		if (!bool) {
-			$('#returnFalse').removeClass('btn-secondary');
-			$('#returnFalse').addClass('btn-info');
-			$('#returnTrue').addClass('btn-secondary');
-		}
-		else {
-			$('#returnTrue').removeClass('btn-secondary');
-			$('#returnTrue').addClass('btn-info');
-			$('#returnFalse').addClass('btn-secondary');
-		}
+						//		if (i2 == 0 && i == 0) {
+						//			pageAct.selSysSub = v2.sub_system_tag;
+						//			pageAct.selSysMain = v.main_system_tag;
+						//		}
+						//	});
+						//});
 
-		if (!first)
-			getData();
-	}
-
-	function setConfirm(bool) {
-		pageAct.confirm = bool;
-		$('#unconfirmed').removeClass('btn-info');
-		$('#confirmed').removeClass('btn-info');
-		if (!bool) {
-			$('#unconfirmed').removeClass('btn-secondary');
-			$('#unconfirmed').addClass('btn-info');
-			$('#confirmed').addClass('btn-secondary');
-		}
-		else {
-			$('#confirmed').removeClass('btn-secondary');
-			$('#confirmed').addClass('btn-info');
-			$('#unconfirmed').addClass('btn-secondary');
-		}
-		if (!first)
-			getData();
-	}
-
-	function elemSelCol(elem) {
-		if (elem.hasClass('btn-secondary')) {
-			$(elem).removeClass('btn-secondary');
-			$(elem).addClass('btn-info');
-		}
-		else if (elem.hasClass('btn-info')) {
-			$(elem).removeClass('btn-info');
-			$(elem).addClass('btn-secondary');
-		}
-	}
-
-	function sysList() {
-		let url = baseApiUrl + "/api/GetMainSub";
-		let sendData = {
-			building_tag: pageAct.buiTag
-		}
-		objSendData.Data = sendData;
-		function success(res) {
-			let mainStrHtml = ``;
-			let subStrHtml = ``;
-			let display = pageAct.mainStatus ? "hidden" : "";
-			let firstSub = '';
-			let firstMain = '';
-
-			//if (pageAct.mainStatus) {
-			//	mainStrHtml += `<div class="col-auto">
-			//						<a href="#" id="selAllSys" onclick="selAllSysVal(this)" class="btn btn-secondary">全部類別</a>
-			//					</div>`;
-			//}
-			//else {
-			//	subStrHtml += `<div class="col-auto">
-			//						<a href="#" id="selAllSys" onclick="selAllSysVal(this)" class="btn btn-secondary">全部類別</a>
-			//					</div>`;
-			//}
-
-			//$.each(res.data.history_Main_Systems, function (i, v) {
-			//	if (pageAct.mainStatus) {
-			//		mainStrHtml += `<div class="col-auto">
-			//							<a href="#" class="btn btn-secondary" id=${v.main_system_tag} data-type="alr_main">${v.full_name}</a>
-			//						</div>`;
-			//	}
-
-			//	$.each(v.history_Sub_systems, function (i2, v2) {
-			//		let selected = (i2 == 0 && i == 0) ? "info" : "secondary";
-			//		subStrHtml += `<div class="col-auto" data-main="${v.main_system_tag}" ${display}>
-			//							<a href="#" class="btn btn-${selected}" id="${v2.sub_system_tag}" data-type="alr_sub">${v2.full_name}</a>
-			//						</div>`;
-
-			//		if (i2 == 0 && i == 0) {
-			//			pageAct.selSysSub = v2.sub_system_tag;
-			//			pageAct.selSysMain = v.main_system_tag;
-			//		}
-			//	});
-			//});
-
-			$.each(res.data.history_Main_Systems, function (i, v) {
-				if (pageAct.mainStatus) {
-					mainStrHtml += `<div class="custom-control custom-checkbox custom-control-inline">
+						$.each(res.data.history_Main_Systems, function (i, v) {
+								if (pageAct.mainStatus) {
+										mainStrHtml += `<div class="custom-control custom-checkbox custom-control-inline">
 									<input type="checkbox" class="custom-control-input" data-type="main" id="${v.main_system_tag}">
 									<label class="custom-control-label" for="${v.main_system_tag}">${v.full_name}</label>
 								</div>`;
 
-					pageAct.alrSelSysMain.push(v);
-				}
+										pageAct.alrSelSysMain.push(v);
+								}
 
-				$.each(v.history_Sub_systems, function (i2, v2) {
-					var firDis = (i == 0) ? "" : display;
-					subStrHtml += `<div class="custom-control custom-checkbox custom-control-inline" data-main="${v.main_system_tag}" ${firDis}>
+								$.each(v.history_Sub_systems, function (i2, v2) {
+										var firDis = (i == 0) ? "" : display;
+										subStrHtml += `<div class="custom-control custom-checkbox custom-control-inline" data-main="${v.main_system_tag}" ${firDis}>
 									<input type="checkbox" class="custom-control-input" data-type="sub" id="${v2.sub_system_tag}">
 									<label class="custom-control-label" for="${v2.sub_system_tag}">${v2.full_name}</label>
 								</div>`;
 
-					pageAct.alrSelSysSub.push(v2);
+										pageAct.alrSelSysSub.push(v2);
 
-					if (i2 == 0 && i == 0) {
-						firstMain = v.main_system_tag;
-						firstSub = v2.sub_system_tag;
-						console.log(v.main_system_tag, v2.sub_system_tag)
-					}
-				});
-			});
-			subStrHtml += `<div class="custom-control custom-checkbox custom-control-inline" data-main="other">
+										if (i2 == 0 && i == 0) {
+												firstMain = v.main_system_tag;
+												firstSub = v2.sub_system_tag;
+												console.log(v.main_system_tag, v2.sub_system_tag)
+										}
+								});
+						});
+						subStrHtml += `<div class="custom-control custom-checkbox custom-control-inline" data-main="other">
 									<input type="checkbox" class="custom-control-input" data-type="sub" id="other">
 									<label class="custom-control-label" for="other">其他</label>
 								</div>`
-			if (pageAct.mainStatus) {
-				$('#alr_mainList').html(mainStrHtml);
-				$('#alr_subList').html(subStrHtml);
-				console.log($('input[data-type=main][id=' + firstMain + ']'))
-				$('input[data-type=main][id=' + firstMain + ']').click();
-			}
-			else {
-				$('#alr_mainList').html(subStrHtml);
-			}
-			// $('input[data-type=sub][id=' + firstSub + ']').click();
-		}
-		ytAjax = new YourTeam.Ajax(url, objSendData, success, null, "POST").send();
-	}
-
-	function selAllSysVal(elem) {
-		pageAct.selAllSysSub = true;
-		if ($(elem).html() == '全選類別') {
-			$('#alr_mainList input').map(function (i, v) {
-				if (!$(v).is(':checked')) {
-					$(v).click();
+						if (pageAct.mainStatus) {
+								$('#alr_mainList').html(mainStrHtml);
+								$('#alr_subList').html(subStrHtml);
+								console.log($('input[data-type=main][id=' + firstMain + ']'))
+								$('input[data-type=main][id=' + firstMain + ']').click();
+						}
+						else {
+								$('#alr_mainList').html(subStrHtml);
+						}
+						// $('input[data-type=sub][id=' + firstSub + ']').click();
 				}
-			});
-			$('#alr_subList input').map(function (i, v) {
-				if (!$(v).is(':checked')) {
-					$(v).click();
+				ytAjax = new YourTeam.Ajax(url, objSendData, success, null, "POST").send();
+		}
+
+		function selAllSysVal(elem) {
+				pageAct.selAllSysSub = true;
+				if ($(elem).html() == '全選類別') {
+						$('#alr_mainList input').map(function (i, v) {
+								if (!$(v).is(':checked')) {
+										$(v).click();
+								}
+						});
+						$('#alr_subList input').map(function (i, v) {
+								if (!$(v).is(':checked')) {
+										$(v).click();
+								}
+						});
+						$(elem).html('取消全選');
+
+						pageAct.SysType = 'all';
+				}
+				else {
+						$('#alr_mainList input').map(function (i, v) {
+								if ($(v).is(':checked'))
+										$(v).click();
+						});
+						$('#alr_subList input').map(function (i, v) {
+								if ($(v).is(':checked'))
+										$(v).click();
+						});
+						$(elem).html('全選類別');
+						pageAct.SysType = null;
 				}
-			});
-			$(elem).html('取消全選');
 
-			pageAct.SysType = 'all';
-		}
-		else {
-			$('#alr_mainList input').map(function (i, v) {
-				if ($(v).is(':checked'))
-					$(v).click();
-			});
-			$('#alr_subList input').map(function (i, v) {
-				if ($(v).is(':checked'))
-					$(v).click();
-			});
-			$(elem).html('全選類別');
-			pageAct.SysType = null;
+				getData();
+				pageAct.selAllSysSub = false;
 		}
 
-		getData();
-		pageAct.selAllSysSub = false;
-	}
+		function getData(type = null) {
+				dataAlarm = [];
+				$(loadEle).Loading("start");
+				let enddate = new Date(pageAct.alr_enddate + " 23:59:59").getTime();
+				let startdate = new Date(pageAct.alr_startdate + " 00:00:00").getTime();
 
-	function getData(type = null) {
-		dataAlarm = [];
-		$(loadEle).Loading("start");
-		let enddate = new Date(pageAct.alr_enddate + " 23:59:59").getTime();
-		let startdate = new Date(pageAct.alr_startdate + " 00:00:00").getTime();
-
-		if (pageAct.SysType == "all") {
-			getAllDeviceAlarmByBaja(startdate, enddate, pageAct.return, pageAct.confirm, callBackFromAllDeviceAlert);
+				if (pageAct.SysType == "all") {
+						getAllDeviceAlarmByBaja(startdate, enddate, pageAct.return, pageAct.confirm, callBackFromAllDeviceAlert);
+				}
+				else {
+						let elem = $('input[type=checkbox][data-type=sub]:checked');
+						elemIndex = 0;
+						index = 0;
+						if (elem && elem.length > 0) {
+								elemIndex = elem.length;
+								elem.each(function (i, v) {
+										if (v?.id === "other") {
+												console.log(v?.id)
+												getOtherAlarmByBaja(startdate, enddate, pageAct.return, pageAct.confirm, stackData);
+										}
+										else {
+												pageAct.selSysMain = $(v).parent().data('main');
+												pageAct.selSysSub = $(v).prop('id');
+												getAlarmByBaja(startdate, enddate, pageAct.return, pageAct.confirm, pageAct.selSysMain + "_" + pageAct.selSysSub + "_AlarmClass", stackData);
+										}
+								});
+						}
+						else {
+								$('#alertTable').DataTable().clear().draw();
+								$(loadEle).Loading("close");
+						}
+				}
 		}
-		else {
-			let elem = $('input[type=checkbox][data-type=sub]:checked');
-			elemIndex = 0;
-			index = 0;
-			if (elem && elem.length > 0) {
-				elemIndex = elem.length;
-				elem.each(function (i, v) {
-					if (v?.id === "other") {
-						console.log(v?.id)
-						getOtherAlarmByBaja(startdate, enddate, pageAct.return, pageAct.confirm, stackData);
-					}
-					else {
-						pageAct.selSysMain = $(v).parent().data('main');
-						pageAct.selSysSub = $(v).prop('id');
-						getAlarmByBaja(startdate, enddate, pageAct.return, pageAct.confirm, pageAct.selSysMain + "_" + pageAct.selSysSub + "_AlarmClass", stackData);
-					}
+
+		function stackData(res) {
+				res.data.forEach(v => {
+						dataAlarm.push(v);
 				});
-			}
-			else {
-				$('#alertTable').DataTable().clear().draw();
+				index++;
+
+				if (elemIndex == index)
+						callBackFromOneDeviceAlert(dataAlarm);
+		}
+
+		function callBackFromAllDeviceAlert(res) {
+				AlertList(res.data);
+
+				if (historyTable != null) {
+						let t = $('#alertTable').dataTable();
+
+						t.fnClearTable();
+						if (res.data.length > 0)
+								t.fnAddData(res.data);
+				}
+		}
+
+		function callBackFromOneDeviceAlert(res) {
+				AlertList(res);
+
+				if (historyTable != null) {
+						let t = $('#alertTable').dataTable();
+
+						t.fnClearTable();
+						if (res.length > 0)
+								t.fnAddData(res);
+				}
+		}
+
+		function refTable(data) {
+				let tag = "#alertTable";
+
+				let column_defs = [
+						{ "targets": [0], "width": "5%", "sortable": true },
+						{ "targets": [1], "width": "5%", "sortable": true },
+						{ "targets": [2], "width": "5%", "sortable": true },
+						{ "targets": [3], "width": "5%", "sortable": true },
+						{ "targets": [4], "width": "5%", "sortable": true },
+						{ "targets": [5], "width": "5%", "sortable": true },
+						{ "targets": [6], "width": "5%", "sortable": true },
+						{ "targets": [7], "width": "5%", "sortable": true },
+						{ "targets": [8], "width": "5%", "sortable": true },
+				];
+
+				let columns = [
+						{
+								"title": "棟別-樓層",
+								"data": "buildingFloorName_zh"
+						},
+						{
+								"title": "異常ID",
+								"data": "uuid",
+								render: (data) => {
+										return data.$val ? data.$val.split("-")[0] : data.split("-")[0]
+								}
+						},
+						{
+								"title": "異常類別",
+								"data": "alarmClass",
+								"render": function (data) {
+										return data.includes("_") ? data.split('_')[0] + "-" + data.split('_')[1] : data;
+								}
+						},
+						{
+								"title": "設備名稱",
+								"data": "sourceName_zh",
+								"render": function (data) {
+										return allDevices.find(d => d.device_number === data)?.full_name || ""
+								}
+						},
+						{
+								"title": "設備編號",
+								"data": "sourceTmp",
+						},
+						{
+								"title": "發生時間",
+								"data": "timestamp",
+								"render": function (data) {
+										return new Date(data).toLocaleString('zh-tw', { year: "numeric", month: "2-digit", day: "2-digit", hour: "2-digit", minute: "2-digit" }), displayDate(data, "datetime");
+								}
+						},
+						{
+								"title": "異常原因",
+								"data": "msgText",
+								"render": function (data) {
+										return data.split(':')[0];
+								}
+						},
+						{
+								"title": "Ack 確認",
+								"data": "ackState",
+								"render": function (data, type, row, meta) {
+										let confirm = data == "1" ? "待確認" : "確認";
+										let btnCol = data == "1" ? "warning" : "info";
+										return data == "1" ? `<td><button onclick="chgAck('${row.uuid}')" class="btn btn-${btnCol}">${confirm}</button></td>` :
+												`<td><span>${new Date(row.ackedTime
+												).toLocaleString('zh-tw')}</span></td>` /*`<td><button class="btn btn-${btnCol}">${confirm}</button></td>`*/;
+								}
+						},
+						{
+								"title": "派工/維運單號",
+								"data": "formId",
+								"render": function (data, type, row, meta) {
+
+										return data != null
+												? `<td><a href="#" id="readOpeRecBtn" data-toggle="modal" data-target="#alr_opeRecModal_2" data-formid="${data}">${data}</a></td>`
+												: `<td><a href="#" id="alr_recModal" class="btn btn-info" data-toggle="modal" data-target="#alr_opeRecModal" data-system='${row.alarmClass.includes("_") ? row.alarmClass.split('_')[0] + "-" + row.alarmClass.split('_')[1] : row.alarmClass}'>+ 維修單</a></td>`;
+								}
+						}
+				];
+
+				historyTable = new YourTeam.JqDataTables.getTableByStatic(tag, data, columns, column_defs, null, null, null, null, "tpi");
+				$('#alertTable').DataTable().order([5, 'desc']);
 				$(loadEle).Loading("close");
-			}
 		}
-	}
-
-	function stackData(res) {
-		res.data.forEach(v => {
-			dataAlarm.push(v);
-		});
-		index++;
-
-		if (elemIndex == index)
-			callBackFromOneDeviceAlert(dataAlarm);
-	}
-
-	function callBackFromAllDeviceAlert(res) {
-		AlertList(res.data);
-
-		if (historyTable != null) {
-			let t = $('#alertTable').dataTable();
-
-			t.fnClearTable();
-			if (res.data.length > 0)
-				t.fnAddData(res.data);
-		}
-	}
-
-	function callBackFromOneDeviceAlert(res) {
-		AlertList(res);
-
-		if (historyTable != null) {
-			let t = $('#alertTable').dataTable();
-
-			t.fnClearTable();
-			if (res.length > 0)
-				t.fnAddData(res);
-		}
-	}
-
-	function refTable(data) {
-		let tag = "#alertTable";
-
-		let column_defs = [
-			{ "targets": [0], "width": "5%", "sortable": true },
-			{ "targets": [1], "width": "5%", "sortable": true },
-			{ "targets": [2], "width": "5%", "sortable": true },
-			{ "targets": [3], "width": "5%", "sortable": true },
-			{ "targets": [4], "width": "5%", "sortable": true },
-			{ "targets": [5], "width": "5%", "sortable": true },
-			{ "targets": [6], "width": "5%", "sortable": true },
-			{ "targets": [7], "width": "5%", "sortable": true },
-			{ "targets": [8], "width": "5%", "sortable": true },
-		];
-
-		let columns = [
-			{
-				"title": "棟別-樓層",
-				"data": "buildingFloorName_zh"
-			},
-			{
-				"title": "異常ID",
-				"data": "uuid",
-				render: (data) => {
-					return data.$val ? data.$val.split("-")[0] : data.split("-")[0]
-				}
-			},
-			{
-				"title": "異常類別",
-				"data": "alarmClass",
-				"render": function (data) {
-					return data.includes("_") ? data.split('_')[0] + "-" + data.split('_')[1] : data;
-				}
-			},
-			{
-				"title": "設備名稱",
-				"data": "sourceName_zh",
-				"render": function (data) {
-					return allDevices.find(d => d.device_number === data)?.full_name || ""
-				}
-			},
-			{
-				"title": "設備編號",
-				"data": "sourceTmp",
-			},
-			{
-				"title": "發生時間",
-				"data": "timestamp",
-				"render": function (data) {
-					return new Date(data).toLocaleString('zh-tw', { year: "numeric", month: "2-digit", day: "2-digit", hour: "2-digit", minute: "2-digit" }), displayDate(data, "datetime");
-				}
-			},
-			{
-				"title": "異常原因",
-				"data": "msgText",
-				"render": function (data) {
-					return data.split(':')[0];
-				}
-			},
-			{
-				"title": "Ack 確認",
-				"data": "ackState",
-				"render": function (data, type, row, meta) {
-					let confirm = data == "1" ? "未確認" : "確認";
-					let btnCol = data == "1" ? "warning" : "info";
-					return data == "1" ? `<td><button onclick="chgAck('${row.uuid}')" class="btn btn-${btnCol}">${confirm}</button></td>` :
-						`<td><span>${new Date(row.ackedTime
-						).toLocaleString('zh-tw')}</span></td>` /*`<td><button class="btn btn-${btnCol}">${confirm}</button></td>`*/;
-				}
-			},
-			{
-				"title": "派工/維運單號",
-				"data": "formId",
-				"render": function (data, type, row, meta) {
-
-					return data != null
-						? `<td><a href="#" id="readOpeRecBtn" data-toggle="modal" data-target="#alr_opeRecModal_2" data-formid="${data}">${data}</a></td>`
-						: `<td><a href="#" id="alr_recModal" class="btn btn-info" data-toggle="modal" data-target="#alr_opeRecModal" data-system='${row.alarmClass.includes("_") ? row.alarmClass.split('_')[0] + "-" + row.alarmClass.split('_')[1] : row.alarmClass}'>+ 維修單</a></td>`;
-				}
-			}
-		];
-
-		historyTable = new YourTeam.JqDataTables.getTableByStatic(tag, data, columns, column_defs, null, null, null, null, "tpi");
-		$('#alertTable').DataTable().order([5, 'desc']);
-		$(loadEle).Loading("close");
-	}
 
 
-	function AlertList(data) {
-		objSendData.Data = [];
-		$.each(data, function (i, v) {
-			objSendData.Data.push({ uuid: v.uuid.$val || v.uuid })
-		});
-
-		url = baseApiUrl + "/Alert/AlertList";
-		ytAjax = new YourTeam.Ajax(url, objSendData, function (rel) {
-			if (rel.code == "0000") {
-				$.each(rel.data, function (i, v) {
-					let index = data.findIndex(x => (x.uuid.$val || x.uuid) === v.uuid);
-					data[index].formId = v.formId;
+		function AlertList(data) {
+				objSendData.Data = [];
+				$.each(data, function (i, v) {
+						objSendData.Data.push({ uuid: v.uuid.$val || v.uuid })
 				});
-				refTable(data)
-			}
-		}, null, "POST").send();
-	}
 
-	function selDevice() {
-		let url = baseApiUrl + "/operation/DevList";
-		let lsst = [];
-		lsst.push(pageAct.addSelSub);
-		//$('input[data-type=sub]').map(function (i, v) { lsst.push($(v).prop('id')); });
-		sendData = {
-			device_area_tag: pageAct.AreaTag,
-			device_building_tag: pageAct.buiTag,
-			list_sub_system_tag: lsst,
-		};
-		objSendData.Data = sendData;
-		ytAjax = new YourTeam.Ajax(url, objSendData, function (res) {
-			if (!res || res.code != "0000" || !res.data) {
+				url = baseApiUrl + "/Alert/AlertList";
+				ytAjax = new YourTeam.Ajax(url, objSendData, function (rel) {
+						if (rel.code == "0000") {
+								$.each(rel.data, function (i, v) {
+										let index = data.findIndex(x => (x.uuid.$val || x.uuid) === v.uuid);
+										data[index].formId = v.formId;
+								});
+								refTable(data)
+						}
+				}, null, "POST").send();
+		}
 
-			} else {
-				strHtml = ``;
-				$("#inpFixDoCode").html();
-				$("#alr_inpFixDoCode_2").html();
-				$.each(res.data, (index, roleObj) => {
-					strHtml += `<option value='${roleObj.device_number}' data-floor=${roleObj.device_floor_tag} data-main=${roleObj.device_system_tag} data-sub=${roleObj.device_name_tag} hidden>${roleObj.device_name}</option>`;
+		function selDevice() {
+				let url = baseApiUrl + "/operation/DevList";
+				let lsst = [];
+				lsst.push(pageAct.addSelSub);
+				//$('input[data-type=sub]').map(function (i, v) { lsst.push($(v).prop('id')); });
+				sendData = {
+						device_area_tag: pageAct.AreaTag,
+						device_building_tag: pageAct.buiTag,
+						list_sub_system_tag: lsst,
+				};
+				objSendData.Data = sendData;
+				ytAjax = new YourTeam.Ajax(url, objSendData, function (res) {
+						if (!res || res.code != "0000" || !res.data) {
 
-					if (index == 0) {
-						pageAct.sysMain = roleObj.device_system_tag;
-						pageAct.sysSub = roleObj.device_name_tag;
-						pageAct.floor = roleObj.device_floor_tag;
-						pageAct.number = roleObj.device_number;
-					}
-				})
-				$("#inpFixDoCode").html(strHtml);
-				$("#alr_inpFixDoCode_2").html(strHtml);
-			}
-		}, null, "POST").send();
-	}
+						} else {
+								strHtml = ``;
+								$("#inpFixDoCode").html();
+								$("#alr_inpFixDoCode_2").html();
+								$.each(res.data, (index, roleObj) => {
+										strHtml += `<option value='${roleObj.device_number}' data-floor=${roleObj.device_floor_tag} data-main=${roleObj.device_system_tag} data-sub=${roleObj.device_name_tag} hidden>${roleObj.device_name}</option>`;
 
-	function selUser() {
-		let url = baseApiUrl + "/User/UserManagerList";
-		ytAjax = new YourTeam.Ajax(url, objSendData, function (res) {
-			if (!res || res.code != "0000" || !res.data) {
+										if (index == 0) {
+												pageAct.sysMain = roleObj.device_system_tag;
+												pageAct.sysSub = roleObj.device_name_tag;
+												pageAct.floor = roleObj.device_floor_tag;
+												pageAct.number = roleObj.device_number;
+										}
+								})
+								$("#inpFixDoCode").html(strHtml);
+								$("#alr_inpFixDoCode_2").html(strHtml);
+						}
+				}, null, "POST").send();
+		}
 
-			} else {
-				$("#inpWorPerId").html();
-				$("#alr_inpWorPerId_2").html();
-				strHtml = ``;
-				strHtml += `<option value=''>未選擇</option>`;
-				$.each(res.data, (index, roleObj) => {
-					strHtml += `<option value='${roleObj.userinfo_guid}'>${roleObj.full_name}</option>`;
-				})
-				$("#inpWorPerId").html(strHtml);
-				$("#alr_inpWorPerId_2").html(strHtml);
-			}
-		}, null, "POST").send();
-	}
+		function selUser() {
+				let url = baseApiUrl + "/User/UserManagerList";
+				ytAjax = new YourTeam.Ajax(url, objSendData, function (res) {
+						if (!res || res.code != "0000" || !res.data) {
 
-	function selOpeFir() {
-		let url = baseApiUrl + "/operation/OpeFirSel";
-		let lsst = [];
-		lsst.push(pageAct.addSelSub);
-		objSendData.Data = { sub_system_tag: lsst };
-		//objSendData.Data = { sub_system_tag: $('input[data-type=sub]').map(function (i, v) { return $(v).prop('id'); }).toArray() };
-		// console.log(objSendData.Data)
-		ytAjax = new YourTeam.Ajax(url, objSendData, function (res) {
-			if (!res || res.code != "0000" || !res.data) {
+						} else {
+								$("#inpWorPerId").html();
+								$("#alr_inpWorPerId_2").html();
+								strHtml = ``;
+								strHtml += `<option value=''>未選擇</option>`;
+								$.each(res.data, (index, roleObj) => {
+										strHtml += `<option value='${roleObj.userinfo_guid}'>${roleObj.full_name}</option>`;
+								})
+								$("#inpWorPerId").html(strHtml);
+								$("#alr_inpWorPerId_2").html(strHtml);
+						}
+				}, null, "POST").send();
+		}
 
-			} else {
-				$("#inpFixFirm").html();
-				$("#alr_inpFixFirm_2").html();
-				strHtml = ``;
-				strHtml += `<option value=''>未選擇</option>`;
-				$.each(res.data, (index, roleObj) => {
-					strHtml += `<option value='${roleObj.id}'>${roleObj.name}</option>`;
-				})
-				$("#inpFixFirm").html(strHtml);
-				$("#alr_inpFixFirm_2").html(strHtml);
-			}
-		}, null, "POST").send();
-	}
+		function selOpeFir() {
+				let url = baseApiUrl + "/operation/OpeFirSel";
+				let lsst = [];
+				lsst.push(pageAct.addSelSub);
+				objSendData.Data = { sub_system_tag: lsst };
+				//objSendData.Data = { sub_system_tag: $('input[data-type=sub]').map(function (i, v) { return $(v).prop('id'); }).toArray() };
+				// console.log(objSendData.Data)
+				ytAjax = new YourTeam.Ajax(url, objSendData, function (res) {
+						if (!res || res.code != "0000" || !res.data) {
 
-	//上傳檔案 dropzone
-	function initDropzone() {
-		uploader = $("#alr_dropZone").dropzone({
-			url: baseApiUrl + '/api/Upload',
-			previewsContainer: false,
-			addRemoveLinks: false,
-			dictRemoveFile: `<span class="material-icons mi-delete">delete</span>`,
-			dictInvalidFileType: `上傳格式錯誤`,
-			dictCancelUploadConfirmation: `確定要取消上傳此檔案嗎？`,
-			dictCancelUpload: `<span class="material-icons mi-cancel">cancel</span>`,
-			maxFilesize: 3,
-			filesizeBase: 1024,
-			maxFiles: 50,
-			acceptedFiles: ".pdf, .docx, .doc, .xls, .xlsm, .xlsx, .ppt, .pptx, .gif, .png, .jpg, .jpeg",
-			headers: { "Authorization": 'Bearer ' + cookies.get("JWT-Authorization") },
-			accept: function (file, done) {
-				let fileHelper = new YourTeam.Utility.File();
-				tmpGuidArr = [];
+						} else {
+								$("#inpFixFirm").html();
+								$("#alr_inpFixFirm_2").html();
+								strHtml = ``;
+								strHtml += `<option value=''>未選擇</option>`;
+								$.each(res.data, (index, roleObj) => {
+										strHtml += `<option value='${roleObj.id}'>${roleObj.name}</option>`;
+								})
+								$("#inpFixFirm").html(strHtml);
+								$("#alr_inpFixFirm_2").html(strHtml);
+						}
+				}, null, "POST").send();
+		}
 
-				if (/\.(jpe?g|png|gif)$/i.test(file.name)) {
-					fileHelper.readAndPreviewImages(file, 'alr_forImage', 70, 70, '<span class="file-item m-1">', '<button class="btn-dark m-1" name="btnDelImg"><i class="fa fa-times"></i></button></span>');
+		//上傳檔案 dropzone
+		function initDropzone() {
+				uploader = $("#alr_dropZone").dropzone({
+						url: baseApiUrl + '/api/Upload',
+						previewsContainer: false,
+						addRemoveLinks: false,
+						dictRemoveFile: `<span class="material-icons mi-delete">delete</span>`,
+						dictInvalidFileType: `上傳格式錯誤`,
+						dictCancelUploadConfirmation: `確定要取消上傳此檔案嗎？`,
+						dictCancelUpload: `<span class="material-icons mi-cancel">cancel</span>`,
+						maxFilesize: 3,
+						filesizeBase: 1024,
+						maxFiles: 50,
+						acceptedFiles: ".pdf, .docx, .doc, .xls, .xlsm, .xlsx, .ppt, .pptx, .gif, .png, .jpg, .jpeg",
+						headers: { "Authorization": 'Bearer ' + cookies.get("JWT-Authorization") },
+						accept: function (file, done) {
+								let fileHelper = new YourTeam.Utility.File();
+								tmpGuidArr = [];
 
-					pageAct.imageFile.map(function (v, i) { tmpGuidArr.push(v.file.guid) });
-					if (jQuery.inArray(file.guid, tmpGuidArr) == -1) { //not in array
-						let fd = new FormData();
-						let f = file;
-						fd.append('file', f);
-						pageAct.imageFile.push({ "ori_file_name": f.name, "save_file_name": f.guid, "file": fd.get("file") });
-					}
-				}
-				else if (/\.(xls?x|doc?x|ptt?x|pdf|zip|rar|7zip|txt|odt|xml|rtf|ods|odp|pps?x)$/i.test(file.name)) {
-					fileHelper.readAndPreviewFiles(file, 'alr_forFile', 70, 70, "<div class='file-item'><i class='fas fa-file-alt fa-2x m-1'></i>", "<button class='btn-dark m-1' name='btnDelImg'><i class='fa fa-times'></i></button></div>");
+								if (/\.(jpe?g|png|gif)$/i.test(file.name)) {
+										fileHelper.readAndPreviewImages(file, 'alr_forImage', 70, 70, '<span class="file-item m-1">', '<button class="btn-dark m-1" name="btnDelImg"><i class="fa fa-times"></i></button></span>');
 
-					pageAct.imageFile.map(function (v, i) { tmpGuidArr.push(v.file.guid) });
-					if (jQuery.inArray(file.guid, tmpGuidArr) == -1) { //not in array
-						let fd = new FormData();
-						let f = file;
-						fd.append('file', f);
-						pageAct.imageFile.push({ "ori_file_name": f.name, "save_file_name": f.guid, "file": fd.get("file") });
-					}
-				}
-			}
-		});
-	}
+										pageAct.imageFile.map(function (v, i) { tmpGuidArr.push(v.file.guid) });
+										if (jQuery.inArray(file.guid, tmpGuidArr) == -1) { //not in array
+												let fd = new FormData();
+												let f = file;
+												fd.append('file', f);
+												pageAct.imageFile.push({ "ori_file_name": f.name, "save_file_name": f.guid, "file": fd.get("file") });
+										}
+								}
+								else if (/\.(xls?x|doc?x|ptt?x|pdf|zip|rar|7zip|txt|odt|xml|rtf|ods|odp|pps?x)$/i.test(file.name)) {
+										fileHelper.readAndPreviewFiles(file, 'alr_forFile', 70, 70, "<div class='file-item'><i class='fas fa-file-alt fa-2x m-1'></i>", "<button class='btn-dark m-1' name='btnDelImg'><i class='fa fa-times'></i></button></div>");
 
-	function getUser() {
-		ytAjax = new YourTeam.Ajax(baseApiUrl + "/api/getUser", null, function (res) {
-			if (!res || res.code != "0000" || !res.data) {
-
-			} else {
-				$(pageAct.work_type == '1' ? '#inpWorPerId' : '#inpWorPerId_2').val(res.data);
-			}
-		}, null, "POST").send();
-	}
-
-	function chgAck(devUuid) {
-		$.post(window.location.origin + '/obix/alarm/' + devUuid + '/ack', '<obj is="obix:AckAlarmIn"><str name="ackUser" val="obix" /></obj>', null, "text");
-		getData();
-	}
-
-	onEvent('click', '#readOpeRecBtn', function () {
-
-
-		$('#alr_ope_forImage').html('');
-		$('#alr_ope_forFile').html('');
-		$('#alr_ope_forImage_2').html('');
-		$('#alr_ope_forFile_2').html('');
-		$('#alr_inpStatus_2 [name=alr_inpSta_2]').prop("disabled", false);
-
-		pageAct.imageFile = [];
-		$('#alr_opeRecTitle').html("讀取維修");
-		let url = baseApiUrl + "/operation/OpeRecRead";
-		objSendData.Data = { formId: $(this).data("formid") };
-		ytAjax = new YourTeam.Ajax(url, objSendData, function (res) {
-			if (!res || res.code != "0000" || !res.data) {
-
-			} else {
-				pageAct.sysSub = res.data.device_system_category_layer3;
-				pageAct.number = res.data.fix_do_code;
-				pageAct.addSelSub = res.data.device_system_category_layer3;
-				selUser();
-				selDevice();
-				selOpeFir();
-				errCodeList();
-				$('#alr_inpNumber_2').val(res.data.formId);
-				$('#alr_inpWorTyp_2').val(res.data.work_type);
-				$('#alr_inpFixDo_2').val(res.data.fix_do);
-				$('#alr_inpFixDoCode_2').val(res.data.fix_do_code);
-				$('#alr_inpFixFirm_2').val(res.data.fix_firm);
-				$('#alr_inpStatus_2 [name=alr_inpSta_2][data-value=' + res.data.status + ']').click();
-				$('#alr_inpStatus_2 [name=alr_inpSta_2][data-value=' + (res.data.status > 0 ? 0 : 1) + ']').prop("disabled", true);
-				$('#alr_inpWorPerId_2').val(res.data.work_person_id);
-				$('#alr_inpStaTime_2').val(displayDate(res.data.start_time, 'date').replaceAll('/', '-'));
-				$('#alr_inpNotice_2').val(res.data.notice == null ? "" : res.data.notice);
-				$('#alr_inpDescription_2').val(res.data.description == null ? "" : res.data.description);
-
-				ope_imgHtml = null;
-				$.each(res.data.lorf, function (i, v) {
-
-					let extName = v.ori_file_name.split('.')[1];
-
-					if (/\.(jpe?g|png|gif)$/i.test(v.ori_file_name)) {
-
-						ope_colI = creEle("i", null, null, null, ["fa fa-times"]);
-						ope_colBtn = creBtn(null, null, "btnDelImg", ["btn-dark m-1"]);
-						ope_colImg = creImg("img", null, null, null, null, { filename: v.ori_file_name, savename: v.save_file_name }, { style: "margin-left: 30px; margin-top: 10px", height: "70px", width: "70px", src: baseApiUrl + "/upload/operation/" + v.save_file_name + "." + extName });
-						ope_colA = creEle("a", null, null, null, null, null, { href: baseApiUrl + "/upload/operation/" + v.save_file_name + "." + extName, download: v.ori_file_name, target: "_blank" });
-						ope_imgHtml = creEle("span", null, null, null, ["file-item m-1"], { id: v.id }, null);
-
-						ope_colA.append(ope_colImg);
-						ope_imgHtml.append(ope_colA);
-						ope_colBtn.append(ope_colI);
-						ope_imgHtml.append(ope_colBtn);
-						$('#alr_ope_forImage_2').append(ope_imgHtml ? ope_imgHtml.outerHtml() : null);
-					}
-					else if (/\.(xls?x|doc?x|ptt?x|pdf|zip|rar|7zip|txt|odt|xml|rtf|ods|odp|pps?x)$/i.test(v.ori_file_name)) {
-						icons = null
-						if (extName == "xlsx" || extName == "xls")
-							icons = "fas fa-file-excel";
-						else if (extName == "pdf" || extName == "ods")
-							icons = "fas fa-file-pdf";
-						else if (extName == "doc" || extName == "docx")
-							icons = "fas fa-file-word";
-						else
-							icons = "fas fa-file-alt";
-
-						ope_colI = creEle("i", null, null, null, ["fa fa-times"]);
-						ope_colBtn = creBtn(null, null, "btnDelImg", ["btn-dark m-1"]);
-						ope_colBtn.append(ope_colI);
-
-						ope_colI = creEle("i", null, null, null, [icons + " fa-3x m-1"]);
-						ope_colA = creEle("a", v.ori_file_name, null, null, null, null, { href: baseApiUrl + "/upload/operation/" + v.save_file_name + "." + extName, download: v.ori_file_name, target: "_blank" });
-						ope_imgHtml = creEle("div", null, null, null, ["file-item"], { id: v.id }, null);
-
-						ope_imgHtml.append(ope_colI);
-						ope_imgHtml.append(ope_colA);
-						ope_imgHtml.append(ope_colBtn);
-						$('#alr_ope_forFile_2').append(ope_imgHtml ? ope_imgHtml.outerHtml() : null);
-					}
+										pageAct.imageFile.map(function (v, i) { tmpGuidArr.push(v.file.guid) });
+										if (jQuery.inArray(file.guid, tmpGuidArr) == -1) { //not in array
+												let fd = new FormData();
+												let f = file;
+												fd.append('file', f);
+												pageAct.imageFile.push({ "ori_file_name": f.name, "save_file_name": f.guid, "file": fd.get("file") });
+										}
+								}
+						}
 				});
-			}
-		}, null, "POST").send()
-	});
+		}
 
-	function errCodeList() {
-		$(loadEle).Loading("start");
-		let _pathArr = pageAct.number.split("_"); //TPE_B1_ELEV_EL_R2F_NA_ELEV1_N1
-		let _devicePath = _pathArr[0] + "_" + _pathArr[1] + "_" + _pathArr[2] + "_" + _pathArr[3] + "_" + _pathArr[4] + "_" + _pathArr[5];
-		getOneDeviceAlarmTop10ByBaja(_devicePath, callbackForErr);
-		$(loadEle).Loading("close");
-	}
+		function getUser() {
+				ytAjax = new YourTeam.Ajax(baseApiUrl + "/api/getUser", null, function (res) {
+						if (!res || res.code != "0000" || !res.data) {
 
-	function callbackForErr(res) {
-		res = JSON.parse(res);
-		strHtml = ``;
+						} else {
+								$(pageAct.work_type == '1' ? '#inpWorPerId' : '#inpWorPerId_2').val(res.data);
+						}
+				}, null, "POST").send();
+		}
 
-		$.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>`;
+		function chgAck(devUuid) {
+				$.post(window.location.origin + '/obix/alarm/' + devUuid + '/ack', '<obj is="obix:AckAlarmIn"><str name="ackUser" val="obix" /></obj>', null, "text");
+				getData();
+		}
+
+		onEvent('click', '#readOpeRecBtn', function () {
+
+
+				$('#alr_ope_forImage').html('');
+				$('#alr_ope_forFile').html('');
+				$('#alr_ope_forImage_2').html('');
+				$('#alr_ope_forFile_2').html('');
+				$('#alr_inpStatus_2 [name=alr_inpSta_2]').prop("disabled", false);
+
+				pageAct.imageFile = [];
+				$('#alr_opeRecTitle').html("讀取維修");
+				let url = baseApiUrl + "/operation/OpeRecRead";
+				objSendData.Data = { formId: $(this).data("formid") };
+				ytAjax = new YourTeam.Ajax(url, objSendData, function (res) {
+						if (!res || res.code != "0000" || !res.data) {
+
+						} else {
+								pageAct.sysSub = res.data.device_system_category_layer3;
+								pageAct.number = res.data.fix_do_code;
+								pageAct.addSelSub = res.data.device_system_category_layer3;
+								selUser();
+								selDevice();
+								selOpeFir();
+								errCodeList();
+								$('#alr_inpNumber_2').val(res.data.formId);
+								$('#alr_inpWorTyp_2').val(res.data.work_type);
+								$('#alr_inpFixDo_2').val(res.data.fix_do);
+								$('#alr_inpFixDoCode_2').val(res.data.fix_do_code);
+								$('#alr_inpFixFirm_2').val(res.data.fix_firm);
+								$('#alr_inpStatus_2 [name=alr_inpSta_2][data-value=' + res.data.status + ']').click();
+								$('#alr_inpStatus_2 [name=alr_inpSta_2][data-value=' + (res.data.status > 0 ? 0 : 1) + ']').prop("disabled", true);
+								$('#alr_inpWorPerId_2').val(res.data.work_person_id);
+								$('#alr_inpStaTime_2').val(displayDate(res.data.start_time, 'date').replaceAll('/', '-'));
+								$('#alr_inpNotice_2').val(res.data.notice == null ? "" : res.data.notice);
+								$('#alr_inpDescription_2').val(res.data.description == null ? "" : res.data.description);
+
+								ope_imgHtml = null;
+								$.each(res.data.lorf, function (i, v) {
+
+										let extName = v.ori_file_name.split('.')[1];
+
+										if (/\.(jpe?g|png|gif)$/i.test(v.ori_file_name)) {
+
+												ope_colI = creEle("i", null, null, null, ["fa fa-times"]);
+												ope_colBtn = creBtn(null, null, "btnDelImg", ["btn-dark m-1"]);
+												ope_colImg = creImg("img", null, null, null, null, { filename: v.ori_file_name, savename: v.save_file_name }, { style: "margin-left: 30px; margin-top: 10px", height: "70px", width: "70px", src: baseApiUrl + "/upload/operation/" + v.save_file_name + "." + extName });
+												ope_colA = creEle("a", null, null, null, null, null, { href: baseApiUrl + "/upload/operation/" + v.save_file_name + "." + extName, download: v.ori_file_name, target: "_blank" });
+												ope_imgHtml = creEle("span", null, null, null, ["file-item m-1"], { id: v.id }, null);
+
+												ope_colA.append(ope_colImg);
+												ope_imgHtml.append(ope_colA);
+												ope_colBtn.append(ope_colI);
+												ope_imgHtml.append(ope_colBtn);
+												$('#alr_ope_forImage_2').append(ope_imgHtml ? ope_imgHtml.outerHtml() : null);
+										}
+										else if (/\.(xls?x|doc?x|ptt?x|pdf|zip|rar|7zip|txt|odt|xml|rtf|ods|odp|pps?x)$/i.test(v.ori_file_name)) {
+												icons = null
+												if (extName == "xlsx" || extName == "xls")
+														icons = "fas fa-file-excel";
+												else if (extName == "pdf" || extName == "ods")
+														icons = "fas fa-file-pdf";
+												else if (extName == "doc" || extName == "docx")
+														icons = "fas fa-file-word";
+												else
+														icons = "fas fa-file-alt";
+
+												ope_colI = creEle("i", null, null, null, ["fa fa-times"]);
+												ope_colBtn = creBtn(null, null, "btnDelImg", ["btn-dark m-1"]);
+												ope_colBtn.append(ope_colI);
+
+												ope_colI = creEle("i", null, null, null, [icons + " fa-3x m-1"]);
+												ope_colA = creEle("a", v.ori_file_name, null, null, null, null, { href: baseApiUrl + "/upload/operation/" + v.save_file_name + "." + extName, download: v.ori_file_name, target: "_blank" });
+												ope_imgHtml = creEle("div", null, null, null, ["file-item"], { id: v.id }, null);
+
+												ope_imgHtml.append(ope_colI);
+												ope_imgHtml.append(ope_colA);
+												ope_imgHtml.append(ope_colBtn);
+												$('#alr_ope_forFile_2').append(ope_imgHtml ? ope_imgHtml.outerHtml() : null);
+										}
+								});
+						}
+				}, null, "POST").send()
 		});
 
-		if (res.count > 0)
-			$('#alr_inpErrCode_2').html(strHtml);
+		function errCodeList() {
+				$(loadEle).Loading("start");
+				let _pathArr = pageAct.number.split("_"); //TPE_B1_ELEV_EL_R2F_NA_ELEV1_N1
+				let _devicePath = _pathArr[0] + "_" + _pathArr[1] + "_" + _pathArr[2] + "_" + _pathArr[3] + "_" + _pathArr[4] + "_" + _pathArr[5];
+				getOneDeviceAlarmTop10ByBaja(_devicePath, callbackForErr);
+				$(loadEle).Loading("close");
+		}
 
-		$(loadEle).Loading("close");
-	}
+		function callbackForErr(res) {
+				res = JSON.parse(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)
+						$('#alr_inpErrCode_2').html(strHtml);
+
+				$(loadEle).Loading("close");
+		}
 </script>
\ No newline at end of file
diff --git a/Frontend/_dashboard.html b/Frontend/_dashboard.html
index 5008985..76d4f2a 100644
--- a/Frontend/_dashboard.html
+++ b/Frontend/_dashboard.html
@@ -15,53 +15,41 @@
     <div class="col-sm-12 col-xl-4">
       <div class="row">
         <div class="col-sm-6 col-xl-6">
-          <div
-            class="p-3 bg-primary-300 rounded overflow-hidden position-relative text-white mb-g"
-          >
+          <div class="p-3 bg-primary-300 rounded overflow-hidden position-relative text-white mb-g">
             <div class="">
               <h3 class="display-4 d-block l-h-n m-0 fw-500">
                 <span id="todayUseElec">--</span>
                 <small class="m-0 l-h-n">今日用電量 kWH</small>
               </h3>
             </div>
-            <i
-              class="fal fa-user position-absolute pos-right pos-bottom opacity-15 mb-n1 mr-n1"
-              style="font-size: 6rem"
-            ></i>
+            <i class="fal fa-user position-absolute pos-right pos-bottom opacity-15 mb-n1 mr-n1"
+               style="font-size: 6rem"></i>
           </div>
         </div>
         <div class="col-sm-6 col-xl-6">
-          <div
-            class="p-3 bg-warning-400 rounded overflow-hidden position-relative text-white mb-g"
-          >
+          <div class="p-3 bg-warning-400 rounded overflow-hidden position-relative text-white mb-g">
             <div class="">
               <h3 class="display-4 d-block l-h-n m-0 fw-500">
                 <span id="yesUseElec">--</span>
                 <small class="m-0 l-h-n">昨日用電量 kWH</small>
               </h3>
             </div>
-            <i
-              class="fal fa-gem position-absolute pos-right pos-bottom opacity-15 mb-n1 mr-n4"
-              style="font-size: 6rem"
-            ></i>
+            <i class="fal fa-gem position-absolute pos-right pos-bottom opacity-15 mb-n1 mr-n4"
+               style="font-size: 6rem"></i>
           </div>
         </div>
         <div class="col-lg-12">
-          <div
-            id="panel-2"
-            class="panel"
-            data-panel-sortable
-            data-panel-collapsed
-            data-panel-close
-          >
+          <div id="panel-2"
+               class="panel"
+               data-panel-sortable
+               data-panel-collapsed
+               data-panel-close>
             <div class="panel-hdr">
               <h2>昨日／今日用電比較 (kWh)</h2>
             </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">
@@ -93,45 +81,35 @@
     <div class="col-sm-12 col-xl-4">
       <div class="row">
         <div class="col-sm-6 col-xl-6">
-          <div
-            class="p-3 bg-success-200 rounded overflow-hidden position-relative text-white mb-g"
-          >
+          <div class="p-3 bg-success-200 rounded overflow-hidden position-relative text-white mb-g">
             <div class="">
               <h3 class="display-4 d-block l-h-n m-0 fw-500">
                 <span id="insPower">--</span>
                 <small class="m-0 l-h-n">即時功率 kW</small>
               </h3>
             </div>
-            <i
-              class="fal fa-lightbulb position-absolute pos-right pos-bottom opacity-15 mb-n5 mr-n6"
-              style="font-size: 8rem"
-            ></i>
+            <i class="fal fa-lightbulb position-absolute pos-right pos-bottom opacity-15 mb-n5 mr-n6"
+               style="font-size: 8rem"></i>
           </div>
         </div>
         <div class="col-sm-6 col-xl-6">
-          <div
-            class="p-3 bg-info-200 rounded overflow-hidden position-relative text-white mb-g"
-          >
+          <div class="p-3 bg-info-200 rounded overflow-hidden position-relative text-white mb-g">
             <div class="">
               <h3 class="display-4 d-block l-h-n m-0 fw-500">
                 <span id="insPowerPer">--</span>
                 <small class="m-0 l-h-n">即時契約容量占比 %</small>
               </h3>
             </div>
-            <i
-              class="fal fa-globe position-absolute pos-right pos-bottom opacity-15 mb-n1 mr-n4"
-              style="font-size: 6rem"
-            ></i>
+            <i class="fal fa-globe position-absolute pos-right pos-bottom opacity-15 mb-n1 mr-n4"
+               style="font-size: 6rem"></i>
           </div>
         </div>
         <div class="col-lg-12">
-          <div
-            id="panel-3"
-            class="panel"
-            data-panel-sortable
-            data-panel-collapsed
-            data-panel-close
-          >
+          <div id="panel-3"
+               class="panel"
+               data-panel-sortable
+               data-panel-collapsed
+               data-panel-close>
             <div class="panel-hdr">
               <h2>本週／上週用電比較 (kWh)</h2>
             </div>
@@ -204,16 +182,12 @@
             </div>
             <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"
-                >
+                <div class="col-12 mb-2 position-relative row m-0 justify-content-center"
+                     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"
-                >
+                <div class="col-12 mb-2 position-relative row m-0 justify-content-center"
+                     style="max-height: 150px">
                   <canvas class="chart" id="errChkChart"></canvas>
                 </div>
               </div>
@@ -227,16 +201,12 @@
             </div>
             <div class="panel-container h-100 show">
               <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"
-                >
+                <div class="col-12 mb-2 position-relative row m-0 justify-content-center"
+                     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"
-                >
+                <div class="col-12 mb-2 position-relative row m-0 justify-content-center"
+                     style="max-height: 150px">
                   <canvas class="chart" id="worOrdFinChart"></canvas>
                 </div>
               </div>
@@ -267,8 +237,6 @@
   };
   var contractCapacity = 0;
 
-  
-
   $(document).ready(function () {
     $(loadEle).Loading("start");
     $(loadEle).Loading("close");
@@ -292,10 +260,10 @@
           (x) => x.mainSys == obj.mainSys && x.subSys == obj.subSys
         )[0];
         strHtml = `<div class="btn-group btn-group-lg col-lg-6 mb-4 dev-group">
-                            <button name="topFunBtn" data-page="alert" type="button" class="btn btn-secondary col-4 d-flex jusity-content-center">
+                            <button name="topFunBtn" data-page="alert" type="button" class="btn btn-secondary col-4 d-flex jusity-content-center disabled" disabled>
                                 <img src="${iconObj.iconClass}" class="w-100"></img>
                                 </button>
-                            <button id="sysSubCardBtn${obj.subSys}" type="button" class="btn btn-secondary" data-id="${obj.subSys}" style="font-size: 20px">${obj.text}</button>
+                            <button id="sysSubCardBtn${obj.subSys}" type="button" class="btn btn-secondary disabled" disabled data-id="${obj.subSys}" style="font-size: 20px">${obj.text}</button>
                         </div>`;
         $("#sysSubBtnList").append(strHtml);
       }
@@ -331,10 +299,10 @@
                   x.subSys == subSysObj.sub_system_tag
               )[0]?.iconClass;
               strHtml += `<div class="btn-group btn-group-lg col-lg-6 mb-4 dev-group" data-id="/${pageAct.AreaTag}/${pageAct.buiTag}/${mainSysObj.main_system_tag}/${subSysObj.sub_system_tag}">
-                            <button name="topFunBtn" data-page="alert" type="button" class="btn btn-secondary col-4">
+                            <button name="topFunBtn" data-page="alert" type="button" class="btn btn-secondary col-4" >
                                 <img src="${iconClass}" class="w-100 "></img>
                                 </button>
-                            <button id="sysSubCardBtn${subSysObj.sub_system_tag}" type="button" class="btn btn-secondary" data-id="${subSysObj.sub_system_tag}"  style="font-size: 20px">${subSysObj.full_name}</button>
+                            <button id="sysSubCardBtn${subSysObj.sub_system_tag}" type="button" class="btn btn-secondary"  data-id="${subSysObj.sub_system_tag}"  style="font-size: 20px">${subSysObj.full_name}</button>
                         </div>`;
             });
           });
@@ -349,7 +317,7 @@
   // 取得 自動須量
   function getAutDemVal() {
     let url = baseApiUrl + "/api/Dashboard/GetContractValue";
-    let sendData = pageAct.buiTag
+    let sendData = pageAct.buiTag;
     objSendData.Data = sendData;
     ytAjax = new YourTeam.Ajax(
       url,
@@ -358,7 +326,7 @@
         if (!res || res.code != "0000" || !res.data) {
         } else {
           contractCapacity = (res.data || [])[0]?.contract_value ?? 0;
-          getFirstEletric()
+          getFirstEletric();
         }
       },
       null,
@@ -432,18 +400,12 @@
       "T00:00:00";
 
     // 今日用電量
-    getElectricMeterDayDataByBaja(
-      devNum,
-      n4Sup,
-      today,
-      tomorrow,
-      (data) => {
-        let result = data?.data[0]?.sum;
-        result = result ? parseFloat(result).toFixed(2) : 0;
-        $("#todayUseElec").text(result);
-        chkBajaLoaded();
-      }
-    );
+    getElectricMeterDayDataByBaja(devNum, n4Sup, today, tomorrow, (data) => {
+      let result = data?.data[0]?.sum;
+      result = result ? parseFloat(result).toFixed(2) : 0;
+      $("#todayUseElec").text(result);
+      chkBajaLoaded();
+    });
 
     // 今日用電量 (每小時)
     getElectricMeterHourDataByBaja(
@@ -470,18 +432,12 @@
     );
 
     // 昨日用電量
-    getElectricMeterDayDataByBaja(
-      devNum,
-      n4Sup,
-      yesterday,
-      today,
-      (data) => {
-        let result = data?.data[0]?.sum;
-        result = result ? parseFloat(result).toFixed(2) : 0;
-        $("#yesUseElec").text(result);
-        chkBajaLoaded();
-      }
-    );
+    getElectricMeterDayDataByBaja(devNum, n4Sup, yesterday, today, (data) => {
+      let result = data?.data[0]?.sum;
+      result = result ? parseFloat(result).toFixed(2) : 0;
+      $("#yesUseElec").text(result);
+      chkBajaLoaded();
+    });
 
     // 本週與上週用電量 (每天)
     getElectricMeterDayDataByBaja(
@@ -499,9 +455,9 @@
         let prevWeekData = data.data.filter(
           (x) =>
             strToDate(displayDate(new Date(), "date"), null, 1 - 14) <=
-              strToDate(x.timestamp.$cEncStr) &&
+            strToDate(x.timestamp.$cEncStr) &&
             strToDate(new Date(), null, 1 - 7) >=
-              strToDate(x.timestamp.$cEncStr)
+            strToDate(x.timestamp.$cEncStr)
         );
 
         chartEveWeeksElec(curWeekData, prevWeekData);
@@ -511,7 +467,7 @@
 
     // 異常數量與復歸數量
     getAlarmCountByBaja((aData) => {
-      console.log("aData",aData)
+      console.log("aData", aData);
       chartDataCnt.alarmCnt = aData;
       chkBajaLoaded();
     });
@@ -988,7 +944,7 @@
   }
 
   function show3DModel() {
-    if(typeof launchViewerNoTools != "undefined"){
+    if (typeof launchViewerNoTools != "undefined") {
       launchViewerNoTools(
         pageAct.urn,
         (viewer) => {
@@ -1024,6 +980,10 @@
 
   onEvent("click", "button[id^=sysSubCardBtn]", function () {
     let subSysTag = $(this).data("id");
-    $(`#subSysBtn${subSysTag}[data-building-tag='${buildingTagOnJquery(pageAct.buiTag)}']`).click();
+    $(
+      `#subSysBtn${subSysTag}[data-building-tag='${buildingTagOnJquery(
+        pageAct.buiTag
+      )}']`
+    ).click();
   });
 </script>
diff --git a/Frontend/_elecSingleLine.html b/Frontend/_elecSingleLine.html
index f5b34ed..b1a0c67 100644
--- a/Frontend/_elecSingleLine.html
+++ b/Frontend/_elecSingleLine.html
@@ -1,9 +1,9 @@
 
 <div class="container-fluid">
-    <div class="row bg-dark align-items-center">
-        <label id="sysSubText" class=" mx-5 mb-0 fs-1-05"></label>
-        <div style="height:85vh" class="col-12 p-0">
-            <iframe src="/ord?file:^px/AllMeter.px|view:?fullScreen=true" width="100%" height="100%" style="zoom:0.1"></iframe>
-       </div>
+  <div class="row bg-dark align-items-center">
+    <label id="sysSubText" class=" mx-5 mb-0 fs-1-05"></label>
+    <div style="height:91vh" class="col-12 p-0">
+      <iframe id="homeIframe" src="/ord?file:^px/AllMeter.px|view:?fullScreen=true" width="100%" height="100%" style="zoom:0.1"></iframe>
     </div>
-</div>
\ No newline at end of file
+  </div>
+</div>
diff --git a/Frontend/_historyData.html b/Frontend/_historyData.html
index 3a1a282..c9e8341 100644
--- a/Frontend/_historyData.html
+++ b/Frontend/_historyData.html
@@ -1,216 +1,216 @@
 <main id="js-page-content" role="main" class="page-content">
-    <h1 class="p-2 mb-0">歷史資料</h1>
-
-    <div class="row">
-        <div class="col-sm-12 col-xl-2">
-            <div class="rounded border border-white">
-                <div class="d-flex position-relative py-3 px-4">
-                    <i class="fal fa-search color-success-700 position-absolute pos-left fs-lg px-3 py-2 mt-1 ml-4"></i>
-                    <input type="text" id="js_nested_list_filter" class="form-control shadow-inset-1 pl-6 border-success" placeholder="輸入兩字以上">
-                </div>
-                <!-- nav-menu-reset will reset the font colors -->
-                <ul id="js_nested_list" class="nav-menu nav-menu-reset nav-menu-compact mb-sm-4 mb-md-0 rounded border border-white" data-nav-accordion="true">
-                </ul>
-                <div class="filter-message js-filter-message m-0 text-left pl-4 py-3 fw-500"></div>
-            </div>
-
-        </div>
-        <div class="col-sm-12 col-xl-10">
-            <div class="row bg-dark p-2">
-                <div>
-                    <div class="py-2 col-12" id="his_building">
-                        <div class="item btn-group btn-group-toggle"
-                             data-toggle="buttons"></div>
-                    </div>
-                </div>
-            </div>
-            <div class="row bg-dark p-2 mb-5 align-items-center">
-                <div class="col-auto">
-                    <div class="btn-group">
-                        <button type="button" onclick="setDateType('day', this)" class="btn btn-secondary waves-effect waves-themed">日期</button>
-                        <button type="button" onclick="setDateType('range', this)" class="btn btn-secondary waves-effect waves-themed">日區間</button>
-                        <button type="button" onclick="setDateType('month', this)" class="btn btn-secondary waves-effect waves-themed">月</button>
-                    </div>
-                </div>
-                <div class="col-auto">
-                    <div class="btn-group">
-                        <button type="button" onclick="setDateType('today', this)" class="btn btn-secondary waves-effect waves-themed">今天</button>
-                        <button type="button" onclick="setDateType('ytd', this)" class="btn btn-secondary waves-effect waves-themed">昨天</button>
-                    </div>
-                </div>
-                <div class="col-auto">
-                    <div class="form-group">
-                        <input class="form-control" id="his_startdate" data-val="" type="date" name="date" value="">
-                        <input class="form-control" id="getmonth" type="month" style="display: none" />
-                    </div>
-                </div>
-                <div class="col-auto" id="his_enddate" style="display: none">
-                    <div class="form-group">
-                        <input class="form-control" type="date" data-val="" name="date" value="">
-                    </div>
-                </div>
-                <div class="col-auto">
-                    <a href="#" onclick="searchDate()" class="btn btn-info">查詢</a>
-                    <a href="#" onclick="exportExcel()" class="btn btn-info waves-effect waves-themed">
-                        <span class="fal fa-file-excel mr-1"></span>
-                        匯出
-                    </a>
-                </div>
-            </div>
-
-            <div class="row-cols-1  mb-2">
-                <div id="devPointsList" class="btn-group">
-
-                </div>
-            </div>
-
-            <div>
-                <div class="frame-wrap">
-                    <table id="historyTable" class="table table-bordered table-striped text-center m-0 w-100">
-                    </table>
-                </div>
-            </div>
+  <h1 class="p-2 mb-0">歷史資料</h1>
 
+  <div class="row">
+    <div class="col-sm-12 col-xl-2">
+      <div class="rounded border border-white">
+        <div class="d-flex position-relative py-3 px-4">
+          <i class="fal fa-search color-success-700 position-absolute pos-left fs-lg px-3 py-2 mt-1 ml-4"></i>
+          <input type="text" id="js_nested_list_filter" class="form-control shadow-inset-1 pl-6 border-success" placeholder="輸入兩字以上">
         </div>
+        <!-- nav-menu-reset will reset the font colors -->
+        <ul id="js_nested_list" class="nav-menu nav-menu-reset nav-menu-compact mb-sm-4 mb-md-0 rounded border border-white" data-nav-accordion="true">
+        </ul>
+        <div class="filter-message js-filter-message m-0 text-left pl-4 py-3 fw-500"></div>
+      </div>
 
     </div>
+    <div class="col-sm-12 col-xl-10">
+      <div class="row bg-dark p-2">
+        <div>
+          <div class="py-2 col-12" id="his_building">
+            <div class="item btn-group btn-group-toggle"
+                 data-toggle="buttons"></div>
+          </div>
+        </div>
+      </div>
+      <div class="row bg-dark p-2 mb-5 align-items-center">
+        <div class="col-auto">
+          <div class="btn-group">
+            <button type="button" onclick="setDateType('day', this)" class="btn btn-secondary waves-effect waves-themed">日期</button>
+            <button type="button" onclick="setDateType('range', this)" class="btn btn-secondary waves-effect waves-themed">區間</button>
+            <button type="button" onclick="setDateType('month', this)" class="btn btn-secondary waves-effect waves-themed">月</button>
+          </div>
+        </div>
+        <div class="col-auto">
+          <div class="btn-group">
+            <button type="button" onclick="setDateType('today', this)" class="btn btn-secondary waves-effect waves-themed">今天</button>
+            <button type="button" onclick="setDateType('ytd', this)" class="btn btn-secondary waves-effect waves-themed">昨天</button>
+          </div>
+        </div>
+        <div class="col-auto">
+          <div class="form-group">
+            <input class="form-control" id="his_startdate" data-val="" type="date" name="date" value="">
+            <input class="form-control" id="getmonth" type="month" style="display: none" />
+          </div>
+        </div>
+        <div class="col-auto" id="his_enddate" style="display: none">
+          <div class="form-group">
+            <input class="form-control" type="date" data-val="" name="date" value="">
+          </div>
+        </div>
+        <div class="col-auto">
+          <a href="#" onclick="searchDate()" class="btn btn-info">查詢</a>
+          <a href="#" onclick="exportExcel()" class="btn btn-info waves-effect waves-themed">
+            <span class="fal fa-file-excel mr-1"></span>
+            匯出
+          </a>
+        </div>
+      </div>
+
+      <div class="row-cols-1  mb-2">
+        <div id="devPointsList" class="btn-group">
+
+        </div>
+      </div>
+
+      <div>
+        <div class="frame-wrap">
+          <table id="historyTable" class="table table-bordered table-striped text-center m-0 w-100">
+          </table>
+        </div>
+      </div>
+
+    </div>
+
+  </div>
 </main>
 
 <script>
-    var historyTable = null;
-    var buildingTag = null;
-    pageAct.hisBuiName = "";
-    hisFirst = true;
-    $(function () {
-        console.log(1);
-        let html = "";
-        for (let building of pageAct.buildList) {
-            html += `<label class="btn btn-secondary">
+  var historyTable = null;
+  var buildingTag = null;
+  pageAct.hisBuiName = "";
+  hisFirst = true;
+  $(function () {
+    console.log(1);
+    let html = "";
+    for (let building of pageAct.buildList) {
+      html += `<label class="btn btn-secondary">
                             <input type="radio" name="buildingRadio" id="radio-${building.getway}" value="${building.building_tag}" onChange="SelectBuild(this,'${building.building_tag}')"> ${building.full_name}
                         </label>`;
+    }
+    $("#his_building").find(".item").empty();
+    $("#his_building").find(".item").append(html);
+    if ($("#his_building .item label").first())
+      $("#his_building .item label").first().click()
+
+    initList();
+    // default list filter
+    initApp.listFilter($('#js_default_list'), $('#js_default_list_filter'));
+    // custom response message
+    initApp.listFilter($('#js-list-msg'), $('#js-list-msg-filter'));
+    //accordion filter
+    initApp.listFilter($('#js_list_accordion'), $('#js_list_accordion_filter'));
+    // nested list filter
+    initApp.listFilter($('#js_nested_list'), $('#js_nested_list_filter'));
+    //init navigation
+    initApp.buildNavigation($('#js_nested_list'));
+
+    loadTable(null);
+    $(`[onclick="setDateType('day', this)"]`).click();
+    $(`[onclick="setDateType('today', this)"]`).click();
+
+    onEvent('change', '#his_startdate', function () {
+      let today = displayDate(new Date(Date.now()), 'date').replaceAll('/', '-');
+      let ytd = displayDate(new Date(new Date().setDate(new Date(Date.now()).getDate() - 1)), 'date').replaceAll('/', '-');
+
+      if (pageAct.dateType == 'range') {
+        if ($('#his_startdate').val() > $('#his_enddate input').val() && ($('#his_startdate').val() != "" && $('#his_enddate input').val() != "")) {
+          $('#his_startdate').val($('#his_startdate').data('val'));
+          toast_error('不可選擇大於結束時間');
         }
-        $("#his_building").find(".item").empty();
-        $("#his_building").find(".item").append(html);
-        if ($("#his_building .item label").first())
-            $("#his_building .item label").first().click()
+        else {
+          $('#his_startdate').data('val', $('#his_startdate').val());
+          $('#his_enddate input').data('val', $('#his_enddate input').val());
 
-        initList();
-        // default list filter
-        initApp.listFilter($('#js_default_list'), $('#js_default_list_filter'));
-        // custom response message
-        initApp.listFilter($('#js-list-msg'), $('#js-list-msg-filter'));
-        //accordion filter
-        initApp.listFilter($('#js_list_accordion'), $('#js_list_accordion_filter'));
-        // nested list filter
-        initApp.listFilter($('#js_nested_list'), $('#js_nested_list_filter'));
-        //init navigation
-        initApp.buildNavigation($('#js_nested_list'));
+          $(`[onclick="setDateType('today', this)"]`).addClass('btn-secondary');
+          $(`[onclick="setDateType('today', this)"]`).removeClass('btn-info');
+          $(`[onclick="setDateType('ytd', this)"]`).addClass('btn-secondary');
+          $(`[onclick="setDateType('ytd', this)"]`).removeClass('btn-info');
 
-        loadTable(null);
-        $(`[onclick="setDateType('day', this)"]`).click();
-        $(`[onclick="setDateType('today', this)"]`).click();
-
-        onEvent('change', '#his_startdate', function () {
-            let today = displayDate(new Date(Date.now()), 'date').replaceAll('/', '-');
-            let ytd = displayDate(new Date(new Date().setDate(new Date(Date.now()).getDate() - 1)), 'date').replaceAll('/', '-');
-
-            if (pageAct.dateType == 'range') {
-                if ($('#his_startdate').val() > $('#his_enddate input').val() && ($('#his_startdate').val() != "" && $('#his_enddate input').val() != "")) {
-                    $('#his_startdate').val($('#his_startdate').data('val'));
-                    toast_error('不可選擇大於結束時間');
-                }
-                else {
-                    $('#his_startdate').data('val', $('#his_startdate').val());
-                    $('#his_enddate input').data('val', $('#his_enddate input').val());
-
-                    $(`[onclick="setDateType('today', this)"]`).addClass('btn-secondary');
-                    $(`[onclick="setDateType('today', this)"]`).removeClass('btn-info');
-                    $(`[onclick="setDateType('ytd', this)"]`).addClass('btn-secondary');
-                    $(`[onclick="setDateType('ytd', this)"]`).removeClass('btn-info');
-
-                    if ($('#his_startdate').val() == $('#his_enddate input').val()) {
-                        if ($('#his_startdate').val() == today) {
-                            $(`[onclick="setDateType('today', this)"]`).removeClass('btn-secondary');
-                            $(`[onclick="setDateType('today', this)"]`).addClass('btn-info');
-                        }
-                        else if ($('#his_startdate').val() == ytd) {
-                            $(`[onclick="setDateType('ytd', this)"]`).removeClass('btn-secondary');
-                            $(`[onclick="setDateType('ytd', this)"]`).addClass('btn-info');
-                        }
-                    }
-                }
+          if ($('#his_startdate').val() == $('#his_enddate input').val()) {
+            if ($('#his_startdate').val() == today) {
+              $(`[onclick="setDateType('today', this)"]`).removeClass('btn-secondary');
+              $(`[onclick="setDateType('today', this)"]`).addClass('btn-info');
             }
-            else if ($(this).val() == today) {
-                $(`[onclick="setDateType('today', this)"]`).removeClass('btn-secondary');
-                $(`[onclick="setDateType('today', this)"]`).addClass('btn-info');
-                $(`[onclick="setDateType('ytd', this)"]`).addClass('btn-secondary');
-                $(`[onclick="setDateType('ytd', this)"]`).removeClass('btn-info');
+            else if ($('#his_startdate').val() == ytd) {
+              $(`[onclick="setDateType('ytd', this)"]`).removeClass('btn-secondary');
+              $(`[onclick="setDateType('ytd', this)"]`).addClass('btn-info');
             }
-            else if ($(this).val() == ytd) {
-                $(`[onclick="setDateType('today', this)"]`).addClass('btn-secondary');
-                $(`[onclick="setDateType('today', this)"]`).removeClass('btn-info');
-                $(`[onclick="setDateType('ytd', this)"]`).removeClass('btn-secondary');
-                $(`[onclick="setDateType('ytd', this)"]`).addClass('btn-info');
-            }
-        });
-
-        onEvent('change', '#his_enddate input', function () {
-            let today = displayDate(new Date(Date.now()), 'date').replaceAll('/', '-');
-            let ytd = displayDate(new Date(new Date().setDate(new Date(Date.now()).getDate() - 1)), 'date').replaceAll('/', '-');
-
-            if ($('#his_startdate').val() > $('#his_enddate input').val() && ($('#his_startdate').val() != "" && $('#his_enddate input').val() != "")) {
-                $('#his_enddate input').val($('#his_enddate input').data('val'));
-                toast_error('不可選擇大於結束時間');
-            }
-            else {
-                $('#his_startdate').data('val', $('#his_startdate').val());
-                $('#his_enddate input').data('val', $('#his_enddate input').val());
-
-                $(`[onclick="setDateType('today', this)"]`).addClass('btn-secondary');
-                $(`[onclick="setDateType('today', this)"]`).removeClass('btn-info');
-                $(`[onclick="setDateType('ytd', this)"]`).addClass('btn-secondary');
-                $(`[onclick="setDateType('ytd', this)"]`).removeClass('btn-info');
-
-                if ($('#his_startdate').val() == $('#his_enddate input').val()) {
-                    if ($('#his_startdate').val() == today) {
-                        $(`[onclick="setDateType('today', this)"]`).removeClass('btn-secondary');
-                        $(`[onclick="setDateType('today', this)"]`).addClass('btn-info');
-                    }
-                    else if ($('#his_startdate').val() == ytd) {
-                        $(`[onclick="setDateType('ytd', this)"]`).removeClass('btn-secondary');
-                        $(`[onclick="setDateType('ytd', this)"]`).addClass('btn-info');
-                    }
-                }
-            }
-        });
-
+          }
+        }
+      }
+      else if ($(this).val() == today) {
+        $(`[onclick="setDateType('today', this)"]`).removeClass('btn-secondary');
+        $(`[onclick="setDateType('today', this)"]`).addClass('btn-info');
+        $(`[onclick="setDateType('ytd', this)"]`).addClass('btn-secondary');
+        $(`[onclick="setDateType('ytd', this)"]`).removeClass('btn-info');
+      }
+      else if ($(this).val() == ytd) {
+        $(`[onclick="setDateType('today', this)"]`).addClass('btn-secondary');
+        $(`[onclick="setDateType('today', this)"]`).removeClass('btn-info');
+        $(`[onclick="setDateType('ytd', this)"]`).removeClass('btn-secondary');
+        $(`[onclick="setDateType('ytd', this)"]`).addClass('btn-info');
+      }
     });
 
-    function initList() {
-        let sendData = {
-            building_tag: buildingTag
-        }
-        objSendData.Data = sendData;
-        let url = baseApiUrl + "/api/History/GetMainSub";
-        function success(res) {
-            let strHtml = ``;
-            let i1 = null, i2 = null, first = true;
+    onEvent('change', '#his_enddate input', function () {
+      let today = displayDate(new Date(Date.now()), 'date').replaceAll('/', '-');
+      let ytd = displayDate(new Date(new Date().setDate(new Date(Date.now()).getDate() - 1)), 'date').replaceAll('/', '-');
 
-            $.each(res.data.history_Main_Systems, function (index, val) {
-                if (pageAct.mainStatus) {
-                    strHtml += `<li>
+      if ($('#his_startdate').val() > $('#his_enddate input').val() && ($('#his_startdate').val() != "" && $('#his_enddate input').val() != "")) {
+        $('#his_enddate input').val($('#his_enddate input').data('val'));
+        toast_error('不可選擇大於結束時間');
+      }
+      else {
+        $('#his_startdate').data('val', $('#his_startdate').val());
+        $('#his_enddate input').data('val', $('#his_enddate input').val());
+
+        $(`[onclick="setDateType('today', this)"]`).addClass('btn-secondary');
+        $(`[onclick="setDateType('today', this)"]`).removeClass('btn-info');
+        $(`[onclick="setDateType('ytd', this)"]`).addClass('btn-secondary');
+        $(`[onclick="setDateType('ytd', this)"]`).removeClass('btn-info');
+
+        if ($('#his_startdate').val() == $('#his_enddate input').val()) {
+          if ($('#his_startdate').val() == today) {
+            $(`[onclick="setDateType('today', this)"]`).removeClass('btn-secondary');
+            $(`[onclick="setDateType('today', this)"]`).addClass('btn-info');
+          }
+          else if ($('#his_startdate').val() == ytd) {
+            $(`[onclick="setDateType('ytd', this)"]`).removeClass('btn-secondary');
+            $(`[onclick="setDateType('ytd', this)"]`).addClass('btn-info');
+          }
+        }
+      }
+    });
+
+  });
+
+  function initList() {
+    let sendData = {
+      building_tag: buildingTag
+    }
+    objSendData.Data = sendData;
+    let url = baseApiUrl + "/api/History/GetMainSub";
+    function success(res) {
+      let strHtml = ``;
+      let i1 = null, i2 = null, first = true;
+
+      $.each(res.data.history_Main_Systems, function (index, val) {
+        if (pageAct.mainStatus) {
+          strHtml += `<li>
                                     <a href="#" data-filter-tags="${val.full_name.toLowerCase()}" data-maintag="${val.main_system_tag}">
                                         <span class="nav-link-text">${val.full_name}</span>
                                         </a>
                                         <ul style="${index == 0 ? `display:block;` : ``}">`;
 
-                    i1 = (val.history_Sub_systems != null && i1 == null) ? index : null;
-                }
+          i1 = (val.history_Sub_systems != null && i1 == null) ? index : null;
+        }
 
-                $.each(val.history_Sub_systems, function (index2, val2) {
-                    i2 = (val2.device != null && i2 == null) ? index2 : null;
+        $.each(val.history_Sub_systems, function (index2, val2) {
+          i2 = (val2.device != null && i2 == null) ? index2 : null;
 
-                    strHtml += `<li>
+          strHtml += `<li>
                                     <a href="#" data-filter-tags="${val2.full_name.toLowerCase()}"  data-subtag="${val2.sub_system_tag}">
                                         <span class="nav-link-text">
                                             ${val2.full_name}
@@ -218,11 +218,11 @@
                                     </a>
                                     <ul style="${(i1 != null ? index == i1 : first) && index2 == i2 ? `display:block;` : ``}">`;
 
-                    $.each(val2.device, function (index3, val3) {
-                        if (val3.device_number.includes("$3"))
-                            val3.device_number = val3.device_number.replace("$3", "");
+          $.each(val2.device, function (index3, val3) {
+            if (val3.device_number.includes("$3"))
+              val3.device_number = val3.device_number.replace("$3", "");
 
-                        strHtml += `<li data-tabname="hisListItem">
+            strHtml += `<li data-tabname="hisListItem">
                                         <a href="#" onClick="setValue('${val3.device_number}', '${val3.full_name}', null)" data-filter-tags="${val3.full_name.toLowerCase()} ${val3.device_serial_tag.toLowerCase()}" data-devnum="${val3.device_number}">
                                             <span class="nav-link-text">
                                                 ${val3.full_name}
@@ -230,324 +230,324 @@
                                         </a>
                                     </li>`;
 
-                        if (pageAct.mainStatus) {
-                            if (index == i1 && index2 == i2 && first) {
-                                first = false;
-                                pageAct.deviceNumber = val3.device_number;
-                                pageAct.deviceName = val3.full_name;
-                                devPointsList();
-                            }
-                        }
-                        else {
-                            if (index2 == i2 && first) {
-                                first = false;
-                                pageAct.deviceNumber = val3.device_number;
-                                pageAct.deviceName = val3.full_name;
-                                devPointsList();
-                            }
-                        }
-                    });
-                    strHtml += `</ul> </li>`;
-                });
+            if (pageAct.mainStatus) {
+              if (index == i1 && index2 == i2 && first) {
+                first = false;
+                pageAct.deviceNumber = val3.device_number;
+                pageAct.deviceName = val3.full_name;
+                devPointsList();
+              }
+            }
+            else {
+              if (index2 == i2 && first) {
+                first = false;
+                pageAct.deviceNumber = val3.device_number;
+                pageAct.deviceName = val3.full_name;
+                devPointsList();
+              }
+            }
+          });
+          strHtml += `</ul> </li>`;
+        });
 
-                if (pageAct.mainStatus) {
-                    strHtml += `</ul> </li>`;
-                }
-            });
+        if (pageAct.mainStatus) {
+          strHtml += `</ul> </li>`;
+        }
+      });
 
-            $('#js_nested_list').html(strHtml);
-            $(`[data-tabname="hisListItem"]`).YTTab();
+      $('#js_nested_list').html(strHtml);
+      $(`[data-tabname="hisListItem"]`).YTTab();
+    }
+    $(loadEle).Loading("close");
+    ytAjax = new YourTeam.Ajax(url, objSendData, success, null, "POST").send();
+  }
+
+  function devPointsList() {
+    let sendData = {
+      device_number: pageAct.deviceNumber
+    }
+    objSendData.Data = sendData;
+    let url = baseApiUrl + "/api/History/GetDevPoi";
+    function success(res) {
+      let strHtml = ``;
+
+      $.each(res.data, function (index, val) {
+        if (index == 0) {
+          strHtml += `<button onClick="setValue(null, null, '${val.points}', this)" type="button" class="btn btn-info waves-effect waves-themed">${val.full_name || val.points}</button>`;
+          pageAct.deviceItem = val.points;
+          pageAct.devicePoiName = val.full_name + ' ' + val.points;
+        } else {
+          strHtml += `<button onClick="setValue(null, null, '${val.points}', this)" type="button" class="btn btn-secondary waves-effect waves-themed">${val.full_name || val.points}</button>`;
+        }
+      });
+
+      $('#devPointsList').html(strHtml);
+
+      if (!hisFirst) {
+        searchDate();
+      }
+    }
+    ytAjax = new YourTeam.Ajax(url, objSendData, success, null, "POST").send();
+  }
+
+  function getData(start = null, end = null) {
+    $(loadEle).Loading("start");
+    var sdt = new Date();
+    var edt = new Date(new Date().setDate(sdt.getDate() + 1));
+    start = start + " 00:00:00" ?? sdt.toLocaleDateString();
+    end = end + " 23:59:59" ?? edt.toLocaleDateString();
+
+    let sendData = {
+      device_number: pageAct.deviceNumber,
+      device_point: pageAct.deviceItem
+    }
+    objSendData.Data = sendData;
+    let url = baseApiUrl + "/api/DevGetWay";
+    ytAjax = new YourTeam.Ajax(url, objSendData, function (res) {
+      if (res && res.code == "0000") {
+        pageAct.hisBuiName = res.data;
+        getHistoryDataByBaja(pageAct.deviceNumber + "_" + pageAct.deviceItem,
+          new Date(start).getTime(),
+          new Date(end).getTime(),
+          pageAct.deviceName,
+          pageAct.hisBuiName,
+          callBackFromHistory);
+      }
+      else {
+        $(loadEle).Loading("close");
+      }
+    }, function (res) { $(loadEle).Loading("close"); }, "POST", true).send();
+  }
+
+  function callBackFromHistory(res = '{"count":0,"data":[]}') {
+    res = JSON.parse(res);
+    loadTable(res.data);
+    if (historyTable != null) {
+      let t = $('#historyTable').dataTable();
+      t.fnClearTable();
+      if (res.data.length > 0)
+        t.fnAddData(res.data);
+    }
+
+  }
+
+  function setValue(deviceNumber, deviceName, deviceItem, elem) {
+    hisFirst = false;
+    btnSelCss(elem);
+
+    if ((deviceNumber != null && deviceNumber != undefined) && (deviceName != null && deviceName != undefined)) {
+      pageAct.deviceNumber = deviceNumber;
+      pageAct.deviceName = deviceName;
+      devPointsList();
+    }
+    else if (deviceItem != null && deviceItem != undefined) {
+      pageAct.devicePoiName = $(elem).text();
+      pageAct.deviceItem = deviceItem;
+
+      searchDate();
+    }
+  }
+
+  function setDateType(type, elem) {
+    btnSelCss(elem);
+
+    pageAct.dateType = type;
+    let now = formatDate(new Date(Date.now()), "date");
+    let ytd = formatDate(new Date(new Date().setDate(new Date().getDate() - 1)), "date");
+    let tmr = formatDate(new Date(new Date().setDate(new Date().getDate() + 1)), "date");
+
+    if (type == "day" || type == "today" || type == "ytd") {
+      let date = type == "ytd" ? ytd : now;
+      $('#his_startdate').css('display', 'block');
+      $('#his_enddate').css('display', 'none');
+      $('#getmonth').css('display', 'none');
+      $('#his_startdate').val(date);
+
+      if (type == "today")
+        getData(formatDate(now, "date", true), formatDate(now, "date", true));
+      else if (type == "ytd")
+        getData(formatDate(ytd, "date", true), formatDate(ytd, "date", true));
+      else {
+        $(`[onclick="setDateType('today', this)"]`).removeClass('btn-secondary');
+        $(`[onclick="setDateType('today', this)"]`).addClass('btn-info');
+      }
+    }
+    else if (type == "range") {
+      $(`[onclick="setDateType('today', this)"], [onclick="setDateType('ytd', this)"]`).removeClass('btn-info');
+      $(`[onclick="setDateType('today', this)"], [onclick="setDateType('ytd', this)"]`).addClass('btn-secondary');
+
+      $('#his_startdate').css('display', 'block');
+      $('#his_enddate').css('display', 'block');
+      $('#getmonth').css('display', 'none');
+      $('#his_startdate').val(now);
+      $('#his_startdate').data('val', now);
+      $('#his_enddate input').val(tmr);
+      $('#his_enddate input').data('val', tmr);
+    }
+    else if (type == "month") {
+      $(`[onclick="setDateType('today', this)"], [onclick="setDateType('ytd', this)"]`).removeClass('btn-info');
+      $(`[onclick="setDateType('today', this)"], [onclick="setDateType('ytd', this)"]`).addClass('btn-secondary');
+
+      $('#his_startdate').css('display', 'none');
+      $('#his_enddate').css('display', 'none');
+      $('#getmonth').css('display', 'block');
+      $('#getmonth').val(now.substr(0, 7));
+    }
+    else if (type == "ytd") {
+      $('#his_startdate').css('display', 'block');
+      $('#his_enddate').css('display', 'none');
+      $('#getmonth').css('display', 'none');
+      $('#his_startdate').val(ytd);
+    }
+  }
+
+  function searchDate() {
+    let start = new Date($('#his_startdate').val());
+    let end = new Date($('#his_enddate input').val());
+
+    if (pageAct.dateType == "today" || pageAct.dateType == "day" || pageAct.dateType == "ytd")
+      end = start;
+    else if (pageAct.dateType == "month") {
+      start = new Date($('#getmonth').val());
+      end = new Date(start.valueOf()).setMonth(start.getMonth() + 1);
+      end = new Date(new Date(end).setDate(new Date(end).getDate() - 1));
+    }
+    else if (pageAct.dateType != "range")
+      return;
+
+    pageAct.hisStartDate = start;
+    pageAct.hisEndDate = end;
+    getData(formatDate(start, "date", true), formatDate(end, "date", true));
+  }
+
+  function formatDate(date, type, send = false) {
+    if (!send)
+      return displayDate(date, type).replaceAll("/", "-");
+    else {
+      date = displayDate(date, type);
+      let month = date.split('/')[1];
+      let year = date.split('/')[0];
+      let day = date.split('/')[2];
+      return month + "/" + day + "/" + year;
+    }
+  }
+
+  function loadTable(data) {
+    if (data) {
+
+      $.each(data, function (i, v) {
+        v.type = pageAct.devicePoiName.split(" ")[0];
+      });
+
+      let tag = "#historyTable";
+
+      let column_defs = [
+        { "targets": [0], "width": "20%", "sortable": true },
+        { "targets": [1], "width": "20%", "sortable": true },
+        { "targets": [2], "width": "20%", "sortable": true }
+      ];
+
+      let columns = [
+        {
+          "title": "類別",
+          "data": "type"
+        },
+        {
+          "title": "設備名稱",
+          "data": "deviceName",
+        },
+        {
+          "title": "數值",
+          "data": "value",
+          "render": function (data) {
+            if (isNaN(data.toString())) {
+              return data
+            }
+            return data.roundDecimal(2);
+          }
+        },
+        {
+          "title": "紀錄時間",
+          "data": "timestamp",
+          "render": function (data) {
+            return displayDate(data, "datetime");
+          }
+        }
+      ];
+
+      historyTable = new YourTeam.JqDataTables.getTableByStatic(tag, data, columns, column_defs, null, null, null, null, "tpi");
+      $(tag).DataTable().order([3, 'desc']);
+    }
+  }
+
+  function exportExcel() {
+    $(loadEle).Loading("start");
+    let token = cookies.get("JWT-Authorization");
+    let url = baseApiUrl + "/api/ExportHistory";
+    let v = {};
+
+    v.starttime = pageAct.hisStartDate;
+    v.endtime = pageAct.hisEndDate;
+    v.dateType = pageAct.dateType;
+    v.device_number = pageAct.deviceNumber;
+    objSendData.Data = v;
+
+    $.ajax({
+      type: "POST",
+      url: url,
+      data: JSON.stringify(objSendData.Data),
+      aysnc: true,
+      headers: {
+        Authorization: "Bearer " + token,
+      },
+      contentType: "application/json; charset=utf-8",
+      xhrFields: {
+        responseType: "blob", // to avoid binary data being mangled on charset conversion
+      },
+      success: function (rel, text, xhr) {
+        if (rel) {
+          downloadByBlob(xhr, rel);
         }
         $(loadEle).Loading("close");
-        ytAjax = new YourTeam.Ajax(url, objSendData, success, null, "POST").send();
-    }
-
-    function devPointsList() {
-        let sendData = {
-            device_number: pageAct.deviceNumber
-        }
-        objSendData.Data = sendData;
-        let url = baseApiUrl + "/api/History/GetDevPoi";
-        function success(res) {
-            let strHtml = ``;
-
-            $.each(res.data, function (index, val) {
-                if (index == 0) {
-                    strHtml += `<button onClick="setValue(null, null, '${val.points}', this)" type="button" class="btn btn-info waves-effect waves-themed">${val.full_name || val.points}</button>`;
-                    pageAct.deviceItem = val.points;
-                    pageAct.devicePoiName = val.full_name + ' ' + val.points;
-                } else {
-                    strHtml += `<button onClick="setValue(null, null, '${val.points}', this)" type="button" class="btn btn-secondary waves-effect waves-themed">${val.full_name || val.points}</button>`;
-                }
-            });
-
-            $('#devPointsList').html(strHtml);
-
-            if (!hisFirst) {
-                searchDate();
-            }
-        }
-        ytAjax = new YourTeam.Ajax(url, objSendData, success, null, "POST").send();
-    }
-
-    function getData(start = null, end = null) {
-        $(loadEle).Loading("start");
-        var sdt = new Date();
-        var edt = new Date(new Date().setDate(sdt.getDate() + 1));
-		start = start + " 00:00:00" ?? sdt.toLocaleDateString();
-		end = end + " 23:59:59" ?? edt.toLocaleDateString();
-
-        let sendData = {
-            device_number: pageAct.deviceNumber,
-            device_point: pageAct.deviceItem
-        }
-        objSendData.Data = sendData;
-        let url = baseApiUrl + "/api/DevGetWay";
-        ytAjax = new YourTeam.Ajax(url, objSendData, function (res) {
-            if (res && res.code == "0000") {
-                pageAct.hisBuiName = res.data;
-                getHistoryDataByBaja(pageAct.deviceNumber + "_" + pageAct.deviceItem,
-                    new Date(start).getTime(),
-                    new Date(end).getTime(),
-                    pageAct.deviceName,
-                    pageAct.hisBuiName,
-                    callBackFromHistory);
-            }
-            else {
-                $(loadEle).Loading("close");
-            }
-        }, function (res) { $(loadEle).Loading("close"); }, "POST", true).send();
-    }
-
-    function callBackFromHistory(res = '{"count":0,"data":[]}') {
-        res = JSON.parse(res);
-        loadTable(res.data);
-        if (historyTable != null) {
-            let t = $('#historyTable').dataTable();
-            t.fnClearTable();
-            if (res.data.length > 0)
-                t.fnAddData(res.data);
-        }
-
-    }
-
-    function setValue(deviceNumber, deviceName, deviceItem, elem) {
-        hisFirst = false;
-        btnSelCss(elem);
-
-        if ((deviceNumber != null && deviceNumber != undefined) && (deviceName != null && deviceName != undefined)) {
-            pageAct.deviceNumber = deviceNumber;
-            pageAct.deviceName = deviceName;
-            devPointsList();
-        }
-        else if (deviceItem != null && deviceItem != undefined) {
-            pageAct.devicePoiName = $(elem).text();
-            pageAct.deviceItem = deviceItem;
-
-            searchDate();
-        }
-    }
-
-    function setDateType(type, elem) {
-        btnSelCss(elem);
-
-        pageAct.dateType = type;
-        let now = formatDate(new Date(Date.now()), "date");
-        let ytd = formatDate(new Date(new Date().setDate(new Date().getDate() - 1)), "date");
-        let tmr = formatDate(new Date(new Date().setDate(new Date().getDate() + 1)), "date");
-
-        if (type == "day" || type == "today" || type == "ytd") {
-            let date = type == "ytd" ? ytd : now;
-            $('#his_startdate').css('display', 'block');
-            $('#his_enddate').css('display', 'none');
-            $('#getmonth').css('display', 'none');
-            $('#his_startdate').val(date);
-
-			if (type == "today")
-				getData(formatDate(now, "date", true), formatDate(now, "date", true));
-			else if (type == "ytd")
-				getData(formatDate(ytd, "date", true), formatDate(ytd, "date", true));
-            else {
-                $(`[onclick="setDateType('today', this)"]`).removeClass('btn-secondary');
-                $(`[onclick="setDateType('today', this)"]`).addClass('btn-info');
-            }
-        }
-        else if (type == "range") {
-            $(`[onclick="setDateType('today', this)"], [onclick="setDateType('ytd', this)"]`).removeClass('btn-info');
-            $(`[onclick="setDateType('today', this)"], [onclick="setDateType('ytd', this)"]`).addClass('btn-secondary');
-
-            $('#his_startdate').css('display', 'block');
-            $('#his_enddate').css('display', 'block');
-            $('#getmonth').css('display', 'none');
-            $('#his_startdate').val(now);
-            $('#his_startdate').data('val', now);
-            $('#his_enddate input').val(tmr);
-            $('#his_enddate input').data('val', tmr);
-        }
-        else if (type == "month") {
-            $(`[onclick="setDateType('today', this)"], [onclick="setDateType('ytd', this)"]`).removeClass('btn-info');
-            $(`[onclick="setDateType('today', this)"], [onclick="setDateType('ytd', this)"]`).addClass('btn-secondary');
-
-            $('#his_startdate').css('display', 'none');
-            $('#his_enddate').css('display', 'none');
-            $('#getmonth').css('display', 'block');
-            $('#getmonth').val(now.substr(0, 7));
-        }
-        else if (type == "ytd") {
-            $('#his_startdate').css('display', 'block');
-            $('#his_enddate').css('display', 'none');
-            $('#getmonth').css('display', 'none');
-            $('#his_startdate').val(ytd);
-        }
-    }
-
-    function searchDate() {
-		let start = new Date($('#his_startdate').val());
-		let end = new Date($('#his_enddate input').val());
-
-        if (pageAct.dateType == "today" || pageAct.dateType == "day" || pageAct.dateType == "ytd")
-			end = start;
-        else if (pageAct.dateType == "month") {
-			start = new Date($('#getmonth').val());
-			end = new Date(start.valueOf()).setMonth(start.getMonth() + 1);
-			end = new Date(new Date(end).setDate(new Date(end).getDate() - 1));
-        }
-        else if (pageAct.dateType != "range")
-            return;
-
-        pageAct.hisStartDate = start;
-        pageAct.hisEndDate = end;
-        getData(formatDate(start, "date", true), formatDate(end, "date", true));
-    }
-
-    function formatDate(date, type, send = false) {
-        if (!send)
-            return displayDate(date, type).replaceAll("/", "-");
-        else {
-            date = displayDate(date, type);
-            let month = date.split('/')[1];
-            let year = date.split('/')[0];
-            let day = date.split('/')[2];
-            return month + "/" + day + "/" + year;
-        }
-    }
-
-    function loadTable(data) {
-        if (data) {
-
-            $.each(data, function (i, v) {
-                v.type = pageAct.devicePoiName.split(" ")[0];
-            });
-
-            let tag = "#historyTable";
-
-            let column_defs = [
-                { "targets": [0], "width": "20%", "sortable": true },
-                { "targets": [1], "width": "20%", "sortable": true },
-                { "targets": [2], "width": "20%", "sortable": true }
-            ];
-
-            let columns = [
-                {
-                    "title": "類別",
-                    "data": "type"
-                },
-                {
-                    "title": "設備名稱",
-                    "data": "deviceName",
-                },
-                {
-                    "title": "數值",
-                    "data": "value",
-                    "render": function (data) {
-                        if (isNaN(data.toString())) {
-                            return data
-                        }
-                        return data.roundDecimal(2);
-                    }
-                },
-                {
-                    "title": "紀錄時間",
-                    "data": "timestamp",
-                    "render": function (data) {
-                        return displayDate(data, "datetime");
-                    }
-                }
-            ];
-
-            historyTable = new YourTeam.JqDataTables.getTableByStatic(tag, data, columns, column_defs, null, null, null, null, "tpi");
-            $(tag).DataTable().order([3, 'desc']);
-        }
-    }
-
-    function exportExcel() {
-        $(loadEle).Loading("start");
-        let token = cookies.get("JWT-Authorization");
-        let url = baseApiUrl + "/api/ExportHistory";
-        let v = {};
-		
-		v.starttime = pageAct.hisStartDate;
-		v.endtime = pageAct.hisEndDate;
-        v.dateType = pageAct.dateType;
-        v.device_number = pageAct.deviceNumber;
-        objSendData.Data = v;
-
-        $.ajax({
-            type: "POST",
-            url: url,
-            data: JSON.stringify(objSendData.Data),
-            aysnc: true,
-            headers: {
-                Authorization: "Bearer " + token,
-            },
-            contentType: "application/json; charset=utf-8",
-            xhrFields: {
-                responseType: "blob", // to avoid binary data being mangled on charset conversion
-            },
-            success: function (rel, text, xhr) {
-                if (rel) {
-                    downloadByBlob(xhr, rel);
-                }
-                $(loadEle).Loading("close");
-            },
-            error: function () {
-                $(loadEle).Loading("close");
-            },
-            complete: (xhr) => {
-                setLoading(false);
-            },
-        });
-        // ytAjax = new YourTeam.Ajax(url, objSendData, function (rel) {
-        //     $(loadEle).Loading("close");
-        // }, function (rel) {
-        //     if (rel) {
-        //        downloadByBlob(xhr, rel);
-        //     }
-
-        //     $(loadEle).Loading("close");
-        // }, "POST",true).send();
-    }
-
-    //選擇棟別
-    function SelectBuild(e, building_tag) {
-        $(loadEle).Loading("start");
-        checkIsSelectedBuilding();
-    }
-
-    function checkIsSelectedBuilding() {
-        let result = false;
-        let buildingRadios = $("[name=buildingRadio]:checked");
-        buildingTag = null;
-        if (buildingRadios && buildingRadios.length > 0) {
-            $("[name=buildingRadio]").parent().removeClass("btn-info");
-            $("[name=buildingRadio]").parent().addClass("btn-secondary");
-            $("[name=buildingRadio]:checked").parent().removeClass("btn-secondary");
-            $("[name=buildingRadio]:checked").parent().addClass("btn-info");
-            buildingTag = buildingRadios.val(); //building tag
-            pageAct.hisBuiName = buildingRadios.prop('id').split("-")[1];
-            initList();
-            result = true;
-        }
-        return result;
+      },
+      error: function () {
+        $(loadEle).Loading("close");
+      },
+      complete: (xhr) => {
+        setLoading(false);
+      },
+    });
+    // ytAjax = new YourTeam.Ajax(url, objSendData, function (rel) {
+    //     $(loadEle).Loading("close");
+    // }, function (rel) {
+    //     if (rel) {
+    //        downloadByBlob(xhr, rel);
+    //     }
+
+    //     $(loadEle).Loading("close");
+    // }, "POST",true).send();
+  }
+
+  //選擇棟別
+  function SelectBuild(e, building_tag) {
+    $(loadEle).Loading("start");
+    checkIsSelectedBuilding();
+  }
+
+  function checkIsSelectedBuilding() {
+    let result = false;
+    let buildingRadios = $("[name=buildingRadio]:checked");
+    buildingTag = null;
+    if (buildingRadios && buildingRadios.length > 0) {
+      $("[name=buildingRadio]").parent().removeClass("btn-info");
+      $("[name=buildingRadio]").parent().addClass("btn-secondary");
+      $("[name=buildingRadio]:checked").parent().removeClass("btn-secondary");
+      $("[name=buildingRadio]:checked").parent().addClass("btn-info");
+      buildingTag = buildingRadios.val(); //building tag
+      pageAct.hisBuiName = buildingRadios.prop('id').split("-")[1];
+      initList();
+      result = true;
     }
+    return result;
+  }
 </script>
\ No newline at end of file
diff --git a/Frontend/_schoolView.html b/Frontend/_schoolView.html
index 1e7701c..47ffa71 100644
--- a/Frontend/_schoolView.html
+++ b/Frontend/_schoolView.html
@@ -1,9 +1,11 @@
-
+<style></style>
 <div class="container-fluid">
-    <div class="row bg-dark align-items-center">
-        <label id="sysSubText" class=" mx-5 mb-0 fs-1-05"></label>
-        <div style="height:85vh" class="col-12">
-            <iframe src="/ord?file:^px/Home.px|view:?fullScreen=true" width="100%" height="100%"></iframe>
-       </div>
+  <div class="row bg-dark align-items-center">
+    <label id="sysSubText" class="mx-5 mb-0 fs-1-05"></label>
+    <div style="height: 90vh" class="col-12">
+      <iframe src="/ord?file:^px/Home.px|view:?fullScreen=true"
+              width="100%"
+              height="100%"></iframe>
     </div>
-</div>
\ No newline at end of file
+  </div>
+</div>
diff --git a/Frontend/_systemMonitor.html b/Frontend/_systemMonitor.html
index f8edb18..c874b58 100644
--- a/Frontend/_systemMonitor.html
+++ b/Frontend/_systemMonitor.html
@@ -1,65 +1,79 @@
-
-<div class="container-fluid">
-    <div class="row bg-dark align-items-center">
-        <label id="sysSubText" class=" mx-5 mb-0 fs-1-05"></label>
-        <div class="btn-group my-1" id="floList">
-            
+<div class="container-fluid px-0">
+  <div class="row no-gutters" style="min-height: 90vh;">
+    <div class="col-1">
+      <aside id="sysMonNavbar" class="w-100 yt-navbar yt-left-navbar h-100 mt-0">
+        <div class="yt-navbar-content">
+          <ul id="sysMonBtnList"></ul>
         </div>
-
+      </aside>
     </div>
+    <div class="col-11">
+      <div class="container-fluid">
+        <div class="row bg-dark align-items-center">
+          <label id="sysSubText" class="mx-5 mb-0 fs-1-05"></label>
+          <div class="btn-group my-1" id="floList"></div>
+        </div>
+      </div>
+      <main id="js-page-content" role="main" class="page-content"></main>
+    </div>
+  </div>
 </div>
-<main id="js-page-content" role="main" class="page-content">
-   
-</main>
 
 <script>
-    var floList = [];
-   
-    $(function () {
-        $("#sysSubText").text(pageAct.buiName +"/"+pageAct.sysSubName);
-        getFloList();
-    })
+  var floList = [];
 
-    onEvent("yt:tab:change", "[name=floBtn]", function () {
-        $.each(tolSubList, (idx, sub) => {
-            sub.unsubscribeAll();
-            sub.detach();
-        })
-        tolSubList=[];
-        pageAct.floTag = $(this).data("id");
-        pageAct.floGuid = $(this).data("guid");
-        if ($(this).data("id") == "all") {
-            pageAct.floTag = null;
-            pageAct.floGuid = null;
-            $("#js-page-content").load("_sysMonAll.html", loadCallback);
-        } else {
-            $("#js-page-content").load("_sysMonFloor.html", loadCallback);
-        }
-    })
+  $(function () {
+    $("#sysSubText").text(pageAct.buiName + "/" + pageAct.sysSubName);
+    getSysMonBtnList();
+    getFloList();
+  });
 
-    onEvent("change", "#buiList", function (e, actEle) {
-        getFloList();
-    })
-
-
-    function getFloList() {
-        let url = baseApiUrl + "/api/Device/GetFloor";
-        let sendData = { building_tag: pageAct.buiTag, sub_system_tag: pageAct.sysSubTag };
-        objSendData.Data = sendData;
-        ytAjax = new YourTeam.Ajax(url, objSendData, function (res) {
-            if (!res || res.code != "0000" || !res.data) {
-
-            } else {
-                let strHtml = `<button name="floBtn" data-id="all" type="button" class="btn btn-secondary waves-effect waves-themed btn-sm-2" data-tabname="floor" data-target="all">總覽</button>`;
-                $.each(res.data, (index, floObj) => {
-                    strHtml += `<button name="floBtn" data-id="${floObj.floor_tag}" data-guid="${floObj.floor_guid}" class="btn btn-secondary waves-effect waves-themed btn-sm-2" data-tabname="floor" data-target="${floObj.floor_tag}">${floObj.floor_tag}</button>`;
-                })
-                $("#floList").html(strHtml);
-                floList = res.data;
-                
-                var ytTab = new YT.Tab({ tabName: "floor" })
-            }
-        }, null, "POST").send();
+  onEvent("yt:tab:change", "[name=floBtn]", function () {
+    $.each(tolSubList, (idx, sub) => {
+      sub.unsubscribeAll();
+      sub.detach();
+    });
+    tolSubList = [];
+    pageAct.floTag = $(this).data("id");
+    pageAct.floGuid = $(this).data("guid");
+    if ($(this).data("id") == "all") {
+      pageAct.floTag = null;
+      pageAct.floGuid = null;
+      $("#js-page-content").load("_sysMonAll.html", loadCallback);
+    } else {
+      $("#js-page-content").load("_sysMonFloor.html", loadCallback);
     }
-    
-</script>
\ No newline at end of file
+  });
+
+  onEvent("change", "#buiList", function (e, actEle) {
+    getFloList();
+  });
+
+  function getFloList() {
+    let url = baseApiUrl + "/api/Device/GetFloor";
+    let sendData = {
+      building_tag: pageAct.buiTag,
+      sub_system_tag: pageAct.sysSubTag,
+    };
+    objSendData.Data = sendData;
+    ytAjax = new YourTeam.Ajax(
+      url,
+      objSendData,
+      function (res) {
+        if (!res || res.code != "0000" || !res.data) {
+        } else {
+          let strHtml = `<button name="floBtn" data-id="all" type="button" class="btn btn-secondary waves-effect waves-themed btn-sm-2" data-tabname="floor" data-target="all">總覽</button>`;
+          $.each(res.data, (index, floObj) => {
+            strHtml += `<button name="floBtn" data-id="${floObj.floor_tag}" data-guid="${floObj.floor_guid}" class="btn btn-secondary waves-effect waves-themed btn-sm-2" data-tabname="floor" data-target="${floObj.floor_tag}">${floObj.floor_tag}</button>`;
+          });
+          $("#floList").html(strHtml);
+          floList = res.data;
+
+          var ytTab = new YT.Tab({ tabName: "floor" });
+        }
+      },
+      null,
+      "POST"
+    ).send();
+  }
+</script>
diff --git a/Frontend/index.html b/Frontend/index.html
index 8426c23..3fa9e8b 100644
--- a/Frontend/index.html
+++ b/Frontend/index.html
@@ -8,112 +8,78 @@ Purchase: https://wrapbootstrap.com/theme/smartadmin-responsive-webapp-WB0573SK0
 License: You must have a valid license purchased only from wrapbootstrap.com (link above) in order to legally use this theme for your project.
 -->
 <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" />
+<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" />
 
-    <!--<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-navbar/yt-navbar.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-navbar/yt-navbar.css" />
+  <link rel="stylesheet"
+        href="css/yourteam/plugins/yt-alert/ytpop-alert.css" />
+  <link rel="stylesheet"
+        href="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/style.min.css"
+        type="text/css" />
 
-    <link
-      rel="stylesheet"
-      href="lib\bootstrap-datepicker\bootstrap-datepicker.min.css"
-      type="text/css"
-    />
-  </head>
-  <!-- BEGIN Body -->
-  <!-- Possible Classes
+  <link rel="stylesheet"
+        href="lib\bootstrap-datepicker\bootstrap-datepicker.min.css"
+        type="text/css" />
+</head>
+<!-- BEGIN Body -->
+<!-- Possible Classes
 
     * 'header-function-fixed'         - header is in a fixed at all times
     * 'nav-function-fixed'            - left panel is fixed
@@ -138,814 +104,693 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
     >>> more settings are described inside documentation page >>>
 -->
 
-  <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";
+<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 || "";
+    var classHolder = document.getElementsByTagName("BODY")[0],
       /**
-       * Load theme options
+       * Load from localstorage
        **/
-      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"
-        );
+      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");
       }
-      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"
-                  style="height: 36px"
-                />
+      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"
+                   style="height: 36px" />
 
-                <!--<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>
+              <!--<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
-                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>
+              <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 class="ml-2 text-center">
-              <!-- <label class="mb-0 fs-1-2">
+          </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>
+            <!-- <label class="mb-0 fs-1-1">智慧大樓管理平台</label> -->
           </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>
+        </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>
-    <!-- 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="
+  </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
-                >
+                  "></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>
-            <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"
-                />
+          <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>
-              <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="
+              <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>
+                            "></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 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="
+                      </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>
+                            "></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 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="
+                      </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>
+                            "></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 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="
+                      </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>
+                            "></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 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="
+                      </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>
+                            "></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 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="
+                      </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>
+                            "></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 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="
+                      </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>
+                            "></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 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="
+                      </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>
+                            "></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 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="
+                      </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>
+                            "></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 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>
+                    </a>
+                  </li>
+                </ul>
+                <div class="filter-message js-filter-message"></div>
               </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>
+              <a class="fs-xl d-flex align-items-center p-3">
+                <i class="fal fa-cogs"></i>
+              </a>
             </div>
-            <!-- END msgr -->
           </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="
+  <div id="noticeBlock"
+       style="
         position: fixed;
         top: 70px;
         right: 0px;
@@ -953,1373 +798,1338 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
         transition: 0.2s;
         z-index: 50000;
         height: 100%;
-      "
-    ></div>
+      "></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="lib/momentjs/moment.min.js"></script>
-    <script src="lib/momentjs/moment-with-locales.min.js"></script>
-    <script src="lib/bootstrap-datepicker/bootstrap-datepicker.min.js"></script>
-    <script src="lib/bootstrap-datepicker/bootstrap-datepicker.zh-TW.min.js"></script>
-    <script type="text/javascript">
-      window._datepickerDP = $.fn.datepicker;
-    </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>
+  <!--<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="lib/momentjs/moment.min.js"></script>
+  <script src="lib/momentjs/moment-with-locales.min.js"></script>
+  <script src="lib/bootstrap-datepicker/bootstrap-datepicker.min.js"></script>
+  <script src="lib/bootstrap-datepicker/bootstrap-datepicker.zh-TW.min.js"></script>
+  <script type="text/javascript">
+    window._datepickerDP = $.fn.datepicker;
+  </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>
+  <!--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 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 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 = [];
+    var tempSubTag = ["M10", "M12"]; // 溫度向小類
+
+    var sysIconList = [
+      { mainSys: "EE", subSys: "E1", iconClass: "./gif/E1_white.png" },
+      { mainSys: "EE", subSys: "E2", iconClass: "./gif/E2_white.png" },
+      { mainSys: "EE", subSys: "E3", iconClass: "./gif/E3_white.png" },
+      { mainSys: "EE", subSys: "E4", iconClass: "./gif/E4-1_white.png" }, // 電表
+      { mainSys: "LT", subSys: "L1", iconClass: "./gif/L1_white.png" },
+      { mainSys: "LT", subSys: "L2", iconClass: "./gif/L2_white.png" }, // 景觀照明 0131目前沒有
+      { mainSys: "ME", subSys: "M1", iconClass: "./gif/M1_white.png" }, // 儲冰 0131目前沒有
+      { mainSys: "ME", subSys: "M5", iconClass: "./gif/M5-2_white.png" }, // 送排風
+      { mainSys: "ME", subSys: "M8", iconClass: "./gif/M8_white.png" }, // 排油煙0131目前沒有
+      { mainSys: "ME", subSys: "M10", iconClass: "./gif/M10_white.png" },
+      { mainSys: "ME", subSys: "M12", iconClass: "./gif/M12_white.png" },
+      { mainSys: "ELEV", subSys: "EL", iconClass: "./gif/EL_white.png" },
+      { mainSys: "FE", subSys: "F1", iconClass: "./gif/F1_white.png" },
+      { mainSys: "FE", subSys: "F2", iconClass: "./gif/lamp_white.png" }, // 排煙 0131目前沒有
+      { mainSys: "WP", subSys: "W1", iconClass: "./gif/W1_white.png" }, // 電子水表0131目前沒有
+      { mainSys: "WP", subSys: "W2", iconClass: "./gif/W2_white.png" },
+      { mainSys: "WP", subSys: "P1", iconClass: "./gif/P1_white.png" },
+      { mainSys: "S", subSys: "C", iconClass: "./gif/C_white.png" }, // CCTV
+      { mainSys: "S", subSys: "P", iconClass: "./gif/P_white.png" }, // 緊急求救
+      { mainSys: "S", subSys: "R", iconClass: "./gif/R_white.png" }, // 門禁
+      { mainSys: "P", subSys: "PSC", iconClass: "./gif/PSC_white.png" }, // 停管
+      { mainSys: "W3", subSys: "W1", iconClass: "./gif/W3_white.png" }, // 0131目前沒有
+    ];
+
+    var tempSysSubText = [
+      { text: "水錶系統", mainSys: "WP", subSys: "W1" },
+      { text: "空調系統", mainSys: "ME", subSys: "M10" }, // 2
+      { text: "照明系統", mainSys: "LT", subSys: "L1" }, // 3
+      { text: "CCTV系統", mainSys: "S", subSys: "C" }, //12
+      { text: "太陽能管理", mainSys: "S", subSys: "C" }, //12
+      { text: "冰水主機", mainSys: "WP", subSys: "W2" }, // 6
+      { text: "緊急發電機", mainSys: "EE", subSys: "E3" }, //10
+      { text: "電梯系統", mainSys: "ELEV", subSys: "EL" }, // 1
+      { text: "環境感測設備", mainSys: "ME", subSys: "M12" }, // 4
+      { text: "電錶系統", mainSys: "EE", subSys: "E4" }, // 5
+      { text: "高壓配電盤", mainSys: "EE", subSys: "E1" }, // 7
+      { text: "汙廢水設備", mainSys: "WP", subSys: "P1" }, // 8
+      { text: "低壓配電盤", mainSys: "EE", subSys: "E2" }, //9
+      { text: "消防設備", mainSys: "FE", subSys: "F1" }, //11
+      { text: "門禁系統", mainSys: "S", subSys: "R" }, //13
+      { text: "停管系統", mainSys: "P", subSys: "PSC" }, //14
+      { text: "緊急求救系統", mainSys: "S", subSys: "P" }, //15
+      { text: "送排風系統", mainSys: "ME", subSys: "M5" }, //16
+      //{ text: "景觀照明系統", mainSys: "LT", subSys: "L2", },
+      //{ text: "儲冰系統", mainSys: "ME", subSys: "M1", },
+      // { text: "排油煙設備", mainSys: "ME", subSys: "M8", },
+      //{ text: "排煙系統", mainSys: "FE", subSys: "F2", },
+      //{ text: "電子水錶", mainSys: "WP", subSys: "W1", },
+      // { text: "熱水系統", mainSys: "W3", subSys: "W1", },
+    ];
+
+    /**
+     * 頁面 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.jsf
+        // - 在 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.undef("baja!");
+        require(["jquery"], loadedBasePack);
       });
-    </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 = [];
-      var tempSubTag = ["M10", "M12"]; // 溫度向小類
-
-      var sysIconList = [
-    { mainSys: "EE", subSys: "E1", iconClass: "./gif/E1_white.png" },
-    { mainSys: "EE", subSys: "E2", iconClass: "./gif/E2_white.png" },
-    { mainSys: "EE", subSys: "E3", iconClass: "./gif/E3_white.png" },
-    { mainSys: "EE", subSys: "E4", iconClass: "./gif/E4-1_white.png" }, // 電表
-    { mainSys: "LT", subSys: "L1", iconClass: "./gif/L1_white.png" },
-    { mainSys: "LT", subSys: "L2", iconClass: "./gif/L2_white.png" }, // 景觀照明 0131目前沒有
-    { mainSys: "ME", subSys: "M1", iconClass: "./gif/M1_white.png" }, // 儲冰 0131目前沒有
-    { mainSys: "ME", subSys: "M5", iconClass: "./gif/M5-2_white.png" }, // 送排風
-    { mainSys: "ME", subSys: "M8", iconClass: "./gif/M8_white.png" }, // 排油煙0131目前沒有
-    { mainSys: "ME", subSys: "M10", iconClass: "./gif/M10_white.png" },
-    { mainSys: "ME", subSys: "M12", iconClass: "./gif/M12_white.png" },
-    { mainSys: "ELEV", subSys: "EL", iconClass: "./gif/EL_white.png" },
-    { mainSys: "FE", subSys: "F1", iconClass: "./gif/F1_white.png" },
-    { mainSys: "FE", subSys: "F2", iconClass: "./gif/lamp_white.png" }, // 排煙 0131目前沒有
-    { mainSys: "WP", subSys: "W1", iconClass: "./gif/W1_white.png" }, // 電子水表0131目前沒有
-    { mainSys: "WP", subSys: "W2", iconClass: "./gif/W2_white.png" },
-    { mainSys: "WP", subSys: "P1", iconClass: "./gif/P1_white.png" },
-    { mainSys: "S", subSys: "C", iconClass: "./gif/C_white.png" }, // CCTV
-    { mainSys: "S", subSys: "P", iconClass: "./gif/P_white.png" }, // 緊急求救
-    { mainSys: "S", subSys: "R", iconClass: "./gif/R_white.png" }, // 門禁
-    { mainSys: "P", subSys: "PSC", iconClass: "./gif/PSC_white.png" }, // 停管
-    { mainSys: "W3", subSys: "W1", iconClass: "./gif/W3_white.png" }, // 0131目前沒有
-  ];
-
-  var tempSysSubText = [
-    { text: "水錶系統", mainSys: "WP", subSys: "W1" },
-    { text: "空調系統", mainSys: "ME", subSys: "M10" }, // 2
-    { text: "照明系統", mainSys: "LT", subSys: "L1" }, // 3
-    { text: "CCTV系統", mainSys: "S", subSys: "C" }, //12
-    { text: "太陽能管理", mainSys: "S", subSys: "C" }, //12
-    { text: "冰水主機", mainSys: "WP", subSys: "W2" }, // 6
-    { text: "緊急發電機", mainSys: "EE", subSys: "E3" }, //10
-    { text: "電梯系統", mainSys: "ELEV", subSys: "EL" }, // 1
-    { text: "環境感測設備", mainSys: "ME", subSys: "M12" }, // 4
-    { text: "電錶系統", mainSys: "EE", subSys: "E4" }, // 5
-    { text: "高壓配電盤", mainSys: "EE", subSys: "E1" }, // 7
-    { text: "汙廢水設備", mainSys: "WP", subSys: "P1" }, // 8
-    { text: "低壓配電盤", mainSys: "EE", subSys: "E2" }, //9
-    { text: "消防設備", mainSys: "FE", subSys: "F1" }, //11
-    { text: "門禁系統", mainSys: "S", subSys: "R" }, //13
-    { text: "停管系統", mainSys: "P", subSys: "PSC" }, //14
-    { text: "緊急求救系統", mainSys: "S", subSys: "P" }, //15
-    { text: "送排風系統", mainSys: "ME", subSys: "M5" }, //16
-    //{ text: "景觀照明系統", mainSys: "LT", subSys: "L2", },
-    //{ text: "儲冰系統", mainSys: "ME", subSys: "M1", },
-    // { text: "排油煙設備", mainSys: "ME", subSys: "M8", },
-    //{ text: "排煙系統", mainSys: "FE", subSys: "F2", },
-    //{ text: "電子水錶", mainSys: "WP", subSys: "W1", },
-    // { text: "熱水系統", mainSys: "W3", subSys: "W1", },
-  ];
 
       /**
-       * 頁面 Loading 建立
+       * jquery.js 二次引用後 Callback，載入第三方套件
        * */
-      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;
+      function loadedBasePack() {
+        require([
+          "lib/bootstrap/bootstrap.bundle.min",
+          "lib/app.bundle",
+          "lib/app.menu",
+          "datatables.net.b4",
+          "lib/FixedColumns-4.2.2/js/dataTables.fixedColumns.min",
+          "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",
+          "baja!",
+        ], 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);
+        });
       }
 
-      try {
-        $(function () {
-          // 二次引用 jquery.jsf
-          // - 在 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.undef('baja!');
-          require(["jquery"], loadedBasePack);
-        });
+      /**
+       * 全數套件讀取完成 Callback
+       * */
+      function loadedJsPack() {
+        $.fn.datepicker = window._datepickerDP;
 
-        /**
-         * jquery.js 二次引用後 Callback，載入第三方套件
-         * */
-        function loadedBasePack() {
-          require([
-            "lib/bootstrap/bootstrap.bundle.min",
-            "lib/app.bundle",
-            "lib/app.menu",
-            "datatables.net.b4",
-            "lib/FixedColumns-4.2.2/js/dataTables.fixedColumns.min",
-            "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",
-            "baja!",
-          ], 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);
-          });
-        }
+        cookies = new YourTeam.Utility.Cookie();
+        jwt = cookies.get("JWT-Authorization");
+        pageAct.AreaTag = initAreaTag;
+        loadEvent();
 
-        /**
-         * 全數套件讀取完成 Callback
-         * */
-        function loadedJsPack() {
-          $.fn.datepicker = window._datepickerDP;
-
-          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
-         * */
-        async function isValidLogin() {
-          getUserInfo();
-          iniFroList();
-          await isShowBuildingInMenu();
-          showMainSys();
-          getBuiList();
-          getSysMonBtnList();
-          checkDevState();
-          loadNoticeConSta();
-
-          allDevices = getAllDevice();
-          if (pageAct.isShowBuildingInMenu) {
-            $("#buiActDrop").hide();
-          }
-
-          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>`;
-                  });
-                  pageAct.buildList = res.data;
-
-                  //$("#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");
-          setTopBuildingText();
-        }
-
-        // 事件先行讀取
-        function loadEvent() {
-          // 刷新頁面計時器
-          let refreshPageTimer = null;
-          onEvent("click", "[name=topFunBtn]", function (e) {
-            _ytTabInited = [];
-            let page = $(this).data("page");
-            console.log("page", page);
-            if (!page) {
-              e.stopPropagation();
-              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");
-
-              if (pageAct.isShowBuildingInMenu) {
-                let building_tag = $(this).data("building-tag");
-                $(`#buildTab${building_tag}`).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");
-            sessionStorage.removeItem("pageAct");
-            sessionStorage.removeItem("lastPage");
-            location.href = "/logout";
-          });
-
-          onEvent("active:change", "#buiList", function (e, actEle) {
-            if (actEle) {
-              pageAct.buiTag = $(actEle).prop("id").split("buiBtn")[1];
-              pageAct.buiName = $(actEle).text();
-              pageAct.urn = $(actEle).data("urn");
-              console.log("building");
-
-              clearTimeout(refreshPageTimer);
-              refreshPageTimer = setTimeout(() => {
-                refreshSubPage();
-              }, 0);
-            }
-          });
-
-          onEvent(
-            "yt:tab:change",
-            "[data-tabname=buildTab]",
-            function (e, arg) {
-              pageAct.buiTag = buildingTagOnProcess($(this).prop("id").split("buildTab")[1]);
-              pageAct.buiName = $(this).text();
-              pageAct.urn = $(this).data("urn");
-              $(this).parents("ul").find("a").removeClass("active");
-              $(this).parent("a").addClass("active");
-              console.log(e, arg);
-
-              clearTimeout(refreshPageTimer);
-              refreshPageTimer = setTimeout(() => {
-                if (!arg) {
-                  refreshSubPage("dashboard");
-                } else if(arg.triggerType == "first") {
-                  refreshSubPage();
-                }
-              }, 0);
-            }
-          );
-
-          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(data);
-            });
-            getAlarm();
-          });
-        }
-
-        // 登入驗證
-        function Login(account) {
-          console.log(account);
-          /*if ($("#login-form").valid()) {*/
-
-          var url = baseApiUrl + "/api/Login/";
-          var send_data = {
-            account: account,
-            password: "rJ2T5Kkj",
-          };
+        if (!jwt) {
           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);
-            },
-          });
+          myBaja = new MyBaja();
+          myBaja.setMyUserAccount(Login);
+        } else {
+          isValidLogin();
         }
 
-        function refreshSubPage(toPage = null) {
-          lastPage = sessionStorage.getItem("lastPage");
-          console.log("lastPage", lastPage);
-          if (toPage) {
-            lastPage = toPage;
-          }
+        $(loadEle).Loading("close");
+      }
 
-          if (lastPage) {
-            let lastPageAct = {};
+      /**
+       * 登入驗證完成 Callback
+       * */
+      async function isValidLogin() {
+        getUserInfo();
+        await iniFroList();
+        await isShowBuildingInMenu();
+        showMainSys();
+        await getBuiList();
+        await getSysMonBtnList();
+        checkDevState();
+        loadNoticeConSta();
 
-            if (sessionStorage.getItem("pageAct") && isJSON(sessionStorage.getItem("pageAct"))) {
-              lastPageAct = JSON.parse(sessionStorage.getItem("pageAct"));
-            }
-
-            if (
-              (lastPageAct.sysSubTag && lastPage == "systemMonitor") ||
-              lastPage == "sysElevator"
-              //  || lastPage == "sysSensor"
-            ) {
-              $("#sysMonTopBtn").YTTab("set");
-              if (!pageAct.isShowBuildingInMenu) {
-                $(`#subSysBtn${lastPageAct.sysSubTag}`).click();
-              } else {
-                $(
-                  `#subSysBtn${lastPageAct.sysSubTag}[data-building-tag=${buildingTagOnJquery(pageAct.buiTag)}]`
-                ).click();
-              }
-            } else {
-              $(`[data-tabname=topFunBtn][data-page=${lastPage}]`).YTTab(
-                "setAndClick"
-              );
-            }
-
-            /*$(`[name=topFunBtn][data-page=${lastPage}]`).click();*/
-          } else {
-            $("#app").load("_schoolView.html", loadCallback);
-          }
+        allDevices = getAllDevice();
+        if (pageAct.isShowBuildingInMenu) {
+          $("#buiActDrop").hide();
         }
 
-        //==============================================================================
-        //                       ↓  系統監控 - 共用 Function ↓
-        //==============================================================================
+        timeOutGetData();
 
-        // 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;
+        function getBuiList() {
+          let url = baseApiUrl + "/api/Device/GetBuild";
           ytAjax = new YourTeam.Ajax(
             url,
-            objSendData,
+            null,
             function (res) {
               if (!res || res.code != "0000" || !res.data) {
               } else {
-                tbody
-                  .find("tr")
-                  .eq(0)
-                  .append(creEle("td", deviceNumber(res.data.device_number)));
-                tbody.find("tr").eq(1).append(creEle("td", res.data.full_name));
+                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>`;
+
+                  strHtml += `<a href="javascript:;" id="buiBtn${buiObj.building_tag}" data-target="#sysMonNavbar"  data-page="systemMonitor" class="text-center dropdown-item" name="topFunBtn">${buiObj.full_name}</a>`;
+                });
+                pageAct.buildList = res.data;
+                pageAct.buiTag = res.data[0].building_tag;
+                pageAct.buiName = res.data[0].full_name;
+
+                $(".sys_building_dropdown_menu").append(strHtml).droSetItem(); //droSetItem 預設第一筆 active
               }
             },
             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;
+        //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");
         }
 
-        // Card - 運維紀錄 block
-        function drawOpeRecTabBlo() {
-          let strHtml = `<table id="opeRecTable" class="table table-bordered table-striped text-center m-0 w-100">
-
-                                                                              </table>`;
-          return strHtml;
+        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);
         }
+      }
 
-        // Card 呈現初始化
-        function initPopover(
-          type = null,
-          extOption = {},
-          selector = "[name=devItem]"
-        ) {
-          if (type == null && pageAct.sysMainTag == "LT") {
-            type = "light";
+      // page loaded callback
+      function loadCallback() {
+        initTabsByEle();
+        resetYTTooltip();
+        $("#sysMonTopBtn").YTNavbar("hide");
+        setTopBuildingText();
+      }
+
+      // 事件先行讀取
+      function loadEvent() {
+        // 刷新頁面計時器
+        let refreshPageTimer = null;
+        onEvent("click", "[name=topFunBtn]", function (e) {
+          _ytTabInited = [];
+          let page = $(this).data("page");
+          console.log("page", page);
+          if (!page) {
+            e.stopPropagation();
+            return;
           }
-
-          $(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="${deviceNumber(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 = parseInt($(oriEle).data("dbId"));
-                if (eleDbId) {
-                  if (alarmDbIdList.some((dbId) => dbId == eleDbId)) {
-                    changeScaleForHotspot(eleDbId);
-                  } else {
-                    controlFocusHotspot(eleDbId);
-                  }
-                }
-                // 3D 視角 ZOOM IN 聚焦
-
-                if (devObj) {
-                  console.log("devObj", 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=${deviceNumber(devNum)}]`).data(
-              "devobj"
-            );
-			if(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) {
-          pageAct.sysSubTag !== "L1" &&
-            pageAct.sysSubTag !== "M12" &&
-            console.log("dbId", dbId);
-          pageAct.sysSubTag !== "L1" &&
-            pageAct.sysSubTag !== "M12" &&
-            changeColorForHotspot(dbId, open ? "focus" : null);
-          changeScaleForHotspot(dbId, open);
-        }
-
-        // Baja 取得異常紀錄
-        function loadErr(allPath) {
-          if (allPath != undefined && allPath != null) {
-            getOneDeviceAlarmTop10ByBaja(allPath, callbackForErr);
+          if (
+            page != "systemMonitor" &&
+            page != "sysElevator"
+            //  && page != "sysSensor"
+          ) {
+            $("#sysMonBtnList [name=topFunBtn]").removeClass("active");
+            pageAct.sysMainTag = null;
+            pageAct.sysSubTag = null;
           } 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() {
-          $("[data-light-type]").each((index, ele) => {
-            let type = $(ele).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;
+            setSysTagForPageAct(this);
+            $("#sysMonTopBtn").YTTab("set");
+            if ($(`#subSysBtn${pageAct.sysSubTag}`).length) {
+              $(`#subSysBtn${pageAct.sysSubTag}`)?.YTTab("set");
             }
-            $(ele).css("background-color", color);
-            //是否閃爍
-            if (isFlashing) {
-              $(ele).parents(".device-wrap").addClass("light-flash");
-            } else {
-              $(ele).parents(".device-wrap").removeClass("light-flash");
+
+            if (pageAct.isShowBuildingInMenu) {
+              let building_tag = $(this).data("building-tag");
+              $(`#buildTab${building_tag}`).YTTab("set");
             }
+          }
+          // 取消當前所有 baja 訂閱
+          $.each(tolSubList, (idx, sub) => {
+            sub.unsubscribeAll();
+            sub.detach();
           });
-        }
+          // 清空 baja 訂閱紀錄
+          tolSubList = [];
+          // 清空 loading 狀態
+          endPageLoading();
 
-        // 設置昇位圖上方 燈號
-        function setTopLight() {
-          let sysSubObj = pageAct.sysSubObj;
-          let strHtml = ``;
-          if (
-            sysSubObj.device_normal_point_name != null &&
-            sysSubObj.device_normal_point_value != null
-          ) {
-            strHtml += ` <div class="row m-0 align-items-center">
-                              <span id="sysNorLight" class="circle-light mr-2 " data-light-type="normal"></span>
-                              <label class="mb-0">${sysSubObj.device_normal_text}</label>
-                          </div>`;
+          // $(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");
+          sessionStorage.removeItem("pageAct");
+          sessionStorage.removeItem("lastPage");
+          location.href = "/logout";
+        });
+
+        // 紀錄目前被點選的棟別
+        onEvent("click", ".sys_building_dropdown_menu", function (e, actEle) {
+          const target = e.target;
+          const element = e.target.dataset.target;
+          if (element === "#sysMonNavbar") {
+            $(".sys_building_dropdown_menu > .active").removeClass("active");
+            pageAct.buiTag = $(target).prop("id").split("buiBtn")[1];
+            pageAct.buiName = $(target).text();
+            pageAct.urn = $(target).data("urn");
+            $(target).addClass("active");
+
+            clearTimeout(refreshPageTimer);
+            refreshPageTimer = setTimeout(() => {
+              refreshSubPage();
+            }, 0);
           }
-          if (
-            sysSubObj.device_close_point_name != null &&
-            sysSubObj.device_close_point_value != null
-          ) {
-            strHtml += ` <div class="row m-0 align-items-center">
-                                      <span id="sysCloLight" class="circle-light mr-2" data-light-type="close"></span>
-                                      <label class="mb-0">${sysSubObj.device_close_text}</label>
-                              </div>`;
+        });
+
+        onEvent("active:change", "#buiList", function (e, actEle) {
+          if (actEle) {
+            pageAct.buiTag = $(actEle).prop("id").split("buiBtn")[1];
+            pageAct.buiName = $(actEle).text();
+            pageAct.urn = $(actEle).data("urn");
+            console.log("building");
+
+            clearTimeout(refreshPageTimer);
+            refreshPageTimer = setTimeout(() => {
+              refreshSubPage();
+            }, 0);
           }
-          if (
-            sysSubObj.device_error_point_name != null &&
-            sysSubObj.device_error_point_value != null
-          ) {
-            strHtml += ` <div class="row m-0 align-items-center">
-                              <span id="sysErrLight" class="circle-light mr-2" data-light-type="error"></span>
-                              <label class="mb-0">${sysSubObj.device_error_text}</label>
-                          </div>`;
+        });
+
+        onEvent(
+          "yt:tab:change",
+          "[data-tabname=buildTab]",
+          function (e, arg) {
+            pageAct.buiTag = buildingTagOnProcess(
+              $(this).prop("id").split("buildTab")[1]
+            );
+            pageAct.buiName = $(this).text();
+            pageAct.urn = $(this).data("urn");
+            $(this).parents("ul").find("a").removeClass("active");
+            $(this).parent("a").addClass("active");
+
+            clearTimeout(refreshPageTimer);
+            refreshPageTimer = setTimeout(() => {
+              if (!arg) {
+                refreshSubPage("dashboard");
+              } else if (arg.triggerType == "first") {
+                refreshSubPage();
+              }
+            }, 0);
           }
+        );
 
-          return strHtml;
-        }
+        onEvent("yt:tab:change", "#lightSch-tab", function () {
+          if (pageAct.sysMainTag == "LT" && $("#lightSchModal").length != 0) {
+            setLightSchBlcok ? setLightSchBlcok(this) : "";
+            $("#lightSchModal").modal("show");
+          }
+        });
 
-        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 || obj.device_node_full_name);
-          console.log("crePosPopover", parentEle.data());
-          initPopover(null, _position, parentEle);
+        onEvent(
+          "yt:tab:prechange",
+          "[data-tabname=topFunBtn]",
+          function (e, arg) {
+            if ($(this)[0].id == "sysMonTopBtn" || !$(this).data("page")) {
+              arg.cancel = true;
+            }
+          }
+        );
 
-          return parentEle;
-        }
+        onEvent("scroll", window, function () {
+          if ($(window).scrollTop() != 0) {
+            $("#noticeBlock").css("top", 0);
+          } else {
+            $("#noticeBlock").css("top", 70);
+          }
+        });
 
-        // 設置 Forge 3D 溫度條
-        function setTopHeatBar() {
-          let strHtml = `<canvas name="forgeHeatBar" width="200" height="30" style="position: absolute; z-index:9999"></canvas>`;
-          return strHtml;
-        }
+        onEvent("click", "#testsysbtn", function () { });
 
-        //==============================================================================
-        //                       ↑  系統監控 - 共用 Function ↑
-        //==============================================================================
-      } catch (e) {
-        $(loadEle).Loading("close");
+        //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(data);
+          });
+          getAlarm();
+        });
       }
 
-      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 Login(account) {
+        console.log(account);
+        /*if ($("#login-form").valid()) {*/
 
-      function getDevItem() {
-        let url = baseApiUrl + "/api/Device/GetDeviceItem";
-
-        objSendData.Data = {
-          main_system_tag: pageAct.sysMainTag,
-          sub_system_tag: pageAct.sysSubTag,
+        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 refreshSubPage(toPage = null) {
+        lastPage = sessionStorage.getItem("lastPage");
+        console.log("lastPage", lastPage);
+        if (toPage) {
+          lastPage = toPage;
+        }
+
+        if (lastPage) {
+          let lastPageAct = {};
+
+          if (
+            sessionStorage.getItem("pageAct") &&
+            isJSON(sessionStorage.getItem("pageAct"))
+          ) {
+            lastPageAct = JSON.parse(sessionStorage.getItem("pageAct"));
+          }
+
+          if (
+            (lastPageAct.sysSubTag && lastPage == "systemMonitor") ||
+            lastPage == "sysElevator"
+            //  || lastPage == "sysSensor"
+          ) {
+            $("#sysMonTopBtn").YTTab("set");
+            if (!pageAct.isShowBuildingInMenu) {
+              $(`#subSysBtn${lastPageAct.sysSubTag}`).click();
+            } else {
+              $(
+                `#subSysBtn${lastPageAct.sysSubTag
+                }[data-building-tag=${buildingTagOnJquery(pageAct.buiTag)}]`
+              ).click();
+            }
+          } else {
+            $(`[data-tabname=topFunBtn][data-page=${lastPage}]`).YTTab(
+              "setAndClick"
+            );
+          }
+
+          /*$(`[name=topFunBtn][data-page=${lastPage}]`).click();*/
+        } else {
+          $("#app").load("_schoolView.html", loadCallback);
+        }
+      }
+
+      //==============================================================================
+      //                       ↓  系統監控 - 共用 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 {
-              pageAct.devItems = res.data;
+              tbody
+                .find("tr")
+                .eq(0)
+                .append(creEle("td", deviceNumber(res.data.device_number)));
+              tbody.find("tr").eq(1).append(creEle("td", res.data.full_name));
             }
           },
           null,
           "POST"
         ).send();
+
+        return tabEle.prop("outerHTML");
       }
 
-      function alarmIconBlink(data) {
-        if (data?.data.length != 0) {
-          $(".page-header [name=topFunBtn][data-page=alert] i").addClass(
-            "blink"
-          );
+      // 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="${deviceNumber(
+              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 = parseInt($(oriEle).data("dbId"));
+              if (eleDbId) {
+                if (alarmDbIdList.some((dbId) => dbId == eleDbId)) {
+                  changeScaleForHotspot(eleDbId);
+                } else {
+                  controlFocusHotspot(eleDbId);
+                }
+              }
+              // 3D 視角 ZOOM IN 聚焦
+
+              if (devObj) {
+                console.log("devObj", 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=${deviceNumber(devNum)}]`
+          ).data("devobj");
+          if (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) {
+        pageAct.sysSubTag !== "L1" &&
+          pageAct.sysSubTag !== "M12" &&
+          console.log("dbId", dbId);
+        pageAct.sysSubTag !== "L1" &&
+          pageAct.sysSubTag !== "M12" &&
+          changeColorForHotspot(dbId, open ? "focus" : null);
+        changeScaleForHotspot(dbId, open);
+      }
+
+      // Baja 取得異常紀錄
+      function loadErr(allPath) {
+        if (allPath != undefined && allPath != null) {
+          getOneDeviceAlarmTop10ByBaja(allPath, callbackForErr);
         } else {
-          $(".page-header [name=topFunBtn][data-page=alert] i").removeClass(
-            "blink"
-          );
+          console.log("no device");
         }
       }
 
-      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);
+      // Card - 異常紀錄 Table
+      function callbackForErr(result) {
+        // console.log("@@@",result)
+        if (errRecTable) {
+          errRecTable.destroy();
         }
 
-        if (Object.keys(events).findIndex((x) => x == "timeout:5m") != -1) {
-          timeOut5m = setInterval(() => {
-            $(window).trigger("timeout:5m");
-          }, 5 * 60 * 1000);
-        }
+        let tag = "#errRecTable";
+        let datas;
 
-        timeOuters = timeOuters.concat([timeOut3s, timeOut5m]);
-      }
+        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 },
+        ];
 
-      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;
-            }
+        let columns = [
+          {
+            title: "異常ID",
+            data: "uuid",
           },
-          null,
-          "POST"
-        ).send();
-      }
-
-      function isShowBuildingInMenu() {
-        let url = baseApiUrl + "/Utility/isShowBuilding";
-
-        ytAjax = new YourTeam.Ajax(
-          url,
-          null,
-          function (res) {
-            if (!res || res.code != "0000") {
-            } else {
-              pageAct.isShowBuildingInMenu = res.data;
-            }
+          {
+            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,
-          "POST"
-        ).send();
+          null,
+          null,
+          null,
+          "<'scrolledTable'tpi>"
+        );
       }
 
-      function startPageLoading() {
-        if (!loadingTip) {
-          loadingTip = YT.Alert.Tip("資料讀取中...", "show");
+      //根據 data-type 設置顏色 (判斷後台是否有設定，若無則帶預設)
+      function setLightColor() {
+        $("[data-light-type]").each((index, ele) => {
+          let type = $(ele).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).css("background-color", color);
+          //是否閃爍
+          if (isFlashing) {
+            $(ele).parents(".device-wrap").addClass("light-flash");
+          } else {
+            $(ele).parents(".device-wrap").removeClass("light-flash");
+          }
+        });
+      }
+
+      // 設置昇位圖上方 燈號
+      function setTopLight() {
+        let sysSubObj = pageAct.sysSubObj;
+        let strHtml = ``;
+        if (
+          sysSubObj.device_normal_point_name != null &&
+          sysSubObj.device_normal_point_value != null
+        ) {
+          strHtml += ` <div class="row m-0 align-items-center">
+                                <span id="sysNorLight" class="circle-light mr-2 " data-light-type="normal"></span>
+                                <label class="mb-0">${sysSubObj.device_normal_text}</label>
+                            </div>`;
         }
-      }
-
-      function endPageLoading() {
-        if (loadingTip != null) {
-          $(loadingTip.ele).YTAlert().hide();
-          loadingTip = null;
+        if (
+          sysSubObj.device_close_point_name != null &&
+          sysSubObj.device_close_point_value != null
+        ) {
+          strHtml += ` <div class="row m-0 align-items-center">
+                                        <span id="sysCloLight" class="circle-light mr-2" data-light-type="close"></span>
+                                        <label class="mb-0">${sysSubObj.device_close_text}</label>
+                                </div>`;
         }
+        if (
+          sysSubObj.device_error_point_name != null &&
+          sysSubObj.device_error_point_value != null
+        ) {
+          strHtml += ` <div class="row m-0 align-items-center">
+                                <span id="sysErrLight" class="circle-light mr-2" data-light-type="error"></span>
+                                <label class="mb-0">${sysSubObj.device_error_text}</label>
+                            </div>`;
+        }
+
+        return strHtml;
       }
 
-      function iniFroList() {
-        url = baseApiUrl + "/api/GetUsrFroList";
-        let hasMonitor = false;
+      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 || obj.device_node_full_name);
+        console.log("crePosPopover", parentEle.data());
+        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.sysSubObj.main_system_tag;
+      pageAct.sysSubTag =
+        $(obj).data("subSysObj")?.sub_system_tag ||
+        pageAct.sysSubObj.sub_system_tag;
+      pageAct.sysSubName =
+        $(obj).data("subSysObj")?.full_name || pageAct.sysSubName;
+      pageAct.sysSubObj = $(obj).data("subSysObj") || pageAct.sysSubObj;
+      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;
+            pageAct.mainStatus = true;
+          }
+        },
+        null,
+        "POST"
+      ).send();
+    }
+
+    function isShowBuildingInMenu() {
+      let url = baseApiUrl + "/Utility/isShowBuilding";
+
+      ytAjax = new YourTeam.Ajax(
+        url,
+        null,
+        function (res) {
+          if (!res || res.code != "0000") {
+          } else {
+            // pageAct.isShowBuildingInMenu = res.data;
+            pageAct.isShowBuildingInMenu = false;
+          }
+        },
+        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:;" id="homeBtn" data-toggle="dropdown" 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 d-none" name="topFunBtn" data-tabname="topFunBtn" data-page="dashboard" type="button" >儀錶板</button>
+                                                                                <button class="dropdown-item" name="topFunBtn" data-tabname="topFunBtn" data-page="schoolView" type="button">校園總覽</button>
+                                                                                <button class="dropdown-item" name="topFunBtn" data-tabname="topFunBtn" data-page="elecSingleLine" type="button">電表單線圖</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 dropdown-toggle" data-toggle="dropdown" data-tabname="topFunBtn" class="text-center">
+                                                                                    <i class="fal fa-tv fa-2x"></i><br>${v.subName}
+                                                                                </a>
+                                                                               <div style="transform: translateY(55px)">
+                                                                                <div class="dropdown-menu dropdown-menu-right sys_building_dropdown_menu" >
+                                                                                </div>
+                                                                            </div>
+                                                                            </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);
+
+            // $("#homeBtn").YTNavbar("init");
+          }
+        },
+        null,
+        "POST"
+      ).send();
+    }
+
+    function getSysMonBtnList() {
+      let url = null;
+      let sendData = {};
+      if (pageAct.isShowBuildingInMenu) {
+        url = baseApiUrl + "/api/Device/GetSysMonMainSub";
+        sendData = {};
+        objSendData.Data = sendData;
         ytAjax = new YourTeam.Ajax(
           url,
-          null,
+          objSendData,
           function (res) {
             if (!res || res.code != "0000" || !res.data) {
             } else {
-              let strHtml = `<div class="btn-group mx-4">
-                                                                          <a href="javascript:;" id="homeBtn" data-toggle="dropdown" 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 d-none" name="topFunBtn" data-tabname="topFunBtn" data-page="dashboard" type="button" >儀錶板</button>
-                                                                              <button class="dropdown-item" name="topFunBtn" data-tabname="topFunBtn" data-page="schoolView" type="button">校園總覽</button>
-                                                                              <button class="dropdown-item" name="topFunBtn" data-tabname="topFunBtn" data-page="elecSingleLine" type="button">電表單線圖</button>
-                                                                          </div>
-                                                                      </div>`;
+              $("#sysMonBtnList").html("");
 
-              $.each(res.data, function (i, v) {
-                if (v.authCode == "PF1") {
-                  strHtml += `<div class="btn-group mx-4" >
-                                                                              <a href="javascript:;" id="sysMonTopBtn" class="text-center" data-toggle="navbar" data-target="#sysMonNavbar" aria-haspopup="true" aria-expanded="false">
-                                                                                  <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);
-
-              // $("#homeBtn").YTNavbar("init");
-            }
-          },
-          null,
-          "POST"
-        ).send();
-      }
-
-      function getSysMonBtnList() {
-        let url = null;
-        let sendData = {};
-        if (pageAct.isShowBuildingInMenu) {
-          url = baseApiUrl + "/api/Device/GetSysMonMainSub";
-          sendData = {};
-          objSendData.Data = sendData;
-          ytAjax = new YourTeam.Ajax(
-            url,
-            objSendData,
-            function (res) {
-              if (!res || res.code != "0000" || !res.data) {
-              } else {
-                $("#sysMonBtnList").html("");
-
-                $.each(res.data, (i, building) => {
-                  let li = creEle("li", null, null, null, []);
-                  let a = creA(
-                    building.building_name,
-                    { href: "javascript:;" },
-                    [],
-                    null,
-                    {
-                      "nb-node-type": "parent",
-                    },
-                    ""
-                  );
-                  a.html(
-                    `<span id="buildTab${buildingTagOnJquery(building.building_tag)}" data-tabname="buildTab" data-urn="${building.urn_3D}">${building.building_name}</span>`
-                  );
-                  li.append(a);
-                  let ul = creEle("ul", null, null, null, [
-                    "yt-navbar-dropdown",
-                  ]);
-                  $.each(building.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 li2 = creEle("li");
-                        let a2 = creA(
-                          subSysObj.full_name,
-                          { href: "javascript:;" },
-                          [],
-                          `subSysBtn${subSysObj.sub_system_tag}`,
-                          {
-                            page: page,
-                            tabname: "systemMonitor",
-                            "building-tag": buildingTagOnJquery(building.building_tag),
-                          },
-                          "topFunBtn"
-                        );
-                        li2.append(a2);
-                        ul.append(li2);
-
-                        a2.data("subSysObj", subSysObj);
-                        subSysObj.main_system_tag = mainSysObj.main_system_tag;
-                      }
-                    );
-                  });
-                  const ulLen = ul.find("li").length;
-                  for(let i = 0; i < 8 - ulLen; i++){
-                    let li2 = creEle("li");
-                        let a2 = creA(
-                          tempSysSubText[i].text,
-                          { href: "javascript:;" },
-                          [],
-                          `subSysBtn${tempSysSubText[i].subSys}`,
-                          {
-                            page: "systemMonitor",
-                            tabname: "systemMonitor",
-                            "building-tag": building.building_tag,
-                          },
-                          "topFunBtn"
-                        );
-                        li2.append(a2);
-                        ul.append(li2);
-                  }
-                  
-
-                  li.append(ul);
-                  $("#sysMonBtnList").append(li);
-                });
-                $("#sysMonTopBtn").YTNavbar("init",{onlyOneOpen: true});
-
-                $("span[id^=buildTab]").first().YTTab("setAndClick",{triggerType:"first"});
-              }
-            },
-            null,
-            "POST"
-          ).send();
-        } else {
-          url = baseApiUrl + "/api/Device/GetMainSub";
-          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(res.data, (i, building) => {
+                let li = creEle("li", null, null, null, []);
+                let a = creA(
+                  building.building_name,
+                  { href: "javascript:;" },
+                  [],
+                  null,
+                  {
+                    "nb-node-type": "parent",
+                  },
+                  ""
+                );
+                a.html(
+                  `<span id="buildTab${buildingTagOnJquery(
+                    building.building_tag
+                  )}" data-tabname="buildTab" data-urn="${building.urn_3D}">${building.building_name
+                  }</span>`
+                );
+                li.append(a);
+                let ul = creEle("ul", null, null, null, [
+                  "yt-navbar-dropdown",
+                ]);
+                $.each(building.history_Main_Systems, (index, mainSysObj) => {
                   $.each(
                     mainSysObj.history_Sub_systems,
                     (index2, subSysObj) => {
@@ -2332,209 +2142,300 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                       //     page = "sysSensor";
                       // }
 
-                      let li = creEle("li");
-                      let a = creA(
+                      let li2 = creEle("li");
+                      let a2 = creA(
                         subSysObj.full_name,
                         { href: "javascript:;" },
                         [],
                         `subSysBtn${subSysObj.sub_system_tag}`,
-                        { page: page, tabname: "systemMonitor" },
+                        {
+                          page: page,
+                          tabname: "systemMonitor",
+                          "building-tag": buildingTagOnJquery(
+                            building.building_tag
+                          ),
+                        },
                         "topFunBtn"
                       );
-                      li.append(a);
+                      li2.append(a2);
+                      ul.append(li2);
 
-                      a.data("subSysObj", subSysObj);
+                      a2.data("subSysObj", subSysObj);
                       subSysObj.main_system_tag = mainSysObj.main_system_tag;
-                      $("#sysMonBtnList").append(li);
                     }
                   );
                 });
-              }
-            },
-            null,
-            "POST"
-          ).send();
-        }
-      }
+                const ulLen = ul.find("li").length;
+                for (let i = 0; i < 8 - ulLen; i++) {
+                  let li2 = creEle("li");
+                  let a2 = creA(
+                    tempSysSubText[i].text,
+                    { href: "javascript:;" },
+                    [],
+                    `subSysBtn${tempSysSubText[i].subSys}`,
+                    {
+                      page: "systemMonitor",
+                      tabname: "systemMonitor",
+                      "building-tag": building.building_tag,
+                    },
+                    "topFunBtn"
+                  );
+                  li2.append(a2);
+                  ul.append(li2);
+                }
 
-      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();
-      }
+                li.append(ul);
+                $("#sysMonBtnList").append(li);
+              });
+              $("#sysMonTopBtn").YTNavbar("init", { onlyOneOpen: true });
 
-      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);
+              $("span[id^=buildTab]")
+                .first()
+                .YTTab("setAndClick", { triggerType: "first" });
             }
           },
           null,
           "POST"
         ).send();
-      }
-
-      var noticeOptArr = [];
-      function getAlarmFromDB() {
-        let url = baseApiUrl + "/api/AlarmCard";
+      } else {
+        url = baseApiUrl + "/api/Device/GetMainSub";
+        sendData = {
+          building_tag: pageAct.buiTag,
+        };
+        objSendData.Data = sendData;
         ytAjax = new YourTeam.Ajax(
           url,
-          null,
+          objSendData,
           function (res) {
             if (!res || res.code != "0000" || !res.data) {
             } else {
-              let datas = res.data;
+              $("#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);
+                    if (index === 0 && index2 === 0) {
+                      pageAct.sysMainTag = mainSysObj.main_system_tag;
+                      pageAct.sysSubName = subSysObj.full_name;
+                      pageAct.sysSubObj = subSysObj;
+                      pageAct.sysSubTag = subSysObj.sub_system_tag;
+                      $(`#subSysBtn${subSysObj.sub_system_tag}`).addClass(
+                        "active"
+                      );
+                    }
+                  }
+                );
+              });
             }
           },
           null,
-          "POST",
-          true
+          "POST"
         ).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;
+    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();
+    }
 
-              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);
-              });
+    function getUserInfo() {
+      let url = baseApiUrl + varApiUrl + "getUserFull";
 
-              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()
+      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 = [];
+    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();
+      ytAjax = new YourTeam.Ajax(
+        url,
+        null,
+        function (res) {
+          if (!res || res.code != "0000" || !res.data) {
+          } else {
+            result = res.data;
           }
-        } else {
-          if ($("#noticeBlock").is(":visible")) {
-            setHide();
-          } else if (!$("#noticeBlock").is(":visible")) {
-            setShow();
-          }
-        }
+        },
+        null,
+        "POST"
+      ).send();
+      return result;
+    }
 
-        function setShow() {
-          $("#toggleNoticeBtn").find("#noticeConText").text(hideText);
-          $("#noticeConIcon").addClass(iconArr[0]);
-          $("#noticeBlock").show();
-          $("#noticeBlock").animate({ opacity: 1 }, 200);
-          localStorage.setItem("noticeStatus", "show");
-        }
+    function loadNoticeConSta() {
+      let noticeStatus = localStorage.getItem("noticeStatus");
+      chaNoticeConSta(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");
+    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();
         }
       }
-    </script>
-  </body>
-  <!-- END Body -->
+
+      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 -->
 </html>
diff --git a/Frontend/js/site.js b/Frontend/js/site.js
index 243efe6..80a79df 100644
--- a/Frontend/js/site.js
+++ b/Frontend/js/site.js
@@ -95,7 +95,10 @@ function setDropdownItem(menuEle) {
 
   let actText = $(menuEle).find(".dropdown-item.active").first().text();
   let actEleId = $(menuEle).prop("id");
-  $(`.dropdown-toggle[data-target=${actEleId}]`).text(actText);
+  if (actEleId) {
+    $(`.dropdown-toggle[data-target=${actEleId}]`).text(actText);
+  }
+
 
   /*actChaCallback($(menuEle).find(".dropdown-item.active"))*/
   $(menuEle).trigger("active:change", $(menuEle).find(".dropdown-item.active"));
@@ -1248,42 +1251,62 @@ class Forge3DSensor {
   }
 }
 
-function setTopBuildingText(){
-  $(".top-building-text-container").load("_topBuildingText.html",function(){
+function setTopBuildingText() {
+  $(".top-building-text-container").load("_topBuildingText.html", function () {
 
   })
 }
 
-function buildingTagOnJquery(building_tag){
-  let frontSyntax = building_tag.slice(0,2);
-  if(frontSyntax == "$3"){
-    return building_tag.slice(2,building_tag.length);
+function buildingTagOnJquery(building_tag) {
+  let frontSyntax = building_tag.slice(0, 2);
+  if (frontSyntax == "$3") {
+    return building_tag.slice(2, building_tag.length);
   }
   return building_tag;
 }
 
-function buildingTagOnProcess(building_tag){
-  if(!isNaN(parseInt(building_tag.slice(0,1)))){
+function buildingTagOnProcess(building_tag) {
+  if (!isNaN(parseInt(building_tag.slice(0, 1)))) {
     building_tag = "$3" + building_tag;
   }
   return building_tag;
 }
 
-function deviceNumber(devNum){
-  if(devNum.includes("$3")){
-    devNum = devNum.replaceAll("$3","");
+function deviceNumber(devNum) {
+  if (devNum.includes("$3")) {
+    devNum = devNum.replaceAll("$3", "");
   }
   return devNum;
 
 }
 
-function deviceNumberOnProcess(devNum){
-  if(devNum.includes("/")){
+function deviceNumberOnProcess(devNum) {
+  if (devNum.includes("/")) {
     tags = devNum.split("/");
     buildingTag = tags[1];
     buildingTag = buildingTagOnProcess(buildingTag);
-    devNum = tags[0] + "/" + buildingTag + "/" + tags.slice(2,tags.length).join("/")
+    devNum = tags[0] + "/" + buildingTag + "/" + tags.slice(2, tags.length).join("/")
   }
   return devNum;
 
+}
+
+function convertToBase64(imagePath, callback) {
+  // 創建一個新的 FileReader 物件
+  const reader = new FileReader();
+
+  // 當 FileReader 讀取完成時的處理函數
+  reader.onloadend = () => {
+    if (typeof callback === 'function') {
+      // 從 result 中獲取 base64 編碼的圖像數據
+      const base64String = reader.result.split(',')[1];
+      callback(base64String);
+    }
+  };
+
+  // 讀取圖像文件
+  fetch(imagePath)
+    .then((response) => response.blob())
+    .then((blob) => reader.readAsDataURL(blob))
+    .catch((error) => console.error('Error:', error));
 }
\ No newline at end of file