新增管理者模式

This commit is contained in:
威勝 張 2024-02-06 13:38:38 +08:00
parent 0e983cca4f
commit 3f9d7f5a4a
8 changed files with 2291 additions and 1 deletions

View File

@ -0,0 +1,31 @@
using Microsoft.AspNetCore.Mvc;
namespace Parking_spaces.Controllers
{
public class ManagerController : Controller
{
public IActionResult Manager_Index()
{
return View();
}
public IActionResult Manager_Violation()
{
return View();
}
public IActionResult Single_violation_detail(string id)
{
ViewBag.parking_spaces_name = id;
return View();
}
public IActionResult Yuntech_in_car()
{
return View();
}
public IActionResult Map_RTSP(string id)
{
return View();
}
}
}

View File

@ -0,0 +1,531 @@

@{
ViewData["Title"] = "Manager_Index";
Layout = "~/Views/Shared/_Layout_Manager.cshtml";
}
<h1>管理員模式</h1>
<div class="row">
<!--每日違規數量-->
<div class="col-xl-6 col-lg-6">
<div class="card shadow mb-8">
<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_violation_data_1()"></button>
</h6>
</div>
<div class="card-body">
<div class="chart-bar">
<canvas id="violation_car_Bar"></canvas>
</div>
</div>
</div>
</div>
<!--每日車流量-->
<div class="col-xl-6 col-lg-6">
<div class="card shadow mb-8">
<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_in_yuntech_data_1()"></button>
</h6>
</div>
<div class="card-body">
<div class="chart-area">
<canvas id="in_car_Bar"></canvas>
</div>
</div>
</div>
</div>
</div>
<br />
<script src="/bootstrap_1/vendor/chart.js/Chart.min.js"></script>
<!--設定數據圖數據-每日車流量-->
<script>
function set_in_yuntech_table(labels, dailyTrafficData) {
date = JSON.parse(JSON.stringify(labels));
values = JSON.parse(JSON.stringify(dailyTrafficData));
// 假設你有一些資料,例如每日車流量
var dailyTrafficData = dailyTrafficData
// 取得 canvas 元素
var ctx1 = document.getElementById('in_car_Bar')
// 使用 Chart.js 繪製長條圖
var myLineChart = new Chart(ctx1, {
type: 'line',
data: {
labels: date.reverse(),
datasets: [{
label: '車流量',
data: values.reverse(),
backgroundColor: 'rgba(75, 192, 192, 0.2)', // 設定背景色
borderColor: 'rgba(75, 192, 192, 1)', // 設定邊框色
pointHitRadius: 10,
pointBorderWidth: 2,
ineTension: 0.3,
pointRadius: 3,
pointHoverRadius: 3,
}]
},
options: {
responsive: true, // 啟用 responsive 設置
maintainAspectRatio: false, // 保持長寬比例
scales: {
y: {
beginAtZero: true
},
xAxes: {
gridLines: {
display: false // 移除 x 軸的網格線
}
}
}
}
});
}
function set_in_yuntech_table_1(labels, dailyTrafficData) {
date = JSON.parse(JSON.stringify(labels));
values = JSON.parse(JSON.stringify(dailyTrafficData));
// 假設你有一些資料,例如每日車流量
var dailyTrafficData = dailyTrafficData
// 取得 canvas 元素
var ctx = document.getElementById('in_car_Bar')
// 使用 Chart.js 繪製長條圖
var myBarChart = new Chart(ctx, {
type: 'bar',
data: {
labels: date.reverse(),
datasets: [{
label: '車流量',
data: values.reverse(),
backgroundColor: 'rgba(75, 192, 192, 0.2)', // 設定背景色
borderColor: 'rgba(75, 192, 192, 1)', // 設定邊框色
borderWidth: 1
}]
},
options: {
responsive: true, // 啟用 responsive 設置
maintainAspectRatio: false, // 保持長寬比例
scales: {
y: {
beginAtZero: true
}
}
}
});
}
</script>
<!--設定數據圖數據-每日違規數量-->
<script>
function set_violation_table(labels, dailyTrafficData) {
date = JSON.parse(JSON.stringify(labels));
values = JSON.parse(JSON.stringify(dailyTrafficData));
// 假設你有一些資料,例如每日違規數量
var dailyTrafficData = dailyTrafficData;
// 取得 canvas 元素
var ctx = document.getElementById('violation_car_Bar')
// 使用 Chart.js 繪製長條圖
var myBarChart = new Chart(ctx, {
type: 'bar',
data: {
labels: date.reverse(),
datasets: [{
label: '違規數量',
data: values.reverse(),
backgroundColor: 'rgba(255, 0, 0, 0.5)', // 設定半透明的紅色背景
borderColor: 'rgba(255, 0, 0, 1)', // 設定不透明的紅色邊框
borderWidth: 1
}]
},
options: {
responsive: true, // 啟用 responsive 設置
maintainAspectRatio: false, // 保持長寬比例
scales: {
y: {
beginAtZero: true
}
}
}
});
}
</script>
<!--獲取資料-->
<script>
function get_data(){
console.log("GET")
get_violation_data_1()
get_in_yuntech_data_1()
}
</script>
<!--獲取違規資料-->
<script>
var token_ckeck //= document.getElementById("token_ckeck_id").value
var position //職位
function get_violation_data_1() {
violation_car_list = []
//console.log("start")
//token_check = document.getElementById("token_check_id").value
//console.log(token_check)
$.ajax({
type: "GET",
url: "http://140.125.20.183:7700/api/Parking_spaces_violation_total_table",
data: {},
contentType: "application/json",
success: function (Model) {
get_violation_data_2(Model)
}
});
}
function get_violation_data_2(Model) {
if (Model.length > 0) {
for (var i = 0; i < Model.length; i++) {
var name = Model[i].parking_spaces_violation_name
////console.log(name)
$.ajax({
type: "GET",
url: "http://140.125.20.183:7700/api/Violation_car_table/violation_location_name-" + name,
data: {},
contentType: "application/json",
success: function (Model) {
set_violation_data_1(Model)
}
});
}
}
set_violation_data_3()
}
</script>
<!--設置違規資料-->
<script>
var date_list = []
var violation_car_list = []
function set_violation_data_1(Model) {
// 獲取當前日期
var today = new Date();
// 提取年、月、日
var year = today.getFullYear();
var month = today.getMonth() + 1; // 注意:月份是從 0 開始的,所以需要加 1
var day = today.getDate();
// 將月份和日期補零,以確保是兩位數
month = month < 10 ? '0' + month : month;
day = day < 10 ? '0' + day : day;
// 構建日期字符串格式YYYY-MM-DD
var todayDate = year + '-' + month + '-' + day;
if (Model.length > 0) {
var D = ""
for (var i = 0; i < Model.length; i++) {
// 假設你有一個包含日期時間的字符串
var dateTimeString = Model[i].create_data_time;
// 將字符串轉換為 Date 對象
var dateTime = new Date(dateTimeString);
// 提取日期部分
var year = dateTime.getFullYear();
var month = dateTime.getMonth() + 1; // 月份是從 0 開始的,所以要加 1
var day = dateTime.getDate();
// 將月份和日期補零,以確保是兩位數
month = month < 10 ? '0' + month : month;
day = day < 10 ? '0' + day : day;
// 構建日期字符串格式YYYY-MM-DD
var date = year + '-' + month + '-' + day;
// 將字符串轉換為 Date 對象
var startDate = new Date(date);
var endDate = new Date(todayDate);
// 計算天數差
var timeDifference = endDate - startDate;
var daysDifference = Math.floor(timeDifference / (1000 * 60 * 60 * 24));// 轉換為天數(毫秒 / 1000 / 60 / 60 / 24
if (daysDifference > 29) {
console.log(date_list)
break
}
if (D != date) {
D = date
var D_1 = new Date(D);
var MD = D_1.toLocaleDateString('en-US', { month: '2-digit', day: '2-digit' });
var hasValue = date_list.includes(MD);
if (hasValue == false) {
date_list.push(MD)
}
}
}
}
//console.log(date_list)
set_violation_data_2(Model)
}
function set_violation_data_2(Model) {
if (date_list.length > 0 && violation_car_list.length <= 0) {
for (var i = 0; i < date_list.length; i++) {
violation_car_list.push(0)
}
}
var today = new Date();
var year = today.getFullYear();
var month = today.getMonth() + 1; // 注意:月份是從 0 開始的,所以需要加 1
var day = today.getDate();
month = month < 10 ? '0' + month : month;
day = day < 10 ? '0' + day : day;
var todayDate = year + '-' + month + '-' + day;
if (Model.length > 0) {
var D = ""
for (var i = 0; i < Model.length; i++) {
// 假設你有一個包含日期時間的字符串
var dateTimeString = Model[i].create_data_time;
// 將字符串轉換為 Date 對象
var dateTime = new Date(dateTimeString);
// 提取日期部分
var year = dateTime.getFullYear();
var month = dateTime.getMonth() + 1; // 月份是從 0 開始的,所以要加 1
var day = dateTime.getDate();
// 將月份和日期補零,以確保是兩位數
month = month < 10 ? '0' + month : month;
day = day < 10 ? '0' + day : day;
// 構建日期字符串格式YYYY-MM-DD
var date = year + '-' + month + '-' + day;
// 將字符串轉換為 Date 對象
var startDate = new Date(date);
var endDate = new Date(todayDate);
// 計算天數差
var timeDifference = endDate - startDate;
var daysDifference = Math.floor(timeDifference / (1000 * 60 * 60 * 24));// 轉換為天數(毫秒 / 1000 / 60 / 60 / 24
////console.log(daysDifference)
if (daysDifference > date_list.length) {
break
}
var D_1 = new Date(date);
var MD = D_1.toLocaleDateString('en-US', { month: '2-digit', day: '2-digit' });
var index = date_list.indexOf(MD);
////console.log(index)
violation_car_list[index] = violation_car_list[index] + 1
}
}
}
function set_violation_data_3() {
// 等待 2000 毫秒2 秒)
setTimeout(function () {
set_violation_table(date_list, violation_car_list)
}, 200);
}
</script>
<!--獲取進入雲科資料-->
<script>
function get_in_yuntech_data_1() {
in_car_list = []
//console.log(token_check)
$.ajax({
type: "GET",
url: "http://140.125.20.183:7700/api/Yuntech_in_car_table",
data: {},
contentType: "application/json",
success: function (Model) {
//console.log(Model)
setTimeout(function () {
set_in_yuntech_data_1(Model)
}, 200);
}
});
}
</script>
<!--設置進入雲科資料-->
<script>
var in_car_list = []
function set_in_yuntech_data_1(Model) {
if (date_list.length > 0 && in_car_list.length <= 0) {
for (var i = 0; i < date_list.length; i++) {
in_car_list.push(0)
}
}
console.log(in_car_list)
var today = new Date();
var year = today.getFullYear();
var month = today.getMonth() + 1; // 注意:月份是從 0 開始的,所以需要加 1
var day = today.getDate();
month = month < 10 ? '0' + month : month;
day = day < 10 ? '0' + day : day;
var todayDate = year + '-' + month + '-' + day;
if (Model.length > 0) {
var D = ""
for (var i = 0; i < Model.length; i++) {
// 假設你有一個包含日期時間的字符串
var dateTimeString = Model[i].in_time;
// 將字符串轉換為 Date 對象
var dateTime = new Date(dateTimeString);
// 提取日期部分
var year = dateTime.getFullYear();
var month = dateTime.getMonth() + 1; // 月份是從 0 開始的,所以要加 1
var day = dateTime.getDate();
// 將月份和日期補零,以確保是兩位數
month = month < 10 ? '0' + month : month;
day = day < 10 ? '0' + day : day;
// 構建日期字符串格式YYYY-MM-DD
var date = year + '-' + month + '-' + day;
// 將字符串轉換為 Date 對象
var startDate = new Date(date);
var endDate = new Date(todayDate);
// 計算天數差
var timeDifference = endDate - startDate;
var daysDifference = Math.floor(timeDifference / (1000 * 60 * 60 * 24));// 轉換為天數(毫秒 / 1000 / 60 / 60 / 24
////console.log(daysDifference)
if (daysDifference > date_list.length) {
break
}
var D_1 = new Date(date);
var MD = D_1.toLocaleDateString('en-US', { month: '2-digit', day: '2-digit' });
var index = date_list.indexOf(MD);
////console.log(index)
in_car_list[index] = in_car_list[index] + 1
}
set_in_yuntech_data_3()
}
}
function set_in_yuntech_data_3() {
set_in_yuntech_table(date_list, in_car_list)
}
</script>
<!--檢查token-->
<script>
function token_check() {
// 检查本地存储中是否存在JWT令牌
var token = localStorage.getItem('token_park_space');
//console.log(token)
$.ajax({
type: "GET",
url: 'http://140.125.20.183:7700/Users/token_check',
headers: {
'Authorization': token
},
success: function (response) {
//console.log(response)
token_check = "true"
from_token_import_id()
},
error: function (xhr) {
token_check = "false"
window.location.href = '/';
// 处理错误响应,例如跳转到未授权页面
//window.location.href = 'https://example.com/unauthorized_page';
}
});
}
function from_token_import_id() {
var token = localStorage.getItem('token_park_space');
$.ajax({
type: "GET",
url: 'http://140.125.20.183:7700/Users/token-' + token,
headers: {
'Authorization': token
},
success: function (response) {
//console.log(response)
from_id_import_user_data(response)
}
});
}
function from_id_import_user_data(id) {
var token = localStorage.getItem('token_park_space');
$.ajax({
type: "GET",
url: 'http://140.125.20.183:7700/Users/user_id-' + id,
headers: {
'Authorization': token
},
success: function (model) {
model = model.result
position = model.lastname
console.log(position)
if (position == "manager") {
get_data()
}
else {
window.location.href = '/';
}
}
});
}
</script>
<!--開機自啟-->
<script>
window.onload = token_check;
</script>

View File

@ -0,0 +1,552 @@

@{
ViewData["Title"] = "Manager_Violation";
Layout = "~/Views/Shared/_Layout_Manager.cshtml";
}
<h1>校園總違規區域</h1>
<div class="size2">
<button class="btn btn-primary" onclick="add_violation_view.showModal();map_show_1()" id="add_violation_id">新增違規區域</button>
<!--<button class="btn btn-primary" onclick="add_park_space_view.showModal();map_show()" id="add_park_space_id">新增停車區</button>
<button class="btn btn-primary" onclick="add_violation_view.showModal();map_show_1()" id="add_violation_id">新增違規區域</button>
<button style="height:30px;float:right " class="btn btn-outline-secondary" onclick="serch_click()">搜尋</button>
<input type="text" style="float:right" placeholder="請輸入您的車牌" id="serch_text_id" />-->
<table class="table">
<thead>
<tr>
<th>
總違規區域
</th>
<th>
</th>
</tr>
</thead>
<tbody id="demo">
</tbody>
</table>
</div>
<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">
每日違規數量
<button class="btn btn-info btn-circle btn-sm" style="float:right; background-image: url('/image/icon/F5.png'); background-size: cover;" onclick="get_violation_data_1()"></button>
</h6>
</div>
<div class="card-body">
<div class="chart-bar">
<canvas id="violation_car_Bar"></canvas>
</div>
</div>
</div>
</div>
<!--違規次數-->
<div class="col-xl-4 col-lg-4">
<div class="card shadow mb-8">
<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_recidivst_1()"></button>
</h6>
</div>
<div class="card-body">
<div class="chart-bar">
<canvas id="violation_car_time_Bar"></canvas>
</div>
</div>
</div>
</div>
</div>
<!--設定數據圖數據-違規次數-->
<script>
function set_violation_time_table(labels, dailyTrafficData) {
date = JSON.parse(JSON.stringify(labels));
values = JSON.parse(JSON.stringify(dailyTrafficData));
// 假設你有一些資料,例如違規次數
var dailyTrafficData = dailyTrafficData;
// 取得 canvas 元素
var ctx = document.getElementById('violation_car_time_Bar')
//生成10種顏色
function generateColors_1(numColors) {
var colors = [];
for (var i = 0; i < numColors; i++) {
var ratio = i / (numColors - 1);
var r = Math.round(255 * (1 - ratio) + 0 * ratio);
var g = Math.round(0 * (1 - ratio) + 0 * ratio);
var b = Math.round(0 * (1 - ratio) + 0 * ratio);
var color = rgbToHex(r, g, b);
colors.push(color);
}
return colors;
}
function generateColors_2(numColors) {
var colors = [];
for (var i = 0; i < numColors; i++) {
var ratio = i / (numColors - 1);
var r = Math.round(170 * (1 - ratio) + 0 * ratio);
var g = Math.round(30 * (1 - ratio) + 32 * ratio);
var b = Math.round(20 * (1 - ratio) + 32 * ratio);
var color = rgbToHex(r, g, b);
colors.push(color);
}
return colors;
}
function rgbToHex(r, g, b) {
return '#' + componentToHex(r) + componentToHex(g) + componentToHex(b);
}
function componentToHex(c) {
var hex = c.toString(16);
return hex.length == 1 ? '0' + hex : hex;
}
var numColors = 10;
var backgroundColors = generateColors_1(numColors);
var hoverBackgroundColors = generateColors_2(numColors);
// 使用 Chart.js 繪製圓餅圖
var myBarChart = new Chart(ctx, {
type: 'pie',//line(線圖),pie(圓餅圖),bar(長條圖)
data: {
labels: date.reverse(),
datasets: [{
label: '違規次數',
data: values.reverse(),
backgroundColor: backgroundColors,
hoverBackgroundColor: hoverBackgroundColors,
borderWidth: 1
}]
},
options: {
responsive: true, // 啟用 responsive 設置
maintainAspectRatio: false, // 保持長寬比例
scales: {
y: {
beginAtZero: true
}
}
}
});
}
</script>
<!--設定數據圖數據-每日違規數量-->
<script>
function set_violation_table(labels, dailyTrafficData) {
date = JSON.parse(JSON.stringify(labels));
values = JSON.parse(JSON.stringify(dailyTrafficData));
// 假設你有一些資料,例如每日違規數量
var dailyTrafficData = dailyTrafficData;
// 取得 canvas 元素
var ctx = document.getElementById('violation_car_Bar')
// 使用 Chart.js 繪製長條圖
var myBarChart = new Chart(ctx, {
type: 'bar',
data: {
labels: date.reverse(),
datasets: [{
label: '違規數量',
data: values.reverse(),
backgroundColor: 'rgba(255, 0, 0, 0.5)', // 設定半透明的紅色背景
borderColor: 'rgba(255, 0, 0, 1)', // 設定不透明的紅色邊框
borderWidth: 1
}]
},
options: {
responsive: true, // 啟用 responsive 設置
maintainAspectRatio: false, // 保持長寬比例
scales: {
y: {
beginAtZero: true
}
}
}
});
}
</script>
<!--獲取資料-->
<script>
var token_ckeck //= document.getElementById("token_ckeck_id").value
var position //職位
function get_data() {
console.log("start")
//token_check = document.getElementById("token_check_id").value
console.log(token_check)
$.ajax({
type: "GET",
url: "http://140.125.20.183:7700/api/Parking_spaces_violation_total_table",
data: {},
contentType: "application/json",
success: function (Model) {
console.log(Model)
set_data(Model)
get_recidivst_1()
get_violation_data_1()
}
});
}
</script>
<!--放置資料-->
<script>
function set_data(Model) {
table = "<tr>";
//console.log(Model.length)
if (Model.length > 0) {
for (var i = 0; i < Model.length; i++) {
if (Model[i].parking_spaces_violation_name != null) {
table += "<td>" + Model[i].parking_spaces_violation_name + "</td>"
table += "<td>"
if (token_check == "true") {
table += '<button class="btn btn-outline-success " onclick="detail_data(' + "'" + Model[i].parking_spaces_violation_name + "'" + ')">詳細</button>' + ' ' + ' '
}
}
table += "</tr>"
table += "<tr>"
}
}
document.getElementById("demo").innerHTML = table
}
</script>
<!--前往詳細頁面-->
<script>
function detail_data(name) {
window.location = "/Manager/Single_violation_detail/" + name;
}
</script>
<!--抓出違規慣犯-->
<script>
function get_recidivst_1() {
$.ajax({
type: "GET",
url: "http://140.125.20.183:7700/api/Violation_car_table/recidivists",
data: {},
contentType: "application/json",
success: function (Model) {
//console.log(Model)
set_recidivst_1(Model)
}
});
}
function set_recidivst_1(Model) {
var car_list = []
var occurrences_list = []
if (Model.length > 0) {
for (var i = 0; i < Model.length; i++) {
if (Model[i].licensePlateNumber != "") {
car_list.push(Model[i].licensePlateNumber)
occurrences_list.push(Model[i].occurrences)
if (car_list.length >= 10) {
break
}
}
}
}
console.log(car_list)
console.log(occurrences_list)
set_violation_time_table(car_list, occurrences_list)
}
</script>
<!--獲取違規資料-->
<script>
var token_ckeck //= document.getElementById("token_ckeck_id").value
var position //職位
function get_violation_data_1() {
violation_car_list = []
//console.log("start")
//token_check = document.getElementById("token_check_id").value
//console.log(token_check)
$.ajax({
type: "GET",
url: "http://140.125.20.183:7700/api/Parking_spaces_violation_total_table",
data: {},
contentType: "application/json",
success: function (Model) {
get_violation_data_2(Model)
}
});
}
function get_violation_data_2(Model) {
if (Model.length > 0) {
for (var i = 0; i < Model.length; i++) {
var name = Model[i].parking_spaces_violation_name
////console.log(name)
$.ajax({
type: "GET",
url: "http://140.125.20.183:7700/api/Violation_car_table/violation_location_name-" + name,
data: {},
contentType: "application/json",
success: function (Model) {
set_violation_data_1(Model)
}
});
}
}
set_violation_data_3()
}
</script>
<!--設置違規資料-->
<script>
var date_list = []
var violation_car_list = []
function set_violation_data_1(Model) {
// 獲取當前日期
var today = new Date();
// 提取年、月、日
var year = today.getFullYear();
var month = today.getMonth() + 1; // 注意:月份是從 0 開始的,所以需要加 1
var day = today.getDate();
// 將月份和日期補零,以確保是兩位數
month = month < 10 ? '0' + month : month;
day = day < 10 ? '0' + day : day;
// 構建日期字符串格式YYYY-MM-DD
var todayDate = year + '-' + month + '-' + day;
if (Model.length > 0) {
var D = ""
for (var i = 0; i < Model.length; i++) {
// 假設你有一個包含日期時間的字符串
var dateTimeString = Model[i].create_data_time;
// 將字符串轉換為 Date 對象
var dateTime = new Date(dateTimeString);
// 提取日期部分
var year = dateTime.getFullYear();
var month = dateTime.getMonth() + 1; // 月份是從 0 開始的,所以要加 1
var day = dateTime.getDate();
// 將月份和日期補零,以確保是兩位數
month = month < 10 ? '0' + month : month;
day = day < 10 ? '0' + day : day;
// 構建日期字符串格式YYYY-MM-DD
var date = year + '-' + month + '-' + day;
// 將字符串轉換為 Date 對象
var startDate = new Date(date);
var endDate = new Date(todayDate);
// 計算天數差
var timeDifference = endDate - startDate;
var daysDifference = Math.floor(timeDifference / (1000 * 60 * 60 * 24));// 轉換為天數(毫秒 / 1000 / 60 / 60 / 24
if (daysDifference > 29) {
console.log(date_list)
break
}
if (D != date) {
D = date
var D_1 = new Date(D);
var MD = D_1.toLocaleDateString('en-US', { month: '2-digit', day: '2-digit' });
var hasValue = date_list.includes(MD);
if (hasValue == false) {
date_list.push(MD)
}
}
}
}
//console.log(date_list)
set_violation_data_2(Model)
}
function set_violation_data_2(Model) {
if (date_list.length > 0 && violation_car_list.length <= 0) {
for (var i = 0; i < date_list.length; i++) {
violation_car_list.push(0)
}
}
var today = new Date();
var year = today.getFullYear();
var month = today.getMonth() + 1; // 注意:月份是從 0 開始的,所以需要加 1
var day = today.getDate();
month = month < 10 ? '0' + month : month;
day = day < 10 ? '0' + day : day;
var todayDate = year + '-' + month + '-' + day;
if (Model.length > 0) {
var D = ""
for (var i = 0; i < Model.length; i++) {
// 假設你有一個包含日期時間的字符串
var dateTimeString = Model[i].create_data_time;
// 將字符串轉換為 Date 對象
var dateTime = new Date(dateTimeString);
// 提取日期部分
var year = dateTime.getFullYear();
var month = dateTime.getMonth() + 1; // 月份是從 0 開始的,所以要加 1
var day = dateTime.getDate();
// 將月份和日期補零,以確保是兩位數
month = month < 10 ? '0' + month : month;
day = day < 10 ? '0' + day : day;
// 構建日期字符串格式YYYY-MM-DD
var date = year + '-' + month + '-' + day;
// 將字符串轉換為 Date 對象
var startDate = new Date(date);
var endDate = new Date(todayDate);
// 計算天數差
var timeDifference = endDate - startDate;
var daysDifference = Math.floor(timeDifference / (1000 * 60 * 60 * 24));// 轉換為天數(毫秒 / 1000 / 60 / 60 / 24
////console.log(daysDifference)
if (daysDifference > date_list.length) {
break
}
var D_1 = new Date(date);
var MD = D_1.toLocaleDateString('en-US', { month: '2-digit', day: '2-digit' });
var index = date_list.indexOf(MD);
////console.log(index)
violation_car_list[index] = violation_car_list[index] + 1
}
}
}
function set_violation_data_3() {
// 等待 2000 毫秒2 秒)
setTimeout(function () {
set_violation_table(date_list, violation_car_list)
}, 200);
}
</script>
<!--檢查token-->
<script>
function token_check() {
// 检查本地存储中是否存在JWT令牌
var token = localStorage.getItem('token_park_space');
console.log(token)
$.ajax({
type: "GET",
url: 'http://140.125.20.183:7700/Users/token_check',
headers: {
'Authorization': token
},
success: function (response) {
console.log(response)
token_check = "true"
from_token_import_id()
},
error: function (xhr) {
token_check = "false"
window.location.href = '/';
// 处理错误响应,例如跳转到未授权页面
//window.location.href = 'https://example.com/unauthorized_page';
}
});
}
function from_token_import_id() {
var token = localStorage.getItem('token_park_space');
$.ajax({
type: "GET",
url: 'http://140.125.20.183:7700/Users/token-' + token,
headers: {
'Authorization': token
},
success: function (response) {
console.log(response)
from_id_import_user_data(response)
}
});
}
function from_id_import_user_data(id) {
var token = localStorage.getItem('token_park_space');
$.ajax({
type: "GET",
url: 'http://140.125.20.183:7700/Users/user_id-' + id,
headers: {
'Authorization': token
},
success: function (model) {
model = model.result
position = model.lastname
console.log(position)
if (position == "manager") {
get_data()
}
else {
window.location.href = '/';
}
}
});
}
</script>
<!--開機自啟-->
<script>
window.onload = token_check;
</script>

View File

@ -0,0 +1,8 @@

@{
ViewData["Title"] = "Map_RTSP";
Layout = "~/Views/Shared/_Layout_Manager.cshtml";
}
<h1>Map_RTSP</h1>

View File

@ -0,0 +1,378 @@

@{
ViewData["Title"] = "Single_violation_detail";
Layout = "~/Views/Shared/_Layout_Engineering.cshtml";
var parking_spaces_name = ViewBag.parking_spaces_name;
}
<input type="hidden" id="parking_spaces_name_id" value=@parking_spaces_name />
<h1>違規車輛</h1>
<div class="size2">
起始時間 : <input type="date" id="start_date_id">
結束時間 : <input type="date" id="end_date_id">
<button style="height:30px; " class="btn btn-outline-secondary" onclick="serch_date_click()">搜尋</button>
<button style="height:30px;float:right " class="btn btn-outline-secondary" onclick="serch_click()">搜尋</button>
<input type="text" style="float:right" placeholder="請輸入車牌 ex:ABC4321" id="serch_text_id" />
<table class="table">
<thead>
<tr>
<th>
違規區域
</th>
<th>
車牌號碼
</th>
<!--<th>
進入圖片
</th>
<th>
違規圖片
</th>-->
<th>
時間
</th>
<th></th>
</tr>
</thead>
<tbody id="demo">
</tbody>
</table>
</div>
<!--車輛詳細-彈跳視窗-->
<div>
<dialog id="detail_car_data_view" style="width:100%;">
<table class="table">
<button class="btn btn-danger" style="float:right" onclick="detail_car_data_view.close();"> 關閉 </button>
<button class="btn btn-warning" style="float:right" onclick="updata_violation_car_get()"> 更新資料 </button><p></p>
<thead>
<tr>
<th>
違規區域
</th>
<th>
車牌號碼
</th>
<th>
進入圖片
</th>
<th>
違規圖片
</th>
<th>
時間
</th>
</tr>
</thead>
<tbody id="detail_car_data">
</tbody>
</table>
<button class="btn btn-outline-success" style="float:left" onclick="previous_detail_data()"> Previous</button>
<button class="btn btn-outline-success" style="float:right" onclick="next_detail_data()"> Next </button>
</dialog>
</div>
<!--獲取資料-->
<script>
var All_Model
var serial_number=0
function get_data() {
var name = document.getElementById("parking_spaces_name_id").value
//console.log(name)
$.ajax({
type: "GET",
url: "http://140.125.20.183:7700/api/Violation_car_table/violation_location_name-" + name,
data: {},
contentType: "application/json",
success: function (Model) {
//console.log(Model)
All_Model = Model
set_data(Model)
}
});
}
</script>
<!--放置資料-->
<script>
function set_data(Model) {
table = "<tr>";
console.log(Model.length)
if (Model.length > 0) {
for (var i = 0; i < Model.length; i++) {
if (Model[i].violation_location_name != null) {
table += "<td>" + Model[i].violation_location_name + "</td>"
table += "<td>" + Model[i].license_plate_number + "</td>"
//table += "<td>" + "</td>"
//table += "<td>" + "</td>"
// table += "<td>" + "<img src=" + Model[i].car_start_img + ' style="width:100%"' + ">" + "</td>"
// table += "<td>" + "<img src=" + Model[i].car_end_img + ' style="width:100% "' + ">" + "</td>"
// 将字符串转换为 Date 对象
var timestampDt = new Date(Model[i].create_data_time);
// 转换为其他格式
var options = { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', second: '2-digit' };
var formattedDate = timestampDt.toLocaleDateString('en-US', options);
table += "<td>" + formattedDate + "</td>"
table += "<td>" + '<button class="btn btn-outline-success" onclick="detail_data(' + "'" + Model[i].violation_location_name + "','" + i+ "','" + Model[i].create_data_time + "'" + ')">詳細</button>'
table += '<button class="btn btn-danger" onclick="delet_data(' + "'" + Model[i].violation_location_name + "','" + Model[i].license_plate_number + "','" + Model[i].create_data_time + "'" + ')">刪除</button>' + "</td>"
}
table += "</tr>"
table += "<tr>"
}
}
document.getElementById("demo").innerHTML = table
}
</script>
<!--更新違規車輛資料-->
<script>
function updata_violation_car_get() {
var violation_location_name = document.getElementById('parking_spaces_name_id').value
var time = document.getElementById('create_data_time_id').innerHTML
console.log(time)
$.ajax({
type: "GET",
url: "http://140.125.20.183:7700/api/Violation_car_table/location_nam-" + violation_location_name + "-time-" + time,
data: {},
contentType: "application/json",
success: function (Model) {
//console.log(Model)
updata_violation_car_put(Model)
}
});
}
function updata_violation_car_put(Model) {
var violation_location_name = document.getElementById('parking_spaces_name_id').value
var time = document.getElementById('create_data_time_id').innerHTML
var license_plate_number = document.getElementById('license_plate_number_text_id').value
Model.license_plate_number = license_plate_number
//console.log(Model)
var stringify_obj = JSON.stringify(Model);
$.ajax({
type: "PUT",
url: "http://140.125.20.183:7700/api/Violation_car_table/location_nam-" + violation_location_name + "-time-" + time,
data: stringify_obj,
contentType: "application/json",
success: function (Model) {
// console.log(Model)
//updata_violation_car_put(Model)
}
});
}
</script>
<!--下一筆資料-->
<script>
function next_detail_data() {
serial_number = Number(serial_number) + 1
if (serial_number >= All_Model.length) {
window.alert('無下一筆資料')
serial_number = All_Model.length-1
return
}
//console.log(serial_number)
//console.log(All_Model[serial_number])
detail_data(All_Model[serial_number]['violation_location_name'], serial_number, All_Model[serial_number]['create_data_time'])
}
</script>
<!--上一筆資料-->
<script>
function previous_detail_data() {
serial_number = Number(serial_number) - 1
if (serial_number < 0){
window.alert('無上一筆資料')
serial_number = 0
return
}
// console.log(serial_number)
//console.log(All_Model[serial_number])
detail_data(All_Model[serial_number]['violation_location_name'], serial_number, All_Model[serial_number]['create_data_time'])
}
</script>
<!--違規車輛詳細-->
<script>
function detail_data(location_name, car_serial_number, time) {
//console.log(location_name)
//console.log(All_Model[car_serial_number])
//console.log(time)
serial_number = car_serial_number
$.ajax({
type: "GET",
url: "http://140.125.20.183:7700/api/Violation_car_table/location_nam-" + location_name + "-time-" + time,
data: {},
contentType: "application/json",
success: function (Model) {
console.log(Model)
table = "<tr>";
table += "<td>" + Model.violation_location_name + "</td>"
table += "<td>" + '<input type="text" id = "license_plate_number_text_id" value="'+Model.license_plate_number+ '"/>' + "</td>"
//table += "<td>" + "</td>"
//table += "<td>" + "</td>"
table += "<td>" + "<img src=" + Model.car_start_img + ' style="width:100%"' + ">" + "</td>"
table += "<td>" + "<img src=" + Model.car_end_img + ' style="width:100% "' + ">" + "</td>"
table += "<td id = 'create_data_time_id' >" + Model.create_data_time + "</td>"
document.getElementById("detail_car_data").innerHTML = table
}
});
detail_car_data_view.showModal();
}
</script>
<!--透過車牌號碼搜尋-->
<script>
function serch_click() {
var license_plate_number = document.getElementById("serch_text_id").value
if (license_plate_number == "") {
get_data()
}
$.ajax({
type: "GET",
url: "http://140.125.20.183:7700/api/Violation_car_table/license_plate_number-" + license_plate_number,
data: {},
contentType: "application/json",
success: function (Model) {
console.log(Model)
All_Model = Model
set_data(Model)
}
});
}
</script>
<!--透過日期搜尋紀錄-->
<script>
function serch_date_click() {
var name = document.getElementById("parking_spaces_name_id").value
var start_date = document.getElementById("start_date_id").value
var end_date = document.getElementById("end_date_id").value
console.log(start_date)
$.ajax({
type: "GET",
url: "http://140.125.20.183:7700/api/Violation_car_table/location_name_1_-" + name + "-start_time-" + start_date + "-end_time-" + end_date,
data: {},
contentType: "application/json",
success: function (Model) {
console.log(Model)
All_Model = Model
set_data(Model)
}
});
}
</script>
<!--刪除資料-->
<script>
function delet_data(location_name , name , time) {
console.log(location_name)
console.log(name)
console.log(time)
$.ajax({
type: "DELETE",
url: "http://140.125.20.183:7700/api/Violation_car_table/location_name-" + location_name + "-time-" + time,
data: {},
contentType: "application/json",
success: function (msg) {
console.log(msg)
get_data()
}
});
}
</script>
<!--檢查token-->
<script>
function token_check() {
// 检查本地存储中是否存在JWT令牌
var token = localStorage.getItem('token_park_space');
console.log(token)
$.ajax({
type: "GET",
url: 'http://140.125.20.183:7700/Users/token_check',
headers: {
'Authorization': token
},
success: function (response) {
console.log(response)
token_check = "true"
from_token_import_id()
},
error: function (xhr) {
token_check = "false"
window.location.href = '/';
// 处理错误响应,例如跳转到未授权页面
//window.location.href = 'https://example.com/unauthorized_page';
}
});
}
function from_token_import_id() {
var token = localStorage.getItem('token_park_space');
$.ajax({
type: "GET",
url: 'http://140.125.20.183:7700/Users/token-' + token,
headers: {
'Authorization': token
},
success: function (response) {
console.log(response)
from_id_import_user_data(response)
}
});
}
function from_id_import_user_data(id) {
var token = localStorage.getItem('token_park_space');
$.ajax({
type: "GET",
url: 'http://140.125.20.183:7700/Users/user_id-' + id,
headers: {
'Authorization': token
},
success: function (model) {
model = model.result
position = model.lastname
console.log(position)
if (position == "manager") {
get_data()
}
else {
window.location.href = '/';
}
}
});
}
</script>
<!--開機自啟-->
<script>
window.onload = token_check;
</script>

View File

@ -0,0 +1,310 @@

@{
ViewData["Title"] = "Yuntech_in_car";
Layout = "~/Views/Shared/_Layout_Manager.cshtml";
}
<h1>進入車輛</h1>
<div class="size2">
起始時間 : <input type="date" id="start_date_id">
結束時間 : <input type="date" id="end_date_id">
<button style="height:30px; " class="btn btn-outline-secondary" onclick="serch_date_click()">搜尋</button>
<button style="height:30px;float:right " class="btn btn-outline-secondary" onclick="serch_click()">搜尋</button>
<input type="text" style="float:right" placeholder="請輸入車牌 ex:ABC4321" id="serch_text_id" />
<table class="table">
<thead>
<tr>
<th>
區域
</th>
<th>
車牌號碼
</th>
<!--<th>
進入圖片
</th>
<th>
違規圖片
</th>-->
<th>
時間
</th>
<th></th>
</tr>
</thead>
<tbody id="demo">
</tbody>
</table>
</div>
<!--車輛詳細-彈跳視窗-->
<div>
<dialog id="detail_car_data_view" style="width:100%;">
<table class="table">
<button class="btn btn-danger" style="float:right" onclick="detail_car_data_view.close();"> 關閉 </button>
<p></p>
<thead>
<tr>
<th>
區域
</th>
<th>
車牌號碼
</th>
<th>
進入圖片
</th>
<th>
時間
</th>
</tr>
</thead>
<tbody id="detail_car_data">
</tbody>
</table>
<button class="btn btn-outline-success" style="float:left" onclick="previous_detail_data()"> Previous</button>
<button class="btn btn-outline-success" style="float:right" onclick="next_detail_data()"> Next </button>
</dialog>
</div>
<!--獲取資料-->
<script>
var All_Model
var serial_number = 0
function get_data() {
var name = "大門口"
//console.log(name)
$.ajax({
type: "GET",
url: "http://140.125.20.183:7700/api/Yuntech_in_car_table/location-" + name,
data: {},
contentType: "application/json",
success: function (Model) {
//console.log(Model)
All_Model = Model
set_data(Model)
}
});
}
</script>
<!--放置資料-->
<script>
function set_data(Model) {
table = "<tr>";
console.log(Model.length)
if (Model.length > 0) {
for (var i = 0; i < Model.length; i++) {
if (Model[i].location != null) {
table += "<td>" + Model[i].location + "</td>"
table += "<td>" + Model[i].license_plate_number + "</td>"
// 将字符串转换为 Date 对象
var timestampDt = new Date(Model[i].in_time);
// 转换为其他格式
var options = { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', second: '2-digit' };
var formattedDate = timestampDt.toLocaleDateString('en-US', options);
table += "<td>" + formattedDate + "</td>"
table += "<td>" + '<button class="btn btn-outline-success" onclick="detail_data(' + "'" + Model[i].location + "','" + i + "','" + Model[i].in_time + "'" + ')">詳細</button>'
}
table += "</tr>"
table += "<tr>"
}
}
document.getElementById("demo").innerHTML = table
}
</script>
<!--下一筆資料-->
<script>
function next_detail_data() {
serial_number = Number(serial_number) + 1
if (serial_number >= All_Model.length) {
window.alert('無下一筆資料')
serial_number = All_Model.length - 1
return
}
//console.log(serial_number)
//console.log(All_Model[serial_number])
detail_data(All_Model[serial_number]['location'], serial_number, All_Model[serial_number]['in_time'])
}
</script>
<!--上一筆資料-->
<script>
function previous_detail_data() {
serial_number = Number(serial_number) - 1
if (serial_number < 0) {
window.alert('無上一筆資料')
serial_number = 0
return
}
// console.log(serial_number)
//console.log(All_Model[serial_number])
detail_data(All_Model[serial_number]['location'], serial_number, All_Model[serial_number]['in_time'])
}
</script>
<!--車輛詳細-->
<script>
function detail_data(location_name, car_serial_number, time) {
//console.log(location_name)
//console.log(All_Model[car_serial_number])
//console.log(time)
serial_number = car_serial_number
$.ajax({
type: "GET",
url: "http://140.125.20.183:7700/api/Yuntech_in_car_table/location_name-" + location_name + "-time-" + time,
data: {},
contentType: "application/json",
success: function (Model) {
console.log(Model)
table = "<tr>";
table += "<td>" + Model.location + "</td>"
table += "<td>" + '<input type="text" id = "license_plate_number_text_id" value="' + Model.license_plate_number + '"/>' + "</td>"
//table += "<td>" + "</td>"
//table += "<td>" + "</td>"
table += "<td>" + "<img src=" + Model.car_img + ' style="width:80%"' + ">" + "</td>"
table += "<td id = 'create_data_time_id' >" + Model.in_time + "</td>"
document.getElementById("detail_car_data").innerHTML = table
}
});
detail_car_data_view.showModal();
}
</script>
<!--透過車牌號碼搜尋-->
<script>
function serch_click() {
var license_plate_number = document.getElementById("serch_text_id").value
if (license_plate_number == "") {
get_data()
}
$.ajax({
type: "GET",
url: "http://140.125.20.183:7700/api/Yuntech_in_car_table/license_plate_number-" + license_plate_number,
data: {},
contentType: "application/json",
success: function (Model) {
console.log(Model)
All_Model = Model
set_data(Model)
}
});
}
</script>
<!--透過日期搜尋紀錄-->
<script>
function serch_date_click() {
var name = "大門口"
var start_date = document.getElementById("start_date_id").value
var end_date = document.getElementById("end_date_id").value
console.log(start_date)
$.ajax({
type: "GET",
url: "http://140.125.20.183:7700/api/Yuntech_in_car_table/location_name_1_-" + name + "-start_time-" + start_date + "-end_time-" + end_date,
data: {},
contentType: "application/json",
success: function (Model) {
console.log(Model)
All_Model = Model
set_data(Model)
}
});
}
</script>
<!--檢查token-->
<script>
function token_check() {
// 检查本地存储中是否存在JWT令牌
var token = localStorage.getItem('token_park_space');
console.log(token)
$.ajax({
type: "GET",
url: 'http://140.125.20.183:7700/Users/token_check',
headers: {
'Authorization': token
},
success: function (response) {
console.log(response)
token_check = "true"
from_token_import_id()
},
error: function (xhr) {
token_check = "false"
window.location.href = '/';
// 处理错误响应,例如跳转到未授权页面
//window.location.href = 'https://example.com/unauthorized_page';
}
});
}
function from_token_import_id() {
var token = localStorage.getItem('token_park_space');
$.ajax({
type: "GET",
url: 'http://140.125.20.183:7700/Users/token-' + token,
headers: {
'Authorization': token
},
success: function (response) {
console.log(response)
from_id_import_user_data(response)
}
});
}
function from_id_import_user_data(id) {
var token = localStorage.getItem('token_park_space');
$.ajax({
type: "GET",
url: 'http://140.125.20.183:7700/Users/user_id-' + id,
headers: {
'Authorization': token
},
success: function (model) {
model = model.result
position = model.lastname
console.log(position)
if (position == "manager") {
get_data()
}
else {
window.location.href = '/';
}
}
});
}
</script>
<!--開機自啟-->
<script>
window.onload = token_check;
</script>

View File

@ -249,7 +249,7 @@
}
else if (position == "manager") {
//document.getElementById("position_id").innerHTML = "<p " + ' onclick="manager_mode()"' + '>校園總停車區域-管理者模式</p>'
document.getElementById("position_id").innerHTML = '校園總停車區域-管理者模式'
document.getElementById("position_id").innerHTML = "<p " + ' onclick="manager_mode()"' + '>校園總停車區域-管理者模式</p>'
}
else{
document.getElementById("position_id").innerHTML ='校園總停車區域'
@ -364,6 +364,9 @@
function engineer_mode() {
window.location = "/Engineering/Engineering_Index";
}
function manager_mode() {
window.location = "/Manager/Manager_Index";
}
</script>

View File

@ -0,0 +1,477 @@
<!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>工程模式</title>
<!-- Custom fonts for this template-->
<link href="~/bootstrap_1/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="~/bootstrap_1/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">-->
<a class="sidebar-brand d-flex align-items-center justify-content-center" asp-area="" asp-controller="Park_spaces" asp-action="Parking_spaces_total_table">
<!--
<div class="sidebar-brand-icon rotate-n-15">
<i class="fas fa-laugh-wink"></i>
</div>
<div class="sidebar-brand-text mx-3">工程模式 <sup>2</sup></div>-->
<div class="sidebar-brand-text mx-3">
<img class="img-profile rounded-circle" style="width:20%" src="~/bootstrap_1/img/Yuntech.png">
停車位
</div>
</a>
<!-- Divider -->
<hr class="sidebar-divider my-0">
<!-- Nav Item - Dashboard -->
<li class="nav-item active">
<!--<a class="nav-link" href="/Engineering/Engineering_Index">-->
<a class="nav-link" asp-area="" asp-controller="Manager" asp-action="Manager_Index">
<i class="fas fa-fw fa-tachometer-alt"></i>
<span>管理員模式</span>
</a>
</li>
<!-- Divider -->
<!--<hr class="sidebar-divider">-->
<!-- Heading -->
<div class="sidebar-heading">
設定介面
</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>設定參數</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" asp-controller="Manager" asp-action="Manager_Violation"> 違規區域</a>
<a class="collapse-item" asp-controller="Manager" asp-action="Yuntech_in_car"> 進入車輛</a>
<a class="collapse-item" asp-controller="Manager" asp-action="Map_RTSP"> 即時影像</a>
</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">
<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>
<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>
<span class="badge badge-danger badge-counter">7</span>
</a>
<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">碼農</span>
<img class="img-profile rounded-circle"
src="~/bootstrap_1/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" onclick="Logout_clicked()">
<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">
@RenderBody()
</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 &copy; Your Website 2021</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="~/bootstrap_1/vendor/jquery/jquery.min.js"></script>
<script src="~/bootstrap_1/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Core plugin JavaScript-->
<script src="~/bootstrap_1/vendor/jquery-easing/jquery.easing.min.js"></script>
<!-- Custom scripts for all pages-->
<script src="~/bootstrap_1/js/sb-admin-2.min.js"></script>
<!-- Page level plugins -->
<script src="~/bootstrap_1/vendor/chart.js/Chart.min.js"></script>
<!-- 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>
function Logout_clicked() {
localStorage.removeItem('token_park_space');
window.location.href = '/';
}
</script>
</body>
</html>