el-select实现分屏效果

 动态绑定class值 ，多种判断  

 :class="type === 8 ? 'home-stye-2' : type === 24 ? 'home-stye-1' : 'home-stye-3'"

  <div class="home-right-top"><div class="home-right-top-video"><el-row :gutter="20"><el-col :span="type" v-for="(item, index) in typeList" :key="item.id":class="type === 8 ? 'home-stye-2' : type === 24 ? 'home-stye-1' : 'home-stye-3'"><div class="videoEvent">
//ifram视频嵌套<iframe id="iframe":src="liveNvrUrl + `/play.html?channel=` + item.channelNo + `&protocol=WEBRTC&stretch=no&iframe=yes&autoplay=no&controls=no`"allowfullscreen class="video" @click="iframeClick(index)"></iframe></div>
//摄像仪名称 点击摄像仪名称实现全屏<div class="camera-name" @click="handleVideoClick(item.id, item.channelNo, item.voiceCall)">摄像仪名称 : {{item.cameraName }}</div></el-col></el-row></div><div class="home-right-top-text"><span class="full-screen" @click="fullScreenClick">全屏</span><span>
//分屏下拉款选择<el-select v-model="cameraValue" placeholder="分屏" style="width: 100px;" size="mini" @change="changeSize"><el-option v-for="item in cameraOptions" :key="item.value" :label="item.label" :value="item.value"></el-option></el-select></span></div></div>

js部分定义变量及方法，主要查阅对象为分屏和全屏方法 

 

data(){
return{typeNewList: [], //获取后端返回数组typeList: [], //展示页面数组liveNvrUrl: '', cameraValue: '', //select绑定值type: 24,cameraIndex: null,//截取数量}
}，mounted() {this.getCameraStatus()this.getWebSocket()  // 链接服务this.getLiveNvr()    //获取liveNvr地址},methods: {//获取liveNvr地址getLiveNvr() {getConfigKey("liveNvr").then(res => {this.liveNvrUrl = res.msg;})},// 链接服务getWebSocket() {function debounce(func, delay) {let timeoutId;return function (...args) {clearTimeout(timeoutId);timeoutId = setTimeout(() => {func.apply(this, args);}, delay);};}const wsuri = 'ws://192.168.10.6:8081/websocket/message'let ws = new WebSocket(wsuri)var _this = thisws.onopen = function (event) {}const debouncedFunction = debounce(function (event) {if (event.data !== '连接成功') {let result = event.datalet data = JSON.parse(result)_this.cameraOnlineList.unshift(data)}// 执行的代码}, 200);ws.onmessage = function (e) {debouncedFunction(e)}ws.onclose = function (event) {}},
//初始化数据getCameraStatus() {getCameraStatus().then(res => {this.allCamera = res.cameraStatus.numberthis.offlineCamera = res.cameraStatus.offDrillingNumberthis.onlineCamera = res.cameraStatus.onDrillingNumber})// 摄像仪通道listCameraBase().then(response => {this.typeNewList = response.rowsthis.handleVideoClick(this.typeNewList[0].id, this.typeNewList[0].channelNo, this.typeNewList[0].voiceCall);this.changeSize(this.type)});},// 监控视频事件handleVideoClick(videoId, channelNo, voiceCall) {this.currentChannel = channelNo;this.currentVideoId = videoId;this.currentVoiceCall = voiceCall;this.drillInformation = []this.value = '';this.drillValue = '';const videoIdInt = videoIdgetTaskIdByCameraId(videoIdInt).then((response) => {if (response.data === undefined) {this.$modal.msgError("当前相机无在执行任务");this.taskPlanList = [];return false}this.taskPlanList = response.data; //任务信息数据// 调用钻孔放法或接口数据，绑定对应的id来获取对应数据if (response.data.taskDetailInfoList &&response.data.taskDetailInfoList.length > 0) {this.drillOptions = response.data.taskDetailInfoList; //钻孔数据this.selectedHoleCode = response.data.taskDetailInfoList[0].holeCode; // 假设选择第一个钻孔编号}});},// 分屏  初始化方法中调用this.changeSize(this.type)changeSize(value) {let arr = this.typeNewList;this.cameraIndex = 0;this.type = value;if (value === 24) {this.cameraIndex = 1;}if (value === 8) {this.cameraIndex = 6;}if (value === 6) {this.cameraIndex = 12;}this.typeList = arr.slice(0, this.cameraIndex);},// 全屏fullScreenClick() {this.typeList = []this.cameraValue = ''this.type = 24;this.typeList = this.typeNewList.filter(item => item.id === this.currentVideoId)},
}

css分屏样式 

  .home-right-top-video {width: 100%;height: calc(100% - 40px);.el-row {height: 100%;
//2*3.home-stye-2 {border-radius: 4px;height: calc(100% / 2 - 10px);margin-bottom: 10px;position: relative;.bg-purple {position: absolute;top: 0;height: 100%;}.videoEvent {width: 100%;height: 100%;.video {width: 100%;height: 100%;}}.camera-name {position: absolute;top: 5px;left: 20px;height: 100%;color: #1ea0f7;font-size: 16px;cursor: pointer;}}
//1*1.home-stye-1 {border-radius: 4px;height: calc(100% - 10px);margin-bottom: 10px;position: relative;.videoEvent {width: 100%;height: 100%;.video {width: 100%;height: 100%;}}.camera-name {position: absolute;top: 5px;left: 20px;height: 100%;color: #1ea0f7;font-size: 16px;cursor: pointer;}}}}
//3*4.home-stye-3 {border-radius: 4px;height: calc(100% / 3 - 10px);margin-bottom: 10px;position: relative;.videoEvent {width: 100%;height: 100%;.video {width: 100%;height: 100%;}}.camera-name {position: absolute;top: 5px;left: 20px;height: 100%;color: #1ea0f7;font-size: 14px;cursor: pointer;}}}}

注释：分屏实现逻辑：后端返回数据定义一个数组中，判断据type的值定义cameraIndex的长度，将定义的数组typeNewList使用slice进行截取（此方法不会修改原始数组），截取后的值赋值给typeList展示页面上