218 lines
7.3 KiB
Vue
218 lines
7.3 KiB
Vue
|
<template>
|
||
|
|
<view class="container">
|
||
|
|
<!-- 场景头部 -->
|
||
|
|
<view class="scene-header" :style="{background: scene.color}">
|
||
|
|
<view class="scene-icon">
|
||
|
|
<text>{{scene.icon}}</text>
|
||
|
|
</view>
|
||
|
|
<text class="scene-name">{{scene.name}}</text>
|
||
|
|
<text class="scene-desc">{{scene.devices.length}}个设备</text>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<!-- 一键执行 -->
|
||
|
|
<view class="quick-action">
|
||
|
|
<view class="execute-btn" @click="executeAll">
|
||
|
|
<text class="execute-icon">▶</text>
|
||
|
|
<text class="execute-text">一键执行场景</text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<!-- 设备控制列表 -->
|
||
|
|
<view class="device-section">
|
||
|
|
<text class="section-title">设备控制</text>
|
||
|
|
|
||
|
|
<view class="device-card" v-for="device in scene.devices" :key="device.id">
|
||
|
|
<view class="device-header">
|
||
|
|
<text class="device-icon">{{device.icon}}</text>
|
||
|
|
<view class="device-info">
|
||
|
|
<text class="device-name">{{device.name}}</text>
|
||
|
|
<text class="device-status" :class="device.state ? 'on' : 'off'">
|
||
|
|
{{device.state ? '已开启' : '已关闭'}}
|
||
|
|
</text>
|
||
|
|
</view>
|
||
|
|
<switch :checked="device.state" @change="toggleDevice(device)" :color="scene.color" />
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<!-- 空调额外控制 -->
|
||
|
|
<view class="device-extra" v-if="device.type === 'ac' && device.state">
|
||
|
|
<view class="extra-row">
|
||
|
|
<text class="extra-label">温度</text>
|
||
|
|
<view class="temp-control">
|
||
|
|
<text class="temp-btn" @click="adjustTemp(device, -1)">-</text>
|
||
|
|
<text class="temp-value">{{device.temp || 26}}°C</text>
|
||
|
|
<text class="temp-btn" @click="adjustTemp(device, 1)">+</text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="extra-row">
|
||
|
|
<text class="extra-label">模式</text>
|
||
|
|
<view class="mode-options">
|
||
|
|
<view
|
||
|
|
:class="['mode-btn', device.mode === m ? 'active' : '']"
|
||
|
|
v-for="m in ['制冷', '制热', '除湿', '送风']"
|
||
|
|
:key="m"
|
||
|
|
@click="setMode(device, m)"
|
||
|
|
>
|
||
|
|
<text>{{m}}</text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<!-- 进入详细控制 -->
|
||
|
|
<view class="device-footer" @click="goToControl(device)">
|
||
|
|
<text>更多控制</text>
|
||
|
|
<text class="arrow">></text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<!-- 编辑场景 -->
|
||
|
|
<view class="edit-btn" @click="editScene">
|
||
|
|
<text>编辑场景</text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
sceneId: '',
|
||
|
|
scene: {
|
||
|
|
id: '',
|
||
|
|
name: '场景',
|
||
|
|
icon: 'A',
|
||
|
|
color: '#3498DB',
|
||
|
|
devices: []
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
onLoad(options) {
|
||
|
|
if (options.id) {
|
||
|
|
this.sceneId = options.id
|
||
|
|
this.loadScene()
|
||
|
|
}
|
||
|
|
},
|
||
|
|
onShow() {
|
||
|
|
if (this.sceneId) {
|
||
|
|
this.loadScene()
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
loadScene() {
|
||
|
|
const scenes = JSON.parse(uni.getStorageSync('scenes') || '[]')
|
||
|
|
const found = scenes.find(s => s.id === this.sceneId)
|
||
|
|
if (found) {
|
||
|
|
// 为每个设备添加状态
|
||
|
|
this.scene = {
|
||
|
|
...found,
|
||
|
|
devices: found.devices.map(d => ({
|
||
|
|
...d,
|
||
|
|
state: d.action === 'on',
|
||
|
|
temp: d.temp || 26,
|
||
|
|
mode: d.mode || '制冷'
|
||
|
|
}))
|
||
|
|
}
|
||
|
|
uni.setNavigationBarTitle({ title: this.scene.name })
|
||
|
|
}
|
||
|
|
},
|
||
|
|
executeAll() {
|
||
|
|
uni.showLoading({ title: '执行中...' })
|
||
|
|
|
||
|
|
// 执行所有设备的预设动作
|
||
|
|
this.scene.devices.forEach(device => {
|
||
|
|
device.state = device.action === 'on'
|
||
|
|
this.sendCommand(device)
|
||
|
|
})
|
||
|
|
|
||
|
|
setTimeout(() => {
|
||
|
|
uni.hideLoading()
|
||
|
|
uni.showToast({ title: '场景已执行', icon: 'success' })
|
||
|
|
}, 1000)
|
||
|
|
},
|
||
|
|
toggleDevice(device) {
|
||
|
|
device.state = !device.state
|
||
|
|
this.sendCommand(device)
|
||
|
|
},
|
||
|
|
adjustTemp(device, delta) {
|
||
|
|
device.temp = Math.max(16, Math.min(30, (device.temp || 26) + delta))
|
||
|
|
this.sendCommand(device)
|
||
|
|
},
|
||
|
|
setMode(device, mode) {
|
||
|
|
device.mode = mode
|
||
|
|
this.sendCommand(device)
|
||
|
|
},
|
||
|
|
sendCommand(device) {
|
||
|
|
// 发送命令到ESP32
|
||
|
|
console.log(`发送命令: ${device.name}, 状态: ${device.state}, 温度: ${device.temp}, 模式: ${device.mode}`)
|
||
|
|
// uni.request({
|
||
|
|
// url: `http://${esp32_ip}/device/control`,
|
||
|
|
// method: 'POST',
|
||
|
|
// data: { deviceId: device.id, state: device.state, temp: device.temp, mode: device.mode }
|
||
|
|
// })
|
||
|
|
},
|
||
|
|
goToControl(device) {
|
||
|
|
const typeMap = {
|
||
|
|
'ir-switch': '/pages/control/ir-switch',
|
||
|
|
'ac': '/pages/control/ac',
|
||
|
|
'rf433': '/pages/control/rf433',
|
||
|
|
'gas-valve': '/pages/control/gas-valve'
|
||
|
|
}
|
||
|
|
const url = typeMap[device.type]
|
||
|
|
if (url) {
|
||
|
|
uni.navigateTo({ url: url + '?deviceId=' + device.id })
|
||
|
|
}
|
||
|
|
},
|
||
|
|
editScene() {
|
||
|
|
uni.navigateTo({ url: '/pages/scene/edit?mode=edit&id=' + this.sceneId })
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
.container { min-height: 100vh; background: #f5f5f5; padding-bottom: 100rpx; }
|
||
|
|
|
||
|
|
.scene-header { padding: 60rpx 30rpx; text-align: center; }
|
||
|
|
.scene-icon { width: 120rpx; height: 120rpx; background: rgba(255,255,255,0.2); border-radius: 24rpx; margin: 0 auto 20rpx; display: flex; align-items: center; justify-content: center; }
|
||
|
|
.scene-icon text { font-size: 60rpx; color: #fff; }
|
||
|
|
.scene-name { font-size: 40rpx; font-weight: bold; color: #fff; display: block; }
|
||
|
|
.scene-desc { font-size: 26rpx; color: rgba(255,255,255,0.8); margin-top: 8rpx; display: block; }
|
||
|
|
|
||
|
|
.quick-action { padding: 20rpx; margin-top: -40rpx; }
|
||
|
|
.execute-btn { background: #fff; border-radius: 16rpx; padding: 30rpx; display: flex; align-items: center; justify-content: center; box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.1); }
|
||
|
|
.execute-icon { font-size: 36rpx; color: #27AE60; margin-right: 16rpx; }
|
||
|
|
.execute-text { font-size: 32rpx; font-weight: bold; color: #333; }
|
||
|
|
|
||
|
|
.device-section { padding: 0 20rpx; }
|
||
|
|
.section-title { font-size: 28rpx; color: #666; margin-bottom: 16rpx; display: block; padding-left: 10rpx; }
|
||
|
|
|
||
|
|
.device-card { background: #fff; border-radius: 16rpx; margin-bottom: 20rpx; overflow: hidden; }
|
||
|
|
.device-header { display: flex; align-items: center; padding: 24rpx; }
|
||
|
|
.device-icon { font-size: 48rpx; margin-right: 16rpx; }
|
||
|
|
.device-info { flex: 1; }
|
||
|
|
.device-name { font-size: 30rpx; font-weight: 500; color: #333; display: block; }
|
||
|
|
.device-status { font-size: 24rpx; margin-top: 4rpx; display: block; }
|
||
|
|
.device-status.on { color: #27AE60; }
|
||
|
|
.device-status.off { color: #999; }
|
||
|
|
|
||
|
|
.device-extra { padding: 0 24rpx 24rpx; border-top: 1rpx solid #f0f0f0; }
|
||
|
|
.extra-row { display: flex; align-items: center; margin-top: 20rpx; }
|
||
|
|
.extra-label { font-size: 26rpx; color: #666; width: 80rpx; }
|
||
|
|
.temp-control { display: flex; align-items: center; gap: 20rpx; }
|
||
|
|
.temp-btn { width: 56rpx; height: 56rpx; background: #f5f5f5; border-radius: 50%; text-align: center; line-height: 56rpx; font-size: 32rpx; color: #333; }
|
||
|
|
.temp-value { font-size: 32rpx; font-weight: bold; color: #3498DB; min-width: 100rpx; text-align: center; }
|
||
|
|
.mode-options { display: flex; gap: 12rpx; flex: 1; }
|
||
|
|
.mode-btn { padding: 12rpx 20rpx; background: #f5f5f5; border-radius: 8rpx; }
|
||
|
|
.mode-btn.active { background: rgba(52,152,219,0.1); }
|
||
|
|
.mode-btn text { font-size: 24rpx; color: #666; }
|
||
|
|
.mode-btn.active text { color: #3498DB; }
|
||
|
|
|
||
|
|
.device-footer { display: flex; justify-content: space-between; align-items: center; padding: 20rpx 24rpx; background: #fafafa; }
|
||
|
|
.device-footer text { font-size: 26rpx; color: #3498DB; }
|
||
|
|
.arrow { color: #ccc; }
|
||
|
|
|
||
|
|
.edit-btn { margin: 20rpx; padding: 28rpx; background: #fff; border-radius: 16rpx; text-align: center; }
|
||
|
|
.edit-btn text { font-size: 30rpx; color: #3498DB; }
|
||
|
|
</style>
|