![\"\"](\"https:\/\/www.wsisp.com\/helps\/wp-content\/uploads\/2026\/01\/20260124102428-69749ddce313b.png\")
<\/p>\n\u6211\u4f1a\u5728\u4e0b\u4f4d\u673a\u901a\u8fc7\u6e29\u5ea6：%d\u00b0C\\\\n,\u6e7f\u5ea6：%d%%\\\\n,\u6454\u5012\u6807\u5fd7：%d\\\\n,\u5fc3\u7387\u5f02\u5e38\u6807\u5fd7：%d\\\\n,\u6c14\u4f53\u5f02\u5e38\u6807\u5fd7：%d\\\\n,\u5fc3\u7387\u503c：%d BPM\\\\n\u7684\u8fd9\u4e2a\u534f\u8bae\u8fdb\u884c\u4e0a\u62a5\u6e29\u5ea6，\u6e7f\u5ea6\u6570\u636e，\u6454\u5012\u6807\u5fd7，\u5fc3\u7387\u5f02\u5e38\u6807\u5fd7，\u6c14\u4f53\u5f02\u5e38\u6807\u5fd7，\u5fc3\u7387\u503c\u8bf7\u4f60\u66f4\u65b0\u524d\u7aef，\u5b9e\u65f6\u663e\u793a\u6e29\u5ea6，\u6e7f\u5ea6\u6570\u636e，\u6454\u5012\u6807\u5fd7，\u5fc3\u7387\u5f02\u5e38\u6807\u5fd7，\u6c14\u4f53\u5f02\u5e38\u6807\u5fd7，\u5fc3\u7387\u503c\u4e0a\u62a5\u6570\u636e，\u9700\u8981\u7f8e\u89c2\u597d\u770b，\u5e76\u4e14\u53ef\u4ee5\u5b9e\u65f6\u7ed8\u5236\u6570\u636e\u56fe\u8868<\/p>\n
<!DOCTYPE html>
\n<html lang="zh-CN">
\n<head>
\n <meta charset="UTF-8">
\n <meta name="viewport" content="width=device-width, initial-scale=1.0">
\n <title>iHelmet \u76d1\u63a7\u4e2d\u5fc3<\/title>
\n <script src="https:\/\/cdn.jsdelivr.net\/npm\/chart.js"><\/script>
\n <link rel="stylesheet" href="style.css">
\n<\/head>
\n<body><\/p>\n
<div class="ambient-light"><\/div><\/p>\n
<div class="app-container">
\n <nav class="sidebar glass">
\n <div class="brand">
\n <div class="logo-icon">\uf8ff<\/div>
\n <span>iHelmet Pro<\/span>
\n <\/div><\/p>\n
<ul class="menu">
\n <li class="menu-item active" data-target="view-dashboard">
\n <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 12h-4l-3 9L9 3l-3 9H2"><\/path><\/svg>
\n \u751f\u547d\u4f53\u5f81
\n <\/li>
\n <li class="menu-item" data-target="view-debug">
\n <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="3" width="20" height="14" rx="2" ry="2"><\/rect><line x1="8" y1="21" x2="16" y2="21"><\/line><line x1="12" y1="17" x2="12" y2="21"><\/line><\/svg>
\n \u6570\u636e\u7ec8\u7aef
\n <\/li>
\n <\/ul><\/p>\n
<div class="connection-card">
\n <div class="status-indicator">
\n <div id="statusDot" class="dot offline"><\/div>
\n <span id="statusText">\u7b49\u5f85\u8fde\u63a5…<\/span>
\n <\/div>
\n <button id="btnGlobalConnect" class="btn-mini">\u91cd\u8fde\u7cfb\u7edf<\/button>
\n <\/div>
\n <\/nav><\/p>\n
<main class="main-area"><\/p>\n
<div id="view-dashboard" class="view-section active">
\n <header class="view-header">
\n <h1>\u5b9e\u65f6\u76d1\u63a7\u4e2d\u5fc3<\/h1>
\n <span class="last-update" id="lastUpdateTime">\u6700\u540e\u66f4\u65b0: –:–:–<\/span>
\n <\/header><\/p>\n
<div class="sensor-grid">
\n <div class="sensor-card">
\n <div class="card-icon temp-color">
\n <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 14.76V3.5a2.5 2.5 0 0 0-5 0v11.26a4.5 4.5 0 1 0 5 0z"><\/path><\/svg>
\n <\/div>
\n <div class="card-data">
\n <span class="label">\u73af\u5883\u6e29\u5ea6<\/span>
\n <div class="value-group">
\n <span class="value" id="val-temp">–<\/span>
\n <span class="unit">\u00b0C<\/span>
\n <\/div>
\n <\/div>
\n <\/div><\/p>\n
<div class="sensor-card">
\n <div class="card-icon humid-color">
\n <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2.69l5.74 5.88a6 6 0 0 1-8.49 8.49 6 6 0 0 1 0-8.49L12 2.69z"><\/path><\/svg>
\n <\/div>
\n <div class="card-data">
\n <span class="label">\u73af\u5883\u6e7f\u5ea6<\/span>
\n <div class="value-group">
\n <span class="value" id="val-humid">–<\/span>
\n <span class="unit">%<\/span>
\n <\/div>
\n <\/div>
\n <\/div><\/p>\n
<div class="sensor-card">
\n <div class="card-icon heart-color">
\n <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"><\/path><\/svg>
\n <\/div>
\n <div class="card-data">
\n <span class="label">\u5b9e\u65f6\u5fc3\u7387<\/span>
\n <div class="value-group">
\n <span class="value" id="val-hr">–<\/span>
\n <span class="unit">BPM<\/span>
\n <\/div>
\n <\/div>
\n <\/div>
\n <\/div><\/p>\n
<div class="alert-grid">
\n <div class="alert-card safe" id="alert-fall">
\n <span class="icon">🏃<\/span>
\n <span class="text">\u4f53\u6001\u6b63\u5e38<\/span>
\n <\/div>
\n <div class="alert-card safe" id="alert-gas">
\n <span class="icon">\u2601\ufe0f<\/span>
\n <span class="text">\u7a7a\u6c14\u6b63\u5e38<\/span>
\n <\/div>
\n <div class="alert-card safe" id="alert-hr-status">
\n <span class="icon">\u2764\ufe0f<\/span>
\n <span class="text">\u5fc3\u5f8b\u6b63\u5e38<\/span>
\n <\/div>
\n <\/div><\/p>\n
<div class="charts-container">
\n <div class="chart-box glass-card">
\n <h3>\u73af\u5883\u8d8b\u52bf (Temp & Humid)<\/h3>
\n <div class="chart-wrapper">
\n <canvas id="chartEnvironment"><\/canvas>
\n <\/div>
\n <\/div>
\n <div class="chart-box glass-card">
\n <h3>\u5fc3\u7387\u8d8b\u52bf (Heart Rate)<\/h3>
\n <div class="chart-wrapper">
\n <canvas id="chartHeart"><\/canvas>
\n <\/div>
\n <\/div>
\n <\/div>
\n <\/div><\/p>\n
<div id="view-debug" class="view-section hidden">
\n <header class="view-header">
\n <h1>\u539f\u59cb\u6570\u636e\u6d41<\/h1>
\n <div class="header-actions">
\n <button class="action-btn" onclick="clearLog()">\u6e05\u5c4f<\/button>
\n <\/div>
\n <\/header>
\n <div class="terminal-window glass-card">
\n <div id="logArea" class="chat-container"><\/div>
\n <\/div>
\n <\/div><\/p>\n
<\/main>
\n <\/div><\/p>\n
<script src="script.js"><\/script>
\n<\/body>
\n<\/html><\/p>\n
:root {
\n –bg-color: #f5f5f7;
\n –card-bg: rgba(255, 255, 255, 0.75);
\n –text-main: #1d1d1f;
\n –radius: 18px;
\n –red-alert: #ff3b30;
\n –green-safe: #34c759;
\n}<\/p>\n
body {
\n margin: 0;
\n font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
\n background-color: var(–bg-color);
\n color: var(–text-main);
\n height: 100vh;
\n overflow: hidden;
\n}<\/p>\n
.ambient-light {
\n position: absolute;
\n width: 100%; height: 100%;
\n background: radial-gradient(circle at 20% 20%, #e0f7fa 0%, transparent 50%),
\n radial-gradient(circle at 80% 80%, #ffe0e0 0%, transparent 50%);
\n z-index: -1;
\n}<\/p>\n
.app-container {
\n display: flex; height: 100vh; padding: 16px; box-sizing: border-box; gap: 16px;
\n}<\/p>\n
\/* Sidebar & Generic (\u590d\u7528\u4e4b\u524d\u7684 style, \u8fd9\u91cc\u7701\u7565\u91cd\u590d\u90e8\u5206，\u53ea\u5217\u51fa\u6838\u5fc3\u6539\u52a8) *\/
\n.sidebar { width: 220px; background: var(–card-bg); backdrop-filter: blur(20px); border-radius: var(–radius); padding: 24px 16px; display: flex; flex-direction: column; border: 1px solid rgba(255,255,255,0.5); }
\n.brand { font-size: 18px; font-weight: 700; margin-bottom: 40px; display: flex; align-items: center; gap: 8px; }
\n.menu { list-style: none; padding: 0; flex: 1; }
\n.menu-item { padding: 12px; margin-bottom: 6px; border-radius: 12px; cursor: pointer; display: flex; align-items: center; gap: 10px; color: #666; transition: 0.2s; }
\n.menu-item.active { background: white; color: #0071e3; box-shadow: 0 4px 12px rgba(0,0,0,0.05); }
\n.menu-item svg { width: 20px; height: 20px; }
\n.connection-card { background: white; padding: 12px; border-radius: 12px; text-align: center; }
\n.status-indicator { display: flex; align-items: center; justify-content: center; gap: 6px; margin-bottom: 8px; font-size: 12px; }
\n.dot { width: 8px; height: 8px; border-radius: 50%; }
\n.dot.online { background: var(–green-safe); box-shadow: 0 0 6px var(–green-safe); }
\n.dot.offline { background: #999; }
\n.btn-mini { width: 100%; padding: 6px; border: none; background: #f0f0f0; border-radius: 8px; cursor: pointer; }<\/p>\n
\/* — Dashboard Specific — *\/
\n.main-area { flex: 1; position: relative; overflow-y: auto; padding-right: 5px; } \/* \u5141\u8bb8\u4e3b\u533a\u57df\u6eda\u52a8 *\/
\n.view-section { display: none; flex-direction: column; gap: 20px; padding-bottom: 20px; }
\n.view-section.active { display: flex; animation: fadeIn 0.4s ease; }<\/p>\n
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }<\/p>\n
.view-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 10px; }
\n.view-header h1 { margin: 0; font-size: 26px; }
\n.last-update { font-size: 12px; color: #888; }<\/p>\n
\/* 1. Sensor Grid *\/
\n.sensor-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
\n.sensor-card {
\n background: var(–card-bg); backdrop-filter: blur(20px);
\n border-radius: var(–radius); padding: 20px;
\n display: flex; align-items: center; gap: 16px;
\n box-shadow: 0 4px 20px rgba(0,0,0,0.02);
\n border: 1px solid rgba(255,255,255,0.6);
\n}
\n.card-icon {
\n width: 48px; height: 48px; border-radius: 12px;
\n display: flex; align-items: center; justify-content: center;
\n color: white;
\n}
\n.temp-color { background: linear-gradient(135deg, #FF9A9E 0%, #FECFEF 100%); color: #d63384; }
\n.humid-color { background: linear-gradient(135deg, #a18cd1 0%, #fbc2eb 100%); color: #6f42c1; }
\n.heart-color { background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 99%, #fecfef 100%); color: #ff3b30; }<\/p>\n
.card-data { display: flex; flex-direction: column; }
\n.card-data .label { font-size: 13px; color: #666; font-weight: 500; }
\n.value-group { display: flex; align-items: baseline; gap: 4px; }
\n.card-data .value { font-size: 28px; font-weight: 700; color: var(–text-main); }
\n.card-data .unit { font-size: 14px; color: #888; }<\/p>\n
\/* 2. Alert Grid *\/
\n.alert-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
\n.alert-card {
\n padding: 16px; border-radius: 14px;
\n display: flex; align-items: center; justify-content: center; gap: 10px;
\n font-weight: 600; font-size: 15px;
\n transition: all 0.3s;
\n}
\n.alert-card.safe { background: rgba(52, 199, 89, 0.15); color: #006400; border: 1px solid rgba(52, 199, 89, 0.2); }
\n.alert-card.danger {
\n background: var(–red-alert); color: white;
\n box-shadow: 0 4px 15px rgba(255, 59, 48, 0.4);
\n animation: pulse 1s infinite;
\n}<\/p>\n
@keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.02); } 100% { transform: scale(1); } }<\/p>\n
\/* 3. Charts *\/
\n.charts-container { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; height: 300px; }
\n.chart-box {
\n background: var(–card-bg); backdrop-filter: blur(20px);
\n border-radius: var(–radius); padding: 16px;
\n border: 1px solid rgba(255,255,255,0.6);
\n display: flex; flex-direction: column;
\n}
\n.chart-box h3 { margin: 0 0 10px 0; font-size: 14px; color: #666; }
\n.chart-wrapper { flex: 1; position: relative; width: 100%; height: 100%; }<\/p>\n
\/* Debug View *\/
\n.terminal-window {
\n height: 100%; background: #1e1e1e; border-radius: 16px;
\n padding: 16px; color: #00ff00; font-family: monospace; display: flex; flex-direction: column;
\n}
\n.chat-container { flex: 1; overflow-y: auto; font-size: 12px; }
\n.hidden { display: none; }<\/p>\n
let ws = null;
\nlet isConnected = false;<\/p>\n
\/\/ \u56fe\u8868\u5b9e\u4f8b
\nlet chartEnv = null; \/\/ \u6e29\u6e7f\u5ea6\u56fe\u8868
\nlet chartHeart = null; \/\/ \u5fc3\u7387\u56fe\u8868
\nconst MAX_DATA_POINTS = 20; \/\/ \u56fe\u8868\u53ea\u4fdd\u7559\u6700\u8fd120\u4e2a\u70b9，\u8ba9\u5b83\u52a8\u8d77\u6765<\/p>\n
\/\/ DOM \u5143\u7d20
\nconst els = {
\n temp: document.getElementById('val-temp'),
\n humid: document.getElementById('val-humid'),
\n hr: document.getElementById('val-hr'),
\n alertFall: document.getElementById('alert-fall'),
\n alertGas: document.getElementById('alert-gas'),
\n alertHr: document.getElementById('alert-hr-status'),
\n time: document.getElementById('lastUpdateTime'),
\n statusDot: document.getElementById('statusDot'),
\n statusText: document.getElementById('statusText'),
\n btnConnect: document.getElementById('btnGlobalConnect'),
\n logArea: document.getElementById('logArea')
\n};<\/p>\n
\/\/ \u521d\u59cb\u5316
\nwindow.onload = () => {
\n initCharts(); \/\/ \u521d\u59cb\u5316\u7a7a\u56fe\u8868
\n connectServer();
\n setupMenu();
\n};<\/p>\n
\/\/ — 1. WebSocket \u8fde\u63a5\u4e0e\u6570\u636e\u5904\u7406 —<\/p>\n
function connectServer() {
\n const protocol = window.location.protocol === 'https:' ? 'wss' : 'ws';
\n const host = window.location.hostname;
\n const port = window.location.port ? `:${window.location.port}` : '';
\n const url = `${protocol}:\/\/${host}${port}`;<\/p>\n
log(`\u6b63\u5728\u8fde\u63a5: ${url}…`);<\/p>\n
try {
\n ws = new WebSocket(url);<\/p>\n
ws.onopen = () => {
\n isConnected = true;
\n updateStatusUI(true);
\n log('\u8fde\u63a5\u6210\u529f');
\n };<\/p>\n
ws.onclose = () => {
\n isConnected = false;
\n updateStatusUI(false);
\n log('\u8fde\u63a5\u65ad\u5f00');
\n };<\/p>\n
ws.onmessage = (event) => {
\n handleIncomingData(event.data);
\n };<\/p>\n
} catch (e) {
\n log('\u8fde\u63a5 URL \u9519\u8bef');
\n }
\n}<\/p>\n
document.getElementById('btnGlobalConnect').addEventListener('click', () => {
\n if(isConnected && ws) ws.close();
\n else connectServer();
\n});<\/p>\n
\/\/ — 2. \u6838\u5fc3：\u89e3\u6790\u534f\u8bae\u5e76\u66f4\u65b0 UI —<\/p>\n
function handleIncomingData(rawString) {
\n \/\/ \u539f\u59cb\u8c03\u8bd5\u65e5\u5fd7
\n log(`[RX] ${rawString}`);<\/p>\n
\/**
\n * \u534f\u8bae\u683c\u5f0f:
\n * \u6e29\u5ea6：%d\u00b0C\\\\n,\u6e7f\u5ea6：%d%%\\\\n,\u6454\u5012\u6807\u5fd7：%d\\\\n,\u5fc3\u7387\u5f02\u5e38\u6807\u5fd7：%d\\\\n,\u6c14\u4f53\u5f02\u5e38\u6807\u5fd7：%d\\\\n,\u5fc3\u7387\u503c：%d BPM\\\\n
\n * * \u4f7f\u7528\u6b63\u5219\u8868\u8fbe\u5f0f\u63d0\u53d6\u6570\u5b57\u3002
\n * \\\\d+ \u5339\u914d\u6570\u5b57
\n * [\\\\s\\\\S]*? \u5339\u914d\u4e2d\u95f4\u7684\u6362\u884c\u7b26\u548c\u9017\u53f7\u7b49\u6742\u4e71\u5b57\u7b26
\n *\/<\/p>\n
const regex = \/\u6e29\u5ea6：(\\\\d+).*\u6e7f\u5ea6：(\\\\d+).*\u6454\u5012\u6807\u5fd7：(\\\\d+).*\u5fc3\u7387\u5f02\u5e38\u6807\u5fd7：(\\\\d+).*\u6c14\u4f53\u5f02\u5e38\u6807\u5fd7：(\\\\d+).*\u5fc3\u7387\u503c：(\\\\d+)\/s;
\n const match = rawString.match(regex);<\/p>\n
if (match) {
\n const data = {
\n temp: parseInt(match[1]),
\n humid: parseInt(match[2]),
\n fall: parseInt(match[3]),
\n hrFlag: parseInt(match[4]),
\n gasFlag: parseInt(match[5]),
\n hrValue: parseInt(match[6])
\n };<\/p>\n
updateDashboard(data);
\n } else {
\n log("\u6570\u636e\u683c\u5f0f\u4e0d\u5339\u914d，\u5ffd\u7565");
\n }
\n}<\/p>\n
function updateDashboard(data) {
\n const now = new Date();
\n const timeLabel = now.toLocaleTimeString();
\n els.time.innerText = `\u6700\u540e\u66f4\u65b0: ${timeLabel}`;<\/p>\n
\/\/ A. \u66f4\u65b0\u6570\u503c
\n els.temp.innerText = data.temp;
\n els.humid.innerText = data.humid;
\n els.hr.innerText = data.hrValue;<\/p>\n
\/\/ B. \u66f4\u65b0\u8b66\u62a5\u72b6\u6001 (0=\u6b63\u5e38, 1=\u5f02\u5e38)
\n updateAlertCard(els.alertFall, data.fall, "🏃 \u4f53\u6001\u6b63\u5e38", "\u26a0\ufe0f \u68c0\u6d4b\u5230\u6454\u5012!");
\n updateAlertCard(els.alertHr, data.hrFlag, "\u2764\ufe0f \u5fc3\u5f8b\u6b63\u5e38", "\u26a0\ufe0f \u5fc3\u7387\u5f02\u5e38!");
\n updateAlertCard(els.alertGas, data.gasFlag, "\u2601\ufe0f \u7a7a\u6c14\u6b63\u5e38", "\u2620\ufe0f \u6709\u5bb3\u6c14\u4f53!");<\/p>\n
\/\/ C. \u66f4\u65b0\u56fe\u8868
\n updateChartData(chartEnv, timeLabel, [data.temp, data.humid]);
\n updateChartData(chartHeart, timeLabel, [data.hrValue]);
\n}<\/p>\n
function updateAlertCard(element, status, safeText, dangerText) {
\n const iconSpan = element.querySelector('.icon');
\n const textSpan = element.querySelector('.text');<\/p>\n
if (status === 1) {
\n element.className = 'alert-card danger';
\n textSpan.innerText = dangerText;
\n } else {
\n element.className = 'alert-card safe';
\n textSpan.innerText = safeText;
\n }
\n}<\/p>\n
\/\/ — 3. \u56fe\u8868\u903b\u8f91 (Chart.js) —<\/p>\n
function initCharts() {
\n \/\/ 1. \u6e29\u6e7f\u5ea6\u56fe\u8868
\n const ctxEnv = document.getElementById('chartEnvironment').getContext('2d');
\n chartEnv = new Chart(ctxEnv, {
\n type: 'line',
\n data: {
\n labels: [],
\n datasets: [
\n {
\n label: '\u6e29\u5ea6 (\u00b0C)',
\n data: [],
\n borderColor: '#ff6b6b',
\n backgroundColor: 'rgba(255, 107, 107, 0.1)',
\n borderWidth: 2,
\n tension: 0.4, \/\/ \u5e73\u6ed1\u66f2\u7ebf
\n fill: true
\n },
\n {
\n label: '\u6e7f\u5ea6 (%)',
\n data: [],
\n borderColor: '#4ecdc4',
\n backgroundColor: 'rgba(78, 205, 196, 0.1)',
\n borderWidth: 2,
\n tension: 0.4,
\n fill: true
\n }
\n ]
\n },
\n options: {
\n responsive: true,
\n maintainAspectRatio: false,
\n animation: false, \/\/ \u5b9e\u65f6\u6570\u636e\u5efa\u8bae\u5173\u95ed\u590d\u6742\u52a8\u753b
\n scales: {
\n x: { display: false }, \/\/ \u9690\u85cfX\u8f74\u6587\u5b57，\u663e\u5f97\u5e72\u51c0
\n y: { beginAtZero: false }
\n },
\n plugins: { legend: { position: 'top' } }
\n }
\n });<\/p>\n
\/\/ 2. \u5fc3\u7387\u56fe\u8868
\n const ctxHr = document.getElementById('chartHeart').getContext('2d');
\n chartHeart = new Chart(ctxHr, {
\n type: 'line',
\n data: {
\n labels: [],
\n datasets: [{
\n label: '\u5fc3\u7387 (BPM)',
\n data: [],
\n borderColor: '#ff3b30',
\n backgroundColor: 'rgba(255, 59, 48, 0.1)',
\n borderWidth: 2,
\n tension: 0.3,
\n fill: true,
\n pointRadius: 3
\n }]
\n },
\n options: {
\n responsive: true,
\n maintainAspectRatio: false,
\n animation: false,
\n scales: {
\n x: { display: false },
\n y: { min: 40, max: 180 } \/\/ \u8bbe\u7f6e\u5408\u7406\u7684Y\u8f74\u8303\u56f4
\n }
\n }
\n });
\n}<\/p>\n
function updateChartData(chart, label, newValues) {
\n \/\/ \u6dfb\u52a0 X \u8f74\u6807\u7b7e
\n chart.data.labels.push(label);<\/p>\n
\/\/ \u6dfb\u52a0 Y \u8f74\u6570\u636e (\u5bf9\u5e94 datasets \u4e2d\u7684\u6bcf\u4e00\u6761\u7ebf)
\n chart.data.datasets.forEach((dataset, i) => {
\n dataset.data.push(newValues[i]);
\n });<\/p>\n
\/\/ \u4fdd\u6301\u6570\u636e\u957f\u5ea6，\u79fb\u9664\u6700\u65e9\u7684\u6570\u636e (\u6ed1\u52a8\u7a97\u53e3)
\n if (chart.data.labels.length > MAX_DATA_POINTS) {
\n chart.data.labels.shift();
\n chart.data.datasets.forEach((dataset) => {
\n dataset.data.shift();
\n });
\n }<\/p>\n
chart.update();
\n}<\/p>\n
\/\/ — 4. \u8f85\u52a9\u529f\u80fd —<\/p>\n
function setupMenu() {
\n document.querySelectorAll('.menu-item').forEach(item => {
\n item.addEventListener('click', () => {
\n document.querySelectorAll('.menu-item').forEach(i => i.classList.remove('active'));
\n document.querySelectorAll('.view-section').forEach(v => v.classList.remove('active'));
\n item.classList.add('active');
\n const targetId = item.getAttribute('data-target');
\n document.getElementById(targetId).classList.add('active');
\n });
\n });
\n}<\/p>\n
function updateStatusUI(online) {
\n if (online) {
\n els.statusDot.className = 'dot online';
\n els.statusText.innerText = '\u7cfb\u7edf\u5728\u7ebf';
\n els.btnConnect.innerText = '\u65ad\u5f00';
\n els.btnConnect.style.background = '#ff3b30';
\n els.btnConnect.style.color = 'white';
\n } else {
\n els.statusDot.className = 'dot offline';
\n els.statusText.innerText = '\u79bb\u7ebf';
\n els.btnConnect.innerText = '\u91cd\u8fde';
\n els.btnConnect.style.background = '#f0f0f0';
\n els.btnConnect.style.color = 'black';
\n }
\n}<\/p>\n
function clearLog() {
\n els.logArea.innerHTML = '';
\n}<\/p>\n
function log(text) {
\n const div = document.createElement('div');
\n div.innerText = `[${new Date().toLocaleTimeString()}] ${text}`;
\n div.style.borderBottom = "1px solid #333";
\n div.style.padding = "4px 0";
\n els.logArea.appendChild(div);
\n els.logArea.scrollTop = els.logArea.scrollHeight;
\n}<\/p>\n
<\/p>\n
![\"\"](\"https:\/\/www.wsisp.com\/helps\/wp-content\/uploads\/2026\/01\/20260124102430-69749dde6a64a.png\")
<\/p><\/p>\n","protected":false},"excerpt":{"rendered":"
\u66f4\u65b0\u524d\u7aef\u7684\u6570\u636e\u663e\u793a(\u6839\u636e\u6211\u4eec\u4f7f\u7528\u7684\u6e29\u5ea6，\u6e7f\u5ea6，\u6807\u5fd7，\u5fc3\u7387)，\u4ee5\u53ca\u7ed8\u5236\u56fe\u8868\u7b2c\u56db\u6b65\u5173\u952e\u8bcd\u6211\u4f1a\u5728\u4e0b\u4f4d\u673a\u901a\u8fc7\u6e29\u5ea6：%d\u00b0C\\\\n,\u6e7f\u5ea6：%d%%\\\\n,\u6454\u5012\u6807\u5fd7：%d\\\\n,\u5fc3\u7387\u5f02\u5e38\u6807\u5fd7：%d\\\\n,\u6c14\u4f53\u5f02\u5e38\u6807\u5fd7：%d\\\\n,\u5fc3\u7387\u503c：%d BPM\\\\n\u7684\u8fd9\u4e2a\u534f\u8bae\u8fdb\u884c\u4e0a\u62a5\u6e29\u5ea6，\u6e7f\u5ea6\u6570\u636e，\u6454\u5012\u6807\u5fd7，\u5fc3\u7387\u5f02\u5e38\u6807\u5fd7ÿ<\/p>\n","protected":false},"author":2,"featured_media":65258,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[6766,6509,81,947,50,87,292],"topic":[],"class_list":["post-65260","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-server","tag-6766","tag-6509","tag-python","tag-websocket","tag-50","tag-87","tag-292"],"yoast_head":"\n