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

Question

] 3

我在设备类型上创建了一个实体别名(假设有 4 个光传感器类型的设备)，是否可以复制 Thingsboard 的数字仪表小部件并制作一个新的小部件并以可以显示数据的方式对其进行修改来自 4 个设备或 n 个设备(根据数据源数组的长度动态创建仪表)。

Answer 1

是的，我们可以:)

对于仪表小部件，thingsboard 使用名为 TbCanvasDigitalGauge 的辅助对象。这个东西为 widgetContext.data[0] 绘制一个仪表到现有的 Canvas 元素上。

基于现有的仪表小部件之一和 TbCanvasDigitalGauge 的代码，我想出了为每个仪表设置一个假上下文以反射(reflect)每个已解析的实体。因此，每个解决的数据每个仪表的实体都映射到 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 是空的，因为脚本动态创建 Canvas 元素。