mirror of
https://github.com/deepmodeling/Uni-Lab-OS
synced 2026-04-01 18:36:47 +00:00
添加 PRCXI 耗材管理 Web 应用 (labware_manager)
新增 labware_manager 模块： - Web UI 支持耗材 CRUD、SVG 俯视图/侧面图实时预览 - SVG 支持触控板双指缩放(pinch-to-zoom)和平移 - 网格排列自动居中按钮(autoCenter) - 表单参数标签中英文双语显示 - 从已有代码/YAML 导入、Python/YAML 代码生成 更新 CLAUDE.md：补充 labware manager、decorator 注册模式、CI 说明 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
ALITTLELZ
237
unilabos/labware_manager/static/form_handler.js
Normal file
237
unilabos/labware_manager/static/form_handler.js
Normal file
@@ -0,0 +1,237 @@
|
||||
/**
|
||||
* form_handler.js — 动态表单逻辑 + 实时预览
|
||||
*/
|
||||
|
||||
// 根据类型显示/隐藏对应的表单段
|
||||
function onTypeChange() {
|
||||
const type = document.getElementById('f-type').value;
|
||||
const sections = {
|
||||
grid: ['plate', 'tip_rack', 'tube_rack'],
|
||||
well: ['plate'],
|
||||
tip: ['tip_rack'],
|
||||
tube: ['tube_rack'],
|
||||
adapter: ['plate_adapter'],
|
||||
};
|
||||
|
||||
for (const [sec, types] of Object.entries(sections)) {
|
||||
const el = document.getElementById('section-' + sec);
|
||||
if (el) el.style.display = types.includes(type) ? 'block' : 'none';
|
||||
}
|
||||
|
||||
// plate_type 行只对 plate 显示
|
||||
const ptRow = document.getElementById('row-plate_type');
|
||||
if (ptRow) ptRow.style.display = type === 'plate' ? 'block' : 'none';
|
||||
|
||||
updatePreview();
|
||||
}
|
||||
|
||||
// 从表单收集数据
|
||||
function collectFormData() {
|
||||
const g = id => {
|
||||
const el = document.getElementById(id);
|
||||
if (!el) return null;
|
||||
if (el.type === 'checkbox') return el.checked;
|
||||
if (el.type === 'number') return el.value === '' ? null : parseFloat(el.value);
|
||||
return el.value || null;
|
||||
};
|
||||
|
||||
const type = g('f-type');
|
||||
|
||||
const data = {
|
||||
type: type,
|
||||
function_name: g('f-function_name') || 'PRCXI_new',
|
||||
model: g('f-model'),
|
||||
docstring: g('f-docstring') || '',
|
||||
plate_type: type === 'plate' ? g('f-plate_type') : null,
|
||||
size_x: g('f-size_x') || 127,
|
||||
size_y: g('f-size_y') || 85,
|
||||
size_z: g('f-size_z') || 20,
|
||||
material_info: {
|
||||
uuid: g('f-mi_uuid') || '',
|
||||
Code: g('f-mi_code') || '',
|
||||
Name: g('f-mi_name') || '',
|
||||
materialEnum: g('f-mi_menum'),
|
||||
SupplyType: g('f-mi_stype'),
|
||||
},
|
||||
registry_category: (g('f-reg_cat') || 'prcxi,plates').split(',').map(s => s.trim()),
|
||||
registry_description: g('f-reg_desc') || '',
|
||||
include_in_template_matching: g('f-in_tpl') || false,
|
||||
template_kind: g('f-tpl_kind') || null,
|
||||
grid: null,
|
||||
well: null,
|
||||
tip: null,
|
||||
tube: null,
|
||||
adapter: null,
|
||||
volume_functions: null,
|
||||
};
|
||||
|
||||
// Grid
|
||||
if (['plate', 'tip_rack', 'tube_rack'].includes(type)) {
|
||||
data.grid = {
|
||||
num_items_x: g('f-grid_nx') || 12,
|
||||
num_items_y: g('f-grid_ny') || 8,
|
||||
dx: g('f-grid_dx') || 0,
|
||||
dy: g('f-grid_dy') || 0,
|
||||
dz: g('f-grid_dz') || 0,
|
||||
item_dx: g('f-grid_idx') || 9,
|
||||
item_dy: g('f-grid_idy') || 9,
|
||||
};
|
||||
}
|
||||
|
||||
// Well
|
||||
if (type === 'plate') {
|
||||
data.well = {
|
||||
size_x: g('f-well_sx') || 8,
|
||||
size_y: g('f-well_sy') || 8,
|
||||
size_z: g('f-well_sz') || 10,
|
||||
max_volume: g('f-well_vol'),
|
||||
material_z_thickness: g('f-well_mzt'),
|
||||
bottom_type: g('f-well_bt') || 'FLAT',
|
||||
cross_section_type: g('f-well_cs') || 'CIRCLE',
|
||||
};
|
||||
if (g('f-has_vf')) {
|
||||
data.volume_functions = {
|
||||
type: 'rectangle',
|
||||
well_length: data.well.size_x,
|
||||
well_width: data.well.size_y,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
// Tip
|
||||
if (type === 'tip_rack') {
|
||||
data.tip = {
|
||||
spot_size_x: g('f-tip_sx') || 7,
|
||||
spot_size_y: g('f-tip_sy') || 7,
|
||||
spot_size_z: g('f-tip_sz') || 0,
|
||||
tip_volume: g('f-tip_vol') || 300,
|
||||
tip_length: g('f-tip_len') || 60,
|
||||
tip_fitting_depth: g('f-tip_dep') || 51,
|
||||
has_filter: g('f-tip_filter') || false,
|
||||
};
|
||||
}
|
||||
|
||||
// Tube
|
||||
if (type === 'tube_rack') {
|
||||
data.tube = {
|
||||
size_x: g('f-tube_sx') || 10.6,
|
||||
size_y: g('f-tube_sy') || 10.6,
|
||||
size_z: g('f-tube_sz') || 40,
|
||||
max_volume: g('f-tube_vol') || 1500,
|
||||
};
|
||||
}
|
||||
|
||||
// Adapter
|
||||
if (type === 'plate_adapter') {
|
||||
data.adapter = {
|
||||
adapter_hole_size_x: g('f-adp_hsx') || 127.76,
|
||||
adapter_hole_size_y: g('f-adp_hsy') || 85.48,
|
||||
adapter_hole_size_z: g('f-adp_hsz') || 10,
|
||||
dx: g('f-adp_dx'),
|
||||
dy: g('f-adp_dy'),
|
||||
dz: g('f-adp_dz') || 0,
|
||||
};
|
||||
}
|
||||
|
||||
return data;
|
||||
}
|
||||
|
||||
// 实时预览 (debounce)
|
||||
let _previewTimer = null;
|
||||
function updatePreview() {
|
||||
if (_previewTimer) clearTimeout(_previewTimer);
|
||||
_previewTimer = setTimeout(() => {
|
||||
const data = collectFormData();
|
||||
const topEl = document.getElementById('svg-topdown');
|
||||
const sideEl = document.getElementById('svg-side');
|
||||
if (topEl) renderTopDown(topEl, data);
|
||||
if (sideEl) renderSideProfile(sideEl, data);
|
||||
}, 200);
|
||||
}
|
||||
|
||||
// 给所有表单元素绑定 input 事件
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const form = document.getElementById('labware-form');
|
||||
if (!form) return;
|
||||
form.addEventListener('input', updatePreview);
|
||||
form.addEventListener('change', updatePreview);
|
||||
});
|
||||
|
||||
// 自动居中：根据板尺寸和孔阵列参数计算 dx/dy
|
||||
function autoCenter() {
|
||||
const g = id => { const el = document.getElementById(id); return el && el.value !== '' ? parseFloat(el.value) : 0; };
|
||||
|
||||
const sizeX = g('f-size_x') || 127;
|
||||
const sizeY = g('f-size_y') || 85;
|
||||
const nx = g('f-grid_nx') || 1;
|
||||
const ny = g('f-grid_ny') || 1;
|
||||
const itemDx = g('f-grid_idx') || 9;
|
||||
const itemDy = g('f-grid_idy') || 9;
|
||||
|
||||
// 根据当前耗材类型确定子元素尺寸
|
||||
const type = document.getElementById('f-type').value;
|
||||
let childSx = 0, childSy = 0;
|
||||
if (type === 'plate') {
|
||||
childSx = g('f-well_sx') || 8;
|
||||
childSy = g('f-well_sy') || 8;
|
||||
} else if (type === 'tip_rack') {
|
||||
childSx = g('f-tip_sx') || 7;
|
||||
childSy = g('f-tip_sy') || 7;
|
||||
} else if (type === 'tube_rack') {
|
||||
childSx = g('f-tube_sx') || 10.6;
|
||||
childSy = g('f-tube_sy') || 10.6;
|
||||
}
|
||||
|
||||
// dx = (板宽 - 孔阵列总占宽) / 2
|
||||
const dx = (sizeX - (nx - 1) * itemDx - childSx) / 2;
|
||||
const dy = (sizeY - (ny - 1) * itemDy - childSy) / 2;
|
||||
|
||||
const elDx = document.getElementById('f-grid_dx');
|
||||
const elDy = document.getElementById('f-grid_dy');
|
||||
if (elDx) elDx.value = Math.round(dx * 100) / 100;
|
||||
if (elDy) elDy.value = Math.round(dy * 100) / 100;
|
||||
|
||||
updatePreview();
|
||||
}
|
||||
|
||||
// 保存
|
||||
function showMsg(text, ok) {
|
||||
const el = document.getElementById('status-msg');
|
||||
if (!el) return;
|
||||
el.textContent = text;
|
||||
el.className = 'status-msg ' + (ok ? 'msg-ok' : 'msg-err');
|
||||
el.style.display = 'block';
|
||||
setTimeout(() => el.style.display = 'none', 4000);
|
||||
}
|
||||
|
||||
async function saveForm() {
|
||||
const data = collectFormData();
|
||||
|
||||
let url, method;
|
||||
if (typeof IS_NEW !== 'undefined' && IS_NEW) {
|
||||
url = '/api/labware';
|
||||
method = 'POST';
|
||||
} else {
|
||||
url = '/api/labware/' + (typeof ITEM_ID !== 'undefined' ? ITEM_ID : '');
|
||||
method = 'PUT';
|
||||
}
|
||||
|
||||
try {
|
||||
const r = await fetch(url, {
|
||||
method: method,
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(data),
|
||||
});
|
||||
const d = await r.json();
|
||||
if (d.status === 'ok') {
|
||||
showMsg('保存成功', true);
|
||||
if (IS_NEW) {
|
||||
setTimeout(() => location.href = '/labware/' + data.function_name, 500);
|
||||
}
|
||||
} else {
|
||||
showMsg('保存失败: ' + JSON.stringify(d), false);
|
||||
}
|
||||
} catch (e) {
|
||||
showMsg('请求错误: ' + e.message, false);
|
||||
}
|
||||
}
|
||||
358
unilabos/labware_manager/static/labware_viz.js
Normal file
358
unilabos/labware_manager/static/labware_viz.js
Normal file
@@ -0,0 +1,358 @@
|
||||
/**
|
||||
* labware_viz.js — PRCXI 耗材 SVG 2D 可视化渲染引擎
|
||||
*
|
||||
* renderTopDown(container, itemData) — 俯视图
|
||||
* renderSideProfile(container, itemData) — 侧面截面图
|
||||
*/
|
||||
|
||||
const TYPE_COLORS = {
|
||||
plate: '#3b82f6',
|
||||
tip_rack: '#10b981',
|
||||
tube_rack: '#f59e0b',
|
||||
trash: '#ef4444',
|
||||
plate_adapter: '#8b5cf6',
|
||||
};
|
||||
|
||||
function _svgNS() { return 'http://www.w3.org/2000/svg'; }
|
||||
|
||||
function _makeSVG(w, h) {
|
||||
const svg = document.createElementNS(_svgNS(), 'svg');
|
||||
svg.setAttribute('viewBox', `0 0 ${w} ${h}`);
|
||||
svg.setAttribute('width', '100%');
|
||||
svg.setAttribute('preserveAspectRatio', 'xMidYMid meet');
|
||||
svg.style.background = '#fff';
|
||||
return svg;
|
||||
}
|
||||
|
||||
function _rect(svg, x, y, w, h, fill, stroke, rx) {
|
||||
const r = document.createElementNS(_svgNS(), 'rect');
|
||||
r.setAttribute('x', x); r.setAttribute('y', y);
|
||||
r.setAttribute('width', w); r.setAttribute('height', h);
|
||||
r.setAttribute('fill', fill || 'none');
|
||||
r.setAttribute('stroke', stroke || '#333');
|
||||
r.setAttribute('stroke-width', '0.5');
|
||||
if (rx) r.setAttribute('rx', rx);
|
||||
svg.appendChild(r);
|
||||
return r;
|
||||
}
|
||||
|
||||
function _circle(svg, cx, cy, r, fill, stroke) {
|
||||
const c = document.createElementNS(_svgNS(), 'circle');
|
||||
c.setAttribute('cx', cx); c.setAttribute('cy', cy);
|
||||
c.setAttribute('r', r);
|
||||
c.setAttribute('fill', fill || 'none');
|
||||
c.setAttribute('stroke', stroke || '#333');
|
||||
c.setAttribute('stroke-width', '0.4');
|
||||
svg.appendChild(c);
|
||||
return c;
|
||||
}
|
||||
|
||||
function _text(svg, x, y, txt, size, anchor, fill) {
|
||||
const t = document.createElementNS(_svgNS(), 'text');
|
||||
t.setAttribute('x', x); t.setAttribute('y', y);
|
||||
t.setAttribute('font-size', size || '3');
|
||||
t.setAttribute('text-anchor', anchor || 'middle');
|
||||
t.setAttribute('fill', fill || '#666');
|
||||
t.setAttribute('font-family', 'sans-serif');
|
||||
t.textContent = txt;
|
||||
svg.appendChild(t);
|
||||
return t;
|
||||
}
|
||||
|
||||
function _line(svg, x1, y1, x2, y2, stroke, dash) {
|
||||
const l = document.createElementNS(_svgNS(), 'line');
|
||||
l.setAttribute('x1', x1); l.setAttribute('y1', y1);
|
||||
l.setAttribute('x2', x2); l.setAttribute('y2', y2);
|
||||
l.setAttribute('stroke', stroke || '#999');
|
||||
l.setAttribute('stroke-width', '0.3');
|
||||
if (dash) l.setAttribute('stroke-dasharray', dash);
|
||||
svg.appendChild(l);
|
||||
return l;
|
||||
}
|
||||
|
||||
function _title(el, txt) {
|
||||
const t = document.createElementNS(_svgNS(), 'title');
|
||||
t.textContent = txt;
|
||||
el.appendChild(t);
|
||||
}
|
||||
|
||||
// ==================== 俯视图 ====================
|
||||
function renderTopDown(container, data) {
|
||||
container.innerHTML = '';
|
||||
if (!data) return;
|
||||
|
||||
const pad = 18;
|
||||
const sx = data.size_x || 127;
|
||||
const sy = data.size_y || 85;
|
||||
const w = sx + pad * 2;
|
||||
const h = sy + pad * 2;
|
||||
const svg = _makeSVG(w, h);
|
||||
|
||||
const color = TYPE_COLORS[data.type] || '#3b82f6';
|
||||
const lightColor = color + '22';
|
||||
|
||||
// 板子外轮廓
|
||||
_rect(svg, pad, pad, sx, sy, lightColor, color, 3);
|
||||
|
||||
// 尺寸标注
|
||||
_text(svg, pad + sx / 2, pad - 4, `${sx} mm`, '3.5', 'middle', '#333');
|
||||
// Y 尺寸 (竖直)
|
||||
const yt = document.createElementNS(_svgNS(), 'text');
|
||||
yt.setAttribute('x', pad - 5);
|
||||
yt.setAttribute('y', pad + sy / 2);
|
||||
yt.setAttribute('font-size', '3.5');
|
||||
yt.setAttribute('text-anchor', 'middle');
|
||||
yt.setAttribute('fill', '#333');
|
||||
yt.setAttribute('font-family', 'sans-serif');
|
||||
yt.setAttribute('transform', `rotate(-90, ${pad - 5}, ${pad + sy / 2})`);
|
||||
yt.textContent = `${sy} mm`;
|
||||
svg.appendChild(yt);
|
||||
|
||||
const grid = data.grid;
|
||||
const well = data.well;
|
||||
const tip = data.tip;
|
||||
const tube = data.tube;
|
||||
|
||||
if (grid && (well || tip || tube)) {
|
||||
const nx = grid.num_items_x || 1;
|
||||
const ny = grid.num_items_y || 1;
|
||||
const dx = grid.dx || 0;
|
||||
const dy = grid.dy || 0;
|
||||
const idx = grid.item_dx || 9;
|
||||
const idy = grid.item_dy || 9;
|
||||
|
||||
const child = well || tip || tube;
|
||||
const csx = child.size_x || child.spot_size_x || 8;
|
||||
const csy = child.size_y || child.spot_size_y || 8;
|
||||
|
||||
const isCircle = well ? (well.cross_section_type === 'CIRCLE') : (!!tip);
|
||||
|
||||
// 行列标签
|
||||
for (let col = 0; col < nx; col++) {
|
||||
const cx = pad + dx + csx / 2 + col * idx;
|
||||
_text(svg, cx, pad + sy + 5, String(col + 1), '2.5', 'middle', '#999');
|
||||
}
|
||||
const rowLabels = 'ABCDEFGHIJKLMNOP';
|
||||
for (let row = 0; row < ny; row++) {
|
||||
const cy = pad + dy + csy / 2 + row * idy;
|
||||
_text(svg, pad - 4, cy + 1, rowLabels[row] || String(row), '2.5', 'middle', '#999');
|
||||
}
|
||||
|
||||
// 绘制孔位
|
||||
for (let col = 0; col < nx; col++) {
|
||||
for (let row = 0; row < ny; row++) {
|
||||
const cx = pad + dx + csx / 2 + col * idx;
|
||||
const cy = pad + dy + csy / 2 + row * idy;
|
||||
|
||||
let el;
|
||||
if (isCircle) {
|
||||
const r = Math.min(csx, csy) / 2;
|
||||
el = _circle(svg, cx, cy, r, '#fff', color);
|
||||
} else {
|
||||
el = _rect(svg, cx - csx / 2, cy - csy / 2, csx, csy, '#fff', color);
|
||||
}
|
||||
|
||||
const label = (rowLabels[row] || '') + String(col + 1);
|
||||
_title(el, `${label}: ${csx}x${csy} mm`);
|
||||
|
||||
// hover 效果
|
||||
el.style.cursor = 'pointer';
|
||||
el.addEventListener('mouseenter', () => el.setAttribute('fill', color + '44'));
|
||||
el.addEventListener('mouseleave', () => el.setAttribute('fill', '#fff'));
|
||||
}
|
||||
}
|
||||
} else if (data.type === 'plate_adapter' && data.adapter) {
|
||||
// 绘制适配器凹槽
|
||||
const adp = data.adapter;
|
||||
const ahx = adp.adapter_hole_size_x || 127;
|
||||
const ahy = adp.adapter_hole_size_y || 85;
|
||||
const adx = adp.dx != null ? adp.dx : (sx - ahx) / 2;
|
||||
const ady = adp.dy != null ? adp.dy : (sy - ahy) / 2;
|
||||
_rect(svg, pad + adx, pad + ady, ahx, ahy, '#f0f0ff', '#8b5cf6', 2);
|
||||
_text(svg, pad + adx + ahx / 2, pad + ady + ahy / 2, `${ahx}x${ahy}`, '4', 'middle', '#8b5cf6');
|
||||
} else if (data.type === 'trash') {
|
||||
// 简单标记
|
||||
_text(svg, pad + sx / 2, pad + sy / 2, 'TRASH', '8', 'middle', '#ef4444');
|
||||
}
|
||||
|
||||
container.appendChild(svg);
|
||||
_enableZoomPan(svg, `0 0 ${w} ${h}`);
|
||||
}
|
||||
|
||||
// ==================== 侧面截面图 ====================
|
||||
function renderSideProfile(container, data) {
|
||||
container.innerHTML = '';
|
||||
if (!data) return;
|
||||
|
||||
const pad = 20;
|
||||
const sx = data.size_x || 127;
|
||||
const sz = data.size_z || 20;
|
||||
|
||||
// 按比例缩放，侧面以 X-Z 面
|
||||
const scaleH = Math.max(1, sz / 60); // 让较矮的板子不会太小
|
||||
const drawW = sx;
|
||||
const drawH = sz;
|
||||
const w = drawW + pad * 2 + 30; // 额外空间给标注
|
||||
const h = drawH + pad * 2 + 10;
|
||||
const svg = _makeSVG(w, h);
|
||||
|
||||
const color = TYPE_COLORS[data.type] || '#3b82f6';
|
||||
const baseY = pad + drawH; // 底部 Y
|
||||
|
||||
// 板壳矩形
|
||||
_rect(svg, pad, pad, drawW, drawH, color + '15', color);
|
||||
|
||||
// 尺寸标注
|
||||
// X 方向
|
||||
_line(svg, pad, baseY + 5, pad + drawW, baseY + 5, '#333');
|
||||
_text(svg, pad + drawW / 2, baseY + 12, `${sx} mm`, '3.5', 'middle', '#333');
|
||||
|
||||
// Z 方向
|
||||
_line(svg, pad + drawW + 5, pad, pad + drawW + 5, baseY, '#333');
|
||||
const zt = document.createElementNS(_svgNS(), 'text');
|
||||
zt.setAttribute('x', pad + drawW + 12);
|
||||
zt.setAttribute('y', pad + drawH / 2);
|
||||
zt.setAttribute('font-size', '3.5');
|
||||
zt.setAttribute('text-anchor', 'middle');
|
||||
zt.setAttribute('fill', '#333');
|
||||
zt.setAttribute('font-family', 'sans-serif');
|
||||
zt.setAttribute('transform', `rotate(-90, ${pad + drawW + 12}, ${pad + drawH / 2})`);
|
||||
zt.textContent = `${sz} mm`;
|
||||
svg.appendChild(zt);
|
||||
|
||||
const grid = data.grid;
|
||||
const well = data.well;
|
||||
const tip = data.tip;
|
||||
const tube = data.tube;
|
||||
|
||||
if (grid && (well || tip || tube)) {
|
||||
const dx = grid.dx || 0;
|
||||
const dz = grid.dz || 0;
|
||||
const idx = grid.item_dx || 9;
|
||||
const nx = Math.min(grid.num_items_x || 1, 24); // 最多画24列
|
||||
|
||||
const child = well || tube;
|
||||
const childTip = tip;
|
||||
|
||||
if (child) {
|
||||
const csx = child.size_x || 8;
|
||||
const csz = child.size_z || 10;
|
||||
const bt = well ? (well.bottom_type || 'FLAT') : 'FLAT';
|
||||
|
||||
// 画几个代表性的孔截面
|
||||
const nDraw = Math.min(nx, 12);
|
||||
for (let i = 0; i < nDraw; i++) {
|
||||
const cx = pad + dx + csx / 2 + i * idx;
|
||||
const topZ = baseY - dz - csz;
|
||||
const botZ = baseY - dz;
|
||||
|
||||
// 孔壁
|
||||
_rect(svg, cx - csx / 2, topZ, csx, csz, '#e0e8ff', color, 0.5);
|
||||
|
||||
// 底部形状
|
||||
if (bt === 'V') {
|
||||
// V 底 三角
|
||||
const triH = Math.min(csx / 2, csz * 0.3);
|
||||
const p = document.createElementNS(_svgNS(), 'polygon');
|
||||
p.setAttribute('points',
|
||||
`${cx - csx / 2},${botZ - triH} ${cx},${botZ} ${cx + csx / 2},${botZ - triH}`);
|
||||
p.setAttribute('fill', color + '33');
|
||||
p.setAttribute('stroke', color);
|
||||
p.setAttribute('stroke-width', '0.3');
|
||||
svg.appendChild(p);
|
||||
} else if (bt === 'U') {
|
||||
// U 底 圆弧
|
||||
const arcR = csx / 2;
|
||||
const p = document.createElementNS(_svgNS(), 'path');
|
||||
p.setAttribute('d', `M ${cx - csx / 2} ${botZ - arcR} A ${arcR} ${arcR} 0 0 0 ${cx + csx / 2} ${botZ - arcR}`);
|
||||
p.setAttribute('fill', color + '33');
|
||||
p.setAttribute('stroke', color);
|
||||
p.setAttribute('stroke-width', '0.3');
|
||||
svg.appendChild(p);
|
||||
}
|
||||
}
|
||||
|
||||
// dz 标注
|
||||
if (dz > 0) {
|
||||
const lx = pad + dx + 0.5 * idx * nDraw + csx / 2 + 5;
|
||||
_line(svg, lx, baseY, lx, baseY - dz, '#999', '1,1');
|
||||
_text(svg, lx + 6, baseY - dz / 2, `dz=${dz}`, '2.5', 'start', '#999');
|
||||
}
|
||||
}
|
||||
|
||||
if (childTip) {
|
||||
// 枪头截面
|
||||
const nDraw = Math.min(nx, 12);
|
||||
for (let i = 0; i < nDraw; i++) {
|
||||
const cx = pad + dx + 3.5 + i * idx;
|
||||
const topZ = pad + dz;
|
||||
const tipLen = childTip.tip_length || 50;
|
||||
const drawLen = Math.min(tipLen, sz - dz);
|
||||
|
||||
// 枪头轮廓 (梯形)
|
||||
const topW = 4;
|
||||
const botW = 1.5;
|
||||
const p = document.createElementNS(_svgNS(), 'polygon');
|
||||
p.setAttribute('points',
|
||||
`${cx - topW / 2},${topZ} ${cx + topW / 2},${topZ} ${cx + botW / 2},${topZ + drawLen} ${cx - botW / 2},${topZ + drawLen}`);
|
||||
p.setAttribute('fill', '#10b98133');
|
||||
p.setAttribute('stroke', '#10b981');
|
||||
p.setAttribute('stroke-width', '0.3');
|
||||
svg.appendChild(p);
|
||||
}
|
||||
}
|
||||
} else if (data.type === 'plate_adapter' && data.adapter) {
|
||||
const adp = data.adapter;
|
||||
const ahz = adp.adapter_hole_size_z || 10;
|
||||
const adz = adp.dz || 0;
|
||||
const adx_val = adp.dx != null ? adp.dx : (sx - (adp.adapter_hole_size_x || 127)) / 2;
|
||||
const ahx = adp.adapter_hole_size_x || 127;
|
||||
|
||||
// 凹槽截面
|
||||
_rect(svg, pad + adx_val, pad + adz, ahx, ahz, '#ede9fe', '#8b5cf6');
|
||||
_text(svg, pad + adx_val + ahx / 2, pad + adz + ahz / 2 + 1, `hole: ${ahz}mm deep`, '3', 'middle', '#8b5cf6');
|
||||
} else if (data.type === 'trash') {
|
||||
_text(svg, pad + drawW / 2, pad + drawH / 2, 'TRASH', '8', 'middle', '#ef4444');
|
||||
}
|
||||
|
||||
container.appendChild(svg);
|
||||
_enableZoomPan(svg, `0 0 ${w} ${h}`);
|
||||
}
|
||||
|
||||
// ==================== 缩放 & 平移 ====================
|
||||
function _enableZoomPan(svgEl, origViewBox) {
|
||||
const parts = origViewBox.split(' ').map(Number);
|
||||
let vx = parts[0], vy = parts[1], vw = parts[2], vh = parts[3];
|
||||
const origW = vw, origH = vh;
|
||||
const MIN_SCALE = 0.5, MAX_SCALE = 5;
|
||||
|
||||
function applyViewBox() {
|
||||
svgEl.setAttribute('viewBox', `${vx} ${vy} ${vw} ${vh}`);
|
||||
}
|
||||
|
||||
svgEl.addEventListener('wheel', function (e) {
|
||||
e.preventDefault();
|
||||
if (e.ctrlKey) {
|
||||
// pinch / ctrl+scroll → 缩放
|
||||
const factor = e.deltaY > 0 ? 1.08 : 1 / 1.08;
|
||||
const newW = vw * factor;
|
||||
const newH = vh * factor;
|
||||
// 限制缩放范围
|
||||
if (newW < origW / MAX_SCALE || newW > origW * (1 / MIN_SCALE)) return;
|
||||
// 以鼠标位置为缩放中心
|
||||
const rect = svgEl.getBoundingClientRect();
|
||||
const mx = (e.clientX - rect.left) / rect.width;
|
||||
const my = (e.clientY - rect.top) / rect.height;
|
||||
vx += (vw - newW) * mx;
|
||||
vy += (vh - newH) * my;
|
||||
vw = newW;
|
||||
vh = newH;
|
||||
} else {
|
||||
// 普通滚轮 → 平移
|
||||
const panSpeed = vw * 0.002;
|
||||
vx += e.deltaX * panSpeed;
|
||||
vy += e.deltaY * panSpeed;
|
||||
}
|
||||
applyViewBox();
|
||||
}, { passive: false });
|
||||
}
|
||||
295
unilabos/labware_manager/static/style.css
Normal file
295
unilabos/labware_manager/static/style.css
Normal file
@@ -0,0 +1,295 @@
|
||||
/* PRCXI 耗材管理 - 全局样式 */
|
||||
|
||||
:root {
|
||||
--c-primary: #3b82f6;
|
||||
--c-primary-dark: #2563eb;
|
||||
--c-danger: #ef4444;
|
||||
--c-warning: #f59e0b;
|
||||
--c-success: #10b981;
|
||||
--c-gray-50: #f9fafb;
|
||||
--c-gray-100: #f3f4f6;
|
||||
--c-gray-200: #e5e7eb;
|
||||
--c-gray-300: #d1d5db;
|
||||
--c-gray-500: #6b7280;
|
||||
--c-gray-700: #374151;
|
||||
--c-gray-900: #111827;
|
||||
--radius: 8px;
|
||||
--shadow: 0 1px 3px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
background: var(--c-gray-50);
|
||||
color: var(--c-gray-900);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* 顶部导航 */
|
||||
.topbar {
|
||||
background: #fff;
|
||||
border-bottom: 1px solid var(--c-gray-200);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 24px;
|
||||
height: 56px;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
}
|
||||
.topbar .logo {
|
||||
font-weight: 700;
|
||||
font-size: 1.1rem;
|
||||
color: var(--c-gray-900);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* 容器 */
|
||||
.container {
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
/* 页头 */
|
||||
.page-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 24px;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
}
|
||||
.page-header h1 { font-size: 1.5rem; }
|
||||
.header-actions { display: flex; gap: 8px; flex-wrap: wrap; }
|
||||
|
||||
/* 按钮 */
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 8px 16px;
|
||||
border-radius: 6px;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
border: 1px solid transparent;
|
||||
text-decoration: none;
|
||||
transition: all 0.15s;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.btn-sm { padding: 4px 10px; font-size: 0.8rem; }
|
||||
.btn-primary { background: var(--c-primary); color: #fff; }
|
||||
.btn-primary:hover { background: var(--c-primary-dark); }
|
||||
.btn-outline { background: #fff; color: var(--c-gray-700); border-color: var(--c-gray-300); }
|
||||
.btn-outline:hover { background: var(--c-gray-100); }
|
||||
.btn-danger { background: var(--c-danger); color: #fff; }
|
||||
.btn-danger:hover { background: #dc2626; }
|
||||
.btn-warning { background: var(--c-warning); color: #fff; }
|
||||
.btn-warning:hover { background: #d97706; }
|
||||
|
||||
/* 徽章 */
|
||||
.badge {
|
||||
background: var(--c-gray-200);
|
||||
color: var(--c-gray-700);
|
||||
font-size: 0.8rem;
|
||||
padding: 2px 8px;
|
||||
border-radius: 12px;
|
||||
font-weight: 500;
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
/* 状态消息 */
|
||||
.status-msg {
|
||||
padding: 12px 16px;
|
||||
border-radius: var(--radius);
|
||||
margin-bottom: 16px;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
.msg-ok { background: #d1fae5; color: #065f46; }
|
||||
.msg-err { background: #fee2e2; color: #991b1b; }
|
||||
|
||||
/* 类型分段 */
|
||||
.type-section { margin-bottom: 32px; }
|
||||
.type-section h2 {
|
||||
font-size: 1.1rem;
|
||||
margin-bottom: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
.type-dot {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/* 卡片网格 */
|
||||
.card-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
/* 耗材卡片 */
|
||||
.labware-card {
|
||||
background: #fff;
|
||||
border: 1px solid var(--c-gray-200);
|
||||
border-radius: var(--radius);
|
||||
padding: 16px;
|
||||
cursor: pointer;
|
||||
transition: box-shadow 0.2s, border-color 0.2s;
|
||||
}
|
||||
.labware-card:hover {
|
||||
border-color: var(--c-primary);
|
||||
box-shadow: 0 4px 12px rgba(59,130,246,0.15);
|
||||
}
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.card-title {
|
||||
font-weight: 600;
|
||||
font-size: 0.9rem;
|
||||
color: var(--c-gray-900);
|
||||
word-break: break-all;
|
||||
}
|
||||
.card-body { font-size: 0.85rem; color: var(--c-gray-500); }
|
||||
.card-info { margin-bottom: 2px; }
|
||||
.card-info .label { color: var(--c-gray-700); font-weight: 500; }
|
||||
.card-footer {
|
||||
margin-top: 12px;
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
border-top: 1px solid var(--c-gray-100);
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
/* 标签 */
|
||||
.tag {
|
||||
font-size: 0.7rem;
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.tag-tpl { background: #dbeafe; color: #1e40af; }
|
||||
.tag-plate { background: #dbeafe; color: #1e40af; }
|
||||
.tag-tip_rack { background: #d1fae5; color: #065f46; }
|
||||
.tag-trash { background: #fee2e2; color: #991b1b; }
|
||||
.tag-tube_rack { background: #fef3c7; color: #92400e; }
|
||||
.tag-plate_adapter { background: #ede9fe; color: #5b21b6; }
|
||||
|
||||
/* 详情页布局 */
|
||||
.detail-layout {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 24px;
|
||||
}
|
||||
@media (max-width: 900px) {
|
||||
.detail-layout { grid-template-columns: 1fr; }
|
||||
}
|
||||
.detail-info, .detail-viz { display: flex; flex-direction: column; gap: 16px; }
|
||||
|
||||
.info-card, .viz-card {
|
||||
background: #fff;
|
||||
border: 1px solid var(--c-gray-200);
|
||||
border-radius: var(--radius);
|
||||
padding: 16px;
|
||||
}
|
||||
.info-card h3, .viz-card h3 {
|
||||
font-size: 0.95rem;
|
||||
margin-bottom: 12px;
|
||||
color: var(--c-gray-700);
|
||||
border-bottom: 1px solid var(--c-gray-100);
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
|
||||
.info-table { width: 100%; font-size: 0.85rem; }
|
||||
.info-table td { padding: 4px 8px; border-bottom: 1px solid var(--c-gray-100); }
|
||||
.info-table .label { color: var(--c-gray-500); font-weight: 500; width: 140px; }
|
||||
.info-table code { background: var(--c-gray-100); padding: 1px 4px; border-radius: 3px; font-size: 0.8rem; }
|
||||
.info-table code.small { font-size: 0.7rem; }
|
||||
|
||||
/* SVG 容器 */
|
||||
#svg-topdown, #svg-side {
|
||||
width: 100%;
|
||||
min-height: 200px;
|
||||
overflow: hidden;
|
||||
}
|
||||
#svg-topdown svg, #svg-side svg {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
touch-action: none;
|
||||
}
|
||||
|
||||
/* 编辑页布局 */
|
||||
.edit-layout {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 24px;
|
||||
}
|
||||
@media (max-width: 900px) {
|
||||
.edit-layout { grid-template-columns: 1fr; }
|
||||
}
|
||||
.edit-form { display: flex; flex-direction: column; gap: 16px; }
|
||||
.edit-preview { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 72px; align-self: start; }
|
||||
|
||||
/* 表单 */
|
||||
.form-section {
|
||||
background: #fff;
|
||||
border: 1px solid var(--c-gray-200);
|
||||
border-radius: var(--radius);
|
||||
padding: 16px;
|
||||
}
|
||||
.form-section h3 {
|
||||
font-size: 0.95rem;
|
||||
margin-bottom: 12px;
|
||||
color: var(--c-gray-700);
|
||||
}
|
||||
.form-row { margin-bottom: 10px; }
|
||||
.form-row label { display: block; font-size: 0.8rem; color: var(--c-gray-500); margin-bottom: 4px; font-weight: 500; }
|
||||
.form-row input, .form-row select, .form-row textarea {
|
||||
width: 100%;
|
||||
padding: 8px 10px;
|
||||
border: 1px solid var(--c-gray-300);
|
||||
border-radius: 6px;
|
||||
font-size: 0.85rem;
|
||||
font-family: inherit;
|
||||
}
|
||||
.form-row input:focus, .form-row select:focus, .form-row textarea:focus {
|
||||
outline: none;
|
||||
border-color: var(--c-primary);
|
||||
box-shadow: 0 0 0 3px rgba(59,130,246,0.1);
|
||||
}
|
||||
.form-row-2, .form-row-3 { display: grid; gap: 12px; margin-bottom: 10px; }
|
||||
.form-row-2 { grid-template-columns: 1fr 1fr; }
|
||||
.form-row-3 { grid-template-columns: 1fr 1fr 1fr; }
|
||||
.form-row-2 label, .form-row-3 label { display: block; font-size: 0.8rem; color: var(--c-gray-500); margin-bottom: 4px; font-weight: 500; }
|
||||
.form-row-2 input, .form-row-2 select,
|
||||
.form-row-3 input, .form-row-3 select {
|
||||
width: 100%;
|
||||
padding: 8px 10px;
|
||||
border: 1px solid var(--c-gray-300);
|
||||
border-radius: 6px;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
.form-row-2 input:focus, .form-row-3 input:focus {
|
||||
outline: none;
|
||||
border-color: var(--c-primary);
|
||||
box-shadow: 0 0 0 3px rgba(59,130,246,0.1);
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
/* 双语标签中文部分 */
|
||||
.label-cn { color: var(--c-gray-400, #9ca3af); font-weight: 400; margin-left: 4px; }
|
||||
Reference in New Issue
Block a user