# 系统组态图
系统组态图主要用于展示整个系统的实时状态，如冷热源系统、空气调节系统、送排风系统等，以及单击组件跳转至具体设备的详情页。
#### 以冷源系统为例
1. 在画布中拖入各类设备组件，按照[设备组态图](https://support.huaweicloud.com/bestpractice-ocsmartcampus/ocsmartcampus_05_0086.html)绑定每个设备的产品名称和设备实例，并根据当前场景的实际情况配置组件的行为。
   
   图1配置设备组态   
   ![](https://support.huaweicloud.com/bestpractice-ocsmartcampus/zh-cn_image_0000002463170074.png "点击放大")
   ![](https://support.huaweicloud.com/bestpractice-ocsmartcampus/public_sys-resources/note_3.0-zh-cn.png)
   系统组态的场景由于在一个组态图中需要配置多个设备实例，因此不能通过{deviceNumber}通配符来指定设备，需要给每一个设备指定具体的设备实例信息才能保证各设备组件正常显示实时信息。
   
   
2. 通过管道将各类设备进行连接完成通路，由于冷源系统存在冷水与热水，可以通过配置管道中的水流颜色来区分需要表达的温度变化。 
   图2配置管道组件   
   ![](https://support.huaweicloud.com/bestpractice-ocsmartcampus/zh-cn_image_0000002463170082.png "点击放大")
   
   
3. 对于需展示绑定在一起的组件，可按住"Ctrl"选中组件（此处选择"水泵"和"水管"），单击上方"组合"，若需要拆分组件，则选中组合后的组件单击"取消组合"即可。 
   图3组合组件   
   ![](https://support.huaweicloud.com/bestpractice-ocsmartcampus/zh-cn_image_0000002496209153.png "点击放大")
   ![](https://support.huaweicloud.com/bestpractice-ocsmartcampus/public_sys-resources/note_3.0-zh-cn.png)
   当多个组件组合后则视为一个组件，原多个组件配置的行为或事件不再生效，若需要保留原有行为或事件，需在配置完成后取消合并组件。
   
   
4. 拖入"文本增强"组件，配置各设备实例的实时信息。因系统组态可能存在多种设备实例需要展示实时信息，为了使画布更加整洁清晰，可以将文本增强组件设置为透明背景，简化属性点位名称，根据实际需要显示或隐藏名称、文本、按钮。 
   图4配置设备属性信息   
   ![](https://support.huaweicloud.com/bestpractice-ocsmartcampus/zh-cn_image_0000002463170078.png "点击放大")
   
   
5. 如果需要配置整个系统的属性信息，可以拖入"表单"组件对系统属性进行配置，同时也可以去除"单设备表单"的勾选，并在"设备实例"中勾选多个设备，进行属性的统一展示。 
   图5配置系统属性信息   
   ![](https://support.huaweicloud.com/bestpractice-ocsmartcampus/zh-cn_image_0000002496369105.png "点击放大")
   
   
6. 配置完成后可以查看表单的展示效果，确定是否需要进行调整。 
   图6多设备表单   
   ![](https://support.huaweicloud.com/bestpractice-ocsmartcampus/zh-cn_image_0000002496369097.png "点击放大")
   
   
7. 参考[事件配置说明](https://support.huaweicloud.com/bestpractice-ocsmartcampus/ocsmartcampus_05_0079.html)来配置每个组件的单击跳转事件，依次来跳转至设备详情页查看设备的详细信息。
   
   图7配置组件事件   
   ![](https://support.huaweicloud.com/bestpractice-ocsmartcampus/zh-cn_image_0000002463170090.png "点击放大")
   
   
8. 由于系统组态图相对较复杂，可能存在很多管道或线缆对设备进行连接，在组件配置完成之后可能存在部分组件被遮挡无法查看或单击的问题，此时可以在右下角通过组件视图列表来直接定位到具体组件，尽量将需要查看属性或下发指令的组件层级提到上层，避免发布后因遮挡导致无法操作。同时可以通过![](https://support.huaweicloud.com/bestpractice-ocsmartcampus/zh-cn_image_0000002463329694.png "点击放大")图标显示、隐藏特定组件，或者通过![](https://support.huaweicloud.com/bestpractice-ocsmartcampus/zh-cn_image_0000002496209185.png "点击放大")图标禁止选中特定组件，从而在绘制画布时不会被其他组件所遮挡。
   
   图8组件视图列表   
   ![](https://support.huaweicloud.com/bestpractice-ocsmartcampus/zh-cn_image_0000002463170066.png "点击放大")
   ![](https://support.huaweicloud.com/bestpractice-ocsmartcampus/public_sys-resources/note_3.0-zh-cn.png)
   在绘制画布时通过![](https://support.huaweicloud.com/bestpractice-ocsmartcampus/zh-cn_image_0000002496369129.png "点击放大")图标对组件进行隐藏时，预览或发布页同样会生效，因此在配置完成后需要将隐藏的图标重新设为显示状态后再进行保存查看，避免因组件隐藏而无法正常显示。
   
   
9. 在完成页面配置后，单击"保存"按钮完成组态页的保存操作。 
   图9保存系统组态图   
   ![](https://support.huaweicloud.com/bestpractice-ocsmartcampus/zh-cn_image_0000002496369117.png "点击放大")
   
   
10. 配置完成后，单击右上角"预览"按钮就可以查看当前的配置效果了。 
    图10系统组态效果图   
    ![](https://support.huaweicloud.com/bestpractice-ocsmartcampus/zh-cn_image_0000002496209149.png "点击放大")