初始化CRICS
This commit is contained in:
446
WebSite/kongtiao.htm
Normal file
446
WebSite/kongtiao.htm
Normal file
@@ -0,0 +1,446 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user