@{ ViewData["MainNum"] = "4"; ViewData["SubNum"] = "2"; ViewData["Title"] = "緊急應變硬體清單"; } <ol class="breadcrumb page-breadcrumb"> <li class="breadcrumb-item"><a href="javascript:void(0);">首頁</a></li> <li class="breadcrumb-item active">緊急應變硬體清單</li> <li class="position-absolute pos-top pos-right d-none d-sm-block"><span class="js-get-date"></span></li> </ol> <div class="row"> <div class="col-xl-12"> <div id="panel-5" class="panel"> <div class="panel-container show"> @*<div class="panel-hdr"> <div class="col-auto">顯示類型</div> <div class="col" id="show-mode"> <button type="button" class="btn btn-success" onclick="ChangeMode('alarm', this)">事件清單</button> <button type="button" class="btn btn-secondary" onclick="ChangeMode('normal', this)">緊急應變硬體清單</button> <button type="button" class="btn btn-secondary float-right" onclick="OnSimulationExercise('', '',1)">模擬演練</button> </div> </div>*@ <div class="panel-hdr"> <div class="col-auto">防災類別</div> <div class="col" id="disaster">防災類別</div> @* <div class="col-auto"> <button type="button" class="btn btn-secondary" onclick="OnSimulationExercise('', '',1)">模擬演練</button> </div>*@ </div> <div class="panel-hdr"> <div class="col-auto">棟別</div> <div class="col" id="building">棟別</div> </div> <div class="panel-hdr"> <div class="col-auto">樓層</div> <div class="col" id="floors">棟別</div> </div> <div class="panel-hdr"> <div class="col-auto">設備大類</div> <div class="col" id="layer2">設備大類</div> </div> <div class="panel-hdr"> <div class="col-auto">設備小類</div> <div class="col" id="layer3">設備大類</div> </div> <div class="panel-container"> <div class="panel-content"> <div class="frame-wrap"> <div class="row"> <div class="col-12"> <table class="table table-bordered table-hover m-0 text-center" id="alarm-device-table"> <thead class="thead-themed"> <tr> <th>設備編號</th> <th>設備名稱</th> <th>棟別</th> <th>防災類型</th> <th>設備大類</th> <th>設備小類</th> <th>樓層</th> <th>異常時間</th> <th>功能</th> </tr> </thead> <tbody> </tbody> </table> </div> <div class="col-6" id="iframe-floormap" style="height:50vh"> </div> </div> </div> </div> </div> </div> </div> </div> </div> <div class="modal fade modal-fullscreen example-modal-fullscreen" id="SimulationExercisemodal" 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 h-100 border-0 shadow-0 bg-fusion-800"> @*<button type="button" class="close p-sm-2 p-md-4 text-dark fs-xxl position-absolute pos-right mr-sm-2 mt-sm-1 z-index-space" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true"><i class="fal fa-times"></i></span> </button>*@ <button type="button" class=" position-absolute pos-right mr-sm-3 mt-sm-3 z-index-space btn btn-danger waves-effect waves-themed" id="closemodal" onclick="Closemodal()">關閉流程</button> <div class="modal-body bg-white"> <div class="container-fluid"> <div class="row"> <div class="col-12 text-center"><h1 class="mb-3">緊急應變措施 - <span id="simulation-disaster">火災</span>處置</h1></div> <ul class="nav nav-tabs mb-3 w-100" role="tablist" id="bigsetting"> <li class="nav-item"> <a class="nav-link fs-xl py-3 px-5" data-toggle="tab" href="#" role="tab"> <i class="fal fa-check text-success"></i> <span class="hidden-sm-down ml-1 text-secondary">確認與通報</span> </a> </li> <li class="nav-item"> <a class="nav-link fs-xl py-3 px-5" data-toggle="tab" href="#" role="tab"> <i class="fal fa-check text-success"></i> <span class="hidden-sm-down ml-1 text-secondary">通報火災授信總機</span> </a> </li> <li class="nav-item"> <a class="nav-link fs-xl py-3 px-5" data-toggle="tab" href="#" role="tab"> <i class="fal fa-check text-success"></i> <span class="hidden-sm-down ml-1 text-secondary">通報防災中心</span> </a> </li> <li class="nav-item"> <a class="nav-link fs-xl py-3 px-5" data-toggle="tab" href="#" role="tab"> <i class="fal fa-check text-success"></i> <span class="hidden-sm-down ml-1 text-secondary">疏導人群</span> </a> </li> </ul> </div> <div class="row"> <div class="col-md-8 tab-content" id="small_setting"> <div class="tab-pane fade show active" id="export_modal" role="tabpanel" aria-labelledby="16_modal"> <div class="row"> <div class="pr-2" style="width:38.5%"> <div id="panel-1" class="panel"> <div class="panel-container show"> <div class="panel-content"> <ul class="list-group"> <li class="list-group-item active"> <i class="fal fa-check text-success"></i> 確認與通報</li> <li class="list-group-item"> <i class="fal fa-check text-success"></i> 通報火災授信總機</li> <li class="list-group-item"> <i class="fal fa-check text-success"></i> 通報防災中心</li> <li class="list-group-item"> <i class="fal fa-check text-success"></i> 疏導人群</li> </ul> </div> </div> </div> </div> <div class="" style="width:61.5%"> <div id="panel-2" class="panel"> <div class="panel-hdr"> <h2>通報火災授信總機</h2> </div> <div class="panel-container show"> <div class="panel-content"> <div class="panel-tag"> All panels needs to have an unique ID in order to use the panel funtions. <code>.panel</code> is a container with no padding, <code>.panel-hdr</code> has a <code>min-height</code> value and default <code>flexbox</code> properties. The <code>.panel-toolbar</code> is inserted into <code>.panel-hdr</code> for extra elements. The <code>.panel-container</code> wraps <code>.panel-content</code> which has a predefined padding. </div> <p> Default panel text. </p> </div> <div class="panel-content py-2 border-faded border-left-0 border-right-0 border-bottom-0 text-muted d-flex justify-content-between"> <div class=""><button type="button" class="btn btn-danger waves-effect waves-themed mr-2"> 不通報 </button><input type="text" class=""></div> <div><button type="button" class="btn btn-success waves-effect waves-themed"> 下一步 </button></div> </div> </div> </div> </div> </div> </div> </div> <div class="col-md-4"> <div id="panel-12" class="panel"> <div class="panel-hdr border-faded border-top-0 border-right-0 border-left-0 shadow-0"> <h2></h2> <div class="panel-toolbar pr-3 align-self-end"> <ul id="demo_panel-tabs" class="nav nav-tabs border-bottom-0 nav-tabs-clean" role="tablist"> <li class="nav-item"> <a class="nav-link text-dark active" data-toggle="tab" href="#tab_content" role="tab">緊急聯絡清單</a> </li> <li class="nav-item"> <a class="nav-link text-dark" data-toggle="tab" href="#tab_dohistory" role="tab">操作歷史</a> </li> </ul> </div> </div> <div class="panel-container show"> <div class="panel-content tab-content"> <div class="tab-pane fade show active" id="tab_content" role="tabpanel" aria-labelledby="tab_content"> <div class="row justify-content-between mb-2"> <div class="col-auto"> <span class="d-inline-block">組別</span> <button type="button" class="btn btn-secondary waves-effect waves-themed d-inline-block ml-2" onclick="Allgroupingselect()"> 全選 </button> </div> <div class="col-auto"> <button type="button" class="btn btn-primary waves-effect waves-themed" onclick="OpenSendSMSModal()">發送簡訊</button> </div> </div> <h2 id="button_grouping"> <button type="button" class="btn btn-success waves-effect waves-themed mb-2"> 主防災中心 </button> <button type="button" class="btn btn-outline-success waves-effect waves-themed mb-2"> 通報聯絡班 </button> <button type="button" class="btn btn-outline-success waves-effect waves-themed mb-2"> 外部救援引導班 </button> <button type="button" class="btn btn-outline-success waves-effect waves-themed mb-2"> 滅火班 </button> <button type="button" class="btn btn-outline-success waves-effect waves-themed mb-2"> 緊急救護班 </button> <button type="button" class="btn btn-outline-success waves-effect waves-themed mb-2"> 安全防護班 </button> </h2> <table class="table table-bordered m-0" id="membertable"> <thead> <tr> <th>姓名</th> <th>部門</th> <th>電話</th> <th>LineID</th> <th>Email</th> </tr> </thead> <tbody> </tbody> </table> </div> <div class="tab-pane fade" id="tab_dohistory" role="tabpanel" aria-labelledby="tab_dohistory"> <table class="table table-bordered m-0" id="dohistorytable"> <thead> <tr> <th>項目</th> <th>步驟</th> <th>結果</th> <th>時間</th> </tr> </thead> <tbody> </tbody> </table> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <div class="modal fade" id="emergency-verify-modal" 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-body"> <form id="emergency-item-form" onsubmit="PassVerify(true)"> <div class="row"> <div class="form-group col-6"> <label class="form-label" for="emergency_verify_modal"><span class="text-danger">*</span>指揮官密碼</label> <input class="form-control" type="password" id="emergency_verify_input" /> </div> </div> </form> </div> <div class="row"> <div class="col-12"> <div class="modal-footer"> <button type="button" class="btn btn-secondary" onclick="PassVerify(false)">取消</button> <button type="button" class="btn btn-primary" onclick="PassVerify(true)">確認</button> </div> </div> </div> </div> </div> </div> <div class="modal fade" id="send-sms-modal" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static" data-keyboard="false"> <div class="modal-dialog modal-dialog-centered modal-xl" 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-body"> <div class="row mb-2"> <div class="col-auto"> <span class="d-inline-block">組別</span> <button type="button" class="btn btn-secondary waves-effect waves-themed d-inline-block ml-2" onclick="AllSMSgroupingselect()">全選</button> </div> <div class="col" id="sms-grouping"></div> </div> <div class="row mb-2"> <div class="col-6"> <table class="table table-bordered m-0" id="smsMemberTable"> <thead> <tr> <th>姓名</th> <th>部門</th> <th>電話</th> <th>LineID</th> <th>Email</th> </tr> </thead> <tbody> </tbody> </table> </div> <div class="col-6"> <textarea class="form-control mt-3 mb-2" rows="5" id="sms_messagebox"></textarea> <span>發訊人:</span> </div> </div> <div class="row justify-content-between"> <div class="col-auto"> <button type="button" class="btn btn-secondary" data-dismiss="modal" onclick="PassVerify(false)">取消</button> </div> <div class="col-auto row"> <div class="col-auto"> <input class="form-control" type="password" id="sendSms_verify_input" placeholder="請輸入指揮官密碼" /> </div> <div class="col-auto"> <button type="button" class="btn btn-primary" onclick="PassVerify(true)"> <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true" id="smsSaveBtnLoading" style="display:none"></span> 儲存</button> </div> </div> </div> </div> </div> </div> </div> @section Scripts { <script> var enable_alarm_timer = false; var is_need_reload = true; var interval_id = 0; var all_device_group; var show_mode = 'normal'; var temp_all_disaster = [], //暫存所有防災類型 temp_all_building = [], //暫存所有的棟別 temp_all_floor = [], //暫存所有的樓層 temp_all_layer2 = [], //暫存所有的大類 temp_all_layer3 = [], //暫存所有的小類 temp_alarm_device = []; //暫存所有的報警設備 var backfill_building_device_amount = [], backfill_layer2_device_amount = [], backfill_layer3_device_amount = []; var backfill_building_alarm_device_amount = [], backfill_layer2_alarm_device_amount = [], backfill_layer3_alarm_device_amount = []; var select_all_disaster = false, select_all_floor = false, select_all_layer2 = false, select_all_layer3 = false; var changeBuilding = ""; var alarmDeviceTable, emergencyContactTable, historyTable; var SimulationExerciseGuid; var Allgroupidlist = new Array(0); var Allgroupingbool = false; var SelectMemberDepart = new Array(0); var SelectSMSMemberDepart = new Array(0); var AllSMSgroupidlist = new Array(0); var AllSMSgroupingbool = false; var SmsMemberTable; var SelectedFilter = { disasters: [], building_tag: '', floor_guids: [], layer2: [], layer3: [] }; var EmerLastsetting; //-正在使用的tab var Verifybool = false; //-驗證成功 var CloseVerify = false; var ToVerifyType = 0; $(function () { $("#emergency-item-form").submit((e) => { e.preventDefault(); }) //#region 定時取得報警設備(3s) interval_id = setInterval(function () { if (!enable_alarm_timer) { return; } var url = "/api/Device/Getalarm"; $.post(url, null, function (rel) { if (rel.code != "0000") { if (rel.code == "9999") { toast_error(rel.msg); } else { toast_warning(rel.msg); } return; } else { var is_diff = false; if (Object.keys(temp_alarm_device).length == Object.keys(rel.data.alarmorion).length) { for (var i = 0; i < Object.keys(rel.data.alarmorion).length; i++) { var index = temp_alarm_device.findIndex(x => x.alarm_timestamp == rel.data.alarmorion[i].alarm_timestamp && x.device_number == rel.data.alarmorion[i].device_number) if (index > -1) { is_diff = false; } else { is_diff = true; } } } else { is_diff = true; } temp_alarm_device = rel.data.alarmorion; if (show_mode == "alarm" && (is_need_reload || is_diff)) { enable_alarm_timer = false; //關閉查詢異常設備,避免重複呼叫 $("#building").find(".building_device_amount").html(0); rel.data.buildingAlarmDeviceAmount.forEach(function (item) { $(`#${item.building_tag}_device_amount`).html(item.device_amount); }); ResetDeviceTable(); } } }, 'json'); }, 3000); //#endregion //#region 模擬演練 / SOP modal 聯絡清單Table emergencyContactTable = $("#membertable").DataTable({ "columns": [ { "data": "full_name" }, { "data": "departmentName" }, { "data": "phone" }, { "data": "lineid" }, { "data": "email" } ], 'createdRow': function (row, data, dataIndex) { $(row).attr('guid', data.emergency_guid); }, "ajax": { "url": "/api/EmergencyDevice/EmergencyContactTable", "type": "POST", "data": function (d) { d.selectgroupidlist = SelectMemberDepart }, "dataSrc": function (rel) { if (rel.code == "9999") { toast_error(rel.msg); return; } data = rel.data.data; if (data == null || data.length == 0) { this.data = []; } return data; } } }); //#endregion //#region 模擬演練 / SOP modal 發送簡訊Table SmsMemberTable = $("#smsMemberTable").DataTable({ "columns": [ { "data": "name" }, { "data": "departmentName" }, { "data": "phone" }, { "data": "lineid" }, { "data": "email" } ], 'createdRow': function (row, data, dataIndex) { $(row).attr('guid', data.emergency_guid); }, "ajax": { "url": "/api/EmergencyDevice/EmergencyContactTable", "type": "POST", "data": function (d) { d.selectgroupidlist = SelectSMSMemberDepart }, "dataSrc": function (rel) { if (rel.code == "9999") { toast_error(rel.msg); return; } data = rel.data.data; if (data == null || data.length == 0) { this.data = []; } return data; } } }); //#endregion //#region 模擬演練 / SOP modal 操作紀錄Table historyTable = $('#dohistorytable').DataTable({ "iDisplayLength": 5, "order": [[3, 'desc']], "columns": [ { "data": "big_setting", }, { "data": "step_setting" }, { "data": "finished" }, { "data": "updated_at" } ], 'createdRow': function (row, data, dataIndex) { $(row).attr('guid', data.emergency_guid); }, "ajax": { "url": "/api/EmergencyDevice/Dohistorytotable", "type": "POST", "data": function (d) { d.eventguid = SimulationExerciseGuid }, "dataSrc": function (rel) { if (rel.code == "9999") { toast_error(rel.msg); return; } data = rel.data.data; if (data == null || data.length == 0) { this.data = []; } else { $.each(this.data, function (index, value) { if (value.finished == 0) { value.finished = "未執行"; } else if (value.finished == 1) { value.finished = "完成"; } else if (value.finished == 2) { value.finished = "不執行"; if (value.reason != null) { value.finished += "-" + value.reason; } } if (value.updated_at == "0001-01-01 00:00:00") { value.updated_at = ""; } }) } return data; } } }); //#endregion //#region 設備 DataTable alarmDeviceTable = $("#alarm-device-table").DataTable({ "pageLength": 30, "columns": [ { "data": "device_number", "render": function (data, type, row, meta) { @*var html = ` <a href="javascript:void(0)" onclick="ChangeFloormap('${row.building_tag}', '${row.floorguid}', '${data}', '${row.layer3}')"> ${data} </a> `;*@ var html = ` <a href="http://${row.ip_address}/file/BajascriptTest/_FloorMap.html?building_tag=${row.building_tag}&floor_guid=${row.floorguid}&layer3=${row.layer3}&device_number=${data}&show_cctv=1&jwt=${localStorage.getItem('JWT-Authorization')}" target="_blank"> ${data} </a> `; return html; } }, { "data": "device_name" }, { "data": "building_name" }, { "data": "disaster_name" }, { "data": "layer2_name" }, { "data": "layer3_name" }, { "data": "floorname" }, { "data": "alarm_timestamp" }, { "data": null, "render": function (data, type, row, meta) { var html = ""; if (show_mode == 'alarm') { html = '<button class="btn btn-sm btn-danger sop-btn">啟動SOP</button>' } return html } } ], 'drawCallback': function () { $('#alarm-device-table tbody tr td').css('padding', '5px 8px 5px 8px'); }, "order": [[7, "asc"], [0, "asc"]], 'createdRow': function (row, data, dataIndex) { $(row).attr('data-guid', data.device_guid); $(row).attr('data-disaster', data.disaster); }, "ajax": { "url": "/api/EmergencyDevice", "type": "POST", "data": function (d) { d.select_disasters = SelectedFilter.disasters; d.selectbuilding = SelectedFilter.building_tag != "" ? [SelectedFilter.building_tag] : []; d.select_Floors = SelectedFilter.floor_guids; d.select_Layer3 = SelectedFilter.layer3; }, "dataSrc": function (rel) { if (rel.code == "9999") { toast_error(rel.msg); return; } data = rel.data; if (data == null || data.length == 0) { this.data = []; is_need_reload = true; } enable_alarm_timer = true; is_need_reload = false; if (show_mode == 'alarm') { backfill_building_alarm_device_amount = []; backfill_layer2_alarm_device_amount = []; backfill_layer3_alarm_device_amount = []; var alarm_data = []; temp_alarm_device.forEach(function (alarm_device) { var temp_device = data.filter(x => x.device_number == alarm_device.device_number)[0]; if (temp_device != undefined && temp_device != null) { var obj = { device_guid: temp_device.device_guid, device_number: temp_device.device_number, device_name: temp_device.device_name, building_name: temp_device.building_name, building_tag: temp_device.building_tag, ip_address: temp_device.ip_address, disaster: temp_device.disaster, disaster_name: temp_device.disaster_name, layer2: temp_device.layer2, layer2_name: temp_device.layer2_name, layer3: temp_device.layer3, layer3_name: temp_device.layer3_name, floorname: temp_device.floorname, floorguid: temp_device.floorguid, alarm_timestamp: alarm_device.alarm_timestamp, } var temp_building_index = backfill_building_alarm_device_amount.findIndex(x => x.building_tag == temp_device.building_tag); if (temp_building_index < 0) { var building_obj = { building_tag: temp_device.building_tag, device_amount: 1 } backfill_building_alarm_device_amount.push(building_obj); } else { backfill_building_alarm_device_amount[temp_building_index].device_amount += 1; } var temp_layer2_index = backfill_layer2_alarm_device_amount.findIndex(x => x.value == temp_device.layer2 && x.building_tag == temp_device.building_tag) if (temp_layer2_index < 0) { var layer2_obj = { building_tag: temp_device.building_tag, value: temp_device.layer2, device_amount: 1 } backfill_layer2_alarm_device_amount.push(layer2_obj); } else { backfill_layer2_alarm_device_amount[temp_layer2_index].device_amount += 1; } var temp_layer3_index = backfill_layer3_alarm_device_amount.findIndex(x => x.layer3 == temp_device.layer3 && x.layer2 == temp_device.layer2 && x.building_tag == temp_device.building_tag) if (temp_layer3_index < 0) { var layer3_obj = { building_tag: temp_device.building_tag, layer2: temp_device.layer2, layer3: temp_device.layer3, device_amount: 1 } backfill_layer3_alarm_device_amount.push(layer3_obj); } else { backfill_layer3_alarm_device_amount[temp_layer3_index].device_amount += 1; } alarm_data.push(obj); } }); UpdateDeviceAmount(); data = alarm_data; } return data; } } }); //#endregion //#region 啟動SOP $('#alarm-device-table').on("click", "button.sop-btn", function () { selected_device_guid = $(this).parents('tr').attr('data-guid'); selected_device_disaster = $(this).parents('tr').attr('data-disaster'); OnSimulationExercise(selected_device_guid, selected_device_disaster, 0); }); //#endregion //#region 取得DeviceGroup var url = "/api/EmergencyDevice/GetDeviceGroup"; $.post(url, null, function (rel) { if (rel.code != "0000") { if (rel.code == "9999") { toast_error(rel.msg); } else { toast_warning(rel.msg); } return; } else { all_device_group = rel.data; //重整內容設備數量 all_device_group.forEach(function (disaster, disaster_index) { disaster.groupBuildings.forEach(function (building, building_index) { building.groupFloors.forEach(function (floor, floor_index) { floor.groupLayer2s.forEach(function (layer2, layer2_index) { layer2.groupLayer3s.forEach(function (layer3, layer3_index) { var new_layer3 = { name: layer3.name, value: layer3.value, device_amount: layer3.device_amount } var temp_building_index = backfill_building_device_amount.findIndex(x => x.building_tag == building.tag); if (temp_building_index < 0) { var building_obj = { building_tag: building.tag, device_amount: new_layer3.device_amount } backfill_building_device_amount.push(building_obj); } else { backfill_building_device_amount[temp_building_index].device_amount += new_layer3.device_amount; } var temp_layer2_index = backfill_layer2_device_amount.findIndex(x => x.value == layer2.value && x.building_tag == building.tag) if (temp_layer2_index < 0) { var layer2_obj = { building_tag: building.tag, value: layer2.value, device_amount: new_layer3.device_amount } backfill_layer2_device_amount.push(layer2_obj); } else { backfill_layer2_device_amount[temp_layer2_index].device_amount += new_layer3.device_amount; } var temp_layer3_index = backfill_layer3_device_amount.findIndex(x => x.layer3 == layer3.value && x.layer2 == layer2.value && x.building_tag == building.tag) if (temp_layer3_index < 0) { var layer3_obj = { building_tag: building.tag, layer2: layer2.value, layer3: layer3.value, device_amount: new_layer3.device_amount } backfill_layer3_device_amount.push(layer3_obj); } else { backfill_layer3_device_amount[temp_layer3_index].device_amount += new_layer3.device_amount; } }); }); }); }); }); //設定防災類型 temp_all_disaster = []; $('#disaster').empty(); $('#disaster').append(`<button type="button" class="btn btn-secondary ml-2" onclick="AllDisaster()">全選</button>`); var html = ""; rel.data.forEach(function (item, index) { temp_all_disaster.push(item.value); SelectedFilter.disasters.push(item.value); html += '<button type="button" class="btn btn-success ml-2" onclick="SelectDisaster(' + item.value + ',this)">' + item.name + '</button>'; }); $('#disaster').append(html); select_all_disaster = false; $('#disaster').find('button').first().click(); } }, 'json'); //#endregion }); //#region document beforeunload $(window).on("beforeunload ", function (e) { clearInterval(interval_id); }); //#endregion //#region 變更查詢內容 function ChangeMode(mode, e) { $('#show-mode').find('button').removeClass('btn-success').addClass('btn-secondary'); $(e).addClass('btn-success'); show_mode = mode; select_all_disaster = false; $('#disaster').find('button').first().click(); is_need_reload = true; UpdateDeviceAmount(); } //#endregion //#region 全選防災類型 function AllDisaster() { if (select_all_disaster) { //全選 -> 取消全選 select_all_disaster = false; $('#disaster').find('.btn-success').removeClass('btn-success').addClass('btn-outline-success'); SelectedFilter.disasters = []; } else { //取消全選 -> 全選 select_all_disaster = true; $('#disaster').find('.btn-outline-success').removeClass('btn-outline-success').addClass('btn-success'); SelectedFilter.disasters = temp_all_disaster; } is_need_reload = true; ChangeFilterBuilding(); UpdateDeviceAmount(); @*console.log("SelectedFilter", SelectedFilter);*@ } //#endregion //#region 選擇防災類型 function SelectDisaster(disaster, e) { select_all_disaster = false; var disaster_index = SelectedFilter.disasters.findIndex(x => x == disaster); if (disaster_index > -1) { //已選擇 -> 未選擇 SelectedFilter.disasters.splice(disaster_index, 1); $(e).removeClass('btn-success').addClass('btn-outline-success'); } else { //未選擇 -> 已選擇 SelectedFilter.disasters.push(disaster); $(e).removeClass('btn-outline-success').addClass('btn-success'); } is_need_reload = true; ChangeFilterBuilding(); UpdateDeviceAmount(); @*console.log("SelectedFilter", SelectedFilter);*@ } //#endregion //#region 修改過濾條件(棟別) function ChangeFilterBuilding() { temp_all_building = []; all_device_group.forEach(function (disaster, disaster_index) { if (SelectedFilter.disasters.findIndex(x => x == disaster.value) > -1) { //表示已選擇該防災類型 disaster.groupBuildings.forEach(function (building, building_index) { if (temp_all_building.findIndex(x => x.tag == building.tag) < 0) { //表示未加入,需加入 temp_all_building.push(building); } }); } }); $("#building").empty(); if (show_mode == 'alarm') { var html = ""; temp_all_building.forEach(function (building, building_index) { var building_device_amount = backfill_building_device_amount.filter(x => x.building_tag == building.tag)[0]; @*html += `<div class="btn-group ml-2" onclick="SelectBuilding('${building.tag}',this)"> <button type="button" class="btn btn-secondary">${building.name}</button> <button type="button" class="btn btn-secondary building_device_amount" id="${building.tag}_device_amount">${building_device_amount.device_amount}</button> </div>`;*@ html += `<div class="btn-group ml-2" onclick="SelectBuilding('${building.tag}',this)"> <button type="button" class="btn btn-secondary">${building.name}</button> <button type="button" class="btn btn-secondary building_device_amount" id="${building.tag}_device_amount">0</button> </div>`; }); $('#building').append(html); $('#building').find('div').first().click(); } else { var html = ""; temp_all_building.forEach(function (building, building_index) { html += '<button type="button" class="btn btn-secondary ml-2" onclick="SelectBuilding(\'' + building.tag + '\',this)">' + building.name + '</button>'; }); $('#building').append(html); $('#building').find('button').first().click(); } } //#endregion //#region 選擇棟別 function SelectBuilding(building_tag, e) { $('#building').find('button').removeClass('btn-success').addClass('btn-secondary') SelectedFilter.building_tag = building_tag; if (show_mode == 'alarm') { $(e).find('button').addClass('btn-success'); } else { $(e).addClass('btn-success'); } is_need_reload = true; ChangeFilterFloor(); UpdateDeviceAmount(); @*console.log("SelectedFilter", SelectedFilter);*@ } //#endregion //#region 修改過濾條件(樓層) function ChangeFilterFloor() { temp_all_floor = []; all_device_group.forEach(function (disaster, disaster_index) { if (SelectedFilter.disasters.findIndex(x => x == disaster.value) > -1) { //抓取已選擇的防災類型的棟別內容 disaster.groupBuildings.forEach(function (building, building_index) { if (building.tag == SelectedFilter.building_tag) { //抓取選擇棟別的底下樓層 building.groupFloors.forEach(function (floor, floor_index) { if (temp_all_floor.findIndex(x => x.name == floor.name) < 0) { //表示未加入,需加入 temp_all_floor.push(floor); } }); } }); } }); $("#floors").empty(); $("#floors").append(`<button type="button" class="btn btn-secondary ml-2 mb-2" onclick="AllFloor()">全選</button>`); var html = ""; temp_all_floor.forEach(function (floor, floor_index) { html += '<button type="button" class="btn btn-outline-success ml-2 mb-2" onclick="SelectFloor(\'' + floor.name + '\',this)">' + floor.name + '</button>'; }); $('#floors').append(html); select_all_floor = false; $('#floors').find('button').first().click(); } //#endregion //#region 全選樓層 function AllFloor() { if (select_all_floor) { //全選 -> 取消全選 select_all_floor = false; $('#floors').find('.btn-success').removeClass('btn-success').addClass('btn-outline-success'); SelectedFilter.floor_guids = []; } else { //取消全選 -> 全選 select_all_floor = true; $('#floors').find('.btn-outline-success').removeClass('btn-outline-success').addClass('btn-success'); SelectedFilter.floor_guids = []; temp_all_floor.forEach(function (floor, floor_index) { SelectedFilter.floor_guids.push(floor.name); }); } is_need_reload = true; ChangeFilterLayer2(); UpdateDeviceAmount(); @*console.log("SelectedFilter", SelectedFilter);*@ } //#endregion //#region 選擇樓層 function SelectFloor(floor_tag, e) { select_all_floor = false; var floor_index = SelectedFilter.floor_guids.findIndex(x => x == floor_tag); if (floor_index > -1) { //已選擇 -> 未選擇 SelectedFilter.floor_guids.splice(floor_index, 1); $(e).removeClass('btn-success').addClass('btn-outline-success'); } else { //未選擇 -> 已選擇 SelectedFilter.floor_guids.push(floor_tag); $(e).removeClass('btn-outline-success').addClass('btn-success'); } is_need_reload = true; ChangeFilterLayer2(); UpdateDeviceAmount(); @*console.log("SelectedFilter", SelectedFilter);*@ } //#endregion //#region 修改過濾條件(大類) function ChangeFilterLayer2() { temp_all_layer2 = []; all_device_group.forEach(function (disaster, disaster_index) { if (SelectedFilter.disasters.findIndex(x => x == disaster.value) > -1) { //抓取選擇防災類型的底下棟別 disaster.groupBuildings.forEach(function (building, building_index) { if (building.tag == SelectedFilter.building_tag) { //抓取選擇棟別的底下樓層 building.groupFloors.forEach(function (floor, floor_index) { if (SelectedFilter.floor_guids.findIndex(x => x == floor.name) > -1) { //抓取選擇樓層的底下大類 floor.groupLayer2s.forEach(function (layer2, layer2_index) { if (temp_all_layer2.findIndex(x => x.value == layer2.value) < 0) { temp_all_layer2.push(layer2); } }); } }); } }); } }); $("#layer2").empty(); $("#layer2").append(`<div class="ml-2 mb-2" style="position: relative; display: inline-flex; vertical-align: middle" onclick="AllLayer2()"> <button type="button" class="btn btn-secondary">全選</button> </div>`); var html = ""; temp_all_layer2.forEach(function (layer2, layer2_index) { var layer2_device_amount = backfill_layer2_device_amount.filter(x => x.value == layer2.value && x.building_tag == SelectedFilter.building_tag)[0]; @*html += ` <div class="btn-group ml-2 mb-2" onclick="SelectLayer2('${layer2.value}',this)"> <button type="button" class="btn btn-outline-success">${layer2.name}</button> <button type="button" class="btn btn-outline-success device_amount" id="${layer2_device_amount.building_tag}_${layer2_device_amount.value}_device_amount">${layer2_device_amount.device_amount}</button> </div>`;*@ html += ` <div class="btn-group ml-2 mb-2" onclick="SelectLayer2('${layer2.value}',this)"> <button type="button" class="btn btn-outline-success">${layer2.name}</button> <button type="button" class="btn btn-outline-success device_amount" id="${layer2_device_amount.building_tag}_${layer2_device_amount.value}_device_amount">0</button> </div>`; }); $('#layer2').append(html); select_all_layer2 = false; $('#layer2').find('div').first().click(); } //#endregion //#region 全選大類 function AllLayer2() { if (select_all_layer2) { //全選 -> 取消全選 select_all_layer2 = false; $('#layer2').find('div > button.btn-success').removeClass('btn-success').addClass('btn-outline-success'); SelectedFilter.layer2 = []; } else { //取消全選 -> 全選 select_all_layer2 = true; $('#layer2').find('div > button.btn-outline-success').removeClass('btn-outline-success').addClass('btn-success'); SelectedFilter.layer2 = []; temp_all_layer2.forEach(function (layer2, layer2_index) { SelectedFilter.layer2.push(layer2.value); }); } is_need_reload = true; ChangeFilterLayer3(); UpdateDeviceAmount(); @*console.log("SelectedFilter", SelectedFilter);*@ } //#endregion //#region 選擇大類 function SelectLayer2(layer2, e) { select_all_layer2 = false; var layer2_index = SelectedFilter.layer2.findIndex(x => x == layer2); if (layer2_index > -1) { //已選擇 -> 未選擇 SelectedFilter.layer2.splice(layer2_index, 1); $(e).find('button.btn-success').removeClass('btn-success').addClass('btn-outline-success'); } else { //未選擇 -> 已選擇 SelectedFilter.layer2.push(layer2); $(e).find('button.btn-outline-success').removeClass('btn-outline-success').addClass('btn-success'); } is_need_reload = true; ChangeFilterLayer3(); UpdateDeviceAmount(); @*console.log("SelectedFilter", SelectedFilter);*@ } //#endregion //#region 修改過濾條件(小類) function ChangeFilterLayer3() { temp_all_layer3 = []; all_device_group.forEach(function (disaster, disaster_index) { if (SelectedFilter.disasters.findIndex(x => x == disaster.value) > -1) { //抓取選擇防災類型的底下棟別 disaster.groupBuildings.forEach(function (building, building_index) { if (building.tag == SelectedFilter.building_tag) { //抓取選擇棟別的底下樓層 building.groupFloors.forEach(function (floor, floor_index) { if (SelectedFilter.floor_guids.findIndex(x => x == floor.name) > -1) { //抓取選擇樓層的底下大類 floor.groupLayer2s.forEach(function (layer2, layer2_index) { if (SelectedFilter.layer2.findIndex(x => x == layer2.value) > -1) { //抓取選擇大類的底下小類 layer2.groupLayer3s.forEach(function (layer3, layer3_index) { var new_layer3 = { name: layer3.name, value: layer3.value, device_amount: layer3.device_amount } var temp_device_amount = new_layer3.device_amount; var temp_layer3_index = temp_all_layer3.findIndex(x => x.value == layer3.value); if (temp_layer3_index < 0) { temp_all_layer3.push(new_layer3); } else { temp_all_layer3[temp_layer3_index].device_amount += temp_device_amount; } }); } }); } }); } }); } }); $("#layer3").empty(); $("#layer3").append(`<div class="ml-2 mb-2" style="position: relative; display: inline-flex; vertical-align: middle" onclick="AllLayer3()"> <button type="button" class="btn btn-secondary">全選</button> </div>`); var html = ""; temp_all_layer3.forEach(function (layer3, layer3_index) { var layer3_device_amount = backfill_layer3_device_amount.filter(x => x.layer3 == layer3.value && x.building_tag == SelectedFilter.building_tag)[0]; @*html += ` <div class="btn-group ml-2 mb-2" onclick="SelectLayer3('${layer3.value}',this)"> <button type="button" class="btn btn-outline-success">${layer3.name}</button> <button type="button" class="btn btn-outline-success device_amount" id="${layer3_device_amount.building_tag}_${layer3_device_amount.layer3}_device_amount">${layer3_device_amount.device_amount}</button> </div>`;*@ html += ` <div class="btn-group ml-2 mb-2" onclick="SelectLayer3('${layer3.value}',this)"> <button type="button" class="btn btn-outline-success">${layer3.name}</button> <button type="button" class="btn btn-outline-success device_amount" id="${layer3_device_amount.building_tag}_${layer3_device_amount.layer3}_device_amount">0</button> </div>`; }); $('#layer3').append(html); select_all_layer3 = false; $('#layer3').find('div').first().click(); } //#endregion //#region 全選小類 function AllLayer3() { if (select_all_layer3) { //全選 -> 取消全選 select_all_layer3 = false; $('#layer3').find('div > button.btn-success').removeClass('btn-success').addClass('btn-outline-success'); SelectedFilter.layer3 = []; } else { //取消全選 -> 全選 select_all_layer3 = true; $('#layer3').find('div > button.btn-outline-success').removeClass('btn-outline-success').addClass('btn-success'); SelectedFilter.layer3 = []; temp_all_layer3.forEach(function (layer3, layer3_index) { SelectedFilter.layer3.push(layer3.value); }); } is_need_reload = true; ResetDeviceTable(); UpdateDeviceAmount(); } //#endregion //#region 選擇小類 function SelectLayer3(layer3, e) { select_all_layer3 = false; var layer3_index = SelectedFilter.layer3.findIndex(x => x == layer3); if (layer3_index > -1) { //已選擇 -> 未選擇 SelectedFilter.layer3.splice(layer3_index, 1); $(e).find('button.btn-success').removeClass('btn-success').addClass('btn-outline-success'); } else { //未選擇 -> 已選擇 SelectedFilter.layer3.push(layer3); $(e).find('button.btn-outline-success').removeClass('btn-outline-success').addClass('btn-success'); } is_need_reload = true; ResetDeviceTable(); UpdateDeviceAmount(); } //#endregion //#region 重設設備表格 function ResetDeviceTable() { if ((SelectedFilter.disasters == null || SelectedFilter.disasters.length <= 0) || (SelectedFilter.building_tag == null || SelectedFilter.building_tag == "") || (SelectedFilter.floor_guids == null || SelectedFilter.floor_guids.length <= 0) || (SelectedFilter.layer3 == null || SelectedFilter.layer3.length <= 0) ) { return; } if (changeBuilding != "" && changeBuilding != SelectedFilter.building_tag) { alarmDeviceTable.clear().draw(); } else { alarmDeviceTable.ajax.reload(null, false); } changeBuilding = SelectedFilter.building_tag; } //#endregion //#region 更新過濾條件設備數量 function UpdateDeviceAmount() { $(".device_amount").html(0); if (show_mode == 'alarm') { backfill_building_alarm_device_amount.forEach(function (building, index) { $(`#${building.building_tag}_device_amount`).html(building.device_amount); }); backfill_layer2_alarm_device_amount.forEach(function (layer2, index) { $(`#${layer2.building_tag}_${layer2.value}_device_amount`).html(layer2.device_amount); }); backfill_layer3_alarm_device_amount.forEach(function (layer3, index) { $(`#${layer3.building_tag}_${layer3.layer3}_device_amount`).html(layer3.device_amount); }); } else { backfill_building_device_amount.forEach(function (building, index) { $(`#${building.building_tag}_device_amount`).html(building.device_amount); }); backfill_layer2_device_amount.forEach(function (layer2, index) { $(`#${layer2.building_tag}_${layer2.value}_device_amount`).html(layer2.device_amount); }); backfill_layer3_device_amount.forEach(function (layer3, index) { $(`#${layer3.building_tag}_${layer3.layer3}_device_amount`).html(layer3.device_amount); }); } } //#endregion //#region 變更右方地圖(改為跳新分頁) function ChangeFloormap(building_tag, floor_guid, device_number, layer3) { @* $("#iframe-floormap").empty(); $("#iframe-floormap").append( `<iframe src="http://60.251.164.125:8080/file/BajascriptTest/_FloorMap.html?building_tag=${building_tag}&floor_guid=${floor_guid}&layer3=${layer3}&device_number=${device_number}&show_cctv=1" width="100%" height="100%;" scrolling="no"></iframe>` ) *@ } //#endregion //#region 模擬演練 / SOP 開啟畫面 function OnSimulationExercise(guid, disaster, type) { if (type === 1 && SelectedFilter.disasters.length > 1) { toast_warning("防災類別只能單選,請修改防災類別"); return; } else if (type === 1 && SelectedFilter.disasters.length == 0) { toast_warning("請選擇單一防災類別"); return; } else if (type === 1) { disaster = SelectedFilter.disasters[0]; } var temp_disaster = all_device_group.filter(x => x.value == disaster)[0]; $("#simulation-disaster").html(temp_disaster.name); GetbuttonList(disaster); //$('#closemodal').attr('disabled', true); // de_number = $(e).parent().parent().attr('de-number'); var url = "/api/EmergencyDevice/SaveAndOpenSimulationExercise"; var send_data = { build: SelectedFilter.building_tag, disaster: disaster, type: type, device: guid }; $.post(url, send_data, function (rel) { if (rel.code != "0000") { if (rel.code == "9999") { toast_error(rel.msg); } return; } else { SimulationExerciseGuid = rel.data; GetBigsetting(disaster); return; } }, 'json'); } //#endregion //#region 模擬演練 / SOP modal 取得組別 function GetbuttonList(selected_disaster) { var url = "/api/EmergencyDevice/GetGroupingList"; var send_data = { system_parent_id: selected_disaster }; $.ajax({ url: url, data: send_data, type: 'POST', dataType: 'json', success: function (rel, statut) { if (rel.code != "0000") { if (rel.code == "9999") { toast_error(rel.msg); } return; } else { //console.log(rel); var grouping = ""; $('#button_grouping').empty(); Allgroupidlist = []; $.each(rel.data, function (index, val) { Allgroupidlist.push(val.id); grouping += '<div class="btn-group mb-2 mr-2">'; grouping += '<button type="button" class="btn btn-outline-success select" onclick="SelectGrouping(' + val.id + ',this)">' + val.name + '</button>'; grouping += '</div>'; }); $('#button_grouping').append(grouping); //SMS $("#sms-grouping").empty(); $.each(rel.data, function (index, val) { $('#sms-grouping').append(` <div class="btn-group mb-2 mr-2"> <button type="button" class="btn btn-outline-success select" onclick="SelectSMSGrouping(${val.id},this)">${val.name}</button> </div>`); }); return; //$('#button_grouping').empty(); } } }); } //#endregion //#region 模擬演練 / SOP modal 選擇組別 function SelectGrouping(grouping, e) { if ($(e).hasClass("btn-outline-success")) { $(e).removeClass("btn-outline-success").addClass("btn-success"); SelectMemberDepart.push(grouping); } else if ($(e).hasClass("btn-success")) { $(e).removeClass("btn-success").addClass("btn-outline-success"); var a = SelectMemberDepart.filter(function (n, i) { if (n === grouping) { SelectMemberDepart.splice(i, 1); } }); } emergencyContactTable.ajax.reload(); } //#endregion //#region 模擬演練 / SOP modal 全選所有組別 function Allgroupingselect() { if (Allgroupingbool) { $('#button_grouping').find(".btn-success").removeClass("btn-success").addClass("btn-outline-success"); SelectMemberDepart = []; Allgroupingbool = false; } else { $('#button_grouping').find(".btn-outline-success").removeClass("btn-outline-success").addClass("btn-success"); SelectMemberDepart = Allgroupidlist; Allgroupingbool = true; } emergencyContactTable.ajax.reload(); } //#endregion //#region 模擬演練 / SOP modal 開啟發送簡訊Modal function OpenSendSMSModal() { ToVerifyType = 2; $('#send-sms-modal').modal(); SmsMemberTable.ajax.reload(); } //#endregion //#region 模擬演練 / SOP modal 選擇要發送簡訊的組別 function SelectSMSGrouping(grouping, e) { if ($(e).hasClass("btn-outline-success")) { $(e).removeClass("btn-outline-success").addClass("btn-success"); SelectSMSMemberDepart.push(grouping); } else if ($(e).hasClass("btn-success")) { $(e).removeClass("btn-success").addClass("btn-outline-success"); var a = SelectSMSMemberDepart.filter(function (n, i) { if (n === grouping) { SelectSMSMemberDepart.splice(i, 1); } }); } SmsMemberTable.ajax.reload(); } //#endregion //#region 模擬演練 / SOP modal 全選所有發送簡訊的組別 function AllSMSgroupingselect() { if (AllSMSgroupingbool) { $('#sms-grouping').find(".btn-success").removeClass("btn-success").addClass("btn-outline-success"); SelectSMSMemberDepart = []; AllSMSgroupingbool = false; } else { $('#sms-grouping').find(".btn-outline-success").removeClass("btn-outline-success").addClass("btn-success"); SelectSMSMemberDepart = Allgroupidlist; AllSMSgroupingbool = true; } SmsMemberTable.ajax.reload(); } //#endregion //#region 模擬演練 / SOP modal 組成頁面 function GetBigsetting(selected_disaster) { var url = "/api/EmergencyDevice/GetBigsetting"; var send_data = { disaster: selected_disaster }; $.post(url, send_data, function (rel) { if (rel.code != "0000") { if (rel.code == "9999") { toast_error(rel.msg); } return; } else { var bigsetting = ""; var smallsetting = ""; $('#bigsetting').empty(); $.each(rel.data, function (index, val) { //<li class="nav-item"> <a class="nav-link fs-xl py-3 px-5" data-toggle="tab" href="#" role="tab"> <i class="fal fa-check text-success"></i> <span class="hidden-sm-down ml-1 text-secondary">確認與通報</span> </a> </li> if (index == 0) { bigsetting += '<li class="nav-item">'; bigsetting += '<a class="nav-link fs-xl py-3 px-5 active" data-toggle="tab" mas="' + val.id + '" href="#t' + val.id + '_modal" id="t' + val.id + '_tab" onclick="ChangeBigSetting(' + val.id + ')" role="tab">'; bigsetting += '<span class="hidden-sm-down ml-1 text-secondary">'; bigsetting += val.name + '</span > </a > </li >'; smallsetting += '<div class="tab-pane fade show active" id="t' + val.id + '_modal" role="tabpanel" aria-labelledby="' + val.id + '_modal">'; smallsetting += '<div class="row">'; smallsetting += '<div class="pr-2" style="width:38.5%">'; smallsetting += '<div id="panel-1" class="panel">'; smallsetting += '<div class="panel-container show">'; smallsetting += '<div class="panel-content">'; smallsetting += '<ul class="list-group" id="list_' + val.id + '">'; smallsetting += '</ul>'; smallsetting += '</div>'; smallsetting += '</div>'; smallsetting += '</div>'; smallsetting += '</div>'; smallsetting += '<div class="" style="width:61.5%">'; smallsetting += '<div class="panel">'; smallsetting += '<div class="panel-hdr" id="hbr_' + val.id + '">'; smallsetting += '</div>'; smallsetting += '<div class="panel-container show">'; smallsetting += '<div class="panel-content">'; smallsetting += '<div class="panel-tag" id="tag_' + val.id + '">'; smallsetting += '</div>'; smallsetting += '</div>'; smallsetting += '<div class="panel-content py-2 border-faded border-left-0 border-right-0 border-bottom-0 text-muted d-flex justify-content-between" id="button_' + val.id + '">'; smallsetting += '<div class=""><button type="button" class="btn btn-danger waves-effect waves-themed mr-2"> 不通報 </button><input type="text" class=""></div>'; smallsetting += '<div><button type="button" class="btn btn-success waves-effect waves-themed"> 下一步 </button></div>'; smallsetting += '</div>'; smallsetting += '</div>'; smallsetting += '</div>'; smallsetting += '</div>'; smallsetting += '</div>'; smallsetting += '</div>'; } else { bigsetting += '<li class="nav-item">'; bigsetting += '<a class="nav-link fs-xl py-3 px-5" data-toggle="tab" href="#t' + val.id + '_modal" id="t' + val.id + '_tab" onclick="ChangeBigSetting(' + val.id + ',' + val.verify + ')" role="tab">'; bigsetting += '<span class="hidden-sm-down ml-1 text-secondary">'; bigsetting += val.name + '</span > </a > </li >'; smallsetting += '<div class="tab-pane fade" id="t' + val.id + '_modal" role="tabpanel" aria-labelledby="' + val.id + '_modal">'; smallsetting += '<div class="row">'; smallsetting += '<div class="pr-2" style="width:38.5%">'; smallsetting += '<div id="panel-1" class="panel">'; smallsetting += '<div class="panel-container show">'; smallsetting += '<div class="panel-content">'; smallsetting += '<ul class="list-group" id="list_' + val.id + '">'; smallsetting += '</ul>'; smallsetting += '</div>'; smallsetting += '</div>'; smallsetting += '</div>'; smallsetting += '</div>'; smallsetting += '<div class="" style="width:61.5%">'; smallsetting += '<div class="panel">'; smallsetting += '<div class="panel-hdr" id="hbr_' + val.id + '">'; smallsetting += '</div>'; smallsetting += '<div class="panel-container show">'; smallsetting += '<div class="panel-content">'; smallsetting += '<div class="panel-tag" id="tag_' + val.id + '">'; smallsetting += '</div>'; smallsetting += '</div>'; smallsetting += '<div class="panel-content py-2 border-faded border-left-0 border-right-0 border-bottom-0 text-muted d-flex justify-content-between" id="button_' + val.id + '">'; smallsetting += '</div>'; smallsetting += '</div>'; smallsetting += '</div>'; smallsetting += '</div>'; smallsetting += '</div>'; smallsetting += '</div>'; } }); //console.log(smallsetting); $('#bigsetting').append(bigsetting); $('#small_setting').empty(); $('#small_setting').append(smallsetting); $.each(rel.data, function (index, val) { if (index == 0) { GetEmergencySetting(val.id, true); } else { GetEmergencySetting(val.id, false); } }) $('#SimulationExercisemodal').modal(); return; } }, 'json'); } //#endregion //#region 模擬演練 / SOP modal 生成左邊按鈕 function GetEmergencySetting(setting, bool) { var url = "/api/EmergencyDevice/GetEmergencySetting"; var send_data = { selectsetting: setting }; $.post(url, send_data, function (rel) { if (rel.code != "0000") { if (rel.code == "9999") { toast_error(rel.msg); } return; } else { var includeli = ""; $.each(rel.data, function (index, val) { if (index == 0) { includeli += '<li class="list-group-item active" id="li_' + val.emergency_guid + '" > <a class="abc" onclick="GetContentAndMakeItem(\'' + val.emergency_guid + '\',this,' + setting + ')" >' + val.full_name + '</a></li>'; } else { includeli += '<li class="list-group-item" id="li_' + val.emergency_guid + '"> <a class="abc" onclick="GetContentAndMakeItem(\'' + val.emergency_guid + '\',this,' + setting + ')" >' + val.full_name + '</a></li>'; } }); $('#list_' + setting).append(includeli); if (bool) { $('#bigsetting').find('.active').children().trigger('click'); } //console.log(rel); } }, 'json'); } //#endregion function GetContentAndMakeItem(smallsetting, e, setting)//小項目,按鈕,大項目 //點選左邊按鈕 { var FirstNotSend = $('#list_' + EmerNowsetting).children().not('.send').first().attr('id'); //當前要執行的步驟 var touch = $(e).parent().attr('id');//觸碰的按鈕 var has; if (FirstNotSend == touch) { has = 1; //true } else { has = 0; //false } $(e).parent().parent().find('.active').removeClass('active'); $(e).parent().addClass('active'); var url = "/api/EmergencyDevice/GetContentAndMakeItem"; var send_data = { emergency_guid: smallsetting, big_setting: $('#li_' + smallsetting).find('.abc').html(), step_setting: $('#t' + setting + '_tab').find('.text-secondary').html(), event_guid: SimulationExerciseGuid, make_item: has }; $.post(url, send_data, function (rel) { if (rel.code != "0000") { if (rel.code == "9999") { toast_error(rel.msg); } return; } else { console.log(rel); var buttonstr = ""; if (rel.data.not_answer == 1) { buttonstr += '<div><button type="button" class="btn btn-danger waves-effect waves-themed mr-2" onclick="NextStep(\'' + rel.data.emergency_item_guid + '\',1)"> 不執行 </button>'; buttonstr += '<input type="text" id="text_' + rel.data.emergency_item_guid + '" />'; } else { buttonstr += '<div><button type="button" class="btn btn-danger waves-effect waves-themed mr-2" onclick="NextStep(\'' + rel.data.emergency_item_guid + '\',2)"> 不執行 </button>'; } buttonstr += '</div>'; buttonstr += '<div><button type="button" class="btn btn-success waves-effect waves-themed" onclick="NextStep(\'' + rel.data.emergency_item_guid + '\',0)"> 執行 </button></div>'; $('#button_' + setting).empty(); $('#button_' + setting).append(buttonstr); if (has == 0) { $('#button_' + setting).find('button').attr('disabled', true); } $('#hbr_' + setting).empty(); $('#hbr_' + setting).append('<h2>' + rel.data.full_name + '</h2>'); $('#tag_' + setting).empty(); $('#tag_' + setting).append(rel.data.set_doing); historyTable.ajax.reload(); } }, 'json'); } function NextStep(eventguid, choose) { //choose:選擇 0:下一步 1:不通報(需要原因) 2:不通報(不用原因) var url = "/api/EmergencyDevice/NextStep"; var send_data = { eventguid: eventguid, choose: choose, reason: $('#text_' + eventguid).val() }; $.post(url, send_data, function (rel) { if (rel.code != "0000") { if (rel.code == "9999") { toast_error(rel.msg); } return; } else { $('#list_' + EmerNowsetting).find('.active').addClass('send'); //給予完成勾勾 var strnow = $('#list_' + EmerNowsetting).find('.active').find('.abc').html(); $('#list_' + EmerNowsetting).find('.active').find('.abc').html('<i class="fal fa-check text-success"></i>' + strnow); //找下一個沒有的做動作 var a = $('#list_' + EmerNowsetting).children().not('.send').not('.active').first().attr('id'); //如果沒下一個動作則到下一格大步驟 if (a == undefined) { strnow = $('#t' + EmerNowsetting + '_tab').find('.text-secondary').html(); $('#t' + EmerNowsetting + '_tab').find('.text-secondary').html('<i class="fal fa-check text-success"></i>' + strnow); $('#t' + EmerNowsetting + '_tab').addClass('send'); var tablist = $('#t' + EmerNowsetting + '_tab').parent().parent().children().children().not('.send').not('.active').first().attr('id'); //console.log(tablist); if (tablist == undefined) { $('#button_' + EmerNowsetting).find('button').attr('disabled', true); CloseVerify = true; //$('#closemodal').attr('disabled', false); } else { $('#' + tablist).trigger('click'); } } else { $('#' + a).find('.abc').trigger('click'); } } }, 'json') historytable.ajax.reload(); } function ChangeBigSetting(setting, verify) {//------------------------------------------------------------------------------------- //console.log(verify); if (verify == 1) { if (Verifybool)//需驗證且通過 { } else//需驗證未通過 { EmerLastsetting = $('#bigsetting').find('.active').attr('mas'); ToVerifyType = 0; //$('.modal-title').html("指揮官驗證"); $('#small_setting').hide(); $('#emergency_verify_input').val(''); $('#emergency-verify-modal').modal(); } } else//不需驗證 { } EmerNowsetting = setting; $('#list_' + EmerNowsetting).find('.active').children().trigger('click'); } function PassVerify(Vbool) { if (ToVerifyType == 0) { if (Vbool) { var url = "api/EmergencyDevice/CheckVerifybool"; var send_data = { pass: $('#emergency_verify_input').val() }; $.post(url, send_data, function (rel) { if (rel.code != "0000") { if (rel.code == "9999") { toast_error(rel.msg); } return; } else { if (rel.data) { Verifybool = true; $('#small_setting').show(); $('#emergency-verify-modal').modal('hide'); } else { toast_warning('密碼驗證失敗,請重新驗證'); } } }) } else {//取消驗證 if (EmerLastsetting == 0) { } else { $('#small_setting').show(); $('#bigsetting').find('.active').removeClass('active'); $(`#t${EmerLastsetting}_tab`).addClass('active'); $('#small_setting').find('.show').removeClass('active show') $(`#t${EmerLastsetting}_modal`).addClass('active show'); $('#list_' + EmerLastsetting).find('.active').children().trigger('click'); $('#emergency-verify-modal').modal('hide'); } } } if (ToVerifyType == 1) { if (Vbool) { var url = "api/EmergencyDevice/CheckVerifybool"; var send_data = { pass: $('#emergency_verify_input').val() }; $.post(url, send_data, function (rel) { if (rel.code != "0000") { if (rel.code == "9999") { toast_error(rel.msg); } return; } else { if (rel.data) { CloseVerify = true; $('#emergency-verify-modal').modal('hide'); $('#SimulationExercisemodal').modal('hide'); } else { toast_warning('密碼驗證失敗,請重新驗證'); } } }) } else { $('#emergency-verify-modal').modal('hide'); } } if(ToVerifyType == 2) { if (Vbool) { if(!$("#sms_messagebox").val()){ toast_warning('請輸入簡訊內容'); return; } controlSmsSaveBtnLoading(true); var url = "api/EmergencyDevice/CheckVerifybool"; var send_data = { pass: $('#sendSms_verify_input').val() }; $.post(url, send_data, function (rel) { if (rel.code != "0000") { if (rel.code == "9999") { toast_error(rel.msg); } return; } else { if (rel.data) { Verifybool = true; sendSmsMessage(); } else { toast_warning('密碼驗證失敗,請重新驗證'); } } controlSmsSaveBtnLoading(false); }) } else {//取消驗證 if (EmerLastsetting == 0) { } else { $('#small_setting').show(); $('#bigsetting').find('.active').removeClass('active'); $(`#t${EmerLastsetting}_tab`).addClass('active'); $('#small_setting').find('.show').removeClass('active show') $(`#t${EmerLastsetting}_modal`).addClass('active show'); $('#list_' + EmerLastsetting).find('.active').children().trigger('click'); $('#emergency-verify-modal').modal('hide'); } } } } function controlSmsSaveBtnLoading(isShow = true) { if(isShow){ $("#smsSaveBtnLoading").parent("button").prop("disabled",true); $("#smsSaveBtnLoading").fadeIn(200); } else { $("#smsSaveBtnLoading").fadeOut(200); $("#smsSaveBtnLoading").parent("button").prop("disabled",false); } } function sendSmsMessage() { if(Verifybool){ const members = SmsMemberTable.data().toArray(); const url = "api/HiNetMsg"; controlSmsSaveBtnLoading(true); members.forEach(m => { const send_data = { Number:m.phone, Msg:$("#sms_messagebox").val(), }; $.ajax({ method:"POST", url:url, data:JSON.stringify(send_data), contentType:"application/json;charset=utf-8", success:(rel) => { if (rel.code != "0000") { if (rel.code == "9999") { toast_error(rel.msg); } return; } else { if (rel.data) { toast_ok("簡訊發送成功"); $("#send-sms-modal").modal("hide"); } else { toast_warning('簡訊發送失敗,請重新操作'); } } }, complete:() => { controlSmsSaveBtnLoading(false); } }) //$.post(url, JSON.stringify(send_data),{contentType:"applicaiton/json;charset=utf-8"}, function (rel) { //}) }) } else { toast_warning('密碼驗證失敗,請重新驗證'); } } function Closemodal() { $('.modal-title').html("指揮官驗證"); ToVerifyType = 1; if (CloseVerify) { $('#SimulationExercisemodal').modal('hide'); } else { $('#emergency_verify_input').val(''); $('#emergency-verify-modal').modal(); } } </script> }