Node-RED系列（十五）：工业仪表盘开发

Node-RED系列文章目前已经写了14篇，介绍了Node-RED的安装以及默认安装的一些基本节点的使用，作为物联网的一个可视化拖动的流程,Node-RED的确实很容易上手。还没开始学习的同学可以先看下我以前的文章。

物联网平台Node-RED系列（一）：Node-RED的介绍与安装

物联网平台Node-RED系列（二）：Node-RED的面板的操作

物联网平台Node-RED系列（三）：Node-RED公共节点的使用

物联网平台Node-RED系列（四）：Node-RED函数节点的使用

物联网平台Node-RED系列（五）：Node-RED序列节点的使用

物联网平台Node-RED系列（六）：Node-RED解析节点的使用

物联网平台Node-RED系列（七）：Node-RED存储节点的使用

物联网平台Node-RED系列（八）：Node-RED网络节点的使用

Node-RED系列（九）：Node-RED面板dashboard节点的使用

Node-RED系列（十）：Node-RED面板dashboard节点的配置

Node-RED系列（十一）：Node-RED面板chart节点的使用案例

Node-RED系列（十二）：定制化节点教程

Node-RED系列（十三）：三种方式安装启动安装Node-Red

Node-RED系列（十四）：定制Node-RED的UI

开发背景

最近有读者私信我，想要使用Node-RED配置一个工业使用仪表盘。 大致的场景是这样的：开发一个面板，用于显示工厂的能耗，能耗的类型包括以下几个方面

天然气 纯水 冷水 工业用水 电 。。。

需要使用饼形图展示各个能耗的占比。使用仪表盘显示能耗的百分比 使用折线图显示能耗的趋势。

开发要使用的节点很明确，需要使用dashboard模块的页面。我的Node-RED已经安装了。另外这个需求需要每隔一段时间就要刷新一下数据。我这里使用的是定时器。当然如果使用websockt就更好了。

最终的效果大致是这样子的

节点使用与关系配置图

使用的节点

主要使用的节点如下

function 用于处理数据，编写测试随机数据

tab, ui_gauge, ui_group, ui_tab 用于布局排版

inject 定时循环向流中注入数据

ui_chart 图表数据 需要多次使用的重要节点

ui_template 编写自定义模板

配置方案

能耗仪表盘

在需求中有显示能耗使用的占总数的多少 这部分使用的是gauge节点。只需要将payload 赋值一个数字100以内的数字即可。

节点配置图如下:

function节点的代码如下

msg.payload = Math.round(Math.random()*100) return msg;

一个gauge节点的配置

官方关于该节点的解释是这样的:

将仪表类型小部件添加到用户界面。 这个消息有效负载搜索数值，并根据定义的值格式格式化，然后可以使用角度过滤器格式化。 例如：{{value|number：1}}%将值舍入到小数点后一位，并附加一个%符号。 可以指定3个扇区中每个扇区的颜色，仪表将在它们之间混合。颜色应以十六进制（#rrggbb）格式指定。 如果为扇区指定数字，则每个扇区的颜色都会改变。如果未指定，则在整个范围内混合颜色。

仪表有几种模式。常规仪表，油炸圈饼，罗盘和波浪。 标签也可以由消息属性设置，例如，将字段设置为属性的名称{{邮件主题}}.

意思就是这个仪表有几种类型可以选择。 默认使用payload的值来显示， 这里有一个简单的格式化，就是使用{{value|number：1}}% 比如你想价格单位，%, $, # 使用起来很简单。 类型有这几种

使用的过滤器是 Angular filters.

能耗总量扇形图

这部分是一个扇形图。 主要是使用 function来生成随机数据，然后用chart节点的 pei图表类型来显示数据。

function的代码如下

var m = {}; m.labels = [“电”, “纯水”, “压缩空气”, “天然气”]; m.data = [[300, 500, 100,600]]; m.series = [“Sales”]; return {payload:[m],topic:msg.topic};

在一个扇形图中有多个扇形，每一个扇形在数据层上对应的是 data。data需要对应labels，label就是要显示的辅助信息。

最终效果图

这里为了达到一个比较好的性能，减轻服务器压力。所以每次刷新间隔会长一些。

写在最后

如果需要做一个比较复杂的页面可以尝试使用ui-template 节点，可以发挥angular 和material框架的优势。

有关图表更多的文档可以查看这个链接。dashboard的chart节点的使用。 https://github.com/node-red/node-red-dashboard/blob/master/Charts.md

此外如果你要调整样式，或者执行js 可以写行内css 或者行内的js 如

<button onclick=javascript:window.open(“https://www.baidu.com/”, “_blank”, “height=300, width=300″)>111111111</button> <div ng-bind-html=”msg.payload” style=”width:540px;height:40px;background:#009999;color: #ffffff;font-size: 18px;font-family: 微软雅黑;text-indent:2em;line-height:40px”> </div>

完整的flow代码，由于太长，这里就不发了，想要的小伙伴字在下方留言。