简单cpu web flask mysql

转：http://blog.csdn.net/u010663768/article/details/60632133

python 2.7

cpu入库

#!/usr/bin/python
# -*- coding:UTF-8 -*-
import MySQLdb
import time
import psutil

db_name='testdb'
def create_db():

    db = MySQLdb.connect("localhost","root","123456","testdb")
    cursor=db.cursor()
    cursor.execute('''DROP TABLE IF EXISTS cpu''')
    cursor.execute('''CREATE TABLE cpu(id INT NOT NULL AUTO_INCREMENT,PRIMARY KEY (`id`),insert_time text,cpu1 float,cpu2 float,cpu3 float,cpu4 float)''')
    db.close()

def save_to_db(data):
    db = MySQLdb.connect("localhost","root","123456","testdb")
    cursor=db.cursor()
    cursor.execute('INSERT INTO cpu(insert_time,cpu1,cpu2,cpu3,cpu4) VALUES (%s,%s,%s,%s,%s)',data)
    db.commit()
    db.close()

create_db()

while True:
    cpus = psutil.cpu_percent(interval=1,percpu=True)
    print(cpus[0])
    t = time.strftime('%M:%S',time.localtime())
    save_to_db((t,cpus[0],cpus[1],cpus[2],cpus[3]))
    print('save a data')

　　flask路由

#!/usr/bin/python
# -*- coding:UTF-8 -*-
import MySQLdb
import time
import psutil

db_name='testdb'
def create_db():

    db = MySQLdb.connect("localhost","root","jereh123","testdb")
    cursor=db.cursor()
    cursor.execute('''DROP TABLE IF EXISTS cpu''')
    cursor.execute('''CREATE TABLE cpu(id INT NOT NULL AUTO_INCREMENT,PRIMARY KEY (`id`),insert_time text,cpu1 float,cpu2 float,cpu3 float,cpu4 float)''')
    db.close()

def save_to_db(data):
    db = MySQLdb.connect("localhost","root","jereh123","testdb")
    cursor=db.cursor()
    cursor.execute('INSERT INTO cpu(insert_time,cpu1,cpu2,cpu3,cpu4) VALUES (%s,%s,%s,%s,%s)',data)
    db.commit()
    db.close()

create_db()

while True:
    cpus = psutil.cpu_percent(interval=1,percpu=True)
    print(cpus[0])
    t = time.strftime('%M:%S',time.localtime())
    save_to_db((t,cpus[0],cpus[1],cpus[2],cpus[3]))
    print('save a data')

前端页面

<!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: 'CPU系统监控'
            },
            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: []
            }]
        })

        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;

        var update_mychart = function (data) {
            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));
            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);}
                    }
                    myChart.showLoading();
                    $.get('/cpu').done(update_mychart);
                    var timeTicket = setInterval(function () {
                            $.post('/cpu',{id: lastID}).done(update_mychart);
                                }, 3000);

</script>
</body>
</html>

　　文档目录

echart/
├── mydb.py
├── static
│   ├── echarts.js
│   ├── jquery-3.1.1.js
│   ├── jquery-3.1.1.min.js
│   └── templates
├── templates
│   └── index.html
└── web.py

文件
ECharts下载地址: http://echarts.baidu.com/

jQuery 3.1.1 官方下载地址:
https://code.jquery.com/jquery-3.1.1.js
https://code.jquery.com/jquery-3.1.1.min.js

posted @ 2018-01-09 11:02 一只宅男的自我修养阅读(450) 评论(0) 编辑收藏举报

刷新页面返回顶部

一只宅男的自我修养

简单cpu web flask mysql

公告