# CTWing 日志管理页面

## 功能描述

CTWing日志管理页面用于查看和管理CTWing物联网平台的设备数据日志信息。该页面提供了完整的数据查询、分页显示、表格展示、详情查看和数据导出功能。

## 接口信息

- **接口地址**: `/TableModel/DeviceDataInfoPage`
- **请求方法**: POST
- **数据格式**: JSON

### 请求参数

```typescript
{
  pageIndex: number,      // 当前页码
  pageSize: number,       // 每页大小
  filter?: string,        // 过滤条件
  sorting?: string,       // 排序条件
  DeviceType?: string,    // 设备类型
  DeviceId?: string,      // 设备ID
  FocusAddress?: string,  // 集中器地址
  DataBaseName?: string,    // 数据库名称
  ProjectId?: string      // 项目ID
}
```

### 响应数据格式

```typescript
{
  items: [
    {
      dataBaseName: string,           // 数据库名称
      projectId: string,            // 项目ID
      dataType: string,             // 数据类型
      deviceType: string,           // 设备类型
      deviceId: string,             // 设备ID
      timestamps: number,           // 时间戳
      devicePath: string,           // 设备路径
      platformTenantId: string,     // 平台租户ID
      productId: string,            // 产品ID
      serviceId: string,            // 服务ID
      platformDeviceId: string,     // 平台设备ID
      messageType: string,          // 消息类型
      protocol: string,             // 协议
      focusAddress: string,         // 集中器地址
      meterAddress: string,         // 表计地址
      rawMessage: string,           // 原始消息
      receivedPayload: string,      // 接收载荷
      receivedTime: number,         // 接收时间
      imsi: string,                 // IMSI
      imei: string                  // IMEI
    }
  ],
  totalCount: number                // 总记录数
}
```

## 页面功能

### 1. 查询功能

- **集中器地址**: 支持按集中器地址查询
- **设备ID**: 支持按设备ID查询
- **设备类型**: 支持按设备类型查询
- **系统名称**: 支持按系统名称查询
- **项目ID**: 支持按项目ID查询

### 2. 表格展示

页面包含以下列：

| 字段名           | 显示名称   | 说明               |
| ---------------- | ---------- | ------------------ |
| dataBaseName       | 数据库名称   | 所属数据库           |
| projectId        | 项目编码   | 项目标识           |
| dataType         | 数据类型   | 数据类型           |
| deviceType       | 设备类型   | 设备类型           |
| deviceId         | 设备ID     | 设备标识符         |
| timestamps       | 时标       | 数据时间戳         |
| devicePath       | 设备路径   | 设备路径信息       |
| platformTenantId | 平台租户ID | 物联网平台租户ID   |
| productId        | 产品ID     | 物联网平台产品ID   |
| serviceId        | 服务ID     | 物联网平台服务ID   |
| platformDeviceId | 平台设备ID | 物联网平台设备ID   |
| messageType      | 消息类型   | 消息类型           |
| protocol         | 协议       | 通信协议           |
| focusAddress     | 集中器地址 | 集中器地址         |
| meterAddress     | 表通信地址 | 表计通信地址       |
| rawMessage       | 原始消息   | 消息上报原始内容   |
| receivedPayload  | 接收载荷   | 消息上报结果       |
| receivedTime     | 接收时间   | 消息上报时间       |
| imsi             | IMSI       | 国际移动用户识别码 |
| imei             | IMEI       | 国际移动设备识别码 |
| 操作             | 操作       | 详情查看按钮       |

### 3. 分页功能

- 支持分页显示
- 可配置每页显示数量
- 显示总记录数

### 4. 表格功能

- 支持列排序
- 支持列宽调整
- 支持列显示/隐藏
- 支持表格配置保存

### 5. 详情查看功能

- 点击表格中的"详情"按钮可查看完整的数据信息
- 详情对话框以描述列表形式展示所有字段
- 支持长文本内容的滚动查看
- 时间字段自动格式化为本地时间显示

### 6. 数据导出功能

- 支持将当前查询结果导出为Excel文件
- 导出文件名包含当前日期
- 导出过程中显示加载提示
- 支持导出失败的错误提示

## 使用说明

1. **访问页面**: 通过路由访问CTWing日志管理页面
2. **查询数据**: 在查询表单中输入相应的查询条件
3. **查看结果**: 表格会显示符合条件的数据记录
4. **查看详情**: 点击表格中的"详情"按钮查看完整信息
5. **分页浏览**: 使用分页控件浏览更多数据
6. **导出数据**: 点击工具栏中的"导出"按钮导出当前查询结果
7. **自定义表格**: 使用表格工具栏自定义列显示和排序

## 技术实现

### 主要组件

- **VxeGrid**: 使用VxeTable组件实现表格功能
- **VbenForm**: 使用Vben表单组件实现查询功能
- **Page**: 使用Page组件作为页面容器
- **a-modal**: 使用Ant Design Modal组件实现详情对话框
- **a-descriptions**: 使用Ant Design Descriptions组件展示详情信息

### 数据流

1. 页面初始化时从URL参数获取初始查询条件
2. 用户输入查询条件后触发数据请求
3. 调用API接口获取数据
4. 将数据渲染到表格中显示
5. 用户点击详情按钮时显示详情对话框
6. 用户点击导出按钮时调用导出接口

### 错误处理

- API调用失败时显示错误信息
- 数据为空时显示空状态
- 网络异常时提供重试机制
- 导出失败时显示具体错误信息

### 性能优化

- 使用虚拟滚动处理大量数据
- 分页加载减少初始加载时间
- 表格配置本地存储提升用户体验
- 详情对话框懒加载减少内存占用

## 注意事项

1. 确保后端API接口正常运行
2. 检查网络连接状态
3. 注意查询条件的有效性
4. 大量数据时注意性能优化
5. 导出功能需要后端支持对应的导出接口
6. 详情查看功能适用于数据量较大的场景

## 扩展功能

### 可选的增强功能

- **批量操作**: 支持批量删除、批量导出等操作
- **数据筛选**: 支持更复杂的数据筛选条件
- **图表展示**: 支持数据统计图表展示
- **实时更新**: 支持数据实时刷新功能
- **权限控制**: 支持基于角色的功能权限控制
