物可视IOTVIZ

    嵌入可视交互实践

    image

    通过本示例,用户可以了解到如何把物可视的仪表盘嵌入到自己的工程中,并与工程中的交互控件进行数据交互。

    本示例以一个“设备地图”组件为例,通过查询一系列TSDB数据来作为“设备地图”的轨迹数据,并通过一个select JS 控件和一个datetimpicker JS控件来实现“设备地图”中的车辆选择和查询时间选择,具体的操作步骤如下:

    1.首先 拖拽一个"设备地图"组件到中间的画布上。

    image

    2.准备数据。

    (1) 进入数据表页面。选择上图 红框1中的『数据表』Tab进入到数据表创建页面。

    图片

    (2) 新建数据表。

    第一步:命名数据表,选择数据类型。此处我们选择一个“时序数据库”数据,点击下一步。

    image

    第二步:在数据表配置界面选择合适的度量metric,域field,标签tag。

    image

    本例中的度量是一系列时序轨迹数据,度量是 telemetric, 域是经度longitude和维度latitude, 标签是 entity。

    image

    这样我们就得到一张有多条轨迹的位置地图。

    image

    3.嵌入仪表盘。

    在JS 工程中集成物可视SDK, 详情集成文档参考链接

    <script type="text/javascript" src="https://iot-dv.cdn.bcebos.com/prod/sdk/bdiotvizplayer.min.js"></script>
    
    componentDidMount() {
        const that = this;
        const bdIotVizPlayer = window.BDIotVizPlayer;
        bdIotVizPlayer({
            containerElement: this.$viz,
            dashboardId: '5b4c304357369f****028eff',
            fillMode: 'cover', // <-- Possible value: 'none', 'contain', 'cover'
            token: {
                type: 'embedded',
                value: '6941cb46595f8db8b****1cb7407ab9b' // <-- Access Token for current dashboard
            },
            onload: (api) => {
                this.api = api;
                api.getDashboardConfig().then(function (config) {
                    console.log(config.dataTables); // <--- Current Dashboard Config
                    let tableConfig = config.dataTables[5];
                 });
                // refer to API doc for complete API description
            }
        });
    }
    
    this.$viz = dom}>

    console.log(config.dataTables)的输出结果中找到相应查询的ID。

    image

    4.组件添加和交互

    • 第一步:在JS代码中添加交互组件。(组件中的RangePicker组件用的是 antd 中的RangePicker组件)

      <rangepicker id="rp" onchange="{this.changeTime}" defaultvalue="{[moment('2018/08/15'," dateformat),="" moment('2018="" 08="" 016',="" dateformat)]}="" format="{dateFormat}">

    • 第二步:为交互组件配置交互刷新代码。

      changeCar = (event) => { const newConfig = { "filters": { "tags": [{ "tag": "entity", "in": [event.target.value] }] } } this.api.updateDataTableConfig('23ab69a6-20ef-4e47-****-6b7526032b65', newConfig); }

      changeTime = ([from, until]) => { const newConfig = { "filters": { "start": from.valueOf(), "end": until.valueOf() }, "trigger":{ "rangeRule":"none", "type":"once" } } this.api.updateDataTableConfig('23ab69a6-20ef-4e47-****-6b7526032b65', newConfig) }

    5.完成后效果如下

    image

    image

    上一篇
    仪表指针实践
    下一篇
    数据处理实践