2.前端JS

    new Vue({
        el: '#app',
        data: {
            searchHost:'',
            HostData:[]
        },
        mounted() {
            // 页面加载就获取所有模板
            this.init();
        },
        methods: {
            init() {
                axios.get(site_url + "get_monitored_host/").then(res => {
                    if (res.data.result){
                        this.HostData = res.data.data;
                    }else{
                        this.$message.error('获取业务失败');
                    }
                },'json');
            },
            changeHost(){
                axios.post(site_url + "get_host_load_data/", {"pk": this.searchHost}).then(res => {
                    if (res.data.result) {
                        this.chartBar = echarts.init(document.getElementById('load'));
                        this.chartBar.setOption({
                            title: {
                                text: '主机MEM,DOSK,CPU使用率曲线图'
                            },
                            tooltip: {
                                trigger: 'axis'
                            },
                            legend: {
                                data:res.data.data.data1
                            },
                            grid: {
                                left: '3%',
                                right: '4%',
                                bottom: '3%',
                                containLabel: true
                            },
                            toolbox: {
                                feature: {
                                    saveAsImage: {}
                                }
                            },
                            xAxis: {
                                type: 'category',
                                boundaryGap: false,
                                data: res.data.data.data2
                            },
                            yAxis: {
                                type: 'value'
                            },
                            series: res.data.data.data3
                        })
                    } else {
                        this.$message.error('更新主机MEM,DOSK,CPU使用率失败');
                    }
                }, 'json');
            }
        }
    })

3.Django代码

urls.py文件内容

from django.conf.urls import patterns

from home_application.host import views as host_view

urlpatterns = patterns(
    'home_application.views',
    (r'^status/$', host_view.status),
    (r'^get_monitored_host/$', host_view.get_monitored_host),
    (r'^get_host_load_data/$', host_view.get_host_load_data),
    ...
)

host\views.py文件内容

import json
import random

from home_application.models import Host, LoadData
from home_application.utils.parse_time import get_range_date_list

def status(request):
    return render_mako_context(request, "/home_application/status.html")

def get_monitored_host(request):
    host_query = Host.objects.filter(is_monitored=True)
    res_data = [i.to_dict() for i in host_query]
    return JsonResponse({"result": True, "data": res_data})

def get_host_load_data(request):
    # data = json.loads(request.body)
    # pk = data.get("pk")
    # load_query =  LoadData.objects.filter(host_id=pk).order_by("create_time")
    # res_data = [i.to_dict() for i in load_query]
    res_data = {
        "data1": ['cpu', 'disk', 'mem'],
        "data2": get_range_date_list(100),
        "data3": [
            {
                "name": 'cpu',
                "type": 'line',
                "stack": '使用率',
                "data": [random.randint(1, 100) for i in range(100)]
            },
            {
                "name": 'disk',
                "type": 'line',
                "stack": '使用率',
                "data": [random.randint(1, 100) for i in range(100)]
            },
            {
                "name": 'mem',
                "type": 'line',
                "stack": '使用率',
                "data": [random.randint(1, 100) for i in range(100)]
            }
        ]
    }
    return JsonResponse({"result": True, "data": res_data})

models.py文件内容

from django.db import models

from home_application.utils.parse_time import parse_datetime_to_timestr

class LoadData(models.Model):
    host_id = models.IntegerField(u"主机ID", default=0)
    cpu = models.IntegerField(u"CPU使用率", default=0)
    mem = models.IntegerField(u"内存使用率", default=0)
    disk = models.IntegerField(u"硬盘使用率", default=0)
    create_time = models.DateTimeField(u"创建时间", auto_now_add=True)

    def to_dict(self):
        return {
            "host_id": self.host_id,
            "cpu": self.cpu,
            "mem": self.mem,
            "disk": self.disk,
            "create_time": parse_datetime_to_timestr(self.create_time)
        }

实现效果

看完上述内容，你们掌握python中怎么利用Element 显示主机系统资源使用率的方法了吗？如果还想学到更多技能或想了解更多相关内容，欢迎关注创新互联行业资讯频道，感谢各位的阅读！