完成监控判题队列长度的前端页面和 js

static/src/js/app/admin/monitor/monitor.js

@@ -1,54 +1,6 @@
 require(["jquery", "chart"], function ($, Chart) {
-    var data2 = {
-        labels: ["January", "February", "March", "April", "May", "June", "July",
-            "January", "February", "March", "April", "January", "February", "March", "April"],
-        datasets: [
-            {
-                label: "2222222",
-                fillColor: "rgba(255,255,255,0.2)",
-                strokeColor: "rgba(151,187,205,1)",
-                pointColor: "rgba(151,187,205,1)",
-                pointStrokeColor: "#fff",
-                pointHighlightFill: "#fff",
-                pointHighlightStroke: "rgba(151,187,205,1)",
-                data: [3, 7, 8, 9, 1, 4, 10, 10, 9, 8, 7, 10, 10, 10, 10]
-            }
-        ]
-    };
-    new Chart($("#waiting-queue-chart").get(0).getContext("2d")).Line(data2);
-
     var data = {
-        labels: ["January", "February", "March", "April", "May", "June", "July",
+        labels: ["初始化"],
-            "January", "February", "March", "April", "January", "February", "March", "April"],
-        datasets: [
-            {
-                label: "11111111",
-                fillColor: "rgba(255,255,255,0.2)",
-                strokeColor: "rgba(250,68,68,1)",
-                pointColor: "rgba(220,220,220,1)",
-                pointStrokeColor: "#fff",
-                pointHighlightFill: "#fff",
-                pointHighlightStroke: "rgba(220,220,220,1)",
-                data: [10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10]
-            },
-            {
-                label: "2222222",
-                fillColor: "rgba(255,255,255,0.2)",
-                strokeColor: "rgba(151,187,205,1)",
-                pointColor: "rgba(151,187,205,1)",
-                pointStrokeColor: "#fff",
-                pointHighlightFill: "#fff",
-                pointHighlightStroke: "rgba(151,187,205,1)",
-                data: [3, 7, 8, 9, 1, 4, 10, 10, 9, 8, 7, 10, 10, 10, 10]
-            }
-        ]
-    };
-    Chart.defaults.global.responsive = true;
-    new Chart($("#judge-instance-chart").get(0).getContext("2d")).Line(data);
-
-    var data1 = {
-        labels: ["January", "February", "March", "April", "May", "June", "July",
-            "January", "February", "March", "April", "January", "February", "March", "April"],
         datasets: [
             {
                 label: "2222222",
@@ -58,23 +10,29 @@ require(["jquery", "chart"], function ($, Chart) {
                 pointStrokeColor: "#fff",
                 pointHighlightFill: "#fff",
                 pointHighlightStroke: "rgba(151,187,205,1)",
-                data: [3, 7, 8, 9, 1, 4, 10, 10, 9, 8, 7, 10, 10, 10, 10]
+                data: [0]
-            },
-            {
-                label: "2222222",
-                fillColor: "rgba(255,255,255,0.2)",
-                strokeColor: "rgba(252,214,48,1)",
-                pointColor: "rgba(252,214,48,1)",
-                pointStrokeColor: "#fff",
-                pointHighlightFill: "#fff",
-                pointHighlightStroke: "rgba(151,187,205,1)",
-                data: [30, 70, 58, 49, 19, 44, 100, 100, 89, 88, 77, 50, 80, 66, 100]
             }
         ]
     };
-    Chart.defaults.global.responsive = true;
+    var chart = new Chart($("#waiting-queue-chart").get(0).getContext("2d")).Line(data);
-    new Chart($("#c1").get(0).getContext("2d")).Line(data1);
 
+    function getMonitorData(){
+        $.ajax({
+            url: "/api/admin/monitor/",
+            method: "get",
+            dataType: "json",
+            success: function(data){
+                if(!data.code){
+                    chart.addData([data.data["count"]], data.data["time"])
+                }
+            }
+        })
+    }
 
+    $("#clear-chart-data").click(function(){
+        chart.removeData();
+    });
+
+    setInterval(getMonitorData, 3000);
 
 });

template/admin/monitor/monitor.html

@@ -9,21 +9,7 @@
                 <canvas class="line-chart" id="waiting-queue-chart"></canvas>
             </div>
         </div>
-        <div>
-
-            <h3>【10.1.24.23 - judge1 】</h3>
-
-            <div>
-                <canvas class="line-chart" id="judge-instance-chart"></canvas>
-                <div class="chart-description">判题实例数量变化</div>
-            </div>
-
-            <div>
-                <canvas id="c1" class="line-chart"></canvas>
-                <div class="chart-description">cpu 和 内存</div>
-            </div>
-        </div>
     </div>
-
+<button class="btn btn-danger" id="clear-chart-data">清空图表数据</button>
     <script src="/static/js/app/admin/monitor/monitor.js"></script>
 </div>