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

amw700367

抄作业~

lensam

收藏备用，好东西

Mqiang115

高手啊，膜拜下

盗掘爱情

66666666666666

lee229

看看dddddd kkkk

gl695133087

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: 用电情况

复制代码

                               
登录/注册后可看大图

交作业

原頁

太有用了！感謝

zhouss1974

厉害，看看怎么设置的

junjunjunlll

不错哦！看着很好看！

chenpppp

感谢分享