动态绑定class值 ，多种判断
:class="type === 8 ? 'home-stye-2' : type === 24 ? 'home-stye-1' : 'home-stye-3'"
javascript
<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部分定义变量及方法，主要查阅对象为分屏和全屏方法
javascript
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 = this
ws.onopen = function (event) {
}
const debouncedFunction = debounce(function (event) {
if (event.data !== '连接成功') {
let result = event.data
let 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.number
this.offlineCamera = res.cameraStatus.offDrillingNumber
this.onlineCamera = res.cameraStatus.onDrillingNumber
})
// 摄像仪通道
listCameraBase().then(response => {
this.typeNewList = response.rows
this.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 = videoId
getTaskIdByCameraId(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分屏样式
javascript
.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;
}
}
}
}