前端进度条性能优化、仿真结束后后处理优化；后端C代码生成流程优化：先识别来源，再按照已知未知量需求排序，最后局部求解
This commit is contained in:
ljz committed
1 parent
0dcb465d84
commit
91bd9fb252
77 files changed
+11223
-551
No files matched your search
@@ -0,0 +1,45 @@
|
||||
# Amesim 风格的连接线子模型演示
|
||||
|
||||
这是一个独立的交互 demo，用于评估“绘图 → 子模型 → 参数 → 检查”的操作方式。
|
||||
|
||||
## 打开与操作
|
||||
|
||||
在项目已有 Vite 开发服务运行时，打开：
|
||||
|
||||
`http://127.0.0.1:5173/demos/amesim-submodels/index.html`
|
||||
|
||||
1. 示例预置四条尚未选型的连接。进入“子模型”，点击连线或画布下方的连线按钮。
|
||||
2. 弹窗优先展示兼容型号及物理作用；“端口需求与其他型号”默认折叠。
|
||||
3. “应用并下一条”依次处理未选型连线，完成后进入参数阶段。管长、内径需要用户填写。
|
||||
4. 进入“检查”，查看示例端口匹配和必填参数；问题项可以直接定位处理。
|
||||
5. 绘图模式下可删除一条连线，再依次点击两个空闲端口重连。Esc 取消尚未完成的连线。
|
||||
|
||||
示例中的 P4NODE2 始终以端口 2 为参考，不提供节点子模型切换。
|
||||
|
||||
## 范围
|
||||
|
||||
- 仅包含固定的局部端口示例和 DIRECT、PNL00R、PNL0001/2/3 的接口匹配规则。
|
||||
- 匹配检查基于温度/压力的供需关系，质量/能量流率采用互补方向；不是正式全网依赖分析。
|
||||
- 优先项按接口兼容和模型复杂度排序，不代表对具体工程的物理模型推荐。各型号显示是否包含压降、储气及状态数量。
|
||||
- 管路方向由端口关系决定，与画线顺序和实际气流方向无关。
|
||||
- 管路配置只是交互数据，不生成正式 XML，不调用编译器、不执行仿真。
|
||||
- 参数使用界面显示单位；尚未接入 SI 转换、介质、换热、完整初始条件检查等生产能力。
|
||||
- 不复制 Siemens 数值代码。示例接口规则根据本机已有 Amesim 2404 管路源文件的公开接口说明整理。
|
||||
- 不修改主应用、正式组件、pnode 方程、求解器或已有工程数据。没有引入 npm 依赖。
|
||||
|
||||
## 保存与恢复
|
||||
|
||||
浏览器只使用独立的 localStorage 键：
|
||||
|
||||
`system-simulation:amesim-submodel-demo:v1`
|
||||
|
||||
- 点击页面右上角“恢复初始示例”，可以清空本演示的选型与参数，重新体验。
|
||||
- 返回原系统：点击“返回主应用”或打开 `http://127.0.0.1:5173/`。
|
||||
- 撤回本次 demo：删除 `frontend/public/demos/amesim-submodels/` 这个目录即可。无需回退任何现有源码。
|
||||
- 若只清理浏览器数据，可在该页面的开发者控制台执行 `localStorage.removeItem('system-simulation:amesim-submodel-demo:v1')`，然后刷新。
|
||||
|
||||
注意：这个目录位于 Vite 的 public 下，正常打包会把它作为静态文件带入构建产物。正式发布前，如尚未决定保留，应先移除这个 demo 目录。
|
||||
|
||||
## 本次验证
|
||||
|
||||
2026-09-10：JavaScript 语法及三个静态入口 HTTP 检查通过。Edge 浏览器完成兼容型号筛选、连续选型、反向端口匹配、参数校验、刷新恢复、更换型号保留共同参数、删除重连、独立重置和窄屏检查。未发起 `/api/` 请求。诊断截图保存在 Git 忽略的 `test/amesim-submodel-demo/`。
|
||||
@@ -0,0 +1,256 @@
|
||||
(() => {
|
||||
'use strict';
|
||||
const STORAGE_KEY = 'system-simulation:amesim-submodel-demo:v1';
|
||||
const $ = id => document.getElementById(id);
|
||||
const escape = value => String(value).replace(/[&<>"']/g, char => ({ '&': '&', '<': '<', '>': '>', '"': '"', "'": ''' })[char]);
|
||||
// Local, deliberately bounded demonstration of variable-level interface matching.
|
||||
// These declarations are not the production component catalogue or a numerical solver.
|
||||
const ports = {
|
||||
'A.1': { label: '储气罐 A · 端口 1', component: 'A', state: 'out' },
|
||||
'N1.1': { label: '节点 N1 · 端口 1', component: 'N1', state: 'out', number: '1' },
|
||||
'N1.2': { label: '节点 N1 · 端口 2（参考）', component: 'N1', state: 'in', number: '2 参考' },
|
||||
'N1.3': { label: '节点 N1 · 端口 3', component: 'N1', state: 'out', number: '3' },
|
||||
'N1.4': { label: '节点 N1 · 端口 4', component: 'N1', state: 'out', number: '4' },
|
||||
'B.2': { label: '阀门 B · 端口 2', component: 'B', state: 'in' },
|
||||
'C.1': { label: '封堵 C · 端口 1', component: 'C', state: 'in' },
|
||||
'D.1': { label: '封堵 D · 端口 1', component: 'D', state: 'in' },
|
||||
};
|
||||
const fields = {
|
||||
length: { label: '管长（m）', min: 0, exclusive: true, step: 'any', value: '' },
|
||||
diameter: { label: '内径（mm）', min: 0, exclusive: true, step: 'any', value: '' },
|
||||
roughness: { label: '相对粗糙度', min: 0, max: 0.1, step: 'any', value: '0.00001' },
|
||||
pressure: { label: '初始压力（bar，绝压）', min: 0, exclusive: true, step: 'any', value: '1' },
|
||||
temperature: { label: '初始温度（K）', min: 0, exclusive: true, step: 'any', value: '293.15' },
|
||||
pressure2: { label: '管路端口 2 初始压力（bar，绝压）', min: 0, exclusive: true, step: 'any', value: '1' },
|
||||
temperature2: { label: '管路端口 2 初始温度（K）', min: 0, exclusive: true, step: 'any', value: '293.15' },
|
||||
};
|
||||
const models = [
|
||||
{ id: 'DIRECT', label: '理想连接', ends: null, effect: '不计管路压降，不增加储气容积。', fields: [] },
|
||||
{ id: 'PNL00R', label: '阻性管路', ends: ['in', 'in'], effect: '考虑摩擦压降；不增加储气状态。', fields: ['length', 'diameter', 'roughness'] },
|
||||
{ id: 'PNL0001', label: '单端储气管路', ends: ['in', 'out'], effect: '考虑摩擦压降；一处储气容积，2 个热力状态。', fields: ['length', 'diameter', 'roughness', 'pressure', 'temperature'] },
|
||||
{ id: 'PNL0002', label: '中间储气管路', ends: ['in', 'in'], effect: '考虑摩擦压降；中间储气容积，2 个热力状态。', fields: ['length', 'diameter', 'roughness', 'pressure', 'temperature'] },
|
||||
{ id: 'PNL0003', label: '双端储气管路', ends: ['out', 'out'], effect: '考虑摩擦压降；两端储气容积，4 个热力状态。', fields: ['length', 'diameter', 'roughness', 'pressure', 'temperature', 'pressure2', 'temperature2'] },
|
||||
];
|
||||
const modelById = id => models.find(model => model.id === id);
|
||||
const initial = () => ({ version: 1, mode: 'sketch', selected: 'L1', edges: [
|
||||
{ id: 'L1', a: 'A.1', b: 'N1.1', model: null, params: {} },
|
||||
{ id: 'L2', a: 'N1.2', b: 'B.2', model: null, params: {} },
|
||||
{ id: 'L3', a: 'C.1', b: 'N1.3', model: null, params: {} },
|
||||
{ id: 'L4', a: 'N1.4', b: 'D.1', model: null, params: {} },
|
||||
] });
|
||||
let state = initial(), pendingPort = null, dialogEdge = null, positions = {};
|
||||
let storageAvailable = true;
|
||||
function matches(edge, model) {
|
||||
const a = ports[edge.a].state, b = ports[edge.b].state;
|
||||
if (!model.ends) return a !== b;
|
||||
return (a !== model.ends[0] && b !== model.ends[1]) || (a !== model.ends[1] && b !== model.ends[0]);
|
||||
}
|
||||
function candidates(edge) { return models.filter(model => matches(edge, model)); }
|
||||
function load() {
|
||||
try {
|
||||
const saved = JSON.parse(localStorage.getItem(STORAGE_KEY) || 'null');
|
||||
if (!saved || saved.version !== 1 || !Array.isArray(saved.edges) || saved.edges.length > 4) return;
|
||||
const occupied = new Set(), ids = new Set();
|
||||
const valid = saved.edges.every(edge => {
|
||||
if (!edge || !/^L[1-9]\d*$/.test(edge.id) || ids.has(edge.id) || !ports[edge.a] || !ports[edge.b] ||
|
||||
ports[edge.a].component === ports[edge.b].component || occupied.has(edge.a) || occupied.has(edge.b)) return false;
|
||||
if (edge.model !== null && (!modelById(edge.model) || !matches(edge, modelById(edge.model)))) return false;
|
||||
ids.add(edge.id); occupied.add(edge.a); occupied.add(edge.b);
|
||||
return true;
|
||||
});
|
||||
if (!valid) return;
|
||||
state = {
|
||||
version: 1,
|
||||
mode: ['sketch', 'submodel', 'parameters', 'check'].includes(saved.mode) ? saved.mode : 'sketch',
|
||||
selected: ids.has(saved.selected) ? saved.selected : saved.edges[0]?.id || null,
|
||||
edges: saved.edges.map(edge => ({ id: edge.id, a: edge.a, b: edge.b, model: edge.model,
|
||||
params: Object.fromEntries(Object.keys(fields).filter(key => ['string', 'number'].includes(typeof edge.params?.[key])).map(key => [key, String(edge.params[key]).slice(0, 64)])) })),
|
||||
};
|
||||
} catch { storageAvailable = false; }
|
||||
}
|
||||
function save() {
|
||||
try { localStorage.setItem(STORAGE_KEY, JSON.stringify(state)); storageAvailable = true; }
|
||||
catch { storageAvailable = false; }
|
||||
$('save-state').textContent = storageAvailable ? '仅保存此演示 · 与正式工程分离' : '当前浏览器未保存 · 刷新将丢失演示修改';
|
||||
}
|
||||
function selected() { return state.edges.find(edge => edge.id === state.selected); }
|
||||
function message(text) { $('notice').textContent = text; }
|
||||
function validField(key, value) {
|
||||
const field = fields[key], number = Number(value);
|
||||
return String(value ?? '').trim() !== '' && Number.isFinite(number) && (field.exclusive ? number > field.min : number >= field.min) && (field.max === undefined || number <= field.max);
|
||||
}
|
||||
function missingFields(edge) {
|
||||
return (modelById(edge.model)?.fields || []).filter(key => !validField(key, edge.params[key]));
|
||||
}
|
||||
function edgeStatus(edge) {
|
||||
if (!edge.model) return '未选子模型';
|
||||
return missingFields(edge).length ? '待填参数' : '已配置';
|
||||
}
|
||||
function orientation(edge, model) {
|
||||
if (!model.ends || model.ends[0] === model.ends[1]) return '两端接口对称';
|
||||
const forward = ports[edge.a].state !== model.ends[0];
|
||||
return `管路端口 1 → ${ports[forward ? edge.a : edge.b].label}；端口 2 → ${ports[forward ? edge.b : edge.a].label}`;
|
||||
}
|
||||
function updateProgress() {
|
||||
const chosen = state.edges.filter(edge => edge.model).length;
|
||||
const configured = state.edges.filter(edge => edge.model && missingFields(edge).length === 0).length;
|
||||
$('progress').textContent = `${state.edges.length} 条连接 · ${chosen} 条已选子模型 · ${configured} 条参数完整`;
|
||||
}
|
||||
function layout() {
|
||||
const width = $('canvas').clientWidth, height = $('canvas').clientHeight;
|
||||
$('wires').setAttribute('viewBox', `0 0 ${width} ${height}`);
|
||||
positions = {
|
||||
'A.1': [width * .16 + 29, height * .54],
|
||||
'N1.1': [width * .48 - 19, height * .54], 'N1.2': [width * .48 + 19, height * .54],
|
||||
'N1.3': [width * .48, height * .54 - 19], 'N1.4': [width * .48, height * .54 + 19],
|
||||
'B.2': [width * .84 - 29, height * .54],
|
||||
'C.1': [width * .48, height * .14 + 4], 'D.1': [width * .48, height * .87 - 4],
|
||||
};
|
||||
$('ports').innerHTML = Object.entries(ports).map(([id, port]) => `<button type="button" class="port ${id === pendingPort ? 'pending' : ''} ${id === 'N1.2' ? 'reference' : ''}" style="--x:${positions[id][0]}px;--y:${positions[id][1]}px" data-port="${id}" aria-label="${escape(port.label)}">${port.number ? `<span>${escape(port.number)}</span>` : ''}</button>`).join('');
|
||||
renderWires();
|
||||
}
|
||||
function renderWires() {
|
||||
if (!positions['A.1']) return;
|
||||
$('wires').innerHTML = state.edges.map(edge => {
|
||||
const [ax, ay] = positions[edge.a], [bx, by] = positions[edge.b];
|
||||
const horizontal = Math.abs(bx - ax) >= Math.abs(by - ay);
|
||||
const path = horizontal ? `M${ax},${ay} H${(ax + bx) / 2} V${by} H${bx}` : `M${ax},${ay} V${(ay + by) / 2} H${bx} V${by}`;
|
||||
const x = horizontal ? (ax + bx) / 2 : (ax + bx) / 2 + 13;
|
||||
const y = horizontal ? (ay + by) / 2 - 12 : (ay + by) / 2;
|
||||
const label = state.mode === 'sketch' ? edge.id : `${edge.id} · ${edge.model || '未选'}`;
|
||||
return `<g><path class="wire-line ${edge.model ? 'configured' : ''} ${edge.id === state.selected ? 'selected' : ''}" d="${path}"/><path data-edge="${edge.id}" class="wire-hit" d="${path}"/><text class="wire-label" x="${x}" y="${y}" text-anchor="${horizontal ? 'middle' : 'start'}">${escape(label)}</text></g>`;
|
||||
}).join('');
|
||||
$('connection-strip').innerHTML = state.edges.map(edge => `<button type="button" data-edge="${edge.id}" aria-pressed="${edge.id === state.selected}"><span class="dot ${edge.model ? 'ready' : ''}"></span>${edge.id}<span>${escape(state.mode === 'sketch' ? '连接线' : edge.model || '未选')}</span></button>`).join('') || '<span class="secondary">依次点击两个空闲端口创建连接。</span>';
|
||||
}
|
||||
function setMode(mode) { state.mode = mode; pendingPort = null; render(); save(); }
|
||||
function selectEdge(id, open = false) {
|
||||
state.selected = id; pendingPort = null; render(); save();
|
||||
if (open && state.mode === 'submodel') openChooser(id);
|
||||
}
|
||||
function renderInspector() {
|
||||
const edge = selected();
|
||||
$('inspector-title').textContent = state.mode === 'check' ? '配置检查' : state.mode === 'parameters' ? '连线参数' : '连线';
|
||||
$('selected-id').textContent = state.mode === 'check' ? '局部演示' : edge?.id || '';
|
||||
if (state.mode === 'check') { renderChecks(); return; }
|
||||
if (!edge) { $('inspector-body').innerHTML = '<p class="secondary">选择连接线，或在绘图模式连接两个空闲端口。</p>'; return; }
|
||||
const model = modelById(edge.model);
|
||||
let html = `<div class="endpoint"><div>${escape(ports[edge.a].label)}</div><div>↔ ${escape(ports[edge.b].label)}</div></div>`;
|
||||
if (state.mode === 'sketch') {
|
||||
html += '<p class="secondary">先完成连接。进入子模型阶段后，为连接线选择计算模型。</p><div class="inspector-actions"><button type="button" class="primary" data-action="submodel">进入子模型</button><button type="button" data-action="delete">删除此连线</button></div>';
|
||||
} else {
|
||||
html += `<div class="section-label">当前子模型</div><div class="model-name">${escape(model?.id || '尚未选择')}</div><div class="secondary">${escape(model?.effect || '根据两端接口筛选，保留用户选择。')}</div>`;
|
||||
if (model) html += `<p class="secondary">${escape(orientation(edge, model))}</p>`;
|
||||
html += `<div class="inspector-actions"><button type="button" class="${state.mode === 'submodel' ? 'primary' : ''}" data-action="choose">${model ? '更换子模型…' : '选择子模型…'}</button>${state.mode === 'submodel' && model ? '<button type="button" data-action="parameters">填写参数</button>' : ''}</div>`;
|
||||
if (state.mode === 'parameters' && model) {
|
||||
html += model.fields.length ? `<form class="parameter-form" novalidate>${model.fields.map(key => {
|
||||
const field = fields[key];
|
||||
const label = model.id === 'PNL0003' && ['pressure', 'temperature'].includes(key) ? '管路端口 1 ' + field.label : field.label;
|
||||
return `<label for="param-${key}">${escape(label)}<input id="param-${key}" data-parameter="${key}" type="number" min="${field.min}" ${field.max !== undefined ? `max="${field.max}"` : ''} step="${field.step}" value="${escape(edge.params[key] ?? '')}" placeholder="填写实际值" aria-invalid="${!validField(key, edge.params[key])}"></label>`;
|
||||
}).join('')}</form><div class="parameter-state" id="parameter-state"></div>` : '<p class="secondary">理想连接无需管路参数。</p>';
|
||||
}
|
||||
}
|
||||
$('inspector-body').innerHTML = html;
|
||||
updateParameterState();
|
||||
}
|
||||
function updateParameterState() {
|
||||
const target = $('parameter-state'), edge = selected();
|
||||
if (!target || !edge) return;
|
||||
const missing = missingFields(edge);
|
||||
target.classList.toggle('valid', missing.length === 0);
|
||||
target.textContent = missing.length ? `待填写或修正 ${missing.length} 项` : '参数完整 · 已保存到此演示';
|
||||
}
|
||||
function renderChecks() {
|
||||
const occupied = new Set(state.edges.flatMap(edge => [edge.a, edge.b]));
|
||||
const free = Object.keys(ports).filter(id => !occupied.has(id));
|
||||
const complete = !free.length && state.edges.every(edge => edge.model && matches(edge, modelById(edge.model)) && !missingFields(edge).length);
|
||||
$('inspector-body').innerHTML = `<div class="check-summary ${complete ? 'complete' : ''}">${complete ? '局部连接配置检查通过' : '还有配置需要完成'}</div><p class="secondary">此检查覆盖示例端口匹配和必填参数；未调用系统编译器或求解器。</p><div class="check-list">${state.edges.map(edge => `<div class="check-item ${edgeStatus(edge) === '已配置' ? 'complete' : ''}"><strong>${edge.id} · ${escape(edge.model || '未选')}</strong><div class="secondary">${escape(edgeStatus(edge))}</div>${edgeStatus(edge) !== '已配置' ? `<button type="button" data-fix="${edge.id}">${edge.model ? '填写参数' : '选择子模型'}</button>` : ''}</div>`).join('')}${free.length ? `<div class="check-item"><strong>${free.length} 个示例端口未连接</strong><div class="secondary">${free.map(id => escape(ports[id].label)).join('、')}</div><button type="button" data-action="sketch">返回绘图</button></div>` : ''}</div>`;
|
||||
}
|
||||
function render() {
|
||||
document.querySelectorAll('[data-mode]').forEach(button => button.setAttribute('aria-pressed', String(button.dataset.mode === state.mode)));
|
||||
const hints = {
|
||||
sketch: '示例已连线，可进入“子模型”；也可删除连线后重新连接端口。',
|
||||
submodel: '点击连接线选择兼容子模型。pnode 保持不变，管路方向自动匹配。',
|
||||
parameters: '点击管路填写实际尺寸。理想连接无需参数。',
|
||||
check: '检查本示例的端口匹配和必填参数。',
|
||||
};
|
||||
$('mode-hint').textContent = hints[state.mode];
|
||||
const next = { sketch: '选择子模型 →', submodel: '填写参数 →', parameters: '检查配置 →', check: '返回绘图' };
|
||||
$('next-mode').textContent = next[state.mode];
|
||||
layout(); renderInspector(); updateProgress();
|
||||
}
|
||||
function openChooser(id) {
|
||||
const edge = state.edges.find(item => item.id === id);
|
||||
if (!edge) return;
|
||||
dialogEdge = id;
|
||||
const available = candidates(edge), selectedModel = edge.model || available[0]?.id;
|
||||
$('dialog-title').textContent = `选择 ${id} 的子模型`;
|
||||
$('dialog-endpoints').textContent = `${ports[edge.a].label} ↔ ${ports[edge.b].label}`;
|
||||
$('model-options').innerHTML = available.map((model, index) => `<label class="model-option"><input type="radio" name="model" value="${model.id}" ${model.id === selectedModel ? 'checked' : ''}><span><strong>${model.id}</strong>${escape(model.label)} ${index === 0 ? '<span class="recommendation">接口匹配优先项</span>' : ''}<small>${escape(model.effect)}</small></span></label>`).join('');
|
||||
const describe = id => `${ports[id].label}：${ports[id].state === 'out' ? '提供温度、压力，接收质量与能量流率' : '接收温度、压力，提供质量与能量流率'}`;
|
||||
$('port-requirements').innerHTML = `<div>${escape(describe(edge.a))}</div><div>${escape(describe(edge.b))}</div>`;
|
||||
$('excluded-models').innerHTML = models.filter(model => !matches(edge, model)).map(model => `<div class="excluded-model"><span>${model.id}</span><span>端口变量供需不匹配</span></div>`).join('');
|
||||
$('apply-model').disabled = !available.length;
|
||||
$('apply-next').disabled = !available.length;
|
||||
document.querySelector('.compatibility-details').open = false;
|
||||
if (!$('model-dialog').open) $('model-dialog').showModal();
|
||||
}
|
||||
function applyModel(next) {
|
||||
const edge = state.edges.find(item => item.id === dialogEdge);
|
||||
const id = document.querySelector('input[name="model"]:checked')?.value;
|
||||
const model = modelById(id);
|
||||
if (!edge || !model || !matches(edge, model)) return;
|
||||
edge.model = id;
|
||||
// Keep shared inputs when changing a model. Inactive inputs remain private to this draft.
|
||||
model.fields.forEach(key => { if (edge.params[key] === undefined) edge.params[key] = fields[key].value; });
|
||||
state.selected = edge.id;
|
||||
$('model-dialog').close(); render(); save();
|
||||
message(`${edge.id} 已选择 ${id}。${model.effect}`);
|
||||
if (next) {
|
||||
const unassigned = state.edges.find(item => !item.model);
|
||||
if (unassigned) { selectEdge(unassigned.id); openChooser(unassigned.id); }
|
||||
else { setMode('parameters'); state.selected = state.edges.find(item => missingFields(item).length)?.id || edge.id; render(); save(); message('所有连接线已选型。填写实际管长、内径后检查配置。'); }
|
||||
}
|
||||
}
|
||||
function portClick(id) {
|
||||
if (state.mode !== 'sketch') { message('如需修改连接，请切换到“绘图”。'); return; }
|
||||
if (pendingPort === id) { pendingPort = null; layout(); message('已取消连线。'); return; }
|
||||
if (state.edges.some(edge => edge.a === id || edge.b === id)) { message('该端口已有连接。选中原连线可删除后重连。'); return; }
|
||||
if (!pendingPort) { pendingPort = id; layout(); message(`起点：${ports[id].label}。请选择另一个部件的空闲端口。`); return; }
|
||||
if (ports[pendingPort].component === ports[id].component) { message('请选择另一个部件的端口。'); return; }
|
||||
let index = 1;
|
||||
while (state.edges.some(edge => edge.id === `L${index}`)) index++;
|
||||
const edge = { id: `L${index}`, a: pendingPort, b: id, model: null, params: {} };
|
||||
state.edges.push(edge); state.selected = edge.id; pendingPort = null; render(); save();
|
||||
message(`${edge.id} 已连接。子模型稍后选择。`);
|
||||
}
|
||||
document.querySelectorAll('[data-mode]').forEach(button => button.addEventListener('click', () => setMode(button.dataset.mode)));
|
||||
$('next-mode').addEventListener('click', () => setMode({ sketch: 'submodel', submodel: 'parameters', parameters: 'check', check: 'sketch' }[state.mode]));
|
||||
$('wires').addEventListener('click', event => { const target = event.target.closest('[data-edge]'); if (target) selectEdge(target.dataset.edge, true); });
|
||||
$('connection-strip').addEventListener('click', event => { const target = event.target.closest('[data-edge]'); if (target) selectEdge(target.dataset.edge, true); });
|
||||
$('ports').addEventListener('click', event => { const target = event.target.closest('[data-port]'); if (target) portClick(target.dataset.port); });
|
||||
$('inspector-body').addEventListener('click', event => {
|
||||
const fix = event.target.closest('[data-fix]');
|
||||
if (fix) { state.selected = fix.dataset.fix; const edge = selected(); setMode(edge.model ? 'parameters' : 'submodel'); if (!edge.model) openChooser(edge.id); return; }
|
||||
const action = event.target.closest('[data-action]')?.dataset.action;
|
||||
if (action === 'choose') openChooser(state.selected);
|
||||
else if (action === 'delete') { state.edges = state.edges.filter(edge => edge.id !== state.selected); state.selected = state.edges[0]?.id || null; pendingPort = null; render(); save(); message('连线已删除。依次点击两个空闲端口即可重连。'); }
|
||||
else if (['sketch', 'submodel', 'parameters'].includes(action)) setMode(action);
|
||||
});
|
||||
$('inspector-body').addEventListener('input', event => {
|
||||
const key = event.target.dataset.parameter, edge = selected();
|
||||
if (!fields[key] || !edge) return;
|
||||
edge.params[key] = event.target.value;
|
||||
event.target.setAttribute('aria-invalid', String(!validField(key, event.target.value)));
|
||||
updateParameterState(); updateProgress(); save();
|
||||
});
|
||||
$('inspector-body').addEventListener('submit', event => event.preventDefault());
|
||||
$('apply-model').addEventListener('click', () => applyModel(false));
|
||||
$('apply-next').addEventListener('click', () => applyModel(true));
|
||||
$('reset').addEventListener('click', () => {
|
||||
$('model-dialog').close(); state = initial(); pendingPort = null; dialogEdge = null;
|
||||
render(); save(); message('已恢复最初的四条连接；此演示的选型和参数已清空。');
|
||||
});
|
||||
document.addEventListener('keydown', event => { if (event.key === 'Escape' && pendingPort) { pendingPort = null; layout(); message('已取消连线。'); } });
|
||||
load(); render(); save();
|
||||
new ResizeObserver(layout).observe($('canvas'));
|
||||
})();
|
||||
@@ -0,0 +1,57 @@
|
||||
<!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>
|
||||
@@ -0,0 +1,108 @@
|
||||
:root { font: 14px/1.5 Inter, "Segoe UI", "Microsoft YaHei", sans-serif; color: #263442; background: #edf1f5; --blue: #1764a0; --border: #cfd8e3; --muted: #647487; }
|
||||
* { box-sizing: border-box; }
|
||||
body { margin: 0; }
|
||||
button, input, select { font: inherit; }
|
||||
button, a { -webkit-tap-highlight-color: transparent; }
|
||||
button { cursor: pointer; color: #263442; border: 1px solid var(--border); background: #fff; border-radius: 4px; padding: 6px 12px; }
|
||||
button:hover { background: #f0f5fa; }
|
||||
button:disabled { cursor: default; opacity: .5; }
|
||||
button:focus-visible, a:focus-visible, input:focus-visible, summary:focus-visible { outline: 2px solid #247ec5; outline-offset: 3px; }
|
||||
a { color: var(--blue); text-decoration: none; }
|
||||
strong { font-weight: 600; }
|
||||
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 18px; background: #fff; border-bottom: 1px solid var(--border); }
|
||||
.topbar strong { font-size: 16px; }
|
||||
.demo-tag { display: inline-block; margin-left: 14px; color: var(--muted); font-size: 12px; }
|
||||
.top-actions { display: flex; align-items: center; gap: 18px; }
|
||||
.workflow { display: flex; align-items: center; gap: 4px; padding: 7px 18px; background: #f8fafc; border-bottom: 1px solid var(--border); }
|
||||
.workflow button { display: flex; align-items: center; gap: 8px; background: transparent; border-color: transparent; padding: 8px 18px; }
|
||||
.workflow button span { display: inline-grid; place-items: center; width: 21px; height: 21px; border-radius: 50%; background: #e3e9ef; font-size: 12px; }
|
||||
.workflow button[aria-pressed="true"] { background: #e7f1fa; border-color: #b4cfe4; color: #155a94; }
|
||||
.workflow button[aria-pressed="true"] span { background: var(--blue); color: #fff; }
|
||||
.workflow-note { margin-left: auto; color: var(--muted); font-size: 12px; }
|
||||
.workspace { display: grid; grid-template-columns: minmax(0, 1fr) 310px; min-height: calc(100vh - 143px); }
|
||||
.canvas-pane { min-width: 0; display: flex; flex-direction: column; }
|
||||
.canvas-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 16px; min-height: 55px; border-bottom: 1px solid var(--border); font-size: 12px; }
|
||||
.canvas-toolbar button { white-space: nowrap; font-size: 13px; }
|
||||
.canvas { position: relative; width: 100%; aspect-ratio: 1.8; min-height: 420px; max-height: 620px; background-color: #fff; background-image: radial-gradient(#d3dce5 .7px, transparent .7px); background-size: 20px 20px; }
|
||||
#wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
|
||||
.wire-line { fill: none; stroke: #8b9aaa; stroke-width: 2; stroke-dasharray: 6 4; vector-effect: non-scaling-stroke; pointer-events: none; }
|
||||
.wire-line.configured { stroke: #526c7c; stroke-dasharray: none; }
|
||||
.wire-line.selected { stroke: #1472bd; stroke-width: 3; }
|
||||
.wire-hit { fill: none; stroke: transparent; stroke-width: 20; pointer-events: stroke; cursor: pointer; }
|
||||
.wire-label { fill: #596f84; font: 13px "Segoe UI", "Microsoft YaHei", sans-serif; paint-order: stroke; stroke: #fff; stroke-width: 5px; stroke-linejoin: round; pointer-events: none; }
|
||||
.component { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; pointer-events: none; }
|
||||
.component strong { position: absolute; top: calc(100% + 12px); white-space: nowrap; font-size: 13px; }
|
||||
.component small { position: absolute; top: calc(100% + 33px); color: var(--muted); white-space: nowrap; font-size: 11px; }
|
||||
.junction strong, .junction small { left: calc(100% + 18px); }
|
||||
.tank-symbol { width: 58px; height: 76px; border: 2px solid #506579; border-radius: 16px; background: #f8fafc; }
|
||||
.junction-symbol { width: 38px; height: 38px; position: relative; }
|
||||
.junction-symbol::before, .junction-symbol::after { content: ""; position: absolute; background: #344f68; }
|
||||
.junction-symbol::before { width: 38px; height: 3px; top: 17px; }
|
||||
.junction-symbol::after { width: 3px; height: 38px; left: 17px; }
|
||||
.valve-symbol { width: 58px; height: 43px; display: grid; place-items: center; font: 33px/1 sans-serif; border: 2px solid #506579; background: #f8fafc; }
|
||||
.plug-symbol { width: 24px; height: 8px; background: repeating-linear-gradient(130deg, #506579 0 2px, #fff 2px 5px); border-bottom: 2px solid #506579; }
|
||||
.plug strong { top: -5px; left: calc(100% + 12px); }
|
||||
.port { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); width: 27px; height: 27px; padding: 0; display: grid; place-items: center; border: 0; background: transparent; border-radius: 50%; }
|
||||
.port::before { content: ""; width: 9px; height: 9px; background: #fff; border: 2px solid #4c6d87; border-radius: 50%; }
|
||||
.port.pending { background: #e3effa; }
|
||||
.port.pending::before { background: #1472bd; border-color: #1472bd; }
|
||||
.port span { position: absolute; left: 23px; top: -4px; color: #516678; font-size: 10px; background: #fff; white-space: nowrap; pointer-events: none; }
|
||||
.port.reference::before { border-color: #b37621; }
|
||||
.port.reference span { color: #8d5d1b; }
|
||||
.canvas-caption { position: absolute; bottom: 10px; left: 14px; color: #738292; font-size: 11px; }
|
||||
.connection-strip { display: flex; flex-wrap: wrap; gap: 8px; padding: 13px 16px; border-top: 1px solid var(--border); background: #f8fafc; }
|
||||
.connection-strip button { font-size: 12px; display: flex; gap: 7px; align-items: center; }
|
||||
.connection-strip button[aria-pressed="true"] { color: var(--blue); border-color: #6299c5; background: #eaf3fb; }
|
||||
.dot { width: 6px; height: 6px; background: #adbac7; border-radius: 50%; }
|
||||
.dot.ready { background: #427e63; }
|
||||
.notice { margin-top: auto; padding: 13px 16px; color: #526679; font-size: 12px; border-top: 1px solid #dbe2e9; }
|
||||
.inspector { border-left: 1px solid var(--border); background: #fff; min-width: 0; }
|
||||
.inspector-title { display: flex; justify-content: space-between; padding: 14px 16px; background: #f5f7fa; border-bottom: 1px solid var(--border); }
|
||||
.inspector-title span { color: var(--muted); }
|
||||
.inspector-body { padding: 16px; }
|
||||
.secondary { font-size: 12px; color: var(--muted); }
|
||||
.endpoint { color: #435a6e; overflow-wrap: anywhere; padding: 0 0 14px; }
|
||||
.endpoint div + div { margin-top: 5px; }
|
||||
.section-label { font-size: 12px; color: var(--muted); margin: 16px 0 6px; }
|
||||
.model-name { font-size: 18px; font-weight: 600; margin: 0 0 5px; }
|
||||
.inspector-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 16px 0; }
|
||||
.primary { background: #1a68a6; border-color: #1a68a6; color: #fff; }
|
||||
.primary:hover { background: #145b94; }
|
||||
.inspector-body p { margin: 8px 0 14px; }
|
||||
.parameter-form { display: grid; gap: 12px; margin-top: 14px; }
|
||||
.parameter-form label { display: grid; gap: 5px; color: #405568; font-size: 12px; }
|
||||
.parameter-form input { width: 100%; border: 1px solid #bdcbd8; border-radius: 3px; padding: 7px 9px; font-size: 14px; color: #243849; }
|
||||
.parameter-form input[aria-invalid="true"] { border-color: #b46d22; }
|
||||
.parameter-state { font-size: 12px; padding: 8px 0; color: #7b5a2c; }
|
||||
.parameter-state.valid { color: #337055; }
|
||||
.check-list { display: grid; gap: 8px; }
|
||||
.check-item { padding: 10px; border: 1px solid #dce3e9; border-radius: 4px; }
|
||||
.check-item button { margin-top: 7px; font-size: 12px; }
|
||||
.check-item.complete { border-left: 3px solid #549375; }
|
||||
.check-summary { padding: 10px 0; font-weight: 600; }
|
||||
.check-summary.complete { color: #337055; }
|
||||
.statusbar { display: flex; gap: 12px; justify-content: space-between; padding: 8px 16px; background: #f8fafc; border-top: 1px solid var(--border); color: #657588; font-size: 12px; }
|
||||
dialog { width: min(620px, calc(100vw - 32px)); padding: 0; border: 1px solid #b6c4d1; border-radius: 7px; color: #263442; background: #fff; box-shadow: 0 16px 65px #182e4533; max-height: calc(100dvh - 32px); }
|
||||
dialog::backdrop { background: #1c304347; }
|
||||
.dialog-header { display: flex; align-items: start; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--border); padding: 17px 20px; }
|
||||
h1 { font-size: 17px; margin: 0 0 5px; font-weight: 600; }
|
||||
.icon-button { border: 0; font-size: 23px; padding: 0 8px; line-height: 1.3; }
|
||||
.dialog-content { padding: 16px 20px; }
|
||||
.selection-context { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin-bottom: 10px; font-size: 12px; }
|
||||
.selection-context span { color: var(--muted); }
|
||||
#model-options { display: grid; gap: 8px; }
|
||||
.model-option { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; align-items: start; border: 1px solid #d3dde6; border-radius: 5px; padding: 12px; cursor: pointer; }
|
||||
.model-option:has(input:checked) { border-color: #3382be; background: #f0f7fc; }
|
||||
.model-option input { margin: 4px 0 0; accent-color: var(--blue); }
|
||||
.model-option strong { display: inline-block; margin-right: 8px; }
|
||||
.model-option small { display: block; color: #566c80; margin-top: 4px; font-size: 12px; }
|
||||
.recommendation { font-size: 11px; color: #1f638f; font-weight: 400; }
|
||||
.choice-note { font-size: 12px; color: #5d6b7a; margin: 12px 0; }
|
||||
details { font-size: 12px; color: #5d6e80; }
|
||||
summary { cursor: pointer; padding: 5px 0; }
|
||||
#port-requirements { line-height: 1.8; margin: 7px 0; }
|
||||
.excluded-model { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-top: 1px solid #e5ebf1; }
|
||||
.dialog-footer { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding: 12px 20px; background: #f6f8fa; border-top: 1px solid var(--border); }
|
||||
@media(max-width: 1000px) { .workspace { grid-template-columns: minmax(0, 1fr) 275px; } .canvas { min-height: 390px; } .workflow button { padding: 7px 12px; } .workflow-note { display: none; } .component small { display: none; } }
|
||||
@media(max-width: 760px) { .workspace { display: block; } .canvas { min-height: 340px; } .inspector { border-left: 0; border-top: 1px solid var(--border); } .topbar { align-items: start; padding: 12px; } .demo-tag { display: block; margin: 3px 0 0; } .top-actions { gap: 10px; font-size: 12px; } .workflow { padding: 7px; justify-content: space-between; } .workflow button { padding: 7px 9px; gap: 5px; } .canvas-toolbar { align-items: start; } .canvas-caption { font-size: 10px; max-width: 90%; } .component strong { font-size: 11px; } .statusbar { flex-wrap: wrap; } }
|
||||
@media(pointer: coarse) { button, .port { min-height: 44px; } input[type="number"] { min-height: 44px; font-size: 16px; } }
|
||||
Reference in new issue
Block a user