当我们编辑完成一个 DataV 可视化项目之后,就可以发布该项目,然后通过分享链接分享出去。
此时,你的可视化项目可以不断更新数据,从而让查看大屏的人看到最新的可视化数据:
不过,如果你的 API 接口只是简单的无状态接口,那么 API 接口的服务端是无法区分发起数据请求的到底是同一个大屏页面还是不通的大屏页面的。
如果你的服务端希望知道每个大屏的页面都有一个不同的标志,从而可以区分发起这个数据请求的大屏是不是不同的页面,那么我们可以通过时间轴组件来给每个大屏页面都生成一个 uuid 座位 API 的参数,这个 uuid 每次新打开的页面都会重新生成,那么 API 的服务端就可以使用这个 uuid 作为依据判断一个请求是否是同一个页面的请求了。
步骤
- 首先添加一个时间轴组件
- 在时间轴的数据面板里填写初始化数据, 并把 value 映射我 UUID
- 给时间轴组件添加过滤器,在过滤器里生成 UUID
过滤器生成 UUID的代码可以自己实现,也可以参考:
var str = "",
range = 20,
arr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
for(var i=0; i<range; i++){
var pos = Math.round(Math.random() * (arr.length-1));
str += arr[pos];
}
str += Date.now();
return [
{
UUID: str
}
];
查看响应结果:
可以看到生成的 UUID
- 时间轴的样式配置里取消轮播:
回调 ID 设置为 UUID:
- 其他组件正常使用 API 数据源:
- 打开预览页面,可以看到对 API 的请求带上了 UUID 参数:
这样,服务端就可以针对每个不同的大屏页面组织返回数据了,比如模拟推流数据,每个打开的屏幕都可以依次获取数据而不会重复、遗漏等。