Skip to content

Commit d202382

Browse files
ypwhsypwhs
committed
flask
1 parent 507a8c6 commit d202382

File tree

7 files changed

+382
-3
lines changed

7 files changed

+382
-3
lines changed

‎flask/Flask.py‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
# coding=utf-8
2+
import sqlite3
3+
from flask import Flask, request, session, g, redirect, url_for, abort, render_template, flash
4+
import datetime
5+
import os
6+
import time
7+
8+
app = Flask(__name__)
9+
app.config['DATABASE'] = 'pm.db'
10+
11+
def get_db():
12+
if not hasattr(g, '_database'):
13+
db = sqlite3.connect(app.config['DATABASE'])
14+
15+
def make_dicts(cursor, row):
16+
return dict((cursor.description[idx][0], value)
17+
for idx, value in enumerate(row))
18+
19+
db.row_factory = make_dicts
20+
g._database = db
21+
return g._database
22+
23+
24+
@app.teardown_appcontext
25+
def close_db(error):
26+
if hasattr(g, '_database'):
27+
g._database.close()
28+
29+
30+
def query_db(query, args=(), one=False):
31+
cur = get_db().execute(query, args)
32+
rv = cur.fetchall()
33+
cur.close()
34+
return (rv[0] if rv else None) if one else rv
35+
return rv
36+
37+
38+
@app.route('/')
39+
def index():
40+
return redirect(url_for('index_hour', hour=8))
41+
42+
43+
@app.route('/<int:hour>')
44+
def index_int(hour):
45+
return redirect(url_for('index_hour', hour=hour))
46+
47+
48+
@app.route('/<float:hour>')
49+
def index_float(hour):
50+
return redirect(url_for('index_hour', hour=hour))
51+
52+
53+
@app.route('/<float:hour>hour')
54+
def index_hour(hour):
55+
before = int(time.time()*1000) - hour*3600*1000
56+
data = query_db('select * from pm where timestamp>%d' % before)
57+
times = map(lambda x:x['timestamp'], data)
58+
pm1_0 = map(lambda x:x['pm1_0'], data)
59+
pm2_5 = map(lambda x:x['pm2_5'], data)
60+
pm10 = map(lambda x:x['pm10'], data)
61+
co2 = map(lambda x:x['co2'], data)
62+
times = map(lambda x:datetime.datetime.fromtimestamp(x/1000).strftime('%Y-%m-%d %H:%M:%S'), times)
63+
print times
64+
return render_template('chart.html', date=times, pm1_0=pm1_0, pm2_5=pm2_5, pm10=pm10, co2=co2)
65+
66+
@app.errorhandler(404)
67+
def page_not_found(error):
68+
return render_template('404.html'), 404
69+
70+
if __name__ == '__main__':
71+
app.run(debug=True)

‎flask/templates/404.html‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Page not found.</title>
6+
</head>
7+
<body>
8+
<h1>Page not found.</h1>
9+
</body>
10+
</html>

‎flask/templates/chart.html‎

Lines changed: 267 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,267 @@
1+
2+
{% extends "header.html" %}
3+
{% block body %}
4+
5+
<div id="pm1_0" style="width: 600px;height:400px;"></div>
6+
<div id="pm2_5" style="width: 600px;height:400px;"></div>
7+
<div id="pm10" style="width: 600px;height:400px;"></div>
8+
<div id="co2" style="width: 600px;height:400px;"></div>
9+
10+
<script type="text/javascript">
11+
var date = {{ date|safe }};
12+
var option = {
13+
tooltip: {
14+
trigger: 'axis',
15+
position: function (pt) {
16+
return [pt[0], '10%'];
17+
}
18+
},
19+
title: {
20+
left: 'left',
21+
},
22+
xAxis: {
23+
type: 'category',
24+
boundaryGap: false,
25+
data: date
26+
},
27+
yAxis: {
28+
type: 'value',
29+
boundaryGap: [0, '100%']
30+
},
31+
toolbox: {
32+
left: 'center',
33+
feature: {
34+
dataZoom: {
35+
yAxisIndex: 'none'
36+
},
37+
restore: {},
38+
saveAsImage: {}
39+
}
40+
},
41+
dataZoom: [{
42+
type: 'inside',
43+
start: 0,
44+
end: 100
45+
}, {
46+
start: 0,
47+
end: 100,
48+
handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
49+
handleSize: '80%',
50+
handleStyle: {
51+
color: '#fff',
52+
shadowBlur: 3,
53+
shadowColor: 'rgba(0, 0, 0, 0.6)',
54+
shadowOffsetX: 2,
55+
shadowOffsetY: 2
56+
}
57+
}],
58+
series: [{
59+
name:'PM2.5',
60+
type:'line',
61+
smooth:true,
62+
symbol: 'none',
63+
sampling: 'average',
64+
itemStyle: {
65+
normal: {
66+
color: 'rgb(255, 70, 131)'
67+
}
68+
},
69+
}]
70+
};
71+
72+
var pm1_0_option = option;
73+
pm1_0_option.visualMap = {
74+
top: 0,
75+
right: 0,
76+
pieces: [{
77+
gt: 0,
78+
lte: 35,
79+
color: '#00E400'
80+
}, {
81+
gt: 35,
82+
lte: 75,
83+
color: '#FFFF00'
84+
}, {
85+
gt: 75,
86+
lte: 115,
87+
color: '#FF7E00'
88+
}, {
89+
gt: 115,
90+
lte: 150,
91+
color: '#FF0000'
92+
}, {
93+
gt: 150,
94+
lte: 250,
95+
color: '#99004C'
96+
}, {
97+
gt: 250,
98+
color: '#7E0023'
99+
}],
100+
outOfRange: {
101+
color: '#999'
102+
}
103+
};
104+
pm1_0_option.series[0].markLine = {
105+
silent: true,
106+
data: [{
107+
yAxis: 35
108+
}, {
109+
yAxis: 75
110+
}, {
111+
yAxis: 115
112+
}, {
113+
yAxis: 150
114+
}, {
115+
yAxis: 250
116+
}]
117+
};
118+
pm1_0_option.title.text = "PM1.0";
119+
pm1_0_option.series[0].data = {{ pm1_0|safe }};
120+
echarts.init(document.getElementById('pm1_0')).setOption(pm1_0_option);
121+
122+
var pm2_5_option = option;
123+
pm2_5_option.visualMap = {
124+
top: 0,
125+
right: 0,
126+
pieces: [{
127+
gt: 0,
128+
lte: 35,
129+
color: '#00E400'
130+
}, {
131+
gt: 35,
132+
lte: 75,
133+
color: '#FFFF00'
134+
}, {
135+
gt: 75,
136+
lte: 115,
137+
color: '#FF7E00'
138+
}, {
139+
gt: 115,
140+
lte: 150,
141+
color: '#FF0000'
142+
}, {
143+
gt: 150,
144+
lte: 250,
145+
color: '#99004C'
146+
}, {
147+
gt: 250,
148+
color: '#7E0023'
149+
}],
150+
outOfRange: {
151+
color: '#999'
152+
}
153+
};
154+
pm2_5_option.series[0].markLine = {
155+
silent: true,
156+
data: [{
157+
yAxis: 35
158+
}, {
159+
yAxis: 75
160+
}, {
161+
yAxis: 115
162+
}, {
163+
yAxis: 150
164+
}, {
165+
yAxis: 250
166+
}]
167+
};
168+
pm2_5_option.title.text = "PM2.5";
169+
pm2_5_option.series[0].data = {{ pm2_5|safe }};
170+
echarts.init(document.getElementById('pm2_5')).setOption(pm2_5_option);
171+
172+
var pm10_option = option;
173+
pm10_option.visualMap = {
174+
top: 0,
175+
right: 0,
176+
pieces: [{
177+
gt: 0,
178+
lte: 50,
179+
color: '#00E400'
180+
}, {
181+
gt: 50,
182+
lte: 150,
183+
color: '#FFFF00'
184+
}, {
185+
gt: 150,
186+
lte: 250,
187+
color: '#FF7E00'
188+
}, {
189+
gt: 250,
190+
lte: 350,
191+
color: '#FF0000'
192+
}, {
193+
gt: 350,
194+
lte: 420,
195+
color: '#99004C'
196+
}, {
197+
gt: 420,
198+
color: '#7E0023'
199+
}],
200+
outOfRange: {
201+
color: '#999'
202+
}
203+
};
204+
pm10_option.series[0].markLine = {
205+
silent: true,
206+
data: [{
207+
yAxis: 50
208+
}, {
209+
yAxis: 150
210+
}, {
211+
yAxis: 250
212+
}, {
213+
yAxis: 350
214+
}, {
215+
yAxis: 420
216+
}]
217+
};
218+
pm10_option.title.text = "PM10";
219+
pm10_option.series[0].data = {{ pm10|safe }};
220+
echarts.init(document.getElementById('pm10')).setOption(pm10_option);
221+
222+
var co2_option = option;
223+
co2_option.visualMap = {
224+
top: 0,
225+
right: 0,
226+
pieces: [{
227+
gt: 0,
228+
lte: 450,
229+
color: '#00E400'
230+
}, {
231+
gt: 450,
232+
lte: 1000,
233+
color: '#80FF80'
234+
}, {
235+
gt: 1000,
236+
lte: 2000,
237+
color: '#FFFF00'
238+
}, {
239+
gt: 2000,
240+
lte: 5000,
241+
color: '#FF7E00'
242+
}, {
243+
gt: 5000,
244+
color: '#FF0000'
245+
}],
246+
outOfRange: {
247+
color: '#999'
248+
}
249+
};
250+
co2_option.series[0].markLine = {
251+
silent: true,
252+
data: [{
253+
yAxis: 450
254+
}, {
255+
yAxis: 1000
256+
}, {
257+
yAxis: 2000
258+
}, {
259+
yAxis: 5000
260+
}]
261+
};
262+
co2_option.title.text = "CO2";
263+
co2_option.series[0].data = {{ co2|safe }};
264+
echarts.init(document.getElementById('co2')).setOption(co2_option);
265+
266+
</script>
267+
{% endblock %}

‎flask/templates/header.html‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<!DOCTYPE html>
2+
<html lang="zh-cn">
3+
<head>
4+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5+
6+
<link href="//cdn.bootcss.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" rel="stylesheet">
7+
<script src="//cdn.bootcss.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>
8+
<meta name="viewport" content="width=device-width, initial-scale=1">
9+
<script src="//cdn.bootcss.com/echarts/3.3.2/echarts.min.js"></script>
10+
<script src="/javascript/options.js"></script>
11+
<title>北京工商大学 空气质量监测系统</title>
12+
</head>
13+
14+
<body>
15+
<div class="container-fluid">
16+
<h3 class="text-muted">北京工商大学 空气质量监测系统</h3>
17+
{% block body %}{% endblock %}
18+
</div>
19+
</body>
20+
</html>

0 commit comments

Comments
 (0)