feat: 健康生产模块交互重构——组配烹制操作列优化、食堂切换统一、列结构调整
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
冯普
@@ -2,6 +2,35 @@
|
||||
|
||||
## [2026-05-20]
|
||||
|
||||
### 增强 — 健康生产模块交互重构与食堂切换
|
||||
|
||||
- **`prod-proc-combo.html`** 净菜组配
|
||||
- 筛选栏新增「当前食堂」「任务来源」「任务截止日期」筛选，截止日期默认当天
|
||||
- 表头重构：去掉需求规格列，新增餐品规格/份数/任务截止时间/任务来源/完成时间列
|
||||
- 食材配方列移至任务截止时间后，「查看配方」改为「食材明细」
|
||||
- 操作列重构：固定三项（食材溯源链路、查看视频、更多▾ hover 下拉）+ 状态按钮
|
||||
- 新建组配任务弹窗重构：改用下拉选择餐品/规格/份数/来源，移除手动食材清单
|
||||
- 食材明细弹窗新增「分类」列（主材/辅材/调料 标签）
|
||||
- overflow-y 改为 visible 解决下拉菜单遮挡问题
|
||||
|
||||
- **`prod-proc-cook.html`** 按单烹制
|
||||
- 筛选栏新增「当前食堂」「烹制日期」筛选，烹制日期默认当天
|
||||
- 表头重构：去掉计划/实际烹制规格、视频记录，新增餐品规格/需求份数/烹制份数/烹制日期
|
||||
- 烹制状态前移至烹制份数后，食材明细/温度过程/模型数据列前移至生重/熟重/生熟比前
|
||||
- 生熟比格式改为 1：0.8x
|
||||
- 操作列重构：固定三项 + hover 下拉 + 状态按钮（通知取餐/烹制完成/开始烹制）
|
||||
- overflow-y 改为 visible
|
||||
|
||||
- **`prod-proc-serve.html`** 上餐监控
|
||||
- 筛选栏新增「当前食堂」下拉
|
||||
|
||||
- **`prod-proc-surplus.html`** 余量处置
|
||||
- 筛选栏新增「当前食堂」下拉
|
||||
|
||||
- **`prod-proc-stats.html`** 生产统计
|
||||
- 新增页面标题行 + 食堂切换下拉（canteen-select 高亮样式）
|
||||
- 移除两个 Tab 筛选栏中原有的「食堂」筛选项
|
||||
|
||||
### 增强 — 多页面交互优化与数据关联
|
||||
|
||||
- **`prod-clean-order.html`** 净菜订单
|
||||
|
||||
@@ -48,7 +48,7 @@ body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei
|
||||
.table-card__header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border);}
|
||||
.table-card__title{font-size:var(--font-base);font-weight:600;}
|
||||
.table-card__actions{display:flex;gap:8px;align-items:center;}
|
||||
.table-card__content{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;}
|
||||
.table-card__content{overflow-x:auto;overflow-y:visible;-webkit-overflow-scrolling:touch;}
|
||||
.table-card__content table{min-width:100%;white-space:nowrap;}
|
||||
table{width:100%;border-collapse:collapse;}
|
||||
thead th{background:#FAFAFA;padding:12px 16px;text-align:left;font-size:var(--font-sm);color:var(--text-secondary);font-weight:500;border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
@@ -87,6 +87,16 @@ tbody tr:hover{background:#F8FBFF;}
|
||||
thead th:last-child,tbody td.td-actions{position:sticky;right:0;background:#fff;box-shadow:-4px 0 8px rgba(0,0,0,0.04);z-index:2;white-space:nowrap;}
|
||||
thead th:last-child{background:#FAFAFA;}
|
||||
tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
/* 更多下拉菜单 - hover触发 */
|
||||
.action-more{position:relative;display:inline-flex;}
|
||||
.action-more__trigger{color:var(--primary);cursor:pointer;font-size:var(--font-sm);user-select:none;}
|
||||
.action-more__trigger:hover{color:#40a9ff;}
|
||||
.action-more__menu{display:none;position:absolute;right:0;bottom:100%;margin-bottom:4px;background:#fff;border-radius:var(--radius-sm);box-shadow:0 3px 12px rgba(0,0,0,0.15);min-width:90px;z-index:100;padding:4px 0;}
|
||||
.action-more:hover .action-more__menu{display:block;}
|
||||
.action-more__item{display:block;padding:6px 14px;font-size:var(--font-sm);color:var(--text-primary);cursor:pointer;white-space:nowrap;transition:background .1s;}
|
||||
.action-more__item:hover{background:var(--primary-light);color:var(--primary);}
|
||||
.action-more__item--danger{color:var(--danger);}
|
||||
.action-more__item--danger:hover{background:#FFF1F0;color:var(--danger);}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -127,9 +137,12 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
|
||||
<div class="main">
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item"><label>当前食堂</label><select class="filter-select"><option selected>长庆一食堂</option><option>长庆二食堂</option><option>长庆三食堂</option></select></div>
|
||||
<div class="filter-item"><label>任务编号</label><input class="filter-input" type="text" placeholder="请输入任务编号"></div>
|
||||
<div class="filter-item"><label>目标菜品</label><input class="filter-input" type="text" placeholder="请输入目标菜品"></div>
|
||||
<div class="filter-item"><label>状态</label><select class="filter-select"><option>全部</option><option>已完成</option><option>组配中</option><option>待组配</option></select></div>
|
||||
<div class="filter-item"><label>任务来源</label><select class="filter-select"><option>全部</option><option>录入</option><option>点餐</option><option>餐线</option></select></div>
|
||||
<div class="filter-item"><label>任务截止日期</label><input class="filter-input" id="filterDeadline" type="date" style="min-width:160px"></div>
|
||||
<button class="btn btn-primary">查询</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
</div>
|
||||
@@ -142,14 +155,14 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
<div class="table-card__header"><div class="table-card__title">净菜组配</div></div>
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead><tr><th>任务编号</th><th>目标菜品</th><th>食材配方</th><th>需求规格</th><th>组配状态</th><th>负责人</th><th>完成时间</th><th>操作</th></tr></thead>
|
||||
<thead><tr><th>任务编号</th><th>目标餐品</th><th>餐品规格</th><th>份数</th><th>任务截止时间</th><th>食材配方</th><th>任务来源</th><th>组配状态</th><th>负责人</th><th>完成时间</th><th>操作</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td>CMB-001</td><td>宫保鸡丁</td><td><a class="link" onclick="openRecipeModal('宫保鸡丁')">查看配方</a></td><td>中组(8份) · 50组</td><td><span class="tag tag-green">已完成</span></td><td>李组配</td><td>10:30</td><td class="td-actions"><a class="link">食材溯源链路</a> <a class="link">查看视频</a> <a class="link">详情</a> <a class="link">编辑</a> <a class="link" style="color:var(--danger)">删除</a></td></tr>
|
||||
<tr><td>CMB-002</td><td>番茄炒蛋</td><td><a class="link" onclick="openRecipeModal('番茄炒蛋')">查看配方</a></td><td>大组(16份) · 80组</td><td><span class="tag tag-green">已完成</span></td><td>王组配</td><td>10:45</td><td class="td-actions"><a class="link">食材溯源链路</a> <a class="link">查看视频</a> <a class="link">详情</a> <a class="link">编辑</a> <a class="link" style="color:var(--danger)">删除</a></td></tr>
|
||||
<tr><td>CMB-003</td><td>红烧肉</td><td><a class="link" onclick="openRecipeModal('红烧肉')">查看配方</a></td><td>大组(16份) · 60组</td><td><span class="tag tag-blue">组配中</span></td><td>张组配</td><td>—</td><td class="td-actions"><a class="link">食材溯源链路</a> <a class="link">查看视频</a> <a class="link">详情</a> <a class="link">编辑</a> <a class="link" style="color:var(--danger)">删除</a></td></tr>
|
||||
<tr><td>CMB-004</td><td>清蒸鱼</td><td><a class="link" onclick="openRecipeModal('清蒸鱼')">查看配方</a></td><td>小组(4份) · 40组</td><td><span class="tag tag-orange">待组配</span></td><td>—</td><td>—</td><td class="td-actions"><a class="link">食材溯源链路</a> <a class="link">查看视频</a> <a class="link">详情</a> <a class="link">编辑</a> <a class="link" style="color:var(--danger)">删除</a></td></tr>
|
||||
<tr><td>CMB-005</td><td>炒时蔬</td><td><a class="link" onclick="openRecipeModal('炒时蔬')">查看配方</a></td><td>多人组(30份) · 20组</td><td><span class="tag tag-green">已完成</span></td><td>赵组配</td><td>10:50</td><td class="td-actions"><a class="link">食材溯源链路</a> <a class="link">查看视频</a> <a class="link">详情</a> <a class="link">编辑</a> <a class="link" style="color:var(--danger)">删除</a></td></tr>
|
||||
<tr><td>CMB-006</td><td>豆腐</td><td><a class="link" onclick="openRecipeModal('豆腐')">查看配方</a></td><td>自定义(12份/组) · 35组</td><td><span class="tag tag-orange">待组配</span></td><td>—</td><td>—</td><td class="td-actions"><a class="link">食材溯源链路</a> <a class="link">查看视频</a> <a class="link">详情</a> <a class="link">编辑</a> <a class="link" style="color:var(--danger)">删除</a></td></tr>
|
||||
<tr><td>CMB-001</td><td>宫保鸡丁</td><td>标准份（300g）</td><td>50</td><td>2026-05-20 11:00</td><td><a class="link" onclick="openRecipeModal('宫保鸡丁')">食材明细</a></td><td><span class="tag tag-blue">餐线</span></td><td><span class="tag tag-green">已完成</span></td><td>李组配</td><td>2026-05-20 10:30:00</td><td class="td-actions"><a class="link">食材溯源链路</a> <a class="link">查看视频</a> <span class="action-more"><a class="action-more__trigger">更多 ▾</a><div class="action-more__menu"><a class="action-more__item">详情</a><a class="action-more__item">编辑</a><a class="action-more__item action-more__item--danger">删除</a></div></span></td></tr>
|
||||
<tr><td>CMB-002</td><td>番茄炒蛋</td><td>大份（500g）</td><td>80</td><td>2026-05-20 11:00</td><td><a class="link" onclick="openRecipeModal('番茄炒蛋')">食材明细</a></td><td><span class="tag tag-blue">餐线</span></td><td><span class="tag tag-green">已完成</span></td><td>王组配</td><td>2026-05-20 10:45:00</td><td class="td-actions"><a class="link">食材溯源链路</a> <a class="link">查看视频</a> <span class="action-more"><a class="action-more__trigger">更多 ▾</a><div class="action-more__menu"><a class="action-more__item">详情</a><a class="action-more__item">编辑</a><a class="action-more__item action-more__item--danger">删除</a></div></span></td></tr>
|
||||
<tr><td>CMB-003</td><td>红烧肉</td><td>标准份（300g）</td><td>60</td><td>2026-05-20 11:30</td><td><a class="link" onclick="openRecipeModal('红烧肉')">食材明细</a></td><td><span class="tag tag-blue">餐线</span></td><td><span class="tag tag-blue">组配中</span></td><td>张组配</td><td>—</td><td class="td-actions"><a class="link">食材溯源链路</a> <a class="link">查看视频</a> <span class="action-more"><a class="action-more__trigger">更多 ▾</a><div class="action-more__menu"><a class="action-more__item">详情</a><a class="action-more__item">编辑</a><a class="action-more__item action-more__item--danger">删除</a></div></span> <a class="link" style="color:var(--success)">完成组配</a></td></tr>
|
||||
<tr><td>CMB-004</td><td>清蒸鱼</td><td>标准份（500g）</td><td>40</td><td>2026-05-20 12:00</td><td><a class="link" onclick="openRecipeModal('清蒸鱼')">食材明细</a></td><td><span class="tag tag-orange">点餐</span></td><td><span class="tag tag-orange">待组配</span></td><td>—</td><td>—</td><td class="td-actions"><a class="link">食材溯源链路</a> <a class="link">查看视频</a> <span class="action-more"><a class="action-more__trigger">更多 ▾</a><div class="action-more__menu"><a class="action-more__item">详情</a><a class="action-more__item">编辑</a><a class="action-more__item action-more__item--danger">删除</a></div></span> <a class="link">开始组配</a></td></tr>
|
||||
<tr><td>CMB-005</td><td>炒时蔬</td><td>小份（200g）</td><td>20</td><td>2026-05-20 11:00</td><td><a class="link" onclick="openRecipeModal('炒时蔬')">食材明细</a></td><td><span class="tag tag-gray">录入</span></td><td><span class="tag tag-green">已完成</span></td><td>赵组配</td><td>2026-05-20 10:50:00</td><td class="td-actions"><a class="link">食材溯源链路</a> <a class="link">查看视频</a> <span class="action-more"><a class="action-more__trigger">更多 ▾</a><div class="action-more__menu"><a class="action-more__item">详情</a><a class="action-more__item">编辑</a><a class="action-more__item action-more__item--danger">删除</a></div></span></td></tr>
|
||||
<tr><td>CMB-006</td><td>豆腐</td><td>小份（200g）</td><td>35</td><td>2026-05-20 12:00</td><td><a class="link" onclick="openRecipeModal('豆腐')">食材明细</a></td><td><span class="tag tag-orange">点餐</span></td><td><span class="tag tag-orange">待组配</span></td><td>—</td><td>—</td><td class="td-actions"><a class="link">食材溯源链路</a> <a class="link">查看视频</a> <span class="action-more"><a class="action-more__trigger">更多 ▾</a><div class="action-more__menu"><a class="action-more__item">详情</a><a class="action-more__item">编辑</a><a class="action-more__item action-more__item--danger">删除</a></div></span> <a class="link">开始组配</a></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@@ -165,7 +178,7 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
</div>
|
||||
|
||||
<div class="modal-overlay" id="modalOverlay" style="display:none;">
|
||||
<div class="modal" style="width:640px;">
|
||||
<div class="modal" style="width:560px;">
|
||||
<div class="modal-header">
|
||||
<span class="modal-title">新建组配任务</span>
|
||||
<span class="modal-close" onclick="closeModal()">×</span>
|
||||
@@ -177,26 +190,31 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
<input type="text" placeholder="自动生成" disabled style="background:#f5f5f5;">
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<label>目标菜品<span class="required">*</span></label>
|
||||
<input type="text" placeholder="请输入目标菜品">
|
||||
<label>目标餐品<span class="required">*</span></label>
|
||||
<select><option value="">请选择餐品</option><option>宫保鸡丁</option><option>番茄炒蛋</option><option>红烧肉</option><option>清蒸鱼</option><option>炒时蔬</option><option>豆腐</option></select>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<label>需求规格<span class="required">*</span></label>
|
||||
<input type="text" placeholder="如：中组(8份) · 50组">
|
||||
<label>餐品规格<span class="required">*</span></label>
|
||||
<select><option value="">请选择规格</option><option>小份（200g）</option><option>标准份（300g）</option><option>大份（500g）</option></select>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<label>份数<span class="required">*</span></label>
|
||||
<input type="number" placeholder="请输入份数" min="1">
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<label>任务截止时间<span class="required">*</span></label>
|
||||
<input type="datetime-local">
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<label>负责人</label>
|
||||
<input type="text" placeholder="请输入负责人">
|
||||
<input type="text" placeholder="请选择负责人">
|
||||
</div>
|
||||
<div class="form-item full">
|
||||
<label>食材清单</label>
|
||||
<table style="width:100%;border:1px solid #e8e8e8;border-radius:4px;border-collapse:collapse;margin-top:4px;">
|
||||
<thead><tr style="background:#fafafa;"><th style="padding:8px 12px;text-align:left;font-size:12px;color:#8c8c8c;border-bottom:1px solid #e8e8e8;">食材编码</th><th style="padding:8px 12px;text-align:left;font-size:12px;color:#8c8c8c;border-bottom:1px solid #e8e8e8;">食材名称</th><th style="padding:8px 12px;text-align:left;font-size:12px;color:#8c8c8c;border-bottom:1px solid #e8e8e8;">每份用量</th><th style="padding:8px 12px;text-align:left;font-size:12px;color:#8c8c8c;border-bottom:1px solid #e8e8e8;">操作</th></tr></thead>
|
||||
<tbody id="ingredientRows">
|
||||
<tr><td style="padding:6px 8px;border-bottom:1px solid #e8e8e8;"><input type="text" style="width:100%;height:30px;border:1px solid #e8e8e8;border-radius:4px;padding:0 8px;font-size:12px;" placeholder="SC-001"></td><td style="padding:6px 8px;border-bottom:1px solid #e8e8e8;"><input type="text" style="width:100%;height:30px;border:1px solid #e8e8e8;border-radius:4px;padding:0 8px;font-size:12px;" placeholder="鸡胸肉"></td><td style="padding:6px 8px;border-bottom:1px solid #e8e8e8;"><input type="text" style="width:100%;height:30px;border:1px solid #e8e8e8;border-radius:4px;padding:0 8px;font-size:12px;" placeholder="120g"></td><td style="padding:6px 8px;border-bottom:1px solid #e8e8e8;"><a class="link" style="color:var(--danger);font-size:12px;cursor:pointer;">删除</a></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<button class="btn btn-default" style="margin-top:8px;height:30px;font-size:12px;" onclick="addIngredientRow()">+ 添加食材</button>
|
||||
<div class="form-item">
|
||||
<label>任务来源<span class="required">*</span></label>
|
||||
<select><option value="">请选择</option><option>录入</option><option>点餐</option><option>餐线</option></select>
|
||||
</div>
|
||||
<div class="form-item full" style="margin-top:8px;padding:12px 16px;background:#F8FBFF;border-radius:var(--radius-sm);border:1px dashed var(--primary);">
|
||||
<label style="color:var(--primary);font-size:12px;">💡 食材明细将根据所选餐品与规格自动计算生成，无需手动填写</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -216,13 +234,13 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
</div>
|
||||
<div class="modal-body" style="padding:16px 24px;">
|
||||
<table style="width:100%;border-collapse:collapse;">
|
||||
<thead><tr style="background:#fafafa;"><th style="padding:10px 12px;text-align:left;font-size:13px;color:#8c8c8c;border-bottom:1px solid #e8e8e8;">食材编码</th><th style="padding:10px 12px;text-align:left;font-size:13px;color:#8c8c8c;border-bottom:1px solid #e8e8e8;">食材名称</th><th style="padding:10px 12px;text-align:left;font-size:13px;color:#8c8c8c;border-bottom:1px solid #e8e8e8;">每份用量</th><th style="padding:10px 12px;text-align:left;font-size:13px;color:#8c8c8c;border-bottom:1px solid #e8e8e8;">合计用量（50份）</th></tr></thead>
|
||||
<thead><tr style="background:#fafafa;"><th style="padding:10px 12px;text-align:left;font-size:13px;color:#8c8c8c;border-bottom:1px solid #e8e8e8;">食材编码</th><th style="padding:10px 12px;text-align:left;font-size:13px;color:#8c8c8c;border-bottom:1px solid #e8e8e8;">食材名称</th><th style="padding:10px 12px;text-align:left;font-size:13px;color:#8c8c8c;border-bottom:1px solid #e8e8e8;">分类</th><th style="padding:10px 12px;text-align:left;font-size:13px;color:#8c8c8c;border-bottom:1px solid #e8e8e8;">每份用量</th><th style="padding:10px 12px;text-align:left;font-size:13px;color:#8c8c8c;border-bottom:1px solid #e8e8e8;">合计用量（50份）</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td style="padding:10px 12px;font-size:13px;border-bottom:1px solid #e8e8e8;">SC-001</td><td style="padding:10px 12px;font-size:13px;border-bottom:1px solid #e8e8e8;">鸡胸肉</td><td style="padding:10px 12px;font-size:13px;border-bottom:1px solid #e8e8e8;">120g</td><td style="padding:10px 12px;font-size:13px;border-bottom:1px solid #e8e8e8;">6000g</td></tr>
|
||||
<tr><td style="padding:10px 12px;font-size:13px;border-bottom:1px solid #e8e8e8;">SC-012</td><td style="padding:10px 12px;font-size:13px;border-bottom:1px solid #e8e8e8;">花生米</td><td style="padding:10px 12px;font-size:13px;border-bottom:1px solid #e8e8e8;">30g</td><td style="padding:10px 12px;font-size:13px;border-bottom:1px solid #e8e8e8;">1500g</td></tr>
|
||||
<tr><td style="padding:10px 12px;font-size:13px;border-bottom:1px solid #e8e8e8;">SC-008</td><td style="padding:10px 12px;font-size:13px;border-bottom:1px solid #e8e8e8;">干辣椒</td><td style="padding:10px 12px;font-size:13px;border-bottom:1px solid #e8e8e8;">10g</td><td style="padding:10px 12px;font-size:13px;border-bottom:1px solid #e8e8e8;">500g</td></tr>
|
||||
<tr><td style="padding:10px 12px;font-size:13px;border-bottom:1px solid #e8e8e8;">SC-015</td><td style="padding:10px 12px;font-size:13px;border-bottom:1px solid #e8e8e8;">黄瓜丁</td><td style="padding:10px 12px;font-size:13px;border-bottom:1px solid #e8e8e8;">40g</td><td style="padding:10px 12px;font-size:13px;border-bottom:1px solid #e8e8e8;">2000g</td></tr>
|
||||
<tr><td style="padding:10px 12px;font-size:13px;">SC-020</td><td style="padding:10px 12px;font-size:13px;">葱姜蒜</td><td style="padding:10px 12px;font-size:13px;">15g</td><td style="padding:10px 12px;font-size:13px;">750g</td></tr>
|
||||
<tr><td style="padding:10px 12px;font-size:13px;border-bottom:1px solid #e8e8e8;">SC-001</td><td style="padding:10px 12px;font-size:13px;border-bottom:1px solid #e8e8e8;">鸡胸肉</td><td style="padding:10px 12px;font-size:13px;border-bottom:1px solid #e8e8e8;"><span class="tag tag-blue">主材</span></td><td style="padding:10px 12px;font-size:13px;border-bottom:1px solid #e8e8e8;">120g</td><td style="padding:10px 12px;font-size:13px;border-bottom:1px solid #e8e8e8;">6000g</td></tr>
|
||||
<tr><td style="padding:10px 12px;font-size:13px;border-bottom:1px solid #e8e8e8;">SC-012</td><td style="padding:10px 12px;font-size:13px;border-bottom:1px solid #e8e8e8;">花生米</td><td style="padding:10px 12px;font-size:13px;border-bottom:1px solid #e8e8e8;"><span class="tag tag-green">辅材</span></td><td style="padding:10px 12px;font-size:13px;border-bottom:1px solid #e8e8e8;">30g</td><td style="padding:10px 12px;font-size:13px;border-bottom:1px solid #e8e8e8;">1500g</td></tr>
|
||||
<tr><td style="padding:10px 12px;font-size:13px;border-bottom:1px solid #e8e8e8;">SC-008</td><td style="padding:10px 12px;font-size:13px;border-bottom:1px solid #e8e8e8;">干辣椒</td><td style="padding:10px 12px;font-size:13px;border-bottom:1px solid #e8e8e8;"><span class="tag tag-orange">调料</span></td><td style="padding:10px 12px;font-size:13px;border-bottom:1px solid #e8e8e8;">10g</td><td style="padding:10px 12px;font-size:13px;border-bottom:1px solid #e8e8e8;">500g</td></tr>
|
||||
<tr><td style="padding:10px 12px;font-size:13px;border-bottom:1px solid #e8e8e8;">SC-015</td><td style="padding:10px 12px;font-size:13px;border-bottom:1px solid #e8e8e8;">黄瓜丁</td><td style="padding:10px 12px;font-size:13px;border-bottom:1px solid #e8e8e8;"><span class="tag tag-green">辅材</span></td><td style="padding:10px 12px;font-size:13px;border-bottom:1px solid #e8e8e8;">40g</td><td style="padding:10px 12px;font-size:13px;border-bottom:1px solid #e8e8e8;">2000g</td></tr>
|
||||
<tr><td style="padding:10px 12px;font-size:13px;">SC-020</td><td style="padding:10px 12px;font-size:13px;">葱姜蒜</td><td style="padding:10px 12px;font-size:13px;"><span class="tag tag-orange">调料</span></td><td style="padding:10px 12px;font-size:13px;">15g</td><td style="padding:10px 12px;font-size:13px;">750g</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@@ -233,13 +251,15 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
</div>
|
||||
|
||||
<script>
|
||||
/* 任务截止日期筛选默认当天 */
|
||||
(function(){var d=new Date();var y=d.getFullYear();var m=String(d.getMonth()+1).padStart(2,'0');var day=String(d.getDate()).padStart(2,'0');document.getElementById('filterDeadline').value=y+'-'+m+'-'+day;})();
|
||||
/* 更多下拉菜单切换 - 使用CSS hover实现 */
|
||||
function openModal(){document.getElementById('modalOverlay').style.display='flex';}
|
||||
function closeModal(){document.getElementById('modalOverlay').style.display='none';}
|
||||
document.getElementById('modalOverlay').addEventListener('click',function(e){if(e.target===this)closeModal();});
|
||||
function openRecipeModal(name){document.getElementById('recipeModalTitle').textContent='食材明细 - '+name;document.getElementById('recipeModal').style.display='flex';}
|
||||
function closeRecipeModal(){document.getElementById('recipeModal').style.display='none';}
|
||||
document.getElementById('recipeModal').addEventListener('click',function(e){if(e.target===this)closeRecipeModal();});
|
||||
function addIngredientRow(){var tbody=document.getElementById('ingredientRows');var tr=document.createElement('tr');tr.innerHTML='<td style="padding:6px 8px;border-bottom:1px solid #e8e8e8;"><input type="text" style="width:100%;height:30px;border:1px solid #e8e8e8;border-radius:4px;padding:0 8px;font-size:12px;" placeholder="SC-XXX"></td><td style="padding:6px 8px;border-bottom:1px solid #e8e8e8;"><input type="text" style="width:100%;height:30px;border:1px solid #e8e8e8;border-radius:4px;padding:0 8px;font-size:12px;" placeholder="食材名称"></td><td style="padding:6px 8px;border-bottom:1px solid #e8e8e8;"><input type="text" style="width:100%;height:30px;border:1px solid #e8e8e8;border-radius:4px;padding:0 8px;font-size:12px;" placeholder="用量"></td><td style="padding:6px 8px;border-bottom:1px solid #e8e8e8;"><a class="link" style="color:var(--danger);font-size:12px;cursor:pointer;" onclick="this.closest(\'tr\').remove()">删除</a></td>';tbody.appendChild(tr);}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
@@ -46,7 +46,7 @@ body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei
|
||||
.table-card__header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border);}
|
||||
.table-card__title{font-size:var(--font-base);font-weight:600;}
|
||||
.table-card__actions{display:flex;gap:8px;align-items:center;}
|
||||
.table-card__content{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;}
|
||||
.table-card__content{overflow-x:auto;overflow-y:visible;-webkit-overflow-scrolling:touch;}
|
||||
.table-card__content table{min-width:100%;white-space:nowrap;}
|
||||
table{width:100%;border-collapse:collapse;}
|
||||
thead th{background:#FAFAFA;padding:12px 16px;text-align:left;font-size:var(--font-sm);color:var(--text-secondary);font-weight:500;border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
@@ -69,6 +69,16 @@ tbody tr:hover{background:#F8FBFF;}
|
||||
thead th:last-child,tbody td.td-actions{position:sticky;right:0;background:#fff;box-shadow:-4px 0 8px rgba(0,0,0,0.04);z-index:2;white-space:nowrap;}
|
||||
thead th:last-child{background:#FAFAFA;}
|
||||
tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
/* 更多下拉菜单 - hover触发 */
|
||||
.action-more{position:relative;display:inline-flex;}
|
||||
.action-more__trigger{color:var(--primary);cursor:pointer;font-size:var(--font-sm);user-select:none;}
|
||||
.action-more__trigger:hover{color:#40a9ff;}
|
||||
.action-more__menu{display:none;position:absolute;right:0;bottom:100%;margin-bottom:4px;background:#fff;border-radius:var(--radius-sm);box-shadow:0 3px 12px rgba(0,0,0,0.15);min-width:90px;z-index:100;padding:4px 0;}
|
||||
.action-more:hover .action-more__menu{display:block;}
|
||||
.action-more__item{display:block;padding:6px 14px;font-size:var(--font-sm);color:var(--text-primary);cursor:pointer;white-space:nowrap;transition:background .1s;}
|
||||
.action-more__item:hover{background:var(--primary-light);color:var(--primary);}
|
||||
.action-more__item--danger{color:var(--danger);}
|
||||
.action-more__item--danger:hover{background:#FFF1F0;color:var(--danger);}
|
||||
/* 弹窗 */
|
||||
.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.45);z-index:1000;display:flex;align-items:center;justify-content:center;}
|
||||
.modal{background:#fff;border-radius:8px;max-height:85vh;overflow-y:auto;box-shadow:0 4px 12px rgba(0,0,0,0.15);}
|
||||
@@ -140,10 +150,12 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
|
||||
<div class="main">
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item"><label>订单号</label><input class="filter-input" type="text" placeholder="请输入订单号"></div>
|
||||
<div class="filter-item"><label>当前食堂</label><select class="filter-select"><option selected>长庆一食堂</option><option>长庆二食堂</option><option>长庆三食堂</option></select></div>
|
||||
<div class="filter-item"><label>任务单号</label><input class="filter-input" type="text" placeholder="请输入任务单号"></div>
|
||||
<div class="filter-item"><label>菜品名称</label><input class="filter-input" type="text" placeholder="请输入菜品名称"></div>
|
||||
<div class="filter-item"><label>来源类型</label><select class="filter-select"><option>全部</option><option>点餐</option><option>餐线</option></select></div>
|
||||
<div class="filter-item"><label>烹制状态</label><select class="filter-select"><option>全部</option><option>已完成</option><option>烹制中</option><option>待烹制</option></select></div>
|
||||
<div class="filter-item"><label>烹制日期</label><input class="filter-input" id="filterCookDate" type="date" style="min-width:160px"></div>
|
||||
<button class="btn btn-primary">查询</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
</div>
|
||||
@@ -151,22 +163,21 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
<div class="action-bar">
|
||||
<button class="btn btn-primary"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 10v2h10v-2M7 2v7M4.5 6.5L7 9l2.5-2.5" stroke="#fff" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>导出列表数据</button>
|
||||
<button class="btn btn-default"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><rect x="2" y="2" width="10" height="10" rx="1.5" stroke="currentColor" stroke-width="1.4"/><path d="M4 5h6M4 7.5h4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>查看导出任务</button>
|
||||
<button class="btn btn-default">通知取餐</button>
|
||||
</div>
|
||||
|
||||
<div class="table-card">
|
||||
<div class="table-card__header"><div class="table-card__title">按单烹制</div></div>
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead><tr><th>烹制任务号</th><th>来源类型</th><th>组配任务号</th><th>菜品名称</th><th>计划烹制规格</th><th>实际烹制规格</th><th>厨师</th><th>生重(kg)</th><th>熟重(kg)</th><th>生熟比</th><th>烹制开始</th><th>烹制结束</th><th>食材明细</th><th>温度过程</th><th>视频记录</th><th>模型数据</th><th>烹制状态</th><th>操作</th></tr></thead>
|
||||
<thead><tr><th>烹制任务号</th><th>来源类型</th><th>组配任务号</th><th>菜品名称</th><th>餐品规格</th><th>需求份数</th><th>烹制份数</th><th>烹制日期</th><th>烹制开始</th><th>烹制结束</th><th>烹制状态</th><th>厨师</th><th>食材明细</th><th>温度过程</th><th>模型数据</th><th>生重(kg)</th><th>熟重(kg)</th><th>生熟比</th><th>操作</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td>COOK-001</td><td><span class="tag tag-blue">点餐</span></td><td>CMB-001</td><td>宫保鸡丁</td><td>中组(8份) · 50组</td><td>中组(8份) · 50组</td><td>张厨师</td><td>8.5</td><td>7.2</td><td>0.85</td><td>11:00</td><td>11:20</td><td><a class="link" onclick="openIngredientModal('宫保鸡丁')">查看配方</a></td><td><a class="link" onclick="openTempModal()">温度曲线</a></td><td>可回放</td><td><a class="link" onclick="openModelModal()"><span class="tag tag-green">92分</span></a></td><td><span class="tag tag-green">已完成</span></td><td class="td-actions"><a class="link">食材溯源链路</a> <a class="link">查看视频</a> <a class="link">详情</a> <a class="link">编辑</a> <a class="link" style="color:var(--danger)">删除</a></td></tr>
|
||||
<tr><td>COOK-002</td><td><span class="tag tag-blue">点餐</span></td><td>CMB-002</td><td>番茄炒蛋</td><td>大组(16份) · 80组</td><td>大组(16份) · 80组</td><td>李厨师</td><td>12.0</td><td>10.4</td><td>0.87</td><td>11:05</td><td>11:20</td><td><a class="link" onclick="openIngredientModal('番茄炒蛋')">查看配方</a></td><td><a class="link" onclick="openTempModal()">温度曲线</a></td><td>可回放</td><td><a class="link" onclick="openModelModal()"><span class="tag tag-green">88分</span></a></td><td><span class="tag tag-green">已完成</span></td><td class="td-actions"><a class="link">食材溯源链路</a> <a class="link">查看视频</a> <a class="link">详情</a> <a class="link">编辑</a> <a class="link" style="color:var(--danger)">删除</a></td></tr>
|
||||
<tr><td>COOK-003</td><td><span class="tag tag-gray">餐线</span></td><td>CMB-003</td><td>红烧肉</td><td>大组(16份) · 60组</td><td>—</td><td>王厨师</td><td>10.0</td><td>—</td><td>—</td><td>11:10</td><td>—</td><td><a class="link" onclick="openIngredientModal('红烧肉')">查看配方</a></td><td><a class="link" onclick="openTempModal()">温度曲线</a></td><td>录制中</td><td><span class="tag tag-blue">分析中</span></td><td><span class="tag tag-blue">烹制中</span></td><td class="td-actions"><a class="link">食材溯源链路</a> <a class="link">查看视频</a> <a class="link">详情</a> <a class="link">编辑</a> <a class="link" style="color:var(--danger)">删除</a></td></tr>
|
||||
<tr><td>COOK-004</td><td><span class="tag tag-gray">餐线</span></td><td>CMB-004</td><td>清蒸鱼</td><td>小组(4份) · 40组</td><td>—</td><td>张厨师</td><td>6.5</td><td>—</td><td>—</td><td>11:15</td><td>—</td><td><a class="link" onclick="openIngredientModal('清蒸鱼')">查看配方</a></td><td><a class="link" onclick="openTempModal()">温度曲线</a></td><td>录制中</td><td><span class="tag tag-blue">分析中</span></td><td><span class="tag tag-blue">烹制中</span></td><td class="td-actions"><a class="link">食材溯源链路</a> <a class="link">查看视频</a> <a class="link">详情</a> <a class="link">编辑</a> <a class="link" style="color:var(--danger)">删除</a></td></tr>
|
||||
<tr><td>COOK-005</td><td><span class="tag tag-gray">餐线</span></td><td>CMB-005</td><td>蒜蓉菠菜</td><td>多人组(30份) · 100组</td><td>—</td><td>—</td><td>15.0</td><td>—</td><td>—</td><td>—</td><td>—</td><td><a class="link" onclick="openIngredientModal('蒜蓉菠菜')">查看配方</a></td><td>—</td><td>—</td><td>—</td><td><span class="tag tag-orange">待烹制</span></td><td class="td-actions"><a class="link">食材溯源链路</a> <a class="link">查看视频</a> <a class="link">详情</a> <a class="link">编辑</a> <a class="link" style="color:var(--danger)">删除</a></td></tr>
|
||||
<tr><td>COOK-006</td><td><span class="tag tag-gray">餐线</span></td><td>CMB-005</td><td>炒时蔬</td><td>多人组(30份) · 20组</td><td>多人组(30份) · 20组</td><td>赵厨师</td><td>18.0</td><td>15.6</td><td>0.87</td><td>11:10</td><td>11:30</td><td><a class="link" onclick="openIngredientModal('炒时蔬')">查看配方</a></td><td><a class="link" onclick="openTempModal()">温度曲线</a></td><td>可回放</td><td><a class="link" onclick="openModelModal()"><span class="tag tag-green">95分</span></a></td><td><span class="tag tag-green">已完成</span></td><td class="td-actions"><a class="link">食材溯源链路</a> <a class="link">查看视频</a> <a class="link">详情</a> <a class="link">编辑</a> <a class="link" style="color:var(--danger)">删除</a></td></tr>
|
||||
<tr><td>COOK-007</td><td><span class="tag tag-blue">点餐</span></td><td>CMB-006</td><td>豆腐</td><td>自定义(12份/组) · 35组</td><td>自定义(12份/组) · 35组</td><td>陈厨师</td><td>4.2</td><td>3.9</td><td>0.93</td><td>11:20</td><td>11:35</td><td><a class="link" onclick="openIngredientModal('豆腐')">查看配方</a></td><td><a class="link" onclick="openTempModal()">温度曲线</a></td><td>可回放</td><td><a class="link" onclick="openModelModal()"><span class="tag tag-green">78分</span></a></td><td><span class="tag tag-green">已完成</span></td><td class="td-actions"><a class="link">食材溯源链路</a> <a class="link">查看视频</a> <a class="link">详情</a> <a class="link">编辑</a> <a class="link" style="color:var(--danger)">删除</a></td></tr>
|
||||
<tr><td>COOK-001</td><td><span class="tag tag-blue">点餐</span></td><td>CMB-001</td><td>宫保鸡丁</td><td>标准份（300g）</td><td>50</td><td>50</td><td>2026-05-20</td><td>11:00</td><td>11:20</td><td><span class="tag tag-green">已完成</span></td><td>张厨师</td><td><a class="link" onclick="openIngredientModal('宫保鸡丁')">食材明细</a></td><td><a class="link" onclick="openTempModal()">温度曲线</a></td><td><a class="link" onclick="openModelModal()"><span class="tag tag-green">92分</span></a></td><td>8.5</td><td>7.2</td><td>1：0.85</td><td class="td-actions"><a class="link">食材溯源链路</a> <a class="link">查看视频</a> <span class="action-more"><a class="action-more__trigger">更多 ▾</a><div class="action-more__menu"><a class="action-more__item">详情</a><a class="action-more__item">编辑</a><a class="action-more__item action-more__item--danger">删除</a></div></span><span class="link">通知取餐</span></td></tr>
|
||||
<tr><td>COOK-002</td><td><span class="tag tag-blue">点餐</span></td><td>CMB-002</td><td>番茄炒蛋</td><td>大份（500g）</td><td>80</td><td>80</td><td>2026-05-20</td><td>11:05</td><td>11:20</td><td><span class="tag tag-green">已完成</span></td><td>李厨师</td><td><a class="link" onclick="openIngredientModal('番茄炒蛋')">食材明细</a></td><td><a class="link" onclick="openTempModal()">温度曲线</a></td><td><a class="link" onclick="openModelModal()"><span class="tag tag-green">88分</span></a></td><td>12.0</td><td>10.4</td><td>1：0.87</td><td class="td-actions"><a class="link">食材溯源链路</a> <a class="link">查看视频</a> <span class="action-more"><a class="action-more__trigger">更多 ▾</a><div class="action-more__menu"><a class="action-more__item">详情</a><a class="action-more__item">编辑</a><a class="action-more__item action-more__item--danger">删除</a></div></span><span class="link">通知取餐</span></td></tr>
|
||||
<tr><td>COOK-003</td><td><span class="tag tag-gray">餐线</span></td><td>CMB-003</td><td>红烧肉</td><td>标准份（300g）</td><td>60</td><td>—</td><td>2026-05-20</td><td>11:10</td><td>—</td><td><span class="tag tag-blue">烹制中</span></td><td>王厨师</td><td><a class="link" onclick="openIngredientModal('红烧肉')">食材明细</a></td><td><a class="link" onclick="openTempModal()">温度曲线</a></td><td><span class="tag tag-blue">分析中</span></td><td>10.0</td><td>—</td><td>—</td><td class="td-actions"><a class="link">食材溯源链路</a> <a class="link">查看视频</a> <span class="action-more"><a class="action-more__trigger">更多 ▾</a><div class="action-more__menu"><a class="action-more__item">详情</a><a class="action-more__item">编辑</a><a class="action-more__item action-more__item--danger">删除</a></div></span><span class="link">烹制完成</span></td></tr>
|
||||
<tr><td>COOK-004</td><td><span class="tag tag-gray">餐线</span></td><td>CMB-004</td><td>清蒸鱼</td><td>标准份（500g）</td><td>40</td><td>—</td><td>2026-05-20</td><td>11:15</td><td>—</td><td><span class="tag tag-blue">烹制中</span></td><td>张厨师</td><td><a class="link" onclick="openIngredientModal('清蒸鱼')">食材明细</a></td><td><a class="link" onclick="openTempModal()">温度曲线</a></td><td><span class="tag tag-blue">分析中</span></td><td>6.5</td><td>—</td><td>—</td><td class="td-actions"><a class="link">食材溯源链路</a> <a class="link">查看视频</a> <span class="action-more"><a class="action-more__trigger">更多 ▾</a><div class="action-more__menu"><a class="action-more__item">详情</a><a class="action-more__item">编辑</a><a class="action-more__item action-more__item--danger">删除</a></div></span><span class="link">烹制完成</span></td></tr>
|
||||
<tr><td>COOK-005</td><td><span class="tag tag-gray">餐线</span></td><td>CMB-005</td><td>蒜蓉菠菜</td><td>标准份（300g）</td><td>100</td><td>—</td><td>2026-05-20</td><td>—</td><td>—</td><td><span class="tag tag-orange">待烹制</span></td><td>—</td><td><a class="link" onclick="openIngredientModal('蒜蓉菠菜')">食材明细</a></td><td>—</td><td>—</td><td>15.0</td><td>—</td><td>—</td><td class="td-actions"><a class="link">食材溯源链路</a> <a class="link">查看视频</a> <span class="action-more"><a class="action-more__trigger">更多 ▾</a><div class="action-more__menu"><a class="action-more__item">详情</a><a class="action-more__item">编辑</a><a class="action-more__item action-more__item--danger">删除</a></div></span><span class="link">开始烹制</span></td></tr>
|
||||
<tr><td>COOK-006</td><td><span class="tag tag-gray">餐线</span></td><td>CMB-005</td><td>炒时蔬</td><td>小份（200g）</td><td>20</td><td>20</td><td>2026-05-20</td><td>11:10</td><td>11:30</td><td><span class="tag tag-green">已完成</span></td><td>赵厨师</td><td><a class="link" onclick="openIngredientModal('炒时蔬')">食材明细</a></td><td><a class="link" onclick="openTempModal()">温度曲线</a></td><td><a class="link" onclick="openModelModal()"><span class="tag tag-green">95分</span></a></td><td>18.0</td><td>15.6</td><td>1：0.87</td><td class="td-actions"><a class="link">食材溯源链路</a> <a class="link">查看视频</a> <span class="action-more"><a class="action-more__trigger">更多 ▾</a><div class="action-more__menu"><a class="action-more__item">详情</a><a class="action-more__item">编辑</a><a class="action-more__item action-more__item--danger">删除</a></div></span><span class="link">通知取餐</span></td></tr>
|
||||
<tr><td>COOK-007</td><td><span class="tag tag-blue">点餐</span></td><td>CMB-006</td><td>豆腐</td><td>小份（200g）</td><td>35</td><td>35</td><td>2026-05-20</td><td>11:20</td><td>11:35</td><td><span class="tag tag-green">已完成</span></td><td>陈厨师</td><td><a class="link" onclick="openIngredientModal('豆腐')">食材明细</a></td><td><a class="link" onclick="openTempModal()">温度曲线</a></td><td><a class="link" onclick="openModelModal()"><span class="tag tag-green">78分</span></a></td><td>4.2</td><td>3.9</td><td>1：0.93</td><td class="td-actions"><a class="link">食材溯源链路</a> <a class="link">查看视频</a> <span class="action-more"><a class="action-more__trigger">更多 ▾</a><div class="action-more__menu"><a class="action-more__item">详情</a><a class="action-more__item">编辑</a><a class="action-more__item action-more__item--danger">删除</a></div></span><span class="link">通知取餐</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@@ -282,6 +293,8 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
</div>
|
||||
|
||||
<script>
|
||||
/* 烹制日期筛选默认当天 */
|
||||
(function(){var d=new Date();var y=d.getFullYear();var m=String(d.getMonth()+1).padStart(2,'0');var day=String(d.getDate()).padStart(2,'0');document.getElementById('filterCookDate').value=y+'-'+m+'-'+day;})();
|
||||
function openIngredientModal(name){document.getElementById('ingredientTitle').textContent='食材明细 - '+name;document.getElementById('ingredientModal').style.display='flex';}
|
||||
function openTempModal(){document.getElementById('tempModal').style.display='flex';}
|
||||
function openModelModal(){document.getElementById('modelModal').style.display='flex';}
|
||||
|
||||
@@ -86,6 +86,7 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
</aside>
|
||||
<div class="main">
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item"><label>当前食堂</label><select class="filter-select"><option selected>长庆一食堂</option><option>长庆二食堂</option><option>长庆三食堂</option></select></div>
|
||||
<div class="filter-item"><label>菜品名称</label><input class="filter-input" type="text" placeholder="请输入菜品名称"></div>
|
||||
<div class="filter-item"><label>餐次</label><select class="filter-select"><option>全部</option><option>早餐</option><option>午餐</option><option>晚餐</option></select></div>
|
||||
<div class="filter-item"><label>厨师</label><input class="filter-input" type="text" placeholder="请输入厨师姓名" style="min-width:140px;"></div>
|
||||
|
||||
@@ -85,6 +85,16 @@ tr.summary-row td{font-weight:700;background:#FAFAFA;}
|
||||
.modal-close{font-size:22px;cursor:pointer;color:#8c8c8c;line-height:1;}.modal-close:hover{color:#262626;}
|
||||
.modal-body{padding:24px;}
|
||||
.modal-footer{display:flex;justify-content:space-between;align-items:center;padding:16px 24px;border-top:1px solid #e8e8e8;}
|
||||
/* 页面标题行 + 食堂切换 */
|
||||
.page-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;padding:16px 24px;background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);}
|
||||
.page-header__left{display:flex;align-items:baseline;gap:12px;}
|
||||
.page-header__title{font-size:var(--font-xl);font-weight:700;color:var(--text-primary);}
|
||||
.page-header__desc{font-size:var(--font-sm);color:var(--text-placeholder);}
|
||||
.page-header__right{display:flex;align-items:center;gap:12px;}
|
||||
.page-header__label{font-size:var(--font-sm);color:var(--text-secondary);white-space:nowrap;}
|
||||
.canteen-select{height:40px;border:2px solid var(--primary);border-radius:var(--radius-md);padding:0 36px 0 14px;font-size:var(--font-base);color:var(--primary);outline:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%231890FF'/%3E%3C/svg%3E") no-repeat right 12px center;appearance:none;cursor:pointer;min-width:160px;font-weight:600;transition:all .2s;}
|
||||
.canteen-select:hover{background-color:var(--primary-light);}
|
||||
.canteen-select:focus{box-shadow:0 0 0 3px rgba(24,144,255,0.15);}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -108,6 +118,21 @@ tr.summary-row td{font-weight:700;background:#FAFAFA;}
|
||||
<a href="prod-proc-stats.html" class="sidebar-item active"><span class="mi">📊</span>生产统计</a>
|
||||
</aside>
|
||||
<main class="main">
|
||||
<!-- 页面标题行 + 食堂切换 -->
|
||||
<div class="page-header">
|
||||
<div class="page-header__left">
|
||||
<span class="page-header__title">生产统计</span>
|
||||
<span class="page-header__desc">2026-05-20 · 数据实时更新</span>
|
||||
</div>
|
||||
<div class="page-header__right">
|
||||
<span class="page-header__label">当前食堂</span>
|
||||
<select class="canteen-select">
|
||||
<option selected>长庆一食堂</option>
|
||||
<option>长庆二食堂</option>
|
||||
<option>长庆三食堂</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stats-row">
|
||||
<div class="stat-card"><div class="stat-card__icon blue">🍳</div><div class="stat-card__info"><div class="stat-card__value">32道</div><div class="stat-card__label">今日生产菜品</div></div></div>
|
||||
<div class="stat-card"><div class="stat-card__icon green">📦</div><div class="stat-card__info"><div class="stat-card__value">1,248kg</div><div class="stat-card__label">今日出餐量</div></div></div>
|
||||
@@ -123,7 +148,6 @@ tr.summary-row td{font-weight:700;background:#FAFAFA;}
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item"><label>日期</label><input class="filter-input" type="date" value="2026-04-23"></div>
|
||||
<div class="filter-item"><label>餐次</label><select class="filter-select"><option>全部</option><option>早餐</option><option>午餐</option><option>晚餐</option></select></div>
|
||||
<div class="filter-item"><label>食堂</label><select class="filter-select"><option>全部</option><option>A区食堂</option><option>B区食堂</option></select></div>
|
||||
<button class="btn btn-primary">查询</button><button class="btn btn-default">重置</button>
|
||||
</div>
|
||||
<div class="action-bar"><button class="btn btn-primary"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 10v2h10v-2M7 2v7M4.5 6.5L7 9l2.5-2.5" stroke="#fff" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>导出列表数据</button><button class="btn btn-default"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><rect x="2" y="2" width="10" height="10" rx="1.5" stroke="currentColor" stroke-width="1.4"/><path d="M4 5h6M4 7.5h4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>查看导出任务</button></div>
|
||||
@@ -148,7 +172,6 @@ tr.summary-row td{font-weight:700;background:#FAFAFA;}
|
||||
<div class="tab-panel">
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item"><label>日期</label><input class="filter-input" type="date" value="2026-04-23"></div>
|
||||
<div class="filter-item"><label>食堂</label><select class="filter-select"><option>全部</option><option>A区食堂</option><option>B区食堂</option></select></div>
|
||||
<button class="btn btn-primary">查询</button><button class="btn btn-default">重置</button>
|
||||
</div>
|
||||
<div class="action-bar"><button class="btn btn-primary"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 10v2h10v-2M7 2v7M4.5 6.5L7 9l2.5-2.5" stroke="#fff" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>导出列表数据</button><button class="btn btn-default"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><rect x="2" y="2" width="10" height="10" rx="1.5" stroke="currentColor" stroke-width="1.4"/><path d="M4 5h6M4 7.5h4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>查看导出任务</button></div>
|
||||
|
||||
@@ -132,6 +132,7 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
<div class="main">
|
||||
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item"><label>当前食堂</label><select class="filter-select"><option selected>长庆一食堂</option><option>长庆二食堂</option><option>长庆三食堂</option></select></div>
|
||||
<div class="filter-item"><label>处置日期</label><input class="filter-input" type="date"></div>
|
||||
<div class="filter-item"><label>处置方式</label><select class="filter-select"><option>全部</option><option>员工福利</option><option>捐赠</option><option>废弃</option><option>加工再利用</option></select></div>
|
||||
<div class="filter-item"><label>食材/菜品</label><input class="filter-input" type="text" placeholder="请输入食材/菜品"></div>
|
||||
|
||||
Reference in New Issue
Block a user