完成主机监控动态图表

applications/views/admin/monitor.py

@@ -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)

templates/admin/monitor.html

@@ -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",
+        let echartData = [
-            value1: 100,
-            value2: 233
-        },
             {
-                name: "2",
+                name: "{{time_now}}",
-                value1: 138,
+                cpu_percent: {{ cpus_percent }},
-                value2: 233
+                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>