1111
This commit is contained in:
fuenmao
@@ -13,7 +13,7 @@ const transition = computed(() => lightTransitionForDevice(props.device, lightTr
|
||||
<template>
|
||||
<StandardLightCard :device="device" category-label="卧室灯光"
|
||||
:reported-brightness="transition?.running ? transition.brightnessPercent : undefined"
|
||||
note="手动调节会停止当前渐变；本灯保留助眠、唤醒及灯灭停止按摩的专属联动。">
|
||||
note="手动调节会停止当前渐变；本灯支持助眠渐暗和晨起唤醒。">
|
||||
<template #before-controls>
|
||||
<div class="light-mode-panel">
|
||||
<div>
|
||||
|
||||
@@ -1,155 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { toRefs } from 'vue'
|
||||
import { Slider as VanSlider } from 'vant'
|
||||
import type { HomeAssistantDiscoveredDevice } from '../../services/health'
|
||||
import { useDeviceControlContext } from '../../devices/controlContext'
|
||||
import { useDeviceCardState } from '../../devices/useDeviceCardState'
|
||||
const props = defineProps<{ device: HomeAssistantDiscoveredDevice }>()
|
||||
const { device: mattressDevice } = toRefs(props)
|
||||
const { localParams, operationBusy, applyParam, mattressComfort, mattressActiveSide, mattressModeOptions, setMattressMode, setMattressSelect, mattressFirmnessOptions, mattressFirmnessZones, massagePartOptions } = useDeviceControlContext()
|
||||
const state = useDeviceCardState(() => props.device)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="device-card" v-if="mattressDevice">
|
||||
<div class="device-head">
|
||||
<div class="dev-info">
|
||||
<span class="category-tag">智能承托与温控</span>
|
||||
<h3>{{ mattressDevice.name }}</h3>
|
||||
<span class="status-dot" :class="{ online: mattressDevice.online }">
|
||||
{{ mattressDevice.online ? '设备在线' : '设备离线' }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="params-body">
|
||||
<div class="mattress-recommendation">
|
||||
<strong>室内温度与 BMI 床垫建议</strong>
|
||||
<p>{{ mattressComfort?.heatingReason || '室温建议读取中' }}</p>
|
||||
<p>{{ mattressComfort?.firmnessReason || 'BMI 建议读取中' }}</p>
|
||||
<small v-if="mattressComfort?.indoorTemperatureAvailable">
|
||||
当前室温 {{ mattressComfort.indoorTemperatureCelsius }}℃
|
||||
</small>
|
||||
<small>下次一键启动使用当前建议；下面显示设备读数，可手动覆盖。</small>
|
||||
</div>
|
||||
<!-- 左侧加热档位 -->
|
||||
<div class="param-row">
|
||||
<div class="param-header">
|
||||
<span class="p-title">左侧加热档位</span>
|
||||
<strong class="p-val">{{ state.display('mattress_left_heating', localParams.mattressLeftHeating, ' 档') }}</strong>
|
||||
</div>
|
||||
<VanSlider
|
||||
v-model="localParams.mattressLeftHeating"
|
||||
:min="0"
|
||||
:max="4"
|
||||
:step="1"
|
||||
:disabled="operationBusy || !state.available('mattress_left_heating')"
|
||||
active-color="#d66927"
|
||||
@change="applyParam(mattressDevice.deviceId, 'mattress_left_heating', localParams.mattressLeftHeating)"
|
||||
/>
|
||||
<div class="slider-scale">
|
||||
<span>0 关闭</span>
|
||||
<span>2 舒适</span>
|
||||
<span>4 强加热</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 右侧加热档位 -->
|
||||
<div class="param-row">
|
||||
<div class="param-header">
|
||||
<span class="p-title">右侧加热档位</span>
|
||||
<strong class="p-val">{{ state.display('mattress_right_heating', localParams.mattressRightHeating, ' 档') }}</strong>
|
||||
</div>
|
||||
<VanSlider
|
||||
v-model="localParams.mattressRightHeating"
|
||||
:min="0"
|
||||
:max="4"
|
||||
:step="1"
|
||||
:disabled="operationBusy || !state.available('mattress_right_heating')"
|
||||
active-color="#d66927"
|
||||
@change="applyParam(mattressDevice.deviceId, 'mattress_right_heating', localParams.mattressRightHeating)"
|
||||
/>
|
||||
<div class="slider-scale">
|
||||
<span>0 关闭</span>
|
||||
<span>2 舒适</span>
|
||||
<span>4 强加热</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="param-row">
|
||||
<p class="mattress-mode-note">
|
||||
左右可分别预选模式，但共用气泵，同一时间仅最近启动的一侧实际运行；另一侧保留预选，处于待机状态。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="param-row">
|
||||
<span class="p-title">左侧承托模式 · {{ !state.readable('mattress_left_mode') ? '状态未确认（保留预选）' : mattressActiveSide === 'left' ? '运行中' : '预选待机' }}</span>
|
||||
<div class="btn-group mattress-mode-buttons">
|
||||
<button
|
||||
v-for="mode in mattressModeOptions"
|
||||
:key="`left-${mode}`"
|
||||
:class="{ active: localParams.mattressLeftMode === mode, running: state.readable('mattress_left_mode') && mattressActiveSide === 'left' && localParams.mattressLeftMode === mode }"
|
||||
:disabled="operationBusy || !state.available('mattress_left_mode')"
|
||||
@click="setMattressMode('left', mode)"
|
||||
>{{ mode }}</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="param-row">
|
||||
<span class="p-title">右侧承托模式 · {{ !state.readable('mattress_right_mode') ? '状态未确认（保留预选）' : mattressActiveSide === 'right' ? '运行中' : '预选待机' }}</span>
|
||||
<div class="btn-group mattress-mode-buttons">
|
||||
<button
|
||||
v-for="mode in mattressModeOptions"
|
||||
:key="`right-${mode}`"
|
||||
:class="{ active: localParams.mattressRightMode === mode, running: state.readable('mattress_right_mode') && mattressActiveSide === 'right' && localParams.mattressRightMode === mode }"
|
||||
:disabled="operationBusy || !state.available('mattress_right_mode')"
|
||||
@click="setMattressMode('right', mode)"
|
||||
>{{ mode }}</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<details class="mattress-advanced">
|
||||
<summary>分区软硬度与按摩调节</summary>
|
||||
<p class="mattress-mode-note">软硬度按左、右各 6 个部位独立设置；BMI 只给出演示起点，并非医学建议。选择按摩部位可能让床垫立即动作。</p>
|
||||
<div v-for="zone in mattressFirmnessZones" :key="zone.key" class="mattress-select-row">
|
||||
<label :for="`firmness-${zone.key}`">{{ zone.label }}软硬度</label>
|
||||
<select :id="`firmness-${zone.key}`"
|
||||
:value="state.readable(`mattress_firmness_${zone.key}`) ? localParams.mattressFirmness[zone.key] || '' : ''"
|
||||
:disabled="operationBusy || !state.available(`mattress_firmness_${zone.key}`)"
|
||||
@change="setMattressSelect(`mattress_firmness_${zone.key}`, $event)">
|
||||
<option value="" disabled>状态未确认</option>
|
||||
<option v-for="level in mattressFirmnessOptions" :key="level" :value="level">{{ level }}</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="mattress-select-row">
|
||||
<label for="massage-left-part">左侧按摩部位</label>
|
||||
<select id="massage-left-part" :value="state.readable('mattress_massage_left_part') ? localParams.mattressMassageLeftPart : ''"
|
||||
:disabled="operationBusy || !state.available('mattress_massage_left_part')"
|
||||
@change="setMattressSelect('mattress_massage_left_part', $event)">
|
||||
<option value="" disabled>状态未确认</option>
|
||||
<option v-for="part in massagePartOptions" :key="part" :value="part">{{ part }}</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="mattress-select-row">
|
||||
<label for="massage-right-part">右侧按摩部位</label>
|
||||
<select id="massage-right-part" :value="state.readable('mattress_massage_right_part') ? localParams.mattressMassageRightPart : ''"
|
||||
:disabled="operationBusy || !state.available('mattress_massage_right_part')"
|
||||
@change="setMattressSelect('mattress_massage_right_part', $event)">
|
||||
<option value="" disabled>状态未确认</option>
|
||||
<option v-for="part in massagePartOptions" :key="part" :value="part">{{ part }}</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="mattress-select-row">
|
||||
<label for="massage-level">按摩力度</label>
|
||||
<select id="massage-level" :value="state.readable('mattress_massage_level') ? localParams.mattressMassageLevel : ''"
|
||||
:disabled="operationBusy || !state.available('mattress_massage_level')"
|
||||
@change="setMattressSelect('mattress_massage_level', $event)">
|
||||
<option value="" disabled>状态未确认</option>
|
||||
<option value="轻柔">轻柔</option>
|
||||
<option value="强劲">强劲</option>
|
||||
</select>
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
Reference in New Issue
Block a user