记录南方电网集成UI界面使用（sensor和apexcharts-card卡片）

amw700367 · 发表于 2024-6-9 11:22:38

抄作业~

lensam · 发表于 2024-6-10 18:01:02

收藏备用，好东西

Mqiang115 · 发表于 2024-6-12 13:35:46

高手啊，膜拜下

盗掘爱情 · 发表于 2024-6-13 23:26:52

66666666666666

lee229 · 发表于 2024-6-13 23:28:47

看看dddddd kkkk

gl695133087 · 发表于 2024-6-14 00:02:37

本帖最后由 gl695133087 于 2024-6-14 00:05 编辑

type: vertical-stack
cards:
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-template-card
        primary: 本月用电
        secondary: '{{states(''sensor.XXX_this_month_total_usage'')}}kWh'
        icon: mdi:home-lightning-bolt-outline
        tap_action:
          action: more-info
        hold_action:
          action: more-info
        double_tap_action:
          action: more-info
        icon_color: blue
        badge_icon: ''
        badge_color: ''
        entity: sensor.XXX_this_month_total_usage
      - type: custom:mushroom-template-card
        primary: 昨天用电
        secondary: '{{states(''sensor.XXX_latest_day_kwh'')}}kWh'
        icon: mdi:home-lightning-bolt-outline
        tap_action:
          action: more-info
        hold_action:
          action: more-info
        double_tap_action:
          action: more-info
        icon_color: blue
        badge_icon: ''
        badge_color: ''
        entity: sensor.XXX_latest_day_kwh
      - type: custom:mushroom-template-card
        primary: 应交电费
        secondary: '{{states(''sensor.XXX_arrears'')}}元'
        icon: mdi:currency-jpy
        tap_action:
          action: more-info
        hold_action:
          action: more-info
        double_tap_action:
          action: more-info
        icon_color: blue
        badge_icon: ''
        badge_color: ''
        entity: sensor.XXX_arrears
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-template-card
        primary: 上月用电
        secondary: '{{states(''sensor.XXX_last_month_total_usage'')}}kWh'
        icon: mdi:home-lightning-bolt-outline
        tap_action:
          action: more-info
        hold_action:
          action: more-info
        double_tap_action:
          action: more-info
        icon_color: blue
        badge_icon: ''
        badge_color: ''
        entity: sensor.XXX_last_month_total_usage
      - type: custom:mushroom-template-card
        primary: 上月电费
        secondary: '{{states(''sensor.airpowerheatertemperature'')}}元'
        icon: mdi:currency-jpy
        tap_action:
          action: more-info
        hold_action:
          action: more-info
        double_tap_action:
          action: more-info
        icon_color: blue
        badge_icon: ''
        badge_color: ''
        entity: sensor.airpowerheatertemperature
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-template-card
        primary: 本年用电
        secondary: '{{states(''sensor.XXX_this_year_total_usage'')}}kWh'
        icon: mdi:home-lightning-bolt-outline
        tap_action:
          action: more-info
        hold_action:
          action: more-info
        double_tap_action:
          action: more-info
        icon_color: blue
        badge_icon: ''
        badge_color: ''
        entity: sensor.XXX_this_year_total_usage
      - type: custom:mushroom-template-card
        primary: 本年电费
        secondary: '{{states(''sensor.XXX_this_year_total_cost'')}}元'
        icon: mdi:currency-jpy
        tap_action:
          action: more-info
        hold_action:
          action: more-info
        double_tap_action:
          action: more-info
        icon_color: blue
        badge_icon: ''
        badge_color: ''
        entity: sensor.XXX_this_year_total_cost
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-template-card
        primary: 上年用电
        secondary: '{{states(''sensor.XXX_last_year_total_usage'')}}kWh'
        icon: mdi:home-lightning-bolt-outline
        tap_action:
          action: more-info
        hold_action:
          action: more-info
        double_tap_action:
          action: more-info
        icon_color: blue
        badge_icon: ''
        badge_color: ''
        entity: sensor.XXX_last_year_total_usage
      - type: custom:mushroom-template-card
        primary: 本年电费
        secondary: '{{states(''sensor.XXX_last_year_total_cost'')}}元'
        icon: mdi:currency-jpy
        tap_action:
          action: more-info
        hold_action:
          action: more-info
        double_tap_action:
          action: more-info
        icon_color: blue
        badge_icon: ''
        badge_color: ''
        entity: sensor.XXX_last_year_total_cost
  - type: horizontal-stack
    cards:
      - type: custom:apexcharts-card
        header:
          show: true
          title: 30天用电与费用趋势图
        graph_span: 30d
        span:
          start: day
          offset: '-30d'
        series:
          - entity: sensor.history_day
            type: column
            name: 用电量
            color: rgb(51,153,255)
            attribute: history_day_value
            data_generator: |
              return entity.attributes.history_day_value.map(entry => {
                return {
                  x: entry.date,
                  y: entry.kwh
                };
              });
          - entity: sensor.history_day
            name: 用电费用
            color: rgb(255,153,0)
            attribute: history_day_value
            data_generator: |
              return entity.attributes.history_day_value.map(entry => {
                return {
                  x: entry.date,
                  y: entry.kwh*0.65886875
                };
              });
title: 用电情况

登录/注册后可看大图

交作业

原頁 · 发表于 2024-6-14 12:14:17

太有用了！感謝

zhouss1974 · 发表于 2024-6-14 14:11:26

厉害，看看怎么设置的

junjunjunlll · 发表于 2024-6-17 10:26:24

不错哦！看着很好看！

chenpppp · 发表于 2024-6-18 17:31:10

感谢分享

		自动登录	找回密码
密码			立即注册

[UI界面] 记录南方电网集成UI界面使用（sensor和apexcharts-card卡片）