固定摄像头巡检 翻页问题完成

src/components/JessibucaH265/index.vue

@@ -35,11 +35,20 @@ export default {
           Promise.all([this.getQxToken(), this.selectVideoLoginInfo()]).then(() => {
             //  2. Promise.all 等待两个异步请求结束后 再组装url
             const { puid, ballIndex } = newValue
+
             this.playUrl =
               this.qxInfo.q2Url + 'stream.flv?puid=' + puid + '&idx=' + ballIndex + '&stream=0&token=' + this.qxToken
             console.log('this.playUrl', this.playUrl)
+            if (this.jessibuca) {
+              // await this.jessibuca.destroy()
               this.playvideo()
+            } else {
+              this.createJessibuca()
+              this.playvideo()
+            }
           })
+        } else {
+          this.stopvideo()
         }
       },
       deep: true,

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

@@ -9,7 +9,7 @@
 <template>
   <div style="height: 100%">
     <div class="handle-header">
-      <div>
+      <div class="btn-container">
         <el-button
           type="primary"
           size="small"
@@ -76,9 +76,10 @@
         <el-button
           type="primary"
           size="small"
-          icon="el-icon-error"
+          icon="el-icon-arrow-left"
-          @click="closeVideos(2)"
+          @click="onChangePages(1)"
           style="background: #1aa4e1; padding: 6px"
+          :disabled="currentPage === 1"
         >
           上页
         </el-button>
@@ -86,12 +87,18 @@
         <el-button
           type="primary"
           size="small"
-          icon="el-icon-error"
+          icon="el-icon-arrow-right"
-          @click="closeVideos(2)"
+          @click="onChangePages(2)"
           style="background: #1aa4e1; padding: 6px"
+          :disabled="currentPage === maxPages"
         >
           下页
         </el-button>
+
+        <span style="margin-left: 10px; font-size: 1rem; color: #fff">
+          <el-badge is-dot class="item" type="success" style="margin-top: 8px"></el-badge>
+          当前页：{{ currentPage }}
+        </span>
       </div>
       <div class="cell-tool">
         <div class="bk-button-group">
@@ -280,7 +287,7 @@
               @click="onSelectVideo(i)"
               :style="i === activeVideo ? 'border: 2px solid green' : ''"
             >
-              <JessibucaH265 :playerInfo="fixedData[i - 1]" :ref="`JessibucaH265_${i}`" />
+              <JessibucaH265 :playerInfo="onLinePlayerList[i - 1]" :ref="`JessibucaH265_${i}`" />
             </div>
             <!-- <div :class="cellClass(i)" v-for="i in cellCount" :key="i">
               <player
@@ -428,8 +435,12 @@ export default {
       blob: '',
       fullscreen: false,
       fixedData: [],
+      onLineList: [],
+      onLinePlayerList: [],
       activeVideo: null,
       activePlayVideo: null,
+
+      currentPage: 1, // 当前页数
     }
   },
   methods: {
@@ -468,6 +479,7 @@ export default {
     },
     changCellCount(count) {
       this.cellCount = count
+      this.onLinePlayerListFun()
       let length = this.puidArray.length > count ? count : this.puidArray.length
       this.puidArray = this.puidArray.sort((a, b) => a.activePlayer - b.activePlayer)
       for (let i = 0; i < length; i++) {
@@ -691,6 +703,8 @@ export default {
         deviceType: '固定摄像头',
       })
       this.fixedData = res.data
+      this.onLineList = this.fixedData.filter(e => e.status == 1)
+      this.onLinePlayerListFun()
     },
 
     // 点击视频盒子事件
@@ -711,6 +725,41 @@ export default {
         })
       }
     },
+
+    // 计算最大pages
+    divideAndRoundUp(a, b) {
+      if (a === 0) {
+        return 1
+      }
+      let result = a / b
+      return Math.ceil(result)
+    },
+
+    // 点击上页 / 下页
+    onChangePages(type) {
+      // 1. 上页 2. 下页
+      if (type === 1) {
+        if (this.currentPage > 1) {
+          this.currentPage--
+        }
+      } else {
+        if (this.currentPage < this.maxPages) {
+          this.currentPage++
+        }
+      }
+
+      this.onLinePlayerListFun()
+    },
+
+    // 计算每次播放的数据源
+    onLinePlayerListFun() {
+      this.onLinePlayerList = this.onLineList.slice(
+        (this.currentPage - 1) * this.cellCount,
+        this.cellCount * this.currentPage
+      )
+
+      console.log(' this.onLinePlayerList', this.onLinePlayerList)
+    },
   },
   computed: {
     cellClass() {
@@ -749,6 +798,11 @@ export default {
         if (this.cellCount === 1 || this.cellCount === 4) return 'container-9'
       }
     },
+
+    // 计算最大分页数量
+    maxPages() {
+      return this.divideAndRoundUp(this.videoNum.onlineNum, this.cellCount)
+    },
   },
 
   mounted() {
@@ -922,5 +976,10 @@ export default {
   justify-content: space-between;
   height: 7vh;
   padding: 10px 0;
+
+  .btn-container {
+    display: flex;
+    align-items: center;
+  }
 }
 </style>