flask+sqlite3+echarts3 系统监控

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

总的而言，分三部分：

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, jsonifyapp = Flask(__name__)def get_db(): db = sqlite3.connect('mydb.db') db.row_factory = sqlite3.Row return dbdef 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>  <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>