如何在Thingsboard Professional告警卡片中添加JavaScript条件设置背景色

操作步骤： #

1. 打开告警卡片的编辑界面
   找到仪表板里的目标告警卡片，点击右上角的铅笔图标进入配置页面。

2. 找到自定义JS的配置入口
   切换到样式标签页，拉到页面底部，找到「自定义JavaScript」输入框（专业版专属功能，社区版无此入口）。

3. 编写温度判断的JS逻辑
   输入以下代码，根据你的实际阈值和字段名调整：

// 获取当前告警的温度值，字段名根据你的告警配置修改
var temperature = alarm.details.temperature;
// 拿到卡片的DOM元素
var card = element;
// 加过渡动画让颜色切换更平滑
card.style.transition = "background-color 0.3s";
// 根据温度设置背景色
if (temperature > 30) { // 替换成你的告警触发温度阈值
    card.style.backgroundColor = "#ff4444";
    card.style.color = "#fff"; // 文字变白，避免红色背景下看不清
} else {
    card.style.backgroundColor = "#00C851";
    card.style.color = "#000";
}

注意：如果温度存储在实体属性而非告警详情中，把alarm.details.temperature换成entity.attributes.temperature。

4. 保存后查看效果
   点击保存按钮返回仪表板，当温度超过阈值触发告警时，卡片背景会自动变红；温度恢复正常后，背景切换回绿色。

针对告警列表卡片的补充代码： #

如果是列表形式的告警卡片（而非单张卡片），需要遍历每个告警项，用下面的逻辑：

var alarmItems = element.querySelectorAll('.tb-alarm-list-item');
alarmItems.forEach(function(item) {
    // 根据实际数据结构获取温度值
    var temp = item.dataset.alarmDetails.temperature;
    item.style.transition = "background-color 0.3s";
    if (temp > 30) {
        item.style.backgroundColor = "#ff4444";
        item.style.color = "#fff";
    } else {
        item.style.backgroundColor = "#00C851";
        item.style.color = "#000";
    }
});

内容的提问来源于stack exchange，提问作者Nitin Pandey