tornado硬件管理系统-网络与磁盘的实现（7）

因为网络与磁盘的存储是一致的，故而。可以使用双饼图实现：

定义双饼图：

#-*- coding: utf-8 -*-
import datetime
from pyecharts import Liquid,Gauge,Pie,Line

class Chart(object):

    #定义双饼图
    def pie_two_html(self, chart_id, title, sub_title1, sub_title2, key1, key2, val1, val2):
        # 实例化饼状图
        pie = Pie(
            "{}-{}".format(self.dt, title),
            title_pos="center",
            width="100%",
            height=300,
            title_text_size=14,
            title_color="white"
        )
        # 指定ID
        pie.chart_id = chart_id
        # 绑定属性和值
        pie.add(
            sub_title1,
            key1,
            val1,
            center=[25, 50],#空心圆
            is_random=True,
            radius=[30, 75],
            rosetype="area",
            is_legend_show=False,
            is_label_show=True
        )
        pie.add(
            sub_title2,
            key2,
            val2,
            center=[75, 50],
            is_random=True,
            radius=[30, 75],
            rosetype="area",
            is_legend_show=False,
            is_label_show=True
        )
        return pie.render_embed()

    #定义一个时间方法
    @property
    def dt(self):
        return datetime.datetime.now().strftime("%Y-%m-%d %H:%M:%S")

网络与存储的html

 <div class="col-md-12">
        <div class="card text-white bg-dark mb-3">
            <div class="card-header">内存/交换分区信息</div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6 pad-right">
                        <div class="border border-white">{% raw data['mem_gauge'] %}</div>
                        <table class="table table-sm table-bordered">
                            <tr>
                                <td class="text-primary" style=" 30%">使用率（%）</td>
                                <td id="mem_percent" class="text-danger">{{ data['mem_info']['percent'] }}</td>
                            </tr>
                            <tr>
                                <td class="text-primary" style=" 30%">总量（GB）</td>
                                <td id="mem_total" class="text-danger">{{ data['mem_info']['total'] }}</td>
                            </tr>
                            <tr>
                                <td class="text-primary" style=" 30%">使用量（GB）</td>
                                <td id="mem_used" class="text-danger">{{ data['mem_info']['used'] }}</td>
                            </tr>
                            <tr>
                                <td class="text-primary" style=" 30%">剩余量（GB）</td>
                                <td id="mem_free" class="text-danger">{{ data['mem_info']['free'] }}</td>
                            </tr>
                        </table>
                    </div>
                    <div class="col-md-6 pad-left">
                        <div class="border border-white">{% raw data['swap_gauge'] %}</div>
                        <table class="table table-sm table-bordered">
                            <tr>
                                <td class="text-primary" style=" 30%">使用率（%）</td>
                                <td id="swap_percent" class="text-danger">{{ data['swap_info']['percent'] }}</td>
                            </tr>
                            <tr>
                                <td class="text-primary" style=" 30%">总量（GB）</td>
                                <td id="swap_total" class="text-danger">{{ data['swap_info']['total'] }}</td>
                            </tr>
                            <tr>
                                <td class="text-primary" style=" 30%">使用量（GB）</td>
                                <td id="swap_used" class="text-danger">{{ data['swap_info']['used'] }}</td>
                            </tr>
                            <tr>
                                <td class="text-primary" style=" 30%">剩余量（GB）</td>
                                <td id="swap_free" class="text-danger">{{ data['swap_info']['free'] }}</td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
     <div class="col-md-12">
        <div class="card text-white bg-dark mb-3">
            <div class="card-header">网络信息</div>
            <div class="card-body">
                <div class="row">
                    {% for v in data['net_pie'] %}
                    <div class="col-md-12">
                        <div class="border border-white">{% raw v %}</div>
                    </div>
                    {% end %}
                    <div class="col-md-12">
                        <table class="table table-sm table-bordered">
                            <thead>
                                <tr class="text-primary">
                                    <th style=" 20%">网卡名称</th>
                                    <th style=" 10%">发送字节</th>
                                    <th style=" 10%">接收字节</th>
                                    <th style=" 10%">发送包数</th>
                                    <th style=" 10%">接收包数</th>
                                    <th style=" 10%">协议地址族</th>
                                    <th style=" 10%">IP地址</th>
                                    <th style=" 10%">子网掩码</th>
                                    <th style=" 10%">广播地址</th>
                                </tr>
                            </thead>
                            <tbody id="tb_net">
                                {% for v in data['net_info'] %}
                                    <tr>
                                        <td>{{ v['name'] }}</td>
                                        <td class="text-danger">{{ v['bytes_sent'] }}</td>
                                        <td class="text-danger">{{ v['bytes_recv'] }}</td>
                                        <td class="text-danger">{{ v['packets_sent'] }}</td>
                                        <td class="text-danger">{{ v['packets_recv'] }}</td>
                                        <td>{{ v['family'] }}</td>
                                        <td>{{ v['address'] }}</td>
                                        <td>{{ v['netmask'] }}</td>
                                        <td>
                                            {% if v['broadcast'] %}
                                            {{ v['broadcast'] }}
                                            {% else %}
                                            无
                                            {% end %}
                                        </td>
                                    </tr>
                                {% end%}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
     <div class="col-md-12">
        <div class="card text-white bg-dark mb-3">
            <div class="card-header">磁盘使用信息</div>
            <div class="card-body">
                <table class="table table-sm table-bordered">
                    <thead>
                        <tr class="text-primary">
                            <th style=" 10%">设备名称</th>
                            <th style=" 10%">挂载点</th>
                            <th style=" 10%">文件系统类型</th>
                            <th style=" 10%">操作选项</th>
                            <th style=" 10%">总量（GB）</th>
                            <th style=" 10%">使用量（GB）</th>
                            <th style=" 10%">剩余量（GB）</th>
                            <th style=" 30%">使用量（%）</th>
                        </tr>
                    </thead>
                    <tbody id="tb_disk">
                        {% for v in data['disk_info'] %}
                            <tr>
                                <td>{{ v['device'] }}</td>
                                <td>{{ v['mountpoint'] }}</td>
                                <td>{{ v['fstype'] }}</td>
                                <td>{{ v['opts'] }}</td>
                                <td class="text-danger">{{ v['used']['total'] }}GB</td>
                                <td class="text-danger">{{ v['used']['used'] }}GB</td>
                                <td class="text-danger">{{ v['used']['free'] }}GB</td>
                                <td>
                                    <div class="progress">
                                        <div class="progress-bar progress-bar-striped progress-bar-animated{{ handler.progress_status(v['used']['percent']) }}"
                                             role="progressbar" aria-valuenow="{{ v['used']['percent'] }}" aria-valuemin="0"
                                             aria-valuemax="100" style=" {{ v['used']['percent'] }}%">{{ v['used']['percent'] }}%
                                        </div>
                                    </div>
                                </td>
                            </tr>
                        {% end %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>

实时更新处理：

/*网络信息更新*/
    var net = "";
    for (var k in data['net']) {
        var cd = data['net'][k];
        if (parseInt(cd['bytes_sent']) != 0 && parseInt(cd["bytes_recv"]) != 0) {
            var index = parseInt(k) + 1;
            var op = eval("option_net" + index);
            var ch = eval("myChart_net" + index);
            op.title[0].text = data["dt"] + "-" + cd["name"] + "网卡信息";
            op.series[0].data = [
                {"name": "收包数", "value": cd["packets_recv"]},
                {"name": "发包数", "value": cd["packets_sent"]}
            ];
            op.series[1].data = [
                {"name": "收字节", "value": cd["bytes_recv"]},
                {"name": "发字节", "value": cd["bytes_sent"]}
            ];
            ch.setOption(op);
        }
        net += "<tr><td>" + cd['name'] + "</td>";
        net += "<td class='text-danger'>" + cd['bytes_sent'] + "</td>";
        net += "<td class='text-danger'>" + cd['bytes_recv'] + "</td>";
        net += "<td class='text-danger'>" + cd['packets_sent'] + "</td>";
        net += "<td class='text-danger'>" + cd['packets_recv'] + "</td>";
        net += "<td>" + cd['family'] + "</td>";
        net += "<td>" + cd['address'] + "</td>";
        net += "<td>" + cd['netmask'] + "</td>";
        if (cd['broadcast']) {
            net += "<td>" + cd['broadcast'] + "</td></tr>";
        } else {
            net += "<td>无</td></tr>";
        }
    }
    document.getElementById("tb_net").innerHTML = net;

       /*磁盘使用信息实时更新*/
    var disk = "";
    for (var k in data["disk"]) {
        var cd = data["disk"][k];
        disk += "<tr><td>" + cd['device'] + "</td>";
        disk += "<td>" + cd['mountpoint'] + "</td>";
        disk += "<td>" + cd['fstype'] + "</td>";
        disk += "<td>" + cd['opts'] + "</td>";
        disk += "<td class='text-danger'>" + cd['used']['total'] + "GB</td>";
        disk += "<td class='text-danger'>" + cd['used']['used'] + "GB</td>";
        disk += "<td class='text-danger'>" + cd['used']['free'] + "GB</td>";
        disk += "<td><div class='progress'><div class='progress-bar progress-bar-striped progress-bar-animated" + progress_status(cd['used']['percent']) + "' role='progressbar' aria-valuenow='" + cd['used']['percent'] + "' aria-valuemin='0' aria-valuemax='100' style=' " + cd['used']['percent'] + "%'>" + cd['used']['percent'] + "%</div></div></td></tr>";
    }
    document.getElementById("tb_disk").innerHTML = disk;

结果展示：