Merge branch 'master' into 重构/1078
This commit is contained in:
lin
@@ -1,8 +1,8 @@
|
||||
<template>
|
||||
<div id="DeviceTree" style="width: 100%;height: 100%; background-color: #FFFFFF; overflow: auto; padding: 30px">
|
||||
<div style="height: 30px; display: grid; grid-template-columns: auto auto">
|
||||
<div>通道列表</div>
|
||||
<div>
|
||||
<div id="DeviceTree" class="device-tree-container">
|
||||
<div class="device-tree-header">
|
||||
<div class="header-title">通道列表</div>
|
||||
<div class="header-switch">
|
||||
<el-switch
|
||||
v-model="showRegion"
|
||||
active-color="#13ce66"
|
||||
@@ -12,9 +12,27 @@
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<RegionTree v-if="showRegion" ref="regionTree" :edit="false" :show-header="false" :has-channel="true" :click-event="treeNodeClickEvent" />
|
||||
<GroupTree v-if="!showRegion" ref="groupTree" :edit="false" :show-header="false" :has-channel="true" :click-event="treeNodeClickEvent" />
|
||||
<div class="tree-content">
|
||||
<div class="tree-wrapper">
|
||||
<RegionTree
|
||||
v-if="showRegion"
|
||||
ref="regionTree"
|
||||
:edit="false"
|
||||
:show-header="false"
|
||||
:has-channel="true"
|
||||
:click-event="treeNodeClickEvent"
|
||||
:default-expanded-keys="[]"
|
||||
/>
|
||||
<GroupTree
|
||||
v-if="!showRegion"
|
||||
ref="groupTree"
|
||||
:edit="false"
|
||||
:show-header="false"
|
||||
:has-channel="true"
|
||||
:click-event="treeNodeClickEvent"
|
||||
:default-expanded-keys="[]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -26,7 +44,24 @@ import GroupTree from './GroupTree.vue'
|
||||
export default {
|
||||
name: 'DeviceTree',
|
||||
components: { GroupTree, RegionTree },
|
||||
props: ['device', 'onlyCatalog', 'clickEvent', 'contextMenuEvent'],
|
||||
props: {
|
||||
device: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
},
|
||||
onlyCatalog: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
clickEvent: {
|
||||
type: Function,
|
||||
default: null
|
||||
},
|
||||
contextMenuEvent: {
|
||||
type: Function,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showRegion: true,
|
||||
@@ -37,15 +72,67 @@ export default {
|
||||
}
|
||||
}
|
||||
},
|
||||
destroyed() {
|
||||
// if (this.jessibuca) {
|
||||
// this.jessibuca.destroy();
|
||||
// }
|
||||
// this.playing = false;
|
||||
// this.loaded = false;
|
||||
// this.performance = "";
|
||||
mounted() {
|
||||
// Apply fix for Element UI tree scrollbars after component is mounted
|
||||
this.$nextTick(() => {
|
||||
this.fixTreeScrollbars()
|
||||
this.adjustTreeHeight()
|
||||
|
||||
// Add resize event listener to handle window resizing
|
||||
window.addEventListener('resize', this.adjustTreeHeight)
|
||||
})
|
||||
},
|
||||
updated() {
|
||||
// Re-apply fix when component updates (e.g., when switching between RegionTree and GroupTree)
|
||||
this.$nextTick(() => {
|
||||
this.fixTreeScrollbars()
|
||||
this.adjustTreeHeight()
|
||||
})
|
||||
},
|
||||
beforeDestroy() {
|
||||
// Remove event listener when component is destroyed
|
||||
window.removeEventListener('resize', this.adjustTreeHeight)
|
||||
},
|
||||
methods: {
|
||||
adjustTreeHeight() {
|
||||
// Get the container height
|
||||
const containerHeight = this.$el.clientHeight
|
||||
|
||||
// Get the header height
|
||||
const headerHeight = this.$el.querySelector('.device-tree-header').clientHeight
|
||||
|
||||
// Calculate available height for tree
|
||||
const availableHeight = containerHeight - headerHeight - 30 // 30px for padding
|
||||
|
||||
// Set the tree content height
|
||||
const treeContent = this.$el.querySelector('.tree-content')
|
||||
if (treeContent) {
|
||||
treeContent.style.height = `${availableHeight}px`
|
||||
}
|
||||
|
||||
// Ensure tree components adapt to the available height
|
||||
const treeComponents = this.$el.querySelectorAll('.el-tree')
|
||||
treeComponents.forEach(tree => {
|
||||
tree.style.height = '100%'
|
||||
tree.style.maxHeight = '100%'
|
||||
})
|
||||
},
|
||||
fixTreeScrollbars() {
|
||||
// Find all el-tree elements within this component and fix their scrolling behavior
|
||||
const trees = this.$el.querySelectorAll('.el-tree')
|
||||
trees.forEach(tree => {
|
||||
tree.style.overflow = 'visible'
|
||||
tree.style.width = '100%'
|
||||
|
||||
// Also fix any scrollable containers within the tree
|
||||
const scrollContainers = tree.querySelectorAll('[style*="overflow"]')
|
||||
scrollContainers.forEach(container => {
|
||||
if (container.style.overflow === 'auto' || container.style.overflow === 'scroll') {
|
||||
container.style.overflow = 'visible'
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
handleClick: function(tab, event) {
|
||||
},
|
||||
treeNodeClickEvent: function(data) {
|
||||
@@ -62,13 +149,130 @@ export default {
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.device-tree-main-box{
|
||||
.device-tree-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #FFFFFF;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
padding: 15px;
|
||||
overflow: hidden !important; /* Force no overflow on container */
|
||||
}
|
||||
|
||||
.device-tree-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 15px;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
min-height: 30px;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.tree-content {
|
||||
flex: 1;
|
||||
overflow: hidden !important;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.tree-wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-width: 0; /* Prevent flex items from overflowing */
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Global fixes for Element UI tree components */
|
||||
.el-tree {
|
||||
overflow: visible !important;
|
||||
width: 100% !important;
|
||||
min-width: 0 !important;
|
||||
height: 100% !important;
|
||||
}
|
||||
|
||||
.el-tree-node {
|
||||
width: 100% !important;
|
||||
min-width: 0 !important;
|
||||
}
|
||||
|
||||
.el-tree-node__content {
|
||||
width: 100% !important;
|
||||
min-width: 0 !important;
|
||||
}
|
||||
|
||||
.el-tree-node__label {
|
||||
word-break: break-word !important;
|
||||
white-space: normal !important;
|
||||
}
|
||||
|
||||
/* Fix for any scrollable containers */
|
||||
[style*="overflow: auto"],
|
||||
[style*="overflow:auto"],
|
||||
[style*="overflow: scroll"],
|
||||
[style*="overflow:scroll"] {
|
||||
overflow: visible !important;
|
||||
}
|
||||
|
||||
/* Make sure tree nodes are fully visible */
|
||||
.el-tree-node__children {
|
||||
overflow: visible !important;
|
||||
}
|
||||
|
||||
/* Ensure tree nodes can be expanded/collapsed */
|
||||
.el-tree-node__expand-icon {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.device-tree-main-box {
|
||||
text-align: left;
|
||||
}
|
||||
.device-online{
|
||||
|
||||
.device-online {
|
||||
color: #252525;
|
||||
}
|
||||
.device-offline{
|
||||
|
||||
.device-offline {
|
||||
color: #727272;
|
||||
}
|
||||
|
||||
/* Responsive adjustments */
|
||||
@media (max-width: 768px) {
|
||||
.device-tree-container {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.device-tree-header {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.header-switch {
|
||||
width: 100%;
|
||||
margin-top: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.device-tree-container {
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* Adjust el-switch text size for mobile */
|
||||
.el-switch__label {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,25 +1,26 @@
|
||||
<template>
|
||||
<div id="live" style="height: calc(100vh - 124px)">
|
||||
<div v-loading="loading" style="height: 100%; display: grid; grid-template-columns: 400px auto" element-loading-text="拼命加载中">
|
||||
<div style="background-color: #ffffff">
|
||||
<div id="live" class="live-container">
|
||||
<div v-loading="loading" class="live-content" element-loading-text="拼命加载中">
|
||||
<div class="device-tree-container">
|
||||
<DeviceTree :click-event="clickEvent" :context-menu-event="contextMenuEvent" />
|
||||
</div>
|
||||
<div style="display: grid; grid-template-rows: 5vh auto">
|
||||
<div style="font-size: 17px;line-height:5vh; display: grid; grid-template-columns: 1fr 1fr">
|
||||
<div style="text-align: left">
|
||||
<div class="video-container">
|
||||
<div class="control-bar">
|
||||
<div class="split-controls">
|
||||
分屏:
|
||||
<i class="iconfont icon-a-mti-1fenpingshi btn" :class="{active:spiltIndex === 0}" @click="spiltIndex=0" />
|
||||
<i class="iconfont icon-a-mti-4fenpingshi btn" :class="{active: spiltIndex === 1}" @click="spiltIndex=1" />
|
||||
<i class="iconfont icon-a-mti-6fenpingshi btn" :class="{active: spiltIndex === 2}" @click="spiltIndex=2" />
|
||||
<i class="iconfont icon-a-mti-9fenpingshi btn" :class="{active: spiltIndex === 3}" @click="spiltIndex=3" />
|
||||
</div>
|
||||
<div style="text-align: right; margin-right: 10px;">
|
||||
<div class="fullscreen-control">
|
||||
<i class="el-icon-full-screen btn" @click="fullScreen()" />
|
||||
</div>
|
||||
</div>
|
||||
<div style="padding: 0; margin: 0 auto;">
|
||||
<div class="player-container">
|
||||
<div
|
||||
ref="playBox"
|
||||
class="play-grid"
|
||||
:style="liveStyle"
|
||||
>
|
||||
<div
|
||||
@@ -29,7 +30,7 @@
|
||||
:class="getPlayerClass(spiltIndex, i)"
|
||||
@click="playerIdx = (i-1)"
|
||||
>
|
||||
<div v-if="!videoUrl[i-1]" style="color: #ffffff;font-size: 15px;font-weight: bold;">{{ videoTip[i-1]?videoTip[i-1]:"无信号" }}</div>
|
||||
<div v-if="!videoUrl[i-1]" class="no-signal">{{ videoTip[i-1]?videoTip[i-1]:"无信号" }}</div>
|
||||
<player
|
||||
v-else
|
||||
:ref="'player'[i-1]"
|
||||
@@ -111,21 +112,13 @@ export default {
|
||||
|
||||
computed: {
|
||||
liveStyle() {
|
||||
if (!this.$store.getters.sidebar.opened) {
|
||||
return { width: '151vh', height: '85vh', display: 'grid', gridTemplateColumns: this.layout[this.spiltIndex].columns,
|
||||
gridTemplateRows: this.layout[this.spiltIndex].rows, gap: '4px', backgroundColor: '#a9a8a8' }
|
||||
} else {
|
||||
return { width: '140vh', height: '79vh', display: 'grid', gridTemplateColumns: this.layout[this.spiltIndex].columns,
|
||||
gridTemplateRows: this.layout[this.spiltIndex].rows, gap: '4px', backgroundColor: '#a9a8a8' }
|
||||
return {
|
||||
display: 'grid',
|
||||
gridTemplateColumns: this.layout[this.spiltIndex].columns,
|
||||
gridTemplateRows: this.layout[this.spiltIndex].rows,
|
||||
gap: '4px',
|
||||
backgroundColor: '#a9a8a8'
|
||||
}
|
||||
|
||||
// this.$nextTick(() => {
|
||||
// for (let i = 0; i < this.spilt; i++) {
|
||||
// const player = this.$refs.player
|
||||
// player && player[i] && player[i].updatePlayerDomSize()
|
||||
// }
|
||||
// })
|
||||
// return style
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
@@ -149,15 +142,37 @@ export default {
|
||||
'$route.fullPath': 'checkPlayByParam'
|
||||
},
|
||||
mounted() {
|
||||
|
||||
// Add window resize event listener to handle responsive behavior
|
||||
window.addEventListener('resize', this.handleResize)
|
||||
this.handleResize()
|
||||
},
|
||||
created() {
|
||||
this.checkPlayByParam()
|
||||
},
|
||||
destroyed() {
|
||||
clearTimeout(this.updateLooper)
|
||||
// Remove event listener when component is destroyed
|
||||
window.removeEventListener('resize', this.handleResize)
|
||||
},
|
||||
methods: {
|
||||
handleResize() {
|
||||
// Force update to recalculate responsive layout
|
||||
this.$forceUpdate()
|
||||
|
||||
// Resize any active players
|
||||
this.$nextTick(() => {
|
||||
for (let i = 0; i < this.layout[this.spiltIndex].spilt; i++) {
|
||||
const playerRef = this.$refs[`player${i + 1}`]
|
||||
if (playerRef) {
|
||||
if (playerRef instanceof Array) {
|
||||
playerRef[0].resize && playerRef[0].resize()
|
||||
} else {
|
||||
playerRef.resize && playerRef.resize()
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
destroy(idx) {
|
||||
console.log(idx)
|
||||
this.clear(idx.substring(idx.length - 1))
|
||||
@@ -212,8 +227,6 @@ export default {
|
||||
}
|
||||
},
|
||||
shot(e) {
|
||||
// console.log(e)
|
||||
// send({code:'image',data:e})
|
||||
var base64ToBlob = function(code) {
|
||||
const parts = code.split(';base64,')
|
||||
const contentType = parts[0].split(':')[1]
|
||||
@@ -257,9 +270,86 @@ export default {
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.live-container {
|
||||
height: calc(100vh - 124px);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.live-content {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.device-tree-container {
|
||||
width: 300px;
|
||||
min-width: 250px;
|
||||
max-width: 400px;
|
||||
background-color: #ffffff;
|
||||
overflow: auto;
|
||||
resize: horizontal;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.live-content {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.device-tree-container {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
height: 200px;
|
||||
min-height: 150px;
|
||||
max-height: 300px;
|
||||
resize: vertical;
|
||||
}
|
||||
}
|
||||
|
||||
.video-container {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.control-bar {
|
||||
height: 5vh;
|
||||
min-height: 40px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
.split-controls {
|
||||
text-align: left;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
.fullscreen-control {
|
||||
text-align: right;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
.player-container {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.play-grid {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
max-height: calc(100vh - 180px);
|
||||
aspect-ratio: 16/9;
|
||||
}
|
||||
|
||||
.btn {
|
||||
margin: 0 10px;
|
||||
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
@@ -268,7 +358,6 @@ export default {
|
||||
|
||||
.btn.active {
|
||||
color: #409EFF;
|
||||
|
||||
}
|
||||
|
||||
.redborder {
|
||||
@@ -280,13 +369,39 @@ export default {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.no-signal {
|
||||
color: #ffffff;
|
||||
font-size: 15px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.play-box-2-1 {
|
||||
grid-column: 1 / span 2;
|
||||
grid-row: 1 / span 2;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
|
||||
/* Responsive adjustments for smaller screens */
|
||||
@media (max-width: 576px) {
|
||||
.control-bar {
|
||||
flex-direction: column;
|
||||
height: auto;
|
||||
padding: 5px 0;
|
||||
}
|
||||
|
||||
.split-controls, .fullscreen-control {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
padding: 5px 0;
|
||||
}
|
||||
|
||||
.btn {
|
||||
margin: 0 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.videoList {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
Reference in New Issue
Block a user