8 Commits
v0.1.0 ... main

Author SHA1 Message Date
xiaoshi
f768186379 Update xiaoshi-device-balance-card.js 2025-11-26 14:21:37 +08:00
xiaoshi
2371475eca Update xiaoshi-device-consumables-card.js 2025-11-26 14:18:03 +08:00
xiaoshi
befca5ece5 Update xiaoshi-pad-card.js 2025-11-26 14:13:44 +08:00
xiaoshi
24848db29b Update xiaoshi-device-consumables-card.js 2025-11-26 14:13:25 +08:00
xiaoshi
be232dc056 Update README.md 2025-11-26 13:06:57 +08:00
xiaoshi
96fb548262 Update README.md 2025-11-26 13:06:09 +08:00
xiaoshi
16831e5102 Update xiaoshi-pad-card.js 2025-11-26 13:04:30 +08:00
xiaoshi
b05f7de548 Update xiaoshi-device-consumables-card.js 2025-11-26 13:04:02 +08:00
4 changed files with 192 additions and 34 deletions

View File

@@ -78,3 +78,29 @@ entities:
- todo.kuai_di - todo.kuai_di
- todo.ji_shi_ben - todo.ji_shi_ben
~~~ ~~~
## 功能6耗材信息卡片(手机平板端通用)
**引用示例**
~~~
type: custom:xiaoshi-consumables-card
width: 100%
global_warning: <8
columns: "2"
entities:
- entity_id: input_text.aaa
overrides:
name: 奥斯卡德拉萨达实打实实打实
unit_of_measurement: "%"
warning: <10
conversion: "*2"
icon: ""
- entity_id: input_text.aaa1
- entity_id: input_text.aaa2
- entity_id: input_text.aaa3
- entity_id: input_text.aaa4
- entity_id: input_text.aaa5
- entity_id: input_text.aaa6
- entity_id: input_text.aaa7
~~~

View File

@@ -466,11 +466,12 @@ class XiaoshiBalanceCardEditor extends LitElement {
newEntities = currentEntities.filter(e => e.entity_id !== entityId); newEntities = currentEntities.filter(e => e.entity_id !== entityId);
} else { } else {
// 添加实体 // 添加实体
newEntities = [...currentEntities, { const newEntity = {
entity_id: entityId, entity_id: entityId,
attribute: null,
overrides: undefined overrides: undefined
}]; };
// 只有在明确指定属性时才添加 attribute 字段
newEntities = [...currentEntities, newEntity];
} }
this.config = { this.config = {
@@ -510,10 +511,17 @@ class XiaoshiBalanceCardEditor extends LitElement {
const newEntities = [...currentEntities]; const newEntities = [...currentEntities];
if (newEntities[index]) { if (newEntities[index]) {
newEntities[index] = { const updatedEntity = { ...newEntities[index] };
...newEntities[index],
attribute: attributeValue.trim() || null if (attributeValue.trim()) {
}; // 只有当属性值不为空时才设置 attribute 字段
updatedEntity.attribute = attributeValue.trim();
} else {
// 如果属性值为空,则移除 attribute 字段
delete updatedEntity.attribute;
}
newEntities[index] = updatedEntity;
} }
this.config = { this.config = {

View File

@@ -247,7 +247,8 @@ class XiaoshiConsumablesCardEditor extends LitElement {
/> />
<div class="help-text"> <div class="help-text">
全局预警条件:当任一实体满足此条件时,该实体显示为红色预警状态<br> 全局预警条件:当任一实体满足此条件时,该实体显示为红色预警状态<br>
优先级:明细预警 > 全局预警 > 无预警 优先级:明细预警 > 全局预警 > 无预警<br>
预警基于换算后的结果进行判断(如果配置了换算)
</div> </div>
</div> </div>
@@ -400,10 +401,33 @@ class XiaoshiConsumablesCardEditor extends LitElement {
class="override-input" class="override-input"
@change=${(e) => this._updateEntityOverrideValue(index, 'warning', e.target.value)} @change=${(e) => this._updateEntityOverrideValue(index, 'warning', e.target.value)}
.value=${entityConfig.overrides?.warning || ''} .value=${entityConfig.overrides?.warning || ''}
placeholder="如: >10, <=5, ==on, ==off, =='hello world'" placeholder='>10, <=5, ==on,=="hello world"'
?disabled=${entityConfig.overrides?.warning === undefined} ?disabled=${entityConfig.overrides?.warning === undefined}
/> />
</div> </div>
<div class="override-config">
<input
type="checkbox"
class="override-checkbox"
@change=${(e) => this._updateEntityOverride(index, 'conversion', e.target.checked)}
.checked=${entityConfig.overrides?.conversion !== undefined}
/>
<span class="override-label">换算:</span>
<input
type="text"
class="override-input"
@change=${(e) => this._updateEntityOverrideValue(index, 'conversion', e.target.value)}
.value=${entityConfig.overrides?.conversion || ''}
placeholder="+10, -10, *1.5, /2"
?disabled=${entityConfig.overrides?.conversion === undefined}
/>
</div>
<div class="help-text">
<strong>预警:</strong>针对单个实体的预警条件,优先级高于全局预警<br>
<strong>换算:</strong>对原始数值进行数学运算,支持 +10, -10, *1.5, /2 等格式<br>
</div>
</div> </div>
</div> </div>
`; `;
@@ -412,11 +436,13 @@ class XiaoshiConsumablesCardEditor extends LitElement {
</div> </div>
<div class="help-text"> <div class="help-text">
搜索并选择要显示的设备耗材实体,支持多选。每个实体可以配置:<br> 搜索并选择要显示的设备耗材实体,支持多选。每个实体可以配置:<br>
• <strong>特殊实体显示:</strong>binary_sensor(off→正常,on→缺少), event(unknown→正常,其他→低电量)<br>
• 属性名:留空使用实体状态,或输入属性名<br> • 属性名:留空使用实体状态,或输入属性名<br>
• 名称重定义:勾选后可自定义显示名称<br> • 名称重定义:勾选后可自定义显示名称<br>
• 图标重定义:勾选后可自定义图标(如 mdi:phone<br> • 图标重定义:勾选后可自定义图标(如 mdi:phone<br>
• 单位重定义:勾选后可自定义单位(如 元、$、kWh 等)<br> • 单位重定义:勾选后可自定义单位(如 元、$、kWh 等)<br>
• 预警条件:勾选后设置预警条件,支持 >10, >=10, <10, <=10, ==10, ==on, ==off, =="hello world" 等<br> • 预警条件:勾选后设置预警条件,支持 >10, >=10, <10, <=10, ==10, ==on, ==off, =="hello world" 等<br>
• 换算:对数值进行数学运算,支持 +10, -10, *1.5, /2 等<br>
• 未勾选重定义时,将使用实体的原始属性值 • 未勾选重定义时,将使用实体的原始属性值
</div> </div>
</div> </div>
@@ -476,7 +502,6 @@ class XiaoshiConsumablesCardEditor extends LitElement {
} else { } else {
newEntities = [...currentEntities, { newEntities = [...currentEntities, {
entity_id: entityId, entity_id: entityId,
attribute: null,
overrides: undefined overrides: undefined
}]; }];
} }
@@ -518,10 +543,18 @@ class XiaoshiConsumablesCardEditor extends LitElement {
const newEntities = [...currentEntities]; const newEntities = [...currentEntities];
if (newEntities[index]) { if (newEntities[index]) {
newEntities[index] = { const trimmedValue = attributeValue.trim();
...newEntities[index], if (trimmedValue === '') {
attribute: attributeValue.trim() || null // 如果属性为空,则从配置中移除 attribute 字段
}; const { attribute, ...entityWithoutAttribute } = newEntities[index];
newEntities[index] = entityWithoutAttribute;
} else {
// 如果属性不为空,则设置属性值
newEntities[index] = {
...newEntities[index],
attribute: trimmedValue
};
}
} }
this.config = { this.config = {
@@ -705,7 +738,6 @@ class XiaoshiConsumablesCard extends LitElement {
.device-count.non-zero { .device-count.non-zero {
background: rgba(255, 0, 0, 0.7); background: rgba(255, 0, 0, 0.7);
color: #fff; color: #fff;
animation: pulse 2s infinite;
} }
.device-count.zero { .device-count.zero {
@@ -771,11 +803,12 @@ class XiaoshiConsumablesCard extends LitElement {
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
margin: 0px 16px; margin: 0px 16px;
padding: 6px 0; padding: 0;
border-bottom: 1px solid rgb(150,150,150,0.5); border-bottom: 1px solid rgb(150,150,150,0.5);
cursor: pointer; cursor: pointer;
transition: background-color 0.2s; transition: background-color 0.2s;
min-height: 32px; min-height: 30px;
max-height: 30px;
} }
.device-item:first-child { .device-item:first-child {
@@ -798,8 +831,8 @@ class XiaoshiConsumablesCard extends LitElement {
.devices-grid { .devices-grid {
display: grid; display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 1px; gap: 0 15px;
padding: 0 16px; padding: 0px 16px;
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
overflow: hidden; overflow: hidden;
@@ -815,15 +848,16 @@ class XiaoshiConsumablesCard extends LitElement {
/*2列布局中的设备项*/ /*2列布局中的设备项*/
.devices-grid .device-item { .devices-grid .device-item {
margin: 0; margin: 0.5px 0;
padding: 4px 12px; padding: 0;
background: var(--bg-color, #fff); background: var(--bg-color, #fff);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
cursor: pointer; cursor: pointer;
transition: background-color 0.2s; transition: background-color 0.2s;
min-height: 24px; min-height: 30px;
max-height: 30px;
border-bottom: none; border-bottom: none;
border-right: none; border-right: none;
border-left: none; border-left: none;
@@ -831,6 +865,7 @@ class XiaoshiConsumablesCard extends LitElement {
max-width: 100%; max-width: 100%;
box-sizing: border-box; box-sizing: border-box;
overflow: hidden; overflow: hidden;
border-bottom: 1px solid rgb(150,150,150,0.5);
} }
.devices-grid .device-item:hover { .devices-grid .device-item:hover {
@@ -895,9 +930,9 @@ class XiaoshiConsumablesCard extends LitElement {
} }
.device-unit { .device-unit {
font-size: 8px; font-size: 9px;
color: var(--fg-color, #000); color: var(--fg-color, #000);
margin-left: 2px; margin-left: 0.5px;
font-weight: bold; font-weight: bold;
white-space: nowrap; white-space: nowrap;
flex-shrink: 0; flex-shrink: 0;
@@ -995,6 +1030,26 @@ class XiaoshiConsumablesCard extends LitElement {
value = attributes[attributeName]; value = attributes[attributeName];
} }
// 特殊实体类型的数值显示逻辑
if (!attributeName) {
// binary_sensor 实体off显示正常on显示缺少
if (entityId.startsWith('binary_sensor.')) {
if (value === 'off') {
value = '正常';
} else if (value === 'on') {
value = '缺少';
}
}
// event 实体unknown显示正常非unknown或不可用时显示低电量
else if (entityId.startsWith('event.')) {
if (value === 'unknown') {
value = '正常';
} else if (value !== 'unknown' && value !== 'unavailable') {
value = '低电量';
}
}
}
// 尝试从属性中获取单位 // 尝试从属性中获取单位
if (attributes.unit_of_measurement) { if (attributes.unit_of_measurement) {
unit = attributes.unit_of_measurement; unit = attributes.unit_of_measurement;
@@ -1007,6 +1062,7 @@ class XiaoshiConsumablesCard extends LitElement {
let friendlyName = attributes.friendly_name || entityId; let friendlyName = attributes.friendly_name || entityId;
let icon = attributes.icon || 'mdi:help-circle'; let icon = attributes.icon || 'mdi:help-circle';
let warningThreshold = undefined; let warningThreshold = undefined;
let conversion = undefined;
// 应用用户自定义的重定义 // 应用用户自定义的重定义
if (entityConfig.overrides) { if (entityConfig.overrides) {
@@ -1022,15 +1078,27 @@ class XiaoshiConsumablesCard extends LitElement {
if (entityConfig.overrides.warning !== undefined && entityConfig.overrides.warning !== '') { if (entityConfig.overrides.warning !== undefined && entityConfig.overrides.warning !== '') {
warningThreshold = entityConfig.overrides.warning; // 保持原始字符串 warningThreshold = entityConfig.overrides.warning; // 保持原始字符串
} }
if (entityConfig.overrides.conversion !== undefined && entityConfig.overrides.conversion !== '') {
conversion = entityConfig.overrides.conversion; // 换算表达式
}
}
// 应用换算(只对数值进行换算,不对文本状态进行换算)
let originalValue = value;
if (conversion && !isNaN(parseFloat(value))) {
value = this._applyConversion(value, conversion);
} else if (conversion && isNaN(parseFloat(value))) {
} }
consumablesData.push({ consumablesData.push({
entity_id: entityId, entity_id: entityId,
friendly_name: friendlyName, friendly_name: friendlyName,
value: value, value: value,
original_value: originalValue,
unit: unit, unit: unit,
icon: icon, icon: icon,
warning_threshold: warningThreshold warning_threshold: warningThreshold,
conversion: conversion
}); });
} }
@@ -1061,13 +1129,21 @@ class XiaoshiConsumablesCard extends LitElement {
_renderDeviceItem(consumablesData) { _renderDeviceItem(consumablesData) {
let isWarning = false; let isWarning = false;
if (consumablesData.warning_threshold && consumablesData.warning_threshold.trim() !== '') { // 特殊实体类型的默认预警逻辑
isWarning = this._evaluateWarningCondition(consumablesData.value, consumablesData.warning_threshold); if (consumablesData.entity_id.startsWith('binary_sensor.') && !consumablesData.warning_threshold) {
console.log(`明细预警 - 实体: ${consumablesData.friendly_name}, 值: "${consumablesData.value}", 条件: "${consumablesData.warning_threshold}", 预警: ${isWarning}`); // binary_sensor: "缺少"状态时预警
isWarning = consumablesData.value === '缺少';
} else if (consumablesData.entity_id.startsWith('event.') && !consumablesData.warning_threshold) {
// event: "低电量"状态时预警
isWarning = consumablesData.value === '低电量';
} else { } else {
if (this.config.global_warning && this.config.global_warning.trim() !== '') { // 使用配置的预警条件
isWarning = this._evaluateWarningCondition(consumablesData.value, this.config.global_warning); if (consumablesData.warning_threshold && consumablesData.warning_threshold.trim() !== '') {
console.log(`全局预警 - 实体: ${consumablesData.friendly_name}, 值: "${consumablesData.value}", 条件: "${this.config.global_warning}", 预警: ${isWarning}`); isWarning = this._evaluateWarningCondition(consumablesData.value, consumablesData.warning_threshold);
} else {
if (this.config.global_warning && this.config.global_warning.trim() !== '') {
isWarning = this._evaluateWarningCondition(consumablesData.value, this.config.global_warning);
}
} }
} }
@@ -1085,6 +1161,54 @@ class XiaoshiConsumablesCard extends LitElement {
`; `;
} }
_applyConversion(value, conversion) {
if (!conversion || !value) return value;
try {
// 提取数值部分
const numericValue = parseFloat(value);
if (isNaN(numericValue)) {
console.warn(`无法将值 "${value}" 转换为数字进行换算`);
return value;
}
// 解析换算表达式
const match = conversion.match(/^([+\-*/])(\d+(?:\.\d+)?)$/);
if (!match) {
console.warn(`无效的换算表达式: "${conversion}",支持的格式: +10, -10, *1.5, /2`);
return value;
}
const operator = match[1];
const operand = parseFloat(match[2]);
let result;
switch (operator) {
case '+':
result = numericValue + operand;
break;
case '-':
result = numericValue - operand;
break;
case '*':
result = numericValue * operand;
break;
case '/':
result = numericValue / operand;
break;
default:
return value;
}
// 返回结果,保留适当的小数位数
return Number.isInteger(result) ? result.toString() : result.toFixed(2).toString();
} catch (error) {
console.error(`换算时出错: ${error.message}`);
return value;
}
}
_evaluateWarningCondition(value, condition) { _evaluateWarningCondition(value, condition) {
if (!condition) return false; if (!condition) return false;
@@ -1156,7 +1280,7 @@ class XiaoshiConsumablesCard extends LitElement {
<ha-card style="--fg-color: ${fgColor}; --bg-color: ${bgColor};"> <ha-card style="--fg-color: ${fgColor}; --bg-color: ${bgColor};">
<div class="card-header"> <div class="card-header">
<div class="card-title"> <div class="card-title">
<span class="offline-indicator" style="background: rgb(0,222,220); animation: pulse 2s infinite"></span> <span class="offline-indicator" style="background: ${warningCount === 0 ? 'rgb(0,255,0)' : 'rgb(255,0,0)'}; animation: pulse 2s infinite"></span>
${this.config.name || '耗材信息统计'} ${this.config.name || '耗材信息统计'}
</div> </div>
<div class="device-count ${warningCount > 0 ? 'non-zero' : 'zero'}"> <div class="device-count ${warningCount > 0 ? 'non-zero' : 'zero'}">

View File

@@ -1,4 +1,4 @@
console.info("%c 消逝卡-平板端 \n%c v 0.0.9 ", "color: red; font-weight: bold; background: black", "color: white; font-weight: bold; background: black"); console.info("%c 消逝卡-平板端 \n%c v 0.1.2 ", "color: red; font-weight: bold; background: black", "color: white; font-weight: bold; background: black");
const loadCards = async () => { const loadCards = async () => {
await import('./xiaoshi-pad-grid-card.js'); await import('./xiaoshi-pad-grid-card.js');