From fa81c4df0fc45b461f2c31751135cb19f59994ac Mon Sep 17 00:00:00 2001
From: Celeste <aafree2014@gmail.com>
Date: Fri, 13 Oct 2023 11:38:16 +0800
Subject: [PATCH] =?UTF-8?q?[Frontend]=20=E4=BF=AE=E6=94=B9=E9=A6=96?=
 =?UTF-8?q?=E9=A0=81=E7=B3=BB=E7=B5=B1=E7=95=B0=E5=B8=B8=E9=96=83=E7=88=8D?=
 =?UTF-8?q?=E6=A2=9D=E4=BB=B6(=E8=B7=9F=E9=9A=A8=E6=A3=9F=E5=88=A5)=20|=20?=
 =?UTF-8?q?=E7=95=B0=E5=B8=B8=E7=B6=AD=E4=BF=AE=E5=90=8D=E7=A8=B1=E6=AC=84?=
 =?UTF-8?q?=E4=BD=8D=20undefined=20=E4=BF=AE=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 Frontend/_alert.html          | 3054 ++++++++++-----------
 Frontend/_operation.html      | 4595 ++++++++++++++++----------------
 Frontend/index.html           | 4717 ++++++++++++++++-----------------
 Frontend/js/n4js/alarmbaja.js |   15 +-
 4 files changed, 6202 insertions(+), 6179 deletions(-)

diff --git a/Frontend/_alert.html b/Frontend/_alert.html
index e6c1faf..01bdd89 100644
--- a/Frontend/_alert.html
+++ b/Frontend/_alert.html
@@ -1,1605 +1,1621 @@
 <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>
-
-						<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 id="alr_subList" 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>
+	<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 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 id="alr_subList" 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>
 		</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>
+	 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="inpNumber">表單編號</label>
+								<input type="text"
+									   id="inpNumber"
+									   name=""
+									   class="form-control"
+									   disabled />
+							</div>
 						</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="inpNumber">表單編號</label>
-																<input type="text"
-																							id="inpNumber"
-																							name=""
-																							class="form-control"
-																							disabled />
-														</div>
-												</div>
-												<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 position-relative">
-																<label class="form-label" for="inpFixDoCode">維修項目代碼(設備名稱)</label>
-																<select id="inpFixDoCode"
-																								name="inpFixDoCode"
-																								class="form-control position-absolute"
-																								style="z-index: 999; background-color: #3f4246"
-																								onfocus="this.size=15;"
-																								onblur="this.size=1;"
-																								onchange="this.size=1; this.blur();">
-																		<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="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 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 position-relative">
+								<label class="form-label" for="inpFixDoCode">維修項目代碼(設備名稱)</label>
+								<select id="inpFixDoCode"
+										name="inpFixDoCode"
+										class="form-control position-absolute"
+										style="z-index: 999; background-color: #3f4246"
+										onfocus="this.size=15;"
+										onblur="this.size=1;"
+										onchange="this.size=1; this.blur();">
+									<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 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 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>
-						</form>
+								<div class="fallback">
+									<input name="file" type="file" multiple />
+								</div>
+							</div>
+						</div>
+					</div>
 				</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>
+	 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>
-						<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="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 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 class="modal-footer">
-										<button type="button"
-																		class="btn btn-secondary"
-																		id="alr_OpeRecCanBtn_2"
-																		data-dismiss="modal">
-												關閉
-										</button>
+							</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>
-						</form>
+								<div class="fallback">
+									<input name="file" type="file" multiple disabled />
+								</div>
+							</div>
+						</div>
+					</div>
 				</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();
-
-								pageAct.SysType = null;
-						});
-
-				$("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();
-								//});
-
-								if (pageAct.SysType == "all") {
-										if ($(this).is(":checked")) {
-												$(this).prop("checked", true);
-												$(this).click();
-										}
-								}
-								pageAct.selAllSysSub = false;
-
-								$("#selAllSys").html("全選類別");
-
-								pageAct.SysType = null;
-								getData();
+		$("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();
 
-				//$('#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');
+				pageAct.SysType = null;
+			});
 
-				//	$('a[data-type=alr_sub]').parent().parent().find('a').removeClass('btn-info');
-				//	$('a[data-type=alr_sub]').parent().parent().find('a').addClass('btn-secondary');
+		$("input[type=checkbox][data-type=sub]").on("click", function (e) {
+			if (!pageAct.selAllSysSub) {
+				// console.log(this);
+				pageAct.selAllSysSub = true;
 
-				//	pageAct.SysType = null;
+				//$.each($('input[type=checkbox][data-type=sub]:checked'), function (i, v) {
+				//	$(v).click();
 				//});
 
-				//$('#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');
+				if (pageAct.SysType == "all") {
+					if ($(this).is(":checked")) {
+						$(this).prop("checked", true);
+						$(this).click();
+					}
+				}
+				pageAct.selAllSysSub = false;
 
-				//	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);
-				//	}
+				$("#selAllSys").html("全選類別");
 
-				//	$(this).parent().parent().find('a').removeClass('btn-info');
-				//	$(this).parent().parent().find('a').addClass('btn-secondary');
-				//	$(this).addClass('btn-info');
-
-				//	pageAct.SysType = null;
-				//	getData();
-				//});
+				pageAct.SysType = null;
 				getData();
-				first = false;
+			}
 		});
 
-		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));
+		//$('#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');
 
-						pageAct.alr_startdate = $("#alr_startdate").val();
-						pageAct.alr_enddate = $("#alr_enddate").val();
-						pageAct.SysType = "all";
+		//	$('a[data-type=alr_sub]').parent().parent().find('a').removeClass('btn-info');
+		//	$('a[data-type=alr_sub]').parent().parent().find('a').addClass('btn-secondary');
 
-						if (!first) getData();
-						else selAllSysVal($("#selAllSys"));
-						// getData();
-				});
+		//	pageAct.SysType = null;
+		//});
 
-				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");
-								}
+		//$('#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');
 
-								$("#alr_startdate").data("val", $("#alr_startdate").val());
-								$("#alr_enddate").data("val", $("#alr_enddate").val());
-						}
+		//	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.alr_startdate = $("#alr_startdate").val();
-						pageAct.alr_enddate = $("#alr_enddate").val();
-						getData();
-				});
+		//	$(this).parent().parent().find('a').removeClass('btn-info');
+		//	$(this).parent().parent().find('a').addClass('btn-secondary');
+		//	$(this).addClass('btn-info');
 
-				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);
-				});
+		//	pageAct.SysType = null;
+		//	getData();
+		//});
+		getData();
+		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();
-						$("#inpFixDo").val(alr_tableData.msgText);
-						$("#inpErrCode").html(
-        `<option value = ${alr_tableData.uuid.$val}>${alr_tableData.uuid.$val.split("-")[0]
-								}</option>`
-						);
-						$("#inpStaTime").val(
-								displayDate(new Date(Date.now()), "date").replaceAll("/", "-")
-						);
+	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));
 
-						let deviceNumber = null;
-						let system = $(this).data("realsystem");
-						pageAct.addSelMain = system.split("-")[0];
-						pageAct.addSelSub = system.split("-")[1];
-						pageAct.floor = alr_tableData.buildingFloorName_zh.split("-")[1];
+			pageAct.alr_startdate = $("#alr_startdate").val();
+			pageAct.alr_enddate = $("#alr_enddate").val();
+			pageAct.SysType = "all";
 
-						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];
+			if (!first) getData();
+			else selAllSysVal($("#selAllSys"));
+			// getData();
+		});
 
-						GetFormId();
-						selUser();
-						selDevice(alr_tableData);
-						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 },
-										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", "台北" + 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()) || null);
-								fd.append("fix_do", $("#inpFixDo").val() || null);
-								fd.append("fix_do_code", $("#inpFixDoCode").val() || null);
-								fd.append("fix_firm", parseInt($("#inpFixFirm").val()) || null);
-								fd.append("status", parseInt($("#inpStatus").val()) || null);
-								fd.append("work_person_id", $("#inpWorPerId").val() || null);
-								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");
+		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 {
-						$("#returnTrue").removeClass("btn-secondary");
-						$("#returnTrue").addClass("btn-info");
-						$("#returnFalse").addClass("btn-secondary");
+					$("#nearthirty").removeClass("btn-info");
+					$("#nearthirty").addClass("btn-secondary");
 				}
 
-				if (!first) getData();
-		}
+				$("#alr_startdate").data("val", $("#alr_startdate").val());
+				$("#alr_enddate").data("val", $("#alr_enddate").val());
+			}
 
-		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();
-		}
+			pageAct.alr_startdate = $("#alr_startdate").val();
+			pageAct.alr_enddate = $("#alr_enddate").val();
+			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");
-				}
-		}
+		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();
+			$("#inpFixDo").val(alr_tableData.msgText);
+			$("#inpErrCode").html(
+				`<option value = ${alr_tableData.uuid.$val}>${alr_tableData.uuid.$val.split("-")[0]
+				}</option>`
+			);
+			$("#inpStaTime").val(
+				displayDate(new Date(Date.now()), "date").replaceAll("/", "-")
+			);
+
+			let deviceNumber = null;
+			let system = $(this).data("realsystem");
+			pageAct.addSelMain = system.split("-")[0];
+			pageAct.addSelSub = system.split("-")[1];
+			pageAct.floor = alr_tableData.buildingFloorName_zh.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];
+
+			GetFormId();
+			selUser();
+			selDevice({
+				sourceName_zh: $(this).data("devicenumber"),
+			});
+			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 },
+					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", "台北" + 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()) || null);
+				fd.append("fix_do", $("#inpFixDo").val() || null);
+				fd.append("fix_do_code", $("#inpFixDoCode").val() || null);
+				fd.append("fix_firm", parseInt($("#inpFixFirm").val()) || null);
+				fd.append("status", parseInt($("#inpStatus").val()) || null);
+				fd.append("work_person_id", $("#inpWorPerId").val() || null);
+				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 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">
-									<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);
-								}
-
-								$.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);
-
-										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="Sys">
-									<input type="checkbox" class="custom-control-input" data-type="sub" id="Con">
-									<label class="custom-control-label" for="Con">系統通訊</label>
-								</div>`;
-						if (pageAct.mainStatus) {
-								$("#alr_mainList").html(mainStrHtml);
-								$("#alr_subList").html(subStrHtml);
-								$("input[data-type=main][id=" + firstMain + "]").click();
+				$.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 {
-								$("#alr_mainList").html(subStrHtml);
+							//toast_ok(common.AddSuc);
+							//$("#opeFirmModal").modal("hide");
+							$("#alr_OpeRecCanBtn").click();
+							getData();
 						}
-						// $('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();
-								}
-						});
-						$("#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;
-				}
-
-				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();
-
-				// 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") {
-										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");
-				// }
-		}
-
-		function stackData(res) {
-				res.data.forEach((v) => {
-						dataAlarm.push(v);
+					},
 				});
-				index++;
 
-				if (elemIndex == index) callBackFromOneDeviceAlert(dataAlarm);
+				//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 {
+			$("#returnTrue").removeClass("btn-secondary");
+			$("#returnTrue").addClass("btn-info");
+			$("#returnFalse").addClass("btn-secondary");
 		}
 
-		function callBackFromAllDeviceAlert(res) {
-				AlertList(res.data);
+		if (!first) getData();
+	}
 
-				if (historyTable != null) {
-						let t = $("#alertTable").dataTable();
+	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();
+	}
 
-						t.fnClearTable();
-						if (res.data.length > 0) t.fnAddData(res.data);
+	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">
+																  <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);
 				}
+
+				$.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);
+
+					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="Sys">
+																  <input type="checkbox" class="custom-control-input" data-type="sub" id="Con">
+																  <label class="custom-control-label" for="Con">系統通訊</label>
+														  </div>`;
+			if (pageAct.mainStatus) {
+				$("#alr_mainList").html(mainStrHtml);
+				$("#alr_subList").html(subStrHtml);
+				$("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 callBackFromOneDeviceAlert(res) {
-				AlertList(res);
-
-				if (historyTable != null) {
-						let t = $("#alertTable").dataTable();
-
-						t.fnClearTable();
-						if (res.length > 0) t.fnAddData(res);
+	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;
 		}
 
+		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();
+
+		// 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") {
+					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");
+		// }
+	}
+
+	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 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 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, type, row) {
-										const building_name = pageAct.buildList.find(
-												({ building_tag }) => building_tag === data.split("_")[1]
-										)?.full_name;
+		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, type, row) {
+					const building_name = pageAct.buildList.find(
+						({ building_tag }) => building_tag === data.split("_")[1]
+					)?.full_name;
 
-										return (
-												allDevices.find((d) => d.device_number === data)?.full_name ||
-												(row.alarmClass === "Sys_Con_AlarmClass"
-														? `${building_name}_電錶邊緣控制器_${data.split("_")[7]}`
-														: "")
-										);
-								},
-						},
-						{
-								title: "設備編號",
-								data: "sourceTmp",
-						},
-						{
-								title: "發生時間",
-								data: "timestamp",
-								render: function (data) {
-                                    return displayDate(data);
-								},
-						},
-						{
-								title: "異常原因",
-								data: "msgText",
-						},
-						{
-								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>${displayDate(row.ackedTime)}</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
-												}' data-realsystem='${row.sourceName_zh.split("_")[2] +
-												"-" +
-												row.sourceName_zh.split("_")[3]
-												}'>+ 維修單</a></td>`;
-								},
-						},
-				];
+					return (
+						allDevices.find((d) => d.device_number === data)?.full_name ||
+						(row.alarmClass === "Sys_Con_AlarmClass"
+							? `${building_name}_電錶邊緣控制器_${data.split("_")[7]}`
+							: "")
+					);
+				},
+			},
+			{
+				title: "設備編號",
+				data: "sourceTmp",
+			},
+			{
+				title: "發生時間",
+				data: "timestamp",
+				render: function (data) {
+					return displayDate(data);
+				},
+			},
+			{
+				title: "異常原因",
+				data: "msgText",
+			},
+			{
+				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>${displayDate(
+							row.ackedTime
+						)}</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-devicenumber="${row.sourceName_zh}">${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
+						}' data-realsystem='${row.sourceName_zh.split("_")[2] +
+						"-" +
+						row.sourceName_zh.split("_")[3]
+						}' data-devicenumber="${row.sourceName_zh}">+ 維修單</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");
-		}
+		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;
-										});
-										refTable(data);
-								}
-						},
-						null,
-						"POST"
-				).send();
-		}
-
-		function selDevice(alr_tableData = null) {
-				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) {
-								} else {
-										$("#inpFixDoCode").html();
-										$("#alr_inpFixDoCode_2").html();
-
-          let strHtml = ""
-
-          if (alr_tableData) {
-												const currentDevice = res.data.find(({ device_number }) => device_number === alr_tableData.sourceName_zh);
-            strHtml += `<option value='${currentDevice.sourceName_zh}' data-floor=${currentDevice.device_floor_tag} data-main=${currentDevice.device_system_tag} data-sub=${currentDevice.device_name_tag} hidden>${currentDevice.device_name}</option>`;
-          }         
-
-          $.each(res.data.filter(({ device_number }) => device_number !== alr_tableData?.sourceName_zh), (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>`;
-
-												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();
-		}
-
-		function selUser() {
-				let url = baseApiUrl + "/User/UserManagerList";
-				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();
-		}
-
-		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 {
-										$("#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();
-		}
-
-		//上傳檔案 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 = [];
-
-								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"),
-												});
-										}
-								} 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>"
-										);
-
-										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"),
-												});
-										}
-								}
-						},
-				});
-		}
-
-		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
-														);
-												}
-										});
-								}
-						},
-						null,
-						"POST"
-				).send();
+	function AlertList(data) {
+		objSendData.Data = [];
+		$.each(data, function (i, v) {
+			objSendData.Data.push({ uuid: v.uuid.$val || v.uuid });
 		});
 
-		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");
-		}
+		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();
+	}
 
-		function callbackForErr(res) {
-				res = JSON.parse(res);
-				strHtml = ``;
+	function selDevice(alr_tableData = null) {
+		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) {
+				} else {
+					$("#inpFixDoCode").html();
+					$("#alr_inpFixDoCode_2").html();
 
-				$.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>`;
-				});
+					let strHtml = "";
+					console.log("@alr_tableData", alr_tableData);
+					if (alr_tableData) {
+						const currentDevice = res.data.find(
+							({ device_number }) =>
+								device_number === alr_tableData.sourceName_zh
+						);
+						strHtml += `<option value='${currentDevice.device_number}' data-floor=${currentDevice.device_floor_tag} data-main=${currentDevice.device_system_tag} data-sub=${currentDevice.device_name_tag} hidden>${currentDevice.device_name}</option>`;
+					}
 
-				if (res.count > 0) $("#alr_inpErrCode_2").html(strHtml);
+					$.each(
+						res.data.filter(
+							({ device_number }) =>
+								device_number !== alr_tableData?.sourceName_zh
+						),
+						(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>`;
 
-				$(loadEle).Loading("close");
-		}
+							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();
+	}
 
-		function GetFormId() {
-				let url = baseApiUrl + "/operation/GetFormId";
+	function selUser() {
+		let url = baseApiUrl + "/User/UserManagerList";
+		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();
+	}
 
-				ytAjax = new YourTeam.Ajax(
-						url,
-						objSendData,
-						function (res) {
-								if (!res || res.code != "0000" || !res.data) {
-								} else {
-										$("#inpNumber").val(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 {
+					$("#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();
+	}
+
+	//上傳檔案 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 = [];
+
+				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"),
+						});
+					}
+				} 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>"
+					);
+
+					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"),
+						});
+					}
+				}
+			},
+		});
+	}
+
+	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 {
+					const deviceNumber = $(this).data("devicenumber");
+					console.log("@", $(this), deviceNumber);
+					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({
+						sourceName_zh: deviceNumber,
+					});
+					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,
 								}
-						},
-						null,
-						"POST"
-				).send();
-		}
+							);
+							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();
+	});
+
+	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 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");
+	}
+
+	function GetFormId() {
+		let url = baseApiUrl + "/operation/GetFormId";
+
+		ytAjax = new YourTeam.Ajax(
+			url,
+			objSendData,
+			function (res) {
+				if (!res || res.code != "0000" || !res.data) {
+				} else {
+					$("#inpNumber").val(res.data);
+				}
+			},
+			null,
+			"POST"
+		).send();
+	}
 </script>
diff --git a/Frontend/_operation.html b/Frontend/_operation.html
index 464f10c..d45cb85 100644
--- a/Frontend/_operation.html
+++ b/Frontend/_operation.html
@@ -1,2056 +1,2068 @@
 <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 type="button"
-								onclick="setType(2)"
-								class="btn btn-secondary waves-effect waves-themed">
-							維修
-						</button>
-						<button type="button"
-								onclick="setType(1)"
-								class="btn btn-secondary waves-effect waves-themed">
-							保養記錄
-						</button>
-						<button type="button"
-								onclick="setType(null)"
-								class="btn btn-secondary waves-effect waves-themed">
-							廠商資料
-						</button>
-					</div>
-				</div>
-				<div id="setDate" class="col-auto">
-					<div class="btn-group">
-						<button onclick="setDate('tdy')"
-								type="button"
-								class="btn btn-secondary waves-effect waves-themed">
-							今天
-						</button>
-						<button onclick="setDate('ytd')"
-								type="button"
-								class="btn btn-secondary waves-effect waves-themed">
-							昨天
-						</button>
-					</div>
-				</div>
-				<div class="col-auto">
-					<div class="form-group">
-						<input class="form-control"
-							   id="startdate"
-							   data-val=""
-							   type="date"
-							   name="date"
-							   value="" />
-					</div>
-				</div>
-				<div class="col-auto">
-					<div class="form-group">
-						<input class="form-control"
-							   id="enddate"
-							   type="date"
-							   data-val=""
-							   name="date"
-							   value="" />
-					</div>
-				</div>
-				<div class="col-auto" style="display: none">
-					<div class="form-group">
-						<input type="text"
-							   id="serial_number"
-							   class="form-control"
-							   placeholder="表單號" />
-					</div>
-				</div>
-				<div class="col-auto" style="display: none">
-					<a href="#"
-					   for="serial_number"
-					   onclick="snSearch()"
-					   class="btn btn-info">單號查詢</a>
-				</div>
-				<hr />
-			</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="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="subList" class="frame-wrap"></div>
-				</div>
-			</div>
+		<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 type="button"
+																				onclick="setType(2)"
+																				class="btn btn-secondary waves-effect waves-themed">
+														維修
+												</button>
+												<button type="button"
+																				onclick="setType(1)"
+																				class="btn btn-secondary waves-effect waves-themed">
+														保養記錄
+												</button>
+												<button type="button"
+																				onclick="setType(null)"
+																				class="btn btn-secondary waves-effect waves-themed">
+														廠商資料
+												</button>
+										</div>
+								</div>
+								<div id="setDate" class="col-auto">
+										<div class="btn-group">
+												<button onclick="setDate('tdy')"
+																				type="button"
+																				class="btn btn-secondary waves-effect waves-themed">
+														今天
+												</button>
+												<button onclick="setDate('ytd')"
+																				type="button"
+																				class="btn btn-secondary waves-effect waves-themed">
+														昨天
+												</button>
+										</div>
+								</div>
+								<div class="col-auto">
+										<div class="form-group">
+												<input class="form-control"
+																			id="startdate"
+																			data-val=""
+																			type="date"
+																			name="date"
+																			value="" />
+										</div>
+								</div>
+								<div class="col-auto">
+										<div class="form-group">
+												<input class="form-control"
+																			id="enddate"
+																			type="date"
+																			data-val=""
+																			name="date"
+																			value="" />
+										</div>
+								</div>
+								<div class="col-auto" style="display: none">
+										<div class="form-group">
+												<input type="text"
+																			id="serial_number"
+																			class="form-control"
+																			placeholder="表單號" />
+										</div>
+								</div>
+								<div class="col-auto" style="display: none">
+										<a href="#"
+													for="serial_number"
+													onclick="snSearch()"
+													class="btn btn-info">單號查詢</a>
+								</div>
+								<hr />
+						</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="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="subList" class="frame-wrap"></div>
+								</div>
+						</div>
 
-			<div class="">
-				<div class="frame-wrap">
-					<div class="mb-3">
-						<a href="#"
-						   id="newForm"
-						   class="btn btn-success"
-						   data-toggle="modal"
-						   data-target="#opeFirmModal">新增</a>
-						<a href="#"
-						   onclick="exportExcel()"
-						   class="btn btn-info waves-effect waves-themed"
-						   hidden>
-							<span class="fal fa-file-excel mr-1"></span>
-							<span>匯出</span>
-						</a>
-					</div>
-					<table id="opeFirmTable"
-						   class="table table-bordered table-striped text-center m-0 w-100"></table>
-					<table id="opeRecTable_2"
-						   class="table table-bordered table-striped text-center m-0 w-100"></table>
-					<table id="opeRecTable"
-						   class="table table-bordered table-striped text-center m-0 w-100"></table>
+						<div class="">
+								<div class="frame-wrap">
+										<div class="mb-3">
+												<a href="#"
+															id="newForm"
+															class="btn btn-success"
+															data-toggle="modal"
+															data-target="#opeFirmModal">新增</a>
+												<a href="#"
+															onclick="exportExcel()"
+															class="btn btn-info waves-effect waves-themed"
+															hidden>
+														<span class="fal fa-file-excel mr-1"></span>
+														<span>匯出</span>
+												</a>
+										</div>
+										<table id="opeFirmTable"
+																	class="table table-bordered table-striped text-center m-0 w-100"></table>
+										<table id="opeRecTable_2"
+																	class="table table-bordered table-striped text-center m-0 w-100"></table>
+										<table id="opeRecTable"
+																	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="opeFirmModal"
-	 tabindex="-1"
-	 role="dialog"
-	 aria-hidden="true"
-	 data-backdrop="static"
-	 data-keyboard="false">
-	<div class="modal-dialog modal-dialog-centered" role="document">
-		<div class="modal-content">
-			<div class="modal-header">
-				<h4 id="opeFirmTitle" 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="opeFirmForm">
-				<div class="modal-body">
-					<div class="row">
-						<div class="col-md-6">
-							<div class="form-group">
-								<label class="form-label" for="inpFirmSelSysMain">系統大類</label>
-								<select class="form-control"
-										id="inpFirmSelSysMain"
-										name="inpFirmSelSysMain"></select>
-							</div>
+					id="opeFirmModal"
+					tabindex="-1"
+					role="dialog"
+					aria-hidden="true"
+					data-backdrop="static"
+					data-keyboard="false">
+		<div class="modal-dialog modal-dialog-centered" role="document">
+				<div class="modal-content">
+						<div class="modal-header">
+								<h4 id="opeFirmTitle" 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="inpFirmSelSysSub">系統小類</label>
-								<select class="form-control"
-										id="inpFirmSelSysSub"
-										name="inpFirmSelSysSub">
-									<option value="">未選擇</option>
-								</select>
-							</div>
-						</div>
-						<div class="col-md-6">
-							<div class="form-group">
-								<label class="form-label" for="inpName">姓名</label>
-								<input type="text"
-									   id="inpName"
-									   name="inpName"
-									   class="form-control" />
-							</div>
-						</div>
-						<div class="col-md-6">
-							<div class="form-group">
-								<label class="form-label" for="inpConPer">聯絡人</label>
-								<input type="text"
-									   id="inpConPer"
-									   name="inpConPer"
-									   class="form-control" />
-							</div>
-						</div>
-						<div class="col-md-6">
-							<div class="form-group">
-								<label class="form-label" for="inpPhone">電話</label>
-								<input type="text"
-									   id="inpPhone"
-									   name="inpPhone"
-									   class="form-control" />
-							</div>
-						</div>
-						<div class="col-md-6">
-							<div class="form-group">
-								<label class="form-label" for="inpEmail">Email</label>
-								<input type="email"
-									   id="inpEmail"
-									   name="inpEmail"
-									   class="form-control" />
-							</div>
-						</div>
-						<div class="col-md-6">
-							<div class="form-group">
-								<label class="form-label" for="inpTaxIdNum">統一編號</label>
-								<input type="text"
-									   id="inpTaxIdNum"
-									   name="inpTaxIdNum"
-									   maxlength="8"
-									   class="form-control" />
-							</div>
-						</div>
-						<div class="col-md-6">
-							<div class="form-group">
-								<label class="form-label" for="inpRemark">備注</label>
-								<input type="text"
-									   id="inpRemark"
-									   name="inpRemark"
-									   class="form-control" />
-							</div>
-						</div>
-					</div>
+						<form id="opeFirmForm">
+								<div class="modal-body">
+										<div class="row">
+												<div class="col-md-6">
+														<div class="form-group">
+																<label class="form-label" for="inpFirmSelSysMain">系統大類</label>
+																<select class="form-control"
+																								id="inpFirmSelSysMain"
+																								name="inpFirmSelSysMain"></select>
+														</div>
+												</div>
+												<div class="col-md-6">
+														<div class="form-group">
+																<label class="form-label" for="inpFirmSelSysSub">系統小類</label>
+																<select class="form-control"
+																								id="inpFirmSelSysSub"
+																								name="inpFirmSelSysSub">
+																		<option value="">未選擇</option>
+																</select>
+														</div>
+												</div>
+												<div class="col-md-6">
+														<div class="form-group">
+																<label class="form-label" for="inpName">姓名</label>
+																<input type="text"
+																							id="inpName"
+																							name="inpName"
+																							class="form-control" />
+														</div>
+												</div>
+												<div class="col-md-6">
+														<div class="form-group">
+																<label class="form-label" for="inpConPer">聯絡人</label>
+																<input type="text"
+																							id="inpConPer"
+																							name="inpConPer"
+																							class="form-control" />
+														</div>
+												</div>
+												<div class="col-md-6">
+														<div class="form-group">
+																<label class="form-label" for="inpPhone">電話</label>
+																<input type="text"
+																							id="inpPhone"
+																							name="inpPhone"
+																							class="form-control" />
+														</div>
+												</div>
+												<div class="col-md-6">
+														<div class="form-group">
+																<label class="form-label" for="inpEmail">Email</label>
+																<input type="email"
+																							id="inpEmail"
+																							name="inpEmail"
+																							class="form-control" />
+														</div>
+												</div>
+												<div class="col-md-6">
+														<div class="form-group">
+																<label class="form-label" for="inpTaxIdNum">統一編號</label>
+																<input type="text"
+																							id="inpTaxIdNum"
+																							name="inpTaxIdNum"
+																							maxlength="8"
+																							class="form-control" />
+														</div>
+												</div>
+												<div class="col-md-6">
+														<div class="form-group">
+																<label class="form-label" for="inpRemark">備注</label>
+																<input type="text"
+																							id="inpRemark"
+																							name="inpRemark"
+																							class="form-control" />
+														</div>
+												</div>
+										</div>
+								</div>
+								<div class="modal-footer">
+										<button type="button"
+																		class="btn btn-secondary"
+																		id="OpeFirmCanBtn"
+																		data-dismiss="modal">
+												關閉
+										</button>
+										<button type="button"
+																		class="btn btn-primary"
+																		id="OpeFirmSendBtn"
+																		e-prevent>
+												儲存
+										</button>
+								</div>
+						</form>
 				</div>
-				<div class="modal-footer">
-					<button type="button"
-							class="btn btn-secondary"
-							id="OpeFirmCanBtn"
-							data-dismiss="modal">
-						關閉
-					</button>
-					<button type="button"
-							class="btn btn-primary"
-							id="OpeFirmSendBtn"
-							e-prevent>
-						儲存
-					</button>
-				</div>
-			</form>
 		</div>
-	</div>
 </div>
 
 <!-- Modal center 維修-->
 <div class="modal fade"
-	 id="opeRecModal_2"
-	 tabindex="-1"
-	 role="dialog"
-	 aria-hidden="true"
-	 data-backdrop="static"
-	 data-keyboard="false">
-	<div class="modal-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="opeRecForm_2">
-				<div class="modal-body">
-					<div class="row">
-						<div class="col-md-6">
-							<div class="form-group">
-								<label class="form-label" for="inpNumber_2">表單編號</label>
-								<input type="text"
-									   id="inpNumber_2"
-									   name=""
-									   class="form-control"
-									   disabled />
-							</div>
+					id="opeRecModal_2"
+					tabindex="-1"
+					role="dialog"
+					aria-hidden="true"
+					data-backdrop="static"
+					data-keyboard="false">
+		<div class="modal-dialog modal-dialog-centered" role="document">
+				<div class="modal-content">
+						<div class="modal-header">
+								<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="inpErrCode_2">異常編號</label>
-								<select class="form-control"
-										id="inpErrCode_2"
-										name="inpErrCode_2">
-									<option value="">未選擇</option>
-								</select>
-							</div>
-						</div>
-						<div class="col-md-6">
-							<div class="form-group">
-								<label class="form-label" for="inpStaTime_2">預計開始時間</label>
-								<input type="date"
-									   id="inpStaTime_2"
-									   name="inpStaTime_2"
-									   class="form-control" />
-							</div>
-						</div>
-						<div class="col-md-6">
-							<div class="form-group">
-								<label class="form-label" for="inpWorTyp_2">項目</label>
-								<select class="form-control custom-select-ri"
-										id="inpWorTyp_2"
-										name="inpWorTyp_2"
-										disabled>
-									<option value="1" selected>保養</option>
-									<option value="2">維修</option>
-								</select>
-							</div>
-						</div>
-						<div class="col-md-6">
-							<div class="form-group">
-								<label class="form-label" for="inpFixDo_2">維修項目</label>
-								<input type="text"
-									   id="inpFixDo_2"
-									   name="inpFixDo_2"
-									   class="form-control" />
-							</div>
-						</div>
-						<div class="col-md-6">
-							<div class="form-group position-relative">
-								<label class="form-label" for="inpFixDoCode_2">維修項目代碼(設備名稱)</label>
-								<select onfocus="this.size=15;"
-										onblur="this.size=1;"
-										onchange="this.size=1; this.blur();"
-										id="inpFixDoCode_2"
-										name="inpFixDoCode_2"
-										class="form-control position-absolute"
-										style="z-index: 999; background-color: #3f4246">
-									<option value="">未選擇</option>
-								</select>
-							</div>
-						</div>
-						<div class="col-md-6">
-							<div class="form-group">
-								<label class="form-label" for="inpFixFirm_2">負責廠商</label>
-								<select class="form-control"
-										id="inpFixFirm_2"
-										name="inpFixFirm_2">
-									<option value="">未選擇</option>
-								</select>
-							</div>
-						</div>
-						<div class="col-md-6">
-							<div class="form-group">
-								<label class="form-label" for="inpStatus_2">狀態</label>
-								<div class="form-control" id="inpStatus_2">
-									<div class="row container">
-										<div class="">
-											<input class="custom-radio-input"
-												   type="radio"
-												   name="inpSta_2"
-												   id="inpSta_2_0"
-												   value="0"
-												   data-value="0"
-												   checked />
-											<label class="form-label" for="inpSta_0">未完成</label>
-										</div>
+						<form id="opeRecForm_2">
+								<div class="modal-body">
+										<div class="row">
+												<div class="col-md-6">
+														<div class="form-group">
+																<label class="form-label" for="inpNumber_2">表單編號</label>
+																<input type="text"
+																							id="inpNumber_2"
+																							name=""
+																							class="form-control"
+																							disabled />
+														</div>
+												</div>
+												<div class="col-md-6">
+														<div class="form-group">
+																<label class="form-label" for="inpErrCode_2">異常編號</label>
+																<!--<select class="form-control"
+																		id="inpErrCode_2"
+																		name="inpErrCode_2">
+																	<option value="">未選擇</option>
+																</select>-->
+																<input type="text"
+																							id="inpErrCode_2"
+																							name="inpErrCode_2"
+																							class="form-control" />
+														</div>
+												</div>
+												<div class="col-md-6">
+														<div class="form-group">
+																<label class="form-label" for="inpStaTime_2">預計開始時間</label>
+																<input type="date"
+																							id="inpStaTime_2"
+																							name="inpStaTime_2"
+																							class="form-control" />
+														</div>
+												</div>
+												<div class="col-md-6">
+														<div class="form-group">
+																<label class="form-label" for="inpWorTyp_2">項目</label>
+																<select class="form-control custom-select-ri"
+																								id="inpWorTyp_2"
+																								name="inpWorTyp_2"
+																								disabled>
+																		<option value="1" selected>保養</option>
+																		<option value="2">維修</option>
+																</select>
+														</div>
+												</div>
+												<div class="col-md-6">
+														<div class="form-group">
+																<label class="form-label" for="inpFixDo_2">維修項目</label>
+																<input type="text"
+																							id="inpFixDo_2"
+																							name="inpFixDo_2"
+																							class="form-control" />
+														</div>
+												</div>
+												<div class="col-md-6">
+														<div class="form-group position-relative">
+																<label class="form-label" for="inpFixDoCode_2">維修項目代碼(設備名稱)</label>
+																<select onfocus="this.size=15;"
+																								onblur="this.size=1;"
+																								onchange="this.size=1; this.blur();"
+																								id="inpFixDoCode_2"
+																								name="inpFixDoCode_2"
+																								class="form-control position-absolute"
+																								style="z-index: 999; background-color: #3f4246">
+																		<option value="">未選擇</option>
+																</select>
+														</div>
+												</div>
+												<div class="col-md-6">
+														<div class="form-group">
+																<label class="form-label" for="inpFixFirm_2">負責廠商</label>
+																<select class="form-control"
+																								id="inpFixFirm_2"
+																								name="inpFixFirm_2">
+																		<option value="">未選擇</option>
+																</select>
+														</div>
+												</div>
+												<div class="col-md-6">
+														<div class="form-group">
+																<label class="form-label" for="inpStatus_2">狀態</label>
+																<div class="form-control" id="inpStatus_2">
+																		<div class="row container">
+																				<div class="">
+																						<input class="custom-radio-input"
+																													type="radio"
+																													name="inpSta_2"
+																													id="inpSta_2_0"
+																													value="0"
+																													data-value="0"
+																													checked />
+																						<label class="form-label" for="inpSta_0">未完成</label>
+																				</div>
 
-										<div class="px-4">
-											<input class="custom-radio-input"
-												   type="radio"
-												   name="inpSta_2"
-												   id="inpSta_2_1"
-												   value="1"
-												   data-value="1" />
-											<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_2">工作人員編號</label>
-								<select class="form-control"
-										id="inpWorPerId_2"
-										name="inpWorPerId_2">
-									<option value="">未選擇</option>
-								</select>
-							</div>
-						</div>
-						<div class="col-md-12">
-							<div class="form-group">
-								<label class="form-label" for="inpNotice_2">注意事項</label>
-								<textarea class="form-control"
-										  type="text"
-										  id="inpNotice_2"
-										  name="inpNotice_2"
-										  rows="7"></textarea>
-							</div>
-						</div>
-						<div class="col-md-12">
-							<div class="form-group">
-								<label class="form-label" for="inpDescription_2">結果描述</label>
-								<textarea class="form-control"
-										  type="text"
-										  id="inpDescription_2"
-										  name="inpDescription_2"
-										  rows="7"></textarea>
-							</div>
-						</div>
-						<div class="col-md-12">
-							<label class="form-label">上傳檔案</label>
-							<div id="ope_forImage_2"
-								 class="col-sm-12 forimage mt-2 p-0"></div>
-							<div id="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="inpSta_2"
+																													id="inpSta_2_1"
+																													value="1"
+																													data-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_2">工作人員編號</label>
+																<select class="form-control"
+																								id="inpWorPerId_2"
+																								name="inpWorPerId_2">
+																		<option value="">未選擇</option>
+																</select>
+														</div>
+												</div>
+												<div class="col-md-12">
+														<div class="form-group">
+																<label class="form-label" for="inpNotice_2">注意事項</label>
+																<textarea class="form-control"
+																										type="text"
+																										id="inpNotice_2"
+																										name="inpNotice_2"
+																										rows="7"></textarea>
+														</div>
+												</div>
+												<div class="col-md-12">
+														<div class="form-group">
+																<label class="form-label" for="inpDescription_2">結果描述</label>
+																<textarea class="form-control"
+																										type="text"
+																										id="inpDescription_2"
+																										name="inpDescription_2"
+																										rows="7"></textarea>
+														</div>
+												</div>
+												<div class="col-md-12">
+														<label class="form-label">上傳檔案</label>
+														<div id="ope_forImage_2"
+																			class="col-sm-12 forimage mt-2 p-0"></div>
+														<div id="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 />
+																</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="OpeRecCanBtn_2"
+																		data-dismiss="modal">
+												關閉
+										</button>
+										<button type="button"
+																		class="btn btn-primary"
+																		id="OpeRecSendBtn_2"
+																		e-prevent>
+												儲存
+										</button>
 								</div>
-							</div>
-						</div>
-					</div>
+						</form>
 				</div>
-				<div class="modal-footer">
-					<button type="button"
-							class="btn btn-secondary"
-							id="OpeRecCanBtn_2"
-							data-dismiss="modal">
-						關閉
-					</button>
-					<button type="button"
-							class="btn btn-primary"
-							id="OpeRecSendBtn_2"
-							e-prevent>
-						儲存
-					</button>
-				</div>
-			</form>
 		</div>
-	</div>
 </div>
 
 <!-- Modal center 保養 -->
 <div class="modal fade"
-	 id="opeRecModal"
-	 tabindex="-1"
-	 role="dialog"
-	 aria-hidden="true"
-	 data-backdrop="static"
-	 data-keyboard="false">
-	<div class="modal-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="opeRecForm">
-				<div class="modal-body">
-					<div class="row">
-						<div class="col-md-6">
-							<div class="form-group">
-								<label class="form-label" for="inpNumber">表單編號</label>
-								<input type="text"
-									   id="inpNumber"
-									   name=""
-									   class="form-control"
-									   disabled />
-							</div>
+					id="opeRecModal"
+					tabindex="-1"
+					role="dialog"
+					aria-hidden="true"
+					data-backdrop="static"
+					data-keyboard="false">
+		<div class="modal-dialog modal-dialog-centered" role="document">
+				<div class="modal-content">
+						<div class="modal-header">
+								<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="1" selected>保養</option>
-									<option value="2">維修</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 position-relative">
-								<label class="form-label" for="inpFixDoCode">維修項目代碼(設備名稱)</label>
-								<select onfocus="this.size=15;"
-										onblur="this.size=1;"
-										onchange="this.size=1; this.blur();"
-										id="inpFixDoCode"
-										name="inpFixDoCode"
-										class="form-control position-absolute"
-										style="z-index: 999; background-color: #3f4246">
-									<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"
-												   data-value="0"
-												   value="0"
-												   checked />
-											<label class="form-label" for="inpSta_0">未完成</label>
-										</div>
+						<form id="opeRecForm">
+								<div class="modal-body">
+										<div class="row">
+												<div class="col-md-6">
+														<div class="form-group">
+																<label class="form-label" for="inpNumber">表單編號</label>
+																<input type="text"
+																							id="inpNumber"
+																							name=""
+																							class="form-control"
+																							disabled />
+														</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="1" selected>保養</option>
+																		<option value="2">維修</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 position-relative">
+																<label class="form-label" for="inpFixDoCode">維修項目代碼(設備名稱)</label>
+																<select onfocus="this.size=15;"
+																								onblur="this.size=1;"
+																								onchange="this.size=1; this.blur();"
+																								id="inpFixDoCode"
+																								name="inpFixDoCode"
+																								class="form-control position-absolute"
+																								style="z-index: 999; background-color: #3f4246">
+																		<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"
+																													data-value="0"
+																													value="0"
+																													checked />
+																						<label class="form-label" for="inpSta_0">未完成</label>
+																				</div>
 
-										<div class="px-4">
-											<input class="custom-radio-input"
-												   type="radio"
-												   name="inpSta"
-												   id="inpSta_1"
-												   data-value="1"
-												   value="1" />
-											<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="ope_forImage" class="col-sm-12 forimage mt-2 p-0"></div>
-							<div id="ope_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"
+																													data-value="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="ope_forImage" class="col-sm-12 forimage mt-2 p-0"></div>
+														<div id="ope_forFile" class="col-sm-12 forfile mt-2 p-0"></div>
 
-							<div class="form-group dropzone" id="ope_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檔案不超過 10MB</p>
+														<div class="form-group dropzone" id="ope_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檔案不超過 10MB</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="OpeRecCanBtn"
+																		data-dismiss="modal">
+												關閉
+										</button>
+										<button type="button"
+																		class="btn btn-primary"
+																		id="OpeRecSendBtn"
+																		e-prevent>
+												儲存
+										</button>
 								</div>
-							</div>
-						</div>
-					</div>
+						</form>
 				</div>
-				<div class="modal-footer">
-					<button type="button"
-							class="btn btn-secondary"
-							id="OpeRecCanBtn"
-							data-dismiss="modal">
-						關閉
-					</button>
-					<button type="button"
-							class="btn btn-primary"
-							id="OpeRecSendBtn"
-							e-prevent>
-						儲存
-					</button>
-				</div>
-			</form>
 		</div>
-	</div>
 </div>
 
 <!-- Modal center 刪除 -->
 <div class="modal fade"
-	 id="delModal"
-	 tabindex="-1"
-	 role="dialog"
-	 aria-hidden="true"
-	 data-backdrop="static"
-	 data-keyboard="false">
-	<div class="modal-dialog modal-dialog-centered" role="document">
-		<div class="modal-content">
-			<div class="modal-header">
-				<h4 class="modal-title">確定刪除這一筆嗎?</h4>
-				<button type="button"
-						class="close"
-						data-dismiss="modal"
-						aria-label="Close">
-					<span aria-hidden="true"><i class="fal fa-times"></i></span>
-				</button>
-			</div>
-			<div class="modal-footer">
-				<button type="button"
-						class="btn btn-secondary"
-						id="confirmDelCanBtn"
-						data-dismiss="modal">
-					關閉
-				</button>
-				<button type="button"
-						class="btn btn-primary"
-						id="confirmDelBtn"
-						e-prevent>
-					儲存
-				</button>
-			</div>
+					id="delModal"
+					tabindex="-1"
+					role="dialog"
+					aria-hidden="true"
+					data-backdrop="static"
+					data-keyboard="false">
+		<div class="modal-dialog modal-dialog-centered" role="document">
+				<div class="modal-content">
+						<div class="modal-header">
+								<h4 class="modal-title">確定刪除這一筆嗎?</h4>
+								<button type="button"
+																class="close"
+																data-dismiss="modal"
+																aria-label="Close">
+										<span aria-hidden="true"><i class="fal fa-times"></i></span>
+								</button>
+						</div>
+						<div class="modal-footer">
+								<button type="button"
+																class="btn btn-secondary"
+																id="confirmDelCanBtn"
+																data-dismiss="modal">
+										關閉
+								</button>
+								<button type="button"
+																class="btn btn-primary"
+																id="confirmDelBtn"
+																e-prevent>
+										儲存
+								</button>
+						</div>
+				</div>
 		</div>
-	</div>
 </div>
 
 <script>
-	var uploader = { ope1: null, ope2: null };
-	$(function () {
-		initDropzone();
-		pageAct.sub_system_tag = null;
-		pageAct.main_system_tag = null;
-		pageAct.selSysSub = [];
-		pageAct.selSysMain = [];
-		pageAct.imageFile = [];
-		let pageInit = true;
-
-		sysList();
-
-		$("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();
-
-				if ($("input[type=checkbox][data-type=main]:checked").length <= 0) {
-					pageAct.main_system_tag = null;
-					pageAct.sub_system_tag = null;
-				}
-
-				refTable();
-			});
-
-		$("#subList, #mainList").on(
-			"change",
-			$("input[type=checkbox][data-type=sub]").parent(),
-			function () {
-				pageAct.sub_system_tag = $("input[type=checkbox]:checked")
-					.map(function (i, v) {
-						if ($(v).data("type") == "sub") return $(v).prop("id");
-					})
-					.toArray();
-
-				if ($("input[type=checkbox][data-type=sub]:checked").length <= 0) {
-					pageAct.sub_system_tag = null;
-				}
-
-				if (
-					$("input[type=checkbox][data-type=sub]:checked").length ==
-					$("input[type=checkbox][data-type=sub]").length
-				) {
-					$("#selAllSys").html("取消全選");
-				} else {
-					$("#selAllSys").html("全選類別");
-				}
-
-				refTable();
-			}
-		);
-
-		$("[onclick^=setType]").on("click", function () {
-			btnSelCss(this);
-		});
-
-		$(`[onclick^=setDate]`).on("click", function () {
-			if ($(this).hasClass("btn-info")) {
-				$(this).removeClass("btn-info");
-				$(this).addClass("btn-secondary");
-				setDate();
-			} else btnSelCss(this);
-		});
-
-		$("#startdate, #enddate").on("change", function () {
-			let startdate = new Date($("#startdate").val());
-			let enddate = new Date($("#enddate").val());
-			setDate(null, startdate, enddate);
-		});
-
-		$(`[onclick="setType(2)"]`).click();
-
-		initDate();
-		event();
-		$("div.image-full-show").css("display", "none");
-
-		if (pageInit) {
-			$("#selAllSys").click();
-			pageInit = false;
-		}
-	});
-
-	function loadOpeFirmTable() {
-		$("#opeFirmTable_wrapper").css("display", "block");
-		$("#opeRecTable_wrapper").css("display", "none");
-		$("#opeRecTable_2_wrapper").css("display", "none");
-		$("#serial_number").parent().parent().css("display", "none");
-		$("[for=serial_number]").parent().css("display", "none");
-		$("#setDate").css("display", "none");
-		$("#startdate").parent().parent().css("display", "none");
-		$("#enddate").parent().parent().css("display", "none");
-
-		serial_number = $("#serial_number").val() || null;
-		let ajaxObj = {
-			url: baseApiUrl + "/operation/OpeFirList",
-			method: "POST",
-			data: {
-				work_type: null,
-				start_created_at: pageAct.startdate,
-				end_created_at: pageAct.enddate,
-				serial_number: pageAct.serial_number,
-				main_system_tag: pageAct.main_system_tag,
-				sub_system_tag: pageAct.sub_system_tag,
-			},
-		};
-		let tag = "#opeFirmTable";
-
-		let column_defs = [
-			{ targets: [0], width: "4%", 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 },
-		];
-
-		let columns = [
-			{
-				title: "廠商類別",
-				data: "system_key",
-			},
-			{
-				title: "廠商",
-				data: "name",
-			},
-			{
-				title: "聯絡人",
-				data: "contact_person",
-			},
-			{
-				title: "電話",
-				data: "phone",
-			},
-			{
-				title: "email",
-				data: "email",
-			},
-			{
-				title: "建立日期",
-				data: "created_at",
-			},
-			{
-				title: "功能",
-				data: "id",
-				render: function (data) {
-					let btnDiv = creDiv(
-						["row", "m-0", "justify-content-center"],
-						{ style: "gap:10px" },
-						null,
-						null,
-						{ id: data }
-					);
-					btnDiv.append(
-						creBtnHtml("修改", "opeFirmEdiBtn", null, ["btn", "btn-info"], {
-							toggle: "modal",
-							target: "#opeFirmModal",
-						})
-					);
-					btnDiv.append(
-						creBtnHtml("刪除", "opeFirmDelBtn", null, ["btn", "btn-danger"], {
-							toggle: "modal",
-							target: "#delModal",
-						})
-					);
-					return btnDiv.outerHtml();
-				},
-			},
-		];
-
-		opeFirmTable = new YourTeam.JqDataTables.getTableByAjax(
-			ajaxObj,
-			tag,
-			null,
-			columns,
-			column_defs
-		);
-	}
-
-	function loadOpeRecTable() {
-		$("#opeFirmTable_wrapper").css("display", "none");
-
-		$("#serial_number").parent().parent().css("display", "block");
-		$("[for=serial_number]").parent().css("display", "block");
-		$("#setDate").css("display", "block");
-		$("#startdate").parent().parent().css("display", "block");
-		$("#enddate").parent().parent().css("display", "block");
-
-		let ajaxObj = {
-			url: baseApiUrl + "/operation/OpeRecList",
-			method: "POST",
-			data: {
-				work_type: pageAct.work_type,
-				start_created_at: pageAct.startdate,
-				end_created_at: pageAct.enddate,
-				serial_number: pageAct.serial_number,
-				main_system_tag: pageAct.main_system_tag,
-				sub_system_tag: pageAct.sub_system_tag,
-			},
-		};
-
-		let tag = "#opeRecTable" + (pageAct.work_type == "2" ? "_2" : "");
-		let column_defs = [];
-		let columns = [];
-		if (pageAct.work_type == "2") {
-			$("#opeRecTable_wrapper").css("display", "none");
-			$("#opeRecTable_2_wrapper").css("display", "block");
-
-			column_defs = [
-				{ targets: [0], width: "2%", sortable: true },
-				{ targets: [1], width: "6%", sortable: true },
-				{ targets: [2], width: "7%", sortable: true },
-				{ targets: [3], width: "6%", sortable: true },
-				{ targets: [4], width: "5%", sortable: true },
-				{ targets: [5], width: "3%", sortable: true },
-				{ targets: [6], width: "5%", sortable: true },
-				{ targets: [7], width: "6%", sortable: true },
-				{ targets: [8], width: "15%", sortable: false },
-				{ targets: [9], width: "6%", sortable: false },
-				{ targets: [10], width: "8%", sortable: true },
-				{ targets: [11], width: "8%", sortable: false },
-			];
-
-			columns = [
-				{
-					title: "項目",
-					data: "work_type_name",
-				},
-				{
-					title: "位置",
-					data: "location",
-				},
-				{
-					title: "異常代號",
-					data: "error_code",
-					render: (data) => {
-						console.log(data?.split("-")[0] || "" == null);
-						return data?.split("-")[0] || "";
-					},
-				},
-				{
-					title: "表單號",
-					data: "formId",
-				},
-				{
-					title: "設備名稱",
-					data: "device_name",
-				},
-				{
-					title: "狀態",
-					data: "status_name",
-				},
-				{
-					title: "處理人員",
-					data: "user_full_name",
-				},
-				{
-					title: "預計施工時間",
-					data: "start_time",
-					className: "text-nowrap",
-					render: function (data) {
-						return displayDate(data, "datetime");
-					},
-				},
-				{
-					title: "檔案上傳",
-					data: "lorf",
-					render: function (data) {
-						ope_imgHtml = null;
-						$.each(data, function (i, v) {
-							let extName = v.ori_file_name.split(".")[1];
-							if (i == 0)
-								ope_imgHtml = creDiv(["file-item"], null, null, null, {
-									id: v.id,
-								});
-							if (i < 3) {
-								if (/\.(jpe?g|png|gif)$/i.test(v.ori_file_name)) {
-									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",
-										style: "cursor: pointer",
-									});
-									ope_colImg = creImg(
-										"img",
-										null,
-										null,
-										null,
-										null,
-										{ filename: v.ori_file_name, savename: v.save_file_name },
-										{
-											style: "margin-left: 30px",
-											height: "70px",
-											width: "50px",
-											src:
-												baseApiUrl +
-												"/upload/operation/" +
-												v.save_file_name +
-												"." +
-												extName,
-										}
-									);
-									ope_colA.append(ope_colImg);
-									ope_imgHtml.append(ope_colA);
-								} else if (
-									/\.(xls?x|doc?x|ptt?x|pdf|zip|rar|7zip|txt|odt|xml|rtf|ods|odp|pps?x|ppt?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, [
-										icons + " fa-3x m-1",
-									]);
-									ope_colA = creEle(
-										"a",
-										null,
-										null,
-										null,
-										null,
-										{ filename: v.ori_file_name, savename: v.save_file_name },
-										{
-											href:
-												baseApiUrl +
-												"/upload/operation/" +
-												v.save_file_name +
-												"." +
-												extName,
-											download: v.ori_file_name,
-											style: "margin-left: 30px",
-										}
-									);
-									ope_colA.append(ope_colI);
-									ope_imgHtml.append(ope_colA);
-								}
-							}
-						});
-
-						return ope_imgHtml ? ope_imgHtml.outerHtml() : null;
-					},
-				},
-				{
-					title: "完成時間",
-					data: "finish_time",
-					render: function (data) {
-						return displayDate(data, "datetime");
-					},
-				},
-				{
-					title: "建立時間",
-					data: "created_at",
-				},
-				{
-					title: "功能",
-					data: "id",
-					render: function (data) {
-						let btnDiv = creDiv(
-							["row", "m-0", "justify-content-center"],
-							{ style: "gap:10px" },
-							null,
-							null,
-							{ id: data }
-						);
-						btnDiv.append(
-							creBtnHtml("修改", "opeRecEdiBtn", null, ["btn", "btn-info"], {
-								toggle: "modal",
-								target: "#opeRecModal_2",
-							})
-						);
-						btnDiv.append(
-							creBtnHtml("刪除", "opeRecDelBtn", null, ["btn", "btn-danger"], {
-								toggle: "modal",
-								target: "#delModal",
-							})
-						);
-						return btnDiv.outerHtml();
-					},
-				},
-			];
-		} else if (pageAct.work_type == "1") {
-			$("#opeRecTable_wrapper").css("display", "block");
-			$("#opeRecTable_2_wrapper").css("display", "none");
-
-			column_defs = [
-				{ targets: [0], width: "2%", sortable: true },
-				{ targets: [1], width: "6%", sortable: true },
-				//{ targets: [2], width: "6%", sortable: true },
-				{ targets: [2], width: "6%", sortable: true },
-				{ targets: [3], width: "8%", sortable: true },
-				{ targets: [4], width: "5%", sortable: true },
-				{ targets: [5], width: "6%", sortable: true },
-				{ targets: [6], width: "13%", sortable: false },
-				{ targets: [7], width: "6%", sortable: false },
-				{ targets: [8], width: "8%", sortable: false },
-				{ targets: [9], width: "8%", sortable: true },
-				{ targets: [10], width: "8%", sortable: false },
-			];
-
-			columns = [
-				{
-					title: "項目",
-					data: "work_type_name",
-				},
-				{
-					title: "位置",
-					data: "location",
-				},
-				//{
-				//		title: "異常代號",
-				//		data: "error_code",
-				//},
-				{
-					title: "表單號",
-					data: "formId",
-				},
-				{
-					title: "設備名稱",
-					data: "device_name",
-				},
-				{
-					title: "狀態",
-					data: "status_name",
-				},
-				{
-					title: "處理人員",
-					data: "user_full_name",
-				},
-				{
-					title: "預計施工時間",
-					data: "start_time",
-					className: "text-nowrap",
-					render: function (data) {
-						return displayDate(data, "datetime");
-					},
-				},
-				{
-					title: "檔案上傳",
-					data: "lorf",
-					render: function (data) {
-						ope_imgHtml = null;
-						$.each(data, function (i, v) {
-							let extName = v.ori_file_name.split(".")[1];
-							if (i == 0)
-								ope_imgHtml = creDiv(["file-item"], null, null, null, {
-									id: v.id,
-								});
-							if (i < 3) {
-								if (/\.(jpe?g|png|gif)$/i.test(v.ori_file_name)) {
-									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",
-										style: "cursor: pointer",
-									});
-									ope_colImg = creImg(
-										"img",
-										null,
-										null,
-										null,
-										null,
-										{ filename: v.ori_file_name, savename: v.save_file_name },
-										{
-											style: "margin-left: 30px",
-											height: "70px",
-											width: "50px",
-											src:
-												baseApiUrl +
-												"/upload/operation/" +
-												v.save_file_name +
-												"." +
-												extName,
-										}
-									);
-									ope_colA.append(ope_colImg);
-									ope_imgHtml.append(ope_colA);
-								} else if (
-									/\.(xls?x|doc?x|ptt?x|pdf|zip|rar|7zip|txt|odt|xml|rtf|ods|odp|pps?x|ppt?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, [
-										icons + " fa-3x m-1",
-									]);
-									ope_colA = creEle(
-										"a",
-										null,
-										null,
-										null,
-										null,
-										{ filename: v.ori_file_name, savename: v.save_file_name },
-										{
-											href:
-												baseApiUrl +
-												"/upload/operation/" +
-												v.save_file_name +
-												"." +
-												extName,
-											download: v.ori_file_name,
-											style: "margin-left: 30px",
-										}
-									);
-									ope_colA.append(ope_colI);
-									ope_imgHtml.append(ope_colA);
-								}
-							}
-						});
-
-						return ope_imgHtml ? ope_imgHtml.outerHtml() : null;
-					},
-				},
-				{
-					title: "完成時間",
-					data: "finish_time",
-					render: function (data) {
-						return displayDate(data, "datetime");
-					},
-				},
-				{
-					title: "建立時間",
-					data: "created_at",
-				},
-				{
-					title: "功能",
-					data: "id",
-					render: function (data) {
-						let btnDiv = creDiv(
-							["row", "m-0", "justify-content-center"],
-							{ style: "gap:10px" },
-							null,
-							null,
-							{ id: data }
-						);
-						btnDiv.append(
-							creBtnHtml("修改", "opeRecEdiBtn", null, ["btn", "btn-info"], {
-								toggle: "modal",
-								target: "#opeRecModal",
-							})
-						);
-						btnDiv.append(
-							creBtnHtml("刪除", "opeRecDelBtn", null, ["btn", "btn-danger"], {
-								toggle: "modal",
-								target: "#delModal",
-							})
-						);
-						return btnDiv.outerHtml();
-					},
-				},
-			];
-		}
-
-		opeRecTable = new YourTeam.JqDataTables.getTableByAjax(
-			ajaxObj,
-			tag,
-			null,
-			columns,
-			column_defs
-		);
-	}
-
-	function setType(wt) {
-		pageAct.work_type = wt;
-
-		if (wt == null) {
-			$("#newForm").attr("data-target", "#opeFirmModal");
-			loadOpeFirmTable();
-		} else {
-			$(pageAct.work_type == "1" ? "#inpWorTyp" : "#inpWorTyp_2").val(wt);
-			$("#newForm").attr(
-				"data-target",
-				pageAct.work_type == "1" ? "#opeRecModal" : "#opeRecModal_2"
-			);
-			loadOpeRecTable();
-		}
-	}
-
-	function setDate(dateType = null, startdate = null, enddate = null) {
-		clearPageAct();
-		pageAct.startdate = startdate;
-		pageAct.enddate = enddate;
-
-		if ($("#startdate").val() > $("#enddate").val()) {
-			$("#startdate").val($("#startdate").data("val"));
-			$("#enddate").val($("#enddate").data("val"));
-			toast_error("不可選擇大於結束時間");
-		} else {
-			let today = displayDate(
-				new Date(new Date().setDate(new Date().getDate())),
-				"date"
-			).replaceAll("/", "-");
-			let ytd = displayDate(
-				new Date(new Date().setDate(new Date().getDate() - 1)),
-				"date"
-			).replaceAll("/", "-");
-
-			if (dateType == "tdy") {
-				pageAct.startdate =
-					displayDate(
-						new Date(new Date().setDate(new Date().getDate())),
-						"datetime"
-					)
-						.toString()
-						.replaceAll("/", "-")
-						.split(" ")[0] + "T00:00:00";
-				pageAct.enddate =
-					displayDate(
-						new Date(new Date().setDate(new Date().getDate())),
-						"datetime"
-					)
-						.toString()
-						.replaceAll("/", "-")
-						.split(" ")[0] + "T23:59:59";
-				$("#startdate").val(today);
-				$("#startdate").data("val", today);
-				$("#enddate").val(today);
-				$("#enddate").data("val", today);
-			} else if (dateType == "ytd") {
-				pageAct.startdate =
-					displayDate(
-						new Date(new Date().setDate(new Date().getDate() - 1)),
-						"datetime"
-					)
-						.toString()
-						.replaceAll("/", "-")
-						.split(" ")[0] + "T00:00:00";
-				pageAct.enddate =
-					displayDate(
-						new Date(new Date().setDate(new Date().getDate() - 1)),
-						"datetime"
-					)
-						.toString()
-						.replaceAll("/", "-")
-						.split(" ")[0] + "T23:59:59";
-				$("#startdate").val(ytd);
-				$("#startdate").data("val", ytd);
-				$("#enddate").val(ytd);
-				$("#enddate").data("val", ytd);
-			} else {
-				pageAct.enddate =
-					displayDate(
-						new Date(pageAct.enddate.valueOf()).setDate(
-							pageAct.enddate.getDate()
-						),
-						"date"
-					)
-						.toString()
-						.replaceAll("/", "-") + "T23:59:59";
-				$(`[onclick^=setDate]`).removeClass("btn-info");
-				$(`[onclick^=setDate]`).addClass("btn-secondary");
-				if ($("#startdate").val() == $("#enddate").val()) {
-					if ($("#startdate").val() == today)
-						$(`[onclick="setDate('tdy')"]`).click();
-					else if ($("#startdate").val() == ytd)
-						$(`[onclick="setDate('ytd')"]`).click();
-				}
-				$("#startdate").data("val", $("#startdate").val());
-				$("#enddate").data("val", $("#enddate").val());
-			}
-
-			refTable();
-		}
-	}
-
-	function initDate() {
-		//$('#startdate').val(displayDate(new Date(new Date().setDate(new Date().getDate())), 'date').replaceAll('/', '-'));
-		//$('#enddate').val(displayDate(new Date(new Date().setDate(new Date().getDate())), 'date').replaceAll('/', '-'));
-		$(`[onclick="setDate('tdy')"]`).click();
-	}
-
-	function clearPageAct() {
-		pageAct.startdate = null;
-		pageAct.enddate = null;
-		pageAct.serial_number = null;
-	}
-
-	function clearOpeRecPageAct() {
-		pageAct.selAreaTag = null;
-		pageAct.selBuiTag = null;
-		pageAct.selFloTag = null;
-	}
-
-	function snSearch() {
-		clearPageAct();
-		pageAct.startdate = $("#startdate").val() + "T00:00:00";
-		pageAct.enddate = $("#enddate").val() + "T23:59:59";
-		pageAct.serial_number = $("#serial_number").val() || null;
-		refTable();
-	}
-
-	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" : "";
-
-			$.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.selSysMain.push(v);
-				$.each(v.history_Sub_systems, function (i2, v2) {
-					subStrHtml += `<div class="custom-control custom-checkbox custom-control-inline" data-main="${v.main_system_tag}" ${display}>
-									<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.selSysSub.push(v2);
-				});
-			});
-
-			if (pageAct.mainStatus) {
-				$("#mainList").html(mainStrHtml);
-				$("#subList").html(subStrHtml);
-			} else {
-				$("#mainList").html(subStrHtml);
-			}
-
-			if (pageAct.sub_system_tag != null) {
-				$.each(pageAct.sub_system_tag, function (i, v) {
-					$("#" + v).click();
-				});
-			}
-		}
-		ytAjax = new YourTeam.Ajax(url, objSendData, success, null, "POST").send();
-	}
-
-	function refTable() {
-		if (pageAct.work_type == null) loadOpeFirmTable();
-		else loadOpeRecTable();
-	}
-
-	function exportExcel(e) {
-		console.log("export", e);
-		let url = baseApiUrl + "/operation/OpeExportExcel";
-
-		objSendData.Data = {
-			work_type: pageAct.work_type,
-			startdate: pageAct.startdate == undefined ? null : pageAct.startdate,
-			enddate: pageAct.enddate == undefined ? null : pageAct.enddate,
-		};
-		console.log("data", objSendData.Data);
-		ytAjax = new YourTeam.Ajax(
-			url,
-			objSendData,
-			function (rel) {
-				if (rel.code == "0000")
-					location.href =
-						baseApiUrl +
-						"/api/df?path=" +
-						rel.data.split("/")[0] +
-						"&fileName=" +
-						rel.data.split("/")[1] +
-						"&token=" +
-						cookies.get("JWT-Authorization");
-			},
-			null,
-			"POST"
-		).send();
-	}
-
-	function selSysMain() {
-		$("#inpFirmSelSysMain").html();
-		$("#inpFirmSelSysSub").html();
-		let mainStrHtml = ``;
-		let subStrHtml = ``;
-		$.each(pageAct.selSysMain, (index, roleObj) => {
-			let selected = index == 0 ? "selected" : "";
-			mainStrHtml += `<option value='${roleObj.main_system_tag}' ${selected}>${roleObj.full_name}</option>`;
-
-			$.each(roleObj.history_Sub_systems, (index2, roleObj2) => {
-				subStrHtml += `<option value='${roleObj2.sub_system_tag}' data-main='${roleObj.main_system_tag}' ${selected} hidden>${roleObj2.full_name}</option>`;
-			});
-		});
-
-		$("#inpFirmSelSysMain").html(mainStrHtml);
-		$("#inpFirmSelSysSub").html(subStrHtml);
-		$(
-			`[data-main=` +
-			$("#inpFirmSelSysMain").find("option:selected").val() +
-			`]`
-		).attr("hidden", false);
-	}
-
-	function selDevice() {
-		let url = baseApiUrl + "/operation/DevList";
-		let lsst = [];
-		pageAct.selSysSub.map(function (v, i) {
-			lsst.push(v.sub_system_tag.toString());
-		});
-		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) {
-				} else {
-					strHtml = `<option value=''></option>`;
-					$(
-						pageAct.work_type == "1" ? "#inpFixDoCode" : "#inpFixDoCode_2"
-					).html();
-					strHtml = `<option value='' disabled>未選擇</option>`;
-					$.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}>${roleObj.device_name}</option>`;
-
-						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;
-						}
-					});
-					$(
-						pageAct.work_type == "1" ? "#inpFixDoCode" : "#inpFixDoCode_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) {
-				} else {
-					$(
-						pageAct.work_type == "1" ? "#inpWorPerId" : "#inpWorPerId_2"
-					).html();
-					strHtml = ``;
-					strHtml += `<option value=''>未選擇</option>`;
-					$.each(res.data, (index, roleObj) => {
-						strHtml += `<option value='${roleObj.userinfo_guid}'>${roleObj.full_name}</option>`;
-					});
-					$(pageAct.work_type == "1" ? "#inpWorPerId" : "#inpWorPerId_2").html(
-						strHtml
-					);
-				}
-			},
-			null,
-			"POST"
-		).send();
-	}
-
-	function selOpeFir() {
-		let url = baseApiUrl + "/operation/OpeFirSel";
-		objSendData.Data = { sub_system_tag: [pageAct.sysSub] };
-		ytAjax = new YourTeam.Ajax(
-			url,
-			objSendData,
-			function (res) {
-				if (!res || res.code != "0000" || !res.data) {
-				} else {
-					$(pageAct.work_type == "1" ? "#inpFixFirm" : "#inpFixFirm_2").html();
-					strHtml = ``;
-					strHtml += `<option value=''>未選擇</option>`;
-					$.each(res.data, (index, roleObj) => {
-						strHtml += `<option value='${roleObj.id}'>${roleObj.name}</option>`;
-					});
-					$(pageAct.work_type == "1" ? "#inpFixFirm" : "#inpFixFirm_2").html(
-						strHtml
-					);
-				}
-			},
-			null,
-			"POST"
-		).send();
-	}
-
-	function selAllSysVal(elem) {
-		$(loadEle).Loading("start");
-		if ($(elem).html() == "全選類別") {
-			$("#mainList input").map(function (i, v) {
-				if (!$(v).is(":checked")) {
-					$(v).click();
-				}
-			});
-			$("#subList input").map(function (i, v) {
-				if (!$(v).is(":checked")) {
-					$(v).click();
-				}
-			});
-			$(elem).html("取消全選");
-		} else {
-			$("#mainList input").map(function (i, v) {
-				if ($(v).is(":checked")) $(v).click();
-			});
-			$("#subList input").map(function (i, v) {
-				if ($(v).is(":checked")) $(v).click();
-			});
-			$(elem).html("全選類別");
-		}
-
-		refTable();
-		$(loadEle).Loading("close");
-	}
-
-	function event() {
-		onEvent("click", "#newForm", function () {
-			uploader["ope1"][0].dropzone.removeAllFiles();
-			uploader["ope2"][0].dropzone.removeAllFiles();
-			if (pageAct.work_type == null) {
-				pageAct.opeFirmAct = "add";
-				$("#opeFirmTitle").html("新增廠商資料");
-				$("#opeFirmModal input").map(function (i, v) {
-					$(v).val("");
-				});
-				$("#opeFirmModal [id*=-error]").hide();
-			} else {
-				clearOpeRecPageAct();
-				$(
-					"#" +
-					(pageAct.work_type == "1" ? "opeRecForm" : "opeRecForm_2") +
-					" [id*=-error]"
-				).hide();
-				pageAct.opeRecId = null;
+		var uploader = { ope1: null, ope2: null };
+		$(function () {
+				initDropzone();
+				pageAct.sub_system_tag = null;
+				pageAct.main_system_tag = null;
+				pageAct.selSysSub = [];
+				pageAct.selSysMain = [];
 				pageAct.imageFile = [];
-				$(pageAct.work_type == "1" ? "#opeRecTitle" : "#opeRecTitle_2").html(
-					pageAct.work_type == 1 ? "新增保養" : "新增維修"
-				);
-				$(
-					pageAct.work_type == "1"
-						? "#opeRecModal input"
-						: "#opeRecModal_2 input"
-				).map(function (i, v) {
-					$(v).val("");
-				});
-				let today = displayDate(new Date(Date.now()), "date").replaceAll(
-					"/",
-					"-"
-				);
-				$(
-					pageAct.work_type == "1"
-						? "#opeRecModal input[id*=Time]"
-						: "#opeRecModal_2 input[id*=Time]"
-				).map(function (i, v) {
-					$(v).val(today);
-				});
-				$(pageAct.work_type == "1" ? "#ope_forImage" : "#ope_forImage_2").html(
-					""
-				);
-				$(pageAct.work_type == "1" ? "#ope_forFile" : "#ope_forFile_2").html(
-					""
-				);
-				$(
-					pageAct.work_type == "1" ? "#inpDescription" : "#inpDescription_2"
-				).val("");
-				$(pageAct.work_type == "1" ? "#inpNotice" : "#inpNotice_2").val("");
-				$(pageAct.work_type == "1" ? "#inpFixDo" : "#inpFixDo_2").val("");
-				selUser();
-				selDevice();
-				selOpeFir();
-				errCodeList();
-				getFormId();
-				getUser();
-			}
+				let pageInit = true;
 
-			selSysMain();
+				sysList();
+
+				$("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();
+
+								if ($("input[type=checkbox][data-type=main]:checked").length <= 0) {
+										pageAct.main_system_tag = null;
+										pageAct.sub_system_tag = null;
+								}
+
+								refTable();
+						});
+
+				$("#subList, #mainList").on(
+						"change",
+						$("input[type=checkbox][data-type=sub]").parent(),
+						function () {
+								pageAct.sub_system_tag = $("input[type=checkbox]:checked")
+										.map(function (i, v) {
+												if ($(v).data("type") == "sub") return $(v).prop("id");
+										})
+										.toArray();
+
+								if ($("input[type=checkbox][data-type=sub]:checked").length <= 0) {
+										pageAct.sub_system_tag = null;
+								}
+
+								if (
+										$("input[type=checkbox][data-type=sub]:checked").length ==
+										$("input[type=checkbox][data-type=sub]").length
+								) {
+										$("#selAllSys").html("取消全選");
+								} else {
+										$("#selAllSys").html("全選類別");
+								}
+
+								refTable();
+						}
+				);
+
+				$("[onclick^=setType]").on("click", function () {
+						btnSelCss(this);
+				});
+
+				$(`[onclick^=setDate]`).on("click", function () {
+						if ($(this).hasClass("btn-info")) {
+								$(this).removeClass("btn-info");
+								$(this).addClass("btn-secondary");
+								setDate();
+						} else btnSelCss(this);
+				});
+
+				$("#startdate, #enddate").on("change", function () {
+						let startdate = new Date($("#startdate").val());
+						let enddate = new Date($("#enddate").val());
+						setDate(null, startdate, enddate);
+				});
+
+				$(`[onclick="setType(2)"]`).click();
+
+				initDate();
+				event();
+				$("div.image-full-show").css("display", "none");
+
+				if (pageInit) {
+						$("#selAllSys").click();
+						pageInit = false;
+				}
 		});
 
-		onEvent("click", "#opeFirmEdiBtn", function () {
-			selSysMain();
-			$("#opeFirmTitle").html("編輯廠商資料");
-			let url = baseApiUrl + "/operation/OpeFirRead";
-			pageAct.opeFirmId = $(this).parent().data("id");
-			objSendData.Data = { id: pageAct.opeFirmId };
-			ytAjax = new YourTeam.Ajax(
-				url,
-				objSendData,
-				function (res) {
-					if (!res || res.code != "0000" || !res.data) {
-					} else {
-						pageAct.opeFirmAct = "edit";
-						$("#opeFirmForm select[id=inpFirmSelSysMain]")
-							.val(res.data.device_system_category_layer2)
-							.change();
-						$("#opeFirmForm select[id=inpFirmSelSysSub]")
-							.val(res.data.device_system_category_layer3)
-							.change();
-						$("#opeFirmForm input[id=inpName]").val(res.data.name);
-						$("#opeFirmForm input[id=inpConPer]").val(res.data.contact_person);
-						$("#opeFirmForm input[id=inpPhone]").val(res.data.phone);
-						$("#opeFirmForm input[id=inpEmail]").val(res.data.email);
-						$("#opeFirmForm input[id=inpTaxIdNum]").val(res.data.tax_id_number);
-						$("#opeFirmForm input[id=inpRemark]").val(res.data.remark);
-					}
-				},
-				null,
-				"POST"
-			).send();
-		});
+		function loadOpeFirmTable() {
+				$("#opeFirmTable_wrapper").css("display", "block");
+				$("#opeRecTable_wrapper").css("display", "none");
+				$("#opeRecTable_2_wrapper").css("display", "none");
+				$("#serial_number").parent().parent().css("display", "none");
+				$("[for=serial_number]").parent().css("display", "none");
+				$("#setDate").css("display", "none");
+				$("#startdate").parent().parent().css("display", "none");
+				$("#enddate").parent().parent().css("display", "none");
 
-		onEvent("click", "#OpeFirmSendBtn", function () {
-			let form = $("#opeFirmForm");
+				serial_number = $("#serial_number").val() || null;
+				let ajaxObj = {
+						url: baseApiUrl + "/operation/OpeFirList",
+						method: "POST",
+						data: {
+								work_type: null,
+								start_created_at: pageAct.startdate,
+								end_created_at: pageAct.enddate,
+								serial_number: pageAct.serial_number,
+								main_system_tag: pageAct.main_system_tag,
+								sub_system_tag: pageAct.sub_system_tag,
+						},
+				};
+				let tag = "#opeFirmTable";
 
-			$(form).validate({
-				rules: {
-					inpFirmSelSysMain: { required: true },
-					inpFirmSelSysSub: { required: true },
-					inpName: { required: true, maxlength: 50 },
-				},
-			});
-			if ($(form).valid()) {
-				let url =
-					baseApiUrl +
-					"/operation/" +
-					(pageAct.opeFirmAct == "add" ? "SaveOpeFirm" : "EdtOneOpeFirm");
-				let sendData = {
-					device_system_category_layer2: $("#inpFirmSelSysMain").val(),
-					device_system_category_layer3: $("#inpFirmSelSysSub").val(),
-					name: $("#inpName").val() || null,
-					contact_person: $("#inpConPer").val() || null,
-					phone: $("#inpPhone").val() || null,
-					email: $("#inpEmail").val() || null,
-					tax_id_number: $("#inpTaxIdNum").val() || null,
-					remark: $("#inpRemark").val() || null,
+				let column_defs = [
+						{ targets: [0], width: "4%", 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 },
+				];
+
+				let columns = [
+						{
+								title: "廠商類別",
+								data: "system_key",
+						},
+						{
+								title: "廠商",
+								data: "name",
+						},
+						{
+								title: "聯絡人",
+								data: "contact_person",
+						},
+						{
+								title: "電話",
+								data: "phone",
+						},
+						{
+								title: "email",
+								data: "email",
+						},
+						{
+								title: "建立日期",
+								data: "created_at",
+						},
+						{
+								title: "功能",
+								data: "id",
+								render: function (data) {
+										let btnDiv = creDiv(
+												["row", "m-0", "justify-content-center"],
+												{ style: "gap:10px" },
+												null,
+												null,
+												{ id: data }
+										);
+										btnDiv.append(
+												creBtnHtml("修改", "opeFirmEdiBtn", null, ["btn", "btn-info"], {
+														toggle: "modal",
+														target: "#opeFirmModal",
+												})
+										);
+										btnDiv.append(
+												creBtnHtml("刪除", "opeFirmDelBtn", null, ["btn", "btn-danger"], {
+														toggle: "modal",
+														target: "#delModal",
+												})
+										);
+										return btnDiv.outerHtml();
+								},
+						},
+				];
+
+				opeFirmTable = new YourTeam.JqDataTables.getTableByAjax(
+						ajaxObj,
+						tag,
+						null,
+						columns,
+						column_defs
+				);
+		}
+
+		function loadOpeRecTable() {
+				$("#opeFirmTable_wrapper").css("display", "none");
+
+				$("#serial_number").parent().parent().css("display", "block");
+				$("[for=serial_number]").parent().css("display", "block");
+				$("#setDate").css("display", "block");
+				$("#startdate").parent().parent().css("display", "block");
+				$("#enddate").parent().parent().css("display", "block");
+
+				let ajaxObj = {
+						url: baseApiUrl + "/operation/OpeRecList",
+						method: "POST",
+						data: {
+								work_type: pageAct.work_type,
+								start_created_at: pageAct.startdate,
+								end_created_at: pageAct.enddate,
+								serial_number: pageAct.serial_number,
+								main_system_tag: pageAct.main_system_tag,
+								sub_system_tag: pageAct.sub_system_tag,
+						},
 				};
 
-				if (pageAct.opeFirmAct == "edit") sendData.id = pageAct.opeFirmId;
+				let tag = "#opeRecTable" + (pageAct.work_type == "2" ? "_2" : "");
+				let column_defs = [];
+				let columns = [];
+				if (pageAct.work_type == "2") {
+						$("#opeRecTable_wrapper").css("display", "none");
+						$("#opeRecTable_2_wrapper").css("display", "block");
 
-				objSendData.Data = sendData;
+						column_defs = [
+								{ targets: [0], width: "2%", sortable: true },
+								{ targets: [1], width: "6%", sortable: true },
+								{ targets: [2], width: "7%", sortable: true },
+								{ targets: [3], width: "6%", sortable: true },
+								{ targets: [4], width: "5%", sortable: true },
+								{ targets: [5], width: "3%", sortable: true },
+								{ targets: [6], width: "5%", sortable: true },
+								{ targets: [7], width: "6%", sortable: true },
+								{ targets: [8], width: "13%", sortable: false },
+								{ targets: [9], width: "6%", sortable: false },
+								{ targets: [10], width: "10%", sortable: true },
+								{ targets: [11], width: "8%", sortable: false },
+						];
 
-				ytAjax = new YourTeam.Ajax(
-					url,
-					objSendData,
-					function (res) {
-						if (!res || res.code != "0000" || !res.data) {
-							toast_error(common.AddErr + (res.msg || res.data));
+						columns = [
+								{
+										title: "項目",
+										data: "work_type_name",
+								},
+								{
+										title: "位置",
+										data: "location",
+								},
+								{
+										title: "異常代號",
+										data: "error_code",
+										render: (data) => {
+												console.log(data?.split("-")[0] || "" == null);
+												return data?.split("-")[0] || "";
+										},
+								},
+								{
+										title: "表單號",
+										data: "formId",
+										className: "text-nowrap",
+								},
+								{
+										title: "設備名稱",
+										data: "device_name",
+										className: "text-nowrap",
+								},
+								{
+										title: "狀態",
+										data: "status_name",
+										className: "text-nowrap",
+								},
+								{
+										title: "處理人員",
+										data: "user_full_name",
+										className: "text-nowrap",
+								},
+								{
+										title: "預計施工時間",
+										data: "start_time",
+										className: "text-nowrap",
+										render: function (data) {
+												return displayDate(data, "datetime");
+										},
+								},
+								{
+										title: "檔案上傳",
+										data: "lorf",
+										render: function (data) {
+												ope_imgHtml = null;
+												$.each(data, function (i, v) {
+														let extName = v.ori_file_name.split(".")[1];
+														if (i == 0)
+																ope_imgHtml = creDiv(["file-item"], null, null, null, {
+																		id: v.id,
+																});
+														if (i < 3) {
+																if (/\.(jpe?g|png|gif)$/i.test(v.ori_file_name)) {
+																		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",
+																				style: "cursor: pointer",
+																		});
+																		ope_colImg = creImg(
+																				"img",
+																				null,
+																				null,
+																				null,
+																				null,
+																				{ filename: v.ori_file_name, savename: v.save_file_name },
+																				{
+																						style: "margin-left: 30px",
+																						height: "70px",
+																						width: "50px",
+																						src:
+																								baseApiUrl +
+																								"/upload/operation/" +
+																								v.save_file_name +
+																								"." +
+																								extName,
+																				}
+																		);
+																		ope_colA.append(ope_colImg);
+																		ope_imgHtml.append(ope_colA);
+																} else if (
+																		/\.(xls?x|doc?x|ptt?x|pdf|zip|rar|7zip|txt|odt|xml|rtf|ods|odp|pps?x|ppt?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, [
+																				icons + " fa-3x m-1",
+																		]);
+																		ope_colA = creEle(
+																				"a",
+																				null,
+																				null,
+																				null,
+																				null,
+																				{ filename: v.ori_file_name, savename: v.save_file_name },
+																				{
+																						href:
+																								baseApiUrl +
+																								"/upload/operation/" +
+																								v.save_file_name +
+																								"." +
+																								extName,
+																						download: v.ori_file_name,
+																						style: "margin-left: 30px",
+																				}
+																		);
+																		ope_colA.append(ope_colI);
+																		ope_imgHtml.append(ope_colA);
+																}
+														}
+												});
+
+												return ope_imgHtml ? ope_imgHtml.outerHtml() : null;
+										},
+								},
+								{
+										title: "完成時間",
+										data: "finish_time",
+										className: "text-nowrap",
+										render: function (data) {
+												return displayDate(data, "datetime");
+										},
+								},
+								{
+										title: "建立時間",
+										data: "created_at",
+								},
+								{
+										title: "功能",
+										data: "id",
+										render: function (data) {
+												let btnDiv = creDiv(
+														["row", "m-0", "justify-content-center"],
+														{ style: "gap:10px" },
+														null,
+														null,
+														{ id: data }
+												);
+												btnDiv.append(
+														creBtnHtml("修改", "opeRecEdiBtn", null, ["btn", "btn-info"], {
+																toggle: "modal",
+																target: "#opeRecModal_2",
+														})
+												);
+												btnDiv.append(
+														creBtnHtml("刪除", "opeRecDelBtn", null, ["btn", "btn-danger"], {
+																toggle: "modal",
+																target: "#delModal",
+														})
+												);
+												return btnDiv.outerHtml();
+										},
+								},
+						];
+				} else if (pageAct.work_type == "1") {
+						$("#opeRecTable_wrapper").css("display", "block");
+						$("#opeRecTable_2_wrapper").css("display", "none");
+
+						column_defs = [
+								{ targets: [0], width: "2%", sortable: true },
+								{ targets: [1], width: "6%", sortable: true },
+								//{ targets: [2], width: "6%", sortable: true },
+								{ targets: [2], width: "7%", sortable: true },
+								{ targets: [3], width: "10%", sortable: true },
+								{ targets: [4], width: "8%", sortable: true },
+								{ targets: [5], width: "6%", sortable: true },
+								{ targets: [6], width: "10%", sortable: false },
+								{ targets: [7], width: "6%", sortable: false },
+								{ targets: [8], width: "8%", sortable: false },
+								{ targets: [9], width: "8%", sortable: true },
+								{ targets: [10], width: "8%", sortable: false },
+						];
+
+						columns = [
+								{
+										title: "項目",
+										data: "work_type_name",
+								},
+								{
+										title: "位置",
+										data: "location",
+								},
+								//{
+								//		title: "異常代號",
+								//		data: "error_code",
+								//},
+								{
+										title: "表單號",
+										data: "formId",
+										className: "text-nowrap",
+								},
+								{
+										title: "設備名稱",
+										data: "device_name",
+										className: "text-nowrap",
+								},
+								{
+										title: "狀態",
+										data: "status_name",
+								},
+								{
+										title: "處理人員",
+										data: "user_full_name",
+								},
+								{
+										title: "預計施工時間",
+										data: "start_time",
+										className: "text-nowrap",
+										render: function (data) {
+												return displayDate(data, "datetime");
+										},
+								},
+								{
+										title: "檔案上傳",
+										data: "lorf",
+										render: function (data) {
+												ope_imgHtml = null;
+												$.each(data, function (i, v) {
+														let extName = v.ori_file_name.split(".")[1];
+														if (i == 0)
+																ope_imgHtml = creDiv(["file-item"], null, null, null, {
+																		id: v.id,
+																});
+														if (i < 3) {
+																if (/\.(jpe?g|png|gif)$/i.test(v.ori_file_name)) {
+																		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",
+																				style: "cursor: pointer",
+																		});
+																		ope_colImg = creImg(
+																				"img",
+																				null,
+																				null,
+																				null,
+																				null,
+																				{ filename: v.ori_file_name, savename: v.save_file_name },
+																				{
+																						style: "margin-left: 30px",
+																						height: "70px",
+																						width: "50px",
+																						src:
+																								baseApiUrl +
+																								"/upload/operation/" +
+																								v.save_file_name +
+																								"." +
+																								extName,
+																				}
+																		);
+																		ope_colA.append(ope_colImg);
+																		ope_imgHtml.append(ope_colA);
+																} else if (
+																		/\.(xls?x|doc?x|ptt?x|pdf|zip|rar|7zip|txt|odt|xml|rtf|ods|odp|pps?x|ppt?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, [
+																				icons + " fa-3x m-1",
+																		]);
+																		ope_colA = creEle(
+																				"a",
+																				null,
+																				null,
+																				null,
+																				null,
+																				{ filename: v.ori_file_name, savename: v.save_file_name },
+																				{
+																						href:
+																								baseApiUrl +
+																								"/upload/operation/" +
+																								v.save_file_name +
+																								"." +
+																								extName,
+																						download: v.ori_file_name,
+																						style: "margin-left: 30px",
+																				}
+																		);
+																		ope_colA.append(ope_colI);
+																		ope_imgHtml.append(ope_colA);
+																}
+														}
+												});
+
+												return ope_imgHtml ? ope_imgHtml.outerHtml() : null;
+										},
+								},
+								{
+										title: "完成時間",
+										data: "finish_time",
+										className: "text-nowrap",
+										render: function (data) {
+												return displayDate(data, "datetime");
+										},
+								},
+								{
+										title: "建立時間",
+										data: "created_at",
+								},
+								{
+										title: "功能",
+										data: "id",
+										render: function (data) {
+												let btnDiv = creDiv(
+														["row", "m-0", "justify-content-center"],
+														{ style: "gap:10px" },
+														null,
+														null,
+														{ id: data }
+												);
+												btnDiv.append(
+														creBtnHtml("修改", "opeRecEdiBtn", null, ["btn", "btn-info"], {
+																toggle: "modal",
+																target: "#opeRecModal",
+														})
+												);
+												btnDiv.append(
+														creBtnHtml("刪除", "opeRecDelBtn", null, ["btn", "btn-danger"], {
+																toggle: "modal",
+																target: "#delModal",
+														})
+												);
+												return btnDiv.outerHtml();
+										},
+								},
+						];
+				}
+
+				opeRecTable = new YourTeam.JqDataTables.getTableByAjax(
+						ajaxObj,
+						tag,
+						null,
+						columns,
+						column_defs
+				);
+		}
+
+		function setType(wt) {
+				pageAct.work_type = wt;
+
+				if (wt == null) {
+						$("#newForm").attr("data-target", "#opeFirmModal");
+						loadOpeFirmTable();
+				} else {
+						$(pageAct.work_type == "1" ? "#inpWorTyp" : "#inpWorTyp_2").val(wt);
+						$("#newForm").attr(
+								"data-target",
+								pageAct.work_type == "1" ? "#opeRecModal" : "#opeRecModal_2"
+						);
+						loadOpeRecTable();
+				}
+		}
+
+		function setDate(dateType = null, startdate = null, enddate = null) {
+				clearPageAct();
+				pageAct.startdate = startdate;
+				pageAct.enddate = enddate;
+
+				if ($("#startdate").val() > $("#enddate").val()) {
+						$("#startdate").val($("#startdate").data("val"));
+						$("#enddate").val($("#enddate").data("val"));
+						toast_error("不可選擇大於結束時間");
+				} else {
+						let today = displayDate(
+								new Date(new Date().setDate(new Date().getDate())),
+								"date"
+						).replaceAll("/", "-");
+						let ytd = displayDate(
+								new Date(new Date().setDate(new Date().getDate() - 1)),
+								"date"
+						).replaceAll("/", "-");
+
+						if (dateType == "tdy") {
+								pageAct.startdate =
+										displayDate(
+												new Date(new Date().setDate(new Date().getDate())),
+												"datetime"
+										)
+												.toString()
+												.replaceAll("/", "-")
+												.split(" ")[0] + "T00:00:00";
+								pageAct.enddate =
+										displayDate(
+												new Date(new Date().setDate(new Date().getDate())),
+												"datetime"
+										)
+												.toString()
+												.replaceAll("/", "-")
+												.split(" ")[0] + "T23:59:59";
+								$("#startdate").val(today);
+								$("#startdate").data("val", today);
+								$("#enddate").val(today);
+								$("#enddate").data("val", today);
+						} else if (dateType == "ytd") {
+								pageAct.startdate =
+										displayDate(
+												new Date(new Date().setDate(new Date().getDate() - 1)),
+												"datetime"
+										)
+												.toString()
+												.replaceAll("/", "-")
+												.split(" ")[0] + "T00:00:00";
+								pageAct.enddate =
+										displayDate(
+												new Date(new Date().setDate(new Date().getDate() - 1)),
+												"datetime"
+										)
+												.toString()
+												.replaceAll("/", "-")
+												.split(" ")[0] + "T23:59:59";
+								$("#startdate").val(ytd);
+								$("#startdate").data("val", ytd);
+								$("#enddate").val(ytd);
+								$("#enddate").data("val", ytd);
 						} else {
-							toast_ok(common.AddSuc);
-							//$("#opeFirmModal").modal("hide");
-							$("#OpeFirmCanBtn").click();
-							refTable();
+								pageAct.enddate =
+										displayDate(
+												new Date(pageAct.enddate.valueOf()).setDate(
+														pageAct.enddate.getDate()
+												),
+												"date"
+										)
+												.toString()
+												.replaceAll("/", "-") + "T23:59:59";
+								$(`[onclick^=setDate]`).removeClass("btn-info");
+								$(`[onclick^=setDate]`).addClass("btn-secondary");
+								if ($("#startdate").val() == $("#enddate").val()) {
+										if ($("#startdate").val() == today)
+												$(`[onclick="setDate('tdy')"]`).click();
+										else if ($("#startdate").val() == ytd)
+												$(`[onclick="setDate('ytd')"]`).click();
+								}
+								$("#startdate").data("val", $("#startdate").val());
+								$("#enddate").data("val", $("#enddate").val());
 						}
-					},
-					null,
-					"POST"
-				).send();
-			}
-		});
 
-		onEvent("click", "#opeFirmDelBtn", function () {
-			pageAct.opeRecId = null;
-			pageAct.opeFirmId = $(this).parent().data("id");
-		});
-
-		onEvent("click", "#confirmDelBtn", function () {
-			objSendData.Data = { id: pageAct.opeFirmId ?? pageAct.opeRecId };
-			let url =
-				baseApiUrl +
-				"/operation/" +
-				(pageAct.work_type == null ? "DelOpeFirm" : "DelOpeRecord");
-
-			ytAjax = new YourTeam.Ajax(
-				url,
-				objSendData,
-				function (res) {
-					if (!res || res.code != "0000" || !res.data) {
-					} else {
-						toast_ok(common.DelSuc);
-						//$("#delModal").modal("hide");
-						$("#confirmDelCanBtn").click();
 						refTable();
-					}
-				},
-				null,
-				"DELETE"
-			).send();
-		});
+				}
+		}
 
-		onEvent("click", "#opeRecDelBtn", function () {
-			pageAct.opeRecId = $(this).parent().data("id");
-			pageAct.opeFirmId = null;
-		});
+		function initDate() {
+				//$('#startdate').val(displayDate(new Date(new Date().setDate(new Date().getDate())), 'date').replaceAll('/', '-'));
+				//$('#enddate').val(displayDate(new Date(new Date().setDate(new Date().getDate())), 'date').replaceAll('/', '-'));
+				$(`[onclick="setDate('tdy')"]`).click();
+		}
 
-		onEvent("click", "#OpeRecSendBtn, #OpeRecSendBtn_2", function () {
-			let form = $(pageAct.work_type == "1" ? "#opeRecForm" : "#opeRecForm_2");
-			if (pageAct.work_type == "1") {
-				$(form).validate({
-					rules: {
-						inpWorTyp: { required: true },
-						inpFixFirm: { required: true },
-						inpStatus: { required: true },
-						inpWorPerId: { required: true },
-					},
-				});
-			} else {
-				$(form).validate({
-					rules: {
-						inpWorTyp_2: { required: true },
-						inpFixFirm_2: { required: true },
-						inpStatus_2: { required: true },
-						inpWorPerId_2: { required: true },
-					},
-				});
-			}
+		function clearPageAct() {
+				pageAct.startdate = null;
+				pageAct.enddate = null;
+				pageAct.serial_number = null;
+		}
 
-			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);
-				});
+		function clearOpeRecPageAct() {
+				pageAct.selAreaTag = null;
+				pageAct.selBuiTag = null;
+				pageAct.selFloTag = null;
+		}
 
-				fd.append(
-					"error_code",
-					$(pageAct.work_type == "1" ? "#inpErrCode" : "#inpErrCode_2").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.sysMain);
-				fd.append("device_system_category_layer3", pageAct.sysSub);
-				fd.append(
-					"work_type",
-					parseInt(
-						$(pageAct.work_type == "1" ? "#inpWorTyp" : "#inpWorTyp_2").val()
-					)
-				);
-				fd.append(
-					"fix_do",
-					$(pageAct.work_type == "1" ? "#inpFixDo" : "#inpFixDo_2").val()
-				);
-				fd.append(
-					"fix_do_code",
-					$(
-						pageAct.work_type == "1" ? "#inpFixDoCode" : "#inpFixDoCode_2"
-					).val()
-				);
-				fd.append(
-					"fix_firm",
-					parseInt(
-						$(pageAct.work_type == "1" ? "#inpFixFirm" : "#inpFixFirm_2").val()
-					)
-				);
-				fd.append(
-					"status",
-					parseInt(
-						$(
-							"#" +
-							(pageAct.work_type == "1" ? "inpStatus" : "inpStatus_2") +
-							" [name=" +
-							(pageAct.work_type == "1" ? "inpSta" : "inpSta_2") +
-							"]:checked"
-						).data("value")
-					)
-				);
-				fd.append(
-					"work_person_id",
-					$(pageAct.work_type == "1" ? "#inpWorPerId" : "#inpWorPerId_2").val()
-				);
-				fd.append(
-					"start_time",
-					($(
-						pageAct.work_type == "1" ? "#inpStaTime" : "#inpStaTime_2"
-					).val() || null) == null
-						? null
-						: new Date(
-							$(
-								pageAct.work_type == "1" ? "#inpStaTime" : "#inpStaTime_2"
-							).val()
-						).toISOString()
-				);
-				//fd.append("end_time", ($('#inpEndTime').val() || null) == null ? $('#inpEndTime').val() : new Date($('#inpEndTime').val()).toISOString());
-				//fd.append("work_time", ($('#inpWorTime').val() || null) == null ? $('#inpWorTime').val() : new Date($('#inpWorTime').val()).toISOString());
-				fd.append(
-					"finish_time",
-					parseInt(
-						$(
-							"#" +
-							(pageAct.work_type == "1" ? "inpStatus" : "inpStatus_2") +
-							" [name=" +
-							(pageAct.work_type == "1" ? "inpSta" : "inpSta_2") +
-							"]:checked"
-						).data("value")
-					) == 1
-						? new Date(Date.now()).toISOString()
-						: null
-				);
-				fd.append(
-					"notice",
-					$(pageAct.work_type == "1" ? "#inpNotice" : "#inpNotice_2").val() ||
-					null
-				);
-				fd.append(
-					"description",
-					$(
-						pageAct.work_type == "1" ? "#inpDescription" : "#inpDescription_2"
-					).val() || null
-				);
-
-				//let sendData = {
-				//	location: $('#inpArea option:selected').text() + $('#inpBuilding option:selected').text() + $('#inpFloor option:selected').text(),
-				//	location_code: $('#inpArea').val().toString() + $('#inpBuilding').val().toString() + $('#inpFloor').val().toString(),
-				//	device_system_category_layer2: $('#inpRecSelSysMain').val(),
-				//	device_system_category_layer3: $('#inpRecSelSysSub').val(),
-				//	work_type: parseInt($('#inpWorTyp').val()),
-				//	fix_do: $('#inpFixDo').val(),
-				//	fix_do_code: $('#inpFixDoCode').val(),
-				//	fix_firm: parseInt($('#inpFixFirm').val()),
-				//	status: parseInt($('#inpStatus').val()),
-				//	work_person_id: $('#inpWorPerId').val(),
-				//	start_time: $('#inpStaTime').val() == null ? null : new Date(new Date($('#inpStaTime').val()).getTime() + gmtTime),
-				//	end_time: $('#inpEndTime').val() == null ? $('#inpEndTime').val() : new Date(new Date($('#inpEndTime').val()).getTime() + gmtTime),
-				//	work_time: $('#inpWorTime').val() == null ? $('#inpWorTime').val() : new Date(new Date($('#inpWorTime').val()).getTime() + gmtTime),
-				//	finish_time: $('#inpFinTime').val() == null ? null : new Date(new Date($('#inpFinTime').val()).getTime() + gmtTime),
-				//	notice: $('#inpNotice').val() || null,
-				//	description: $('#inpDescription').val() || null,
-				//	lorf: pageAct.imageFile,
-				//};
-				if (pageAct.opeRecId != null) fd.append("id", pageAct.opeRecId);
+		function snSearch() {
+				clearPageAct();
+				pageAct.startdate = $("#startdate").val() + "T00:00:00";
+				pageAct.enddate = $("#enddate").val() + "T23:59:59";
+				pageAct.serial_number = $("#serial_number").val() || null;
+				refTable();
+		}
 
+		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" : "";
+
+						$.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.selSysMain.push(v);
+								$.each(v.history_Sub_systems, function (i2, v2) {
+										subStrHtml += `<div class="custom-control custom-checkbox custom-control-inline" data-main="${v.main_system_tag}" ${display}>
+								<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.selSysSub.push(v2);
+								});
+						});
+
+						if (pageAct.mainStatus) {
+								$("#mainList").html(mainStrHtml);
+								$("#subList").html(subStrHtml);
 						} else {
-							toast_ok(common.AddSuc);
-							//$("#opeFirmModal").modal("hide");
-							$(
-								pageAct.work_type == "1" ? "#OpeRecCanBtn" : "#OpeRecCanBtn_2"
-							).click();
-							refTable();
+								$("#mainList").html(subStrHtml);
 						}
-					},
+
+						if (pageAct.sub_system_tag != null) {
+								$.each(pageAct.sub_system_tag, function (i, v) {
+										$("#" + v).click();
+								});
+						}
+				}
+				ytAjax = new YourTeam.Ajax(url, objSendData, success, null, "POST").send();
+		}
+
+		function refTable() {
+				if (pageAct.work_type == null) loadOpeFirmTable();
+				else loadOpeRecTable();
+		}
+
+		function exportExcel(e) {
+				console.log("export", e);
+				let url = baseApiUrl + "/operation/OpeExportExcel";
+
+				objSendData.Data = {
+						work_type: pageAct.work_type,
+						startdate: pageAct.startdate == undefined ? null : pageAct.startdate,
+						enddate: pageAct.enddate == undefined ? null : pageAct.enddate,
+				};
+				console.log("data", objSendData.Data);
+				ytAjax = new YourTeam.Ajax(
+						url,
+						objSendData,
+						function (rel) {
+								if (rel.code == "0000")
+										location.href =
+												baseApiUrl +
+												"/api/df?path=" +
+												rel.data.split("/")[0] +
+												"&fileName=" +
+												rel.data.split("/")[1] +
+												"&token=" +
+												cookies.get("JWT-Authorization");
+						},
+						null,
+						"POST"
+				).send();
+		}
+
+		function selSysMain() {
+				$("#inpFirmSelSysMain").html();
+				$("#inpFirmSelSysSub").html();
+				let mainStrHtml = ``;
+				let subStrHtml = ``;
+				$.each(pageAct.selSysMain, (index, roleObj) => {
+						let selected = index == 0 ? "selected" : "";
+						mainStrHtml += `<option value='${roleObj.main_system_tag}' ${selected}>${roleObj.full_name}</option>`;
+
+						$.each(roleObj.history_Sub_systems, (index2, roleObj2) => {
+								subStrHtml += `<option value='${roleObj2.sub_system_tag}' data-main='${roleObj.main_system_tag}' ${selected} hidden>${roleObj2.full_name}</option>`;
+						});
 				});
-			}
-		});
 
-		onEvent("click", "#opeRecEdiBtn", function () {
-			clearOpeRecPageAct();
-			selUser();
-			selDevice();
-			uploader["ope1"][0].dropzone.removeAllFiles();
-			uploader["ope2"][0].dropzone.removeAllFiles();
+				$("#inpFirmSelSysMain").html(mainStrHtml);
+				$("#inpFirmSelSysSub").html(subStrHtml);
+				$(
+						`[data-main=` +
+						$("#inpFirmSelSysMain").find("option:selected").val() +
+						`]`
+				).attr("hidden", false);
+		}
 
-			$("#ope_forImage").html("");
-			$("#ope_forFile").html("");
-			$("#ope_forImage_2").html("");
-			$("#ope_forFile_2").html("");
+		function selDevice() {
+				let url = baseApiUrl + "/operation/DevList";
+				let lsst = [];
+				pageAct.selSysSub.map(function (v, i) {
+						lsst.push(v.sub_system_tag.toString());
+				});
+				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) {
+								} else {
+										strHtml = `<option value=''></option>`;
+										$(
+												pageAct.work_type == "1" ? "#inpFixDoCode" : "#inpFixDoCode_2"
+										).html();
+										strHtml = `<option value='' disabled>未選擇</option>`;
+										$.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}>${roleObj.device_name}</option>`;
 
-			pageAct.imageFile = [];
-			$("#opeRecTitle").html(pageAct.work_type == 1 ? "編輯保養" : "編輯維修");
-			let url = baseApiUrl + "/operation/OpeRecRead";
-			pageAct.opeRecId = $(this).parent().data("id");
-			objSendData.Data = { id: pageAct.opeRecId };
-			ytAjax = new YourTeam.Ajax(
-				url,
-				objSendData,
-				function (res) {
-					if (!res || res.code != "0000" || !res.data) {
-					} else {
-						pageAct.sysMain = res.data.device_system_category_layer2;
-						pageAct.sysSub = res.data.device_system_category_layer3;
-						pageAct.number = res.data.fix_do_code;
+												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;
+												}
+										});
+										$(
+												pageAct.work_type == "1" ? "#inpFixDoCode" : "#inpFixDoCode_2"
+										).html(strHtml);
+								}
+						},
+						null,
+						"POST"
+				).send();
+		}
 
-						callbackForErr(
-							JSON.stringify({
-								count: [res.data].length,
-								data: [{ uuid: res.data.error_code }],
-							})
-						);
-						selOpeFir();
-						$(pageAct.work_type == "1" ? "#inpNumber" : "#inpNumber_2").val(
-							res.data.formId
-						);
-						$(pageAct.work_type == "1" ? "#inpWorTyp" : "#inpWorTyp_2").val(
-							res.data.work_type
-						);
-						$(pageAct.work_type == "1" ? "#inpErrCode" : "#inpErrCode_2").val(
-							res.data.error_code
-						);
-						$(pageAct.work_type == "1" ? "#inpFixDo" : "#inpFixDo_2").val(
-							res.data.fix_do
-						);
-						$(
-							pageAct.work_type == "1" ? "#inpFixDoCode" : "#inpFixDoCode_2"
-						).val(res.data.fix_do_code);
-						$(pageAct.work_type == "1" ? "#inpFixFirm" : "#inpFixFirm_2").val(
-							res.data.fix_firm.toString()
-						);
-						$(
-							"#" +
-							(pageAct.work_type == "1" ? "inpStatus" : "inpStatus_2") +
-							" [name=" +
-							(pageAct.work_type == "1" ? "inpSta" : "inpSta_2") +
-							"][data-value=" +
-							res.data.status +
-							"]"
-						).click();
-						$(pageAct.work_type == "1" ? "#inpWorPerId" : "#inpWorPerId_2").val(
-							res.data.work_person_id
-						);
-						$(pageAct.work_type == "1" ? "#inpStaTime" : "#inpStaTime_2").val(
-							displayDate(res.data.start_time, "date").replaceAll("/", "-")
-						);
-						$(pageAct.work_type == "1" ? "#inpNotice" : "#inpNotice_2").val(
-							res.data.notice
-						);
-						$(
-							pageAct.work_type == "1" ? "#inpDescription" : "#inpDescription_2"
-						).val(res.data.description);
-						let elemSel = $(
-							pageAct.work_type == "1" ? "#inpFixDoCode" : "#inpFixDoCode_2"
-						).find("option:selected");
-						pageAct.number = elemSel.val();
+		function selUser() {
+				let url = baseApiUrl + "/User/UserManagerList";
+				ytAjax = new YourTeam.Ajax(
+						url,
+						objSendData,
+						function (res) {
+								if (!res || res.code != "0000" || !res.data) {
+								} else {
+										$(
+												pageAct.work_type == "1" ? "#inpWorPerId" : "#inpWorPerId_2"
+										).html();
+										strHtml = ``;
+										strHtml += `<option value=''>未選擇</option>`;
+										$.each(res.data, (index, roleObj) => {
+												strHtml += `<option value='${roleObj.userinfo_guid}'>${roleObj.full_name}</option>`;
+										});
+										$(pageAct.work_type == "1" ? "#inpWorPerId" : "#inpWorPerId_2").html(
+												strHtml
+										);
+								}
+						},
+						null,
+						"POST"
+				).send();
+		}
 
-						ope_imgHtml = null;
+		function selOpeFir() {
+				let url = baseApiUrl + "/operation/OpeFirSel";
+				objSendData.Data = { sub_system_tag: [pageAct.sysSub] };
+				ytAjax = new YourTeam.Ajax(
+						url,
+						objSendData,
+						function (res) {
+								if (!res || res.code != "0000" || !res.data) {
+								} else {
+										$(pageAct.work_type == "1" ? "#inpFixFirm" : "#inpFixFirm_2").html();
+										strHtml = ``;
+										strHtml += `<option value=''>未選擇</option>`;
+										$.each(res.data, (index, roleObj) => {
+												strHtml += `<option value='${roleObj.id}'>${roleObj.name}</option>`;
+										});
+										$(pageAct.work_type == "1" ? "#inpFixFirm" : "#inpFixFirm_2").html(
+												strHtml
+										);
+								}
+						},
+						null,
+						"POST"
+				).send();
+		}
 
-						$.each(res.data.lorf, function (i, v) {
-							let extName = v.ori_file_name.split(".")[1];
+		function selAllSysVal(elem) {
+				$(loadEle).Loading("start");
+				if ($(elem).html() == "全選類別") {
+						$("#mainList input").map(function (i, v) {
+								if (!$(v).is(":checked")) {
+										$(v).click();
+								}
+						});
+						$("#subList input").map(function (i, v) {
+								if (!$(v).is(":checked")) {
+										$(v).click();
+								}
+						});
+						$(elem).html("取消全選");
+				} else {
+						$("#mainList input").map(function (i, v) {
+								if ($(v).is(":checked")) $(v).click();
+						});
+						$("#subList input").map(function (i, v) {
+								if ($(v).is(":checked")) $(v).click();
+						});
+						$(elem).html("全選類別");
+				}
 
-							if (v?.ori_file_name != null) {
-								let imgUrl =
-									baseApiUrl +
-									"/upload/operation/" +
-									v?.save_file_name +
-									"." +
-									extName;
-								let fileObj = {
-									name: v?.ori_file_name,
-									dataURL: imgUrl,
-									savename: v?.save_file_name,
-									size: 0,
-									lorf: v,
-									isExisted: true,
+				refTable();
+				$(loadEle).Loading("close");
+		}
+
+		function event() {
+				onEvent("click", "#newForm", function () {
+						uploader["ope1"][0].dropzone.removeAllFiles();
+						uploader["ope2"][0].dropzone.removeAllFiles();
+						if (pageAct.work_type == null) {
+								pageAct.opeFirmAct = "add";
+								$("#opeFirmTitle").html("新增廠商資料");
+								$("#opeFirmModal input").map(function (i, v) {
+										$(v).val("");
+								});
+								$("#opeFirmModal [id*=-error]").hide();
+						} else {
+								clearOpeRecPageAct();
+								$(
+										"#" +
+										(pageAct.work_type == "1" ? "opeRecForm" : "opeRecForm_2") +
+										" [id*=-error]"
+								).hide();
+								pageAct.opeRecId = null;
+								pageAct.imageFile = [];
+								$(pageAct.work_type == "1" ? "#opeRecTitle" : "#opeRecTitle_2").html(
+										pageAct.work_type == 1 ? "新增保養" : "新增維修"
+								);
+								$(
+										pageAct.work_type == "1"
+												? "#opeRecModal input"
+												: "#opeRecModal_2 input"
+								).map(function (i, v) {
+										$(v).val("");
+								});
+								let today = displayDate(new Date(Date.now()), "date").replaceAll(
+										"/",
+										"-"
+								);
+								$(
+										pageAct.work_type == "1"
+												? "#opeRecModal input[id*=Time]"
+												: "#opeRecModal_2 input[id*=Time]"
+								).map(function (i, v) {
+										$(v).val(today);
+								});
+								$(pageAct.work_type == "1" ? "#ope_forImage" : "#ope_forImage_2").html(
+										""
+								);
+								$(pageAct.work_type == "1" ? "#ope_forFile" : "#ope_forFile_2").html(
+										""
+								);
+								$(
+										pageAct.work_type == "1" ? "#inpDescription" : "#inpDescription_2"
+								).val("");
+								$(pageAct.work_type == "1" ? "#inpNotice" : "#inpNotice_2").val("");
+								$(pageAct.work_type == "1" ? "#inpFixDo" : "#inpFixDo_2").val("");
+								selUser();
+								selDevice();
+								selOpeFir();
+								errCodeList();
+								getFormId();
+								getUser();
+						}
+
+						selSysMain();
+				});
+
+				onEvent("click", "#opeFirmEdiBtn", function () {
+						selSysMain();
+						$("#opeFirmTitle").html("編輯廠商資料");
+						let url = baseApiUrl + "/operation/OpeFirRead";
+						pageAct.opeFirmId = $(this).parent().data("id");
+						objSendData.Data = { id: pageAct.opeFirmId };
+						ytAjax = new YourTeam.Ajax(
+								url,
+								objSendData,
+								function (res) {
+										if (!res || res.code != "0000" || !res.data) {
+										} else {
+												pageAct.opeFirmAct = "edit";
+												$("#opeFirmForm select[id=inpFirmSelSysMain]")
+														.val(res.data.device_system_category_layer2)
+														.change();
+												$("#opeFirmForm select[id=inpFirmSelSysSub]")
+														.val(res.data.device_system_category_layer3)
+														.change();
+												$("#opeFirmForm input[id=inpName]").val(res.data.name);
+												$("#opeFirmForm input[id=inpConPer]").val(res.data.contact_person);
+												$("#opeFirmForm input[id=inpPhone]").val(res.data.phone);
+												$("#opeFirmForm input[id=inpEmail]").val(res.data.email);
+												$("#opeFirmForm input[id=inpTaxIdNum]").val(res.data.tax_id_number);
+												$("#opeFirmForm input[id=inpRemark]").val(res.data.remark);
+										}
+								},
+								null,
+								"POST"
+						).send();
+				});
+
+				onEvent("click", "#OpeFirmSendBtn", function () {
+						let form = $("#opeFirmForm");
+
+						$(form).validate({
+								rules: {
+										inpFirmSelSysMain: { required: true },
+										inpFirmSelSysSub: { required: true },
+										inpName: { required: true, maxlength: 50 },
+								},
+						});
+						if ($(form).valid()) {
+								let url =
+										baseApiUrl +
+										"/operation/" +
+										(pageAct.opeFirmAct == "add" ? "SaveOpeFirm" : "EdtOneOpeFirm");
+								let sendData = {
+										device_system_category_layer2: $("#inpFirmSelSysMain").val(),
+										device_system_category_layer3: $("#inpFirmSelSysSub").val(),
+										name: $("#inpName").val() || null,
+										contact_person: $("#inpConPer").val() || null,
+										phone: $("#inpPhone").val() || null,
+										email: $("#inpEmail").val() || null,
+										tax_id_number: $("#inpTaxIdNum").val() || null,
+										remark: $("#inpRemark").val() || null,
 								};
-								uploader[
-									"ope" + pageAct.work_type
-								][0].dropzone?.displayExistingFile(fileObj, imgUrl);
-							}
 
-							if (/\.(jpe?g|png|gif)$/i.test(v.ori_file_name)) {
-								/*ope_colI = creEle("i", null, null, null, ["fa fa-times"]);
+								if (pageAct.opeFirmAct == "edit") sendData.id = pageAct.opeFirmId;
+
+								objSendData.Data = sendData;
+
+								ytAjax = new YourTeam.Ajax(
+										url,
+										objSendData,
+										function (res) {
+												if (!res || res.code != "0000" || !res.data) {
+														toast_error(common.AddErr + (res.msg || res.data));
+												} else {
+														toast_ok(common.AddSuc);
+														//$("#opeFirmModal").modal("hide");
+														$("#OpeFirmCanBtn").click();
+														refTable();
+												}
+										},
+										null,
+										"POST"
+								).send();
+						}
+				});
+
+				onEvent("click", "#opeFirmDelBtn", function () {
+						pageAct.opeRecId = null;
+						pageAct.opeFirmId = $(this).parent().data("id");
+				});
+
+				onEvent("click", "#confirmDelBtn", function () {
+						objSendData.Data = { id: pageAct.opeFirmId ?? pageAct.opeRecId };
+						let url =
+								baseApiUrl +
+								"/operation/" +
+								(pageAct.work_type == null ? "DelOpeFirm" : "DelOpeRecord");
+
+						ytAjax = new YourTeam.Ajax(
+								url,
+								objSendData,
+								function (res) {
+										if (!res || res.code != "0000" || !res.data) {
+										} else {
+												toast_ok(common.DelSuc);
+												//$("#delModal").modal("hide");
+												$("#confirmDelCanBtn").click();
+												refTable();
+										}
+								},
+								null,
+								"DELETE"
+						).send();
+				});
+
+				onEvent("click", "#opeRecDelBtn", function () {
+						pageAct.opeRecId = $(this).parent().data("id");
+						pageAct.opeFirmId = null;
+				});
+
+				onEvent("click", "#OpeRecSendBtn, #OpeRecSendBtn_2", function () {
+						let form = $(pageAct.work_type == "1" ? "#opeRecForm" : "#opeRecForm_2");
+						if (pageAct.work_type == "1") {
+								$(form).validate({
+										rules: {
+												inpWorTyp: { required: true },
+												inpFixFirm: { required: true },
+												inpStatus: { required: true },
+												inpWorPerId: { required: true },
+										},
+								});
+						} else {
+								$(form).validate({
+										rules: {
+												inpWorTyp_2: { required: true },
+												inpFixFirm_2: { required: true },
+												inpStatus_2: { required: true },
+												inpWorPerId_2: { 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",
+										$(pageAct.work_type == "1" ? "#inpErrCode" : "#inpErrCode_2").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.sysMain);
+								fd.append("device_system_category_layer3", pageAct.sysSub);
+								fd.append(
+										"work_type",
+										parseInt(
+												$(pageAct.work_type == "1" ? "#inpWorTyp" : "#inpWorTyp_2").val()
+										)
+								);
+								fd.append(
+										"fix_do",
+										$(pageAct.work_type == "1" ? "#inpFixDo" : "#inpFixDo_2").val()
+								);
+								fd.append(
+										"fix_do_code",
+										$(
+												pageAct.work_type == "1" ? "#inpFixDoCode" : "#inpFixDoCode_2"
+										).val()
+								);
+								fd.append(
+										"fix_firm",
+										parseInt(
+												$(pageAct.work_type == "1" ? "#inpFixFirm" : "#inpFixFirm_2").val()
+										)
+								);
+								fd.append(
+										"status",
+										parseInt(
+												$(
+														"#" +
+														(pageAct.work_type == "1" ? "inpStatus" : "inpStatus_2") +
+														" [name=" +
+														(pageAct.work_type == "1" ? "inpSta" : "inpSta_2") +
+														"]:checked"
+												).data("value")
+										)
+								);
+								fd.append(
+										"work_person_id",
+										$(pageAct.work_type == "1" ? "#inpWorPerId" : "#inpWorPerId_2").val()
+								);
+								fd.append(
+										"start_time",
+										($(
+												pageAct.work_type == "1" ? "#inpStaTime" : "#inpStaTime_2"
+										).val() || null) == null
+												? null
+												: new Date(
+														$(
+																pageAct.work_type == "1" ? "#inpStaTime" : "#inpStaTime_2"
+														).val()
+												).toISOString()
+								);
+								//fd.append("end_time", ($('#inpEndTime').val() || null) == null ? $('#inpEndTime').val() : new Date($('#inpEndTime').val()).toISOString());
+								//fd.append("work_time", ($('#inpWorTime').val() || null) == null ? $('#inpWorTime').val() : new Date($('#inpWorTime').val()).toISOString());
+								fd.append(
+										"finish_time",
+										parseInt(
+												$(
+														"#" +
+														(pageAct.work_type == "1" ? "inpStatus" : "inpStatus_2") +
+														" [name=" +
+														(pageAct.work_type == "1" ? "inpSta" : "inpSta_2") +
+														"]:checked"
+												).data("value")
+										) == 1
+												? new Date(Date.now()).toISOString()
+												: null
+								);
+								fd.append(
+										"notice",
+										$(pageAct.work_type == "1" ? "#inpNotice" : "#inpNotice_2").val() ||
+										null
+								);
+								fd.append(
+										"description",
+										$(
+												pageAct.work_type == "1" ? "#inpDescription" : "#inpDescription_2"
+										).val() || null
+								);
+
+								//let sendData = {
+								//	location: $('#inpArea option:selected').text() + $('#inpBuilding option:selected').text() + $('#inpFloor option:selected').text(),
+								//	location_code: $('#inpArea').val().toString() + $('#inpBuilding').val().toString() + $('#inpFloor').val().toString(),
+								//	device_system_category_layer2: $('#inpRecSelSysMain').val(),
+								//	device_system_category_layer3: $('#inpRecSelSysSub').val(),
+								//	work_type: parseInt($('#inpWorTyp').val()),
+								//	fix_do: $('#inpFixDo').val(),
+								//	fix_do_code: $('#inpFixDoCode').val(),
+								//	fix_firm: parseInt($('#inpFixFirm').val()),
+								//	status: parseInt($('#inpStatus').val()),
+								//	work_person_id: $('#inpWorPerId').val(),
+								//	start_time: $('#inpStaTime').val() == null ? null : new Date(new Date($('#inpStaTime').val()).getTime() + gmtTime),
+								//	end_time: $('#inpEndTime').val() == null ? $('#inpEndTime').val() : new Date(new Date($('#inpEndTime').val()).getTime() + gmtTime),
+								//	work_time: $('#inpWorTime').val() == null ? $('#inpWorTime').val() : new Date(new Date($('#inpWorTime').val()).getTime() + gmtTime),
+								//	finish_time: $('#inpFinTime').val() == null ? null : new Date(new Date($('#inpFinTime').val()).getTime() + gmtTime),
+								//	notice: $('#inpNotice').val() || null,
+								//	description: $('#inpDescription').val() || null,
+								//	lorf: pageAct.imageFile,
+								//};
+								if (pageAct.opeRecId != null) fd.append("id", pageAct.opeRecId);
+
+								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");
+														$(
+																pageAct.work_type == "1" ? "#OpeRecCanBtn" : "#OpeRecCanBtn_2"
+														).click();
+														refTable();
+												}
+										},
+								});
+						}
+				});
+
+				onEvent("click", "#opeRecEdiBtn", function () {
+						clearOpeRecPageAct();
+						selUser();
+						selDevice();
+						uploader["ope1"][0].dropzone.removeAllFiles();
+						uploader["ope2"][0].dropzone.removeAllFiles();
+
+						$("#ope_forImage").html("");
+						$("#ope_forFile").html("");
+						$("#ope_forImage_2").html("");
+						$("#ope_forFile_2").html("");
+
+						pageAct.imageFile = [];
+						$("#opeRecTitle").html(pageAct.work_type == 1 ? "編輯保養" : "編輯維修");
+						let url = baseApiUrl + "/operation/OpeRecRead";
+						pageAct.opeRecId = $(this).parent().data("id");
+						objSendData.Data = { id: pageAct.opeRecId };
+						ytAjax = new YourTeam.Ajax(
+								url,
+								objSendData,
+								function (res) {
+										if (!res || res.code != "0000" || !res.data) {
+										} else {
+												pageAct.sysMain = res.data.device_system_category_layer2;
+												pageAct.sysSub = res.data.device_system_category_layer3;
+												pageAct.number = res.data.fix_do_code;
+
+												callbackForErr(
+														JSON.stringify({
+																count: [res.data].length,
+																data: [{ uuid: res.data.error_code }],
+														})
+												);
+												selOpeFir();
+												$(pageAct.work_type == "1" ? "#inpNumber" : "#inpNumber_2").val(
+														res.data.formId
+												);
+												$(pageAct.work_type == "1" ? "#inpWorTyp" : "#inpWorTyp_2").val(
+														res.data.work_type
+												);
+												$(pageAct.work_type == "1" ? "#inpErrCode" : "#inpErrCode_2").val(
+														res.data.error_code
+												);
+												$(pageAct.work_type == "1" ? "#inpFixDo" : "#inpFixDo_2").val(
+														res.data.fix_do
+												);
+												$(
+														pageAct.work_type == "1" ? "#inpFixDoCode" : "#inpFixDoCode_2"
+												).val(res.data.fix_do_code);
+												$(pageAct.work_type == "1" ? "#inpFixFirm" : "#inpFixFirm_2").val(
+														res.data.fix_firm.toString()
+												);
+												$(
+														"#" +
+														(pageAct.work_type == "1" ? "inpStatus" : "inpStatus_2") +
+														" [name=" +
+														(pageAct.work_type == "1" ? "inpSta" : "inpSta_2") +
+														"][data-value=" +
+														res.data.status +
+														"]"
+												).click();
+												$(pageAct.work_type == "1" ? "#inpWorPerId" : "#inpWorPerId_2").val(
+														res.data.work_person_id
+												);
+												$(pageAct.work_type == "1" ? "#inpStaTime" : "#inpStaTime_2").val(
+														displayDate(res.data.start_time, "date").replaceAll("/", "-")
+												);
+												$(pageAct.work_type == "1" ? "#inpNotice" : "#inpNotice_2").val(
+														res.data.notice
+												);
+												$(
+														pageAct.work_type == "1" ? "#inpDescription" : "#inpDescription_2"
+												).val(res.data.description);
+												let elemSel = $(
+														pageAct.work_type == "1" ? "#inpFixDoCode" : "#inpFixDoCode_2"
+												).find("option:selected");
+												pageAct.number = elemSel.val();
+
+												ope_imgHtml = null;
+
+												$.each(res.data.lorf, function (i, v) {
+														let extName = v.ori_file_name.split(".")[1];
+
+														if (v?.ori_file_name != null) {
+																let imgUrl =
+																		baseApiUrl +
+																		"/upload/operation/" +
+																		v?.save_file_name +
+																		"." +
+																		extName;
+																let fileObj = {
+																		name: v?.ori_file_name,
+																		dataURL: imgUrl,
+																		savename: v?.save_file_name,
+																		size: 0,
+																		lorf: v,
+																		isExisted: true,
+																};
+																uploader[
+																		"ope" + pageAct.work_type
+																][0].dropzone?.displayExistingFile(fileObj, imgUrl);
+														}
+
+														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" });
@@ -2061,12 +2073,12 @@
 										ope_colBtn.append(ope_colI);
 										ope_imgHtml.append(ope_colBtn);
 										$(pageAct.work_type == "1" ? '#ope_forImage' : '#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|ppt?x)$/i.test(
-									v.ori_file_name
-								)
-							) {
-								/*icons = null
+														} else if (
+																/\.(xls?x|doc?x|ptt?x|pdf|zip|rar|7zip|txt|odt|xml|rtf|ods|odp|pps?x|ppt?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")
@@ -2088,327 +2100,328 @@
 										ope_imgHtml.append(ope_colA);
 										ope_imgHtml.append(ope_colBtn);
 										$(pageAct.work_type == "1" ? '#ope_forFile' : '#ope_forFile_2').append(ope_imgHtml ? ope_imgHtml.outerHtml() : null);*/
-							}
-						});
-					}
-				},
-				null,
-				"POST"
-			).send();
-		});
-
-		onEvent("click", "[name=btnDelImg]", function () {
-			elem = $(this).parent();
-			if (elem.attr("data-id"))
-				pageAct.imageFile.push({
-					id: elem.data("id"),
-					ori_file_name: elem.find("img").data("filename"),
-					save_file_name: elem.find("img").data("savename"),
-				});
-			else {
-				pageAct.imageFile = $.grep(pageAct.imageFile, function (image) {
-					return image.save_file_name != elem.find("img").data("savename");
+														}
+												});
+										}
+								},
+								null,
+								"POST"
+						).send();
 				});
 
-				pageAct.imageFile = $.grep(pageAct.imageFile, function (file) {
-					return file.save_file_name != elem.find("a").data("savename");
+				onEvent("click", "[name=btnDelImg]", function () {
+						elem = $(this).parent();
+						if (elem.attr("data-id"))
+								pageAct.imageFile.push({
+										id: elem.data("id"),
+										ori_file_name: elem.find("img").data("filename"),
+										save_file_name: elem.find("img").data("savename"),
+								});
+						else {
+								pageAct.imageFile = $.grep(pageAct.imageFile, function (image) {
+										return image.save_file_name != elem.find("img").data("savename");
+								});
+
+								pageAct.imageFile = $.grep(pageAct.imageFile, function (file) {
+										return file.save_file_name != elem.find("a").data("savename");
+								});
+						}
+
+						elem.remove();
 				});
-			}
 
-			elem.remove();
-		});
-
-		onEvent("change", "#inpFirmSelSysMain", function () {
-			let mainTag = $("#inpFirmSelSysMain").find("option:selected").val();
-			$(`[data-main=${mainTag}]`).attr("hidden", false);
-			$("#inpFirmSelSysSub")
-				.find(`option[data-main!=${mainTag}]`)
-				.attr("hidden", true);
-			$(`#inpFirmSelSysSub option`).removeAttr("selected");
-			$($(`#inpFirmSelSysSub option[data-main=${mainTag}]`)[0]).attr(
-				"selected",
-				"selected"
-			);
-		});
-
-		onEvent("change", "#inpFixDoCode, #inpFixDoCode_2", function () {
-			elemSel = $(this).find("option:selected");
-			pageAct.sysSub = elemSel.data("sub");
-			pageAct.sysMain = elemSel.data("main");
-			pageAct.floor = elemSel.data("floor");
-			pageAct.number = elemSel.val();
-			selOpeFir();
-			errCodeList();
-		});
-	}
-
-	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);
-	}
-
-	function callbackForErr(res) {
-		res = JSON.parse(res) || res;
-		console.log(res);
-		strHtml = ``;
-
-		$.each(res.data, function (i, v) {
-			msg =
-				v.msgText != null
-					? $.trim(v.msgText.toString()).length > 0
-						? v.msgText.split(":")[0]
-						: ""
-					: "";
-			strHtml += `<option value=${v.uuid}>${v.uuid.split("-")[0]}</option>`;
-		});
-		if (res.count > 0)
-			$(pageAct.work_type == "1" ? "#inpErrCode" : "#inpErrCode_2").html(
-				strHtml
-			);
-		else $(pageAct.work_type == "1" ? "#inpErrCode" : "#inpErrCode_2").html("");
-		$(loadEle).Loading("close");
-	}
-
-	//上傳檔案 dropzone
-	function initDropzone() {
-		Dropzone.autoDiscover = false;
-		uploader.ope1 = $("#ope_dropZone").dropzone({
-			url: "/",
-			addRemoveLinks: true,
-			dictRemoveFile: `<span class="material-icons mi-delete">delete</span>`,
-			dictInvalidFileType: `上傳格式錯誤`,
-			dictCancelUploadConfirmation: `確定要取消上傳此檔案嗎？`,
-			dictCancelUpload: `<span class="material-icons mi-cancel">cancel</span>`,
-			maxFilesize: 10,
-			filesizeBase: 1024,
-			thumbnailWidth: 300,
-			thumbnailHeight: 300,
-			maxFiles: 50,
-			acceptedFiles:
-				".pdf, .docx, .doc, .xls, .xlsm, .xlsx, .ppt, .pptx, .gif, .png, .jpg, .jpeg",
-			headers: { Authorization: "Bearer " + cookies.get("JWT-Authorization") },
-			autoProcessQueue: false,
-			init: function () {
-				this.on("addedfile", function (file) {
-					$(this.previewsContainer).find(".dz-progress").addClass("d-none");
-					$(this.previewsContainer)
-						.find(".dz-size")
-						.css("visibility", "hidden");
-					if (file.savename) {
-						file.accepted = true;
-						this.files.push(file);
-					}
+				onEvent("change", "#inpFirmSelSysMain", function () {
+						let mainTag = $("#inpFirmSelSysMain").find("option:selected").val();
+						$(`[data-main=${mainTag}]`).attr("hidden", false);
+						$("#inpFirmSelSysSub")
+								.find(`option[data-main!=${mainTag}]`)
+								.attr("hidden", true);
+						$(`#inpFirmSelSysSub option`).removeAttr("selected");
+						$($(`#inpFirmSelSysSub option[data-main=${mainTag}]`)[0]).attr(
+								"selected",
+								"selected"
+						);
 				});
-				this.on("complete", function (file) {
-					if (file.savename) {
-						$(file.previewElement).find(".dz-image img").remove();
-					}
+
+				onEvent("change", "#inpFixDoCode, #inpFixDoCode_2", function () {
+						elemSel = $(this).find("option:selected");
+						pageAct.sysSub = elemSel.data("sub");
+						pageAct.sysMain = elemSel.data("main");
+						pageAct.floor = elemSel.data("floor");
+						pageAct.number = elemSel.val();
+						selOpeFir();
+						errCodeList();
 				});
-				this.on("thumbnail", function (file) {
-					// 若為讀取檔案時
-					if (file.savename) {
-						$(file.previewElement)
-							.removeClass("dz-image-preview")
-							.addClass("dz-file-preview");
-					}
+		}
+
+		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);
+		}
+
+		function callbackForErr(res) {
+				res = JSON.parse(res) || res;
+				console.log(res);
+				strHtml = ``;
+
+				$.each(res.data, function (i, v) {
+						msg =
+								v.msgText != null
+										? $.trim(v.msgText.toString()).length > 0
+												? v.msgText.split(":")[0]
+												: ""
+										: "";
+						strHtml += `<option value=${v.uuid}>${v.uuid.split("-")[0]}</option>`;
 				});
-			},
-		});
+				//if (res.count > 0)
+				//	$(pageAct.work_type == "1" ? "#inpErrCode" : "#inpErrCode_2").html(
+				//		strHtml
+				//	);
+				//else
+				$(pageAct.work_type == "1" ? "#inpErrCode" : "#inpErrCode_2").html("");
+				$(loadEle).Loading("close");
+		}
 
-		uploader["ope1"][0].dropzone.on("addedfile", (file) => {
-			let fileHelper = new YourTeam.Utility.File();
-			if (/\.(jpe?g|png|gif)$/i.test(file.name)) {
-				if (file.isExisted) {
-					pageAct.imageFile.push({
-						ori_file_name: file.name,
-						save_file_name: file.lorf.save_file_name,
-						file: file,
-					});
-				} else {
-					pageAct.imageFile.push({
-						ori_file_name: file.name,
-						save_file_name: file.upload.uuid,
-						file: file,
-					});
-				}
-			} else if (
-				/\.(xls?x|doc?x|ptt?x|pdf|zip|rar|7zip|txt|odt|xml|rtf|ods|odp|pps?x|ppt?x)$/i.test(
-					file.name
-				)
-			) {
-				if (file.isExisted) {
-					pageAct.imageFile.push({
-						ori_file_name: file.name,
-						save_file_name: file.lorf.save_file_name,
-						file: file,
-					});
-				} else {
-					pageAct.imageFile.push({
-						ori_file_name: file.name,
-						save_file_name: file.upload.uuid,
-						file: file,
-					});
-				}
-			}
-		});
-
-		uploader["ope1"][0].dropzone.on("removedfile", (file) => {
-			if (file.isExisted)
-				pageAct.imageFile.push({
-					id: file.lorf.id,
-					ori_file_name: file.name,
-					save_file_name: file.savename,
+		//上傳檔案 dropzone
+		function initDropzone() {
+				Dropzone.autoDiscover = false;
+				uploader.ope1 = $("#ope_dropZone").dropzone({
+						url: "/",
+						addRemoveLinks: true,
+						dictRemoveFile: `<span class="material-icons mi-delete">delete</span>`,
+						dictInvalidFileType: `上傳格式錯誤`,
+						dictCancelUploadConfirmation: `確定要取消上傳此檔案嗎？`,
+						dictCancelUpload: `<span class="material-icons mi-cancel">cancel</span>`,
+						maxFilesize: 10,
+						filesizeBase: 1024,
+						thumbnailWidth: 300,
+						thumbnailHeight: 300,
+						maxFiles: 50,
+						acceptedFiles:
+								".pdf, .docx, .doc, .xls, .xlsm, .xlsx, .ppt, .pptx, .gif, .png, .jpg, .jpeg",
+						headers: { Authorization: "Bearer " + cookies.get("JWT-Authorization") },
+						autoProcessQueue: false,
+						init: function () {
+								this.on("addedfile", function (file) {
+										$(this.previewsContainer).find(".dz-progress").addClass("d-none");
+										$(this.previewsContainer)
+												.find(".dz-size")
+												.css("visibility", "hidden");
+										if (file.savename) {
+												file.accepted = true;
+												this.files.push(file);
+										}
+								});
+								this.on("complete", function (file) {
+										if (file.savename) {
+												$(file.previewElement).find(".dz-image img").remove();
+										}
+								});
+								this.on("thumbnail", function (file) {
+										// 若為讀取檔案時
+										if (file.savename) {
+												$(file.previewElement)
+														.removeClass("dz-image-preview")
+														.addClass("dz-file-preview");
+										}
+								});
+						},
 				});
-			else {
-				pageAct.imageFile.splice(
-					pageAct.imageFile.findIndex((f) => f.savename == file.upload?.uuid),
-					1
-				);
-			}
-			file.previewElement.remove();
-		});
 
-		uploader.ope2 = $("#ope_dropZone_2").dropzone({
-			url: "/",
-			addRemoveLinks: true,
-			dictRemoveFile: `<span class="material-icons mi-delete">delete</span>`,
-			dictInvalidFileType: `上傳格式錯誤`,
-			dictCancelUploadConfirmation: `確定要取消上傳此檔案嗎？`,
-			dictCancelUpload: `<span class="material-icons mi-cancel">cancel</span>`,
-			maxFilesize: 10,
-			filesizeBase: 1024,
-			maxFiles: 50,
-			acceptedFiles:
-				".pdf, .docx, .doc, .xls, .xlsm, .xlsx, .ppt, .pptx, .gif, .png, .jpg, .jpeg",
-			headers: { Authorization: "Bearer " + cookies.get("JWT-Authorization") },
-			autoProcessQueue: false,
-			init: function () {
-				this.on("addedfile", function (file) {
-					$(this.previewsContainer).find(".dz-progress").addClass("d-none");
-					$(this.previewsContainer)
-						.find(".dz-size")
-						.css("visibility", "hidden");
-					if (file.savename) {
-						file.accepted = true;
-						this.files.push(file);
-					}
+				uploader["ope1"][0].dropzone.on("addedfile", (file) => {
+						let fileHelper = new YourTeam.Utility.File();
+						if (/\.(jpe?g|png|gif)$/i.test(file.name)) {
+								if (file.isExisted) {
+										pageAct.imageFile.push({
+												ori_file_name: file.name,
+												save_file_name: file.lorf.save_file_name,
+												file: file,
+										});
+								} else {
+										pageAct.imageFile.push({
+												ori_file_name: file.name,
+												save_file_name: file.upload.uuid,
+												file: file,
+										});
+								}
+						} else if (
+								/\.(xls?x|doc?x|ptt?x|pdf|zip|rar|7zip|txt|odt|xml|rtf|ods|odp|pps?x|ppt?x)$/i.test(
+										file.name
+								)
+						) {
+								if (file.isExisted) {
+										pageAct.imageFile.push({
+												ori_file_name: file.name,
+												save_file_name: file.lorf.save_file_name,
+												file: file,
+										});
+								} else {
+										pageAct.imageFile.push({
+												ori_file_name: file.name,
+												save_file_name: file.upload.uuid,
+												file: file,
+										});
+								}
+						}
 				});
-				this.on("complete", function (file) {
-					if (file.savename) {
-						$(file.previewElement).find(".dz-image img").remove();
-					}
+
+				uploader["ope1"][0].dropzone.on("removedfile", (file) => {
+						if (file.isExisted)
+								pageAct.imageFile.push({
+										id: file.lorf.id,
+										ori_file_name: file.name,
+										save_file_name: file.savename,
+								});
+						else {
+								pageAct.imageFile.splice(
+										pageAct.imageFile.findIndex((f) => f.savename == file.upload?.uuid),
+										1
+								);
+						}
+						file.previewElement.remove();
 				});
-				this.on("thumbnail", function (file) {
-					// 若為讀取檔案時
-					if (file.savename) {
-						$(file.previewElement)
-							.removeClass("dz-image-preview")
-							.addClass("dz-file-preview");
-					}
+
+				uploader.ope2 = $("#ope_dropZone_2").dropzone({
+						url: "/",
+						addRemoveLinks: true,
+						dictRemoveFile: `<span class="material-icons mi-delete">delete</span>`,
+						dictInvalidFileType: `上傳格式錯誤`,
+						dictCancelUploadConfirmation: `確定要取消上傳此檔案嗎？`,
+						dictCancelUpload: `<span class="material-icons mi-cancel">cancel</span>`,
+						maxFilesize: 10,
+						filesizeBase: 1024,
+						maxFiles: 50,
+						acceptedFiles:
+								".pdf, .docx, .doc, .xls, .xlsm, .xlsx, .ppt, .pptx, .gif, .png, .jpg, .jpeg",
+						headers: { Authorization: "Bearer " + cookies.get("JWT-Authorization") },
+						autoProcessQueue: false,
+						init: function () {
+								this.on("addedfile", function (file) {
+										$(this.previewsContainer).find(".dz-progress").addClass("d-none");
+										$(this.previewsContainer)
+												.find(".dz-size")
+												.css("visibility", "hidden");
+										if (file.savename) {
+												file.accepted = true;
+												this.files.push(file);
+										}
+								});
+								this.on("complete", function (file) {
+										if (file.savename) {
+												$(file.previewElement).find(".dz-image img").remove();
+										}
+								});
+								this.on("thumbnail", function (file) {
+										// 若為讀取檔案時
+										if (file.savename) {
+												$(file.previewElement)
+														.removeClass("dz-image-preview")
+														.addClass("dz-file-preview");
+										}
+								});
+						},
 				});
-			},
-		});
 
-		uploader["ope2"][0].dropzone.on("addedfile", (file) => {
-			let fileHelper = new YourTeam.Utility.File();
-			tmpGuidArr = [];
+				uploader["ope2"][0].dropzone.on("addedfile", (file) => {
+						let fileHelper = new YourTeam.Utility.File();
+						tmpGuidArr = [];
 
-			if (/\.(jpe?g|png|gif)$/i.test(file.name)) {
-				if (file.isExisted) {
-					pageAct.imageFile.push({
-						ori_file_name: file.name,
-						save_file_name: file.lorf.save_file_name,
-						file: file,
-					});
-				} else {
-					pageAct.imageFile.push({
-						ori_file_name: file.name,
-						save_file_name: file.upload.uuid,
-						file: file,
-					});
-				}
-			} else if (
-				/\.(xls?x|doc?x|ptt?x|pdf|zip|rar|7zip|txt|odt|xml|rtf|ods|odp|pps?x|ppt?x)$/i.test(
-					file.name
-				)
-			) {
-				if (file.isExisted) {
-					pageAct.imageFile.push({
-						ori_file_name: file.name,
-						save_file_name: file.lorf.save_file_name,
-						file: file,
-					});
-				} else {
-					pageAct.imageFile.push({
-						ori_file_name: file.name,
-						save_file_name: file.upload.uuid,
-						file: file,
-					});
-				}
-			}
-		});
-
-		uploader["ope2"][0].dropzone.on("removedfile", (file) => {
-			if (file.isExisted)
-				pageAct.imageFile.push({
-					id: file.lorf.id,
-					ori_file_name: file.name,
-					save_file_name: file.savename,
+						if (/\.(jpe?g|png|gif)$/i.test(file.name)) {
+								if (file.isExisted) {
+										pageAct.imageFile.push({
+												ori_file_name: file.name,
+												save_file_name: file.lorf.save_file_name,
+												file: file,
+										});
+								} else {
+										pageAct.imageFile.push({
+												ori_file_name: file.name,
+												save_file_name: file.upload.uuid,
+												file: file,
+										});
+								}
+						} else if (
+								/\.(xls?x|doc?x|ptt?x|pdf|zip|rar|7zip|txt|odt|xml|rtf|ods|odp|pps?x|ppt?x)$/i.test(
+										file.name
+								)
+						) {
+								if (file.isExisted) {
+										pageAct.imageFile.push({
+												ori_file_name: file.name,
+												save_file_name: file.lorf.save_file_name,
+												file: file,
+										});
+								} else {
+										pageAct.imageFile.push({
+												ori_file_name: file.name,
+												save_file_name: file.upload.uuid,
+												file: file,
+										});
+								}
+						}
 				});
-			else {
-				pageAct.imageFile.splice(
-					pageAct.imageFile.findIndex((f) => f.savename == file.upload?.uuid),
-					1
-				);
-			}
-			file.previewElement.remove();
-		});
-	}
 
-	function getFormId() {
-		ytAjax = new YourTeam.Ajax(
-			baseApiUrl + "/operation/GetFormId",
-			objSendData,
-			function (res) {
-				if (!res || res.code != "0000" || !res.data) {
-				} else {
-					$(pageAct.work_type == "1" ? "#inpNumber" : "#inpNumber_2").val(
-						res.data
-					);
-				}
-			},
-			null,
-			"POST"
-		).send();
-	}
+				uploader["ope2"][0].dropzone.on("removedfile", (file) => {
+						if (file.isExisted)
+								pageAct.imageFile.push({
+										id: file.lorf.id,
+										ori_file_name: file.name,
+										save_file_name: file.savename,
+								});
+						else {
+								pageAct.imageFile.splice(
+										pageAct.imageFile.findIndex((f) => f.savename == file.upload?.uuid),
+										1
+								);
+						}
+						file.previewElement.remove();
+				});
+		}
 
-	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 getFormId() {
+				ytAjax = new YourTeam.Ajax(
+						baseApiUrl + "/operation/GetFormId",
+						objSendData,
+						function (res) {
+								if (!res || res.code != "0000" || !res.data) {
+								} else {
+										$(pageAct.work_type == "1" ? "#inpNumber" : "#inpNumber_2").val(
+												res.data
+										);
+								}
+						},
+						null,
+						"POST"
+				).send();
+		}
+
+		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();
+		}
 </script>
diff --git a/Frontend/index.html b/Frontend/index.html
index 595ecc5..9352697 100644
--- a/Frontend/index.html
+++ b/Frontend/index.html
@@ -9,76 +9,76 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
 -->
 <html lang="zh-hant-TW" class="root-text-lg">
 <head>
-    <meta charset="utf-8" />
-    <title>Marketing Dashboard - Application Intel - SmartAdmin v4.5.1</title>
-    <meta name="description" content="Marketing Dashboard" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <meta name="viewport"
-          content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no, minimal-ui" />
-    <!-- Call App Mode on ios devices -->
-    <meta name="apple-mobile-web-app-capable" content="yes" />
-    <!-- Remove Tap Highlight on Windows Phone IE -->
-    <meta name="msapplication-tap-highlight" content="no" />
-    <!-- base css -->
-    <link id="vendorsbundle"
-          rel="stylesheet"
-          media="screen, print"
-          href="lib/vendors.bundle.css" />
-    <link id="appbundle"
-          rel="stylesheet"
-          media="screen, print"
-          href="lib/app.bundle.css" />
-    <link id="mytheme" rel="stylesheet" media="screen, print" href="#" />
-    <link id="myskin"
-          rel="stylesheet"
-          media="screen, print"
-          href="lib/skins/skin-master.css" />
-    <link rel="stylesheet" href="lib/notifications/toastr/toastr.min.css" />
-    <link rel="stylesheet" href="lib/dropzone/dropzone.css" />
-    <!-- Place favicon.ico in the root directory -->
-    <link rel="apple-touch-icon"
-          sizes="180x180"
-          href="img/favicon/apple-touch-icon.png" />
-    <link rel="icon"
-          type="image/png"
-          sizes="32x32"
-          href="img/favicon/favicon-32x32.png" />
-    <link rel="mask-icon"
-          href="img/favicon/safari-pinned-tab.svg"
-          color="#5bbad5" />
-    <!-- Font Awesome -->
-    <link href="lib/fontawesome-free/css/all.min.css" rel="stylesheet" />
-    <link href="lib/jquery-ui/jquery-ui.min.css" rel="stylesheet" />
+  <meta charset="utf-8" />
+  <title>Marketing Dashboard - Application Intel - SmartAdmin v4.5.1</title>
+  <meta name="description" content="Marketing Dashboard" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  <meta name="viewport"
+        content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no, minimal-ui" />
+  <!-- Call App Mode on ios devices -->
+  <meta name="apple-mobile-web-app-capable" content="yes" />
+  <!-- Remove Tap Highlight on Windows Phone IE -->
+  <meta name="msapplication-tap-highlight" content="no" />
+  <!-- base css -->
+  <link id="vendorsbundle"
+        rel="stylesheet"
+        media="screen, print"
+        href="lib/vendors.bundle.css" />
+  <link id="appbundle"
+        rel="stylesheet"
+        media="screen, print"
+        href="lib/app.bundle.css" />
+  <link id="mytheme" rel="stylesheet" media="screen, print" href="#" />
+  <link id="myskin"
+        rel="stylesheet"
+        media="screen, print"
+        href="lib/skins/skin-master.css" />
+  <link rel="stylesheet" href="lib/notifications/toastr/toastr.min.css" />
+  <link rel="stylesheet" href="lib/dropzone/dropzone.css" />
+  <!-- Place favicon.ico in the root directory -->
+  <link rel="apple-touch-icon"
+        sizes="180x180"
+        href="img/favicon/apple-touch-icon.png" />
+  <link rel="icon"
+        type="image/png"
+        sizes="32x32"
+        href="img/favicon/favicon-32x32.png" />
+  <link rel="mask-icon"
+        href="img/favicon/safari-pinned-tab.svg"
+        color="#5bbad5" />
+  <!-- Font Awesome -->
+  <link href="lib/fontawesome-free/css/all.min.css" rel="stylesheet" />
+  <link href="lib/jquery-ui/jquery-ui.min.css" rel="stylesheet" />
 
-    <!--<link href="lib/chart.js/Chart.min.css" rel="stylesheet" />-->
-    <link href="lib/jstree-master/themes/default/style.min.css"
-          rel="stylesheet" />
-    <link href="lib/jstree-master/themes/default-dark/style.min.css"
-          rel="stylesheet" />
-    <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
-          rel="stylesheet" />
-    <!--<link rel="stylesheet" media="screen, print" href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap.min.css">-->
-    <link rel="stylesheet"
-          media="screen, print"
-          href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap4.min.css" />
-    <link rel="stylesheet" href="css/site.css" />
-    <link rel="stylesheet"
-          href="css/yourteam/plugins/yt-tooltip/yt-tooltip.css" />
-    <link rel="stylesheet"
-          href="css/yourteam/plugins/yt-notice/yt-notice.css" />
-    <link rel="stylesheet"
-          href="css/yourteam/plugins/yt-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" />
-    <link rel="stylesheet"
-          href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css" />
+  <link rel="stylesheet"
+        href="lib\bootstrap-datepicker\bootstrap-datepicker.min.css"
+        type="text/css" />
+  <link rel="stylesheet"
+        href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css" />
 </head>
 <!-- BEGIN Body -->
 <!-- Possible Classes
@@ -107,692 +107,692 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
 -->
 
 <body class="mod-bg-1 mod-nav-link mod-skin-dark mod-hide-info-card nav-function-top nav-function-fixed mod-lean-subheader desktop chrome webkit pace-done blur">
-    <!-- DOC: script to save and load page settings -->
-    <script>
-        /**
-         *	This script should be placed right after the body tag for fast execution
-         *	Note: the script is written in pure javascript and does not depend on thirdparty library
-         **/
-        "use strict";
+  <!-- DOC: script to save and load page settings -->
+  <script>
+    /**
+     *	This script should be placed right after the body tag for fast execution
+     *	Note: the script is written in pure javascript and does not depend on thirdparty library
+     **/
+    "use strict";
 
-        var classHolder = document.getElementsByTagName("BODY")[0],
-            /**
-             * Load from localstorage
-             **/
-            themeSettings = localStorage.getItem("themeSettings")
-                ? JSON.parse(localStorage.getItem("themeSettings"))
-                : {},
-            themeURL = themeSettings.themeURL || "",
-            themeOptions = themeSettings.themeOptions || "";
-        /**
-         * Load theme options
-         **/
-        if (themeSettings.themeOptions) {
-            classHolder.className = themeSettings.themeOptions;
-            console.log("%c✔ Theme settings loaded", "color: #148f32");
-        } else {
-            console.log(
-                "%c✔ Heads up! Theme settings is empty or does not exist, loading default settings...",
-                "color: #ed1c24"
-            );
-        }
-        if (themeSettings.themeURL && !document.getElementById("mytheme")) {
-            var cssfile = document.createElement("link");
-            cssfile.id = "mytheme";
-            cssfile.rel = "stylesheet";
-            cssfile.href = themeURL;
-            document.getElementsByTagName("head")[0].appendChild(cssfile);
-        } else if (themeSettings.themeURL && document.getElementById("mytheme")) {
-            document.getElementById("mytheme").href = themeSettings.themeURL;
-        }
-        /**
-         * Save to localstorage
-         **/
-        var saveSettings = function () {
-            themeSettings.themeOptions = String(classHolder.className)
-                .split(/[^\w-]+/)
-                .filter(function (item) {
-                    return /^(nav|header|footer|mod|display)-/i.test(item);
-                })
-                .join(" ");
-            if (document.getElementById("mytheme")) {
-                themeSettings.themeURL = document
-                    .getElementById("mytheme")
-                    .getAttribute("href");
-            }
-            localStorage.setItem("themeSettings", JSON.stringify(themeSettings));
-        };
-        /**
-         * Reset settings
-         **/
-        var resetSettings = function () {
-            localStorage.setItem("themeSettings", "");
-        };
-    </script>
-    <!-- BEGIN Page Wrapper -->
-    <div class="page-wrapper">
-        <div class="page-inner">
-            <!-- BEGIN Left Aside -->
-            <!-- END Left Aside -->
-            <div class="page-content-wrapper">
-                <!-- BEGIN Page Header -->
-                <header class="page-header" role="banner">
-                    <!--we need this logo when user switches to nav-function-top-->
-                    <div class="page-logo">
-                        <a href="javascript:;"
-                           name="topFunBtn"
-                           data-page="dashboard"
-                           class="page-logo-link press-scale-down d-flex align-items-center position-relative">
-                            <img src="img/logo.png"
-                                 alt="SmartAdmin WebApp"
-                                 aria-roledescription="logo"
-                                 style="height: 36px" />
+    var classHolder = document.getElementsByTagName("BODY")[0],
+      /**
+       * Load from localstorage
+       **/
+      themeSettings = localStorage.getItem("themeSettings")
+        ? JSON.parse(localStorage.getItem("themeSettings"))
+        : {},
+      themeURL = themeSettings.themeURL || "",
+      themeOptions = themeSettings.themeOptions || "";
+    /**
+     * Load theme options
+     **/
+    if (themeSettings.themeOptions) {
+      classHolder.className = themeSettings.themeOptions;
+      console.log("%c✔ Theme settings loaded", "color: #148f32");
+    } else {
+      console.log(
+        "%c✔ Heads up! Theme settings is empty or does not exist, loading default settings...",
+        "color: #ed1c24"
+      );
+    }
+    if (themeSettings.themeURL && !document.getElementById("mytheme")) {
+      var cssfile = document.createElement("link");
+      cssfile.id = "mytheme";
+      cssfile.rel = "stylesheet";
+      cssfile.href = themeURL;
+      document.getElementsByTagName("head")[0].appendChild(cssfile);
+    } else if (themeSettings.themeURL && document.getElementById("mytheme")) {
+      document.getElementById("mytheme").href = themeSettings.themeURL;
+    }
+    /**
+     * Save to localstorage
+     **/
+    var saveSettings = function () {
+      themeSettings.themeOptions = String(classHolder.className)
+        .split(/[^\w-]+/)
+        .filter(function (item) {
+          return /^(nav|header|footer|mod|display)-/i.test(item);
+        })
+        .join(" ");
+      if (document.getElementById("mytheme")) {
+        themeSettings.themeURL = document
+          .getElementById("mytheme")
+          .getAttribute("href");
+      }
+      localStorage.setItem("themeSettings", JSON.stringify(themeSettings));
+    };
+    /**
+     * Reset settings
+     **/
+    var resetSettings = function () {
+      localStorage.setItem("themeSettings", "");
+    };
+  </script>
+  <!-- BEGIN Page Wrapper -->
+  <div class="page-wrapper">
+    <div class="page-inner">
+      <!-- BEGIN Left Aside -->
+      <!-- END Left Aside -->
+      <div class="page-content-wrapper">
+        <!-- BEGIN Page Header -->
+        <header class="page-header" role="banner">
+          <!--we need this logo when user switches to nav-function-top-->
+          <div class="page-logo">
+            <a href="javascript:;"
+               name="topFunBtn"
+               data-page="dashboard"
+               class="page-logo-link press-scale-down d-flex align-items-center position-relative">
+              <img src="img/logo.png"
+                   alt="SmartAdmin WebApp"
+                   aria-roledescription="logo"
+                   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>-->
+              <!--<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>
-                    <!--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
+                          id="buiList"
+                          class="dropdown-menu dropdown-select-menu js-auto-close"
+                        ></div>
+                      </div> -->
 
-                    <!-- <div class="dropdown">
-                            <a
-                              class="dropdown-toggle fs-1"
-                              href="javascript:;"
-                              role="button"
-                              id="buiActDrop"
-                              data-target="buiList"
-                              data-toggle="dropdown"
-                              aria-haspopup="true"
-                            >
-                            </a>
-                            <div
-                              id="buiList"
-                              class="dropdown-menu dropdown-select-menu js-auto-close"
-                            ></div>
-                          </div> -->
-
-                    <div class="ml-auto d-flex" id="froLisPage"></div>
-                    <div class="ml-auto d-flex mr-3">
-                        <div class="dropdown">
-                            <a href="javascript:;"
-                               id="toggleNoticeBtn"
-                               class="d-flex align-items-center justify-content-center ml-2">
-                                <!--<img src="img/demo/avatars/avatar-admin.png" class="profile-image rounded-circle"
-                                                        alt="Dr. Codex Lantern">-->
-                                <!--you can also add username next to the avatar with the codes below:-->
-                                <div class="row m-0 justify-content-center userblock">
-                                    <i id="noticeConIcon" class="fs-1-5 w-100 text-center"></i>
-                                    <span id="noticeConText"
-                                          class="text-truncate text-truncate-header hidden-xs-down"
-                                          data-hide="隱藏警告"
-                                          data-show="顯示警告"></span>
-                                </div>
-                            </a>
-                        </div>
-                        <!--app user menu-->
-                        <div class="dropdown">
-                            <a href="#"
-                               data-toggle="dropdown"
-                               data-target="logoutList"
-                               class="d-flex align-items-center justify-content-center ml-2">
-                                <!--<img src="img/demo/avatars/avatar-admin.png" class="profile-image rounded-circle"
-                                                        alt="Dr. Codex Lantern">-->
-                                <!--you can also add username next to the avatar with the codes below:-->
-                                <div class="row m-0 justify-content-center userblock">
-                                    <i class="fas fa-user-circle fs-1-5 w-100 text-center"></i>
-                                    <span id="usrName"
-                                          class="text-truncate text-truncate-header hidden-xs-down"></span>
-                                </div>
-                            </a>
-                            <div id="logoutList"
-                                 class="dropdown-menu dropdown-menu-right dropdown-lg">
-                                <a id="logout"
-                                   href="javascript:;"
-                                   class="dropdown-item fw-500 pt-3 pb-3">
-                                    <span>登出</span>
-                                </a>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="ml-2 text-center">
-                        <!-- <label class="mb-0 fs-1-2">
-                                  Diamond Controls<span class="fs-09 position-absolute"
-                                    >®</span
-                                  > </label
-                                ><br /> -->
-                        <!-- <label class="mb-0 fs-1-1">智慧大樓管理平台</label> -->
-                    </div>
-                </header>
-                <!-- END Page Header -->
-                <!-- BEGIN Page Content -->
-                <!-- the #js-page-content id is needed for some plugins to initialize -->
-                <!--@RenderBody()-->
-                <div id="app"></div>
-
-                <!-- this overlay is activated only when mobile menu is triggered -->
-                <div class="page-content-overlay"
-                     data-action="toggle"
-                     data-class="mobile-nav-on"></div>
-
-                <!-- <div id="sysMonNavbar" class="yt-navbar yt-left-navbar">
-                      <div class="yt-navbar-content">
-                        <ul id="sysMonBtnList"></ul>
-                      </div>
-                    </div> -->
-                <!-- END Page Content -->
-                <!-- BEGIN Page Footer -->
-                <!--<footer class="page-footer" role="contentinfo">
-                            <div class="d-flex align-items-center flex-1 text-muted">
-                                <span class="hidden-md-down fw-700">2022 © SmartAdmin by&nbsp;<a href='https://www.gotbootstrap.com' class='text-primary fw-500' title='gotbootstrap.com' target='_blank'>gotbootstrap.com</a></span>
-                            </div>
-                            <div>
-                                <ul class="list-table m-0">
-                                    <li><a href="intel_introduction.html" class="text-secondary fw-700">About</a></li>
-                                    <li class="pl-3"><a href="info_app_licensing.html" class="text-secondary fw-700">License</a></li>
-                                    <li class="pl-3"><a href="info_app_docs.html" class="text-secondary fw-700">Documentation</a></li>
-                                    <li class="pl-3 fs-xl"><a href="https://wrapbootstrap.com/user/MyOrange" class="text-secondary" target="_blank"><i class="fal fa-question-circle" aria-hidden="true"></i></a></li>
-                                </ul>
-                            </div>
-                        </footer>-->
-                <!-- END Page Footer -->
-                <!-- BEGIN Shortcuts -->
-                <!-- END Shortcuts -->
-                <!-- BEGIN Color profile -->
-                <!-- this area is hidden and will not be seen on screens or screen readers -->
-                <!-- we use this only for CSS color refernce for JS stuff -->
-                <p id="js-color-profile" class="d-none">
-                    <span class="color-primary-50"></span>
-                    <span class="color-primary-100"></span>
-                    <span class="color-primary-200"></span>
-                    <span class="color-primary-300"></span>
-                    <span class="color-primary-400"></span>
-                    <span class="color-primary-500"></span>
-                    <span class="color-primary-600"></span>
-                    <span class="color-primary-700"></span>
-                    <span class="color-primary-800"></span>
-                    <span class="color-primary-900"></span>
-                    <span class="color-info-50"></span>
-                    <span class="color-info-100"></span>
-                    <span class="color-info-200"></span>
-                    <span class="color-info-300"></span>
-                    <span class="color-info-400"></span>
-                    <span class="color-info-500"></span>
-                    <span class="color-info-600"></span>
-                    <span class="color-info-700"></span>
-                    <span class="color-info-800"></span>
-                    <span class="color-info-900"></span>
-                    <span class="color-danger-50"></span>
-                    <span class="color-danger-100"></span>
-                    <span class="color-danger-200"></span>
-                    <span class="color-danger-300"></span>
-                    <span class="color-danger-400"></span>
-                    <span class="color-danger-500"></span>
-                    <span class="color-danger-600"></span>
-                    <span class="color-danger-700"></span>
-                    <span class="color-danger-800"></span>
-                    <span class="color-danger-900"></span>
-                    <span class="color-warning-50"></span>
-                    <span class="color-warning-100"></span>
-                    <span class="color-warning-200"></span>
-                    <span class="color-warning-300"></span>
-                    <span class="color-warning-400"></span>
-                    <span class="color-warning-500"></span>
-                    <span class="color-warning-600"></span>
-                    <span class="color-warning-700"></span>
-                    <span class="color-warning-800"></span>
-                    <span class="color-warning-900"></span>
-                    <span class="color-success-50"></span>
-                    <span class="color-success-100"></span>
-                    <span class="color-success-200"></span>
-                    <span class="color-success-300"></span>
-                    <span class="color-success-400"></span>
-                    <span class="color-success-500"></span>
-                    <span class="color-success-600"></span>
-                    <span class="color-success-700"></span>
-                    <span class="color-success-800"></span>
-                    <span class="color-success-900"></span>
-                    <span class="color-fusion-50"></span>
-                    <span class="color-fusion-100"></span>
-                    <span class="color-fusion-200"></span>
-                    <span class="color-fusion-300"></span>
-                    <span class="color-fusion-400"></span>
-                    <span class="color-fusion-500"></span>
-                    <span class="color-fusion-600"></span>
-                    <span class="color-fusion-700"></span>
-                    <span class="color-fusion-800"></span>
-                    <span class="color-fusion-900"></span>
-                </p>
-                <!-- END Color profile -->
+          <div 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>
-        </div>
+            <!--app user menu-->
+            <div class="dropdown">
+              <a href="#"
+                 data-toggle="dropdown"
+                 data-target="logoutList"
+                 class="d-flex align-items-center justify-content-center ml-2">
+                <!--<img src="img/demo/avatars/avatar-admin.png" class="profile-image rounded-circle"
+                                                    alt="Dr. Codex Lantern">-->
+                <!--you can also add username next to the avatar with the codes below:-->
+                <div class="row m-0 justify-content-center userblock">
+                  <i class="fas fa-user-circle fs-1-5 w-100 text-center"></i>
+                  <span id="usrName"
+                        class="text-truncate text-truncate-header hidden-xs-down"></span>
+                </div>
+              </a>
+              <div id="logoutList"
+                   class="dropdown-menu dropdown-menu-right dropdown-lg">
+                <a id="logout"
+                   href="javascript:;"
+                   class="dropdown-item fw-500 pt-3 pb-3">
+                  <span>登出</span>
+                </a>
+              </div>
+            </div>
+          </div>
+          <div class="ml-2 text-center">
+            <!-- <label class="mb-0 fs-1-2">
+                              Diamond Controls<span class="fs-09 position-absolute"
+                                >®</span
+                              > </label
+                            ><br /> -->
+            <!-- <label class="mb-0 fs-1-1">智慧大樓管理平台</label> -->
+          </div>
+        </header>
+        <!-- END Page Header -->
+        <!-- BEGIN Page Content -->
+        <!-- the #js-page-content id is needed for some plugins to initialize -->
+        <!--@RenderBody()-->
+        <div id="app"></div>
+
+        <!-- this overlay is activated only when mobile menu is triggered -->
+        <div class="page-content-overlay"
+             data-action="toggle"
+             data-class="mobile-nav-on"></div>
+
+        <!-- <div id="sysMonNavbar" class="yt-navbar yt-left-navbar">
+                  <div class="yt-navbar-content">
+                    <ul id="sysMonBtnList"></ul>
+                  </div>
+                </div> -->
+        <!-- END Page Content -->
+        <!-- BEGIN Page Footer -->
+        <!--<footer class="page-footer" role="contentinfo">
+                        <div class="d-flex align-items-center flex-1 text-muted">
+                            <span class="hidden-md-down fw-700">2022 © SmartAdmin by&nbsp;<a href='https://www.gotbootstrap.com' class='text-primary fw-500' title='gotbootstrap.com' target='_blank'>gotbootstrap.com</a></span>
+                        </div>
+                        <div>
+                            <ul class="list-table m-0">
+                                <li><a href="intel_introduction.html" class="text-secondary fw-700">About</a></li>
+                                <li class="pl-3"><a href="info_app_licensing.html" class="text-secondary fw-700">License</a></li>
+                                <li class="pl-3"><a href="info_app_docs.html" class="text-secondary fw-700">Documentation</a></li>
+                                <li class="pl-3 fs-xl"><a href="https://wrapbootstrap.com/user/MyOrange" class="text-secondary" target="_blank"><i class="fal fa-question-circle" aria-hidden="true"></i></a></li>
+                            </ul>
+                        </div>
+                    </footer>-->
+        <!-- END Page Footer -->
+        <!-- BEGIN Shortcuts -->
+        <!-- END Shortcuts -->
+        <!-- BEGIN Color profile -->
+        <!-- this area is hidden and will not be seen on screens or screen readers -->
+        <!-- we use this only for CSS color refernce for JS stuff -->
+        <p id="js-color-profile" class="d-none">
+          <span class="color-primary-50"></span>
+          <span class="color-primary-100"></span>
+          <span class="color-primary-200"></span>
+          <span class="color-primary-300"></span>
+          <span class="color-primary-400"></span>
+          <span class="color-primary-500"></span>
+          <span class="color-primary-600"></span>
+          <span class="color-primary-700"></span>
+          <span class="color-primary-800"></span>
+          <span class="color-primary-900"></span>
+          <span class="color-info-50"></span>
+          <span class="color-info-100"></span>
+          <span class="color-info-200"></span>
+          <span class="color-info-300"></span>
+          <span class="color-info-400"></span>
+          <span class="color-info-500"></span>
+          <span class="color-info-600"></span>
+          <span class="color-info-700"></span>
+          <span class="color-info-800"></span>
+          <span class="color-info-900"></span>
+          <span class="color-danger-50"></span>
+          <span class="color-danger-100"></span>
+          <span class="color-danger-200"></span>
+          <span class="color-danger-300"></span>
+          <span class="color-danger-400"></span>
+          <span class="color-danger-500"></span>
+          <span class="color-danger-600"></span>
+          <span class="color-danger-700"></span>
+          <span class="color-danger-800"></span>
+          <span class="color-danger-900"></span>
+          <span class="color-warning-50"></span>
+          <span class="color-warning-100"></span>
+          <span class="color-warning-200"></span>
+          <span class="color-warning-300"></span>
+          <span class="color-warning-400"></span>
+          <span class="color-warning-500"></span>
+          <span class="color-warning-600"></span>
+          <span class="color-warning-700"></span>
+          <span class="color-warning-800"></span>
+          <span class="color-warning-900"></span>
+          <span class="color-success-50"></span>
+          <span class="color-success-100"></span>
+          <span class="color-success-200"></span>
+          <span class="color-success-300"></span>
+          <span class="color-success-400"></span>
+          <span class="color-success-500"></span>
+          <span class="color-success-600"></span>
+          <span class="color-success-700"></span>
+          <span class="color-success-800"></span>
+          <span class="color-success-900"></span>
+          <span class="color-fusion-50"></span>
+          <span class="color-fusion-100"></span>
+          <span class="color-fusion-200"></span>
+          <span class="color-fusion-300"></span>
+          <span class="color-fusion-400"></span>
+          <span class="color-fusion-500"></span>
+          <span class="color-fusion-600"></span>
+          <span class="color-fusion-700"></span>
+          <span class="color-fusion-800"></span>
+          <span class="color-fusion-900"></span>
+        </p>
+        <!-- END Color profile -->
+      </div>
     </div>
-    <!-- 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>
-                        </div>
-                    </div>
-                    <button type="button"
-                            class="close text-white position-absolute pos-top pos-right p-2 m-1 mr-2"
-                            data-dismiss="modal"
-                            aria-label="Close">
-                        <span aria-hidden="true"><i class="fal fa-times"></i></span>
-                    </button>
-                </div>
-                <div class="modal-body p-0 h-100 d-flex">
-                    <!-- BEGIN msgr-list -->
-                    <div class="msgr-list d-flex flex-column bg-faded border-faded border-top-0 border-right-0 border-bottom-0 position-absolute pos-top pos-bottom">
-                        <div>
-                            <div class="height-4 width-3 h3 m-0 d-flex justify-content-center flex-column color-primary-500 pl-3 mt-2">
-                                <i class="fal fa-search"></i>
-                            </div>
-                            <input type="text"
-                                   class="form-control bg-white"
-                                   id="msgr_listfilter_input"
-                                   placeholder="Filter contacts"
-                                   aria-label="FriendSearch"
-                                   data-listfilter="#js-msgr-listfilter" />
-                        </div>
-                        <div class="flex-1 h-100 custom-scroll">
-                            <div class="w-100">
-                                <ul id="js-msgr-listfilter" class="list-unstyled m-0">
-                                    <li>
-                                        <a href="#"
-                                           class="d-table w-100 px-2 py-2 text-dark hover-white"
-                                           data-filter-tags="tracey chang online">
-                                            <div class="d-table-cell align-middle status status-success status-sm">
-                                                <span class="profile-image-md rounded-circle d-block"
-                                                      style="
+            </span>
+            <div class="info-card-text">
+              <a href="javascript:void(0);"
+                 class="fs-lg text-truncate text-truncate-lg text-white"
+                 data-toggle="dropdown"
+                 aria-expanded="false">
+                Tracey Chang
+                <i class="fal fa-angle-down d-inline-block ml-1 text-white fs-md"></i>
+              </a>
+              <div class="dropdown-menu">
+                <a class="dropdown-item" href="#">Send Email</a>
+                <a class="dropdown-item" href="#">Create Appointment</a>
+                <a class="dropdown-item" href="#">Block User</a>
+              </div>
+              <span class="text-truncate text-truncate-md opacity-80">IT Director</span>
+            </div>
+          </div>
+          <button type="button"
+                  class="close text-white position-absolute pos-top pos-right p-2 m-1 mr-2"
+                  data-dismiss="modal"
+                  aria-label="Close">
+            <span aria-hidden="true"><i class="fal fa-times"></i></span>
+          </button>
+        </div>
+        <div class="modal-body p-0 h-100 d-flex">
+          <!-- BEGIN msgr-list -->
+          <div class="msgr-list d-flex flex-column bg-faded border-faded border-top-0 border-right-0 border-bottom-0 position-absolute pos-top pos-bottom">
+            <div>
+              <div class="height-4 width-3 h3 m-0 d-flex justify-content-center flex-column color-primary-500 pl-3 mt-2">
+                <i class="fal fa-search"></i>
+              </div>
+              <input type="text"
+                     class="form-control bg-white"
+                     id="msgr_listfilter_input"
+                     placeholder="Filter contacts"
+                     aria-label="FriendSearch"
+                     data-listfilter="#js-msgr-listfilter" />
+            </div>
+            <div class="flex-1 h-100 custom-scroll">
+              <div class="w-100">
+                <ul id="js-msgr-listfilter" class="list-unstyled m-0">
+                  <li>
+                    <a href="#"
+                       class="d-table w-100 px-2 py-2 text-dark hover-white"
+                       data-filter-tags="tracey chang online">
+                      <div class="d-table-cell align-middle status status-success status-sm">
+                        <span class="profile-image-md rounded-circle d-block"
+                              style="
                               background-image: url('img/demo/avatars/avatar-d.png');
                               background-size: cover;
                             "></span>
-                                            </div>
-                                            <div class="d-table-cell w-100 align-middle pl-2 pr-2">
-                                                <div class="text-truncate text-truncate-md">
-                                                    Tracey Chang
-                                                    <small class="d-block font-italic text-success fs-xs">
-                                                        Online
-                                                    </small>
-                                                </div>
-                                            </div>
-                                        </a>
-                                    </li>
-                                    <li>
-                                        <a href="#"
-                                           class="d-table w-100 px-2 py-2 text-dark hover-white"
-                                           data-filter-tags="oliver kopyuv online">
-                                            <div class="d-table-cell align-middle status status-success status-sm">
-                                                <span class="profile-image-md rounded-circle d-block"
-                                                      style="
+                      </div>
+                      <div class="d-table-cell w-100 align-middle pl-2 pr-2">
+                        <div class="text-truncate text-truncate-md">
+                          Tracey Chang
+                          <small class="d-block font-italic text-success fs-xs">
+                            Online
+                          </small>
+                        </div>
+                      </div>
+                    </a>
+                  </li>
+                  <li>
+                    <a href="#"
+                       class="d-table w-100 px-2 py-2 text-dark hover-white"
+                       data-filter-tags="oliver kopyuv online">
+                      <div class="d-table-cell align-middle status status-success status-sm">
+                        <span class="profile-image-md rounded-circle d-block"
+                              style="
                               background-image: url('img/demo/avatars/avatar-b.png');
                               background-size: cover;
                             "></span>
-                                            </div>
-                                            <div class="d-table-cell w-100 align-middle pl-2 pr-2">
-                                                <div class="text-truncate text-truncate-md">
-                                                    Oliver Kopyuv
-                                                    <small class="d-block font-italic text-success fs-xs">
-                                                        Online
-                                                    </small>
-                                                </div>
-                                            </div>
-                                        </a>
-                                    </li>
-                                    <li>
-                                        <a href="#"
-                                           class="d-table w-100 px-2 py-2 text-dark hover-white"
-                                           data-filter-tags="dr john cook phd away">
-                                            <div class="d-table-cell align-middle status status-warning status-sm">
-                                                <span class="profile-image-md rounded-circle d-block"
-                                                      style="
+                      </div>
+                      <div class="d-table-cell w-100 align-middle pl-2 pr-2">
+                        <div class="text-truncate text-truncate-md">
+                          Oliver Kopyuv
+                          <small class="d-block font-italic text-success fs-xs">
+                            Online
+                          </small>
+                        </div>
+                      </div>
+                    </a>
+                  </li>
+                  <li>
+                    <a href="#"
+                       class="d-table w-100 px-2 py-2 text-dark hover-white"
+                       data-filter-tags="dr john cook phd away">
+                      <div class="d-table-cell align-middle status status-warning status-sm">
+                        <span class="profile-image-md rounded-circle d-block"
+                              style="
                               background-image: url('img/demo/avatars/avatar-e.png');
                               background-size: cover;
                             "></span>
-                                            </div>
-                                            <div class="d-table-cell w-100 align-middle pl-2 pr-2">
-                                                <div class="text-truncate text-truncate-md">
-                                                    Dr. John Cook PhD
-                                                    <small class="d-block font-italic fs-xs">
-                                                        Away
-                                                    </small>
-                                                </div>
-                                            </div>
-                                        </a>
-                                    </li>
-                                    <li>
-                                        <a href="#"
-                                           class="d-table w-100 px-2 py-2 text-dark hover-white"
-                                           data-filter-tags="ali amdaney online">
-                                            <div class="d-table-cell align-middle status status-success status-sm">
-                                                <span class="profile-image-md rounded-circle d-block"
-                                                      style="
+                      </div>
+                      <div class="d-table-cell w-100 align-middle pl-2 pr-2">
+                        <div class="text-truncate text-truncate-md">
+                          Dr. John Cook PhD
+                          <small class="d-block font-italic fs-xs">
+                            Away
+                          </small>
+                        </div>
+                      </div>
+                    </a>
+                  </li>
+                  <li>
+                    <a href="#"
+                       class="d-table w-100 px-2 py-2 text-dark hover-white"
+                       data-filter-tags="ali amdaney online">
+                      <div class="d-table-cell align-middle status status-success status-sm">
+                        <span class="profile-image-md rounded-circle d-block"
+                              style="
                               background-image: url('img/demo/avatars/avatar-g.png');
                               background-size: cover;
                             "></span>
-                                            </div>
-                                            <div class="d-table-cell w-100 align-middle pl-2 pr-2">
-                                                <div class="text-truncate text-truncate-md">
-                                                    Ali Amdaney
-                                                    <small class="d-block font-italic fs-xs text-success">
-                                                        Online
-                                                    </small>
-                                                </div>
-                                            </div>
-                                        </a>
-                                    </li>
-                                    <li>
-                                        <a href="#"
-                                           class="d-table w-100 px-2 py-2 text-dark hover-white"
-                                           data-filter-tags="sarah mcbrook online">
-                                            <div class="d-table-cell align-middle status status-success status-sm">
-                                                <span class="profile-image-md rounded-circle d-block"
-                                                      style="
+                      </div>
+                      <div class="d-table-cell w-100 align-middle pl-2 pr-2">
+                        <div class="text-truncate text-truncate-md">
+                          Ali Amdaney
+                          <small class="d-block font-italic fs-xs text-success">
+                            Online
+                          </small>
+                        </div>
+                      </div>
+                    </a>
+                  </li>
+                  <li>
+                    <a href="#"
+                       class="d-table w-100 px-2 py-2 text-dark hover-white"
+                       data-filter-tags="sarah mcbrook online">
+                      <div class="d-table-cell align-middle status status-success status-sm">
+                        <span class="profile-image-md rounded-circle d-block"
+                              style="
                               background-image: url('img/demo/avatars/avatar-h.png');
                               background-size: cover;
                             "></span>
-                                            </div>
-                                            <div class="d-table-cell w-100 align-middle pl-2 pr-2">
-                                                <div class="text-truncate text-truncate-md">
-                                                    Sarah McBrook
-                                                    <small class="d-block font-italic fs-xs text-success">
-                                                        Online
-                                                    </small>
-                                                </div>
-                                            </div>
-                                        </a>
-                                    </li>
-                                    <li>
-                                        <a href="#"
-                                           class="d-table w-100 px-2 py-2 text-dark hover-white"
-                                           data-filter-tags="ali amdaney offline">
-                                            <div class="d-table-cell align-middle status status-sm">
-                                                <span class="profile-image-md rounded-circle d-block"
-                                                      style="
+                      </div>
+                      <div class="d-table-cell w-100 align-middle pl-2 pr-2">
+                        <div class="text-truncate text-truncate-md">
+                          Sarah McBrook
+                          <small class="d-block font-italic fs-xs text-success">
+                            Online
+                          </small>
+                        </div>
+                      </div>
+                    </a>
+                  </li>
+                  <li>
+                    <a href="#"
+                       class="d-table w-100 px-2 py-2 text-dark hover-white"
+                       data-filter-tags="ali amdaney offline">
+                      <div class="d-table-cell align-middle status status-sm">
+                        <span class="profile-image-md rounded-circle d-block"
+                              style="
                               background-image: url('img/demo/avatars/avatar-a.png');
                               background-size: cover;
                             "></span>
-                                            </div>
-                                            <div class="d-table-cell w-100 align-middle pl-2 pr-2">
-                                                <div class="text-truncate text-truncate-md">
-                                                    oliver.kopyuv@gotbootstrap.com
-                                                    <small class="d-block font-italic fs-xs">
-                                                        Offline
-                                                    </small>
-                                                </div>
-                                            </div>
-                                        </a>
-                                    </li>
-                                    <li>
-                                        <a href="#"
-                                           class="d-table w-100 px-2 py-2 text-dark hover-white"
-                                           data-filter-tags="ali amdaney busy">
-                                            <div class="d-table-cell align-middle status status-danger status-sm">
-                                                <span class="profile-image-md rounded-circle d-block"
-                                                      style="
+                      </div>
+                      <div class="d-table-cell w-100 align-middle pl-2 pr-2">
+                        <div class="text-truncate text-truncate-md">
+                          oliver.kopyuv@gotbootstrap.com
+                          <small class="d-block font-italic fs-xs">
+                            Offline
+                          </small>
+                        </div>
+                      </div>
+                    </a>
+                  </li>
+                  <li>
+                    <a href="#"
+                       class="d-table w-100 px-2 py-2 text-dark hover-white"
+                       data-filter-tags="ali amdaney busy">
+                      <div class="d-table-cell align-middle status status-danger status-sm">
+                        <span class="profile-image-md rounded-circle d-block"
+                              style="
                               background-image: url('img/demo/avatars/avatar-j.png');
                               background-size: cover;
                             "></span>
-                                            </div>
-                                            <div class="d-table-cell w-100 align-middle pl-2 pr-2">
-                                                <div class="text-truncate text-truncate-md">
-                                                    oliver.kopyuv@gotbootstrap.com
-                                                    <small class="d-block font-italic fs-xs text-danger">
-                                                        Busy
-                                                    </small>
-                                                </div>
-                                            </div>
-                                        </a>
-                                    </li>
-                                    <li>
-                                        <a href="#"
-                                           class="d-table w-100 px-2 py-2 text-dark hover-white"
-                                           data-filter-tags="ali amdaney offline">
-                                            <div class="d-table-cell align-middle status status-sm">
-                                                <span class="profile-image-md rounded-circle d-block"
-                                                      style="
+                      </div>
+                      <div class="d-table-cell w-100 align-middle pl-2 pr-2">
+                        <div class="text-truncate text-truncate-md">
+                          oliver.kopyuv@gotbootstrap.com
+                          <small class="d-block font-italic fs-xs text-danger">
+                            Busy
+                          </small>
+                        </div>
+                      </div>
+                    </a>
+                  </li>
+                  <li>
+                    <a href="#"
+                       class="d-table w-100 px-2 py-2 text-dark hover-white"
+                       data-filter-tags="ali amdaney offline">
+                      <div class="d-table-cell align-middle status status-sm">
+                        <span class="profile-image-md rounded-circle d-block"
+                              style="
                               background-image: url('img/demo/avatars/avatar-c.png');
                               background-size: cover;
                             "></span>
-                                            </div>
-                                            <div class="d-table-cell w-100 align-middle pl-2 pr-2">
-                                                <div class="text-truncate text-truncate-md">
-                                                    oliver.kopyuv@gotbootstrap.com
-                                                    <small class="d-block font-italic fs-xs">
-                                                        Offline
-                                                    </small>
-                                                </div>
-                                            </div>
-                                        </a>
-                                    </li>
-                                    <li>
-                                        <a href="#"
-                                           class="d-table w-100 px-2 py-2 text-dark hover-white"
-                                           data-filter-tags="ali amdaney inactive">
-                                            <div class="d-table-cell align-middle">
-                                                <span class="profile-image-md rounded-circle d-block"
-                                                      style="
+                      </div>
+                      <div class="d-table-cell w-100 align-middle pl-2 pr-2">
+                        <div class="text-truncate text-truncate-md">
+                          oliver.kopyuv@gotbootstrap.com
+                          <small class="d-block font-italic fs-xs">
+                            Offline
+                          </small>
+                        </div>
+                      </div>
+                    </a>
+                  </li>
+                  <li>
+                    <a href="#"
+                       class="d-table w-100 px-2 py-2 text-dark hover-white"
+                       data-filter-tags="ali amdaney inactive">
+                      <div class="d-table-cell align-middle">
+                        <span class="profile-image-md rounded-circle d-block"
+                              style="
                               background-image: url('img/demo/avatars/avatar-m.png');
                               background-size: cover;
                             "></span>
-                                            </div>
-                                            <div class="d-table-cell w-100 align-middle pl-2 pr-2">
-                                                <div class="text-truncate text-truncate-md">
-                                                    +714651347790
-                                                    <small class="d-block font-italic fs-xs opacity-50">
-                                                        Missed Call
-                                                    </small>
-                                                </div>
-                                            </div>
-                                        </a>
-                                    </li>
-                                </ul>
-                                <div class="filter-message js-filter-message"></div>
-                            </div>
+                      </div>
+                      <div 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 class="fs-xl d-flex align-items-center p-3">
-                                <i class="fal fa-cogs"></i>
-                            </a>
-                        </div>
-                    </div>
-                    <!-- END msgr-list -->
-                    <!-- BEGIN msgr -->
-                    <div class="msgr d-flex h-100 flex-column bg-white">
-                        <!-- BEGIN custom-scroll -->
-                        <div class="custom-scroll flex-1 h-100">
-                            <div id="chat_container" class="w-100 p-4">
-                                <!-- start .chat-segment -->
-                                <div class="chat-segment">
-                                    <div class="time-stamp text-center mb-2 fw-400">Jun 19</div>
-                                </div>
-                                <!--  end .chat-segment -->
-                                <!-- start .chat-segment -->
-                                <div class="chat-segment chat-segment-sent">
-                                    <div class="chat-message">
-                                        <p>Hey Tracey, did you get my files?</p>
-                                    </div>
-                                    <div class="text-right fw-300 text-muted mt-1 fs-xs">
-                                        3:00 pm
-                                    </div>
-                                </div>
-                                <!--  end .chat-segment -->
-                                <!-- start .chat-segment -->
-                                <div class="chat-segment chat-segment-get">
-                                    <div class="chat-message">
-                                        <p>Hi</p>
-                                        <p>
-                                            Sorry going through a busy time in office. Yes I
-                                            analyzed the solution.
-                                        </p>
-                                        <p>
-                                            It will require some resource, which I could not manage.
-                                        </p>
-                                    </div>
-                                    <div class="fw-300 text-muted mt-1 fs-xs">3:24 pm</div>
-                                </div>
-                                <!--  end .chat-segment -->
-                                <!-- start .chat-segment -->
-                                <div class="chat-segment chat-segment-sent chat-start">
-                                    <div class="chat-message">
-                                        <p>Okay</p>
-                                    </div>
-                                </div>
-                                <!--  end .chat-segment -->
-                                <!-- start .chat-segment -->
-                                <div class="chat-segment chat-segment-sent chat-end">
-                                    <div class="chat-message">
-                                        <p>
-                                            Sending you some dough today, you can allocate the
-                                            resources to this project.
-                                        </p>
-                                    </div>
-                                    <div class="text-right fw-300 text-muted mt-1 fs-xs">
-                                        3:26 pm
-                                    </div>
-                                </div>
-                                <!--  end .chat-segment -->
-                                <!-- start .chat-segment -->
-                                <div class="chat-segment chat-segment-get chat-start">
-                                    <div class="chat-message">
-                                        <p>Perfect. Thanks a lot!</p>
-                                    </div>
-                                </div>
-                                <!--  end .chat-segment -->
-                                <!-- start .chat-segment -->
-                                <div class="chat-segment chat-segment-get">
-                                    <div class="chat-message">
-                                        <p>I will have them ready by tonight.</p>
-                                    </div>
-                                </div>
-                                <!--  end .chat-segment -->
-                                <!-- start .chat-segment -->
-                                <div class="chat-segment chat-segment-get chat-end">
-                                    <div class="chat-message">
-                                        <p>Cheers</p>
-                                    </div>
-                                </div>
-                                <!--  end .chat-segment -->
-                                <!-- start .chat-segment for timestamp -->
-                                <div class="chat-segment">
-                                    <div class="time-stamp text-center mb-2 fw-400">Jun 20</div>
-                                </div>
-                                <!--  end .chat-segment for timestamp -->
-                            </div>
-                        </div>
-                        <!-- END custom-scroll  -->
-                        <!-- BEGIN msgr__chatinput -->
-                        <div class="d-flex flex-column">
-                            <div class="border-faded border-right-0 border-bottom-0 border-left-0 flex-1 mr-3 ml-3 position-relative shadow-top">
-                                <div class="pt-3 pb-1 pr-0 pl-0 rounded-0" tabindex="-1">
-                                    <div id="msgr_input"
-                                         contenteditable="true"
-                                         data-placeholder="Type your message here..."
-                                         class="height-10 form-content-editable"></div>
-                                </div>
-                            </div>
-                            <div class="height-8 px-3 d-flex flex-row align-items-center flex-wrap flex-shrink-0">
-                                <a href="javascript:void(0);"
-                                   class="btn btn-icon fs-xl width-1 mr-1"
-                                   data-toggle="tooltip"
-                                   data-original-title="More options"
-                                   data-placement="top">
-                                    <i class="fal fa-ellipsis-v-alt color-fusion-300"></i>
-                                </a>
-                                <a href="javascript:void(0);"
-                                   class="btn btn-icon fs-xl mr-1"
-                                   data-toggle="tooltip"
-                                   data-original-title="Attach files"
-                                   data-placement="top">
-                                    <i class="fal fa-paperclip color-fusion-300"></i>
-                                </a>
-                                <a href="javascript:void(0);"
-                                   class="btn btn-icon fs-xl mr-1"
-                                   data-toggle="tooltip"
-                                   data-original-title="Insert photo"
-                                   data-placement="top">
-                                    <i class="fal fa-camera color-fusion-300"></i>
-                                </a>
-                                <div class="ml-auto">
-                                    <a href="javascript:void(0);" class="btn btn-info">Send</a>
-                                </div>
-                            </div>
-                        </div>
-                        <!-- END msgr__chatinput -->
-                    </div>
-                    <!-- END msgr -->
-                </div>
+                      </div>
+                    </a>
+                  </li>
+                </ul>
+                <div class="filter-message js-filter-message"></div>
+              </div>
             </div>
+            <div>
+              <a class="fs-xl d-flex align-items-center p-3">
+                <i class="fal fa-cogs"></i>
+              </a>
+            </div>
+          </div>
+          <!-- END msgr-list -->
+          <!-- BEGIN msgr -->
+          <div class="msgr d-flex h-100 flex-column bg-white">
+            <!-- BEGIN custom-scroll -->
+            <div class="custom-scroll flex-1 h-100">
+              <div id="chat_container" class="w-100 p-4">
+                <!-- start .chat-segment -->
+                <div class="chat-segment">
+                  <div class="time-stamp text-center mb-2 fw-400">Jun 19</div>
+                </div>
+                <!--  end .chat-segment -->
+                <!-- start .chat-segment -->
+                <div class="chat-segment chat-segment-sent">
+                  <div class="chat-message">
+                    <p>Hey Tracey, did you get my files?</p>
+                  </div>
+                  <div class="text-right fw-300 text-muted mt-1 fs-xs">
+                    3:00 pm
+                  </div>
+                </div>
+                <!--  end .chat-segment -->
+                <!-- start .chat-segment -->
+                <div class="chat-segment chat-segment-get">
+                  <div class="chat-message">
+                    <p>Hi</p>
+                    <p>
+                      Sorry going through a busy time in office. Yes I
+                      analyzed the solution.
+                    </p>
+                    <p>
+                      It will require some resource, which I could not manage.
+                    </p>
+                  </div>
+                  <div class="fw-300 text-muted mt-1 fs-xs">3:24 pm</div>
+                </div>
+                <!--  end .chat-segment -->
+                <!-- start .chat-segment -->
+                <div class="chat-segment chat-segment-sent chat-start">
+                  <div class="chat-message">
+                    <p>Okay</p>
+                  </div>
+                </div>
+                <!--  end .chat-segment -->
+                <!-- start .chat-segment -->
+                <div class="chat-segment chat-segment-sent chat-end">
+                  <div class="chat-message">
+                    <p>
+                      Sending you some dough today, you can allocate the
+                      resources to this project.
+                    </p>
+                  </div>
+                  <div class="text-right fw-300 text-muted mt-1 fs-xs">
+                    3:26 pm
+                  </div>
+                </div>
+                <!--  end .chat-segment -->
+                <!-- start .chat-segment -->
+                <div class="chat-segment chat-segment-get chat-start">
+                  <div class="chat-message">
+                    <p>Perfect. Thanks a lot!</p>
+                  </div>
+                </div>
+                <!--  end .chat-segment -->
+                <!-- start .chat-segment -->
+                <div class="chat-segment chat-segment-get">
+                  <div class="chat-message">
+                    <p>I will have them ready by tonight.</p>
+                  </div>
+                </div>
+                <!--  end .chat-segment -->
+                <!-- start .chat-segment -->
+                <div class="chat-segment chat-segment-get chat-end">
+                  <div class="chat-message">
+                    <p>Cheers</p>
+                  </div>
+                </div>
+                <!--  end .chat-segment -->
+                <!-- start .chat-segment for timestamp -->
+                <div class="chat-segment">
+                  <div class="time-stamp text-center mb-2 fw-400">Jun 20</div>
+                </div>
+                <!--  end .chat-segment for timestamp -->
+              </div>
+            </div>
+            <!-- END custom-scroll  -->
+            <!-- BEGIN msgr__chatinput -->
+            <div class="d-flex flex-column">
+              <div class="border-faded border-right-0 border-bottom-0 border-left-0 flex-1 mr-3 ml-3 position-relative shadow-top">
+                <div class="pt-3 pb-1 pr-0 pl-0 rounded-0" tabindex="-1">
+                  <div id="msgr_input"
+                       contenteditable="true"
+                       data-placeholder="Type your message here..."
+                       class="height-10 form-content-editable"></div>
+                </div>
+              </div>
+              <div class="height-8 px-3 d-flex flex-row align-items-center flex-wrap flex-shrink-0">
+                <a href="javascript:void(0);"
+                   class="btn btn-icon fs-xl width-1 mr-1"
+                   data-toggle="tooltip"
+                   data-original-title="More options"
+                   data-placement="top">
+                  <i class="fal fa-ellipsis-v-alt color-fusion-300"></i>
+                </a>
+                <a href="javascript:void(0);"
+                   class="btn btn-icon fs-xl mr-1"
+                   data-toggle="tooltip"
+                   data-original-title="Attach files"
+                   data-placement="top">
+                  <i class="fal fa-paperclip color-fusion-300"></i>
+                </a>
+                <a href="javascript:void(0);"
+                   class="btn btn-icon fs-xl mr-1"
+                   data-toggle="tooltip"
+                   data-original-title="Insert photo"
+                   data-placement="top">
+                  <i class="fal fa-camera color-fusion-300"></i>
+                </a>
+                <div class="ml-auto">
+                  <a href="javascript:void(0);" class="btn btn-info">Send</a>
+                </div>
+              </div>
+            </div>
+            <!-- END msgr__chatinput -->
+          </div>
+          <!-- END msgr -->
         </div>
+      </div>
     </div>
+  </div>
 
-    <div id="noticeBlock"
-         style="
+  <div id="noticeBlock"
+       style="
         position: fixed;
         top: 70px;
         right: 0px;
@@ -802,1687 +802,1686 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
         height: 100%;
       "></div>
 
-    <!--<button id="testsysbtn" class="btn btn-info col-1">系統監控(測試用)</button>-->
-    <!-- END Messenger -->
-    <!-- BEGIN Page Settings -->
-    <!-- END Page Settings -->
-    <!-- base vendor bundle:
-     DOC: if you remove pace.js from core please note on Internet Explorer some CSS animations may execute before a page is fully loaded, resulting 'jump' animations
-                + pace.js (recommended)
-                + jquery.js (core)
-                + jquery-ui-cust.js (core)
-                + popper.js (core)
-                + bootstrap.js (core)
-                + slimscroll.js (extension)
-                + app.navigation.js (core)
-                + ba-throttle-debounce.js (core)
-                + waves.js (extension)
-                + smartpanels.js (extension)
-                + src/../jquery-snippets.js (core) -->
-    <!-- verdors.bundle.js 已含有 jquery Library v3.5.1-->
-    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
-    <script src="https://npmcdn.com/flatpickr@4.6.13/dist/l10n/zh-tw.js"></script>
-    <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="https://cdn.jsdelivr.net/npm/flatpickr"></script>
+  <script src="https://npmcdn.com/flatpickr@4.6.13/dist/l10n/zh-tw.js"></script>
+  <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);
+      });
+
+      /**
+       * 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);
         });
-    </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目前沒有
-        ];
+      /**
+       * 全數套件讀取完成 Callback
+       * */
+      function loadedJsPack() {
+        $.fn.datepicker = window._datepickerDP;
 
-        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", },
-        ];
+        cookies = new YourTeam.Utility.Cookie();
+        jwt = cookies.get("JWT-Authorization");
+        pageAct.AreaTag = initAreaTag;
+        loadEvent();
 
-        /**
-         * 頁面 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;
+        if (!jwt) {
+          if (location.href.indexOf("localhost:5966") != -1) {
+            location.href = "login.html";
+          }
+          myBaja = new MyBaja();
+          myBaja.setMyUserAccount(Login);
+        } else {
+          isValidLogin();
         }
 
-        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);
-            });
-
-            /**
-             * 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);
-                });
-            }
-
-            /**
-             * 全數套件讀取完成 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();
-                await iniFroList();
-                await isShowBuildingInMenu();
-                showMainSys();
-                await getBuiList();
-                await getSysMonBtnList();
-                checkDevState();
-                loadNoticeConSta();
-
-                refreshSubPage();
-
-                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>`;
-
-                                    strHtml += `<a href="javascript:;" id="buiBtn${buiObj.building_tag}" data-target="#sysMonNavbar"  data-page="dashboard" 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();
-                }
-
-                //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");
-                        if ($(`#subSysBtn${pageAct.sysSubTag}`).length) {
-                            $(`#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");
-                    cookies.remove("JWT-Authorization");
-                    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);
-                    }
-                });
-
-                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");
-
-                        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");
-
-                        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 (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) {
-                            $(`#buiBtn${lastPageAct.buiTag}`).click();
-                        } else {
-                            $(
-                                `#subSysBtn${lastPageAct.sysSubTag
-                                }[data-building-tag=${buildingTagOnJquery(
-                                    lastPageAct.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 {
-                            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");
-            }
-
-            // 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: "10%", sortable: true },
-                    { targets: [1], width: "10%", sortable: true },
-                    { targets: [2], width: "5%", sortable: true },
-                    { targets: [3], width: "5%", sortable: true },
-                ];
-
-                let columns = [
-                    {
-                        title: "類型",
-                        data: "work_type_name",
-                        className: "text-nowrap",
-                    },
-                    {
-                        title: "項目",
-                        data: "fix_do",
-                        className: "text-nowrap",
-                    },
-                    {
-                        title: "處理人員",
-                        data: "work_person_name",
-                        className: "text-nowrap",
-                    },
-                    {
-                        title: "發生/完成時間",
-                        data: "finishTime",
-                        className: "text-nowrap",
-                        render: function (data, type, row) {
-                            return (
-                                displayDate(row.createdAt) +
-                                "<br>" +
-                                (data.includes("0001")
-                                    ? "未完工"
-                                    : displayDate(data)
-                                )
-                            );
-                        },
-                    },
-                ];
-
-                opeRecTable = new YourTeam.JqDataTables.getTableByAjax(
-                    url,
-                    tag,
-                    null,
-                    columns,
-                    column_defs,
-                    null,
-                    null,
-                    null,
-                    null,
-                    null,
-                    null,
-                    "<'scrolledTable'tpi>"
-                );
-                $("#opeRecTable").DataTable().order([3, "desc"]).draw();
-            }
-
-            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 {
-                    console.log("no device");
-                }
-            }
-
-            // Card - 異常紀錄 Table
-            function callbackForErr(result) {
-                if (errRecTable) {
-                    errRecTable.destroy();
-                }
-
-                let tag = "#errRecTable";
-                let datas;
-
-                let column_defs = [
-                    { targets: [0], sortable: true },
-                    { targets: [1], sortable: true },
-                    { targets: [2], sortable: true },
-                    { targets: [3], sortable: true },
-                ];
-
-                let columns = [
-                    {
-                        title: "異常ID",
-                        data: "uuid",
-                        className: "text-nowrap",
-                    },
-                    {
-                        title: "異常原因",
-                        data: "msgText",
-                        className: "text-nowrap",
-                    },
-                    {
-                        title: "ACK確認",
-                        data: "ackState",
-                        className: "text-nowrap",
-                        render: function (data, type, row) {
-                            return data === 1
-                                ? "未確認"
-                                : displayDate(row.ackedTime);
-                        },
-                    },
-                    {
-                        title: "發生時間",
-                        data: "timestamp",
-                        className: "text-nowrap",
-                        render: function (data, type, row) {
-                            return displayDate(row.timestamp);
-                        },
-                    },
-                ];
-
-                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>"
-                );
-                $("#errRecTable").DataTable().order([3, "desc"]).draw();
-            }
-
-            //根據 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;
+        $(loadEle).Loading("close");
+      }
+
+      /**
+       * 登入驗證完成 Callback
+       * */
+      async function isValidLogin() {
+        getUserInfo();
+        await iniFroList();
+        await isShowBuildingInMenu();
+        showMainSys();
+        await getBuiList();
+        await getSysMonBtnList();
+        checkDevState();
+        loadNoticeConSta();
+
+        refreshSubPage();
+
+        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 = ``;
-                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>`;
-                }
-                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>`;
-                }
+                $.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>`;
 
-                return strHtml;
+                  strHtml += `<a href="javascript:;" id="buiBtn${buiObj.building_tag}" data-target="#sysMonNavbar"  data-page="dashboard" 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();
+        }
+
+        //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");
+            if ($(`#subSysBtn${pageAct.sysSubTag}`).length) {
+              $(`#subSysBtn${pageAct.sysSubTag}`)?.YTTab("set");
             }
 
-            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) {
-            console.log($(obj).data("subsysobj"));
-            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(5%)">
-                                                                                            <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,
-                    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(
-                                    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",
-                                                "building-tag": buildingTagOnJquery(pageAct.buiTag),
-                                            },
-                                            "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"
-                ).send();
+              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");
+          cookies.remove("JWT-Authorization");
+          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);
+          }
+        });
+
+        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");
+
+            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");
+
+            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 (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;
         }
 
-        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();
+        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) {
+              $(`#buiBtn${lastPageAct.buiTag}`).click();
+            } else {
+              $(
+                `#subSysBtn${lastPageAct.sysSubTag
+                }[data-building-tag=${buildingTagOnJquery(
+                  lastPageAct.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 {
+              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");
+      }
+
+      // 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";
         }
 
-        function getUserInfo() {
-            let url = baseApiUrl + varApiUrl + "getUserFull";
+        $(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>`
+              : "";
 
-            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();
-        }
+          let option = {
+            html: `<div class="card m-1 border device-wrap" data-number="${deviceNumber(
+              devNum
+            )}" data-position="left">
+                                                            <div class="card-header p-3">
 
-        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();
-        }
+                                                                <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>
 
-        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.filter(
-                    ({ alarmClass }) => alarmClass !== "defaultAlarmClass"
+                                                                    <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)
+                    : ""
                 );
-                let titleHtml = `異常通知`;
-                let notices = [];
-                // 遍歷每個告警資料
-                $.each(datas ?? [], (idx, data) => {
-                    if (noticeOptArr.findIndex((x) => x.id == data.uuid) == -1) {
-                        // 針對該告警對象的設備，從 allDevices 找出設備名稱
-                        const building_name = pageAct.buildList.find(
-                            ({ building_tag }) =>
-                                building_tag === data.devicePath.split("_")[1]
-                        )?.full_name;
-
-                        datas[idx].full_name =
-                            allDevices.filter((x) => x.device_number == data.devicePath)[0]
-                                ?.full_name ||
-                            (data.alarmClass === "Sys_Con_AlarmClass"
-                                ? `${building_name}_電錶邊緣控制器_${data.split("_")[7]}`
-                                : "");
-
-                        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()
-                    );
+              // 聚焦熱點
+              const eleDbId = parseInt($(oriEle).data("dbId"));
+              if (eleDbId) {
+                if (alarmDbIdList.some((dbId) => dbId == eleDbId)) {
+                  changeScaleForHotspot(eleDbId);
                 } else {
-                    $("#noticeBlock").innerHTML = "";
-                    $("#noticeBlock").css({ display: "none", opacity: "0" });
+                  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: "10%", sortable: true },
+          { targets: [1], width: "10%", sortable: true },
+          { targets: [2], width: "5%", sortable: true },
+          { targets: [3], width: "5%", sortable: true },
+        ];
+
+        let columns = [
+          {
+            title: "類型",
+            data: "work_type_name",
+            className: "text-nowrap",
+          },
+          {
+            title: "項目",
+            data: "fix_do",
+            className: "text-nowrap",
+          },
+          {
+            title: "處理人員",
+            data: "work_person_name",
+            className: "text-nowrap",
+          },
+          {
+            title: "發生/完成時間",
+            data: "finishTime",
+            className: "text-nowrap",
+            render: function (data, type, row) {
+              return (
+                displayDate(row.createdAt) +
+                "<br>" +
+                (data.includes("0001") ? "未完工" : displayDate(data))
+              );
+            },
+          },
+        ];
+
+        opeRecTable = new YourTeam.JqDataTables.getTableByAjax(
+          url,
+          tag,
+          null,
+          columns,
+          column_defs,
+          null,
+          null,
+          null,
+          null,
+          null,
+          null,
+          "<'scrolledTable'tpi>"
+        );
+        $("#opeRecTable").DataTable().order([3, "desc"]).draw();
+      }
+
+      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 {
+          console.log("no device");
+        }
+      }
+
+      // Card - 異常紀錄 Table
+      function callbackForErr(result) {
+        if (errRecTable) {
+          errRecTable.destroy();
+        }
+
+        let tag = "#errRecTable";
+        let datas;
+
+        let column_defs = [
+          { targets: [0], sortable: true },
+          { targets: [1], sortable: true },
+          { targets: [2], sortable: true },
+          { targets: [3], sortable: true },
+        ];
+
+        let columns = [
+          {
+            title: "異常ID",
+            data: "uuid",
+            className: "text-nowrap",
+          },
+          {
+            title: "異常原因",
+            data: "msgText",
+            className: "text-nowrap",
+          },
+          {
+            title: "ACK確認",
+            data: "ackState",
+            className: "text-nowrap",
+            render: function (data, type, row) {
+              return data.$ordinal === 1
+                ? "未確認"
+                : displayDate(row.ackedTime);
+            },
+          },
+          {
+            title: "發生時間",
+            data: "timestamp",
+            className: "text-nowrap",
+            render: function (data, type, row) {
+              return displayDate(row.timestamp);
+            },
+          },
+        ];
+
+        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>"
+        );
+        $("#errRecTable").DataTable().order([3, "desc"]).draw();
+      }
+
+      //根據 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>`;
+        }
+        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 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) {
+      console.log($(obj).data("subsysobj"));
+      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(5%)">
+                                                                                                <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>`;
+              }
             });
-        }
 
-        function getAllDevice() {
-            let url = baseApiUrl + "/api/Device/GetAllDevice";
-            let result = [];
+            $("#froLisPage").html(strHtml);
 
-            ytAjax = new YourTeam.Ajax(
-                url,
-                null,
-                function (res) {
-                    if (!res || res.code != "0000" || !res.data) {
-                    } else {
-                        result = res.data;
-                    }
-                },
-                null,
-                "POST"
-            ).send();
-            return result;
-        }
+            // $("#homeBtn").YTNavbar("init");
+          }
+        },
+        null,
+        "POST"
+      ).send();
+    }
 
-        function loadNoticeConSta() {
-            let noticeStatus = localStorage.getItem("noticeStatus");
-            chaNoticeConSta(noticeStatus ?? "show");
-        }
-
-        function chaNoticeConSta(type = null) {
-            let showText = $("#toggleNoticeBtn #noticeConText").data("show");
-            let hideText = $("#toggleNoticeBtn #noticeConText").data("hide");
-            let iconArr = ["fal fa-comment-slash", "fal fa-comment-dots"];
-            $("#noticeConIcon").removeClass(iconArr[0]).removeClass(iconArr[1]);
-            if (type != null) {
-                if (type == "hide") {
-                    setHide();
-                } else if (type == "show") {
-                    setShow();
-                }
+    function 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 {
-                if ($("#noticeBlock").is(":visible")) {
-                    setHide();
-                } else if (!$("#noticeBlock").is(":visible")) {
-                    setShow();
-                }
-            }
+              $("#sysMonBtnList").html("");
 
-            function setShow() {
-                $("#toggleNoticeBtn").find("#noticeConText").text(hideText);
-                $("#noticeConIcon").addClass(iconArr[0]);
-                $("#noticeBlock").show();
-                $("#noticeBlock").animate({ opacity: 1 }, 200);
-                localStorage.setItem("noticeStatus", "show");
-            }
+              $.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";
+                      // }
 
-            function setHide() {
-                $("#toggleNoticeBtn").find("#noticeConText").text(showText);
-                $("#noticeConIcon").addClass(iconArr[1]);
-                $("#noticeBlock").animate({ opacity: 0 }, 200, function () {
-                    $("#noticeBlock").hide();
+                      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;
+                    }
+                  );
                 });
-                localStorage.setItem("noticeStatus", "hide");
+                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(
+                  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",
+                        "building-tag": buildingTagOnJquery(pageAct.buiTag),
+                      },
+                      "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"
+        ).send();
+      }
+    }
+
+    function getLogo() {
+      url = baseApiUrl + "/api/GetLogo";
+      ytAjax = new YourTeam.Ajax(
+        url,
+        null,
+        function (res) {
+          $("[name=webLogo]").attr("src", baseImgUrl + "/img/" + res.data);
+        },
+        null,
+        "POST"
+      ).send();
+    }
+
+    function getUserInfo() {
+      let url = baseApiUrl + varApiUrl + "getUserFull";
+
+      ytAjax = new YourTeam.Ajax(
+        url,
+        null,
+        function (res) {
+          if (!res || res.code != "0000") {
+          } else {
+            pageAct.userInfo = res.data;
+            let user = res.data;
+            $("#usrName").text(user.full_name);
+          }
+        },
+        null,
+        "POST"
+      ).send();
+    }
+
+    var noticeOptArr = [];
+    function getAlarmFromDB() {
+      let url = baseApiUrl + "/api/AlarmCard";
+      ytAjax = new YourTeam.Ajax(
+        url,
+        null,
+        function (res) {
+          if (!res || res.code != "0000" || !res.data) {
+          } else {
+            let datas = res.data;
+          }
+        },
+        null,
+        "POST",
+        true
+      ).send();
+    }
+
+    function getAlarm() {
+      let now = new Date().getTime();
+      let noticeObj = [
+        { title: "異常編號", data: "uuid" },
+        { title: "異常等級", data: "priority" },
+        { title: "異常類別", data: "alarmClass" },
+        { title: "設備名稱", data: "full_name" },
+        { title: "異常訊息", data: "msgText" },
+      ];
+      // 向 niagara 取得告警資料
+      getDeviceAlarmCardByBaja(null, now, false, false, function (bajaDatas) {
+        let datas = bajaDatas.data.filter(
+          ({ alarmClass }) => alarmClass !== "defaultAlarmClass"
+        );
+        let titleHtml = `異常通知`;
+        let notices = [];
+        // 遍歷每個告警資料
+        if (datas.length === 0) {
+          $("#noticeBlock").innerHTML = "";
+        } else {
+          $.each(datas ?? [], (idx, data) => {
+            if (noticeOptArr.findIndex((x) => x.id == data.uuid) == -1) {
+              // 針對該告警對象的設備，從 allDevices 找出設備名稱
+              const building_name = pageAct.buildList.find(
+                ({ building_tag }) =>
+                  building_tag === data.devicePath.split("_")[1]
+              )?.full_name;
+
+              datas[idx].full_name =
+                allDevices.filter(
+                  (x) => x.device_number == data.devicePath
+                )[0]?.full_name ||
+                (data.alarmClass === "Sys_Con_AlarmClass"
+                  ? `${building_name}_電錶邊緣控制器_${data.split("_")[7]}`
+                  : "");
+
+              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()
+            );
+          }
         }
-    </script>
+      });
+    }
+
+    function getAllDevice() {
+      let url = baseApiUrl + "/api/Device/GetAllDevice";
+      let result = [];
+
+      ytAjax = new YourTeam.Ajax(
+        url,
+        null,
+        function (res) {
+          if (!res || res.code != "0000" || !res.data) {
+          } else {
+            result = res.data;
+          }
+        },
+        null,
+        "POST"
+      ).send();
+      return result;
+    }
+
+    function loadNoticeConSta() {
+      let noticeStatus = localStorage.getItem("noticeStatus");
+      chaNoticeConSta(noticeStatus ?? "show");
+    }
+
+    function chaNoticeConSta(type = null) {
+      let showText = $("#toggleNoticeBtn #noticeConText").data("show");
+      let hideText = $("#toggleNoticeBtn #noticeConText").data("hide");
+      let iconArr = ["fal fa-comment-slash", "fal fa-comment-dots"];
+      $("#noticeConIcon").removeClass(iconArr[0]).removeClass(iconArr[1]);
+      if (type != null) {
+        if (type == "hide") {
+          setHide();
+        } else if (type == "show") {
+          setShow();
+        }
+      } else {
+        if ($("#noticeBlock").is(":visible")) {
+          setHide();
+        } else if (!$("#noticeBlock").is(":visible")) {
+          setShow();
+        }
+      }
+
+      function setShow() {
+        $("#toggleNoticeBtn").find("#noticeConText").text(hideText);
+        $("#noticeConIcon").addClass(iconArr[0]);
+        $("#noticeBlock").show();
+        $("#noticeBlock").animate({ opacity: 1 }, 200);
+        localStorage.setItem("noticeStatus", "show");
+      }
+
+      function setHide() {
+        $("#toggleNoticeBtn").find("#noticeConText").text(showText);
+        $("#noticeConIcon").addClass(iconArr[1]);
+        $("#noticeBlock").animate({ opacity: 0 }, 200, function () {
+          $("#noticeBlock").hide();
+        });
+        localStorage.setItem("noticeStatus", "hide");
+      }
+    }
+  </script>
 </body>
 <!-- END Body -->
 </html>
diff --git a/Frontend/js/n4js/alarmbaja.js b/Frontend/js/n4js/alarmbaja.js
index 7d1d03e..1508091 100644
--- a/Frontend/js/n4js/alarmbaja.js
+++ b/Frontend/js/n4js/alarmbaja.js
@@ -241,12 +241,11 @@ function getOneDeviceAlarmTop10ByBaja(devicePath, callback) {
             )
 
             var _msgText = record.get("alarmData").get("msgText"); // == 1 ? _occurrenceTime : "未確認";
-            var _ackText =
-              record.get("ackState")
+            
             _ss.push({
               uuid: _resultUuid[0],
               msgText: _msgText,
-              ackState: _ackText,
+              ackState: record.get("ackState"),
               timestamp: _occurrenceTime,
               normalTime: _normalTime,
               ackedTime: _ackTime
@@ -592,13 +591,9 @@ function getSystemAlarmByBaja(callback) {
   var _index = 0;
 
   require(["baja!"], function (baja) {
-    // console.log("local:|foxs:"+ port +"|alarm:|bql:select alarmClass where isAlarm")
-    //baja.Ord.make("local:|foxs:|alarm:|bql:select timestamp, ackState, alarmClass, alarmClassDisplayName, alarmValue, alarmData, alarmData.sourceName, uuid, alarmData.msgText, alarmData.numericValue, alarmData.presentValue, alarmData.status, alarmData.toState, normalTime where isAlarm").get()
-    baja.Ord.make(
-      "local:|foxs:" +
-      port +
-      "|alarm:|bql:select alarmClass where sourceState = 'offnormal'"
-    )
+/*     console.log(`local:|foxs:${port}|alarm:|bql:select alarmClass where sourceState='offnormal' and alarmData.sourceName like '%${pageAct.AreaTag}_${pageAct.buiTag}%'`)*/
+    baja.Ord.make(`local:|foxs:${port}|alarm:|bql:select alarmClass where sourceState='offnormal' and alarmData.sourceName like '%${pageAct.AreaTag}_${pageAct.buiTag}%'`)
+    
       .get()
       .then(function (table) {
         return table.cursor({