# 空间/系统组态类事件
组态监听母页面发送的组态显示/隐藏事件，联动组态页中设备图标进行显示/隐藏
- **关联组件：**
组态工具系统组件库中所有组件
- **事件格式：**
```
{
    "direction": "import",
    "type": "baPageVisible",
    "data": {
        "visibleProductIds": [
            "${porduct_id1}",
            "${porduct_id2}",
            "allProducts"
        ],
        "invisibleProductIds": [
            "${porduct_id3}",
            "${porduct_id4}",
            "allProducts"
        ]
    }
}
```
- **参数说明：**
*type：消息类型（baPageVisible为组态显示/隐藏）*
*visibleProductIds：需要显示的产品ID列表*
*invisibleProductIds: 需要隐藏的产品ID列表*
**若产品id传"allProducts"，则表示组态图中所有产品ID**
**若某productId既在可见产品ID列表中，又在不可见产品ID列表中，组态图将对该产品对应组件进行显示，而不进行隐藏。**
- **处理样例:**
```
this.visible = [];
this.invisible = [];
this.productList.forEach(item => {
  if (item.visible) {
    this.visible.push(item.product_id);
  } else {
    this.invisible.push(item.product_id);
  }
});
if (!this.visible.length) {
  this.invisible = ['allProducts'];
}
if (!this.invisible.length) {
  this.visible = ['allProducts'];
}
let iframeEl = document.getElementById("BaPage");
iframeEl.contentWindow.postMessage(
  {
    type: 'bastudioVisible',
    data: {
      visibleProductIds: this.visible,
      invisibleProductIds: this.invisible
     }
  },
  'http://localhost:8082'
);
```