95 lines
2.2 KiB
Markdown
95 lines
2.2 KiB
Markdown
# 入侵报警组件设计文档
|
||
|
||
## 整体架构图
|
||
|
||
```mermaid
|
||
flowchart TD
|
||
A[用户操作] --> B[AlarmRecord组件]
|
||
B --> C[时间段选择器]
|
||
B --> D[告警数据列表]
|
||
B --> E[数据获取逻辑]
|
||
C --> E
|
||
E --> D
|
||
D --> F[告警图片展示]
|
||
```
|
||
|
||
## 分层设计和核心组件
|
||
|
||
### 1. 组件层
|
||
- **AlarmRecord.vue**: 主组件，包含整体布局和逻辑控制
|
||
|
||
### 2. UI组件层
|
||
- **el-date-picker**: 时间段选择器
|
||
- **el-table**: 告警数据列表
|
||
- **el-image**: 告警图片展示
|
||
- **el-button**: 操作按钮
|
||
- **el-loading**: 加载状态显示
|
||
|
||
### 3. 数据处理层
|
||
- **数据获取函数**: 模拟API调用，获取告警数据
|
||
- **数据处理函数**: 处理和格式化数据
|
||
|
||
## 模块依赖关系图
|
||
|
||
```mermaid
|
||
graph LR
|
||
AlarmRecord --> ElementPlus
|
||
AlarmRecord --> Vue
|
||
AlarmRecord --> MockData
|
||
```
|
||
|
||
## 接口契约定义
|
||
|
||
### 组件属性
|
||
无特定属性要求，作为独立组件使用
|
||
|
||
### 数据结构定义
|
||
|
||
```typescript
|
||
interface AlarmRecord {
|
||
id: string; // 告警ID
|
||
alarmTime: string; // 告警时间
|
||
deviceName: string; // 来源设备
|
||
imageUrl: string; // 告警图片URL
|
||
status?: string; // 告警状态（可选）
|
||
location?: string; // 告警位置（可选）
|
||
}
|
||
```
|
||
|
||
### 方法定义
|
||
|
||
```typescript
|
||
// 获取告警数据
|
||
const fetchAlarmData = async (startTime: string, endTime: string): Promise<AlarmRecord[]> => {
|
||
// 实现数据获取逻辑
|
||
};
|
||
|
||
// 刷新数据
|
||
const refreshData = (): void => {
|
||
// 实现数据刷新逻辑
|
||
};
|
||
```
|
||
|
||
## 数据流向图
|
||
|
||
```mermaid
|
||
sequenceDiagram
|
||
participant User
|
||
participant Component as AlarmRecord组件
|
||
participant DataFetch as 数据获取函数
|
||
participant Table as 数据列表
|
||
|
||
User->>Component: 选择时间段
|
||
Component->>Component: 触发refreshData
|
||
Component->>DataFetch: 调用fetchAlarmData
|
||
DataFetch-->>Component: 返回告警数据
|
||
Component-->>Table: 更新表格数据
|
||
Table-->>User: 显示告警列表
|
||
```
|
||
|
||
## 异常处理策略
|
||
|
||
1. **数据获取失败**: 显示错误提示，使用mock数据
|
||
2. **图片加载失败**: 显示默认占位图
|
||
3. **时间段选择无效**: 给出提示信息
|
||
4. **组件加载异常**: 显示友好的错误界面 |