ui设计稿
ui设计提供数据大屏psd后缀源文件,源文件部分截图可以点此查看
数据大屏UI设计案例 视频监控智能分析系统
如果您需要设计属于自己的数据可视化大屏 请联系我们微信:17331886870
开发环境
vue3
nodejs v14
其他特点
页面随屏幕大小自适应
vue 数据大屏 视频监控智能分析系统
vue3前端模板
首页
左右两侧菜单都可以通过点击箭头实现展开收缩功能,地图按钮可以实现全屏以及退出全屏
首页截图
登录
通过首页右上角的退出按钮可以进入到登录页。
演示地址:vue 数据大屏 视频监控智能分析系统 登录
登录截图
日志页
演示地址: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.页面结构重构,将之前的目录重新做了梳理,让页面结构更清晰
其他说明
客户项目,仅做展示