追加累犯

Parking_spaces/Views/Engineering/Engineering_Index.cshtml

@@ -100,6 +100,8 @@
             </div>
             <div class="card-body">
                 <button class="btn btn-outline-info" onclick="Yuntech_RTSP()">雲科即時影像</button>
+                <br />
+                <br />
                 <div id="myMap"></div>
 
             </div>
@@ -137,6 +139,7 @@
     </div>
 </div>
 <br />
+
 <div class="row">
     <!--每日違規數量-->
     <div class="col-xl-8 col-lg-8">

Parking_spaces/Views/Engineering/Engineering_Violation.cshtml

@@ -36,6 +36,71 @@
 </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">
+                    違規累犯
+                    <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_Bar"></canvas>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+
+<!--設定數據圖數據-每日違規數量-->
+<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.reverse(),
+                datasets: [{
+                    label: '違規數量',
+                    data: values.reverse(),
+                    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
@@ -52,6 +117,7 @@
             success: function (Model) {
                 console.log(Model)
                 set_data(Model)
+                get_recidivst_1()
 
             }
         });
@@ -92,6 +158,45 @@
 </script>
 
 
+<!--抓出違規慣犯-->
+<script>
+    function get_recidivst_1(){
+        $.ajax({
+            type: "GET",
+            url: "http://140.125.20.183:7700/api/Violation_car_table/recidivists",
+            data: {},
+            contentType: "application/json",
+            success: function (Model) {
+                //console.log(Model)
+                set_recidivst_1(Model)
+
+
+            }
+        });
+    }
+    function set_recidivst_1(Model){
+        var car_list=[]
+        var occurrences_list=[]
+        if (Model.length > 0) {
+            for (var i = 0; i < Model.length; i++) {
+                if (Model[i].licensePlateNumber!=""){
+                    car_list.push(Model[i].licensePlateNumber)
+                    occurrences_list.push(Model[i].occurrences)
+                    if (car_list.length>=10){
+                        break
+                    }
+                }
+            }
+        }
+        console.log(car_list)
+        console.log(occurrences_list)
+        set_violation_table(car_list,occurrences_list)
+    }
+
+
+    
+
+</script>