在Thingsboard中，我们可以使用单个数字仪表小部件来显示来自4个设备的数据吗？

Question

] 3

我已经在设备类型上创建了一个实体别名（假设有4个设备的光传感器类型），是否可以复制Thingsboard的Digital Gauge小部件并制作一个新的小部件并对其进行修改，使其能够显示数据从4个设备或n个设备（动态创建量规，取决于数据源数组的长度）。

Answer 1

是的，我们可以：）

对于仪表板小部件，Thingsboard使用一个名为TbCanvasDigitalGauge的帮助对象。 这东西在现有的画布元素上绘制了widgetContext.data[0]的量规。

基于一个现有的量规窗口小部件和TbCanvasDigitalGauge的代码，我发现要为每个量规设置一个伪造的上下文，以反映每个已解析的实体。因此，每个已解析的数据 每个量具都将实体映射到fakeCtx.data[0]。

这是我的多仪表小部件的javascript部分：

self.createGauge = function(data, idx) {
    let elementId, canvas, fakeCtx;

    elementId = ['gauge', self.ctx.$scope.$id, idx].join('_');

    // Canvas for the gauge.
    canvas    = document.createElement('CANVAS');
    canvas.id = elementId;
    self.ctx.$container.append(canvas);

    // Fake context for the gauge helper object.
    fakeCtx = {
        $container: self.ctx.$container,
          settings: self.ctx.settings,
              data: [data],
          decimals: self.ctx.decimals,
             units: self.ctx.units,
          isMobile: self.ctx.isMobile,
            $scope: self.ctx.$scope,
             width: self.ctx.width,
            height: self.ctx.height
    };

    return new TbCanvasDigitalGauge(fakeCtx, elementId);
};

self.onInit = function() {
    // Create a gauge for each resolved entity.
    self.ctx.$scope.gauges = self.ctx.defaultSubscription.data.map(self.createGauge);
};

self.onDataUpdated = function() {
    self.ctx.$scope.gauges.forEach(gauge => gauge.update());
};

self.onResize = function() {
    self.ctx.$scope.gauges.forEach(gauge => gauge.resize());
};

self.getSettingsSchema = function() {
    return TbCanvasDigitalGauge.settingsSchema;
};

self.typeParameters = function() {
    return {
        maxDatasources: 1,
        maxDataKeys: 1
    };
};

self.onMobileModeChanged = function() {
    self.ctx.$scope.gauges.forEach(gauge => gauge.mobileModeChanged());
};

小部件的html是空的，因为脚本是动态创建画布元素的。