代码结构
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>
效果