设备管理组件
目录
一、前置准备
http://[服务器地址]/paasjs-demo/index.htmlhttp://[服务器地址]/paasjs-demo/index.html。各组件的初始化代码均已放在对应 HTML 文件中，可直接参考。二、引入 SDK 资源
window.UranusDeviceManagerApp，从中解构所需函数：三、初始化配置
mountXxx() 之前，必须先完成全局初始化。setupDeviceManager 为幂等设计，可安全多次调用——首次完整初始化，后续调用仅更新 callbacks 和 slots。| 字段 | 类型 | 必填 | 说明 |
|---|---|---|---|
serverUrl | string | ✓ | API 网关地址（库内部自动添加 /gateway 前缀） |
wsUrl | string | ✓ | WebSocket 推送地址 |
auth | AuthConfig | ✓ | 鉴权配置，见下表 |
locale | string | ✗ | 语言，默认 'zh'，支持 'zh' / 'en' |
theme | string | object | ✗ | 主题，默认 'light'，支持 'light' / 'dark' 或自定义 token 对象 |
antThemeBaseUrl | string | ✗ | Ant Design 双主题 CSS 产物路径，默认 '/ant-theme' |
callbacks.onError | function | ✗ | 全局错误回调 |
slots | SlotRegistry | ✗ | 自留地插槽注册，见第五章 |
| 字段 | 类型 | 说明 |
|---|---|---|
authKeys | string[] | 需注入到请求 header 的 key 名列表 |
headers | object | () => Record<string, string> | 推荐函数形式，每次请求时实时取值，适配 token 刷新 |
四、模块化挂载
1. 通用规范
mountXxx() 函数接受相同结构的参数，返回相同的操作句柄。mountXxx() 的返回值）内容模式 vs 抽屉模式 内容模式（ mountXxx）：组件直接在容器内渲染，由调用方控制容器大小抽屉模式（ mountXxxDrawer）：组件以右侧滑出抽屉形式展现，关闭时触发close事件，监听后调用handle.unmount()
2. 各模块速查表
| 模块 | 内容模式 | 抽屉模式 |
|---|---|---|
| 设备列表 | mountDeviceList | — |
| 设备运维 | mountMaintenance | mountMaintenanceDrawer |
| 告警信息 | mountDeviceHms | mountDeviceHmsDrawer |
| 设备定损与反馈 | mountAirportReport | mountAirportReportDrawer |
| 维保看板 | mountMaintenanceBoard | mountMaintenanceBoardDrawer |
| 行业无忧 | mountIndustryWarranty | mountIndustryWarrantyDrawer |
| 固件管理 | mountFirmwareManagement | — |
3. 设备列表 mountDeviceList
| props 字段 | 类型 | 必填 | 说明 |
|---|---|---|---|
deviceType | 'airport' | 'drone' | ✗ | 默认显示的设备类型，默认 'airport' |
4. 设备运维 mountMaintenance / mountMaintenanceDrawer
| props 字段 | 类型 | 必填 | 说明 |
|---|---|---|---|
sn | string | ✓ | 机场设备 SN |
hideMoreHms | boolean | ✗ | 隐藏「更早告警」入口，单独挂载时建议 true |
hideAirportReport | boolean | ✗ | 隐藏「设备定损与反馈」按钮，单独挂载时建议 true |
| 事件名 | 回调参数 | 说明 |
|---|---|---|
close | — | 抽屉关闭（仅抽屉模式触发） |
open-airport-report | { device_sn: string } | 点击「设备定损与反馈」入口（hideAirportReport: false 时触发） |
open-maintain-service | airport | 点击维保服务入口 |
open-care | — | 点击行业无忧入口 |
maintenance-airport-update | airport | 机场设备信息发生更新 |
maintenance-host-update | host | 载机设备信息发生更新 |
5. 告警信息 mountDeviceHms / mountDeviceHmsDrawer
| props 字段 | 类型 | 必填 | 说明 |
|---|---|---|---|
airportSn | string | ✓ | 机场设备 SN |
droneSn | string | ✗ | 载机设备 SN |
relaySn | string | ✗ | 中继器设备 SN |
baseStationSn | string | ✗ | 基站设备 SN |
currentHmsDeviceType | string | ✗ | 初始显示的设备类型选项卡，默认 'airport' |
hideAction | boolean | ✗ | 隐藏「操作」列（反馈创建入口），单独挂载时建议 true |
| 事件名 | 回调参数 | 说明 |
|---|---|---|
close | — | 抽屉关闭 |
show-more-hms-page | { sn?, record? } | 跳转至告警详情 |
6. 设备定损与反馈 mountAirportReport / mountAirportReportDrawer
| props 字段 | 类型 | 必填 | 说明 |
|---|---|---|---|
selectedSn | string | ✗ | 机场设备 SN；传入时过滤该设备数据，不传则展示全量 |
7. 维保看板 mountMaintenanceBoard / mountMaintenanceBoardDrawer
props。注意： mountMaintenanceBoardDrawer挂载后抽屉会自动打开，无需手动触发。
8. 行业无忧
props。与维保看板相同，抽屉版挂载后自动打开。9. 固件管理 mountFirmwareManagement
props，直接以内容模式渲染固件列表页。五、自留地插槽
当前开放的插槽
| 插槽名 | 所在模块 | 位置 |
|---|---|---|
maintenance-remote-debug-extra | 设备运维 | 远程调试面板 header 右侧，与「设备日志」按钮并排 |
maintenance-remote-debug-extra 的 ctx 字段| 字段 | 说明 |
|---|---|
airport | 当前机场设备信息 |
drone | 关联载机设备信息 |
node | 关联中继器设备信息 |
isDroneExist | 是否存在关联载机 |
isRelayExist | 是否存在关联中继器 |
注册方式
setupDeviceManager 的 slots 参数注册：说明：每次 ctx变化时，库会先执行返回的清理函数，再重新调用 handler（传入最新 ctx）。handler 内无需自行监听 ctx 变化。
六、主题定制
'light'（默认）和 'dark' 两套主题，同时支持自定义 token 对象实现品牌化定制。使用内置主题
自定义主题
1.
window.UranusDeviceManagerApp.showThemePanel() 打开主题面板2.
3.
4.
theme 传入 setupDeviceManager切换主题需重新调用 setupDeviceManager({ theme })。因为setupDeviceManager是幂等的，后续调用只刷新主题与回调，不会重复初始化 HTTP/WebSocket。
七、完整接入示例