119 lines
3.7 KiB
JavaScript
119 lines
3.7 KiB
JavaScript
|
||
// 设置文档结构
|
||
ZQL_multivideo.setVideoEl();
|
||
// 设置事件监听
|
||
// document.querySelector("#icon-oneviveo").addEventListener('click', () => {
|
||
// playingSource.videoNum = 1;
|
||
// setVideoEl();
|
||
// })
|
||
// document.querySelector("#icon-fourviveo").addEventListener('click', () => {
|
||
// playingSource.videoNum = 4;
|
||
// ZQL_multivideo.setVideoEl();
|
||
// })
|
||
|
||
ZQL_apis.gettoken().then(res => {
|
||
if(res.error_code == 0){
|
||
ZQLGLOBAL.token = res.data;
|
||
init();
|
||
}
|
||
})
|
||
|
||
// 1. 获取设备列表，摄像头列表，组成树形结构
|
||
function init() {
|
||
Promise.all([ZQL_apis.getDevices(), ZQL_apis.getSources()]).then(res => {
|
||
let devices = res[0].data;
|
||
for (let deviceId in res[1].data) {
|
||
for (let sourceId in res[1].data[deviceId]) {
|
||
res[1].data[deviceId][sourceId].sourceId = sourceId
|
||
res[1].data[deviceId][sourceId].deviceId = deviceId
|
||
}
|
||
}
|
||
for (let i = 0; i < devices.length; i++) {
|
||
devices[i].deviceId = devices[i].id;
|
||
devices[i].title = devices[i].name;
|
||
devices[i].type = 'device';
|
||
if (res[1].data[devices[i].id]) {
|
||
devices[i].children = Object.values(res[1].data[devices[i].id]).map(item => {
|
||
item.id = devices[i].deviceId + '_' + item.sourceId;
|
||
item.title = item.desc;
|
||
item.type = 'source';
|
||
item.checked = false;
|
||
ZQL_sources[devices[i].deviceId + '_' + item.sourceId] = item
|
||
return item
|
||
})
|
||
} else {
|
||
// 没有摄像头的设备不显示
|
||
devices.splice(i, 1)
|
||
i = i - 1
|
||
}
|
||
}
|
||
layui.use(function () {
|
||
var tree = layui.tree;
|
||
var layer = layui.layer;
|
||
tree.render({
|
||
elem: '#ZQL_source_tree',
|
||
data: devices,
|
||
// showCheckbox:true,
|
||
onlyIconControl: true, // 是否仅允许节点左侧图标控制展开收缩
|
||
click: function (obj) {
|
||
if (obj.data.sourceId) {
|
||
let key = obj.data.deviceId + '_' + obj.data.sourceId;
|
||
if (ZQL_sources[key].checked == false) {
|
||
ZQL_sources[key].checked = true
|
||
if (ZQL_playingSource.videoNum == 1) {
|
||
ZQL_playingSource[0] = key;
|
||
ZQL_multivideo.subscribeLive(key, 0);
|
||
ZQL_multivideo.setAlgList(0);
|
||
} else {
|
||
for (let i = 0; i < 4; i++) {
|
||
if (!ZQL_playingSource[i]) {
|
||
ZQL_playingSource[i] = key;
|
||
ZQL_multivideo.subscribeLive(key, i);
|
||
ZQL_multivideo.setAlgList(i)
|
||
break;
|
||
}
|
||
}
|
||
}
|
||
} else {
|
||
ZQL_sources[key].checked = false
|
||
if (ZQL_playingSource.videoNum == 1) {
|
||
ZQL_playingSource[0] = null;
|
||
ZQL_multivideo.destoryVideoByIndex(0);
|
||
ZQL_multivideo.clearAlgList(0);
|
||
ZQL_multivideo.liveStopLoading(0);
|
||
} else {
|
||
for (let i = 0; i < 4; i++) {
|
||
if (ZQL_playingSource[i] == key) {
|
||
ZQL_playingSource[i] = null;
|
||
ZQL_multivideo.destoryVideoByIndex(i);
|
||
ZQL_multivideo.clearAlgList(i)
|
||
ZQL_multivideo.liveStopLoading(i);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
});
|
||
});
|
||
}).catch(err => {
|
||
console.log(err)
|
||
})
|
||
// 获取系统参数，检测srs、连接mqtt
|
||
ZQL_apis.sysArgs().then(res => {
|
||
if (res.error_code == 0) {
|
||
let map = res.data.map;
|
||
ZQLGLOBAL = Object.assign(ZQLGLOBAL, map)
|
||
}
|
||
ZQL_multivideo.detectSrs();
|
||
ZQL_multivideo.connectMqtt()
|
||
}).catch(err => { })
|
||
}
|
||
|
||
|
||
|
||
//遗留
|
||
// 1.刷新
|
||
// 2.保存已选择的摄像头，
|
||
// 3.切换一分屏四分屏
|