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.切换一分屏四分屏
|