245 lines
9.6 KiB
HTML
245 lines
9.6 KiB
HTML
<!doctype html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>口腔三维扫描采集与评分对比终端</title>
|
||
<link rel="stylesheet" href="./styles.css" />
|
||
</head>
|
||
<body>
|
||
<div class="app-shell">
|
||
<header class="topbar">
|
||
<div>
|
||
<p class="eyebrow">DENTAL 3D SCAN TERMINAL</p>
|
||
<h1>口腔三维扫描采集与评分对比终端</h1>
|
||
</div>
|
||
<div class="status-strip" aria-label="系统状态">
|
||
<span class="pulse"></span>
|
||
<span>单台扫描模式</span>
|
||
<strong>7-10分钟 / 50个模型</strong>
|
||
</div>
|
||
</header>
|
||
|
||
<main class="workbench">
|
||
<section class="panel scanner-panel" aria-labelledby="scan-title">
|
||
<div class="panel-head">
|
||
<div>
|
||
<p class="eyebrow">HIGH-SPEED ACQUISITION</p>
|
||
<h2 id="scan-title">高速扫描采集</h2>
|
||
</div>
|
||
<div class="terminal-badge">采集端 01</div>
|
||
</div>
|
||
|
||
<div class="scan-hero">
|
||
<div class="scan-window" aria-label="扫描采集动画">
|
||
<div class="scanner-rail"></div>
|
||
<div class="scanner-head">
|
||
<span></span>
|
||
</div>
|
||
<div class="scan-beam"></div>
|
||
<div class="turntable">
|
||
<div class="plaster-base"></div>
|
||
<div class="mini-arch" aria-hidden="true">
|
||
<i></i><i></i><i></i><i></i><i></i><i></i><i></i>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="scan-readout">
|
||
<div class="readout-main">
|
||
<span id="scanCount">00</span>
|
||
<small>/ 50</small>
|
||
</div>
|
||
<p>7-10分钟随机总时长</p>
|
||
<div class="progress-track">
|
||
<span id="scanProgress"></span>
|
||
</div>
|
||
<div class="readout-grid">
|
||
<div>
|
||
<span id="scanTimer">00:00</span>
|
||
<small>扫描用时</small>
|
||
</div>
|
||
<div>
|
||
<span id="scanRate">0.0</span>
|
||
<small>模型/分钟</small>
|
||
</div>
|
||
</div>
|
||
<label class="scan-speed-control" id="scanSpeedControl">
|
||
<span>扫描速率</span>
|
||
<select id="scanSpeedSelect" aria-label="扫描速率">
|
||
<option value="1">1倍</option>
|
||
<option value="2">2倍</option>
|
||
<option value="3">3倍</option>
|
||
<option value="4">4倍</option>
|
||
<option value="5">5倍</option>
|
||
<option value="6">6倍</option>
|
||
<option value="7">7倍</option>
|
||
<option value="8">8倍</option>
|
||
<option value="9">9倍</option>
|
||
<option value="10">10倍</option>
|
||
</select>
|
||
<em class="speed-tooltip">速率越快，精度越低</em>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="control-row" role="group" aria-label="扫描控制">
|
||
<button class="primary-btn" id="scanStart" type="button">
|
||
<span class="icon">▶</span>
|
||
开始采集
|
||
</button>
|
||
<button class="ghost-btn icon-btn" id="scanReset" type="button" aria-label="重置采集">↺</button>
|
||
</div>
|
||
|
||
<div class="segmented" role="group" aria-label="扫描模型类型">
|
||
<button class="segment active" type="button" data-model="二倍石膏牙">二倍石膏牙</button>
|
||
<button class="segment" type="button" data-model="一倍石膏牙">一倍石膏牙</button>
|
||
<button class="segment" type="button" data-model="牙列模型">牙列模型</button>
|
||
</div>
|
||
|
||
<div class="file-zone progress-zone" aria-label="扫描进度">
|
||
<span>扫描进度</span>
|
||
<strong id="scanProgressText">已完成 0 / 50</strong>
|
||
<small id="scanDurationText">预计总时长 7-10分钟</small>
|
||
</div>
|
||
|
||
<div class="queue" aria-label="采集队列" id="scanQueue"></div>
|
||
</section>
|
||
|
||
<section class="panel compare-panel" aria-labelledby="compare-title">
|
||
<div class="panel-head">
|
||
<div>
|
||
<p class="eyebrow">MODEL SCORING COMPARISON</p>
|
||
<h2 id="compare-title">标准模型与学生评分模型对比</h2>
|
||
</div>
|
||
<div class="score-pill">
|
||
<span>综合评分</span>
|
||
<strong id="scoreValue">92.6</strong>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="compare-toolbar">
|
||
<div class="angle-group" role="group" aria-label="视角切换">
|
||
<button class="angle-btn active" type="button" data-view="front">正面</button>
|
||
<button class="angle-btn" type="button" data-view="top">咬合面</button>
|
||
<button class="angle-btn" type="button" data-view="left">左侧</button>
|
||
<button class="angle-btn" type="button" data-view="right">右侧</button>
|
||
</div>
|
||
<label class="zoom-control">
|
||
<span>缩放</span>
|
||
<input id="zoomRange" type="range" min="70" max="145" value="100" />
|
||
</label>
|
||
<label class="switch">
|
||
<input id="heatToggle" type="checkbox" checked />
|
||
<span></span>
|
||
偏差热力
|
||
</label>
|
||
<button class="score-action" id="scoreButton" type="button">评分</button>
|
||
</div>
|
||
|
||
<div class="viewer" id="viewer">
|
||
<article class="model-card">
|
||
<div class="card-title">
|
||
<span>标准 3D 模型</span>
|
||
<small id="standardName">标准模型.stl / .ply</small>
|
||
</div>
|
||
<div class="model-space" data-surface="standard">
|
||
<div class="axis-mark">X/Y/Z</div>
|
||
<canvas class="stl-canvas" id="standardCanvas" aria-label="标准STL模型预览"></canvas>
|
||
<div class="dental-object standard-object" aria-hidden="true"></div>
|
||
</div>
|
||
<label class="mini-file">
|
||
选择标准STL / PLY模型
|
||
<input class="model-file-input" id="standardFile" type="file" accept=".stl,.ply" />
|
||
</label>
|
||
</article>
|
||
|
||
<article class="model-card">
|
||
<div class="card-title">
|
||
<span>学生评分 3D 模型</span>
|
||
<small id="studentName">学生作品.stl / .ply</small>
|
||
</div>
|
||
<div class="model-space" data-surface="student">
|
||
<div class="axis-mark">X/Y/Z</div>
|
||
<canvas class="stl-canvas" id="studentCanvas" aria-label="学生STL模型预览"></canvas>
|
||
<div class="dental-object student-object" aria-hidden="true"></div>
|
||
</div>
|
||
<label class="mini-file">
|
||
选择学生STL / PLY模型
|
||
<input class="model-file-input" id="studentFile" type="file" accept=".stl,.ply" />
|
||
</label>
|
||
</article>
|
||
</div>
|
||
|
||
<div class="metric-row" aria-label="评分指标">
|
||
<div class="metric">
|
||
<span>边缘密合</span>
|
||
<strong>94%</strong>
|
||
</div>
|
||
<div class="metric">
|
||
<span>轴面形态</span>
|
||
<strong>90%</strong>
|
||
</div>
|
||
<div class="metric">
|
||
<span>咬合偏差</span>
|
||
<strong>0.18mm</strong>
|
||
</div>
|
||
<div class="metric">
|
||
<span>邻接关系</span>
|
||
<strong>91%</strong>
|
||
</div>
|
||
</div>
|
||
|
||
</section>
|
||
</main>
|
||
</div>
|
||
|
||
<div class="modal-backdrop" id="modelAlert" hidden>
|
||
<div class="modal" role="dialog" aria-modal="true" aria-labelledby="modelAlertTitle">
|
||
<h3 id="modelAlertTitle">请选择模型</h3>
|
||
<p id="modelAlertText">评分前需要先选择标准模型和学生模型。</p>
|
||
<button class="primary-btn modal-close" id="modelAlertClose" type="button">知道了</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="modal-backdrop score-modal-backdrop" id="scoreModal" hidden>
|
||
<div class="score-report score-report-dialog" id="scoreReport" role="dialog" aria-modal="true" aria-labelledby="scoreReportTitle">
|
||
<div class="report-head">
|
||
<div>
|
||
<p class="eyebrow">SCORING DETAIL</p>
|
||
<h3 id="scoreReportTitle">牙体雕刻评分表</h3>
|
||
</div>
|
||
<div class="report-actions">
|
||
<strong id="reportTotal">0.0</strong>
|
||
<button class="ghost-btn icon-btn" id="scoreModalClose" type="button" aria-label="关闭评分表">×</button>
|
||
</div>
|
||
</div>
|
||
<div class="score-table-wrap">
|
||
<table class="score-table">
|
||
<thead>
|
||
<tr>
|
||
<th>考核内容</th>
|
||
<th>考核要点</th>
|
||
<th>配分</th>
|
||
<th>得分</th>
|
||
<th>合计</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="scoreTableBody"></tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script type="importmap">
|
||
{
|
||
"imports": {
|
||
"three": "./node_modules/three/build/three.module.js",
|
||
"three/addons/": "./node_modules/three/examples/jsm/"
|
||
}
|
||
}
|
||
</script>
|
||
<script type="module" src="./script.js"></script>
|
||
</body>
|
||
</html>
|