新增圓餅圖 及 者線圖

Parking_spaces/Views/Engineering/Engineering_Index.cshtml

@@ -192,16 +192,16 @@
 <br />
 
 <div class="row">
-    <!--每日違規數量-->
+    <!--每日車流量-->
     <div class="col-xl-8 col-lg-8">
-        <div class="card shadow mb-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-bar">
+                <div class="chart-area">
                     <canvas id="in_car_Bar"></canvas>
                 </div>
             </div>
@@ -235,9 +235,56 @@
         var dailyTrafficData = dailyTrafficData
 
         // 取得 canvas 元素
-        var ctx = document.getElementById('in_car_Bar')
+        var ctx1 = document.getElementById('in_car_Bar')
 
       
+        // 使用 Chart.js 繪製長條圖
+        var myLineChart = new Chart(ctx1, {
+            type: 'line',
+            data: {
+                labels: date.reverse(),
+                datasets: [{
+                    label: '車流量',
+                    data: values.reverse(),
+                    backgroundColor: 'rgba(75, 192, 192, 0.2)', // 設定背景色
+                    borderColor: 'rgba(75, 192, 192, 1)', // 設定邊框色
+                    pointHitRadius: 10,
+                    pointBorderWidth: 2,
+                    ineTension: 0.3,
+                    pointRadius: 3,
+                    pointHoverRadius: 3,
+                }]
+            },
+            options: {
+                responsive: true, // 啟用 responsive 設置
+                maintainAspectRatio: false, // 保持長寬比例
+                scales: {
+                    y: {
+                        beginAtZero: true
+                    },
+                    xAxes: {
+                        gridLines: {
+                            display: false // 移除 x 軸的網格線
+                        }
+                    }
+                }
+            }
+        });
+
+        
+        
+    }
+
+    function set_in_yuntech_table_1(labels, dailyTrafficData) {
+        date = JSON.parse(JSON.stringify(labels));
+        values = JSON.parse(JSON.stringify(dailyTrafficData));
+        // 假設你有一些資料，例如每日車流量
+        var dailyTrafficData = dailyTrafficData
+
+        // 取得 canvas 元素
+        var ctx = document.getElementById('in_car_Bar')
+
+
         // 使用 Chart.js 繪製長條圖
         var myBarChart = new Chart(ctx, {
             type: 'bar',
@@ -262,8 +309,8 @@
             }
         });
 
-        
+
-        
+
     }
 
 
@@ -403,7 +450,7 @@
 
                 var daysDifference = Math.floor(timeDifference / (1000 * 60 * 60 * 24));// 轉換為天數（毫秒 / 1000 / 60 / 60 / 24）
 
-                if (daysDifference > 6) {
+                if (daysDifference > 29) {
                     console.log(date_list)
                     break
                 }
@@ -465,7 +512,7 @@
 
                 var daysDifference = Math.floor(timeDifference / (1000 * 60 * 60 * 24));// 轉換為天數（毫秒 / 1000 / 60 / 60 / 24）
                 ////console.log(daysDifference)
-                if (daysDifference > 6) {
+                if (daysDifference > date_list.length) {
                     break
                 }
                 var D_1 = new Date(date);
@@ -556,7 +603,7 @@
 
                 var daysDifference = Math.floor(timeDifference / (1000 * 60 * 60 * 24));// 轉換為天數（毫秒 / 1000 / 60 / 60 / 24）
                 ////console.log(daysDifference)
-                if (daysDifference > 6) {
+                if (daysDifference > date_list.length) {
                     break
                 }
                 var D_1 = new Date(date);

Parking_spaces/Views/Engineering/Engineering_Violation.cshtml

@@ -37,13 +37,13 @@
 
 
 <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_recidivst_1()"></button>
+                    <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">
@@ -53,9 +53,114 @@
             </div>
         </div>
     </div>
+    <!--違規次數-->
+    <div class="col-xl-4 col-lg-4">
+        <div class="card shadow mb-8">
+            <div class="card-header py-3">
+                <h6 class="m-0 font-weight-bold text-primary">
+                    違規次數
+                    <button class="btn btn-info btn-circle btn-sm" style="float:right; background-image: url('/image/icon/F5.png'); background-size: cover;" onclick="get_recidivst_1()"></button>
+                </h6>
+            </div>
+            <div class="card-body">
+                <div class="chart-bar">
+                    <canvas id="violation_car_time_Bar"></canvas>
+                </div>
+            </div>
+        </div>
+    </div>
 </div>
 
 
+<!--設定數據圖數據-違規次數-->
+<script>
+    function set_violation_time_table(labels, dailyTrafficData) {
+
+        date = JSON.parse(JSON.stringify(labels));
+        values = JSON.parse(JSON.stringify(dailyTrafficData));
+        // 假設你有一些資料，例如違規次數
+        var dailyTrafficData = dailyTrafficData;
+
+        // 取得 canvas 元素
+        var ctx = document.getElementById('violation_car_time_Bar')
+
+
+        //生成10種顏色
+        function generateColors_1(numColors) {
+            var colors = [];
+            for (var i = 0; i < numColors; i++) {
+                var ratio = i / (numColors - 1);
+                var r = Math.round(255 * (1 - ratio) + 0 * ratio);
+                var g = Math.round(0 * (1 - ratio) + 0 * ratio);
+                var b = Math.round(0 * (1 - ratio) + 0 * ratio);
+                var color = rgbToHex(r, g, b);
+                colors.push(color);
+            }
+            return colors;
+        }
+
+        function generateColors_2(numColors) {
+            var colors = [];
+            for (var i = 0; i < numColors; i++) {
+                var ratio = i / (numColors - 1);
+                var r = Math.round(170 * (1 - ratio) + 0 * ratio);
+                var g = Math.round(30 * (1 - ratio) + 32 * ratio);
+                var b = Math.round(20 * (1 - ratio) + 32 * ratio);
+                var color = rgbToHex(r, g, b);
+                colors.push(color);
+            }
+            return colors;
+        }
+
+        function rgbToHex(r, g, b) {
+            return '#' + componentToHex(r) + componentToHex(g) + componentToHex(b);
+        }
+
+        function componentToHex(c) {
+            var hex = c.toString(16);
+            return hex.length == 1 ? '0' + hex : hex;
+        }
+
+        var numColors = 10;
+        var backgroundColors = generateColors_1(numColors);
+        var hoverBackgroundColors = generateColors_2(numColors);
+
+
+
+        // 使用 Chart.js 繪製圓餅圖
+        var myBarChart = new Chart(ctx, {
+            type: 'pie',//line(線圖),pie(圓餅圖),bar(長條圖)
+            data: {
+                labels: date.reverse(),
+                datasets: [{
+                    label: '違規次數',
+                    data: values.reverse(),
+                    backgroundColor: backgroundColors,
+                    hoverBackgroundColor: hoverBackgroundColors,
+                    borderWidth: 1
+                }]
+            },
+            options: {
+                responsive: true, // 啟用 responsive 設置
+                maintainAspectRatio: false, // 保持長寬比例
+                scales: {
+                    y: {
+                        beginAtZero: true
+                    }
+                }
+            }
+        });
+
+
+
+
+        
+    }
+
+
+</script>
+
+
 <!--設定數據圖數據-每日違規數量-->
 <script>
     function set_violation_table(labels, dailyTrafficData) {
@@ -100,7 +205,6 @@
 
 
 
-
 <!--獲取資料-->
 <script>
     var token_ckeck //= document.getElementById("token_ckeck_id").value
@@ -118,6 +222,7 @@
                 console.log(Model)
                 set_data(Model)
                 get_recidivst_1()
+                get_violation_data_1()
 
             }
         });
@@ -190,7 +295,7 @@
         }
         console.log(car_list)
         console.log(occurrences_list)
-        set_violation_table(car_list,occurrences_list)
+        set_violation_time_table(car_list, occurrences_list)
     }
 
 
@@ -200,6 +305,182 @@
 
 
 
+<!--獲取違規資料-->
+<script>
+    var token_ckeck //= document.getElementById("token_ckeck_id").value
+    var position //職位
+    function get_violation_data_1() {
+        violation_car_list = []
+        //console.log("start")
+        //token_check = document.getElementById("token_check_id").value
+        //console.log(token_check)
+        $.ajax({
+            type: "GET",
+            url: "http://140.125.20.183:7700/api/Parking_spaces_violation_total_table",
+            data: {},
+            contentType: "application/json",
+            success: function (Model) {
+                get_violation_data_2(Model)
+
+
+            }
+        });
+    }
+
+    function get_violation_data_2(Model) {
+        if (Model.length > 0) {
+            for (var i = 0; i < Model.length; i++) {
+                var name = Model[i].parking_spaces_violation_name
+                ////console.log(name)
+                $.ajax({
+                    type: "GET",
+                    url: "http://140.125.20.183:7700/api/Violation_car_table/violation_location_name-" + name,
+                    data: {},
+                    contentType: "application/json",
+                    success: function (Model) {
+                        set_violation_data_1(Model)
+
+                    }
+                });
+
+            }
+        }
+        set_violation_data_3()
+
+    }
+</script>
+
+<!--設置違規資料-->
+<script>
+    var date_list = []
+    var violation_car_list = []
+
+    function set_violation_data_1(Model) {
+        // 獲取當前日期
+        var today = new Date();
+        // 提取年、月、日
+        var year = today.getFullYear();
+        var month = today.getMonth() + 1; // 注意：月份是從 0 開始的，所以需要加 1
+        var day = today.getDate();
+        // 將月份和日期補零，以確保是兩位數
+        month = month < 10 ? '0' + month : month;
+        day = day < 10 ? '0' + day : day;
+        // 構建日期字符串，格式：YYYY-MM-DD
+        var todayDate = year + '-' + month + '-' + day;
+
+        if (Model.length > 0) {
+            var D = ""
+            for (var i = 0; i < Model.length; i++) {
+                // 假設你有一個包含日期時間的字符串
+                var dateTimeString = Model[i].create_data_time;
+                // 將字符串轉換為 Date 對象
+                var dateTime = new Date(dateTimeString);
+                // 提取日期部分
+                var year = dateTime.getFullYear();
+                var month = dateTime.getMonth() + 1; // 月份是從 0 開始的，所以要加 1
+                var day = dateTime.getDate();
+                // 將月份和日期補零，以確保是兩位數
+                month = month < 10 ? '0' + month : month;
+                day = day < 10 ? '0' + day : day;
+
+                // 構建日期字符串，格式：YYYY-MM-DD
+                var date = year + '-' + month + '-' + day;
+
+                // 將字符串轉換為 Date 對象
+                var startDate = new Date(date);
+                var endDate = new Date(todayDate);
+                // 計算天數差
+                var timeDifference = endDate - startDate;
+
+                var daysDifference = Math.floor(timeDifference / (1000 * 60 * 60 * 24));// 轉換為天數（毫秒 / 1000 / 60 / 60 / 24）
+
+                if (daysDifference > 29) {
+                    console.log(date_list)
+                    break
+                }
+
+                if (D != date) {
+                    D = date
+                    var D_1 = new Date(D);
+                    var MD = D_1.toLocaleDateString('en-US', { month: '2-digit', day: '2-digit' });
+                    var hasValue = date_list.includes(MD);
+                    if (hasValue == false) {
+                        date_list.push(MD)
+                    }
+                }
+            }
+        }
+
+        //console.log(date_list)
+        set_violation_data_2(Model)
+    }
+
+    function set_violation_data_2(Model) {
+        if (date_list.length > 0 && violation_car_list.length <= 0) {
+            for (var i = 0; i < date_list.length; i++) {
+                violation_car_list.push(0)
+            }
+        }
+
+        var today = new Date();
+        var year = today.getFullYear();
+        var month = today.getMonth() + 1; // 注意：月份是從 0 開始的，所以需要加 1
+        var day = today.getDate();
+        month = month < 10 ? '0' + month : month;
+        day = day < 10 ? '0' + day : day;
+        var todayDate = year + '-' + month + '-' + day;
+
+        if (Model.length > 0) {
+            var D = ""
+            for (var i = 0; i < Model.length; i++) {
+                // 假設你有一個包含日期時間的字符串
+                var dateTimeString = Model[i].create_data_time;
+                // 將字符串轉換為 Date 對象
+                var dateTime = new Date(dateTimeString);
+                // 提取日期部分
+                var year = dateTime.getFullYear();
+                var month = dateTime.getMonth() + 1; // 月份是從 0 開始的，所以要加 1
+                var day = dateTime.getDate();
+                // 將月份和日期補零，以確保是兩位數
+                month = month < 10 ? '0' + month : month;
+                day = day < 10 ? '0' + day : day;
+
+                // 構建日期字符串，格式：YYYY-MM-DD
+                var date = year + '-' + month + '-' + day;
+
+                // 將字符串轉換為 Date 對象
+                var startDate = new Date(date);
+                var endDate = new Date(todayDate);
+                // 計算天數差
+                var timeDifference = endDate - startDate;
+
+                var daysDifference = Math.floor(timeDifference / (1000 * 60 * 60 * 24));// 轉換為天數（毫秒 / 1000 / 60 / 60 / 24）
+                ////console.log(daysDifference)
+                if (daysDifference > date_list.length) {
+                    break
+                }
+                var D_1 = new Date(date);
+                var MD = D_1.toLocaleDateString('en-US', { month: '2-digit', day: '2-digit' });
+                var index = date_list.indexOf(MD);
+                ////console.log(index)
+                violation_car_list[index] = violation_car_list[index] + 1
+
+            }
+        }
+
+    }
+
+    function set_violation_data_3() {
+        // 等待 2000 毫秒（2 秒）
+        setTimeout(function () {
+            set_violation_table(date_list, violation_car_list)
+        }, 200);
+    }
+
+</script>
+
+
+
 
 
 <!--檢查token-->