vue3 数据可视化大屏 视频监控可视化数据大屏
开发环境
nodejs 16
开发框架
vue3+vite+js
分辨率
1920*1080
关联项目
当前项目为视频监控智能分析系统完整版，如果需要精简版项目请访问视频监控数据大屏。
vue3 数据可视化大屏 视频监控智能分析系统-电子地图
演示地址
效果截图
动画效果
视频监控智能分析系统-电子地图模块介绍
中间地图
中间地图，采用百度地图，自定义图片渲染，渲染设备到地图中，点击放大缩小图标，可以实现地图的缩放，全屏图标点击后可以进入全屏，再次点击后退出全屏。
摄像头定位
显示摄像头的信息，可以通过搜索输入框，选择设备，地图会将选择的设备在地图中心展示。
动态图片装饰，渲染自定义数据。
告警信息
告警信息，以滚动列表的形式展示，并设有三级，以三种不同的颜色展示。
故障列表
故障列表滚动展示故障信息。
视图预览
使用video.js自动播放视频。
视频监控智能分析系统-告警预警
演示地址
效果截图
动画效果
视频监控智能分析系统-告警查询
使用mockjs模拟交互，使用XLSX实现数据导出
演示地址
效果截图
视频监控智能分析系统-数据统计
演示地址
效果截图
视频监控智能分析系统-告警设置
演示地址
效果截图
视频监控智能分析系统-摄像头列表
演示地址
效果截图
视频监控智能分析系统-故障信息管理
演示地址
效果截图
视频监控智能分析系统-组织机构管理
演示地址
效果截图
视频监控智能分析系统-用户管理
演示地址
效果截图
视频监控智能分析系统-摄像头管理
演示地址
电子围栏
使用canvas实现电子围栏的绘制
巡检路径
列表展示巡检路径，并且可以通过点击图标实现列表的排序，以及新增移除功能。
布防时间
通过点击拖动实现布防时间功能
工作模式
可以通过多选全选反选 选择工作模式
视频监控智能分析系统-登录
演示地址
效果截图
数据交互
使用mockjs 来生成模拟数据，使用axios来进行接口请求。
mockjs数据生成部分代码
// 故障列表
//vue3 使用mockjs 生成故障列表接口 title 'xxxx发生故障故障原因:xxxx' 日期随机日期 今年日期格式(YYYY-MM-DD) 生成20条数据
{
url: '/api/fault-list',
method: 'get',
response: () => {
const faultList = [];
function getRandomDateThisYear() {
const startOfYear = dayjs().startOf('year');
const endOfYear = dayjs().endOf('year');
const randomMillisecond = Math.random() * (endOfYear.valueOf() - startOfYear.valueOf()) + startOfYear.valueOf();
return dayjs(randomMillisecond).format('YYYY-MM-DD');
}
for (let i = 0; i < 20; i++) {
const faultTitle = `设备``{Mock.Random.integer(1, 100)}发生故障，故障原因：``{Mock.Random.cword(5, 10)}`;
const faultDate = getRandomDateThisYear();
faultList.push({
title: faultTitle,
date: faultDate,
});
}
return {
data: faultList,
message: '成功',
code: 0
}
},
},
接口请求封装部分代码
// 故障列表
export function faultList(data) {
return request({
url: '/api/fault-list',
method: 'get',
data
})
}
接口请求实例
使用await/async进行数据请求
async getData() {
try {
const res = await cameraLocation();
this.list = res.data;
} catch (err) {
console.error(err);
}
},
实例效果
更新日志
2023年10月22日
首页视频高度调整，铺满处理。
更多可视化数据大屏
源码下载
项目基于vue3+vite+js开发 nodejs 16，购买代码请确保有相关开发基础
虚拟产品一经售出 概不退款请谅解
