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