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