一、对接第三方系统API，定时刷新数据

选中饼状图，选择动态数据数据类型，点击编辑Api接口：

配置外部系统的API地址，参数通过代理支持跨域：

处理数据转换返回数据类型：

刷新数据后即可看到饼图的变化：

取到真实的后台数据，并定时刷新。

二、实时推送并联动孪生场景内部对象

为孪生场景图层配置动态接口和交互代码，选中孪生场景图，选择动态数据数据类型，点击编辑Api接口：

点击事件添加交互事件：

代码示例：

_this.$eventHub.$on('3d-data', (data) => {

    console.log('3d-data catch..', data)

    // data 数据

    // 下发操作图元事件

    \_this.$eventHub.$emit('3d-notice', (\_content, data) => { // 图纸上下文

        console.log('3d-notice..')

        \_content.g3d.dm().each((node) => {

            // 查找对应图元

            if (node.getTag() && node.getTag().indexOf(data.code) == 0) {

                // 遍历属性匹配图元对象的attr

                if (data.deviceAttributeStatusList) {

                    data.deviceAttributeStatusList.forEach((as) => {

                      node.a(as.propCode, as.propValue);

                    });

                }                    

                \_content.\_broadcastEventListener('deviceDataUpdate', 'updateLight', node, \[data\])

            }

        });

    });

});

模拟发起设备流水报文，控制灯的开关：

三、孪生对象联动大屏图层组件

再孪生场景图纸中添加一个摄像头：

新增一个视频组件，并在孪生场景图纸上绑定相应的交互代码：

代码示例：

// 监听3D图元点击

\_this.on3dClickData(e => {

    console.log('on3dClickData catch..', e)

    if(e.\_tag==='VIR1636767844151'){

       \_this.container.$refs\['subgroup'\].$refs\['itemad19ffef-fe2d-4217-8175-5c6aaca73974'\]\[0\].$el.style.display='block'

    }else{

        \_this.container.$refs\['subgroup'\].$refs\['itemad19ffef-fe2d-4217-8175-5c6aaca73974'\]\[0\].$el.style.display='none'

    }

})

\_this.$eventHub.$on('3d-clear', (data) => {

    console.log('3d-clear catch..', data)

    \_this.container.$refs\['subgroup'\].$refs\['ad19ffef-fe2d-4217-8175-5c6aaca73974'\]\[0\].$el.style.display='none'

});

点击摄像头，可弹出对应的视频画面：