mirror of
https://git.beihong.wang/wangbeihong/iot-bedroom-environment-controller.git
synced 2026-04-23 11:53:03 +08:00
235 lines
12 KiB
Plaintext
235 lines
12 KiB
Plaintext
<wxs module="utils">
|
|
// utils.wxs
|
|
var formatState = function(value) {
|
|
if(value === true || value === 1 || value === "1" || value === "on" || value === "open") {
|
|
return "开启";
|
|
} else if(value === false || value === 0 || value === "0" || value === "off" || value === "close") {
|
|
return "关闭";
|
|
} else {
|
|
return "--";
|
|
}
|
|
}
|
|
|
|
module.exports = {
|
|
formatState: formatState
|
|
}
|
|
|
|
</wxs>
|
|
|
|
<van-nav-bar title="控制页面" fixed placeholder safe-area-inset-top />
|
|
<van-notice-bar left-icon="volume-o" text="必须确定已经添加了真实的设备。" />
|
|
|
|
<van-tabs active="{{ active }}" bind:change="onChange" swipeable animated>
|
|
|
|
<!-- 传感器数据 -->
|
|
<van-tab title="传感器数据">
|
|
<scroll-view scroll-y class="tab-scroll" style="height: 600px;">
|
|
<van-cell-group inset title="环境数据">
|
|
<van-cell title="温度" value="{{temperature != null ? temperature + '°C' : '--'}}" />
|
|
<van-cell title="湿度" value="{{humidity != null ? humidity + '%' : '--'}}" />
|
|
<van-cell title="光照强度" value="{{light_intensity != null ? light_intensity + 'lx' : '--'}}" />
|
|
<van-cell title="空气质量" value="{{air_quality != null ? air_quality + 'Index':'--'}}" />
|
|
</van-cell-group>
|
|
|
|
<van-cell-group inset title="控制状态">
|
|
<van-cell title="窗帘状态" value="{{utils.formatState(esp32Device && esp32Device.telemetry ? esp32Device.telemetry.curtain_state : null)}}" />
|
|
<van-cell title="警报状态" value="{{utils.formatState(esp32Device && esp32Device.telemetry ? esp32Device.telemetry.buzzer_state : null)}}" />
|
|
<van-cell title="风扇状态" value="{{utils.formatState(esp32Device && esp32Device.telemetry ? esp32Device.telemetry.fan_state : null)}}" />
|
|
<van-cell title="灯光状态" value="{{utils.formatState(esp32Device && esp32Device.telemetry ? esp32Device.telemetry.led_state : null)}}" />
|
|
</van-cell-group>
|
|
|
|
<van-cell-group inset title="设备功率">
|
|
<van-cell title="灯光功率" value="{{led_power != null ? led_power + '%' : '--'}}" />
|
|
</van-cell-group>
|
|
|
|
<van-cell-group inset title="控制参数">
|
|
<van-cell title="设备状态">
|
|
<van-tag slot="right-icon" type="{{deviceOnline ? 'success' : 'danger'}}">{{deviceOnline ? '在线' : '离线'}}</van-tag>
|
|
</van-cell>
|
|
<van-cell title="最后更新" value="{{lastUpdateTime || '--'}}" />
|
|
</van-cell-group>
|
|
|
|
<view style="height: env(safe-area-inset-bottom);" />
|
|
</scroll-view>
|
|
</van-tab>
|
|
|
|
<!-- 物理设备控制 -->
|
|
<van-tab title="物理设备控制">
|
|
<scroll-view scroll-y class="tab-scroll" style="height: 600px;">
|
|
<van-grid direction="horizontal" column-num="2" >
|
|
<van-grid-item use-slot >
|
|
|
|
<text>风扇开关</text>
|
|
<van-switch checked="{{switch1}}" bind:change="onSwitch1Change" />
|
|
|
|
</van-grid-item>
|
|
<van-grid-item use-slot>
|
|
|
|
<text>窗帘开关</text>
|
|
<van-switch checked="{{switch2}}" bind:change="onSwitch2Change" />
|
|
|
|
</van-grid-item>
|
|
<van-grid-item use-slot>
|
|
|
|
<text>警报开关</text>
|
|
<van-switch checked="{{switch3}}" bind:change="onSwitch3Change" />
|
|
|
|
</van-grid-item>
|
|
<van-grid-item use-slot>
|
|
|
|
<text>灯光开关</text>
|
|
<van-switch checked="{{switch4}}" bind:change="onSwitch4Change" />
|
|
|
|
</van-grid-item>
|
|
</van-grid>
|
|
|
|
<view class="slider-container">
|
|
<van-tag plain type="primary">灯光功率控制</van-tag>
|
|
<van-slider value="{{led_power_value}}" bind:change="led_powerChange">
|
|
<view class="slider-btn">{{led_power_value}}%</view>
|
|
</van-slider>
|
|
</view>
|
|
|
|
<view style="height: env(safe-area-inset-bottom);" />
|
|
</scroll-view>
|
|
</van-tab>
|
|
|
|
<!-- 模式设置 -->
|
|
<van-tab title="模式设置">
|
|
<scroll-view scroll-y class="tab-scroll" style="height: 600px;">
|
|
<!-- 闹钟设置 -->
|
|
<van-cell-group inset title="闹钟设置">
|
|
<!-- 闹钟1 -->
|
|
<van-cell title="起床时间" icon="clock-o" use-slot>
|
|
<view slot="right-icon" class="alarm-cell-right">
|
|
<view class="alarm-time" bindtap="onAlarmTimeClick" data-alarm="1">
|
|
<text class="time-text">{{alarm1.time}}</text>
|
|
<van-icon name="arrow-down" size="14px" color="#969799" />
|
|
</view>
|
|
<van-switch checked="{{alarm1.enabled}}" bind:change="onAlarmEnableChange" data-alarm="1" size="24px" />
|
|
</view>
|
|
</van-cell>
|
|
<!-- 闹钟2 -->
|
|
<van-cell title="闹钟2" icon="clock-o" use-slot>
|
|
<view slot="right-icon" class="alarm-cell-right">
|
|
<view class="alarm-time" bindtap="onAlarmTimeClick" data-alarm="2">
|
|
<text class="time-text">{{alarm2.time}}</text>
|
|
<van-icon name="arrow-down" size="14px" color="#969799" />
|
|
</view>
|
|
<van-switch checked="{{alarm2.enabled}}" bind:change="onAlarmEnableChange" data-alarm="2" size="24px" />
|
|
</view>
|
|
</van-cell>
|
|
<!-- 闹钟3 -->
|
|
<van-cell title="闹钟3" icon="clock-o" use-slot>
|
|
<view slot="right-icon" class="alarm-cell-right">
|
|
<view class="alarm-time" bindtap="onAlarmTimeClick" data-alarm="3">
|
|
<text class="time-text">{{alarm3.time}}</text>
|
|
<van-icon name="arrow-down" size="14px" color="#969799" />
|
|
</view>
|
|
<van-switch checked="{{alarm3.enabled}}" bind:change="onAlarmEnableChange" data-alarm="3" size="24px" />
|
|
</view>
|
|
</van-cell>
|
|
</van-cell-group>
|
|
|
|
<!-- 时间段设置 -->
|
|
<van-cell-group inset title="时间段设置" custom-class="period-group">
|
|
<!-- 白天时间 -->
|
|
<van-cell title="白天时间" icon="sun-o" use-slot label="设置白天的起始和结束时间">
|
|
<view slot="right-icon" class="period-cell-right">
|
|
<view class="period-time-row">
|
|
<view class="period-time-label">开始</view>
|
|
<view class="period-time-value" bindtap="onPeriodTimeClick" data-period="day" data-type="start">
|
|
<text>{{dayPeriod.start}}</text>
|
|
<van-icon name="arrow-down" size="12px" color="#969799" />
|
|
</view>
|
|
</view>
|
|
<view class="period-time-row">
|
|
<view class="period-time-label">结束</view>
|
|
<view class="period-time-value" bindtap="onPeriodTimeClick" data-period="day" data-type="end">
|
|
<text>{{dayPeriod.end}}</text>
|
|
<van-icon name="arrow-down" size="12px" color="#969799" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</van-cell>
|
|
<!-- 晚上时间 -->
|
|
<van-cell title="晚上时间" icon="moon-o" use-slot label="设置夜晚的起始和结束时间">
|
|
<view slot="right-icon" class="period-cell-right">
|
|
<view class="period-time-row">
|
|
<view class="period-time-label">开始</view>
|
|
<view class="period-time-value" bindtap="onPeriodTimeClick" data-period="night" data-type="start">
|
|
<text>{{nightPeriod.start}}</text>
|
|
<van-icon name="arrow-down" size="12px" color="#969799" />
|
|
</view>
|
|
</view>
|
|
<view class="period-time-row">
|
|
<view class="period-time-label">结束</view>
|
|
<view class="period-time-value" bindtap="onPeriodTimeClick" data-period="night" data-type="end">
|
|
<text>{{nightPeriod.end}}</text>
|
|
<van-icon name="arrow-down" size="12px" color="#969799" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</van-cell>
|
|
<!-- 下发按钮 -->
|
|
<van-cell use-slot custom-class="period-action-cell">
|
|
<van-button type="info" size="small" bind:click="sendPeriodControlCommand" icon="guide-o">
|
|
下发时间段设置
|
|
</van-button>
|
|
</van-cell>
|
|
</van-cell-group>
|
|
|
|
<!-- 温度阈值设置 -->
|
|
<van-cell-group inset title="温度阈值设置" custom-class="threshold-group">
|
|
<van-cell title="自动降温温度" icon="fire-o" use-slot label="当温度超过此值时自动开启降温模式">
|
|
<view slot="right-icon" class="threshold-value">
|
|
<text class="threshold-temp">{{temperatureThreshold}}°C</text>
|
|
</view>
|
|
</van-cell>
|
|
<view class="slider-container">
|
|
<van-slider
|
|
value="{{temperatureThreshold}}"
|
|
bind:change="onTemperatureThresholdChange"
|
|
min="20"
|
|
max="40"
|
|
step="1"
|
|
bar-height="4px"
|
|
active-color="#ee0a24"
|
|
/>
|
|
<view class="slider-marks">
|
|
<text>20°C</text>
|
|
<text>30°C</text>
|
|
<text>40°C</text>
|
|
</view>
|
|
</view>
|
|
<!-- 下发按钮 -->
|
|
<van-cell use-slot custom-class="threshold-action-cell">
|
|
<van-button type="danger" size="small" bind:click="sendTemperatureThresholdCommand" icon="warning-o">
|
|
下发温度阈值设置
|
|
</van-button>
|
|
</van-cell>
|
|
</van-cell-group>
|
|
|
|
<!-- 时间选择器 -->
|
|
<van-popup show="{{showTimePicker}}" position="bottom" bind:close="onTimePickerClose" custom-style="background: #fff;">
|
|
<view class="time-picker-header">
|
|
<text class="time-picker-title">选择时间</text>
|
|
<van-icon name="cross" size="20px" color="#969799" bind:click="onTimePickerClose" />
|
|
</view>
|
|
<picker-view class="time-picker-view" value="{{timePickerValue}}" bind:change="onTimePickerChange">
|
|
<picker-view-column>
|
|
<view wx:for="{{hours}}" wx:key="*this" class="picker-column-item">{{item}}时</view>
|
|
</picker-view-column>
|
|
<picker-view-column>
|
|
<view wx:for="{{minutes}}" wx:key="*this" class="picker-column-item">{{item}}分</view>
|
|
</picker-view-column>
|
|
</picker-view>
|
|
<view class="time-picker-btn" bind:tap="onTimePickerConfirm">确定</view>
|
|
</van-popup>
|
|
|
|
<view style="height: env(safe-area-inset-bottom);" />
|
|
</scroll-view>
|
|
</van-tab>
|
|
|
|
</van-tabs>
|