You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
588 lines
25 KiB
588 lines
25 KiB
@extends('system.layouts.app') |
|
@section('title', '統計清冊') |
|
@section('css') |
|
@parent |
|
<!-- DataTable 用於v2的新版--> |
|
<link rel="stylesheet" href="{{ asset('css/v2/datatables.min.css') }}"> |
|
|
|
<style> |
|
/* 修改 Today 按鈕文字顏色 */ |
|
#datetimepicker .btn-today { |
|
color: white; |
|
} |
|
|
|
/* 修改 Clear 按鈕文字顏色 */ |
|
#datetimepicker .btn-clear { |
|
color: white; |
|
} |
|
</style> |
|
@endsection |
|
|
|
@section('content') |
|
<div class="container-fluid mt-5" style="min-height:calc(100vh-60px) !important"> |
|
<div class="w-100"> |
|
<h2 class="title">路口多功能統計清冊</h2> |
|
</div> |
|
<div> |
|
<!-- Date Filter --> |
|
<div class="row justify-content-center mt-4 mb-2"> |
|
<div class="col-12"> |
|
<table> |
|
<tr> |
|
<td class="">資料類型：</td> |
|
<td> |
|
<select id="statisticstype" class="form-control searchColumns selectpicker" |
|
data-style="btn-dark border" data-container="body" data-width="fit" |
|
data-dropdown-align-right="auto" data-live-search="false"> |
|
<option value="99">選擇資料類型</option> |
|
<option value="1">違規件數清冊</option> |
|
<option value="2">違規件數統計</option> |
|
<option value="3">違規時段件數統計</option> |
|
|
|
</select> |
|
|
|
</td> |
|
<td class="ps-2">審查狀態：</td> |
|
<td> |
|
<select id="processCheck" class="form-control searchColumns selectpicker" |
|
data-style="btn-dark border" data-container="body" data-width="fit" |
|
data-dropdown-align-right="auto" data-live-search="false"> |
|
<option value="">選擇審查狀態</option> |
|
<option value="99">全部</option> |
|
<option value="0">未審查</option> |
|
<option value="1">已審查</option> |
|
<option value="2">不舉發</option> |
|
|
|
</select> |
|
{{-- <input type='text' id='location' class="form-control searchColumns" placeholder='地點'> --}} |
|
</td> |
|
<td class="ps-2">起迄時間:</td> |
|
<td style="position: relative;"> |
|
<input type='text' id='search_fromdate' class="form-control date searchColumns" |
|
placeholder='起' value=""> |
|
</td> |
|
<td style="position: relative;"> |
|
<input type='text' id='search_todate' class="form-control date searchColumns" |
|
placeholder='訖' value=""> |
|
</td> |
|
<td class="ps-2">違規類型：</td> |
|
<td> |
|
<select id="violation_type" class="form-control searchColumns selectpicker" |
|
data-style="btn-dark border" data-container="body" data-width="fit" |
|
data-dropdown-align-right="auto" data-live-search="false"> |
|
<option value="">選擇違規類型</option> |
|
@isset($violationtype) |
|
@foreach ($violationtype as $item) |
|
<option value="{{ $item }}">{{ $item }}</option> |
|
@endforeach |
|
@endisset |
|
</select> |
|
{{-- <input type='text' id='location' class="form-control searchColumns" placeholder='地點'> --}} |
|
</td> |
|
<td class="ps-2">違規地點：</td> |
|
<td> |
|
<select id="location" class="form-control searchColumns selectpicker" |
|
data-style="btn-dark border" data-container="body" data-width="fit" |
|
data-dropdown-align-right="auto" data-live-search="false"> |
|
<option value="">選擇違規地點</option> |
|
@isset($serialNumber) |
|
@foreach ($serialNumber as $item) |
|
<option value="{{ $item->serialnumber }}">{{ $item->serialnumber }} |
|
{{ $item->location }}</option> |
|
@endforeach |
|
@endisset |
|
</select> |
|
{{-- <input type='text' id='location' class="form-control searchColumns" placeholder='地點'> --}} |
|
</td> |
|
|
|
<td class="ps-2"> |
|
<input type='button' id="btn_search" class="form-control " value="搜尋"> |
|
</td> |
|
<td class="ps-2"> |
|
<input type='button' id="btn_clear" class="form-control " value="清除"> |
|
</td> |
|
<td class="ps-2"> |
|
<input type='button' id="btn_export" class="form-control " value="匯出"> |
|
</td> |
|
</tr> |
|
</table> |
|
</div> |
|
</div> |
|
<div class="row justify-content-center"> |
|
<div class="col-12 statisticstype-1" style="display: none"> |
|
<table id="ms_statistics_table_1" class="table table-striped table-bordered" style="width:100%"> |
|
<thead> |
|
<tr> |
|
{{-- 設備編號 違規地點 違規類型 違規時間 車牌 --}} |
|
<th>ID</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-12 statisticstype-2" style="display: none"> |
|
<table id="ms_statistics_table_2" class="table table-striped table-bordered" style="width:100%"> |
|
<thead> |
|
<tr> |
|
{{-- 設備編號 違規地點 違規類型 違規時段 統計 --}} |
|
{{-- 設備編號 違規地點 違規類型 統計 --}} |
|
{{-- 設備編號 違規地點 違規類型 違規時間 車牌 --}} |
|
<th>ID</th> |
|
<th>設備編號</th> |
|
<th>違規地點</th> |
|
<th>車種</th> |
|
<th>違規類型</th> |
|
<th>統計</th> |
|
</tr> |
|
</thead> |
|
<tbody></tbody> |
|
</table> |
|
</div> |
|
|
|
<div class="col-12 statisticstype-3" style="display: none"> |
|
<table id="ms_statistics_table_3" class="table table-striped table-bordered" style="width:100%"> |
|
<thead> |
|
<tr> |
|
<th>ID</th> |
|
<th>設備編號</th> |
|
<th>違規地點</th> |
|
<th>違規時段</th> |
|
<th>違規類型</th> |
|
<th>統計</th> |
|
</tr> |
|
</thead> |
|
<tbody></tbody> |
|
</table> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
@endsection |
|
|
|
@section('js') |
|
@parent |
|
<!-- DataTable 用於v2的新版--> |
|
<script src="{{ asset('js/v2/datatables.min.js') }}"></script> |
|
|
|
<script> |
|
$.ajaxSetup({ |
|
headers: { |
|
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') |
|
} |
|
}); |
|
|
|
let ms_statistics_table_1 = $('#ms_statistics_table_1') |
|
let ms_statistics_table_2 = $('#ms_statistics_table_2') |
|
let ms_statistics_table_3 = $('#ms_statistics_table_3') |
|
|
|
// Get the statisticstype select element |
|
let statisticstypeSelect = $('#statisticstype'); |
|
let selectedValue = statisticstypeSelect.val(); |
|
|
|
$(document).ready(function() { |
|
$.fn.dataTableExt.sErrMode = 'throw'; |
|
|
|
// input 加入時間選擇 |
|
$('input#search_fromdate').datetimepicker({ |
|
format: 'YYYY-MM-DD' |
|
}); |
|
$('input#search_todate').datetimepicker({ |
|
format: 'YYYY-MM-DD' |
|
}); |
|
|
|
ms_statistics_table_1 = $('#ms_statistics_table_1').DataTable({ |
|
"dom": "<'row'<'d-flex justify-content-start mt-2 mb-2' lf>>" + |
|
"<'row'<'col-sm-12'tr>>" + |
|
"<'row'<'col-sm-12 col-md-12'<'d-flex justify-content-between' ip>>>", |
|
// 語系設定 UI介面中文化 |
|
"language": { |
|
"processing": "處理中...", |
|
"loadingRecords": "載入中...", |
|
"lengthMenu": "顯示 _MENU_ 項結果", |
|
"zeroRecords": "沒有符合的結果", |
|
"info": "顯示第 _START_ 至 _END_ 項結果，共 _TOTAL_ 項", |
|
"infoEmpty": "顯示第 0 至 0 項結果，共 0 項", |
|
"infoFiltered": "(從 _MAX_ 項結果中過濾)", |
|
"infoPostFix": "", |
|
"search": "搜尋:", |
|
"paginate": { |
|
"first": "第一頁", |
|
"previous": "上一頁", |
|
"next": "下一頁", |
|
"last": "最後一頁" |
|
}, |
|
"aria": { |
|
"sortAscending": ": 升冪排列", |
|
"sortDescending": ": 降冪排列" |
|
} |
|
}, |
|
searching: true, |
|
// 處理中 是否顯示 |
|
processing: true, |
|
// |
|
serverSide: true, |
|
deferLoading: 0, // here |
|
|
|
ajax: { |
|
//processcheckStatus =0 未審 |
|
'url': "{{ route('api.ms.statistics') }}", |
|
'data': function(data) { |
|
// 讀取搜尋值 |
|
let from_date = $('#search_fromdate').val(); |
|
let to_date = $('#search_todate').val(); |
|
let location = $('#location').val(); |
|
let processCheck = $('#processCheck').val(); |
|
// 放入data 讓ajax送出 |
|
data.searchByFromdate = from_date; |
|
data.searchByTodate = to_date; |
|
data.location = location; |
|
data.statisticstype = selectedValue; |
|
data.processCheck = processCheck; |
|
|
|
}, |
|
'error': function() { |
|
// violationparkingTable.draw(); |
|
}, |
|
}, |
|
// 設定不提供排序條件的欄位(例如圖片) |
|
columnDefs: [{ |
|
orderable: false, |
|
targets: [4] |
|
}, { |
|
visible: false, |
|
targets: [] |
|
}, |
|
{ |
|
className: "dt-center", |
|
targets: [0, 1, 2, 3, 4] |
|
} |
|
], |
|
order: [ |
|
[1, "desc"] |
|
], |
|
columns: [ |
|
// 格式 data: 後端傳遞過來的 欄位名稱 |
|
{ |
|
data: 'id', |
|
visible: false, |
|
}, |
|
{ |
|
data: 'datatime' |
|
}, |
|
{ |
|
data: 'serialnumber' |
|
}, |
|
{ |
|
data: 'location' |
|
}, |
|
{ |
|
data: 'carnumber' |
|
}, |
|
{ |
|
data: 'violationtype' |
|
}, |
|
{ |
|
data: 'processcheck' |
|
}, |
|
], |
|
}); |
|
ms_statistics_table_2 = $('#ms_statistics_table_2').DataTable({ |
|
"dom": "<'row'<'d-flex justify-content-start mt-2 mb-2' lf>>" + |
|
"<'row'<'col-sm-12'tr>>" + |
|
"<'row'<'col-sm-12 col-md-12'<'d-flex justify-content-between' ip>>>", |
|
// 語系設定 UI介面中文化 |
|
"language": { |
|
"processing": "處理中...", |
|
"loadingRecords": "載入中...", |
|
"lengthMenu": "顯示 _MENU_ 項結果", |
|
"zeroRecords": "沒有符合的結果", |
|
"info": "顯示第 _START_ 至 _END_ 項結果，共 _TOTAL_ 項", |
|
"infoEmpty": "顯示第 0 至 0 項結果，共 0 項", |
|
"infoFiltered": "(從 _MAX_ 項結果中過濾)", |
|
"infoPostFix": "", |
|
"search": "搜尋:", |
|
"paginate": { |
|
"first": "第一頁", |
|
"previous": "上一頁", |
|
"next": "下一頁", |
|
"last": "最後一頁" |
|
}, |
|
"aria": { |
|
"sortAscending": ": 升冪排列", |
|
"sortDescending": ": 降冪排列" |
|
} |
|
}, |
|
searching: false, |
|
// 處理中 是否顯示 |
|
processing: true, |
|
// |
|
serverSide: true, |
|
deferLoading: 0, // here |
|
ajax: { |
|
//processcheckStatus =0 未審 |
|
'url': "{{ route('api.ms.statistics') }}", |
|
'data': function(data) { |
|
// 讀取搜尋值 |
|
let from_date = $('#search_fromdate').val(); |
|
let to_date = $('#search_todate').val(); |
|
let location = $('#location').val(); |
|
let processCheck = $('#processCheck').val(); |
|
data.processCheck = processCheck; |
|
// 放入data 讓ajax送出 |
|
data.searchByFromdate = from_date; |
|
data.searchByTodate = to_date; |
|
data.location = location; |
|
data.statisticstype = selectedValue; |
|
|
|
}, |
|
'error': function() { |
|
// violationparkingTable.draw(); |
|
}, |
|
}, |
|
// 設定不提供排序條件的欄位(例如圖片) |
|
columnDefs: [{ |
|
orderable: false, |
|
targets: [4] |
|
}, { |
|
visible: false, |
|
targets: [] |
|
}, |
|
{ |
|
className: "dt-center", |
|
targets: [0, 1, 2, 3, 4] |
|
} |
|
], |
|
order: [ |
|
[1, "desc"] |
|
], |
|
columns: [ |
|
// 格式 data: 後端傳遞過來的 欄位名稱 |
|
{ |
|
data: 'id', |
|
visible: false, |
|
}, |
|
{ |
|
data: 'serialnumber' |
|
}, |
|
{ |
|
data: 'location' |
|
}, |
|
{ |
|
data: 'cartype', |
|
render: function(data, type, JsonResultRow, meta) { |
|
return `${JsonResultRow.carkind}` |
|
} |
|
}, |
|
{ |
|
data: 'violationtype' |
|
}, |
|
{ |
|
data: 'count' |
|
}, |
|
], |
|
}); |
|
|
|
ms_statistics_table_3 = $('#ms_statistics_table_3').DataTable({ |
|
"dom": "<'row'<'d-flex justify-content-start mt-2 mb-2' lf>>" + |
|
"<'row'<'col-sm-12'tr>>" + |
|
"<'row'<'col-sm-12 col-md-12'<'d-flex justify-content-between' ip>>>", |
|
// 語系設定 UI介面中文化 |
|
"language": { |
|
"processing": "處理中...", |
|
"loadingRecords": "載入中...", |
|
"lengthMenu": "顯示 _MENU_ 項結果", |
|
"zeroRecords": "沒有符合的結果", |
|
"info": "顯示第 _START_ 至 _END_ 項結果，共 _TOTAL_ 項", |
|
"infoEmpty": "顯示第 0 至 0 項結果，共 0 項", |
|
"infoFiltered": "(從 _MAX_ 項結果中過濾)", |
|
"infoPostFix": "", |
|
"search": "搜尋:", |
|
"paginate": { |
|
"first": "第一頁", |
|
"previous": "上一頁", |
|
"next": "下一頁", |
|
"last": "最後一頁" |
|
}, |
|
"aria": { |
|
"sortAscending": ": 升冪排列", |
|
"sortDescending": ": 降冪排列" |
|
} |
|
}, |
|
searching: false, |
|
processing: true, |
|
// |
|
serverSide: true, |
|
deferLoading: 0, // here |
|
ajax: { |
|
//processcheckStatus =0 未審 |
|
'url': "{{ route('api.ms.statistics') }}", |
|
'data': function(data) { |
|
// 讀取搜尋值 |
|
let from_date = $('#search_fromdate').val(); |
|
let to_date = $('#search_todate').val(); |
|
let location = $('#location').val(); |
|
let processCheck = $('#processCheck').val(); |
|
// 放入data 讓ajax送出 |
|
data.searchByFromdate = from_date; |
|
data.searchByTodate = to_date; |
|
data.location = location; |
|
data.statisticstype = selectedValue; |
|
data.processCheck = processCheck; |
|
|
|
}, |
|
'error': function() { |
|
// violationparkingTable.draw(); |
|
}, |
|
}, |
|
// 設定不提供排序條件的欄位(例如圖片) |
|
columnDefs: [{ |
|
orderable: false, |
|
targets: [] |
|
}, { |
|
visible: false, |
|
targets: [] |
|
}, |
|
{ |
|
className: "dt-center", |
|
targets: [] |
|
} |
|
], |
|
order: [ |
|
[1, "desc"] |
|
], |
|
columns: [ |
|
// 格式 data: 後端傳遞過來的 欄位名稱 |
|
{ |
|
data: 'id', |
|
visible: false, |
|
}, |
|
{ |
|
data: 'serialnumber' |
|
}, |
|
{ |
|
data: 'location' |
|
}, |
|
{ |
|
data: 'period', |
|
render: function(data, type, JsonResultRow, meta) { |
|
return `${JsonResultRow.period}` |
|
} |
|
}, |
|
{ |
|
data: 'violationtype' |
|
}, |
|
{ |
|
data: 'count' |
|
}, |
|
|
|
], |
|
}); |
|
|
|
|
|
|
|
|
|
// Add an onchange event listener to the select element |
|
statisticstypeSelect.on('change', function() { |
|
// Get the selected value |
|
selectedValue = $(this).val(); |
|
|
|
// Show/hide the appropriate elements based on the selected value |
|
if (selectedValue == 1) { |
|
$('.statisticstype-1').show(); |
|
$('.statisticstype-2, .statisticstype-3').hide(); |
|
ms_statistics_table_1.draw(); |
|
} else if (selectedValue == 2) { |
|
$('.statisticstype-2').show(); |
|
$('.statisticstype-1, .statisticstype-3').hide(); |
|
ms_statistics_table_2.draw(); |
|
} else if (selectedValue == 3) { |
|
$('.statisticstype-3').show(); |
|
$('.statisticstype-1, .statisticstype-2').hide(); |
|
ms_statistics_table_3.draw(); |
|
} |
|
}); |
|
|
|
|
|
|
|
// Search button |
|
$('#btn_search').click(function() { |
|
console.log($('#processCheck').val()) |
|
if (selectedValue == 1) { |
|
ms_statistics_table_1.draw(); |
|
} else if (selectedValue == 2) { |
|
ms_statistics_table_2.draw(); |
|
} else if (selectedValue == 3) { |
|
ms_statistics_table_3.draw(); |
|
} |
|
|
|
}); |
|
$('#btn_clear').click(function() { |
|
$('input.searchColumns').val(""); |
|
$('select.searchColumns').val(""); |
|
if (selectedValue == 1) { |
|
ms_statistics_table_1.draw(); |
|
} else if (selectedValue == 2) { |
|
ms_statistics_table_2.draw(); |
|
} else if (selectedValue == 3) { |
|
ms_statistics_table_3.draw(); |
|
} |
|
}); |
|
|
|
$('#btn_export').click(function() { |
|
let typeVal = $('#statisticstype').val() |
|
if(typeVal != 99){ |
|
// console.log($('#processCheck').val()) |
|
let processCheck = $('#processCheck').val(); |
|
$.ajax({ |
|
url: "{{ route('api.ms.statistics.export') }}", |
|
method: 'post', |
|
data: { |
|
searchByFromdate: $('#search_fromdate').val(), |
|
searchByTodate: $('#search_todate').val(), |
|
location: $('#location').val(), |
|
statisticstype: selectedValue, |
|
export: 1, |
|
processCheck: processCheck |
|
}, |
|
success: function(res) { |
|
// console.log(res) |
|
if (res.status == 0) { |
|
alert(res.msg) |
|
} else { |
|
window.location.href = res.url |
|
} |
|
}, |
|
error: function(res) { |
|
console.log(res) |
|
} |
|
}) |
|
} |
|
|
|
|
|
}); |
|
|
|
|
|
// input 加入時間選擇 today按鈕 以及清除按鈕 |
|
$('input#search_fromdate').datetimepicker({ |
|
format: 'YYYY-MM-DD', |
|
// showTodayButton: true, |
|
// showClear: true |
|
}); |
|
$('input#search_todate').datetimepicker({ |
|
format: 'YYYY-MM-DD', |
|
// showTodayButton: true, |
|
// showClear: true |
|
}); |
|
}) |
|
</script> |
|
@endsection
|
|
|