tornado硬件管理系统-cpu的水球图与实时进度图（5）

添加水球，下载插件添加到静态文件中。

在html文件处理echart的问题。导入路径即可

<script src="{{ static_url('echarts-liquidfill/echarts-liquidfill.min.js') }}"></script>

修改index.html

  <div class="card-header">CPU消息</div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6 pad-right">
                        <div class="border border-white">{% raw data['cpu_liquid']%}</div>
                    </div>
                    <div class="col-md-6 pad-left">
                        <table class="table table-sm table-bordered">
                            <thead>
                            <th class="text-center" colspan="2" >所有CPU使用率</th>
                            </thead>
                             <tbody id="tb_cpu_per">
                             {% for k,v in enumerate(data['cpu_info']['percent_per'])%}
                            <tr>
                                <td class="text-primary" style=" 30%">
                                CPU{{k}}}</td>
                                <td>
                                    <div class="progress">
                                        <div class="progress-bar progress-bar-striped progress-bar-animated{{ handler.progress_status(v) }}"
                                             role="progressbar" aria-valuenow="{{v}}" aria-valuemin="0"
                                             aria-valuemax="100" style=" {{ v }}%">{{ v }}%
                                        </div>
                                    </div>
                                    </td>
                            </tr>
                            {%end%}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

文件渲染：

#-*- conding: utf-8 -*-
# import tornado.web
from app.tools.monitor import Moniter
from app.tools.chart import Chart
from app.views.views_common import CommonHandler
#定义一个首页视图
class IndexHandler(CommonHandler):
    def get(self,*args,**kwargs):
        m = Moniter()
        c = Chart()
        cpu_info = m.cpu()
        data = dict(
            cpu_info=cpu_info,
            cpu_liquid=c.liquid_html(chart_id="cpu_avg",title="Cpu-Percent",val=cpu_info['percent_avg']))

        self.render("index.html",data=data
           )

将cpu的相关消息进行发送处理：

#-*- coding: utf-8 -*-
import json
from sockjs.tornado import SockJSConnection
from app.tools.monitor import Moniter
class RealTimeHandler(SockJSConnection):
    #建立连接池
    waiters = set()
    def on_open(self, request):
        try:
            self.waiters.add(self)
        except Exception as e:
            print(e)

    #发送消息
    def on_message(self, message):
        try:
            m = Moniter()
            data = dict()
            if message == "system":
                data = dict(
                    mem = m.men(),
                    swap = m.swap(),
                    cpu = m.cpu(),
                    disk = m.disk(),
                    net = m.net(),
                    dt = m.dt(),
                )
                #弄清楚dumps的区别
            self.broadcast(self.waiters,json.dumps(data))
        except Exception as e:
            print(e)
    #关闭连接
    def on_close(self):
        try:
            self.waiters.remove(self)
        except Exception as e:
            print(e)

动态处理不同等级的cpu占用率的处理

# -*- coding: utf-8 -*-
import tornado.web
from tornado.escape import utf8
from tornado.util import unicode_type
from app.tools.monitor import Moniter
from concurrent.futures import ThreadPoolExecutor


class CommonHandler(tornado.web.RequestHandler):
    executor = ThreadPoolExecutor(1000)
    #进度条状态
    def progress_status(self, val):
        data = ""
        if 0 <= val < 25:
            data = " bg-success"  # 绿色
        if 25 <= val < 50:
            data = ""
        if 50 <= val < 75:
            data = " bg-warning"  # 橙色
        if 75 <= val <= 100:
            data = " bg-danger"  # 红色
        return data

自定数据的实时更新【每个cpu的具体信息】

//定义长连接
var conn = null;
//进度条的变化
function progress_status(val){
    var data = "";
    if (val >=0 && val < 25){
        data="bg-success";
    }else if(val>=25 && val < 50){
        data="";
    }else if(val>=50 && val <75){
        data="bg-warining";
    }else if(val >=75 && val < 100){
        data = "bg-success"

    }

}
//专门定义一个实时处理的函数
function update_ui(e) {
    var data = e.data;
    data = JSON.parse(data);
    //平均cpu
    option_cpu_avg.series[0].data[0] = (data['cpu']['percent_avg']/100).toFixed(4);
    option_cpu_avg.title[0].text = data['dt']+"-Cpu-Percent";
    myChart_cpu_avg.setOption(option_cpu_avg);
    //单独的cpu
    var cpu_per = "";
    for (var k in data['cpu']['percent_per']){
        var num = parseInt(k);
         cpu_per += "<tr><td class='text-primary' style=' 30%'>CPU" + num + "</td>";
        cpu_per += "<td>" +
            "<div class='progress'>" +
            "<div class='progress-bar progress-bar-striped progress-bar-animated" +
            progress_status(data['cpu']['percent_per'][k]) +
            "' role='progressbar' aria-valuenow='" +
            data['cpu']['percent_per'][k] +
            "' aria-valuemin='0' aria-valuemax='100' style=' " +
            data['cpu']['percent_per'][k] + "%'>" +
            data['cpu']['percent_per'][k] + "%" +
            "</div></div></td></tr>";
    }
    document.getElementById("tb_cpu_per").innerHTML=cpu_per;
}

//定义连接的函数
function  connect() {
    //优先将以前的所有的连接关闭掉。
    disconnect();
    //定义协议
    var transports = ["websocket"];
    //创建连接的对象
    conn = new SockJS("http://"+window.location.host+"/real/time",transports);
    //创建连接
    conn.onopen=function () {
        console.log("is success");
    };
    //连接发送消息
    conn.onmessage=function (e) {
        update_ui(e)
    };
    //连接关闭
    conn.onclose=function () {
        console.log("is colse")
    };
    //每个几秒触发一个事件,解决连接是否完成的
    setInterval(function () {
        conn.send("system");

    },1000);
}

//定义断开连接函数
function disconnect() {
    if (conn!=null){
        conn.close();
        conn=null;
    }
}

//刷新页面的时候，处理断开与重连的函数，重连判断
if(conn==null){
    connect()
}else{
    disconnect();
}

结果显示：