Home Assistant 卡片分享（二）洗衣机、干衣机状态卡片
Home Assistant 洗衣干衣设备状态监控卡片
先上一张效果图
这个垂直堆叠卡片提供了洗衣机和干衣机的实时状态监控，通过直观的视觉反馈展示设备运行状态、当前程序和剩余时间，是智能家居洗衣房的完美控制中心。
🛠 前置要求
Mushroom Cards 集成：
yaml
# 通过 HACS 安装 resources: - url: /hacsfiles/mushroom/mushroom.js type: moduleCard Mod 插件（用于自定义样式）：
yaml
# 通过 HACS 安装 resources: - url: /hacsfiles/card-mod/card-mod.js type: module洗衣机/干衣机集成：
需通过 Midea AC LAN 等集成接入设备
确保创建了以下实体类型：
电源开关 (
switch.[device_id]_power)启动开关 (
switch.[device_id]_start)程序传感器 (
sensor.[device_id]_program)剩余时间传感器 (
sensor.[device_id]_time_remaining)
🧩 卡片配置解析
整体结构
yaml
type: vertical-stack # 垂直堆叠布局
cards:
- type: custom:mushroom-template-card # 洗衣机卡片
...
- type: custom:mushroom-template-card # 干衣机卡片
...🧺 洗衣机卡片（核心功能）
动态标题显示：
yaml
primary: |-
{% if states('switch.210006733295972_power') == 'on' %}
{% set program = states('sensor.210006733295972_program') %}
洗衣机 -
{# 程序类型翻译 #}
{% if program == 'water_mixed_wash' %}混合洗
{% elif program == 'fast_wash_30' %}快洗30分
... # 其他程序翻译
{% else %}{{ program }}{% endif %}
{% else %}
洗衣机 {# 关机状态显示 #}
{% endif %}状态信息显示：
yaml
secondary: |-
{% if states('switch.210006733295972_power') == 'on' %}
{% if states('switch.210006733295972_start') == 'on' %}
{% set minutes = states('sensor.210006733295972_time_remaining') | int %}
剩余时间 {{ (minutes // 60) }}:{{ '%02d' | format(minutes % 60) }} {# 时间格式化 #}
{% else %}
已暂停 {# 开机但未运行 #}
{% endif %}
{% else %}
已关机 {# 完全关闭 #}
{% endif %}视觉反馈系统：
yaml
icon: mdi:washing-machine # 基础图标
badge_icon: |- # 状态角标
{% if on %}
{% if running %}mdi:pinwheel {# 旋转图标表示运行中 #}
{% else %}mdi:pause {# 暂停图标 #}
{% endif %}
{% endif %}
icon_color: | # 主图标颜色
{% if on %}#2196f3 {# 开机蓝色 #}
{% else %}gray {# 关机灰色 #}
{% endif %}
badge_color: |- # 角标颜色
{% if on %}
{% if running %}#ff9f09 {# 运行中-橙色 #}
{% else %}#ffcc00 {# 暂停-黄色 #}
{% endif %}
{% endif %}动画效果：
yaml
card_mod:
style: >
{% if power_on and running %}
ha-card .badge ha-icon {
animation: spin 2s linear infinite; {# 旋转动画 #}
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
{% endif %}🌬 干衣机卡片（差异化设计）
干衣机卡片结构与洗衣机相似，主要区别在于程序翻译映射：
yaml
primary: |-
{% if on %}
干衣机 -
{% if program == 'mixed_wash' %}混合烘
{% elif program == 'quick_dry' %}快烘
{% elif program == 'hot_air_dry' %}热风暖衣
... {# 其他干衣程序翻译 #}
{% else %}{{ program }}{% endif %}
{% else %}
干衣机
{% endif %}🎨 统一视觉设计
yaml
# 通用样式配置
layout: horizontal # 水平布局
fill_container: true # 填充容器
card_mod:
style: >
ha-card {
--card-primary-font-size: 20px; {# 主文字大小 #}
--card-secondary-font-size: 12px; {# 副文字大小 #}
}视觉状态系统
⚙️ 技术亮点
智能程序翻译：
将设备原始程序代码转换为易懂的中文名称
支持混合洗、快洗、筒自洁等常见模式
专业时间格式化：
jinja
{{ (minutes // 60) }}:{{ '%02d' | format(minutes % 60) }}将分钟数转换为
时:分格式确保分钟数始终显示两位数（如
1:05）
多状态视觉反馈：
三级状态系统（关机/暂停/运行）
颜色编码快速识别设备状态
运行动画增强视觉提示
条件式动画：
仅在实际运行时触发旋转动画
通过 Card Mod 动态注入 CSS
💡 使用建议
实体适配：
yaml
# 替换为您的设备实体ID entity: switch.YOUR_DEVICE_ID_power程序扩展：
jinja
{% elif program == 'new_program' %}新模式名称按需添加新的程序翻译
样式定制：
css
ha-card { --card-primary-font-size: 22px; /* 增大字体 */ background: rgba(0,150,255,0.1); /* 添加背景色 */ }多设备支持：
yaml
- type: custom:mushroom-template-card # 新增洗碗机 entity: switch.dishwasher_power ...
此卡片设计通过高度可视化的方式，将复杂的设备状态转化为直观的信息展示，大幅提升了洗衣房设备的监控体验。无论是快速查看剩余时间，还是识别当前洗衣程序，都能一目了然。
最后附上我的完整配置。
yaml
type: vertical-stack
cards:
- type: custom:mushroom-template-card
layout: horizontal
primary: |-
{% if states('switch.210006733295972_power') == 'on' %}
{% set program = states('sensor.210006733295972_program') %}
洗衣机 -
{% if program == 'water_mixed_wash' %}混合洗
{% elif program == 'fast_wash_30' %}快洗30分
{% elif program == 'fast_wash' %}快洗15分
{% elif program == 'water_eco' %}节能
{% elif program == 'water_intelligent' %}智能洗
{% elif program == 'water_steep' %}浸泡洗
{% elif program == 'single_dehytration' %}单脱水
{% elif program == 'rinsing_dehydration' %}漂洗+脱水
{% elif program == 'big' %}大件洗
{% elif program == 'water_cold_wash' %}冷水洗
{% elif program == 'water_ssp' %}筒自洁
{% else %}{{ program }}{% endif %}
{% else %}
洗衣机
{% endif %}
secondary: |-
{% if states('switch.210006733295972_power') == 'on' %}
{% if states('switch.210006733295972_start') == 'on' %}
{% set minutes = states('sensor.210006733295972_time_remaining') | int %}
剩余时间 {{ (minutes // 60) }}:{{ '%02d' | format(minutes % 60) }}
{% else %}
已暂停
{% endif %}
{% else %}
已关机
{% endif %}
icon: mdi:washing-machine
entity: switch.210006733295972_power
badge_icon: |-
{% if states('switch.210006733295972_power') == 'on' %}
{% if states('switch.210006733295972_start') == 'on' %}
mdi:pinwheel
{% else %}
mdi:pause
{% endif %}
{% endif %}
badge_color: |-
{% if states('switch.210006733295972_power') == 'on' %}
{% if states('switch.210006733295972_start') == 'on' %}
#ff9f09 {# 运行中 - 橙色 #}
{% else %}
#ffcc00 {# 暂停 - 黄色 #}
{% endif %}
{% endif %}
icon_color: |
{% if states('switch.210006733295972_power') == 'on' %}
#2196f3 {# 开机状态 - 蓝色 #}
{% else %}
gray {# 关机状态 - 灰色 #}
{% endif %}
fill_container: true
card_mod:
style: >
ha-card {
--card-primary-font-size: 20px;
--card-secondary-font-size: 12px;
}
{% if states('switch.210006733295972_power') == 'on' and
states('switch.210006733295972_start') == 'on' %}
ha-card .badge ha-icon {
animation: spin 2s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
{% endif %}
- type: custom:mushroom-template-card
layout: horizontal
primary: |-
{% if states('switch.208907221626831_power') == 'on' %}
{% set program = states('sensor.208907221626831_program') %}
干衣机 -
{% if program == 'mixed_wash' %}混合烘
{% elif program == 'quick_dry' %}快烘
{% elif program == 'hot_air_dry' %}热风暖衣
{% elif program == 'air_wash' %}空气洗
{% elif program == 'cold_air_fresh_air' %}冷风清新
{% elif program == 'wool' %}羊毛烘
{% elif program == 'big_dry' %}大件烘
{% elif program == 'small_piece_dry' %}小件烘
{% elif program == 'fixed_time_dry' %}定时烘
{% elif program == '83' %}除菌除螨
{% elif program == 'bracket_dry' %}支架烘
{% elif program == 'sun_quilt' %}晒被子
{% else %}{{ program }}{% endif %}
{% else %}
干衣机
{% endif %}
secondary: |-
{% if states('switch.208907221626831_power') == 'on' %}
{% if states('switch.208907221626831_start') == 'on' %}
{% set minutes = states('sensor.208907221626831_time_remaining') | int %}
剩余时间 {{ (minutes // 60) }}:{{ '%02d' | format(minutes % 60) }}
{% else %}
已暂停
{% endif %}
{% else %}
已关机
{% endif %}
icon: mdi:tumble-dryer
entity: switch.208907221626831_power
badge_icon: |-
{% if states('switch.208907221626831_power') == 'on' %}
{% if states('switch.208907221626831_start') == 'on' %}
mdi:pinwheel
{% else %}
mdi:pause
{% endif %}
{% endif %}
badge_color: |-
{% if states('switch.208907221626831_power') == 'on' %}
{% if states('switch.208907221626831_start') == 'on' %}
#ff9f09 {# 运行中 - 橙色 #}
{% else %}
#ffcc00 {# 暂停 - 黄色 #}
{% endif %}
{% endif %}
icon_color: |
{% if states('switch.208907221626831_power') == 'on' %}
#2196f3 {# 开机状态 - 蓝色 #}
{% else %}
gray {# 关机状态 - 灰色 #}
{% endif %}
fill_container: true
card_mod:
style: >
ha-card {
--card-primary-font-size: 20px;
--card-secondary-font-size: 12px;
}
{% if states('switch.208907221626831_power') == 'on' and
states('switch.208907221626831_start') == 'on' %}
ha-card .badge ha-icon {
animation: spin 2s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
{% endif %}
本文是原创文章，采用 CC BY-NC-ND 4.0 协议，完整转载请注明来自 达达
阅读建议
评论
匿名评论
隐私政策
你无需删除空行，直接评论以获取最佳展示效果
