parking-html/Parking_spaces/Views/Manager/Single_violation_detail.cshtml

495 lines
17 KiB
Plaintext
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

@{
ViewData["Title"] = "Single_violation_detail";
Layout = "~/Views/Shared/_Layout_Manager.cshtml";
var parking_spaces_name = ViewBag.parking_spaces_name;
}
<input type="hidden" id="parking_spaces_name_id" value=@parking_spaces_name />
<h1>違規車輛</h1>
<div class="size2">
起始時間 : <input type="date" id="start_date_id">
結束時間 : <input type="date" id="end_date_id">
<button style="height:30px; " class="btn btn-outline-secondary" onclick="serch_date_click()">搜尋</button>
<button class="btn btn-outline-info" onclick="date_export_excel()" style="position: relative;height:30px">
<img class="img-profile rounded-circle" style="height:30px;width=10%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);" src="~/image/icon/724933.png">
<span style="visibility: hidden;">下載</span>
</button>
<button class="btn btn-outline-info" onclick="plate_export_excel()" style="position: relative;height:30px;float:right">
<img class="img-profile rounded-circle" style="height:30px;width=10%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);" src="~/image/icon/724933.png">
<span style="visibility: hidden;">下載</span>
</button>
<button style="height:30px;float:right " class="btn btn-outline-secondary" onclick="serch_click()">搜尋</button>
<input type="text" style="float:right" placeholder="請輸入車牌 ex:ABC4321" id="serch_text_id" />
<table class="table">
<thead>
<tr>
<th>
違規區域
</th>
<th>
車牌號碼
</th>
<!--<th>
進入圖片
</th>
<th>
違規圖片
</th>-->
<th>
時間
</th>
<th></th>
</tr>
</thead>
<tbody id="demo">
</tbody>
</table>
</div>
<!--車輛詳細-彈跳視窗-->
<div>
<dialog id="detail_car_data_view" style="width:100%;">
<table class="table">
<button class="btn btn-danger" style="float:right" onclick="detail_car_data_view.close();"> 關閉 </button>
<button class="btn btn-warning" style="float:right" onclick="updata_violation_car_get()"> 更新資料 </button><p></p>
<thead>
<tr>
<th>
違規區域
</th>
<th>
車牌號碼
</th>
<th>
進入圖片
</th>
<th>
違規圖片
</th>
<th>
時間
</th>
</tr>
</thead>
<tbody id="detail_car_data">
</tbody>
</table>
<button class="btn btn-outline-success" style="float:left" onclick="previous_detail_data()"> Previous</button>
<button class="btn btn-outline-success" style="float:right" onclick="next_detail_data()"> Next </button>
</dialog>
</div>
<!--獲取資料-->
<script>
var All_Model
var serial_number=0
function get_data() {
var name = document.getElementById("parking_spaces_name_id").value
//console.log(name)
$.ajax({
type: "GET",
url: "http://140.125.20.183:7700/api/Violation_car_table/violation_location_name-" + name,
data: {},
contentType: "application/json",
headers: {
'Authorization': token
},
success: function (Model) {
//console.log(Model)
All_Model = Model
set_data(Model)
}
});
}
</script>
<!--放置資料-->
<script>
function set_data(Model) {
table = "<tr>";
console.log(Model.length)
if (Model.length > 0) {
for (var i = 0; i < Model.length; i++) {
if (Model[i].violation_location_name != null) {
table += "<td>" + Model[i].violation_location_name + "</td>"
table += "<td>" + Model[i].license_plate_number + "</td>"
//table += "<td>" + "</td>"
//table += "<td>" + "</td>"
// table += "<td>" + "<img src=" + Model[i].car_start_img + ' style="width:100%"' + ">" + "</td>"
// table += "<td>" + "<img src=" + Model[i].car_end_img + ' style="width:100% "' + ">" + "</td>"
// 将字符串转换为 Date 对象
var timestampDt = new Date(Model[i].create_data_time);
// 转换为其他格式
var options = { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', second: '2-digit' };
var formattedDate = timestampDt.toLocaleDateString('en-US', options);
table += "<td>" + formattedDate + "</td>"
table += "<td>" + '<button class="btn btn-outline-success" onclick="detail_data(' + "'" + Model[i].violation_location_name + "','" + i+ "','" + Model[i].create_data_time + "'" + ')">詳細</button>'
table += '<button class="btn btn-danger" onclick="delet_data(' + "'" + Model[i].violation_location_name + "','" + Model[i].license_plate_number + "','" + Model[i].create_data_time + "'" + ')">刪除</button>' + "</td>"
}
table += "</tr>"
table += "<tr>"
}
}
document.getElementById("demo").innerHTML = table
}
</script>
<!--更新違規車輛資料-->
<script>
function updata_violation_car_get() {
var violation_location_name = document.getElementById('parking_spaces_name_id').value
var time = document.getElementById('create_data_time_id').innerHTML
console.log(time)
$.ajax({
type: "GET",
url: "http://140.125.20.183:7700/api/Violation_car_table/location_nam-" + violation_location_name + "-time-" + time,
data: {},
contentType: "application/json",
headers: {
'Authorization': token
},
success: function (Model) {
//console.log(Model)
updata_violation_car_put(Model)
}
});
}
function updata_violation_car_put(Model) {
var violation_location_name = document.getElementById('parking_spaces_name_id').value
var time = document.getElementById('create_data_time_id').innerHTML
var license_plate_number = document.getElementById('license_plate_number_text_id').value
Model.license_plate_number = license_plate_number
//console.log(Model)
var stringify_obj = JSON.stringify(Model);
$.ajax({
type: "PUT",
url: "http://140.125.20.183:7700/api/Violation_car_table/location_nam-" + violation_location_name + "-time-" + time,
data: stringify_obj,
contentType: "application/json",
headers: {
'Authorization': token
},
success: function (Model) {
// console.log(Model)
//updata_violation_car_put(Model)
}
});
}
</script>
<!--下一筆資料-->
<script>
function next_detail_data() {
serial_number = Number(serial_number) + 1
if (serial_number >= All_Model.length) {
window.alert('無下一筆資料')
serial_number = All_Model.length-1
return
}
//console.log(serial_number)
//console.log(All_Model[serial_number])
detail_data(All_Model[serial_number]['violation_location_name'], serial_number, All_Model[serial_number]['create_data_time'])
}
</script>
<!--上一筆資料-->
<script>
function previous_detail_data() {
serial_number = Number(serial_number) - 1
if (serial_number < 0){
window.alert('無上一筆資料')
serial_number = 0
return
}
// console.log(serial_number)
//console.log(All_Model[serial_number])
detail_data(All_Model[serial_number]['violation_location_name'], serial_number, All_Model[serial_number]['create_data_time'])
}
</script>
<!--違規車輛詳細-->
<script>
function detail_data(location_name, car_serial_number, time) {
//console.log(location_name)
//console.log(All_Model[car_serial_number])
//console.log(time)
serial_number = car_serial_number
$.ajax({
type: "GET",
url: "http://140.125.20.183:7700/api/Violation_car_table/location_nam-" + location_name + "-time-" + time,
data: {},
contentType: "application/json",
headers: {
'Authorization': token
},
success: function (Model) {
console.log(Model)
table = "<tr>";
table += "<td>" + Model.violation_location_name + "</td>"
table += "<td>" + '<input type="text" id = "license_plate_number_text_id" value="'+Model.license_plate_number+ '"/>' + "</td>"
//table += "<td>" + "</td>"
//table += "<td>" + "</td>"
table += "<td>" + "<img src=" + Model.car_start_img + ' style="width:100%"' + ">" + "</td>"
table += "<td>" + "<img src=" + Model.car_end_img + ' style="width:100% "' + ">" + "</td>"
table += "<td id = 'create_data_time_id' >" + Model.create_data_time + "</td>"
document.getElementById("detail_car_data").innerHTML = table
}
});
detail_car_data_view.showModal();
}
</script>
<!--透過車牌號碼搜尋-->
<script>
function serch_click() {
var license_plate_number = document.getElementById("serch_text_id").value
if (license_plate_number == "") {
get_data()
}
$.ajax({
type: "GET",
url: "http://140.125.20.183:7700/api/Violation_car_table/license_plate_number-" + license_plate_number,
data: {},
contentType: "application/json",
headers: {
'Authorization': token
},
success: function (Model) {
console.log(Model)
All_Model = Model
set_data(Model)
}
});
}
</script>
<!--透過日期搜尋紀錄-->
<script>
function serch_date_click() {
var name = document.getElementById("parking_spaces_name_id").value
var start_date = document.getElementById("start_date_id").value
var end_date = document.getElementById("end_date_id").value
console.log(start_date)
$.ajax({
type: "GET",
url: "http://140.125.20.183:7700/api/Violation_car_table/location_name_1_-" + name + "-start_time-" + start_date + "-end_time-" + end_date,
data: {},
contentType: "application/json",
headers: {
'Authorization': token
},
success: function (Model) {
console.log(Model)
All_Model = Model
set_data(Model)
}
});
}
</script>
<!--透過日期下載EXCEL-->
<script>
function date_export_excel() {
var name = document.getElementById("parking_spaces_name_id").value
var start_date = document.getElementById("start_date_id").value
var end_date = document.getElementById("end_date_id").value
// 發送HTTP GET請求到Web API動作方法
fetch('http://140.125.20.183:7700/api/Violation_car_table/export-excel_location_name_1_-' + name + "-start_time-" + start_date + "-end_time-" + end_date, {
method: 'GET',
headers: {
'Authorization': token
}
})
.then(response => {
// 確認響應的狀態碼是否為200成功
if (!response.ok) {
throw new Error('Network response was not ok');
}
// 將響應的數據轉換為Blob對象
return response.blob();
})
.then(blob => {
// 創建URL對象
const url = window.URL.createObjectURL(blob);
// 創建當前時間
const currentTime = new Date().toISOString().replace(/[-:]/g, "").replace(/\.\d{3}/g, "");
// 構建檔案名稱
const filename = `所有違規車輛-${currentTime}.xlsx`;
// 創建<a>元素
const a = document.createElement('a');
a.href = url;
a.download = filename; // 下載時的文件名稱
// 模擬單擊<a>元素
a.click();
// 釋放URL對象
window.URL.revokeObjectURL(url);
})
.catch(error => {
console.error('There was a problem with your fetch operation:', error);
});
}
</script>
<!--透過車牌號碼下載EXCEL-->
<script>
function plate_export_excel() {
var license_plate_number = document.getElementById("serch_text_id").value
// 發送HTTP GET請求到Web API動作方法
fetch('http://140.125.20.183:7700/api/Violation_car_table/export-excel_license_plate_number-' + license_plate_number, {
method: 'GET',
headers: {
'Authorization': token
}
})
.then(response => {
// 確認響應的狀態碼是否為200成功
if (!response.ok) {
throw new Error('Network response was not ok');
}
// 將響應的數據轉換為Blob對象
return response.blob();
})
.then(blob => {
// 創建URL對象
const url = window.URL.createObjectURL(blob);
// 創建當前時間
const currentTime = new Date().toISOString().replace(/[-:]/g, "").replace(/\.\d{3}/g, "");
// 構建檔案名稱
const filename = `${license_plate_number}-${currentTime}.xlsx`;
// 創建<a>元素
const a = document.createElement('a');
a.href = url;
a.download = filename; // 下載時的文件名稱
// 模擬單擊<a>元素
a.click();
// 釋放URL對象
window.URL.revokeObjectURL(url);
})
.catch(error => {
console.error('There was a problem with your fetch operation:', error);
});
}
</script>
<!--刪除資料-->
<script>
function delet_data(location_name , name , time) {
console.log(location_name)
console.log(name)
console.log(time)
$.ajax({
type: "DELETE",
url: "http://140.125.20.183:7700/api/Violation_car_table/location_name-" + location_name + "-time-" + time,
data: {},
contentType: "application/json",
headers: {
'Authorization': token
},
success: function (msg) {
console.log(msg)
get_data()
}
});
}
</script>
<!--檢查token-->
<script>
var token
function token_check() {
// 检查本地存储中是否存在JWT令牌
token = localStorage.getItem('token_park_space');
console.log(token)
$.ajax({
type: "GET",
url: 'http://140.125.20.183:7700/Users/token_check',
headers: {
'Authorization': token
},
success: function (response) {
console.log(response)
token_check = "true"
from_token_import_id()
},
error: function (xhr) {
token_check = "false"
window.location.href = '/';
// 处理错误响应,例如跳转到未授权页面
//window.location.href = 'https://example.com/unauthorized_page';
}
});
}
function from_token_import_id() {
var token = localStorage.getItem('token_park_space');
$.ajax({
type: "GET",
url: 'http://140.125.20.183:7700/Users/token-' + token,
headers: {
'Authorization': token
},
success: function (response) {
console.log(response)
from_id_import_user_data(response)
}
});
}
function from_id_import_user_data(id) {
var token = localStorage.getItem('token_park_space');
$.ajax({
type: "GET",
url: 'http://140.125.20.183:7700/Users/user_id-' + id,
headers: {
'Authorization': token
},
success: function (model) {
model = model.result
position = model.lastname
console.log(position)
if (position == "manager") {
get_data()
}
else {
window.location.href = '/';
}
}
});
}
</script>
<!--開機自啟-->
<script>
window.onload = token_check;
</script>