文档简介：
通过本示例，用户可以了解到如何把物可视的仪表盘嵌入到自己的工程中，并与工程中的交互控件进行数据交互。
本示例以一个“设备地图”组件为例，通过查询一系列TSDB数据来作为“设备地图”的轨迹数据，并通过一个select JS 控件和一个datetimpicker JS控件来实现“设备地图”中的车辆选择和查询时间选择，具体的操作步骤如下：
1.首先 拖拽一个"设备地图"组件到中间的画布上。
2.准备数据。
(1) 进入数据表页面。选择上图 红框1中的『数据表』Tab进入到数据表创建页面。
(2) 新建数据表。
第一步：命名数据表，选择数据类型。此处我们选择一个“时序数据库”数据，点击下一步。
第二步：在数据表配置界面选择合适的度量metric,域field,标签tag。
本例中的度量是一系列时序轨迹数据，度量是 telemetric, 域是经度longitude和维度latitude， 标签是 entity。
这样我们就得到一张有多条轨迹的位置地图。
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。
4.组件添加和交互
-
第一步：在JS代码中添加交互组件。（组件中的RangePicker组件用的是 antd 中的RangePicker组件）
Car Name:
scooter tesla icecream-truck<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.完成后效果如下
