mirror of
https://gitee.com/sjqzhang/go-fastdfs.git
synced 2024-11-29 17:57:41 +08:00
182 lines
6.0 KiB
HTML
182 lines
6.0 KiB
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
|
||
<html lang="zh-CN">
|
||
|
||
<head>
|
||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||
<title>go-fastdfs report</title>
|
||
<!-- 引入 echarts.js -->
|
||
<script type="text/javascript" src="https://cdn.bootcss.com/echarts/3.7.0/echarts.min.js"></script>
|
||
<!-- 引入jquery.js -->
|
||
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.12.3/jquery.js"></script>
|
||
</head>
|
||
|
||
<body>
|
||
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
|
||
<div id="main" style="width:600px;height:400px"></div>
|
||
<div id="toolbar">
|
||
<button id="repair_stat" title="耗时较长">修证统计(最近30天)</button>
|
||
<button id="backup" title="耗时较长">备份元数据(最近30天)</button>
|
||
<button id="remove_empty_dir" title="耗时较长">删除空目录</button>
|
||
<button id="repair" title="耗时较长">自动修复</button>
|
||
</div>
|
||
<script type="text/javascript">
|
||
|
||
Date.prototype.Format = function(fmt)
|
||
{ //author: meizz
|
||
var o = {
|
||
"M+" : this.getMonth()+1, //月份
|
||
"d+" : this.getDate(), //日
|
||
"h+" : this.getHours(), //小时
|
||
"m+" : this.getMinutes(), //分
|
||
"s+" : this.getSeconds(), //秒
|
||
"q+" : Math.floor((this.getMonth()+3)/3), //季度
|
||
"S" : this.getMilliseconds() //毫秒
|
||
};
|
||
if(/(y+)/.test(fmt))
|
||
fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));
|
||
for(var k in o)
|
||
if(new RegExp("("+ k +")").test(fmt))
|
||
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
|
||
return fmt;
|
||
}
|
||
|
||
|
||
var groupPrefix='{group}'
|
||
$('#repair_stat').click(function () {
|
||
|
||
for(var i=0;i<30;i++) {
|
||
var date=new Date()
|
||
var time=new Date(date.getTime()-60*60*24*1000*i)
|
||
$.post(groupPrefix+"/repair_stat",{'date':time.Format('yyyyMMdd')},function (data) {
|
||
console.log(data)
|
||
})
|
||
|
||
}
|
||
|
||
})
|
||
$('#backup').click(function () {
|
||
for(var i=0;i<30;i++) {
|
||
var date=new Date()
|
||
var time=new Date(date.getTime()-60*60*24*1000*i)
|
||
$.post(groupPrefix+"/backup",{'date':time.Format('yyyyMMdd')},function (data) {
|
||
console.log(data)
|
||
})
|
||
}
|
||
})
|
||
$('#repair').click(function () {
|
||
$.post(groupPrefix+ '/repair?force=1',{},function (data) {
|
||
console.log(data)
|
||
})
|
||
})
|
||
$('#remove_empty_dir').click(function () {
|
||
$.post(groupPrefix+ '/remove_empty_dir',{},function (data) {
|
||
console.log(data)
|
||
})
|
||
})
|
||
|
||
$('#main').css({'width':window.innerWidth+'px','height':window.innerHeight/2+'px'})
|
||
|
||
var myChart = echarts.init(document.getElementById('main'));
|
||
// 显示标题，图例和空的坐标轴
|
||
myChart.setOption({
|
||
title: {
|
||
text: '文件信息'
|
||
},
|
||
tooltip: {},
|
||
legend: {
|
||
data: ['文件数','文件大小']
|
||
},
|
||
xAxis: {
|
||
data: []
|
||
},
|
||
yAxis: {},
|
||
series: [{
|
||
name: '文件数',
|
||
type: 'bar',
|
||
data: []
|
||
},{
|
||
name: '文件大小',
|
||
type: 'bar',
|
||
data: []
|
||
}],
|
||
|
||
tooltip : {
|
||
trigger: 'axis',
|
||
formatter:function(params)
|
||
{
|
||
var relVal = params[0].name;
|
||
for (var i = 0, l = params.length; i < l; i++) {
|
||
if (params[i].seriesName=='文件数') {
|
||
relVal += '<br/>' + params[i].seriesName + ' : ' + params[i].value+"";
|
||
}
|
||
if (params[i].seriesName=='文件大小') {
|
||
relVal += '<br/>' + params[i].seriesName + ' : ' + params[i].value + "M";
|
||
}
|
||
}
|
||
return relVal;
|
||
}
|
||
}
|
||
});
|
||
|
||
myChart.showLoading(); //数据加载完之前先显示一段简单的loading动画
|
||
var names = []; //类别数组（实际用来盛放X轴坐标值）
|
||
var nums = []; //销量数组（实际用来盛放Y坐标值）
|
||
var nums2 = []; //销量数组（实际用来盛放Y坐标值）
|
||
var title='文件信息'
|
||
|
||
$.ajax({
|
||
type: "post",
|
||
async: true,
|
||
//异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
|
||
url: groupPrefix+ "/stat?echart=1",
|
||
//请求发送到TestServlet处
|
||
data: {},
|
||
dataType: "json",
|
||
//返回数据形式为json
|
||
success: function(result) {
|
||
//请求成功时执行该函数内容，result即为服务器返回的json对象
|
||
if (result) {
|
||
console.log(result)
|
||
names=result.data.category
|
||
nums=result.data.barCount
|
||
nums2=result.data.barSize
|
||
for(var i=0;i<nums2.length;i++) {
|
||
nums2[i]=Math.round( nums2[i]/1024/1024)
|
||
}
|
||
if (names.length>0) {
|
||
names.pop()
|
||
title="文件总数："+ nums.pop()+"\n"+"文件大小："+ nums2.pop()+'M'
|
||
myChart.setOption({
|
||
'title':{
|
||
'text':title
|
||
}
|
||
})
|
||
}
|
||
myChart.hideLoading(); //隐藏加载动画
|
||
myChart.setOption({ //加载数据图表
|
||
xAxis: {
|
||
data: names
|
||
},
|
||
series: [{
|
||
// 根据名字对应到相应的系列
|
||
name: '文件数',
|
||
data: nums
|
||
},{
|
||
// 根据名字对应到相应的系列
|
||
name: '文件大小',
|
||
data: nums2
|
||
}]
|
||
});
|
||
|
||
}
|
||
|
||
},
|
||
error: function(errorMsg) {
|
||
//请求失败时执行该函数
|
||
alert("图表请求数据失败!");
|
||
myChart.hideLoading();
|
||
}
|
||
})</script>
|
||
</body>
|
||
|
||
</html> |