58 lines
4.1 KiB
HTML
58 lines
4.1 KiB
HTML
<!doctype html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>连接线子模型 · 操作演示</title>
|
||
<link rel="stylesheet" href="./styles.css">
|
||
<script src="./app.js" defer></script>
|
||
</head>
|
||
<body>
|
||
<header class="topbar">
|
||
<div><strong>System Simulation</strong><span class="demo-tag">子模型操作演示</span></div>
|
||
<div class="top-actions"><a href="/">返回主应用</a><button id="reset" type="button">恢复初始示例</button></div>
|
||
</header>
|
||
<nav class="workflow" aria-label="建模步骤">
|
||
<button type="button" data-mode="sketch" aria-pressed="true"><span>1</span>绘图</button>
|
||
<button type="button" data-mode="submodel" aria-pressed="false"><span>2</span>子模型</button>
|
||
<button type="button" data-mode="parameters" aria-pressed="false"><span>3</span>参数</button>
|
||
<button type="button" data-mode="check" aria-pressed="false"><span>4</span>检查</button>
|
||
<span class="workflow-note">独立配置演示 · 不执行仿真</span>
|
||
</nav>
|
||
<main class="workspace">
|
||
<section class="canvas-pane" aria-label="局部气动网络">
|
||
<div class="canvas-toolbar"><span id="mode-hint">示例已连线，可进入“子模型”；也可删除连线后重新连接端口。</span><button type="button" id="next-mode">选择子模型 →</button></div>
|
||
<div id="canvas" class="canvas">
|
||
<svg id="wires" viewBox="0 0 900 500" aria-label="连接线" role="group"></svg>
|
||
<div class="component tank" style="--x:16%;--y:54%"><div class="tank-symbol"></div><strong>储气罐 A</strong><small>提供温度、压力</small></div>
|
||
<div class="component junction" style="--x:48%;--y:54%"><div class="junction-symbol"></div><strong>节点 N1</strong><small>P4NODE2 · 固定</small></div>
|
||
<div class="component valve" style="--x:84%;--y:54%"><div class="valve-symbol">↗</div><strong>阀门 B</strong><small>需要温度、压力</small></div>
|
||
<div class="component plug" style="--x:48%;--y:14%"><div class="plug-symbol"></div><strong>封堵 C</strong></div>
|
||
<div class="component plug" style="--x:48%;--y:87%"><div class="plug-symbol"></div><strong>封堵 D</strong></div>
|
||
<div id="ports"></div>
|
||
<div class="canvas-caption">只展示本次选型涉及的端口；部件位置及 pnode 子模型固定。</div>
|
||
</div>
|
||
<div class="connection-strip" id="connection-strip" aria-label="选择连接线"></div>
|
||
<div id="notice" role="status" aria-live="polite" class="notice">先保留连接，再确定每条线的计算模型。</div>
|
||
</section>
|
||
<aside class="inspector" aria-label="连线设置">
|
||
<div class="inspector-title"><strong id="inspector-title">连线</strong><span id="selected-id"></span></div>
|
||
<div id="inspector-body" class="inspector-body"></div>
|
||
</aside>
|
||
</main>
|
||
<footer class="statusbar"><span id="progress"></span><span id="save-state">演示独立保存</span></footer>
|
||
<dialog id="model-dialog" aria-labelledby="dialog-title">
|
||
<form method="dialog" class="dialog-shell">
|
||
<div class="dialog-header"><div><h1 id="dialog-title">选择连接线子模型</h1><div id="dialog-endpoints" class="secondary"></div></div><button type="submit" class="icon-button" aria-label="关闭子模型窗口">×</button></div>
|
||
<div class="dialog-content">
|
||
<div class="selection-context"><strong>兼容的子模型</strong><span>方向自动匹配</span></div>
|
||
<div id="model-options" role="radiogroup" aria-label="兼容子模型"></div>
|
||
<div class="choice-note">优先项按接口匹配与模型复杂度排序。是否计入压降、储气，请按实际管路选择。</div>
|
||
<details class="compatibility-details"><summary>端口需求与其他型号</summary><div id="port-requirements"></div><div id="excluded-models"></div></details>
|
||
</div>
|
||
<div class="dialog-footer"><button type="submit">取消</button><button id="apply-model" type="button">应用</button><button id="apply-next" type="button" class="primary">应用并下一条</button></div>
|
||
</form>
|
||
</dialog>
|
||
</body>
|
||
</html>
|