新增管理者模式

Parking_spaces/Controllers/ManagerController.cs

@@ -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();
+        }
+    }
+}

Parking_spaces/Views/Manager/Manager_Index.cshtml

@@ -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>
+
+

Parking_spaces/Views/Manager/Manager_Violation.cshtml

@@ -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>

Parking_spaces/Views/Manager/Map_RTSP.cshtml

@@ -0,0 +1,8 @@
+
+@{
+    ViewData["Title"] = "Map_RTSP";
+    Layout = "~/Views/Shared/_Layout_Manager.cshtml";
+}
+
+<h1>Map_RTSP</h1>
+

Parking_spaces/Views/Manager/Single_violation_detail.cshtml

@@ -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>

Parking_spaces/Views/Manager/Yuntech_in_car.cshtml

@@ -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>

Parking_spaces/Views/Park_spaces/Parking_spaces_total_table.cshtml

@@ -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>
 
 

Parking_spaces/Views/Shared/_Layout_Manager.cshtml

@@ -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>