手把手教你快速部署Thingsboard开源物联网平台智慧农业实例（二）- UI与动态数据

Thingsboard开源物联网平台智慧农业实例快速部署教程（二）【部署UI与动态数据】

文章目录

Thingsboard开源物联网平台智慧农业实例快速部署教程（二）【部署UI与动态数据】

1. 页面总览

2. 设备

2.1 数据字段定义

2.2 设备映射关系

2.3 添加设备

3 仪表盘UI

3.1 地图模块

3.2 空气监测土地监测模块

3.3 光照监控

3.4 温度湿度

3.5 土壤盐分

3.6 报警器

4 模拟设备数据

5 实际运行

1. 页面总览

本篇博文致力于快速部署，所以不会详解thingsboard中的相关知识点。详解请参照官方文档。
基础的服务部署见笔者上一篇博文ThingsBoard开源物联网平台智慧农业实例快速部署教程（Ubuntu、CentOS适用）

搭建页面整体效果如下：

动态效果如下：

2. 设备

2.1 数据字段定义

从页面中能够看到我们有9个大棚的数据，数据是动态更新的，从页面上的数据能够看到有（命名未按标准，类型定义随意）：

字段	意义	所用模块	类型
latitude	纬度	地图	double
longitude	经度	地图	double
N	水解性氮	土壤盐分折线图	double
P	有效磷	土壤盐分折线图	double
K	速效钾	土壤盐分折线图	double
illumination	光照强度	光照监控折线图	double
temperature	气温	大棚温度仪表盘	double
airHumidity	空气湿度	大棚湿度仪表盘	double
CO2	二氧化碳浓度	空气监测表格	double
soilTemperature	土壤温度	土地监测表格	double
pH	土壤pH值	土地监测表格	double
soilMoisture	土壤湿度	土地监测表格	double
ventilate	通风	空气监测表格	bool
name	大棚编号	报警器	string

2.2 设备映射关系

10个大棚都属于大棚这个类型，在设备定义中的关系映射为有10个大棚设备，每个大棚设备大棚x都有配置大棚。

2.3 添加设备

添加设备配置

添加设备

以此类推创建9个

由于地图上需要展示设备的位置，所以需要经纬度，一般设大棚位置不变动，考虑将其固定为大棚的属性，同样大棚编号也设置为固有属性。

3 仪表盘UI

进入仪表盘库编辑UI

点击编辑的笔尖

点击实体别名

实体别名相当于将设备接入仪表盘的媒介，有多种规则接入，按需选择。

为了某些特殊需要，也可以再添加单个设备的映射

请读者点击添加别名，笔者用编辑别名来展示参数选择

3.1 地图模块

按照笔者上篇博文，已经导入了一个仪表盘，在导入的仪表盘中有一个地图组件，如果我们自行导入地图组件的话按如下操作

设置腾讯地图，使用腾讯地图的key（需要读者自行申请），设置经度纬度字段。与设备属性字段设置对应起来

接下来就是绑数据的阶段，数据源设置刚刚创建的实体，别名为Silos，因为我们的引入规则为设备类型。所以10个具有大棚配置的大棚设备的数据都进入了数据源中。

数据设置属性，将经纬度加入

效果：

3.2 空气监测土地监测模块

这一部分选择实体表实现，在之前导入的布局中已经有实体表的组件，可以直接编辑，如果自己需要自行创建，那么可以选择组件包中的这个组件

空气监测的数据源设置如下

编号字段为实体字段，映射实体的系统自有值，所以实体字段name的值就是实体代表设备的设备名：大棚1、大棚2…，注意标签反应为表格的列名，下面的值都为name字段映射的设备名

下面的通风、空气湿度等等均为时序数据，新建数据键的时候添加时序数据的类型，键名要设置好，这里的数据是通过API接收json串的key，表格的值为实时更新的value，通过传统http或者mqtt等API接入，设置单位后每个值都会自动附带单位。

空气湿度设置如下

二氧化碳浓度设置如下

空气监测的导入仪表盘组件字体与直接添加组件默认不一样，这个是在设置中实现的，手动设置了标题样式，需要一点点的html基础

土地监测组件设置

与上述设置方式基本一致

效果如下：

读者的应该是暂时没有数据的，动态数据制造会在下面的章节4中介绍。

3.3 光照监控

光照监控使用如下组件

如下设置数据源

注意标签使用变量表达式（${entityName}），这样有条理

效果如下：

3.4 温度湿度

温度湿度采用这个部件

设置数据源，由于我们这个组件最大允许一个数据源，所以我们设置实体为单个设备的大棚1，数据键为时序字段。

设置标题并显示

设置刻度与最值

设置标题显示以及单位显示

效果如下

接下来设置湿度组件，湿度使用如下组件

设置数据源

设置刻度最值

设置单位

效果如下

3.5 土壤盐分

土壤盐分也是单个大棚显示多项数据，设置一个大棚的数据与光照监控的组件用法一致，不再赘述，时序数据源设置如下

设置标题显示

设置你要选择显示的统计信息

效果如下

但是这仍然只能显示一个大棚数据，切换多个查看大棚实时数据数据在这里使用动作->状态改变来实现，动作是在组件上形成反馈的功能，状态类似于页面

状态在这里选择

为大棚2单独设置一个状态，添加大棚2状态

将默认页面的组件复制过去

选择大棚2粘贴

将盐分数据源设为大棚2

在大棚1中添加按钮动作，设置为更新当前仪表盘状态，转到大棚2状态

设置如下：

大棚2等也是如此设置动作，效果如下（后期笔者动过部分组件，正常来说复制的完全一样差别不会这么大）

同样的方法设置温度和湿度，效果如上

由于笔者对API不熟悉，实际上应该有办法通过代码来直接变更数据源，但是短时间内笔者未找到，而且这是一篇快速部署教程，暂时也不拘泥于细节。

事实上动作可以采用自定义动作类型，但是widget上下文中只能使用当前数据源，没有找到能够读到全局实体别名并重新设置数据源的办法。如果有有经验的读者希望不吝赐教，十分感谢！

3.6 报警器

报警器需要在设备配置中设置告警规则，操作流程如下

详细设置：

支持若干条件表达，添加键名和规则

添加完成后来到仪表盘，添加如下部件

添加数据源，为了不使报警信息消失，采用一年的时间让消息堆积（看个人需求）

注意：除了位置是设备属性“编号”以外，其余的均为告警字段可以联系到内部的alarm，仅标签按照自己的需要设计即可

效果如下

至此UI设计（拖拖拽拽完毕）

4 模拟设备数据

为了让页面动起来，我们设计Linux脚本使用HTTP API进行模拟设备数据上报。

使用POST方式发送json串来上报数据，url格式如下：

http(s)://host:port/api/v1/$ACCESS_TOKEN/telemetry

$ACCESS_TOKEN为设备访问令牌，获取方式为

单一设备的上报脚本fakeData.sh，其接收一个参数，作为设备访问令牌，上报数据，上报的数据通过读取当前目录的data.txt进行匹配

#!/bin/bash
# Author:Moresweet
# Date:2023.3.26
# blog:https://blog.csdn.net/qq_38853759?spm=1000.2115.3001.5343

# 检查脚本参数是否正确
if [ $# -ne 1 ]; then
    echo "Usage: $0 <device_id>"
    exit 1
fi

# 设置设备号和 URL
device_id=$1
url="http://127.0.0.1:8080/api/v1/${device_id}/telemetry"

# 无限循环发送 POST 请求
while true; do
    # 读取数据文件，生成 JSON 数据并发送 POST 请求
    while read -r line; do
        # 解析数据行
        key=$(echo "$line" | awk '{print $1}')
        min=$(echo "$line" | awk '{print $2}')
        max=$(echo "$line" | awk '{print $3}')

        # 生成随机值
        if [ -z "$max" ]; then
            # 值列只有一个字段，当作字符串处理
            value=$min
        else
            # 值列有两个字段，生成随机数
            value=$(awk -v min="$min" -v max="$max" 'BEGIN{srand(); printf("%.2f\n", min+rand()*(max-min+0.0001))}')
        fi

        # 构建 JSON 数据
        json="{\"${key}\":${value}}"

        # 发送 POST 请求
        curl -X POST -H "Content-Type: application/json" -d "$json" "$url"
    done < data.txt

    # 等待 5 秒钟后再次发送请求
    sleep 5
done

data.txt内容如下，每一行是json串的一个键值对，键为每一行的第一个数据，数据之间用空格隔开，第二个数据为合理值的最小阈值，第三个数据为合理值的最大阈值，如果本行只有第二个数据，则直接作为字符串作为对应键的值。

N 15 30
P 20 40
K 250 300
illumination 30000 35000
temperature 23 32
airHumidity 30 70
CO2 400 800
soilTemperature 15 25
pH 5.0 7.0
soilMoisture 50 80
ventilate true

start.sh为启动脚本，思路为在列表中取出所有访问令牌，作为参数后台运行fakeData.sh脚本，每个运行延时2秒，因为随机数的产生一般是取时间为种子，所以并不是真正的随机数，延时为了避免所有设备脚本产生的随机数一摸一样。

#!/bin/bash

# 定义设备参数列表（按需修改此处）
devices=("xxxxxxxxxxxxxxxxx" "hdalhdaslhdalsdhasl" "cuvsaBdfdsL" "dasdsaLOHdsadL" "IkkkHJDSFSDlkjfds" "hhfds" "afsdfdsfsdfgfgfgh" "kjlhfldsjsldf" "gfeuheshfdsfjfsdkj")

# 遍历设备列表执行fakeData.sh脚本并将其后台运行
for device in "${devices[@]}"
do
  ./fakeData.sh "$device" &
  # 加延时防止伪随机数按时间产生“相同”的“随机”值
  sleep 2
done

stop.sh为结束脚本，如下所示

#!/bin/bash

# 查找所有名为 fakeData.sh 的进程
pids=$(pgrep fakeData.sh)

# 循环杀死每个进程
for pid in $pids; do
  kill $pid
done

5 实际运行

运行填补start.sh中的设备列表以及修改fakeData.sh中的ip地址即可。

设置运行权限

chmod u+x start.sh
chmod u+x stop.sh
chmod u+x fakeData.sh

启动脚本

./start.sh

停止脚本

./stop.sh

运行结果