Second upload
This commit is contained in:
parent
5d4886e806
commit
b2a5ee9d8a
|
|
@ -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', {
|
||||||
|
|
@ -288,13 +255,13 @@
|
||||||
const options = { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', hour12: false };
|
const options = { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', hour12: false };
|
||||||
const formattedDate = now.toLocaleDateString('zh-TW', options).replace(/\//g, '-'); // 格式化日期
|
const formattedDate = now.toLocaleDateString('zh-TW', options).replace(/\//g, '-'); // 格式化日期
|
||||||
const weekDay = now.toLocaleString('zh-TW', { weekday: 'long' }); // 獲取星期幾
|
const weekDay = now.toLocaleString('zh-TW', { weekday: 'long' }); // 獲取星期幾
|
||||||
|
|
||||||
|
|
||||||
// 設定下載檔案名稱
|
// 設定下載檔案名稱
|
||||||
a.download = `即時車位_${weekDay}_${formattedDate}.xlsx`;
|
a.download = `即時車位_${weekDay}_${formattedDate}.xlsx`;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
document.body.appendChild(a);
|
document.body.appendChild(a);
|
||||||
a.click();
|
a.click();
|
||||||
a.remove();
|
a.remove();
|
||||||
|
|
@ -682,7 +649,7 @@
|
||||||
|
|
||||||
|
|
||||||
<!--獲取月租臨停資料-->
|
<!--獲取月租臨停資料-->
|
||||||
<script>
|
<script>
|
||||||
function get_monthly_rent_data() {
|
function get_monthly_rent_data() {
|
||||||
$.ajax({
|
$.ajax({
|
||||||
type: "GET",
|
type: "GET",
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user