测开之路七十:监控平台之html
监控平台的html
<!-- 继承base模板 -->
{% extends "base.html" %} <!-- 引入bootstrap-datetimepicker下的css -->
{% block style %}
<link rel="stylesheet" href="/monitor/static/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css">
{% endblock %} {% block script %}
<!-- 引入js文件,需要在base.html留入口,不然渲染会出问题。 -->
<!-- 引入bootstrap-datetimepicker下的js -->
<script src="/monitor/static/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
<script src="https://cdn.bootcss.com/echarts/4.1.0-release/echarts.min.js"></script> <!-- 引入echarts -->
<script src="/monitor/static/monitor.js"></script>
{% endblock %} <!-- 渲染内容 -->
{% block content %}
<!-- bootstrap布局,声明容器 -->
<div class="container"> <!-- 声明一行(默认为12列)-->
<div class="row">
<div class="col-sm-12 col-md-4 col-lg-4"> <!-- 第一份占4列 -->
<!-- 选择起始时间段的下拉框 -->
<div class="input-group input-daterange"> <!-- 时间控件固定格式 -->
<!-- data-provide="datetimepicker"为固定格式 -->
<input id="start" type="text" class="form-control" data-provide="datetimepicker">
<div class="input-group-addon">to</div> <!-- 时间控件固定格式 -->
<input id="end" type="text" class="form-control" data-provide="datetimepicker">
</div>
</div>
<div class="col-sm-12 col-md-2 col-lg-2"> <!-- 第二份占2列 -->
<!-- 选择ip的下拉框 -->
<select id="ip" class="form-control"></select>
</div>
<div class="col-sm-12 col-md-1 col-lg-1"> <!-- 第三份占1列 -->
<!-- 搜索按钮 -->
<input id="search" class="form-control" type="button" value="检索">
</div>
</div> <!-- 准备画图的模块 -->
<!-- cpu、内存,声明一行(默认为12列),留给Echarts渲染图-->
<div class="row">
<div class="col-sm-12 col-md-6 col-lg-6"> <!-- 6列展示cpu -->
<!-- 为 ECharts 准备一个具备大小(宽高)的 DOM -->
<div id="cpu" style="width: 600px;height:400px;"></div>
</div>
<div class="col-sm-12 col-md-6 col-lg-6"> <!-- 6列展示内存 -->
<!-- 为 ECharts 准备一个具备大小(宽高)的 DOM -->
<div id="memory" style="width: 600px;height:400px;"></div>
</div>
</div> <!-- 网络的发和收,声明一行(默认为12列),留给Echarts渲染图-->
<div class="row">
<div class="col-sm-12 col-md-6 col-lg-6"> <!-- 6列展示发送数据 -->
<!-- 为 ECharts 准备一个具备大小(宽高)的 DOM -->
<div id="net-send" style="width: 600px;height:400px;"></div>
</div>
<div class="col-sm-12 col-md-6 col-lg-6"> <!-- 6列展示接收数据 -->
<!-- 为 ECharts 准备一个具备大小(宽高)的 DOM -->
<div id="net-receive" style="width: 600px;height:400px;"></div>
</div>
</div> </div>
{% endblock %}
测开之路七十:监控平台之html的更多相关文章
- 测开之路七十六:性能测试蓝图之html
<!-- 继承base模板 -->{% extends 'base.html' %} {% block script %} <!-- 从cdn引入ace edter的js --> ...
- 测开之路七十九:python 文件处理和对象的写入读取
"""处理文件:open(文件名, 模式,编码) 'r' 打开阅读(默认)'w' 打开写入,首先截断文件'x' 打开独占创建,如果文件已经存在则失败'a' 打开写入,追加 ...
- 测开之路七十八:shell之函数和参数
函数 function function_name(){ statement1 Statement2 .... statementn} function_name $var1 ...
- 测开之路七十六:linux变量和环境变量
变量 赋值 variable=0,访问 $var或${var} 参数 $n 用``引住的会先执行(~键) 位置参数 环境变量/etc/profile:全局的环境变量 . bash_profile:用户 ...
- 测开之路七十五:linux常用命令
常用命令: ls:列出文件或目录 pwd:展示当前所在的目录 mkdir:创建目录 mkdir -p :创建连续的目录 cd:切换目录 vi:编辑内容,点i开始编辑,输入::wq保存 cat 显示文件 ...
- 测开之路七十四:python处理kafka
kafka-python地址:https://github.com/dpkp/kafka-python 安装kafka-python:pip install kafka-python 接收消息 fro ...
- 测开之路七十二:性能测试工具之locust简介
locust官网:https://locust.io/ locust安装(不支持python3.7):pip install locustio 或者pycharm安装 官网给出的样例 根据官网代码 ...
- 测开之路七十一:监控平台之js
监控平台的js //datetimepicker的初始化函数(主要是对选择时间的下拉框)function init_datetimepicker() { //初始化格式和规则 $('#start'). ...
- 测开之路六十:接口测试平台之common目录
实现接口测试平台使用jsonpath进行取值来断言,效果: 访问页面: 调试功能:http://www.kuaidi100.com/query 保存功能 触发执行功能 查看报告功能 目录结构 comm ...
随机推荐
- Varint数值压缩存储方法
coming from http://www.cnblogs.com/smark/archive/2012/05/03/2480034.html 在编写网络通讯的时候我们经常需要把一些数据存储到byt ...
- [Git] 012 rm 命令的补充
0. 前言 [Git] 007 三棵树以及向本地仓库加入第一个文件 的 "2.5" 有提及 git rm --cached <file> 1. 介绍 git rm &l ...
- 洛咕 【P1891】疯狂LCM & 三倍经验
经验给掉先: 经验*1 经验*2 经验*3 这里给个跑得比较慢的 \(n \sqrt n\) 预处理然后 \(O(1)\) 回答询问的做法 式子 首先我们推柿子: \[\begin{aligned}A ...
- 高端编程之DOM
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- linux搭建tomcat集群+nginx
安装JDK 一.官方下载地址:http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html 下 ...
- vue项目 PC端点击查看大图
今天,发现了一款还不错的插件来实现查看大图,成熟度也比较高,支持各种操作 原作品的github地址为 https://github.com/mirari/v-viewer 也有对应的中文文档,使用方法 ...
- jQuery——超链接提示
在熟悉jQuery过程中,练习超链接提示显示,发现书本上有个问题,经过查询资料,修改如下: <!DOCTYPE html> <html> <head> <ti ...
- 行人重识别(ReID) ——技术实现及应用场景
导读 跨镜追踪(Person Re-Identification,简称 ReID)技术是现在计算机视觉研究的热门方向,主要解决跨摄像头跨场景下行人的识别与检索.该技术能够根据行人的穿着.体态.发型等信 ...
- linux使用v 2ray
一.安装配置服务端程序 是时候使用 了,因为相对安全,使用方法很简单,使用root权限执行以下命令即可 $ sudo -i 一顿安装后如图 输入 命令可以查看链接,然后在客户端使用这个链接就能配置好了 ...
- glDrawArrays 和 glDrawElements
在openGL中,所有图形都是通过分解成三角形的方式进行绘制.(一个矩形分解成两个三角形进行绘制) glDrawArrays 和 glDrawElements 的作用都是从一个数据数组中提取数据渲染 ...