ddddzx
/
vent_ai_platform


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695169616971698169917001701170217031704170517061707170817091710171117121713171417151716171717181719172017211722172317241725172617271728172917301731173217331734173517361737173817391740174117421743174417451746174717481749175017511752175317541755175617571758175917601761176217631764176517661767176817691770177117721773177417751776177717781779178017811782178317841785178617871788178917901791179217931794179517961797179817991800180118021803180418051806180718081809181018111812181318141815181618171818181918201821182218231824182518261827182818291830183118321833183418351836183718381839184018411842184318441845184618471848184918501851
							<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="theme-color" content="#0d1b2a" />
    <title>矿安通防智能管控平台</title>
    <link rel="icon" href="./favicon.svg" type="image/svg+xml" />
    <link rel="stylesheet" href="./styles.css?v=20261013-hazard-agents2" />
    <script src="./api.js?v=20261013-hazard-agents2" defer></script>
    <script src="./app.js?v=20261013-hazard-agents2" defer></script>
  </head>
  <body class="api-loading">
    <div class="app-shell">
      <aside class="sidebar" id="sidebar">
        <div class="brand">
          <div class="brand-mark" aria-hidden="true">
            <span data-icon="wind"></span>
          </div>
          <div class="brand-copy">
            <strong>矿安通防</strong>
            <span>智能管控平台</span>
          </div>
          <button class="icon-button sidebar-close" id="sidebarClose" type="button" aria-label="关闭导航">
            <span data-icon="x"></span>
          </button>
        </div>

        <div class="mine-switcher" id="mineSwitcher">
          <div class="mine-switcher-button static">
            <span class="mine-icon" data-icon="mountain"></span>
            <span class="mine-copy">
              <small>当前矿井</small>
              <strong id="currentMine">上湾煤矿</strong>
            </span>
          </div>
        </div>

        <nav class="main-nav" aria-label="主导航">
          <p class="nav-label">业务工作台</p>
          <button class="nav-item active" type="button" data-view="dashboard">
            <span data-icon="layout-dashboard"></span>
            <span class="nav-text">综合驾驶舱</span>
            <span class="nav-dot danger"></span>
          </button>
          <button class="nav-item" type="button" data-view="data">
            <span data-icon="database"></span>
            <span class="nav-text">数据感知</span>
            <span class="nav-badge">2,486</span>
          </button>
          <button class="nav-item" type="button" data-view="knowledge">
            <span data-icon="book-open"></span>
            <span class="nav-text">知识中心</span>
            <span class="nav-badge">2,164</span>
          </button>
          <button class="nav-item" type="button" data-view="diagnosis">
            <span data-icon="scan-search"></span>
            <span class="nav-text">隐患识别</span>
            <span class="nav-badge alert">18</span>
          </button>
          <button class="nav-item" type="button" data-view="evaluation">
            <span data-icon="chart-no-axes-combined"></span>
            <span class="nav-text">综合评价</span>
          </button>
          <button class="nav-item" type="button" data-view="closed-loop">
            <span data-icon="workflow"></span>
            <span class="nav-text">闭环处置</span>
            <span class="nav-badge">7</span>
          </button>

          <p class="nav-label nav-label-secondary">平台管理</p>
          <button class="nav-item" type="button" data-view="settings">
            <span data-icon="settings"></span>
            <span class="nav-text">系统配置</span>
          </button>
        </nav>

        <div class="sidebar-status">
          <div class="status-head">
            <span class="live-dot"></span>
            <span>系统运行正常</span>
            <strong>99.98%</strong>
          </div>
          <div class="status-track"><span style="width: 96%"></span></div>
          <p>最近同步：刚刚</p>
        </div>
      </aside>

      <div class="sidebar-scrim" id="sidebarScrim"></div>

      <main class="workspace">
        <header class="topbar">
          <div class="topbar-title">
            <button class="icon-button mobile-menu" id="mobileMenu" type="button" aria-label="打开导航">
              <span data-icon="menu"></span>
            </button>
            <div>
              <div class="title-line">
                <h1 id="pageTitle">综合驾驶舱</h1>
                <span class="status-pill"><span class="live-dot"></span>实时运行</span>
              </div>
              <p id="pageSubtitle">汇聚通防业务数据，洞察矿井通风系统运行态势</p>
            </div>
          </div>

          <div class="topbar-actions">
            <label class="global-search">
              <span data-icon="search"></span>
              <input id="globalSearch" type="search" placeholder="搜索设备、风路、知识或告警" />
              <kbd>⌘ K</kbd>
            </label>
            <button class="icon-button notification-button" id="notificationButton" type="button" aria-label="通知">
              <span data-icon="bell"></span>
              <i></i>
            </button>
            <button class="user-menu" type="button">
              <span class="avatar">李</span>
              <span class="user-copy">
                <strong>李矿长</strong>
                <small>通防业务负责人</small>
              </span>
              <span data-icon="chevron-down"></span>
            </button>
          </div>

          <div class="notification-popover" id="notificationPopover">
            <div class="popover-head">
              <strong>消息通知</strong>
              <button type="button" id="markRead">全部已读</button>
            </div>
            <div class="notification-item unread">
              <span class="notice-icon danger" data-icon="triangle-alert"></span>
              <div>
                <strong>N1202 回风巷瓦斯浓度短时超限</strong>
                <p>建议核查局部通风机运行状态，2 分钟前</p>
              </div>
            </div>
            <div class="notification-item">
              <span class="notice-icon warning" data-icon="wind"></span>
              <div>
                <strong>2# 风门状态异常已恢复</strong>
                <p>系统已自动复核并归档，18 分钟前</p>
              </div>
            </div>
          </div>
        </header>

        <div class="app-loading" id="appLoading" role="status" aria-live="polite">
          <div class="app-loading-content">
            <span class="loading-spinner" aria-hidden="true"></span>
            <strong>正在加载业务数据</strong>
          </div>
        </div>

        <div class="content-area">
          <section class="view active" id="view-dashboard" data-title="综合驾驶舱" data-subtitle="汇聚通防业务数据，洞察矿井通风系统运行态势">
            <div class="context-bar">
              <div class="context-message">
                <span class="context-icon" data-icon="shield-check"></span>
                <div>
                  <strong>系统运行总体平稳</strong>
                  <p>当前识别 3 项高优先级风险，均已进入处置流程。</p>
                </div>
              </div>
              <div class="segmented-control" data-range-control>
                <button type="button" data-range="今日">今日</button>
                <button class="active" type="button" data-range="近7天">近7天</button>
                <button type="button" data-range="近30天">近30天</button>
              </div>
            </div>

            <div class="kpi-grid">
              <article class="kpi-card">
                <div class="kpi-head">
                  <span class="kpi-icon teal" data-icon="database"></span>
                  <span class="trend up"><span data-icon="arrow-up-right"></span> 3.2%</span>
                </div>
                <p>实时数据点</p>
                <strong><span class="metric-value" data-metric="points">2,486</span><small>点</small></strong>
                <div class="kpi-foot">
                  <span>在线率 97.2%</span>
                  <span class="mini-bars" aria-hidden="true"><i></i><i></i><i></i><i></i><i></i></span>
                </div>
              </article>

              <article class="kpi-card">
                <div class="kpi-head">
                  <span class="kpi-icon red" data-icon="triangle-alert"></span>
                  <span class="trend down">较昨日 -4</span>
                </div>
                <p>今日告警</p>
                <strong><span class="metric-value" data-metric="alerts">18</span><small>条</small></strong>
                <div class="kpi-foot">
                  <span><b class="text-danger">3</b> 条高优先级</span>
                  <span>闭环率 83%</span>
                </div>
              </article>

              <article class="kpi-card">
                <div class="kpi-head">
                  <span class="kpi-icon amber" data-icon="scan-search"></span>
                  <span class="trend up"><span data-icon="arrow-up-right"></span> 2.4%</span>
                </div>
                <p>诊断准确率</p>
                <strong><span class="metric-value" data-metric="accuracy">87.6</span><small>%</small></strong>
                <div class="kpi-foot">
                  <span>五类场景平均</span>
                  <span>样本 5,820</span>
                </div>
              </article>

              <article class="kpi-card">
                <div class="kpi-head">
                  <span class="kpi-icon green" data-icon="award"></span>
                  <span class="trend neutral">稳定</span>
                </div>
                <p>综合安全等级</p>
                <strong><span class="metric-value" data-metric="grade">A</span><small>级</small></strong>
                <div class="kpi-foot">
                  <span>综合得分 <b class="text-success">92.8</b></span>
                  <span>较上期 +1.6</span>
                </div>
              </article>
            </div>

            <div class="dashboard-grid">
              <article class="panel ventilation-panel">
                <div class="panel-head">
                  <div>
                    <span class="eyebrow">通风网络</span>
                    <h2>矿井通风系统实时态势</h2>
                  </div>
                  <div class="panel-actions">
                    <div class="map-legend">
                      <span><i class="legend-dot normal"></i>正常</span>
                      <span><i class="legend-dot warning"></i>预警</span>
                      <span><i class="legend-dot danger"></i>异常</span>
                    </div>
                    <button class="icon-button small" type="button" aria-label="刷新通风网络" data-refresh>
                      <span data-icon="refresh-cw"></span>
                    </button>
                  </div>
                </div>

                <div class="mine-map" id="mineMap">
                  <div class="map-toolbar">
                    <span><span class="live-dot"></span>数据更新于 10:42:16</span>
                    <button type="button" data-map-layer="airflow"><span data-icon="wind"></span>风流</button>
                    <button class="active" type="button" data-map-layer="sensors"><span data-icon="radio-tower"></span>测点</button>
                    <button type="button" data-map-layer="facilities"><span data-icon="settings-2"></span>设施</button>
                  </div>

                  <svg class="ventilation-map" viewBox="0 0 900 470" role="img" aria-label="矿井通风网络拓扑图">
                    <defs>
                      <pattern id="mapGrid" width="32" height="32" patternUnits="userSpaceOnUse">
                        <path d="M 32 0 L 0 0 0 32" fill="none" stroke="rgba(116, 151, 174, .12)" stroke-width="1" />
                      </pattern>
                      <filter id="softGlow">
                        <feGaussianBlur stdDeviation="4" result="blur" />
                        <feMerge>
                          <feMergeNode in="blur" />
                          <feMergeNode in="SourceGraphic" />
                        </feMerge>
                      </filter>
                      <marker id="airArrow" markerWidth="8" markerHeight="8" refX="5" refY="3" orient="auto">
                        <path d="M0,0 L0,6 L6,3 z" fill="#38bdf8" />
                      </marker>
                    </defs>
                    <rect width="900" height="470" fill="url(#mapGrid)" />
                    <g class="surface-labels">
                      <text x="42" y="48">副井</text>
                      <text x="814" y="48">回风井</text>
                      <text x="420" y="42">北翼采区</text>
                      <text x="424" y="438">南翼采区</text>
                    </g>
                    <g class="tunnel tertiary">
                      <path d="M88 96 L246 96 L246 182 L452 182" />
                      <path d="M88 376 L270 376 L270 300 L452 300" />
                      <path d="M452 182 L664 182 L664 102 L808 102" />
                      <path d="M452 300 L676 300 L676 378 L808 378" />
                      <path d="M246 182 L246 300" />
                      <path d="M664 182 L664 300" />
                    </g>
                    <g class="tunnel primary">
                      <path d="M108 238 L788 238" />
                      <path d="M246 96 L452 182 L788 238" />
                      <path d="M270 376 L452 300 L788 238" />
                    </g>
                    <g class="air-flow" filter="url(#softGlow)">
                      <path d="M108 238 L788 238" />
                      <path d="M246 96 L452 182" />
                      <path d="M270 376 L452 300" />
                    </g>

                    <g class="map-node normal" data-node="main-fan" tabindex="0" transform="translate(78 238)">
                      <circle class="node-pulse" r="20" />
                      <circle class="node-ring" r="14" />
                      <path class="node-symbol" d="M-5,-6 L5,-6 L5,6 L-5,6 Z M-5,-2 L5,2 M-5,2 L5,-2" />
                      <text x="-8" y="35">主通风机</text>
                    </g>

                    <g class="map-node normal" data-node="intake" tabindex="0" transform="translate(246 96)">
                      <circle class="node-pulse" r="15" />
                      <circle class="node-ring" r="10" />
                      <circle class="node-symbol" r="3" />
                      <text x="-16" y="29">进风井</text>
                    </g>

                    <g class="map-node warning" data-node="air-gate" tabindex="0" transform="translate(452 182)">
                      <circle class="node-pulse" r="17" />
                      <circle class="node-ring" r="12" />
                      <path class="node-symbol" d="M-5,-5 L5,5 M5,-5 L-5,5" />
                      <text x="-21" y="32">2#调节风门</text>
                    </g>

                    <g class="map-node danger" data-node="gas" tabindex="0" transform="translate(664 182)">
                      <circle class="node-pulse" r="18" />
                      <circle class="node-ring" r="13" />
                      <path class="node-symbol" d="M0,-6 L6,5 L-6,5 Z M0,-2 L0,2" />
                      <text x="-25" y="33">N1202瓦斯</text>
                    </g>

                    <g class="map-node normal" data-node="north-face" tabindex="0" transform="translate(788 102)">
                      <circle class="node-pulse" r="14" />
                      <circle class="node-ring" r="9" />
                      <circle class="node-symbol" r="3" />
                      <text x="-29" y="28">N1201工作面</text>
                    </g>

                    <g class="map-node normal" data-node="air-volume" tabindex="0" transform="translate(452 300)">
                      <circle class="node-pulse" r="15" />
                      <circle class="node-ring" r="10" />
                      <path class="node-symbol" d="M-6,0 L6,0 M0,-6 L0,6" />
                      <text x="-27" y="31">S1301测风站</text>
                    </g>

                    <g class="map-node warning" data-node="dust" tabindex="0" transform="translate(676 378)">
                      <circle class="node-pulse" r="17" />
                      <circle class="node-ring" r="12" />
                      <path class="node-symbol" d="M-6,-2 C-3,-6 3,-6 6,-2 C4,5 -4,5 -6,-2 Z" />
                      <text x="-25" y="33">S1302粉尘</text>
                    </g>

                    <g class="map-node normal" data-node="return" tabindex="0" transform="translate(808 378)">
                      <circle class="node-pulse" r="14" />
                      <circle class="node-ring" r="9" />
                      <circle class="node-symbol" r="3" />
                      <text x="-29" y="28">回风井底</text>
                    </g>
                  </svg>

                  <div class="map-detail" id="mapDetail">
                    <div class="map-detail-head">
                      <span class="detail-status danger"></span>
                      <strong>N1202 瓦斯监测点</strong>
                      <button type="button" aria-label="关闭节点详情" id="closeMapDetail"><span data-icon="x"></span></button>
                    </div>
                    <div class="map-detail-values">
                      <div><span>瓦斯浓度</span><strong>0.86%</strong></div>
                      <div><span>阈值</span><strong>0.80%</strong></div>
                      <div><span>趋势</span><strong class="text-danger">上升</strong></div>
                    </div>
                    <p>已关联局部通风机 T-17 与 2# 调节风门，正在执行耦合诊断。</p>
                    <button class="text-button" type="button" data-jump-view="diagnosis">查看诊断详情 <span data-icon="arrow-right"></span></button>
                  </div>
                </div>
              </article>

              <article class="panel evaluation-panel">
                <div class="panel-head">
                  <div>
                    <span class="eyebrow">综合评价</span>
                    <h2>通防业务健康度</h2>
                  </div>
                  <button class="text-button" type="button" data-jump-view="evaluation">查看报告</button>
                </div>
                <div class="score-overview">
                  <div class="score-ring" style="--score: 92.8">
                    <div>
                      <strong>92.8</strong>
                      <span>综合得分</span>
                    </div>
                  </div>
                  <div class="grade-copy">
                    <span class="grade-badge">A 级</span>
                    <strong>运行状态优良</strong>
                    <p>安全性与可靠性表现稳定，风量分配均衡度有提升空间。</p>
                  </div>
                </div>
                <div class="score-list">
                  <div class="score-row">
                    <span>安全性</span><div><i style="width: 96%"></i></div><strong>96.2</strong>
                  </div>
                  <div class="score-row">
                    <span>可靠性</span><div><i style="width: 91%"></i></div><strong>91.4</strong>
                  </div>
                  <div class="score-row">
                    <span>经济性</span><div><i style="width: 84%"></i></div><strong>84.7</strong>
                  </div>
                  <div class="score-row">
                    <span>管理合规</span><div><i style="width: 94%"></i></div><strong>94.1</strong>
                  </div>
                  <div class="score-row">
                    <span>数据质量</span><div><i style="width: 89%"></i></div><strong>89.6</strong>
                  </div>
                </div>
              </article>

              <article class="panel sensor-panel">
                <div class="panel-head">
                  <div>
                    <span class="eyebrow">实时感知</span>
                    <h2>关键参数监测</h2>
                  </div>
                  <span class="subtle-badge"><span class="live-dot"></span>秒级刷新</span>
                </div>
                <div class="sensor-grid">
                  <div class="sensor-metric">
                    <div class="sensor-label"><span class="sensor-icon gas" data-icon="flame"></span><span>瓦斯浓度</span></div>
                    <div class="sensor-value"><strong>0.86</strong><small>%CH₄</small><span class="trend down">+0.12</span></div>
                    <svg class="sparkline danger-line" viewBox="0 0 180 42" preserveAspectRatio="none">
                      <path class="spark-area" d="M0,34 L0,30 L20,29 L40,31 L60,22 L80,24 L100,17 L120,19 L140,12 L160,15 L180,6 L180,42 L0,42 Z" />
                      <path d="M0,30 L20,29 L40,31 L60,22 L80,24 L100,17 L120,19 L140,12 L160,15 L180,6" />
                    </svg>
                  </div>
                  <div class="sensor-metric">
                    <div class="sensor-label"><span class="sensor-icon blue" data-icon="wind"></span><span>工作面风量</span></div>
                    <div class="sensor-value"><strong>1,286</strong><small>m³/min</small><span class="trend up">稳定</span></div>
                    <svg class="sparkline blue-line" viewBox="0 0 180 42" preserveAspectRatio="none">
                      <path class="spark-area" d="M0,24 L0,15 L20,17 L40,14 L60,18 L80,16 L100,15 L120,18 L140,16 L160,17 L180,15 L180,42 L0,42 Z" />
                      <path d="M0,15 L20,17 L40,14 L60,18 L80,16 L100,15 L120,18 L140,16 L160,17 L180,15" />
                    </svg>
                  </div>
                  <div class="sensor-metric">
                    <div class="sensor-label"><span class="sensor-icon amber" data-icon="cloud-dust"></span><span>粉尘浓度</span></div>
                    <div class="sensor-value"><strong>4.2</strong><small>mg/m³</small><span class="trend neutral">正常</span></div>
                    <svg class="sparkline amber-line" viewBox="0 0 180 42" preserveAspectRatio="none">
                      <path class="spark-area" d="M0,31 L0,25 L20,27 L40,23 L60,26 L80,21 L100,24 L120,19 L140,22 L160,18 L180,20 L180,42 L0,42 Z" />
                      <path d="M0,25 L20,27 L40,23 L60,26 L80,21 L100,24 L120,19 L140,22 L160,18 L180,20" />
                    </svg>
                  </div>
                </div>
              </article>

              <article class="panel diagnosis-panel">
                <div class="panel-head">
                  <div>
                    <span class="eyebrow">智能诊断</span>
                    <h2>五类场景缺陷判识</h2>
                  </div>
                  <div class="panel-actions">
                    <span class="subtle-badge">模型库 v2.6.1</span>
                    <button class="text-button" type="button" data-jump-view="diagnosis">进入隐患识别中心 <span data-icon="arrow-right"></span></button>
                  </div>
                </div>
                <div class="diagnosis-cards">
                  <button class="diagnosis-card danger" type="button" data-jump-view="diagnosis">
                    <span class="diagnosis-icon" data-icon="wind"></span>
                    <span class="diagnosis-main"><strong>局部通风</strong><small>检测到 2 项异常</small></span>
                    <span class="diagnosis-score">91.2%</span>
                    <span class="diagnosis-trend danger">高风险</span>
                  </button>
                  <button class="diagnosis-card warning" type="button" data-jump-view="diagnosis">
                    <span class="diagnosis-icon" data-icon="door-open"></span>
                    <span class="diagnosis-main"><strong>通风设施</strong><small>风门状态不一致</small></span>
                    <span class="diagnosis-score">88.7%</span>
                    <span class="diagnosis-trend warning">需核查</span>
                  </button>
                  <button class="diagnosis-card normal" type="button" data-jump-view="diagnosis">
                    <span class="diagnosis-icon" data-icon="network"></span>
                    <span class="diagnosis-main"><strong>通风系统管理</strong><small>系统运行稳定</small></span>
                    <span class="diagnosis-score">86.5%</span>
                    <span class="diagnosis-trend normal">正常</span>
                  </button>
                  <button class="diagnosis-card warning" type="button" data-jump-view="diagnosis">
                    <span class="diagnosis-icon" data-icon="gauge"></span>
                    <span class="diagnosis-main"><strong>风量分配</strong><small>1 个用风点偏小</small></span>
                    <span class="diagnosis-score">89.3%</span>
                    <span class="diagnosis-trend warning">需关注</span>
                  </button>
                  <button class="diagnosis-card danger" type="button" data-jump-view="diagnosis">
                    <span class="diagnosis-icon" data-icon="shield-alert"></span>
                    <span class="diagnosis-main"><strong>灾害防治</strong><small>瓦斯浓度越限</small></span>
                    <span class="diagnosis-score">92.6%</span>
                    <span class="diagnosis-trend danger">高风险</span>
                  </button>
                </div>
              </article>

              <article class="panel knowledge-panel">
                <div class="panel-head">
                  <div>
                    <span class="eyebrow">知识中心</span>
                    <h2>通防知识智能问答</h2>
                  </div>
                  <span class="knowledge-count">2,164 条知识</span>
                </div>
                <form class="knowledge-search" id="dashboardKnowledgeForm">
                  <span data-icon="sparkles"></span>
                  <textarea name="question" rows="1" data-max-height="74" placeholder="询问规程、案例或处置建议..."></textarea>
                  <button type="submit" aria-label="发送问题"><span data-icon="arrow-up"></span></button>
                </form>
                <div class="prompt-chips">
                  <button type="button" data-question="瓦斯超限如何处置？">瓦斯超限如何处置？</button>
                  <button type="button" data-question="局部通风机循环风判定标准">循环风判定标准</button>
                  <button type="button" data-question="风门漏风有哪些排查要点？">风门漏风排查</button>
                </div>
                <div class="answer-preview" id="answerPreview">
                  <div class="answer-head"><span data-icon="bot"></span><strong>通防知识助手</strong><span>基于 3 条依据回答</span></div>
                  <p>瓦斯浓度超限后，应立即停止作业、切断电源、撤出人员，并核查局部通风机与风筒状态。处置完成后，需复测并形成闭环记录。</p>
                  <div class="answer-sources">
                    <span>《煤矿安全规程》第 173 条</span>
                    <span>瓦斯超限处置案例 2024-018</span>
                  </div>
                </div>
              </article>

              <article class="panel tasks-panel">
                <div class="panel-head">
                  <div>
                    <span class="eyebrow">整改闭环</span>
                    <h2>待处置任务</h2>
                  </div>
                  <button class="text-button" type="button" data-jump-view="closed-loop">全部任务 <span data-icon="arrow-right"></span></button>
                </div>
                <div class="task-list">
                  <button class="task-row" type="button" data-jump-view="closed-loop">
                    <span class="task-priority high">高</span>
                    <span class="task-main"><strong>N1202 回风巷瓦斯超限处置</strong><small>责任人：王强 · 剩余 01:26:18</small></span>
                    <span class="task-state processing">处理中</span>
                    <span data-icon="chevron-right"></span>
                  </button>
                  <button class="task-row" type="button" data-jump-view="closed-loop">
                    <span class="task-priority medium">中</span>
                    <span class="task-main"><strong>2# 调节风门状态复核</strong><small>责任人：赵磊 · 剩余 03:42:00</small></span>
                    <span class="task-state pending">待确认</span>
                    <span data-icon="chevron-right"></span>
                  </button>
                  <button class="task-row" type="button" data-jump-view="closed-loop">
                    <span class="task-priority medium">中</span>
                    <span class="task-main"><strong>S1301 工作面风量复测</strong><small>责任人：刘伟 · 剩余 05:10:00</small></span>
                    <span class="task-state processing">处理中</span>
                    <span data-icon="chevron-right"></span>
                  </button>
                  <button class="task-row" type="button" data-jump-view="closed-loop">
                    <span class="task-priority low">低</span>
                    <span class="task-main"><strong>月度通防资料完整性检查</strong><small>责任人：陈晨 · 剩余 1 天</small></span>
                    <span class="task-state pending">待确认</span>
                    <span data-icon="chevron-right"></span>
                  </button>
                </div>
              </article>
            </div>
          </section>

          <section class="view" id="view-data" data-title="数据感知" data-subtitle="统一接入业务资料、监测数据、视频监控与通防设施工况">
            <div class="view-toolbar">
              <div class="toolbar-copy">
                <span class="toolbar-icon" data-icon="database"></span>
                <div><strong>数据接入总览</strong><p>当前接入 12 类数据源，数据完整率 98.4%</p></div>
              </div>
              <div class="toolbar-actions">
                <button class="secondary-button" type="button" data-open-upload><span data-icon="upload"></span>导入资料</button>
                <button class="primary-button" type="button" data-toast="数据源配置面板已打开"><span data-icon="plus"></span>新增数据源</button>
              </div>
            </div>

            <div class="source-grid">
              <article class="source-card">
                <div class="source-head"><span class="source-icon teal" data-icon="database"></span><span class="source-status online">实时</span></div>
                <strong>安全监控系统</strong>
                <p>瓦斯、风速、温度、CO 等监测点</p>
                <div class="source-foot"><span>1,286 点</span><span>延迟 2.4s</span></div>
              </article>
              <article class="source-card">
                <div class="source-head"><span class="source-icon blue" data-icon="video"></span><span class="source-status online">在线</span></div>
                <strong>工业视频监控</strong>
                <p>覆盖风门、局部通风、采掘工作面</p>
                <div class="source-foot"><span>218 路</span><span>识别 12 类</span></div>
              </article>
              <article class="source-card">
                <div class="source-head"><span class="source-icon amber" data-icon="settings-2"></span><span class="source-status online">在线</span></div>
                <strong>通防设施工况</strong>
                <p>风门、风窗、密闭、局部通风机</p>
                <div class="source-foot"><span>486 台</span><span>在线率 96.8%</span></div>
              </article>
              <button class="source-card source-card-button" type="button" data-open-business aria-label="打开业务资料页面">
                <div class="source-head"><span class="source-icon purple" data-icon="file-text"></span><span class="source-status sync">同步中</span></div>
                <strong>业务资料</strong>
                <p>规程、措施、报表、台账与验收资料</p>
                <div class="source-foot"><span>7,280 份</span><span>抽取 12,406 字段</span></div>
              </button>
            </div>

            <div class="two-column-grid">
              <article class="panel">
                <div class="panel-head">
                  <div><span class="eyebrow">数据质量</span><h2>数据治理监控</h2></div>
                  <span class="subtle-badge success"><span class="live-dot"></span>质量达标</span>
                </div>
                <div class="quality-list">
                  <div class="quality-row">
                    <span><i class="quality-dot teal"></i>完整性</span>
                    <div class="quality-track"><i style="width: 98.4%"></i></div>
                    <strong>98.4%</strong>
                  </div>
                  <div class="quality-row">
                    <span><i class="quality-dot blue"></i>及时性</span>
                    <div class="quality-track"><i style="width: 96.7%"></i></div>
                    <strong>96.7%</strong>
                  </div>
                  <div class="quality-row">
                    <span><i class="quality-dot amber"></i>一致性</span>
                    <div class="quality-track"><i style="width: 94.2%"></i></div>
                    <strong>94.2%</strong>
                  </div>
                  <div class="quality-row">
                    <span><i class="quality-dot purple"></i>有效性</span>
                    <div class="quality-track"><i style="width: 97.1%"></i></div>
                    <strong>97.1%</strong>
                  </div>
                </div>
                <div class="quality-alert">
                  <span data-icon="circle-alert"></span>
                  <div><strong>发现 16 条待处理数据问题</strong><p>主要集中在风量报表字段缺失，已生成治理任务。</p></div>
                  <button class="text-button" type="button">查看</button>
                </div>
              </article>

              <article class="panel">
                <div class="panel-head">
                  <div><span class="eyebrow">智能抽取</span><h2>业务资料处理任务</h2></div>
                  <button class="text-button" type="button" data-open-processing-records>处理记录 <span data-icon="arrow-right"></span></button>
                </div>
                <div class="extraction-list" id="documentProcessingTaskList">
                  <div class="business-document-note">
                    <span data-icon="refresh-cw"></span>
                    <p>正在加载资料处理任务。</p>
                  </div>
                </div>
              </article>
            </div>

            <article class="panel">
              <div class="panel-head">
                <div><span class="eyebrow">数据资产</span><h2>统一数据对象</h2></div>
                <div class="panel-actions"><span class="subtle-badge">共 18,620 个对象</span></div>
              </div>
              <div class="object-grid">
                <div class="object-card"><span data-icon="mountain"></span><strong>矿井</strong><b>3</b><small>3 个生产矿井</small></div>
                <div class="object-card"><span data-icon="pickaxe"></span><strong>采掘工作面</strong><b>18</b><small>全部完成挂接</small></div>
                <div class="object-card"><span data-icon="route"></span><strong>巷道</strong><b>286</b><small>已建立拓扑关系</small></div>
                <div class="object-card"><span data-icon="radio-tower"></span><strong>传感器</strong><b>2,486</b><small>在线率 97.2%</small></div>
                <div class="object-card"><span data-icon="door-open"></span><strong>通风设施</strong><b>486</b><small>含风门、风窗、密闭</small></div>
              </div>
            </article>
          </section>

          <section class="view" id="view-facility-status" data-title="通防设施工况" data-subtitle="按设备类别查看通风设施运行、报警和断开状态">
            <div class="view-toolbar">
              <div class="toolbar-copy">
                <button class="icon-button" type="button" data-back-view="data" aria-label="返回数据感知">
                  <span data-icon="arrow-left"></span>
                </button>
                <div>
                  <strong>通防设备总览</strong>
                  <p>按设备类别汇总总数、报警数和断开数</p>
                </div>
              </div>
              <div class="toolbar-actions">
                <span class="subtle-badge"><span class="live-dot"></span>实时工况</span>
                <button class="secondary-button" type="button" data-refresh-facility>
                  <span data-icon="refresh-cw"></span>刷新
                </button>
              </div>
            </div>

            <div class="facility-overview-banner">
              <div>
                <span class="eyebrow">Facility Operations</span>
                <h2>通防设备运行总览</h2>
                <p id="facilityOverviewText">正在汇总设备运行、报警和断开状态。</p>
              </div>
              <div class="facility-overview-meta">
                <span class="facility-live-state"><span class="live-dot"></span>实时工况</span>
                <strong>设备状态汇总</strong>
                <small>状态按设备类别归集</small>
              </div>
            </div>

            <div class="facility-summary-grid" id="facilitySummaryGrid"></div>
            <div class="facility-layout">
              <div class="facility-category-panel">
                <div class="facility-section-head">
                  <div>
                    <span class="eyebrow">设备分类</span>
                    <h2>通防设备类别</h2>
                  </div>
                  <span class="subtle-badge" id="facilityCategoryCount">13 类</span>
                </div>
                <div class="facility-category-grid" id="facilityCategoryGrid"></div>
              </div>

              <article class="panel facility-detail-panel" id="facilityDetailPanel">
                <div class="business-document-note">
                  <span data-icon="settings-2"></span>
                  <p>请选择左侧设备类别查看详情。</p>
                </div>
              </article>
            </div>
          </section>

          <section class="view" id="view-safety-monitoring" data-title="KJ 安全监控系统" data-subtitle="通防监测数据接入、实时曲线与智能趋势预测">
            <div class="view-toolbar">
              <div class="toolbar-copy">
                <button class="icon-button" type="button" data-back-view="data" aria-label="返回数据感知">
                  <span data-icon="arrow-left"></span>
                </button>
                <div>
                  <strong>KJ 安全监控系统</strong>
                  <p id="safetyMonitoringToolbarText">瓦斯、风量、粉尘、CO、温度等通防监测数据</p>
                </div>
              </div>
              <div class="toolbar-actions">
                <span class="subtle-badge success"><span class="live-dot"></span>数据接入正常</span>
                <button class="secondary-button" type="button" data-refresh-safety-monitoring>
                  <span data-icon="refresh-cw"></span>刷新数据
                </button>
              </div>
            </div>

            <div class="safety-overview-strip">
              <div class="safety-overview-copy">
                <span class="eyebrow">Monitoring Network</span>
                <h2>通防安全监测运行总览</h2>
                <p id="safetyOverviewText">正在读取安全监控系统数据。</p>
              </div>
              <div class="safety-overview-status">
                <span class="live-dot"></span>
                <div><strong id="safetyOverviewSource">KJ-SAFETY</strong><small id="safetyOverviewProtocol">OPC UA · 实时接入</small></div>
              </div>
            </div>

            <div class="safety-summary-grid" id="safetyMonitoringSummary"></div>

            <div class="safety-monitoring-layout">
              <article class="panel safety-chart-panel">
                <div class="safety-chart-head">
                  <div>
                    <span class="eyebrow">实时趋势</span>
                    <h2 id="safetyChartTitle">甲烷浓度</h2>
                    <p id="safetyChartSubtitle">监测点数据与未来 2 小时趋势预测</p>
                  </div>
                  <div class="safety-chart-current">
                    <span>当前值</span>
                    <strong id="safetyCurrentValue">--</strong>
                    <small id="safetyCurrentUnit"></small>
                  </div>
                </div>
                <div class="safety-chart-toolbar">
                  <div class="safety-metric-tabs" id="safetyMetricTabs"></div>
                  <div class="segmented-control" aria-label="曲线时间范围">
                    <button type="button" data-safety-range="6">6 小时</button>
                    <button type="button" data-safety-range="12">12 小时</button>
                    <button class="active" type="button" data-safety-range="24">24 小时</button>
                  </div>
                </div>
                <div class="safety-chart-shell" id="safetyMonitoringChart"></div>
                <div class="safety-chart-legend">
                  <span><i class="actual"></i>实际监测值</span>
                  <span><i class="forecast"></i>趋势预测</span>
                  <span><i class="threshold"></i>报警阈值</span>
                </div>
              </article>

              <aside class="panel safety-insight-panel">
                <div class="panel-head">
                  <div><span class="eyebrow">智能分析</span><h2>风险趋势研判</h2></div>
                  <span class="subtle-badge" id="safetyPredictionConfidence">置信度 --</span>
                </div>
                <div class="safety-risk-summary">
                  <div class="safety-risk-ring" id="safetyRiskRing">
                    <strong id="safetyRiskScore">--</strong>
                    <small>风险指数</small>
                  </div>
                  <div>
                    <span class="safety-risk-label" id="safetyRiskLabel">分析中</span>
                    <p id="safetyRiskSummary">正在评估监测趋势与阈值余量。</p>
                  </div>
                </div>
                <div class="safety-insight-block">
                  <span data-icon="trending-up"></span>
                  <div>
                    <strong>趋势预测</strong>
                    <p id="safetyPredictionText">正在计算未来 2 小时变化趋势。</p>
                  </div>
                </div>
                <div class="safety-recommendations" id="safetyRecommendations"></div>
              </aside>
            </div>

            <div class="safety-bottom-grid">
              <article class="panel">
                <div class="panel-head">
                  <div><span class="eyebrow">接入测点</span><h2>监测点运行状态</h2></div>
                  <span class="subtle-badge" id="safetySensorCount">-- 个测点</span>
                </div>
                <div class="safety-sensor-list" id="safetySensorList"></div>
              </article>

              <article class="panel">
                <div class="panel-head">
                  <div><span class="eyebrow">异常事件</span><h2>实时告警</h2></div>
                  <span class="subtle-badge" id="safetyAlarmCount">-- 条</span>
                </div>
                <div class="safety-alarm-list" id="safetyAlarmList"></div>
              </article>
            </div>
          </section>

          <section class="view" id="view-video-platform" data-title="工业视频平台" data-subtitle="通道管理、实时视频、分屏预览与智能识别事件">
            <div class="view-toolbar">
              <div class="toolbar-copy">
                <button class="icon-button" type="button" data-back-view="data" aria-label="返回数据感知">
                  <span data-icon="arrow-left"></span>
                </button>
                <div>
                  <strong>工业视频平台</strong>
                  <p id="videoPlatformToolbarText">正在读取视频通道与识别事件</p>
                </div>
              </div>
              <div class="toolbar-actions">
                <span class="subtle-badge success"><span class="live-dot"></span>视频服务在线</span>
                <button class="secondary-button" type="button" data-refresh-video-platform>
                  <span data-icon="refresh-cw"></span>刷新
                </button>
              </div>
            </div>

            <div class="video-summary-grid" id="videoSummaryGrid"></div>

            <div class="video-module-tabs" id="videoModuleTabs">
              <button class="active" type="button" data-video-module="door"><span data-icon="door-open"></span>风门</button>
              <button type="button" data-video-module="local-fan"><span data-icon="wind"></span>局部风机</button>
              <button type="button" data-video-module="main-fan"><span data-icon="settings"></span>主风机及配电室</button>
            </div>

            <div class="video-platform-layout">
              <aside class="panel video-device-panel">
                <div class="panel-head">
                  <div><span class="eyebrow">通道目录</span><h2>视频设备树</h2></div>
                  <span class="subtle-badge" id="videoChannelCount">-- 路</span>
                </div>
                <label class="video-channel-search">
                  <span data-icon="search"></span>
                  <input id="videoChannelSearch" type="search" placeholder="搜索通道或安装地点" />
                </label>
                <div class="video-device-tree" id="videoDeviceTree"></div>
              </aside>

              <div class="video-main-column">
                <div class="video-primary-layout">
                  <article class="panel video-wall-panel">
                    <div class="panel-head">
                      <div><span class="eyebrow">实时监控</span><h2 id="videoWallTitle">双画面监控</h2></div>
                      <div class="segmented-control video-layout-control" aria-label="视频分屏布局">
                        <button type="button" data-video-layout="1">单画面</button>
                        <button class="active" type="button" data-video-layout="2">双画面</button>
                        <button type="button" data-video-layout="4">四分屏</button>
                        <button type="button" data-video-layout="6">六分屏</button>
                        <button type="button" data-video-layout="9">九分屏</button>
                      </div>
                    </div>
                    <div class="video-wall layout-2" id="videoWall"></div>
                  </article>

                </div>
              </div>
            </div>

            <div class="video-insight-row">
              <article class="panel video-status-panel">
                <div class="panel-head">
                  <div><span class="eyebrow">状态总览</span><h2 id="videoStatusTitle">风门状态总览</h2></div>
                </div>
                <div class="video-status-grid" id="videoStatusOverview"></div>
              </article>

              <article class="panel video-event-panel">
                <div class="panel-head">
                  <div><span class="eyebrow">实时告警</span><h2>视频分析事件</h2></div>
                  <span class="subtle-badge" id="videoEventCount">-- 条</span>
                </div>
                <div class="video-event-list" id="videoEventList"></div>
                <div class="video-event-pagination" id="videoEventPagination"></div>
              </article>

              <article class="panel video-records-panel">
                <div class="panel-head">
                  <div><span class="eyebrow">通行与操作记录</span><h2 id="videoRecordTitle">车辆通行记录</h2></div>
                </div>
                <div class="video-record-tabs" id="videoRecordTabs"></div>
                <div class="video-record-table" id="videoRecordsTable"></div>
              </article>
            </div>

            <div class="video-bottom-layout">
              <article class="panel video-thumbnail-panel">
                <div class="panel-head">
                  <div><span class="eyebrow">历史画面</span><h2>识别抓拍</h2></div>
                  <span class="subtle-badge" id="videoThumbnailCount">-- 张</span>
                </div>
                <div class="video-filter-bar video-filter-bar-inline">
                  <label><span>时间范围</span><input id="videoFilterStart" type="datetime-local" /></label>
                  <span class="video-filter-separator">至</span>
                  <label><input id="videoFilterEnd" type="datetime-local" /></label>
                  <button class="active" type="button" data-video-quick-range="today">今日</button>
                  <button type="button" data-video-quick-range="week">近7天</button>
                  <label><span id="videoRecordFilterLabel">告警类型</span><select id="videoRecordType">
                    <option>全部类型</option>
                    <option>AI防夹人预警</option>
                    <option>异物卡堵预警</option>
                    <option>密封失效故障</option>
                    <option>违规停留预警</option>
                    <option>风门未关严</option>
                    <option>车辆撞击故障</option>
                  </select></label>
                  <label><span id="videoScopeFilterLabel">操作类型</span><select id="videoDeviceScope">
                    <option>全部操作</option>
                    <option>风机调频</option>
                    <option>风机切换</option>
                    <option>参数调整</option>
                    <option>复位操作</option>
                  </select></label>
                  <div class="video-filter-actions">
                    <button class="primary-button" type="button" data-video-search><span data-icon="search"></span>一键检索</button>
                    <button class="secondary-button" type="button" data-video-reset><span data-icon="refresh-cw"></span>重置</button>
                  </div>
                </div>
                <div class="video-thumbnail-grid" id="videoThumbnailGrid"></div>
              </article>

            </div>
          </section>

          <section class="view" id="view-business-data" data-title="业务资料" data-subtitle="统一管理规程、措施、报表、台账与验收资料，实现资料智能抽取与全文检索">
            <div class="view-toolbar">
              <div class="toolbar-copy">
                <button class="icon-button" type="button" data-back-view="data" aria-label="返回数据感知">
                  <span data-icon="arrow-left"></span>
                </button>
                <div>
                  <strong>业务资料库</strong>
                  <p>已接入 7,280 份资料，关键字段抽取平均准确率 85.7%</p>
                </div>
              </div>
              <div class="toolbar-actions">
                <button class="secondary-button" type="button" data-export-documents><span data-icon="download"></span>导出资料清单</button>
                <button class="primary-button" type="button" data-open-upload><span data-icon="upload"></span>上传资料</button>
              </div>
            </div>

            <div class="business-kpi-grid">
              <article class="business-kpi-card">
                <span class="business-kpi-icon purple" data-icon="file-text"></span>
                <div><strong data-business-kpi="total">7,280</strong><p>业务资料总数</p></div>
                <small data-business-kpi-hint="total">本月新增 126 份</small>
              </article>
              <article class="business-kpi-card">
                <span class="business-kpi-icon teal" data-icon="scan-search"></span>
                <div><strong data-business-kpi="fields">12,406</strong><p>已抽取关键字段</p></div>
                <small data-business-kpi-hint="fields">字段完整率 96.2%</small>
              </article>
              <article class="business-kpi-card">
                <span class="business-kpi-icon blue" data-icon="activity"></span>
                <div><strong data-business-kpi="accuracy">85.7%</strong><p>字段抽取准确率</p></div>
                <small data-business-kpi-hint="accuracy">较上月提升 2.1%</small>
              </article>
              <article class="business-kpi-card">
                <span class="business-kpi-icon amber" data-icon="refresh-cw"></span>
                <div><strong data-business-kpi="pending">18</strong><p>待处理抽取任务</p></div>
                <small data-business-kpi-hint="pending">预计 36 分钟完成</small>
              </article>
            </div>

            <div class="business-data-layout">
              <aside class="panel business-category-panel">
                <div class="panel-head">
                  <div><span class="eyebrow">资料分类</span><h2>资料目录</h2></div>
                  <span class="subtle-badge">6 类</span>
                </div>
                <div class="business-category-list" id="businessCategoryList">
                  <button class="active" type="button" data-doc-category="all"><span><i data-icon="folder"></i>全部资料</span><b>7,280</b></button>
                  <button type="button" data-doc-category="通风专业"><span><i data-icon="wind"></i>通风专业</span><b>1,686</b></button>
                  <button type="button" data-doc-category="火灾防治"><span><i data-icon="flame"></i>火灾防治</span><b>986</b></button>
                  <button type="button" data-doc-category="监测监控"><span><i data-icon="radio-tower"></i>监测监控</span><b>1,452</b></button>
                  <button type="button" data-doc-category="粉尘防治"><span><i data-icon="cloud-dust"></i>粉尘防治</span><b>1,178</b></button>
                  <button type="button" data-doc-category="瓦斯防治"><span><i data-icon="gauge"></i>瓦斯防治</span><b>1,324</b></button>
                  <button type="button" data-doc-category="制度管理"><span><i data-icon="book-open"></i>制度管理</span><b>654</b></button>
                </div>
                <div class="business-storage">
                  <div class="business-storage-head"><span>资料库空间</span><strong data-storage-percent>--</strong></div>
                  <div class="business-storage-track"><i data-storage-bar style="width: 0%"></i></div>
                  <p data-storage-usage>正在统计存储空间</p>
                </div>
              </aside>

              <article class="panel business-list-panel">
                <div class="panel-head">
                  <div><span class="eyebrow">资料清单</span><h2>可检索资料</h2></div>
                  <span class="subtle-badge success"><span class="live-dot"></span>索引已更新</span>
                </div>
                <label class="document-search">
                  <span data-icon="search"></span>
                  <input id="businessDocumentSearch" type="search" placeholder="全文检索资料名称、正文、字段和责任人" />
                  <button type="button" aria-label="筛选资料"><span data-icon="filter"></span></button>
                </label>
                <div class="document-list" id="businessDocumentList">
                  <button class="document-row active" type="button" data-document-id="n1202" data-category="通风专业">
                    <span class="document-type pdf">PDF</span>
                    <span class="document-main">
                      <strong>N1202 工作面通风安全技术措施</strong>
                      <small>编号 TF-CS-2026-086 · 42 页 · 王强</small>
                    </span>
                    <span class="document-extraction success"><i></i>抽取完成</span>
                    <span class="document-fields"><b>86</b><small>字段</small></span>
                    <span data-icon="chevron-right"></span>
                  </button>
                  <button class="document-row" type="button" data-document-id="resistance" data-category="通风专业">
                    <span class="document-type doc">DOC</span>
                    <span class="document-main">
                      <strong>2026 年 9 月通风阻力测定报告</strong>
                      <small>编号 TF-BB-2026-091 · 28 页 · 赵磊</small>
                    </span>
                    <span class="document-extraction success"><i></i>抽取完成</span>
                    <span class="document-fields"><b>63</b><small>字段</small></span>
                    <span data-icon="chevron-right"></span>
                  </button>
                  <button class="document-row" type="button" data-document-id="airlog" data-category="监测监控">
                    <span class="document-type xls">XLS</span>
                    <span class="document-main">
                      <strong>矿井测风记录日报表</strong>
                      <small>编号 TF-BB-2026-092 · 1,240 行 · 刘伟</small>
                    </span>
                    <span class="document-extraction running"><i></i>抽取中 76%</span>
                    <span class="document-fields"><b>318</b><small>数据项</small></span>
                    <span data-icon="chevron-right"></span>
                  </button>
                  <button class="document-row" type="button" data-document-id="s1302" data-category="粉尘防治">
                    <span class="document-type pdf">PDF</span>
                    <span class="document-main">
                      <strong>S1302 工作面综合防尘设计</strong>
                      <small>编号 TF-SJ-2026-034 · 36 页 · 陈晨</small>
                    </span>
                    <span class="document-extraction pending"><i></i>等待解析</span>
                    <span class="document-fields"><b>52</b><small>字段</small></span>
                    <span data-icon="chevron-right"></span>
                  </button>
                  <button class="document-row" type="button" data-document-id="regulation" data-category="制度管理">
                    <span class="document-type pdf">PDF</span>
                    <span class="document-main">
                      <strong>矿井通风管理制度汇编</strong>
                      <small>编号 TF-GC-2026-012 · 118 页 · 周洋</small>
                    </span>
                    <span class="document-extraction success"><i></i>抽取完成</span>
                    <span class="document-fields"><b>146</b><small>字段</small></span>
                    <span data-icon="chevron-right"></span>
                  </button>
                  <button class="document-row" type="button" data-document-id="acceptance" data-category="通风专业">
                    <span class="document-type doc">DOC</span>
                    <span class="document-main">
                      <strong>南翼通风系统调整验收资料</strong>
                      <small>编号 TF-YS-2026-021 · 22 页 · 孙敏</small>
                    </span>
                    <span class="document-extraction success"><i></i>抽取完成</span>
                    <span class="document-fields"><b>47</b><small>字段</small></span>
                    <span data-icon="chevron-right"></span>
                  </button>
                </div>
                <div class="document-list-footer">
                  <span>共 7,280 份资料</span>
                  <div><button type="button">上一页</button><button class="active" type="button">1</button><button type="button">2</button><button type="button">下一页</button></div>
                </div>
              </article>

              <aside class="panel business-detail-panel" id="businessDetailPanel"></aside>
            </div>
          </section>

          <section class="view" id="view-knowledge" data-title="通防知识中心" data-subtitle="融合规范标准、事故案例与专家经验，实现知识检索与智能问答">
            <div class="knowledge-hero">
              <div class="knowledge-hero-copy">
                <span class="eyebrow">Knowledge Copilot</span>
                <h2>通防专业知识助手</h2>
                <p>基于 2,164 条领域知识，结合知识图谱与混合检索，为业务处置提供可追溯的答案。</p>
              </div>
              <div class="knowledge-hero-stats">
                <div><strong>2,164</strong><span>知识条目</span></div>
                <div><strong>84.6%</strong><span>检索召回率</span></div>
                <div><strong>1.2s</strong><span>平均响应</span></div>
              </div>
            </div>

            <form class="knowledge-console" id="knowledgeConsoleForm">
              <span class="console-icon" data-icon="search"></span>
              <textarea name="question" rows="1" data-max-height="96" placeholder="输入通防业务问题，例如：局部通风机停风后应该如何处置？"></textarea>
              <button class="primary-button" type="submit"><span data-icon="sparkles"></span>智能回答</button>
            </form>

            <div class="two-column-grid knowledge-grid">
              <article class="panel knowledge-answer-panel" id="knowledgeAnswerPanel">
                <div class="panel-head">
                  <div><span class="eyebrow">智能问答</span><h2>回答与依据</h2></div>
                  <span class="subtle-badge success">知识溯源已开启</span>
                </div>
                <div class="ai-answer">
                  <div class="ai-avatar"><span data-icon="bot"></span></div>
                  <div class="ai-answer-body">
                    <p>局部通风机停风后，应当立即停止作业、撤出人员、切断电源，并设置栅栏和警示标志。恢复通风前，必须先检查瓦斯浓度，确认停风区域瓦斯浓度符合规定后，方可启动局部通风机。</p>
                    <div class="answer-steps">
                      <div><span>1</span><p>停止作业并撤出受影响区域人员</p></div>
                      <div><span>2</span><p>切断电源，设置栅栏与警示标志</p></div>
                      <div><span>3</span><p>检查瓦斯与风筒状态，确认条件后恢复通风</p></div>
                    </div>
                    <div class="source-citations">
                      <button type="button"><span data-icon="file-text"></span>《煤矿安全规程》第 164 条 <b>96%</b></button>
                      <button type="button"><span data-icon="file-text"></span>局部通风机停风处置案例 2024-032 <b>91%</b></button>
                      <button type="button"><span data-icon="file-text"></span>《局部通风管理标准》第 4.2 节 <b>88%</b></button>
                    </div>
                  </div>
                </div>
              </article>

              <article class="panel">
                <div class="panel-head">
                  <div><span class="eyebrow">知识图谱</span><h2>风险关联关系</h2></div>
                  <button class="icon-button small" type="button" aria-label="展开知识图谱"><span data-icon="maximize-2"></span></button>
                </div>
                <div class="graph-canvas">
                  <svg viewBox="0 0 560 360" role="img" aria-label="通防风险知识图谱">
                    <defs>
                      <marker id="graphArrow" markerWidth="8" markerHeight="8" refX="8" refY="4" orient="auto">
                        <path d="M0,0 L8,4 L0,8 z" fill="#93a4b8" />
                      </marker>
                    </defs>
                    <g class="graph-links">
                      <path d="M280 180 L126 88" />
                      <path d="M280 180 L438 92" />
                      <path d="M280 180 L118 280" />
                      <path d="M280 180 L438 282" />
                      <path d="M126 88 L438 92" />
                      <path d="M118 280 L438 282" />
                    </g>
                    <g class="graph-center" transform="translate(280 180)">
                      <circle r="48" />
                      <text y="-4">瓦斯超限</text>
                      <text y="16">风险事件</text>
                    </g>
                    <g class="graph-node" transform="translate(126 88)">
                      <circle r="34" /><text y="-4">局部通风机</text><text y="15">停风/循环风</text>
                    </g>
                    <g class="graph-node amber-node" transform="translate(438 92)">
                      <circle r="34" /><text y="-4">风门</text><text y="15">漏风/失效</text>
                    </g>
                    <g class="graph-node" transform="translate(118 280)">
                      <circle r="34" /><text y="-4">风量分配</text><text y="15">风量不足</text>
                    </g>
                    <g class="graph-node amber-node" transform="translate(438 282)">
                      <circle r="34" /><text y="-4">监测系统</text><text y="15">数据异常</text>
                    </g>
                  </svg>
                </div>
                <div class="graph-legend">
                  <span><i class="graph-legend-dot center"></i>风险事件</span>
                  <span><i class="graph-legend-dot cause"></i>关联缺陷</span>
                  <span><i class="graph-legend-dot data"></i>监测依据</span>
                </div>
              </article>
            </div>

            <div class="knowledge-category-grid">
              <article class="category-card" role="button" tabindex="0" data-knowledge-category="standards">
                <span class="category-icon blue" data-icon="book-open"></span>
                <div><strong>规范标准</strong><b>628</b><p>规程、标准、办法及技术要求</p></div>
                <button type="button" aria-label="查看规范标准"><span data-icon="chevron-right"></span></button>
              </article>
              <article class="category-card" role="button" tabindex="0" data-knowledge-category="cases">
                <span class="category-icon red" data-icon="history"></span>
                <div><strong>事故案例</strong><b>364</b><p>典型事故与隐患处置案例</p></div>
                <button type="button" aria-label="查看事故案例"><span data-icon="chevron-right"></span></button>
              </article>
              <article class="category-card" role="button" tabindex="0" data-knowledge-category="expert">
                <span class="category-icon amber" data-icon="user-round"></span>
                <div><strong>专家经验</strong><b>512</b><p>专家规则、判识经验与处置建议</p></div>
                <button type="button" aria-label="查看专家经验"><span data-icon="chevron-right"></span></button>
              </article>
              <article class="category-card" role="button" tabindex="0" data-knowledge-category="management">
                <span class="category-icon teal" data-icon="workflow"></span>
                <div><strong>管理流程</strong><b>660</b><p>业务流程、责任岗位与闭环规则</p></div>
                <button type="button" aria-label="查看管理流程"><span data-icon="chevron-right"></span></button>
              </article>
            </div>

            <div class="knowledge-catalog-modal" id="knowledgeCatalogModal" hidden>
              <div class="knowledge-catalog-scrim" data-knowledge-catalog-close></div>
              <section class="knowledge-catalog-dialog" role="dialog" aria-modal="true" aria-labelledby="knowledgeCatalogTitle">
                <header class="knowledge-catalog-head">
                  <div>
                    <span class="eyebrow" id="knowledgeCatalogEyebrow">知识目录</span>
                    <h2 id="knowledgeCatalogTitle">知识列表</h2>
                    <p id="knowledgeCatalogSubtitle"></p>
                  </div>
                  <button class="icon-button small" type="button" aria-label="关闭知识列表" data-knowledge-catalog-close>
                    <span data-icon="x"></span>
                  </button>
                </header>
                <form class="knowledge-catalog-search" id="knowledgeCatalogSearch">
                  <span data-icon="search"></span>
                  <input type="search" name="keyword" placeholder="检索当前分类下的标准、标题或关键词" />
                  <button class="secondary-button" type="submit">检索</button>
                </form>
                <div class="knowledge-catalog-content" id="knowledgeCatalogContent"></div>
                <footer class="knowledge-catalog-pager" id="knowledgeCatalogPager"></footer>
              </section>
            </div>
          </section>

          <section class="view" id="view-diagnosis" data-title="隐患识别中心" data-subtitle="面向五类重大安全风险，编排专业智能体完成识别、研判与风险汇聚">
            <div class="view-toolbar hazard-toolbar">
              <div class="toolbar-copy">
                <span class="toolbar-icon red" data-icon="shield-alert"></span>
                <div><strong>重大安全隐患智能识别</strong><p>五个业务场景 · 15 个专业智能体 · 风险清单持续更新</p></div>
              </div>
              <div class="toolbar-actions">
                <button class="secondary-button" type="button" data-export-hazards><span data-icon="download"></span>导出识别报告</button>
                <button class="primary-button" type="button" data-run-scene-agents><span data-icon="play"></span>运行当前场景</button>
              </div>
            </div>

            <div class="hazard-overview">
              <div class="hazard-overview-copy">
                <span class="eyebrow">Risk Agent Matrix</span>
                <h2>重大安全隐患识别智能体矩阵</h2>
                <p>围绕局部通风、通风设施、通风系统管理、风量分配和灾害防治构建专业识别能力。</p>
              </div>
              <div class="hazard-overview-stats">
                <div><strong id="hazardAgentTotal">15</strong><span>专业智能体</span></div>
                <div><strong id="hazardSceneTotal">5</strong><span>业务场景</span></div>
                <div><strong id="hazardRunCount">0</strong><span>本轮运行</span></div>
                <div><strong id="hazardRiskTotal">5</strong><span>风险清单</span></div>
              </div>
            </div>

            <div class="hazard-scenario-grid" id="hazardScenarioGrid" aria-label="隐患识别场景"></div>

            <div class="hazard-console-grid">
              <article class="panel hazard-agent-panel">
                <div class="panel-head">
                  <div><span class="eyebrow">Scenario Agents</span><h2>场景智能体</h2></div>
                  <span class="subtle-badge" id="hazardSceneAgentCount">3 个智能体</span>
                </div>
                <div class="hazard-agent-grid" id="hazardAgentGrid"></div>
              </article>

              <aside class="panel hazard-result-panel">
                <div class="panel-head">
                  <div><span class="eyebrow">Agent Run</span><h2>智能体运行结果</h2></div>
                  <span class="subtle-badge" id="hazardResultStatus">尚未执行</span>
                </div>
                <div class="hazard-agent-result" id="hazardAgentResult" aria-live="polite">
                  <div class="hazard-result-empty">
                    <span data-icon="bot"></span>
                    <strong>尚未执行</strong>
                    <p>当前没有可展示的识别结果。</p>
                  </div>
                </div>
              </aside>
            </div>

            <div class="hazard-risk-summary">
              <div class="hazard-metric total"><span data-icon="scan-search"></span><div><strong id="hazardMetricTotal">5</strong><p>风险总数</p></div></div>
              <div class="hazard-metric high"><span data-icon="triangle-alert"></span><div><strong id="hazardMetricHigh">2</strong><p>重大隐患</p></div></div>
              <div class="hazard-metric medium"><span data-icon="circle-alert"></span><div><strong id="hazardMetricMedium">2</strong><p>一般隐患</p></div></div>
              <div class="hazard-metric low"><span data-icon="shield-check"></span><div><strong id="hazardMetricLow">1</strong><p>提示风险</p></div></div>
            </div>

            <article class="panel hazard-risk-panel">
              <div class="panel-head">
                <div><span class="eyebrow">Risk Backlog</span><h2>隐患风险列表</h2></div>
                <div class="hazard-risk-actions">
                  <div class="hazard-risk-filters" id="hazardRiskFilters">
                    <button class="active" type="button" data-risk-filter="all">全部</button>
                    <button type="button" data-risk-filter="high">高风险</button>
                    <button type="button" data-risk-filter="medium">中风险</button>
                    <button type="button" data-risk-filter="low">低风险</button>
                  </div>
                  <label class="hazard-scene-select">
                    <span>场景</span>
                    <select id="hazardRiskSceneFilter">
                      <option value="all">全部场景</option>
                      <option value="local">局部通风</option>
                      <option value="facility">通风设施</option>
                      <option value="system">通风系统管理</option>
                      <option value="volume">风量分配</option>
                      <option value="disaster">灾害防治</option>
                    </select>
                  </label>
                </div>
              </div>
              <div class="hazard-risk-table-head">
                <span>隐患事项</span><span>等级</span><span>场景 / 来源</span><span>证据</span><span>置信度</span><span>状态</span><span>操作</span>
              </div>
              <div class="hazard-risk-list" id="hazardRiskList"></div>
            </article>
          </section>

          <section class="view" id="view-evaluation" data-title="综合评价" data-subtitle="建立多维度量化指标体系，结合大模型完成评价、解释与优化建议">
            <div class="evaluation-banner">
              <div class="evaluation-grade">
                <span>本期评价结果</span>
                <strong>A</strong>
                <em>运行状态优良</em>
              </div>
              <div class="evaluation-summary-copy">
                <span class="eyebrow">2026 年 10 月 08 日 · 自动评价</span>
                <h2>上湾煤矿通防业务综合评价报告</h2>
                <p>安全性、可靠性表现稳定，风量分配均衡度和局部通风管理为当前主要提升方向。</p>
                <div class="evaluation-tags"><span>数据完整率 98.4%</span><span>专家复核通过</span><span>报告可追溯</span></div>
              </div>
              <button class="primary-button" type="button"><span data-icon="download"></span>下载评价报告</button>
            </div>

            <div class="evaluation-grid">
              <article class="panel radar-panel">
                <div class="panel-head">
                  <div><span class="eyebrow">指标画像</span><h2>五维综合评价</h2></div>
                  <span class="subtle-badge">综合得分 92.8</span>
                </div>
                <div class="radar-wrap">
                  <svg viewBox="0 0 420 350" role="img" aria-label="五维综合评价雷达图">
                    <g class="radar-grid">
                      <polygon points="210,34 369,151 308,338 112,338 51,151" />
                      <polygon points="210,74 327,162 282,305 138,305 93,162" />
                      <polygon points="210,114 286,173 255,273 165,273 134,173" />
                      <polygon points="210,154 245,184 228,240 192,240 175,184" />
                      <path d="M210 34 L210 338 M51 151 L369 151 M112 338 L308 338" />
                    </g>
                    <polygon class="radar-area" points="210,55 350,158 294,316 126,322 75,157" />
                    <polygon class="radar-line" points="210,55 350,158 294,316 126,322 75,157" />
                    <g class="radar-points">
                      <circle cx="210" cy="55" r="4" /><circle cx="350" cy="158" r="4" /><circle cx="294" cy="316" r="4" /><circle cx="126" cy="322" r="4" /><circle cx="75" cy="157" r="4" />
                    </g>
                    <g class="radar-labels">
                      <text x="210" y="18">安全性 96.2</text>
                      <text x="386" y="154">可靠性 91.4</text>
                      <text x="318" y="346">经济性 84.7</text>
                      <text x="28" y="346">管理合规 94.1</text>
                      <text x="12" y="154">数据质量 89.6</text>
                    </g>
                  </svg>
                </div>
              </article>

              <article class="panel evaluation-detail-panel">
                <div class="panel-head">
                  <div><span class="eyebrow">指标明细</span><h2>维度得分与变化</h2></div>
                  <button class="text-button" type="button">指标设置 <span data-icon="sliders-horizontal"></span></button>
                </div>
                <div class="dimension-list">
                  <div class="dimension-row">
                    <span class="dimension-icon green" data-icon="shield-check"></span>
                    <div><strong>安全性</strong><p>瓦斯、火灾、粉尘、通风可靠性</p></div>
                    <div class="dimension-score"><b>96.2</b><span class="up"><i data-icon="arrow-up"></i>1.8</span></div>
                  </div>
                  <div class="dimension-row">
                    <span class="dimension-icon blue" data-icon="activity"></span>
                    <div><strong>可靠性</strong><p>设备可用率、数据连续性、故障恢复</p></div>
                    <div class="dimension-score"><b>91.4</b><span class="up"><i data-icon="arrow-up"></i>0.6</span></div>
                  </div>
                  <div class="dimension-row">
                    <span class="dimension-icon amber" data-icon="circle-dollar-sign"></span>
                    <div><strong>经济性</strong><p>主通风机能耗、漏风率、运行效率</p></div>
                    <div class="dimension-score"><b>84.7</b><span class="down"><i data-icon="arrow-down"></i>0.9</span></div>
                  </div>
                  <div class="dimension-row">
                    <span class="dimension-icon purple" data-icon="clipboard-check"></span>
                    <div><strong>管理合规</strong><p>资料完整、制度执行、整改及时性</p></div>
                    <div class="dimension-score"><b>94.1</b><span class="up"><i data-icon="arrow-up"></i>2.1</span></div>
                  </div>
                  <div class="dimension-row">
                    <span class="dimension-icon teal" data-icon="database"></span>
                    <div><strong>数据质量</strong><p>完整性、及时性、一致性与有效性</p></div>
                    <div class="dimension-score"><b>89.6</b><span class="up"><i data-icon="arrow-up"></i>3.4</span></div>
                  </div>
                </div>
              </article>
            </div>

            <article class="panel evaluation-agent-panel">
              <div class="agent-orb"><span data-icon="sparkles"></span></div>
              <div class="agent-copy">
                <span class="eyebrow">Evaluation Agent</span>
                <h2>评价智能体已生成优化建议</h2>
                <p>“经济性指标下降主要受北翼通风阻力上升影响。建议优先核查北翼回风巷道支护变形、堆积物和 2# 调节风门漏风情况，并对主通风机运行曲线进行复核。”</p>
                <div class="agent-suggestions">
                  <span><i>1</i>北翼回风阻力专项排查</span>
                  <span><i>2</i>主通风机能效优化</span>
                  <span><i>3</i>S1301 风量复测与分配调整</span>
                </div>
              </div>
              <button class="secondary-button" type="button" data-start-evaluation><span data-icon="refresh-cw"></span>重新评价</button>
            </article>

            <article class="panel">
              <div class="panel-head">
                <div><span class="eyebrow">历史趋势</span><h2>近六个月综合得分</h2></div>
                <div class="chart-legend"><span><i class="legend-line teal"></i>综合得分</span><span><i class="legend-line amber"></i>安全性</span></div>
              </div>
              <div class="line-chart">
                <div class="chart-y-axis"><span>100</span><span>90</span><span>80</span><span>70</span><span>60</span></div>
                <svg viewBox="0 0 900 240" preserveAspectRatio="none" role="img" aria-label="近六个月综合得分趋势图">
                  <g class="chart-grid">
                    <path d="M0 20 L900 20" /><path d="M0 70 L900 70" /><path d="M0 120 L900 120" /><path d="M0 170 L900 170" /><path d="M0 220 L900 220" />
                  </g>
                  <path class="chart-area" d="M0,112 C75,108 116,99 180,94 C244,89 276,82 360,77 C444,72 496,65 540,55 C584,45 636,46 720,34 C804,22 846,18 900,12 L900,220 L0,220 Z" />
                  <path class="chart-line teal-line" d="M0,112 C75,108 116,99 180,94 C244,89 276,82 360,77 C444,72 496,65 540,55 C584,45 636,46 720,34 C804,22 846,18 900,12" />
                  <path class="chart-line amber-line" d="M0,90 C90,85 126,88 180,83 C270,74 306,72 360,67 C450,59 486,61 540,52 C630,38 666,42 720,31 C810,15 846,18 900,8" />
                  <g class="chart-points">
                    <circle cx="0" cy="112" r="4" /><circle cx="180" cy="94" r="4" /><circle cx="360" cy="77" r="4" /><circle cx="540" cy="55" r="4" /><circle cx="720" cy="34" r="4" /><circle cx="900" cy="12" r="4" />
                  </g>
                </svg>
                <div class="chart-x-axis"><span>5月</span><span>6月</span><span>7月</span><span>8月</span><span>9月</span><span>10月</span></div>
              </div>
            </article>
          </section>

          <section class="view" id="view-closed-loop" data-title="闭环处置" data-subtitle="将诊断与评价结果转为任务，实现整改、复核、销号和案例沉淀">
            <div class="view-toolbar">
              <div class="toolbar-copy">
                <span class="toolbar-icon amber" data-icon="workflow"></span>
                <div><strong>整改任务看板</strong><p>本月累计处置任务 86 项，闭环率 91.8%，平均处置时长 5.6 小时</p></div>
              </div>
              <div class="toolbar-actions">
                <button class="secondary-button" type="button"><span data-icon="filter"></span>筛选</button>
                <button class="primary-button" type="button" data-toast="新建任务表单已打开"><span data-icon="plus"></span>新建任务</button>
              </div>
            </div>

            <div class="kanban-board">
              <div class="kanban-column">
                <div class="kanban-head"><span><i class="column-dot pending"></i>待确认 <b>3</b></span><button type="button" aria-label="添加待确认任务"><span data-icon="plus"></span></button></div>
                <button class="work-card priority-high" type="button" data-toast="已打开任务：N1202 瓦斯超限处置">
                  <div class="work-card-head"><span class="work-tag high">高优先级</span><span>10:38</span></div>
                  <strong>N1202 回风巷瓦斯超限处置</strong>
                  <p>建议核查局部通风机与回风系统，确认撤人断电措施执行情况。</p>
                  <div class="work-meta"><span class="avatar mini">王</span><span>王强</span><span>剩余 01:26</span></div>
                </button>
                <button class="work-card priority-medium" type="button" data-toast="已打开任务：2# 调节风门状态复核">
                  <div class="work-card-head"><span class="work-tag medium">中优先级</span><span>10:28</span></div>
                  <strong>2# 调节风门状态复核</strong>
                  <p>视频判断风门未闭合，传感器反馈正常，需现场确认。</p>
                  <div class="work-meta"><span class="avatar mini">赵</span><span>赵磊</span><span>剩余 03:42</span></div>
                </button>
                <button class="work-card priority-low" type="button" data-toast="已打开任务：通风阻力月报复核">
                  <div class="work-card-head"><span class="work-tag low">常规</span><span>09:20</span></div>
                  <strong>通风阻力月报复核</strong>
                  <p>核查阻力异常点与测风记录一致性。</p>
                  <div class="work-meta"><span class="avatar mini">陈</span><span>陈晨</span><span>剩余 1 天</span></div>
                </button>
              </div>

              <div class="kanban-column">
                <div class="kanban-head"><span><i class="column-dot processing"></i>处理中 <b>4</b></span><button type="button" aria-label="添加处理中任务"><span data-icon="plus"></span></button></div>
                <button class="work-card priority-high" type="button" data-toast="已打开任务：T-17 局部通风机异常处置">
                  <div class="work-card-head"><span class="work-tag high">高优先级</span><span>10:32</span></div>
                  <strong>T-17 局部通风机异常处置</strong>
                  <p>现场已到达，正在检查供电回路与风筒连接状态。</p>
                  <div class="progress-line"><i style="width: 62%"></i></div>
                  <div class="work-meta"><span class="avatar mini">刘</span><span>刘伟</span><span>62%</span></div>
                </button>
                <button class="work-card priority-medium" type="button" data-toast="已打开任务：S1301 风量复测">
                  <div class="work-card-head"><span class="work-tag medium">中优先级</span><span>09:56</span></div>
                  <strong>S1301 风量复测</strong>
                  <p>调整风窗开度后进行第二次测风。</p>
                  <div class="progress-line"><i style="width: 78%"></i></div>
                  <div class="work-meta"><span class="avatar mini">周</span><span>周洋</span><span>78%</span></div>
                </button>
                <button class="work-card priority-medium" type="button" data-toast="已打开任务：北翼回风巷道排查">
                  <div class="work-card-head"><span class="work-tag medium">中优先级</span><span>08:32</span></div>
                  <strong>北翼回风巷道排查</strong>
                  <p>排查巷道变形、堆放物与局部阻力异常点。</p>
                  <div class="progress-line"><i style="width: 35%"></i></div>
                  <div class="work-meta"><span class="avatar mini">李</span><span>李浩</span><span>35%</span></div>
                </button>
              </div>

              <div class="kanban-column">
                <div class="kanban-head"><span><i class="column-dot review"></i>待复核 <b>2</b></span><button type="button" aria-label="添加待复核任务"><span data-icon="plus"></span></button></div>
                <button class="work-card priority-medium" type="button" data-toast="已打开任务：主通风机运行曲线复核">
                  <div class="work-card-head"><span class="work-tag medium">中优先级</span><span>昨日</span></div>
                  <strong>主通风机运行曲线复核</strong>
                  <p>已完成能效分析，等待通防科负责人确认。</p>
                  <div class="work-meta"><span class="avatar mini">孙</span><span>孙敏</span><span>待复核</span></div>
                </button>
                <button class="work-card priority-low" type="button" data-toast="已打开任务：粉尘监测点校准">
                  <div class="work-card-head"><span class="work-tag low">常规</span><span>昨日</span></div>
                  <strong>粉尘监测点校准</strong>
                  <p>已完成 4 个监测点校准，等待数据复验。</p>
                  <div class="work-meta"><span class="avatar mini">高</span><span>高杰</span><span>待复核</span></div>
                </button>
              </div>

              <div class="kanban-column">
                <div class="kanban-head"><span><i class="column-dot closed"></i>已完成 <b>12</b></span><button type="button" aria-label="添加已完成任务"><span data-icon="plus"></span></button></div>
                <button class="work-card priority-low" type="button" data-toast="已打开任务：风门传感器更换">
                  <div class="work-card-head"><span class="work-tag closed">已销号</span><span>今日</span></div>
                  <strong>风门传感器更换</strong>
                  <p>更换后数据恢复，复核记录已归档。</p>
                  <div class="work-meta"><span class="avatar mini">赵</span><span>赵磊</span><span class="success-text">闭环</span></div>
                </button>
                <button class="work-card priority-low" type="button" data-toast="已打开任务：回风巷测风站维护">
                  <div class="work-card-head"><span class="work-tag closed">已销号</span><span>今日</span></div>
                  <strong>回风巷测风站维护</strong>
                  <p>清理测量断面并完成数据复核。</p>
                  <div class="work-meta"><span class="avatar mini">周</span><span>周洋</span><span class="success-text">闭环</span></div>
                </button>
                <button class="work-card priority-low" type="button" data-toast="已打开任务：月度资料完整性检查">
                  <div class="work-card-head"><span class="work-tag closed">已销号</span><span>昨日</span></div>
                  <strong>月度资料完整性检查</strong>
                  <p>补充 6 份资料，关键字段抽取完成。</p>
                  <div class="work-meta"><span class="avatar mini">陈</span><span>陈晨</span><span class="success-text">闭环</span></div>
                </button>
              </div>
            </div>
          </section>

          <section class="view" id="view-settings" data-title="系统配置" data-subtitle="管理数据源、模型服务、指标规则、用户权限与平台运行参数">
            <div class="settings-layout">
              <div class="settings-nav">
                <button class="active" type="button"><span data-icon="plug-zap"></span>数据源配置</button>
                <button type="button"><span data-icon="cpu"></span>模型服务</button>
                <button type="button"><span data-icon="sliders-horizontal"></span>指标与规则</button>
                <button type="button"><span data-icon="users"></span>用户与权限</button>
                <button type="button"><span data-icon="shield-check"></span>安全审计</button>
              </div>
              <div class="settings-content">
                <article class="panel">
                  <div class="panel-head">
                    <div><span class="eyebrow">数据源配置</span><h2>已接入系统</h2></div>
                    <button class="primary-button" type="button" data-toast="新增数据源配置已打开"><span data-icon="plus"></span>新增数据源</button>
                  </div>
                  <div class="integration-list">
                    <div class="integration-row">
                      <span class="integration-icon teal" data-icon="database"></span>
                      <div><strong>KJ 安全监控系统</strong><p>OPC UA · 10.20.16.28:4840</p></div>
                      <span class="connection-status online"><i></i>已连接</span>
                      <button class="icon-button small" type="button" aria-label="配置 KJ 安全监控系统"><span data-icon="settings"></span></button>
                    </div>
                    <div class="integration-row">
                      <span class="integration-icon blue" data-icon="video"></span>
                      <div><strong>工业视频平台</strong><p>GB/T 28181 · 218 路视频流</p></div>
                      <span class="connection-status online"><i></i>已连接</span>
                      <button class="icon-button small" type="button" aria-label="配置工业视频平台"><span data-icon="settings"></span></button>
                    </div>
                    <div class="integration-row">
                      <span class="integration-icon amber" data-icon="settings-2"></span>
                      <div><strong>通防设施物联网平台</strong><p>MQTT · 486 台设备</p></div>
                      <span class="connection-status online"><i></i>已连接</span>
                      <button class="icon-button small" type="button" aria-label="配置通防设施物联网平台"><span data-icon="settings"></span></button>
                    </div>
                    <div class="integration-row">
                      <span class="integration-icon purple" data-icon="file-text"></span>
                      <div><strong>业务资料管理系统</strong><p>REST API · 每 15 分钟同步</p></div>
                      <span class="connection-status warning"><i></i>同步中</span>
                      <button class="icon-button small" type="button" aria-label="配置业务资料管理系统"><span data-icon="settings"></span></button>
                    </div>
                  </div>
                </article>

                <div class="settings-grid">
                  <article class="panel setting-card">
                    <div class="setting-icon teal" data-icon="radio-tower"></div>
                    <h3>数据采集频率</h3>
                    <p>设置不同数据源的实时采集和同步周期。</p>
                    <div class="setting-value"><strong>2 秒</strong><span>实时监测</span></div>
                    <button class="secondary-button" type="button">调整参数</button>
                  </article>
                  <article class="panel setting-card">
                    <div class="setting-icon amber" data-icon="cpu"></div>
                    <h3>诊断模型版本</h3>
                    <p>管理模型发布、回滚和灰度运行策略。</p>
                    <div class="setting-value"><strong>v2.6.1</strong><span>已发布</span></div>
                    <button class="secondary-button" type="button">模型管理</button>
                  </article>
                  <article class="panel setting-card">
                    <div class="setting-icon purple" data-icon="sliders-horizontal"></div>
                    <h3>评价指标权重</h3>
                    <p>配置安全性、可靠性、经济性等维度权重。</p>
                    <div class="setting-value"><strong>动态计算</strong><span>AHP + 熵权法</span></div>
                    <button class="secondary-button" type="button">配置权重</button>
                  </article>
                </div>
              </div>
            </div>
          </section>
        </div>
      </main>
    </div>

    <div class="upload-modal" id="documentProcessingRecordsModal" hidden>
      <div class="upload-modal-scrim" data-records-close></div>
      <section class="upload-dialog document-records-dialog" role="dialog" aria-modal="true" aria-labelledby="documentProcessingRecordsTitle">
        <div class="upload-dialog-head">
          <div>
            <span class="eyebrow">Processing History</span>
            <h2 id="documentProcessingRecordsTitle">业务资料处理记录</h2>
          </div>
          <button class="icon-button small" type="button" data-records-close aria-label="关闭处理记录">
            <span data-icon="x"></span>
          </button>
        </div>
        <div class="document-preview-toolbar">
          <span class="subtle-badge" id="documentProcessingRecordsCount">正在加载</span>
        </div>
        <div class="extraction-list processing-records-list" id="documentProcessingRecordsList"></div>
      </section>
    </div>

    <div class="upload-modal" id="documentReprocessModal" hidden>
      <div class="upload-modal-scrim" data-reprocess-close></div>
      <section class="upload-dialog" role="dialog" aria-modal="true" aria-labelledby="documentReprocessTitle">
        <form id="documentReprocessForm">
          <div class="upload-dialog-head">
            <div>
              <span class="eyebrow">Document Processing</span>
              <h2 id="documentReprocessTitle">重新解析资料</h2>
            </div>
            <button class="icon-button small" type="button" data-reprocess-close aria-label="关闭重新解析窗口">
              <span data-icon="x"></span>
            </button>
          </div>

          <input name="document_id" type="hidden" />
          <div class="document-reprocess-error" id="documentReprocessError" hidden>
            <span data-icon="triangle-alert"></span>
            <div><strong>上次处理失败</strong><p id="documentReprocessErrorText"></p></div>
          </div>

          <div class="upload-form-grid">
            <label class="upload-field upload-field-wide">
              <span>业务资料类型 / 抽取模板</span>
              <select name="template_id" id="reprocessTemplateSelect">
                <option value="">按文件名重新识别</option>
              </select>
            </label>
          </div>

          <fieldset class="parse-mode-fieldset">
            <legend>解析模式</legend>
            <div class="parse-mode-options">
              <label>
                <input name="parse_mode" type="radio" value="lightweight" checked />
                <span>
                  <strong>轻量解析</strong>
                  <small>速度较快，适合 10 MB / 20 页以内文档</small>
                </span>
              </label>
              <label>
                <input name="parse_mode" type="radio" value="precision" />
                <span>
                  <strong>精准解析</strong>
                  <small>VLM 高精度解析，适合最大 200 MB / 200 页</small>
                </span>
              </label>
            </div>
          </fieldset>

          <div class="upload-dialog-actions">
            <button class="secondary-button" type="button" data-reprocess-close>取消</button>
            <button class="primary-button" type="submit" id="documentReprocessSubmit">
              <span data-icon="refresh-cw"></span>开始重新解析
            </button>
          </div>
        </form>
      </section>
    </div>

    <div class="upload-modal document-preview-modal" id="documentPreviewModal" hidden>
      <div class="upload-modal-scrim" data-preview-close></div>
      <section class="upload-dialog document-preview-dialog" role="dialog" aria-modal="true" aria-labelledby="documentPreviewTitle">
        <div class="upload-dialog-head">
          <div>
            <span class="eyebrow">Document Preview</span>
            <h2 id="documentPreviewTitle">原文预览</h2>
          </div>
          <button class="icon-button small" type="button" data-preview-close aria-label="关闭原文预览">
            <span data-icon="x"></span>
          </button>
        </div>
        <div class="document-preview-toolbar">
          <span class="subtle-badge" id="documentPreviewType">正在加载</span>
          <button class="secondary-button" type="button" id="documentPreviewDownload">
            <span data-icon="download"></span>下载原文件
          </button>
        </div>
        <div class="document-preview-body" id="documentPreviewBody"></div>
      </section>
    </div>

    <div class="upload-modal" id="businessUploadModal" hidden>
      <div class="upload-modal-scrim" data-upload-close></div>
      <section class="upload-dialog" role="dialog" aria-modal="true" aria-labelledby="businessUploadTitle">
        <form id="businessUploadForm">
          <div class="upload-dialog-head">
            <div>
              <span class="eyebrow">Document Intake</span>
              <h2 id="businessUploadTitle">上传业务资料</h2>
            </div>
            <button class="icon-button small" type="button" data-upload-close aria-label="关闭上传窗口">
              <span data-icon="x"></span>
            </button>
          </div>

          <div class="upload-form-grid">
            <label class="upload-field">
              <span>资料分类</span>
              <select name="category" required>
                <option value="通风专业">通风专业</option>
                <option value="火灾防治">火灾防治</option>
                <option value="监测监控">监测监控</option>
                <option value="粉尘防治">粉尘防治</option>
                <option value="瓦斯防治">瓦斯防治</option>
                <option value="制度管理">制度管理</option>
              </select>
            </label>
            <label class="upload-field">
              <span>资料编号</span>
              <input name="code" type="text" maxlength="64" placeholder="选填" />
            </label>
            <label class="upload-field upload-field-wide">
              <span>业务资料类型 / 抽取模板（留空则按文件名自动识别）</span>
              <select name="template_id" id="businessTemplateSelect">
                <option value="">自动识别（根据文件名）</option>
              </select>
              <small class="upload-field-error" id="businessTemplateError" hidden>当前文件名未匹配到抽取模板，请手动选择业务资料类型。</small>
            </label>
            <label class="upload-field">
              <span>资料责任人</span>
              <input name="owner_name" type="text" maxlength="128" placeholder="选填" />
            </label>
            <label class="upload-field">
              <span>所属部门</span>
              <input name="department" type="text" maxlength="128" placeholder="选填" />
            </label>
          </div>

          <fieldset class="parse-mode-fieldset">
            <legend>解析模式</legend>
            <div class="parse-mode-options">
              <label>
                <input name="parse_mode" type="radio" value="lightweight" checked />
                <span>
                  <strong>轻量解析</strong>
                  <small>速度较快，适合 10 MB / 20 页以内文档</small>
                </span>
              </label>
              <label>
                <input name="parse_mode" type="radio" value="precision" />
                <span>
                  <strong>精准解析</strong>
                  <small>VLM 高精度解析，适合最大 200 MB / 200 页</small>
                </span>
              </label>
            </div>
          </fieldset>

          <label class="upload-file-field">
            <span data-icon="upload"></span>
            <strong id="businessFileTitle">选择 Word、PDF 或 Excel 文件</strong>
            <small id="businessFileDetail">支持 .doc .docx .pdf .xls .xlsx .csv，单个文件不超过 50 MB</small>
            <input name="file" type="file" accept=".pdf,.doc,.docx,.xls,.xlsx,.csv" required />
          </label>

          <div class="upload-progress" id="businessUploadProgress" hidden>
            <div>
              <strong id="businessUploadStage">正在上传</strong>
              <span id="businessUploadPercent">0%</span>
            </div>
            <div class="upload-progress-track"><i id="businessUploadProgressBar"></i></div>
          </div>

          <div class="upload-dialog-actions">
            <button class="secondary-button" type="button" data-upload-close>取消</button>
            <button class="primary-button" type="submit" id="businessUploadSubmit">
              <span data-icon="upload"></span>上传并开始解析
            </button>
          </div>
        </form>
      </section>
    </div>

    <div class="upload-modal" id="businessEditModal" hidden>
      <div class="upload-modal-scrim" data-edit-close></div>
      <section class="upload-dialog" role="dialog" aria-modal="true" aria-labelledby="businessEditTitle">
        <form id="businessEditForm">
          <div class="upload-dialog-head">
            <div>
              <span class="eyebrow">Document Metadata</span>
              <h2 id="businessEditTitle">编辑资料信息</h2>
            </div>
            <button class="icon-button small" type="button" data-edit-close aria-label="关闭编辑窗口">
              <span data-icon="x"></span>
            </button>
          </div>

          <input name="document_id" type="hidden" />
          <div class="upload-form-grid">
            <label class="upload-field upload-field-wide">
              <span>文档名称</span>
              <input name="title" type="text" required maxlength="255" />
            </label>
            <label class="upload-field">
              <span>文档编号</span>
              <input name="code" type="text" maxlength="64" />
            </label>
            <label class="upload-field">
              <span>资料分组</span>
              <select name="category" required>
                <option value="通风专业">通风专业</option>
                <option value="火灾防治">火灾防治</option>
                <option value="监测监控">监测监控</option>
                <option value="粉尘防治">粉尘防治</option>
                <option value="瓦斯防治">瓦斯防治</option>
                <option value="制度管理">制度管理</option>
              </select>
            </label>
          </div>

          <div class="upload-dialog-actions">
            <button class="secondary-button" type="button" data-edit-close>取消</button>
            <button class="primary-button" type="submit" id="businessEditSubmit">
              <span data-icon="check-circle-2"></span>保存修改
            </button>
          </div>
        </form>
      </section>
    </div>

    <div class="toast-container" id="toastContainer" aria-live="polite"></div>
  </body>
</html>