👑 [需求]设备管理->可视化，集成视频组件

[Lind-pro]

🥰 需求描述

可视化添加视频组件

🧐 解决方案

🚑 其他信息

[zhou-hao]

1. 视频类型: 列出播放器支持的视频流类型

2. 视频源: 手动输入,设备获取
   手动输入时,展示视频流地址输入视频流地址即可。
   设备获取时,先选择获取方式: 属性,功能

3. 视频源字段: 通过属性的类型或者功能的输出类型，如果是字符串类型,则无需显示。 如果是结构体类型，则列出下拉列表选择对应的字段,如果是其他类型,则提示暂时不支持。

4. 选择属性时,从物模型中获取属性列表。展示下拉选择:读取属性。如果属性是结构体时,支持树结构选择。

5. 选择功能时,从物模型中获取功能列表。展示下拉选择:调用功能。选择对应功能后,根据功能参数,展示输入框,没有参数则不展示。

6. 预览视频时,根据选择的获取方式,调用不同的接口。

属性方式

GET /device/instance/{设备ID}/property/{属性ID}

响应

{
 "result":[
   {
     "value":"", //如果是结构体类型,此字段为json字符串。
       "objectValue":"" //如果是结构体类型,此字段有值
  }
 ]
}

调用功能

POST  /device/instance/{设备ID}/function/{功能ID}

{"参数ID":"参数值"}

响应:

{
"result": "" //如果功能返回值类型是结构体，则为json对象。
}

[Lind-pro]

随意拖拽demo:https://bokuweb.github.io/react-rnd/stories/?path=/story/sandbox--issue622
github:https://github.com/bokuweb/react-rnd