forked from HomeAssistant/xiaoshi-pad-card
Compare commits
8 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
f768186379 | ||
|
|
2371475eca | ||
|
|
befca5ece5 | ||
|
|
24848db29b | ||
|
|
be232dc056 | ||
|
|
96fb548262 | ||
|
|
16831e5102 | ||
|
|
b05f7de548 |
26
README.md
26
README.md
@@ -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
|
||||||
|
~~~
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@@ -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 = {
|
||||||
|
|||||||
@@ -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'}">
|
||||||
|
|||||||
@@ -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');
|
||||||
|
|||||||
Reference in New Issue
Block a user