vue 数据大屏 视频监控智能分析系统 案例展示

vue项目案例 yekong 268℃

ui设计稿

ui设计提供数据大屏psd后缀源文件,源文件部分截图可以点此查看
数据大屏UI设计案例 视频监控智能分析系统

开发环境

vue3
nodejs v14

其他特点

页面随屏幕大小自适应

vue 数据大屏 视频监控智能分析系统

vue3前端模板

首页

左右两侧菜单都可以通过点击箭头实现展开收缩功能,地图按钮可以实现全屏以及退出全屏

演示地址:vue 数据大屏 视频监控智能分析系统 首页

首页截图
vue 数据大屏 视频监控智能分析系统 首页截图

登录

通过首页右上角的退出按钮可以进入到登录页。

演示地址:vue 数据大屏 视频监控智能分析系统 登录
登录截图
vue 数据大屏 视频监控智能分析系统 登录

日志页

演示地址:vue 数据大屏 视频监控智能分析系统 日志页
日志页截图

vue 数据大屏 视频监控智能分析系统 日志页

用户管理

演示地址:vue 数据大屏 视频监控智能分析系统 用户管理页
用户管理截图
用户管理截图
通过点击设置告警目标弹出告警设置弹窗
告警设置
通过点击编辑弹出修改界面
通过点击编辑弹出修改界面

用户详情

演示地址:vue 数据大屏 视频监控智能分析系统 用户管理详情页
用户管理截图

用户管理详情截图

摄像头列表

演示地址:vue 数据大屏 视频监控智能分析系统 摄像头列表
摄像头列表

摄像头详情

演示地址:vue 数据大屏 视频监控智能分析系统 摄像头详情
通过点击单屏、四分屏、九分屏、十六分屏可以分别进行切换
摄像头详情

电子围栏

点击电子围栏可以弹窗告警区域 进行警告绘制
1674955130584km7G1W

巡检路径

点击巡检路径 弹出巡检路径 可以进行巡检路径设置
巡检路径

布防时间

点击布防时间 弹出布防弹窗,可以进行布防时间配置
布防时间

工作模式设置

点击工作模式设置 弹出工作模式设置弹窗,可以进行相关配置
工作模式设置

摄像头添加

演示地址:vue 数据大屏 视频监控智能分析系统 摄像头添加
摄像头添加

系统管理

演示地址:vue 数据大屏 视频监控智能分析系统 系统管理
系统管理

组织机构

演示地址:vue 数据大屏 视频监控智能分析系统 组织机构
组织机构

组织机构管理编辑

演示地址:vue 数据大屏 视频监控智能分析系统 组织机构管理编辑
组织机构管理编辑

告警

演示地址:vue 数据大屏 视频监控智能分析系统 告警
告警

事件设置

过滤设置

智能告警

演示地址:vue 数据大屏 视频监控智能分析系统 智能告警
智能告警

行为识别详情

演示地址:vue 数据大屏 视频监控智能分析系统 行为识别详情
行为识别详情

故障信息管理

演示地址:vue 数据大屏 视频监控智能分析系统 故障信息管理
故障信息管理

预警

演示地址:vue 数据大屏 视频监控智能分析系统 预警
预警

更新日志

vue3数据大屏视频监控智能分析系统

2023年01月30日

1.登录页增加波浪效果 threejs 实现波浪的动画效果

2023年01月28日

1.将原有项目框架vue2升级为vue3 vite.
2.增加七牛云支持,通过执行命令pnpm run build-qiniu
将项目打包上传到七牛云加速,如果没有账户可以注册七牛云加速,用户每个月可以免费使用10G流量,免费流量不支持https
3.页面结构重构,将之前的目录重新做了梳理,让页面结构更清晰

喜欢 (2)