OneNet数据可视化View页面上的数据过滤器使用介绍

一、OneNET View 介绍

OneNET View 3.0 全新上线，快捷、易用的数字孪生底座，助力行业应用场景开发。支持3D场景搭建嵌入，2D/3D组件互调、提供海量组件/模型。
全新上线数据集功能，基于 MySQL 5.X 和 MySQL 8.X 数据库，可视化建立表关联、过滤条件，实现数据建模，更快速打通大屏与数据库。

一、产品能力
拖拽式编辑 
免编程、10分钟可快速搭建应用界面。
多数据源对接
支持OneNET内置数据、第三方数据库、Excel静态文件多种数据源。
数据建模
全新上线数据集功能，基于 MySQL 5.X 和 MySQL 8.X 数据库，拖拽建立表关联等功能实现数据建模，快速打通大屏与数据库。
3D数字孪生
全新3D引擎，提供海量行业属性模型场景搭建，一键嵌入2D项目。
行业组件调用
物联网行业可视化模板，3D组件拓展包，5G专网应用。
数据过滤
可通过代码编辑器对数据进行快速过滤筛选或逻辑加工。
    
    
二、产品优势
丰富的组件
提供多种地图、表盘、图表等不同分类的2D/3D组件，总数超过500个（注* 行业拓展包需另购）。
数据无缝对接
免编程、免运维，10分钟快速生成物联网展示应用。
快速应用开发/部署
拖拽式编辑、10分钟快速完成展示应用搭建；灵活部署方式，支持轻量化大屏部署。
2D/3D组件互调
可在3D场景内调用2D面板组件（组合），亦可在2D编辑器中一键嵌入3D场景，灵活应用。

二、场景介绍

在使用onenet物联网平台时，会通过设备上传数据到平台，然后设计界面进行展示。

界面上的控件显示数据都需要指定数据源。 一个数据源对应对应一个设备的数据点。

一个数据点可以传一个值，也可以传多个值。 如果传递多个值，就需要使用过滤器进行拆解，提取本次需要的数据进行显示，不同的控件就提取不同的数据显示，各取所需，下面就介绍这个过滤器如何实现。

三、数据过滤器使用

3.1 帮助文档

官网的帮助文档地址：https://open.iot.10086.cn/doc/v5/develop/detail/355

3.2 数据源模板

第一步要先创建数据源模板，然后再使用数据源模板创建数据模型。

3.3 可视化页面

可视化页面设置控件的数据源。

这是创建好的数据源：

当设备上传数据之后，可以在这里看到源数据：

而过滤器的作用就是，从这个JSON数据里提取需要的数据进行显示。

3.4 案例1：显示数据上报时间

需求： 设备连接上云端之后会不间断的上报温度数据，我想在界面上显示最新一次温度数据上报时间，怎么办？

通过看数据源得知，温度节点上传数据源格式如下：

{ "data": [ { "update_at": "2022-11-01 22:53:00", "unit": "摄氏度", "id": "temp", "unit_symbol": "℃", "current_value": 22.1, "at": "2022-11-01 22:53:00", "value": 22.1 } ], "type": "OneNET", "rate": 5, "nums": 1, "name": "temp1_OCix", "authType": "secure", "apiKey": "LuUNWqtlwSHtwKW590zPlQ+IiEl6TZiEuk7jc6Vyym0=", "productId": "551886", "devId": "1009326949", "vDevId": "", "dsId": "temp", "vDsId": "", "protocol": "HTTP", "id": "temp1_OCix", "fields": [], "refreshing": false }

想要得到里面的时间，也就是update_at 字段。

那么过滤器代码就这样写：

return [{
    "value": "数据上报时间:" + data[0].update_at
}]

在可视化页面上，拖拽一个文本控件，然后点击文本控件，在右边设置数据源：（具体完成过程，看下面截图里的序号）

设置好保存之后，点击上面的数据处理结果,验证下过滤器返回的数据格式是不是自己想要的。

处理结果如下： 这个是正确的。

这个格式怎么判断是否是正确的？

首先，拖一个新文本控件到界面上时，可以看到这个文本控件本身就有数据，这个数据是能显示的，那么这个时候，就可以看看这个数据格式是怎么样。

下面是拖拽了一个新的标题文本控件到界面，看了它的数据处理结果，和我们上面的一样的格式，依次判断我们自己设置的过滤器语法是否正确。

3.5 案例2：使用地图显示GPS数据

如果设备具有定位功能，会上传GPS数据到云平台，云平台界面上可以使用地图显示。

通过数据源得知，设备上传的GPS数据如下：

{ "data": [ { "update_at": "2022-11-02 11:13:57", "unit": "", "id": "GPS", "unit_symbol": "", "current_value": { "lon": 109.731653, "lat": 28.289839 }, "at": "2022-11-02 11:13:57", "value": { "lon": 109.731653, "lat": 28.289839 } } ], "type": "OneNET", "rate": 5, "nums": 1, "name": "GPS_data_T3sD", "authType": "secure", "apiKey": "LuUNWqtlwSHtwKW590zPlQ+IiEl6TZiEuk7jc6Vyym0=", "productId": "551886", "devId": "1009326949", "vDevId": "", "dsId": "GPS", "vDsId": "", "protocol": "HTTP", "id": "GPS_data_T3sD", "fields": [], "refreshing": false }

然后根据地图控件需要的格式，编写对应的过滤器：

// 最终数据应该是一个数组
var result = [];
var dataPoint = null;
//循环处理选中的数据源的数据点
for (var i = 0; i < data.length; i++) {
    // 从数据点中取出需要的数据，通过配置键值对使得数据格式符合要求
    dataPoint = {
        dev1: {
            lon: data[i].value.lon,
            lat: data[i].value.lat,
        },
    };
    // 将这个数据点添加进结果中
    result.push(dataPoint);
}
return result;

处理结果正确，最终也显示了数据。

3.6 不使用数据过滤器

如果上传的数据就是一个值，就不用过滤器提取，很多控件可以直接显示值。

比如：仪表盘。

需要提取复杂数据字段的才需要过滤器。

四、有人云的4G模块如何获取GPS信息？

如果是GPS版本，就可以直接通过指令获取：

如果不是GPS定位版本，上面3个指令无法使用，只能使用基站定位。

查询基站定位的指令如下:

AT+LBS?

获取到基站信息之后,返回的数据：

+LBS: LAC = 9a0f,CID = 96f1b17

得到基站之后，可以通过百度、高德等地图的http接口将基站转为经纬度。

onenet也支持基站转为经纬度的功能。

帮助文档地址：https://open.iot.10086.cn/doc/v5/develop/detail/724

意思是： 通过MQTT向指定的主题上报数据点，这个数据点包含了基站信息。然后服务器会将转换后的经纬度返回来，如果设备订阅了平台下消息，就会收到数据。

五、OneNet的HTTP协议API接口使用介绍

文档地址：https://open.iot.10086.cn/doc/multiprotocol/book/develop/http/api/api-usage.html

平台提供开放的API接口，用户可以通过HTTP/HTTPS调用，进行设备管理，数据查询，设备命令交互等操作，在API的基础上，根据自己的个性化需求搭建上层应用，另外通过HTTP协议接入的设备不会显示在线状态。

（1）上传数据点为例

请求方式：POST

URL:http://api.heclouds.com/devices/device_id/datapoints

device_id：需要替换为设备ID

url参数

参数名称	格式	是否必须	说明
type	string	否	数据格式，默认为完整JSON型（见示例）

http body参数

参数名称	格式	是否必须	说明
datastreams	array-json	是	设备数据流信息的json数组，见datastreams描述表

datastreams描述表

参数名称	格式	是否必须	说明
id	string	是	数据流或者数据流模板名称
datapoints	array-json	是	数据点。可以一次性向设备云上传多个数据流，每个数据流中可以包括多个数据点，见datapoints描述表

datapoints描述表

参数名称	格式	是否必须	说明
at	date	否	上传数据点时间。如果为空，则设备云会取当前时间。如果存在其格式必须为"YYYY-MM-DDThh:mm:ss"的形式（例如：2015-03-22T22:31:12）
value	string/int/json…	是	数据的值

请求头部示例

POST http://api.heclouds.com/devices/2*****30/datapoints HTTP/1.1

请求参数示例

{
    "datastreams": [{
            "id": "temperature",
            "datapoints": [{
                    "at": "2013-04-22T00:35:43",
                    "value": "bacd"
                },
                {
                    "at": "2013-04-22T00:55:43",
                    "value": 84
                }
            ]
        },
        {
            "id": "key",
            "datapoints": [{
                    "at": "2013-04-22T00:35:43",
                    "value": {
                        "x": 123,
                        "y": 123.994
                    }
                },
                {
                    "at": "2013-04-22T00:35:43",
                    "value": 23.001
                }
            ]
        }
    ]
}

返回示例

{
    "errno": 0,
    "error": "succ"
}

组合HTTP报文： (温度)

POST /devices/1012473502/datapoints HTTP/1.1
api-key:jBPrSkWktqQjnWKlOTh1OTxKKfM=
Host:api.heclouds.com
Connection:close
Content-Length:61

{"datastreams":[{"id":"data","datapoints":[{"value":1234}]}]}

组合HTTP报文： (GPS)

POST /devices/1009326949/datapoints HTTP/1.1
api-key:Q1=mhFwn=zt6nfp1EYvSsUcwUX8=
Host:api.heclouds.com
Connection:close
Content-Length:90

{"datastreams":[{"id":"GPS","datapoints":[{"value":{"lon":109.731653,"lat":28.289839}}]}]}

Qt代码实现数据点上传：

void Widget::OneNet_POST_DataStreams()
{
    QString requestUrl;
    QNetworkRequest request;

    //设置请求地址
    QUrl url;

    //获取token请求地址
    requestUrl = QString("http://api.heclouds.com/devices/%1/datapoints")
                 .arg(1009326949);

    //自己创建的TCP服务器,测试用
    //requestUrl="http://127.0.0.1:8080";

    //设置数据提交格式
    request.setHeader(QNetworkRequest::ContentTypeHeader, QVariant("application/json;charset=UTF-8"));

    //设置api-key
    request.setRawHeader("api-key","Q1=mhFwn=zt6nfp1EYvSsUcwUX8=");

    //构造请求
    url.setUrl(requestUrl);

    request.setUrl(url);

    //上传GPS数据为例
    QString text =QString("{\"datastreams\":[{\"id\":\"%1\",\"datapoints\":[{\"value\":%2}]}]}")
            .arg("GPS")
            .arg("{\"lon\":109.731653,\"lat\":28.289839}");

    //发送请求
    manager->post(request, text.toUtf8());
}

（2）查询设备数据流

请求方式：GET

URL: http(s)://api.heclouds.com/devices/device_id/datastreams/datastream_id

device_id：需要替换为设备ID
datastream_id：需要替换为数据流ID

返回参数

参数名称	格式	说明
errno	int	调用错误码，为0表示调用成功
error	string	错误描述，为"succ"表示调用成功
data	json	接口调用成功之后返回的设备相关信息，见data描述表

data描述表

参数名称	格式	说明
id	string	数据流ID
create_time	string	数据流创建时间
update_at	string	最新数据上传时间
current_value	string/int/json…	最新数据点

请求示例

GET http://api.heclouds.com/devices/20474930/datastreams/temperature HTTP/1.1

返回示例

{
    "errno": 0,
    "data": {
        "update_at": "2017-11-20 10:03:10",
        "id": "temperature",
        "create_time": "2017-11-20 09:59:35",
        "current_value": "31303130303030303433"
        }
    },
    "error": "succ"
}

Qt代码实现数据流获取：

//查询最新的数据流
/*
请求方式：GET
URL: http(s)://api.heclouds.com/devices/device_id/datastreams/datastream_id
device_id：需要替换为设备ID
datastream_id：需要替换为数据流ID
*/
void Widget::OneNet_Get_DataStreams()
{
    QString requestUrl;
    QNetworkRequest request;

    //设置请求地址
    QUrl url;

    //获取token请求地址
    requestUrl = QString("http://api.heclouds.com/devices/%1/datastreams/%2")
                 .arg("1009326949")
                 .arg("temp");

    //自己创建的TCP服务器,测试用,用来看请求的报文格式
//    requestUrl = QString("http://localhost/devices/%1/datastreams/%2")
//                 .arg("1009326949")
//                 .arg("temp");

    //设置数据提交格式
    request.setHeader(QNetworkRequest::ContentTypeHeader, QVariant("application/json"));

    //设置api-key
    request.setRawHeader("api-key","Q1=mhFwn=zt6nfp1EYvSsUcwUX8=");

    //构造请求
    url.setUrl(requestUrl);

    request.setUrl(url);

    //发送请求
    manager->get(request);
}

组合的报文格式：

（注意： 报文发送时后边要跟上2个换行符\r\n\r\n）

GET /devices/1009326949/datastreams/temp HTTP/1.1
Host: api.heclouds.com
Content-Type: application/json
api-key: Q1=mhFwn=zt6nfp1EYvSsUcwUX8=

利用TCP调试助手测试：

注意：数据发送区，后面要加两个回车再发送。

如果想获取设备下全部的最新数据点，就不用指定数据点的名称： 按下面这种方式写。

GET /devices/1009326949/datastreams HTTP/1.1
Host: api.heclouds.com
api-key: Q1=mhFwn=zt6nfp1EYvSsUcwUX8=
Connection: close