From 6ef5129c69c601dc139c2e6afb7268803570485c Mon Sep 17 00:00:00 2001
From: leo <leo890808678@gmail.com>
Date: Tue, 20 Feb 2024 16:29:25 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E9=9D=A2=E8=A9=A6=E7=94=A8?=
 =?UTF-8?q?=E9=A0=81=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Controllers/EngineeringController.cs      |    4 +
 .../Engineering/Engineering_Interview.cshtml  | 1150 +++++++++++++++++
 2 files changed, 1154 insertions(+)
 create mode 100644 Parking_spaces/Views/Engineering/Engineering_Interview.cshtml

diff --git a/Parking_spaces/Controllers/EngineeringController.cs b/Parking_spaces/Controllers/EngineeringController.cs
index 29c69d6..948748b 100644
--- a/Parking_spaces/Controllers/EngineeringController.cs
+++ b/Parking_spaces/Controllers/EngineeringController.cs
@@ -21,6 +21,10 @@ namespace Parking_spaces.Controllers
         {
             return View();
         }
+        public IActionResult Engineering_Interview()
+        {
+            return View();
+        }
         public IActionResult Engineering_CAM()
         {
             return View();
diff --git a/Parking_spaces/Views/Engineering/Engineering_Interview.cshtml b/Parking_spaces/Views/Engineering/Engineering_Interview.cshtml
new file mode 100644
index 0000000..89a3144
--- /dev/null
+++ b/Parking_spaces/Views/Engineering/Engineering_Interview.cshtml
@@ -0,0 +1,1150 @@
+
+@{
+    ViewData["Title"] = "Engineering_Interview";
+    Layout = "~/Views/Shared/_Layout_Engineering.cshtml";
+}
+
+<!--演算法狀態-CSS-->
+<style>
+    .switch {
+        position: relative;
+        display: inline-block;
+        width: 50px;
+        height: 24px;
+    }
+
+        .switch input {
+            opacity: 0;
+            width: 0;
+            height: 0;
+        }
+
+    .slider {
+        position: absolute;
+        cursor: pointer;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background-color: #ccc;
+        -webkit-transition: .4s;
+        transition: .4s;
+        border-radius: 34px;
+    }
+
+        .slider:before {
+            position: absolute;
+            content: "";
+            height: 20px;
+            width: 20px;
+            left: 2px;
+            top: 2px;
+            background-color: white;
+            -webkit-transition: .4s;
+            transition: .4s;
+            border-radius: 50%;
+        }
+
+    input:checked + .slider {
+        background-color: #6f42c1
+    }
+
+        input:checked + .slider:before {
+            -webkit-transform: translateX(26px);
+            -ms-transform: translateX(26px);
+            transform: translateX(26px);
+        }
+</style>
+
+
+<!--MAP-->
+<link rel="stylesheet"
+      href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
+      integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
+      crossorigin="" />
+<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
+        integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
+        crossorigin="">
+</script>
+<style>
+    html, body {
+        padding: 0;
+        margin: 0;
+    }
+
+    #myMap {
+        height: 50vh;
+    }
+
+    #img_id {
+        display: block; /* 使圖像為塊級元素，以便使用 margin:auto; */
+        margin: auto; /* 將圖像置中 */
+        width: 80%
+    }
+</style>
+
+<h1>工程模式</h1>
+
+
+
+
+
+
+
+
+<div class="row">
+    <!--即時影像-->
+    <div class="col-xl-8 col-lg-8">
+        <div class="card shadow mb-8">
+            <div class="card-header py-3">
+                <h6 class="m-0 font-weight-bold text-primary">即時影像</h6>
+            </div>
+            <div class="card-body">
+                <div id="myMap"></div>
+
+            </div>
+        </div>
+
+    </div>
+
+    <!--演算法狀態-->
+    <div class="col-xl-4 col-lg-4">
+        <div class="card shadow mb-4">
+            <!-- Card Header - Dropdown -->
+            <div class="card-header py-3">
+                <h6 class="m-0 font-weight-bold text-primary">演算法狀態</h6>
+            </div>
+            <!-- Card Body -->
+            <div>
+                <table class="table">
+                    <thead>
+                        <tr>
+                            <th>
+                                演算法名稱
+                            </th>
+                            <th>
+                                狀態
+                            </th>
+
+                        </tr>
+                    </thead>
+
+                    <tbody id="demo">
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    </div>
+</div>
+<br />
+
+<div class="row">
+    <!--每日違規數量-->
+    <div class="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-4">
+            <!-- Card Header - Dropdown -->
+            <div class="card-header py-3">
+                <h6 class="m-0 font-weight-bold text-primary">
+                    字幕機狀態<button class="btn btn-info btn-circle btn-sm" style="float:right; background-image: url('/image/icon/F5.png'); background-size: cover;" onclick="get_LED_data()"></button>
+                </h6>
+            </div>
+            <!-- Card Body -->
+            <div>
+                <table class="table">
+                    <thead>
+                        <tr>
+                            <th>
+                                停車場位置
+                            </th>
+                            <th>
+                                字幕機IP
+                            </th>
+                            <th>
+                                顯示參數
+                            </th>
+                        </tr>
+                    </thead>
+
+                    <tbody id="LED_table">
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    </div>
+</div>
+<br />
+
+<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_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 />
+
+
+<!--彈跳視窗-->
+<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>
+
+
+<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,
+                datasets: [{
+                    label: '車流量',
+                    data: values,
+                    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,
+                datasets: [{
+                    label: '違規數量',
+                    data: values,
+                    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_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/Violation_car_table/get_day_violation-" + day,
+            data: {},
+            contentType: "application/json",
+            headers: {
+                'Authorization': token
+            },
+            success: function (Model) {
+                //get_violation_data_2(Model)
+                console.log(Model)
+                set_violation_data_1(Model)
+
+            }
+        });
+    }
+
+
+
+
+
+</script>
+
+<!--設置違規資料-->
+<script>
+
+    function set_violation_data_1(Model) {
+        var date_list = []
+        var violation_car_list = []
+        if (Model.length > 0) {
+            for (var i = 0; i < Model.length; i++) {
+                var D_1 = new Date(Model[i]['date']);
+                var MD = D_1.toLocaleDateString('en-US', { month: '2-digit', day: '2-digit' });
+                date_list.push(MD)
+                violation_car_list.push(Model[i]['occurrences'])
+            }
+        }
+        set_violation_table(date_list, violation_car_list)
+    }
+
+</script>
+
+
+
+<!--獲取進入雲科資料-->
+<script>
+    function get_in_yuntech_data_1() {
+        day = 30
+        in_car_list = []
+        $.ajax({
+            type: "GET",
+            url: "http://140.125.20.183:7700/api/Yuntech_in_car_table/get_day_in_car-" + day,
+            data: {},
+            contentType: "application/json",
+            headers: {
+                'Authorization': token
+            },
+            success: function (Model) {
+                set_in_yuntech_data_1(Model)
+
+
+            }
+        });
+    }
+</script>
+
+<!--設置進入雲科資料-->
+<script>
+    var in_car_list = []
+    function set_in_yuntech_data_1(Model) {
+        var date_list = []
+        var in_car_list = []
+        if (Model.length > 0) {
+            for (var i = 0; i < Model.length; i++) {
+                var D_1 = new Date(Model[i]['date']);
+                var MD = D_1.toLocaleDateString('en-US', { month: '2-digit', day: '2-digit' });
+                date_list.push(MD)
+                in_car_list.push(Model[i]['occurrences'])
+            }
+        }
+        set_in_yuntech_table(date_list, in_car_list)
+
+    }
+</script>
+
+<!--獲取演算法資料-->
+<script>
+    var token = localStorage.getItem('token_park_space');
+    function get_algorithm_data() {
+        $.ajax({
+            type: "GET",
+            url: "http://140.125.20.183:7700/api/Parking_space_algorithm",
+            data: {},
+            headers: {
+                'Authorization': token
+            },
+            contentType: "application/json",
+            success: function (Model) {
+                //console.log(Model)
+                put_algorithm_data(Model)
+            }
+        });
+    }
+    function get_algorithm_data_1() {
+        $.ajax({
+            type: "GET",
+            url: "http://140.125.20.183:7700/api/Parking_space_algorithm",
+            data: {},
+            headers: {
+                'Authorization': token
+            },
+            contentType: "application/json",
+            success: function (Model) {
+                //console.log(Model)
+                set_algorithm_data(Model)
+            }
+        });
+    }
+</script>
+
+<!--編輯演算法資料-->
+<script>
+    function put_algorithm_data(Model) {
+        if (Model.length > 0) {
+            for (var i = 0; i < Model.length; i++) {
+                if (Model[i].algorithm_name != null) {
+                    data_1 = {
+                        "algorithm_name": Model[i].algorithm_name,
+                        "state": "False",
+                        "run_time": Model[i].run_time,
+                        "algorithm_serial_num": Model[i].algorithm_serial_num
+                    }
+                    var stringify_obj = JSON.stringify(data_1);
+                    $.ajax({
+                        type: "PUT",
+                        url: "http://140.125.20.183:7700/api/Parking_space_algorithm/" + Model[i].algorithm_serial_num,
+                        data: stringify_obj,
+                        headers: {
+                            'Authorization': token
+                        },
+                        contentType: "application/json",
+                        success: function (Model) {
+                            setTimeout('get_algorithm_data_1()', 1000);
+                            ////console.log(Model)
+                            //window.location.reload();
+                        }
+                    });
+
+                }
+            }
+        }
+    }
+</script>
+
+<!--放置演算法資料-->
+<script>
+    var c = 0
+    function set_algorithm_data(Model) {
+
+        table = "<tr>";
+        if (Model.length > 0) {
+            for (var i = 0; i < Model.length; i++) {
+                if (Model[i].algorithm_name != null) {
+                    table += "<td>" + Model[i].algorithm_name + "</td>"
+                    var state = '<label class="switch"><input type="checkbox" ><span class="slider"></span></label>'
+                    if (Model[i].state == "True") {
+                        var state = '<label class="switch"><input type="checkbox" checked=""><span class="slider"></span></label>'
+                    }
+                    table += "<td>" + state + "</td>"
+                }
+                table += "</tr>"
+                table += "<tr>"
+            }
+        }
+        document.getElementById("demo").innerHTML = table
+        if (c < 10) {
+            setTimeout('get_algorithm_data_1()', 1000);
+            c = c + 1
+        }
+    }
+</script>
+
+
+
+<!--獲取字幕機資料-->
+<script>
+    function get_LED_data() {
+        $.ajax({
+            type: "GET",
+            url: "http://140.125.20.183:7700/api/Parking_spaces_lcd_instand",
+            data: {},
+            headers: {
+                'Authorization': token
+            },
+            contentType: "application/json",
+            success: function (Model) {
+                //console.log(Model)
+                set_LED_data(Model)
+            }
+        });
+    }
+</script>
+
+<!--放置字幕機資料-->
+<script>
+    function set_LED_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_name != null) {
+                    table += "<td>" + Model[i].parking_spaces_name + "</td>"
+
+                    var NewArray = Model[i].lcd_ip.split(":");
+                    table += "<td>" + Model[i].lcd_ip + "</td>"
+                    table += "<td>" + Model[i].parking_space_amount + "</td>"
+
+
+
+                }
+                table += "</tr>"
+                table += "<tr>"
+            }
+        }
+        document.getElementById("LED_table").innerHTML = table
+    }
+</script>
+
+
+
+<!--跳轉頁面-->
+<script>
+
+    function Yuntech_RTSP() {
+        window.open("http://140.125.50.178:7006/", "_blank");
+    }
+</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; // 經度
+            ////console.log(lat, 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_RTSP_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_RTSP_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_RTSP_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_RTSP_data_1(Model)
+                get_RTSP_data_2()
+            }
+        });
+    }
+
+    function get_RTSP_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_RTSP_data_2(Model)
+                get_RTSP_data_4()
+            }
+        });
+    }
+
+    function get_RTSP_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_RTSP_data_4(Model)
+                map_show()
+            }
+        });
+    }
+
+    var location_name
+    function get_RTSP_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_RTSP_data_3(Model, location_name)
+
+
+            }
+        });
+    }
+
+    function get_RTSP_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_RTSP_data_5(Model, location_name)
+
+
+            }
+        });
+    }
+
+
+</script>
+
+<!--放置資料-->
+<script>
+    function set_RTSP_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_RTSP_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_RTSP_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_RTSP_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_RTSP_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>
+
+
+<!--自動登入-->
+<!--登入頁面-->
+<script>
+    function login_clicked() {
+        var username = "admin"
+        var password = "admin"
+        console.log(username, password)
+        var obj = { Username: username, Password: password }
+        var stringify_obj = JSON.stringify(obj);
+        /*0523*/
+        $.ajax({
+            type: "POST",
+            url: "http://140.125.20.183:7700/Users/authenticate",
+            data: stringify_obj,
+            contentType: "application/json",
+            success: function (msg) {
+                console.log(msg)
+                var token = msg.token;
+                //go_to_next_view(token)
+                token_check()
+            },
+            error: function (xhr, status, error) {
+                // 处理错误
+                window.alert("請輸入正確帳號密碼");
+                document.getElementById("username_id").value = ""
+                document.getElementById("password_id").value = ""
+                console.log("error")
+            }
+        });
+
+
+    }
+    function go_to_next_view(token_str) {
+        // 将令牌存储在本地存储中
+        localStorage.setItem('token_park_space', token_str);
+        window.location = '/Park_spaces/Parking_spaces_total_table';
+    }
+
+</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) {
+                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 == "engineer") {
+                    get_violation_data_1()
+                    get_algorithm_data()
+                    get_LED_data()
+                    get_RTSP_data()
+                    get_in_yuntech_data_1()
+                }
+                else {
+                    window.location.href = '/';
+                }
+
+            }
+        });
+    }
+</script>
+
+<!--開機自啟-->
+<script>
+    window.onload = login_clicked;
+</script>
+
+
+
+
+
+
+