测开之路七十一：监控平台之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)
});