ibms-dome/Frontend/_alert.html

<main id="js-page-content" role="main" class="page-content">
	<div class="row">
		<div class="col-sm-12 col-xl-12">
			<h1 class="p-2 mb-0">即時告警</h1>
			<div class="row bg-dark p-2">
				<div class="col-auto">
					<div class="btn-group">
						<button id="returnFalse" onclick="setReturn(false)" type="button"
								class="btn btn-secondary waves-effect waves-themed">
							未復歸
						</button>
						<button id="returnTrue" onclick="setReturn(true)" type="button"
								class="btn btn-secondary waves-effect waves-themed">
							已復歸
						</button>
					</div>
				</div>
				<div class="col-auto">
					<div class="btn-group">
						<button id="unconfirmed" onclick="setConfirm(false)" type="button"
								class="btn btn-secondary waves-effect waves-themed">
							未確認
						</button>
						<button id="confirmed" onclick="setConfirm(true)" type="button"
								class="btn btn-secondary waves-effect waves-themed">
							已確認
						</button>
					</div>
				</div>
				<div class="col-auto">
					<a href="#" id="nearthirty" class="btn btn-secondary">近30天</a>
				</div>
				<div class="col-auto">
					<div class="form-group">
						<input class="form-control" id="alr_startdate" data-val="" type="date" name="alr_startdate" value=""
							   style="cursor: pointer">
					</div>
				</div>
				<div class="col-auto">
					<div class="form-group">
						<input class="form-control" id="alr_enddate" data-val="" type="date" name="alr_enddate" value=""
							   style="cursor: pointer">
					</div>
				</div>
				<hr>

			</div>

			<div class="row bg-dark p-2 align-items-center">
				<div class="col-auto">
					<a href="#" id="selAllSys" onclick="selAllSysVal(this)" class="btn btn-info">全選類別</a>
				</div>
				<div class="col-auto">
					<div id="alr_mainList" class="frame-wrap">
					</div>
				</div>
			</div>
			<div class="row bg-dark p-2 mb-5 align-items-center">
				<div class="col-auto" style="padding-left: 133px">
					<div id="alr_subList" class="frame-wrap">
					</div>
				</div>
			</div>
			<!--<div class="row bg-dark p-2 align-items-center" id="alr_mainList">
					</div>
					<div class="row bg-dark p-2 mb-5 align-items-center" id="alr_subList">
					</div>-->

			<div>
				<div class="frame-wrap">
					<table id="alertTable" class="table table-bordered table-striped text-center m-0 w-100">
					</table>
				</div>
			</div>
		</div>
	</div>
</main>

<!-- Modal center 保養/維修 -->
<div class="modal fade" id="alr_opeRecModal" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static"
	 data-keyboard="false">
	<div class="modal-dialog modal-dialog-centered" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<h4 id="opeRecTitle" class="modal-title">
					新增維修單
				</h4>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true"><i class="fal fa-times"></i></span>
				</button>
			</div>
			<form id="alr_opeRecForm">
				<div class="modal-body">
					<div class="row">
						<div class="col-md-6">
							<div class="form-group">
								<label class="form-label" for="inpErrCode">異常編號</label>
								<select class="form-control" id="inpErrCode" name="inpErrCode" disabled>
									<option value=''>未選擇</option>
								</select>
							</div>
						</div>
						<div class="col-md-6">
							<div class="form-group">
								<label class="form-label" for="inpStaTime">預計開始時間</label>
								<input type="date" id="inpStaTime" name="inpStaTime" class="form-control">
							</div>
						</div>
						<div class="col-md-6">
							<div class="form-group">
								<label class="form-label" for="inpWorTyp">項目</label>
								<select class="form-control custom-select-ri" id="inpWorTyp" name="inpWorTyp" disabled>
									<option value='2' selected>維修</option>
								</select>
							</div>
						</div>
						<div class="col-md-6">
							<div class="form-group">
								<label class="form-label" for="inpFixDo">維修項目</label>
								<input type="text" id="inpFixDo" name="inpFixDo" class="form-control">
							</div>
						</div>
						<div class="col-md-6">
							<div class="form-group">
								<label class="form-label" for="inpFixDoCode">維修項目代碼(設備編號)</label>
								<select class="form-control" id="inpFixDoCode" name="inpFixDoCode">
									<option value=''>未選擇</option>
								</select>
							</div>
						</div>
						<div class="col-md-6">
							<div class="form-group">
								<label class="form-label" for="inpFixFirm">負責廠商</label>
								<select class="form-control" id="inpFixFirm" name="inpFixFirm">
									<option value=''>未選擇</option>
								</select>
							</div>
						</div>
						<div class="col-md-6">
							<div class="form-group">
								<label class="form-label" for="inpStatus">狀態</label>
								<div class="form-control" id="inpStatus">
									<div class="row container">
										<div class="">
											<input class="custom-radio-input" type="radio" name="inpSta" id="inpSta_0" value="0" checked>
											<label class="form-label" for="inpSta_0">未完成</label>
										</div>

										<div class="px-4">
											<input class="custom-radio-input" type="radio" name="inpSta" id="inpSta_1" value="1">
											<label class="form-label" for="inpSta_1">完成</label>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="col-md-6">
							<div class="form-group">
								<label class="form-label" for="inpWorPerId">工作人員編號</label>
								<select class="form-control" id="inpWorPerId" name="inpWorPerId">
									<option value=''>未選擇</option>
								</select>
							</div>
						</div>
						<div class="col-md-12">
							<div class="form-group">
								<label class="form-label" for="inpNotice">注意事項</label>
								<textarea class="form-control" type="text" id="inpNotice" name="inpNotice" rows="7"></textarea>
							</div>
						</div>
						<div class="col-md-12">
							<div class="form-group">
								<label class="form-label" for="inpDescription">結果描述</label>
								<textarea class="form-control" type="text" id="inpDescription" name="inpDescription"
										  rows="7"></textarea>
							</div>
						</div>
						<div class="col-md-12">
							<label class="form-label">上傳檔案</label>
							<div id='alr_forImage' class="col-sm-12 forimage mt-2 p-0">
							</div>
							<div id='alr_forFile' class="col-sm-12 forfile mt-2 p-0">
							</div>

							<div class="form-group dropzone" id="alr_dropZone">
								<div class="dz-message">
									<div class="drag-icon-cph">
										<i class="material-icons">backup</i>
									</div>
									<h3>選擇一個文件或拖放到這裡</h3>
									<p class="mb-0 col-grey">
										PDF檔案不超過 3MB
									</p>
								</div>
								<div class="fallback">
									<input name="file" type="file" multiple />
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-secondary" id="alr_OpeRecCanBtn" data-dismiss="modal">關閉</button>
					<button type="button" class="btn btn-primary" id="alr_OpeRecSendBtn" e-prevent>儲存</button>
				</div>
			</form>
		</div>
	</div>
</div>

<!-- Modal center 維修-->
<div class="modal fade" id="alr_opeRecModal_2" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static" data-keyboard="false">
	<div class="modal-dialog modal-dialog-centered" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<h4 id="alr_opeRecTitle" class="modal-title">
				</h4>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true"><i class="fal fa-times"></i></span>
				</button>
			</div>
			<form id="alr_opeRecForm_2">
				<div class="modal-body">
					<div class="row">
						<div class="col-md-6">
							<div class="form-group">
								<label class="form-label" for="alr_inpNumber_2">表單編號</label>
								<input type="text" id="alr_inpNumber_2" name="" class="form-control" disabled>
							</div>
						</div>
						<div class="col-md-6">
							<div class="form-group">
								<label class="form-label" for="alr_inpErrCode_2">異常編號</label>
								<select class="form-control" id="alr_inpErrCode_2" name="alr_inpErrCode_2" disabled>
									<option value=''>未選擇</option>
								</select>
							</div>
						</div>
						<div class="col-md-6">
							<div class="form-group">
								<label class="form-label" for="alr_inpStaTime_2">預計開始時間</label>
								<input type="date" id="alr_inpStaTime_2" name="alr_inpStaTime_2" class="form-control" disabled>
							</div>
						</div>
						<div class="col-md-6">
							<div class="form-group">
								<label class="form-label" for="alr_inpWorTyp_2">項目</label>
								<select class="form-control custom-select-ri" id="alr_inpWorTyp_2" name="alr_inpWorTyp_2" disabled>
									<option value=2 selected>維修</option>
								</select>
							</div>
						</div>
						<div class="col-md-6">
							<div class="form-group">
								<label class="form-label" for="alr_inpFixDo_2">維修項目</label>
								<input type="text" id="alr_inpFixDo_2" name="alr_inpFixDo_2" class="form-control" disabled>
							</div>
						</div>
						<div class="col-md-6">
							<div class="form-group">
								<label class="form-label" for="alr_inpFixDoCode_2">維修項目代碼(設備編號)</label>
								<select class="form-control" id="alr_inpFixDoCode_2" name="alr_inpFixDoCode_2" disabled>
									<option value=''>未選擇</option>
								</select>
							</div>
						</div>
						<div class="col-md-6">
							<div class="form-group">
								<label class="form-label" for="alr_inpFixFirm_2">負責廠商</label>
								<select class="form-control" id="alr_inpFixFirm_2" name="alr_inpFixFirm_2" disabled>
									<option value=''>未選擇</option>
								</select>
							</div>
						</div>
						<div class="col-md-6">
							<div class="form-group">
								<label class="form-label" for="alr_inpStatus_2">狀態</label>
								<div class="form-control" id="alr_inpStatus_2">
									<div class="row container">
										<div class="">
											<input class="custom-radio-input" type="radio" name="alr_inpSta_2" id="alr_inpSta_2_0" value="0" data-value="0" checked disabled>
											<label class="form-label" for="alr_inpSta_0">未完成</label>
										</div>

										<div class="px-4">
											<input class="custom-radio-input" type="radio" name="alr_inpSta_2" id="alr_inpSta_2_1" value="1" data-value="1" disabled>
											<label class="form-label" for="alr_inpSta_1">完成</label>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="col-md-6">
							<div class="form-group">
								<label class="form-label" for="alr_inpWorPerId_2">工作人員編號</label>
								<select class="form-control" id="alr_inpWorPerId_2" name="alr_inpWorPerId_2" disabled>
									<option value=''>未選擇</option>
								</select>
							</div>
						</div>
						<div class="col-md-12">
							<div class="form-group">
								<label class="form-label" for="alr_inpNotice_2">注意事項</label>
								<textarea class="form-control" type="text" id="alr_inpNotice_2" name="alr_inpNotice_2" rows="7" disabled></textarea>
							</div>
						</div>
						<div class="col-md-12">
							<div class="form-group">
								<label class="form-label" for="alr_inpDescription_2">結果描述</label>
								<textarea class="form-control" type="text" id="alr_inpDescription_2" name="alr_inpDescription_2" rows="7" disabled></textarea>
							</div>
						</div>
						<div class="col-md-12">
							<label class="form-label">上傳檔案</label>
							<div id='alr_ope_forImage_2' class="col-sm-12 forimage mt-2 p-0">
							</div>
							<div id='alr_ope_forFile_2' class="col-sm-12 forfile mt-2 p-0">
							</div>

							<div class="form-group dropzone" id="ope_dropZone_2">
								<div class="dz-message">
									<div class="drag-icon-cph">
										<i class="material-icons">backup</i>
									</div>
									<h3>選擇一個文件或拖放到這裡</h3>
									<p class="mb-0 col-grey">
										PDF檔案不超過 10MB
									</p>
								</div>
								<div class="fallback">
									<input name="file" type="file" multiple disabled />
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-secondary" id="alr_OpeRecCanBtn_2" data-dismiss="modal">關閉</button>
				</div>
			</form>
		</div>
	</div>
</div>

<script>
	pageAct.selSysMain = null;
	pageAct.selSysSub = null;
	pageAct.alr_startdate = null;
	pageAct.alr_enddate = null;
	pageAct.imageFile = [];
	pageAct.alrSelSysMain = []
	pageAct.alrSelSysSub = [];
	pageAct.selAllSysSub = false;
	pageAct.addSelMain = null;
	pageAct.addSelSub = null;
	first = true;
	// let dataAlarm = [];
	var historyTable = null;
	var elemIndex = 0;
	var index = 0;

	$(function () {
		initDropzone();
		setReturn(false);
		setConfirm(false);
		event();
		sysList();
		$('#nearthirty').click();

		$('input[type=checkbox][data-type=main]').parent().on('change', function () {
			pageAct.main_system_tag = $('input[type=checkbox]').map(function (i, v) {
				if ($(v).data('type') == 'main') {
					if ($(v).is(':checked')) {
						$(`[data-main=` + $(v).prop('id') + `]`).attr('hidden', false);
						return $(v).prop('id')
					}
					else
						$(`[data-main=` + $(v).prop('id') + `]`).attr('hidden', true);
				}
			}).toArray();

			pageAct.SysType = null;
		});

		$('input[type=checkbox][data-type=sub]').on('click', function (e) {
			if (!pageAct.selAllSysSub) {
				// console.log(this);
				pageAct.selAllSysSub = true;

				//$.each($('input[type=checkbox][data-type=sub]:checked'), function (i, v) {
				//	$(v).click();
				//});

				if (pageAct.SysType == "all") {
					if ($(this).is(':checked')) {
						$(this).prop('checked', true);
						$(this).click();
					}
				}
				pageAct.selAllSysSub = false;

				$('#selAllSys').html('全選類別');

				pageAct.SysType = null;
				getData();
			}
		});

		//$('#alr_mainList').on('click', 'a[data-type=alr_main]', function () {
		//	$(this).parent().parent().find('a').removeClass('btn-info');
		//	$(this).parent().parent().find('a').addClass('btn-secondary');
		//	$(this).addClass('btn-info');

		//	$('a[data-type=alr_sub]').parent().parent().find('a').removeClass('btn-info');
		//	$('a[data-type=alr_sub]').parent().parent().find('a').addClass('btn-secondary');

		//	pageAct.SysType = null;
		//});

		//$('#alr_subList, #alr_mainList').on('click', 'a[data-type=alr_sub][id!=selAllSys]', function () {
		//	pageAct.selSysMain = $(this).parent().data('main');
		//	pageAct.selSysSub = $(this).prop('id');

		//	if ($('#selAllSys').hasClass('btn-info')) {
		//		$('#selAllSys').removeClass('btn-info');
		//		$('#selAllSys').addClass('btn-secondary');
		//		$('#alr_mainList a[data-type=alr_main]').removeClass('btn-info');
		//		$('#alr_mainList a[data-type=alr_main]').addClass('btn-secondary');
		//		$(`#alr_mainList a[data-type=alr_main][id=` + pageAct.selSysMain + `]`).addClass('btn-info');
		//		$('#alr_subList a[data-type=alr_sub]').parent().attr('hidden', true);
		//		$('#alr_subList a[data-type=alr_sub]').parent('[data-main=' + pageAct.selSysMain + ']').attr('hidden', false);
		//	}

		//	$(this).parent().parent().find('a').removeClass('btn-info');
		//	$(this).parent().parent().find('a').addClass('btn-secondary');
		//	$(this).addClass('btn-info');

		//	pageAct.SysType = null;
		//	getData();
		//});

		first = false;
	});

	function event() {
		onEvent('click', '#nearthirty', function () {
			let today = displayDate(new Date(Date.now()), "date").replaceAll('/', '-');
			let thirtyDays = displayDate(new Date(new Date().setDate(new Date(Date.now()).getDate() - 30)), "date").replaceAll('/', '-');
			$('#alr_startdate').val(thirtyDays);
			$('#alr_startdate').data('val', thirtyDays);
			$('#alr_enddate').val(today);
			$('#alr_enddate').data('val', today);
			if (!$(this).hasClass('btn-info'))
				elemSelCol($(this));

			pageAct.alr_startdate = $("#alr_startdate").val();
			pageAct.alr_enddate = $("#alr_enddate").val();
			pageAct.SysType = 'all';

			if (!first) getData();
			else selAllSysVal($('#selAllSys'))
			// getData();
		});

		onEvent('change', '#alr_startdate, #alr_enddate', function () {
			if ($('#alr_startdate').val() > $('#alr_enddate').val()) {
				$('#alr_startdate').val($('#alr_startdate').data('val'));
				$('#alr_enddate').val($('#alr_enddate').data('val'));
				toast_error('不可選擇大於結束時間');
			}
			else {
				let today = displayDate(new Date(Date.now()), "date").replaceAll('/', '-');
				let alr_enddate = displayDate(new Date(new Date().setDate(new Date($('#alr_enddate').val()).getDate() - 30)), "date").replaceAll('/', '-');
				let alr_startdate = $('#alr_startdate').val();
				if (alr_enddate == alr_startdate && $('#alr_enddate').val() == today) {
					$('#nearthirty').click();
				}
				else {
					$('#nearthirty').removeClass('btn-info');
					$('#nearthirty').addClass('btn-secondary');
				}

				$('#alr_startdate').data('val', $('#alr_startdate').val());
				$('#alr_enddate').data('val', $('#alr_enddate').val());
			}

			pageAct.alr_startdate = $("#alr_startdate").val();
			pageAct.alr_enddate = $("#alr_enddate").val();
			getData();
		});

		onEvent('click', 'a[data-type=alr_main]', function () {
			$(`a[data-type=alr_sub]`).parent(`[data-main!=` + $(this).prop('id') + `]`).attr('hidden', true);
			$(`a[data-type=alr_sub]`).parent(`[data-main=` + $(this).prop('id') + `]`).attr('hidden', false);
		});

		onEvent('click', '#alertTable a[id=alr_recModal]', function () {
			$('#alr_forImage').html('');
			$('#alr_forFile').html('');
			$('#inpNotice').val('');
			$('#inpDescription').val('');
			let alr_table = $('#alertTable').DataTable();
			let alr_elem = $(this).parent().parent();
			let alr_tableData = alr_table.row(alr_elem).data();
			$('#inpErrCode').html(`<option value = ${alr_tableData.uuid}>${alr_tableData.msgText}</option>`);
			$('#inpStaTime').val(displayDate(new Date(Date.now()), "date").replaceAll('/', '-'));
			let deviceNumber = null;
			let system = $(this).data("system");
			pageAct.addSelMain = system.split("-")[0];
			pageAct.addSelSub = system.split("-")[1];

			deviceNumber = pageAct.AreaTag + "_" + alr_tableData.buildingFloorName_zh.toString().split('-')[0] + "_" + alr_tableData.alarmClass.toString().split('_')[0] + "_"
				+ alr_tableData.alarmClass.toString().split('_')[1] + "_" + alr_tableData.buildingFloorName_zh.toString().split('-')[1] + "_" + alr_tableData.sourceName_zh.toString().split('-')[0] + "_"
				+ alr_tableData.sourceName_zh.toString().split('-')[1];

			selUser();
			selDevice();
			selOpeFir();
			getUser();

			$('#inpFixDoCode option[data-sub=' + alr_tableData.alarmClass.toString().split('_')[1] + '][data-main=' + alr_tableData.alarmClass.toString().split('_')[0] + ']').attr('hidden', false);
			$('#inpFixDoCode option[data-sub!=' + alr_tableData.alarmClass.toString().split('_')[1] + '][data-main!=' + alr_tableData.alarmClass.toString().split('_')[0] + ']').attr('hidden', true);

			let alr_fixDoCode = $($('#inpFixDoCode option[data-sub=' + alr_tableData.alarmClass.toString().split('_')[1] + '][data-main=' + alr_tableData.alarmClass.toString().split('_')[0] + ']')[0]).val();
			$('#inpFixDoCode').val(alr_fixDoCode);
		});

		onEvent('click', '#alr_OpeRecSendBtn', function () {

			let form = $("#alr_opeRecForm");
			$(form).validate({
				rules: {
					inpWorTyp: { required: true },
					inpFixDo: { required: true },
					inpFixDoCode: { required: true },
					inpFixFirm: { required: true },
					inpStatus: { required: true },
					inpWorPerId: { required: true },
				}
			});

			if ($(form).valid()) {
				let url = baseApiUrl + "/operation/SavOpeRecord";

				let fd = new FormData();
				$.each(pageAct.imageFile, function (i, v) {
					fd.append("lorf[" + i + "].id", v.id);
					fd.append("lorf[" + i + "].file", v.file);
					fd.append("lorf[" + i + "].save_file_name", v.save_file_name);
					fd.append("lorf[" + i + "].ori_file_name", v.ori_file_name);
				});

				fd.append("error_code", $('#inpErrCode').val());
				fd.append("location", "台北" + $('#buiActDrop').text() + pageAct.floor);
				fd.append("location_code", pageAct.AreaTag + pageAct.buiTag + pageAct.floor);
				fd.append("device_system_category_layer2", pageAct.addSelMain);
				fd.append("device_system_category_layer3", pageAct.addSelSub);
				fd.append("work_type", parseInt($('#inpWorTyp').val()));
				fd.append("fix_do", $('#inpFixDo').val());
				fd.append("fix_do_code", $('#inpFixDoCode').val());
				fd.append("fix_firm", parseInt($('#inpFixFirm').val()));
				fd.append("status", parseInt($('#inpStatus').val()));
				fd.append("work_person_id", $('#inpWorPerId').val());
				fd.append("start_time", ($('#inpStaTime').val() || null) == null ? null : new Date($('#inpStaTime').val()).toISOString());
				fd.append("notice", $('#inpNotice').val() || null);
				fd.append("description", $('#inpDescription').val() || null);

				objSendData.Data = sendData;
				$.ajax({
					url: url,
					type: "POST",
					data: fd,
					async: false,
					cache: false,
					contentType: false,
					processData: false,
					beforeSend: function (xhr) { xhr.setRequestHeader('Authorization', "Bearer " + cookies.get("JWT-Authorization")) },
					success: function (res) {
						if (!res || res.code != "0000" || !res.data) {

						} else {
							//toast_ok(common.AddSuc);
							//$("#opeFirmModal").modal("hide");
							$("#alr_OpeRecCanBtn").click();
							getData();
						}
					}
				});

				//ytAjax = new YourTeam.Ajax(url, objSendData, function (res) {
				//	if (!res || res.code != "0000" || !res.data) {

				//	} else {
				//		//toast_ok(common.AddSuc);
				//		//$("#opeFirmModal").modal("hide");
				//		$("#OpeRecCanBtn").click();
				//		refTable();
				//	}
				//}, null, "POST").send();
			}
		});
	}

	function setReturn(bool) {
		pageAct.return = bool;
		$('#returnFalse').removeClass('btn-info');
		$('#returnTrue').removeClass('btn-info');
		if (!bool) {
			$('#returnFalse').removeClass('btn-secondary');
			$('#returnFalse').addClass('btn-info');
			$('#returnTrue').addClass('btn-secondary');
		}
		else {
			$('#returnTrue').removeClass('btn-secondary');
			$('#returnTrue').addClass('btn-info');
			$('#returnFalse').addClass('btn-secondary');
		}

		if (!first)
			getData();
	}

	function setConfirm(bool) {
		pageAct.confirm = bool;
		$('#unconfirmed').removeClass('btn-info');
		$('#confirmed').removeClass('btn-info');
		if (!bool) {
			$('#unconfirmed').removeClass('btn-secondary');
			$('#unconfirmed').addClass('btn-info');
			$('#confirmed').addClass('btn-secondary');
		}
		else {
			$('#confirmed').removeClass('btn-secondary');
			$('#confirmed').addClass('btn-info');
			$('#unconfirmed').addClass('btn-secondary');
		}
		if (!first)
			getData();
	}

	function elemSelCol(elem) {
		if (elem.hasClass('btn-secondary')) {
			$(elem).removeClass('btn-secondary');
			$(elem).addClass('btn-info');
		}
		else if (elem.hasClass('btn-info')) {
			$(elem).removeClass('btn-info');
			$(elem).addClass('btn-secondary');
		}
	}

	function sysList() {
		let url = baseApiUrl + "/api/GetMainSub";
		let sendData = {
			building_tag: pageAct.buiTag
		}
		objSendData.Data = sendData;
		function success(res) {
			let mainStrHtml = ``;
			let subStrHtml = ``;
			let display = pageAct.mainStatus ? "hidden" : "";
			let firstSub = '';
			let firstMain = '';

			//if (pageAct.mainStatus) {
			//	mainStrHtml += `<div class="col-auto">
			//						<a href="#" id="selAllSys" onclick="selAllSysVal(this)" class="btn btn-secondary">全部類別</a>
			//					</div>`;
			//}
			//else {
			//	subStrHtml += `<div class="col-auto">
			//						<a href="#" id="selAllSys" onclick="selAllSysVal(this)" class="btn btn-secondary">全部類別</a>
			//					</div>`;
			//}

			//$.each(res.data.history_Main_Systems, function (i, v) {
			//	if (pageAct.mainStatus) {
			//		mainStrHtml += `<div class="col-auto">
			//							<a href="#" class="btn btn-secondary" id=${v.main_system_tag} data-type="alr_main">${v.full_name}</a>
			//						</div>`;
			//	}

			//	$.each(v.history_Sub_systems, function (i2, v2) {
			//		let selected = (i2 == 0 && i == 0) ? "info" : "secondary";
			//		subStrHtml += `<div class="col-auto" data-main="${v.main_system_tag}" ${display}>
			//							<a href="#" class="btn btn-${selected}" id="${v2.sub_system_tag}" data-type="alr_sub">${v2.full_name}</a>
			//						</div>`;

			//		if (i2 == 0 && i == 0) {
			//			pageAct.selSysSub = v2.sub_system_tag;
			//			pageAct.selSysMain = v.main_system_tag;
			//		}
			//	});
			//});

			$.each(res.data.history_Main_Systems, function (i, v) {
				if (pageAct.mainStatus) {
					mainStrHtml += `<div class="custom-control custom-checkbox custom-control-inline">
									<input type="checkbox" class="custom-control-input" data-type="main" id="${v.main_system_tag}">
									<label class="custom-control-label" for="${v.main_system_tag}">${v.full_name}</label>
								</div>`;

					pageAct.alrSelSysMain.push(v);
				}

				$.each(v.history_Sub_systems, function (i2, v2) {
					var firDis = (i == 0) ? "" : display;
					subStrHtml += `<div class="custom-control custom-checkbox custom-control-inline" data-main="${v.main_system_tag}" ${firDis}>
									<input type="checkbox" class="custom-control-input" data-type="sub" id="${v2.sub_system_tag}">
									<label class="custom-control-label" for="${v2.sub_system_tag}">${v2.full_name}</label>
								</div>`;

					pageAct.alrSelSysSub.push(v2);

					if (i2 == 0 && i == 0) {
						firstMain = v.main_system_tag;
						firstSub = v2.sub_system_tag;
						console.log(v.main_system_tag, v2.sub_system_tag)
					}
				});
			});
			subStrHtml += `<div class="custom-control custom-checkbox custom-control-inline" data-main="other">
									<input type="checkbox" class="custom-control-input" data-type="sub" id="other">
									<label class="custom-control-label" for="other">其他</label>
								</div>`
			if (pageAct.mainStatus) {
				$('#alr_mainList').html(mainStrHtml);
				$('#alr_subList').html(subStrHtml);
				console.log($('input[data-type=main][id=' + firstMain + ']'))
				$('input[data-type=main][id=' + firstMain + ']').click();
			}
			else {
				$('#alr_mainList').html(subStrHtml);
			}
			// $('input[data-type=sub][id=' + firstSub + ']').click();
		}
		ytAjax = new YourTeam.Ajax(url, objSendData, success, null, "POST").send();
	}

	function selAllSysVal(elem) {
		pageAct.selAllSysSub = true;
		if ($(elem).html() == '全選類別') {
			$('#alr_mainList input').map(function (i, v) {
				if (!$(v).is(':checked')) {
					$(v).click();
				}
			});
			$('#alr_subList input').map(function (i, v) {
				if (!$(v).is(':checked')) {
					$(v).click();
				}
			});
			$(elem).html('取消全選');

			pageAct.SysType = 'all';
		}
		else {
			$('#alr_mainList input').map(function (i, v) {
				if ($(v).is(':checked'))
					$(v).click();
			});
			$('#alr_subList input').map(function (i, v) {
				if ($(v).is(':checked'))
					$(v).click();
			});
			$(elem).html('全選類別');
			pageAct.SysType = null;
		}

		getData();
		pageAct.selAllSysSub = false;
	}

	function getData(type = null) {
		dataAlarm = [];
		$(loadEle).Loading("start");
		let enddate = new Date(pageAct.alr_enddate + " 23:59:59").getTime();
		let startdate = new Date(pageAct.alr_startdate + " 00:00:00").getTime();

		if (pageAct.SysType == "all") {
			getAllDeviceAlarmByBaja(startdate, enddate, pageAct.return, pageAct.confirm, callBackFromAllDeviceAlert);
		}
		else {
			let elem = $('input[type=checkbox][data-type=sub]:checked');
			elemIndex = 0;
			index = 0;
			if (elem && elem.length > 0) {
				elemIndex = elem.length;
				elem.each(function (i, v) {
					if (v?.id === "other") {
						console.log(v?.id)
						getOtherAlarmByBaja(startdate, enddate, pageAct.return, pageAct.confirm, stackData);
					}
					else {
						pageAct.selSysMain = $(v).parent().data('main');
						pageAct.selSysSub = $(v).prop('id');
						getAlarmByBaja(startdate, enddate, pageAct.return, pageAct.confirm, pageAct.selSysMain + "_" + pageAct.selSysSub + "_AlarmClass", stackData);
					}
				});
			}
			else {
				$('#alertTable').DataTable().clear().draw();
				$(loadEle).Loading("close");
			}
		}
	}

	function stackData(res) {
		res.data.forEach(v => {
			dataAlarm.push(v);
		});
		index++;

		if (elemIndex == index)
			callBackFromOneDeviceAlert(dataAlarm);
	}

	function callBackFromAllDeviceAlert(res) {
		AlertList(res.data);

		if (historyTable != null) {
			let t = $('#alertTable').dataTable();

			t.fnClearTable();
			if (res.data.length > 0)
				t.fnAddData(res.data);
		}
	}

	function callBackFromOneDeviceAlert(res) {
		AlertList(res);

		if (historyTable != null) {
			let t = $('#alertTable').dataTable();

			t.fnClearTable();
			if (res.length > 0)
				t.fnAddData(res);
		}
	}

	function refTable(data) {
		let tag = "#alertTable";

		let column_defs = [
			{ "targets": [0], "width": "5%", "sortable": true },
			{ "targets": [1], "width": "5%", "sortable": true },
			{ "targets": [2], "width": "5%", "sortable": true },
			{ "targets": [3], "width": "5%", "sortable": true },
			{ "targets": [4], "width": "5%", "sortable": true },
			{ "targets": [5], "width": "5%", "sortable": true },
			{ "targets": [6], "width": "5%", "sortable": true },
			{ "targets": [7], "width": "5%", "sortable": true },
			{ "targets": [8], "width": "5%", "sortable": true },
		];

		let columns = [
			{
				"title": "棟別-樓層",
				"data": "buildingFloorName_zh"
			},
			{
				"title": "異常ID",
				"data": "uuid",
				render: (data) => {
					return data.$val ? data.$val.split("-")[0] : data.split("-")[0]
				}
			},
			{
				"title": "異常類別",
				"data": "alarmClass",
				"render": function (data) {
					return data.includes("_") ? data.split('_')[0] + "-" + data.split('_')[1] : data;
				}
			},
			{
				"title": "設備名稱",
				"data": "sourceName_zh",
				"render" : function (data) {
					return allDevices.find(d => d.device_number === data)?.full_name || ""
				}
			},
			{
				"title": "設備編號",
				"data": "sourceTmp",
			},
			{
				"title": "發生時間",
				"data": "timestamp",
				"render": function (data) {
					return new Date(data).toLocaleString('zh-tw', { year: "numeric", month: "2-digit", day: "2-digit", hour: "2-digit", minute: "2-digit" }), displayDate(data, "datetime");
				}
			},
			{
				"title": "異常原因",
				"data": "msgText",
				"render": function (data) {
					return data.split(':')[0];
				}
			},
			{
				"title": "Ack 確認",
				"data": "ackState",
				"render": function (data, type, row, meta) {
					let confirm = data == "1" ? "未確認" : "確認";
					let btnCol = data == "1" ? "warning" : "info";
					return data == "1" ? `<td><button onclick="chgAck('${row.uuid}')" class="btn btn-${btnCol}">${confirm}</button></td>` :
						`<td><span>${new Date(row.ackedTime
						).toLocaleString('zh-tw')}</span></td>` /*`<td><button class="btn btn-${btnCol}">${confirm}</button></td>`*/;
				}
			},
			{
				"title": "派工/維運單號",
				"data": "formId",
				"render": function (data, type, row, meta) {

					return data != null
						? `<td><a href="#" id="readOpeRecBtn" data-toggle="modal" data-target="#alr_opeRecModal_2" data-formid="${data}">${data}</a></td>`
						: `<td><a href="#" id="alr_recModal" class="btn btn-info" data-toggle="modal" data-target="#alr_opeRecModal" data-system='${row.alarmClass.includes("_") ? row.alarmClass.split('_')[0] + "-" + row.alarmClass.split('_')[1] : row.alarmClass}'>+ 維修單</a></td>`;
				}
			}
		];

		historyTable = new YourTeam.JqDataTables.getTableByStatic(tag, data, columns, column_defs, null, null, null, null, "tpi");
		$('#alertTable').DataTable().order([ 5, 'desc']);
		$(loadEle).Loading("close");
	}


	function AlertList(data) {
		objSendData.Data = [];
		$.each(data, function (i, v) {
			objSendData.Data.push({ uuid: v.uuid.$val || v.uuid })
		});

		url = baseApiUrl + "/Alert/AlertList";
		ytAjax = new YourTeam.Ajax(url, objSendData, function (rel) {
			if (rel.code == "0000") {
				$.each(rel.data, function (i, v) {
					let index = data.findIndex(x => (x.uuid.$val || x.uuid) === v.uuid);
					data[index].formId = v.formId;
				});
				refTable(data)
			}
		}, null, "POST").send();
	}

	function selDevice() {
		let url = baseApiUrl + "/operation/DevList";
		let lsst = [];
		lsst.push(pageAct.addSelSub);
		//$('input[data-type=sub]').map(function (i, v) { lsst.push($(v).prop('id')); });
		sendData = {
			device_area_tag: pageAct.AreaTag,
			device_building_tag: pageAct.buiTag,
			list_sub_system_tag: lsst,
		};
		objSendData.Data = sendData;
		ytAjax = new YourTeam.Ajax(url, objSendData, function (res) {
			if (!res || res.code != "0000" || !res.data) {

			} else {
				strHtml = ``;
				$("#inpFixDoCode").html();
				$("#alr_inpFixDoCode_2").html();
				$.each(res.data, (index, roleObj) => {
					strHtml += `<option value='${roleObj.device_number}' data-floor=${roleObj.device_floor_tag} data-main=${roleObj.device_system_tag} data-sub=${roleObj.device_name_tag} hidden>${roleObj.device_name}</option>`;

					if (index == 0) {
						pageAct.sysMain = roleObj.device_system_tag;
						pageAct.sysSub = roleObj.device_name_tag;
						pageAct.floor = roleObj.device_floor_tag;
						pageAct.number = roleObj.device_number;
					}
				})
				$("#inpFixDoCode").html(strHtml);
				$("#alr_inpFixDoCode_2").html(strHtml);
			}
		}, null, "POST").send();
	}

	function selUser() {
		let url = baseApiUrl + "/User/UserManagerList";
		ytAjax = new YourTeam.Ajax(url, objSendData, function (res) {
			if (!res || res.code != "0000" || !res.data) {

			} else {
				$("#inpWorPerId").html();
				$("#alr_inpWorPerId_2").html();
				strHtml = ``;
				strHtml += `<option value=''>未選擇</option>`;
				$.each(res.data, (index, roleObj) => {
					strHtml += `<option value='${roleObj.userinfo_guid}'>${roleObj.full_name}</option>`;
				})
				$("#inpWorPerId").html(strHtml);
				$("#alr_inpWorPerId_2").html(strHtml);
			}
		}, null, "POST").send();
	}

	function selOpeFir() {
		let url = baseApiUrl + "/operation/OpeFirSel";
		let lsst = [];
		lsst.push(pageAct.addSelSub);
		objSendData.Data = { sub_system_tag: lsst };
		//objSendData.Data = { sub_system_tag: $('input[data-type=sub]').map(function (i, v) { return $(v).prop('id'); }).toArray() };
		// console.log(objSendData.Data)
		ytAjax = new YourTeam.Ajax(url, objSendData, function (res) {
			if (!res || res.code != "0000" || !res.data) {

			} else {
				$("#inpFixFirm").html();
				$("#alr_inpFixFirm_2").html();
				strHtml = ``;
				strHtml += `<option value=''>未選擇</option>`;
				$.each(res.data, (index, roleObj) => {
					strHtml += `<option value='${roleObj.id}'>${roleObj.name}</option>`;
				})
				$("#inpFixFirm").html(strHtml);
				$("#alr_inpFixFirm_2").html(strHtml);
			}
		}, null, "POST").send();
	}

	//上傳檔案 dropzone
	function initDropzone() {
		uploader = $("#alr_dropZone").dropzone({
			url: baseApiUrl + '/api/Upload',
			previewsContainer: false,
			addRemoveLinks: false,
			dictRemoveFile: `<span class="material-icons mi-delete">delete</span>`,
			dictInvalidFileType: `上傳格式錯誤`,
			dictCancelUploadConfirmation: `確定要取消上傳此檔案嗎？`,
			dictCancelUpload: `<span class="material-icons mi-cancel">cancel</span>`,
			maxFilesize: 3,
			filesizeBase: 1024,
			maxFiles: 50,
			acceptedFiles: ".pdf, .docx, .doc, .xls, .xlsm, .xlsx, .ppt, .pptx, .gif, .png, .jpg, .jpeg",
			headers: { "Authorization": 'Bearer ' + cookies.get("JWT-Authorization") },
			accept: function (file, done) {
				let fileHelper = new YourTeam.Utility.File();
				tmpGuidArr = [];

				if (/\.(jpe?g|png|gif)$/i.test(file.name)) {
					fileHelper.readAndPreviewImages(file, 'alr_forImage', 70, 70, '<span class="file-item m-1">', '<button class="btn-dark m-1" name="btnDelImg"><i class="fa fa-times"></i></button></span>');

					pageAct.imageFile.map(function (v, i) { tmpGuidArr.push(v.file.guid) });
					if (jQuery.inArray(file.guid, tmpGuidArr) == -1) { //not in array
						let fd = new FormData();
						let f = file;
						fd.append('file', f);
						pageAct.imageFile.push({ "ori_file_name": f.name, "save_file_name": f.guid, "file": fd.get("file") });
					}
				}
				else if (/\.(xls?x|doc?x|ptt?x|pdf|zip|rar|7zip|txt|odt|xml|rtf|ods|odp|pps?x)$/i.test(file.name)) {
					fileHelper.readAndPreviewFiles(file, 'alr_forFile', 70, 70, "<div class='file-item'><i class='fas fa-file-alt fa-2x m-1'></i>", "<button class='btn-dark m-1' name='btnDelImg'><i class='fa fa-times'></i></button></div>");

					pageAct.imageFile.map(function (v, i) { tmpGuidArr.push(v.file.guid) });
					if (jQuery.inArray(file.guid, tmpGuidArr) == -1) { //not in array
						let fd = new FormData();
						let f = file;
						fd.append('file', f);
						pageAct.imageFile.push({ "ori_file_name": f.name, "save_file_name": f.guid, "file": fd.get("file") });
					}
				}
			}
		});
	}

	function getUser() {
		ytAjax = new YourTeam.Ajax(baseApiUrl + "/api/getUser", null, function (res) {
			if (!res || res.code != "0000" || !res.data) {

			} else {
				$(pageAct.work_type == '1' ? '#inpWorPerId' : '#inpWorPerId_2').val(res.data);
			}
		}, null, "POST").send();
	}

	function chgAck(devUuid) {
		$.post(window.location.origin + '/obix/alarm/' + devUuid + '/ack', '<obj is="obix:AckAlarmIn"><str name="ackUser" val="obix" /></obj>', null, "text");
		getData();
	}

	onEvent('click', '#readOpeRecBtn', function () {


		$('#alr_ope_forImage').html('');
		$('#alr_ope_forFile').html('');
		$('#alr_ope_forImage_2').html('');
		$('#alr_ope_forFile_2').html('');
		$('#alr_inpStatus_2 [name=alr_inpSta_2]').prop("disabled", false);

		pageAct.imageFile = [];
		$('#alr_opeRecTitle').html("讀取維修");
		let url = baseApiUrl + "/operation/OpeRecRead";
		objSendData.Data = { formId: $(this).data("formid") };
		ytAjax = new YourTeam.Ajax(url, objSendData, function (res) {
			if (!res || res.code != "0000" || !res.data) {

			} else {
				pageAct.sysSub = res.data.device_system_category_layer3;
				pageAct.number = res.data.fix_do_code;
				pageAct.addSelSub = res.data.device_system_category_layer3;
				selUser();
				selDevice();
				selOpeFir();
				errCodeList();
				$('#alr_inpNumber_2').val(res.data.formId);
				$('#alr_inpWorTyp_2').val(res.data.work_type);
				$('#alr_inpFixDo_2').val(res.data.fix_do);
				$('#alr_inpFixDoCode_2').val(res.data.fix_do_code);
				$('#alr_inpFixFirm_2').val(res.data.fix_firm);
				$('#alr_inpStatus_2 [name=alr_inpSta_2][data-value=' + res.data.status + ']').click();
				$('#alr_inpStatus_2 [name=alr_inpSta_2][data-value=' + (res.data.status > 0 ? 0 : 1) + ']').prop("disabled", true);
				$('#alr_inpWorPerId_2').val(res.data.work_person_id);
				$('#alr_inpStaTime_2').val(displayDate(res.data.start_time, 'date').replaceAll('/', '-'));
				$('#alr_inpNotice_2').val(res.data.notice == null ? "" : res.data.notice);
				$('#alr_inpDescription_2').val(res.data.description == null ? "" : res.data.description);

				ope_imgHtml = null;
				$.each(res.data.lorf, function (i, v) {

					let extName = v.ori_file_name.split('.')[1];

					if (/\.(jpe?g|png|gif)$/i.test(v.ori_file_name)) {

						ope_colI = creEle("i", null, null, null, ["fa fa-times"]);
						ope_colBtn = creBtn(null, null, "btnDelImg", ["btn-dark m-1"]);
						ope_colImg = creImg("img", null, null, null, null, { filename: v.ori_file_name, savename: v.save_file_name }, { style: "margin-left: 30px; margin-top: 10px", height: "70px", width: "70px", src: baseApiUrl + "/upload/operation/" + v.save_file_name + "." + extName });
						ope_colA = creEle("a", null, null, null, null, null, { href: baseApiUrl + "/upload/operation/" + v.save_file_name + "." + extName, download: v.ori_file_name, target: "_blank" });
						ope_imgHtml = creEle("span", null, null, null, ["file-item m-1"], { id: v.id }, null);

						ope_colA.append(ope_colImg);
						ope_imgHtml.append(ope_colA);
						ope_colBtn.append(ope_colI);
						ope_imgHtml.append(ope_colBtn);
						$('#alr_ope_forImage_2').append(ope_imgHtml ? ope_imgHtml.outerHtml() : null);
					}
					else if (/\.(xls?x|doc?x|ptt?x|pdf|zip|rar|7zip|txt|odt|xml|rtf|ods|odp|pps?x)$/i.test(v.ori_file_name)) {
						icons = null
						if (extName == "xlsx" || extName == "xls")
							icons = "fas fa-file-excel";
						else if (extName == "pdf" || extName == "ods")
							icons = "fas fa-file-pdf";
						else if (extName == "doc" || extName == "docx")
							icons = "fas fa-file-word";
						else
							icons = "fas fa-file-alt";

						ope_colI = creEle("i", null, null, null, ["fa fa-times"]);
						ope_colBtn = creBtn(null, null, "btnDelImg", ["btn-dark m-1"]);
						ope_colBtn.append(ope_colI);

						ope_colI = creEle("i", null, null, null, [icons + " fa-3x m-1"]);
						ope_colA = creEle("a", v.ori_file_name, null, null, null, null, { href: baseApiUrl + "/upload/operation/" + v.save_file_name + "." + extName, download: v.ori_file_name, target: "_blank" });
						ope_imgHtml = creEle("div", null, null, null, ["file-item"], { id: v.id }, null);

						ope_imgHtml.append(ope_colI);
						ope_imgHtml.append(ope_colA);
						ope_imgHtml.append(ope_colBtn);
						$('#alr_ope_forFile_2').append(ope_imgHtml ? ope_imgHtml.outerHtml() : null);
					}
				});
			}
		}, null, "POST").send()
	});

	function errCodeList() {
		$(loadEle).Loading("start");
		let _pathArr = pageAct.number.split("_"); //TPE_B1_ELEV_EL_R2F_NA_ELEV1_N1
		let _devicePath = _pathArr[0] + "_" + _pathArr[1] + "_" + _pathArr[2] + "_" + _pathArr[3] + "_" + _pathArr[4] + "_" + _pathArr[5];
		getOneDeviceAlarmTop10ByBaja(_devicePath, callbackForErr);
		$(loadEle).Loading("close");
	}

	function callbackForErr(res) {
		res = JSON.parse(res);
		strHtml = ``;

		$.each(res.data, function (i, v) {
			msg = v.msgText != null ? ($.trim(v.msgText.toString()).length > 0 ? v.msgText.split(':')[0] : '') : '';
			strHtml += `<option value=${v.uuid}>${v.uuid}</option>`;
		});

		if (res.count > 0)
			$('#alr_inpErrCode_2').html(strHtml);

		$(loadEle).Loading("close");
	}
</script>