mirror of
https://github.com/deepmodeling/Uni-Lab-OS
synced 2026-04-01 18:43:05 +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
24
unilabos/labware_manager/templates/base.html
Normal file
24
unilabos/labware_manager/templates/base.html
Normal file
@@ -0,0 +1,24 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>{% block title %}PRCXI 耗材管理{% endblock %}</title>
|
||||
<link rel="stylesheet" href="/static/style.css">
|
||||
{% block head_extra %}{% endblock %}
|
||||
</head>
|
||||
<body>
|
||||
<nav class="topbar">
|
||||
<a href="/" class="logo">PRCXI 耗材管理</a>
|
||||
<div class="nav-actions">
|
||||
<a href="/labware/new" class="btn btn-primary btn-sm">+ 新建耗材</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<main class="container">
|
||||
{% block content %}{% endblock %}
|
||||
</main>
|
||||
|
||||
{% block scripts %}{% endblock %}
|
||||
</body>
|
||||
</html>
|
||||
150
unilabos/labware_manager/templates/detail.html
Normal file
150
unilabos/labware_manager/templates/detail.html
Normal file
@@ -0,0 +1,150 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}{{ item.function_name }} - PRCXI{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="page-header">
|
||||
<h1>{{ item.function_name }}</h1>
|
||||
<div class="header-actions">
|
||||
<a href="/labware/{{ item.function_name }}/edit" class="btn btn-primary">编辑</a>
|
||||
<a href="/" class="btn btn-outline">返回列表</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="detail-layout">
|
||||
<!-- 左侧: 信息 -->
|
||||
<div class="detail-info">
|
||||
<div class="info-card">
|
||||
<h3>基本信息</h3>
|
||||
<table class="info-table">
|
||||
<tr><td class="label">类型</td><td><span class="tag tag-{{ item.type }}">{{ item.type }}</span></td></tr>
|
||||
<tr><td class="label">函数名</td><td><code>{{ item.function_name }}</code></td></tr>
|
||||
<tr><td class="label">Model</td><td>{{ item.model or '-' }}</td></tr>
|
||||
{% if item.plate_type %}
|
||||
<tr><td class="label">Plate Type</td><td>{{ item.plate_type }}</td></tr>
|
||||
{% endif %}
|
||||
<tr><td class="label">Docstring</td><td>{{ item.docstring or '-' }}</td></tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="info-card">
|
||||
<h3>物理尺寸 (mm)</h3>
|
||||
<table class="info-table">
|
||||
<tr><td class="label">X</td><td>{{ item.size_x }}</td></tr>
|
||||
<tr><td class="label">Y</td><td>{{ item.size_y }}</td></tr>
|
||||
<tr><td class="label">Z</td><td>{{ item.size_z }}</td></tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="info-card">
|
||||
<h3>材料信息</h3>
|
||||
<table class="info-table">
|
||||
<tr><td class="label">UUID</td><td><code class="small">{{ item.material_info.uuid }}</code></td></tr>
|
||||
<tr><td class="label">Code</td><td>{{ item.material_info.Code }}</td></tr>
|
||||
<tr><td class="label">Name</td><td>{{ item.material_info.Name }}</td></tr>
|
||||
{% if item.material_info.materialEnum is not none %}
|
||||
<tr><td class="label">materialEnum</td><td>{{ item.material_info.materialEnum }}</td></tr>
|
||||
{% endif %}
|
||||
{% if item.material_info.SupplyType is not none %}
|
||||
<tr><td class="label">SupplyType</td><td>{{ item.material_info.SupplyType }}</td></tr>
|
||||
{% endif %}
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{% if item.grid %}
|
||||
<div class="info-card">
|
||||
<h3>网格排列</h3>
|
||||
<table class="info-table">
|
||||
<tr><td class="label">列 x 行</td><td>{{ item.grid.num_items_x }} x {{ item.grid.num_items_y }}</td></tr>
|
||||
<tr><td class="label">dx, dy, dz</td><td>{{ item.grid.dx }}, {{ item.grid.dy }}, {{ item.grid.dz }}</td></tr>
|
||||
<tr><td class="label">item_dx, item_dy</td><td>{{ item.grid.item_dx }}, {{ item.grid.item_dy }}</td></tr>
|
||||
</table>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if item.well %}
|
||||
<div class="info-card">
|
||||
<h3>孔参数 (Well)</h3>
|
||||
<table class="info-table">
|
||||
<tr><td class="label">尺寸</td><td>{{ item.well.size_x }} x {{ item.well.size_y }} x {{ item.well.size_z }}</td></tr>
|
||||
{% if item.well.max_volume is not none %}
|
||||
<tr><td class="label">最大体积</td><td>{{ item.well.max_volume }} uL</td></tr>
|
||||
{% endif %}
|
||||
<tr><td class="label">底部类型</td><td>{{ item.well.bottom_type }}</td></tr>
|
||||
<tr><td class="label">截面类型</td><td>{{ item.well.cross_section_type }}</td></tr>
|
||||
{% if item.well.material_z_thickness is not none %}
|
||||
<tr><td class="label">材料Z厚度</td><td>{{ item.well.material_z_thickness }}</td></tr>
|
||||
{% endif %}
|
||||
</table>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if item.tip %}
|
||||
<div class="info-card">
|
||||
<h3>枪头参数 (Tip)</h3>
|
||||
<table class="info-table">
|
||||
<tr><td class="label">Spot 尺寸</td><td>{{ item.tip.spot_size_x }} x {{ item.tip.spot_size_y }} x {{ item.tip.spot_size_z }}</td></tr>
|
||||
<tr><td class="label">容量</td><td>{{ item.tip.tip_volume }} uL</td></tr>
|
||||
<tr><td class="label">长度</td><td>{{ item.tip.tip_length }} mm</td></tr>
|
||||
<tr><td class="label">配合深度</td><td>{{ item.tip.tip_fitting_depth }} mm</td></tr>
|
||||
<tr><td class="label">有滤芯</td><td>{{ item.tip.has_filter }}</td></tr>
|
||||
</table>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if item.tube %}
|
||||
<div class="info-card">
|
||||
<h3>管参数 (Tube)</h3>
|
||||
<table class="info-table">
|
||||
<tr><td class="label">尺寸</td><td>{{ item.tube.size_x }} x {{ item.tube.size_y }} x {{ item.tube.size_z }}</td></tr>
|
||||
<tr><td class="label">最大体积</td><td>{{ item.tube.max_volume }} uL</td></tr>
|
||||
</table>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if item.adapter %}
|
||||
<div class="info-card">
|
||||
<h3>适配器参数</h3>
|
||||
<table class="info-table">
|
||||
<tr><td class="label">Hole 尺寸</td><td>{{ item.adapter.adapter_hole_size_x }} x {{ item.adapter.adapter_hole_size_y }} x {{ item.adapter.adapter_hole_size_z }}</td></tr>
|
||||
<tr><td class="label">dx, dy, dz</td><td>{{ item.adapter.dx }}, {{ item.adapter.dy }}, {{ item.adapter.dz }}</td></tr>
|
||||
</table>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="info-card">
|
||||
<h3>Registry</h3>
|
||||
<table class="info-table">
|
||||
<tr><td class="label">分类</td><td>{{ item.registry_category | join(' / ') }}</td></tr>
|
||||
<tr><td class="label">描述</td><td>{{ item.registry_description }}</td></tr>
|
||||
<tr><td class="label">模板匹配</td><td>{{ item.include_in_template_matching }}</td></tr>
|
||||
{% if item.template_kind %}
|
||||
<tr><td class="label">模板类型</td><td>{{ item.template_kind }}</td></tr>
|
||||
{% endif %}
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 右侧: 可视化 -->
|
||||
<div class="detail-viz">
|
||||
<div class="viz-card">
|
||||
<h3>俯视图 (Top-Down)</h3>
|
||||
<div id="svg-topdown"></div>
|
||||
</div>
|
||||
<div class="viz-card">
|
||||
<h3>侧面截面图 (Side Profile)</h3>
|
||||
<div id="svg-side"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block scripts %}
|
||||
<script src="/static/labware_viz.js"></script>
|
||||
<script>
|
||||
const itemData = {{ item.model_dump() | tojson }};
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
renderTopDown(document.getElementById('svg-topdown'), itemData);
|
||||
renderSideProfile(document.getElementById('svg-side'), itemData);
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
244
unilabos/labware_manager/templates/edit.html
Normal file
244
unilabos/labware_manager/templates/edit.html
Normal file
@@ -0,0 +1,244 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}{% if is_new %}新建耗材{% else %}编辑 {{ item.function_name }}{% endif %} - PRCXI{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="page-header">
|
||||
<h1>{% if is_new %}新建耗材{% else %}编辑 {{ item.function_name }}{% endif %}</h1>
|
||||
<div class="header-actions">
|
||||
<a href="/" class="btn btn-outline">返回列表</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="status-msg" class="status-msg" style="display:none;"></div>
|
||||
|
||||
<div class="edit-layout">
|
||||
<!-- 左侧: 表单 -->
|
||||
<div class="edit-form">
|
||||
<form id="labware-form" onsubmit="return false;">
|
||||
<!-- 基本信息 -->
|
||||
<div class="form-section">
|
||||
<h3>基本信息</h3>
|
||||
<div class="form-row">
|
||||
<label>类型</label>
|
||||
<select name="type" id="f-type" onchange="onTypeChange()">
|
||||
<option value="plate" {% if labware_type == 'plate' %}selected{% endif %}>Plate (孔板)</option>
|
||||
<option value="tip_rack" {% if labware_type == 'tip_rack' %}selected{% endif %}>TipRack (吸头盒)</option>
|
||||
<option value="trash" {% if labware_type == 'trash' %}selected{% endif %}>Trash (废弃槽)</option>
|
||||
<option value="tube_rack" {% if labware_type == 'tube_rack' %}selected{% endif %}>TubeRack (管架)</option>
|
||||
<option value="plate_adapter" {% if labware_type == 'plate_adapter' %}selected{% endif %}>PlateAdapter (适配器)</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<label>函数名</label>
|
||||
<input type="text" name="function_name" id="f-function_name"
|
||||
value="{{ item.function_name if item else 'PRCXI_new_labware' }}"
|
||||
placeholder="PRCXI_xxx">
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<label>Model</label>
|
||||
<input type="text" name="model" id="f-model"
|
||||
value="{{ item.model if item and item.model else '' }}">
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<label>Docstring</label>
|
||||
<textarea name="docstring" id="f-docstring" rows="2">{{ item.docstring if item else '' }}</textarea>
|
||||
</div>
|
||||
<div class="form-row" id="row-plate_type" style="display:none;">
|
||||
<label>Plate Type</label>
|
||||
<select name="plate_type" id="f-plate_type">
|
||||
<option value="">-</option>
|
||||
<option value="skirted" {% if item and item.plate_type == 'skirted' %}selected{% endif %}>skirted</option>
|
||||
<option value="semi-skirted" {% if item and item.plate_type == 'semi-skirted' %}selected{% endif %}>semi-skirted</option>
|
||||
<option value="non-skirted" {% if item and item.plate_type == 'non-skirted' %}selected{% endif %}>non-skirted</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 物理尺寸 -->
|
||||
<div class="form-section">
|
||||
<h3>物理尺寸 Physical Dimensions (mm)</h3>
|
||||
<div class="form-row-3">
|
||||
<div><label>size_x <span class="label-cn">板长</span></label><input type="number" step="any" name="size_x" id="f-size_x" value="{{ item.size_x if item else 127 }}"></div>
|
||||
<div><label>size_y <span class="label-cn">板宽</span></label><input type="number" step="any" name="size_y" id="f-size_y" value="{{ item.size_y if item else 85 }}"></div>
|
||||
<div><label>size_z <span class="label-cn">板高</span></label><input type="number" step="any" name="size_z" id="f-size_z" value="{{ item.size_z if item else 20 }}"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 材料信息 -->
|
||||
<div class="form-section">
|
||||
<h3>材料信息</h3>
|
||||
<div class="form-row">
|
||||
<label>UUID</label>
|
||||
<input type="text" name="mi_uuid" id="f-mi_uuid"
|
||||
value="{{ item.material_info.uuid if item else '' }}">
|
||||
</div>
|
||||
<div class="form-row-2">
|
||||
<div><label>Code</label><input type="text" name="mi_code" id="f-mi_code" value="{{ item.material_info.Code if item else '' }}"></div>
|
||||
<div><label>Name</label><input type="text" name="mi_name" id="f-mi_name" value="{{ item.material_info.Name if item else '' }}"></div>
|
||||
</div>
|
||||
<div class="form-row-2">
|
||||
<div><label>materialEnum</label><input type="number" name="mi_menum" id="f-mi_menum" value="{{ item.material_info.materialEnum if item and item.material_info.materialEnum is not none else '' }}"></div>
|
||||
<div><label>SupplyType</label><input type="number" name="mi_stype" id="f-mi_stype" value="{{ item.material_info.SupplyType if item and item.material_info.SupplyType is not none else '' }}"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 网格排列 (plate/tip_rack/tube_rack) -->
|
||||
<div class="form-section" id="section-grid" style="display:none;">
|
||||
<h3 style="display:flex;align-items:center;justify-content:space-between;">
|
||||
网格排列 Grid Layout
|
||||
<button type="button" class="btn btn-sm btn-outline" onclick="autoCenter()">自动居中 Auto-Center</button>
|
||||
</h3>
|
||||
<div class="form-row-2">
|
||||
<div><label>num_items_x <span class="label-cn">列数</span></label><input type="number" name="grid_nx" id="f-grid_nx" value="{{ item.grid.num_items_x if item and item.grid else 12 }}"></div>
|
||||
<div><label>num_items_y <span class="label-cn">行数</span></label><input type="number" name="grid_ny" id="f-grid_ny" value="{{ item.grid.num_items_y if item and item.grid else 8 }}"></div>
|
||||
</div>
|
||||
<div class="form-row-3">
|
||||
<div><label>dx <span class="label-cn">首孔X偏移</span></label><input type="number" step="any" name="grid_dx" id="f-grid_dx" value="{{ item.grid.dx if item and item.grid else 0 }}"></div>
|
||||
<div><label>dy <span class="label-cn">首孔Y偏移</span></label><input type="number" step="any" name="grid_dy" id="f-grid_dy" value="{{ item.grid.dy if item and item.grid else 0 }}"></div>
|
||||
<div><label>dz <span class="label-cn">孔底Z偏移</span></label><input type="number" step="any" name="grid_dz" id="f-grid_dz" value="{{ item.grid.dz if item and item.grid else 0 }}"></div>
|
||||
</div>
|
||||
<div class="form-row-2">
|
||||
<div><label>item_dx <span class="label-cn">列间距</span></label><input type="number" step="any" name="grid_idx" id="f-grid_idx" value="{{ item.grid.item_dx if item and item.grid else 9 }}"></div>
|
||||
<div><label>item_dy <span class="label-cn">行间距</span></label><input type="number" step="any" name="grid_idy" id="f-grid_idy" value="{{ item.grid.item_dy if item and item.grid else 9 }}"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Well 参数 (plate) -->
|
||||
<div class="form-section" id="section-well" style="display:none;">
|
||||
<h3>孔参数 Well</h3>
|
||||
<div class="form-row-3">
|
||||
<div><label>size_x <span class="label-cn">孔长</span></label><input type="number" step="any" name="well_sx" id="f-well_sx" value="{{ item.well.size_x if item and item.well else 8 }}"></div>
|
||||
<div><label>size_y <span class="label-cn">孔宽</span></label><input type="number" step="any" name="well_sy" id="f-well_sy" value="{{ item.well.size_y if item and item.well else 8 }}"></div>
|
||||
<div><label>size_z <span class="label-cn">孔深</span></label><input type="number" step="any" name="well_sz" id="f-well_sz" value="{{ item.well.size_z if item and item.well else 10 }}"></div>
|
||||
</div>
|
||||
<div class="form-row-2">
|
||||
<div><label>max_volume <span class="label-cn">最大容量 (uL)</span></label><input type="number" step="any" name="well_vol" id="f-well_vol" value="{{ item.well.max_volume if item and item.well and item.well.max_volume is not none else '' }}"></div>
|
||||
<div><label>material_z_thickness <span class="label-cn">底壁厚度</span></label><input type="number" step="any" name="well_mzt" id="f-well_mzt" value="{{ item.well.material_z_thickness if item and item.well and item.well.material_z_thickness is not none else '' }}"></div>
|
||||
</div>
|
||||
<div class="form-row-2">
|
||||
<div>
|
||||
<label>bottom_type <span class="label-cn">底部形状</span></label>
|
||||
<select name="well_bt" id="f-well_bt">
|
||||
<option value="FLAT" {% if item and item.well and item.well.bottom_type == 'FLAT' %}selected{% endif %}>FLAT</option>
|
||||
<option value="V" {% if item and item.well and item.well.bottom_type == 'V' %}selected{% endif %}>V</option>
|
||||
<option value="U" {% if item and item.well and item.well.bottom_type == 'U' %}selected{% endif %}>U</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label>cross_section_type <span class="label-cn">截面形状</span></label>
|
||||
<select name="well_cs" id="f-well_cs">
|
||||
<option value="CIRCLE" {% if item and item.well and item.well.cross_section_type == 'CIRCLE' %}selected{% endif %}>CIRCLE</option>
|
||||
<option value="RECTANGLE" {% if item and item.well and item.well.cross_section_type == 'RECTANGLE' %}selected{% endif %}>RECTANGLE</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<label><input type="checkbox" name="has_vf" id="f-has_vf" {% if item and item.volume_functions %}checked{% endif %}> 使用 volume_functions (rectangle)</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tip 参数 (tip_rack) -->
|
||||
<div class="form-section" id="section-tip" style="display:none;">
|
||||
<h3>枪头参数 Tip</h3>
|
||||
<div class="form-row-3">
|
||||
<div><label>spot_size_x <span class="label-cn">卡槽长</span></label><input type="number" step="any" name="tip_sx" id="f-tip_sx" value="{{ item.tip.spot_size_x if item and item.tip else 7 }}"></div>
|
||||
<div><label>spot_size_y <span class="label-cn">卡槽宽</span></label><input type="number" step="any" name="tip_sy" id="f-tip_sy" value="{{ item.tip.spot_size_y if item and item.tip else 7 }}"></div>
|
||||
<div><label>spot_size_z <span class="label-cn">卡槽高</span></label><input type="number" step="any" name="tip_sz" id="f-tip_sz" value="{{ item.tip.spot_size_z if item and item.tip else 0 }}"></div>
|
||||
</div>
|
||||
<div class="form-row-3">
|
||||
<div><label>tip_volume <span class="label-cn">枪头容量 (uL)</span></label><input type="number" step="any" name="tip_vol" id="f-tip_vol" value="{{ item.tip.tip_volume if item and item.tip else 300 }}"></div>
|
||||
<div><label>tip_length <span class="label-cn">枪头长度 (mm)</span></label><input type="number" step="any" name="tip_len" id="f-tip_len" value="{{ item.tip.tip_length if item and item.tip else 60 }}"></div>
|
||||
<div><label>fitting_depth <span class="label-cn">配合深度</span></label><input type="number" step="any" name="tip_dep" id="f-tip_dep" value="{{ item.tip.tip_fitting_depth if item and item.tip else 51 }}"></div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<label><input type="checkbox" name="tip_filter" id="f-tip_filter" {% if item and item.tip and item.tip.has_filter %}checked{% endif %}> has_filter</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tube 参数 (tube_rack) -->
|
||||
<div class="form-section" id="section-tube" style="display:none;">
|
||||
<h3>管参数 Tube</h3>
|
||||
<div class="form-row-3">
|
||||
<div><label>size_x <span class="label-cn">管径X</span></label><input type="number" step="any" name="tube_sx" id="f-tube_sx" value="{{ item.tube.size_x if item and item.tube else 10.6 }}"></div>
|
||||
<div><label>size_y <span class="label-cn">管径Y</span></label><input type="number" step="any" name="tube_sy" id="f-tube_sy" value="{{ item.tube.size_y if item and item.tube else 10.6 }}"></div>
|
||||
<div><label>size_z <span class="label-cn">管高</span></label><input type="number" step="any" name="tube_sz" id="f-tube_sz" value="{{ item.tube.size_z if item and item.tube else 40 }}"></div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<label>max_volume <span class="label-cn">最大容量 (uL)</span></label>
|
||||
<input type="number" step="any" name="tube_vol" id="f-tube_vol" value="{{ item.tube.max_volume if item and item.tube else 1500 }}">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Adapter 参数 (plate_adapter) -->
|
||||
<div class="form-section" id="section-adapter" style="display:none;">
|
||||
<h3>适配器参数 Adapter</h3>
|
||||
<div class="form-row-3">
|
||||
<div><label>hole_size_x <span class="label-cn">凹槽长</span></label><input type="number" step="any" name="adp_hsx" id="f-adp_hsx" value="{{ item.adapter.adapter_hole_size_x if item and item.adapter else 127.76 }}"></div>
|
||||
<div><label>hole_size_y <span class="label-cn">凹槽宽</span></label><input type="number" step="any" name="adp_hsy" id="f-adp_hsy" value="{{ item.adapter.adapter_hole_size_y if item and item.adapter else 85.48 }}"></div>
|
||||
<div><label>hole_size_z <span class="label-cn">凹槽深</span></label><input type="number" step="any" name="adp_hsz" id="f-adp_hsz" value="{{ item.adapter.adapter_hole_size_z if item and item.adapter else 10 }}"></div>
|
||||
</div>
|
||||
<div class="form-row-3">
|
||||
<div><label>dx <span class="label-cn">X偏移</span></label><input type="number" step="any" name="adp_dx" id="f-adp_dx" value="{{ item.adapter.dx if item and item.adapter and item.adapter.dx is not none else '' }}"></div>
|
||||
<div><label>dy <span class="label-cn">Y偏移</span></label><input type="number" step="any" name="adp_dy" id="f-adp_dy" value="{{ item.adapter.dy if item and item.adapter and item.adapter.dy is not none else '' }}"></div>
|
||||
<div><label>dz <span class="label-cn">Z偏移</span></label><input type="number" step="any" name="adp_dz" id="f-adp_dz" value="{{ item.adapter.dz if item and item.adapter else 0 }}"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Registry -->
|
||||
<div class="form-section">
|
||||
<h3>Registry / Template</h3>
|
||||
<div class="form-row">
|
||||
<label>registry_category (逗号分隔)</label>
|
||||
<input type="text" name="reg_cat" id="f-reg_cat"
|
||||
value="{{ item.registry_category | join(',') if item else 'prcxi,plates' }}">
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<label>registry_description</label>
|
||||
<input type="text" name="reg_desc" id="f-reg_desc"
|
||||
value="{{ item.registry_description if item else '' }}">
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<label><input type="checkbox" name="in_tpl" id="f-in_tpl" {% if item and item.include_in_template_matching %}checked{% endif %}> include_in_template_matching</label>
|
||||
</div>
|
||||
<div class="form-row" id="row-tpl_kind">
|
||||
<label>template_kind</label>
|
||||
<input type="text" name="tpl_kind" id="f-tpl_kind"
|
||||
value="{{ item.template_kind if item and item.template_kind else '' }}">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-actions">
|
||||
<button type="button" class="btn btn-primary" onclick="saveForm()">
|
||||
{% if is_new %}创建{% else %}保存{% endif %}
|
||||
</button>
|
||||
<a href="/" class="btn btn-outline">取消</a>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- 右侧: 实时预览 -->
|
||||
<div class="edit-preview">
|
||||
<div class="viz-card">
|
||||
<h3>预览: 俯视图</h3>
|
||||
<div id="svg-topdown"></div>
|
||||
</div>
|
||||
<div class="viz-card">
|
||||
<h3>预览: 侧面截面图</h3>
|
||||
<div id="svg-side"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block scripts %}
|
||||
<script src="/static/labware_viz.js"></script>
|
||||
<script src="/static/form_handler.js"></script>
|
||||
<script>
|
||||
const IS_NEW = {{ 'true' if is_new else 'false' }};
|
||||
const ITEM_ID = "{{ item.function_name if item else '' }}";
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
onTypeChange();
|
||||
updatePreview();
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
131
unilabos/labware_manager/templates/index.html
Normal file
131
unilabos/labware_manager/templates/index.html
Normal file
@@ -0,0 +1,131 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}耗材列表 - PRCXI{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="page-header">
|
||||
<h1>耗材列表 <span class="badge">{{ total }}</span></h1>
|
||||
<div class="header-actions">
|
||||
<button class="btn btn-outline" onclick="importFromCode()">从代码导入</button>
|
||||
<button class="btn btn-outline" onclick="generateCode(true)">生成代码 (测试)</button>
|
||||
<button class="btn btn-warning" onclick="generateCode(false)">生成代码 (正式)</button>
|
||||
<a href="/labware/new" class="btn btn-primary">+ 新建耗材</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="status-msg" class="status-msg" style="display:none;"></div>
|
||||
|
||||
{% set type_labels = {
|
||||
"plate": "孔板 (Plate)",
|
||||
"tip_rack": "吸头盒 (TipRack)",
|
||||
"trash": "废弃槽 (Trash)",
|
||||
"tube_rack": "管架 (TubeRack)",
|
||||
"plate_adapter": "适配器 (PlateAdapter)"
|
||||
} %}
|
||||
{% set type_colors = {
|
||||
"plate": "#3b82f6",
|
||||
"tip_rack": "#10b981",
|
||||
"trash": "#ef4444",
|
||||
"tube_rack": "#f59e0b",
|
||||
"plate_adapter": "#8b5cf6"
|
||||
} %}
|
||||
|
||||
{% for type_key in ["plate", "tip_rack", "trash", "tube_rack", "plate_adapter"] %}
|
||||
{% if type_key in groups %}
|
||||
<section class="type-section">
|
||||
<h2>
|
||||
<span class="type-dot" style="background:{{ type_colors[type_key] }}"></span>
|
||||
{{ type_labels[type_key] }}
|
||||
<span class="badge">{{ groups[type_key]|length }}</span>
|
||||
</h2>
|
||||
<div class="card-grid">
|
||||
{% for item in groups[type_key] %}
|
||||
<div class="labware-card" onclick="location.href='/labware/{{ item.function_name }}'">
|
||||
<div class="card-header">
|
||||
<span class="card-title">{{ item.function_name }}</span>
|
||||
{% if item.include_in_template_matching %}
|
||||
<span class="tag tag-tpl">TPL</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="card-info">
|
||||
<span class="label">Code:</span> {{ item.material_info.Code or '-' }}
|
||||
</div>
|
||||
<div class="card-info">
|
||||
<span class="label">名称:</span> {{ item.material_info.Name or '-' }}
|
||||
</div>
|
||||
<div class="card-info">
|
||||
<span class="label">尺寸:</span>
|
||||
{{ item.size_x }} x {{ item.size_y }} x {{ item.size_z }} mm
|
||||
</div>
|
||||
{% if item.grid %}
|
||||
<div class="card-info">
|
||||
<span class="label">网格:</span>
|
||||
{{ item.grid.num_items_x }} x {{ item.grid.num_items_y }}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<a href="/labware/{{ item.function_name }}/edit" class="btn btn-sm btn-outline"
|
||||
onclick="event.stopPropagation()">编辑</a>
|
||||
<button class="btn btn-sm btn-danger"
|
||||
onclick="event.stopPropagation(); deleteItem('{{ item.function_name }}')">删除</button>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</section>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endblock %}
|
||||
|
||||
{% block scripts %}
|
||||
<script>
|
||||
function showMsg(text, ok) {
|
||||
const el = document.getElementById('status-msg');
|
||||
el.textContent = text;
|
||||
el.className = 'status-msg ' + (ok ? 'msg-ok' : 'msg-err');
|
||||
el.style.display = 'block';
|
||||
setTimeout(() => el.style.display = 'none', 4000);
|
||||
}
|
||||
|
||||
async function importFromCode() {
|
||||
if (!confirm('将从现有 prcxi_labware.py + YAML 重新导入，覆盖当前 JSON 数据？')) return;
|
||||
const r = await fetch('/api/import-from-code', {method:'POST'});
|
||||
const d = await r.json();
|
||||
if (d.status === 'ok') {
|
||||
showMsg('导入成功: ' + d.count + ' 个耗材', true);
|
||||
setTimeout(() => location.reload(), 1000);
|
||||
} else {
|
||||
showMsg('导入失败: ' + JSON.stringify(d), false);
|
||||
}
|
||||
}
|
||||
|
||||
async function generateCode(testMode) {
|
||||
const label = testMode ? '测试' : '正式';
|
||||
if (!testMode && !confirm('正式模式将覆盖原有 prcxi_labware.py 和 YAML 文件，确定？')) return;
|
||||
const r = await fetch('/api/generate-code', {
|
||||
method: 'POST',
|
||||
headers: {'Content-Type':'application/json'},
|
||||
body: JSON.stringify({test_mode: testMode})
|
||||
});
|
||||
const d = await r.json();
|
||||
if (d.status === 'ok') {
|
||||
showMsg(`[${label}] 生成成功: ${d.python_file}`, true);
|
||||
} else {
|
||||
showMsg('生成失败: ' + JSON.stringify(d), false);
|
||||
}
|
||||
}
|
||||
|
||||
async function deleteItem(id) {
|
||||
if (!confirm('确定删除 ' + id + '？')) return;
|
||||
const r = await fetch('/api/labware/' + id, {method:'DELETE'});
|
||||
const d = await r.json();
|
||||
if (d.status === 'ok') {
|
||||
showMsg('已删除', true);
|
||||
setTimeout(() => location.reload(), 500);
|
||||
} else {
|
||||
showMsg('删除失败', false);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user