当前位置： 首页 > news >正文

vue3引入海康监控视频组件并实现非分屏需求一个页面同时预览多个监控视频(3)-接口分页篇（最终版）

news 2025/10/18 5:59:43

index.html

  <script src="static/haiKangWeb3.0/jquery-1.7.1.min.js"></script><script type="text/javascript" id="videonode" src="static/haiKangWeb3.0/webVideoCtrl.js"></script>

父组件index.vue

<template><div class="main-content" ><!--@wheel="handleScroll"--><div class="video-content"v-loading="loading"id="style-1"element-loading-text="加载中..."element-loading-svg-view-box="-10, -10, 50, 50"element-loading-background="rgba(122, 122, 122, 0.8)"ref="scrollContainer"><divv-for="(item, index) in cameraList":key="index"class="canvas-contaniner":loading="loading"><div  class="videobox"  v-if="item.status == 1"><videoMonitorings :hkvInfo="item" class="video" :videoId="item.id"   :key="index" /></div><div v-else-if="item.status == 0" class="videobox">暂无...</div></div><!-- 分页 --><div class="paginationBox"><el-paginationclass="flex-auto ml-2":total="total"v-model:current-page="pageNum":current-page="pageNum":page-size="pageSize"layout="pager"backgroundsize="large"@update:current-page="onCurrentChange"/></div></div></div>
</template>
<script setup lang="ts">
import { ref,  onMounted, onBeforeUnmount,computed,} from "vue";import {listApCamera,
} from "@/api/videoManage/videoConfiguration";import videoMonitorings from "./videoMonitorings.vue";import { message } from "@/utils/message";const loading = ref(false);const pageNum = ref(1) //当前页码const pageSize = ref(4) //每页数量const total = ref(0);const scrollContainer = ref(null);/** @以上hkList配置中 注意 loadingTime 和 id；其中loadingTime 建议和上一个时间间隔4S以上，id是动态加载生成填充的DOM树结构；* 如果间隔时间不够 或DOM的ID一样 可能出现画面加载不出来、画面覆盖重叠等情况；通过配置这2个参数可以避免这样多个摄像头只需要 增加 hkList的配置项即可；* */const dataListRef = ref([{ip: "", //IP地址port: "", //端口号username: "", //用户名password: "", //密码loadingTime: 1000, //间隔时长status:1,width: "828",height: "385",id: "divPlugin1",},{ip: "", //IP地址port: "", //端口号username: "",password: "",loadingTime: 5000,status:1,width: "828",height: "385",id: "divPlugin2",},{ip: "", //IP地址port: "", //端口号username: "",password: "",loadingTime: 9000,status:1,width: "828",height: "385",id: "divPlugin3",},{ip: "", //IP地址port: "", //端口号username: "",password: "",loadingTime: 13000,status:1,width: "828",height: "385",id: "divPlugin4",},]);const cameraList = ref([]);const videoParams = ref({})onMounted(async () => {onSearch();// window.addEventListener('scroll', handleScroll);});function onCurrentChange(page) {pageNum.value = page;sessionStorage.setItem('pageNumber', pageNum.value);onSearch()
}//滚动事件
// function handleScroll(event) {
//   const container = document.querySelector('.video-content');
//   const { scrollTop, scrollHeight, clientHeight } = container;
//   if (scrollTop + clientHeight >= scrollHeight && !loading.value){
//     event.preventDefault(); //阻止默认滚动事件
//     const deltaY = event.deltaY || event.detail || event.wheelDeltaY;
//     if (deltaY < 0 &&!loading.value) {
//       if(pageNum.value == 1 || pageNum.value == 0){
//         return false;
//       }
//       else if(pageNum.value>2){
//         pageNum.value = pageNum.value-1;
//         sessionStorage.setItem('pageNumber',pageNum.value-1);
//         onSearch()
//       }
//     }
//     else if(deltaY>0 &&!loading.value){
//       sessionStorage.setItem('pageNumber', pageNum.value);
//       onSearch()
//     }
//   }
// }async function onSearch() {loading.value = true;if(sessionStorage.getItem('pageNumber')){pageNum.value = sessionStorage.getItem('pageNumber')}cameraList.value = [];const { data } = await listApCamera({pageSize:pageSize.value, pageNum:pageNum.value});cameraList.value   = [...data.list].map(item=>{return{ip: item.ip, //IP地址port:item.port, //端口号username:item.username, //用户名password: item.password, //密码loadingTime: item.loadingTime,//睡眠加载时长status:item.status, //状态width: "836",height: "385",id: `divPlugin${item.id}`,}})total.value = data.total;pageNum.value = data.currentPage;console.log('cameraList.value=====>>>>>',cameraList.value);// message(`当前为第${pageNum.value}页`, {//   type: "success"// });// pageNum.value++setTimeout(() => {loading.value = false;}, 500);
}
onBeforeUnmount(() => {sessionStorage.setItem('pageNumber',1);// window.removeEventListener('scroll', handleScroll);
});</script>
<style lang="scss" scoped>.main-content {margin: 10px 10px 0 !important;overflow: auto;
}//定义滚动条轨道 内阴影+圆角*/
//#style-1::-webkit-scrollbar-track {
//  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
//  border-radius: 10px;
//  background-color: rgba(0, 0, 0, 0.52);
//
//}
//#style-1::-webkit-scrollbar
//{
//  width: 12px;
//  background-color: #0F65E87C
//}
//
//#style-1::-webkit-scrollbar-thumb
//{
//  border-radius: 20px;
//  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
//  background-color: #555;
//}.video-content {display: flex;flex-wrap: wrap;position: relative;width: 100%;height: 85vh;//overflow-y: scroll;//border: 1px solid red;.canvas-contaniner {width: 48.5%!important;height: 49.9%!important;position: relative;display: flex;justify-content: center;align-items: center;padding: 2px 1px;margin-right: 2px;overflow: hidden;}.videobox {display: flex !important;justify-content: center;align-items: center !important;width: 100% !important;height: 100% !important;font-size: 30px;color: #fff;position: relative !important;background: black;overflow: hidden;.video {width: 100% !important;height: 100% !important;object-fit: fill;background-color: #000;}}.paginationBox{display: flex!important;flex-direction: column!important;position: absolute;right: 0px;top: auto;//align-items: center;}::v-deep(.el-pager){display: flex;flex-direction: column;li{margin-bottom: 8px;}}.loading {display: flex;justify-content: center;align-items: center;width: 100%;height: 100%;font-size: 30px;color: #fff;position: absolute;background: black;}
}
</style>

子组件
videoMonitorings.vue

<template><div class="video"><div :id="videoId" class="plugin"/></div>
</template><script>
import {message} from "@/utils/message";
import {reactive,onMounted,onBeforeUnmount,onUnmounted,nextTick,ref,computed,watch
} from "vue";export default {name: "index",props: {videoId: {type: String},hkvInfo: {type: Object || Array,require: true},},setup(props, {emit}) {const hkvInfo = ref({});const videoId = ref();const channels = ref([]);const contentWidth = ref(0)const contentHeight  = ref(0)watch(props.hkvInfo, (newVal) => {if (newVal) {console.log('newVal', newVal)hkvInfo.value = newValvideoId.value = newVal.id;let t = newVal.loadingTime || 1000setTimeout(() => {initS();}, t)} else {initS();}}, {deep: true,immediate: true,})const initS = () => {//初始化WebVideoCtrl.I_InitPlugin({bWndFull: true, //是否支持单窗口双击全屏，默认支持 true:支持 false:不支持iWndowType: 1,// 画面分割数 1 就是1*1   2就是 2*2cbSelWnd: function (xmlDoc) {//此属性是窗口分割切换窗口时触发// clickStartRealPlay();// console.log("当前选择的窗口编号是1");},cbInitPluginComplete: function () {WebVideoCtrl.I_InsertOBJECTPlugin(videoId.value).then(() => {// 检查插件是否更新WebVideoCtrl.I_CheckPluginVersion().then((bFlag) => {if (bFlag) {let str = "检测到新的插件版本，双击开发包目录里的HCWebSDKPlugin.exe升级！"message(str, {type: "warning"});}});},() => {window.open('../../../../public/VideoWebPlugin/HCWebSDKPlugin.exe');let str1 = "插件初始化失败，请确认是否已安装插件；如果未安装，请双击开发包目录里的HCWebSDKPlugin.exe安装!";message(str1, {type: "warning"});});},});setTimeout(() => {handleResize();setVideoWindowResize(videoId.value, contentWidth.value, contentHeight.value);clickLogin();}, 1500);}// const getVideoStyle = computed(() => {//   return {//     width:contentWidth.value,//     height:contentHeight.value//   };// });//重置窗口大小const handleResize = () =>{contentWidth.value = document.getElementById(videoId.value).offsetWidth;contentHeight.value = document.getElementById(videoId.value).offsetHeight;WebVideoCtrl.I_Resize(contentWidth.value,contentHeight.value,)}// 根据设备宽高 和 windowchange 设置窗口大小const setVideoWindowResize = (pid, width, height) => {const mapContainer = document.getElementById(pid);// 初始化获取不到值if (mapContainer && (!mapContainer.style.width || !mapContainer.style.height)) {mapContainer.style.width =  `${width}px`;mapContainer.style.height = `${height}px`;console.log('mapContainer',mapContainer)}}// 登录const clickLogin = () => {let szIP = hkvInfo.value.ip,szPort = hkvInfo.value.port,szUsername = hkvInfo.value.username,szPassword = hkvInfo.value.password;const iRet = WebVideoCtrl.I_Login(szIP, 1, szPort, szUsername, szPassword, {timeout: 3000,success: function (xmlDoc) {console.log('xmlDoc',xmlDoc)setTimeout(function () {setTimeout(function () {getChannelInfo();}, 1000);getDevicePort();}, 10);},error: function (err) {console.log('hkvInfo',hkvInfo)console.log("登录-err===>", err);},});if (iRet === -1) {console.log(szIP +"_"+ szPort + " 已登录过！");// 登录过直接进行预览clickStartRealPlay();}}const getDevicePort = () => {let szDeviceIdentify = hkvInfo.value.ip;if (null == szDeviceIdentify) {return;}WebVideoCtrl.I_GetDevicePort(szDeviceIdentify).then((oPort) => {console.log("获取端口", oPort);});}//获取通道const getChannelInfo = () => {let szDeviceIdentify = hkvInfo.value.ip + '_' + hkvInfo.value.port;if (null == szDeviceIdentify) {return;}console.log('szDeviceIdentify==============>', szDeviceIdentify);// 模拟通道WebVideoCtrl.I_GetAnalogChannelInfo(szDeviceIdentify, {success: function (xmlDoc) {clickStartRealPlay();},error: function (oError) {console.log(szDeviceIdentify + "模拟通道", oError.errorCode, oError.errorMsg);}});// 数字通道WebVideoCtrl.I_GetDigitalChannelInfo(szDeviceIdentify, {success: function (xmlDoc) {clickStartRealPlay();},error: function (oError) {console.log(szDeviceIdentify + " 数字通道", oError.errorCode, oError.errorMsg);}});}// 开始预览const clickStartRealPlay = (iStreamType) => {let g_iWndIndex = 0;const oWndInfo = WebVideoCtrl.I_GetWindowStatus(g_iWndIndex) || null;const szDeviceIdentify = hkvInfo.value.ip + '_' + hkvInfo.value.port,iChannelID = 1,bZeroChannel = false;if ("undefined" === typeof iStreamType) {iStreamType = 1;}if (null == szDeviceIdentify) {return;}const startRealPlay = function () {WebVideoCtrl.I_StartRealPlay(szDeviceIdentify, {iStreamType: iStreamType,iChannelID: iChannelID,bZeroChannel: bZeroChannel,success: function () {WebVideoCtrl.I_Logout(szDeviceIdentify);console.log(szDeviceIdentify, "开始预览！");},error: function (oError) {console.log(szDeviceIdentify + "开始预览失败！");},});};//已经在播放了，先停止if (oWndInfo != null) {WebVideoCtrl.I_Stop({success: function () {startRealPlay();}});} else {startRealPlay();}}// 停止预览const clickStopRealPlay = () => {WebVideoCtrl.I_Stop({success: function () {console.log("停止预览成功！");},error: function (oError) {console.log("停止预览失败！");},});}//登出设备const loginOut = () => {const szDeviceIdentify = hkvInfo.value.ip + "_" + hkvInfo.value.port;WebVideoCtrl.I_Logout(szDeviceIdentify);}//停止全部播放const stopAllPlay = () => {WebVideoCtrl.I_StopAllPlay();}//销毁插件const breakDom = () => {WebVideoCtrl.I_DestroyPlugin()}const viewReload = () => {window.location.reload();}onMounted(() => {window.addEventListener("resize", handleResize);});onBeforeUnmount(() => {loginOut();stopAllPlay();window.removeEventListener(viewReload());window.removeEventListener("resize", handleResize);});onUnmounted(() => {setTimeout(() => {breakDom();}, 100)})return {loginOut,stopAllPlay,breakDom,hkvInfo,contentWidth,handleResize,videoId,// getVideoStyle,contentHeight,initS,viewReload,channels,clickLogin,clickStopRealPlay,clickStartRealPlay,setVideoWindowResize,getChannelInfo,getDevicePort,};}};
</script><style scoped lang="scss">
.video {width: 100%;height: 100%;.plugin{width: 100%!important;height: 100%!important;z-index: 1!important;}
}</style>
http://www.dtcms.com/a/494512.html

相关文章：

  • 新华三H3CNE网络工程师认证—OSPF多区域概念与配置
  • 软件开发商网站html网站用什么空间
  • 免费炫酷网站模板wordpress 模板 破解版
  • Linux1017 shell:awk print printf
  • 服务器对网站的作用有哪些？
  • linux系统编程（十③）RK3568 socket之 TCP 服务器的实现
  • 29、构建可视化日志管理服务器
  • 代码解析：《AGENTREVIEW: Exploring Peer Review Dynamics with LLM Agents》
  • 嵌入式软件面试
  • 安卓前后端连接教程
  • linux系统编程（十③）RK3568 socket之 TCP 服务器的实现【更新客户端断开重连依旧可以收发】
  • Windows系统错误6118全面解决方案：修复此工作组的服务器列表当前无法使用
  • 衡阳网站页面设计公司昆明抖音代运营
  • 昆明网站建设是什么意思WordPress添加PHP代码
  • 前端基础——HTML练习项目：填写简历信息
  • Python实现的服务器日志监控脚本
  • Git合并冲突解决方法
  • 计算机毕业设计选题推荐：基于SpringBoot和Vue的爱心公益网站
  • 解密Anthropic的MCP Inspector：从协议调试到AI应用开发的全栈架构之旅
  • 数据结构——二十一、哈夫曼树(王道408)
  • Amazon ElastiCache 全解析：打造高性能的智能缓存架构
  • Set数据结构【ES6】
  • 【算法与数据结构】图的遍历与生成树实战：从顶点3出发，DFS/BFS生成树完整代码+流程拆解
  • AI游戏素材创作全攻略
  • 杭州网站app开发公司大连市网站制作电话
  • C标准库--错误信息＜errno.h＞
  • SpringCloud 获取Feign请求的真实IP地址
  • 目标检测算法在家禽养殖领域中的应用
  • MUI组件库与主题系统全面指南
  • 用 PyTorch 搭建 CIFAR10 线性分类器：从数据加载到模型推理全流程解析