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.
556 lines
25 KiB
556 lines
25 KiB
@extends('system.layouts.app') |
|
|
|
@section('title', '區間測速系統') |
|
@section('name', 'interval') |
|
|
|
@section('css') |
|
@parent |
|
<link rel="stylesheet" href="{{ asset('css/v2/datatables.min.css') }}"> |
|
<link rel="stylesheet" href="{{ asset('css/bootstrap-select.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 text-start">區間測速案件審查-未審 </h2> |
|
@if(env('INTERVAL_VER', false)) |
|
<h6 class="text-end">區間系統版本：{{ env('INTERVAL_VER', false) }}</h6> |
|
@endif |
|
</div> |
|
|
|
<div> |
|
<!-- Date Filter --> |
|
<div class="row justify-content-center"> |
|
<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 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="true"> |
|
<option value="">選擇設備編號</option> |
|
@foreach ($location as $item) |
|
<option value="{{ $item->start_serialnumber . '-' . $item->end_serialnumber }}"> |
|
{{ $item->location }}</option> |
|
@endforeach |
|
</select> |
|
</td> |
|
|
|
<td class="ps-2">車牌：</td> |
|
<td> |
|
<input type='text' id='carnumber' 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> |
|
</tr> |
|
<tr> |
|
<td> |
|
<input type="checkbox" name="ez" id="ez">速審模式 |
|
</td> |
|
</tr> |
|
</table> |
|
</div> |
|
</div> |
|
<div class="row justify-content-center"> |
|
<div class="col-12"> |
|
<table id="intervalTable" class="table table-striped table-bordered" style="width:100%"> |
|
<thead> |
|
</thead> |
|
<tbody> |
|
</tbody> |
|
</table> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
</div> |
|
<!-- 圖片(image)彈出視窗 --> |
|
@include('system/popup/imagePop') |
|
<!-- 圖片(image)彈出視窗 --> |
|
|
|
<!-- 影像(video)彈出視窗 --> |
|
@include('system/popup/videoPop') |
|
<!-- 影像(video)彈出視窗 --> |
|
@endsection |
|
|
|
|
|
@section('js') |
|
@parent |
|
<script src="{{ asset('js/v2/datatables.min.js') }}"></script> |
|
<!-- Latest compiled and minified JavaScript --> |
|
{{-- <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap-select.min.js"></script> --}} |
|
<script src="{{ asset('js/bootstrap-select.min.js') }}"></script> |
|
<script> |
|
function changeUnreport(element) { |
|
// $('.slide-link[data-slide="0"]').addClass('active'); 範例 取data-value |
|
let id = element.getAttribute("data-vioId"); |
|
let unreportreason = $('#handleunreport_' + id).val(); |
|
let btn_report = $('.btn-update-photo[data-vioId="' + id + '"]'); |
|
let btn_unreport = $('.btn-delete-photo[data-vioId="' + id + '"]'); |
|
// console.log(btn_report,btn_unreport); |
|
if (unreportreason === "") { |
|
btn_report.removeClass("disabled"); |
|
btn_unreport.addClass("disabled"); |
|
} else { |
|
btn_report.addClass("disabled"); |
|
btn_unreport.removeClass("disabled"); |
|
} |
|
|
|
const otherReasonInput = document.getElementById('otherReason_' + element.dataset.vioid); |
|
if (element.value === '其他') { |
|
otherReasonInput.style.display = 'block'; |
|
} else { |
|
otherReasonInput.style.display = 'none'; |
|
} |
|
} |
|
//點按 編輯的ajax |
|
function editViolation(element) { |
|
let id = element.getAttribute("data-vioId"); |
|
let editCartype = $('#handleCartype_' + id).val(); |
|
let editCarnumber = $('#handleCarnumber_' + id).val(); |
|
let viocode = $('#viotype_' + id).val(); |
|
// console.log(editViolationtype,editCartype,editCarnumber); |
|
$.ajax({ |
|
type: "PUT", |
|
url: "/api/itl/" + id, |
|
data: { |
|
"id": id, |
|
"viocode": viocode, |
|
"cartype": editCartype, |
|
"carnumber": editCarnumber, |
|
"processcheck": 0 |
|
}, |
|
dataType: "json", |
|
success: function(response) { |
|
Swal.fire({ |
|
icon: 'success', |
|
title: '修改成功。' |
|
}).then(() => {}); |
|
intervalTable.ajax.reload(null, false); |
|
}, |
|
error: function() { |
|
//debugger |
|
Swal.fire({ |
|
icon: 'error', |
|
title: '修改失敗。' |
|
}); |
|
} |
|
}); |
|
} |
|
|
|
//點按 舉發的ajax |
|
function checkViolation(element) { |
|
let id = element.getAttribute("data-vioId"); |
|
let unreportreason = $('#handleunreport_' + id).val(); |
|
// console.log(id); |
|
let editCartype = $('#handleCartype_' + id).val(); |
|
let editCarnumber = $('#handleCarnumber_' + id).val(); |
|
let viocode = $('#viotype_' + id).val(); |
|
if (editCarnumber === "" || editCarnumber === null) { |
|
Swal.fire({ |
|
icon: 'error', |
|
title: '請輸入車號。' |
|
}); |
|
return; |
|
} |
|
if (viocode === null || viocode === "") { |
|
Swal.fire({ |
|
icon: 'error', |
|
title: '請選擇法條。' |
|
}); |
|
return; |
|
} |
|
if (unreportreason === "") { |
|
$.ajax({ |
|
type: "PUT", |
|
url: "/api/itl/" + id, |
|
data: { |
|
"id": id, |
|
"viocode": viocode, |
|
"cartype": editCartype, |
|
"carnumber": editCarnumber, |
|
"processcheck": 1 |
|
}, |
|
dataType: "json", |
|
success: function(response) { |
|
if (response.success !== undefined) { |
|
Swal.fire({ |
|
icon: 'success', |
|
title: '舉發成功。' |
|
}).then(() => {}); |
|
} |
|
intervalTable.ajax.reload(null, false); |
|
}, |
|
error: function() { |
|
//debugger |
|
Swal.fire({ |
|
icon: 'error', |
|
title: '舉發失敗。' |
|
}); |
|
} |
|
}); |
|
} |
|
} |
|
//點按 不舉發的ajax |
|
function unReportViolation(element) { |
|
let id = element.getAttribute("data-vioId"); |
|
// console.log(id); |
|
let editViolationtype = $('#handleViolationtype_' + id).val(); |
|
let editCartype = $('#handleCartype_' + id).val(); |
|
let editCarnumber = $('#handleCarnumber_' + id).val(); |
|
let unreportreason = $('#handleunreport_' + id).val(); |
|
// Check if "其他" is selected and use the input value if so |
|
if (unreportreason === '其他') { |
|
unreportreason = $('#otherReason_' + id).val(); |
|
} |
|
if (unreportreason !== "") { |
|
// console.log(editViolationtype,editCartype,editCarnumber); |
|
$.ajax({ |
|
type: "PUT", |
|
url: "/api/itl/" + id, |
|
data: { |
|
"id": id, |
|
"cartype": editCartype, |
|
"carnumber": editCarnumber, |
|
"violationtype": editViolationtype, |
|
"processcheck": 2, |
|
"unreportreason": unreportreason |
|
}, |
|
dataType: "json", |
|
success: function(response) { |
|
Swal.fire({ |
|
icon: 'success', |
|
title: '不舉發成功。' |
|
}).then(() => {}); |
|
intervalTable.ajax.reload(null, false); |
|
}, |
|
error: function() { |
|
//debugger |
|
Swal.fire({ |
|
icon: 'error', |
|
title: '不舉發失敗。' |
|
}); |
|
} |
|
}); |
|
} |
|
} |
|
// DataTable 初始化 |
|
$(document).ready(function() { |
|
$.fn.dataTableExt.sErrMode = 'throw'; |
|
// input 加入時間選擇 |
|
$('input#search_fromdate').datetimepicker({ |
|
format: 'YYYY-MM-DD' |
|
}); |
|
$('input#search_todate').datetimepicker({ |
|
format: 'YYYY-MM-DD' |
|
}); |
|
|
|
|
|
intervalTable = $('#intervalTable').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 =0 未審 |
|
'url': "{{ route('api.itl.index') }}", |
|
'data': function(data) { |
|
data.searchByFromdate = $('#search_fromdate').val(); |
|
data.searchByTodate = $('#search_todate').val(); |
|
data.serialnumber = $('#location').val(); |
|
data.carnumber = $('#carnumber').val(); |
|
data.processcheckStatus = 0; |
|
}, |
|
'error': function() { |
|
// intervalTable.draw(); |
|
}, |
|
}, |
|
// 設定不提供排序條件的欄位(例如圖片) |
|
columnDefs: [{ |
|
visible: false, |
|
targets: [] |
|
}, |
|
{ |
|
className: "dt-center", |
|
targets: [0, 3] |
|
}, |
|
{ |
|
className: "dt-start", |
|
targets: [1, 2, 4, ] |
|
}, |
|
|
|
], |
|
order: [ |
|
[0, 'desc'] |
|
], |
|
// 設定 顯示在Table上的欄位 |
|
columns: [ |
|
// 格式 data: 後端傳遞過來的 欄位名稱 |
|
{ |
|
data: 'intervalnumber', |
|
title: '案號', |
|
width: '80px', |
|
}, |
|
{ |
|
data: 'start_time', |
|
title: '起迄時間', |
|
width: '100px', |
|
render: function(data, type, row) { |
|
return `進入時間： <br/> ${row.start_time} <br/><br/> 離開時間： <br/>${row.end_time}`; |
|
} |
|
}, |
|
{ |
|
data: 'start_location', |
|
title: '起訖地點', |
|
width: '300px', |
|
render: function(data, type, row) { |
|
return `進入地點： <br/> [${row.start_serialnumber}] ${row.start_location} <br/><br/> 離開地點： <br/>[${row.end_serialnumber}] ${row.end_location}`; |
|
} |
|
}, |
|
|
|
{ |
|
data: 'merge_picture', |
|
title: '違規照片', |
|
orderable: false, |
|
"render": function(data, type, JsonResultRow, meta) { |
|
let vdo_1 = `<button onclick="videoPopUp(this)" |
|
data-bs-toggle="modal" data-bs-target="#vdoPop" |
|
data-vdopath="/getViolationVideo/ParsingFiles*interval*data*${JsonResultRow.start_video}" type="button" |
|
style="font-size: 200%" class="btn btn-lg btn-danger"> |
|
<i class="fa-brands fa-youtube"></i> |
|
</button>`; |
|
let vdo_2 = `<button onclick="videoPopUp(this)" |
|
data-bs-toggle="modal" data-bs-target="#vdoPop" |
|
data-vdopath="/getViolationVideo/ParsingFiles*interval*data*${JsonResultRow.end_video}" type="button" |
|
style="font-size: 200%" class="btn btn-lg btn-danger"> |
|
<i class="fa-brands fa-youtube"></i> |
|
</button>`; |
|
let merge_picture = `<img onclick="imagePopUp(this)" |
|
data-bs-toggle="modal" data-bs-target="#imgPop" width="100%" |
|
src="/${JsonResultRow.merge_picture}" alt=""/>` |
|
return `${merge_picture} <br/> ${vdo_1} ${vdo_2}`; |
|
} |
|
}, |
|
{ |
|
data: 'speed', |
|
title: '案件數據', |
|
width: '150px', |
|
render: function(data, type, row) { |
|
return `車號：${row.carnumber} <br/><br/> 速限：${row.limit_speed} km/h<br/> 車速：${row.speed} km/h <br/> 時間：${row.diff} 秒 <br/> 距離：${row.distance}`; |
|
} |
|
}, |
|
{ |
|
data: 'id', |
|
title: '操作', |
|
width: '250px', |
|
orderable: false, |
|
"render": function(data, type, JsonResultRow, meta) { |
|
let viocode_html = `` |
|
let vio_arr = JsonResultRow.lawType; |
|
for (let key in JsonResultRow.lawType) { |
|
if (JsonResultRow.violationcode == undefined) { |
|
viocode_html = viocode_html + |
|
`<option value="${key}"> ${vio_arr[key]}</option>` |
|
} else { |
|
if (JsonResultRow.violationcode == key) { |
|
viocode_html = viocode_html + |
|
`<option value="${key}" selected> ${vio_arr[key]}</option>` |
|
} else { |
|
viocode_html = viocode_html + |
|
`<option value="${key}"> ${vio_arr[key]}</option>` |
|
} |
|
} |
|
} |
|
let check_btn = ` |
|
<button type="button" onclick="editViolation(this)" data-vioId="${JsonResultRow.id}" |
|
class="btn-edit-photo btn btn-sm btn-warning"><i class='fas fa-edit pr-1'></i> 修改</button> |
|
<button type="button" onclick="checkViolation(this)" data-vioId="${JsonResultRow.id}" |
|
class="btn-update-photo btn btn-sm btn-info"><i class='fas fa-save pr-1'></i> 舉發</button> |
|
<button type="button" onclick="unReportViolation(this)" data-vioId="${JsonResultRow.id}" |
|
class='btn-delete-photo btn btn-sm btn-danger disabled'><i class='fas fa-trash-alt pr-1'></i> 不舉發</button> |
|
` |
|
// check_btn = `` |
|
let normal = ` |
|
<div class="row ml-2"> |
|
<div class="col-12 col-lg-6 mt-1"> |
|
<span class="handleTitle col-form-label">車號：</span> |
|
<input class="form-control" id="handleCarnumber_${JsonResultRow.id}" |
|
value="${JsonResultRow.carnumber}"> |
|
</div> |
|
<div class="col-12 col-lg-6 mt-1"> |
|
|
|
<span class="handleTitle col-form-label">車種：</span> |
|
<select id="handleCartype_${JsonResultRow.id}" name="car_type" class="form-control"> |
|
<option value="${JsonResultRow.cartype}"> ${JsonResultRow.carkind}</option> |
|
<option value="1">汽車</option> |
|
<option value="3">重型機車</option> |
|
<option value="4">輕型機車</option> |
|
<option value="8">微型電動二輪車</option> |
|
|
|
</select> |
|
</div> |
|
<div class="col-12 col-lg-12 mt-1" style="max-width:347px"> |
|
<span class="handleTitle col-form-label">法條：</span> |
|
<select id="viotype_${JsonResultRow.id}" class="form-control selectpicker" title="請選擇法條" |
|
style="/*display: none*/" data-container="body" data-style="btn-dark border text-truncate w-100" |
|
data-dropdown-align-right="auto" data-live-search="true" data-vioId="${JsonResultRow.id}"> |
|
${viocode_html} |
|
</select> |
|
</div> |
|
|
|
<div class="col-12 col-lg-12 mt-2"> |
|
<span class="handleTitle col-form-label">不舉發理由：</span> |
|
<select id="handleunreport_${JsonResultRow.id}" onchange="changeUnreport(this)" class="form-control" |
|
data-vioId="${JsonResultRow.id}"> |
|
<option> ${JsonResultRow.unreportreason}</option> |
|
@foreach (\App\Class\StaticData::$reason as $key => $label) |
|
<option value="{{ $key }}">{{ $label }}</option> |
|
@endforeach |
|
@foreach (\App\Class\StaticData::$reason_itl as $key => $label) |
|
<option value="{{ $key }}">{{ $label }}</option> |
|
@endforeach |
|
|
|
<option>其他</option> |
|
</select> |
|
<input type="text" id="otherReason_${JsonResultRow.id}" class="form-control mt-2" style="display:none;" placeholder="請輸入其他理由"> |
|
</div> |
|
<div class="d-flex justify-content-between mt-2"> |
|
${check_btn} |
|
</div> |
|
</div>`; |
|
|
|
if (JsonResultRow.faildata == 1) { |
|
let fail_btn = ` |
|
<div class="col-12 col-lg-12 mt-2"> |
|
<span class="handleTitle col-form-label">不舉發理由：</span> |
|
<select id="handleunreport_${JsonResultRow.id}" onchange="changeUnreport(this)" class="form-control" |
|
data-vioId="${JsonResultRow.id}"> |
|
<option>校時異常</option> |
|
</select> |
|
</div> |
|
<div class="d-flex justify-content-between mt-1"> |
|
<button type="button" onclick="unReportViolation(this)" data-vioId="${JsonResultRow.id}" |
|
class='btn-delete-photo btn btn-sm btn-danger'><i class='fas fa-trash-alt pr-1'></i> 不舉發</button> |
|
</div> |
|
` |
|
return `${fail_btn}` |
|
} else { |
|
return normal; |
|
} |
|
} |
|
}, |
|
|
|
], |
|
initComplete: function() { |
|
$('.selectpicker').selectpicker(); |
|
|
|
}, |
|
drawCallback: function(settings) { |
|
$('.selectpicker').selectpicker(); |
|
let api = this.api(); |
|
api.rows().every(function(rowIdx, tableLoop, rowLoop) { |
|
let data = this.data(); |
|
if (data.faildata == 1) { // 获取隐藏列的数据 |
|
$(this.node()).find('td').css('color', 'red'); |
|
} |
|
}); |
|
} |
|
// stripeClasses:['striped-odd','striped-even'] |
|
}); |
|
// Search button |
|
$('#btn_search').click(function() { |
|
intervalTable.draw(); |
|
}); |
|
$('#btn_clear').click(function() { |
|
$('input.searchColumns').val(""); |
|
$('select.searchColumns').val(""); |
|
intervalTable.draw(); |
|
}); |
|
// if #ez is checked then hide some columns |
|
$('#ez').click(function() { |
|
if ($(this).is(':checked')) { |
|
intervalTable.columns([0, 1, 2, ]).visible(false); |
|
} else { |
|
intervalTable.columns([0, 1, 2, ]).visible(true); |
|
} |
|
}); |
|
|
|
}); |
|
</script> |
|
@stop
|
|
|