index.html 106 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695169616971698169917001701170217031704170517061707170817091710171117121713171417151716171717181719172017211722172317241725172617271728172917301731173217331734173517361737173817391740174117421743174417451746174717481749175017511752175317541755175617571758175917601761176217631764176517661767176817691770177117721773177417751776177717781779178017811782178317841785178617871788178917901791179217931794179517961797179817991800180118021803180418051806180718081809181018111812181318141815181618171818181918201821182218231824182518261827182818291830183118321833183418351836183718381839184018411842184318441845184618471848184918501851185218531854
  1. <!doctype html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6. <meta name="theme-color" content="#0d1b2a" />
  7. <title>矿安通防智能管控平台</title>
  8. <link rel="icon" href="./favicon.svg" type="image/svg+xml" />
  9. <link rel="stylesheet" href="./styles.css?v=20261013-hazard-agents2" />
  10. <script src="./api.js?v=20261013-hazard-agents2" defer></script>
  11. <script src="./app.js?v=20261013-hazard-agents2" defer></script>
  12. </head>
  13. <body class="api-loading">
  14. <div class="app-shell">
  15. <aside class="sidebar" id="sidebar">
  16. <div class="brand">
  17. <div class="brand-mark" aria-hidden="true">
  18. <span data-icon="wind"></span>
  19. </div>
  20. <div class="brand-copy">
  21. <strong>矿安通防</strong>
  22. <span>智能管控平台</span>
  23. </div>
  24. <button class="icon-button sidebar-close" id="sidebarClose" type="button" aria-label="关闭导航">
  25. <span data-icon="x"></span>
  26. </button>
  27. </div>
  28. <div class="mine-switcher" id="mineSwitcher">
  29. <div class="mine-switcher-button static">
  30. <span class="mine-icon" data-icon="mountain"></span>
  31. <span class="mine-copy">
  32. <small>当前矿井</small>
  33. <strong id="currentMine">上湾煤矿</strong>
  34. </span>
  35. </div>
  36. </div>
  37. <nav class="main-nav" aria-label="主导航">
  38. <p class="nav-label">业务工作台</p>
  39. <button class="nav-item active" type="button" data-view="dashboard">
  40. <span data-icon="layout-dashboard"></span>
  41. <span class="nav-text">综合驾驶舱</span>
  42. <span class="nav-dot danger"></span>
  43. </button>
  44. <button class="nav-item" type="button" data-view="data">
  45. <span data-icon="database"></span>
  46. <span class="nav-text">数据感知</span>
  47. <span class="nav-badge">2,486</span>
  48. </button>
  49. <button class="nav-item" type="button" data-view="knowledge">
  50. <span data-icon="book-open"></span>
  51. <span class="nav-text">知识中心</span>
  52. <span class="nav-badge">2,164</span>
  53. </button>
  54. <button class="nav-item" type="button" data-view="diagnosis">
  55. <span data-icon="scan-search"></span>
  56. <span class="nav-text">隐患识别</span>
  57. <span class="nav-badge alert">18</span>
  58. </button>
  59. <button class="nav-item" type="button" data-view="evaluation">
  60. <span data-icon="chart-no-axes-combined"></span>
  61. <span class="nav-text">综合评价</span>
  62. </button>
  63. <button class="nav-item" type="button" data-view="closed-loop">
  64. <span data-icon="workflow"></span>
  65. <span class="nav-text">闭环处置</span>
  66. <span class="nav-badge">7</span>
  67. </button>
  68. <p class="nav-label nav-label-secondary">平台管理</p>
  69. <button class="nav-item" type="button" data-view="settings">
  70. <span data-icon="settings"></span>
  71. <span class="nav-text">系统配置</span>
  72. </button>
  73. </nav>
  74. <div class="sidebar-status">
  75. <div class="status-head">
  76. <span class="live-dot"></span>
  77. <span>系统运行正常</span>
  78. <strong>99.98%</strong>
  79. </div>
  80. <div class="status-track"><span style="width: 96%"></span></div>
  81. <p>最近同步:刚刚</p>
  82. </div>
  83. </aside>
  84. <div class="sidebar-scrim" id="sidebarScrim"></div>
  85. <main class="workspace">
  86. <header class="topbar">
  87. <div class="topbar-title">
  88. <button class="icon-button mobile-menu" id="mobileMenu" type="button" aria-label="打开导航">
  89. <span data-icon="menu"></span>
  90. </button>
  91. <div>
  92. <div class="title-line">
  93. <h1 id="pageTitle">综合驾驶舱</h1>
  94. <span class="status-pill"><span class="live-dot"></span>实时运行</span>
  95. </div>
  96. <p id="pageSubtitle">汇聚通防业务数据,洞察矿井通风系统运行态势</p>
  97. </div>
  98. </div>
  99. <div class="topbar-actions">
  100. <label class="global-search">
  101. <span data-icon="search"></span>
  102. <input id="globalSearch" type="search" placeholder="搜索设备、风路、知识或告警" />
  103. <kbd>⌘ K</kbd>
  104. </label>
  105. <button class="icon-button notification-button" id="notificationButton" type="button" aria-label="通知">
  106. <span data-icon="bell"></span>
  107. <i></i>
  108. </button>
  109. <button class="user-menu" type="button">
  110. <span class="avatar">李</span>
  111. <span class="user-copy">
  112. <strong>李矿长</strong>
  113. <small>通防业务负责人</small>
  114. </span>
  115. <span data-icon="chevron-down"></span>
  116. </button>
  117. </div>
  118. <div class="notification-popover" id="notificationPopover">
  119. <div class="popover-head">
  120. <strong>消息通知</strong>
  121. <button type="button" id="markRead">全部已读</button>
  122. </div>
  123. <div class="notification-item unread">
  124. <span class="notice-icon danger" data-icon="triangle-alert"></span>
  125. <div>
  126. <strong>N1202 回风巷瓦斯浓度短时超限</strong>
  127. <p>建议核查局部通风机运行状态,2 分钟前</p>
  128. </div>
  129. </div>
  130. <div class="notification-item">
  131. <span class="notice-icon warning" data-icon="wind"></span>
  132. <div>
  133. <strong>2# 风门状态异常已恢复</strong>
  134. <p>系统已自动复核并归档,18 分钟前</p>
  135. </div>
  136. </div>
  137. </div>
  138. </header>
  139. <div class="app-loading" id="appLoading" role="status" aria-live="polite">
  140. <div class="app-loading-content">
  141. <span class="loading-spinner" aria-hidden="true"></span>
  142. <strong>正在加载业务数据</strong>
  143. </div>
  144. </div>
  145. <div class="content-area">
  146. <section class="view active" id="view-dashboard" data-title="综合驾驶舱" data-subtitle="汇聚通防业务数据,洞察矿井通风系统运行态势">
  147. <div class="context-bar">
  148. <div class="context-message">
  149. <span class="context-icon" data-icon="shield-check"></span>
  150. <div>
  151. <strong>系统运行总体平稳</strong>
  152. <p>当前识别 3 项高优先级风险,均已进入处置流程。</p>
  153. </div>
  154. </div>
  155. <div class="segmented-control" data-range-control>
  156. <button type="button" data-range="今日">今日</button>
  157. <button class="active" type="button" data-range="近7天">近7天</button>
  158. <button type="button" data-range="近30天">近30天</button>
  159. </div>
  160. </div>
  161. <div class="kpi-grid">
  162. <article class="kpi-card">
  163. <div class="kpi-head">
  164. <span class="kpi-icon teal" data-icon="database"></span>
  165. <span class="trend up"><span data-icon="arrow-up-right"></span> 3.2%</span>
  166. </div>
  167. <p>实时数据点</p>
  168. <strong><span class="metric-value" data-metric="points">2,486</span><small>点</small></strong>
  169. <div class="kpi-foot">
  170. <span>在线率 97.2%</span>
  171. <span class="mini-bars" aria-hidden="true"><i></i><i></i><i></i><i></i><i></i></span>
  172. </div>
  173. </article>
  174. <article class="kpi-card">
  175. <div class="kpi-head">
  176. <span class="kpi-icon red" data-icon="triangle-alert"></span>
  177. <span class="trend down">较昨日 -4</span>
  178. </div>
  179. <p>今日告警</p>
  180. <strong><span class="metric-value" data-metric="alerts">18</span><small>条</small></strong>
  181. <div class="kpi-foot">
  182. <span><b class="text-danger">3</b> 条高优先级</span>
  183. <span>闭环率 83%</span>
  184. </div>
  185. </article>
  186. <article class="kpi-card">
  187. <div class="kpi-head">
  188. <span class="kpi-icon amber" data-icon="scan-search"></span>
  189. <span class="trend up"><span data-icon="arrow-up-right"></span> 2.4%</span>
  190. </div>
  191. <p>诊断准确率</p>
  192. <strong><span class="metric-value" data-metric="accuracy">87.6</span><small>%</small></strong>
  193. <div class="kpi-foot">
  194. <span>五类场景平均</span>
  195. <span>样本 5,820</span>
  196. </div>
  197. </article>
  198. <article class="kpi-card">
  199. <div class="kpi-head">
  200. <span class="kpi-icon green" data-icon="award"></span>
  201. <span class="trend neutral">稳定</span>
  202. </div>
  203. <p>综合安全等级</p>
  204. <strong><span class="metric-value" data-metric="grade">A</span><small>级</small></strong>
  205. <div class="kpi-foot">
  206. <span>综合得分 <b class="text-success">92.8</b></span>
  207. <span>较上期 +1.6</span>
  208. </div>
  209. </article>
  210. </div>
  211. <div class="dashboard-grid">
  212. <article class="panel ventilation-panel">
  213. <div class="panel-head">
  214. <div>
  215. <span class="eyebrow">通风网络</span>
  216. <h2>矿井通风系统实时态势</h2>
  217. </div>
  218. <div class="panel-actions">
  219. <div class="map-legend">
  220. <span><i class="legend-dot normal"></i>正常</span>
  221. <span><i class="legend-dot warning"></i>预警</span>
  222. <span><i class="legend-dot danger"></i>异常</span>
  223. </div>
  224. <button class="icon-button small" type="button" aria-label="刷新通风网络" data-refresh>
  225. <span data-icon="refresh-cw"></span>
  226. </button>
  227. </div>
  228. </div>
  229. <div class="mine-map" id="mineMap">
  230. <div class="map-toolbar">
  231. <span><span class="live-dot"></span>数据更新于 10:42:16</span>
  232. <button type="button" data-map-layer="airflow"><span data-icon="wind"></span>风流</button>
  233. <button class="active" type="button" data-map-layer="sensors"><span data-icon="radio-tower"></span>测点</button>
  234. <button type="button" data-map-layer="facilities"><span data-icon="settings-2"></span>设施</button>
  235. </div>
  236. <svg class="ventilation-map" viewBox="0 0 900 470" role="img" aria-label="矿井通风网络拓扑图">
  237. <defs>
  238. <pattern id="mapGrid" width="32" height="32" patternUnits="userSpaceOnUse">
  239. <path d="M 32 0 L 0 0 0 32" fill="none" stroke="rgba(116, 151, 174, .12)" stroke-width="1" />
  240. </pattern>
  241. <filter id="softGlow">
  242. <feGaussianBlur stdDeviation="4" result="blur" />
  243. <feMerge>
  244. <feMergeNode in="blur" />
  245. <feMergeNode in="SourceGraphic" />
  246. </feMerge>
  247. </filter>
  248. <marker id="airArrow" markerWidth="8" markerHeight="8" refX="5" refY="3" orient="auto">
  249. <path d="M0,0 L0,6 L6,3 z" fill="#38bdf8" />
  250. </marker>
  251. </defs>
  252. <rect width="900" height="470" fill="url(#mapGrid)" />
  253. <g class="surface-labels">
  254. <text x="42" y="48">副井</text>
  255. <text x="814" y="48">回风井</text>
  256. <text x="420" y="42">北翼采区</text>
  257. <text x="424" y="438">南翼采区</text>
  258. </g>
  259. <g class="tunnel tertiary">
  260. <path d="M88 96 L246 96 L246 182 L452 182" />
  261. <path d="M88 376 L270 376 L270 300 L452 300" />
  262. <path d="M452 182 L664 182 L664 102 L808 102" />
  263. <path d="M452 300 L676 300 L676 378 L808 378" />
  264. <path d="M246 182 L246 300" />
  265. <path d="M664 182 L664 300" />
  266. </g>
  267. <g class="tunnel primary">
  268. <path d="M108 238 L788 238" />
  269. <path d="M246 96 L452 182 L788 238" />
  270. <path d="M270 376 L452 300 L788 238" />
  271. </g>
  272. <g class="air-flow" filter="url(#softGlow)">
  273. <path d="M108 238 L788 238" />
  274. <path d="M246 96 L452 182" />
  275. <path d="M270 376 L452 300" />
  276. </g>
  277. <g class="map-node normal" data-node="main-fan" tabindex="0" transform="translate(78 238)">
  278. <circle class="node-pulse" r="20" />
  279. <circle class="node-ring" r="14" />
  280. <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" />
  281. <text x="-8" y="35">主通风机</text>
  282. </g>
  283. <g class="map-node normal" data-node="intake" tabindex="0" transform="translate(246 96)">
  284. <circle class="node-pulse" r="15" />
  285. <circle class="node-ring" r="10" />
  286. <circle class="node-symbol" r="3" />
  287. <text x="-16" y="29">进风井</text>
  288. </g>
  289. <g class="map-node warning" data-node="air-gate" tabindex="0" transform="translate(452 182)">
  290. <circle class="node-pulse" r="17" />
  291. <circle class="node-ring" r="12" />
  292. <path class="node-symbol" d="M-5,-5 L5,5 M5,-5 L-5,5" />
  293. <text x="-21" y="32">2#调节风门</text>
  294. </g>
  295. <g class="map-node danger" data-node="gas" tabindex="0" transform="translate(664 182)">
  296. <circle class="node-pulse" r="18" />
  297. <circle class="node-ring" r="13" />
  298. <path class="node-symbol" d="M0,-6 L6,5 L-6,5 Z M0,-2 L0,2" />
  299. <text x="-25" y="33">N1202瓦斯</text>
  300. </g>
  301. <g class="map-node normal" data-node="north-face" tabindex="0" transform="translate(788 102)">
  302. <circle class="node-pulse" r="14" />
  303. <circle class="node-ring" r="9" />
  304. <circle class="node-symbol" r="3" />
  305. <text x="-29" y="28">N1201工作面</text>
  306. </g>
  307. <g class="map-node normal" data-node="air-volume" tabindex="0" transform="translate(452 300)">
  308. <circle class="node-pulse" r="15" />
  309. <circle class="node-ring" r="10" />
  310. <path class="node-symbol" d="M-6,0 L6,0 M0,-6 L0,6" />
  311. <text x="-27" y="31">S1301测风站</text>
  312. </g>
  313. <g class="map-node warning" data-node="dust" tabindex="0" transform="translate(676 378)">
  314. <circle class="node-pulse" r="17" />
  315. <circle class="node-ring" r="12" />
  316. <path class="node-symbol" d="M-6,-2 C-3,-6 3,-6 6,-2 C4,5 -4,5 -6,-2 Z" />
  317. <text x="-25" y="33">S1302粉尘</text>
  318. </g>
  319. <g class="map-node normal" data-node="return" tabindex="0" transform="translate(808 378)">
  320. <circle class="node-pulse" r="14" />
  321. <circle class="node-ring" r="9" />
  322. <circle class="node-symbol" r="3" />
  323. <text x="-29" y="28">回风井底</text>
  324. </g>
  325. </svg>
  326. <div class="map-detail" id="mapDetail">
  327. <div class="map-detail-head">
  328. <span class="detail-status danger"></span>
  329. <strong>N1202 瓦斯监测点</strong>
  330. <button type="button" aria-label="关闭节点详情" id="closeMapDetail"><span data-icon="x"></span></button>
  331. </div>
  332. <div class="map-detail-values">
  333. <div><span>瓦斯浓度</span><strong>0.86%</strong></div>
  334. <div><span>阈值</span><strong>0.80%</strong></div>
  335. <div><span>趋势</span><strong class="text-danger">上升</strong></div>
  336. </div>
  337. <p>已关联局部通风机 T-17 与 2# 调节风门,正在执行耦合诊断。</p>
  338. <button class="text-button" type="button" data-jump-view="diagnosis">查看诊断详情 <span data-icon="arrow-right"></span></button>
  339. </div>
  340. </div>
  341. </article>
  342. <article class="panel evaluation-panel">
  343. <div class="panel-head">
  344. <div>
  345. <span class="eyebrow">综合评价</span>
  346. <h2>通防业务健康度</h2>
  347. </div>
  348. <button class="text-button" type="button" data-jump-view="evaluation">查看报告</button>
  349. </div>
  350. <div class="score-overview">
  351. <div class="score-ring" style="--score: 92.8">
  352. <div>
  353. <strong>92.8</strong>
  354. <span>综合得分</span>
  355. </div>
  356. </div>
  357. <div class="grade-copy">
  358. <span class="grade-badge">A 级</span>
  359. <strong>运行状态优良</strong>
  360. <p>安全性与可靠性表现稳定,风量分配均衡度有提升空间。</p>
  361. </div>
  362. </div>
  363. <div class="score-list">
  364. <div class="score-row">
  365. <span>安全性</span><div><i style="width: 96%"></i></div><strong>96.2</strong>
  366. </div>
  367. <div class="score-row">
  368. <span>可靠性</span><div><i style="width: 91%"></i></div><strong>91.4</strong>
  369. </div>
  370. <div class="score-row">
  371. <span>经济性</span><div><i style="width: 84%"></i></div><strong>84.7</strong>
  372. </div>
  373. <div class="score-row">
  374. <span>管理合规</span><div><i style="width: 94%"></i></div><strong>94.1</strong>
  375. </div>
  376. <div class="score-row">
  377. <span>数据质量</span><div><i style="width: 89%"></i></div><strong>89.6</strong>
  378. </div>
  379. </div>
  380. </article>
  381. <article class="panel sensor-panel">
  382. <div class="panel-head">
  383. <div>
  384. <span class="eyebrow">实时感知</span>
  385. <h2>关键参数监测</h2>
  386. </div>
  387. <span class="subtle-badge"><span class="live-dot"></span>秒级刷新</span>
  388. </div>
  389. <div class="sensor-grid">
  390. <div class="sensor-metric">
  391. <div class="sensor-label"><span class="sensor-icon gas" data-icon="flame"></span><span>瓦斯浓度</span></div>
  392. <div class="sensor-value"><strong>0.86</strong><small>%CH₄</small><span class="trend down">+0.12</span></div>
  393. <svg class="sparkline danger-line" viewBox="0 0 180 42" preserveAspectRatio="none">
  394. <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" />
  395. <path d="M0,30 L20,29 L40,31 L60,22 L80,24 L100,17 L120,19 L140,12 L160,15 L180,6" />
  396. </svg>
  397. </div>
  398. <div class="sensor-metric">
  399. <div class="sensor-label"><span class="sensor-icon blue" data-icon="wind"></span><span>工作面风量</span></div>
  400. <div class="sensor-value"><strong>1,286</strong><small>m³/min</small><span class="trend up">稳定</span></div>
  401. <svg class="sparkline blue-line" viewBox="0 0 180 42" preserveAspectRatio="none">
  402. <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" />
  403. <path d="M0,15 L20,17 L40,14 L60,18 L80,16 L100,15 L120,18 L140,16 L160,17 L180,15" />
  404. </svg>
  405. </div>
  406. <div class="sensor-metric">
  407. <div class="sensor-label"><span class="sensor-icon amber" data-icon="cloud-dust"></span><span>粉尘浓度</span></div>
  408. <div class="sensor-value"><strong>4.2</strong><small>mg/m³</small><span class="trend neutral">正常</span></div>
  409. <svg class="sparkline amber-line" viewBox="0 0 180 42" preserveAspectRatio="none">
  410. <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" />
  411. <path d="M0,25 L20,27 L40,23 L60,26 L80,21 L100,24 L120,19 L140,22 L160,18 L180,20" />
  412. </svg>
  413. </div>
  414. </div>
  415. </article>
  416. <article class="panel diagnosis-panel">
  417. <div class="panel-head">
  418. <div>
  419. <span class="eyebrow">智能诊断</span>
  420. <h2>五类场景缺陷判识</h2>
  421. </div>
  422. <div class="panel-actions">
  423. <span class="subtle-badge">模型库 v2.6.1</span>
  424. <button class="text-button" type="button" data-jump-view="diagnosis">进入隐患识别中心 <span data-icon="arrow-right"></span></button>
  425. </div>
  426. </div>
  427. <div class="diagnosis-cards">
  428. <button class="diagnosis-card danger" type="button" data-jump-view="diagnosis">
  429. <span class="diagnosis-icon" data-icon="wind"></span>
  430. <span class="diagnosis-main"><strong>局部通风</strong><small>检测到 2 项异常</small></span>
  431. <span class="diagnosis-score">91.2%</span>
  432. <span class="diagnosis-trend danger">高风险</span>
  433. </button>
  434. <button class="diagnosis-card warning" type="button" data-jump-view="diagnosis">
  435. <span class="diagnosis-icon" data-icon="door-open"></span>
  436. <span class="diagnosis-main"><strong>通风设施</strong><small>风门状态不一致</small></span>
  437. <span class="diagnosis-score">88.7%</span>
  438. <span class="diagnosis-trend warning">需核查</span>
  439. </button>
  440. <button class="diagnosis-card normal" type="button" data-jump-view="diagnosis">
  441. <span class="diagnosis-icon" data-icon="network"></span>
  442. <span class="diagnosis-main"><strong>通风系统管理</strong><small>系统运行稳定</small></span>
  443. <span class="diagnosis-score">86.5%</span>
  444. <span class="diagnosis-trend normal">正常</span>
  445. </button>
  446. <button class="diagnosis-card warning" type="button" data-jump-view="diagnosis">
  447. <span class="diagnosis-icon" data-icon="gauge"></span>
  448. <span class="diagnosis-main"><strong>风量分配</strong><small>1 个用风点偏小</small></span>
  449. <span class="diagnosis-score">89.3%</span>
  450. <span class="diagnosis-trend warning">需关注</span>
  451. </button>
  452. <button class="diagnosis-card danger" type="button" data-jump-view="diagnosis">
  453. <span class="diagnosis-icon" data-icon="shield-alert"></span>
  454. <span class="diagnosis-main"><strong>灾害防治</strong><small>瓦斯浓度越限</small></span>
  455. <span class="diagnosis-score">92.6%</span>
  456. <span class="diagnosis-trend danger">高风险</span>
  457. </button>
  458. </div>
  459. </article>
  460. <article class="panel knowledge-panel">
  461. <div class="panel-head">
  462. <div>
  463. <span class="eyebrow">知识中心</span>
  464. <h2>通防知识智能问答</h2>
  465. </div>
  466. <span class="knowledge-count">2,164 条知识</span>
  467. </div>
  468. <form class="knowledge-search" id="dashboardKnowledgeForm">
  469. <span data-icon="sparkles"></span>
  470. <textarea name="question" rows="1" data-max-height="74" placeholder="询问规程、案例或处置建议..."></textarea>
  471. <button type="submit" aria-label="发送问题"><span data-icon="arrow-up"></span></button>
  472. </form>
  473. <div class="prompt-chips">
  474. <button type="button" data-question="瓦斯超限如何处置?">瓦斯超限如何处置?</button>
  475. <button type="button" data-question="局部通风机循环风判定标准">循环风判定标准</button>
  476. <button type="button" data-question="风门漏风有哪些排查要点?">风门漏风排查</button>
  477. </div>
  478. <div class="answer-preview" id="answerPreview">
  479. <div class="answer-head"><span data-icon="bot"></span><strong>通防知识助手</strong><span>基于 3 条依据回答</span></div>
  480. <p>瓦斯浓度超限后,应立即停止作业、切断电源、撤出人员,并核查局部通风机与风筒状态。处置完成后,需复测并形成闭环记录。</p>
  481. <div class="answer-sources">
  482. <span>《煤矿安全规程》第 173 条</span>
  483. <span>瓦斯超限处置案例 2024-018</span>
  484. </div>
  485. </div>
  486. </article>
  487. <article class="panel tasks-panel">
  488. <div class="panel-head">
  489. <div>
  490. <span class="eyebrow">整改闭环</span>
  491. <h2>待处置任务</h2>
  492. </div>
  493. <button class="text-button" type="button" data-jump-view="closed-loop">全部任务 <span data-icon="arrow-right"></span></button>
  494. </div>
  495. <div class="task-list">
  496. <button class="task-row" type="button" data-jump-view="closed-loop">
  497. <span class="task-priority high">高</span>
  498. <span class="task-main"><strong>N1202 回风巷瓦斯超限处置</strong><small>责任人:王强 · 剩余 01:26:18</small></span>
  499. <span class="task-state processing">处理中</span>
  500. <span data-icon="chevron-right"></span>
  501. </button>
  502. <button class="task-row" type="button" data-jump-view="closed-loop">
  503. <span class="task-priority medium">中</span>
  504. <span class="task-main"><strong>2# 调节风门状态复核</strong><small>责任人:赵磊 · 剩余 03:42:00</small></span>
  505. <span class="task-state pending">待确认</span>
  506. <span data-icon="chevron-right"></span>
  507. </button>
  508. <button class="task-row" type="button" data-jump-view="closed-loop">
  509. <span class="task-priority medium">中</span>
  510. <span class="task-main"><strong>S1301 工作面风量复测</strong><small>责任人:刘伟 · 剩余 05:10:00</small></span>
  511. <span class="task-state processing">处理中</span>
  512. <span data-icon="chevron-right"></span>
  513. </button>
  514. <button class="task-row" type="button" data-jump-view="closed-loop">
  515. <span class="task-priority low">低</span>
  516. <span class="task-main"><strong>月度通防资料完整性检查</strong><small>责任人:陈晨 · 剩余 1 天</small></span>
  517. <span class="task-state pending">待确认</span>
  518. <span data-icon="chevron-right"></span>
  519. </button>
  520. </div>
  521. </article>
  522. </div>
  523. </section>
  524. <section class="view" id="view-data" data-title="数据感知" data-subtitle="统一接入业务资料、监测数据、视频监控与通防设施工况">
  525. <div class="view-toolbar">
  526. <div class="toolbar-copy">
  527. <span class="toolbar-icon" data-icon="database"></span>
  528. <div><strong>数据接入总览</strong><p>当前接入 12 类数据源,数据完整率 98.4%</p></div>
  529. </div>
  530. <div class="toolbar-actions">
  531. <button class="secondary-button" type="button" data-open-upload><span data-icon="upload"></span>导入资料</button>
  532. <button class="primary-button" type="button" data-toast="数据源配置面板已打开"><span data-icon="plus"></span>新增数据源</button>
  533. </div>
  534. </div>
  535. <div class="source-grid">
  536. <article class="source-card">
  537. <div class="source-head"><span class="source-icon teal" data-icon="database"></span><span class="source-status online">实时</span></div>
  538. <strong>安全监控系统</strong>
  539. <p>瓦斯、风速、温度、CO 等监测点</p>
  540. <div class="source-foot"><span>1,286 点</span><span>延迟 2.4s</span></div>
  541. </article>
  542. <article class="source-card">
  543. <div class="source-head"><span class="source-icon blue" data-icon="video"></span><span class="source-status online">在线</span></div>
  544. <strong>工业视频监控</strong>
  545. <p>覆盖风门、局部通风、采掘工作面</p>
  546. <div class="source-foot"><span>218 路</span><span>识别 12 类</span></div>
  547. </article>
  548. <article class="source-card">
  549. <div class="source-head"><span class="source-icon amber" data-icon="settings-2"></span><span class="source-status online">在线</span></div>
  550. <strong>通防设施工况</strong>
  551. <p>风门、风窗、密闭、局部通风机</p>
  552. <div class="source-foot"><span>486 台</span><span>在线率 96.8%</span></div>
  553. </article>
  554. <button class="source-card source-card-button" type="button" data-open-business aria-label="打开业务资料页面">
  555. <div class="source-head"><span class="source-icon purple" data-icon="file-text"></span><span class="source-status sync">同步中</span></div>
  556. <strong>业务资料</strong>
  557. <p>规程、措施、报表、台账与验收资料</p>
  558. <div class="source-foot"><span>7,280 份</span><span>抽取 12,406 字段</span></div>
  559. </button>
  560. </div>
  561. <div class="two-column-grid">
  562. <article class="panel">
  563. <div class="panel-head">
  564. <div><span class="eyebrow">数据质量</span><h2>数据治理监控</h2></div>
  565. <span class="subtle-badge success"><span class="live-dot"></span>质量达标</span>
  566. </div>
  567. <div class="quality-list">
  568. <div class="quality-row">
  569. <span><i class="quality-dot teal"></i>完整性</span>
  570. <div class="quality-track"><i style="width: 98.4%"></i></div>
  571. <strong>98.4%</strong>
  572. </div>
  573. <div class="quality-row">
  574. <span><i class="quality-dot blue"></i>及时性</span>
  575. <div class="quality-track"><i style="width: 96.7%"></i></div>
  576. <strong>96.7%</strong>
  577. </div>
  578. <div class="quality-row">
  579. <span><i class="quality-dot amber"></i>一致性</span>
  580. <div class="quality-track"><i style="width: 94.2%"></i></div>
  581. <strong>94.2%</strong>
  582. </div>
  583. <div class="quality-row">
  584. <span><i class="quality-dot purple"></i>有效性</span>
  585. <div class="quality-track"><i style="width: 97.1%"></i></div>
  586. <strong>97.1%</strong>
  587. </div>
  588. </div>
  589. <div class="quality-alert">
  590. <span data-icon="circle-alert"></span>
  591. <div><strong>发现 16 条待处理数据问题</strong><p>主要集中在风量报表字段缺失,已生成治理任务。</p></div>
  592. <button class="text-button" type="button">查看</button>
  593. </div>
  594. </article>
  595. <article class="panel">
  596. <div class="panel-head">
  597. <div><span class="eyebrow">智能抽取</span><h2>业务资料处理任务</h2></div>
  598. <button class="text-button" type="button" data-open-processing-records>处理记录 <span data-icon="arrow-right"></span></button>
  599. </div>
  600. <div class="extraction-list" id="documentProcessingTaskList">
  601. <div class="business-document-note">
  602. <span data-icon="refresh-cw"></span>
  603. <p>正在加载资料处理任务。</p>
  604. </div>
  605. </div>
  606. </article>
  607. </div>
  608. <article class="panel">
  609. <div class="panel-head">
  610. <div><span class="eyebrow">数据资产</span><h2>统一数据对象</h2></div>
  611. <div class="panel-actions"><span class="subtle-badge">共 18,620 个对象</span></div>
  612. </div>
  613. <div class="object-grid">
  614. <div class="object-card"><span data-icon="mountain"></span><strong>矿井</strong><b>3</b><small>3 个生产矿井</small></div>
  615. <div class="object-card"><span data-icon="pickaxe"></span><strong>采掘工作面</strong><b>18</b><small>全部完成挂接</small></div>
  616. <div class="object-card"><span data-icon="route"></span><strong>巷道</strong><b>286</b><small>已建立拓扑关系</small></div>
  617. <div class="object-card"><span data-icon="radio-tower"></span><strong>传感器</strong><b>2,486</b><small>在线率 97.2%</small></div>
  618. <div class="object-card"><span data-icon="door-open"></span><strong>通风设施</strong><b>486</b><small>含风门、风窗、密闭</small></div>
  619. </div>
  620. </article>
  621. </section>
  622. <section class="view" id="view-facility-status" data-title="通防设施工况" data-subtitle="按设备类别查看通风设施运行、报警和断开状态">
  623. <div class="view-toolbar">
  624. <div class="toolbar-copy">
  625. <button class="icon-button" type="button" data-back-view="data" aria-label="返回数据感知">
  626. <span data-icon="arrow-left"></span>
  627. </button>
  628. <div>
  629. <strong>通防设备总览</strong>
  630. <p>按设备类别汇总总数、报警数和断开数</p>
  631. </div>
  632. </div>
  633. <div class="toolbar-actions">
  634. <span class="subtle-badge"><span class="live-dot"></span>实时工况</span>
  635. <button class="secondary-button" type="button" data-refresh-facility>
  636. <span data-icon="refresh-cw"></span>刷新
  637. </button>
  638. </div>
  639. </div>
  640. <div class="facility-overview-banner">
  641. <div>
  642. <span class="eyebrow">Facility Operations</span>
  643. <h2>通防设备运行总览</h2>
  644. <p id="facilityOverviewText">正在汇总设备运行、报警和断开状态。</p>
  645. </div>
  646. <div class="facility-overview-meta">
  647. <span class="facility-live-state"><span class="live-dot"></span>实时工况</span>
  648. <strong>设备状态汇总</strong>
  649. <small>状态按设备类别归集</small>
  650. </div>
  651. </div>
  652. <div class="facility-summary-grid" id="facilitySummaryGrid"></div>
  653. <div class="facility-layout">
  654. <div class="facility-category-panel">
  655. <div class="facility-section-head">
  656. <div>
  657. <span class="eyebrow">设备分类</span>
  658. <h2>通防设备类别</h2>
  659. </div>
  660. <span class="subtle-badge" id="facilityCategoryCount">13 类</span>
  661. </div>
  662. <div class="facility-category-grid" id="facilityCategoryGrid"></div>
  663. </div>
  664. <article class="panel facility-detail-panel" id="facilityDetailPanel">
  665. <div class="business-document-note">
  666. <span data-icon="settings-2"></span>
  667. <p>请选择左侧设备类别查看详情。</p>
  668. </div>
  669. </article>
  670. </div>
  671. </section>
  672. <section class="view" id="view-safety-monitoring" data-title="KJ 安全监控系统" data-subtitle="通防监测数据接入、实时曲线与智能趋势预测">
  673. <div class="view-toolbar">
  674. <div class="toolbar-copy">
  675. <button class="icon-button" type="button" data-back-view="data" aria-label="返回数据感知">
  676. <span data-icon="arrow-left"></span>
  677. </button>
  678. <div>
  679. <strong>KJ 安全监控系统</strong>
  680. <p id="safetyMonitoringToolbarText">瓦斯、风量、粉尘、CO、温度等通防监测数据</p>
  681. </div>
  682. </div>
  683. <div class="toolbar-actions">
  684. <span class="subtle-badge success"><span class="live-dot"></span>数据接入正常</span>
  685. <button class="secondary-button" type="button" data-refresh-safety-monitoring>
  686. <span data-icon="refresh-cw"></span>刷新数据
  687. </button>
  688. </div>
  689. </div>
  690. <div class="safety-overview-strip">
  691. <div class="safety-overview-copy">
  692. <span class="eyebrow">Monitoring Network</span>
  693. <h2>通防安全监测运行总览</h2>
  694. <p id="safetyOverviewText">正在读取安全监控系统数据。</p>
  695. </div>
  696. <div class="safety-overview-status">
  697. <span class="live-dot"></span>
  698. <div><strong id="safetyOverviewSource">KJ-SAFETY</strong><small id="safetyOverviewProtocol">OPC UA · 实时接入</small></div>
  699. </div>
  700. </div>
  701. <div class="safety-summary-grid" id="safetyMonitoringSummary"></div>
  702. <div class="safety-monitoring-layout">
  703. <article class="panel safety-chart-panel">
  704. <div class="safety-chart-head">
  705. <div>
  706. <span class="eyebrow">实时趋势</span>
  707. <h2 id="safetyChartTitle">甲烷浓度</h2>
  708. <p id="safetyChartSubtitle">监测点数据与未来 2 小时趋势预测</p>
  709. </div>
  710. <div class="safety-chart-current">
  711. <span>当前值</span>
  712. <strong id="safetyCurrentValue">--</strong>
  713. <small id="safetyCurrentUnit"></small>
  714. </div>
  715. </div>
  716. <div class="safety-chart-toolbar">
  717. <div class="safety-metric-tabs" id="safetyMetricTabs"></div>
  718. <div class="segmented-control" aria-label="曲线时间范围">
  719. <button type="button" data-safety-range="6">6 小时</button>
  720. <button type="button" data-safety-range="12">12 小时</button>
  721. <button class="active" type="button" data-safety-range="24">24 小时</button>
  722. </div>
  723. </div>
  724. <div class="safety-chart-shell" id="safetyMonitoringChart"></div>
  725. <div class="safety-chart-legend">
  726. <span><i class="actual"></i>实际监测值</span>
  727. <span><i class="forecast"></i>趋势预测</span>
  728. <span><i class="threshold"></i>报警阈值</span>
  729. </div>
  730. </article>
  731. <aside class="panel safety-insight-panel">
  732. <div class="panel-head">
  733. <div><span class="eyebrow">智能分析</span><h2>风险趋势研判</h2></div>
  734. <span class="subtle-badge" id="safetyPredictionConfidence">置信度 --</span>
  735. </div>
  736. <div class="safety-risk-summary">
  737. <div class="safety-risk-ring" id="safetyRiskRing">
  738. <strong id="safetyRiskScore">--</strong>
  739. <small>风险指数</small>
  740. </div>
  741. <div>
  742. <span class="safety-risk-label" id="safetyRiskLabel">分析中</span>
  743. <p id="safetyRiskSummary">正在评估监测趋势与阈值余量。</p>
  744. </div>
  745. </div>
  746. <div class="safety-insight-block">
  747. <span data-icon="trending-up"></span>
  748. <div>
  749. <strong>趋势预测</strong>
  750. <p id="safetyPredictionText">正在计算未来 2 小时变化趋势。</p>
  751. </div>
  752. </div>
  753. <div class="safety-recommendations" id="safetyRecommendations"></div>
  754. </aside>
  755. </div>
  756. <div class="safety-bottom-grid">
  757. <article class="panel">
  758. <div class="panel-head">
  759. <div><span class="eyebrow">接入测点</span><h2>监测点运行状态</h2></div>
  760. <span class="subtle-badge" id="safetySensorCount">-- 个测点</span>
  761. </div>
  762. <div class="safety-sensor-list" id="safetySensorList"></div>
  763. </article>
  764. <article class="panel">
  765. <div class="panel-head">
  766. <div><span class="eyebrow">异常事件</span><h2>实时告警</h2></div>
  767. <span class="subtle-badge" id="safetyAlarmCount">-- 条</span>
  768. </div>
  769. <div class="safety-alarm-list" id="safetyAlarmList"></div>
  770. </article>
  771. </div>
  772. </section>
  773. <section class="view" id="view-video-platform" data-title="工业视频平台" data-subtitle="通道管理、实时视频、分屏预览与智能识别事件">
  774. <div class="view-toolbar">
  775. <div class="toolbar-copy">
  776. <button class="icon-button" type="button" data-back-view="data" aria-label="返回数据感知">
  777. <span data-icon="arrow-left"></span>
  778. </button>
  779. <div>
  780. <strong>工业视频平台</strong>
  781. <p id="videoPlatformToolbarText">正在读取视频通道与识别事件</p>
  782. </div>
  783. </div>
  784. <div class="toolbar-actions">
  785. <span class="subtle-badge success"><span class="live-dot"></span>视频服务在线</span>
  786. <button class="secondary-button" type="button" data-refresh-video-platform>
  787. <span data-icon="refresh-cw"></span>刷新
  788. </button>
  789. </div>
  790. </div>
  791. <div class="video-summary-grid" id="videoSummaryGrid"></div>
  792. <div class="video-module-tabs" id="videoModuleTabs">
  793. <button class="active" type="button" data-video-module="door"><span data-icon="door-open"></span>风门</button>
  794. <button type="button" data-video-module="local-fan"><span data-icon="wind"></span>局部风机</button>
  795. <button type="button" data-video-module="main-fan"><span data-icon="settings"></span>主风机及配电室</button>
  796. </div>
  797. <div class="video-platform-layout">
  798. <aside class="panel video-device-panel">
  799. <div class="panel-head">
  800. <div><span class="eyebrow">通道目录</span><h2>视频设备树</h2></div>
  801. <span class="subtle-badge" id="videoChannelCount">-- 路</span>
  802. </div>
  803. <label class="video-channel-search">
  804. <span data-icon="search"></span>
  805. <input id="videoChannelSearch" type="search" placeholder="搜索通道或安装地点" />
  806. </label>
  807. <div class="video-device-tree" id="videoDeviceTree"></div>
  808. </aside>
  809. <div class="video-main-column">
  810. <div class="video-primary-layout">
  811. <article class="panel video-wall-panel">
  812. <div class="panel-head">
  813. <div><span class="eyebrow">实时监控</span><h2 id="videoWallTitle">双画面监控</h2></div>
  814. <div class="segmented-control video-layout-control" aria-label="视频分屏布局">
  815. <button type="button" data-video-layout="1">单画面</button>
  816. <button class="active" type="button" data-video-layout="2">双画面</button>
  817. <button type="button" data-video-layout="4">四分屏</button>
  818. <button type="button" data-video-layout="6">六分屏</button>
  819. <button type="button" data-video-layout="9">九分屏</button>
  820. </div>
  821. </div>
  822. <div class="video-wall layout-2" id="videoWall"></div>
  823. <div class="video-stream-note">
  824. <span data-icon="circle-alert"></span>
  825. <p id="videoStreamNote">视频流地址尚未配置,当前展示通道状态与控制界面。</p>
  826. </div>
  827. </article>
  828. </div>
  829. </div>
  830. </div>
  831. <div class="video-insight-row">
  832. <article class="panel video-status-panel">
  833. <div class="panel-head">
  834. <div><span class="eyebrow">状态总览</span><h2 id="videoStatusTitle">风门状态总览</h2></div>
  835. </div>
  836. <div class="video-status-grid" id="videoStatusOverview"></div>
  837. </article>
  838. <article class="panel video-event-panel">
  839. <div class="panel-head">
  840. <div><span class="eyebrow">实时告警</span><h2>视频分析事件</h2></div>
  841. <span class="subtle-badge" id="videoEventCount">-- 条</span>
  842. </div>
  843. <div class="video-event-list" id="videoEventList"></div>
  844. </article>
  845. <article class="panel video-records-panel">
  846. <div class="panel-head">
  847. <div><span class="eyebrow">通行与操作记录</span><h2 id="videoRecordTitle">车辆通行记录</h2></div>
  848. </div>
  849. <div class="video-record-tabs" id="videoRecordTabs"></div>
  850. <div class="video-record-table" id="videoRecordsTable"></div>
  851. </article>
  852. </div>
  853. <div class="video-bottom-layout">
  854. <article class="panel video-thumbnail-panel">
  855. <div class="panel-head">
  856. <div><span class="eyebrow">历史画面</span><h2>识别抓拍</h2></div>
  857. <span class="subtle-badge" id="videoThumbnailCount">-- 张</span>
  858. </div>
  859. <div class="video-filter-bar video-filter-bar-inline">
  860. <label><span>时间范围</span><input type="datetime-local" value="2026-10-13T00:00" /></label>
  861. <span class="video-filter-separator">至</span>
  862. <label><input type="datetime-local" value="2026-10-13T11:42" /></label>
  863. <button type="button" data-video-quick-range="today">今日</button>
  864. <button type="button" data-video-quick-range="week">近7天</button>
  865. <label><span id="videoRecordFilterLabel">告警类型</span><select id="videoRecordType">
  866. <option>全部类型</option>
  867. <option>AI防夹人预警</option>
  868. <option>异物卡堵预警</option>
  869. <option>密封失效故障</option>
  870. <option>违规停留预警</option>
  871. <option>风门未关严</option>
  872. <option>车辆撞击故障</option>
  873. </select></label>
  874. <label><span id="videoScopeFilterLabel">操作类型</span><select id="videoDeviceScope">
  875. <option>全部操作</option>
  876. <option>风机调频</option>
  877. <option>风机切换</option>
  878. <option>参数调整</option>
  879. <option>复位操作</option>
  880. </select></label>
  881. <div class="video-filter-actions">
  882. <button class="primary-button" type="button" data-video-search><span data-icon="search"></span>一键检索</button>
  883. <button class="secondary-button" type="button" data-video-reset><span data-icon="refresh-cw"></span>重置</button>
  884. </div>
  885. </div>
  886. <div class="video-thumbnail-grid" id="videoThumbnailGrid"></div>
  887. </article>
  888. </div>
  889. </section>
  890. <section class="view" id="view-business-data" data-title="业务资料" data-subtitle="统一管理规程、措施、报表、台账与验收资料,实现资料智能抽取与全文检索">
  891. <div class="view-toolbar">
  892. <div class="toolbar-copy">
  893. <button class="icon-button" type="button" data-back-view="data" aria-label="返回数据感知">
  894. <span data-icon="arrow-left"></span>
  895. </button>
  896. <div>
  897. <strong>业务资料库</strong>
  898. <p>已接入 7,280 份资料,关键字段抽取平均准确率 85.7%</p>
  899. </div>
  900. </div>
  901. <div class="toolbar-actions">
  902. <button class="secondary-button" type="button" data-export-documents><span data-icon="download"></span>导出资料清单</button>
  903. <button class="primary-button" type="button" data-open-upload><span data-icon="upload"></span>上传资料</button>
  904. </div>
  905. </div>
  906. <div class="business-kpi-grid">
  907. <article class="business-kpi-card">
  908. <span class="business-kpi-icon purple" data-icon="file-text"></span>
  909. <div><strong data-business-kpi="total">7,280</strong><p>业务资料总数</p></div>
  910. <small data-business-kpi-hint="total">本月新增 126 份</small>
  911. </article>
  912. <article class="business-kpi-card">
  913. <span class="business-kpi-icon teal" data-icon="scan-search"></span>
  914. <div><strong data-business-kpi="fields">12,406</strong><p>已抽取关键字段</p></div>
  915. <small data-business-kpi-hint="fields">字段完整率 96.2%</small>
  916. </article>
  917. <article class="business-kpi-card">
  918. <span class="business-kpi-icon blue" data-icon="activity"></span>
  919. <div><strong data-business-kpi="accuracy">85.7%</strong><p>字段抽取准确率</p></div>
  920. <small data-business-kpi-hint="accuracy">较上月提升 2.1%</small>
  921. </article>
  922. <article class="business-kpi-card">
  923. <span class="business-kpi-icon amber" data-icon="refresh-cw"></span>
  924. <div><strong data-business-kpi="pending">18</strong><p>待处理抽取任务</p></div>
  925. <small data-business-kpi-hint="pending">预计 36 分钟完成</small>
  926. </article>
  927. </div>
  928. <div class="business-data-layout">
  929. <aside class="panel business-category-panel">
  930. <div class="panel-head">
  931. <div><span class="eyebrow">资料分类</span><h2>资料目录</h2></div>
  932. <span class="subtle-badge">6 类</span>
  933. </div>
  934. <div class="business-category-list" id="businessCategoryList">
  935. <button class="active" type="button" data-doc-category="all"><span><i data-icon="folder"></i>全部资料</span><b>7,280</b></button>
  936. <button type="button" data-doc-category="通风专业"><span><i data-icon="wind"></i>通风专业</span><b>1,686</b></button>
  937. <button type="button" data-doc-category="火灾防治"><span><i data-icon="flame"></i>火灾防治</span><b>986</b></button>
  938. <button type="button" data-doc-category="监测监控"><span><i data-icon="radio-tower"></i>监测监控</span><b>1,452</b></button>
  939. <button type="button" data-doc-category="粉尘防治"><span><i data-icon="cloud-dust"></i>粉尘防治</span><b>1,178</b></button>
  940. <button type="button" data-doc-category="瓦斯防治"><span><i data-icon="gauge"></i>瓦斯防治</span><b>1,324</b></button>
  941. <button type="button" data-doc-category="制度管理"><span><i data-icon="book-open"></i>制度管理</span><b>654</b></button>
  942. </div>
  943. <div class="business-storage">
  944. <div class="business-storage-head"><span>资料库空间</span><strong data-storage-percent>--</strong></div>
  945. <div class="business-storage-track"><i data-storage-bar style="width: 0%"></i></div>
  946. <p data-storage-usage>正在统计存储空间</p>
  947. </div>
  948. </aside>
  949. <article class="panel business-list-panel">
  950. <div class="panel-head">
  951. <div><span class="eyebrow">资料清单</span><h2>可检索资料</h2></div>
  952. <span class="subtle-badge success"><span class="live-dot"></span>索引已更新</span>
  953. </div>
  954. <label class="document-search">
  955. <span data-icon="search"></span>
  956. <input id="businessDocumentSearch" type="search" placeholder="全文检索资料名称、正文、字段和责任人" />
  957. <button type="button" aria-label="筛选资料"><span data-icon="filter"></span></button>
  958. </label>
  959. <div class="document-list" id="businessDocumentList">
  960. <button class="document-row active" type="button" data-document-id="n1202" data-category="通风专业">
  961. <span class="document-type pdf">PDF</span>
  962. <span class="document-main">
  963. <strong>N1202 工作面通风安全技术措施</strong>
  964. <small>编号 TF-CS-2026-086 · 42 页 · 王强</small>
  965. </span>
  966. <span class="document-extraction success"><i></i>抽取完成</span>
  967. <span class="document-fields"><b>86</b><small>字段</small></span>
  968. <span data-icon="chevron-right"></span>
  969. </button>
  970. <button class="document-row" type="button" data-document-id="resistance" data-category="通风专业">
  971. <span class="document-type doc">DOC</span>
  972. <span class="document-main">
  973. <strong>2026 年 9 月通风阻力测定报告</strong>
  974. <small>编号 TF-BB-2026-091 · 28 页 · 赵磊</small>
  975. </span>
  976. <span class="document-extraction success"><i></i>抽取完成</span>
  977. <span class="document-fields"><b>63</b><small>字段</small></span>
  978. <span data-icon="chevron-right"></span>
  979. </button>
  980. <button class="document-row" type="button" data-document-id="airlog" data-category="监测监控">
  981. <span class="document-type xls">XLS</span>
  982. <span class="document-main">
  983. <strong>矿井测风记录日报表</strong>
  984. <small>编号 TF-BB-2026-092 · 1,240 行 · 刘伟</small>
  985. </span>
  986. <span class="document-extraction running"><i></i>抽取中 76%</span>
  987. <span class="document-fields"><b>318</b><small>数据项</small></span>
  988. <span data-icon="chevron-right"></span>
  989. </button>
  990. <button class="document-row" type="button" data-document-id="s1302" data-category="粉尘防治">
  991. <span class="document-type pdf">PDF</span>
  992. <span class="document-main">
  993. <strong>S1302 工作面综合防尘设计</strong>
  994. <small>编号 TF-SJ-2026-034 · 36 页 · 陈晨</small>
  995. </span>
  996. <span class="document-extraction pending"><i></i>等待解析</span>
  997. <span class="document-fields"><b>52</b><small>字段</small></span>
  998. <span data-icon="chevron-right"></span>
  999. </button>
  1000. <button class="document-row" type="button" data-document-id="regulation" data-category="制度管理">
  1001. <span class="document-type pdf">PDF</span>
  1002. <span class="document-main">
  1003. <strong>矿井通风管理制度汇编</strong>
  1004. <small>编号 TF-GC-2026-012 · 118 页 · 周洋</small>
  1005. </span>
  1006. <span class="document-extraction success"><i></i>抽取完成</span>
  1007. <span class="document-fields"><b>146</b><small>字段</small></span>
  1008. <span data-icon="chevron-right"></span>
  1009. </button>
  1010. <button class="document-row" type="button" data-document-id="acceptance" data-category="通风专业">
  1011. <span class="document-type doc">DOC</span>
  1012. <span class="document-main">
  1013. <strong>南翼通风系统调整验收资料</strong>
  1014. <small>编号 TF-YS-2026-021 · 22 页 · 孙敏</small>
  1015. </span>
  1016. <span class="document-extraction success"><i></i>抽取完成</span>
  1017. <span class="document-fields"><b>47</b><small>字段</small></span>
  1018. <span data-icon="chevron-right"></span>
  1019. </button>
  1020. </div>
  1021. <div class="document-list-footer">
  1022. <span>共 7,280 份资料</span>
  1023. <div><button type="button">上一页</button><button class="active" type="button">1</button><button type="button">2</button><button type="button">下一页</button></div>
  1024. </div>
  1025. </article>
  1026. <aside class="panel business-detail-panel" id="businessDetailPanel"></aside>
  1027. </div>
  1028. </section>
  1029. <section class="view" id="view-knowledge" data-title="通防知识中心" data-subtitle="融合规范标准、事故案例与专家经验,实现知识检索与智能问答">
  1030. <div class="knowledge-hero">
  1031. <div class="knowledge-hero-copy">
  1032. <span class="eyebrow">Knowledge Copilot</span>
  1033. <h2>通防专业知识助手</h2>
  1034. <p>基于 2,164 条领域知识,结合知识图谱与混合检索,为业务处置提供可追溯的答案。</p>
  1035. </div>
  1036. <div class="knowledge-hero-stats">
  1037. <div><strong>2,164</strong><span>知识条目</span></div>
  1038. <div><strong>84.6%</strong><span>检索召回率</span></div>
  1039. <div><strong>1.2s</strong><span>平均响应</span></div>
  1040. </div>
  1041. </div>
  1042. <form class="knowledge-console" id="knowledgeConsoleForm">
  1043. <span class="console-icon" data-icon="search"></span>
  1044. <textarea name="question" rows="1" data-max-height="96" placeholder="输入通防业务问题,例如:局部通风机停风后应该如何处置?"></textarea>
  1045. <button class="primary-button" type="submit"><span data-icon="sparkles"></span>智能回答</button>
  1046. </form>
  1047. <div class="two-column-grid knowledge-grid">
  1048. <article class="panel knowledge-answer-panel" id="knowledgeAnswerPanel">
  1049. <div class="panel-head">
  1050. <div><span class="eyebrow">智能问答</span><h2>回答与依据</h2></div>
  1051. <span class="subtle-badge success">知识溯源已开启</span>
  1052. </div>
  1053. <div class="ai-answer">
  1054. <div class="ai-avatar"><span data-icon="bot"></span></div>
  1055. <div class="ai-answer-body">
  1056. <p>局部通风机停风后,应当立即停止作业、撤出人员、切断电源,并设置栅栏和警示标志。恢复通风前,必须先检查瓦斯浓度,确认停风区域瓦斯浓度符合规定后,方可启动局部通风机。</p>
  1057. <div class="answer-steps">
  1058. <div><span>1</span><p>停止作业并撤出受影响区域人员</p></div>
  1059. <div><span>2</span><p>切断电源,设置栅栏与警示标志</p></div>
  1060. <div><span>3</span><p>检查瓦斯与风筒状态,确认条件后恢复通风</p></div>
  1061. </div>
  1062. <div class="source-citations">
  1063. <button type="button"><span data-icon="file-text"></span>《煤矿安全规程》第 164 条 <b>96%</b></button>
  1064. <button type="button"><span data-icon="file-text"></span>局部通风机停风处置案例 2024-032 <b>91%</b></button>
  1065. <button type="button"><span data-icon="file-text"></span>《局部通风管理标准》第 4.2 节 <b>88%</b></button>
  1066. </div>
  1067. </div>
  1068. </div>
  1069. </article>
  1070. <article class="panel">
  1071. <div class="panel-head">
  1072. <div><span class="eyebrow">知识图谱</span><h2>风险关联关系</h2></div>
  1073. <button class="icon-button small" type="button" aria-label="展开知识图谱"><span data-icon="maximize-2"></span></button>
  1074. </div>
  1075. <div class="graph-canvas">
  1076. <svg viewBox="0 0 560 360" role="img" aria-label="通防风险知识图谱">
  1077. <defs>
  1078. <marker id="graphArrow" markerWidth="8" markerHeight="8" refX="8" refY="4" orient="auto">
  1079. <path d="M0,0 L8,4 L0,8 z" fill="#93a4b8" />
  1080. </marker>
  1081. </defs>
  1082. <g class="graph-links">
  1083. <path d="M280 180 L126 88" />
  1084. <path d="M280 180 L438 92" />
  1085. <path d="M280 180 L118 280" />
  1086. <path d="M280 180 L438 282" />
  1087. <path d="M126 88 L438 92" />
  1088. <path d="M118 280 L438 282" />
  1089. </g>
  1090. <g class="graph-center" transform="translate(280 180)">
  1091. <circle r="48" />
  1092. <text y="-4">瓦斯超限</text>
  1093. <text y="16">风险事件</text>
  1094. </g>
  1095. <g class="graph-node" transform="translate(126 88)">
  1096. <circle r="34" /><text y="-4">局部通风机</text><text y="15">停风/循环风</text>
  1097. </g>
  1098. <g class="graph-node amber-node" transform="translate(438 92)">
  1099. <circle r="34" /><text y="-4">风门</text><text y="15">漏风/失效</text>
  1100. </g>
  1101. <g class="graph-node" transform="translate(118 280)">
  1102. <circle r="34" /><text y="-4">风量分配</text><text y="15">风量不足</text>
  1103. </g>
  1104. <g class="graph-node amber-node" transform="translate(438 282)">
  1105. <circle r="34" /><text y="-4">监测系统</text><text y="15">数据异常</text>
  1106. </g>
  1107. </svg>
  1108. </div>
  1109. <div class="graph-legend">
  1110. <span><i class="graph-legend-dot center"></i>风险事件</span>
  1111. <span><i class="graph-legend-dot cause"></i>关联缺陷</span>
  1112. <span><i class="graph-legend-dot data"></i>监测依据</span>
  1113. </div>
  1114. </article>
  1115. </div>
  1116. <div class="knowledge-category-grid">
  1117. <article class="category-card" role="button" tabindex="0" data-knowledge-category="standards">
  1118. <span class="category-icon blue" data-icon="book-open"></span>
  1119. <div><strong>规范标准</strong><b>628</b><p>规程、标准、办法及技术要求</p></div>
  1120. <button type="button" aria-label="查看规范标准"><span data-icon="chevron-right"></span></button>
  1121. </article>
  1122. <article class="category-card" role="button" tabindex="0" data-knowledge-category="cases">
  1123. <span class="category-icon red" data-icon="history"></span>
  1124. <div><strong>事故案例</strong><b>364</b><p>典型事故与隐患处置案例</p></div>
  1125. <button type="button" aria-label="查看事故案例"><span data-icon="chevron-right"></span></button>
  1126. </article>
  1127. <article class="category-card" role="button" tabindex="0" data-knowledge-category="expert">
  1128. <span class="category-icon amber" data-icon="user-round"></span>
  1129. <div><strong>专家经验</strong><b>512</b><p>专家规则、判识经验与处置建议</p></div>
  1130. <button type="button" aria-label="查看专家经验"><span data-icon="chevron-right"></span></button>
  1131. </article>
  1132. <article class="category-card" role="button" tabindex="0" data-knowledge-category="management">
  1133. <span class="category-icon teal" data-icon="workflow"></span>
  1134. <div><strong>管理流程</strong><b>660</b><p>业务流程、责任岗位与闭环规则</p></div>
  1135. <button type="button" aria-label="查看管理流程"><span data-icon="chevron-right"></span></button>
  1136. </article>
  1137. </div>
  1138. <div class="knowledge-catalog-modal" id="knowledgeCatalogModal" hidden>
  1139. <div class="knowledge-catalog-scrim" data-knowledge-catalog-close></div>
  1140. <section class="knowledge-catalog-dialog" role="dialog" aria-modal="true" aria-labelledby="knowledgeCatalogTitle">
  1141. <header class="knowledge-catalog-head">
  1142. <div>
  1143. <span class="eyebrow" id="knowledgeCatalogEyebrow">知识目录</span>
  1144. <h2 id="knowledgeCatalogTitle">知识列表</h2>
  1145. <p id="knowledgeCatalogSubtitle"></p>
  1146. </div>
  1147. <button class="icon-button small" type="button" aria-label="关闭知识列表" data-knowledge-catalog-close>
  1148. <span data-icon="x"></span>
  1149. </button>
  1150. </header>
  1151. <form class="knowledge-catalog-search" id="knowledgeCatalogSearch">
  1152. <span data-icon="search"></span>
  1153. <input type="search" name="keyword" placeholder="检索当前分类下的标准、标题或关键词" />
  1154. <button class="secondary-button" type="submit">检索</button>
  1155. </form>
  1156. <div class="knowledge-catalog-content" id="knowledgeCatalogContent"></div>
  1157. <footer class="knowledge-catalog-pager" id="knowledgeCatalogPager"></footer>
  1158. </section>
  1159. </div>
  1160. </section>
  1161. <section class="view" id="view-diagnosis" data-title="隐患识别中心" data-subtitle="面向五类重大安全风险,编排专业智能体完成识别、研判与风险汇聚">
  1162. <div class="view-toolbar hazard-toolbar">
  1163. <div class="toolbar-copy">
  1164. <span class="toolbar-icon red" data-icon="shield-alert"></span>
  1165. <div><strong>重大安全隐患智能识别</strong><p>五个业务场景 · 15 个专业智能体 · 风险清单持续更新</p></div>
  1166. </div>
  1167. <div class="toolbar-actions">
  1168. <button class="secondary-button" type="button" data-export-hazards><span data-icon="download"></span>导出识别报告</button>
  1169. <button class="primary-button" type="button" data-run-scene-agents><span data-icon="play"></span>运行当前场景</button>
  1170. </div>
  1171. </div>
  1172. <div class="hazard-overview">
  1173. <div class="hazard-overview-copy">
  1174. <span class="eyebrow">Risk Agent Matrix</span>
  1175. <h2>重大安全隐患识别智能体矩阵</h2>
  1176. <p>围绕局部通风、通风设施、通风系统管理、风量分配和灾害防治构建专业识别能力。</p>
  1177. </div>
  1178. <div class="hazard-overview-stats">
  1179. <div><strong id="hazardAgentTotal">15</strong><span>专业智能体</span></div>
  1180. <div><strong id="hazardSceneTotal">5</strong><span>业务场景</span></div>
  1181. <div><strong id="hazardRunCount">0</strong><span>本轮运行</span></div>
  1182. <div><strong id="hazardRiskTotal">5</strong><span>风险清单</span></div>
  1183. </div>
  1184. </div>
  1185. <div class="hazard-scenario-grid" id="hazardScenarioGrid" aria-label="隐患识别场景"></div>
  1186. <div class="hazard-console-grid">
  1187. <article class="panel hazard-agent-panel">
  1188. <div class="panel-head">
  1189. <div><span class="eyebrow">Scenario Agents</span><h2>场景智能体</h2></div>
  1190. <span class="subtle-badge" id="hazardSceneAgentCount">3 个智能体</span>
  1191. </div>
  1192. <div class="hazard-agent-grid" id="hazardAgentGrid"></div>
  1193. </article>
  1194. <aside class="panel hazard-result-panel">
  1195. <div class="panel-head">
  1196. <div><span class="eyebrow">Agent Run</span><h2>智能体运行结果</h2></div>
  1197. <span class="subtle-badge" id="hazardResultStatus">尚未执行</span>
  1198. </div>
  1199. <div class="hazard-agent-result" id="hazardAgentResult" aria-live="polite">
  1200. <div class="hazard-result-empty">
  1201. <span data-icon="bot"></span>
  1202. <strong>尚未执行</strong>
  1203. <p>当前没有可展示的识别结果。</p>
  1204. </div>
  1205. </div>
  1206. </aside>
  1207. </div>
  1208. <div class="hazard-risk-summary">
  1209. <div class="hazard-metric total"><span data-icon="scan-search"></span><div><strong id="hazardMetricTotal">5</strong><p>风险总数</p></div></div>
  1210. <div class="hazard-metric high"><span data-icon="triangle-alert"></span><div><strong id="hazardMetricHigh">2</strong><p>重大隐患</p></div></div>
  1211. <div class="hazard-metric medium"><span data-icon="circle-alert"></span><div><strong id="hazardMetricMedium">2</strong><p>一般隐患</p></div></div>
  1212. <div class="hazard-metric low"><span data-icon="shield-check"></span><div><strong id="hazardMetricLow">1</strong><p>提示风险</p></div></div>
  1213. </div>
  1214. <article class="panel hazard-risk-panel">
  1215. <div class="panel-head">
  1216. <div><span class="eyebrow">Risk Backlog</span><h2>隐患风险列表</h2></div>
  1217. <div class="hazard-risk-actions">
  1218. <div class="hazard-risk-filters" id="hazardRiskFilters">
  1219. <button class="active" type="button" data-risk-filter="all">全部</button>
  1220. <button type="button" data-risk-filter="high">高风险</button>
  1221. <button type="button" data-risk-filter="medium">中风险</button>
  1222. <button type="button" data-risk-filter="low">低风险</button>
  1223. </div>
  1224. <label class="hazard-scene-select">
  1225. <span>场景</span>
  1226. <select id="hazardRiskSceneFilter">
  1227. <option value="all">全部场景</option>
  1228. <option value="local">局部通风</option>
  1229. <option value="facility">通风设施</option>
  1230. <option value="system">通风系统管理</option>
  1231. <option value="volume">风量分配</option>
  1232. <option value="disaster">灾害防治</option>
  1233. </select>
  1234. </label>
  1235. </div>
  1236. </div>
  1237. <div class="hazard-risk-table-head">
  1238. <span>隐患事项</span><span>等级</span><span>场景 / 来源</span><span>证据</span><span>置信度</span><span>状态</span><span>操作</span>
  1239. </div>
  1240. <div class="hazard-risk-list" id="hazardRiskList"></div>
  1241. </article>
  1242. </section>
  1243. <section class="view" id="view-evaluation" data-title="综合评价" data-subtitle="建立多维度量化指标体系,结合大模型完成评价、解释与优化建议">
  1244. <div class="evaluation-banner">
  1245. <div class="evaluation-grade">
  1246. <span>本期评价结果</span>
  1247. <strong>A</strong>
  1248. <em>运行状态优良</em>
  1249. </div>
  1250. <div class="evaluation-summary-copy">
  1251. <span class="eyebrow">2026 年 10 月 08 日 · 自动评价</span>
  1252. <h2>上湾煤矿通防业务综合评价报告</h2>
  1253. <p>安全性、可靠性表现稳定,风量分配均衡度和局部通风管理为当前主要提升方向。</p>
  1254. <div class="evaluation-tags"><span>数据完整率 98.4%</span><span>专家复核通过</span><span>报告可追溯</span></div>
  1255. </div>
  1256. <button class="primary-button" type="button"><span data-icon="download"></span>下载评价报告</button>
  1257. </div>
  1258. <div class="evaluation-grid">
  1259. <article class="panel radar-panel">
  1260. <div class="panel-head">
  1261. <div><span class="eyebrow">指标画像</span><h2>五维综合评价</h2></div>
  1262. <span class="subtle-badge">综合得分 92.8</span>
  1263. </div>
  1264. <div class="radar-wrap">
  1265. <svg viewBox="0 0 420 350" role="img" aria-label="五维综合评价雷达图">
  1266. <g class="radar-grid">
  1267. <polygon points="210,34 369,151 308,338 112,338 51,151" />
  1268. <polygon points="210,74 327,162 282,305 138,305 93,162" />
  1269. <polygon points="210,114 286,173 255,273 165,273 134,173" />
  1270. <polygon points="210,154 245,184 228,240 192,240 175,184" />
  1271. <path d="M210 34 L210 338 M51 151 L369 151 M112 338 L308 338" />
  1272. </g>
  1273. <polygon class="radar-area" points="210,55 350,158 294,316 126,322 75,157" />
  1274. <polygon class="radar-line" points="210,55 350,158 294,316 126,322 75,157" />
  1275. <g class="radar-points">
  1276. <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" />
  1277. </g>
  1278. <g class="radar-labels">
  1279. <text x="210" y="18">安全性 96.2</text>
  1280. <text x="386" y="154">可靠性 91.4</text>
  1281. <text x="318" y="346">经济性 84.7</text>
  1282. <text x="28" y="346">管理合规 94.1</text>
  1283. <text x="12" y="154">数据质量 89.6</text>
  1284. </g>
  1285. </svg>
  1286. </div>
  1287. </article>
  1288. <article class="panel evaluation-detail-panel">
  1289. <div class="panel-head">
  1290. <div><span class="eyebrow">指标明细</span><h2>维度得分与变化</h2></div>
  1291. <button class="text-button" type="button">指标设置 <span data-icon="sliders-horizontal"></span></button>
  1292. </div>
  1293. <div class="dimension-list">
  1294. <div class="dimension-row">
  1295. <span class="dimension-icon green" data-icon="shield-check"></span>
  1296. <div><strong>安全性</strong><p>瓦斯、火灾、粉尘、通风可靠性</p></div>
  1297. <div class="dimension-score"><b>96.2</b><span class="up"><i data-icon="arrow-up"></i>1.8</span></div>
  1298. </div>
  1299. <div class="dimension-row">
  1300. <span class="dimension-icon blue" data-icon="activity"></span>
  1301. <div><strong>可靠性</strong><p>设备可用率、数据连续性、故障恢复</p></div>
  1302. <div class="dimension-score"><b>91.4</b><span class="up"><i data-icon="arrow-up"></i>0.6</span></div>
  1303. </div>
  1304. <div class="dimension-row">
  1305. <span class="dimension-icon amber" data-icon="circle-dollar-sign"></span>
  1306. <div><strong>经济性</strong><p>主通风机能耗、漏风率、运行效率</p></div>
  1307. <div class="dimension-score"><b>84.7</b><span class="down"><i data-icon="arrow-down"></i>0.9</span></div>
  1308. </div>
  1309. <div class="dimension-row">
  1310. <span class="dimension-icon purple" data-icon="clipboard-check"></span>
  1311. <div><strong>管理合规</strong><p>资料完整、制度执行、整改及时性</p></div>
  1312. <div class="dimension-score"><b>94.1</b><span class="up"><i data-icon="arrow-up"></i>2.1</span></div>
  1313. </div>
  1314. <div class="dimension-row">
  1315. <span class="dimension-icon teal" data-icon="database"></span>
  1316. <div><strong>数据质量</strong><p>完整性、及时性、一致性与有效性</p></div>
  1317. <div class="dimension-score"><b>89.6</b><span class="up"><i data-icon="arrow-up"></i>3.4</span></div>
  1318. </div>
  1319. </div>
  1320. </article>
  1321. </div>
  1322. <article class="panel evaluation-agent-panel">
  1323. <div class="agent-orb"><span data-icon="sparkles"></span></div>
  1324. <div class="agent-copy">
  1325. <span class="eyebrow">Evaluation Agent</span>
  1326. <h2>评价智能体已生成优化建议</h2>
  1327. <p>“经济性指标下降主要受北翼通风阻力上升影响。建议优先核查北翼回风巷道支护变形、堆积物和 2# 调节风门漏风情况,并对主通风机运行曲线进行复核。”</p>
  1328. <div class="agent-suggestions">
  1329. <span><i>1</i>北翼回风阻力专项排查</span>
  1330. <span><i>2</i>主通风机能效优化</span>
  1331. <span><i>3</i>S1301 风量复测与分配调整</span>
  1332. </div>
  1333. </div>
  1334. <button class="secondary-button" type="button" data-start-evaluation><span data-icon="refresh-cw"></span>重新评价</button>
  1335. </article>
  1336. <article class="panel">
  1337. <div class="panel-head">
  1338. <div><span class="eyebrow">历史趋势</span><h2>近六个月综合得分</h2></div>
  1339. <div class="chart-legend"><span><i class="legend-line teal"></i>综合得分</span><span><i class="legend-line amber"></i>安全性</span></div>
  1340. </div>
  1341. <div class="line-chart">
  1342. <div class="chart-y-axis"><span>100</span><span>90</span><span>80</span><span>70</span><span>60</span></div>
  1343. <svg viewBox="0 0 900 240" preserveAspectRatio="none" role="img" aria-label="近六个月综合得分趋势图">
  1344. <g class="chart-grid">
  1345. <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" />
  1346. </g>
  1347. <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" />
  1348. <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" />
  1349. <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" />
  1350. <g class="chart-points">
  1351. <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" />
  1352. </g>
  1353. </svg>
  1354. <div class="chart-x-axis"><span>5月</span><span>6月</span><span>7月</span><span>8月</span><span>9月</span><span>10月</span></div>
  1355. </div>
  1356. </article>
  1357. </section>
  1358. <section class="view" id="view-closed-loop" data-title="闭环处置" data-subtitle="将诊断与评价结果转为任务,实现整改、复核、销号和案例沉淀">
  1359. <div class="view-toolbar">
  1360. <div class="toolbar-copy">
  1361. <span class="toolbar-icon amber" data-icon="workflow"></span>
  1362. <div><strong>整改任务看板</strong><p>本月累计处置任务 86 项,闭环率 91.8%,平均处置时长 5.6 小时</p></div>
  1363. </div>
  1364. <div class="toolbar-actions">
  1365. <button class="secondary-button" type="button"><span data-icon="filter"></span>筛选</button>
  1366. <button class="primary-button" type="button" data-toast="新建任务表单已打开"><span data-icon="plus"></span>新建任务</button>
  1367. </div>
  1368. </div>
  1369. <div class="kanban-board">
  1370. <div class="kanban-column">
  1371. <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>
  1372. <button class="work-card priority-high" type="button" data-toast="已打开任务:N1202 瓦斯超限处置">
  1373. <div class="work-card-head"><span class="work-tag high">高优先级</span><span>10:38</span></div>
  1374. <strong>N1202 回风巷瓦斯超限处置</strong>
  1375. <p>建议核查局部通风机与回风系统,确认撤人断电措施执行情况。</p>
  1376. <div class="work-meta"><span class="avatar mini">王</span><span>王强</span><span>剩余 01:26</span></div>
  1377. </button>
  1378. <button class="work-card priority-medium" type="button" data-toast="已打开任务:2# 调节风门状态复核">
  1379. <div class="work-card-head"><span class="work-tag medium">中优先级</span><span>10:28</span></div>
  1380. <strong>2# 调节风门状态复核</strong>
  1381. <p>视频判断风门未闭合,传感器反馈正常,需现场确认。</p>
  1382. <div class="work-meta"><span class="avatar mini">赵</span><span>赵磊</span><span>剩余 03:42</span></div>
  1383. </button>
  1384. <button class="work-card priority-low" type="button" data-toast="已打开任务:通风阻力月报复核">
  1385. <div class="work-card-head"><span class="work-tag low">常规</span><span>09:20</span></div>
  1386. <strong>通风阻力月报复核</strong>
  1387. <p>核查阻力异常点与测风记录一致性。</p>
  1388. <div class="work-meta"><span class="avatar mini">陈</span><span>陈晨</span><span>剩余 1 天</span></div>
  1389. </button>
  1390. </div>
  1391. <div class="kanban-column">
  1392. <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>
  1393. <button class="work-card priority-high" type="button" data-toast="已打开任务:T-17 局部通风机异常处置">
  1394. <div class="work-card-head"><span class="work-tag high">高优先级</span><span>10:32</span></div>
  1395. <strong>T-17 局部通风机异常处置</strong>
  1396. <p>现场已到达,正在检查供电回路与风筒连接状态。</p>
  1397. <div class="progress-line"><i style="width: 62%"></i></div>
  1398. <div class="work-meta"><span class="avatar mini">刘</span><span>刘伟</span><span>62%</span></div>
  1399. </button>
  1400. <button class="work-card priority-medium" type="button" data-toast="已打开任务:S1301 风量复测">
  1401. <div class="work-card-head"><span class="work-tag medium">中优先级</span><span>09:56</span></div>
  1402. <strong>S1301 风量复测</strong>
  1403. <p>调整风窗开度后进行第二次测风。</p>
  1404. <div class="progress-line"><i style="width: 78%"></i></div>
  1405. <div class="work-meta"><span class="avatar mini">周</span><span>周洋</span><span>78%</span></div>
  1406. </button>
  1407. <button class="work-card priority-medium" type="button" data-toast="已打开任务:北翼回风巷道排查">
  1408. <div class="work-card-head"><span class="work-tag medium">中优先级</span><span>08:32</span></div>
  1409. <strong>北翼回风巷道排查</strong>
  1410. <p>排查巷道变形、堆放物与局部阻力异常点。</p>
  1411. <div class="progress-line"><i style="width: 35%"></i></div>
  1412. <div class="work-meta"><span class="avatar mini">李</span><span>李浩</span><span>35%</span></div>
  1413. </button>
  1414. </div>
  1415. <div class="kanban-column">
  1416. <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>
  1417. <button class="work-card priority-medium" type="button" data-toast="已打开任务:主通风机运行曲线复核">
  1418. <div class="work-card-head"><span class="work-tag medium">中优先级</span><span>昨日</span></div>
  1419. <strong>主通风机运行曲线复核</strong>
  1420. <p>已完成能效分析,等待通防科负责人确认。</p>
  1421. <div class="work-meta"><span class="avatar mini">孙</span><span>孙敏</span><span>待复核</span></div>
  1422. </button>
  1423. <button class="work-card priority-low" type="button" data-toast="已打开任务:粉尘监测点校准">
  1424. <div class="work-card-head"><span class="work-tag low">常规</span><span>昨日</span></div>
  1425. <strong>粉尘监测点校准</strong>
  1426. <p>已完成 4 个监测点校准,等待数据复验。</p>
  1427. <div class="work-meta"><span class="avatar mini">高</span><span>高杰</span><span>待复核</span></div>
  1428. </button>
  1429. </div>
  1430. <div class="kanban-column">
  1431. <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>
  1432. <button class="work-card priority-low" type="button" data-toast="已打开任务:风门传感器更换">
  1433. <div class="work-card-head"><span class="work-tag closed">已销号</span><span>今日</span></div>
  1434. <strong>风门传感器更换</strong>
  1435. <p>更换后数据恢复,复核记录已归档。</p>
  1436. <div class="work-meta"><span class="avatar mini">赵</span><span>赵磊</span><span class="success-text">闭环</span></div>
  1437. </button>
  1438. <button class="work-card priority-low" type="button" data-toast="已打开任务:回风巷测风站维护">
  1439. <div class="work-card-head"><span class="work-tag closed">已销号</span><span>今日</span></div>
  1440. <strong>回风巷测风站维护</strong>
  1441. <p>清理测量断面并完成数据复核。</p>
  1442. <div class="work-meta"><span class="avatar mini">周</span><span>周洋</span><span class="success-text">闭环</span></div>
  1443. </button>
  1444. <button class="work-card priority-low" type="button" data-toast="已打开任务:月度资料完整性检查">
  1445. <div class="work-card-head"><span class="work-tag closed">已销号</span><span>昨日</span></div>
  1446. <strong>月度资料完整性检查</strong>
  1447. <p>补充 6 份资料,关键字段抽取完成。</p>
  1448. <div class="work-meta"><span class="avatar mini">陈</span><span>陈晨</span><span class="success-text">闭环</span></div>
  1449. </button>
  1450. </div>
  1451. </div>
  1452. </section>
  1453. <section class="view" id="view-settings" data-title="系统配置" data-subtitle="管理数据源、模型服务、指标规则、用户权限与平台运行参数">
  1454. <div class="settings-layout">
  1455. <div class="settings-nav">
  1456. <button class="active" type="button"><span data-icon="plug-zap"></span>数据源配置</button>
  1457. <button type="button"><span data-icon="cpu"></span>模型服务</button>
  1458. <button type="button"><span data-icon="sliders-horizontal"></span>指标与规则</button>
  1459. <button type="button"><span data-icon="users"></span>用户与权限</button>
  1460. <button type="button"><span data-icon="shield-check"></span>安全审计</button>
  1461. </div>
  1462. <div class="settings-content">
  1463. <article class="panel">
  1464. <div class="panel-head">
  1465. <div><span class="eyebrow">数据源配置</span><h2>已接入系统</h2></div>
  1466. <button class="primary-button" type="button" data-toast="新增数据源配置已打开"><span data-icon="plus"></span>新增数据源</button>
  1467. </div>
  1468. <div class="integration-list">
  1469. <div class="integration-row">
  1470. <span class="integration-icon teal" data-icon="database"></span>
  1471. <div><strong>KJ 安全监控系统</strong><p>OPC UA · 10.20.16.28:4840</p></div>
  1472. <span class="connection-status online"><i></i>已连接</span>
  1473. <button class="icon-button small" type="button" aria-label="配置 KJ 安全监控系统"><span data-icon="settings"></span></button>
  1474. </div>
  1475. <div class="integration-row">
  1476. <span class="integration-icon blue" data-icon="video"></span>
  1477. <div><strong>工业视频平台</strong><p>GB/T 28181 · 218 路视频流</p></div>
  1478. <span class="connection-status online"><i></i>已连接</span>
  1479. <button class="icon-button small" type="button" aria-label="配置工业视频平台"><span data-icon="settings"></span></button>
  1480. </div>
  1481. <div class="integration-row">
  1482. <span class="integration-icon amber" data-icon="settings-2"></span>
  1483. <div><strong>通防设施物联网平台</strong><p>MQTT · 486 台设备</p></div>
  1484. <span class="connection-status online"><i></i>已连接</span>
  1485. <button class="icon-button small" type="button" aria-label="配置通防设施物联网平台"><span data-icon="settings"></span></button>
  1486. </div>
  1487. <div class="integration-row">
  1488. <span class="integration-icon purple" data-icon="file-text"></span>
  1489. <div><strong>业务资料管理系统</strong><p>REST API · 每 15 分钟同步</p></div>
  1490. <span class="connection-status warning"><i></i>同步中</span>
  1491. <button class="icon-button small" type="button" aria-label="配置业务资料管理系统"><span data-icon="settings"></span></button>
  1492. </div>
  1493. </div>
  1494. </article>
  1495. <div class="settings-grid">
  1496. <article class="panel setting-card">
  1497. <div class="setting-icon teal" data-icon="radio-tower"></div>
  1498. <h3>数据采集频率</h3>
  1499. <p>设置不同数据源的实时采集和同步周期。</p>
  1500. <div class="setting-value"><strong>2 秒</strong><span>实时监测</span></div>
  1501. <button class="secondary-button" type="button">调整参数</button>
  1502. </article>
  1503. <article class="panel setting-card">
  1504. <div class="setting-icon amber" data-icon="cpu"></div>
  1505. <h3>诊断模型版本</h3>
  1506. <p>管理模型发布、回滚和灰度运行策略。</p>
  1507. <div class="setting-value"><strong>v2.6.1</strong><span>已发布</span></div>
  1508. <button class="secondary-button" type="button">模型管理</button>
  1509. </article>
  1510. <article class="panel setting-card">
  1511. <div class="setting-icon purple" data-icon="sliders-horizontal"></div>
  1512. <h3>评价指标权重</h3>
  1513. <p>配置安全性、可靠性、经济性等维度权重。</p>
  1514. <div class="setting-value"><strong>动态计算</strong><span>AHP + 熵权法</span></div>
  1515. <button class="secondary-button" type="button">配置权重</button>
  1516. </article>
  1517. </div>
  1518. </div>
  1519. </div>
  1520. </section>
  1521. </div>
  1522. </main>
  1523. </div>
  1524. <div class="upload-modal" id="documentProcessingRecordsModal" hidden>
  1525. <div class="upload-modal-scrim" data-records-close></div>
  1526. <section class="upload-dialog document-records-dialog" role="dialog" aria-modal="true" aria-labelledby="documentProcessingRecordsTitle">
  1527. <div class="upload-dialog-head">
  1528. <div>
  1529. <span class="eyebrow">Processing History</span>
  1530. <h2 id="documentProcessingRecordsTitle">业务资料处理记录</h2>
  1531. </div>
  1532. <button class="icon-button small" type="button" data-records-close aria-label="关闭处理记录">
  1533. <span data-icon="x"></span>
  1534. </button>
  1535. </div>
  1536. <div class="document-preview-toolbar">
  1537. <span class="subtle-badge" id="documentProcessingRecordsCount">正在加载</span>
  1538. </div>
  1539. <div class="extraction-list processing-records-list" id="documentProcessingRecordsList"></div>
  1540. </section>
  1541. </div>
  1542. <div class="upload-modal" id="documentReprocessModal" hidden>
  1543. <div class="upload-modal-scrim" data-reprocess-close></div>
  1544. <section class="upload-dialog" role="dialog" aria-modal="true" aria-labelledby="documentReprocessTitle">
  1545. <form id="documentReprocessForm">
  1546. <div class="upload-dialog-head">
  1547. <div>
  1548. <span class="eyebrow">Document Processing</span>
  1549. <h2 id="documentReprocessTitle">重新解析资料</h2>
  1550. </div>
  1551. <button class="icon-button small" type="button" data-reprocess-close aria-label="关闭重新解析窗口">
  1552. <span data-icon="x"></span>
  1553. </button>
  1554. </div>
  1555. <input name="document_id" type="hidden" />
  1556. <div class="document-reprocess-error" id="documentReprocessError" hidden>
  1557. <span data-icon="triangle-alert"></span>
  1558. <div><strong>上次处理失败</strong><p id="documentReprocessErrorText"></p></div>
  1559. </div>
  1560. <div class="upload-form-grid">
  1561. <label class="upload-field upload-field-wide">
  1562. <span>业务资料类型 / 抽取模板</span>
  1563. <select name="template_id" id="reprocessTemplateSelect">
  1564. <option value="">按文件名重新识别</option>
  1565. </select>
  1566. </label>
  1567. </div>
  1568. <fieldset class="parse-mode-fieldset">
  1569. <legend>解析模式</legend>
  1570. <div class="parse-mode-options">
  1571. <label>
  1572. <input name="parse_mode" type="radio" value="lightweight" checked />
  1573. <span>
  1574. <strong>轻量解析</strong>
  1575. <small>速度较快,适合 10 MB / 20 页以内文档</small>
  1576. </span>
  1577. </label>
  1578. <label>
  1579. <input name="parse_mode" type="radio" value="precision" />
  1580. <span>
  1581. <strong>精准解析</strong>
  1582. <small>VLM 高精度解析,适合最大 200 MB / 200 页</small>
  1583. </span>
  1584. </label>
  1585. </div>
  1586. </fieldset>
  1587. <div class="upload-dialog-actions">
  1588. <button class="secondary-button" type="button" data-reprocess-close>取消</button>
  1589. <button class="primary-button" type="submit" id="documentReprocessSubmit">
  1590. <span data-icon="refresh-cw"></span>开始重新解析
  1591. </button>
  1592. </div>
  1593. </form>
  1594. </section>
  1595. </div>
  1596. <div class="upload-modal document-preview-modal" id="documentPreviewModal" hidden>
  1597. <div class="upload-modal-scrim" data-preview-close></div>
  1598. <section class="upload-dialog document-preview-dialog" role="dialog" aria-modal="true" aria-labelledby="documentPreviewTitle">
  1599. <div class="upload-dialog-head">
  1600. <div>
  1601. <span class="eyebrow">Document Preview</span>
  1602. <h2 id="documentPreviewTitle">原文预览</h2>
  1603. </div>
  1604. <button class="icon-button small" type="button" data-preview-close aria-label="关闭原文预览">
  1605. <span data-icon="x"></span>
  1606. </button>
  1607. </div>
  1608. <div class="document-preview-toolbar">
  1609. <span class="subtle-badge" id="documentPreviewType">正在加载</span>
  1610. <button class="secondary-button" type="button" id="documentPreviewDownload">
  1611. <span data-icon="download"></span>下载原文件
  1612. </button>
  1613. </div>
  1614. <div class="document-preview-body" id="documentPreviewBody"></div>
  1615. </section>
  1616. </div>
  1617. <div class="upload-modal" id="businessUploadModal" hidden>
  1618. <div class="upload-modal-scrim" data-upload-close></div>
  1619. <section class="upload-dialog" role="dialog" aria-modal="true" aria-labelledby="businessUploadTitle">
  1620. <form id="businessUploadForm">
  1621. <div class="upload-dialog-head">
  1622. <div>
  1623. <span class="eyebrow">Document Intake</span>
  1624. <h2 id="businessUploadTitle">上传业务资料</h2>
  1625. </div>
  1626. <button class="icon-button small" type="button" data-upload-close aria-label="关闭上传窗口">
  1627. <span data-icon="x"></span>
  1628. </button>
  1629. </div>
  1630. <div class="upload-form-grid">
  1631. <label class="upload-field">
  1632. <span>资料分类</span>
  1633. <select name="category" required>
  1634. <option value="通风专业">通风专业</option>
  1635. <option value="火灾防治">火灾防治</option>
  1636. <option value="监测监控">监测监控</option>
  1637. <option value="粉尘防治">粉尘防治</option>
  1638. <option value="瓦斯防治">瓦斯防治</option>
  1639. <option value="制度管理">制度管理</option>
  1640. </select>
  1641. </label>
  1642. <label class="upload-field">
  1643. <span>资料编号</span>
  1644. <input name="code" type="text" maxlength="64" placeholder="选填" />
  1645. </label>
  1646. <label class="upload-field upload-field-wide">
  1647. <span>业务资料类型 / 抽取模板(留空则按文件名自动识别)</span>
  1648. <select name="template_id" id="businessTemplateSelect">
  1649. <option value="">自动识别(根据文件名)</option>
  1650. </select>
  1651. <small class="upload-field-error" id="businessTemplateError" hidden>当前文件名未匹配到抽取模板,请手动选择业务资料类型。</small>
  1652. </label>
  1653. <label class="upload-field">
  1654. <span>资料责任人</span>
  1655. <input name="owner_name" type="text" maxlength="128" placeholder="选填" />
  1656. </label>
  1657. <label class="upload-field">
  1658. <span>所属部门</span>
  1659. <input name="department" type="text" maxlength="128" placeholder="选填" />
  1660. </label>
  1661. </div>
  1662. <fieldset class="parse-mode-fieldset">
  1663. <legend>解析模式</legend>
  1664. <div class="parse-mode-options">
  1665. <label>
  1666. <input name="parse_mode" type="radio" value="lightweight" checked />
  1667. <span>
  1668. <strong>轻量解析</strong>
  1669. <small>速度较快,适合 10 MB / 20 页以内文档</small>
  1670. </span>
  1671. </label>
  1672. <label>
  1673. <input name="parse_mode" type="radio" value="precision" />
  1674. <span>
  1675. <strong>精准解析</strong>
  1676. <small>VLM 高精度解析,适合最大 200 MB / 200 页</small>
  1677. </span>
  1678. </label>
  1679. </div>
  1680. </fieldset>
  1681. <label class="upload-file-field">
  1682. <span data-icon="upload"></span>
  1683. <strong id="businessFileTitle">选择 Word、PDF 或 Excel 文件</strong>
  1684. <small id="businessFileDetail">支持 .doc .docx .pdf .xls .xlsx .csv,单个文件不超过 50 MB</small>
  1685. <input name="file" type="file" accept=".pdf,.doc,.docx,.xls,.xlsx,.csv" required />
  1686. </label>
  1687. <div class="upload-progress" id="businessUploadProgress" hidden>
  1688. <div>
  1689. <strong id="businessUploadStage">正在上传</strong>
  1690. <span id="businessUploadPercent">0%</span>
  1691. </div>
  1692. <div class="upload-progress-track"><i id="businessUploadProgressBar"></i></div>
  1693. </div>
  1694. <div class="upload-dialog-actions">
  1695. <button class="secondary-button" type="button" data-upload-close>取消</button>
  1696. <button class="primary-button" type="submit" id="businessUploadSubmit">
  1697. <span data-icon="upload"></span>上传并开始解析
  1698. </button>
  1699. </div>
  1700. </form>
  1701. </section>
  1702. </div>
  1703. <div class="upload-modal" id="businessEditModal" hidden>
  1704. <div class="upload-modal-scrim" data-edit-close></div>
  1705. <section class="upload-dialog" role="dialog" aria-modal="true" aria-labelledby="businessEditTitle">
  1706. <form id="businessEditForm">
  1707. <div class="upload-dialog-head">
  1708. <div>
  1709. <span class="eyebrow">Document Metadata</span>
  1710. <h2 id="businessEditTitle">编辑资料信息</h2>
  1711. </div>
  1712. <button class="icon-button small" type="button" data-edit-close aria-label="关闭编辑窗口">
  1713. <span data-icon="x"></span>
  1714. </button>
  1715. </div>
  1716. <input name="document_id" type="hidden" />
  1717. <div class="upload-form-grid">
  1718. <label class="upload-field upload-field-wide">
  1719. <span>文档名称</span>
  1720. <input name="title" type="text" required maxlength="255" />
  1721. </label>
  1722. <label class="upload-field">
  1723. <span>文档编号</span>
  1724. <input name="code" type="text" maxlength="64" />
  1725. </label>
  1726. <label class="upload-field">
  1727. <span>资料分组</span>
  1728. <select name="category" required>
  1729. <option value="通风专业">通风专业</option>
  1730. <option value="火灾防治">火灾防治</option>
  1731. <option value="监测监控">监测监控</option>
  1732. <option value="粉尘防治">粉尘防治</option>
  1733. <option value="瓦斯防治">瓦斯防治</option>
  1734. <option value="制度管理">制度管理</option>
  1735. </select>
  1736. </label>
  1737. </div>
  1738. <div class="upload-dialog-actions">
  1739. <button class="secondary-button" type="button" data-edit-close>取消</button>
  1740. <button class="primary-button" type="submit" id="businessEditSubmit">
  1741. <span data-icon="check-circle-2"></span>保存修改
  1742. </button>
  1743. </div>
  1744. </form>
  1745. </section>
  1746. </div>
  1747. <div class="toast-container" id="toastContainer" aria-live="polite"></div>
  1748. </body>
  1749. </html>