diff --git a/Frontend/_alert.html b/Frontend/_alert.html
index 9f4686b..e6c1faf 100644
--- a/Frontend/_alert.html
+++ b/Frontend/_alert.html
@@ -1049,7 +1049,7 @@
 				}
 		}
 
-		function refTable(data) {
+	function refTable(data) {
 				let tag = "#alertTable";
 
 				let column_defs = [
@@ -1109,16 +1109,7 @@
 								title: "發生時間",
 								data: "timestamp",
 								render: function (data) {
-										return (
-												new Date(data).toLocaleString("zh-tw", {
-														year: "numeric",
-														month: "2-digit",
-														day: "2-digit",
-														hour: "2-digit",
-														minute: "2-digit",
-												}),
-												displayDate(data, "datetime")
-										);
+                                    return displayDate(data);
 								},
 						},
 						{
@@ -1133,9 +1124,7 @@
 										let btnCol = data == "1" ? "warning" : "info";
 										return data == "1"
 												? `<td><button onclick="chgAck('${row.uuid}')" class="btn btn-${btnCol}">${confirm}</button></td>`
-												: `<td><span>${new Date(row.ackedTime).toLocaleString(
-														"zh-tw"
-												)}</span></td>` /*`<td><button class="btn btn-${btnCol}">${confirm}</button></td>`*/;
+                                            : `<td><span>${displayDate(row.ackedTime)}</span></td>` /*`<td><button class="btn btn-${btnCol}">${confirm}</button></td>`*/;
 								},
 						},
 						{
diff --git a/Frontend/_operation.html b/Frontend/_operation.html
index 599b2f3..464f10c 100644
--- a/Frontend/_operation.html
+++ b/Frontend/_operation.html
@@ -1,2412 +1,2414 @@
 <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="">
-								<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 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>
+			</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>
+	 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>
 						</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 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>
 </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>
+	 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>
 						</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>
-														</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="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 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>
+
+										<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 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 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>
-						</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="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>
+	 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>
 						</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="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 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 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 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>
-						</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="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>
-				</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>
 
 <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;
+	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();
+		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();
+		$("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();
 
-				$("[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;
+				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);
 		});
 
-		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");
+		$(`[onclick^=setDate]`).on("click", function () {
+			if ($(this).hasClass("btn-info")) {
+				$(this).removeClass("btn-info");
+				$(this).addClass("btn-secondary");
+				setDate();
+			} else btnSelCss(this);
+		});
 
-				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";
+		$("#startdate, #enddate").on("change", function () {
+			let startdate = new Date($("#startdate").val());
+			let enddate = new Date($("#enddate").val());
+			setDate(null, startdate, enddate);
+		});
 
-				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 },
-				];
+		$(`[onclick="setType(2)"]`).click();
 
-				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();
-								},
-						},
-				];
+		initDate();
+		event();
+		$("div.image-full-show").css("display", "none");
 
-				opeFirmTable = new YourTeam.JqDataTables.getTableByAjax(
-						ajaxObj,
-						tag,
+		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,
-						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",
-										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",
-										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
-				);
-		}
+						{ 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();
+				},
+			},
+		];
 
-		function setType(wt) {
-				pageAct.work_type = wt;
+		opeFirmTable = new YourTeam.JqDataTables.getTableByAjax(
+			ajaxObj,
+			tag,
+			null,
+			columns,
+			column_defs
+		);
+	}
 
-				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 loadOpeRecTable() {
+		$("#opeFirmTable_wrapper").css("display", "none");
 
-		function setDate(dateType = null, startdate = null, enddate = null) {
-				clearPageAct();
-				pageAct.startdate = startdate;
-				pageAct.enddate = enddate;
+		$("#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");
 
-				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("/", "-");
+		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 (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());
-						}
+		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");
 
-						refTable();
-				}
-		}
+			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 },
+			];
 
-		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);
+			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 (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;
-								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,
-								};
-
-								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();
-												}
-										},
+							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,
-										"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,
+										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,
 										}
-								},
-								null,
-								"DELETE"
-						).send();
-				});
+									);
+									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";
 
-				onEvent("click", "#opeRecDelBtn", function () {
-						pageAct.opeRecId = $(this).parent().data("id");
-						pageAct.opeFirmId = null;
-				});
+									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);
+								}
+							}
+						});
 
-				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 },
-										},
+						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;
+				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,
+				};
+
+				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 {
-								$(form).validate({
-										rules: {
-												inpWorTyp_2: { required: true },
-												inpFixFirm_2: { required: true },
-												inpStatus_2: { required: true },
-												inpWorPerId_2: { required: true },
-										},
-								});
+							toast_ok(common.AddSuc);
+							//$("#opeFirmModal").modal("hide");
+							$("#OpeFirmCanBtn").click();
+							refTable();
 						}
+					},
+					null,
+					"POST"
+				).send();
+			}
+		});
 
-						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);
-								});
+		onEvent("click", "#opeFirmDelBtn", function () {
+			pageAct.opeRecId = null;
+			pageAct.opeFirmId = $(this).parent().data("id");
+		});
 
-								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
-								);
+		onEvent("click", "#confirmDelBtn", function () {
+			objSendData.Data = { id: pageAct.opeFirmId ?? pageAct.opeRecId };
+			let url =
+				baseApiUrl +
+				"/operation/" +
+				(pageAct.work_type == null ? "DelOpeFirm" : "DelOpeRecord");
 
-								//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);
+			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();
+		});
 
-								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", "#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);
 				});
 
-				onEvent("click", "#opeRecEdiBtn", function () {
-						clearOpeRecPageAct();
-						selUser();
-						selDevice();
-						uploader["ope1"][0].dropzone.removeAllFiles();
-						uploader["ope2"][0].dropzone.removeAllFiles();
+				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
+				);
 
-						$("#ope_forImage").html("");
-						$("#ope_forFile").html("");
-						$("#ope_forImage_2").html("");
-						$("#ope_forFile_2").html("");
+				//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);
 
-						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" });
-							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);
-							$(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
-							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);
-							$(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");
-								});
-
-								pageAct.imageFile = $.grep(pageAct.imageFile, function (file) {
-										return file.save_file_name != elem.find("a").data("savename");
-								});
-						}
-
-						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"
+				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("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();
+		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();
-						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
+						$(pageAct.work_type == "1" ? "#inpNumber" : "#inpNumber_2").val(
+							res.data.formId
 						);
-				else $(pageAct.work_type == "1" ? "#inpErrCode" : "#inpErrCode_2").html("");
-				$(loadEle).Loading("close");
-		}
+						$(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();
 
-		//上傳檔案 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");
-										}
-								});
-						},
-				});
+						ope_imgHtml = null;
 
-				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 (
+						$.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" });
+										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);
+										$(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(
-										file.name
+									v.ori_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,
-										});
-								}
-						}
+							) {
+								/*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);
+										$(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");
 				});
 
-				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();
+				pageAct.imageFile = $.grep(pageAct.imageFile, function (file) {
+					return file.save_file_name != elem.find("a").data("savename");
 				});
+			}
 
-				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");
-										}
-								});
-						},
+			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);
+					}
 				});
-
-				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,
-										});
-								}
-						}
+				this.on("complete", function (file) {
+					if (file.savename) {
+						$(file.previewElement).find(".dz-image img").remove();
+					}
 				});
-
-				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();
+				this.on("thumbnail", function (file) {
+					// 若為讀取檔案時
+					if (file.savename) {
+						$(file.previewElement)
+							.removeClass("dz-image-preview")
+							.addClass("dz-file-preview");
+					}
 				});
-		}
+			},
+		});
 
-		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["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,
+					});
+				}
+			}
+		});
 
-		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();
-		}
+		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();
+		});
+
+		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 = [];
+
+			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,
+				});
+			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();
+	}
+
+	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 b5c4a5d..595ecc5 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>-->
-            </a>
-          </div>
-          <!--DOC: nav menu layout change shortcut-->
-          <div class="hidden-md-down dropdown-icon-menu position-relative">
-            <a href="#"
-               class="header-btn btn js-waves-off"
-               data-action="toggle"
-               data-class="nav-function-hidden"
-               title="Hide Navigation">
-              <i class="ni ni-menu"></i>
-            </a>
-            <ul>
-              <li>
-                <a href="#"
-                   class="btn js-waves-off"
-                   data-action="toggle"
-                   data-class="nav-function-minify"
-                   title="Minify Navigation">
-                  <i class="ni ni-minify-nav"></i>
-                </a>
-              </li>
-              <li>
-                <a href="#"
-                   class="btn js-waves-off"
-                   data-action="toggle"
-                   data-class="nav-function-fixed"
-                   title="Lock Navigation">
-                  <i class="ni ni-lock-nav"></i>
-                </a>
-              </li>
-            </ul>
-          </div>
-          <!--DOC: mobile button appears during mobile width-->
-          <div class="hidden-lg-up">
-            <a href="#"
-               class="header-btn btn press-scale-down"
-               data-action="toggle"
-               data-class="mobile-nav-on">
-              <i class="ni ni-menu"></i>
-            </a>
-          </div>
+                            <!--<span class="page-logo-text mr-1">SmartAdmin WebApp</span>-->
+                            <!--<span class="position-absolute text-white opacity-50 small pos-top pos-right mr-2 mt-n2"></span>
+                                                <i class="fal fa-angle-down d-inline-block ml-1 fs-lg color-primary-300"></i>-->
+                        </a>
+                    </div>
+                    <!--DOC: nav menu layout change shortcut-->
+                    <div class="hidden-md-down dropdown-icon-menu position-relative">
+                        <a href="#"
+                           class="header-btn btn js-waves-off"
+                           data-action="toggle"
+                           data-class="nav-function-hidden"
+                           title="Hide Navigation">
+                            <i class="ni ni-menu"></i>
+                        </a>
+                        <ul>
+                            <li>
+                                <a href="#"
+                                   class="btn js-waves-off"
+                                   data-action="toggle"
+                                   data-class="nav-function-minify"
+                                   title="Minify Navigation">
+                                    <i class="ni ni-minify-nav"></i>
+                                </a>
+                            </li>
+                            <li>
+                                <a href="#"
+                                   class="btn js-waves-off"
+                                   data-action="toggle"
+                                   data-class="nav-function-fixed"
+                                   title="Lock Navigation">
+                                    <i class="ni ni-lock-nav"></i>
+                                </a>
+                            </li>
+                        </ul>
+                    </div>
+                    <!--DOC: mobile button appears during mobile width-->
+                    <div class="hidden-lg-up">
+                        <a href="#"
+                           class="header-btn btn press-scale-down"
+                           data-action="toggle"
+                           data-class="mobile-nav-on">
+                            <i class="ni ni-menu"></i>
+                        </a>
+                    </div>
 
-          <!-- <div class="dropdown">
-                    <a
-                      class="dropdown-toggle fs-1"
-                      href="javascript:;"
-                      role="button"
-                      id="buiActDrop"
-                      data-target="buiList"
-                      data-toggle="dropdown"
-                      aria-haspopup="true"
-                    >
-                    </a>
-                    <div
-                      id="buiList"
-                      class="dropdown-menu dropdown-select-menu js-auto-close"
-                    ></div>
-                  </div> -->
+                    <!-- <div class="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>
+                    <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>
+                <!-- 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 id="sysMonNavbar" class="yt-navbar yt-left-navbar">
+                      <div class="yt-navbar-content">
+                        <ul id="sysMonBtnList"></ul>
                       </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 Content -->
+                <!-- BEGIN Page Footer -->
+                <!--<footer class="page-footer" role="contentinfo">
+                            <div class="d-flex align-items-center flex-1 text-muted">
+                                <span class="hidden-md-down fw-700">2022 © SmartAdmin by&nbsp;<a href='https://www.gotbootstrap.com' class='text-primary fw-500' title='gotbootstrap.com' target='_blank'>gotbootstrap.com</a></span>
+                            </div>
+                            <div>
+                                <ul class="list-table m-0">
+                                    <li><a href="intel_introduction.html" class="text-secondary fw-700">About</a></li>
+                                    <li class="pl-3"><a href="info_app_licensing.html" class="text-secondary fw-700">License</a></li>
+                                    <li class="pl-3"><a href="info_app_docs.html" class="text-secondary fw-700">Documentation</a></li>
+                                    <li class="pl-3 fs-xl"><a href="https://wrapbootstrap.com/user/MyOrange" class="text-secondary" target="_blank"><i class="fal fa-question-circle" aria-hidden="true"></i></a></li>
+                                </ul>
+                            </div>
+                        </footer>-->
+                <!-- END Page Footer -->
+                <!-- BEGIN Shortcuts -->
+                <!-- END Shortcuts -->
+                <!-- BEGIN Color profile -->
+                <!-- this area is hidden and will not be seen on screens or screen readers -->
+                <!-- we use this only for CSS color refernce for JS stuff -->
+                <p id="js-color-profile" class="d-none">
+                    <span class="color-primary-50"></span>
+                    <span class="color-primary-100"></span>
+                    <span class="color-primary-200"></span>
+                    <span class="color-primary-300"></span>
+                    <span class="color-primary-400"></span>
+                    <span class="color-primary-500"></span>
+                    <span class="color-primary-600"></span>
+                    <span class="color-primary-700"></span>
+                    <span class="color-primary-800"></span>
+                    <span class="color-primary-900"></span>
+                    <span class="color-info-50"></span>
+                    <span class="color-info-100"></span>
+                    <span class="color-info-200"></span>
+                    <span class="color-info-300"></span>
+                    <span class="color-info-400"></span>
+                    <span class="color-info-500"></span>
+                    <span class="color-info-600"></span>
+                    <span class="color-info-700"></span>
+                    <span class="color-info-800"></span>
+                    <span class="color-info-900"></span>
+                    <span class="color-danger-50"></span>
+                    <span class="color-danger-100"></span>
+                    <span class="color-danger-200"></span>
+                    <span class="color-danger-300"></span>
+                    <span class="color-danger-400"></span>
+                    <span class="color-danger-500"></span>
+                    <span class="color-danger-600"></span>
+                    <span class="color-danger-700"></span>
+                    <span class="color-danger-800"></span>
+                    <span class="color-danger-900"></span>
+                    <span class="color-warning-50"></span>
+                    <span class="color-warning-100"></span>
+                    <span class="color-warning-200"></span>
+                    <span class="color-warning-300"></span>
+                    <span class="color-warning-400"></span>
+                    <span class="color-warning-500"></span>
+                    <span class="color-warning-600"></span>
+                    <span class="color-warning-700"></span>
+                    <span class="color-warning-800"></span>
+                    <span class="color-warning-900"></span>
+                    <span class="color-success-50"></span>
+                    <span class="color-success-100"></span>
+                    <span class="color-success-200"></span>
+                    <span class="color-success-300"></span>
+                    <span class="color-success-400"></span>
+                    <span class="color-success-500"></span>
+                    <span class="color-success-600"></span>
+                    <span class="color-success-700"></span>
+                    <span class="color-success-800"></span>
+                    <span class="color-success-900"></span>
+                    <span class="color-fusion-50"></span>
+                    <span class="color-fusion-100"></span>
+                    <span class="color-fusion-200"></span>
+                    <span class="color-fusion-300"></span>
+                    <span class="color-fusion-400"></span>
+                    <span class="color-fusion-500"></span>
+                    <span class="color-fusion-600"></span>
+                    <span class="color-fusion-700"></span>
+                    <span class="color-fusion-800"></span>
+                    <span class="color-fusion-900"></span>
+                </p>
+                <!-- END Color profile -->
+            </div>
+        </div>
     </div>
-  </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="
+    <!-- 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 class="d-table-cell w-100 align-middle pl-2 pr-2">
+                                                <div class="text-truncate text-truncate-md">
+                                                    +714651347790
+                                                    <small class="d-block font-italic fs-xs opacity-50">
+                                                        Missed Call
+                                                    </small>
+                                                </div>
+                                            </div>
+                                        </a>
+                                    </li>
+                                </ul>
+                                <div class="filter-message js-filter-message"></div>
+                            </div>
                         </div>
-                      </div>
-                    </a>
-                  </li>
-                </ul>
-                <div class="filter-message js-filter-message"></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>
-              <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,11 +802,11 @@ 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:
+    <!--<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)
@@ -819,347 +819,347 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                 + 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>
+    <!-- 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>
-  <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 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"]; // 溫度向小類
 
-      /**
-       * 全數套件讀取完成 Callback
-       * */
-      function loadedJsPack() {
-        $.fn.datepicker = window._datepickerDP;
+        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目前沒有
+        ];
 
-        cookies = new YourTeam.Utility.Cookie();
-        jwt = cookies.get("JWT-Authorization");
-        pageAct.AreaTag = initAreaTag;
-        loadEvent();
+        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", },
+        ];
 
-        if (!jwt) {
-          if (location.href.indexOf("localhost:5966") != -1) {
-            location.href = "login.html";
-          }
-          myBaja = new MyBaja();
-          myBaja.setMyUserAccount(Login);
-        } else {
-          isValidLogin();
+        /**
+         * 頁面 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;
         }
 
-        $(loadEle).Loading("close");
-      }
+        try {
+            $(function () {
+                // 二次引用 jquery.jsf
+                // - 在 require 內部程序需要引用 jquery，由於 require 的套件需要依賴 jquery ，就算 HTML 已經引用 jquery， require 也無法參考
+                // - 上方 HTML 引用套件若有使用 jquery 內存數據程序 (ex: $(x).data() , $(x).trigger("custom event") , $.fn.custom ...)
+                // - 會被清洗，有類似程序需放入 loadPack1 Function rquired 引用
+                // (原 datatable.bundle.js require 會出問題，先以 cdn datatable.min.js引用)
+                require.undef("baja!");
+                require(["jquery"], loadedBasePack);
+            });
 
-      /**
-       * 登入驗證完成 Callback
-       * */
-      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>`;
+            /**
+             * 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);
                 });
-                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");
+            /**
+             * 全數套件讀取完成 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");
             }
-          }
-          // 取消當前所有 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));
-          // 讀取子頁面
+            /**
+             * 登入驗證完成 Callback
+             * */
+            async function isValidLogin() {
+                getUserInfo();
+                await iniFroList();
+                await isShowBuildingInMenu();
+                showMainSys();
+                await getBuiList();
+                await getSysMonBtnList();
+                checkDevState();
+                loadNoticeConSta();
 
-          $("#app").load(`_${page}.html`, loadCallback);
-        });
+                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");
@@ -1169,1292 +1169,1320 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                     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: "8%", sortable: true },
-          { targets: [1], width: "8%", sortable: true },
-          { targets: [2], width: "7%", sortable: true },
-          { targets: [3], width: "7%", sortable: true },
-        ];
-
-        let columns = [
-          {
-            title: "類型",
-            data: "work_type_name",
-          },
-          {
-            title: "項目",
-            data: "fix_do",
-          },
-          {
-            title: "處理人員",
-            data: "work_person_name",
-          },
-          {
-            title: "發生/完成時間",
-            data: "finishTime",
-            render: function (data, type, row) {
-              return row.createdAt + "<br>" + (data.includes("0001")? "未完工": data);
-            },
-          },
-        ];
-
-        opeRecTable = new YourTeam.JqDataTables.getTableByAjax(
-          url,
-          tag,
-          null,
-          columns,
-          column_defs,
-          null,
-          null,
-          null,
-          null,
-          null,
-          null,
-          "<'scrolledTable'tpi>"
-        );
-      }
-
-      function loadLightSchTable(devGuid) {
-        /*let url = baseApiUrl + "/api/Device/GetOpeDevice?device_guid=" + devGuid;*/
-        let url = `https://63772efc5c47776512165937.mockapi.io/api/GetLightSche`;
-        let tag = "#lightSchTable";
-
-        let column_defs = [
-          { targets: [0], width: "14%", sortable: true },
-          { targets: [1], width: "14%", sortable: true },
-          { targets: [2], width: "14%", sortable: true },
-          { targets: [3], width: "14%", sortable: true },
-          { targets: [4], width: "14%", sortable: true },
-          { targets: [5], width: "14%", sortable: true },
-          { targets: [6], width: "16%", sortable: true },
-        ];
-
-        let columns = [
-          {
-            title: "序號",
-            data: null,
-            render: function (data, type, row, meta) {
-              return meta.row + 1;
-            },
-          },
-          {
-            title: "排程名稱",
-            data: "sch_name",
-          },
-          {
-            title: "設備數量",
-            data: "dev_cnt",
-          },
-          {
-            title: "排程設定",
-            data: "sch_set",
-          },
-          {
-            title: "動作",
-            data: "action",
-          },
-          {
-            title: "狀態",
-            data: "status",
-          },
-          {
-            title: "功能",
-            data: "sch_id",
-            render: function (data, type, row) {
-              let btnDiv = creDiv(["row", "m-0", "justify-content-center"], {
-                style: "gap:10px",
-              });
-              let icon = creI(["fas", "fa-pencil-alt"]);
-              btnDiv.append(
-                creBtnHtml("觸發執行", "lightSchTabTogBtn" + data, null, [
-                  "btn",
-                  "btn-success",
-                ])
-              );
-              btnDiv.append(
-                creBtn(
-                  "修改",
-                  "lightSchTabEdiBtn" + data,
-                  null,
-                  ["btn", "btn-danger"],
-                  { toggle: "modal", target: "#delModal" }
-                ).append(icon)
-              );
-              return btnDiv.outerHtml();
-            },
-          },
-        ];
-
-        let lightSchTable = new YourTeam.JqDataTables.getTableByAjax(
-          url,
-          tag,
-          null,
-          columns,
-          column_defs,
-          null,
-          null,
-          null,
-          null,
-          null,
-          null,
-          "tpi"
-        );
-      }
-
-      function controlFocusHotspot(dbId, open = true) {
-        pageAct.sysSubTag !== "L1" &&
-          pageAct.sysSubTag !== "M12" &&
-          console.log("dbId", dbId);
-        pageAct.sysSubTag !== "L1" &&
-          pageAct.sysSubTag !== "M12" &&
-          changeColorForHotspot(dbId, open ? "focus" : null);
-        changeScaleForHotspot(dbId, open);
-      }
-
-      // Baja 取得異常紀錄
-      function loadErr(allPath) {
-        if (allPath != undefined && allPath != null) {
-          getOneDeviceAlarmTop10ByBaja(allPath, callbackForErr);
-        } else {
-          console.log("no device");
-        }
-      }
-
-      // Card - 異常紀錄 Table
-      function callbackForErr(result) {
-        if (errRecTable) {
-          errRecTable.destroy();
-        }
-
-        let tag = "#errRecTable";
-        let datas;
-
-        let column_defs = [
-          { targets: [0], width: "15%", sortable: true },
-          { targets: [1], width: "25%", sortable: true },
-          { targets: [2], width: "25%", sortable: true },
-          { targets: [3], width: "35%", sortable: true },
-        ];
-
-        let columns = [
-          {
-            title: "異常ID",
-            data: "uuid",
-          },
-          {
-            title: "異常原因",
-            data: "msgText",
-          },
-          {
-            title: "ACK確認",
-            data: "ackState",
-          },
-          {
-            title: "發生時間",
-            data: "timestamp",
-            // "render": function (data, type, row) {
-            //     return row.timestamp + "<br>" + data;
-            // },
-          },
-        ];
-
-        let json_object = JSON.parse(result);
-        datas = json_object["data"];
-        errRecTable = new YourTeam.JqDataTables.getTableByStatic(
-          tag,
-          datas,
-          columns,
-          column_defs,
-          null,
-          null,
-          null,
-          null,
-          "<'scrolledTable'tpi>"
-        );
-      }
-
-      //根據 data-type 設置顏色 (判斷後台是否有設定，若無則帶預設)
-      function setLightColor() {
-        $("[data-light-type]").each((index, ele) => {
-          let type = $(ele).data("light-type");
-          let isFlashing = false;
-          let color = "#000";
-          switch (type) {
-            case "normal":
-              color =
-                pageAct.sysSubObj.device_normal_color ??
-                "var(--theme-success)";
-              isFlashing = pageAct.sysSubObj.device_normal_flashing == "1";
-              break;
-            case "close":
-              color =
-                pageAct.sysSubObj.device_close_color ??
-                "var(--theme-secondary)";
-              isFlashing = pageAct.sysSubObj.device_close_flashing == "1";
-              break;
-            case "error":
-              color =
-                pageAct.sysSubObj.device_error_color ?? "var(--theme-danger)";
-              isFlashing = pageAct.sysSubObj.device_error_flashing == "1";
-              break;
-          }
-          $(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>`;
-              }
-            });
-
-            $("#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;
+                // 紀錄目前被點選的棟別
+                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);
                     }
-                  );
                 });
-                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,
+
+                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();
+                        }
                     },
-                    "topFunBtn"
-                  );
-                  li2.append(a2);
-                  ul.append(li2);
+                    error: function (xhr, textStatus, thrownError) {
+                        alert(common.SysErr);
+                    },
+                });
+            }
+
+            function refreshSubPage(toPage = null) {
+                lastPage = sessionStorage.getItem("lastPage");
+                console.log("lastPage", lastPage);
+                if (toPage) {
+                    lastPage = toPage;
                 }
 
-                li.append(ul);
-                $("#sysMonBtnList").append(li);
-              });
-              $("#sysMonTopBtn").YTNavbar("init", { onlyOneOpen: true });
+                if (lastPage) {
+                    let lastPageAct = {};
 
-              $("span[id^=buildTab]")
-                .first()
-                .YTTab("setAndClick", { triggerType: "first" });
+                    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);
+                }
             }
-          },
-          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";
-                    // }
+            //==============================================================================
+            //                       ↓  系統監控 - 共用 Function ↓
+            //==============================================================================
 
-                    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"
-                      );
-                    }
-                  }
+            // 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");
             }
-          },
-          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();
-    }
+            // Card - 異常紀錄 block
+            function drawErrRecTabBlo() {
+                let strHtml = `<table id="errRecTable" class="table table-bordered table-striped text-center m-0 w-100">
 
-    function getUserInfo() {
-      let url = baseApiUrl + varApiUrl + "getUserFull";
+                                                                                            </table>`;
+                return strHtml;
+            }
 
-      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();
-    }
+            // Card - 運維紀錄 block
+            function drawOpeRecTabBlo() {
+                let strHtml = `<table id="opeRecTable" class="table table-bordered table-striped text-center m-0 w-100">
 
-    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();
-    }
+                                                                                            </table>`;
+                return strHtml;
+            }
 
-    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 = [];
-        // 遍歷每個告警資料
-        $.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;
+            // Card 呈現初始化
+            function initPopover(
+                type = null,
+                extOption = {},
+                selector = "[name=devItem]"
+            ) {
+                if (type == null && pageAct.sysMainTag == "LT") {
+                    type = "light";
+                }
 
-            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]}`
-                  : "");
+                $(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 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);
-            });
+                    let option = {
+                        html: `<div class="card m-1 border device-wrap" data-number="${deviceNumber(
+                            devNum
+                        )}" data-position="left">
+                                                        <div class="card-header p-3">
 
-            div1.append(btnDiv);
-            // 拚湊 YTNotice 通知套件所需參數
-            let main = {
-              title: titleHtml,
-              content: div1.outerHtml(),
-              type: "warning",
-              id: data.uuid,
-              hasCloseBtn: true,
-              timeText: displayDate(data.timestamp),
+                                                            <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;
+                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,
             };
-            noticeOptArr.push(main);
-            notices.push(main);
-          }
-        });
-        if (notices.length != 0) {
-          $("#noticeBlock").YTNotice(
-            "add_many",
-            notices.oSort("id").reverse()
-          );
+            ytAjax = new YourTeam.Ajax(
+                url,
+                objSendData,
+                function (res) {
+                    if (!res || res.code != "0000" || !res.data) {
+                    } else {
+                        pageAct.devItems = res.data;
+                    }
+                },
+                null,
+                "POST"
+            ).send();
         }
-      });
-    }
 
-    function getAllDevice() {
-      let url = baseApiUrl + "/api/Device/GetAllDevice";
-      let result = [];
-
-      ytAjax = new YourTeam.Ajax(
-        url,
-        null,
-        function (res) {
-          if (!res || res.code != "0000" || !res.data) {
-          } else {
-            result = res.data;
-          }
-        },
-        null,
-        "POST"
-      ).send();
-      return result;
-    }
-
-    function loadNoticeConSta() {
-      let noticeStatus = localStorage.getItem("noticeStatus");
-      chaNoticeConSta(noticeStatus ?? "show");
-    }
-
-    function chaNoticeConSta(type = null) {
-      let showText = $("#toggleNoticeBtn #noticeConText").data("show");
-      let hideText = $("#toggleNoticeBtn #noticeConText").data("hide");
-      let iconArr = ["fal fa-comment-slash", "fal fa-comment-dots"];
-      $("#noticeConIcon").removeClass(iconArr[0]).removeClass(iconArr[1]);
-      if (type != null) {
-        if (type == "hide") {
-          setHide();
-        } else if (type == "show") {
-          setShow();
+        function 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"
+                );
+            }
         }
-      } else {
-        if ($("#noticeBlock").is(":visible")) {
-          setHide();
-        } else if (!$("#noticeBlock").is(":visible")) {
-          setShow();
+
+        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 setShow() {
-        $("#toggleNoticeBtn").find("#noticeConText").text(hideText);
-        $("#noticeConIcon").addClass(iconArr[0]);
-        $("#noticeBlock").show();
-        $("#noticeBlock").animate({ opacity: 1 }, 200);
-        localStorage.setItem("noticeStatus", "show");
-      }
+        function showMainSys() {
+            let url = baseApiUrl + "/Utility/isShowMaiSys";
 
-      function setHide() {
-        $("#toggleNoticeBtn").find("#noticeConText").text(showText);
-        $("#noticeConIcon").addClass(iconArr[1]);
-        $("#noticeBlock").animate({ opacity: 0 }, 200, function () {
-          $("#noticeBlock").hide();
-        });
-        localStorage.setItem("noticeStatus", "hide");
-      }
-    }
-  </script>
+            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();
+            }
+        }
+
+        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 = [];
+                // 遍歷每個告警資料
+                $.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()
+                    );
+                } else {
+                    $("#noticeBlock").innerHTML = "";
+                    $("#noticeBlock").css({ display: "none", opacity: "0" });
+                }
+            });
+        }
+
+        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 6325d60..7d1d03e 100644
--- a/Frontend/js/n4js/alarmbaja.js
+++ b/Frontend/js/n4js/alarmbaja.js
@@ -227,46 +227,29 @@ function getOneDeviceAlarmTop10ByBaja(devicePath, callback) {
 
             var _occurrenceTime = new Date(
               record.get("timestamp").$cEncStr
-            ).toLocaleString("zh-tw", {
-              year: "numeric",
-              month: "2-digit",
-              day: "2-digit",
-              hour: "2-digit",
-              minute: "2-digit",
-            });
+            )
             // _occurrenceTime += _timestampTemp.getFullYear().toString() + "-" + addzero(_timestampTemp.getMonth() + 1).toString() + "-" + addzero(_timestampTemp.getDate()).toString() + " " + addzero(_timestampTemp.getHours()).toString() + ":" + addzero(_timestampTemp.getMinutes()).toString() + ":" + addzero(_timestampTemp.getSeconds()).toString();
 
             //var _occurrenceTime = _timestamp.format("yyyy-MM-dd hh:mm:ss");//.toLocaleString();
             var _ackTime = new Date(
               record.get("ackTime").$cEncStr
-            ).toLocaleString("zh-tw", {
-              year: "numeric",
-              month: "2-digit",
-              day: "2-digit",
-              hour: "2-digit",
-              minute: "2-digit",
-            });
+            )
             // _normalTime += _normaltime.getFullYear().toString() + "-" + addzero(_normaltime.getMonth() + 1).toString() + "-" + addzero(_normaltime.getDate()).toString() + " " + addzero(_normaltime.getHours()).toString() + ":" + addzero(_normaltime.getMinutes()).toString() + ":" + addzero(_normaltime.getSeconds()).toString();
 
             var _normalTime = new Date(
               record.get("normalTime").$cEncStr
-            ).toLocaleString("zh-tw", {
-              year: "numeric",
-              month: "2-digit",
-              day: "2-digit",
-              hour: "2-digit",
-              minute: "2-digit",
-            });
+            )
 
             var _msgText = record.get("alarmData").get("msgText"); // == 1 ? _occurrenceTime : "未確認";
             var _ackText =
-              record.get("ackState") == 0 ? _ackTime : "未確認";
+              record.get("ackState")
             _ss.push({
               uuid: _resultUuid[0],
               msgText: _msgText,
               ackState: _ackText,
               timestamp: _occurrenceTime,
               normalTime: _normalTime,
+              ackedTime: _ackTime
             });
             _index++;
           },
diff --git a/Frontend/js/n4js/bajatest.js b/Frontend/js/n4js/bajatest.js
index 161aa00..72b80d9 100644
--- a/Frontend/js/n4js/bajatest.js
+++ b/Frontend/js/n4js/bajatest.js
@@ -1001,9 +1001,9 @@ function BajaSubscribeElectricmeterByBql(
     );
 
     //使用bql語法
-    // console.log(
-    //   `local:|foxs:${port}|station:|slot:/${ordPathForElectricmeter.devicePath}|bql:select name, out, out.value, slotPath, facets from control:ControlPoint`
-    // );
+     console.log(
+       `local:|foxs:${port}|station:|slot:/${ordPathForElectricmeter.devicePath}|bql:select name, out, out.value, slotPath, facets from control:ControlPoint`
+     );
     baja.Ord.make(
       `local:|foxs:${port}|station:|slot:/${ordPathForElectricmeter.devicePath}|bql:select name, out, out.value, slotPath, facets from control:ControlPoint`
     ).get(function (table) {