447 lines
14 KiB
HTML
447 lines
14 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>空调智能控制器</title>
|
||
<style>
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
|
||
}
|
||
|
||
body {
|
||
background: linear-gradient(135deg, #e6f7ff 0%, #f0f9ff 100%);
|
||
min-height: 100vh;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
padding: 20px;
|
||
}
|
||
|
||
.container {
|
||
width: 100%;
|
||
max-width: 450px;
|
||
background-color: white;
|
||
border-radius: 20px;
|
||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
|
||
overflow: hidden;
|
||
}
|
||
|
||
.header {
|
||
background: linear-gradient(135deg, #1e90ff 0%, #00bfff 100%);
|
||
color: white;
|
||
padding: 20px;
|
||
text-align: center;
|
||
}
|
||
|
||
.header h1 {
|
||
font-size: 24px;
|
||
font-weight: 500;
|
||
margin-bottom: 5px;
|
||
}
|
||
|
||
.header p {
|
||
font-size: 14px;
|
||
opacity: 0.9;
|
||
}
|
||
|
||
.status-display {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding: 15px 20px;
|
||
background-color: #f8fdff;
|
||
border-bottom: 1px solid #e6f7ff;
|
||
}
|
||
|
||
.status-item {
|
||
text-align: center;
|
||
}
|
||
|
||
.status-label {
|
||
font-size: 12px;
|
||
color: #666;
|
||
margin-bottom: 5px;
|
||
}
|
||
|
||
.status-value {
|
||
font-size: 16px;
|
||
font-weight: 500;
|
||
color: #1e90ff;
|
||
}
|
||
|
||
.control-panel {
|
||
padding: 20px;
|
||
}
|
||
|
||
.control-group {
|
||
margin-bottom: 25px;
|
||
}
|
||
|
||
.control-title {
|
||
font-size: 16px;
|
||
font-weight: 500;
|
||
margin-bottom: 15px;
|
||
color: #333;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.control-title i {
|
||
margin-right: 8px;
|
||
color: #1e90ff;
|
||
}
|
||
|
||
.power-control {
|
||
display: flex;
|
||
justify-content: center;
|
||
margin: 20px 0;
|
||
}
|
||
|
||
.power-btn {
|
||
width: 80px;
|
||
height: 80px;
|
||
border-radius: 50%;
|
||
background: linear-gradient(135deg, #1e90ff 0%, #00bfff 100%);
|
||
color: white;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
font-size: 16px;
|
||
font-weight: 500;
|
||
cursor: pointer;
|
||
box-shadow: 0 4px 10px rgba(30, 144, 255, 0.3);
|
||
transition: all 0.3s;
|
||
}
|
||
|
||
.power-btn.off {
|
||
background: linear-gradient(135deg, #a9a9a9 0%, #c0c0c0 100%);
|
||
box-shadow: 0 4px 10px rgba(169, 169, 169, 0.3);
|
||
}
|
||
|
||
.temp-control {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.temp-btn {
|
||
width: 40px;
|
||
height: 40px;
|
||
border-radius: 50%;
|
||
background-color: #f0f9ff;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
font-size: 20px;
|
||
cursor: pointer;
|
||
color: #1e90ff;
|
||
transition: all 0.2s;
|
||
}
|
||
|
||
.temp-btn:active {
|
||
background-color: #e6f7ff;
|
||
}
|
||
|
||
.temp-display {
|
||
width: 100px;
|
||
text-align: center;
|
||
font-size: 36px;
|
||
font-weight: 300;
|
||
margin: 0 15px;
|
||
color: #1e90ff;
|
||
}
|
||
|
||
.mode-control, .fan-control {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.mode-btn, .fan-btn {
|
||
flex: 1;
|
||
padding: 12px 5px;
|
||
text-align: center;
|
||
background-color: #f8fdff;
|
||
border-radius: 10px;
|
||
margin: 0 5px;
|
||
cursor: pointer;
|
||
transition: all 0.2s;
|
||
font-size: 14px;
|
||
color: #666;
|
||
}
|
||
|
||
.mode-btn.active, .fan-btn.active {
|
||
background-color: #1e90ff;
|
||
color: white;
|
||
box-shadow: 0 4px 8px rgba(30, 144, 255, 0.2);
|
||
}
|
||
|
||
.action-buttons {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-top: 30px;
|
||
}
|
||
|
||
.action-btn {
|
||
flex: 1;
|
||
padding: 12px;
|
||
text-align: center;
|
||
border-radius: 10px;
|
||
cursor: pointer;
|
||
font-weight: 500;
|
||
margin: 0 5px;
|
||
}
|
||
|
||
.submit-btn {
|
||
background: linear-gradient(135deg, #1e90ff 0%, #00bfff 100%);
|
||
color: white;
|
||
box-shadow: 0 4px 10px rgba(30, 144, 255, 0.3);
|
||
}
|
||
|
||
.reset-btn {
|
||
background-color: #f8fdff;
|
||
color: #666;
|
||
border: 1px solid #e6f7ff;
|
||
}
|
||
|
||
.json-display {
|
||
margin-top: 20px;
|
||
padding: 15px;
|
||
background-color: #f8fdff;
|
||
border-radius: 10px;
|
||
font-family: monospace;
|
||
font-size: 12px;
|
||
color: #333;
|
||
display: none;
|
||
}
|
||
|
||
.json-display.active {
|
||
display: block;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<div class="header">
|
||
<h1>空调智能控制器</h1>
|
||
<p>房间号: 1001 | 设备代码: 1001</p>
|
||
</div>
|
||
|
||
<div class="status-display">
|
||
<div class="status-item">
|
||
<div class="status-label">当前状态</div>
|
||
<div class="status-value" id="current-status">运行中</div>
|
||
</div>
|
||
<div class="status-item">
|
||
<div class="status-label">当前模式</div>
|
||
<div class="status-value" id="current-mode">制冷</div>
|
||
</div>
|
||
<div class="status-item">
|
||
<div class="status-label">当前风速</div>
|
||
<div class="status-value" id="current-fan">低速</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="control-panel">
|
||
<div class="power-control">
|
||
<div class="power-btn" id="power-btn">开</div>
|
||
</div>
|
||
|
||
<div class="control-group">
|
||
<div class="control-title">温度控制</div>
|
||
<div class="temp-control">
|
||
<div class="temp-btn" id="temp-down">-</div>
|
||
<div class="temp-display" id="temp-value">20</div>
|
||
<div class="temp-btn" id="temp-up">+</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="control-group">
|
||
<div class="control-title">运行模式</div>
|
||
<div class="mode-control">
|
||
<div class="mode-btn active" data-mode="1">制冷</div>
|
||
<div class="mode-btn" data-mode="2">制热</div>
|
||
<div class="mode-btn" data-mode="3">送风</div>
|
||
<div class="mode-btn" data-mode="0">自动</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="control-group">
|
||
<div class="control-title">风速控制</div>
|
||
<div class="fan-control">
|
||
<div class="fan-btn" data-speed="0">自动</div>
|
||
<div class="fan-btn active" data-speed="1">低速</div>
|
||
<div class="fan-btn" data-speed="2">中速</div>
|
||
<div class="fan-btn" data-speed="3">高速</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="action-buttons">
|
||
<div class="action-btn reset-btn" id="reset-btn">重置</div>
|
||
<div class="action-btn submit-btn" id="submit-btn">提交设置</div>
|
||
</div>
|
||
|
||
<div class="json-display" id="json-display">
|
||
{/* JSON数据将在这里显示 */}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
// 初始化空调状态
|
||
let acState = {
|
||
roomNumber: "1001",
|
||
code: "1001",
|
||
creatDate: "2016-09-05",
|
||
modalAddress: "007001000",
|
||
onOff: "1", // 1开，2关
|
||
temperature: "20",
|
||
fanSpeed: "1", // 0自动，1低速，2中速，3高速
|
||
mode: "1", // 0自动，1制冷，2制热，3送风
|
||
valve: "1"
|
||
};
|
||
|
||
// DOM元素
|
||
const powerBtn = document.getElementById('power-btn');
|
||
const tempValue = document.getElementById('temp-value');
|
||
const tempUp = document.getElementById('temp-up');
|
||
const tempDown = document.getElementById('temp-down');
|
||
const modeBtns = document.querySelectorAll('.mode-btn');
|
||
const fanBtns = document.querySelectorAll('.fan-btn');
|
||
const submitBtn = document.getElementById('submit-btn');
|
||
const resetBtn = document.getElementById('reset-btn');
|
||
const jsonDisplay = document.getElementById('json-display');
|
||
const currentStatus = document.getElementById('current-status');
|
||
const currentMode = document.getElementById('current-mode');
|
||
const currentFan = document.getElementById('current-fan');
|
||
|
||
// 更新界面显示
|
||
function updateDisplay() {
|
||
// 更新开关状态
|
||
if (acState.onOff === "1") {
|
||
powerBtn.textContent = "开";
|
||
powerBtn.classList.remove('off');
|
||
currentStatus.textContent = "运行中";
|
||
} else {
|
||
powerBtn.textContent = "关";
|
||
powerBtn.classList.add('off');
|
||
currentStatus.textContent = "已关闭";
|
||
}
|
||
|
||
// 更新温度
|
||
tempValue.textContent = acState.temperature;
|
||
|
||
// 更新模式
|
||
modeBtns.forEach(btn => {
|
||
if (btn.dataset.mode === acState.mode) {
|
||
btn.classList.add('active');
|
||
|
||
// 更新当前模式显示
|
||
switch(acState.mode) {
|
||
case "0": currentMode.textContent = "自动"; break;
|
||
case "1": currentMode.textContent = "制冷"; break;
|
||
case "2": currentMode.textContent = "制热"; break;
|
||
case "3": currentMode.textContent = "送风"; break;
|
||
}
|
||
} else {
|
||
btn.classList.remove('active');
|
||
}
|
||
});
|
||
|
||
// 更新风速
|
||
fanBtns.forEach(btn => {
|
||
if (btn.dataset.speed === acState.fanSpeed) {
|
||
btn.classList.add('active');
|
||
|
||
// 更新当前风速显示
|
||
switch(acState.fanSpeed) {
|
||
case "0": currentFan.textContent = "自动"; break;
|
||
case "1": currentFan.textContent = "低速"; break;
|
||
case "2": currentFan.textContent = "中速"; break;
|
||
case "3": currentFan.textContent = "高速"; break;
|
||
}
|
||
} else {
|
||
btn.classList.remove('active');
|
||
}
|
||
});
|
||
}
|
||
|
||
// 开关控制
|
||
powerBtn.addEventListener('click', function() {
|
||
acState.onOff = acState.onOff === "1" ? "2" : "1";
|
||
updateDisplay();
|
||
});
|
||
|
||
// 温度控制
|
||
tempUp.addEventListener('click', function() {
|
||
let temp = parseInt(acState.temperature);
|
||
if (temp < 30) {
|
||
acState.temperature = (temp + 1).toString();
|
||
updateDisplay();
|
||
}
|
||
});
|
||
|
||
tempDown.addEventListener('click', function() {
|
||
let temp = parseInt(acState.temperature);
|
||
if (temp > 16) {
|
||
acState.temperature = (temp - 1).toString();
|
||
updateDisplay();
|
||
}
|
||
});
|
||
|
||
// 模式选择
|
||
modeBtns.forEach(btn => {
|
||
btn.addEventListener('click', function() {
|
||
acState.mode = this.dataset.mode;
|
||
updateDisplay();
|
||
});
|
||
});
|
||
|
||
// 风速选择
|
||
fanBtns.forEach(btn => {
|
||
btn.addEventListener('click', function() {
|
||
acState.fanSpeed = this.dataset.speed;
|
||
updateDisplay();
|
||
});
|
||
});
|
||
|
||
// 提交设置
|
||
submitBtn.addEventListener('click', function() {
|
||
// 显示JSON数据
|
||
jsonDisplay.textContent = JSON.stringify(acState, null, 2);
|
||
jsonDisplay.classList.add('active');
|
||
|
||
// 在实际应用中，这里应该发送AJAX请求到服务器
|
||
console.log("提交的JSON数据:", acState);
|
||
|
||
// 模拟提交成功
|
||
setTimeout(function() {
|
||
alert("设置已成功提交到服务器！");
|
||
}, 500);
|
||
});
|
||
|
||
// 重置设置
|
||
resetBtn.addEventListener('click', function() {
|
||
acState = {
|
||
roomNumber: "1001",
|
||
code: "1001",
|
||
creatDate: "2016-09-05",
|
||
modalAddress: "007001000",
|
||
onOff: "1",
|
||
temperature: "20",
|
||
fanSpeed: "1",
|
||
mode: "1",
|
||
valve: "1"
|
||
};
|
||
updateDisplay();
|
||
jsonDisplay.classList.remove('active');
|
||
});
|
||
|
||
// 初始化界面
|
||
updateDisplay();
|
||
</script>
|
||
</body>
|
||
</html>
|