From 0208780488e93fed2709bfc50447422ccfa46211 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A8=81=E5=8B=9D=20=E5=BC=B5?= <leo890808678@gmail.com>
Date: Mon, 19 Feb 2024 11:43:31 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0=E7=AE=A1=E7=90=86=E8=80=85?=
 =?UTF-8?q?=E6=A8=A1=E5=BC=8F=20=E6=96=B0=E5=A2=9E=E9=80=B2=E5=85=A5?=
 =?UTF-8?q?=E6=A0=A1=E5=9C=92100=E7=AD=86=E8=B3=87=E6=96=99=E8=A6=81?=
 =?UTF-8?q?=E6=8F=9B=E9=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Engineering/Engineering_Index.cshtml      |   4 -
 .../Views/Engineering/Yuntech_in_car.cshtml   | 127 ++++-
 .../Views/Manager/Manager_Violation.cshtml    | 151 +-----
 Parking_spaces/Views/Manager/Map_RTSP.cshtml  | 509 +++++++++++++++++-
 .../Views/Manager/Yuntech_in_car.cshtml       | 118 +++-
 5 files changed, 753 insertions(+), 156 deletions(-)

diff --git a/Parking_spaces/Views/Engineering/Engineering_Index.cshtml b/Parking_spaces/Views/Engineering/Engineering_Index.cshtml
index 25b40e0..389e19f 100644
--- a/Parking_spaces/Views/Engineering/Engineering_Index.cshtml
+++ b/Parking_spaces/Views/Engineering/Engineering_Index.cshtml
@@ -99,10 +99,6 @@
                 <h6 class="m-0 font-weight-bold text-primary">即時影像</h6>
             </div>
             <div class="card-body">
-                <!--
-                <button class="btn btn-outline-info" onclick="Yuntech_RTSP()">雲科即時影像</button>-->
-                <br />
-                <br />
                 <div id="myMap"></div>
 
             </div>
diff --git a/Parking_spaces/Views/Engineering/Yuntech_in_car.cshtml b/Parking_spaces/Views/Engineering/Yuntech_in_car.cshtml
index 6f32ae5..87bbb13 100644
--- a/Parking_spaces/Views/Engineering/Yuntech_in_car.cshtml
+++ b/Parking_spaces/Views/Engineering/Yuntech_in_car.cshtml
@@ -38,11 +38,28 @@
 
         <tbody id="demo">
         </tbody>
-
-
     </table>
+    <div class="row">
+        <div class="col-xl-1 col-lg-1">
+            <div>
+                <button class="btn btn-outline-secondary" onclick="fetchData_Up()">上一頁</button>
+            </div>
+
+        </div>
+        <div class="col-xl-10 col-lg-10">
+
+        </div>
+        <div class="col-xl-1 col-lg-1">
+            <div>
+                <button class="btn btn-outline-secondary" onclick="fetchData_Down()">下一頁</button>
+            </div>
+
+        </div>
+    </div>
+
 </div>
 
+
 <!--車輛詳細-彈跳視窗-->
 <div>
     <dialog id="detail_car_data_view" style="width:100%;">
@@ -84,12 +101,53 @@
 <script>
     var All_Model
     var serial_number = 0
+    var car_table_num = 0
     function get_data() {
         var name = "大門口"
         //console.log(name)
         $.ajax({
             type: "GET",
-            url: "http://140.125.20.183:7700/api/Yuntech_in_car_table",
+            url: "http://140.125.20.183:7700/api/Yuntech_in_car_table/Amount-" + car_table_num,
+            data: {},
+            headers: {
+                'Authorization': token
+            },
+            contentType: "application/json",
+            headers: {
+                'Authorization': token
+            },
+            success: function (Model) {
+                //console.log(Model)
+                All_Model =  Model
+                set_data(Model)
+            }
+        });
+        /*
+        // 監聽捲動事件
+        window.addEventListener("scroll", function () {
+            // 判斷是否捲動到底部
+            if (window.innerHeight + window.scrollY >= document.body.offsetHeight) {
+                // 執行抓取資料的函式
+                fetchData();
+            }
+        });
+        */
+    }
+
+
+    // 定義抓取資料的函式
+    function fetchData_Up() {
+        car_table_num =  car_table_num - 100
+        if (car_table_num < 0) {
+            window.alert('無上一筆資料')
+            car_table_num = 0
+            return
+        }
+        var name = "大門口"
+        //console.log(name)
+        $.ajax({
+            type: "GET",
+            url: "http://140.125.20.183:7700/api/Yuntech_in_car_table/Amount-" + car_table_num,
             data: {},
             headers: {
                 'Authorization': token
@@ -102,17 +160,41 @@
                 //console.log(Model)
                 All_Model = Model
                 set_data(Model)
-
             }
         });
     }
+
+    function fetchData_Down() {
+        car_table_num = car_table_num + 100
+        var name = "大門口"
+        //console.log(name)
+        $.ajax({
+            type: "GET",
+            url: "http://140.125.20.183:7700/api/Yuntech_in_car_table/Amount-" + car_table_num,
+            data: {},
+            headers: {
+                'Authorization': token
+            },
+            contentType: "application/json",
+            headers: {
+                'Authorization': token
+            },
+            success: function (Model) {
+                //console.log(Model)
+                All_Model = Model
+                set_data(Model)
+            }
+        });
+
+    }
+
 </script>
 
 <!--放置資料-->
 <script>
-
     function set_data(Model) {
-        table = "<tr>";
+        document.getElementById("demo").innerHTML = ''
+        var table = "<tr>";
         console.log(Model.length)
         if (Model.length > 0) {
             for (var i = 0; i < Model.length; i++) {
@@ -134,6 +216,35 @@
 
             }
         }
+        
+        document.getElementById("demo").innerHTML = table
+        // 移動到最上面
+        window.scrollTo(0, 0);
+    }
+
+    function set_data_license_plate_and_date(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>
@@ -222,7 +333,7 @@
                 console.log(Model)
                 All_Model = Model
                 
-                set_data(Model)
+                set_data_license_plate_and_date(Model)
 
             }
         });
@@ -250,7 +361,7 @@
             success: function (Model) {
                 console.log(Model)
                 All_Model = Model
-                set_data(Model)
+                set_data_license_plate_and_date(Model)
 
             }
         });
diff --git a/Parking_spaces/Views/Manager/Manager_Violation.cshtml b/Parking_spaces/Views/Manager/Manager_Violation.cshtml
index f459a72..2cff8cd 100644
--- a/Parking_spaces/Views/Manager/Manager_Violation.cshtml
+++ b/Parking_spaces/Views/Manager/Manager_Violation.cshtml
@@ -313,177 +313,48 @@
     var token_ckeck //= document.getElementById("token_ckeck_id").value
     var position //職位
     function get_violation_data_1() {
+        day = 30
         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",
+            url: "http://140.125.20.183:7700/api/Violation_car_table/get_day_violation-" + day,
             data: {},
             contentType: "application/json",
             headers: {
                 'Authorization': token
             },
             success: function (Model) {
-                get_violation_data_2(Model)
-
+                //get_violation_data_2(Model)
+                console.log(Model)
+                set_violation_data_1(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",
-                    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;
-
+        var date_list = []
+        var violation_car_list = []
         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 D_1 = new Date(Model[i]['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
-
+                date_list.push(MD)
+                violation_car_list.push(Model[i]['occurrences'])
             }
         }
-
-    }
-
-    function set_violation_data_3() {
-        // 等待 2000 毫秒（2 秒）
-        setTimeout(function () {
-            set_violation_table(date_list, violation_car_list)
-        }, 200);
+        set_violation_table(date_list, violation_car_list)
     }
 
 </script>
diff --git a/Parking_spaces/Views/Manager/Map_RTSP.cshtml b/Parking_spaces/Views/Manager/Map_RTSP.cshtml
index 9f6a94d..75d4dc3 100644
--- a/Parking_spaces/Views/Manager/Map_RTSP.cshtml
+++ b/Parking_spaces/Views/Manager/Map_RTSP.cshtml
@@ -34,7 +34,20 @@
 </style>
 
 <h1>即時影像</h1>
-<button class="btn btn-outline-info" onclick="Yuntech_RTSP()">雲科即時影像</button>
+
+<div>
+    <dialog id="RTSP_view" style="width:80%;">
+        <div>
+            <p id="choose_cam_id"></p>
+            <button class="btn btn-danger" style="float:right" onclick="RTSP_Close();"> 關閉</button>
+            <img id="img_id" />
+        </div>
+    </dialog>
+</div>
+
+
+
+<div id="myMap"></div>
 
 
 
@@ -47,4 +60,496 @@
     function Yuntech_RTSP() {
         window.open("http://140.125.50.178:7006/", "_blank");
     }
-</script>
\ No newline at end of file
+</script>
+
+
+<!--串流影像-->
+<script>
+    var IP_1
+    var stop = false
+
+    function CAM_RTSP(IP) {
+        console.log(IP)
+        IP_1 = IP
+        $.ajax({
+            type: "GET",
+            url: 'http://140.125.20.183:7705/IP/' + IP,
+            headers: {
+                'Authorization': token
+            },
+            success: function (response) {
+                stop = false
+                RTSP_START(response)
+                token_check = "true"
+                //from_token_import_id()
+            },
+            error: function (xhr) {
+                console.log("111")
+                window.alert("相機未連線");
+            }
+
+        });
+    }
+
+    function CAM_RTSP_1() {
+        console.log(IP_1)
+        $.ajax({
+            type: "GET",
+            url: 'http://140.125.20.183:7705/IP/' + IP_1,
+            headers: {
+                'Authorization': token
+            },
+            success: function (response) {
+                //webcam_view.showModal()
+                RTSP_START(response)
+
+                token_check = "true"
+                //from_token_import_id()
+            },
+
+        });
+    }
+
+    function CAM_RTSP_2(IP) {
+        console.log(IP)
+        IP_1 = IP
+        $.ajax({
+            type: "GET",
+            url: 'http://140.125.50.178:5000/IP/' + IP,
+            headers: {
+                'Authorization': token
+            },
+            success: function (response) {
+                stop = false
+                RTSP_START_2(response)
+                token_check = "true"
+                //from_token_import_id()
+            },
+            error: function (xhr) {
+                console.log("111")
+                window.alert("相機未連線");
+            }
+
+        });
+    }
+
+    function CAM_RTSP_3() {
+        console.log(IP_1)
+        $.ajax({
+            type: "GET",
+            url: 'http://140.125.50.178:5000/IP/' + IP_1,
+            headers: {
+                'Authorization': token
+            },
+            success: function (response) {
+                //webcam_view.showModal()
+                RTSP_START_2(response)
+
+                token_check = "true"
+                //from_token_import_id()
+            },
+
+        });
+    }
+</script>
+
+
+<!--開啟視窗並串流-->
+<script>
+    function RTSP_START(img_base_64) {
+        //console.log(img)
+        img = document.getElementById("img_id")
+        img.src = img_base_64
+        if (stop == false) {
+            setTimeout('CAM_RTSP_1()', 20);
+        }
+
+    }
+
+    function RTSP_START_2(img_base_64) {
+        //console.log(img)
+        img = document.getElementById("img_id")
+        img.src = img_base_64
+        if (stop == false) {
+            setTimeout('CAM_RTSP_3()', 20);
+        }
+
+    }
+</script>
+
+<!--關閉串流-->
+<script>
+    function RTSP_Close() {
+        RTSP_view.close()
+        img = document.getElementById("img_id")
+        img.src = ''
+        stop = true
+    }
+</script>
+
+<!--map_show_停車場位置-->
+<script>
+    var map
+    function map_show() {
+        var centerCoordinates = [23.691951, 120.535318]; // Replace with your desired coordinates
+        map = L.map("myMap", {
+            center: centerCoordinates,
+            zoom: 17
+        });
+
+        //放置圖標
+        var cam_icon = L.icon({
+
+            iconUrl: '/image/icon/cam.png',
+            iconSize: [34, 34], // size of the icon
+            iconAnchor: [27.3, 11.35], // point of the icon which will correspond to marker's location
+        });
+
+        for (var i = 0; i < location_name_list.length; i++) {
+            var location = [location_lat_list[i], location_lng_list[i]];
+            cam_ip = L.marker(location, {
+                icon: cam_icon,
+                title: "",
+                opacity: 1.0
+            }).addTo(map);
+        };
+
+        for (var i = 0; i < Y_location_name_list.length; i++) {
+            var location = [Y_location_lat_list[i], Y_location_lng_list[i]];
+            cam_ip = L.marker(location, {
+                icon: cam_icon,
+                title: "",
+                opacity: 1.0
+            }).addTo(map);
+        };
+
+
+        // 載入圖資
+        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+            attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
+        }).addTo(map);
+
+
+
+
+        const popup = L.popup();
+        function onMapClick(e) {
+            lat = e.latlng.lat; // 緯度
+            lng = e.latlng.lng; // 經度
+
+            //自己的
+            for (var i = 0; i < location_name_list.length; i++) {
+                var location = [location_lat_list[i], location_lng_list[i]];
+                if (isDifferenceGreaterThan5Percent(location[0], lat) < 3 && isDifferenceGreaterThan5Percent(location[1], lng) < 3) {
+                    //console.log()
+                    get_data_3(location_name_list[i])
+                    //CAM_RTSP('192.168.100.82')
+                }
+
+            };
+
+            //雲科校園的
+            for (var i = 0; i < Y_location_name_list.length; i++) {
+                var location = [Y_location_lat_list[i], Y_location_lng_list[i]];
+                if (isDifferenceGreaterThan5Percent(location[0], lat) < 3 && isDifferenceGreaterThan5Percent(location[1], lng) < 3) {
+                    //console.log()
+                    get_data_5(Y_location_name_list[i])
+                    //CAM_RTSP('192.168.100.82')
+                }
+
+            };
+
+
+        }
+
+        map.on('click', onMapClick);
+    }
+
+    function isDifferenceGreaterThan5Percent(number1, number2) {
+        // 計算差異的百分比
+        var difference = Math.abs(number1 - number2);
+        var percentageDifference = (difference / Math.max(number1, number2)) * 1000000;
+        //console.log(percentageDifference)
+        return percentageDifference
+
+    }
+</script>
+
+
+
+<!--獲取資料-->
+<script>
+    var token = localStorage.getItem('token_park_space');
+    var token_ckeck //= document.getElementById("token_ckeck_id").value
+    var position //職位
+    var location_name_list = []
+    var location_lat_list = []
+    var location_lng_list = []
+
+    var Y_location_name_list = []
+    var Y_location_lat_list = []
+    var Y_location_lng_list = []
+
+    function get_data() {
+        //token_check = document.getElementById("token_check_id").value
+
+        $.ajax({
+            type: "GET",
+            url: "http://140.125.20.183:7700/api/Parking_spaces_total_table",
+            data: {},
+            headers: {
+                'Authorization': token
+            },
+            contentType: "application/json",
+            success: function (Model) {
+                set_data_1(Model)
+                get_data_2()
+            }
+        });
+    }
+
+    function get_data_2() {
+        //token_check = document.getElementById("token_check_id").value
+
+        $.ajax({
+            type: "GET",
+            url: "http://140.125.20.183:7700/api/Parking_spaces_violation_total_table",
+            data: {},
+            headers: {
+                'Authorization': token
+            },
+            contentType: "application/json",
+            success: function (Model) {
+                set_data_2(Model)
+                get_data_4()
+            }
+        });
+    }
+
+    function get_data_4() {
+        //token_check = document.getElementById("token_check_id").value
+
+        $.ajax({
+            type: "GET",
+            url: "http://140.125.20.183:7700/api/Yuntech_cam_total_table",
+            data: {},
+            headers: {
+                'Authorization': token
+            },
+            contentType: "application/json",
+            success: function (Model) {
+                console.log(Model)
+                set_data_4(Model)
+                map_show()
+            }
+        });
+    }
+
+
+    var location_name
+    function get_data_3(location_name) {
+        location_name = location_name
+        $.ajax({
+            type: "GET",
+            url: "http://140.125.20.183:7700/api/Parking_spaces_cam",
+            data: {},
+            headers: {
+                'Authorization': token
+            },
+            contentType: "application/json",
+            success: function (Model) {
+                console.log(location_name)
+                set_data_3(Model, location_name)
+
+
+            }
+        });
+    }
+
+    function get_data_5(location_name) {
+        location_name = location_name
+        $.ajax({
+            type: "GET",
+            url: "http://140.125.20.183:7700/api/Yuntech_cam",
+            data: {},
+            headers: {
+                'Authorization': token
+            },
+            contentType: "application/json",
+            success: function (Model) {
+                console.log(location_name)
+                set_data_5(Model, location_name)
+
+
+            }
+        });
+    }
+
+
+</script>
+
+<!--放置資料-->
+<script>
+    function set_data_1(Model) {
+        for (var i = 0; i < Model.length; i++) {
+
+            var hasValue = location_name_list.includes(Model[i].parking_spaces_name);
+            if (hasValue == false) {
+                location_name_list.push(Model[i].parking_spaces_name)
+                location_lat_list.push(Model[i].latitude)
+                location_lng_list.push(Model[i].longitude)
+            }
+
+        }
+
+        //console.log(location_name_list); // 輸出: true
+    }
+
+    function set_data_2(Model) {
+        for (var i = 0; i < Model.length; i++) {
+
+            var hasValue = location_name_list.includes(Model[i].parking_spaces_violation_name);
+            if (hasValue == false) {
+                location_name_list.push(Model[i].parking_spaces_violation_name)
+                location_lat_list.push(Model[i].latitude)
+                location_lng_list.push(Model[i].longitude)
+            }
+
+        }
+
+    }
+
+    function set_data_4(Model) {
+        for (var i = 0; i < Model.length; i++) {
+
+            var hasValue = Y_location_name_list.includes(Model[i].location_name);
+            if (hasValue == false) {
+                Y_location_name_list.push(Model[i].location_name)
+                Y_location_lat_list.push(Model[i].latitude)
+                Y_location_lng_list.push(Model[i].longitude)
+            }
+
+        }
+
+    }
+
+    function set_data_3(Model, location_name) {
+        Button = '<button class="btn btn-outline-success " onclick="CAM_RTSP(';
+        var i1 = 0
+        if (Model.length > 0) {
+            for (var i = 0; i < Model.length; i++) {
+                if (Model[i].parking_spaces_name == location_name) {
+                    i1 = i1 + 1
+                    if (parseInt(Model[i].port) > 400) {
+                        Button += "'" + Model[i].ip + ":" + Model[i].port + "'" + ')">' + Model[i].ip + ":" + Model[i].port + '</button>'
+                    }
+                    Button += '<button class="btn btn-outline-success " onclick="CAM_RTSP(';
+                    if (i1 == 1) {
+                        CAM_RTSP(Model[i].ip + ":" + Model[i].port)
+                    }
+
+                }
+            }
+        }
+        document.getElementById("choose_cam_id").innerHTML = Button
+        RTSP_view.showModal()
+
+    }
+
+    function set_data_5(Model, location_name) {
+        Button = '<button class="btn btn-outline-success " onclick="CAM_RTSP_2(';
+        var i1 = 0
+        if (Model.length > 0) {
+            for (var i = 0; i < Model.length; i++) {
+                if (Model[i].location_name == location_name) {
+                    i1 = i1 + 1
+                    console.log(Model[i].ip)
+                    Button += "'" + Model[i].ip + "'" + ')">' + Model[i].ip + '</button>'
+                    Button += '<button class="btn btn-outline-success " onclick="CAM_RTSP_2(';
+                    if (i1 == 1) {
+                        CAM_RTSP_2(Model[i].ip)
+                    }
+                }
+            }
+        }
+        document.getElementById("choose_cam_id").innerHTML = Button
+        RTSP_view.showModal()
+
+    }
+
+
+</script>
+
+<!--檢查token-->
+<script>
+    var token
+    function token_check() {
+        // 检查本地存储中是否存在JWT令牌
+        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) {
+                console.log("1")
+                token_check = "false"
+                window.location.href = '/';
+                //get_data()
+                // 处理错误响应，例如跳转到未授权页面
+                //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>
diff --git a/Parking_spaces/Views/Manager/Yuntech_in_car.cshtml b/Parking_spaces/Views/Manager/Yuntech_in_car.cshtml
index 2207ca6..d45efcf 100644
--- a/Parking_spaces/Views/Manager/Yuntech_in_car.cshtml
+++ b/Parking_spaces/Views/Manager/Yuntech_in_car.cshtml
@@ -41,6 +41,22 @@
 
 
     </table>
+    <div class="row">
+        <div class="col-xl-1 col-lg-1">
+            <div>
+                <button class="btn btn-outline-secondary" onclick="fetchData_Up()">上一頁</button>
+            </div>
+
+        </div>
+        <div class="col-xl-10 col-lg-10">
+        </div>
+        <div class="col-xl-1 col-lg-1">
+            <div>
+                <button class="btn btn-outline-secondary" onclick="fetchData_Down()">下一頁</button>
+            </div>
+
+        </div>
+    </div>
 </div>
 
 <!--車輛詳細-彈跳視窗-->
@@ -84,13 +100,17 @@
 <script>
     var All_Model
     var serial_number = 0
+    var car_table_num = 0
     function get_data() {
         var name = "大門口"
         //console.log(name)
         $.ajax({
             type: "GET",
-            url: "http://140.125.20.183:7700/api/Yuntech_in_car_table" ,
+            url: "http://140.125.20.183:7700/api/Yuntech_in_car_table/Amount-" + car_table_num,
             data: {},
+            headers: {
+                'Authorization': token
+            },
             contentType: "application/json",
             headers: {
                 'Authorization': token
@@ -99,16 +119,109 @@
                 //console.log(Model)
                 All_Model = Model
                 set_data(Model)
+            }
+        });
+        /*
+        // 監聽捲動事件
+        window.addEventListener("scroll", function () {
+            // 判斷是否捲動到底部
+            if (window.innerHeight + window.scrollY >= document.body.offsetHeight) {
+                // 執行抓取資料的函式
+                fetchData();
+            }
+        });
+        */
+    }
 
+
+    // 定義抓取資料的函式
+    function fetchData_Up() {
+        car_table_num = car_table_num - 100
+        if (car_table_num < 0) {
+            window.alert('無上一筆資料')
+            car_table_num = 0
+            return
+        }
+        var name = "大門口"
+        //console.log(name)
+        $.ajax({
+            type: "GET",
+            url: "http://140.125.20.183:7700/api/Yuntech_in_car_table/Amount-" + car_table_num,
+            data: {},
+            headers: {
+                'Authorization': token
+            },
+            contentType: "application/json",
+            headers: {
+                'Authorization': token
+            },
+            success: function (Model) {
+                //console.log(Model)
+                All_Model = Model
+                set_data(Model)
             }
         });
     }
+
+    function fetchData_Down() {
+        car_table_num = car_table_num + 100
+        var name = "大門口"
+        //console.log(name)
+        $.ajax({
+            type: "GET",
+            url: "http://140.125.20.183:7700/api/Yuntech_in_car_table/Amount-" + car_table_num,
+            data: {},
+            headers: {
+                'Authorization': token
+            },
+            contentType: "application/json",
+            headers: {
+                'Authorization': token
+            },
+            success: function (Model) {
+                //console.log(Model)
+                All_Model = Model
+                set_data(Model)
+            }
+        });
+
+    }
+
 </script>
 
 <!--放置資料-->
 <script>
-
     function set_data(Model) {
+        document.getElementById("demo").innerHTML = ''
+        var 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
+        // 移動到最上面
+        window.scrollTo(0, 0);
+    }
+
+    function set_data_license_plate_and_date(Model) {
         table = "<tr>";
         console.log(Model.length)
         if (Model.length > 0) {
@@ -136,6 +249,7 @@
 </script>
 
 
+
 <!--下一筆資料-->
 <script>
     function next_detail_data() {