Flask系统监控：网页模板
来自CloudWiki
index.html:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>基于psutil的系统监控工具</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container" style="padding-top: 100px">
<div class="row user-list">
<div class="col-sm-12 user" style="">
<div id="alert" class="alert alert-success" role="alert" style="margin: auto;left: 0;right: 0;display: none;position: fixed;width: 50%;text-align: center;">删除成功</div>
</div>
</div>
<div class="row user-list">
<div class="col-sm-12 user">
<div>
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#cpuTab" aria-controls="cpuTab" role="tab" data-toggle="tab">CPU</a></li>
<li role="presentation"><a href="#memoryTab" aria-controls="memoryTab" role="tab" data-toggle="tab">内存</a></li>
<li role="presentation"><a href="#diskTab" aria-controls="diskTab" role="tab" data-toggle="tab">磁盘</a></li>
<li role="presentation"><a href="#netioTab" aria-controls="netioTab" role="tab" data-toggle="tab">网卡</a></li>
<li role="presentation"><a href="#processTab" aria-controls="processTab" role="tab" data-toggle="tab">进程</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="cpuTab">
<div id="cpu" style="width:800px; height:300px;padding-top: 40px;margin-left: auto;margin-right: auto"></div>
</div>
<div role="tabpanel" class="tab-pane" id="memoryTab">
<div class="row user-list">
<div class="col-sm-5 user" style="">
<ul class="list-group" style="padding-left:200px;padding-top:50px">
<li class="list-group-item list-group-item-success">内存大小：<span class="badge" id="mtotal"></span></li>
<li class="list-group-item list-group-item-info">内存已使用大小：<span class="badge" id="mused"></span></li>
<li class="list-group-item list-group-item-warning">内存剩余大小：<span class="badge" id="mfree"></span></li>
<li class="list-group-item list-group-item-success">交换区大小：<span class="badge" id="stotal"></span></li>
<li class="list-group-item list-group-item-info">交换区已使用大小：<span class="badge" id="sused"></span></li>
<li class="list-group-item list-group-item-warning">交换区剩余大小：<span class="badge" id="sfree"></span></li>
</ul>
</div>
<div class="col-sm-7 user" style="">
<div id="memory" style="width:800px; height:300px;padding-top: 40px;margin-left: -100px;margin-right: auto"></div>
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="netioTab">
<div class="row user-list">
<div class="col-sm-12 user" style="">
<div id="netio" style="width:800px; height:300px;padding-top: 40px;margin-left: auto;margin-right: auto"></div>
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="processTab">
<table class="table table-hover" style="height:100px;padding-top: 40px;margin-left: auto;margin-right: auto">
<thead>
<tr>
<th>PID</th>
<th>程序</th>
<th>占用内存</th>
<th>创建时间</th>
<th>强行停止</th>
</tr>
</thead>
<tbody id="tbody">
</tbody>
</table>
</div>
<div role="tabpanel" class="tab-pane container" id="diskTab">
<div class="row user-list">
<div class="col-sm-3 user" style="">
<ul class="list-group" style="padding-top:100px">
<li class="list-group-item list-group-item-success">磁盘容量：<span class="badge" id="total"></span></li>
<li class="list-group-item list-group-item-info">已使用容量：<span class="badge" id="used"></span></li>
<li class="list-group-item list-group-item-warning">空闲容量：<span class="badge" id="free"></span></li>
</ul>
</div>
<div class="col-sm-9 user" style="">
<div id="disk" style="width:800px; height:300px;padding-top: 40px;margin-left: auto;margin-right: auto"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
js
嵌入到上面的页面上：
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://assets.pyecharts.org/assets/echarts.min.js"></script>
<script>
var chart = echarts.init(document.getElementById('cpu'), 'white', {renderer: 'canvas'});
var memory = echarts.init(document.getElementById('memory'), 'white', {renderer: 'canvas'});
var netio = echarts.init(document.getElementById('netio'), 'white', {renderer: 'canvas'});
var disk = echarts.init(document.getElementById('disk'), 'white', {renderer: 'canvas'});
$(
function () {
fetchData(chart);
setInterval(fetchData, 2000);
fetchMemoryData(memory);
setInterval(fetchMemoryData, 2000);
fetchNetioData(netio);
setInterval(fetchNetioData, 2000);
setInterval(fetchProcessData, 2000);
fetchDiskData(disk);
setInterval(fetchDiskData, 2000);
},
$('#myTabs a').click(function (e) {
e.preventDefault()
$(this).tab('show')
})
);
function fetchData() {
$.ajax({
type: "GET",
url: "http://127.0.0.1:5000/cpu",
dataType: 'json',
success: function (result) {
chart.setOption(result);
}
});
}
function fetchMemoryData() {
$.ajax({
type: "GET",
url: "http://127.0.0.1:5000/memory",
dataType: 'json',
success: function (result) {
memory.setOption(JSON.parse(result.liquid));
$('#mtotal').html((result.mtotal/1024/1024/1024).toFixed(2) + 'G')
$('#mused').html((result.mused/1024/1024/1024).toFixed(2) + 'G')
$('#mfree').html((result.mfree/1024/1024/1024).toFixed(2) + 'G')
$('#stotal').html((result.stotal/1024/1024/1024).toFixed(2) + 'G')
$('#sused').html((result.sused/1024/1024/1024).toFixed(2) + 'G')
$('#sfree').html((result.sfree/1024/1024/1024).toFixed(2) + 'G')
}
});
}
function fetchNetioData() {
$.ajax({
type: "GET",
url: "http://127.0.0.1:5000/netio",
dataType: 'json',
success: function (result) {
netio.setOption(result);
}
});
}
function fetchProcessData() {
$.ajax({
type: "GET",
url: "http://127.0.0.1:5000/process",
dataType: 'json',
success: function (result) {
html = ''
list = result.list
for (var l in list) {
html = html +'<tr><td>' + list[l].PID + '</td><td>' + list[l].name + '</td><td>' + list[l].mem + '</td><td>' + list[l].ctime + '</td><td><button type="button" class="btn btn-default btn-xs" onclick="delProcess('+list[l].PID+')"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button></td></tr>'
}
$('#tbody').html(html)
}
})
}
function delProcess(pid) {
$.ajax({
type: "GET",
url: "http://127.0.0.1:5000/delprocess?pid="+pid,
dataType: 'json',
success: function (result) {
$("#alert").fadeIn(1000);
$("#alert").fadeOut(3000);
}
})
}
function fetchDiskData() {
$.ajax({
type: "GET",
url: "http://127.0.0.1:5000/disk",
dataType: 'json',
success: function (result) {
disk.setOption(JSON.parse(result.line));
$('#total').html((result.total/1000000000).toFixed(2) + 'G')
$('#used').html((result.used/1000000000).toFixed(2) + 'G')
$('#free').html((result.free/1000000000).toFixed(2) + 'G')
}
});
}
</script>
