flask+sqlite3+echarts3 系统监控

简介: 总的而言,分三部分:1.监控器(monitor.py): 每秒获取系统的四个cpu的使用率,存入数据库。2.路由器(app.py): 响应页面的ajax,获取最新的一条或多条数据。3.页面(index.html): 发出ajax请求,更新echarts图表一、监控器使用了psutil库,对系统进行监控。

总的而言,分三部分:
1.监控器(monitor.py): 每秒获取系统的四个cpu的使用率,存入数据库。
2.路由器(app.py): 响应页面的ajax,获取最新的一条或多条数据。
3.页面index.html): 发出ajax请求,更新echarts图表

一、监控器

使用了psutil库,对系统进行监控。

import psutil
import sqlite3
import time

'''
说明:四个cpu使用率,显然是临时数据,所以最好用内存数据库,如Redis等
但是这里强行使用sqlite3,不管了,哪个叫他是内置的呢?!
'''

db_name = 'mydb.db'


def create_db():
    # 连接
    conn = sqlite3.connect(db_name)
    c = conn.cursor()

    # 创建表 
    c.execute('''DROP TABLE IF EXISTS cpu''') # 删除旧表,如果存在(因为这是临时数据)
    c.execute('''CREATE TABLE cpu (id INTEGER PRIMARY KEY AUTOINCREMENT, insert_time text,cpu1 float, cpu2 float, cpu3 float, cpu4 float)''')

    # 关闭
    conn.close()


def save_to_db(data):
    '''参数data格式:['00:01',3.5, 5.9, 0.7, 29.6]'''
    # 建立连接
    conn = sqlite3.connect(db_name)
    c = conn.cursor()
    
    # 插入数据
    c.execute('INSERT INTO cpu(insert_time,cpu1,cpu2,cpu3,cpu4) VALUES (?,?,?,?,?)', data)
    
    # 提交!!!
    conn.commit()
    
    # 关闭连接
    conn.close()

    

# 创建表
create_db()

# 通过循环,对系统进行监控
while True:
    # 获取系统cpu使用率(每隔1秒)
    cpus = psutil.cpu_percent(interval=1, percpu=True)
    
    # 获取系统时间(只取分:秒)
    t = time.strftime('%M:%S', time.localtime())
    
    # 保存到数据库
    save_to_db((t, *cpus))

二、路由器

import sqlite3
from flask import Flask, request, render_template, jsonify

app = Flask(__name__)


def get_db():
    db = sqlite3.connect('mydb.db')
    db.row_factory = sqlite3.Row
    return db


def query_db(query, args=(), one=False):
    db = get_db()
    cur = db.execute(query, args)
    db.commit()
    rv = cur.fetchall()
    db.close()
    return (rv[0] if rv else None) if one else rv


@app.route("/", methods=["GET"])
def index():
    return render_template("index.html")


@app.route("/cpu", methods=["POST"])
def cpu():
    if request.method == "POST":
        res = query_db("SELECT * FROM cpu WHERE id>=(?)", args=(int(request.form['id'])+1,)) #返回1+个数据
    
    return jsonify(insert_time = [x[1] for x in res],
                   cpu1 = [x[2] for x in res],
                   cpu2 = [x[3] for x in res], 
                   cpu3 = [x[4] for x in res],
                   cpu4 = [x[5] for x in res]) # 返回json格式


if __name__ == "__main__":
    app.run(debug=True)

三、页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>ECharts3 Ajax</title>
    <script src="{{ url_for('static', filename='jquery-3.1.1.js') }}"></script>
    <script src="{{ url_for('static', filename='echarts.js') }}"></script>
</head>

<body>
    <!--为ECharts准备一个具备大小(宽高)的Dom-->
    <div id="main" style="height:500px;border:1px solid #ccc;padding:10px;"></div>
    
    <script type="text/javascript">
    //--- 折柱 ---
    var myChart = echarts.init(document.getElementById('main'));
    
    myChart.setOption({
        title: {
            text: '服务器系统监控'
        },
        tooltip: {},
        legend: {
            data:['cpu1','cpu2','cpu3','cpu4']
        },
        xAxis: {
            data: []
        },
        yAxis: {},
        series: [{
            name: 'cpu1',
            type: 'line',
            data: []
        },{
            name: 'cpu2',
            type: 'line',
            data: []
        },{
            name: 'cpu3',
            type: 'line',
            data: []
        },{
            name: 'cpu4',
            type: 'line',
            data: []
        }]
    });
    
    
    // 六个全局变量:插入时间、cpu1、cpu2、cpu3、cpu4、 哨兵(用于POST)
    var insert_time = ["","","","","","","","","",""],
        cpu1 = [0,0,0,0,0,0,0,0,0,0],
        cpu2 = [0,0,0,0,0,0,0,0,0,0],
        cpu3 = [0,0,0,0,0,0,0,0,0,0],
        cpu4 = [0,0,0,0,0,0,0,0,0,0],
        
        lastID = 0; // 哨兵,记录上次数据表中的最后id +1(下次查询只要>=lastID)

    
    //准备好统一的 callback 函数
    var update_mychart = function (data) { //data是json格式的response对象
        
        myChart.hideLoading(); // 隐藏加载动画
        
        dataLength = data.insert_time.length; //取回的数据长度
        lastID += dataLength; //哨兵,相应增加。
        
        // 切片是能统一的关键!!
        insert_time = insert_time.slice(dataLength).concat(data.insert_time); // 数组,先切片、再拼接
        cpu1 = cpu1.slice(dataLength).concat(data.cpu1.map(parseFloat)); //注意map方法
        cpu2 = cpu2.slice(dataLength).concat(data.cpu2.map(parseFloat));
        cpu3 = cpu3.slice(dataLength).concat(data.cpu3.map(parseFloat));
        cpu4 = cpu4.slice(dataLength).concat(data.cpu4.map(parseFloat));
        
        // 填入数据
        myChart.setOption({
            xAxis: {
                data: insert_time
            },
            series: [{
                name: 'cpu1', // 根据名字对应到相应的系列
                data: cpu1
            },{
                name: 'cpu2',
                data: cpu2
            },{
                name: 'cpu3',
                data: cpu3
            },{
                name: 'cpu4',
                data: cpu4
            }]
        });
        
        if (dataLength == 0){clearInterval(timeTicket);} //如果取回的数据长度为0,停止ajax
    }
    
    myChart.showLoading(); // 首次显示加载动画
    
    
    // 异步加载数据 (首次,get,显示6个数据)
    $.get('/cpu').done(update_mychart);
    
    
    // 异步更新数据 (以后,定时post,取回1个数据)
    var timeTicket = setInterval(function () {
        $.post('/cpu',{id: lastID}).done(update_mychart);
    }, 3000);
    
    </script>
</body>
</html>

效果图

img_6771324d53e44ae052d413610c9c3ca4.png

目录
相关文章
|
监控 JavaScript 前端开发
flask+socketio+echarts3 服务器监控程序(基于后端数据推送)
本文地址:http://www.cnblogs.com/hhh5460/p/7397006.html 说明 以前的那个例子的思路是后端监控数据存入数据库;前端ajax定时查询数据库。 这几天在看websocket。
2221 0
|
JSON 数据格式 Python
flask+sqlite3+echarts3+ajax 异步更新数据
结构: /www | |-- /static |....|-- jquery-3.1.1.js |....|-- echarts.js(echarts3是单文件!!) | |-- /templates |.
1419 0
|
Web App开发 JavaScript 前端开发
flask+sqlite3+echarts3+ajax 异步数据加载
结构: /www | |-- /static |....|-- jquery-3.1.1.js |....|-- echarts.js(echarts3是单文件!!) | |-- /templates |.
1281 0
|
3天前
|
数据库 开发者 Python
使用Python和Flask构建Web应用
【10月更文挑战第2天】使用Python和Flask构建Web应用
10 1
|
6天前
|
API 数据库 开发者
Flask:Python的轻量级Web框架
Flask:Python的轻量级Web框架
14 2
|
17天前
|
数据采集 NoSQL 调度
flask celery python 每月定时任务
flask celery python 每月定时任务
|
2月前
|
前端开发 计算机视觉 Python
flask+python 实时视频流输出到前台
该文章介绍了如何使用Flask和Python实现实时视频流输出到网页前端,包括后端通过OpenCV捕获摄像头视频流、处理并编码为JPEG格式,然后以HTTP响应的形式发送给前端显示的完整示例代码和运行效果。
flask+python 实时视频流输出到前台