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

博主： Almighty.YanTao
发布时间：2025 年 01 月 20 日
48 次浏览
暂无评论
8594字数
分类：代码人生

## 先看效果图

![](https://oss-image.taowiki.com/blog-image/2025/01/20/678e22204fd0e.png)

## 青龙面板部署

### 添加订阅任务

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

![](https://oss-image.taowiki.com/blog-image/2025/01/20/678e244b9299c.png)

### 安装依赖

- mqtt
- node-localstorage

![](https://oss-image.taowiki.com/blog-image/2025/01/20/678e24a6033b8.png)

### 设置MQTT参数

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

```dock
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'
```

![](https://oss-image.taowiki.com/blog-image/2025/01/20/678e24ef293b6.png)

```bash
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` 文件

```yarm
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 }}"
```

![](https://oss-image.taowiki.com/blog-image/2025/01/20/678e25ccb4757.png)

### 重载配置文件

![](https://oss-image.taowiki.com/blog-image/2025/01/20/678e25f51361a.png)

### 添加卡片模板

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

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

![](https://oss-image.taowiki.com/blog-image/2025/01/20/678e264299320.png)

### 安装MQTT集成

![](https://oss-image.taowiki.com/blog-image/2025/01/20/678e26733c092.png)

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

![](https://oss-image.taowiki.com/blog-image/2025/01/20/678e26a22d66a.png)

### 添加卡片模板

```sh
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: 用电统计
```sh
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天用电

```bash
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: 元
```bash
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: 元

```

### 过去一个月用电

```bash
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];
      });

```

## 参考资料

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

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

最后修改：2025 年 01 月 20 日