设备与通道管理实现解析src/pages/devices本文档将描述设备items与通道channels的数据关系、接入协议accessProtocol对表单与能力的影响、在线状态的推送与展示以及枚举/展示文案如何从系统设置Setting与字典Dictionaries注入前端表格与表单。项目源码地址https://github.com/openskeye/skeyevss_frontend_web界面展示1. 设备与通道的关系1.1 数据模型设备pages/devices/items/model.tsx→Item主键id业务锚点deviceUniqueId。含accessProtocol、channelCount、msIds等描述「如何接入平台」与媒体服务绑定。通道pages/devices/channels/model.tsx→Item主键id业务主键uniqueId。外键deviceUniqueId指向所属设备。设备挂载deviceItem?: DeviceItem列表接口在maps里带回设备详情便于表单按协议显隐字段、卡片展示协议名称等。1.2 API 与列表形态资源主要接口说明设备POST /device/item/list标准分页列表transformType: Item转换list通道POST /device/channel/list列表 mapsdeviceUniqueId → 设备ext.plans等扩展通道页通过查询条件里的deviceUniqueId固定「当前设备」再DeviceRow(deviceUniqueId)拉设备详情写入面包屑与currentDeviceItemRef新建通道时把deviceUniqueId注入Create请求见channels/index.tsx。1.3 父子关系通道模型上的parentUniqueIdKeyColumn→deviceUniqueId表明表格/表单框架把它当作挂在某设备下的子资源路由上从设备列表进入通道列表。2.accessProtocol类型含义与创建/编辑时的差异代码里用数字枚举区分协议与后端约定一致。设备模型中写死了示例名与能力分支值accessProtocolExample()controlState()云台等addChannelState()是否允许走「手工加通道」一类能力1流媒体源否否仅 RTMP 为 true2RTMP 推流否是3ONVIF是否4GB28181是否说明「能否在 UI 里加通道」还与通道行的setHiddenState()一致仅RTMP(2)不隐藏删除/勾选等其它协议通道行多项操作被隐藏与设备侧「只有 RTMP 可 addChannel」形成产品逻辑上的闭环。2.1 创建设备时表单字段显隐与联动items/model.tsx→formColumnsaccessProtocol的afterOnChange是核心切换协议会setHiddenMaps/setReadonlyMaps并顺带清空 ONVIF 发现等字段。流媒体源 (1)大量字段隐藏用户名密码、订阅、通道筛选、码流索引、在线等突出拉流地址与传输相关配置。解析streamUrl可回填address/username/passwordextractUrlComponents。RTMP 推流 (2)隐藏与国标相关的订阅/通道筛选等streamUrl只读由绑定媒体服务msIds的afterOnChange自动生成rt推流地址默认媒体或指定 SMS 的ip:port。新建时会延迟触发默认选中媒体服务。ONVIF (3)暴露设备发现、手动开关、onvifDeviceInfo等部分字段只读由onvifReadonlyMaps控制。GB28181 (4)表单里大量主信息字段隐藏强调订阅、通道筛选、码流索引、媒体服务等国标侧配置新建时下拉里对 4 做了disabledantOptionsFilter避免误选需由平台侧注册录入的协议——具体以产品为准代码意图是创建入口限制协议类型。2.2 传输模式与协议mediaTransModeOptions(accessProtocol, options)非 GB28181 时会过滤掉值为2的项并对文案做「被动/主动」替换GB28181(4)保留完整选项。表格列里媒体传输模式的options也走同一函数保证列表编辑与表单可选范围一致。2.3 通道侧协议对表单与列表的影响Item.apType(accessProtocol)channels/model.tsx区分pub/pull用于流媒体侧会话类型如码率统计字段在视频组件里用pub/pull取不同 key。pubRTMP(2)、GB(4)其余为pull通道表单streamUrl当设备为GB时字段隐藏推流/注册由设备与平台信令完成不要求手工填拉流 URL其它协议展示可编辑地址类配置具体校验与deviceItem挂钩。通道卡片channels/components.tsx仅当deviceItem.accessProtocol 2时展示RTMP 播放/推流地址streamNameProduce组 live 路径其它协议不展示该块。3. 在线状态持久字段 vs 实时 SSE3.1 列表上的「在线」列静态设备、通道表结构里都有online数值字段表格列可按0/1渲染文案设备列表里「在线状态」列曾被设为hidden: true以卡片视图为主。3.2 实时状态OnlineStaterepositories/apis/base设备页与通道页均在useEffect里建立EventSource设备列表items/index.tsxOnlineState({ type: 1, url: vssSseUrl, ... })通道列表channels/index.tsxOnlineState({ type: 2, ... })服务端推送 JSON前端解析为{ [key: string]: 0 | 1 }合并进columnParams.deviceOnlineState触发表格/卡片重渲染。设备页用compareEQ与 ref 避免相同数据重复 setState。3.3 展示上的 Key 约定设备卡片items/components.tsxdeviceOnlineState?.[record.deviceUniqueId] 1→ 在线图标。通道卡片/工具条channels/components.tsxdeviceUniqueId - uniqueId作为 key与设备维度的 key 区分避免多通道id相同时冲突。Tooltip 统一用「在线 / 离线」提示。也就是说业务上「通道路由」的在线与设备在线是两套推送类型type 1 / 2前端用不同字典 key 取值。4. 字典与展示值Setting / Dictionaries / 列表扩展前端不硬编码所有下拉与标签文案而是启动后从 Recoil 状态注入ColumnParams。4.1 系统设置Setting键值多为「数字 → 文案」在items/index.tsx初始化列参数时从setting.state读取access-protocols→accessProtocolOptions/accessProtocolMaps表格「接入协议」列renderHook用accessProtocolMaps[id].title。access-protocol-colors→ 卡片协议标签颜色若有。media-trans-modes、channel-filters、bitstream-indexes→ 对应下拉与多选。在channels/index.tsxptz-types→ 云台类型ptzTypeOptions。同样使用access-protocols做accessProtocolMaps卡片上展示「协议: xxx」。这些键的定义见repositories/types/config.ts中Setting接口扩展字段与后端/setting返回对齐。4.2 字典服务Dictionaries树形 mapsDictionaries提供groupTrees按DictUniqueIdType如device-manufacturer分组的选项树。maps{ [id: number]: TreeItem }用于按主键 id取节点名称等。设备列表中平台厂商manufacturerId选项来自groupTrees[DictUniqueIdType.deviceManufacturer].children。卡片展示厂商名除deviceTypeMaps外又用dictMaps[record.manufacturerId].nameitems/components.tsx字典树与 setting 选项并存便于复杂层级名称展示。部门名称不在字典里而是由List响应的ext设备列表为departmentMaps映射depIds → 部门名渲染为可跳转 Tag。4.3 数据流前端 Recoil 页面后端GET /setting字典树 APIPOST /device/item/listPOST /device/channel/listVSS SSE 在线事件Setting.stateDictionaries.stateColumnParamsTable / Form / Card5. 关键文件索引文件作用src/pages/devices/items/index.tsx设备表组装ColumnParams、SSEtype: 1、创建默认sourceType: 1src/pages/devices/items/model.tsx设备Item、columns/formColumns、协议分支与mediaTransModeOptionssrc/pages/devices/items/components.tsx设备卡片在线图标、dictMaps厂商src/pages/devices/channels/index.tsx通道表设备上下文、deviceMaps、plans、SSEtype: 2src/pages/devices/channels/model.tsx通道Item、apType、setHiddenState、formColumnssrc/pages/devices/channels/components.tsx通道卡片/控制条在线 key 组合、RTMP 地址、协议标题src/repositories/apis/base.tsOnlineStateEventSource 封装src/repositories/types/config.tsSetting、Dictionaries类型src/repositories/types/foundation.tsDictUniqueIdType、TreeItem6. 小结与注意点设备是接入与媒体绑定的主体通道是业务播放与组织的最小单元通道列表强依赖deviceUniqueId过滤。accessProtocol同时驱动能力位云台、加通道、表单显隐、传输模式可选集、RTMP 推流地址生成、通道卡片的播放地址是否展示。在线状态是SSE 增量字典与库里的online字段并存UI 以deviceOnlineState为准做实时灯态。文案与选项优先来自Setting 的 map 配置厂商等树形数据来自Dictionaries部门名来自列表ext三类来源不要混用。若后端枚举值有增减需同步Setting接口、accessProtocol的switch分支及表单hiddenMaps字典以DictTrees与maps的 id 为准。