Vue3 + TypeScript 实现 CAN 报文实时回放与合并显示
在汽车电子、工业自动化和智能硬件开发中，CAN 总线数据分析是工程师日常的核心任务。传统日志分析工具功能单一，难以进行动态对比。本文将分享一套 基于 Vue3 + TypeScript + Ant Design Vue 的高性能 CAN 数据回放方案，支持：
-
上传
.asc或.txt格式的 CAN 日志文件 -
滚动显示或按帧 ID 合并显示
-
高亮变化字节，直观观察数据差异
-
表格分页、排序，并可暂停/继续回放
这套方案不仅是日志展示，更是 动态可视化调试工具。
1. 场景与需求分析
实际开发中，我们常遇到以下场景：
-
上传车辆或工业设备的 ASC 文件进行数据回放
-
按帧 ID 合并显示，便于观察数据变化
-
动态高亮变化字节，用于故障分析
-
表格支持分页和排序，快速定位特定帧
可以看出，该方案的核心目标是 高效、可视化、易操作的回放工具。
2. 数据模型设计
首先定义 CAN 帧数据结构：
export interface AscFrame {timestamp: number; // 时间戳channel: string; // 通道号id: string; // 帧 IDdirection: string; // 发送/接收type: string; // 数据标识符dlc: number; // 数据长度（DLC）data: string[]; // 数据字节数组raw: string; // 原始 ASC 行key: string; // 表格唯一 key
}
data 使用数组形式存储每个字节，便于逐字节高亮显示变化。
3. ASC 文件解析
ASC 文件每行类似：
08:43:36.882812 1 Rx 0x18F0F102 d 8 00 00 00 05 00 00 00 80使用正则解析为 AscFrame 对象：
export function parseAsc(content: string): AscFrame[] {// 先尝试解析为 JSON 错误信息try {const maybeJson = JSON.parse(content);if (maybeJson &&typeof maybeJson === 'object' &&'errorCode' in maybeJson &&'errorMessage' in maybeJson) {message.error(`文件内容异常，显示为：${maybeJson.errorMessage}` || '未知错误');return [];}} catch (e) {// 不是 JSON，继续往下解析为 ASC}const lines = content.spli