+
-
@@ -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 {
diff --git a/web/src/views/live/index.vue b/web/src/views/live/index.vue
index 60ddff6dd..e027ae3d5 100755
--- a/web/src/views/live/index.vue
+++ b/web/src/views/live/index.vue
@@ -1,25 +1,26 @@
-
-
-
+
+
+
-
-
-
+
+
+
分屏:
-
-
+
-
{{ videoTip[i-1]?videoTip[i-1]:"无信号" }}
+
{{ videoTip[i-1]?videoTip[i-1]:"无信号" }}
{
- // 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 {
}
-