Skip to content

Commit

Permalink
fix: 图表抖动
Browse files Browse the repository at this point in the history
  • Loading branch information
@5ime
5ime committed Dec 14, 2022
1 parent d083176 commit 926c652
Showing 1 changed file with 79 additions and 54 deletions.
133 changes: 79 additions & 54 deletions application/admin/view/index/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,38 +10,64 @@
float: left;
margin-left: 10px;
}

.content {
text-align: center;
padding: 15px;
}

.content h3 {
font-size: 20px;
margin: 0;
padding: 0;
font-weight: 500;
line-height: 30px;
user-select: none;
}

.content p {
font-size: 18px;
margin: 0;
padding: 0;
line-height: 30px;
text-align: center;
}

.mdui-table th {
user-select: none;
}
</style>
<div class="mdui-row">
<div class="mdui-col-md-6">
<div class="mdui-col-md-6 mdui-col-sm-6">
<div class="mdui-card">
<div class="content">
<h3>调用总数</h3>
<p id="count"></p>
<p id="count">NaN</p>
</div>
</div>
</div>
<div class="mdui-col-md-6 mdui-col-sm-6">
<div class="mdui-card">
<div class="content">
<h3>接口总数</h3>
<p id="info"></p>
<p id="info">NaN</p>
</div>
</div>
</div>
<div class="mdui-col-md-6 mdui-col-sm-6">
<div class="mdui-card">
<div class="content">
<h3>分类总数</h3>
<p id="sort"></p>
<p id="sort">NaN</p>
</div>
</div>
</div>
<div class="mdui-col-md-6 mdui-col-sm-6">
<div class="mdui-card">
<div class="content">
<h3>文章总数</h3>
<p id="post"></p>
<p id="post">NaN</p>
</div>
</div>
</div>
Expand Down Expand Up @@ -78,19 +104,63 @@ <h3>文章总数</h3>
$('.mdui-container').hide();
$('.loading').show();
$.ajax({
url: "{:url('admin/index/getNew10')}",
type: 'get',
dataType: 'json',
success: function(data) {
if (data.code == 200) {
$('.mdui-table-fluid').show();
for (var i = 0; i < data.data.length; i++) {
$('#New10').append('<tr><td>' + parseInt(i + 1) + '</td><td>' + data.data[i]['ip'] + '</td><td>' + data.data[i]['type'] + '</td><td>' + data.data[i]['path'] + '</td><td>' + data.data[i]['status'] + '</td><td>' + data.data[i]['time'] + '</td></tr>');
}
}else if(data.code == 404){
$('.mdui-table-fluid').show();
$('#New10').append('<tr><td colspan="6" style="text-align: center;">暂无数据，请填写日志路径</td></tr>');
}else {
mdui.snackbar({
message: '最新请求数据获取失败，请检查日志文件是否可以被访问！',
position: 'top'
});
}
}
});

$("#getNewData").click(function() {
$.ajax({
url: "{:url('admin/index/getNew10')}",
type: 'get',
dataType: 'json',
success: function(data) {
$('#New10').html('');
for (var i = 0; i < data.data.length; i++) {
$('#New10').append('<tr><td>' + parseInt(i + 1) + '</td><td>' + data.data[i]['ip'] + '</td><td>' + data.data[i]['type'] + '</td><td>' + data.data[i]['path'] + '</td><td>' + data.data[i]['status'] + '</td><td>' + data.data[i]['time'] + '</td></tr>');
}
}
});
});

function getCount(){
$.ajax({
url: '{:url("admin/index/getCount")}',
type: 'post',
dataType: 'json',
success: function(data) {
var data = data.data;
var ctx = document.getElementById("myChart");
ctx.height = 130;
var dataList = []
var labelsList = []
for (var i = 0; i < data.top10.length; i++) {
labelsList.push(data.top10[i].name);
dataList.push(data.top10[i].count);
}
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: [],
labels: labelsList,
datasets: [{
label: 'API Top 10',
data: [],
data: dataList,
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
Expand All @@ -117,64 +187,19 @@ <h3>文章总数</h3>
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
for (var i = 0; i < data.top10.length; i++) {
myChart.data.labels.push(data.top10[i].name);
myChart.data.datasets[0].data.push(data.top10[i].count);
}
$('#count').html(data.count);
$('#info').html(data.info);
$('#sort').html(data.sort);
$('#post').html(data.post);
}
});
$.ajax({
url: "{:url('admin/index/getNew10')}",
type: 'get',
dataType: 'json',
success: function(data) {
if (data.code == 200) {
$('.mdui-table-fluid').show();
for (var i = 0; i < data.data.length; i++) {
$('#New10').append('<tr><td>' + parseInt(i + 1) + '</td><td>' + data.data[i]['ip'] + '</td><td>' + data.data[i]['type'] + '</td><td>' + data.data[i]['path'] + '</td><td>' + data.data[i]['status'] + '</td><td>' + data.data[i]['time'] + '</td></tr>');
}
}else if(data.code == 404){
$('.mdui-table-fluid').show();
$('#New10').append('<tr><td colspan="6" style="text-align: center;">暂无数据，请填写日志路径</td></tr>');
}else {
mdui.snackbar({
message: '最新请求数据获取失败，请检查日志文件是否可以被访问！',
position: 'top'
});
}
}
});

$("#getNewData").click(function() {
$.ajax({
url: "{:url('admin/index/getNew10')}",
type: 'get',
dataType: 'json',
success: function(data) {
$('#New10').html('');
for (var i = 0; i < data.data.length; i++) {
$('#New10').append('<tr><td>' + parseInt(i + 1) + '</td><td>' + data.data[i]['ip'] + '</td><td>' + data.data[i]['type'] + '</td><td>' + data.data[i]['path'] + '</td><td>' + data.data[i]['status'] + '</td><td>' + data.data[i]['time'] + '</td></tr>');
}
}
});
});
}

setTimeout(() => {
$('.mdui-container').show();
getCount();
$('.loading').hide();
}, 1000);
</script>
Expand Down

0 comments on commit 926c652

Please sign in to comment.