- 博客(42)
- 收藏
- 关注
RSS订阅原创 vue3引入海康监控视频组件并实现非分屏需求一个页面同时预览多个监控视频(3)-接口分页篇（最终版）
本文介绍了基于Vue3和TypeScript的视频监控系统前端实现。系统通过videoMonitorings组件展示海康威视摄像头视频流，使用分页控制显示多个摄像头画面。主要功能包括：1）通过listApCameraAPI获取摄像头列表；2）分页展示摄像头视频（每页4个）；3）动态配置摄像头参数（IP、端口、加载时间等）；4）使用v-loading实现加载动画效果。代码中实现了分页切换、数据缓存（sessionStorage）等功能，并注释了原本的滚动加载逻辑，改为传统分页方式。样式部分采用SCSS编写，确
2025-10-17 10:44:16
442
2
原创 vue3引入海康监控视频组件并实现非分屏需求一个页面同时预览多个监控视频(2)
海康监控视频多画面加载实现方案 该代码实现了一个海康监控视频多画面动态加载功能，主要特点包括： 使用WebVideoCtrl.js插件实现视频监控功能 通过watch监听视频参数变化动态初始化视频窗口 支持响应式布局，根据窗口大小调整视频画面尺寸 实现设备登录、通道获取和实时预览功能 提供插件版本检测和自动安装提示 关键实现点： 使用WebVideoCtrl.I_InitPlugin初始化插件 通过WebVideoCtrl.I_Login进行设备登录 调用getChannelInfo获取通道信息 实现视频窗
2025-09-10 16:19:17
453
原创 vue根据url下载文档
这段代码实现了一个通过URL下载文档的功能。它首先从URL中提取文件名，然后使用fetch API获取文件内容并转换为二进制数据。接着创建Blob对象和临时URL，通过动态创建a标签并模拟点击实现下载。最后释放内存资源。该方案能有效解决跨域下载问题!
2025-08-15 09:44:56
349
原创 vue3引入海康监控视频组件并实现非分屏需求一个页面同时预览多个监控视频(1)；
本文介绍了在Vue项目中集成海康威视Web3.0视频监控组件的实现方法。主要内容包括： 文件引入：在index.html中引入jQuery和海康WebVideoCtrl.js文件 组件封装：创建videoMonitorings.vue子组件，通过props接收视频ID和设备信息 核心功能实现： 使用WebVideoCtrl API进行插件初始化 实现视频窗口大小自适应调整 设备登录认证流程 获取设备通道信息 响应式处理：通过watch监听设备信息变化，自动重新初始化组件 该组件封装了海康威视WebSDK的主
2025-07-04 16:14:32
677
3
原创 Windows10下docker安装及遇到的问题并且在docker快速部署onlyoffice
解决：安装wsl ，可以直接网络搜索下载或者Microsoft store商城下载，装好之后重启doker或者重启电脑就可以安装成功了我这里就只遇到了这两个问题；如果遇到其他，自行解决即可；需要重启电脑,重启时按F2进入BIOS模式,红框里默认是关闭，需要改成开启，按F10保存并重启，然后置灰的选项就可以点击开启啦；我这里用到的是阿里云的加速器，创建自己的阿里云账号，点击镜像工具—镜像加速器–就可以获取自己的专属加速器链接啦，；这里下载的是window版的doker，你们根据自身实际情况下载；
2023-06-07 19:57:15
3559
1
原创 Argument of type ‘‘ is not assignable to parameter of type ‘never‘.
最近在写ts代码，记录下开发中遇到的代码规范问题。
2022-11-23 14:16:47
11201
原创 JavaScript获取元素下标的几种方法
方法一：给每个按钮 自定义data-index属性for(var i = 0; i < btns.length; i++){ btns[i].setAttribute('data-index',i) btns[i].onclick = function(){ console.log(this.dataset['index']) } }方法二：存下标for(var i = 0; i < btns.length; i++){ btns[
2022-05-26 12:58:33
4970
原创 pngquant failed to build, make sure that libpng-dev is installed
vue项目运行安装依赖报错：Error: pngquant failed to build, make sure that libpng-dev is installed解决方案如下：重新安装pngquantnpm install --save-dev pngquant安装成功并运行成功
2022-04-11 11:20:14
8147
原创 vue3结合ts，导入vue项目文件，代码出现红色波浪线
问题如下：报错原因：ts识别不出.vue文件！解决方案如下:在根目录下面添加一个xxx.d.ts文件，declare module '*vue' { import { ComponentOptions } from "vue"; const ComponentOptions: ComponentOptions export default ComponentOptions}添加完文件之后，可能还会出现报错的红色波浪线，需要把这个xxx.d.ts文件打开一下，报错就没有了
2022-03-16 17:46:29
13226
1
原创 error @typescript-eslint/eslint-plugin@5.3.0: The engine “node“ is incompatible with this module.
当我用yarn安装项目时，报错如下：执行一下命令：yarn config set ignore-engines true
2022-03-16 10:30:42
3585
2
原创 element-ui el-tree 获取当前选中数据（含半选中的父节点）
当不给el-tree组件设置check-strictly 属性时，默认为false，但是回显会有一些没有选中的节点都勾选上了，怎么解决呢？重新回到设置 check-strictly 为 true 时，父子级不互相关联，挨个点击用户体验不好的问题，同时也避免了出现半选的情况。需要简化用户操作:(1)当点击复选框勾选父节点时，其父节点子节点会统一跟随选中，为选中状态(1)当点击复选框勾选取消选中时，其父节点子节点会统一跟随为未选中状态el-tree 标签属性 node-key：每个树节点用.
2021-08-31 16:22:22
7288
原创 Vue前端导出表格vendor-Export2Excel-Blob(@/vendor/Export2Excel)
第一步跟同级views目录创建vendor文件夹目录，在该文件下放Export2Excel.js/Blob.jsExport2Excel.js内容如下://a. Export2Excel.js/* eslint-disable */require('script-loader!file-saver');require('script-loader!@/vendor/Blob');import XLSX from 'xlsx'function generateArray(table) {
2021-07-29 12:11:21
1907
2
原创 vue3.0+qrcodejs2附带二维码下载png格式、画出二维码功能
1.在页面引入jsimport QRCode from "qrcodejs2";2.请求接口画出二维码 //画出二维码功能 this.$http({ url: Api.alipayoauthmobile.url+"/"+this.customerid, method: Api.alipayoauthmobile.method, data:{} }).then(res => { if(res.status === 200) {
2021-07-02 16:54:52
789
原创 element-plus里的el-table获取表格数据索引下标
首先要在表格里添加 ：row-class-name=“rowClassName” <el-table :data="tableData" ref="multipleTable" :row-class-name="rowClassName" border > <el-table-column prop="name4" label="所属部门"></el-table-column> <el-table-column
2021-06-04 13:43:32
6800
1
原创 vue+elementUI 表格合并单元格
1.效果图如下:2.原理：合并单元格，如果id列值一致，则合并1、getSpanData(data)方法 data就是我们从后台拿到的数据，通常是一个数组；2、spanArr是一个空的数组，用于存放每一行记录的合并数；3、pos是spanArr的索引。如果是第一条记录（索引为0），向数组中加入１，并设置索引位置；如果不是第一条记录，则判断它与前一条记录是否相等，如果相等，则向spanArr中添入元素0，并将前一位元素＋１，表示合并行数＋１，以此往复，得到所有行的合并数，0即表示该行不显示
2021-05-10 14:20:46
1385
原创 Vue+elementUI＜el-input＞ 输入框手机号校验
1.手机号是否正确校验 <el-input v-model="conentortel" oninput="if(value.length>11)value=value.slice(0,11)" type="Number" onkeyup="this.value = this.value.replace(/[^\d]/g,'');" placeholder="负责人电话" style="width:150px" prop="percent"></el-input>
2021-04-24 14:06:04
5612
3
原创 vue+element-UI中el-select下拉框搜索 :filter-method自定义事件
1.添加 :filter-method=“printername” 自定义搜索事件<el-form-item label="打印机" prop="printerid"> <el-select v-model="cateinfo.printerid" placeholder="请选择打印机" clearable style="width:150px;" filterable :filter-method="printername"> <el-option v-for="
2021-04-21 11:06:19
3401
原创 Vue 限制input输入数字 不可小数
1.Vue 限制input输入数字 不可小数 <el-input class="input-sort" onkeyup="this.value = this.value.replace(/[^\d]/g,'');" placeholder="请输入" v-model.trim="scope.row.amount" clearable></el-input>
2021-04-16 11:45:48
1993
1
原创 Vue中的发射事件:this.$bus.$emit与监听事件:this.$bus.$on
创建一个vue实例,且在main.js文件里全局引用import Vue from 'vue'const bus = new Vue()export default bus 2.main.jsimport bus from '@/utiles/bus.js'3.发射事件 setTimeout(() => { //row 代表要传递的参数数据 this.$bus.$emit("yulan", row); }, 100);4.监听事件m.
2021-03-15 17:30:30
5655
原创 vue+element-ui Cascader 级联选择器 父级、子级 如何通过后端返回数据绑定其数据源呢且遇到无法选中值的问题解决办法？
期待的效果图如下:这里是后端返回的数据格式:1. 通过后端返回数据绑定其级联数据源的值（父、子级同时展示 ） html代码块 <el-cascader v-model="consult.catalog" :options="options" :props="props" collapse-tags clearable></el-cascader>js代码块
2021-03-11 13:59:39
3279
1
原创 vue el-date-picker组件 选中时获取当前日期时间带时分秒
html部分<el-form-item label="借阅开始时间" required prop="Startdate"> <el-date-picker type="datetime" placeholder="请选择" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" v-model="consult.Startdate"> </el-date-picker></
2021-02-18 14:45:15
3344
原创 vue-elementui制作表格（二）
用vue制作表格效果图如下：代码块：在这里插入代码片<template> <div class="contents"> <div> <el-dialog title="档案转出通知单" :close-on-click-modal="false" :visible.sync="dialogFormVisible" width="60%"> <div id="printTest2"> &
2021-02-09 20:34:00
2098
原创 vue+elementui select下拉框可以显示两个值
<el-select collapse-tags multiple v-model="consult.catalog"> <el-option v-for="(item,index) in cataloglist" :key="index" :value="item.id" :label="`${item.fileNumber}、${item.fileType}`" > </el-option></el-select>主要代.
2021-02-05 15:51:18
3635
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人