vue对接海康摄像头，使用hk3.3（硬盘录像机）开发摄像头分屏翻页操作。

默认展示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分成上边的那种类型进行操作。

根据自己需求进行整改。