国标GB28181流媒体服务器支持多分屏操作
最近感觉使用国标协议的开发者有很多，我们国标GB28181流媒体服务器提供流转发服务，负责将GB28181设备/平台推送的PS流转成ES流，然后提供RTSP、RTMP、FLV、HLS多种格式进行分发，实现web浏览器、手机浏览器、微信等各种终端无插件播放。
之前有开发者说我们国标GB28181的流媒体服务器需要查看视频的时候，只能单独查看一路视频，想同时查看多路视频的时候，就不是很方便操作。
原本的界面如下：
我们的研发人员也对这个多分屏的问题进行了研究，在前几天实现了国标GB28181流媒体服务器的多分屏操作（我由衷觉得我的研发部同事们都很厉害啊！），界面如下图：
以下是实现代码，大家可以参考一下：
<template>
<div>
<div class="screen-main">
<el-row>
<el-col :xs="24" :sm="24" :md="24" :lg="4" :xl="4">
<div class="screen-tree" @scroll="scrollEvent">
<span class="screen-tree-title">设备列表</span>
<el-tree
v-loading="loading"
:data="terrData"
node-key="ID"
default-expand-all
:props="{children: 'Children', label: 'Name'}"
>
<span slot-scope="{ node, data }" class="custom-tree-node">
<div :class="['custom-tree-node', {'private-info': !data.Online&&data.Type===1}, {'private-info': data.ChannelCount===0} ]" :title="data.ID" @click="onSelection(data)">
<i :class="['fa', {'private-success': data.Online&&data.Type===1}, { 'fa-video-camera': data.Type===2},{'fa-desktop':data.Type===1} ]" />
{{ data.Name?data.Name:data.ID }}
</div>
</span>
</el-tree>
</div>
</el-col>
<el-col :xs="24" :sm="24" :md="24" :lg="16" :xl="16">
<div style="padding-top: 50px;">
<el-row class="screen-main-player" v-if="isShow">
<el-col :xs="24" :sm="colNum[3]" :md="colNum[2]" :lg="colNum[1]" :xl="colNum[0]" v-for="(item, index) in PlayerData" :key="index" :class="[{'active-shadow': indexType===index}]" >
<div class="screen-main-item" @click.stop="indexType=index">
<SereenPlayer :DeviceID="item.DeviceID" :ID="item.ID" :Index="index" @index="onIndex" :Radio="radio"/>
</div>
</el-col>
</el-row>
</div>
<div class="screen-radio">
<el-radio-group v-model="radio" size="small" @change="getList()">
<el-radio-button :label="item.type" v-for="(item, index) in radioData" :key="index">{{item.name}}</el-radio-button>
<el-radio-button :label="radio"><i class="fa fa-arrows-alt" @click.prevent="fullscreen"></i></el-radio-button>
</el-radio-group>
</div>
</el-col>
</el-row>
</div>
</div>
</template>
<script>
import SereenPlayer from './SereenPlayer'
export default {
components: { SereenPlayer },
data() {
return {
indexType: 0,
terrData: [],
isShow: true,
loading: true,
queryDev: undefined,
DeviceCount: 0,
radio: 4,
PlayerData: [],
PlayerDataName: '',
radioData: [
{ type: 1, name: '单屏' },
{ type: 4, name: '四分屏' },
{ type: 9, name: '九分屏' },
{ type: 16, name: '十六分屏' },
{ type: 36, name: '三十六分屏' },
{ type: 64, name: '六十四分屏' },
]
}
},
computed: {
colNum(){
if (this.radio === 1) {
return [24,24,24,24]
} else if (this.radio === 4) {
return [12,12,12,12]
}else if (this.radio === 9) {
return [8,8,12,12]
}else if (this.radio === 16) {
return [6,6,12,12]
}else if (this.radio === 36) {
return [4,4,12,12]
}else if (this.radio === 64) {
return [3,3,12,12]
}
}
},
created() {
this.getDeviceList()
},
mounted() {
this.getList()
},
methods: {
scrollEvent(e){
if(e.currentTarget.scrollTop+e.currentTarget.clientHeight>=e.currentTarget.scrollHeight){
console.log('t!');
}
},
fullscreen() {
this.$fullscreen.enter(this.$el.querySelector(`.screen-main-player`), {
wrap: false
})
},
onIndex(index) {
this.PlayerData[index].DeviceID = ''
this.PlayerData[index].ID = ''
},
getList() {
this.isShow = false
this.indexType = 0
this.PlayerData = []
for (let index = 0; index < this.radio; index++) {
this.PlayerData.push({
ID: '',
DeviceID: ''
})
}
this.isShow = true
},
onSelection(data) {
if (data.Type===1&&data.Online===false) {
this.$message({
message: '设备已离线!',
type: 'warning'
})
return
}
if (data.Type===2) {
if (this.indexType<this.radio) {
this.PlayerData[this.indexType].DeviceID = data.DeviceID
this.PlayerData[this.indexType].ID = data.ID
if ((this.indexType+1)<this.radio) {
this.indexType++
}
}
return
} else {
if (!data.Online) {
return
}
if (data.Children.length!==0) return
this.getChannels(data.ID, data)
}
},
getDeviceList() {
this.loading = true;
let _this = this;
$.get("/api/v1/device/list", {
q: this.queryDev
})
.then(res => {
_this.DeviceCount = res.DeviceCount
res.DeviceList.forEach(item => {
_this.terrData.push({
Name:item.Name,
ChannelCount:item.ChannelCount,
ID:item.ID,
Online:item.Online,
Children: [],
Type: 1,
Loading: false
})
})
})
.always(() => {
this.loading = false;
})
},
getChannels(ID, data) {
this.loading = true;
let _this = this
$.get("/api/v1/device/info", {
serial: ID
})
.then(res => {
if(res.ChannelCount == 0) {
_this.$message({
message: '设备下无通道!',
type: 'warning'
})
}else {
res.ChannelList.forEach(item => {
data.Children .push({
Name:item.Name,
DeviceID:item.DeviceID,
SnapURL:item.SnapURL,
ID:item.ID,
Online: true,
Children: [],
Type: 2,
Loading: false
})
})
}
this.loading = false;
})
.always(() => {
this.loading = false;
})
}
}
}
</script>
<style lang="less" scoped>
.screen-radio {
padding: 20px 15px;
padding-left: 0;
padding-bottom: 5px;
}
.screen-tree {
padding-right: 30px;
padding-top: 40px;
min-height: e("calc(100vh - 131px)");
max-height: e("calc(100vh - 131px)");
overflow:auto;
.el-tree {
background: transparent;
}
.screen-tree-title {
display: block;
font-size: 16px;
padding-bottom: 5px;
padding-left: 22px;
}
}
.screen-main {
.screen-main-item {
border: 1px solid #ccc;
}
}
.active-shadow{
.screen-main-item {
border: 1px solid red;
}
}
</style>
<style lang="less">
.screen-main {
>.el-row>.el-col {
padding: 0 !important;
}
}
.fullscreen {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
}
.screen-radio .el-radio-button:last-child .el-radio-button__inner{
border-color: #dcdfe6;
border-left: 0px;
box-shadow: none !important;
background-color: #ffffff;
color: #606266;
&:hover {
color: #00a65a;
}
}
</style>
