- 系统环境:centos7.4
-
主机IP:192.168.134.149
Flask代码段:
moitor.html页面:
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>运维管理系统</title>
<link rel=”shortcut icon” href=”favicon.ico”>
<link href=”{{url_for(‘static’,filename=’css/plugins/morris/morris-0.4.3.min.css’)}}” rel=”stylesheet”>
</head>
<body>
<script src=”{{ url_for(‘static’,filename=’js/jquery.min.js’) }}”></script>
<script src=”{{url_for(‘static’,filename=’js/plugins/morris/raphael-2.1.0.min.js’)}}”></script>
<script src=”{{url_for(‘static’,filename=’js/plugins/morris/morris.js’)}}”></script>
<script type=”text/javascript”>
$(function () {
function monitor() {
$(‘#myfirstchart’).html(“”);
var SCRIPT_ROOT = {{ request.script_root|tojson|safe }}
$.post(SCRIPT_ROOT + ‘/monitor’,function(data){
Morris.Line({
element: ‘myfirstchart’,
data: data ,
xkey: ‘timenow’,
ykeys: [‘a’,’b’,’c’],
labels: [‘1分钟’, ‘5分钟’,’15分钟’]
});
})
};
setInterval(monitor,3000)
})
</script>
<div id=”myfirstchart” style=”height: 250px;”></div>
</body>
</html>
效果图: