初始化CRICS

This commit is contained in:
2025-12-11 09:17:16 +08:00
commit 83247ec0a2
2735 changed files with 787765 additions and 0 deletions

446
WebSite/kongtiao.htm Normal file
View 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>