交接秉棋_v1

This commit is contained in:
B10912128 2024-08-14 16:11:56 +08:00
parent 31b25bb5c8
commit dc5a8a456f
14 changed files with 1156 additions and 52 deletions

View File

@ -104,6 +104,10 @@ namespace Parking_spaces.Controllers
{ {
return View(); return View();
} }
public IActionResult Engineering_EL125_car()
{
return View();
}
} }

View File

@ -27,5 +27,10 @@ namespace Parking_spaces.Controllers
{ {
return View(); return View();
} }
public IActionResult Manager_parking_user_list_index()
{
return View();
}
} }
} }

View File

@ -29,7 +29,7 @@ namespace Parking_spaces.Controllers
_httpClient.DefaultRequestHeaders.Authorization = new AuthenticationHeaderValue(token); _httpClient.DefaultRequestHeaders.Authorization = new AuthenticationHeaderValue(token);
// 构建 API 请求的 URL // 构建 API 请求的 URL
string apiUrl = "http://140.125.20.183:7710/Users/token"; string apiUrl = "http://140.125.20.183:7700/Users/token";
// 调用需要身份验证的 API // 调用需要身份验证的 API
HttpResponseMessage response = await _httpClient.GetAsync(apiUrl); HttpResponseMessage response = await _httpClient.GetAsync(apiUrl);

View File

@ -13,7 +13,7 @@
<PackageReference Include="Emgu.CV" Version="4.7.0.5276" /> <PackageReference Include="Emgu.CV" Version="4.7.0.5276" />
<PackageReference Include="Microsoft.AspNetCore.Authentication.JwtBearer" Version="6.0.16" /> <PackageReference Include="Microsoft.AspNetCore.Authentication.JwtBearer" Version="6.0.16" />
<PackageReference Include="Microsoft.VisualStudio.Azure.Containers.Tools.Targets" Version="1.17.2" /> <PackageReference Include="Microsoft.VisualStudio.Azure.Containers.Tools.Targets" Version="1.17.2" />
<PackageReference Include="Microsoft.VisualStudio.Web.CodeGeneration.Design" Version="6.0.16" /> <PackageReference Include="Microsoft.VisualStudio.Web.CodeGeneration.Design" Version="6.0.17" />
<PackageReference Include="OpenCvSharp4" Version="4.7.0.20230115" /> <PackageReference Include="OpenCvSharp4" Version="4.7.0.20230115" />
<PackageReference Include="OpenCvSharp4.runtime.win" Version="4.7.0.20230115" /> <PackageReference Include="OpenCvSharp4.runtime.win" Version="4.7.0.20230115" />
<PackageReference Include="OpenCvSharp4.Windows" Version="4.7.0.20230115" /> <PackageReference Include="OpenCvSharp4.Windows" Version="4.7.0.20230115" />

View File

@ -0,0 +1,257 @@

@{
ViewData["Title"] = "Engineering_EL125_car";
Layout = "~/Views/Shared/_Layout_Engineering.cshtml";
}
<h1>Engineering_EL125_car</h1>
<div class="size2">
<button class="btn btn-primary" onclick="create_user()">新增成員</button>
<table class="table">
<thead>
<tr>
<th>
車牌號碼
</th>
<th></th>
</tr>
</thead>
<tbody id="demo">
</tbody>
</table>
</div>
<!--新增使用者-->
<div>
<dialog id="add_user_view" style="width:80%">
<div class="container form-container">
<div class="row">
<div class="col-12 text-right">
<button class="btn btn-danger" onclick="add_user_view.close();">關閉</button>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="form-group">
<label for="add_user_license_plate_number_text_id">車牌號碼:</label>
<input type="text" class="form-control" placeholder="請輸入車牌 ex:ABC4321" id="add_user_license_plate_number_text_id" />
</div>
</div>
</div>
<div class="row mt-3">
<div class="col-12 text-right">
<button class="btn btn-success" onclick="post_user()">上傳</button>
</div>
</div>
</div>
</dialog>
</div>
<!--新增成員-->
<script>
function create_user() {
//document.getElementById("add_user_name_text_id").value = "";
document.getElementById("add_user_license_plate_number_text_id").value = "";
add_user_view.showModal()
}
function post_user() {
var license_plate_number = document.getElementById("add_user_license_plate_number_text_id").value;
var user_state_check = 'True'
var obj = { license_plate_number: license_plate_number }
console.log(obj)
var stringify_obj = JSON.stringify(obj);
$.ajax({
type: "POST",
url: "http://140.125.20.183:7700/api/El125_car_table",
data: stringify_obj,
contentType: "application/json",
headers: {
'Authorization': token
},
success: function (msg) {
console.log(msg)
if (msg == 'ok') {
add_user_view.close()
alert("上傳完成");
get_data()
}
if (msg == '車牌重複') {
alert("車牌重複");
}
//test_upload_bt_2()
//wait_view()
}
});
}
</script>
<!--設置資料-->
<script>
function set_data(Model) {
console.log(Model)
table = "<tr>";
//console.log(Model.length)
if (Model.length > 0) {
for (var i = 0; i < Model.length; i++) {
table += "<td id='" + Model[i].license_plate_number + "_total'>" + Model[i].license_plate_number + "</td>"
/*
if (Model[i].user_state_check == "True") {
table += "<td>" + "ok" + "</td>"
}
else {
table += "<td>" + "Not ok" + "</td>"
}*/
table += "<td>" + '<button class="btn btn-danger" onclick="delet_data(' + "'" + Model[i].license_plate_number + "'" + ')">刪除</button>' + "</td>"
/*table += '<button class="btn btn-danger " onclick="delet_data(' + "'" + Model[i].user_license_plate_number +"'"+ ')">刪除</button>'*/
table += "</tr>"
table += "<tr>"
}
}
document.getElementById("demo").innerHTML = table
}
</script>
<!--獲取資料-->
<script>
function get_data() {
$.ajax({
type: "GET",
url: "http://140.125.20.183:7700/api/El125_car_table",
data: {},
headers: {
'Authorization': token
},
contentType: "application/json",
headers: {
'Authorization': token
},
success: function (Model) {
//console.log(Model)
set_data(Model)
}
});
}
</script>
<!--刪除資料-->
<script>
function delet_data(license_plate_number) {
$.ajax({
type: "DELETE",
url: "http://140.125.20.183:7700/api/El125_car_table/" + license_plate_number,
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 == "engineer") {
get_data()
}
else {
window.location.href = '/';
}
}
});
}
</script>
<!--開機自啟-->
<script>
window.onload = token_check;
</script>

View File

@ -235,8 +235,37 @@
</div> </div>
</div> </div>
</div> </div>
<br /> <br />
<div class="row">
<!-- 校園月租臨停數 -->
<div class="col-xl-8 col-lg-8">
<div class="card shadow mb-8">
<!-- Card Header - Dropdown -->
<div class="card-header py-3">
<h6 class="m-0 font-weight-bold text-primary">
校園當前車流量
<button class="btn btn-info btn-circle btn-sm" style="float:right; background-image: url('/image/icon/F5.png'); background-size: cover;" onclick="get_monthly_rent_data()"></button>
</h6>
</div>
<!-- Card Body -->
<div>
<table class="table">
<thead>
<tr>
<th>類別</th>
<th>數量</th>
<th></th>
</tr>
</thead>
<tbody id="monthly_table"></tbody>
</table>
</div>
</div>
</div>
</div>
<!--彈跳視窗--> <!--彈跳視窗-->
@ -626,6 +655,78 @@
} }
</script> </script>
<!--獲取月租臨停資料-->
<script>
function get_monthly_rent_data() {
$.ajax({
type: "GET",
url: "http://140.125.20.183:7700/api/Yuntech_monthly_rent_number",
headers: {
'Authorization': token
},
contentType: "application/json",
success: function (Model) {
console.log(Model)
set_monthly_data(Model);
},
error: function (xhr, status, error) {
console.error("獲取數據失敗:", error);
}
});
}
</script>
<!--放置月租臨停資料-->
<script>
function set_monthly_data(Model) {
var table = "<tr>";
if (Model.length > 0) {
for (var i = 0; i < Model.length; i++) {
if (Model[i].category != null) {
table += "<td>" + Model[i].category + "</td>"
table += "<td>" + '<input type="text" id = "parking_space_amount_id" value =' + Model[i].number + ' />' + "</td > "
table += "<td>" + '<button class="btn btn-outline-warning " onclick="Update_monthly_rent_number(' + "'" + i + "'" + ')">更新並上傳</button>'
}
table += "</tr>"
table += "<tr>"
}
}
document.getElementById("monthly_table").innerHTML = table;
}
</script>
<!--更新剩餘車位資料-->
<script>
function Update_monthly_rent_number(num) {
var Row = $('#monthly_table tr:eq(' + num + ')');
var category = Row.find('td:eq(0)').text();
var number = Row.find('td:eq(1) input').val();
console.log(category, number);
var data = {
"category": category,
"number": number
}
var stringify_obj = JSON.stringify(data);
$.ajax({
type: "PUT",
url: "http://140.125.20.183:7700/api/Yuntech_monthly_rent_number/" + category,
data: stringify_obj,
headers: {
'Authorization': token
},
contentType: "application/json",
success: function (Model) {
window.alert("更新成功")
}
});
}
</script>
<!--獲取總車位資料--> <!--獲取總車位資料-->
<script> <script>
function get_yuntech_parking_data() { function get_yuntech_parking_data() {
@ -1132,6 +1233,7 @@
get_violation_data_1() get_violation_data_1()
get_algorithm_data() get_algorithm_data()
get_LED_data() get_LED_data()
get_monthly_rent_data()
get_RTSP_data() get_RTSP_data()
get_in_yuntech_data_1() get_in_yuntech_data_1()
get_yuntech_parking_data() get_yuntech_parking_data()

View File

@ -6,8 +6,13 @@
<h1>校內停車場使用者名單</h1> <h1>校內停車場月租名單</h1>
<!--上傳excel檔按鍵-->
<form id="uploadForm" enctype="multipart/form-data">
<input type="file" id="fileInput" name="file" accept=".xlsx, .xls" />
<button type="submit">上傳</button>
</form>
<div class="size2"> <div class="size2">
<button class="btn btn-primary" onclick="create_user()">新增成員</button> <button class="btn btn-primary" onclick="create_user()">新增成員</button>
@ -120,8 +125,39 @@
</script> </script>
<!--上傳excel-->
<script>
const api_url = 'http://140.125.20.183:7700'; // 定义 api_url
document.getElementById('uploadForm').onsubmit = function (event) {
event.preventDefault();
const formData = new FormData();
const fileInput = document.getElementById('fileInput');
if (fileInput.files.length === 0) {
alert("Please select a file!");
return;
}
formData.append("file", fileInput.files[0]);
$.ajax({
url: api_url + '/api/Yuntech_parking_user_list/excel_upload',
type: 'POST',
data: formData,
contentType: false, // 必须设置为 false以便 jQuery 不会自动设置 contentType
processData: false, // 必须设置为 false以便 jQuery 不会自动处理 FormData
headers: {
'Authorization': token // 添加 Authorization 标头
},
success: function (response) {
alert("檔案上傳成功!");
},
error: function (xhr, status, error) {
alert("File upload failed: " + xhr.responseText);
console.error("Upload failed: " + status + ", " + error);
}
});
};
</script>
<!--設置資料--> <!--設置資料-->
@ -141,8 +177,8 @@
else { else {
table += "<td>" + "Not ok" + "</td>" table += "<td>" + "Not ok" + "</td>"
}*/ }*/
table += "<td>" + '<button class="btn btn-outline-success" onclick="detail_data(' + "'" + Model[i].user_license_plate_number + "'" + ')">詳細</button>' table += "<td>" + '<button class="btn btn-danger" onclick="delet_data(' + "'" + Model[i].user_license_plate_number + "'" + ')">刪除</button>' + "</td>"
table += '<button class="btn btn-danger " onclick="delet_data(' + "'" + Model[i].user_license_plate_number +"'"+ ')">刪除</button>' + "</td>" /*table += '<button class="btn btn-danger " onclick="delet_data(' + "'" + Model[i].user_license_plate_number +"'"+ ')">刪除</button>'*/
table += "</tr>" table += "</tr>"
table += "<tr>" table += "<tr>"

View File

@ -7,11 +7,34 @@
<h1>進入車輛</h1> <h1>進入車輛</h1>
<div class="size2"> <div class="size2">
起始時間 : <input type="date" id="start_date_id"> 起始時間 : <input type="date" id="start_date_id">
結束時間 : <input type="date" id="end_date_id"> 結束時間 : <input type="date" id="end_date_id">
<button style="height:30px; " class="btn btn-outline-secondary" onclick="serch_date_click()">搜尋</button> <button style="height:30px; " class="btn btn-outline-secondary" onclick="serch_date_click()">搜尋</button>
<!--下載時間段進入車輛excel檔按鍵-->
時間段內進入車輛 :
<th>
<button class="btn btn-outline-info" onclick="export_excel_1()" style="position: relative;">
<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>
<!--下載總進入車輛excel檔按鍵-->
總進入車輛 :
<th>
<button class="btn btn-outline-info" onclick="export_excel()" style="position: relative;">
<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>
<button style="height:30px;float:right " class="btn btn-outline-secondary" onclick="serch_click()">搜尋</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" /> <input type="text" style="float:right" placeholder="請輸入車牌 ex:ABC4321" id="serch_text_id" />
<br/> <br/>
@ -44,8 +67,9 @@
<div class="row"> <div class="row">
<div class="col-xl-1 col-lg-1"> <div class="col-xl-1 col-lg-1">
<div> <div>
<button class="btn btn-outline-secondary" onclick="fetchData_Up()">上一頁</button> <button id="lastPageButton" class="btn btn-outline-secondary" onclick="fetchData_Up()">上一頁</button>
</div> </div>
</div> </div>
<div class="col-xl-10 col-lg-10"> <div class="col-xl-10 col-lg-10">
@ -53,7 +77,7 @@
</div> </div>
<div class="col-xl-1 col-lg-1"> <div class="col-xl-1 col-lg-1">
<div> <div>
<button class="btn btn-outline-secondary" onclick="fetchData_Down()">下一頁</button> <button id="nextPageButton" class="btn btn-outline-secondary" onclick="fetchData_Down()">下一頁</button>
</div> </div>
</div> </div>
@ -310,10 +334,10 @@
<!--車輛詳細--> <!--車輛詳細-->
<script> <script>
function detail_data(location_name, car_serial_number, time) { 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 serial_number = car_serial_number
// 發送AJAX GET請求
$.ajax({ $.ajax({
type: "GET", type: "GET",
url: "http://140.125.20.183:7700/api/Yuntech_in_car_table/location_name-" + location_name + "-time-" + time, url: "http://140.125.20.183:7700/api/Yuntech_in_car_table/location_name-" + location_name + "-time-" + time,
@ -323,34 +347,57 @@
'Authorization': token 'Authorization': token
}, },
success: function (Model) { success: function (Model) {
// 在控制台列印返回的模型資料
console.log(Model) console.log(Model)
// 設定固定車輛圖片
//let fixed_car_img = "<img style='width:100%' src='~/bootstrap_1/img/Yuntech.png'>";
// 檢查是否有離開時間
if (Model.out_time == null) { if (Model.out_time == null) {
// 如果沒有離開時間,顯示進入時間和車輛圖像
table = "<tr>"; table = "<tr>";
table += "<td>" + Model.location + "</td>" table += "<td>" + Model.location + "</td>";
table += "<td>" + '<input type="text" id = "license_plate_number_text_id" value="' + Model.license_plate_number + '"/>' + "</td>" table += "<td>" + '<input type="text" id="license_plate_number_text_id" value="' + Model.license_plate_number + '"/>' + "</td>";
//table += "<td>" + "</td>" // 添加固定車輛圖片
//table += "<td>" + "</td>" if (Model.car_img == null || Model.car_img == "") {
table += "<td>" + "<img src=" + Model.car_img + ' style="width:80%"' + ">" + "</td>" table += "<td>" + "<img src='" + "/bootstrap_1/img/maxresdefault.jpg" + "' style='width:80%' />" + "</td>";
table += "<td id = 'create_data_time_id' >" + Model.in_time + "</td>" } else {
document.getElementById("detail_car_data").innerHTML = table table += "<td>" + "<img src='" + Model.car_img + "' style='width:80%' />" + "</td>";
} }
else {
table += "<td id='create_data_time_id'>" + Model.in_time + "</td>";
document.getElementById("detail_car_data").innerHTML = table;
} else {
// 如果有離開時間,顯示進入和離開時間以及車輛圖像
table = "<tr>"; table = "<tr>";
table += "<td>" + Model.location + "</td>" table += "<td>" + Model.location + "</td>";
table += "<td>" + '<input type="text" id = "license_plate_number_text_id" value="' + Model.license_plate_number + '"/>' + "</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_img + ' style="width:40%"' + ">"+ " <img src=" + Model.out_car_img + ' style="width:40%"' + ">" + "</td>" if (Model.out_car_img == null || Model.out_car_img == "") {
table += "<td id = 'create_data_time_id' >" + "進入時間:" + Model.in_time + "<br/>"+"<br/>" + "出去時間: " + Model.out_time + "</td>" if (Model.car_img == null || Model.car_img == "") {
document.getElementById("detail_car_data").innerHTML = table 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>";
}
table += "<td id='create_data_time_id'>" + "進入時間:" + Model.in_time + "<br/><br/>" + "出去時間: " + Model.out_time + "</td>";
document.getElementById("detail_car_data").innerHTML = table;
} }
} }
}); });
// 顯示詳細資料的對話框
detail_car_data_view.showModal(); detail_car_data_view.showModal();
} }
</script> </script>
<!--透過車牌號碼搜尋--> <!--透過車牌號碼搜尋-->
<script> <script>
function serch_click() { function serch_click() {
@ -383,10 +430,17 @@
<!--透過日期搜尋紀錄--> <!--透過日期搜尋紀錄-->
<script> <script>
function serch_date_click() { function serch_date_click() {
var name = "大門口" var name = document.getElementById("location_select_id").value
var start_date = document.getElementById("start_date_id").value var start_date = document.getElementById("start_date_id").value
var end_date = document.getElementById("end_date_id").value var end_date = document.getElementById("end_date_id").value
console.log(start_date) console.log(start_date)
// 隱藏上一頁按鈕
document.getElementById("lastPageButton").style.display = "none"
// 隱藏下一頁按鈕
document.getElementById("nextPageButton").style.display = "none"
$.ajax({ $.ajax({
type: "GET", type: "GET",
url: "http://140.125.20.183:7700/api/Yuntech_in_car_table/location_name_1_-" + name + "-start_time-" + start_date + "-end_time-" + end_date, url: "http://140.125.20.183:7700/api/Yuntech_in_car_table/location_name_1_-" + name + "-start_time-" + start_date + "-end_time-" + end_date,
@ -403,9 +457,11 @@
All_Model = Model All_Model = Model
set_data_license_plate_and_date(Model) set_data_license_plate_and_date(Model)
} }
}); });
} }
</script> </script>
@ -437,6 +493,103 @@
</script> </script>
<!--輸出時間段內EXCEL-->
<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;
// 將日期格式轉換為後端期望的格式(如 'YYYY-MM-DDTHH:MM:SS'
var start_time = new Date(start_date).toISOString();
var end_time = new Date(end_date).toISOString();
// 構建請求URL
var url = "http://140.125.20.183:7700/api/Yuntech_in_car_table/location_name_2_-" + name + "-start_time-" + start_date + "-end_time-" + end_date + "-export_excel";
// 發送HTTP GET請求到Web API動作方法
fetch(url, {
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 export_excel() {
// 發送HTTP GET請求到Web API動作方法
fetch('http://140.125.20.183:7700/api/Yuntech_in_car_table/export-all_excel', {
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>
<!--檢查token--> <!--檢查token-->
<script> <script>
var token var token

View File

@ -109,6 +109,34 @@
<script src="/bootstrap_1/vendor/chart.js/Chart.min.js"></script> <script src="/bootstrap_1/vendor/chart.js/Chart.min.js"></script>
<div class="row">
<!-- 校園月租臨停數 -->
<div class="col-xl-8 col-lg-8">
<div class="card shadow mb-8">
<!-- Card Header - Dropdown -->
<div class="card-header py-3">
<h6 class="m-0 font-weight-bold text-primary">
校園當前車流量
<button class="btn btn-info btn-circle btn-sm" style="float:right; background-image: url('/image/icon/F5.png'); background-size: cover;" onclick="get_monthly_rent_data()"></button>
</h6>
</div>
<!-- Card Body -->
<div>
<table class="table">
<thead>
<tr>
<th>類別</th>
<th>數量</th>
<th></th>
</tr>
</thead>
<tbody id="monthly_table"></tbody>
</table>
</div>
</div>
</div>
</div>
<!--設定數據圖數據-每日車流量--> <!--設定數據圖數據-每日車流量-->
<script> <script>
function set_in_yuntech_table(labels, dailyTrafficData) { function set_in_yuntech_table(labels, dailyTrafficData) {
@ -253,6 +281,7 @@
get_in_yuntech_data_1() get_in_yuntech_data_1()
get_yuntech_parking_data() get_yuntech_parking_data()
get_LED_data() get_LED_data()
get_monthly_rent_data()
} }
</script> </script>
@ -392,6 +421,76 @@
} }
</script> </script>
<!--獲取月租臨停資料-->
<script>
function get_monthly_rent_data() {
$.ajax({
type: "GET",
url: "http://140.125.20.183:7700/api/Yuntech_monthly_rent_number",
headers: {
'Authorization': token
},
contentType: "application/json",
success: function (Model) {
console.log(Model)
set_monthly_data(Model);
},
error: function (xhr, status, error) {
console.error("獲取數據失敗:", error);
}
});
}
</script>
<!--放置月租臨停資料-->
<script>
function set_monthly_data(Model) {
var table = "<tr>";
if (Model.length > 0) {
for (var i = 0; i < Model.length; i++) {
if (Model[i].category != null) {
table += "<td>" + Model[i].category + "</td>"
table += "<td>" + '<input type="text" id = "parking_space_amount_id" value =' + Model[i].number + ' />' + "</td > "
table += "<td>" + '<button class="btn btn-outline-warning " onclick="Update_monthly_rent_number(' + "'" + i + "'" + ')">更新並上傳</button>'
}
table += "</tr>"
table += "<tr>"
}
}
document.getElementById("monthly_table").innerHTML = table;
}
</script>
<!--更新剩餘車位資料-->
<script>
function Update_monthly_rent_number(num) {
var Row = $('#monthly_table tr:eq(' + num + ')');
var category = Row.find('td:eq(0)').text();
var number = Row.find('td:eq(1) input').val();
console.log(category, number);
var data = {
"category": category,
"number": number
}
var stringify_obj = JSON.stringify(data);
$.ajax({
type: "PUT",
url: "http://140.125.20.183:7700/api/Yuntech_monthly_rent_number/" + category,
data: stringify_obj,
headers: {
'Authorization': token
},
contentType: "application/json",
success: function (Model) {
window.alert("更新成功")
}
});
}
</script>
<!--獲取總車位資料--> <!--獲取總車位資料-->
<script> <script>

View File

@ -0,0 +1,310 @@
@{
ViewData["Title"] = "Manager_parking_user_list_index";
Layout = "~/Views/Shared/_Layout_Manager.cshtml";
}
<h1>校內停車場月租名單</h1>
<!--上傳excel檔按鍵-->
<form id="uploadForm" enctype="multipart/form-data">
<input type="file" id="fileInput" name="file" accept=".xlsx, .xls" />
<button type="submit">上傳</button>
</form>
<div class="size2">
<button class="btn btn-primary" onclick="create_user()">新增成員</button>
<table class="table">
<thead>
<tr>
<th>
成員
</th>
<th>
車牌號碼
</th>
<!--
<th>
狀態確認
</th>-->
<th></th>
</tr>
</thead>
<tbody id="demo">
</tbody>
</table>
</div>
<!--新增使用者-->
<div>
<dialog id="add_user_view" style="width:80%">
<div class="container form-container">
<div class="row">
<div class="col-12 text-right">
<button class="btn btn-danger" onclick="add_user_view.close();">關閉</button>
</div>
</div>
<div class="row mt-3">
<div class="col-12">
<div class="form-group">
<label for="add_user_name_text_id">成員名稱:</label>
<input type="text" class="form-control" id="add_user_name_text_id" />
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="form-group">
<label for="add_user_license_plate_number_text_id">車牌號碼:</label>
<input type="text" class="form-control" placeholder="請輸入車牌 ex:ABC4321" id="add_user_license_plate_number_text_id" />
</div>
</div>
</div>
<div class="row mt-3">
<div class="col-12 text-right">
<button class="btn btn-success" onclick="post_user()">上傳</button>
</div>
</div>
</div>
</dialog>
</div>
<!--新增成員-->
<script>
function create_user() {
document.getElementById("add_user_name_text_id").value="";
document.getElementById("add_user_license_plate_number_text_id").value="";
add_user_view.showModal()
}
function post_user() {
var user_name = document.getElementById("add_user_name_text_id").value;
var license_plate_number = document.getElementById("add_user_license_plate_number_text_id").value;
var user_state_check = 'True'
var obj = { user_license_plate_number: license_plate_number, user_name: user_name, user_state_check: user_state_check }
var stringify_obj = JSON.stringify(obj);
$.ajax({
type: "POST",
url: "http://140.125.20.183:7700/api/Yuntech_parking_user_list",
data: stringify_obj,
contentType: "application/json",
headers: {
'Authorization': token
},
success: function (msg) {
console.log(msg)
if (msg == 'ok') {
add_user_view.close()
alert("上傳完成");
get_data()
}
if (msg == '車牌重複') {
alert("車牌重複");
}
//test_upload_bt_2()
//wait_view()
}
});
}
</script>
<!--上傳excel-->
<script>
const api_url = 'http://140.125.20.183:7700'; // 定义 api_url
document.getElementById('uploadForm').onsubmit = function (event) {
event.preventDefault();
const formData = new FormData();
const fileInput = document.getElementById('fileInput');
if (fileInput.files.length === 0) {
alert("Please select a file!");
return;
}
formData.append("file", fileInput.files[0]);
$.ajax({
url: api_url + '/api/Yuntech_parking_user_list/excel_upload',
type: 'POST',
data: formData,
contentType: false, // 必须设置为 false以便 jQuery 不会自动设置 contentType
processData: false, // 必须设置为 false以便 jQuery 不会自动处理 FormData
headers: {
'Authorization': token // 添加 Authorization 标头
},
success: function (response) {
alert("檔案上傳成功!");
},
error: function (xhr, status, error) {
alert("File upload failed: " + xhr.responseText);
console.error("Upload failed: " + status + ", " + error);
}
});
};
</script>
<!--設置資料-->
<script>
function set_data(Model) {
console.log(Model)
table = "<tr>";
//console.log(Model.length)
if (Model.length > 0) {
for (var i = 0; i < Model.length; i++) {
table += "<td>" + Model[i].user_name + "</td>"
table += "<td id='" + Model[i].user_license_plate_number + "_total'>" + Model[i].user_license_plate_number + "</td>"
/*
if (Model[i].user_state_check == "True") {
table += "<td>" + "ok" + "</td>"
}
else {
table += "<td>" + "Not ok" + "</td>"
}*/
table += "<td>" + '<button class="btn btn-danger" onclick="delet_data(' + "'" + Model[i].user_license_plate_number + "'" + ')">刪除</button>' + "</td>"
/*table += '<button class="btn btn-danger " onclick="delet_data(' + "'" + Model[i].user_license_plate_number +"'"+ ')">刪除</button>'*/
table += "</tr>"
table += "<tr>"
}
}
document.getElementById("demo").innerHTML = table
}
</script>
<!--刪除資料-->
<script>
function delet_data(license_plate_number) {
$.ajax({
type: "DELETE",
url: "http://140.125.20.183:7700/api/Yuntech_parking_user_list/" + license_plate_number,
data: {},
contentType: "application/json",
headers: {
'Authorization': token
},
success: function (msg) {
console.log(msg)
get_data()
}
});
}
</script>
<!--獲取資料-->
<script>
function get_data() {
$.ajax({
type: "GET",
url: "http://140.125.20.183:7700/api/Yuntech_parking_user_list",
data: {},
headers: {
'Authorization': token
},
contentType: "application/json",
headers: {
'Authorization': token
},
success: function (Model) {
//console.log(Model)
set_data(Model)
}
});
}
</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)
//alert("token成功")
token_check = "true"
from_token_import_id()
},
error: function (xhr) {
token_check = "false"
//alert("token失敗")
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>

View File

@ -12,6 +12,24 @@
結束時間 : <input type="date" id="end_date_id"> 結束時間 : <input type="date" id="end_date_id">
<button style="height:30px; " class="btn btn-outline-secondary" onclick="serch_date_click()">搜尋</button> <button style="height:30px; " class="btn btn-outline-secondary" onclick="serch_date_click()">搜尋</button>
<!--下載時間段進入車輛excel檔按鍵-->
時間段內進入車輛 :
<th>
<button class="btn btn-outline-info" onclick="export_excel_1()" style="position: relative;">
<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>
<!--下載進入車輛excel檔按鍵-->
總進入車輛 :
<th>
<button class="btn btn-outline-info" onclick="export_excel()" style="position: relative;">
<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>
<button style="height:30px;float:right " class="btn btn-outline-secondary" onclick="serch_click()">搜尋</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" /> <input type="text" style="float:right" placeholder="請輸入車牌 ex:ABC4321" id="serch_text_id" />
<br /> <br />
@ -46,7 +64,7 @@
<div class="row"> <div class="row">
<div class="col-xl-1 col-lg-1"> <div class="col-xl-1 col-lg-1">
<div> <div>
<button class="btn btn-outline-secondary" onclick="fetchData_Up()">上一頁</button> <button id="lastPageButton" class="btn btn-outline-secondary" onclick="fetchData_Up()">上一頁</button>
</div> </div>
</div> </div>
@ -54,7 +72,7 @@
</div> </div>
<div class="col-xl-1 col-lg-1"> <div class="col-xl-1 col-lg-1">
<div> <div>
<button class="btn btn-outline-secondary" onclick="fetchData_Down()">下一頁</button> <button id="nextPageButton" class="btn btn-outline-secondary" onclick="fetchData_Down()">下一頁</button>
</div> </div>
</div> </div>
@ -309,10 +327,10 @@
<!--車輛詳細--> <!--車輛詳細-->
<script> <script>
function detail_data(location_name, car_serial_number, time) { 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 serial_number = car_serial_number
// 發送AJAX GET請求
$.ajax({ $.ajax({
type: "GET", type: "GET",
url: "http://140.125.20.183:7700/api/Yuntech_in_car_table/location_name-" + location_name + "-time-" + time, url: "http://140.125.20.183:7700/api/Yuntech_in_car_table/location_name-" + location_name + "-time-" + time,
@ -322,33 +340,51 @@
'Authorization': token 'Authorization': token
}, },
success: function (Model) { success: function (Model) {
// 在控制台列印返回的模型資料
console.log(Model) console.log(Model)
// 設定固定車輛圖片
//let fixed_car_img = "<img style='width:100%' src='~/bootstrap_1/img/Yuntech.png'>";
// 檢查是否有離開時間
if (Model.out_time == null) { if (Model.out_time == null) {
// 如果沒有離開時間,顯示進入時間和車輛圖像
table = "<tr>"; table = "<tr>";
table += "<td>" + Model.location + "</td>" table += "<td>" + Model.location + "</td>";
table += "<td>" + '<input type="text" id = "license_plate_number_text_id" value="' + Model.license_plate_number + '"/>' + "</td>" table += "<td>" + '<input type="text" id="license_plate_number_text_id" value="' + Model.license_plate_number + '"/>' + "</td>";
//table += "<td>" + "</td>" // 添加固定車輛圖片
//table += "<td>" + "</td>" if (Model.car_img == null || Model.car_img == "") {
table += "<td>" + "<img src=" + Model.car_img + ' style="width:80%"' + ">" + "</td>" table += "<td>" + "<img src='" + "/bootstrap_1/img/maxresdefault.jpg" + "' style='width:80%' />" + "</td>";
table += "<td id = 'create_data_time_id' >" + Model.in_time + "</td>" } else {
document.getElementById("detail_car_data").innerHTML = table table += "<td>" + "<img src='" + Model.car_img + "' style='width:80%' />" + "</td>";
} }
else {
table += "<td id='create_data_time_id'>" + Model.in_time + "</td>";
document.getElementById("detail_car_data").innerHTML = table;
} else {
// 如果有離開時間,顯示進入和離開時間以及車輛圖像
table = "<tr>"; table = "<tr>";
table += "<td>" + Model.location + "</td>" table += "<td>" + Model.location + "</td>";
table += "<td>" + '<input type="text" id = "license_plate_number_text_id" value="' + Model.license_plate_number + '"/>' + "</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_img + ' style="width:40%"' + ">" + " <img src=" + Model.out_car_img + ' style="width:40%"' + ">" + "</td>" if (Model.car_img == null || Model.car_img == "") {
table += "<td id = 'create_data_time_id' >" + "進入時間:" + Model.in_time + "<br/>" + "<br/>" + "出去時間: " + Model.out_time + "</td>" table += "<td>" + "<img src='" + "/bootstrap_1/img/maxresdefault.jpg" + "' style='width:40%' />" + "<img src='" + "/bootstrap_1/img/maxresdefault.jpg" + "' style='width:40%' />" + "</td>";
document.getElementById("detail_car_data").innerHTML = table } else {
table += "<td>" + "<img src='" + Model.car_img + "' style='width:40%' />" + "<img src='" + Model.out_car_img + "' style='width:40%' />" + "</td>";
}
table += "<td id='create_data_time_id'>" + "進入時間:" + Model.in_time + "<br/><br/>" + "出去時間: " + Model.out_time + "</td>";
document.getElementById("detail_car_data").innerHTML = table;
} }
} }
}); });
// 顯示詳細資料的對話框
detail_car_data_view.showModal(); detail_car_data_view.showModal();
} }
</script> </script>
<!--透過車牌號碼搜尋--> <!--透過車牌號碼搜尋-->
<script> <script>
function serch_click() { function serch_click() {
@ -378,10 +414,17 @@
<!--透過日期搜尋紀錄--> <!--透過日期搜尋紀錄-->
<script> <script>
function serch_date_click() { function serch_date_click() {
var name = "大門口" var name = document.getElementById("location_select_id").value
var start_date = document.getElementById("start_date_id").value var start_date = document.getElementById("start_date_id").value
var end_date = document.getElementById("end_date_id").value var end_date = document.getElementById("end_date_id").value
console.log(start_date) console.log(start_date)
// 隱藏上一頁按鈕
document.getElementById("lastPageButton").style.display = "none"
// 隱藏下一頁按鈕
document.getElementById("nextPageButton").style.display = "none"
$.ajax({ $.ajax({
type: "GET", type: "GET",
url: "http://140.125.20.183:7700/api/Yuntech_in_car_table/location_name_1_-" + name + "-start_time-" + start_date + "-end_time-" + end_date, url: "http://140.125.20.183:7700/api/Yuntech_in_car_table/location_name_1_-" + name + "-start_time-" + start_date + "-end_time-" + end_date,
@ -427,6 +470,97 @@
} }
</script> </script>
<!--輸出時間段內EXCEL-->
<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;
// 將日期格式轉換為後端期望的格式(如 'YYYY-MM-DDTHH:MM:SS'
var start_time = new Date(start_date).toISOString();
var end_time = new Date(end_date).toISOString();
// 構建請求URL
var url = "http://140.125.20.183:7700/api/Yuntech_in_car_table/location_name_2_-" + name + "-start_time-" + start_date + "-end_time-" + end_date + "-export_excel";
// 發送HTTP GET請求到Web API動作方法
fetch(url, {
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 export_excel() {
// 發送HTTP GET請求到Web API動作方法
fetch('http://140.125.20.183:7700/api/Yuntech_in_car_table/export-all_excel', {
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>
<!--檢查token--> <!--檢查token-->
<script> <script>

View File

@ -80,7 +80,8 @@
<a class="collapse-item" asp-controller="Engineering" asp-action="Engineering_Violation"> 違規區域</a> <a class="collapse-item" asp-controller="Engineering" asp-action="Engineering_Violation"> 違規區域</a>
<a class="collapse-item" asp-controller="Engineering" asp-action="Yuntech_in_car"> 進入車輛</a> <a class="collapse-item" asp-controller="Engineering" asp-action="Yuntech_in_car"> 進入車輛</a>
<a class="collapse-item" asp-controller="Engineering" asp-action="Map_RTSP"> 即時影像</a> <a class="collapse-item" asp-controller="Engineering" asp-action="Map_RTSP"> 即時影像</a>
<a class="collapse-item" asp-controller="Engineering" asp-action="Engineering_parking_user_list_index"> 名單 </a> <a class="collapse-item" asp-controller="Engineering" asp-action="Engineering_parking_user_list_index"> 月租名單 </a>
<a class="collapse-item" asp-controller="Engineering" asp-action="Engineering_EL125_car"> 私人名單 </a>
</div> </div>
</div> </div>
</li> </li>

View File

@ -78,6 +78,9 @@
<a class="collapse-item" asp-controller="Manager" asp-action="Manager_Violation"> 違規區域</a> <a class="collapse-item" asp-controller="Manager" asp-action="Manager_Violation"> 違規區域</a>
<a class="collapse-item" asp-controller="Manager" asp-action="Yuntech_in_car"> 進入車輛</a> <a class="collapse-item" asp-controller="Manager" asp-action="Yuntech_in_car"> 進入車輛</a>
<a class="collapse-item" asp-controller="Manager" asp-action="Map_RTSP"> 即時影像</a> <a class="collapse-item" asp-controller="Manager" asp-action="Map_RTSP"> 即時影像</a>
<a class="collapse-item" asp-controller="Manager" asp-action="Manager_parking_user_list_index"> 月租名單 </a>
</div> </div>
</div> </div>
</li> </li>

Binary file not shown.

After

Width:  |  Height:  |  Size: 43 KiB