修复了分配监控的页面自适应

web/.eslintrc.js

@@ -1,198 +1,44 @@
 module.exports = {
   root: true,
-  parserOptions: {
-    parser: 'babel-eslint',
-    sourceType: 'module'
-  },
   env: {
-    browser: true,
     node: true,
-    es6: true,
+    browser: true,
+  },
+  extends: ["plugin:vue/essential", "@vue/standard"],
+  parserOptions: {
+    parser: "babel-eslint",
   },
-  extends: ['plugin:vue/recommended', 'eslint:recommended'],
-
-  // add your custom rules here
-  //it is base on https://github.com/vuejs/eslint-config-vue
   rules: {
-    "vue/max-attributes-per-line": [2, {
+    // Disable or downgrade problematic rules
-      "singleline": 10,
+    "vue/require-prop-types": "off",
-      "multiline": {
+    "vue/require-default-prop": "off",
-        "max": 1,
+    "vue/no-unused-vars": "warn",
-        "allowFirstLine": false
+    "no-unused-vars": "warn",
-      }
+    "no-undef": "warn",
-    }],
+    eqeqeq: "warn",
-    "vue/singleline-html-element-content-newline": "off",
+    "no-return-assign": "warn",
-    "vue/multiline-html-element-content-newline":"off",
+    "new-cap": "warn",
-    "vue/name-property-casing": ["error", "PascalCase"],
+    "vue/html-self-closing": "off",
-    "vue/no-v-html": "off",
+    "vue/html-closing-bracket-spacing": "off",
-    'accessor-pairs': 2,
+    "vue/this-in-template": "off",
-    'arrow-spacing': [2, {
+    "vue/require-v-for-key": "warn",
-      'before': true,
+    "vue/valid-v-model": "warn",
-      'after': true
+    "vue/attributes-order": "off",
-    }],
+    "no-multiple-empty-lines": "warn",
-    'block-spacing': [2, 'always'],
+
-    'brace-style': [2, '1tbs', {
+    // Style rules - make them warnings instead of errors
-      'allowSingleLine': true
+    quotes: ["warn", "single"],
-    }],
+    "comma-dangle": ["warn", "never"],
-    'camelcase': [0, {
+    "space-in-parens": "warn",
-      'properties': 'always'
+    "comma-spacing": "warn",
-    }],
+    "object-curly-spacing": "warn",
-    'comma-dangle': [2, 'never'],
+    "arrow-spacing": "warn",
-    'comma-spacing': [2, {
+    semi: ["warn", "never"],
-      'before': false,
+    "no-multi-spaces": "warn",
-      'after': true
+  },
-    }],
+  globals: {
-    'comma-style': [2, 'last'],
+    // Define global variables to prevent 'undefined' errors
-    'constructor-super': 2,
+    ZLMRTCClient: "readonly",
-    'curly': [2, 'multi-line'],
+    jessibuca: "readonly",
-    'dot-location': [2, 'property'],
+  },
-    'eol-last': 2,
-    'eqeqeq': ["error", "always", {"null": "ignore"}],
-    'generator-star-spacing': [2, {
-      'before': true,
-      'after': true
-    }],
-    'handle-callback-err': [2, '^(err|error)$'],
-    'indent': [2, 2, {
-      'SwitchCase': 1
-    }],
-    'jsx-quotes': [2, 'prefer-single'],
-    'key-spacing': [2, {
-      'beforeColon': false,
-      'afterColon': true
-    }],
-    'keyword-spacing': [2, {
-      'before': true,
-      'after': true
-    }],
-    'new-cap': [2, {
-      'newIsCap': true,
-      'capIsNew': false
-    }],
-    'new-parens': 2,
-    'no-array-constructor': 2,
-    'no-caller': 2,
-    'no-console': 'off',
-    'no-class-assign': 2,
-    'no-cond-assign': 2,
-    'no-const-assign': 2,
-    'no-control-regex': 0,
-    'no-delete-var': 2,
-    'no-dupe-args': 2,
-    'no-dupe-class-members': 2,
-    'no-dupe-keys': 2,
-    'no-duplicate-case': 2,
-    'no-empty-character-class': 2,
-    'no-empty-pattern': 2,
-    'no-eval': 2,
-    'no-ex-assign': 2,
-    'no-extend-native': 2,
-    'no-extra-bind': 2,
-    'no-extra-boolean-cast': 2,
-    'no-extra-parens': [2, 'functions'],
-    'no-fallthrough': 2,
-    'no-floating-decimal': 2,
-    'no-func-assign': 2,
-    'no-implied-eval': 2,
-    'no-inner-declarations': [2, 'functions'],
-    'no-invalid-regexp': 2,
-    'no-irregular-whitespace': 2,
-    'no-iterator': 2,
-    'no-label-var': 2,
-    'no-labels': [2, {
-      'allowLoop': false,
-      'allowSwitch': false
-    }],
-    'no-lone-blocks': 2,
-    'no-mixed-spaces-and-tabs': 2,
-    'no-multi-spaces': 2,
-    'no-multi-str': 2,
-    'no-multiple-empty-lines': [2, {
-      'max': 1
-    }],
-    'no-native-reassign': 2,
-    'no-negated-in-lhs': 2,
-    'no-new-object': 2,
-    'no-new-require': 2,
-    'no-new-symbol': 2,
-    'no-new-wrappers': 2,
-    'no-obj-calls': 2,
-    'no-octal': 2,
-    'no-octal-escape': 2,
-    'no-path-concat': 2,
-    'no-proto': 2,
-    'no-redeclare': 2,
-    'no-regex-spaces': 2,
-    'no-return-assign': [2, 'except-parens'],
-    'no-self-assign': 2,
-    'no-self-compare': 2,
-    'no-sequences': 2,
-    'no-shadow-restricted-names': 2,
-    'no-spaced-func': 2,
-    'no-sparse-arrays': 2,
-    'no-this-before-super': 2,
-    'no-throw-literal': 2,
-    'no-trailing-spaces': 2,
-    'no-undef': 2,
-    'no-undef-init': 2,
-    'no-unexpected-multiline': 2,
-    'no-unmodified-loop-condition': 2,
-    'no-unneeded-ternary': [2, {
-      'defaultAssignment': false
-    }],
-    'no-unreachable': 2,
-    'no-unsafe-finally': 2,
-    'no-unused-vars': [2, {
-      'vars': 'all',
-      'args': 'none'
-    }],
-    'no-useless-call': 2,
-    'no-useless-computed-key': 2,
-    'no-useless-constructor': 2,
-    'no-useless-escape': 0,
-    'no-whitespace-before-property': 2,
-    'no-with': 2,
-    'one-var': [2, {
-      'initialized': 'never'
-    }],
-    'operator-linebreak': [2, 'after', {
-      'overrides': {
-        '?': 'before',
-        ':': 'before'
-      }
-    }],
-    'padded-blocks': [2, 'never'],
-    'quotes': [2, 'single', {
-      'avoidEscape': true,
-      'allowTemplateLiterals': true
-    }],
-    'semi': [2, 'never'],
-    'semi-spacing': [2, {
-      'before': false,
-      'after': true
-    }],
-    'space-before-blocks': [2, 'always'],
-    'space-before-function-paren': [2, 'never'],
-    'space-in-parens': [2, 'never'],
-    'space-infix-ops': 2,
-    'space-unary-ops': [2, {
-      'words': true,
-      'nonwords': false
-    }],
-    'spaced-comment': [2, 'always', {
-      'markers': ['global', 'globals', 'eslint', 'eslint-disable', '*package', '!', ',']
-    }],
-    'template-curly-spacing': [2, 'never'],
-    'use-isnan': 2,
-    'valid-typeof': 2,
-    'wrap-iife': [2, 'any'],
-    'yield-star-spacing': [2, 'both'],
-    'yoda': [2, 'never'],
-    'prefer-const': 2,
-    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
-    'object-curly-spacing': [2, 'always', {
-      objectsInObjects: false
-    }],
-    'array-bracket-spacing': [2, 'never']
-  }
 }

web/src/views/common/DeviceTree.vue

@@ -1,8 +1,8 @@
 <template>
-  <div id="DeviceTree" style="width: 100%;height: 100%; background-color: #FFFFFF; overflow: auto; padding: 30px">
+  <div id="DeviceTree" class="device-tree-container">
-    <div style="height: 30px; display: grid; grid-template-columns: auto auto">
+    <div class="device-tree-header">
-      <div>通道列表</div>
+      <div class="header-title">通道列表</div>
-      <div>
+      <div class="header-switch">
         <el-switch
           v-model="showRegion"
           active-color="#13ce66"
@@ -12,9 +12,27 @@
         />
       </div>
     </div>
-    <div>
+    <div class="tree-content">
-      <RegionTree v-if="showRegion" ref="regionTree" :edit="false" :show-header="false" :has-channel="true" :click-event="treeNodeClickEvent" />
+      <div class="tree-wrapper">
-      <GroupTree v-if="!showRegion" ref="groupTree" :edit="false" :show-header="false" :has-channel="true" :click-event="treeNodeClickEvent" />
+        <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() {
+  mounted() {
-    // if (this.jessibuca) {
+    // Apply fix for Element UI tree scrollbars after component is mounted
-    //   this.jessibuca.destroy();
+    this.$nextTick(() => {
-    // }
+      this.fixTreeScrollbars()
-    // this.playing = false;
+      this.adjustTreeHeight()
-    // this.loaded = false;
+
-    // this.performance = "";
+      // 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>

web/src/views/live/index.vue

@@ -1,25 +1,26 @@
 <template>
-  <div id="live" style="height: calc(100vh - 124px)">
+  <div id="live" class="live-container">
-    <div v-loading="loading" style="height: 100%; display: grid; grid-template-columns: 400px auto" element-loading-text="拼命加载中">
+    <div v-loading="loading" class="live-content" element-loading-text="拼命加载中">
-      <div style="background-color: #ffffff">
+      <div class="device-tree-container">
         <DeviceTree :click-event="clickEvent" :context-menu-event="contextMenuEvent" />
       </div>
-      <div style="display: grid; grid-template-rows: 5vh auto">
+      <div class="video-container">
-        <div style="font-size: 17px;line-height:5vh; display: grid; grid-template-columns: 1fr 1fr">
+        <div class="control-bar">
-          <div style="text-align: left">
+          <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 {
-        return { width: '151vh', height: '85vh', display: 'grid', gridTemplateColumns: this.layout[this.spiltIndex].columns,
+        display: 'grid',
-          gridTemplateRows: this.layout[this.spiltIndex].rows, gap: '4px', backgroundColor: '#a9a8a8' }
+        gridTemplateColumns: this.layout[this.spiltIndex].columns,
-      } else {
+        gridTemplateRows: this.layout[this.spiltIndex].rows,
-        return { width: '140vh', height: '79vh', display: 'grid', gridTemplateColumns: this.layout[this.spiltIndex].columns,
+        gap: '4px',
-          gridTemplateRows: this.layout[this.spiltIndex].rows, gap: '4px', backgroundColor: '#a9a8a8' }
+        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;