部件 - HTML Container

正文与配图来自原稿。适合在容器内写 HTML，并用 ctx API 取数。

1、介绍

2、简单使用

2.1、HTTP 访问数据

HTML：

<div>
  温度：
  <span id="temp">--</span>
</div>

JS（deviceId 换成实际 ID）：

var deviceId = "YOUR-DEVICE-UUID";
ctx.http.get(
  `/api/plugins/telemetry/DEVICE/${deviceId}/values/timeseries?keys=temperature`
).subscribe(
  response => {
    var temperature = response.temperature[0].value;
    container.querySelector("#temp").innerHTML = temperature + " ℃";
  },
  error => console.log(error)
);

2.2、实时监听数据

<div style="font-size:30px">
  温度: <span id="temperature">--</span> ℃
</div>

const aliases = ctx.aliasController.getEntityAliases();
const aliasId = Object.keys(aliases)[0];
const datasource = {
  type: 'entity',
  entityAliasId: aliasId,
  dataKeys: [{ type: 'timeseries', name: 'temperature', settings: {} }],
};
const subscriptionOptions = {
  type: 'latest',
  datasources: [datasource],
  callbacks: {
    onDataUpdated: (subscription) => {
      const data = subscription.data;
      if (data.length > 0) {
        let temperature = data[0].data[0][1];
        container.querySelector("#temperature").innerHTML = temperature;
      }
    },
    onDataUpdateError: (subscription, e) => console.error(e),
  },
};
ctx.subscriptionApi.createSubscription(subscriptionOptions, true).subscribe((subscription) => {
  this.subscriptionId = subscription.id;
});

3、小结

一次性查询用 ctx.http；看板实时用 subscriptionApi。与 HTML Widgets 选型互补。