环境：网络管理 主机资源监控系统项目搭建 （保姆级教程 建议点赞 收藏）_搭建网络版信息管理系统-CSDN博客
效果图
下面3个文件的项目目录(python3.8.8的虚拟环境)
D:\py_siqintu\myproject5\Scripts\mytest.py
D:\py_siqintu\myproject5\Scripts\templates\main.html
D:\py_siqintu\myproject5\Scripts\static\css\style.css
main.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>System Information</title> <script src="{{ url_for('static', filename='js/Bubble.js') }}"></script><link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}"><script type="text/javascript" src="https://registry.npmmirror.com/jquery/3.7.1/files/dist/jquery.min.js"></script><script type="text/javascript" src="https://registry.npmmirror.com/echarts/5.5.1/files/dist/echarts.min.js"></script>
</head><body><div class="head clearfix"><h1 style="text-align: center;">主机资源监控系统</h1></div><div class="mainbox"><ul class="clearfix nav1"><li style="width: 22%"><div class="box" style="padding-right: 0;"><div class="tit">CPU负载Top5</div> <div id="cpu-monitor" style="width: 340px;height:230px;"></div></div><div class="box"><div class="tit">内存占用Top5</div><div id="memory-monitor" style="width: 340px;height:230px;" ></div></div></li><li style="width: 56%"><div class="box"><div class="boxnav mapc" style="height: 550px; position: relative"><div class="mapnav1" style="display: flex;"><img style="height: 200px; width: 250px; margin-top: 20px;" src="{{ url_for('static', filename='images/pc.png') }}" alt="PC Image"><div style="margin-top: 20px;"><div style="font-family: Arial, sans-serif; font-size: 14px; border: 1px solid #ccc; border-radius: 5px; padding: 10px; background-color: #f9f9f9; width: 700px;"><div style="display: flex; justify-content: space-between; margin-bottom: 5px; border-bottom: 1px solid #ddd; padding-bottom: 5px;"><p style="font-weight: bold; margin: 0;">系统名字:</p><p id="SystemNamessr2" style="margin: 0;"></p></div><div style="display: flex; justify-content: space-between; margin-bottom: 5px;"><p style="font-weight: bold; margin: 0;">系统描述:</p><p id="SystemDescription" style="margin: 0;"></p></div><div style="display: flex; justify-content: space-between; margin-bottom: 5px;"><p style="font-weight: bold; margin: 0;">内存大小:</p><p id="Memorysize" style="margin: 0;"></p></div><div style="display: flex; justify-content: space-between; margin-bottom: 5px;"><p style="font-weight: bold; margin: 0;">运行时间:</p><p id="Systemuptime" style="margin: 0;"></p></div><div style="display: flex; justify-content: space-between; margin-bottom: 5px;"><p style="font-weight: bold; margin: 0;">TCP活跃连接数:</p><p id="tcp_connections" style="margin: 0;"></p></div><div style="display: flex; justify-content: space-between; margin-bottom: 5px;"><p style="font-weight: bold; margin: 0;">当前进程总数:</p><p id="process_count" style="margin: 0;"></p></div><div style="display: flex; justify-content: space-between; margin-bottom: 5px;"><p style="font-weight: bold; margin: 0;">本机IP:</p><p id="ip_address" style="margin: 0;"></p></div></div><script>var myurCON = "http://" + window.location.host+"/config/";setInterval(()=>{fetch(myurCON).then(res=>{return res.json()}).then((json)=>{console.log(json);var SystemNamessr2 = document.getElementById('SystemNamessr2');SystemNamessr2.innerHTML = json.ssyname;var SystemDescription = document.getElementById('SystemDescription');SystemDescription.innerHTML = json.sysDecr;var Memorysize = document.getElementById('Memorysize');let memoryInKiB = json.mem; let memoryReadable = (memoryInKiB / 1048576).toFixed(2) + " GB"Memorysize.innerHTML = memoryReadable;var Systemuptime = document.getElementById('Systemuptime');let uptimeInHundredths = json.sysUptime; let uptimeInSeconds = uptimeInHundredths * 0.01; let days = Math.floor(uptimeInSeconds / (24 * 3600));let hours = Math.floor((uptimeInSeconds % (24 * 3600)) / 3600);let minutes = Math.floor((uptimeInSeconds % 3600) / 60);let seconds = Math.floor(uptimeInSeconds % 60);let uptimeReadable = `${days}天 ${hours}小时 ${minutes}分钟 ${seconds}秒`;Systemuptime.innerHTML = uptimeReadable;})},1000)</script></div> </div><div style="display: flex;"><div id="gaugeChart" class="chart" style="width: 350px;height:300px;"></div> <script>var gaugeDom = document.getElementById('gaugeChart');var gaugeChart = echarts.init(gaugeDom, null, {renderer: 'canvas',useDirtyRect: false});var app={}var gaugeOption = {tooltip: {formatter: '{a} <br/>{b} : {c}%'},series: [{name: 'Pressure',type: 'gauge',detail: {formatter: '{value}'},data: [{value: 98,name: 'CPU负载'}]}]};if (gaugeOption && typeof gaugeOption === 'object') {gaugeChart.setOption(gaugeOption);}var myurl3 = "http://" + window.location.host+"/cpu/";setInterval(()=>{fetch(myurl3).then(res=>{return res.json()}).then((json)=>{gaugeOption.series[0].data[0].value = json.cpu;gaugeChart.setOption(gaugeOption);})},1000)</script><div id="disk_usage" style="width: 350px;height:300px;"></div> <script>var domdisk_usage = document.getElementById('disk_usage');
var myChartdisk_usage = echarts.init(domdisk_usage, null, {
renderer: 'canvas',
useDirtyRect: false
});
var mydisk_usage = "http://" + window.location.host + "/get_disk/";
var optiondisk_usage = {
tooltip: {trigger: 'item',formatter: '{a} <br/>{b}: {c}% ({d}%)'
},
legend: {top: '5%',left: 'center'
},
series: [{name: 'Disk Usage',type: 'pie',radius: ['40%', '70%'],center: ['50%', '60%'],startAngle: 180,endAngle: 360,data: [{ name: 'Free', value: 0 },{ name: 'Used', value: 0 }] }
]
};
myChartdisk_usage.setOption(optiondisk_usage);setInterval(() => {
fetch(mydisk_usage).then(response => response.json()).then(data => {console.log(data); const free = data.free;const used = data.used;const total = data.total;if (typeof free === 'number' && typeof used === 'number' && typeof total === 'number') {const freePercent = (free / total) * 100;const usedPercent = (used / total) * 100;myChartdisk_usage.setOption({series: [{data: [{ name: 'Free', value: freePercent },{ name: 'Used', value: usedPercent }]}]});} else {console.error('Invalid data format', data);}}).catch(error => {console.error('Error fetching disk usage:', error);});
}, 1000);</script><div id="memory_usage" class="chart" style="height: 300px; width: 350px;"></div></div><script>var memory_usageDom = document.getElementById('memory_usage');var memory_usageChart = echarts.init(memory_usageDom, null, {renderer: 'canvas',useDirtyRect: false});var app={}var memory_usageOption = {tooltip: {formatter: '{a} <br/>{b} : {c}%'},series: [{name: 'Pressure',type: 'gauge',detail: {formatter: '{value}'},data: [{value: 98,name: '内存占有率'}]}]};if (memory_usageOption && typeof memory_usageOption === 'object') {memory_usageChart.setOption(memory_usageOption);}var myurl99 = "http://" + window.location.host+"/Memoryusage/";setInterval(()=>{fetch(myurl99).then(res=>{ return res.json()}).then((json)=>{memory_usageOption.series[0].data[0].value = json.memory_usage;memory_usageChart.setOption(memory_usageOption);})},1000);</script></li><li style="width: 22%"><div class="box"><div class="tit">网络接口状态统计</div><div id="echart3"><div id="interface_status" style="height: 230px; width: 350px;"></div><script>var interfaceDataUrl = "http://" + window.location.host + "/interface_status/";
let interfaceChart = echarts.init(document.getElementById('interface_status'));
let interfaceChartOption = {tooltip: {trigger: 'axis',axisPointer: {type: 'shadow'}},xAxis: {type: 'category',data: [], axisLabel: {interval: 0,rotate: 45}},yAxis: {type: 'value',name: '',minInterval: 1},series: [{name: '',type: 'bar',data: [], itemStyle: {color: function (params) {let colorMap = {'运行中': '#4caf50', '已关闭': '#f44336', '未启用': '#9e9e9e' };return colorMap[params.name] || '#000'; }}}]
};
interfaceChart.setOption(interfaceChartOption);
setInterval(() => {fetch(interfaceDataUrl).then(response => response.json()).then(data => {let statusNames = {up: '运行中',down: '已关闭',notPresent: '未启用'};let statusCount = {'运行中': 0,'已关闭': 0,'未启用': 0};data.interfaces.forEach(interface => {let status = statusNames[interface.status];if (statusCount[status] !== undefined) {statusCount[status]++;}});interfaceChartOption.xAxis.data = Object.keys(statusCount);interfaceChartOption.series[0].data = Object.values(statusCount); interfaceChart.setOption(interfaceChartOption);}).catch(error => {console.error("Error fetching interface data:", error);});
}, 1000); </script></div></div><div class="box"><div class="tit">丢包率和误包率</div><div id="error_loss_chart" style="width: 350px;height:200px; margin-top: 20px;"></div> </div></li></ul><div class="box" style="padding: 20px 0; height: 335px;"><ul class="clearfix nav2 "><li style="width:25%;"><div class="tit01">实时流量（MB）</div><div id="net_s" style="width: 350px;height:240px; margin-top: 20px;"></div><script>var net_s_Dom = document.getElementById('net_s');var myChart_net_s = echarts.init(net_s_Dom, null, {renderer: 'canvas',useDirtyRect: false});
var x_a = new Array();
for(var i =0;i<=200;i++)
{x_a.push(i)
}
var app={}
var option_net_s = {animation: false,title: {text: ''},tooltip: {trigger: 'axis',axisPointer: {type:'',label: {backgroundColor: '#6a7985'}}},legend: {data: ['入流量', '出流量']},toolbox: {feature: {saveAsImage: {}}},grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true}, xAxis: [{type: 'category',boundaryGap: false,data: x_a}],yAxis: [{type: 'value'}],series: [{name: '入流量',type: 'line',emphasis: {focus: 'series'},data: []},{name: '出流量',type: 'line',emphasis: {focus: 'series'},data: [],valueAnimation: false}]
};
myChart_net_s.setOption(option_net_s);var mydata_net_in= new Array();var mydata_net_out = new Array();var net_last_in = 0;var net_last_out = 0;var myurl4 = "http://" + window.location.host+"/net_m/";setInterval(()=>{fetch(myurl4).then(res=>{ return res.json()}).then((json)=>{i = (json.in_s - net_last_in);o = (json.out_s - net_last_out);console.log(i,o);if(i < 0) i = i + 2**32;if(o < 0) o = o + 2**32i = i / (1048576)o = o / (1048576)mydata_net_in.push(i);mydata_net_out.push(o);net_last_in = json.in_snet_last_out = json.out_sif (mydata_net_in.length > 200){mydata_net_in.shift(json.in_s);mydata_net_out.shift(json.out_s);}option_net_s.series[0].data=mydata_net_in;option_net_s.series[1].data=mydata_net_out;myChart_net_s.setOption(option_net_s);})},1000);</script></li><li style="width:25%"><div class="tit01">历史网络流量（5min）</div><div id="net_traffic_chart" style="width: 350px;height:350px;"></div><script>var netTrafficContainer = document.getElementById('net_traffic_chart');
var netTrafficChart = echarts.init(netTrafficContainer, null, {renderer: 'canvas',useDirtyRect: false
});
var netTrafficOption = {tooltip: { trigger: 'axis' },legend: { data: ['入流量', '出流量'] },xAxis: { type: 'category', boundaryGap: true, data: [] },yAxis: { type: 'value', name: 'Traffic (MB)' },series: [{ name: 'Incoming Traffic', type: 'line', data: [] },{ name: 'Outgoing Traffic', type: 'line', data: [] }],animationDuration: 0,animationDurationUpdate: 3000,animationEasing: 'linear',animationEasingUpdate: 'linear'
};netTrafficChart.setOption(netTrafficOption);
var trafficDataUrl = "http://" + window.location.host + "/net_h/";
setInterval(() => {fetch(trafficDataUrl).then(response => response.json()).then(data => {var newTimeStamps = data.timestamps || [];var newIncomingTraffic = data.net_in || [];var newOutgoingTraffic = data.net_out || [];netTrafficOption.xAxis.data = newTimeStamps.slice(-30);netTrafficOption.series[0].data = newIncomingTraffic.slice(-30);netTrafficOption.series[1].data = newOutgoingTraffic.slice(-30);netTrafficChart.setOption(netTrafficOption);}).catch(error => console.error('Error fetching traffic data:', error));
}, 3000);
window.addEventListener('resize', netTrafficChart.resize);</script><div class="ftechart" id="echart4"></div></li><li style="width:25%"><div class="tit01">网络波动</div><div id="network_volatility" style="width: 300px; height: 300px;"></div><script>var networkVolatilityDom = document.getElementById('network_volatility');
var networkVolatilityChart = echarts.init(networkVolatilityDom, null, {renderer: 'canvas',useDirtyRect: false
});var networkVolatilityOption = {tooltip: {trigger: 'axis'},xAxis: {type: 'category',data: [] },yAxis: {type: 'value',axisLabel: {formatter: '{value} bytes'}},series: [{name: '波动字节',type: 'line',smooth: true,data: [] }]
};if (networkVolatilityOption && typeof networkVolatilityOption === 'object') {networkVolatilityChart.setOption(networkVolatilityOption);
}
var myurlNetworkVolatility = "http://" + window.location.host + "/volatility/";setInterval(() => {fetch(myurlNetworkVolatility) .then(res => res.json()).then((json) => {const currentTimestamp = new Date().toISOString(); if (json.volatility !== undefined) {networkVolatilityOption.xAxis.data.push(currentTimestamp); networkVolatilityOption.series[0].data.push(json.volatility); }if (networkVolatilityOption.xAxis.data.length > 10) {networkVolatilityOption.xAxis.data.shift();networkVolatilityOption.series[0].data.shift();}networkVolatilityChart.setOption(networkVolatilityOption);}).catch((error) => console.error("获取网络波动字节数据失败", error));
}, 1000);</script></li><li style="width:25%"><div class="tit01">TCP&UDP</div><div id="tcp_udp_chart" style="width: 350px;height:240px; margin-top: 20px;"></div><script>var tcp_udp_Dom = document.getElementById('tcp_udp_chart');
var tcp_udp_chart = echarts.init(tcp_udp_Dom, null, {renderer: 'canvas',useDirtyRect: false
});
var tcp_udp_option = {title: {text: ''},tooltip: {trigger: 'axis'},legend: {data: ['TCP In', 'TCP Out', 'UDP In', 'UDP Out']},grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true},xAxis: {type: 'category',boundaryGap: false,data: [] },yAxis: [{type: 'value',name: 'TCP Packets',min: 0,max: 800000, position: 'left',axisLine: {lineStyle: {color: '#5470C6' }}},{type: 'value',name: 'UDP Packets',min: 0,max: 800000, position: 'right',axisLine: {lineStyle: {color: '#91CC75' }}}],series: [{name: 'TCP In',type: 'line',yAxisIndex: 0, data: [] },{name: 'TCP Out',type: 'line',yAxisIndex: 0, data: [] },{name: 'UDP In',type: 'line',yAxisIndex: 1, data: [] },{name: 'UDP Out',type: 'line',yAxisIndex: 1,data: [] }]
};tcp_udp_chart.setOption(tcp_udp_option);
var myurl2 = "http://" + window.location.host + "/tcp_udp_status/";setInterval(() => {fetch(myurl2).then(res => res.json()).then(json => {var now = new Date().toLocaleTimeString(); tcp_udp_option.xAxis.data.push(now);if (tcp_udp_option.xAxis.data.length > 50) {tcp_udp_option.xAxis.data.shift();}tcp_udp_option.series[0].data.push(json.tcp_in); tcp_udp_option.series[1].data.push(json.tcp_out);tcp_udp_option.series[2].data.push(json.udp_in); tcp_udp_option.series[3].data.push(json.udp_out); if (tcp_udp_option.series[0].data.length > 50) {tcp_udp_option.series[0].data.shift();tcp_udp_option.series[1].data.shift();tcp_udp_option.series[2].data.shift();tcp_udp_option.series[3].data.shift();}tcp_udp_chart.setOption(tcp_udp_option);}).catch(error => console.error('Error fetching TCP/UDP data:', error));
}, 1000);</script><div class="" id=""><div style="float: left; width: 50%; height: 200px" id="fb03"></div><div style="float: left; width: 50%; height: 200px" id="fb04"></div></div></li></ul></div></div><script>var myur50 = "http://" + window.location.host+"/ip_addresses/";setInterval(()=>{fetch(myur50).then(res=>{return res.json()}).then((json)=>{console.log(json)var SystemDescription = document.getElementById('ip_address');SystemDescription.innerHTML = json.ip_addresses.ip_addresses;})},1000)var errorLossChartDom = document.getElementById('error_loss_chart');
var errorLossChart = echarts.init(errorLossChartDom, null, {renderer: 'canvas',useDirtyRect: false
});
var errorLossChartOptions = {title: {text: ''},tooltip: {trigger: 'axis'},legend: {data: ['In Packet Loss Rate', 'Out Packet Loss Rate', 'In Error Rate', 'Out Error Rate']},grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true},xAxis: {type: 'category',boundaryGap: false,data: [] },yAxis: {type: 'value',name: 'Rate (%)',min: 0,max: 100,position: 'left',axisLine: {lineStyle: {color: '#5470C6' }}},series: [{name: 'In Packet Loss Rate',type: 'line',data: [], lineStyle: {color: '#EE6666'}},{name: 'Out Packet Loss Rate',type: 'line',data: [], lineStyle: {color: '#5470C6'}},{name: 'In Error Rate',type: 'line',data: [], lineStyle: {color: '#91CC75'}},{name: 'Out Error Rate',type: 'line',data: [], lineStyle: {color: '#FAC858'}}]
};errorLossChart.setOption(errorLossChartOptions);
var errorLossDataUrl = "http://" + window.location.host + "/packet_loss_rate/";
setInterval(() => {fetch(errorLossDataUrl).then(res => res.json()).then(json => {var now = new Date().toLocaleTimeString(); errorLossChartOptions.xAxis.data.push(now);if (errorLossChartOptions.xAxis.data.length > 50) {errorLossChartOptions.xAxis.data.shift();}errorLossChartOptions.series[0].data.push(json.in_packet_loss_rate);errorLossChartOptions.series[1].data.push(json.out_packet_loss_rate);errorLossChartOptions.series[2].data.push(json.in_error_rate);errorLossChartOptions.series[3].data.push(json.out_error_rate);if (errorLossChartOptions.series[0].data.length > 50) {errorLossChartOptions.series[0].data.shift();errorLossChartOptions.series[1].data.shift();errorLossChartOptions.series[2].data.shift();errorLossChartOptions.series[3].data.shift();}errorLossChart.setOption(errorLossChartOptions);}).catch(error => console.error('Error fetching Packet Loss & Error Rate data:', error));
}, 1000);var cpuMonitorContainer = document.getElementById('cpu-monitor');var cpuChart = echarts.init(cpuMonitorContainer, null, {renderer: 'canvas',useDirtyRect: false});var cpuChartOption = {grid: {left: '20%', right: '10%',top: '10%',bottom: '10%'},xAxis: {type: 'value',max: 'dataMax',name: 'CPU %',nameLocation: 'middle',nameGap: 30},yAxis: {type: 'category',data: [], inverse: true,name: '',nameLocation: 'middle',nameGap: 50,nameTextStyle: {fontSize: 16, fontWeight: 'bold',color: '#333' }},series: [{name: 'CPU Usage',type: 'bar',data: [], label: {show: true,position: 'right',formatter: '{c}%', valueAnimation: true}}],tooltip: {trigger: 'item',formatter: '{b}: {c}%' },legend: {show: true,data: ['CPU Usage']},animationDuration: 0,animationDurationUpdate: 3000,animationEasing: 'linear',animationEasingUpdate: 'linear'};const processNames = []; const processCpuUsage = []; cpuChart.setOption(cpuChartOption);window.addEventListener('resize', cpuChart.resize);errorLossChart.setOption(errorLossChartOptions);var cpuDataUrl = "http://" + window.location.host + "/top_processes/";
setInterval(() => {fetch(cpuDataUrl).then(res => res.json()).then(data => {var processNames = [];var processCpuUsage = [];data.top_cpu_processes.forEach(process => {processNames.push(process.name || `PID ${process.pid}`);processCpuUsage.push(process.cpu_percent);});cpuChartOption.yAxis.data = processNames;cpuChartOption.series[0].data = processCpuUsage;cpuChart.setOption(cpuChartOption);}).catch(error => console.error('Error fetching CPU data:', error));
}, 1000);
var memoryMonitorContainer = document.getElementById('memory-monitor');
var memoryChart = echarts.init(memoryMonitorContainer, null, {renderer: 'canvas',useDirtyRect: false
});var memoryChartOption = {grid: {left: '20%', right: '10%',top: '10%',bottom: '10%'},xAxis: {type: 'value',max: 'dataMax',name: 'Memory %',nameLocation: 'middle',nameGap: 30},yAxis: {type: 'category',data: [], inverse: true,name: '',nameLocation: 'middle',nameGap: 50,nameTextStyle: {fontSize: 16, fontWeight: 'bold', color: '#333' }},series: [{name: 'Memory Usage',type: 'bar',data: [], label: {show: true,position: 'right',formatter: '{c}%', valueAnimation: true}}],tooltip: {trigger: 'item',formatter: '{b}: {c}%' },legend: {show: true,data: ['Memory Usage']},animationDuration: 0,animationDurationUpdate: 3000,animationEasing: 'linear',animationEasingUpdate: 'linear'
};const processNames2 = [];
const processMemoryUsage = []; memoryChart.setOption(memoryChartOption);window.addEventListener('resize', memoryChart.resize);var memoryDataUrl = "http://" + window.location.host + "/top_processes/";setInterval(() => {fetch(memoryDataUrl).then(res => res.json()).then(data => {var processNames2 = [];var processMemoryUsage = [];data.top_memory_processes.forEach(process => {processNames2.push(process.name || `PID ${process.pid}`);processMemoryUsage.push((process.memory_percent).toFixed(2)); });memoryChartOption.yAxis.data = processNames2;memoryChartOption.series[0].data = processMemoryUsage;memoryChart.setOption(memoryChartOption);}).catch(error => console.error('Error fetching memory data:', error));
}, 1000);var myur15 = "http://" + window.location.host+"/tcp_connections/";setInterval(()=>{fetch(myur15).then(res=>{return res.json()}).then((json)=>{var tcp_connections2 = document.getElementById('tcp_connections');tcp_connections2.innerHTML = json.tcp_active_connections;})},1000)var myur16 = "http://" + window.location.host+"/process_count/";setInterval(()=>{fetch(myur16).then(res=>{return res.json()}).then((json)=>{var process_count = document.getElementById('process_count');process_count.innerHTML = json.process_count;})},1000)</script>
</body>
</html>
mytest.py
import random
from pysnmp.hlapi import *
from flask import Flask,render_template
app = Flask(__name__)myhost='localhost'
myport=161
mycommunity ='public'
myifindex ='.10'myOIDs={'os_version': '1.3.6.1.2.1.1.1.0','hostname': '1.3.6.1.2.1.1.5.0','cpu_count': '1.3.6.1.4.1.2021.11.50.0','disk_total': '1.3.6.1.4.1.2021.9.1.6.1','disk_used': '1.3.6.1.4.1.2021.9.1.8.1','disk_free': '1.3.6.1.4.1.2021.9.1.7.1','process_count': '1.3.6.1.2.1.25.1.6.0','tcp_active_connections': '1.3.6.1.2.1.6.9.0','interface_status': '1.3.6.1.2.1.2.2.1.8','sysDecr' : ".1.3.6.1.2.1.1.1.0",'sysUptime' : ".1.3.6.1.2.1.1.3.0",'sysName':".1.3.6.1.2.1.1.5.0",'wlan_if_in':'1.3.6.1.2.1.2.2.1.10','wlan_if_out':'1.3.6.1.2.1.2.2.1.16','if_in' : ".1.3.6.1.2.1.2.2.1.10",'if_out' : ".1.3.6.1.2.1.2.2.1.16",'if_inpkt' : ".1.3.6.1.2.1.2.2.1.11",'if_outpkt' : ".1.3.6.1.2.1.2.2.1.17",'if_inbpkt' : ".1.3.6.1.2.1.2.2.1.12",'if_outbpkt': ".1.3.6.1.2.1.2.2.1.18",'if_speed' : ".1.3.6.1.2.1.2.2.1.5",'mem_total' : ".1.3.6.1.2.1.25.2.2.0",'cpu_loads' : ". 1.3.6.1.2.1.25.3.3.1.2",'hrStorageSize':'1.3.6.1.2.1.25.2.3.1.5.4',
'hrStorageUsed':"1.3.6.1.2.1.25.2.3.1.6.4" ,
'if_in_discards': "1.3.6.1.2.1.2.2.1.13",
'if_out_discards': "1.3.6.1.2.1.2.2.1.19" ,
'if_in_errors': "1.3.6.1.2.1.2.2.1.14",
'if_out_errors': "1.3.6.1.2.1.2.2.1.20",
'ipAddrTable_oid' :'1.3.6.1.2.1.4.20.1.1',}def getTableRows(oids):iterator = nextCmd(SnmpEngine(),CommunityData(mycommunity, mpModel=0),UdpTransportTarget((myhost, myport)),ContextData(),*oids,lexicographicMode = False)ret = []for errorIndication, errorStatus, errorIndex, varBinds in iterator:count = ()if errorIndication:print(errorIndication)breakelif errorStatus:print('%s at %s' % (errorStatus.prettyPrint(),errorIndex and varBinds[int(errorIndex) - 1][0] or '?'))breakelse:for varBind in varBinds:count = count + (varBind[1]._value,)ret.append(count)return ret
def getObjs(oids):iterator = getCmd(SnmpEngine(),CommunityData(mycommunity, mpModel=0),UdpTransportTarget((myhost, myport)),ContextData(),*oids)ret = []errorIndication, errorStatus, errorIndex, varBinds = next(iterator)if errorIndication:print(errorIndication)return 0elif errorStatus:print('%s at %s' % (errorStatus.prettyPrint(),errorIndex and varBinds[int(errorIndex)-1][0] or '?'))return 0else:for varBind in varBinds:ret.append(varBind[1]._value)return ret
def get_memory_usage():total_memory = getObjs([ObjectType(ObjectIdentity(myOIDs['hrStorageSize']))])used_memory = getObjs([ObjectType(ObjectIdentity(myOIDs['hrStorageUsed']))])if total_memory and used_memory and total_memory[0] > 0:memory_usage = (used_memory[0] / total_memory[0]) * 100return round(memory_usage, 2)else:return None
@app.route('/')
def index():return render_template('main.html')@app.route('/cpu/')
def cpu_used():cpuoid=ObjectType(ObjectIdentity(myOIDs['cpu_loads']))ret = getTableRows((cpuoid,))cpuload=0for i in ret:cpuload += i[0]print(cpuload)return {'cpu':cpuload}
@app.route('/net_m/')
def net_used():getoids=(ObjectType(ObjectIdentity(myOIDs['if_in']+'.41')),ObjectType(ObjectIdentity(myOIDs['if_out']+'.41')))in_out = getObjs(getoids)return {'in_s':in_out[0],'out_s':in_out[1]}
@app.route('/config/')
def m_config():getoids=(ObjectType(ObjectIdentity(myOIDs['sysDecr'])),ObjectType(ObjectIdentity(myOIDs['sysUptime'])),ObjectType(ObjectIdentity(myOIDs['mem_total'])),ObjectType(ObjectIdentity(myOIDs['sysName'])),)configs = getObjs(getoids)return {'sysDecr':configs[0].decode(),'sysUptime':configs[1],'mem':configs[2],'ssyname': configs[3].decode(),}
@app.route('/Memoryusage/')
def Memoryusage():memory_usage = get_memory_usage()return {'memory_usage': memory_usage}
@app.route('/tcp_udp_status/')
def tcp_udp_status():tcp_in_oid = ObjectType(ObjectIdentity('1.3.6.1.2.1.6.10.0'))tcp_out_oid = ObjectType(ObjectIdentity('1.3.6.1.2.1.6.11.0'))udp_in_oid = ObjectType(ObjectIdentity('1.3.6.1.2.1.7.1.0'))udp_out_oid = ObjectType(ObjectIdentity('1.3.6.1.2.1.7.4.0'))tcp_udp_data = getObjs([tcp_in_oid,tcp_out_oid, udp_in_oid, udp_out_oid])if tcp_udp_data:return {'tcp_in': tcp_udp_data[0],'tcp_out': tcp_udp_data[1],'udp_in': tcp_udp_data[2],'udp_out': tcp_udp_data[3]}else:return {'error': 'Failed to retrieve TCP/UDP statistics'}, 500
def get_packet_loss_rate():getoids = (ObjectType(ObjectIdentity(myOIDs['if_in_discards'] + '.41')),ObjectType(ObjectIdentity(myOIDs['if_out_discards'] + '.41')),ObjectType(ObjectIdentity(myOIDs['if_inpkt'] + '.41')),ObjectType(ObjectIdentity(myOIDs['if_outpkt'] + '.41')))results = getObjs(getoids)in_discards = results[0]out_discards = results[1]in_pkts = results[2]out_pkts = results[3]in_packet_loss_rate = (in_discards / in_pkts) * 100 if in_pkts > 0 else 0out_packet_loss_rate = (out_discards / out_pkts) * 100 if out_pkts > 0 else 0return round(in_packet_loss_rate, 2), round(out_packet_loss_rate, 2)def get_error_rate():getoids = (ObjectType(ObjectIdentity(myOIDs['if_in_errors'] + '.41')),ObjectType(ObjectIdentity(myOIDs['if_out_errors'] + '.41')),ObjectType(ObjectIdentity(myOIDs['if_inpkt'] + '.41')),ObjectType(ObjectIdentity(myOIDs['if_outpkt'] + '.41')))results = getObjs(getoids)in_errors = results[0]out_errors = results[1]in_pkts = results[2]out_pkts = results[3]in_error_rate = (in_errors / in_pkts) * 100 if in_pkts > 0 else 0out_error_rate = (out_errors / out_pkts) * 100 if out_pkts > 0 else 0return round(in_error_rate, 2), round(out_error_rate, 2)@app.route('/packet_loss_rate/')
def packet_loss_rate():in_loss_rate, out_loss_rate = get_packet_loss_rate()in_error_rate, out_error_rate = get_error_rate()if None not in (in_loss_rate, out_loss_rate, in_error_rate, out_error_rate):return {'in_packet_loss_rate': in_loss_rate,'out_packet_loss_rate': out_loss_rate,'in_error_rate': in_error_rate,'out_error_rate': out_error_rate}else:return {'error': 'Failed to retrieve packet loss or error rate'}, 500import ipaddress
import structdef parse_ip_from_binary(binary_data):try:ip_address = ipaddress.ip_address(binary_data)return str(ip_address)except ValueError:print(f"Invalid binary data: {binary_data}")return Nonedef get_ip_addresses():ip_addresses = []ip_entries = getTableRows([ObjectType(ObjectIdentity(myOIDs['ipAddrTable_oid']))])if ip_entries:for entry in ip_entries:ip_address = entry[0]if isinstance(ip_address, bytes):ip_address = parse_ip_from_binary(ip_address)if ip_address:ip_addresses.append(ip_address)else:print(f"Unexpected format: {ip_address}")if ip_addresses:return {"ip_addresses": ip_addresses}else:return {"error": "No valid IP addresses found"}else:return {"error": "Failed to retrieve IP addresses"}import psutil @app.route('/top_processes/')
def top_processes():processes = []for proc in psutil.process_iter(['pid', 'name', 'cpu_percent', 'memory_percent']):try:proc_info = proc.infoprocesses.append(proc_info)except (psutil.NoSuchProcess, psutil.AccessDenied, psutil.ZombieProcess):passtop_cpu_processes = sorted(processes, key=lambda x: x['cpu_percent'], reverse=True)[1:6]top_memory_processes = sorted(processes, key=lambda x: x['memory_percent'], reverse=True)[:5]return {'top_cpu_processes': top_cpu_processes,'top_memory_processes': top_memory_processes}
@app.route('/interface_status/')
def interface_status():interfaces = getTableRows([ObjectType(ObjectIdentity(myOIDs['interface_status']))])status_map = {1: 'up', 2: 'down', 3: 'testing', 4: 'unknown', 5: 'dormant', 6: 'notPresent', 7: 'lowerLayerDown'}interface_status = [{'interface_index': idx+1, 'status': status_map.get(status, 'unknown')} for idx, (status,) in enumerate(interfaces)]return {'interfaces': interface_status}@app.route('/tcp_connections/')
def tcp_connections():tcp_active_connections = getObjs([ObjectType(ObjectIdentity(myOIDs['tcp_active_connections']))])if tcp_active_connections:return {'tcp_active_connections': tcp_active_connections[0]}else:return {'error': 'Failed to retrieve TCP connections'}, 500
@app.route('/process_count/')
def process_count():process_count = getObjs([ObjectType(ObjectIdentity(myOIDs['process_count']))])if process_count:return {'process_count': process_count[0]}else:return {'error': 'Failed to retrieve process count'}, 500
# ip
@app.route('/ip_addresses/')
def ip_addresses():ip_list = get_ip_addresses()if ip_list:return {'ip_addresses': ip_list}else:return {'error': 'Failed to retrieve IP addresses'}, 500from collections import deque
import threading
import time
from datetime import datetime, timedeltanet_history_data = deque(maxlen=30)
def update_net_history():while True:getoids = (ObjectType(ObjectIdentity(myOIDs['if_in'] + '.41')),ObjectType(ObjectIdentity(myOIDs['if_out'] + '.41')))in_out = getObjs(getoids)if in_out:timestamp = datetime.now()net_history_data.append({"timestamp": timestamp,"net_in": in_out[0],"net_out": in_out[1]})else:print("Failed to retrieve network data")time.sleep(10)
threading.Thread(target=update_net_history, daemon=True).start()
@app.route('/net_h/')
def net_history():net_in = [round(entry["net_in"] / (1024 * 1024), 2) for entry in net_history_data]net_out = [round(entry["net_out"] / (1024 * 1024), 2) for entry in net_history_data]timestamps = [entry["timestamp"].strftime('%Y-%m-%d %H:%M:%S') for entry in net_history_data]return {"net_in": net_in, "net_out": net_out, "timestamps": timestamps}
@app.route('/get_disk/')
def get_disk_usage():getoids = (ObjectType(ObjectIdentity('1.3.6.1.2.1.25.2.3.1.5.2')),ObjectType(ObjectIdentity('1.3.6.1.2.1.25.2.3.1.5.1')),ObjectType(ObjectIdentity('1.3.6.1.2.1.25.2.3.1.6.1')),ObjectType(ObjectIdentity('1.3.6.1.2.1.25.2.3.1.6.2')))results = getObjs(getoids)total_part1 = results[0]total_part2 = results[1]used_part1 = results[2]used_part2 = results[3]if None not in [total_part1, total_part2, used_part1, used_part2]:total = (total_part1 + total_part2) * 4096used = (used_part1 + used_part2) * 4096free = total - usedreturn {'total': round(total / (1024 ** 3), 2),'used': round(used / (1024 ** 3), 2),'free': round(free / (1024 ** 3), 2)}else:return Nonedef get_network_traffic():in_bytes = getObjs([ObjectType(ObjectIdentity(myOIDs['if_in']+'.41'))])return in_bytes[0] if in_bytes else 0
last_in_bytes = 0
@app.route('/volatility/')
def network_traffic_volatility():global last_in_bytesin_bytes= get_network_traffic()volatility = in_bytes - last_in_byteslast_in_bytes = in_bytesreturn {'volatility': volatility}
if __name__ == '__main__':app.run()style.css
@charset "utf-8";
/* CSS Document */
*{-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box}
*,body{padding:0px; margin:0px;font-family: "微软雅黑";}
body{color:#2c3e50;font-size: 16px; background: #fff;}
html,body{height: 100%;}
li{ list-style-type:none;}
i{ margin:0px; padding:0px; text-indent:0px;}
img{ border:none; max-width: 100%;}
a{ text-decoration:none; color:#34495e;}
a.active,a:focus{ outline:none!important; text-decoration:none;}
ol,ul,p,h1,h2,h3,h4,h5,h6{ padding:0; margin:0}
a:hover{ color:#3498db; text-decoration: none!important}
.clearfix:after, .clearfix:before {display: table;content: " "}
.clearfix:after {clear: both}
.pulll_left{float:left;}
.pulll_right{float:right;}
i{font-style: normal;}
.text-w{color: #f1c40f}
.text-d{color: #e67e22}
.text-s{color: #2ecc71}
.text-b{color: #3498db}.head{position: relative; height: 90px; margin: 0 15px; padding-right: 60px;}
.head h1{ font-size: 30px; letter-spacing: -2px; text-align: center; line-height: 90px; padding-right: 55px; color: #3498db;}
.head .menu ul{ font-size: 0;}.head .menu li{ display: inline-block; position: relative;margin: 25px 15px;;}
.head .menu li a{ display: block; font-size: 18px; color: #34495e; line-height: 40px; padding: 0 15px; }
.head .time{position: absolute; right: 0; line-height: 90px;}.menu li:before,
.menu li:after{ position:absolute; width:10px; height:5px;opacity: .4; content: ""; border-top: 2px solid #3498db; top: -1px;border-radius: 2px;}
.menu li:before,.menu li a:before{border-left: 2px solid #3498db;left: -1px;}
.menu li:after,.menu li a:after{border-right: 2px solid #3498db; right: -1px;}
.menu li a{ position:relative;}
.menu li a:before,
.menu li a:after{ position:absolute; width:10px; height:5px; opacity: .4; content: "";border-bottom: 2px solid #3498db; bottom:-1px;border-radius: 2px;}.head .menu li a:hover{ color: #3498db;}
.menu li a:hover:before,
.menu li a:hover:after,
.menu li:hover:before,
.menu li:hover:after{border-color: #3498db; opacity: 1;}.mainbox{padding: 0px 10px;}
.nav1{margin-left: -6px; margin-right:-6px;}
.nav1>li{padding:0 6px; float: left;}.box{ border:1px solid rgba(52,152,219,.5); box-shadow:inset 0 0 10px rgba(52,152,219,.4); margin-bottom: 12px; position: relative;}
.tit{ padding: 10px 10px 10px 25px;border-bottom:1px solid rgba(52,152,219,.7);font-size: 16px; font-weight: 500; position: relative;}
.tit:before,.tit01:before{position: absolute; content: ""; width: 6px; height: 6px; background: rgba(52,152,219,.9);box-shadow: 0 0 5px rgba(52,152,219,.9); border-radius: 10px; left: 10px; top: 18px;}.tit:after,.box:before{ width: 100%; height: 1px; content: ""; position: absolute; left: 0; bottom:-1px; background:linear-gradient(to right,#3498db,#2980b9,#3498db); box-shadow: 0 0 5px rgba(52,152,219,1); opacity: .6}
.box:before{top: -1px;}.boxnav{padding: 10px;}
.nav2>li:first-child{border:none;}
.nav2>li{float: left;border-left:1px solid rgba(52,152,219,.2); height:240px; padding: 0 10px 10px 10px;}
.tit01{font-size: 16px; font-weight: 500; position: relative; padding-left: 15px;}
.tit01:before{ left: 3px; top: 8px;}.ftechart{height: 200px;}.table1 th{ border-bottom: 1px solid #3498db; font-size: 14px; text-align: center; padding: 6px 0; color: rgba(44,62,80,.9)}
.table1 td{ border-bottom: 1px dotted #3498db;font-size: 12px; padding:6px 0;text-align: center; color: rgba(44,62,80,.7)}
.table1 tr:last-child td{border: none;}
.mapc{background: url(../images/bg3.png) no-repeat center center; background-size: 100% 100%}
.map{position: relative; height: 100%; padding-left: 10%;}.mapnav{position: absolute;z-index: 10;}
.mapnav div{ background: url(../images/bg1.png) no-repeat; background-size:100% auto; width: 110px;text-align: center; padding: 20px 0; line-height: 120%;}
.mapnav div span{font-size: 14px; opacity: .6}
.mapnav div p{font-size: 20px; font-weight: bold; padding-top: 5px;}
.mapnav li{float: left; margin-right: 6px;}.leidanav{margin-top: -5px;}
.leidanav li{float: left; width: 20%; text-align: center; border-left: 1px solid rgba(52,152,219,.1)}
.leidanav2 li{ width: 33.3333%}
.leidanav3 li{ width: 25%}
.leidanav li:first-child{border-left: none;}
.leidanav span{font-size: 12px; opacity: .6}.leidanav p{font-size: 18px; color: #3498db }
.mapnav2{ position: absolute; left: 10px; bottom:0px; width: 40%; z-index: 10;}
.ybp{width: 100%}
.ybp li{float: left; width: 50%; height: 120px; }
.duibi li{float: left; width: 25%; height: 200px; padding: 0; border: none;}.btn{ position: absolute; border-radius:2px; padding:4px 20px; opacity: .8;}
.btn1{border: 1px solid rgba(52,152,219,.5); background: #27ae60; left:35%; top: 30%;}
.btn2{ border: 1px solid rgba(52,152,219,.5); background: #2980b9;right:32%; top: 60%;}
.btn:hover{color: #fff; opacity:1;}
.btn1:before,.btn2:before{position: absolute; content: ''; width: 50px; height: 1px; background: #2c3e50;}
.btn1:before{ transform: rotate(30deg); right: -65%; top: 100%}
.btn2:before{ transform: rotate(30deg); left: -65%; top: -10%}
.tit02{font-size: 14px; padding: 10px 0;}
.water-container {position: relative;text-align: center;
}.circle {position: relative;width: 150px;height: 150px;border-radius: 50%;overflow: hidden;background: #f0f0f0;box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
}.water {position: absolute;bottom: 0;width: 100%;height: 100%;background: #4da6ff;animation: wave 2s infinite linear;transform: translateY(70%);
}.text {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);font-size: 20px;font-weight: bold;color: #333;
}.label {margin-top: 10px;font-size: 16px;color: #888;
}/* 波浪动画 */
@keyframes wave {from {transform: translateY(70%);}to {transform: translateY(65%);}
}.tagcloud { width:100%; height:90%!important; overflow: hidden;position: relative;
}
.tagcloud a {display: block;border-radius: 50%;color: #2c3e50;font-weight: bold;font-size: 14px;text-decoration: none;text-align: center;display: flex; align-items: center; justify-content: center;
}.b01{ width: 50px; height: 50px; }
.b02{ width: 80px; height: 80px; }
.b03{ width: 60px; height: 60px; }
.b04{ width: 70px; height: 70px; }.co01{ border: 2px solid rgba(52,152,219,1); box-shadow: inset 0 0 20px rgba(52,152,219,1);}
.co02{ border: 2px solid rgba(241,196,15,1); box-shadow: inset 0 0 20px rgba(241,196,15,1);}
.co03{ border: 2px solid rgba(41,128,185,1); box-shadow: inset 0 0 20px rgba(41,128,185,1);}
.co04{ border: 2px solid rgba(46,204,113,1); box-shadow: inset 0 0 20px rgba(46,204,113,1);}
.co05{ border: 2px solid rgba(230,126,34,1); box-shadow: inset 0 0 20px rgba(230,126,34,1);}.huati{ padding-top: 20px;}
.huati li{ font-size: 12px; line-height: 230%;}.wancheng{display: flex; align-items: center; justify-content: center;}
.wancheng span{font-size: 14px; color: #2c3e50;}
.wancheng h3{font-size: 20px; color:#3498db;}
.wancheng h3 i{font-size: 12px; color:#2c3e50;}
.yuan{padding:5px;border-radius: 100%; margin-left: 10px; border: 2px solid rgba(52,152,219,.8);}
.yuan span{width: 60px; height: 60px; border-radius: 100%; background: rgba(52,152,219,.8); display: flex; align-items: center; justify-content: center; font-size: 20px;}
