前端界面说明文档
概述
本目录包含智能视频分析系统的Web前端界面实现，提供了直观的数据可视化和交互功能。
文件结构
web.html
主要的Web界面文件，包含：
- 完整的HTML结构
- 内嵌CSS样式
- JavaScript交互逻辑
cls.js
行为分析相关的JavaScript类和函数库：
- 数据处理逻辑
- 图表配置
- 事件处理
主要功能
1. 摄像头管理
- 多摄像头切换
- 摄像头状态显示
- 实时数据更新
2. 数据展示
- 行为统计卡片
- 时间轴可视化
- 图表分析
- 行为分布图
- 时段活动图
- 异常行为统计
3. 交互功能
- 日期选择
- 关键词搜索
- 数据筛选
- 时间轴缩放
- 自动刷新
4. 报告功能
- 每日分析报告
- 数据导出
- 历史记录查询
界面组件
侧边栏
- 系统Logo
- 摄像头列表
- 导航菜单
主内容区
- 工具栏
- 搜索框
- 日期选择器
- 刷新按钮
- 筛选按钮
- 数据统计卡片
- 时间轴面板
- 图表区域
- 事件列表
样式主题
- 使用CSS变量定义主题色
- 响应式布局
- 现代化UI设计
- Material Icons图标
使用说明
开发环境
- 确保正确配置API基础URL
- 使用现代浏览器进行开发和测试
- 建议使用VS Code等支持HTML/CSS/JS的编辑器
部署步骤
- 将frontend目录下的所有文件部署到Web服务器
- 确保web.html能够正确访问后端API
- 检查所有静态资源是否正确加载
注意事项
- 保持与后端API的版本兼容
- 定期清理浏览器缓存
- 监控前端性能
- 注意数据刷新频率
开发建议
- 使用浏览器开发者工具进行调试
- 遵循代码注释规范
- 定期测试各项功能
- 注意性能优化