methods: {
onResize(w, h) {
this.width = w
this.height = h
},
/**
* 点击事件处理
*/
clickMe() {
console.log('click')
},
//播放视频
playVideo(url, id) {
let video = document.getElementById(id)
this.hls[id] = new Hls()
this.hls[id].loadSource(url)
this.hls[id].attachMedia(video)
this.hls[id].on(Hls.Events.MANIFEST_PARSED, () => {
video.play()
})
this.hls[id].on(Hls.Events.ERROR, (event, data) => {
// 监听出错事件
console.log("加载失败", event, data)
})
},
treeSetting() {
let self = this
let commonAutoParam = ["id=id", "checkStat"]
let commonOtherParam = {
showEmptyOrgNode: 0,
type: '001
}
return {
async:{
enable: true,
type: 'post',
contentType: "application/json",
url: function (treeId, treeNode) {
const subSystem = 'evo-brm'
const realVersion = localStorage[subSystem]
? localStorage[subSystem]
: ""
// 树URL地址
return "/evo-apigw/evo-brm/" + realVersion + "/tree"
},
otherParam: commonOtherParam,
autoParam: commonAutoParam,
dataFilter: (treeId, parentNode, res) => {
let responseData = []
if (res.code === "0") {
// const { parentId } = params.otherParam
// _this.treeObj.setting.async.otherParam = { rType: params.otherParam.rType }
// var arr = this.generateList(_this.treeObj.transformTozTreeNodes(res.data.value.slice(0)))
responseData = res.data.value
}
return responseData
},
},
check:{
enable: true,
},
data: {
simpleData: {
enable: true,
idKey: "id",
pIdKey: "pId",
rootPId: null
}
},
view: {
dblClickExpand: false,
showLine: false,
showIcon: true
},
callback:{
onCheck: function(event, treeId, treeNode){
let noUrlArr = self.videoList.filter(item => item.url == "")
let channelSeq = 0
let host = window.location.host.split(":")[0]
let url = "https://" + host + ':7096/live/cameraid/' + treeNode.deviceCode + "%24" + channelSeq + "/substream/1.m3u8?" + "token="+ localStorage.getItem("accessToken")
console.log(noUrlArr)
if(treeNode.checked) {
if(self.videoList.length < 4) {
self.videoList.push(
{
url: url,
id: treeNode.id
}
)
} else if(self.videoList.length == 4 && noUrlArr.length) {
for(let j =0
if(self.videoList[j].url == "") {
self.videoList[j].url = url
self.videoList[j].id = treeNode.id
break
}
}
}
self.$nextTick(() => {
self.playVideo(url, treeNode.id)
})
}else if(!treeNode.checked) {
let index = self.videoList.findIndex(item => item.id == treeNode.id)
// self.videoList.splice(index, 1)
self.videoList[index].url = ""
// self.videoList = self.videoList.filter(item => item.id != treeNode.id)
// self.videoList.forEach((item, index) => {
// self.playVideo(item.url, index)
// })
}
},
beforeCheck: function(treeId, treeNode) {
let noUrlArr = self.videoList.filter(item => item.url == "")
if(self.videoList.length == 4 && !noUrlArr.length) {
self.$message.error("最多支持4路视频播放！")
return false
}
}
}
}
},
initTree() {
let setting = this.treeSetting()
let params = {
checkStat: 1,
showEmptyOrgNode: 0,
type: '001
}
api.getVideoTreeData(params).then(res => {
this.zNodes = res.data.value
this.zNodes.forEach(item => {
if(item.nodeType != 'dev') {
item.nocheck = true
}
})
let myTree = $.fn.zTree.init($("#videoMonitorBox"), setting, this.zNodes)
this.allTreeNodes = $.fn.zTree.getZTreeObj("videoMonitorBox")
let rootnodes = this.allTreeNodes.getNodes()
// this.allTreeNodes.expandNode(rootnodes[0], true, false, false, true)
})
},
closeVideoPlay(item, i) {
item.url = ""
this.hls[item.id].destroy()
let zTree = $.fn.zTree.getZTreeObj("videoMonitorBox")
var node = zTree.getNodeByParam("id", item.id )
node && zTree.checkNode(node, false, true, false)
},
transTree(oldArr) {
const newArr = []
const obj = {}
oldArr.forEach(item => {
obj[item.id] = item
obj[item.id].children = []
})
oldArr.forEach(item => {
if(obj[item.pId]){
obj[item.pId].children.push(item)
}else {
newArr.push(item)
}
})
return newArr
}
},
//样式
<style scoped lang="less">
.dvm-doc-user852-video-monitor {
width: 100%;
height: 100%;
display: flex;
text-align: left;
padding: 0 20px;
/deep/ .ztree li span {
color: #fff;
}
.video-tree-box {
width: 380px;
height: 100%;
background: url("./img/video-tree-bg.png") no-repeat 100% 100%;
background-size: 100% 100%;
margin-right: 20px;
overflow: auto;
.tree-title {
width: 100%;
height: 26px;
line-height: 26px;
padding-left: 20px;
color: #fff;
}
.tree-content {
padding: 20px;
/deep/ .ant-input, .ant-input-search {
background: transparent;
border: 1px solid #035991;
border-radius: 10px;
}
.tree-select-box {
width: 100%;
height: calc(100% - 50px);
overflow: auto;
}
/deep/ .ant-tree li .ant-tree-node-content-wrapper {
color: #fff;
}
/deep/ .ant-tree li span.ant-tree-switcher {
color: #fff;
}
}
}
.video-play-container {
flex: 1;
height: 100%;
background: url("./img/video-container-bg.png") no-repeat 100% 100%;
background-size: 100% 100%;
display: flex;
flex-wrap: wrap;
padding: 26px 15px 10px 15px;
justify-content: space-between;
.video-play-item {
width: 49%;
height: 49%;
display: flex;
justify-content: center;
align-items: center;
position: relative;
margin-top: 10px;
border-radius: 10px;
border: 1px solid #3b80db;
position: relative;
.play-icon {
width: 130px;
height: 84px;
}
.close-video {
position: absolute;
top: 0px;
right: 10px;
color: #fff;
font-size: 24px;
cursor: pointer;
}
}
}
}
</style>
