修复了分配监控的页面自适应
This commit is contained in:
尚鹏暃
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user