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>