设备类事件

组态页支持用户单击组态中查询详情图标或设置图标时，向window发送"propertyDetail"事件和"deviceControl"/"propertyControl"事件，可用于母页面联动组态，展示相应的“查询属性”弹窗和”下发指令”弹窗。

组态发布页面一般是通过iframe的方式嵌入外部母页面的，其中组态弹窗分为“查询属性”和”下发指令”弹窗两类。

操作步骤

设备属性明细事件。

若单击组态页查询详情类图标时，组态页会向window发送类型为：'propertyDetail'的消息，（母页面）打开“查询属性”弹窗；
- 关联组件：
1. 文本增强组件

2. 表单组件
- 事件格式：
```
{
  direction:"export",
  type: "propertyDetail",
  data: {
    property_path: ${service_id}/${property_code},
    device_id: ${device_id}
  }
}
```
- 参数说明：
type：消息类型（propertyDetail为属性详情）

property_path：服务ID/属性编码

device_id：设备ID

当事件type类型为propertyDetail时，说明查看的是具体设备的指定属性，
- 处理样例：
当用户单击组态页面中"文本增强组件"的文字内容时，组态页将展示该设备属性详情点位弹框，组态预览时默认效果如下（组态发布后，该弹框需由外部嵌入组态发布页的母页面完成开发）：

母页面监听该事件的代码示例如下：
```
window.addEventListener("message", (event) => {
  if (event.data.type === 'propertyDetail') {
    this.sendDetail(event.data)
  }
})
```
设备控制事件。

若单击组态页某设置图标时，组态页会向window发送类型为'deviceControl'或者'propertyControl'的消息，（母页面）打开 ”下发指令”弹窗。
- 关联组件：
  1. 文本增强组件
  
  2. 表单组件
  
  3. 风扇组件
  
  4. 设备图标组件
- 事件格式：
```
{
  direction:"export",
  type: "deviceControl",
  data: {
    device_id: ${device_id}
  }
}
```
或：
```
{
  direction:"export",
  type: "propertyControl",
  data: {
    property_path: ${service_id}/${property_code},
    device_id: ${device_id}
  }
}
```
- 参数说明：
type：消息类型（deviceControl为向设备下发指令,propertyControl为控制xx属性）

property_path：服务ID/属性编码

device_id：设备ID

isDeviceIcon：是否单击设备图标
- 处理样例：
(1) 当type类型为deviceControl时，说明控制的只是具体设备而没有指定具体属性，所以没有property_path字段

如用户单击组态页面中的“设备组件”时，由于所选定的是具体设备没有指定具体的属性，此时在弹窗中可以自行选择设备属性的点位，组态预览页的默认效果如下（发布页该弹框需由外部母页面完成开发）：

(2) 当type类型为propertyControl时，说明控制的是具体设备的指定属性，所以有property_path字段

如单击组态页面中“文本增强组件”的齿轮图标时，由于已经选定了具体设备的指定属性，此时在弹窗中无法再自行选择设备属性的点位，组态预览页的默认效果如下（发布页该弹框需由外部外部母页面完成开发）。

外部母页面，可在页面中监听以下两种类型的消息则可以判断需要如何显示弹窗，代码示例可参考下图：
```
window.addEventListener("message", (event) => {
  if (event.data.type === 'deviceControl' || event.data.type === 'propertyControl') {
    this.sendCommand(event.data)
  }
})
```