CTWing 日志管理页面
功能描述
CTWing日志管理页面用于查看和管理CTWing物联网平台的设备数据日志信息。该页面提供了完整的数据查询、分页显示、表格展示、详情查看和数据导出功能。
接口信息
- 接口地址:
/TableModel/DeviceDataInfoPage - 请求方法: POST
- 数据格式: JSON
请求参数
{
pageIndex: number, // 当前页码
pageSize: number, // 每页大小
filter?: string, // 过滤条件
sorting?: string, // 排序条件
DeviceType?: string, // 设备类型
DeviceId?: string, // 设备ID
FocusAddress?: string, // 集中器地址
SystemName?: string, // 系统名称
ProjectId?: string // 项目ID
}
响应数据格式
{
items: [
{
systemName: 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. 表格展示
页面包含以下列：
| 字段名 | 显示名称 | 说明 |
|---|---|---|
| systemName | 系统名称 | 所属系统 |
| 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文件
- 导出文件名包含当前日期
- 导出过程中显示加载提示
- 支持导出失败的错误提示
使用说明
- 访问页面: 通过路由访问CTWing日志管理页面
- 查询数据: 在查询表单中输入相应的查询条件
- 查看结果: 表格会显示符合条件的数据记录
- 查看详情: 点击表格中的"详情"按钮查看完整信息
- 分页浏览: 使用分页控件浏览更多数据
- 导出数据: 点击工具栏中的"导出"按钮导出当前查询结果
- 自定义表格: 使用表格工具栏自定义列显示和排序
技术实现
主要组件
- VxeGrid: 使用VxeTable组件实现表格功能
- VbenForm: 使用Vben表单组件实现查询功能
- Page: 使用Page组件作为页面容器
- a-modal: 使用Ant Design Modal组件实现详情对话框
- a-descriptions: 使用Ant Design Descriptions组件展示详情信息
数据流
- 页面初始化时从URL参数获取初始查询条件
- 用户输入查询条件后触发数据请求
- 调用API接口获取数据
- 将数据渲染到表格中显示
- 用户点击详情按钮时显示详情对话框
- 用户点击导出按钮时调用导出接口
错误处理
- API调用失败时显示错误信息
- 数据为空时显示空状态
- 网络异常时提供重试机制
- 导出失败时显示具体错误信息
性能优化
- 使用虚拟滚动处理大量数据
- 分页加载减少初始加载时间
- 表格配置本地存储提升用户体验
- 详情对话框懒加载减少内存占用
注意事项
- 确保后端API接口正常运行
- 检查网络连接状态
- 注意查询条件的有效性
- 大量数据时注意性能优化
- 导出功能需要后端支持对应的导出接口
- 详情查看功能适用于数据量较大的场景
扩展功能
可选的增强功能
- 批量操作: 支持批量删除、批量导出等操作
- 数据筛选: 支持更复杂的数据筛选条件
- 图表展示: 支持数据统计图表展示
- 实时更新: 支持数据实时刷新功能
- 权限控制: 支持基于角色的功能权限控制