|
|
@@ -0,0 +1,333 @@
|
|
|
+<template>
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="4">
|
|
|
+ <div class="box">
|
|
|
+ <el-scrollbar>
|
|
|
+ <basic-container>
|
|
|
+ <el-input
|
|
|
+ placeholder="输入关键字进行过滤"
|
|
|
+ v-model="filterText">
|
|
|
+ </el-input>
|
|
|
+ <el-tree ref="tree" class="filter-tree" :props="treeProps" :data="treeData" @node-click="handleNodeClick"
|
|
|
+ lazy :load="treeLoad":filter-node-method="filterNode">
|
|
|
+ <span class="custom-tree-node" slot-scope="{ node, data }">
|
|
|
+ <span>{{ node.label }}</span>
|
|
|
+ <span v-if="node.isLeaf">
|
|
|
+ <el-button
|
|
|
+ type="text"
|
|
|
+ size="mini"
|
|
|
+ @click="() => clickPlay(data)">
|
|
|
+ 播放
|
|
|
+ </el-button>
|
|
|
+ <el-button
|
|
|
+ style="color:red"
|
|
|
+ type="text"
|
|
|
+ size="mini"
|
|
|
+ @click="() => clickStop(node, data)">
|
|
|
+ 停止
|
|
|
+ </el-button>
|
|
|
+ </span>
|
|
|
+ </span>
|
|
|
+ </el-tree>
|
|
|
+ </basic-container>
|
|
|
+ </el-scrollbar>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="20">
|
|
|
+ <basic-container>
|
|
|
+ <div style="margin-bottom: 20px">
|
|
|
+ <el-radio-group v-model="screen" size="mini" @change="screenChange">
|
|
|
+ <el-radio-button :label="4">四屏</el-radio-button>
|
|
|
+ <el-radio-button :label="6">六分屏</el-radio-button>
|
|
|
+ <el-radio-button :label="9">九分屏</el-radio-button>
|
|
|
+ <el-radio-button :label="16">十六分屏</el-radio-button>
|
|
|
+ </el-radio-group>
|
|
|
+ </div>
|
|
|
+ <el-row :gutter="4">
|
|
|
+ <div class="item4" v-for="(item,index) in data4" :key="index" v-if="screen == 4">
|
|
|
+ <div align="center">{{item.name}}</div>
|
|
|
+ <video :id="'videoId' + index" controls="true" width="100%" height="100%">
|
|
|
+ </video>
|
|
|
+ </div>
|
|
|
+ <el-col :span="screenSpan" v-for="(item,index) in screenData" :key="screen + index" v-if="item.display">
|
|
|
+ <player style="position:sticky;overflow: hidden;" :jessibucaId="'jessibucaId' + index" :container="'container' + index" :buttonsBoxId="'buttonsBoxId' + index" :ref="'videoPlayer' + index" :hasaudio="hasaudio" fluent autoplay live ></player>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ </basic-container>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import {getGbChannelLazyTree, startPlay, stopPlay} from "@/api/device/gb/gbdevicechannel";
|
|
|
+ import player from './jessibuca.vue'
|
|
|
+ export default {
|
|
|
+ name: "videowall",
|
|
|
+ components: {player},
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ // itemClass: {
|
|
|
+ // width: '500px',
|
|
|
+ // overflow: 'hidden',
|
|
|
+ // borderRadius: '5px',
|
|
|
+ // margin: '5px',
|
|
|
+ // position: 'sticky'
|
|
|
+ // },
|
|
|
+ screenSpan: 4,
|
|
|
+ screen: 4,
|
|
|
+ screenData:[],
|
|
|
+ playerRef: "4videoPlayer",
|
|
|
+ filterText: '',
|
|
|
+ treeData : [],
|
|
|
+ treeProps:{
|
|
|
+ labelText: '标题',
|
|
|
+ label: 'label',
|
|
|
+ parentLabel: 'parentLabelName',
|
|
|
+ children: 'children',
|
|
|
+ isLeaf: "leaf"
|
|
|
+ },
|
|
|
+ form:{},
|
|
|
+ data4:[],
|
|
|
+ data6:[],
|
|
|
+ data9:[],
|
|
|
+ data16:[],
|
|
|
+ loading:true,
|
|
|
+ data:[],
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ filterText(val) {
|
|
|
+ this.$refs.tree.filter(val);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created(){
|
|
|
+ this.initData();
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+ initData(){
|
|
|
+ for(let i = 0; i < 16; i++){
|
|
|
+ let item = null;
|
|
|
+ if(i <= 3){
|
|
|
+ item = {name:"", isPlay:false, index:i, channelId:null, display:true};
|
|
|
+ }else{
|
|
|
+ item = {name:"", isPlay:false, index:i, channelId:null, display:false};
|
|
|
+ }
|
|
|
+ this.screenData.push(item);
|
|
|
+
|
|
|
+ // if(i <= 3){
|
|
|
+ // this.data4.push(item);
|
|
|
+ // this.data6.push(item);
|
|
|
+ // this.data9.push(item);
|
|
|
+ // this.data16.push(item);
|
|
|
+ // }else if(i > 3 && i <= 5){
|
|
|
+ // this.data6.push(item);
|
|
|
+ // this.data9.push(item);
|
|
|
+ // this.data16.push(item);
|
|
|
+ // }else if(i > 5 && i <= 8){
|
|
|
+ // this.data9.push(item);
|
|
|
+ // this.data16.push(item);
|
|
|
+ // }else if(i > 8 && i <= 15){
|
|
|
+ // this.data16.push(item);
|
|
|
+ // }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ screenChange(value){
|
|
|
+ if(value === 4){
|
|
|
+ this.screenSpan = 12;
|
|
|
+ for(let i=0; i<16; i++){
|
|
|
+ if(i < 4){
|
|
|
+ this.screenData[i].display = true;
|
|
|
+ }else{
|
|
|
+ this.screenData[i].display = false;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }else if(value === 6){
|
|
|
+ this.screenSpan = 8;
|
|
|
+ for(let i=4; i<16; i++){
|
|
|
+ if(i < 6){
|
|
|
+ this.screenData[i].display = true;
|
|
|
+ }else{
|
|
|
+ this.screenData[i].display = false;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }else if(value === 9){
|
|
|
+ this.screenSpan = 8;
|
|
|
+ for(let i=6; i<9; i++){
|
|
|
+ if(i < 9){
|
|
|
+ this.screenData[i].display = true;
|
|
|
+ }else{
|
|
|
+ this.screenData[i].display = false;
|
|
|
+ }
|
|
|
+ this.screenData[i].display = true;
|
|
|
+ }
|
|
|
+ }else if(value === 16){
|
|
|
+ this.screenSpan = 6;
|
|
|
+ for(let i=4; i<16; i++){
|
|
|
+ this.screenData[i].display = true;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ treeLoad(node, resolve){
|
|
|
+ const parentId = (node.level === 0) ? null : node.data.id;
|
|
|
+ let parentColumn = null;
|
|
|
+ const tenantId = localStorage.getItem("tenantId");
|
|
|
+ if(tenantId === "000000"){
|
|
|
+ if(node.level === 0){
|
|
|
+ parentColumn = "0";
|
|
|
+ }else if(node.level === 1){
|
|
|
+ parentColumn = "agency";
|
|
|
+ }else if(node.level === 2){
|
|
|
+ parentColumn = "residential";
|
|
|
+ }else if(node.level === 3){
|
|
|
+ parentColumn = "building";
|
|
|
+ }else if(node.level === 4){
|
|
|
+ parentColumn = "floor";
|
|
|
+ }else{
|
|
|
+ parentColumn = null;
|
|
|
+ }
|
|
|
+ }else{
|
|
|
+ if(node.level === 0){
|
|
|
+ parentColumn = "0";
|
|
|
+ }else if(node.level === 1){
|
|
|
+ parentColumn = "residential";
|
|
|
+ }else if(node.level === 2){
|
|
|
+ parentColumn = "building";
|
|
|
+ }else if(node.level === 3){
|
|
|
+ parentColumn = "floor";
|
|
|
+ }else{
|
|
|
+ parentColumn = null;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ getGbChannelLazyTree(parentColumn, parentId).then(res => {
|
|
|
+ resolve(res.data.data.map(item => {
|
|
|
+ return {
|
|
|
+ ...item,
|
|
|
+ leaf: !item.hasChildren
|
|
|
+ }
|
|
|
+ }))
|
|
|
+ });
|
|
|
+ },
|
|
|
+ filterNode(value, data) {
|
|
|
+ if (!value) return true;
|
|
|
+ return data.label.indexOf(value) !== -1;
|
|
|
+ },
|
|
|
+ handleNodeClick(node, resolve){},
|
|
|
+ clickPlay(data){
|
|
|
+ this.$message.success("开始调取视频");
|
|
|
+ //找到第一个没有播放的屏幕
|
|
|
+ let emptyIndex = this.screenData.findIndex((item) => item.isPlay == false);
|
|
|
+ if(emptyIndex >= 0){ //表示找到
|
|
|
+ this.playVideo(data, emptyIndex);
|
|
|
+ this.screenData[emptyIndex].isPlay = true;
|
|
|
+ this.screenData[emptyIndex].channelId = data.channelId;
|
|
|
+ return false;
|
|
|
+ }else{
|
|
|
+ this.playVideo(data, 0);
|
|
|
+ this.screenData[0].isPlay = true;
|
|
|
+ this.screenData[0].channelId = data.channelId;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ playVideo(treeItem, index){
|
|
|
+ let deviceId = treeItem.deviceId;
|
|
|
+ let channelId = treeItem.channelId;
|
|
|
+ console.log(this.$refs[this.playerRef + index]);
|
|
|
+ startPlay(deviceId, channelId).then(res => {
|
|
|
+ if (res.data.data) {
|
|
|
+ let streamInfo = res.data.data;
|
|
|
+ this.$refs[this.playerRef + index][0].play(streamInfo.ws_flv);
|
|
|
+ // try {
|
|
|
+ // let videoElement = document.getElementById("videoId" + index);
|
|
|
+ // let flvPlayer = flvjs.createPlayer({
|
|
|
+ // type: 'flv',
|
|
|
+ // url: streamInfo.ws_flv
|
|
|
+ // });
|
|
|
+ // flvPlayer.on(flvjs.Events.ERROR, (errType, errDetail) => {});
|
|
|
+ // flvPlayer.on(flvjs.Events.MEDIA_SOURCE_CLOSE || flvjs.Events.MEDIA_SOURCE_ENDED, () => {});
|
|
|
+ // flvPlayer.attachMediaElement(videoElement);
|
|
|
+ // flvPlayer.load();
|
|
|
+ // flvPlayer.play();
|
|
|
+ // treeItem.isPlay = true;
|
|
|
+ // } catch (e) {
|
|
|
+ // console.log(e);
|
|
|
+ // }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ clickStop(node, treeItem){
|
|
|
+ this.$message.warning("正在停止");
|
|
|
+ let screenData = null;
|
|
|
+ let deviceId = treeItem.deviceId;
|
|
|
+ let channelId = treeItem.channelId;
|
|
|
+ let channelVideoIndex = this.screenData.findIndex((item,index) => {return item.channelId == treeItem.channelId});
|
|
|
+ this.$refs[this.playerRef + channelVideoIndex][0].pause();
|
|
|
+ // stopPlay(deviceId, channelId).then(res => {
|
|
|
+ // this.$message.success("停止成功");
|
|
|
+ // this.screenData[channelVideoIndex].isPlay = false;
|
|
|
+ // this.screenData[channelVideoIndex].channelId = null;
|
|
|
+ // });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less">
|
|
|
+ .box {
|
|
|
+ height: 800px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-scrollbar {
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .box .el-scrollbar__wrap {
|
|
|
+ overflow: scroll;
|
|
|
+ }
|
|
|
+ #videoSurveillance {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ .item4 {
|
|
|
+ width: calc(~"49%");
|
|
|
+ overflow: hidden;
|
|
|
+ border-radius: 5px;
|
|
|
+ margin: 5px;
|
|
|
+ position: sticky;
|
|
|
+ }
|
|
|
+
|
|
|
+ .item6 {
|
|
|
+ width: calc(~"32%");
|
|
|
+ overflow: hidden;
|
|
|
+ border-radius: 5px;
|
|
|
+ margin: 5px;
|
|
|
+ position: sticky;
|
|
|
+ }
|
|
|
+
|
|
|
+ .item9 {
|
|
|
+ width: calc(~"32%");
|
|
|
+ overflow: hidden;
|
|
|
+ border-radius: 5px;
|
|
|
+ margin: 5px;
|
|
|
+ position: sticky;
|
|
|
+ }
|
|
|
+
|
|
|
+ .item16 {
|
|
|
+ width: calc(~"24%");
|
|
|
+ overflow: hidden;
|
|
|
+ border-radius: 5px;
|
|
|
+ margin: 5px;
|
|
|
+ position: sticky;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .custom-tree-node {
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ font-size: 14px;
|
|
|
+ padding-right: 8px;
|
|
|
+ }
|
|
|
+</style>
|
