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

This commit is contained in:
virusdefender 2015-08-20 13:48:43 +08:00
parent 55e4bcb296
commit 4146719673
2 changed files with 21 additions and 77 deletions

View File

@ -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);
});

View File

@ -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>