<template>
<div class="video-play-container">
<div class="video-tree-box">
<p>实时视频播放</p>
<div class="tree-select-content">
<el-input v-model="searchValue" suffix-icon="el-icon-search"></el-input>
<div class="tree-select">
<el-tree ref="videoTree" node-key="name" show-checkbox :data="treeData" :props="defaultProps" default-expand-all
:filter-node-method="filterNode"
@check='checkHandle'>
<span class="custom-tree-node" slot-scope="{ node, data }">
<span v-if="!data.parent">
<i class="el-icon-price-tag" :class="data.isOnline ? 'online-icon' : 'offline-icon'"></i>
<span>{{ node.label }}</span>
</span>
<span v-else>
{{ data.name + "(" + data.onlineNum + "/" + data.totalNum + ")" }}
</span>
</span>
</el-tree>
</div>
</div>
<div class="tree-query">
<!-- <el-date-picker
v-model="startTime"
type="datetime"
placeholder="开始日期">
</el-date-picker>
<el-date-picker
v-model="endTime"
type="datetime"
style="margin-top: 10px;"
placeholder="结束日期">
</el-date-picker> -->
<el-button type="primary" class="custom-query" @click="query">
播放
</el-button>
<el-button>已选：{{ selectNums }} / 4</el-button>
</div>
</div>
<div class="video-play-box">
<div class="change-video-number">
<span class="single" :class="{ 'active': currentNum == index }" v-for="(item, index) in screenNum" :key="index"
@click="changeNum(item, index)">
{{ item.name }}
</span>
</div>
<div class="video-container">
<div class="no-play-box" v-for="(item, i) in playCount" :key="i" :class="{ 'more': playCount > 1 }">
<img src="../../img/video_bg.png" class="play-icon" v-show="!(videoUrlArr[i] && videoUrlArr[i].url)" />
<video v-if="videoUrlArr[i] && videoUrlArr[i].url" :id="videoUrlArr[i].deviceCode + i" controls="controls"
controlslist="nodownload" disablePictureInPicture muted preload="auto"
style="width: 100%;height: 100%; object-fit: fill">
</video>
<i v-show="videoUrlArr[i] && videoUrlArr[i].url" class="el-icon-close custom-close"
@click="closeVideoPlay(i)"></i>
<!-- <span class="custom-cover" v-show="videoUrlArr[i] && videoUrlArr[i].url">
<i class="el-icon-download custom-download" @click="startDownload(videoUrlArr[i])"></i>
</span> -->
</div>
</div>
</div>
<!-- <div class="download-dialog" v-if="showDownloadDialog">
<i class="el-icon-close download-close" @click="closeDialog"></i>
<el-date-picker
v-model="downloadTime1"
value-format="yyyy-MM-dd HH:mm:ss"
type="datetime"
placeholder="开始时间">
</el-date-picker>
<el-date-picker
v-model="downloadTime2"
value-format="yyyy-MM-dd HH:mm:ss"
type="datetime"
style="margin-top: 10px;"
placeholder="结束时间">
</el-date-picker>
<el-button type="primary" style="margin: 10px 0;" @click="downloadVideo">下载</el-button>
<p style="color: #ff4f4f;">下载视频请选择1小时内的时间区间</p>
</div> -->
</div>
</template>
<script>
import Hls from 'hls.js'
import { getTreeData } from "./api/index.js"
export default {
name: "videoPlay",
data() {
return {
searchValue: "",
treeData: [//todo
// { id: 1,
// parentId: 0,
// name: "父节点1",
// parent: true,
// onlineNum: 1,
// totalNum: 4,
// children: [
// { id: 2, parentId: 1, name: "子节点1", deviceCode: "1000022", channelSeq: 0, },
// { id: 3, parentId: 1, name: "子节点2", deviceCode: "1000035", channelSeq: 0, }
// ]
// },
// {
// id: 15,
// parentId: 0,
// name: "父节点2",
// parent: true,
// onlineNum: 1,
// totalNum: 4,
// children: [
// { id: 4, parentId: 15, name: "子节点1", deviceCode: "1000013", channelSeq: 2, },
// { id: 5, parentId: 15, name: "子节点2", deviceCode: "1000013", channelSeq: 3, },
// { id: 6, parentId: 15, name: "子节点3", deviceCode: "1000013", channelSeq: 6, },
// { id: 7, parentId: 15, name: "子节点4", deviceCode: "1000013", channelSeq: 7, }
// ]
// }
],
defaultProps: {
children: 'encoderChnList',
label: 'name'
},
startTime: "",
endTime: "",
screenNum: [
{
name: "单屏",
value: 1
},
{
name: "四分屏",
value: 4
}
],
currentNum: 0,
playCount: 1,
videoUrlArr: [],
hls: [],
showDownloadDialog: false,
downloadTime1: "",
downloadTime2: "",
currentDownload: {},
selectChildNodes: 0,
changeVideoUrlArr :[]
}
},
computed: {
selectNums() {
return this.selectChildNodes
}
},
watch: {
searchValue(val) {
this.$refs.videoTree.filter(val)
}
},
mounted() {
this.startTime = moment().format('yyyy-MM-DD') + " 00:00:00"
this.endTime = moment().format('yyyy-MM-DD HH:mm:ss')
this.getTreeData()
},
methods: {
checkHandle(checkedNodes,checkedKeys,halfCheckedNodes,halfCheckedKeys){
// console.log("**已勾选checkedKeys**",checkedKeys.checkedNodes)
var arr = checkedKeys.checkedNodes.filter(item => !item.parent)
this.selectChildNodes = arr && arr.length
if (arr.length > 4) {
this.$message.error("勾选的节点不能超出4个,请重新选择！")
return
}
},
filterNode(value, data) {
console.log(value, data)
if (!value) return true
return data.name.indexOf(value) !== -1
},
closeDialog() {
this.downloadTime1 = ""
this.downloadTime2 = ""
this.showDownloadDialog = false
},
getTreeData() {
getTreeData().then(res => {
if (res.data.code == 200) {
this.treeData = res.data.data
this.treeData.forEach(item => {
item.name = item.deviceName
item.encoderChnList.forEach(r => {
r.name = r.channelName
})
})
console.log('树-data', this.treeData)
}
}).catch(err => {
// todo
this.treeData = [{
"deviceCode": "1000007",
"deviceName": "一卡通录像机(海康)",
"onlineNum": 16,
"totalNum": 16,
"encoderChnList": [
{
"id": 1524,
"deviceCode": "1000035",
"unitSeq": 0,
"channelSeq": 0,
"channelSn": "150034",
"channelName": "出厂磅出口KHDF后端包回放电话费贵的",
"channelType": "1",
"cameraType": "1",
"cameraFunctions": 0,
"gpsX": null,
"gpsY": null,
"mapId": null,
"domainId": null,
"memo": "",
"stat": 1,
"multicastIp": "",
"multicastPort": null,
"ipcIp": "",
"deviceName": "一卡通录像机(海康)",
"isOnline": 1,
"channelCode": "1000007$1$0$0",
"parent": false
},
{
"id": 1526,
"deviceCode": "1000022",
"unitSeq": 0,
"channelSeq": 1,
"channelSn": "150035",
"channelName": "进厂磅入口",
"channelType": "1",
"cameraType": "1",
"cameraFunctions": 0,
"gpsX": null,
"gpsY": null,
"mapId": null,
"domainId": null,
"memo": "",
"stat": 1,
"multicastIp": "",
"multicastPort": null,
"ipcIp": "",
"deviceName": "一卡通录像机(海康)",
"isOnline": 1,
"channelCode": "1000007$1$0$1",
"parent": false
},
],
"parent": true
}]
this.treeData.forEach(item => {
item.name = item.deviceName
item.encoderChnList.forEach(r => {
r.name = r.channelName
})
})
console.log('树-err',err)
})
},
},
beforeDestroy() {
for (let i = 0
this.hls[i].destroy()
}
}
}
</script>
