ddddzx
/
vent_ai_platform


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753175417551756175717581759176017611762176317641765176617671768176917701771177217731774177517761777177817791780178117821783178417851786178717881789179017911792179317941795179617971798179918001801180218031804180518061807180818091810181118121813181418151816181718181819182018211822182318241825182618271828182918301831183218331834183518361837183818391840184118421843184418451846184718481849185018511852185318541855
							<!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>
                    <div class="video-stream-note">
                      <span data-icon="circle-alert"></span>
                      <p id="videoStreamNote">视频流地址尚未配置，当前展示通道状态与控制界面。</p>
                    </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>