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.
399 lines
17 KiB
399 lines
17 KiB
@extends('system.layouts.app') |
|
|
|
@section('title', '超速違規資料管理') |
|
@section('name', 'multisys.manage') |
|
|
|
@section('css') |
|
@parent |
|
<!-- DataTable 用於v2的新版--> |
|
<link rel="stylesheet" href="{{ asset('css/v2/datatables.min.css') }}"> |
|
<style> |
|
.searchTable { |
|
text-align: right; |
|
} |
|
|
|
.table>tbody>tr>td { |
|
vertical-align: middle; |
|
text-align: -moz-center; |
|
} |
|
|
|
.btn.disabled, |
|
.btn:disabled { |
|
cursor: not-allowed; |
|
} |
|
|
|
.selectpicker { |
|
background-color: #212529; |
|
color: #dee2e6; |
|
} |
|
|
|
.table { |
|
--bs-table-bg: none; |
|
} |
|
|
|
.table-striped tbody tr:nth-of-type(odd) { |
|
background-color: rgba(255, 255, 255, .05); |
|
} |
|
</style> |
|
@stop |
|
|
|
@section('content') |
|
<div class="container-fluid mt-2" style="min-height:calc(100vh-60px) !important"> |
|
<div class="w-100"> |
|
<h2 class="title">超速違規案件審查-已審 </h2> |
|
</div> |
|
<div> |
|
<!-- Date Filter --> |
|
<div class="row justify-content-end"> |
|
<div class="col-10"> |
|
<table> |
|
<tr> |
|
<td>日期：</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>地點：</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="true"> |
|
<option value="">選擇設備編號</option> |
|
@foreach ($serialNumber as $item) |
|
<option value="{{ $item->serialnumber }}">{{ $item->serialnumber }} |
|
{{ $item->location }}</option> |
|
@endforeach |
|
</select> |
|
{{-- <input type='text' id='location' class="form-control searchColumns" placeholder='地點'> --}} |
|
</td> |
|
<td class="ps-2">車牌：</td> |
|
<td> |
|
<input type='text' id='carnumber' class="form-control searchColumns" placeholder='車牌'> |
|
</td> |
|
<td> |
|
<input type='button' id="btn_search" class="form-control " value="搜尋"> |
|
</td> |
|
<td class="ps-2"> |
|
<input type='button' id="btn_download" class="form-control " value="下載"> |
|
<input type='button' id="btn_download2" class="form-control disabled" disabled |
|
value="請稍後" style="display: none"> |
|
</td> |
|
<td class="ps-2"> |
|
<input type='button' id="btn_clear" class="form-control " value="清除"> |
|
</td> |
|
</tr> |
|
</table> |
|
</div> |
|
</div> |
|
<div class="row justify-content-center"> |
|
<div class="col-12"> |
|
<table id="violationparkingTable" class="table table-striped table-bordered" style="width:100%"> |
|
<thead> |
|
<tr> |
|
<th width='50'>案號</th> |
|
<th width='80'>時間</th> |
|
<th width='90'>攝影機編號</th> |
|
<th width='220'>設置地點</th> |
|
<th width='100'>車號</th> |
|
<th width='220'>法條</th> |
|
<th>違規照片1</th> |
|
<th class="text-center" width='50'>影片</th> |
|
<th width='100'>還原</th> |
|
</tr> |
|
</thead> |
|
<tbody> |
|
</table> |
|
</div> |
|
</div> |
|
|
|
</div> |
|
<!-- 圖片(image)彈出視窗 --> |
|
@include('system/popUp/imagePop') |
|
<!-- 圖片(image)彈出視窗 --> |
|
|
|
<!-- 影像(video)彈出視窗 --> |
|
@include('system/popUp/videoPop') |
|
<!-- 影像(video)彈出視窗 --> |
|
@endsection |
|
|
|
|
|
@section('js') |
|
@parent |
|
|
|
<!-- DataTable 用於v2的新版--> |
|
<script src="{{ asset('js/v2/datatables.min.js') }}"></script> |
|
<script> |
|
|
|
const config = { |
|
search: true, // Toggle search feature. Default: false |
|
creatable: false, // Creatable selection. Default: false |
|
clearable: false, // Clearable selection. Default: false |
|
maxHeight: '360px', // Max height for showing scrollbar. Default: 360px |
|
size: '', // Can be "sm" or "lg". Default '' |
|
} |
|
let violationparkingTable = $('#violationparkingTable') |
|
// DataTable 初始化 |
|
|
|
//點按 重新審核的ajax |
|
function resetViolation(element) { |
|
id = element.getAttribute("data-vioId"); |
|
// console.log(id); |
|
$.ajax({ |
|
type: "PUT", |
|
url: "/api/overspeed/" + id, |
|
data: { |
|
"id": id, |
|
"processcheck": 3 |
|
}, |
|
dataType: "text", |
|
success: function(response) { |
|
Swal.fire({ |
|
icon: 'success', |
|
title: '送回重審成功。' |
|
}).then(() => {}); |
|
//成功後重新刷頁面 |
|
violationparkingTable.ajax.reload(null, false); |
|
}, |
|
error: function() { |
|
//debugger |
|
Swal.fire({ |
|
icon: 'error', |
|
title: '送回重審失敗。' |
|
}); |
|
} |
|
}); |
|
} |
|
|
|
//點按 下載的ajax |
|
function DownloadOverSpeedRed() { |
|
let timerInterval |
|
let fileNum = $("#violationparkingTable_info").text().split(" ")[5] |
|
Swal.fire({ |
|
icon: 'success', |
|
title: '檔案壓縮中，請稍後!', |
|
html: '您的檔案預計 <b></b> 秒後壓縮完成.', |
|
timer: 2000 + 575 * fileNum, |
|
timerProgressBar: true, |
|
didOpen: () => { |
|
Swal.showLoading() |
|
const b = Swal.getHtmlContainer().querySelector('b') |
|
timerInterval = setInterval(() => { |
|
b.textContent = Math.floor(Swal.getTimerLeft() / 1000) |
|
}, 100) |
|
}, |
|
willClose: () => { |
|
clearInterval(timerInterval) |
|
} |
|
}).then((result) => { |
|
/* Read more about handling dismissals below */ |
|
if (result.dismiss === Swal.DismissReason.timer) { |
|
console.log('I was closed by the timer') |
|
} |
|
}) |
|
// 讀取搜尋值 |
|
let from_date = $('#search_fromdate').val(); |
|
let to_date = $('#search_todate').val(); |
|
let location = $('#location').val(); |
|
let carnumber = $('#carnumber').val(); |
|
// console.log(from_date); |
|
$.ajax({ |
|
type: "POST", |
|
url: "{{ route('api.overspeed.downloadZipPicture') }}", |
|
data: { |
|
"searchByFromdate": from_date, |
|
"searchByTodate": to_date, |
|
"location": location, |
|
"carnumber": carnumber, |
|
}, |
|
dataType: "text", |
|
success: function(response) { |
|
// console.log(response.data); |
|
if (response == "沒有檔案") { |
|
Swal.fire({ |
|
icon: 'error', |
|
title: '檔案下載失敗 ' + response + '。' |
|
}); |
|
} else { |
|
fileName = response; |
|
link = response; |
|
body = $("body"); |
|
var a = $("<a />"); |
|
a.attr("download", fileName); |
|
a.attr("href", "/" + link); |
|
body.append(a); |
|
a[0].click(); |
|
body.remove(a); |
|
} |
|
|
|
}, |
|
error: function(response) { |
|
//debugger |
|
Swal.fire({ |
|
icon: 'error', |
|
title: '檔案下載失敗' + response + '。' |
|
}); |
|
} |
|
}); |
|
} |
|
|
|
$(document).ready(function() { |
|
$.fn.dataTableExt.sErrMode = 'throw'; |
|
// input 加入時間選擇 |
|
$('input.date').datetimepicker({ |
|
format: 'YYYY-MM-DD' |
|
}); |
|
violationparkingTable = $('#violationparkingTable').DataTable({ |
|
"dom": "<'row'<'col-sm-12 col-md-6'li><'col-sm-12 col-md-6'f>>" + |
|
"<'row'<'col-sm-12'tr>>" + |
|
"<'row'<'col-sm-12 col-md-12'p>>", |
|
// 語系設定 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, |
|
// searching: true, |
|
// 處理中 是否顯示 |
|
processing: true, |
|
// |
|
serverSide: true, |
|
// Ajax 取資料 |
|
ajax: { |
|
//processcheckStatus =1 已審 |
|
'url': "{{ route('api.overspeed.index') }}", |
|
'data': function(data) { |
|
// 讀取搜尋值 |
|
let from_date = $('#search_fromdate').val(); |
|
let to_date = $('#search_todate').val(); |
|
let location = $('#location').val(); |
|
let carnumber = $('#carnumber').val(); |
|
let processcheckStatus = 1; |
|
// 放入data 讓ajax送出 |
|
data.searchByFromdate = from_date; |
|
data.searchByTodate = to_date; |
|
data.location = location; |
|
data.carnumber = carnumber; |
|
data.processcheckStatus = processcheckStatus; |
|
// console.log(data); |
|
}, |
|
'error': function() { |
|
// violationparkingTable.draw(); |
|
}, |
|
}, |
|
// 設定不提供排序條件的欄位(例如圖片) |
|
columnDefs: [{ |
|
orderable: false, |
|
targets: [4, 5, 6, 7] |
|
}, { |
|
visible: false, |
|
targets: [] |
|
}, |
|
{ |
|
className: "dt-center", |
|
targets: [0, 1, 2, 3, 4, 5, 6] |
|
} |
|
], |
|
order: [ |
|
[1, "desc"] |
|
], |
|
// 設定 顯示在Table上的欄位 |
|
columns: [ |
|
// 格式 data: 後端傳遞過來的 欄位名稱 |
|
{ |
|
data: 'id' |
|
}, |
|
{ |
|
data: 'datatime' |
|
}, |
|
{ |
|
data: 'serialnumber' |
|
}, |
|
{ |
|
data: 'location' |
|
}, |
|
{ |
|
data: 'carnumber' |
|
}, |
|
{ |
|
data: 'violationdata' |
|
}, |
|
// 特殊格式 除了單純的資料 可能還需要其他HTML TAG去搭配使用 例如img video 之類的 |
|
{ |
|
"render": function(data, type, JsonResultRow, meta) { |
|
return `<img onclick="imagePopUp(this)" data-bs-toggle="modal" data-bs-target="#imgPop" width="280" |
|
src="/${JsonResultRow.mergepic}?time=${new Date()}" alt=""/>`; |
|
} |
|
}, |
|
{ |
|
"render": function(data, type, JsonResultRow, meta) { |
|
return '<button onclick="videoPopUp(this)" data-bs-toggle="modal" data-bs-target="#vdoPop" data-vdopath="/getViolationVideo/ParsingFiles*' + |
|
JsonResultRow.video + |
|
'" type="button" style="font-size: 200%" class="btn-lg btn-danger"><i class="fab fa-youtube"></i></button>'; |
|
} |
|
}, |
|
// { |
|
// "render": function(data, type, JsonResultRow, meta) { |
|
// return ''; |
|
// } |
|
// }, |
|
{ |
|
"render": function(data, type, JsonResultRow, meta) { |
|
if (JsonResultRow.postcheck != 0) { |
|
return '已入案' |
|
} |
|
else{ |
|
return '<button type="button" onclick="resetViolation(this)" data-vioId="' + |
|
JsonResultRow.id + '" class="btn-reset-photo btn btn-sm btn-danger">\ |
|
<i class="fas fa-undo-alt pr-1"></i>案件重審</button>'; |
|
} |
|
} |
|
}, |
|
] |
|
}); |
|
|
|
// Search button |
|
$('#btn_search').click(function() { |
|
violationparkingTable.draw(); |
|
}); |
|
$('#btn_download').click(function() { |
|
violationparkingTable.draw(); |
|
document.getElementById("btn_download").style.display = "none"; //隱藏 |
|
document.getElementById("btn_download2").style.display = ""; //顯示 |
|
|
|
|
|
DownloadOverSpeedRed(); |
|
setTimeout(function() { |
|
document.getElementById("btn_download").style.display = ""; //顯示 |
|
document.getElementById("btn_download2").style.display = "none"; //隱藏 |
|
}, 5000); |
|
}); |
|
$('#btn_clear').click(function() { |
|
$('input.searchColumns').val(""); |
|
$('select.searchColumns').val(""); |
|
violationparkingTable.draw(); |
|
}); |
|
}); |
|
</script> |
|
@stop
|
|
|