# 空间组态图
空间组态图主要用于展示一个空间平面下所有设备的实时状态，以及单击组件跳转至具体设备的详情页。在空间平面中为了更直观地展示各设备的位置，一般需要先在画布中配置一张空间结构图作为背景，并以此作为位置依据配置不同的组件。
#### 操作步骤
1. 在组态页中单击画布空白处，此时可以看到右侧配置背景图的图表，单击上传图片来配置背景图。 
   图1配置背景图   
   ![](https://support.huaweicloud.com/bestpractice-ocsmartcampus/zh-cn_image_0000002496369293.png "点击放大")
   
   
2. 上传后图片默认以左上角作为基准进行展示，因此如果图片过大或过小则可能导致背景图显示不完整，此时可以在右侧样式中选择拉伸，背景图便会根据画布展示大小进行自适应等比缩放。 
   图2背景图样式   
   ![](https://support.huaweicloud.com/bestpractice-ocsmartcampus/zh-cn_image_0000002496369269.png "点击放大")
   
   
3. 配置空间平面时需要展示平面中的多种设备，如果使用各种设备组件进行配置很容易因缩放比例原因造成组件状态过小，所以该场景主要使用"设备图标"组件和"风扇"组件进行配置。其中"设备图标"组件主要用于展示设备的在线状态，"风扇"组件主要用于展示设备的运行状态。 
   图3空间平面配置   
   ![](https://support.huaweicloud.com/bestpractice-ocsmartcampus/zh-cn_image_0000002463170286.png "点击放大")
   
   
4. 首先拖入"设备图标"组件，并单击组件设置按钮配置对应的产品名称和告警属性。 
   图4设备图标基础信息   
   ![](https://support.huaweicloud.com/bestpractice-ocsmartcampus/zh-cn_image_0000002463329910.png "点击放大")
   
   
5. 因空间平面上各种类型的设备都可能使用"设备图标"组件来显示，可能无法直观分辨每一个组件对应的设备，因此可以给组件添加别名，如[图3 空间平面配置]中的CH01。
   
   图5设备图标显示设置   
   ![](https://support.huaweicloud.com/bestpractice-ocsmartcampus/zh-cn_image_0000002463329914.png "点击放大")
   
   
6. 完成"设备图标"的设置后，再切换到数据卡片绑定设备实例。 
   图6绑定设备实例   
   ![](https://support.huaweicloud.com/bestpractice-ocsmartcampus/zh-cn_image_0000002496209361.png "点击放大")
   ![](https://support.huaweicloud.com/bestpractice-ocsmartcampus/public_sys-resources/note_3.0-zh-cn.png)
   空间组态的场景由于在一个组态图中需要配置多个设备实例，因此不能通过{deviceNumber}通配符来指定设备，需要给每一个设备指定具体的设备实例信息才能保证各设备组件正常显示实时信息。
   
   
7. 拖入"风扇"组件并单击组件设置按钮配置对应的产品名称、告警属性、Tip名称，因风扇在运行时需要转动无法在里面直接显示名称，可在风扇旁边使用"文本"组件配置设备名称。 
   图7风扇基础信息   
   ![](https://support.huaweicloud.com/bestpractice-ocsmartcampus/zh-cn_image_0000002496209329.png "点击放大")
   
   
8. 完成"风扇"的设置后，再切换到数据卡片绑定设备实例，组件行为的配置。 
   图8风扇行为配置   
   ![](https://support.huaweicloud.com/bestpractice-ocsmartcampus/zh-cn_image_0000002496209345.png "点击放大")
   
   
9. 空间平面中存在多个设备，为了方便快速查看具体某个设备实例的详细信息，可参考[事件配置说明](https://support.huaweicloud.com/bestpractice-ocsmartcampus/ocsmartcampus_05_0079.html)切换到事件卡片根据实际使用场景添加事件。以"单击时"为例，单击"添加动作"在打开的"事件动作编辑"窗口中配置需要执行的动作。当前需要进行跳转则选择"页面跳转"，在跳转地址中可以直接配置发布页地址进行跳转，也可以选择当前组态中已发布的页面进行配置来跳转。
   
   图9事件动作编辑   
   ![](https://support.huaweicloud.com/bestpractice-ocsmartcampus/zh-cn_image_0000002496369305.png "点击放大")
   
   
10. 在空间平面中配置需要实时展示的设备属性值，拖入"文本增强"组件并在组件设置中配置相应信息，绑定具体的设备实例来实时显示配置的属性点位信息。 
    图10配置文本增强组件   
    ![](https://support.huaweicloud.com/bestpractice-ocsmartcampus/zh-cn_image_0000002463329894.png "点击放大")
    
    
11. 在完成页面配置后，单击"保存"按钮完成组态页的保存操作。 
    图11保存空间组态图   
    ![](https://support.huaweicloud.com/bestpractice-ocsmartcampus/zh-cn_image_0000002496369281.png "点击放大")
    
    
12. 配置完成后，单击右上角"预览"按钮就可以查看当前的配置效果了。 
    图12空间组态效果图   
    ![](https://support.huaweicloud.com/bestpractice-ocsmartcampus/zh-cn_image_0000002463329882.png "点击放大")