【HomeAssistant】青龙面板利用MQTT部署“国家电网”进行数据展示

先看效果图

青龙面板部署

添加订阅任务

https://github.com/x2rr/state-grid.git

安装依赖

• mqtt
• node-localstorage

设置MQTT参数

我这里是自己部署了一个MQTT服务器，Docker直接启动的。你们也可以用免费的，也可以自己部署一个，非常的简单

docker run
  -d
  --name='MQTT'
  --ip='192.168.200.132'
  -e TZ="Asia/Shanghai"
  -e HOST_CONTAINERNAME="MQTT"
  -e 'TCP_PORT_1883'='1883'
  -e 'TCP_PORT_9001'='9001'
  -l net.unraid.docker.managed=dockerman
  -l net.unraid.docker.webui='http://mqtt.org/'
  -l net.unraid.docker.icon='https://i.imgur.com/Cc9Jkcr.png'
  -v '/mnt/user/appdata/MQTT':'/config':'rw' 'spants/mqtt'

export WSGW_USERNAME="" #网上国网账号
export WSGW_PASSWORD="" #网上国网密码
export WSGW_RECENT_ELC_FEE="true" #是否获取最近电费
export WSGW_mqtt_host="" #mqtt服务器地址 192.168.1.7
export WSGW_mqtt_port="" #mqtt服务器端口 1883
export WSGW_mqtt_username="" #mqtt服务器用户名
export WSGW_mqtt_password="" #mqtt服务器密码

HomeAssistant配置

增加MQTT传感器

修改：configuration.yaml 文件

mqtt:
  sensor:
    - name: "电费余额"
      icon: 'mdi:lightning-bolt'
      unique_id: 'yong_dian_xin_xi'
      state_topic: "nodejs/state-grid"
      value_template: "{{ value_json.sumMoney }}"
      unit_of_measurement: '元'
      json_attributes_topic: "nodejs/state-grid"
      json_attributes_template: "{{ value_json | tojson }}"
    - name: 'Electricity Usage Day 1'
      state_topic: 'nodejs/state-grid'
      value_template: '{{ value_json.dayList[0].dayElePq }}'
      unique_id: "electricity_usage_day1"
      device_class: "energy"
      unit_of_measurement: "度"
      icon: "mdi:chart-bell-curve"
      json_attributes_topic: "nodejs/state-grid"
      json_attributes_template: "{{ value_json.dayList[0] | tojson }}"
    - name: 'Electricity Usage Day 2'
      state_topic: 'nodejs/state-grid'
      value_template: '{{ value_json.dayList[1].dayElePq }}'
      unique_id: "electricity_usage_day2"
      device_class: "energy"
      unit_of_measurement: "度"
      icon: "mdi:chart-bell-curve"
      json_attributes_topic: "nodejs/state-grid"
      json_attributes_template: "{{ value_json.dayList[1] | tojson }}"
    - name: 'Electricity Usage Day 3'
      state_topic: 'nodejs/state-grid'
      value_template: '{{ value_json.dayList[2].dayElePq }}'
      unique_id: "electricity_usage_day3"
      device_class: "energy"
      unit_of_measurement: "度"
      icon: "mdi:chart-bell-curve"
      json_attributes_topic: "nodejs/state-grid"
      json_attributes_template: "{{ value_json.dayList[2] | tojson }}"
    - name: 'Electricity Usage Day 4'
      state_topic: 'nodejs/state-grid'
      value_template: '{{ value_json.dayList[3].dayElePq }}'
      unique_id: "electricity_usage_day4"
      device_class: "energy"
      unit_of_measurement: "度"
      icon: "mdi:chart-bell-curve"
      json_attributes_topic: "nodejs/state-grid"
      json_attributes_template: "{{ value_json.dayList[3] | tojson }}"
    - name: 'Electricity Usage Day 5'
      state_topic: 'nodejs/state-grid'
      value_template: '{{ value_json.dayList[4].dayElePq }}'
      unique_id: "electricity_usage_day5"
      device_class: "energy"
      unit_of_measurement: "度"
      icon: "mdi:chart-bell-curve"
      json_attributes_topic: "nodejs/state-grid"
      json_attributes_template: "{{ value_json.dayList[4] | tojson }}"
    - name: 'Electricity Usage Day 6'
      state_topic: 'nodejs/state-grid'
      value_template: '{{ value_json.dayList[5].dayElePq }}'
      unique_id: "electricity_usage_day6"
      device_class: "energy"
      unit_of_measurement: "度"
      icon: "mdi:chart-bell-curve"
      json_attributes_topic: "nodejs/state-grid"
      json_attributes_template: "{{ value_json.dayList[5] | tojson }}"
    - name: 'Electricity Usage Day 7'
      state_topic: 'nodejs/state-grid'
      value_template: '{{ value_json.dayList[6].dayElePq }}'
      unique_id: "electricity_usage_day7"
      device_class: "energy"
      unit_of_measurement: "度"
      icon: "mdi:chart-bell-curve"
      json_attributes_topic: "nodejs/state-grid"
      json_attributes_template: "{{ value_json.dayList[6] | tojson }}"

重载配置文件

添加卡片模板

• vertical-stack
• flex-table-card
• apexcharts-card

如果你是要自建的，那就忽略我提供的模板就好了。

安装MQTT集成

根据自身的配置填写相关信息

添加卡片模板

type: vertical-stack
cards:
  - type: grid
    columns: 2
    cards:
      - type: entity
        entity: sensor.dian_fei_yu_e
        name: 电费余额
        attribute: sumMoney
        unit: 元
        icon: mdi:currency-usd
      - type: entity
        entity: sensor.electricity_usage_day_1
        name: 昨日用电
        icon: mdi:lightning-bolt
      - type: entity
        entity: sensor.dian_fei_yu_e
        name: 年度总电费
        attribute: totalEleCost
        unit: 元
        icon: mdi:currency-usd
      - type: entity
        entity: sensor.dian_fei_yu_e
        name: 年度总电量
        attribute: totalEleNum
        unit: 度
        icon: mdi:lightning-bolt
    square: false
  - type: entity
    entity: sensor.electricity_usage_day_1
    name: 昨日日期
    attribute: day
    icon: mdi:calendar-today
  - type: entity
    entity: sensor.dian_fei_yu_e
    name: 更新日期
    attribute: amtTime
    icon: mdi:clock-time-three
title: 用电统计

过去7天用电

type: custom:flex-table-card
title: 过去7天用电情况
entities:
  include: sensor.electricity_usage_day*
columns:
  - name: 日期
    data: day
  - name: 用电量
    data: state
    suffix: 度
  - name: 电费
    data: state
    modify: parseFloat(x*0.5).toFixed(2)
    suffix: 元

过去一个月用电

type: custom:apexcharts-card
graph_span: 12month
header:
  show: true
  title: 最近12个月电量统计数据
  show_states: true
  colorize_states: true
series:
  - entity: sensor.dian_fei_yu_e
    name: 用电量
    unit: 度
    type: column
    data_generator: |
      return entity.attributes.monthList.map((peak, index) => {
        return [entity.attributes.monthList[index].endDate, entity.attributes.monthList[index].monthEleNum];
      });

最近7天的折线图

type: custom:apexcharts-card
header:
  show: true
  title: 最近7天用电量折线图
graph_span: 8d
span:
  end: day
series:
  - entity: sensor.dian_fei_yu_e
    name: 用电量 (度)
    unit: 度
    type: line
    float_precision: 2
    show:
      datalabels: true
      legend_value: true
    data_generator: |
      const dayList = entity.attributes.dayList || [];
      if (!Array.isArray(dayList) || dayList.length === 0) {
        return [];
      }
      // 计算昨天日期字符串，格式 yyyy-mm-dd
      const yesterday = new Date();
      yesterday.setDate(yesterday.getDate() - 1);
      const yStr = yesterday.toISOString().slice(0,10);
      // 过滤出日期 <= 昨天，倒序取7条，最后正序返回
      const filtered = dayList.filter(d => d.day <= yStr);
      const last7 = filtered.slice(0,7).reverse();
      return last7.map(item => [item.day, parseFloat(item.dayElePq) || 0]);
apex_config:
  xaxis:
    type: datetime
    labels:
      rotate: -45
      style:
        fontSize: 12px
  stroke:
    curve: smooth
    width: 3
  markers:
    size: 6
    colors:
      - "#FFA500"
    strokeWidth: 2
  tooltip:
    shared: true
    followCursor: true
  dataLabels:
    enabled: true
    offsetY: -10
    style:
      colors:
        - "#000"
yaxis:
  - min: 0

参考资料

https://github.com/x2rr/state-grid

https://bbs.hassbian.com/thread-27865-1-1.html