对外发送事件
组态事件开放,用于外部页面适配组态弹窗业务联动。
组态发布页面一般是通过iframe的方式嵌入外部页面的,其中组态弹窗分为“查询属性”和”下发指令”弹窗两类,其中需要“查询属性”弹窗时会向window发送类型为:'attrDetail'的消息;需要”下发指令”弹窗则会发送类型为'deviceControl'或者'propertyControl'的消息。因此外部页面只需在页面中监听以下两种类型的消息则可以判断需要如何显示弹窗,代码示例如下:
window.addEventListener("message", (event) => { if (event.data.type === 'deviceControl' || event.data.type === 'propertyControl') { this.sendCommand(event.data) } if (event.data.type === 'attrDetail') { this.sendDetail(event.data) } })
操作步骤
- 监听“查询属性”弹窗的消息体时,外部页面可根据如下信息查询对应设备的属性信息:
type:消息类型(attrDetail为查询属性)
property_path:服务ID/属性编码
device_id:设备ID
'http://localhost:8080':母页面域名,是由左邻页面来监听该事件
组态发送事件代码示例截图:
当type类型为attrDetail时,说明查看的是具体设备的指定属性
{ direction:"export", type: "attrDetail", data: { property_path: "EnviromentService/AirPressure", device_id: "wwp_test_elec" } }, "http://localhost:8080"
如单击组态页面中"文本增强组件"的文字内容时,此时为查询设备属性的点位信息,组态预览页的默认效果如下(发布页该弹框需由外部系统完成开发):
- 监听“下发指令”弹窗的消息体时,外部页面可根据如下信息给对应的设备属性下发指令:
type:消息类型(deviceControl为下发指令)
property_path:服务ID/属性编码
device_id:设备ID
isDeviceIcon:是否单击设备图标
'http://localhost:8080':母页面域名,是由左邻页面来监听该事件
- 当type类型为deviceControl时,说明控制的只是具体设备而没有指定具体属性,所以没有property_path字段。
{ direction:"export", type: "deviceControl", data: { device_id: "wwp_test_elec" } }, "http://localhost:8080"
如单击组态页面中的"设备组件"时,由于所选定的是具体设备没有指定具体的属性,此时在弹窗中可以自行选择设备属性的点位,组态预览页的默认效果如下(发布页该弹框需由外部系统完成开发):
- 当type类型为propertyControl时,说明控制的是具体设备的指定属性,所以有property_path字段。
{ direction:"export", type: "propertyControl", data: { property_path: "EnviromentService/AirPressure", device_id: "wwp_test_elec" } }, "http://localhost:8080"
如单击组态页面中"文本增强组件"的齿轮图标时,由于已经选定了具体设备的指定属性,此时在弹窗中无法再自行选择设备属性的点位,组态预览页的默认效果如下(发布页该弹框需由外部系统完成开发):
- 当type类型为deviceControl时,说明控制的只是具体设备而没有指定具体属性,所以没有property_path字段。