完成主机监控动态图表
This commit is contained in:
mkg
@@ -2,12 +2,12 @@ import os
|
||||
import platform
|
||||
import re
|
||||
from datetime import datetime
|
||||
|
||||
import time
|
||||
import psutil
|
||||
from flask import Blueprint, render_template
|
||||
from flask import Blueprint, render_template, jsonify
|
||||
from flask_marshmallow import Marshmallow
|
||||
|
||||
from applications.service.route_auth import authorize_and_log
|
||||
from applications.service.route_auth import authorize_and_log, authorize
|
||||
|
||||
ma = Marshmallow()
|
||||
admin_Monitor = Blueprint('adminMonitor', __name__, url_prefix='/admin/monitor')
|
||||
@@ -58,6 +58,8 @@ def main():
|
||||
up_time_list = re.split(r':', str(up_time))
|
||||
up_time_format = " {} 小时{} 分钟{} 秒".format(up_time_list[0], up_time_list[1], up_time_list[2])
|
||||
|
||||
# 当前时间
|
||||
time_now = time.strftime('%H:%M:%S ', time.localtime(time.time()))
|
||||
return render_template('admin/monitor.html',
|
||||
hostname=hostname,
|
||||
system_version=system_version,
|
||||
@@ -70,5 +72,20 @@ def main():
|
||||
memory_free=memory_free,
|
||||
boot_time=boot_time,
|
||||
up_time_format=up_time_format,
|
||||
disk_partitions_list=disk_partitions_list
|
||||
disk_partitions_list=disk_partitions_list,
|
||||
time_now=time_now
|
||||
|
||||
)
|
||||
|
||||
|
||||
# 图表api
|
||||
@admin_Monitor.route('/polling')
|
||||
@authorize("admin:monitor:main")
|
||||
def ajax_polling():
|
||||
# 获取cup使用率
|
||||
cpus_percent = psutil.cpu_percent(interval=0.1)
|
||||
# 获取内存使用率
|
||||
memory_information = psutil.virtual_memory()
|
||||
memory_usage = memory_information.percent
|
||||
time_now = time.strftime('%H:%M:%S ', time.localtime(time.time()))
|
||||
return jsonify(cups_percent=cpus_percent, memory_used=memory_usage, time_now=time_now)
|
||||
|
||||
@@ -158,9 +158,10 @@
|
||||
<script src="{{ url_for('static', filename='/admin/component/layui/layui.js') }}"></script>
|
||||
<script src="{{ url_for('static', filename='/admin/component/pear/pear.js') }}"></script>
|
||||
<script>
|
||||
layui.use(['layer', 'echarts'], function() {
|
||||
layui.use(['layer', 'echarts','popup'], function() {
|
||||
var $ = layui.jquery,
|
||||
echarts = layui.echarts;
|
||||
let popup = layui.popup;
|
||||
|
||||
var echartsRecords = echarts.init(document.getElementById('echarts-records'), 'walden');
|
||||
|
||||
@@ -183,53 +184,20 @@
|
||||
"#8B5CFF",
|
||||
"#00CA69"
|
||||
];
|
||||
let echartData = [{
|
||||
name: "1",
|
||||
value1: 100,
|
||||
value2: 233
|
||||
},
|
||||
|
||||
let echartData = [
|
||||
{
|
||||
name: "2",
|
||||
value1: 138,
|
||||
value2: 233
|
||||
name: "{{time_now}}",
|
||||
cpu_percent: {{ cpus_percent }},
|
||||
memory_percent: {{ memory_usage }}
|
||||
},
|
||||
{
|
||||
name: "3",
|
||||
value1: 350,
|
||||
value2: 200
|
||||
},
|
||||
{
|
||||
name: "4",
|
||||
value1: 173,
|
||||
value2: 180
|
||||
},
|
||||
{
|
||||
name: "5",
|
||||
value1: 180,
|
||||
value2: 199
|
||||
},
|
||||
{
|
||||
name: "6",
|
||||
value1: 150,
|
||||
value2: 233
|
||||
},
|
||||
{
|
||||
name: "7",
|
||||
value1: 180,
|
||||
value2: 210
|
||||
},
|
||||
{
|
||||
name: "8",
|
||||
value1: 230,
|
||||
value2: 180
|
||||
}
|
||||
];
|
||||
|
||||
let xAxisData = echartData.map(v => v.name);
|
||||
var xAxisData = echartData.map(v => v.name);
|
||||
// ["1", "2", "3", "4", "5", "6", "7", "8"]
|
||||
let yAxisData1 = echartData.map(v => v.value1);
|
||||
var yAxisData1 = echartData.map(v => v.cpu_percent);
|
||||
// [100, 138, 350, 173, 180, 150, 180, 230]
|
||||
let yAxisData2 = echartData.map(v => v.value2);
|
||||
var yAxisData2 = echartData.map(v => v.memory_percent);
|
||||
// [233, 233, 200, 180, 199, 233, 210, 180]
|
||||
const hexToRgba = (hex, opacity) => {
|
||||
let rgbaColor = "";
|
||||
@@ -255,17 +223,15 @@
|
||||
formatter: function(params) {
|
||||
let html = '';
|
||||
params.forEach(v => {
|
||||
console.log(v)
|
||||
html +=
|
||||
`<div style="color: #666;font-size: 14px;line-height: 24px">
|
||||
<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${color[v.componentIndex]};"></span>
|
||||
${v.seriesName}.${v.name}
|
||||
<span style="color:${color[v.componentIndex]};font-weight:700;font-size: 18px">${v.value}</span>
|
||||
人`;
|
||||
%`;
|
||||
})
|
||||
|
||||
|
||||
|
||||
return html
|
||||
},
|
||||
extraCssText: 'background: #fff; border-radius: 0;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #333;',
|
||||
@@ -286,7 +252,7 @@
|
||||
type: "category",
|
||||
boundaryGap: false,
|
||||
axisLabel: {
|
||||
formatter: '{value}月',
|
||||
formatter: '{value}',
|
||||
textStyle: {
|
||||
color: "#333"
|
||||
}
|
||||
@@ -300,7 +266,7 @@
|
||||
}],
|
||||
yAxis: [{
|
||||
type: "value",
|
||||
name: '单位：人',
|
||||
name: '单位：百分比',
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: "#666"
|
||||
@@ -407,6 +373,41 @@
|
||||
echartsRecords.resize();
|
||||
}
|
||||
|
||||
setInterval(ajaxPolling, 1000 * 10)
|
||||
|
||||
function ajaxPolling() {
|
||||
$.ajax({
|
||||
url: "/admin/monitor/polling",
|
||||
success: function(data) {
|
||||
echartData.push({
|
||||
name: data.time_now,
|
||||
cpu_percent: data.cups_percent,
|
||||
memory_percent: data.memory_used
|
||||
});
|
||||
if(echartData.length>8){
|
||||
echartData.shift();
|
||||
}
|
||||
|
||||
xAxisData = echartData.map(v => v.name);
|
||||
yAxisData1 = echartData.map(v => v.cpu_percent);
|
||||
yAxisData2 = echartData.map(v => v.memory_percent);
|
||||
|
||||
option.xAxis[0].data=xAxisData
|
||||
option.series[0].data=yAxisData1
|
||||
option.series[1].data=yAxisData2
|
||||
|
||||
echartsRecords.setOption(option);
|
||||
|
||||
},
|
||||
error: function(xhr, type, errorThrown) {
|
||||
popup.failure("api错误");
|
||||
}
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
Reference in New Issue
Block a user