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

Second upload

Browse Source
This commit is contained in:
qi_0527 2024-10-03 18:10:21 +08:00
parent 5d4886e806
commit b2a5ee9d8a
2 changed files with 105 additions and 134 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -8,8 +8,10 @@
.switch { .switch {
position: relative; position: relative;
display: inline-block; display: inline-block;
width: 50px; width: 50px; /* 寬度 */
height: 24px; height: 20px; /* 高度調整 */
padding: 2px; /* 內邊距，讓開關有一些間距 */
margin: 0; /* 外邊距 */
} }
.switch input { .switch input {
@ -21,10 +23,10 @@
.slider { .slider {
position: absolute; position: absolute;
cursor: pointer; cursor: pointer;
top: 0; top: 0; /* 確保滑塊與開關的上邊緣對齊 */
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0; /* 底部對齊，保持和外部高度一致 */
background-color: #ccc; background-color: #ccc;
-webkit-transition: .4s; -webkit-transition: .4s;
transition: .4s; transition: .4s;
@ -34,10 +36,10 @@
.slider:before { .slider:before {
position: absolute; position: absolute;
content: ""; content: "";
height: 20px; height: 16px; /* 調整圓點的高度 */
width: 20px; width: 16px; /* 調整圓點的寬度 */
left: 2px; left: 2px; /* 圓點的左邊距 */
top: 2px; top: 2px; /* 圓點的上邊距 */
background-color: white; background-color: white;
-webkit-transition: .4s; -webkit-transition: .4s;
transition: .4s; transition: .4s;
@ -45,17 +47,15 @@
} }
input:checked + .slider { input:checked + .slider {
background-color: #6f42c1 background-color: #6f42c1; /* 選中時的背景顏色 */
} }
input:checked + .slider:before { input:checked + .slider:before {
-webkit-transform: translateX(26px); -webkit-transform: translateX(26px); /* 選中時，圓點移動的距離 */
-ms-transform: translateX(26px); -ms-transform: translateX(26px);
transform: translateX(26px); transform: translateX(26px);
} }
</style> </style>
<!--MAP--> <!--MAP-->
<link rel="stylesheet" <link rel="stylesheet"
href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
@ -72,7 +72,7 @@
} }
#myMap { #myMap {
height: 50vh; height: 30vh;
} }
#img_id { #img_id {
@ -83,64 +83,11 @@
</style> </style>
<h1>工程模式</h1> <h1>工程模式</h1>
<div class="row">
<!--即時影像-->
<div class="col-xl-8 col-lg-8">
<div class="card shadow mb-8">
<div class="card-header py-3">
<h6 class="m-0 font-weight-bold text-primary">即時影像</h6>
</div>
<div class="card-body">
<div id="myMap"></div>
</div>
</div>
</div>
<!--演算法狀態-->
<div class="col-xl-4 col-lg-4">
<div class="card shadow mb-4">
<!-- Card Header - Dropdown -->
<div class="card-header py-3">
<h6 class="m-0 font-weight-bold text-primary">演算法狀態</h6>
</div>
<!-- Card Body -->
<div>
<table class="table">
<thead>
<tr>
<th>
演算法名稱
</th>
<th>
狀態
</th>
</tr>
</thead>
<tbody id="demo">
</tbody>
</table>
</div>
</div>
</div>
</div>
<br />
<div class="row"> <div class="row">
<!--每日違規數量--> <!--每日違規數量-->
<div class="col-xl-8 col-lg-8"> <div class="col-xl-8 col-lg-8">
<div class="card shadow mb-8"> <div class="card shadow mb-4">
<!-- 將 mb-8 改為 mb-4 -->
<div class="card-header py-3"> <div class="card-header py-3">
<h6 class="m-0 font-weight-bold text-primary"> <h6 class="m-0 font-weight-bold text-primary">
每日違規數量 每日違規數量
@ -153,42 +100,61 @@
</div> </div>
</div> </div>
</div> </div>
<!--即時影像-->
<div class="card shadow mb-4">
<div class="card-header py-3">
<h6 class="m-0 font-weight-bold text-primary">即時影像</h6>
</div>
<div class="card-body">
<div id="myMap"></div>
</div>
</div>
</div> </div>
<!--字幕機狀態-->
<!--演算法狀態-->
<div class="col-xl-4 col-lg-4"> <div class="col-xl-4 col-lg-4">
<div class="card shadow mb-4"> <div class="card shadow mb-4">
<!-- Card Header - Dropdown -->
<div class="card-header py-3"> <div class="card-header py-3">
<h6 class="m-0 font-weight-bold text-primary"> <h6 class="m-0 font-weight-bold text-primary">演算法狀態</h6>
字幕機狀態<button class="btn btn-info btn-circle btn-sm" style="float:right; background-image: url('/image/icon/F5.png'); background-size: cover;" onclick="get_LED_data()"></button>
</h6>
</div> </div>
<!-- Card Body -->
<div> <div>
<table class="table"> <table class="table">
<thead> <thead>
<tr> <tr>
<th> <th>演算法名稱</th>
停車場位置 <th>狀態</th>
</th>
<th>
字幕機IP
</th>
<th>
顯示參數
</th>
</tr> </tr>
</thead> </thead>
<tbody id="demo"></tbody>
</table>
</div>
</div>
<tbody id="LED_table"> <!--字幕機狀態-->
</tbody> <div class="card shadow mb-4">
<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_LED_data()"></button>
</h6>
</div>
<div>
<table class="table">
<thead>
<tr>
<th>停車場位置</th>
<th>字幕機IP</th>
<th>顯示參數</th>
</tr>
</thead>
<tbody id="LED_table"></tbody>
</table> </table>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<br /> <!-- 總車位與月租Excel 文件 及 校園車位信息 -->
<!-- 總車位與月租Excel 文件 及 校園車位信息 -->
<style> <style>
.table th, .table td { .table th, .table td {
text-align: center; /* 居中對齊 */ text-align: center; /* 居中對齊 */
@ -202,54 +168,55 @@
width: 200px; /* 根據需要調整寬度 */ width: 200px; /* 根據需要調整寬度 */
} }
</style> </style>
<div class="col-xl-8 col-lg-8"> <div class="col-xl-8 col-lg-8">
<div class="card shadow mb-4"> <div class="card shadow mb-4">
<div class="card-header py-3"> <div class="card-header py-3">
<h6 class="m-0 font-weight-bold text-primary"> <h6 class="m-0 font-weight-bold text-primary">
下載 總車位與月租Excel 文件 及 校園車位信息 下載 總車位與月租Excel 文件 及 校園車位信息
<button class="btn btn-info btn-circle btn-sm" style="float:right; background-image: url('/image/icon/F5.png'); background-size: cover;" onclick="get_yuntech_parking_data()"></button> <button class="btn btn-info btn-circle btn-sm" style="float:right; background-image: url('/image/icon/F5.png'); background-size: cover;" onclick="get_yuntech_parking_data()"></button>
</h6> </h6>
</div>
<div class="card-body">
<!-- 下載 Excel 文件按鈕 -->
<div class="mb-3">
<button class="btn btn-primary" onclick="downloadExcel()">即時車位下載 Excel</button>
</div> </div>
<div class="card-body">
<!-- 下載 Excel 文件按鈕 -->
<div class="mb-3">
<button class="btn btn-primary" onclick="downloadExcel()">即時車位下載 Excel</button>
</div>
<!-- 校園總車位數量表格 --> <!-- 校園總車位數量表格 -->
<div> <div>
<h6 class="font-weight-bold text-primary">校園總車位數量</h6> <h6 class="font-weight-bold text-primary">校園總車位數量</h6>
<table class="table table-bordered"> <table class="table table-bordered">
<thead> <thead>
<tr> <tr>
<th>總車位</th> <th>總車位</th>
<th>剩餘車位</th> <th>剩餘車位</th>
</tr> </tr>
</thead> </thead>
<tbody id="parking_all_table">` <tbody id="parking_all_table">
<!-- 動態更新校園總車位與剩餘車位 --> `
</tbody> <!-- 動態更新校園總車位與剩餘車位 -->
</table> </tbody>
</div> </table>
</div>
<!-- 校園當前車流量表格 --> <!-- 校園當前車流量表格 -->
<div> <div>
<h6 class="font-weight-bold text-primary">校園當前車流量</h6> <h6 class="font-weight-bold text-primary">校園當前車流量</h6>
<table class="table table-bordered"> <table class="table table-bordered">
<thead> <thead>
<tr> <tr>
<th>類別</th> <th>類別</th>
<th>數量</th> <th>數量</th>
</tr> </tr>
</thead> </thead>
<tbody id="monthly_table"> <tbody id="monthly_table">
<!-- 動態更新月租與臨停車輛數據 --> <!-- 動態更新月租與臨停車輛數據 -->
</tbody> </tbody>
</table> </table>
</div>
</div> </div>
</div> </div>
</div> </div>
</div>
@ -264,7 +231,7 @@
</div> </div>
</dialog> </dialog>
</div> </div>
<!--Excel下載--> <!--Excel下載-->
<script> <script>
function downloadExcel() { function downloadExcel() {
fetch('http://localhost:7700/api/ParkingLogs/DownloadCurrentStatusExcel', { fetch('http://localhost:7700/api/ParkingLogs/DownloadCurrentStatusExcel', {

6
Parking_spaces/Views/Engineering/ParkingLog.cshtml
View File

@ -135,10 +135,14 @@
document.getElementById('paginationContainer').style.display = 'none'; document.getElementById('paginationContainer').style.display = 'none';
} else { } else {
document.getElementById('noDataMessage').style.display = 'none'; // 隱藏無數據提示 document.getElementById('noDataMessage').style.display = 'none'; // 隱藏無數據提示
// Sort logs by timestamp
data.logs.sort((a, b) => new Date(a.timestamp) - new Date(b.timestamp));
data.logs.forEach(log => { data.logs.forEach(log => {
const row = document.createElement('tr'); const row = document.createElement('tr');
row.innerHTML = ` row.innerHTML = `
<td>${new Date(log.timestamp).toLocaleString('zh-TW')}</td> <td>${new Date(log.timestamp).toLocaleString('zh-TW', { hour12: false })}</td>
<td>${log.dayOfWeek}</td> <td>${log.dayOfWeek}</td>
<td>${log.totalParkingSpaces}</td> <td>${log.totalParkingSpaces}</td>
<td>${log.remainingSpaces}</td> <td>${log.remainingSpaces}</td>