散修程序员

Things board仪表盘

 2024-06-22    0 条评论    13359 浏览

thingsboard

本博客内容，请登录后查看

仪表盘功能

Things board具有功能强大的仪表盘功能，支持各种设备遥测数据动态展示

  • 设备遥测数据列表展示
  • 多设备遥测数据列表展示
  • 多设备的属性列表展示；

设备值动态展示

image-20240531141541403

设备之列表展示

可以直接在设备上的遥测数据界面，选中所有遥测设备属性值，添加列展示到仪表盘

image-20240531163102318

image-20240531163012265

列表属性-单元格样式函数

修改返回单元格内数字的样式函数，例如

var temperature = value;
var color = 'black';
if (temperature) {
    if (temperature > 25) {
      color = 'red';
    } else {
      color = 'green';
    }
}
return {
  fontWeight: 'bold',
  color: color
};

image-20240531163827117

image-20240531163905047

image-20240531163918796

列表属性-单元格内容函数

修改单元格内HTML的内容函数

列数据回调函数设置样式，代码如下

var temperature = value;
var color = '#fff';
if (temperature) {
  if (temperature > 25) {
    color = 'red';
  } else {
    color = 'green';
  }
}
return '<div style="border: 2px solid #0072ff; ' +
  'border-radius: 10px; padding: 5px; ' +
  'color: #fff; ' +
  'background-color: '+ color +'; ' +
  'text-align: center;">' + temperature + '</div>';

image-20240531163327665

image-20240531164009465

image-20240531164032000

数值转换展示

var color = '#fff';
var status_value= '静止'
if (value == "0") {
    color = 'red';
} else if (value == "1") {
    color = 'grey';
    status_value = '怠速'
} else if (value == "2") {
    status_value = '运行'
    color = 'green';
}

return '<div style="border: 2px solid #0072ff; ' +
    'border-radius: 10px; padding: 5px; ' +
    'color: #fff; ' +
    'background-color: ' + color + '; ' +
    'text-align: center;">' + status_value + '</div>';

数值小数点展示

某些值如果太小，页面加载会自动展示为科学计数法的方式。

比如0.0008会展示成 8.0E-4

在对应属性上，选择展示几位小数点，就可以正常显示

Base64格式图片展示

直接传输二进制数据的时候，网络中间的有些路由会把ascii码中的不可见字符删了，导致数据不一致。

Base64 是一种基于64个 ASCII 字符来表示二进制数据的表示方法。

遥测数据一般走json结构的字符串，而文件或者图片的二进制字节转字符串，建议使用base64；

二进制字节转字符串无法保证都落在ASCII字节码范围，使用base64能够保证字符都落到ASCII码之间。

一般遥测数据上传的图片，都是base64位数据。

html展示base64位编码图片

常规html环境支持通过标签声明来直接转化base64位图片编码进行展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Base64图片展示</title>
</head>
<body>
    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA...（这里是base64编码的字符串）" alt="示例图片">
</body>
</html>

样例如下：

<img src="data:image/jpg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/4gJASUNDX1BST0ZJTEUAAQEAAAIwQURCRQIQAABtbnRyUkdCIFhZWiAHzwAGAAMAAAAAAABhY3NwQVBQTAAAAABub25lAAAAAAAAAAAAAAAAAAAAAAAA9tYAAQAAAADTLUFEQkUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAApjcHJ0AAAA/AAAADJkZXNjAAABMAAAAGt3dHB0AAABnAAAABRia3B0AAABsAAAABRyVFJDAAABxAAAAA5nVFJDAAAB1AAAAA5iVFJDAAAB5AAAAA5yWFlaAAAB9AAAABRnWFlaAAACCAAAABRiWFlaAAACHAAAABR0ZXh0AAAAAENvcHlyaWdodCAxOTk5IEFkb2JlIFN5c3RlbXMgSW5jb3Jwb3JhdGVkAAAAZGVzYwAAAAAAAAARQWRvYmUgUkdCICgxOTk4KQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAWFlaIAAAAAAAAPNRAAEAAAABFsxYWVogAAAAAAAAAAAAAAAAAAAAAGN1cnYAAAAAAAAAAQIzAABjdXJ2AAAAAAAAAAECMwAAY3VydgAAAAAAAAABAjMAAFhZWiAAAAAAAACcGAAAT6UAAAT8WFlaIAAAAAAAADSNAACgLAAAD5VYWVogAAAAAAAAJjEAABAvAAC+nP/bAEMAAwICAwICAwMDAwQDAwQFCAUFBAQFCgcHBggMCgwMCwoLCw0OEhANDhEOCwsQFhARExQVFRUMDxcYFhQYEhQVFP/bAEMBAwQEBQQFCQUFCRQNCw0UFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFP/AABEIAQoBkAMBEQACEQEDEQH/xAAdAAABBAMBAQAAAAAAAAAAAAAHAgQFBgEDCAAJ/8QARxAAAQMDAwIEAwYEBAQEBAcAAQACAwQFEQYSIQcxE0FRYQgicRQjMoGRoRVCUrEkYpLBCTNy0RaCsvAmNENTRGNzdKLh8f/EAB0BAAIDAQEBAQEAAAAAAAAAAAQFAgMGAQAHCAn/xAA6EQACAgIBAwICCQQCAQMFAQABAgADBBEhBRIxQVETIgYyYXGBkaGx0RQjwfBC4RUHM/FDUnKi0rL/2gAMAwEAAhEDEQA/APlUvT08vT08vT08vT02McUxpsY+ZAibGlM0fchFK/cjPZwvd2p3U8HrvxtHme1NjSmNZ9ZAxxCMkZWiw12QZS0nbLkPBHfK3WMdARXk+JfrNcjGGjcVsMW3QAmSyaN8y7W+/PijAbIWg+ifKysOYgNb1n5DqO5L09/eQnj1V3yiUFbG8mMJ7ptyS791wuBJpRuRNXe85+bP5oWzLCxhXjSKnuhkyM8JbZmd3G4clGpG1FeBkZ4S6zIHvDUqkLcLpHG1xLxlJ78lQPMZ1UMTwJVa2uNRISTx5LKZOWPQx9VUEGoxc/P0WbttLQkCaXFI7W3LREZQpMlMKpjPTGMn0VYUsZLxLt0j6eT9SNZUtsYwuo4y2atk3BgjhDgHEuPbv38hk4OFreg9LTPyO2zlF5b7fYfj+24vzLzSny/WPA/n8J9KX6kt+m7bbYtNSss9jhsD5KWmp2NGBM+GN2duPma6Egk+a+lVY3xiTcNsGAPsO3ZGvYaPAiw2hACh0Nb/AD1OaerWo3XKaenjqJGy0s8lL4RBDTF4j5GnGcdnR/on7cIQvn1/KZnLsDN2k+OPw3/8QTCnyBuHIAGMJb2bg/f7R4ylDsnb5IgVg8wc2ann0+09l4pqeD7nhGHMOMZXu3Ynt6PMbzwAM7DKodNCXK2zIuscWtAHkl1x0OIdWNmRM0YlqI2n/qKUsoZwIwU9qkiTEbwGgBN1OhoRcRsyKvUhhiA/md5f2SzMYqNe8Oxl7jIzwXsa0AZeeXHzSzsIHHmH9wJ58SLv8P3ceflAPYoHLrDLpodiNyZGQPELmuj7juqK1VR8kOYdw00nKJpqQHnBb7I6tS5iq0ivia7wwQRh3GQVy4BOZZjEsdSsysNRKAOecrGZVJzsgIPAOzHSnsG5IwWqaUgbC0HzwtEmKAABA3vVfWOn2c08Zc/8WMhE/wBOK/IlAye86EipWHPZLcmsseIepml7SEntqIEsBmiRhOVn8qlmHEtUzTtx3Sj4RH1pZuYVE7PL09MgHurVQ+RORRZwVcatAz24kZz7qte4Nr1nptBTNDrzIGZBRCvucmcqRaemMqknmemxpTKt/EgRHcLlsMJ/EHaTlocG59StrQ2gIryBuWahmwRyn9FkSWrJ+lrHNA5T+u2KXrBjp1yLW8lXteFHMoFGzIytu5OQHJRkZ2uAYdXjyHmuJcTykNmUxMYrSBGFVeRCMF3JQzZR1Ckxi0i6m9OeDt4QlmQde