实时流量

实时负载

实时流量

总发送：0 B / 总接收：0 B

CUP状态

内存状态

正在沿街乞讨中……

实时流量

逍遥子 • 2021 年 05 月 25 日

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.1/echarts.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <style>
       
        .joe_census__server {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
            width: 700px;
            margin: 0 auto;
            
        }

.joe_census__server-item {
            background: #fff;
            box-shadow: 0px 0px 20px -5px rgba(158, 158, 158, 0.22);
            border-radius: 8px;
        }

.joe_census__server-item .title {
            display: flex;
            align-items: center;
            height: 45px;
            padding: 0 12px;
            border-bottom: 1px solid #ebeef5;
            color: #303133;
            justify-content: space-between;
            user-select: none;
        }

.joe_census__server-item .title .count {
            color: #909399;
            font-size: 12px;
        }

.joe_census__server-item .title .count .split {
            margin: 0 5px;
        }

.joe_census__server-item .content {
            padding: 15px;
        }
        #cpu,/*定义容器*/
        #nei,
        #work,
        #flow {
            height: 400px;
        }

</style>
</head>

<body>

</div>
        </div>
<br />
        <div class="joe_census__server-item">
            <div class="title">
                <span>实时流量</span>
                <div class="count">
                    <span class="up">总发送：0 B</span>
                    <span class="split">/</span>
                    <span class="down">总接收：0 B</span>
                </div>
            </div>
            <div class="content">
                <div id="flow"></div>
            </div>
        </div>
<br />
        <div class="joe_census__server-item">
            <div class="title">CUP状态</div>
            <div class="content">
                <div id="cpu"></div>

</div>
        </div>
<br />
        <div class="joe_census__server-item">
            <div class="title">内存状态</div>
            <div class="content">
                <div id="nei"></div>

</div>
        </div>
    </div>

{
                        $('.joe_census__server-item .count .up').html(`总发送：${bytesToSize(res.upTotal)}`);
                        $('.joe_census__server-item .count .down').html(`总接收：${bytesToSize(res.downTotal)}`);
                        const stamp = new Date();
                        const hours = String(stamp.getHours()).padStart(2, 0);
                        const minutes = String(stamp.getMinutes()).padStart(2, 0);
                        const seconds = String(stamp.getSeconds()).padStart(2, 0);
                        const time = `${hours}:${minutes}:${seconds}`;

categories.push(time);
                        upSeries.push(res.up);
                        downSeries.push(res.down);
                        cpuSeries.push(res.cpu[0]);/*赋值变量*/
                        neiSeries.push(Math.round((res.memory.memRealUsed / res.memory.memTotal) * 1000) / 10);
                        if (categories.length > 5) categories.shift();
                        if (upSeries.length > 5) upSeries.shift();
                        if (downSeries.length > 5) downSeries.shift();
                        if (cpuSeries.length > 5) cpuSeries.shift();/*回收变量*/
                        if (neiSeries.length > 5) neiSeries.shift();
                        flowChart.setOption({
                            title: {
                                subtext: '单位 KB/s'
                            },
                            grid: {
                                left: '3%',
                                right: '4%',
                                bottom: '3%',
                                containLabel: true
                            },
                            tooltip: {
                                trigger: 'axis',
                                axisPointer: {
                                    type: 'cross',
                                    label: {
                                        backgroundColor: '#6a7985'
                                    }
                                }
                            },
                            xAxis: {
                                axisTick: {
                                    show: false
                                },
                                type: 'category',
                                boundaryGap: false,
                                data: categories
                            },
                            yAxis: {
                                type: 'value'
                            },
                            series: [
                                {
                                    type: 'line',
                                    name: '上行',
                                    smooth: true,
                                    showSymbol: false,
                                    itemStyle: {
                                        normal: {
                                            color: '#f39494',
                                            areaStyle: {
                                                color: '#f39494'
                                            },
                                            lineStyle: {
                                                width: 2,
                                                color: '#f39494'
                                            }
                                        }
                                    },
                                    stack: '总量',
                                    data: upSeries
                                },
                                {
                                    type: 'line',
                                    name: '下行',
                                    smooth: true,
                                    showSymbol: false,
                                    itemStyle: {
                                        normal: {
                                            color: '#9dd3e8',
                                            areaStyle: {
                                                color: '#9dd3e8'
                                            },
                                            lineStyle: {
                                                width: 2,
                                                color: '#9dd3e8'
                                            }
                                        }
                                    },
                                    stack: '总量',
                                    data: downSeries
                                }
                            ]
                        });
                        /*定义图表的方法*/
                        cpuChart.setOption({
                            color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
                            title: {
                                subtext: '单位 %/s'
                            },
                            grid: {
                                left: '3%',
                                right: '4%',
                                bottom: '3%',
                                containLabel: true
                            },
                            toolbox: {
                                feature: {
                                    saveAsImage: {}
                                }
                            },
                            tooltip: {
                                trigger: 'axis',
                                axisPointer: {
                                    type: 'cross',
                                    label: {
                                        backgroundColor: '#6a7985'
                                    }
                                }
                            },
                            xAxis: {
                                type: 'category',
                                boundaryGap: false,
                                data: categories
                            },
                            yAxis: {
                                type: 'value'
                            },
                            series: [
                                {
                                    type: 'line',
                                    name: '上行',
                                    smooth: true,
                                    showSymbol: false,
                                    areaStyle: {
                                        opacity: 0.8,
                                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                            offset: 0,
                                            color: 'rgba(128, 255, 165)'
                                        }, {
                                            offset: 1,
                                            color: 'rgba(1, 191, 236)'
                                        }])
                                    },

stack: '状态',
                                    data: cpuSeries
                                },

]
                        });

neiChart.setOption({
                            series: [{
                                type: 'gauge',
                                axisLine: {
                                    lineStyle: {
                                        width: 30,
                                        color: [
                                            [0.3, '#67e0e3'],
                                            [0.7, '#37a2da'],
                                            [1, '#fd666d']
                                        ]
                                    }
                                },
                                pointer: {
                                    itemStyle: {
                                        color: 'auto'
                                    }
                                },
                                axisTick: {
                                    distance: -30,
                                    length: 8,
                                    lineStyle: {
                                        color: '#fff',
                                        width: 2
                                    }
                                },
                                splitLine: {
                                    distance: -30,
                                    length: 30,
                                    lineStyle: {
                                        color: '#fff',
                                        width: 4
                                    }
                                },
                                axisLabel: {
                                    color: 'auto',
                                    distance: 40,
                                    fontSize: 20
                                },
                                detail: {
                                    valueAnimation: true,
                                    formatter: '{value} %',
                                    color: 'auto'
                                },
                                data: [{
                                    value: neiSeries
                                }]
                            }]

});
                    }
                    {
                        /* CPU占用 */
                        const cpuUse = res.cpu[0];
                        /* 内存占用 */
                        const memoryRealUse = Math.round((res.memory.memRealUsed / res.memory.memTotal) * 1000) / 10;
                        /* 内存缓冲 */
                        const memoryCacheUse = Math.round((res.memory.memCached / res.memory.memTotal) * 1000) / 10;
                        /* 系统缓冲 */
                        const memoryBufferUse = Math.round((res.memory.memBuffers / res.memory.memTotal) * 1000) / 10;
                        /* 系统负载 */
                        const systemLoad = Math.round((res.load.one / res.load.max) * 100) > 100 ? 100 : Math.round((res.load.one / res.load.max) * 100);
                        workChart.setOption({
                            title: {
                                subtext: '单位 百分比'
                            },
                            tooltip: {
                                trigger: 'axis',
                                axisPointer: {
                                    type: 'shadow'
                                }
                            },
                            grid: {
                                left: '10%',
                                right: '10%',
                                bottom: '3%',
                                containLabel: true
                            },

series: {
                                data: [
                                    {value: cpuUse, name: 'CPU占用'},
                                    {value: memoryRealUse, name: '内存占用'},
                                    {value: memoryCacheUse, name: '系统缓冲'},
                                    {value: memoryBufferUse, name: '内存缓冲'},
                                    {value: systemLoad, name: '系统负载'},

],
                                type: 'pie',
                                radius: [20, 150],
                                center: ['50%', '50%'],
                                roseType: 'area',
                                itemStyle: {
                                    borderRadius: 8
                                },

}
                        });
                    }
                    setTimeout(initChart, 2000);
                }
            });
        }
    </script>
</body>

</html>

实时流量

Leave a Comment Cancel reply
请输入正确的邮箱，以便收到回复!

badusb攻击windows10（msfconsole版）

kali下androidshell那些事

kali linux WiFi钓鱼

typecho将Gravatar头像改为QQ头像

kali搭建钓鱼WiFi

MetInfo 任意文件读取漏洞的修复与绕过

kali linux新手入门指南

Echarts geojson 制作乡镇地图数据

浅谈对CDN绕过

Wireshark从入门到放弃

实时流量

Leave a Comment Cancel reply 请输入正确的邮箱，以便收到回复!

实时流量

Leave a Comment Cancel reply
请输入正确的邮箱，以便收到回复!