SecMPS/warehouse/docs/入侵报警组件/DESIGN_入侵报警组件.md

入侵报警组件设计文档

整体架构图

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调用，获取告警数据
• 数据处理函数: 处理和格式化数据

模块依赖关系图

graph LR
    AlarmRecord --> ElementPlus
    AlarmRecord --> Vue
    AlarmRecord --> MockData

接口契约定义

组件属性

无特定属性要求，作为独立组件使用

数据结构定义

interface AlarmRecord {
  id: string;            // 告警ID
  alarmTime: string;     // 告警时间
  deviceName: string;    // 来源设备
  imageUrl: string;      // 告警图片URL
  status?: string;       // 告警状态（可选）
  location?: string;     // 告警位置（可选）
}

方法定义

// 获取告警数据
const fetchAlarmData = async (startTime: string, endTime: string): Promise<AlarmRecord[]> => {
  // 实现数据获取逻辑
};

// 刷新数据
const refreshData = (): void => {
  // 实现数据刷新逻辑
};

数据流向图

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