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展示页面上

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/183056.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Android进阶之路 - TextView文本渐变

那天做需求的时候&#xff0c;遇到一个小功能&#xff0c;建立在前人栽树&#xff0c;后人乘凉的情况下&#xff0c;仅用片刻就写完了&#xff1b;说来惭愧&#xff0c;我以前并未写过文本渐变的需求&#xff0c;脑中也仅有一个shape渐变带来的大概思路&#xff0c;回头来看想着…

tomcat核心组件及LVS组成作用

目录 1、tomcat 核心组件 简洁一点来说&#xff1a; 2、tomcat显拟主机 默认的三个端口 3、LVS集群 3.1、lvs负载均衡的三种模式 ​3.2、LVS组成作用 3.2.1、组成 3.2.2、作用&#xff1a;主要用于多服务器的负载均衡 1、tomcat 核心组件 web 容器&#xff1a;1、接…

福州大学《嵌入式系统综合设计》 实验九:ROI视频编码

一、实验目的 ROI视频编码即感兴趣区域视频编码&#xff0c;即针对感兴趣区域进行重点编码&#xff0c;提高编码质量&#xff0c;而对非感兴趣区域采用低质量编码。通过这种方法可以降低码率。本实验即让同学们能够在算能的FFMPEG接口下实现基于ROI的视频编码。 二、实验内容…

离散化笔记

文章目录 离散化的适用条件离散化的意思AcWing 802. 区间和CODECODE2 离散化的适用条件 离散化用于区间求和问题对于数域极大&#xff0c;而数的量很少的情况下 离散化的意思 背景&#xff1a;对于一个极大数域上的零星几个数进行操作后&#xff0c;求某段区间内的和 其实意思…

JSch线上出现com.jcraft.jsch.JSchException: channel is not opened.问题分析

JSch线上出现com.jcraft.jsch.JSchException: channel is not opened.问题分析 文章目录 JSch线上出现com.jcraft.jsch.JSchException: channel is not opened.问题分析1. 背景1.系统使用jsch这个框架做文件发送以及远程命令执行的操作,系统一直运行正常,直到某一个环境发现 2.…

关于我司在上海物联网行业协会展厅展示项目案例

1 项目背景 上海市物联网行业协会&#xff08;SIOT&#xff09;是由本市物联网行业同业企业及其他相关经济组织自愿组成、实行行业服务和自律管理的非营利性社会团体法人&#xff0c;于2012年&#xff0c;经上海市经济和信息化委同意&#xff0c;在上海市社团局登记成立。 本…

pat模拟题—7-11 两个序列的中位数

一个长度为n(n⩾1)的升序序列S,处在第2n​个位置的数称为序列S的中位数(median number),例如&#xff0c;序列S1{10,13,14,16,18,19}的中位数是14。两个序列的中位数是它们所有元素的升序序列的中位数&#xff0c;例如&#xff0c;S2{2,4,8,9,20,21},则S1和S2的中位数是13。现有…

vue3中 watch、watchEffect区别

watch是惰性执行&#xff0c;也就是只有监听的值发生变化的时候才会执行&#xff0c;但是watchEffect不同&#xff0c;每次代码加载watchEffect都会执行&#xff08;忽略watch第三个参数的配置&#xff0c;如果修改配置项也可以实现立即执行&#xff09;watch需要传递监听的对象…

【精选】Spring整合MyBatis,Junit 及Spring 事务Spring AOP面向切面详解

Spring整合MyBatis 搭建环境 我们知道使用MyBatis时需要写大量创建SqlSessionFactoryBuilder、SqlSessionFactory、SqlSession等对象的代码&#xff0c;而Spring的作用是帮助我们创建和管理对象&#xff0c;所以我们可以使用Spring整合MyBatis&#xff0c;简化MyBatis开发。 …

SDK emulator directory is missing

要进行uniapp真机测试&#xff0c;不得不安装配置一下安卓开发环境 &#xff0c;搞一个模拟器。。。然后又是各种坑。。对比来对比去还是IOS的环境使用着舒服&#xff0c;XCODE下载好&#xff0c;一切重点就是在编码了。。 安卓这个脑残货呀&#xff0c;哎&#xff0c;各种安装…

记录 | rm -rf 删除除了指定文件以外的文件,以及在Bash脚本中的使用方法

一般 rm -rf 的用法是&#xff1a; # 删除当前目录所有文件 rm -rf ./*但要是想删除当前目录除了 aa.txt以外的其他所有文件呢&#xff0c;该怎么办呢&#xff1f; 命令如下&#xff1a; rm -rf !(aa.txt)然而这个时候可能会报错&#xff1a; bash: !: event not found 这是因…

rust 基本数据类型

Rust 是 静态类型&#xff08;statically typed&#xff09;语言&#xff0c;也就是说在编译时就必须知道所有变量的类型&#xff0c;基本类型如下 整型 整数 是一个没有小数部分的数字长度有符号无符号8-biti8u816-biti16u1632-biti32u3264-biti64u64128-biti128u128archisi…

【开题报告】基于SSM的高端茶具选购系统的设计与实现

1.选题背景 近年来&#xff0c;随着人们生活水平的提高以及对健康生活的追求&#xff0c;茶文化逐渐在人们的生活中占据了重要地位。茶具作为茶文化的重要组成部分&#xff0c;对于制茶、品茶都有着至关重要的影响。因此&#xff0c;如何选购合适的高端茶具成为了越来越多茶友…

数据挖掘之时间序列分析

一、 概念 时间序列&#xff08;Time Series&#xff09; 时间序列是指同一统计指标的数值按其发生的时间先后顺序排列而成的数列&#xff08;是均匀时间间隔上的观测值序列&#xff09;。 时间序列分析的主要目的是根据已有的历史数据对未来进行预测。 时间序列分析主要包…

whatsapp信息群发脚本开发!

WhatsApp 作为全球广受欢迎的通讯应用&#xff0c;在我们的日常生活中扮演着重要角色&#xff0c;有时候&#xff0c;我们需要向大量联系人发送消息&#xff0c;比如营销推广、活动通知等。 一个个手动发送消息?那简直太落后了!今天&#xff0c;我们将探讨如何利用脚本开发实…

centos nginx安装及常用命令

nginx配置文件位置 nginx 安装有两种方式一种是联网一键下载&#xff0c;Nginx 配置文件在 /etc/nginx 目录下&#xff0c;一种是源码包可以无网下载&#xff0c;有两个配置文件启动地方一个是安装包存放位置&#xff0c;一是/usr/local/nginx/conf下&#xff0c;启动要看你…

MxL3706-AQ-R 2.0通道绑定同轴网络集成电路特性

MxL3706-AQ-R是Max线性公司的第三代MoCA2.0同轴网络控Z器SoC&#xff0c;可用于在现有的家庭同轴电缆上创建具有千兆位吞吐量性能的家庭网络。 该MxL3706-AQ-R工作在400MHz至1675MHz之间的无线电频率&#xff0c;并与satellite共存&#xff0c;电X和有线电视运营商的频率计划。…

前端:HTML鼠标样式及其对应的CSS属性值

1、默认箭头样式&#xff1a; selector {cursor: default; } 2、手型样式 selector {cursor: pointer; } 3、文本选择样式&#xff1a; selector {cursor: text; } 4、移动手型样式&#xff1a; selector {cursor: move; } 5、缩放手型样式&#xff1a; selector {cur…

Nginx 实现动静资源分离和负载均衡

1、相关概念 静态资源 .html .jpg .css .js等&#xff0c;没有后台数据库&#xff0c;不含程序&#xff08;如php、jsp、asp等&#xff09;的网页 动态资源 需要访问数据库的资源都属于动态资源 静态请求 用户发起的请求只访问到前端资源&#xff0c;不访问数据库 动态请求…

利用pytorch实现卷积形式的ResNet

利用pytorch实现卷积形式的ResNet 1. 导入必需的库2. 定义残差块3. 构建 ResNet 网络4. 实例化网络和训练 要使用 PyTorch 实现卷积形式的 ResNet&#xff08;残差网络&#xff09;&#xff0c;你需要遵循几个主要步骤。首先&#xff0c;让我们概述 ResNet 的基本结构。ResNet …