默认展示4*4规格，分屏之后自己写翻页方法，对摄像头一一展示（1x1， 2x2， 3x3， 4x4），有俩个场景。
1、刚开始默认展示的时候进行分页。
2、点击分屏操作之后进行分页。
思路：
1、拿到所有的通道号，比如有[1, 2, 3..., 100];
2、 点击分屏之后就会把这个数组变为
- 1*1[[1], [2]],
- 2*2[[1, 2, 3,4], [5, 6, 7, 8]]
- 3*3[[1, 2, 3, 4, 5, 6, 7, 8, 9], [10, 11, 12, 13, 14, 15, 16, 17, 18]]
- 4*4[[1, 2, 3, 4, 5, ..., 16], [17, 18, 19, 20, ..., 32]]
3、点击下一页或者上一页的时候全局定义一个变量，初始值为0.，点击上一页++，下一页--，利用这个变量进行这个数组的操作。
js
data() {
return {
page: 4, // 默认展示4*4格式，自己计算翻页
getIChannelID: [], // 通道号，每次根据page获取通道数量
startPage: 0,
pageIndex: 1, // 摄像头为1*1的时候第一页使用这个数据，为1*1以上的使用getIChannelID[]
resultIdArr: [], // 处理后的通道id数组，每n*n排列
iDIndex: 0,
isChangeWndNum: false, // 刚开始默认不分屏(4*4)，如果分屏，变为true，使用resultIdArr，为false使用getIChannelID
}
},
methods: {
// 首先拿到海康摄像头所有的通道号，才能进行以下操作
// 在登录之后获取通道的方法里面拿到所有通道号
// 海康摄像头分屏操作 @click="changeWndNum(4)"海康js自带方法
changeWndNum(iType) {
this.isChangeWndNum = true; // 刚开始默认是否分屏
iType = parseInt(iType, 10);
this.page = iType; // 全局给变量，在翻页的时候使用
WebVideoCtrl.I_ChangeWndNum(iType).then(() => {
console.log("窗口分割成功！");
var arr = Array.from({length: this.getIChannelID}, (_, i) => i + 1)
let resByTwo = this.handleIdArr(arr)
console.log(resByTwo);
this.resultIdArr = resByTwo;
}, (oError) => {
let szInfo = "窗口分割失败！";
console.log(szInfo, oError.errorCode, oError.errorMsg);
});
},
handleIdArr(arr) { // 写一个方法让上一页和下一页都使用这个方法
var result = [];
// this.page * this.page 2*2 1*1 3*3 4*4
for (let i = 0; i < arr.length; i+= this.page * this.page) {
result.push(arr.slice(i, i + this.page * this.page))
}
return result;
},
// 上一页
onPrev() {
if (this.iDIndex == 0) return this.$Message.warning('没有摄像头啦');
this.iDIndex--;
WebVideoCtrl.I_StopAllPlay();
this.resultIdArr[this.iDIndex].forEach((video, index) => {
this.clickStartRealPlay(video, index);
})
},
// 下一页
onNext() {
/**
* console.log('getIChannelID', this.getIChannelID);
* getIChannelID（所有硬盘录像机得通道号）
* if语句里边的代码也可以把数组分割成1*1， 2*2， 3*3， 4*4那种的，只需要修改end的值。
*/
this.iDIndex++;
if (isChangeWndNum) { // 有一种情况就是刚打开就要翻页，需要判断是否为刚开始的翻页
// 刚开始进来直接翻页的操作
WebVideoCtrl.I_StopAllPlay(); // 先关掉预览在重新预览
if (this.startPage >= this.getIChannelID.length) {
console.log("已经获取完成全部值", this.getIChannelID);
return;
}
var end = this.startPage + 16; // 4*4是163*3是9以此类推
if (end > this.getIChannelID.length) {
end = this.getIChannelID.length;
};
var subArray = this.getIChannelID.slice(this.startPage, end);
// 处理获取的值
this.startPage += 16;
console.log('444444', subArray);
for (let index = 0; index < subArray.length; index++) {
const element = subArray[index];
this.clickStartRealPlay(element, index);
}
} else { // 点击分屏然后翻页需要的操作
WebVideoCtrl.I_StopAllPlay();
console.log(this.resultIdArr, 'this.resultIdArr');
this.resultIdArr[this.iDIndex].forEach((video, index) => {
this.clickStartRealPlay(video, index);
})
},
}刚开始不操作的时候用到的是getIChannelID这个数组，也就是刚拿到的这个数据，点击分屏之后用到了resultIdArr数组，这个就是需要分屏之后操作数组getIChannelID分成上边的那种类型进行操作。
根据自己需求进行整改。