嗨，作为Node-RED新手能折腾到查询设备状态数据这一步，已经超棒啦！我之前也做过类似的Homebridge设备运行时间可视化，刚好适配你现在的数据集，给你分享两个版本Dashboard的实用实现方法～

一、先搞定数据预处理（核心步骤！） #

不管用哪个版本的Dashboard，第一步都是把你的查询结果转换成图表组件能读懂的格式。你现在的数据集是每半小时的状态点（state=1开/0关），我们需要把它转成时间+状态/时间段的结构：

比如用function节点写一段简单的处理代码（假设你的msg.payload是查询返回的数组，每个元素包含time、device、state字段）：

// 把原始数据转成图表友好的格式
msg.payload = msg.payload.map(item => {
  return {
    time: new Date(item.time), // 把字符串时间转成Date对象，确保组件能识别
    device: item.device,
    status: item.state === 1 ? "开启" : "关闭", // 把0/1转成易读的文字
    value: item.state // 保留数值方便图表做数值映射
  };
});
return msg;

如果要做时间段合并（把连续的相同状态合并成一个时间段，比如从10:00到11:30都是开启状态），可以用这个进阶处理代码，适合做时间线图表：

const rawData = msg.payload;
const timelineData = [];
let currentDevice = null;
let currentStatus = null;
let startTime = null;

for (let i = 0; i < rawData.length; i++) {
  const item = rawData[i];
  // 遇到设备切换或状态切换，保存上一个时间段
  if (item.device !== currentDevice || item.state !== currentStatus) {
    if (startTime && currentDevice) {
      timelineData.push({
        start: startTime,
        end: item.time,
        title: currentStatus === 1 ? "设备开启" : "设备关闭",
        group: currentDevice // 用设备名分组，方便多设备对比
      });
    }
    currentDevice = item.device;
    currentStatus = item.state;
    startTime = item.time;
  }
  // 处理最后一条数据，自动补全半小时的时间段
  if (i === rawData.length - 1) {
    timelineData.push({
      start: startTime,
      end: new Date(new Date(item.time).getTime() + 30 * 60 * 1000),
      title: currentStatus === 1 ? "设备开启" : "设备关闭",
      group: currentDevice
    });
  }
}
msg.payload = timelineData;
return msg;

二、老版Node-RED Dashboard实现方法 #

老版Dashboard用ui_chart节点就能快速实现状态时间表：

1. 把预处理好的节点输出连到ui_chart节点
2. 配置ui_chart：
   • 图表类型选阶梯图（Step）：完美匹配设备开关的突变状态
   • X轴类型选「时间」，确保自动识别时间格式
   • Y轴可以设置标签为「设备状态」，把数值0/1对应成「关闭」/「开启」
   • 如果有多设备，在「系列」设置里选择用device字段分组，图表会自动用不同颜色区分

小技巧：如果想让状态更直观，可以把Y轴的数值替换成文字，不过需要在预处理时把value换成字符串，同时把图表类型改成「离散型」。

三、Dashboard 2.0实现方法（更推荐新手） #

新版Dashboard的组件更灵活，有专门的ui-timeline节点，天生适合展示设备开关时间段：

1. 用上面的「时间段合并」代码处理数据，把输出连到ui-timeline节点
2. 配置ui-timeline：
   • 数据映射：把start绑定到「开始时间」，end绑定到「结束时间」，title绑定到状态文字，group绑定到设备名
   • 样式设置：可以给不同状态设置不同颜色（比如开启用绿色，关闭用灰色），一眼就能区分
3. 如果你更倾向于用折线/阶梯图，新版的ui-chart节点支持更多自定义，同样选阶梯图类型，把time设为X轴，value设为Y轴，device设为系列分组即可

四、新手避坑小贴士 #

• 时间格式一定要对：如果你的time字段是字符串，必须转成Date对象或毫秒时间戳，不然图表组件会直接忽略
• 多设备一定要分组：不管用哪个组件，把设备名作为「系列」或「分组」字段，不然所有设备的状态会混在一起，根本没法看
• 先看debug输出：如果图表不显示，先加个debug节点看预处理后的msg.payload格式，是不是和组件要求的一致
• 老版Dashboard的替代方案：如果ui_chart满足不了需求，可以用ui_template节点自定义HTML+Chart.js，但新手建议先从自带组件入手，门槛低很多

如果中间遇到数据格式不对、组件不显示的问题，把debug节点的输出贴出来，我再帮你调细节～ 😊