422 lines
18 KiB
Plaintext
422 lines
18 KiB
Plaintext
@{
|
|
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",
|
|
"render": function (data, type, row, meta) {
|
|
if (data == "0001-01-01 00:00:00") {
|
|
return "";
|
|
}
|
|
return data;
|
|
},
|
|
}
|
|
],
|
|
'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 = "/EmergencyRecord/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 = "/EmergencyRecord/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>
|
|
} |