383 lines
50 KiB
HTML
383 lines
50 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||
<title>智能家居APP</title>
|
||
<style>
|
||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||
body { font-family: -apple-system, BlinkMacSystemFont, sans-serif; background: #1a1a2e; min-height: 100vh; display: flex; justify-content: center; align-items: center; padding: 20px; }
|
||
.phone { width: 375px; height: 750px; background: #f5f5f5; border-radius: 40px; overflow: hidden; position: relative; box-shadow: 0 0 0 10px #1a1a1a, 0 20px 50px rgba(0,0,0,0.5); }
|
||
.status-bar { height: 40px; background: linear-gradient(135deg, #2C3E50, #3498DB); display: flex; align-items: center; justify-content: space-between; padding: 0 20px; color: #fff; font-size: 13px; }
|
||
.page { display: none; height: calc(100% - 40px); overflow-y: auto; background: #f5f5f5; }
|
||
.page.active { display: block; }
|
||
.header { background: linear-gradient(135deg, #2C3E50, #3498DB); color: #fff; padding: 15px; display: flex; align-items: center; position: sticky; top: 0; z-index: 10; }
|
||
.header .back { font-size: 22px; cursor: pointer; width: 30px; }
|
||
.header .title { flex: 1; font-size: 17px; font-weight: 600; text-align: center; }
|
||
.header .action { font-size: 20px; cursor: pointer; width: 30px; text-align: right; }
|
||
.content { padding: 15px; }
|
||
.card { background: #fff; border-radius: 12px; padding: 15px; margin-bottom: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
|
||
.card-title { font-size: 14px; color: #333; font-weight: 600; margin-bottom: 12px; }
|
||
.btn { padding: 12px 20px; border-radius: 10px; font-size: 14px; cursor: pointer; text-align: center; border: none; }
|
||
.btn-primary { background: linear-gradient(135deg, #3498DB, #2980B9); color: #fff; }
|
||
.btn-success { background: #27AE60; color: #fff; }
|
||
.btn-secondary { background: #f0f0f0; color: #666; }
|
||
.btn-block { display: block; width: 100%; }
|
||
.toast { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(0,0,0,0.75); color: #fff; padding: 12px 25px; border-radius: 8px; font-size: 14px; z-index: 999; display: none; }
|
||
.toast.show { display: block; }
|
||
.home-header { background: linear-gradient(135deg, #2C3E50, #3498DB); color: #fff; padding: 20px; }
|
||
.home-title { font-size: 22px; font-weight: 600; }
|
||
.home-sub { font-size: 13px; opacity: 0.8; margin-top: 4px; }
|
||
.stats { display: flex; justify-content: space-around; background: rgba(255,255,255,0.1); border-radius: 12px; padding: 15px; margin-top: 15px; }
|
||
.stat { text-align: center; }
|
||
.stat-num { font-size: 26px; font-weight: bold; }
|
||
.stat-label { font-size: 11px; opacity: 0.8; margin-top: 4px; }
|
||
.actions { display: flex; justify-content: space-around; }
|
||
.action-item { text-align: center; cursor: pointer; }
|
||
.action-icon { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 22px; margin: 0 auto 6px; color: #fff; }
|
||
.action-icon.blue { background: linear-gradient(135deg, #3498DB, #2980B9); }
|
||
.action-icon.green { background: linear-gradient(135deg, #27AE60, #1E8449); }
|
||
.action-icon.orange { background: linear-gradient(135deg, #F39C12, #D68910); }
|
||
.action-text { font-size: 12px; color: #666; }
|
||
.room-item { display: flex; align-items: center; padding: 12px 0; border-bottom: 1px solid #f0f0f0; cursor: pointer; }
|
||
.room-item:last-child { border-bottom: none; }
|
||
.room-icon { font-size: 26px; margin-right: 12px; }
|
||
.room-name { flex: 1; font-size: 15px; color: #333; }
|
||
.room-count { font-size: 12px; color: #999; margin-right: 8px; }
|
||
.room-arrow { color: #ccc; }
|
||
.alarm { display: flex; align-items: center; padding: 10px; background: rgba(231,76,60,0.1); border-radius: 8px; }
|
||
.alarm-icon { color: #E74C3C; margin-right: 10px; }
|
||
.alarm-text { flex: 1; font-size: 13px; color: #E74C3C; }
|
||
.alarm-time { font-size: 11px; color: #999; }
|
||
.search { background: #fff; padding: 10px 15px; }
|
||
.search input { width: 100%; height: 36px; background: #f5f5f5; border: none; border-radius: 18px; padding: 0 15px; font-size: 14px; }
|
||
.tabs { display: flex; background: #fff; padding: 8px 15px; gap: 8px; }
|
||
.tab { padding: 6px 14px; border-radius: 15px; font-size: 13px; cursor: pointer; background: #f5f5f5; color: #666; }
|
||
.tab.active { background: #3498DB; color: #fff; }
|
||
.device { display: flex; align-items: center; padding: 12px; background: #fff; border-radius: 10px; margin-bottom: 10px; cursor: pointer; }
|
||
.device-icon { font-size: 28px; margin-right: 12px; }
|
||
.device-info { flex: 1; }
|
||
.device-name { font-size: 15px; color: #333; }
|
||
.device-room { font-size: 12px; color: #999; margin-top: 2px; }
|
||
.device-status { font-size: 11px; padding: 4px 10px; border-radius: 10px; }
|
||
.online { background: rgba(39,174,96,0.1); color: #27AE60; }
|
||
.alarm-status { background: rgba(231,76,60,0.1); color: #E74C3C; }
|
||
.unpaired { background: rgba(241,196,15,0.1); color: #F39C12; }
|
||
.scene { background: #fff; border-radius: 12px; padding: 15px; margin-bottom: 12px; }
|
||
.scene-header { display: flex; align-items: center; }
|
||
.scene-icon { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 18px; color: #fff; margin-right: 12px; }
|
||
.scene-info { flex: 1; }
|
||
.scene-name { font-size: 16px; color: #333; font-weight: 600; }
|
||
.scene-devices { font-size: 12px; color: #999; margin-top: 3px; }
|
||
.scene-btns { display: flex; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid #f0f0f0; }
|
||
.scene-btn { flex: 1; padding: 10px; text-align: center; border-radius: 8px; font-size: 13px; cursor: pointer; }
|
||
.scene-btn.edit { background: #f5f5f5; color: #666; }
|
||
.scene-btn.run { background: #3498DB; color: #fff; }
|
||
.add-scene { display: flex; align-items: center; justify-content: center; padding: 20px; background: #fff; border-radius: 12px; border: 2px dashed #ddd; color: #999; cursor: pointer; font-size: 14px; }
|
||
.switch { width: 46px; height: 26px; background: #ddd; border-radius: 13px; position: relative; cursor: pointer; transition: 0.3s; }
|
||
.switch.on { background: #27AE60; }
|
||
.switch::after { content: ''; position: absolute; width: 22px; height: 22px; background: #fff; border-radius: 50%; top: 2px; left: 2px; transition: 0.3s; box-shadow: 0 2px 4px rgba(0,0,0,0.2); }
|
||
.switch.on::after { left: 22px; }
|
||
@keyframes pulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.1)} }
|
||
.tabbar { position: absolute; bottom: 0; left: 0; right: 0; height: 55px; background: #fff; display: flex; border-top: 1px solid #eee; }
|
||
.tabbar-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; color: #999; }
|
||
.tabbar-item.active { color: #3498DB; }
|
||
.tabbar-icon { font-size: 20px; }
|
||
.tabbar-text { font-size: 10px; margin-top: 2px; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="phone">
|
||
<div class="status-bar"><span>9:41</span><span>📶 🔋</span></div>
|
||
|
||
<!-- 首页 -->
|
||
<div class="page active" id="page-home">
|
||
<div class="home-header">
|
||
<div style="display:flex;justify-content:space-between;align-items:center;">
|
||
<div><div class="home-title">智能家居</div><div class="home-sub">欢迎回家</div></div>
|
||
<div style="font-size:22px;cursor:pointer;" onclick="go('page-message')">🔔</div>
|
||
</div>
|
||
<div class="stats">
|
||
<div class="stat"><div class="stat-num">6</div><div class="stat-label">设备总数</div></div>
|
||
<div class="stat"><div class="stat-num" style="color:#4ade80">5</div><div class="stat-label">在线</div></div>
|
||
<div class="stat"><div class="stat-num" style="color:#f87171">1</div><div class="stat-label">报警</div></div>
|
||
</div>
|
||
</div>
|
||
<div class="content">
|
||
<div class="card">
|
||
<div class="card-title">快捷操作</div>
|
||
<div class="actions">
|
||
<div class="action-item" onclick="go('page-add')"><div class="action-icon blue">+</div><div class="action-text">添加设备</div></div>
|
||
<div class="action-item" onclick="go('page-scenes')"><div class="action-icon green">🎬</div><div class="action-text">我的场景</div></div>
|
||
<div class="action-item" onclick="go('page-monitor')"><div class="action-icon orange">📊</div><div class="action-text">实时监控</div></div>
|
||
</div>
|
||
</div>
|
||
<div class="card">
|
||
<div class="card-title">我的房间</div>
|
||
<div class="room-item" onclick="go('page-devices')"><span class="room-icon">🛋️</span><span class="room-name">客厅</span><span class="room-count">4台设备</span><span class="room-arrow">›</span></div>
|
||
<div class="room-item" onclick="go('page-devices')"><span class="room-icon">🍳</span><span class="room-name">厨房</span><span class="room-count">2台设备</span><span class="room-arrow">›</span></div>
|
||
<div class="room-item" onclick="go('page-devices')"><span class="room-icon">🛏️</span><span class="room-name">卧室</span><span class="room-count">2台设备</span><span class="room-arrow">›</span></div>
|
||
</div>
|
||
<div class="card">
|
||
<div class="card-title">最近报警</div>
|
||
<div class="alarm"><span class="alarm-icon">⚠️</span><span class="alarm-text">厨房主机温度过高(52°C)</span><span class="alarm-time">10分钟前</span></div>
|
||
</div>
|
||
</div>
|
||
<div style="height:60px"></div>
|
||
<div class="tabbar">
|
||
<div class="tabbar-item active"><span class="tabbar-icon">🏠</span><span class="tabbar-text">首页</span></div>
|
||
<div class="tabbar-item" onclick="go('page-devices')"><span class="tabbar-icon">📱</span><span class="tabbar-text">设备</span></div>
|
||
<div class="tabbar-item" onclick="go('page-scenes')"><span class="tabbar-icon">🎬</span><span class="tabbar-text">场景</span></div>
|
||
<div class="tabbar-item" onclick="go('page-settings')"><span class="tabbar-icon">⚙️</span><span class="tabbar-text">设置</span></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 设备列表 -->
|
||
<div class="page" id="page-devices">
|
||
<div class="header"><span class="back" onclick="go('page-home')">‹</span><span class="title">设备列表</span><span class="action" onclick="go('page-add')">+</span></div>
|
||
<div class="search"><input placeholder="🔍 搜索设备名称"></div>
|
||
<div class="tabs"><span class="tab active">全部</span><span class="tab">在线</span><span class="tab">离线</span><span class="tab">报警</span></div>
|
||
<div class="content">
|
||
<div class="device" onclick="go('page-scene-ctrl')"><span class="device-icon">📡</span><div class="device-info"><div class="device-name">客厅主机</div><div class="device-room">客厅 · ESP32主机</div></div><span class="device-status online">在线</span></div>
|
||
<div class="device"><span class="device-icon">📡</span><div class="device-info"><div class="device-name">厨房主机</div><div class="device-room">厨房 · ESP32主机</div></div><span class="device-status alarm-status">报警</span></div>
|
||
<div class="device" onclick="go('page-ac')"><span class="device-icon">❄️</span><div class="device-info"><div class="device-name">客厅空调</div><div class="device-room">客厅 · 空调 · 格力</div></div><span class="device-status online">在线</span></div>
|
||
<div class="device" onclick="go('page-pair')"><span class="device-icon">❄️</span><div class="device-info"><div class="device-name">卧室空调</div><div class="device-room">卧室 · 空调 · 未配对</div></div><span class="device-status unpaired">未配对</span></div>
|
||
<div class="device"><span class="device-icon">💡</span><div class="device-info"><div class="device-name">客厅灯</div><div class="device-room">客厅 · 红外开关</div></div><span class="device-status online">在线</span></div>
|
||
<div class="device"><span class="device-icon">🔥</span><div class="device-info"><div class="device-name">厨房燃气阀</div><div class="device-room">厨房 · 燃气阀</div></div><span class="device-status online">在线</span></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 场景列表 -->
|
||
<div class="page" id="page-scenes">
|
||
<div class="header"><span class="back" onclick="go('page-home')">‹</span><span class="title">我的场景</span><span class="action" onclick="go('page-scene-edit')">+</span></div>
|
||
<div class="content">
|
||
<div class="scene">
|
||
<div class="scene-header"><div class="scene-icon" style="background:#3498DB">A</div><div class="scene-info"><div class="scene-name">客厅主机</div><div class="scene-devices">客厅灯、客厅空调、客厅电视、客厅风扇</div></div></div>
|
||
<div class="scene-btns"><div class="scene-btn edit" onclick="go('page-scene-edit')">编辑</div><div class="scene-btn run" onclick="go('page-scene-ctrl')">执行</div></div>
|
||
</div>
|
||
<div class="scene">
|
||
<div class="scene-header"><div class="scene-icon" style="background:#27AE60">B</div><div class="scene-info"><div class="scene-name">厨房主机</div><div class="scene-devices">厨房燃气阀、厨房排气扇</div></div></div>
|
||
<div class="scene-btns"><div class="scene-btn edit" onclick="go('page-scene-edit')">编辑</div><div class="scene-btn run" onclick="toast('场景执行中...')">执行</div></div>
|
||
</div>
|
||
<div class="add-scene" onclick="go('page-scene-edit')">+ 添加新场景</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 场景编辑 -->
|
||
<div class="page" id="page-scene-edit">
|
||
<div class="header"><span class="back" onclick="go('page-scenes')">‹</span><span class="title">编辑场景</span><span></span></div>
|
||
<div class="content">
|
||
<div class="card">
|
||
<div style="margin-bottom:15px;"><label style="font-size:13px;color:#666;display:block;margin-bottom:6px;">场景名称</label><input style="width:100%;height:42px;background:#f5f5f5;border:none;border-radius:8px;padding:0 12px;font-size:14px;" value="客厅主机"></div>
|
||
<div style="margin-bottom:15px;"><label style="font-size:13px;color:#666;display:block;margin-bottom:6px;">场景图标</label><div style="display:flex;gap:8px;"><div style="width:44px;height:44px;border-radius:10px;background:#f5f5f5;display:flex;align-items:center;justify-content:center;font-size:18px;border:2px solid #3498DB;">A</div><div style="width:44px;height:44px;border-radius:10px;background:#f5f5f5;display:flex;align-items:center;justify-content:center;font-size:18px;">B</div><div style="width:44px;height:44px;border-radius:10px;background:#f5f5f5;display:flex;align-items:center;justify-content:center;font-size:18px;">🏠</div><div style="width:44px;height:44px;border-radius:10px;background:#f5f5f5;display:flex;align-items:center;justify-content:center;font-size:18px;">🌙</div><div style="width:44px;height:44px;border-radius:10px;background:#f5f5f5;display:flex;align-items:center;justify-content:center;font-size:18px;">☀️</div></div></div>
|
||
<div><label style="font-size:13px;color:#666;display:block;margin-bottom:6px;">场景颜色</label><div style="display:flex;gap:8px;"><div style="width:36px;height:36px;border-radius:50%;background:#3498DB;border:3px solid #333;cursor:pointer;"></div><div style="width:36px;height:36px;border-radius:50%;background:#27AE60;cursor:pointer;"></div><div style="width:36px;height:36px;border-radius:50%;background:#E74C3C;cursor:pointer;"></div><div style="width:36px;height:36px;border-radius:50%;background:#F39C12;cursor:pointer;"></div><div style="width:36px;height:36px;border-radius:50%;background:#9B59B6;cursor:pointer;"></div></div></div>
|
||
</div>
|
||
<div class="card">
|
||
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;"><div class="card-title" style="margin:0">场景设备</div><div class="btn btn-primary" style="padding:6px 12px;font-size:12px;" onclick="toast('选择设备')">+ 添加</div></div>
|
||
<div style="display:flex;align-items:center;padding:10px;background:#f5f5f5;border-radius:8px;margin-bottom:8px;"><span style="font-size:22px;margin-right:10px;">💡</span><div style="flex:1;"><div style="font-size:13px;color:#333;">客厅灯</div><div style="font-size:11px;color:#3498DB;">动作: 开启</div></div><div style="display:flex;gap:6px;"><div style="padding:5px 10px;border-radius:5px;font-size:11px;background:#3498DB;color:#fff;cursor:pointer;">配置</div><div style="padding:5px 10px;border-radius:5px;font-size:11px;background:rgba(231,76,60,0.1);color:#E74C3C;cursor:pointer;">移除</div></div></div>
|
||
<div style="display:flex;align-items:center;padding:10px;background:#f5f5f5;border-radius:8px;margin-bottom:8px;"><span style="font-size:22px;margin-right:10px;">❄️</span><div style="flex:1;"><div style="font-size:13px;color:#333;">客厅空调</div><div style="font-size:11px;color:#3498DB;">动作: 开启 · 26°C · 制冷</div></div><div style="display:flex;gap:6px;"><div style="padding:5px 10px;border-radius:5px;font-size:11px;background:#3498DB;color:#fff;cursor:pointer;">配置</div><div style="padding:5px 10px;border-radius:5px;font-size:11px;background:rgba(231,76,60,0.1);color:#E74C3C;cursor:pointer;">移除</div></div></div>
|
||
<div style="display:flex;align-items:center;padding:10px;background:#f5f5f5;border-radius:8px;"><span style="font-size:22px;margin-right:10px;">📺</span><div style="flex:1;"><div style="font-size:13px;color:#333;">客厅电视</div><div style="font-size:11px;color:#3498DB;">动作: 开启</div></div><div style="display:flex;gap:6px;"><div style="padding:5px 10px;border-radius:5px;font-size:11px;background:#3498DB;color:#fff;cursor:pointer;">配置</div><div style="padding:5px 10px;border-radius:5px;font-size:11px;background:rgba(231,76,60,0.1);color:#E74C3C;cursor:pointer;">移除</div></div></div>
|
||
</div>
|
||
<div style="display:flex;gap:12px;margin-top:15px;"><div class="btn btn-secondary" style="flex:1" onclick="go('page-scenes')">取消</div><div class="btn btn-primary" style="flex:1" onclick="toast('保存成功');setTimeout(()=>go('page-scenes'),800)">保存</div></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 场景控制 -->
|
||
<div class="page" id="page-scene-ctrl">
|
||
<div class="header" style="position:absolute;background:transparent;width:100%;"><span class="back" onclick="go('page-scenes')">‹</span><span class="title"></span><span></span></div>
|
||
<div style="background:linear-gradient(135deg,#3498DB,#2980B9);color:#fff;padding:60px 20px 40px;text-align:center;">
|
||
<div style="width:70px;height:70px;border-radius:16px;background:rgba(255,255,255,0.2);display:flex;align-items:center;justify-content:center;font-size:30px;margin:0 auto 12px;">A</div>
|
||
<div style="font-size:22px;font-weight:600;">客厅主机</div>
|
||
<div style="font-size:13px;opacity:0.8;margin-top:5px;">4个设备</div>
|
||
</div>
|
||
<div style="display:block;margin:-20px 15px 15px;padding:14px;background:#27AE60;color:#fff;border-radius:10px;text-align:center;cursor:pointer;font-size:15px;" onclick="toast('正在执行场景...')">⚡ 一键执行全部设备</div>
|
||
<div class="content">
|
||
<div class="card-title">设备控制</div>
|
||
<div style="display:flex;align-items:center;padding:14px;background:#fff;border-radius:10px;margin-bottom:10px;"><span style="font-size:28px;margin-right:12px;">💡</span><div style="flex:1;"><div style="font-size:15px;color:#333;">客厅灯</div><div style="font-size:12px;color:#999;margin-top:2px;">已开启</div></div><div class="switch on" onclick="this.classList.toggle('on')"></div></div>
|
||
<div style="display:flex;align-items:center;padding:14px;background:#fff;border-radius:10px;margin-bottom:10px;cursor:pointer;" onclick="go('page-ac')"><span style="font-size:28px;margin-right:12px;">❄️</span><div style="flex:1;"><div style="font-size:15px;color:#333;">客厅空调</div><div style="font-size:12px;color:#999;margin-top:2px;">26°C · 制冷模式</div></div><span style="color:#ccc;">›</span></div>
|
||
<div style="display:flex;align-items:center;padding:14px;background:#fff;border-radius:10px;margin-bottom:10px;"><span style="font-size:28px;margin-right:12px;">📺</span><div style="flex:1;"><div style="font-size:15px;color:#333;">客厅电视</div><div style="font-size:12px;color:#999;margin-top:2px;">已开启</div></div><div class="switch on" onclick="this.classList.toggle('on')"></div></div>
|
||
<div style="display:flex;align-items:center;padding:14px;background:#fff;border-radius:10px;"><span style="font-size:28px;margin-right:12px;">🌀</span><div style="flex:1;"><div style="font-size:15px;color:#333;">客厅风扇</div><div style="font-size:12px;color:#999;margin-top:2px;">已关闭</div></div><div class="switch" onclick="this.classList.toggle('on')"></div></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 空调控制 -->
|
||
<div class="page" id="page-ac">
|
||
<div class="header"><span class="back" onclick="go('page-devices')">‹</span><span class="title">空调控制</span><span class="action">⚙️</span></div>
|
||
<div class="content">
|
||
<div style="text-align:center;padding:25px;background:linear-gradient(135deg,#3498DB,#2980B9);border-radius:16px;color:#fff;margin-bottom:15px;">
|
||
<div style="font-size:13px;opacity:0.9;margin-bottom:8px;">客厅空调 · 运行中</div>
|
||
<div style="font-size:70px;font-weight:200;" id="acTemp">26°</div>
|
||
<div style="font-size:14px;opacity:0.9;margin-top:8px;">制冷模式 · 自动风</div>
|
||
<div style="display:flex;justify-content:center;gap:25px;margin-top:20px;">
|
||
<div style="width:55px;height:55px;border-radius:50%;background:rgba(255,255,255,0.2);display:flex;align-items:center;justify-content:center;font-size:26px;cursor:pointer;" onclick="chgTemp(-1)">−</div>
|
||
<div style="width:55px;height:55px;border-radius:50%;background:rgba(255,255,255,0.3);display:flex;align-items:center;justify-content:center;font-size:26px;cursor:pointer;" onclick="toast('空调已关闭')">⏻</div>
|
||
<div style="width:55px;height:55px;border-radius:50%;background:rgba(255,255,255,0.2);display:flex;align-items:center;justify-content:center;font-size:26px;cursor:pointer;" onclick="chgTemp(1)">+</div>
|
||
</div>
|
||
</div>
|
||
<div style="display:flex;align-items:center;padding:12px;background:rgba(241,196,15,0.1);border-radius:10px;margin-bottom:12px;cursor:pointer;" onclick="go('page-pair')">
|
||
<span style="font-size:22px;margin-right:10px;">📡</span><div style="flex:1"><div style="font-size:14px;color:#333;">空调配对</div><div style="font-size:12px;color:#27AE60;margin-top:2px;">已配对 · 格力</div></div><span style="color:#ccc;">›</span>
|
||
</div>
|
||
<div class="card"><div class="card-title">运行模式</div><div style="display:flex;gap:10px;flex-wrap:wrap;"><div style="padding:10px 18px;background:#3498DB;border-radius:8px;font-size:13px;color:#fff;cursor:pointer;">制冷</div><div style="padding:10px 18px;background:#f5f5f5;border-radius:8px;font-size:13px;color:#666;cursor:pointer;">制热</div><div style="padding:10px 18px;background:#f5f5f5;border-radius:8px;font-size:13px;color:#666;cursor:pointer;">除湿</div><div style="padding:10px 18px;background:#f5f5f5;border-radius:8px;font-size:13px;color:#666;cursor:pointer;">送风</div><div style="padding:10px 18px;background:#f5f5f5;border-radius:8px;font-size:13px;color:#666;cursor:pointer;">自动</div></div></div>
|
||
<div class="card"><div class="card-title">风速设置</div><div style="display:flex;gap:10px;"><div style="padding:10px 18px;background:#3498DB;border-radius:8px;font-size:13px;color:#fff;cursor:pointer;">自动</div><div style="padding:10px 18px;background:#f5f5f5;border-radius:8px;font-size:13px;color:#666;cursor:pointer;">低速</div><div style="padding:10px 18px;background:#f5f5f5;border-radius:8px;font-size:13px;color:#666;cursor:pointer;">中速</div><div style="padding:10px 18px;background:#f5f5f5;border-radius:8px;font-size:13px;color:#666;cursor:pointer;">高速</div></div></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 空调配对 -->
|
||
<div class="page" id="page-pair">
|
||
<div class="header"><span class="back" onclick="go('page-ac')">‹</span><span class="title">空调配对</span><span></span></div>
|
||
<div class="content" id="pair1">
|
||
<div class="card"><div class="card-title">选择空调品牌</div>
|
||
<div style="display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:15px;">
|
||
<div class="brand selected" onclick="selBrand(this)" style="padding:12px 8px;background:#fff;border-radius:8px;text-align:center;cursor:pointer;border:2px solid #3498DB;background:rgba(52,152,219,0.1);"><div style="font-size:14px;color:#333;">格力</div><div style="font-size:11px;color:#999;margin-top:2px;">203个码库</div></div>
|
||
<div class="brand" onclick="selBrand(this)" style="padding:12px 8px;background:#fff;border-radius:8px;text-align:center;cursor:pointer;border:2px solid transparent;"><div style="font-size:14px;color:#333;">美的</div><div style="font-size:11px;color:#999;margin-top:2px;">156个码库</div></div>
|
||
<div class="brand" onclick="selBrand(this)" style="padding:12px 8px;background:#fff;border-radius:8px;text-align:center;cursor:pointer;border:2px solid transparent;"><div style="font-size:14px;color:#333;">海尔</div><div style="font-size:11px;color:#999;margin-top:2px;">134个码库</div></div>
|
||
<div class="brand" onclick="selBrand(this)" style="padding:12px 8px;background:#fff;border-radius:8px;text-align:center;cursor:pointer;border:2px solid transparent;"><div style="font-size:14px;color:#333;">奥克斯</div><div style="font-size:11px;color:#999;margin-top:2px;">98个码库</div></div>
|
||
<div class="brand" onclick="selBrand(this)" style="padding:12px 8px;background:#fff;border-radius:8px;text-align:center;cursor:pointer;border:2px solid transparent;"><div style="font-size:14px;color:#333;">志高</div><div style="font-size:11px;color:#999;margin-top:2px;">87个码库</div></div>
|
||
<div class="brand" onclick="selBrand(this)" style="padding:12px 8px;background:#fff;border-radius:8px;text-align:center;cursor:pointer;border:2px solid transparent;"><div style="font-size:14px;color:#333;">大金</div><div style="font-size:11px;color:#999;margin-top:2px;">76个码库</div></div>
|
||
</div>
|
||
</div>
|
||
<div class="btn btn-primary btn-block" onclick="startPair()">开始自动配对</div>
|
||
</div>
|
||
<div class="content" id="pair2" style="display:none">
|
||
<div style="text-align:center;padding:30px 15px;">
|
||
<div style="font-size:70px;animation:pulse 1.5s infinite;">📡</div>
|
||
<div style="font-size:18px;color:#333;margin:15px 0 8px;">正在自动配对...</div>
|
||
<div style="font-size:13px;color:#999;margin-bottom:25px;line-height:1.5;">请观察空调，当空调有响应时<br>立即点击下方按钮</div>
|
||
<div style="height:6px;background:#e0e0e0;border-radius:3px;margin-bottom:8px;"><div id="pairProg" style="height:100%;background:linear-gradient(90deg,#3498DB,#27AE60);border-radius:3px;width:0%;transition:width 0.3s;"></div></div>
|
||
<div id="pairText" style="font-size:13px;color:#666;">正在尝试: 格力 第 1/203 个码库</div>
|
||
</div>
|
||
<div class="btn btn-success btn-block" style="margin-bottom:10px;" onclick="pairOk()">✓ 空调有响应，停止配对</div>
|
||
<div class="btn btn-secondary btn-block" onclick="cancelPair()">取消配对</div>
|
||
</div>
|
||
<div class="content" id="pair3" style="display:none">
|
||
<div style="text-align:center;padding:40px 15px;">
|
||
<div style="font-size:70px;">✅</div>
|
||
<div style="font-size:22px;color:#27AE60;margin:15px 0;">配对成功！</div>
|
||
<div style="font-size:13px;color:#666;">已成功匹配码库：格力 #45</div>
|
||
</div>
|
||
<div class="btn btn-primary btn-block" onclick="go('page-ac')">返回空调控制</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 添加设备 -->
|
||
<div class="page" id="page-add">
|
||
<div class="header"><span class="back" onclick="go('page-home')">‹</span><span class="title">添加设备</span><span></span></div>
|
||
<div style="display:flex;align-items:center;justify-content:center;padding:15px;background:#fff;">
|
||
<div class="step active" id="addS1"><div style="width:28px;height:28px;border-radius:50%;background:#3498DB;color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;">1</div><div style="font-size:11px;color:#3498DB;margin-top:6px;">选择类型</div></div>
|
||
<div style="width:40px;height:2px;background:#ddd;margin:0 8px 18px;"></div>
|
||
<div class="step" id="addS2"><div style="width:28px;height:28px;border-radius:50%;background:#ddd;color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;">2</div><div style="font-size:11px;color:#999;margin-top:6px;">配置设备</div></div>
|
||
<div style="width:40px;height:2px;background:#ddd;margin:0 8px 18px;"></div>
|
||
<div class="step" id="addS3"><div style="width:28px;height:28px;border-radius:50%;background:#ddd;color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;">3</div><div style="font-size:11px;color:#999;margin-top:6px;">完成</div></div>
|
||
</div>
|
||
<div class="content" id="add1">
|
||
<div style="font-size:13px;color:#999;margin-bottom:12px;">请选择要添加的设备类型</div>
|
||
<div style="display:flex;align-items:center;padding:14px;background:#fff;border-radius:10px;margin-bottom:10px;cursor:pointer;" onclick="addStep2('host')"><div style="width:46px;height:46px;border-radius:10px;background:rgba(52,152,219,0.1);display:flex;align-items:center;justify-content:center;font-size:24px;margin-right:12px;">📡</div><div style="flex:1;"><div style="font-size:15px;color:#333;">ESP32主机</div><div style="font-size:12px;color:#999;margin-top:2px;">添加新的ESP32控制主机</div></div><span style="color:#ccc;font-size:18px;">›</span></div>
|
||
<div style="display:flex;align-items:center;padding:14px;background:#fff;border-radius:10px;margin-bottom:10px;cursor:pointer;" onclick="addStep2('ac')"><div style="width:46px;height:46px;border-radius:10px;background:rgba(52,152,219,0.1);display:flex;align-items:center;justify-content:center;font-size:24px;margin-right:12px;">❄️</div><div style="flex:1;"><div style="font-size:15px;color:#333;">空调</div><div style="font-size:12px;color:#999;margin-top:2px;">通过红外配对控制空调</div></div><span style="color:#ccc;font-size:18px;">›</span></div>
|
||
<div style="display:flex;align-items:center;padding:14px;background:#fff;border-radius:10px;margin-bottom:10px;cursor:pointer;" onclick="addStep2('light')"><div style="width:46px;height:46px;border-radius:10px;background:rgba(241,196,15,0.1);display:flex;align-items:center;justify-content:center;font-size:24px;margin-right:12px;">💡</div><div style="flex:1;"><div style="font-size:15px;color:#333;">红外开关/灯</div><div style="font-size:12px;color:#999;margin-top:2px;">红外遥控的灯具或开关</div></div><span style="color:#ccc;font-size:18px;">›</span></div>
|
||
<div style="display:flex;align-items:center;padding:14px;background:#fff;border-radius:10px;margin-bottom:10px;cursor:pointer;" onclick="addStep2('rf')"><div style="width:46px;height:46px;border-radius:10px;background:rgba(155,89,182,0.1);display:flex;align-items:center;justify-content:center;font-size:24px;margin-right:12px;">📻</div><div style="flex:1;"><div style="font-size:15px;color:#333;">RF433设备</div><div style="font-size:12px;color:#999;margin-top:2px;">433MHz无线遥控设备</div></div><span style="color:#ccc;font-size:18px;">›</span></div>
|
||
<div style="display:flex;align-items:center;padding:14px;background:#fff;border-radius:10px;cursor:pointer;" onclick="addStep2('gas')"><div style="width:46px;height:46px;border-radius:10px;background:rgba(231,76,60,0.1);display:flex;align-items:center;justify-content:center;font-size:24px;margin-right:12px;">🔥</div><div style="flex:1;"><div style="font-size:15px;color:#333;">燃气阀</div><div style="font-size:12px;color:#999;margin-top:2px;">智能燃气阀门控制</div></div><span style="color:#ccc;font-size:18px;">›</span></div>
|
||
</div>
|
||
<div class="content" id="add2" style="display:none">
|
||
<div class="card">
|
||
<div style="margin-bottom:15px;"><label style="font-size:13px;color:#666;display:block;margin-bottom:6px;">选择控制主机</label><div style="display:flex;gap:10px;"><div style="padding:10px 16px;background:rgba(52,152,219,0.1);border-radius:8px;font-size:13px;border:2px solid #3498DB;cursor:pointer;">📡 客厅主机</div><div style="padding:10px 16px;background:#f5f5f5;border-radius:8px;font-size:13px;border:2px solid transparent;cursor:pointer;">📡 厨房主机</div></div></div>
|
||
<div style="margin-bottom:15px;"><label style="font-size:13px;color:#666;display:block;margin-bottom:6px;">设备名称</label><input style="width:100%;height:42px;background:#f5f5f5;border:none;border-radius:8px;padding:0 12px;font-size:14px;" placeholder="例如: 客厅空调"></div>
|
||
<div><label style="font-size:13px;color:#666;display:block;margin-bottom:6px;">所在房间</label><select style="width:100%;height:42px;background:#f5f5f5;border:none;border-radius:8px;padding:0 12px;font-size:14px;"><option>客厅</option><option>厨房</option><option>卧室</option><option>书房</option></select></div>
|
||
</div>
|
||
<div id="acNotice" style="display:none;align-items:center;background:rgba(241,196,15,0.1);padding:12px;border-radius:8px;margin-bottom:12px;"><span style="margin-right:8px;">💡</span><span style="font-size:13px;color:#F39C12;">添加后需要进行红外配对才能控制空调</span></div>
|
||
<div style="display:flex;gap:12px;"><div class="btn btn-secondary" style="flex:1" onclick="addStep1()">上一步</div><div class="btn btn-primary" style="flex:1" onclick="addStep3()">下一步</div></div>
|
||
</div>
|
||
<div class="content" id="add3" style="display:none">
|
||
<div style="text-align:center;padding:30px 15px;"><div style="font-size:70px;">✅</div><div style="font-size:20px;color:#333;margin:15px 0;">设备添加成功</div></div>
|
||
<div class="card">
|
||
<div style="display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid #f0f0f0;"><span style="color:#666;">设备类型</span><span id="addType">空调</span></div>
|
||
<div style="display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid #f0f0f0;"><span style="color:#666;">设备名称</span><span>客厅空调</span></div>
|
||
<div style="display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid #f0f0f0;"><span style="color:#666;">所在房间</span><span>客厅</span></div>
|
||
<div id="addPairRow" style="display:flex;justify-content:space-between;padding:10px 0;"><span style="color:#666;">配对状态</span><span style="color:#E74C3C;">未配对</span></div>
|
||
</div>
|
||
<div id="addPairBtn" class="btn btn-success btn-block" style="margin-bottom:10px;" onclick="go('page-pair')">立即配对</div>
|
||
<div style="display:flex;gap:12px;"><div class="btn btn-secondary" style="flex:1" onclick="addStep1()">继续添加</div><div class="btn btn-primary" style="flex:1" onclick="go('page-devices')">完成</div></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 实时监控 -->
|
||
<div class="page" id="page-monitor">
|
||
<div class="header"><span class="back" onclick="go('page-home')">‹</span><span class="title">实时监控</span><span></span></div>
|
||
<div class="content">
|
||
<div class="card"><div class="card-title">选择设备</div><div style="display:flex;gap:8px;overflow-x:auto;padding-bottom:10px;"><div style="padding:8px 14px;background:#fff;border-radius:16px;font-size:12px;white-space:nowrap;border:2px solid #3498DB;color:#3498DB;">客厅主机</div><div style="padding:8px 14px;background:#fff;border-radius:16px;font-size:12px;white-space:nowrap;border:2px solid transparent;">厨房主机</div></div></div>
|
||
<div class="card"><div class="card-title">温度监测 (9路)</div>
|
||
<div style="display:grid;grid-template-columns:repeat(3,1fr);gap:8px;">
|
||
<div style="background:#fff;border-radius:10px;padding:12px;text-align:center;"><div style="font-size:11px;color:#999;">通道1</div><div style="font-size:22px;font-weight:bold;color:#3498DB;margin-top:4px;">26.5°</div></div>
|
||
<div style="background:#fff;border-radius:10px;padding:12px;text-align:center;"><div style="font-size:11px;color:#999;">通道2</div><div style="font-size:22px;font-weight:bold;color:#3498DB;margin-top:4px;">27.2°</div></div>
|
||
<div style="background:#fff;border-radius:10px;padding:12px;text-align:center;"><div style="font-size:11px;color:#999;">通道3</div><div style="font-size:22px;font-weight:bold;color:#3498DB;margin-top:4px;">25.8°</div></div>
|
||
<div style="background:#fff;border-radius:10px;padding:12px;text-align:center;"><div style="font-size:11px;color:#999;">通道4</div><div style="font-size:22px;font-weight:bold;color:#E74C3C;margin-top:4px;">52.0°</div></div>
|
||
<div style="background:#fff;border-radius:10px;padding:12px;text-align:center;"><div style="font-size:11px;color:#999;">通道5</div><div style="font-size:22px;font-weight:bold;color:#3498DB;margin-top:4px;">26.1°</div></div>
|
||
<div style="background:#fff;border-radius:10px;padding:12px;text-align:center;"><div style="font-size:11px;color:#999;">通道6</div><div style="font-size:22px;font-weight:bold;color:#3498DB;margin-top:4px;">25.5°</div></div>
|
||
<div style="background:#fff;border-radius:10px;padding:12px;text-align:center;"><div style="font-size:11px;color:#999;">通道7</div><div style="font-size:22px;font-weight:bold;color:#3498DB;margin-top:4px;">26.8°</div></div>
|
||
<div style="background:#fff;border-radius:10px;padding:12px;text-align:center;"><div style="font-size:11px;color:#999;">通道8</div><div style="font-size:22px;font-weight:bold;color:#3498DB;margin-top:4px;">27.0°</div></div>
|
||
<div style="background:#fff;border-radius:10px;padding:12px;text-align:center;"><div style="font-size:11px;color:#999;">通道9</div><div style="font-size:22px;font-weight:bold;color:#3498DB;margin-top:4px;">26.3°</div></div>
|
||
</div>
|
||
</div>
|
||
<div class="card"><div class="card-title">人体检测</div><div style="display:flex;align-items:center;padding:14px;background:#fff;border-radius:10px;"><span style="font-size:36px;margin-right:12px;">🚶</span><div style="flex:1;"><div style="font-size:15px;color:#333;">人体感应状态</div><div style="font-size:13px;color:#27AE60;margin-top:4px;">检测到有人</div></div></div></div>
|
||
<div class="card"><div class="card-title">报警状态</div><div class="alarm"><span class="alarm-icon">⚠️</span><span class="alarm-text">通道4温度超过阈值(50°C)</span></div></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 消息中心 -->
|
||
<div class="page" id="page-message">
|
||
<div class="header"><span class="back" onclick="go('page-home')">‹</span><span class="title">消息中心</span><span></span></div>
|
||
<div style="display:flex;background:#fff;padding:8px 15px;gap:8px;"><span style="padding:6px 14px;border-radius:15px;font-size:12px;background:#3498DB;color:#fff;">全部</span><span style="padding:6px 14px;border-radius:15px;font-size:12px;background:#f5f5f5;color:#666;">报警</span><span style="padding:6px 14px;border-radius:15px;font-size:12px;background:#f5f5f5;color:#666;">系统</span><span style="padding:6px 14px;border-radius:15px;font-size:12px;background:#f5f5f5;color:#666;">设备</span></div>
|
||
<div class="content">
|
||
<div style="display:flex;padding:12px;background:#fff;border-radius:10px;margin-bottom:10px;"><div style="width:36px;height:36px;border-radius:8px;background:rgba(231,76,60,0.1);display:flex;align-items:center;justify-content:center;font-size:18px;margin-right:10px;">⚠️</div><div style="flex:1;"><div style="font-size:14px;color:#333;">温度报警</div><div style="font-size:12px;color:#999;margin-top:3px;">厨房主机通道4温度过高(52°C)</div></div><div style="font-size:11px;color:#ccc;">10分钟前</div></div>
|
||
<div style="display:flex;padding:12px;background:#fff;border-radius:10px;margin-bottom:10px;"><div style="width:36px;height:36px;border-radius:8px;background:rgba(52,152,219,0.1);display:flex;align-items:center;justify-content:center;font-size:18px;margin-right:10px;">📢</div><div style="flex:1;"><div style="font-size:14px;color:#333;">系统通知</div><div style="font-size:12px;color:#999;margin-top:3px;">客厅主机固件有新版本可更新</div></div><div style="font-size:11px;color:#ccc;">1小时前</div></div>
|
||
<div style="display:flex;padding:12px;background:#fff;border-radius:10px;margin-bottom:10px;"><div style="width:36px;height:36px;border-radius:8px;background:rgba(231,76,60,0.1);display:flex;align-items:center;justify-content:center;font-size:18px;margin-right:10px;">⚠️</div><div style="flex:1;"><div style="font-size:14px;color:#333;">设备离线</div><div style="font-size:12px;color:#999;margin-top:3px;">书房主机已离线</div></div><div style="font-size:11px;color:#ccc;">2小时前</div></div>
|
||
<div style="display:flex;padding:12px;background:#fff;border-radius:10px;"><div style="width:36px;height:36px;border-radius:8px;background:rgba(39,174,96,0.1);display:flex;align-items:center;justify-content:center;font-size:18px;margin-right:10px;">✅</div><div style="flex:1;"><div style="font-size:14px;color:#333;">配对成功</div><div style="font-size:12px;color:#999;margin-top:3px;">客厅空调配对成功</div></div><div style="font-size:11px;color:#ccc;">昨天</div></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 设置 -->
|
||
<div class="page" id="page-settings">
|
||
<div class="header"><span class="back" onclick="go('page-home')">‹</span><span class="title">设置</span><span></span></div>
|
||
<div class="content">
|
||
<div style="display:flex;align-items:center;padding:18px;background:linear-gradient(135deg,#3498DB,#2980B9);border-radius:12px;color:#fff;margin-bottom:15px;">
|
||
<div style="width:55px;height:55px;border-radius:50%;background:rgba(255,255,255,0.2);display:flex;align-items:center;justify-content:center;font-size:28px;margin-right:12px;">👤</div>
|
||
<div><div style="font-size:17px;font-weight:600;">用户昵称</div><div style="font-size:12px;opacity:0.8;margin-top:4px;">ID: 12345678</div></div>
|
||
</div>
|
||
<div style="background:#fff;border-radius:12px;margin-bottom:12px;">
|
||
<div style="display:flex;align-items:center;padding:14px;border-bottom:1px solid #f0f0f0;cursor:pointer;" onclick="go('page-devices')"><span style="font-size:20px;margin-right:10px;">📱</span><span style="flex:1;font-size:14px;color:#333;">设备管理</span><span style="color:#ccc;">›</span></div>
|
||
<div style="display:flex;align-items:center;padding:14px;border-bottom:1px solid #f0f0f0;cursor:pointer;" onclick="go('page-scenes')"><span style="font-size:20px;margin-right:10px;">🎬</span><span style="flex:1;font-size:14px;color:#333;">场景管理</span><span style="color:#ccc;">›</span></div>
|
||
<div style="display:flex;align-items:center;padding:14px;cursor:pointer;"><span style="font-size:20px;margin-right:10px;">📋</span><span style="flex:1;font-size:14px;color:#333;">规则管理</span><span style="color:#ccc;">›</span></div>
|
||
</div>
|
||
<div style="background:#fff;border-radius:12px;margin-bottom:12px;">
|
||
<div style="display:flex;align-items:center;padding:14px;border-bottom:1px solid #f0f0f0;cursor:pointer;"><span style="font-size:20px;margin-right:10px;">🔔</span><span style="flex:1;font-size:14px;color:#333;">通知设置</span><span style="color:#ccc;">›</span></div>
|
||
<div style="display:flex;align-items:center;padding:14px;border-bottom:1px solid #f0f0f0;cursor:pointer;"><span style="font-size:20px;margin-right:10px;">📶</span><span style="flex:1;font-size:14px;color:#333;">网络设置</span><span style="color:#ccc;">›</span></div>
|
||
<div style="display:flex;align-items:center;padding:14px;cursor:pointer;"><span style="font-size:20px;margin-right:10px;">🔄</span><span style="flex:1;font-size:14px;color:#333;">固件升级</span><span style="color:#ccc;">›</span></div>
|
||
</div>
|
||
<div style="background:#fff;border-radius:12px;">
|
||
<div style="display:flex;align-items:center;padding:14px;border-bottom:1px solid #f0f0f0;cursor:pointer;"><span style="font-size:20px;margin-right:10px;">❓</span><span style="flex:1;font-size:14px;color:#333;">帮助与反馈</span><span style="color:#ccc;">›</span></div>
|
||
<div style="display:flex;align-items:center;padding:14px;cursor:pointer;"><span style="font-size:20px;margin-right:10px;">ℹ️</span><span style="flex:1;font-size:14px;color:#333;">关于</span><span style="color:#ccc;">›</span></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="toast" id="toast"></div>
|
||
<script>
|
||
let acTemp = 26, pairTimer = null, pairProgress = 0, addDevType = '';
|
||
function go(id) {
|
||
document.querySelectorAll('.page').forEach(p => p.classList.remove('active'));
|
||
document.getElementById(id).classList.add('active');
|
||
if(id === 'page-pair') { document.getElementById('pair1').style.display = 'block'; document.getElementById('pair2').style.display = 'none'; document.getElementById('pair3').style.display = 'none'; if(pairTimer) { clearInterval(pairTimer); pairTimer = null; } }
|
||
if(id === 'page-add') { addStep1(); }
|
||
}
|
||
function toast(msg) { const t = document.getElementById('toast'); t.textContent = msg; t.classList.add('show'); setTimeout(() => t.classList.remove('show'), 1500); }
|
||
function chgTemp(d) { acTemp = Math.max(16, Math.min(30, acTemp + d)); document.getElementById('acTemp').textContent = acTemp + '°'; }
|
||
function selBrand(el) { document.querySelectorAll('.brand').forEach(b => { b.style.borderColor = 'transparent'; b.style.background = '#fff'; }); el.style.borderColor = '#3498DB'; el.style.background = 'rgba(52,152,219,0.1)'; }
|
||
function startPair() { document.getElementById('pair1').style.display = 'none'; document.getElementById('pair2').style.display = 'block'; pairProgress = 0; pairTimer = setInterval(() => { pairProgress += 0.5; if(pairProgress > 100) pairProgress = 0; document.getElementById('pairProg').style.width = pairProgress + '%'; const code = Math.floor(pairProgress * 2) + 1; document.getElementById('pairText').textContent = '正在尝试: 格力 第 ' + code + '/203 个码库'; }, 100); }
|
||
function pairOk() { if(pairTimer) { clearInterval(pairTimer); pairTimer = null; } document.getElementById('pair2').style.display = 'none'; document.getElementById('pair3').style.display = 'block'; }
|
||
function cancelPair() { if(pairTimer) { clearInterval(pairTimer); pairTimer = null; } document.getElementById('pair2').style.display = 'none'; document.getElementById('pair1').style.display = 'block'; }
|
||
function addStep1() { document.getElementById('add1').style.display = 'block'; document.getElementById('add2').style.display = 'none'; document.getElementById('add3').style.display = 'none'; document.getElementById('addS1').querySelector('div').style.background = '#3498DB'; document.getElementById('addS1').querySelector('div:last-child').style.color = '#3498DB'; document.getElementById('addS2').querySelector('div').style.background = '#ddd'; document.getElementById('addS2').querySelector('div:last-child').style.color = '#999'; document.getElementById('addS3').querySelector('div').style.background = '#ddd'; document.getElementById('addS3').querySelector('div:last-child').style.color = '#999'; }
|
||
function addStep2(type) { addDevType = type; document.getElementById('add1').style.display = 'none'; document.getElementById('add2').style.display = 'block'; document.getElementById('acNotice').style.display = type === 'ac' ? 'flex' : 'none'; document.getElementById('addS1').querySelector('div').style.background = '#27AE60'; document.getElementById('addS2').querySelector('div').style.background = '#3498DB'; document.getElementById('addS2').querySelector('div:last-child').style.color = '#3498DB'; }
|
||
function addStep3() { document.getElementById('add2').style.display = 'none'; document.getElementById('add3').style.display = 'block'; const types = {host:'ESP32主机',ac:'空调',light:'红外开关',rf:'RF433设备',gas:'燃气阀'}; document.getElementById('addType').textContent = types[addDevType] || '设备'; document.getElementById('addPairRow').style.display = addDevType === 'ac' ? 'flex' : 'none'; document.getElementById('addPairBtn').style.display = addDevType === 'ac' ? 'block' : 'none'; document.getElementById('addS2').querySelector('div').style.background = '#27AE60'; document.getElementById('addS3').querySelector('div').style.background = '#3498DB'; document.getElementById('addS3').querySelector('div:last-child').style.color = '#3498DB'; }
|
||
</script>
|
||
</body>
|
||
</html>
|