# 设备类事件
组态页支持用户单击组态中查询详情图标或设置图标时，向window发送"propertyDetail"事件和"deviceControl"/"propertyControl"事件，可用于母页面联动组态，展示相应的"查询属性"弹窗和"下发指令"弹窗。
组态发布页面一般是通过iframe的方式嵌入外部母页面的，其中组态弹窗分为"查询属性"和"下发指令"弹窗两类。
#### 操作步骤
1. 设备属性明细事件。 
   若单击组态页查询详情类图标时，组态页会向window发送类型为：'propertyDetail'的消息，（母页面）打开"查询属性"弹窗；
   - **关联组件：**
   
   
   1. 文本增强组件
   ![](https://support.huaweicloud.com/devg-ocsmartcampus/zh-cn_image_0000002463168738.png "点击放大")![](https://support.huaweicloud.com/devg-ocsmartcampus/zh-cn_image_0000002496207757.png "点击放大")
   2. 表单组件
   ![](https://support.huaweicloud.com/devg-ocsmartcampus/zh-cn_image_0000002496367781.png "点击放大")![](https://support.huaweicloud.com/devg-ocsmartcampus/zh-cn_image_0000002496207777.png "点击放大")
   - **事件格式：**
     ```
     {
       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时，说明查看的是具体设备的指定属性，
   - **处理样例：**
   
   
   当用户单击组态页面中"文本增强组件"的文字内容时，组态页将展示该设备属性详情点位弹框，组态预览时默认效果如下**（组态发布后，该弹框需由外部嵌入组态发布页的母页面完成开发）**：
   ![](https://support.huaweicloud.com/devg-ocsmartcampus/zh-cn_image_0000002463328350.png "点击放大")
   母页面监听该事件的代码示例如下：
   ```
   window.addEventListener("message", (event) => {
     if (event.data.type === 'propertyDetail') {
       this.sendDetail(event.data)
     }
   })
   ```
   
   
2. 设备控制事件。 
   若单击组态页某设置图标时，组态页会向window发送类型为'deviceControl'或者'propertyControl'的消息，（母页面）打开 "下发指令"弹窗。
   - **关联组件：**
     1. 文本增强组件
     ![](https://support.huaweicloud.com/devg-ocsmartcampus/zh-cn_image_0000002463168722.png "点击放大")![](https://support.huaweicloud.com/devg-ocsmartcampus/zh-cn_image_0000002496207793.png "点击放大")
     2. 表单组件
     ![](https://support.huaweicloud.com/devg-ocsmartcampus/zh-cn_image_0000002463328366.png "点击放大")![](https://support.huaweicloud.com/devg-ocsmartcampus/zh-cn_image_0000002496367777.png "点击放大")
     3. 风扇组件
     ![](https://support.huaweicloud.com/devg-ocsmartcampus/zh-cn_image_0000002496367769.png "点击放大")![](https://support.huaweicloud.com/devg-ocsmartcampus/zh-cn_image_0000002463168750.png "点击放大")
     4. 设备图标组件
     ![](https://support.huaweicloud.com/devg-ocsmartcampus/zh-cn_image_0000002496207773.png "点击放大")![](https://support.huaweicloud.com/devg-ocsmartcampus/zh-cn_image_0000002463328374.png "点击放大")
     
   
   
   
   - **事件格式：**
   
   
   ```
   {
     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类型为deviceContro**l时，说明控制的只是具体设备而没有指定具体属性，所以没有property_path字段
   如用户单击组态页面中的"设备组件"时，由于所选定的是具体设备没有指定具体的属性，此时在弹窗中可以自行选择设备属性的点位，组态预览页的默认效果如下**（发布页该弹框需由外部母页面完成开发）**：
   ![](https://support.huaweicloud.com/devg-ocsmartcampus/zh-cn_image_0000002496207797.png "点击放大")
   **(2) 当type类型为propertyControl**时，说明控制的是具体设备的指定属性，所以有property_path字段
   如单击组态页面中"文本增强组件"的齿轮图标时，由于已经选定了具体设备的指定属性，此时在弹窗中无法再自行选择设备属性的点位，组态预览页的默认效果如下（发布页该弹框需由外部外部母页面完成开发）。
   ![](https://support.huaweicloud.com/devg-ocsmartcampus/zh-cn_image_0000002496367793.png "点击放大")
   外部母页面，可在页面中监听以下两种类型的消息则可以判断需要如何显示弹窗，代码示例可参考下图：
   ```
   window.addEventListener("message", (event) => {
     if (event.data.type === 'deviceControl' || event.data.type === 'propertyControl') {
       this.sendCommand(event.data)
     }
   })
   ```