qi_0527/parking-html
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

交接秉棋_v1

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
Parking_spaces/Controllers/EngineeringController.cs
View File

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

5
Parking_spaces/Controllers/ManagerController.cs
View File

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

2
Parking_spaces/Controllers/Park_spacesController.cs
View File

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

2
Parking_spaces/Parking_spaces.csproj
View File

@ -13,7 +13,7 @@
<PackageReference Include="Emgu.CV" Version="4.7.0.5276" />
<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.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.runtime.win" Version="4.7.0.20230115" />
<PackageReference Include="OpenCvSharp4.Windows" Version="4.7.0.20230115" />

257
Parking_spaces/Views/Engineering/Engineering_EL125_car.cshtml Normal file
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>

102
Parking_spaces/Views/Engineering/Engineering_Index.cshtml
View File

@ -235,8 +235,37 @@
</div>
</div>
</div>
<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>
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>
function get_yuntech_parking_data() {
@ -1132,6 +1233,7 @@
get_violation_data_1()
get_algorithm_data()
get_LED_data()
get_monthly_rent_data()
get_RTSP_data()
get_in_yuntech_data_1()
get_yuntech_parking_data()

42
Parking_spaces/Views/Engineering/Engineering_parking_user_list_index.cshtml
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">
<button class="btn btn-primary" onclick="create_user()">新增成員</button>
@ -120,8 +125,39 @@
</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 {
table += "<td>" + "Not ok" + "</td>"
}*/
table += "<td>" + '<button class="btn btn-outline-success" onclick="detail_data(' + "'" + Model[i].user_license_plate_number + "'" + ')">詳細</button>'
table += '<button class="btn btn-danger " onclick="delet_data(' + "'" + Model[i].user_license_plate_number +"'"+ ')">刪除</button>' + "</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>"

199
Parking_spaces/Views/Engineering/Yuntech_in_car.cshtml
View File

@ -7,11 +7,34 @@
<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>
<!--下載時間段進入車輛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>
<input type="text" style="float:right" placeholder="請輸入車牌 ex:ABC4321" id="serch_text_id" />
<br/>
@ -44,16 +67,17 @@
<div class="row">
<div class="col-xl-1 col-lg-1">
<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 class="col-xl-10 col-lg-10">
</div>
<div class="col-xl-1 col-lg-1">
<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>
@ -310,10 +334,10 @@
<!--車輛詳細-->
<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 GET請求
$.ajax({
type: "GET",
url: "http://140.125.20.183:7700/api/Yuntech_in_car_table/location_name-" + location_name + "-time-" + time,
@ -323,34 +347,57 @@
'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>" + Model.location + "</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:80%"' + ">" + "</td>"
table += "<td id = 'create_data_time_id' >" + Model.in_time + "</td>"
document.getElementById("detail_car_data").innerHTML = table
}
else {
table = "<tr>";
table += "<td>" + Model.location + "</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>"
table += "<td id = 'create_data_time_id' >" + "進入時間:" + Model.in_time + "<br/>"+"<br/>" + "出去時間: " + Model.out_time + "</td>"
document.getElementById("detail_car_data").innerHTML = table
table += "<td>" + 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>";
}
table += "<td id='create_data_time_id'>" + Model.in_time + "</td>";
document.getElementById("detail_car_data").innerHTML = table;
} else {
// 如果有離開時間，顯示進入和離開時間以及車輛圖像
table = "<tr>";
table += "<td>" + Model.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>";
}
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();
}
</script>
<!--透過車牌號碼搜尋-->
<script>
function serch_click() {
@ -383,10 +430,17 @@
<!--透過日期搜尋紀錄-->
<script>
function serch_date_click() {
var name = "大門口"
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://140.125.20.183:7700/api/Yuntech_in_car_table/location_name_1_-" + name + "-start_time-" + start_date + "-end_time-" + end_date,
@ -403,6 +457,8 @@
All_Model = Model
set_data_license_plate_and_date(Model)
}
});
@ -437,6 +493,103 @@
</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-->
<script>
var token

99
Parking_spaces/Views/Manager/Manager_Index.cshtml
View File

@ -109,6 +109,34 @@
<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>
function set_in_yuntech_table(labels, dailyTrafficData) {
@ -253,6 +281,7 @@
get_in_yuntech_data_1()
get_yuntech_parking_data()
get_LED_data()
get_monthly_rent_data()
}
</script>
@ -392,6 +421,76 @@
}
</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>

310
Parking_spaces/Views/Manager/Manager_parking_user_list_index.cshtml Normal file
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>

176
Parking_spaces/Views/Manager/Yuntech_in_car.cshtml
View File

@ -12,6 +12,24 @@
結束時間 : <input type="date" id="end_date_id">
<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>
<input type="text" style="float:right" placeholder="請輸入車牌 ex:ABC4321" id="serch_text_id" />
<br />
@ -46,7 +64,7 @@
<div class="row">
<div class="col-xl-1 col-lg-1">
<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>
@ -54,7 +72,7 @@
</div>
<div class="col-xl-1 col-lg-1">
<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>
@ -309,10 +327,10 @@
<!--車輛詳細-->
<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 GET請求
$.ajax({
type: "GET",
url: "http://140.125.20.183:7700/api/Yuntech_in_car_table/location_name-" + location_name + "-time-" + time,
@ -322,33 +340,51 @@
'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>" + Model.location + "</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:80%"' + ">" + "</td>"
table += "<td id = 'create_data_time_id' >" + Model.in_time + "</td>"
document.getElementById("detail_car_data").innerHTML = table
table += "<td>" + 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>";
}
else {
table += "<td id='create_data_time_id'>" + Model.in_time + "</td>";
document.getElementById("detail_car_data").innerHTML = table;
} else {
// 如果有離開時間，顯示進入和離開時間以及車輛圖像
table = "<tr>";
table += "<td>" + Model.location + "</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>"
table += "<td id = 'create_data_time_id' >" + "進入時間:" + Model.in_time + "<br/>" + "<br/>" + "出去時間: " + Model.out_time + "</td>"
document.getElementById("detail_car_data").innerHTML = table
table += "<td>" + 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: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();
}
</script>
<!--透過車牌號碼搜尋-->
<script>
function serch_click() {
@ -378,10 +414,17 @@
<!--透過日期搜尋紀錄-->
<script>
function serch_date_click() {
var name = "大門口"
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://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>
<!--輸出時間段內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-->
<script>

3
Parking_spaces/Views/Shared/_Layout_Engineering.cshtml
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="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="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>
</li>

3
Parking_spaces/Views/Shared/_Layout_Manager.cshtml
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="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="Manager_parking_user_list_index"> 月租名單 </a>
</div>
</div>
</li>

BIN
Parking_spaces/wwwroot/bootstrap_1/img/maxresdefault.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 43 KiB