parking-html/Parking_spaces/Views/Manager/Yuntech_in_car.cshtml
2024-11-18 16:41:34 +08:00

780 lines
26 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"] = "Yuntech_in_car";
Layout = "~/Views/Shared/_Layout_Manager.cshtml";
}
<h1>查詢進出車輛</h1>
<div class="size2">
起始日期時間 : <input type="datetime-local" id="start_date_id">
結束日期時間 : <input type="datetime-local" id="end_date_id">
<button style="height:30px; " class="btn btn-outline-secondary" onclick="serch_date_click()">搜尋</button>
<div style="float:right; display: flex; align-items: center;">
<!--下載時間段進入車輛-->
下載時間段內進入車輛 :
<th>
<button class="btn btn-outline-info" onclick="export_excel_1()" style="position: relative; width: 50px; height: 30px; padding: 0;">
<img class="img-profile rounded-circle" style="width:20%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);" src="~/image/icon/724933.png">
<span style="visibility: hidden;">下載</span>
</button>
</th>
<!--下載總進入車輛-->
&nbsp; &nbsp;&nbsp;下載總進入車輛 :
<th>
<button class="btn btn-outline-info" onclick="export_excel_1()" style="position: relative; width: 50px; height: 30px; padding: 0;">
<img class="img-profile rounded-circle" style="width:20%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);" src="~/image/icon/724933.png">
<span style="visibility: hidden;">下載</span>
</button>
</th>
</div>
<br />
選擇進入區域:
<select style="width:10%" id="location_select_id" onchange="location_select()"></select>
<div style="float:right; display: flex; align-items: center;">
<input type="text" style="margin-right: 5px;" placeholder="請輸入車牌 ex:ABC4321" id="serch_text_id" />
<button style="height:30px;" class="btn btn-outline-secondary" onclick="serch_click()">搜尋</button>
</div>
<!--<th>
離開區域選擇:
<select style="width:10%" id="out_location_select_id" onchange="out_location_select()"></select>
</th>-->
<table class="table">
<thead>
<tr>
<th>
進入區域
</th>
<th>
車牌號碼
</th>
<!--<th>
進入圖片
</th>
<th>
違規圖片
</th>-->
<th>
時間
</th>
<th>
出去區域
</th>
<th>
出去時間
</th>
<th></th>
</tr>
</thead>
<tbody id="demo">
</tbody>
</table>
<div class="row">
<div class="col-xl-1 col-lg-1">
<div>
<button id="lastPageButton" class="btn btn-outline-secondary" onclick="fetchData_Up()">上一頁</button>
</div>
</div>
<div class="col-xl-10 col-lg-10">
</div>
<div class="col-xl-1 col-lg-1">
<div>
<button id="nextPageButton" class="btn btn-outline-secondary" onclick="fetchData_Down()">下一頁</button>
</div>
</div>
</div>
</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>
<p></p>
<thead>
<tr>
<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
var car_table_num = 0
function get_data() {
var name = "大門口"
$.ajax({
type: "GET",
url: "http://localhost:7700/api/Yuntech_in_car_table/Amount-" + car_table_num,
data: {},
headers: {
'Authorization': token
},
contentType: "application/json",
headers: {
'Authorization': token
},
success: function (Model) {
All_Model = Model
set_data(Model)
}
});
/*
// 監聽捲動事件
window.addEventListener("scroll", function () {
// 判斷是否捲動到底部
if (window.innerHeight + window.scrollY >= document.body.offsetHeight) {
// 執行抓取資料的函式
fetchData();
}
});
*/
// 載入 out_location_name 下拉選單資料
var outLocationSelect = document.getElementById("out_location_select_id");
$.ajax({
type: "GET",
url: "http://localhost:7700/api/Yuntech_in_car_table/out_location_name",
data: {},
headers: {
'Authorization': token
},
contentType: "application/json",
success: function (Model) {
console.log(Model);
outLocationSelect.innerHTML = "";
Model.forEach(function (item) {
var option = document.createElement('option');
option.text = item.out_location_name;
outLocationSelect.add(option);
});
},
error: function (xhr, status, error) {
console.error("獲取 out_location_name 資料失敗:", error);
}
});
var select = document.getElementById("location_select_id")
$.ajax({
type: "GET",
url: "http://localhost:7700/api/Yuntech_in_car_table/location_name",
data: {},
headers: {
'Authorization': token
},
contentType: "application/json",
headers: {
'Authorization': token
},
success: function (Model) {
console.log(Model)
select.innerHTML = "";
Model.forEach(function (item) {
var option = document.createElement('option');
option.text = item.location_name;
select.add(option);
});
}
});
}
// 定義抓取資料的函式
function fetchData_Up() {
car_table_num = car_table_num - 100
if (car_table_num < 0) {
window.alert('無上一筆資料')
car_table_num = 0
return
}
var name = "大門口"
$.ajax({
type: "GET",
url: "http://localhost:7700/api/Yuntech_in_car_table/Amount-" + car_table_num,
data: {},
headers: {
'Authorization': token
},
contentType: "application/json",
headers: {
'Authorization': token
},
success: function (Model) {
All_Model = Model
set_data(Model)
}
});
}
function fetchData_Down() {
car_table_num = car_table_num + 100
var name = "大門口"
$.ajax({
type: "GET",
url: "http://localhost:7700/api/Yuntech_in_car_table/Amount-" + car_table_num,
data: {},
headers: {
'Authorization': token
},
contentType: "application/json",
headers: {
'Authorization': token
},
success: function (Model) {
All_Model = Model
set_data(Model)
}
});
}
</script>
<!--放置資料-->
<script>
function set_data(Model) {
document.getElementById("demo").innerHTML = '';
var table = "<table>";
console.log(Model.length);
if (Model.length > 0) {
for (var i = 0; i < Model.length; i++) {
if (Model[i].location != null) {
table += "<tr>";
// 顯示地點、車牌號碼等
table += "<td>" + Model[i].location + "</td>";
table += "<td>" + Model[i].license_plate_number + "</td>";
// 進入時間
if (Model[i].in_time) {
var timestampDtIn = new Date(Model[i].in_time);
var options = { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', second: '2-digit' };
var formattedInDate = timestampDtIn.toLocaleDateString('en-US', options);
table += "<td>" + formattedInDate + "</td>";
} else {
table += "<td>沒有資料</td>";
}
// 出去地點
if (Model[i].out_location) {
table += "<td>" + Model[i].out_location + "</td>";
} else {
table += "<td>沒有資料</td>";
}
// 離開時間
if (Model[i].out_time) {
var timestampDtOut = new Date(Model[i].out_time);
var formattedOutDate = timestampDtOut.toLocaleDateString('en-US', options);
table += "<td>" + formattedOutDate + "</td>";
} else {
table += "<td>沒有資料</td>";
}
// 詳細按鈕
table += "<td><button class='btn btn-outline-success' onclick=\"detail_data('" + Model[i].location + "','" + i + "','" + Model[i].in_time + "')\">詳細</button></td>";
table += "</tr>";
}
}
} else {
table += "<tr><td colspan='6'>No data available</td></tr>";
}
table += "</table>";
document.getElementById("demo").innerHTML = table
// 移動到最上面
window.scrollTo(0, 0);
}
function set_data_license_plate_and_date(Model) {
var table = "<tr>";
console.log(Model.length)
if (Model.length > 0) {
for (var i = 0; i < Model.length; i++) {
if (Model[i].location != null) {
table += "<td>" + Model[i].location + "</td>";
table += "<td>" + Model[i].license_plate_number + "</td>";
var timestampDt = new Date(Model[i].in_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>";
if (Model[i].out_location && Model[i].out_time) {
table += "<td>" + Model[i].out_location + "</td>";
var outTimestampDt = new Date(Model[i].out_time);
var outFormattedDate = outTimestampDt.toLocaleDateString('en-US', options);
table += "<td>" + outFormattedDate + "</td>";
} else {
table += "<td>沒有資料</td>";
table += "<td>沒有資料</td>";
}
table += "<td><button class='btn btn-outline-success' onclick=\"detail_data('" + Model[i].location + "','" + i + "','" + Model[i].in_time + "')\">詳細</button></td>";
}
table += "</tr>";
table += "<tr>";
}
}
document.getElementById("demo").innerHTML = table;
}
</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]['location'], serial_number, All_Model[serial_number]['in_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]['location'], serial_number, All_Model[serial_number]['in_time'])
}
</script>
<!--車輛詳細-->
<script>
function detail_data(location_name, car_serial_number, time, out_location_name) {
// 設定車輛序列號
serial_number = car_serial_number
// 發送AJAX GET請求
$.ajax({
type: "GET",
url: "http://localhost:7700/api/Yuntech_in_car_table/location_name-" + location_name + "-time-" + time,
data: {},
contentType: "application/json",
headers: {
'Authorization': token
},
success: function (Model) {
console.log(Model)
// 設定固定車輛圖片
//let fixed_car_img = "<img style='width:100%' src='~/bootstrap_1/img/Yuntech.png'>";
// 檢查是否有離開時間
if (Model.out_time == null) {
// 如果沒有離開時間,顯示進入時間和車輛圖像
table = "<tr>";
table += "<td>進入區域 " + "<br>" + Model.location + "</td>";
table += "<td>" + '<input type="text" id="license_plate_number_text_id" value="' + Model.license_plate_number + '"/>' + "</td>";
// 添加固定車輛圖片
if (Model.car_img == null || Model.car_img == "") {
table += "<td>" + "<img src='" + "/bootstrap_1/img/maxresdefault.jpg" + "' style='width:80%' />" + "</td>";
} else {
table += "<td>" + "<img src='" + Model.car_img + "' style='width:80%' />" + "</td>";
}
var options = { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', second: '2-digit' };
// 格式化進入時間
var timestampDtIn = new Date(Model.in_time);
var formattedInDate = timestampDtIn.toLocaleDateString('en-US', options);
// 建立表格內容
table += "<td id='create_data_time_id'>" +
"進入時間: " + formattedInDate + "<br/><br/>" + "</td>";
document.getElementById("detail_car_data").innerHTML = table;
} else {
// 如果有離開時間,顯示進入和離開時間以及車輛圖像
table = "<tr>";
table += "<td>進入區域 " + Model.location + " <br>" + "<br>出去區域 " + (Model.out_location ? Model.out_location : '沒有資料') + "</td>";
table += "<td>" + '<input type="text" id="license_plate_number_text_id" value="' + Model.license_plate_number + '"/>' + "</td>";
// 添加固定車輛圖片
if (Model.out_car_img == null || Model.out_car_img == "") {
if (Model.car_img == null || Model.car_img == "") {
table += "<td>" + "<img src='" + "/bootstrap_1/img/maxresdefault.jpg" + "' style='width:40%' />" + "<img src='" + "/bootstrap_1/img/maxresdefault.jpg" + "' style='width:40%' />" + "</td>";
}
else {
table += "<td>" + "<img src='" + Model.car_img + "' style='width:40%' />" + "<img src='" + "/bootstrap_1/img/maxresdefault.jpg" + "' style='width:40%' />" + "</td>";
}
} else {
table += "<td>" + "<img src='" + Model.car_img + "' style='width:40%' />" + "<img src='" + Model.out_car_img + "' style='width:40%' />" + "</td>";
}
var options = { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', second: '2-digit' };
// 格式化進入時間
var timestampDtIn = new Date(Model.in_time);
var formattedInDate = timestampDtIn.toLocaleDateString('en-US', options);
// 格式化出去時間
var timestampDtOut = new Date(Model.out_time);
var formattedOutDate = timestampDtOut.toLocaleDateString('en-US', options);
// 建立表格內容
table += "<td id='create_data_time_id'>" +
"進入時間: " + formattedInDate + "<br/><br/>" +
"出去時間: " + (Model.out_time ? formattedOutDate : '沒有資料') +
"</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://localhost:7700/api/Yuntech_in_car_table/license_plate_number-" + license_plate_number,
data: {},
headers: {
'Authorization': token
},
contentType: "application/json",
headers: {
'Authorization': token
},
success: function (Model) {
console.log(Model)
All_Model = Model
set_data_license_plate_and_date(Model)
}
});
}
</script>
<!--透過日期搜尋紀錄-->
<script>
function serch_date_click() {
var name = document.getElementById("location_select_id").value
var start_date = document.getElementById("start_date_id").value
var end_date = document.getElementById("end_date_id").value
console.log(start_date)
// 隱藏上一頁按鈕
document.getElementById("lastPageButton").style.display = "none"
// 隱藏下一頁按鈕
document.getElementById("nextPageButton").style.display = "none"
$.ajax({
type: "GET",
url: "http://localhost:7700/api/Yuntech_in_car_table/location_name_1_-" + name + "-start_time-" + start_date + "-end_time-" + end_date,
data: {},
headers: {
'Authorization': token
},
contentType: "application/json",
headers: {
'Authorization': token
},
success: function (Model) {
console.log(Model)
All_Model = Model
set_data_license_plate_and_date(Model)
}
});
}
</script>
<!--透過進入位置搜尋-->
<script>
function location_select() {
var select_location = document.getElementById("location_select_id").value
console.log(select_location)
$.ajax({
type: "GET",
url: "http://localhost:7700/api/Yuntech_in_car_table/location-" + select_location,
data: {},
headers: {
'Authorization': token
},
contentType: "application/json",
headers: {
'Authorization': token
},
success: function (Model) {
//console.log(Model)
All_Model = Model
set_data(Model)
}
});
}
</script>
<script>
function export_excel_1() {
var name = document.getElementById("location_select_id").value;
var start_date = document.getElementById("start_date_id").value;
var end_date = document.getElementById("end_date_id").value;
// 檢查日期是否有效
if (!start_date || !end_date) {
alert("請選擇起始日期和結束日期");
return;
}
// 將日期格式
var start_time = new Date(start_date).toISOString();
var end_time = new Date(end_date).toISOString();
var url = `http://localhost:7700/api/Yuntech_in_car_table/location_name_2_-${name}-start_time-${start_date}-end_time-${end_date}-export_excel`;
fetch(url, {
method: 'GET',
headers: {
'Authorization': token
}
})
.then(response => {
// 確認響應的狀態碼是否為200成功
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.blob();
})
.then(blob => {
// 創建URL對象
const url = window.URL.createObjectURL(blob);
// 獲取當前時間並格式化
const currentTime = new Date();
const options = {
year: 'numeric',
month: '2-digit',
day: '2-digit',
hour: '2-digit',
minute: '2-digit',
hour12: false // 設置 24 小時制
};
const formattedTime = currentTime.toLocaleString('en-US', options).replace(/\//g, '-').replace(',', '').replace(/\s+/g, '_');
const filename = `時間段內進入車輛-${formattedTime}.xlsx`;
const a = document.createElement('a');
a.href = url;
a.download = filename;
a.click();
window.URL.revokeObjectURL(url);
})
.catch(error => {
console.error('There was a problem with your fetch operation:', error);
});
}
</script>
<!--輸出總EXCEL-->
<script>
function export_excel() {
fetch('http://localhost:7700/api/Yuntech_in_car_table/export-all_excel', {
method: 'GET',
headers: {
'Authorization': token
}
})
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.blob();
})
.then(blob => {
const url = window.URL.createObjectURL(blob);
const currentTime = new Date().toISOString().replace(/[-:]/g, "").replace(/\.\d{3}/g, "");
const filename = `總進入車輛-${currentTime}.xlsx`;
const a = document.createElement('a');
a.href = url;
a.download = filename;
a.click();
window.URL.revokeObjectURL(url);
})
.catch(error => {
console.error('There was a problem with your fetch operation:', error);
});
}
</script>
<!--檢查token-->
<script>
var token
function token_check() {
token = localStorage.getItem('token_park_space');
console.log(token)
$.ajax({
type: "GET",
url: 'http://localhost: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://localhost: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://localhost: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>