mirror of
https://github.com/QingdaoU/OnlineJudge.git
synced 2025-11-04 14:49:58 +08:00
完成监控判题队列长度的前端页面和 js
This commit is contained in:
parent
55e4bcb296
commit
4146719673
@ -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",
|
||||
"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"],
|
||||
labels: ["初始化"],
|
||||
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]
|
||||
},
|
||||
{
|
||||
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]
|
||||
data: [0]
|
||||
}
|
||||
]
|
||||
};
|
||||
Chart.defaults.global.responsive = true;
|
||||
new Chart($("#c1").get(0).getContext("2d")).Line(data1);
|
||||
var chart = new Chart($("#waiting-queue-chart").get(0).getContext("2d")).Line(data);
|
||||
|
||||
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);
|
||||
|
||||
});
|
||||
@ -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>
|
||||
Loading…
Reference in New Issue
Block a user