From f4a37ff29c314c0a3f7aa28e09a7f3815bfee70b Mon Sep 17 00:00:00 2001 From: xiaoshi <115949669+xiaoshi930@users.noreply.github.com> Date: Mon, 24 Nov 2025 14:55:54 +0800 Subject: [PATCH] Update xiaoshi-device-balance-card.js --- xiaoshi-device-balance-card.js | 237 +++++++++++++++++++++++++++++---- 1 file changed, 212 insertions(+), 25 deletions(-) diff --git a/xiaoshi-device-balance-card.js b/xiaoshi-device-balance-card.js index e302a69..f3b4b4f 100644 --- a/xiaoshi-device-balance-card.js +++ b/xiaoshi-device-balance-card.js @@ -91,6 +91,7 @@ class XiaoshiBalanceCardEditor extends LitElement { align-items: center; gap: 8px; flex: 1; + justify-content: space-between; } .entity-details { @@ -146,10 +147,14 @@ class XiaoshiBalanceCardEditor extends LitElement { margin-bottom: 8px; font-size: 12px; color: #000; + justify-content: space-between; } .attribute-config { margin-top: 4px; + display: flex; + flex-direction: column; + gap: 4px; } .attribute-input { @@ -161,6 +166,32 @@ class XiaoshiBalanceCardEditor extends LitElement { box-sizing: border-box; } + .override-config { + display: flex; + align-items: center; + gap: 4px; + margin-top: 2px; + } + + .override-checkbox { + margin-right: 4px; + } + + .override-input { + flex: 1; + padding: 2px 6px; + border: 1px solid #ddd; + border-radius: 3px; + font-size: 11px; + box-sizing: border-box; + } + + .override-label { + font-size: 11px; + color: #666; + white-space: nowrap; + } + .remove-btn { background: none; border: none; @@ -205,18 +236,7 @@ class XiaoshiBalanceCardEditor extends LitElement { /> -
- - -
+
@@ -249,11 +269,11 @@ class XiaoshiBalanceCardEditor extends LitElement { @click=${() => this._toggleEntity(entity.entity_id)} >
-
${entity.attributes.friendly_name || entity.entity_id}
${entity.entity_id}
+
${this.config.entities && this.config.entities.some(e => e.entity_id === entity.entity_id) ? html`` : ''} @@ -273,8 +293,8 @@ class XiaoshiBalanceCardEditor extends LitElement { return html`
- ${entity?.attributes.friendly_name || entityConfig.entity_id} + @@ -287,6 +307,80 @@ class XiaoshiBalanceCardEditor extends LitElement { placeholder="留空使用实体状态，或输入属性名" class="attribute-input" /> + +
+ this._updateEntityOverride(index, 'name', e.target.checked)} + .checked=${entityConfig.overrides?.name !== undefined} + /> + 名称: + this._updateEntityOverrideValue(index, 'name', e.target.value)} + .value=${entityConfig.overrides?.name || ''} + placeholder="自定义名称" + ?disabled=${entityConfig.overrides?.name === undefined} + /> +
+ +
+ this._updateEntityOverride(index, 'icon', e.target.checked)} + .checked=${entityConfig.overrides?.icon !== undefined} + /> + 图标: + this._updateEntityOverrideValue(index, 'icon', e.target.value)} + .value=${entityConfig.overrides?.icon || ''} + placeholder="mdi:icon-name" + ?disabled=${entityConfig.overrides?.icon === undefined} + /> +
+ +
+ this._updateEntityOverride(index, 'unit_of_measurement', e.target.checked)} + .checked=${entityConfig.overrides?.unit_of_measurement !== undefined} + /> + 单位: + this._updateEntityOverrideValue(index, 'unit_of_measurement', e.target.value)} + .value=${entityConfig.overrides?.unit_of_measurement || ''} + placeholder="自定义单位" + ?disabled=${entityConfig.overrides?.unit_of_measurement === undefined} + /> +
+ +
+ this._updateEntityOverride(index, 'warning', e.target.checked)} + .checked=${entityConfig.overrides?.warning !== undefined} + /> + 预警: + this._updateEntityOverrideValue(index, 'warning', e.target.value)} + .value=${entityConfig.overrides?.warning || ''} + placeholder="预警值" + min="0" + step="0.01" + ?disabled=${entityConfig.overrides?.warning === undefined} + /> +
`; @@ -294,10 +388,13 @@ class XiaoshiBalanceCardEditor extends LitElement { ` : ''}
- 搜索并选择要显示的设备余额实体，支持多选。每个实体可以配置要显示的属性：
- • 留空：显示实体的状态值
- • 输入属性名：显示指定属性的值
- • 单位会自动从实体的 unit_of_measurement 属性获取，默认为"元" + 搜索并选择要显示的设备余额实体，支持多选。每个实体可以配置：
+ • 属性名：留空使用实体状态，或输入属性名
+ • 名称重定义：勾选后可自定义显示名称
+ • 图标重定义：勾选后可自定义图标（如 mdi:phone）
+ • 单位重定义：勾选后可自定义单位（如 元、$、kWh 等）
+ • 预警值：勾选后设置预警值，低于此值显示红色
+ • 未勾选重定义时，将使用实体的原始属性值
@@ -358,7 +455,11 @@ class XiaoshiBalanceCardEditor extends LitElement { newEntities = currentEntities.filter(e => e.entity_id !== entityId); } else { // 添加实体 - newEntities = [...currentEntities, { entity_id: entityId, attribute: null }]; + newEntities = [...currentEntities, { + entity_id: entityId, + attribute: null, + overrides: undefined + }]; } this.config = { @@ -418,6 +519,69 @@ class XiaoshiBalanceCardEditor extends LitElement { this.requestUpdate(); } + _updateEntityOverride(index, overrideType, enabled) { + const currentEntities = this.config.entities || []; + const newEntities = [...currentEntities]; + + if (newEntities[index]) { + const overrides = { ...newEntities[index].overrides }; + + if (enabled) { + // 启用覆盖，设置默认值 + overrides[overrideType] = ''; + } else { + // 禁用覆盖，删除该属性 + delete overrides[overrideType]; + } + + newEntities[index] = { + ...newEntities[index], + overrides: Object.keys(overrides).length > 0 ? overrides : undefined + }; + } + + this.config = { + ...this.config, + entities: newEntities + }; + + this.dispatchEvent(new CustomEvent('config-changed', { + detail: { config: this.config }, + bubbles: true, + composed: true + })); + + this.requestUpdate(); + } + + _updateEntityOverrideValue(index, overrideType, value) { + const currentEntities = this.config.entities || []; + const newEntities = [...currentEntities]; + + if (newEntities[index] && newEntities[index].overrides && newEntities[index].overrides[overrideType] !== undefined) { + const overrides = { ...newEntities[index].overrides }; + overrides[overrideType] = value.trim(); + + newEntities[index] = { + ...newEntities[index], + overrides: overrides + }; + } + + this.config = { + ...this.config, + entities: newEntities + }; + + this.dispatchEvent(new CustomEvent('config-changed', { + detail: { config: this.config }, + bubbles: true, + composed: true + })); + + this.requestUpdate(); + } + // 点击外部关闭下拉列表 firstUpdated() { document.addEventListener('click', (e) => { @@ -619,7 +783,7 @@ class XiaoshiBalanceCard extends LitElement { } .device-icon { - margin-right: 12px; + margin-left: 12px; color: var(--fg-color, #000); flex-shrink: 0; } @@ -748,12 +912,34 @@ class XiaoshiBalanceCard extends LitElement { unit = attributes.unit_of_measurement; } + // 应用属性重定义 + let friendlyName = attributes.friendly_name || entityId; + let icon = attributes.icon || 'mdi:help-circle'; + let warningThreshold = undefined; + + // 应用用户自定义的重定义 + if (entityConfig.overrides) { + if (entityConfig.overrides.name !== undefined && entityConfig.overrides.name !== '') { + friendlyName = entityConfig.overrides.name; + } + if (entityConfig.overrides.icon !== undefined && entityConfig.overrides.icon !== '') { + icon = entityConfig.overrides.icon; + } + if (entityConfig.overrides.unit_of_measurement !== undefined && entityConfig.overrides.unit_of_measurement !== '') { + unit = entityConfig.overrides.unit_of_measurement; + } + if (entityConfig.overrides.warning !== undefined && entityConfig.overrides.warning !== '') { + warningThreshold = parseFloat(entityConfig.overrides.warning); + } + } + balanceData.push({ entity_id: entityId, - friendly_name: attributes.friendly_name || entityId, + friendly_name: friendlyName, value: value, unit: unit, - icon: attributes.icon || 'mdi:help-circle' + icon: icon, + warning_threshold: warningThreshold }); } @@ -808,15 +994,16 @@ class XiaoshiBalanceCard extends LitElement { html`
请配置余额实体
` : html` ${this._oilPriceData.map(balanceData => { - const warningThreshold = this.config.warning || 20; const numericValue = parseFloat(balanceData.value); - const isWarning = !isNaN(numericValue) && numericValue < warningThreshold; + const isWarning = balanceData.warning_threshold !== undefined && + !isNaN(numericValue) && + numericValue < balanceData.warning_threshold; return html`
this._handleEntityClick(balanceData)}>
-
${balanceData.friendly_name}
+
${balanceData.value}