221 lines
9.7 KiB
HTML
221 lines
9.7 KiB
HTML
<!doctype html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
<title>DICOM 阅片分类系统</title>
|
||
<link rel="stylesheet" href="/static/styles.css" />
|
||
</head>
|
||
<body>
|
||
<div id="loginOverlay" class="login-overlay">
|
||
<form id="loginForm" class="login-panel">
|
||
<div class="brand-mark">PACS</div>
|
||
<h1>DICOM 阅片分类系统</h1>
|
||
<label>
|
||
<span>账号</span>
|
||
<input id="username" autocomplete="username" value="admin" />
|
||
</label>
|
||
<label>
|
||
<span>密码</span>
|
||
<input id="password" type="password" autocomplete="current-password" value="123456" />
|
||
</label>
|
||
<button type="submit">登录</button>
|
||
<p id="loginError"></p>
|
||
</form>
|
||
</div>
|
||
|
||
<div class="app-shell">
|
||
<header class="topbar">
|
||
<div class="product">
|
||
<div class="logo-dot"></div>
|
||
<div>
|
||
<strong>DICOM 阅片分类系统</strong>
|
||
<span id="activeStudyLabel">未选择检查</span>
|
||
</div>
|
||
</div>
|
||
<div class="top-actions">
|
||
<button id="registrationLinkBtn" class="ghost-btn nav-btn" type="button">进入配准系统</button>
|
||
<button id="relationLinkBtn" class="ghost-btn nav-btn accent" type="button">数据库关联可视化</button>
|
||
<div id="dbStatus" class="status-pill offline">数据库</div>
|
||
<button id="settingsBtn" class="ghost-btn">设置</button>
|
||
<button id="logoutBtn" class="dark-btn">退出</button>
|
||
</div>
|
||
</header>
|
||
|
||
<main id="viewerPage" class="workspace">
|
||
<aside class="study-pane">
|
||
<div class="pane-head">
|
||
<h2>检查列表</h2>
|
||
<div class="sort-tools study-head-tools">
|
||
<button class="sort-btn active" data-study-sort="modified">修改时间 <span class="sort-arrow">↓</span></button>
|
||
<button class="sort-btn" data-study-sort="study_time">检查时间 <span class="sort-arrow">↓</span></button>
|
||
<span id="studyCount">0</span>
|
||
</div>
|
||
</div>
|
||
<div class="study-filter">
|
||
<button class="active" data-study-filter="all">全部</button>
|
||
<button data-study-filter="incomplete">待处理</button>
|
||
<button data-study-filter="complete">已完成</button>
|
||
</div>
|
||
<div class="study-part-filter">
|
||
<button class="active" data-study-part-filter="all">全部部位</button>
|
||
<button data-study-part-filter="head_neck">头颈部</button>
|
||
<button data-study-part-filter="chest">胸部</button>
|
||
<button data-study-part-filter="upper_abdomen">上腹部</button>
|
||
<button data-study-part-filter="abdomen_pelvis">腹盆部</button>
|
||
</div>
|
||
<input id="studySearch" class="search" placeholder="搜索检查号 / 姓名" />
|
||
<div id="studyList" class="study-list"></div>
|
||
</aside>
|
||
|
||
<section class="series-pane">
|
||
<div class="pane-head">
|
||
<h2>序列</h2>
|
||
<div class="sort-tools series-head-tools">
|
||
<button class="sort-btn active" data-series-sort="time">时间 <span class="sort-arrow">↑</span></button>
|
||
<button class="sort-btn" data-series-sort="count">张数 <span class="sort-arrow">↑</span></button>
|
||
<span id="seriesCount">0</span>
|
||
</div>
|
||
</div>
|
||
<div id="seriesGrid" class="series-grid"></div>
|
||
</section>
|
||
|
||
<section class="viewer-pane">
|
||
<div class="viewer-toolbar">
|
||
<div class="segmented" data-group="plane">
|
||
<button data-plane="axial" class="active">轴位原始</button>
|
||
<button data-plane="sagittal">矢状位重建</button>
|
||
<button data-plane="coronal">冠状位重建</button>
|
||
</div>
|
||
<div class="segmented" data-group="window">
|
||
<button data-window="default" class="active">默认</button>
|
||
<button data-window="bone">骨窗</button>
|
||
<button data-window="soft">软组织</button>
|
||
<button data-window="contrast">高对比</button>
|
||
</div>
|
||
<div class="tool-row">
|
||
<button id="rotateLeft">↶ 左转</button>
|
||
<button id="rotateRight">↷ 右转</button>
|
||
<button id="zoomOut">− 缩小</button>
|
||
<button id="zoomIn">+ 放大</button>
|
||
<button id="resetView">↺ 复位</button>
|
||
<button id="overlayToggle">隐藏信息</button>
|
||
<button id="infoBtn">DICOM 信息</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="viewer-stage">
|
||
<div class="image-wrap">
|
||
<img id="dicomImage" alt="" />
|
||
<div id="imageOverlay" class="image-overlay">
|
||
<div class="ov ov-left-top"></div>
|
||
<div class="ov ov-right-top"></div>
|
||
<div class="ov ov-left-bottom"></div>
|
||
<div class="ov ov-right-bottom"></div>
|
||
</div>
|
||
<div id="imageEmpty" class="image-empty hidden"></div>
|
||
<div class="slice-rail">
|
||
<input id="sliceSlider" type="range" min="0" max="0" value="0" orient="vertical" />
|
||
<span id="sliceText">0 / 0</span>
|
||
</div>
|
||
</div>
|
||
|
||
<aside class="annotation-panel">
|
||
<div class="annotation-head">
|
||
<div>
|
||
<h2>部位标注</h2>
|
||
<span id="saveState">已保存</span>
|
||
</div>
|
||
<button id="aiClassify" class="ghost-btn ai-btn">AI 识别</button>
|
||
</div>
|
||
<div class="source-legend">
|
||
<span><i class="manual-dot"></i>人工</span>
|
||
<span><i class="ai-dot"></i>AI</span>
|
||
</div>
|
||
<div class="part-grid">
|
||
<label class="skip-option"><input type="checkbox" value="skip" />略过/不采用</label>
|
||
<label><input type="checkbox" value="head_neck" />头颈部</label>
|
||
<label><input type="checkbox" value="chest" />胸部</label>
|
||
<label><input type="checkbox" value="upper_abdomen" />上腹部</label>
|
||
<label><input type="checkbox" value="abdomen_pelvis" />腹盆部</label>
|
||
</div>
|
||
<div id="phaseBox" class="phase-box">
|
||
<span>上腹部期相</span>
|
||
<div class="phase-options">
|
||
<label><input name="phase" type="radio" value="plain" />平扫</label>
|
||
<label><input name="phase" type="radio" value="arterial" />动脉期</label>
|
||
<label><input name="phase" type="radio" value="portal_venous" />门静脉期</label>
|
||
<label><input name="phase" type="radio" value="delayed" />延迟期</label>
|
||
<label class="warn-option"><input name="phase" type="radio" value="unknown" />无法判别</label>
|
||
</div>
|
||
</div>
|
||
<div id="chestWindowBox" class="phase-box chest-window-box">
|
||
<span>胸部窗位</span>
|
||
<div class="phase-options chest-window-options">
|
||
<label><input name="chestWindow" type="radio" value="lung" />肺窗</label>
|
||
<label><input name="chestWindow" type="radio" value="mediastinal" />纵隔窗</label>
|
||
<label class="warn-option"><input name="chestWindow" type="radio" value="unknown" />无法判别</label>
|
||
</div>
|
||
</div>
|
||
<div class="annotation-actions">
|
||
<button id="saveAnnotation" class="primary-btn save-btn">保存标注</button>
|
||
<input id="annotationNotes" class="note-input" placeholder="备注" />
|
||
</div>
|
||
</aside>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
|
||
<main id="settingsPage" class="settings-page hidden">
|
||
<section class="settings-page-head">
|
||
<div>
|
||
<h1>设置</h1>
|
||
<span>用户、权限、AI 与数据刷新</span>
|
||
</div>
|
||
<button id="backToViewer" class="dark-btn">返回阅片</button>
|
||
</section>
|
||
<div id="settingsContent" class="settings-content"></div>
|
||
</main>
|
||
</div>
|
||
|
||
<div id="infoModal" class="modal hidden">
|
||
<div class="modal-card">
|
||
<div class="modal-head">
|
||
<div>
|
||
<h2>DICOM 详细信息</h2>
|
||
<span>基础元数据、图像矩阵、空间距离</span>
|
||
</div>
|
||
<button class="icon-btn" data-close="infoModal">×</button>
|
||
</div>
|
||
<div id="infoContent" class="info-grid"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="exportModal" class="modal hidden">
|
||
<div class="modal-card export-modal-card">
|
||
<div class="modal-head">
|
||
<div>
|
||
<h2>选择导出序列</h2>
|
||
<span id="exportStudyLabel">未选择检查</span>
|
||
</div>
|
||
<button class="icon-btn" data-close="exportModal">×</button>
|
||
</div>
|
||
<div class="export-modal-tools">
|
||
<span id="exportHint">默认不选择略过/不采用序列</span>
|
||
<div>
|
||
<button id="selectExportableSeries" type="button">选择可用</button>
|
||
<button id="clearExportSeries" type="button">清空</button>
|
||
</div>
|
||
</div>
|
||
<div id="exportSeriesList" class="export-series-list"></div>
|
||
<div class="export-modal-foot">
|
||
<span id="exportModalCount">0 个序列</span>
|
||
<button id="downloadSelectedSeries" type="button">开始导出</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="/static/app.js"></script>
|
||
</body>
|
||
</html>
|