styleFix

src/components/supervisory/Index.vue

@@ -105,47 +105,8 @@ export default {
       getVideoTreeData().then((res) => {
         this.treeData = this.handleData(res.data);
 
-        this.videoURLArray = this.treeData
-          .map((item) => {
-            return item.children.map((items) => {
-              return items.id;
-            });
-          })
-          .flat();
-        if (this.videoURLArray.length > 9) {
-          this.videoURLArray = this.videoURLArray.slice(0, 9);
-        }
-
-        this.videoURLArray.map((id, index) => {
-          this.cameraList.push({
-            player: undefined,
-            id: id,
-          });
-          getVideoLiveAddressUrl(id).then((res) => {
-            this.$nextTick(() => {
-              const myVideoDiv = document.getElementById(
-                `video-container-${index + 1}`
-              );
-              myVideoDiv.innerHTML = `<video
-          id="singleVideo${index + 1}"
-          autoplay="autoplay"
-          class="video-js vjs-default-skin"
-        ></video>`;
-              const singlePlayer = videojs(`singleVideo${index + 1}`, {
-                autoplay: true, // 自动播放
-                controls: true, // 控件显示
-                preload: "auto", //定义视频加载模式
-                loop: true, //是否循环播放
-              });
-              singlePlayer.src({
-                src: res.data.live_address_url,
-                type: "application/x-mpegURL",
-              });
-              singlePlayer.play();
-
-              this.cameraList[index].player = singlePlayer;
-            });
-          });
+        this.$nextTick(() => {
+          this.viewAll();
         });
       });
     },
@@ -300,21 +261,21 @@ export default {
     },
     viewAll() {
       this.cameraList.map((item) => {
-        item.player.dispose();
+        item.player && item.player.dispose();
         item.player = null;
         item.id = "";
         item.live_address_url = "";
       });
       this.cameraList = [];
 
-      const allVideoIdArray = this.treeData
+      let allVideoIdArray = this.treeData
         .map((item) => {
           return item.children.map((child) => {
             return child.id;
           });
         })
         .flat();
-
+      allVideoIdArray = allVideoIdArray.slice(0, this.activeSplice);
       allVideoIdArray.map((id, index) => {
         this.cameraList.push({
           player: undefined,
@@ -523,4 +484,10 @@ export default {
 .tree-shadow-container {
   height: calc(97% - 52px);
 }
+
+::v-deep .vjs-big-play-button {
+  left: 50% !important;
+  top: 50% !important;
+  transform: translateX(-50%) translateY(-50%) !important;
+}
 </style>
\ No newline at end of file