固定摄像头巡检增加6路

src/views/screen/components/video/components/videoPlayNew.vue

@@ -93,13 +93,13 @@
               >
                 4路
               </span>
-              <!-- <span
+              <span
                 :class="{ active: cellCount === 6 }"
                 @click="changCellCount(6)"
                 style="margin-right: 5px; cursor: pointer; font-size: 22px"
               >
                 6路
-              </span> -->
+              </span>
             </div>
           </div>
         </el-form-item>
@@ -126,12 +126,12 @@
       </div>
       <div class="right">
         <div class="cell">
-          <div class="cell-player">
+          <div class="cell-player" :class="playerContent(1)">
             <div
               class="player-container"
               v-for="i in cellCount"
               :key="i"
-              :class="cellClassNew"
+              :class="cellClassNew(i)"
               @click="onSelectVideo(i)"
               :style="i === activeVideo ? 'border: 2px solid green' : ''"
             >
@@ -590,8 +590,19 @@ export default {
       }
     },
     cellClassNew() {
-      if (this.cellCount === 1) return 'container-1'
+      return index => {
-      if (this.cellCount === 4) return 'container-4'
+        if (this.cellCount === 1) return 'container-1'
+        if (this.cellCount === 4) return 'container-4'
+        if (this.cellCount === 6) return 'box' + index
+      }
+    },
+
+    playerContent() {
+      return index => {
+        if (this.cellCount === 6) return 'container-6'
+
+        if (this.cellCount === 1 || this.cellCount === 4) return 'container-9'
+      }
     },
   },
 
@@ -601,7 +612,7 @@ export default {
 }
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 .header {
   background-color: transparent;
   border-radius: 10px;
@@ -643,9 +654,7 @@ export default {
 
 .cell-player {
   flex: 1;
-  display: flex;
+
-  flex-wrap: wrap;
-  justify-content: space-between;
   width: 100%;
   height: 75vh;
 }
@@ -744,4 +753,47 @@ export default {
 .player-container {
   box-sizing: border-box;
 }
+
+.container-6 {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr; /* 总共三列 */
+  grid-template-rows: 1fr 1fr 1fr;
+  gap: 6px;
+
+  .box1 {
+    grid-column: 1 / 3;
+    grid-row: 1 / 3;
+  }
+}
+
+.container-9 {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
+
+/* .box1 {
+  grid-row: 2/3;
+  grid-column: 2/3;
+} */
+/* .box2 {
+  grid-row: 2/1;
+  grid-column: 1/1;
+}
+.box3 {
+  grid-row: 2/1;
+  grid-column: 2/1;
+}
+.box4 {
+  grid-row: 1/1;
+  grid-column: 2/3;
+}
+.box5 {
+  grid-row: 1/3;
+  grid-column: 1/3;
+}
+.box6 {
+  grid-row: 1/3;
+  grid-column: 1/3;
+} */
 </style>

vue.config.js

@@ -38,8 +38,8 @@ module.exports = {
         // target: `http://localhost:18080`,
         // target: 'http://192.168.0.176:18080',
         // target: 'http://192.168.0.58:19090', // 杰
-        target: 'http://192.168.0.38:18080', // 测试环境
+        // target: 'http://192.168.0.38:18080', // 测试环境
-        // target: 'http://218.21.27.6:1999/prod-api', // 生产环境
+        target: 'http://218.21.27.6:1999/prod-api', // 生产环境
         // target: 'http://192.168.0.14:38080', // 郝志权
         // target: 'http://192.168.2.122:18080', // 梁超
         changeOrigin: true,