Javascript ThingsBoard动态更改简单卡片小部件元素的背景色

在我的ThingsBoard仪表板中，我有一个简单的卡片小部件元素。我想根据发送的值的大小动态更改此元素的背景色

有人知道如何实现这种行为吗

---

非常感谢。

您需要创建一个自定义小部件来完成此操作。您只需保存简单卡片小部件即可创建其可编辑副本

在该新小部件中，您可以更改小部件的背景颜色，如下所示：

self.ctx.$container[0].style.backgroundColor = "#ff0000";

默认情况下，小部件元素具有内容容器的填充。您可以在小部件设置中将该填充设置为零，以使容器填充整个小部件区域

每当数据更新时，就会调用小部件回调

onDataUpdated（）

，您可以在其中根据自己的值实现颜色更改。下面是它的简单卡片小部件的实现。我添加了背景色的更新（红色表示值<0，灰色表示值>0）

self.onDataUpdated=function（）{
函数isNumber（n）{
return！isNaN（parseFloat（n））和&isFinite（n）；
}
if（self.ctx.valueCell&&self.ctx.data.length>0）{
var cellData=self.ctx.data[0]；
如果（cellData.data.length>0）{
var tvPair=cellData.data[cellData.data.length-
1];
var值=tvPair[1]；
var TXT值；
if（isNumber（值））{
var小数=self.ctx.decimals；
var单位=self.ctx.units；
if（self.ctx.datasources.length>0&&self.ctx.datasources[0].dataKeys.length>0）{
dataKey=self.ctx.datasources[0]。dataKey[0]；
if（dataKey.decimals | | dataKey.decimals==0）{
小数=dataKey.decimals；
}
if（数据键单位）{
单位=dataKey.units；
}
}
//将背景颜色更改为红色（v=0）
self.ctx.$container[0].style.backgroundColor=value>0？#00ff00:“#ff0000”；
txtValue=self.ctx.utils.formatValue（值，小数，单位，真）；
}否则{
txtValue=值；
}
self.ctx.valueCell.html（txtValue）；
var目标宽度；
var minDelta；
如果（self.ctx.labelPosition==='left'）{
targetWidth=self.ctx.datasourceContainer.width（）-self.ctx.labelCell.width（）；
minDelta=self.ctx.width/16+self.ctx.padding；
}否则{
targetWidth=self.ctx.datasourceContainer.width（）；
minDelta=self.ctx.padding；
}
var delta=targetWidth-self.ctx.valueCell.textWidth（）；
var fontSize=self.ctx.valueFontSize；
如果（targetWidth>minDelta）{
而（增量6）{
字体大小--；
css（'font-size'，fontSize+'px'）；
delta=targetWidth-self.ctx.valueCell.textWidth（）；
}
}
}
}    
};

我不知道将命令“self.ctx.$container[0].style.backgroundColor=“#ff0000”；“我的简单卡只有“使用数据后处理功能”编辑器。在“设置”或“高级”选项卡中，没有任何编辑器可以添加代码，在“使用数据后处理功能”编辑器中，我得到错误“self.ctx未定义”，正如我所说：您需要通过编辑widgets库中的卡片小部件并使用新名称保存它来为此创建自定义小部件。您可能需要先创建一个小部件包。查看widgets开发指南：啊，现在我明白了。我不得不去左边菜单中的小部件库。在那里，我可以创建一个新的小部件包，然后导出和导入卡片包并编辑简单的卡片小部件。非常感谢你。

self.onDataUpdated = function() {
    
    function isNumber(n) {
        return !isNaN(parseFloat(n)) && isFinite(n);
    }

    if (self.ctx.valueCell && self.ctx.data.length > 0) {
        var cellData = self.ctx.data[0];
        if (cellData.data.length > 0) {
            var tvPair = cellData.data[cellData.data.length -
                1];
            var value = tvPair[1];
            var txtValue;
            if (isNumber(value)) {
                var decimals = self.ctx.decimals;
                var units = self.ctx.units;
                if (self.ctx.datasources.length > 0 && self.ctx.datasources[0].dataKeys.length > 0) {
                    dataKey = self.ctx.datasources[0].dataKeys[0];
                    if (dataKey.decimals || dataKey.decimals === 0) {
                        decimals = dataKey.decimals;
                    }
                    if (dataKey.units) {
                        units = dataKey.units;
                    }
                }

                // Change background color to red (v<0) or green (v>=0)
                self.ctx.$container[0].style.backgroundColor = value > 0 ? "#00ff00" : "#ff0000";
                
                txtValue = self.ctx.utils.formatValue(value, decimals, units, true);
            } else {
                txtValue = value;
            }
            self.ctx.valueCell.html(txtValue);
            var targetWidth;
            var minDelta;
            if (self.ctx.labelPosition === 'left') {
                targetWidth = self.ctx.datasourceContainer.width() - self.ctx.labelCell.width();
                minDelta = self.ctx.width/16 + self.ctx.padding;
            } else {
                targetWidth = self.ctx.datasourceContainer.width();
                minDelta = self.ctx.padding;
            }
            var delta = targetWidth - self.ctx.valueCell.textWidth();
            var fontSize = self.ctx.valueFontSize;
            if (targetWidth > minDelta) {
                while (delta < minDelta && fontSize > 6) {
                    fontSize--;
                    self.ctx.valueCell.css('font-size', fontSize+'px');
                    delta = targetWidth - self.ctx.valueCell.textWidth();
                }
            }
        }
    }    
    
};