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展示页面上
相关文章:
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-c…...
微信小程序本地和真机调试文件上传成功但体验版不成功
可能是微信小程序ip白名单的问题,去微信公众平台(小程序)上设置小程序的ip白名单 1、在本地中取消不校验 然后在本地去上传文件,就会发现控制台报错了,会提示一个https什么不在ip白名单,复制那个网址 2、…...
windows系统用nginx部署web应用
要在Windows系统上使用Nginx进行本地部署和运行Web应用程序,可以按照以下步骤进行操作: 1.首先下载nginx,需要去nginx官网: nginx: download 下载最新版本的: 2.解压缩Nginx:找个磁盘位置,新…...
如何利用Python进行数据归一化?
1. 知识简介 数据归一化是数据预处理的一项重要步骤,它对于提高模型性能、加速模型训练、避免数值计算问题以及提高模型的泛化能力都具有重要作用。进行数据归一化可以起到以下作用:消除量纲影响,加速模型收敛,提高模型性能&…...
Linux 基本语句_13_消息队列
概念: 不同进程能通过消息队列来进行通信,不同进程也能获取或发送特定类型的消息,即选择性的收发消息。 一般一个程序采取子进程发消息,父进程收消息的模式 常用函数功能: fork(); // 创建子进程 struct msgbuf{ …...
Maven——仓库
Maven坐标和依赖是任何一个构件在Maven世界中的逻辑表示方式;而构件的物理表示方式是文件,Maven通过仓库来统一管理这些文件。 1、何为Maven仓库 在Maven世界中,任何一个依赖、插件或者项目构建的输出,都可以称为构件。例如&…...
Pandas:一个实用高效的Python数据处理库
个人网站 文章首发公众号:小肖学数据分析 导语: Pandas是一个强大且易于使用的Python数据处理库,广泛应用于数据分析和数据科学领域。本文将介绍Pandas库的基本概念、功能和使用方法,并提供详细的示例,帮助小白快速…...
Spring第三课,Lombok工具包下载,对应图书管理系统列表和登录界面的后端代码,分层思想
目录 一、Lombok工具包下载 二、前后端互联的图书管理系统 规范 三、分层思想 三层架构: 1.表现层 2.业务逻辑层 3.数据层 一、Lombok工具包下载 这个工具包是为了做什么呢? 他是为了不去反复的设置setting and getting 而去产生的工具包 ⚠️工具…...
DDoS高防IP到底是什么?
DDoS高防IP是提供一个带防御的IP,主要是针对网络中的DDoS攻击进行保护,是针对互联网服务器遭受大流量的DDoS攻击后,导致服务不可用的情况下,用户可以通过配置高防IP,将攻击流量引流到高防IP上,从而确保源站…...
el-row错位问题解决
<el-row type"flex" style"flex-wrap:wrap">...
torch indices x[indices] 内存不足崩溃,python进程锁报错。
报错 Process Process-167: Traceback (most recent call last):File "/usr/lib/python3.10/multiprocessing/process.py", line 317, in _bootstraputil._exit_function()File "/usr/lib/python3.10/multiprocessing/util.py", line 360, in _exit_funct…...
第二证券:机构争分夺秒抢滩 金融大模型落地为时尚早
本年以来,大模型席卷金融业,一夜之间,简直悉数金融场景都在探索适配大模型接口。但是,志向丰满,实践骨感。有大型金融组织IT部分人士比方,金融大模型从战略规划到安顿落地,有着从“卖家秀”走到…...
C#WPF使用MaterialDesign 显示带遮罩的对话框
第一步定义对话框 <UserControlx:Class="TemplateDemo.Views.Edit.UCEditUser"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:d="http://schemas.m…...
Nuxt.js:下一代Web开发框架的革命性力量
文章目录 一、Nuxt.js简介二、Nuxt.js的特点1. 集成Vue.js和Node.js2. 自动代码分割和优化3. 服务端渲染(SSR)4. 强大的路由管理5. 丰富的插件系统 三、Nuxt.js的优势1. 提高开发效率2. 降低维护成本3. 提高用户体验 四、Nuxt.js在实际应用中的案例1. 电…...
【JavaEE初阶】死锁问题
目录 一、死锁的三种典型场景 1、一个线程,一把锁 2、两个线程,两把锁 3、N个线程,M把锁 死锁,是多线程代码中的一类经典问题。我们知道加锁是能解决线程安全问题的,但是如果加锁的方式不当,就可能产生死…...
uniapp 打包的 IOS打开白屏 uniapp打包页面空白
uniapp的路由跟vue一样,有hash模式和history模式, 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载。 如果不想要很丑的 hash,我们可以用路由的 history 模式,这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。…...
在 Redis 中使用 JSON 文档:命令行界面(CLI)和 Navicat 集成
Redis,因其极高的性能而闻名,是一款多功能的 NoSQL 数据库,擅长处理键值对。虽然 Redis主要用于处理简单数据结构,但是同样支持更多复杂的数据类型,如列表、集合甚至是 JSON 文件。在本文,我们将深入到 Red…...
Win Server 2019远程桌面服务部署
一、添加远程桌面授权服务 服务器管理 - 添加角色和功能打开“添加角色和功能向导”窗口,选择基于角色或给予功能安装: 打开服务器管理,打开角色和功能,添加远程回话主机和远程桌面授权 image.png 以上配置完成后使用期限为120…...
vue3-在自定义hooks使用useRouter 报错问题
文章目录 前言一、报错分析报错的Vue warn截图:查看文档 二、那么在hook要怎么引入路由呢? 前言 记录在vue3项目中,hook使用useRouter 报错问题 一、报错分析 报错的Vue warn截图: 警告 inject() can only be used inside setup…...
深度学习框架:Pytorch与Keras的区别与使用方法
☁️主页 Nowl 🔥专栏《机器学习实战》 《机器学习》 📑君子坐而论道,少年起而行之 文章目录 Pytorch与Keras介绍 Pytorch 模型定义 模型编译 模型训练 输入格式 完整代码 Keras 模型定义 模型编译 模型训练 输入格式 完整代…...
谷歌浏览器插件
项目中有时候会用到插件 sync-cookie-extension1.0.0:开发环境同步测试 cookie 至 localhost,便于本地请求服务携带 cookie 参考地址:https://juejin.cn/post/7139354571712757767 里面有源码下载下来,加在到扩展即可使用FeHelp…...
边缘计算医疗风险自查APP开发方案
核心目标:在便携设备(智能手表/家用检测仪)部署轻量化疾病预测模型,实现低延迟、隐私安全的实时健康风险评估。 一、技术架构设计 #mermaid-svg-iuNaeeLK2YoFKfao {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg…...
【SpringBoot】100、SpringBoot中使用自定义注解+AOP实现参数自动解密
在实际项目中,用户注册、登录、修改密码等操作,都涉及到参数传输安全问题。所以我们需要在前端对账户、密码等敏感信息加密传输,在后端接收到数据后能自动解密。 1、引入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId...
Springcloud:Eureka 高可用集群搭建实战(服务注册与发现的底层原理与避坑指南)
引言:为什么 Eureka 依然是存量系统的核心? 尽管 Nacos 等新注册中心崛起,但金融、电力等保守行业仍有大量系统运行在 Eureka 上。理解其高可用设计与自我保护机制,是保障分布式系统稳定的必修课。本文将手把手带你搭建生产级 Eur…...
OpenLayers 分屏对比(地图联动)
注:当前使用的是 ol 5.3.0 版本,天地图使用的key请到天地图官网申请,并替换为自己的key 地图分屏对比在WebGIS开发中是很常见的功能,和卷帘图层不一样的是,分屏对比是在各个地图中添加相同或者不同的图层进行对比查看。…...
NXP S32K146 T-Box 携手 SD NAND(贴片式TF卡):驱动汽车智能革新的黄金组合
在汽车智能化的汹涌浪潮中,车辆不再仅仅是传统的交通工具,而是逐步演变为高度智能的移动终端。这一转变的核心支撑,来自于车内关键技术的深度融合与协同创新。车载远程信息处理盒(T-Box)方案:NXP S32K146 与…...
排序算法总结(C++)
目录 一、稳定性二、排序算法选择、冒泡、插入排序归并排序随机快速排序堆排序基数排序计数排序 三、总结 一、稳定性 排序算法的稳定性是指:同样大小的样本 **(同样大小的数据)**在排序之后不会改变原始的相对次序。 稳定性对基础类型对象…...
【Nginx】使用 Nginx+Lua 实现基于 IP 的访问频率限制
使用 NginxLua 实现基于 IP 的访问频率限制 在高并发场景下,限制某个 IP 的访问频率是非常重要的,可以有效防止恶意攻击或错误配置导致的服务宕机。以下是一个详细的实现方案,使用 Nginx 和 Lua 脚本结合 Redis 来实现基于 IP 的访问频率限制…...
麒麟系统使用-进行.NET开发
文章目录 前言一、搭建dotnet环境1.获取相关资源2.配置dotnet 二、使用dotnet三、其他说明总结 前言 麒麟系统的内核是基于linux的,如果需要进行.NET开发,则需要安装特定的应用。由于NET Framework 是仅适用于 Windows 版本的 .NET,所以要进…...
「Java基本语法」变量的使用
变量定义 变量是程序中存储数据的容器,用于保存可变的数据值。在Java中,变量必须先声明后使用,声明时需指定变量的数据类型和变量名。 语法 数据类型 变量名 [ 初始值]; 示例:声明与初始化 public class VariableDemo {publi…...
