@{ ViewData["MainNum"] = "4"; ViewData["SubNum"] = "3"; 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-12"> <div id="panel-5" class="panel"> <div class="panel-container show"> <div class="panel-content"> <div class="subheader"> <h1 class="subheader-title"> <span>紀錄查詢</span> </h1> </div> <div class="row mb-3 d-flex align-items-center px-3 justify-content-between"> <div class="pr-3 "> <div class="btn-group btn-group-md" id="Disasterlist"> </div> </div> </div> <div class="row mb-3 d-flex align-items-center px-3 justify-content-between"> <div class="pr-3 "> <div class="btn-group btn-group-md" id="buildlist"> </div> </div> </div> <div class="row mb-3 d-flex align-items-center px-3"> <div class="pr-3 "> <div class="btn-group btn-group-md" id="Typelist"> <button type="button" class="btn btn-success waves-effect waves-themed mb-2" onclick="SelectType(2,this)">全選</button> <button type="button" class="btn btn-secondary waves-effect waves-themed mb-2" onclick="SelectType(1,this)">演習</button> <button type="button" class="btn btn-secondary waves-effect waves-themed mb-2" onclick="SelectType(0,this)">正式</button> </div> </div> <div class="pr-3"> <button type="button" class="btn btn-secondary waves-effect waves-themed mb-2" onclick="ChangeDate30()">近30天</button> </div> <div class="pr-3"> <div class="form-group"> <input class="form-control" id="date-range" type="text" name="date" value=""> </div> </div> </div> <div class="card border mb-g w-100 mb-5 " id="menucard"> <div class="mb-2 card-header bg-fusion-25 py-2 pr-3 d-flex align-items-center flex-wrap justify-content-end"> <div class="text-right "> <a href="javascript:;" class="btn btn-sm btn-success ml-auto waves-effect waves-themed" id="addUser-btn" onclick="AddFloor()"> 匯出PDF</a> <a href="javascript:;" class="btn btn-sm btn-success ml-auto waves-effect waves-themed" id="addUser-btn" onclick="AddFloor()"> 匯出Excel</a> </div> </div> <div class="card border mb-g mb-2 m-3" id="menucard"> <div class="card-header bg-fusion-25 py-2 pr-3 d-flex align-items-center flex-wrap justify-content-between"> <div class="card-title font-weight-bold">事件列表</div> </div> <div class="card-body"> <div class="w-100"> <div class="col-12"> <table id="emergency_event_table" class="table table-bordered table-hover m-0 text-center"> <thead class="thead-themed"> <tr> <th>序</th> <th>棟別</th> <th>災別</th> <th>設備</th> <th>類別</th> <th>時間</th> </tr> </thead> <tbody> </tbody> </table> </div> </div> </div> </div> <div class="card border mb-g mb-2 m-3" id="emergencyitem" style="display:none"> <div class="card-header bg-fusion-25 py-2 pr-3 d-flex align-items-center flex-wrap justify-content-between"> <div class="card-title font-weight-bold">事件明細</div> </div> <div class="card-body"> <div class="w-100"> <div class="col-12"> <table id="emergency_item_table" class="table table-bordered table-hover m-0 text-center"> <thead class="thead-themed"> <tr> <th>項目</th> <th>步驟</th> <th>是否完成操作</th> <th>不執行原因</th> <th>時間</th> </tr> </thead> <tbody> </tbody> </table> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> @section Scripts { <script> var SelectaDisaster; var SelectaBuild; var SelectaType = 2;//2:全選 1:演習 0:正式 var datepicker; var EmergencyEventTable; var EmergencyItemTable; var SelectEvent; $(function () { //#region Date-Picker datepicker = $('#date-range').daterangepicker({ autoUpdateInput: false, locale: { format: 'YYYY/MM/DD', cancelLabel: '取消', applyLabel:'確定' }, opens: 'left' }, function (start, end, label) { @* console.log("A new date selection was made: " + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD'));*@ }); $('#date-range').on('apply.daterangepicker', function (ev, picker) { $(this).val(picker.startDate.format('YYYY/MM/DD') + ' - ' + picker.endDate.format('YYYY/MM/DD')); $(this).trigger('change'); }); $('#date-range').on('cancel.daterangepicker', function (ev, picker) { $(this).val(''); $(this).trigger('change'); }); //#endregion var today = new Date(); var dateLimit = new Date(new Date().setDate(today.getDate() - 30)); var today_format = today.toISOString().slice(0, 10).replace(/-/g, "/"); var dateLimit_format = dateLimit.toISOString().slice(0, 10).replace(/-/g, "/"); datepicker.data('daterangepicker').setStartDate(dateLimit_format); datepicker.data('daterangepicker').setEndDate(today_format); $('#date-range').val(dateLimit_format + ' - ' + today_format); EmergencyEventTable = $("#emergency_event_table").DataTable({ "order": [[5, "desc"]], "columns": [ { "data": "emergency_event_guid", "render": function (data, type, row, meta) { return meta.row + 1; }, }, { "data": "building_name" }, { "data": "disaster_name" }, { "data": "device_name" }, { "data": "type" }, { "data": "created_at" } ], 'createdRow': function (row, data, dataIndex) { $(row).attr('guid', data.emergency_event_guid); $(row).attr('type', data.type); $(row).attr('device', data.device_name); }, "ajax": { "url": "/EmergencyRecord/EmergencyRecordTable", "type": "POST", "data": function (d) { d.selectaDisaster = SelectaDisaster, d.selectaBuild = SelectaBuild, d.selectaType = SelectaType, d.dateranger = $('#date-range').val() }, "dataSrc": function (rel) { if (rel.code == "9999") { toast_error(rel.msg); return; } data = rel.data.data; if (data == null || data.length == 0) { this.data = []; } $.each(this.data,function(index, val) { if (val.type == 0) { val.type = "正式"; } else { val.type = "演習"; } }) return data; } } }); EmergencyItemTable = $('#emergency_item_table').DataTable({ "order": [[4, "desc"]], "columns": [ { "data": "big_setting" }, { "data": "step_setting" }, { "data": "finished" }, { "data": "reason" }, { "data": "updated_at" } ], 'createdRow': function (row, data, dataIndex) { $(row).attr('guid', data.emergency_item_guid); }, "ajax": { "url": "/EmergencyRecord/EmergencyItemTable", "type": "POST", "data": function (d) { d.event_guid = SelectEvent }, "dataSrc": function (rel) { if (rel.code == "9999") { toast_error(rel.msg); return; } data = rel.data.data; if (data == null || data.length == 0) { this.data = []; } $.each(this.data, function (index, val) { if (val.finished == 0) { val.finished = "未執行"; } else if (val.finished == 1) { val.type = "完成"; } else { val.type = "不執行"; } }) return data; } } }); GetDisasterList(); GetBuild(); }) //取得所有災難別 function GetDisasterList() { var url = "/EmergencySetting/DisasterList"; var send_data = {}; $.post(url, send_data, function (rel) { if (rel.code != "0000") { if (rel.code == "9999") { toast_error(rel.msg); } return; } else { $('#Disasterlist').empty(); var Disasterstr = ""; $.each(rel.data, function (index, val) { if (index == 0) { Disasterstr += '<button type="button" class="btn btn-success waves-effect waves-themed" onclick = "SelectDisaster(' + val.value + ',this)"> ' + val.name + '</button>'; } else { Disasterstr += '<button type="button" class="btn btn-secondary waves-effect waves-themed" onclick = "SelectDisaster(' + val.value + ',this)">' + val.name + '</button>'; } }); $('#Disasterlist').append(Disasterstr); $('#Disasterlist').find('.btn-success').trigger('click'); return; } }, 'json'); } //取得所有棟別 function GetBuild() { var url = "/BuildMenu/BuildInfoList"; var send_data = {}; $.post(url, send_data, function (rel) { if (rel.code != "0000") { if (rel.code == "9999") { toast_error(rel.msg); } return; } else { $('#buildlist').empty(); var buildstr = ""; $.each(rel.data, function (index, val) { $('#build_menu_building_modal').append($("<option />").val(val.value).text(val.name)); if (index == 0) { SelectBuild = val.value; buildstr += '<button type="button" class="btn btn-success waves-effect waves-themed" onclick="SelectBulid(\'' + val.value + '\' ,this)">' + val.name + '</button>'; } else { buildstr += '<button type="button" class="btn btn-secondary waves-effect waves-themed" onclick="SelectBulid(\'' + val.value + '\',this)" >' + val.name + '</button>'; } }); $('#buildlist').append(buildstr); $('#buildlist').find('.btn-success').trigger('click'); //GetMainlistByBuild(SelectBuild); return; } }, 'json'); } //選擇災難類別 function SelectDisaster(Disaster, e) { SelectaDisaster = Disaster; if ($("#Disasterlist").find('.btn').hasClass("btn-success")) { $("#Disasterlist").find('.btn').removeClass("btn-success").addClass("btn-secondary"); } $(e).removeClass("btn-secondary").addClass("btn-success"); reloadeventTable(); } //選擇棟別 function SelectBulid(build, e) { SelectaBuild = build; if ($("#buildlist").find('.btn').hasClass("btn-success")) { $("#buildlist").find('.btn').removeClass("btn-success").addClass("btn-secondary"); } $(e).removeClass("btn-secondary").addClass("btn-success"); reloadeventTable(); } //選擇類別(正式 or 演習) function SelectType(type, e) { SelectaType = type if ($("#Typelist").find('.btn').hasClass("btn-success")) { $("#Typelist").find('.btn').removeClass("btn-success").addClass("btn-secondary"); } $(e).removeClass("btn-secondary").addClass("btn-success"); reloadeventTable(); } //查詢近30天 function ChangeDate30() { var today = new Date(); var dateLimit = new Date(new Date().setDate(today.getDate() - 30)); var today_format = today.toISOString().slice(0, 10).replace(/-/g, "/"); var dateLimit_format = dateLimit.toISOString().slice(0, 10).replace(/-/g, "/"); datepicker.data('daterangepicker').setStartDate(dateLimit_format); datepicker.data('daterangepicker').setEndDate(today_format); $('#date-range').val(dateLimit_format + ' - ' + today_format); $('#date-range').trigger('change'); } //改變日期 $('#date-range').on('change', function () { reloadeventTable(); }); //點選Event $('#emergency_event_table').on("click", "tbody>tr", function () { $(this).parents().find('tr').css('background-color', '#fff'); $(this).css('background-color', '#67B4AC'); SelectEvent = $(this).attr('guid'); $('#emergencyitem').find('.card-title').html("事件明細" + "-" + $(this).attr('type') + "-" + $(this).attr('device')); EmergencyItemTable.ajax.reload(); $('#emergencyitem').show(); }) //重新執行EventTable function reloadeventTable() { EmergencyEventTable.ajax.reload(); $('#emergencyitem').hide(); } </script> }