python3 主机实时监控系统

一、登录界面

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Expires" content="0">
<title>管理员登录</title>
<link rel="icon" type="image/x-icon" href="{{ url_for('static', filename='favicon.ico') }}">
<link href='../static/login.css' rel="stylesheet" type="text/css" />
<script type="text/javascript">
function login_(){
var user = document.getElementById("username");
if (user.value==''){
alert("用户名为空!");
return false;
}
var pass = document.getElementById("password");
if (pass.value==''){
alert("密码为空！");
return false;
}
else{
return true;
}
}
</script>
</head>

<body>
<div class="login_box">
<div class="login_l_img"><img src="../static/login-img.png" /></div>
<div class="login">
<div class="login_logo"><a href="#"><img src="../static/login_logo.png" /></a></div>
<div class="login_name">
<p>管理员登录</p>
</div>
<form method="post">
<input name="username" type="text" id="username" placeholder="用户名" onfocus="this.placeholder=''" onblur="if(this.placeholder==''){this.placeholder='用户名'}">
<input name="password" type="password" id="password" placeholder="密码" onfocus="this.placeholder=''" onblur="if(this.placeholder==''){this.placeholder='密码'}">
<input value="登录" style="width:100%;" type="submit" onclick="login_();">
</form>
</div>
</div>
<div style="text-align:center;">
</div>
</body>
</html>

---界面展示---

二、主页

demo1.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="../static/demo.css">
<link rel="icon" type="image/x-icon" href="{{ url_for('static', filename='favicon.ico') }}">
<script src="../static/jquery-3.4.1.min.js"></script>
<script src="../static/data.js"></script>
<script src="../static/echarts.min.js"></script>
<title>主机资源监控</title>
</head>
<body>
<div class="div1">
资源监控数据大屏
</div>
<div class="div2">
<div class="div2-1">
<div class="div2-1-1">
<h2>CPU</h2>
</div>
<div class="div2-1-2" id="container">
<script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
option = null;
option = {
tooltip : {
formatter: "{a} <br/>{b} : {c}%"
},
toolbox: {
feature: {
restore: {},
saveAsImage: {}
}
},
series: [
{
name: 'CPU',
type: 'gauge',
detail: {formatter:'{value}%'},
data: [{value: 0, name: '使用率'}]
}
]
};

setInterval(function () {
$.ajax({
url:"http://127.0.0.1:5000/use",
cache: false,
success:function(data){
a = data.data;
option.series[0].data[0].value=a;
}
})
myChart.setOption(option, true);
},1000);
;
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
</script>
</div>
<div class="div2-1-3">
<ul>
<li>CPU核心数：<a id="div2-1-3-1"></a></li>
<li>CPU线程数：<a id="div2-1-3-2"></a></li>
</ul>
</div>
</div>
<div class="div2-2">
<div class="div2-2-1">
<h2>网络</h2>
</div>
<div class="div2-2-2" id="container_">
<script type="text/javascript">
var dc = document.getElementById("container_");
var __myChart = echarts.init(dc);
var __app={};
__option= null;
__option= {
xAxis: {
type: 'category',
data: ['字节(发送)', '字节(接收)', '包(发送)','包(接收)' ]
},
yAxis: {
type: 'value'
},
series: [{
data: [{value: 0},{value: 0},{value: 0},{value: 0}],
type: 'bar',
itemStyle:{normal:{label:{
fontWeight:'bolder',
fontSize:'12',
fontFamily:'微软雅黑',
show:true,
position:'top',
textStyle:{color:'#615a5a'}
}}}
}]
};
setInterval(function inter_count(){
$.ajax({
url:"http://127.0.0.1:5000/inter",
cache: false,
success:function(data){
a = data.data;
__option.series[0].data[0].value=a[0];
__option.series[0].data[1].value=a[1];
__option.series[0].data[2].value=a[2];
__option.series[0].data[3].value=a[3];
}
});
__myChart.setOption(__option, true);
},1000);
;
if (__option && typeof __option === "object") {
__myChart.setOption(__option, true);
}
</script>
</div>
<div class="div2-2-3">
<ul>
<li>网络状态：<a id="div2-2-3-1"></a></li>
</ul>
</div>
</div>
<div class="div2-3">
<div class="div2-3-1">
<h2>内存</h2>
</div>
<div class="div2-3-2" id="container__">
<script type="text/javascript">
var dom = document.getElementById("container__");
var myChart_ = echarts.init(dom);
var app_ = {};
option_ = null;
option_ = {
tooltip : {
formatter: "{a} <br/>{b} : {c}%"
},
toolbox: {
feature: {
restore: {},
saveAsImage: {}
}
},
series: [
{
name: '内存',
type: 'gauge',
detail: {formatter:'{value}%'},
data: [{value: 0, name: '使用率'}]
}
]
};
setInterval(function te() {
$.ajax({
url:"http://127.0.0.1:5000/memory",
//解决ie不轮询
cache: false,
success:function(da){
a = da.data;
option_.series[0].data[0].value =a[2];
document.getElementById("div2-3-3-1").innerHTML=a[0];
document.getElementById("div2-3-3-2").innerHTML=a[1];
document.getElementById("div2-3-3-3").innerHTML=a[3];
}
});
myChart_.setOption(option_, true);
},1000);
;
if (option_ && typeof option === "object") {
myChart_.setOption(option_, true);
}
</script>
</div>
<div class="div2-3-3">
<ul>
<li>内存总大小：<a id="div2-3-3-1"></a><a>G</a></li>
<li>内存已使用：<a id="div2-3-3-2"></a><a>G</a></li>
<li>剩余内存大小：<a id ="div2-3-3-3"></a><a>G</a></li>
</ul>
</div>
</div>
<div class="div2-4">
<div class="div2-4-1">
<h2>硬盘</h2>
</div>
<div class="div2-4-2" id="container___">
<script type="text/javascript">
var de = document.getElementById("container___");
var myChart__ = echarts.init(de);
var app__={};
option__= null;
option__ = {
xAxis: {
type: 'category',
data: ['C盘已使用', 'D盘已使用', 'E盘已使用','F盘已使用' ]
},
yAxis: {
type: 'value'
},
series: [{
data: [{value: 0},{value: 0},{value: 0},{value:0}],
type: 'bar',
itemStyle:{normal:{label:{
fontWeight:'bolder',
fontSize:'12',
fontFamily:'微软雅黑',
show:true,
position:'top',
textStyle:{color:'#615a5a'}
}}}
}]
};
setInterval(function des(){
$.ajax({
url:"http://127.0.0.1:5000/desk",
cache: false,
success:function(data){
a = data.data;
document.getElementById("div2-4-3-1").innerHTML=a[0];
document.getElementById("div2-4-3-2").innerHTML=a[1];
document.getElementById("div2-4-3-3").innerHTML=a[2];
option__.series[0].data[0].value=a[3];
option__.series[0].data[1].value=a[4];
option__.series[0].data[2].value=a[5];
option__.series[0].data[3].value=a[6];
}
});
myChart__.setOption(option__, true);
},1000);
;
if (option__ && typeof option__ === "object") {
myChart__.setOption(option__, true);
}
</script>
</div>
<div class="div2-4-3">
<ul>
<li>磁盘总容量：<a id="div2-4-3-1"></a><a>G</a></li>
<li>磁盘已使用：<a id="div2-4-3-2"></a><a>G</a></li>
<li>磁盘剩余：<a id="div2-4-3-3"></a><a>G</a></li>
</ul>
</div>
</div>
</div>
<div class="div3">
<h1></h1>
</div>
</body>
</html>

--界面展示--

js、后台代码就不展示了。主要使用flask框架进行后端开发。

python3 主机实时监控系统

猜你喜欢