智能空调调试页
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