测开之路七十一:监控平台之js

时间:2022-12-13 20:30:05

监控平台的js

测开之路七十一:监控平台之js

//datetimepicker的初始化函数(主要是对选择时间的下拉框)
function init_datetimepicker() {
//初始化格式和规则
$('#start').datetimepicker({
autoclose : true, //为true时,选择完下拉框自动关闭
format: 'yyyy-mm-dd hh:ii:ss', //选择完后,在前端展示的样式格式,尽量与后端保持一致
minView: 0, //能选择到的最小单位,0表示可以选择小时、分钟 1只可以选择小时
minuteStep:1 //最小单位的时间间隔步长,1为1秒,
});
//赋值
$('#start').datetimepicker('update', new Date()); //把开始时间更新为当前时间,可自己修改
$('#end').datetimepicker({
autoclose : true,
format: 'yyyy-mm-dd hh:ii:ss',
minView:0, //0表示可以选择小时、分钟 1只可以选择小时
minuteStep:1 //最小单位的时间间隔步长,1为1秒,
});
$('#end').datetimepicker('update', new Date()); //把结束时间更新为当前时间,可自己修改
}

//获取ip的list
function get_ip_list() {
var url = host + "/monitor/api/v1/ip/list"
//访问/monitor/api/v1/ip/list获取ip
http(url, {}, 'GET', function(data){
//获取成功则按以下规则处理
console.log(data)
var html = "";
//把每一个ip拿出来,拼接成html,并加到id为ip的元素下面
for (ip in data['data']) {
html += '<option value="' + data['data'][ip] + '">' + data['data'][ip] + '</option>'
}
$('#ip').append(html)
}, function(data){
//失败的执行函数
console.log(data)
})
}

//点搜索触发事件
function search() {
var url = host + "/monitor/api/v1/search"
var data = {
'start': $('#start').datetimepicker('getFormattedDate'), //获取格式化后的开始时间
'end': $('#end').datetimepicker('getFormattedDate'), //获取格式化后的结束时间
'ip': $('#ip').val() //获取ip
}
console.log(data)
http(url, data, 'GET', success, fail) //发送GET请求
}

//有多少个数就生成多少个点,即x轴,获取到的监控数据在y轴
function range(data){
index = []
for (var i=0; i<=data.length-1; i++) {
index.push(i)
}
return index
}

//画图函数,echarts官网提供的模板
function drawLine(id, data, title, subtext) {
var myChart = echarts.init(document.getElementById(id));
option = {
title : {
text: title,
subtext: subtext //子标题
},
tooltip : {
trigger: 'axis'
},
legend: {
data:['意向']
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
xAxis : [
{
type : 'category',
boundaryGap : false,
data : range(data)
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name: title,
type:'line',
smooth:true,
itemStyle: {normal: {areaStyle: {type: 'default'}}},
data: data //画图要用到的数据,对应传进来的data
}
]
};
// 为echarts对象加载数据
myChart.setOption(option);
}

//成功拿到数据就渲染到前端
function success(data) {
console.log(data)
//定义数据
cpu = []
memory = []
send = []
receive = []
//分别取数据
for (var i=0; i<data['data'].length; i++) {
cpu.push(data['data'][i]['cpu']['avg'])
memory.push(data['data'][i]['memory']['percent'])
send.push(data['data'][i]['disk']['percent'])
receive.push(data['data'][i]['network']['packets']['sent'])
}
//渲染数据
drawLine('cpu', cpu, "处理器", "处理器使用率")
drawLine('memory', memory, "内存", "内存使用率")
drawLine('net-send', send, "网卡", "网卡发送数据")
drawLine('net-receive', receive, "网卡", "网卡接收数据")
}


function fail(data) {
console.log(data)
}


$(function() {
init_datetimepicker()
get_ip_list()
$('#search').click(search)
});