Web 上位机：从工程面板到云端应用

借助 BMCLI 的总线服务和 AI 的 Web 开发能力，产品专用工具可以从一块工程面板，逐步长成完整的上位机。本篇以车辆仪表台架为例，先制作可运行的数字座舱页面，再介绍怎样接入总线，以及如何按项目需要选择桌面或云端交付。

例如，在控制器联调现场，一套台架可能同时开着几个窗口：看信号、查原始报文、启动录制，再切到发送窗口改变工况。换一位同事操作，又要解释一次各个按钮的位置。把常用操作集中到产品专用面板中，同事就能按熟悉的实验流程工作。

假设我们在调试一款车辆仪表。电脑通过 BUSMUST 分析仪连接台架 CAN，项目提供 DBC 和允许发送的控制报文。开发人员希望在一个页面中看车速与档位、查看异常帧、保存当前工况，并触发已定义的测试动作。测试同事则希望拿到安装包后，双击图标就能使用；设备留在实验室时，异地工程师也能通过浏览器查看同一套工况与实验记录。

BMCLI 提供采集、解码、报文及录制回放等总线服务，AI 按您的自然语言需求生成应用。只展示几项信号，可以做面板；需要多页面、菜单、工具栏和完整操作流程，就做专用上位机。无论界面规模如何，硬件通信和总线解析都由 BMCLI 承担，应用只需围绕产品安排页面与操作流程。

随文提供两部分源码：一套可以直接打开的数字座舱模拟页面，以及一套连接 BMCLI 的基础只读页面。先体验界面，再理解数据怎样接入。后文继续介绍桌面安装包与云端系统两种交付方式，可按项目选择。

给 AI 的输入：制作产品专用上位机

准备 DBC、Bench 与测试报文清单后，可以把下面这段任务交给 AI。这段需求面向完整应用，可以在随文示例的基础上继续开发。

我要为车辆仪表台架制作一个多页面 Web 上位机，请使用 BMCLI 作为总线后端。项目目录中已有 vehicle-demo.dbc、Bench 和允许发送的测试报文清单。请设置设备连接、实时监测、报文操作和实验记录页面，提供导航与常用工具栏。

实时页采用深色数字座舱设计：车速用大号数字和弧形刻度，档位用只读 P/R/N/D 指示器，转角用可旋转的虚拟方向盘，左右转向灯用独立箭头。请按项目 DBC 确认信号名称、单位和枚举；缺少定义时列出待补资料。这些组件只显示状态，不发送车辆控制指令。

下方显示最近 60 秒车速曲线，带时间刻度、单位和悬停读数。模拟模式按 20 Hz 生成约 1200 个样本，并明确标注模拟数据。真实模式使用历史或订阅接口中的实际样本及时间，页面重绘与数据采样分开处理；数据停更时显示提示，曲线在缺失处断开。

报文页支持原始帧筛选，操作区提供录制、停止、选段回放和清单内报文发送。执行前显示目标与参数，执行后按 BMCLI 返回的实际状态更新界面。首次启动只读，由我在隔离台架确认后开放操作。

请先交付可在本机浏览器离线加载资源的版本，将页面与数据访问分开组织。请自行检查页面操作、停更提示、错误与恢复，交付源码、启动说明和检查结果，供我验收。

台架还需要控制器或仿真节点发送车速、档位等报文，车辆仪表和分析仪负责接收。AI 再将 BMCLI 解码后的信号接到页面上。具体准备方法见可运行示例与启动说明。

成品与效果：一套上位机串起台架操作

理想的工具应当让同事顺着实验流程完成工作：打开项目后确认连接，在实时页观察车速与档位，遇到异常时切到报文页定位，再保存带操作标记的实验记录。需要重现问题时，从记录页选择片段，确认目标后启动台架回放。

可以从随文座舱的工况总览出发，按以下功能安排扩展完整应用：

区域	面板上的内容	联调时的用途
工况总览	车速仪表、虚拟方向盘、档位指示器、转向指示与趋势曲线	直接观察车辆状态，减少在字段名与物理含义之间来回转换
报文观察	ID、时间、载荷、筛选与异常定位	从信号现象返回原始数据
台架操作	录制、停止、选段回放、指定报文发送	重现问题或发送测试报文
实验记录	当前配置、操作标记、结果与日志入口	方便协作和后续比较

像看车辆仪表一样观察台架

同一个信号，表达方式可以完全不同。车速适合用数字与刻度弧共同呈现，方向盘转角可以直接驱动一个虚拟方向盘，档位则点亮 P/R/N/D 中的当前位置。左右转向指示分别显示各自状态，主视图便不再是一组需要逐项阅读的标签，而是一眼就能读懂的车辆工况。

可运行数字座舱网页的浏览器截图

图 5-1　随文数字座舱网页的实际浏览器截图。车速、方向盘、档位、转向灯和曲线均由网页组件绘制；数据来自内置模拟工况。

截图中的车速为 72.5 km/h，档位为 D，方向盘转角为 -18°。仪表和方向盘使用 SVG 绘制，曲线使用 Canvas 绘制，所有组件都随模拟数据更新。打开示例后，可以切换模拟工况、暂停观察，并导出当前模拟曲线的 CSV。

车速趋势按 20 Hz 模拟采样，显示最近 60 秒，并预填一段模拟历史，便于打开页面就能观察完整曲线。

从可运行页面接到真实信号

请先打开示例目录中的 cockpit/index.html，无需安装前端依赖，即可运行图中的数字座舱模拟工况。web/index.html 提供 BMCLI 基础只读页面，接收 VehicleStatus 的 Speed、Gear 信号。两个入口分别帮助您了解界面实现与数据接入。

也可以直接下载数字座舱网页源码包，解压后打开 cockpit/index.html。源码包提供离线座舱；BMCLI 接入页面与台架准备步骤见完整示例说明。

把座舱用于项目时，可以请 AI 保留现有组件，将模拟数据源替换为 BMCLI 信号数据。按照项目 DBC 绑定车速、档位、方向盘和转向灯，逐项确认单位、枚举与转角方向；待配置的组件显示“未配置”。

档位名称、单位和转角方向，请以项目 DBC 为准。例如，BMCLI 返回方向盘转角后，页面按这个角度旋转图形即可，不需要额外的“方向盘控件”接口。

车速为零和数据停止更新，是两种不同的状态。 接入真实信号后，页面应在停更时显示“等待数据”或“数据已停更”，曲线在缺失处断开，恢复后再继续绘制。

实现解析：界面怎样调用 BMCLI

下面以随文只读页面为例，看看 BMCLI 如何把总线信号交给网页。发送与录制操作可在此基础上继续开发。

总线服务与业务服务协作

BMCLI 负责连接硬件、处理协议和提供总线数据。登录、用户管理、实验档案和数据库访问，可以交给 Django、Flask 或团队已有的业务后端。网页像普通 Web 应用一样开发，只是多了一条通往真实总线的数据通道。

简单面板可以直接由 BMCLI 托管页面；复杂系统也可以使用独立的 Web 服务，让业务后端与 BMCLI 配合工作。新增登录页或实验管理功能，不需要修改 BMCLI，更不必重新开发硬件驱动。

Web 应用中业务服务与 BMCLI 的分工

图 5-2　多后端协作的架构示意。统一入口将业务请求交给相应服务，BMCLI 专注连接真实总线。

例如，用户登录由业务服务处理，实验档案从数据库读取，当前车速则来自 BMCLI。它们可以出现在同一个页面上，但由不同的后台提供。

多人使用时，业务后端管理用户可以查看的设备和执行的操作，再携带 BMCLI 接口凭据转交相应请求。这样，用户权限与设备访问各有明确的管理位置。

一个信号计划，连接总线和网页

BMCLI Web 服务启动后，既可以提供静态页面，也可以提供总线数据接口：

# 启动本机 Web 服务，提供页面资源及信号数据接口。
bmcli web start --listen=127.0.0.1:18080 `
  --web-root=./vehicle-dashboard --history-capacity=4096
# 查询 Web 服务状态，供应用显示实际连接情况。
bmcli web status --format=json

上例说明 Web 根目录的用法；随文示例的具体路径和通道准备步骤见启动说明。

其中的“信号计划”指定通道、DBC 和 VehicleStatus 报文。BMCLI 持续解码，并向页面提供物理值、单位、质量和序号。例如 Speed 样本中的关键字段是：

{
  "signal": "Speed",
  "value": 42,
  "raw": 4200,
  "unit": "km/h",
  "quality": "good"
}

页面直接使用 42 km/h，无需再次处理原始字节。相关接口包括：

接口	用途
`GET /api/v1/health`	查询服务状态
`GET /api/v1/signals`	查找信号计划
`POST /api/v1/signals/plans`	创建解码计划
`GET /api/v1/signals/latest`	读取最新信号
`GET /api/v1/signals/history`	按序号读取历史
`GET /api/v1/signals/stream`	订阅信号流

随文 web/ 基础页面在一次读取结束后约隔一秒获取 latest，以浏览器观察时间为横轴，展示最近 60 秒的有效新样本，适合快速查看车速趋势。

需要完整的采样曲线时，可以使用历史或订阅接口，按样本时间和序号组织曲线，再独立安排页面重绘。latest/history 请求通过 plan 和 signal 选择数据，history 使用 after 接续读取，具体接入说明见示例 README。

多页面怎样共用设备状态

设备连接、当前项目和录制任务应由应用统一管理，切换页面时继续沿用。例如，在报文页点击“开始录制”后，应用先确认 BMCLI 已启动任务，再在工具栏显示“录制中”；回到实时监测页，也能看到这次录制的状态。

为什么 Web 适合这类 AI 开发

Web 有成熟的布局、表格、曲线、表单和交互组件生态。对于以数据显示和操作流程为主的工程界面，AI 可以复用这些能力，快速把需求呈现出来。Python 等语言仍可以承担数据分析和业务后端；选择 Web 界面，并不意味着要放弃已有算法和服务。

Web 的另一个优势是方便自检。AI 配合浏览器自动化工具，可以点击页面、检查请求和错误，并截图查看布局，CDP（Chrome DevTools Protocol）就是其中一种常用的调试接口，官方文档可供查阅。

请让 AI 在交付前检查正常操作、数据停更和服务恢复。您再结合真实台架验收：界面是否顺手，显示是否正确，按钮是否完成了预期操作。

交付方式一：桌面上位机

如果工具主要用于本机台架，可以将它打包为桌面应用。同事安装后双击图标，即可选择项目、连接设备、开始实验，不必手动启动后台服务。

继续向 AI 描述：生成桌面安装包

请将刚才完成的车辆仪表 Web 上位机制作成 Windows 桌面应用，继续复用现有页面和 BMCLI 总线后端。请用 Electron 包装界面，提供安装包和桌面快捷方式，保留导航、菜单、工具栏及只读启动方式。首次运行检查驱动、BMCLI 依赖和 Bench 配置，提供项目选择与配置保存入口，之后能记住上次使用的项目。

请妥善管理本机服务：能够识别并复用兼容的已有服务，发生端口或配置冲突时说明原因；退出时按用户选择完成当前记录与本应用任务的收尾，不影响其他工具正在使用的服务。

请在干净的 Windows 环境中验证安装、启动、项目切换、配置保存、退出和再次启动，最后交付安装包、使用说明和检查结果。

成品与效果：从双击图标开始工作

桌面版本的预期体验可以用一条实际使用路径来验收：

使用环节	同事看到的效果
安装并打开	从桌面快捷方式进入工具，缺少驱动或依赖时有清楚说明
选择项目	加载对应 DBC 与 Bench，显示实际设备和连接状态
开始实验	沿用浏览器版本的监测、报文操作和记录页面
结束并再次打开	记录得到保存，配置可以恢复，服务状态与界面一致

可以沿以上使用路径验收 AI 生成的桌面安装包。

实现解析：用 Electron 打包现有页面

Electron 可以承载已有 Web 界面，并由桌面主进程组织应用启动与本机服务管理。打包时一并安排前端资源、桌面运行时及匹配平台的 BMCLI 依赖，项目配置与实验记录则保存在适合用户读写的位置，具体做法可参阅 Electron 官方文档。

页面继续访问既有数据接口，BMCLI 继续处理总线通信。桌面层负责检查环境、选择项目、启动或复用服务，以及退出时的收尾。设备操作通过限定的应用接口传递，界面不直接获得任意本机命令执行能力。这样，页面改版可以同时用于浏览器和桌面版本，协议处理也只需维护一套。

交付方式二：云端访问

另一类项目需要从云端访问现场设备。这时可以直接采用浏览器与服务端部署，而不必先制作桌面安装包。仪表与分析仪仍接在实验室电脑上，现场服务负责采集和记录，授权人员从浏览器查看实时状态并取得实验记录。

请向 AI 提供可用的云服务器、域名、证书与登录方案，并说明实验室网络条件。已有页面和信号定义可以继续使用。

继续向 AI 描述：增加云端访问入口

请将现有车辆仪表 Web 应用部署为可从云端访问的系统，本次不制作桌面安装包。仪表、BUSMUST 分析仪和 BMCLI 仍在实验室电脑上运行，复用已有页面、信号定义与实验记录。请将现场采集及业务服务作为独立后台服务管理，不依赖桌面窗口或远程浏览器保持打开。

请根据我提供的服务器、域名、登录方案和网络条件，设计由实验室侧主动建立连接的访问方式，提供带身份验证的 HTTPS 入口。异地用户可以查看车速、档位、最近曲线、连接状态，并下载已保存的实验记录；本次远程权限仅开放查看和记录下载，发送、回放及其他设备控制仍由本地操作。

请复用可用的业务服务，补齐访问控制与记录下载所需接口，避免公开 BMCLI 的设备管理接口。连接中断时页面应明确显示数据停更，实验室的本地采集与记录继续运行。请先验证页面与权限，再按我确认的环境完成部署检查，交付访问说明、配置和检查结果。本次无需新增多设备管理或长期历史数据平台。

成品与效果：人在异地，仍能看同一套工况

预期效果是：本地同事正在观察仪表，异地工程师登录后也能看到车速、档位和持续更新的曲线；需要追查异常时，直接取得本地已经保存的记录。远程页面只提供本次允许的功能，台架操作仍由现场人员通过本地授权入口完成。

这套云端扩展方案的连接关系如下：

异地浏览器
    │ HTTPS：登录、查看工况、下载记录
    ▼
云端访问入口（身份验证与只读权限）
    │ 受控连接，由实验室侧主动建立
    ▼
实验室业务服务 ── BMCLI ── BUSMUST 分析仪 ── 车辆仪表
（独立后台运行，管理现场采集与实验记录）

图 5-3　云端部署的连接关系。现场服务独立运行，远程浏览器只访问授权开放的功能。

实现解析：远程看数据，现场运行服务

实验室网络通常可以主动访问互联网，却未必能接收外部连接。frp 是可选方式之一，通过公网服务端与实验室客户端协作，为已有业务服务建立访问通道，可参考 frp 官方概述。

隧道解决的是连接问题，用户登录和只读权限仍由业务入口落实。云端通过 HTTPS 提供访问，实验室侧只转交允许的查看与记录下载请求；即使远程客户端自行构造请求，也应由服务端拒绝未开放的控制动作。BMCLI 保持在本机访问范围内，隧道配置认证与加密，设备管理接口不直接暴露给公网。

现场任务独立运行，关闭远程浏览器不会停止采集与记录。网络中断时，页面提示数据停更；重连后显示当前状态，中断期间的过程可从现场日志查看。验收时，请同时检查远程用户能否正常查看、下载，以及服务端是否拒绝了未授权的控制请求。

桌面和云端是两种交付选择：前者围绕本机安装与设备操作组织，后者围绕持续运行的现场服务和浏览器访问组织。项目可以复用页面组件与信号定义，但启动、权限和服务管理应按所选方式设计。

进一步探索：从专用上位机走向多人业务系统

前面的云端入口已经要求身份验证和只读访问。随着更多同事开始使用，新的问题会变得具体：谁能查看哪个项目，谁可以下载实验记录，管理员怎样停用账号，以及上个月的一次实验由谁完成。这些功能可以在业务后端继续开发。

为团队增加登录页与用户管理

例如，让 AI 为车辆仪表测试团队增加独立登录页、用户列表和项目成员管理。可以选择 Django 作为业务后端，复用其用户、会话和权限机制，再补上本项目的访问规则；如果团队已有 Flask 服务，也可以在现有框架及合适的认证组件上继续开发，相关文档见 Django 用户认证文档与 Flask 官方文档。

下面是一段可以继续交给 AI 的需求：

请将现有车辆仪表上位机扩展为团队使用的 Web 系统，保留 BMCLI 作为独立总线服务，新增 Django 业务后端。请提供登录、退出、账号启停和项目成员管理页面，设置管理员与只读成员两种角色，并在服务端检查每个项目的查看与记录下载权限。

业务后端将用户、项目和实验记录索引存入 SQLite，原始总线日志继续作为文件保存，BMCLI 提供总线服务。请将既有云端登录入口与新的用户体系整合，共用一套账号。远程设备控制仍保持关闭，管理员角色也不自动获得发送或回放权限。

请验证未登录、账号停用、跨项目访问和直接请求接口等情况，交付页面、业务服务、数据库初始化与部署说明，并说明它们如何与现有 BMCLI 服务协作。

完成后，成员登录即可看到自己的项目和实验记录，管理员可以调整成员关系。权限检查在服务端执行，即使用户直接请求其他项目的接口，也无法越权访问。

让实验记录成为可以查询的业务数据

用户体系建立之后，还可以请 AI 把“文件列表”整理成实验档案：按项目、操作人员、时间和结论查询，打开一条记录便能看到备注、参数与原始日志入口。业务后端负责将这些信息保存到数据库，BMCLI 继续负责总线采集，两者通过实验编号和文件标识关联。可结合并发、备份和部署要求选择 SQLite 或 MySQL 等数据库。

实时信号与历史档案也可以出现在同一页面：当前车速来自 BMCLI，历史结论来自数据库，项目工单来自已有企业接口。随着这些服务接入，工具便可以从专用上位机扩展为连接真实设备的物联网 Web 系统。BMCLI 提供总线能力，界面与业务流程则可以按项目需要继续发展。

参考阅读

以下文档介绍本篇涉及的接口；具体参数可通过本机 JSON Help 查询。

下载本篇配套示例 ZIP