优化分屏播放效果

web/src/views/common/DeviceTree.vue

@@ -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')

web/src/views/common/GroupTree.vue

@@ -1,6 +1,6 @@
 <template>
-  <div id="groupTree" style="border-right: 1px solid #EBEEF5; height: 100%">
+  <div id="groupTree" style="border-right: 1px solid #EBEEF5; height: 100%; display: flex; flex-direction: column;">
-    <div style="padding: 0 20px 0 10px;">
+    <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)
       }

web/src/views/common/RegionTree.vue

@@ -1,6 +1,6 @@
 <template>
-  <div id="regionTree" style="border-right: 1px solid #EBEEF5; height: 100%">
+  <div id="regionTree" style="border-right: 1px solid #EBEEF5; height: 100%; display: flex; flex-direction: column;">
-    <div style="padding: 0 20px 0 10px;">
+    <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)
       }

web/src/views/common/jessibuca.vue

@@ -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)
         })
       }
 

web/src/views/live/index.vue

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