zhouchong
/
anKeYuan-largeScreen-9600


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695169616971698169917001701170217031704170517061707170817091710171117121713171417151716171717181719172017211722172317241725172617271728172917301731173217331734173517361737173817391740174117421743174417451746174717481749175017511752175317541755175617571758175917601761176217631764176517661767176817691770177117721773177417751776177717781779178017811782178317841785178617871788178917901791179217931794179517961797179817991800180118021803180418051806180718081809181018111812181318141815181618171818181918201821182218231824182518261827182818291830183118321833183418351836183718381839184018411842184318441845184618471848184918501851185218531854185518561857185818591860186118621863186418651866186718681869187018711872187318741875187618771878187918801881188218831884188518861887
							<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>实验室安全智能监测与管控中心</title>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
<style>
/* ========== RESET ========== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ========== DEEP BLUE SCI-FI THEME ========== */
:root {
  --bg-deep:    #030e1f;
  --bg-panel:   rgba(5,16,42,0.95);
  --bg-card:    rgba(7,22,54,0.85);
  --blue:       #1e90ff;
  --blue-dim:   rgba(30,144,255,0.14);
  --blue-glow:  rgba(30,144,255,0.5);
  --cyan:       #00d8ff;
  --cyan-dim:   rgba(0,216,255,0.12);
  --teal:       #00e5c8;
  --indigo:     #4361ee;
  --red:        #ff3b3b;
  --green:      #00e676;
  --gold:       #ffd740;
  --white:      #ddf0ff;
  --text:       #a8cce8;
  --text-dim:   rgba(110,165,210,0.55);
  --border:     rgba(30,144,255,0.22);
  --border-h:   rgba(30,144,255,0.65);
  --shadow:     0 4px 24px rgba(0,80,220,0.22);
  --font-main:  'PingFang SC','Microsoft YaHei','Noto Sans SC',sans-serif;
}

html, body { width:100%; height:100%; overflow:auto; background:var(--bg-deep); font-family:var(--font-main); color:var(--text); }

/* ========== FIXED SIZE WRAPPER ========== */
#scale-root {
  width:9600px; height:2800px;
  position:relative;
  overflow:hidden;
  display:flex; flex-direction:column;
}

/* ========== BACKGROUND ========== */
#nebula-canvas { position:fixed; top:0; left:0; width:100%; height:100%; pointer-events:none; z-index:0; }
.bg-hex {
  position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='52' viewBox='0 0 60 52'%3E%3Cpolygon points='30,2 58,17 58,47 30,52 2,47 2,17' fill='none' stroke='rgba(30,144,255,0.05)' stroke-width='1'/%3E%3C/svg%3E");
  background-size:150px 130px;
}
.bg-hex::after { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 50% 50%, transparent 25%, var(--bg-deep) 85%); }

/* ========== TOP NAV ========== */
.top-nav {
  position:relative; z-index:10; flex-shrink:0;
  height:160px; display:flex; align-items:stretch;
  background:linear-gradient(180deg, rgba(4,18,52,0.99) 0%, rgba(3,12,36,0.97) 100%);
  border-bottom:1px solid rgba(30,144,255,0.3);
  box-shadow:0 2px 30px rgba(0,80,220,0.28), inset 0 1px 0 rgba(30,144,255,0.15);
}
.nav-left { display:flex; align-items:center; padding:0 50px; width:950px; gap:30px; }
.nav-logo {
  width:100px; height:100px; border-radius:20px; flex-shrink:0;
  background:linear-gradient(135deg,#0d2d6b,#1565c0);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 40px rgba(30,144,255,0.6), inset 0 0 20px rgba(255,255,255,0.1);
  position:relative; overflow:visible;
}
.nav-logo::after { content:'安'; font-size:45px; font-weight:900; color:rgba(255,255,255,0.95); }
.nav-logo-ring {
  position:absolute; inset:-10px; border-radius:25px;
  border:2px solid rgba(30,144,255,0.5);
  animation:ringPulse 2s ease-in-out infinite;
}
@keyframes ringPulse { 0%,100%{transform:scale(1);opacity:0.5} 50%{transform:scale(1.1);opacity:1} }
.nav-org { font-size:30px; color:var(--text-dim); line-height:1.4; }
.nav-org strong { display:block; font-size:32px; color:var(--cyan); }

.nav-center {
  flex:1; display:flex; align-items:center; justify-content:center; gap:30px; position:relative;
}
.nav-title {
  font-size:65px; font-weight:700; letter-spacing:10px;
  background:linear-gradient(90deg,var(--blue),var(--cyan),var(--white),var(--cyan),var(--blue));
  background-size:200% auto;
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  animation:titleShine 4s linear infinite;
  filter:drop-shadow(0 0 40px rgba(30,144,255,0.5));
}
@keyframes titleShine { from{background-position:0% center} to{background-position:200% center} }
.nav-title-deco {
  position:absolute; bottom:15px; left:50%; transform:translateX(-50%);
  width:900px; height:2px;
  background:linear-gradient(90deg,transparent,var(--blue),var(--cyan),var(--blue),transparent);
  animation:decoGlow 3s ease-in-out infinite;
}
@keyframes decoGlow { 0%,100%{opacity:0.5} 50%{opacity:1;filter:blur(1px)} }

.btn-nav-switch {
  padding:18px 55px; border-radius:50px; cursor:pointer; outline:none;
  background:var(--bg-deep);
  border:2px solid var(--blue); color:var(--cyan);
  font-size:32px; font-weight:600; letter-spacing:2px;
  transition:all 0.3s; position:relative; overflow:hidden; flex-shrink:0;
}
.btn-nav-switch::before {
  content:''; position:absolute; top:0; left:-100%; width:100%; height:100%;
  background:linear-gradient(90deg,transparent,rgba(30,144,255,0.25),transparent);
  animation:btnShine 3s linear infinite;
}
@keyframes btnShine { from{left:-100%} to{left:100%} }
.btn-nav-switch:hover { box-shadow:0 0 60px rgba(30,144,255,0.6); transform:translateY(-2px); }

.nav-right { width:950px; display:flex; align-items:center; justify-content:flex-end; padding:0 50px; gap:50px; }
.nav-weather { display:flex; align-items:center; gap:20px; font-size:32px; color:var(--text-dim); }
.nav-weather .icon { font-size:45px; }
.nav-clock .time { font-size:55px; font-weight:300; color:var(--gold); font-variant-numeric:tabular-nums; letter-spacing:4px; }
.nav-clock .date { font-size:30px; color:var(--text-dim); margin-top:5px; text-align:right; }

/* ========== MAIN CONTENT: 4 COLS 2:2:4:2 ========== */
.main-content {
  flex:1; min-height:0;
  display:grid;
  grid-template-columns:2fr 1.5fr 4.5fr 2fr;
  gap:0; padding:20px 20px 20px;
  position:relative; z-index:2;
}

/* ========== PANEL SYSTEM ========== */
.panel-col { display:flex; flex-direction:column; gap:18px; min-height:0; padding:0 10px; }
.panel {
  position:relative; border-radius:15px; overflow:hidden;
  background:var(--bg-panel);
  border:1px solid var(--border);
  flex-shrink:0;
}
.panel::before {
  content:''; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  background:linear-gradient(135deg,rgba(30,144,255,0.05) 0%,transparent 50%,rgba(0,216,255,0.03) 100%);
}

/* Corner ornaments */
.pc { position:absolute; width:35px; height:35px; z-index:3; pointer-events:none; }
.pc.tl { top:0; left:0; }
.pc.tr { top:0; right:0; transform:scaleX(-1); }
.pc.bl { bottom:0; left:0; transform:scaleY(-1); }
.pc.br { bottom:0; right:0; transform:scale(-1); }
.pc svg { width:100%; height:100%; }

/* Animated border beam */
.border-beam { position:absolute; inset:0; pointer-events:none; border-radius:inherit; overflow:hidden; z-index:2; }
.border-beam::before {
  content:''; position:absolute; top:0; left:-100%; width:40%; height:3px;
  background:linear-gradient(90deg,transparent,rgba(30,144,255,0.9),rgba(0,216,255,0.7),transparent);
  animation:beamTop 5s linear infinite;
}
.border-beam::after {
  content:''; position:absolute; bottom:0; right:-100%; width:40%; height:3px;
  background:linear-gradient(90deg,transparent,rgba(0,216,255,0.7),rgba(30,144,255,0.9),transparent);
  animation:beamBottom 5s linear infinite 2.5s;
}
@keyframes beamTop    { from{left:-40%} to{left:100%} }
@keyframes beamBottom { from{right:-40%} to{right:100%} }

.panel-header {
  display:flex; align-items:center; gap:25px;
  padding:20px 30px 18px;
  border-bottom:1px solid var(--border);
  background:linear-gradient(90deg,rgba(0,60,160,0.18),transparent);
  flex-shrink:0;
}
.panel-header-icon {
  width:65px; height:65px; border-radius:12px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:32px;
  background:linear-gradient(135deg,rgba(30,144,255,0.25),rgba(0,216,255,0.15));
  border:1px solid rgba(30,144,255,0.35);
  animation:iconGlow 3s ease-in-out infinite;
}
@keyframes iconGlow {
  0%,100%{box-shadow:0 0 15px rgba(30,144,255,0.3)}
  50%{box-shadow:0 0 35px rgba(30,144,255,0.7),0 0 12px rgba(0,216,255,0.3)}
}
.panel-title { font-size:30px; font-weight:600; letter-spacing:2px; color:var(--cyan); }

/* ========== STATUS BADGES ========== */
.status-row { display:flex; gap:15px; }
.status-badge {
  flex:1; padding:15px 10px; border-radius:10px; text-align:center;
  background:var(--bg-card); border:1px solid var(--border);
}
.status-badge.active  { border-color:var(--green);  background:rgba(0,230,118,0.07); }
.status-badge.warning { border-color:#f59e0b;        background:rgba(245,158,11,0.07); }
.status-badge.idle    { border-color:var(--indigo);  background:rgba(67,97,238,0.07); }
.status-badge .val { font-size:48px; font-weight:700; }
.status-badge.active  .val { color:var(--green); }
.status-badge.warning .val { color:#f59e0b; }
.status-badge.idle    .val { color:var(--indigo); }
.status-badge .lbl { font-size:25px; color:var(--text-dim); margin-top:5px; }

/* ========== FLIP COUNTER ========== */
.flip-counters { display:flex; gap:25px; }
.flip-counter { flex:1; text-align:center; padding:18px 15px; border-radius:10px; background:var(--bg-card); border:1px solid var(--border); }
.flip-counter .fc-label { font-size:25px; color:var(--text-dim); margin-bottom:12px; letter-spacing:2px; }
.flip-counter .fc-digits { display:flex; gap:8px; justify-content:center; }
.flip-digit {
  width:50px; height:75px; border-radius:8px;
  background:linear-gradient(180deg,rgba(4,18,55,0.9),rgba(2,10,32,0.95));
  border:1px solid rgba(30,144,255,0.3);
  display:flex; align-items:center; justify-content:center;
  font-size:45px; font-weight:700; color:var(--gold);
  font-variant-numeric:tabular-nums; position:relative; overflow:hidden;
}
.flip-digit::after { content:''; position:absolute; left:0; right:0; top:50%; height:2px; background:rgba(0,0,0,0.4); }

/* ========== SENSOR SCROLL ========== */
.sensor-scroll-wrap { overflow:hidden; flex:1; min-height:0; }
.sensor-scroll-inner { animation:scrollUp 30s linear infinite; }
.sensor-scroll-inner:hover { animation-play-state:paused; }
@keyframes scrollUp { 0%{transform:translateY(0)} 100%{transform:translateY(-50%)} }

.sensor-item {
  padding:18px 20px; border-radius:10px; margin-bottom:12px;
  background:var(--bg-card); border:1px solid var(--border);
}
.sensor-item.alert {
  border-color:rgba(255,59,59,0.6); background:rgba(255,30,30,0.07);
  animation:alertGlow 1.5s ease-in-out infinite;
}
@keyframes alertGlow { 0%,100%{box-shadow:0 0 12px rgba(255,59,59,0.25)} 50%{box-shadow:0 0 40px rgba(255,59,59,0.6)} }
.sensor-item-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.sensor-name { font-size:28px; font-weight:600; color:var(--white); }
.sensor-unit { font-size:25px; color:var(--text-dim); }
.sensor-metrics { display:flex; gap:10px; flex-wrap:wrap; }
.sensor-metric {
  padding:5px 15px; border-radius:5px; font-size:25px;
  background:rgba(4,16,45,0.7); border:1px solid rgba(30,144,255,0.2);
  display:flex; align-items:center; gap:8px; color:var(--text);
}
.sensor-metric.alarm {
  background:rgba(255,0,30,0.12); border-color:var(--red); color:var(--red);
  animation:blinkRed 0.8s ease-in-out infinite;
}
@keyframes blinkRed { 0%,100%{opacity:1} 50%{opacity:0.35} }

/* ========== WARNING SCROLL ========== */
.warn-scroll-wrap { overflow:hidden; flex:1; min-height:0; }
.warn-scroll-inner { animation:scrollUp 22s linear infinite; }
.warn-scroll-inner:hover { animation-play-state:paused; }
.warn-item {
  padding:18px 20px; border-radius:10px; margin-bottom:12px;
  background:rgba(245,158,11,0.05); border:1px solid rgba(245,158,11,0.2);
}
.warn-item-head { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:10px; gap:15px; }
.warn-lab { font-size:28px; font-weight:600; color:#fcd34d; flex:1; }
.warn-time { font-size:25px; color:var(--text-dim); white-space:nowrap; }
.warn-detail { font-size:25px; color:var(--text-dim); display:flex; align-items:center; gap:10px; }
.warn-metric-val { color:#fb923c; font-weight:600; }

/* ========== CHEMICAL INVENTORY TAGS ========== */
.chem-tag-row { display:flex; gap:12px; margin-bottom:12px; }
.chem-tag {
  flex:1; padding:14px 18px; border-radius:8px; text-align:center; cursor:pointer;
  font-size:26px; font-weight:600; letter-spacing:2px; border:1px solid rgba(30,144,255,0.3);
  background:var(--bg-card); color:var(--text-dim); transition:all 0.25s;
}
.chem-tag.active {
  border-color:var(--cyan); color:var(--cyan);
  background:rgba(0,216,255,0.1); text-shadow:0 0 10px rgba(0,216,255,0.5);
  box-shadow:0 0 12px rgba(0,216,255,0.15);
}
.chem-tag:hover:not(.active) { border-color:rgba(30,144,255,0.6); color:var(--text); }

/* chemical inventory summary cards */
.chem-stat-card {
  border-radius:10px; padding:16px 20px;
  background:rgba(4,14,38,0.7); border:1px solid rgba(30,144,255,0.15);
  transition:border-color 0.25s;
}
.chem-stat-card:hover { border-color:rgba(30,144,255,0.4); }
.chem-stat-card.total { border-color:rgba(30,144,255,0.3); background:rgba(30,144,255,0.06); text-align:center; }
.chem-stat-card.ctrl  { border-color:rgba(239,68,68,0.25); background:rgba(239,68,68,0.05); }
.chem-stat-card.free  { border-color:rgba(0,216,255,0.2);  background:rgba(0,216,255,0.04); }
.chem-stat-card.cat   { border-color:rgba(255,215,64,0.22); background:rgba(255,215,64,0.04); }
.csc-label { font-size:24px; color:var(--text-dim); letter-spacing:2px; margin-bottom:4px; }
.csc-value { font-size:52px; font-weight:700; color:#ef4444; line-height:1.1; }
.csc-value.total { color:var(--white); }
.chem-stat-card.total .csc-value { color:var(--white); font-size:60px; }
.csc-unit { font-size:24px; font-weight:400; color:var(--text-dim); margin-left:6px; }
.csc-sub { font-size:22px; color:rgba(239,68,68,0.55); margin-top:8px; }

/* warn-item type: emergency vs chemical */
.warn-item.type-emergency {
  background:rgba(245,158,11,0.06); border:1px solid rgba(245,158,11,0.25);
}
.warn-item.type-chemical {
  background:rgba(0,216,255,0.04); border:1px solid rgba(0,216,255,0.18);
}
.warn-type-badge {
  display:inline-flex; align-items:center; gap:5px;
  padding:4px 12px; border-radius:6px; font-size:22px; font-weight:600; margin-right:10px;
}
.warn-type-badge.emergency { background:rgba(245,158,11,0.15); color:#fbbf24; }
.warn-type-badge.chemical  { background:rgba(0,216,255,0.12);  color:var(--cyan); }
.warn-lab-info { font-size:27px; font-weight:600; color:#fcd34d; flex:1; min-width:0; }
.warn-lab-info.chemical { color:#67e8f9; }

/* ========== DEVICE STATS ========== */
.device-online-row { display:flex; gap:18px; margin-bottom:18px; }
.device-stat-chip {
  flex:1; padding:15px; border-radius:10px; text-align:center;
  background:var(--bg-card); border:1px solid var(--border);
}
.device-stat-chip.online { border-color:var(--green); }
.device-stat-chip.offline { border-color:var(--red); }
.device-stat-chip .dv { font-size:50px; font-weight:700; }
.device-stat-chip.online  .dv { color:var(--green); }
.device-stat-chip.offline .dv { color:var(--red); }
.device-stat-chip .dl { font-size:25px; color:var(--text-dim); }

.device-list-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.device-list-item {
  padding:15px; border-radius:10px;
  background:var(--bg-card); border:1px solid var(--border);
  display:flex; flex-direction:column; align-items:center; gap:8px;
}
.device-list-item .dli-icon { font-size:40px; }
.device-list-item .dli-num { font-size:38px; font-weight:700; color:var(--gold); }
.device-list-item .dli-name { font-size:22px; color:var(--text-dim); text-align:center; line-height:1.3; }

/* ========== EQUIP STATS ========== */
.equip-mid-row { display:flex; gap:15px; }
.equip-stat-item { flex:1; text-align:center; padding:15px 10px; border-radius:10px; background:var(--bg-card); border:1px solid var(--border); }
.equip-stat-item .ev { font-size:38px; font-weight:700; color:var(--gold); }
.equip-stat-item .el { font-size:22px; color:var(--text-dim); margin-top:5px; }

/* ========== EQUIP STATUS CARDS ========== */
.equip-status-card {
  position:relative; border-radius:12px; padding:18px 22px 15px;
  background:var(--bg-card);
  border:1px solid color-mix(in srgb, var(--sc) 35%, transparent);
  display:flex; flex-direction:column; justify-content:space-between;
  overflow:hidden; transition:border-color 0.3s;
}
.equip-status-card::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse at 10% 10%, color-mix(in srgb, var(--sc) 10%, transparent) 0%, transparent 65%);
  pointer-events:none;
}
.equip-status-card:hover { border-color:color-mix(in srgb, var(--sc) 70%, transparent); }
.esc-icon {
  width:70px; height:70px; color:var(--sc);
  filter:drop-shadow(0 0 12px var(--sc));
  animation:iconGlow 3s ease-in-out infinite;
  flex-shrink:0;
}
.esc-num {
  font-size:55px; font-weight:700; letter-spacing:2px;
  color:var(--sc); line-height:1;
  text-shadow:0 0 30px color-mix(in srgb, var(--sc) 60%, transparent);
}
.esc-label { font-size:25px; color:var(--text-dim); margin-top:2px; }
.esc-bar { height:5px; border-radius:2px; background:rgba(255,255,255,0.06); margin-top:10px; overflow:hidden; }
.esc-bar-fill {
  height:100%; border-radius:2px;
  background:linear-gradient(90deg, var(--sc), color-mix(in srgb, var(--sc) 50%, transparent));
  box-shadow:0 0 10px var(--sc);
}

/* ========== CENTER COL (3区) ========== */
.center-col { display:flex; flex-direction:column; padding:0 10px; min-height:0; position:relative; }

/* Monitor view — 全时显示 */
#view-monitor {
  flex:1; display:flex; flex-direction:column; border-radius:15px;
  border:1px solid var(--border); background:var(--bg-panel); overflow:hidden; min-height:0;
}
.monitor-header {
  padding:20px 30px; border-bottom:1px solid var(--border); flex-shrink:0;
  display:flex; align-items:center; gap:25px;
  background:linear-gradient(90deg,rgba(0,60,160,0.18),transparent);
}
.monitor-inner { flex:1; display:grid; grid-template-columns:575px 1fr; gap:0; min-height:0; overflow:hidden; }
.monitor-left {
  display:flex; flex-direction:column; gap:15px; padding:20px; border-right:1px solid var(--border);
  min-height:0; overflow:hidden;
}
.monitor-right { padding:20px; display:flex; flex-direction:column; gap:15px; min-height:0; }

.search-box {
  display:flex; align-items:center; gap:18px; padding:15px 25px; border-radius:10px;
  background:var(--bg-card); border:1px solid var(--border); flex-shrink:0;
}
.search-box input { flex:1; background:none; border:none; outline:none; color:var(--text); font-size:30px; font-family:var(--font-main); }
.search-box input::placeholder { color:var(--text-dim); }
.filter-select {
  padding:12px 25px; border-radius:10px; width:100%; flex-shrink:0;
  background:var(--bg-card); border:1px solid var(--border);
  color:var(--text); font-size:28px; font-family:var(--font-main); outline:none; cursor:pointer; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M0 0l6 8 6-8z' fill='rgba(30,144,255,0.6)'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 25px center;
}
.tree-wrap { flex:1; overflow-y:auto; overflow-x:hidden; min-height:0; }
.tree-wrap::-webkit-scrollbar { width:8px; }
.tree-wrap::-webkit-scrollbar-thumb { background:var(--border); border-radius:5px; }
.tree-node-label {
  display:flex; align-items:center; gap:15px; padding:12px 20px; border-radius:8px;
  font-size:28px; color:var(--text); transition:all 0.2s; user-select:none; cursor:pointer;
}
.tree-node-label:hover { background:var(--blue-dim); color:var(--blue); }
.tree-node-label.selected { background:rgba(30,144,255,0.15); color:var(--cyan); border-left:5px solid var(--blue); }
.tree-node-label .arrow { transition:transform 0.2s; font-size:25px; color:var(--text-dim); flex-shrink:0; }
.tree-node-label .arrow.open { transform:rotate(90deg); }
.tree-children { padding-left:35px; display:none; }
.tree-children.open { display:block; }

.camera-grid-header { display:flex; align-items:center; justify-content:space-between; flex-shrink:0; }
.camera-breadcrumb { font-size:30px; color:var(--text-dim); }
.camera-breadcrumb span { color:var(--cyan); }
.camera-pager { display:flex; align-items:center; gap:15px; }
.pager-btn {
  width:60px; height:60px; border-radius:8px; cursor:pointer;
  background:var(--bg-card); border:1px solid var(--border);
  color:var(--text-dim); font-size:32px; display:flex; align-items:center; justify-content:center; transition:all 0.2s;
}
.pager-btn:hover { border-color:var(--blue); color:var(--blue); }
.pager-info { font-size:28px; color:var(--text-dim); }
.camera-grid {
  display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(3,1fr);
  gap:12px; flex:1; min-height:0;
}
.camera-cell {
  position:relative; border-radius:10px; overflow:hidden;
  background:#020810; border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
}
.camera-cell:hover { border-color:var(--blue); }
.camera-cell.ai-cam { border-color:rgba(0,230,118,0.4); }
.camera-cell canvas { width:100%; height:100%; display:block; }
.camera-overlay { position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg,rgba(0,0,0,0.4) 0%,transparent 30%,transparent 70%,rgba(0,0,0,0.5) 100%); }
.camera-label { position:absolute; bottom:10px; left:15px; font-size:25px; color:rgba(255,255,255,0.75); background:rgba(0,0,0,0.5); padding:3px 10px; border-radius:5px; }
.camera-rec { position:absolute; top:10px; right:15px; display:flex; align-items:center; gap:8px; font-size:25px; color:var(--red); background:rgba(0,0,0,0.5); padding:3px 10px; border-radius:5px; }
.camera-rec::before { content:''; width:12px; height:12px; border-radius:50%; background:var(--red); animation:blinkRed 1s ease-in-out infinite; }
.camera-ai-badge { position:absolute; top:10px; left:15px; font-size:25px; color:var(--green); background:rgba(0,30,15,0.75); padding:3px 10px; border-radius:5px; border:1px solid rgba(0,230,118,0.3); }
.ai-detection-box { position:absolute; border:5px solid var(--red); background:rgba(255,59,59,0.1); border-radius:5px; animation:detBox 1.5s ease-in-out infinite; }
@keyframes detBox { 0%,100%{border-color:#ff3b3b;box-shadow:0 0 20px rgba(255,59,59,0.4)} 50%{border-color:#fca5a5;box-shadow:0 0 45px rgba(255,59,59,0.7)} }
.ai-detection-label { position:absolute; bottom:100%; left:0; white-space:nowrap; font-size:25px; background:#ff3b3b; color:#fff; padding:3px 10px; border-radius:5px; margin-bottom:5px; }

/* ========== STATUS DOTS ========== */
.status-dot { width:20px; height:20px; border-radius:50%; display:inline-block; animation:dotPulse 2s ease-in-out infinite; }
.status-dot.green  { background:var(--green); box-shadow:0 0 15px var(--green); }
.status-dot.red    { background:var(--red);   box-shadow:0 0 15px var(--red); animation:blinkRed 0.8s ease-in-out infinite; }
.status-dot.orange { background:#f59e0b; box-shadow:0 0 15px #f59e0b; }
@keyframes dotPulse { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.3);opacity:0.7} }

/* ========== SCAN EFFECT ========== */
.scan-effect { position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:0; }
.scan-effect::after {
  content:''; position:absolute; left:0; right:0; height:200px; top:-200px;
  background:linear-gradient(180deg,transparent,rgba(30,144,255,0.025),transparent);
  animation:scanFull 9s linear infinite;
}
@keyframes scanFull { from{top:-200px} to{top:100%} }

/* ========== ALERT MODAL ========== */
#alert-modal {
  position:fixed; inset:0; z-index:9999;
  display:none; align-items:center; justify-content:center;
  background:rgba(0,0,0,0.9); backdrop-filter:blur(6px);
}
#alert-modal.show { display:flex; animation:alertFadeIn 0.4s ease; }
@keyframes alertFadeIn { from{opacity:0;transform:scale(0.88)} to{opacity:1;transform:scale(1)} }
.alert-modal-inner {
  position:relative; width:2200px; border-radius:20px; overflow:hidden;
  background:linear-gradient(135deg,rgba(38,3,8,0.98),rgba(14,2,5,0.99));
  border:2px solid rgba(239,68,68,0.5);
  box-shadow:0 0 250px rgba(239,68,68,0.45),inset 0 0 150px rgba(200,0,0,0.08);
}
.alert-scan-line { position:absolute; left:0; right:0; height:5px; background:linear-gradient(90deg,transparent,rgba(239,68,68,0.9),transparent); animation:alertScan 1.5s linear infinite; top:0; z-index:2; }
@keyframes alertScan { from{top:0} to{top:100%} }
.alert-modal-header {
  padding:45px 60px 35px; background:linear-gradient(90deg,rgba(200,0,0,0.18),transparent);
  display:flex; align-items:center; gap:40px; border-bottom:2px solid rgba(239,68,68,0.25);
}
.alert-icon { font-size:85px; animation:alertFlash 0.6s ease-in-out infinite; }
@keyframes alertFlash { 0%,100%{opacity:1} 50%{opacity:0.15} }
.alert-title { font-size:55px; font-weight:700; color:#ef4444; letter-spacing:8px; }
.alert-subtitle { font-size:28px; color:rgba(239,100,100,0.6); margin-top:8px; letter-spacing:5px; }
/* body: flex row — left cam + right info */
.alert-modal-body { padding:45px 60px; display:flex; gap:50px; align-items:flex-start; }
/* LEFT: camera panel */
.alert-cam-wrap {
  flex:0 0 900px;
  display:flex; flex-direction:column; gap:15px;
}
.alert-cam-label {
  font-size:28px; color:rgba(255,150,150,0.7); letter-spacing:5px;
  display:flex; align-items:center; gap:20px;
}
.alert-cam-label::before { content:''; width:15px; height:15px; border-radius:50%; background:#ef4444; box-shadow:0 0 20px #ef4444; animation:blinkRed 0.8s ease-in-out infinite; }
.alert-cam-box {
  position:relative; width:900px; height:700px; border-radius:10px; overflow:hidden;
  border:2px solid rgba(239,68,68,0.5);
  box-shadow:0 0 50px rgba(239,68,68,0.25), inset 0 0 75px rgba(200,0,0,0.1);
}
.alert-cam-box canvas { display:block; width:100%; height:100%; }
.alert-cam-overlay { position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg,rgba(0,0,0,0.35) 0%,transparent 25%,transparent 75%,rgba(0,0,0,0.45) 100%); }
.alert-cam-rec { position:absolute; top:20px; right:25px; display:flex; align-items:center; gap:10px; font-size:28px; color:#ef4444; background:rgba(0,0,0,0.6); padding:5px 18px; border-radius:5px; }
.alert-cam-rec::before { content:''; width:15px; height:15px; border-radius:50%; background:#ef4444; animation:blinkRed 1s ease-in-out infinite; }
.alert-cam-id { position:absolute; top:20px; left:25px; font-size:28px; color:rgba(255,255,255,0.8); background:rgba(0,0,0,0.6); padding:5px 18px; border-radius:5px; }
.alert-cam-bottom { position:absolute; bottom:20px; left:25px; right:25px; display:flex; justify-content:space-between; align-items:center; }
.alert-cam-name { font-size:28px; color:rgba(255,255,255,0.8); background:rgba(0,0,0,0.6); padding:5px 18px; border-radius:5px; }
.alert-cam-ai { font-size:25px; color:#00e676; background:rgba(0,30,15,0.75); padding:5px 18px; border-radius:5px; border:1px solid rgba(0,230,118,0.3); }
.alert-det-box { position:absolute; border:5px solid #ef4444; background:rgba(239,68,68,0.1); border-radius:5px; animation:detBox 1.5s ease-in-out infinite; }
.alert-det-label { position:absolute; bottom:100%; left:0; white-space:nowrap; font-size:25px; background:#ef4444; color:#fff; padding:5px 12px; border-radius:5px; margin-bottom:5px; }
/* RIGHT: info */
.alert-info-col { flex:1; display:flex; flex-direction:column; gap:35px; }
.alert-info-grid { display:grid; grid-template-columns:1fr 1fr; gap:25px; }
.alert-info-item { padding:25px 35px; border-radius:10px; background:rgba(239,68,68,0.07); border:1px solid rgba(239,68,68,0.2); }
.alert-info-item .ail { font-size:28px; color:rgba(255,150,150,0.65); margin-bottom:10px; }
.alert-info-item .aiv { font-size:40px; font-weight:700; color:#ef4444; }
.alert-pulse-text { text-align:center; font-size:32px; letter-spacing:5px; color:rgba(239,100,100,0.75); animation:blinkRed 1s ease-in-out infinite; font-weight:600; padding:20px; border:1px solid rgba(239,68,68,0.2); border-radius:10px; background:rgba(239,68,68,0.05); }
.alert-modal-footer { padding:30px 60px; display:flex; gap:30px; justify-content:flex-end; border-top:1px solid rgba(239,68,68,0.15); }
.btn-alert-confirm { padding:22px 70px; border-radius:10px; cursor:pointer; border:2px solid #ef4444; background:rgba(239,68,68,0.15); color:#ef4444; font-size:32px; font-weight:600; transition:all 0.2s; }
.btn-alert-confirm:hover { background:rgba(239,68,68,0.3); }
.btn-alert-ignore { padding:22px 70px; border-radius:10px; cursor:pointer; border:1px solid var(--border); background:transparent; color:var(--text-dim); font-size:32px; transition:all 0.2s; }

/* ========== EVACUATION MODAL ========== */
#evac-modal {
  position:fixed; inset:0; z-index:10000;
  display:none; align-items:center; justify-content:center;
  background:rgba(0,2,18,0.94); backdrop-filter:blur(8px);
}
#evac-modal.show { display:flex; animation:alertFadeIn 0.4s ease; }
.evac-inner {
  position:relative; width:2820px; border-radius:20px; overflow:hidden;
  background:linear-gradient(135deg,rgba(2,8,28,0.99),rgba(1,5,20,0.99));
  border:2px solid rgba(30,144,255,0.45);
  box-shadow:0 0 200px rgba(30,144,255,0.22), inset 0 0 120px rgba(0,50,140,0.05);
  display:flex; flex-direction:column; max-height:96vh;
}
.evac-hdr {
  padding:36px 55px; display:flex; align-items:center; gap:28px; flex-shrink:0;
  border-bottom:1px solid rgba(30,144,255,0.2);
  background:linear-gradient(90deg,rgba(0,55,160,0.12),transparent);
}
.evac-hdr-icon { font-size:68px; }
.evac-hdr-title { font-size:50px; font-weight:700; color:var(--white); letter-spacing:6px; }
.evac-hdr-close {
  margin-left:auto; width:68px; height:68px; border-radius:10px;
  border:1px solid rgba(30,144,255,0.35); background:rgba(30,144,255,0.08);
  color:var(--cyan); font-size:34px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:background 0.2s;
}
.evac-hdr-close:hover { background:rgba(30,144,255,0.22); }
.evac-body { display:flex; flex:1; min-height:0; overflow:hidden; }
.evac-map-col { flex:1; min-width:0; padding:26px 28px; display:flex; flex-direction:column; gap:14px; }
.evac-legend { display:flex; align-items:center; gap:12px; justify-content:flex-end; }
.evac-legend-rect { width:36px; height:14px; background:#1e90ff; border-radius:3px; }
.evac-legend-text { font-size:26px; color:var(--text-dim); }
.evac-map-wrap {
  flex:1; min-height:0; position:relative;
  border-radius:10px; background:rgba(1,8,28,0.65);
  border:1px solid rgba(30,144,255,0.15);
}
.evac-map-wrap svg { width:100%; height:100%; display:block; }
.evac-popup {
  position:absolute; left:3%; top:53%;
  width:390px; border-radius:10px; padding:18px 24px 20px;
  background:rgba(45,4,6,0.97); border:2px solid rgba(239,68,68,0.6);
  box-shadow:0 0 50px rgba(239,68,68,0.28); z-index:5; pointer-events:none;
}
.evac-popup-hdr { display:flex; align-items:center; gap:14px; margin-bottom:12px; }
.evac-popup-alarm { font-size:30px; }
.evac-popup-time { font-size:22px; color:rgba(255,255,255,0.65); flex:1; }
.evac-popup-x { color:rgba(255,255,255,0.45); font-size:22px; }
.evac-popup-badge { background:#ef4444; color:#fff; font-size:20px; font-weight:700; border-radius:5px; padding:4px 14px; display:inline-block; margin-bottom:12px; letter-spacing:1px; }
.evac-popup-msg { font-size:28px; font-weight:600; color:#fff; letter-spacing:1px; }
.evac-right-col { flex:0 0 540px; border-left:1px solid rgba(30,144,255,0.15); display:flex; flex-direction:column; }
.evac-right-hdr { padding:22px 28px; font-size:26px; color:var(--text-dim); letter-spacing:3px; border-bottom:1px solid rgba(30,144,255,0.12); background:rgba(30,144,255,0.04); flex-shrink:0; }
.evac-cam-slot { flex:1; border-bottom:1px solid rgba(30,144,255,0.1); display:flex; align-items:center; justify-content:center; background:rgba(12,15,26,0.6); color:rgba(255,255,255,0.2); font-size:26px; letter-spacing:3px; min-height:180px; }
.evac-floor-lbl { padding:14px 28px; font-size:24px; color:var(--text-dim); letter-spacing:3px; background:rgba(30,144,255,0.06); border-top:1px solid rgba(30,144,255,0.12); border-bottom:1px solid rgba(30,144,255,0.12); flex-shrink:0; }
.evac-footer { padding:26px 50px; display:flex; gap:28px; align-items:stretch; border-top:1px solid rgba(30,144,255,0.15); flex-shrink:0; }
.evac-metrics { flex:0 0 490px; display:flex; flex-direction:column; gap:12px; justify-content:center; }
.evac-metric-row { background:rgba(239,68,68,0.06); border:1px solid rgba(239,68,68,0.2); border-radius:8px; padding:14px 20px; display:flex; justify-content:space-between; align-items:center; }
.evac-metric-col .evac-ml { font-size:22px; color:var(--text-dim); margin-bottom:4px; }
.evac-metric-col .evac-mv { font-size:28px; font-weight:600; color:#ef4444; }
.evac-metric-rt { font-size:26px; color:rgba(255,255,255,0.75); }
.evac-broadcast { flex:1; border:1px solid rgba(30,144,255,0.22); border-radius:12px; padding:18px 24px; display:flex; flex-direction:column; gap:14px; background:rgba(30,144,255,0.04); }
.evac-bc-hdr { display:flex; align-items:center; gap:14px; }
.evac-bc-icon { font-size:28px; }
.evac-bc-title { font-size:30px; font-weight:600; color:var(--white); flex:1; }
.evac-bc-device { font-size:24px; color:var(--text-dim); }
.evac-speaker-row { display:flex; gap:14px; }
.evac-speaker-btn { flex:1; padding:14px 8px; border-radius:8px; font-size:23px; border:1px solid rgba(30,144,255,0.35); background:rgba(30,144,255,0.1); color:var(--cyan); cursor:pointer; transition:background 0.2s; white-space:nowrap; }
.evac-speaker-btn:hover, .evac-speaker-btn.on { background:rgba(30,144,255,0.25); border-color:var(--cyan); }
.evac-input-row { display:flex; gap:14px; }
.evac-text-input { flex:1; padding:13px 18px; border-radius:8px; font-size:26px; border:1px solid rgba(30,144,255,0.25); background:rgba(0,8,36,0.7); color:var(--white); outline:none; }
.evac-text-input::placeholder { color:rgba(255,255,255,0.2); }
.evac-send-btn { padding:13px 40px; border-radius:8px; font-size:26px; font-weight:600; border:1px solid rgba(30,144,255,0.4); background:rgba(30,144,255,0.14); color:var(--cyan); cursor:pointer; transition:background 0.2s; }
.evac-send-btn:hover { background:rgba(30,144,255,0.3); }
.evac-actions { flex:0 0 380px; display:flex; flex-direction:column; gap:14px; justify-content:center; }
.evac-btn-later { padding:22px; border-radius:10px; font-size:30px; font-weight:600; border:1px solid rgba(255,255,255,0.2); background:rgba(255,255,255,0.05); color:rgba(255,255,255,0.55); cursor:pointer; }
.evac-btn-later:hover { background:rgba(255,255,255,0.1); }
.evac-btn-exec { padding:22px; border-radius:10px; font-size:30px; font-weight:700; border:2px solid #ef4444; background:rgba(239,68,68,0.16); color:#ef4444; cursor:pointer; }
.evac-btn-exec:hover { background:rgba(239,68,68,0.32); }
.btn-alert-evac { padding:22px 70px; border-radius:10px; cursor:pointer; border:2px solid #f59e0b; background:rgba(245,158,11,0.15); color:#f59e0b; font-size:32px; font-weight:600; transition:all 0.2s; }
.btn-alert-evac:hover { background:rgba(245,158,11,0.3); }

/* ========== SCROLLBAR ========== */
::-webkit-scrollbar { width:8px; height:8px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--border); border-radius:5px; }

/* ========== CHART HEIGHTS ========== */
#chart-donut { width:100%; height:100%; }
#chart-stack { width:100%; height:100%; }
#chart-line  { width:100%; height:100%; }
#chart-gauge { width:100%; height:100%; }
#chart-ring  { width:100%; height:100%; }
#chart-pie-status { width:100%; flex:1; min-height:0; }
#chart-pie-usage  { width:100%; flex:1; min-height:0; }
</style>
</head>
<body>

<canvas id="nebula-canvas"></canvas>

<!-- ===== ALERT MODAL ===== -->
<div id="alert-modal">
  <div class="alert-modal-inner">
    <div class="alert-scan-line"></div>
    <div class="alert-modal-header">
      <span class="alert-icon">🚨</span>
      <div>
        <div class="alert-title">⚡ 系统预警 · ALERT</div>
        <div class="alert-subtitle">LABORATORY SAFETY MONITORING SYSTEM · EMERGENCY</div>
      </div>
    </div>
    <div class="alert-modal-body">
      <!-- 左侧: 实验室实时监控画面 360×280 -->
      <div class="alert-cam-wrap">
        <div class="alert-cam-label">告警实验室实时监控画面</div>
        <div class="alert-cam-box">
          <canvas id="alert-cam-canvas" width="900" height="700"></canvas>
          <div class="alert-cam-overlay"></div>
          <div class="alert-cam-id">CAM · A301-02</div>
          <div class="alert-cam-rec">REC</div>
          <div class="alert-cam-bottom">
            <span class="alert-cam-name">化学分析实验室 A301</span>
            <span class="alert-cam-ai">🤖 AI检测</span>
          </div>
          <!-- AI危险行为框 -->
          <div class="alert-det-box" style="left:22%;top:15%;width:28%;height:42%">
            <div class="alert-det-label">危险行为: 未佩戴防护</div>
          </div>
        </div>
      </div>
      <!-- 右侧: 告警信息 -->
      <div class="alert-info-col">
        <div class="alert-info-grid">
          <div class="alert-info-item"><div class="ail">告警实验室</div><div class="aiv" id="alert-lab">化学分析实验室 (A301)</div></div>
          <div class="alert-info-item"><div class="ail">所属单位</div><div class="aiv" id="alert-unit">化学研究所</div></div>
          <div class="alert-info-item"><div class="ail">告警指标</div><div class="aiv" id="alert-metric">TVOC 浓度超标</div></div>
          <div class="alert-info-item"><div class="ail">当前值 / 安全阈值</div><div class="aiv" id="alert-value">2.85 / 0.6 mg/m³</div></div>
        </div>
        <div class="alert-pulse-text">▶▶ 请立即采取安全措施，疏散实验人员 ◀◀</div>
      </div>
    </div>
    <div class="alert-modal-footer">
      <button class="btn-alert-ignore" onclick="closeAlert()">稍后处理</button>
      <button class="btn-alert-evac" onclick="openEvac()">🚪 应急疏散</button>
      <button class="btn-alert-confirm" onclick="closeAlert()">确认处理</button>
    </div>
  </div>
</div>

<!-- ===== EVACUATION MODAL ===== -->
<div id="evac-modal">
  <div class="evac-inner">
    <!-- Header -->
    <div class="evac-hdr">
      <span class="evac-hdr-icon">🚪</span>
      <span class="evac-hdr-title">应急疏散</span>
      <button class="evac-hdr-close" onclick="closeEvac()">✕</button>
    </div>
    <!-- Body -->
    <div class="evac-body">
      <!-- Left: floor plan -->
      <div class="evac-map-col">
        <div class="evac-legend">
          <div class="evac-legend-rect"></div>
          <span class="evac-legend-text">应急疏散路线图</span>
        </div>
        <div class="evac-map-wrap">
          <svg viewBox="0 0 1060 590" xmlns="http://www.w3.org/2000/svg">
            <defs>
              <marker id="ev-arrow" markerWidth="9" markerHeight="7" refX="8" refY="3.5" orient="auto">
                <polygon points="0 0, 9 3.5, 0 7" fill="#1e90ff"/>
              </marker>
            </defs>

            <!-- Top row background -->
            <rect x="45" y="40" width="758" height="185" fill="rgba(0,15,50,0.3)" stroke="rgba(30,144,255,0.28)" stroke-width="1.5"/>
            <!-- Emergency exit zone top-right -->
            <rect x="808" y="40" width="205" height="185" fill="rgba(30,144,255,0.04)" stroke="rgba(30,144,255,0.22)" stroke-width="1" stroke-dasharray="9,5" rx="2"/>
            <text x="910" y="118" text-anchor="middle" fill="rgba(30,144,255,0.6)" font-size="22">紧急</text>
            <text x="910" y="146" text-anchor="middle" fill="rgba(30,144,255,0.6)" font-size="22">出口</text>
            <line x1="870" y1="132" x2="918" y2="132" stroke="#1e90ff" stroke-width="3" marker-end="url(#ev-arrow)" opacity="0.75"/>

            <!-- A101 -->
            <rect x="45" y="40" width="190" height="185" fill="rgba(0,15,50,0.25)" stroke="rgba(30,144,255,0.42)" stroke-width="1.5"/>
            <line x1="45" y1="40" x2="235" y2="225" stroke="rgba(30,144,255,0.12)" stroke-width="1"/>
            <line x1="235" y1="40" x2="45" y2="225" stroke="rgba(30,144,255,0.12)" stroke-width="1"/>
            <text x="140" y="140" text-anchor="middle" fill="rgba(168,204,232,0.65)" font-size="22">A101</text>
            <!-- A102 -->
            <rect x="235" y="40" width="190" height="185" fill="rgba(0,15,50,0.25)" stroke="rgba(30,144,255,0.42)" stroke-width="1.5"/>
            <line x1="235" y1="40" x2="425" y2="225" stroke="rgba(30,144,255,0.12)" stroke-width="1"/>
            <line x1="425" y1="40" x2="235" y2="225" stroke="rgba(30,144,255,0.12)" stroke-width="1"/>
            <text x="330" y="140" text-anchor="middle" fill="rgba(168,204,232,0.65)" font-size="22">A102</text>
            <!-- A103 -->
            <rect x="425" y="40" width="190" height="185" fill="rgba(0,15,50,0.25)" stroke="rgba(30,144,255,0.42)" stroke-width="1.5"/>
            <line x1="425" y1="40" x2="615" y2="225" stroke="rgba(30,144,255,0.12)" stroke-width="1"/>
            <line x1="615" y1="40" x2="425" y2="225" stroke="rgba(30,144,255,0.12)" stroke-width="1"/>
            <text x="520" y="140" text-anchor="middle" fill="rgba(168,204,232,0.65)" font-size="22">A103</text>
            <!-- A104 (blue — near top-right exit) -->
            <rect x="615" y="40" width="193" height="185" fill="rgba(30,144,255,0.1)" stroke="#1e90ff" stroke-width="3"/>
            <line x1="615" y1="40" x2="808" y2="225" stroke="rgba(30,144,255,0.18)" stroke-width="1"/>
            <line x1="808" y1="40" x2="615" y2="225" stroke="rgba(30,144,255,0.18)" stroke-width="1"/>
            <text x="711" y="140" text-anchor="middle" fill="#7ab8e8" font-size="22">A104</text>

            <!-- Corridor -->
            <rect x="45" y="225" width="968" height="85" fill="rgba(0,25,70,0.18)" stroke="rgba(30,144,255,0.2)" stroke-width="1"/>
            <text x="350" y="277" text-anchor="middle" fill="rgba(168,204,232,0.38)" font-size="24" letter-spacing="6">走道</text>
            <!-- Assembly points -->
            <circle cx="645" cy="268" r="22" fill="none" stroke="#1e90ff" stroke-width="2.5" opacity="0.75"/>
            <circle cx="755" cy="268" r="22" fill="none" stroke="#1e90ff" stroke-width="2.5" opacity="0.75"/>

            <!-- Bottom section background -->
            <rect x="45" y="310" width="968" height="242" fill="rgba(0,15,50,0.3)" stroke="rgba(30,144,255,0.28)" stroke-width="1.5"/>
            <!-- Emergency exit zone bottom-left label -->
            <text x="22" y="445" text-anchor="middle" fill="rgba(30,144,255,0.58)" font-size="19" transform="rotate(-90,22,445)">紧急出口</text>
            <line x1="47" y1="432" x2="16" y2="432" stroke="#1e90ff" stroke-width="3" marker-end="url(#ev-arrow)" opacity="0.7"/>

            <!-- A105 (red — alert room) -->
            <rect x="45" y="310" width="185" height="242" fill="rgba(239,68,68,0.1)" stroke="#ef4444" stroke-width="3"/>
            <line x1="45" y1="310" x2="230" y2="552" stroke="rgba(239,68,68,0.22)" stroke-width="1.5"/>
            <line x1="230" y1="310" x2="45" y2="552" stroke="rgba(239,68,68,0.22)" stroke-width="1.5"/>
            <text x="137" y="440" text-anchor="middle" fill="#ef4444" font-size="22" font-weight="600">A105</text>
            <!-- A106 -->
            <rect x="230" y="310" width="185" height="242" fill="rgba(0,15,50,0.25)" stroke="rgba(30,144,255,0.42)" stroke-width="1.5"/>
            <line x1="230" y1="310" x2="415" y2="552" stroke="rgba(30,144,255,0.12)" stroke-width="1"/>
            <line x1="415" y1="310" x2="230" y2="552" stroke="rgba(30,144,255,0.12)" stroke-width="1"/>
            <text x="322" y="440" text-anchor="middle" fill="rgba(168,204,232,0.65)" font-size="22">A106</text>
            <!-- A107 -->
            <rect x="415" y="310" width="185" height="242" fill="rgba(0,15,50,0.25)" stroke="rgba(30,144,255,0.42)" stroke-width="1.5"/>
            <line x1="415" y1="310" x2="600" y2="552" stroke="rgba(30,144,255,0.12)" stroke-width="1"/>
            <line x1="600" y1="310" x2="415" y2="552" stroke="rgba(30,144,255,0.12)" stroke-width="1"/>
            <text x="507" y="440" text-anchor="middle" fill="rgba(168,204,232,0.65)" font-size="22">A107</text>
            <!-- A108 -->
            <rect x="600" y="310" width="185" height="242" fill="rgba(0,15,50,0.25)" stroke="rgba(30,144,255,0.42)" stroke-width="1.5"/>
            <line x1="600" y1="310" x2="785" y2="552" stroke="rgba(30,144,255,0.12)" stroke-width="1"/>
            <line x1="785" y1="310" x2="600" y2="552" stroke="rgba(30,144,255,0.12)" stroke-width="1"/>
            <text x="692" y="440" text-anchor="middle" fill="rgba(168,204,232,0.65)" font-size="22">A108</text>
            <!-- A109 (blue — evacuation destination) -->
            <rect x="785" y="310" width="228" height="242" fill="rgba(30,144,255,0.1)" stroke="#1e90ff" stroke-width="3"/>
            <line x1="785" y1="310" x2="1013" y2="552" stroke="rgba(30,144,255,0.18)" stroke-width="1.5"/>
            <line x1="1013" y1="310" x2="785" y2="552" stroke="rgba(30,144,255,0.18)" stroke-width="1.5"/>
            <text x="899" y="440" text-anchor="middle" fill="#7ab8e8" font-size="22" font-weight="600">A109</text>

            <!-- Evacuation route: bottom-left through corridor -->
            <line x1="230" y1="432" x2="50" y2="432" stroke="#1e90ff" stroke-width="3" stroke-dasharray="14,7" marker-end="url(#ev-arrow)"/>
            <!-- Evacuation route: top-right toward exit -->
            <line x1="808" y1="132" x2="862" y2="132" stroke="#1e90ff" stroke-width="3" stroke-dasharray="14,7" marker-end="url(#ev-arrow)"/>
            <!-- Connector: corridor down to A104 corridor side -->
            <line x1="711" y1="225" x2="711" y2="310" stroke="#1e90ff" stroke-width="3" stroke-dasharray="14,7"/>
          </svg>

          <!-- Floating alert popup over A105 -->
          <div class="evac-popup">
            <div class="evac-popup-hdr">
              <span class="evac-popup-alarm">🚨</span>
              <span class="evac-popup-time">2026-03-23 14:32:18</span>
              <span class="evac-popup-x">✕</span>
            </div>
            <div class="evac-popup-badge">触发风险</div>
            <div class="evac-popup-msg">发生风险：TVOC浓度超标</div>
          </div>
        </div>
      </div>
      <!-- Right: camera feeds -->
      <div class="evac-right-col">
        <div class="evac-right-hdr">房间号-实验室名称</div>
        <div class="evac-cam-slot">实时视频监控</div>
        <div class="evac-cam-slot">实时视频监控</div>
        <div class="evac-floor-lbl">楼道 2层</div>
        <div class="evac-cam-slot">实时视频监控</div>
      </div>
    </div>
    <!-- Footer -->
    <div class="evac-footer">
      <!-- Alert metrics -->
      <div class="evac-metrics">
        <div class="evac-metric-row">
          <div class="evac-metric-col">
            <div class="evac-ml">告警指标</div>
            <div class="evac-mv">TVOC 浓度超标</div>
          </div>
          <div class="evac-metric-rt">2.85 / 0.6 mg/m³</div>
        </div>
        <div class="evac-metric-row">
          <div class="evac-metric-col">
            <div class="evac-ml">当前值 / 安全阈值</div>
            <div class="evac-mv">TVOC 浓度超标</div>
          </div>
          <div class="evac-metric-rt">2.85 / 0.6 mg/m³</div>
        </div>
      </div>
      <!-- Voice broadcast -->
      <div class="evac-broadcast">
        <div class="evac-bc-hdr">
          <span class="evac-bc-icon">📢</span>
          <span class="evac-bc-title">语音广播</span>
          <span class="evac-bc-device">选择播放设备</span>
        </div>
        <div class="evac-speaker-row">
          <button class="evac-speaker-btn on">NKL1FB1122 喇叭</button>
          <button class="evac-speaker-btn on">NKL1FB1122 喇叭</button>
          <button class="evac-speaker-btn on">NKL1FB1122 喇叭</button>
        </div>
        <div class="evac-input-row">
          <input type="text" class="evac-text-input" placeholder="请输入喊话内容"/>
          <button class="evac-send-btn">发送</button>
        </div>
      </div>
      <!-- Action buttons -->
      <div class="evac-actions">
        <button class="evac-btn-later" onclick="closeEvac()">稍后处理</button>
        <button class="evac-btn-exec">执行疏散</button>
      </div>
    </div>
  </div>
</div>

<!-- ===== MAIN WRAPPER ===== -->
<div id="scale-root">
  <div class="bg-hex"></div>
  <div class="scan-effect"></div>

  <!-- TOP NAV -->
  <nav class="top-nav">
    <!-- 左侧：实时时钟 + 星期 -->
    <div class="nav-left" style="justify-content:flex-start">
      <div class="nav-clock">
        <div class="time" id="clock-time">--:--:--</div>
        <div class="date" id="clock-date">----年--月--日 星期-</div>
      </div>
    </div>

    <!-- 中部：LOGO + 单位名称 + 大标题 -->
    <div class="nav-center">
      <div class="nav-logo"><div class="nav-logo-ring"></div></div>
      <div class="nav-org" style="margin-right:50px">
        <strong>中国安全生产科学研究院</strong>
        <span>National Institute for Occupational Safety</span>
      </div>
      <div style="width:2px;height:80px;background:linear-gradient(180deg,transparent,rgba(30,144,255,0.6),transparent);flex-shrink:0;margin-right:50px"></div>
      <div style="display:flex;flex-direction:column;align-items:center;position:relative">
        <div class="nav-title">实验室安全智能监测与管控中心</div>
        <div class="nav-title-deco"></div>
      </div>
    </div>

    <!-- 右侧：天气 -->
    <div class="nav-right" style="justify-content:flex-end">
      <div class="nav-weather">
        <span class="icon">⛅</span>
        <div>
          <div>北京 · 晴转多云</div>
          <div style="font-size:28px;color:var(--gold)">12°C / AQI 68</div>
        </div>
      </div>
    </div>
  </nav>

  <!-- MAIN CONTENT: 4 COLS L→R: 1区(2) 2区(2) 3区(4) 4区(2) -->
  <div class="main-content">

    <!-- ======== 1区 ======== -->
    <div class="panel-col">

      <!-- 实验室基本情况统计 -->
      <div class="panel" style="flex:0 0 auto;display:flex;flex-direction:column">
        <div class="border-beam"></div>
        <svg class="pc tl" viewBox="0 0 14 14"><path d="M0 14 V0 H14" fill="none" stroke="rgba(30,144,255,0.85)" stroke-width="1.5"/></svg>
        <svg class="pc tr" viewBox="0 0 14 14"><path d="M0 14 V0 H14" fill="none" stroke="rgba(30,144,255,0.85)" stroke-width="1.5"/></svg>
        <svg class="pc bl" viewBox="0 0 14 14"><path d="M0 14 V0 H14" fill="none" stroke="rgba(30,144,255,0.85)" stroke-width="1.5"/></svg>
        <svg class="pc br" viewBox="0 0 14 14"><path d="M0 14 V0 H14" fill="none" stroke="rgba(30,144,255,0.85)" stroke-width="1.5"/></svg>
        <div class="panel-header">
          <div class="panel-header-icon">🏛️</div>
          <span class="panel-title">实验室基本情况统计</span>
          <div class="status-dot green" style="margin-left:auto"></div>
        </div>

        <!-- 上部 80%：左(3) 总数 + 右(7) 分级 -->
        <div style="flex:4;display:flex;min-height:680px;overflow:hidden">

          <!-- 左侧 4：实验室总数统计 -->
          <div style="flex:4;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:25px 20px;border-right:1px solid var(--border);background:linear-gradient(180deg,rgba(30,144,255,0.04),transparent)">
            <!-- SVG 圆弧仪表 -->
            <svg width="320" height="320" viewBox="0 0 320 320">
              <defs>
                <linearGradient id="arcG1" x1="0%" y1="0%" x2="100%" y2="100%">
                  <stop offset="0%" stop-color="#1e90ff"/>
                  <stop offset="100%" stop-color="#00d8ff"/>
                </linearGradient>
                <filter id="glow1">
                  <feGaussianBlur stdDeviation="4" result="blur"/>
                  <feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
                </filter>
              </defs>
              <!-- 最外装饰环 -->
              <circle cx="160" cy="160" r="148" fill="none" stroke="rgba(30,144,255,0.08)" stroke-width="1" stroke-dasharray="6 6"/>
              <!-- 外轨道 -->
              <circle cx="160" cy="160" r="136" fill="none" stroke="rgba(30,144,255,0.14)" stroke-width="3"/>
              <!-- 主弧 300° -->
              <circle cx="160" cy="160" r="136" fill="none" stroke="url(#arcG1)" stroke-width="8"
                stroke-dasharray="711 143" stroke-linecap="round" transform="rotate(-240 160 160)" filter="url(#glow1)"/>
              <!-- 内轨道 -->
              <circle cx="160" cy="160" r="110" fill="rgba(3,14,31,0.7)" stroke="rgba(0,216,255,0.15)" stroke-width="2"/>
              <!-- 四分级色弧 小环 -->
              <circle cx="160" cy="160" r="88" fill="none" stroke="#cc0000" stroke-width="12" stroke-dasharray="42 485" stroke-linecap="round" transform="rotate(-90 160 160)" opacity="0.9"/>
              <circle cx="160" cy="160" r="88" fill="none" stroke="#ff8000" stroke-width="12" stroke-dasharray="99 428" stroke-linecap="round" transform="rotate(-57 160 160)" opacity="0.9"/>
              <circle cx="160" cy="160" r="88" fill="none" stroke="#ffcc00" stroke-width="12" stroke-dasharray="160 367" stroke-linecap="round" transform="rotate(22 160 160)" opacity="0.9"/>
              <circle cx="160" cy="160" r="88" fill="none" stroke="#0066cc" stroke-width="12" stroke-dasharray="153 374" stroke-linecap="round" transform="rotate(145 160 160)" opacity="0.9"/>
              <!-- 端点光晕 -->
              <circle cx="160" cy="24" r="6" fill="#1e90ff" opacity="0.9"/>
              <!-- 中心数字 -->
              <text x="160" y="145" text-anchor="middle" fill="#ffd740" font-size="72" font-weight="900" font-family="Arial,sans-serif" letter-spacing="-2">128</text>
              <text x="160" y="190" text-anchor="middle" fill="rgba(168,204,232,0.75)" font-size="26" font-family="Arial,sans-serif" letter-spacing="4">间</text>
            </svg>
            <!-- 标签 -->
            <div style="text-align:center">
              <div style="font-size:30px;font-weight:700;color:var(--cyan);letter-spacing:4px">实验室总数</div>
              <div style="font-size:22px;color:var(--text-dim);margin-top:6px;letter-spacing:2px">TOTAL LABORATORIES</div>
            </div>
            <!-- 分级色条 -->
            <div style="width:100%;padding:0 10px">
              <div style="display:flex;gap:5px;height:12px;border-radius:6px;overflow:hidden">
                <div style="flex:12;background:#cc0000;box-shadow:0 0 10px rgba(204,0,0,0.5)"></div>
                <div style="flex:28;background:#ff8000;box-shadow:0 0 10px rgba(255,128,0,0.4)"></div>
                <div style="flex:45;background:#ffcc00;box-shadow:0 0 10px rgba(255,204,0,0.4)"></div>
                <div style="flex:43;background:#0066cc;box-shadow:0 0 10px rgba(0,102,204,0.4)"></div>
              </div>
              <div style="display:flex;gap:5px;margin-top:8px;font-size:22px;color:var(--text-dim);text-align:center">
                <span style="flex:12">Ⅰ</span><span style="flex:28">Ⅱ</span><span style="flex:45">Ⅲ</span><span style="flex:43">Ⅳ</span>
              </div>
            </div>
          </div>

          <!-- 右侧 6：分级统计（环形图 + 明细列表） -->
          <div style="flex:6;display:flex;flex-direction:column;justify-content:center;padding:25px 25px 20px;gap:0">
            <!-- 环形图 -->
            <div style="flex:0 0 340px;width:100%" id="chart-donut"></div>
            <!-- 分级明细 -->
            <div style="display:flex;flex-direction:column;gap:10px;margin-top:10px">
              <div style="display:flex;justify-content:space-between;align-items:center;font-size:26px;padding:10px 16px;border-radius:8px;background:rgba(204,0,0,0.07);border-left:4px solid #cc0000">
                <span style="display:flex;align-items:center;gap:12px"><span style="width:16px;height:16px;border-radius:3px;background:#cc0000;display:inline-block;box-shadow:0 0 8px rgba(204,0,0,0.8)"></span>I 级（危险）</span>
                <span style="color:#ff6666;font-weight:700;font-size:28px">12间</span>
              </div>
              <div style="display:flex;justify-content:space-between;align-items:center;font-size:26px;padding:10px 16px;border-radius:8px;background:rgba(255,128,0,0.07);border-left:4px solid #ff8000">
                <span style="display:flex;align-items:center;gap:12px"><span style="width:16px;height:16px;border-radius:3px;background:#ff8000;display:inline-block;box-shadow:0 0 8px rgba(255,128,0,0.8)"></span>II 级（较危险）</span>
                <span style="color:#ffaa44;font-weight:700;font-size:28px">28间</span>
              </div>
              <div style="display:flex;justify-content:space-between;align-items:center;font-size:26px;padding:10px 16px;border-radius:8px;background:rgba(255,204,0,0.07);border-left:4px solid #ffcc00">
                <span style="display:flex;align-items:center;gap:12px"><span style="width:16px;height:16px;border-radius:3px;background:#ffcc00;display:inline-block;box-shadow:0 0 8px rgba(255,204,0,0.8)"></span>III 级（一般）</span>
                <span style="color:#ffe066;font-weight:700;font-size:28px">45间</span>
              </div>
              <div style="display:flex;justify-content:space-between;align-items:center;font-size:26px;padding:10px 16px;border-radius:8px;background:rgba(0,102,204,0.07);border-left:4px solid #0066cc">
                <span style="display:flex;align-items:center;gap:12px"><span style="width:16px;height:16px;border-radius:3px;background:#0066cc;display:inline-block;box-shadow:0 0 8px rgba(0,102,204,0.8)"></span>IV 级（较安全）</span>
                <span style="color:#4499ff;font-weight:700;font-size:28px">43间</span>
              </div>
            </div>
          </div>
        </div>

        <!-- 下部 20%：三种状态统计 -->
        <div style="flex:1;display:flex;align-items:center;padding:0 25px 20px;border-top:1px solid var(--border);gap:15px;min-height:170px">
          <div class="status-row" style="width:100%;margin:0">
            <div class="status-badge active"><div class="val">20</div><div class="lbl">使用（间）</div></div>
            <div class="status-badge warning"><div class="val">3</div><div class="lbl">异常（间）</div></div>
            <div class="status-badge idle"><div class="val">105</div><div class="lbl">空闲（间）</div></div>
          </div>
        </div>
      </div>

      <!-- 实验室安全分级统计 -->
      <div class="panel" style="flex:1;min-height:450px;display:flex;flex-direction:column">
        <div class="border-beam"></div>
        <div class="panel-header">
          <div class="panel-header-icon">📊</div>
          <span class="panel-title">实验室安全分级统计</span>
        </div>
        <div style="flex:1;min-height:0;padding:15px 20px">
          <div id="chart-stack" style="height:100%;width:100%"></div>
        </div>
      </div>

      <!-- 实验室进入人数统计及走势 -->
      <div class="panel" style="flex:0 0 auto">
        <div class="border-beam"></div>
        <div class="panel-header">
          <div class="panel-header-icon">👥</div>
          <span class="panel-title">实验室进入人数统计及走势</span>
        </div>
        <div style="padding:20px 25px">
          <div class="flip-counters">
            <div class="flip-counter"><div class="fc-label">今日进入总人数</div><div class="fc-digits" id="flip-total"></div></div>
            <div class="flip-counter"><div class="fc-label">当前在场实验人数</div><div class="fc-digits" id="flip-current"></div></div>
          </div>
          <div style="height:275px;margin-top:12px" id="chart-line"></div>
        </div>
      </div>

    </div><!-- /1区 -->

    <!-- ======== 2区 ======== -->
    <div class="panel-col">

      <!-- 智能环境感知应用设备统计 -->
      <div class="panel" style="flex:0 0 auto">
        <div class="border-beam"></div>
        <svg class="pc tl" viewBox="0 0 14 14"><path d="M0 14 V0 H14" fill="none" stroke="rgba(30,144,255,0.85)" stroke-width="1.5"/></svg>
        <svg class="pc tr" viewBox="0 0 14 14"><path d="M0 14 V0 H14" fill="none" stroke="rgba(30,144,255,0.85)" stroke-width="1.5"/></svg>
        <svg class="pc bl" viewBox="0 0 14 14"><path d="M0 14 V0 H14" fill="none" stroke="rgba(30,144,255,0.85)" stroke-width="1.5"/></svg>
        <svg class="pc br" viewBox="0 0 14 14"><path d="M0 14 V0 H14" fill="none" stroke="rgba(30,144,255,0.85)" stroke-width="1.5"/></svg>
        <div class="panel-header">
          <div class="panel-header-icon">📡</div>
          <span class="panel-title">智能环境感知应用设备统计</span>
        </div>
        <div style="padding:20px 25px">
          <div class="device-online-row">
            <div class="device-stat-chip online"><div class="dv">312</div><div class="dl">在线设备</div></div>
            <div class="device-stat-chip offline"><div class="dv">18</div><div class="dl">离线设备</div></div>
          </div>
          <div style="display:flex;gap:20px;align-items:center">
            <div id="chart-gauge" style="flex:0 0 295px;height:295px"></div>
            <div style="flex:1;display:flex;flex-direction:column;gap:12px">
              <div style="display:flex;gap:12px">
                <div class="device-list-item" style="flex:1"><div class="dli-icon">🏷️</div><div class="dli-num">86</div><div class="dli-name">电子信息铭牌</div></div>
                <div class="device-list-item" style="flex:1"><div class="dli-icon">⚗️</div><div class="dli-num">44</div><div class="dli-name">化学品智能终端</div></div>
                <div class="device-list-item" style="flex:1"><div class="dli-icon">🌡️</div><div class="dli-num">128</div><div class="dli-name">传感器</div></div>
              </div>
              <div style="display:flex;gap:12px;justify-content:center">
                <div class="device-list-item" style="flex:0 0 calc(33.33% - 6px)"><div class="dli-icon">📷</div><div class="dli-num">72</div><div class="dli-name">智慧摄像头</div></div>
                <div class="device-list-item" style="flex:0 0 calc(33.33% - 6px)"><div class="dli-icon">📡</div><div class="dli-num">35</div><div class="dli-name">其他智能设备</div></div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 实验室设备分类及使用统计 (4:6) -->
      <div class="panel" style="flex:1;min-height:650px;display:flex;flex-direction:column">
        <div class="border-beam"></div>
        <div class="panel-header">
          <div class="panel-header-icon">🔬</div>
          <span class="panel-title">实验室设备分类及使用统计</span>
        </div>
        <!-- 4:6 layout -->
        <div style="flex:1;display:flex;flex-direction:column;padding:15px 25px;gap:12px;min-height:0">
          <!-- 上: 占4 环形图 - 设备分类（含图例：名称/数量/占比） -->
          <div style="flex:4;min-height:0">
            <div id="chart-ring" style="height:100%;width:100%"></div>
          </div>
          <!-- 下: 占6 统计 + 双饼图 -->
          <div style="flex:6;min-height:0;display:flex;flex-direction:column;gap:10px">
            <!-- 上方 3网格统计 -->
            <div class="equip-mid-row" style="flex:0 0 auto">
              <div class="equip-stat-item"><div class="ev">2,458</div><div class="el">设备总数（台）</div></div>
              <div class="equip-stat-item"><div class="ev">18,620</div><div class="el">使用时长（h）</div></div>
              <div class="equip-stat-item"><div class="ev">62.4%</div><div class="el">设备使用率</div></div>
            </div>
            <!-- 下方 左右双饼图 -->
            <div style="flex:1;min-height:0;display:flex;gap:12px">
              <div style="flex:1;min-height:0;display:flex;flex-direction:column;gap:6px">
                <div style="text-align:center;margin-top:100px;padding:5px 0 7px;font-size:22px;font-weight:600;letter-spacing:3px;color:var(--cyan);border-bottom:1px solid rgba(0,216,255,0.22);text-shadow:0 0 10px rgba(0,216,255,0.45)">设备状态统计</div>
                <div id="chart-pie-status" style="flex:1;min-height:0"></div>
              </div>
              <div style="flex:1;min-height:0;display:flex;flex-direction:column;gap:6px">
                <div style="text-align:center;margin-top:100px;padding:5px 0 7px;font-size:22px;font-weight:600;letter-spacing:3px;color:var(--cyan);border-bottom:1px solid rgba(0,216,255,0.22);text-shadow:0 0 10px rgba(0,216,255,0.45)">使用状态统计</div>
                <div id="chart-pie-usage" style="flex:1;min-height:0"></div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 危化品库存统计 -->
      <div class="panel" style="flex:0 0 auto;min-height:460px">
        <div class="border-beam"></div>
        <svg class="pc tl" viewBox="0 0 14 14"><path d="M0 14 V0 H14" fill="none" stroke="rgba(30,144,255,0.85)" stroke-width="1.5"/></svg>
        <svg class="pc tr" viewBox="0 0 14 14"><path d="M0 14 V0 H14" fill="none" stroke="rgba(30,144,255,0.85)" stroke-width="1.5"/></svg>
        <svg class="pc bl" viewBox="0 0 14 14"><path d="M0 14 V0 H14" fill="none" stroke="rgba(30,144,255,0.85)" stroke-width="1.5"/></svg>
        <svg class="pc br" viewBox="0 0 14 14"><path d="M0 14 V0 H14" fill="none" stroke="rgba(30,144,255,0.85)" stroke-width="1.5"/></svg>
        <div class="panel-header">
          <div class="panel-header-icon">⚗️</div>
          <span class="panel-title">化学品库存动态统计</span>
        </div>
        <div style="padding:12px 20px 15px;display:flex;gap:15px;height:calc(100% - 82px)">
          <!-- 左侧: 饼图 -->
          <div style="flex:1;min-width:0;display:flex;flex-direction:column">
            <div id="chart-chem-inventory" style="flex:1;min-height:0"></div>
          </div>
          <!-- 右侧: 存量统计 -->
          <div style="flex:0 0 380px;display:flex;flex-direction:column;gap:14px;justify-content:center">
            <!-- 总量 -->
            <div class="chem-stat-card total">
              <div class="csc-label">存量化学品总量</div>
              <div class="csc-value">1,229<span class="csc-unit">L</span></div>
            </div>
            <!-- 管控 -->
            <div class="chem-stat-card ctrl">
              <div style="display:flex;justify-content:space-between;align-items:flex-start">
                <div>
                  <div class="csc-label">管控类化学品</div>
                  <div class="csc-value">269<span class="csc-unit">L</span></div>
                </div>
                <div class="csc-pct-ring" style="--pct:21.9;--clr:#ef4444">
                  <svg viewBox="0 0 60 60" width="80" height="80">
                    <circle cx="30" cy="30" r="24" fill="none" stroke="rgba(239,68,68,0.12)" stroke-width="6"/>
                    <circle cx="30" cy="30" r="24" fill="none" stroke="#ef4444" stroke-width="6"
                      stroke-dasharray="27.5 123" stroke-linecap="round" transform="rotate(-90 30 30)"
                      style="filter:drop-shadow(0 0 4px rgba(239,68,68,0.7))"/>
                    <text x="30" y="35" text-anchor="middle" fill="#ef4444" font-size="11" font-weight="700" font-family="Arial">21.9%</text>
                  </svg>
                </div>
              </div>
              <div class="csc-sub">占总量 21.9% · 共 5 类目</div>
            </div>
            <!-- 非管控 -->
            <div class="chem-stat-card free">
              <div style="display:flex;justify-content:space-between;align-items:flex-start">
                <div>
                  <div class="csc-label">非管控类化学品</div>
                  <div class="csc-value" style="color:#00d8ff">960<span class="csc-unit">L</span></div>
                </div>
                <div>
                  <svg viewBox="0 0 60 60" width="80" height="80">
                    <circle cx="30" cy="30" r="24" fill="none" stroke="rgba(0,216,255,0.12)" stroke-width="6"/>
                    <circle cx="30" cy="30" r="24" fill="none" stroke="#00d8ff" stroke-width="6"
                      stroke-dasharray="101 50.6" stroke-linecap="round" transform="rotate(-90 30 30)"
                      style="filter:drop-shadow(0 0 4px rgba(0,216,255,0.7))"/>
                    <text x="30" y="35" text-anchor="middle" fill="#00d8ff" font-size="11" font-weight="700" font-family="Arial">78.1%</text>
                  </svg>
                </div>
              </div>
              <div class="csc-sub" style="color:rgba(0,216,255,0.55)">占总量 78.1% · 共 5 类目</div>
            </div>
            <!-- 类目总数 -->
            <div class="chem-stat-card cat">
              <div class="csc-label">存量化学品总类目数</div>
              <div style="display:flex;align-items:baseline;gap:12px;margin-top:8px">
                <div class="csc-value" style="color:#ffd740">10<span class="csc-unit">类</span></div>
                <div style="display:flex;gap:6px;align-items:center">
                  <span style="font-size:22px;color:rgba(239,68,68,0.8)">管控 5类</span>
                  <span style="font-size:20px;color:rgba(168,204,232,0.3)">|</span>
                  <span style="font-size:22px;color:rgba(0,216,255,0.8)">非管控 5类</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

    </div><!-- /2区 -->

    <!-- ======== 3区: 实时监控 ======== -->
    <div class="center-col">

      <!-- 实时监控（常显） -->
      <div id="view-monitor">
        <div class="monitor-header">
          <span style="font-size:32px;font-weight:600;color:var(--cyan);letter-spacing:2px">📹 实时监控</span>
          <span style="font-size:28px;color:var(--text-dim);margin-left:10px">CCTV Live Feed</span>
          <div style="margin-left:auto;display:flex;align-items:center;gap:15px">
            <div class="status-dot green"></div>
            <span style="font-size:28px;color:var(--text-dim)">信号正常</span>
          </div>
        </div>
        <div class="monitor-inner">
          <div class="monitor-left">
            <div class="search-box"><span style="font-size:32px;color:var(--text-dim)">🔍</span><input type="text" placeholder="搜索楼栋 / 楼层 / 房间…"></div>
            <select class="filter-select">
              <option value="">全部二级单位</option>
              <option>化学研究所</option><option>物理研究所</option>
              <option>生物研究所</option><option>材料研究所</option><option>工程研究所</option>
            </select>
            <div class="tree-wrap" id="building-tree"></div>
          </div>
          <div class="monitor-right">
            <div class="camera-grid-header">
              <div class="camera-breadcrumb"><span>安科院主园区</span> › <span>综合实验楼A</span> › <span>3层</span></div>
              <div class="camera-pager">
                <button class="pager-btn">‹</button>
                <span class="pager-info">1 / 3 页</span>
                <button class="pager-btn">›</button>
              </div>
            </div>
            <div class="camera-grid" id="camera-grid"></div>
          </div>
        </div>
      </div>

    </div><!-- /3区 -->

    <!-- ======== 4区 ======== -->
    <div class="panel-col">

      <!-- 实验环境安全智能感知 -->
      <div class="panel" style="flex:7;min-height:0;display:flex;flex-direction:column">
        <div class="border-beam"></div>
        <svg class="pc tl" viewBox="0 0 14 14"><path d="M0 14 V0 H14" fill="none" stroke="rgba(30,144,255,0.85)" stroke-width="1.5"/></svg>
        <svg class="pc tr" viewBox="0 0 14 14"><path d="M0 14 V0 H14" fill="none" stroke="rgba(30,144,255,0.85)" stroke-width="1.5"/></svg>
        <svg class="pc bl" viewBox="0 0 14 14"><path d="M0 14 V0 H14" fill="none" stroke="rgba(30,144,255,0.85)" stroke-width="1.5"/></svg>
        <svg class="pc br" viewBox="0 0 14 14"><path d="M0 14 V0 H14" fill="none" stroke="rgba(30,144,255,0.85)" stroke-width="1.5"/></svg>
        <div class="panel-header">
          <div class="panel-header-icon">🌡️</div>
          <span class="panel-title">实验环境安全智能感知</span>
          <div class="status-dot red" style="margin-left:auto"></div>
        </div>
        <div style="flex:1;min-height:0;padding:15px 20px;display:flex;flex-direction:column">
          <div class="sensor-scroll-wrap">
            <div class="sensor-scroll-inner" id="sensor-list"></div>
          </div>
        </div>
      </div>

      <!-- 实验室实时风险预警 -->
      <div class="panel" style="flex:3;min-height:0;display:flex;flex-direction:column">
        <div class="border-beam"></div>
        <div class="panel-header">
          <div class="panel-header-icon">⚠️</div>
          <span class="panel-title">实验室实时风险预警</span>
          <div style="margin-left:auto;display:flex;align-items:center;gap:18px;flex-shrink:0">
            <div style="display:flex;align-items:center;gap:6px">
              <span style="font-size:22px">🚨</span>
              <span style="font-size:24px;color:var(--text-dim)">应急</span>
              <span style="font-size:44px;font-weight:700;color:#f59e0b">28</span>
              <span style="font-size:22px;color:var(--text-dim)">次</span>
            </div>
            <div style="width:1px;height:40px;background:rgba(30,144,255,0.3)"></div>
            <div style="display:flex;align-items:center;gap:6px">
              <span style="font-size:22px">☣️</span>
              <span style="font-size:24px;color:var(--text-dim)">违规带离</span>
              <span style="font-size:44px;font-weight:700;color:var(--cyan)">14</span>
              <span style="font-size:22px;color:var(--text-dim)">次</span>
            </div>
          </div>
        </div>
        <div style="flex:1;min-height:0;padding:15px 20px;display:flex;flex-direction:column">
          <div class="warn-scroll-wrap">
            <div class="warn-scroll-inner" id="warn-list"></div>
          </div>
        </div>
      </div>

    </div><!-- /4区 -->

  </div><!-- /main-content -->
</div><!-- /scale-root -->

<script>
// ====================================================
// SCALE
// ====================================================
// ====================================================
// INIT MONITOR ON LOAD
// ====================================================
document.addEventListener('DOMContentLoaded', () => {
  if (document.documentElement.requestFullscreen)
    document.documentElement.requestFullscreen().catch(() => {});
  buildTree();
  buildCameras();
});
const WD = ['日','一','二','三','四','五','六'];
function tick() {
  const n = new Date();
  const t = `${String(n.getHours()).padStart(2,'0')}:${String(n.getMinutes()).padStart(2,'0')}:${String(n.getSeconds()).padStart(2,'0')}`;
  const d = `${n.getFullYear()}年${n.getMonth()+1}月${n.getDate()}日 星期${WD[n.getDay()]}`;
  document.getElementById('clock-time').textContent = t;
  document.getElementById('clock-date').textContent = d;
}
setInterval(tick, 1000); tick();

// ====================================================
// NEBULA BACKGROUND
// ====================================================
(function () {
  const c = document.getElementById('nebula-canvas');
  const ctx = c.getContext('2d');
  let W, H, stars = [], t = 0;
  function resize() { W = c.width = window.innerWidth; H = c.height = window.innerHeight; }
  window.addEventListener('resize', resize); resize();
  for (let i = 0; i < 500; i++)
    stars.push({ x: Math.random()*9600, y: Math.random()*2800, r: Math.random()*1.5+0.3, a: Math.random()*0.8+0.2, va: Math.random()*0.02-0.01 });
  function draw() {
    t++;
    ctx.clearRect(0, 0, W, H);
    const g1 = ctx.createRadialGradient(W*0.22, H*0.35, 40, W*0.22, H*0.35, 420);
    g1.addColorStop(0, 'rgba(0,60,180,0.09)'); g1.addColorStop(1, 'transparent');
    ctx.fillStyle = g1; ctx.fillRect(0,0,W,H);
    const g2 = ctx.createRadialGradient(W*0.78, H*0.65, 30, W*0.78, H*0.65, 360);
    g2.addColorStop(0, 'rgba(0,100,220,0.08)'); g2.addColorStop(1, 'transparent');
    ctx.fillStyle = g2; ctx.fillRect(0,0,W,H);
    stars.forEach(s => {
      s.a += s.va; if (s.a > 1 || s.a < 0.1) s.va *= -1;
      const hue = 200 + Math.sin(t * 0.01 + s.x) * 30;
      ctx.beginPath(); ctx.arc(s.x*(W/9600), s.y*(H/2800), s.r, 0, Math.PI*2);
      ctx.fillStyle = `hsla(${hue},80%,80%,${s.a})`; ctx.fill();
    });
    requestAnimationFrame(draw);
  }
  draw();
})();

// ====================================================
// FLIP COUNTER
// ====================================================
function renderFlip(id, val) {
  const el = document.getElementById(id); if (!el) return;
  el.innerHTML = String(val).padStart(4,'0').split('').map(d => `<div class="flip-digit">${d}</div>`).join('');
}
function animFlip(id, from, to, dur) {
  const s = Date.now();
  (function tick() {
    const p = Math.min((Date.now()-s)/dur, 1);
    renderFlip(id, Math.round(from + (to-from)*p));
    if (p < 1) requestAnimationFrame(tick);
  })();
}
renderFlip('flip-total', 1284); renderFlip('flip-current', 47);
setTimeout(() => animFlip('flip-total',   0, 1284, 2000), 600);
setTimeout(() => animFlip('flip-current', 0, 47,   1500), 900);

// ====================================================
// CHEMICAL INVENTORY (2区 化学品库存动态统计)
// ====================================================
const CHEM_PIE_DATA = [
  {name:'管控化学品',   value:269,  itemStyle:{color:'#ef4444'}},
  {name:'非管控化学品', value:960,  itemStyle:{color:'#1e90ff'}},
];
let chemChart = null;
function renderChemChart() {
  if (!chemChart) {
    const el = document.getElementById('chart-chem-inventory');
    if (!el) return;
    chemChart = echarts.init(el);
  }
  chemChart.setOption({
    backgroundColor:'transparent',
    tooltip:{ trigger:'item', formatter:'{b}<br/>数量：{c} L<br/>占比：{d}%' },
    series:[{
      type:'pie', radius:['32%','62%'],
      center:['50%','52%'],
      avoidLabelOverlap:true,
      label:{
        show:true, position:'outside',
        formatter:params => `{name|${params.name}}\n{val|${params.value}L  ${params.percent}%}`,
        rich:{
          name:{ fontSize:24, color:'#a8cce8', lineHeight:30 },
          val:{  fontSize:22, color:'#ffd740',  lineHeight:26 },
        },
        distanceToLabelLine:10,
      },
      labelLine:{ show:true, length:25, length2:35, lineStyle:{color:'rgba(168,204,232,0.5)'} },
      emphasis:{ label:{fontSize:26, fontWeight:'bold'}, scale:true, scaleSize:8 },
      data: CHEM_PIE_DATA,
    }],
  }, true);
}
renderChemChart();

// ====================================================
// SENSOR LIST (4区上)
// ====================================================
const LABS = [
  {name:'化学分析实验室', room:'A301', unit:'化学研究所', t:22.5, h:58, tvoc:0.82, co2:650,  o2:20.9, alert:true},
  {name:'生物安全实验室', room:'B201', unit:'生物研究所', t:20.1, h:62, tvoc:0.18, co2:580,  o2:20.8, alert:false},
  {name:'材料测试实验室', room:'C401', unit:'材料研究所', t:24.0, h:45, tvoc:0.09, co2:520,  o2:20.9, alert:false},
  {name:'精密仪器实验室', room:'A205', unit:'物理研究所', t:21.5, h:50, tvoc:0.14, co2:490,  o2:20.9, alert:false},
  {name:'有机合成实验室', room:'B302', unit:'化学研究所', t:23.8, h:55, tvoc:2.10, co2:725,  o2:20.5, alert:true},
  {name:'光学检测实验室', room:'C203', unit:'物理研究所', t:22.0, h:52, tvoc:0.11, co2:510,  o2:20.9, alert:false},
  {name:'高压实验室',    room:'D101', unit:'工程研究所', t:25.5, h:48, tvoc:0.30, co2:600,  o2:20.7, alert:false},
  {name:'低温实验室',    room:'D205', unit:'物理研究所', t:18.0, h:40, tvoc:0.07, co2:480,  o2:20.9, alert:false},
  {name:'核磁共振室',   room:'A302', unit:'化学研究所', t:20.5, h:54, tvoc:0.05, co2:505,  o2:20.9, alert:false},
  {name:'质谱分析室',   room:'A303', unit:'化学研究所', t:21.0, h:53, tvoc:0.19, co2:530,  o2:20.8, alert:false},
];
function buildSensorList() {
  const el = document.getElementById('sensor-list'); if (!el) return;
  const all = [...LABS, ...LABS];
  el.innerHTML = all.map(lab => `
    <div class="sensor-item ${lab.alert ? 'alert' : ''}">
      <div class="sensor-item-head">
        <span class="sensor-name">${lab.name}（${lab.room}）</span>
        <span class="sensor-unit">${lab.unit}</span>
        ${lab.alert
          ? '<span style="color:var(--red);font-size:25px;animation:blinkRed 0.8s infinite">🚨 告警</span>'
          : '<span style="color:var(--green);font-size:25px">● 正常</span>'}
      </div>
      <div class="sensor-metrics">
        <div class="sensor-metric">🌡️ ${lab.t}°C</div>
        <div class="sensor-metric">💧 ${lab.h}%</div>
        <div class="sensor-metric ${lab.tvoc > 0.6 ? 'alarm' : ''}">🧪 TVOC ${lab.tvoc}</div>
        <div class="sensor-metric ${lab.co2 > 700 ? 'alarm' : ''}">💨 CO₂ ${lab.co2}</div>
        <div class="sensor-metric">🫧 O₂ ${lab.o2}%</div>
      </div>
    </div>`).join('');
}
buildSensorList();

// ====================================================
// WARNING LIST (4区下) — 应急预警 + 危化品违规带离
// ====================================================
const WARNS = [
  {type:'emergency', lab:'化学分析实验室', room:'A301', unit:'化学研究所', metric:'TVOC浓度超标', val:'2.85 mg/m³', time:'2026-03-23 14:32:18'},
  {type:'chemical',  lab:'有机合成实验室', room:'B302', unit:'化学研究所', person:'李研究员',     action:'盐酸未正常使用违规带离',  time:'2026-03-23 13:58:44'},
  {type:'emergency', lab:'有机合成实验室', room:'B302', unit:'化学研究所', metric:'CO₂浓度偏高',  val:'725 ppm',    time:'2026-03-23 12:15:07'},
  {type:'chemical',  lab:'生物安全实验室', room:'B201', unit:'生物研究所', person:'王实验员',     action:'甲醇溶液违规带出实验室',   time:'2026-03-22 17:40:22'},
  {type:'emergency', lab:'高压实验室',    room:'D101', unit:'工程研究所', metric:'温度异常',      val:'38.5 °C',    time:'2026-03-22 12:15:07'},
  {type:'emergency', lab:'生物安全实验室', room:'B201', unit:'生物研究所', metric:'湿度超标',      val:'88% RH',     time:'2026-03-21 11:40:22'},
  {type:'chemical',  lab:'材料测试实验室', room:'C401', unit:'材料研究所', person:'张工程师',     action:'硫酸未经审批带离',        time:'2026-03-21 10:08:55'},
  {type:'emergency', lab:'光学检测实验室', room:'C203', unit:'物理研究所', metric:'O₂浓度偏低',   val:'19.2 %',     time:'2026-03-20 09:22:33'},
  {type:'chemical',  lab:'精密仪器实验室', room:'A205', unit:'物理研究所', person:'赵研究员',     action:'丙酮溶液违规带离实验楼',   time:'2026-03-19 16:45:11'},
  {type:'emergency', lab:'低温实验室',    room:'D205', unit:'物理研究所', metric:'气压异常',      val:'85 kPa',     time:'2026-03-18 23:12:40'},
];
function buildWarnList() {
  const el = document.getElementById('warn-list'); if (!el) return;
  const all = [...WARNS, ...WARNS];
  el.innerHTML = all.map(w => {
    const isEm = w.type === 'emergency';
    const labCls = isEm ? 'warn-lab-info' : 'warn-lab-info chemical';
    const badge = isEm
      ? '<span class="warn-type-badge emergency">🚨 应急预警</span>'
      : '<span class="warn-type-badge chemical">☣️ 违规带离</span>';
    const detail = isEm
      ? `异常传感器：<span class="warn-metric-val">${w.metric} ${w.val}</span>`
      : `<span style="color:#67e8f9">${w.person}</span> — <span style="color:#fbbf24">${w.action}</span>`;
    return `
    <div class="warn-item type-${w.type}">
      <div class="warn-item-head" style="flex-wrap:wrap;gap:8px 15px">
        <div style="display:flex;align-items:center;flex:1;min-width:0;gap:8px">
          ${badge}
          <span class="${labCls}">${w.lab}（${w.room}）- ${w.unit}</span>
        </div>
        <span class="warn-time">${w.time}</span>
      </div>
      <div class="warn-detail">${detail}</div>
    </div>`;
  }).join('');
}
buildWarnList();

// ====================================================
// ALERT MODAL + CAMERA
// ====================================================
function closeAlert() { document.getElementById('alert-modal').classList.remove('show'); }
function openEvac()   { document.getElementById('evac-modal').classList.add('show'); }
function closeEvac()  { document.getElementById('evac-modal').classList.remove('show'); }

let alertCamRAF = null;
function startAlertCam() {
  const canvas = document.getElementById('alert-cam-canvas');
  if (!canvas || canvas._alertRunning) return;
  canvas._alertRunning = true;
  const ctx = canvas.getContext('2d');
  const W = 900, H = 700;
  let t = Math.random() * 1000;
  const noise = Array.from({length:300}, () => ({x:Math.random(), y:Math.random(), s:Math.random()*2.5+0.5, a:Math.random()*0.25}));

  function frame() {
    t += 0.4;
    ctx.clearRect(0, 0, W, H);

    // Background gradient (dark green-tinted night-vision feel with red emergency tint)
    const bg = ctx.createLinearGradient(0, 0, 0, H);
    bg.addColorStop(0, 'hsl(210,45%,5%)');
    bg.addColorStop(1, 'hsl(0,30%,4%)');
    ctx.fillStyle = bg; ctx.fillRect(0, 0, W, H);

    // Perspective floor grid
    ctx.strokeStyle = 'rgba(20,65,140,0.07)'; ctx.lineWidth = 0.5;
    const vp = {x: W/2, y: H*0.44};
    for (let gx = 0; gx <= 12; gx++) { const fx = W*gx/12; ctx.beginPath(); ctx.moveTo(fx,H); ctx.lineTo(vp.x+(fx-W/2)*0.28,vp.y); ctx.stroke(); }
    for (let gy = 0; gy <= 6; gy++) { const fy = H*0.44+(H*0.56)*(gy/6); const wd = W*(0.25+0.75*(gy/6)); ctx.beginPath(); ctx.moveTo((W-wd)/2,fy); ctx.lineTo((W+wd)/2,fy); ctx.stroke(); }

    // Lab furniture silhouettes
    ctx.fillStyle = 'rgba(0,30,80,0.45)';
    ctx.fillRect(W*0.05, H*0.52, W*0.38, H*0.12);  // bench left
    ctx.fillRect(W*0.57, H*0.52, W*0.38, H*0.12);  // bench right
    ctx.fillStyle = 'rgba(0,18,50,0.55)';
    ctx.fillRect(W*0.08, H*0.35, W*0.09, H*0.17);  // cabinet
    ctx.fillRect(W*0.60, H*0.33, W*0.12, H*0.19);  // equipment

    // Person silhouette (lab worker)
    const px = W*(0.4 + Math.sin(t*0.008)*0.03);
    const py = H*(0.58 + Math.cos(t*0.006)*0.015);
    ctx.fillStyle = 'rgba(110,160,240,0.6)';
    ctx.beginPath(); ctx.arc(px, py - H*0.1, W*0.028, 0, Math.PI*2); ctx.fill(); // head
    ctx.fillRect(px - W*0.022, py - H*0.08, W*0.044, H*0.1);  // body

    // Red emergency scan line
    const scanY = (t * 0.8) % H;
    const scanG = ctx.createLinearGradient(0, scanY-8, 0, scanY+8);
    scanG.addColorStop(0, 'transparent');
    scanG.addColorStop(0.5, 'rgba(239,68,68,0.18)');
    scanG.addColorStop(1, 'transparent');
    ctx.fillStyle = scanG; ctx.fillRect(0, scanY-8, W, 16);

    // Noise
    noise.forEach(n => {
      ctx.fillStyle = `rgba(200,210,240,${n.a*0.45})`;
      ctx.fillRect(n.x*W, n.y*H, n.s, n.s);
      if (Math.random() < 0.015) { n.x = Math.random(); n.y = Math.random(); }
    });

    // Red vignette pulse (emergency)
    const vig = ctx.createRadialGradient(W/2, H/2, H*0.25, W/2, H/2, H*0.85);
    const vigAlpha = 0.12 + Math.sin(t*0.08)*0.06;
    vig.addColorStop(0, 'transparent');
    vig.addColorStop(1, `rgba(200,0,0,${vigAlpha})`);
    ctx.fillStyle = vig; ctx.fillRect(0, 0, W, H);

    alertCamRAF = requestAnimationFrame(frame);
  }
  frame();
}

setTimeout(() => {
  document.getElementById('alert-modal').classList.add('show');
  startAlertCam();
}, 5000);

// ====================================================
// ECHARTS
// ====================================================
function initCharts() {
  const TOOLTIP_CFG = {
    backgroundColor:'rgba(3,14,42,0.92)',
    borderColor:'rgba(30,144,255,0.3)',
    textStyle:{ color:'#a8cce8', fontSize:28 }
  };

  // --- 环形图: 实验室总数分级 ---
  const dEl = document.getElementById('chart-donut');
  if (dEl) {
    const c = echarts.init(dEl, null, {renderer:'canvas', devicePixelRatio:2});
    c.setOption({
      backgroundColor:'transparent',
      tooltip:{ trigger:'item', formatter:'{b}: {c}间 ({d}%)', ...TOOLTIP_CFG },
      graphic:[{
        type:'text', left:'center', top:'40%',
        style:{ text:'128', fill:'#ffd740', font:'bold 80px Arial', textAlign:'center' }
      },{
        type:'text', left:'center', top:'58%',
        style:{ text:'实验室总数（间）', fill:'rgba(168,204,232,0.65)', font:'22px Arial', textAlign:'center' }
      }],
      series:[{
        type:'pie', radius:['42%','68%'], center:['50%','50%'], startAngle:100,
        itemStyle:{ borderRadius:6, borderColor:'rgba(3,14,31,0.6)', borderWidth:3 },
        label:{
          show:true,
          formatter: params => `{lvl|${params.name}}\n{cnt|${params.value}间}\n{pct|${params.percent}%}`,
          rich:{
            lvl:{ fontSize:24, fontWeight:700, color:'#ddf0ff', lineHeight:36 },
            cnt:{ fontSize:30, fontWeight:900, color:'#ffd740', lineHeight:42 },
            pct:{ fontSize:22, color:'rgba(168,204,232,0.6)', lineHeight:32 }
          },
          distanceToLabelLine:8
        },
        labelLine:{
          show:true, length:20, length2:25,
          lineStyle:{ color:'rgba(30,144,255,0.45)', width:2 }
        },
        data:[
          {value:12, name:'I级',   itemStyle:{color:'#cc0000', shadowBlur:12, shadowColor:'rgba(204,0,0,0.5)'}},
          {value:28, name:'II级',  itemStyle:{color:'#ff8000', shadowBlur:12, shadowColor:'rgba(255,128,0,0.5)'}},
          {value:45, name:'III级', itemStyle:{color:'#ffcc00', shadowBlur:12, shadowColor:'rgba(255,204,0,0.5)'}},
          {value:43, name:'IV级',  itemStyle:{color:'#0066cc', shadowBlur:12, shadowColor:'rgba(0,102,204,0.5)'}}
        ],
        emphasis:{
          scale:true, scaleSize:8,
          itemStyle:{ shadowBlur:30, shadowColor:'rgba(30,144,255,0.6)' },
          label:{ fontSize:28 }
        }
      }]
    });
  }

  // --- 堆叠柱状图: 安全分级统计 ---
  const stEl = document.getElementById('chart-stack');
  if (stEl) {
    const c = echarts.init(stEl, null, {renderer:'canvas', devicePixelRatio:2});
    const cols  = ['#cc0000','#ff8000','#ffcc00','#0066cc'];
    const lvls  = ['I级','II级','III级','IV级'];
    const units  = ['化学所','生物所','材料所','物理所','工程所','核能所','信息所','环境所','计量所','医学所'];
    const totals = [28,22,18,24,16,12,20,15,10,14];
    const dat    = [
      [2,3,5,4,2,1,3,2,1,2],
      [5,6,4,7,4,3,5,4,3,4],
      [9,8,6,8,5,5,7,5,4,5],
      [12,5,3,5,5,3,5,4,2,3]
    ];
    const xL = units.map((u,i) => `${u}\n(${totals[i]})`);
    c.setOption({
      backgroundColor:'transparent',
      tooltip:{ trigger:'axis', axisPointer:{type:'shadow'}, ...TOOLTIP_CFG },
      legend:{ data:lvls, top:0, right:0, textStyle:{color:'#a8cce8',fontSize:25}, icon:'rect', itemWidth:25, itemHeight:15 },
      grid:{ left:30, right:8, top:55, bottom:110, containLabel:true },
      xAxis:{ type:'category', data:xL, axisLabel:{color:'#5890b8',fontSize:22,interval:0,lineHeight:35}, axisLine:{lineStyle:{color:'rgba(30,144,255,0.2)'}}, axisTick:{show:false} },
      yAxis:{ type:'value', name:'间', nameTextStyle:{color:'#5890b8',fontSize:25}, axisLabel:{color:'#5890b8',fontSize:25}, axisLine:{show:false}, splitLine:{lineStyle:{color:'rgba(30,144,255,0.1)'}} },
      dataZoom:[{ type:'inside', startValue:0, endValue:5 }],
      series:lvls.map((n,i) => ({
        name:n, type:'bar', stack:'total', barMaxWidth:55,
        data:dat[i].map(v => ({value:v, itemStyle:{color:cols[i], opacity:0.88}})),
        emphasis:{ itemStyle:{opacity:1} }
      }))
    });
    let idx = 0;
    setInterval(() => {
      idx++;
      c.dispatchAction({ type:'dataZoom', startValue:idx, endValue:idx+5 });
      if (idx >= units.length-5) idx = -1;
    }, 5000);
  }

  // --- 折线图: 进入人数走势 ---
  const lnEl = document.getElementById('chart-line');
  if (lnEl) {
    const c = echarts.init(lnEl, null, {renderer:'canvas', devicePixelRatio:2});
    c.setOption({
      backgroundColor:'transparent',
      tooltip:{ trigger:'axis', ...TOOLTIP_CFG },
      legend:{ data:['进入人数','在场人数'], top:0, right:0, textStyle:{color:'#a8cce8',fontSize:25}, icon:'circle', itemWidth:20, itemHeight:20 },
      grid:{ left:28, right:8, top:45, bottom:50, containLabel:true },
      xAxis:{ type:'category', data:['00:00','03:00','06:00','09:00','12:00','15:00','18:00','21:00','24:00'], axisLabel:{color:'#5890b8',fontSize:22}, axisLine:{lineStyle:{color:'rgba(30,144,255,0.2)'}}, axisTick:{show:false} },
      yAxis:{ type:'value', axisLabel:{color:'#5890b8',fontSize:22}, axisLine:{show:false}, splitLine:{lineStyle:{color:'rgba(30,144,255,0.1)'}} },
      series:[
        { name:'进入人数', type:'line', data:[0,0,2,86,128,145,160,90,30], smooth:true, symbol:'circle', symbolSize:12, lineStyle:{color:'#1e90ff',width:5}, itemStyle:{color:'#1e90ff'}, areaStyle:{color:new echarts.graphic.LinearGradient(0,0,0,1,[{offset:0,color:'rgba(30,144,255,0.32)'},{offset:1,color:'rgba(30,144,255,0.02)'}])} },
        { name:'在场人数', type:'line', data:[0,0,2,62,98,108,120,72,20], smooth:true, symbol:'circle', symbolSize:12, lineStyle:{color:'#ffd740',width:5}, itemStyle:{color:'#ffd740'}, areaStyle:{color:new echarts.graphic.LinearGradient(0,0,0,1,[{offset:0,color:'rgba(255,215,64,0.22)'},{offset:1,color:'rgba(255,215,64,0.01)'}])} }
      ]
    });
  }

  // --- 仪表盘: 设备在线率 ---
  const ggEl = document.getElementById('chart-gauge');
  if (ggEl) {
    const c = echarts.init(ggEl, null, {renderer:'canvas', devicePixelRatio:2});
    c.setOption({
      backgroundColor:'transparent',
      series:[{
        type:'gauge', radius:'90%', center:['50%','60%'],
        startAngle:210, endAngle:-30, min:0, max:100, splitNumber:5,
        axisLine:{ lineStyle:{ width:30, color:[[0.3,'#ef4444'],[0.6,'#f59e0b'],[1,'#1e90ff']] } },
        axisTick:{show:false}, splitLine:{show:false}, axisLabel:{show:false},
        pointer:{ icon:'path://M12.8,0.7l12.3,0 M0,0 l9.2,12.4 M0,0 l2.2,-1.6', offsetCenter:[0,'-60%'], width:8, length:'60%', itemStyle:{color:'#1e90ff'} },
        detail:{ valueAnimation:true, formatter:'{value}%', color:'#ffd740', fontSize:45, fontWeight:700, offsetCenter:[0,'30%'] },
        title:{ show:true, offsetCenter:[0,'62%'], color:'rgba(110,165,210,0.6)', fontSize:25 },
        data:[{value:94.5, name:'在线率'}]
      }]
    });
  }

  // --- 环形图: 设备分类 (2区设备统计上部) ---
  const rgEl = document.getElementById('chart-ring');
  if (rgEl) {
    const c = echarts.init(rgEl, null, {renderer:'canvas', devicePixelRatio:2});
    const ringData = [
      {value:680, name:'检测设备', itemStyle:{color:'#1e90ff', shadowBlur:8, shadowColor:'rgba(30,144,255,0.5)'}},
      {value:520, name:'分析仪器', itemStyle:{color:'#4361ee', shadowBlur:8, shadowColor:'rgba(67,97,238,0.5)'}},
      {value:380, name:'制备设备', itemStyle:{color:'#00e676', shadowBlur:8, shadowColor:'rgba(0,230,118,0.5)'}},
      {value:280, name:'安全设备', itemStyle:{color:'#ffd740', shadowBlur:8, shadowColor:'rgba(255,215,64,0.5)'}},
      {value:240, name:'辅助设备', itemStyle:{color:'#00e5c8', shadowBlur:8, shadowColor:'rgba(0,229,200,0.5)'}},
      {value:358, name:'其他',     itemStyle:{color:'#f97316', shadowBlur:8, shadowColor:'rgba(249,115,22,0.5)'}}
    ];
    const total = ringData.reduce((s,d)=>s+d.value,0);
    const ringCountMap = Object.fromEntries(ringData.map(d=>[d.name,d.value]));
    c.setOption({
      backgroundColor:'transparent',
      tooltip:{ trigger:'item', formatter:'{b}: {c}台 ({d}%)', ...TOOLTIP_CFG },
      legend:{
        orient:'vertical', right:'1%', top:'middle',
        icon:'circle', itemWidth:24, itemHeight:24, itemGap:18,
        textStyle:{ color:'#a8cce8', fontSize:20 },
        formatter: name => {
          const v = ringCountMap[name];
          const pct = (v/total*100).toFixed(1);
          return `{nm|${name}}  {vl|${v}台}  {pt|${pct}%}`;
        },
        rich:{
          nm:{ fontSize:20, color:'#a8cce8', width:80 },
          vl:{ fontSize:23, fontWeight:700, color:'#fff', width:70 },
          pt:{ fontSize:20, color:'#ffd740', width:55 }
        }
      },
      series:[{
        type:'pie', radius:['38%','62%'], center:['32%','50%'],
        itemStyle:{ borderRadius:4, borderColor:'rgba(3,14,31,0.5)', borderWidth:2 },
        label:{ show:true, formatter:'{c}台', fontSize:20, color:'#a8cce8' },
        labelLine:{ length:10, length2:10, lineStyle:{color:'rgba(30,144,255,0.4)', width:2} },
        data: ringData,
        emphasis:{ scale:true, scaleSize:5, itemStyle:{ shadowBlur:20, shadowColor:'rgba(30,144,255,0.6)' } }
      }]
    });
  }

  // --- 饼图: 设备状态（正常/维修/报废） ---
  const psEl = document.getElementById('chart-pie-status');
  if (psEl) {
    const c = echarts.init(psEl, null, {renderer:'canvas', devicePixelRatio:2});
    const statusData = [
      {value:2180, name:'正常', itemStyle:{color:'#00e676', shadowBlur:10, shadowColor:'rgba(0,230,118,0.5)'}},
      {value:198,  name:'维修', itemStyle:{color:'#f59e0b', shadowBlur:10, shadowColor:'rgba(245,158,11,0.5)'}},
      {value:80,   name:'报废', itemStyle:{color:'#ef4444', shadowBlur:10, shadowColor:'rgba(239,68,68,0.5)'}}
    ];
    const smMap = Object.fromEntries(statusData.map(d=>[d.name,d.value]));
    c.setOption({
      backgroundColor:'transparent',
      tooltip:{ trigger:'item', formatter:'{b}: {c}台 ({d}%)', ...TOOLTIP_CFG },
      legend:{ show:false },
      series:[{
        type:'pie', radius:['35%','58%'], center:['50%','55%'],
        itemStyle:{ borderRadius:5, borderColor:'rgba(3,14,31,0.5)', borderWidth:2 },
        label:{ show:true, formatter:'{b}\n{c}台\n{d}%', fontSize:20, color:'#a8cce8', lineHeight:30 },
        labelLine:{ length:14, length2:10, lineStyle:{color:'rgba(30,144,255,0.4)', width:2} },
        data: statusData,
        emphasis:{ scale:true, scaleSize:5, itemStyle:{ shadowBlur:20, shadowColor:'rgba(30,144,255,0.6)' } }
      }]
    });
  }

  // --- 饼图: 使用状态（使用/空闲） ---
  const puEl = document.getElementById('chart-pie-usage');
  if (puEl) {
    const c = echarts.init(puEl, null, {renderer:'canvas', devicePixelRatio:2});
    const usageData = [
      {value:1534, name:'使用', itemStyle:{color:'#1e90ff', shadowBlur:14, shadowColor:'rgba(30,144,255,0.6)'}},
      {value:924,  name:'空闲', itemStyle:{color:'#00e5c8', shadowBlur:14, shadowColor:'rgba(0,229,200,0.5)'}}
    ];
    c.setOption({
      backgroundColor:'transparent',
      tooltip:{ trigger:'item', formatter:'{b}: {c}台 ({d}%)', ...TOOLTIP_CFG },
      legend:{ show:false },
      series:[{
        type:'pie', radius:['35%','60%'], center:['50%','55%'],
        itemStyle:{ borderRadius:6, borderColor:'rgba(3,14,31,0.5)', borderWidth:2 },
        label:{ show:true, formatter:'{b}\n{c}台\n{d}%', fontSize:22, color:'#a8cce8', lineHeight:32 },
        labelLine:{ length:16, length2:12, lineStyle:{color:'rgba(30,144,255,0.4)', width:2} },
        data: usageData,
        emphasis:{ scale:true, scaleSize:6, itemStyle:{ shadowBlur:24, shadowColor:'rgba(30,144,255,0.7)' } }
      }]
    });
  }
}
initCharts();

// ====================================================
// MONITOR TREE
// ====================================================
function buildTree() {
  const el = document.getElementById('building-tree'); if (!el) return;
  const data = {label:'安科院主园区', children:[
    {label:'综合实验楼A', children:[
      {label:'1层', children:[{label:'A101 化学实验室'},{label:'A102 分析室'}]},
      {label:'2层', children:[{label:'A201 生物实验室'}]},
      {label:'3层', children:[{label:'A301 有机合成室'},{label:'A302 核磁共振室'},{label:'A303 质谱室'}]},
      {label:'4层', children:[{label:'A401 X射线室'}]}
    ]},
    {label:'物理实验楼B', children:[
      {label:'1层', children:[{label:'B101 光学实验室'}]},
      {label:'2层', children:[{label:'B201 低温实验室'}]}
    ]},
    {label:'工程技术楼C', children:[
      {label:'1层', children:[{label:'C101 机械加工室'}]},
      {label:'2层', children:[{label:'C201 材料测试室'}]}
    ]}
  ]};
  el.innerHTML = renderT(data, 0);
  el.addEventListener('click', e => {
    const l = e.target.closest('.tree-node-label'); if (!l) return;
    l.classList.toggle('selected');
    const ch = l.parentElement.querySelector('.tree-children');
    const ar = l.querySelector('.arrow');
    if (ch) ch.classList.toggle('open');
    if (ar) ar.classList.toggle('open');
  });
}
function renderT(node, depth) {
  const isLeaf = !node.children || !node.children.length;
  const icon = ['🏢','🏗️','📐','🔬'][Math.min(depth,3)];
  let h = `<div class="tree-node"><div class="tree-node-label" style="padding-left:${depth*12+8}px">
    <span class="arrow ${depth===0?'open':''}">${isLeaf ? '&nbsp;&nbsp;' : '▶'}</span>
    <span>${icon}</span><span>${node.label}</span></div>`;
  if (!isLeaf) {
    h += `<div class="tree-children ${depth===0?'open':''}">`;
    node.children.forEach(c => h += renderT(c, depth+1));
    h += '</div>';
  }
  return h + '</div>';
}

// ====================================================
// CAMERAS
// ====================================================
const CAMS = ['A301 有机合成室','A302 核磁共振室','A303 质谱室','A301 走廊','A302 走廊','A303 走廊','A层公共区域','A层安全通道','A层出入口'];
function buildCameras() {
  const g = document.getElementById('camera-grid'); if (!g) return;
  g.innerHTML = '';
  for (let i = 0; i < 9; i++) {
    const cell = document.createElement('div');
    cell.className = 'camera-cell' + (i===0 ? ' ai-cam' : '');
    const cv = document.createElement('canvas');
    cv.style.cssText = 'width:100%;height:100%;display:block';
    cell.appendChild(cv);
    cell.innerHTML += `<div class="camera-overlay"></div><div class="camera-label">${CAMS[i]}</div><div class="camera-rec">REC</div>${i===0?'<div class="camera-ai-badge">🤖 AI检测</div>':''}`;
    if (i===0) {
      const box = document.createElement('div');
      box.className = 'ai-detection-box';
      box.style.cssText = 'left:28%;top:18%;width:22%;height:38%';
      box.innerHTML = '<div class="ai-detection-label">危险行为: 未佩戴防护</div>';
      cell.appendChild(box);
    }
    g.appendChild(cell);
    setTimeout(() => drawFakeCam(cv, i), 150);
  }
}
function drawFakeCam(canvas, idx) {
  const ctx = canvas.getContext('2d');
  const par = canvas.parentElement;
  let pw, ph;
  function sz() { pw = canvas.width = par.offsetWidth; ph = canvas.height = par.offsetHeight; }
  sz(); window.addEventListener('resize', sz);
  let t = Math.random() * 1000;
  const noise = Array.from({length:200}, () => ({x:Math.random(),y:Math.random(),s:Math.random()*3,a:Math.random()*0.3}));
  function frame() {
    t += 0.5; if (!pw || !ph) sz();
    ctx.clearRect(0,0,pw,ph);
    const bg = ctx.createLinearGradient(0,0,0,ph);
    bg.addColorStop(0,'hsl(210,42%,5%)'); bg.addColorStop(1,'hsl(220,30%,3%)');
    ctx.fillStyle = bg; ctx.fillRect(0,0,pw,ph);
    ctx.strokeStyle = 'rgba(20,70,150,0.06)'; ctx.lineWidth = 0.5;
    const vp = {x:pw/2, y:ph*0.45};
    for (let gx=0;gx<=10;gx++) { const fx=pw*gx/10; ctx.beginPath();ctx.moveTo(fx,ph);ctx.lineTo(vp.x+(fx-pw/2)*0.3,vp.y);ctx.stroke(); }
    for (let gy=0;gy<=5;gy++) { const fy=ph*0.45+(ph*0.55)*(gy/5); const wd=pw*(0.3+0.7*(gy/5)); ctx.beginPath();ctx.moveTo((pw-wd)/2,fy);ctx.lineTo((pw+wd)/2,fy);ctx.stroke(); }
    ctx.fillStyle='rgba(0,35,90,0.4)'; ctx.fillRect(pw*0.1,ph*0.55,pw*0.35,ph*0.1); ctx.fillRect(pw*0.55,ph*0.55,pw*0.35,ph*0.1);
    ctx.fillStyle='rgba(0,18,55,0.5)'; ctx.fillRect(pw*0.12,ph*0.4,pw*0.08,ph*0.15); ctx.fillRect(pw*0.58,ph*0.38,pw*0.1,ph*0.17);
    const np = [2,1,3,1,2,1,0,1,2][idx]||1;
    for (let p=0;p<np;p++) {
      const px=pw*(0.3+p*0.15+Math.sin(t*0.01+p)*0.02);
      const py=ph*(0.6+Math.cos(t*0.008+p)*0.02);
      ctx.fillStyle='rgba(120,170,255,0.65)'; ctx.beginPath(); ctx.arc(px,py,pw*0.025,0,Math.PI*2); ctx.fill();
      ctx.fillStyle='rgba(70,130,220,0.4)'; ctx.fillRect(px-pw*0.02,py+pw*0.025,pw*0.04,ph*0.08);
    }
    const sl = (t*0.5) % ph; ctx.fillStyle='rgba(30,144,255,0.04)'; ctx.fillRect(0,sl,pw,2);
    noise.forEach(n => {
      ctx.fillStyle=`rgba(170,205,255,${n.a*0.5})`; ctx.fillRect(n.x*pw,n.y*ph,n.s,n.s);
      if (Math.random()<0.02) { n.x=Math.random(); n.y=Math.random(); }
    });
    requestAnimationFrame(frame);
  }
  frame();
}

// ====================================================
// RESIZE CHARTS
// ====================================================
window.addEventListener('resize', () => {
  ['chart-donut','chart-stack','chart-line','chart-gauge','chart-ring','chart-pie-status','chart-pie-usage','chart-chem-inventory'].forEach(id => {
    const el = document.getElementById(id);
    if (el) { const c = echarts.getInstanceByDom(el); if (c) c.resize(); }
  });
});
</script>
</body>
</html>