Django Ajax动态图形监控
2023-02-18 16:46:17 时间
Ajax动态图形监控: 通过使用前端轮询的方式实现对主机动态图形监控.
先来定义index.html
前端绘图代码.
<script src="https://cdn.lyshark.com/jquery/3.5.1/jquery.min.js" type="text/javascript"></script>
<script src="https://cdn.lyshark.com/echarts/5.0.0/echarts.min.js" type="text/javascript"></script>
<!--定义绘图区域-->
<div id="main" style="height:300px;width:80%;border:1px solid #eecc11;padding:10px;"></div>
<!--调用百度的绘图库,进行图片的绘制工作.-->
<script type="text/javascript" charset="UTF-8">
var display = function(time,cpu) {
var main = echarts.init(document.getElementById(("main")));
var option = {
xAxis: {
boundaryGap:false,
boundaryGap:false,
type: 'category',
data: time
},
yAxis: {
type: 'value'
},
series: [{
type: 'line',
areaStyle:{},
data: cpu
}]
};
main.setOption(option,true);
};
</script>
<!--update()函数具体执行的任务,其主要只保留前十条数据.-->
<script type="text/javascript" charset="UTF-8">
// 负责对参数的解析
var time =["","","","","","","","","",""];
var cpu = [0,0,0,0,0,0,0,0,0,0];
var update = function(recv){
time.push(recv.response[0]);
cpu.push(parseFloat(recv.response[1]));
if(time.length >=10){
time.shift();
cpu.shift();
console.log("处理后的时间数据:" + time);
console.log("处理后的CPU数据:" + cpu);
display(time,cpu) // 调用绘图函数
}
};
</script>
<!--设定一个定时器,每隔1000毫秒向后端发送请求-->
<script type="text/javascript">
$(
function () {
fetchData();
setInterval(fetchData, 1000);
}
);
function fetchData(){
$.ajax({
url:"/_ajax/",
type:"GET",
dataType: 'json',
success:function (recv) {
console.log("获取到时间:" + recv.response[0]);
console.log("获取到数据:" + recv.response[1]);
update(recv) // 传递给处理函数
}
})
}
</script>
后端views.py
视图层则是返回本机的实时数据给前台即可.
from django.shortcuts import render,HttpResponse
import json,psutil,time
def index(request):
return render(request,"index.html")
def _ajax(request):
if request.method == "GET":
times = time.strftime("%M:%S",time.localtime())
data = psutil.cpu_percent(interval=None,percpu=True)
return HttpResponse(json.dumps({"response":[times,data]}))
Ajax轮询多个图形: 我们来实现一次性绘制多个图形的方法,代码只是在上方改进一下即可.
前端部分index.html
分别绘制两个仪表盘,并封装好绘图方法.
<script src="https://cdn.lyshark.com/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.lyshark.com/echarts/5.0.0/echarts.min.js"></script>
<div id="cpuChart" style="width: 20%; height: 300px; border: 1px solid #dddddd; float:left; margin-right: 8px;"></div>
<div id="memChart" style="width: 20%; height: 300px; border: 1px solid #dddddd; float:left; margin-right: 8px;"></div>
<!--封装方法,一次性绘制两个图形-->
<script type="text/javascript" charset="UTF-8">
var display = function(cpu,mem) {
var cpuChart = echarts.init(document.getElementById("cpuChart"));
var option = {
series: [
{
type: 'gauge',
detail: {formatter: '{value}%'},
data: [{value: cpu, name: 'CPU'}]
}
]
};cpuChart.setOption(option, true);
var memChart = echarts.init(document.getElementById("memChart"));
var option = {
series: [
{
type: 'gauge',
detail: {formatter: '{value}%'},
data: [{value: mem, name: 'Mem'}]
}
]
};memChart.setOption(option, true);
};
</script>
<!--定义轮巡-->
<script type="text/javascript">
$(
function () {
fetchData();
setInterval(fetchData, 500);
}
);
function fetchData(){
$.ajax({
url:"/_ajax/",
type:"GET",
dataType: 'json',
success:function (recv) {
display(recv.response[0],recv.response[1]);
}
})
}
</script>
后台views.py
则是动态获取获取图形并轮询传递到前端.
from django.shortcuts import render,HttpResponse
import json,psutil
def index(request):
return render(request, "index.html")
def ajax(request):
if request.method == "GET":
mem = psutil.virtual_memory()
cpu = psutil.cpu_percent()
return HttpResponse(json.dumps({"response":[cpu,mem.percent]}))
相关文章
- git clone开启云上AI开发
- 实践GoF的设计模式:代理模式
- Ubuntu & GitLab CI & Docker & ASP.NET Core 2.0 自动化发布和部署(1)
- 初学开发必看:何为Git,何为SVN
- 实践GoF的设计模式:访问者模式
- 【经验之谈】Git使用之TortoiseGit配置VS详解
- cmder git bash 使用
- 4步教你学会使用Linux-Audit工具
- 10种有用的Linux Bash_Completion 命令示例
- Ubuntu & GitLab CI & Docker & ASP.NET Core 2.0 自动化发布和部署(2)
- 实践GoF的设计模式:迭代器模式
- 【补充】Gitlab 部署 CI 持续集成
- Google Chrome 应用商店上传扩展程序
- 实践GoF的23种设计模式:观察者模式
- Ubuntu Docker 安装和配置 GitLab CI 持续集成
- Ubuntu 简单安装和配置 GitLab
- 二进制SCA指纹提取黑科技:Go语言逆向技术
- 解读Go分布式链路追踪实现原理
- 基于C#的MongoDB数据库开发应用(4)--Redis的安装及使用
- 基于C#的MongoDB数据库开发应用(3)--MongoDB数据库的C#开发之异步接口