2019-02-26 16:57:41 +08:00
|
|
|
|
<!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">
|
2019-02-27 17:13:25 +08:00
|
|
|
|
<title>go-fastdfs report</title>
|
2019-02-26 16:57:41 +08:00
|
|
|
|
<!-- 引入 echarts.js -->
|
2020-03-21 11:11:37 +08:00
|
|
|
|
<script type="text/javascript" src="static//echarts.min.js"></script>
|
2019-02-26 16:57:41 +08:00
|
|
|
|
<!-- 引入jquery.js -->
|
2020-03-21 11:11:37 +08:00
|
|
|
|
<script type="text/javascript" src="static/jquery-3.4.1.min.js"></script>
|
2019-02-26 16:57:41 +08:00
|
|
|
|
</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>
|
|
|
|
|
|
2020-03-21 11:11:37 +08:00
|
|
|
|
</html>
|