分享一个简单开关功能的电器控制卡片，button-card+card_mod

gasment

Collect 发表于 2025-9-5 22:25
这个带圈的闪电图标是自绘的吗 在库里面没看到

mdi:lightning-bolt-circle

Collect

交作业了

                               
登录/注册后可看大图

Collect

提个建议 可以考虑在带能耗统计的开关类下方加入电量统计 可以方便看到当日设备能耗 我尝试改 发现格式会乱掉 我不咋会css

                               
登录/注册后可看大图

li23334

大佬优秀，感谢分享

alabo

wolaikankan

Mr丶Dashu

看着挺好看的

guxiaowei

酷酷酷 需要

Collect

    state_display: |
      [[[
        var control_method = variables.control_method;
        var state = states[`${variables.entity}`].state;
        if (state === "on"){
          state = "打开";
        } else if (state === "off"){
          state = "关闭";
        }
        const lastChangedStr = states[`${variables.entity}`].last_changed;
        const lastChanged = new Date(lastChangedStr);
        const now = new Date();
        const diffMs = now - lastChanged;
        if (diffMs < 0 && control_method === "auto") {
          return state + " · 刚刚<br>自动";
        }
        const diffMins = Math.floor(diffMs / 60000);
        const days = Math.floor(diffMins / 1440);
        const hours = Math.floor((diffMins % 1440) / 60);
        const minutes = diffMins % 60;
        let result = "";
        if (days > 0) {
          result = `${days}天前`;
        } else if (hours > 0) {
          result = `${hours}小时前`;
        } else if (minutes > 0) {
          result = `${minutes}分钟前`;
        } else {
          result = "刚刚";
        }

        // 先拼接状态和时间
        let display = state + " · " + result;

        // 如果开机且有日电量 → 插入到“自动”之前
        let dailyLine = "";
        if (states[`${variables.entity}`].state === "on") {
          var daily_energy = states[variables.daily_energy_sensor]?.state;
          if (daily_energy && daily_energy !== "unknown") {
            daily_energy = parseFloat(daily_energy).toFixed(2) + "kWh";
            dailyLine = "<br>电量 · " + daily_energy;
          }
        }

        if (control_method === "auto") {
          display += dailyLine + "<br>自动";
        } else {
          display += dailyLine;
        }

        return display;
      ]]]

复制代码

用ai写了一个 实现了 就是不知道逻辑性咋样

                               
登录/注册后可看大图

gasment

Collect 发表于 2025-9-7 16:11
用ai写了一个 实现了 就是不知道逻辑性咋样

state信息超过一行之后，文字内容的垂直布局有点不协调，调到与图标平齐就好看一些，可以在styles里给name和state加上margin-top来微调一下上下位置

jxm210

感谢分享