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