网络管理-期末项目（附源码）_网络管理软件源码-优快云博客

环境：网络管理主机资源监控系统项目搭建（保姆级教程建议点赞收藏）_搭建网络版信息管理系统-优快云博客
效果图
下面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