测开之路七十:监控平台之html

时间:2021-10-31 09:58:25

监控平台的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 %}