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

Question

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

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

非常感谢。

Answer 1

您需要创建一个自定义小部件才能执行此操作。您只需保存简单的卡片小部件即可创建它的可编辑副本。

在这个新的小部件中，您可以像这样更改小部件的背景颜色:

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

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

每当数据更新时，都会调用小部件回调onDataUpdated()，您可以在其中根据您的值实现颜色更改。这是简单卡片小部件的实现。我添加了背景颜色的更新(值 < 0 为红色，值 > 0 为绿色)。

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();
                }
            }
        }
    }    
    
};