修改bug進出車輛與版本資訊管理
This commit is contained in:
parent
fae5651f14
commit
51b69454a1
@ -112,6 +112,14 @@ namespace Parking_spaces.Controllers
|
||||
{
|
||||
return View();
|
||||
}
|
||||
public IActionResult Yuntech_all_car_table()
|
||||
{
|
||||
return View();
|
||||
}
|
||||
public IActionResult Version()
|
||||
{
|
||||
return View();
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
@ -37,5 +37,13 @@ namespace Parking_spaces.Controllers
|
||||
{
|
||||
return View();
|
||||
}
|
||||
public IActionResult Yuntech_all_car_table()
|
||||
{
|
||||
return View();
|
||||
}
|
||||
public IActionResult Version()
|
||||
{
|
||||
return View();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -20,4 +20,15 @@
|
||||
<PackageReference Include="System.IdentityModel.Tokens.Jwt" Version="7.3.1" />
|
||||
</ItemGroup>
|
||||
|
||||
<ItemGroup>
|
||||
<Content Update="Views\Engineering\Version.cshtml">
|
||||
<ExcludeFromSingleFile>true</ExcludeFromSingleFile>
|
||||
<CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
|
||||
</Content>
|
||||
<Content Update="Views\Manager\Version.cshtml">
|
||||
<ExcludeFromSingleFile>true</ExcludeFromSingleFile>
|
||||
<CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
|
||||
</Content>
|
||||
</ItemGroup>
|
||||
|
||||
</Project>
|
||||
|
||||
335
Parking_spaces/Views/Engineering/Version.cshtml
Normal file
335
Parking_spaces/Views/Engineering/Version.cshtml
Normal file
@ -0,0 +1,335 @@
|
||||
@{
|
||||
ViewData["Title"] = "版本資訊";
|
||||
Layout = "~/Views/Shared/_Layout_Engineering.cshtml";
|
||||
}
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-TW">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>@ViewData["Title"]</title>
|
||||
<link rel="stylesheet" href="/bootstrap_1/css/bootstrap.min.css">
|
||||
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
||||
<style>
|
||||
.table th, .table td {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#loading {
|
||||
display: none;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
justify-content: center;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container mt-3">
|
||||
<h1>版本資訊管理</h1>
|
||||
<div class="card shadow mb-4">
|
||||
<div class="card-header d-flex justify-content-between align-items-center">
|
||||
<h6 class="m-0 font-weight-bold text-primary">修正版本資訊內容</h6>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="mb-3">
|
||||
<label for="versionTime">修正版本日期:</label>
|
||||
<input type="datetime-local" id="versionTime" class="form-control" />
|
||||
<label for="versionName">修正人:</label>
|
||||
<input type="text" id="versionName" class="form-control" placeholder="輸入姓名" />
|
||||
<label for="versionContent">修正內容:</label>
|
||||
<textarea id="versionContent" class="form-control" rows="3" style="resize: none; overflow: auto;" placeholder="輸入內容"></textarea> <!-- 自動換行 -->
|
||||
<label for="versionVersion">修正版本:</label>
|
||||
<input type="text" id="versionVersion" class="form-control" placeholder="輸入版本(例如:V1.0)" />
|
||||
<button class="btn btn-primary mt-3" onclick="addOrUpdateVersion()">送出修正資訊</button>
|
||||
</div>
|
||||
|
||||
<h6 class="font-weight-bold text-primary">正式版本發佈</h6>
|
||||
<input type="text" id="versionVersion_v" class="form-control" placeholder="輸入正式版本(例如:V1.0)" />
|
||||
<button class="btn btn-success mt-3" onclick="addOrUpdateVersion_v()">發佈正式版本</button>
|
||||
|
||||
<h6 class="font-weight-bold text-primary mt-4">當前版本</h6>
|
||||
<table class="table table-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>版本</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="version_v_table">
|
||||
<!-- 版本資訊將動態填充 -->
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h6 class="font-weight-bold text-primary">修正內容列表</h6>
|
||||
<div id="loading">加載中...</div>
|
||||
<table class="table table-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 150px;">修正日期</th>
|
||||
<th>修正人</th>
|
||||
<th style="word-wrap: break-word; max-width: 200px;">內容</th> <!-- 使內容自動換行 -->
|
||||
<th>版本</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="version_logs_table">
|
||||
<!-- 版本資訊將動態填充 -->
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
let token = localStorage.getItem('token_park_space');
|
||||
let currentPage = 1;
|
||||
const recordsPerPage = 20;
|
||||
|
||||
// 初始化
|
||||
window.onload = function () {
|
||||
token_check();
|
||||
fetchVersions();
|
||||
fetchVersionV();
|
||||
};
|
||||
|
||||
function token_check() {
|
||||
$.ajax({
|
||||
type: "GET",
|
||||
url: 'http://localhost:7700/Users/token_check',
|
||||
headers: { 'Authorization': token },
|
||||
success: function () {
|
||||
fetchVersions();
|
||||
fetchVersionV();
|
||||
},
|
||||
error: function () {
|
||||
window.location.href = '/';
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 獲取修正版本資訊
|
||||
function fetchVersions() {
|
||||
$.ajax({
|
||||
type: "GET",
|
||||
url: `http://localhost:7700/api/Parking_Version?page=${currentPage}&pageSize=${recordsPerPage}`,
|
||||
headers: { 'Authorization': token },
|
||||
success: function (response) {
|
||||
let tableBody = $("#version_logs_table");
|
||||
tableBody.empty();
|
||||
if (response.versions.length === 0) {
|
||||
tableBody.append("<tr><td colspan='5'>沒有資料</td></tr>");
|
||||
} else {
|
||||
// 由新到舊排序版本紀錄
|
||||
response.versions.sort((a, b) => new Date(b.version_time) - new Date(a.version_time));
|
||||
|
||||
response.versions.forEach(version => {
|
||||
tableBody.append(`
|
||||
<tr>
|
||||
<td>${version.version_time}</td>
|
||||
<td>${version.version_name}</td>
|
||||
<td>${version.version_content}</td>
|
||||
<td>${version.version_version}</td>
|
||||
<td>
|
||||
<button class="btn btn-danger" onclick="deleteVersion('${version.version_name}', '${version.version_version}')">刪除資訊</button>
|
||||
</td>
|
||||
</tr>
|
||||
`);
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
// 新增或更新修正版本
|
||||
function addOrUpdateVersion() {
|
||||
let data = {
|
||||
version_time: $("#versionTime").val(),
|
||||
version_name: $("#versionName").val(),
|
||||
version_content: $("#versionContent").val(),
|
||||
version_version: $("#versionVersion").val()
|
||||
};
|
||||
|
||||
$.ajax({
|
||||
type: "POST",
|
||||
url: "http://localhost:7700/api/Parking_Version",
|
||||
contentType: "application/json",
|
||||
headers: { 'Authorization': token },
|
||||
data: JSON.stringify(data),
|
||||
success: function () {
|
||||
alert("版本資訊已提交！");
|
||||
fetchVersions();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 刪除修正版本
|
||||
function deleteVersion(name, version) {
|
||||
$.ajax({
|
||||
type: "DELETE",
|
||||
url: "http://localhost:7700/api/Parking_Version",
|
||||
contentType: "application/json",
|
||||
headers: { 'Authorization': token },
|
||||
data: JSON.stringify({ version_name: name, version_version: version }),
|
||||
success: function () {
|
||||
alert("版本已刪除！");
|
||||
location.reload();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 獲取正式版本
|
||||
function fetchVersionV() {
|
||||
$.ajax({
|
||||
type: "GET",
|
||||
url: "http://localhost:7700/api/Parking_Version/version_v",
|
||||
headers: { 'Authorization': token },
|
||||
success: function (response) {
|
||||
let tableBody = $("#version_v_table");
|
||||
tableBody.empty();
|
||||
response.forEach(version => {
|
||||
tableBody.append(`
|
||||
<tr>
|
||||
<td>${version.version_v}</td>
|
||||
<td>
|
||||
<button class="btn btn-danger" onclick="deleteVersionV('${version.version_v}')">刪除版本</button>
|
||||
</td>
|
||||
</tr>
|
||||
`);
|
||||
});
|
||||
},
|
||||
error: function (xhr) {
|
||||
alert(`獲取版本失敗: ${xhr.responseText}`);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 發佈正式版本
|
||||
|
||||
function addOrUpdateVersion_v() {
|
||||
let versionV = $("#versionVersion_v").val().trim(); // 移除空格
|
||||
if (!versionV) {
|
||||
alert("請輸入正式版本號！");
|
||||
return;
|
||||
}
|
||||
|
||||
$.ajax({
|
||||
type: "POST",
|
||||
url: "http://localhost:7700/api/Parking_Version/version_v",
|
||||
contentType: "application/json",
|
||||
headers: { 'Authorization': token },
|
||||
data: JSON.stringify({ version_v: versionV }),
|
||||
success: function () {
|
||||
alert(`正式版本 ${versionV} 發佈成功！`);
|
||||
$("#versionVersion_v").val("");
|
||||
fetchVersionV();
|
||||
},
|
||||
error: function (xhr) {
|
||||
alert(`發佈失敗: ${xhr.responseText}`);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
// 刪除正式版本
|
||||
function deleteVersionV(versionV) {
|
||||
if (!confirm(`確定要刪除版本 ${versionV} 嗎？`)) {
|
||||
return;
|
||||
}
|
||||
|
||||
$.ajax({
|
||||
type: "DELETE",
|
||||
url: `http://localhost:7700/api/Parking_Version/version_v/${versionV}`,
|
||||
contentType: "application/json",
|
||||
headers: { 'Authorization': token },
|
||||
success: function () {
|
||||
alert(`版本 ${versionV} 已刪除！`);
|
||||
location.reload();
|
||||
},
|
||||
error: function (xhr) {
|
||||
alert(`刪除失敗: ${xhr.responseText}`);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
|
||||
<!--檢查token-->
|
||||
<script>
|
||||
var token
|
||||
function token_check() {
|
||||
// 检查本地存储中是否存在JWT令牌
|
||||
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 == "engineer") {
|
||||
get_data()
|
||||
}
|
||||
else {
|
||||
window.location.href = '/';
|
||||
}
|
||||
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<!--開機自啟-->
|
||||
<script>
|
||||
window.onload = token_check;
|
||||
</script>
|
||||
518
Parking_spaces/Views/Engineering/Yuntech_all_car_table.cshtml
Normal file
518
Parking_spaces/Views/Engineering/Yuntech_all_car_table.cshtml
Normal file
@ -0,0 +1,518 @@
|
||||
@{
|
||||
ViewData["Title"] = "車輛進出紀錄查詢";
|
||||
Layout = "~/Views/Shared/_Layout_Engineering.cshtml";
|
||||
}
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-TW">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>@ViewData["Title"]</title>
|
||||
|
||||
<!-- 引入 Bootstrap CSS -->
|
||||
<link rel="stylesheet" href="/bootstrap_1/css/bootstrap.min.css">
|
||||
|
||||
<style>
|
||||
.table th, .table td {
|
||||
text-align: center;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.table th:nth-child(6), .table td:nth-child(6) {
|
||||
width: 120px; /* 設定星期欄位的寬度 */
|
||||
}
|
||||
|
||||
#loading {
|
||||
display: none;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
|
||||
.pagination-wrapper {
|
||||
position: relative;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
/* 上一頁下一頁 */
|
||||
#paginationContainer {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.page-item {
|
||||
display: inline-block;
|
||||
margin: 0 5px; /* 調整按鈕間距 */
|
||||
}
|
||||
|
||||
.page-link {
|
||||
padding: 10px 15px;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
border-radius: 5px;
|
||||
background-color: #ff007b;
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
|
||||
.page-link:hover {
|
||||
background-color: #ff007b; /* 滑鼠懸停效果 */
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container mt-4">
|
||||
<h1 class="text-center">查詢車輛進出紀錄</h1>
|
||||
<div class="col-12">
|
||||
<div class="card shadow mb-4" style="padding: 20px; border-radius: 10px; max-width: 100%;">
|
||||
<div class="card-header py-3 d-flex justify-content-between align-items-center">
|
||||
<h6 class="m-0 font-weight-bold text-primary">車輛進出紀錄查詢</h6>
|
||||
<div class="button-container">
|
||||
|
||||
<button class="btn btn-success" onclick="downloadCarLogsExcel()">下載指定車輛紀錄 Excel</button>
|
||||
<button class="btn btn-success" onclick="downloadAllCarLogsExcel()">下載所有車輛紀錄 Excel</button>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div>
|
||||
<label for="startDate">開始日期和時間:</label>
|
||||
<input type="datetime-local" id="startDate" class="form-control mb-2" />
|
||||
|
||||
<label for="in_Area">進入區域:</label>
|
||||
<select id="in_Area" class="form-control mb-2">
|
||||
<option value="none">不需要進入區域</option>
|
||||
<option value="1">大門口1</option>
|
||||
<option value="2">大門口2</option>
|
||||
<option value="3">整個大門口</option>
|
||||
<option value="4">南側門</option>
|
||||
<option value="5">學人宿舍</option>
|
||||
</select>
|
||||
|
||||
<label for="out_Area">出去區域:</label>
|
||||
<select id="out_Area" class="form-control mb-2">
|
||||
<option value="none">不需要出去區域</option>
|
||||
<option value="1">大門口1</option>
|
||||
<option value="2">大門口2</option>
|
||||
<option value="3">整個大門口</option>
|
||||
<option value="4">南側門</option>
|
||||
<option value="5">學人宿舍</option>
|
||||
</select>
|
||||
|
||||
<label for="endDate">結束日期和時間:</label>
|
||||
<input type="datetime-local" id="endDate" class="form-control mb-2" />
|
||||
<div style="display: flex; align-items: center; justify-content: space-between;">
|
||||
<button class="btn btn-primary mt-3" onclick="fetchCarLogs()">查詢紀錄</button>
|
||||
|
||||
<div style="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>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div id="loading">加載中...</div>
|
||||
<table class="table table-bordered mt-3">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>進入星期</th>
|
||||
<th>車牌號碼</th>
|
||||
<th>進入位置</th>
|
||||
<th>進入時間</th>
|
||||
<th>出去時間</th>
|
||||
<th>出去位置</th>
|
||||
<th>詳細資料</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="car_logs_table">
|
||||
<!-- 車輛進出紀錄會動態填充到這裡 -->
|
||||
</tbody>
|
||||
</table>
|
||||
<div id="noDataMessage" class="text-danger" style="display:none;">
|
||||
沒有符合條件的車輛進出紀錄。
|
||||
</div>
|
||||
|
||||
<nav aria-label="Page navigation" id="paginationContainer" style="display: none;">
|
||||
<ul class="pagination">
|
||||
<li class="page-item" id="prevPageItem" style="display: none;">
|
||||
<a class="page-link" href="#" onclick="changePage(currentPage - 1)">上一頁</a>
|
||||
</li>
|
||||
<li class="page-item" id="nextPageItem" style="display: none;">
|
||||
<a class="page-link" href="#" onclick="changePage(currentPage + 1)">下一頁</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<button class="btn btn-primary" id="homeButton" style="display: none;" onclick="goToHomePage()">首頁</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 模態框 -->
|
||||
<div class="modal fade" id="detailsModal" tabindex="-1" role="dialog" aria-labelledby="detailsModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="detailsModalLabel">車輛詳細資訊</h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p><strong>車牌號碼：</strong><span id="modal_license_plate"></span></p>
|
||||
<p><strong>進入位置：</strong><span id="modal_location"></span></p>
|
||||
<p><strong>進入時間：</strong><span id="modal_in_time"></span></p>
|
||||
<p><strong>出去時間：</strong><span id="modal_out_time"></span></p>
|
||||
<p><strong>出去位置：</strong><span id="modal_out_location"></span></p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">關閉</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
||||
<script>
|
||||
let currentPage = 1; // 當前頁碼
|
||||
const recordsPerPage = 50; // 每頁顯示的紀錄數
|
||||
let totalRecords = 0;
|
||||
|
||||
// 當頁面加載時自動檢查 token 和初始化輸入
|
||||
window.onload = async function() {
|
||||
await token_check();
|
||||
initializeInputs();
|
||||
};
|
||||
|
||||
// 單獨車牌搜尋
|
||||
function serch_click() {
|
||||
const licensePlate = document.getElementById('serch_text_id').value.trim();
|
||||
|
||||
if (!licensePlate) {
|
||||
alert("請輸入車牌號碼。");
|
||||
return;
|
||||
}
|
||||
|
||||
document.getElementById('noDataMessage').style.display = 'none';
|
||||
document.getElementById('paginationContainer').style.display = 'none';
|
||||
document.getElementById('loading').style.display = 'block';
|
||||
|
||||
const params = {
|
||||
LicensePlate: licensePlate
|
||||
};
|
||||
|
||||
// 進行車牌查詢
|
||||
fetch('http://localhost:7700/api/Yuntech_all_car_table/query/license_plate', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(params)
|
||||
})
|
||||
.then(response => {
|
||||
if (!response.ok) throw new Error('無法獲取資料，請稍後再試。');
|
||||
return response.json();
|
||||
})
|
||||
.then(data => {
|
||||
const logsTable = document.getElementById('car_logs_table');
|
||||
logsTable.innerHTML = '';
|
||||
|
||||
if (data.totalRecords === 0) {
|
||||
document.getElementById('noDataMessage').style.display = 'block';
|
||||
} else {
|
||||
|
||||
data.logs.forEach(log => {
|
||||
const row = document.createElement('tr');
|
||||
row.innerHTML = `
|
||||
<td>${log.record_date || '未有資料'}</td>
|
||||
<td>${log.license_plate_number || '未有資料'}</td>
|
||||
<td>${log.location || '未有資料'}</td>
|
||||
<td>${log.in_time || '未有資料'}</td>
|
||||
<td>${log.out_time || '未有資料'}</td>
|
||||
<td>${log.out_location || '未有資料'}</td>
|
||||
<td><button class="btn btn-info" onclick="showDetails(${JSON.stringify(log)})">詳細</button></td>
|
||||
`;
|
||||
logsTable.appendChild(row);
|
||||
});
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error fetching car logs:', error);
|
||||
alert('獲取車輛進出紀錄時出現錯誤，請稍後再試。');
|
||||
})
|
||||
.finally(() => {
|
||||
document.getElementById('loading').style.display = 'none';
|
||||
});
|
||||
}
|
||||
|
||||
// 初始化日期和區域選項
|
||||
function initializeInputs() {
|
||||
updateDateInputs(); // 設定日期
|
||||
fetchCarLogs(); // 自動呼叫函式以顯示車輛進出紀錄
|
||||
|
||||
// 每分鐘更新一次日期
|
||||
setInterval(updateDateInputs, 60 * 1000); // 每60秒更新一次
|
||||
}
|
||||
|
||||
// 更新輸入框中的日期
|
||||
function updateDateInputs() {
|
||||
const today = new Date();
|
||||
const startDateInput = document.getElementById('startDate');
|
||||
const endDateInput = document.getElementById('endDate');
|
||||
|
||||
// 設定 startDate 為昨天的00:00
|
||||
const yesterday = new Date(today);
|
||||
yesterday.setDate(today.getDate() - 1); // 將日期設為昨天
|
||||
startDateInput.value = formatDate(yesterday, true); // 00:00
|
||||
|
||||
// 設定 endDate 為今天的23:59
|
||||
endDateInput.value = formatDate(today, false); // 23:59
|
||||
}
|
||||
|
||||
// 格式化日期的輔助函數
|
||||
function formatDate(date, isStart) {
|
||||
const year = date.getFullYear();
|
||||
const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份從0開始
|
||||
const day = String(date.getDate()).padStart(2, '0');
|
||||
const hours = isStart ? '00' : '23';
|
||||
const minutes = isStart ? '00' : '59';
|
||||
|
||||
return `${year}-${month}-${day}T${hours}:${minutes}`;
|
||||
}
|
||||
|
||||
//進出紀錄資料顯示
|
||||
async function fetchCarLogs(page = 1) {
|
||||
const logsTable = document.getElementById('car_logs_table');
|
||||
const loadingIndicator = document.getElementById('loading');
|
||||
loadingIndicator.style.display = 'block';
|
||||
|
||||
const params = {
|
||||
StartDate: document.getElementById('startDate').value,
|
||||
EndDate: document.getElementById('endDate').value,
|
||||
InArea: document.getElementById('in_Area').value,
|
||||
OutArea: document.getElementById('out_Area').value,
|
||||
Page: page,
|
||||
RecordsPerPage: recordsPerPage
|
||||
};
|
||||
|
||||
try {
|
||||
const response = await fetch('http://localhost:7700/api/Yuntech_all_car_table/query', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(params)
|
||||
});
|
||||
if (!response.ok) throw new Error('無法獲取資料，請稍後再試。');
|
||||
|
||||
const data = await response.json();
|
||||
logsTable.innerHTML = '';
|
||||
totalRecords = data.totalRecords;
|
||||
const totalPages = Math.ceil(totalRecords / recordsPerPage);
|
||||
|
||||
if (data.logs.length === 0) {
|
||||
document.getElementById('noDataMessage').style.display = 'block';
|
||||
document.getElementById('paginationContainer').style.display = 'none';
|
||||
} else {
|
||||
document.getElementById('noDataMessage').style.display = 'none';
|
||||
|
||||
// **按照 in_time 或 record_date 降冪排序（新到舊）**
|
||||
data.logs.sort((a, b) => new Date(b.in_time || b.record_date) - new Date(a.in_time || a.record_date));
|
||||
|
||||
data.logs.forEach(log => {
|
||||
const weekdayText = log.record_date || "未有資料";
|
||||
|
||||
const row = document.createElement('tr');
|
||||
row.innerHTML = `
|
||||
<td>${weekdayText}</td>
|
||||
<td>${log.license_plate_number || '未有資料'}</td>
|
||||
<td>${log.location || '未有資料'}</td>
|
||||
<td>${log.in_time || '未有資料'}</td>
|
||||
<td>${log.out_time || '未有資料'}</td>
|
||||
<td>${log.out_location || '未有資料'}</td>
|
||||
<td><button class="btn btn-info" onclick="showDetails(${JSON.stringify(log)})">詳細</button></td>
|
||||
`;
|
||||
logsTable.appendChild(row);
|
||||
});
|
||||
|
||||
// 更新分頁按鈕
|
||||
updatePagination(totalPages, page);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error fetching car logs:', error);
|
||||
alert('獲取車輛進出紀錄時出現錯誤，請稍後再試。');
|
||||
} finally {
|
||||
loadingIndicator.style.display = 'none';
|
||||
}
|
||||
}
|
||||
|
||||
function updatePagination(totalPages, currentPage) {
|
||||
const paginationContainer = document.getElementById('paginationContainer');
|
||||
paginationContainer.innerHTML = '';
|
||||
paginationContainer.dataset.totalRecords = totalRecords;
|
||||
|
||||
// 顯示上一頁按鈕
|
||||
if (currentPage > 1) {
|
||||
const prevPageItem = document.createElement('li');
|
||||
prevPageItem.className = 'page-item';
|
||||
prevPageItem.innerHTML = `<a class="page-link btn btn-primary" href="#" onclick="changePage(${currentPage - 1})">上一頁</a>`;
|
||||
paginationContainer.appendChild(prevPageItem);
|
||||
}
|
||||
|
||||
// 顯示下一頁按鈕
|
||||
if (currentPage < totalPages) {
|
||||
const nextPageItem = document.createElement('li');
|
||||
nextPageItem.className = 'page-item';
|
||||
nextPageItem.innerHTML = `<a class="page-link btn btn-primary" href="#" onclick="changePage(${currentPage + 1})">下一頁</a>`;
|
||||
paginationContainer.appendChild(nextPageItem);
|
||||
}
|
||||
|
||||
paginationContainer.style.display = totalPages > 1 ? 'block' : 'none';
|
||||
}
|
||||
|
||||
function changePage(page) {
|
||||
const totalPages = Math.ceil(Number(document.getElementById('paginationContainer').dataset.totalRecords) / recordsPerPage);
|
||||
if (page < 1 || page > totalPages) return; // 確保不會小於 1 或超過總頁數
|
||||
fetchCarLogs(page); // 重新獲取該頁的數據
|
||||
}
|
||||
|
||||
function showDetails(log) {
|
||||
document.getElementById('modal_license_plate').innerText = log.license_plate_number || '未有資料';
|
||||
document.getElementById('modal_location').innerText = log.location || '未有資料';
|
||||
document.getElementById('modal_in_time').innerText = log.in_time || '未有資料';
|
||||
document.getElementById('modal_out_time').innerText = log.out_time || '未有資料';
|
||||
document.getElementById('modal_out_location').innerText = log.out_location || '未有資料';
|
||||
$('#detailsModal').modal('show'); // 顯示模態框
|
||||
}
|
||||
|
||||
function goToHomePage() {
|
||||
window.location.href = '/'; // 返回首頁
|
||||
}
|
||||
// 下載指定進出資料
|
||||
function downloadCarLogsExcel() {
|
||||
const startDateInput = document.getElementById('startDate').value;
|
||||
const endDateInput = document.getElementById('endDate').value;
|
||||
const in_Area = document.getElementById('in_Area').value;
|
||||
const out_Area = document.getElementById('out_Area').value;
|
||||
|
||||
// 將日期轉換為 ISO 格式
|
||||
const startDate = startDateInput ? new Date(startDateInput) : null;
|
||||
const endDate = endDateInput ? new Date(endDateInput) : null;
|
||||
|
||||
const queryParams = new URLSearchParams({
|
||||
StartDate: startDate ? startDate.toISOString() : null,
|
||||
EndDate: endDate ? endDate.toISOString() : null,
|
||||
InArea: in_Area !== 'none' ? in_Area : null,
|
||||
OutArea: out_Area !== 'none' ? out_Area : null,
|
||||
}).toString();
|
||||
|
||||
fetch(`http://localhost:7700/api/Yuntech_all_car_table/download-excel?${queryParams}`, {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
})
|
||||
.then(response => {
|
||||
if (!response.ok) {
|
||||
throw new Error('網絡響應出錯');
|
||||
}
|
||||
return response.blob();
|
||||
})
|
||||
.then(blob => {
|
||||
const url = window.URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
a.style.display = 'none';
|
||||
// 設定下載的檔名，格式為「由 {startDate} 到 {endDate}_Yuntech_car_table.xlsx」
|
||||
a.download = `由 ${startDate.toISOString().slice(0, 10)} 到 ${endDate.toISOString().slice(0, 10)}_Yuntech_car_table.xlsx`;
|
||||
a.href = url;
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
window.URL.revokeObjectURL(url);
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('獲取過程中出現問題:', error);
|
||||
alert('下載失敗，請稍後再試。');
|
||||
});
|
||||
}
|
||||
// 下載所有進出資料
|
||||
function downloadAllCarLogsExcel() {
|
||||
fetch(`http://localhost:7700/api/Yuntech_all_car_table/all-download-excel`, {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
})
|
||||
.then(response => {
|
||||
if (!response.ok) {
|
||||
throw new Error('網絡響應出錯');
|
||||
}
|
||||
return response.blob();
|
||||
})
|
||||
.then(blob => {
|
||||
const url = window.URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
a.style.display = 'none';
|
||||
a.href = url;
|
||||
a.download = `所有進出紀錄_${new Date().toISOString().slice(0, 10)}.xlsx`; // 設定下載的檔名
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
window.URL.revokeObjectURL(url);
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('獲取過程中出現問題:', error);
|
||||
alert('下載失敗，請稍後再試。');
|
||||
});
|
||||
}
|
||||
|
||||
// 檢查 token
|
||||
async function token_check() {
|
||||
const token = localStorage.getItem('token_park_space');
|
||||
try {
|
||||
const response = await $.ajax({
|
||||
type: "GET",
|
||||
url: 'http://localhost:7700/Users/token_check',
|
||||
headers: {
|
||||
'Authorization': token
|
||||
}
|
||||
});
|
||||
from_token_import_id();
|
||||
} catch (xhr) {
|
||||
window.location.href = '/';
|
||||
}
|
||||
}
|
||||
|
||||
async function from_token_import_id() {
|
||||
const token = localStorage.getItem('token_park_space');
|
||||
const response = await $.ajax({
|
||||
type: "GET",
|
||||
url: 'http://localhost:7700/Users/token-' + token,
|
||||
headers: {
|
||||
'Authorization': token
|
||||
}
|
||||
});
|
||||
from_id_import_user_data(response);
|
||||
}
|
||||
|
||||
async function from_id_import_user_data(id) {
|
||||
const token = localStorage.getItem('token_park_space');
|
||||
const response = await $.ajax({
|
||||
type: "GET",
|
||||
url: 'http://localhost:7700/Users/user_id-' + id,
|
||||
headers: {
|
||||
'Authorization': token
|
||||
}
|
||||
});
|
||||
const model = response.result;
|
||||
if (model.lastname === "engineer") {
|
||||
fetchCarLogs(); // 獲取車輛進出紀錄
|
||||
} else {
|
||||
window.location.href = '/';
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<!-- 引入 Bootstrap JS -->
|
||||
<script src="/bootstrap_1/js/bootstrap.bundle.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,492 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="">
|
||||
<meta name="author" content="">
|
||||
|
||||
<title>SB Admin 2 - Charts</title>
|
||||
|
||||
<!-- Custom fonts for this template-->
|
||||
<link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i"
|
||||
rel="stylesheet">
|
||||
|
||||
<!-- Custom styles for this template-->
|
||||
<link href="css/sb-admin-2.min.css" rel="stylesheet">
|
||||
|
||||
</head>
|
||||
|
||||
<body id="page-top">
|
||||
|
||||
<!-- Page Wrapper -->
|
||||
<div id="wrapper">
|
||||
|
||||
<!-- Sidebar -->
|
||||
<ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion" id="accordionSidebar">
|
||||
|
||||
<!-- Sidebar - Brand -->
|
||||
<a class="sidebar-brand d-flex align-items-center justify-content-center" href="index.html">
|
||||
<div class="sidebar-brand-icon rotate-n-15">
|
||||
<i class="fas fa-laugh-wink"></i>
|
||||
</div>
|
||||
<div class="sidebar-brand-text mx-3">SB Admin <sup>2</sup></div>
|
||||
</a>
|
||||
|
||||
<!-- Divider -->
|
||||
<hr class="sidebar-divider my-0">
|
||||
|
||||
<!-- Nav Item - Dashboard -->
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="index.html">
|
||||
<i class="fas fa-fw fa-tachometer-alt"></i>
|
||||
<span>Dashboard</span></a>
|
||||
</li>
|
||||
|
||||
<!-- Divider -->
|
||||
<hr class="sidebar-divider">
|
||||
|
||||
<!-- Heading -->
|
||||
<div class="sidebar-heading">
|
||||
Interface
|
||||
</div>
|
||||
|
||||
<!-- Nav Item - Pages Collapse Menu -->
|
||||
<li class="nav-item">
|
||||
<a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapseTwo"
|
||||
aria-expanded="true" aria-controls="collapseTwo">
|
||||
<i class="fas fa-fw fa-cog"></i>
|
||||
<span>Components</span>
|
||||
</a>
|
||||
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionSidebar">
|
||||
<div class="bg-white py-2 collapse-inner rounded">
|
||||
<h6 class="collapse-header">Custom Components:</h6>
|
||||
<a class="collapse-item" href="buttons.html">Buttons</a>
|
||||
<a class="collapse-item" href="cards.html">Cards</a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<!-- Nav Item - Utilities Collapse Menu -->
|
||||
<li class="nav-item">
|
||||
<a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapseUtilities"
|
||||
aria-expanded="true" aria-controls="collapseUtilities">
|
||||
<i class="fas fa-fw fa-wrench"></i>
|
||||
<span>Utilities</span>
|
||||
</a>
|
||||
<div id="collapseUtilities" class="collapse" aria-labelledby="headingUtilities"
|
||||
data-parent="#accordionSidebar">
|
||||
<div class="bg-white py-2 collapse-inner rounded">
|
||||
<h6 class="collapse-header">Custom Utilities:</h6>
|
||||
<a class="collapse-item" href="utilities-color.html">Colors</a>
|
||||
<a class="collapse-item" href="utilities-border.html">Borders</a>
|
||||
<a class="collapse-item" href="utilities-animation.html">Animations</a>
|
||||
<a class="collapse-item" href="utilities-other.html">Other</a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<!-- Divider -->
|
||||
<hr class="sidebar-divider">
|
||||
|
||||
<!-- Heading -->
|
||||
<div class="sidebar-heading">
|
||||
Addons
|
||||
</div>
|
||||
|
||||
<!-- Nav Item - Pages Collapse Menu -->
|
||||
<li class="nav-item">
|
||||
<a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapsePages"
|
||||
aria-expanded="true" aria-controls="collapsePages">
|
||||
<i class="fas fa-fw fa-folder"></i>
|
||||
<span>Pages</span>
|
||||
</a>
|
||||
<div id="collapsePages" class="collapse" aria-labelledby="headingPages" data-parent="#accordionSidebar">
|
||||
<div class="bg-white py-2 collapse-inner rounded">
|
||||
<h6 class="collapse-header">Login Screens:</h6>
|
||||
<a class="collapse-item" href="login.html">Login</a>
|
||||
<a class="collapse-item" href="register.html">Register</a>
|
||||
<a class="collapse-item" href="forgot-password.html">Forgot Password</a>
|
||||
<div class="collapse-divider"></div>
|
||||
<h6 class="collapse-header">Other Pages:</h6>
|
||||
<a class="collapse-item" href="404.html">404 Page</a>
|
||||
<a class="collapse-item" href="blank.html">Blank Page</a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<!-- Nav Item - Charts -->
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" href="charts.html">
|
||||
<i class="fas fa-fw fa-chart-area"></i>
|
||||
<span>Charts</span></a>
|
||||
</li>
|
||||
|
||||
<!-- Nav Item - Tables -->
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="tables.html">
|
||||
<i class="fas fa-fw fa-table"></i>
|
||||
<span>Tables</span></a>
|
||||
</li>
|
||||
|
||||
<!-- Divider -->
|
||||
<hr class="sidebar-divider d-none d-md-block">
|
||||
|
||||
<!-- Sidebar Toggler (Sidebar) -->
|
||||
<div class="text-center d-none d-md-inline">
|
||||
<button class="rounded-circle border-0" id="sidebarToggle"></button>
|
||||
</div>
|
||||
|
||||
</ul>
|
||||
<!-- End of Sidebar -->
|
||||
|
||||
<!-- Content Wrapper -->
|
||||
<div id="content-wrapper" class="d-flex flex-column">
|
||||
|
||||
<!-- Main Content -->
|
||||
<div id="content">
|
||||
|
||||
<!-- Topbar -->
|
||||
<nav class="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow">
|
||||
|
||||
<!-- Sidebar Toggle (Topbar) -->
|
||||
<button id="sidebarToggleTop" class="btn btn-link d-md-none rounded-circle mr-3">
|
||||
<i class="fa fa-bars"></i>
|
||||
</button>
|
||||
|
||||
<!-- Topbar Search -->
|
||||
<form
|
||||
class="d-none d-sm-inline-block form-inline mr-auto ml-md-3 my-2 my-md-0 mw-100 navbar-search">
|
||||
<div class="input-group">
|
||||
<input type="text" class="form-control bg-light border-0 small" placeholder="Search for..."
|
||||
aria-label="Search" aria-describedby="basic-addon2">
|
||||
<div class="input-group-append">
|
||||
<button class="btn btn-primary" type="button">
|
||||
<i class="fas fa-search fa-sm"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<!-- Topbar Navbar -->
|
||||
<ul class="navbar-nav ml-auto">
|
||||
|
||||
<!-- Nav Item - Search Dropdown (Visible Only XS) -->
|
||||
<li class="nav-item dropdown no-arrow d-sm-none">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="searchDropdown" role="button"
|
||||
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i class="fas fa-search fa-fw"></i>
|
||||
</a>
|
||||
<!-- Dropdown - Messages -->
|
||||
<div class="dropdown-menu dropdown-menu-right p-3 shadow animated--grow-in"
|
||||
aria-labelledby="searchDropdown">
|
||||
<form class="form-inline mr-auto w-100 navbar-search">
|
||||
<div class="input-group">
|
||||
<input type="text" class="form-control bg-light border-0 small"
|
||||
placeholder="Search for..." aria-label="Search"
|
||||
aria-describedby="basic-addon2">
|
||||
<div class="input-group-append">
|
||||
<button class="btn btn-primary" type="button">
|
||||
<i class="fas fa-search fa-sm"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<!-- Nav Item - Alerts -->
|
||||
<li class="nav-item dropdown no-arrow mx-1">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="alertsDropdown" role="button"
|
||||
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i class="fas fa-bell fa-fw"></i>
|
||||
<!-- Counter - Alerts -->
|
||||
<span class="badge badge-danger badge-counter">3+</span>
|
||||
</a>
|
||||
<!-- Dropdown - Alerts -->
|
||||
<div class="dropdown-list dropdown-menu dropdown-menu-right shadow animated--grow-in"
|
||||
aria-labelledby="alertsDropdown">
|
||||
<h6 class="dropdown-header">
|
||||
Alerts Center
|
||||
</h6>
|
||||
<a class="dropdown-item d-flex align-items-center" href="#">
|
||||
<div class="mr-3">
|
||||
<div class="icon-circle bg-primary">
|
||||
<i class="fas fa-file-alt text-white"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="small text-gray-500">December 12, 2019</div>
|
||||
<span class="font-weight-bold">A new monthly report is ready to download!</span>
|
||||
</div>
|
||||
</a>
|
||||
<a class="dropdown-item d-flex align-items-center" href="#">
|
||||
<div class="mr-3">
|
||||
<div class="icon-circle bg-success">
|
||||
<i class="fas fa-donate text-white"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="small text-gray-500">December 7, 2019</div>
|
||||
$290.29 has been deposited into your account!
|
||||
</div>
|
||||
</a>
|
||||
<a class="dropdown-item d-flex align-items-center" href="#">
|
||||
<div class="mr-3">
|
||||
<div class="icon-circle bg-warning">
|
||||
<i class="fas fa-exclamation-triangle text-white"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="small text-gray-500">December 2, 2019</div>
|
||||
Spending Alert: We've noticed unusually high spending for your account.
|
||||
</div>
|
||||
</a>
|
||||
<a class="dropdown-item text-center small text-gray-500" href="#">Show All Alerts</a>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<!-- Nav Item - Messages -->
|
||||
<li class="nav-item dropdown no-arrow mx-1">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="messagesDropdown" role="button"
|
||||
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i class="fas fa-envelope fa-fw"></i>
|
||||
<!-- Counter - Messages -->
|
||||
<span class="badge badge-danger badge-counter">7</span>
|
||||
</a>
|
||||
<!-- Dropdown - Messages -->
|
||||
<div class="dropdown-list dropdown-menu dropdown-menu-right shadow animated--grow-in"
|
||||
aria-labelledby="messagesDropdown">
|
||||
<h6 class="dropdown-header">
|
||||
Message Center
|
||||
</h6>
|
||||
<a class="dropdown-item d-flex align-items-center" href="#">
|
||||
<div class="dropdown-list-image mr-3">
|
||||
<img class="rounded-circle" src="img/undraw_profile_1.svg"
|
||||
alt="...">
|
||||
<div class="status-indicator bg-success"></div>
|
||||
</div>
|
||||
<div class="font-weight-bold">
|
||||
<div class="text-truncate">Hi there! I am wondering if you can help me with a
|
||||
problem I've been having.</div>
|
||||
<div class="small text-gray-500">Emily Fowler · 58m</div>
|
||||
</div>
|
||||
</a>
|
||||
<a class="dropdown-item d-flex align-items-center" href="#">
|
||||
<div class="dropdown-list-image mr-3">
|
||||
<img class="rounded-circle" src="img/undraw_profile_2.svg"
|
||||
alt="...">
|
||||
<div class="status-indicator"></div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-truncate">I have the photos that you ordered last month, how
|
||||
would you like them sent to you?</div>
|
||||
<div class="small text-gray-500">Jae Chun · 1d</div>
|
||||
</div>
|
||||
</a>
|
||||
<a class="dropdown-item d-flex align-items-center" href="#">
|
||||
<div class="dropdown-list-image mr-3">
|
||||
<img class="rounded-circle" src="img/undraw_profile_3.svg"
|
||||
alt="...">
|
||||
<div class="status-indicator bg-warning"></div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-truncate">Last month's report looks great, I am very happy with
|
||||
the progress so far, keep up the good work!</div>
|
||||
<div class="small text-gray-500">Morgan Alvarez · 2d</div>
|
||||
</div>
|
||||
</a>
|
||||
<a class="dropdown-item d-flex align-items-center" href="#">
|
||||
<div class="dropdown-list-image mr-3">
|
||||
<img class="rounded-circle" src="https://source.unsplash.com/Mv9hjnEUHR4/60x60"
|
||||
alt="...">
|
||||
<div class="status-indicator bg-success"></div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-truncate">Am I a good boy? The reason I ask is because someone
|
||||
told me that people say this to all dogs, even if they aren't good...</div>
|
||||
<div class="small text-gray-500">Chicken the Dog · 2w</div>
|
||||
</div>
|
||||
</a>
|
||||
<a class="dropdown-item text-center small text-gray-500" href="#">Read More Messages</a>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<div class="topbar-divider d-none d-sm-block"></div>
|
||||
|
||||
<!-- Nav Item - User Information -->
|
||||
<li class="nav-item dropdown no-arrow">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button"
|
||||
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<span class="mr-2 d-none d-lg-inline text-gray-600 small">Douglas McGee</span>
|
||||
<img class="img-profile rounded-circle"
|
||||
src="img/undraw_profile.svg">
|
||||
</a>
|
||||
<!-- Dropdown - User Information -->
|
||||
<div class="dropdown-menu dropdown-menu-right shadow animated--grow-in"
|
||||
aria-labelledby="userDropdown">
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="fas fa-user fa-sm fa-fw mr-2 text-gray-400"></i>
|
||||
Profile
|
||||
</a>
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="fas fa-cogs fa-sm fa-fw mr-2 text-gray-400"></i>
|
||||
Settings
|
||||
</a>
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="fas fa-list fa-sm fa-fw mr-2 text-gray-400"></i>
|
||||
Activity Log
|
||||
</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#" data-toggle="modal" data-target="#logoutModal">
|
||||
<i class="fas fa-sign-out-alt fa-sm fa-fw mr-2 text-gray-400"></i>
|
||||
Logout
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
</nav>
|
||||
<!-- End of Topbar -->
|
||||
|
||||
<!-- Begin Page Content -->
|
||||
<div class="container-fluid">
|
||||
|
||||
<!-- Page Heading -->
|
||||
<h1 class="h3 mb-2 text-gray-800">Charts</h1>
|
||||
<p class="mb-4">Chart.js is a third party plugin that is used to generate the charts in this theme.
|
||||
The charts below have been customized - for further customization options, please visit the <a
|
||||
target="_blank" href="https://www.chartjs.org/docs/latest/">official Chart.js
|
||||
documentation</a>.</p>
|
||||
|
||||
<!-- Content Row -->
|
||||
<div class="row">
|
||||
|
||||
<div class="col-xl-8 col-lg-7">
|
||||
|
||||
<!-- Area Chart -->
|
||||
<div class="card shadow mb-4">
|
||||
<div class="card-header py-3">
|
||||
<h6 class="m-0 font-weight-bold text-primary">Area Chart</h6>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="chart-area">
|
||||
<canvas id="myAreaChart"></canvas>
|
||||
</div>
|
||||
<hr>
|
||||
Styling for the area chart can be found in the
|
||||
<code>/js/demo/chart-area-demo.js</code> file.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Bar Chart -->
|
||||
<div class="card shadow mb-4">
|
||||
<div class="card-header py-3">
|
||||
<h6 class="m-0 font-weight-bold text-primary">Bar Chart</h6>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="chart-bar">
|
||||
<canvas id="myBarChart"></canvas>
|
||||
</div>
|
||||
<hr>
|
||||
Styling for the bar chart can be found in the
|
||||
<code>/js/demo/chart-bar-demo.js</code> file.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Donut Chart -->
|
||||
<div class="col-xl-4 col-lg-5">
|
||||
<div class="card shadow mb-4">
|
||||
<!-- Card Header - Dropdown -->
|
||||
<div class="card-header py-3">
|
||||
<h6 class="m-0 font-weight-bold text-primary">Donut Chart</h6>
|
||||
</div>
|
||||
<!-- Card Body -->
|
||||
<div class="card-body">
|
||||
<div class="chart-pie pt-4">
|
||||
<canvas id="myPieChart"></canvas>
|
||||
</div>
|
||||
<hr>
|
||||
Styling for the donut chart can be found in the
|
||||
<code>/js/demo/chart-pie-demo.js</code> file.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- /.container-fluid -->
|
||||
|
||||
</div>
|
||||
<!-- End of Main Content -->
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="sticky-footer bg-white">
|
||||
<div class="container my-auto">
|
||||
<div class="copyright text-center my-auto">
|
||||
<span>Copyright © Your Website 2020</span>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
<!-- End of Footer -->
|
||||
|
||||
</div>
|
||||
<!-- End of Content Wrapper -->
|
||||
|
||||
</div>
|
||||
<!-- End of Page Wrapper -->
|
||||
|
||||
<!-- Scroll to Top Button-->
|
||||
<a class="scroll-to-top rounded" href="#page-top">
|
||||
<i class="fas fa-angle-up"></i>
|
||||
</a>
|
||||
|
||||
<!-- Logout Modal-->
|
||||
<div class="modal fade" id="logoutModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
|
||||
aria-hidden="true">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="exampleModalLabel">Ready to Leave?</h5>
|
||||
<button class="close" type="button" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">Select "Logout" below if you are ready to end your current session.</div>
|
||||
<div class="modal-footer">
|
||||
<button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
|
||||
<a class="btn btn-primary" href="login.html">Logout</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Bootstrap core JavaScript-->
|
||||
<script src="vendor/jquery/jquery.min.js"></script>
|
||||
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
|
||||
|
||||
<!-- Core plugin JavaScript-->
|
||||
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
|
||||
|
||||
<!-- Custom scripts for all pages-->
|
||||
<script src="js/sb-admin-2.min.js"></script>
|
||||
|
||||
<!-- Page level plugins -->
|
||||
<script src="vendor/chart.js/Chart.min.js"></script>
|
||||
|
||||
<!-- Page level custom scripts -->
|
||||
<script src="js/demo/chart-area-demo.js"></script>
|
||||
<script src="js/demo/chart-pie-demo.js"></script>
|
||||
<script src="js/demo/chart-bar-demo.js"></script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -1219,3 +1219,8 @@
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
222
Parking_spaces/Views/Manager/Version.cshtml
Normal file
222
Parking_spaces/Views/Manager/Version.cshtml
Normal file
@ -0,0 +1,222 @@
|
||||
@{
|
||||
ViewData["Title"] = "版本資訊";
|
||||
Layout = "~/Views/Shared/_Layout_Manager.cshtml";
|
||||
}
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-TW">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>@ViewData["Title"]</title>
|
||||
<link rel="stylesheet" href="/bootstrap_1/css/bootstrap.min.css">
|
||||
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
||||
<style>
|
||||
.table th, .table td {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#loading {
|
||||
display: none;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
justify-content: center;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container mt-3">
|
||||
<h1>停車場版本資訊</h1>
|
||||
<div class="card shadow mb-4">
|
||||
<div class="card-header d-flex justify-content-between align-items-center">
|
||||
<h6 class="m-0 font-weight-bold text-primary">修正版本資訊內容</h6>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h6 class="font-weight-bold text-primary mt-4">當前版本</h6>
|
||||
<table class="table table-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>版本</th>
|
||||
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="version_v_table">
|
||||
<!-- 版本資訊將動態填充 -->
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h6 class="font-weight-bold text-primary">修正內容列表</h6>
|
||||
<div id="loading">加載中...</div>
|
||||
<table class="table table-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 150px;">修正日期</th>
|
||||
<th>修正人</th>
|
||||
<th style="word-wrap: break-word; max-width: 200px;">內容</th> <!-- 使內容自動換行 -->
|
||||
<th>版本</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="version_logs_table">
|
||||
<!-- 版本資訊將動態填充 -->
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
let token = localStorage.getItem('token_park_space');
|
||||
let currentPage = 1;
|
||||
const recordsPerPage = 20;
|
||||
|
||||
// 初始化
|
||||
window.onload = function () {
|
||||
token_check();
|
||||
fetchVersions();
|
||||
fetchVersionV();
|
||||
};
|
||||
|
||||
function token_check() {
|
||||
$.ajax({
|
||||
type: "GET",
|
||||
url: 'http://localhost:7700/Users/token_check',
|
||||
headers: { 'Authorization': token },
|
||||
success: function () {
|
||||
fetchVersions();
|
||||
fetchVersionV();
|
||||
},
|
||||
error: function () {
|
||||
window.location.href = '/';
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 獲取修正版本資訊
|
||||
function fetchVersions() {
|
||||
$.ajax({
|
||||
type: "GET",
|
||||
url: `http://localhost:7700/api/Parking_Version?page=${currentPage}&pageSize=${recordsPerPage}`,
|
||||
headers: { 'Authorization': token },
|
||||
success: function (response) {
|
||||
let tableBody = $("#version_logs_table");
|
||||
tableBody.empty();
|
||||
if (response.versions.length === 0) {
|
||||
tableBody.append("<tr><td colspan='4'>沒有資料</td></tr>");
|
||||
} else {
|
||||
// 由新到舊排序版本紀錄
|
||||
response.versions.sort((a, b) => new Date(b.version_time) - new Date(a.version_time));
|
||||
|
||||
response.versions.forEach(version => {
|
||||
tableBody.append(`
|
||||
<tr>
|
||||
<td>${version.version_time}</td>
|
||||
<td>${version.version_name}</td>
|
||||
<td>${version.version_content}</td>
|
||||
<td>${version.version_version}</td>
|
||||
</tr>
|
||||
`);
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 獲取正式版本
|
||||
function fetchVersionV() {
|
||||
$.ajax({
|
||||
type: "GET",
|
||||
url: "http://localhost:7700/api/Parking_Version/version_v",
|
||||
headers: { 'Authorization': token },
|
||||
success: function (response) {
|
||||
let tableBody = $("#version_v_table");
|
||||
tableBody.empty();
|
||||
response.forEach(version => {
|
||||
tableBody.append(`
|
||||
<tr>
|
||||
<td>${version.version_v}</td>
|
||||
</tr>
|
||||
`);
|
||||
});
|
||||
},
|
||||
error: function (xhr) {
|
||||
alert(`獲取版本失敗: ${xhr.responseText}`);
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
<!--檢查token-->
|
||||
<script>
|
||||
var token
|
||||
function token_check() {
|
||||
// 检查本地存储中是否存在JWT令牌
|
||||
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>
|
||||
519
Parking_spaces/Views/Manager/Yuntech_all_car_table.cshtml
Normal file
519
Parking_spaces/Views/Manager/Yuntech_all_car_table.cshtml
Normal file
@ -0,0 +1,519 @@
|
||||
@{
|
||||
ViewData["Title"] = "車輛進出紀錄查詢";
|
||||
Layout = "~/Views/Shared/_Layout_Manager.cshtml";
|
||||
}
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-TW">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>@ViewData["Title"]</title>
|
||||
|
||||
<!-- 引入 Bootstrap CSS -->
|
||||
<link rel="stylesheet" href="/bootstrap_1/css/bootstrap.min.css">
|
||||
|
||||
<style>
|
||||
.table th, .table td {
|
||||
text-align: center;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.table th:nth-child(6), .table td:nth-child(6) {
|
||||
width: 120px; /* 設定星期欄位的寬度 */
|
||||
}
|
||||
|
||||
#loading {
|
||||
display: none;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
|
||||
.pagination-wrapper {
|
||||
position: relative;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
/* 上一頁下一頁 */
|
||||
#paginationContainer {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.page-item {
|
||||
display: inline-block;
|
||||
margin: 0 5px; /* 調整按鈕間距 */
|
||||
}
|
||||
|
||||
.page-link {
|
||||
padding: 10px 15px;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
border-radius: 5px;
|
||||
background-color: #ff007b;
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
|
||||
.page-link:hover {
|
||||
background-color: #ff007b; /* 滑鼠懸停效果 */
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container mt-4">
|
||||
<h1 class="text-center">查詢車輛進出紀錄</h1>
|
||||
<div class="col-12">
|
||||
<div class="card shadow mb-4" style="padding: 20px; border-radius: 10px; max-width: 100%;">
|
||||
<div class="card-header py-3 d-flex justify-content-between align-items-center">
|
||||
<h6 class="m-0 font-weight-bold text-primary">車輛進出紀錄查詢</h6>
|
||||
<div class="button-container">
|
||||
|
||||
<button class="btn btn-success" onclick="downloadCarLogsExcel()">下載指定車輛紀錄 Excel</button>
|
||||
<button class="btn btn-success" onclick="downloadAllCarLogsExcel()">下載所有車輛紀錄 Excel</button>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div>
|
||||
<label for="startDate">開始日期和時間:</label>
|
||||
<input type="datetime-local" id="startDate" class="form-control mb-2" />
|
||||
|
||||
<label for="in_Area">進入區域:</label>
|
||||
<select id="in_Area" class="form-control mb-2">
|
||||
<option value="none">不需要進入區域</option>
|
||||
<option value="1">大門口1</option>
|
||||
<option value="2">大門口2</option>
|
||||
<option value="3">整個大門口</option>
|
||||
<option value="4">南側門</option>
|
||||
<option value="5">學人宿舍</option>
|
||||
</select>
|
||||
|
||||
<label for="out_Area">出去區域:</label>
|
||||
<select id="out_Area" class="form-control mb-2">
|
||||
<option value="none">不需要出去區域</option>
|
||||
<option value="1">大門口1</option>
|
||||
<option value="2">大門口2</option>
|
||||
<option value="3">整個大門口</option>
|
||||
<option value="4">南側門</option>
|
||||
<option value="5">學人宿舍</option>
|
||||
</select>
|
||||
|
||||
<label for="endDate">結束日期和時間:</label>
|
||||
<input type="datetime-local" id="endDate" class="form-control mb-2" />
|
||||
<div style="display: flex; align-items: center; justify-content: space-between;">
|
||||
<button class="btn btn-primary mt-3" onclick="fetchCarLogs()">查詢紀錄</button>
|
||||
|
||||
<div style="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>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div id="loading">加載中...</div>
|
||||
<table class="table table-bordered mt-3">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>進入星期</th>
|
||||
<th>車牌號碼</th>
|
||||
<th>進入位置</th>
|
||||
<th>進入時間</th>
|
||||
<th>出去時間</th>
|
||||
<th>出去位置</th>
|
||||
<th>詳細資料</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="car_logs_table">
|
||||
<!-- 車輛進出紀錄會動態填充到這裡 -->
|
||||
</tbody>
|
||||
</table>
|
||||
<div id="noDataMessage" class="text-danger" style="display:none;">
|
||||
沒有符合條件的車輛進出紀錄。
|
||||
</div>
|
||||
|
||||
<nav aria-label="Page navigation" id="paginationContainer" style="display: none;">
|
||||
<ul class="pagination">
|
||||
<li class="page-item" id="prevPageItem" style="display: none;">
|
||||
<a class="page-link" href="#" onclick="changePage(currentPage - 1)">上一頁</a>
|
||||
</li>
|
||||
<li class="page-item" id="nextPageItem" style="display: none;">
|
||||
<a class="page-link" href="#" onclick="changePage(currentPage + 1)">下一頁</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<button class="btn btn-primary" id="homeButton" style="display: none;" onclick="goToHomePage()">首頁</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 模態框 -->
|
||||
<div class="modal fade" id="detailsModal" tabindex="-1" role="dialog" aria-labelledby="detailsModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="detailsModalLabel">車輛詳細資訊</h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p><strong>車牌號碼：</strong><span id="modal_license_plate"></span></p>
|
||||
<p><strong>進入位置：</strong><span id="modal_location"></span></p>
|
||||
<p><strong>進入時間：</strong><span id="modal_in_time"></span></p>
|
||||
<p><strong>出去時間：</strong><span id="modal_out_time"></span></p>
|
||||
<p><strong>出去位置：</strong><span id="modal_out_location"></span></p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">關閉</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
||||
<script>
|
||||
let currentPage = 1; // 當前頁碼
|
||||
const recordsPerPage = 50; // 每頁顯示的紀錄數
|
||||
let totalRecords = 0;
|
||||
|
||||
// 當頁面加載時自動檢查 token 和初始化輸入
|
||||
window.onload = async function() {
|
||||
await token_check();
|
||||
initializeInputs();
|
||||
};
|
||||
|
||||
// 單獨車牌搜尋
|
||||
function serch_click() {
|
||||
const licensePlate = document.getElementById('serch_text_id').value.trim();
|
||||
|
||||
if (!licensePlate) {
|
||||
alert("請輸入車牌號碼。");
|
||||
return;
|
||||
}
|
||||
|
||||
document.getElementById('noDataMessage').style.display = 'none';
|
||||
document.getElementById('paginationContainer').style.display = 'none';
|
||||
document.getElementById('loading').style.display = 'block';
|
||||
|
||||
const params = {
|
||||
LicensePlate: licensePlate
|
||||
};
|
||||
|
||||
// 進行車牌查詢
|
||||
fetch('http://localhost:7700/api/Yuntech_all_car_table/query/license_plate', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(params)
|
||||
})
|
||||
.then(response => {
|
||||
if (!response.ok) throw new Error('無法獲取資料，請稍後再試。');
|
||||
return response.json();
|
||||
})
|
||||
.then(data => {
|
||||
const logsTable = document.getElementById('car_logs_table');
|
||||
logsTable.innerHTML = '';
|
||||
|
||||
if (data.totalRecords === 0) {
|
||||
document.getElementById('noDataMessage').style.display = 'block';
|
||||
} else {
|
||||
|
||||
data.logs.forEach(log => {
|
||||
const row = document.createElement('tr');
|
||||
row.innerHTML = `
|
||||
<td>${log.record_date || '未有資料'}</td>
|
||||
<td>${log.license_plate_number || '未有資料'}</td>
|
||||
<td>${log.location || '未有資料'}</td>
|
||||
<td>${log.in_time || '未有資料'}</td>
|
||||
<td>${log.out_time || '未有資料'}</td>
|
||||
<td>${log.out_location || '未有資料'}</td>
|
||||
<td><button class="btn btn-info" onclick="showDetails(${JSON.stringify(log)})">詳細</button></td>
|
||||
`;
|
||||
logsTable.appendChild(row);
|
||||
});
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error fetching car logs:', error);
|
||||
alert('獲取車輛進出紀錄時出現錯誤，請稍後再試。');
|
||||
})
|
||||
.finally(() => {
|
||||
document.getElementById('loading').style.display = 'none';
|
||||
});
|
||||
}
|
||||
|
||||
// 初始化日期和區域選項
|
||||
function initializeInputs() {
|
||||
updateDateInputs(); // 設定日期
|
||||
fetchCarLogs(); // 自動呼叫函式以顯示車輛進出紀錄
|
||||
|
||||
// 每分鐘更新一次日期
|
||||
setInterval(updateDateInputs, 60 * 1000); // 每60秒更新一次
|
||||
}
|
||||
|
||||
// 更新輸入框中的日期
|
||||
function updateDateInputs() {
|
||||
const today = new Date();
|
||||
const startDateInput = document.getElementById('startDate');
|
||||
const endDateInput = document.getElementById('endDate');
|
||||
|
||||
// 設定 startDate 為昨天的00:00
|
||||
const yesterday = new Date(today);
|
||||
yesterday.setDate(today.getDate() - 1); // 將日期設為昨天
|
||||
startDateInput.value = formatDate(yesterday, true); // 00:00
|
||||
|
||||
// 設定 endDate 為今天的23:59
|
||||
endDateInput.value = formatDate(today, false); // 23:59
|
||||
}
|
||||
|
||||
// 格式化日期的輔助函數
|
||||
function formatDate(date, isStart) {
|
||||
const year = date.getFullYear();
|
||||
const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份從0開始
|
||||
const day = String(date.getDate()).padStart(2, '0');
|
||||
const hours = isStart ? '00' : '23';
|
||||
const minutes = isStart ? '00' : '59';
|
||||
|
||||
return `${year}-${month}-${day}T${hours}:${minutes}`;
|
||||
}
|
||||
|
||||
//進出紀錄資料顯示
|
||||
async function fetchCarLogs(page = 1) {
|
||||
const logsTable = document.getElementById('car_logs_table');
|
||||
const loadingIndicator = document.getElementById('loading');
|
||||
loadingIndicator.style.display = 'block';
|
||||
|
||||
const params = {
|
||||
StartDate: document.getElementById('startDate').value,
|
||||
EndDate: document.getElementById('endDate').value,
|
||||
InArea: document.getElementById('in_Area').value,
|
||||
OutArea: document.getElementById('out_Area').value,
|
||||
Page: page,
|
||||
RecordsPerPage: recordsPerPage
|
||||
};
|
||||
|
||||
try {
|
||||
const response = await fetch('http://localhost:7700/api/Yuntech_all_car_table/query', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(params)
|
||||
});
|
||||
if (!response.ok) throw new Error('無法獲取資料，請稍後再試。');
|
||||
|
||||
const data = await response.json();
|
||||
logsTable.innerHTML = '';
|
||||
totalRecords = data.totalRecords;
|
||||
const totalPages = Math.ceil(totalRecords / recordsPerPage);
|
||||
|
||||
if (data.logs.length === 0) {
|
||||
document.getElementById('noDataMessage').style.display = 'block';
|
||||
document.getElementById('paginationContainer').style.display = 'none';
|
||||
} else {
|
||||
document.getElementById('noDataMessage').style.display = 'none';
|
||||
|
||||
// **按照 in_time 或 record_date 降冪排序（新到舊）**
|
||||
data.logs.sort((a, b) => new Date(b.in_time || b.record_date) - new Date(a.in_time || a.record_date));
|
||||
|
||||
data.logs.forEach(log => {
|
||||
const weekdayText = log.record_date || "未有資料";
|
||||
|
||||
const row = document.createElement('tr');
|
||||
row.innerHTML = `
|
||||
<td>${weekdayText}</td>
|
||||
<td>${log.license_plate_number || '未有資料'}</td>
|
||||
<td>${log.location || '未有資料'}</td>
|
||||
<td>${log.in_time || '未有資料'}</td>
|
||||
<td>${log.out_time || '未有資料'}</td>
|
||||
<td>${log.out_location || '未有資料'}</td>
|
||||
<td><button class="btn btn-info" onclick="showDetails(${JSON.stringify(log)})">詳細</button></td>
|
||||
`;
|
||||
logsTable.appendChild(row);
|
||||
});
|
||||
|
||||
// 更新分頁按鈕
|
||||
updatePagination(totalPages, page);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error fetching car logs:', error);
|
||||
alert('獲取車輛進出紀錄時出現錯誤，請稍後再試。');
|
||||
} finally {
|
||||
loadingIndicator.style.display = 'none';
|
||||
}
|
||||
}
|
||||
|
||||
function updatePagination(totalPages, currentPage) {
|
||||
const paginationContainer = document.getElementById('paginationContainer');
|
||||
paginationContainer.innerHTML = '';
|
||||
paginationContainer.dataset.totalRecords = totalRecords;
|
||||
|
||||
// 顯示上一頁按鈕
|
||||
if (currentPage > 1) {
|
||||
const prevPageItem = document.createElement('li');
|
||||
prevPageItem.className = 'page-item';
|
||||
prevPageItem.innerHTML = `<a class="page-link btn btn-primary" href="#" onclick="changePage(${currentPage - 1})">上一頁</a>`;
|
||||
paginationContainer.appendChild(prevPageItem);
|
||||
}
|
||||
|
||||
// 顯示下一頁按鈕
|
||||
if (currentPage < totalPages) {
|
||||
const nextPageItem = document.createElement('li');
|
||||
nextPageItem.className = 'page-item';
|
||||
nextPageItem.innerHTML = `<a class="page-link btn btn-primary" href="#" onclick="changePage(${currentPage + 1})">下一頁</a>`;
|
||||
paginationContainer.appendChild(nextPageItem);
|
||||
}
|
||||
|
||||
paginationContainer.style.display = totalPages > 1 ? 'block' : 'none';
|
||||
}
|
||||
|
||||
function changePage(page) {
|
||||
const totalPages = Math.ceil(Number(document.getElementById('paginationContainer').dataset.totalRecords) / recordsPerPage);
|
||||
if (page < 1 || page > totalPages) return; // 確保不會小於 1 或超過總頁數
|
||||
fetchCarLogs(page); // 重新獲取該頁的數據
|
||||
}
|
||||
|
||||
function showDetails(log) {
|
||||
document.getElementById('modal_license_plate').innerText = log.license_plate_number || '未有資料';
|
||||
document.getElementById('modal_location').innerText = log.location || '未有資料';
|
||||
document.getElementById('modal_in_time').innerText = log.in_time || '未有資料';
|
||||
document.getElementById('modal_out_time').innerText = log.out_time || '未有資料';
|
||||
document.getElementById('modal_out_location').innerText = log.out_location || '未有資料';
|
||||
$('#detailsModal').modal('show'); // 顯示模態框
|
||||
}
|
||||
|
||||
function goToHomePage() {
|
||||
window.location.href = '/'; // 返回首頁
|
||||
}
|
||||
// 下載指定進出資料
|
||||
function downloadCarLogsExcel() {
|
||||
const startDateInput = document.getElementById('startDate').value;
|
||||
const endDateInput = document.getElementById('endDate').value;
|
||||
const in_Area = document.getElementById('in_Area').value;
|
||||
const out_Area = document.getElementById('out_Area').value;
|
||||
|
||||
// 將日期轉換為 ISO 格式
|
||||
const startDate = startDateInput ? new Date(startDateInput) : null;
|
||||
const endDate = endDateInput ? new Date(endDateInput) : null;
|
||||
|
||||
const queryParams = new URLSearchParams({
|
||||
StartDate: startDate ? startDate.toISOString() : null,
|
||||
EndDate: endDate ? endDate.toISOString() : null,
|
||||
InArea: in_Area !== 'none' ? in_Area : null,
|
||||
OutArea: out_Area !== 'none' ? out_Area : null,
|
||||
}).toString();
|
||||
|
||||
fetch(`http://localhost:7700/api/Yuntech_all_car_table/download-excel?${queryParams}`, {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
})
|
||||
.then(response => {
|
||||
if (!response.ok) {
|
||||
throw new Error('網絡響應出錯');
|
||||
}
|
||||
return response.blob();
|
||||
})
|
||||
.then(blob => {
|
||||
const url = window.URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
a.style.display = 'none';
|
||||
// 設定下載的檔名，格式為「由 {startDate} 到 {endDate}_Yuntech_car_table.xlsx」
|
||||
a.download = `由 ${startDate.toISOString().slice(0, 10)} 到 ${endDate.toISOString().slice(0, 10)}_Yuntech_car_table.xlsx`;
|
||||
a.href = url;
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
window.URL.revokeObjectURL(url);
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('獲取過程中出現問題:', error);
|
||||
alert('下載失敗，請稍後再試。');
|
||||
});
|
||||
}
|
||||
// 下載所有進出資料
|
||||
function downloadAllCarLogsExcel() {
|
||||
fetch(`http://localhost:7700/api/Yuntech_all_car_table/all-download-excel`, {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
})
|
||||
.then(response => {
|
||||
if (!response.ok) {
|
||||
throw new Error('網絡響應出錯');
|
||||
}
|
||||
return response.blob();
|
||||
})
|
||||
.then(blob => {
|
||||
const url = window.URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
a.style.display = 'none';
|
||||
a.href = url;
|
||||
a.download = `所有進出紀錄_${new Date().toISOString().slice(0, 10)}.xlsx`; // 設定下載的檔名
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
window.URL.revokeObjectURL(url);
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('獲取過程中出現問題:', error);
|
||||
alert('下載失敗，請稍後再試。');
|
||||
});
|
||||
}
|
||||
|
||||
// 檢查 token
|
||||
async function token_check() {
|
||||
const token = localStorage.getItem('token_park_space');
|
||||
try {
|
||||
const response = await $.ajax({
|
||||
type: "GET",
|
||||
url: 'http://localhost:7700/Users/token_check',
|
||||
headers: {
|
||||
'Authorization': token
|
||||
}
|
||||
});
|
||||
from_token_import_id();
|
||||
} catch (xhr) {
|
||||
window.location.href = '/';
|
||||
}
|
||||
}
|
||||
|
||||
async function from_token_import_id() {
|
||||
const token = localStorage.getItem('token_park_space');
|
||||
const response = await $.ajax({
|
||||
type: "GET",
|
||||
url: 'http://localhost:7700/Users/token-' + token,
|
||||
headers: {
|
||||
'Authorization': token
|
||||
}
|
||||
});
|
||||
from_id_import_user_data(response);
|
||||
}
|
||||
|
||||
async function from_id_import_user_data(id) {
|
||||
const token = localStorage.getItem('token_park_space');
|
||||
const response = await $.ajax({
|
||||
type: "GET",
|
||||
url: 'http://localhost:7700/Users/user_id-' + id,
|
||||
headers: {
|
||||
'Authorization': token
|
||||
}
|
||||
});
|
||||
const model = response.result;
|
||||
|
||||
if (model.lastname === "manager") {
|
||||
fetchCarLogs(); // 獲取車輛進出紀錄
|
||||
} else {
|
||||
window.location.href = '/';
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<!-- 引入 Bootstrap JS -->
|
||||
<script src="/bootstrap_1/js/bootstrap.bundle.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -83,10 +83,22 @@
|
||||
<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>
|
||||
<a class="collapse-item" asp-controller="Engineering" asp-action="ParkingLog"> 查詢車位數 </a>
|
||||
<a class="collapse-item" asp-controller="Engineering" asp-action="Yuntech_all_car_table"> 新查詢進出車輛 </a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<!-- Divider -->
|
||||
<!-- 版本介面與資訊 -->
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" asp-controller="Engineering" asp-action="Version">
|
||||
<i class="fas fa-fw fa-info-circle"></i>
|
||||
<span>版本資訊 : <span id="currentVersion">載入中...</span></span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<!-- Nav Item - Utilities Collapse Menu -->
|
||||
<!--
|
||||
<li class="nav-item">
|
||||
@ -450,7 +462,33 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 處裡正式版本資訊-->
|
||||
<script>
|
||||
|
||||
fetch('http://localhost:7700/api/Parking_Version/all_version', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
})
|
||||
.then(response => {
|
||||
if (!response.ok) {
|
||||
throw new Error('網路錯誤，無法獲取版本。');
|
||||
}
|
||||
return response.json();
|
||||
})
|
||||
.then(data => {
|
||||
|
||||
console.log(data);
|
||||
document.getElementById('currentVersion').innerText = data.map(v => v.version_v).join(', '); // 假設 version_v 是您需要顯示的欄位
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('錯誤:', error);
|
||||
document.getElementById('currentVersion').innerText = '無法獲取版本。';
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
<!-- Bootstrap core JavaScript-->
|
||||
<script src="~/bootstrap_1/vendor/jquery/jquery.min.js"></script>
|
||||
<script src="~/bootstrap_1/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
|
||||
@ -467,7 +505,8 @@
|
||||
<!-- Page level custom scripts -->
|
||||
<script src="~/bootstrap_1/js/demo/chart-area-demo.js"></script>
|
||||
<script src="~/bootstrap_1/js/demo/chart-pie-demo.js"></script>
|
||||
|
||||
|
||||
|
||||
|
||||
<!--登出-->
|
||||
<script>
|
||||
|
||||
@ -80,11 +80,23 @@
|
||||
<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>
|
||||
<a class="collapse-item" asp-controller="Manager" asp-action="ParkingLog"> 查詢車位數 </a>
|
||||
<!--3/3號開放 <a class="collapse-item" asp-controller="Manager" asp-action="Yuntech_all_car_table"> 新查詢進出車輛 </a> -->
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<!-- 版本介面與資訊 -->
|
||||
|
||||
<!-- 3/3號開放
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" asp-controller="Manager" asp-action="Version">
|
||||
<i class="fas fa-fw fa-info-circle"></i>
|
||||
<span>版本資訊 : <span id="currentVersion">載入中...</span></span>
|
||||
</a>
|
||||
</li>
|
||||
-->
|
||||
|
||||
|
||||
<!-- Nav Item - Utilities Collapse Menu -->
|
||||
<!--
|
||||
@ -449,7 +461,31 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 處裡正式版本資訊-->
|
||||
<script>
|
||||
|
||||
fetch('http://localhost:7700/api/Parking_Version/all_version', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
})
|
||||
.then(response => {
|
||||
if (!response.ok) {
|
||||
throw new Error('網路錯誤，無法獲取版本。');
|
||||
}
|
||||
return response.json();
|
||||
})
|
||||
.then(data => {
|
||||
|
||||
console.log(data);
|
||||
document.getElementById('currentVersion').innerText = data.map(v => v.version_v).join(', '); // 假設 version_v 是您需要顯示的欄位
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('錯誤:', error);
|
||||
document.getElementById('currentVersion').innerText = '無法獲取版本。';
|
||||
});
|
||||
</script>
|
||||
<!-- Bootstrap core JavaScript-->
|
||||
<script src="~/bootstrap_1/vendor/jquery/jquery.min.js"></script>
|
||||
<script src="~/bootstrap_1/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user