IoT Studio大屏组件(DataV)使用教程

简介: 物联网应用开发(IoT Studio)的Web可视化开发平台提供了大屏组件功能,支持使用可视化大屏的方式来分析并展示庞杂的数据。大屏组件可帮助非专业的工程师通过图形化的界面轻松搭建专业水准的可视化应用,满足您会议展览、业务监控、风险预警、地理信息分析等多种业务的展示需求。本文通过基本折线图展示设备上报的属性,DataV组件数据源通过数据分析API实现。

创建产品和设备

1、创建产品
图片.png

2、编辑产品功能,添加温度属性
图片.png

3、添加设备
图片.png
图片.png

设备上报属性

import com.alibaba.taro.AliyunIoTSignUtil;
import com.google.common.util.concurrent.ThreadFactoryBuilder;
import org.eclipse.paho.client.mqttv3.*;
import org.eclipse.paho.client.mqttv3.persist.MemoryPersistence;
import java.util.HashMap;
import java.util.Map;
import java.util.Random;
import java.util.concurrent.ScheduledExecutorService;
import java.util.concurrent.ScheduledThreadPoolExecutor;
import java.util.concurrent.TimeUnit;

public class IoTDemoPubSubDemoForQuickStartProduct {
    // 设备三元组信息
    public static String productKey = "a1L********";
    public static String deviceName = "Device1";
    public static String deviceSecret = "c96a082fcfa6e817********";
    public static String regionId = "cn-shanghai";

    // 物模型-属性上报topic
    private static String pubTopic = "/sys/" + productKey + "/" + deviceName + "/thing/event/property/post";
    // 自定义topic,在产品Topic列表位置定义
    private static String subTopic = "/sys/" + productKey + "/" + deviceName + "/thing/event/property/post_reply";

    private static MqttClient mqttClient;

    public static void main(String [] args){

        initAliyunIoTClient();
        ScheduledExecutorService scheduledThreadPool = new ScheduledThreadPoolExecutor(1,
                new ThreadFactoryBuilder().setNameFormat("thread-runner-%d").build());

        scheduledThreadPool.scheduleAtFixedRate(()->postDeviceProperties(), 2,2, TimeUnit.SECONDS);

        try {
            mqttClient.subscribe(subTopic); // 订阅Topic
        } catch (MqttException e) {
            System.out.println("error:" + e.getMessage());
            e.printStackTrace();
        }

        // 设置订阅监听
        mqttClient.setCallback(new MqttCallback() {
            @Override
            public void connectionLost(Throwable throwable) {
                System.out.println("connection Lost");
            }

            @Override
            public void messageArrived(String s, MqttMessage mqttMessage) throws Exception {
                System.out.println("Sub message");
                System.out.println("Topic : " + s);
                System.out.println(new String(mqttMessage.getPayload())); //打印输出消息payLoad
            }

            @Override
            public void deliveryComplete(IMqttDeliveryToken iMqttDeliveryToken) {
            }
        });

    }

    /**
     * 初始化 Client 对象
     */
    private static void initAliyunIoTClient() {

        try {
            // 构造连接需要的参数
            String clientId = "java" + System.currentTimeMillis();
            Map<String, String> params = new HashMap<>(16);
            params.put("productKey", productKey);
            params.put("deviceName", deviceName);
            params.put("clientId", clientId);
            String timestamp = String.valueOf(System.currentTimeMillis());
            params.put("timestamp", timestamp);
            // cn-shanghai
            String targetServer = "tcp://" + productKey + ".iot-as-mqtt."+regionId+".aliyuncs.com:1883";

            String mqttclientId = clientId + "|securemode=3,signmethod=hmacsha1,timestamp=" + timestamp + "|";
            String mqttUsername = deviceName + "&" + productKey;
            String mqttPassword = AliyunIoTSignUtil.sign(params, deviceSecret, "hmacsha1");

            connectMqtt(targetServer, mqttclientId, mqttUsername, mqttPassword);

        } catch (Exception e) {
            System.out.println("initAliyunIoTClient error " + e.getMessage());
        }
    }

    public static void connectMqtt(String url, String clientId, String mqttUsername, String mqttPassword) throws Exception {

        MemoryPersistence persistence = new MemoryPersistence();
        mqttClient = new MqttClient(url, clientId, persistence);
        MqttConnectOptions connOpts = new MqttConnectOptions();
        // MQTT 3.1.1
        connOpts.setMqttVersion(4);
        connOpts.setAutomaticReconnect(false);
        connOpts.setConnectionTimeout(10);
//        connOpts.setCleanSession(true);
        connOpts.setCleanSession(false);

        connOpts.setUserName(mqttUsername);
        connOpts.setPassword(mqttPassword.toCharArray());
        connOpts.setKeepAliveInterval(60);

        mqttClient.connect(connOpts);
    }

    /**
     * 汇报属性
     */
    private static void postDeviceProperties() {

        try {
            //上报数据
            //高级版 物模型-属性上报payload
            System.out.println("上报属性值");
//            String payloadJson = "{\"params\":{\"Temperature\":12}}";

            String payloadJson = "{\"params\":{\"Temperature\":"+RandomNextIntDemo2()+"}}";
            MqttMessage message = new MqttMessage(payloadJson.getBytes("utf-8"));
            message.setQos(1);
            mqttClient.publish(pubTopic, message);
        } catch (Exception e) {
            System.out.println(e.getMessage());
        }
    }

    /**
     * 生成[0,100)区间的整数
     */
    public static Integer RandomNextIntDemo2(){
        Random r = new Random();
        int n2 = r.nextInt(100);
        System.out.println("n2:"+n2);
        return n2;
    }
}

参考:

基于开源JAVA MQTT Client连接阿里云IoT

数据分析开发API接口

1、配置数据源
图片.png
图片.png

2、创建SQL分析
图片.png

图片.png

调整SQL语句,规范化时间显示格式及排序

select `t0`.`Temperature` as t0_Temperature, `t0`.`$iot_id` as iot_id, `t0`.`$product_key` as product_key, from_unixtime(`t0`.`$event_time`/1000, '%Y-%m-%d %H:%i:%S')  as t0_event_time from `${pk.替换为您自己的产品ProductKey}` t0 order by 't0'.'$event_time' desc

3、生成API
图片.png

图片.png

图片.png

DataV组件配置

1、创建Web可视化项目
图片.png

2、添加DataV组件
图片.png

3、编辑大屏
图片.png

图片.png

图片.png

图片.png

图片.png

图片.png

图片.png

4、发布后预览效果

图片.png

5、域名绑定
图片.png

参考链接

大屏组件概述
案例

相关实践学习
基于Hologres轻松玩转一站式实时仓库
本场景介绍如何利用阿里云MaxCompute、实时计算Flink和交互式分析服务Hologres开发离线、实时数据融合分析的数据大屏应用。
阿里云实时数仓实战 - 项目介绍及架构设计
课程简介 1)学习搭建一个数据仓库的过程,理解数据在整个数仓架构的从采集、存储、计算、输出、展示的整个业务流程。 2)整个数仓体系完全搭建在阿里云架构上,理解并学会运用各个服务组件,了解各个组件之间如何配合联动。 3&nbsp;)前置知识要求 &nbsp; 课程大纲 第一章&nbsp;了解数据仓库概念 初步了解数据仓库是干什么的 第二章&nbsp;按照企业开发的标准去搭建一个数据仓库 数据仓库的需求是什么 架构 怎么选型怎么购买服务器 第三章&nbsp;数据生成模块 用户形成数据的一个准备 按照企业的标准,准备了十一张用户行为表 方便使用 第四章&nbsp;采集模块的搭建 购买阿里云服务器 安装 JDK 安装 Flume 第五章&nbsp;用户行为数据仓库 严格按照企业的标准开发 第六章&nbsp;搭建业务数仓理论基础和对表的分类同步 第七章&nbsp;业务数仓的搭建&nbsp; 业务行为数仓效果图&nbsp;&nbsp;
相关文章
|
4月前
|
数据可视化 JavaScript 开发工具
vue2+datav可视化数据大屏(3)
接上一节所说,当我们将接口封装完了后,我们需要给大屏进行内容填充啦
126 0
|
4月前
|
数据可视化 JavaScript API
vue2+datav可视化数据大屏(2)
接上一节所说 我们已经讲骨架搭好 这节我们讲述的如何在vue2中使用mock数据和封装axios
|
4月前
|
数据可视化 JavaScript 前端开发
vue2+datav可视化数据大屏(1)
最近打算出一个前端可视化数据大屏的系列专栏,这次将很全面的教大家设计可视化大屏,从开始到打包结束,其中,包括如何设计框架,如何封装axios,等等,本次使用的数据均为mock数据。与正常使用一致。本文会从开始的创建vu23项目到最后的项目打包,本篇共计3节。
294 1
|
4月前
|
数据可视化 前端开发 JavaScript
react+datav+echarts实现可视化数据大屏
最近有点闲,就学习了下react,没想到就把react学完了,觉得还不错,就打算出一把react+datav的简易版可视化数据大屏供大家做个参考
175 2
react+datav+echarts实现可视化数据大屏
|
9月前
|
数据可视化 容器
DataV构建大屏(全屏)数据展示页面
DataV构建大屏(全屏)数据展示页面
552 0
|
12月前
|
资源调度 数据可视化 JavaScript
vue3+DataV+Echarts搭建数据大屏模板(建议收藏)
vue3+DataV+Echarts搭建数据大屏模板(建议收藏)
823 0
vue3+DataV+Echarts搭建数据大屏模板(建议收藏)
|
传感器 存储 运维
IoT Studio场景最佳实践
本次物联网场景最佳实践我们用六合一传感器(温度、湿度、二氧化碳、PM2.5、PM10、甲醛)实现家庭环境数据实时采集,通过家中Wi-Fi上报到阿里云IoT物联网平台,借助IoT Studio低代码工具搭建可视化大屏,实时监控家中环境指标变化。
601 0
IoT Studio场景最佳实践
|
传感器 监控 数据可视化
IoT Studio 物联网可视化应用搭建开发实践
阿里云 IoT Studio 物联网可视化应用搭建开发实践
22636 4
IoT Studio 物联网可视化应用搭建开发实践
|
存储 数据采集 运维
IoT Studio 产品介绍(一)|学习笔记
快速学习 IoT Studio 产品介绍
371 0
IoT Studio 产品介绍(一)|学习笔记
|
运维 监控 数据可视化
IoT Studio 产品介绍|学习笔记(二)
快速学习 IoT Studio 产品介绍
190 0
IoT Studio 产品介绍|学习笔记(二)