视频墙-更新提交

src/views/vent/monitorManager/camera/index.vue

@@ -16,7 +16,7 @@
       </cameraTree>
     </div>
     <div class="right-area" v-if="addrList.length > 0">
-      <div class="vent-flex-row-wrap camera-box">
+      <div class="vent-flex-row-wrap" :class="addrList.length == 1 ? 'camera-box1' : 'camera-box'">
         <div v-for="(item, index) in addrList" :key="index" class="player-box">
           <div class="player-name">{{ item.name }}</div>
           <div style="padding-top:3px">
@@ -31,7 +31,7 @@
         </div>
       </div>
       <div class="pagination">
-        <Pagination v-model:current="current" v-model:page-size="pageSize" :total="total"  @change="onChange" />
+        <Pagination v-model:current="current" v-model:page-size="pageSize" :total="total" @change="onChange" />
       </div>
     </div>
     <div class="camera-box" v-else>
@@ -107,7 +107,7 @@ async function getCameraDevKindList() {
 
 //点击目录
 async function onClick(node) {
-  if(selected.title === node.title && selected.id === node.id) return
+  if (selected.title === node.title && selected.id === node.id) return
   current.value = 1
   selected.id = node.id;
   selected.pid = node.pid;
@@ -267,8 +267,8 @@ function setNoRtspVideo(id, videoAddr) {
       lang: 'zh',
       id: id,
       url: videoAddr,
-      width:589,
-      height:330,
+      width: 589,
+      height: 330,
       poster: '/src/assets/images/vent/noSinge.png',
       plugins: [FlvPlugin],
       fluid: true,
@@ -306,8 +306,8 @@ function setNoRtspVideo(id, videoAddr) {
         lang: 'zh',
         id: id,
         url: videoAddr,
-        width:589,
-        height:330,
+        width: 589,
+        height: 330,
         isLive: true,
         autoplay: true,
         autoplayMuted: true,
@@ -333,8 +333,8 @@ function setNoRtspVideo(id, videoAddr) {
         lang: 'zh',
         id: id,
         url: videoAddr,
-        width:589,
-        height:330,
+        width: 589,
+        height: 330,
         isLive: true,
         autoplay: true,
         autoplayMuted: true,
@@ -445,39 +445,49 @@ onUnmounted(() => {
       align-items: flex-start;
       flex-wrap: wrap;
       overflow-y: auto;
+    }
 
-      .player-box {
-        width: 626px;
-        height: 370px;
-        padding: 17px 18px;
-        background: url('/@/assets/images/vent/camera_bg.png');
-        background-size: 100% 100%;
-        position: relative;
-        margin: 10px;
-
-        .player-name {
-          font-size: 14px;
-          position: absolute;
-          top: 15px;
-          right: 15px;
-          color: #fff;
-          background-color: hsla(0, 0%, 50%, .5);
-          border-radius: 2px;
-          padding: 1px 5px;
-          max-width: 120px;
-          overflow: hidden;
-          white-space: nowrap;
-          text-overflow: ellipsis;
-          z-index: 999;
-        }
+    .camera-box1 {
+      width: 100%;
+      height: calc(100% - 60px);
+      display: flex;
+      justify-content: flex-start;
+      align-items: flex-start;
+      flex-wrap: wrap;
+      overflow-y: auto;
+    }
 
-        .click-box {
-          position: absolute;
-          width: 100%;
-          height: 100%;
-          top: 0;
-          left: 0;
-        }
+    .player-box {
+      width: 626px;
+      height: 370px;
+      padding: 17px 18px;
+      background: url('/@/assets/images/vent/camera_bg.png');
+      background-size: 100% 100%;
+      position: relative;
+      margin: 10px;
+
+      .player-name {
+        font-size: 14px;
+        position: absolute;
+        top: 15px;
+        right: 15px;
+        color: #fff;
+        background-color: hsla(0, 0%, 50%, .5);
+        border-radius: 2px;
+        padding: 1px 5px;
+        max-width: 120px;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        z-index: 999;
+      }
+
+      .click-box {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        top: 0;
+        left: 0;
       }
     }