From 1d57b03f20bddf43493a7c76f52b0aec12ca69ff 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: Sun, 4 Feb 2024 20:01:51 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E9=96=80=E5=8F=A3=E9=80=B2?=
 =?UTF-8?q?=E5=85=A5=E6=B5=81=E9=87=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Engineering/Engineering_Index.cshtml      | 215 +++++++++++++-----
 1 file changed, 161 insertions(+), 54 deletions(-)

diff --git a/Parking_spaces/Views/Engineering/Engineering_Index.cshtml b/Parking_spaces/Views/Engineering/Engineering_Index.cshtml
index c1087ea..48e0a84 100644
--- a/Parking_spaces/Views/Engineering/Engineering_Index.cshtml
+++ b/Parking_spaces/Views/Engineering/Engineering_Index.cshtml
@@ -84,7 +84,7 @@
 
 <h1>工程模式</h1>
 
-    
+
 
 
 
@@ -101,10 +101,10 @@
             <div class="card-body">
                 <button class="btn btn-outline-info" onclick="Yuntech_RTSP()">雲科即時影像</button>
                 <div id="myMap"></div>
-                
+
             </div>
         </div>
-        
+
     </div>
 
     <!--演算法狀態-->
@@ -184,6 +184,24 @@
 </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">每日車流量</h6>
+            </div>
+            <div class="card-body">
+                <div class="chart-bar">
+                    <canvas id="in_car_Bar"></canvas>
+                </div>
+            </div>
+        </div>
+    </div>
+
+</div>
+<br />
+
 
 <!--彈跳視窗-->
 <div>
@@ -201,35 +219,39 @@
 
 <!--設定數據圖數據-每日車流量-->
 <script>
-    // 假設你有一些資料，例如每日車流量
-    var dailyTrafficData = [100, 150, 120, 200, 180, 250, 621, 0];
+    function set_in_yuntech_table(labels, dailyTrafficData) {
+        //dailyTrafficData.reverse();
+        // 假設你有一些資料，例如每日車流量
+        var dailyTrafficData = dailyTrafficData
 
-    // 取得 canvas 元素
-    var ctx = document.getElementById('day_car_Bar')
+        // 取得 canvas 元素
+        var ctx = document.getElementById('in_car_Bar')
 
-    // 使用 Chart.js 繪製長條圖
-    var myBarChart = new Chart(ctx, {
-        type: 'bar',
-        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
-            }]
-        },
-        options: {
-            responsive: true, // 啟用 responsive 設置
-            maintainAspectRatio: false, // 保持長寬比例
-            scales: {
-                y: {
-                    beginAtZero: true
+        // 使用 Chart.js 繪製長條圖
+        var myBarChart = new Chart(ctx, {
+            type: 'bar',
+            data: {
+                labels: labels,
+                datasets: [{
+                    label: '車流量',
+                    data: dailyTrafficData,
+                    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>
 
@@ -281,9 +303,9 @@
     var token_ckeck //= document.getElementById("token_ckeck_id").value
     var position //職位
     function get_violation_data_1() {
-        console.log("start")
+        //console.log("start")
         //token_check = document.getElementById("token_check_id").value
-        console.log(token_check)
+        //console.log(token_check)
         $.ajax({
             type: "GET",
             url: "http://140.125.20.183:7700/api/Parking_spaces_violation_total_table",
@@ -301,7 +323,7 @@
         if (Model.length > 0) {
             for (var i = 0; i < Model.length; i++) {
                 var name = Model[i].parking_spaces_violation_name
-                //console.log(name)
+                ////console.log(name)
                 $.ajax({
                     type: "GET",
                     url: "http://140.125.20.183:7700/api/Violation_car_table/violation_location_name-" + name,
@@ -363,7 +385,7 @@
                 var timeDifference = endDate - startDate;
 
                 var daysDifference = Math.floor(timeDifference / (1000 * 60 * 60 * 24));// 轉換為天數（毫秒 / 1000 / 60 / 60 / 24）
-                //console.log(daysDifference)
+                ////console.log(daysDifference)
                 if (daysDifference > 6) {
                     break
                 }
@@ -380,7 +402,7 @@
             }
         }
 
-        console.log(date_list)
+        //console.log(date_list)
         set_violation_data_2(Model)
     }
 
@@ -424,14 +446,14 @@
                 var timeDifference = endDate - startDate;
 
                 var daysDifference = Math.floor(timeDifference / (1000 * 60 * 60 * 24));// 轉換為天數（毫秒 / 1000 / 60 / 60 / 24）
-                //console.log(daysDifference)
+                ////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)
+                ////console.log(index)
                 violation_car_list[index] = violation_car_list[index] + 1
 
             }
@@ -450,6 +472,90 @@
 
 
 
+<!--獲取進入雲科資料-->
+<script>
+    function get_in_yuntech_data_1() {
+        //console.log(token_check)
+        $.ajax({
+            type: "GET",
+            url: "http://140.125.20.183:7700/api/Yuntech_in_car_table",
+            data: {},
+            contentType: "application/json",
+            success: function (Model) {
+                //console.log(Model)
+                setTimeout(function () {
+                    set_in_yuntech_data_1(Model)
+                }, 200);
+
+
+            }
+        });
+    }
+</script>
+
+<!--設置進入雲科資料-->
+<script>
+    var in_car_list = []
+    function set_in_yuntech_data_1(Model) {
+        if (date_list.length > 0 && in_car_list.length <= 0) {
+            for (var i = 0; i < date_list.length; i++) {
+                in_car_list.push(0)
+            }
+        }
+        console.log(in_car_list)
+        var today = new Date();
+        var year = today.getFullYear();
+        var month = today.getMonth() + 1; // 注意：月份是從 0 開始的，所以需要加 1
+        var day = today.getDate();
+        month = month < 10 ? '0' + month : month;
+        day = day < 10 ? '0' + day : day;
+        var todayDate = year + '-' + month + '-' + day;
+
+        if (Model.length > 0) {
+            var D = ""
+            for (var i = 0; i < Model.length; i++) {
+                // 假設你有一個包含日期時間的字符串
+                var dateTimeString = Model[i].in_time;
+                // 將字符串轉換為 Date 對象
+                var dateTime = new Date(dateTimeString);
+                // 提取日期部分
+                var year = dateTime.getFullYear();
+                var month = dateTime.getMonth() + 1; // 月份是從 0 開始的，所以要加 1
+                var day = dateTime.getDate();
+                // 將月份和日期補零，以確保是兩位數
+                month = month < 10 ? '0' + month : month;
+                day = day < 10 ? '0' + day : day;
+
+                // 構建日期字符串，格式：YYYY-MM-DD
+                var date = year + '-' + month + '-' + day;
+
+                // 將字符串轉換為 Date 對象
+                var startDate = new Date(date);
+                var endDate = new Date(todayDate);
+                // 計算天數差
+                var timeDifference = endDate - startDate;
+
+                var daysDifference = Math.floor(timeDifference / (1000 * 60 * 60 * 24));// 轉換為天數（毫秒 / 1000 / 60 / 60 / 24）
+                ////console.log(daysDifference)
+                if (daysDifference > 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)
+                in_car_list[index] = in_car_list[index] + 1
+
+            }
+            set_in_yuntech_data_3()
+        }
+
+    }
+    function set_in_yuntech_data_3() {
+        set_in_yuntech_table(date_list, in_car_list)
+        
+    }
+</script>
 
 <!--獲取演算法資料-->
 <script>
@@ -464,7 +570,7 @@
             },
             contentType: "application/json",
             success: function (Model) {
-                console.log(Model)
+                //console.log(Model)
                 put_algorithm_data(Model)
             }
         });
@@ -479,7 +585,7 @@
             },
             contentType: "application/json",
             success: function (Model) {
-                console.log(Model)
+                //console.log(Model)
                 set_algorithm_data(Model)
             }
         });
@@ -509,7 +615,7 @@
                         contentType: "application/json",
                         success: function (Model) {
                             setTimeout('get_algorithm_data_1()', 1000);
-                            //console.log(Model)
+                            ////console.log(Model)
                             //window.location.reload();
                         }
                     });
@@ -562,7 +668,7 @@
             },
             contentType: "application/json",
             success: function (Model) {
-                console.log(Model)
+                //console.log(Model)
                 set_LED_data(Model)
             }
         });
@@ -573,7 +679,7 @@
 <script>
     function set_LED_data(Model) {
         table = "<tr>";
-        console.log(Model.length)
+        //console.log(Model.length)
         if (Model.length > 0) {
             for (var i = 0; i < Model.length; i++) {
                 if (Model[i].parking_spaces_name != null) {
@@ -582,7 +688,7 @@
                     var NewArray = Model[i].lcd_ip.split(":");
                     table += "<td>" + Model[i].lcd_ip + "</td>"
                     table += "<td>" + Model[i].parking_space_amount + "</td>"
-                    
+
 
 
                 }
@@ -610,7 +716,7 @@
     var stop = false
 
     function CAM_RTSP(IP) {
-        console.log(IP)
+        //console.log(IP)
         IP_1 = IP
         $.ajax({
             type: "GET",
@@ -625,7 +731,7 @@
                 //from_token_import_id()
             },
             error: function (xhr) {
-                console.log("111")
+                //console.log("111")
                 window.alert("相機未連線");
             }
 
@@ -633,7 +739,7 @@
     }
 
     function CAM_RTSP_1() {
-        console.log(IP_1)
+        //console.log(IP_1)
         $.ajax({
             type: "GET",
             url: 'http://140.125.20.183:7705/IP/' + IP_1,
@@ -656,7 +762,7 @@
 <!--開啟視窗並串流-->
 <script>
     function RTSP_START(img_base_64) {
-        //console.log(img)
+        ////console.log(img)
         img = document.getElementById("img_id")
         img.src = img_base_64
         if (stop == false) {
@@ -715,12 +821,12 @@
         function onMapClick(e) {
             lat = e.latlng.lat; // 緯度
             lng = e.latlng.lng; // 經度
-            //console.log(lat, 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()
+                    ////console.log()
                     get_RTSP_data_3(location_name_list[i])
                     //CAM_RTSP('192.168.100.82')
                 }
@@ -737,7 +843,7 @@
         // 計算差異的百分比
         var difference = Math.abs(number1 - number2);
         var percentageDifference = (difference / Math.max(number1, number2)) * 1000000;
-        //console.log(percentageDifference)
+        ////console.log(percentageDifference)
         return percentageDifference
 
     }
@@ -803,7 +909,7 @@
             },
             contentType: "application/json",
             success: function (Model) {
-                console.log(location_name)
+                //console.log(location_name)
                 set_RTSP_data_3(Model, location_name)
 
 
@@ -828,7 +934,7 @@
 
         }
 
-        //console.log(location_name_list); // 輸出: true
+        ////console.log(location_name_list); // 輸出: true
     }
 
     function set_RTSP_data_2(Model) {
@@ -879,7 +985,7 @@
     function token_check() {
         // 检查本地存储中是否存在JWT令牌
         var token = localStorage.getItem('token_park_space');
-        console.log(token)
+        //console.log(token)
         $.ajax({
             type: "GET",
             url: 'http://140.125.20.183:7700/Users/token_check',
@@ -887,7 +993,7 @@
                 'Authorization': token
             },
             success: function (response) {
-                console.log(response)
+                //console.log(response)
                 token_check = "true"
                 from_token_import_id()
             },
@@ -909,7 +1015,7 @@
                 'Authorization': token
             },
             success: function (response) {
-                console.log(response)
+                //console.log(response)
                 from_id_import_user_data(response)
 
 
@@ -927,12 +1033,13 @@
             success: function (model) {
                 model = model.result
                 position = model.lastname
-                console.log(position)
+                //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 = '/';