前言
—最近在使用Onenet时候,发现之前做wbe界面不像以前拖动控件,然后选择数据流就可以完成web端的显示以及控制。更新了View2.0之后,需要配置,现在记录下来,给
提示:以下是本篇文章正文内容,下面案例可供参考
一、View2.0是什么?
onenet官方View2.0官方文档
1、View2.0是一个拖拽式编辑器,免编程快速搭建应用界面
2、对接OneNET内置数据、第三方数据库、Excel静态文件多种数据源
3、这些也是官方文档有的不用多说
二、使用步骤
1.首先确保我们成功上传了数据流到onenet
2.点击进入view2.0界面
1.新建项目
2.使用控件,基本折线图
a.点击管理数据源
b.创建数据源模板
c.按照提示填写你自己的信息即可
d.填写完点击创建即可
e.点击箭头处,完成数据模板的添加
f.提示创建功能,如图所示就表示创建成功
g.点击管理数据源选择刚才我们创建的数据源模板
h.折线图的数据过滤器的代码
data.forEach((item, index) => {
item.x = item.update_at
item.y = item.value
});
2、仪表盘相关配置
2.1仪表盘的按照同样的方式设置数据流模板并成功添加之后,
2.2、仪表盘的数据过滤器的代码
function last(arr) {
var len = arr ? arr.length : 0;
if (len) return arr[len - 1];
}
return [{
value: last(data).value,
name: '湿度'
}]
3、地图控件的数据过滤器以及代码
//data
function last(arr) {
var len = arr ? arr.length : 0;
if (len) return arr[len - 1];
}
return [
{
dev1: {
lon: last(data).value.lon,
lat: last(data).value.lat
}
}
]
3.1设置完过滤器代码之后,还要进行坐标转化,还要进行坐标转化,还要进行坐标转化,要不然会定位地点偏移很大
总结
记录一下使用的onenet web可视化界面控件的配置,写在网页上,加深自己的记忆,也可以给想做这个方面显示的朋友们一些参考,写得有点乱,有问题可以在下方留言。