监控平台的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的更多相关文章

  1. 测开之路七十六:性能测试蓝图之html

    <!-- 继承base模板 -->{% extends 'base.html' %} {% block script %} <!-- 从cdn引入ace edter的js --> ...

  2. 测开之路七十九:python 文件处理和对象的写入读取

    """处理文件:open(文件名, 模式,编码) 'r' 打开阅读(默认)'w' 打开写入,首先截断文件'x' 打开独占创建,如果文件已经存在则失败'a' 打开写入,追加 ...

  3. 测开之路七十八:shell之函数和参数

    函数 function function_name(){    statement1    Statement2    ....    statementn} function_name $var1  ...

  4. 测开之路七十六:linux变量和环境变量

    变量 赋值 variable=0,访问 $var或${var} 参数 $n 用``引住的会先执行(~键) 位置参数 环境变量/etc/profile:全局的环境变量 . bash_profile:用户 ...

  5. 测开之路七十五:linux常用命令

    常用命令: ls:列出文件或目录 pwd:展示当前所在的目录 mkdir:创建目录 mkdir -p :创建连续的目录 cd:切换目录 vi:编辑内容,点i开始编辑,输入::wq保存 cat 显示文件 ...

  6. 测开之路七十四:python处理kafka

    kafka-python地址:https://github.com/dpkp/kafka-python 安装kafka-python:pip install kafka-python 接收消息 fro ...

  7. 测开之路七十二:性能测试工具之locust简介

    locust官网:https://locust.io/ locust安装(不支持python3.7):pip install locustio   或者pycharm安装 官网给出的样例 根据官网代码 ...

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

    监控平台的js //datetimepicker的初始化函数(主要是对选择时间的下拉框)function init_datetimepicker() { //初始化格式和规则 $('#start'). ...

  9. 测开之路六十:接口测试平台之common目录

    实现接口测试平台使用jsonpath进行取值来断言,效果: 访问页面: 调试功能:http://www.kuaidi100.com/query 保存功能 触发执行功能 查看报告功能 目录结构 comm ...

随机推荐

  1. Varint数值压缩存储方法

    coming from http://www.cnblogs.com/smark/archive/2012/05/03/2480034.html 在编写网络通讯的时候我们经常需要把一些数据存储到byt ...

  2. [Git] 012 rm 命令的补充

    0. 前言 [Git] 007 三棵树以及向本地仓库加入第一个文件 的 "2.5" 有提及 git rm --cached <file> 1. 介绍 git rm &l ...

  3. 洛咕 【P1891】疯狂LCM & 三倍经验

    经验给掉先: 经验*1 经验*2 经验*3 这里给个跑得比较慢的 \(n \sqrt n\) 预处理然后 \(O(1)\) 回答询问的做法 式子 首先我们推柿子: \[\begin{aligned}A ...

  4. 高端编程之DOM

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. linux搭建tomcat集群+nginx

    安装JDK 一.官方下载地址:http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html 下 ...

  6. vue项目 PC端点击查看大图

    今天,发现了一款还不错的插件来实现查看大图,成熟度也比较高,支持各种操作 原作品的github地址为 https://github.com/mirari/v-viewer 也有对应的中文文档,使用方法 ...

  7. jQuery——超链接提示

    在熟悉jQuery过程中,练习超链接提示显示,发现书本上有个问题,经过查询资料,修改如下: <!DOCTYPE html> <html> <head> <ti ...

  8. 行人重识别(ReID) ——技术实现及应用场景

    导读 跨镜追踪(Person Re-Identification,简称 ReID)技术是现在计算机视觉研究的热门方向,主要解决跨摄像头跨场景下行人的识别与检索.该技术能够根据行人的穿着.体态.发型等信 ...

  9. linux使用v 2ray

    一.安装配置服务端程序 是时候使用 了,因为相对安全,使用方法很简单,使用root权限执行以下命令即可 $ sudo -i 一顿安装后如图 输入 命令可以查看链接,然后在客户端使用这个链接就能配置好了 ...

  10. glDrawArrays 和 glDrawElements

     在openGL中,所有图形都是通过分解成三角形的方式进行绘制.(一个矩形分解成两个三角形进行绘制) glDrawArrays 和 glDrawElements 的作用都是从一个数据数组中提取数据渲染 ...