aunix/wvp-GB28181-pro
1
0
Fork 0
mirror of https://gitee.com/pan648540858/wvp-GB28181-pro.git synced 2026-05-23 05:37:48 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

优化分屏播放效果

Browse Source
This commit is contained in:
lin 2026-05-21 17:41:34 +08:00
parent ee56e1d42e
commit fd64ab75be
5 changed files with 45 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
web/src/views/common/DeviceTree.vue
View File

@ -22,6 +22,7 @@
:show-position="showPosition"
:has-channel="true"
:contextmenu="contextmenu"
:tree-height="treeHeight"
@clickEvent="treeNodeClickEvent"
:default-expanded-keys="[]"
/>
@ -33,6 +34,7 @@
:show-position="showPosition"
:has-channel="true"
:contextmenu="contextmenu"
:tree-height="treeHeight"
@clickEvent="treeNodeClickEvent"
:default-expanded-keys="[]"
/>
@ -73,6 +75,7 @@ export default {
data() {
return {
showRegion: false,
treeHeight: null,
defaultProps: {
children: 'children',
label: 'name',
@ -111,6 +114,7 @@ export default {
// Calculate available height for tree
const availableHeight = containerHeight - headerHeight - 30 // 30px for padding
this.treeHeight = availableHeight
// Set the tree content height
const treeContent = this.$el.querySelector('.tree-content')

23
web/src/views/common/GroupTree.vue
View File

@ -1,6 +1,6 @@
<template>
<div id="groupTree" style="border-right: 1px solid #EBEEF5; height: 100%">
<div style="padding: 0 20px 0 10px;">
<div id="groupTree" style="border-right: 1px solid #EBEEF5; height: 100%; display: flex; flex-direction: column;">
<div style="padding: 0 20px 0 10px; flex-shrink: 0;">
<el-input size="small" v-model="searchStr" @input="searchChange" suffix-icon="el-icon-search" placeholder="请输入搜索内容" clearable>
<!-- <el-select v-model="searchType" slot="prepend" placeholder="搜索类型" style="width: 80px">-->
<!-- <el-option label="目录" :value="0"></el-option>-->
@ -8,7 +8,7 @@
<!-- </el-select>-->
</el-input>
</div>
<div v-if="!searchStr">
<div v-if="!searchStr" style="flex: 1; min-height: 0;">
<el-alert
v-if="showAlert && edit"
title="操作提示"
@ -24,7 +24,7 @@
ref="veTree"
class="flow-tree"
node-key="treeId"
:height="treeHeight?treeHeight:'78vh'"
:height="'100%'"
lazy
:load="loadNode"
:data="treeData"
@ -70,7 +70,7 @@
</template>
</vue-easy-tree>
</div>
<div v-if="searchStr" style="color: #606266; height: calc(100% - 32px); overflow: auto !important;">
<div v-if="searchStr" style="color: #606266; flex: 1; min-height: 0; overflow: auto;">
<ul v-if="groupList.length > 0" style="list-style: none; margin: 0; padding: 10px">
<li v-for="item in groupList" :key="item.id" class="channel-list-li" style="height: 26px; align-items: center;cursor: pointer;" @click="listClickHandler(item)" >
<span
@ -234,10 +234,10 @@ export default {
isLeaf: true,
leaf: true,
type: 100,
nextData: data.splice(this.treeLimit, data.length)
nextData: data
})
resolve(subData)
}else {
} else {
resolve(data)
}
@ -486,16 +486,11 @@ export default {
}, id)
},
nodeClickHandler: function(data, node, tree) {
console.log(data)
console.log(data.nextData.length)
console.log(this.treeLimit)
if (data && data.nextData && data.nextData.length > 0) {
const parentNode = node.parent
let nextData = data.nextData
if (nextData.length > this.treeLimit) {
let subData = nextData.splice(0, this.treeLimit)
console.log(subData)
subData.push({
treeId: '---',
deviceId: '---',
@ -503,7 +498,7 @@ export default {
isLeaf: true,
leaf: true,
type: 100,
nextData: nextData.splice(this.treeLimit, nextData.length)
nextData: nextData
})
this.$refs.veTree.remove(data, parentNode)
for (let item of subData) {
@ -515,7 +510,7 @@ export default {
this.$refs.veTree.append(item, parentNode)
}
}
}else {
} else {
this.chooseId = data.deviceId
this.$emit('clickEvent', data)
}

20
web/src/views/common/RegionTree.vue
View File

@ -1,6 +1,6 @@
<template>
<div id="regionTree" style="border-right: 1px solid #EBEEF5; height: 100%">
<div style="padding: 0 20px 0 10px;">
<div id="regionTree" style="border-right: 1px solid #EBEEF5; height: 100%; display: flex; flex-direction: column;">
<div style="padding: 0 20px 0 10px; flex-shrink: 0;">
<el-input size="small" v-model="searchStr" @input="searchChange" suffix-icon="el-icon-search" placeholder="请输入搜索内容" clearable>
<!-- <el-select v-model="searchType" slot="prepend" placeholder="搜索类型" style="width: 80px">-->
<!-- <el-option label="目录" :value="0"></el-option>-->
@ -8,7 +8,7 @@
<!-- </el-select>-->
</el-input>
</div>
<div v-if="!searchStr">
<div v-if="!searchStr" style="flex: 1; min-height: 0;">
<el-alert
v-if="showAlert && edit"
title="操作提示"
@ -24,7 +24,7 @@
ref="veTree"
class="flow-tree"
node-key="treeId"
:height="treeHeight?treeHeight:'78vh'"
:height="'100%'"
lazy
:load="loadNode"
:data="treeData"
@ -65,7 +65,7 @@
</template>
</vue-easy-tree>
</div>
<div v-if="searchStr" style="color: #606266; height: calc(100% - 32px); overflow: auto !important;">
<div v-if="searchStr" style="color: #606266; flex: 1; min-height: 0; overflow: auto;">
<ul v-if="regionList.length > 0" style="list-style: none; margin: 0; padding: 10px">
<li v-for="item in regionList" :key="item.id" class="channel-list-li" style="height: 26px; align-items: center;cursor: pointer;" @click="listClickHandler(item)">
<span
@ -231,10 +231,10 @@ export default {
leaf: true,
type: 100,
children: [],
nextData: data.splice(this.treeLimit, data.length)
nextData: data
})
resolve(subData)
}else {
} else {
resolve(data)
}
@ -464,7 +464,6 @@ export default {
}, node.data)
},
nodeClickHandler: function(data, node, tree) {
if (data && data.nextData && data.nextData.length > 0) {
const parentNode = node.parent
let nextData = data.nextData
@ -478,20 +477,19 @@ export default {
leaf: true,
type: 100,
children: [],
nextData: nextData.splice(this.treeLimit, nextData.length)
nextData: nextData
})
this.$refs.veTree.remove(data, parentNode)
for (let item of subData) {
this.$refs.veTree.append(item, parentNode)
}
} else {
this.$refs.veTree.remove(data, parentNode)
for (let item of nextData) {
this.$refs.veTree.append(item, parentNode)
}
}
}else {
} else {
this.chooseId = data.deviceId
this.$emit('clickEvent', data)
}

28
web/src/views/common/jessibuca.vue
View File

@ -4,7 +4,7 @@
style="width:100%; height: 100%; background-color: #000000;margin:0 auto;position: relative;"
@dblclick="fullscreenSwich"
>
<div id="buttonsBox" class="buttons-box" v-if="showButton">
<div id="buttonsBox" class="buttons-box" v-if="showButton === undefined || showButton">
<div class="buttons-box-left">
<i v-if="!playing" class="iconfont icon-play jessibuca-btn" @click="playBtnClick" />
<i v-if="playing" class="iconfont icon-pause jessibuca-btn" @click="pause" />
@ -61,7 +61,25 @@ export default {
}
this.btnDom = document.getElementById('buttonsBox')
},
mounted() {},
mounted() {
if (this.videoUrl) {
this.$nextTick(() => {
this.play(this.videoUrl)
})
}
},
watch: {
videoUrl: {
handler(newVal) {
if (newVal) {
this.$nextTick(() => {
this.play(newVal)
})
}
},
immediate: false
}
},
destroyed() {
if (jessibucaPlayer[this._uid]) {
jessibucaPlayer[this._uid].videoPTS = 0
@ -204,13 +222,11 @@ export default {
if (!jessibucaPlayer[this._uid]) {
this.create()
}
jessibucaPlayer[this._uid].play(url)
if (jessibucaPlayer[this._uid].hasLoaded()) {
// jessibucaPlayer[this._uid].play(url)
jessibucaPlayer[this._uid].play(url)
} else {
jessibucaPlayer[this._uid].on('load', () => {
// jessibucaPlayer[this._uid].play(url)
jessibucaPlayer[this._uid].play(url)
})
}

1
web/src/views/live/index.vue
View File

@ -37,6 +37,7 @@
:video-url="videoUrl[i-1]"
fluent
autoplay
:show-button="true"
@screenshot="shot"
@destroy="destroy"
/>