轻松可视化实现设备监控大屏效果

简介: 前言 前期团队一直在搭建与云端服务器对接的事情,近期终于落地,数据采集中心实现了服务端与可视化编辑器的融合,整个案例中脚本就两百行左右,基本通过可视化平台配置完成,体现了,我们平台的高效性。今天通过本案例讲解下服务端接口搭建、服务端与可视化编辑器是如何配合使用的 看板效果图 可视化端实现的交互效果.

前言

前期团队一直在搭建与云端服务器对接的事情,近期终于落地,数据采集中心实现了服务端与可视化编辑器的融合,整个案例中脚本就两百行左右,基本通过可视化平台配置完成,体现了,我们平台的高效性。今天通过本案例讲解下服务端接口搭建、服务端与可视化编辑器是如何配合使用的

看板效果图

_
可视化端实现的交互效果分别有三点:1、报警滚动展示,2、表格翻页显示,3、设备故障三角形动画

设备数据上报阿里云


如基于海创边缘计算网关如上图设置好,设备参数就会以队列的形式上报阿里云平台

服务端接口搭建

前期准备,服务端上传设备到阿里云端,完成后,我们打开上图阿里云平台具体要对接的产品数据,按下列骤订阅消息


按以上设置保存后消息订阅完成
数据上报后,如何把数据从阿里云拉取下来呢,请看下图


通过上图对接好阿里云上的信息后,数据就接入到我们的平台,在函数体内根据自己实际业务需求做相应处理后,就可以输出到可视化平台了,以上数据接口已全部搭建完成
注:图中的name即我们要绑定的字段名,value为绑定位置接收到的数据

数据集准备


新建数据集,对接好相应字段,确定后重新打开,点击数据测试,就可以看到接口过来的数据

可视化端操作步骤

以下介绍两种处理方式
方式一,直接字段绑定

如上图步骤,直接绑定即可

方式二,函数处理后输出,按需处理

根据上图步骤,接口数据在参数data中,在函数体内,可以根据自己需求处理完后push到容器中
注:对接数据不会自动累加,如果数据逐条过来,但是所有数据都要展示,就需要自己存在容器中,按需取容器数据

目录
相关文章
|
9天前
|
监控 供应链 数据可视化
物联网工厂可视化监控平台:为智能制造打造的可视化大屏
物联网(IoT)已成为数字化转型的核心力量,通过连接设备和传感器实现数据实时收集与分析。本文介绍物联网设备可视化监控平台,解决行业痛点如多系统统筹难、库存管理不精准、巡检工作繁杂等问题。应用场景包括数据分析与决策支持、园区监控、车间概览及设备管理,利用数字孪生技术实现全方位监控和智能决策,优化资源配置,提高运营效率。获取路径:素材广场【尊享版】。
|
2月前
|
数据采集 传感器 监控
MES系统的实时数据采集和监控功能具体如何实现?
MES系统(制造执行系统)通过与PLC、SCADA系统集成,加装传感器和使用物联网技术,结合条码与RFID技术、图像识别、云计算等手段,实现生产过程的全面实时数据采集和监控,确保数据的实时性和准确性,支持生产优化和决策。
|
3月前
|
数据可视化 搜索推荐 vr&ar
全景可视化特点+可视化功能实现
全景可视化特点+可视化功能实现
46 2
|
8月前
|
数据可视化 Java 数据库
数据接口工程对接BI可视化大屏(三)模拟数据
数据接口工程对接BI可视化大屏(三)模拟数据
88 0
|
数据可视化 前端开发
前端可视化数据大屏(2)
前端可视化数据大屏(2)
524 0
|
数据可视化 JavaScript 前端开发
前端可视化数据大屏(1)
前端可视化数据大屏(1)
650 0
|
监控 数据可视化
kuma可视化监控
kuma可视化监控
12889 4
|
编解码 前端开发 JavaScript
大屏开发你需要知道哪些
大屏是什么呢?再我前几年刚接触这个词得时候很新颖,全名叫态势感知大屏,大屏得特点是炫酷、好看,给用户满满得科技感。 听一位前辈说当年再招标会上,再都用exel、word做界面图表文档得时候,有一家公司把可视化态势感知大屏展示出来了,直接秒杀其他厂家。 那么当我们开发一款大屏点的时候需要注意什么呢?
192 0
|
监控 数据可视化 定位技术
Sentry 监控 - Dashboards 数据可视化大屏
Sentry 监控 - Dashboards 数据可视化大屏
797 0
Sentry 监控 - Dashboards 数据可视化大屏
|
移动开发 监控 数据可视化
从0到1开发可视化数据大屏(上)
前言:大数据时代,以大屏为载体的数据可视化需求日渐增多,数据大屏成为越来越多企业绩效展示,报表展示,业务监控等等的一种形式,大屏的上线带来的是便捷,无需编码,用户可以直接将所要呈现的组件拖拽到画布上,然后进行随意配置和布局,所见及所得。前段时间我们上线了内部的自己的可视化数据大屏beta版本
583 0
从0到1开发可视化数据大屏(上)

热门文章

最新文章