为了方便用户对通道的归类管理和筛选,EasyNVR、EasyGBS等平台的实时调阅页面设立了树状图分组,且同时具有云台控制、语音对讲功能。
我们在进行新版本测试的时候,发现侧边栏是循环渲染只请求一次,但返回数据过多,导致系统运行符合较大,于是在新版本更新当中就把这个问题进行了优化。
因此我们设置了一个时间函数去请求数据,代码如下:
setInterval(() => {
$.get("/api/v1/device/info", {
serial: node.key,
start:a*50,
limit:50,
}).then((ret) => {
if(ret.ChannelList.length == 0){
// console.log('没数据');
// clearInterval(time)
}
for (const i in ret.ChannelList) {
// if(ret.ChannelList[i].ParentID==node.key){
let arr = {};
arr.Name =
ret.ChannelList[i].Name == ""
? ret.ChannelList[i].ID
: ret.ChannelList[i].Name;
arr.DeviceID = ret.ChannelList[i].DeviceID;
arr.id = ret.ChannelList[i].ID;
arr.ID = ret.ChannelList[i].ID;
arr.online =
ret.ChannelList[i].Status == "ON" &&
ret.ChannelList[i].SubCount == 0
? true
: false;
arr.snapUrl = ret.ChannelList[i].SnapURL;
arr.leaf = ret.ChannelList[i].SubCount == 0;
arr.SubCount = ret.ChannelList[i].SubCount;
arr.Type = 2;
arr.rank = 3;
aa.push(arr);
}
a++
return resolve(aa);
});
}, 100);
但是如上设置会导致分组不能关闭的情况,于是我们又对该行代码进行分析,得知是因为不断往数组里添加空数据导致的,因此再增加一层代码,判断请求为空数据的时候就停止请求。
最终的预览如下: