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.
393 lines
15 KiB
393 lines
15 KiB
@extends('system.layouts.app') |
|
|
|
@section('title', '前端攝影機設備狀態') |
|
@section('name', 'ping.ipcam') |
|
|
|
@section('css') |
|
<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); |
|
} |
|
|
|
label>.form-select { |
|
display: inline; |
|
width: auto; |
|
} |
|
</style> |
|
@endsection |
|
|
|
@section('content') |
|
<div class="container-fluid"> |
|
<div class="d-flex"> |
|
<div class="col-12 mt-5"> |
|
<h2 class="title">前端攝影機設備狀態 </h2> |
|
</div> |
|
</div> |
|
<ul class="nav nav-tabs" id="myTab" role="tablist"> |
|
<li class="nav-item" role="presentation"> |
|
<button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home-tab-pane" |
|
type="button" role="tab" aria-controls="home-tab-pane" aria-selected="true">最新</button> |
|
</li> |
|
<li class="nav-item" role="presentation"> |
|
<button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile-tab-pane" |
|
type="button" role="tab" aria-controls="profile-tab-pane" aria-selected="false">完整</button> |
|
</li> |
|
|
|
</ul> |
|
<div class="tab-content" id="myTabContent"> |
|
<div class="tab-pane fade show active" id="home-tab-pane" role="tabpanel" aria-labelledby="home-tab" |
|
tabindex="0"> |
|
<div class="row justify-content-center"> |
|
<div class="col-12 mt-3"> |
|
<table id="pingTableNew" class="table table-striped table-bordered" style="width:100%"></table> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="tab-pane fade" id="profile-tab-pane" role="tabpanel" aria-labelledby="profile-tab" tabindex="0"> |
|
<div class="row justify-content-end"> |
|
<div class="col-8 mt-3"> |
|
<table> |
|
<tr> |
|
<td>日期：</td> |
|
<td> |
|
<input type='date' id='search_fromdate' class="form-control date searchColumns" |
|
placeholder='起' value=""> |
|
</td> |
|
<td> |
|
<input type='date' id='search_todate' class="form-control date searchColumns" |
|
placeholder='訖' value=""> |
|
</td> |
|
<td>設備：</td> |
|
<td> |
|
<select id="location" class="form-control searchColumns"> |
|
<option value="">選擇設備編號</option> |
|
@foreach ($serialNumber as $item) |
|
<option value="{{ $item }}">{{ $item }}</option> |
|
@endforeach |
|
</select> |
|
|
|
</td> |
|
|
|
<td> |
|
<input type='button' id="btn_search" class="form-control " value="搜尋"> |
|
</td> |
|
<td> |
|
<input type='button' id="btn_clear" class="form-control " value="清除"> |
|
</td> |
|
<td> |
|
<input type='button' id="btn_export" class="form-control btn-info" value="表單下載"> |
|
</td> |
|
</tr> |
|
</table> |
|
</div> |
|
</div> |
|
<div class="row justify-content-center"> |
|
<div class="col-12 mt-3"> |
|
<table id="pingTable" class="table table-striped table-bordered" style="width:100%"></table> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
</div> |
|
</div> |
|
|
|
@endsection |
|
|
|
@section('js') |
|
@parent |
|
<!-- DataTable 用於v2的新版--> |
|
<script src="{{ asset('js/v2/datatables.min.js') }}"></script> |
|
<script> |
|
let pingTable = $('#pingTable') |
|
let pingTableNew = $('#pingTableNew') |
|
|
|
// DataTable 初始化 |
|
$(document).ready(function() { |
|
$.fn.dataTableExt.sErrMode = 'throw'; |
|
|
|
pingTableNew = $('#pingTableNew').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('ping.getData', ['status' => 99]) }}", |
|
'data': function(data) {}, |
|
'error': function() { |
|
pingTable.draw(); |
|
}, |
|
}, |
|
// 設定不提供排序條件的欄位(例如圖片) |
|
columnDefs: [{ |
|
// orderable: false, |
|
// targets: [4, 5, 6, 7] |
|
}], |
|
order: [ |
|
[0, "desc"] |
|
], |
|
createdRow: function(tr, data) { |
|
// console.log(data.ping_time) |
|
dt = new Date(data.ping_time.replace(' ', 'T')) |
|
|
|
if (Math.abs(dt.getTime() - new Date().getTime()) / 1000 > 300) { |
|
// $(tr).find('td').css("border-right-color", "transparent"); |
|
// $(tr).find('td').css("border-left-color", "transparent"); |
|
// $(tr).css("background-color", "rgba(230, 0, 0, 0.65)"); |
|
$(tr).find('td').css("color", "red"); |
|
} else if (Math.abs(dt.getTime() - new Date().getTime()) / 1000 > 80) { |
|
// $(tr).find('td').css("border-right-color", "transparent"); |
|
// $(tr).find('td').css("border-left-color", "transparent"); |
|
// $(tr).css("background-color", "rgba(230, 186, 0, 0.65)"); |
|
$(tr).find('td').css("color", "yellow"); |
|
} |
|
// $(tr).attr('groupsa', data.sa); |
|
}, |
|
|
|
// 設定 顯示在Table上的欄位 |
|
columns: [ |
|
// 格式 data: 後端傳遞過來的 欄位名稱 |
|
{ |
|
data: 'ping_time', |
|
title: '檢測時間', |
|
}, |
|
{ |
|
data: 'ip', |
|
title: 'IP', |
|
}, |
|
{ |
|
data: 'serialnumber', |
|
title: '設備編號', |
|
}, |
|
{ |
|
data: 'time', |
|
title: '延遲', |
|
"render": function(data, type, JsonResultRow, meta) { |
|
return `${JsonResultRow.time}ms`; |
|
} |
|
}, |
|
{ |
|
data: 'ttl', |
|
title: 'TTL', |
|
}, |
|
|
|
|
|
// 特殊格式 除了單純的資料 可能還需要其他HTML TAG去搭配使用 例如img video 之類的 |
|
{ |
|
data: 'ping_time', |
|
title: '狀態', |
|
"render": function(data, type, JsonResultRow, meta) { |
|
return ``; |
|
} |
|
}, |
|
|
|
] |
|
}); |
|
setInterval(function() { |
|
pingTableNew.ajax.reload(); |
|
}, 10000); |
|
pingTable = $('#pingTable').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('ping.getData', ['status' => 1]) }}", |
|
'data': function(data) { |
|
// 讀取搜尋值 |
|
var from_date = $('#search_fromdate').val(); |
|
var to_date = $('#search_todate').val(); |
|
var location = $('#location').val(); |
|
// var carnumber = $('#carnumber').val(); |
|
// // 放入data 讓ajax送出 |
|
data.searchByFromdate = from_date; |
|
data.searchByTodate = to_date; |
|
data.location = location; |
|
// data.carnumber = carnumber; |
|
// console.log(data); |
|
}, |
|
'error': function() { |
|
pingTable.draw(); |
|
}, |
|
}, |
|
// 設定不提供排序條件的欄位(例如圖片) |
|
columnDefs: [{ |
|
// orderable: false, |
|
// targets: [4, 5, 6, 7] |
|
}], |
|
order: [ |
|
[0, "desc"] |
|
], |
|
// 設定 顯示在Table上的欄位 |
|
columns: [ |
|
// 格式 data: 後端傳遞過來的 欄位名稱 |
|
{ |
|
data: 'ping_time', |
|
title: '檢測時間', |
|
}, |
|
{ |
|
data: 'ip', |
|
title: 'IP', |
|
}, |
|
{ |
|
data: 'serialnumber', |
|
title: '設備編號', |
|
}, |
|
{ |
|
data: 'time', |
|
title: '延遲', |
|
"render": function(data, type, JsonResultRow, meta) { |
|
return `${JsonResultRow.time}ms`; |
|
} |
|
}, |
|
{ |
|
data: 'ttl', |
|
title: 'TTL', |
|
}, |
|
|
|
|
|
// 特殊格式 除了單純的資料 可能還需要其他HTML TAG去搭配使用 例如img video 之類的 |
|
{ |
|
data: 'ping_time', |
|
title: '狀態', |
|
"render": function(data, type, JsonResultRow, meta) { |
|
return ``; |
|
} |
|
}, |
|
|
|
] |
|
}); |
|
|
|
// Search button |
|
$('#btn_search').click(function() { |
|
pingTable.draw(); |
|
}); |
|
$('#btn_clear').click(function() { |
|
$('input.searchColumns').val(""); |
|
$('select.searchColumns').val(""); |
|
pingTable.draw(); |
|
}); |
|
|
|
$('#btn_export').click(function() { |
|
Swal.fire({ |
|
icon: 'info', |
|
title: '產生檔案中請稍後' |
|
}).then(() => {}); |
|
let from_date = $('#search_fromdate').val(); |
|
let to_date = $('#search_todate').val(); |
|
let location = $('#location').val(); |
|
|
|
$.ajax({ |
|
url: "{{ route('ping.dump', ['status' => 999]) }}", |
|
method: 'GET', |
|
data: { |
|
"searchByFromdate": from_date, |
|
"searchByTodate": to_date, |
|
"location": location, |
|
"status": status |
|
}, |
|
success: function(res) { |
|
//debugger |
|
if (res.status == 0) { |
|
alert(res.msg) |
|
} else { |
|
window.location.href = res.url |
|
} |
|
}, |
|
error: function(res) { |
|
console.log(res) |
|
} |
|
}); |
|
}); |
|
}); |
|
|
|
function excelDw(url) { |
|
location.href = url |
|
} |
|
</script> |
|
@endsection
|
|
|