# 入侵报警组件设计文档

## 整体架构图

```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. **组件加载异常**: 显示友好的错误界面