基于Django框架的系统信息展示系统---页面优化

一、用户信息展示页面

1.自定义过滤器

from django import template
from datetime import  datetime
register = template.Library()

@register.filter(name='timefmt')
def timefmt(value):
    """将时间戳转换成datetime类型的时间"""
    return datetime.fromtimestamp(value)

官方文档：https://docs.djangoproject.com/zh-hans/3.1/howto/custom-template-tags/.

2.视图函数

def user(request):
    users = psutil.users()
    return  render(request, 'host/user.html', locals())

3.html文件编写

{% extends 'host/base.html' %}
{% load timefilter %}
{% block title %} 用户信息 {% endblock %}
{% block content %}
    <div class="page-header">
        <h1>登录用户</h1>
    </div>
    <div>
        <table class="table table-bordered">
            <tr>
                <td>用户名</td>
                <td>登录主机</td>
                <td>终端</td>
                <td>登录时间</td>
            </tr>
            {% for user in users %}
            <tr>
                <td>{{ user.name }}</td>
                <td>{{ user.terminal }}</td>
                <td>{{ user.host }}</td>
                <td>{{ user.started | timefmt }}</td>
            </tr>
            {% endfor %}
        </table>
    </div>

{% endblock %}

4.效果展示

二、CPU信息的图形化展示

1.编辑相关html文件

templates/host/cpu-header.html：
<div class="page-header">
    <a {% if not chart %}id="display"{% endif %} href="/cpu/">CPU 信息</a>
    <a {% if chart == 'line' %}id="display"{% endif %} href="/cpu/line/">CPU
        折线图</a>
    <a {% if chart == 'pie' %}id="display"{% endif %} href="/cpu/pie/">CPU 饼图</a>
</div>

templates/host/cpu-line.html：
{% extends 'host/base.html' %}
{% load timefilter %}
{% block title %} cpu信息 {% endblock %}
{% block content %}
    {% include 'host/cpu-header.html' %}
    <div>
        <div id="main" style="width: 80%;height:400px;"></div>
    </div>

    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        option = {
            xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: [820, 932, 901, 934, 1290, 1330, 1320],
                type: 'line',
                smooth: true
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>

{% endblock %}

templates/host/cpu-pie.html：
{% extends 'host/base.html' %}
{% load timefilter %}
{% block title %} cpu信息 {% endblock %}
{% block content %}
    {% include 'host/cpu-header.html' %}
    <div>
        <div id="main" style="width: 80%;height:400px;"></div>
    </div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        option = {
            tooltip: {
                trigger: 'item'
            },
            legend: {
                top: '5%',
                left: 'center'
            },
            series: [
                {
                    name: 'CPU占用百分比分类',
                    type: 'pie',
                    radius: ['40%', '70%'],
                    avoidLabelOverlap: false,
                    itemStyle: {
                        borderRadius: 10,
                        borderColor: '#fff',
                        borderWidth: 2
                    },
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: '40',
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: [
                        {value: {{ cpu_time_percent.user }}, name: '用户'},
                        {value: {{ cpu_time_percent.system }}, name: '系统'},
                        {value: {{ cpu_time_percent.idle }}, name: '空闲'},

                    ]
                }
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
{% endblock %}

templates/host/cpu.html：
{% extends 'host/base.html' %}
{% load timefilter %}
{% block title %} cpu信息 {% endblock %}
{% block content %}
        {% include 'host/cpu-header.html' %}
        <div>
            <div id="cpu_info">
                <table class="table table-bordered">
                    <tr>
                        <td>物理 CPU 核心数</td>
                        <td>{{ physical_core_num }}</td>
                    </tr>
                    <tr>
                        <td>逻辑 CPU 核心数</td>
                        <td>{{ logical_core_num }}</td>
                    </tr>
                    <tr>
                        <td>最近 1 分钟平均负载</td>
                        <td>{{ load_avg.0 }}</td>
                    </tr>
                    <tr>
                        <td>最近 5 分钟平均负载</td>
                        <td>{{ load_avg.1 }}</td>
                    </tr>
                    <tr>
                        <td>最近 15 分钟平均负载</td>
                        <td>{{ load_avg.2 }}</td>
                    </tr>
                    <tr>
                        <td>用户</td>
                        <td>{{ cpu_time_percent.user }} %</td>
                    </tr>
                    <tr>
                        <td>系统</td>
                        <td>{{ cpu_time_percent.system }} %</td>
                    </tr>
                    <tr>
                        <td>空闲</td>
                        <td>{{ cpu_time_percent.idle }} %</td>
                    </tr>
                    {% if cpu_time_percent.nice %}
                        <tr>
                            <td>nice</td>
                            <td>{{ cpu_time_percent.nice }} %</td>
                        </tr>
                    {% endif %}
                    {% if cpu_time_percent.iowait %}
                        <tr>
                            <td>iowait</td>
                            <td>{{ cpu_time_percent.iowait }} %</td>
                        </tr>
                    {% endif %}
                    {% if else_percent %}
                        <tr>
                            <td>其他</td>
                            <td>{{ else_percent }} %</td>
                        </tr>
                    {% endif %}
                    {% if cpu_freq %}
                        <tr>
                            <td>正在运行频率</td>
                            <td>{{ cpu_freq.current | cpu_val_fmt }} GHz</td>
                        </tr>
                        <tr>
                            <td>最低运行频率</td>
                            <td>{{ cpu_freq.min | cpu_val_fmt }} GHz</td>
                        </tr>
                        <tr>
                            <td>最高运行频率</td>
                            <td>{{ cpu_freq.max | cpu_val_fmt }} GHz</td>
                        </tr>
                    {% endif %}
                </table>
            </div>
        </div>

    {% endblock %}

2.自定义过滤器

host/templatetags/timefilter.py：
@register.filter(name='cpu_val_fmt')
def cpu_val_fmt(value):
    return  round(value/1000, 2)

3.设置路由和视图函数

host/urls.py：
path('', index, name='index'),
    path('user/', user, name='user'),
    path('cpu/', cpu, name='cpu'),
    path('cpu/<str:chart>/', cpu, name='cpu'), %新增
    path('memory/', memory, name='memory'),
    path('disk/', disk, name='disk'),
    path('network/', network, name='network'),

host/views.py：
def cpu(request, chart=None):
    logical_core_num = psutil.cpu_count()  #
    physical_core_num = psutil.cpu_count(logical=False)
    try:
        load_avg = os.getloadavg()
    except Exception as e:
        load_avg = ['', '', '']
    cpu_time_percent = psutil.cpu_times_percent()
    else_percent = 0.0
    for i in range(3, 5):
        else_percent += cpu_time_percent[i]
    try:
        cpu_freq = psutil.cpu_freq()
    except AttributeError:
        cpu_freq = None
    if chart == 'line':
        return render(request, 'host/cpu-line.html', locals())
    elif chart == 'pie':
        return render(request, 'host/cpu-pie.html', locals())
    return render(request, 'host/cpu.html', locals())

4.基于echarts的图形页面展示

图形页面展示时需要从数据库表中读取信息（这些信息需要使用定时任务来获取，下节会写关于定时任务的相关内容，现在我们先来实现页面的展示），因此需要更改数据库模型

修改数据库模型及基模板：

host/models.py：
from django.db import models

# Create your models here.
class UserCpuPercent(models.Model):
    create_time = models.DateTimeField(auto_now_add=True, verbose_name="扫描时间")
    user_percent = models.FloatField(verbose_name="用户CPU占用百分比")
注意：更改数据库模型后要记得生成迁移脚本并执行

templates/host/base.html：
   <link rel="stylesheet" type="text/css" href="/static/css/bootstrap.css">
        <link rel="stylesheet" type="text/css" href="/static/css/my-style.css">
        <script src="/static/js/jquery-3.1.1.min.js"></script>
        <script src="https://lib.baomitu.com/echarts/5.0.2/echarts.min.js"></script>  %新增
    {% endblock head %}
</head>
<body>

这里展示的折线图并不包含主机的真实信息，只是一个图形界面（因为我们没有设置定时任务来获取主机的相关信息)：

饼状图反映的是真实的主机信息：