parking-html/Parking_spaces/Views/Manager/Manager_Violation.cshtml
2024-02-14 21:39:44 +08:00

565 lines
18 KiB
Plaintext
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

@{
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://localhost:5174/api/Parking_spaces_violation_total_table",
data: {},
contentType: "application/json",
headers: {
'Authorization': token
},
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://localhost:5174/api/Violation_car_table/recidivists",
data: {},
contentType: "application/json",
headers: {
'Authorization': token
},
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://localhost:5174/api/Parking_spaces_violation_total_table",
data: {},
contentType: "application/json",
headers: {
'Authorization': token
},
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://localhost:5174/api/Violation_car_table/violation_location_name-" + name,
data: {},
contentType: "application/json",
headers: {
'Authorization': token
},
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>
var token
function token_check() {
// 检查本地存储中是否存在JWT令牌
token = localStorage.getItem('token_park_space');
console.log(token)
$.ajax({
type: "GET",
url: 'http://localhost:5174/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:5174/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:5174/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>