feat: 营养用餐模块多页面交互优化——筛选增强、能耗录入、数据关联
- 净菜订单/食安监控/净菜进柜新增页面标题行与食堂切换 - 净菜订单新增预定配送时间筛选 - 食安监控水电气卡片支持手动录入当前余量与今日用量 - 净菜内供/外供新增净菜类型筛选与餐品净菜包数据 - 净菜加工与净菜入库新增关联单号列，建立双向数据关联 - 新增营养用餐模块 CHANGELOG Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
冯普
@@ -0,0 +1,46 @@
|
||||
# 营养用餐管理端 CHANGELOG
|
||||
|
||||
## [2026-05-20]
|
||||
|
||||
### 增强 — 多页面交互优化与数据关联
|
||||
|
||||
- **`prod-clean-order.html`** 净菜订单
|
||||
- 新增页面标题行 + 食堂切换下拉
|
||||
- 筛选栏新增「预定配送时间」日期范围筛选
|
||||
- 筛选栏新增「净菜类型」下拉（净菜包/餐品净菜包）
|
||||
- 订单状态选项调整为：备货中/待配送/配送中/已完成
|
||||
- 新增弹窗通用样式与表单网格布局
|
||||
|
||||
- **`prod-qc-daily.html`** 食安监控
|
||||
- 水电气表 Tab 移除「生成能耗日报」按钮
|
||||
- 水/电/气三张能耗卡片右上角新增「✏️ 录入」入口，支持手动编辑当前余量与今日用量
|
||||
- 新增页面标题行 + 食堂切换下拉
|
||||
- 新增摄像头回放弹窗（含播放器、时间轴、分时段列表）
|
||||
- 新增表单弹窗通用样式
|
||||
|
||||
- **`prod-proc-cabinet.html`** 净菜进柜
|
||||
- 新增页面标题行 + 食堂切换下拉
|
||||
- 筛选栏样式重构（独立圆角卡片）
|
||||
- 移除 Tab 切换结构，改为左右分栏布局
|
||||
- 新增标签/链接通用样式
|
||||
|
||||
- **`sup-clean-external.html`** 净菜外供
|
||||
- 筛选栏新增「净菜类型」下拉
|
||||
- 表格新增「净菜类型」「净菜/餐品」列
|
||||
- 订单状态调整为：备货中/待配送/配送中/已完成
|
||||
- 数据行新增餐品净菜包示例（宫保鸡丁、清蒸鱼、蒜蓉菠菜）
|
||||
- 操作列按状态显示差异化按钮（确认收货/立即发货/备货完成）
|
||||
- 新建订单弹窗新增「净菜类型」字段
|
||||
|
||||
- **`sup-clean-internal.html`** 净菜内供
|
||||
- 筛选栏新增「净菜类型」下拉、订单状态调整
|
||||
- 表格新增「净菜类型」「净菜/餐品」「预定配送时间」列
|
||||
- 数据行新增餐品净菜包示例及更多数据
|
||||
- 操作列按状态显示差异化按钮
|
||||
- 新建申领弹窗新增「净菜类型」字段
|
||||
|
||||
- **`sup-in-clean.html`** 净菜加工
|
||||
- 表格新增「关联单号」列（关联入库单号，如 NC-IN-001）
|
||||
|
||||
- **`sup-in-cleanin.html`** 净菜入库
|
||||
- 表格新增「关联单号」列（关联加工批次号，如 PROC-001）
|
||||
@@ -68,10 +68,38 @@ tbody tr:hover{background:#F8FBFF;}
|
||||
.stat-card__value{font-size:var(--font-xl);font-weight:700;color:var(--text-primary);}
|
||||
.stat-card__label{font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
.action-bar{display:flex;align-items:center;gap:8px;margin-bottom:16px;}
|
||||
/* 页面标题行 */
|
||||
.page-header{display:flex;align-items:center;justify-content:space-between;background:#fff;border-radius:var(--radius-md);padding:16px 24px;margin-bottom:16px;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);}
|
||||
/* 操作列固定右侧 */
|
||||
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;}
|
||||
/* 弹窗 */
|
||||
.modal-mask{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.45);z-index:200;align-items:center;justify-content:center;}
|
||||
.modal-mask.show{display:flex;}
|
||||
.modal{background:#fff;border-radius:var(--radius-lg);width:680px;max-height:85vh;display:flex;flex-direction:column;box-shadow:0 8px 24px rgba(0,0,0,0.15);}
|
||||
.modal__header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px 16px;border-bottom:1px solid var(--border);}
|
||||
.modal__title{font-size:var(--font-lg);font-weight:600;}
|
||||
.modal__close{width:32px;height:32px;border:none;background:none;font-size:18px;cursor:pointer;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;color:var(--text-secondary);}
|
||||
.modal__close:hover{background:#f5f5f5;color:var(--text-primary);}
|
||||
.modal__body{padding:24px;overflow-y:auto;flex:1;}
|
||||
.modal__footer{display:flex;justify-content:flex-end;gap:8px;padding:16px 24px;border-top:1px solid var(--border);}
|
||||
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 20px;}
|
||||
.form-item{display:flex;flex-direction:column;gap:6px;}
|
||||
.form-item.full{grid-column:1/-1;}
|
||||
.form-item__label{font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
.form-item__label .required{color:var(--danger);margin-left:2px;}
|
||||
.form-item input,.form-item select,.form-item textarea{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);color:var(--text-primary);outline:none;background:#fff;}
|
||||
.form-item input:focus,.form-item select:focus{border-color:var(--primary);}
|
||||
.form-item select{appearance: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='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;padding-right:28px;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -95,6 +123,22 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
<a href="prod-proc-stats.html" class="sidebar-item"><span class="mi">📊</span>生产统计</a>
|
||||
</aside>
|
||||
<div class="main">
|
||||
<!-- 页面标题行 + 食堂切换 -->
|
||||
<div class="page-header">
|
||||
<div class="page-header__left">
|
||||
<span class="page-header__title">净菜订单</span>
|
||||
<span class="page-header__desc">2026-05-19 · 数据实时更新</span>
|
||||
</div>
|
||||
<div class="page-header__right">
|
||||
<span class="page-header__label">当前食堂</span>
|
||||
<select class="canteen-select">
|
||||
<option value="1">一食堂（东区）</option>
|
||||
<option value="2">二食堂（西区）</option>
|
||||
<option value="3">三食堂（南区）</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">24</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">18</div><div class="stat-card__label">已完成</div></div></div>
|
||||
@@ -102,31 +146,27 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
<div class="stat-card"><div class="stat-card__icon red">⏳</div><div class="stat-card__info"><div class="stat-card__value">2</div><div class="stat-card__label">待处理</div></div></div>
|
||||
</div>
|
||||
<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>全部</option><option>A区厨房</option><option>B区厨房</option><option>C区厨房</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" 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><option>已完成</option></select></div>
|
||||
<div class="filter-item"><label>预定配送时间</label><input class="filter-input" type="date" style="min-width:150px"> ~ <input class="filter-input" type="date" style="min-width:150px"></div>
|
||||
<button class="btn btn-primary">查询</button><button class="btn btn-default">重置</button>
|
||||
</div>
|
||||
<div class="action-bar">
|
||||
<button class="btn btn-primary">➕ 新建订单</button>
|
||||
<button class="btn btn-default">📋 生成内供申领单</button>
|
||||
<button class="btn btn-primary" onclick="openModal('modal-order')">➕ 新建订单</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>需求数量(kg)</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>需求计量(kg)</th><th>订单状态</th><th>申领时间</th><th>预定配送时间</th><th>创建人</th><th>操作</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td>CO-001</td><td>A区厨房</td><td>菠菜</td><td>NC-IN-BOCA-20260422-01</td><td>蔬菜类</td><td>30</td><td>11:00前</td><td><span class="tag tag-green">库存充足</span></td><td><span class="tag tag-green">已完成</span></td><td class="td-actions"><a class="link">查看</a> <a class="link">编辑</a></td></tr>
|
||||
<tr><td>CO-001</td><td>A区厨房</td><td>白菜</td><td>NC-IN-BCAI-20260422-01</td><td>蔬菜类</td><td>25</td><td>11:00前</td><td><span class="tag tag-green">库存充足</span></td><td><span class="tag tag-green">已完成</span></td><td class="td-actions"><a class="link">查看</a> <a class="link">编辑</a></td></tr>
|
||||
<tr><td>CO-001</td><td>A区厨房</td><td>胡萝卜</td><td>NC-IN-HLUB-20260422-01</td><td>蔬菜类</td><td>25</td><td>11:00前</td><td><span class="tag tag-green">库存充足</span></td><td><span class="tag tag-green">已完成</span></td><td class="td-actions"><a class="link">查看</a> <a class="link">编辑</a></td></tr>
|
||||
<tr><td>CO-002</td><td>B区厨房</td><td>猪里脊</td><td>NC-IN-ZLRJ-20260415-01</td><td>肉禽类</td><td>40</td><td>11:00前</td><td><span class="tag tag-green">库存充足</span></td><td><span class="tag tag-blue">配送中</span></td><td class="td-actions"><a class="link">查看</a> <a class="link">编辑</a></td></tr>
|
||||
<tr><td>CO-002</td><td>B区厨房</td><td>鸡胸肉</td><td>NC-IN-JXRJ-20260422-01</td><td>肉禽类</td><td>20</td><td>11:00前</td><td><span class="tag tag-green">库存充足</span></td><td><span class="tag tag-blue">配送中</span></td><td class="td-actions"><a class="link">查看</a> <a class="link">编辑</a></td></tr>
|
||||
<tr><td>CO-003</td><td>C区厨房</td><td>草鱼</td><td>—</td><td>水产类</td><td>40</td><td>11:30前</td><td><span class="tag tag-red">库存不足</span></td><td><span class="tag tag-orange">待处理</span></td><td class="td-actions"><a class="link">查看</a> <a class="link">编辑</a></td></tr>
|
||||
<tr><td>CO-004</td><td>A区厨房</td><td>西兰花</td><td>NC-IN-XLHU-20260422-01</td><td>蔬菜类</td><td>8</td><td>11:20前</td><td><span class="tag tag-green">库存充足</span></td><td><span class="tag tag-green">已完成</span></td><td class="td-actions"><a class="link">查看</a> <a class="link">编辑</a></td></tr>
|
||||
<tr><td>CO-004</td><td>A区厨房</td><td>清蒸鱼</td><td>NC-IN-CAYO-20260422-01</td><td>水产类</td><td>12</td><td>11:20前</td><td><span class="tag tag-green">库存充足</span></td><td><span class="tag tag-green">已完成</span></td><td class="td-actions"><a class="link">查看</a> <a class="link">编辑</a></td></tr>
|
||||
<tr><td>CO-005</td><td>B区厨房</td><td>杂粮米</td><td>NC-IN-DAMI-20260422-01</td><td>粮油类</td><td>10</td><td>11:25前</td><td><span class="tag tag-green">库存充足</span></td><td><span class="tag tag-blue">配送中</span></td><td class="td-actions"><a class="link">查看</a> <a class="link">编辑</a></td></tr>
|
||||
<tr><td>CO-005</td><td>B区厨房</td><td>冬瓜</td><td>—</td><td>蔬菜类</td><td>6</td><td>11:25前</td><td><span class="tag tag-orange">库存不足</span></td><td><span class="tag tag-orange">待处理</span></td><td class="td-actions"><a class="link">查看</a> <a class="link">编辑</a></td></tr>
|
||||
<tr><td>CO-001</td><td>NC-INT-BOCA-20260422-01</td><td><span class="tag tag-green">🥬 净菜包</span></td><td>菠菜</td><td>500g/袋</td><td>50</td><td>25</td><td><span class="tag tag-green">已完成</span></td><td>2026-04-22 07:30</td><td>2026-04-22 10:00</td><td>张厨师</td><td class="td-actions"><span class="link">详情</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
<tr><td>CO-002</td><td>NC-INT-ZLRJ-20260422-01</td><td><span class="tag tag-green">🥬 净菜包</span></td><td>猪排骨</td><td>2kg/盘</td><td>20</td><td>40</td><td><span class="tag tag-blue">配送中</span></td><td>2026-04-22 08:00</td><td>2026-04-22 10:30</td><td>李主管</td><td class="td-actions"><span class="link" style="color:var(--success)">确认收货</span> <span class="link">详情</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
<tr><td>CO-003</td><td>NC-INT-JXRJ-20260422-01</td><td><span class="tag tag-orange">🍱 餐品净菜包</span></td><td>宫保鸡丁</td><td>标准份（500g）</td><td>30</td><td>15</td><td><span class="tag tag-blue">配送中</span></td><td>2026-04-22 08:00</td><td>2026-04-22 10:30</td><td>李主管</td><td class="td-actions"><span class="link" style="color:var(--success)">确认收货</span> <span class="link">详情</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
<tr><td>CO-005</td><td>NC-INT-QZYU-20260422-01</td><td><span class="tag tag-orange">🍱 餐品净菜包</span></td><td>清蒸鱼</td><td>标准份（500g）</td><td>15</td><td>7.5</td><td><span class="tag tag-orange">待配送</span></td><td>2026-04-22 09:00</td><td>2026-04-22 11:00</td><td>王厨师</td><td class="td-actions"><span class="link">详情</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
<tr><td>CO-006</td><td>NC-INT-TDSI-20260422-01</td><td><span class="tag tag-green">🥬 净菜包</span></td><td>土豆（土豆丝）</td><td>500g/袋</td><td>40</td><td>20</td><td><span class="tag tag-gray">备货中</span></td><td>2026-04-22 09:15</td><td>2026-04-22 11:00</td><td>张厨师</td><td class="td-actions"><span class="link">详情</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
<tr><td>CO-008</td><td>NC-INT-XLHU-20260422-01</td><td><span class="tag tag-green">🥬 净菜包</span></td><td>西兰花</td><td>500g/袋</td><td>30</td><td>15</td><td><span class="tag tag-green">已完成</span></td><td>2026-04-22 10:00</td><td>2026-04-22 11:30</td><td>王厨师</td><td class="td-actions"><span class="link">详情</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@@ -136,6 +176,71 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script></script>
|
||||
<!-- 弹窗：新建订单 -->
|
||||
<div class="modal-mask" id="modal-order">
|
||||
<div class="modal">
|
||||
<div class="modal__header">
|
||||
<div class="modal__title">新建净菜订单</div>
|
||||
<button class="modal__close" onclick="closeModal('modal-order')">✕</button>
|
||||
</div>
|
||||
<div class="modal__body">
|
||||
<div class="form-grid">
|
||||
<div class="form-item">
|
||||
<div class="form-item__label">溯源码<span class="required">*</span></div>
|
||||
<input placeholder="输入溯源码可带出净菜信息">
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-item__label">净菜类型<span class="required">*</span></div>
|
||||
<select id="orderType" onchange="toggleOrderName()"><option value="">请选择</option><option value="nc">净菜包</option><option value="cp">餐品净菜包</option></select>
|
||||
</div>
|
||||
<div class="form-item" id="orderNameNC">
|
||||
<div class="form-item__label">净菜名称<span class="required">*</span></div>
|
||||
<select><option value="">请选择净菜</option><option>菠菜</option><option>玉米（玉米粒）</option><option>猪排骨</option><option>鸡胸肉（鸡肉丝）</option><option>草鱼（鱼片）</option><option>土豆（土豆丝）</option><option>西兰花</option></select>
|
||||
</div>
|
||||
<div class="form-item" id="orderNameCP" style="display:none;">
|
||||
<div class="form-item__label">餐品名称<span class="required">*</span></div>
|
||||
<select><option value="">请选择餐品</option><option>宫保鸡丁</option><option>清蒸鱼</option><option>蒜蓉菠菜</option><option>炒胡萝卜</option><option>红烧排骨</option></select>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-item__label">包装规格<span class="required">*</span></div>
|
||||
<input placeholder="如 500g/袋、2kg/盘">
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-item__label">需求份数<span class="required">*</span></div>
|
||||
<input type="number" placeholder="请输入份数" min="1">
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-item__label">需求计量(kg)<span class="required">*</span></div>
|
||||
<input type="number" placeholder="请输入数量" min="0.1" step="0.1">
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-item__label">预定配送时间</div>
|
||||
<input type="datetime-local">
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-item__label">创建人<span class="required">*</span></div>
|
||||
<input placeholder="请输入创建人姓名">
|
||||
</div>
|
||||
<div class="form-item full">
|
||||
<div class="form-item__label">备注</div>
|
||||
<input placeholder="如有特殊要求请备注">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal__footer">
|
||||
<button class="btn btn-default" onclick="closeModal('modal-order')">取消</button>
|
||||
<button class="btn btn-primary" onclick="closeModal('modal-order')">确认提交</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
// 弹窗开关
|
||||
function openModal(id){document.getElementById(id).classList.add('show');}
|
||||
function closeModal(id){document.getElementById(id).classList.remove('show');}
|
||||
// 点击遮罩关闭
|
||||
document.querySelectorAll('.modal-mask').forEach(function(m){m.addEventListener('click',function(e){if(e.target===m)m.classList.remove('show');});});
|
||||
// 净菜类型切换：显示净菜名称或餐品名称
|
||||
function toggleOrderName(){var v=document.getElementById('orderType').value;document.getElementById('orderNameNC').style.display=(v==='cp'?'none':'flex');document.getElementById('orderNameCP').style.display=(v==='cp'?'flex':'none');}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>营养管理 - 净菜进柜 | 健康长庆原型</title>
|
||||
<style>
|
||||
*{box-sizing:border-box;margin:0;padding:0;}
|
||||
@@ -32,6 +33,17 @@ body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei
|
||||
.mi{display:inline-block;width:20px;text-align:center;filter:grayscale(1);opacity:0.65;margin-right:2px;}
|
||||
.sidebar-item.active .mi{opacity:0.9;}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;min-height:calc(100vh - 56px);}
|
||||
/* 页面标题行 */
|
||||
.page-header{display:flex;align-items:center;justify-content:space-between;background:#fff;border-radius:var(--radius-md);padding:16px 24px;margin-bottom:16px;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);}
|
||||
/* 统计卡片 */
|
||||
.stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:16px;}
|
||||
.stat-card{background:#fff;border-radius:var(--radius-md);padding:20px 24px;box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:16px;}
|
||||
.stat-card__icon{width:48px;height:48px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;font-size:24px;}
|
||||
@@ -42,13 +54,8 @@ body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei
|
||||
.stat-card__info{display:flex;flex-direction:column;gap:4px;}
|
||||
.stat-card__value{font-size:var(--font-xl);font-weight:700;color:var(--text-primary);}
|
||||
.stat-card__label{font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
.page-tabs{display:flex;gap:0;background:#fff;border-radius:var(--radius-md) var(--radius-md) 0 0;padding:0 24px;box-shadow:var(--shadow-sm);border-bottom:2px solid var(--border);}
|
||||
.page-tab{padding:14px 20px;font-size:var(--font-sm);cursor:pointer;color:var(--text-secondary);border-bottom:2px solid transparent;margin-bottom:-2px;transition:all .2s;display:flex;align-items:center;gap:6px;}
|
||||
.page-tab:hover{color:var(--primary);}
|
||||
.page-tab.active{color:var(--primary);border-bottom-color:var(--primary);font-weight:500;}
|
||||
.tab-panel{display:none;}
|
||||
.tab-panel.active{display:block;}
|
||||
.filter-bar{background:#fff;border-radius:0 0 var(--radius-md) var(--radius-md);padding:20px 24px;margin-bottom:16px;box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
|
||||
/* 筛选栏 */
|
||||
.filter-bar{background:#fff;border-radius:var(--radius-md);padding:20px 24px;margin-bottom:16px;box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
|
||||
.filter-item{display:flex;align-items:center;gap:8px;}
|
||||
.filter-item label{font-size:var(--font-sm);color:var(--text-secondary);white-space:nowrap;}
|
||||
.filter-input{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);color:var(--text-primary);outline:none;background:#fff;min-width:160px;}
|
||||
@@ -57,18 +64,6 @@ body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei
|
||||
.btn{height:36px;padding:0 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);cursor:pointer;border:none;transition:all .2s;display:inline-flex;align-items:center;gap:6px;}
|
||||
.btn-primary{background:var(--primary);color:#fff;}.btn-primary:hover{background:#40a9ff;}
|
||||
.btn-default{background:#fff;color:var(--text-primary);border:1px solid var(--border);}.btn-default:hover{color:var(--primary);border-color:var(--primary);}
|
||||
.table-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);overflow:hidden;}
|
||||
.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;}
|
||||
.action-bar{display:flex;align-items:center;gap:8px;margin-bottom:16px;}
|
||||
.table-card__content{overflow-x:auto;overflow-y:hidden;-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;}
|
||||
tbody td{padding:14px 16px;font-size:var(--font-sm);color:var(--text-primary);border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
tbody tr:last-child td{border-bottom:none;}
|
||||
tbody tr:hover{background:#F8FBFF;}
|
||||
.tag{display:inline-flex;align-items:center;padding:2px 8px;border-radius:10px;font-size:var(--font-xs);}
|
||||
.tag-blue{background:var(--primary-light);color:var(--primary);}
|
||||
.tag-green{background:#F6FFED;color:var(--success);}
|
||||
@@ -76,39 +71,95 @@ tbody tr:hover{background:#F8FBFF;}
|
||||
.tag-red{background:#FFF1F0;color:var(--danger);}
|
||||
.tag-gray{background:#F5F5F5;color:#999;}
|
||||
.link{color:var(--primary);cursor:pointer;font-size:var(--font-sm);}.link:hover{color:#40a9ff;}
|
||||
/* 左右分栏布局 */
|
||||
.split-layout{display:flex;gap:16px;align-items:flex-start;}
|
||||
.split-layout__left{width:340px;flex-shrink:0;}
|
||||
.split-layout__right{flex:1;min-width:0;}
|
||||
/* 货柜可视化 */
|
||||
.cabinet-visual{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);overflow:hidden;}
|
||||
.cabinet-visual__header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--border);}
|
||||
.cabinet-visual__title{font-size:var(--font-base);font-weight:600;}
|
||||
.cabinet-visual__status{font-size:var(--font-xs);color:var(--text-secondary);}
|
||||
.cabinet-header-select{height:32px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 10px;font-size:var(--font-sm);color:var(--text-primary);font-weight:600;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='%23999'/%3E%3C/svg%3E") no-repeat right 8px center;appearance:none;cursor:pointer;}
|
||||
.cabinet-header-select:focus{border-color:var(--primary);}
|
||||
.btn-icon{width:32px;height:32px;padding:0;border:1px solid var(--border);border-radius:var(--radius-sm);background:#fff;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;color:var(--text-secondary);transition:all .2s;flex-shrink:0;}
|
||||
.btn-icon:hover{color:var(--primary);border-color:var(--primary);}
|
||||
.cabinet-slot__remain{font-size:var(--font-sm);font-weight:700;color:var(--primary);}
|
||||
.cabinet-slot__expire{font-size:10px;color:var(--text-placeholder);}
|
||||
.cabinet-visual__body{padding:16px;}
|
||||
.cabinet-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
|
||||
.cabinet-slot{border:2px solid var(--border);border-radius:var(--radius-md);padding:12px 10px;cursor:pointer;transition:all .2s;display:flex;flex-direction:column;align-items:center;gap:4px;min-height:80px;justify-content:center;position:relative;}
|
||||
.cabinet-slot:hover{border-color:var(--primary);box-shadow:0 2px 8px rgba(24,144,255,0.15);}
|
||||
.cabinet-slot.active{border-color:var(--primary);background:var(--primary-light);box-shadow:0 2px 8px rgba(24,144,255,0.2);}
|
||||
.cabinet-slot.occupied{background:#FAFFF5;border-color:#B7EB8F;}
|
||||
.cabinet-slot.occupied.active{background:var(--primary-light);border-color:var(--primary);}
|
||||
.cabinet-slot.warning{background:#FFFBE6;border-color:#FFD666;}
|
||||
.cabinet-slot.alert{background:#FFF1F0;border-color:#FFA39E;}
|
||||
.cabinet-slot__id{font-size:var(--font-xs);color:var(--text-placeholder);font-weight:500;}
|
||||
.cabinet-slot__name{font-size:var(--font-sm);font-weight:600;color:var(--text-primary);text-align:center;line-height:1.3;}
|
||||
.cabinet-slot__temp{font-size:var(--font-xs);color:var(--text-secondary);}
|
||||
.cabinet-slot__badge{position:absolute;top:4px;right:4px;width:8px;height:8px;border-radius:50%;}
|
||||
.cabinet-slot__badge.green{background:var(--success);}
|
||||
.cabinet-slot__badge.orange{background:var(--warning);}
|
||||
.cabinet-slot__badge.red{background:var(--danger);}
|
||||
.cabinet-slot--empty{background:#FAFAFA;border-style:dashed;}
|
||||
.cabinet-slot--empty .cabinet-slot__name{color:var(--text-placeholder);font-weight:400;}
|
||||
.cabinet-legend{display:flex;gap:16px;padding:12px 20px;border-top:1px solid var(--border);flex-wrap:wrap;}
|
||||
.cabinet-legend__item{display:flex;align-items:center;gap:4px;font-size:var(--font-xs);color:var(--text-secondary);}
|
||||
.cabinet-legend__dot{width:10px;height:10px;border-radius:2px;border:1.5px solid;}
|
||||
.cabinet-legend__dot.idle{background:#FAFAFA;border-color:var(--border);border-style:dashed;}
|
||||
.cabinet-legend__dot.storing{background:#FAFFF5;border-color:#B7EB8F;}
|
||||
.cabinet-legend__dot.warn{background:#FFFBE6;border-color:#FFD666;}
|
||||
.cabinet-legend__dot.err{background:#FFF1F0;border-color:#FFA39E;}
|
||||
/* 右侧表格 */
|
||||
.table-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);overflow:hidden;}
|
||||
.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 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;}
|
||||
tbody td{padding:14px 16px;font-size:var(--font-sm);color:var(--text-primary);border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
tbody tr:last-child td{border-bottom:none;}
|
||||
tbody tr:hover{background:#F8FBFF;}
|
||||
tbody tr.row-active{background:var(--primary-light);}
|
||||
.td-actions{display:flex;align-items:center;gap:8px;}
|
||||
/* 操作列固定右侧 */
|
||||
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;}
|
||||
.td-actions{display:flex;align-items:center;gap:8px;}
|
||||
tbody tr.row-active td.td-actions{background:var(--primary-light);}
|
||||
.pagination{display:flex;align-items:center;justify-content:flex-end;padding:16px 24px;gap:8px;border-top:1px solid var(--border);}
|
||||
.pagination span{font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
.page-btn{width:32px;height:32px;border:1px solid var(--border);border-radius:var(--radius-sm);background:#fff;cursor:pointer;font-size:var(--font-sm);display:inline-flex;align-items:center;justify-content:center;transition:all .2s;}
|
||||
.page-btn:hover,.page-btn.active{background:var(--primary);color:#fff;border-color:var(--primary);}
|
||||
.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;width:680px;max-height:80vh;overflow-y:auto;box-shadow:0 4px 12px rgba(0,0,0,0.15);}
|
||||
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid #e8e8e8;}
|
||||
.modal-title{font-size:16px;font-weight:600;color:#262626;}
|
||||
.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:flex-end;gap:12px;padding:16px 24px;border-top:1px solid #e8e8e8;}
|
||||
/* 弹窗 */
|
||||
.modal-mask{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.45);z-index:200;align-items:center;justify-content:center;}
|
||||
.modal-mask.show{display:flex;}
|
||||
.modal{background:#fff;border-radius:var(--radius-lg);width:680px;max-height:85vh;display:flex;flex-direction:column;box-shadow:0 8px 24px rgba(0,0,0,0.15);}
|
||||
.modal__header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px 16px;border-bottom:1px solid var(--border);}
|
||||
.modal__title{font-size:var(--font-lg);font-weight:600;}
|
||||
.modal__close{width:32px;height:32px;border:none;background:none;font-size:18px;cursor:pointer;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;color:var(--text-secondary);}
|
||||
.modal__close:hover{background:#f5f5f5;color:var(--text-primary);}
|
||||
.modal__body{padding:24px;overflow-y:auto;flex:1;}
|
||||
.modal__footer{display:flex;justify-content:flex-end;gap:8px;padding:16px 24px;border-top:1px solid var(--border);}
|
||||
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 20px;}
|
||||
.form-item{display:flex;flex-direction:column;gap:6px;}
|
||||
.form-item.full{grid-column:1/-1;}
|
||||
.form-item__label{font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
.form-item__label .required{color:var(--danger);margin-left:2px;}
|
||||
.form-item input,.form-item select,.form-item textarea{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);color:var(--text-primary);outline:none;background:#fff;}
|
||||
.form-item input:focus,.form-item select:focus{border-color:var(--primary);}
|
||||
.form-item select{appearance: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='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;padding-right:28px;}
|
||||
/* 视频弹窗 */
|
||||
.video-modal{width:720px;}
|
||||
.modal--video{width:720px;}
|
||||
.video-placeholder{width:100%;height:400px;background:#000;border-radius:var(--radius-md);display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;gap:12px;}
|
||||
.video-placeholder__icon{font-size:48px;opacity:0.8;}
|
||||
.video-placeholder__text{font-size:var(--font-sm);opacity:0.7;}
|
||||
.video-info{display:flex;gap:24px;margin-top:16px;padding:12px 0;border-top:1px solid var(--border);}
|
||||
.video-info__item{display:flex;align-items:center;gap:6px;font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
.video-info__item span{color:var(--text-primary);font-weight:500;}
|
||||
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
|
||||
.form-item{display:flex;flex-direction:column;gap:4px;}
|
||||
.form-item.full{grid-column:1/-1;}
|
||||
.form-item label{font-size:13px;color:#8c8c8c;}
|
||||
.form-item label .required{color:#ff4d4f;margin-left:2px;}
|
||||
.form-item input,.form-item select,.form-item textarea{height:36px;padding:0 12px;border:1px solid #e8e8e8;border-radius:4px;font-size:13px;outline:none;}
|
||||
.form-item input:focus,.form-item select:focus,.form-item textarea:focus{border-color:#1890FF;}
|
||||
.form-item textarea{height:80px;padding:8px 12px;resize:vertical;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -132,172 +183,236 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
<a href="prod-proc-stats.html" class="sidebar-item"><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 value="1">一食堂（东区）</option>
|
||||
<option value="2">二食堂（西区）</option>
|
||||
<option value="3">三食堂（南区）</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">8</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">7</div><div class="stat-card__label">在线正常</div></div></div>
|
||||
<div class="stat-card"><div class="stat-card__icon orange">📦</div><div class="stat-card__info"><div class="stat-card__value">48/64</div><div class="stat-card__label">已存放格口</div></div></div>
|
||||
<div class="stat-card"><div class="stat-card__icon orange">📦</div><div class="stat-card__info"><div class="stat-card__value">6/10</div><div class="stat-card__label">已占用格口</div></div></div>
|
||||
<div class="stat-card"><div class="stat-card__icon red">⚠️</div><div class="stat-card__info"><div class="stat-card__value">1</div><div class="stat-card__label">异常告警</div></div></div>
|
||||
</div>
|
||||
<div class="page-tabs">
|
||||
<div class="page-tab active" onclick="switchTab(0)">🥬 食材净菜</div>
|
||||
<div class="page-tab" onclick="switchTab(1)">🍱 餐品净菜包</div>
|
||||
<div class="page-tab" onclick="switchTab(2)">🗄️ 智能柜总览</div>
|
||||
</div>
|
||||
<!-- Tab1: 食材净菜 -->
|
||||
<div class="tab-panel active">
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item"><label>智能柜编号</label><select class="filter-select"><option>全部</option></select></div>
|
||||
<div class="filter-item"><label>食材名称</label><input class="filter-input" placeholder="请输入食材名称"></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><select class="filter-select"><option>全部</option><option>A区</option><option>B区</option><option>C区</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" onclick="openModal()">➕ 新增存放记录</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>订单量(kg)</th><th>实收量(kg)</th><th>差异量(kg)</th><th>校验结果</th><th>当前温度(℃)</th><th>保质剩余时间</th><th>存入时间</th><th>状态</th><th>操作</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td>A1-01</td><td>A区智能柜-1号</td><td>NC-CAB-BOCA-20260422-01</td><td>净菠菜</td><td>12.5</td><td>12.5</td><td>0.0</td><td><span class="tag tag-green">正常</span></td><td>4.2</td><td>剩余32h</td><td>2026-04-22 09:15</td><td><span class="tag tag-green">存放中</span></td><td class="td-actions"><a class="link" href="trace-timeline.html">食材溯源链路</a> <span class="link" onclick="showVideo('A1-01','净菠菜')">查看视频</span> <span class="link">详情</span> <span class="link">编辑</span></td></tr>
|
||||
<tr><td>A1-02</td><td>A区智能柜-1号</td><td>NC-CAB-HLUB-20260422-01</td><td>净胡萝卜</td><td>18.0</td><td>17.8</td><td>-0.2</td><td><span class="tag tag-orange">轻微差异</span></td><td>4.1</td><td>剩余46h</td><td>2026-04-22 09:20</td><td><span class="tag tag-green">存放中</span></td><td class="td-actions"><a class="link" href="trace-timeline.html">食材溯源链路</a> <span class="link" onclick="showVideo('A1-02','净胡萝卜')">查看视频</span> <span class="link">详情</span> <span class="link">编辑</span></td></tr>
|
||||
<tr><td>A1-03</td><td>A区智能柜-1号</td><td>NC-CAB-XGUO-20260422-01</td><td>净香菇</td><td>9.0</td><td>8.6</td><td>-0.4</td><td><span class="tag tag-green">正常</span></td><td>4.3</td><td>剩余28h</td><td>2026-04-22 09:30</td><td><span class="tag tag-orange">临期预警</span></td><td class="td-actions"><a class="link" href="trace-timeline.html">食材溯源链路</a> <span class="link" onclick="showVideo('A1-03','净香菇')">查看视频</span> <span class="link">详情</span> <span class="link">编辑</span></td></tr>
|
||||
<tr><td>B2-01</td><td>B区智能柜-2号</td><td>NC-CAB-BCAI-20260422-01</td><td>净白菜</td><td>22.0</td><td>22.0</td><td>0.0</td><td><span class="tag tag-green">正常</span></td><td>7.8</td><td>剩余40h</td><td>2026-04-22 08:50</td><td><span class="tag tag-red">温度超标</span></td><td class="td-actions"><a class="link" href="trace-timeline.html">食材溯源链路</a> <span class="link" onclick="showVideo('B2-01','净白菜')">查看视频</span> <span class="link">详情</span> <span class="link">编辑</span></td></tr>
|
||||
<tr><td>C1-01</td><td>C区智能柜-1号</td><td>NC-CAB-XLHU-20260422-01</td><td>净西兰花</td><td>10.0</td><td>10.0</td><td>0.0</td><td><span class="tag tag-green">正常</span></td><td>4.0</td><td>剩余50h</td><td>2026-04-22 09:40</td><td><span class="tag tag-green">存放中</span></td><td class="td-actions"><a class="link" href="trace-timeline.html">食材溯源链路</a> <span class="link" onclick="showVideo('C1-01','净西兰花')">查看视频</span> <span class="link">详情</span> <span class="link">编辑</span></td></tr>
|
||||
<tr><td>A2-01</td><td>A区智能柜-2号</td><td>—</td><td>—</td><td>—</td><td>—</td><td>—</td><td>—</td><td>4.2</td><td>—</td><td>—</td><td><span class="tag tag-gray">空置</span></td><td class="td-actions">—</td></tr>
|
||||
</tbody>
|
||||
</table></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Tab2: 餐品净菜包 -->
|
||||
<div class="tab-panel">
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item"><label>智能柜编号</label><select class="filter-select"><option>全部</option></select></div>
|
||||
<div class="filter-item"><label>绑定菜品</label><input class="filter-input" 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>A区</option><option>B区</option><option>C区</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">➕ 新增存放记录</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>总重量(g)</th><th>校验结果</th><th>当前温度(℃)</th><th>保质剩余时间</th><th>存入时间</th><th>状态</th><th>操作</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td>A3-01</td><td>A区智能柜-1号</td><td>PKG-DH-001</td><td>宫保鸡丁</td><td><span class="tag tag-green">标准份</span></td><td>12包</td><td>2,400</td><td><span class="tag tag-green">正常</span></td><td>3.8</td><td>剩余44h</td><td>2026-04-22 10:20</td><td><span class="tag tag-green">存放中</span></td><td class="td-actions"><a class="link" href="trace-timeline.html">食材溯源链路</a> <span class="link" onclick="showVideo('A3-01','宫保鸡丁')">查看视频</span> <span class="link">详情</span> <span class="link">编辑</span></td></tr>
|
||||
<tr><td>A3-02</td><td>A区智能柜-1号</td><td>PKG-DH-003</td><td>清蒸鱼</td><td><span class="tag tag-green">标准份</span></td><td>8包</td><td>2,000</td><td><span class="tag tag-green">正常</span></td><td>3.5</td><td>剩余44h</td><td>2026-04-22 10:35</td><td><span class="tag tag-green">存放中</span></td><td class="td-actions"><a class="link" href="trace-timeline.html">食材溯源链路</a> <span class="link" onclick="showVideo('A3-02','清蒸鱼')">查看视频</span> <span class="link">详情</span> <span class="link">编辑</span></td></tr>
|
||||
<tr><td>B3-01</td><td>B区智能柜-1号</td><td>PKG-DH-004</td><td>蒜蓉菠菜</td><td><span class="tag tag-green">标准份</span></td><td>10包</td><td>1,800</td><td><span class="tag tag-green">正常</span></td><td>4.0</td><td>剩余44h</td><td>2026-04-22 10:50</td><td><span class="tag tag-green">存放中</span></td><td class="td-actions"><a class="link" href="trace-timeline.html">食材溯源链路</a> <span class="link" onclick="showVideo('B3-01','蒜蓉菠菜')">查看视频</span> <span class="link">详情</span> <span class="link">编辑</span></td></tr>
|
||||
<tr><td>B3-02</td><td>B区智能柜-1号</td><td>PKG-DH-005</td><td>炒胡萝卜</td><td><span class="tag tag-blue">大份</span></td><td>6包</td><td>1,920</td><td><span class="tag tag-orange">轻微差异</span></td><td>4.2</td><td>剩余44h</td><td>2026-04-22 11:05</td><td><span class="tag tag-green">存放中</span></td><td class="td-actions"><a class="link" href="trace-timeline.html">食材溯源链路</a> <span class="link" onclick="showVideo('B3-02','炒胡萝卜')">查看视频</span> <span class="link">详情</span> <span class="link">编辑</span></td></tr>
|
||||
<tr><td>C2-01</td><td>C区智能柜-1号</td><td>PKG-DH-002</td><td>宫保鸡丁</td><td><span class="tag tag-green">标准份</span></td><td>12包</td><td>2,400</td><td><span class="tag tag-green">正常</span></td><td>3.8</td><td>剩余44h</td><td>2026-04-22 10:21</td><td><span class="tag tag-green">存放中</span></td><td class="td-actions"><a class="link" href="trace-timeline.html">食材溯源链路</a> <span class="link" onclick="showVideo('C2-01','宫保鸡丁')">查看视频</span> <span class="link">详情</span> <span class="link">编辑</span></td></tr>
|
||||
<tr><td>A4-01</td><td>A区智能柜-2号</td><td>—</td><td>—</td><td>—</td><td>—</td><td>—</td><td>—</td><td>4.1</td><td>—</td><td>—</td><td><span class="tag tag-gray">空置</span></td><td class="td-actions">—</td></tr>
|
||||
</tbody>
|
||||
</table></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Tab3: 智能柜总览 -->
|
||||
<div class="tab-panel">
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item"><label>智能柜编号</label><select class="filter-select"><option>全部</option></select></div>
|
||||
<div class="filter-item"><label>区域</label><select class="filter-select"><option>全部</option><option>A区</option><option>B区</option><option>C区</option></select></div>
|
||||
<div class="filter-item"><label>状态</label><select class="filter-select"><option>全部</option><option>在线</option><option>告警</option><option>离线</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">🔄 刷新状态</button><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>
|
||||
<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>当前温度(℃)</th><th>温度状态</th><th>设备状态</th><th>最后更新</th><th>操作</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td>CAB-A1</td><td>A区智能柜-1号</td><td>A区厨房入口</td><td>8</td><td>3</td><td>2</td><td>3</td><td>4.1</td><td><span class="tag tag-green">正常</span></td><td><span class="tag tag-green">在线</span></td><td>2026-04-22 11:50</td><td class="td-actions"><span class="link" onclick="showVideo('CAB-A1','A区智能柜-1号')">查看视频</span> <span class="link">详情</span> <span class="link">编辑</span></td></tr>
|
||||
<tr><td>CAB-A2</td><td>A区智能柜-2号</td><td>A区备餐间</td><td>8</td><td>0</td><td>0</td><td>8</td><td>4.2</td><td><span class="tag tag-green">正常</span></td><td><span class="tag tag-green">在线</span></td><td>2026-04-22 11:50</td><td class="td-actions"><span class="link" onclick="showVideo('CAB-A2','A区智能柜-2号')">查看视频</span> <span class="link">详情</span> <span class="link">编辑</span></td></tr>
|
||||
<tr><td>CAB-B1</td><td>B区智能柜-1号</td><td>B区厨房入口</td><td>8</td><td>0</td><td>2</td><td>6</td><td>4.0</td><td><span class="tag tag-green">正常</span></td><td><span class="tag tag-green">在线</span></td><td>2026-04-22 11:50</td><td class="td-actions"><span class="link" onclick="showVideo('CAB-B1','B区智能柜-1号')">查看视频</span> <span class="link">详情</span> <span class="link">编辑</span></td></tr>
|
||||
<tr><td>CAB-B2</td><td>B区智能柜-2号</td><td>B区备餐间</td><td>8</td><td>2</td><td>0</td><td>6</td><td>7.8</td><td><span class="tag tag-red">超标</span></td><td><span class="tag tag-red">告警</span></td><td>2026-04-22 11:48</td><td class="td-actions"><span class="link" onclick="showVideo('CAB-B2','B区智能柜-2号')">查看视频</span> <span class="link">详情</span> <span class="link">编辑</span></td></tr>
|
||||
<tr><td>CAB-C1</td><td>C区智能柜-1号</td><td>C区厨房入口</td><td>8</td><td>1</td><td>1</td><td>6</td><td>4.0</td><td><span class="tag tag-green">正常</span></td><td><span class="tag tag-green">在线</span></td><td>2026-04-22 11:50</td><td class="td-actions"><span class="link" onclick="showVideo('CAB-C1','C区智能柜-1号')">查看视频</span> <span class="link">详情</span> <span class="link">编辑</span></td></tr>
|
||||
<tr><td>CAB-C2</td><td>C区智能柜-2号</td><td>C区备餐间</td><td>8</td><td>0</td><td>0</td><td>8</td><td>4.3</td><td><span class="tag tag-green">正常</span></td><td><span class="tag tag-gray">离线</span></td><td>2026-04-22 09:12</td><td class="td-actions"><span class="link" onclick="showVideo('CAB-C2','C区智能柜-2号')">查看视频</span> <span class="link">详情</span> <span class="link">编辑</span></td></tr>
|
||||
</tbody>
|
||||
</table></div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<div class="modal-overlay" id="modalOverlay" style="display:none;">
|
||||
<div class="modal">
|
||||
<div class="modal-header">
|
||||
<span class="modal-title">新增存放记录</span>
|
||||
<span class="modal-close" onclick="closeModal()">×</span>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="form-grid">
|
||||
<div class="form-item">
|
||||
<label>所属智能柜<span class="required">*</span></label>
|
||||
<select><option>请选择</option><option>A区智能柜-1号</option><option>A区智能柜-2号</option><option>B区智能柜-1号</option><option>B区智能柜-2号</option><option>C区智能柜-1号</option></select>
|
||||
<!-- 左右分栏 -->
|
||||
<div class="split-layout">
|
||||
<!-- 左侧：智能货柜可视化 -->
|
||||
<div class="split-layout__left">
|
||||
<div class="cabinet-visual">
|
||||
<div class="cabinet-visual__header">
|
||||
<select class="cabinet-header-select">
|
||||
<option>A区智能柜-1号</option>
|
||||
<option>A区智能柜-2号</option>
|
||||
<option>B区智能柜-1号</option>
|
||||
<option>B区智能柜-2号</option>
|
||||
<option>C区智能柜-1号</option>
|
||||
</select>
|
||||
<div style="display:flex;align-items:center;gap:8px;">
|
||||
<span class="cabinet-visual__status">4.1℃ · <span style="color:var(--success)">在线</span></span>
|
||||
<button class="btn-icon" title="刷新数据"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M13.65 2.35A7.96 7.96 0 008 0a8 8 0 108 8h-2a6 6 0 11-1.76-4.24L10 6h6V0l-2.35 2.35z" fill="currentColor"/></svg></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<label>溯源码（关联净菜入库）</label>
|
||||
<input type="text" placeholder="请输入溯源码">
|
||||
<div class="cabinet-visual__body">
|
||||
<div class="cabinet-grid">
|
||||
<!-- 第1层 -->
|
||||
<div class="cabinet-slot occupied active" data-slot="0" onclick="selectSlot(0)">
|
||||
<div class="cabinet-slot__badge green"></div>
|
||||
<div class="cabinet-slot__id">A1-01</div>
|
||||
<div class="cabinet-slot__name">土豆（土豆丝）</div>
|
||||
<div class="cabinet-slot__remain">10.2kg</div>
|
||||
<div class="cabinet-slot__expire">04-23 到期</div>
|
||||
</div>
|
||||
<div class="cabinet-slot occupied" data-slot="1" onclick="selectSlot(1)">
|
||||
<div class="cabinet-slot__badge green"></div>
|
||||
<div class="cabinet-slot__id">A1-02</div>
|
||||
<div class="cabinet-slot__name">净胡萝卜</div>
|
||||
<div class="cabinet-slot__remain">15.6kg</div>
|
||||
<div class="cabinet-slot__expire">04-24 到期</div>
|
||||
</div>
|
||||
<!-- 第2层 -->
|
||||
<div class="cabinet-slot occupied warning" data-slot="2" onclick="selectSlot(2)">
|
||||
<div class="cabinet-slot__badge orange"></div>
|
||||
<div class="cabinet-slot__id">A1-03</div>
|
||||
<div class="cabinet-slot__name">净香菇</div>
|
||||
<div class="cabinet-slot__remain">6.8kg</div>
|
||||
<div class="cabinet-slot__expire" style="color:var(--warning)">04-22 即将到期</div>
|
||||
</div>
|
||||
<div class="cabinet-slot occupied" data-slot="3" onclick="selectSlot(3)">
|
||||
<div class="cabinet-slot__badge green"></div>
|
||||
<div class="cabinet-slot__id">A1-04</div>
|
||||
<div class="cabinet-slot__name">净西兰花</div>
|
||||
<div class="cabinet-slot__remain">8.5kg</div>
|
||||
<div class="cabinet-slot__expire">04-24 到期</div>
|
||||
</div>
|
||||
<!-- 第3层 -->
|
||||
<div class="cabinet-slot occupied" data-slot="4" onclick="selectSlot(4)">
|
||||
<div class="cabinet-slot__badge green"></div>
|
||||
<div class="cabinet-slot__id">A1-05</div>
|
||||
<div class="cabinet-slot__name">宫保鸡丁</div>
|
||||
<div class="cabinet-slot__remain">5.4kg</div>
|
||||
<div class="cabinet-slot__expire">04-24 到期</div>
|
||||
</div>
|
||||
<div class="cabinet-slot occupied alert" data-slot="5" onclick="selectSlot(5)">
|
||||
<div class="cabinet-slot__badge red"></div>
|
||||
<div class="cabinet-slot__id">A1-06</div>
|
||||
<div class="cabinet-slot__name">净白菜</div>
|
||||
<div class="cabinet-slot__remain">18.0kg</div>
|
||||
<div class="cabinet-slot__expire" style="color:var(--danger)">04-12 已过期</div>
|
||||
</div>
|
||||
<!-- 第4层 -->
|
||||
<div class="cabinet-slot cabinet-slot--empty" data-slot="6" onclick="selectSlot(6)">
|
||||
<div class="cabinet-slot__id">A1-07</div>
|
||||
<div class="cabinet-slot__name">空闲</div>
|
||||
</div>
|
||||
<div class="cabinet-slot cabinet-slot--empty" data-slot="7" onclick="selectSlot(7)">
|
||||
<div class="cabinet-slot__id">A1-08</div>
|
||||
<div class="cabinet-slot__name">空闲</div>
|
||||
</div>
|
||||
<!-- 第5层 -->
|
||||
<div class="cabinet-slot cabinet-slot--empty" data-slot="8" onclick="selectSlot(8)">
|
||||
<div class="cabinet-slot__id">A1-09</div>
|
||||
<div class="cabinet-slot__name">空闲</div>
|
||||
</div>
|
||||
<div class="cabinet-slot cabinet-slot--empty" data-slot="9" onclick="selectSlot(9)">
|
||||
<div class="cabinet-slot__id">A1-10</div>
|
||||
<div class="cabinet-slot__name">空闲</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<label>存放净菜名称<span class="required">*</span></label>
|
||||
<input type="text" placeholder="请输入净菜名称">
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<label>订单量(kg)<span class="required">*</span></label>
|
||||
<input type="number" placeholder="请输入订单量">
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<label>实收量(kg)<span class="required">*</span></label>
|
||||
<input type="number" placeholder="请输入实收量">
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<label>存入时间</label>
|
||||
<input type="datetime-local">
|
||||
<div class="cabinet-legend">
|
||||
<div class="cabinet-legend__item"><div class="cabinet-legend__dot idle"></div>空闲</div>
|
||||
<div class="cabinet-legend__item"><div class="cabinet-legend__dot storing"></div>储物中</div>
|
||||
<div class="cabinet-legend__item"><div class="cabinet-legend__dot warn"></div>临期预警</div>
|
||||
<div class="cabinet-legend__item"><div class="cabinet-legend__dot err"></div>过期预警</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="btn btn-default" onclick="closeModal()">取消</button>
|
||||
<button class="btn btn-primary">确定</button>
|
||||
<!-- 右侧：物品明细表格 -->
|
||||
<div class="split-layout__right">
|
||||
<div class="table-card">
|
||||
<div class="table-card__header">
|
||||
<div class="table-card__title">格口存放明细</div>
|
||||
<div class="table-card__actions">
|
||||
<button class="btn btn-primary" onclick="openModal('modal-store')">➕ 存入净菜</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead><tr><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></tr></thead>
|
||||
<tbody id="detailTable">
|
||||
<tr class="row-active" data-slot="0"><td>A1-01</td><td>NC-CAB-BOCA-0422-01</td><td>土豆（土豆丝）</td><td><span class="tag tag-green">🥬 净菜</span></td><td>12.5</td><td>10.2</td><td>张厨师</td><td>4.2</td><td>剩余32h</td><td>04-22 09:15</td><td><span class="tag tag-green">存放中</span></td><td class="td-actions"><a class="link" href="trace-timeline.html">溯源</a> <span class="link" onclick="showVideo('A1-01','土豆')">视频</span> <span class="link">详情</span> <span class="link">编辑</span></td></tr>
|
||||
<tr data-slot="1"><td>A1-02</td><td>NC-CAB-HLUB-0422-01</td><td>净胡萝卜</td><td><span class="tag tag-green">🥬 净菜</span></td><td>18.0</td><td>15.6</td><td>李主管</td><td>4.1</td><td>剩余46h</td><td>04-22 09:20</td><td><span class="tag tag-green">存放中</span></td><td class="td-actions"><a class="link" href="trace-timeline.html">溯源</a> <span class="link" onclick="showVideo('A1-02','净胡萝卜')">视频</span> <span class="link">详情</span><span class="link">编辑</span></td></tr>
|
||||
<tr data-slot="2"><td>A1-03</td><td>NC-CAB-XGUO-0422-01</td><td>净香菇</td><td><span class="tag tag-green">🥬 净菜</span></td><td>9.0</td><td>6.8</td><td>王厨师</td><td>4.3</td><td>剩余6h</td><td>04-22 09:30</td><td><span class="tag tag-orange">临期预警</span></td><td class="td-actions"><a class="link" href="trace-timeline.html">溯源</a> <span class="link" onclick="showVideo('A1-03','净香菇')">视频</span> <span class="link">详情</span><span class="link">编辑</span></td></tr>
|
||||
<tr data-slot="3"><td>A1-04</td><td>NC-CAB-XLHU-0422-01</td><td>净西兰花</td><td><span class="tag tag-green">🥬 净菜</span></td><td>10.0</td><td>8.5</td><td>张厨师</td><td>4.0</td><td>剩余50h</td><td>04-22 09:40</td><td><span class="tag tag-green">存放中</span></td><td class="td-actions"><a class="link" href="trace-timeline.html">溯源</a> <span class="link" onclick="showVideo('A1-04','净西兰花')">视频</span> <span class="link">详情</span><span class="link">编辑</span></td></tr>
|
||||
<tr data-slot="4"><td>A1-05</td><td>PKG-DH-001</td><td>宫保鸡丁</td><td><span class="tag tag-orange">🍱 餐品包</span></td><td>6.0</td><td>5.4</td><td>李主管</td><td>3.8</td><td>剩余44h</td><td>04-22 10:20</td><td><span class="tag tag-green">存放中</span></td><td class="td-actions"><a class="link" href="trace-timeline.html">溯源</a> <span class="link" onclick="showVideo('A1-05','宫保鸡丁')">视频</span> <span class="link">详情</span><span class="link">编辑</span></td></tr>
|
||||
<tr data-slot="5"><td>A1-06</td><td>NC-CAB-BCAI-0422-01</td><td>净白菜</td><td><span class="tag tag-green">🥬 净菜</span></td><td>22.0</td><td>18.0</td><td>王厨师</td><td>7.8</td><td>剩余40h</td><td>04-22 08:50</td><td><span class="tag tag-red">已过期</span></td><td class="td-actions"><a class="link" href="trace-timeline.html">溯源</a> <span class="link" onclick="showVideo('A1-06','净白菜')">视频</span> <span class="link">详情</span><span class="link">编辑</span></td></tr>
|
||||
<tr data-slot="6"><td>A1-07</td><td>—</td><td>—</td><td>—</td><td>—</td><td>—</td><td>—</td><td>4.1</td><td>—</td><td>—</td><td><span class="tag tag-gray">空闲</span></td><td class="td-actions">—</td></tr>
|
||||
<tr data-slot="7"><td>A1-08</td><td>—</td><td>—</td><td>—</td><td>—</td><td>—</td><td>—</td><td>4.1</td><td>—</td><td>—</td><td><span class="tag tag-gray">空闲</span></td><td class="td-actions">—</td></tr>
|
||||
<tr data-slot="8"><td>A1-09</td><td>—</td><td>—</td><td>—</td><td>—</td><td>—</td><td>—</td><td>4.2</td><td>—</td><td>—</td><td><span class="tag tag-gray">空闲</span></td><td class="td-actions">—</td></tr>
|
||||
<tr data-slot="9"><td>A1-10</td><td>—</td><td>—</td><td>—</td><td>—</td><td>—</td><td>—</td><td>4.2</td><td>—</td><td>—</td><td><span class="tag tag-gray">空闲</span></td><td class="td-actions">—</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<!-- 弹窗：存入净菜 -->
|
||||
<div class="modal-mask" id="modal-store">
|
||||
<div class="modal">
|
||||
<div class="modal__header">
|
||||
<div class="modal__title">存入净菜</div>
|
||||
<button class="modal__close" onclick="closeModal('modal-store')">✕</button>
|
||||
</div>
|
||||
<div class="modal__body">
|
||||
<div class="form-grid">
|
||||
<div class="form-item">
|
||||
<div class="form-item__label">目标格口<span class="required">*</span></div>
|
||||
<select><option>请选择空闲格口</option><option>A1-07</option><option>A1-08</option><option>A1-09</option><option>A1-10</option></select>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-item__label">溯源码</div>
|
||||
<input type="text" placeholder="输入溯源码可带出净菜信息">
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-item__label">类型<span class="required">*</span></div>
|
||||
<select><option value="">请选择</option><option>净菜</option><option>餐品包</option></select>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-item__label">存放净菜名称<span class="required">*</span></div>
|
||||
<select><option value="">请选择</option><option>土豆丝</option><option>净香菇</option></select>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-item__label">初始重量(kg)<span class="required">*</span></div>
|
||||
<input type="number" placeholder="请输入初始重量" min="0.1" step="0.1">
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-item__label">操作人<span class="required">*</span></div>
|
||||
<input type="text" placeholder="请输入操作人姓名">
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-item__label">存入时间</div>
|
||||
<input type="datetime-local">
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-item__label">备注</div>
|
||||
<input placeholder="如有特殊说明请备注">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal__footer">
|
||||
<button class="btn btn-default" onclick="closeModal('modal-store')">取消</button>
|
||||
<button class="btn btn-primary" onclick="closeModal('modal-store')">确认存入</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
function switchTab(idx){
|
||||
document.querySelectorAll('.page-tab').forEach((t,i)=>t.classList.toggle('active',i===idx));
|
||||
document.querySelectorAll('.tab-panel').forEach((p,i)=>p.classList.toggle('active',i===idx));
|
||||
/* 弹窗开关 */
|
||||
function openModal(id){document.getElementById(id).classList.add('show');}
|
||||
function closeModal(id){document.getElementById(id).classList.remove('show');}
|
||||
document.querySelectorAll('.modal-mask').forEach(function(m){m.addEventListener('click',function(e){if(e.target===m)m.classList.remove('show');});});
|
||||
|
||||
/* 格口点击 → 左侧高亮 + 右侧表格行高亮联动 */
|
||||
function selectSlot(idx){
|
||||
/* 左侧格口高亮 */
|
||||
document.querySelectorAll('.cabinet-slot').forEach(function(s){s.classList.remove('active');});
|
||||
var slot=document.querySelector('.cabinet-slot[data-slot="'+idx+'"]');
|
||||
if(slot) slot.classList.add('active');
|
||||
/* 右侧表格行高亮 */
|
||||
document.querySelectorAll('#detailTable tr').forEach(function(r){r.classList.remove('row-active');});
|
||||
var row=document.querySelector('#detailTable tr[data-slot="'+idx+'"]');
|
||||
if(row){row.classList.add('row-active');row.scrollIntoView({behavior:'smooth',block:'center'});}
|
||||
}
|
||||
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();});
|
||||
|
||||
/* 右侧表格行点击 → 联动左侧格口高亮 */
|
||||
document.querySelectorAll('#detailTable tr').forEach(function(row){
|
||||
row.addEventListener('click',function(){
|
||||
var idx=this.getAttribute('data-slot');
|
||||
if(idx!==null) selectSlot(parseInt(idx));
|
||||
});
|
||||
});
|
||||
|
||||
/* 查看视频弹窗 */
|
||||
function showVideo(code, name) {
|
||||
const overlay = document.createElement('div');
|
||||
overlay.className = 'modal-overlay';
|
||||
overlay.id = 'videoOverlay';
|
||||
overlay.innerHTML = `<div class="modal video-modal">
|
||||
<div class="modal-header">
|
||||
<span class="modal-title">实时监控 — ${name}（${code}）</span>
|
||||
<span class="modal-close" onclick="closeVideoModal()">×</span>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="video-placeholder">
|
||||
<div class="video-placeholder__icon">📹</div>
|
||||
<div class="video-placeholder__text">实时视频监控画面</div>
|
||||
<div class="video-placeholder__text">${code} · ${name}</div>
|
||||
</div>
|
||||
<div class="video-info">
|
||||
<div class="video-info__item">设备编号：<span>${code}</span></div>
|
||||
<div class="video-info__item">监控对象：<span>${name}</span></div>
|
||||
<div class="video-info__item">状态：<span style="color:#52C41A">在线</span></div>
|
||||
<div class="video-info__item">分辨率：<span>1080P</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>`;
|
||||
overlay.addEventListener('click', e => { if (e.target === overlay) closeVideoModal(); });
|
||||
document.body.appendChild(overlay);
|
||||
}
|
||||
function closeVideoModal() {
|
||||
const o = document.getElementById('videoOverlay');
|
||||
if (o) o.remove();
|
||||
function showVideo(code,name){
|
||||
var mask=document.createElement('div');
|
||||
mask.className='modal-mask show';
|
||||
mask.id='videoModal';
|
||||
mask.innerHTML='<div class="modal modal--video"><div class="modal__header"><div class="modal__title">实时监控 — '+name+'（'+code+'）</div><button class="modal__close" onclick="closeVideoModal()">✕</button></div><div class="modal__body"><div class="video-placeholder"><div class="video-placeholder__icon">📹</div><div class="video-placeholder__text">实时视频监控画面</div><div class="video-placeholder__text">'+code+' · '+name+'</div></div><div class="video-info"><div class="video-info__item">设备编号：<span>'+code+'</span></div><div class="video-info__item">监控对象：<span>'+name+'</span></div><div class="video-info__item">状态：<span style="color:var(--success)">在线</span></div><div class="video-info__item">分辨率：<span>1080P</span></div></div></div></div>';
|
||||
mask.addEventListener('click',function(e){if(e.target===mask)closeVideoModal();});
|
||||
document.body.appendChild(mask);
|
||||
}
|
||||
function closeVideoModal(){var m=document.getElementById('videoModal');if(m)m.remove();}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
@@ -105,8 +105,89 @@ tbody tr:hover{background:#F8FBFF;}
|
||||
.energy-card__value{font-size:var(--font-xxl);font-weight:700;margin-bottom:8px;}
|
||||
.energy-card__row{display:flex;justify-content:space-between;font-size:var(--font-sm);color:var(--text-secondary);margin-bottom:4px;}
|
||||
.energy-card__hint{font-size:var(--font-xs);color:var(--text-placeholder);margin-top:8px;padding-top:8px;border-top:1px dashed var(--border);}
|
||||
/* 录入按钮 */
|
||||
.energy-entry-btn{position:absolute;top:12px;right:16px;font-size:var(--font-xs);color:var(--primary);cursor:pointer;z-index:3;padding:2px 8px;border-radius:var(--radius-sm);transition:all .15s;user-select:none;}
|
||||
.energy-entry-btn:hover{background:var(--primary-light);}
|
||||
/* 编辑态 */
|
||||
.energy-edit-row{display:flex;align-items:center;gap:8px;margin-bottom:8px;}
|
||||
.energy-edit-row label{font-size:var(--font-sm);color:var(--text-secondary);white-space:nowrap;min-width:60px;}
|
||||
.energy-edit-input{width:120px;height:32px;border:1px solid var(--primary);border-radius:var(--radius-sm);padding:0 10px;font-size:var(--font-sm);color:var(--text-primary);outline:none;background:#fff;}
|
||||
.energy-edit-input:focus{box-shadow:0 0 0 2px rgba(24,144,255,0.15);}
|
||||
.energy-edit-unit{font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
.energy-edit-actions{display:flex;gap:6px;margin-top:4px;}
|
||||
.btn-sm{height:28px;padding:0 12px;font-size:var(--font-xs);}
|
||||
.energy-header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;background:#fff;border-radius:0 0 var(--radius-md) var(--radius-md);box-shadow:var(--shadow-sm);margin-bottom:16px;border-bottom:1px solid var(--border);}
|
||||
.energy-header__info{font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
/* 页面标题行 */
|
||||
.page-header{display:flex;align-items:center;justify-content:space-between;background:#fff;border-radius:var(--radius-md);padding:16px 24px;margin-bottom:16px;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);}
|
||||
/* 摄像头卡片标题行右侧操作组 */
|
||||
.camera-card__actions{display:inline-flex;align-items:center;gap:6px;}
|
||||
.btn-replay{height:28px;padding:0 10px;border-radius:var(--radius-sm);font-size:var(--font-xs);cursor:pointer;border:1px solid var(--primary);background:#fff;color:var(--primary);display:inline-flex;align-items:center;gap:4px;transition:all .15s;}
|
||||
.btn-replay:hover{background:var(--primary);color:#fff;}
|
||||
/* 回放弹窗 */
|
||||
.modal-overlay{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.55);z-index:200;align-items:center;justify-content:center;}
|
||||
.modal-overlay.show{display:flex;}
|
||||
.playback-modal{background:#fff;border-radius:var(--radius-lg);width:960px;max-height:90vh;overflow-y:auto;box-shadow:0 12px 48px rgba(0,0,0,0.2);}
|
||||
.playback-modal__header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--border);}
|
||||
.playback-modal__title{font-size:var(--font-lg);font-weight:700;display:flex;align-items:center;gap:8px;}
|
||||
.playback-modal__title .tag{font-size:var(--font-xs);}
|
||||
.playback-modal__close{width:32px;height:32px;border:none;background:none;font-size:20px;cursor:pointer;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--text-secondary);transition:all .15s;}
|
||||
.playback-modal__close:hover{background:#f5f5f5;color:var(--text-primary);}
|
||||
/* 播放器区域 */
|
||||
.playback-player{background:#1a1a1a;height:360px;display:flex;align-items:center;justify-content:center;position:relative;color:#555;font-size:var(--font-lg);}
|
||||
.playback-player__time{position:absolute;top:12px;left:16px;color:rgba(255,255,255,0.8);font-size:var(--font-sm);font-family:monospace;background:rgba(0,0,0,0.5);padding:4px 10px;border-radius:var(--radius-sm);}
|
||||
.playback-player__cam{position:absolute;top:12px;right:16px;color:rgba(255,255,255,0.6);font-size:var(--font-xs);background:rgba(0,0,0,0.5);padding:4px 10px;border-radius:var(--radius-sm);}
|
||||
/* 播放控制条 */
|
||||
.playback-controls{display:flex;align-items:center;gap:12px;padding:12px 24px;background:#2a2a2a;color:#fff;}
|
||||
.ctrl-btn{width:36px;height:36px;border:none;background:rgba(255,255,255,0.1);color:#fff;border-radius:50%;cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center;transition:background .15s;}
|
||||
.ctrl-btn:hover{background:rgba(255,255,255,0.25);}
|
||||
.ctrl-btn.active{background:var(--primary);}
|
||||
.ctrl-speed{font-size:var(--font-xs);color:rgba(255,255,255,0.7);background:rgba(255,255,255,0.1);padding:4px 8px;border-radius:var(--radius-sm);cursor:pointer;border:none;transition:all .15s;}
|
||||
.ctrl-speed:hover,.ctrl-speed.active{background:var(--primary);color:#fff;}
|
||||
.ctrl-time{font-size:var(--font-sm);color:rgba(255,255,255,0.7);font-family:monospace;margin-left:auto;}
|
||||
/* 时间轴 */
|
||||
.playback-timeline{padding:16px 24px;background:#fff;border-bottom:1px solid var(--border);}
|
||||
.timeline-label{display:flex;justify-content:space-between;font-size:var(--font-xs);color:var(--text-placeholder);margin-bottom:6px;}
|
||||
.timeline-track{position:relative;height:32px;background:#f0f0f0;border-radius:4px;cursor:pointer;overflow:hidden;}
|
||||
.timeline-track__fill{height:100%;width:42%;background:linear-gradient(90deg,var(--primary-light),var(--primary-light));border-radius:4px;position:relative;}
|
||||
.timeline-track__cursor{position:absolute;top:-2px;right:-2px;width:4px;height:36px;background:var(--primary);border-radius:2px;box-shadow:0 0 6px rgba(24,144,255,0.4);}
|
||||
.timeline-track__mark{position:absolute;top:0;height:100%;width:3px;background:var(--danger);opacity:0.7;border-radius:1px;}
|
||||
.timeline-hours{display:flex;justify-content:space-between;font-size:10px;color:var(--text-placeholder);margin-top:4px;padding:0 2px;}
|
||||
/* 操作按钮行 */
|
||||
.playback-actions{display:flex;align-items:center;gap:12px;padding:12px 24px;background:#fff;border-bottom:1px solid var(--border);}
|
||||
.playback-actions .btn{height:32px;font-size:var(--font-xs);}
|
||||
/* 分时段监控列表 */
|
||||
.playback-segments{padding:0 24px 20px;}
|
||||
.playback-segments__title{font-size:var(--font-sm);font-weight:600;padding:16px 0 10px;color:var(--text-primary);}
|
||||
.segment-table{width:100%;border-collapse:collapse;}
|
||||
.segment-table th{background:#FAFAFA;padding:8px 12px;text-align:left;font-size:var(--font-xs);color:var(--text-secondary);font-weight:500;border-bottom:1px solid var(--border);}
|
||||
.segment-table td{padding:8px 12px;font-size:var(--font-xs);color:var(--text-primary);border-bottom:1px solid var(--border);}
|
||||
.segment-table tr:last-child td{border-bottom:none;}
|
||||
.segment-table tr:hover{background:#F8FBFF;}
|
||||
.segment-table .link{font-size:var(--font-xs);}
|
||||
/* 通用表单弹窗 */
|
||||
.form-modal{background:#fff;border-radius:var(--radius-lg);width:640px;max-height:90vh;overflow-y:auto;box-shadow:0 12px 48px rgba(0,0,0,0.2);}
|
||||
.form-modal__header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--border);}
|
||||
.form-modal__title{font-size:var(--font-lg);font-weight:700;}
|
||||
.form-modal__close{width:32px;height:32px;border:none;background:none;font-size:20px;cursor:pointer;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--text-secondary);transition:all .15s;}
|
||||
.form-modal__close:hover{background:#f5f5f5;color:var(--text-primary);}
|
||||
.form-modal__body{padding:24px;}
|
||||
.form-row{display:flex;gap:16px;margin-bottom:16px;}
|
||||
.form-group{flex:1;display:flex;flex-direction:column;gap:6px;}
|
||||
.form-group label{font-size:var(--font-sm);color:var(--text-secondary);font-weight:500;}
|
||||
.form-group input,.form-group select{height:40px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);color:var(--text-primary);outline:none;background:#fff;}
|
||||
.form-group input:focus,.form-group select:focus{border-color:var(--primary);box-shadow:0 0 0 2px rgba(24,144,255,0.1);}
|
||||
.form-group .upload-area{height:80px;border:2px dashed var(--border);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;color:var(--text-placeholder);font-size:var(--font-sm);cursor:pointer;transition:all .15s;}
|
||||
.form-group .upload-area:hover{border-color:var(--primary);color:var(--primary);}
|
||||
.form-modal__footer{display:flex;justify-content:flex-end;gap:8px;padding:16px 24px;border-top:1px solid var(--border);}
|
||||
/* 操作列固定右侧 */
|
||||
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;}
|
||||
@@ -152,6 +233,22 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
|
||||
<!-- 主内容 -->
|
||||
<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-19 · 数据实时更新</span>
|
||||
</div>
|
||||
<div class="page-header__right">
|
||||
<span class="page-header__label">当前食堂</span>
|
||||
<select class="canteen-select" onchange="switchCanteen(this.value)">
|
||||
<option value="1">一食堂（东区）</option>
|
||||
<option value="2">二食堂（西区）</option>
|
||||
<option value="3">三食堂（北区）</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 统计卡片 -->
|
||||
<div class="stats-row">
|
||||
<div class="stat-card"><div class="stat-card__icon green">📹</div><div class="stat-card__info"><div class="stat-card__value">17台</div><div class="stat-card__label">摄像头在线</div></div></div>
|
||||
@@ -163,10 +260,11 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
<!-- Tab 切换栏 -->
|
||||
<div class="page-tabs">
|
||||
<div class="page-tab active" onclick="switchTab(0)">📹 食安视频</div>
|
||||
<div class="page-tab" onclick="switchTab(1)">🦺 生产安全</div>
|
||||
<div class="page-tab" onclick="switchTab(2)">🧪 餐品留样</div>
|
||||
<div class="page-tab" onclick="switchTab(3)">🪪 健康证管理</div>
|
||||
<div class="page-tab" onclick="switchTab(4)">⚡ 水电气表</div>
|
||||
<div class="page-tab" onclick="switchTab(1)">📋 违规记录</div>
|
||||
<div class="page-tab" onclick="switchTab(2)">🦺 生产安全</div>
|
||||
<div class="page-tab" onclick="switchTab(3)">🧪 餐品留样</div>
|
||||
<div class="page-tab" onclick="switchTab(4)">🪪 健康证管理</div>
|
||||
<div class="page-tab" onclick="switchTab(5)">⚡ 水电气表</div>
|
||||
</div>
|
||||
|
||||
<!-- Tab1: 食安视频 -->
|
||||
@@ -174,49 +272,65 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
<div class="camera-grid">
|
||||
<div class="camera-card">
|
||||
<div class="camera-card__video"><span>📹 实时画面</span><span class="alarm-badge">⚠ 告警</span></div>
|
||||
<div class="camera-card__info"><div class="camera-card__header"><span class="camera-card__id">CAM-A-01</span><span class="tag tag-green">在线</span></div><div class="camera-card__location">炒菜区-1号位</div><div class="camera-card__alarm">⚠ 未戴口罩 · 10:12:36</div></div>
|
||||
<div class="camera-card__info"><div class="camera-card__header"><span class="camera-card__id">CAM-A-01</span><span class="camera-card__actions"><span class="tag tag-green">在线</span><button class="btn-replay" onclick="openPlayback('CAM-A-01','炒菜区-1号位')">▶ 回放</button></span></div><div class="camera-card__location">炒菜区-1号位</div><div class="camera-card__alarm">⚠ 未戴口罩 · 10:12:36</div></div>
|
||||
</div>
|
||||
<div class="camera-card">
|
||||
<div class="camera-card__video"><span>📹 实时画面</span><span class="alarm-badge">⚠ 告警</span></div>
|
||||
<div class="camera-card__info"><div class="camera-card__header"><span class="camera-card__id">CAM-B-03</span><span class="tag tag-green">在线</span></div><div class="camera-card__location">分拣区-2号位</div><div class="camera-card__alarm">⚠ 未戴厨师帽 · 10:26:11</div></div>
|
||||
<div class="camera-card__info"><div class="camera-card__header"><span class="camera-card__id">CAM-B-03</span><span class="camera-card__actions"><span class="tag tag-green">在线</span><button class="btn-replay" onclick="openPlayback('CAM-B-03','分拣区-2号位')">▶ 回放</button></span></div><div class="camera-card__location">分拣区-2号位</div><div class="camera-card__alarm">⚠ 未戴厨师帽 · 10:26:11</div></div>
|
||||
</div>
|
||||
<div class="camera-card">
|
||||
<div class="camera-card__video"><span>📹 实时画面</span></div>
|
||||
<div class="camera-card__info"><div class="camera-card__header"><span class="camera-card__id">CAM-C-02</span><span class="tag tag-green">在线</span></div><div class="camera-card__location">配菜区-1号位</div></div>
|
||||
<div class="camera-card__info"><div class="camera-card__header"><span class="camera-card__id">CAM-C-02</span><span class="camera-card__actions"><span class="tag tag-green">在线</span><button class="btn-replay" onclick="openPlayback('CAM-C-02','配菜区-1号位')">▶ 回放</button></span></div><div class="camera-card__location">配菜区-1号位</div></div>
|
||||
</div>
|
||||
<div class="camera-card">
|
||||
<div class="camera-card__video"><span>📹 实时画面</span><span class="alarm-badge">⚠ 告警</span></div>
|
||||
<div class="camera-card__info"><div class="camera-card__header"><span class="camera-card__id">CAM-A-04</span><span class="tag tag-green">在线</span></div><div class="camera-card__location">洗手区入口</div><div class="camera-card__alarm">⚠ 未洗手直接操作 · 11:15:20</div></div>
|
||||
<div class="camera-card__info"><div class="camera-card__header"><span class="camera-card__id">CAM-A-04</span><span class="camera-card__actions"><span class="tag tag-green">在线</span><button class="btn-replay" onclick="openPlayback('CAM-A-04','洗手区入口')">▶ 回放</button></span></div><div class="camera-card__location">洗手区入口</div><div class="camera-card__alarm">⚠ 未洗手直接操作 · 11:15:20</div></div>
|
||||
</div>
|
||||
<div class="camera-card">
|
||||
<div class="camera-card__video" style="background:#3a3a3a;"><span>⏸ 离线</span></div>
|
||||
<div class="camera-card__info"><div class="camera-card__header"><span class="camera-card__id">CAM-B-01</span><span class="tag tag-gray">离线</span></div><div class="camera-card__location">备餐区-1号位</div></div>
|
||||
<div class="camera-card__info"><div class="camera-card__header"><span class="camera-card__id">CAM-B-01</span><span class="camera-card__actions"><span class="tag tag-gray">离线</span><button class="btn-replay" onclick="openPlayback('CAM-B-01','备餐区-1号位')">▶ 回放</button></span></div><div class="camera-card__location">备餐区-1号位</div></div>
|
||||
</div>
|
||||
<div class="camera-card">
|
||||
<div class="camera-card__video"><span>📹 实时画面</span></div>
|
||||
<div class="camera-card__info"><div class="camera-card__header"><span class="camera-card__id">CAM-D-02</span><span class="tag tag-green">在线</span></div><div class="camera-card__location">出餐口-1号位</div></div>
|
||||
</div>
|
||||
</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></tr></thead>
|
||||
<tbody>
|
||||
<tr><td>2026-04-22 11:15:20</td><td>CAM-A-04</td><td>洗手区入口</td><td>未洗手直接操作</td><td><span class="tag tag-orange">待处理</span></td><td class="td-actions"><span class="link">视频回放</span> <span class="link">处理</span></td></tr>
|
||||
<tr><td>2026-04-22 10:26:11</td><td>CAM-B-03</td><td>分拣区-2号位</td><td>未戴厨师帽</td><td><span class="tag tag-green">已处理</span></td><td class="td-actions"><span class="link">视频回放</span> <span class="link">处理</span></td></tr>
|
||||
<tr><td>2026-04-22 10:12:36</td><td>CAM-A-01</td><td>炒菜区-1号位</td><td>未戴口罩</td><td><span class="tag tag-orange">待处理</span></td><td class="td-actions"><span class="link">视频回放</span> <span class="link">处理</span></td></tr>
|
||||
<tr><td>2026-04-21 14:38:05</td><td>CAM-A-01</td><td>炒菜区-1号位</td><td>未戴口罩</td><td><span class="tag tag-green">已处理</span></td><td class="td-actions"><span class="link">视频回放</span> <span class="link">处理</span></td></tr>
|
||||
<tr><td>2026-04-21 09:55:47</td><td>CAM-C-02</td><td>配菜区-1号位</td><td>违规使用手机</td><td><span class="tag tag-green">已处理</span></td><td class="td-actions"><span class="link">视频回放</span> <span class="link">处理</span></td></tr>
|
||||
<tr><td>2026-04-20 16:22:31</td><td>CAM-B-03</td><td>分拣区-2号位</td><td>未穿工作服</td><td><span class="tag tag-green">已处理</span></td><td class="td-actions"><span class="link">视频回放</span> <span class="link">处理</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="camera-card__info"><div class="camera-card__header"><span class="camera-card__id">CAM-D-02</span><span class="camera-card__actions"><span class="tag tag-green">在线</span><button class="btn-replay" onclick="openPlayback('CAM-D-02','出餐口-1号位')">▶ 回放</button></span></div><div class="camera-card__location">出餐口-1号位</div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tab2: 生产安全 -->
|
||||
<!-- Tab2: 违规记录（独立Tab） -->
|
||||
<div class="tab-panel">
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item"><label>时间范围</label><input class="filter-input" type="date" value="2026-04-20" style="min-width:140px;"> <span style="margin:0 4px;color:var(--text-placeholder);">至</span> <input class="filter-input" type="date" value="2026-04-22" style="min-width:140px;"></div>
|
||||
<div class="filter-item"><label>摄像头</label><select class="filter-select"><option>全部摄像头</option><option>CAM-A-01</option><option>CAM-A-04</option><option>CAM-B-01</option><option>CAM-B-03</option><option>CAM-C-02</option><option>CAM-D-02</option></select></div>
|
||||
<div class="filter-item"><label>违规类型</label><select class="filter-select"><option>全部</option><option>未戴口罩</option><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></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>
|
||||
<div class="table-card">
|
||||
<div class="table-card__header"><div class="table-card__title">违规记录</div><div class="table-card__actions"><span style="font-size:var(--font-sm);color:var(--text-secondary);">共 6 条记录</span></div></div>
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead><tr><th>时间</th><th>摄像头</th><th>位置</th><th>违规类型</th><th>违规人员</th><th>状态</th><th>操作</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td>2026-04-22 11:15:20</td><td>CAM-A-04</td><td>洗手区入口</td><td>未洗手直接操作</td><td>张伟</td><td><span class="tag tag-orange">待处理</span></td><td class="td-actions"><span class="link">视频回放</span> <span class="link">处理</span></td></tr>
|
||||
<tr><td>2026-04-22 10:26:11</td><td>CAM-B-03</td><td>分拣区-2号位</td><td>未戴厨师帽</td><td>陈刚</td><td><span class="tag tag-green">已处理</span></td><td class="td-actions"><span class="link">视频回放</span> <span class="link">详情</span></td></tr>
|
||||
<tr><td>2026-04-22 10:12:36</td><td>CAM-A-01</td><td>炒菜区-1号位</td><td>未戴口罩</td><td>赵敏</td><td><span class="tag tag-orange">待处理</span></td><td class="td-actions"><span class="link">视频回放</span> <span class="link">处理</span></td></tr>
|
||||
<tr><td>2026-04-21 14:38:05</td><td>CAM-A-01</td><td>炒菜区-1号位</td><td>未戴口罩</td><td>李娜</td><td><span class="tag tag-green">已处理</span></td><td class="td-actions"><span class="link">视频回放</span> <span class="link">详情</span></td></tr>
|
||||
<tr><td>2026-04-21 09:55:47</td><td>CAM-C-02</td><td>配菜区-1号位</td><td>违规使用手机</td><td>王磊</td><td><span class="tag tag-green">已处理</span></td><td class="td-actions"><span class="link">视频回放</span> <span class="link">详情</span></td></tr>
|
||||
<tr><td>2026-04-20 16:22:31</td><td>CAM-B-03</td><td>分拣区-2号位</td><td>未穿工作服</td><td>张伟</td><td><span class="tag tag-green">已处理</span></td><td class="td-actions"><span class="link">视频回放</span> <span class="link">详情</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>显示 6 条，共 6 条</span>
|
||||
<button class="page-btn active">1</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tab3: 生产安全 -->
|
||||
<div class="tab-panel">
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item"><label>区域</label><select class="filter-select"><option>全部</option><option>炒菜区</option><option>冷库区</option><option>粗加工间</option><option>备餐区</option><option>洗碗间</option></select></div>
|
||||
@@ -244,7 +358,7 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tab3: 餐品留样 -->
|
||||
<!-- Tab4: 餐品留样 -->
|
||||
<div class="tab-panel">
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item"><label>留样状态</label><select class="filter-select"><option>全部</option><option>留样中</option><option>已销毁</option></select></div>
|
||||
@@ -252,7 +366,7 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
<button class="btn btn-primary">查询</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
</div>
|
||||
<div class="action-bar"><button class="btn btn-primary">➕ 新增留样</button></div>
|
||||
<div class="action-bar"><button class="btn btn-primary" onclick="document.getElementById('sampleModal').classList.add('show');document.body.style.overflow='hidden'">➕ 新增留样</button></div>
|
||||
<div class="table-card">
|
||||
<div class="table-card__header"><div class="table-card__title">餐品留样</div></div>
|
||||
<div class="table-card__content">
|
||||
@@ -275,7 +389,7 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tab4: 健康证管理 -->
|
||||
<!-- Tab5: 健康证管理 -->
|
||||
<div class="tab-panel">
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item"><label>姓名/人员编号</label><input class="filter-input" placeholder="请输入姓名或编号"></div>
|
||||
@@ -284,7 +398,7 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
<button class="btn btn-primary">查询</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
</div>
|
||||
<div class="action-bar"><button class="btn btn-primary">➕ 新增证件</button><button class="btn btn-default">🔔 发送到期提醒</button></div>
|
||||
<div class="action-bar"><button class="btn btn-primary" onclick="document.getElementById('certModal').classList.add('show');document.body.style.overflow='hidden'">➕ 新增证件</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">
|
||||
@@ -302,41 +416,71 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tab5: 水电气表 -->
|
||||
<!-- Tab6: 水电气表 -->
|
||||
<div class="tab-panel">
|
||||
<div class="action-bar"><button class="btn btn-default">📊 生成能耗日报</button><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>
|
||||
<div class="energy-header">
|
||||
<div class="energy-header__info">数据更新时间：2026-05-08 11:42:18 | 今日能耗合计：¥671.6 | 分摊每份餐：¥0.45（共1492份）</div>
|
||||
</div>
|
||||
<div class="energy-grid">
|
||||
<div class="energy-card elec">
|
||||
<div class="energy-card elec" id="card-elec">
|
||||
<span class="energy-entry-btn" onclick="toggleEnergyEdit('elec')">✏️ 录入</span>
|
||||
<div class="energy-card__header"><span class="energy-card__icon">⚡</span><span class="energy-card__title">电</span><span class="energy-card__meter">表号：EM-A01</span></div>
|
||||
<div class="energy-card__value" style="color:#1677ff;">28734.6 <span style="font-size:var(--font-sm);font-weight:400;">kWh</span></div>
|
||||
<div class="energy-card__row"><span>今日用量</span><span>186 kWh</span></div>
|
||||
<!-- 展示态 -->
|
||||
<div class="energy-card__display" data-type="elec">
|
||||
<div class="energy-card__value" style="color:#1677ff;">28734.6 <span style="font-size:var(--font-sm);font-weight:400;">kWh</span></div>
|
||||
<div class="energy-card__row"><span>今日用量</span><span>186 kWh</span></div>
|
||||
</div>
|
||||
<!-- 编辑态 -->
|
||||
<div class="energy-card__edit" data-type="elec" style="display:none;">
|
||||
<div class="energy-edit-row"><label>当前余量</label><input type="number" class="energy-edit-input" value="28734.6" step="0.1"><span class="energy-edit-unit">kWh</span></div>
|
||||
<div class="energy-edit-row"><label>今日用量</label><input type="number" class="energy-edit-input" value="186" step="0.1"><span class="energy-edit-unit">kWh</span></div>
|
||||
<div class="energy-edit-actions"><button class="btn btn-primary btn-sm" onclick="saveEnergyEdit('elec')">保存</button><button class="btn btn-default btn-sm" onclick="cancelEnergyEdit('elec')">取消</button></div>
|
||||
</div>
|
||||
<div class="energy-card__row"><span>今日费用</span><span>¥167.4</span></div>
|
||||
<div class="energy-card__row"><span>状态</span><span class="tag tag-green">正常</span></div>
|
||||
<div class="energy-card__row"><span>当前功率</span><span>3.2 kW</span></div>
|
||||
<div class="energy-card__hint">当前功率正常，较昨日同时段下降 4.2%</div>
|
||||
</div>
|
||||
<div class="energy-card water">
|
||||
<div class="energy-card water" id="card-water">
|
||||
<span class="energy-entry-btn" onclick="toggleEnergyEdit('water')">✏️ 录入</span>
|
||||
<div class="energy-card__header"><span class="energy-card__icon">💧</span><span class="energy-card__title">水</span><span class="energy-card__meter">表号：WM-A01</span></div>
|
||||
<div class="energy-card__value" style="color:#13c2c2;">12468.3 <span style="font-size:var(--font-sm);font-weight:400;">m³</span></div>
|
||||
<div class="energy-card__row"><span>今日用量</span><span>22 m³</span></div>
|
||||
<!-- 展示态 -->
|
||||
<div class="energy-card__display" data-type="water">
|
||||
<div class="energy-card__value" style="color:#13c2c2;">12468.3 <span style="font-size:var(--font-sm);font-weight:400;">m³</span></div>
|
||||
<div class="energy-card__row"><span>今日用量</span><span>22 m³</span></div>
|
||||
</div>
|
||||
<!-- 编辑态 -->
|
||||
<div class="energy-card__edit" data-type="water" style="display:none;">
|
||||
<div class="energy-edit-row"><label>当前余量</label><input type="number" class="energy-edit-input" value="12468.3" step="0.1"><span class="energy-edit-unit">m³</span></div>
|
||||
<div class="energy-edit-row"><label>今日用量</label><input type="number" class="energy-edit-input" value="22" step="0.1"><span class="energy-edit-unit">m³</span></div>
|
||||
<div class="energy-edit-actions"><button class="btn btn-primary btn-sm" onclick="saveEnergyEdit('water')">保存</button><button class="btn btn-default btn-sm" onclick="cancelEnergyEdit('water')">取消</button></div>
|
||||
</div>
|
||||
<div class="energy-card__row"><span>今日费用</span><span>¥79.2</span></div>
|
||||
<div class="energy-card__row"><span>状态</span><span class="tag tag-green">正常</span></div>
|
||||
<div class="energy-card__row"><span>当前流量</span><span>1.8 L/min</span></div>
|
||||
<div class="energy-card__hint">当前流速正常</div>
|
||||
</div>
|
||||
<div class="energy-card gas">
|
||||
<div class="energy-card gas" id="card-gas">
|
||||
<span class="energy-entry-btn" onclick="toggleEnergyEdit('gas')">✏️ 录入</span>
|
||||
<div class="energy-card__header"><span class="energy-card__icon">🔥</span><span class="energy-card__title">气</span><span class="energy-card__meter">表号：GM-A01</span></div>
|
||||
<div class="energy-card__value" style="color:#fa8c16;">8421.5 <span style="font-size:var(--font-sm);font-weight:400;">m³</span></div>
|
||||
<div class="energy-card__row"><span>今日用量</span><span>68 m³</span></div>
|
||||
<!-- 展示态 -->
|
||||
<div class="energy-card__display" data-type="gas">
|
||||
<div class="energy-card__value" style="color:#fa8c16;">8421.5 <span style="font-size:var(--font-sm);font-weight:400;">m³</span></div>
|
||||
<div class="energy-card__row"><span>今日用量</span><span>68 m³</span></div>
|
||||
</div>
|
||||
<!-- 编辑态 -->
|
||||
<div class="energy-card__edit" data-type="gas" style="display:none;">
|
||||
<div class="energy-edit-row"><label>当前余量</label><input type="number" class="energy-edit-input" value="8421.5" step="0.1"><span class="energy-edit-unit">m³</span></div>
|
||||
<div class="energy-edit-row"><label>今日用量</label><input type="number" class="energy-edit-input" value="68" step="0.1"><span class="energy-edit-unit">m³</span></div>
|
||||
<div class="energy-edit-actions"><button class="btn btn-primary btn-sm" onclick="saveEnergyEdit('gas')">保存</button><button class="btn btn-default btn-sm" onclick="cancelEnergyEdit('gas')">取消</button></div>
|
||||
</div>
|
||||
<div class="energy-card__row"><span>今日费用</span><span>¥425.0</span></div>
|
||||
<div class="energy-card__row"><span>状态</span><span class="tag tag-green">正常</span></div>
|
||||
<div class="energy-card__row"><span>当前流量</span><span>4.6 m³/h</span></div>
|
||||
<div class="energy-card__hint">当前燃气流量正常，无泄漏告警</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="energy-header" style="border-radius:var(--radius-md);margin-bottom:16px;">
|
||||
<div class="energy-header__info">数据更新时间：2026-05-08 11:42:18 | 今日能耗合计：¥671.6 | 分摊每份餐：¥0.45（共1492份）</div>
|
||||
</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>
|
||||
<!-- 历史用量表格 -->
|
||||
<div class="table-card">
|
||||
<div class="table-card__header"><div class="table-card__title">历史每日用量</div></div>
|
||||
@@ -368,11 +512,231 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- 视频回放弹窗 -->
|
||||
<div class="modal-overlay" id="playbackModal" onclick="if(event.target===this)closePlayback()">
|
||||
<div class="playback-modal">
|
||||
<div class="playback-modal__header">
|
||||
<div class="playback-modal__title">
|
||||
<span id="pbCamId">CAM-A-01</span>
|
||||
<span class="tag tag-blue" id="pbLocation">炒菜区-1号位</span>
|
||||
<span style="font-size:var(--font-sm);color:var(--text-secondary);font-weight:400;">2026-04-22</span>
|
||||
</div>
|
||||
<button class="playback-modal__close" onclick="closePlayback()">✕</button>
|
||||
</div>
|
||||
<!-- 播放器 -->
|
||||
<div class="playback-player">
|
||||
<span>▶ 视频回放画面</span>
|
||||
<div class="playback-player__time">10:12:36</div>
|
||||
<div class="playback-player__cam" id="pbCamLabel">CAM-A-01</div>
|
||||
</div>
|
||||
<!-- 控制条 -->
|
||||
<div class="playback-controls">
|
||||
<button class="ctrl-btn" title="后退15秒">⏪</button>
|
||||
<button class="ctrl-btn active" title="播放/暂停">▶</button>
|
||||
<button class="ctrl-btn" title="前进15秒">⏩</button>
|
||||
<span style="width:1px;height:24px;background:rgba(255,255,255,0.15);"></span>
|
||||
<button class="ctrl-speed" title="0.5x 慢放">0.5x</button>
|
||||
<button class="ctrl-speed active" title="正常速度">1x</button>
|
||||
<button class="ctrl-speed" title="2x 快进">2x</button>
|
||||
<button class="ctrl-speed" title="4x 快进">4x</button>
|
||||
<span class="ctrl-time">10:12:36 / 23:59:59</span>
|
||||
</div>
|
||||
<!-- 时间轴 -->
|
||||
<div class="playback-timeline">
|
||||
<div class="timeline-label"><span>拖动选择回放时段</span><span>当前：10:12 — 按住拖动</span></div>
|
||||
<div class="timeline-track">
|
||||
<div class="timeline-track__fill">
|
||||
<div class="timeline-track__cursor"></div>
|
||||
</div>
|
||||
<!-- 违规时间标记 -->
|
||||
<div class="timeline-track__mark" style="left:42.6%;" title="10:12 未戴口罩"></div>
|
||||
<div class="timeline-track__mark" style="left:43.4%;" title="10:26 未戴厨师帽"></div>
|
||||
<div class="timeline-track__mark" style="left:46.9%;" title="11:15 未洗手"></div>
|
||||
</div>
|
||||
<div class="timeline-hours">
|
||||
<span>00:00</span><span>03:00</span><span>06:00</span><span>09:00</span><span>12:00</span><span>15:00</span><span>18:00</span><span>21:00</span><span>24:00</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 操作按钮 -->
|
||||
<div class="playback-actions">
|
||||
<button class="btn btn-primary">📷 截图</button>
|
||||
<button class="btn btn-primary">📥 下载当前片段</button>
|
||||
<button class="btn btn-default">🔖 标记时间点</button>
|
||||
<span style="flex:1;"></span>
|
||||
<span style="font-size:var(--font-xs);color:var(--text-placeholder);">红色标记 = 违规事件 | 可拖动时间轴选择片段后下载</span>
|
||||
</div>
|
||||
<!-- 分时段监控结果 -->
|
||||
<div class="playback-segments">
|
||||
<div class="playback-segments__title">分时段监控结果（15分钟/段）</div>
|
||||
<table class="segment-table">
|
||||
<thead><tr><th>时段</th><th>监控结果</th><th>事件描述</th><th>操作</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td>09:30 — 09:45</td><td><span class="tag tag-green">正常</span></td><td>—</td><td><span class="link">跳转</span></td></tr>
|
||||
<tr><td>09:45 — 10:00</td><td><span class="tag tag-green">正常</span></td><td>—</td><td><span class="link">跳转</span></td></tr>
|
||||
<tr style="background:#FFF1F0;"><td>10:00 — 10:15</td><td><span class="tag tag-red">违规</span></td><td>10:12 未戴口罩</td><td><span class="link">跳转</span> <span class="link">截图</span></td></tr>
|
||||
<tr style="background:#FFF1F0;"><td>10:15 — 10:30</td><td><span class="tag tag-red">违规</span></td><td>10:26 未戴厨师帽</td><td><span class="link">跳转</span> <span class="link">截图</span></td></tr>
|
||||
<tr><td>10:30 — 10:45</td><td><span class="tag tag-green">正常</span></td><td>—</td><td><span class="link">跳转</span></td></tr>
|
||||
<tr><td>10:45 — 11:00</td><td><span class="tag tag-green">正常</span></td><td>—</td><td><span class="link">跳转</span></td></tr>
|
||||
<tr style="background:#FFF1F0;"><td>11:00 — 11:15</td><td><span class="tag tag-red">违规</span></td><td>11:15 未洗手直接操作</td><td><span class="link">跳转</span> <span class="link">截图</span></td></tr>
|
||||
<tr><td>11:15 — 11:30</td><td><span class="tag tag-green">正常</span></td><td>—</td><td><span class="link">跳转</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 新增留样弹窗 -->
|
||||
<div class="modal-overlay" id="sampleModal" onclick="if(event.target===this)closeModal('sampleModal')">
|
||||
<div class="form-modal">
|
||||
<div class="form-modal__header">
|
||||
<span class="form-modal__title">新增留样</span>
|
||||
<button class="form-modal__close" onclick="closeModal('sampleModal')">✕</button>
|
||||
</div>
|
||||
<div class="form-modal__body">
|
||||
<div class="form-row">
|
||||
<div class="form-group"><label>留样菜品 <span style="color:var(--danger)">*</span></label><input placeholder="请输入菜品名称"></div>
|
||||
<div class="form-group"><label>留样量(g) <span style="color:var(--danger)">*</span></label><input type="number" placeholder="请输入克数" value="125"></div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-group"><label>留样时间 <span style="color:var(--danger)">*</span></label><input type="datetime-local" value="2026-04-22T11:30"></div>
|
||||
<div class="form-group"><label>到期时间（48h后自动计算）</label><input type="datetime-local" value="2026-04-24T11:30" disabled style="background:#f5f5f5;"></div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-group"><label>留样柜编号 <span style="color:var(--danger)">*</span></label><select><option value="">请选择留样柜</option><option>留样柜1-8</option><option>留样柜2-7</option><option>留样柜2-9</option><option>留样柜2-10</option><option>留样柜3-1</option><option>留样柜3-2</option><option>留样柜3-3</option><option>留样柜3-9</option></select></div>
|
||||
<div class="form-group"><label>留样温度(℃)</label><input type="number" placeholder="请输入温度" value="4"></div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-group"><label>留样照片</label><div class="upload-area">📷 点击上传留样照片</div></div>
|
||||
<div class="form-group"><label>备注</label><input placeholder="选填"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-modal__footer">
|
||||
<button class="btn btn-default" onclick="closeModal('sampleModal')">取消</button>
|
||||
<button class="btn btn-primary" onclick="closeModal('sampleModal')">确认提交</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 新增健康证弹窗 -->
|
||||
<div class="modal-overlay" id="certModal" onclick="if(event.target===this)closeModal('certModal')">
|
||||
<div class="form-modal">
|
||||
<div class="form-modal__header">
|
||||
<span class="form-modal__title">新增健康证</span>
|
||||
<button class="form-modal__close" onclick="closeModal('certModal')">✕</button>
|
||||
</div>
|
||||
<div class="form-modal__body">
|
||||
<div class="form-row">
|
||||
<div class="form-group"><label>人员编号 <span style="color:var(--danger)">*</span></label><input placeholder="如 EMP006"></div>
|
||||
<div class="form-group"><label>姓名 <span style="color:var(--danger)">*</span></label><input placeholder="请输入姓名"></div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-group"><label>岗位 <span style="color:var(--danger)">*</span></label><select><option value="">请选择岗位</option><option>厨师</option><option>配餐员</option><option>洗碗工</option><option>分拣员</option></select></div>
|
||||
<div class="form-group"><label>工作区域 <span style="color:var(--danger)">*</span></label><select><option value="">请选择区域</option><option>A区厨房</option><option>B区厨房</option><option>C区后厨</option><option>B区后厨</option></select></div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-group"><label>人员照片</label><div class="upload-area">📷 点击上传人员照片</div></div>
|
||||
<div class="form-group"><label>证件照片</label><div class="upload-area">📷 点击上传证件照片</div></div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-group"><label>健康证编号 <span style="color:var(--danger)">*</span></label><input placeholder="如 HC-2026-00XXX"></div>
|
||||
<div class="form-group"><label>发证机构</label><input placeholder="请输入发证机构"></div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-group"><label>发证日期 <span style="color:var(--danger)">*</span></label><input type="date" value="2026-05-01"></div>
|
||||
<div class="form-group"><label>有效期至 <span style="color:var(--danger)">*</span></label><input type="date" value="2027-04-30"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-modal__footer">
|
||||
<button class="btn btn-default" onclick="closeModal('certModal')">取消</button>
|
||||
<button class="btn btn-primary" onclick="closeModal('certModal')">确认提交</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function switchTab(idx){
|
||||
document.querySelectorAll('.page-tab').forEach((t,i)=>t.classList.toggle('active',i===idx));
|
||||
document.querySelectorAll('.tab-panel').forEach((p,i)=>p.classList.toggle('active',i===idx));
|
||||
}
|
||||
/* 食堂切换：原型中模拟数据刷新动画 */
|
||||
function switchCanteen(val){
|
||||
document.querySelectorAll('.stat-card,.tab-panel.active').forEach(function(el){
|
||||
el.style.opacity='0.4';el.style.transition='opacity .2s';
|
||||
setTimeout(function(){el.style.opacity='1';},300);
|
||||
});
|
||||
}
|
||||
/* 视频回放弹窗 */
|
||||
function openPlayback(camId, location){
|
||||
document.getElementById('pbCamId').textContent=camId;
|
||||
document.getElementById('pbLocation').textContent=location;
|
||||
document.getElementById('pbCamLabel').textContent=camId;
|
||||
document.getElementById('playbackModal').classList.add('show');
|
||||
document.body.style.overflow='hidden';
|
||||
}
|
||||
function closePlayback(){
|
||||
document.getElementById('playbackModal').classList.remove('show');
|
||||
document.body.style.overflow='';
|
||||
}
|
||||
/* 播放/暂停切换 */
|
||||
document.querySelectorAll('.playback-controls .ctrl-btn').forEach(function(btn,i){
|
||||
if(i===1) btn.addEventListener('click',function(){
|
||||
this.classList.toggle('active');
|
||||
this.textContent=this.classList.contains('active')?'▶':'⏸';
|
||||
});
|
||||
});
|
||||
/* 倍速切换 */
|
||||
document.querySelectorAll('.ctrl-speed').forEach(function(btn){
|
||||
btn.addEventListener('click',function(){
|
||||
document.querySelectorAll('.ctrl-speed').forEach(function(b){b.classList.remove('active');});
|
||||
this.classList.add('active');
|
||||
});
|
||||
});
|
||||
/* 通用弹窗关闭 */
|
||||
function closeModal(id){
|
||||
document.getElementById(id).classList.remove('show');
|
||||
document.body.style.overflow='';
|
||||
}
|
||||
/* ESC 关闭所有弹窗 */
|
||||
document.addEventListener('keydown',function(e){
|
||||
if(e.key==='Escape'){
|
||||
closePlayback();
|
||||
closeModal('sampleModal');
|
||||
closeModal('certModal');
|
||||
}
|
||||
});
|
||||
// 水电气录入：切换编辑态
|
||||
function toggleEnergyEdit(type){
|
||||
var card=document.getElementById('card-'+type);
|
||||
var disp=card.querySelector('.energy-card__display[data-type="'+type+'"]');
|
||||
var edit=card.querySelector('.energy-card__edit[data-type="'+type+'"]');
|
||||
var btn=card.querySelector('.energy-entry-btn');
|
||||
if(edit.style.display==='none'){
|
||||
disp.style.display='none';edit.style.display='block';btn.textContent='编辑中…';btn.style.color='var(--warning)';
|
||||
}else{
|
||||
cancelEnergyEdit(type);
|
||||
}
|
||||
}
|
||||
// 保存编辑（原型演示：将输入值回写到展示态）
|
||||
function saveEnergyEdit(type){
|
||||
var card=document.getElementById('card-'+type);
|
||||
var edit=card.querySelector('.energy-card__edit[data-type="'+type+'"]');
|
||||
var disp=card.querySelector('.energy-card__display[data-type="'+type+'"]');
|
||||
var inputs=edit.querySelectorAll('.energy-edit-input');
|
||||
var units=edit.querySelectorAll('.energy-edit-unit');
|
||||
var valEl=disp.querySelector('.energy-card__value');
|
||||
var rowSpan=disp.querySelector('.energy-card__row span:last-child');
|
||||
valEl.innerHTML=inputs[0].value+' <span style="font-size:var(--font-sm);font-weight:400;">'+units[0].textContent+'</span>';
|
||||
rowSpan.textContent=inputs[1].value+' '+units[1].textContent;
|
||||
cancelEnergyEdit(type);
|
||||
}
|
||||
// 取消编辑
|
||||
function cancelEnergyEdit(type){
|
||||
var card=document.getElementById('card-'+type);
|
||||
var disp=card.querySelector('.energy-card__display[data-type="'+type+'"]');
|
||||
var edit=card.querySelector('.energy-card__edit[data-type="'+type+'"]');
|
||||
var btn=card.querySelector('.energy-entry-btn');
|
||||
disp.style.display='block';edit.style.display='none';btn.textContent='✏️ 录入';btn.style.color='var(--primary)';
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -165,8 +165,11 @@ textarea.form-control{height:auto;padding:8px 12px;resize:vertical;min-height:60
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item"><label>订单号/净菜名称</label><input class="filter-input" placeholder="请输入订单号或净菜名称"></div>
|
||||
<div class="filter-item"><label>客户名称</label><input class="filter-input" 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>
|
||||
<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="date"></div>
|
||||
<button class="btn btn-primary">查询</button>
|
||||
@@ -182,20 +185,22 @@ textarea.form-control{height:auto;padding:8px 12px;resize:vertical;min-height:60
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead><tr>
|
||||
<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><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>
|
||||
</tr></thead>
|
||||
<tbody>
|
||||
<tr><td>EXT-001</td><td>NC-INT-BOCA-20260422-01</td><td>社区便民超市</td><td>土豆（土豆丝）</td><td>5kg/箱</td><td>10</td><td>50</td><td>¥3.5</td><td>¥175</td><td>A仓-蔬菜区-01</td><td>2026-04-22 08:00:00</td><td>SF1234567890</td><td><span class="tag tag-green">已签收</span></td><td class="td-actions"><span class="link">详情</span> <span class="link">编辑</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
<tr><td>EXT-001</td><td>NC-INT-HLUB-20260422-01</td><td>社区便民超市</td><td>土豆（土豆块）</td><td>5kg/箱</td><td>6</td><td>30</td><td>¥3.5</td><td>¥105</td><td>A仓-蔬菜区-03</td><td>2026-04-22 08:00:00</td><td>SF1234567890</td><td><span class="tag tag-green">已签收</span></td><td class="td-actions"><span class="link">详情</span> <span class="link">编辑</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
<tr><td>EXT-002</td><td>NC-INT-ZLRJ-20260422-01</td><td>周边餐饮企业</td><td>净猪里脊</td><td>1kg/箱</td><td>5</td><td>50</td><td>¥28</td><td>¥1,400</td><td>B仓-肉类区-01</td><td>2026-04-22 09:30:00</td><td>SF9876543210</td><td><span class="tag tag-blue">配送中</span></td><td class="td-actions"><span class="link">详情</span> <span class="link">编辑</span> <span class="link btn-confirm-recv" style="color:var(--success)">确认签收</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
<tr><td>EXT-003</td><td>NC-INT-BCAI-20260422-01</td><td>学校食堂</td><td>鸡肉（鸡肉块）</td><td>1kg/箱</td><td>6</td><td>60</td><td>¥2.0</td><td>¥120</td><td>A仓-蔬菜区-02</td><td>2026-04-22 10:00:00</td><td>—</td><td><span class="tag tag-orange">待发货</span></td><td class="td-actions"><span class="link">详情</span> <span class="link">编辑</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
<tr><td>EXT-003</td><td>NC-INT-XLHU-20260422-01</td><td>学校食堂</td><td>净西兰花</td><td>5kg/箱</td><td>8</td><td>40</td><td>¥4.5</td><td>¥180</td><td>A仓-蔬菜区-04</td><td>2026-04-22 10:00:00</td><td>—</td><td><span class="tag tag-orange">待发货</span></td><td class="td-actions"><span class="link">详情</span> <span class="link">编辑</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
<tr><td>EXT-003</td><td>NC-INT-HLUB-20260422-02</td><td>学校食堂</td><td>净胡萝卜</td><td>5kg/箱</td><td>9</td><td>45</td><td>¥4.0</td><td>¥180</td><td>A仓-蔬菜区-03</td><td>2026-04-22 10:00:00</td><td>—</td><td><span class="tag tag-orange">待发货</span></td><td class="td-actions"><span class="link">详情</span> <span class="link">编辑</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
<tr><td>EXT-001</td><td>NC-INT-BOCA-20260422-01</td><td>社区便民超市</td><td><span class="tag tag-green">🥬 净菜包</span></td><td>土豆（土豆丝）</td><td>5kg/箱</td><td>10</td><td>50</td><td>¥3.5</td><td>¥175</td><td>A仓-蔬菜区-01</td><td>2026-04-22 08:00</td><td>SF1234567890</td><td><span class="tag tag-green">已完成</span></td><td class="td-actions"><span class="link">详情</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
<tr><td>EXT-001</td><td>NC-INT-HLUB-20260422-01</td><td>社区便民超市</td><td><span class="tag tag-green">🥬 净菜包</span></td><td>土豆（土豆块）</td><td>5kg/箱</td><td>6</td><td>30</td><td>¥3.5</td><td>¥105</td><td>A仓-蔬菜区-03</td><td>2026-04-22 08:00</td><td>SF1234567890</td><td><span class="tag tag-green">已完成</span></td><td class="td-actions"><span class="link">详情</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
<tr><td>EXT-002</td><td>NC-INT-ZLRJ-20260422-01</td><td>周边餐饮企业</td><td><span class="tag tag-green">🥬 净菜包</span></td><td>净猪里脊</td><td>1kg/箱</td><td>5</td><td>50</td><td>¥28</td><td>¥1,400</td><td>B仓-肉类区-01</td><td>2026-04-22 09:30</td><td>SF9876543210</td><td><span class="tag tag-blue">配送中</span></td><td class="td-actions"><span class="link" style="color:var(--success)">确认收货</span> <span class="link">详情</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
<tr><td>EXT-003</td><td>NC-INT-JXRJ-20260422-01</td><td>周边餐饮企业</td><td><span class="tag tag-orange">🍱 餐品净菜包</span></td><td>宫保鸡丁</td><td>标准份（500g）</td><td>40</td><td>20</td><td>¥12</td><td>¥240</td><td>B仓-肉类区-02</td><td>2026-04-22 09:30</td><td>SF9876543210</td><td><span class="tag tag-blue">配送中</span></td><td class="td-actions"><span class="link" style="color:var(--success)">确认收货</span> <span class="link">详情</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
<tr><td>EXT-004</td><td>NC-INT-BCAI-20260422-01</td><td>学校食堂</td><td><span class="tag tag-green">🥬 净菜包</span></td><td>鸡肉（鸡肉块）</td><td>1kg/箱</td><td>6</td><td>60</td><td>¥2.0</td><td>¥120</td><td>A仓-蔬菜区-02</td><td>2026-04-22 10:00</td><td>—</td><td><span class="tag tag-orange">待配送</span></td><td class="td-actions"><span class="link" style="color:var(--primary)" onclick="openShipModal('EXT-004')">立即发货</span> <span class="link">详情</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
<tr><td>EXT-004</td><td>NC-INT-XLHU-20260422-01</td><td>学校食堂</td><td><span class="tag tag-green">🥬 净菜包</span></td><td>净西兰花</td><td>5kg/箱</td><td>8</td><td>40</td><td>¥4.5</td><td>¥180</td><td>A仓-蔬菜区-04</td><td>2026-04-22 10:00</td><td>—</td><td><span class="tag tag-orange">待配送</span></td><td class="td-actions"><span class="link" style="color:var(--primary)" onclick="openShipModal('EXT-004')">立即发货</span> <span class="link">详情</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
<tr><td>EXT-005</td><td>NC-INT-QZYU-20260422-01</td><td>职工家属区团购</td><td><span class="tag tag-orange">🍱 餐品净菜包</span></td><td>清蒸鱼</td><td>标准份（500g）</td><td>20</td><td>10</td><td>¥15</td><td>¥150</td><td>C仓-水产区-01</td><td>2026-04-22 10:30</td><td>—</td><td><span class="tag tag-gray">备货中</span></td><td class="td-actions"><span class="link" style="color:var(--success)">备货完成</span> <span class="link">详情</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
<tr><td>EXT-006</td><td>NC-INT-SRBC-20260422-01</td><td>职工家属区团购</td><td><span class="tag tag-orange">🍱 餐品净菜包</span></td><td>蒜蓉菠菜</td><td>标准份（500g）</td><td>30</td><td>15</td><td>¥8</td><td>¥120</td><td>A仓-蔬菜区-01</td><td>2026-04-22 10:30</td><td>—</td><td><span class="tag tag-gray">备货中</span></td><td class="td-actions"><span class="link" style="color:var(--success)">备货完成</span> <span class="link">详情</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>显示 6 条，共 8 条</span>
|
||||
<span>显示 8 条，共 12 条</span>
|
||||
<button class="page-btn">‹</button>
|
||||
<button class="page-btn active">1</button>
|
||||
<button class="page-btn">2</button>
|
||||
@@ -227,6 +232,14 @@ textarea.form-control{height:auto;padding:8px 12px;resize:vertical;min-height:60
|
||||
<option>职工家属区团购</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">净菜类型<span class="required">*</span></label>
|
||||
<select class="form-control" id="orderType" onchange="toggleOrderName()">
|
||||
<option value="">请选择</option>
|
||||
<option value="nc">净菜包</option>
|
||||
<option value="cp">餐品净菜包</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">联系人</label>
|
||||
<input class="form-control" placeholder="请输入联系人姓名">
|
||||
@@ -242,7 +255,7 @@ textarea.form-control{height:auto;padding:8px 12px;resize:vertical;min-height:60
|
||||
|
||||
<hr class="form-divider">
|
||||
|
||||
<div class="form-group">
|
||||
<div class="form-group" id="orderNameNC">
|
||||
<label class="form-label">净菜名称<span class="required">*</span></label>
|
||||
<select class="form-control" id="orderItem" onchange="onItemChange()">
|
||||
<option value="">请选择净菜</option>
|
||||
@@ -254,6 +267,17 @@ textarea.form-control{height:auto;padding:8px 12px;resize:vertical;min-height:60
|
||||
<option value="净胡萝卜" data-price="4.0" data-pkg="5kg/箱">净胡萝卜</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group" id="orderNameCP" style="display:none;">
|
||||
<label class="form-label">餐品名称<span class="required">*</span></label>
|
||||
<select class="form-control" id="orderItemCP" onchange="onItemChange()">
|
||||
<option value="">请选择餐品</option>
|
||||
<option value="宫保鸡丁" data-price="12" data-pkg="标准份（500g）">宫保鸡丁</option>
|
||||
<option value="清蒸鱼" data-price="15" data-pkg="标准份（500g）">清蒸鱼</option>
|
||||
<option value="蒜蓉菠菜" data-price="8" data-pkg="标准份（500g）">蒜蓉菠菜</option>
|
||||
<option value="炒胡萝卜" data-price="6" data-pkg="大份（800g）">炒胡萝卜</option>
|
||||
<option value="红烧排骨" data-price="25" data-pkg="标准份（500g）">红烧排骨</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">包装规格</label>
|
||||
<input class="form-control" id="orderPkg" readonly placeholder="选择净菜后自动填充">
|
||||
@@ -301,6 +325,43 @@ textarea.form-control{height:auto;padding:8px 12px;resize:vertical;min-height:60
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 发货确认弹窗 -->
|
||||
<div class="modal-mask" id="shipModal">
|
||||
<div class="modal" style="width:480px;">
|
||||
<div class="modal__header">
|
||||
<span class="modal__title">确认发货</span>
|
||||
<button class="modal__close" onclick="closeShipModal()">×</button>
|
||||
</div>
|
||||
<div class="modal__body">
|
||||
<p style="font-size:var(--font-sm);color:var(--text-secondary);margin-bottom:16px;">请填写物流信息后确认发货，发货后订单状态将变为「配送中」。</p>
|
||||
<div class="form-grid" style="grid-template-columns:1fr;">
|
||||
<div class="form-group">
|
||||
<label class="form-label">订单号</label>
|
||||
<input class="form-control" id="shipOrderNo" readonly>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">物流公司<span class="required">*</span></label>
|
||||
<select class="form-control" id="shipCompany">
|
||||
<option value="">请选择物流公司</option>
|
||||
<option>顺丰速运</option>
|
||||
<option>京东物流</option>
|
||||
<option>德邦快递</option>
|
||||
<option>自有车队配送</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">物流单号<span class="required">*</span></label>
|
||||
<input class="form-control" id="shipTrackNo" placeholder="请输入物流单号">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal__footer">
|
||||
<button class="btn btn-default" onclick="closeShipModal()">取消</button>
|
||||
<button class="btn btn-primary" onclick="confirmShip()">确认发货</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
/* 新建订单弹窗 */
|
||||
function openCreateOrder(){
|
||||
@@ -313,9 +374,17 @@ document.getElementById('createOrderModal').addEventListener('click',function(e)
|
||||
if(e.target===this) closeCreateOrder();
|
||||
});
|
||||
|
||||
/* 净菜类型切换：显示净菜名称或餐品名称 */
|
||||
function toggleOrderName(){
|
||||
var v=document.getElementById('orderType').value;
|
||||
document.getElementById('orderNameNC').style.display=(v==='cp'?'none':'block');
|
||||
document.getElementById('orderNameCP').style.display=(v==='cp'?'block':'none');
|
||||
}
|
||||
|
||||
/* 选择净菜后自动填充包装规格并计算 */
|
||||
function onItemChange(){
|
||||
var sel=document.getElementById('orderItem');
|
||||
var typeVal=document.getElementById('orderType').value;
|
||||
var sel=typeVal==='cp'?document.getElementById('orderItemCP'):document.getElementById('orderItem');
|
||||
var opt=sel.options[sel.selectedIndex];
|
||||
var pkg=opt.getAttribute('data-pkg')||'';
|
||||
document.getElementById('orderPkg').value=pkg;
|
||||
@@ -336,19 +405,6 @@ function calcOrder(){
|
||||
document.getElementById('orderSubtotal').value=subtotal>0?'¥'+subtotal.toFixed(2):'';
|
||||
}
|
||||
|
||||
/* 确认签收交互 */
|
||||
document.querySelectorAll('.btn-confirm-recv').forEach(function(btn){
|
||||
btn.addEventListener('click',function(){
|
||||
if(confirm('确认已签收该订单？')){
|
||||
var tr=this.closest('tr');
|
||||
var statusTd=tr.querySelector('.tag');
|
||||
statusTd.className='tag tag-green';
|
||||
statusTd.textContent='已签收';
|
||||
this.remove();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
/* 提交订单 */
|
||||
function submitOrder(){
|
||||
var traceCode=document.getElementById('orderTraceCode').value.trim();
|
||||
@@ -364,6 +420,28 @@ function submitOrder(){
|
||||
alert('订单提交成功！');
|
||||
closeCreateOrder();
|
||||
}
|
||||
|
||||
/* 发货确认弹窗 */
|
||||
function openShipModal(orderNo){
|
||||
document.getElementById('shipOrderNo').value=orderNo;
|
||||
document.getElementById('shipCompany').value='';
|
||||
document.getElementById('shipTrackNo').value='';
|
||||
document.getElementById('shipModal').classList.add('show');
|
||||
}
|
||||
function closeShipModal(){
|
||||
document.getElementById('shipModal').classList.remove('show');
|
||||
}
|
||||
document.getElementById('shipModal').addEventListener('click',function(e){
|
||||
if(e.target===this) closeShipModal();
|
||||
});
|
||||
function confirmShip(){
|
||||
var company=document.getElementById('shipCompany').value;
|
||||
if(!company){alert('请选择物流公司');return;}
|
||||
var trackNo=document.getElementById('shipTrackNo').value.trim();
|
||||
if(!trackNo){alert('请输入物流单号');return;}
|
||||
alert('订单 '+document.getElementById('shipOrderNo').value+' 已发货！\n物流公司：'+company+'\n物流单号：'+trackNo);
|
||||
closeShipModal();
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
@@ -143,8 +143,11 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
<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 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><option>已完成</option></select>
|
||||
</div>
|
||||
<button class="btn btn-primary">查询</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
@@ -159,19 +162,22 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead><tr>
|
||||
<th>申领单号</th><th>溯源码</th><th>申领食堂</th><th>净菜名称</th><th>包装规格</th><th>申领份数</th><th>申领数量(kg)</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>订单状态</th><th>关联仓库区域</th><th>申领时间</th><th>预定配送时间</th><th>配送人</th><th>操作</th>
|
||||
</tr></thead>
|
||||
<tbody>
|
||||
<tr><td>INT-001</td><td>NC-INT-BOCA-20260422-01</td><td>一号食堂厨房</td><td>菠菜</td><td>500g/袋</td><td>50</td><td>25</td><td><span class="tag tag-green">已配送</span></td><td>A仓-蔬菜区-01</td><td>2026-04-22 07:30</td><td>李配送</td><td class="td-actions"><span class="link">详情</span> <span class="link">编辑</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
<tr><td>INT-001</td><td>NC-INT-BCAI-20260422-01</td><td>一号食堂厨房</td><td>玉米（玉米粒）</td><td>1kg/盒</td><td>20</td><td>20</td><td><span class="tag tag-green">已配送</span></td><td>A仓-蔬菜区-02</td><td>2026-04-22 07:30</td><td>李配送</td><td class="td-actions"><span class="link">详情</span> <span class="link">编辑</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
<tr><td>INT-002</td><td>NC-INT-ZLRJ-20260422-01</td><td>二号食堂厨房</td><td>猪排骨</td><td>2kg/盘</td><td>20</td><td>40</td><td><span class="tag tag-blue">配送中</span></td><td>B仓-肉类区-01</td><td>2026-04-22 08:00</td><td>王配送</td><td class="td-actions"><span class="link">详情</span> <span class="link">编辑</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
<tr><td>INT-002</td><td>NC-INT-JXRJ-20260422-01</td><td>二号食堂厨房</td><td>鸡胸肉（鸡肉丝）</td><td>1kg/袋</td><td>20</td><td>20</td><td><span class="tag tag-blue">配送中</span></td><td>B仓-肉类区-02</td><td>2026-04-22 08:00</td><td>王配送</td><td class="td-actions"><span class="link">详情</span> <span class="link">编辑</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
<tr><td>INT-003</td><td>NC-INT-CAYO-20260422-01</td><td>三号食堂厨房</td><td>草鱼（鱼片）</td><td>2kg/盘</td><td>20</td><td>40</td><td><span class="tag tag-orange">待配送</span></td><td>C仓-水产区-01</td><td>2026-04-22 08:30</td><td>—</td><td class="td-actions"><span class="link">详情</span> <span class="link">编辑</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
<tr><td>INT-001</td><td>NC-INT-BOCA-20260422-01</td><td>一号食堂厨房</td><td><span class="tag tag-green">🥬 净菜包</span></td><td>菠菜</td><td>500g/袋</td><td>50</td><td>25</td><td><span class="tag tag-green">已完成</span></td><td>A仓-蔬菜区-01</td><td>2026-04-22 07:30</td><td>2026-04-22 09:00</td><td>李配送</td><td class="td-actions"><span class="link">详情</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
<tr><td>INT-001</td><td>NC-INT-BCAI-20260422-01</td><td>一号食堂厨房</td><td><span class="tag tag-green">🥬 净菜包</span></td><td>玉米（玉米粒）</td><td>1kg/盒</td><td>20</td><td>20</td><td><span class="tag tag-green">已完成</span></td><td>A仓-蔬菜区-02</td><td>2026-04-22 07:30</td><td>2026-04-22 09:00</td><td>李配送</td><td class="td-actions"><span class="link">详情</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
<tr><td>INT-002</td><td>NC-INT-ZLRJ-20260422-01</td><td>二号食堂厨房</td><td><span class="tag tag-green">🥬 净菜包</span></td><td>猪排骨</td><td>2kg/盘</td><td>20</td><td>40</td><td><span class="tag tag-blue">配送中</span></td><td>B仓-肉类区-01</td><td>2026-04-22 08:00</td><td>2026-04-22 10:00</td><td>王配送</td><td class="td-actions"><span class="link" style="color:var(--success)">确认收货</span> <span class="link">详情</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
<tr><td>INT-003</td><td>NC-INT-JXRJ-20260422-01</td><td>二号食堂厨房</td><td><span class="tag tag-orange">🍱 餐品净菜包</span></td><td>宫保鸡丁</td><td>标准份（500g）</td><td>30</td><td>15</td><td><span class="tag tag-blue">配送中</span></td><td>B仓-肉类区-02</td><td>2026-04-22 08:00</td><td>2026-04-22 10:00</td><td>王配送</td><td class="td-actions"><span class="link" style="color:var(--success)">确认收货</span> <span class="link">详情</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
<tr><td>INT-004</td><td>NC-INT-CAYO-20260422-01</td><td>三号食堂厨房</td><td><span class="tag tag-green">🥬 净菜包</span></td><td>草鱼（鱼片）</td><td>2kg/盘</td><td>20</td><td>40</td><td><span class="tag tag-orange">待配送</span></td><td>C仓-水产区-01</td><td>2026-04-22 08:30</td><td>2026-04-22 10:30</td><td>—</td><td class="td-actions"><span class="link" style="color:var(--primary)">立即配送</span> <span class="link">详情</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
<tr><td>INT-005</td><td>NC-INT-QZYU-20260422-01</td><td>一号食堂厨房</td><td><span class="tag tag-orange">🍱 餐品净菜包</span></td><td>清蒸鱼</td><td>标准份（500g）</td><td>15</td><td>7.5</td><td><span class="tag tag-orange">待配送</span></td><td>C仓-水产区-02</td><td>2026-04-22 09:00</td><td>2026-04-22 11:00</td><td>—</td><td class="td-actions"><span class="link" style="color:var(--primary)">立即配送</span> <span class="link">详情</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
<tr><td>INT-006</td><td>NC-INT-TDSI-20260422-01</td><td>三号食堂厨房</td><td><span class="tag tag-green">🥬 净菜包</span></td><td>土豆（土豆丝）</td><td>500g/袋</td><td>40</td><td>20</td><td><span class="tag tag-gray">备货中</span></td><td>A仓-蔬菜区-03</td><td>2026-04-22 09:15</td><td>2026-04-22 11:30</td><td>—</td><td class="td-actions"><span class="link" style="color:var(--success)">备货完成</span> <span class="link">详情</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
<tr><td>INT-007</td><td>NC-INT-SRBC-20260422-01</td><td>二号食堂厨房</td><td><span class="tag tag-orange">🍱 餐品净菜包</span></td><td>蒜蓉菠菜</td><td>标准份（500g）</td><td>25</td><td>12.5</td><td><span class="tag tag-gray">备货中</span></td><td>A仓-蔬菜区-01</td><td>2026-04-22 09:30</td><td>2026-04-22 12:00</td><td>—</td><td class="td-actions"><span class="link" style="color:var(--success)">备货完成</span> <span class="link">详情</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>显示 5 条，共 18 条</span>
|
||||
<span>显示 8 条，共 26 条</span>
|
||||
<button class="page-btn">‹</button>
|
||||
<button class="page-btn active">1</button>
|
||||
<button class="page-btn">2</button>
|
||||
@@ -195,13 +201,21 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
<div class="form-item__label">溯源码<span class="required">*</span></div>
|
||||
<input placeholder="输入溯源码可带出净菜信息以及仓库信息">
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-item__label">净菜类型<span class="required">*</span></div>
|
||||
<select id="claimType" onchange="toggleClaimName()"><option value="">请选择</option><option value="nc">净菜包</option><option value="cp">餐品净菜包</option></select>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-item__label">申领食堂<span class="required">*</span></div>
|
||||
<select><option value="">请选择</option><option>一号食堂厨房</option><option>二号食堂厨房</option><option>三号食堂厨房</option></select>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-item" id="claimNameNC">
|
||||
<div class="form-item__label">净菜名称<span class="required">*</span></div>
|
||||
<select><option value="">请选择净菜</option><option>菠菜</option><option>玉米（玉米粒）</option><option>猪排骨</option><option>鸡胸肉（鸡肉丝）</option><option>草鱼（鱼片）</option></select>
|
||||
<select><option value="">请选择净菜</option><option>菠菜</option><option>玉米（玉米粒）</option><option>猪排骨</option><option>鸡胸肉（鸡肉丝）</option><option>草鱼（鱼片）</option><option>土豆（土豆丝）</option></select>
|
||||
</div>
|
||||
<div class="form-item" id="claimNameCP" style="display:none;">
|
||||
<div class="form-item__label">餐品名称<span class="required">*</span></div>
|
||||
<select><option value="">请选择餐品</option><option>宫保鸡丁</option><option>清蒸鱼</option><option>蒜蓉菠菜</option><option>炒胡萝卜</option><option>红烧排骨</option></select>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-item__label">包装规格<span class="required">*</span></div>
|
||||
@@ -219,6 +233,10 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
<div class="form-item__label">关联仓库区域</div>
|
||||
<select><option value="">请选择</option><option>A仓-蔬菜区-01</option><option>A仓-蔬菜区-02</option><option>B仓-肉类区-01</option><option>B仓-肉类区-02</option><option>C仓-水产区-01</option></select>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-item__label">预定配送时间</div>
|
||||
<input type="datetime-local" placeholder="请选择配送时间">
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-item__label">配送人</div>
|
||||
<input placeholder="请输入配送人">
|
||||
@@ -240,6 +258,12 @@ function closeModal(id){document.getElementById(id).classList.remove('show');}
|
||||
document.querySelectorAll('.modal-mask').forEach(m=>{
|
||||
m.addEventListener('click',e=>{if(e.target===m)m.classList.remove('show');});
|
||||
});
|
||||
// 净菜类型切换：显示净菜名称或餐品名称
|
||||
function toggleClaimName(){
|
||||
var v=document.getElementById('claimType').value;
|
||||
document.getElementById('claimNameNC').style.display=(v==='cp'?'none':'flex');
|
||||
document.getElementById('claimNameCP').style.display=(v==='cp'?'flex':'none');
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
@@ -177,29 +177,29 @@ tbody td.td-actions{white-space:nowrap;}
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead><tr>
|
||||
<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><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>
|
||||
</tr></thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>PROC-001</td><td>NC-PROC-BOCA-20260415-01</td><td>土豆</td><td>土豆丝</td><td>去皮/切割</td><td>100</td><td>86</td><td>86.0</td><td>李加工</td><td>2026-04-15 08:00</td><td>2026-04-15 08:45</td><td><span class="tag tag-green">合格</span></td><td><span class="tag tag-green">已入库</span></td><td class="td-actions"><span class="link" onclick="openVideoModal()">查看视频</span> <span class="action-more"><span class="more-btn">更多 ▾</span><div class="dropdown"><a href="javascript:;" onclick="openModal()">详情</a><a href="javascript:;" onclick="openModal()">编辑</a><a href="javascript:;" class="danger" onclick="if(confirm('确认删除该记录？')){}">删除</a></div></span></td>
|
||||
<td>PROC-001</td><td><span class="link">NC-IN-001</span></td><td>NC-PROC-BOCA-20260415-01</td><td>土豆</td><td>土豆丝</td><td>去皮/切割</td><td>100</td><td>86</td><td>86.0</td><td>李加工</td><td>2026-04-15 08:00</td><td>2026-04-15 08:45</td><td><span class="tag tag-green">合格</span></td><td><span class="tag tag-green">已入库</span></td><td class="td-actions"><span class="link" onclick="openVideoModal()">查看视频</span> <span class="action-more"><span class="more-btn">更多 ▾</span><div class="dropdown"><a href="javascript:;" onclick="openModal()">详情</a><a href="javascript:;" onclick="openModal()">编辑</a><a href="javascript:;" class="danger" onclick="if(confirm('确认删除该记录？')){}">删除</a></div></span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>PROC-002</td><td>NC-PROC-HLUB-20260415-01</td><td>土豆</td><td>土豆片</td><td>去皮/切割</td><td>140</td><td>120</td><td>85.7</td><td>王加工</td><td>2026-04-15 08:30</td><td>2026-04-15 09:20</td><td><span class="tag tag-green">合格</span></td><td><span class="tag tag-gray">未入库</span></td><td class="td-actions"><span class="link" onclick="openVideoModal()">查看视频</span> <span class="link" onclick="confirmGenStock()">生成入库单</span> <span class="action-more"><span class="more-btn">更多 ▾</span><div class="dropdown"><a href="javascript:;" onclick="openModal()">详情</a><a href="javascript:;" onclick="openModal()">编辑</a><a href="javascript:;" class="danger" onclick="if(confirm('确认删除该记录？')){}">删除</a></div></span></td>
|
||||
<td>PROC-002</td><td><span class="link">—</span></td><td>NC-PROC-HLUB-20260415-01</td><td>土豆</td><td>土豆片</td><td>去皮/切割</td><td>140</td><td>120</td><td>85.7</td><td>王加工</td><td>2026-04-15 08:30</td><td>2026-04-15 09:20</td><td><span class="tag tag-green">合格</span></td><td><span class="tag tag-gray">未入库</span></td><td class="td-actions"><span class="link" onclick="openVideoModal()">查看视频</span> <span class="link" onclick="confirmGenStock()">生成入库单</span> <span class="action-more"><span class="more-btn">更多 ▾</span><div class="dropdown"><a href="javascript:;" onclick="openModal()">详情</a><a href="javascript:;" onclick="openModal()">编辑</a><a href="javascript:;" class="danger" onclick="if(confirm('确认删除该记录？')){}">删除</a></div></span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>PROC-003</td><td>NC-PROC-XGUO-20260415-01</td><td>土豆</td><td>土豆泥</td><td>去皮/切割</td><td>56</td><td>48</td><td>85.7</td><td>李加工</td><td>2026-04-15 09:00</td><td>2026-04-15 09:40</td><td><span class="tag tag-green">合格</span></td><td><span class="tag tag-gray">未入库</span></td><td class="td-actions"><span class="link" onclick="openVideoModal()">查看视频</span> <span class="link" onclick="confirmGenStock()">生成入库单</span> <span class="action-more"><span class="more-btn">更多 ▾</span><div class="dropdown"><a href="javascript:;" onclick="openModal()">详情</a><a href="javascript:;" onclick="openModal()">编辑</a><a href="javascript:;" class="danger" onclick="if(confirm('确认删除该记录？')){}">删除</a></div></span></td>
|
||||
<td>PROC-003</td><td><span class="link">—</span></td><td>NC-PROC-XGUO-20260415-01</td><td>土豆</td><td>土豆泥</td><td>去皮/切割</td><td>56</td><td>48</td><td>85.7</td><td>李加工</td><td>2026-04-15 09:00</td><td>2026-04-15 09:40</td><td><span class="tag tag-green">合格</span></td><td><span class="tag tag-gray">未入库</span></td><td class="td-actions"><span class="link" onclick="openVideoModal()">查看视频</span> <span class="link" onclick="confirmGenStock()">生成入库单</span> <span class="action-more"><span class="more-btn">更多 ▾</span><div class="dropdown"><a href="javascript:;" onclick="openModal()">详情</a><a href="javascript:;" onclick="openModal()">编辑</a><a href="javascript:;" class="danger" onclick="if(confirm('确认删除该记录？')){}">删除</a></div></span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>PROC-004</td><td>NC-PROC-SJDOU-20260415-01</td><td>四季豆</td><td>段（5cm）</td><td>清洗</td><td>60</td><td>52</td><td>86.7</td><td>张加工</td><td>2026-04-15 09:30</td><td>2026-04-15 10:00</td><td><span class="tag tag-orange">待处理</span></td><td><span class="tag tag-gray">未入库</span></td><td class="td-actions"><span class="link" onclick="openVideoModal()">查看视频</span> <span class="action-more"><span class="more-btn">更多 ▾</span><div class="dropdown"><a href="javascript:;" onclick="openModal()">详情</a><a href="javascript:;" onclick="openModal()">编辑</a><a href="javascript:;" class="danger" onclick="if(confirm('确认删除该记录？')){}">删除</a></div></span></td>
|
||||
<td>PROC-004</td><td><span class="link">—</span></td><td>NC-PROC-SJDOU-20260415-01</td><td>四季豆</td><td>段（5cm）</td><td>清洗</td><td>60</td><td>52</td><td>86.7</td><td>张加工</td><td>2026-04-15 09:30</td><td>2026-04-15 10:00</td><td><span class="tag tag-orange">待处理</span></td><td><span class="tag tag-gray">未入库</span></td><td class="td-actions"><span class="link" onclick="openVideoModal()">查看视频</span> <span class="action-more"><span class="more-btn">更多 ▾</span><div class="dropdown"><a href="javascript:;" onclick="openModal()">详情</a><a href="javascript:;" onclick="openModal()">编辑</a><a href="javascript:;" class="danger" onclick="if(confirm('确认删除该记录？')){}">删除</a></div></span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>PROC-005</td><td>NC-PROC-BCAI-20260415-01</td><td>白菜</td><td>整棵</td><td>清洗</td><td>80</td><td>70</td><td>87.5</td><td>张加工</td><td>2026-04-15 07:30</td><td>2026-04-15 08:10</td><td><span class="tag tag-green">合格</span></td><td><span class="tag tag-gray">未入库</span></td><td class="td-actions"><span class="link" onclick="openVideoModal()">查看视频</span> <span class="link" onclick="confirmGenStock()">生成入库单</span> <span class="action-more"><span class="more-btn">更多 ▾</span><div class="dropdown"><a href="javascript:;" onclick="openModal()">详情</a><a href="javascript:;" onclick="openModal()">编辑</a><a href="javascript:;" class="danger" onclick="if(confirm('确认删除该记录？')){}">删除</a></div></span></td>
|
||||
<td>PROC-005</td><td><span class="link">NC-IN-004</span></td><td>NC-PROC-BCAI-20260415-01</td><td>白菜</td><td>整棵</td><td>清洗</td><td>80</td><td>70</td><td>87.5</td><td>张加工</td><td>2026-04-15 07:30</td><td>2026-04-15 08:10</td><td><span class="tag tag-green">合格</span></td><td><span class="tag tag-gray">未入库</span></td><td class="td-actions"><span class="link" onclick="openVideoModal()">查看视频</span> <span class="link" onclick="confirmGenStock()">生成入库单</span> <span class="action-more"><span class="more-btn">更多 ▾</span><div class="dropdown"><a href="javascript:;" onclick="openModal()">详情</a><a href="javascript:;" onclick="openModal()">编辑</a><a href="javascript:;" class="danger" onclick="if(confirm('确认删除该记录？')){}">删除</a></div></span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>PROC-006</td><td>NC-PROC-ZLRJ-20260415-01</td><td>猪里脊</td><td>丁（1.5cm）</td><td>切割</td><td>80</td><td>76</td><td>95.0</td><td>王加工</td><td>2026-04-15 09:30</td><td>2026-04-15 09:55</td><td><span class="tag tag-green">合格</span></td><td><span class="tag tag-gray">未入库</span></td><td class="td-actions"><span class="link" onclick="openVideoModal()">查看视频</span> <span class="link" onclick="confirmGenStock()">生成入库单</span> <span class="action-more"><span class="more-btn">更多 ▾</span><div class="dropdown"><a href="javascript:;" onclick="openModal()">详情</a><a href="javascript:;" onclick="openModal()">编辑</a><a href="javascript:;" class="danger" onclick="if(confirm('确认删除该记录？')){}">删除</a></div></span></td>
|
||||
<td>PROC-006</td><td><span class="link">NC-IN-005</span></td><td>NC-PROC-ZLRJ-20260415-01</td><td>猪里脊</td><td>丁（1.5cm）</td><td>切割</td><td>80</td><td>76</td><td>95.0</td><td>王加工</td><td>2026-04-15 09:30</td><td>2026-04-15 09:55</td><td><span class="tag tag-green">合格</span></td><td><span class="tag tag-gray">未入库</span></td><td class="td-actions"><span class="link" onclick="openVideoModal()">查看视频</span> <span class="link" onclick="confirmGenStock()">生成入库单</span> <span class="action-more"><span class="more-btn">更多 ▾</span><div class="dropdown"><a href="javascript:;" onclick="openModal()">详情</a><a href="javascript:;" onclick="openModal()">编辑</a><a href="javascript:;" class="danger" onclick="if(confirm('确认删除该记录？')){}">删除</a></div></span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>PROC-007</td><td>NC-PROC-ZLRJ-20260415-02</td><td>猪里脊</td><td>条（4cm）</td><td>切割</td><td>90</td><td>85</td><td>94.4</td><td>李加工</td><td>2026-04-15 10:00</td><td>2026-04-15 10:30</td><td><span class="tag tag-orange">待处理</span></td><td><span class="tag tag-gray">未入库</span></td><td class="td-actions"><span class="link" onclick="openVideoModal()">查看视频</span> <span class="action-more"><span class="more-btn">更多 ▾</span><div class="dropdown"><a href="javascript:;" onclick="openModal()">详情</a><a href="javascript:;" onclick="openModal()">编辑</a><a href="javascript:;" class="danger" onclick="if(confirm('确认删除该记录？')){}">删除</a></div></span></td>
|
||||
<td>PROC-007</td><td><span class="link">—</span></td><td>NC-PROC-ZLRJ-20260415-02</td><td>猪里脊</td><td>条（4cm）</td><td>切割</td><td>90</td><td>85</td><td>94.4</td><td>李加工</td><td>2026-04-15 10:00</td><td>2026-04-15 10:30</td><td><span class="tag tag-orange">待处理</span></td><td><span class="tag tag-gray">未入库</span></td><td class="td-actions"><span class="link" onclick="openVideoModal()">查看视频</span> <span class="action-more"><span class="more-btn">更多 ▾</span><div class="dropdown"><a href="javascript:;" onclick="openModal()">详情</a><a href="javascript:;" onclick="openModal()">编辑</a><a href="javascript:;" class="danger" onclick="if(confirm('确认删除该记录？')){}">删除</a></div></span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
@@ -173,23 +173,23 @@ tbody td.td-actions{white-space:nowrap;}
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead><tr>
|
||||
<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><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>
|
||||
</tr></thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>NC-IN-001</td><td>NC-PROC-BOCA-20260415-01</td><td>土豆</td><td>土豆丝</td><td>袋装/500g</td><td>86</td><td>43.0</td><td>31.0</td><td>2026-04-15 09:15</td><td>2026-04-17 09:15</td><td>A仓-蔬菜区-01</td><td>4.1</td><td>李入库</td><td class="td-actions"><span class="link" onclick="openVideoModal()">查看视频</span> <span class="link" onclick="openOutModal('NC-IN-001')">出库明细</span> <span class="action-more"><span class="more-btn">更多 ▾</span><div class="dropdown"><a href="javascript:;" onclick="openModal()">详情</a><a href="javascript:;" onclick="openModal()">编辑</a><a href="javascript:;" class="danger" onclick="if(confirm('确认删除该记录？')){}">删除</a></div></span></td>
|
||||
<td>NC-IN-001</td><td><span class="link">PROC-001</span></td><td>NC-PROC-BOCA-20260415-01</td><td>土豆</td><td>土豆丝</td><td>袋装/500g</td><td>86</td><td>43.0</td><td>31.0</td><td>2026-04-15 09:15</td><td>2026-04-17 09:15</td><td>A仓-蔬菜区-01</td><td>4.1</td><td>李入库</td><td class="td-actions"><span class="link" onclick="openVideoModal()">查看视频</span> <span class="link" onclick="openOutModal('NC-IN-001')">出库明细</span> <span class="action-more"><span class="more-btn">更多 ▾</span><div class="dropdown"><a href="javascript:;" onclick="openModal()">详情</a><a href="javascript:;" onclick="openModal()">编辑</a><a href="javascript:;" class="danger" onclick="if(confirm('确认删除该记录？')){}">删除</a></div></span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>NC-IN-002</td><td>NC-PROC-HLUB-20260415-01</td><td>土豆</td><td>土豆片</td><td>袋装/500g</td><td>120</td><td>60.0</td><td>47.5</td><td>2026-04-15 09:45</td><td>2026-04-18 09:45</td><td>A仓-蔬菜区-02</td><td>4.2</td><td>王入库</td><td class="td-actions"><span class="link" onclick="openVideoModal()">查看视频</span> <span class="link" onclick="openOutModal('NC-IN-002')">出库明细</span> <span class="action-more"><span class="more-btn">更多 ▾</span><div class="dropdown"><a href="javascript:;" onclick="openModal()">详情</a><a href="javascript:;" onclick="openModal()">编辑</a><a href="javascript:;" class="danger" onclick="if(confirm('确认删除该记录？')){}">删除</a></div></span></td>
|
||||
<td>NC-IN-002</td><td><span class="link">PROC-002</span></td><td>NC-PROC-HLUB-20260415-01</td><td>土豆</td><td>土豆片</td><td>袋装/500g</td><td>120</td><td>60.0</td><td>47.5</td><td>2026-04-15 09:45</td><td>2026-04-18 09:45</td><td>A仓-蔬菜区-02</td><td>4.2</td><td>王入库</td><td class="td-actions"><span class="link" onclick="openVideoModal()">查看视频</span> <span class="link" onclick="openOutModal('NC-IN-002')">出库明细</span> <span class="action-more"><span class="more-btn">更多 ▾</span><div class="dropdown"><a href="javascript:;" onclick="openModal()">详情</a><a href="javascript:;" onclick="openModal()">编辑</a><a href="javascript:;" class="danger" onclick="if(confirm('确认删除该记录？')){}">删除</a></div></span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>NC-IN-003</td><td>NC-PROC-XGUO-20260415-01</td><td>土豆</td><td>土豆泥</td><td>盒装/300g</td><td>48</td><td>14.4</td><td>9.0</td><td>2026-04-15 11:00</td><td>2026-04-17 11:00</td><td>A仓-蔬菜区-03</td><td>4.0</td><td>李入库</td><td class="td-actions"><span class="link" onclick="openVideoModal()">查看视频</span> <span class="link" onclick="openOutModal('NC-IN-003')">出库明细</span> <span class="action-more"><span class="more-btn">更多 ▾</span><div class="dropdown"><a href="javascript:;" onclick="openModal()">详情</a><a href="javascript:;" onclick="openModal()">编辑</a><a href="javascript:;" class="danger" onclick="if(confirm('确认删除该记录？')){}">删除</a></div></span></td>
|
||||
<td>NC-IN-003</td><td><span class="link">PROC-003</span></td><td>NC-PROC-XGUO-20260415-01</td><td>土豆</td><td>土豆泥</td><td>盒装/300g</td><td>48</td><td>14.4</td><td>9.0</td><td>2026-04-15 11:00</td><td>2026-04-17 11:00</td><td>A仓-蔬菜区-03</td><td>4.0</td><td>李入库</td><td class="td-actions"><span class="link" onclick="openVideoModal()">查看视频</span> <span class="link" onclick="openOutModal('NC-IN-003')">出库明细</span> <span class="action-more"><span class="more-btn">更多 ▾</span><div class="dropdown"><a href="javascript:;" onclick="openModal()">详情</a><a href="javascript:;" onclick="openModal()">编辑</a><a href="javascript:;" class="danger" onclick="if(confirm('确认删除该记录？')){}">删除</a></div></span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>NC-IN-004</td><td>NC-PROC-BCAI-20260415-01</td><td>白菜</td><td>整棵</td><td>散装/整棵</td><td>70</td><td>35.0</td><td>22.5</td><td>2026-04-15 11:30</td><td>2026-04-18 11:30</td><td>A仓-蔬菜区-04</td><td>3.8</td><td>张入库</td><td class="td-actions"><span class="link" onclick="openVideoModal()">查看视频</span> <span class="link" onclick="openOutModal('NC-IN-004')">出库明细</span> <span class="action-more"><span class="more-btn">更多 ▾</span><div class="dropdown"><a href="javascript:;" onclick="openModal()">详情</a><a href="javascript:;" onclick="openModal()">编辑</a><a href="javascript:;" class="danger" onclick="if(confirm('确认删除该记录？')){}">删除</a></div></span></td>
|
||||
<td>NC-IN-004</td><td><span class="link">PROC-005</span></td><td>NC-PROC-BCAI-20260415-01</td><td>白菜</td><td>整棵</td><td>散装/整棵</td><td>70</td><td>35.0</td><td>22.5</td><td>2026-04-15 11:30</td><td>2026-04-18 11:30</td><td>A仓-蔬菜区-04</td><td>3.8</td><td>张入库</td><td class="td-actions"><span class="link" onclick="openVideoModal()">查看视频</span> <span class="link" onclick="openOutModal('NC-IN-004')">出库明细</span> <span class="action-more"><span class="more-btn">更多 ▾</span><div class="dropdown"><a href="javascript:;" onclick="openModal()">详情</a><a href="javascript:;" onclick="openModal()">编辑</a><a href="javascript:;" class="danger" onclick="if(confirm('确认删除该记录？')){}">删除</a></div></span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>NC-IN-005</td><td>NC-PROC-ZLRJ-20260415-01</td><td>猪里脊</td><td>丁（1.5cm）</td><td>袋装/400g</td><td>76</td><td>30.4</td><td>18.8</td><td>2026-04-15 12:00</td><td>2026-04-16 12:00</td><td>B仓-肉类区-01</td><td>-2.0</td><td>王入库</td><td class="td-actions"><span class="link" onclick="openVideoModal()">查看视频</span> <span class="link" onclick="openOutModal('NC-IN-005')">出库明细</span> <span class="action-more"><span class="more-btn">更多 ▾</span><div class="dropdown"><a href="javascript:;" onclick="openModal()">详情</a><a href="javascript:;" onclick="openModal()">编辑</a><a href="javascript:;" class="danger" onclick="if(confirm('确认删除该记录？')){}">删除</a></div></span></td>
|
||||
<td>NC-IN-005</td><td><span class="link">PROC-006</span></td><td>NC-PROC-ZLRJ-20260415-01</td><td>猪里脊</td><td>丁（1.5cm）</td><td>袋装/400g</td><td>76</td><td>30.4</td><td>18.8</td><td>2026-04-15 12:00</td><td>2026-04-16 12:00</td><td>B仓-肉类区-01</td><td>-2.0</td><td>王入库</td><td class="td-actions"><span class="link" onclick="openVideoModal()">查看视频</span> <span class="link" onclick="openOutModal('NC-IN-005')">出库明细</span> <span class="action-more"><span class="more-btn">更多 ▾</span><div class="dropdown"><a href="javascript:;" onclick="openModal()">详情</a><a href="javascript:;" onclick="openModal()">编辑</a><a href="javascript:;" class="danger" onclick="if(confirm('确认删除该记录？')){}">删除</a></div></span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
Reference in New Issue
Block a user