flask+highcharts+mysql生成资源监控曲线图

代码结构app.py#!/usr/bin/python# _*_ coding=utf-8 _*_from flask import Flask,requestfrom flask import render_templateimport pymysql,jsonfrom flask_bootstrap import Bootstrapapp = Flask(__name__)bootstrap

xianjie0318

417人浏览 · 2020-09-15 17:54:00

xianjie0318 · 2020-09-15 17:54:00 发布

代码结构

app.py

#!/usr/bin/python
# _*_ coding=utf-8 _*_
from flask import Flask,request
from flask import render_template
import pymysql,json
from flask_bootstrap import Bootstrap

app = Flask(__name__)
bootstrap = Bootstrap(app)
# ip='10.12.104.126'
def getdata(ip):
    conn = pymysql.connect(host='**.**.**.**', user='***', password='***', db='Syslog', charset='utf8')
    cur = conn.cursor()
    sql = "SELECT report_time,cpu,mem FROM item_system where ip='"+ip+"' order by report_time desc limit 1000 "
    cur.execute(sql)
    u = cur.fetchall()
    if len(u)==0:
        sql = "SELECT report_time,cpu,mem FROM item_agent where ip='" + ip + "' order by report_time desc limit 1000 "
        cur.execute(sql)
        u = cur.fetchall()

    if len(u) == 0:
        print "返回数据为空"

    cpulist=[]
    memorylist=[]
    timelist=[]
    for i in reversed(u):
        timelist.append(str(i[0]))
        cpulist.append(i[1])
        memorylist.append(i[2])
    data = {'cpulist': cpulist, 'memorylist': memorylist, 'timelist': timelist}
    conn.close()
    return data,u

@app.route('/ip',methods=['GET','POST'], strict_slashes=False)
def index():
    ip = request.form['control_ip2']
    return render_template('monitor.html',u=getdata(ip)[0])

@app.route('/postip',methods=['POST'], strict_slashes=False)
def getnew1():
    ip = request.form['control_ip1']
    return render_template('index.html',u=getdata(ip)[1])

@app.route('/',methods=['get'])
def getnew():
    return render_template('postip.html')

if __name__ == '__main__':
    app.run(host='10.12.104.23',port=5000,debug=True)

base.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
{% extends "bootstrap/base.html"  %}
{% block title %}Flask{% endblock %}
{% block navbar %}
<div class="navbar navbar-inverse" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="/">PMSystem</a>
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li><a href="/">首页</a></li>
            </ul>
        </div>
    </div>
</div>
{% endblock %}

{% block content %}
<div class="container">
  {% block page_content %}{% endblock %}
</div>
{% endblock %}
</body>
</html>

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form action="/ip" enctype='multipart/form-data' method='POST'>
        <input type="submit" value="生成曲线图" class="button-new" style="margin-top:20px;"/>
    </form>
{% extends "base.html" %}

{% block title %}首页{% endblock %}

{% block page_content %}
    <table class="table table-bordered">
    <tr>
        <th>生成时间</th>
        <th>CPU</th>
        <th>MEMORY</th>
    </tr>
        {% for i in u %}
            <tr>
                <td>{{ i[0] }}</td>
                <td>{{ i[1] }}</td>
                <td>{{ i[2] }}</td>
            </tr>
    {% endfor %}
    </table>

{% endblock %}

</body>
</html>

monitor.html

<html>
<head>
<meta charset="UTF-8" />
<title>资源使用趋势图</title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<div id="container" style="width: 1550px; height: 600px; margin: 0 auto"></div>
<script language="JavaScript">

$(document).ready(function() {
     var data = {{ u|tojson }};
     timelist=data['timelist'];
     cpulist=data['cpulist'];
     memorylist=data['memorylist'];
     var title = {
        text: '资源使用趋势图'
      };

     var subtitle = {
         text: 'cpu memory'
     };

     var xAxis = {
         categories: timelist
     };
     var yAxis = {
              title: {
                 text: '数值'
              },
     plotLines: [{
                 value: 0,
                 width: 1,
                 color: '#808080'
              }]
           };

     var tooltip = {
              valueSuffix: '\xB0C'
           }

     var legend = {
              layout: 'vertical',
              align: 'right',
              verticalAlign: 'middle',
              borderWidth: 0
           };

     var series =  [
              {
                 name: 'cpu',
                 data: cpulist
              },
              {
                 name: 'memory',
                 data: memorylist
              }
           ];

     var json = {};

     json.title = title;
     json.subtitle = subtitle;
     json.xAxis = xAxis;
     json.yAxis = yAxis;
     json.tooltip = tooltip;
     json.legend = legend;
     json.series = series;

     $('#container').highcharts(json);

});
</script>
</body>
</html>

postip.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>资源使用情况</title>
</head>
<body>
    <h1>资源使用情况查询</h1>
    	<tbody>
		<tr>
			<form action="/postip" enctype='multipart/form-data' method='POST'>
                <input name="control_ip1"  type="text"  style="width:200px;height:25px" value={{control_ip1}} >
			    <input type="submit" value="查看数据明细" class="button-new1" style="margin-top:20px;"/>
            </form>
            <form action="/ip" enctype='multipart/form-data' method='POST'>
                 <input name="control_ip2"  type="text" style="width:200px;height:25px" value={{control_ip2}}>
                <input type="submit" value="查看趋势图" class="button-new2" style="margin-top:20px;"/>
            </form>
		</tr>
	</tbody>

</body>
</html>

效果