工程模式首頁大改

Parking_spaces/Views/Engineering/Engineering_Index.cshtml

@@ -1,13 +1,92 @@
-
+@{
-@{
     ViewData["Title"] = "Engineering_Index";
     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>
+
 <h1>工程模式</h1>
 
     
-<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">每日違規數量</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-5">
+        <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>
@@ -17,53 +96,312 @@
                             <th>
                                 狀態
                             </th>
-                <th>
-                    啟動時間
-                </th>
-                <th>
-                    
-                </th>
 
                         </tr>
                     </thead>
 
                     <tbody id="demo">
-
                     </tbody>
                 </table>
+            </div>
+        </div>
+    </div>
 </div>
 
+<div class="row">
+    <div class="col-xl-8 col-lg-8">
+    </div>
+    <!--字幕機狀態-->
+    <div class="col-xl-4 col-lg-5">
+        <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>
+                                字幕機IP
+                            </th>
+                            <th>
+                                顯示參數
+                            </th>
+                        </tr>
+                    </thead>
 
+                    <tbody id="LED_table">
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    </div>
+</div>
 
+<script src="/bootstrap_1/vendor/chart.js/Chart.min.js"></script>
 
-
+<!--設定數據圖數據-每日車流量-->
-
-
-
-
-
-
-<!--獲取資料-->
 <script>
-    var token = localStorage.getItem('token_park_space');
+    // 假設你有一些資料，例如每日車流量
-    var token_ckeck //確認token
+    var dailyTrafficData = [100, 150, 120, 200, 180, 250, 621, 0];
-    var position //職位
+
-    function get_data(){
+    // 取得 canvas 元素
-        $.ajax({
+    var ctx = document.getElementById('day_car_Bar')
-            type: "GET",
+
-            url: "http://140.125.20.183:7700/api/Parking_space_algorithm",
+    // 使用 Chart.js 繪製長條圖
-            data: {},
+    var myBarChart = new Chart(ctx, {
-            headers: {
+        type: 'bar',
-                'Authorization': token
+        data: {
+            labels: ['01/01', '01/02', '01/03', '01/04', '01/05', '01/06', '01/07'],
+            datasets: [{
+                label: '車流量',
+                data: dailyTrafficData,
+                backgroundColor: 'rgba(75, 192, 192, 0.2)', // 設定背景色
+                borderColor: 'rgba(75, 192, 192, 1)', // 設定邊框色
+                borderWidth: 1
+            }]
         },
-            contentType: "application/json",
+        options: {
-            success: function (Model) {
+            responsive: true, // 啟用 responsive 設置
-                console.log(Model)
+            maintainAspectRatio: false, // 保持長寬比例
-                put_data(Model)
+            scales: {
+                y: {
+                    beginAtZero: true
+                }
+            }
+        }
+    });
+
+</script>
+
+<!--設定數據圖數據-每日違規數量-->
+<script>
+    function set_violation_table(labels, dailyTrafficData) {
+
+        labels.reverse();
+        dailyTrafficData.reverse();
+        // 假設你有一些資料，例如每日違規數量
+        var dailyTrafficData = dailyTrafficData;
+
+        // 取得 canvas 元素
+        var ctx = document.getElementById('violation_car_Bar')
+
+        // 使用 Chart.js 繪製長條圖
+        var myBarChart = new Chart(ctx, {
+            type: 'bar',
+            data: {
+                labels: labels,
+                datasets: [{
+                    label: '違規數量',
+                    data: dailyTrafficData,
+                    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
+                    }
+                }
             }
         });
     }
-    function get_data_1() {
+
+
+</script>
+
+
+
+
+<!--獲取違規資料-->
+<script>
+    var token_ckeck //= document.getElementById("token_ckeck_id").value
+    var position //職位
+    function get_violation_data_1() {
+        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）
+                //console.log(daysDifference)
+                if (daysDifference > 6) {
+                    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 > 6) {
+                    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>
+    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",
@@ -74,16 +412,31 @@
             contentType: "application/json",
             success: function (Model) {
                 console.log(Model)
-                set_data(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_data(Model){
+    function put_algorithm_data(Model) {
         if (Model.length > 0) {
             for (var i = 0; i < Model.length; i++) {
                 if (Model[i].algorithm_name != null) {
@@ -103,7 +456,7 @@
                         },
                         contentType: "application/json",
                         success: function (Model) {
-                            setTimeout('get_data_1()', 1000);
+                            setTimeout('get_algorithm_data_1()', 1000);
                             //console.log(Model)
                             //window.location.reload();
                         }
@@ -115,30 +468,29 @@
     }
 </script>
 
-<!--放置資料-->
+<!--放置演算法資料-->
 <script>
-    var c=0
+    var c = 0
-    function set_data(Model) {
+    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="未啟動"
+                    var state = '<label class="switch"><input type="checkbox" ><span class="slider"></span></label>'
-                    if (Model[i].state=="True"){
+                    if (Model[i].state == "True") {
-                        state = "啟動"
+                        var state = '<label class="switch"><input type="checkbox" checked=""><span class="slider"></span></label>'
                     }
                     table += "<td>" + state + "</td>"
-                    table += "<td>" + Model[i].run_time + "</td>"
-                    table += "<td>" + "</td>"
                 }
                 table += "</tr>"
                 table += "<tr>"
             }
         }
         document.getElementById("demo").innerHTML = table
-        if (c<10){
+        if (c < 10) {
-            setTimeout('get_data_1()', 1000);
+            setTimeout('get_algorithm_data_1()', 1000);
             c = c + 1
         }
     }
@@ -146,6 +498,55 @@
 
 
 
+<!--獲取字幕機資料-->
+<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>
+
+
+
 
 
 <!--檢查token-->
@@ -203,7 +604,9 @@
                 position = model.lastname
                 console.log(position)
                 if (position == "engineer") {
-                    get_data()
+                    get_violation_data_1()
+                    get_algorithm_data()
+                    get_LED_data()
                 }
                 else {
                     window.location.href = '/';
@@ -220,3 +623,7 @@
 </script>
 
 
+
+
+
+

Parking_spaces/Views/Engineering/Engineering_Index_.cshtml

@@ -1,109 +1,153 @@
-@{
+
+@{
     ViewData["Title"] = "Engineering_Index";
     Layout = "~/Views/Shared/_Layout_Engineering.cshtml";
 }
 
 <h1>工程模式</h1>
-<div class="col-xl-8 col-lg-8">
-    <div class="card shadow mb-4">
-        <div class="card-header py-3">
-            <h6 class="m-0 font-weight-bold text-primary">每日車流量</h6>
-        </div>
-        <div class="card-body">
-            <div class="chart-bar">
-                <canvas id="day_car_Bar"></canvas>
-            </div>
-            <hr>
 
-        </div>
-    </div>
 
-    <div class="card shadow mb-8">
+<div>
-        <div class="card-header py-3">
+    <table class="table">
-            <h6 class="m-0 font-weight-bold text-primary">每日違規數量</h6>
+        <thead>
-        </div>
+            <tr>
-        <div class="card-body">
+                <th>
-            <div class="chart-bar">
+                    演算法名稱
-                <canvas id="violation_car_Bar"></canvas>
+                </th>
-            </div>
+                <th>
-            <hr>
+                    狀態
+                </th>
+                <th>
+                    啟動時間
+                </th>
+                <th>
                     
-        </div>
+                </th>
-    </div>
+
+            </tr>
+        </thead>
+
+        <tbody id="demo">
+
+        </tbody>
+    </table>
 </div>
 
 
-<script src="/bootstrap_1/vendor/chart.js/Chart.min.js"></script>
 
-<!--設定數據圖數據-每日車流量-->
+
+
+
+
+
+
+
+
+<!--獲取資料-->
 <script>
-    // 假設你有一些資料，例如每日車流量
+    var token = localStorage.getItem('token_park_space');
-    var dailyTrafficData = [100, 150, 120, 200, 180, 250, 621,0];
+    var token_ckeck //確認token
-
+    var position //職位
-    // 取得 canvas 元素
+    function get_data(){
-    var ctx = document.getElementById('day_car_Bar')
+        $.ajax({
-
+            type: "GET",
-    // 使用 Chart.js 繪製長條圖
+            url: "http://140.125.20.183:7700/api/Parking_space_algorithm",
-    var myBarChart = new Chart(ctx, {
+            data: {},
-        type: 'bar',
+            headers: {
-        data: {
+                'Authorization': token
-            labels: ['01/01', '01/02', '01/03', '01/04', '01/05', '01/06', '01/07'],
-            datasets: [{
-                label: '車流量',
-                data: dailyTrafficData,
-                backgroundColor: 'rgba(75, 192, 192, 0.2)', // 設定背景色
-                borderColor: 'rgba(75, 192, 192, 1)', // 設定邊框色
-                borderWidth: 1
-            }]
             },
-        options: {
+            contentType: "application/json",
-            responsive: true, // 啟用 responsive 設置
+            success: function (Model) {
-            maintainAspectRatio: false, // 保持長寬比例
+                console.log(Model)
-            scales: {
+                put_data(Model)
-                y: {
-                    beginAtZero: true
             }
+        });
     }
+    function get_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_data(Model)
+            }
+        });
+    }
+</script>
+
+
+<!--編輯資料-->
+<script>
+    function put_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_data_1()', 1000);
+                            //console.log(Model)
+                            //window.location.reload();
                         }
                     });
 
+            }
+        }
+    }
+    }
 </script>
 
-<!--設定數據圖數據-每日違規數量-->
+<!--放置資料-->
 <script>
-    // 假設你有一些資料，例如每日違規數量
+    var c=0
-    var dailyTrafficData = [10, 15, 20, 20, 18, 25, 62,0];
+    function set_data(Model) {
-
+        table = "<tr>";
-    // 取得 canvas 元素
+        if (Model.length > 0) {
-    var ctx = document.getElementById('violation_car_Bar')
+            for (var i = 0; i < Model.length; i++) {
-
+                if (Model[i].algorithm_name != null) {
-    // 使用 Chart.js 繪製長條圖
+                    table += "<td>" + Model[i].algorithm_name + "</td>"
-    var myBarChart = new Chart(ctx, {
+                    var state="未啟動"
-        type: 'bar',
+                    if (Model[i].state=="True"){
-        data: {
+                        state = "啟動"
-            labels: ['01/01', '01/02', '01/03', '01/04', '01/05', '01/06', '01/07'],
+                    }
-            datasets: [{
+                    table += "<td>" + state + "</td>"
-                label: '違規數量',
+                    table += "<td>" + Model[i].run_time + "</td>"
-                data: dailyTrafficData,
+                    table += "<td>" + "</td>"
-                backgroundColor: 'rgba(255, 0, 0, 0.5)', // 設定半透明的紅色背景
+                }
-                borderColor: 'rgba(255, 0, 0, 1)', // 設定不透明的紅色邊框
+                table += "</tr>"
-                borderWidth: 1
+                table += "<tr>"
-            }]
-        },
-        options: {
-            responsive: true, // 啟用 responsive 設置
-            maintainAspectRatio: false, // 保持長寬比例
-            scales: {
-                y: {
-                    beginAtZero: true
             }
         }
+        document.getElementById("demo").innerHTML = table
+        if (c<10){
+            setTimeout('get_data_1()', 1000);
+            c = c + 1
+        }
     }
-    });
-
 </script>
 
 
+
+
+
 <!--檢查token-->
 <script>
     function token_check() {
@@ -176,7 +220,3 @@
 </script>
 
 
-
-
-
-

Parking_spaces/Views/Engineering/Single_violation_detail.cshtml

@@ -123,7 +123,7 @@
                     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 += '<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>"