基于Djano的sysinfo项目搭建----CPU信息监控并使用Echart绘制cpu饼状图和折线图

源码

cpu信息监控


  path('cpu/<str:chart>/', cpu, name='cpu'),
  • 修改视图函数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())

  • 建立模板文件
    template/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>

template/host/cpu-line.html

template/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 %}

template/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 %}
  • 自定义装饰器cpu_val_fmt
from django import template
from datetime import  datetime
register = template.Library()

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

@register.filter(name='cpu_val_fmt')
def cpu_val_fmt(value):
    return  round(value/1000, 2)

在这里插入图片描述

在这里插入图片描述

添加定时任务

Celery定时任务和异步任务

Celery 是一个简单、灵活且可靠的,处理大量消息的分布式系统。大白话理解处理异步任务和定时任务的工具。

工作原理如下图:
图片转载
在这里插入图片描述安装工具

celery
django-celery-beat
django-celery-results
redis

安装redis 并测试安装成功,见下面帮助文档

import psutil
from celery import shared_task

from host.models import UserCpuPercent

@shared_task()
def scan_cpu_info():
    percent = UserCpuPercent( user_percent=psutil.cpu_times_percent().user)
    percent.save()
  • 新建文件sysinfo/celery.py
from __future__ import absolute_import, unicode_literals
import os
from celery import Celery

# 设置django环境
os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'sysinfo.settings')
app = Celery('sysinfo')
#  使用CELERY_ 作为前缀,在settings中写配置
app.config_from_object('django.conf:settings', namespace='CELERY')
# 发现任务文件每个app下的task.py
app.autodiscover_tasks()
  • 编辑sysinfo/init.py
from __future__ import absolute_import, unicode_literals
from .celery import app as celery_app
__all__ = ['celery_app']
  • 上文设置写入sysinfo/settings
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'django_celery_beat',   ###更改处
    'host',
]


# celery configure
CELERY_BROKER_URL = 'redis://127.0.0.1:6379/0' # Broker配置,使用Redis作为消息中间件
CELERY_RESULT_BACKEND = 'redis://127.0.0.1:6379/1' # BACKEND配置,这里使用redis
CELERY_RESULT_SERIALIZER = 'json' # 结果序列化方案
  • 编辑host/views.py
from host.models import UserCpuPercent   
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':
        datas = UserCpuPercent.objects.order_by('-id')[:30]
        print(datas)
        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())
  • host/models
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占用百分比")

更改model完成后 python manage.py migrate

  • 编辑template/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'));

        {#首先,声明两个 javascript 的数组#}
        var series_data = [];
        var xAxis_data = [];

        {#使用循环,依次将数据库需要展示的数据添加到刚才声明的数组中#}
        {% for data in datas %}
            {#series_data.push({{ data.user_percent }})#}
            {#xAxis_data.push({{ data.create_time }})#}

            series_data.push({{ data.user_percent }})
            {#注意这里的双引号#}
            xAxis_data.push("{{ data.create_time}}")
        {% endfor %}

        option = {
            xAxis: {
                type: 'category',
                data: xAxis_data
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: series_data,
                type: 'line',
                smooth: true
            }]
        };

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

{% endblock %}
在project下新写一个文件  start_celery.sh
celery -A sysinfo beat -l info --scheduler django_celery_beat.schedulers:DatabaseScheduler

#worker.sh
Celery -A sysinfo worker -l info --pool=solo


  • 打开终端,运行上述两条命令,启动worker。在页面中添加定时任务,执行后返回信息可绘制成折线图

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述


版权声明:本文为ninimino原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。