liyuezong
/
SmartPDCode


			
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628162916301631163216331634163516361637163816391640164116421643164416451646164716481649165016511652165316541655165616571658165916601661166216631664166516661667166816691670167116721673167416751676167716781679168016811682168316841685168616871688168916901691169216931694169516961697169816991700170117021703170417051706170717081709171017111712171317141715171617171718171917201721172217231724172517261727172817291730173117321733173417351736173717381739174017411742174317441745174617471748174917501751175217531754175517561757175817591760176117621763176417651766176717681769177017711772177317741775177617771778177917801781178217831784178517861787178817891790179117921793179417951796179717981799180018011802180318041805180618071808180918101811181218131814181518161817181818191820182118221823182418251826182718281829183018311832183318341835183618371838183918401841184218431844184518461847184818491850185118521853185418551856185718581859186018611862186318641865186618671868186918701871187218731874187518761877187818791880188118821883188418851886188718881889189018911892189318941895189618971898189919001901190219031904190519061907190819091910191119121913191419151916191719181919192019211922192319241925192619271928192919301931193219331934193519361937193819391940194119421943194419451946194719481949195019511952195319541955195619571958195919601961196219631964196519661967196819691970197119721973197419751976197719781979198019811982198319841985198619871988198919901991199219931994199519961997199819992000200120022003200420052006200720082009201020112012201320142015201620172018201920202021202220232024202520262027202820292030203120322033203420352036203720382039204020412042204320442045204620472048204920502051205220532054205520562057205820592060206120622063206420652066206720682069207020712072207320742075207620772078207920802081208220832084208520862087208820892090209120922093209420952096209720982099210021012102210321042105210621072108210921102111211221132114211521162117211821192120212121222123212421252126212721282129213021312132213321342135213621372138213921402141214221432144214521462147214821492150215121522153215421552156215721582159216021612162216321642165216621672168216921702171217221732174217521762177217821792180218121822183218421852186218721882189219021912192219321942195219621972198219922002201220222032204220522062207220822092210221122122213221422152216221722182219222022212222222322242225222622272228222922302231223222332234223522362237223822392240224122422243224422452246224722482249225022512252225322542255225622572258225922602261226222632264226522662267226822692270227122722273227422752276227722782279228022812282228322842285228622872288228922902291229222932294229522962297229822992300
							<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport"
            content="width=device-width, initial-scale=1.0, user-scalable=yes">
        <title>电力监测系统 | WebSocket实时数据</title>
        <style>
        * {
            box-sizing: border-box;
            font-family: 'Inter', system-ui, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
        }
        body {
            background: #eef2f8;
            margin: 0;
            padding: 24px 20px;
            min-height: 100vh;
        }
        .dashboard { max-width: 1600px; width: 100%; margin: 0 auto; }
        .ws-status-bar {
            background: white; border-radius: 60px; padding: 8px 20px; margin-bottom: 20px;
            display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05); border: 1px solid #e2edf7;
        }
        .ws-indicator { display: flex; align-items: center; gap: 8px; }
        .ws-led { width: 12px; height: 12px; border-radius: 50%; background-color: #aaa; transition: background-color 0.3s; }
        .ws-led.connected { background-color: #2ecc71; box-shadow: 0 0 6px #2ecc71; }
        .ws-led.disconnected { background-color: #e74c3c; }
        .ws-led.connecting { background-color: #f39c12; animation: pulse 1s infinite; }
        @keyframes pulse { 0% { opacity: 0.5; } 50% { opacity: 1; } 100% { opacity: 0.5; } }
        .ws-url { font-family: monospace; font-size: 0.8rem; color: #4a627a; }
        .reconnect-btn { background: #eef2f8; border: none; border-radius: 40px; padding: 4px 16px; font-size: 0.7rem; cursor: pointer; color: #1f6392; }
        .reconnect-btn:hover { background: #dfe7f0; }
        .tabs { display: flex; gap: 12px; margin-bottom: 24px; border-bottom: 2px solid #dfe8f0; padding-bottom: 8px; flex-wrap: wrap; }
        .tab-btn { background: none; border: none; padding: 10px 24px; font-size: 1rem; font-weight: 600; color: #6c8eae; cursor: pointer; border-radius: 40px; transition: all 0.2s; }
        .tab-btn.active { background: #1f6392; color: white; box-shadow: 0 4px 12px rgba(31,99,146,0.3); }
        .tab-btn:hover:not(.active) { background: #e2eaf1; color: #2c5a7a; }

        .tab-key-btn { background: none; border: none; padding: 10px 24px; font-size: 1rem; font-weight: 600; color: #6c8eae; cursor: pointer; border-radius: 10px;transition: all 0.2s; }
        .tab-key-btn.active { background: #a85b1b; color: white; box-shadow: 0 4px 12px rgba(241, 241, 240, 0.3); }
        .tab-key-btn:hover:not(.active) { background: #799143; color: #5a7e20; }

        .page { display: none; }
        .page.active-page { display: block; }
        .header { text-align: center; margin-bottom: 28px; }
        .header h1 { font-size: 1.7rem; font-weight: 600; background: linear-gradient(135deg, #1e2a3a, #0f2b3d); background-clip: text; -webkit-background-clip: text; color: transparent; margin: 0 0 6px 0; }
        .header p { color: #4a627a; font-size: 0.9rem; }
        .summary-panel {
            background: white; border-radius: 28px; padding: 16px 24px; margin-bottom: 20px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.05); border: 1px solid #e2edf7;
        }
        .summary-title { text-align: center; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1px; color: #7c9ab8; margin-bottom: 16px; }
        .summary-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; row-gap: 16px; }
        .summary-item { text-align: center; min-width: 120px; }
        .summary-label { font-size: 0.7rem; color: #7c9ab8; margin-bottom: 6px; }
        .summary-value { font-size: 1.4rem; font-weight: 700; color: #1e2f3c; }
        .summary-unit { font-size: 0.7rem; font-weight: 400; color: #7c9ab8; margin-left: 3px; }
        .table-wrapper {
            background: white; border-radius: 28px; box-shadow: 0 12px 30px rgba(0,0,0,0.08);
            overflow-x: auto; border: 1px solid #e2edf7; margin-bottom: 24px;
        }
        .power-table { width: 100%; border-collapse: separate; border-spacing: 0; min-width: 1300px; font-size: 0.85rem; }
        .power-table th { padding: 14px 10px; font-weight: 600; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.4px; color: #2c5a7a; text-align: center; background: #f9fbfe; border-bottom: 2px solid #dfe8f0; }
        .power-table td { padding: 12px 10px; text-align: center; border-bottom: 1px solid #edf2f7; color: #1e2f3c; font-weight: 500; }
        .numeric-value { font-weight: 600; }
        .unit-sub { font-size: 0.65rem; font-weight: 400; color: #7c9ab8; margin-left: 2px; }
        .energy-cell { background: #f4faf7; font-weight: 700; color: #1a6e55; }
        .power-bg { background: #fef9e6; }
        .reactive-bg { background: #f0f0fe; }
        .pf-cell { background: #f5f0fc; font-weight: 700; color: #5e3a8c; }
        .channel-badge { display: inline-flex; align-items: center; gap: 6px; }
        .ch-icon { background: #eef2fa; border-radius: 30px; padding: 3px 8px; font-size: 0.65rem; font-weight: 600; color: #1f6392; }
        .ph-icon { color: #070707; font-weight: 700; background: #85ddb1; display: inline-block; padding: 3px 12px; border-radius: 10px; font-size: 0.75rem;}
        .action-btn { background: #eef2f8; border: none; padding: 5px 14px; border-radius: 40px; font-size: 0.7rem; font-weight: 600; cursor: pointer; color: #2c6282; min-width: 64px; }
        .action-btn:hover { background: #dfe7f0; }
        .delay-badge { background: #eef2fa; border-radius: 20px; padding: 3px 8px; font-size: 0.65rem; font-weight: 600; display: inline-block; min-width: 70px; text-align: center; }
        .delay-idle { background: #e8f0fe; color: #4f7ea0; }
        .channel-off td:not(.energy-cell) { opacity: 0.7; background-color: #fefcf5; }
        .status-on { color: #2c8f6e; font-weight: 700; background: #e0f2e9; display: inline-block; padding: 3px 12px; border-radius: 30px; font-size: 0.75rem; }
        .status-off { color: #b33; font-weight: 700; background: #ffe6e5; display: inline-block; padding: 3px 12px; border-radius: 30px; font-size: 0.75rem; }
        .action-bar { display: flex; justify-content: flex-end; gap: 12px; margin-bottom: 16px; padding: 8px 0; flex-wrap: wrap; }
        .action-bar .btn-config, .action-bar .btn-threshold, .action-bar .btn-reset, 
        .action-bar .btn-on, .action-bar .btn-off, .action-bar .btn-alarm {
            background: #ffffffcc; backdrop-filter: blur(4px); border: 1px solid #cbdde9;
            border-radius: 40px; padding: 6px 18px; font-size: 0.75rem; font-weight: 600;
            cursor: pointer; position: relative;
        }
        .threshold-alarm { background-color: #ffe0e0 !important; color: #c00 !important; font-weight: 700; border-radius: 8px; }
        .threshold-low-alarm { background-color: #d4de94 !important; color: #c00 !important; font-weight: 700; border-radius: 8px; }
		.switch-btn { background: #eef2f8; border: none; padding: 5px 14px; border-radius: 40px; font-size: 0.7rem; font-weight: 600; cursor: pointer; color: #2c6282; min-width: 64px; }
        .switch-btn:hover { background: #dfe7f0; }
		.action-bar .btn-config, .action-bar .btn-threshold, .action-bar .btn-reset, .action-bar .btn-alarm { color: #1f6392; }
        .action-bar .btn-on { color: #2c8f6e; border-color: #2c8f6e; }
        .action-bar .btn-off { color: #b33; border-color: #b33; }
        .action-bar .btn-alarm { background: #fff3e0; border-color: #e6b800; color: #b8860b; }
        .action-bar .btn-alarm:hover { background: #ffe0b3; }
        .action-bar .btn-config:hover, .action-bar .btn-threshold:hover, .action-bar .btn-reset:hover, 
        .action-bar .btn-on:hover, .action-bar .btn-off:hover { background: white; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
        .alarm-badge { position: absolute; top: -8px; right: -8px; background-color: #e74c3c; color: white; border-radius: 20px; padding: 2px 8px; font-size: 0.65rem; font-weight: 600; min-width: 22px; text-align: center; box-shadow: 0 1px 3px rgba(0,0,0,0.2); }
        .env-cards { display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 24px; justify-content: space-between; }
        .env-card { background: white; border-radius: 24px; padding: 16px 20px; flex: 1; min-width: 140px; text-align: center; box-shadow: 0 4px 12px rgba(0,0,0,0.05); border: 1px solid #e2edf7; transition: transform 0.2s; }
        .env-card:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,0.1); }
        .env-card .env-label { font-size: 0.8rem; text-transform: uppercase; color: #358ade; letter-spacing: 1px; margin-bottom: 8px; }
        .env-card .env-value { font-size: 1.8rem; font-weight: 700; color: #1e2f3c; }
        .env-card .env-unit { font-size: 0.8rem; font-weight: 400; color: #7c9ab8; margin-left: 4px; }
        .env-card.alarm-warning .env-value { color: #e67e22; }
        .env-card.alarm-danger .env-value { color: #e74c3c; }
        .live-footer { margin-top: 24px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; background: rgba(255,255,245,0.7); backdrop-filter: blur(4px); padding: 8px 20px; border-radius: 60px; }
        .footer-status { display: flex; align-items: center; gap: 12px; font-size: 0.75rem; color: #4f6f8f; }
        .channel-jump { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; justify-content: center; }
        .jump-chip { background: #eef2f8; border-radius: 40px; padding: 4px 12px; font-size: 0.7rem; font-weight: 500; cursor: pointer; }
        .alarm-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
        .alarm-table th, .alarm-table td { padding: 10px 8px; text-align: left; border-bottom: 1px solid #e2edf7; }
        .alarm-table th { background: #f8fafd; font-weight: 600; color: #2c5a7a; }
        .modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; z-index: 2000; visibility: hidden; opacity: 0; transition: visibility 0.2s, opacity 0.2s; }
        .modal-overlay.active { visibility: visible; opacity: 1; }
        .modal-container { background: white; border-radius: 32px; width: 90%; max-width: 950px; max-height: 85vh; display: flex; flex-direction: column; overflow: hidden; }
        .modal-header { padding: 18px 24px; border-bottom: 1px solid #e9edf2; display: flex; justify-content: space-between; align-items: center; background: #fafcff; }
        .modal-header h3 { margin: 0; font-size: 1.3rem; font-weight: 700; color: #1e2a3a; }
        .modal-close { background: none; border: none; font-size: 1.8rem; cursor: pointer; color: #8ba3bc; }
        .modal-body { padding: 20px 24px; overflow-y: auto; flex: 1; }
        .modal-footer { padding: 16px 24px; border-top: 1px solid #e9edf2; display: flex; justify-content: flex-end; gap: 12px; background: #fafcff; }


        .modal-card-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; z-index: 2000; visibility: hidden; opacity: 0; transition: visibility 0.2s, opacity 0.2s; }
        .modal-card-overlay.active { visibility: visible; opacity: 1; }
        .modal-card-container { background: white; border-radius: 32px; width: 90%; max-width: 400px; max-height: 45vh; display: flex; flex-direction: column; overflow: hidden; }
        .modal-card-header { padding: 18px 24px; border-bottom: 1px solid #e9edf2; display: flex; justify-content: space-between; align-items: center; background: #fafcff; }
        .modal-card-header h3 { margin: 0; font-size: 1.3rem; font-weight: 300; color: #1e2a3a; }
        .modal-card-close { background: none; border: none; font-size: 1.8rem; cursor: pointer; color: #8ba3bc; }
        .modal-card-body { padding: 20px 24px; overflow-y: auto; flex: 1; }
        .modal-card-footer { padding: 16px 24px; border-top: 1px solid #e9edf2; display: flex; justify-content: flex-end; gap: 12px; background: #fafcff; }


        .btn-cancel-modal { background: #eef2f8; border: none; border-radius: 40px; padding: 8px 22px; font-weight: 600; cursor: pointer; color: #2c6282; }
        .btn-confirm { background: #1f6392; color: white; border: none; border-radius: 40px; padding: 8px 22px; font-weight: 600; cursor: pointer; }
        .config-card { background: white; border-radius: 28px; box-shadow: 0 12px 30px rgba(0,0,0,0.08); padding: 28px 32px; max-width: 650px; margin: 0 auto; }
        .config-group { margin-bottom: 20px; }
        .config-group label { display: block; font-weight: 600; color: #2c5a7a; margin-bottom: 8px; font-size: 0.85rem; }
        .config-group input, .config-group select { width: 100%; padding: 12px 16px; border: 1px solid #cbdde9; border-radius: 28px; font-size: 0.9rem; background: #f9fbfe; }
        .save-config-btn { background: #1f6392; color: white; border: none; border-radius: 40px; padding: 12px 28px; font-size: 0.9rem; font-weight: 600; cursor: pointer; width: 100%; margin-top: 16px; }
        .save-config-btn:hover { background: #0e4b70; }
        .config-status { margin-top: 20px; padding: 12px; background: #e8f0fe; border-radius: 20px; font-size: 0.8rem; color: #2c5a7a; text-align: center; }
        .sub-hint { font-size: 0.7rem; color: #7c9ab8; margin-top: 4px; }
        .info-row { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid #e2edf7; }
        .info-label { font-weight: 600; color: #2c5a7a; }
        .info-value { font-weight: 500; color: #111111;}
        .datetime-set-group { display: flex; gap: 12px; margin-top: 8px; flex-wrap: wrap; }
        .datetime-set-group input { flex: 1; padding: 10px 14px; border: 1px solid #cbdde9; border-radius: 28px; }
        .btn-small { background: #eef2f8; border: none; border-radius: 40px; padding: 6px 18px; font-size: 0.75rem; font-weight: 600; cursor: pointer; color: #2c6282; }
        .btn-small:hover { background: #dfe7f0; }

        .btn-reboot { background: #eef2f8; border: none; border-radius: 40px; padding: 6px 18px; font-size: 0.75rem; font-weight: 700; cursor: pointer; color: #2c6282; }
        .btn-reboot:hover { background: #dfe7f0; }


        .config-row { background: #f9fbfe; border-radius: 20px; padding: 14px 18px; border: 1px solid #eef2f8; margin-bottom: 16px; }
        .config-row-title { font-weight: 700; font-size: 0.9rem; color: #2c5a7a; margin-bottom: 12px; }
        .config-inputs { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; }
        .config-item { display: flex; flex-direction: column; gap: 4px; min-width: 100px; }
        .config-item label { font-size: 0.75rem; font-weight: 600; color: #5f7e9c; }
        .config-item input { background: white; border: 1px solid #cbdde9; border-radius: 28px; padding: 8px 12px; width: 120px; font-size: 0.8rem; }

        .config-batch-row { background: #e7f0fd; border-radius: 20px; padding: 14px 18px; border: 1px solid #7386a3; margin-bottom: 16px; }
        .config-batch-item { display: flex; flex-direction: column; gap: 4px; min-width: 100px; }
        .config-batch-item label { font-size: 0.85rem; font-weight: 600; color: #114579; }
        .config-batch-item input { background: white; border: 1px solid #677883; border-radius: 28px; padding: 8px 12px; width: 120px; font-size: 0.8rem; }

        .save-channel-config-btn { background: #1f6392; color: white; border: none; border-radius: 32px; padding: 6px 20px; font-size: 0.7rem; font-weight: 600; cursor: pointer; margin-left: auto; }
        .channel-select-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; }
        .channel-checkbox { display: flex; align-items: center; gap: 12px; padding: 8px 12px; background: #f9fbfe; border-radius: 40px; }
        .channel-checkbox input { width: 18px; height: 18px; cursor: pointer; }
        .channel-checkbox label { font-weight: 600; color: #1e2f3c; cursor: pointer; flex: 1; }
        .select-all-row { display: flex; gap: 16px; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid #e2edf7; }
        .select-all-btn { background: #eef2f8; border: none; border-radius: 30px; padding: 6px 16px; font-size: 0.7rem; font-weight: 600; cursor: pointer; color: #2c6282; }
    
    </style>
    </head>

    <body>
        <div class="dashboard">
            <div class="ws-status-bar">
                <div class="ws-indicator">
                    <div class="ws-led" id="wsLed"></div>
                    <span id="wsStatusText">未连接</span>
                </div>
                <button class="reconnect-btn" id="reconnectBtn">🔌 重新连接</button>
            </div>

            <div class="tabs">
                <button class="tab-btn active" data-page="monitor">📊 电力监测</button>
                <button class="tab-btn" data-page="network">🌐 网络配置</button>
                <button class="tab-btn" data-page="rs485">🔌 RS485配置</button>
                <button class="tab-btn" data-page="snmp">📡 SNMP配置</button>
                <button class="tab-btn" data-page="device">📟 设备信息</button>
            </div>

            <!-- 电力监测页面 -->
            <div id="monitorPage" class="page active-page">
                <div class="header">
                    <h1>🔌 三相进单相出多通道电力监测</h1>
                   <!-- <p>电压 · 电流 · 有功/无功/视在功率 · 功率因数 · 频率 · 耗电量 | 数据通过WebSocket推送</p> -->
                </div>
             
                <div class="summary-panel">
                    <div class="summary-title">📊 系统总览</div>
                    <div class="summary-grid">
                        <button class="tab-key-btn active" id="ALL">ALL</button>
                        <button class="tab-key-btn" id="L1">L1</button>
                        <button class="tab-key-btn" id="L2">L2</button>
                        <button class="tab-key-btn" id="L3">L3</button> 
                    </div>

                    <div class="summary-grid">

                        <div class="summary-item"><div class="summary-label" id="All-V">总电压 (V)</div><div class="summary-value" id="totalVoltage">0.0<span class="summary-unit">V</span></div></div>
                        <div class="summary-item"><div class="summary-label">总电流 (A)</div><div class="summary-value" id="totalCurrent">0.0<span class="summary-unit">A</span></div></div>
                        <div class="summary-item"><div class="summary-label">总有功功率 (kW)</div><div class="summary-value" id="totalActivePower">0<span class="summary-unit">W</span></div></div>
                        <div class="summary-item"><div class="summary-label">总无功功率 (kvar)</div><div class="summary-value" id="totalReactivePower">0<span class="summary-unit">var</span></div></div>
                        <div class="summary-item"><div class="summary-label">总视在功率 (kVA)</div><div class="summary-value" id="totalApparentPower">0<span class="summary-unit">VA</span></div></div>
                        <div class="summary-item"><div class="summary-label">总功率因数</div><div class="summary-value" id="totalPowerFactor">0.00<span class="summary-unit"></span></div></div>
                        <div class="summary-item"><div class="summary-label">总耗电量(kWh)</div><div class="summary-value" id="totalConsumer">0.00<span class="summary-unit">kWh</span></div></div>
                    </div>
                </div>

                <div class="action-bar">
                    <button class="btn-config" id="openDelayConfigBtn">⚙️ 延时配置</button>
                    <button class="btn-threshold" id="openThresholdConfigBtn">⚠️ 阈值配置</button>
                    <button class="btn-reset" id="openResetEnergyModalBtn">↻ 重置耗电量(可选通道)</button>
                    <button class="btn-on" id="allOnBtn">🔛 全部开启</button>
                    <button class="btn-off" id="allOffBtn">⛔ 全部关闭</button>
                    <button class="btn-on" id="cleanSoundLight">✏️ 清除声光报警</button>
                    <button class="btn-alarm" id="openAlarmModalBtn">🔔 报警记录<span id="alarmCountBadge" class="alarm-badge" style="display:none;">0</span></button>
                </div>
                <div class="channel-jump" id="channelJumpContainer"></div>
                <div class="table-wrapper">
                    <table class="power-table"  id="powerTable">
                        <thead>
                            <tr><th>通道</th><th>相序</th><th>电压 (V)</th><th>电流 (A)</th><th>有功 (kW)</th><th>无功 (kvar)</th><th>视在 (kVA)</th><th>功率因数</th><th>频率 (Hz)</th><th>累计耗电 (kWh)</th><th>开关延时</th><th>开关状态</th><th>操作</th></tr>
                        </thead>
                        <tbody id="tableBody"><tr><td colspan="12">等待WebSocket数据...</td></tr></tbody>
                    </table>
                </div>
                <div class="env-cards">
                    <div class="env-card" id="tempCard"><div class="env-label">🌡️ 温度</div><div class="env-label" id="tempStatus">--</div><div class="env-value" id="tempValue">--<span class="env-unit">°C</span></div></div>
                    <div class="env-card" id="humiCard"><div class="env-label">💧 湿度</div><div class="env-label" id="humiStatus">--</div><div class="env-value" id="humiValue">--<span class="env-unit">%RH</span></div></div>
                    <div class="env-card" id="smokeCard"><div class="env-label">🔥 烟雾</div><div class="env-label" id="smokeStatus">--</div><div class="env-value" id="smokeValue">--<span class="env-unit">ppm</span></div></div>
                    <div class="env-card" id="co2Card"><div class="env-label">🌫️ CO₂浓度</div><div class="env-label" id="co2Status">--</div><div class="env-value" id="co2Value">--<span class="env-unit">ppm</span></div></div>
                </div>
            </div>

            <!-- 网络配置页面 -->
            <div id="networkPage" class="page">
                <div class="header"><h1>🌐 网络配置</h1><p>配置设备网络参数 (IP/掩码/网关/DNS)</p></div>
                <div class="config-card">
                    <div class="config-group"><label>📡 IP获取模式</label><select id="ipMode"><option value="auto">自动 (DHCP)</option><option value="manual">手动 (静态IP)</option></select></div>
                    <div id="staticIpGroup">
                        <div class="config-group"><label id="ip_lable">📌 IP地址</label><input type="text" id="ipAddress" placeholder="192.168.1.100"></div>
                        <div class="config-group"><label id="mask_lable">🔗 子网掩码</label><input type="text" id="subnetMask" placeholder="255.255.255.0"></div>
                        <div class="config-group"><label id="gate_lable">🚪 默认网关</label><input type="text" id="gateway" placeholder="192.168.1.1"></div>
                    </div>
                    <div class="config-group"><label>🌍 首选DNS服务器</label><input type="text" id="dns1" placeholder="114.114.114.114"></div>
                    <div class="config-group"><label>🌍 备用DNS服务器</label><input type="text" id="dns2" placeholder="8.8.8.8"></div>
                    <button class="save-config-btn" id="saveNetConfigBtn">💾 保存网络配置</button>
                    <div class="config-status" id="netStatusMsg">当前配置: 未加载</div>
                </div>
            </div>

            <!-- RS485配置页面 -->
            <div id="rs485Page" class="page">
                <div class="header"><h1>🔌 RS485 通讯配置</h1><p>配置串口通讯参数 (主从机模式/地址/波特率)</p></div>
                <div class="config-card">
                    <div class="config-group"><label>🎛️ 主从机模式</label><select id="rs485Mode"><option value="master">主机 (Master)</option><option value="slave">从机 (Slave)</option></select></div>
                    <div class="config-group"><label>📍 设备地址 (1-247)</label><input type="number" id="rs485Addr" min="1" max="247" value="1" step="1"></div>
                    <div class="config-group"><label>⚡ 波特率 (bps)</label>
                        <select id="rs485Baudrate">
                            <option value="9600">9600</option>
                            <option value="19200">19200</option>
                            <option value="38400">38400</option>
                            <option value="57600">57600</option>
                            <option value="115200">115200</option>
                        </select>
                    </div>
                    <button class="save-config-btn" id="saveRs485ConfigBtn">💾 保存485配置</button>
                    <div class="config-status" id="rs485StatusMsg">当前配置: 未加载</div>
                </div>
            </div>

            <!-- SNMP配置页面 -->
            <div id="snmpPage" class="page">
                <div class="header"><h1>📡 SNMP 配置</h1><p>配置简单网络管理协议参数 (社团名称/TRAP目标)</p></div>
                <div class="config-card">
                    <div class="config-group"><label>🔐 只读社团名称 (Read-Only)</label><input type="text" id="snmpReadCommunity" placeholder="public" value="public"></div>
                    <div class="config-group"><label>✏️ 读写社团名称 (Read-Write)</label><input type="text" id="snmpWriteCommunity" placeholder="private" value="private"></div>
                    <div class="config-group"><label>🔌 TRAP状态</label><select id="snmpTrapStatus"><option value="open">开启 (Open)</option><option value="close">关闭 (Close)</option></select></div>
                    <div class="config-group"><label id="trapAddr">📡 TRAP目标IP地址</label><input type="text" id="snmpTrapIp" placeholder="192.168.1.100"></div>
                    <div class="sub-hint">TRAP将用于发送告警信息（如阈值超限、开关状态变化等）</div>
                    <button class="save-config-btn" id="saveSnmpConfigBtn">💾 保存SNMP配置</button>
                    <div class="config-status" id="snmpStatusMsg">当前配置: 未加载</div>
                </div>
            </div>
            <!-- 设备信息页面 -->
            <div id="devicePage" class="page">
                <div class="header"><h1>📟 设备信息</h1><p>查看和设置系统时间、固件版本等信息</p></div>
                <div class="config-card">
                    <div class="info-row"><span class="info-label">设备型号:</span><span class="info-value">SmartPDU</span></div>
                    <div class="info-row"><span class="info-label">通道数:</span><span class="info-value" id="deviceChannel"></span></div>
                    <div class="info-row"><span class="info-label">供电类型:</span><span class="info-value" id="powerType"></span></div>
                    <div class="info-row"><span class="info-label">控制板数:</span><span class="info-value" id="controlBoard"></span></div>
                    <div class="info-row"><span class="info-label">序列号:</span><span class="info-value" id="serivalNumber">SN20241206001</span></div>
                    <div class="info-row"><span class="info-label">软件版本:</span><span class="info-value" id="softVersion"></span></div>
                    <div class="info-row"><span class="info-label">时区:</span><span class="info-value" id="zone"></span></div>
                    <div class="info-row"><span class="info-label">当前系统时间:</span><span class="info-value" id="systemTimeDisplay">--:--:--</span></div>
                    <div class="config-group" style="margin-top: 20px;">
                        <label>⏰ 设置系统时间</label>
                        <div class="config-card">
                            <div class="config-group"><label>⚡ 时区</label>
                                <select id="ntpZone">
                                   <option value="0">0</option>
                                   <option value="1">+1</option><option value="2">+2</option><option value="3">+3</option><option value="4">+4</option><option value="5">+5</option><option value="6">+6</option><option value="7">+7</option><option value="8">+8</option><option value="9">+9</option><option value="10">+10</option><option value="11">+11</option><option value="12">+12</option>                
                                   <option value="-1">-1</option><option value="-2">-2</option><option value="-3">-3</option><option value="-4">-4</option><option value="-5">-5</option><option value="-6">-6</option><option value="-7">-7</option><option value="-8">-8</option><option value="-9">-9</option><option value="-10">-10</option><option value="-11">-11</option><option value="-12">-12</option>
                                </select>
                            </div>
                            <div class="datetime-set-group">
                                <input type="datetime-local" step="1" id="newSystemTime">
                                <button class="btn-small" id="setSystemTimeBtn">同步时间</button>
                                <button class="btn-reboot" id="setSystemRebootBtn">重启设备</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 模态框 -->
        <div id="alarmModal" class="modal-overlay">
            <div class="modal-container">
                <div class="modal-header"><h3>🔔 报警记录</h3><button class="modal-close" id="closeAlarmModalBtn">&times;</button></div>
                <div class="modal-body"><div id="alarmListContainer"><div style="text-align:center;color:#888;padding:20px;">暂无报警记录</div></div></div>
                <div class="modal-footer"><button class="btn-cancel-modal" id="clearAlarmBtn">清空记录</button><button class="btn-cancel-modal" id="cancelAlarmModalBtn">关闭</button></div>
            </div>
        </div>
        
        <div id="delayModal" class="modal-overlay">
            <div class="modal-container">
                <div class="modal-header"><h3>⏱️ 通道延时设置</h3><button class="modal-close" id="closeDelayModalBtn">&times;</button></div>
                <div class="modal-body"><div id="delayGrid"></div></div>
                <div class="modal-footer"><button class="btn-cancel-modal" id="cancelDelayModalBtn">关闭</button></div>
            </div>
        </div>

        
        <div id="thresholdModal" class="modal-overlay">
            <div class="modal-container">
                <div class="modal-header"><h3>⚠️ 阈值配置</h3><button class="modal-close" id="closeThresholdModalBtn">&times;</button></div>
                <div class="modal-body"><div id="pathchGrid"></div><div id="thresholdGrid"></div></div>
                <div class="modal-footer"><button class="btn-cancel-modal" id="cancelThresholdModalBtn">关闭</button></div>
            </div>
        </div>
        <div id="resetEnergyModal" class="modal-overlay">
            <div class="modal-container">
                <div class="modal-header"><h3>↻ 选择要重置耗电量的通道</h3><button class="modal-close" id="closeResetModalBtn">&times;</button></div>
                <div class="modal-body">
                    <div class="select-all-row"><button class="select-all-btn" id="selectAllChannels">全选</button><button class="select-all-btn" id="deselectAllChannels">全不选</button></div>
                    <div class="channel-select-list" id="channelSelectList"></div>
                </div>
                <div class="modal-footer"><button class="btn-cancel-modal" id="cancelResetModalBtn">取消</button><button class="btn-confirm" id="confirmResetEnergyBtn">确认重置</button></div>
            </div>
        </div>

        <!-- Temp 模态框 -->
        <div id="tempCardModal" class="modal-card-overlay">
            <div class="modal-card-container">
                <div class="modal-card-header"><h3>🌡️ 温度配置</h3><button class="modal-card-close" id="closeTempModalBtn">&times;</button></div>
                <div class="modal-card-body">
                    <div class="config-group"><label>🔺最大值</label><input type="text" id="tempMax" placeholder="25.5"></div>
                    <div class="config-group"><label>🔻最小值</label><input type="text" id="tempMin" placeholder="12.6"></div>
                </div>
                <div class="modal-card-footer"><button class="btn-confirm" id="confirmTempThrBtn">提交</button></div>
            </div>
        </div>

        <div id="humiCardModal" class="modal-card-overlay">
            <div class="modal-card-container">
                <div class="modal-card-header"><h3>💧 湿度配置</h3><button class="modal-card-close" id="closeHumiModalBtn">&times;</button></div>
                <div class="modal-card-body">
                    <div class="config-group"><label>🔺最大值</label><input type="text" id="humiMax" placeholder="80.5"></div>
                    <div class="config-group"><label>🔻最小值</label><input type="text" id="humiMin" placeholder="50.6"></div>
                </div>
                <div class="modal-card-footer"><button class="btn-confirm" id="confirmHumiThrBtn">提交</button></div>
            </div>
        </div>


        <div id="smokeCardModal" class="modal-card-overlay">
            <div class="modal-card-container">
                <div class="modal-card-header"><h3>🔥 烟雾配置</h3><button class="modal-card-close" id="closeSmokeModalBtn">&times;</button></div>
                <div class="modal-card-body">
                    <div class="config-group"><label>🔺最大值</label><input type="text" id="smokeMax" placeholder="25.5"></div>
                    <div class="config-group"><label>🔻最小值</label><input type="text" id="smokeMin" placeholder="12.6"></div>
                </div>
                <div class="modal-card-footer"><button class="btn-confirm" id="confirmSmokeThrBtn">提交</button></div>
            </div>
        </div>


        <div id="co2CardModal" class="modal-card-overlay">
            <div class="modal-card-container">
                <div class="modal-card-header"><h3>🌫️ CO₂配置</h3><button class="modal-card-close" id="closeCo2ModalBtn">&times;</button></div>
                <div class="modal-card-body">
                    <div class="config-group"><label>🔺最大值</label><input type="text" id="Co2Max" placeholder="25.5"></div>
                    <div class="config-group"><label>🔻最小值</label><input type="text" id="Co2Min" placeholder="12.6"></div>
                </div>
                <div class="modal-card-footer"><button class="btn-confirm" id="confirmCo2ThrBtn">提交</button></div>
            </div>
        </div>
        
        <script>
            const MAGIC = 0xdead;

            const PKT_TYPE = function() {
                var len = 0;
                return {
                    NEW_PKT_TYPE_DEVICE_INFO: len++,
                    NEW_PKT_TYPE_ELE_INFO: len++,
                    NEW_PKT_TYPE_SENSOR: len++,
                    NEW_PKT_TYPE_NETWORK: len++,
                    NEW_PKT_TYPE_RS485: len++,
                    NEW_PKT_TYPE_SNMP: len++,
                    NEW_PKT_TYPE_WANNING: len++,
                    NEW_PKT_TYPE_NTP :len++,
                }
            }();

            const SUB_POWER_TYPE = function() {
                var len = 0;
                return {
                    NEW_SUB_PKT_TYPE_ELE_DATA_L1: len++,
                    NEW_SUB_PKT_TYPE_ELE_DATA_L2: len++,
                    NEW_SUB_PKT_TYPE_ELE_DATA_L3: len++,
                    NEW_SUB_PKT_TYPE_ELE_DATA_INFO: len++,
                    NEW_SUB_PKT_TYPE_ELE_DATA_ALL: len++,
                    NEW_SUB_PKT_TYPE_ELE_DATA_THR: len++,
                    NEW_SUB_PKT_TYPE_ELE_DELAY: len++,
                    NEW_SUB_PKT_TYPE_ELE_CLEAR_CONSUMER: len++,
                    NEW_SUB_PKT_TYPE_ELE_CTRL: len++,
                    NEW_SUB_PKT_TYPE_ELE_ALL_CTRL: len++,
                    NEW_SUB_PKT_TYPE_ELE_BATCH: len++,
                }
            }();
            const SUB_SENSOR_TYPE = function() {
                var len = 0;
                return {
                    NEW_SUB_PKT_TYPE_HUMI: len++,
                    NEW_SUB_PKT_TYPE_TEMP: len++,
                    NEW_SUB_PKT_TYPE_SMOKE: len++,
                    NEW_SUB_PKT_TYPE_CO2: len++,
                }
            }();
            const SUB_WANNING_TYPE = function(){
                var len = 0;
                return{
                    NEW_SUB_PKT_TYPE_WANNING_CLEAN:len++,
                    NEW_SUB_PKT_TYPE_WANNING_SOUND_LIGHT_CLEAN:len++,
                }
            }();

            function array_set(array, str, offset) {
                const encoder = new TextEncoder(); 
                const buffer = encoder.encode(str);
                array.set(buffer, offset);          
            }
            function array_to_string(data) {
                const decoder = new TextDecoder('utf-8');
                const decoded = decoder.decode(data);
                const cleaned = decoded.replace(/\0/g, '');
                return cleaned;
            }
            function array_cat(a1, a2) {
                var tlen = a1.byteLength + a2.byteLength;
                var buffer = new ArrayBuffer(tlen);
                var vw = new Uint8Array(buffer);

                var vw1 = new Uint8Array(a1);
                for (var i = 0; i < a1.byteLength; i++) {
                    vw[i] = vw1[i];
                }

                var vw2 = new Uint8Array(a2);
                for (var i = 0; i < a2.byteLength; i++) {
                    vw[i + a1.byteLength] = vw2[i];
                }
                return buffer;
            }

            function bin_to_hdr(bin) {
                var tmp, length = 0;
                tmp = new DataView(bin, length); this.magic = tmp.getUint16(0, true);  length += 2;
                tmp = new DataView(bin, length); this.addr = tmp.getUint8(0, true);    length += 1;
                tmp = new DataView(bin, length); this.type = tmp.getUint8(0, true);    length += 1;
                tmp = new DataView(bin, length); this.subtype = tmp.getUint8(0, true); length += 1;
                tmp = new DataView(bin, length); this.nack = tmp.getUint8(0, true);    length += 1;
                tmp = new DataView(bin, length); this.flag = tmp.getUint32(0, true);   length += 4;
                tmp = new DataView(bin, length); this.dlen = tmp.getUint32(0, true);   length += 4;
                this.len = length;
            }

            function mk_hdr_bin(addr, type, subtype, nack, flag, dlen) {
                var tmp, length = 0;
                var t = MAGIC;
                var buffer = new ArrayBuffer(14);
                tmp = new DataView(buffer, length); tmp.setUint16(0, t, true);          length += 2; //MAGIC
                tmp = new DataView(buffer, length); tmp.setUint8(0, addr, true);        length += 1; //addr
                tmp = new DataView(buffer, length); tmp.setUint8(0, type, true);        length += 1; //type
                tmp = new DataView(buffer, length); tmp.setUint8(0, subtype, true);     length += 1; //subtype
                tmp = new DataView(buffer, length); tmp.setUint8(0, nack, true);        length += 1; //nack
                tmp = new DataView(buffer, length); tmp.setUint32(0, flag, true);       length += 4; //flag
                tmp = new DataView(buffer, length); tmp.setUint32(0, dlen, true);       length += 4; //dlen
                return buffer;
            }

            function bin_to_device_info(bin) {
                var tmp, bin2, length = 0;
                tmp = new DataView(bin, length); this.chs = tmp.getUint8(0, true);          length += 1;
                tmp = new DataView(bin, length); this.power_type = tmp.getInt8(0, true);   length += 1;
                tmp = new DataView(bin, length); this.zone = tmp.getUint8(0, true);         length += 1;
                tmp = new DataView(bin, length); this.board_cnt = tmp.getUint8(0, true);    length += 1;

                this.soft_version = array_to_string(bin.slice(length, 32));                 length += 32;
                this.hard_version = array_to_string(bin.slice(length, length + 32));        length += 32;
                this.date         = array_to_string(bin.slice(length, length + 16));        length += 16;
                this.time         = array_to_string(bin.slice(length, length + 16));        length += 16;
                
                this.len = length;
            }

            function bin_to_power_th(bin) {
                var tmp, length = 2;
                tmp = new DataView(bin, length); this.v_upper = tmp.getFloat32(0, true); length += 4;
                tmp = new DataView(bin, length); this.v_lower = tmp.getFloat32(0, true); length += 4;
                tmp = new DataView(bin, length); this.c_upper = tmp.getFloat32(0, true); length += 4;
                tmp = new DataView(bin, length); this.p_upper = tmp.getFloat32(0, true); length += 4;
                tmp = new DataView(bin, length); this.w_upper = tmp.getFloat32(0, true); length += 4;
                this.len = length;
            }

            function bin_to_sensor(bin){
                var tmp, length = 0;
                this.name = array_to_string(bin.slice(length, 32));                              length += 32;
                tmp = new DataView(bin, length); this.status = tmp.getUint8(0, true);            length += 1;
                tmp = new DataView(bin, length); this.v_max_wrn = tmp.getUint8(0, true);         length += 1;
                tmp = new DataView(bin, length); this.v_min_wrn = tmp.getUint8(0, true);         length += 1;
                tmp = new DataView(bin, length); this.value = tmp.getFloat32(0, true);           length += 4;
                tmp = new DataView(bin, length); this.v_max = tmp.getFloat32(0, true);           length += 4;
                tmp = new DataView(bin, length); this.v_min = tmp.getFloat32(0, true);           length += 4;
                this.len = length;               
            }

            function bin_to_network(bin)
            {
                var tmp, length = 0;
                tmp = new DataView(bin, length); this.mode = tmp.getUint8(0, true);                 length += 1;
                this.ipaddr = array_to_string(bin.slice(length, length+48));                        length += 48;
                this.mask = array_to_string(bin.slice(length, length+48));                          length += 48;
                this.gateway = array_to_string(bin.slice(length, length+48));                       length += 48;
                this.dns1 = array_to_string(bin.slice(length, length+48));                          length += 48;
                this.dns2 = array_to_string(bin.slice(length, length+48));                          length += 48;
                this.len = length;  
            }
            function bin_to_rs485(bin)
            {
                var tmp, length = 0;
                tmp = new DataView(bin, length); this.mode = tmp.getUint8(0, true);                 length += 1;
                tmp = new DataView(bin, length); this.addr = tmp.getUint8(0, true);                 length += 1;
                tmp = new DataView(bin, length); this.baud = tmp.getUint32(0, true);                 length += 4;
                this.len = length;
            }

            function bin_to_snmp(bin)
            {
                var tmp, length = 0;
                tmp = new DataView(bin, length); this.mode = tmp.getUint8(0, true);                   length += 1;
                tmp = new DataView(bin, length); this.version = tmp.getUint8(0, true);                length += 1;
                this.publics = array_to_string(bin.slice(length, length+10));                         length += 10;
                this.privates = array_to_string(bin.slice(length, length+10));                        length += 10;
                tmp = new DataView(bin, length); this.trapmode = tmp.getUint8(0, true);               length += 1;
                this.nms_ip = array_to_string(bin.slice(length, length+32));                          length += 32;
                this.len = length;
            }
            function bin_to_wanning_count(bin)
            {
                var tmp, length = 0;
                tmp = new DataView(bin, length); this.count = tmp.getUint16(0, true);                   length += 2;
                this.len = length;
            }
            function bin_to_wanning(bin)
            {
                var tmp, length = 0;
                tmp = new DataView(bin, length); this.type = tmp.getUint8(0, true);                   length += 1;
                this.date = array_to_string(bin.slice(length, length+32));                            length += 32;
                this.context = array_to_string(bin.slice(length, length+64));                         length += 64;
                this.len = length;
            }

            function bin_to_power(bin) {
                var tmp, length = 0;

                tmp = new DataView(bin, length); this.voltage = tmp.getFloat32(0, true);            length += 4;
                tmp = new DataView(bin, length); this.current = tmp.getFloat32(0, true);            length += 4;
                tmp = new DataView(bin, length); this.power = tmp.getFloat32(0, true);              length += 4;
                tmp = new DataView(bin, length); this.reactive_power = tmp.getFloat32(0, true);     length += 4;
                tmp = new DataView(bin, length); this.app_power = tmp.getFloat32(0, true);          length += 4;
                tmp = new DataView(bin, length); this.freq = tmp.getFloat32(0, true);               length += 4;
                tmp = new DataView(bin, length); this.factor = tmp.getFloat32(0, true);             length += 4;
                tmp = new DataView(bin, length); this.consump = tmp.getFloat32(0, true);            length += 4;
                this.len = length;
            }

            function bin_to_power_info(bin) {
                var tmp, length = 0;

                this.name = array_to_string(bin.slice(length, 16));                   length += 16;
                tmp = new DataView(bin, length); this.addr = tmp.getUint8(0, true);   length += 1;
                tmp = new DataView(bin, length); this.sch = tmp.getUint8(0, true);    length += 1;
                tmp = new DataView(bin, length); this.phse = tmp.getUint8(0, true);   length += 1;
                tmp = new DataView(bin, length); this.phse1 = tmp.getUint8(0, true);  length += 1;
                tmp = new DataView(bin, length); this.open = tmp.getUint8(0, true);   length += 1;
                tmp = new DataView(bin, length); this.close = tmp.getUint8(0, true);  length += 1;
                tmp = new DataView(bin, length); this.status = tmp.getUint8(0, true); length += 1;
                tmp = new DataView(bin, length); let val = tmp.getUint32(0, true);    length += 4;
                this.l1_v_upper = (val & 0x1); this.l1_v_lower = (val & 0x2); this.l1_c_upper = (val & 0x4); this.l1_p_upper = (val & 0x8); this.l1_w_upper = (val & 0x10);
                this.l2_v_upper = (val & (1 << 8)); this.l2_v_lower = (val & (1 << 9)); this.l2_c_upper = (val & (1 << 10)); this.l2_p_upper = (val & (1 << 11)); this.l2_w_upper = (val & (1 << 12));
                this.l3_v_upper = (val & (1 << 16)); this.l3_v_lower = (val & (1 << 17)); this.l3_c_upper = (val & (1 << 18)); this.l3_p_upper = (val & (1 << 19)); this.l3_w_upper = (val & (1 << 20));
                this.ph_loss1 = (val & (1 << 24)); this.ph_loss2 = (val & (1 << 25)); this.ph_loss3 = (val & (1 << 26));

                this.len = length;
            }
            function ctrl_to_bin(data)
            {
                var bin, tmp, length = 0;
                bin = new ArrayBuffer(data.len);
                tmp = new DataView(bin, length); tmp.setUint8(0, data.sch, true);    length  +=1;
                tmp = new DataView(bin, length); tmp.setUint8(0, data.status, true); length  +=1;
                return bin;
            }
            function reboot_to_bin(data)
            {
                var bin, tmp, length = 0;
                bin = new ArrayBuffer(data.len);
                tmp = new DataView(bin, length); tmp.setUint8(0, data.flag, true);    length  +=1;
                return bin;
            }
            function delay_to_bin(data)
            {
                var bin, tmp, length = 0;
                bin = new ArrayBuffer(data.len);
                tmp = new DataView(bin, length); tmp.setUint8(0, data.channel, true);    length  +=1;
                tmp = new DataView(bin, length); tmp.setUint8(0, data.open,    true);    length  +=1;
                tmp = new DataView(bin, length); tmp.setUint8(0, data.close,   true);    length  +=1;
                return bin;
            }
            function thr_to_bin(data)
            {
                var bin, tmp, length = 0;
                bin = new ArrayBuffer(data.len);
                tmp = new DataView(bin, length); tmp.setUint8(0, data.channel, true);    length  +=1;
                tmp = new DataView(bin, length); tmp.setUint16(0, data.en,     true);    length  +=2;
                tmp = new DataView(bin, length); tmp.setFloat32(0, data.vmax,   true);   length  +=4;
                tmp = new DataView(bin, length); tmp.setFloat32(0, data.vmin,   true);   length  +=4;
                tmp = new DataView(bin, length); tmp.setFloat32(0, data.cmax,   true);   length  +=4;
                tmp = new DataView(bin, length); tmp.setFloat32(0, data.pmax,   true);   length  +=4;
                tmp = new DataView(bin, length); tmp.setFloat32(0, data.wmax,   true);   length  +=4;
                return bin;
            }     
            function clear_consumer_bin(data)
            {
                var bin, tmp, length = 0;
                bin = new ArrayBuffer(data.len);
                tmp = new DataView(bin, length); tmp.setUint8(0, data.channel, true);    length  +=1;  
                return bin;             
            } 
            
            function  all_contol_to_bin(data)
            {
                var bin, tmp, length = 0;
                bin = new ArrayBuffer(data.len);
                tmp = new DataView(bin, length); tmp.setUint8(0, data.status, true);    length  +=1;  
                return bin;             
            } 
            function  sensor_thr_to_bin(data)
            {
                var bin, tmp, length = 0;
                bin = new ArrayBuffer(data.len);
                tmp = new DataView(bin, length); tmp.setFloat32(0, data.vmax,   true);   length  +=4;
                tmp = new DataView(bin, length); tmp.setFloat32(0, data.vmin,   true);   length  +=4;
                return bin;             
            } 

            function network_to_bin(data)
            {
                var bin, tmp, length = 0;
                bin = new ArrayBuffer(data.len);
                tmp = new DataView(bin, length); tmp.setUint8(0, data.ipMode,true);      length  += 1;
                array_set(new Uint8Array(bin), data.ipAddress, length);                  length  += 48;
                array_set(new Uint8Array(bin), data.subnetMask, length);                 length  += 48;
                array_set(new Uint8Array(bin), data.gateway, length);                    length  += 48;
                array_set(new Uint8Array(bin), data.dns1, length);                       length  += 48;
                array_set(new Uint8Array(bin), data.dns2, length);                       length  += 48;
                return bin;
            }

            function rs485_to_bin(data)
            {
                var bin, tmp, length = 0;
                bin = new ArrayBuffer(data.len);
                tmp = new DataView(bin, length); tmp.setUint8(0, data.rs485Mode,true);           length  += 1;
                tmp = new DataView(bin, length); tmp.setUint8(0, data.rs485Addr,true);           length  += 1;
                tmp = new DataView(bin, length); tmp.setUint32(0, data.rs485Baudrate,true);      length  += 4;
                return bin;
            }
            function snmp_to_bin(data)
            {
                var bin, tmp, length = 0;
                bin = new ArrayBuffer(data.len);
                tmp = new DataView(bin, length); tmp.setUint8(0, data.mode,true);           length  += 1;
                tmp = new DataView(bin, length); tmp.setUint8(0, data.version,true);        length  += 1;
                array_set(new Uint8Array(bin), data.snmpReadCommunity, length);                       length  += 10;
                array_set(new Uint8Array(bin), data.snmpWriteCommunity, length);                      length  += 10;
                tmp = new DataView(bin, length); tmp.setUint8(0, data.snmpTrapStatus,true);       length  += 1;
                array_set(new Uint8Array(bin), data.snmpTrapIp, length);                        length  += 32;
                return bin;
            }
            function ntp_to_bin(data)
            {
                var bin, tmp, length = 0;
                bin = new ArrayBuffer(data.len);
                tmp = new DataView(bin, length); tmp.setInt8(0, data.ntpZone,true);            length  += 1;
                array_set(new Uint8Array(bin), data.ntpDateTime, length);                      length  += 32;
                return bin;     
            }
            function wanning_to_bin(data)
            {
                var bin, tmp, length = 0;
                bin = new ArrayBuffer(data.len);
                tmp = new DataView(bin, length); tmp.setUint8(0, data.value,true);            length  += 1;
                return bin;     
            }

            function pkt_to_bin(addr, type, subtype, nack, flag, js) {
                var tmp;
                var buffer = new mk_hdr_bin(addr, type, subtype, nack, flag, js.len);
                switch(type)
                {
                    case PKT_TYPE.NEW_PKT_TYPE_DEVICE_INFO:
                    {
                        tmp = new reboot_to_bin(js);
                    }
                    break;
                    case PKT_TYPE.NEW_PKT_TYPE_ELE_INFO:
                    {
                        switch(subtype)
                        {
                            case SUB_POWER_TYPE.NEW_SUB_PKT_TYPE_ELE_CTRL:
                            {
                                tmp = new ctrl_to_bin(js);
                            }
                            break;
                            case SUB_POWER_TYPE.NEW_SUB_PKT_TYPE_ELE_DELAY:
                            {
                                tmp = new delay_to_bin(js);
                            }
                            break;
                            case SUB_POWER_TYPE.NEW_SUB_PKT_TYPE_ELE_DATA_THR:
                            case SUB_POWER_TYPE.NEW_SUB_PKT_TYPE_ELE_BATCH:
                            {
                                tmp = new thr_to_bin(js);
                            }
                            break;
                            case SUB_POWER_TYPE.NEW_SUB_PKT_TYPE_ELE_CLEAR_CONSUMER:
                            {
                                tmp = new clear_consumer_bin(js);
                            }
                            break;
                            case SUB_POWER_TYPE.NEW_SUB_PKT_TYPE_ELE_ALL_CTRL:
                            {
                                tmp = new all_contol_to_bin(js);
                            }
                            break;
                            default:
                            break;
                        }
                    }
                    break;
                    case PKT_TYPE.NEW_PKT_TYPE_SENSOR:
                    {
                        tmp = new sensor_thr_to_bin(js);
                    }
                    break;
                    case PKT_TYPE.NEW_PKT_TYPE_NETWORK:
                    {
                        tmp = new network_to_bin(js);
                    }
                    break;
                    case PKT_TYPE.NEW_PKT_TYPE_RS485:
                    {
                        tmp = new rs485_to_bin(js);
                    }
                    break;
                    case PKT_TYPE.NEW_PKT_TYPE_SNMP:
                    {
                        tmp = new snmp_to_bin(js);
                    }
                    break;
                    case PKT_TYPE.NEW_PKT_TYPE_NTP:
                    {
                        tmp = new ntp_to_bin(js);
                    }
                    break;
                    case PKT_TYPE.NEW_PKT_TYPE_WANNING:
                    {
                        switch(subtype)
                        {
                            case SUB_WANNING_TYPE.NEW_SUB_PKT_TYPE_WANNING_CLEAN:
                            {
                                tmp = new wanning_to_bin(js);
                            }
                            break;
                            case SUB_WANNING_TYPE.NEW_SUB_PKT_TYPE_WANNING_SOUND_LIGHT_CLEAN:
                            {
                                tmp = new wanning_to_bin(js);
                            }
                            break;
                            default:
                            break;
                        }
                    }
                    break;
                    default:
                    break;
                }
                return array_cat(buffer, tmp);
            }

            function single_ctrl(channel,status)
            {
                data = {sch:0,status:0,len:2};
                data.sch = channel;
                data.status = status;
                a = pkt_to_bin(0, PKT_TYPE.NEW_PKT_TYPE_ELE_INFO, SUB_POWER_TYPE.NEW_SUB_PKT_TYPE_ELE_CTRL, 0, 0, data);
                ws.send(a);
            }
            function channel_set_delay(channel,open,close)
            {
                data = [];
                data.channel = channel;
                data.open = open;
                data.close = close;
                data.len = 3;
                a = pkt_to_bin(0, PKT_TYPE.NEW_PKT_TYPE_ELE_INFO, SUB_POWER_TYPE.NEW_SUB_PKT_TYPE_ELE_DELAY, 0, 0, data);
                ws.send(a);
            }
            function channel_set_thr(channel,vmax,vmin,cmax,pmax,wmax)
            {
                data = [];
                data.channel = channel;
                data.en=0x1F;
                data.vmax = vmax;
                data.vmin = vmin;
                data.cmax = cmax;
                data.pmax = pmax;
                data.wmax = wmax;
                data.len = 23;
                a = pkt_to_bin(0, PKT_TYPE.NEW_PKT_TYPE_ELE_INFO, SUB_POWER_TYPE.NEW_SUB_PKT_TYPE_ELE_DATA_THR, 0, 0, data);
                ws.send(a);
            }
            function batch_set_thr(channel,vmax,vmin,cmax,pmax,wmax)
            {
                data = [];
                data.channel = 0;
                data.en=0x1F;
                data.vmax = vmax;
                data.vmin = vmin;
                data.cmax = cmax;
                data.pmax = pmax;
                data.wmax = wmax;
                data.len = 23;
                a = pkt_to_bin(0, PKT_TYPE.NEW_PKT_TYPE_ELE_INFO, SUB_POWER_TYPE.NEW_SUB_PKT_TYPE_ELE_BATCH, 0, 0, data);
                ws.send(a);               
            }

            function channel_clear_consumer(channel)
            {
                data = [];
                data.channel = channel;
                data.len = 1;
                a = pkt_to_bin(0, PKT_TYPE.NEW_PKT_TYPE_ELE_INFO, SUB_POWER_TYPE.NEW_SUB_PKT_TYPE_ELE_CLEAR_CONSUMER, 0, 0, data);
                ws.send(a);
            }
            function all_contrl(status)
            {
                data = [];
                data.status = status;
                data.len = 1;
                a = pkt_to_bin(0, PKT_TYPE.NEW_PKT_TYPE_ELE_INFO, SUB_POWER_TYPE.NEW_SUB_PKT_TYPE_ELE_ALL_CTRL, 0, 0, data);
                ws.send(a);                
            }

            function set_sensor_thr(vmax,vmin,type)
            {
                data = [];
                data.vmax = vmax;
                data.vmin = vmin;
                data.len = 8;
                a = pkt_to_bin(0, PKT_TYPE.NEW_PKT_TYPE_SENSOR,type, 0, 0, data);
                console.log(data.vmax,data.vmin);
                ws.send(a);                                
            }
            function clean_alarm()
            {
                data = [];
                data.value = 0;
                data.len = 1;
                a = pkt_to_bin(0, PKT_TYPE.NEW_PKT_TYPE_WANNING,SUB_WANNING_TYPE.NEW_SUB_PKT_TYPE_WANNING_CLEAN, 0, 0, data);
                ws.send(a);   
            }

            function clean_sound_light()
            {
                data = [];
                data.value = 0;
                data.len = 1;
                a = pkt_to_bin(0, PKT_TYPE.NEW_PKT_TYPE_WANNING,SUB_WANNING_TYPE.NEW_SUB_PKT_TYPE_WANNING_SOUND_LIGHT_CLEAN, 0, 0, data);
                ws.send(a);   
                showToast("清除声光报警", 1000);             
            }

            var temp = [];

            function bin_parse(bin) {
                var tmp, h = new bin_to_hdr(bin);
                if (h.nack == 1) {}
                var data = bin.slice(h.len);
                if (data.byteLength > 0 && h.dlen == data.byteLength) {
                    switch (h.type) {
                        case PKT_TYPE.NEW_PKT_TYPE_DEVICE_INFO:
                        {
                            h.device_info = new bin_to_device_info(data.slice(length));
                        }
                        break;
                        case PKT_TYPE.NEW_PKT_TYPE_ELE_INFO:
                        {
                            var length = 0;
                            switch(h.subtype)
                            {
                                case SUB_POWER_TYPE.NEW_SUB_PKT_TYPE_ELE_DATA_ALL:
                                {
                                    h.power_all = new bin_to_power(data.slice(length));
                                    length += h.power_all.len;
                                    for(var i = 0; i < 3;i++)
                                    {
                                        temp[i] = new bin_to_power(data.slice(length));
                                        length += temp[i].len;
                                    }
                                    h.power_all_l = temp;
                                }
                                break;
                                case SUB_POWER_TYPE.NEW_SUB_PKT_TYPE_ELE_DATA_INFO:
                                {
                                    for(let i = 0;i < device_info.chs;i++)
                                    {
                                        temp[i] = new bin_to_power_info(data.slice(length));
                                        length += temp[i].len;
                                    }
                                    h.power_info = temp;
                                }
                                break;
                                case SUB_POWER_TYPE.NEW_SUB_PKT_TYPE_ELE_DATA_L1:
                                {
                                    for(var i = 0; i < device_info.chs;i++)
                                    {
                                        temp[i] = new bin_to_power(data.slice(length));
                                        length += temp[i].len;
                                    }
                                    h.power_data = temp;
                                }
                                break;
                                case SUB_POWER_TYPE.NEW_SUB_PKT_TYPE_ELE_DATA_L2:
                                {
                                    for(var i = 0; i < device_info.chs;i++)
                                    {
                                        temp[i] = new bin_to_power(data.slice(length));
                                        length += temp[i].len;
                                    }
                                    h.power_data1 = temp;
                                }
                                break;
                                case SUB_POWER_TYPE.NEW_SUB_PKT_TYPE_ELE_DATA_L3:
                                {
                                    for(var i = 0; i < device_info.chs;i++)
                                    {
                                        temp[i] = new bin_to_power(data.slice(length));
                                        length += temp[i].len;
                                    }
                                    h.power_data2 = temp;
                                }
                                break;
                                case SUB_POWER_TYPE.NEW_SUB_PKT_TYPE_ELE_DATA_THR:
                                {
                                    for(var i = 0; i < device_info.chs;i++)
                                    {
                                        temp[i] = new bin_to_power_th(data.slice(length));
                                        length += temp[i].len;
                                    }	
                                    h.power_thr = temp;
                                }
                                break;
                                default:
                                break;
                            }
                        }
                        break;
                        case PKT_TYPE.NEW_PKT_TYPE_SENSOR:
                        {
                            var length = 0;
                            for(let i =0;i < 4; i++)
                            {
                                temp[i] = new bin_to_sensor(data.slice(length));
                                length += temp[i].len;
                            }
                            h.sensor_info = temp;
                        }
                        break;
                        case PKT_TYPE.NEW_PKT_TYPE_NETWORK:
                        {
                            h.network = new bin_to_network(data.slice(length));
                        }
                        break;
                        case PKT_TYPE.NEW_PKT_TYPE_RS485:
                        {
                            h.rs485 = new bin_to_rs485(data.slice(length));
                        }
                        break;
                        case PKT_TYPE.NEW_PKT_TYPE_SNMP:
                        {
                            h.snmp = new bin_to_snmp(data.slice(length));
                        }
                        break;
                        case PKT_TYPE.NEW_PKT_TYPE_WANNING:
                        {
                            var length = 0;
                            h.wanni_count = new bin_to_wanning_count(data.slice(length));
                            length += h.wanni_count.len;
                            for(let i = 0; i <  h.wanni_count.count;i++)
                            {
                               temp[i] = new bin_to_wanning(data.slice(length));
                               length += temp[i].len;
                            }
                            h.wanning = temp;
                        }
                        break;                        
                        default:
                            console.log("wrong hdr type: " + h.type);
                        break;
                    }
                }
                return h;
            };
        let device_info = [];
        // 延时配置数据
        let channelDelays = [];

        // 阈值配置数据
        let channelThresholds = [];

        let tempValue  = [];
        let humiValue  = [];
        let smokeValue = [];
        let co2Value   = [];

        function openTempModal()
        {
            let vmax = tempValue.v_max;
            let vmin = tempValue.v_min;
            document.getElementById('tempMax').value=vmax.toFixed(2);
            document.getElementById('tempMin').value=vmin.toFixed(2);
            document.getElementById('tempCardModal').classList.add('active');
        }
        function openHumiModal()
        {
            let vmax = humiValue.v_max;
            let vmin = humiValue.v_min;
            document.getElementById('humiMax').value=vmax.toFixed(2);
            document.getElementById('humiMin').value=vmin.toFixed(2);
            document.getElementById('humiCardModal').classList.add('active');
        }
        function openSmokeModal()
        {
            let vmax = smokeValue.v_max;
            let vmin = smokeValue.v_min;
            document.getElementById('smokeMax').value=vmax.toFixed(2);
            document.getElementById('smokeMin').value=vmin.toFixed(2);
            document.getElementById('smokeCardModal').classList.add('active');
        }
        function openCo2Modal()
        {
            let vmax = co2Value.v_max;
            let vmin = co2Value.v_min;
            document.getElementById('Co2Max').value=vmax.toFixed(2);
            document.getElementById('Co2Min').value=vmin.toFixed(2);
            document.getElementById('co2CardModal').classList.add('active');
        }


        function openDelayModal() {
            const grid = document.getElementById('delayGrid');
            if (!grid) return;
            grid.innerHTML = '';
            for (let i = 0; i < device_info.chs; i++) {
                const delays = channelDelays[i];
                const rowDiv = document.createElement('div');
                rowDiv.className = 'config-row';
                rowDiv.innerHTML = '<div class="config-row-title">CH' + (i+1) + ' · ' + delays.name  + '</div>' +
                    '<div class="config-inputs">' +
                    '<div class="config-item"><label>⏫ 开延时 (秒)</label><input type="number" step="0.1" min="0.3" max="10" id="onDelay_' + i + '" value="' + delays.onSec + '"></div>' +
                    '<div class="config-item"><label>⏬ 关延时 (秒)</label><input type="number" step="0.1" min="0.3" max="10" id="offDelay_' + i + '" value="' + delays.offSec + '"></div>' +
                    '<button class="save-channel-config-btn" data-channel="' + i + '">💾 保存本通道</button>' +
                    '</div>';
                const saveBtn = rowDiv.querySelector('.save-channel-config-btn');
                saveBtn.addEventListener('click', (function(idx) {
                    return function() {
                        const onVal = parseFloat(document.getElementById('onDelay_' + idx).value);
                        const offVal = parseFloat(document.getElementById('offDelay_' + idx).value);
                        channel_set_delay(idx,onVal,offVal);
                        showToast('通道 ' + (idx+1) + ' 延时已保存: 开' + onVal.toFixed(1) + 's / 关' + offVal.toFixed(1) + 's', 1200);
                    };
                })(i));
                grid.appendChild(rowDiv);
            }
            document.getElementById('delayModal').classList.add('active');
        }

        function openThresholdModal() {
            const grid = document.getElementById('thresholdGrid');
            const patch_grid = document.getElementById('pathchGrid');
            if (!grid || !patch_grid) return;
            grid.innerHTML = '';
            patch_grid.innerHTML = '';
            if(device_info.chs > 0)
            {
                const rowDiv = document.createElement('div');
                rowDiv.className = 'config-batch-row';
                rowDiv.innerHTML = '<div class="config-row-title">批量设置'+'</div>' +
                    '<div class="config-inputs">' +
                    '<div class="config-batch-item"><label>🔻 电压最小值 (V)</label><input type="number" step="1" min="0" max="300" id="vMin_batch' + '" value="' + 0.00 + '"></div>' +
                    '<div class="config-batch-item"><label>🔺 电压最大值 (V)</label><input type="number" step="1" min="0" max="300" id="vMax_batch'  + '" value="' + 0.00 + '"></div>' +
                    '<div class="config-batch-item"><label>⚡ 电流最大值 (A)</label><input type="number" step="5" min="0" max="200" id="iMax_batch' + '" value="' + 0.00 + '"></div>' +
                    '<div class="config-batch-item"><label>🔋 功率最大值 (W)</label><input type="number" step="500" min="0" max="50000" id="pMax_batch'  + '" value="' + 0.00 + '"></div>' +
                    '<div class="config-batch-item"><label>📊 耗电量最大值 (kWh)</label><input type="number" step="50" min="0" max="10000" id="eMax_batch' +  '" value="' + 0.00 + '"></div>' +
                    '<button class="save-channel-config-btn" data-channel="'+ '">💾 保存</button>' +
                    '</div>';
                const saveBtn = rowDiv.querySelector('.save-channel-config-btn');
                saveBtn.addEventListener('click',function() {
                        const vMin = parseFloat(document.getElementById('vMin_batch').value);
                        const vMax = parseFloat(document.getElementById('vMax_batch').value);
                        const iMax = parseFloat(document.getElementById('iMax_batch').value);
                        const pMax = parseFloat(document.getElementById('pMax_batch').value);
                        const eMax = parseFloat(document.getElementById('eMax_batch').value);
                        if (!isNaN(vMin) && !isNaN(vMax) && !isNaN(iMax) && !isNaN(pMax) && !isNaN(eMax)) {
                            batch_set_thr(0,vMax,vMin,iMax,pMax,eMax);
                            showToast('批量阈值' + '已配置', 1000);
                            closeModal('thresholdModal');
                        } else {
                            showToast('请输入有效数值', 1000);
                        }
                });
                patch_grid.appendChild(rowDiv);
            }

            
            for (let i = 0; i < device_info.chs; i++) {
                const thr = channelThresholds[i];
                const rowDiv = document.createElement('div');
                rowDiv.className = 'config-row';
                rowDiv.innerHTML = '<div class="config-row-title">CH' + (i+1) + ' · '+ (thr.name) + '</div>' +
                    '<div class="config-inputs">' +
                    '<div class="config-item"><label>🔻 电压最小值 (V)</label><input type="number" step="1" min="0" max="300" id="vMin_' + i + '" value="' + thr.vMin.toFixed(2) + '"></div>' +
                    '<div class="config-item"><label>🔺 电压最大值 (V)</label><input type="number" step="1" min="0" max="300" id="vMax_' + i + '" value="' + thr.vMax.toFixed(2) + '"></div>' +
                    '<div class="config-item"><label>⚡ 电流最大值 (A)</label><input type="number" step="5" min="0" max="200" id="iMax_' + i + '" value="' + thr.iMax.toFixed(2) + '"></div>' +
                    '<div class="config-item"><label>🔋 功率最大值 (W)</label><input type="number" step="500" min="0" max="50000" id="pMax_' + i + '" value="' + thr.pMax.toFixed(2) + '"></div>' +
                    '<div class="config-item"><label>📊 耗电量最大值 (kWh)</label><input type="number" step="50" min="0" max="10000" id="eMax_' + i + '" value="' + thr.eMax.toFixed(2) + '"></div>' +
                    '<button class="save-channel-config-btn" data-channel="' + i + '">💾 保存本通道</button>' +
                    '</div>';
                const saveBtn = rowDiv.querySelector('.save-channel-config-btn');
                saveBtn.addEventListener('click', (function(idx) {
                    return function() {
                        const vMin = parseFloat(document.getElementById('vMin_' + idx).value);
                        const vMax = parseFloat(document.getElementById('vMax_' + idx).value);
                        const iMax = parseFloat(document.getElementById('iMax_' + idx).value);
                        const pMax = parseFloat(document.getElementById('pMax_' + idx).value);
                        const eMax = parseFloat(document.getElementById('eMax_' + idx).value);
                        if (!isNaN(vMin) && !isNaN(vMax) && !isNaN(iMax) && !isNaN(pMax) && !isNaN(eMax)) {
                            channel_set_thr(idx,vMax,vMin,iMax,pMax,eMax)
                            showToast('通道 ' + (idx+1) + ' 阈值已保存', 1000);
                        } else {
                            showToast('请输入有效数值', 1000);
                        }
                    };
                })(i));
                grid.appendChild(rowDiv);
            }
            document.getElementById('thresholdModal').classList.add('active');
        }

        let currentSelectedChannels = [];

        function updateResetModalUI() {
            const container = document.getElementById('channelSelectList');
            if (!container) return;
            container.innerHTML = '';
            for (let i = 0; i < device_info.chs; i++) {
                const div = document.createElement('div');
                div.className = 'channel-checkbox';
                div.innerHTML = '<input type="checkbox" id="resetChk_' + i + '" ' + (currentSelectedChannels[i] ? 'checked' : '') + '>' +
                    '<label for="resetChk_' + i + '">CH' + (i+1) + ' · '+(channelTelemetry[i].name) + ' (当前耗电: ' + ((channelTelemetry[i]?.energyKwh || 0).toFixed(2)) + ' kWh)</label>';
                const chk = div.querySelector('input');
                chk.addEventListener('change', (function(idx) {
                    return function(e) { currentSelectedChannels[idx] = e.target.checked; };
                })(i));
                container.appendChild(div);
            }
        }

        function openResetEnergyModal() {
            for (let i = 0; i < device_info.chs; i++) currentSelectedChannels[i] = true;
            updateResetModalUI();
            document.getElementById('resetEnergyModal').classList.add('active');
        }

        function confirmResetEnergy() {
            const toReset = [];
            for (let i = 0; i < device_info.chs; i++) {
                if (currentSelectedChannels[i]) toReset.push(i);
            }
            if (toReset.length === 0) {
                showToast("未选择任何通道", 1000);
                return;
            }
            for (let idx of toReset) {
                channel_clear_consumer(idx);
            }
            //renderTable();
            const names = toReset.map(i => 'CH' + (i + 1)).join(', ');
            showToast('已重置 ' + names + ' 的耗电量', 1500);
            closeModal('resetEnergyModal');
        }


        function confirmTempThr() {
            valmax = document.getElementById('tempMax').value;
            valmin = document.getElementById('tempMin').value;
            set_sensor_thr(valmax,valmin,SUB_SENSOR_TYPE.NEW_SUB_PKT_TYPE_TEMP);
            showToast('设置温度阈值', 1500);
            closeModal('tempCardModal');
        }

        function confirmHumiThr() {
            valmax = document.getElementById('humiMax').value;
            valmin = document.getElementById('humiMin').value;
            set_sensor_thr(valmax,valmin,SUB_SENSOR_TYPE.NEW_SUB_PKT_TYPE_HUMI);            
            showToast('设置湿度阈值', 1500);
            closeModal('humiCardModal');
        }
        function confirmSmokeThr() {
            valmax = document.getElementById('smokeMax').value;
            valmin = document.getElementById('smokeMin').value;
            set_sensor_thr(valmax,valmin,SUB_SENSOR_TYPE.NEW_SUB_PKT_TYPE_SMOKE);     
            showToast('设置烟雾阈值', 1500);
            closeModal('smokeCardModal');
        }
        function confirmCo2Thr() {
            valmax = document.getElementById('Co2Max').value;
            valmin = document.getElementById('Co2Min').value;
            set_sensor_thr(valmax,valmin,SUB_SENSOR_TYPE.NEW_SUB_PKT_TYPE_CO2);   
            showToast('设置Co2阈值', 1500);
            closeModal('co2CardModal');
        }
        function confirmNetwork()
        {
            ip_data=[];
            ip_data.ipMode = (document.getElementById('ipMode').value == "auto") ? 0 : 1;
            ip_data.ipAddress = document.getElementById('ipAddress').value;
            ip_data.subnetMask = document.getElementById('subnetMask').value;
            ip_data.gateway = document.getElementById('gateway').value;
            ip_data.dns1 = document.getElementById('dns1').value;
            ip_data.dns2 = document.getElementById('dns2').value;
            ip_data.len = 241;
            a = pkt_to_bin(0, PKT_TYPE.NEW_PKT_TYPE_NETWORK,0, 0, 0, ip_data);
            ws.send(a);  
        }
        function confirmNtp()
        {
            ntp_data = [];
            ntp_data.ntpZone = document.getElementById('ntpZone').value;
            datetimeStr = document.getElementById('newSystemTime').value;
            ntp_data.len = 33;
            if (datetimeStr) {
                const newDate = new Date(datetimeStr);
                if (!isNaN(newDate.getTime())) 
                {
                    ntp_data.ntpDateTime = newDate.toLocaleString();
                    
                    a = pkt_to_bin(0, PKT_TYPE.NEW_PKT_TYPE_NTP,0, 0, 0, ntp_data);
                    ws.send(a);                      
                    showToast(newDate.toLocaleString(), 1000);
                }
                else 
                    showToast("无效的时间格式", 1000);
            } else showToast("请选择日期时间", 1000);
        }
        function rebootSystem()
        {
            data = [];
            data.flag = 1;
            data.len = 1;
            a = pkt_to_bin(0, PKT_TYPE.NEW_PKT_TYPE_DEVICE_INFO,0, 0, 0, data);        
            ws.send(a);
            showToast("重启设备", 1000);
        }

        function selectAllChannels() {
            for (let i = 0; i < device_info.chs; i++) currentSelectedChannels[i] = true;
            updateResetModalUI();
        }

        function deselectAllChannels() {
            for (let i = 0; i < device_info.chs; i++) currentSelectedChannels[i] = false;
            updateResetModalUI();
        }

        // WebSocket 连接
        let ws = null;
        let wsConnected = false;
        let reconnectAttempts = 0;
        const maxReconnectAttempts = 10;
        let reconnectTimer = null;

        let channelTelemetry = [];
        let channelTelemetry1 = [];
        let channelTelemetry2 = [];
        let channelSwitchStates = [];
        let envData = {
            temp: 25,
            humi: 50,
            smoke: 100,
            co2: 400
        };
        let alarmList = [];
        let nextAlarmId = 1;
        let all_channel = [];
        let all_l_channel = [];
        let channel_info = [];
        let update_flag = 0;
        let show_l_info = 0;

        function updateSummary() {
            let totalVoltage = 0.00, totalCurrent = 0.00, totalActivePower = 0.00, totalReactivePower = 0.00, totalApparentPower = 0.00, totalWeightedPf = 0.000,totalPf=0.00,totalConsumer= 0.00;
            if(device_info.chs > 0)
            {
                if(show_l_info == 0)
                {
                    //总电压 (V)
                    document.getElementById('All-V').innerHTML = '<div class="summary-label" id="All-V">线电压 (V)</div>'
                    totalVoltage = all_channel.voltage;
                    totalCurrent = all_channel.current;
                    totalActivePower = all_channel.power;
                    totalReactivePower = all_channel.reactive_power;
                    totalApparentPower = all_channel.app_power;
                    totalPf = all_channel.factor;
                    totalConsumer = all_channel.consump;
                }else 
                {
                    document.getElementById('All-V').innerHTML = '<div class="summary-label" id="All-V">相电压 (V)</div>'
                    totalVoltage = all_l_channel[show_l_info-1].voltage;
                    totalCurrent = all_l_channel[show_l_info-1].current;
                    totalActivePower = all_l_channel[show_l_info-1].power;
                    totalReactivePower = all_l_channel[show_l_info-1].reactive_power;
                    totalApparentPower = all_l_channel[show_l_info-1].app_power;
                    totalPf = all_l_channel[show_l_info-1].factor;
                    totalConsumer = all_l_channel[show_l_info-1].consump;                   
                }
            }
            document.getElementById('totalVoltage').innerHTML = totalVoltage.toFixed(2) + '<span class="summary-unit">V</span>';
            document.getElementById('totalCurrent').innerHTML = totalCurrent.toFixed(2) + '<span class="summary-unit">A</span>';
            document.getElementById('totalActivePower').innerHTML = totalActivePower.toLocaleString() + '<span class="summary-unit">kW</span>';
            document.getElementById('totalReactivePower').innerHTML = totalReactivePower.toLocaleString() + '<span class="summary-unit">kvar</span>';
            document.getElementById('totalApparentPower').innerHTML = totalApparentPower.toLocaleString() + '<span class="summary-unit">kVA</span>';
            document.getElementById('totalPowerFactor').innerHTML = totalPf.toFixed(3);
            document.getElementById('totalConsumer').innerHTML = totalConsumer.toFixed(2) + '<span class="summary-unit">kWh</span>';   
        }

        function updateWsStatus(connected, message) {
            const led = document.getElementById('wsLed');
            const statusText = document.getElementById('wsStatusText');
            if (connected) {
                led.className = 'ws-led connected';
                statusText.innerHTML = '已连接';
            } else {
                led.className = 'ws-led disconnected';
                statusText.innerHTML = message || '未连接';
            }
        }

        function onWsMessage(event) {
            try {
                if (event.data instanceof ArrayBuffer) {
                    var obj = bin_parse(event.data);
                    if (obj.device_info != undefined) {
                        if(device_info.chs != obj.device_info.chs)
                        {
                            device_info.chs = obj.device_info.chs;
                            currentSelectedChannels = null;
                            currentSelectedChannels = new Array(device_info.chs).fill(true);
                            for (let i = 0; i < device_info.chs; i++) {
                                channelThresholds[i] = {name:"smartPDU",vMin: 198, vMax: 242, iMax: 100, pMax: 15000, eMax: 500 };
                                channelDelays[i] = {name:"smartPDU", onSec: 1.8, offSec: 1.5 };
                                channelTelemetry[i] = {name:"smartPDU", voltage: 220, current: 30, activePower: 6600, reactivePower: 2500, apparentPower: 7000, powerFactor: 0.85, frequency: 50.00, energyKwh: 100 };
                                channelTelemetry1[i] = {name:"smartPDU", voltage: 220, current: 30, activePower: 6600, reactivePower: 2500, apparentPower: 7000, powerFactor: 0.85, frequency: 50.00, energyKwh: 100 };
                                channelTelemetry2[i] = {name:"smartPDU", voltage: 220, current: 30, activePower: 6600, reactivePower: 2500, apparentPower: 7000, powerFactor: 0.85, frequency: 50.00, energyKwh: 100 };

                                channelSwitchStates[i] = true;
                                channel_info[i] ={name:"SmartPDU",addr:0,sch:0,phse:0,phse1:1,open:1,close:1,status:1,
                                                l1_v_upper:0,l1_v_lower:0,l1_c_upper:0,l1_p_upper:0,l1_w_upper:0,
                                                l2_v_upper:0,l2_v_lower:0,l2_c_upper:0,l2_p_upper:0,l2_w_upper:0,
                                                l3_v_upper:0,l3_v_lower:0,l3_c_upper:0,l3_p_upper:0,l3_w_upper:0
                                };
                            }
                            all_channel.voltage = 0;
                            all_channel.current = 0;
                            all_channel.power = 0;
                            all_channel.reactive_power = 0;
                            all_channel.app_power = 0;
                            all_channel.factor = 0;	
                            renderTable();
                            
                        }
                        device_info.chs = obj.device_info.chs;
                        device_info.power_type =  obj.device_info.power_type;
                        device_info.zone = obj.device_info.zone;
                        device_info.board_cnt = obj.device_info.board_cnt;
                        device_info.soft_version = obj.device_info.soft_version;
                        device_info.hard_version = obj.device_info.hard_version;
                        device_info.date = obj.device_info.date;
                        device_info.time = obj.device_info.time;
                        updateDeviceStatusMsg();
                        updateTimeDisplay();
                        console.log('WebSocket收到: ', device_info.chs,device_info.date,device_info.time);
                    }
                    if (obj.power_data != undefined) {
                        for (let i = 0; i < device_info.chs; i++) {
                            
                            channelTelemetry[i].voltage = obj.power_data[i].voltage;
                            channelTelemetry[i].current = obj.power_data[i].current;
                            channelTelemetry[i].activePower = obj.power_data[i].power;
                            channelTelemetry[i].reactivePower = obj.power_data[i].reactive_power;
                            channelTelemetry[i].apparentPower = obj.power_data[i].app_power;
                            channelTelemetry[i].powerFactor = obj.power_data[i].factor;
                            channelTelemetry[i].frequency = obj.power_data[i].freq;
                            channelTelemetry[i].energyKwh = obj.power_data[i].consump;
                            obj.power_data[i] = null;
                        }
                        //updateTableData();
                    }
                    if (obj.power_data1 != undefined) {
                        for (let i = 0; i < device_info.chs; i++) {
                            
                            channelTelemetry1[i].voltage = obj.power_data1[i].voltage;
                            channelTelemetry1[i].current = obj.power_data1[i].current;
                            channelTelemetry1[i].activePower = obj.power_data1[i].power;
                            channelTelemetry1[i].reactivePower = obj.power_data1[i].reactive_power;
                            channelTelemetry1[i].apparentPower = obj.power_data1[i].app_power;
                            channelTelemetry1[i].powerFactor = obj.power_data1[i].factor;
                            channelTelemetry1[i].frequency = obj.power_data1[i].freq;
                            channelTelemetry1[i].energyKwh = obj.power_data1[i].consump;
                            obj.power_data1[i] = null;
                        }
                        //updateTableData();
                    }
                    if (obj.power_data2 != undefined) {
                        for (let i = 0; i < device_info.chs; i++) {
                            
                            channelTelemetry2[i].voltage = obj.power_data2[i].voltage;
                            channelTelemetry2[i].current = obj.power_data2[i].current;
                            channelTelemetry2[i].activePower = obj.power_data2[i].power;
                            channelTelemetry2[i].reactivePower = obj.power_data2[i].reactive_power;
                            channelTelemetry2[i].apparentPower = obj.power_data2[i].app_power;
                            channelTelemetry2[i].powerFactor = obj.power_data2[i].factor;
                            channelTelemetry2[i].frequency = obj.power_data2[i].freq;
                            channelTelemetry2[i].energyKwh = obj.power_data2[i].consump;
                            obj.power_data2[i] = null;
                        }
                        //updateTableData();
                    }                  
                    if (obj.power_all != undefined) {
                        all_channel = obj.power_all;
                        obj.power_all = null;
                        updateSummary();
                    }
                    if (obj.power_all_l != undefined) {
                        all_l_channel = obj.power_all_l;
                        obj.power_all_l = null;
                    }
                    if (obj.power_info != undefined) {
                        channel_info = obj.power_info;
                        for(let i =0;i < device_info.chs;i++)
                        {
                            channelDelays[i].onSec =channel_info[i].open;
                            channelDelays[i].offSec = channel_info[i].close;
                            channelDelays[i].name  = channel_info[i].name;
                            channelThresholds[i].name = channel_info[i].name;
                            channelTelemetry[i].name = channel_info[i].name;
                        }
                        obj.power_info = null;
                        updateTableData();
                    }
                    if (obj.power_thr != undefined) {
                        for (let i = 0; i < device_info.chs; i++) {
                            channelThresholds[i].vMax = obj.power_thr[i].v_upper;
                            channelThresholds[i].vMin = obj.power_thr[i].v_lower;
                            channelThresholds[i].iMax = obj.power_thr[i].c_upper;
                            channelThresholds[i].pMax = obj.power_thr[i].p_upper;
                            channelThresholds[i].eMax = obj.power_thr[i].w_upper;
                            obj.power_thr[i] = null;
                        }
                    }
                    if(obj.sensor_info != undefined)
                    {
                        humiValue = obj.sensor_info[0];
                        tempValue = obj.sensor_info[1];
                        smokeValue = obj.sensor_info[2];
                        co2Value = obj.sensor_info[3];
                        updateEnvDisplay();
                    }
                    if(obj.network != undefined)
                    {
                        netConfig.ipMode = obj.network == 0 ? "auto" : "manual"; 
                        netConfig.ipAddress = obj.network.ipaddr;
                        netConfig.subnetMask = obj.network.mask;
                        netConfig.gateway = obj.network.gateway;
                        netConfig.dns1 = obj.network.dns1;
                        netConfig.dns2 = obj.network.dns2;
                        loadNetConfig();
                    }
                    if(obj.rs485 != undefined)
                    {
                        rs485Config.mode = obj.rs485.mode == 0? "master" : "slave";
                        rs485Config.address = obj.rs485.addr;
                        rs485Config.baudrate = obj.rs485.baud;
                        loadRs485Config();
                    }
                    if(obj.snmp != undefined)
                    {
                        snmpConfig.status = (obj.snmp.mode == 0)? "close" :"open";
                        snmpConfig.readCommunity = obj.snmp.publics;
                        snmpConfig.writeCommunity =  obj.snmp.privates;
                        snmpConfig.trapStatus = (obj.snmp.trapmode == 0)? "close" :"open";;
                        snmpConfig.trapIp =obj.snmp.nms_ip;
                        loadSnmpConfig();
                    }
                    if(obj.wanni_count != undefined)
                    {
                        //clearAlarm();
                        alarmList = [];
                        for(let i = 0; i < obj.wanni_count.count;i++)
                        {
                            addAlarm(obj.wanning[i],i);
                        }
                        updateAlarmBadge();
                        updateAlarmUI();
                    }
                }

            } catch (e) {
                console.error('解析WebSocket消息失败:', e);
            }
        }

        function sendSwitchCommand(channel, state) {
            if (ws && ws.readyState === WebSocket.OPEN) {
                showToast("发送指令: 通道" + (channel + 1) + " " + (state ? "开启" : "关闭"), 1000);
            } else {
                showToast("WebSocket未连接，无法发送指令", 1500);
            }
        }

        function sendAllSwitchCommand(state) {
            if (ws && ws.readyState === WebSocket.OPEN) {
                all_contrl(state);
                showToast("发送全部" + (state ? "开启" : "关闭") + "指令", 1000);
            } else {
                showToast("WebSocket未连接，无法发送指令", 1500);
            }
        }

        function connectWebSocket() {
            const wsUrl = 'ws://' + window.location.host + '/ws';
            //const wsUrl = 'ws://' + '192.168.9.105' + '/ws';
            updateWsStatus(false, '正在连接...');
            const led = document.getElementById('wsLed');
            led.className = 'ws-led connecting';
            try {
                ws = new WebSocket(wsUrl);
                ws.onopen = function() {
                    console.log('WebSocket连接成功'); 
                    wsConnected = true;
                    reconnectAttempts = 0;
                    updateWsStatus(true, '已连接');  
                    ws.send(mk_hdr_bin(0, PKT_TYPE.NEW_PKT_TYPE_DEVICE_INFO, 0, 0, 0)); 
                };
                ws.binaryType = 'arraybuffer';
                ws.onmessage = onWsMessage;
                ws.onerror = function(error) { console.error('WebSocket错误:', error); updateWsStatus(false, '连接错误'); };
                ws.onclose = function() { 
                    console.log('WebSocket连接关闭'); 
                    wsConnected = false; 
                    updateWsStatus(false, '连接已断开'); 
                    if (reconnectTimer) 
                        clearTimeout(reconnectTimer); 
                    if (reconnectAttempts < maxReconnectAttempts) { 
                        reconnectAttempts++; 
                        reconnectTimer = setTimeout(function() { 
                            connectWebSocket(); 
                        }, 3000); 
                    } else { 
                        updateWsStatus(false, '连接失败，请刷新页面重试'); 
                    } 
                };
            } catch(e) { console.error('创建WebSocket失败:', e); updateWsStatus(false, '创建连接失败'); }
        }

        function updateEnvDisplay() {

            document.getElementById('tempStatus').innerHTML= `<div class="${tempValue.status ? 'status-on' : 'status-off'}">${tempValue.status ? "在线" : "离线"}<div>`;
            document.getElementById('humiStatus').innerHTML= `<div class="${humiValue.status ? 'status-on' : 'status-off'}">${humiValue.status ? "在线" : "离线"}<div>`;
            document.getElementById('smokeStatus').innerHTML= `<div class="${smokeValue.status ? 'status-on' : 'status-off'}">${smokeValue.status ? "在线" : "离线"}<div>`
            document.getElementById('co2Status').innerHTML= `<div class="${co2Value.status ? 'status-on' : 'status-off'}">${co2Value.status ? "在线" : "离线"}<div>`
            
            
            document.getElementById('tempValue').innerHTML = tempValue.value.toFixed(2) + '<span class="env-unit">°C</span>';
            document.getElementById('humiValue').innerHTML =  humiValue.value.toFixed(2) + '<span class="env-unit">%RH</span>';
            document.getElementById('smokeValue').innerHTML = Math.floor(smokeValue.value) + '<span class="env-unit">ppm</span>';
            document.getElementById('co2Value').innerHTML = Math.floor(co2Value.value) + '<span class="env-unit">ppm</span>';
            const tempCard = document.getElementById('tempCard');
            const humiCard = document.getElementById('humiCard');
            const smokeCard = document.getElementById('smokeCard');
            const co2Card = document.getElementById('co2Card');
            tempCard.classList.remove('alarm-warning', 'alarm-danger');
            humiCard.classList.remove('alarm-warning', 'alarm-danger');
            smokeCard.classList.remove('alarm-warning', 'alarm-danger');
            co2Card.classList.remove('alarm-warning', 'alarm-danger');
            if (tempValue.v_max_wrn) tempCard.classList.add('alarm-danger');
            else if(tempValue.v_min_wrn) tempCard.classList.add('alarm-warning');
            if (humiValue.v_max_wrn) humiCard.classList.add('alarm-danger');
            if (smokeValue.v_max_wrn) smokeCard.classList.add('alarm-danger');
            if (co2Value.v_max_wrn) co2Card.classList.add('alarm-danger');
        }

        function addAlarm(data,i) {
            // const now = new Date();
            // const timeStr = now.toLocaleString();
            const alarmId = 'AL' + String(i).padStart(4, '0');
            type = (data.type == 0) ? "电能告警" : (data.type == 1) ? "传感器告警" : (data.type == 2) ? "网络告警" : "其他告警"; 
            alarmList.unshift({
                id: alarmId,
                time: data.date,
                type: type,
                message: data.context
            });
            if (alarmList.length > 10) alarmList.pop();
            updateAlarmBadge();
            updateAlarmUI();
           // showToast("新告警: " + type, 2000);
        }

        function updateAlarmBadge() {
            const badge = document.getElementById('alarmCountBadge');
            if (badge) {
                const count = alarmList.length;
                if (count > 0) {
                    badge.textContent = count > 10 ? '10' : count;
                    badge.style.display = 'inline-flex';
                } else {
                    badge.style.display = 'none';
                }
            }
        }

        function updateAlarmUI() {
            const container = document.getElementById('alarmListContainer');
            if (!container) return;
            if (alarmList.length === 0) {
                container.innerHTML = '<div style="text-align:center;color:#888;padding:20px;">暂无报警记录</div>';
                return;
            }
            let html = '<table class="alarm-table"><thead><tr><th>报警ID</th><th>时间</th><th>报警类型</th><th>详细信息</th></tr></thead><tbody>';
            for (let i = 0; i < alarmList.length; i++) {
                const a = alarmList[i];
                html += '<tr><td class="alarm-id">' + a.id + '</td><td>' + a.time + '</td><td><span style="background:#ffe0e0;padding:2px 8px;border-radius:20px;font-size:0.7rem;">' + a.type + '</span></td><td>' + a.message + '</td></tr>';
            }
            html += '</tbody></table>';
            container.innerHTML = html;
        }

        function clearAlarm() {

            clean_alarm();
            alarmList = [];
            showToast("报警记录已清空", 1000);
        }

        function showToast(msg, dur) {
            if (!dur) dur = 1500;
            const t = document.createElement('div');
            t.innerText = msg;
            t.style.cssText = 'position:fixed; bottom:70px; right:24px; background:#1e2f3ce6; color:#fff; padding:8px 20px; border-radius:40px; font-size:0.8rem; z-index:2100;';
            document.body.appendChild(t);
            setTimeout(function() {
                t.style.opacity = '0';
                setTimeout(function() {
                    t.remove();
                }, 300);
            }, dur);
        }
        let tableRows = [];


        function updateTableData() {
            for (let i = 0; i < device_info.chs; i++) {
                //if (!tableRows[i]) continue;
                const row = tableRows[i];
                if (!row) continue;

                let tele= channelTelemetry[i]|| {};
                let target = channelSwitchStates[i];
                let delays = channelDelays[i];
                let thr = channelThresholds[i];
                let info = channel_info[i];

                if(device_info.power_type == 4 || device_info.power_type == 5)
                {
                    if(info.phse == 1)
                    {
                        //tele = channelTelemetry[i];
                    }else if(info.phse == 2)
                    {
                        tele = channelTelemetry1[i];
                    }else if(info.phse == 3)
                    {
                        tele = channelTelemetry2[i];
                    }
                }
                    
                // 检查阈值告警
                const alarms = [];

                alarmClass = '';


                const cells = row.cells;
                if (cells[0]) {
                    cells[0].innerHTML = '<div class="channel-badge"><span class="ch-icon">CH' + (i + 1) + '</span> <strong>' + (info.name) + '</strong></div>';
                    //cells[0].className = 'channel-badge ';
                }
                if(cells[1])
                {
                    cells[1].innerHTML = '<span class="ph-icon"><strong>'+'L'+info.phse+'</strong></span>'                    
                }
                if (cells[2]) {
                    cells[2].innerHTML = (tele.voltage || 0).toFixed(2) + '<span class="unit-sub">V</span>' + (info.l1_v_lower || info.l2_v_lower || info.l3_v_lower ? '🔻' : (info.l1_v_upper || info.l2_v_upper || info.l3_v_upper ? '🔺' : ''));
                    if(info.l1_v_lower || info.l2_v_lower || info.l3_v_lower) {
                        alarmClass = 'threshold-low-alarm';
                    }else if(info.l1_v_upper || info.l2_v_upper || info.l3_v_upper) {
                        alarmClass = 'threshold-alarm';
                    }    
                    cells[2].className = 'numeric-value ' + alarmClass;
                }
                // 电流 (第3列，索引2)
                if (cells[3]) {
                    cells[3].innerHTML = (tele.current || 0).toFixed(2) + '<span class="unit-sub">A</span>';
                    cells[3].className = 'numeric-value ' + ((info.l1_c_upper ||info.l2_c_upper || info.l3_c_upper) ? 'threshold-alarm' : '');
                }
                // 有功功率 (第4列，索引3)
                if (cells[4]) {
                    cells[4].innerHTML = ((tele.activePower || 0).toLocaleString()) + '<span class="unit-sub">kW</span>';
                    cells[4].className = 'numeric-value power-bg ' + (info.l1_p_upper || info.l2_p_upper || info.l3_p_upper? 'threshold-alarm' : '');
                }
                // 无功功率 (第5列，索引4)
                if (cells[5]) {
                    cells[5].innerHTML = ((tele.reactivePower || 0).toLocaleString()) + '<span class="unit-sub">kvar</span>';
                    cells[5].className = 'numeric-value reactive-bg';
                }
                // 视在功率 (第6列，索引5)
                if (cells[6]) {
                    cells[6].innerHTML = ((tele.apparentPower || 0).toLocaleString()) + '<span class="unit-sub">kVA</span>';
                }
                // 功率因数 (第7列，索引6)
                if (cells[7]) {
                    cells[7].innerHTML = (tele.powerFactor || 0).toFixed(3);
                }
                // 频率 (第8列，索引7)
                if (cells[8]) {
                    cells[8].innerHTML = (tele.frequency || 50).toFixed(2) + '<span class="unit-sub">Hz</span>';
                }
                // 耗电量 (第9列，索引8)
                if (cells[9]) {
                    cells[9].innerHTML = '<span class="energy-value">' + ((tele.energyKwh || 0).toFixed(2)) + '</span><span class="unit-sub">kWh</span>';
                    cells[9].className = 'energy-cell numeric-value ' + (info.l1_w_upper || info.l2_w_upper || info.l3_w_upper ? 'threshold-alarm' : '');
                }
                // 开关延时 (第10列，索引9)
                if (cells[10]) {
                    cells[10].innerHTML = '<div class="delay-badge delay-idle">开:' + (info.open) + 's/关:' + (info.close) + 's</div>';
                }
                // 开关状态 (第11列，索引10)
                if (cells[11]) {
                    cells[11].innerHTML = '<span class="' + (info.status ? 'status-on' : 'status-off') + ' status-span">' + (info.status ? '开' : '关') + '</span>';
                }
                // 操作按钮 (第12列，索引11)
                if (cells[12]) {
                    if (channelSwitchStates[i] != channel_info[i].status) {
                        cells[12].innerHTML = '<div class="switch-control"><button class="switch-btn ' + (info.status ? 'switch-on' : 'switch-off') + '" data-idx="' + i + '">' + (info.status ? '关闭' : '打开') + '</button></div>';
                        channelSwitchStates[i] = channel_info[i].status
                    }
                }

                // 行样式
                if (target) {
                    row.classList.remove('channel-off');
                    row.classList.add('channel-on');
                } else {
                    row.classList.remove('channel-on');
                    row.classList.add('channel-off');
                }
            }
        }


        function renderTable() {
            const tbody = document.getElementById('tableBody');
            if (!tbody) return;
            tbody.innerHTML = '';
            tableRows = [];
            for (let i = 0; i < device_info.chs; i++) {
                const tele = channelTelemetry[i] || {};
                const target = channelSwitchStates[i];
                const delays = channelDelays[i];
                const thr = channelThresholds[i];
                const info = channel_info[i];
                const alarms = [];
                if (channel_info.l1_v_lower) alarms.push('欠压');
                if (channel_info.l1_v_upper) alarms.push('过压');
                if (channel_info.l1_c_upper) alarms.push('过流');
                if (channel_info.l1_p_upper) alarms.push('过功率');
                if (channel_info.l1_w_upper) alarms.push('能耗超限');
                const alarmClass = alarms.length > 0 ? 'threshold-alarm' : '';

                const row = document.createElement('tr');
                if (!info.status) row.classList.add('channel-off');
                channelSwitchStates[i] = channel_info[i].status;
                row.innerHTML = `
                <td><div class="channel-badge"><span class="ch-icon">CH${i+1}</span> <strong>${info.name} ${i+1}</strong></div></td>
                <td><span class="ph-icon"><strong>L${info.phse}</strong></span></td>
                <td class="numeric-value ${alarmClass}">${(tele.voltage || 0).toFixed(1)}<span class="unit-sub">V</span>${alarms.includes('欠压') ? '🔻' : (alarms.includes('过压') ? '🔺' : '')}</td>
                <td class="numeric-value ${alarms.includes('过流') ? 'threshold-alarm' : ''}">${(tele.current || 0).toFixed(2)}<span class="unit-sub">A</span></td>
                <td class="numeric-value power-bg ${alarms.includes('过功率') ? 'threshold-alarm' : ''}">${(tele.activePower || 0).toLocaleString()}<span class="unit-sub">W</span></td>
                <td class="numeric-value reactive-bg">${(tele.reactivePower || 0).toLocaleString()}<span class="unit-sub">kvar</span></td>
                <td class="numeric-value">${(tele.apparentPower || 0).toLocaleString()}<span class="unit-sub">kVA</span></td>
                <td class="pf-cell numeric-value">${(tele.powerFactor || 0).toFixed(3)}</td>
                <td class="numeric-value">${(tele.frequency || 50).toFixed(2)}<span class="unit-sub">Hz</span></td>
                <td class="energy-cell numeric-value ${alarms.includes('能耗超限') ? 'threshold-alarm' : ''}"><span class="energy-value">${(tele.energyKwh || 0).toFixed(2)}</span><span class="unit-sub">kWh</span></td>
                <td><div class="delay-badge delay-idle">开:${info.close.toFixed(1)}s/关:${info.open.toFixed(1)}s</div></td>
                <td><span class="${target ? 'status-on' : 'status-off'}">${info.status ? '开' : '关'}</span></td>
                <td><div class="switch-control"><button class="switch-btn ${info.status ? 'switch-on' : 'switch-off'}" data-idx="${i}">${info.status ? '关闭' : '打开'}</button></div></td>
            `;

                tbody.appendChild(row);
                tableRows.push(row)
            }
            tbody.removeEventListener('click', handleSwitchClick);
            tbody.addEventListener('click', handleSwitchClick);
        }

        function handleSwitchClick(e) {
            const btn = e.target.closest('.switch-btn');
            if (!btn) return;
            e.stopPropagation();
            const idx = parseInt(btn.getAttribute('data-idx'));
            if (!isNaN(idx) && idx >= 0 && idx < device_info.chs) {
                sendSwitchCommand(idx, !channelSwitchStates[idx]);
            }
        }

        function sendSwitchCommand(channel, state) {
            if (ws && ws.readyState === WebSocket.OPEN) {
                single_ctrl(channel,state);
                showToast("通道" + (channel + 1) + " " + (state ? "开启" : "关闭"), 1000);
            } else {
                showToast("WebSocket未连接，无法发送指令", 1500);
            }
        }
        function allOn() { sendAllSwitchCommand(true);}
        function allOff() { sendAllSwitchCommand(false);}

        function openAlarmModal() {
            updateAlarmUI();
            document.getElementById('alarmModal').classList.add('active');
        }

        function closeModal(modalId) {document.getElementById(modalId).classList.remove('active');}
        // 配置页面函数
        let netConfig = {
            ipMode: "auto",
            ipAddress: "192.168.1.100",
            subnetMask: "255.255.255.0",
            gateway: "192.168.1.1",
            dns1: "114.114.114.114",
            dns2: "8.8.8.8"
        };

        function loadNetConfig() {
            document.getElementById("ipMode").value = netConfig.ipMode;
            document.getElementById("ipAddress").value = netConfig.ipAddress;
            document.getElementById("subnetMask").value = netConfig.subnetMask;
            document.getElementById("gateway").value = netConfig.gateway;
            document.getElementById("dns1").value = netConfig.dns1;
            document.getElementById("dns2").value = netConfig.dns2;
            updateStaticIpFieldsEnable();
            updateNetStatusMsg();
        }
        let ntpConfig = {
            ntpZone:"8",
        };
        function loadNtpConfig()
        {
            document.getElementById("ntpZone").value = ntpConfig.ntpZone;
        }

        function updateStaticIpFieldsEnable() {
            const isManual = document.getElementById("ipMode").value === "manual";
            ["ipAddress", "subnetMask", "gateway"].forEach(function(id) {
                const el = document.getElementById(id);
                if (el){
                    el.hidden = !isManual;
                } 
            });
            ["ip_lable","mask_lable","gate_lable"].forEach(function(id) {
                const el = document.getElementById(id);
                if (el){
                    el.style.display = (!isManual) ? 'none' : 'inline';
                } 
            });
        }


        function saveNetConfig() {
            confirmNetwork();
            showToast("网络配置已保存", 1200);
        }

        function updateNetStatusMsg() {
            const msgDiv = document.getElementById("netStatusMsg");
            if (msgDiv) {
                const modeText = netConfig.ipMode === "auto" ? "自动(DHCP)" : "静态IP: " + netConfig.ipAddress;
                msgDiv.innerHTML = "📡 IP模式: " + modeText + "<br>🌐 DNS: " + netConfig.dns1 + " / " + netConfig.dns2;
            }
        }
        let rs485Config = {
            mode: "master",
            address: 1,
            baudrate: "9600"
        };

        function loadRs485Config() {
            const saved = localStorage.getItem("powerMonitorRs485Config");
            document.getElementById("rs485Mode").value = rs485Config.mode;
            document.getElementById("rs485Addr").value = rs485Config.address;
            document.getElementById("rs485Baudrate").value = rs485Config.baudrate;
            updateRs485StatusMsg();
        }

        function saveRs485Config() {
            rs_data = [];
            rs_data.rs485Mode = (document.getElementById('rs485Mode').value == "master") ? 0 : 1;
            rs_data.rs485Addr = document.getElementById('rs485Addr').value || 1;
            rs_data.rs485Baudrate = document.getElementById('rs485Baudrate').value;
            rs_data.len = 6;
            if (rs_data.rs485Addr < 1) rs_data.rs485Addr = 1;
            if (rs_data.rs485Addr > 247) rs_data.rs485Addr = 247;
            a = pkt_to_bin(0, PKT_TYPE.NEW_PKT_TYPE_RS485,0, 0, 0, rs_data);
            ws.send(a);
            showToast("RS485配置已保存", 1200);
        }

        function updateRs485StatusMsg() {
            const msgDiv = document.getElementById("rs485StatusMsg");
            if (msgDiv) {
                const modeText = rs485Config.mode === "master" ? "主机模式" : "从机模式";
                msgDiv.innerHTML = "🔧 模式: " + modeText + " | 地址: " + rs485Config.address + " | 波特率: " + rs485Config.baudrate + " bps";
            }
        }
        let snmpConfig = {
            status : "open",
            readCommunity: "public",
            writeCommunity: "private",
            trapStatus: "open",
            trapIp: "",
        };

        function loadSnmpConfig() {

            document.getElementById("snmpReadCommunity").value = snmpConfig.readCommunity;
            document.getElementById("snmpWriteCommunity").value = snmpConfig.writeCommunity;
            document.getElementById("snmpTrapIp").value = snmpConfig.trapIp;
            document.getElementById("snmpTrapStatus").value = snmpConfig.trapStatus;
            updateSnmpEnable();
            updateSnmpStatusMsg();
        }
        function updateSnmpEnable()
        {
            const isManual = document.getElementById("snmpTrapStatus").value === "open";
            const el = document.getElementById("snmpTrapIp");
            if(el) el.hidden = !isManual;
            document.getElementById("trapAddr").style.display = !isManual ? 'none' :'inline';
        }
        
        function saveSnmpConfig() {
            snmp_data = [];
            snmp_data.mode = 1;
            snmp_data.version = 0;
            snmp_data.snmpReadCommunity = document.getElementById("snmpReadCommunity").value;
            snmp_data.snmpWriteCommunity = document.getElementById("snmpWriteCommunity").value;
            snmp_data.snmpTrapIp = document.getElementById("snmpTrapIp").value;
            snmp_data.snmpTrapStatus = document.getElementById("snmpTrapStatus").value == "open" ? 1 : 0;
            snmp_data.len = 55;
            a = pkt_to_bin(0, PKT_TYPE.NEW_PKT_TYPE_SNMP,0, 0, 0, snmp_data);
            ws.send(a);
            showToast("SNMP配置已保存", 1200);
        }

        function updateSnmpStatusMsg() {
            const msgDiv = document.getElementById("snmpStatusMsg");
            if (msgDiv) {
                const trapInfo = snmpConfig.trapIp ? (snmpConfig.trapIp) : "未配置";
                msgDiv.innerHTML = "🔐 只读社团: " + snmpConfig.readCommunity + " | ✏️ 读写社团: " + snmpConfig.writeCommunity + "<br>📡 TRAP目标: " + trapInfo;
            }
        }
        function updateDeviceStatusMsg()
        {

            document.getElementById('deviceChannel').textContent = device_info.chs;
            document.getElementById("powerType").textContent = (device_info.power_type == 0)? 'AC-AC' : (device_info.power_type == 1) 
                                                                                            ? 'DC-DC' : (device_info.power_type == 3) 
                                                                                            ? 'AC3-AC3': (device_info.power_type == 4 || device_info.power_type == 5) 
                                                                                            ? 'AC3-AC1': (device_info.power_type == 6)
                                                                                            ? 'AC3-AC2':'Other';
            document.getElementById("controlBoard").textContent = device_info.board_cnt;
            document.getElementById("softVersion").textContent = device_info.soft_version;
            document.getElementById("zone").textContent = device_info.zone;
        }


        let systemTime = new Date();

        function updateTimeDisplay() {
            const display = document.getElementById("systemTimeDisplay");
            if (display) {
                display.innerHTML = device_info.date + ' ' + device_info.time;
            }
        }

        function startTimeUpdater() {
            clearInterval(device_info_id);
            power_all_id = setInterval(function() { ws.send(mk_hdr_bin(0, PKT_TYPE.NEW_PKT_TYPE_ELE_INFO, SUB_POWER_TYPE.NEW_SUB_PKT_TYPE_ELE_DATA_ALL, 0, 0));}, 600);
            power_data_id = setInterval(function() { 
                ws.send(mk_hdr_bin(0, PKT_TYPE.NEW_PKT_TYPE_ELE_INFO, SUB_POWER_TYPE.NEW_SUB_PKT_TYPE_ELE_DATA_L1, 0, 0));
                setTimeout(() => {ws.send(mk_hdr_bin(0, PKT_TYPE.NEW_PKT_TYPE_ELE_INFO, SUB_POWER_TYPE.NEW_SUB_PKT_TYPE_ELE_DATA_L2, 0, 0));},40);
                setTimeout(() => {ws.send(mk_hdr_bin(0, PKT_TYPE.NEW_PKT_TYPE_ELE_INFO, SUB_POWER_TYPE.NEW_SUB_PKT_TYPE_ELE_DATA_L3, 0, 0));},40);
                setTimeout(() => {ws.send(mk_hdr_bin(0, PKT_TYPE.NEW_PKT_TYPE_ELE_INFO, SUB_POWER_TYPE.NEW_SUB_PKT_TYPE_ELE_DATA_INFO, 0, 0));},40);
            }, 300);
            power_thr_id = setInterval(function() { ws.send(mk_hdr_bin(0, PKT_TYPE.NEW_PKT_TYPE_ELE_INFO, SUB_POWER_TYPE.NEW_SUB_PKT_TYPE_ELE_DATA_THR, 0, 0));}, 500);
            sensor_id = setInterval(function() { ws.send(mk_hdr_bin(0, PKT_TYPE.NEW_PKT_TYPE_SENSOR,0, 0, 0));}, 1000);          
            wanning_id = setInterval(function() { ws.send(mk_hdr_bin(0, PKT_TYPE.NEW_PKT_TYPE_WANNING,0, 0, 0));}, 3000);
        }

        function setSystemTime(newDate) {
            systemTime = newDate;
            updateTimeDisplay();
            showToast("系统时间已更新为: " + systemTime.toLocaleString(), 1500);
        }
        let power_all_id = 0;
        let power_thr_id = 0;
        let power_data_id = 0;
        let device_info_id = 0;
        let sensor_id = 0;
        let wanning_id = 0;

        function switchPage(pageId) { 
            document.querySelectorAll('.page').forEach(function(p){ p.classList.remove('active-page'); }); 
            document.getElementById(pageId + 'Page').classList.add('active-page'); 
            document.querySelectorAll('.tab-btn').forEach(function(btn){ btn.classList.remove('active'); }); 
            document.querySelector('.tab-btn[data-page="' + pageId + '"]').classList.add('active'); 

            if(pageId == 'network')
            {
                clearInterval(power_all_id);
                clearInterval(power_thr_id);
                clearInterval(power_data_id);
                clearInterval(device_info_id);
                clearInterval(sensor_id);
                clearInterval(wanning_id);
                ws.send(mk_hdr_bin(0, PKT_TYPE.NEW_PKT_TYPE_NETWORK,0, 0, 0));
            }else if(pageId == 'rs485')
            {
                clearInterval(power_all_id);
                clearInterval(power_thr_id);
                clearInterval(power_data_id);
                clearInterval(device_info_id);
                clearInterval(sensor_id);   
                clearInterval(wanning_id);
                ws.send(mk_hdr_bin(0, PKT_TYPE.NEW_PKT_TYPE_RS485,0, 0, 0));             
            } 
            else if(pageId =='monitor')
            {
                clearInterval(device_info_id);
                power_all_id = setInterval(function() { ws.send(mk_hdr_bin(0, PKT_TYPE.NEW_PKT_TYPE_ELE_INFO, SUB_POWER_TYPE.NEW_SUB_PKT_TYPE_ELE_DATA_ALL, 0, 0));}, 600);
                power_data_id = setInterval(function() { 
                    ws.send(mk_hdr_bin(0, PKT_TYPE.NEW_PKT_TYPE_ELE_INFO, SUB_POWER_TYPE.NEW_SUB_PKT_TYPE_ELE_DATA_L1, 0, 0));
                    setTimeout(() => {ws.send(mk_hdr_bin(0, PKT_TYPE.NEW_PKT_TYPE_ELE_INFO, SUB_POWER_TYPE.NEW_SUB_PKT_TYPE_ELE_DATA_INFO, 0, 0));},40);
                }, 300);
                power_thr_id = setInterval(function() { ws.send(mk_hdr_bin(0, PKT_TYPE.NEW_PKT_TYPE_ELE_INFO, SUB_POWER_TYPE.NEW_SUB_PKT_TYPE_ELE_DATA_THR, 0, 0));}, 500);
                sensor_id = setInterval(function() { ws.send(mk_hdr_bin(0, PKT_TYPE.NEW_PKT_TYPE_SENSOR,0, 0, 0));}, 1000);
                wanning_id = setInterval(function() { ws.send(mk_hdr_bin(0, PKT_TYPE.NEW_PKT_TYPE_WANNING,0, 0, 0));}, 3000);
            }else if(pageId =='snmp')
            {
                clearInterval(power_all_id);
                clearInterval(power_thr_id);
                clearInterval(power_data_id);
                clearInterval(device_info_id);
                clearInterval(sensor_id);
                clearInterval(wanning_id);
                ws.send(mk_hdr_bin(0, PKT_TYPE.NEW_PKT_TYPE_SNMP, 0, 0, 0));
            }
            else if(pageId == 'device')
            {
                clearInterval(power_all_id);
                clearInterval(power_thr_id);
                clearInterval(power_data_id);
                clearInterval(sensor_id);
                clearInterval(wanning_id);
                ntpConfig.ntpZone = device_info.zone;
                loadNtpConfig();
                device_info_id = setInterval(function() { ws.send(mk_hdr_bin(0, PKT_TYPE.NEW_PKT_TYPE_DEVICE_INFO,0, 0, 0));}, 1000);
            }
        }


        function init() {
            connectWebSocket();
            startTimeUpdater();
            document.getElementById('openDelayConfigBtn').addEventListener('click', openDelayModal);
            document.getElementById('openThresholdConfigBtn').addEventListener('click', openThresholdModal);
            document.getElementById('openResetEnergyModalBtn').addEventListener('click', openResetEnergyModal);
            document.getElementById('allOnBtn').addEventListener('click', allOn);
            document.getElementById('allOffBtn').addEventListener('click', allOff);
            document.getElementById('openAlarmModalBtn').addEventListener('click', openAlarmModal);
            document.getElementById('cleanSoundLight').addEventListener('click', clean_sound_light);


            document.getElementById('tempCard').addEventListener('click',openTempModal);
            document.getElementById('humiCard').addEventListener('click',openHumiModal);
            document.getElementById('smokeCard').addEventListener('click',openSmokeModal);
            document.getElementById('co2Card').addEventListener('click',openCo2Modal);
            document.getElementById('setSystemRebootBtn').addEventListener('click',rebootSystem);


            document.getElementById('ALL').addEventListener('click',function(){
                show_l_info = 0;
                document.getElementById('ALL').classList.add('active');
                document.getElementById('L1').classList.remove('active');
                document.getElementById('L2').classList.remove('active');
                document.getElementById('L3').classList.remove('active');
            });
            document.getElementById('L1').addEventListener('click',function(){
                show_l_info =1;
                document.getElementById('ALL').classList.remove('active');
                document.getElementById('L1').classList.add('active');
                document.getElementById('L2').classList.remove('active');
                document.getElementById('L3').classList.remove('active');
            });
            document.getElementById('L2').addEventListener('click',function(){
                show_l_info = 2;
                document.getElementById('ALL').classList.remove('active');
                document.getElementById('L1').classList.remove('active');
                document.getElementById('L2').classList.add('active');
                document.getElementById('L3').classList.remove('active');
            });
            document.getElementById('L3').addEventListener('click',function(){
                show_l_info = 3
                document.getElementById('ALL').classList.remove('active');
                document.getElementById('L1').classList.remove('active');
                document.getElementById('L2').classList.remove('active');
                document.getElementById('L3').classList.add('active');
            });


            document.getElementById('closeAlarmModalBtn').addEventListener('click', function() {
                closeModal('alarmModal');
            });
            document.getElementById('cancelAlarmModalBtn').addEventListener('click', function() {
                closeModal('alarmModal');
            });
            document.getElementById('clearAlarmBtn').addEventListener('click', clearAlarm);
            document.getElementById('saveNetConfigBtn').addEventListener('click', saveNetConfig);
            document.getElementById('saveRs485ConfigBtn').addEventListener('click', saveRs485Config);
            document.getElementById('saveSnmpConfigBtn').addEventListener('click', saveSnmpConfig);
            document.getElementById('ipMode').addEventListener('change', updateStaticIpFieldsEnable);
            document.getElementById('snmpTrapStatus').addEventListener('change', updateSnmpEnable);
            document.getElementById('reconnectBtn').addEventListener('click', function() {
                if (ws) ws.close();
                connectWebSocket();
            });
            document.getElementById('setSystemTimeBtn').addEventListener('click', function() {
                confirmNtp();
            });

            const tabs = document.querySelectorAll('.tab-btn');
            for (let j = 0; j < tabs.length; j++) tabs[j].addEventListener('click', function() {
                switchPage(this.dataset.page);
            });

            document.getElementById('closeTempModalBtn').addEventListener('click', function() {
                closeModal('tempCardModal');
            });
            document.getElementById('closeHumiModalBtn').addEventListener('click', function() {
                closeModal('humiCardModal');
            });
            document.getElementById('closeSmokeModalBtn').addEventListener('click', function() {
                closeModal('smokeCardModal');
            });
            document.getElementById('closeCo2ModalBtn').addEventListener('click', function() {
                closeModal('co2CardModal');
            });

            document.getElementById('closeDelayModalBtn').addEventListener('click', function() {
                closeModal('delayModal');
            });
            document.getElementById('cancelDelayModalBtn').addEventListener('click', function() {
                closeModal('delayModal');
            });
            document.getElementById('closeThresholdModalBtn').addEventListener('click', function() {
                closeModal('thresholdModal');
            });
            document.getElementById('cancelThresholdModalBtn').addEventListener('click', function() {
                closeModal('thresholdModal');
            });
            document.getElementById('closeResetModalBtn').addEventListener('click', function() {
                closeModal('resetEnergyModal');
            });
            document.getElementById('cancelResetModalBtn').addEventListener('click', function() {
                closeModal('resetEnergyModal');
            });

            document.getElementById('confirmTempThrBtn').addEventListener('click', confirmTempThr);
            document.getElementById('confirmHumiThrBtn').addEventListener('click', confirmHumiThr);
            document.getElementById('confirmSmokeThrBtn').addEventListener('click', confirmSmokeThr);
            document.getElementById('confirmCo2ThrBtn').addEventListener('click', confirmCo2Thr);
            document.getElementById('confirmResetEnergyBtn').addEventListener('click', confirmResetEnergy);
            document.getElementById('selectAllChannels').addEventListener('click', selectAllChannels);
            document.getElementById('deselectAllChannels').addEventListener('click', deselectAllChannels);

            const modals = ['delayModal', 'thresholdModal', 'resetEnergyModal', 'alarmModal'];
            for (let k = 0; k < modals.length; k++)(function(id) {
                const el = document.getElementById(id);
                if (el) el.addEventListener('click', function(e) {
                    if (e.target === document.getElementById(id)) closeModal(id);
                });
            })(modals[k]);
        }


        init();
    </script>
    </body>

</html>