测开之路七十一:监控平台之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)
});
测开之路七十一:监控平台之js的更多相关文章
- 测开之路七十:监控平台之html
监控平台的html <!-- 继承base模板 -->{% extends "base.html" %} <!-- 引入bootstrap-datetimepic ...
- 测开之路六十一:接口测试平台之interface蓝图
create的js //添加header的函数function add_header() { // 这里是动态拼接html语句,带着样式,拼凑成页面的 "key [] value []&qu ...
- 测开之路七十七:性能测试蓝图之js
//定义全局的editor = nullvar editor = null; //ace_editor的初始化函数function ace_editor() { var editor = ace.ed ...
- 测开之路七十六:性能测试蓝图之html
<!-- 继承base模板 -->{% extends 'base.html' %} {% block script %} <!-- 从cdn引入ace edter的js --> ...
- 测开之路七十三:用kafka实现消息队列之环境搭建
一:装java环境,确保java能正确调用 kafka下载地址:http://kafka.apache.org/downloads 下载并解压kafka: 新建两个文件夹,用于存放zookeeper和 ...
- 测开之路九十一:css常用的选择器
一:全局选择器:* 二:标签选择器,如给所有p标签加个背景色 三:id选择器:# ,如给id为id_01的元素加一个框 四:类选择器:. 如设置一个类选择器为blue,当有标签引用blue的时候,背景 ...
- 测开之路八十一:参数定义之*args和**kwargs
# *,不定长参数,*args# 定义函数参数def avg(score, *scores): return (score + sum(scores)) / (len(scores) + 1) ...
- 测开之路七十九:python 文件处理和对象的写入读取
"""处理文件:open(文件名, 模式,编码) 'r' 打开阅读(默认)'w' 打开写入,首先截断文件'x' 打开独占创建,如果文件已经存在则失败'a' 打开写入,追加 ...
- 测开之路七十八:shell之函数和参数
函数 function function_name(){ statement1 Statement2 .... statementn} function_name $var1 ...
随机推荐
- Vue.js状态管理模式 Vuex
vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. 安装.使用 vuex 首先我们在 vue. ...
- python的继承、重载和重写???
继承语法:<1>单继承:class(父类名)<2>多继承class(父类1,父类2,父类n...) 继承的特点:<1>减少代码量和灵活指定型类<2>子类 ...
- Failed to determine the https port for redirect
原文:Failed to determine the https port for redirect warn: Microsoft.AspNetCore.HttpsPolicy.HttpsRedir ...
- c# ASP.NET MVC easyui-filebox 图片上传和显示
原文:https://www.cnblogs.com/huatao/p/4727398.html https://www.cnblogs.com/weiweithe/p/4363458.html 表单 ...
- win32 socket 编程(三)——TCP/IP
一.TCP/IP解析 TCP/IP协议的核心部分是传输层协议(TCP.UDP),网络层协议(IP)和物理接口层,这三层通常是在操作系统内核中实现.因此用户一般不涉及.编程时,编程界面有两种形式: 1. ...
- Flutter 实际开发常用工具类(全局提示,请求封装,token缓存,验证码倒计时、常用窗帘动画及布局)
介绍: 一星期从入门到实际开发经验分享及总结 代码传送门github Flutter是谷歌的移动UI框架,可以快速在iOS和Android上构建高质量的原生用户界面.未来App开发 ...
- Spark 计算人员二度关系
1.一度人脉:双方直接是好友 2.二度人脉:双方有一个以上共同的好友,这时朋友网可以计算出你们有几个共同的好友并且呈现数字给你.你们的关系是: 你->朋友->陌生人 3.三度人脉:即你朋友 ...
- Python中queue消息队列模块
from queue import Queue from queue import PriorityQueue print("Queue类实现了一个基本的先进先出(FIFO)容器,使用put ...
- lua视频教程三套高清新
目录 1. 下载地址 2. 某网校 Lua 经典教程 3. lua脚本语言零基础开发教程19课全 4. LUA完整视频+Cocos2d-x项目实战 1. 下载地址 https://www.cnblog ...
- [SDOI2011]消防(贪心,图论,树的直径)
[SDOI2011]消防 题目描述 某个国家有n个城市,这n个城市中任意两个都连通且有唯一一条路径,每条连通两个城市的道路的长度为zi(zi<=1000). 这个国家的人对火焰有超越宇宙的热情, ...