智能空调调试页
This commit is contained in:
parent
f858a4ce13
commit
c194816daa
|
|
@ -0,0 +1,414 @@
|
|||
<template>
|
||||
<div class="aircon-control-panel">
|
||||
<a-card title="空调智能控制面板" :bordered="false" class="control-card">
|
||||
<!-- 电源开关区域 -->
|
||||
<div class="power-section">
|
||||
<div class="power-label">电源状态</div>
|
||||
<a-switch
|
||||
v-model:checked="powerState"
|
||||
:checked-children="'开'"
|
||||
:un-checked-children="'关'"
|
||||
:loading="submitting"
|
||||
size="large"
|
||||
@change="handlePowerChange"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 主要控制区域 -->
|
||||
<div class="main-controls">
|
||||
<!-- 模式选择 -->
|
||||
<div class="control-item">
|
||||
<div class="control-label">
|
||||
<span class="label-icon">❄️</span>
|
||||
运行模式
|
||||
</div>
|
||||
<div class="mode-buttons">
|
||||
<a-button
|
||||
v-for="mode in modeOptions"
|
||||
:key="mode.value"
|
||||
:type="currentMode === mode.value ? 'primary' : 'default'"
|
||||
:class="{ 'mode-active': currentMode === mode.value }"
|
||||
@click="setMode(mode.value)"
|
||||
:disabled="submitting"
|
||||
>
|
||||
{{ mode.label }}
|
||||
</a-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 温度调节 -->
|
||||
<div class="control-item">
|
||||
<div class="control-label">
|
||||
<span class="label-icon">🌡️</span>
|
||||
温度设置
|
||||
</div>
|
||||
<div class="temp-control">
|
||||
<a-button
|
||||
shape="circle"
|
||||
@click="adjustTemp(-1)"
|
||||
:disabled="submitting || currentTemp <= 16"
|
||||
>
|
||||
<minus-outlined />
|
||||
</a-button>
|
||||
<div class="temp-value">
|
||||
<span class="temp-number">{{ currentTemp }}</span>
|
||||
<span class="temp-unit">°C</span>
|
||||
</div>
|
||||
<a-button
|
||||
shape="circle"
|
||||
@click="adjustTemp(1)"
|
||||
:disabled="submitting || currentTemp >= 32"
|
||||
>
|
||||
<plus-outlined />
|
||||
</a-button>
|
||||
</div>
|
||||
<!-- <div class="temp-range">
|
||||
<a-slider
|
||||
v-model:value="currentTemp"
|
||||
:min="16"
|
||||
:max="32"
|
||||
:step="1"
|
||||
:disabled="submitting"
|
||||
@change="handleTempChange"
|
||||
/>
|
||||
</div> -->
|
||||
</div>
|
||||
|
||||
<!-- 风速选择 -->
|
||||
<div class="control-item">
|
||||
<div class="control-label">
|
||||
<span class="label-icon">💨</span>
|
||||
风速设置
|
||||
</div>
|
||||
<div class="wind-buttons">
|
||||
<a-radio-group
|
||||
v-model:value="currentWind"
|
||||
button-style="solid"
|
||||
:disabled="submitting"
|
||||
@change="handleWindChange"
|
||||
>
|
||||
<a-radio-button value="0">自动</a-radio-button>
|
||||
<a-radio-button value="1">低风</a-radio-button>
|
||||
<a-radio-button value="2">中风</a-radio-button>
|
||||
<a-radio-button value="3">高风</a-radio-button>
|
||||
</a-radio-group>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 状态显示区域 -->
|
||||
<div class="status-area">
|
||||
<a-alert
|
||||
v-if="lastCommandStatus"
|
||||
:type="lastCommandStatus.type"
|
||||
:message="lastCommandStatus.message"
|
||||
show-icon
|
||||
closable
|
||||
@close="clearStatus"
|
||||
/>
|
||||
</div>
|
||||
</a-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import { message } from 'ant-design-vue';
|
||||
import { contlkTApi } from './znkt.api';
|
||||
import { MinusOutlined, PlusOutlined } from '@ant-design/icons-vue';
|
||||
|
||||
// 固定参数
|
||||
const infraredId = '6c85ba17bc5358ae8fycih';
|
||||
const remoteId = '6c36cb2d2c352683bfnsm1';
|
||||
|
||||
// UI状态
|
||||
const powerState = ref(false);
|
||||
const currentMode = ref(0); // 0-制冷，1-制热，2-自动，3-送风，4-除湿
|
||||
const currentTemp = ref(24);
|
||||
const currentWind = ref('0'); // 0-自动，1-低，2-中，3-高
|
||||
const submitting = ref(false);
|
||||
const lastCommandStatus = ref(null);
|
||||
|
||||
// 模式选项
|
||||
const modeOptions = [
|
||||
{ value: 0, label: '制冷' },
|
||||
{ value: 1, label: '制热' },
|
||||
{ value: 3, label: '送风' },
|
||||
];
|
||||
|
||||
// 清除状态消息
|
||||
const clearStatus = () => {
|
||||
lastCommandStatus.value = null;
|
||||
};
|
||||
|
||||
// 显示状态消息
|
||||
const showStatus = (type, msg) => {
|
||||
lastCommandStatus.value = {
|
||||
type,
|
||||
message: msg
|
||||
};
|
||||
// 3秒后自动清除
|
||||
setTimeout(() => {
|
||||
if (lastCommandStatus.value && lastCommandStatus.value.message === msg) {
|
||||
clearStatus();
|
||||
}
|
||||
}, 3000);
|
||||
};
|
||||
|
||||
// 构建请求参数（所有参数都是地址参数/查询参数）
|
||||
const buildRequestParams = () => {
|
||||
// 基础必填参数
|
||||
const params = {
|
||||
infraredId: infraredId,
|
||||
remoteId: remoteId,
|
||||
power: powerState.value ? 1 : 0
|
||||
};
|
||||
|
||||
// 开机时，如果 mode、temp、wind 有值，则携带
|
||||
if (powerState.value) {
|
||||
if (currentMode.value !== undefined && currentMode.value !== null) {
|
||||
params.mode = currentMode.value;
|
||||
}
|
||||
if (currentTemp.value !== undefined && currentTemp.value !== null) {
|
||||
params.temp = currentTemp.value;
|
||||
}
|
||||
if (currentWind.value !== undefined && currentWind.value !== null) {
|
||||
params.wind = parseInt(currentWind.value);
|
||||
}
|
||||
}
|
||||
|
||||
return params;
|
||||
};
|
||||
|
||||
// 发送空调命令的核心方法
|
||||
const sendCommand = async () => {
|
||||
if (submitting.value) return false;
|
||||
|
||||
submitting.value = true;
|
||||
try {
|
||||
const requestParams = buildRequestParams();
|
||||
|
||||
// 打印完整的请求URL，便于调试
|
||||
const queryString = new URLSearchParams(requestParams).toString();
|
||||
console.log('完整请求URL:', `/tuya/aircon/sendCommand?${queryString}`);
|
||||
|
||||
const response = await contlkTApi(requestParams);
|
||||
|
||||
console.log('响应结果:', response);
|
||||
|
||||
if (response && response.success) {
|
||||
showStatus('success', response.message || '命令发送成功');
|
||||
return true;
|
||||
} else {
|
||||
showStatus('error', response?.message || '命令发送失败');
|
||||
return false;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('发送命令失败:', error);
|
||||
showStatus('error', '网络错误，请检查连接');
|
||||
return false;
|
||||
} finally {
|
||||
submitting.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// 电源开关处理
|
||||
const handlePowerChange = async (checked) => {
|
||||
await sendCommand();
|
||||
};
|
||||
|
||||
// 设置模式（开机前也可以调整）
|
||||
const setMode = async (mode) => {
|
||||
currentMode.value = mode;
|
||||
if (powerState.value) {
|
||||
await sendCommand();
|
||||
}
|
||||
};
|
||||
|
||||
// 调整温度（开机前也可以调整）
|
||||
const adjustTemp = async (delta) => {
|
||||
const newTemp = currentTemp.value + delta;
|
||||
if (newTemp >= 16 && newTemp <= 32) {
|
||||
currentTemp.value = newTemp;
|
||||
if (powerState.value) {
|
||||
await sendCommand();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// 温度滑动条改变（开机前也可以调整）
|
||||
const handleTempChange = async (value) => {
|
||||
if (powerState.value) {
|
||||
await sendCommand();
|
||||
}
|
||||
};
|
||||
|
||||
// 风速改变（开机前也可以调整）
|
||||
const handleWindChange = async () => {
|
||||
if (powerState.value) {
|
||||
await sendCommand();
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.aircon-control-panel {
|
||||
padding: 24px;
|
||||
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.control-card {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
}
|
||||
|
||||
.power-section {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 16px 24px;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
border-radius: 16px;
|
||||
margin-bottom: 24px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.power-label {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.main-controls {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.control-item {
|
||||
margin-bottom: 32px;
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
.control-label {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 16px;
|
||||
color: #2c3e50;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.label-icon {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.mode-buttons {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.mode-buttons .ant-btn {
|
||||
min-width: 80px;
|
||||
height: 40px;
|
||||
border-radius: 20px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.mode-active {
|
||||
transform: scale(1.05);
|
||||
box-shadow: 0 4px 12px rgba(24, 144, 255, 0.3);
|
||||
}
|
||||
|
||||
.temp-control {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 24px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.temp-value {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.temp-number {
|
||||
font-size: 48px;
|
||||
font-weight: bold;
|
||||
color: #1890ff;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.temp-unit {
|
||||
font-size: 20px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.temp-range {
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
.wind-buttons {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.status-area {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
.aircon-control-panel {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.control-card {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.mode-buttons .ant-btn {
|
||||
min-width: 60px;
|
||||
height: 36px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.temp-number {
|
||||
font-size: 36px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 动画效果 */
|
||||
.ant-btn {
|
||||
transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
|
||||
}
|
||||
|
||||
.ant-switch {
|
||||
background-color: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
.ant-switch-checked {
|
||||
background-color: #52c41a;
|
||||
}
|
||||
|
||||
.temp-control .ant-btn-circle {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
font-size: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* 加载状态样式 */
|
||||
.ant-btn-loading {
|
||||
opacity: 0.7;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
import { defHttp } from '/@/utils/http/axios';
|
||||
import { useMessage } from '/@/hooks/web/useMessage';
|
||||
|
||||
const { createConfirm } = useMessage();
|
||||
|
||||
enum Api {
|
||||
contlkTApi = '/tuya/aircon/sendCommand',
|
||||
}
|
||||
|
||||
/**
|
||||
* 空调组合按键下发
|
||||
* 参数拼接到 URL 后面作为 Query String
|
||||
* @param params 包含 infraredId, remoteId, power, mode, temp, wind 等
|
||||
*/
|
||||
export const contlkTApi = (params) => {
|
||||
// 将参数拼接到 URL 后面
|
||||
const queryString = new URLSearchParams(params).toString();
|
||||
const url = `${Api.contlkTApi}?${queryString}`;
|
||||
return defHttp.post({ url }, { isTransformResponse: false });
|
||||
};
|
||||
Loading…
Reference in New Issue