feat: 营养管理模块原型页面新增及链路可视化重构
- 新增56个营养管理原型页面（溯源、档案、种采、供应、生产、用餐、异常） - 更新 index.html SITE_MAP 同步所有营养管理页面条目 - trace-timeline.html 重构为数据驱动渲染，侧边栏修正为深色模式 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
冯普
+58
-1
@@ -222,7 +222,64 @@ const SITE_MAP = [
|
||||
{ file:'exception-result.html', label:'结果异常' }
|
||||
]},
|
||||
{ name:'体重管理', dir:'web-admin/weight-management', pages:[] },
|
||||
{ name:'营养管理', dir:'web-admin/nutrition', pages:[] },
|
||||
{ name:'营养管理', dir:'web-admin/nutrition', entry:'trace-query.html', pages:[
|
||||
{ file:'trace-query.html', label:'溯源查询' },
|
||||
{ file:'trace-timeline.html', label:'链路可视化' },
|
||||
{ file:'arc-employee.html', label:'员工营养数据' },
|
||||
{ file:'arc-unit.html', label:'单位报表数据' },
|
||||
{ file:'arc-algo.html', label:'算法模型' },
|
||||
{ file:'farm-land.html', label:'土地环境' },
|
||||
{ file:'farm-monitor-crop.html', label:'作物种植监控' },
|
||||
{ file:'farm-monitor-livestock.html', label:'畜禽养殖监控' },
|
||||
{ file:'farm-harvest.html', label:'收成入库' },
|
||||
{ file:'farm-supplier.html', label:'供商管理' },
|
||||
{ file:'farm-purchase.html', label:'采供管理' },
|
||||
{ file:'sup-hygiene-check.html', label:'卫生检测' },
|
||||
{ file:'sup-in-raw.html', label:'毛菜入库' },
|
||||
{ file:'sup-in-clean.html', label:'净菜加工' },
|
||||
{ file:'sup-in-cleanin.html', label:'净菜入库' },
|
||||
{ file:'sup-pkg-label.html', label:'净菜包装' },
|
||||
{ file:'sup-warehouse.html', label:'仓储管理' },
|
||||
{ file:'sup-clean-internal.html', label:'净菜内供' },
|
||||
{ file:'sup-clean-external.html', label:'净菜外售' },
|
||||
{ file:'din-user-mgmt.html', label:'用户管理' },
|
||||
{ file:'din-user-mgmt-dialog.html', label:'用户管理弹窗', dialog:true },
|
||||
{ file:'din-dish-all.html', label:'菜品总库' },
|
||||
{ file:'din-dish-all-dialog.html', label:'菜品总库弹窗', dialog:true },
|
||||
{ file:'din-dish-add.html', label:'新增菜品' },
|
||||
{ file:'din-dish-composition.html', label:'菜品成分' },
|
||||
{ file:'din-ingredient.html', label:'食材管理' },
|
||||
{ file:'din-ingredient-dialog.html', label:'食材管理弹窗', dialog:true },
|
||||
{ file:'din-ingredient-detail.html', label:'食材详情' },
|
||||
{ file:'din-recipe-mgmt.html', label:'食谱管理' },
|
||||
{ file:'din-terminal.html', label:'终端管理' },
|
||||
{ file:'din-order-meal.html', label:'点餐订单' },
|
||||
{ file:'din-order-line.html', label:'排队取餐' },
|
||||
{ file:'din-order-pickup.html', label:'取餐管理' },
|
||||
{ file:'din-innovation.html', label:'菜品创新' },
|
||||
{ file:'din-dict-mgmt.html', label:'字典管理' },
|
||||
{ file:'din-dict-config.html', label:'字典配置' },
|
||||
{ file:'din-algo-population.html', label:'群体算法' },
|
||||
{ file:'din-algo-vip.html', label:'VIP算法' },
|
||||
{ file:'din-model-llm.html', label:'大模型管理' },
|
||||
{ file:'din-model-small.html', label:'小模型管理' },
|
||||
{ file:'din-data-nutri.html', label:'营养数据' },
|
||||
{ file:'din-data-consume.html', label:'消费数据' },
|
||||
{ file:'din-data-benefit.html', label:'效益数据' },
|
||||
{ file:'prod-recipe-plan.html', label:'食谱排期' },
|
||||
{ file:'prod-recipe-plan-dialog.html', label:'食谱排期弹窗', dialog:true },
|
||||
{ file:'prod-clean-order.html', label:'净菜下单' },
|
||||
{ file:'prod-proc-combo.html', label:'配菜组合' },
|
||||
{ file:'prod-proc-cook.html', label:'烹饪加工' },
|
||||
{ file:'prod-proc-serve.html', label:'出餐管理' },
|
||||
{ file:'prod-proc-surplus.html', label:'余量处理' },
|
||||
{ file:'prod-proc-cabinet.html', label:'取餐柜管理' },
|
||||
{ file:'prod-proc-stats.html', label:'加工统计' },
|
||||
{ file:'prod-qc-daily.html', label:'日常质检' },
|
||||
{ file:'prod-qc-nutrition.html', label:'营养质检' },
|
||||
{ file:'ano-dirty.html', label:'系统脏数据' },
|
||||
{ file:'ano-result.html', label:'结果异常' }
|
||||
]},
|
||||
{ name:'运动管理', dir:'web-admin/exercise', pages:[] },
|
||||
{ name:'健康监测', dir:'web-admin/health-monitor', pages:[] },
|
||||
{ name:'健康评估', dir:'web-admin/health-assessment', pages:[] },
|
||||
|
||||
@@ -0,0 +1,247 @@
|
||||
<!DOCTYPE html>
|
||||
<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;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#F5F7FA;color:#333;min-width:1280px;}
|
||||
:root{
|
||||
--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;
|
||||
--text-primary:#333;--text-secondary:#666;--text-placeholder:#999;--border:#E8E8E8;--background:#F5F7FA;
|
||||
--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--font-xxl:24px;
|
||||
--radius-sm:4px;--radius-md:8px;--radius-lg:12px;
|
||||
--shadow-sm:0 1px 4px rgba(0,0,0,0.08);--shadow-md:0 4px 12px rgba(0,0,0,0.12);
|
||||
}
|
||||
|
||||
/* 通用布局 */
|
||||
.top-bar{display:flex;align-items:center;height:56px;background:#001529;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;}
|
||||
.top-bar__logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:var(--font-lg);font-weight:600;white-space:nowrap;width:240px;flex-shrink:0;}
|
||||
.top-bar__logo svg{width:28px;height:28px;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.top-bar__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.top-bar__right .btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.top-bar__right .btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);cursor:pointer;}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;text-transform:uppercase;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.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;}
|
||||
.action-bar{display:flex;align-items:center;gap:8px;margin-bottom:16px;}
|
||||
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;min-height:calc(100vh - 56px);}
|
||||
.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-select{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);color:var(--text-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='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;cursor:pointer;min-width:120px;}
|
||||
.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;}
|
||||
.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);}
|
||||
.tag-orange{background:#FFF7E6;color:var(--warning);}
|
||||
.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;}
|
||||
.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);}
|
||||
|
||||
/* 统计卡片 */
|
||||
.stats-row{display:grid;grid-template-columns:repeat(3,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;}
|
||||
.stat-card__icon.blue{background:var(--primary-light);}
|
||||
.stat-card__icon.green{background:#F6FFED;}
|
||||
.stat-card__icon.orange{background:#FFF7E6;}
|
||||
.stat-card__icon.red{background:#FFF1F0;}
|
||||
.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);}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- 顶部导航 -->
|
||||
<header class="top-bar">
|
||||
<div class="top-bar__logo">
|
||||
<svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M7 14h14M14 7v14" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/></svg>
|
||||
营养管理
|
||||
</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="trace-query.html">溯源总览</a>
|
||||
<a href="arc-employee.html">档案</a>
|
||||
<a href="farm-land.html">绿色种采</a>
|
||||
<a href="sup-hygiene-check.html">卫生供应</a>
|
||||
<a href="prod-qc-daily.html">健康生产</a>
|
||||
<a href="din-dict-mgmt.html">营养用餐</a>
|
||||
<a href="ano-dirty.html" class="active">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<a class="btn-back" href="../../index.html">← 返回首页</a>
|
||||
<div class="avatar">管</div>
|
||||
<span>系统管理员 ▾</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- 侧边栏 -->
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">异常事件</div>
|
||||
<a href="ano-dirty.html" class="sidebar-item active"><span class="mi">🗑️</span>系统脏数据</a>
|
||||
<a href="ano-result.html" class="sidebar-item"><span class="mi">❌</span>结果异常</a>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容区 -->
|
||||
<div class="main">
|
||||
|
||||
<!-- 统计卡片 -->
|
||||
<div class="stats-row">
|
||||
<div class="stat-card">
|
||||
<div class="stat-card__icon orange">🗑️</div>
|
||||
<div class="stat-card__info">
|
||||
<div class="stat-card__value">28</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">20</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">8</div>
|
||||
<div class="stat-card__label">待处理</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 筛选栏 -->
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item">
|
||||
<label>来源模块</label>
|
||||
<select class="filter-select">
|
||||
<option>全部</option>
|
||||
<option>营养用餐</option>
|
||||
<option>卫生供应</option>
|
||||
<option>人员健康</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>数据类型</label>
|
||||
<select class="filter-select">
|
||||
<option>全部</option>
|
||||
<option>格式错误</option>
|
||||
<option>缺失值</option>
|
||||
<option>重复数据</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>处理状态</label>
|
||||
<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"><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>记录ID</th>
|
||||
<th>来源模块</th>
|
||||
<th>数据类型</th>
|
||||
<th>问题描述</th>
|
||||
<th>影响范围</th>
|
||||
<th>发现时间</th>
|
||||
<th>处理状态</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>DIRTY-001</td>
|
||||
<td>营养用餐</td>
|
||||
<td>格式错误</td>
|
||||
<td>员工EMP0234营养摄入值为负数</td>
|
||||
<td>1条记录</td>
|
||||
<td>2026-04-15 08:30</td>
|
||||
<td><span class="tag tag-orange">待处理</span></td>
|
||||
<td><a class="link">查看</a> <a class="link">修正</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>DIRTY-002</td>
|
||||
<td>卫生供应</td>
|
||||
<td>缺失值</td>
|
||||
<td>采购单食材重量字段为空</td>
|
||||
<td>1条记录</td>
|
||||
<td>2026-04-14 16:20</td>
|
||||
<td><span class="tag tag-green">已修正</span></td>
|
||||
<td><a class="link">查看</a> <a class="link">修正</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>DIRTY-003</td>
|
||||
<td>人员健康</td>
|
||||
<td>重复数据</td>
|
||||
<td>员工EMP0156今日就餐记录重复录入</td>
|
||||
<td>2条记录</td>
|
||||
<td>2026-04-15 12:05</td>
|
||||
<td><span class="tag tag-gray">已忽略</span></td>
|
||||
<td><a class="link">查看</a> <a class="link">修正</a></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<!-- 分页 -->
|
||||
<div class="pagination">
|
||||
<span>显示 3 条，共 28 条</span>
|
||||
<button class="page-btn">‹</button>
|
||||
<button class="page-btn active">1</button>
|
||||
<button class="page-btn">2</button>
|
||||
<button class="page-btn">3</button>
|
||||
<button class="page-btn">›</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,239 @@
|
||||
<!DOCTYPE html>
|
||||
<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;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#F5F7FA;color:#333;min-width:1280px;}
|
||||
:root{
|
||||
--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;
|
||||
--text-primary:#333;--text-secondary:#666;--text-placeholder:#999;--border:#E8E8E8;--background:#F5F7FA;
|
||||
--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--font-xxl:24px;
|
||||
--radius-sm:4px;--radius-md:8px;--radius-lg:12px;
|
||||
--shadow-sm:0 1px 4px rgba(0,0,0,0.08);--shadow-md:0 4px 12px rgba(0,0,0,0.12);
|
||||
}
|
||||
|
||||
/* 通用布局 */
|
||||
.top-bar{display:flex;align-items:center;height:56px;background:#001529;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;}
|
||||
.top-bar__logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:var(--font-lg);font-weight:600;white-space:nowrap;width:240px;flex-shrink:0;}
|
||||
.top-bar__logo svg{width:28px;height:28px;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.top-bar__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.top-bar__right .btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.top-bar__right .btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);cursor:pointer;}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;text-transform:uppercase;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.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;}
|
||||
.action-bar{display:flex;align-items:center;gap:8px;margin-bottom:16px;}
|
||||
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;min-height:calc(100vh - 56px);}
|
||||
.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-select{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);color:var(--text-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='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;cursor:pointer;min-width:120px;}
|
||||
.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;}
|
||||
.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);}
|
||||
.tag-orange{background:#FFF7E6;color:var(--warning);}
|
||||
.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;}
|
||||
.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);}
|
||||
|
||||
/* 统计卡片 */
|
||||
.stats-row{display:grid;grid-template-columns:repeat(2,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;}
|
||||
.stat-card__icon.blue{background:var(--primary-light);}
|
||||
.stat-card__icon.green{background:#F6FFED;}
|
||||
.stat-card__icon.orange{background:#FFF7E6;}
|
||||
.stat-card__icon.red{background:#FFF1F0;}
|
||||
.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);}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- 顶部导航 -->
|
||||
<header class="top-bar">
|
||||
<div class="top-bar__logo">
|
||||
<svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M7 14h14M14 7v14" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/></svg>
|
||||
营养管理
|
||||
</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="trace-query.html">溯源总览</a>
|
||||
<a href="arc-employee.html">档案</a>
|
||||
<a href="farm-land.html">绿色种采</a>
|
||||
<a href="sup-hygiene-check.html">卫生供应</a>
|
||||
<a href="prod-qc-daily.html">健康生产</a>
|
||||
<a href="din-dict-mgmt.html">营养用餐</a>
|
||||
<a href="ano-dirty.html" class="active">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<a class="btn-back" href="../../index.html">← 返回首页</a>
|
||||
<div class="avatar">管</div>
|
||||
<span>系统管理员 ▾</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- 侧边栏 -->
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">异常事件</div>
|
||||
<a href="ano-dirty.html" class="sidebar-item"><span class="mi">🗑️</span>系统脏数据</a>
|
||||
<a href="ano-result.html" class="sidebar-item active"><span class="mi">❌</span>结果异常</a>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容区 -->
|
||||
<div class="main">
|
||||
|
||||
<!-- 统计卡片 -->
|
||||
<div class="stats-row">
|
||||
<div class="stat-card">
|
||||
<div class="stat-card__icon red">❌</div>
|
||||
<div class="stat-card__info">
|
||||
<div class="stat-card__value">12</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">8</div>
|
||||
<div class="stat-card__label">已溯源</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 筛选栏 -->
|
||||
<div class="filter-bar">
|
||||
<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>
|
||||
</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"><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>异常ID</th>
|
||||
<th>异常类型</th>
|
||||
<th>触发场景</th>
|
||||
<th>异常描述</th>
|
||||
<th>严重程度</th>
|
||||
<th>算法版本</th>
|
||||
<th>发现时间</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>ERR-001</td>
|
||||
<td>营养值异常</td>
|
||||
<td>营养计算</td>
|
||||
<td>员工EMP0234午餐热量计算结果为0kcal</td>
|
||||
<td><span class="tag tag-red">高</span></td>
|
||||
<td>v2.3.1</td>
|
||||
<td>2026-04-15 12:30</td>
|
||||
<td><a class="link">查看</a> <a class="link">溯源</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>ERR-002</td>
|
||||
<td>推荐结果为空</td>
|
||||
<td>菜品推荐</td>
|
||||
<td>员工EMP0456个性化推荐返回空列表</td>
|
||||
<td><span class="tag tag-orange">中</span></td>
|
||||
<td>v1.8.0</td>
|
||||
<td>2026-04-15 11:45</td>
|
||||
<td><a class="link">查看</a> <a class="link">溯源</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>ERR-003</td>
|
||||
<td>营养值超范围</td>
|
||||
<td>营养计算</td>
|
||||
<td>某菜品钠含量计算结果为99999mg</td>
|
||||
<td><span class="tag tag-red">高</span></td>
|
||||
<td>v2.3.1</td>
|
||||
<td>2026-04-15 10:20</td>
|
||||
<td><a class="link">查看</a> <a class="link">溯源</a></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<!-- 分页 -->
|
||||
<div class="pagination">
|
||||
<span>显示 3 条，共 12 条</span>
|
||||
<button class="page-btn">‹</button>
|
||||
<button class="page-btn active">1</button>
|
||||
<button class="page-btn">2</button>
|
||||
<button class="page-btn">3</button>
|
||||
<button class="page-btn">›</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,362 @@
|
||||
<!DOCTYPE html>
|
||||
<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;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#F5F7FA;color:#333;min-width:1280px;}
|
||||
:root{
|
||||
--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;
|
||||
--text-primary:#333;--text-secondary:#666;--text-placeholder:#999;--border:#E8E8E8;--background:#F5F7FA;
|
||||
--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--font-xxl:24px;
|
||||
--radius-sm:4px;--radius-md:8px;--radius-lg:12px;
|
||||
--shadow-sm:0 1px 4px rgba(0,0,0,0.08);--shadow-md:0 4px 12px rgba(0,0,0,0.12);
|
||||
}
|
||||
|
||||
/* 顶部导航栏 */
|
||||
.top-bar{display:flex;align-items:center;height:56px;background:#001529;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;}
|
||||
.top-bar__logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:var(--font-lg);font-weight:600;white-space:nowrap;width:240px;flex-shrink:0;}
|
||||
.top-bar__logo svg{width:28px;height:28px;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.top-bar__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.top-bar__right .btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.top-bar__right .btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);cursor:pointer;}
|
||||
|
||||
/* 侧边栏 */
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;text-transform:uppercase;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.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);}
|
||||
|
||||
/* 统计卡片行 */
|
||||
.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;}
|
||||
.stat-card__icon.blue{background:var(--primary-light);}
|
||||
.stat-card__icon.green{background:#F6FFED;}
|
||||
.stat-card__icon.orange{background:#FFF7E6;}
|
||||
.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);}
|
||||
|
||||
/* 筛选栏 */
|
||||
.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:200px;}
|
||||
.filter-input:focus{border-color:var(--primary);}
|
||||
.filter-select{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);color:var(--text-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='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;cursor:pointer;min-width:120px;}
|
||||
|
||||
/* 按钮 */
|
||||
.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);}
|
||||
.tag-orange{background:#FFF7E6;color:var(--warning);}
|
||||
.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;}
|
||||
|
||||
/* 分页 */
|
||||
.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;}
|
||||
.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>
|
||||
|
||||
<!-- 顶部导航栏 -->
|
||||
<div class="top-bar">
|
||||
<div class="top-bar__logo">
|
||||
<svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M7 14h14M14 7v14" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/></svg>
|
||||
营养管理
|
||||
</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="trace-query.html">溯源总览</a>
|
||||
<a href="arc-employee.html" class="active">档案</a>
|
||||
<a href="farm-land.html">绿色种采</a>
|
||||
<a href="sup-hygiene-check.html">卫生供应</a>
|
||||
<a href="prod-qc-daily.html">健康生产</a>
|
||||
<a href="din-dict-mgmt.html">营养用餐</a>
|
||||
<a href="ano-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<a class="btn-back" href="../../index.html">← 返回首页</a>
|
||||
<div class="avatar">管</div>
|
||||
<span>系统管理员 ▾</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 侧边栏 -->
|
||||
<div class="sidebar">
|
||||
<div class="sidebar-menu__title">档案</div>
|
||||
<a class="sidebar-item" href="arc-employee.html"><span class="mi">👤</span>员工营养数据</a>
|
||||
<a class="sidebar-item" href="arc-unit.html"><span class="mi">🏢</span>单位报表数据</a>
|
||||
<a class="sidebar-item active" href="arc-algo.html"><span class="mi">🤖</span>算法模型</a>
|
||||
</div>
|
||||
|
||||
<!-- 主内容区 -->
|
||||
<div class="main">
|
||||
|
||||
<!-- 统计卡片 -->
|
||||
<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">3</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">12</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">91.2%</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">48ms</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>营养计算</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" onclick="openModal()">➕ 新增版本</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>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>营养摄入计算模型</td>
|
||||
<td>v2.3.1</td>
|
||||
<td>营养计算</td>
|
||||
<td>2026-02-15</td>
|
||||
<td>93.5%</td>
|
||||
<td>32ms</td>
|
||||
<td><span class="tag tag-green">运行中</span></td>
|
||||
<td><a class="link" onclick="openModal()">查看详情</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>个性化推荐引擎</td>
|
||||
<td>v1.8.0</td>
|
||||
<td>菜品推荐</td>
|
||||
<td>2026-01-20</td>
|
||||
<td>88.7%</td>
|
||||
<td>65ms</td>
|
||||
<td><span class="tag tag-green">运行中</span></td>
|
||||
<td><a class="link" onclick="openModal()">查看详情</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>慢病风险评估模型</td>
|
||||
<td>v1.2.4</td>
|
||||
<td>慢病预警</td>
|
||||
<td>2025-12-01</td>
|
||||
<td>91.2%</td>
|
||||
<td>48ms</td>
|
||||
<td><span class="tag tag-green">运行中</span></td>
|
||||
<td><a class="link" onclick="openModal()">查看详情</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>营养摄入计算模型</td>
|
||||
<td>v2.2.0</td>
|
||||
<td>营养计算</td>
|
||||
<td>2025-10-10</td>
|
||||
<td>90.1%</td>
|
||||
<td>38ms</td>
|
||||
<td><span class="tag tag-gray">已停用</span></td>
|
||||
<td><a class="link" onclick="openModal()">查看详情</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>个性化推荐引擎</td>
|
||||
<td>v1.7.2</td>
|
||||
<td>菜品推荐</td>
|
||||
<td>2025-09-05</td>
|
||||
<td>85.3%</td>
|
||||
<td>72ms</td>
|
||||
<td><span class="tag tag-gray">已停用</span></td>
|
||||
<td><a class="link" onclick="openModal()">查看详情</a></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<!-- 分页 -->
|
||||
<div class="pagination">
|
||||
<span>显示 5 条，共 12 条</span>
|
||||
<button class="page-btn">‹</button>
|
||||
<button class="page-btn active">1</button>
|
||||
<button class="page-btn">2</button>
|
||||
<button class="page-btn">3</button>
|
||||
<button class="page-btn">›</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- 新增算法版本弹窗 -->
|
||||
<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>
|
||||
<input type="text" placeholder="请输入模型名称">
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<label>版本号<span class="required">*</span></label>
|
||||
<input type="text" placeholder="请输入版本号">
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<label>适用场景</label>
|
||||
<select><option value="">请选择</option><option>营养计算</option><option>菜品推荐</option><option>慢病预警</option><option>指标监测</option></select>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<label>上线时间</label>
|
||||
<input type="date">
|
||||
</div>
|
||||
<div class="form-item full">
|
||||
<label>模型描述</label>
|
||||
<textarea placeholder="请输入模型描述"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="btn btn-default" onclick="closeModal()">取消</button>
|
||||
<button class="btn btn-primary">确定</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 侧边栏交互脚本 -->
|
||||
<script>
|
||||
/* 模态弹窗控制 */
|
||||
function openModal(){document.getElementById('modalOverlay').style.display='flex';}
|
||||
function closeModal(){document.getElementById('modalOverlay').style.display='none';}
|
||||
document.getElementById('modalOverlay').addEventListener('click',function(e){if(e.target===this)closeModal();});
|
||||
/* 侧边栏当前页高亮 */
|
||||
(function(){
|
||||
var items = document.querySelectorAll('.sidebar-item');
|
||||
var current = location.pathname.split('/').pop();
|
||||
items.forEach(function(item){
|
||||
var href = item.getAttribute('href');
|
||||
if(href === current){
|
||||
item.classList.add('active');
|
||||
} else if(!item.classList.contains('active')){
|
||||
item.classList.remove('active');
|
||||
}
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,363 @@
|
||||
<!DOCTYPE html>
|
||||
<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;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#F5F7FA;color:#333;min-width:1280px;}
|
||||
:root{
|
||||
--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;
|
||||
--text-primary:#333;--text-secondary:#666;--text-placeholder:#999;--border:#E8E8E8;--background:#F5F7FA;
|
||||
--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--font-xxl:24px;
|
||||
--radius-sm:4px;--radius-md:8px;--radius-lg:12px;
|
||||
--shadow-sm:0 1px 4px rgba(0,0,0,0.08);--shadow-md:0 4px 12px rgba(0,0,0,0.12);
|
||||
}
|
||||
|
||||
/* 通用布局 */
|
||||
.top-bar{display:flex;align-items:center;height:56px;background:#001529;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;}
|
||||
.top-bar__logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:var(--font-lg);font-weight:600;white-space:nowrap;width:240px;flex-shrink:0;}
|
||||
.top-bar__logo svg{width:28px;height:28px;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.top-bar__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.top-bar__right .btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.top-bar__right .btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);cursor:pointer;}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;text-transform:uppercase;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.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);}
|
||||
.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:200px;}
|
||||
.filter-input:focus{border-color:var(--primary);}
|
||||
.filter-select{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);color:var(--text-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='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;cursor:pointer;min-width:120px;}
|
||||
.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);}
|
||||
.btn-danger{background:#fff;color:var(--danger);border:1px solid var(--danger);}.btn-danger:hover{background:#fff1f0;}
|
||||
.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;}
|
||||
.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);}
|
||||
.tag-orange{background:#FFF7E6;color:var(--warning);}
|
||||
.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;}
|
||||
.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);}
|
||||
|
||||
/* 统计卡片 */
|
||||
.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;}
|
||||
.stat-card__icon.blue{background:var(--primary-light);}
|
||||
.stat-card__icon.green{background:#F6FFED;}
|
||||
.stat-card__icon.orange{background:#FFF7E6;}
|
||||
.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);}
|
||||
|
||||
/* 操作栏 */
|
||||
.action-bar{display:flex;align-items:center;gap:8px;margin-bottom:16px;}
|
||||
/* 模态弹窗 */
|
||||
.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:520px;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;}
|
||||
.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>
|
||||
|
||||
<!-- 顶部导航 -->
|
||||
<header class="top-bar">
|
||||
<div class="top-bar__logo">
|
||||
<svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M7 14h14M14 7v14" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/></svg>
|
||||
营养管理
|
||||
</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="trace-query.html">溯源总览</a>
|
||||
<a href="arc-employee.html" class="active">档案</a>
|
||||
<a href="farm-land.html">绿色种采</a>
|
||||
<a href="sup-hygiene-check.html">卫生供应</a>
|
||||
<a href="prod-qc-daily.html">健康生产</a>
|
||||
<a href="din-dict-mgmt.html">营养用餐</a>
|
||||
<a href="ano-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<a class="btn-back" href="../../index.html">← 返回首页</a>
|
||||
<div class="avatar">管</div>
|
||||
<span>系统管理员 ▾</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- 侧边栏 -->
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">档案</div>
|
||||
<a class="sidebar-item active" href="arc-employee.html"><span class="mi">👤</span>员工营养数据</a>
|
||||
<a class="sidebar-item" href="arc-unit.html"><span class="mi">🏢</span>单位报表数据</a>
|
||||
<a class="sidebar-item" href="arc-algo.html"><span class="mi">🤖</span>算法模型</a>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容区 -->
|
||||
<div class="main">
|
||||
|
||||
<!-- 统计卡片 -->
|
||||
<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">1,280</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">38,400</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">12个月</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">2.4GB</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>研发部</option>
|
||||
<option>市场部</option>
|
||||
<option>运营部</option>
|
||||
<option>财务部</option>
|
||||
<option>人事部</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>时间范围</label>
|
||||
<input class="filter-input" type="date">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>营养素类型</label>
|
||||
<select class="filter-select">
|
||||
<option>全部</option>
|
||||
<option>热量</option>
|
||||
<option>蛋白质</option>
|
||||
<option>脂肪</option>
|
||||
<option>碳水</option>
|
||||
</select>
|
||||
</div>
|
||||
<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>
|
||||
<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>热量均值(kcal)</th>
|
||||
<th>蛋白质均值(g)</th>
|
||||
<th>脂肪均值(g)</th>
|
||||
<th>碳水均值(g)</th>
|
||||
<th>数据完整度</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>EMP001</td>
|
||||
<td>张伟</td>
|
||||
<td>研发部</td>
|
||||
<td>2026-03</td>
|
||||
<td>2,156</td>
|
||||
<td>78.3</td>
|
||||
<td>72.1</td>
|
||||
<td>285.4</td>
|
||||
<td><span class="tag tag-green">98%</span></td>
|
||||
<td><a class="link" onclick="openModal()">查看详情</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>EMP002</td>
|
||||
<td>李娜</td>
|
||||
<td>市场部</td>
|
||||
<td>2026-03</td>
|
||||
<td>1,842</td>
|
||||
<td>65.2</td>
|
||||
<td>58.7</td>
|
||||
<td>241.3</td>
|
||||
<td><span class="tag tag-green">95%</span></td>
|
||||
<td><a class="link" onclick="openModal()">查看详情</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>EMP003</td>
|
||||
<td>王磊</td>
|
||||
<td>运营部</td>
|
||||
<td>2026-03</td>
|
||||
<td>2,380</td>
|
||||
<td>85.6</td>
|
||||
<td>89.2</td>
|
||||
<td>312.1</td>
|
||||
<td><span class="tag tag-orange">87%</span></td>
|
||||
<td><a class="link" onclick="openModal()">查看详情</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>EMP004</td>
|
||||
<td>赵敏</td>
|
||||
<td>财务部</td>
|
||||
<td>2026-03</td>
|
||||
<td>1,720</td>
|
||||
<td>58.4</td>
|
||||
<td>52.3</td>
|
||||
<td>228.6</td>
|
||||
<td><span class="tag tag-green">100%</span></td>
|
||||
<td><a class="link" onclick="openModal()">查看详情</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>EMP005</td>
|
||||
<td>陈刚</td>
|
||||
<td>人事部</td>
|
||||
<td>2026-03</td>
|
||||
<td>2,050</td>
|
||||
<td>72.1</td>
|
||||
<td>68.4</td>
|
||||
<td>270.2</td>
|
||||
<td><span class="tag tag-orange">76%</span></td>
|
||||
<td><a class="link" onclick="openModal()">查看详情</a></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<!-- 分页 -->
|
||||
<div class="pagination">
|
||||
<span>显示 5 条，共 1,280 条</span>
|
||||
<button class="page-btn">‹</button>
|
||||
<button class="page-btn active">1</button>
|
||||
<button class="page-btn">2</button>
|
||||
<button class="page-btn">3</button>
|
||||
<button class="page-btn">...</button>
|
||||
<button class="page-btn">256</button>
|
||||
<button class="page-btn">›</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- 员工营养数据弹窗 -->
|
||||
<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>
|
||||
<input type="text" placeholder="请输入员工工号">
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<label>姓名<span class="required">*</span></label>
|
||||
<input type="text" placeholder="请输入姓名">
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<label>部门</label>
|
||||
<select><option>请选择</option><option>研发部</option><option>市场部</option><option>运营部</option><option>财务部</option><option>人事部</option></select>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<label>归档周期</label>
|
||||
<input type="date">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="btn btn-default" onclick="closeModal()">取消</button>
|
||||
<button class="btn btn-primary">确定</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 侧边栏交互脚本 -->
|
||||
<script>
|
||||
// 模态弹窗控制
|
||||
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('.sidebar-item').forEach(function(item) {
|
||||
item.addEventListener('click', function() {
|
||||
document.querySelectorAll('.sidebar-item').forEach(function(i) { i.classList.remove('active'); });
|
||||
this.classList.add('active');
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,357 @@
|
||||
<!DOCTYPE html>
|
||||
<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;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#F5F7FA;color:#333;min-width:1280px;}
|
||||
:root{
|
||||
--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;
|
||||
--text-primary:#333;--text-secondary:#666;--text-placeholder:#999;--border:#E8E8E8;--background:#F5F7FA;
|
||||
--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--font-xxl:24px;
|
||||
--radius-sm:4px;--radius-md:8px;--radius-lg:12px;
|
||||
--shadow-sm:0 1px 4px rgba(0,0,0,0.08);--shadow-md:0 4px 12px rgba(0,0,0,0.12);
|
||||
}
|
||||
/* 顶部导航栏 */
|
||||
.top-bar{display:flex;align-items:center;height:56px;background:#001529;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;}
|
||||
.top-bar__logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:var(--font-lg);font-weight:600;white-space:nowrap;width:240px;flex-shrink:0;}
|
||||
.top-bar__logo svg{width:28px;height:28px;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.top-bar__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.top-bar__right .btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.top-bar__right .btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);cursor:pointer;}
|
||||
/* 侧边栏 */
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;text-transform:uppercase;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.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);}
|
||||
/* 统计卡片 */
|
||||
.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;}
|
||||
.stat-card__icon.blue{background:var(--primary-light);}
|
||||
.stat-card__icon.green{background:#F6FFED;}
|
||||
.stat-card__icon.orange{background:#FFF7E6;}
|
||||
.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);}
|
||||
/* 筛选栏 */
|
||||
.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:200px;}
|
||||
.filter-input:focus{border-color:var(--primary);}
|
||||
.filter-select{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);color:var(--text-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='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;cursor:pointer;min-width:120px;}
|
||||
/* 按钮 */
|
||||
.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);}
|
||||
.tag-orange{background:#FFF7E6;color:var(--warning);}
|
||||
.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;}
|
||||
/* 分页 */
|
||||
.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:520px;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;}
|
||||
.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>
|
||||
|
||||
<!-- 顶部导航栏 -->
|
||||
<div class="top-bar">
|
||||
<div class="top-bar__logo">
|
||||
<svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M7 14h14M14 7v14" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/></svg>
|
||||
营养管理
|
||||
</div>
|
||||
<div class="top-bar__nav">
|
||||
<a href="trace-query.html">溯源总览</a>
|
||||
<a href="arc-employee.html" class="active">档案</a>
|
||||
<a href="farm-land.html">绿色种采</a>
|
||||
<a href="sup-hygiene-check.html">卫生供应</a>
|
||||
<a href="prod-qc-daily.html">健康生产</a>
|
||||
<a href="din-dict-mgmt.html">营养用餐</a>
|
||||
<a href="ano-dirty.html">异常事件</a>
|
||||
</div>
|
||||
<div class="top-bar__right">
|
||||
<a class="btn-back" href="../../index.html">← 返回首页</a>
|
||||
<div class="avatar">管</div>
|
||||
<span>系统管理员 ▾</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 侧边栏 -->
|
||||
<div class="sidebar">
|
||||
<div class="sidebar-menu__title">档案</div>
|
||||
<a class="sidebar-item" href="arc-employee.html"><span class="mi">👤</span>员工营养数据</a>
|
||||
<a class="sidebar-item active" href="arc-unit.html"><span class="mi">🏢</span>单位报表数据</a>
|
||||
<a class="sidebar-item" href="arc-algo.html"><span class="mi">🤖</span>算法模型</a>
|
||||
</div>
|
||||
|
||||
<!-- 主内容区域 -->
|
||||
<div class="main">
|
||||
|
||||
<!-- 统计卡片 -->
|
||||
<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">12</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">36份</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">82.4%</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">今日</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>日报</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>
|
||||
<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>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>研发部</td>
|
||||
<td><span class="tag tag-blue">月报</span></td>
|
||||
<td>2026-03</td>
|
||||
<td>3,840</td>
|
||||
<td>88%</td>
|
||||
<td>85%</td>
|
||||
<td>79%</td>
|
||||
<td>2026-04-01</td>
|
||||
<td><a class="link" onclick="openModal()">查看详情</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>市场部</td>
|
||||
<td><span class="tag tag-blue">月报</span></td>
|
||||
<td>2026-03</td>
|
||||
<td>2,160</td>
|
||||
<td>82%</td>
|
||||
<td>78%</td>
|
||||
<td>83%</td>
|
||||
<td>2026-04-01</td>
|
||||
<td><a class="link" onclick="openModal()">查看详情</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>运营部</td>
|
||||
<td><span class="tag tag-gray">周报</span></td>
|
||||
<td>第14周</td>
|
||||
<td>960</td>
|
||||
<td>75%</td>
|
||||
<td>72%</td>
|
||||
<td>68%</td>
|
||||
<td>2026-04-07</td>
|
||||
<td><a class="link" onclick="openModal()">查看详情</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>财务部</td>
|
||||
<td><span class="tag tag-orange">季报</span></td>
|
||||
<td>2026-Q1</td>
|
||||
<td>1,440</td>
|
||||
<td>91%</td>
|
||||
<td>89%</td>
|
||||
<td>86%</td>
|
||||
<td>2026-04-01</td>
|
||||
<td><a class="link" onclick="openModal()">查看详情</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>人事部</td>
|
||||
<td><span class="tag tag-blue">月报</span></td>
|
||||
<td>2026-03</td>
|
||||
<td>720</td>
|
||||
<td>85%</td>
|
||||
<td>81%</td>
|
||||
<td>77%</td>
|
||||
<td>2026-04-01</td>
|
||||
<td><a class="link" onclick="openModal()">查看详情</a></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<!-- 分页 -->
|
||||
<div class="pagination">
|
||||
<span>显示 5 条，共 36 条</span>
|
||||
<button class="page-btn">‹</button>
|
||||
<button class="page-btn active">1</button>
|
||||
<button class="page-btn">2</button>
|
||||
<button class="page-btn">3</button>
|
||||
<button class="page-btn">›</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- 单位报表数据弹窗 -->
|
||||
<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>
|
||||
<input type="text" placeholder="请输入单位名称">
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<label>报表类型</label>
|
||||
<select><option>请选择</option><option>日报</option><option>周报</option><option>月报</option><option>季报</option></select>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<label>统计开始日期</label>
|
||||
<input type="date">
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<label>统计结束日期</label>
|
||||
<input type="date">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="btn btn-default" onclick="closeModal()">取消</button>
|
||||
<button class="btn btn-primary">确定</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 侧边栏交互脚本 -->
|
||||
<script>
|
||||
// 模态弹窗控制
|
||||
function openModal(){document.getElementById('modalOverlay').style.display='flex';}
|
||||
function closeModal(){document.getElementById('modalOverlay').style.display='none';}
|
||||
document.getElementById('modalOverlay').addEventListener('click',function(e){if(e.target===this)closeModal();});
|
||||
// 侧边栏当前页高亮
|
||||
(function(){
|
||||
var current = location.pathname.split('/').pop();
|
||||
document.querySelectorAll('.sidebar-item').forEach(function(item){
|
||||
var href = item.getAttribute('href');
|
||||
if(href === current){
|
||||
item.classList.add('active');
|
||||
} else {
|
||||
item.classList.remove('active');
|
||||
}
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,281 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>营养管理 - 人群基础标准 | 健康长庆原型</title>
|
||||
<style>
|
||||
*{box-sizing:border-box;margin:0;padding:0;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#F5F7FA;color:#333;min-width:1280px;}
|
||||
:root{
|
||||
--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;
|
||||
--text-primary:#333;--text-secondary:#666;--text-placeholder:#999;--border:#E8E8E8;--background:#F5F7FA;
|
||||
--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--font-xxl:24px;
|
||||
--radius-sm:4px;--radius-md:8px;--radius-lg:12px;
|
||||
--shadow-sm:0 1px 4px rgba(0,0,0,0.08);--shadow-md:0 4px 12px rgba(0,0,0,0.12);
|
||||
}
|
||||
.top-bar{display:flex;align-items:center;height:56px;background:#001529;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;}
|
||||
.top-bar__logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:var(--font-lg);font-weight:600;white-space:nowrap;width:240px;flex-shrink:0;}
|
||||
.top-bar__logo svg{width:28px;height:28px;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.top-bar__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.top-bar__right .btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.top-bar__right .btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);cursor:pointer;}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;text-transform:uppercase;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.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;}
|
||||
${CSS_RULE}
|
||||
.sidebar-subgroup__header{display:flex;align-items:center;gap:6px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;user-select:none;}
|
||||
.sidebar-subgroup__header:hover{color:rgba(255,255,255,0.85);background:rgba(255,255,255,0.04);}
|
||||
.sidebar-subgroup__header .arrow{width:10px;height:10px;transition:transform .2s;flex-shrink:0;}
|
||||
.sidebar-subgroup__header .arrow path{stroke:rgba(255,255,255,0.45);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header{color:rgba(255,255,255,0.85);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header .arrow{transform:rotate(90deg);}
|
||||
.sidebar-subgroup__body{display:none;padding-left:16px;}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__body{display:block;}
|
||||
.sidebar-subgroup__body .sidebar-item{padding-left:36px;font-size:12px;}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;min-height:calc(100vh - 56px);}
|
||||
.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;}
|
||||
.stat-card__icon.blue{background:var(--primary-light);}
|
||||
.stat-card__icon.green{background:#F6FFED;}
|
||||
.stat-card__icon.orange{background:#FFF7E6;}
|
||||
.stat-card__icon.red{background:#FFF1F0;}
|
||||
.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-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;}
|
||||
.filter-input:focus{border-color:var(--primary);}
|
||||
.filter-select{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);color:var(--text-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='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;cursor:pointer;min-width:120px;}
|
||||
.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;}
|
||||
.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);}
|
||||
.tag-orange{background:#FFF7E6;color:var(--warning);}
|
||||
.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;}
|
||||
.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);}
|
||||
.action-bar{display:flex;align-items:center;gap:8px;margin-bottom:16px;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- 顶部导航栏 -->
|
||||
<header class="top-bar">
|
||||
<div class="top-bar__logo">
|
||||
<svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M7 14h14M14 7v14" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/></svg>
|
||||
营养管理
|
||||
</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="trace-query.html">溯源总览</a>
|
||||
<a href="arc-employee.html">档案</a>
|
||||
<a href="farm-land.html">绿色种采</a>
|
||||
<a href="sup-hygiene-check.html">卫生供应</a>
|
||||
<a href="prod-qc-daily.html">健康生产</a>
|
||||
<a href="din-dict-mgmt.html" class="active">营养用餐</a>
|
||||
<a href="ano-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<a href="../../index.html" class="btn-back">← 返回首页</a>
|
||||
<div class="avatar">管</div>
|
||||
<span>系统管理员 ▾</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- 侧边栏 -->
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">营养用餐</div>
|
||||
<a href="din-dict-mgmt.html" class="sidebar-item"><span class="mi">📖</span>字典管理</a>
|
||||
<a href="prod-qc-nutrition.html" class="sidebar-item"><span class="mi">🔬</span>营养检验</a>
|
||||
<a href="din-ingredient.html" class="sidebar-item"><span class="mi">🥦</span>食物成分</a>
|
||||
<a href="din-dish-all.html" class="sidebar-item"><span class="mi">🍽️</span>餐品总库</a>
|
||||
<div class="sidebar-subgroup open">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 10 10" fill="none"><path d="M3 1l4 4-4 4" stroke-width="1.5"/></svg>
|
||||
📐 算法标准
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="din-algo-population.html" class="sidebar-item active"><span class="mi">👥</span>人群基础标准</a>
|
||||
<a href="din-algo-vip.html" class="sidebar-item"><span class="mi">💎</span>VIP定制标准</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="din-recipe-mgmt.html" class="sidebar-item"><span class="mi">📋</span>食谱管理</a>
|
||||
<a href="din-order-meal.html" class="sidebar-item"><span class="mi">🍱</span>营养点餐</a>
|
||||
<a href="din-user-mgmt.html" class="sidebar-item"><span class="mi">👤</span>用户管理</a>
|
||||
<a href="din-order-line.html" class="sidebar-item"><span class="mi">🍜</span>餐线管理</a>
|
||||
<a href="din-order-pickup.html" class="sidebar-item"><span class="mi">🎫</span>取餐管理</a>
|
||||
<a href="din-data-consume.html" class="sidebar-item"><span class="mi">💳</span>消费管理</a>
|
||||
<a href="din-data-nutri.html" class="sidebar-item"><span class="mi">📊</span>营养管理</a>
|
||||
<a href="din-data-benefit.html" class="sidebar-item"><span class="mi">📈</span>餐材效益</a>
|
||||
<a href="din-terminal.html" class="sidebar-item"><span class="mi">🖥️</span>终端管理</a>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 10 10" fill="none"><path d="M3 1l4 4-4 4" stroke-width="1.5"/></svg>
|
||||
🤖 模型管理
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="din-model-llm.html" class="sidebar-item"><span class="mi">🧠</span>大模型管理</a>
|
||||
<a href="din-model-small.html" class="sidebar-item"><span class="mi">⚙️</span>小模型管理</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="din-innovation.html" class="sidebar-item"><span class="mi">🌟</span>味养创新</a>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容 -->
|
||||
<main class="main">
|
||||
<!-- 统计卡片 -->
|
||||
<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">4类</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">5套</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">4套</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">90kcal/份</div><div class="stat-card__label">食物交换份</div></div></div>
|
||||
</div>
|
||||
|
||||
<!-- 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>
|
||||
|
||||
<!-- Tab1: 算法标准 -->
|
||||
<div class="tab-panel active">
|
||||
<div class="filter-bar">
|
||||
<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>
|
||||
</div>
|
||||
<div class="action-bar">
|
||||
<button class="btn btn-primary">✏️ 编辑标准</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>热量范围(kcal)</th><th>蛋白质比例(%)</th><th>脂肪比例(%)</th><th>碳水比例(%)</th><th>钙(mg)</th><th>铁(mg)</th><th>维生素C(mg)</th><th>膳食纤维(g)</th><th>每日饮水量(mL)</th><th>操作</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td>成人男性</td><td>2,200 - 2,600</td><td>15</td><td>30</td><td>55</td><td>800</td><td>12</td><td>100</td><td>25</td><td>1,500</td><td><span class="link">编辑</span></td></tr>
|
||||
<tr><td>成人女性</td><td>1,800 - 2,200</td><td>15</td><td>30</td><td>55</td><td>800</td><td>12</td><td>100</td><td>25</td><td>1,500</td><td><span class="link">编辑</span></td></tr>
|
||||
<tr><td>老年人</td><td>1,600 - 2,000</td><td>18</td><td>25</td><td>57</td><td>800</td><td>12</td><td>100</td><td>25</td><td>1,500</td><td><span class="link">编辑</span></td></tr>
|
||||
<tr><td>儿童</td><td>1,400 - 1,800</td><td>14</td><td>32</td><td>54</td><td>800</td><td>12</td><td>100</td><td>25</td><td>1,500</td><td><span class="link">编辑</span></td></tr>
|
||||
</tbody></table></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tab2: 个性化方案 -->
|
||||
<div class="tab-panel">
|
||||
<div class="filter-bar">
|
||||
<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><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">➕ 新增方案</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>BMI范围</th><th>每日热量(kcal)</th><th>交换份总数</th><th>状态</th><th>创建人</th><th>操作</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td>孕妇营养方案</td><td>孕妇</td><td>18.5-24.9</td><td>2,200</td><td>24份</td><td><span class="tag tag-green">已发布</span></td><td>营养师A</td><td><span class="link">编辑</span></td></tr>
|
||||
<tr><td>少儿营养方案</td><td>少儿</td><td>15-20</td><td>1,600</td><td>18份</td><td><span class="tag tag-green">已发布</span></td><td>营养师B</td><td><span class="link">编辑</span></td></tr>
|
||||
<tr><td>老人营养方案</td><td>老人</td><td>20-26.9</td><td>1,800</td><td>20份</td><td><span class="tag tag-green">已发布</span></td><td>营养师A</td><td><span class="link">编辑</span></td></tr>
|
||||
<tr><td>儿童营养方案</td><td>儿童</td><td>14-19</td><td>1,400</td><td>16份</td><td><span class="tag tag-green">已发布</span></td><td>营养师B</td><td><span class="link">编辑</span></td></tr>
|
||||
<tr><td>普通成人方案</td><td>普通成人</td><td>18.5-23.9</td><td>2,000</td><td>22份</td><td><span class="tag tag-green">已发布</span></td><td>营养师A</td><td><span class="link">编辑</span></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><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">➕ 新增大众方案</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>平均热量(kcal)</th><th>推荐覆盖率</th><th>状态</th><th>操作</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td>工厂标准方案</td><td>工厂</td><td>正餐/加班餐/夜宵</td><td>2,300</td><td>85%</td><td><span class="tag tag-green">已发布</span></td><td><span class="link">编辑</span></td></tr>
|
||||
<tr><td>院校大学方案</td><td>院校-大学</td><td>正餐</td><td>2,100</td><td>92%</td><td><span class="tag tag-green">已发布</span></td><td><span class="link">编辑</span></td></tr>
|
||||
<tr><td>院校中学方案</td><td>院校-中学</td><td>正餐</td><td>1,900</td><td>88%</td><td><span class="tag tag-green">已发布</span></td><td><span class="link">编辑</span></td></tr>
|
||||
<tr><td>院校小学方案</td><td>院校-小学</td><td>正餐</td><td>1,600</td><td>90%</td><td><span class="tag tag-green">已发布</span></td><td><span class="link">编辑</span></td></tr>
|
||||
</tbody></table></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 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><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">➕ 新增规则</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></tr></thead>
|
||||
<tbody>
|
||||
<tr><td>DR-001</td><td>智能手表步数</td><td>当日步数 ≥ 10000</td><td>热量</td><td>增加</td><td>+180kcal</td><td>全部用户</td><td><span class="tag tag-green">启用</span></td><td>高运动量补能</td><td><span class="link">编辑</span></td></tr>
|
||||
<tr><td>DR-002</td><td>体脂秤数据</td><td>体脂率连续7天上升</td><td>碳水化合物</td><td>减少</td><td>-12%</td><td>指定VIP用户</td><td><span class="tag tag-green">启用</span></td><td>控脂干预</td><td><span class="link">编辑</span></td></tr>
|
||||
<tr><td>DR-003</td><td>手动录入运动量</td><td>有氧运动 ≥ 60分钟</td><td>蛋白质</td><td>增加</td><td>+18g</td><td>成人用户</td><td><span class="tag tag-green">启用</span></td><td>运动后恢复</td><td><span class="link">编辑</span></td></tr>
|
||||
<tr><td>DR-004</td><td>智能手表步数</td><td>当日步数 < 3000</td><td>热量</td><td>减少</td><td>-120kcal</td><td>全部用户</td><td><span class="tag tag-gray">禁用</span></td><td>低活动日控能</td><td><span class="link">编辑</span></td></tr>
|
||||
</tbody></table></div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<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 toggleSubgroup(header){header.parentElement.classList.toggle('open');}
|
||||
(function(){var active=document.querySelector('.sidebar-item.active');if(!active)return;var sub=active.closest('.sidebar-subgroup');if(sub)sub.classList.add('open');})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,209 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>营养管理 - VIP定制标准 | 健康长庆原型</title>
|
||||
<style>
|
||||
*{box-sizing:border-box;margin:0;padding:0;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#F5F7FA;color:#333;min-width:1280px;}
|
||||
:root{
|
||||
--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;
|
||||
--text-primary:#333;--text-secondary:#666;--text-placeholder:#999;--border:#E8E8E8;--background:#F5F7FA;
|
||||
--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--font-xxl:24px;
|
||||
--radius-sm:4px;--radius-md:8px;--radius-lg:12px;
|
||||
--shadow-sm:0 1px 4px rgba(0,0,0,0.08);--shadow-md:0 4px 12px rgba(0,0,0,0.12);
|
||||
}
|
||||
.top-bar{display:flex;align-items:center;height:56px;background:#001529;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;}
|
||||
.top-bar__logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:var(--font-lg);font-weight:600;white-space:nowrap;width:240px;flex-shrink:0;}
|
||||
.top-bar__logo svg{width:28px;height:28px;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.top-bar__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.top-bar__right .btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.top-bar__right .btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);cursor:pointer;}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;text-transform:uppercase;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.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;}
|
||||
${CSS_RULE}
|
||||
.sidebar-subgroup__header{display:flex;align-items:center;gap:6px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;user-select:none;}
|
||||
.sidebar-subgroup__header:hover{color:rgba(255,255,255,0.85);background:rgba(255,255,255,0.04);}
|
||||
.sidebar-subgroup__header .arrow{width:10px;height:10px;transition:transform .2s;flex-shrink:0;}
|
||||
.sidebar-subgroup__header .arrow path{stroke:rgba(255,255,255,0.45);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header{color:rgba(255,255,255,0.85);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header .arrow{transform:rotate(90deg);}
|
||||
.sidebar-subgroup__body{display:none;padding-left:16px;}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__body{display:block;}
|
||||
.sidebar-subgroup__body .sidebar-item{padding-left:36px;font-size:12px;}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;min-height:calc(100vh - 56px);}
|
||||
.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;}
|
||||
.stat-card__icon.blue{background:var(--primary-light);}
|
||||
.stat-card__icon.green{background:#F6FFED;}
|
||||
.stat-card__icon.orange{background:#FFF7E6;}
|
||||
.stat-card__icon.red{background:#FFF1F0;}
|
||||
.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);}
|
||||
.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;}
|
||||
.filter-input:focus{border-color:var(--primary);}
|
||||
.filter-select{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);color:var(--text-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='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;cursor:pointer;min-width:120px;}
|
||||
.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;}
|
||||
.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);}
|
||||
.tag-orange{background:#FFF7E6;color:var(--warning);}
|
||||
.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;}
|
||||
.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);}
|
||||
.action-bar{display:flex;align-items:center;gap:8px;margin-bottom:16px;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- 顶部导航栏 -->
|
||||
<header class="top-bar">
|
||||
<div class="top-bar__logo">
|
||||
<svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M7 14h14M14 7v14" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/></svg>
|
||||
营养管理
|
||||
</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="trace-query.html">溯源总览</a>
|
||||
<a href="arc-employee.html">档案</a>
|
||||
<a href="farm-land.html">绿色种采</a>
|
||||
<a href="sup-hygiene-check.html">卫生供应</a>
|
||||
<a href="prod-qc-daily.html">健康生产</a>
|
||||
<a href="din-dict-mgmt.html" class="active">营养用餐</a>
|
||||
<a href="ano-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<a href="../../index.html" class="btn-back">← 返回首页</a>
|
||||
<div class="avatar">管</div>
|
||||
<span>系统管理员 ▾</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- 侧边栏 -->
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">营养用餐</div>
|
||||
<a href="din-dict-mgmt.html" class="sidebar-item"><span class="mi">📖</span>字典管理</a>
|
||||
<a href="prod-qc-nutrition.html" class="sidebar-item"><span class="mi">🔬</span>营养检验</a>
|
||||
<a href="din-ingredient.html" class="sidebar-item"><span class="mi">🥦</span>食物成分</a>
|
||||
<a href="din-dish-all.html" class="sidebar-item"><span class="mi">🍽️</span>餐品总库</a>
|
||||
<div class="sidebar-subgroup open">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 10 10" fill="none"><path d="M3 1l4 4-4 4" stroke-width="1.5"/></svg>
|
||||
📐 算法标准
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="din-algo-population.html" class="sidebar-item"><span class="mi">👥</span>人群基础标准</a>
|
||||
<a href="din-algo-vip.html" class="sidebar-item active"><span class="mi">💎</span>VIP定制标准</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="din-recipe-mgmt.html" class="sidebar-item"><span class="mi">📋</span>食谱管理</a>
|
||||
<a href="din-order-meal.html" class="sidebar-item"><span class="mi">🍱</span>营养点餐</a>
|
||||
<a href="din-user-mgmt.html" class="sidebar-item"><span class="mi">👤</span>用户管理</a>
|
||||
<a href="din-order-line.html" class="sidebar-item"><span class="mi">🍜</span>餐线管理</a>
|
||||
<a href="din-order-pickup.html" class="sidebar-item"><span class="mi">🎫</span>取餐管理</a>
|
||||
<a href="din-data-consume.html" class="sidebar-item"><span class="mi">💳</span>消费管理</a>
|
||||
<a href="din-data-nutri.html" class="sidebar-item"><span class="mi">📊</span>营养管理</a>
|
||||
<a href="din-data-benefit.html" class="sidebar-item"><span class="mi">📈</span>餐材效益</a>
|
||||
<a href="din-terminal.html" class="sidebar-item"><span class="mi">🖥️</span>终端管理</a>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 10 10" fill="none"><path d="M3 1l4 4-4 4" stroke-width="1.5"/></svg>
|
||||
🤖 模型管理
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="din-model-llm.html" class="sidebar-item"><span class="mi">🧠</span>大模型管理</a>
|
||||
<a href="din-model-small.html" class="sidebar-item"><span class="mi">⚙️</span>小模型管理</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="din-innovation.html" class="sidebar-item"><span class="mi">🌟</span>味养创新</a>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容 -->
|
||||
<main class="main">
|
||||
<!-- 统计卡片 -->
|
||||
<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">186</div><div class="stat-card__label">VIP定制人数</div></div></div>
|
||||
<div class="stat-card"><div class="stat-card__icon green">🎯</div><div class="stat-card__info"><div class="stat-card__value">82</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">54</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">50</div><div class="stat-card__label">慢病管理目标</div></div></div>
|
||||
</div>
|
||||
|
||||
<!-- 筛选栏 -->
|
||||
<div class="filter-bar">
|
||||
<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><option>控压（高血压）</option><option>术后康复</option></select></div>
|
||||
<div class="filter-item"><label>负责营养师</label><input class="filter-input" placeholder="请输入营养师姓名"></div>
|
||||
<button class="btn btn-primary">查询</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
</div>
|
||||
|
||||
<!-- 操作栏 -->
|
||||
<div class="action-bar">
|
||||
<button class="btn btn-primary">➕ 新增VIP定制标准</button>
|
||||
<button class="btn btn-default">📅 批量安排复评</button>
|
||||
</div>
|
||||
|
||||
<!-- 表格卡片 -->
|
||||
<div class="table-card">
|
||||
<div class="table-card__header">
|
||||
<div class="table-card__title">VIP定制标准</div>
|
||||
</div>
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead><tr><th>用户编号/姓名</th><th>定制目标类型</th><th>每日热量(kcal)</th><th>蛋白质目标(g)</th><th>脂肪目标(g)</th><th>碳水目标(g)</th><th>特殊限制项</th><th>制定营养师</th><th>生效日期</th><th>复评日期</th><th>操作</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td>VIP001/张明</td><td>减重</td><td>1650</td><td>95</td><td>45</td><td>170</td><td>禁高糖饮料</td><td>营养师李明</td><td>2026-04-01</td><td>2026-05-01</td><td><span class="link">编辑</span></td></tr>
|
||||
<tr><td>VIP002/刘芳</td><td>控糖（糖尿病）</td><td>1750</td><td>88</td><td>50</td><td>160</td><td>低GI优先</td><td>营养师王芳</td><td>2026-03-20</td><td>2026-04-25</td><td><span class="link">编辑</span></td></tr>
|
||||
<tr><td>VIP003/陈伟</td><td>增肌</td><td>2450</td><td>140</td><td>68</td><td>280</td><td>增加优质蛋白</td><td>营养师李明</td><td>2026-04-10</td><td>2026-05-10</td><td><span class="link">编辑</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>显示 3 条，共 186 条</span>
|
||||
<button class="page-btn">‹</button>
|
||||
<button class="page-btn active">1</button>
|
||||
<button class="page-btn">2</button>
|
||||
<button class="page-btn">3</button>
|
||||
<button class="page-btn">...</button>
|
||||
<button class="page-btn">62</button>
|
||||
<button class="page-btn">›</button>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<script>
|
||||
function toggleSubgroup(header){header.parentElement.classList.toggle('open');}
|
||||
(function(){var active=document.querySelector('.sidebar-item.active');if(!active)return;var sub=active.closest('.sidebar-subgroup');if(sub)sub.classList.add('open');})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,252 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>营养管理 - 餐材效益 | 健康长庆原型</title>
|
||||
<style>
|
||||
*{box-sizing:border-box;margin:0;padding:0;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#F5F7FA;color:#333;min-width:1280px;}
|
||||
:root{
|
||||
--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;
|
||||
--text-primary:#333;--text-secondary:#666;--text-placeholder:#999;--border:#E8E8E8;--background:#F5F7FA;
|
||||
--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--font-xxl:24px;
|
||||
--radius-sm:4px;--radius-md:8px;--radius-lg:12px;
|
||||
--shadow-sm:0 1px 4px rgba(0,0,0,0.08);--shadow-md:0 4px 12px rgba(0,0,0,0.12);
|
||||
}
|
||||
.top-bar{display:flex;align-items:center;height:56px;background:#001529;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;}
|
||||
.top-bar__logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:var(--font-lg);font-weight:600;white-space:nowrap;width:240px;flex-shrink:0;}
|
||||
.top-bar__logo svg{width:28px;height:28px;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.top-bar__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.top-bar__right .btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.top-bar__right .btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);cursor:pointer;}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;text-transform:uppercase;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.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;}
|
||||
${CSS_RULE}
|
||||
.sidebar-subgroup__header{display:flex;align-items:center;gap:6px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;user-select:none;}
|
||||
.sidebar-subgroup__header:hover{color:rgba(255,255,255,0.85);background:rgba(255,255,255,0.04);}
|
||||
.sidebar-subgroup__header .arrow{width:10px;height:10px;transition:transform .2s;flex-shrink:0;}
|
||||
.sidebar-subgroup__header .arrow path{stroke:rgba(255,255,255,0.45);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header{color:rgba(255,255,255,0.85);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header .arrow{transform:rotate(90deg);}
|
||||
.sidebar-subgroup__body{display:none;padding-left:16px;}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__body{display:block;}
|
||||
.sidebar-subgroup__body .sidebar-item{padding-left:36px;font-size:12px;}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;min-height:calc(100vh - 56px);}
|
||||
.stats-row{display:grid;grid-template-columns:repeat(3,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;}
|
||||
.stat-card__icon.blue{background:var(--primary-light);}
|
||||
.stat-card__icon.green{background:#F6FFED;}
|
||||
.stat-card__icon.orange{background:#FFF7E6;}
|
||||
.stat-card__icon.red{background:#FFF1F0;}
|
||||
.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-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;}
|
||||
.filter-input:focus{border-color:var(--primary);}
|
||||
.filter-select{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);color:var(--text-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='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;cursor:pointer;min-width:120px;}
|
||||
.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;}
|
||||
.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);}
|
||||
.tag-orange{background:#FFF7E6;color:var(--warning);}
|
||||
.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;}
|
||||
.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);}
|
||||
.action-bar{display:flex;align-items:center;gap:8px;margin-bottom:16px;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- 顶部导航 -->
|
||||
<header class="top-bar">
|
||||
<div class="top-bar__logo">
|
||||
<svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M7 14h14M14 7v14" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/></svg>
|
||||
营养管理
|
||||
</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="trace-query.html">溯源总览</a>
|
||||
<a href="arc-employee.html">档案</a>
|
||||
<a href="farm-land.html">绿色种采</a>
|
||||
<a href="sup-hygiene-check.html">卫生供应</a>
|
||||
<a href="prod-qc-daily.html">健康生产</a>
|
||||
<a href="din-dict-mgmt.html" class="active">营养用餐</a>
|
||||
<a href="ano-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<a href="../../index.html" class="btn-back">← 返回首页</a>
|
||||
<div class="avatar">管</div>
|
||||
<span>系统管理员 ▾</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- 侧边栏 -->
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">营养用餐</div>
|
||||
<a href="din-dict-mgmt.html" class="sidebar-item">字典管理</a>
|
||||
<a href="prod-qc-nutrition.html" class="sidebar-item">营养检验</a>
|
||||
<a href="din-ingredient.html" class="sidebar-item">食物成分</a>
|
||||
<a href="din-dish-all.html" class="sidebar-item">餐品总库</a>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 10 10" fill="none"><path d="M3 1l4 4-4 4" stroke-width="1.5"/></svg>
|
||||
算法标准
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="din-algo-population.html" class="sidebar-item">人群基础标准</a>
|
||||
<a href="din-algo-vip.html" class="sidebar-item">VIP定制标准</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="din-recipe-mgmt.html" class="sidebar-item">食谱管理</a>
|
||||
<a href="din-order-meal.html" class="sidebar-item">营养点餐</a>
|
||||
<a href="din-user-mgmt.html" class="sidebar-item">用户管理</a>
|
||||
<a href="din-order-line.html" class="sidebar-item">餐线管理</a>
|
||||
<a href="din-order-pickup.html" class="sidebar-item">取餐管理</a>
|
||||
<a href="din-data-consume.html" class="sidebar-item">消费管理</a>
|
||||
<a href="din-data-nutri.html" class="sidebar-item">营养管理</a>
|
||||
<a href="din-data-benefit.html" class="sidebar-item active">餐材效益</a>
|
||||
<a href="din-terminal.html" class="sidebar-item">终端管理</a>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 10 10" fill="none"><path d="M3 1l4 4-4 4" stroke-width="1.5"/></svg>
|
||||
模型管理
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="din-model-llm.html" class="sidebar-item">大模型管理</a>
|
||||
<a href="din-model-small.html" class="sidebar-item">小模型管理</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="din-innovation.html" class="sidebar-item">味养创新</a>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容 -->
|
||||
<main class="main">
|
||||
<!-- 统计卡片 -->
|
||||
<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">2026-04</div><div class="stat-card__label">统计周期</div></div></div>
|
||||
<div class="stat-card"><div class="stat-card__icon blue">💰</div><div class="stat-card__info"><div class="stat-card__value">¥26.4万</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">¥12.6万</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">¥1.5万</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">6项</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">毛利+4.8% / 损耗-0.9%</div><div class="stat-card__label">环比上月</div></div></div>
|
||||
</div>
|
||||
|
||||
<!-- Tab 切换栏 -->
|
||||
<div class="page-tabs">
|
||||
<div class="page-tab active" onclick="switchTab(0)">🥬 食材效益</div>
|
||||
<div class="page-tab" onclick="switchTab(1)">🍱 餐品效益</div>
|
||||
</div>
|
||||
|
||||
<!-- Tab0: 食材效益 -->
|
||||
<div class="tab-panel active">
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item"><label>统计开始日期</label><input class="filter-input" type="date"></div>
|
||||
<div class="filter-item"><label>统计结束日期</label><input class="filter-input" type="date"></div>
|
||||
<div class="filter-item"><label>食材分类</label><select class="filter-select"><option>全部</option><option>蔬菜类</option><option>肉禽类</option><option>水产类</option></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><select class="filter-select"><option>全部</option><option><5%</option><option>5%-10%</option><option>>10%</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>
|
||||
</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>
|
||||
<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>实际使用量(kg)</th><th>损耗量(kg)</th><th>损耗金额</th><th>损耗率</th><th>预警等级</th><th>损耗原因</th><th>操作</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td>2026-04-22</td><td>ING-001</td><td>大白菜</td><td>蔬菜类</td><td>绿源农业</td><td>620</td><td>¥1.8</td><td>¥1,116</td><td>605</td><td>15</td><td>¥27</td><td><span class="tag tag-green">2.4%</span></td><td><span class="tag tag-green">低</span></td><td>加工损耗</td><td><a class="link">损耗明细</a></td></tr>
|
||||
<tr><td>2026-04-22</td><td>ING-002</td><td>菠菜</td><td>蔬菜类</td><td>绿源农业</td><td>380</td><td>¥2.5</td><td>¥950</td><td>345</td><td>35</td><td>¥87.5</td><td><span class="tag tag-orange">9.2%</span></td><td><span class="tag tag-orange">中</span></td><td>储存变质</td><td><a class="link">损耗明细</a></td></tr>
|
||||
<tr><td>2026-04-21</td><td>ING-003</td><td>猪肉（五花）</td><td>肉禽类</td><td>旺旺肉业</td><td>480</td><td>¥26</td><td>¥12,480</td><td>462</td><td>18</td><td>¥468</td><td><span class="tag tag-green">3.8%</span></td><td><span class="tag tag-green">低</span></td><td>加工损耗</td><td><a class="link">损耗明细</a></td></tr>
|
||||
<tr><td>2026-04-21</td><td>ING-004</td><td>鸡胸肉</td><td>肉禽类</td><td>旺旺肉业</td><td>320</td><td>¥20</td><td>¥6,400</td><td>308</td><td>12</td><td>¥240</td><td><span class="tag tag-green">3.8%</span></td><td><span class="tag tag-green">低</span></td><td>加工损耗</td><td><a class="link">损耗明细</a></td></tr>
|
||||
<tr><td>2026-04-20</td><td>ING-005</td><td>鲫鱼</td><td>水产类</td><td>东海水产</td><td>280</td><td>¥24</td><td>¥6,720</td><td>248</td><td>32</td><td>¥768</td><td><span class="tag tag-red">11.4%</span></td><td><span class="tag tag-red">高</span></td><td>过期未用</td><td><a class="link">损耗明细</a></td></tr>
|
||||
<tr><td>2026-04-20</td><td>ING-006</td><td>虾仁</td><td>水产类</td><td>东海水产</td><td>120</td><td>¥68</td><td>¥8,160</td><td>116</td><td>4</td><td>¥272</td><td><span class="tag tag-green">3.3%</span></td><td><span class="tag tag-green">低</span></td><td>加工损耗</td><td><a class="link">损耗明细</a></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination"><span>显示 6 条，共 42 条</span><button class="page-btn">‹</button><button class="page-btn active">1</button><button class="page-btn">2</button><button class="page-btn">3</button><button class="page-btn">›</button></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tab1: 餐品效益 -->
|
||||
<div class="tab-panel">
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item"><label>统计开始日期</label><input class="filter-input" type="date"></div>
|
||||
<div class="filter-item"><label>统计结束日期</label><input class="filter-input" type="date"></div>
|
||||
<div class="filter-item"><label>餐次</label><select class="filter-select"><option>全部</option><option>早餐</option><option>午餐</option><option>晚餐</option></select></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>>50%</option><option>40%-50%</option><option><40%</option></select></div>
|
||||
<button class="btn btn-primary">🔍 查询</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>
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead><tr><th>餐品编号</th><th>餐品名称</th><th>所属餐次</th><th>菜品分类</th><th>总重(kg)</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></tr></thead>
|
||||
<tbody>
|
||||
<tr><td>DISH-001</td><td>糖醋里脊</td><td>午餐</td><td>荤菜</td><td>62.4kg</td><td>486人</td><td>520</td><td>¥6.2/kg</td><td>6.8</td><td>12.0</td><td>¥6,240</td><td>¥3,536</td><td>¥2,704</td><td><span class="tag tag-green">43.3%</span></td><td><span class="tag tag-green">+2.1%</span></td><td><span class="tag tag-green">3.9%</span></td><td><a class="link">食材成本明细</a></td></tr>
|
||||
<tr><td>DISH-002</td><td>蒜蓉西兰花</td><td>午餐</td><td>素菜</td><td>36.6kg</td><td>532人</td><td>610</td><td>¥1.8/kg</td><td>2.6</td><td>7.0</td><td>¥4,270</td><td>¥1,586</td><td>¥2,684</td><td><span class="tag tag-green">62.9%</span></td><td><span class="tag tag-green">+1.4%</span></td><td><span class="tag tag-orange">6.8%</span></td><td><a class="link">食材成本明细</a></td></tr>
|
||||
<tr><td>DISH-003</td><td>鱼香肉丝</td><td>午餐</td><td>荤菜</td><td>57.6kg</td><td>441人</td><td>480</td><td>¥5.4/kg</td><td>5.9</td><td>11.0</td><td>¥5,280</td><td>¥2,832</td><td>¥2,448</td><td><span class="tag tag-green">46.4%</span></td><td><span class="tag tag-orange">-0.8%</span></td><td><span class="tag tag-green">4.7%</span></td><td><a class="link">食材成本明细</a></td></tr>
|
||||
<tr><td>DISH-004</td><td>红烧肉</td><td>午餐</td><td>荤菜</td><td>50.4kg</td><td>405人</td><td>420</td><td>¥8.1/kg</td><td>7.6</td><td>13.0</td><td>¥5,460</td><td>¥3,192</td><td>¥2,268</td><td><span class="tag tag-blue">41.5%</span></td><td><span class="tag tag-orange">-1.2%</span></td><td><span class="tag tag-orange">5.9%</span></td><td><a class="link">食材成本明细</a></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination"><span>显示 4 条，共 28 条</span><button class="page-btn">‹</button><button class="page-btn active">1</button><button class="page-btn">2</button><button class="page-btn">3</button><button class="page-btn">›</button></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</main>
|
||||
|
||||
<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 toggleSubgroup(header){header.parentElement.classList.toggle('open');}
|
||||
(function(){var active=document.querySelector('.sidebar-item.active');if(!active)return;var sub=active.closest('.sidebar-subgroup');if(sub)sub.classList.add('open');})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,253 @@
|
||||
<!DOCTYPE html>
|
||||
<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;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#F5F7FA;color:#333;min-width:1280px;}
|
||||
:root{
|
||||
--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;
|
||||
--text-primary:#333;--text-secondary:#666;--text-placeholder:#999;--border:#E8E8E8;--background:#F5F7FA;
|
||||
--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--font-xxl:24px;
|
||||
--radius-sm:4px;--radius-md:8px;--radius-lg:12px;
|
||||
--shadow-sm:0 1px 4px rgba(0,0,0,0.08);--shadow-md:0 4px 12px rgba(0,0,0,0.12);
|
||||
}
|
||||
|
||||
/* 通用布局 */
|
||||
.top-bar{display:flex;align-items:center;height:56px;background:#001529;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;}
|
||||
.top-bar__logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:var(--font-lg);font-weight:600;white-space:nowrap;width:240px;flex-shrink:0;}
|
||||
.top-bar__logo svg{width:28px;height:28px;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.top-bar__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.top-bar__right .btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.top-bar__right .btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);cursor:pointer;}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;text-transform:uppercase;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.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;}
|
||||
${CSS_RULE}
|
||||
.sidebar-subgroup__header{display:flex;align-items:center;gap:6px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;user-select:none;}
|
||||
.sidebar-subgroup__header:hover{color:rgba(255,255,255,0.85);background:rgba(255,255,255,0.04);}
|
||||
.sidebar-subgroup__header .arrow{width:10px;height:10px;transition:transform .2s;flex-shrink:0;}
|
||||
.sidebar-subgroup__header .arrow path{stroke:rgba(255,255,255,0.45);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header{color:rgba(255,255,255,0.85);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header .arrow{transform:rotate(90deg);}
|
||||
.sidebar-subgroup__body{display:none;padding-left:16px;}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__body{display:block;}
|
||||
.sidebar-subgroup__body .sidebar-item{padding-left:36px;font-size:12px;}
|
||||
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;min-height:calc(100vh - 56px);}
|
||||
.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;}
|
||||
.stat-card__icon.blue{background:var(--primary-light);}
|
||||
.stat-card__icon.green{background:#F6FFED;}
|
||||
.stat-card__icon.orange{background:#FFF7E6;}
|
||||
.stat-card__icon.red{background:#FFF1F0;}
|
||||
.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);}
|
||||
.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:200px;}
|
||||
.filter-input:focus{border-color:var(--primary);}
|
||||
.filter-select{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);color:var(--text-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='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;cursor:pointer;min-width:120px;}
|
||||
.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;}
|
||||
.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);}
|
||||
.tag-orange{background:#FFF7E6;color:var(--warning);}
|
||||
.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;}
|
||||
.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);}
|
||||
.action-bar{display:flex;align-items:center;gap:8px;margin-bottom:16px;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- 顶部导航 -->
|
||||
<header class="top-bar">
|
||||
<div class="top-bar__logo">
|
||||
<svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M7 14h14M14 7v14" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/></svg>
|
||||
营养管理
|
||||
</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="trace-query.html">溯源总览</a>
|
||||
<a href="arc-employee.html">档案</a>
|
||||
<a href="farm-land.html">绿色种采</a>
|
||||
<a href="sup-hygiene-check.html">卫生供应</a>
|
||||
<a href="prod-qc-daily.html">健康生产</a>
|
||||
<a href="din-dict-mgmt.html" class="active">营养用餐</a>
|
||||
<a href="ano-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<a class="btn-back" href="../../index.html">← 返回首页</a>
|
||||
<div class="avatar">管</div>
|
||||
<span>系统管理员 ▾</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- 侧边栏 -->
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">营养用餐</div>
|
||||
<a href="din-dict-mgmt.html" class="sidebar-item"><span class="mi">📖</span>字典管理</a>
|
||||
<a href="prod-qc-nutrition.html" class="sidebar-item"><span class="mi">🔬</span>营养检验</a>
|
||||
<a href="din-ingredient.html" class="sidebar-item"><span class="mi">🥦</span>食物成分</a>
|
||||
<a href="din-dish-all.html" class="sidebar-item"><span class="mi">🍲</span>餐品总库</a>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 10 10" fill="none"><path d="M3 1l4 4-4 4" stroke-width="1.5"/></svg>
|
||||
📐 算法标准
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="din-algo-population.html" class="sidebar-item"><span class="mi">👥</span>人群基础标准</a>
|
||||
<a href="din-algo-vip.html" class="sidebar-item"><span class="mi">💎</span>VIP定制标准</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="din-recipe-mgmt.html" class="sidebar-item"><span class="mi">📋</span>食谱管理</a>
|
||||
<a href="din-order-meal.html" class="sidebar-item"><span class="mi">🛒</span>营养点餐</a>
|
||||
<a href="din-user-mgmt.html" class="sidebar-item"><span class="mi">🧑</span>用户管理</a>
|
||||
<a href="din-order-line.html" class="sidebar-item"><span class="mi">⚖️</span>餐线管理</a>
|
||||
<a href="din-order-pickup.html" class="sidebar-item"><span class="mi">🍽️</span>取餐管理</a>
|
||||
<a href="din-data-consume.html" class="sidebar-item active"><span class="mi">💰</span>消费管理</a>
|
||||
<a href="din-data-nutri.html" class="sidebar-item"><span class="mi">📊</span>营养管理</a>
|
||||
<a href="din-data-benefit.html" class="sidebar-item"><span class="mi">📈</span>餐材效益</a>
|
||||
<a href="din-terminal.html" class="sidebar-item"><span class="mi">🖥️</span>终端管理</a>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 10 10" fill="none"><path d="M3 1l4 4-4 4" stroke-width="1.5"/></svg>
|
||||
🤖 模型管理
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="din-model-llm.html" class="sidebar-item"><span class="mi">🧠</span>大模型管理</a>
|
||||
<a href="din-model-small.html" class="sidebar-item"><span class="mi">⚙️</span>小模型管理</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="din-innovation.html" class="sidebar-item"><span class="mi">🌟</span>味养创新</a>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容区 -->
|
||||
<div class="main">
|
||||
|
||||
<!-- 统计卡片 -->
|
||||
<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">¥3.26万</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">¥1,280</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">7笔</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">¥25.5</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>午餐消费</option><option>早餐消费</option><option>账户充值</option><option>退款</option></select></div>
|
||||
<div class="filter-item"><label>支付方式</label><select class="filter-select"><option>全部</option><option>余额支付</option><option>微信支付</option><option>原路退回</option></select></div>
|
||||
<div class="filter-item"><label>餐次</label><select class="filter-select"><option>全部</option><option>早餐</option><option>午餐</option><option>晚餐</option></select></div>
|
||||
<div class="filter-item"><label>订单来源</label><select class="filter-select"><option>全部</option><option>点餐</option><option>餐线</option><option>账户</option></select></div>
|
||||
<div class="filter-item"><label>支付状态</label><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></select></div>
|
||||
<div class="filter-item"><label>日期范围</label><input class="filter-input" type="date"></div>
|
||||
<div class="filter-item"><label>金额范围</label><input class="filter-input" type="text" placeholder="如 10-50" style="min-width:100px;"></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>
|
||||
<button class="btn btn-default">📊 消费报表</button>
|
||||
<button class="btn btn-default">🧮 日结对账</button>
|
||||
</div>
|
||||
|
||||
<!-- 数据表格 -->
|
||||
<div class="table-card">
|
||||
<div class="table-card__header">
|
||||
<div class="table-card__title">消费管理</div>
|
||||
</div>
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>流水号</th><th>员工</th><th>部门</th><th>订单来源</th><th>餐次</th><th>消费类型</th><th>消费金额</th><th>支付方式</th><th>支付状态</th><th>关联营养评分</th><th>账实一致</th><th>异常标签</th><th>日结状态</th><th>交易后余额</th><th>消费时间</th><th>操作</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>TX-20260421-001</td><td>张伟(EMP001)</td><td>研发部</td><td><span class="tag tag-blue">点餐</span></td><td>午餐</td><td>午餐消费</td><td><a class="link">¥22.00</a></td><td>余额支付</td><td><span class="tag tag-green">成功</span></td><td><span class="tag tag-green">88分</span></td><td><span class="tag tag-green">已对账</span></td><td>—</td><td><span class="tag tag-gray">已日结</span></td><td>¥234.50</td><td>11:02</td><td><a class="link">交易明细</a> <a class="link">餐品明细</a></td></tr>
|
||||
<tr><td>TX-20260421-002</td><td>李娜(EMP002)</td><td>市场部</td><td><span class="tag tag-blue">点餐</span></td><td>午餐</td><td>午餐消费</td><td><a class="link">¥18.00</a></td><td>余额支付</td><td><span class="tag tag-green">成功</span></td><td><span class="tag tag-green">92分</span></td><td><span class="tag tag-green">已对账</span></td><td>—</td><td><span class="tag tag-gray">已日结</span></td><td>¥86.20</td><td>11:08</td><td><a class="link">交易明细</a> <a class="link">餐品明细</a></td></tr>
|
||||
<tr><td>TX-20260421-003</td><td>王磊(EMP003)</td><td>运营部</td><td><span class="tag tag-gray">餐线</span></td><td>午餐</td><td>午餐消费</td><td><a class="link">¥28.00</a></td><td>微信支付</td><td><span class="tag tag-green">成功</span></td><td><span class="tag tag-orange">68分</span></td><td><span class="tag tag-orange">待对账</span></td><td><span class="tag tag-orange">短时多笔</span></td><td><span class="tag tag-orange">未日结</span></td><td>—</td><td>11:15</td><td><a class="link">交易明细</a> <a class="link">餐品明细</a></td></tr>
|
||||
<tr><td>TX-20260421-004</td><td>赵敏(EMP004)</td><td>财务部</td><td><span class="tag tag-blue">账户</span></td><td>—</td><td>账户充值</td><td>+¥100.00</td><td>微信支付</td><td><span class="tag tag-green">成功</span></td><td>—</td><td><span class="tag tag-green">已对账</span></td><td>—</td><td><span class="tag tag-gray">已日结</span></td><td>¥356.80</td><td>09:30</td><td><a class="link">交易明细</a> <a class="link">餐品明细</a></td></tr>
|
||||
<tr><td>TX-20260421-005</td><td>陈刚(EMP005)</td><td>人事部</td><td><span class="tag tag-gray">餐线</span></td><td>早餐</td><td>早餐消费</td><td><a class="link">¥12.00</a></td><td>余额支付</td><td><span class="tag tag-green">成功</span></td><td><span class="tag tag-green">85分</span></td><td><span class="tag tag-green">已对账</span></td><td>—</td><td><span class="tag tag-gray">已日结</span></td><td>¥142.60</td><td>07:45</td><td><a class="link">交易明细</a> <a class="link">餐品明细</a></td></tr>
|
||||
<tr><td>TX-20260421-006</td><td>刘芳(EMP006)</td><td>市场部</td><td><span class="tag tag-blue">点餐</span></td><td>午餐</td><td>退款</td><td>+¥18.00</td><td>原路退回</td><td><span class="tag tag-gray">已退款</span></td><td><span class="tag tag-orange">76分</span></td><td><span class="tag tag-red">差异</span></td><td><span class="tag tag-orange">退款频繁</span></td><td><span class="tag tag-orange">未日结</span></td><td>¥68.40</td><td>10:20</td><td><a class="link">交易明细</a> <a class="link">餐品明细</a></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>显示 6 条，共 1,280 条</span>
|
||||
<button class="page-btn">‹</button>
|
||||
<button class="page-btn active">1</button>
|
||||
<button class="page-btn">2</button>
|
||||
<button class="page-btn">3</button>
|
||||
<button class="page-btn">›</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- 交互脚本 -->
|
||||
<script>
|
||||
function toggleSubgroup(header){header.parentElement.classList.toggle('open');}
|
||||
(function(){var active=document.querySelector('.sidebar-item.active');if(!active)return;var sub=active.closest('.sidebar-subgroup');if(sub)sub.classList.add('open');})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,345 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>营养管理 - 营养管理 | 健康长庆原型</title>
|
||||
<style>
|
||||
*{box-sizing:border-box;margin:0;padding:0;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#F5F7FA;color:#333;min-width:1280px;}
|
||||
:root{
|
||||
--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;
|
||||
--text-primary:#333;--text-secondary:#666;--text-placeholder:#999;--border:#E8E8E8;--background:#F5F7FA;
|
||||
--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--font-xxl:24px;
|
||||
--radius-sm:4px;--radius-md:8px;--radius-lg:12px;
|
||||
--shadow-sm:0 1px 4px rgba(0,0,0,0.08);--shadow-md:0 4px 12px rgba(0,0,0,0.12);
|
||||
}
|
||||
.top-bar{display:flex;align-items:center;height:56px;background:#001529;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;}
|
||||
.top-bar__logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:var(--font-lg);font-weight:600;white-space:nowrap;width:240px;flex-shrink:0;}
|
||||
.top-bar__logo svg{width:28px;height:28px;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.top-bar__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.top-bar__right .btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.top-bar__right .btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);cursor:pointer;}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;text-transform:uppercase;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.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;}
|
||||
${CSS_RULE}
|
||||
.sidebar-subgroup__header{display:flex;align-items:center;gap:6px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;user-select:none;}
|
||||
.sidebar-subgroup__header:hover{color:rgba(255,255,255,0.85);background:rgba(255,255,255,0.04);}
|
||||
.sidebar-subgroup__header .arrow{width:10px;height:10px;transition:transform .2s;flex-shrink:0;}
|
||||
.sidebar-subgroup__header .arrow path{stroke:rgba(255,255,255,0.45);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header{color:rgba(255,255,255,0.85);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header .arrow{transform:rotate(90deg);}
|
||||
.sidebar-subgroup__body{display:none;padding-left:16px;}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__body{display:block;}
|
||||
.sidebar-subgroup__body .sidebar-item{padding-left:36px;font-size:12px;}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;min-height:calc(100vh - 56px);}
|
||||
.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;}
|
||||
.stat-card__icon.blue{background:var(--primary-light);}
|
||||
.stat-card__icon.green{background:#F6FFED;}
|
||||
.stat-card__icon.orange{background:#FFF7E6;}
|
||||
.stat-card__icon.red{background:#FFF1F0;}
|
||||
.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-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;}
|
||||
.filter-input:focus{border-color:var(--primary);}
|
||||
.filter-select{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);color:var(--text-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='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;cursor:pointer;min-width:120px;}
|
||||
.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;}
|
||||
.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);}
|
||||
.tag-orange{background:#FFF7E6;color:var(--warning);}
|
||||
.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;}
|
||||
.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);}
|
||||
.action-bar{display:flex;align-items:center;gap:8px;margin-bottom:16px;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- 顶部导航 -->
|
||||
<header class="top-bar">
|
||||
<div class="top-bar__logo">
|
||||
<svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M7 14h14M14 7v14" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/></svg>
|
||||
营养管理
|
||||
</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="trace-query.html">溯源总览</a>
|
||||
<a href="arc-employee.html">档案</a>
|
||||
<a href="farm-land.html">绿色种采</a>
|
||||
<a href="sup-hygiene-check.html">卫生供应</a>
|
||||
<a href="prod-qc-daily.html">健康生产</a>
|
||||
<a href="din-dict-mgmt.html" class="active">营养用餐</a>
|
||||
<a href="ano-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<a href="../../index.html" class="btn-back">← 返回首页</a>
|
||||
<div class="avatar">管</div>
|
||||
<span>系统管理员 ▾</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- 侧边栏 -->
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">营养用餐</div>
|
||||
<a href="din-dict-mgmt.html" class="sidebar-item">字典管理</a>
|
||||
<a href="prod-qc-nutrition.html" class="sidebar-item">营养检验</a>
|
||||
<a href="din-ingredient.html" class="sidebar-item">食物成分</a>
|
||||
<a href="din-dish-all.html" class="sidebar-item">餐品总库</a>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 10 10" fill="none"><path d="M3 1l4 4-4 4" stroke-width="1.5"/></svg>
|
||||
算法标准
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="din-algo-population.html" class="sidebar-item">人群基础标准</a>
|
||||
<a href="din-algo-vip.html" class="sidebar-item">VIP定制标准</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="din-recipe-mgmt.html" class="sidebar-item">食谱管理</a>
|
||||
<a href="din-order-meal.html" class="sidebar-item">营养点餐</a>
|
||||
<a href="din-user-mgmt.html" class="sidebar-item">用户管理</a>
|
||||
<a href="din-order-line.html" class="sidebar-item">餐线管理</a>
|
||||
<a href="din-order-pickup.html" class="sidebar-item">取餐管理</a>
|
||||
<a href="din-data-consume.html" class="sidebar-item">消费管理</a>
|
||||
<a href="din-data-nutri.html" class="sidebar-item active">营养管理</a>
|
||||
<a href="din-data-benefit.html" class="sidebar-item">餐材效益</a>
|
||||
<a href="din-terminal.html" class="sidebar-item">终端管理</a>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 10 10" fill="none"><path d="M3 1l4 4-4 4" stroke-width="1.5"/></svg>
|
||||
模型管理
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="din-model-llm.html" class="sidebar-item">大模型管理</a>
|
||||
<a href="din-model-small.html" class="sidebar-item">小模型管理</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="din-innovation.html" class="sidebar-item">味养创新</a>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容 -->
|
||||
<main class="main">
|
||||
<!-- 统计卡片 -->
|
||||
<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">946人</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">248人</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">38人</div><div class="stat-card__label">高风险人群</div></div></div>
|
||||
<div class="stat-card"><div class="stat-card__icon blue">📈</div><div class="stat-card__info"><div class="stat-card__value">81.2分</div><div class="stat-card__label">本周评分均值</div></div></div>
|
||||
</div>
|
||||
|
||||
<!-- 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>
|
||||
|
||||
<!-- Tab0: 餐次 -->
|
||||
<div class="tab-panel active">
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item"><label>员工姓名/工号</label><input class="filter-input" placeholder="请输入"></div>
|
||||
<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>早餐</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>
|
||||
<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>90-100</option><option>80-89</option><option>70-79</option><option>60-69</option><option><60</option></select></div>
|
||||
<div class="filter-item"><label>是否超标</label><select class="filter-select"><option>全部</option><option>是</option><option>否</option></select></div>
|
||||
<div class="filter-item"><label>营养等级</label><select class="filter-select"><option>全部</option><option>低</option><option>中</option><option>高</option></select></div>
|
||||
<div class="filter-item"><label>日期范围</label><input class="filter-input" type="date"></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>
|
||||
<button class="btn btn-default">📊 群体分析</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>实际热量(kcal)</th><th>推荐热量(kcal)</th><th>蛋白质(g)</th><th>脂肪(g)</th><th>碳水(g)</th><th>钠(mg)</th><th>对比昨日</th><th>营养评分</th><th>营养等级</th><th>异常预警</th><th>操作</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td>张伟(EMP001)</td><td>研发部</td><td>2026-04-28</td><td>午餐</td><td><span class="tag tag-blue">点餐</span></td><td>2,156</td><td>2,250</td><td>78.3</td><td>72.1</td><td>285.4</td><td>1,820</td><td><span class="tag tag-green">↑+2分</span></td><td><span class="tag tag-green">88分</span></td><td><span class="tag tag-green">低</span></td><td>—</td><td><a class="link">营养明细</a> <a class="link">餐品明细</a> <a class="link">查看用户信息</a></td></tr>
|
||||
<tr><td>李娜(EMP002)</td><td>市场部</td><td>2026-04-28</td><td>午餐</td><td><span class="tag tag-blue">点餐</span></td><td>1,842</td><td>1,800</td><td>65.2</td><td>58.7</td><td>241.3</td><td>2,180</td><td><span class="tag tag-gray">→持平</span></td><td><span class="tag tag-orange">76分</span></td><td><span class="tag tag-orange">中</span></td><td><span class="tag tag-orange">钠持续偏高</span></td><td><a class="link">营养明细</a> <a class="link">餐品明细</a> <a class="link">查看用户信息</a></td></tr>
|
||||
<tr><td>王磊(EMP003)</td><td>运营部</td><td>2026-04-28</td><td>午餐</td><td><span class="tag tag-gray">餐线</span></td><td>2,680</td><td>2,250</td><td>95.6</td><td>98.2</td><td>312.1</td><td>2,560</td><td><span class="tag tag-red">↓-3分</span></td><td><span class="tag tag-red">62分</span></td><td><span class="tag tag-red">高</span></td><td><span class="tag tag-red">热量+脂肪+钠均超标</span></td><td><a class="link">营养明细</a> <a class="link">餐品明细</a> <a class="link">查看用户信息</a></td></tr>
|
||||
<tr><td>赵敏(EMP004)</td><td>财务部</td><td>2026-04-28</td><td>午餐</td><td><span class="tag tag-gray">餐线</span></td><td>1,720</td><td>1,800</td><td>58.4</td><td>52.3</td><td>228.6</td><td>1,650</td><td><span class="tag tag-green">↑+1分</span></td><td><span class="tag tag-green">92分</span></td><td><span class="tag tag-green">低</span></td><td>—</td><td><a class="link">营养明细</a> <a class="link">餐品明细</a> <a class="link">查看用户信息</a></td></tr>
|
||||
<tr><td>陈刚(EMP005)</td><td>人事部</td><td>2026-04-28</td><td>早餐</td><td><span class="tag tag-gray">餐线</span></td><td>2,050</td><td>2,250</td><td>72.1</td><td>68.4</td><td>270.2</td><td>1,980</td><td><span class="tag tag-gray">→持平</span></td><td><span class="tag tag-green">84分</span></td><td><span class="tag tag-green">低</span></td><td>—</td><td><a class="link">营养明细</a> <a class="link">餐品明细</a> <a class="link">查看用户信息</a></td></tr>
|
||||
<tr><td>刘芳(EMP006)</td><td>市场部</td><td>2026-04-28</td><td>午餐</td><td><span class="tag tag-blue">点餐</span></td><td>1,480</td><td>1,800</td><td>48.6</td><td>42.1</td><td>198.5</td><td>1,420</td><td><span class="tag tag-orange">↓-2分</span></td><td><span class="tag tag-orange">70分</span></td><td><span class="tag tag-orange">中</span></td><td><span class="tag tag-orange">热量长期不达标</span></td><td><a class="link">营养明细</a> <a class="link">餐品明细</a> <a class="link">查看用户信息</a></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination"><span>显示 6 条，共 946 条</span><button class="page-btn">‹</button><button class="page-btn active">1</button><button class="page-btn">2</button><button class="page-btn">3</button><button class="page-btn">›</button></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tab1: 按日 -->
|
||||
<div class="tab-panel">
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item"><label>员工姓名/工号</label><input class="filter-input" placeholder="请输入"></div>
|
||||
<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>点餐</option><option>餐线</option></select></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>90-100</option><option>80-89</option><option>70-79</option><option>60-69</option><option><60</option></select></div>
|
||||
<div class="filter-item"><label>是否超标</label><select class="filter-select"><option>全部</option><option>是</option><option>否</option></select></div>
|
||||
<div class="filter-item"><label>营养等级</label><select class="filter-select"><option>全部</option><option>低</option><option>中</option><option>高</option></select></div>
|
||||
<div class="filter-item"><label>日期范围</label><input class="filter-input" type="date"></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>
|
||||
<button class="btn btn-default">📊 群体分析</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>日总热量(kcal)</th><th>推荐热量(kcal)</th><th>蛋白质(g)</th><th>脂肪(g)</th><th>碳水(g)</th><th>钠(mg)</th><th>对比昨日</th><th>营养评分</th><th>营养等级</th><th>异常预警</th><th>操作</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td>张伟(EMP001)</td><td>研发部</td><td>2026-04-28</td><td>全餐次</td><td><span class="tag tag-blue">点餐</span></td><td>2,186</td><td>2,250</td><td>76.8</td><td>70.9</td><td>281.6</td><td>1,790</td><td><span class="tag tag-green">↑+1.2%</span></td><td><span class="tag tag-green">86分</span></td><td><span class="tag tag-green">低</span></td><td>—</td><td><a class="link">营养明细</a> <a class="link">餐品明细</a> <a class="link">查看用户信息</a></td></tr>
|
||||
<tr><td>李娜(EMP002)</td><td>市场部</td><td>2026-04-28</td><td>全餐次</td><td><span class="tag tag-blue">点餐</span></td><td>1,864</td><td>1,800</td><td>64.6</td><td>57.8</td><td>238.2</td><td>2,140</td><td><span class="tag tag-orange">↓-0.8%</span></td><td><span class="tag tag-orange">74分</span></td><td><span class="tag tag-orange">中</span></td><td><span class="tag tag-orange">钠连续超标</span></td><td><a class="link">营养明细</a> <a class="link">餐品明细</a> <a class="link">查看用户信息</a></td></tr>
|
||||
<tr><td>王磊(EMP003)</td><td>运营部</td><td>2026-04-28</td><td>全餐次</td><td><span class="tag tag-gray">餐线</span></td><td>2,642</td><td>2,250</td><td>93.4</td><td>95.1</td><td>308.8</td><td>2,510</td><td><span class="tag tag-red">↑+2.6%</span></td><td><span class="tag tag-red">60分</span></td><td><span class="tag tag-red">高</span></td><td><span class="tag tag-red">三项持续超标</span></td><td><a class="link">营养明细</a> <a class="link">餐品明细</a> <a class="link">查看用户信息</a></td></tr>
|
||||
<tr><td>赵敏(EMP004)</td><td>财务部</td><td>2026-04-28</td><td>全餐次</td><td><span class="tag tag-gray">餐线</span></td><td>1,746</td><td>1,800</td><td>57.6</td><td>51.4</td><td>226.3</td><td>1,620</td><td><span class="tag tag-green">↑+0.6%</span></td><td><span class="tag tag-green">90分</span></td><td><span class="tag tag-green">低</span></td><td>—</td><td><a class="link">营养明细</a> <a class="link">餐品明细</a> <a class="link">查看用户信息</a></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination"><span>显示 4 条，共 946 条</span><button class="page-btn">‹</button><button class="page-btn active">1</button><button class="page-btn">2</button><button class="page-btn">3</button><button class="page-btn">›</button></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tab2: 按周 -->
|
||||
<div class="tab-panel">
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item"><label>员工姓名/工号</label><input class="filter-input" placeholder="请输入"></div>
|
||||
<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>点餐</option><option>餐线</option></select></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>90-100</option><option>80-89</option><option>70-79</option><option>60-69</option><option><60</option></select></div>
|
||||
<div class="filter-item"><label>是否超标</label><select class="filter-select"><option>全部</option><option>是</option><option>否</option></select></div>
|
||||
<div class="filter-item"><label>营养等级</label><select class="filter-select"><option>全部</option><option>低</option><option>中</option><option>高</option></select></div>
|
||||
<div class="filter-item"><label>周范围</label><input class="filter-input" type="week"></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>
|
||||
<button class="btn btn-default">📊 群体分析</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>周均热量(kcal)</th><th>周均推荐热量(kcal)</th><th>周均蛋白质(g)</th><th>周均脂肪(g)</th><th>周均碳水(g)</th><th>周均钠(mg)</th><th>对比上周</th><th>营养评分</th><th>营养等级</th><th>异常预警</th><th>操作</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td>张伟(EMP001)</td><td>研发部</td><td>2026年第18周</td><td>全餐次</td><td><span class="tag tag-blue">点餐</span></td><td>2,186</td><td>2,250</td><td>76.8</td><td>70.9</td><td>281.6</td><td>1,790</td><td><span class="tag tag-green">↑+1.2%</span></td><td><span class="tag tag-green">86分</span></td><td><span class="tag tag-green">低</span></td><td>—</td><td><a class="link">营养明细</a> <a class="link">餐品明细</a> <a class="link">查看用户信息</a></td></tr>
|
||||
<tr><td>李娜(EMP002)</td><td>市场部</td><td>2026年第18周</td><td>全餐次</td><td><span class="tag tag-blue">点餐</span></td><td>1,864</td><td>1,800</td><td>64.6</td><td>57.8</td><td>238.2</td><td>2,140</td><td><span class="tag tag-orange">↓-0.8%</span></td><td><span class="tag tag-orange">74分</span></td><td><span class="tag tag-orange">中</span></td><td><span class="tag tag-orange">钠连续超标</span></td><td><a class="link">营养明细</a> <a class="link">餐品明细</a> <a class="link">查看用户信息</a></td></tr>
|
||||
<tr><td>王磊(EMP003)</td><td>运营部</td><td>2026年第18周</td><td>全餐次</td><td><span class="tag tag-gray">餐线</span></td><td>2,642</td><td>2,250</td><td>93.4</td><td>95.1</td><td>308.8</td><td>2,510</td><td><span class="tag tag-red">↑+2.6%</span></td><td><span class="tag tag-red">60分</span></td><td><span class="tag tag-red">高</span></td><td><span class="tag tag-red">三项持续超标</span></td><td><a class="link">营养明细</a> <a class="link">餐品明细</a> <a class="link">查看用户信息</a></td></tr>
|
||||
<tr><td>赵敏(EMP004)</td><td>财务部</td><td>2026年第18周</td><td>全餐次</td><td><span class="tag tag-gray">餐线</span></td><td>1,746</td><td>1,800</td><td>57.6</td><td>51.4</td><td>226.3</td><td>1,620</td><td><span class="tag tag-green">↑+0.6%</span></td><td><span class="tag tag-green">90分</span></td><td><span class="tag tag-green">低</span></td><td>—</td><td><a class="link">营养明细</a> <a class="link">餐品明细</a> <a class="link">查看用户信息</a></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination"><span>显示 4 条，共 946 条</span><button class="page-btn">‹</button><button class="page-btn active">1</button><button class="page-btn">2</button><button class="page-btn">3</button><button class="page-btn">›</button></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tab3: 营养档案 -->
|
||||
<div class="tab-panel">
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item"><label>员工姓名/工号</label><input class="filter-input" placeholder="请输入"></div>
|
||||
<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>会员</option><option>非会员</option></select></div>
|
||||
<div class="filter-item"><label>风险等级</label><select class="filter-select"><option>全部</option><option>低</option><option>中</option><option>高</option></select></div>
|
||||
<div class="filter-item"><label>干预状态</label><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>林营养师</option><option>周营养师</option></select></div>
|
||||
<div class="filter-item"><label>慢病标签</label><select class="filter-select"><option>全部</option><option>高血压</option><option>高血脂</option><option>糖尿病</option><option>BMI偏低</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>
|
||||
<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>近30日评分</th><th>评分趋势</th><th>最近异常</th><th>风险等级</th><th>干预状态</th><th>营养师</th><th>最近跟进</th><th>操作</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td>张伟(EMP001)</td><td>研发部</td><td><span class="tag tag-orange">会员</span></td><td>无</td><td>86分</td><td><span class="tag tag-green">↑ 稳中有升</span></td><td>—</td><td><span class="tag tag-green">低</span></td><td><span class="tag tag-gray">已稳定</span></td><td>林营养师</td><td>2026-04-26</td><td><a class="link">🍽️ 营养管理</a> <a class="link">查看用户信息</a></td></tr>
|
||||
<tr><td>李娜(EMP002)</td><td>市场部</td><td><span class="tag tag-orange">会员</span></td><td><span class="tag tag-red">高血压</span></td><td>74分</td><td><span class="tag tag-gray">→ 持平</span></td><td><span class="tag tag-orange">钠超标</span></td><td><span class="tag tag-orange">中</span></td><td><span class="tag tag-blue">跟进中</span></td><td>林营养师</td><td>2026-05-08</td><td><a class="link">🍽️ 营养管理</a> <a class="link">查看用户信息</a></td></tr>
|
||||
<tr><td>王磊(EMP003)</td><td>运营部</td><td><span class="tag tag-gray">非会员</span></td><td><span class="tag tag-red">高血脂</span></td><td>60分</td><td><span class="tag tag-red">↓ 下降</span></td><td><span class="tag tag-red">热量+脂肪+钠</span></td><td><span class="tag tag-red">高</span></td><td><span class="tag tag-blue">跟进中</span></td><td>周营养师</td><td>2026-05-10</td><td><a class="link">🍽️ 营养管理</a> <a class="link">查看用户信息</a></td></tr>
|
||||
<tr><td>赵敏(EMP004)</td><td>财务部</td><td><span class="tag tag-orange">会员</span></td><td><span class="tag tag-red">糖尿病</span></td><td>90分</td><td><span class="tag tag-green">↑ 改善</span></td><td>—</td><td><span class="tag tag-orange">中</span></td><td><span class="tag tag-blue">跟进中</span></td><td>林营养师</td><td>2026-05-09</td><td><a class="link">🍽️ 营养管理</a> <a class="link">查看用户信息</a></td></tr>
|
||||
<tr><td>陈刚(EMP005)</td><td>人事部</td><td><span class="tag tag-gray">非会员</span></td><td>无</td><td>84分</td><td><span class="tag tag-gray">→ 持平</span></td><td>—</td><td><span class="tag tag-green">低</span></td><td><span class="tag tag-gray">未跟进</span></td><td>—</td><td>—</td><td><a class="link">🍽️ 营养管理</a> <a class="link">查看用户信息</a></td></tr>
|
||||
<tr><td>刘芳(EMP006)</td><td>市场部</td><td><span class="tag tag-orange">会员</span></td><td>无</td><td>70分</td><td><span class="tag tag-orange">↓ 轻度下降</span></td><td><span class="tag tag-orange">热量长期不达标</span></td><td><span class="tag tag-orange">中</span></td><td><span class="tag tag-blue">跟进中</span></td><td>周营养师</td><td>2026-05-07</td><td><a class="link">🍽️ 营养管理</a> <a class="link">查看用户信息</a></td></tr>
|
||||
<tr><td>孙磊(EMP010)</td><td>行政部</td><td><span class="tag tag-gray">非会员</span></td><td><span class="tag tag-red">高血压·高尿酸</span></td><td>64分</td><td><span class="tag tag-red">↓ 下降</span></td><td><span class="tag tag-red">钠+尿酸</span></td><td><span class="tag tag-red">高</span></td><td><span class="tag tag-orange">需复诊</span></td><td>周营养师</td><td>2026-05-05</td><td><a class="link">🍽️ 营养管理</a> <a class="link">查看用户信息</a></td></tr>
|
||||
<tr><td>钱芳(EMP011)</td><td>销售部</td><td><span class="tag tag-orange">会员</span></td><td><span class="tag tag-orange">BMI偏低</span></td><td>82分</td><td><span class="tag tag-green">↑ 改善</span></td><td>—</td><td><span class="tag tag-orange">中</span></td><td><span class="tag tag-blue">跟进中</span></td><td>林营养师</td><td>2026-05-06</td><td><a class="link">🍽️ 营养管理</a> <a class="link">查看用户信息</a></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination"><span>显示 8 条，共 186 条</span><button class="page-btn">‹</button><button class="page-btn active">1</button><button class="page-btn">2</button><button class="page-btn">3</button><button class="page-btn">›</button></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</main>
|
||||
|
||||
<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 toggleSubgroup(header){header.parentElement.classList.toggle('open');}
|
||||
(function(){var active=document.querySelector('.sidebar-item.active');if(!active)return;var sub=active.closest('.sidebar-subgroup');if(sub)sub.classList.add('open');})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,260 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>营养管理 - 字典配置 | 健康长庆原型</title>
|
||||
<style>
|
||||
*{box-sizing:border-box;margin:0;padding:0;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#F5F7FA;color:#333;min-width:1280px;}
|
||||
:root{
|
||||
--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;
|
||||
--text-primary:#333;--text-secondary:#666;--text-placeholder:#999;--border:#E8E8E8;--background:#F5F7FA;
|
||||
--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--font-xxl:24px;
|
||||
--radius-sm:4px;--radius-md:8px;--radius-lg:12px;
|
||||
--shadow-sm:0 1px 4px rgba(0,0,0,0.08);--shadow-md:0 4px 12px rgba(0,0,0,0.12);
|
||||
}
|
||||
.top-bar{display:flex;align-items:center;height:56px;background:#001529;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;}
|
||||
.top-bar__logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:var(--font-lg);font-weight:600;white-space:nowrap;width:240px;flex-shrink:0;}
|
||||
.top-bar__logo svg{width:28px;height:28px;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.top-bar__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.top-bar__right .btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.top-bar__right .btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);cursor:pointer;}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;text-transform:uppercase;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-item .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;filter:none;}
|
||||
.sidebar-subgroup__header{display:flex;align-items:center;gap:6px;padding:10px 24px;font-size:var(--font-sm);color:rgba(255,255,255,0.45);cursor:pointer;user-select:none;}
|
||||
.sidebar-subgroup__header .arrow{width:10px;height:10px;stroke:currentColor;transition:transform .2s;}
|
||||
.sidebar-subgroup.open .sidebar-subgroup__header .arrow{transform:rotate(90deg);}
|
||||
.sidebar-subgroup__body{display:none;padding-left:12px;}
|
||||
.sidebar-subgroup.open .sidebar-subgroup__body{display:block;}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;min-height:calc(100vh - 56px);}
|
||||
.breadcrumb{display:flex;align-items:center;gap:6px;font-size:var(--font-sm);color:var(--text-secondary);margin-bottom:16px;}
|
||||
.breadcrumb a{color:var(--primary);text-decoration:none;}
|
||||
.breadcrumb a:hover{text-decoration:underline;}
|
||||
.breadcrumb__sep{color:var(--text-placeholder);}
|
||||
.filter-bar{display:flex;align-items:flex-end;gap:12px;background:#fff;padding:16px 20px;border-radius:var(--radius-md);margin-bottom:16px;box-shadow:var(--shadow-sm);flex-wrap:wrap;}
|
||||
.filter-item{display:flex;flex-direction:column;gap:4px;}
|
||||
.filter-item label{font-size:var(--font-xs);color:var(--text-secondary);}
|
||||
.filter-input,.filter-select{height:32px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 10px;font-size:var(--font-sm);min-width:160px;}
|
||||
.btn{height:32px;padding:0 14px;border:none;border-radius:var(--radius-sm);font-size:var(--font-sm);cursor:pointer;display:inline-flex;align-items:center;gap:4px;white-space:nowrap;}
|
||||
.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{border-color:var(--primary);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:14px 20px;border-bottom:1px solid var(--border);}
|
||||
.table-card__title{font-size:var(--font-base);font-weight:600;}
|
||||
.table-card__actions{display:flex;gap:8px;}
|
||||
.table-card__content{overflow-x:auto;}
|
||||
table{width:100%;border-collapse:collapse;font-size:var(--font-sm);}
|
||||
th{background:#FAFAFA;text-align:left;padding:10px 14px;font-weight:600;white-space:nowrap;border-bottom:1px solid var(--border);}
|
||||
td{padding:10px 14px;border-bottom:1px solid #f0f0f0;white-space:nowrap;}
|
||||
tr:hover td{background:#FAFAFA;}
|
||||
.tag{display:inline-block;padding:2px 8px;border-radius:10px;font-size:var(--font-xs);}
|
||||
.tag-blue{background:#E6F7FF;color:#1890FF;}
|
||||
.tag-green{background:#F6FFED;color:#52C41A;}
|
||||
.tag-gray{background:#F5F5F5;color:#999;}
|
||||
.link{color:var(--primary);cursor:pointer;text-decoration:none;margin-right:8px;font-size:var(--font-sm);}
|
||||
.link:hover{text-decoration:underline;}
|
||||
.link-danger{color:var(--danger);}
|
||||
.link-danger:hover{color:#ff7875;}
|
||||
.pagination{display:flex;align-items:center;justify-content:flex-end;gap:8px;padding:12px 20px;font-size:var(--font-xs);color:var(--text-secondary);}
|
||||
.page-btn{width:28px;height:28px;border:1px solid var(--border);border-radius:var(--radius-sm);background:#fff;cursor:pointer;font-size:var(--font-xs);}
|
||||
.page-btn.active{background:var(--primary);color:#fff;border-color:var(--primary);}
|
||||
/* 弹窗 */
|
||||
.modal-mask{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.45);z-index:1000;align-items:center;justify-content:center;}
|
||||
.modal-mask.show{display:flex;}
|
||||
.modal{background:#fff;border-radius:var(--radius-md);width:520px;max-height:80vh;overflow-y:auto;box-shadow:var(--shadow-md);}
|
||||
.modal__header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border);}
|
||||
.modal__title{font-size:var(--font-base);font-weight:600;}
|
||||
.modal__close{font-size:22px;cursor:pointer;color:var(--text-secondary);line-height:1;}
|
||||
.modal__close:hover{color:var(--text-primary);}
|
||||
.modal__body{padding:24px;}
|
||||
.modal__footer{display:flex;justify-content:flex-end;gap:8px;padding:12px 24px;border-top:1px solid var(--border);}
|
||||
.form-row{margin-bottom:16px;}
|
||||
.form-label{display:block;font-size:var(--font-sm);color:var(--text-primary);margin-bottom:6px;}
|
||||
.form-label em{color:var(--danger);font-style:normal;}
|
||||
.form-input{width:100%;height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);}
|
||||
.form-input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 2px rgba(24,144,255,0.1);}
|
||||
.form-textarea{height:80px;padding:8px 12px;resize:vertical;}
|
||||
.action-bar{display:flex;align-items:center;gap:8px;margin-bottom:16px;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- 顶部导航 -->
|
||||
<header class="top-bar">
|
||||
<div class="top-bar__logo">
|
||||
<svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M7 14h14M14 7v14" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/></svg>
|
||||
营养管理
|
||||
</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="trace-query.html">溯源总览</a>
|
||||
<a href="arc-employee.html">档案</a>
|
||||
<a href="farm-land.html">绿色种采</a>
|
||||
<a href="sup-hygiene-check.html">卫生供应</a>
|
||||
<a href="prod-qc-daily.html">健康生产</a>
|
||||
<a href="din-dict-mgmt.html" class="active">营养用餐</a>
|
||||
<a href="ano-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<a href="../../index.html" class="btn-back">← 返回首页</a>
|
||||
<div class="avatar">管</div>
|
||||
<span>系统管理员 ▾</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- 侧边栏 -->
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">营养用餐</div>
|
||||
<a href="din-dict-mgmt.html" class="sidebar-item active"><span class="mi">📖</span>字典管理</a>
|
||||
<a href="prod-qc-nutrition.html" class="sidebar-item"><span class="mi">🔬</span>营养检验</a>
|
||||
<a href="din-ingredient.html" class="sidebar-item"><span class="mi">🥦</span>食物成分</a>
|
||||
<a href="din-dish-all.html" class="sidebar-item"><span class="mi">🍽️</span>餐品总库</a>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 10 10" fill="none"><path d="M3 1l4 4-4 4" stroke-width="1.5"/></svg>
|
||||
📐 算法标准
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="din-algo-population.html" class="sidebar-item"><span class="mi">👥</span>人群基础标准</a>
|
||||
<a href="din-algo-vip.html" class="sidebar-item"><span class="mi">💎</span>VIP定制标准</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="din-recipe-mgmt.html" class="sidebar-item"><span class="mi">📋</span>食谱管理</a>
|
||||
<a href="din-order-meal.html" class="sidebar-item"><span class="mi">🍱</span>营养点餐</a>
|
||||
<a href="din-user-mgmt.html" class="sidebar-item"><span class="mi">👤</span>用户管理</a>
|
||||
<a href="din-order-line.html" class="sidebar-item"><span class="mi">🍜</span>餐线管理</a>
|
||||
<a href="din-order-pickup.html" class="sidebar-item"><span class="mi">🎫</span>取餐管理</a>
|
||||
<a href="din-data-consume.html" class="sidebar-item"><span class="mi">💳</span>消费管理</a>
|
||||
<a href="din-data-nutri.html" class="sidebar-item"><span class="mi">📊</span>营养管理</a>
|
||||
<a href="din-data-benefit.html" class="sidebar-item"><span class="mi">📈</span>餐材效益</a>
|
||||
<a href="din-terminal.html" class="sidebar-item"><span class="mi">🖥️</span>终端管理</a>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 10 10" fill="none"><path d="M3 1l4 4-4 4" stroke-width="1.5"/></svg>
|
||||
🤖 模型管理
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="din-model-llm.html" class="sidebar-item"><span class="mi">🧠</span>大模型管理</a>
|
||||
<a href="din-model-small.html" class="sidebar-item"><span class="mi">⚙️</span>小模型管理</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="din-innovation.html" class="sidebar-item"><span class="mi">🌟</span>味养创新</a>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容 -->
|
||||
<main class="main">
|
||||
<!-- 面包屑 -->
|
||||
<div class="breadcrumb">
|
||||
<a href="din-dict-mgmt.html">字典管理</a>
|
||||
<span class="breadcrumb__sep">/</span>
|
||||
<span id="breadcrumbName">字典配置</span>
|
||||
</div>
|
||||
|
||||
<!-- 筛选栏 -->
|
||||
<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>
|
||||
<button class="btn btn-primary">查询</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
</div>
|
||||
|
||||
<!-- 表格 -->
|
||||
<div class="action-bar"><button class="btn btn-primary" onclick="openDialog('add')">➕ 新增</button></div>
|
||||
<div class="table-card">
|
||||
<div class="table-card__header">
|
||||
<div class="table-card__title" id="tableTitle">主烹饪法 - 字典配置</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></tr></thead>
|
||||
<tbody>
|
||||
<tr><td>cook_method_01</td><td>炒</td><td>stir_fry</td><td>1</td><td><span class="tag tag-green">启用</span></td><td>大火快炒</td><td>系统</td><td>2026-01-01</td><td><span class="link" onclick="openDialog('edit',this)">编辑</span> <span class="link link-danger">删除</span></td></tr>
|
||||
<tr><td>cook_method_02</td><td>蒸</td><td>steam</td><td>2</td><td><span class="tag tag-green">启用</span></td><td>隔水蒸制</td><td>系统</td><td>2026-01-01</td><td><span class="link" onclick="openDialog('edit',this)">编辑</span> <span class="link link-danger">删除</span></td></tr>
|
||||
<tr><td>cook_method_03</td><td>炖</td><td>stew</td><td>3</td><td><span class="tag tag-green">启用</span></td><td>慢火炖煮</td><td>系统</td><td>2026-01-01</td><td><span class="link" onclick="openDialog('edit',this)">编辑</span> <span class="link link-danger">删除</span></td></tr>
|
||||
<tr><td>cook_method_04</td><td>煮</td><td>boil</td><td>4</td><td><span class="tag tag-green">启用</span></td><td>水煮</td><td>系统</td><td>2026-01-01</td><td><span class="link" onclick="openDialog('edit',this)">编辑</span> <span class="link link-danger">删除</span></td></tr>
|
||||
<tr><td>cook_method_05</td><td>凉拌</td><td>cold_mix</td><td>5</td><td><span class="tag tag-green">启用</span></td><td>不加热</td><td>系统</td><td>2026-01-01</td><td><span class="link" onclick="openDialog('edit',this)">编辑</span> <span class="link link-danger">删除</span></td></tr>
|
||||
<tr><td>cook_method_06</td><td>炸</td><td>deep_fry</td><td>6</td><td><span class="tag tag-green">启用</span></td><td>油炸</td><td>系统</td><td>2026-01-01</td><td><span class="link" onclick="openDialog('edit',this)">编辑</span> <span class="link link-danger">删除</span></td></tr>
|
||||
<tr><td>cook_method_07</td><td>烤</td><td>roast</td><td>7</td><td><span class="tag tag-green">启用</span></td><td>烤箱/明火</td><td>系统</td><td>2026-01-01</td><td><span class="link" onclick="openDialog('edit',this)">编辑</span> <span class="link link-danger">删除</span></td></tr>
|
||||
<tr><td>cook_method_08</td><td>煎</td><td>pan_fry</td><td>8</td><td><span class="tag tag-green">启用</span></td><td>少油煎制</td><td>系统</td><td>2026-01-01</td><td><span class="link" onclick="openDialog('edit',this)">编辑</span> <span class="link link-danger">删除</span></td></tr>
|
||||
<tr><td>cook_method_09</td><td>焖</td><td>braise</td><td>9</td><td><span class="tag tag-green">启用</span></td><td>加盖焖制</td><td>系统</td><td>2026-01-01</td><td><span class="link" onclick="openDialog('edit',this)">编辑</span> <span class="link link-danger">删除</span></td></tr>
|
||||
<tr><td>cook_method_10</td><td>卤</td><td>marinade</td><td>10</td><td><span class="tag tag-green">启用</span></td><td>卤汁浸煮</td><td>系统</td><td>2026-01-01</td><td><span class="link" onclick="openDialog('edit',this)">编辑</span> <span class="link link-danger">删除</span></td></tr>
|
||||
<tr><td>cook_method_11</td><td>汆</td><td>blanch</td><td>11</td><td><span class="tag tag-gray">停用</span></td><td>沸水汆烫</td><td>王运营</td><td>2026-03-20</td><td><span class="link" onclick="openDialog('edit',this)">编辑</span> <span class="link link-danger">删除</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination"><span>显示 11 条，共 11 条</span><button class="page-btn active">1</button></div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- 新增/编辑弹窗 -->
|
||||
<div class="modal-mask" id="itemModal" onclick="closeDialog(event)">
|
||||
<div class="modal" onclick="event.stopPropagation()">
|
||||
<div class="modal__header"><span class="modal__title" id="modalTitle">新增字典项</span><span class="modal__close" onclick="closeDialog()">×</span></div>
|
||||
<div class="modal__body">
|
||||
<div class="form-row"><label class="form-label">字典编码 <em>*</em></label><input class="form-input" id="formCode" placeholder="请输入字典编码"></div>
|
||||
<div class="form-row"><label class="form-label">字典标签 <em>*</em></label><input class="form-input" id="formLabel" placeholder="请输入字典标签（显示名称）"></div>
|
||||
<div class="form-row"><label class="form-label">字典值 <em>*</em></label><input class="form-input" id="formValue" placeholder="请输入字典值（英文标识）"></div>
|
||||
<div class="form-row"><label class="form-label">排序 <em>*</em></label><input class="form-input" id="formSort" type="number" placeholder="请输入排序号"></div>
|
||||
<div class="form-row"><label class="form-label">状态</label><select class="form-input" id="formStatus"><option value="1">启用</option><option value="0">停用</option></select></div>
|
||||
<div class="form-row"><label class="form-label">备注</label><textarea class="form-input form-textarea" id="formRemark" placeholder="请输入备注信息"></textarea></div>
|
||||
</div>
|
||||
<div class="modal__footer"><button class="btn btn-default" onclick="closeDialog()">取消</button><button class="btn btn-primary">确定</button></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function toggleSubgroup(header){header.parentElement.classList.toggle('open');}
|
||||
(function(){var active=document.querySelector('.sidebar-item.active');if(!active)return;var sub=active.closest('.sidebar-subgroup');if(sub)sub.classList.add('open');})();
|
||||
|
||||
/* 解析 URL 参数，设置面包屑和标题 */
|
||||
(function(){
|
||||
var params=new URLSearchParams(window.location.search);
|
||||
var name=params.get('name')||'主烹饪法';
|
||||
document.getElementById('breadcrumbName').textContent=name+' - 字典配置';
|
||||
document.getElementById('tableTitle').textContent=name+' - 字典配置';
|
||||
document.title='营养管理 - '+name+' 字典配置 | 健康长庆原型';
|
||||
})();
|
||||
|
||||
/* 弹窗交互 */
|
||||
function openDialog(mode, el){
|
||||
var modal=document.getElementById('itemModal');
|
||||
var title=document.getElementById('modalTitle');
|
||||
if(mode==='edit'){
|
||||
title.textContent='编辑字典项';
|
||||
var row=el.closest('tr');
|
||||
var cells=row.querySelectorAll('td');
|
||||
document.getElementById('formCode').value=cells[0].textContent;
|
||||
document.getElementById('formCode').disabled=true;
|
||||
document.getElementById('formLabel').value=cells[1].textContent;
|
||||
document.getElementById('formValue').value=cells[2].textContent;
|
||||
document.getElementById('formSort').value=cells[3].textContent;
|
||||
document.getElementById('formStatus').value=cells[4].textContent.trim()==='启用'?'1':'0';
|
||||
document.getElementById('formRemark').value=cells[5].textContent;
|
||||
}else{
|
||||
title.textContent='新增字典项';
|
||||
document.getElementById('formCode').value='';
|
||||
document.getElementById('formCode').disabled=false;
|
||||
document.getElementById('formLabel').value='';
|
||||
document.getElementById('formValue').value='';
|
||||
document.getElementById('formSort').value='';
|
||||
document.getElementById('formStatus').value='1';
|
||||
document.getElementById('formRemark').value='';
|
||||
}
|
||||
modal.classList.add('show');
|
||||
}
|
||||
function closeDialog(e){
|
||||
if(e&&e.target!==e.currentTarget)return;
|
||||
document.getElementById('itemModal').classList.remove('show');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,362 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>营养管理 - 字典管理 | 健康长庆原型</title>
|
||||
<style>
|
||||
*{box-sizing:border-box;margin:0;padding:0;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#F5F7FA;color:#333;min-width:1280px;}
|
||||
:root{
|
||||
--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;
|
||||
--text-primary:#333;--text-secondary:#666;--text-placeholder:#999;--border:#E8E8E8;--background:#F5F7FA;
|
||||
--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--font-xxl:24px;
|
||||
--radius-sm:4px;--radius-md:8px;--radius-lg:12px;
|
||||
--shadow-sm:0 1px 4px rgba(0,0,0,0.08);--shadow-md:0 4px 12px rgba(0,0,0,0.12);
|
||||
}
|
||||
.top-bar{display:flex;align-items:center;height:56px;background:#001529;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;}
|
||||
.top-bar__logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:var(--font-lg);font-weight:600;white-space:nowrap;width:240px;flex-shrink:0;}
|
||||
.top-bar__logo svg{width:28px;height:28px;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.top-bar__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.top-bar__right .btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.top-bar__right .btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);cursor:pointer;}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;text-transform:uppercase;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-item .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;filter:none;}
|
||||
.sidebar-subgroup__header{display:flex;align-items:center;gap:6px;padding:10px 24px;font-size:var(--font-sm);color:rgba(255,255,255,0.45);cursor:pointer;user-select:none;}
|
||||
.sidebar-subgroup__header .arrow{width:10px;height:10px;stroke:currentColor;transition:transform .2s;}
|
||||
.sidebar-subgroup.open .sidebar-subgroup__header .arrow{transform:rotate(90deg);}
|
||||
.sidebar-subgroup__body{display:none;padding-left:12px;}
|
||||
.sidebar-subgroup.open .sidebar-subgroup__body{display:block;}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;min-height:calc(100vh - 56px);}
|
||||
.stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:20px;}
|
||||
.stat-card{background:#fff;border-radius:var(--radius-md);padding:16px 20px;display:flex;align-items:center;gap:14px;box-shadow:var(--shadow-sm);}
|
||||
.stat-card__icon{width:44px;height:44px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:20px;}
|
||||
.stat-card__icon.blue{background:#E6F7FF;}.stat-card__icon.green{background:#F6FFED;}.stat-card__icon.orange{background:#FFF7E6;}
|
||||
.stat-card__value{font-size:var(--font-xl);font-weight:700;color:var(--text-primary);}
|
||||
.stat-card__label{font-size:var(--font-xs);color:var(--text-secondary);margin-top:2px;}
|
||||
/* Tab 切换 */
|
||||
.page-tabs{display:flex;gap:0;background:#fff;border-radius:var(--radius-md) var(--radius-md) 0 0;box-shadow:var(--shadow-sm);overflow:hidden;margin-bottom:0;}
|
||||
.page-tab{padding:12px 20px;font-size:var(--font-sm);color:var(--text-secondary);cursor:pointer;border-bottom:2px solid transparent;transition:all .2s;white-space:nowrap;}
|
||||
.page-tab:hover{color:var(--primary);background:var(--primary-light);}
|
||||
.page-tab.active{color:var(--primary);border-bottom-color:var(--primary);font-weight:600;}
|
||||
.tab-panel{display:none;}.tab-panel.active{display:block;}
|
||||
.filter-bar{display:flex;align-items:flex-end;gap:12px;background:#fff;padding:16px 20px;border-radius:var(--radius-md);margin-bottom:16px;box-shadow:var(--shadow-sm);flex-wrap:wrap;}
|
||||
.filter-item{display:flex;flex-direction:column;gap:4px;}
|
||||
.filter-item label{font-size:var(--font-xs);color:var(--text-secondary);}
|
||||
.filter-input,.filter-select{height:32px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 10px;font-size:var(--font-sm);min-width:160px;}
|
||||
.btn{height:32px;padding:0 14px;border:none;border-radius:var(--radius-sm);font-size:var(--font-sm);cursor:pointer;display:inline-flex;align-items:center;gap:4px;white-space:nowrap;}
|
||||
.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{border-color:var(--primary);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:14px 20px;border-bottom:1px solid var(--border);}
|
||||
.table-card__title{font-size:var(--font-base);font-weight:600;}
|
||||
.table-card__actions{display:flex;gap:8px;}
|
||||
.table-card__content{overflow-x:auto;}
|
||||
table{width:100%;border-collapse:collapse;font-size:var(--font-sm);}
|
||||
th{background:#FAFAFA;text-align:left;padding:10px 14px;font-weight:600;white-space:nowrap;border-bottom:1px solid var(--border);}
|
||||
td{padding:10px 14px;border-bottom:1px solid #f0f0f0;white-space:nowrap;}
|
||||
tr:hover td{background:#FAFAFA;}
|
||||
.tag{display:inline-block;padding:2px 8px;border-radius:10px;font-size:var(--font-xs);}
|
||||
.tag-blue{background:#E6F7FF;color:#1890FF;}.tag-green{background:#F6FFED;color:#52C41A;}.tag-gray{background:#F5F5F5;color:#999;}
|
||||
.link{color:var(--primary);cursor:pointer;text-decoration:none;margin-right:8px;font-size:var(--font-sm);}
|
||||
.link:hover{text-decoration:underline;}
|
||||
.link-danger{color:var(--danger);}.link-danger:hover{color:#ff7875;}
|
||||
.pagination{display:flex;align-items:center;justify-content:flex-end;gap:8px;padding:12px 20px;font-size:var(--font-xs);color:var(--text-secondary);}
|
||||
.page-btn{width:28px;height:28px;border:1px solid var(--border);border-radius:var(--radius-sm);background:#fff;cursor:pointer;font-size:var(--font-xs);}
|
||||
.page-btn.active{background:var(--primary);color:#fff;border-color:var(--primary);}
|
||||
/* 弹窗 */
|
||||
.modal-mask{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.45);z-index:1000;align-items:center;justify-content:center;}
|
||||
.modal-mask.show{display:flex;}
|
||||
.modal{background:#fff;border-radius:var(--radius-md);width:520px;max-height:80vh;overflow-y:auto;box-shadow:var(--shadow-md);}
|
||||
.modal__header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border);}
|
||||
.modal__title{font-size:var(--font-base);font-weight:600;}
|
||||
.modal__close{font-size:22px;cursor:pointer;color:var(--text-secondary);line-height:1;}.modal__close:hover{color:var(--text-primary);}
|
||||
.modal__body{padding:24px;}
|
||||
.modal__footer{display:flex;justify-content:flex-end;gap:8px;padding:12px 24px;border-top:1px solid var(--border);}
|
||||
.form-row{margin-bottom:16px;}
|
||||
.form-label{display:block;font-size:var(--font-sm);color:var(--text-primary);margin-bottom:6px;}
|
||||
.form-label em{color:var(--danger);font-style:normal;}
|
||||
.form-input{width:100%;height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);}
|
||||
.form-input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 2px rgba(24,144,255,0.1);}
|
||||
.form-textarea{height:80px;padding:8px 12px;resize:vertical;}
|
||||
.action-bar{display:flex;align-items:center;gap:8px;margin-bottom:16px;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- 顶部导航 -->
|
||||
<header class="top-bar">
|
||||
<div class="top-bar__logo">
|
||||
<svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M7 14h14M14 7v14" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/></svg>
|
||||
营养管理
|
||||
</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="trace-query.html">溯源总览</a>
|
||||
<a href="arc-employee.html">档案</a>
|
||||
<a href="farm-land.html">绿色种采</a>
|
||||
<a href="sup-hygiene-check.html">卫生供应</a>
|
||||
<a href="prod-qc-daily.html">健康生产</a>
|
||||
<a href="din-dict-mgmt.html" class="active">营养用餐</a>
|
||||
<a href="ano-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<a href="../../index.html" class="btn-back">← 返回首页</a>
|
||||
<div class="avatar">管</div>
|
||||
<span>系统管理员 ▾</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- 侧边栏 -->
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">营养用餐</div>
|
||||
<a href="din-dict-mgmt.html" class="sidebar-item active"><span class="mi">📖</span>字典管理</a>
|
||||
<a href="prod-qc-nutrition.html" class="sidebar-item"><span class="mi">🔬</span>营养检验</a>
|
||||
<a href="din-ingredient.html" class="sidebar-item"><span class="mi">🥦</span>食物成分</a>
|
||||
<a href="din-dish-all.html" class="sidebar-item"><span class="mi">🍽️</span>餐品总库</a>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 10 10" fill="none"><path d="M3 1l4 4-4 4" stroke-width="1.5"/></svg>
|
||||
📐 算法标准
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="din-algo-population.html" class="sidebar-item"><span class="mi">👥</span>人群基础标准</a>
|
||||
<a href="din-algo-vip.html" class="sidebar-item"><span class="mi">💎</span>VIP定制标准</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="din-recipe-mgmt.html" class="sidebar-item"><span class="mi">📋</span>食谱管理</a>
|
||||
<a href="din-order-meal.html" class="sidebar-item"><span class="mi">🍱</span>营养点餐</a>
|
||||
<a href="din-user-mgmt.html" class="sidebar-item"><span class="mi">👤</span>用户管理</a>
|
||||
<a href="din-order-line.html" class="sidebar-item"><span class="mi">🍜</span>餐线管理</a>
|
||||
<a href="din-order-pickup.html" class="sidebar-item"><span class="mi">🎫</span>取餐管理</a>
|
||||
<a href="din-data-consume.html" class="sidebar-item"><span class="mi">💳</span>消费管理</a>
|
||||
<a href="din-data-nutri.html" class="sidebar-item"><span class="mi">📊</span>营养管理</a>
|
||||
<a href="din-data-benefit.html" class="sidebar-item"><span class="mi">📈</span>餐材效益</a>
|
||||
<a href="din-terminal.html" class="sidebar-item"><span class="mi">🖥️</span>终端管理</a>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 10 10" fill="none"><path d="M3 1l4 4-4 4" stroke-width="1.5"/></svg>
|
||||
🤖 模型管理
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="din-model-llm.html" class="sidebar-item"><span class="mi">🧠</span>大模型管理</a>
|
||||
<a href="din-model-small.html" class="sidebar-item"><span class="mi">⚙️</span>小模型管理</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="din-innovation.html" class="sidebar-item"><span class="mi">🌟</span>味养创新</a>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容 -->
|
||||
<main class="main">
|
||||
<!-- 统计卡片 -->
|
||||
<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">6类</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">186项</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">178项</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">2026-04-28</div><div class="stat-card__label">最近更新</div></div></div>
|
||||
</div>
|
||||
|
||||
<!-- 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(5)">📋 业务</div>
|
||||
</div>
|
||||
|
||||
<!-- Tab1: 烹饪/工艺 -->
|
||||
<div class="tab-panel active">
|
||||
<div class="filter-bar">
|
||||
<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>
|
||||
<button class="btn btn-primary">查询</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
</div>
|
||||
<div class="action-bar"><button class="btn btn-primary" onclick="openDialog('add')">➕ 新增</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></tr></thead>
|
||||
<tbody>
|
||||
<tr><td>cook_method</td><td>主烹饪法</td><td><span class="tag tag-blue">是</span></td><td>炒蒸炖煮等烹饪方式</td><td>系统</td><td>2026-01-01</td><td><a class="link" href="din-dict-config.html?code=cook_method&name=主烹饪法">字典配置</a><span class="link" onclick="openDialog('edit',this)">编辑</span><span class="link link-danger">删除</span></td></tr>
|
||||
<tr><td>fire_level</td><td>火候</td><td><span class="tag tag-blue">是</span></td><td>大火/中火/小火</td><td>系统</td><td>2026-01-01</td><td><a class="link" href="din-dict-config.html?code=fire_level&name=火候">字典配置</a><span class="link" onclick="openDialog('edit',this)">编辑</span><span class="link link-danger">删除</span></td></tr>
|
||||
<tr><td>process_type</td><td>加工类型</td><td><span class="tag tag-blue">是</span></td><td>清洗/去皮/切割</td><td>系统</td><td>2026-01-01</td><td><a class="link" href="din-dict-config.html?code=process_type&name=加工类型">字典配置</a><span class="link" onclick="openDialog('edit',this)">编辑</span><span class="link link-danger">删除</span></td></tr>
|
||||
<tr><td>process_spec</td><td>加工规格</td><td><span class="tag tag-blue">是</span></td><td>整棵/段/丁等规格</td><td>系统</td><td>2026-01-01</td><td><a class="link" href="din-dict-config.html?code=process_spec&name=加工规格">字典配置</a><span class="link" onclick="openDialog('edit',this)">编辑</span><span class="link link-danger">删除</span></td></tr>
|
||||
</tbody></table></div>
|
||||
<div class="pagination"><span>显示 4 条，共 4 条</span><button class="page-btn active">1</button></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tab2: 感官 -->
|
||||
<div class="tab-panel">
|
||||
<div class="filter-bar">
|
||||
<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>
|
||||
<button class="btn btn-primary">查询</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
</div>
|
||||
<div class="action-bar"><button class="btn btn-primary" onclick="openDialog('add')">➕ 新增</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></tr></thead>
|
||||
<tbody>
|
||||
<tr><td>taste_type</td><td>主味型</td><td><span class="tag tag-blue">是</span></td><td>淡味/鲜味/甜味等</td><td>系统</td><td>2026-01-01</td><td><a class="link" href="din-dict-config.html?code=taste_type&name=主味型">字典配置</a><span class="link" onclick="openDialog('edit',this)">编辑</span><span class="link link-danger">删除</span></td></tr>
|
||||
<tr><td>taste_level</td><td>味道强度</td><td><span class="tag tag-blue">是</span></td><td>弱/中/强</td><td>系统</td><td>2026-01-01</td><td><a class="link" href="din-dict-config.html?code=taste_level&name=味道强度">字典配置</a><span class="link" onclick="openDialog('edit',this)">编辑</span><span class="link link-danger">删除</span></td></tr>
|
||||
<tr><td>color_type</td><td>主色系</td><td><span class="tag tag-blue">是</span></td><td>白色/金黄/绿色等</td><td>系统</td><td>2026-01-01</td><td><a class="link" href="din-dict-config.html?code=color_type&name=主色系">字典配置</a><span class="link" onclick="openDialog('edit',this)">编辑</span><span class="link link-danger">删除</span></td></tr>
|
||||
<tr><td>sensory_grade</td><td>感官评级</td><td><span class="tag tag-blue">是</span></td><td>优/良/中</td><td>系统</td><td>2026-01-01</td><td><a class="link" href="din-dict-config.html?code=sensory_grade&name=感官评级">字典配置</a><span class="link" onclick="openDialog('edit',this)">编辑</span><span class="link link-danger">删除</span></td></tr>
|
||||
<tr><td>texture_type</td><td>主质地</td><td><span class="tag tag-blue">是</span></td><td>软烂/嫩滑/酥脆</td><td>系统</td><td>2026-01-01</td><td><a class="link" href="din-dict-config.html?code=texture_type&name=主质地">字典配置</a><span class="link" onclick="openDialog('edit',this)">编辑</span><span class="link link-danger">删除</span></td></tr>
|
||||
<tr><td>chew_level</td><td>咀嚼难度</td><td><span class="tag tag-blue">是</span></td><td>易/中/难</td><td>系统</td><td>2026-01-01</td><td><a class="link" href="din-dict-config.html?code=chew_level&name=咀嚼难度">字典配置</a><span class="link" onclick="openDialog('edit',this)">编辑</span><span class="link link-danger">删除</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><input class="filter-input" placeholder="请输入字典名"></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" onclick="openDialog('add')">➕ 新增</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></tr></thead>
|
||||
<tbody>
|
||||
<tr><td>diet_pyramid</td><td>膳食宝塔分类</td><td><span class="tag tag-blue">是</span></td><td>膳食宝塔六层分类</td><td>系统</td><td>2026-01-01</td><td><a class="link" href="din-dict-config.html?code=diet_pyramid&name=膳食宝塔分类">字典配置</a><span class="link" onclick="openDialog('edit',this)">编辑</span><span class="link link-danger">删除</span></td></tr>
|
||||
<tr><td>food_category</td><td>食材分类</td><td><span class="tag tag-blue">是</span></td><td>谷薯/畜肉/禽肉等</td><td>系统</td><td>2026-01-01</td><td><a class="link" href="din-dict-config.html?code=food_category&name=食材分类">字典配置</a><span class="link" onclick="openDialog('edit',this)">编辑</span><span class="link link-danger">删除</span></td></tr>
|
||||
<tr><td>data_source</td><td>数据来源</td><td><span class="tag tag-blue">是</span></td><td>食物成分表/实测等</td><td>系统</td><td>2026-01-01</td><td><a class="link" href="din-dict-config.html?code=data_source&name=数据来源">字典配置</a><span class="link" onclick="openDialog('edit',this)">编辑</span><span class="link link-danger">删除</span></td></tr>
|
||||
<tr><td>test_item</td><td>检测项目</td><td><span class="tag tag-blue">是</span></td><td>农残/重金属/微生物</td><td>系统</td><td>2026-01-01</td><td><a class="link" href="din-dict-config.html?code=test_item&name=检测项目">字典配置</a><span class="link" onclick="openDialog('edit',this)">编辑</span><span class="link link-danger">删除</span></td></tr>
|
||||
</tbody></table></div>
|
||||
<div class="pagination"><span>显示 4 条，共 4 条</span><button class="page-btn active">1</button></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tab4: 适配 -->
|
||||
<div class="tab-panel">
|
||||
<div class="filter-bar">
|
||||
<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>
|
||||
<button class="btn btn-primary">查询</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
</div>
|
||||
<div class="action-bar"><button class="btn btn-primary" onclick="openDialog('add')">➕ 新增</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></tr></thead>
|
||||
<tbody>
|
||||
<tr><td>crowd_type</td><td>适配人群</td><td><span class="tag tag-blue">是</span></td><td>全人群/老年人/孕妇等</td><td>系统</td><td>2026-01-01</td><td><a class="link" href="din-dict-config.html?code=crowd_type&name=适配人群">字典配置</a><span class="link" onclick="openDialog('edit',this)">编辑</span><span class="link link-danger">删除</span></td></tr>
|
||||
<tr><td>adapt_level</td><td>适配等级</td><td><span class="tag tag-blue">是</span></td><td>推荐/适量/慎食</td><td>系统</td><td>2026-01-01</td><td><a class="link" href="din-dict-config.html?code=adapt_level&name=适配等级">字典配置</a><span class="link" onclick="openDialog('edit',this)">编辑</span><span class="link link-danger">删除</span></td></tr>
|
||||
<tr><td>person_type</td><td>人员类别</td><td><span class="tag tag-blue">是</span></td><td>会员/非会员/员工等</td><td>系统</td><td>2026-01-01</td><td><a class="link" href="din-dict-config.html?code=person_type&name=人员类别">字典配置</a><span class="link" onclick="openDialog('edit',this)">编辑</span><span class="link link-danger">删除</span></td></tr>
|
||||
<tr><td>activity_level</td><td>活动水平</td><td><span class="tag tag-blue">是</span></td><td>久坐/轻度/中度/重度</td><td>系统</td><td>2026-01-01</td><td><a class="link" href="din-dict-config.html?code=activity_level&name=活动水平">字典配置</a><span class="link" onclick="openDialog('edit',this)">编辑</span><span class="link link-danger">删除</span></td></tr>
|
||||
</tbody></table></div>
|
||||
<div class="pagination"><span>显示 4 条，共 4 条</span><button class="page-btn active">1</button></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tab5: 仓储/规格 -->
|
||||
<div class="tab-panel">
|
||||
<div class="filter-bar">
|
||||
<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>
|
||||
<button class="btn btn-primary">查询</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
</div>
|
||||
<div class="action-bar"><button class="btn btn-primary" onclick="openDialog('add')">➕ 新增</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></tr></thead>
|
||||
<tbody>
|
||||
<tr><td>stock_spec</td><td>入库规格</td><td><span class="tag tag-blue">是</span></td><td>25kg/件等包装规格</td><td>系统</td><td>2026-01-01</td><td><a class="link" href="din-dict-config.html?code=stock_spec&name=入库规格">字典配置</a><span class="link" onclick="openDialog('edit',this)">编辑</span><span class="link link-danger">删除</span></td></tr>
|
||||
<tr><td>temp_zone</td><td>温区类型</td><td><span class="tag tag-blue">是</span></td><td>常温/冷藏/冷冻</td><td>系统</td><td>2026-01-01</td><td><a class="link" href="din-dict-config.html?code=temp_zone&name=温区类型">字典配置</a><span class="link" onclick="openDialog('edit',this)">编辑</span><span class="link link-danger">删除</span></td></tr>
|
||||
<tr><td>store_category</td><td>适存品类</td><td><span class="tag tag-blue">是</span></td><td>叶菜/根茎/肉类等</td><td>系统</td><td>2026-01-01</td><td><a class="link" href="din-dict-config.html?code=store_category&name=适存品类">字典配置</a><span class="link" onclick="openDialog('edit',this)">编辑</span><span class="link link-danger">删除</span></td></tr>
|
||||
</tbody></table></div>
|
||||
<div class="pagination"><span>显示 3 条，共 3 条</span><button class="page-btn active">1</button></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tab6: 业务 -->
|
||||
<div class="tab-panel">
|
||||
<div class="filter-bar">
|
||||
<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>
|
||||
<button class="btn btn-primary">查询</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
</div>
|
||||
<div class="action-bar"><button class="btn btn-primary" onclick="openDialog('add')">➕ 新增</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></tr></thead>
|
||||
<tbody>
|
||||
<tr><td>meal_time</td><td>餐次</td><td><span class="tag tag-blue">是</span></td><td>早餐/午餐/晚餐/夜宵</td><td>系统</td><td>2026-01-01</td><td><a class="link" href="din-dict-config.html?code=meal_time&name=餐次">字典配置</a><span class="link" onclick="openDialog('edit',this)">编辑</span><span class="link link-danger">删除</span></td></tr>
|
||||
<tr><td>order_source</td><td>订单来源</td><td><span class="tag tag-blue">是</span></td><td>点餐/餐线/账户/团餐</td><td>系统</td><td>2026-01-01</td><td><a class="link" href="din-dict-config.html?code=order_source&name=订单来源">字典配置</a><span class="link" onclick="openDialog('edit',this)">编辑</span><span class="link link-danger">删除</span></td></tr>
|
||||
<tr><td>dispose_type</td><td>处置方式</td><td><span class="tag tag-blue">是</span></td><td>福利/捐赠/废弃/再利用</td><td>系统</td><td>2026-01-01</td><td><a class="link" href="din-dict-config.html?code=dispose_type&name=处置方式">字典配置</a><span class="link" onclick="openDialog('edit',this)">编辑</span><span class="link link-danger">删除</span></td></tr>
|
||||
<tr><td>pickup_type</td><td>取餐类型</td><td><span class="tag tag-blue">是</span></td><td>正常取餐/余量取餐</td><td>系统</td><td>2026-01-01</td><td><a class="link" href="din-dict-config.html?code=pickup_type&name=取餐类型">字典配置</a><span class="link" onclick="openDialog('edit',this)">编辑</span><span class="link link-danger">删除</span></td></tr>
|
||||
<tr><td>recognize_type</td><td>识别方式</td><td><span class="tag tag-blue">是</span></td><td>自动识别/人工选择</td><td>系统</td><td>2026-01-01</td><td><a class="link" href="din-dict-config.html?code=recognize_type&name=识别方式">字典配置</a><span class="link" onclick="openDialog('edit',this)">编辑</span><span class="link link-danger">删除</span></td></tr>
|
||||
<tr><td>pickup_method</td><td>取餐方式</td><td><span class="tag tag-gray">否</span></td><td>点餐/餐线/混合/外卖</td><td>王运营</td><td>2026-03-15</td><td><a class="link" href="din-dict-config.html?code=pickup_method&name=取餐方式">字典配置</a><span class="link" onclick="openDialog('edit',this)">编辑</span><span class="link link-danger">删除</span></td></tr>
|
||||
</tbody></table></div>
|
||||
<div class="pagination"><span>显示 6 条，共 6 条</span><button class="page-btn active">1</button></div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- 新增/编辑弹窗 -->
|
||||
<div class="modal-mask" id="dictModal" onclick="closeDialog(event)">
|
||||
<div class="modal" onclick="event.stopPropagation()">
|
||||
<div class="modal__header"><span class="modal__title" id="modalTitle">新增字典</span><span class="modal__close" onclick="closeDialog()">×</span></div>
|
||||
<div class="modal__body">
|
||||
<div class="form-row"><label class="form-label">字典编码 <em>*</em></label><input class="form-input" id="formCode" placeholder="请输入字典编码（英文下划线）"></div>
|
||||
<div class="form-row"><label class="form-label">字典名 <em>*</em></label><input class="form-input" id="formName" placeholder="请输入字典名称"></div>
|
||||
<div class="form-row"><label class="form-label">系统内置</label><select class="form-input" id="formBuiltin"><option value="1">是</option><option value="0">否</option></select></div>
|
||||
<div class="form-row"><label class="form-label">备注</label><textarea class="form-input form-textarea" id="formRemark" placeholder="请输入备注信息"></textarea></div>
|
||||
</div>
|
||||
<div class="modal__footer"><button class="btn btn-default" onclick="closeDialog()">取消</button><button class="btn btn-primary">确定</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 toggleSubgroup(header){header.parentElement.classList.toggle('open');}
|
||||
(function(){var active=document.querySelector('.sidebar-item.active');if(!active)return;var sub=active.closest('.sidebar-subgroup');if(sub)sub.classList.add('open');})();
|
||||
|
||||
function openDialog(mode, el){
|
||||
var modal=document.getElementById('dictModal');
|
||||
var title=document.getElementById('modalTitle');
|
||||
if(mode==='edit'){
|
||||
title.textContent='编辑字典';
|
||||
var row=el.closest('tr');
|
||||
var cells=row.querySelectorAll('td');
|
||||
document.getElementById('formCode').value=cells[0].textContent;
|
||||
document.getElementById('formCode').disabled=true;
|
||||
document.getElementById('formName').value=cells[1].textContent;
|
||||
document.getElementById('formBuiltin').value=cells[2].textContent.trim()==='是'?'1':'0';
|
||||
document.getElementById('formRemark').value=cells[3].textContent;
|
||||
}else{
|
||||
title.textContent='新增字典';
|
||||
document.getElementById('formCode').value='';
|
||||
document.getElementById('formCode').disabled=false;
|
||||
document.getElementById('formName').value='';
|
||||
document.getElementById('formBuiltin').value='0';
|
||||
document.getElementById('formRemark').value='';
|
||||
}
|
||||
modal.classList.add('show');
|
||||
}
|
||||
function closeDialog(e){
|
||||
if(e&&e.target!==e.currentTarget)return;
|
||||
document.getElementById('dictModal').classList.remove('show');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,225 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>营养管理 - 新增餐品 | 健康长庆原型</title>
|
||||
<style>
|
||||
*{box-sizing:border-box;margin:0;padding:0;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#F5F7FA;color:#333;min-width:1280px;}
|
||||
:root{
|
||||
--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;
|
||||
--text-primary:#333;--text-secondary:#666;--text-placeholder:#999;--border:#E8E8E8;--background:#F5F7FA;
|
||||
--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--font-xxl:24px;
|
||||
--radius-sm:4px;--radius-md:8px;--radius-lg:12px;
|
||||
--shadow-sm:0 1px 4px rgba(0,0,0,0.08);--shadow-md:0 4px 12px rgba(0,0,0,0.12);
|
||||
}
|
||||
.top-bar{display:flex;align-items:center;height:56px;background:#001529;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;}
|
||||
.top-bar__logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:var(--font-lg);font-weight:600;white-space:nowrap;width:240px;flex-shrink:0;}
|
||||
.top-bar__logo svg{width:28px;height:28px;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.top-bar__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.top-bar__right .btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.top-bar__right .btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);cursor:pointer;}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;text-transform:uppercase;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.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;}
|
||||
.sidebar-subgroup__header{display:flex;align-items:center;gap:6px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;user-select:none;}
|
||||
.sidebar-subgroup__header:hover{color:rgba(255,255,255,0.85);background:rgba(255,255,255,0.04);}
|
||||
.sidebar-subgroup__header .arrow{width:10px;height:10px;transition:transform .2s;flex-shrink:0;}
|
||||
.sidebar-subgroup__header .arrow path{stroke:rgba(255,255,255,0.45);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header{color:rgba(255,255,255,0.85);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header .arrow{transform:rotate(90deg);}
|
||||
.sidebar-subgroup__body{display:none;padding-left:16px;}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__body{display:block;}
|
||||
.sidebar-subgroup__body .sidebar-item{padding-left:36px;font-size:12px;}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;min-height:calc(100vh - 56px);}
|
||||
.breadcrumb{display:flex;align-items:center;gap:6px;font-size:var(--font-sm);color:var(--text-secondary);margin-bottom:16px;}
|
||||
.breadcrumb a{color:var(--primary);text-decoration:none;}.breadcrumb a:hover{text-decoration:underline;}
|
||||
.breadcrumb__sep{color:var(--text-placeholder);}
|
||||
.form-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);padding:24px;margin-bottom:16px;}
|
||||
.form-card__title{font-size:var(--font-base);font-weight:600;margin-bottom:20px;padding-bottom:12px;border-bottom:1px solid var(--border);}
|
||||
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px 24px;}
|
||||
.form-group{display:flex;flex-direction:column;gap:6px;}
|
||||
.form-group.full{grid-column:1/-1;}
|
||||
.form-label{font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
.form-label .required{color:var(--danger);margin-left:2px;}
|
||||
.form-input,.form-select,.form-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;width:100%;}
|
||||
.form-input:focus,.form-select:focus,.form-textarea:focus{border-color:var(--primary);}
|
||||
.form-textarea{height:80px;padding:8px 12px;resize:vertical;}
|
||||
.form-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;}
|
||||
.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;text-decoration:none;}
|
||||
.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);}
|
||||
.form-footer{display:flex;align-items:center;gap:12px;margin-top:24px;padding-top:16px;border-top:1px solid var(--border);}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- 顶部导航栏 -->
|
||||
<header class="top-bar">
|
||||
<div class="top-bar__logo">
|
||||
<svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M7 14h14M14 7v14" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/></svg>
|
||||
营养管理
|
||||
</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="trace-query.html">溯源总览</a>
|
||||
<a href="arc-employee.html">档案</a>
|
||||
<a href="farm-land.html">绿色种采</a>
|
||||
<a href="sup-hygiene-check.html">卫生供应</a>
|
||||
<a href="prod-qc-daily.html">健康生产</a>
|
||||
<a href="din-dict-mgmt.html" class="active">营养用餐</a>
|
||||
<a href="ano-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<a href="../../index.html" class="btn-back">← 返回首页</a>
|
||||
<div class="avatar">管</div>
|
||||
<span>系统管理员 ▾</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- 侧边栏 -->
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">营养用餐</div>
|
||||
<a href="din-dict-mgmt.html" class="sidebar-item"><span class="mi">📖</span>字典管理</a>
|
||||
<a href="prod-qc-nutrition.html" class="sidebar-item"><span class="mi">🔬</span>营养检验</a>
|
||||
<a href="din-ingredient.html" class="sidebar-item"><span class="mi">🧪</span>食物成分</a>
|
||||
<a href="din-dish-all.html" class="sidebar-item active"><span class="mi">🍽️</span>餐品总库</a>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 10 10" fill="none"><path d="M3 1l4 4-4 4" stroke-width="1.5"/></svg>
|
||||
📐 算法标准
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="din-algo-population.html" class="sidebar-item"><span class="mi">👥</span>人群基础标准</a>
|
||||
<a href="din-algo-vip.html" class="sidebar-item"><span class="mi">👑</span>VIP定制标准</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="din-recipe-mgmt.html" class="sidebar-item"><span class="mi">📋</span>食谱管理</a>
|
||||
<a href="din-order-meal.html" class="sidebar-item"><span class="mi">🍱</span>营养点餐</a>
|
||||
<a href="din-user-mgmt.html" class="sidebar-item"><span class="mi">👤</span>用户管理</a>
|
||||
<a href="din-order-line.html" class="sidebar-item"><span class="mi">🍳</span>餐线管理</a>
|
||||
<a href="din-order-pickup.html" class="sidebar-item"><span class="mi">🎫</span>取餐管理</a>
|
||||
<a href="din-data-consume.html" class="sidebar-item"><span class="mi">💰</span>消费管理</a>
|
||||
<a href="din-data-nutri.html" class="sidebar-item"><span class="mi">📊</span>营养管理</a>
|
||||
<a href="din-data-benefit.html" class="sidebar-item"><span class="mi">📈</span>餐材效益</a>
|
||||
<a href="din-terminal.html" class="sidebar-item"><span class="mi">🖥️</span>终端管理</a>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 10 10" fill="none"><path d="M3 1l4 4-4 4" stroke-width="1.5"/></svg>
|
||||
🤖 模型管理
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="din-model-llm.html" class="sidebar-item"><span class="mi">🧠</span>大模型管理</a>
|
||||
<a href="din-model-small.html" class="sidebar-item"><span class="mi">⚙️</span>小模型管理</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="din-innovation.html" class="sidebar-item"><span class="mi">💡</span>味养创新</a>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容 -->
|
||||
<main class="main">
|
||||
<!-- 面包屑 -->
|
||||
<div class="breadcrumb">
|
||||
<a href="din-dish-all.html">餐品总库</a>
|
||||
<span class="breadcrumb__sep">/</span>
|
||||
<span>新增餐品</span>
|
||||
</div>
|
||||
|
||||
<!-- 表单 -->
|
||||
<div class="form-card">
|
||||
<div class="form-card__title">新增餐品</div>
|
||||
<div class="form-grid">
|
||||
<!-- 第1行 -->
|
||||
<div class="form-group">
|
||||
<label class="form-label">餐品名称<span class="required">*</span></label>
|
||||
<input class="form-input" type="text" placeholder="请输入餐品名称">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">餐品分类</label>
|
||||
<select class="form-select">
|
||||
<option>请选择</option><option>主食</option><option>荤菜</option><option>素菜</option><option>汤品</option><option>小吃</option>
|
||||
</select>
|
||||
</div>
|
||||
<!-- 第2行 -->
|
||||
<div class="form-group">
|
||||
<label class="form-label">餐品标签</label>
|
||||
<input class="form-input" type="text" placeholder="低脂/高蛋白/素食/三减等，逗号分隔">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">烹饪方法</label>
|
||||
<select class="form-select">
|
||||
<option>请选择</option><option>炒</option><option>蒸</option><option>炖</option><option>煮</option><option>凉拌</option><option>炸</option><option>烤</option>
|
||||
</select>
|
||||
</div>
|
||||
<!-- 第3行 -->
|
||||
<div class="form-group">
|
||||
<label class="form-label">适用餐次</label>
|
||||
<input class="form-input" type="text" placeholder="早/午/晚，逗号分隔">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">过敏原</label>
|
||||
<input class="form-input" type="text" placeholder="如：含蛋类/含麸质，无则填无">
|
||||
</div>
|
||||
<!-- 第4行：食材清单（整行） -->
|
||||
<div class="form-group full">
|
||||
<label class="form-label">食材清单（食材名:用量g）</label>
|
||||
<textarea class="form-textarea" placeholder="如：猪五花肉:160, 生姜:5, 生抽:15"></textarea>
|
||||
</div>
|
||||
<!-- 第5行 -->
|
||||
<div class="form-group">
|
||||
<label class="form-label">规格</label>
|
||||
<select class="form-select">
|
||||
<option>请选择</option><option>小组(4份)</option><option>中组(8份)</option><option>大组(16份)</option><option>多人组(30份)</option><option>自定义</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">单位重量(g)<span class="required">*</span></label>
|
||||
<input class="form-input" type="number" placeholder="请输入单位重量">
|
||||
</div>
|
||||
<!-- 第6行 -->
|
||||
<div class="form-group">
|
||||
<label class="form-label">售价(元/份)<span class="required">*</span></label>
|
||||
<input class="form-input" type="number" placeholder="请输入售价">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">热量(kcal/份)</label>
|
||||
<input class="form-input" type="number" placeholder="请输入热量">
|
||||
</div>
|
||||
<!-- 第7行 -->
|
||||
<div class="form-group">
|
||||
<label class="form-label">蛋白质(g/份)</label>
|
||||
<input class="form-input" type="number" placeholder="请输入蛋白质含量">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">脂肪(g/份)</label>
|
||||
<input class="form-input" type="number" placeholder="请输入脂肪含量">
|
||||
</div>
|
||||
<!-- 第8行 -->
|
||||
<div class="form-group">
|
||||
<label class="form-label">碳水化合物(g/份)</label>
|
||||
<input class="form-input" type="number" placeholder="请输入碳水化合物含量">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">钠(mg/份)</label>
|
||||
<input class="form-input" type="number" placeholder="请输入钠含量">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-footer">
|
||||
<a href="din-dish-all.html" class="btn btn-default">取消</a>
|
||||
<button class="btn btn-primary">确定</button>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<script>
|
||||
function toggleSubgroup(header){header.parentElement.classList.toggle('open');}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,165 @@
|
||||
<!DOCTYPE html>
|
||||
<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;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:rgba(0,0,0,0.45);margin:0;display:flex;align-items:center;justify-content:center;min-height:100vh;}
|
||||
:root{
|
||||
--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;
|
||||
--text-primary:#333;--text-secondary:#666;--text-placeholder:#999;--border:#E8E8E8;
|
||||
--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;
|
||||
--radius-sm:4px;--radius-md:8px;--radius-lg:12px;
|
||||
--shadow-md:0 4px 12px rgba(0,0,0,0.12);
|
||||
}
|
||||
/* 弹窗容器 */
|
||||
.dialog{background:#fff;border-radius:var(--radius-lg);width:680px;max-width:90vw;box-shadow:var(--shadow-md);}
|
||||
.dialog__header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px 16px;border-bottom:1px solid var(--border);}
|
||||
.dialog__title{font-size:var(--font-lg);font-weight:600;color:var(--text-primary);}
|
||||
.dialog__close{width:32px;height:32px;border:none;background:none;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);color:var(--text-placeholder);}
|
||||
.dialog__close:hover{background:#F5F5F5;color:var(--text-primary);}
|
||||
.dialog__body{padding:24px;max-height:70vh;overflow-y:auto;}
|
||||
/* 表单元素 */
|
||||
.form-group{margin-bottom:20px;}
|
||||
.form-group label{display:block;font-size:var(--font-sm);color:var(--text-primary);margin-bottom:8px;font-weight:500;}
|
||||
.form-group label .required{color:var(--danger);margin-left:2px;}
|
||||
.form-input{width:100%;height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);outline:none;}
|
||||
.form-input:focus{border-color:var(--primary);}
|
||||
.form-select{width:100%;height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);outline:none;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 12px center;}
|
||||
.form-textarea{width:100%;height:80px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:8px 12px;font-size:var(--font-sm);outline:none;resize:vertical;font-family:inherit;}
|
||||
.form-textarea:focus{border-color:var(--primary);}
|
||||
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
|
||||
.dialog__footer{display:flex;justify-content:flex-end;gap:8px;padding:16px 24px;border-top:1px solid var(--border);}
|
||||
.btn{height:36px;padding:0 20px;border-radius:var(--radius-sm);font-size:var(--font-sm);cursor:pointer;border:none;transition:all .2s;}
|
||||
.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);}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- 新增餐品弹窗 -->
|
||||
<div class="dialog">
|
||||
<div class="dialog__header">
|
||||
<div class="dialog__title">新增餐品</div>
|
||||
<button class="dialog__close" onclick="window.close()">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M1 1l12 12M13 1L1 13" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="dialog__body">
|
||||
<!-- 第1行：餐品名称 / 餐品分类 -->
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label>餐品名称<span class="required">*</span></label>
|
||||
<input class="form-input" type="text" placeholder="请输入餐品名称">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>餐品分类</label>
|
||||
<select class="form-select">
|
||||
<option>请选择</option>
|
||||
<option>主食</option>
|
||||
<option>荤菜</option>
|
||||
<option>素菜</option>
|
||||
<option>汤品</option>
|
||||
<option>小吃</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 第2行：餐品标签 / 烹饪方法 -->
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label>餐品标签</label>
|
||||
<input class="form-input" type="text" placeholder="低脂/高蛋白/素食/三减等，逗号分隔">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>烹饪方法</label>
|
||||
<select class="form-select">
|
||||
<option>请选择</option>
|
||||
<option>炒</option>
|
||||
<option>蒸</option>
|
||||
<option>炖</option>
|
||||
<option>煮</option>
|
||||
<option>凉拌</option>
|
||||
<option>炸</option>
|
||||
<option>烤</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 第3行：适用餐次 / 过敏原 -->
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label>适用餐次</label>
|
||||
<input class="form-input" type="text" placeholder="早/午/晚，逗号分隔">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>过敏原</label>
|
||||
<input class="form-input" type="text" placeholder="如：含蛋类/含麸质，无则填无">
|
||||
</div>
|
||||
</div>
|
||||
<!-- 第4行：食材清单（整行） -->
|
||||
<div class="form-group">
|
||||
<label>食材清单（食材名:用量g）</label>
|
||||
<textarea class="form-textarea" placeholder="如：猪五花肉:160, 生姜:5, 生抽:15"></textarea>
|
||||
</div>
|
||||
<!-- 第5行：规格 / 单位重量(g) -->
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label>规格</label>
|
||||
<select class="form-select">
|
||||
<option>请选择</option>
|
||||
<option>小组(4份)</option>
|
||||
<option>中组(8份)</option>
|
||||
<option>大组(16份)</option>
|
||||
<option>多人组(30份)</option>
|
||||
<option>自定义</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>单位重量(g)<span class="required">*</span></label>
|
||||
<input class="form-input" type="number" placeholder="请输入单位重量">
|
||||
</div>
|
||||
</div>
|
||||
<!-- 第6行：售价(元/份) / 热量(kcal/份) -->
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label>售价(元/份)<span class="required">*</span></label>
|
||||
<input class="form-input" type="number" placeholder="请输入售价">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>热量(kcal/份)</label>
|
||||
<input class="form-input" type="number" placeholder="请输入热量">
|
||||
</div>
|
||||
</div>
|
||||
<!-- 第7行：蛋白质(g/份) / 脂肪(g/份) -->
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label>蛋白质(g/份)</label>
|
||||
<input class="form-input" type="number" placeholder="请输入蛋白质含量">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>脂肪(g/份)</label>
|
||||
<input class="form-input" type="number" placeholder="请输入脂肪含量">
|
||||
</div>
|
||||
</div>
|
||||
<!-- 第8行：碳水化合物(g/份) / 钠(mg/份) -->
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label>碳水化合物(g/份)</label>
|
||||
<input class="form-input" type="number" placeholder="请输入碳水化合物含量">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>钠(mg/份)</label>
|
||||
<input class="form-input" type="number" placeholder="请输入钠含量">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dialog__footer">
|
||||
<button class="btn btn-default" onclick="window.close()">取消</button>
|
||||
<button class="btn btn-primary">确定</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,637 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>营养管理 - 餐品总库 | 健康长庆原型</title>
|
||||
<style>
|
||||
*{box-sizing:border-box;margin:0;padding:0;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#F5F7FA;color:#333;min-width:1280px;}
|
||||
:root{
|
||||
--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;
|
||||
--text-primary:#333;--text-secondary:#666;--text-placeholder:#999;--border:#E8E8E8;--background:#F5F7FA;
|
||||
--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--font-xxl:24px;
|
||||
--radius-sm:4px;--radius-md:8px;--radius-lg:12px;
|
||||
--shadow-sm:0 1px 4px rgba(0,0,0,0.08);--shadow-md:0 4px 12px rgba(0,0,0,0.12);
|
||||
}
|
||||
.top-bar{display:flex;align-items:center;height:56px;background:#001529;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;}
|
||||
.top-bar__logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:var(--font-lg);font-weight:600;white-space:nowrap;width:240px;flex-shrink:0;}
|
||||
.top-bar__logo svg{width:28px;height:28px;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.top-bar__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.top-bar__right .btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.top-bar__right .btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);cursor:pointer;}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;text-transform:uppercase;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.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;}
|
||||
.action-bar{display:flex;align-items:center;gap:8px;margin-bottom:16px;}
|
||||
.sidebar-subgroup__header{display:flex;align-items:center;gap:6px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;user-select:none;}
|
||||
.sidebar-subgroup__header:hover{color:rgba(255,255,255,0.85);background:rgba(255,255,255,0.04);}
|
||||
.sidebar-subgroup__header .arrow{width:10px;height:10px;transition:transform .2s;flex-shrink:0;}
|
||||
.sidebar-subgroup__header .arrow path{stroke:rgba(255,255,255,0.45);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header{color:rgba(255,255,255,0.85);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header .arrow{transform:rotate(90deg);}
|
||||
.sidebar-subgroup__body{display:none;padding-left:16px;}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__body{display:block;}
|
||||
.sidebar-subgroup__body .sidebar-item{padding-left:36px;font-size:12px;}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;min-height:calc(100vh - 56px);}
|
||||
.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;}
|
||||
.stat-card__icon.blue{background:var(--primary-light);}
|
||||
.stat-card__icon.green{background:#F6FFED;}
|
||||
.stat-card__icon.orange{background:#FFF7E6;}
|
||||
.stat-card__icon.red{background:#FFF1F0;}
|
||||
.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-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;}
|
||||
.filter-input:focus{border-color:var(--primary);}
|
||||
.filter-select{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);color:var(--text-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='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;cursor:pointer;min-width:120px;}
|
||||
.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;text-decoration:none;}
|
||||
.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;}
|
||||
.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);margin-right:4px;}
|
||||
.tag-blue{background:var(--primary-light);color:var(--primary);}
|
||||
.tag-green{background:#F6FFED;color:var(--success);}
|
||||
.tag-orange{background:#FFF7E6;color:var(--warning);}
|
||||
.tag-red{background:#FFF1F0;color:var(--danger);}
|
||||
.tag-gray{background:#F5F5F5;color:#999;}
|
||||
.link{color:var(--primary);cursor:pointer;font-size:var(--font-sm);text-decoration:none;}.link:hover{color:#40a9ff;}
|
||||
.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);}
|
||||
/* 子表格展开样式 */
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- 顶部导航栏 -->
|
||||
<header class="top-bar">
|
||||
<div class="top-bar__logo">
|
||||
<svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M7 14h14M14 7v14" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/></svg>
|
||||
营养管理
|
||||
</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="trace-query.html">溯源总览</a>
|
||||
<a href="arc-employee.html">档案</a>
|
||||
<a href="farm-land.html">绿色种采</a>
|
||||
<a href="sup-hygiene-check.html">卫生供应</a>
|
||||
<a href="prod-qc-daily.html">健康生产</a>
|
||||
<a href="din-dict-mgmt.html" class="active">营养用餐</a>
|
||||
<a href="ano-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<a href="../../index.html" class="btn-back">← 返回首页</a>
|
||||
<div class="avatar">管</div>
|
||||
<span>系统管理员 ▾</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- 侧边栏：营养用餐 -->
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">营养用餐</div>
|
||||
<a href="din-dict-mgmt.html" class="sidebar-item"><span class="mi">📖</span>字典管理</a>
|
||||
<a href="prod-qc-nutrition.html" class="sidebar-item"><span class="mi">🔬</span>营养检验</a>
|
||||
<a href="din-ingredient.html" class="sidebar-item"><span class="mi">🧪</span>食物成分</a>
|
||||
<a href="din-dish-all.html" class="sidebar-item active"><span class="mi">🍽️</span>餐品总库</a>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 10 10" fill="none"><path d="M3 1l4 4-4 4" stroke-width="1.5"/></svg>
|
||||
📐 算法标准
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="din-algo-population.html" class="sidebar-item"><span class="mi">👥</span>人群基础标准</a>
|
||||
<a href="din-algo-vip.html" class="sidebar-item"><span class="mi">👑</span>VIP定制标准</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="din-recipe-mgmt.html" class="sidebar-item"><span class="mi">📋</span>食谱管理</a>
|
||||
<a href="din-order-meal.html" class="sidebar-item"><span class="mi">🍱</span>营养点餐</a>
|
||||
<a href="din-user-mgmt.html" class="sidebar-item"><span class="mi">👤</span>用户管理</a>
|
||||
<a href="din-order-line.html" class="sidebar-item"><span class="mi">🍳</span>餐线管理</a>
|
||||
<a href="din-order-pickup.html" class="sidebar-item"><span class="mi">🎫</span>取餐管理</a>
|
||||
<a href="din-data-consume.html" class="sidebar-item"><span class="mi">💰</span>消费管理</a>
|
||||
<a href="din-data-nutri.html" class="sidebar-item"><span class="mi">📊</span>营养管理</a>
|
||||
<a href="din-data-benefit.html" class="sidebar-item"><span class="mi">📈</span>餐材效益</a>
|
||||
<a href="din-terminal.html" class="sidebar-item"><span class="mi">🖥️</span>终端管理</a>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 10 10" fill="none"><path d="M3 1l4 4-4 4" stroke-width="1.5"/></svg>
|
||||
🤖 模型管理
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="din-model-llm.html" class="sidebar-item"><span class="mi">🧠</span>大模型管理</a>
|
||||
<a href="din-model-small.html" class="sidebar-item"><span class="mi">⚙️</span>小模型管理</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="din-innovation.html" class="sidebar-item"><span class="mi">💡</span>味养创新</a>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容 -->
|
||||
<main class="main">
|
||||
<!-- 统计卡片 -->
|
||||
<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">486</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">312</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">312道</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>
|
||||
</div>
|
||||
|
||||
<!-- 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(5)">🫦 口感档案</div>
|
||||
<div class="page-tab" onclick="switchTab(6)">🖼️ 图片库</div>
|
||||
<div class="page-tab" onclick="switchTab(7)">🎬 视频库</div>
|
||||
</div>
|
||||
|
||||
<!-- Tab1: 基本档案 -->
|
||||
<div class="tab-panel active">
|
||||
<div class="filter-bar">
|
||||
<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><option>小吃</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><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">
|
||||
<a href="din-dish-add.html" class="btn btn-primary">➕ 新增餐品</a>
|
||||
<button class="btn btn-default">🔄 同步营养检验数据</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>单位重量(g)</th><th>售价(元/份)</th><th>烹饪方法</th><th>适用餐次</th><th>过敏原</th><th>热量(kcal/份)</th><th>蛋白质(g)</th><th>脂肪(g)</th><th>碳水(g)</th><th>钠(mg)</th><th>上架状态</th><th>操作</th>
|
||||
</tr></thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>DISH001</td><td>红烧肉</td><td>荤菜</td><td>高蛋白</td><td>标准份</td><td>200</td><td>¥12.0</td><td>炖</td><td>午/晚</td><td>无</td><td>385</td><td>18.2</td><td>28.6</td><td>12.4</td><td>486</td>
|
||||
<td><span class="tag tag-green">上架</span></td>
|
||||
<td><a class="link" href="din-dish-composition.html?id=DISH001">餐品构成</a> <span class="link">编辑</span> <span class="link">详情</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>DISH002</td><td>清炒时蔬</td><td>素菜</td><td>低脂/素食</td><td>标准份</td><td>150</td><td>¥6.0</td><td>炒</td><td>早/午/晚</td><td>无</td><td>68</td><td>2.1</td><td>3.2</td><td>8.6</td><td>186</td>
|
||||
<td><span class="tag tag-green">上架</span></td>
|
||||
<td><a class="link" href="din-dish-composition.html?id=DISH002">餐品构成</a> <span class="link">编辑</span> <span class="link">详情</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>DISH003</td><td>番茄鸡蛋汤</td><td>汤品</td><td>低卡</td><td>标准份</td><td>300</td><td>¥5.0</td><td>煮</td><td>午/晚</td><td>含蛋类</td><td>45</td><td>3.8</td><td>2.1</td><td>4.2</td><td>280</td>
|
||||
<td><span class="tag tag-green">上架</span></td>
|
||||
<td><a class="link" href="din-dish-composition.html?id=DISH003">餐品构成</a> <span class="link">编辑</span> <span class="link">详情</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>DISH004</td><td>米饭</td><td>主食</td><td>主食</td><td>标准份</td><td>200</td><td>¥3.0</td><td>蒸</td><td>早/午/晚</td><td>无</td><td>232</td><td>4.8</td><td>0.6</td><td>51.2</td><td>3</td>
|
||||
<td><span class="tag tag-green">上架</span></td>
|
||||
<td><a class="link" href="din-dish-composition.html?id=DISH004">餐品构成</a> <span class="link">编辑</span> <span class="link">详情</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>DISH005</td><td>糖醋里脊</td><td>荤菜</td><td>高糖</td><td>标准份</td><td>180</td><td>¥14.0</td><td>炸</td><td>午</td><td>无</td><td>420</td><td>22.4</td><td>18.6</td><td>38.2</td><td>620</td>
|
||||
<td><span class="tag tag-gray">下架</span></td>
|
||||
<td><a class="link" href="din-dish-composition.html?id=DISH005">餐品构成</a> <span class="link">编辑</span> <span class="link">详情</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>显示 5 条，共 486 条</span>
|
||||
<button class="page-btn">‹</button>
|
||||
<button class="page-btn active">1</button>
|
||||
<button class="page-btn">2</button>
|
||||
<button class="page-btn">3</button>
|
||||
<button class="page-btn">4</button>
|
||||
<button class="page-btn">5</button>
|
||||
<button class="page-btn">›</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tab2: 烹饪工艺 -->
|
||||
<div class="tab-panel">
|
||||
<div class="filter-bar">
|
||||
<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><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>
|
||||
<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>烹饪时长(min)</th><th>油用量(g)</th><th>盐用量(g)</th><th>烹饪温度(℃)</th><th>标准份出品量(g)</th><th>工艺步骤数</th><th>操作</th>
|
||||
</tr></thead>
|
||||
<tbody>
|
||||
<tr><td>DISH001</td><td>红烧肉</td><td>炖</td><td>煎</td><td>中火→小火</td><td>45</td><td>15</td><td>3</td><td>100→80</td><td>200</td><td>6</td><td><span class="link">编辑</span> <span class="link">详情</span></td></tr>
|
||||
<tr><td>DISH002</td><td>清炒时蔬</td><td>炒</td><td>—</td><td>大火</td><td>5</td><td>8</td><td>2</td><td>200</td><td>150</td><td>4</td><td><span class="link">编辑</span> <span class="link">详情</span></td></tr>
|
||||
<tr><td>DISH003</td><td>番茄鸡蛋汤</td><td>煮</td><td>炒</td><td>中火</td><td>12</td><td>5</td><td>2</td><td>100</td><td>300</td><td>5</td><td><span class="link">编辑</span> <span class="link">详情</span></td></tr>
|
||||
<tr><td>DISH004</td><td>米饭</td><td>蒸</td><td>—</td><td>大火→中火</td><td>30</td><td>0</td><td>0</td><td>100</td><td>200</td><td>2</td><td><span class="link">编辑</span> <span class="link">详情</span></td></tr>
|
||||
<tr><td>DISH005</td><td>糖醋里脊</td><td>炸</td><td>炒</td><td>大火</td><td>15</td><td>50</td><td>1</td><td>180</td><td>180</td><td>7</td><td><span class="link">编辑</span> <span class="link">详情</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>显示 5 条，共 486 条</span>
|
||||
<button class="page-btn">‹</button>
|
||||
<button class="page-btn active">1</button>
|
||||
<button class="page-btn">2</button>
|
||||
<button class="page-btn">3</button>
|
||||
<button class="page-btn">›</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tab3: 营养指标 -->
|
||||
<div class="tab-panel">
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item"><label>餐品名称</label><input class="filter-input" placeholder="请输入餐品名称"></div>
|
||||
<div class="filter-item"><label>GI等级</label>
|
||||
<select class="filter-select"><option>全部</option><option>低GI</option><option>中GI</option><option>高GI</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-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="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>GI值</th><th>GI等级</th><th>GL值</th><th>SI值</th><th>ORAC值</th><th>嘌呤(mg/100g)</th><th>胆固醇(mg/份)</th><th>反式脂肪(g/份)</th><th>膳食宝塔分类</th><th>操作</th>
|
||||
</tr></thead>
|
||||
<tbody>
|
||||
<tr><td>DISH001</td><td>红烧肉</td><td>52</td><td><span class="tag tag-orange">中GI</span></td><td>18.6</td><td>68</td><td>420</td><td>120</td><td>86</td><td>0.2</td><td>畜禽肉蛋水产</td><td><span class="link">编辑</span> <span class="link">详情</span></td></tr>
|
||||
<tr><td>DISH002</td><td>清炒时蔬</td><td>15</td><td><span class="tag tag-green">低GI</span></td><td>2.1</td><td>142</td><td>2860</td><td>18</td><td>0</td><td>0</td><td>蔬菜</td><td><span class="link">编辑</span> <span class="link">详情</span></td></tr>
|
||||
<tr><td>DISH003</td><td>番茄鸡蛋汤</td><td>35</td><td><span class="tag tag-green">低GI</span></td><td>4.8</td><td>128</td><td>1240</td><td>42</td><td>186</td><td>0</td><td>蔬菜+蛋类</td><td><span class="link">编辑</span> <span class="link">详情</span></td></tr>
|
||||
<tr><td>DISH004</td><td>米饭</td><td>83</td><td><span class="tag tag-red">高GI</span></td><td>33.2</td><td>52</td><td>180</td><td>0</td><td>0</td><td>0</td><td>谷薯杂豆</td><td><span class="link">编辑</span> <span class="link">详情</span></td></tr>
|
||||
<tr><td>DISH005</td><td>糖醋里脊</td><td>68</td><td><span class="tag tag-orange">中GI</span></td><td>28.4</td><td>45</td><td>380</td><td>98</td><td>72</td><td>0.8</td><td>畜禽肉蛋水产</td><td><span class="link">编辑</span> <span class="link">详情</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>显示 5 条，共 312 条</span>
|
||||
<button class="page-btn">‹</button>
|
||||
<button class="page-btn active">1</button>
|
||||
<button class="page-btn">2</button>
|
||||
<button class="page-btn">3</button>
|
||||
<button class="page-btn">›</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tab4: 味道档案 -->
|
||||
<div class="tab-panel">
|
||||
<div class="filter-bar">
|
||||
<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><option>酸甜</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><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>
|
||||
</tr></thead>
|
||||
<tbody>
|
||||
<tr><td>DISH001</td><td>红烧肉</td><td>咸鲜</td><td>微甜</td><td>强</td><td>酱香浓郁，咸甜适中，肉香四溢</td>
|
||||
<td><span class="tag tag-green">成人</span><span class="tag tag-orange">老年人</span></td>
|
||||
<td><span class="tag tag-orange">适量</span></td><td>老年人控制摄入量，钠含量偏高</td><td><span class="link">编辑</span> <span class="link">详情</span></td></tr>
|
||||
<tr><td>DISH002</td><td>清炒时蔬</td><td>淡味</td><td>清香</td><td>弱</td><td>清淡爽口，蔬菜本味，微有蒜香</td>
|
||||
<td><span class="tag tag-green">全人群</span></td>
|
||||
<td><span class="tag tag-green">推荐</span></td><td>—</td><td><span class="link">编辑</span> <span class="link">详情</span></td></tr>
|
||||
<tr><td>DISH003</td><td>番茄鸡蛋汤</td><td>酸鲜</td><td>淡咸</td><td>中</td><td>酸甜开胃，汤鲜味美，口感清爽</td>
|
||||
<td><span class="tag tag-green">全人群</span><span class="tag tag-green">儿童</span></td>
|
||||
<td><span class="tag tag-green">推荐</span></td><td>—</td><td><span class="link">编辑</span> <span class="link">详情</span></td></tr>
|
||||
<tr><td>DISH004</td><td>米饭</td><td>淡味</td><td>微甜</td><td>弱</td><td>清淡微甜，米香自然，无刺激性</td>
|
||||
<td><span class="tag tag-green">全人群</span><span class="tag tag-orange">糖尿病人群</span></td>
|
||||
<td><span class="tag tag-orange">适量</span></td><td>糖尿病人群控制摄入量</td><td><span class="link">编辑</span> <span class="link">详情</span></td></tr>
|
||||
<tr><td>DISH005</td><td>糖醋里脊</td><td>酸甜</td><td>咸鲜</td><td>强</td><td>酸甜浓郁，外酥里嫩，口感丰富</td>
|
||||
<td><span class="tag tag-green">成人</span><span class="tag tag-orange">儿童</span><span class="tag tag-red">糖尿病人群</span></td>
|
||||
<td><span class="tag tag-red">慎食</span></td><td>糖尿病人群慎食，含糖量高</td><td><span class="link">编辑</span> <span class="link">详情</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>显示 5 条，共 486 条</span>
|
||||
<button class="page-btn">‹</button>
|
||||
<button class="page-btn active">1</button>
|
||||
<button class="page-btn">2</button>
|
||||
<button class="page-btn">3</button>
|
||||
<button class="page-btn">›</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tab5: 色泽档案 -->
|
||||
<div class="tab-panel">
|
||||
<div class="filter-bar">
|
||||
<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><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>
|
||||
<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>
|
||||
</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>
|
||||
</tr></thead>
|
||||
<tbody>
|
||||
<tr><td>DISH001</td><td>红烧肉</td><td>红褐色</td><td>色泽红亮，油润光泽，肉质饱满</td><td>酱油上色，焦糖化反应</td><td>优</td>
|
||||
<td><span class="tag tag-green">成人</span><span class="tag tag-orange">老年人</span></td>
|
||||
<td><span class="tag tag-orange">适量</span></td><td>老年人消化负担稍重</td><td><span class="link">编辑</span> <span class="link">详情</span></td></tr>
|
||||
<tr><td>DISH002</td><td>清炒时蔬</td><td>翠绿色</td><td>翠绿鲜亮，色泽均匀，叶片完整</td><td>叶绿素保留，大火快炒</td><td>优</td>
|
||||
<td><span class="tag tag-green">全人群</span></td>
|
||||
<td><span class="tag tag-green">推荐</span></td><td>—</td><td><span class="link">编辑</span> <span class="link">详情</span></td></tr>
|
||||
<tr><td>DISH003</td><td>番茄鸡蛋汤</td><td>橙红色</td><td>汤色橙红，蛋花嫩黄，色彩鲜艳</td><td>番茄红素，蛋黄色素</td><td>优</td>
|
||||
<td><span class="tag tag-green">全人群</span><span class="tag tag-green">儿童</span></td>
|
||||
<td><span class="tag tag-green">推荐</span></td><td>—</td><td><span class="link">编辑</span> <span class="link">详情</span></td></tr>
|
||||
<tr><td>DISH004</td><td>米饭</td><td>乳白色</td><td>洁白晶莹，颗粒饱满，有光泽</td><td>淀粉糊化，水分均匀</td><td>优</td>
|
||||
<td><span class="tag tag-green">全人群</span></td>
|
||||
<td><span class="tag tag-green">推荐</span></td><td>—</td><td><span class="link">编辑</span> <span class="link">详情</span></td></tr>
|
||||
<tr><td>DISH005</td><td>糖醋里脊</td><td>金黄色</td><td>外皮金黄酥脆，色泽均匀，油亮</td><td>高温油炸，美拉德反应</td><td>优</td>
|
||||
<td><span class="tag tag-green">成人</span><span class="tag tag-orange">老年人</span><span class="tag tag-orange">儿童</span></td>
|
||||
<td><span class="tag tag-orange">适量</span></td><td>油炸食品，老年人儿童适量</td><td><span class="link">编辑</span> <span class="link">详情</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>显示 5 条，共 486 条</span>
|
||||
<button class="page-btn">‹</button>
|
||||
<button class="page-btn active">1</button>
|
||||
<button class="page-btn">2</button>
|
||||
<button class="page-btn">3</button>
|
||||
<button class="page-btn">›</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tab6: 口感档案 -->
|
||||
<div class="tab-panel">
|
||||
<div class="filter-bar">
|
||||
<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><option>外酥内嫩</option></select>
|
||||
</div>
|
||||
<div class="filter-item"><label>咀嚼难度</label>
|
||||
<select class="filter-select"><option>全部</option><option>易</option><option>中</option><option>难</option></select>
|
||||
</div>
|
||||
<div class="filter-item"><label>适配人群</label>
|
||||
<select class="filter-select"><option>全部</option><option>全人群</option><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>
|
||||
</tr></thead>
|
||||
<tbody>
|
||||
<tr><td>DISH001</td><td>红烧肉</td><td>软烂</td><td>易</td><td>中</td><td>肥而不腻，入口即化，胶质丰富</td>
|
||||
<td><span class="tag tag-green">成人</span><span class="tag tag-green">老年人</span><span class="tag tag-orange">儿童</span></td>
|
||||
<td><span class="tag tag-orange">适量</span></td><td>儿童控制脂肪摄入</td><td><span class="link">编辑</span> <span class="link">详情</span></td></tr>
|
||||
<tr><td>DISH002</td><td>清炒时蔬</td><td>嫩脆</td><td>易</td><td>易</td><td>清脆爽口，纤维感适中，汁水丰富</td>
|
||||
<td><span class="tag tag-green">全人群</span><span class="tag tag-orange">老年人</span></td>
|
||||
<td><span class="tag tag-green">推荐</span></td><td>老年人可炒至更软</td><td><span class="link">编辑</span> <span class="link">详情</span></td></tr>
|
||||
<tr><td>DISH003</td><td>番茄鸡蛋汤</td><td>嫩滑</td><td>易</td><td>易</td><td>汤汁鲜美，蛋花嫩滑，易于消化</td>
|
||||
<td><span class="tag tag-green">全人群</span><span class="tag tag-green">婴幼儿</span><span class="tag tag-green">术后恢复</span></td>
|
||||
<td><span class="tag tag-green">推荐</span></td><td>—</td><td><span class="link">编辑</span> <span class="link">详情</span></td></tr>
|
||||
<tr><td>DISH004</td><td>米饭</td><td>软糯</td><td>易</td><td>易</td><td>颗粒分明，软糯适中，不粘不散</td>
|
||||
<td><span class="tag tag-green">全人群</span><span class="tag tag-green">老年人</span></td>
|
||||
<td><span class="tag tag-green">推荐</span></td><td>老年人可煮软一些</td><td><span class="link">编辑</span> <span class="link">详情</span></td></tr>
|
||||
<tr><td>DISH005</td><td>糖醋里脊</td><td>外酥内嫩</td><td>中</td><td>中</td><td>外皮酥脆，内里嫩滑，层次丰富</td>
|
||||
<td><span class="tag tag-green">成人</span><span class="tag tag-orange">老年人</span><span class="tag tag-red">婴幼儿</span></td>
|
||||
<td><span class="tag tag-red">慎食</span></td><td>婴幼儿不宜，油炸食品</td><td><span class="link">编辑</span> <span class="link">详情</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>显示 5 条，共 486 条</span>
|
||||
<button class="page-btn">‹</button>
|
||||
<button class="page-btn active">1</button>
|
||||
<button class="page-btn">2</button>
|
||||
<button class="page-btn">3</button>
|
||||
<button class="page-btn">›</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tab7: 图片库 -->
|
||||
<div class="tab-panel">
|
||||
<div class="filter-bar">
|
||||
<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><input class="filter-input" type="date"></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>图片ID</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>IMG-001</td><td>DISH001</td><td>红烧肉</td><td><span class="tag tag-green">主图</span></td><td>正面展示图</td><td>800×600</td><td>128KB</td><td>1</td><td>张厨师</td><td>2026-04-15</td><td><span class="link">预览</span> <span class="link">删除</span></td></tr>
|
||||
<tr><td>IMG-002</td><td>DISH001</td><td>红烧肉</td><td><span class="tag tag-blue">摆盘图</span></td><td>精美摆盘展示</td><td>1200×900</td><td>256KB</td><td>2</td><td>张厨师</td><td>2026-04-15</td><td><span class="link">预览</span> <span class="link">删除</span></td></tr>
|
||||
<tr><td>IMG-003</td><td>DISH001</td><td>红烧肉</td><td><span class="tag tag-gray">制作过程</span></td><td>炖制过程</td><td>800×600</td><td>96KB</td><td>3</td><td>张厨师</td><td>2026-04-15</td><td><span class="link">预览</span> <span class="link">删除</span></td></tr>
|
||||
<tr><td>IMG-004</td><td>DISH002</td><td>清炒时蔬</td><td><span class="tag tag-green">主图</span></td><td>正面展示图</td><td>800×600</td><td>112KB</td><td>1</td><td>李厨师</td><td>2026-04-15</td><td><span class="link">预览</span> <span class="link">删除</span></td></tr>
|
||||
<tr><td>IMG-005</td><td>DISH003</td><td>番茄鸡蛋汤</td><td><span class="tag tag-green">主图</span></td><td>正面展示图</td><td>800×600</td><td>108KB</td><td>1</td><td>王厨师</td><td>2026-04-15</td><td><span class="link">预览</span> <span class="link">删除</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>显示 5 条，共 86 条</span>
|
||||
<button class="page-btn">‹</button>
|
||||
<button class="page-btn active">1</button>
|
||||
<button class="page-btn">2</button>
|
||||
<button class="page-btn">3</button>
|
||||
<button class="page-btn">›</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tab8: 视频库 -->
|
||||
<div class="tab-panel">
|
||||
<div class="filter-bar">
|
||||
<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><input class="filter-input" type="date"></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>视频ID</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>VID-001</td><td>DISH001</td><td>红烧肉</td><td><span class="tag tag-green">烹饪教程</span></td><td>红烧肉标准制作流程</td><td>8分32秒</td><td>256MB</td><td>3,286</td><td>张厨师</td><td>2026-04-10</td><td><span class="link">播放</span> <span class="link">删除</span></td></tr>
|
||||
<tr><td>VID-002</td><td>DISH001</td><td>红烧肉</td><td><span class="tag tag-blue">宣传视频</span></td><td>红烧肉食材溯源故事</td><td>2分15秒</td><td>86MB</td><td>1,842</td><td>运营组</td><td>2026-04-12</td><td><span class="link">播放</span> <span class="link">删除</span></td></tr>
|
||||
<tr><td>VID-003</td><td>DISH002</td><td>清炒时蔬</td><td><span class="tag tag-green">烹饪教程</span></td><td>清炒时蔬大火快炒技巧</td><td>4分18秒</td><td>128MB</td><td>2,156</td><td>李厨师</td><td>2026-04-10</td><td><span class="link">播放</span> <span class="link">删除</span></td></tr>
|
||||
<tr><td>VID-004</td><td>DISH003</td><td>番茄鸡蛋汤</td><td><span class="tag tag-green">烹饪教程</span></td><td>番茄鸡蛋汤营养搭配讲解</td><td>5分42秒</td><td>168MB</td><td>4,320</td><td>营养师</td><td>2026-04-11</td><td><span class="link">播放</span> <span class="link">删除</span></td></tr>
|
||||
<tr><td>VID-005</td><td>DISH004</td><td>米饭</td><td><span class="tag tag-gray">营养科普</span></td><td>米饭GI值与血糖管理</td><td>3分28秒</td><td>96MB</td><td>5,680</td><td>营养师</td><td>2026-04-13</td><td><span class="link">播放</span> <span class="link">删除</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>显示 5 条，共 42 条</span>
|
||||
<button class="page-btn">‹</button>
|
||||
<button class="page-btn active">1</button>
|
||||
<button class="page-btn">2</button>
|
||||
<button class="page-btn">3</button>
|
||||
<button class="page-btn">›</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<script>
|
||||
// Tab 切换
|
||||
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 toggleSubgroup(header){header.parentElement.classList.toggle('open');}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,254 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>营养管理 - 餐品构成 | 健康长庆原型</title>
|
||||
<style>
|
||||
*{box-sizing:border-box;margin:0;padding:0;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#F5F7FA;color:#333;min-width:1280px;}
|
||||
:root{
|
||||
--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;
|
||||
--text-primary:#333;--text-secondary:#666;--text-placeholder:#999;--border:#E8E8E8;--background:#F5F7FA;
|
||||
--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--font-xxl:24px;
|
||||
--radius-sm:4px;--radius-md:8px;--radius-lg:12px;
|
||||
--shadow-sm:0 1px 4px rgba(0,0,0,0.08);--shadow-md:0 4px 12px rgba(0,0,0,0.12);
|
||||
}
|
||||
.top-bar{display:flex;align-items:center;height:56px;background:#001529;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;}
|
||||
.top-bar__logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:var(--font-lg);font-weight:600;white-space:nowrap;width:240px;flex-shrink:0;}
|
||||
.top-bar__logo svg{width:28px;height:28px;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.top-bar__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.top-bar__right .btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.top-bar__right .btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);cursor:pointer;}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;text-transform:uppercase;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.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;}
|
||||
.sidebar-subgroup__header{display:flex;align-items:center;gap:6px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;user-select:none;}
|
||||
.sidebar-subgroup__header:hover{color:rgba(255,255,255,0.85);background:rgba(255,255,255,0.04);}
|
||||
.sidebar-subgroup__header .arrow{width:10px;height:10px;transition:transform .2s;flex-shrink:0;}
|
||||
.sidebar-subgroup__header .arrow path{stroke:rgba(255,255,255,0.45);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header{color:rgba(255,255,255,0.85);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header .arrow{transform:rotate(90deg);}
|
||||
.sidebar-subgroup__body{display:none;padding-left:16px;}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__body{display:block;}
|
||||
.sidebar-subgroup__body .sidebar-item{padding-left:36px;font-size:12px;}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;min-height:calc(100vh - 56px);}
|
||||
.breadcrumb{display:flex;align-items:center;gap:6px;font-size:var(--font-sm);color:var(--text-secondary);margin-bottom:16px;}
|
||||
.breadcrumb a{color:var(--primary);text-decoration:none;}.breadcrumb a:hover{text-decoration:underline;}
|
||||
.breadcrumb__sep{color:var(--text-placeholder);}
|
||||
.action-bar{display:flex;align-items:center;gap:8px;margin-bottom:16px;}
|
||||
.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;text-decoration:none;}
|
||||
.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{width:100%;border-collapse:collapse;}
|
||||
th,td{padding:12px 16px;text-align:left;font-size:var(--font-sm);border-bottom:1px solid #F0F0F0;}
|
||||
th{background:#FAFAFA;color:var(--text-secondary);font-weight:500;}
|
||||
.tag{display:inline-block;padding:2px 8px;border-radius:10px;font-size:var(--font-xs);font-weight:500;}
|
||||
.tag-green{background:#F6FFED;color:#52C41A;}
|
||||
.tag-gray{background:#F5F5F5;color:#999;}
|
||||
.link{color:var(--primary);cursor:pointer;font-size:var(--font-sm);text-decoration:none;}.link:hover{color:#40a9ff;}
|
||||
.info-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);padding:20px 24px;margin-bottom:16px;display:flex;gap:32px;flex-wrap:wrap;}
|
||||
.info-item{display:flex;flex-direction:column;gap:4px;}
|
||||
.info-item__label{font-size:var(--font-xs);color:var(--text-secondary);}
|
||||
.info-item__value{font-size:var(--font-sm);color:var(--text-primary);font-weight:500;}
|
||||
/* 弹窗 */
|
||||
.dialog-mask{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.45);z-index:200;align-items:center;justify-content:center;}
|
||||
.dialog-mask.open{display:flex;}
|
||||
.dialog{background:#fff;border-radius:var(--radius-lg);width:560px;max-width:90vw;box-shadow:var(--shadow-md);}
|
||||
.dialog__header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px 16px;border-bottom:1px solid var(--border);}
|
||||
.dialog__title{font-size:var(--font-lg);font-weight:600;color:var(--text-primary);}
|
||||
.dialog__close{width:32px;height:32px;border:none;background:none;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);color:var(--text-placeholder);}
|
||||
.dialog__close:hover{background:#F5F5F5;color:var(--text-primary);}
|
||||
.dialog__body{padding:24px;}
|
||||
.dialog__footer{display:flex;justify-content:flex-end;gap:8px;padding:16px 24px;border-top:1px solid var(--border);}
|
||||
.form-group{margin-bottom:16px;}
|
||||
.form-group label{display:block;font-size:var(--font-sm);color:var(--text-primary);margin-bottom:8px;font-weight:500;}
|
||||
.form-group label .required{color:var(--danger);margin-left:2px;}
|
||||
.form-input,.form-select{width:100%;height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);outline:none;background:#fff;}
|
||||
.form-input:focus,.form-select:focus{border-color:var(--primary);}
|
||||
.form-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;}
|
||||
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- 顶部导航栏 -->
|
||||
<header class="top-bar">
|
||||
<div class="top-bar__logo">
|
||||
<svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M7 14h14M14 7v14" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/></svg>
|
||||
营养管理
|
||||
</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="trace-query.html">溯源总览</a>
|
||||
<a href="arc-employee.html">档案</a>
|
||||
<a href="farm-land.html">绿色种采</a>
|
||||
<a href="sup-hygiene-check.html">卫生供应</a>
|
||||
<a href="prod-qc-daily.html">健康生产</a>
|
||||
<a href="din-dict-mgmt.html" class="active">营养用餐</a>
|
||||
<a href="ano-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<a href="../../index.html" class="btn-back">← 返回首页</a>
|
||||
<div class="avatar">管</div>
|
||||
<span>系统管理员 ▾</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- 侧边栏 -->
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">营养用餐</div>
|
||||
<a href="din-dict-mgmt.html" class="sidebar-item"><span class="mi">📖</span>字典管理</a>
|
||||
<a href="prod-qc-nutrition.html" class="sidebar-item"><span class="mi">🔬</span>营养检验</a>
|
||||
<a href="din-ingredient.html" class="sidebar-item"><span class="mi">🧪</span>食物成分</a>
|
||||
<a href="din-dish-all.html" class="sidebar-item active"><span class="mi">🍽️</span>餐品总库</a>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 10 10" fill="none"><path d="M3 1l4 4-4 4" stroke-width="1.5"/></svg>
|
||||
📐 算法标准
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="din-algo-population.html" class="sidebar-item"><span class="mi">👥</span>人群基础标准</a>
|
||||
<a href="din-algo-vip.html" class="sidebar-item"><span class="mi">👑</span>VIP定制标准</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="din-recipe-mgmt.html" class="sidebar-item"><span class="mi">📋</span>食谱管理</a>
|
||||
<a href="din-order-meal.html" class="sidebar-item"><span class="mi">🍱</span>营养点餐</a>
|
||||
<a href="din-user-mgmt.html" class="sidebar-item"><span class="mi">👤</span>用户管理</a>
|
||||
<a href="din-order-line.html" class="sidebar-item"><span class="mi">🍳</span>餐线管理</a>
|
||||
<a href="din-order-pickup.html" class="sidebar-item"><span class="mi">🎫</span>取餐管理</a>
|
||||
<a href="din-data-consume.html" class="sidebar-item"><span class="mi">💰</span>消费管理</a>
|
||||
<a href="din-data-nutri.html" class="sidebar-item"><span class="mi">📊</span>营养管理</a>
|
||||
<a href="din-data-benefit.html" class="sidebar-item"><span class="mi">📈</span>餐材效益</a>
|
||||
<a href="din-terminal.html" class="sidebar-item"><span class="mi">🖥️</span>终端管理</a>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 10 10" fill="none"><path d="M3 1l4 4-4 4" stroke-width="1.5"/></svg>
|
||||
🤖 模型管理
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="din-model-llm.html" class="sidebar-item"><span class="mi">🧠</span>大模型管理</a>
|
||||
<a href="din-model-small.html" class="sidebar-item"><span class="mi">⚙️</span>小模型管理</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="din-innovation.html" class="sidebar-item"><span class="mi">💡</span>味养创新</a>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容 -->
|
||||
<main class="main">
|
||||
<!-- 面包屑 -->
|
||||
<div class="breadcrumb">
|
||||
<a href="din-dish-all.html">餐品总库</a>
|
||||
<span class="breadcrumb__sep">/</span>
|
||||
<span>红烧肉 - 餐品构成</span>
|
||||
</div>
|
||||
|
||||
<!-- 餐品基本信息 -->
|
||||
<div class="info-card">
|
||||
<div class="info-item"><span class="info-item__label">餐品编号</span><span class="info-item__value">DISH001</span></div>
|
||||
<div class="info-item"><span class="info-item__label">餐品名称</span><span class="info-item__value">红烧肉</span></div>
|
||||
<div class="info-item"><span class="info-item__label">餐品分类</span><span class="info-item__value">荤菜</span></div>
|
||||
<div class="info-item"><span class="info-item__label">单位重量</span><span class="info-item__value">200g</span></div>
|
||||
<div class="info-item"><span class="info-item__label">热量</span><span class="info-item__value">385 kcal/份</span></div>
|
||||
</div>
|
||||
|
||||
<!-- 操作栏 -->
|
||||
<div class="action-bar">
|
||||
<button class="btn btn-primary" onclick="openDialog()">➕ 新增食材</button>
|
||||
<a href="din-dish-all.html" class="btn btn-default">← 返回列表</a>
|
||||
</div>
|
||||
|
||||
<!-- 食材构成表格 -->
|
||||
<div class="table-card">
|
||||
<div class="table-card__header">
|
||||
<div class="table-card__title">食材构成（共 5 项）</div>
|
||||
</div>
|
||||
<table>
|
||||
<thead><tr>
|
||||
<th>食材名称</th><th>食材分类</th><th>用量(g/份)</th><th>占比(%)</th><th>加工状态</th><th>是否主料</th><th>过敏原</th><th>备注</th><th>操作</th>
|
||||
</tr></thead>
|
||||
<tbody>
|
||||
<tr><td>猪五花肉</td><td>畜肉类</td><td>160</td><td>80%</td><td>净菜</td><td><span class="tag tag-green">主料</span></td><td>无</td><td>—</td><td><span class="link">编辑</span> <span class="link">删除</span></td></tr>
|
||||
<tr><td>生姜</td><td>调料</td><td>5</td><td>2.5%</td><td>净菜</td><td><span class="tag tag-gray">辅料</span></td><td>无</td><td>—</td><td><span class="link">编辑</span> <span class="link">删除</span></td></tr>
|
||||
<tr><td>生抽</td><td>调料</td><td>15</td><td>7.5%</td><td>原料</td><td><span class="tag tag-gray">辅料</span></td><td>含麸质</td><td>酱油</td><td><span class="link">编辑</span> <span class="link">删除</span></td></tr>
|
||||
<tr><td>冰糖</td><td>调料</td><td>10</td><td>5%</td><td>原料</td><td><span class="tag tag-gray">辅料</span></td><td>无</td><td>上色提味</td><td><span class="link">编辑</span> <span class="link">删除</span></td></tr>
|
||||
<tr><td>料酒</td><td>调料</td><td>10</td><td>5%</td><td>原料</td><td><span class="tag tag-gray">辅料</span></td><td>无</td><td>去腥</td><td><span class="link">编辑</span> <span class="link">删除</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- 新增食材弹窗 -->
|
||||
<div class="dialog-mask" id="dialogMask">
|
||||
<div class="dialog">
|
||||
<div class="dialog__header">
|
||||
<div class="dialog__title">新增食材</div>
|
||||
<button class="dialog__close" onclick="closeDialog()">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M1 1l12 12M13 1L1 13" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="dialog__body">
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label>食材名称<span class="required">*</span></label>
|
||||
<input class="form-input" type="text" placeholder="请输入食材名称">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>食材分类<span class="required">*</span></label>
|
||||
<select class="form-select">
|
||||
<option>请选择</option><option>畜肉类</option><option>禽肉类</option><option>蛋类</option><option>蔬菜类</option><option>谷薯类</option><option>油脂类</option><option>调料</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label>用量(g/份)<span class="required">*</span></label>
|
||||
<input class="form-input" type="number" placeholder="请输入用量">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>加工状态</label>
|
||||
<select class="form-select">
|
||||
<option>请选择</option><option>原料</option><option>净菜</option><option>半成品</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label>是否主料</label>
|
||||
<select class="form-select">
|
||||
<option>辅料</option><option>主料</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>过敏原</label>
|
||||
<input class="form-input" type="text" placeholder="无则填无">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>备注</label>
|
||||
<input class="form-input" type="text" placeholder="请输入备注信息">
|
||||
</div>
|
||||
</div>
|
||||
<div class="dialog__footer">
|
||||
<button class="btn btn-default" onclick="closeDialog()">取消</button>
|
||||
<button class="btn btn-primary">确定</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function toggleSubgroup(header){header.parentElement.classList.toggle('open');}
|
||||
function openDialog(){document.getElementById('dialogMask').classList.add('open');}
|
||||
function closeDialog(){document.getElementById('dialogMask').classList.remove('open');}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,266 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>营养管理 - 食物成分详情 | 健康长庆原型</title>
|
||||
<style>
|
||||
*{box-sizing:border-box;margin:0;padding:0;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#F5F7FA;color:#333;min-width:1280px;}
|
||||
:root{
|
||||
--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;
|
||||
--text-primary:#333;--text-secondary:#666;--text-placeholder:#999;--border:#E8E8E8;--background:#F5F7FA;
|
||||
--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--font-xxl:24px;
|
||||
--radius-sm:4px;--radius-md:8px;--radius-lg:12px;
|
||||
--shadow-sm:0 1px 4px rgba(0,0,0,0.08);--shadow-md:0 4px 12px rgba(0,0,0,0.12);
|
||||
}
|
||||
.top-bar{display:flex;align-items:center;height:56px;background:#001529;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;}
|
||||
.top-bar__logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:var(--font-lg);font-weight:600;white-space:nowrap;width:240px;flex-shrink:0;}
|
||||
.top-bar__logo svg{width:28px;height:28px;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.top-bar__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.top-bar__right .btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.top-bar__right .btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);cursor:pointer;}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;text-transform:uppercase;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.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;}
|
||||
.sidebar-subgroup__header{display:flex;align-items:center;gap:6px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;user-select:none;}
|
||||
.sidebar-subgroup__header:hover{color:rgba(255,255,255,0.85);background:rgba(255,255,255,0.04);}
|
||||
.sidebar-subgroup__header .arrow{width:10px;height:10px;transition:transform .2s;flex-shrink:0;}
|
||||
.sidebar-subgroup__header .arrow path{stroke:rgba(255,255,255,0.45);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header{color:rgba(255,255,255,0.85);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header .arrow{transform:rotate(90deg);}
|
||||
.sidebar-subgroup__body{display:none;padding-left:16px;}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__body{display:block;}
|
||||
.sidebar-subgroup__body .sidebar-item{padding-left:36px;font-size:12px;}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;min-height:calc(100vh - 56px);}
|
||||
.breadcrumb{display:flex;align-items:center;gap:6px;font-size:var(--font-sm);color:var(--text-secondary);margin-bottom:16px;}
|
||||
.breadcrumb a{color:var(--primary);text-decoration:none;}.breadcrumb a:hover{text-decoration:underline;}
|
||||
.breadcrumb__sep{color:var(--text-placeholder);}
|
||||
.form-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);padding:24px;margin-bottom:16px;}
|
||||
.form-card__title{font-size:var(--font-base);font-weight:600;margin-bottom:20px;padding-bottom:12px;border-bottom:1px solid var(--border);}
|
||||
.form-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px 24px;}
|
||||
.form-group{display:flex;flex-direction:column;gap:6px;}
|
||||
.form-group.full{grid-column:1/-1;}
|
||||
.form-label{font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
.form-label .required{color:var(--danger);margin-left:2px;}
|
||||
.form-input,.form-select,.form-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;width:100%;}
|
||||
.form-input:focus,.form-select:focus,.form-textarea:focus{border-color:var(--primary);}
|
||||
.form-input[readonly],.form-select[disabled],.form-textarea[readonly]{background:#f5f5f5;color:var(--text-secondary);cursor:not-allowed;}
|
||||
.form-textarea{height:80px;padding:8px 12px;resize:vertical;}
|
||||
.form-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;}
|
||||
.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);}
|
||||
.btn-lg{height:40px;padding:0 24px;font-size:var(--font-base);}
|
||||
.form-footer{display:flex;align-items:center;gap:12px;margin-top:24px;padding-top:16px;border-top:1px solid var(--border);}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- 顶部导航栏 -->
|
||||
<header class="top-bar">
|
||||
<div class="top-bar__logo">
|
||||
<svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M7 14h14M14 7v14" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/></svg>
|
||||
营养管理
|
||||
</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="trace-query.html">溯源总览</a>
|
||||
<a href="arc-employee.html">档案</a>
|
||||
<a href="farm-land.html">绿色种采</a>
|
||||
<a href="sup-hygiene-check.html">卫生供应</a>
|
||||
<a href="prod-qc-daily.html">健康生产</a>
|
||||
<a href="din-dict-mgmt.html" class="active">营养用餐</a>
|
||||
<a href="ano-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<a href="../../index.html" class="btn-back">← 返回首页</a>
|
||||
<div class="avatar">管</div>
|
||||
<span>系统管理员 ▾</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- 侧边栏 -->
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">营养用餐</div>
|
||||
<a href="din-dict-mgmt.html" class="sidebar-item"><span class="mi">📖</span>字典管理</a>
|
||||
<a href="prod-qc-nutrition.html" class="sidebar-item"><span class="mi">🔬</span>营养检验</a>
|
||||
<a href="din-ingredient.html" class="sidebar-item active"><span class="mi">🧪</span>食物成分</a>
|
||||
<a href="din-dish-all.html" class="sidebar-item"><span class="mi">🍽️</span>餐品总库</a>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 10 10" fill="none"><path d="M3 1l4 4-4 4" stroke-width="1.5"/></svg>
|
||||
📐 算法标准
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="din-algo-population.html" class="sidebar-item"><span class="mi">👥</span>人群基础标准</a>
|
||||
<a href="din-algo-vip.html" class="sidebar-item"><span class="mi">👑</span>VIP定制标准</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="din-recipe-mgmt.html" class="sidebar-item"><span class="mi">📋</span>食谱管理</a>
|
||||
<a href="din-order-meal.html" class="sidebar-item"><span class="mi">🍱</span>营养点餐</a>
|
||||
<a href="din-user-mgmt.html" class="sidebar-item"><span class="mi">👤</span>用户管理</a>
|
||||
<a href="din-order-line.html" class="sidebar-item"><span class="mi">🍳</span>餐线管理</a>
|
||||
<a href="din-order-pickup.html" class="sidebar-item"><span class="mi">🎫</span>取餐管理</a>
|
||||
<a href="din-data-consume.html" class="sidebar-item"><span class="mi">💰</span>消费管理</a>
|
||||
<a href="din-data-nutri.html" class="sidebar-item"><span class="mi">📊</span>营养管理</a>
|
||||
<a href="din-data-benefit.html" class="sidebar-item"><span class="mi">📈</span>餐材效益</a>
|
||||
<a href="din-terminal.html" class="sidebar-item"><span class="mi">🖥️</span>终端管理</a>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 10 10" fill="none"><path d="M3 1l4 4-4 4" stroke-width="1.5"/></svg>
|
||||
🤖 模型管理
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="din-model-llm.html" class="sidebar-item"><span class="mi">🧠</span>大模型管理</a>
|
||||
<a href="din-model-small.html" class="sidebar-item"><span class="mi">⚙️</span>小模型管理</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="din-innovation.html" class="sidebar-item"><span class="mi">💡</span>味养创新</a>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容 -->
|
||||
<main class="main">
|
||||
<!-- 面包屑 -->
|
||||
<div class="breadcrumb">
|
||||
<a href="din-ingredient.html">食物成分</a>
|
||||
<span class="breadcrumb__sep">/</span>
|
||||
<span id="breadcrumbTitle">新增食物</span>
|
||||
</div>
|
||||
|
||||
<!-- 基本信息 -->
|
||||
<div class="form-card">
|
||||
<div class="form-card__title">基本信息</div>
|
||||
<div class="form-grid">
|
||||
<div class="form-group"><label class="form-label">食物编码<span class="required">*</span></label><input class="form-input" id="foodCode" placeholder="系统自动生成" readonly></div>
|
||||
<div class="form-group"><label class="form-label">食物名称<span class="required">*</span></label><input class="form-input" id="foodName" placeholder="请输入食物名称"></div>
|
||||
<div class="form-group"><label class="form-label">别名</label><input class="form-input" id="foodAlias" placeholder="请输入别名"></div>
|
||||
<div class="form-group"><label class="form-label">食材分类<span class="required">*</span></label><select class="form-select" id="foodCategory"><option value="">请选择</option><option>谷薯类</option><option>畜肉类</option><option>蔬菜类</option><option>蛋类</option><option>豆类</option><option>水产类</option><option>水果类</option><option>乳制品</option></select></div>
|
||||
<div class="form-group"><label class="form-label">数据来源</label><select class="form-select" id="foodSource"><option>中国食物成分表</option><option>实验室检测</option><option>企业自测</option></select></div>
|
||||
<div class="form-group"><label class="form-label">常见过敏原</label><input class="form-input" id="foodAllergen" placeholder="如：含蛋类、含大豆"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 营养成分 -->
|
||||
<div class="form-card">
|
||||
<div class="form-card__title">营养成分（每100g）</div>
|
||||
<div class="form-grid">
|
||||
<div class="form-group"><label class="form-label">热量(kcal)<span class="required">*</span></label><input class="form-input" id="energy" placeholder="0"></div>
|
||||
<div class="form-group"><label class="form-label">蛋白质(g)<span class="required">*</span></label><input class="form-input" id="protein" placeholder="0"></div>
|
||||
<div class="form-group"><label class="form-label">脂肪(g)<span class="required">*</span></label><input class="form-input" id="fat" placeholder="0"></div>
|
||||
<div class="form-group"><label class="form-label">碳水化合物(g)<span class="required">*</span></label><input class="form-input" id="carbs" placeholder="0"></div>
|
||||
<div class="form-group"><label class="form-label">膳食纤维(g)</label><input class="form-input" id="fiber" placeholder="0"></div>
|
||||
<div class="form-group"><label class="form-label">钙(mg)</label><input class="form-input" id="calcium" placeholder="0"></div>
|
||||
<div class="form-group"><label class="form-label">铁(mg)</label><input class="form-input" id="iron" placeholder="0"></div>
|
||||
<div class="form-group"><label class="form-label">钠(mg)</label><input class="form-input" id="sodium" placeholder="0"></div>
|
||||
<div class="form-group"><label class="form-label">维生素C(mg)</label><input class="form-input" id="vitC" placeholder="0"></div>
|
||||
<div class="form-group"><label class="form-label">维生素A(μg)</label><input class="form-input" id="vitA" placeholder="0"></div>
|
||||
<div class="form-group"><label class="form-label">维生素E(mg)</label><input class="form-input" id="vitE" placeholder="0"></div>
|
||||
<div class="form-group"><label class="form-label">锌(mg)</label><input class="form-input" id="zinc" placeholder="0"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 感官档案 -->
|
||||
<div class="form-card">
|
||||
<div class="form-card__title">感官档案</div>
|
||||
<div class="form-grid">
|
||||
<div class="form-group"><label class="form-label">主色系</label><input class="form-input" id="colorMain" placeholder="如：白色、深绿色"></div>
|
||||
<div class="form-group"><label class="form-label">色泽描述</label><input class="form-input" id="colorDesc" placeholder="请描述色泽特征"></div>
|
||||
<div class="form-group"><label class="form-label">感官评级</label><select class="form-select" id="sensoryGrade"><option value="">请选择</option><option>优</option><option>良</option><option>中</option><option>差</option></select></div>
|
||||
<div class="form-group"><label class="form-label">主味型</label><input class="form-input" id="tasteMain" placeholder="如：淡味、鲜味、甜味"></div>
|
||||
<div class="form-group"><label class="form-label">辅味型</label><input class="form-input" id="tasteSub" placeholder="如：微涩、豆香"></div>
|
||||
<div class="form-group"><label class="form-label">味道强度</label><select class="form-select" id="tasteLevel"><option value="">请选择</option><option>弱</option><option>中</option><option>强</option></select></div>
|
||||
<div class="form-group"><label class="form-label">主质地</label><input class="form-input" id="textureMain" placeholder="如：软糯、嫩滑、细腻"></div>
|
||||
<div class="form-group"><label class="form-label">咀嚼难度</label><select class="form-select" id="chewDiff"><option value="">请选择</option><option>易</option><option>中</option><option>难</option></select></div>
|
||||
<div class="form-group"><label class="form-label">消化难度</label><select class="form-select" id="digestDiff"><option value="">请选择</option><option>易</option><option>中</option><option>难</option></select></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 适配信息 -->
|
||||
<div class="form-card">
|
||||
<div class="form-card__title">适配信息</div>
|
||||
<div class="form-grid">
|
||||
<div class="form-group"><label class="form-label">适配人群</label><input class="form-input" id="fitPeople" placeholder="如：全人群、成人、老年人"></div>
|
||||
<div class="form-group"><label class="form-label">适配等级</label><select class="form-select" id="fitLevel"><option value="">请选择</option><option>推荐</option><option>适量</option><option>慎食</option></select></div>
|
||||
<div class="form-group"><label class="form-label">饮食禁忌说明</label><input class="form-input" id="taboo" placeholder="如：糖尿病人群注意控制量"></div>
|
||||
<div class="form-group full"><label class="form-label">烹饪建议</label><textarea class="form-textarea" id="cookAdvice" placeholder="请输入烹饪建议"></textarea></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部操作 -->
|
||||
<div class="form-footer" id="formFooter">
|
||||
<button class="btn btn-primary btn-lg" id="btnSave">保存</button>
|
||||
<a href="din-ingredient.html" class="btn btn-default btn-lg">返回列表</a>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<script>
|
||||
// 侧边栏子组展开/收起
|
||||
function toggleSubgroup(header){header.parentElement.classList.toggle('open');}
|
||||
|
||||
// 解析URL参数
|
||||
var params=new URLSearchParams(window.location.search);
|
||||
var code=params.get('code');
|
||||
var mode=params.get('mode');
|
||||
|
||||
// 根据模式设置页面标题和状态
|
||||
if(mode==='view'){
|
||||
document.getElementById('breadcrumbTitle').textContent='食物详情';
|
||||
document.title='营养管理 - 食物详情 | 健康长庆原型';
|
||||
// 详情模式：所有输入框只读
|
||||
document.querySelectorAll('.form-input,.form-select,.form-textarea').forEach(function(el){
|
||||
if(el.tagName==='SELECT'){el.disabled=true;}
|
||||
else{el.readOnly=true;}
|
||||
});
|
||||
document.getElementById('btnSave').style.display='none';
|
||||
}else if(code){
|
||||
document.getElementById('breadcrumbTitle').textContent='编辑食物';
|
||||
document.title='营养管理 - 编辑食物 | 健康长庆原型';
|
||||
}
|
||||
|
||||
// 模拟数据填充（编辑/详情模式）
|
||||
if(code){
|
||||
var mockData={
|
||||
'F001001':{name:'粳米(生)',alias:'大米',category:'谷薯类',source:'中国食物成分表',allergen:'无',energy:'346',protein:'7.4',fat:'0.8',carbs:'77.2',fiber:'0.6',calcium:'13',iron:'2.3',sodium:'3.8',vitC:'0',colorMain:'白色',colorDesc:'乳白色，半透明，颗粒饱满',sensoryGrade:'优',tasteMain:'淡味',tasteSub:'—',tasteLevel:'弱',textureMain:'软糯',chewDiff:'易',digestDiff:'易',fitPeople:'全人群、老年人、术后恢复',fitLevel:'推荐',taboo:'糖尿病人群注意控制量',cookAdvice:'熬粥质地更软，适合老年人'},
|
||||
'F002001':{name:'猪里脊肉',alias:'里脊',category:'畜肉类',source:'中国食物成分表',allergen:'无',energy:'155',protein:'20.2',fat:'7.9',carbs:'0.7',fiber:'0',calcium:'6',iron:'1.5',sodium:'43.2',vitC:'0',colorMain:'粉红色',colorDesc:'鲜嫩粉红，有光泽',sensoryGrade:'优',tasteMain:'鲜味',tasteSub:'淡咸',tasteLevel:'中',textureMain:'嫩滑',chewDiff:'中',digestDiff:'中',fitPeople:'成人、儿童',fitLevel:'适量',taboo:'肾病人群需控制蛋白质摄入',cookAdvice:'老年人建议炖煮至软烂'}
|
||||
};
|
||||
var d=mockData[code];
|
||||
if(d){
|
||||
document.getElementById('foodCode').value=code;
|
||||
document.getElementById('foodName').value=d.name||'';
|
||||
document.getElementById('foodAlias').value=d.alias||'';
|
||||
document.getElementById('foodCategory').value=d.category||'';
|
||||
document.getElementById('foodSource').value=d.source||'';
|
||||
document.getElementById('foodAllergen').value=d.allergen||'';
|
||||
document.getElementById('energy').value=d.energy||'';
|
||||
document.getElementById('protein').value=d.protein||'';
|
||||
document.getElementById('fat').value=d.fat||'';
|
||||
document.getElementById('carbs').value=d.carbs||'';
|
||||
document.getElementById('fiber').value=d.fiber||'';
|
||||
document.getElementById('calcium').value=d.calcium||'';
|
||||
document.getElementById('iron').value=d.iron||'';
|
||||
document.getElementById('sodium').value=d.sodium||'';
|
||||
document.getElementById('vitC').value=d.vitC||'';
|
||||
document.getElementById('colorMain').value=d.colorMain||'';
|
||||
document.getElementById('colorDesc').value=d.colorDesc||'';
|
||||
document.getElementById('sensoryGrade').value=d.sensoryGrade||'';
|
||||
document.getElementById('tasteMain').value=d.tasteMain||'';
|
||||
document.getElementById('tasteSub').value=d.tasteSub||'';
|
||||
document.getElementById('tasteLevel').value=d.tasteLevel||'';
|
||||
document.getElementById('textureMain').value=d.textureMain||'';
|
||||
document.getElementById('chewDiff').value=d.chewDiff||'';
|
||||
document.getElementById('digestDiff').value=d.digestDiff||'';
|
||||
document.getElementById('fitPeople').value=d.fitPeople||'';
|
||||
document.getElementById('fitLevel').value=d.fitLevel||'';
|
||||
document.getElementById('taboo').value=d.taboo||'';
|
||||
document.getElementById('cookAdvice').value=d.cookAdvice||'';
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,156 @@
|
||||
<!DOCTYPE html>
|
||||
<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;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:rgba(0,0,0,0.45);margin:0;display:flex;align-items:center;justify-content:center;min-height:100vh;}
|
||||
:root{
|
||||
--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;
|
||||
--text-primary:#333;--text-secondary:#666;--text-placeholder:#999;--border:#E8E8E8;
|
||||
--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;
|
||||
--radius-sm:4px;--radius-md:8px;--radius-lg:12px;
|
||||
--shadow-md:0 4px 12px rgba(0,0,0,0.12);
|
||||
}
|
||||
/* 弹窗容器 */
|
||||
.dialog{background:#fff;border-radius:var(--radius-lg);width:680px;max-width:90vw;box-shadow:var(--shadow-md);}
|
||||
.dialog__header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px 16px;border-bottom:1px solid var(--border);}
|
||||
.dialog__title{font-size:var(--font-lg);font-weight:600;color:var(--text-primary);}
|
||||
.dialog__close{width:32px;height:32px;border:none;background:none;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);color:var(--text-placeholder);}
|
||||
.dialog__close:hover{background:#F5F5F5;color:var(--text-primary);}
|
||||
.dialog__body{padding:24px;max-height:70vh;overflow-y:auto;}
|
||||
/* 表单元素 */
|
||||
.form-group{margin-bottom:20px;}
|
||||
.form-group label{display:block;font-size:var(--font-sm);color:var(--text-primary);margin-bottom:8px;font-weight:500;}
|
||||
.form-group label .required{color:var(--danger);margin-left:2px;}
|
||||
.form-input{width:100%;height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);outline:none;}
|
||||
.form-input:focus{border-color:var(--primary);}
|
||||
.form-select{width:100%;height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);outline:none;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 12px center;}
|
||||
.form-textarea{width:100%;height:80px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:8px 12px;font-size:var(--font-sm);outline:none;resize:vertical;font-family:inherit;}
|
||||
.form-textarea:focus{border-color:var(--primary);}
|
||||
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
|
||||
.dialog__footer{display:flex;justify-content:flex-end;gap:8px;padding:16px 24px;border-top:1px solid var(--border);}
|
||||
.btn{height:36px;padding:0 20px;border-radius:var(--radius-sm);font-size:var(--font-sm);cursor:pointer;border:none;transition:all .2s;}
|
||||
.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);}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- 新增食物弹窗 -->
|
||||
<div class="dialog">
|
||||
<div class="dialog__header">
|
||||
<div class="dialog__title">新增食物</div>
|
||||
<button class="dialog__close" onclick="window.close()">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M1 1l12 12M13 1L1 13" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="dialog__body">
|
||||
<!-- 第1行：食物名称 / 别名 -->
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label>食物名称<span class="required">*</span></label>
|
||||
<input class="form-input" type="text" placeholder="请输入食物名称">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>别名</label>
|
||||
<input class="form-input" type="text" placeholder="请输入别名">
|
||||
</div>
|
||||
</div>
|
||||
<!-- 第2行：食材分类 / 热量(kcal/100g) -->
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label>食材分类</label>
|
||||
<select class="form-select">
|
||||
<option>请选择</option>
|
||||
<option>谷薯类</option>
|
||||
<option>畜肉类</option>
|
||||
<option>禽肉类</option>
|
||||
<option>水产类</option>
|
||||
<option>蛋类</option>
|
||||
<option>奶类</option>
|
||||
<option>豆类</option>
|
||||
<option>蔬菜类</option>
|
||||
<option>水果类</option>
|
||||
<option>坚果类</option>
|
||||
<option>油脂类</option>
|
||||
<option>调料</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>热量(kcal/100g)</label>
|
||||
<input class="form-input" type="number" placeholder="请输入热量">
|
||||
</div>
|
||||
</div>
|
||||
<!-- 第3行：蛋白质(g/100g) / 脂肪(g/100g) -->
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label>蛋白质(g/100g)</label>
|
||||
<input class="form-input" type="number" placeholder="请输入蛋白质含量">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>脂肪(g/100g)</label>
|
||||
<input class="form-input" type="number" placeholder="请输入脂肪含量">
|
||||
</div>
|
||||
</div>
|
||||
<!-- 第4行：碳水化合物(g/100g) / 膳食纤维(g/100g) -->
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label>碳水化合物(g/100g)</label>
|
||||
<input class="form-input" type="number" placeholder="请输入碳水化合物含量">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>膳食纤维(g/100g)</label>
|
||||
<input class="form-input" type="number" placeholder="请输入膳食纤维含量">
|
||||
</div>
|
||||
</div>
|
||||
<!-- 第5行：钠(mg/100g) / 钙(mg/100g) -->
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label>钠(mg/100g)</label>
|
||||
<input class="form-input" type="number" placeholder="请输入钠含量">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>钙(mg/100g)</label>
|
||||
<input class="form-input" type="number" placeholder="请输入钙含量">
|
||||
</div>
|
||||
</div>
|
||||
<!-- 第6行：铁(mg/100g) / 维生素C(mg/100g) -->
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label>铁(mg/100g)</label>
|
||||
<input class="form-input" type="number" placeholder="请输入铁含量">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>维生素C(mg/100g)</label>
|
||||
<input class="form-input" type="number" placeholder="请输入维生素C含量">
|
||||
</div>
|
||||
</div>
|
||||
<!-- 第7行：常见过敏原 / 数据来源 -->
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label>常见过敏原</label>
|
||||
<input class="form-input" type="text" placeholder="如：含大豆、含乳糖、含麸质等">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>数据来源</label>
|
||||
<select class="form-select">
|
||||
<option>请选择</option>
|
||||
<option>中国食物成分表</option>
|
||||
<option>实测数据</option>
|
||||
<option>企业标准</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dialog__footer">
|
||||
<button class="btn btn-default" onclick="window.close()">取消</button>
|
||||
<button class="btn btn-primary">确定</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,425 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>营养管理 - 食物成分 | 健康长庆原型</title>
|
||||
<style>
|
||||
*{box-sizing:border-box;margin:0;padding:0;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#F5F7FA;color:#333;min-width:1280px;}
|
||||
:root{
|
||||
--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;
|
||||
--text-primary:#333;--text-secondary:#666;--text-placeholder:#999;--border:#E8E8E8;--background:#F5F7FA;
|
||||
--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--font-xxl:24px;
|
||||
--radius-sm:4px;--radius-md:8px;--radius-lg:12px;
|
||||
--shadow-sm:0 1px 4px rgba(0,0,0,0.08);--shadow-md:0 4px 12px rgba(0,0,0,0.12);
|
||||
}
|
||||
.top-bar{display:flex;align-items:center;height:56px;background:#001529;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;}
|
||||
.top-bar__logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:var(--font-lg);font-weight:600;white-space:nowrap;width:240px;flex-shrink:0;}
|
||||
.top-bar__logo svg{width:28px;height:28px;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.top-bar__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.top-bar__right .btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.top-bar__right .btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);cursor:pointer;}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;text-transform:uppercase;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.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;}
|
||||
.action-bar{display:flex;align-items:center;gap:8px;margin-bottom:16px;}
|
||||
.sidebar-subgroup__header{display:flex;align-items:center;gap:6px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;user-select:none;}
|
||||
.sidebar-subgroup__header:hover{color:rgba(255,255,255,0.85);background:rgba(255,255,255,0.04);}
|
||||
.sidebar-subgroup__header .arrow{width:10px;height:10px;transition:transform .2s;flex-shrink:0;}
|
||||
.sidebar-subgroup__header .arrow path{stroke:rgba(255,255,255,0.45);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header{color:rgba(255,255,255,0.85);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header .arrow{transform:rotate(90deg);}
|
||||
.sidebar-subgroup__body{display:none;padding-left:16px;}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__body{display:block;}
|
||||
.sidebar-subgroup__body .sidebar-item{padding-left:36px;font-size:12px;}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;min-height:calc(100vh - 56px);}
|
||||
.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;}
|
||||
.stat-card__icon.blue{background:var(--primary-light);}
|
||||
.stat-card__icon.green{background:#F6FFED;}
|
||||
.stat-card__icon.orange{background:#FFF7E6;}
|
||||
.stat-card__icon.red{background:#FFF1F0;}
|
||||
.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-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;}
|
||||
.filter-input:focus{border-color:var(--primary);}
|
||||
.filter-select{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);color:var(--text-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='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;cursor:pointer;min-width:120px;}
|
||||
.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;text-decoration:none;}
|
||||
.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;}
|
||||
.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);margin-right:4px;}
|
||||
.tag-blue{background:var(--primary-light);color:var(--primary);}
|
||||
.tag-green{background:#F6FFED;color:var(--success);}
|
||||
.tag-orange{background:#FFF7E6;color:var(--warning);}
|
||||
.tag-red{background:#FFF1F0;color:var(--danger);}
|
||||
.tag-gray{background:#F5F5F5;color:#999;}
|
||||
.link{color:var(--primary);cursor:pointer;font-size:var(--font-sm);text-decoration:none;}.link:hover{color:#40a9ff;}
|
||||
.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);}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- 顶部导航栏 -->
|
||||
<header class="top-bar">
|
||||
<div class="top-bar__logo">
|
||||
<svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M7 14h14M14 7v14" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/></svg>
|
||||
营养管理
|
||||
</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="trace-query.html">溯源总览</a>
|
||||
<a href="arc-employee.html">档案</a>
|
||||
<a href="farm-land.html">绿色种采</a>
|
||||
<a href="sup-hygiene-check.html">卫生供应</a>
|
||||
<a href="prod-qc-daily.html">健康生产</a>
|
||||
<a href="din-dict-mgmt.html" class="active">营养用餐</a>
|
||||
<a href="ano-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<a href="../../index.html" class="btn-back">← 返回首页</a>
|
||||
<div class="avatar">管</div>
|
||||
<span>系统管理员 ▾</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- 侧边栏：营养用餐 -->
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">营养用餐</div>
|
||||
<a href="din-dict-mgmt.html" class="sidebar-item"><span class="mi">📖</span>字典管理</a>
|
||||
<a href="prod-qc-nutrition.html" class="sidebar-item"><span class="mi">🔬</span>营养检验</a>
|
||||
<a href="din-ingredient.html" class="sidebar-item active"><span class="mi">🧪</span>食物成分</a>
|
||||
<a href="din-dish-all.html" class="sidebar-item"><span class="mi">🍽️</span>餐品总库</a>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 10 10" fill="none"><path d="M3 1l4 4-4 4" stroke-width="1.5"/></svg>
|
||||
📐 算法标准
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="din-algo-population.html" class="sidebar-item"><span class="mi">👥</span>人群基础标准</a>
|
||||
<a href="din-algo-vip.html" class="sidebar-item"><span class="mi">👑</span>VIP定制标准</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="din-recipe-mgmt.html" class="sidebar-item"><span class="mi">📋</span>食谱管理</a>
|
||||
<a href="din-order-meal.html" class="sidebar-item"><span class="mi">🍱</span>营养点餐</a>
|
||||
<a href="din-user-mgmt.html" class="sidebar-item"><span class="mi">👤</span>用户管理</a>
|
||||
<a href="din-order-line.html" class="sidebar-item"><span class="mi">🍳</span>餐线管理</a>
|
||||
<a href="din-order-pickup.html" class="sidebar-item"><span class="mi">🎫</span>取餐管理</a>
|
||||
<a href="din-data-consume.html" class="sidebar-item"><span class="mi">💰</span>消费管理</a>
|
||||
<a href="din-data-nutri.html" class="sidebar-item"><span class="mi">📊</span>营养管理</a>
|
||||
<a href="din-data-benefit.html" class="sidebar-item"><span class="mi">📈</span>餐材效益</a>
|
||||
<a href="din-terminal.html" class="sidebar-item"><span class="mi">🖥️</span>终端管理</a>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 10 10" fill="none"><path d="M3 1l4 4-4 4" stroke-width="1.5"/></svg>
|
||||
🤖 模型管理
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="din-model-llm.html" class="sidebar-item"><span class="mi">🧠</span>大模型管理</a>
|
||||
<a href="din-model-small.html" class="sidebar-item"><span class="mi">⚙️</span>小模型管理</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="din-innovation.html" class="sidebar-item"><span class="mi">💡</span>味养创新</a>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容 -->
|
||||
<main class="main">
|
||||
<!-- 统计卡片 -->
|
||||
<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">2,486</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">32项</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类</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">38条</div><div class="stat-card__label">含慎食人群</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 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>
|
||||
|
||||
<!-- Tab1: 营养成分 -->
|
||||
<div class="tab-panel active">
|
||||
<div class="filter-bar">
|
||||
<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><option>豆类</option></select>
|
||||
</div>
|
||||
<button class="btn btn-primary">查询</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
</div>
|
||||
<div class="action-bar">
|
||||
<a href="din-ingredient-detail.html" class="btn btn-primary">➕ 新增食物</a>
|
||||
<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>热量(kcal/100g)</th><th>蛋白质(g)</th><th>脂肪(g)</th><th>碳水(g)</th><th>膳食纤维(g)</th><th>钙(mg)</th><th>铁(mg)</th><th>钠(mg)</th><th>维生素C(mg)</th><th>常见过敏原</th><th>数据来源</th><th>操作</th>
|
||||
</tr></thead>
|
||||
<tbody>
|
||||
<tr><td>F001001</td><td>粳米(生)</td><td>大米</td><td>谷薯类</td><td>346</td><td>7.4</td><td>0.8</td><td>77.2</td><td>0.6</td><td>13</td><td>2.3</td><td>3.8</td><td>0</td><td>无</td><td>中国食物成分表</td><td><a class="link" href="din-ingredient-detail.html?code=F001001">编辑</a> <a class="link" href="din-ingredient-detail.html?code=F001001&mode=view">详情</a></td></tr>
|
||||
<tr><td>F002001</td><td>猪里脊肉</td><td>里脊</td><td>畜肉类</td><td>155</td><td>20.2</td><td>7.9</td><td>0.7</td><td>0</td><td>6</td><td>1.5</td><td>43.2</td><td>0</td><td>无</td><td>中国食物成分表</td><td><a class="link" href="din-ingredient-detail.html?code=F002001">编辑</a> <a class="link" href="din-ingredient-detail.html?code=F002001&mode=view">详情</a></td></tr>
|
||||
<tr><td>F003001</td><td>菠菜</td><td>菠菜</td><td>蔬菜类</td><td>24</td><td>2.6</td><td>0.3</td><td>3.1</td><td>1.7</td><td>66</td><td>2.9</td><td>85.2</td><td>32</td><td>无</td><td>中国食物成分表</td><td><a class="link" href="din-ingredient-detail.html?code=F003001">编辑</a> <a class="link" href="din-ingredient-detail.html?code=F003001&mode=view">详情</a></td></tr>
|
||||
<tr><td>F004001</td><td>鸡蛋</td><td>鸡蛋</td><td>蛋类</td><td>144</td><td>13.3</td><td>8.8</td><td>2.8</td><td>0</td><td>56</td><td>2.0</td><td>131.5</td><td>0</td><td>含蛋类</td><td>中国食物成分表</td><td><a class="link" href="din-ingredient-detail.html?code=F004001">编辑</a> <a class="link" href="din-ingredient-detail.html?code=F004001&mode=view">详情</a></td></tr>
|
||||
<tr><td>F005001</td><td>豆腐(北)</td><td>北豆腐</td><td>豆类</td><td>98</td><td>12.2</td><td>4.8</td><td>1.5</td><td>0.4</td><td>138</td><td>2.5</td><td>7.2</td><td>0</td><td>含大豆</td><td>中国食物成分表</td><td><a class="link" href="din-ingredient-detail.html?code=F005001">编辑</a> <a class="link" href="din-ingredient-detail.html?code=F005001&mode=view">详情</a></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>显示 5 条，共 2,486 条</span>
|
||||
<button class="page-btn">‹</button>
|
||||
<button class="page-btn active">1</button>
|
||||
<button class="page-btn">2</button>
|
||||
<button class="page-btn">3</button>
|
||||
<button class="page-btn">4</button>
|
||||
<button class="page-btn">5</button>
|
||||
<button class="page-btn">›</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tab2: 色泽档案 -->
|
||||
<div class="tab-panel">
|
||||
<div class="filter-bar">
|
||||
<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><option>深绿色</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><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>
|
||||
</tr></thead>
|
||||
<tbody>
|
||||
<tr><td>F001001</td><td>粳米(生)</td><td>白色</td><td>乳白色，半透明，颗粒饱满</td><td>淀粉主体，含少量蛋白质</td><td>优</td>
|
||||
<td><span class="tag tag-green">成人</span><span class="tag tag-green">老年人</span><span class="tag tag-green">儿童</span></td>
|
||||
<td><span class="tag tag-green">推荐</span></td><td>—</td><td><a class="link" href="din-ingredient-detail.html?code=F001001">编辑</a> <a class="link" href="din-ingredient-detail.html?code=F001001&mode=view">详情</a></td></tr>
|
||||
<tr><td>F002001</td><td>猪里脊肉</td><td>粉红色</td><td>鲜嫩粉红，有光泽，纹理细腻</td><td>肌红蛋白含量适中</td><td>优</td>
|
||||
<td><span class="tag tag-green">成人</span><span class="tag tag-orange">老年人</span></td>
|
||||
<td><span class="tag tag-orange">适量</span></td><td>老年人消化负担稍重</td><td><a class="link" href="din-ingredient-detail.html?code=F002001">编辑</a> <a class="link" href="din-ingredient-detail.html?code=F002001&mode=view">详情</a></td></tr>
|
||||
<tr><td>F003001</td><td>菠菜</td><td>深绿色</td><td>翠绿鲜亮，叶片厚实，颜色均匀</td><td>叶绿素含量丰富，含胡萝卜素</td><td>优</td>
|
||||
<td><span class="tag tag-green">成人</span><span class="tag tag-green">孕妇</span><span class="tag tag-green">贫血人群</span></td>
|
||||
<td><span class="tag tag-green">推荐</span></td><td>富含叶酸，孕妇适宜</td><td><a class="link" href="din-ingredient-detail.html?code=F003001">编辑</a> <a class="link" href="din-ingredient-detail.html?code=F003001&mode=view">详情</a></td></tr>
|
||||
<tr><td>F004001</td><td>鸡蛋</td><td>米黄色</td><td>蛋黄橙黄，蛋白透明，整体色泽亮</td><td>蛋黄富含类胡萝卜素</td><td>优</td>
|
||||
<td><span class="tag tag-green">成人</span><span class="tag tag-green">儿童</span><span class="tag tag-red">高血脂人群</span></td>
|
||||
<td><span class="tag tag-red">慎食</span></td><td>高血脂人群每日不超过1个</td><td><a class="link" href="din-ingredient-detail.html?code=F004001">编辑</a> <a class="link" href="din-ingredient-detail.html?code=F004001&mode=view">详情</a></td></tr>
|
||||
<tr><td>F005001</td><td>豆腐(北)</td><td>乳白色</td><td>洁白细腻，质地均匀，有光泽</td><td>大豆蛋白凝固，含水量高</td><td>优</td>
|
||||
<td><span class="tag tag-green">全人群</span><span class="tag tag-green">高血压人群</span></td>
|
||||
<td><span class="tag tag-green">推荐</span></td><td>低脂优质蛋白，适合多数人群</td><td><a class="link" href="din-ingredient-detail.html?code=F005001">编辑</a> <a class="link" href="din-ingredient-detail.html?code=F005001&mode=view">详情</a></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>显示 5 条，共 2,486 条</span>
|
||||
<button class="page-btn">‹</button>
|
||||
<button class="page-btn active">1</button>
|
||||
<button class="page-btn">2</button>
|
||||
<button class="page-btn">3</button>
|
||||
<button class="page-btn">›</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tab3: 味道档案 -->
|
||||
<div class="tab-panel">
|
||||
<div class="filter-bar">
|
||||
<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><option>苦味</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><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>
|
||||
</tr></thead>
|
||||
<tbody>
|
||||
<tr><td>F001001</td><td>粳米(生)</td><td>淡味</td><td>—</td><td>弱</td><td>清淡，煮熟后微甜，无异味</td>
|
||||
<td><span class="tag tag-green">全人群</span><span class="tag tag-orange">糖尿病人群</span></td>
|
||||
<td><span class="tag tag-orange">适量</span></td><td>糖尿病人群注意控制量</td><td><a class="link" href="din-ingredient-detail.html?code=F001001">编辑</a> <a class="link" href="din-ingredient-detail.html?code=F001001&mode=view">详情</a></td></tr>
|
||||
<tr><td>F002001</td><td>猪里脊肉</td><td>鲜味</td><td>淡咸</td><td>中</td><td>肉香鲜美，脂肪少，口感纯正</td>
|
||||
<td><span class="tag tag-green">成人</span><span class="tag tag-green">儿童</span><span class="tag tag-red">肾病人群</span></td>
|
||||
<td><span class="tag tag-red">慎食</span></td><td>肾病人群需控制蛋白质摄入</td><td><a class="link" href="din-ingredient-detail.html?code=F002001">编辑</a> <a class="link" href="din-ingredient-detail.html?code=F002001&mode=view">详情</a></td></tr>
|
||||
<tr><td>F003001</td><td>菠菜</td><td>淡味</td><td>微涩</td><td>弱</td><td>轻微涩感（草酸），汆烫后消失</td>
|
||||
<td><span class="tag tag-green">全人群</span><span class="tag tag-red">肾结石人群</span></td>
|
||||
<td><span class="tag tag-red">慎食</span></td><td>肾结石人群慎食，草酸含量高</td><td><a class="link" href="din-ingredient-detail.html?code=F003001">编辑</a> <a class="link" href="din-ingredient-detail.html?code=F003001&mode=view">详情</a></td></tr>
|
||||
<tr><td>F004001</td><td>鸡蛋</td><td>鲜味</td><td>淡味</td><td>中</td><td>蛋黄浓郁，蛋白清淡，整体鲜香</td>
|
||||
<td><span class="tag tag-green">成人</span><span class="tag tag-green">儿童</span></td>
|
||||
<td><span class="tag tag-green">推荐</span></td><td>优质蛋白，味道适中</td><td><a class="link" href="din-ingredient-detail.html?code=F004001">编辑</a> <a class="link" href="din-ingredient-detail.html?code=F004001&mode=view">详情</a></td></tr>
|
||||
<tr><td>F005001</td><td>豆腐(北)</td><td>淡味</td><td>豆香</td><td>弱</td><td>清淡豆香，口感温和，无刺激性</td>
|
||||
<td><span class="tag tag-green">全人群</span><span class="tag tag-orange">痛风人群</span></td>
|
||||
<td><span class="tag tag-orange">适量</span></td><td>痛风急性期适量，嘌呤含量偏高</td><td><a class="link" href="din-ingredient-detail.html?code=F005001">编辑</a> <a class="link" href="din-ingredient-detail.html?code=F005001&mode=view">详情</a></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>显示 5 条，共 2,486 条</span>
|
||||
<button class="page-btn">‹</button>
|
||||
<button class="page-btn active">1</button>
|
||||
<button class="page-btn">2</button>
|
||||
<button class="page-btn">3</button>
|
||||
<button class="page-btn">›</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tab4: 口感档案 -->
|
||||
<div class="tab-panel">
|
||||
<div class="filter-bar">
|
||||
<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><option>酥脆</option></select>
|
||||
</div>
|
||||
<div class="filter-item"><label>咀嚼难度</label>
|
||||
<select class="filter-select"><option>全部</option><option>易</option><option>中</option><option>难</option></select>
|
||||
</div>
|
||||
<div class="filter-item"><label>适配人群</label>
|
||||
<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><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>
|
||||
</tr></thead>
|
||||
<tbody>
|
||||
<tr><td>F001001</td><td>粳米(生)</td><td>软糯</td><td>易</td><td>易</td><td>煮熟后软糯有嚼劲，易于消化</td>
|
||||
<td><span class="tag tag-green">全人群</span><span class="tag tag-green">老年人</span><span class="tag tag-green">术后恢复</span></td>
|
||||
<td><span class="tag tag-green">推荐</span></td><td>熬粥质地更软，适合老年人</td><td><a class="link" href="din-ingredient-detail.html?code=F001001">编辑</a> <a class="link" href="din-ingredient-detail.html?code=F001001&mode=view">详情</a></td></tr>
|
||||
<tr><td>F002001</td><td>猪里脊肉</td><td>嫩滑</td><td>中</td><td>中</td><td>肌纤维细腻，炒制后滑嫩，少筋膜</td>
|
||||
<td><span class="tag tag-green">成人</span><span class="tag tag-orange">老年人</span><span class="tag tag-green">儿童</span></td>
|
||||
<td><span class="tag tag-orange">适量</span></td><td>老年人建议炖煮至软烂，避免大块</td><td><a class="link" href="din-ingredient-detail.html?code=F002001">编辑</a> <a class="link" href="din-ingredient-detail.html?code=F002001&mode=view">详情</a></td></tr>
|
||||
<tr><td>F003001</td><td>菠菜</td><td>嫩软</td><td>易</td><td>易</td><td>叶片薄嫩，焯水后柔软，汁水丰富</td>
|
||||
<td><span class="tag tag-green">全人群</span><span class="tag tag-green">老年人</span><span class="tag tag-orange">婴幼儿</span></td>
|
||||
<td><span class="tag tag-green">推荐</span></td><td>婴幼儿建议打泥处理，去除纤维</td><td><a class="link" href="din-ingredient-detail.html?code=F003001">编辑</a> <a class="link" href="din-ingredient-detail.html?code=F003001&mode=view">详情</a></td></tr>
|
||||
<tr><td>F004001</td><td>鸡蛋</td><td>嫩滑</td><td>易</td><td>易</td><td>水煮蛋弹嫩，炒蛋软嫩，蒸蛋细腻</td>
|
||||
<td><span class="tag tag-green">全人群</span><span class="tag tag-green">婴幼儿</span><span class="tag tag-green">老年人</span></td>
|
||||
<td><span class="tag tag-green">推荐</span></td><td>蒸蛋口感最软，适合各年龄段</td><td><a class="link" href="din-ingredient-detail.html?code=F004001">编辑</a> <a class="link" href="din-ingredient-detail.html?code=F004001&mode=view">详情</a></td></tr>
|
||||
<tr><td>F005001</td><td>豆腐(北)</td><td>细腻</td><td>易</td><td>易</td><td>质地细腻滑嫩，入口即化，无渣感</td>
|
||||
<td><span class="tag tag-green">全人群</span><span class="tag tag-green">老年人</span><span class="tag tag-green">术后恢复</span></td>
|
||||
<td><span class="tag tag-green">推荐</span></td><td>细腻易消化，适合消化功能弱者</td><td><a class="link" href="din-ingredient-detail.html?code=F005001">编辑</a> <a class="link" href="din-ingredient-detail.html?code=F005001&mode=view">详情</a></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>显示 5 条，共 2,486 条</span>
|
||||
<button class="page-btn">‹</button>
|
||||
<button class="page-btn active">1</button>
|
||||
<button class="page-btn">2</button>
|
||||
<button class="page-btn">3</button>
|
||||
<button class="page-btn">›</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<script>
|
||||
// Tab 切换
|
||||
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 toggleSubgroup(header){header.parentElement.classList.toggle('open');}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,244 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>营养管理 - 味养创新 | 健康长庆原型</title>
|
||||
<style>
|
||||
*{box-sizing:border-box;margin:0;padding:0;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#F5F7FA;color:#333;min-width:1280px;}
|
||||
:root{--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;--text-primary:#333;--text-secondary:#666;--text-placeholder:#999;--border:#E8E8E8;--background:#F5F7FA;--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--font-xxl:24px;--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--shadow-sm:0 1px 4px rgba(0,0,0,0.08);--shadow-md:0 4px 12px rgba(0,0,0,0.12);}
|
||||
.top-bar{display:flex;align-items:center;height:56px;background:#001529;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;}
|
||||
.top-bar__logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:var(--font-lg);font-weight:600;white-space:nowrap;width:240px;flex-shrink:0;}
|
||||
.top-bar__logo svg{width:28px;height:28px;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.top-bar__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.top-bar__right .btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.top-bar__right .btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);cursor:pointer;}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;text-transform:uppercase;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.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;}
|
||||
.action-bar{display:flex;align-items:center;gap:8px;margin-bottom:16px;}
|
||||
.sidebar-subgroup__header{display:flex;align-items:center;gap:6px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;user-select:none;}
|
||||
.sidebar-subgroup__header:hover{color:rgba(255,255,255,0.85);background:rgba(255,255,255,0.04);}
|
||||
.sidebar-subgroup__header .arrow{width:10px;height:10px;transition:transform .2s;flex-shrink:0;}
|
||||
.sidebar-subgroup__header .arrow path{stroke:rgba(255,255,255,0.45);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header{color:rgba(255,255,255,0.85);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header .arrow{transform:rotate(90deg);}
|
||||
.sidebar-subgroup__body{display:none;padding-left:16px;}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__body{display:block;}
|
||||
.sidebar-subgroup__body .sidebar-item{padding-left:36px;font-size:12px;}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;min-height:calc(100vh - 56px);}
|
||||
.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;}
|
||||
.stat-card__icon.blue{background:var(--primary-light);}
|
||||
.stat-card__icon.green{background:#F6FFED;}
|
||||
.stat-card__icon.orange{background:#FFF7E6;}
|
||||
.stat-card__icon.red{background:#FFF1F0;}
|
||||
.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-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;}
|
||||
.filter-input:focus{border-color:var(--primary);}
|
||||
.filter-select{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);color:var(--text-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='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;cursor:pointer;min-width:120px;}
|
||||
.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;}
|
||||
.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);}
|
||||
.tag-orange{background:#FFF7E6;color:var(--warning);}
|
||||
.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;}
|
||||
.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;}
|
||||
.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>
|
||||
<header class="top-bar">
|
||||
<div class="top-bar__logo"><svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M7 14h14M14 7v14" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/></svg>营养管理</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="trace-query.html">溯源总览</a><a href="arc-employee.html">档案</a><a href="farm-land.html">绿色种采</a><a href="sup-hygiene-check.html">卫生供应</a><a href="prod-qc-daily.html">健康生产</a><a href="din-dict-mgmt.html" class="active">营养用餐</a><a href="ano-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right"><a href="../../index.html" class="btn-back">← 返回首页</a><div class="avatar">管</div><span>系统管理员 ▾</span></div>
|
||||
</header>
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">营养用餐</div>
|
||||
<a href="din-dict-mgmt.html" class="sidebar-item">字典管理</a>
|
||||
<a href="prod-qc-nutrition.html" class="sidebar-item">营养检验</a>
|
||||
<a href="din-ingredient.html" class="sidebar-item">食物成分</a>
|
||||
<a href="din-dish-all.html" class="sidebar-item">餐品总库</a>
|
||||
<div class="sidebar-subgroup"><div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 10 10" fill="none"><path d="M3 1l4 4-4 4" stroke-width="1.5"/></svg>算法标准</div><div class="sidebar-subgroup__body"><a href="din-algo-population.html" class="sidebar-item">人群基础标准</a><a href="din-algo-vip.html" class="sidebar-item">VIP定制标准</a></div></div>
|
||||
<a href="din-recipe-mgmt.html" class="sidebar-item">食谱管理</a>
|
||||
<a href="din-order-meal.html" class="sidebar-item">营养点餐</a>
|
||||
<a href="din-user-mgmt.html" class="sidebar-item">用户管理</a>
|
||||
<a href="din-order-line.html" class="sidebar-item">餐线管理</a>
|
||||
<a href="din-order-pickup.html" class="sidebar-item">取餐管理</a>
|
||||
<a href="din-data-consume.html" class="sidebar-item">消费管理</a>
|
||||
<a href="din-data-nutri.html" class="sidebar-item">营养管理</a>
|
||||
<a href="din-data-benefit.html" class="sidebar-item">餐材效益</a>
|
||||
<a href="din-terminal.html" class="sidebar-item">终端管理</a>
|
||||
<div class="sidebar-subgroup"><div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)"><svg class="arrow" viewBox="0 0 10 10" fill="none"><path d="M3 1l4 4-4 4" stroke-width="1.5"/></svg>模型管理</div><div class="sidebar-subgroup__body"><a href="din-model-llm.html" class="sidebar-item">大模型管理</a><a href="din-model-small.html" class="sidebar-item">小模型管理</a></div></div>
|
||||
<a href="din-innovation.html" class="sidebar-item active">味养创新</a>
|
||||
</aside>
|
||||
<main class="main">
|
||||
<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">12</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">3</div><div class="stat-card__label">AI创新中</div></div></div>
|
||||
<div class="stat-card"><div class="stat-card__icon green">👨🍳</div><div class="stat-card__info"><div class="stat-card__value">4</div><div class="stat-card__label">人工创新中</div></div></div>
|
||||
<div class="stat-card"><div class="stat-card__icon blue">🚀</div><div class="stat-card__info"><div class="stat-card__value">2</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)">🤖 AI创新</div>
|
||||
</div>
|
||||
<!-- Tab0: 人工创新 -->
|
||||
<div class="tab-panel active">
|
||||
<div class="filter-bar">
|
||||
<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>低钠</option><option>高蛋白</option><option>高纤维</option><option>低脂</option><option>植物基</option></select></div>
|
||||
<div class="filter-item"><label>创建人</label><input class="filter-input" placeholder="请输入"></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>参与人员</th><th>实验阶段</th><th>风味评分</th><th>营养评分</th><th>评测条数</th><th>实验周期</th><th>状态</th><th>操作</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td>INN-H001</td><td>低钠麻婆豆腐</td><td>减少60%钠含量，保留麻辣风味</td><td>低钠 高蛋白</td><td>厨师长张强 / 营养师李明</td><td>已转化</td><td>4.2</td><td>4.8</td><td>236条(4.5分)</td><td>2026-02 ~ 2026-03</td><td><span class="tag tag-green">已转化</span></td><td><a class="link">查看详情</a> <a class="link">提交评测</a> <a class="link">转化餐品</a></td></tr>
|
||||
<tr><td>INN-H002</td><td>高纤维主食包</td><td>添加燕麦、藜麦，膳食纤维提升3倍</td><td>高纤维 低GI</td><td>厨师长陈磊 / 营养师王芳</td><td>用户评测</td><td>3.8</td><td>4.9</td><td>120条(4.2分)</td><td>2026-03 ~ 2026-04</td><td><span class="tag tag-blue">待推广</span></td><td><a class="link">查看详情</a> <a class="link">提交评测</a> <a class="link">转化餐品</a></td></tr>
|
||||
<tr><td>INN-H003</td><td>植物基红烧肉</td><td>以豆腐皮替代猪肉，脂肪降低70%</td><td>低脂 植物基</td><td>厨师长张强 / 营养师李明</td><td>小批量测试</td><td>3.5</td><td>4.6</td><td>42条(3.9分)</td><td>2026-04 ~ 进行中</td><td><span class="tag tag-orange">实验中</span></td><td><a class="link">查看详情</a> <a class="link">提交评测</a> <a class="link">转化餐品</a></td></tr>
|
||||
<tr><td>INN-H004</td><td>富铁青菜汤</td><td>搭配维C食材，补铁效率提升2倍</td><td>高铁 补血</td><td>厨师长赵敏 / 营养师李明</td><td>已验证</td><td>4.0</td><td>4.7</td><td>186条(4.4分)</td><td>2026-01 ~ 2026-02</td><td><span class="tag tag-green">已验证</span></td><td><a class="link">查看详情</a> <a class="link">提交评测</a> <a class="link">转化餐品</a></td></tr>
|
||||
<tr><td>INN-H005</td><td>功能性早餐粥</td><td>添加枸杞、红枣、核桃，营养密度提升</td><td>高营养 养生</td><td>厨师长张强 / 营养师王芳</td><td>配方设计</td><td>4.5</td><td>4.6</td><td>18条(4.1分)</td><td>2026-04 ~ 进行中</td><td><span class="tag tag-orange">实验中</span></td><td><a class="link">查看详情</a> <a class="link">提交评测</a> <a class="link">转化餐品</a></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination"><span>显示 5 条，共 5 条</span><button class="page-btn active">1</button></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Tab1: AI创新 -->
|
||||
<div class="tab-panel">
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item"><label>AI模型版本</label><select class="filter-select"><option>全部</option><option>v2.3 营养推理</option><option>v1.8 风味融合</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><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">🤖 发起AI模拟推演</button>
|
||||
<button class="btn btn-default">📊 查看推演报告</button>
|
||||
<button class="btn btn-default">🚀 转化为正式餐品</button>
|
||||
</div>
|
||||
<div class="table-card">
|
||||
<div class="table-card__header">
|
||||
<div class="table-card__title">AI创新</div>
|
||||
</div>
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead><tr><th>实验编号</th><th>菜品名称</th><th>AI模型</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>INN-A001</td><td>AI低GI藜麦饭</td><td>v2.3 营养推理</td><td>血糖控制</td><td>藜麦55%+糙米30%+黑米15%</td><td>浸泡+蒸制</td><td>文火慢蒸</td><td>低GI主食历史数据×128条</td><td>4.1</td><td>4.9</td><td>血糖负荷较白米降低41%</td><td><span class="tag tag-green">推演完成</span></td><td><a class="link">推演报告</a> <a class="link">人工审核</a> <a class="link">转化餐品</a></td></tr>
|
||||
<tr><td>INN-A002</td><td>AI高蛋白减脂鸡胸</td><td>v2.3 营养推理</td><td>增肌减脂</td><td>鸡胸肉70%+西兰花20%+彩椒10%</td><td>低温慢煮</td><td>65℃慢煮4h</td><td>运动营养餐历史数据×86条</td><td>3.9</td><td>4.8</td><td>蛋白质密度达23g/100g</td><td><span class="tag tag-green">推演完成</span></td><td><a class="link">推演报告</a> <a class="link">人工审核</a> <a class="link">转化餐品</a></td></tr>
|
||||
<tr><td>INN-A003</td><td>AI地中海沙拉碗</td><td>v1.8 风味融合</td><td>营养均衡</td><td>鹰嘴豆+藜麦+牛油果+三文鱼</td><td>冷处理</td><td>生冷拼配</td><td>地中海饮食历史数据×214条</td><td>4.3</td><td>4.7</td><td>Omega-3含量提升3倍</td><td><span class="tag tag-orange">人工审核中</span></td><td><a class="link">推演报告</a> <a class="link">人工审核</a> <a class="link">转化餐品</a></td></tr>
|
||||
<tr><td>INN-A004</td><td>AI益生菌发酵主食</td><td>v2.3 营养推理</td><td>肠道健康</td><td>全麦粉+燕麦+酵素发酵液</td><td>低温发酵</td><td>窑烤</td><td>肠道健康历史数据×92条</td><td>3.7</td><td>4.6</td><td>活性益生菌≥10亿CFU/g</td><td><span class="tag tag-blue">推演中</span></td><td><a class="link">推演报告</a> <a class="link">人工审核</a> <a class="link">转化餐品</a></td></tr>
|
||||
<tr><td>INN-A005</td><td>AI低嘌呤海鲜汤</td><td>v2.3 营养推理</td><td>痛风友好</td><td>娃娃菜+豆腐+冬瓜+虾皮(少量)</td><td>水煮</td><td>轻火慢炖</td><td>痛风饮食历史数据×156条</td><td>4.0</td><td>4.5</td><td>嘌呤含量较普通海鲜汤低68%</td><td><span class="tag tag-gray">待启动</span></td><td><a class="link">推演报告</a> <a class="link">人工审核</a> <a class="link">转化餐品</a></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination"><span>显示 5 条，共 5 条</span><button class="page-btn active">1</button></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><input type="text" placeholder="请输入菜品名称"></div>
|
||||
<div class="form-item"><label>创新方向<span class="required">*</span></label><select><option>请选择</option><option>营养均衡</option><option>血糖控制</option><option>增肌减脂</option><option>肠道健康</option><option>低钠控压</option><option>低脂减重</option><option>高蛋白</option><option>痛风友好</option><option>养生滋补</option></select></div>
|
||||
<div class="form-item"><label>目标标签（多选）</label><select><option>请选择</option><option>低钠</option><option>低脂</option><option>低GI</option><option>高蛋白</option><option>高纤维</option><option>高铁</option><option>补血</option><option>植物基</option><option>益生菌</option><option>低嘌呤</option></select></div>
|
||||
<div class="form-item"><label>加工方法</label><select><option>请选择</option><option>浸泡+蒸制</option><option>低温慢煮</option><option>水煮</option><option>冷处理</option><option>低温发酵</option><option>高压蒸制</option><option>炒制</option><option>窑烤</option></select></div>
|
||||
<div class="form-item full"><label>食材成分组合</label><textarea placeholder="列出主要食材及比例，如：藜麦55%+糙米30%+黑米15%"></textarea></div>
|
||||
<div class="form-item"><label>烹饪技术</label><input type="text" placeholder="如：65℃慢煮4h、文火慢蒸等"></div>
|
||||
<div class="form-item"><label>实验开始日期</label><input type="date"></div>
|
||||
<div class="form-item"><label>参与人员</label><input type="text" placeholder="如：厨师长张强 / 营养师李明"></div>
|
||||
<div class="form-item full"><label>历史参考数据说明</label><textarea placeholder="请输入历史参考数据说明"></textarea></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="btn btn-default" onclick="closeModal()">取消</button>
|
||||
<button class="btn btn-primary">确定</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function openModal(){document.getElementById('modalOverlay').style.display='flex';}
|
||||
function closeModal(){document.getElementById('modalOverlay').style.display='none';}
|
||||
document.getElementById('modalOverlay').addEventListener('click',function(e){if(e.target===this)closeModal();});
|
||||
function 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 toggleSubgroup(header){header.parentElement.classList.toggle('open');}
|
||||
(function(){var active=document.querySelector('.sidebar-item.active');if(!active)return;var sub=active.closest('.sidebar-subgroup');if(sub)sub.classList.add('open');})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,243 @@
|
||||
<!DOCTYPE html>
|
||||
<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;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#F5F7FA;color:#333;min-width:1280px;}
|
||||
:root{
|
||||
--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;
|
||||
--text-primary:#333;--text-secondary:#666;--text-placeholder:#999;--border:#E8E8E8;--background:#F5F7FA;
|
||||
--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--font-xxl:24px;
|
||||
--radius-sm:4px;--radius-md:8px;--radius-lg:12px;
|
||||
--shadow-sm:0 1px 4px rgba(0,0,0,0.08);--shadow-md:0 4px 12px rgba(0,0,0,0.12);
|
||||
}
|
||||
.top-bar{display:flex;align-items:center;height:56px;background:#001529;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;}
|
||||
.top-bar__logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:var(--font-lg);font-weight:600;white-space:nowrap;width:240px;flex-shrink:0;}
|
||||
.top-bar__logo svg{width:28px;height:28px;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.top-bar__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.top-bar__right .btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.top-bar__right .btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);cursor:pointer;}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;text-transform:uppercase;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.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;}
|
||||
${CSS_RULE}
|
||||
.sidebar-subgroup__header{display:flex;align-items:center;gap:6px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;user-select:none;}
|
||||
.sidebar-subgroup__header:hover{color:rgba(255,255,255,0.85);background:rgba(255,255,255,0.04);}
|
||||
.sidebar-subgroup__header .arrow{width:10px;height:10px;transition:transform .2s;flex-shrink:0;}
|
||||
.sidebar-subgroup__header .arrow path{stroke:rgba(255,255,255,0.45);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header{color:rgba(255,255,255,0.85);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header .arrow{transform:rotate(90deg);}
|
||||
.sidebar-subgroup__body{display:none;padding-left:16px;}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__body{display:block;}
|
||||
.sidebar-subgroup__body .sidebar-item{padding-left:36px;font-size:12px;}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;min-height:calc(100vh - 56px);}
|
||||
.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:200px;}
|
||||
.filter-input:focus{border-color:var(--primary);}
|
||||
.filter-select{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);color:var(--text-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='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;cursor:pointer;min-width:120px;}
|
||||
.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;}
|
||||
.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);}
|
||||
.tag-orange{background:#FFF7E6;color:var(--warning);}
|
||||
.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;}
|
||||
.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;}
|
||||
.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;}
|
||||
.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;}
|
||||
.stat-card__icon.blue{background:var(--primary-light);}
|
||||
.stat-card__icon.green{background:#F6FFED;}
|
||||
.stat-card__icon.orange{background:#FFF7E6;}
|
||||
.stat-card__icon.red{background:#FFF1F0;}
|
||||
.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);}
|
||||
.action-bar{display:flex;align-items:center;gap:8px;margin-bottom:16px;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- 顶部导航 -->
|
||||
<header class="top-bar">
|
||||
<div class="top-bar__logo">
|
||||
<svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M7 14h14M14 7v14" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/></svg>
|
||||
营养管理
|
||||
</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="trace-query.html">溯源总览</a>
|
||||
<a href="arc-employee.html">档案</a>
|
||||
<a href="farm-land.html">绿色种采</a>
|
||||
<a href="sup-hygiene-check.html">卫生供应</a>
|
||||
<a href="prod-qc-daily.html">健康生产</a>
|
||||
<a href="din-dict-mgmt.html" class="active">营养用餐</a>
|
||||
<a href="ano-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<a href="../../index.html" class="btn-back">← 返回首页</a>
|
||||
<div class="avatar">管</div>
|
||||
<span>系统管理员 ▾</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- 侧边栏 -->
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">营养用餐</div>
|
||||
<a href="din-dict-mgmt.html" class="sidebar-item">字典管理</a>
|
||||
<a href="prod-qc-nutrition.html" class="sidebar-item">营养检验</a>
|
||||
<a href="din-ingredient.html" class="sidebar-item">食物成分</a>
|
||||
<a href="din-dish-all.html" class="sidebar-item">餐品总库</a>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 10 10" fill="none"><path d="M3 1l4 4-4 4" stroke-width="1.5"/></svg>
|
||||
算法标准
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="din-algo-population.html" class="sidebar-item">人群基础标准</a>
|
||||
<a href="din-algo-vip.html" class="sidebar-item">VIP定制标准</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="din-recipe-mgmt.html" class="sidebar-item">食谱管理</a>
|
||||
<a href="din-order-meal.html" class="sidebar-item">营养点餐</a>
|
||||
<a href="din-user-mgmt.html" class="sidebar-item">用户管理</a>
|
||||
<a href="din-order-line.html" class="sidebar-item">餐线管理</a>
|
||||
<a href="din-order-pickup.html" class="sidebar-item">取餐管理</a>
|
||||
<a href="din-data-consume.html" class="sidebar-item">消费管理</a>
|
||||
<a href="din-data-nutri.html" class="sidebar-item">营养管理</a>
|
||||
<a href="din-data-benefit.html" class="sidebar-item">餐材效益</a>
|
||||
<a href="din-terminal.html" class="sidebar-item">终端管理</a>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 10 10" fill="none"><path d="M3 1l4 4-4 4" stroke-width="1.5"/></svg>
|
||||
模型管理
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="din-model-llm.html" class="sidebar-item active">大模型管理</a>
|
||||
<a href="din-model-small.html" class="sidebar-item">小模型管理</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="din-innovation.html" class="sidebar-item">味养创新</a>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容区 -->
|
||||
<div class="main">
|
||||
<!-- 统计卡片 -->
|
||||
<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">3</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">2</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">12.4万次</div><div class="stat-card__label">本月调用量</div></div></div>
|
||||
<div class="stat-card"><div class="stat-card__icon blue">💰</div><div class="stat-card__info"><div class="stat-card__value">¥3,860</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>字节跳动</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" onclick="openModal()">➕ 接入新模型</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>月消耗Token</th><th>月费用</th><th>平均响应(ms)</th><th>错误率</th><th>超时率</th><th>状态</th><th>操作</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td>LLM-001</td><td>豆包</td><td>字节跳动</td><td>Doubao-pro-32k</td><td>API调用</td><td>小程序AI营养顾问</td><td>68,240</td><td>42.6万</td><td>¥2,140</td><td>320</td><td>0.12%</td><td>0.08%</td><td><span class="tag tag-green">在用</span></td><td><a class="link">调用日志</a></td></tr>
|
||||
<tr><td>LLM-002</td><td>DeepSeek-V3</td><td>深度求索</td><td>v3-20250324</td><td>API调用</td><td>管理端智能助手</td><td>54,820</td><td>38.2万</td><td>¥1,720</td><td>280</td><td>0.08%</td><td>0.05%</td><td><span class="tag tag-green">在用</span></td><td><a class="link">调用日志</a></td></tr>
|
||||
<tr><td>LLM-003</td><td>文心一言</td><td>百度</td><td>ERNIE-4.0</td><td>API调用</td><td>小程序AI营养顾问</td><td>0</td><td>0</td><td>¥0</td><td>—</td><td>—</td><td>—</td><td><span class="tag tag-orange">备用</span></td><td><a class="link">调用日志</a></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination"><span>显示 3 条，共 3 条</span><button class="page-btn active">1</button></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 接入新模型弹窗 -->
|
||||
<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><input type="text" placeholder="请输入模型名称"></div>
|
||||
<div class="form-item"><label>模型提供商<span class="required">*</span></label><input type="text" placeholder="请输入模型提供商"></div>
|
||||
<div class="form-item"><label>模型版本<span class="required">*</span></label><input type="text" placeholder="请输入模型版本"></div>
|
||||
<div class="form-item"><label>接入方式</label><select><option>请选择</option><option>API调用</option><option>私有化部署</option></select></div>
|
||||
<div class="form-item"><label>使用场景<span class="required">*</span></label><input type="text" placeholder="请输入使用场景"></div>
|
||||
<div class="form-item full"><label>API Key / 接入配置</label><textarea placeholder="请输入API Key或接入配置信息"></textarea></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="btn btn-default" onclick="closeModal()">取消</button>
|
||||
<button class="btn btn-primary">确定</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function openModal(){document.getElementById('modalOverlay').style.display='flex';}
|
||||
function closeModal(){document.getElementById('modalOverlay').style.display='none';}
|
||||
document.getElementById('modalOverlay').addEventListener('click',function(e){if(e.target===this)closeModal();});
|
||||
function toggleSubgroup(header){header.parentElement.classList.toggle('open');}
|
||||
(function(){var active=document.querySelector('.sidebar-item.active');if(!active)return;var sub=active.closest('.sidebar-subgroup');if(sub)sub.classList.add('open');})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,247 @@
|
||||
<!DOCTYPE html>
|
||||
<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;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#F5F7FA;color:#333;min-width:1280px;}
|
||||
:root{
|
||||
--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;
|
||||
--text-primary:#333;--text-secondary:#666;--text-placeholder:#999;--border:#E8E8E8;--background:#F5F7FA;
|
||||
--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--font-xxl:24px;
|
||||
--radius-sm:4px;--radius-md:8px;--radius-lg:12px;
|
||||
--shadow-sm:0 1px 4px rgba(0,0,0,0.08);--shadow-md:0 4px 12px rgba(0,0,0,0.12);
|
||||
}
|
||||
.top-bar{display:flex;align-items:center;height:56px;background:#001529;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;}
|
||||
.top-bar__logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:var(--font-lg);font-weight:600;white-space:nowrap;width:240px;flex-shrink:0;}
|
||||
.top-bar__logo svg{width:28px;height:28px;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.top-bar__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.top-bar__right .btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.top-bar__right .btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);cursor:pointer;}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;text-transform:uppercase;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.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;}
|
||||
${CSS_RULE}
|
||||
.sidebar-subgroup__header{display:flex;align-items:center;gap:6px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;user-select:none;}
|
||||
.sidebar-subgroup__header:hover{color:rgba(255,255,255,0.85);background:rgba(255,255,255,0.04);}
|
||||
.sidebar-subgroup__header .arrow{width:10px;height:10px;transition:transform .2s;flex-shrink:0;}
|
||||
.sidebar-subgroup__header .arrow path{stroke:rgba(255,255,255,0.45);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header{color:rgba(255,255,255,0.85);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header .arrow{transform:rotate(90deg);}
|
||||
.sidebar-subgroup__body{display:none;padding-left:16px;}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__body{display:block;}
|
||||
.sidebar-subgroup__body .sidebar-item{padding-left:36px;font-size:12px;}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;min-height:calc(100vh - 56px);}
|
||||
.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:200px;}
|
||||
.filter-input:focus{border-color:var(--primary);}
|
||||
.filter-select{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);color:var(--text-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='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;cursor:pointer;min-width:120px;}
|
||||
.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;}
|
||||
.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);}
|
||||
.tag-orange{background:#FFF7E6;color:var(--warning);}
|
||||
.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;}
|
||||
.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;}
|
||||
.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;}
|
||||
.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;}
|
||||
.stat-card__icon.blue{background:var(--primary-light);}
|
||||
.stat-card__icon.green{background:#F6FFED;}
|
||||
.stat-card__icon.orange{background:#FFF7E6;}
|
||||
.stat-card__icon.red{background:#FFF1F0;}
|
||||
.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);}
|
||||
.action-bar{display:flex;align-items:center;gap:8px;margin-bottom:16px;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- 顶部导航 -->
|
||||
<header class="top-bar">
|
||||
<div class="top-bar__logo">
|
||||
<svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M7 14h14M14 7v14" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/></svg>
|
||||
营养管理
|
||||
</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="trace-query.html">溯源总览</a>
|
||||
<a href="arc-employee.html">档案</a>
|
||||
<a href="farm-land.html">绿色种采</a>
|
||||
<a href="sup-hygiene-check.html">卫生供应</a>
|
||||
<a href="prod-qc-daily.html">健康生产</a>
|
||||
<a href="din-dict-mgmt.html" class="active">营养用餐</a>
|
||||
<a href="ano-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<a href="../../index.html" class="btn-back">← 返回首页</a>
|
||||
<div class="avatar">管</div>
|
||||
<span>系统管理员 ▾</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- 侧边栏 -->
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">营养用餐</div>
|
||||
<a href="din-dict-mgmt.html" class="sidebar-item">字典管理</a>
|
||||
<a href="prod-qc-nutrition.html" class="sidebar-item">营养检验</a>
|
||||
<a href="din-ingredient.html" class="sidebar-item">食物成分</a>
|
||||
<a href="din-dish-all.html" class="sidebar-item">餐品总库</a>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 10 10" fill="none"><path d="M3 1l4 4-4 4" stroke-width="1.5"/></svg>
|
||||
算法标准
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="din-algo-population.html" class="sidebar-item">人群基础标准</a>
|
||||
<a href="din-algo-vip.html" class="sidebar-item">VIP定制标准</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="din-recipe-mgmt.html" class="sidebar-item">食谱管理</a>
|
||||
<a href="din-order-meal.html" class="sidebar-item">营养点餐</a>
|
||||
<a href="din-user-mgmt.html" class="sidebar-item">用户管理</a>
|
||||
<a href="din-order-line.html" class="sidebar-item">餐线管理</a>
|
||||
<a href="din-order-pickup.html" class="sidebar-item">取餐管理</a>
|
||||
<a href="din-data-consume.html" class="sidebar-item">消费管理</a>
|
||||
<a href="din-data-nutri.html" class="sidebar-item">营养管理</a>
|
||||
<a href="din-data-benefit.html" class="sidebar-item">餐材效益</a>
|
||||
<a href="din-terminal.html" class="sidebar-item">终端管理</a>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 10 10" fill="none"><path d="M3 1l4 4-4 4" stroke-width="1.5"/></svg>
|
||||
模型管理
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="din-model-llm.html" class="sidebar-item">大模型管理</a>
|
||||
<a href="din-model-small.html" class="sidebar-item active">小模型管理</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="din-innovation.html" class="sidebar-item">味养创新</a>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容区 -->
|
||||
<div class="main">
|
||||
<!-- 统计卡片 -->
|
||||
<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">6</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">5</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">1</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">91.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>营养计算</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" 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>版本文件</th><th>准确率</th><th>推理延迟(ms)</th><th>模型大小(MB)</th><th>今日推理量</th><th>最近训练时间</th><th>最近评估时间</th><th>关联业务模块</th><th>状态</th><th>操作</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td>SM-001</td><td>营养评分模型</td><td>营养计算</td><td>v2.3.1</td><td>nutrition_score_v2.3.1.pkl</td><td>93.5%</td><td>45</td><td>128</td><td>12,860</td><td>2026-04-01</td><td>2026-04-10</td><td>营养点餐/营养管理</td><td><span class="tag tag-green">在线</span></td><td><a class="link">上传版本</a> <a class="link">版本历史</a> <a class="link">在线测试</a></td></tr>
|
||||
<tr><td>SM-002</td><td>个性化推荐引擎</td><td>智能配餐</td><td>v1.8.0</td><td>recommend_engine_v1.8.0.pkl</td><td>88.7%</td><td>62</td><td>156</td><td>9,420</td><td>2026-03-15</td><td>2026-03-20</td><td>营养点餐/AI推荐</td><td><span class="tag tag-green">在线</span></td><td><a class="link">上传版本</a> <a class="link">版本历史</a> <a class="link">在线测试</a></td></tr>
|
||||
<tr><td>SM-003</td><td>消费预测模型</td><td>消费预测</td><td>v1.2.1</td><td>consume_predict_v1.2.1.pkl</td><td>85.2%</td><td>38</td><td>96</td><td>4,280</td><td>2026-03-01</td><td>2026-03-05</td><td>餐材效益/生产统计</td><td><span class="tag tag-green">在线</span></td><td><a class="link">上传版本</a> <a class="link">版本历史</a> <a class="link">在线测试</a></td></tr>
|
||||
<tr><td>SM-004</td><td>食材损耗预测</td><td>食材损耗预测</td><td>v1.0.4</td><td>loss_predict_v1.0.4.pkl</td><td>82.6%</td><td>54</td><td>110</td><td>3,960</td><td>2026-02-20</td><td>2026-02-25</td><td>余量处置/餐材效益</td><td><span class="tag tag-green">在线</span></td><td><a class="link">上传版本</a> <a class="link">版本历史</a> <a class="link">在线测试</a></td></tr>
|
||||
<tr><td>SM-005</td><td>过敏原识别</td><td>过敏原识别</td><td>v2.0.0</td><td>allergen_detect_v2.0.0.pkl</td><td>96.8%</td><td>28</td><td>88</td><td>15,220</td><td>2026-04-10</td><td>2026-04-12</td><td>餐品总库/营养点餐</td><td><span class="tag tag-green">在线</span></td><td><a class="link">上传版本</a> <a class="link">版本历史</a> <a class="link">在线测试</a></td></tr>
|
||||
<tr><td>SM-006</td><td>疾病风险预测</td><td>疾病预测</td><td>v1.1.0</td><td>disease_risk_v1.1.0.pkl</td><td>79.4%</td><td>72</td><td>142</td><td>1,120</td><td>2026-01-15</td><td>2026-01-20</td><td>营养师工作站/预警管理</td><td><span class="tag tag-gray">离线</span></td><td><a class="link">上传版本</a> <a class="link">版本历史</a> <a class="link">在线测试</a></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination"><span>显示 6 条，共 6 条</span><button class="page-btn active">1</button></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 新增模型弹窗 -->
|
||||
<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><input type="text" placeholder="请输入模型名称"></div>
|
||||
<div class="form-item"><label>模型类型</label><select><option>请选择</option><option>营养计算</option><option>疾病预测</option><option>智能配餐</option><option>消费预测</option><option>食材损耗预测</option><option>过敏原识别</option></select></div>
|
||||
<div class="form-item"><label>版本号<span class="required">*</span></label><input type="text" placeholder="如 v2.4.0"></div>
|
||||
<div class="form-item"><label>版本文件<span class="required">*</span></label><input type="file"></div>
|
||||
<div class="form-item full"><label>训练数据集说明</label><textarea placeholder="请输入训练数据集说明"></textarea></div>
|
||||
<div class="form-item full"><label>变更说明</label><textarea placeholder="请输入变更说明"></textarea></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="btn btn-default" onclick="closeModal()">取消</button>
|
||||
<button class="btn btn-primary">确定</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function openModal(){document.getElementById('modalOverlay').style.display='flex';}
|
||||
function closeModal(){document.getElementById('modalOverlay').style.display='none';}
|
||||
document.getElementById('modalOverlay').addEventListener('click',function(e){if(e.target===this)closeModal();});
|
||||
function toggleSubgroup(header){header.parentElement.classList.toggle('open');}
|
||||
(function(){var active=document.querySelector('.sidebar-item.active');if(!active)return;var sub=active.closest('.sidebar-subgroup');if(sub)sub.classList.add('open');})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,354 @@
|
||||
<!DOCTYPE html>
|
||||
<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;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#F5F7FA;color:#333;min-width:1280px;}
|
||||
:root{
|
||||
--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;
|
||||
--text-primary:#333;--text-secondary:#666;--text-placeholder:#999;--border:#E8E8E8;--background:#F5F7FA;
|
||||
--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--font-xxl:24px;
|
||||
--radius-sm:4px;--radius-md:8px;--radius-lg:12px;
|
||||
--shadow-sm:0 1px 4px rgba(0,0,0,0.08);--shadow-md:0 4px 12px rgba(0,0,0,0.12);
|
||||
}
|
||||
|
||||
/* 通用布局 */
|
||||
.top-bar{display:flex;align-items:center;height:56px;background:#001529;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;}
|
||||
.top-bar__logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:var(--font-lg);font-weight:600;white-space:nowrap;width:240px;flex-shrink:0;}
|
||||
.top-bar__logo svg{width:28px;height:28px;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.top-bar__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.top-bar__right .btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.top-bar__right .btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);cursor:pointer;}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;text-transform:uppercase;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.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;}
|
||||
${CSS_RULE}
|
||||
.sidebar-subgroup__header{display:flex;align-items:center;gap:6px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;user-select:none;}
|
||||
.sidebar-subgroup__header:hover{color:rgba(255,255,255,0.85);background:rgba(255,255,255,0.04);}
|
||||
.sidebar-subgroup__header .arrow{width:10px;height:10px;transition:transform .2s;flex-shrink:0;}
|
||||
.sidebar-subgroup__header .arrow path{stroke:rgba(255,255,255,0.45);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header{color:rgba(255,255,255,0.85);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header .arrow{transform:rotate(90deg);}
|
||||
.sidebar-subgroup__body{display:none;padding-left:16px;}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__body{display:block;}
|
||||
.sidebar-subgroup__body .sidebar-item{padding-left:36px;font-size:12px;}
|
||||
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;min-height:calc(100vh - 56px);}
|
||||
.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;}
|
||||
.stat-card__icon.blue{background:var(--primary-light);}
|
||||
.stat-card__icon.green{background:#F6FFED;}
|
||||
.stat-card__icon.orange{background:#FFF7E6;}
|
||||
.stat-card__icon.red{background:#FFF1F0;}
|
||||
.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);}
|
||||
.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:200px;}
|
||||
.filter-input:focus{border-color:var(--primary);}
|
||||
.filter-select{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);color:var(--text-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='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;cursor:pointer;min-width:120px;}
|
||||
.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;}
|
||||
.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);}
|
||||
.tag-orange{background:#FFF7E6;color:var(--warning);}
|
||||
.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;}
|
||||
.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);}
|
||||
|
||||
/* Tab 切换 */
|
||||
.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;}
|
||||
|
||||
/* 汇总行 */
|
||||
.summary-row td{background:#FAFAFA;font-weight:600;}
|
||||
.action-bar{display:flex;align-items:center;gap:8px;margin-bottom:16px;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- 顶部导航 -->
|
||||
<header class="top-bar">
|
||||
<div class="top-bar__logo">
|
||||
<svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M7 14h14M14 7v14" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/></svg>
|
||||
营养管理
|
||||
</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="trace-query.html">溯源总览</a>
|
||||
<a href="arc-employee.html">档案</a>
|
||||
<a href="farm-land.html">绿色种采</a>
|
||||
<a href="sup-hygiene-check.html">卫生供应</a>
|
||||
<a href="prod-qc-daily.html">健康生产</a>
|
||||
<a href="din-dict-mgmt.html" class="active">营养用餐</a>
|
||||
<a href="ano-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<a class="btn-back" href="../../index.html">← 返回首页</a>
|
||||
<div class="avatar">管</div>
|
||||
<span>系统管理员 ▾</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- 侧边栏 -->
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">营养用餐</div>
|
||||
<a href="din-dict-mgmt.html" class="sidebar-item"><span class="mi">📖</span>字典管理</a>
|
||||
<a href="prod-qc-nutrition.html" class="sidebar-item"><span class="mi">🔬</span>营养检验</a>
|
||||
<a href="din-ingredient.html" class="sidebar-item"><span class="mi">🥦</span>食物成分</a>
|
||||
<a href="din-dish-all.html" class="sidebar-item"><span class="mi">🍲</span>餐品总库</a>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 10 10" fill="none"><path d="M3 1l4 4-4 4" stroke-width="1.5"/></svg>
|
||||
📐 算法标准
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="din-algo-population.html" class="sidebar-item"><span class="mi">👥</span>人群基础标准</a>
|
||||
<a href="din-algo-vip.html" class="sidebar-item"><span class="mi">💎</span>VIP定制标准</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="din-recipe-mgmt.html" class="sidebar-item"><span class="mi">📋</span>食谱管理</a>
|
||||
<a href="din-order-meal.html" class="sidebar-item"><span class="mi">🛒</span>营养点餐</a>
|
||||
<a href="din-user-mgmt.html" class="sidebar-item"><span class="mi">🧑</span>用户管理</a>
|
||||
<a href="din-order-line.html" class="sidebar-item active"><span class="mi">⚖️</span>餐线管理</a>
|
||||
<a href="din-order-pickup.html" class="sidebar-item"><span class="mi">🍽️</span>取餐管理</a>
|
||||
<a href="din-data-consume.html" class="sidebar-item"><span class="mi">💰</span>消费管理</a>
|
||||
<a href="din-data-nutri.html" class="sidebar-item"><span class="mi">📊</span>营养管理</a>
|
||||
<a href="din-data-benefit.html" class="sidebar-item"><span class="mi">📈</span>餐材效益</a>
|
||||
<a href="din-terminal.html" class="sidebar-item"><span class="mi">🖥️</span>终端管理</a>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 10 10" fill="none"><path d="M3 1l4 4-4 4" stroke-width="1.5"/></svg>
|
||||
🤖 模型管理
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="din-model-llm.html" class="sidebar-item"><span class="mi">🧠</span>大模型管理</a>
|
||||
<a href="din-model-small.html" class="sidebar-item"><span class="mi">⚙️</span>小模型管理</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="din-innovation.html" class="sidebar-item"><span class="mi">🌟</span>味养创新</a>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容区 -->
|
||||
<div class="main">
|
||||
|
||||
<!-- 统计卡片 -->
|
||||
<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">18台</div>
|
||||
<div class="stat-card__label">在线秤台</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-card__icon blue">🍽️</div>
|
||||
<div class="stat-card__info">
|
||||
<div class="stat-card__value">4餐</div>
|
||||
<div class="stat-card__label">今日餐次</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-card__icon green">👥</div>
|
||||
<div class="stat-card__info">
|
||||
<div class="stat-card__value">1,622人</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">2台</div>
|
||||
<div class="stat-card__label">异常秤台</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 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>
|
||||
|
||||
<!-- Tab1: 实时监控 -->
|
||||
<div class="tab-panel active">
|
||||
<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>正常</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>A区中餐线</option><option>B区中餐线</option><option>C区快餐线</option><option>D区晚餐线</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>实时重量(kg)</th><th>累计取餐重量</th><th>累计上餐生重(kg)</th><th>累计上餐重量</th><th>最高温度</th><th>最低温度</th><th>保鲜时间</th><th>取餐人次</th><th>取餐视频</th><th>上餐视频</th><th>操作</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>00022号秤</td><td><span class="tag tag-green">正常</span></td><td><span class="tag tag-blue">餐线秤</span></td><td>A区早餐线</td><td>早餐</td><td><span class="tag tag-green">开餐</span></td><td>06:50</td><td>07:28</td><td>小米粥</td><td>¥5</td><td>¥1,600</td><td>12.6</td><td><a class="link">9.8kg</a></td><td>14.2</td><td><a class="link">12.6kg</a></td><td>68℃</td><td>55℃</td><td>09:30</td><td>320人</td><td><a class="link">▶ 取餐</a></td><td><a class="link">▶ 上餐</a></td><td><a class="link">查看</a> <a class="link">编辑</a></td></tr>
|
||||
<tr><td>00023号秤</td><td><span class="tag tag-green">正常</span></td><td><span class="tag tag-blue">餐线秤</span></td><td>B区早餐线</td><td>早餐</td><td><span class="tag tag-green">开餐</span></td><td>06:55</td><td>07:35</td><td>燕麦粥</td><td>¥4</td><td>¥1,144</td><td>8.4</td><td><a class="link">6.2kg</a></td><td>9.6</td><td><a class="link">8.4kg</a></td><td>65℃</td><td>55℃</td><td>09:30</td><td>286人</td><td><a class="link">▶ 取餐</a></td><td><a class="link">▶ 上餐</a></td><td><a class="link">查看</a> <a class="link">编辑</a></td></tr>
|
||||
<tr><td>00025号秤</td><td><span class="tag tag-green">正常</span></td><td><span class="tag tag-blue">餐线秤</span></td><td>A区中餐线</td><td>午餐</td><td><span class="tag tag-green">开餐</span></td><td>10:30</td><td>11:30</td><td>宫保鸡丁</td><td>¥14</td><td>¥6,804</td><td>38.2</td><td><a class="link">31.6kg</a></td><td>44.0</td><td><a class="link">38.2kg</a></td><td>75℃</td><td>71℃</td><td>13:30</td><td>486人</td><td><a class="link">▶ 取餐</a></td><td><a class="link">▶ 上餐</a></td><td><a class="link">查看</a> <a class="link">编辑</a></td></tr>
|
||||
<tr><td>00026号秤</td><td><span class="tag tag-green">正常</span></td><td><span class="tag tag-blue">餐线秤</span></td><td>B区中餐线</td><td>午餐</td><td><span class="tag tag-green">开餐</span></td><td>10:35</td><td>11:38</td><td>红烧肉</td><td>¥16</td><td>¥6,592</td><td>42.6</td><td><a class="link">38.4kg</a></td><td>48.5</td><td><a class="link">42.6kg</a></td><td>72℃</td><td>68℃</td><td>13:30</td><td>412人</td><td><a class="link">▶ 取餐</a></td><td><a class="link">▶ 上餐</a></td><td><a class="link">查看</a> <a class="link">编辑</a></td></tr>
|
||||
<tr><td>00027号秤</td><td><span class="tag tag-orange">无网络</span></td><td><span class="tag tag-gray">档口秤</span></td><td>C区快餐线</td><td>午餐</td><td><span class="tag tag-blue">加餐</span></td><td>10:40</td><td>12:12</td><td>番茄炒蛋</td><td>¥8</td><td>¥1,024</td><td>16.8</td><td><a class="link">14.2kg</a></td><td>18.6</td><td><a class="link">16.8kg</a></td><td>74℃</td><td>70℃</td><td>13:30</td><td>128人</td><td><a class="link">▶ 取餐</a></td><td><a class="link">▶ 上餐</a></td><td><a class="link">查看</a> <a class="link">编辑</a></td></tr>
|
||||
<tr><td>00028号秤</td><td><span class="tag tag-gray">未开机</span></td><td><span class="tag tag-gray">档口秤</span></td><td>D区晚餐线</td><td>晚餐</td><td><span class="tag tag-gray">待上餐</span></td><td>—</td><td>—</td><td>—</td><td>—</td><td>—</td><td>—</td><td>—</td><td>—</td><td>—</td><td>—</td><td>—</td><td>19:30</td><td>—</td><td>—</td><td>—</td><td><a class="link">查看</a> <a class="link">编辑</a></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>显示 6 条，共 18 条</span>
|
||||
<button class="page-btn">‹</button>
|
||||
<button class="page-btn active">1</button>
|
||||
<button class="page-btn">2</button>
|
||||
<button class="page-btn">3</button>
|
||||
<button class="page-btn">›</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tab2: 累计汇总 -->
|
||||
<div class="tab-panel">
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item"><label>统计日期</label><input class="filter-input" type="date"></div>
|
||||
<div class="filter-item"><label>餐线编号</label><select class="filter-select"><option>全部</option><option>A区中餐线</option><option>B区中餐线</option><option>A区早餐线</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"><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>累计取餐重量(kg)</th><th>累计上餐重量(kg)</th><th>累计应收金额</th><th>取餐人次</th><th>平均取餐重量(g/人)</th><th>最高温度</th><th>最低温度</th><th>异常次数</th><th>操作</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="summary-row"><td>汇总</td><td>—</td><td>—</td><td>84道</td><td>1,286</td><td>1,540</td><td>¥58,420</td><td>5,612人</td><td>229g</td><td>—</td><td>—</td><td>3次</td><td><a class="link">查看</a> <a class="link">编辑</a></td></tr>
|
||||
<tr><td>2026-04-28</td><td>A区中餐线</td><td>午餐</td><td>12道</td><td>256</td><td>312</td><td>¥14,280</td><td>1,140人</td><td>225g</td><td>78℃</td><td>68℃</td><td>0次</td><td><a class="link">查看</a> <a class="link">编辑</a></td></tr>
|
||||
<tr><td>2026-04-28</td><td>B区中餐线</td><td>午餐</td><td>10道</td><td>218</td><td>268</td><td>¥12,640</td><td>980人</td><td>222g</td><td>76℃</td><td>66℃</td><td>1次</td><td><a class="link">查看</a> <a class="link">编辑</a></td></tr>
|
||||
<tr><td>2026-04-28</td><td>A区早餐线</td><td>早餐</td><td>8道</td><td>148</td><td>182</td><td>¥7,400</td><td>980人</td><td>151g</td><td>70℃</td><td>55℃</td><td>0次</td><td><a class="link">查看</a> <a class="link">编辑</a></td></tr>
|
||||
<tr><td>2026-04-27</td><td>A区中餐线</td><td>午餐</td><td>12道</td><td>248</td><td>304</td><td>¥13,860</td><td>1,100人</td><td>226g</td><td>77℃</td><td>67℃</td><td>0次</td><td><a class="link">查看</a> <a class="link">编辑</a></td></tr>
|
||||
<tr><td>2026-04-27</td><td>B区中餐线</td><td>午餐</td><td>10道</td><td>210</td><td>258</td><td>¥12,180</td><td>960人</td><td>219g</td><td>75℃</td><td>65℃</td><td>1次</td><td><a class="link">查看</a> <a class="link">编辑</a></td></tr>
|
||||
<tr><td>2026-04-27</td><td>A区早餐线</td><td>早餐</td><td>8道</td><td>142</td><td>176</td><td>¥7,100</td><td>920人</td><td>154g</td><td>69℃</td><td>54℃</td><td>0次</td><td><a class="link">查看</a> <a class="link">编辑</a></td></tr>
|
||||
<tr><td>2026-04-26</td><td>A区中餐线</td><td>午餐</td><td>11道</td><td>212</td><td>260</td><td>¥11,860</td><td>960人</td><td>221g</td><td>76℃</td><td>66℃</td><td>1次</td><td><a class="link">查看</a> <a class="link">编辑</a></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>显示 7 条，共 7 条</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><input class="filter-input" type="date"></div>
|
||||
<div class="filter-item"><label>秤台编号</label><input class="filter-input" type="text" placeholder="请输入秤台编号"></div>
|
||||
<div class="filter-item"><label>秤台状态</label><select class="filter-select"><option>全部</option><option>正常</option><option>无网络</option><option>未开机</option></select></div>
|
||||
<div class="filter-item"><label>餐线编号</label><select class="filter-select"><option>全部</option><option>A区早餐线</option><option>B区早餐线</option><option>A区中餐线</option><option>B区中餐线</option><option>C区快餐线</option><option>D区晚餐线</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"><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>累计取餐重量(kg)</th><th>累计上餐生重(kg)</th><th>累计上餐重量(kg)</th><th>最高温度</th><th>最低温度</th><th>取餐人次</th><th>平均取餐重量(g/人)</th><th>异常次数</th><th>操作</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="summary-row"><td>汇总</td><td>—</td><td>—</td><td>—</td><td>—</td><td>—</td><td>84道</td><td>¥58,420</td><td>1,286</td><td>1,720</td><td>1,540</td><td>—</td><td>—</td><td>5,612人</td><td>229g</td><td>3次</td><td><a class="link">查看</a> <a class="link">编辑</a></td></tr>
|
||||
<tr><td>00022号秤</td><td><span class="tag tag-green">正常</span></td><td><span class="tag tag-blue">餐线秤</span></td><td>A区早餐线</td><td>早餐</td><td><span class="tag tag-green">开餐</span></td><td>8道</td><td>¥7,400</td><td>148</td><td>186</td><td>182</td><td>70℃</td><td>55℃</td><td>980人</td><td>151g</td><td>0次</td><td><a class="link">查看</a> <a class="link">编辑</a></td></tr>
|
||||
<tr><td>00023号秤</td><td><span class="tag tag-green">正常</span></td><td><span class="tag tag-blue">餐线秤</span></td><td>B区早餐线</td><td>早餐</td><td><span class="tag tag-green">开餐</span></td><td>6道</td><td>¥4,860</td><td>92</td><td>118</td><td>108</td><td>68℃</td><td>54℃</td><td>720人</td><td>128g</td><td>0次</td><td><a class="link">查看</a> <a class="link">编辑</a></td></tr>
|
||||
<tr><td>00025号秤</td><td><span class="tag tag-green">正常</span></td><td><span class="tag tag-blue">餐线秤</span></td><td>A区中餐线</td><td>午餐</td><td><span class="tag tag-green">开餐</span></td><td>12道</td><td>¥14,280</td><td>256</td><td>342</td><td>312</td><td>78℃</td><td>68℃</td><td>1,140人</td><td>225g</td><td>0次</td><td><a class="link">查看</a> <a class="link">编辑</a></td></tr>
|
||||
<tr><td>00026号秤</td><td><span class="tag tag-green">正常</span></td><td><span class="tag tag-blue">餐线秤</span></td><td>B区中餐线</td><td>午餐</td><td><span class="tag tag-green">开餐</span></td><td>10道</td><td>¥12,640</td><td>218</td><td>294</td><td>268</td><td>76℃</td><td>66℃</td><td>980人</td><td>222g</td><td>1次</td><td><a class="link">查看</a> <a class="link">编辑</a></td></tr>
|
||||
<tr><td>00027号秤</td><td><span class="tag tag-orange">无网络</span></td><td><span class="tag tag-gray">档口秤</span></td><td>C区快餐线</td><td>午餐</td><td><span class="tag tag-blue">加餐</span></td><td>6道</td><td>¥4,820</td><td>92</td><td>128</td><td>120</td><td>74℃</td><td>70℃</td><td>516人</td><td>178g</td><td>2次</td><td><a class="link">查看</a> <a class="link">编辑</a></td></tr>
|
||||
<tr><td>00028号秤</td><td><span class="tag tag-gray">未开机</span></td><td><span class="tag tag-gray">档口秤</span></td><td>D区晚餐线</td><td>晚餐</td><td><span class="tag tag-gray">待上餐</span></td><td>—</td><td>—</td><td>—</td><td>—</td><td>—</td><td>—</td><td>—</td><td>—</td><td>—</td><td>0次</td><td><a class="link">查看</a> <a class="link">编辑</a></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>显示 6 条，共 18 条</span>
|
||||
<button class="page-btn">‹</button>
|
||||
<button class="page-btn active">1</button>
|
||||
<button class="page-btn">2</button>
|
||||
<button class="page-btn">3</button>
|
||||
<button class="page-btn">›</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- 交互脚本 -->
|
||||
<script>
|
||||
function toggleSubgroup(header){header.parentElement.classList.toggle('open');}
|
||||
(function(){var active=document.querySelector('.sidebar-item.active');if(!active)return;var sub=active.closest('.sidebar-subgroup');if(sub)sub.classList.add('open');})();
|
||||
function switchTab(idx){
|
||||
document.querySelectorAll('.page-tab').forEach(function(t,i){t.classList.toggle('active',i===idx);});
|
||||
document.querySelectorAll('.tab-panel').forEach(function(p,i){p.classList.toggle('active',i===idx);});
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,284 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>营养管理 - 营养点餐 | 健康长庆原型</title>
|
||||
<style>
|
||||
*{box-sizing:border-box;margin:0;padding:0;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#F5F7FA;color:#333;min-width:1280px;}
|
||||
:root{
|
||||
--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;
|
||||
--text-primary:#333;--text-secondary:#666;--text-placeholder:#999;--border:#E8E8E8;--background:#F5F7FA;
|
||||
--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--font-xxl:24px;
|
||||
--radius-sm:4px;--radius-md:8px;--radius-lg:12px;
|
||||
--shadow-sm:0 1px 4px rgba(0,0,0,0.08);--shadow-md:0 4px 12px rgba(0,0,0,0.12);
|
||||
}
|
||||
.top-bar{display:flex;align-items:center;height:56px;background:#001529;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;}
|
||||
.top-bar__logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:var(--font-lg);font-weight:600;white-space:nowrap;width:240px;flex-shrink:0;}
|
||||
.top-bar__logo svg{width:28px;height:28px;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.top-bar__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.top-bar__right .btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.top-bar__right .btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);cursor:pointer;}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;text-transform:uppercase;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.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;}
|
||||
${CSS_RULE}
|
||||
.sidebar-subgroup__header{display:flex;align-items:center;gap:6px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;user-select:none;}
|
||||
.sidebar-subgroup__header:hover{color:rgba(255,255,255,0.85);background:rgba(255,255,255,0.04);}
|
||||
.sidebar-subgroup__header .arrow{width:10px;height:10px;transition:transform .2s;flex-shrink:0;}
|
||||
.sidebar-subgroup__header .arrow path{stroke:rgba(255,255,255,0.45);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header{color:rgba(255,255,255,0.85);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header .arrow{transform:rotate(90deg);}
|
||||
.sidebar-subgroup__body{display:none;padding-left:16px;}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__body{display:block;}
|
||||
.sidebar-subgroup__body .sidebar-item{padding-left:36px;font-size:12px;}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;min-height:calc(100vh - 56px);}
|
||||
.stats-row{display:grid;grid-template-columns:repeat(3,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;}
|
||||
.stat-card__icon.blue{background:var(--primary-light);}
|
||||
.stat-card__icon.green{background:#F6FFED;}
|
||||
.stat-card__icon.orange{background:#FFF7E6;}
|
||||
.stat-card__icon.red{background:#FFF1F0;}
|
||||
.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-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;}
|
||||
.filter-input:focus{border-color:var(--primary);}
|
||||
.filter-select{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);color:var(--text-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='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;cursor:pointer;min-width:120px;}
|
||||
.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;}
|
||||
.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);}
|
||||
.tag-orange{background:#FFF7E6;color:var(--warning);}
|
||||
.tag-red{background:#FFF1F0;color:var(--danger);}
|
||||
.tag-gray{background:#F5F5F5;color:#999;}
|
||||
.link{color:var(--primary);cursor:pointer;font-size:var(--font-sm);text-decoration:none;}.link:hover{color:#40a9ff;}
|
||||
.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);}
|
||||
.action-bar{display:flex;align-items:center;gap:8px;margin-bottom:16px;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- 顶部导航栏 -->
|
||||
<header class="top-bar">
|
||||
<div class="top-bar__logo">
|
||||
<svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M7 14h14M14 7v14" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/></svg>
|
||||
营养管理
|
||||
</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="trace-query.html">溯源总览</a>
|
||||
<a href="arc-employee.html">档案</a>
|
||||
<a href="farm-land.html">绿色种采</a>
|
||||
<a href="sup-hygiene-check.html">卫生供应</a>
|
||||
<a href="prod-qc-daily.html">健康生产</a>
|
||||
<a href="din-dict-mgmt.html" class="active">营养用餐</a>
|
||||
<a href="ano-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<a href="../../index.html" class="btn-back">← 返回首页</a>
|
||||
<div class="avatar">管</div>
|
||||
<span>系统管理员 ▾</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- 侧边栏 -->
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">营养用餐</div>
|
||||
<a href="din-dict-mgmt.html" class="sidebar-item"><span class="mi">📖</span>字典管理</a>
|
||||
<a href="prod-qc-nutrition.html" class="sidebar-item"><span class="mi">🔬</span>营养检验</a>
|
||||
<a href="din-ingredient.html" class="sidebar-item"><span class="mi">🥦</span>食物成分</a>
|
||||
<a href="din-dish-all.html" class="sidebar-item"><span class="mi">🍽️</span>餐品总库</a>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 10 10" fill="none"><path d="M3 1l4 4-4 4" stroke-width="1.5"/></svg>
|
||||
📐 算法标准
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="din-algo-population.html" class="sidebar-item"><span class="mi">👥</span>人群基础标准</a>
|
||||
<a href="din-algo-vip.html" class="sidebar-item"><span class="mi">💎</span>VIP定制标准</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="din-recipe-mgmt.html" class="sidebar-item"><span class="mi">📋</span>食谱管理</a>
|
||||
<a href="din-order-meal.html" class="sidebar-item active"><span class="mi">🍱</span>营养点餐</a>
|
||||
<a href="din-user-mgmt.html" class="sidebar-item"><span class="mi">👤</span>用户管理</a>
|
||||
<a href="din-order-line.html" class="sidebar-item"><span class="mi">🍜</span>餐线管理</a>
|
||||
<a href="din-order-pickup.html" class="sidebar-item"><span class="mi">🎫</span>取餐管理</a>
|
||||
<a href="din-data-consume.html" class="sidebar-item"><span class="mi">💳</span>消费管理</a>
|
||||
<a href="din-data-nutri.html" class="sidebar-item"><span class="mi">📊</span>营养管理</a>
|
||||
<a href="din-data-benefit.html" class="sidebar-item"><span class="mi">📈</span>餐材效益</a>
|
||||
<a href="din-terminal.html" class="sidebar-item"><span class="mi">🖥️</span>终端管理</a>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 10 10" fill="none"><path d="M3 1l4 4-4 4" stroke-width="1.5"/></svg>
|
||||
🤖 模型管理
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="din-model-llm.html" class="sidebar-item"><span class="mi">🧠</span>大模型管理</a>
|
||||
<a href="din-model-small.html" class="sidebar-item"><span class="mi">⚙️</span>小模型管理</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="din-innovation.html" class="sidebar-item"><span class="mi">🌟</span>味养创新</a>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容 -->
|
||||
<main class="main">
|
||||
<!-- 统计卡片 -->
|
||||
<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">486单</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">12单</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">64单</div><div class="stat-card__label">净菜订单</div></div></div>
|
||||
</div>
|
||||
|
||||
<!-- 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>
|
||||
|
||||
<!-- Tab1: 个人点餐 -->
|
||||
<div class="tab-panel active">
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item"><label>日期范围</label><input class="filter-input" type="date"></div>
|
||||
<div class="filter-item"><label>餐次</label><select class="filter-select"><option>全部</option><option>早餐</option><option>午餐</option><option>晚餐</option></select></div>
|
||||
<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>≥90%</option><option>70%-89%</option><option><70%</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><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>目标热量(kcal)</th><th>点餐内容</th><th>营养匹配度</th><th>禁忌过滤</th><th>营养评分</th><th>日期</th><th>操作</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td>NM-001</td><td>张伟(EMP001)</td><td>午餐</td><td>2,250</td><td>米饭+清蒸鱼+炒西兰花+番茄蛋花汤</td><td><span class="tag tag-green">92%</span></td><td><span class="tag tag-orange">已过滤</span></td><td><span class="tag tag-green">92分</span></td><td>2026-04-23</td><td><a class="link">餐品明细</a></td></tr>
|
||||
<tr><td>NM-002</td><td>李娜(EMP002)</td><td>午餐</td><td>1,800</td><td>杂粮饭+清蒸鱼+清炒时蔬+冬瓜排骨汤</td><td><span class="tag tag-green">95%</span></td><td>—</td><td><span class="tag tag-green">95分</span></td><td>2026-04-23</td><td><a class="link">餐品明细</a></td></tr>
|
||||
<tr><td>NM-003</td><td>王强(EMP003)</td><td>午餐</td><td>2,250</td><td>米饭+红烧肉+番茄炒蛋+番茄蛋花汤</td><td><span class="tag tag-orange">72%</span></td><td>—</td><td><span class="tag tag-orange">72分</span></td><td>2026-04-23</td><td><a class="link">餐品明细</a></td></tr>
|
||||
<tr><td>NM-004</td><td>赵敏(EMP004)</td><td>午餐</td><td>1,800</td><td>杂粮饭+宫保鸡丁+炒西兰花+番茄蛋花汤</td><td><span class="tag tag-green">88%</span></td><td><span class="tag tag-orange">已过滤</span></td><td><span class="tag tag-green">88分</span></td><td>2026-04-23</td><td><a class="link">餐品明细</a></td></tr>
|
||||
<tr><td>NM-005</td><td>陈磊(EMP005)</td><td>午餐</td><td>2,250</td><td>米饭+红烧肉+宫保鸡丁+炒西兰花</td><td><span class="tag tag-orange">68%</span></td><td>—</td><td><span class="tag tag-orange">68分</span></td><td>2026-04-23</td><td><a class="link">餐品明细</a></td></tr>
|
||||
<tr><td>NM-006</td><td>刘洋(EMP006)</td><td>午餐</td><td>1,600</td><td>杂粮饭+蒜蓉菠菜+炒时蔬+紫菜蛋花汤</td><td><span class="tag tag-green">90%</span></td><td>—</td><td><span class="tag tag-green">90分</span></td><td>2026-04-23</td><td><a class="link">餐品明细</a></td></tr>
|
||||
<tr><td>NM-007</td><td>吴芳(EMP007)</td><td>午餐</td><td>1,900</td><td>米饭+清蒸鱼+番茄炒蛋+豆腐+冬瓜排骨汤</td><td><span class="tag tag-green">85%</span></td><td><span class="tag tag-orange">已过滤</span></td><td><span class="tag tag-green">85分</span></td><td>2026-04-23</td><td><a class="link">餐品明细</a></td></tr>
|
||||
</tbody></table></div>
|
||||
<div class="pagination">
|
||||
<span>显示 7 条，共 486 条</span>
|
||||
<button class="page-btn">‹</button>
|
||||
<button class="page-btn active">1</button>
|
||||
<button class="page-btn">2</button>
|
||||
<button class="page-btn">3</button>
|
||||
<button class="page-btn">...</button>
|
||||
<button class="page-btn">70</button>
|
||||
<button class="page-btn">›</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tab2: 团体点餐 -->
|
||||
<div class="tab-panel">
|
||||
<div class="filter-bar">
|
||||
<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></select></div>
|
||||
<div class="filter-item"><label>日期</label><input class="filter-input" type="date"></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></tr></thead>
|
||||
<tbody>
|
||||
<tr><td>研发中心午餐团</td><td>部门</td><td>86</td><td>年轻成人为主</td><td>¥28</td><td>¥2,408</td><td><span class="tag tag-green">88%</span></td><td>2026-04-23</td><td><a class="link">餐品明细</a></td></tr>
|
||||
<tr><td>行政楼早餐团</td><td>部门</td><td>42</td><td>中年混合</td><td>¥15</td><td>¥630</td><td><span class="tag tag-green">82%</span></td><td>2026-04-23</td><td><a class="link">餐品明细</a></td></tr>
|
||||
<tr><td>养老院午餐团</td><td>班级</td><td>28</td><td>老年人(≥60岁)</td><td>¥35</td><td>¥980</td><td><span class="tag tag-green">91%</span></td><td>2026-04-23</td><td><a class="link">餐品明细</a></td></tr>
|
||||
<tr><td>幼儿园午餐团</td><td>班级</td><td>56</td><td>青少年</td><td>¥22</td><td>¥1,232</td><td><span class="tag tag-green">86%</span></td><td>2026-04-23</td><td><a class="link">餐品明细</a></td></tr>
|
||||
<tr><td>康复中心自定义团</td><td>专项</td><td>18</td><td>术后康复人群</td><td>¥42</td><td>¥756</td><td><span class="tag tag-green">94%</span></td><td>2026-04-23</td><td><a class="link">餐品明细</a></td></tr>
|
||||
</tbody></table></div>
|
||||
<div class="pagination">
|
||||
<span>显示 5 条，共 12 条</span>
|
||||
<button class="page-btn">‹</button>
|
||||
<button class="page-btn active">1</button>
|
||||
<button class="page-btn">2</button>
|
||||
<button class="page-btn">3</button>
|
||||
<button class="page-btn">›</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tab3: 净菜订单 -->
|
||||
<div class="tab-panel">
|
||||
<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><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><button class="btn btn-default">✅ 确认发货</button></div>
|
||||
<div class="table-card">
|
||||
<div class="table-card__header"><div class="table-card__title">净菜订单</div></div>
|
||||
<div class="table-card__content"><table><thead><tr><th>订单号</th><th>用户</th><th>净菜清单</th><th>总规格</th><th>金额</th><th>取货方式</th><th>订单状态</th><th>下单时间</th><th>操作</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td>CL20260423-056</td><td>张伟</td><td>净土豆、净洋葱</td><td>2.5kg + 1.0kg</td><td>¥18</td><td><span class="tag tag-green">自取</span></td><td><span class="tag tag-blue">待取货</span></td><td>2026-04-23 09:15</td><td><a class="link">餐品明细</a></td></tr>
|
||||
<tr><td>CL20260423-057</td><td>李芳</td><td>净白菜、净胡萝卜、净豆芽</td><td>1.5kg + 0.8kg + 0.5kg</td><td>¥16</td><td><span class="tag tag-blue">配送</span></td><td><span class="tag tag-orange">备货中</span></td><td>2026-04-23 09:30</td><td><a class="link">餐品明细</a></td></tr>
|
||||
<tr><td>CL20260423-058</td><td>王娜</td><td>净番茄、净黄瓜</td><td>3.0kg + 1.2kg</td><td>¥24</td><td><span class="tag tag-green">自取</span></td><td><span class="tag tag-green">已完成</span></td><td>2026-04-23 08:50</td><td><a class="link">餐品明细</a></td></tr>
|
||||
<tr><td>CL20260423-059</td><td>刘敏</td><td>净胡萝卜、净土豆</td><td>1.0kg + 1.5kg</td><td>¥14</td><td><span class="tag tag-blue">配送</span></td><td><span class="tag tag-blue">已支付</span></td><td>2026-04-23 10:05</td><td><a class="link">餐品明细</a></td></tr>
|
||||
<tr><td>CL20260423-060</td><td>陈强</td><td>净白菜、净香菇</td><td>2.0kg + 0.6kg</td><td>¥15</td><td><span class="tag tag-green">自取</span></td><td><span class="tag tag-gray">已取消</span></td><td>2026-04-23 09:00</td><td><a class="link">餐品明细</a></td></tr>
|
||||
</tbody></table></div>
|
||||
<div class="pagination">
|
||||
<span>显示 5 条，共 64 条</span>
|
||||
<button class="page-btn">‹</button>
|
||||
<button class="page-btn active">1</button>
|
||||
<button class="page-btn">2</button>
|
||||
<button class="page-btn">3</button>
|
||||
<button class="page-btn">...</button>
|
||||
<button class="page-btn">13</button>
|
||||
<button class="page-btn">›</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<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 toggleSubgroup(header){header.parentElement.classList.toggle('open');}
|
||||
(function(){var active=document.querySelector('.sidebar-item.active');if(!active)return;var sub=active.closest('.sidebar-subgroup');if(sub)sub.classList.add('open');})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,417 @@
|
||||
<!DOCTYPE html>
|
||||
<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;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#F5F7FA;color:#333;min-width:1280px;}
|
||||
:root{
|
||||
--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;
|
||||
--text-primary:#333;--text-secondary:#666;--text-placeholder:#999;--border:#E8E8E8;--background:#F5F7FA;
|
||||
--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--font-xxl:24px;
|
||||
--radius-sm:4px;--radius-md:8px;--radius-lg:12px;
|
||||
--shadow-sm:0 1px 4px rgba(0,0,0,0.08);--shadow-md:0 4px 12px rgba(0,0,0,0.12);
|
||||
}
|
||||
|
||||
/* 通用布局 */
|
||||
.top-bar{display:flex;align-items:center;height:56px;background:#001529;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;}
|
||||
.top-bar__logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:var(--font-lg);font-weight:600;white-space:nowrap;width:240px;flex-shrink:0;}
|
||||
.top-bar__logo svg{width:28px;height:28px;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.top-bar__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.top-bar__right .btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.top-bar__right .btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);cursor:pointer;}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;text-transform:uppercase;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.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;}
|
||||
${CSS_RULE}
|
||||
.sidebar-subgroup__header{display:flex;align-items:center;gap:6px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;user-select:none;}
|
||||
.sidebar-subgroup__header:hover{color:rgba(255,255,255,0.85);background:rgba(255,255,255,0.04);}
|
||||
.sidebar-subgroup__header .arrow{width:10px;height:10px;transition:transform .2s;flex-shrink:0;}
|
||||
.sidebar-subgroup__header .arrow path{stroke:rgba(255,255,255,0.45);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header{color:rgba(255,255,255,0.85);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header .arrow{transform:rotate(90deg);}
|
||||
.sidebar-subgroup__body{display:none;padding-left:16px;}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__body{display:block;}
|
||||
.sidebar-subgroup__body .sidebar-item{padding-left:36px;font-size:12px;}
|
||||
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;min-height:calc(100vh - 56px);}
|
||||
.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:200px;}
|
||||
.filter-input:focus{border-color:var(--primary);}
|
||||
.filter-select{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);color:var(--text-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='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;cursor:pointer;min-width:120px;}
|
||||
.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;}
|
||||
.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);}
|
||||
.tag-orange{background:#FFF7E6;color:var(--warning);}
|
||||
.tag-red{background:#FFF1F0;color:var(--danger);}
|
||||
.tag-gray{background:#F5F5F5;color:#999;}
|
||||
.tag-purple{background:#F9F0FF;color:#722ED1;}
|
||||
.link{color:var(--primary);cursor:pointer;font-size:var(--font-sm);}.link:hover{color:#40a9ff;}
|
||||
.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);}
|
||||
.action-bar{display:flex;align-items:center;gap:8px;margin-bottom:16px;}
|
||||
|
||||
/* 弹窗样式 */
|
||||
.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.45);z-index:1000;display:flex;align-items:center;justify-content:center;animation:modalFadeIn .2s ease;}
|
||||
.modal-overlay.closing{animation:modalFadeOut .2s ease forwards;}
|
||||
@keyframes modalFadeIn{from{opacity:0}to{opacity:1}}
|
||||
@keyframes modalFadeOut{from{opacity:1}to{opacity:0}}
|
||||
@keyframes modalSlideIn{from{transform:translateY(-20px);opacity:0}to{transform:translateY(0);opacity:1}}
|
||||
@keyframes modalSlideOut{from{transform:translateY(0);opacity:1}to{transform:translateY(-20px);opacity:0}}
|
||||
.modal{background:#fff;border-radius:8px;width:900px;max-width:90vw;max-height:85vh;display:flex;flex-direction:column;box-shadow:0 12px 48px rgba(0,0,0,.15);animation:modalSlideIn .25s ease;}
|
||||
.modal-overlay.closing .modal{animation:modalSlideOut .2s ease forwards;}
|
||||
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border);}
|
||||
.modal-title{font-size:var(--font-lg);font-weight:600;color:var(--text-primary);}
|
||||
.modal-close{width:32px;height:32px;border:none;background:none;font-size:20px;cursor:pointer;border-radius:var(--radius-sm);color:var(--text-secondary);display:flex;align-items:center;justify-content:center;}
|
||||
.modal-close:hover{background:#f5f5f5;color:var(--text-primary);}
|
||||
.modal-body{padding:24px;overflow-y:auto;flex:1;}
|
||||
|
||||
/* 十维档案 Tab */
|
||||
.profile-tabs{display:flex;gap:0;border-bottom:1px solid var(--border);margin-bottom:20px;overflow-x:auto;}
|
||||
.profile-tab{padding:10px 16px;font-size:var(--font-sm);color:var(--text-secondary);cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap;transition:all .2s;}
|
||||
.profile-tab:hover{color:var(--primary);}
|
||||
.profile-tab.active{color:var(--primary);border-bottom-color:var(--primary);font-weight:500;}
|
||||
.profile-panel{display:none;}
|
||||
.profile-panel.active{display:block;}
|
||||
.profile-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px 24px;}
|
||||
.profile-field{display:flex;align-items:baseline;gap:8px;font-size:var(--font-sm);padding:8px 0;border-bottom:1px dashed #f0f0f0;}
|
||||
.profile-field__label{color:var(--text-secondary);min-width:80px;flex-shrink:0;}
|
||||
.profile-field__value{color:var(--text-primary);font-weight:500;}
|
||||
.profile-field__value .tag{margin-left:4px;}
|
||||
.profile-summary{display:flex;align-items:center;gap:16px;padding:16px;background:#f8fafc;border-radius:var(--radius-md);margin-bottom:20px;}
|
||||
.profile-summary__avatar{width:56px;height:56px;border-radius:50%;background:var(--primary);display:flex;align-items:center;justify-content:center;color:#fff;font-size:22px;font-weight:600;}
|
||||
.profile-summary__info{display:flex;flex-direction:column;gap:4px;}
|
||||
.profile-summary__name{font-size:var(--font-base);font-weight:600;color:var(--text-primary);}
|
||||
.profile-summary__meta{font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- 顶部导航 -->
|
||||
<header class="top-bar">
|
||||
<div class="top-bar__logo">
|
||||
<svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M7 14h14M14 7v14" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/></svg>
|
||||
营养管理
|
||||
</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="trace-query.html">溯源总览</a>
|
||||
<a href="arc-employee.html">档案</a>
|
||||
<a href="farm-land.html">绿色种采</a>
|
||||
<a href="sup-hygiene-check.html">卫生供应</a>
|
||||
<a href="prod-qc-daily.html">健康生产</a>
|
||||
<a href="din-dict-mgmt.html" class="active">营养用餐</a>
|
||||
<a href="ano-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<a class="btn-back" href="../../index.html">← 返回首页</a>
|
||||
<div class="avatar">管</div>
|
||||
<span>系统管理员 ▾</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- 侧边栏 -->
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">营养用餐</div>
|
||||
<a href="din-dict-mgmt.html" class="sidebar-item"><span class="mi">📖</span>字典管理</a>
|
||||
<a href="prod-qc-nutrition.html" class="sidebar-item"><span class="mi">🔬</span>营养检验</a>
|
||||
<a href="din-ingredient.html" class="sidebar-item"><span class="mi">🥦</span>食物成分</a>
|
||||
<a href="din-dish-all.html" class="sidebar-item"><span class="mi">🍲</span>餐品总库</a>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 10 10" fill="none"><path d="M3 1l4 4-4 4" stroke-width="1.5"/></svg>
|
||||
📐 算法标准
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="din-algo-population.html" class="sidebar-item"><span class="mi">👥</span>人群基础标准</a>
|
||||
<a href="din-algo-vip.html" class="sidebar-item"><span class="mi">💎</span>VIP定制标准</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="din-recipe-mgmt.html" class="sidebar-item"><span class="mi">📋</span>食谱管理</a>
|
||||
<a href="din-order-meal.html" class="sidebar-item"><span class="mi">🛒</span>营养点餐</a>
|
||||
<a href="din-user-mgmt.html" class="sidebar-item"><span class="mi">🧑</span>用户管理</a>
|
||||
<a href="din-order-line.html" class="sidebar-item"><span class="mi">⚖️</span>餐线管理</a>
|
||||
<a href="din-order-pickup.html" class="sidebar-item active"><span class="mi">🍽️</span>取餐管理</a>
|
||||
<a href="din-data-consume.html" class="sidebar-item"><span class="mi">💰</span>消费管理</a>
|
||||
<a href="din-data-nutri.html" class="sidebar-item"><span class="mi">📊</span>营养管理</a>
|
||||
<a href="din-data-benefit.html" class="sidebar-item"><span class="mi">📈</span>餐材效益</a>
|
||||
<a href="din-terminal.html" class="sidebar-item"><span class="mi">🖥️</span>终端管理</a>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 10 10" fill="none"><path d="M3 1l4 4-4 4" stroke-width="1.5"/></svg>
|
||||
🤖 模型管理
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="din-model-llm.html" class="sidebar-item"><span class="mi">🧠</span>大模型管理</a>
|
||||
<a href="din-model-small.html" class="sidebar-item"><span class="mi">⚙️</span>小模型管理</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="din-innovation.html" class="sidebar-item"><span class="mi">🌟</span>味养创新</a>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容区 -->
|
||||
<div class="main">
|
||||
|
||||
<!-- 筛选栏 -->
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item"><label>员工姓名/工号</label><input class="filter-input" type="text" placeholder="请输入姓名或工号"></div>
|
||||
<div class="filter-item"><label>部门</label><select class="filter-select"><option>全部</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><option>晚餐</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>
|
||||
<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><input class="filter-input" type="date"></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>
|
||||
<button class="btn btn-default">📊 营养汇总报告</button>
|
||||
</div>
|
||||
|
||||
<!-- 数据表格 -->
|
||||
<div class="table-card">
|
||||
<div class="table-card__header">
|
||||
<div class="table-card__title">取餐管理</div>
|
||||
</div>
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>就餐记录号</th><th>用户</th><th>部门</th><th>餐次</th><th>取餐方式</th><th>取餐类型</th><th>人员类别</th><th>取餐开始时间</th><th>取餐结束时间</th><th>取餐总数量</th><th>营养评分</th><th>操作</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>M-20260428-001</td><td>张伟(EMP001)</td><td>研发部</td><td>午餐</td><td><span class="tag tag-blue">点餐取餐</span></td><td><span class="tag tag-green">正常取餐</span></td><td><span class="tag tag-orange">会员</span></td><td>11:02</td><td>11:08</td><td><a class="link">3件</a></td><td><span class="tag tag-green">88分</span></td><td><a class="link">查看用户信息</a></td></tr>
|
||||
<tr><td>M-20260428-002</td><td>李娜(EMP002)</td><td>市场部</td><td>午餐</td><td><span class="tag tag-blue">点餐取餐</span></td><td><span class="tag tag-green">正常取餐</span></td><td><span class="tag tag-orange">会员</span></td><td>11:08</td><td>11:14</td><td><a class="link">3件</a></td><td><span class="tag tag-green">92分</span></td><td><a class="link">查看用户信息</a></td></tr>
|
||||
<tr><td>M-20260428-003</td><td>王磊(EMP003)</td><td>运营部</td><td>午餐</td><td><span class="tag tag-gray">餐线取餐</span></td><td><span class="tag tag-green">正常取餐</span></td><td><span class="tag tag-gray">非会员</span></td><td>11:15</td><td>11:20</td><td><a class="link">2件</a></td><td><span class="tag tag-orange">68分</span></td><td><a class="link">查看用户信息</a></td></tr>
|
||||
<tr><td>M-20260428-004</td><td>赵敏(EMP004)</td><td>财务部</td><td>午餐</td><td><span class="tag tag-green">档口+餐线</span></td><td><span class="tag tag-green">正常取餐</span></td><td><span class="tag tag-orange">会员</span></td><td>11:22</td><td>11:30</td><td><a class="link">3件</a></td><td><span class="tag tag-green">94分</span></td><td><a class="link">查看用户信息</a></td></tr>
|
||||
<tr><td>M-20260428-005</td><td>陈刚(EMP005)</td><td>人事部</td><td>早餐</td><td><span class="tag tag-gray">餐线取餐</span></td><td><span class="tag tag-green">正常取餐</span></td><td><span class="tag tag-gray">非会员</span></td><td>07:48</td><td>07:55</td><td><a class="link">3件</a></td><td><span class="tag tag-green">85分</span></td><td><a class="link">查看用户信息</a></td></tr>
|
||||
<tr><td>M-20260428-006</td><td>刘芳(EMP006)</td><td>市场部</td><td>午餐</td><td><span class="tag tag-blue">外卖/外带</span></td><td><span class="tag tag-green">正常取餐</span></td><td><span class="tag tag-orange">会员</span></td><td>11:45</td><td>11:48</td><td><a class="link">2件</a></td><td><span class="tag tag-green">90分</span></td><td><a class="link">查看用户信息</a></td></tr>
|
||||
<tr><td>SP-001-001</td><td>张运维(EMP101)</td><td>运维部</td><td>午餐</td><td><span class="tag tag-orange">余量取餐</span></td><td><span class="tag tag-orange">余量取餐</span></td><td><span class="tag tag-blue">员工</span></td><td>14:05</td><td>14:06</td><td><a class="link">1件</a></td><td>—</td><td><a class="link">查看用户信息</a></td></tr>
|
||||
<tr><td>SP-001-003</td><td>王保安(EMP103)</td><td>安保部</td><td>午餐</td><td><span class="tag tag-orange">余量取餐</span></td><td><span class="tag tag-orange">余量取餐</span></td><td><span class="tag tag-blue">工作人员</span></td><td>14:10</td><td>14:11</td><td><a class="link">1件</a></td><td>—</td><td><a class="link">查看用户信息</a></td></tr>
|
||||
<tr><td>M-20260428-007</td><td>林教授</td><td>外部访客</td><td>午餐</td><td><span class="tag tag-blue">点餐取餐</span></td><td><span class="tag tag-green">正常取餐</span></td><td><span class="tag tag-purple">外部人员</span></td><td>12:10</td><td>12:18</td><td><a class="link">3件</a></td><td><span class="tag tag-green">86分</span></td><td><a class="link">查看用户信息</a></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>显示 9 条，共 1,280 条</span>
|
||||
<button class="page-btn">‹</button>
|
||||
<button class="page-btn active">1</button>
|
||||
<button class="page-btn">2</button>
|
||||
<button class="page-btn">3</button>
|
||||
<button class="page-btn">›</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- 交互脚本 -->
|
||||
<script>
|
||||
function toggleSubgroup(header){header.parentElement.classList.toggle('open');}
|
||||
(function(){var active=document.querySelector('.sidebar-item.active');if(!active)return;var sub=active.closest('.sidebar-subgroup');if(sub)sub.classList.add('open');})();
|
||||
|
||||
/* ========== 十维档案弹窗 ========== */
|
||||
const Modal = {
|
||||
open(title, bodyHtml) {
|
||||
this.close();
|
||||
const overlay = document.createElement('div');
|
||||
overlay.className = 'modal-overlay';
|
||||
overlay.innerHTML = `<div class="modal">
|
||||
<div class="modal-header"><div class="modal-title">${title}</div><button class="modal-close" onclick="Modal.close()">×</button></div>
|
||||
<div class="modal-body">${bodyHtml}</div>
|
||||
</div>`;
|
||||
overlay.addEventListener('click', e => { if (e.target === overlay) Modal.close(); });
|
||||
document.body.appendChild(overlay);
|
||||
},
|
||||
close() {
|
||||
const o = document.querySelector('.modal-overlay');
|
||||
if (!o) return;
|
||||
o.classList.add('closing');
|
||||
setTimeout(() => o.remove(), 200);
|
||||
}
|
||||
};
|
||||
|
||||
/* 模拟用户十维档案数据 */
|
||||
const userProfiles = {
|
||||
'张伟': { dept:'研发部', age:32, gender:'男', height:'175cm', weight:'72kg', bmi:'23.5', activity:'中等',
|
||||
disease:'无', chronic:'无', medicine:'无', family:'高血压(父)',
|
||||
examDate:'2026-03-15', bp:'125/80', glucose:'5.2', lipid:'正常', uric:'380', liver:'正常', kidney:'正常',
|
||||
taste:'偏辣', region:'川菜、湘菜',
|
||||
taboo:'无', allergy:'花生',
|
||||
exercise:'6000步/日', weightTrend:'稳定', bodyFat:'18%', heartRate:'68', sleep:'7.5h', stress:'低', source:'智能手环',
|
||||
meals30:'58次', hotDish:'宫保鸡丁、番茄牛腩', avgCal:'680kcal', nutriRate:'88%',
|
||||
favDish:'宫保鸡丁、清炒西兰花', recDish:'三文鱼沙拉', avoidDish:'油炸花生', topRate:'番茄牛腩(4.8)', repurchase:'宫保鸡丁',
|
||||
hometown:'四川成都', momTag:'麻辣鲜香', momList:'回锅肉、麻婆豆腐', memory:'妈妈的回锅肉', recTry:'水煮鱼',
|
||||
modelVer:'v2.3', modelTime:'2026-04-20', recCal:'2100kcal', nutriFocus:'蛋白质+膳食纤维', risk:'无', tags:'运动达人、川菜爱好者', confidence:'92%' },
|
||||
'李娜': { dept:'市场部', age:28, gender:'女', height:'163cm', weight:'52kg', bmi:'19.6', activity:'轻度',
|
||||
disease:'无', chronic:'无', medicine:'无', family:'糖尿病(母)',
|
||||
examDate:'2026-02-20', bp:'110/70', glucose:'4.8', lipid:'正常', uric:'290', liver:'正常', kidney:'正常',
|
||||
taste:'清淡', region:'粤菜、日料',
|
||||
taboo:'无', allergy:'海鲜(虾蟹)',
|
||||
exercise:'4000步/日', weightTrend:'稳定', bodyFat:'22%', heartRate:'72', sleep:'7h', stress:'中', source:'手机计步',
|
||||
meals30:'52次', hotDish:'蒸鱼、蔬菜沙拉', avgCal:'520kcal', nutriRate:'92%',
|
||||
favDish:'清蒸鲈鱼、藜麦沙拉', recDish:'牛油果吐司', avoidDish:'麻辣火锅', topRate:'藜麦沙拉(4.9)', repurchase:'清蒸鲈鱼',
|
||||
hometown:'广东广州', momTag:'鲜甜清润', momList:'老火靓汤、白切鸡', memory:'周末的煲汤', recTry:'椰子鸡',
|
||||
modelVer:'v2.3', modelTime:'2026-04-18', recCal:'1650kcal', nutriFocus:'钙+铁+维生素D', risk:'注意糖摄入', tags:'轻食主义、养生达人', confidence:'95%' }
|
||||
};
|
||||
|
||||
/* 默认档案（其他用户） */
|
||||
const defaultProfile = { dept:'—', age:30, gender:'—', height:'170cm', weight:'65kg', bmi:'22.5', activity:'中等',
|
||||
disease:'无', chronic:'无', medicine:'无', family:'无',
|
||||
examDate:'2026-01-10', bp:'120/78', glucose:'5.0', lipid:'正常', uric:'350', liver:'正常', kidney:'正常',
|
||||
taste:'适中', region:'不限',
|
||||
taboo:'无', allergy:'无',
|
||||
exercise:'5000步/日', weightTrend:'稳定', bodyFat:'20%', heartRate:'70', sleep:'7h', stress:'低', source:'手动录入',
|
||||
meals30:'45次', hotDish:'家常菜', avgCal:'600kcal', nutriRate:'78%',
|
||||
favDish:'红烧肉、西红柿炒蛋', recDish:'杂粮饭套餐', avoidDish:'无', topRate:'红烧肉(4.5)', repurchase:'西红柿炒蛋',
|
||||
hometown:'—', momTag:'家常味', momList:'红烧肉', memory:'—', recTry:'—',
|
||||
modelVer:'v2.3', modelTime:'2026-04-15', recCal:'1900kcal', nutriFocus:'均衡', risk:'无', tags:'普通用户', confidence:'80%' };
|
||||
|
||||
const tabDefs = [
|
||||
{ key:'basic', label:'静态基础' },
|
||||
{ key:'disease', label:'疾病信息' },
|
||||
{ key:'physical', label:'体检信息' },
|
||||
{ key:'taste', label:'口味偏好' },
|
||||
{ key:'taboo', label:'禁忌关联' },
|
||||
{ key:'dynamic', label:'动态生理' },
|
||||
{ key:'meal', label:'历史用餐' },
|
||||
{ key:'dish', label:'菜品偏好' },
|
||||
{ key:'mom', label:'妈妈味道' },
|
||||
{ key:'model', label:'个性模型' }
|
||||
];
|
||||
|
||||
function buildProfileHTML(name, p) {
|
||||
const panels = {
|
||||
basic: `<div class="profile-grid">
|
||||
<div class="profile-field"><span class="profile-field__label">姓名</span><span class="profile-field__value">${name}</span></div>
|
||||
<div class="profile-field"><span class="profile-field__label">部门</span><span class="profile-field__value">${p.dept}</span></div>
|
||||
<div class="profile-field"><span class="profile-field__label">年龄</span><span class="profile-field__value">${p.age}岁</span></div>
|
||||
<div class="profile-field"><span class="profile-field__label">性别</span><span class="profile-field__value">${p.gender}</span></div>
|
||||
<div class="profile-field"><span class="profile-field__label">身高</span><span class="profile-field__value">${p.height}</span></div>
|
||||
<div class="profile-field"><span class="profile-field__label">体重</span><span class="profile-field__value">${p.weight}</span></div>
|
||||
<div class="profile-field"><span class="profile-field__label">BMI</span><span class="profile-field__value">${p.bmi}</span></div>
|
||||
<div class="profile-field"><span class="profile-field__label">活动水平</span><span class="profile-field__value">${p.activity}</span></div>
|
||||
</div>`,
|
||||
disease: `<div class="profile-grid">
|
||||
<div class="profile-field"><span class="profile-field__label">疾病史</span><span class="profile-field__value">${p.disease}</span></div>
|
||||
<div class="profile-field"><span class="profile-field__label">慢病分级</span><span class="profile-field__value">${p.chronic}</span></div>
|
||||
<div class="profile-field"><span class="profile-field__label">用药情况</span><span class="profile-field__value">${p.medicine}</span></div>
|
||||
<div class="profile-field"><span class="profile-field__label">家族病史</span><span class="profile-field__value">${p.family}</span></div>
|
||||
</div>`,
|
||||
physical: `<div class="profile-grid">
|
||||
<div class="profile-field"><span class="profile-field__label">体检日期</span><span class="profile-field__value">${p.examDate}</span></div>
|
||||
<div class="profile-field"><span class="profile-field__label">血压</span><span class="profile-field__value">${p.bp} mmHg</span></div>
|
||||
<div class="profile-field"><span class="profile-field__label">空腹血糖</span><span class="profile-field__value">${p.glucose} mmol/L</span></div>
|
||||
<div class="profile-field"><span class="profile-field__label">血脂</span><span class="profile-field__value">${p.lipid}</span></div>
|
||||
<div class="profile-field"><span class="profile-field__label">尿酸</span><span class="profile-field__value">${p.uric} μmol/L</span></div>
|
||||
<div class="profile-field"><span class="profile-field__label">肝功能</span><span class="profile-field__value">${p.liver}</span></div>
|
||||
<div class="profile-field"><span class="profile-field__label">肾功能</span><span class="profile-field__value">${p.kidney}</span></div>
|
||||
</div>`,
|
||||
taste: `<div class="profile-grid">
|
||||
<div class="profile-field"><span class="profile-field__label">口味偏好</span><span class="profile-field__value">${p.taste}</span></div>
|
||||
<div class="profile-field"><span class="profile-field__label">地域菜系</span><span class="profile-field__value">${p.region}</span></div>
|
||||
</div>`,
|
||||
taboo: `<div class="profile-grid">
|
||||
<div class="profile-field"><span class="profile-field__label">饮食禁忌</span><span class="profile-field__value">${p.taboo}</span></div>
|
||||
<div class="profile-field"><span class="profile-field__label">过敏原</span><span class="profile-field__value">${p.allergy}</span></div>
|
||||
</div>`,
|
||||
dynamic: `<div class="profile-grid">
|
||||
<div class="profile-field"><span class="profile-field__label">日均运动量</span><span class="profile-field__value">${p.exercise}</span></div>
|
||||
<div class="profile-field"><span class="profile-field__label">体重趋势</span><span class="profile-field__value">${p.weightTrend}</span></div>
|
||||
<div class="profile-field"><span class="profile-field__label">体脂率</span><span class="profile-field__value">${p.bodyFat}</span></div>
|
||||
<div class="profile-field"><span class="profile-field__label">静息心率</span><span class="profile-field__value">${p.heartRate} bpm</span></div>
|
||||
<div class="profile-field"><span class="profile-field__label">平均睡眠</span><span class="profile-field__value">${p.sleep}</span></div>
|
||||
<div class="profile-field"><span class="profile-field__label">压力指数</span><span class="profile-field__value">${p.stress}</span></div>
|
||||
<div class="profile-field"><span class="profile-field__label">数据来源</span><span class="profile-field__value">${p.source}</span></div>
|
||||
</div>`,
|
||||
meal: `<div class="profile-grid">
|
||||
<div class="profile-field"><span class="profile-field__label">近30日就餐</span><span class="profile-field__value">${p.meals30}</span></div>
|
||||
<div class="profile-field"><span class="profile-field__label">常点菜品</span><span class="profile-field__value">${p.hotDish}</span></div>
|
||||
<div class="profile-field"><span class="profile-field__label">平均热量</span><span class="profile-field__value">${p.avgCal}</span></div>
|
||||
<div class="profile-field"><span class="profile-field__label">营养达标率</span><span class="profile-field__value">${p.nutriRate}</span></div>
|
||||
</div>`,
|
||||
dish: `<div class="profile-grid">
|
||||
<div class="profile-field"><span class="profile-field__label">常点菜品</span><span class="profile-field__value">${p.favDish}</span></div>
|
||||
<div class="profile-field"><span class="profile-field__label">系统推荐</span><span class="profile-field__value">${p.recDish}</span></div>
|
||||
<div class="profile-field"><span class="profile-field__label">忌口菜品</span><span class="profile-field__value">${p.avoidDish}</span></div>
|
||||
<div class="profile-field"><span class="profile-field__label">评分最高</span><span class="profile-field__value">${p.topRate}</span></div>
|
||||
<div class="profile-field"><span class="profile-field__label">复购冠军</span><span class="profile-field__value">${p.repurchase}</span></div>
|
||||
</div>`,
|
||||
mom: `<div class="profile-grid">
|
||||
<div class="profile-field"><span class="profile-field__label">家乡</span><span class="profile-field__value">${p.hometown}</span></div>
|
||||
<div class="profile-field"><span class="profile-field__label">妈妈味道标签</span><span class="profile-field__value">${p.momTag}</span></div>
|
||||
<div class="profile-field"><span class="profile-field__label">思乡菜清单</span><span class="profile-field__value">${p.momList}</span></div>
|
||||
<div class="profile-field"><span class="profile-field__label">关联记忆</span><span class="profile-field__value">${p.memory}</span></div>
|
||||
<div class="profile-field"><span class="profile-field__label">推荐尝试</span><span class="profile-field__value">${p.recTry}</span></div>
|
||||
</div>`,
|
||||
model: `<div class="profile-grid">
|
||||
<div class="profile-field"><span class="profile-field__label">模型版本</span><span class="profile-field__value">${p.modelVer}</span></div>
|
||||
<div class="profile-field"><span class="profile-field__label">生成时间</span><span class="profile-field__value">${p.modelTime}</span></div>
|
||||
<div class="profile-field"><span class="profile-field__label">推荐热量</span><span class="profile-field__value">${p.recCal}</span></div>
|
||||
<div class="profile-field"><span class="profile-field__label">营养侧重</span><span class="profile-field__value">${p.nutriFocus}</span></div>
|
||||
<div class="profile-field"><span class="profile-field__label">风险预警</span><span class="profile-field__value">${p.risk}</span></div>
|
||||
<div class="profile-field"><span class="profile-field__label">个性标签</span><span class="profile-field__value">${p.tags}</span></div>
|
||||
<div class="profile-field"><span class="profile-field__label">模型置信度</span><span class="profile-field__value">${p.confidence}</span></div>
|
||||
</div>`
|
||||
};
|
||||
const tabs = tabDefs.map((t, i) => `<div class="profile-tab${i===0?' active':''}" onclick="switchTab(this,'${t.key}')">${t.label}</div>`).join('');
|
||||
const panelsHtml = tabDefs.map((t, i) => `<div class="profile-panel${i===0?' active':''}" data-panel="${t.key}">${panels[t.key]}</div>`).join('');
|
||||
const summary = `<div class="profile-summary"><div class="profile-summary__avatar">${name[0]}</div><div class="profile-summary__info"><div class="profile-summary__name">${name}</div><div class="profile-summary__meta">${p.dept} · ${p.gender} · ${p.age}岁 · BMI ${p.bmi}</div></div></div>`;
|
||||
return summary + `<div class="profile-tabs">${tabs}</div>${panelsHtml}`;
|
||||
}
|
||||
|
||||
function switchTab(el, key) {
|
||||
el.parentElement.querySelectorAll('.profile-tab').forEach(t => t.classList.remove('active'));
|
||||
el.classList.add('active');
|
||||
el.closest('.modal-body').querySelectorAll('.profile-panel').forEach(p => p.classList.remove('active'));
|
||||
el.closest('.modal-body').querySelector(`[data-panel="${key}"]`).classList.add('active');
|
||||
}
|
||||
|
||||
function showUserProfile(name) {
|
||||
const pureName = name.replace(/\(.*\)/, '').trim();
|
||||
const p = userProfiles[pureName] || defaultProfile;
|
||||
Modal.open('用户十维档案 — ' + pureName, buildProfileHTML(pureName, p));
|
||||
}
|
||||
|
||||
/* 绑定表格中的"查看用户信息"链接 */
|
||||
document.querySelectorAll('tbody tr').forEach(row => {
|
||||
const link = row.querySelector('td:last-child .link');
|
||||
const nameCell = row.querySelector('td:nth-child(2)');
|
||||
if (link && nameCell) {
|
||||
link.addEventListener('click', () => showUserProfile(nameCell.textContent));
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,242 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>营养管理 - 食谱管理 | 健康长庆原型</title>
|
||||
<style>
|
||||
*{box-sizing:border-box;margin:0;padding:0;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#F5F7FA;color:#333;min-width:1280px;}
|
||||
:root{
|
||||
--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;
|
||||
--text-primary:#333;--text-secondary:#666;--text-placeholder:#999;--border:#E8E8E8;--background:#F5F7FA;
|
||||
--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--font-xxl:24px;
|
||||
--radius-sm:4px;--radius-md:8px;--radius-lg:12px;
|
||||
--shadow-sm:0 1px 4px rgba(0,0,0,0.08);--shadow-md:0 4px 12px rgba(0,0,0,0.12);
|
||||
}
|
||||
.top-bar{display:flex;align-items:center;height:56px;background:#001529;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;}
|
||||
.top-bar__logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:var(--font-lg);font-weight:600;white-space:nowrap;width:240px;flex-shrink:0;}
|
||||
.top-bar__logo svg{width:28px;height:28px;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.top-bar__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.top-bar__right .btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.top-bar__right .btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);cursor:pointer;}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;text-transform:uppercase;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.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;}
|
||||
${CSS_RULE}
|
||||
.sidebar-subgroup__header{display:flex;align-items:center;gap:6px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;user-select:none;}
|
||||
.sidebar-subgroup__header:hover{color:rgba(255,255,255,0.85);background:rgba(255,255,255,0.04);}
|
||||
.sidebar-subgroup__header .arrow{width:10px;height:10px;transition:transform .2s;flex-shrink:0;}
|
||||
.sidebar-subgroup__header .arrow path{stroke:rgba(255,255,255,0.45);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header{color:rgba(255,255,255,0.85);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header .arrow{transform:rotate(90deg);}
|
||||
.sidebar-subgroup__body{display:none;padding-left:16px;}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__body{display:block;}
|
||||
.sidebar-subgroup__body .sidebar-item{padding-left:36px;font-size:12px;}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;min-height:calc(100vh - 56px);}
|
||||
.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;}
|
||||
.stat-card__icon.blue{background:var(--primary-light);}
|
||||
.stat-card__icon.green{background:#F6FFED;}
|
||||
.stat-card__icon.orange{background:#FFF7E6;}
|
||||
.stat-card__icon.red{background:#FFF1F0;}
|
||||
.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);}
|
||||
.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;}
|
||||
.filter-input:focus{border-color:var(--primary);}
|
||||
.filter-select{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);color:var(--text-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='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;cursor:pointer;min-width:120px;}
|
||||
.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;}
|
||||
.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);}
|
||||
.tag-orange{background:#FFF7E6;color:var(--warning);}
|
||||
.tag-red{background:#FFF1F0;color:var(--danger);}
|
||||
.tag-gray{background:#F5F5F5;color:#999;}
|
||||
.link{color:var(--primary);cursor:pointer;font-size:var(--font-sm);text-decoration:none;}.link:hover{color:#40a9ff;}
|
||||
.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;}
|
||||
.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;}
|
||||
.action-bar{display:flex;align-items:center;gap:8px;margin-bottom:16px;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- 顶部导航栏 -->
|
||||
<header class="top-bar">
|
||||
<div class="top-bar__logo">
|
||||
<svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M7 14h14M14 7v14" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/></svg>
|
||||
营养管理
|
||||
</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="trace-query.html">溯源总览</a>
|
||||
<a href="arc-employee.html">档案</a>
|
||||
<a href="farm-land.html">绿色种采</a>
|
||||
<a href="sup-hygiene-check.html">卫生供应</a>
|
||||
<a href="prod-qc-daily.html">健康生产</a>
|
||||
<a href="din-dict-mgmt.html" class="active">营养用餐</a>
|
||||
<a href="ano-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<a href="../../index.html" class="btn-back">← 返回首页</a>
|
||||
<div class="avatar">管</div>
|
||||
<span>系统管理员 ▾</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- 侧边栏 -->
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">营养用餐</div>
|
||||
<a href="din-dict-mgmt.html" class="sidebar-item"><span class="mi">📖</span>字典管理</a>
|
||||
<a href="prod-qc-nutrition.html" class="sidebar-item"><span class="mi">🔬</span>营养检验</a>
|
||||
<a href="din-ingredient.html" class="sidebar-item"><span class="mi">🥦</span>食物成分</a>
|
||||
<a href="din-dish-all.html" class="sidebar-item"><span class="mi">🍽️</span>餐品总库</a>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 10 10" fill="none"><path d="M3 1l4 4-4 4" stroke-width="1.5"/></svg>
|
||||
📐 算法标准
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="din-algo-population.html" class="sidebar-item"><span class="mi">👥</span>人群基础标准</a>
|
||||
<a href="din-algo-vip.html" class="sidebar-item"><span class="mi">💎</span>VIP定制标准</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="din-recipe-mgmt.html" class="sidebar-item active"><span class="mi">📋</span>食谱管理</a>
|
||||
<a href="din-order-meal.html" class="sidebar-item"><span class="mi">🍱</span>营养点餐</a>
|
||||
<a href="din-user-mgmt.html" class="sidebar-item"><span class="mi">👤</span>用户管理</a>
|
||||
<a href="din-order-line.html" class="sidebar-item"><span class="mi">🍜</span>餐线管理</a>
|
||||
<a href="din-order-pickup.html" class="sidebar-item"><span class="mi">🎫</span>取餐管理</a>
|
||||
<a href="din-data-consume.html" class="sidebar-item"><span class="mi">💳</span>消费管理</a>
|
||||
<a href="din-data-nutri.html" class="sidebar-item"><span class="mi">📊</span>营养管理</a>
|
||||
<a href="din-data-benefit.html" class="sidebar-item"><span class="mi">📈</span>餐材效益</a>
|
||||
<a href="din-terminal.html" class="sidebar-item"><span class="mi">🖥️</span>终端管理</a>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 10 10" fill="none"><path d="M3 1l4 4-4 4" stroke-width="1.5"/></svg>
|
||||
🤖 模型管理
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="din-model-llm.html" class="sidebar-item"><span class="mi">🧠</span>大模型管理</a>
|
||||
<a href="din-model-small.html" class="sidebar-item"><span class="mi">⚙️</span>小模型管理</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="din-innovation.html" class="sidebar-item"><span class="mi">🌟</span>味养创新</a>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容 -->
|
||||
<main class="main">
|
||||
<!-- 筛选栏 -->
|
||||
<div class="filter-bar">
|
||||
<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></select></div>
|
||||
<div class="filter-item"><label>生效周期</label><input class="filter-input" type="date"></div>
|
||||
<div class="filter-item"><label>适用终端</label><select class="filter-select"><option>全部</option><option>食堂</option><option>小程序</option><option>食堂+小程序</option></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>
|
||||
</div>
|
||||
|
||||
<!-- 表格卡片 -->
|
||||
<div class="action-bar"><button class="btn btn-primary" onclick="openModal()">➕ 新建食谱</button> <button class="btn btn-default">📋 生成净菜订单</button> <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="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>RECIPE-015</td><td>第15周营养食谱</td><td>2026-04-14~20</td><td>一号食堂/二号食堂</td><td>食堂+小程序</td><td>42道</td><td><span class="tag tag-green">已发布</span></td><td><span class="tag tag-blue">已生成</span></td><td><span class="tag tag-green">合理</span></td><td>2026-04-13 18:30</td><td>营养师李明</td><td><span class="link">编辑</span> <span class="link">详情</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
<tr><td>RECIPE-014</td><td>第14周营养食谱</td><td>2026-04-07~13</td><td>一号食堂</td><td>食堂+小程序</td><td>38道</td><td><span class="tag tag-green">已发布</span></td><td><span class="tag tag-blue">已生成</span></td><td><span class="tag tag-orange">偏高</span></td><td>2026-04-06 18:10</td><td>营养师李明</td><td><span class="link">编辑</span> <span class="link">详情</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
<tr><td>RECIPE-016</td><td>第16周营养食谱</td><td>2026-04-21~27</td><td>一号食堂/三号食堂</td><td>食堂+小程序</td><td>40道</td><td><span class="tag tag-orange">待发布</span></td><td><span class="tag tag-orange">待生成</span></td><td><span class="tag tag-gray">待评估</span></td><td>—</td><td>营养师李明</td><td><span class="link">编辑</span> <span class="link">详情</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>显示 3 条，共 12 条</span>
|
||||
<button class="page-btn">‹</button>
|
||||
<button class="page-btn active">1</button>
|
||||
<button class="page-btn">2</button>
|
||||
<button class="page-btn">3</button>
|
||||
<button class="page-btn">4</button>
|
||||
<button class="page-btn">›</button>
|
||||
</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 full"><label>食谱名称<span class="required">*</span></label><input type="text" placeholder="请输入食谱名称，如：第16周营养食谱"></div>
|
||||
<div class="form-item"><label>生效周期开始</label><input type="date"></div>
|
||||
<div class="form-item"><label>生效周期结束</label><input type="date"></div>
|
||||
<div class="form-item"><label>适用食堂</label><input type="text" placeholder="如：一号食堂/二号食堂"></div>
|
||||
<div class="form-item"><label>适用终端</label><select><option>请选择</option><option>食堂</option><option>小程序</option><option>食堂+小程序</option></select></div>
|
||||
<div class="form-item"><label>发布状态</label><select><option>请选择</option><option>待发布</option><option>已发布</option><option>已停用</option></select></div>
|
||||
<div class="form-item"><label>成本评估结论</label><select><option>请选择</option><option>合理</option><option>偏高</option><option>超标</option><option>待评估</option></select></div>
|
||||
<div class="form-item full"><label>备注</label><textarea placeholder="请输入备注信息"></textarea></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="btn btn-default" onclick="closeModal()">取消</button>
|
||||
<button class="btn btn-primary">确定</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function openModal(){document.getElementById('modalOverlay').style.display='flex';}
|
||||
function closeModal(){document.getElementById('modalOverlay').style.display='none';}
|
||||
document.getElementById('modalOverlay').addEventListener('click',function(e){if(e.target===this)closeModal();});
|
||||
function toggleSubgroup(header){header.parentElement.classList.toggle('open');}
|
||||
(function(){var active=document.querySelector('.sidebar-item.active');if(!active)return;var sub=active.closest('.sidebar-subgroup');if(sub)sub.classList.add('open');})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,260 @@
|
||||
<!DOCTYPE html>
|
||||
<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;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#F5F7FA;color:#333;min-width:1280px;}
|
||||
:root{
|
||||
--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;
|
||||
--text-primary:#333;--text-secondary:#666;--text-placeholder:#999;--border:#E8E8E8;--background:#F5F7FA;
|
||||
--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--font-xxl:24px;
|
||||
--radius-sm:4px;--radius-md:8px;--radius-lg:12px;
|
||||
--shadow-sm:0 1px 4px rgba(0,0,0,0.08);--shadow-md:0 4px 12px rgba(0,0,0,0.12);
|
||||
}
|
||||
.top-bar{display:flex;align-items:center;height:56px;background:#001529;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;}
|
||||
.top-bar__logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:var(--font-lg);font-weight:600;white-space:nowrap;width:240px;flex-shrink:0;}
|
||||
.top-bar__logo svg{width:28px;height:28px;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.top-bar__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.top-bar__right .btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.top-bar__right .btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);cursor:pointer;}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;text-transform:uppercase;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.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;}
|
||||
${CSS_RULE}
|
||||
.sidebar-subgroup__header{display:flex;align-items:center;gap:6px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;user-select:none;}
|
||||
.sidebar-subgroup__header:hover{color:rgba(255,255,255,0.85);background:rgba(255,255,255,0.04);}
|
||||
.sidebar-subgroup__header .arrow{width:10px;height:10px;transition:transform .2s;flex-shrink:0;}
|
||||
.sidebar-subgroup__header .arrow path{stroke:rgba(255,255,255,0.45);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header{color:rgba(255,255,255,0.85);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header .arrow{transform:rotate(90deg);}
|
||||
.sidebar-subgroup__body{display:none;padding-left:16px;}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__body{display:block;}
|
||||
.sidebar-subgroup__body .sidebar-item{padding-left:36px;font-size:12px;}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;min-height:calc(100vh - 56px);}
|
||||
.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:200px;}
|
||||
.filter-input:focus{border-color:var(--primary);}
|
||||
.filter-select{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);color:var(--text-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='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;cursor:pointer;min-width:120px;}
|
||||
.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);}
|
||||
.btn-danger{background:#fff;color:var(--danger);border:1px solid var(--danger);}.btn-danger:hover{background:#fff1f0;}
|
||||
.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;}
|
||||
thead th:last-child,tbody td:last-child{position:sticky;right:0;box-shadow:-2px 0 4px rgba(0,0,0,0.06);z-index:1;}
|
||||
thead th:last-child{background:#FAFAFA;}
|
||||
tbody td:last-child{background:#fff;}
|
||||
tbody tr:hover td:last-child{background:#F8FBFF;}
|
||||
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);}
|
||||
.tag-orange{background:#FFF7E6;color:var(--warning);}
|
||||
.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;}
|
||||
.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;}
|
||||
.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;}
|
||||
.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;}
|
||||
.stat-card__icon.blue{background:var(--primary-light);}
|
||||
.stat-card__icon.green{background:#F6FFED;}
|
||||
.stat-card__icon.orange{background:#FFF7E6;}
|
||||
.stat-card__icon.red{background:#FFF1F0;}
|
||||
.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);}
|
||||
.action-bar{display:flex;align-items:center;gap:8px;margin-bottom:16px;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- 顶部导航 -->
|
||||
<header class="top-bar">
|
||||
<div class="top-bar__logo">
|
||||
<svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M7 14h14M14 7v14" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/></svg>
|
||||
营养管理
|
||||
</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="trace-query.html">溯源总览</a>
|
||||
<a href="arc-employee.html">档案</a>
|
||||
<a href="farm-land.html">绿色种采</a>
|
||||
<a href="sup-hygiene-check.html">卫生供应</a>
|
||||
<a href="prod-qc-daily.html">健康生产</a>
|
||||
<a href="din-dict-mgmt.html" class="active">营养用餐</a>
|
||||
<a href="ano-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<a href="../../index.html" class="btn-back">← 返回首页</a>
|
||||
<div class="avatar">管</div>
|
||||
<span>系统管理员 ▾</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- 侧边栏 -->
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">营养用餐</div>
|
||||
<a href="din-dict-mgmt.html" class="sidebar-item">字典管理</a>
|
||||
<a href="prod-qc-nutrition.html" class="sidebar-item">营养检验</a>
|
||||
<a href="din-ingredient.html" class="sidebar-item">食物成分</a>
|
||||
<a href="din-dish-all.html" class="sidebar-item">餐品总库</a>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 10 10" fill="none"><path d="M3 1l4 4-4 4" stroke-width="1.5"/></svg>
|
||||
算法标准
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="din-algo-population.html" class="sidebar-item">人群基础标准</a>
|
||||
<a href="din-algo-vip.html" class="sidebar-item">VIP定制标准</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="din-recipe-mgmt.html" class="sidebar-item">食谱管理</a>
|
||||
<a href="din-order-meal.html" class="sidebar-item">营养点餐</a>
|
||||
<a href="din-user-mgmt.html" class="sidebar-item">用户管理</a>
|
||||
<a href="din-order-line.html" class="sidebar-item">餐线管理</a>
|
||||
<a href="din-order-pickup.html" class="sidebar-item">取餐管理</a>
|
||||
<a href="din-data-consume.html" class="sidebar-item">消费管理</a>
|
||||
<a href="din-data-nutri.html" class="sidebar-item">营养管理</a>
|
||||
<a href="din-data-benefit.html" class="sidebar-item">餐材效益</a>
|
||||
<a href="din-terminal.html" class="sidebar-item active">终端管理</a>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 10 10" fill="none"><path d="M3 1l4 4-4 4" stroke-width="1.5"/></svg>
|
||||
模型管理
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="din-model-llm.html" class="sidebar-item">大模型管理</a>
|
||||
<a href="din-model-small.html" class="sidebar-item">小模型管理</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="din-innovation.html" class="sidebar-item">味养创新</a>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容区 -->
|
||||
<div class="main">
|
||||
<!-- 统计卡片 -->
|
||||
<div class="stats-row">
|
||||
<div class="stat-card"><div class="stat-card__icon blue">🖥️</div><div class="stat-card__info"><div class="stat-card__value">32</div><div class="stat-card__label">设备总数</div></div></div>
|
||||
<div class="stat-card"><div class="stat-card__icon green">🟢</div><div class="stat-card__info"><div class="stat-card__value">28</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">4</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">4,286次</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>智能取餐柜</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><option>D区</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><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>
|
||||
<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>SN序列号</th><th>设备名称</th><th>设备类型</th><th>厂家品牌</th><th>所在区域</th><th>地理位置</th><th>责任人</th><th>网络类型</th><th>IP地址/设备ID</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>DEV-001</td><td>SN-A001-2024</td><td>1号点餐屏</td><td>点餐屏</td><td>海康威视</td><td>A区</td><td>A区入口-东侧</td><td>张运维</td><td>WiFi</td><td>192.168.1.101</td><td>v3.2.1</td><td>2024-08-15</td><td><span class="tag tag-green">在线</span></td><td><span class="tag tag-green">98分</span></td><td>486</td><td>2026-04-22 11:30:22</td><td>615</td><td>362,400</td><td>2026-03-20</td><td>2</td><td><a class="link">故障记录</a> <a class="link">远程重启</a></td></tr>
|
||||
<tr><td>DEV-002</td><td>SN-A002-2024</td><td>智能取餐柜-01</td><td>智能取餐柜</td><td>海尔智家</td><td>A区</td><td>A区取餐区-1号位</td><td>李运维</td><td>有线</td><td>192.168.1.102</td><td>v2.8.0</td><td>2024-08-15</td><td><span class="tag tag-green">在线</span></td><td><span class="tag tag-green">100分</span></td><td>312</td><td>2026-04-22 11:30:18</td><td>615</td><td>498,720</td><td>2026-04-01</td><td>0</td><td><a class="link">故障记录</a> <a class="link">远程重启</a></td></tr>
|
||||
<tr><td>DEV-003</td><td>SN-B001-2024</td><td>2号点餐屏</td><td>点餐屏</td><td>海康威视</td><td>B区</td><td>B区入口-西侧</td><td>张运维</td><td>WiFi</td><td>192.168.1.103</td><td>v3.2.1</td><td>2024-10-01</td><td><span class="tag tag-green">在线</span></td><td><span class="tag tag-green">92分</span></td><td>398</td><td>2026-04-22 11:30:25</td><td>568</td><td>298,800</td><td>2026-04-10</td><td>1</td><td><a class="link">故障记录</a> <a class="link">远程重启</a></td></tr>
|
||||
<tr><td>DEV-004</td><td>SN-B002-2024</td><td>智能取餐柜-02</td><td>智能取餐柜</td><td>海尔智家</td><td>B区</td><td>B区取餐区-1号位</td><td>李运维</td><td>有线</td><td>192.168.1.104</td><td>v2.7.3</td><td>2024-10-01</td><td><span class="tag tag-red">离线</span></td><td><span class="tag tag-red">0分</span></td><td>0</td><td>2026-04-22 09:18:44</td><td>568</td><td>423,600</td><td>2026-04-15</td><td>3</td><td><a class="link">故障记录</a> <a class="link">远程重启</a></td></tr>
|
||||
<tr><td>DEV-005</td><td>SN-A003-2022</td><td>餐线秤台-00025</td><td>餐线秤台</td><td>大华技术</td><td>A区</td><td>A区餐线-1号位</td><td>王运维</td><td>有线</td><td>DEV-00025</td><td>v1.5.2</td><td>2022-06-10</td><td><span class="tag tag-green">在线</span></td><td><span class="tag tag-green">99分</span></td><td>1,280</td><td>2026-04-22 11:30:20</td><td>1,412</td><td>1,016,640</td><td>2026-03-01</td><td>0</td><td><a class="link">故障记录</a> <a class="link">远程重启</a></td></tr>
|
||||
<tr><td>DEV-006</td><td>SN-C001-2023</td><td>体脂秤-01</td><td>体脂秤</td><td>华为智选</td><td>C区</td><td>健身区入口-南侧</td><td>张运维</td><td>WiFi</td><td>192.168.1.106</td><td>v2.1.0</td><td>2023-12-01</td><td><span class="tag tag-orange">故障</span></td><td><span class="tag tag-red">45分</span></td><td>0</td><td>2026-04-22 10:55:08</td><td>873</td><td>78,540</td><td>2026-02-28</td><td>1</td><td><a class="link">故障记录</a> <a class="link">远程重启</a></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination"><span>显示 6 条，共 32 条</span><button class="page-btn">‹</button><button class="page-btn active">1</button><button class="page-btn">2</button><button class="page-btn">3</button><button class="page-btn">›</button></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 新增设备弹窗 -->
|
||||
<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><input type="text" placeholder="请输入设备名称"></div>
|
||||
<div class="form-item"><label>SN序列号<span class="required">*</span></label><input type="text" placeholder="请输入SN序列号"></div>
|
||||
<div class="form-item"><label>设备类型<span class="required">*</span></label><select><option>请选择</option><option>智能取餐柜</option><option>点餐屏</option><option>配比秤</option><option>餐线秤台</option><option>摄像头</option><option>智能电表</option><option>智能水表</option><option>智能气表</option><option>体脂秤</option></select></div>
|
||||
<div class="form-item"><label>厂家品牌<span class="required">*</span></label><input type="text" placeholder="请输入厂家品牌"></div>
|
||||
<div class="form-item"><label>所在区域<span class="required">*</span></label><select><option>请选择</option><option>A区</option><option>B区</option><option>C区</option><option>D区</option></select></div>
|
||||
<div class="form-item"><label>地理位置<span class="required">*</span></label><input type="text" placeholder="请输入地理位置"></div>
|
||||
<div class="form-item"><label>责任人<span class="required">*</span></label><input type="text" placeholder="请输入责任人"></div>
|
||||
<div class="form-item"><label>网络类型</label><select><option>请选择</option><option>有线</option><option>WiFi</option><option>4G</option><option>蓝牙</option></select></div>
|
||||
<div class="form-item"><label>IP地址/设备ID</label><input type="text" placeholder="请输入IP地址或设备ID"></div>
|
||||
<div class="form-item"><label>固件版本</label><input type="text" placeholder="请输入固件版本"></div>
|
||||
<div class="form-item"><label>安装日期</label><input type="date"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="btn btn-default" onclick="closeModal()">取消</button>
|
||||
<button class="btn btn-primary">确定</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function openModal(){document.getElementById('modalOverlay').style.display='flex';}
|
||||
function closeModal(){document.getElementById('modalOverlay').style.display='none';}
|
||||
document.getElementById('modalOverlay').addEventListener('click',function(e){if(e.target===this)closeModal();});
|
||||
function toggleSubgroup(header){header.parentElement.classList.toggle('open');}
|
||||
(function(){var active=document.querySelector('.sidebar-item.active');if(!active)return;var sub=active.closest('.sidebar-subgroup');if(sub)sub.classList.add('open');})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,172 @@
|
||||
<!DOCTYPE html>
|
||||
<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;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:rgba(0,0,0,0.45);margin:0;display:flex;align-items:center;justify-content:center;min-height:100vh;}
|
||||
:root{
|
||||
--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;
|
||||
--text-primary:#333;--text-secondary:#666;--text-placeholder:#999;--border:#E8E8E8;
|
||||
--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;
|
||||
--radius-sm:4px;--radius-md:8px;--radius-lg:12px;
|
||||
--shadow-md:0 4px 12px rgba(0,0,0,0.12);
|
||||
}
|
||||
/* 弹窗容器 */
|
||||
.dialog{background:#fff;border-radius:var(--radius-lg);width:680px;max-width:90vw;box-shadow:var(--shadow-md);}
|
||||
.dialog__header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px 16px;border-bottom:1px solid var(--border);}
|
||||
.dialog__title{font-size:var(--font-lg);font-weight:600;color:var(--text-primary);}
|
||||
.dialog__close{width:32px;height:32px;border:none;background:none;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);color:var(--text-placeholder);}
|
||||
.dialog__close:hover{background:#F5F5F5;color:var(--text-primary);}
|
||||
.dialog__body{padding:24px;max-height:70vh;overflow-y:auto;}
|
||||
/* 表单元素 */
|
||||
.form-group{margin-bottom:20px;}
|
||||
.form-group label{display:block;font-size:var(--font-sm);color:var(--text-primary);margin-bottom:8px;font-weight:500;}
|
||||
.form-group label .required{color:var(--danger);margin-left:2px;}
|
||||
.form-input{width:100%;height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);outline:none;}
|
||||
.form-input:focus{border-color:var(--primary);}
|
||||
.form-select{width:100%;height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);outline:none;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 12px center;}
|
||||
.form-textarea{width:100%;height:80px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:8px 12px;font-size:var(--font-sm);outline:none;resize:vertical;font-family:inherit;}
|
||||
.form-textarea:focus{border-color:var(--primary);}
|
||||
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
|
||||
.dialog__footer{display:flex;justify-content:flex-end;gap:8px;padding:16px 24px;border-top:1px solid var(--border);}
|
||||
.btn{height:36px;padding:0 20px;border-radius:var(--radius-sm);font-size:var(--font-sm);cursor:pointer;border:none;transition:all .2s;}
|
||||
.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);}
|
||||
/* Tab 切换 */
|
||||
.dialog-tabs{display:flex;gap:0;padding:0 24px;border-bottom:1px solid var(--border);}
|
||||
.dialog-tab{padding:12px 16px;font-size:var(--font-sm);cursor:pointer;color:var(--text-secondary);border-bottom:2px solid transparent;margin-bottom:-1px;transition:all .2s;}
|
||||
.dialog-tab:hover{color:var(--primary);}
|
||||
.dialog-tab.active{color:var(--primary);border-bottom-color:var(--primary);font-weight:500;}
|
||||
.dialog-panel{display:none;}
|
||||
.dialog-panel.active{display:block;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- 用户管理弹窗 -->
|
||||
<div class="dialog">
|
||||
<div class="dialog__header">
|
||||
<div class="dialog__title">用户管理</div>
|
||||
<button class="dialog__close" onclick="window.close()">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M1 1l12 12M13 1L1 13" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 弹窗内 Tab -->
|
||||
<div class="dialog-tabs">
|
||||
<div class="dialog-tab active" onclick="switchDialogTab(0)">开通会员</div>
|
||||
<div class="dialog-tab" onclick="switchDialogTab(1)">新增等级</div>
|
||||
</div>
|
||||
|
||||
<!-- Tab1: 开通会员 -->
|
||||
<div class="dialog-panel active">
|
||||
<div class="dialog__body">
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label>关联用户<span class="required">*</span></label>
|
||||
<select class="form-select">
|
||||
<option>请选择</option>
|
||||
<option>张伟</option>
|
||||
<option>李娜</option>
|
||||
<option>王磊</option>
|
||||
<option>赵敏</option>
|
||||
<option>陈刚</option>
|
||||
<option>刘芳</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>初始等级<span class="required">*</span></label>
|
||||
<select class="form-select">
|
||||
<option>请选择</option>
|
||||
<option>普通</option>
|
||||
<option>银卡</option>
|
||||
<option>金卡</option>
|
||||
<option>钻石</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label>有效期(年)<span class="required">*</span></label>
|
||||
<select class="form-select">
|
||||
<option>请选择</option>
|
||||
<option>1年</option>
|
||||
<option>2年</option>
|
||||
<option>3年</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>初始积分</label>
|
||||
<input class="form-input" type="number" placeholder="请输入初始积分">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>备注</label>
|
||||
<textarea class="form-textarea" placeholder="请输入备注信息"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dialog__footer">
|
||||
<button class="btn btn-default" onclick="window.close()">取消</button>
|
||||
<button class="btn btn-primary">确定</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tab2: 新增等级 -->
|
||||
<div class="dialog-panel">
|
||||
<div class="dialog__body">
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label>等级名称<span class="required">*</span></label>
|
||||
<input class="form-input" type="text" placeholder="请输入等级名称">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>升级条件（累计消费元）<span class="required">*</span></label>
|
||||
<input class="form-input" type="number" placeholder="请输入累计消费金额">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label>积分倍数</label>
|
||||
<input class="form-input" type="number" placeholder="如 1.5 表示每消费1元返1.5积分">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>点餐折扣</label>
|
||||
<input class="form-input" type="text" placeholder="如 9.5折">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label>取餐特权</label>
|
||||
<select class="form-select">
|
||||
<option>请选择</option>
|
||||
<option>常规</option>
|
||||
<option>优先取餐</option>
|
||||
<option>专属窗口</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group"></div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>专属权益</label>
|
||||
<textarea class="form-textarea" placeholder="请输入专属权益描述"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dialog__footer">
|
||||
<button class="btn btn-default" onclick="window.close()">取消</button>
|
||||
<button class="btn btn-primary">确定</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function switchDialogTab(idx){
|
||||
document.querySelectorAll('.dialog-tab').forEach(function(t,i){t.classList.toggle('active',i===idx);});
|
||||
document.querySelectorAll('.dialog-panel').forEach(function(p,i){p.classList.toggle('active',i===idx);});
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,364 @@
|
||||
<!DOCTYPE html>
|
||||
<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;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#F5F7FA;color:#333;min-width:1280px;}
|
||||
:root{
|
||||
--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;
|
||||
--text-primary:#333;--text-secondary:#666;--text-placeholder:#999;--border:#E8E8E8;--background:#F5F7FA;
|
||||
--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--font-xxl:24px;
|
||||
--radius-sm:4px;--radius-md:8px;--radius-lg:12px;
|
||||
--shadow-sm:0 1px 4px rgba(0,0,0,0.08);--shadow-md:0 4px 12px rgba(0,0,0,0.12);
|
||||
}
|
||||
|
||||
/* 通用布局 */
|
||||
.top-bar{display:flex;align-items:center;height:56px;background:#001529;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;}
|
||||
.top-bar__logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:var(--font-lg);font-weight:600;white-space:nowrap;width:240px;flex-shrink:0;}
|
||||
.top-bar__logo svg{width:28px;height:28px;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.top-bar__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.top-bar__right .btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.top-bar__right .btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);cursor:pointer;}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;text-transform:uppercase;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.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;}
|
||||
${CSS_RULE}
|
||||
.sidebar-subgroup__header{display:flex;align-items:center;gap:6px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;user-select:none;}
|
||||
.sidebar-subgroup__header:hover{color:rgba(255,255,255,0.85);background:rgba(255,255,255,0.04);}
|
||||
.sidebar-subgroup__header .arrow{width:10px;height:10px;transition:transform .2s;flex-shrink:0;}
|
||||
.sidebar-subgroup__header .arrow path{stroke:rgba(255,255,255,0.45);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header{color:rgba(255,255,255,0.85);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header .arrow{transform:rotate(90deg);}
|
||||
.sidebar-subgroup__body{display:none;padding-left:16px;}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__body{display:block;}
|
||||
.sidebar-subgroup__body .sidebar-item{padding-left:36px;font-size:12px;}
|
||||
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;min-height:calc(100vh - 56px);}
|
||||
.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;}
|
||||
.stat-card__icon.blue{background:var(--primary-light);}
|
||||
.stat-card__icon.green{background:#F6FFED;}
|
||||
.stat-card__icon.orange{background:#FFF7E6;}
|
||||
.stat-card__icon.red{background:#FFF1F0;}
|
||||
.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);}
|
||||
.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:200px;}
|
||||
.filter-input:focus{border-color:var(--primary);}
|
||||
.filter-select{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);color:var(--text-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='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;cursor:pointer;min-width:120px;}
|
||||
.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;}
|
||||
.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);}
|
||||
.tag-orange{background:#FFF7E6;color:var(--warning);}
|
||||
.tag-red{background:#FFF1F0;color:var(--danger);}
|
||||
.tag-gray{background:#F5F5F5;color:#999;}
|
||||
.tag-purple{background:#F9F0FF;color:#722ED1;}
|
||||
.link{color:var(--primary);cursor:pointer;font-size:var(--font-sm);}.link:hover{color:#40a9ff;}
|
||||
.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);}
|
||||
.action-bar{display:flex;align-items:center;gap:8px;margin-bottom:16px;}
|
||||
|
||||
/* Tab 切换 */
|
||||
.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;}
|
||||
|
||||
/* 空状态提示 */
|
||||
.empty-hint{padding:60px 24px;text-align:center;color:var(--text-placeholder);font-size:var(--font-base);background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- 顶部导航 -->
|
||||
<header class="top-bar">
|
||||
<div class="top-bar__logo">
|
||||
<svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M7 14h14M14 7v14" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/></svg>
|
||||
营养管理
|
||||
</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="trace-query.html">溯源总览</a>
|
||||
<a href="arc-employee.html">档案</a>
|
||||
<a href="farm-land.html">绿色种采</a>
|
||||
<a href="sup-hygiene-check.html">卫生供应</a>
|
||||
<a href="prod-qc-daily.html">健康生产</a>
|
||||
<a href="din-dict-mgmt.html" class="active">营养用餐</a>
|
||||
<a href="ano-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<a class="btn-back" href="../../index.html">← 返回首页</a>
|
||||
<div class="avatar">管</div>
|
||||
<span>系统管理员 ▾</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- 侧边栏 -->
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">营养用餐</div>
|
||||
<a href="din-dict-mgmt.html" class="sidebar-item"><span class="mi">📖</span>字典管理</a>
|
||||
<a href="prod-qc-nutrition.html" class="sidebar-item"><span class="mi">🔬</span>营养检验</a>
|
||||
<a href="din-ingredient.html" class="sidebar-item"><span class="mi">🥦</span>食物成分</a>
|
||||
<a href="din-dish-all.html" class="sidebar-item"><span class="mi">🍲</span>餐品总库</a>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 10 10" fill="none"><path d="M3 1l4 4-4 4" stroke-width="1.5"/></svg>
|
||||
📐 算法标准
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="din-algo-population.html" class="sidebar-item"><span class="mi">👥</span>人群基础标准</a>
|
||||
<a href="din-algo-vip.html" class="sidebar-item"><span class="mi">💎</span>VIP定制标准</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="din-recipe-mgmt.html" class="sidebar-item"><span class="mi">📋</span>食谱管理</a>
|
||||
<a href="din-order-meal.html" class="sidebar-item"><span class="mi">🛒</span>营养点餐</a>
|
||||
<a href="din-user-mgmt.html" class="sidebar-item active"><span class="mi">🧑</span>用户管理</a>
|
||||
<a href="din-order-line.html" class="sidebar-item"><span class="mi">⚖️</span>餐线管理</a>
|
||||
<a href="din-order-pickup.html" class="sidebar-item"><span class="mi">🍽️</span>取餐管理</a>
|
||||
<a href="din-data-consume.html" class="sidebar-item"><span class="mi">💰</span>消费管理</a>
|
||||
<a href="din-data-nutri.html" class="sidebar-item"><span class="mi">📊</span>营养管理</a>
|
||||
<a href="din-data-benefit.html" class="sidebar-item"><span class="mi">📈</span>餐材效益</a>
|
||||
<a href="din-terminal.html" class="sidebar-item"><span class="mi">🖥️</span>终端管理</a>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 10 10" fill="none"><path d="M3 1l4 4-4 4" stroke-width="1.5"/></svg>
|
||||
🤖 模型管理
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="din-model-llm.html" class="sidebar-item"><span class="mi">🧠</span>大模型管理</a>
|
||||
<a href="din-model-small.html" class="sidebar-item"><span class="mi">⚙️</span>小模型管理</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="din-innovation.html" class="sidebar-item"><span class="mi">🌟</span>味养创新</a>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容区 -->
|
||||
<div class="main">
|
||||
|
||||
<!-- 统计卡片 -->
|
||||
<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">1,280</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">486</div>
|
||||
<div class="stat-card__label">会员用户</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-card__icon green">🤖</div>
|
||||
<div class="stat-card__info">
|
||||
<div class="stat-card__value">1,042</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">12.6万</div>
|
||||
<div class="stat-card__label">本月积分发放</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 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>
|
||||
|
||||
<!-- Tab1: 个人用户 -->
|
||||
<div class="tab-panel active">
|
||||
<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>研发部</option><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><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><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">➕ 新增用户</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>BMI</th><th>活动水平</th><th>人员类别</th><th>饮食禁忌</th><th>状态</th><th>操作</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>张伟</td><td>研发部</td><td>38</td><td>22.9</td><td>中度活动</td><td><span class="tag tag-orange">会员</span></td><td>无</td><td><span class="tag tag-green">正常</span></td><td><a class="link">详情</a> <a class="link">推荐食谱</a></td></tr>
|
||||
<tr><td>李娜</td><td>市场部</td><td>34</td><td>19.8</td><td>轻度活动</td><td><span class="tag tag-orange">会员</span></td><td><span class="tag tag-red">高钠</span></td><td><span class="tag tag-green">正常</span></td><td><a class="link">详情</a> <a class="link">推荐食谱</a></td></tr>
|
||||
<tr><td>王磊</td><td>运营部</td><td>41</td><td>26.8</td><td>久坐</td><td><span class="tag tag-gray">非会员</span></td><td><span class="tag tag-red">高脂</span></td><td><span class="tag tag-orange">预警</span></td><td><a class="link">详情</a> <a class="link">推荐食谱</a></td></tr>
|
||||
<tr><td>赵敏</td><td>财务部</td><td>36</td><td>18.8</td><td>轻度活动</td><td><span class="tag tag-orange">会员</span></td><td><span class="tag tag-red">高糖</span></td><td><span class="tag tag-green">正常</span></td><td><a class="link">详情</a> <a class="link">推荐食谱</a></td></tr>
|
||||
<tr><td>陈刚</td><td>人事部</td><td>29</td><td>21.4</td><td>重度活动</td><td><span class="tag tag-gray">非会员</span></td><td>无</td><td><span class="tag tag-green">正常</span></td><td><a class="link">详情</a> <a class="link">推荐食谱</a></td></tr>
|
||||
<tr><td>刘芳</td><td>市场部</td><td>32</td><td>20.6</td><td>中度活动</td><td><span class="tag tag-orange">会员</span></td><td>无</td><td><span class="tag tag-green">正常</span></td><td><a class="link">详情</a> <a class="link">推荐食谱</a></td></tr>
|
||||
<tr><td>孙磊</td><td>行政部</td><td>45</td><td>24.3</td><td>久坐</td><td><span class="tag tag-gray">非会员</span></td><td><span class="tag tag-red">高钠</span></td><td><span class="tag tag-orange">预警</span></td><td><a class="link">详情</a> <a class="link">推荐食谱</a></td></tr>
|
||||
<tr><td>钱芳</td><td>销售部</td><td>27</td><td>17.9</td><td>轻度活动</td><td><span class="tag tag-orange">会员</span></td><td>无</td><td><span class="tag tag-green">正常</span></td><td><a class="link">详情</a> <a class="link">推荐食谱</a></td></tr>
|
||||
<tr><td>张运维</td><td>运维部</td><td>35</td><td>23.5</td><td>中度活动</td><td><span class="tag tag-blue">员工</span></td><td>无</td><td><span class="tag tag-green">正常</span></td><td><a class="link">详情</a> <a class="link">推荐食谱</a></td></tr>
|
||||
<tr><td>李后勤</td><td>后勤部</td><td>42</td><td>25.1</td><td>中度活动</td><td><span class="tag tag-blue">员工</span></td><td>无</td><td><span class="tag tag-green">正常</span></td><td><a class="link">详情</a> <a class="link">推荐食谱</a></td></tr>
|
||||
<tr><td>王保安</td><td>安保部</td><td>48</td><td>24.8</td><td>重度活动</td><td><span class="tag tag-blue">工作人员</span></td><td>无</td><td><span class="tag tag-green">正常</span></td><td><a class="link">详情</a> <a class="link">推荐食谱</a></td></tr>
|
||||
<tr><td>赵清洁</td><td>保洁部</td><td>50</td><td>22.0</td><td>重度活动</td><td><span class="tag tag-blue">工作人员</span></td><td>无</td><td><span class="tag tag-green">正常</span></td><td><a class="link">详情</a> <a class="link">推荐食谱</a></td></tr>
|
||||
<tr><td>林教授</td><td>外部访客</td><td>55</td><td>23.8</td><td>轻度活动</td><td><span class="tag tag-purple">外部人员</span></td><td>无</td><td><span class="tag tag-green">正常</span></td><td><a class="link">详情</a> <a class="link">推荐食谱</a></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>显示 13 条，共 1,280 条</span>
|
||||
<button class="page-btn">‹</button>
|
||||
<button class="page-btn active">1</button>
|
||||
<button class="page-btn">2</button>
|
||||
<button class="page-btn">3</button>
|
||||
<button class="page-btn">›</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tab2: 群体用户 -->
|
||||
<div class="tab-panel">
|
||||
<div class="empty-hint">群体用户管理功能正在规划中，敬请期待</div>
|
||||
</div>
|
||||
|
||||
<!-- Tab3: 会员账户 -->
|
||||
<div class="tab-panel">
|
||||
<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>普通</option><option>银卡</option><option>金卡</option><option>钻石</option></select></div>
|
||||
<div class="filter-item"><label>会员状态</label><select class="filter-select"><option>全部</option><option>正常</option><option>即将到期</option><option>休眠</option></select></div>
|
||||
<div class="filter-item"><label>部门</label><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>
|
||||
</div>
|
||||
<div class="action-bar">
|
||||
<a class="btn btn-primary" href="din-user-mgmt-dialog.html">➕ 开通会员</a>
|
||||
<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="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>MB-202401-001</td><td>张伟(EMP001)</td><td>研发部</td><td><span class="tag tag-red">钻石</span></td><td>8,628</td><td>12,860</td><td>¥1,286</td><td>2024-01-15</td><td>2027-01-14</td><td>2026-04-28 11:32</td><td><span class="tag tag-green">正常</span></td><td><a class="link">查看</a> <a class="link">编辑</a></td></tr>
|
||||
<tr><td>MB-202405-008</td><td>李娜(EMP002)</td><td>市场部</td><td><span class="tag tag-orange">金卡</span></td><td>3,286</td><td>4,820</td><td>¥682</td><td>2024-05-08</td><td>2027-05-07</td><td>2026-04-28 12:08</td><td><span class="tag tag-green">正常</span></td><td><a class="link">查看</a> <a class="link">编辑</a></td></tr>
|
||||
<tr><td>MB-202508-015</td><td>赵敏(EMP004)</td><td>财务部</td><td><span class="tag tag-blue">银卡</span></td><td>1,420</td><td>2,180</td><td>¥486</td><td>2025-08-12</td><td>2027-08-11</td><td>2026-04-28 11:30</td><td><span class="tag tag-green">正常</span></td><td><a class="link">查看</a> <a class="link">编辑</a></td></tr>
|
||||
<tr><td>MB-202510-026</td><td>刘芳(EMP006)</td><td>市场部</td><td><span class="tag tag-blue">银卡</span></td><td>986</td><td>1,520</td><td>¥320</td><td>2025-10-20</td><td>2027-10-19</td><td>2026-04-28 11:48</td><td><span class="tag tag-green">正常</span></td><td><a class="link">查看</a> <a class="link">编辑</a></td></tr>
|
||||
<tr><td>MB-202312-003</td><td>孙磊(EMP010)</td><td>研发部</td><td><span class="tag tag-orange">金卡</span></td><td>5,120</td><td>7,860</td><td>¥0</td><td>2023-12-08</td><td>2026-12-07</td><td>2026-04-15 12:20</td><td><span class="tag tag-orange">即将到期</span></td><td><a class="link">查看</a> <a class="link">编辑</a></td></tr>
|
||||
<tr><td>MB-202402-005</td><td>周明(EMP008)</td><td>运营部</td><td><span class="tag tag-red">钻石</span></td><td>12,486</td><td>16,820</td><td>¥0</td><td>2024-02-10</td><td>2027-02-09</td><td>2026-03-28 12:15</td><td><span class="tag tag-gray">休眠</span></td><td><a class="link">查看</a> <a class="link">编辑</a></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>显示 6 条，共 486 条</span>
|
||||
<button class="page-btn">‹</button>
|
||||
<button class="page-btn active">1</button>
|
||||
<button class="page-btn">2</button>
|
||||
<button class="page-btn">3</button>
|
||||
<button class="page-btn">›</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tab4: 等级配置 -->
|
||||
<div class="tab-panel">
|
||||
<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>启用</option><option>停用</option></select></div>
|
||||
<button class="btn btn-primary">查询</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
</div>
|
||||
<div class="action-bar">
|
||||
<a class="btn btn-primary" href="din-user-mgmt-dialog.html">➕ 新增等级</a>
|
||||
<button class="btn btn-default">✏️ 调整权益</button>
|
||||
</div>
|
||||
<div class="table-card">
|
||||
<div class="table-card__header">
|
||||
<div class="table-card__title">等级配置</div>
|
||||
</div>
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>等级编号</th><th>等级名称</th><th>升级条件（累计消费）</th><th>积分倍数</th><th>点餐折扣</th><th>取餐特权</th><th>专属权益</th><th>当前人数</th><th>状态</th><th>操作</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>LV-01</td><td><span class="tag tag-gray">普通会员</span></td><td>注册即可</td><td>1.0x</td><td>无折扣</td><td>常规</td><td>基础点餐功能</td><td>794</td><td><span class="tag tag-green">启用</span></td><td><a class="link">查看</a> <a class="link">编辑</a></td></tr>
|
||||
<tr><td>LV-02</td><td><span class="tag tag-blue">银卡会员</span></td><td>累计消费 ¥1,000+</td><td>1.2x</td><td>9.8折</td><td>常规</td><td>生日券 ¥10、月度营养报告</td><td>186</td><td><span class="tag tag-green">启用</span></td><td><a class="link">查看</a> <a class="link">编辑</a></td></tr>
|
||||
<tr><td>LV-03</td><td><span class="tag tag-orange">金卡会员</span></td><td>累计消费 ¥3,000+</td><td>1.5x</td><td>9.5折</td><td>优先取餐</td><td>生日券 ¥30、AI营养周报、专属客服</td><td>218</td><td><span class="tag tag-green">启用</span></td><td><a class="link">查看</a> <a class="link">编辑</a></td></tr>
|
||||
<tr><td>LV-04</td><td><span class="tag tag-red">钻石会员</span></td><td>累计消费 ¥10,000+</td><td>2.0x</td><td>9.0折</td><td>专属窗口</td><td>专属营养师、VIP定制菜单、季度体检券</td><td>82</td><td><span class="tag tag-green">启用</span></td><td><a class="link">查看</a> <a class="link">编辑</a></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>显示 4 条，共 4 条</span>
|
||||
<button class="page-btn active">1</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- 交互脚本 -->
|
||||
<script>
|
||||
function toggleSubgroup(header){header.parentElement.classList.toggle('open');}
|
||||
(function(){var active=document.querySelector('.sidebar-item.active');if(!active)return;var sub=active.closest('.sidebar-subgroup');if(sub)sub.classList.add('open');})();
|
||||
function switchTab(idx){
|
||||
document.querySelectorAll('.page-tab').forEach(function(t,i){t.classList.toggle('active',i===idx);});
|
||||
document.querySelectorAll('.tab-panel').forEach(function(p,i){p.classList.toggle('active',i===idx);});
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,383 @@
|
||||
<!DOCTYPE html>
|
||||
<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;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#F5F7FA;color:#333;min-width:1280px;}
|
||||
:root{
|
||||
--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;
|
||||
--text-primary:#333;--text-secondary:#666;--text-placeholder:#999;--border:#E8E8E8;--background:#F5F7FA;
|
||||
--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--font-xxl:24px;
|
||||
--radius-sm:4px;--radius-md:8px;--radius-lg:12px;
|
||||
--shadow-sm:0 1px 4px rgba(0,0,0,0.08);--shadow-md:0 4px 12px rgba(0,0,0,0.12);
|
||||
}
|
||||
|
||||
/* 通用布局 */
|
||||
.top-bar{display:flex;align-items:center;height:56px;background:#001529;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;}
|
||||
.top-bar__logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:var(--font-lg);font-weight:600;white-space:nowrap;width:240px;flex-shrink:0;}
|
||||
.top-bar__logo svg{width:28px;height:28px;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.top-bar__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.top-bar__right .btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.top-bar__right .btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);cursor:pointer;}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;text-transform:uppercase;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.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;}
|
||||
/* 二级菜单分组 */
|
||||
.sidebar-subgroup__header{display:flex;align-items:center;gap:6px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;user-select:none;}
|
||||
.sidebar-subgroup__header:hover{color:rgba(255,255,255,0.85);background:rgba(255,255,255,0.04);}
|
||||
.sidebar-subgroup__header .arrow{width:10px;height:10px;transition:transform .2s;flex-shrink:0;}
|
||||
.sidebar-subgroup__header .arrow path{stroke:rgba(255,255,255,0.45);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header{color:rgba(255,255,255,0.85);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header .arrow{transform:rotate(90deg);}
|
||||
.sidebar-subgroup__body{display:none;background:rgba(0,0,0,0.2);}
|
||||
.sidebar-subgroup.open .sidebar-subgroup__body{display:block;}
|
||||
.sidebar-subgroup__body .sidebar-item{padding-left:44px;}
|
||||
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;min-height:calc(100vh - 56px);}
|
||||
.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:200px;}
|
||||
.filter-input:focus{border-color:var(--primary);}
|
||||
.filter-select{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);color:var(--text-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='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;cursor:pointer;min-width:120px;}
|
||||
.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);}
|
||||
.btn-danger{background:#fff;color:var(--danger);border:1px solid var(--danger);}.btn-danger:hover{background:#fff1f0;}
|
||||
.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;}
|
||||
.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);}
|
||||
.tag-orange{background:#FFF7E6;color:var(--warning);}
|
||||
.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;}
|
||||
.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);}
|
||||
|
||||
/* 统计卡片 */
|
||||
.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;}
|
||||
.stat-card__icon.blue{background:var(--primary-light);}
|
||||
.stat-card__icon.green{background:#F6FFED;}
|
||||
.stat-card__icon.orange{background:#FFF7E6;}
|
||||
.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);}
|
||||
|
||||
/* 操作栏 */
|
||||
.action-bar{display:flex;align-items:center;gap:8px;margin-bottom:16px;}
|
||||
/* 模态弹窗 */
|
||||
.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;}
|
||||
.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>
|
||||
|
||||
<!-- 顶部导航 -->
|
||||
<header class="top-bar">
|
||||
<div class="top-bar__logo">
|
||||
<svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M7 14h14M14 7v14" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/></svg>
|
||||
营养管理
|
||||
</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="trace-query.html">溯源总览</a>
|
||||
<a href="arc-employee.html">档案</a>
|
||||
<a href="farm-land.html" class="active">绿色种采</a>
|
||||
<a href="sup-hygiene-check.html">卫生供应</a>
|
||||
<a href="prod-qc-daily.html">健康生产</a>
|
||||
<a href="din-dict-mgmt.html">营养用餐</a>
|
||||
<a href="ano-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<a class="btn-back" href="../../index.html">← 返回首页</a>
|
||||
<div class="avatar">管</div>
|
||||
<span>系统管理员 ▾</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- 侧边栏 -->
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">绿色种采</div>
|
||||
<a href="farm-land.html" class="sidebar-item"><span class="mi">🗺️</span>土地环境</a>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 10 10" fill="none"><path d="M3 1l4 4-4 4" stroke-width="1.5"/></svg>
|
||||
📡 种养监控
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="farm-monitor-crop.html" class="sidebar-item"><span class="mi">🌱</span>作物种植监控</a>
|
||||
<a href="farm-monitor-livestock.html" class="sidebar-item"><span class="mi">🐄</span>畜禽养殖监控</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="farm-harvest.html" class="sidebar-item active"><span class="mi">🌾</span>收成入库</a>
|
||||
<a href="farm-supplier.html" class="sidebar-item"><span class="mi">🏭</span>供商管理</a>
|
||||
<a href="farm-purchase.html" class="sidebar-item"><span class="mi">🛒</span>采供管理</a>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容区 -->
|
||||
<div class="main">
|
||||
|
||||
<!-- 统计卡片 -->
|
||||
<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">186</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">12,480</div>
|
||||
<div class="stat-card__label">总数量(kg)</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-card__icon green">🥇</div>
|
||||
<div class="stat-card__info">
|
||||
<div class="stat-card__value">9,860kg</div>
|
||||
<div class="stat-card__label">A级数量</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-card__icon orange">🥈</div>
|
||||
<div class="stat-card__info">
|
||||
<div class="stat-card__value">2,620kg</div>
|
||||
<div class="stat-card__label">B/C级数量</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>
|
||||
<input class="filter-input" type="date">
|
||||
</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-primary"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 10v2h10v-2M7 2v7M4.5 6.5L7 9l2.5-2.5" stroke="#fff" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>导出列表数据</button>
|
||||
<button class="btn btn-default"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><rect x="2" y="2" width="10" height="10" rx="1.5" stroke="currentColor" stroke-width="1.4"/><path d="M4 5h6M4 7.5h4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>查看导出任务</button>
|
||||
<button class="btn btn-default">📹 视频监控</button>
|
||||
</div>
|
||||
|
||||
<!-- 数据表格 -->
|
||||
<div class="table-card">
|
||||
<div class="table-card__header">
|
||||
<div class="table-card__title">收成入库</div>
|
||||
</div>
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>溯源码</th>
|
||||
<th>食材名称</th>
|
||||
<th>品种</th>
|
||||
<th>产地/地块</th>
|
||||
<th>采收/出栏日期</th>
|
||||
<th>入库数量(kg)</th>
|
||||
<th>品质等级</th>
|
||||
<th>入库日期</th>
|
||||
<th>经办人员</th>
|
||||
<th>检测报告编号</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>ST-FH-FA01-VG-BOCA-286K-20260415-001</td>
|
||||
<td>菠菜</td>
|
||||
<td>尖叶菠菜</td>
|
||||
<td>A区蔬菜基地</td>
|
||||
<td>2026-04-15</td>
|
||||
<td>286</td>
|
||||
<td><span class="tag tag-green">A级</span></td>
|
||||
<td>2026-04-15</td>
|
||||
<td>李采收</td>
|
||||
<td>RPT-20260415-001</td>
|
||||
<td><a class="link" onclick="openModal()">查看详情</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>ST-FH-FB01-VG-HLUB-420K-20260415-002</td>
|
||||
<td>胡萝卜</td>
|
||||
<td>红芯胡萝卜</td>
|
||||
<td>B区根茎基地</td>
|
||||
<td>2026-04-15</td>
|
||||
<td>420</td>
|
||||
<td><span class="tag tag-green">A级</span></td>
|
||||
<td>2026-04-15</td>
|
||||
<td>王采收</td>
|
||||
<td>RPT-20260415-002</td>
|
||||
<td><a class="link" onclick="openModal()">查看详情</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>ST-FH-FC01-VG-XGUO-068K-20260414-003</td>
|
||||
<td>香菇</td>
|
||||
<td>808香菇</td>
|
||||
<td>C区菌菇大棚</td>
|
||||
<td>2026-04-14</td>
|
||||
<td>68</td>
|
||||
<td><span class="tag tag-orange">B级</span></td>
|
||||
<td>2026-04-14</td>
|
||||
<td>李采收</td>
|
||||
<td>RPT-20260414-003</td>
|
||||
<td><a class="link" onclick="openModal()">查看详情</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>ST-FH-FD01-VG-SJJD-156K-20260414-004</td>
|
||||
<td>四季豆</td>
|
||||
<td>架豆王</td>
|
||||
<td>D区豆类基地</td>
|
||||
<td>2026-04-14</td>
|
||||
<td>156</td>
|
||||
<td><span class="tag tag-green">A级</span></td>
|
||||
<td>2026-04-14</td>
|
||||
<td>张采收</td>
|
||||
<td>RPT-20260414-004</td>
|
||||
<td><a class="link" onclick="openModal()">查看详情</a></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<!-- 分页 -->
|
||||
<div class="pagination">
|
||||
<span>显示 4 条，共 186 条</span>
|
||||
<button class="page-btn">‹</button>
|
||||
<button class="page-btn active">1</button>
|
||||
<button class="page-btn">2</button>
|
||||
<button class="page-btn">3</button>
|
||||
<button class="page-btn">...</button>
|
||||
<button class="page-btn">47</button>
|
||||
<button class="page-btn">›</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- 新增收成入库批次弹窗 -->
|
||||
<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>
|
||||
<input type="text" placeholder="请输入食材名称">
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<label>品种<span class="required">*</span></label>
|
||||
<input type="text" placeholder="请输入品种">
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<label>来源地块/养殖区</label>
|
||||
<select><option>请选择</option><option>A区蔬菜基地</option><option>B区根茎基地</option><option>C区菌菇大棚</option><option>D区豆类基地</option><option>A1-猪舍</option><option>B3-鸡舍</option></select>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<label>采收/出栏日期<span class="required">*</span></label>
|
||||
<input type="date">
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<label>入库数量(kg)<span class="required">*</span></label>
|
||||
<input type="number" placeholder="请输入入库数量">
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<label>品质等级</label>
|
||||
<select><option>请选择</option><option>A级</option><option>B级</option><option>C级</option></select>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<label>检测报告编号</label>
|
||||
<input type="text" placeholder="请输入检测报告编号">
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<label>经办人员<span class="required">*</span></label>
|
||||
<input type="text" placeholder="请输入经办人员">
|
||||
</div>
|
||||
<div class="form-item full">
|
||||
<label>备注</label>
|
||||
<textarea placeholder="请输入备注信息"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="btn btn-default" onclick="closeModal()">取消</button>
|
||||
<button class="btn btn-primary">确定</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 侧边栏交互脚本 -->
|
||||
<script>
|
||||
// 模态弹窗控制
|
||||
function openModal(){document.getElementById('modalOverlay').style.display='flex';}
|
||||
function closeModal(){document.getElementById('modalOverlay').style.display='none';}
|
||||
document.getElementById('modalOverlay').addEventListener('click',function(e){if(e.target===this)closeModal();});
|
||||
// 切换二级菜单分组的展开/收起
|
||||
function toggleSubgroup(header){header.parentElement.classList.toggle('open');}
|
||||
// 初始化：若激活项位于子分组内，则自动展开
|
||||
(function(){var active=document.querySelector('.sidebar-item.active');if(!active)return;var sub=active.closest('.sidebar-subgroup');if(sub)sub.classList.add('open');})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,311 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>营养管理 - 土地环境 | 健康长庆原型</title>
|
||||
<style>
|
||||
*{box-sizing:border-box;margin:0;padding:0;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#F5F7FA;color:#333;min-width:1280px;}
|
||||
:root{
|
||||
--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;
|
||||
--text-primary:#333;--text-secondary:#666;--text-placeholder:#999;--border:#E8E8E8;--background:#F5F7FA;
|
||||
--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--font-xxl:24px;
|
||||
--radius-sm:4px;--radius-md:8px;--radius-lg:12px;
|
||||
--shadow-sm:0 1px 4px rgba(0,0,0,0.08);--shadow-md:0 4px 12px rgba(0,0,0,0.12);
|
||||
}
|
||||
.top-bar{display:flex;align-items:center;height:56px;background:#001529;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;}
|
||||
.top-bar__logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:var(--font-lg);font-weight:600;white-space:nowrap;width:240px;flex-shrink:0;}
|
||||
.top-bar__logo svg{width:28px;height:28px;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.top-bar__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.top-bar__right .btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.top-bar__right .btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);cursor:pointer;}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;text-transform:uppercase;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.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;}
|
||||
.sidebar-subgroup__header{display:flex;align-items:center;gap:6px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;user-select:none;}
|
||||
.sidebar-subgroup__header:hover{color:rgba(255,255,255,0.85);background:rgba(255,255,255,0.04);}
|
||||
.sidebar-subgroup__header .arrow{width:10px;height:10px;transition:transform .2s;flex-shrink:0;}
|
||||
.sidebar-subgroup__header .arrow path{stroke:rgba(255,255,255,0.45);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header{color:rgba(255,255,255,0.85);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header .arrow{transform:rotate(90deg);}
|
||||
.sidebar-subgroup__body{display:none;padding-left:16px;}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__body{display:block;}
|
||||
.sidebar-subgroup__body .sidebar-item{padding-left:36px;font-size:12px;}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;min-height:calc(100vh - 56px);}
|
||||
.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;}
|
||||
.stat-card__icon.blue{background:var(--primary-light);}
|
||||
.stat-card__icon.green{background:#F6FFED;}
|
||||
.stat-card__icon.orange{background:#FFF7E6;}
|
||||
.stat-card__icon.red{background:#FFF1F0;}
|
||||
.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-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;}
|
||||
.filter-input:focus{border-color:var(--primary);}
|
||||
.filter-select{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);color:var(--text-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='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;cursor:pointer;min-width:120px;}
|
||||
.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);}
|
||||
.tag-orange{background:#FFF7E6;color:var(--warning);}
|
||||
.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;}
|
||||
.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);}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- 顶部导航栏 -->
|
||||
<header class="top-bar">
|
||||
<div class="top-bar__logo">
|
||||
<svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M7 14h14M14 7v14" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/></svg>
|
||||
营养管理
|
||||
</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="trace-query.html">溯源总览</a>
|
||||
<a href="arc-employee.html">档案</a>
|
||||
<a href="farm-land.html" class="active">绿色种采</a>
|
||||
<a href="sup-hygiene-check.html">卫生供应</a>
|
||||
<a href="prod-qc-daily.html">健康生产</a>
|
||||
<a href="din-dict-mgmt.html">营养用餐</a>
|
||||
<a href="ano-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<a href="../../index.html" class="btn-back">← 返回首页</a>
|
||||
<div class="avatar">管</div>
|
||||
<span>系统管理员 ▾</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- 侧边栏：绿色种采 -->
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">绿色种采</div>
|
||||
<a href="farm-land.html" class="sidebar-item active"><span class="mi">🗺️</span>土地环境</a>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 10 10" fill="none"><path d="M3 1l4 4-4 4" stroke-width="1.5"/></svg>
|
||||
📡 种养监控
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="farm-monitor-crop.html" class="sidebar-item"><span class="mi">🌱</span>作物种植监控</a>
|
||||
<a href="farm-monitor-livestock.html" class="sidebar-item"><span class="mi">🐄</span>畜禽养殖监控</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="farm-harvest.html" class="sidebar-item"><span class="mi">🌾</span>收成入库</a>
|
||||
<a href="farm-supplier.html" class="sidebar-item"><span class="mi">🏭</span>供商管理</a>
|
||||
<a href="farm-purchase.html" class="sidebar-item"><span class="mi">🛒</span>采供管理</a>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容 -->
|
||||
<main class="main">
|
||||
<!-- 统计卡片 -->
|
||||
<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">24</div><div class="stat-card__label">种植地块数</div></div>
|
||||
</div>
|
||||
<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 orange">⚠️</div>
|
||||
<div class="stat-card__info"><div class="stat-card__value">2 块</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>
|
||||
|
||||
<!-- Tab 切换栏 -->
|
||||
<div class="page-tabs">
|
||||
<div class="page-tab active" onclick="switchTab(0)">🌱 种植环境</div>
|
||||
<div class="page-tab" onclick="switchTab(1)">🐄 养殖环境</div>
|
||||
</div>
|
||||
|
||||
<!-- Tab1: 种植环境 -->
|
||||
<div class="tab-panel active">
|
||||
<!-- 筛选栏 -->
|
||||
<div class="filter-bar">
|
||||
<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><option>四季豆</option></select>
|
||||
</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></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>当前湿度(%RH)</th><th>土壤pH值</th>
|
||||
<th>土壤氮(mg/kg)</th><th>土壤磷(mg/kg)</th><th>土壤钾(mg/kg)</th>
|
||||
<th>农药残留指数</th><th>灌溉水质等级</th><th>最近采集时间</th><th>预警状态</th><th>操作</th>
|
||||
</tr></thead>
|
||||
<tbody>
|
||||
<tr><td>LAND-001</td><td>A区蔬菜基地</td><td>12.5</td><td>菠菜/白菜</td><td><span class="tag tag-green">种植中</span></td>
|
||||
<td>17.2</td><td>72</td><td>6.8</td><td>142</td><td>38</td><td>186</td><td>0.02</td>
|
||||
<td><span class="tag tag-green">优</span></td><td>2026-04-22 10:05</td><td><span class="tag tag-green">正常</span></td><td><span class="link">查看详情</span></td></tr>
|
||||
<tr><td>LAND-002</td><td>B区根茎基地</td><td>8.0</td><td>胡萝卜</td><td><span class="tag tag-green">种植中</span></td>
|
||||
<td>18.4</td><td>65</td><td>7.1</td><td>128</td><td>42</td><td>210</td><td>0.01</td>
|
||||
<td><span class="tag tag-blue">良</span></td><td>2026-04-22 10:05</td><td><span class="tag tag-green">正常</span></td><td><span class="link">查看详情</span></td></tr>
|
||||
<tr><td>LAND-003</td><td>C区菌菇大棚</td><td>3.2</td><td>香菇</td><td><span class="tag tag-green">种植中</span></td>
|
||||
<td>22.1</td><td>85</td><td>6.5</td><td>168</td><td>52</td><td>224</td><td>0.00</td>
|
||||
<td><span class="tag tag-green">优</span></td><td>2026-04-22 10:04</td><td><span class="tag tag-orange">湿度偏高</span></td><td><span class="link">查看详情</span></td></tr>
|
||||
<tr><td>LAND-004</td><td>D区豆类基地</td><td>6.8</td><td>四季豆</td><td><span class="tag tag-gray">休耕中</span></td>
|
||||
<td>16.8</td><td>58</td><td>6.9</td><td>96</td><td>28</td><td>158</td><td>0.03</td>
|
||||
<td><span class="tag tag-blue">良</span></td><td>2026-04-22 10:05</td><td><span class="tag tag-green">正常</span></td><td><span class="link">查看详情</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>显示 4 条，共 24 条</span>
|
||||
<button class="page-btn">‹</button>
|
||||
<button class="page-btn active">1</button>
|
||||
<button class="page-btn">2</button>
|
||||
<button class="page-btn">3</button>
|
||||
<button class="page-btn">4</button>
|
||||
<button class="page-btn">5</button>
|
||||
<button class="page-btn">6</button>
|
||||
<button class="page-btn">›</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tab2: 养殖环境 -->
|
||||
<div class="tab-panel">
|
||||
<!-- 筛选栏 -->
|
||||
<div class="filter-bar">
|
||||
<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>养殖中</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">➕ 新增养殖区</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>当前湿度(%RH)</th>
|
||||
<th>氨气浓度(ppm)</th><th>CO₂浓度(ppm)</th><th>光照强度(lux)</th>
|
||||
<th>通风状态</th><th>饮水水质</th><th>粪污处理状态</th><th>最近采集时间</th><th>预警状态</th><th>操作</th>
|
||||
</tr></thead>
|
||||
<tbody>
|
||||
<tr><td>BREED-A1</td><td>A1-猪舍</td><td>1,200</td><td>猪（杜洛克）</td><td><span class="tag tag-gray">圈养</span></td><td><span class="tag tag-green">养殖中</span></td>
|
||||
<td>312</td><td>22.4</td><td>68</td><td>8.2</td><td>1,240</td><td>180</td>
|
||||
<td><span class="tag tag-green">正常</span></td><td><span class="tag tag-green">优</span></td><td><span class="tag tag-green">正常</span></td>
|
||||
<td>2026-04-22 10:05</td><td><span class="tag tag-green">正常</span></td><td><span class="link">查看详情</span></td></tr>
|
||||
<tr><td>BREED-B3</td><td>B3-鸡舍</td><td>860</td><td>鸡（黄羽鸡）</td><td><span class="tag tag-green">散养</span></td><td><span class="tag tag-green">养殖中</span></td>
|
||||
<td>1,176</td><td>24.6</td><td>62</td><td>12.5</td><td>1,580</td><td>320</td>
|
||||
<td><span class="tag tag-green">正常</span></td><td><span class="tag tag-blue">良</span></td><td><span class="tag tag-green">正常</span></td>
|
||||
<td>2026-04-22 10:05</td><td><span class="tag tag-green">正常</span></td><td><span class="link">查看详情</span></td></tr>
|
||||
<tr><td>BREED-C2</td><td>C2-鸭舍</td><td>640</td><td>鸭（麻鸭）</td><td><span class="tag tag-green">散养</span></td><td><span class="tag tag-green">养殖中</span></td>
|
||||
<td>665</td><td>23.8</td><td>70</td><td>18.6</td><td>1,820</td><td>210</td>
|
||||
<td><span class="tag tag-orange">告警</span></td><td><span class="tag tag-blue">良</span></td><td><span class="tag tag-red">异常</span></td>
|
||||
<td>2026-04-22 10:04</td><td><span class="tag tag-orange">氨气偏高</span></td><td><span class="link">查看详情</span></td></tr>
|
||||
<tr><td>BREED-D1</td><td>D1-羊舍</td><td>480</td><td>羊（湖羊）</td><td><span class="tag tag-gray">圈养</span></td><td><span class="tag tag-gray">空置</span></td>
|
||||
<td>0</td><td>20.2</td><td>55</td><td>6.4</td><td>860</td><td>150</td>
|
||||
<td><span class="tag tag-green">正常</span></td><td><span class="tag tag-green">优</span></td><td><span class="tag tag-green">正常</span></td>
|
||||
<td>2026-04-22 10:05</td><td><span class="tag tag-green">正常</span></td><td><span class="link">查看详情</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>显示 4 条，共 8 条</span>
|
||||
<button class="page-btn">‹</button>
|
||||
<button class="page-btn active">1</button>
|
||||
<button class="page-btn">2</button>
|
||||
<button class="page-btn">›</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<script>
|
||||
// Tab 切换
|
||||
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 toggleSubgroup(header){header.parentElement.classList.toggle('open');}
|
||||
// 默认展开包含 active 项的子组
|
||||
(function(){var active=document.querySelector('.sidebar-item.active');if(!active)return;var sub=active.closest('.sidebar-subgroup');if(sub)sub.classList.add('open');})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,401 @@
|
||||
<!DOCTYPE html>
|
||||
<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;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#F5F7FA;color:#333;min-width:1280px;}
|
||||
:root{
|
||||
--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;
|
||||
--text-primary:#333;--text-secondary:#666;--text-placeholder:#999;--border:#E8E8E8;--background:#F5F7FA;
|
||||
--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--font-xxl:24px;
|
||||
--radius-sm:4px;--radius-md:8px;--radius-lg:12px;
|
||||
--shadow-sm:0 1px 4px rgba(0,0,0,0.08);--shadow-md:0 4px 12px rgba(0,0,0,0.12);
|
||||
}
|
||||
|
||||
/* 通用布局 */
|
||||
.top-bar{display:flex;align-items:center;height:56px;background:#001529;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;}
|
||||
.top-bar__logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:var(--font-lg);font-weight:600;white-space:nowrap;width:240px;flex-shrink:0;}
|
||||
.top-bar__logo svg{width:28px;height:28px;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.top-bar__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.top-bar__right .btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.top-bar__right .btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);cursor:pointer;}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;text-transform:uppercase;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.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;}
|
||||
/* 侧边栏子分组 */
|
||||
.sidebar-subgroup__header{display:flex;align-items:center;gap:6px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;user-select:none;}
|
||||
.sidebar-subgroup__header:hover{color:rgba(255,255,255,0.85);background:rgba(255,255,255,0.04);}
|
||||
.sidebar-subgroup__header .arrow{width:10px;height:10px;transition:transform .2s;flex-shrink:0;}
|
||||
.sidebar-subgroup__header .arrow path{stroke:rgba(255,255,255,0.45);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header{color:rgba(255,255,255,0.85);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header .arrow{transform:rotate(90deg);}
|
||||
.sidebar-subgroup__body{display:none;padding-left:16px;}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__body{display:block;}
|
||||
.sidebar-subgroup__body .sidebar-item{padding-left:36px;font-size:12px;}
|
||||
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;min-height:calc(100vh - 56px);}
|
||||
.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:200px;}
|
||||
.filter-input:focus{border-color:var(--primary);}
|
||||
.filter-select{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);color:var(--text-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='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;cursor:pointer;min-width:120px;}
|
||||
.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);}
|
||||
.btn-danger{background:#fff;color:var(--danger);border:1px solid var(--danger);}.btn-danger:hover{background:#fff1f0;}
|
||||
.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;}
|
||||
.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);}
|
||||
.tag-orange{background:#FFF7E6;color:var(--warning);}
|
||||
.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;}
|
||||
.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);}
|
||||
|
||||
/* 统计卡片 */
|
||||
.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;}
|
||||
.stat-card__icon.blue{background:var(--primary-light);}
|
||||
.stat-card__icon.green{background:#F6FFED;}
|
||||
.stat-card__icon.orange{background:#FFF7E6;}
|
||||
.stat-card__icon.red{background:#FFF1F0;}
|
||||
.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);}
|
||||
|
||||
/* 操作栏 */
|
||||
.action-bar{display:flex;align-items:center;gap:8px;margin-bottom:16px;}
|
||||
/* 模态弹窗 */
|
||||
.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;}
|
||||
.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>
|
||||
|
||||
<!-- 顶部导航 -->
|
||||
<header class="top-bar">
|
||||
<div class="top-bar__logo">
|
||||
<svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M7 14h14M14 7v14" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/></svg>
|
||||
营养管理
|
||||
</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="trace-query.html">溯源总览</a>
|
||||
<a href="arc-employee.html">档案</a>
|
||||
<a href="farm-land.html" class="active">绿色种采</a>
|
||||
<a href="sup-hygiene-check.html">卫生供应</a>
|
||||
<a href="prod-qc-daily.html">健康生产</a>
|
||||
<a href="din-dict-mgmt.html">营养用餐</a>
|
||||
<a href="ano-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<a class="btn-back" href="../../index.html">← 返回首页</a>
|
||||
<div class="avatar">管</div>
|
||||
<span>系统管理员 ▾</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- 侧边栏 -->
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">绿色种采</div>
|
||||
<a href="farm-land.html" class="sidebar-item"><span class="mi">🗺️</span>土地环境</a>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 10 10" fill="none"><path d="M3 1l4 4-4 4" stroke-width="1.5"/></svg>
|
||||
📡 种养监控
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="farm-monitor-crop.html" class="sidebar-item active"><span class="mi">🌱</span>作物种植监控</a>
|
||||
<a href="farm-monitor-livestock.html" class="sidebar-item"><span class="mi">🐄</span>畜禽养殖监控</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="farm-harvest.html" class="sidebar-item"><span class="mi">🌾</span>收成入库</a>
|
||||
<a href="farm-supplier.html" class="sidebar-item"><span class="mi">🏭</span>供商管理</a>
|
||||
<a href="farm-purchase.html" class="sidebar-item"><span class="mi">🛒</span>采供管理</a>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容区 -->
|
||||
<div class="main">
|
||||
|
||||
<!-- 统计卡片 -->
|
||||
<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">21</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">2</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="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>菠菜</option>
|
||||
<option>胡萝卜</option>
|
||||
<option>香菇</option>
|
||||
<option>四季豆</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>生长状态</label>
|
||||
<select class="filter-select">
|
||||
<option>全部</option>
|
||||
<option>正常</option>
|
||||
<option>虫害预警</option>
|
||||
<option>生长异常</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>巡检日期</label>
|
||||
<input class="filter-input" type="date">
|
||||
</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-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>CROP-202604-001</td>
|
||||
<td>A区蔬菜基地</td>
|
||||
<td>菠菜</td>
|
||||
<td>尖叶菠菜</td>
|
||||
<td>2026-03-20</td>
|
||||
<td>生长期</td>
|
||||
<td><span class="tag tag-green">正常</span></td>
|
||||
<td>无</td>
|
||||
<td>—</td>
|
||||
<td>2026-04-24</td>
|
||||
<td>李巡检</td>
|
||||
<td><a class="link" onclick="openModal()">查看详情</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>CROP-202604-002</td>
|
||||
<td>B区根茎基地</td>
|
||||
<td>胡萝卜</td>
|
||||
<td>红芯胡萝卜</td>
|
||||
<td>2026-03-01</td>
|
||||
<td>成熟期</td>
|
||||
<td><span class="tag tag-green">正常</span></td>
|
||||
<td>无</td>
|
||||
<td>—</td>
|
||||
<td>2026-04-28</td>
|
||||
<td>王巡检</td>
|
||||
<td><a class="link" onclick="openModal()">查看详情</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>CROP-202604-003</td>
|
||||
<td>C区菌菇大棚</td>
|
||||
<td>香菇</td>
|
||||
<td>808香菇</td>
|
||||
<td>2026-04-01</td>
|
||||
<td>幼苗期</td>
|
||||
<td><span class="tag tag-orange">虫害预警</span></td>
|
||||
<td><span class="tag tag-orange">有：蚜虫</span></td>
|
||||
<td>2026-04-21 喷施苦参碱，待复查</td>
|
||||
<td>待定</td>
|
||||
<td>李巡检</td>
|
||||
<td><a class="link" onclick="openModal()">查看详情</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>CROP-202604-004</td>
|
||||
<td>D区豆类基地</td>
|
||||
<td>四季豆</td>
|
||||
<td>架豆王</td>
|
||||
<td>2026-03-15</td>
|
||||
<td>生长期</td>
|
||||
<td><span class="tag tag-green">正常</span></td>
|
||||
<td>无</td>
|
||||
<td>—</td>
|
||||
<td>2026-04-26</td>
|
||||
<td>张巡检</td>
|
||||
<td><a class="link" onclick="openModal()">查看详情</a></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<!-- 分页 -->
|
||||
<div class="pagination">
|
||||
<span>显示 4 条，共 24 条</span>
|
||||
<button class="page-btn">‹</button>
|
||||
<button class="page-btn active">1</button>
|
||||
<button class="page-btn">2</button>
|
||||
<button class="page-btn">3</button>
|
||||
<button class="page-btn">›</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- 新增巡检记录弹窗 -->
|
||||
<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区蔬菜基地</option><option>B区根茎基地</option><option>C区菌菇大棚</option><option>D区豆类基地</option></select>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<label>作物名称<span class="required">*</span></label>
|
||||
<input type="text" placeholder="请输入作物名称">
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<label>品种<span class="required">*</span></label>
|
||||
<input type="text" placeholder="请输入品种">
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<label>播种日期<span class="required">*</span></label>
|
||||
<input type="date">
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<label>当前生长周期</label>
|
||||
<select><option>请选择</option><option>幼苗期</option><option>生长期</option><option>成熟期</option></select>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<label>生长状态<span class="required">*</span></label>
|
||||
<select><option>请选择</option><option>正常</option><option>异常</option></select>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<label>虫害预警</label>
|
||||
<select><option>请选择</option><option>无</option><option>有</option></select>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<label>预计收获日期</label>
|
||||
<input type="date">
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<label>巡检人<span class="required">*</span></label>
|
||||
<input type="text" placeholder="请输入巡检人">
|
||||
</div>
|
||||
<div class="form-item"></div>
|
||||
<div class="form-item full">
|
||||
<label>病虫害处理记录</label>
|
||||
<textarea placeholder="请输入病虫害处理记录"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="btn btn-default" onclick="closeModal()">取消</button>
|
||||
<button class="btn btn-primary">确定</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 侧边栏交互脚本 -->
|
||||
<script>
|
||||
// 模态弹窗控制
|
||||
function openModal(){document.getElementById('modalOverlay').style.display='flex';}
|
||||
function closeModal(){document.getElementById('modalOverlay').style.display='none';}
|
||||
document.getElementById('modalOverlay').addEventListener('click',function(e){if(e.target===this)closeModal();});
|
||||
// 折叠/展开子分组
|
||||
function toggleSubgroup(header){header.parentElement.classList.toggle('open');}
|
||||
// 初始化：若当前激活项在子分组内，展开其父分组
|
||||
(function(){var active=document.querySelector('.sidebar-item.active');if(!active)return;var sub=active.closest('.sidebar-subgroup');if(sub)sub.classList.add('open');})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,414 @@
|
||||
<!DOCTYPE html>
|
||||
<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;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#F5F7FA;color:#333;min-width:1280px;}
|
||||
:root{
|
||||
--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;
|
||||
--text-primary:#333;--text-secondary:#666;--text-placeholder:#999;--border:#E8E8E8;--background:#F5F7FA;
|
||||
--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--font-xxl:24px;
|
||||
--radius-sm:4px;--radius-md:8px;--radius-lg:12px;
|
||||
--shadow-sm:0 1px 4px rgba(0,0,0,0.08);--shadow-md:0 4px 12px rgba(0,0,0,0.12);
|
||||
}
|
||||
|
||||
/* 通用布局 */
|
||||
.top-bar{display:flex;align-items:center;height:56px;background:#001529;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;}
|
||||
.top-bar__logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:var(--font-lg);font-weight:600;white-space:nowrap;width:240px;flex-shrink:0;}
|
||||
.top-bar__logo svg{width:28px;height:28px;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.top-bar__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.top-bar__right .btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.top-bar__right .btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);cursor:pointer;}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;text-transform:uppercase;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.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;}
|
||||
/* 侧边栏子分组（可折叠） */
|
||||
.sidebar-subgroup__header{display:flex;align-items:center;gap:6px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;user-select:none;}
|
||||
.sidebar-subgroup__header:hover{color:rgba(255,255,255,0.85);background:rgba(255,255,255,0.04);}
|
||||
.sidebar-subgroup__header .arrow{width:10px;height:10px;transition:transform .2s;flex-shrink:0;}
|
||||
.sidebar-subgroup__header .arrow path{stroke:rgba(255,255,255,0.45);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header{color:rgba(255,255,255,0.85);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header .arrow{transform:rotate(90deg);}
|
||||
.sidebar-subgroup__body{display:none;background:rgba(0,0,0,0.2);}
|
||||
.sidebar-subgroup.open .sidebar-subgroup__body{display:block;}
|
||||
.sidebar-subgroup__body .sidebar-item{padding-left:48px;}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;min-height:calc(100vh - 56px);}
|
||||
.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:200px;}
|
||||
.filter-input:focus{border-color:var(--primary);}
|
||||
.filter-select{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);color:var(--text-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='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;cursor:pointer;min-width:120px;}
|
||||
.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);}
|
||||
.btn-danger{background:#fff;color:var(--danger);border:1px solid var(--danger);}.btn-danger:hover{background:#fff1f0;}
|
||||
.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;}
|
||||
.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);}
|
||||
.tag-orange{background:#FFF7E6;color:var(--warning);}
|
||||
.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;}
|
||||
.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);}
|
||||
|
||||
/* 统计卡片 */
|
||||
.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;}
|
||||
.stat-card__icon.blue{background:var(--primary-light);}
|
||||
.stat-card__icon.green{background:#F6FFED;}
|
||||
.stat-card__icon.orange{background:#FFF7E6;}
|
||||
.stat-card__icon.red{background:#FFF1F0;}
|
||||
.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);}
|
||||
|
||||
/* 操作栏 */
|
||||
.action-bar{display:flex;align-items:center;gap:8px;margin-bottom:16px;}
|
||||
/* 模态弹窗 */
|
||||
.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;}
|
||||
.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>
|
||||
|
||||
<!-- 顶部导航 -->
|
||||
<header class="top-bar">
|
||||
<div class="top-bar__logo">
|
||||
<svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M7 14h14M14 7v14" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/></svg>
|
||||
营养管理
|
||||
</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="trace-query.html">溯源总览</a>
|
||||
<a href="arc-employee.html">档案</a>
|
||||
<a href="farm-land.html" class="active">绿色种采</a>
|
||||
<a href="sup-hygiene-check.html">卫生供应</a>
|
||||
<a href="prod-qc-daily.html">健康生产</a>
|
||||
<a href="din-dict-mgmt.html">营养用餐</a>
|
||||
<a href="ano-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<a class="btn-back" href="../../index.html">← 返回首页</a>
|
||||
<div class="avatar">管</div>
|
||||
<span>系统管理员 ▾</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- 侧边栏 -->
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">绿色种采</div>
|
||||
<a href="farm-land.html" class="sidebar-item"><span class="mi">🗺️</span>土地环境</a>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 10 10" fill="none"><path d="M3 1l4 4-4 4" stroke-width="1.5"/></svg>
|
||||
📡 种养监控
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="farm-monitor-crop.html" class="sidebar-item"><span class="mi">🌱</span>作物种植监控</a>
|
||||
<a href="farm-monitor-livestock.html" class="sidebar-item active"><span class="mi">🐄</span>畜禽养殖监控</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="farm-harvest.html" class="sidebar-item"><span class="mi">🌾</span>收成入库</a>
|
||||
<a href="farm-supplier.html" class="sidebar-item"><span class="mi">🏭</span>供商管理</a>
|
||||
<a href="farm-purchase.html" class="sidebar-item"><span class="mi">🛒</span>采供管理</a>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容区 -->
|
||||
<div class="main">
|
||||
|
||||
<!-- 统计卡片 -->
|
||||
<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">12</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">4,860头/只</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">8批次</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="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>猪</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>
|
||||
<div class="filter-item">
|
||||
<label>养殖区</label>
|
||||
<select class="filter-select">
|
||||
<option>全部</option>
|
||||
<option>A1-猪舍</option>
|
||||
<option>B3-鸡舍</option>
|
||||
<option>C2-鸭舍</option>
|
||||
<option>D1-羊舍</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>
|
||||
<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>平均体重(kg)</th>
|
||||
<th>长势评级</th>
|
||||
<th>健康状态</th>
|
||||
<th>预计出栏日期</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>ST-FH-FL01-MT-DLLZ-320H-20260401-001</td>
|
||||
<td>猪</td>
|
||||
<td>杜洛克</td>
|
||||
<td>A1-猪舍</td>
|
||||
<td>320</td>
|
||||
<td>2026-04-01</td>
|
||||
<td>312</td>
|
||||
<td>72.6</td>
|
||||
<td><span class="tag tag-green">优</span></td>
|
||||
<td><span class="tag tag-green">正常</span></td>
|
||||
<td>2026-05-20</td>
|
||||
<td><a class="link" onclick="openModal()">查看详情</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>ST-FH-FL02-MT-HWJJ-1200-20260315-001</td>
|
||||
<td>鸡</td>
|
||||
<td>黄羽鸡</td>
|
||||
<td>B3-鸡舍</td>
|
||||
<td>1,200</td>
|
||||
<td>2026-03-15</td>
|
||||
<td>1,176</td>
|
||||
<td>1.8</td>
|
||||
<td><span class="tag tag-blue">良</span></td>
|
||||
<td><span class="tag tag-green">正常</span></td>
|
||||
<td>2026-05-05</td>
|
||||
<td><a class="link" onclick="openModal()">查看详情</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>ST-FH-FL03-MT-MAYU-680H-20260320-001</td>
|
||||
<td>鸭</td>
|
||||
<td>麻鸭</td>
|
||||
<td>C2-鸭舍</td>
|
||||
<td>680</td>
|
||||
<td>2026-03-20</td>
|
||||
<td>665</td>
|
||||
<td>2.2</td>
|
||||
<td><span class="tag tag-blue">良</span></td>
|
||||
<td><span class="tag tag-orange">轻微异常</span></td>
|
||||
<td>2026-05-12</td>
|
||||
<td><a class="link" onclick="openModal()">查看详情</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>ST-FH-FL04-MT-HUYA-180H-20260405-001</td>
|
||||
<td>羊</td>
|
||||
<td>湖羊</td>
|
||||
<td>D1-羊舍</td>
|
||||
<td>180</td>
|
||||
<td>2026-04-05</td>
|
||||
<td>176</td>
|
||||
<td>34.5</td>
|
||||
<td><span class="tag tag-green">优</span></td>
|
||||
<td><span class="tag tag-green">正常</span></td>
|
||||
<td>2026-06-01</td>
|
||||
<td><a class="link" onclick="openModal()">查看详情</a></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<!-- 分页 -->
|
||||
<div class="pagination">
|
||||
<span>显示 4 条，共 12 条</span>
|
||||
<button class="page-btn">‹</button>
|
||||
<button class="page-btn active">1</button>
|
||||
<button class="page-btn">2</button>
|
||||
<button class="page-btn">3</button>
|
||||
<button class="page-btn">›</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- 新增畜禽养殖批次弹窗 -->
|
||||
<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>猪</option><option>鸡</option><option>鸭</option><option>牛</option><option>羊</option></select>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<label>品种<span class="required">*</span></label>
|
||||
<input type="text" placeholder="请输入品种">
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<label>养殖区/舍编号<span class="required">*</span></label>
|
||||
<input type="text" placeholder="请输入养殖区/舍编号">
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<label>入栏数量(头/只)<span class="required">*</span></label>
|
||||
<input type="number" placeholder="请输入入栏数量">
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<label>入栏日期<span class="required">*</span></label>
|
||||
<input type="date">
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<label>饲料名称<span class="required">*</span></label>
|
||||
<input type="text" placeholder="请输入饲料名称">
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<label>饲料来源/供应商</label>
|
||||
<input type="text" placeholder="请输入饲料来源/供应商">
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<label>本次投喂量(kg)</label>
|
||||
<input type="number" placeholder="请输入投喂量">
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<label>药物/疫苗名称</label>
|
||||
<input type="text" placeholder="请输入药物/疫苗名称">
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<label>用药原因</label>
|
||||
<select><option>请选择</option><option>预防接种</option><option>疾病治疗</option></select>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<label>停药期(天)</label>
|
||||
<input type="number" placeholder="请输入停药期天数">
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<label>预计出栏日期</label>
|
||||
<input type="date">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="btn btn-default" onclick="closeModal()">取消</button>
|
||||
<button class="btn btn-primary">确定</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 侧边栏交互脚本 -->
|
||||
<script>
|
||||
// 模态弹窗控制
|
||||
function openModal(){document.getElementById('modalOverlay').style.display='flex';}
|
||||
function closeModal(){document.getElementById('modalOverlay').style.display='none';}
|
||||
document.getElementById('modalOverlay').addEventListener('click',function(e){if(e.target===this)closeModal();});
|
||||
// 切换子分组展开/收起状态
|
||||
function toggleSubgroup(header){header.parentElement.classList.toggle('open');}
|
||||
// 初始化：若 active 项在子分组内，则默认展开该分组
|
||||
(function(){var active=document.querySelector('.sidebar-item.active');if(!active)return;var sub=active.closest('.sidebar-subgroup');if(sub)sub.classList.add('open');})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,263 @@
|
||||
<!DOCTYPE html>
|
||||
<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;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#F5F7FA;color:#333;min-width:1280px;}
|
||||
:root{
|
||||
--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;
|
||||
--text-primary:#333;--text-secondary:#666;--text-placeholder:#999;--border:#E8E8E8;--background:#F5F7FA;
|
||||
--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--font-xxl:24px;
|
||||
--radius-sm:4px;--radius-md:8px;--radius-lg:12px;
|
||||
--shadow-sm:0 1px 4px rgba(0,0,0,0.08);--shadow-md:0 4px 12px rgba(0,0,0,0.12);
|
||||
}
|
||||
/* 通用布局 */
|
||||
.top-bar{display:flex;align-items:center;height:56px;background:#001529;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;}
|
||||
.top-bar__logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:var(--font-lg);font-weight:600;white-space:nowrap;width:240px;flex-shrink:0;}
|
||||
.top-bar__logo svg{width:28px;height:28px;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.top-bar__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.top-bar__right .btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.top-bar__right .btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);cursor:pointer;}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;text-transform:uppercase;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.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;}
|
||||
/* 侧边栏子组 */
|
||||
.sidebar-subgroup__header{display:flex;align-items:center;gap:6px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;user-select:none;}
|
||||
.sidebar-subgroup__header:hover{color:rgba(255,255,255,0.85);background:rgba(255,255,255,0.04);}
|
||||
.sidebar-subgroup__header .arrow{width:10px;height:10px;transition:transform .2s;flex-shrink:0;}
|
||||
.sidebar-subgroup__header .arrow path{stroke:rgba(255,255,255,0.45);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header{color:rgba(255,255,255,0.85);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header .arrow{transform:rotate(90deg);}
|
||||
.sidebar-subgroup__body{display:none;padding-left:16px;}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__body{display:block;}
|
||||
.sidebar-subgroup__body .sidebar-item{padding-left:36px;font-size:12px;}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;min-height:calc(100vh - 56px);}
|
||||
.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:200px;}
|
||||
.filter-input:focus{border-color:var(--primary);}
|
||||
.filter-select{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);color:var(--text-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='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;cursor:pointer;min-width:120px;}
|
||||
.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);}
|
||||
.btn-danger{background:#fff;color:var(--danger);border:1px solid var(--danger);}.btn-danger:hover{background:#fff1f0;}
|
||||
.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;}
|
||||
.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);}
|
||||
.tag-orange{background:#FFF7E6;color:var(--warning);}
|
||||
.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;}
|
||||
.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);}
|
||||
/* 统计卡片 */
|
||||
.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;}
|
||||
.stat-card__icon.blue{background:var(--primary-light);}
|
||||
.stat-card__icon.green{background:#F6FFED;}
|
||||
.stat-card__icon.orange{background:#FFF7E6;}
|
||||
.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);}
|
||||
/* 操作栏 */
|
||||
.action-bar{display:flex;align-items:center;gap:8px;margin-bottom:16px;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- 顶部导航 -->
|
||||
<header class="top-bar">
|
||||
<div class="top-bar__logo">
|
||||
<svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M7 14h14M14 7v14" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/></svg>
|
||||
营养管理
|
||||
</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="trace-query.html">溯源总览</a>
|
||||
<a href="arc-employee.html">档案</a>
|
||||
<a href="farm-land.html" class="active">绿色种采</a>
|
||||
<a href="sup-hygiene-check.html">卫生供应</a>
|
||||
<a href="prod-qc-daily.html">健康生产</a>
|
||||
<a href="din-dict-mgmt.html">营养用餐</a>
|
||||
<a href="ano-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<a class="btn-back" href="../../index.html">← 返回首页</a>
|
||||
<div class="avatar">管</div>
|
||||
<span>系统管理员 ▾</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- 侧边栏 -->
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">绿色种采</div>
|
||||
<a href="farm-land.html" class="sidebar-item"><span class="mi">🗺️</span>土地环境</a>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 10 10" fill="none"><path d="M3 1l4 4-4 4" stroke-width="1.5"/></svg>
|
||||
📡 种养监控
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="farm-monitor-crop.html" class="sidebar-item"><span class="mi">🌱</span>作物种植监控</a>
|
||||
<a href="farm-monitor-livestock.html" class="sidebar-item"><span class="mi">🐄</span>畜禽养殖监控</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="farm-harvest.html" class="sidebar-item"><span class="mi">🌾</span>收成入库</a>
|
||||
<a href="farm-supplier.html" class="sidebar-item"><span class="mi">🏭</span>供商管理</a>
|
||||
<a href="farm-purchase.html" class="sidebar-item active"><span class="mi">🛒</span>采供管理</a>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容区 -->
|
||||
<div class="main">
|
||||
|
||||
<!-- 统计卡片 -->
|
||||
<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">286</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">¥48.6万</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">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">42</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>绿源蔬菜配送</option><option>鲜肉直供公司</option><option>海鲜水产配送</option><option>粮油批发商行</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>订单状态</label>
|
||||
<select class="filter-select">
|
||||
<option>全部</option><option>进行中</option><option>已完成</option><option>待处理</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>来源</label>
|
||||
<select class="filter-select">
|
||||
<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>
|
||||
<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>
|
||||
<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>采购数量(kg)</th><th>单价(元/kg)</th><th>小计金额</th>
|
||||
<th>下单日期</th><th>预计到货</th><th>订单状态</th><th>收货状态</th><th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>PO-20260415-001</td><td>ST-EX-LY01-VG-BOCA-050K-20260415-002</td><td><span class="tag tag-blue">食谱搭配</span></td><td>绿源蔬菜配送</td><td>菠菜</td><td>蔬菜类</td><td>50</td><td>¥2.5</td><td>¥125</td><td>2026-04-15</td><td>2026-04-16</td><td><span class="tag tag-blue">进行中</span></td><td><span class="tag tag-orange">待收货</span></td><td><a class="link">查看详情</a></td></tr>
|
||||
<tr><td>PO-20260415-001</td><td>ST-EX-LY01-VG-BCAI-080K-20260415-003</td><td><span class="tag tag-blue">食谱搭配</span></td><td>绿源蔬菜配送</td><td>白菜</td><td>蔬菜类</td><td>80</td><td>¥1.8</td><td>¥144</td><td>2026-04-15</td><td>2026-04-16</td><td><span class="tag tag-blue">进行中</span></td><td><span class="tag tag-orange">待收货</span></td><td><a class="link">查看详情</a></td></tr>
|
||||
<tr><td>PO-20260415-001</td><td>ST-EX-LY01-VG-HLUB-120K-20260415-004</td><td><span class="tag tag-blue">食谱搭配</span></td><td>绿源蔬菜配送</td><td>胡萝卜</td><td>蔬菜类</td><td>120</td><td>¥1.8</td><td>¥216</td><td>2026-04-15</td><td>2026-04-16</td><td><span class="tag tag-blue">进行中</span></td><td><span class="tag tag-orange">待收货</span></td><td><a class="link">查看详情</a></td></tr>
|
||||
<tr><td>PO-20260415-002</td><td>ST-EX-XR01-MT-ZLRJ-080K-20260415-005</td><td><span class="tag tag-blue">食谱搭配</span></td><td>鲜肉直供公司</td><td>猪里脊</td><td>肉禽类</td><td>80</td><td>¥28</td><td>¥2,240</td><td>2026-04-15</td><td>2026-04-16</td><td><span class="tag tag-blue">进行中</span></td><td><span class="tag tag-orange">待收货</span></td><td><a class="link">查看详情</a></td></tr>
|
||||
<tr><td>PO-20260415-002</td><td>ST-EX-XR01-MT-ZWUA-240K-20260415-006</td><td><span class="tag tag-blue">食谱搭配</span></td><td>鲜肉直供公司</td><td>猪五花</td><td>肉禽类</td><td>240</td><td>¥26</td><td>¥6,240</td><td>2026-04-15</td><td>2026-04-16</td><td><span class="tag tag-blue">进行中</span></td><td><span class="tag tag-orange">待收货</span></td><td><a class="link">查看详情</a></td></tr>
|
||||
<tr><td>PO-20260414-003</td><td>ST-EX-HS01-SF-CAYO-060K-20260414-001</td><td><span class="tag tag-gray">手动创建</span></td><td>海鲜水产配送</td><td>草鱼</td><td>水产类</td><td>60</td><td>¥18</td><td>¥1,080</td><td>2026-04-14</td><td>2026-04-15</td><td><span class="tag tag-green">已完成</span></td><td><span class="tag tag-green">已收货</span></td><td><a class="link">查看详情</a></td></tr>
|
||||
<tr><td>PO-20260414-003</td><td>ST-EX-HS01-SF-JIYU-080K-20260414-002</td><td><span class="tag tag-gray">手动创建</span></td><td>海鲜水产配送</td><td>鲫鱼</td><td>水产类</td><td>80</td><td>¥16</td><td>¥1,280</td><td>2026-04-14</td><td>2026-04-15</td><td><span class="tag tag-green">已完成</span></td><td><span class="tag tag-green">已收货</span></td><td><a class="link">查看详情</a></td></tr>
|
||||
<tr><td>PO-20260414-003</td><td>ST-EX-HS01-SF-XIAA-050K-20260414-003</td><td><span class="tag tag-gray">手动创建</span></td><td>海鲜水产配送</td><td>虾</td><td>水产类</td><td>50</td><td>¥30</td><td>¥1,500</td><td>2026-04-14</td><td>2026-04-15</td><td><span class="tag tag-green">已完成</span></td><td><span class="tag tag-green">已收货</span></td><td><a class="link">查看详情</a></td></tr>
|
||||
<tr><td>PO-20260413-004</td><td>ST-EX-LY02-DG-DAMI-1000-20260413-001</td><td><span class="tag tag-gray">手动创建</span></td><td>粮油批发商行</td><td>大米</td><td>粮油类</td><td>1000</td><td>¥3.5</td><td>¥3,500</td><td>2026-04-13</td><td>2026-04-14</td><td><span class="tag tag-green">已完成</span></td><td><span class="tag tag-green">已收货</span></td><td><a class="link">查看详情</a></td></tr>
|
||||
<tr><td>PO-20260413-004</td><td>ST-EX-LY02-DG-HSYO-168K-20260413-002</td><td><span class="tag tag-gray">手动创建</span></td><td>粮油批发商行</td><td>花生油</td><td>粮油类</td><td>168</td><td>¥16</td><td>¥2,688</td><td>2026-04-13</td><td>2026-04-14</td><td><span class="tag tag-green">已完成</span></td><td><span class="tag tag-green">已收货</span></td><td><a class="link">查看详情</a></td></tr>
|
||||
<tr><td>PO-20260416-005</td><td>ST-EX-LY01-VG-XLHU-080K-20260416-001</td><td><span class="tag tag-blue">食谱搭配</span></td><td>绿源蔬菜配送</td><td>西兰花</td><td>蔬菜类</td><td>80</td><td>¥4.5</td><td>¥360</td><td>2026-04-16</td><td>2026-04-17</td><td><span class="tag tag-orange">待处理</span></td><td><span class="tag tag-gray">—</span></td><td><a class="link">查看详情</a></td></tr>
|
||||
<tr><td>PO-20260416-005</td><td>ST-EX-LY01-VG-QCAI-120K-20260416-002</td><td><span class="tag tag-blue">食谱搭配</span></td><td>绿源蔬菜配送</td><td>芹菜</td><td>蔬菜类</td><td>120</td><td>¥2.5</td><td>¥300</td><td>2026-04-16</td><td>2026-04-17</td><td><span class="tag tag-orange">待处理</span></td><td><span class="tag tag-gray">—</span></td><td><a class="link">查看详情</a></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>显示 12 条，共 286 条</span>
|
||||
<button class="page-btn">‹</button>
|
||||
<button class="page-btn active">1</button>
|
||||
<button class="page-btn">2</button>
|
||||
<button class="page-btn">3</button>
|
||||
<button class="page-btn">...</button>
|
||||
<button class="page-btn">24</button>
|
||||
<button class="page-btn">›</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// 侧边栏子组折叠
|
||||
function toggleSubgroup(header){header.parentElement.classList.toggle('open');}
|
||||
// 初始化：若当前激活项位于子组中，自动展开其所在子组
|
||||
(function(){var active=document.querySelector('.sidebar-item.active');if(!active)return;var sub=active.closest('.sidebar-subgroup');if(sub)sub.classList.add('open');})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,322 @@
|
||||
<!DOCTYPE html>
|
||||
<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;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#F5F7FA;color:#333;min-width:1280px;}
|
||||
:root{
|
||||
--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;
|
||||
--text-primary:#333;--text-secondary:#666;--text-placeholder:#999;--border:#E8E8E8;--background:#F5F7FA;
|
||||
--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--font-xxl:24px;
|
||||
--radius-sm:4px;--radius-md:8px;--radius-lg:12px;
|
||||
--shadow-sm:0 1px 4px rgba(0,0,0,0.08);--shadow-md:0 4px 12px rgba(0,0,0,0.12);
|
||||
}
|
||||
/* 通用布局 */
|
||||
.top-bar{display:flex;align-items:center;height:56px;background:#001529;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;}
|
||||
.top-bar__logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:var(--font-lg);font-weight:600;white-space:nowrap;width:240px;flex-shrink:0;}
|
||||
.top-bar__logo svg{width:28px;height:28px;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.top-bar__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.top-bar__right .btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.top-bar__right .btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);cursor:pointer;}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;text-transform:uppercase;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.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;}
|
||||
/* 侧边栏子组 */
|
||||
.sidebar-subgroup__header{display:flex;align-items:center;gap:6px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;user-select:none;}
|
||||
.sidebar-subgroup__header:hover{color:rgba(255,255,255,0.85);background:rgba(255,255,255,0.04);}
|
||||
.sidebar-subgroup__header .arrow{width:10px;height:10px;transition:transform .2s;flex-shrink:0;}
|
||||
.sidebar-subgroup__header .arrow path{stroke:rgba(255,255,255,0.45);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header{color:rgba(255,255,255,0.85);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header .arrow{transform:rotate(90deg);}
|
||||
.sidebar-subgroup__body{display:none;padding-left:16px;}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__body{display:block;}
|
||||
.sidebar-subgroup__body .sidebar-item{padding-left:36px;font-size:12px;}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;min-height:calc(100vh - 56px);}
|
||||
.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:200px;}
|
||||
.filter-input:focus{border-color:var(--primary);}
|
||||
.filter-select{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);color:var(--text-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='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;cursor:pointer;min-width:120px;}
|
||||
.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);}
|
||||
.btn-danger{background:#fff;color:var(--danger);border:1px solid var(--danger);}.btn-danger:hover{background:#fff1f0;}
|
||||
.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;}
|
||||
.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);}
|
||||
.tag-orange{background:#FFF7E6;color:var(--warning);}
|
||||
.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;}
|
||||
.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);}
|
||||
/* 统计卡片 */
|
||||
.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;}
|
||||
.stat-card__icon.blue{background:var(--primary-light);}
|
||||
.stat-card__icon.green{background:#F6FFED;}
|
||||
.stat-card__icon.orange{background:#FFF7E6;}
|
||||
.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);}
|
||||
/* 操作栏 */
|
||||
.action-bar{display:flex;align-items:center;gap:8px;margin-bottom:16px;}
|
||||
/* 页签 */
|
||||
.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;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- 顶部导航 -->
|
||||
<header class="top-bar">
|
||||
<div class="top-bar__logo">
|
||||
<svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M7 14h14M14 7v14" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/></svg>
|
||||
营养管理
|
||||
</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="trace-query.html">溯源总览</a>
|
||||
<a href="arc-employee.html">档案</a>
|
||||
<a href="farm-land.html" class="active">绿色种采</a>
|
||||
<a href="sup-hygiene-check.html">卫生供应</a>
|
||||
<a href="prod-qc-daily.html">健康生产</a>
|
||||
<a href="din-dict-mgmt.html">营养用餐</a>
|
||||
<a href="ano-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<a class="btn-back" href="../../index.html">← 返回首页</a>
|
||||
<div class="avatar">管</div>
|
||||
<span>系统管理员 ▾</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- 侧边栏 -->
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">绿色种采</div>
|
||||
<a href="farm-land.html" class="sidebar-item"><span class="mi">🗺️</span>土地环境</a>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 10 10" fill="none"><path d="M3 1l4 4-4 4" stroke-width="1.5"/></svg>
|
||||
📡 种养监控
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="farm-monitor-crop.html" class="sidebar-item"><span class="mi">🌱</span>作物种植监控</a>
|
||||
<a href="farm-monitor-livestock.html" class="sidebar-item"><span class="mi">🐄</span>畜禽养殖监控</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="farm-harvest.html" class="sidebar-item"><span class="mi">🌾</span>收成入库</a>
|
||||
<a href="farm-supplier.html" class="sidebar-item active"><span class="mi">🏭</span>供商管理</a>
|
||||
<a href="farm-purchase.html" class="sidebar-item"><span class="mi">🛒</span>采供管理</a>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容区 -->
|
||||
<div class="main">
|
||||
|
||||
<!-- 统计卡片 -->
|
||||
<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">6家</div>
|
||||
<div class="stat-card__label">内部供应商</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-card__icon blue">🏭</div>
|
||||
<div class="stat-card__info">
|
||||
<div class="stat-card__value">22家</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">4.3分</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>
|
||||
</div>
|
||||
|
||||
<!-- 页签切换 -->
|
||||
<div class="page-tabs">
|
||||
<div class="page-tab active" onclick="switchTab(0)">🌱 内部供应商</div>
|
||||
<div class="page-tab" onclick="switchTab(1)">🏭 外部供应商</div>
|
||||
</div>
|
||||
|
||||
<!-- 页签面板 1：内部供应商 -->
|
||||
<div class="tab-panel active" style="margin-top:16px;">
|
||||
<!-- 筛选栏 -->
|
||||
<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>蔬菜</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">➕ 新增内部供应商</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>当前产能(kg/月)</th><th>运营状态</th><th>最近供货</th><th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>SUP-IN-001</td><td>A区蔬菜基地</td><td>蔬菜</td><td>李负责人</td><td>LAND-001/LAND-002</td><td>2,400</td><td><span class="tag tag-green">运营中</span></td><td>今日</td><td><a class="link">查看详情</a></td></tr>
|
||||
<tr><td>SUP-IN-002</td><td>B区根茎基地</td><td>蔬菜</td><td>王负责人</td><td>LAND-002</td><td>1,200</td><td><span class="tag tag-green">运营中</span></td><td>今日</td><td><a class="link">查看详情</a></td></tr>
|
||||
<tr><td>SUP-IN-003</td><td>C区菌菇大棚</td><td>蔬菜</td><td>张负责人</td><td>LAND-003</td><td>480</td><td><span class="tag tag-green">运营中</span></td><td>昨日</td><td><a class="link">查看详情</a></td></tr>
|
||||
<tr><td>SUP-IN-004</td><td>D区豆类基地</td><td>蔬菜</td><td>李负责人</td><td>LAND-004</td><td>860</td><td><span class="tag tag-gray">休耕中</span></td><td>3天前</td><td><a class="link">查看详情</a></td></tr>
|
||||
<tr><td>SUP-IN-005</td><td>A1-猪舍</td><td>肉禽</td><td>赵负责人</td><td>BREED-A1</td><td>3,200</td><td><span class="tag tag-green">运营中</span></td><td>本周</td><td><a class="link">查看详情</a></td></tr>
|
||||
<tr><td>SUP-IN-006</td><td>B3-鸡舍</td><td>肉禽</td><td>陈负责人</td><td>BREED-B3</td><td>1,800</td><td><span class="tag tag-green">运营中</span></td><td>本周</td><td><a class="link">查看详情</a></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>显示 6 条，共 6 条</span>
|
||||
<button class="page-btn">‹</button>
|
||||
<button class="page-btn active">1</button>
|
||||
<button class="page-btn">›</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 页签面板 2：外部供应商 -->
|
||||
<div class="tab-panel" style="margin-top:16px;">
|
||||
<!-- 筛选栏 -->
|
||||
<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>蔬菜</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">➕ 新增外部供应商</button>
|
||||
<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="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>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>绿源蔬菜配送</td><td>蔬菜</td><td>138-0001-0001</td><td>本市郊区蔬菜基地</td><td><span class="tag tag-green">正常</span></td><td>4.6</td><td>3年</td><td>128单</td><td>今日</td><td>质量优/准时</td><td><a class="link">查看详情</a></td></tr>
|
||||
<tr><td>鲜肉直供公司</td><td>肉类</td><td>139-0002-0002</td><td>本市农贸市场A区</td><td><span class="tag tag-green">正常</span></td><td>4.4</td><td>2年</td><td>96单</td><td>今日</td><td>质量良/准时</td><td><a class="link">查看详情</a></td></tr>
|
||||
<tr><td>海鲜水产配送</td><td>水产</td><td>136-0003-0003</td><td>滨海水产批发市场</td><td><span class="tag tag-orange">即将到期</span></td><td>4.1</td><td>1年</td><td>48单</td><td>昨日</td><td>质量良/延迟</td><td><a class="link">查看详情</a></td></tr>
|
||||
<tr><td>粮油批发商行</td><td>粮油</td><td>135-0004-0004</td><td>本市粮油批发中心</td><td><span class="tag tag-green">正常</span></td><td>4.5</td><td>4年</td><td>156单</td><td>3天前</td><td>质量优/准时</td><td><a class="link">查看详情</a></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>显示 4 条，共 22 条</span>
|
||||
<button class="page-btn">‹</button>
|
||||
<button class="page-btn active">1</button>
|
||||
<button class="page-btn">2</button>
|
||||
<button class="page-btn">3</button>
|
||||
<button class="page-btn">›</button>
|
||||
</div>
|
||||
</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 toggleSubgroup(header){header.parentElement.classList.toggle('open');}
|
||||
// 初始化：若当前激活项位于子组中，自动展开其所在子组
|
||||
(function(){var active=document.querySelector('.sidebar-item.active');if(!active)return;var sub=active.closest('.sidebar-subgroup');if(sub)sub.classList.add('open');})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,137 @@
|
||||
<!DOCTYPE html>
|
||||
<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;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#F5F7FA;color:#333;min-width:1280px;}
|
||||
:root{--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;--text-primary:#333;--text-secondary:#666;--text-placeholder:#999;--border:#E8E8E8;--background:#F5F7FA;--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--font-xxl:24px;--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--shadow-sm:0 1px 4px rgba(0,0,0,0.08);--shadow-md:0 4px 12px rgba(0,0,0,0.12);}
|
||||
.top-bar{display:flex;align-items:center;height:56px;background:#001529;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;}
|
||||
.top-bar__logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:var(--font-lg);font-weight:600;white-space:nowrap;width:240px;flex-shrink:0;}
|
||||
.top-bar__logo svg{width:28px;height:28px;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.top-bar__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.top-bar__right .btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.top-bar__right .btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);cursor:pointer;}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;text-transform:uppercase;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.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);}
|
||||
.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:200px;}
|
||||
.filter-input:focus{border-color:var(--primary);}
|
||||
.filter-select{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);color:var(--text-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='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;cursor:pointer;min-width:120px;}
|
||||
.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__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);}
|
||||
.tag-orange{background:#FFF7E6;color:var(--warning);}
|
||||
.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;}
|
||||
.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);}
|
||||
.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;}
|
||||
.stat-card__icon.blue{background:var(--primary-light);}
|
||||
.stat-card__icon.green{background:#F6FFED;}
|
||||
.stat-card__icon.orange{background:#FFF7E6;}
|
||||
.stat-card__icon.red{background:#FFF1F0;}
|
||||
.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);}
|
||||
.action-bar{display:flex;align-items:center;gap:8px;margin-bottom:16px;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header class="top-bar">
|
||||
<div class="top-bar__logo"><svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M7 14h14M14 7v14" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/></svg>营养管理</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="trace-query.html">溯源总览</a><a href="arc-employee.html">档案</a><a href="farm-land.html">绿色种采</a><a href="sup-hygiene-check.html">卫生供应</a><a href="prod-qc-daily.html" class="active">健康生产</a><a href="din-dict-mgmt.html">营养用餐</a><a href="ano-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right"><a class="btn-back" href="../../index.html">← 返回首页</a><div class="avatar">管</div><span>系统管理员 ▾</span></div>
|
||||
</header>
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">健康生产</div>
|
||||
<a href="prod-qc-daily.html" class="sidebar-item"><span class="mi">🛡️</span>食安监控</a>
|
||||
<a href="prod-recipe-plan.html" class="sidebar-item"><span class="mi">📋</span>食谱规划</a>
|
||||
<a href="prod-clean-order.html" class="sidebar-item active"><span class="mi">📝</span>净菜订单</a>
|
||||
<a href="prod-proc-cabinet.html" class="sidebar-item"><span class="mi">🗄️</span>净菜进柜</a>
|
||||
<a href="prod-proc-combo.html" class="sidebar-item"><span class="mi">🔪</span>净菜组配</a>
|
||||
<a href="prod-proc-cook.html" class="sidebar-item"><span class="mi">🍳</span>按单烹制</a>
|
||||
<a href="prod-proc-serve.html" class="sidebar-item"><span class="mi">🍽️</span>上餐监控</a>
|
||||
<a href="prod-proc-surplus.html" class="sidebar-item"><span class="mi">♻️</span>余量处置</a>
|
||||
<a href="prod-proc-stats.html" class="sidebar-item"><span class="mi">📊</span>生产统计</a>
|
||||
</aside>
|
||||
<div class="main">
|
||||
<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>
|
||||
<div class="stat-card"><div class="stat-card__icon orange">🚚</div><div class="stat-card__info"><div class="stat-card__value">4</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">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>
|
||||
<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>需求数量(kg)</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><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><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><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><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><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><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><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><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><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><a class="link">查看</a> <a class="link">编辑</a></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>显示 10 条，共 24 条</span>
|
||||
<button class="page-btn">‹</button><button class="page-btn active">1</button><button class="page-btn">2</button><button class="page-btn">3</button><button class="page-btn">›</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,303 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>营养管理 - 净菜进柜 | 健康长庆原型</title>
|
||||
<style>
|
||||
*{box-sizing:border-box;margin:0;padding:0;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#F5F7FA;color:#333;min-width:1280px;}
|
||||
:root{
|
||||
--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;
|
||||
--text-primary:#333;--text-secondary:#666;--text-placeholder:#999;--border:#E8E8E8;--background:#F5F7FA;
|
||||
--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--font-xxl:24px;
|
||||
--radius-sm:4px;--radius-md:8px;--radius-lg:12px;
|
||||
--shadow-sm:0 1px 4px rgba(0,0,0,0.08);--shadow-md:0 4px 12px rgba(0,0,0,0.12);
|
||||
}
|
||||
.top-bar{display:flex;align-items:center;height:56px;background:#001529;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;}
|
||||
.top-bar__logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:var(--font-lg);font-weight:600;white-space:nowrap;width:240px;flex-shrink:0;}
|
||||
.top-bar__logo svg{width:28px;height:28px;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.top-bar__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.top-bar__right .btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.top-bar__right .btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);cursor:pointer;}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;text-transform:uppercase;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.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);}
|
||||
.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;}
|
||||
.stat-card__icon.blue{background:var(--primary-light);}
|
||||
.stat-card__icon.green{background:#F6FFED;}
|
||||
.stat-card__icon.orange{background:#FFF7E6;}
|
||||
.stat-card__icon.red{background:#FFF1F0;}
|
||||
.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-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;}
|
||||
.filter-input:focus{border-color:var(--primary);}
|
||||
.filter-select{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);color:var(--text-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='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;cursor:pointer;min-width:120px;}
|
||||
.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);}
|
||||
.tag-orange{background:#FFF7E6;color:var(--warning);}
|
||||
.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;}
|
||||
/* 操作列固定右侧 */
|
||||
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;}
|
||||
.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;}
|
||||
/* 视频弹窗 */
|
||||
.video-modal{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>
|
||||
<header class="top-bar">
|
||||
<div class="top-bar__logo"><svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M7 14h14M14 7v14" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/></svg>营养管理</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="trace-query.html">溯源总览</a><a href="arc-employee.html">档案</a><a href="farm-land.html">绿色种采</a><a href="sup-hygiene-check.html">卫生供应</a><a href="prod-qc-daily.html" class="active">健康生产</a><a href="din-dict-mgmt.html">营养用餐</a><a href="ano-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right"><a href="../../index.html" class="btn-back">← 返回首页</a><div class="avatar">管</div><span>系统管理员 ▾</span></div>
|
||||
</header>
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">健康生产</div>
|
||||
<a href="prod-qc-daily.html" class="sidebar-item"><span class="mi">🛡️</span>食安监控</a>
|
||||
<a href="prod-recipe-plan.html" class="sidebar-item"><span class="mi">📋</span>食谱规划</a>
|
||||
<a href="prod-clean-order.html" class="sidebar-item"><span class="mi">📝</span>净菜订单</a>
|
||||
<a href="prod-proc-cabinet.html" class="sidebar-item active"><span class="mi">🗄️</span>净菜进柜</a>
|
||||
<a href="prod-proc-combo.html" class="sidebar-item"><span class="mi">🔪</span>净菜组配</a>
|
||||
<a href="prod-proc-cook.html" class="sidebar-item"><span class="mi">🍳</span>按单烹制</a>
|
||||
<a href="prod-proc-serve.html" class="sidebar-item"><span class="mi">🍽️</span>上餐监控</a>
|
||||
<a href="prod-proc-surplus.html" class="sidebar-item"><span class="mi">♻️</span>余量处置</a>
|
||||
<a href="prod-proc-stats.html" class="sidebar-item"><span class="mi">📊</span>生产统计</a>
|
||||
</aside>
|
||||
<main class="main">
|
||||
<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 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>
|
||||
<div class="form-item">
|
||||
<label>溯源码（关联净菜入库）</label>
|
||||
<input type="text" placeholder="请输入溯源码">
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="btn btn-default" onclick="closeModal()">取消</button>
|
||||
<button class="btn btn-primary">确定</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(){document.getElementById('modalOverlay').style.display='flex';}
|
||||
function closeModal(){document.getElementById('modalOverlay').style.display='none';}
|
||||
document.getElementById('modalOverlay').addEventListener('click',function(e){if(e.target===this)closeModal();});
|
||||
|
||||
/* 查看视频弹窗 */
|
||||
function 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();
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,222 @@
|
||||
<!DOCTYPE html>
|
||||
<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;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#F5F7FA;color:#333;min-width:1280px;}
|
||||
:root{
|
||||
--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;
|
||||
--text-primary:#333;--text-secondary:#666;--text-placeholder:#999;--border:#E8E8E8;--background:#F5F7FA;
|
||||
--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--font-xxl:24px;
|
||||
--radius-sm:4px;--radius-md:8px;--radius-lg:12px;
|
||||
--shadow-sm:0 1px 4px rgba(0,0,0,0.08);--shadow-md:0 4px 12px rgba(0,0,0,0.12);
|
||||
}
|
||||
.top-bar{display:flex;align-items:center;height:56px;background:#001529;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;}
|
||||
.top-bar__logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:var(--font-lg);font-weight:600;white-space:nowrap;width:240px;flex-shrink:0;}
|
||||
.top-bar__logo svg{width:28px;height:28px;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.top-bar__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.top-bar__right .btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.top-bar__right .btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);cursor:pointer;}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;text-transform:uppercase;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.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);}
|
||||
.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:200px;}
|
||||
.filter-input:focus{border-color:var(--primary);}
|
||||
.filter-select{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);color:var(--text-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='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;cursor:pointer;min-width:120px;}
|
||||
.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);}
|
||||
.btn-danger{background:#fff;color:var(--danger);border:1px solid var(--danger);}.btn-danger:hover{background:#fff1f0;}
|
||||
.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;}
|
||||
.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);}
|
||||
.tag-orange{background:#FFF7E6;color:var(--warning);}
|
||||
.tag-red{background:#FFF1F0;color:var(--danger);}
|
||||
.tag-gray{background:#F5F5F5;color:#999;}
|
||||
.link{color:var(--primary);cursor:pointer;font-size:var(--font-sm);text-decoration:none;}.link:hover{color:#40a9ff;}
|
||||
.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);}
|
||||
.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;}
|
||||
.stat-card__icon.blue{background:var(--primary-light);}
|
||||
.stat-card__icon.green{background:#F6FFED;}
|
||||
.stat-card__icon.orange{background:#FFF7E6;}
|
||||
.stat-card__icon.red{background:#FFF1F0;}
|
||||
.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);}
|
||||
.action-bar{display:flex;align-items:center;gap:8px;margin-bottom:16px;}
|
||||
.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:520px;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;}
|
||||
.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>
|
||||
|
||||
<header class="top-bar">
|
||||
<div class="top-bar__logo">
|
||||
<svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M7 14h14M14 7v14" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/></svg>
|
||||
营养管理
|
||||
</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="trace-query.html">溯源总览</a>
|
||||
<a href="arc-employee.html">档案</a>
|
||||
<a href="farm-land.html">绿色种采</a>
|
||||
<a href="sup-hygiene-check.html">卫生供应</a>
|
||||
<a href="prod-qc-daily.html" class="active">健康生产</a>
|
||||
<a href="din-dict-mgmt.html">营养用餐</a>
|
||||
<a href="ano-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<a class="btn-back" href="../../index.html">← 返回首页</a>
|
||||
<div class="avatar">管</div>
|
||||
<span>系统管理员 ▾</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">健康生产</div>
|
||||
<a href="prod-qc-daily.html" class="sidebar-item"><span class="mi">🛡️</span>食安监控</a>
|
||||
<a href="prod-recipe-plan.html" class="sidebar-item"><span class="mi">📋</span>食谱规划</a>
|
||||
<a href="prod-clean-order.html" class="sidebar-item"><span class="mi">📝</span>净菜订单</a>
|
||||
<a href="prod-proc-cabinet.html" class="sidebar-item"><span class="mi">🗄️</span>净菜进柜</a>
|
||||
<a href="prod-proc-combo.html" class="sidebar-item active"><span class="mi">🔪</span>净菜组配</a>
|
||||
<a href="prod-proc-cook.html" class="sidebar-item"><span class="mi">🍳</span>按单烹制</a>
|
||||
<a href="prod-proc-serve.html" class="sidebar-item"><span class="mi">🍽️</span>上餐监控</a>
|
||||
<a href="prod-proc-surplus.html" class="sidebar-item"><span class="mi">♻️</span>余量处置</a>
|
||||
<a href="prod-proc-stats.html" class="sidebar-item"><span class="mi">📊</span>生产统计</a>
|
||||
</aside>
|
||||
|
||||
<div class="main">
|
||||
<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">36</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">28</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</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">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><input class="filter-input" type="text" placeholder="请输入目标菜品"></div>
|
||||
<div class="filter-item"><label>状态</label><select class="filter-select"><option>全部</option><option>已完成</option><option>组配中</option><option>待组配</option></select></div>
|
||||
<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>
|
||||
<button class="btn btn-default">📹 视频监控</button>
|
||||
</div>
|
||||
|
||||
<div class="table-card">
|
||||
<div class="table-card__header"><div class="table-card__title">净菜组配</div></div>
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead><tr><th>任务编号</th><th>目标菜品</th><th>食材配方</th><th>需求规格</th><th>组配状态</th><th>负责人</th><th>完成时间</th><th>操作</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td>CMB-001</td><td>宫保鸡丁</td><td><a class="link">查看配方</a></td><td>中组(8份) · 50组</td><td><span class="tag tag-green">已完成</span></td><td>李组配</td><td>10:30</td><td><a class="link">查看</a> <a class="link">编辑</a></td></tr>
|
||||
<tr><td>CMB-002</td><td>番茄炒蛋</td><td><a class="link">查看配方</a></td><td>大组(16份) · 80组</td><td><span class="tag tag-green">已完成</span></td><td>王组配</td><td>10:45</td><td><a class="link">查看</a> <a class="link">编辑</a></td></tr>
|
||||
<tr><td>CMB-003</td><td>红烧肉</td><td><a class="link">查看配方</a></td><td>大组(16份) · 60组</td><td><span class="tag tag-blue">组配中</span></td><td>张组配</td><td>—</td><td><a class="link">查看</a> <a class="link">编辑</a></td></tr>
|
||||
<tr><td>CMB-004</td><td>清蒸鱼</td><td><a class="link">查看配方</a></td><td>小组(4份) · 40组</td><td><span class="tag tag-orange">待组配</span></td><td>—</td><td>—</td><td><a class="link">查看</a> <a class="link">编辑</a></td></tr>
|
||||
<tr><td>CMB-005</td><td>炒时蔬</td><td><a class="link">查看配方</a></td><td>多人组(30份) · 20组</td><td><span class="tag tag-green">已完成</span></td><td>赵组配</td><td>10:50</td><td><a class="link">查看</a> <a class="link">编辑</a></td></tr>
|
||||
<tr><td>CMB-006</td><td>豆腐</td><td><a class="link">查看配方</a></td><td>自定义(12份/组) · 35组</td><td><span class="tag tag-orange">待组配</span></td><td>—</td><td>—</td><td><a class="link">查看</a> <a class="link">编辑</a></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>显示 6 条，共 36 条</span>
|
||||
<button class="page-btn">‹</button>
|
||||
<button class="page-btn active">1</button>
|
||||
<button class="page-btn">2</button>
|
||||
<button class="page-btn">3</button>
|
||||
<button class="page-btn">›</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
<input type="text" placeholder="请输入目标菜品">
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<label>需求份数<span class="required">*</span></label>
|
||||
<input type="number" placeholder="请输入需求份数">
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<label>负责人<span class="required">*</span></label>
|
||||
<input type="text" placeholder="请输入负责人">
|
||||
</div>
|
||||
<div class="form-item"></div>
|
||||
<div class="form-item full">
|
||||
<label>食材配方（JSON格式）</label>
|
||||
<textarea placeholder='[{"name":"鸡胸肉","weightPerPortion":120,"unit":"g"},...]'></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="btn btn-default" onclick="closeModal()">取消</button>
|
||||
<button class="btn btn-primary">确定</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
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();});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,228 @@
|
||||
<!DOCTYPE html>
|
||||
<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;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#F5F7FA;color:#333;min-width:1280px;}
|
||||
:root{
|
||||
--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;
|
||||
--text-primary:#333;--text-secondary:#666;--text-placeholder:#999;--border:#E8E8E8;--background:#F5F7FA;
|
||||
--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--font-xxl:24px;
|
||||
--radius-sm:4px;--radius-md:8px;--radius-lg:12px;
|
||||
--shadow-sm:0 1px 4px rgba(0,0,0,0.08);--shadow-md:0 4px 12px rgba(0,0,0,0.12);
|
||||
}
|
||||
.top-bar{display:flex;align-items:center;height:56px;background:#001529;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;}
|
||||
.top-bar__logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:var(--font-lg);font-weight:600;white-space:nowrap;width:240px;flex-shrink:0;}
|
||||
.top-bar__logo svg{width:28px;height:28px;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.top-bar__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.top-bar__right .btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.top-bar__right .btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);cursor:pointer;}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;text-transform:uppercase;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.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);}
|
||||
.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:200px;}
|
||||
.filter-input:focus{border-color:var(--primary);}
|
||||
.filter-select{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);color:var(--text-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='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;cursor:pointer;min-width:120px;}
|
||||
.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;}
|
||||
.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);}
|
||||
.tag-orange{background:#FFF7E6;color:var(--warning);}
|
||||
.tag-red{background:#FFF1F0;color:var(--danger);}
|
||||
.tag-gray{background:#F5F5F5;color:#999;}
|
||||
.link{color:var(--primary);cursor:pointer;font-size:var(--font-sm);text-decoration:none;}.link:hover{color:#40a9ff;}
|
||||
.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);}
|
||||
.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;}
|
||||
.stat-card__icon.blue{background:var(--primary-light);}
|
||||
.stat-card__icon.green{background:#F6FFED;}
|
||||
.stat-card__icon.orange{background:#FFF7E6;}
|
||||
.stat-card__icon.red{background:#FFF1F0;}
|
||||
.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);}
|
||||
.action-bar{display:flex;align-items:center;gap:8px;margin-bottom:16px;}
|
||||
.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;}
|
||||
.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>
|
||||
|
||||
<header class="top-bar">
|
||||
<div class="top-bar__logo">
|
||||
<svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M7 14h14M14 7v14" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/></svg>
|
||||
营养管理
|
||||
</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="trace-query.html">溯源总览</a>
|
||||
<a href="arc-employee.html">档案</a>
|
||||
<a href="farm-land.html">绿色种采</a>
|
||||
<a href="sup-hygiene-check.html">卫生供应</a>
|
||||
<a href="prod-qc-daily.html" class="active">健康生产</a>
|
||||
<a href="din-dict-mgmt.html">营养用餐</a>
|
||||
<a href="ano-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<a class="btn-back" href="../../index.html">← 返回首页</a>
|
||||
<div class="avatar">管</div>
|
||||
<span>系统管理员 ▾</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">健康生产</div>
|
||||
<a href="prod-qc-daily.html" class="sidebar-item"><span class="mi">🛡️</span>食安监控</a>
|
||||
<a href="prod-recipe-plan.html" class="sidebar-item"><span class="mi">📋</span>食谱规划</a>
|
||||
<a href="prod-clean-order.html" class="sidebar-item"><span class="mi">📝</span>净菜订单</a>
|
||||
<a href="prod-proc-cabinet.html" class="sidebar-item"><span class="mi">🗄️</span>净菜进柜</a>
|
||||
<a href="prod-proc-combo.html" class="sidebar-item"><span class="mi">🔪</span>净菜组配</a>
|
||||
<a href="prod-proc-cook.html" class="sidebar-item active"><span class="mi">🍳</span>按单烹制</a>
|
||||
<a href="prod-proc-serve.html" class="sidebar-item"><span class="mi">🍽️</span>上餐监控</a>
|
||||
<a href="prod-proc-surplus.html" class="sidebar-item"><span class="mi">♻️</span>余量处置</a>
|
||||
<a href="prod-proc-stats.html" class="sidebar-item"><span class="mi">📊</span>生产统计</a>
|
||||
</aside>
|
||||
|
||||
<div class="main">
|
||||
<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">572</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">284</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">288</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">486</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><input class="filter-input" type="text" placeholder="请输入菜品名称"></div>
|
||||
<div class="filter-item"><label>来源类型</label><select class="filter-select"><option>全部</option><option>点餐</option><option>餐线</option></select></div>
|
||||
<div class="filter-item"><label>烹制状态</label><select class="filter-select"><option>全部</option><option>已完成</option><option>烹制中</option><option>待烹制</option></select></div>
|
||||
<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-primary"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 10v2h10v-2M7 2v7M4.5 6.5L7 9l2.5-2.5" stroke="#fff" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>导出列表数据</button>
|
||||
<button class="btn btn-default"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><rect x="2" y="2" width="10" height="10" rx="1.5" stroke="currentColor" stroke-width="1.4"/><path d="M4 5h6M4 7.5h4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>查看导出任务</button>
|
||||
<button class="btn btn-default">🔔 通知取餐</button>
|
||||
<button class="btn btn-default">🔗 溯源查询</button>
|
||||
<button class="btn btn-default">📹 视频监控</button>
|
||||
</div>
|
||||
|
||||
<div class="table-card">
|
||||
<div class="table-card__header"><div class="table-card__title">按单烹制</div></div>
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead><tr><th>烹制任务号</th><th>来源类型</th><th>组配任务号</th><th>菜品名称</th><th>计划烹制规格</th><th>实际烹制规格</th><th>厨师</th><th>生重(kg)</th><th>熟重(kg)</th><th>生熟比</th><th>烹制开始</th><th>烹制结束</th><th>食材明细</th><th>温度过程</th><th>视频记录</th><th>模型数据</th><th>烹制状态</th><th>操作</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td>COOK-001</td><td><span class="tag tag-blue">点餐</span></td><td>CMB-001</td><td>宫保鸡丁</td><td>中组(8份) · 50组</td><td>中组(8份) · 50组</td><td>张厨师</td><td>8.5</td><td>7.2</td><td>0.85</td><td>11:00</td><td>11:20</td><td><a class="link">查看配方</a></td><td><a class="link">温度曲线</a></td><td>可回放</td><td><span class="tag tag-green">92分</span></td><td><span class="tag tag-green">已完成</span></td><td><a class="link">详情</a></td></tr>
|
||||
<tr><td>COOK-002</td><td><span class="tag tag-blue">点餐</span></td><td>CMB-002</td><td>番茄炒蛋</td><td>大组(16份) · 80组</td><td>大组(16份) · 80组</td><td>李厨师</td><td>12.0</td><td>10.4</td><td>0.87</td><td>11:05</td><td>11:20</td><td><a class="link">查看配方</a></td><td><a class="link">温度曲线</a></td><td>可回放</td><td><span class="tag tag-green">88分</span></td><td><span class="tag tag-green">已完成</span></td><td><a class="link">详情</a></td></tr>
|
||||
<tr><td>COOK-003</td><td><span class="tag tag-gray">餐线</span></td><td>CMB-003</td><td>红烧肉</td><td>大组(16份) · 60组</td><td>—</td><td>王厨师</td><td>10.0</td><td>—</td><td>—</td><td>11:10</td><td>—</td><td><a class="link">查看配方</a></td><td><a class="link">温度曲线</a></td><td>录制中</td><td><span class="tag tag-blue">检测中</span></td><td><span class="tag tag-blue">烹制中</span></td><td><a class="link">详情</a></td></tr>
|
||||
<tr><td>COOK-004</td><td><span class="tag tag-gray">餐线</span></td><td>CMB-004</td><td>清蒸鱼</td><td>小组(4份) · 40组</td><td>—</td><td>张厨师</td><td>6.5</td><td>—</td><td>—</td><td>11:15</td><td>—</td><td><a class="link">查看配方</a></td><td><a class="link">温度曲线</a></td><td>录制中</td><td><span class="tag tag-blue">检测中</span></td><td><span class="tag tag-blue">烹制中</span></td><td><a class="link">详情</a></td></tr>
|
||||
<tr><td>COOK-005</td><td><span class="tag tag-gray">餐线</span></td><td>CMB-005</td><td>蒜蓉菠菜</td><td>多人组(30份) · 100组</td><td>—</td><td>—</td><td>15.0</td><td>—</td><td>—</td><td>—</td><td>—</td><td><a class="link">查看配方</a></td><td>—</td><td>—</td><td>—</td><td><span class="tag tag-orange">待烹制</span></td><td><a class="link">详情</a></td></tr>
|
||||
<tr><td>COOK-006</td><td><span class="tag tag-gray">餐线</span></td><td>CMB-005</td><td>炒时蔬</td><td>多人组(30份) · 20组</td><td>多人组(30份) · 20组</td><td>赵厨师</td><td>18.0</td><td>15.6</td><td>0.87</td><td>11:10</td><td>11:30</td><td><a class="link">查看配方</a></td><td><a class="link">温度曲线</a></td><td>可回放</td><td><span class="tag tag-green">95分</span></td><td><span class="tag tag-green">已完成</span></td><td><a class="link">详情</a></td></tr>
|
||||
<tr><td>COOK-007</td><td><span class="tag tag-blue">点餐</span></td><td>CMB-006</td><td>豆腐</td><td>自定义(12份/组) · 35组</td><td>自定义(12份/组) · 35组</td><td>陈厨师</td><td>4.2</td><td>3.9</td><td>0.93</td><td>11:20</td><td>11:35</td><td><a class="link">查看配方</a></td><td><a class="link">温度曲线</a></td><td>可回放</td><td><span class="tag tag-green">78分</span></td><td><span class="tag tag-green">已完成</span></td><td><a class="link">详情</a></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>显示 7 条，共 572 条</span>
|
||||
<button class="page-btn">‹</button>
|
||||
<button class="page-btn active">1</button>
|
||||
<button class="page-btn">2</button>
|
||||
<button class="page-btn">3</button>
|
||||
<button class="page-btn">›</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
<input type="text" placeholder="请输入菜品名称">
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<label>来源类型<span class="required">*</span></label>
|
||||
<select><option>请选择</option><option>点餐</option><option>餐线</option></select>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<label>计划烹制量(份)<span class="required">*</span></label>
|
||||
<input type="number" placeholder="请输入计划烹制量">
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<label>厨师<span class="required">*</span></label>
|
||||
<input type="text" placeholder="请输入厨师姓名">
|
||||
</div>
|
||||
<div class="form-item full">
|
||||
<label>食材用量明细（标准用量g/实际用量g）</label>
|
||||
<textarea placeholder="请输入食材用量明细"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="btn btn-default" onclick="closeModal()">取消</button>
|
||||
<button class="btn btn-primary">确定</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
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();});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,137 @@
|
||||
<!DOCTYPE html>
|
||||
<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;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#F5F7FA;color:#333;min-width:1280px;}
|
||||
:root{--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;--text-primary:#333;--text-secondary:#666;--text-placeholder:#999;--border:#E8E8E8;--background:#F5F7FA;--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--font-xxl:24px;--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--shadow-sm:0 1px 4px rgba(0,0,0,0.08);--shadow-md:0 4px 12px rgba(0,0,0,0.12);}
|
||||
.top-bar{display:flex;align-items:center;height:56px;background:#001529;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;}
|
||||
.top-bar__logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:var(--font-lg);font-weight:600;white-space:nowrap;width:240px;flex-shrink:0;}
|
||||
.top-bar__logo svg{width:28px;height:28px;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.top-bar__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.top-bar__right .btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.top-bar__right .btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);cursor:pointer;}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;text-transform:uppercase;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.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);}
|
||||
.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:200px;}
|
||||
.filter-input:focus{border-color:var(--primary);}
|
||||
.filter-select{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);color:var(--text-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='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;cursor:pointer;min-width:120px;}
|
||||
.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__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);}
|
||||
.tag-orange{background:#FFF7E6;color:var(--warning);}
|
||||
.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;}
|
||||
.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);}
|
||||
.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;}
|
||||
.stat-card__icon.blue{background:var(--primary-light);}
|
||||
.stat-card__icon.green{background:#F6FFED;}
|
||||
.stat-card__icon.orange{background:#FFF7E6;}
|
||||
.stat-card__icon.red{background:#FFF1F0;}
|
||||
.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);}
|
||||
.action-bar{display:flex;align-items:center;gap:8px;margin-bottom:16px;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header class="top-bar">
|
||||
<div class="top-bar__logo"><svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M7 14h14M14 7v14" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/></svg>营养管理</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="trace-query.html">溯源总览</a><a href="arc-employee.html">档案</a><a href="farm-land.html">绿色种采</a><a href="sup-hygiene-check.html">卫生供应</a><a href="prod-qc-daily.html" class="active">健康生产</a><a href="din-dict-mgmt.html">营养用餐</a><a href="ano-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right"><a class="btn-back" href="../../index.html">← 返回首页</a><div class="avatar">管</div><span>系统管理员 ▾</span></div>
|
||||
</header>
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">健康生产</div>
|
||||
<a href="prod-qc-daily.html" class="sidebar-item"><span class="mi">🛡️</span>食安监控</a>
|
||||
<a href="prod-recipe-plan.html" class="sidebar-item"><span class="mi">📋</span>食谱规划</a>
|
||||
<a href="prod-clean-order.html" class="sidebar-item"><span class="mi">📝</span>净菜订单</a>
|
||||
<a href="prod-proc-cabinet.html" class="sidebar-item"><span class="mi">🗄️</span>净菜进柜</a>
|
||||
<a href="prod-proc-combo.html" class="sidebar-item"><span class="mi">🔪</span>净菜组配</a>
|
||||
<a href="prod-proc-cook.html" class="sidebar-item"><span class="mi">🍳</span>按单烹制</a>
|
||||
<a href="prod-proc-serve.html" class="sidebar-item active"><span class="mi">🍽️</span>上餐监控</a>
|
||||
<a href="prod-proc-surplus.html" class="sidebar-item"><span class="mi">♻️</span>余量处置</a>
|
||||
<a href="prod-proc-stats.html" class="sidebar-item"><span class="mi">📊</span>生产统计</a>
|
||||
</aside>
|
||||
<div class="main">
|
||||
<div class="stats-row">
|
||||
<div class="stat-card"><div class="stat-card__icon blue">🍽️</div><div class="stat-card__info"><div class="stat-card__value">32道</div><div class="stat-card__label">今日上餐菜品</div></div></div>
|
||||
<div class="stat-card"><div class="stat-card__icon green">✅</div><div class="stat-card__info"><div class="stat-card__value">28道</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">4道</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">100%</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>早餐</option><option>午餐</option><option>晚餐</option></select></div>
|
||||
<div class="filter-item"><label>厨师</label><input class="filter-input" type="text" placeholder="请输入厨师姓名" style="min-width:140px;"></div>
|
||||
<div class="filter-item"><label>餐线</label><select class="filter-select"><option>全部</option><option>A区中餐线</option><option>B区中餐线</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><option>待上餐</option></select></div>
|
||||
<div class="filter-item"><label>日期范围</label><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-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>上餐重量(kg)</th><th>上餐状态</th><th>操作</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td><span class="tag tag-blue">午餐</span></td><td>宫保鸡丁</td><td><span class="tag tag-green">🤖 自动识别</span></td><td>张厨师</td><td>COOK-001</td><td>11:18</td><td>82</td><td>11:30</td><td>A区中餐线</td><td>00025号秤</td><td>38.2</td><td><span class="tag tag-blue">上餐中</span></td><td><a class="link">查看</a> <a class="link">编辑</a></td></tr>
|
||||
<tr><td><span class="tag tag-blue">午餐</span></td><td>番茄炒蛋</td><td><span class="tag tag-green">🤖 自动识别</span></td><td>李厨师</td><td>COOK-002</td><td>11:20</td><td>78</td><td>11:30</td><td>A区中餐线</td><td>00025号秤</td><td>22.6</td><td><span class="tag tag-blue">上餐中</span></td><td><a class="link">查看</a> <a class="link">编辑</a></td></tr>
|
||||
<tr><td><span class="tag tag-blue">午餐</span></td><td>红烧肉</td><td><span class="tag tag-blue">👤 人工选择</span></td><td>王厨师</td><td>COOK-003</td><td>11:22</td><td>86</td><td>11:38</td><td>B区中餐线</td><td>00027号秤</td><td>42.6</td><td><span class="tag tag-orange">延误8分钟</span></td><td><a class="link">查看</a> <a class="link">编辑</a></td></tr>
|
||||
<tr><td><span class="tag tag-gray">早餐</span></td><td>小米粥</td><td><span class="tag tag-green">🤖 自动识别</span></td><td>赵厨师</td><td>COOK-006</td><td>07:20</td><td>75</td><td>07:28</td><td>A区早餐线</td><td>00022号秤</td><td>12.6</td><td><span class="tag tag-gray">已结束</span></td><td><a class="link">查看</a> <a class="link">编辑</a></td></tr>
|
||||
<tr><td><span class="tag tag-gray">早餐</span></td><td>燕麦粥</td><td><span class="tag tag-blue">👤 人工选择</span></td><td>陈厨师</td><td>COOK-007</td><td>07:22</td><td>72</td><td>07:35</td><td>B区早餐线</td><td>00023号秤</td><td>8.4</td><td><span class="tag tag-orange">延误5分钟</span></td><td><a class="link">查看</a> <a class="link">编辑</a></td></tr>
|
||||
<tr><td><span class="tag tag-blue">午餐</span></td><td>蒜蓉菠菜</td><td><span class="tag tag-blue">👤 人工选择</span></td><td>—</td><td>COOK-005</td><td>—</td><td>—</td><td>—</td><td>C区快餐线</td><td>00028号秤</td><td>—</td><td><span class="tag tag-gray">待上餐</span></td><td><a class="link">查看</a> <a class="link">编辑</a></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>显示 6 条，共 32 条</span>
|
||||
<button class="page-btn">‹</button><button class="page-btn active">1</button><button class="page-btn">2</button><button class="page-btn">3</button><button class="page-btn">›</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,172 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>营养管理 - 生产统计 | 健康长庆原型</title>
|
||||
<style>
|
||||
*{box-sizing:border-box;margin:0;padding:0;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#F5F7FA;color:#333;min-width:1280px;}
|
||||
:root{
|
||||
--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;
|
||||
--text-primary:#333;--text-secondary:#666;--text-placeholder:#999;--border:#E8E8E8;--background:#F5F7FA;
|
||||
--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--font-xxl:24px;
|
||||
--radius-sm:4px;--radius-md:8px;--radius-lg:12px;
|
||||
--shadow-sm:0 1px 4px rgba(0,0,0,0.08);--shadow-md:0 4px 12px rgba(0,0,0,0.12);
|
||||
}
|
||||
.top-bar{display:flex;align-items:center;height:56px;background:#001529;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;}
|
||||
.top-bar__logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:var(--font-lg);font-weight:600;white-space:nowrap;width:240px;flex-shrink:0;}
|
||||
.top-bar__logo svg{width:28px;height:28px;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.top-bar__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.top-bar__right .btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.top-bar__right .btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);cursor:pointer;}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;text-transform:uppercase;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.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);}
|
||||
.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;}
|
||||
.stat-card__icon.blue{background:var(--primary-light);}
|
||||
.stat-card__icon.green{background:#F6FFED;}
|
||||
.stat-card__icon.orange{background:#FFF7E6;}
|
||||
.stat-card__icon.red{background:#FFF1F0;}
|
||||
.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-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;}
|
||||
.filter-input:focus{border-color:var(--primary);}
|
||||
.filter-select{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);color:var(--text-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='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;cursor:pointer;min-width:120px;}
|
||||
.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;}
|
||||
tr.summary-row td{font-weight:700;background:#FAFAFA;}
|
||||
.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);}
|
||||
.tag-orange{background:#FFF7E6;color:var(--warning);}
|
||||
.tag-red{background:#FFF1F0;color:var(--danger);}
|
||||
.tag-gray{background:#F5F5F5;color:#999;}
|
||||
.link{color:var(--primary);cursor:pointer;font-size:var(--font-sm);text-decoration:none;}.link:hover{color:#40a9ff;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header class="top-bar">
|
||||
<div class="top-bar__logo"><svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M7 14h14M14 7v14" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/></svg>营养管理</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="trace-query.html">溯源总览</a><a href="arc-employee.html">档案</a><a href="farm-land.html">绿色种采</a><a href="sup-hygiene-check.html">卫生供应</a><a href="prod-qc-daily.html" class="active">健康生产</a><a href="din-dict-mgmt.html">营养用餐</a><a href="ano-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right"><a href="../../index.html" class="btn-back">← 返回首页</a><div class="avatar">管</div><span>系统管理员 ▾</span></div>
|
||||
</header>
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">健康生产</div>
|
||||
<a href="prod-qc-daily.html" class="sidebar-item"><span class="mi">🛡️</span>食安监控</a>
|
||||
<a href="prod-recipe-plan.html" class="sidebar-item"><span class="mi">📋</span>食谱规划</a>
|
||||
<a href="prod-clean-order.html" class="sidebar-item"><span class="mi">📝</span>净菜订单</a>
|
||||
<a href="prod-proc-cabinet.html" class="sidebar-item"><span class="mi">🗄️</span>净菜进柜</a>
|
||||
<a href="prod-proc-combo.html" class="sidebar-item"><span class="mi">🔪</span>净菜组配</a>
|
||||
<a href="prod-proc-cook.html" class="sidebar-item"><span class="mi">🍳</span>按单烹制</a>
|
||||
<a href="prod-proc-serve.html" class="sidebar-item"><span class="mi">🍽️</span>上餐监控</a>
|
||||
<a href="prod-proc-surplus.html" class="sidebar-item"><span class="mi">♻️</span>余量处置</a>
|
||||
<a href="prod-proc-stats.html" class="sidebar-item active"><span class="mi">📊</span>生产统计</a>
|
||||
</aside>
|
||||
<main class="main">
|
||||
<div class="stats-row">
|
||||
<div class="stat-card"><div class="stat-card__icon blue">🍳</div><div class="stat-card__info"><div class="stat-card__value">32道</div><div class="stat-card__label">今日生产菜品</div></div></div>
|
||||
<div class="stat-card"><div class="stat-card__icon green">📦</div><div class="stat-card__info"><div class="stat-card__value">1,248kg</div><div class="stat-card__label">今日出餐量</div></div></div>
|
||||
<div class="stat-card"><div class="stat-card__icon orange">🗑️</div><div class="stat-card__info"><div class="stat-card__value">5.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">24.6%</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>
|
||||
<!-- Tab1: 生产报表 -->
|
||||
<div class="tab-panel active">
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item"><label>日期</label><input class="filter-input" type="date" value="2026-04-23"></div>
|
||||
<div class="filter-item"><label>餐次</label><select class="filter-select"><option>全部</option><option>早餐</option><option>午餐</option><option>晚餐</option></select></div>
|
||||
<div class="filter-item"><label>食堂</label><select class="filter-select"><option>全部</option><option>A区食堂</option><option>B区食堂</option></select></div>
|
||||
<button class="btn btn-primary">查询</button><button class="btn btn-default">重置</button>
|
||||
</div>
|
||||
<div class="action-bar"><button class="btn btn-primary"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 10v2h10v-2M7 2v7M4.5 6.5L7 9l2.5-2.5" stroke="#fff" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>导出列表数据</button><button class="btn btn-default"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><rect x="2" y="2" width="10" height="10" rx="1.5" stroke="currentColor" stroke-width="1.4"/><path d="M4 5h6M4 7.5h4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>查看导出任务</button></div>
|
||||
<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>出餐总重量(kg)</th><th>食材消耗(kg)</th><th>食材成本(元)</th><th>余量处置(kg)</th><th>利用率</th><th>销售额(元)</th><th>就餐人次</th></tr></thead>
|
||||
<tbody>
|
||||
<tr class="summary-row"><td>汇总</td><td>—</td><td>70道</td><td>1,248kg</td><td>1,209kg</td><td>¥40,280</td><td>71kg</td><td>94.1%</td><td>¥76,280</td><td>4,190人</td></tr>
|
||||
<tr><td>2026-04-23</td><td>早餐</td><td>8道</td><td>168kg</td><td>86kg</td><td>¥3,240</td><td>4kg</td><td>95.3%</td><td>¥8,640</td><td>480人</td></tr>
|
||||
<tr><td>2026-04-23</td><td>午餐</td><td>14道</td><td>378kg</td><td>286kg</td><td>¥9,600</td><td>18kg</td><td>94.1%</td><td>¥15,640</td><td>840人</td></tr>
|
||||
<tr><td>2026-04-22</td><td>早餐</td><td>8道</td><td>164kg</td><td>83kg</td><td>¥3,120</td><td>5kg</td><td>94.3%</td><td>¥8,460</td><td>470人</td></tr>
|
||||
<tr><td>2026-04-22</td><td>午餐</td><td>12道</td><td>342kg</td><td>268kg</td><td>¥8,960</td><td>16kg</td><td>94.4%</td><td>¥14,040</td><td>780人</td></tr>
|
||||
<tr><td>2026-04-22</td><td>晚餐</td><td>10道</td><td>144kg</td><td>118kg</td><td>¥3,540</td><td>5kg</td><td>95.8%</td><td>¥6,140</td><td>320人</td></tr>
|
||||
<tr><td>2026-04-21</td><td>早餐</td><td>8道</td><td>161kg</td><td>82kg</td><td>¥3,080</td><td>5kg</td><td>94.3%</td><td>¥8,280</td><td>460人</td></tr>
|
||||
<tr><td>2026-04-21</td><td>午餐</td><td>14道</td><td>378kg</td><td>286kg</td><td>¥9,300</td><td>18kg</td><td>94.1%</td><td>¥15,120</td><td>840人</td></tr>
|
||||
</tbody>
|
||||
</table></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Tab2: 成本利润 -->
|
||||
<div class="tab-panel">
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item"><label>日期</label><input class="filter-input" type="date" value="2026-04-23"></div>
|
||||
<div class="filter-item"><label>食堂</label><select class="filter-select"><option>全部</option><option>A区食堂</option><option>B区食堂</option></select></div>
|
||||
<button class="btn btn-primary">查询</button><button class="btn btn-default">重置</button>
|
||||
</div>
|
||||
<div class="action-bar"><button class="btn btn-primary"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 10v2h10v-2M7 2v7M4.5 6.5L7 9l2.5-2.5" stroke="#fff" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>导出列表数据</button><button class="btn btn-default"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><rect x="2" y="2" width="10" height="10" rx="1.5" stroke="currentColor" stroke-width="1.4"/><path d="M4 5h6M4 7.5h4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>查看导出任务</button></div>
|
||||
<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><th>毛利率</th></tr></thead>
|
||||
<tbody>
|
||||
<tr class="summary-row"><td>汇总</td><td>¥86,180</td><td>¥29,300</td><td>¥923</td><td>¥2,119</td><td>¥4,719</td><td>¥8,400</td><td>—</td><td>¥131,641</td><td>¥157,720</td><td>¥71,540</td><td>¥26,079</td><td>—</td></tr>
|
||||
<tr><td>2026-04-23</td><td>¥12,840</td><td>¥4,200</td><td>¥151</td><td>¥347</td><td>¥788</td><td>¥1,200</td><td><a class="link">¥200</a></td><td>¥19,526</td><td>¥24,280</td><td>¥11,440</td><td>¥4,754</td><td><span class="tag tag-green">19.6%</span></td></tr>
|
||||
<tr><td>2026-04-22</td><td>¥15,620</td><td>¥5,100</td><td>¥162</td><td>¥358</td><td>¥813</td><td>¥1,200</td><td><a class="link">¥180</a></td><td>¥23,253</td><td>¥28,640</td><td>¥13,020</td><td>¥5,387</td><td><span class="tag tag-green">18.8%</span></td></tr>
|
||||
<tr><td>2026-04-21</td><td>¥14,380</td><td>¥4,800</td><td>¥144</td><td>¥335</td><td>¥738</td><td>¥1,200</td><td><a class="link">¥220</a></td><td>¥21,597</td><td>¥26,800</td><td>¥12,420</td><td>¥5,203</td><td><span class="tag tag-green">19.4%</span></td></tr>
|
||||
<tr><td>2026-04-20</td><td>¥13,960</td><td>¥4,600</td><td>¥138</td><td>¥322</td><td>¥706</td><td>¥1,200</td><td><a class="link">¥160</a></td><td>¥20,926</td><td>¥25,200</td><td>¥11,240</td><td>¥4,274</td><td><span class="tag tag-blue">17.0%</span></td></tr>
|
||||
<tr><td>2026-04-19</td><td>¥8,240</td><td>¥3,200</td><td>¥96</td><td>¥216</td><td>¥480</td><td>¥1,200</td><td><a class="link">¥120</a></td><td>¥13,432</td><td>¥15,600</td><td>¥7,360</td><td>¥2,168</td><td><span class="tag tag-blue">13.9%</span></td></tr>
|
||||
<tr><td>2026-04-18</td><td>¥7,860</td><td>¥3,000</td><td>¥88</td><td>¥202</td><td>¥456</td><td>¥1,200</td><td><a class="link">¥110</a></td><td>¥12,806</td><td>¥14,800</td><td>¥6,940</td><td>¥1,994</td><td><span class="tag tag-blue">13.5%</span></td></tr>
|
||||
<tr><td>2026-04-17</td><td>¥13,280</td><td>¥4,400</td><td>¥144</td><td>¥335</td><td>¥738</td><td>¥1,200</td><td><a class="link">¥190</a></td><td>¥20,097</td><td>¥24,600</td><td>¥11,320</td><td>¥4,503</td><td><span class="tag tag-green">18.3%</span></td></tr>
|
||||
</tbody>
|
||||
</table></div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<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));
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,240 @@
|
||||
<!DOCTYPE html>
|
||||
<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;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#F5F7FA;color:#333;min-width:1280px;}
|
||||
:root{
|
||||
--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;
|
||||
--text-primary:#333;--text-secondary:#666;--text-placeholder:#999;--border:#E8E8E8;--background:#F5F7FA;
|
||||
--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--font-xxl:24px;
|
||||
--radius-sm:4px;--radius-md:8px;--radius-lg:12px;
|
||||
--shadow-sm:0 1px 4px rgba(0,0,0,0.08);--shadow-md:0 4px 12px rgba(0,0,0,0.12);
|
||||
}
|
||||
.top-bar{display:flex;align-items:center;height:56px;background:#001529;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;}
|
||||
.top-bar__logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:var(--font-lg);font-weight:600;white-space:nowrap;width:240px;flex-shrink:0;}
|
||||
.top-bar__logo svg{width:28px;height:28px;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.top-bar__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.top-bar__right .btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.top-bar__right .btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);cursor:pointer;}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;text-transform:uppercase;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.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);}
|
||||
.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:200px;}
|
||||
.filter-input:focus{border-color:var(--primary);}
|
||||
.filter-select{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);color:var(--text-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='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;cursor:pointer;min-width:120px;}
|
||||
.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;}
|
||||
.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);}
|
||||
.tag-orange{background:#FFF7E6;color:var(--warning);}
|
||||
.tag-red{background:#FFF1F0;color:var(--danger);}
|
||||
.tag-gray{background:#F5F5F5;color:#999;}
|
||||
.link{color:var(--primary);cursor:pointer;font-size:var(--font-sm);text-decoration:none;}.link:hover{color:#40a9ff;}
|
||||
.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);}
|
||||
.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;}
|
||||
.stat-card__icon.blue{background:var(--primary-light);}
|
||||
.stat-card__icon.green{background:#F6FFED;}
|
||||
.stat-card__icon.orange{background:#FFF7E6;}
|
||||
.stat-card__icon.red{background:#FFF1F0;}
|
||||
.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);}
|
||||
.action-bar{display:flex;align-items:center;gap:8px;margin-bottom:16px;}
|
||||
.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;}
|
||||
.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>
|
||||
|
||||
<header class="top-bar">
|
||||
<div class="top-bar__logo">
|
||||
<svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M7 14h14M14 7v14" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/></svg>
|
||||
营养管理
|
||||
</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="trace-query.html">溯源总览</a>
|
||||
<a href="arc-employee.html">档案</a>
|
||||
<a href="farm-land.html">绿色种采</a>
|
||||
<a href="sup-hygiene-check.html">卫生供应</a>
|
||||
<a href="prod-qc-daily.html" class="active">健康生产</a>
|
||||
<a href="din-dict-mgmt.html">营养用餐</a>
|
||||
<a href="ano-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<a class="btn-back" href="../../index.html">← 返回首页</a>
|
||||
<div class="avatar">管</div>
|
||||
<span>系统管理员 ▾</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">健康生产</div>
|
||||
<a href="prod-qc-daily.html" class="sidebar-item"><span class="mi">🛡️</span>食安监控</a>
|
||||
<a href="prod-recipe-plan.html" class="sidebar-item"><span class="mi">📋</span>食谱规划</a>
|
||||
<a href="prod-clean-order.html" class="sidebar-item"><span class="mi">📝</span>净菜订单</a>
|
||||
<a href="prod-proc-cabinet.html" class="sidebar-item"><span class="mi">🗄️</span>净菜进柜</a>
|
||||
<a href="prod-proc-combo.html" class="sidebar-item"><span class="mi">🔪</span>净菜组配</a>
|
||||
<a href="prod-proc-cook.html" class="sidebar-item"><span class="mi">🍳</span>按单烹制</a>
|
||||
<a href="prod-proc-serve.html" class="sidebar-item"><span class="mi">🍽️</span>上餐监控</a>
|
||||
<a href="prod-proc-surplus.html" class="sidebar-item active"><span class="mi">♻️</span>余量处置</a>
|
||||
<a href="prod-proc-stats.html" class="sidebar-item"><span class="mi">📊</span>生产统计</a>
|
||||
</aside>
|
||||
|
||||
<div class="main">
|
||||
<div class="stats-row">
|
||||
<div class="stat-card"><div class="stat-card__icon orange">🗑️</div><div class="stat-card__info"><div class="stat-card__value">28kg</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">12kg</div><div class="stat-card__label">员工福利</div></div></div>
|
||||
<div class="stat-card"><div class="stat-card__icon blue">❤️</div><div class="stat-card__info"><div class="stat-card__value">8kg</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">8kg</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="date"></div>
|
||||
<div class="filter-item"><label>处置方式</label><select class="filter-select"><option>全部</option><option>员工福利</option><option>捐赠</option><option>废弃</option><option>加工再利用</option></select></div>
|
||||
<div class="filter-item"><label>食材/菜品</label><input class="filter-input" type="text" placeholder="请输入食材/菜品"></div>
|
||||
<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-primary"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 10v2h10v-2M7 2v7M4.5 6.5L7 9l2.5-2.5" stroke="#fff" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>导出列表数据</button>
|
||||
<button class="btn btn-default"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><rect x="2" y="2" width="10" height="10" rx="1.5" stroke="currentColor" stroke-width="1.4"/><path d="M4 5h6M4 7.5h4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>查看导出任务</button>
|
||||
<button class="btn btn-default">🔗 溯源查询</button>
|
||||
<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>计划制作量(kg)</th><th>实际制作量(kg)</th><th>销售/取餐量(kg)</th><th>余量(kg)</th><th>余量率(%)</th><th>处置方式</th><th>处置数量(kg)</th><th>交叉核对状态</th><th>处置时间</th><th>处置人员</th><th>操作</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td>SUR-001</td><td>宫保鸡丁</td><td>午餐</td><td>42.5</td><td>43.0</td><td>39.5</td><td>3.5</td><td>8.1%</td><td><a class="link">员工福利</a></td><td>2.0</td><td><span class="tag tag-green">正常</span></td><td>2026-04-22 14:00</td><td>张主管</td><td><a class="link">查看</a> <a class="link">编辑</a></td></tr>
|
||||
<tr><td>SUR-001</td><td>宫保鸡丁</td><td>午餐</td><td>42.5</td><td>43.0</td><td>39.5</td><td>3.5</td><td>8.1%</td><td>捐赠</td><td>1.5</td><td><span class="tag tag-green">正常</span></td><td>2026-04-22 14:00</td><td>张主管</td><td><a class="link">查看</a> <a class="link">编辑</a></td></tr>
|
||||
<tr><td>SUR-002</td><td>白米饭</td><td>午餐</td><td>60.0</td><td>62.0</td><td>54.0</td><td>8.0</td><td>12.9%</td><td>捐赠</td><td>5.0</td><td><span class="tag tag-green">正常</span></td><td>2026-04-22 14:00</td><td>张主管</td><td><a class="link">查看</a> <a class="link">编辑</a></td></tr>
|
||||
<tr><td>SUR-002</td><td>白米饭</td><td>午餐</td><td>60.0</td><td>62.0</td><td>54.0</td><td>8.0</td><td>12.9%</td><td><a class="link">员工福利</a></td><td>3.0</td><td><span class="tag tag-green">正常</span></td><td>2026-04-22 14:00</td><td>张主管</td><td><a class="link">查看</a> <a class="link">编辑</a></td></tr>
|
||||
<tr><td>SUR-003</td><td>番茄炒蛋</td><td>午餐</td><td>20.0</td><td>20.5</td><td>18.3</td><td>2.2</td><td>10.7%</td><td><a class="link">员工福利</a></td><td>2.2</td><td><span class="tag tag-green">正常</span></td><td>2026-04-22 14:30</td><td>张主管</td><td><a class="link">查看</a> <a class="link">编辑</a></td></tr>
|
||||
<tr><td>SUR-004</td><td>蒜蓉菠菜</td><td>午餐</td><td>15.0</td><td>14.8</td><td>10.0</td><td>4.8</td><td>32.4%</td><td>废弃</td><td>3.0</td><td><span class="tag tag-red">异常（损耗超标）</span></td><td>2026-04-22 15:00</td><td>李主管</td><td><a class="link">查看</a> <a class="link">编辑</a></td></tr>
|
||||
<tr><td>SUR-004</td><td>蒜蓉菠菜</td><td>午餐</td><td>15.0</td><td>14.8</td><td>10.0</td><td>4.8</td><td>32.4%</td><td>加工再利用</td><td>1.8</td><td><span class="tag tag-red">异常（损耗超标）</span></td><td>2026-04-22 15:00</td><td>李主管</td><td><a class="link">查看</a> <a class="link">编辑</a></td></tr>
|
||||
<tr><td>SUR-005</td><td>红烧肉</td><td>午餐</td><td>50.0</td><td>48.5</td><td>45.3</td><td>3.2</td><td>6.6%</td><td><a class="link">员工福利</a></td><td>3.2</td><td><span class="tag tag-green">正常</span></td><td>2026-04-22 14:45</td><td>张主管</td><td><a class="link">查看</a> <a class="link">编辑</a></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>显示 8 条，共 28 条</span>
|
||||
<button class="page-btn">‹</button>
|
||||
<button class="page-btn active">1</button>
|
||||
<button class="page-btn">2</button>
|
||||
<button class="page-btn">3</button>
|
||||
<button class="page-btn">›</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
<input type="text" placeholder="请输入菜品名称">
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<label>餐次<span class="required">*</span></label>
|
||||
<select><option>请选择</option><option>早餐</option><option>午餐</option><option>晚餐</option></select>
|
||||
</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>处置方式<span class="required">*</span></label>
|
||||
<select><option>请选择</option><option>员工福利</option><option>捐赠</option><option>废弃</option><option>加工再利用</option></select>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<label>处置数量(kg)<span class="required">*</span></label>
|
||||
<input type="number" placeholder="请输入处置数量">
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<label>处置人员<span class="required">*</span></label>
|
||||
<input type="text" placeholder="请输入处置人员">
|
||||
</div>
|
||||
<div class="form-item"></div>
|
||||
<div class="form-item full">
|
||||
<label>异常原因描述</label>
|
||||
<textarea placeholder="请输入异常原因描述"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="btn btn-default" onclick="closeModal()">取消</button>
|
||||
<button class="btn btn-primary">确定</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
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();});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,364 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>营养管理 - 食安监控 | 健康长庆原型</title>
|
||||
<style>
|
||||
*{box-sizing:border-box;margin:0;padding:0;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#F5F7FA;color:#333;min-width:1280px;}
|
||||
:root{
|
||||
--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;
|
||||
--text-primary:#333;--text-secondary:#666;--text-placeholder:#999;--border:#E8E8E8;--background:#F5F7FA;
|
||||
--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--font-xxl:24px;
|
||||
--radius-sm:4px;--radius-md:8px;--radius-lg:12px;
|
||||
--shadow-sm:0 1px 4px rgba(0,0,0,0.08);--shadow-md:0 4px 12px rgba(0,0,0,0.12);
|
||||
}
|
||||
.top-bar{display:flex;align-items:center;height:56px;background:#001529;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;}
|
||||
.top-bar__logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:var(--font-lg);font-weight:600;white-space:nowrap;width:240px;flex-shrink:0;}
|
||||
.top-bar__logo svg{width:28px;height:28px;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.top-bar__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.top-bar__right .btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.top-bar__right .btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);cursor:pointer;}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;text-transform:uppercase;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.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);}
|
||||
.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;}
|
||||
.stat-card__icon.blue{background:var(--primary-light);}
|
||||
.stat-card__icon.green{background:#F6FFED;}
|
||||
.stat-card__icon.orange{background:#FFF7E6;}
|
||||
.stat-card__icon.red{background:#FFF1F0;}
|
||||
.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-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;}
|
||||
.filter-input:focus{border-color:var(--primary);}
|
||||
.filter-select{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);color:var(--text-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='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;cursor:pointer;min-width:120px;}
|
||||
.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);}
|
||||
.tag-orange{background:#FFF7E6;color:var(--warning);}
|
||||
.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;}
|
||||
.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);}
|
||||
/* 视频监控网格 */
|
||||
.camera-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding:24px;background:#fff;border-radius:0 0 var(--radius-md) var(--radius-md);box-shadow:var(--shadow-sm);margin-bottom:16px;}
|
||||
.camera-card{border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden;}
|
||||
.camera-card__video{height:140px;background:#2a2a2a;display:flex;align-items:center;justify-content:center;color:#666;font-size:var(--font-sm);position:relative;}
|
||||
.camera-card__video .alarm-badge{position:absolute;top:8px;right:8px;background:var(--danger);color:#fff;padding:2px 8px;border-radius:10px;font-size:var(--font-xs);animation:pulse 1.5s infinite;}
|
||||
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.6;}}
|
||||
.camera-card__info{padding:12px;display:flex;flex-direction:column;gap:6px;}
|
||||
.camera-card__header{display:flex;justify-content:space-between;align-items:center;}
|
||||
.camera-card__id{font-size:var(--font-sm);font-weight:500;color:var(--text-primary);}
|
||||
.camera-card__location{font-size:var(--font-xs);color:var(--text-secondary);}
|
||||
.camera-card__alarm{font-size:var(--font-xs);color:var(--danger);margin-top:4px;}
|
||||
/* 能源仪表卡片 */
|
||||
.energy-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding:24px;background:#fff;border-radius:0 0 var(--radius-md) var(--radius-md);box-shadow:var(--shadow-sm);margin-bottom:16px;}
|
||||
.energy-card{border:1px solid var(--border);border-radius:var(--radius-md);padding:20px;position:relative;overflow:hidden;}
|
||||
.energy-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;}
|
||||
.energy-card.elec::before{background:#1677ff;}
|
||||
.energy-card.water::before{background:#13c2c2;}
|
||||
.energy-card.gas::before{background:#fa8c16;}
|
||||
.energy-card__header{display:flex;align-items:center;gap:8px;margin-bottom:12px;}
|
||||
.energy-card__icon{font-size:24px;}
|
||||
.energy-card__title{font-size:var(--font-base);font-weight:600;}
|
||||
.energy-card__meter{font-size:var(--font-xs);color:var(--text-placeholder);}
|
||||
.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-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);}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- 顶部导航栏 -->
|
||||
<header class="top-bar">
|
||||
<div class="top-bar__logo">
|
||||
<svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M7 14h14M14 7v14" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/></svg>
|
||||
营养管理
|
||||
</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="trace-query.html">溯源总览</a>
|
||||
<a href="arc-employee.html">档案</a>
|
||||
<a href="farm-land.html">绿色种采</a>
|
||||
<a href="sup-hygiene-check.html">卫生供应</a>
|
||||
<a href="prod-qc-daily.html" class="active">健康生产</a>
|
||||
<a href="din-dict-mgmt.html">营养用餐</a>
|
||||
<a href="ano-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<a href="../../index.html" class="btn-back">← 返回首页</a>
|
||||
<div class="avatar">管</div>
|
||||
<span>系统管理员 ▾</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- 侧边栏 -->
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">健康生产</div>
|
||||
<a href="prod-qc-daily.html" class="sidebar-item active"><span class="mi">🛡️</span>食安监控</a>
|
||||
<a href="prod-recipe-plan.html" class="sidebar-item"><span class="mi">📋</span>食谱规划</a>
|
||||
<a href="prod-clean-order.html" class="sidebar-item"><span class="mi">📝</span>净菜订单</a>
|
||||
<a href="prod-proc-cabinet.html" class="sidebar-item"><span class="mi">🗄️</span>净菜进柜</a>
|
||||
<a href="prod-proc-combo.html" class="sidebar-item"><span class="mi">🔪</span>净菜组配</a>
|
||||
<a href="prod-proc-cook.html" class="sidebar-item"><span class="mi">🍳</span>按单烹制</a>
|
||||
<a href="prod-proc-serve.html" class="sidebar-item"><span class="mi">🍽️</span>上餐监控</a>
|
||||
<a href="prod-proc-surplus.html" class="sidebar-item"><span class="mi">♻️</span>余量处置</a>
|
||||
<a href="prod-proc-stats.html" class="sidebar-item"><span class="mi">📊</span>生产统计</a>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容 -->
|
||||
<main class="main">
|
||||
<!-- 统计卡片 -->
|
||||
<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>
|
||||
<div class="stat-card"><div class="stat-card__icon red">⚠️</div><div class="stat-card__info"><div class="stat-card__value">5次</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">2项</div><div class="stat-card__label">环境告警</div></div></div>
|
||||
<div class="stat-card"><div class="stat-card__icon blue">🧪</div><div class="stat-card__info"><div class="stat-card__value">15条</div><div class="stat-card__label">留样记录</div></div></div>
|
||||
</div>
|
||||
|
||||
<!-- 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>
|
||||
|
||||
<!-- Tab1: 食安视频 -->
|
||||
<div class="tab-panel active">
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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></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></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></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></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></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></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></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><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>
|
||||
<div class="filter-item"><label>消防设施状态</label><select class="filter-select"><option>全部</option><option>正常</option><option>异常</option></select></div>
|
||||
<div class="filter-item"><label>污废处理状态</label><select class="filter-select"><option>全部</option><option>正常</option><option>预警</option><option>异常</option></select></div>
|
||||
<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>天然气浓度(ppm)</th><th>天然气状态</th><th>消防设施</th><th>温度/湿度</th><th>污废处理状态</th><th>行为安全</th><th>最近检查</th><th>操作</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td>炒菜区</td><td>0.02</td><td><span class="tag tag-green">正常</span></td><td><span class="tag tag-green">正常</span></td><td>28.6℃ / 62%</td><td><span class="tag tag-green">正常</span></td><td><span class="tag tag-green">正常</span></td><td>2026-04-22 11:00</td><td><span class="link">详情</span></td></tr>
|
||||
<tr><td>冷库区</td><td>—</td><td><span class="tag tag-green">正常</span></td><td><span class="tag tag-green">正常</span></td><td>4.1℃ / 85%</td><td><span class="tag tag-green">正常</span></td><td><span class="tag tag-green">正常</span></td><td>2026-04-22 11:00</td><td><span class="link">详情</span></td></tr>
|
||||
<tr><td>粗加工间</td><td>0.01</td><td><span class="tag tag-green">正常</span></td><td><span class="tag tag-green">正常</span></td><td>22.4℃ / 68%</td><td><span class="tag tag-green">正常</span></td><td><span class="tag tag-green">正常</span></td><td>2026-04-22 10:30</td><td><span class="link">详情</span></td></tr>
|
||||
<tr><td>备餐区</td><td>0.03</td><td><span class="tag tag-orange">告警</span></td><td><span class="tag tag-green">正常</span></td><td>24.8℃ / 71%</td><td><span class="tag tag-orange">预警</span></td><td><span class="tag tag-orange">告警</span></td><td>2026-04-22 10:00</td><td><span class="link">详情</span></td></tr>
|
||||
<tr><td>洗碗间</td><td>—</td><td><span class="tag tag-green">正常</span></td><td><span class="tag tag-red">异常</span></td><td>26.2℃ / 78%</td><td><span class="tag tag-red">异常</span></td><td><span class="tag tag-green">正常</span></td><td>2026-04-21 18:00</td><td><span class="link">详情</span></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><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>
|
||||
<button class="btn btn-default">重置</button>
|
||||
</div>
|
||||
<div class="action-bar"><button class="btn btn-primary">➕ 新增留样</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>到期时间(48h)</th><th>留样柜编号</th><th>留样状态</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td>糖醋里脊</td><td>127g</td><td>2026-04-20 03:53</td><td>2026-04-24 12:32</td><td>留样柜3-1</td><td><span class="tag tag-blue">留样中</span></td></tr>
|
||||
<tr><td>蒜蓉西兰花</td><td>203g</td><td>2026-04-20 14:54</td><td>2026-04-24 01:04</td><td>留样柜2-9</td><td><span class="tag tag-gray">已销毁</span></td></tr>
|
||||
<tr><td>鱼香肉丝</td><td>169g</td><td>2026-04-20 15:41</td><td>2026-04-24 23:56</td><td>留样柜3-2</td><td><span class="tag tag-blue">留样中</span></td></tr>
|
||||
<tr><td>红烧肉</td><td>159g</td><td>2026-04-23 11:49</td><td>2026-04-24 05:45</td><td>留样柜3-2</td><td><span class="tag tag-gray">已销毁</span></td></tr>
|
||||
<tr><td>宫保鸡丁</td><td>125g</td><td>2026-04-22 20:23</td><td>2026-04-24 17:28</td><td>留样柜2-7</td><td><span class="tag tag-blue">留样中</span></td></tr>
|
||||
<tr><td>清炒时蔬</td><td>149g</td><td>2026-04-19 23:29</td><td>2026-04-24 02:48</td><td>留样柜1-8</td><td><span class="tag tag-blue">留样中</span></td></tr>
|
||||
<tr><td>鱼香肉丝</td><td>167g</td><td>2026-04-16 19:56</td><td>2026-04-24 17:44</td><td>留样柜3-3</td><td><span class="tag tag-gray">已销毁</span></td></tr>
|
||||
<tr><td>蒜蓉西兰花</td><td>164g</td><td>2026-04-16 10:14</td><td>2026-04-24 17:26</td><td>留样柜2-10</td><td><span class="tag tag-blue">留样中</span></td></tr>
|
||||
<tr><td>宫保鸡丁</td><td>138g</td><td>2026-04-16 17:47</td><td>2026-04-24 19:32</td><td>留样柜3-9</td><td><span class="tag tag-blue">留样中</span></td></tr>
|
||||
<tr><td>麻婆豆腐</td><td>177g</td><td>2026-04-18 06:22</td><td>2026-04-24 20:38</td><td>留样柜2-7</td><td><span class="tag tag-blue">留样中</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tab4: 健康证管理 -->
|
||||
<div class="tab-panel">
|
||||
<div class="filter-bar">
|
||||
<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>有效</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-default">🔔 发送到期提醒</button></div>
|
||||
<div class="table-card">
|
||||
<div class="table-card__header"><div class="table-card__title">健康证管理</div></div>
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead><tr><th>人员编号</th><th>姓名</th><th>岗位</th><th>工作区域</th><th>人员照片</th><th>健康证编号</th><th>证件照片</th><th>发证日期</th><th>有效期至</th><th>有效期状态</th><th>操作</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td>EMP001</td><td>张伟</td><td>厨师</td><td>A区厨房</td><td><a class="link">📷 查看</a></td><td>HC-2025-00128</td><td><a class="link">📷 查看</a></td><td>2025-05-10</td><td>2026-05-09</td><td><span class="tag tag-orange">即将到期</span></td><td><span class="link">编辑</span></td></tr>
|
||||
<tr><td>EMP002</td><td>李娜</td><td>配餐员</td><td>B区厨房</td><td><a class="link">📷 查看</a></td><td>HC-2025-00176</td><td><a class="link">📷 查看</a></td><td>2025-09-12</td><td>2026-09-11</td><td><span class="tag tag-green">有效</span></td><td><span class="link">编辑</span></td></tr>
|
||||
<tr><td>EMP003</td><td>王磊</td><td>洗碗工</td><td>C区后厨</td><td><a class="link">📷 查看</a></td><td>HC-2024-00302</td><td><a class="link">📷 查看</a></td><td>2024-03-01</td><td>2025-02-28</td><td><span class="tag tag-red">已过期</span></td><td><span class="link">编辑</span></td></tr>
|
||||
<tr><td>EMP004</td><td>赵敏</td><td>厨师</td><td>A区厨房</td><td><a class="link">📷 查看</a></td><td>HC-2025-00211</td><td><a class="link">📷 查看</a></td><td>2025-11-18</td><td>2026-11-17</td><td><span class="tag tag-green">有效</span></td><td><span class="link">编辑</span></td></tr>
|
||||
<tr><td>EMP005</td><td>陈刚</td><td>分拣员</td><td>B区后厨</td><td><a class="link">📷 查看</a></td><td>HC-2025-00089</td><td><a class="link">📷 查看</a></td><td>2025-04-20</td><td>2026-04-19</td><td><span class="tag tag-orange">即将到期</span></td><td><span class="link">编辑</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tab5: 水电气表 -->
|
||||
<div class="tab-panel">
|
||||
<div class="action-bar"><button class="btn btn-primary">📅 查看历史用量</button><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__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__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__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__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__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__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="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>用电量(kWh)</th><th>电费(元)</th><th>用水量(m³)</th><th>水费(元)</th><th>用气量(m³)</th><th>气费(元)</th><th>合计能耗成本(元)</th><th>分摊每份餐(元)</th><th>操作</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td>2026-05-07</td><td>372</td><td>¥334.8</td><td>40</td><td>¥144.0</td><td>120</td><td>¥750.0</td><td>¥1,228.8</td><td>¥0.83</td><td><span class="link">详情</span></td></tr>
|
||||
<tr><td>2026-05-06</td><td>398</td><td>¥358.2</td><td>45</td><td>¥162.0</td><td>130</td><td>¥812.5</td><td>¥1,332.7</td><td>¥0.89</td><td><span class="link">详情</span></td></tr>
|
||||
<tr><td>2026-05-05</td><td>386</td><td>¥347.4</td><td>42</td><td>¥151.2</td><td>126</td><td>¥787.5</td><td>¥1,286.1</td><td>¥0.86</td><td><span class="link">详情</span></td></tr>
|
||||
<tr><td>2026-05-04</td><td>362</td><td>¥325.8</td><td>38</td><td>¥136.8</td><td>115</td><td>¥718.8</td><td>¥1,181.4</td><td>¥0.81</td><td><span class="link">详情</span></td></tr>
|
||||
<tr><td>2026-05-03</td><td>405</td><td>¥364.5</td><td>46</td><td>¥165.6</td><td>132</td><td>¥825.0</td><td>¥1,355.1</td><td>¥0.91</td><td><span class="link">详情</span></td></tr>
|
||||
<tr><td>2026-05-02</td><td>380</td><td>¥342.0</td><td>41</td><td>¥147.6</td><td>122</td><td>¥762.5</td><td>¥1,252.1</td><td>¥0.85</td><td><span class="link">详情</span></td></tr>
|
||||
<tr><td>2026-05-01</td><td>358</td><td>¥322.2</td><td>36</td><td>¥129.6</td><td>110</td><td>¥687.5</td><td>¥1,139.3</td><td>¥0.79</td><td><span class="link">详情</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<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));
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,371 @@
|
||||
<!DOCTYPE html>
|
||||
<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;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#F5F7FA;color:#333;min-width:1280px;}
|
||||
:root{
|
||||
--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;
|
||||
--text-primary:#333;--text-secondary:#666;--text-placeholder:#999;--border:#E8E8E8;--background:#F5F7FA;
|
||||
--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--font-xxl:24px;
|
||||
--radius-sm:4px;--radius-md:8px;--radius-lg:12px;
|
||||
--shadow-sm:0 1px 4px rgba(0,0,0,0.08);--shadow-md:0 4px 12px rgba(0,0,0,0.12);
|
||||
}
|
||||
|
||||
/* 通用布局 */
|
||||
.top-bar{display:flex;align-items:center;height:56px;background:#001529;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;}
|
||||
.top-bar__logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:var(--font-lg);font-weight:600;white-space:nowrap;width:240px;flex-shrink:0;}
|
||||
.top-bar__logo svg{width:28px;height:28px;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.top-bar__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.top-bar__right .btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.top-bar__right .btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);cursor:pointer;}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;text-transform:uppercase;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.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;}
|
||||
${CSS_RULE}
|
||||
.sidebar-subgroup__header{display:flex;align-items:center;gap:6px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;user-select:none;}
|
||||
.sidebar-subgroup__header:hover{color:rgba(255,255,255,0.85);background:rgba(255,255,255,0.04);}
|
||||
.sidebar-subgroup__header .arrow{width:10px;height:10px;transition:transform .2s;flex-shrink:0;}
|
||||
.sidebar-subgroup__header .arrow path{stroke:rgba(255,255,255,0.45);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header{color:rgba(255,255,255,0.85);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header .arrow{transform:rotate(90deg);}
|
||||
.sidebar-subgroup__body{display:none;padding-left:16px;}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__body{display:block;}
|
||||
.sidebar-subgroup__body .sidebar-item{padding-left:36px;font-size:12px;}
|
||||
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;min-height:calc(100vh - 56px);}
|
||||
.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;}
|
||||
.stat-card__icon.blue{background:var(--primary-light);}
|
||||
.stat-card__icon.green{background:#F6FFED;}
|
||||
.stat-card__icon.orange{background:#FFF7E6;}
|
||||
.stat-card__icon.red{background:#FFF1F0;}
|
||||
.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);}
|
||||
.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:200px;}
|
||||
.filter-input:focus{border-color:var(--primary);}
|
||||
.filter-select{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);color:var(--text-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='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;cursor:pointer;min-width:120px;}
|
||||
.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;}
|
||||
.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);}
|
||||
.tag-orange{background:#FFF7E6;color:var(--warning);}
|
||||
.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;}
|
||||
.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);}
|
||||
|
||||
/* Tab 切换 */
|
||||
.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;}
|
||||
.action-bar{display:flex;align-items:center;gap:8px;margin-bottom:16px;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- 顶部导航 -->
|
||||
<header class="top-bar">
|
||||
<div class="top-bar__logo">
|
||||
<svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M7 14h14M14 7v14" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/></svg>
|
||||
营养管理
|
||||
</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="trace-query.html">溯源总览</a>
|
||||
<a href="arc-employee.html">档案</a>
|
||||
<a href="farm-land.html">绿色种采</a>
|
||||
<a href="sup-hygiene-check.html">卫生供应</a>
|
||||
<a href="prod-qc-daily.html">健康生产</a>
|
||||
<a href="din-dict-mgmt.html" class="active">营养用餐</a>
|
||||
<a href="ano-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<a class="btn-back" href="../../index.html">← 返回首页</a>
|
||||
<div class="avatar">管</div>
|
||||
<span>系统管理员 ▾</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- 侧边栏 -->
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">营养用餐</div>
|
||||
<a href="din-dict-mgmt.html" class="sidebar-item"><span class="mi">📖</span>字典管理</a>
|
||||
<a href="prod-qc-nutrition.html" class="sidebar-item active"><span class="mi">🔬</span>营养检验</a>
|
||||
<a href="din-ingredient.html" class="sidebar-item"><span class="mi">🥦</span>食物成分</a>
|
||||
<a href="din-dish-all.html" class="sidebar-item"><span class="mi">🍲</span>餐品总库</a>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 10 10" fill="none"><path d="M3 1l4 4-4 4" stroke-width="1.5"/></svg>
|
||||
📐 算法标准
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="din-algo-population.html" class="sidebar-item"><span class="mi">👥</span>人群基础标准</a>
|
||||
<a href="din-algo-vip.html" class="sidebar-item"><span class="mi">💎</span>VIP定制标准</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="din-recipe-mgmt.html" class="sidebar-item"><span class="mi">📋</span>食谱管理</a>
|
||||
<a href="din-order-meal.html" class="sidebar-item"><span class="mi">🛒</span>营养点餐</a>
|
||||
<a href="din-user-mgmt.html" class="sidebar-item"><span class="mi">🧑</span>用户管理</a>
|
||||
<a href="din-order-line.html" class="sidebar-item"><span class="mi">⚖️</span>餐线管理</a>
|
||||
<a href="din-order-pickup.html" class="sidebar-item"><span class="mi">🍽️</span>取餐管理</a>
|
||||
<a href="din-data-consume.html" class="sidebar-item"><span class="mi">💰</span>消费管理</a>
|
||||
<a href="din-data-nutri.html" class="sidebar-item"><span class="mi">📊</span>营养管理</a>
|
||||
<a href="din-data-benefit.html" class="sidebar-item"><span class="mi">📈</span>餐材效益</a>
|
||||
<a href="din-terminal.html" class="sidebar-item"><span class="mi">🖥️</span>终端管理</a>
|
||||
<div class="sidebar-subgroup">
|
||||
<div class="sidebar-subgroup__header" onclick="toggleSubgroup(this)">
|
||||
<svg class="arrow" viewBox="0 0 10 10" fill="none"><path d="M3 1l4 4-4 4" stroke-width="1.5"/></svg>
|
||||
🤖 模型管理
|
||||
</div>
|
||||
<div class="sidebar-subgroup__body">
|
||||
<a href="din-model-llm.html" class="sidebar-item"><span class="mi">🧠</span>大模型管理</a>
|
||||
<a href="din-model-small.html" class="sidebar-item"><span class="mi">⚙️</span>小模型管理</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="din-innovation.html" class="sidebar-item"><span class="mi">🌟</span>味养创新</a>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容区 -->
|
||||
<div class="main">
|
||||
|
||||
<!-- 统计卡片 -->
|
||||
<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">48</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">44</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">4</div>
|
||||
<div class="stat-card__label">偏差/待改进</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-card__icon blue">🔄</div>
|
||||
<div class="stat-card__info">
|
||||
<div class="stat-card__value">6条</div>
|
||||
<div class="stat-card__label">待同步均值</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 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>
|
||||
|
||||
<!-- Tab1: 营养检验 -->
|
||||
<div class="tab-panel active">
|
||||
<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>达标</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-default">🔄 同步均值→餐品库</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>热量(kcal/100g)</th><th>蛋白质(g)</th><th>碳水(g)</th><th>脂肪(g)</th><th>维生素C(mg)</th><th>矿物质(mg)</th><th>微量元素备注</th><th>检验结果</th><th>均值同步状态</th><th>操作</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>NUT-N001</td><td>红烧肉</td><td>2026-04-22 14:30</td><td>295</td><td>14.2</td><td>8.6</td><td>22.1</td><td>0.8</td><td>86</td><td>铁2.4mg</td><td><span class="tag tag-green">达标</span></td><td><span class="tag tag-blue">已同步</span></td><td><a class="link">查看</a> <a class="link">编辑</a></td></tr>
|
||||
<tr><td>NUT-N002</td><td>清炒时蔬</td><td>2026-04-22 14:35</td><td>42</td><td>2.1</td><td>5.8</td><td>1.2</td><td>18.6</td><td>42</td><td>钾220mg</td><td><span class="tag tag-orange">偏差</span></td><td><span class="tag tag-orange">待同步</span></td><td><a class="link">查看</a> <a class="link">编辑</a></td></tr>
|
||||
<tr><td>NUT-N003</td><td>番茄鸡蛋汤</td><td>2026-04-22 14:40</td><td>38</td><td>3.2</td><td>3.4</td><td>1.8</td><td>12.4</td><td>54</td><td>—</td><td><span class="tag tag-green">达标</span></td><td><span class="tag tag-blue">已同步</span></td><td><a class="link">查看</a> <a class="link">编辑</a></td></tr>
|
||||
<tr><td>NUT-N004</td><td>宫保鸡丁</td><td>2026-04-21 15:00</td><td>186</td><td>18.2</td><td>8.1</td><td>9.4</td><td>2.1</td><td>94</td><td>锌1.8mg</td><td><span class="tag tag-green">达标</span></td><td><span class="tag tag-orange">待同步</span></td><td><a class="link">查看</a> <a class="link">编辑</a></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>显示 4 条，共 48 条</span>
|
||||
<button class="page-btn">‹</button>
|
||||
<button class="page-btn active">1</button>
|
||||
<button class="page-btn">2</button>
|
||||
<button class="page-btn">3</button>
|
||||
<button class="page-btn">›</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tab2: 味道检验 -->
|
||||
<div class="tab-panel">
|
||||
<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>优秀</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-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>酸度(1-5)</th><th>甜度(1-5)</th><th>苦度(1-5)</th><th>辣度(1-5)</th><th>咸度(1-5)</th><th>气味评分(1-5)</th><th>综合风味评分</th><th>综合评级</th><th>均值同步状态</th><th>操作</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>NUT-T001</td><td>红烧肉</td><td>2026-04-22 14:32</td><td>1</td><td>3</td><td>1</td><td>1</td><td>4</td><td>4.2</td><td>4.0</td><td><span class="tag tag-green">优秀</span></td><td><span class="tag tag-orange">待同步</span></td><td><a class="link">查看</a> <a class="link">编辑</a></td></tr>
|
||||
<tr><td>NUT-T002</td><td>清炒时蔬</td><td>2026-04-22 14:37</td><td>1</td><td>1</td><td>1</td><td>1</td><td>2</td><td>3.8</td><td>3.5</td><td><span class="tag tag-blue">良好</span></td><td><span class="tag tag-orange">待同步</span></td><td><a class="link">查看</a> <a class="link">编辑</a></td></tr>
|
||||
<tr><td>NUT-T003</td><td>番茄鸡蛋汤</td><td>2026-04-22 14:42</td><td>2</td><td>2</td><td>1</td><td>1</td><td>3</td><td>4.0</td><td>3.8</td><td><span class="tag tag-blue">良好</span></td><td><span class="tag tag-blue">已同步</span></td><td><a class="link">查看</a> <a class="link">编辑</a></td></tr>
|
||||
<tr><td>NUT-T004</td><td>宫保鸡丁</td><td>2026-04-21 15:05</td><td>1</td><td>2</td><td>1</td><td>4</td><td>3</td><td>4.5</td><td>4.2</td><td><span class="tag tag-green">优秀</span></td><td><span class="tag tag-orange">待同步</span></td><td><a class="link">查看</a> <a class="link">编辑</a></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>显示 4 条，共 48 条</span>
|
||||
<button class="page-btn">‹</button>
|
||||
<button class="page-btn active">1</button>
|
||||
<button class="page-btn">2</button>
|
||||
<button class="page-btn">3</button>
|
||||
<button class="page-btn">›</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tab3: 口感检验 -->
|
||||
<div class="tab-panel">
|
||||
<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>优秀</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-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>软硬度(1-5)</th><th>黏糯度(1-5)</th><th>酥脆度(1-5)</th><th>嫩滑度(1-5)</th><th>弹性(1-5)</th><th>综合口感评分</th><th>综合评级</th><th>均值同步状态</th><th>操作</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>NUT-K001</td><td>红烧肉</td><td>2026-04-22 14:34</td><td>4</td><td>3</td><td>1</td><td>4</td><td>3</td><td>3.8</td><td><span class="tag tag-blue">良好</span></td><td><span class="tag tag-orange">待同步</span></td><td><a class="link">查看</a> <a class="link">编辑</a></td></tr>
|
||||
<tr><td>NUT-K002</td><td>清炒时蔬</td><td>2026-04-22 14:38</td><td>3</td><td>1</td><td>3</td><td>3</td><td>2</td><td>3.2</td><td><span class="tag tag-blue">良好</span></td><td><span class="tag tag-orange">待同步</span></td><td><a class="link">查看</a> <a class="link">编辑</a></td></tr>
|
||||
<tr><td>NUT-K003</td><td>番茄鸡蛋汤</td><td>2026-04-22 14:44</td><td>2</td><td>2</td><td>1</td><td>4</td><td>2</td><td>3.5</td><td><span class="tag tag-blue">良好</span></td><td><span class="tag tag-blue">已同步</span></td><td><a class="link">查看</a> <a class="link">编辑</a></td></tr>
|
||||
<tr><td>NUT-K004</td><td>宫保鸡丁</td><td>2026-04-21 15:08</td><td>3</td><td>2</td><td>3</td><td>4</td><td>3</td><td>4.0</td><td><span class="tag tag-green">优秀</span></td><td><span class="tag tag-orange">待同步</span></td><td><a class="link">查看</a> <a class="link">编辑</a></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>显示 4 条，共 48 条</span>
|
||||
<button class="page-btn">‹</button>
|
||||
<button class="page-btn active">1</button>
|
||||
<button class="page-btn">2</button>
|
||||
<button class="page-btn">3</button>
|
||||
<button class="page-btn">›</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tab4: 色泽检验 -->
|
||||
<div class="tab-panel">
|
||||
<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>优秀</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-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>色泽均匀度(1-5)</th><th>光泽度(1-5)</th><th>新鲜度(1-5)</th><th>卖相评分(1-5)</th><th>综合色泽评分</th><th>综合评级</th><th>均值同步状态</th><th>操作</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>NUT-C001</td><td>红烧肉</td><td>2026-04-22 14:36</td><td>深红褐色</td><td>4</td><td>3</td><td>4</td><td>4</td><td>3.8</td><td><span class="tag tag-blue">良好</span></td><td><span class="tag tag-orange">待同步</span></td><td><a class="link">查看</a> <a class="link">编辑</a></td></tr>
|
||||
<tr><td>NUT-C002</td><td>清炒时蔬</td><td>2026-04-22 14:39</td><td>翠绿色</td><td>5</td><td>4</td><td>5</td><td>5</td><td>4.8</td><td><span class="tag tag-green">优秀</span></td><td><span class="tag tag-orange">待同步</span></td><td><a class="link">查看</a> <a class="link">编辑</a></td></tr>
|
||||
<tr><td>NUT-C003</td><td>番茄鸡蛋汤</td><td>2026-04-22 14:45</td><td>橙红色</td><td>4</td><td>3</td><td>4</td><td>4</td><td>3.8</td><td><span class="tag tag-blue">良好</span></td><td><span class="tag tag-blue">已同步</span></td><td><a class="link">查看</a> <a class="link">编辑</a></td></tr>
|
||||
<tr><td>NUT-C004</td><td>宫保鸡丁</td><td>2026-04-21 15:10</td><td>红棕色</td><td>4</td><td>4</td><td>4</td><td>4</td><td>4.0</td><td><span class="tag tag-green">优秀</span></td><td><span class="tag tag-orange">待同步</span></td><td><a class="link">查看</a> <a class="link">编辑</a></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>显示 4 条，共 48 条</span>
|
||||
<button class="page-btn">‹</button>
|
||||
<button class="page-btn active">1</button>
|
||||
<button class="page-btn">2</button>
|
||||
<button class="page-btn">3</button>
|
||||
<button class="page-btn">›</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- 交互脚本 -->
|
||||
<script>
|
||||
// 折叠/展开子分组
|
||||
function toggleSubgroup(header){header.parentElement.classList.toggle('open');}
|
||||
// 初始化：若当前激活项在子分组内，展开其父分组
|
||||
(function(){var active=document.querySelector('.sidebar-item.active');if(!active)return;var sub=active.closest('.sidebar-subgroup');if(sub)sub.classList.add('open');})();
|
||||
// Tab 切换
|
||||
function switchTab(idx){
|
||||
document.querySelectorAll('.page-tab').forEach(function(t,i){t.classList.toggle('active',i===idx);});
|
||||
document.querySelectorAll('.tab-panel').forEach(function(p,i){p.classList.toggle('active',i===idx);});
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,155 @@
|
||||
<!DOCTYPE html>
|
||||
<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;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:rgba(0,0,0,0.45);margin:0;display:flex;align-items:center;justify-content:center;min-height:100vh;}
|
||||
:root{
|
||||
--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;
|
||||
--text-primary:#333;--text-secondary:#666;--text-placeholder:#999;--border:#E8E8E8;
|
||||
--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;
|
||||
--radius-sm:4px;--radius-md:8px;--radius-lg:12px;
|
||||
--shadow-md:0 4px 12px rgba(0,0,0,0.12);
|
||||
}
|
||||
/* 弹窗容器 */
|
||||
.dialog{background:#fff;border-radius:var(--radius-lg);width:680px;max-width:90vw;box-shadow:var(--shadow-md);}
|
||||
.dialog__header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px 16px;border-bottom:1px solid var(--border);}
|
||||
.dialog__title{font-size:var(--font-lg);font-weight:600;color:var(--text-primary);}
|
||||
.dialog__close{width:32px;height:32px;border:none;background:none;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);color:var(--text-placeholder);}
|
||||
.dialog__close:hover{background:#F5F5F5;color:var(--text-primary);}
|
||||
.dialog__body{padding:24px;max-height:70vh;overflow-y:auto;}
|
||||
/* 表单元素 */
|
||||
.form-group{margin-bottom:20px;}
|
||||
.form-group label{display:block;font-size:var(--font-sm);color:var(--text-primary);margin-bottom:8px;font-weight:500;}
|
||||
.form-group label .required{color:var(--danger);margin-left:2px;}
|
||||
.form-input{width:100%;height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);outline:none;}
|
||||
.form-input:focus{border-color:var(--primary);}
|
||||
.form-select{width:100%;height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);outline:none;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 12px center;}
|
||||
.form-textarea{width:100%;height:80px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:8px 12px;font-size:var(--font-sm);outline:none;resize:vertical;font-family:inherit;}
|
||||
.form-textarea:focus{border-color:var(--primary);}
|
||||
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
|
||||
.dialog__footer{display:flex;justify-content:flex-end;gap:8px;padding:16px 24px;border-top:1px solid var(--border);}
|
||||
.btn{height:36px;padding:0 20px;border-radius:var(--radius-sm);font-size:var(--font-sm);cursor:pointer;border:none;transition:all .2s;}
|
||||
.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);}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- 新建规划弹窗 -->
|
||||
<div class="dialog">
|
||||
<div class="dialog__header">
|
||||
<div class="dialog__title">新建规划</div>
|
||||
<button class="dialog__close" onclick="window.close()">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M1 1l12 12M13 1L1 13" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="dialog__body">
|
||||
<!-- 第1行：日期 / 餐次 -->
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label>日期<span class="required">*</span></label>
|
||||
<input class="form-input" type="date">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>餐次</label>
|
||||
<select class="form-select">
|
||||
<option>请选择</option>
|
||||
<option>早餐</option>
|
||||
<option>午餐</option>
|
||||
<option>晚餐</option>
|
||||
<option>加餐</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 第2行：规划人数 / 预计出餐时间 -->
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label>规划人数<span class="required">*</span></label>
|
||||
<input class="form-input" type="number" placeholder="请输入规划人数">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>预计出餐时间<span class="required">*</span></label>
|
||||
<input class="form-input" type="text" placeholder="如：11:30 前">
|
||||
</div>
|
||||
</div>
|
||||
<!-- 第3行：预计烹饪时长 / 主食 -->
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label>预计烹饪时长(分钟)<span class="required">*</span></label>
|
||||
<input class="form-input" type="number" placeholder="请输入预计烹饪时长">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>主食<span class="required">*</span></label>
|
||||
<input class="form-input" type="text" placeholder="请输入主食">
|
||||
</div>
|
||||
</div>
|
||||
<!-- 第4行：荤菜 / 素菜 -->
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label>荤菜</label>
|
||||
<input class="form-input" type="text" placeholder="请输入荤菜">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>素菜</label>
|
||||
<input class="form-input" type="text" placeholder="请输入素菜">
|
||||
</div>
|
||||
</div>
|
||||
<!-- 第5行：汤类 / 餐品库来源 -->
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label>汤类</label>
|
||||
<input class="form-input" type="text" placeholder="请输入汤类">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>餐品库来源<span class="required">*</span></label>
|
||||
<select class="form-select">
|
||||
<option>请选择</option>
|
||||
<option>餐品总库</option>
|
||||
<option>自定义餐品库</option>
|
||||
<option>混合</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 第6行：关联餐品库 / 净菜需求量 -->
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label>关联餐品库</label>
|
||||
<input class="form-input" type="text" placeholder="如：标准菜品库A / 低脂菜品库">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>净菜需求量(kg)</label>
|
||||
<input class="form-input" type="number" placeholder="请输入净菜需求量">
|
||||
</div>
|
||||
</div>
|
||||
<!-- 第7行：安全评估结论（半行） -->
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label>安全评估结论</label>
|
||||
<select class="form-select">
|
||||
<option>请选择</option>
|
||||
<option>通过</option>
|
||||
<option>待复核</option>
|
||||
<option>不通过</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group"></div>
|
||||
</div>
|
||||
<!-- 食材清单（整行） -->
|
||||
<div class="form-group">
|
||||
<label>食材清单</label>
|
||||
<textarea class="form-textarea" placeholder="如：鸡胸肉、菠菜、番茄（逗号分隔）"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dialog__footer">
|
||||
<button class="btn btn-default" onclick="window.close()">取消</button>
|
||||
<button class="btn btn-primary">确定</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,249 @@
|
||||
<!DOCTYPE html>
|
||||
<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;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#F5F7FA;color:#333;min-width:1280px;}
|
||||
:root{
|
||||
--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;
|
||||
--text-primary:#333;--text-secondary:#666;--text-placeholder:#999;--border:#E8E8E8;--background:#F5F7FA;
|
||||
--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--font-xxl:24px;
|
||||
--radius-sm:4px;--radius-md:8px;--radius-lg:12px;
|
||||
--shadow-sm:0 1px 4px rgba(0,0,0,0.08);--shadow-md:0 4px 12px rgba(0,0,0,0.12);
|
||||
}
|
||||
|
||||
/* 通用布局 */
|
||||
.top-bar{display:flex;align-items:center;height:56px;background:#001529;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;}
|
||||
.top-bar__logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:var(--font-lg);font-weight:600;white-space:nowrap;width:240px;flex-shrink:0;}
|
||||
.top-bar__logo svg{width:28px;height:28px;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.top-bar__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.top-bar__right .btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.top-bar__right .btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);cursor:pointer;}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;text-transform:uppercase;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.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);}
|
||||
.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:200px;}
|
||||
.filter-input:focus{border-color:var(--primary);}
|
||||
.filter-select{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);color:var(--text-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='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;cursor:pointer;min-width:120px;}
|
||||
.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);}
|
||||
.btn-danger{background:#fff;color:var(--danger);border:1px solid var(--danger);}.btn-danger:hover{background:#fff1f0;}
|
||||
.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;}
|
||||
.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);}
|
||||
.tag-orange{background:#FFF7E6;color:var(--warning);}
|
||||
.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;}
|
||||
.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);}
|
||||
|
||||
/* 统计卡片 */
|
||||
.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;}
|
||||
.stat-card__icon.blue{background:var(--primary-light);}
|
||||
.stat-card__icon.green{background:#F6FFED;}
|
||||
.stat-card__icon.orange{background:#FFF7E6;}
|
||||
.stat-card__icon.red{background:#FFF1F0;}
|
||||
.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);}
|
||||
|
||||
/* 操作栏 */
|
||||
.action-bar{display:flex;align-items:center;gap:8px;margin-bottom:16px;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- 顶部导航 -->
|
||||
<header class="top-bar">
|
||||
<div class="top-bar__logo">
|
||||
<svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M7 14h14M14 7v14" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/></svg>
|
||||
营养管理
|
||||
</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="trace-query.html">溯源总览</a>
|
||||
<a href="arc-employee.html">档案</a>
|
||||
<a href="farm-land.html">绿色种采</a>
|
||||
<a href="sup-hygiene-check.html">卫生供应</a>
|
||||
<a href="prod-qc-daily.html" class="active">健康生产</a>
|
||||
<a href="din-dict-mgmt.html">营养用餐</a>
|
||||
<a href="ano-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<a class="btn-back" href="../../index.html">← 返回首页</a>
|
||||
<div class="avatar">管</div>
|
||||
<span>系统管理员 ▾</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- 侧边栏 -->
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">健康生产</div>
|
||||
<a href="prod-qc-daily.html" class="sidebar-item"><span class="mi">🛡️</span>食安监控</a>
|
||||
<a href="prod-recipe-plan.html" class="sidebar-item active"><span class="mi">📋</span>食谱规划</a>
|
||||
<a href="prod-clean-order.html" class="sidebar-item"><span class="mi">📝</span>净菜订单</a>
|
||||
<a href="prod-proc-cabinet.html" class="sidebar-item"><span class="mi">🗄️</span>净菜进柜</a>
|
||||
<a href="prod-proc-combo.html" class="sidebar-item"><span class="mi">🔪</span>净菜组配</a>
|
||||
<a href="prod-proc-cook.html" class="sidebar-item"><span class="mi">🍳</span>按单烹制</a>
|
||||
<a href="prod-proc-serve.html" class="sidebar-item"><span class="mi">🍽️</span>上餐监控</a>
|
||||
<a href="prod-proc-surplus.html" class="sidebar-item"><span class="mi">♻️</span>余量处置</a>
|
||||
<a href="prod-proc-stats.html" class="sidebar-item"><span class="mi">📊</span>生产统计</a>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容区 -->
|
||||
<div class="main">
|
||||
|
||||
<!-- 统计卡片 -->
|
||||
<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">42道</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">36道</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道</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">95%</div>
|
||||
<div class="stat-card__label">食安通过率</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 筛选栏 -->
|
||||
<div class="filter-bar">
|
||||
<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">
|
||||
</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">
|
||||
<a href="prod-recipe-plan-dialog.html" class="btn btn-primary">➕ 新建规划</a>
|
||||
<button class="btn btn-default">🧮 校验净菜需求</button>
|
||||
<button class="btn btn-default">🤖 AI推荐优化</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>热量(kcal)</th><th>净菜需求量(kg)</th><th>营养达标评级</th><th>安全评估</th><th>整改状态</th><th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>2026-04-15(周三)</td><td>早餐</td><td>第15周营养食谱</td><td>小米粥+馒头</td><td>卤蛋</td><td>凉拌黄瓜</td><td>—</td><td>486</td><td>8.6</td><td><span class="tag tag-green">优</span></td><td><span class="tag tag-green">通过</span></td><td><span class="tag tag-green">无需整改</span></td><td><a class="link">查看</a> <a class="link">编辑</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2026-04-15(周三)</td><td>午餐</td><td>第15周营养食谱</td><td>米饭</td><td>红烧肉+清蒸鱼</td><td>炒时蔬+豆腐</td><td>番茄蛋汤</td><td>856</td><td>38.2</td><td><span class="tag tag-blue">良</span></td><td><span class="tag tag-green">通过</span></td><td><span class="tag tag-orange">建议优化</span></td><td><a class="link">查看</a> <a class="link">编辑</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2026-04-15(周三)</td><td>晚餐</td><td>第15周营养食谱</td><td>米饭+花卷</td><td>宫保鸡丁</td><td>蒜蓉菠菜</td><td>紫菜汤</td><td>724</td><td>28.6</td><td><span class="tag tag-blue">良</span></td><td><span class="tag tag-green">通过</span></td><td><span class="tag tag-green">无需整改</span></td><td><a class="link">查看</a> <a class="link">编辑</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2026-04-16(周四)</td><td>早餐</td><td>第15周营养食谱</td><td>燕麦粥+包子</td><td>茶叶蛋</td><td>拌菠菜</td><td>—</td><td>512</td><td>9.2</td><td><span class="tag tag-green">优</span></td><td><span class="tag tag-green">通过</span></td><td><span class="tag tag-green">无需整改</span></td><td><a class="link">查看</a> <a class="link">编辑</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2026-04-16(周四)</td><td>午餐</td><td>第15周营养食谱</td><td>米饭</td><td>糖醋排骨+虾仁</td><td>炒西兰花</td><td>冬瓜汤</td><td>892</td><td>40.4</td><td><span class="tag tag-blue">良</span></td><td><span class="tag tag-orange">待复核</span></td><td><span class="tag tag-red">待整改</span></td><td><a class="link">查看</a> <a class="link">编辑</a></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<!-- 分页 -->
|
||||
<div class="pagination">
|
||||
<span>显示 5 条，共 42 条</span>
|
||||
<button class="page-btn">‹</button>
|
||||
<button class="page-btn active">1</button>
|
||||
<button class="page-btn">2</button>
|
||||
<button class="page-btn">3</button>
|
||||
<button class="page-btn">›</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// 无子分组，无需折叠脚本
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
</style>
|
||||
@@ -0,0 +1,181 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>营养管理 - 净菜外售 | 健康长庆原型</title>
|
||||
<style>
|
||||
*{box-sizing:border-box;margin:0;padding:0;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#F5F7FA;color:#333;min-width:1280px;}
|
||||
:root{
|
||||
--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;
|
||||
--text-primary:#333;--text-secondary:#666;--text-placeholder:#999;--border:#E8E8E8;--background:#F5F7FA;
|
||||
--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--font-xxl:24px;
|
||||
--radius-sm:4px;--radius-md:8px;--radius-lg:12px;
|
||||
--shadow-sm:0 1px 4px rgba(0,0,0,0.08);--shadow-md:0 4px 12px rgba(0,0,0,0.12);
|
||||
}
|
||||
.top-bar{display:flex;align-items:center;height:56px;background:#001529;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;}
|
||||
.top-bar__logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:var(--font-lg);font-weight:600;white-space:nowrap;width:240px;flex-shrink:0;}
|
||||
.top-bar__logo svg{width:28px;height:28px;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.top-bar__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.top-bar__right .btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.top-bar__right .btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);cursor:pointer;}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;text-transform:uppercase;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.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);}
|
||||
.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;}
|
||||
.stat-card__icon.blue{background:var(--primary-light);}
|
||||
.stat-card__icon.green{background:#F6FFED;}
|
||||
.stat-card__icon.orange{background:#FFF7E6;}
|
||||
.stat-card__icon.red{background:#FFF1F0;}
|
||||
.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);}
|
||||
.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:200px;}
|
||||
.filter-input:focus{border-color:var(--primary);}
|
||||
.filter-select{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);color:var(--text-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='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;cursor:pointer;min-width:120px;}
|
||||
.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;}
|
||||
.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);}
|
||||
.tag-orange{background:#FFF7E6;color:var(--warning);}
|
||||
.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;}
|
||||
.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);}
|
||||
.action-bar{display:flex;align-items:center;gap:8px;margin-bottom:16px;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- 顶部导航栏 -->
|
||||
<header class="top-bar">
|
||||
<div class="top-bar__logo">
|
||||
<svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M7 14h14M14 7v14" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/></svg>
|
||||
营养管理
|
||||
</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="trace-query.html">溯源总览</a>
|
||||
<a href="arc-employee.html">档案</a>
|
||||
<a href="farm-land.html">绿色种采</a>
|
||||
<a href="sup-hygiene-check.html" class="active">卫生供应</a>
|
||||
<a href="prod-qc-daily.html">健康生产</a>
|
||||
<a href="din-dict-mgmt.html">营养用餐</a>
|
||||
<a href="ano-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<a href="../../index.html" class="btn-back">← 返回首页</a>
|
||||
<div class="avatar">管</div>
|
||||
<span>系统管理员 ▾</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- 侧边栏：卫生供应 -->
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">卫生供应</div>
|
||||
<a href="sup-hygiene-check.html" class="sidebar-item"><span class="mi">🔬</span>卫生检测</a>
|
||||
<a href="sup-in-raw.html" class="sidebar-item"><span class="mi">📥</span>毛菜入库</a>
|
||||
<a href="sup-warehouse.html" class="sidebar-item"><span class="mi">🏭</span>仓储管理</a>
|
||||
<a href="sup-in-clean.html" class="sidebar-item"><span class="mi">🥬</span>净菜加工</a>
|
||||
<a href="sup-in-cleanin.html" class="sidebar-item"><span class="mi">📦</span>净菜入库</a>
|
||||
<a href="sup-pkg-label.html" class="sidebar-item"><span class="mi">🏷️</span>净菜包装</a>
|
||||
<a href="sup-clean-internal.html" class="sidebar-item"><span class="mi">🏠</span>净菜内供</a>
|
||||
<a href="sup-clean-external.html" class="sidebar-item active"><span class="mi">🚛</span>净菜外售</a>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容区 -->
|
||||
<div class="main">
|
||||
<!-- 统计卡片 -->
|
||||
<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">¥4,280</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">3</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">5</div><div class="stat-card__label">已完成</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 筛选栏 -->
|
||||
<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><option>待发货</option></select>
|
||||
</div>
|
||||
<div class="filter-item"><label>日期范围</label><input class="filter-input" type="date"></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-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="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>单价(元/kg)</th><th>小计金额</th><th>出库区域</th><th>下单时间</th><th>物流单号</th><th>订单状态</th><th>操作</th>
|
||||
</tr></thead>
|
||||
<tbody>
|
||||
<tr><td>EXT-001</td><td>社区便民超市</td><td>净菠菜</td><td>NC-INT-BOCA-20260422-01</td><td>蔬菜类</td><td>50</td><td>¥3.5</td><td>¥175</td><td>A仓-蔬菜区-01</td><td>08:00</td><td>SF1234567890</td><td><span class="tag tag-green">已签收</span></td><td>—</td></tr>
|
||||
<tr><td>EXT-001</td><td>社区便民超市</td><td>净胡萝卜</td><td>NC-INT-HLUB-20260422-01</td><td>蔬菜类</td><td>30</td><td>¥3.5</td><td>¥105</td><td>A仓-蔬菜区-03</td><td>08:00</td><td>SF1234567890</td><td><span class="tag tag-green">已签收</span></td><td>—</td></tr>
|
||||
<tr><td>EXT-002</td><td>周边餐饮企业</td><td>净猪里脊</td><td>NC-INT-ZLRJ-20260422-01</td><td>肉禽类</td><td>50</td><td>¥28</td><td>¥1,400</td><td>B仓-肉类区-01</td><td>09:30</td><td>SF9876543210</td><td><span class="tag tag-blue">配送中</span></td><td>—</td></tr>
|
||||
<tr><td>EXT-003</td><td>学校食堂</td><td>净白菜</td><td>NC-INT-BCAI-20260422-01</td><td>蔬菜类</td><td>60</td><td>¥2.0</td><td>¥120</td><td>A仓-蔬菜区-02</td><td>10:00</td><td>—</td><td><span class="tag tag-orange">待发货</span></td><td>—</td></tr>
|
||||
<tr><td>EXT-003</td><td>学校食堂</td><td>净西兰花</td><td>NC-INT-XLHU-20260422-01</td><td>蔬菜类</td><td>40</td><td>¥4.5</td><td>¥180</td><td>A仓-蔬菜区-04</td><td>10:00</td><td>—</td><td><span class="tag tag-orange">待发货</span></td><td>—</td></tr>
|
||||
<tr><td>EXT-003</td><td>学校食堂</td><td>净胡萝卜</td><td>NC-INT-HLUB-20260422-02</td><td>蔬菜类</td><td>45</td><td>¥4.0</td><td>¥180</td><td>A仓-蔬菜区-03</td><td>10:00</td><td>—</td><td><span class="tag tag-orange">待发货</span></td><td>—</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>显示 6 条，共 8 条</span>
|
||||
<button class="page-btn">‹</button>
|
||||
<button class="page-btn active">1</button>
|
||||
<button class="page-btn">2</button>
|
||||
<button class="page-btn">›</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,183 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>营养管理 - 净菜内供 | 健康长庆原型</title>
|
||||
<style>
|
||||
*{box-sizing:border-box;margin:0;padding:0;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#F5F7FA;color:#333;min-width:1280px;}
|
||||
:root{
|
||||
--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;
|
||||
--text-primary:#333;--text-secondary:#666;--text-placeholder:#999;--border:#E8E8E8;--background:#F5F7FA;
|
||||
--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--font-xxl:24px;
|
||||
--radius-sm:4px;--radius-md:8px;--radius-lg:12px;
|
||||
--shadow-sm:0 1px 4px rgba(0,0,0,0.08);--shadow-md:0 4px 12px rgba(0,0,0,0.12);
|
||||
}
|
||||
.top-bar{display:flex;align-items:center;height:56px;background:#001529;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;}
|
||||
.top-bar__logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:var(--font-lg);font-weight:600;white-space:nowrap;width:240px;flex-shrink:0;}
|
||||
.top-bar__logo svg{width:28px;height:28px;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.top-bar__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.top-bar__right .btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.top-bar__right .btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);cursor:pointer;}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;text-transform:uppercase;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.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);}
|
||||
.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;}
|
||||
.stat-card__icon.blue{background:var(--primary-light);}
|
||||
.stat-card__icon.green{background:#F6FFED;}
|
||||
.stat-card__icon.orange{background:#FFF7E6;}
|
||||
.stat-card__icon.red{background:#FFF1F0;}
|
||||
.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);}
|
||||
.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:200px;}
|
||||
.filter-input:focus{border-color:var(--primary);}
|
||||
.filter-select{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);color:var(--text-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='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;cursor:pointer;min-width:120px;}
|
||||
.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;}
|
||||
.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);}
|
||||
.tag-orange{background:#FFF7E6;color:var(--warning);}
|
||||
.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;}
|
||||
.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);}
|
||||
.action-bar{display:flex;align-items:center;gap:8px;margin-bottom:16px;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- 顶部导航栏 -->
|
||||
<header class="top-bar">
|
||||
<div class="top-bar__logo">
|
||||
<svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M7 14h14M14 7v14" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/></svg>
|
||||
营养管理
|
||||
</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="trace-query.html">溯源总览</a>
|
||||
<a href="arc-employee.html">档案</a>
|
||||
<a href="farm-land.html">绿色种采</a>
|
||||
<a href="sup-hygiene-check.html" class="active">卫生供应</a>
|
||||
<a href="prod-qc-daily.html">健康生产</a>
|
||||
<a href="din-dict-mgmt.html">营养用餐</a>
|
||||
<a href="ano-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<a href="../../index.html" class="btn-back">← 返回首页</a>
|
||||
<div class="avatar">管</div>
|
||||
<span>系统管理员 ▾</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- 侧边栏：卫生供应 -->
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">卫生供应</div>
|
||||
<a href="sup-hygiene-check.html" class="sidebar-item"><span class="mi">🔬</span>卫生检测</a>
|
||||
<a href="sup-in-raw.html" class="sidebar-item"><span class="mi">📥</span>毛菜入库</a>
|
||||
<a href="sup-warehouse.html" class="sidebar-item"><span class="mi">🏭</span>仓储管理</a>
|
||||
<a href="sup-in-clean.html" class="sidebar-item"><span class="mi">🥬</span>净菜加工</a>
|
||||
<a href="sup-in-cleanin.html" class="sidebar-item"><span class="mi">📦</span>净菜入库</a>
|
||||
<a href="sup-pkg-label.html" class="sidebar-item"><span class="mi">🏷️</span>净菜包装</a>
|
||||
<a href="sup-clean-internal.html" class="sidebar-item active"><span class="mi">🏠</span>净菜内供</a>
|
||||
<a href="sup-clean-external.html" class="sidebar-item"><span class="mi">🚛</span>净菜外售</a>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容区 -->
|
||||
<div class="main">
|
||||
<!-- 统计卡片 -->
|
||||
<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">18</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">14</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">4</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">286kg</div><div class="stat-card__label">今日配送总量</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 筛选栏 -->
|
||||
<div class="filter-bar">
|
||||
<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></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-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="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>库存状态</th><th>配送状态</th><th>关联仓库区域</th><th>申领时间</th><th>配送人</th><th>操作</th>
|
||||
</tr></thead>
|
||||
<tbody>
|
||||
<tr><td>INT-001</td><td>一号食堂厨房</td><td>菠菜</td><td>NC-INT-BOCA-20260422-01</td><td>25</td><td><span class="tag tag-green">库存充足</span></td><td><span class="tag tag-green">已配送</span></td><td>A仓-蔬菜区-01</td><td>07:30</td><td>李配送</td><td>—</td></tr>
|
||||
<tr><td>INT-001</td><td>一号食堂厨房</td><td>白菜</td><td>NC-INT-BCAI-20260422-01</td><td>20</td><td><span class="tag tag-green">库存充足</span></td><td><span class="tag tag-green">已配送</span></td><td>A仓-蔬菜区-02</td><td>07:30</td><td>李配送</td><td>—</td></tr>
|
||||
<tr><td>INT-002</td><td>二号食堂厨房</td><td>猪里脊</td><td>NC-INT-ZLRJ-20260422-01</td><td>40</td><td><span class="tag tag-green">库存充足</span></td><td><span class="tag tag-blue">配送中</span></td><td>B仓-肉类区-01</td><td>08:00</td><td>王配送</td><td>—</td></tr>
|
||||
<tr><td>INT-002</td><td>二号食堂厨房</td><td>鸡胸肉</td><td>NC-INT-JXRJ-20260422-01</td><td>20</td><td><span class="tag tag-green">库存充足</span></td><td><span class="tag tag-blue">配送中</span></td><td>B仓-肉类区-02</td><td>08:00</td><td>王配送</td><td>—</td></tr>
|
||||
<tr><td>INT-003</td><td>三号食堂厨房</td><td>草鱼</td><td>NC-INT-CAYO-20260422-01</td><td>40</td><td><span class="tag tag-red">库存不足</span></td><td><span class="tag tag-orange">待配送</span></td><td>C仓-水产区-01</td><td>08:30</td><td>—</td><td>—</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>显示 5 条，共 18 条</span>
|
||||
<button class="page-btn">‹</button>
|
||||
<button class="page-btn active">1</button>
|
||||
<button class="page-btn">2</button>
|
||||
<button class="page-btn">3</button>
|
||||
<button class="page-btn">4</button>
|
||||
<button class="page-btn">›</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,259 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>营养管理 - 卫生检测 | 健康长庆原型</title>
|
||||
<style>
|
||||
/* 设计令牌 */
|
||||
*{box-sizing:border-box;margin:0;padding:0;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#F5F7FA;color:#333;min-width:1280px;}
|
||||
:root{
|
||||
--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;
|
||||
--text-primary:#333;--text-secondary:#666;--text-placeholder:#999;--border:#E8E8E8;--background:#F5F7FA;
|
||||
--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--font-xxl:24px;
|
||||
--radius-sm:4px;--radius-md:8px;--radius-lg:12px;
|
||||
--shadow-sm:0 1px 4px rgba(0,0,0,0.08);--shadow-md:0 4px 12px rgba(0,0,0,0.12);
|
||||
}
|
||||
/* 顶部导航 */
|
||||
.top-bar{display:flex;align-items:center;height:56px;background:#001529;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;}
|
||||
.top-bar__logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:var(--font-lg);font-weight:600;white-space:nowrap;width:240px;flex-shrink:0;}
|
||||
.top-bar__logo svg{width:28px;height:28px;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.top-bar__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.top-bar__right .btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.top-bar__right .btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);cursor:pointer;}
|
||||
/* 侧边栏 */
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;text-transform:uppercase;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.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);}
|
||||
/* 统计卡片 */
|
||||
.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;}
|
||||
.stat-card__icon.blue{background:var(--primary-light);}
|
||||
.stat-card__icon.green{background:#F6FFED;}
|
||||
.stat-card__icon.orange{background:#FFF7E6;}
|
||||
.stat-card__icon.red{background:#FFF1F0;}
|
||||
.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);}
|
||||
/* 筛选栏 */
|
||||
.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;}
|
||||
.filter-input:focus{border-color:var(--primary);}
|
||||
.filter-select{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);color:var(--text-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='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;cursor:pointer;min-width:120px;}
|
||||
/* 按钮 */
|
||||
.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;}
|
||||
.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);}
|
||||
.tag-orange{background:#FFF7E6;color:var(--warning);}
|
||||
.tag-red{background:#FFF1F0;color:var(--danger);}
|
||||
.tag-gray{background:#F5F5F5;color:#999;}
|
||||
.link{color:var(--primary);cursor:pointer;font-size:var(--font-sm);text-decoration:none;}.link:hover{color:#40a9ff;}
|
||||
/* 分页 */
|
||||
.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;}
|
||||
.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;}
|
||||
.action-bar{display:flex;align-items:center;gap:8px;margin-bottom:16px;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- 顶部导航栏 -->
|
||||
<header class="top-bar">
|
||||
<div class="top-bar__logo">
|
||||
<svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M7 14h14M14 7v14" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/></svg>
|
||||
营养管理
|
||||
</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="trace-query.html">溯源总览</a>
|
||||
<a href="arc-employee.html">档案</a>
|
||||
<a href="farm-land.html">绿色种采</a>
|
||||
<a href="sup-hygiene-check.html" class="active">卫生供应</a>
|
||||
<a href="prod-qc-daily.html">健康生产</a>
|
||||
<a href="din-dict-mgmt.html">营养用餐</a>
|
||||
<a href="ano-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<a class="btn-back" href="../../index.html">← 返回首页</a>
|
||||
<div class="avatar">管</div>
|
||||
<span>系统管理员 ▾</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- 侧边栏：卫生供应 -->
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">卫生供应</div>
|
||||
<a href="sup-hygiene-check.html" class="sidebar-item active"><span class="mi">🔬</span>卫生检测</a>
|
||||
<a href="sup-in-raw.html" class="sidebar-item"><span class="mi">📥</span>毛菜入库</a>
|
||||
<a href="sup-warehouse.html" class="sidebar-item"><span class="mi">🏭</span>仓储管理</a>
|
||||
<a href="sup-in-clean.html" class="sidebar-item"><span class="mi">🥬</span>净菜加工</a>
|
||||
<a href="sup-in-cleanin.html" class="sidebar-item"><span class="mi">📦</span>净菜入库</a>
|
||||
<a href="sup-pkg-label.html" class="sidebar-item"><span class="mi">🏷️</span>净菜包装</a>
|
||||
<a href="sup-clean-internal.html" class="sidebar-item"><span class="mi">🏠</span>净菜内供</a>
|
||||
<a href="sup-clean-external.html" class="sidebar-item"><span class="mi">🚛</span>净菜外售</a>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容区 -->
|
||||
<main class="main">
|
||||
<!-- 统计卡片 -->
|
||||
<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">12</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">11</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 class="stat-card">
|
||||
<div class="stat-card__icon orange">📊</div>
|
||||
<div class="stat-card__info"><div class="stat-card__value">91.7%</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>农药残留</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>纸质OCR识别</option><option>手动录入</option></select>
|
||||
</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><input class="filter-input" type="date"></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> <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><th>操作</th>
|
||||
</tr></thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>HYG-20260415-001</td><td>ST-FH-FA01-VG-BOCA-286K-20260415-001</td><td>菠菜</td><td>农药残留</td><td>0.02mg/kg</td><td><0.1mg/kg</td><td>2026-04-15 10:00</td><td>内部检测室</td><td>李检测</td><td><span class="tag tag-blue">电子报告扫描</span></td><td><span class="tag tag-green">合格</span></td><td>RPT-20260415-001</td><td><span class="link" onclick="openModal()">查看详情</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>HYG-20260415-002</td><td>ST-EX-XR01-MT-ZLRJ-080K-20260415-005</td><td>猪里脊</td><td>瘦肉精</td><td>未检出</td><td>未检出</td><td>2026-04-15 10:30</td><td>内部检测室</td><td>王检测</td><td><span class="tag tag-gray">纸质OCR识别</span></td><td><span class="tag tag-green">合格</span></td><td>RPT-20260415-002</td><td><span class="link" onclick="openModal()">查看详情</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>HYG-20260415-003</td><td>ST-EX-HS01-SF-CAYO-060K-20260414-001</td><td>草鱼</td><td>甲醛</td><td>0.15mg/kg</td><td><0.05mg/kg</td><td>2026-04-15 11:00</td><td>第三方检测机构</td><td>外部检测员</td><td><span class="tag tag-blue">电子报告扫描</span></td><td><span class="tag tag-red">不合格</span></td><td>RPT-20260415-003</td><td><span class="link" onclick="openModal()">查看详情</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>HYG-20260416-004</td><td>ST-FH-FB01-VG-HLUB-420K-20260415-002</td><td>胡萝卜</td><td>重金属（铅）</td><td>0.01mg/kg</td><td><0.1mg/kg</td><td>2026-04-16 09:00</td><td>内部检测室</td><td>李检测</td><td><span class="tag tag-orange">手动录入</span></td><td><span class="tag tag-green">合格</span></td><td>RPT-20260416-004</td><td><span class="link" onclick="openModal()">查看详情</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>HYG-20260416-005</td><td>ST-EX-LY01-VG-BOCA-050K-20260415-002</td><td>菠菜（外采批）</td><td>农药残留</td><td>0.03mg/kg</td><td><0.1mg/kg</td><td>2026-04-16 09:30</td><td>内部检测室</td><td>李检测</td><td><span class="tag tag-gray">纸质OCR识别</span></td><td><span class="tag tag-green">合格</span></td><td>RPT-20260416-005</td><td><span class="link" onclick="openModal()">查看详情</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>HYG-20260416-006</td><td>ST-EX-XR01-MT-ZLRJ-080K-20260415-005</td><td>猪里脊</td><td>微生物（大肠杆菌）</td><td>未检出</td><td>未检出</td><td>2026-04-16 10:00</td><td>内部检测室</td><td>王检测</td><td><span class="tag tag-blue">电子报告扫描</span></td><td><span class="tag tag-green">合格</span></td><td>RPT-20260416-006</td><td><span class="link" onclick="openModal()">查看详情</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>显示 6 条，共 12 条</span>
|
||||
<button class="page-btn">‹</button>
|
||||
<button class="page-btn active">1</button>
|
||||
<button class="page-btn">2</button>
|
||||
<button class="page-btn">›</button>
|
||||
</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><input type="text" placeholder="请输入食材名称"></div>
|
||||
<div class="form-item"><label>来源溯源码（关联入库单）<span class="required">*</span></label><input type="text" placeholder="请输入溯源码"></div>
|
||||
<div class="form-item"><label>检测项目</label><select><option>请选择</option><option>农药残留</option><option>重金属（铅）</option><option>重金属（镉）</option><option>重金属（汞）</option><option>微生物（大肠杆菌）</option><option>添加剂</option><option>瘦肉精</option><option>甲醛</option></select></div>
|
||||
<div class="form-item"><label>数据来源类型<span class="required">*</span></label><select><option>请选择</option><option>电子报告扫描识别</option><option>纸质报告OCR识别</option><option>手动录入</option></select></div>
|
||||
<div class="form-item"><label>检测值</label><input type="text" placeholder="请输入检测值"></div>
|
||||
<div class="form-item"><label>标准限值</label><input type="text" placeholder="请输入标准限值"></div>
|
||||
<div class="form-item"><label>检测日期</label><input type="date"></div>
|
||||
<div class="form-item"><label>检测机构<span class="required">*</span></label><input type="text" placeholder="请输入检测机构"></div>
|
||||
<div class="form-item"><label>检测员<span class="required">*</span></label><input type="text" placeholder="请输入检测员"></div>
|
||||
<div class="form-item"><label>报告编号</label><input type="text" placeholder="请输入报告编号"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="btn btn-default" onclick="closeModal()">取消</button>
|
||||
<button class="btn btn-primary">确定</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
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();});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,260 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>营养管理 - 净菜加工 | 健康长庆原型</title>
|
||||
<style>
|
||||
/* 设计令牌 */
|
||||
*{box-sizing:border-box;margin:0;padding:0;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#F5F7FA;color:#333;min-width:1280px;}
|
||||
:root{
|
||||
--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;
|
||||
--text-primary:#333;--text-secondary:#666;--text-placeholder:#999;--border:#E8E8E8;--background:#F5F7FA;
|
||||
--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--font-xxl:24px;
|
||||
--radius-sm:4px;--radius-md:8px;--radius-lg:12px;
|
||||
--shadow-sm:0 1px 4px rgba(0,0,0,0.08);--shadow-md:0 4px 12px rgba(0,0,0,0.12);
|
||||
}
|
||||
/* 顶部导航 */
|
||||
.top-bar{display:flex;align-items:center;height:56px;background:#001529;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;}
|
||||
.top-bar__logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:var(--font-lg);font-weight:600;white-space:nowrap;width:240px;flex-shrink:0;}
|
||||
.top-bar__logo svg{width:28px;height:28px;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.top-bar__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.top-bar__right .btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.top-bar__right .btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);cursor:pointer;}
|
||||
/* 侧边栏 */
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;text-transform:uppercase;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.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);}
|
||||
/* 统计卡片 */
|
||||
.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;}
|
||||
.stat-card__icon.blue{background:var(--primary-light);}
|
||||
.stat-card__icon.green{background:#F6FFED;}
|
||||
.stat-card__icon.orange{background:#FFF7E6;}
|
||||
.stat-card__icon.red{background:#FFF1F0;}
|
||||
.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);}
|
||||
/* 筛选栏 */
|
||||
.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;}
|
||||
.filter-input:focus{border-color:var(--primary);}
|
||||
.filter-select{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);color:var(--text-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='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;cursor:pointer;min-width:120px;}
|
||||
/* 按钮 */
|
||||
.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;}
|
||||
.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);}
|
||||
.tag-orange{background:#FFF7E6;color:var(--warning);}
|
||||
.tag-red{background:#FFF1F0;color:var(--danger);}
|
||||
.tag-gray{background:#F5F5F5;color:#999;}
|
||||
.link{color:var(--primary);cursor:pointer;font-size:var(--font-sm);text-decoration:none;}.link:hover{color:#40a9ff;}
|
||||
/* 分页 */
|
||||
.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;}
|
||||
.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;}
|
||||
.action-bar{display:flex;align-items:center;gap:8px;margin-bottom:16px;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- 顶部导航栏 -->
|
||||
<header class="top-bar">
|
||||
<div class="top-bar__logo">
|
||||
<svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M7 14h14M14 7v14" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/></svg>
|
||||
营养管理
|
||||
</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="trace-query.html">溯源总览</a>
|
||||
<a href="arc-employee.html">档案</a>
|
||||
<a href="farm-land.html">绿色种采</a>
|
||||
<a href="sup-hygiene-check.html" class="active">卫生供应</a>
|
||||
<a href="prod-qc-daily.html">健康生产</a>
|
||||
<a href="din-dict-mgmt.html">营养用餐</a>
|
||||
<a href="ano-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<a class="btn-back" href="../../index.html">← 返回首页</a>
|
||||
<div class="avatar">管</div>
|
||||
<span>系统管理员 ▾</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- 侧边栏：卫生供应 -->
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">卫生供应</div>
|
||||
<a href="sup-hygiene-check.html" class="sidebar-item"><span class="mi">🔬</span>卫生检测</a>
|
||||
<a href="sup-in-raw.html" class="sidebar-item"><span class="mi">📥</span>毛菜入库</a>
|
||||
<a href="sup-warehouse.html" class="sidebar-item"><span class="mi">🏭</span>仓储管理</a>
|
||||
<a href="sup-in-clean.html" class="sidebar-item active"><span class="mi">🥬</span>净菜加工</a>
|
||||
<a href="sup-in-cleanin.html" class="sidebar-item"><span class="mi">📦</span>净菜入库</a>
|
||||
<a href="sup-pkg-label.html" class="sidebar-item"><span class="mi">🏷️</span>净菜包装</a>
|
||||
<a href="sup-clean-internal.html" class="sidebar-item"><span class="mi">🏠</span>净菜内供</a>
|
||||
<a href="sup-clean-external.html" class="sidebar-item"><span class="mi">🚛</span>净菜外售</a>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容区 -->
|
||||
<main class="main">
|
||||
<!-- 统计卡片 -->
|
||||
<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">18</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">386kg</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">14</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">4</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>清洗</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><option>段</option><option>丁</option><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>
|
||||
<div class="filter-item"><label>日期范围</label><input class="filter-input" type="date"></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> <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>毛菜重量(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>18.2</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="link" onclick="openModal()">查看详情</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>17.8</td><td>王加工</td><td>2026-04-15 08:30</td><td>—</td><td><span class="tag tag-gray">—</span></td><td><span class="link" onclick="openModal()">查看详情</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>18.0</td><td>李加工</td><td>2026-04-15 09:00</td><td>—</td><td><span class="tag tag-gray">—</span></td><td><span class="link" onclick="openModal()">查看详情</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>PROC-004</td><td>—</td><td>四季豆</td><td>清洗</td><td>段（5cm）</td><td>—</td><td>—</td><td>—</td><td>—</td><td>—</td><td>—</td><td>—</td><td><span class="tag tag-orange">待处理</span></td><td><span class="link" onclick="openModal()">查看详情</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>17.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="link" onclick="openModal()">查看详情</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>PROC-006</td><td>NC-PROC-ZLRJ-20260415-01</td><td>猪里脊</td><td>切割</td><td>丁（1.5cm）</td><td>80</td><td>76</td><td>95.0</td><td>8.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="link" onclick="openModal()">查看详情</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>PROC-007</td><td>—</td><td>猪里脊</td><td>切割</td><td>条（4cm）</td><td>—</td><td>—</td><td>—</td><td>—</td><td>—</td><td>—</td><td>—</td><td><span class="tag tag-orange">待处理</span></td><td><span class="link" onclick="openModal()">查看详情</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>显示 7 条，共 18 条</span>
|
||||
<button class="page-btn">‹</button>
|
||||
<button class="page-btn active">1</button>
|
||||
<button class="page-btn">2</button>
|
||||
<button class="page-btn">3</button>
|
||||
<button class="page-btn">›</button>
|
||||
</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><input type="text" placeholder="请输入食材名称"></div>
|
||||
<div class="form-item"><label>加工类型<span class="required">*</span></label><select><option>请选择</option><option>清洗</option><option>去皮</option><option>切割</option><option>分拣</option><option>综合加工</option></select></div>
|
||||
<div class="form-item"><label>加工规格<span class="required">*</span></label><select><option>请选择</option><option>整棵</option><option>整朵</option><option>段</option><option>丁</option><option>条</option><option>片</option><option>丝</option><option>末</option><option>块</option><option>滚刀块</option><option>其他（备注说明）</option></select></div>
|
||||
<div class="form-item"><label>毛菜数量(kg)<span class="required">*</span></label><input type="number" placeholder="请输入毛菜数量"></div>
|
||||
<div class="form-item"><label>加工人员<span class="required">*</span></label><input type="text" placeholder="请输入加工人员"></div>
|
||||
<div class="form-item"><label>开始时间</label><input type="date"></div>
|
||||
<div class="form-item full"><label>备注</label><textarea placeholder="请输入备注信息"></textarea></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="btn btn-default" onclick="closeModal()">取消</button>
|
||||
<button class="btn btn-primary">确定</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
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();});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,252 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>营养管理 - 净菜入库 | 健康长庆原型</title>
|
||||
<style>
|
||||
/* 设计令牌 */
|
||||
*{box-sizing:border-box;margin:0;padding:0;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#F5F7FA;color:#333;min-width:1280px;}
|
||||
:root{
|
||||
--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;
|
||||
--text-primary:#333;--text-secondary:#666;--text-placeholder:#999;--border:#E8E8E8;--background:#F5F7FA;
|
||||
--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--font-xxl:24px;
|
||||
--radius-sm:4px;--radius-md:8px;--radius-lg:12px;
|
||||
--shadow-sm:0 1px 4px rgba(0,0,0,0.08);--shadow-md:0 4px 12px rgba(0,0,0,0.12);
|
||||
}
|
||||
/* 顶部导航 */
|
||||
.top-bar{display:flex;align-items:center;height:56px;background:#001529;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;}
|
||||
.top-bar__logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:var(--font-lg);font-weight:600;white-space:nowrap;width:240px;flex-shrink:0;}
|
||||
.top-bar__logo svg{width:28px;height:28px;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.top-bar__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.top-bar__right .btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.top-bar__right .btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);cursor:pointer;}
|
||||
/* 侧边栏 */
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;text-transform:uppercase;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.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);}
|
||||
/* 统计卡片 */
|
||||
.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;}
|
||||
.stat-card__icon.blue{background:var(--primary-light);}
|
||||
.stat-card__icon.green{background:#F6FFED;}
|
||||
.stat-card__icon.orange{background:#FFF7E6;}
|
||||
.stat-card__icon.red{background:#FFF1F0;}
|
||||
.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);}
|
||||
/* 筛选栏 */
|
||||
.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;}
|
||||
.filter-input:focus{border-color:var(--primary);}
|
||||
.filter-select{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);color:var(--text-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='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;cursor:pointer;min-width:120px;}
|
||||
/* 按钮 */
|
||||
.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;}
|
||||
.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);}
|
||||
.tag-orange{background:#FFF7E6;color:var(--warning);}
|
||||
.tag-red{background:#FFF1F0;color:var(--danger);}
|
||||
.tag-gray{background:#F5F5F5;color:#999;}
|
||||
.link{color:var(--primary);cursor:pointer;font-size:var(--font-sm);text-decoration:none;}.link:hover{color:#40a9ff;}
|
||||
/* 分页 */
|
||||
.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;}
|
||||
.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;}
|
||||
.action-bar{display:flex;align-items:center;gap:8px;margin-bottom:16px;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- 顶部导航栏 -->
|
||||
<header class="top-bar">
|
||||
<div class="top-bar__logo">
|
||||
<svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M7 14h14M14 7v14" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/></svg>
|
||||
营养管理
|
||||
</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="trace-query.html">溯源总览</a>
|
||||
<a href="arc-employee.html">档案</a>
|
||||
<a href="farm-land.html">绿色种采</a>
|
||||
<a href="sup-hygiene-check.html" class="active">卫生供应</a>
|
||||
<a href="prod-qc-daily.html">健康生产</a>
|
||||
<a href="din-dict-mgmt.html">营养用餐</a>
|
||||
<a href="ano-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<a class="btn-back" href="../../index.html">← 返回首页</a>
|
||||
<div class="avatar">管</div>
|
||||
<span>系统管理员 ▾</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- 侧边栏：卫生供应 -->
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">卫生供应</div>
|
||||
<a href="sup-hygiene-check.html" class="sidebar-item"><span class="mi">🔬</span>卫生检测</a>
|
||||
<a href="sup-in-raw.html" class="sidebar-item"><span class="mi">📥</span>毛菜入库</a>
|
||||
<a href="sup-warehouse.html" class="sidebar-item"><span class="mi">🏭</span>仓储管理</a>
|
||||
<a href="sup-in-clean.html" class="sidebar-item"><span class="mi">🥬</span>净菜加工</a>
|
||||
<a href="sup-in-cleanin.html" class="sidebar-item active"><span class="mi">📦</span>净菜入库</a>
|
||||
<a href="sup-pkg-label.html" class="sidebar-item"><span class="mi">🏷️</span>净菜包装</a>
|
||||
<a href="sup-clean-internal.html" class="sidebar-item"><span class="mi">🏠</span>净菜内供</a>
|
||||
<a href="sup-clean-external.html" class="sidebar-item"><span class="mi">🚛</span>净菜外售</a>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容区 -->
|
||||
<main class="main">
|
||||
<!-- 统计卡片 -->
|
||||
<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">14</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">356kg</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">28种</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">22</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>入库</option><option>出库</option></select>
|
||||
</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><input class="filter-input" type="date"></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>去向</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><span class="tag tag-green">入库</span></td><td><span class="tag tag-blue">内供</span></td><td>86</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><span class="link" onclick="openModal()">查看详情</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>NC-IN-002</td><td>NC-PROC-HLUB-20260415-01</td><td>净胡萝卜</td><td><span class="tag tag-green">入库</span></td><td><span class="tag tag-blue">内供</span></td><td>120</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><span class="link" onclick="openModal()">查看详情</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>NC-OUT-001</td><td>NC-PROC-BOCA-20260415-01</td><td>净菠菜</td><td><span class="tag tag-blue">出库</span></td><td>—</td><td>45</td><td>2026-04-15 10:30</td><td>—</td><td>A区厨房</td><td>—</td><td>张出库</td><td><span class="link" onclick="openModal()">查看详情</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>NC-OUT-002</td><td>NC-PROC-HLUB-20260415-01</td><td>净胡萝卜</td><td><span class="tag tag-blue">出库</span></td><td>—</td><td>60</td><td>2026-04-15 10:45</td><td>—</td><td>B区厨房</td><td>—</td><td>张出库</td><td><span class="link" onclick="openModal()">查看详情</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>NC-IN-003</td><td>NC-PROC-XGUO-20260415-01</td><td>净香菇</td><td><span class="tag tag-green">入库</span></td><td><span class="tag tag-orange">外售</span></td><td>48</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><span class="link" onclick="openModal()">查看详情</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>显示 5 条，共 14 条</span>
|
||||
<button class="page-btn">‹</button>
|
||||
<button class="page-btn active">1</button>
|
||||
<button class="page-btn">2</button>
|
||||
<button class="page-btn">3</button>
|
||||
<button class="page-btn">›</button>
|
||||
</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>关联溯源码</label><input type="text" placeholder="请输入溯源码"></div>
|
||||
<div class="form-item"><label>净菜名称<span class="required">*</span></label><input type="text" placeholder="请输入净菜名称"></div>
|
||||
<div class="form-item"><label>操作类型<span class="required">*</span></label><select><option>请选择</option><option>入库</option><option>出库</option></select></div>
|
||||
<div class="form-item"><label>去向<span class="required">*</span></label><select><option>请选择</option><option>内供</option><option>外售</option></select></div>
|
||||
<div class="form-item"><label>数量(kg)<span class="required">*</span></label><input type="number" placeholder="请输入数量"></div>
|
||||
<div class="form-item"><label>存放区域/目标厨房<span class="required">*</span></label><input type="text" placeholder="请输入存放区域或目标厨房"></div>
|
||||
<div class="form-item"><label>保质期至</label><input type="date"></div>
|
||||
<div class="form-item"><label>经办人<span class="required">*</span></label><input type="text" placeholder="请输入经办人"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="btn btn-default" onclick="closeModal()">取消</button>
|
||||
<button class="btn btn-primary">确定</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
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();});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,285 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>营养管理 - 毛菜入库 | 健康长庆原型</title>
|
||||
<style>
|
||||
/* 设计令牌 */
|
||||
*{box-sizing:border-box;margin:0;padding:0;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#F5F7FA;color:#333;min-width:1280px;}
|
||||
:root{
|
||||
--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;
|
||||
--text-primary:#333;--text-secondary:#666;--text-placeholder:#999;--border:#E8E8E8;--background:#F5F7FA;
|
||||
--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--font-xxl:24px;
|
||||
--radius-sm:4px;--radius-md:8px;--radius-lg:12px;
|
||||
--shadow-sm:0 1px 4px rgba(0,0,0,0.08);--shadow-md:0 4px 12px rgba(0,0,0,0.12);
|
||||
}
|
||||
/* 顶部导航 */
|
||||
.top-bar{display:flex;align-items:center;height:56px;background:#001529;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;}
|
||||
.top-bar__logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:var(--font-lg);font-weight:600;white-space:nowrap;width:240px;flex-shrink:0;}
|
||||
.top-bar__logo svg{width:28px;height:28px;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.top-bar__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.top-bar__right .btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.top-bar__right .btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);cursor:pointer;}
|
||||
/* 侧边栏 */
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;text-transform:uppercase;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.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);}
|
||||
/* 统计卡片 */
|
||||
.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;}
|
||||
.stat-card__icon.blue{background:var(--primary-light);}
|
||||
.stat-card__icon.green{background:#F6FFED;}
|
||||
.stat-card__icon.orange{background:#FFF7E6;}
|
||||
.stat-card__icon.red{background:#FFF1F0;}
|
||||
.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);}
|
||||
/* 筛选栏 */
|
||||
.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;}
|
||||
.filter-input:focus{border-color:var(--primary);}
|
||||
.filter-select{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);color:var(--text-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='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;cursor:pointer;min-width:120px;}
|
||||
/* 按钮 */
|
||||
.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;}
|
||||
.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;}
|
||||
thead th:last-child,tbody td:last-child{position:sticky;right:0;box-shadow:-2px 0 4px rgba(0,0,0,0.06);z-index:1;}
|
||||
thead th:last-child{background:#FAFAFA;}
|
||||
tbody td:last-child{background:#fff;}
|
||||
tbody tr:hover td:last-child{background:#F8FBFF;}
|
||||
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);}
|
||||
.tag-orange{background:#FFF7E6;color:var(--warning);}
|
||||
.tag-red{background:#FFF1F0;color:var(--danger);}
|
||||
.tag-gray{background:#F5F5F5;color:#999;}
|
||||
.link{color:var(--primary);cursor:pointer;font-size:var(--font-sm);text-decoration:none;}.link:hover{color:#40a9ff;}
|
||||
/* 分页 */
|
||||
.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;}
|
||||
.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;}
|
||||
.action-bar{display:flex;align-items:center;gap:8px;margin-bottom:16px;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- 顶部导航栏 -->
|
||||
<header class="top-bar">
|
||||
<div class="top-bar__logo">
|
||||
<svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M7 14h14M14 7v14" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/></svg>
|
||||
营养管理
|
||||
</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="trace-query.html">溯源总览</a>
|
||||
<a href="arc-employee.html">档案</a>
|
||||
<a href="farm-land.html">绿色种采</a>
|
||||
<a href="sup-hygiene-check.html" class="active">卫生供应</a>
|
||||
<a href="prod-qc-daily.html">健康生产</a>
|
||||
<a href="din-dict-mgmt.html">营养用餐</a>
|
||||
<a href="ano-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<a class="btn-back" href="../../index.html">← 返回首页</a>
|
||||
<div class="avatar">管</div>
|
||||
<span>系统管理员 ▾</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- 侧边栏：卫生供应 -->
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">卫生供应</div>
|
||||
<a href="sup-hygiene-check.html" class="sidebar-item"><span class="mi">🔬</span>卫生检测</a>
|
||||
<a href="sup-in-raw.html" class="sidebar-item active"><span class="mi">📥</span>毛菜入库</a>
|
||||
<a href="sup-warehouse.html" class="sidebar-item"><span class="mi">🏭</span>仓储管理</a>
|
||||
<a href="sup-in-clean.html" class="sidebar-item"><span class="mi">🥬</span>净菜加工</a>
|
||||
<a href="sup-in-cleanin.html" class="sidebar-item"><span class="mi">📦</span>净菜入库</a>
|
||||
<a href="sup-pkg-label.html" class="sidebar-item"><span class="mi">🏷️</span>净菜包装</a>
|
||||
<a href="sup-clean-internal.html" class="sidebar-item"><span class="mi">🏠</span>净菜内供</a>
|
||||
<a href="sup-clean-external.html" class="sidebar-item"><span class="mi">🚛</span>净菜外售</a>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容区 -->
|
||||
<main class="main">
|
||||
<!-- 筛选栏 -->
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item"><label>食材名称</label><input class="filter-input" type="text" placeholder="请输入食材名称"></div>
|
||||
<div class="filter-item"><label>操作类型</label>
|
||||
<select class="filter-select"><option>全部</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>
|
||||
<div class="filter-item"><label>供应商/地块</label><input class="filter-input" type="text" placeholder="请输入供应商/地块"></div>
|
||||
<div class="filter-item"><label>入库日期</label><input class="filter-input" type="date"></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" 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>食材名称</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>IN-20260415-001</td><td><span class="tag tag-green">设备自动</span></td><td>ST-FH-FA01-VG-BOCA-286K-20260415-001</td><td><span class="tag tag-blue">自产</span></td><td>菠菜</td><td>A区蔬菜基地</td><td>25kg/件</td><td>12件</td><td>286</td><td>2026-04-15 10:30</td><td>A仓-蔬菜区-01</td><td>张验收</td><td>RPT-20260415-001</td><td><span class="tag tag-green">合格</span></td><td><span class="link" onclick="openVideo()">查看视频</span> <span class="link">编辑</span> <span class="link">详情</span> <span class="link" style="color:var(--danger)">删除</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>IN-20260415-002</td><td><span class="tag tag-green">设备自动</span></td><td>ST-EX-LY01-VG-BOCA-050K-20260415-002</td><td><span class="tag tag-gray">外采</span></td><td>菠菜</td><td>绿源蔬菜配送</td><td>10kg/筐</td><td>5筐</td><td>50</td><td>2026-04-15 08:30</td><td>A仓-蔬菜区-02</td><td>李验收</td><td>RPT-20260415-002</td><td><span class="tag tag-green">合格</span></td><td><span class="link" onclick="openVideo()">查看视频</span> <span class="link">编辑</span> <span class="link">详情</span> <span class="link" style="color:var(--danger)">删除</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>IN-20260415-003</td><td><span class="tag tag-orange">人工录入</span></td><td>ST-EX-XR01-MT-ZLRJ-080K-20260415-005</td><td><span class="tag tag-gray">外采</span></td><td>猪里脊</td><td>鲜肉直供公司</td><td>20kg/箱</td><td>4箱</td><td>80</td><td>2026-04-15 09:15</td><td>B仓-肉类区-01</td><td>王验收</td><td>RPT-20260415-003</td><td><span class="tag tag-green">合格</span></td><td><span class="link" onclick="openVideo()">查看视频</span> <span class="link">编辑</span> <span class="link">详情</span> <span class="link" style="color:var(--danger)">删除</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>IN-20260415-004</td><td><span class="tag tag-orange">人工录入</span></td><td>ST-EX-HS01-SF-CAYO-060K-20260414-001</td><td><span class="tag tag-gray">外采</span></td><td>草鱼</td><td>海鲜水产配送</td><td>散装(kg)</td><td>60kg</td><td>60</td><td>2026-04-15 09:45</td><td>C仓-水产区-01</td><td>李验收</td><td>—</td><td><span class="tag tag-red">已隔离</span></td><td><span class="link" onclick="openVideo()">查看视频</span> <span class="link">编辑</span> <span class="link">详情</span> <span class="link" style="color:var(--danger)">删除</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>IN-20260416-005</td><td><span class="tag tag-green">设备自动</span></td><td>ST-FH-FB01-VG-HLUB-420K-20260415-002</td><td><span class="tag tag-blue">自产</span></td><td>胡萝卜</td><td>B区根茎基地</td><td>25kg/件</td><td>17件</td><td>420</td><td>2026-04-16 11:00</td><td>A仓-蔬菜区-03</td><td>张验收</td><td>RPT-20260415-004</td><td><span class="tag tag-green">合格</span></td><td><span class="link" onclick="openVideo()">查看视频</span> <span class="link">编辑</span> <span class="link">详情</span> <span class="link" style="color:var(--danger)">删除</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>显示 5 条，共 12 条</span>
|
||||
<button class="page-btn">‹</button>
|
||||
<button class="page-btn active">1</button>
|
||||
<button class="page-btn">2</button>
|
||||
<button class="page-btn">3</button>
|
||||
<button class="page-btn">›</button>
|
||||
</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>设备自动入库（地磅/传感器采集）</option><option>人工手动录入</option></select></div>
|
||||
<div class="form-item"><label>来源类型<span class="required">*</span></label><select><option>请选择</option><option>外采（关联采购单）</option><option>自产（关联收成入库）</option></select></div>
|
||||
<div class="form-item"><label>食材名称<span class="required">*</span></label><input type="text" placeholder="请输入食材名称"></div>
|
||||
<div class="form-item"><label>供应商/来源地块</label><input type="text" placeholder="请输入供应商或来源地块"></div>
|
||||
<div class="form-item"><label>入库规格<span class="required">*</span></label><select><option>请选择</option><option>25kg/件</option><option>20kg/箱</option><option>15kg/箱</option><option>10kg/筐</option><option>5kg/袋</option><option>1kg/包</option><option>散装(kg)</option></select></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>入库时间</label><input type="date"></div>
|
||||
<div class="form-item"><label>存放区域<span class="required">*</span></label><select><option>请选择</option><option>A仓-蔬菜区-01</option><option>A仓-蔬菜区-02</option><option>A仓-蔬菜区-03</option><option>A仓-蔬菜区-04</option><option>B仓-肉类区-01</option><option>B仓-肉类区-02</option><option>B仓-肉类区-03</option><option>C仓-水产区-01</option><option>C仓-水产区-02</option></select></div>
|
||||
<div class="form-item"><label>卫生检测报告编号</label><input type="text" placeholder="请输入报告编号"></div>
|
||||
<div class="form-item"><label>验收人<span class="required">*</span></label><input type="text" placeholder="请输入验收人"></div>
|
||||
<div class="form-item"></div>
|
||||
<div class="form-item full"><label>备注</label><textarea placeholder="请输入备注信息"></textarea></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="btn btn-default" onclick="closeModal()">取消</button>
|
||||
<button class="btn btn-primary">确定</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 查看视频弹窗 -->
|
||||
<div class="modal-overlay" id="videoOverlay" style="display:none;">
|
||||
<div class="modal" style="width:800px;">
|
||||
<div class="modal-header">
|
||||
<span class="modal-title">入库监控视频回放</span>
|
||||
<span class="modal-close" onclick="closeVideo()">×</span>
|
||||
</div>
|
||||
<div class="modal-body" style="padding:0;">
|
||||
<div style="background:#000;width:100%;aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;position:relative;">
|
||||
<div style="color:rgba(255,255,255,0.3);font-size:48px;">▶</div>
|
||||
<div style="position:absolute;bottom:0;left:0;right:0;background:rgba(0,0,0,0.7);padding:8px 16px;display:flex;align-items:center;gap:12px;">
|
||||
<span style="color:#fff;font-size:12px;">00:00</span>
|
||||
<div style="flex:1;height:4px;background:rgba(255,255,255,0.2);border-radius:2px;position:relative;"><div style="width:35%;height:100%;background:var(--primary);border-radius:2px;"></div></div>
|
||||
<span style="color:#fff;font-size:12px;">02:36</span>
|
||||
<span style="color:rgba(255,255,255,0.6);font-size:12px;cursor:pointer;">1x</span>
|
||||
<span style="color:rgba(255,255,255,0.6);font-size:12px;cursor:pointer;">🔊</span>
|
||||
<span style="color:rgba(255,255,255,0.6);font-size:12px;cursor:pointer;">⛶</span>
|
||||
</div>
|
||||
<div style="position:absolute;top:12px;left:16px;color:rgba(255,255,255,0.7);font-size:11px;">CAM-A01 | A仓-蔬菜区入口</div>
|
||||
<div style="position:absolute;top:12px;right:16px;color:rgba(255,255,255,0.7);font-size:11px;">2026-04-15 10:28:15</div>
|
||||
</div>
|
||||
<div style="padding:16px 24px;border-top:1px solid var(--border);">
|
||||
<div style="display:flex;gap:24px;font-size:13px;color:var(--text-secondary);">
|
||||
<div><span style="color:var(--text-placeholder);">入库单号：</span>IN-20260415-001</div>
|
||||
<div><span style="color:var(--text-placeholder);">食材：</span>菠菜</div>
|
||||
<div><span style="color:var(--text-placeholder);">摄像头：</span>CAM-A01（A仓蔬菜区入口）</div>
|
||||
<div><span style="color:var(--text-placeholder);">时段：</span>10:28 - 10:31</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="btn btn-default" onclick="closeVideo()">关闭</button>
|
||||
<button class="btn btn-primary">📥 下载视频</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function openModal(){document.getElementById('modalOverlay').style.display='flex';}
|
||||
function closeModal(){document.getElementById('modalOverlay').style.display='none';}
|
||||
document.getElementById('modalOverlay').addEventListener('click',function(e){if(e.target===this)closeModal();});
|
||||
function openVideo(){document.getElementById('videoOverlay').style.display='flex';}
|
||||
function closeVideo(){document.getElementById('videoOverlay').style.display='none';}
|
||||
document.getElementById('videoOverlay').addEventListener('click',function(e){if(e.target===this)closeVideo();});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,289 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>营养管理 - 净菜包装 | 健康长庆原型</title>
|
||||
<style>
|
||||
*{box-sizing:border-box;margin:0;padding:0;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#F5F7FA;color:#333;min-width:1280px;}
|
||||
:root{
|
||||
--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;
|
||||
--text-primary:#333;--text-secondary:#666;--text-placeholder:#999;--border:#E8E8E8;--background:#F5F7FA;
|
||||
--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--font-xxl:24px;
|
||||
--radius-sm:4px;--radius-md:8px;--radius-lg:12px;
|
||||
--shadow-sm:0 1px 4px rgba(0,0,0,0.08);--shadow-md:0 4px 12px rgba(0,0,0,0.12);
|
||||
}
|
||||
.top-bar{display:flex;align-items:center;height:56px;background:#001529;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;}
|
||||
.top-bar__logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:var(--font-lg);font-weight:600;white-space:nowrap;width:240px;flex-shrink:0;}
|
||||
.top-bar__logo svg{width:28px;height:28px;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.top-bar__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.top-bar__right .btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.top-bar__right .btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);cursor:pointer;}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;text-transform:uppercase;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.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);}
|
||||
.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;}
|
||||
.stat-card__icon.blue{background:var(--primary-light);}
|
||||
.stat-card__icon.green{background:#F6FFED;}
|
||||
.stat-card__icon.orange{background:#FFF7E6;}
|
||||
.stat-card__icon.red{background:#FFF1F0;}
|
||||
.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-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;}
|
||||
.filter-input:focus{border-color:var(--primary);}
|
||||
.filter-select{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);color:var(--text-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='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;cursor:pointer;min-width:120px;}
|
||||
.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;}
|
||||
.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);}
|
||||
.tag-orange{background:#FFF7E6;color:var(--warning);}
|
||||
.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;}
|
||||
.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);}
|
||||
.action-bar{display:flex;align-items:center;gap:8px;margin-bottom:16px;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- 顶部导航栏 -->
|
||||
<header class="top-bar">
|
||||
<div class="top-bar__logo">
|
||||
<svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M7 14h14M14 7v14" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/></svg>
|
||||
营养管理
|
||||
</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="trace-query.html">溯源总览</a>
|
||||
<a href="arc-employee.html">档案</a>
|
||||
<a href="farm-land.html">绿色种采</a>
|
||||
<a href="sup-hygiene-check.html" class="active">卫生供应</a>
|
||||
<a href="prod-qc-daily.html">健康生产</a>
|
||||
<a href="din-dict-mgmt.html">营养用餐</a>
|
||||
<a href="ano-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<a href="../../index.html" class="btn-back">← 返回首页</a>
|
||||
<div class="avatar">管</div>
|
||||
<span>系统管理员 ▾</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- 侧边栏：卫生供应 -->
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">卫生供应</div>
|
||||
<a href="sup-hygiene-check.html" class="sidebar-item"><span class="mi">🔬</span>卫生检测</a>
|
||||
<a href="sup-in-raw.html" class="sidebar-item"><span class="mi">📥</span>毛菜入库</a>
|
||||
<a href="sup-warehouse.html" class="sidebar-item"><span class="mi">🏭</span>仓储管理</a>
|
||||
<a href="sup-in-clean.html" class="sidebar-item"><span class="mi">🥬</span>净菜加工</a>
|
||||
<a href="sup-in-cleanin.html" class="sidebar-item"><span class="mi">📦</span>净菜入库</a>
|
||||
<a href="sup-pkg-label.html" class="sidebar-item active"><span class="mi">🏷️</span>净菜包装</a>
|
||||
<a href="sup-clean-internal.html" class="sidebar-item"><span class="mi">🏠</span>净菜内供</a>
|
||||
<a href="sup-clean-external.html" class="sidebar-item"><span class="mi">🚛</span>净菜外售</a>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容 -->
|
||||
<main class="main">
|
||||
<!-- 统计卡片 -->
|
||||
<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">386包</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">248包</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">138包</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">98%</div><div class="stat-card__label">已关联内供/外售</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 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>
|
||||
|
||||
<!-- Tab1: 净菜包 -->
|
||||
<div class="tab-panel active">
|
||||
<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>真空袋 500g</option><option>保鲜盒 1kg</option><option>散装托盘 2kg</option><option>真空袋 1kg</option></select>
|
||||
</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><input class="filter-input" type="date"></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> <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>净重(g)</th><th>包装时间</th><th>保质期至</th><th>存放温度(℃)</th><th>去向</th><th>关联单号</th><th>包装人</th><th>终端设备</th><th>操作</th>
|
||||
</tr></thead>
|
||||
<tbody>
|
||||
<tr><td>PKG-NC-001</td><td>NC-PROC-BOCA-20260415-01</td><td>净菠菜</td><td><span class="tag tag-gray">真空袋 500g</span></td><td>500</td><td>2026-04-15 09:10</td><td>2026-04-17 09:10</td><td>4.1</td><td><span class="tag tag-blue">内供</span></td><td>INT-001</td><td>李包装</td><td>PKG-T01</td><td>—</td></tr>
|
||||
<tr><td>PKG-NC-002</td><td>NC-PROC-BOCA-20260415-01</td><td>净菠菜</td><td><span class="tag tag-gray">真空袋 500g</span></td><td>500</td><td>2026-04-15 09:11</td><td>2026-04-17 09:11</td><td>4.1</td><td><span class="tag tag-blue">内供</span></td><td>INT-001</td><td>李包装</td><td>PKG-T01</td><td>—</td></tr>
|
||||
<tr><td>PKG-NC-003</td><td>NC-PROC-HLUB-20260415-01</td><td>净胡萝卜</td><td><span class="tag tag-gray">保鲜盒 1kg</span></td><td>1000</td><td>2026-04-15 09:42</td><td>2026-04-18 09:42</td><td>4.2</td><td><span class="tag tag-blue">内供</span></td><td>INT-002</td><td>王包装</td><td>PKG-T01</td><td>—</td></tr>
|
||||
<tr><td>PKG-NC-004</td><td>NC-PROC-HLUB-20260415-01</td><td>净胡萝卜</td><td><span class="tag tag-gray">保鲜盒 1kg</span></td><td>1000</td><td>2026-04-15 09:43</td><td>2026-04-18 09:43</td><td>4.2</td><td><span class="tag tag-blue">内供</span></td><td>INT-002</td><td>王包装</td><td>PKG-T01</td><td>—</td></tr>
|
||||
<tr><td>PKG-NC-005</td><td>NC-PROC-XGUO-20260415-01</td><td>净香菇</td><td><span class="tag tag-gray">散装托盘 2kg</span></td><td>2000</td><td>2026-04-15 10:58</td><td>2026-04-17 10:58</td><td>4.0</td><td><span class="tag tag-orange">外售</span></td><td>EXT-001</td><td>张包装</td><td>PKG-T02</td><td>—</td></tr>
|
||||
<tr><td>PKG-NC-006</td><td>NC-PROC-LAJP-20260415-01</td><td>净辣椒</td><td><span class="tag tag-gray">真空袋 1kg</span></td><td>1000</td><td>2026-04-15 11:20</td><td>2026-04-17 11:20</td><td>4.3</td><td><span class="tag tag-blue">内供</span></td><td>INT-003</td><td>李包装</td><td>PKG-T02</td><td>—</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>显示 6 条，共 248 条</span>
|
||||
<button class="page-btn">‹</button>
|
||||
<button class="page-btn active">1</button>
|
||||
<button class="page-btn">2</button>
|
||||
<button class="page-btn">3</button>
|
||||
<button class="page-btn">…</button>
|
||||
<button class="page-btn">42</button>
|
||||
<button class="page-btn">›</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tab2: 餐品净菜包 -->
|
||||
<div class="tab-panel">
|
||||
<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></select>
|
||||
</div>
|
||||
<div class="filter-item"><label>日期</label><input class="filter-input" type="date"></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> <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>净重(g)</th><th>包含食材</th><th>包装时间</th><th>保质期至</th><th>存放温度(℃)</th><th>去向</th><th>关联单号</th><th>包装人</th><th>终端设备</th><th>操作</th>
|
||||
</tr></thead>
|
||||
<tbody>
|
||||
<tr><td>PKG-DH-001</td><td>NC-PROC-JXRJ-20260415-01</td><td>宫保鸡丁</td><td><span class="tag tag-green">标准份</span></td><td><span class="tag tag-gray">冷鲜袋 200g</span></td><td>200</td><td>鸡胸肉120g+花生20g+干辣椒5g</td><td>2026-04-15 10:20</td><td>2026-04-17 10:20</td><td>3.8</td><td><span class="tag tag-blue">内供</span></td><td>INT-001</td><td>赵配餐</td><td>PKG-T03</td><td>—</td></tr>
|
||||
<tr><td>PKG-DH-002</td><td>NC-PROC-JXRJ-20260415-01</td><td>宫保鸡丁</td><td><span class="tag tag-green">标准份</span></td><td><span class="tag tag-gray">冷鲜袋 200g</span></td><td>200</td><td>鸡胸肉120g+花生20g+干辣椒5g</td><td>2026-04-15 10:21</td><td>2026-04-17 10:21</td><td>3.8</td><td><span class="tag tag-blue">内供</span></td><td>INT-001</td><td>赵配餐</td><td>PKG-T03</td><td>—</td></tr>
|
||||
<tr><td>PKG-DH-003</td><td>NC-PROC-CAYO-20260415-01</td><td>清蒸鱼</td><td><span class="tag tag-green">标准份</span></td><td><span class="tag tag-gray">保鲜盒 250g</span></td><td>250</td><td>草鱼100g+姜片适量</td><td>2026-04-15 10:35</td><td>2026-04-17 10:35</td><td>3.5</td><td><span class="tag tag-blue">内供</span></td><td>INT-002</td><td>陈配餐</td><td>PKG-T03</td><td>—</td></tr>
|
||||
<tr><td>PKG-DH-004</td><td>NC-PROC-BOCA-20260415-01</td><td>蒜蓉菠菜</td><td><span class="tag tag-green">标准份</span></td><td><span class="tag tag-gray">冷鲜袋 180g</span></td><td>180</td><td>净菠菜120g+大蒜8g</td><td>2026-04-15 10:50</td><td>2026-04-17 10:50</td><td>4.0</td><td><span class="tag tag-orange">外售</span></td><td>EXT-001</td><td>陈配餐</td><td>PKG-T04</td><td>—</td></tr>
|
||||
<tr><td>PKG-DH-005</td><td>NC-PROC-HLUB-20260415-01</td><td>炒胡萝卜</td><td><span class="tag tag-blue">大份</span></td><td><span class="tag tag-gray">保鲜盒 320g</span></td><td>320</td><td>净胡萝卜260g+葱姜适量</td><td>2026-04-15 11:05</td><td>2026-04-17 11:05</td><td>4.2</td><td><span class="tag tag-blue">内供</span></td><td>INT-003</td><td>赵配餐</td><td>PKG-T04</td><td>—</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>显示 5 条，共 138 条</span>
|
||||
<button class="page-btn">‹</button>
|
||||
<button class="page-btn active">1</button>
|
||||
<button class="page-btn">2</button>
|
||||
<button class="page-btn">3</button>
|
||||
<button class="page-btn">…</button>
|
||||
<button class="page-btn">28</button>
|
||||
<button class="page-btn">›</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tab3: 包装设备 -->
|
||||
<div class="tab-panel">
|
||||
<div class="filter-bar">
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
</tr></thead>
|
||||
<tbody>
|
||||
<tr><td>PKG-T01</td><td>包装终端-1号</td><td>A区净菜加工线</td><td>186</td><td>0</td><td>186</td><td>2026-04-15 11:45</td><td><span class="tag tag-green">在线</span></td><td><span class="link">查看详情</span></td></tr>
|
||||
<tr><td>PKG-T02</td><td>包装终端-2号</td><td>B区净菜加工线</td><td>62</td><td>0</td><td>62</td><td>2026-04-15 11:30</td><td><span class="tag tag-green">在线</span></td><td><span class="link">查看详情</span></td></tr>
|
||||
<tr><td>PKG-T03</td><td>配餐终端-1号</td><td>A区组配工作台</td><td>0</td><td>86</td><td>86</td><td>2026-04-15 11:50</td><td><span class="tag tag-green">在线</span></td><td><span class="link">查看详情</span></td></tr>
|
||||
<tr><td>PKG-T04</td><td>配餐终端-2号</td><td>B区组配工作台</td><td>0</td><td>52</td><td>52</td><td>2026-04-15 11:20</td><td><span class="tag tag-gray">离线</span></td><td><span class="link">查看详情</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>显示 4 条，共 4 条</span>
|
||||
<button class="page-btn active">1</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<script>
|
||||
// Tab 切换
|
||||
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));
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,339 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>营养管理 - 仓储管理 | 健康长庆原型</title>
|
||||
<style>
|
||||
*{box-sizing:border-box;margin:0;padding:0;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#F5F7FA;color:#333;min-width:1280px;}
|
||||
:root{
|
||||
--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;
|
||||
--text-primary:#333;--text-secondary:#666;--text-placeholder:#999;--border:#E8E8E8;--background:#F5F7FA;
|
||||
--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--font-xxl:24px;
|
||||
--radius-sm:4px;--radius-md:8px;--radius-lg:12px;
|
||||
--shadow-sm:0 1px 4px rgba(0,0,0,0.08);--shadow-md:0 4px 12px rgba(0,0,0,0.12);
|
||||
}
|
||||
.top-bar{display:flex;align-items:center;height:56px;background:#001529;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;}
|
||||
.top-bar__logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:var(--font-lg);font-weight:600;white-space:nowrap;width:240px;flex-shrink:0;}
|
||||
.top-bar__logo svg{width:28px;height:28px;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.top-bar__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.top-bar__right .btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.top-bar__right .btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);cursor:pointer;}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;text-transform:uppercase;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.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);}
|
||||
.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;}
|
||||
.stat-card__icon.blue{background:var(--primary-light);}
|
||||
.stat-card__icon.green{background:#F6FFED;}
|
||||
.stat-card__icon.orange{background:#FFF7E6;}
|
||||
.stat-card__icon.red{background:#FFF1F0;}
|
||||
.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-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;}
|
||||
.filter-input:focus{border-color:var(--primary);}
|
||||
.filter-select{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);color:var(--text-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='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;cursor:pointer;min-width:120px;}
|
||||
.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;}
|
||||
.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);}
|
||||
.tag-orange{background:#FFF7E6;color:var(--warning);}
|
||||
.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;}
|
||||
.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;}
|
||||
.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;}
|
||||
.action-bar{display:flex;align-items:center;gap:8px;margin-bottom:16px;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- 顶部导航栏 -->
|
||||
<header class="top-bar">
|
||||
<div class="top-bar__logo">
|
||||
<svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M7 14h14M14 7v14" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/></svg>
|
||||
营养管理
|
||||
</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="trace-query.html">溯源总览</a>
|
||||
<a href="arc-employee.html">档案</a>
|
||||
<a href="farm-land.html">绿色种采</a>
|
||||
<a href="sup-hygiene-check.html" class="active">卫生供应</a>
|
||||
<a href="prod-qc-daily.html">健康生产</a>
|
||||
<a href="din-dict-mgmt.html">营养用餐</a>
|
||||
<a href="ano-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<a href="../../index.html" class="btn-back">← 返回首页</a>
|
||||
<div class="avatar">管</div>
|
||||
<span>系统管理员 ▾</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- 侧边栏：卫生供应 -->
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">卫生供应</div>
|
||||
<a href="sup-hygiene-check.html" class="sidebar-item"><span class="mi">🔬</span>卫生检测</a>
|
||||
<a href="sup-in-raw.html" class="sidebar-item"><span class="mi">📥</span>毛菜入库</a>
|
||||
<a href="sup-warehouse.html" class="sidebar-item active"><span class="mi">🏭</span>仓储管理</a>
|
||||
<a href="sup-in-clean.html" class="sidebar-item"><span class="mi">🥬</span>净菜加工</a>
|
||||
<a href="sup-in-cleanin.html" class="sidebar-item"><span class="mi">📦</span>净菜入库</a>
|
||||
<a href="sup-pkg-label.html" class="sidebar-item"><span class="mi">🏷️</span>净菜包装</a>
|
||||
<a href="sup-clean-internal.html" class="sidebar-item"><span class="mi">🏠</span>净菜内供</a>
|
||||
<a href="sup-clean-external.html" class="sidebar-item"><span class="mi">🚛</span>净菜外售</a>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容 -->
|
||||
<main class="main">
|
||||
<!-- 统计卡片 -->
|
||||
<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">3座</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">12个</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">18种</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">2项</div><div class="stat-card__label">临期预警</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 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>
|
||||
|
||||
<!-- Tab1: 仓库档案 -->
|
||||
<div class="tab-panel active">
|
||||
<div class="filter-bar">
|
||||
<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>冷藏(0~4℃)</option><option>冷冻(-18℃)</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" onclick="openModal()">➕ 新增仓库</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>
|
||||
</tr></thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>WH-A</td><td>A仓-蔬菜常温库</td><td>加工中心一楼北侧</td><td><span class="tag tag-gray">常温</span></td><td>500</td><td>312</td><td><span class="tag tag-green">62.4%</span></td><td><span class="tag tag-green">正常</span></td><td><span class="link">编辑</span> <span class="link" onclick="openModal()">查看详情</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>WH-B</td><td>B仓-肉类冷藏库</td><td>加工中心一楼南侧</td><td><span class="tag tag-blue">冷藏(0~4℃)</span></td><td>200</td><td>148</td><td><span class="tag tag-orange">74.0%</span></td><td><span class="tag tag-green">正常</span></td><td><span class="link">编辑</span> <span class="link" onclick="openModal()">查看详情</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>WH-C</td><td>C仓-水产冷冻库</td><td>加工中心地下一层</td><td><span class="tag tag-blue">冷冻(-18℃)</span></td><td>150</td><td>60</td><td><span class="tag tag-green">40.0%</span></td><td><span class="tag tag-green">正常</span></td><td><span class="link">编辑</span> <span class="link" onclick="openModal()">查看详情</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>显示 3 条，共 3 条</span>
|
||||
<button class="page-btn active">1</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tab2: 区域管理 -->
|
||||
<div class="tab-panel">
|
||||
<div class="filter-bar">
|
||||
<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>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><option>猪肉类</option><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>
|
||||
</tr></thead>
|
||||
<tbody>
|
||||
<tr><td>WH-A-01</td><td>A仓-蔬菜区-01</td><td>A仓-蔬菜常温库</td><td>叶菜类</td><td>80</td><td><span class="tag tag-orange">71%</span></td><td><span class="tag tag-green">正常</span></td><td><span class="link">编辑</span> <span class="link" onclick="openModal()">查看详情</span></td></tr>
|
||||
<tr><td>WH-A-02</td><td>A仓-蔬菜区-02</td><td>A仓-蔬菜常温库</td><td>叶菜类</td><td>80</td><td><span class="tag tag-green">45%</span></td><td><span class="tag tag-green">正常</span></td><td><span class="link">编辑</span> <span class="link" onclick="openModal()">查看详情</span></td></tr>
|
||||
<tr><td>WH-A-03</td><td>A仓-蔬菜区-03</td><td>A仓-蔬菜常温库</td><td>根茎类</td><td>100</td><td><span class="tag tag-orange">82%</span></td><td><span class="tag tag-green">正常</span></td><td><span class="link">编辑</span> <span class="link" onclick="openModal()">查看详情</span></td></tr>
|
||||
<tr><td>WH-A-04</td><td>A仓-蔬菜区-04</td><td>A仓-蔬菜常温库</td><td>瓜果类</td><td>80</td><td><span class="tag tag-green">30%</span></td><td><span class="tag tag-green">正常</span></td><td><span class="link">编辑</span> <span class="link" onclick="openModal()">查看详情</span></td></tr>
|
||||
<tr><td>WH-B-01</td><td>B仓-肉类区-01</td><td>B仓-肉类冷藏库</td><td>猪肉类</td><td>60</td><td><span class="tag tag-red">88%</span></td><td><span class="tag tag-green">正常</span></td><td><span class="link">编辑</span> <span class="link" onclick="openModal()">查看详情</span></td></tr>
|
||||
<tr><td>WH-B-02</td><td>B仓-肉类区-02</td><td>B仓-肉类冷藏库</td><td>禽肉类</td><td>60</td><td><span class="tag tag-green">55%</span></td><td><span class="tag tag-green">正常</span></td><td><span class="link">编辑</span> <span class="link" onclick="openModal()">查看详情</span></td></tr>
|
||||
<tr><td>WH-B-03</td><td>B仓-肉类区-03</td><td>B仓-肉类冷藏库</td><td>蛋品类</td><td>40</td><td><span class="tag tag-green">62%</span></td><td><span class="tag tag-green">正常</span></td><td><span class="link">编辑</span> <span class="link" onclick="openModal()">查看详情</span></td></tr>
|
||||
<tr><td>WH-C-01</td><td>C仓-水产区-01</td><td>C仓-水产冷冻库</td><td>淡水鱼类</td><td>80</td><td><span class="tag tag-green">50%</span></td><td><span class="tag tag-green">正常</span></td><td><span class="link">编辑</span> <span class="link" onclick="openModal()">查看详情</span></td></tr>
|
||||
<tr><td>WH-C-02</td><td>C仓-水产区-02</td><td>C仓-水产冷冻库</td><td>海水产类</td><td>70</td><td><span class="tag tag-green">25%</span></td><td><span class="tag tag-green">正常</span></td><td><span class="link">编辑</span> <span class="link" onclick="openModal()">查看详情</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>显示 9 条，共 12 条</span>
|
||||
<button class="page-btn">‹</button>
|
||||
<button class="page-btn active">1</button>
|
||||
<button class="page-btn">2</button>
|
||||
<button class="page-btn">›</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tab3: 在库库存 -->
|
||||
<div class="tab-panel">
|
||||
<div class="filter-bar">
|
||||
<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>A仓-蔬菜区-01</option><option>A仓-蔬菜区-02</option><option>A仓-蔬菜区-03</option><option>A仓-蔬菜区-04</option><option>B仓-肉类区-01</option><option>B仓-肉类区-02</option><option>B仓-肉类区-03</option><option>C仓-水产区-01</option><option>C仓-水产区-02</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="date"></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"><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>入库量(kg)</th><th>已出量(kg)</th><th>在库量(kg)</th><th>入库时间</th><th>保质期至</th><th>库存状态</th><th>操作</th>
|
||||
</tr></thead>
|
||||
<tbody>
|
||||
<tr><td>菠菜</td><td>IN-20260415-001</td><td>A仓-蔬菜区-01</td><td>286</td><td>61</td><td><span class="tag tag-green">225</span></td><td>2026-04-15 10:30</td><td>2026-04-18</td><td><span class="tag tag-green">正常</span></td><td><span class="link">编辑</span> <span class="link">查看详情</span></td></tr>
|
||||
<tr><td>菠菜</td><td>IN-20260415-002</td><td>A仓-蔬菜区-02</td><td>50</td><td>20</td><td><span class="tag tag-green">30</span></td><td>2026-04-15 08:30</td><td>2026-04-18</td><td><span class="tag tag-green">正常</span></td><td><span class="link">编辑</span> <span class="link">查看详情</span></td></tr>
|
||||
<tr><td>猪里脊</td><td>IN-20260415-003</td><td>B仓-肉类区-01</td><td>80</td><td>40</td><td><span class="tag tag-orange">40</span></td><td>2026-04-15 09:15</td><td>2026-04-19</td><td><span class="tag tag-orange">偏低</span></td><td><span class="link">编辑</span> <span class="link">查看详情</span></td></tr>
|
||||
<tr><td>草鱼</td><td>IN-20260415-004</td><td>C仓-水产区-01</td><td>60</td><td>0</td><td><span class="tag tag-red">60</span></td><td>2026-04-15 09:45</td><td>2026-04-15</td><td><span class="tag tag-red">已隔离</span></td><td><span class="link">编辑</span> <span class="link">查看详情</span></td></tr>
|
||||
<tr><td>胡萝卜</td><td>IN-20260416-005</td><td>A仓-蔬菜区-03</td><td>420</td><td>0</td><td><span class="tag tag-green">420</span></td><td>2026-04-16 11:00</td><td>2026-04-23</td><td><span class="tag tag-green">正常</span></td><td><span class="link">编辑</span> <span class="link">查看详情</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>显示 5 条，共 18 条</span>
|
||||
<button class="page-btn">‹</button>
|
||||
<button class="page-btn active">1</button>
|
||||
<button class="page-btn">2</button>
|
||||
<button class="page-btn">3</button>
|
||||
<button class="page-btn">4</button>
|
||||
<button class="page-btn">›</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<script>
|
||||
// Tab 切换
|
||||
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(){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();});
|
||||
</script>
|
||||
|
||||
<!-- 新增仓库/区域弹窗 -->
|
||||
<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><input type="text" placeholder="请输入仓库编号"></div>
|
||||
<div class="form-item"><label>仓库名称<span class="required">*</span></label><input type="text" placeholder="请输入仓库名称"></div>
|
||||
<div class="form-item"><label>位置<span class="required">*</span></label><input type="text" placeholder="请输入仓库位置"></div>
|
||||
<div class="form-item"><label>温区类型<span class="required">*</span></label><select><option>请选择</option><option>常温</option><option>冷藏(0~4℃)</option><option>冷冻(-18℃)</option></select></div>
|
||||
<div class="form-item"><label>总容量(㎥)<span class="required">*</span></label><input type="number" placeholder="请输入总容量"></div>
|
||||
<div class="form-item"></div>
|
||||
<div class="form-item full"><label>备注</label><textarea placeholder="请输入备注信息"></textarea></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="btn btn-default" onclick="closeModal()">取消</button>
|
||||
<button class="btn btn-primary">确定</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,299 @@
|
||||
<!DOCTYPE html>
|
||||
<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;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#F5F7FA;color:#333;min-width:1280px;}
|
||||
:root{
|
||||
--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;
|
||||
--text-primary:#333;--text-secondary:#666;--text-placeholder:#999;--border:#E8E8E8;--background:#F5F7FA;
|
||||
--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--font-xxl:24px;
|
||||
--radius-sm:4px;--radius-md:8px;--radius-lg:12px;
|
||||
--shadow-sm:0 1px 4px rgba(0,0,0,0.08);--shadow-md:0 4px 12px rgba(0,0,0,0.12);
|
||||
}
|
||||
/* 顶部导航 */
|
||||
.top-bar{display:flex;align-items:center;height:56px;background:#001529;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;}
|
||||
.top-bar__logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:var(--font-lg);font-weight:600;white-space:nowrap;width:240px;flex-shrink:0;}
|
||||
.top-bar__logo svg{width:28px;height:28px;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.top-bar__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.top-bar__right .btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.top-bar__right .btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);cursor:pointer;}
|
||||
/* 侧边栏 */
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;text-transform:uppercase;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.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;}
|
||||
.sidebar-subgroup__header{display:flex;align-items:center;gap:6px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;user-select:none;}
|
||||
.sidebar-subgroup__header:hover{color:rgba(255,255,255,0.85);background:rgba(255,255,255,0.04);}
|
||||
.sidebar-subgroup__header .arrow{width:10px;height:10px;transition:transform .2s;flex-shrink:0;}
|
||||
.sidebar-subgroup__header .arrow path{stroke:rgba(255,255,255,0.45);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header{color:rgba(255,255,255,0.85);}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__header .arrow{transform:rotate(90deg);}
|
||||
.sidebar-subgroup__body{display:none;padding-left:16px;}
|
||||
.sidebar-subgroup.open>.sidebar-subgroup__body{display:block;}
|
||||
.sidebar-subgroup__body .sidebar-item{padding-left:36px;font-size:12px;}
|
||||
/* 主内容 */
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;min-height:calc(100vh - 56px);}
|
||||
/* 筛选栏 */
|
||||
.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:200px;}
|
||||
.filter-input:focus{border-color:var(--primary);}
|
||||
.filter-select{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);color:var(--text-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='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;cursor:pointer;min-width:120px;}
|
||||
.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);}
|
||||
.btn-danger{background:#fff;color:var(--danger);border:1px solid var(--danger);}.btn-danger:hover{background:#fff1f0;}
|
||||
/* 表格 */
|
||||
.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;}
|
||||
.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);}
|
||||
.tag-orange{background:#FFF7E6;color:var(--warning);}
|
||||
.tag-red{background:#FFF1F0;color:var(--danger);}
|
||||
.tag-gray{background:#F5F5F5;color:#999;}
|
||||
.link{color:var(--primary);cursor:pointer;font-size:var(--font-sm);text-decoration:none;}.link:hover{color:#40a9ff;}
|
||||
/* 分页 */
|
||||
.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);}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- 顶部导航 -->
|
||||
<div class="top-bar">
|
||||
<div class="top-bar__logo">
|
||||
<svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M7 14h14M14 7v14" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/></svg>
|
||||
营养管理
|
||||
</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="trace-query.html" class="active">溯源总览</a>
|
||||
<a href="arc-employee.html">档案</a>
|
||||
<a href="farm-land.html">绿色种采</a>
|
||||
<a href="sup-hygiene-check.html">卫生供应</a>
|
||||
<a href="prod-qc-daily.html">健康生产</a>
|
||||
<a href="din-dict-mgmt.html">营养用餐</a>
|
||||
<a href="ano-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<a class="btn-back" href="../../index.html">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M10 3L5 8l5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
返回首页
|
||||
</a>
|
||||
<div class="avatar">管</div>
|
||||
<span style="color:rgba(255,255,255,0.65);">系统管理员 ▾</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 侧边栏 -->
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">溯源总览</div>
|
||||
<a href="trace-query.html" class="sidebar-item active"><span class="mi">🔎</span>溯源查询</a>
|
||||
<a href="trace-timeline.html" class="sidebar-item"><span class="mi">➡️</span>链路可视化</a>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容 -->
|
||||
<main class="main">
|
||||
<!-- 筛选栏 -->
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item">
|
||||
<label>餐品溯源码/菜品名称</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入餐品溯源码或菜品名称" style="min-width:240px;">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>就餐日期</label>
|
||||
<input class="filter-input" type="date">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>来源类型</label>
|
||||
<select class="filter-select">
|
||||
<option>全部</option><option>自产种植</option><option>自产养殖</option><option>外采</option>
|
||||
</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">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><circle cx="6" cy="6" r="4" stroke="currentColor" stroke-width="1.4"/><path d="M10 10l2.5 2.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
查询
|
||||
</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
</div>
|
||||
|
||||
<!-- 数据表格 -->
|
||||
<div class="table-card">
|
||||
<div class="table-card__header">
|
||||
<div class="table-card__title">溯源查询</div>
|
||||
</div>
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>餐品溯源码</th>
|
||||
<th>菜品名称</th>
|
||||
<th>就餐日期</th>
|
||||
<th>来源类型</th>
|
||||
<th>产地/供应商</th>
|
||||
<th>种植/养殖批次</th>
|
||||
<th>检测结论</th>
|
||||
<th>烹制厨师</th>
|
||||
<th>上餐时间</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>TR-20260422-001</td>
|
||||
<td>宫保鸡丁</td>
|
||||
<td>2026-04-22 午餐</td>
|
||||
<td><span class="tag tag-green">自产养殖</span></td>
|
||||
<td>B3-鸡舍</td>
|
||||
<td>ST-FH-FL02-MT-HWJJ-1200-20260315-001</td>
|
||||
<td><span class="tag tag-green">合格</span></td>
|
||||
<td>张厨师</td>
|
||||
<td>11:30</td>
|
||||
<td><a class="link" href="trace-timeline.html">查看食材链路</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>TR-20260422-002</td>
|
||||
<td>蒜蓉菠菜</td>
|
||||
<td>2026-04-22 午餐</td>
|
||||
<td><span class="tag tag-green">自产种植</span></td>
|
||||
<td>A区蔬菜基地</td>
|
||||
<td>ST-FH-FA01-VG-BOCA-286K-20260415-001</td>
|
||||
<td><span class="tag tag-green">合格</span></td>
|
||||
<td>李厨师</td>
|
||||
<td>11:32</td>
|
||||
<td><a class="link" href="trace-timeline.html">查看食材链路</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>TR-20260422-003</td>
|
||||
<td>番茄鸡蛋汤</td>
|
||||
<td>2026-04-22 午餐</td>
|
||||
<td><span class="tag tag-blue">外采</span></td>
|
||||
<td>绿源蔬菜配送</td>
|
||||
<td>ST-EX-LY01-VG-CGSR-030K-20260415-001</td>
|
||||
<td><span class="tag tag-green">合格</span></td>
|
||||
<td>王厨师</td>
|
||||
<td>11:28</td>
|
||||
<td><a class="link" href="trace-timeline.html">查看食材链路</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>TR-20260422-004</td>
|
||||
<td>米饭</td>
|
||||
<td>2026-04-22 午餐</td>
|
||||
<td><span class="tag tag-blue">外采</span></td>
|
||||
<td>粮油批发商行</td>
|
||||
<td>ST-EX-LY02-DG-DAMI-1000-20260413-001</td>
|
||||
<td><span class="tag tag-green">合格</span></td>
|
||||
<td>—</td>
|
||||
<td>11:25</td>
|
||||
<td><a class="link" href="trace-timeline.html">查看食材链路</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>TR-20260421-005</td>
|
||||
<td>红烧肉</td>
|
||||
<td>2026-04-21 午餐</td>
|
||||
<td><span class="tag tag-blue">外采</span></td>
|
||||
<td>鲜肉直供公司</td>
|
||||
<td>ST-EX-XR01-MT-ZLRJ-080K-20260415-005</td>
|
||||
<td><span class="tag tag-green">合格</span></td>
|
||||
<td>张厨师</td>
|
||||
<td>11:35</td>
|
||||
<td><a class="link" href="trace-timeline.html">查看食材链路</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>TR-20260421-006</td>
|
||||
<td>清蒸鱼</td>
|
||||
<td>2026-04-21 午餐</td>
|
||||
<td><span class="tag tag-blue">外采</span></td>
|
||||
<td>海鲜水产配送</td>
|
||||
<td>ST-EX-HS01-SF-CAYO-060K-20260414-001</td>
|
||||
<td><span class="tag tag-green">合格</span></td>
|
||||
<td>王厨师</td>
|
||||
<td>11:40</td>
|
||||
<td><a class="link" href="trace-timeline.html">查看食材链路</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>TR-20260421-007</td>
|
||||
<td>炒时蔬</td>
|
||||
<td>2026-04-21 午餐</td>
|
||||
<td><span class="tag tag-green">自产种植</span></td>
|
||||
<td>A区蔬菜基地</td>
|
||||
<td>ST-FH-FA01-VG-BOCA-286K-20260415-001</td>
|
||||
<td><span class="tag tag-green">合格</span></td>
|
||||
<td>李厨师</td>
|
||||
<td>11:30</td>
|
||||
<td><a class="link" href="trace-timeline.html">查看食材链路</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>TR-20260420-008</td>
|
||||
<td>宫保鸡丁</td>
|
||||
<td>2026-04-20 午餐</td>
|
||||
<td><span class="tag tag-green">自产养殖</span></td>
|
||||
<td>B3-鸡舍</td>
|
||||
<td>ST-FH-FL02-MT-HWJJ-1200-20260315-001</td>
|
||||
<td><span class="tag tag-green">合格</span></td>
|
||||
<td>张厨师</td>
|
||||
<td>11:32</td>
|
||||
<td><a class="link" href="trace-timeline.html">查看食材链路</a></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<!-- 分页 -->
|
||||
<div class="pagination">
|
||||
<span>显示 8 条，共 128 条</span>
|
||||
<button class="page-btn">‹</button>
|
||||
<button class="page-btn active">1</button>
|
||||
<button class="page-btn">2</button>
|
||||
<button class="page-btn">3</button>
|
||||
<span>...</span>
|
||||
<button class="page-btn">›</button>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<script>
|
||||
/* 侧边栏展开/折叠交互 */
|
||||
function toggleSubgroup(header){
|
||||
header.parentElement.classList.toggle('open');
|
||||
}
|
||||
/* 页面加载时自动展开当前页面所在的子分组 */
|
||||
(function(){
|
||||
var active=document.querySelector('.sidebar-item.active');
|
||||
if(!active)return;
|
||||
var sub=active.closest('.sidebar-subgroup');
|
||||
if(sub)sub.classList.add('open');
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,480 @@
|
||||
<!DOCTYPE html>
|
||||
<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;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#F5F7FA;color:#333;min-width:1280px;}
|
||||
:root{
|
||||
--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;
|
||||
--text-primary:#333;--text-secondary:#666;--text-placeholder:#999;--border:#E8E8E8;--background:#F5F7FA;
|
||||
--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--font-xxl:24px;
|
||||
--radius-sm:4px;--radius-md:8px;--radius-lg:12px;
|
||||
--shadow-sm:0 1px 4px rgba(0,0,0,0.08);--shadow-md:0 4px 12px rgba(0,0,0,0.12);
|
||||
}
|
||||
/* 顶部导航 */
|
||||
.top-bar{display:flex;align-items:center;height:56px;background:#001529;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;}
|
||||
.top-bar__logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:var(--font-lg);font-weight:600;white-space:nowrap;width:240px;flex-shrink:0;}
|
||||
.top-bar__logo svg{width:28px;height:28px;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.top-bar__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.top-bar__right .btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.top-bar__right .btn-back:hover{color:#fff;}
|
||||
.avatar{width:28px;height:28px;border-radius:50%;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;}
|
||||
/* 侧边栏 */
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;padding-top:8px;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;text-transform:uppercase;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:8px;padding:10px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .15s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.mi{font-size:14px;opacity:0.8;}
|
||||
.sidebar-item.active .mi{opacity:0.9;}
|
||||
/* 主内容 */
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;min-height:calc(100vh - 56px);}
|
||||
|
||||
/* 维度TAB */
|
||||
.dimension-tabs{display:flex;gap:0;background:#fff;border-radius:var(--radius-md) var(--radius-md) 0 0;border-bottom:2px solid var(--border);padding:0 24px;box-shadow:var(--shadow-sm);}
|
||||
.dimension-tab{padding:14px 24px;font-size:var(--font-sm);cursor:pointer;color:var(--text-secondary);border-bottom:2px solid transparent;margin-bottom:-2px;transition:all .2s;font-weight:500;}
|
||||
.dimension-tab:hover{color:var(--primary);}
|
||||
.dimension-tab.active{color:var(--primary);border-bottom-color:var(--primary);font-weight:600;}
|
||||
|
||||
/* 查询栏 */
|
||||
.search-bar{display:flex;align-items:center;gap:12px;background:#fff;padding:16px 24px;border-radius:0 0 var(--radius-md) var(--radius-md);box-shadow:var(--shadow-sm);margin-bottom:16px;}
|
||||
.search-input{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);outline:none;transition:border-color .2s;min-width:180px;}
|
||||
.search-input:focus{border-color:var(--primary);}
|
||||
.search-select{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);outline:none;min-width:140px;background:#fff;cursor:pointer;}
|
||||
.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);}
|
||||
|
||||
/* 维度面板 */
|
||||
.dimension-panel{display:none;}
|
||||
.dimension-panel.active{display:block;}
|
||||
|
||||
/* 餐品信息卡 */
|
||||
.trace-header{background:#fff;border-radius:var(--radius-md);padding:20px 24px;margin-bottom:16px;box-shadow:var(--shadow-sm);}
|
||||
.trace-header__top{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
|
||||
.trace-header__title{font-size:var(--font-lg);font-weight:600;display:flex;align-items:center;gap:8px;}
|
||||
.trace-header__status{display:inline-flex;align-items:center;gap:4px;padding:4px 12px;border-radius:12px;font-size:var(--font-xs);font-weight:600;background:#F6FFED;color:var(--success);border:1px solid #B7EB8F;}
|
||||
.trace-header__status-dot{width:6px;height:6px;border-radius:50%;background:var(--success);}
|
||||
.trace-header__grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;}
|
||||
.trace-header__item{display:flex;flex-direction:column;gap:4px;}
|
||||
.trace-header__label{font-size:var(--font-xs);color:var(--text-placeholder);}
|
||||
.trace-header__value{font-size:var(--font-sm);color:var(--text-primary);font-weight:500;}
|
||||
|
||||
/* 食材标签页 */
|
||||
.ingredient-tabs{display:flex;gap:0;margin-bottom:16px;border-bottom:2px solid var(--border);background:#fff;border-radius:var(--radius-md) var(--radius-md) 0 0;padding:0 24px;box-shadow:var(--shadow-sm);}
|
||||
.ingredient-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;white-space:nowrap;}
|
||||
.ingredient-tab:hover{color:var(--primary);}
|
||||
.ingredient-tab.active{color:var(--primary);border-bottom-color:var(--primary);font-weight:500;}
|
||||
|
||||
/* 食材信息卡 */
|
||||
.ingredient-info{background:#fff;border-radius:var(--radius-md);padding:16px 24px;margin-bottom:16px;box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:24px;}
|
||||
.ingredient-info__name{font-size:var(--font-base);font-weight:600;}
|
||||
.ingredient-info__item{display:flex;align-items:center;gap:6px;font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
.ingredient-info__item span{color:var(--text-primary);}
|
||||
.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);}
|
||||
|
||||
/* 时间线容器 */
|
||||
.timeline-container{background:#fff;border-radius:var(--radius-md);padding:24px;box-shadow:var(--shadow-sm);}
|
||||
|
||||
/* 横向管道概览 */
|
||||
.pipeline{display:flex;align-items:flex-start;gap:0;overflow-x:auto;padding:16px 0 24px;margin-bottom:24px;position:relative;}
|
||||
.pipeline-node{display:flex;flex-direction:column;align-items:center;min-width:80px;position:relative;cursor:pointer;}
|
||||
.pipeline-node__dot{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:15px;color:#fff;position:relative;z-index:2;transition:all .2s;border:2px solid transparent;}
|
||||
.pipeline-node:hover .pipeline-node__dot{transform:scale(1.15);}
|
||||
.pipeline-node.active .pipeline-node__dot{border-color:var(--primary);box-shadow:0 0 0 4px rgba(24,144,255,0.15);}
|
||||
.pipeline-node__line{position:absolute;top:18px;left:calc(50% + 18px);right:calc(-50% + 18px);height:2px;background:var(--border);z-index:1;}
|
||||
.pipeline-node:last-child .pipeline-node__line{display:none;}
|
||||
.pipeline-node__label{font-size:10px;color:var(--text-secondary);margin-top:8px;text-align:center;max-width:70px;line-height:1.3;}
|
||||
.pipeline-node.active .pipeline-node__label{color:var(--primary);font-weight:600;}
|
||||
/* 分支角标 */
|
||||
.pipeline-node__badge{position:absolute;top:-4px;right:-4px;background:#FF4D4F;color:#fff;font-size:9px;font-weight:700;padding:1px 4px;border-radius:8px;line-height:1.2;z-index:3;min-width:16px;text-align:center;}
|
||||
/* 状态小圆点 */
|
||||
.pipeline-node__status{position:absolute;bottom:-2px;right:0;width:10px;height:10px;border-radius:50%;border:2px solid #fff;z-index:3;}
|
||||
.pipeline-node__status--ok{background:var(--success);}
|
||||
.pipeline-node__status--warn{background:var(--warning);}
|
||||
.pipeline-node__status--error{background:var(--danger);}
|
||||
|
||||
/* 节点详情 */
|
||||
.node-detail-panel{display:none;animation:fadeIn .25s ease;}
|
||||
.node-detail-panel.active{display:block;}
|
||||
@keyframes fadeIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}
|
||||
.node-card{display:flex;gap:16px;padding:16px;border:1px solid var(--border);border-radius:var(--radius-md);transition:all .2s;margin-bottom:12px;}
|
||||
.node-card:hover{border-color:var(--primary);box-shadow:0 2px 8px rgba(24,144,255,0.1);}
|
||||
.node-card__icon{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;}
|
||||
.node-card__body{flex:1;min-width:0;}
|
||||
.node-card__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;}
|
||||
.node-card__stage{font-size:var(--font-sm);font-weight:600;color:var(--text-primary);}
|
||||
.node-card__time{font-size:var(--font-xs);color:var(--text-placeholder);}
|
||||
.node-card__title{font-size:var(--font-sm);color:var(--text-secondary);margin-bottom:6px;}
|
||||
.node-card__trace{font-size:var(--font-xs);color:var(--text-placeholder);margin-bottom:8px;}
|
||||
.node-card__detail{font-size:var(--font-xs);color:var(--text-secondary);line-height:1.8;background:#FAFAFA;border-radius:var(--radius-sm);padding:10px 12px;}
|
||||
.node-card__video{display:inline-flex;align-items:center;gap:4px;margin-top:10px;padding:4px 12px;border-radius:var(--radius-sm);background:#F0F5FF;color:var(--primary);font-size:var(--font-xs);cursor:pointer;border:1px solid #ADC6FF;transition:all .15s;}
|
||||
.node-card__video:hover{background:var(--primary-light);border-color:var(--primary);}
|
||||
|
||||
/* 隐藏非活跃食材面板 */
|
||||
.ingredient-panel{display:none;}
|
||||
.ingredient-panel.active{display:block;}
|
||||
|
||||
/* 视频弹窗 */
|
||||
.modal-overlay{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.55);z-index:1000;align-items:center;justify-content:center;}
|
||||
.modal-overlay.active{display:flex;}
|
||||
.modal{background:#fff;border-radius:var(--radius-lg);width:640px;max-width:90vw;box-shadow:0 12px 40px rgba(0,0,0,0.2);overflow:hidden;}
|
||||
.modal__header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border);}
|
||||
.modal__title{font-size:var(--font-base);font-weight:600;}
|
||||
.modal__close{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text-placeholder);transition:all .15s;}
|
||||
.modal__close:hover{background:#f5f5f5;color:var(--text-primary);}
|
||||
.modal__body{padding:20px;text-align:center;}
|
||||
.modal__video-placeholder{width:100%;height:320px;background:#000;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;color:#fff;font-size:48px;}
|
||||
.modal__info{margin-top:12px;font-size:var(--font-sm);color:var(--text-secondary);text-align:left;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- 顶部导航 -->
|
||||
<div class="top-bar">
|
||||
<div class="top-bar__logo">
|
||||
<svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M7 14h14M14 7v14" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/></svg>
|
||||
营养管理
|
||||
</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="trace-query.html" class="active">溯源总览</a>
|
||||
<a href="arc-employee.html">档案</a>
|
||||
<a href="farm-land.html">绿色种采</a>
|
||||
<a href="sup-hygiene-check.html">卫生供应</a>
|
||||
<a href="prod-qc-daily.html">健康生产</a>
|
||||
<a href="din-dict-mgmt.html">营养用餐</a>
|
||||
<a href="ano-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<a class="btn-back" href="../../index.html">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M10 3L5 8l5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
返回首页
|
||||
</a>
|
||||
<div class="avatar">管</div>
|
||||
<span style="color:rgba(255,255,255,0.65);">系统管理员 ▾</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 侧边栏 -->
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu__title">溯源总览</div>
|
||||
<a href="trace-query.html" class="sidebar-item"><span class="mi">🔎</span>溯源查询</a>
|
||||
<a href="trace-timeline.html" class="sidebar-item active"><span class="mi">➡️</span>链路可视化</a>
|
||||
</aside>
|
||||
|
||||
|
||||
<!-- 主内容 -->
|
||||
<main class="main">
|
||||
|
||||
<!-- 维度TAB切换 -->
|
||||
<div class="dimension-tabs">
|
||||
<div class="dimension-tab active" onclick="switchDimension(0)">餐品维度</div>
|
||||
<div class="dimension-tab" onclick="switchDimension(1)">食材维度</div>
|
||||
</div>
|
||||
|
||||
<!-- 查询栏 -->
|
||||
<div class="search-bar">
|
||||
<select class="search-select">
|
||||
<option>溯源码</option>
|
||||
<option>菜品名称</option>
|
||||
<option>食材名称</option>
|
||||
</select>
|
||||
<input class="search-input" type="text" placeholder="请输入溯源码" value="NC-PROC-20260422-01" style="flex:1;">
|
||||
<select class="search-select">
|
||||
<option>全部时间</option>
|
||||
<option>今天</option>
|
||||
<option>近7天</option>
|
||||
<option>近30天</option>
|
||||
</select>
|
||||
<button class="btn btn-primary">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><circle cx="6" cy="6" r="4" stroke="currentColor" stroke-width="1.4"/><path d="M10 10l2.5 2.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
查询
|
||||
</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
</div>
|
||||
|
||||
<!-- ===== 餐品维度面板 ===== -->
|
||||
<div class="dimension-panel active" id="dim-0">
|
||||
<!-- 餐品溯源信息卡 -->
|
||||
<div class="trace-header">
|
||||
<div class="trace-header__top">
|
||||
<div class="trace-header__title">🍳 宫保鸡丁（后厨生产批次）</div>
|
||||
<div class="trace-header__status"><span class="trace-header__status-dot"></span>全程合格</div>
|
||||
</div>
|
||||
<div class="trace-header__grid">
|
||||
<div class="trace-header__item"><div class="trace-header__label">溯源码</div><div class="trace-header__value">NC-PROC-20260422-01</div></div>
|
||||
<div class="trace-header__item"><div class="trace-header__label">菜品名称</div><div class="trace-header__value">宫保鸡丁</div></div>
|
||||
<div class="trace-header__item"><div class="trace-header__label">就餐时间</div><div class="trace-header__value">2026-04-22 午餐</div></div>
|
||||
<div class="trace-header__item"><div class="trace-header__label">烹制厨师</div><div class="trace-header__value">张厨师</div></div>
|
||||
<div class="trace-header__item"><div class="trace-header__label">食材数量</div><div class="trace-header__value">4 种</div></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 食材标签页 -->
|
||||
<div class="ingredient-tabs" id="ingredientTabs"></div>
|
||||
<!-- 食材信息卡 -->
|
||||
<div class="ingredient-info" id="ingredientInfo"></div>
|
||||
<!-- 共享管道+详情 -->
|
||||
<div class="timeline-container">
|
||||
<div class="pipeline" id="pipeline"></div>
|
||||
<div class="node-detail-panel active" id="nodeDetail"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ===== 食材维度面板 ===== -->
|
||||
<div class="dimension-panel" id="dim-1">
|
||||
<div class="trace-header" id="dim1Header"></div>
|
||||
<div class="timeline-container">
|
||||
<div class="pipeline" id="pipelineDim1"></div>
|
||||
<div class="node-detail-panel active" id="nodeDetailDim1"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</main>
|
||||
|
||||
<!-- 视频弹窗 -->
|
||||
<div class="modal-overlay" id="videoModal">
|
||||
<div class="modal">
|
||||
<div class="modal__header">
|
||||
<span class="modal__title" id="videoModalTitle">溯源视频</span>
|
||||
<div class="modal__close" onclick="closeVideoModal()">✕</div>
|
||||
</div>
|
||||
<div class="modal__body">
|
||||
<div class="modal__video-placeholder">▶</div>
|
||||
<div class="modal__info" id="videoModalInfo"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
/* ========== 数据定义 ========== */
|
||||
|
||||
/* 节点颜色映射 */
|
||||
var NODE_COLORS = {
|
||||
'采供入库':'#52C41A','卫生检测':'#1890FF','毛菜入库':'#13C2C2','毛菜存储':'#FA8C16',
|
||||
'净菜加工':'#52C41A','净菜入库':'#2F54EB','净菜内供':'#FA541C','净菜进柜':'#722ED1',
|
||||
'净菜组配':'#EB2F96','按单烹制':'#FAAD14','上餐监控':'#F5222D','余量处置':'#8C8C8C',
|
||||
'营养检验':'#13C2C2','用户取餐':'#1890FF','种植采收':'#52C41A','农残检测':'#1890FF',
|
||||
'干货入库':'#13C2C2','干货存储':'#FA8C16','预处理':'#52C41A'
|
||||
};
|
||||
var NODE_ICONS = {
|
||||
'采供入库':'🛒','卫生检测':'🔬','毛菜入库':'📥','毛菜存储':'🏪',
|
||||
'净菜加工':'🥬','净菜入库':'📦','净菜内供':'🚚','净菜进柜':'🗄️',
|
||||
'净菜组配':'🔪','按单烹制':'🍳','上餐监控':'🍽️','余量处置':'♻️',
|
||||
'营养检验':'🧪','用户取餐':'👤','种植采收':'🌱','农残检测':'🔬',
|
||||
'干货入库':'📥','干货存储':'🏪','预处理':'🥬'
|
||||
};
|
||||
var NODE_ICON_BG = {
|
||||
'采供入库':'#F6FFED','卫生检测':'#E6F7FF','毛菜入库':'#E6FFFB','毛菜存储':'#FFF7E6',
|
||||
'净菜加工':'#F6FFED','净菜入库':'#F0F5FF','净菜内供':'#FFF2E8','净菜进柜':'#F9F0FF',
|
||||
'净菜组配':'#FFF0F6','按单烹制':'#FFF7E6','上餐监控':'#FFF1F0','余量处置':'#F5F5F5',
|
||||
'营养检验':'#E6FFFB','用户取餐':'#E6F7FF','种植采收':'#F6FFED','农残检测':'#E6F7FF',
|
||||
'干货入库':'#E6FFFB','干货存储':'#FFF7E6','预处理':'#F6FFED'
|
||||
};
|
||||
|
||||
/* 餐品维度 - 4种食材数据 */
|
||||
var INGREDIENTS = [
|
||||
{
|
||||
name:'鸡胸肉', weight:'8.5kg', sourceType:'外采', sourceTag:'tag-blue', traceCode:'ST-EX-XR01-MT-JXRJ-080K-20260415-002',
|
||||
nodes:[
|
||||
{stage:'采供入库',time:'2026-04-15 09:15',title:'采购入库 · 鲜肉直供公司',trace:'ST-EX-XR01-MT-JXRJ-080K-20260415-002',detail:'品名：鸡胸肉 · 规格：10kg/箱<br>入库量：80kg · 批次号：JXRJ-20260415-002<br>供应商资质：食品经营许可证 有效期至2027-06<br>经办人：赵采购',badge:'',status:'ok',video:['采供入库','2026-04-15 09:15','仓库入口-CAM01','00:02:35']},
|
||||
{stage:'卫生检测',time:'2026-04-15 10:00',title:'入库检测 · 兽药残留+微生物',trace:'QC-MT-20260415-002',detail:'兽药残留：未检出<br>沙门氏菌：未检出 · 大肠杆菌：<10CFU/g<br>感官检查：色泽正常、弹性良好、无异味<br>检测结论：<strong style="color:#52c41a">合格</strong>',badge:'',status:'ok',video:['卫生检测','2026-04-15 10:00','检测室-CAM02','00:03:10']},
|
||||
{stage:'毛菜入库',time:'2026-04-15 11:00',title:'毛菜冷库入库',trace:'MC-IN-20260415-002',detail:'入库量：80kg · 库位：MC-A01-03<br>存储温度：0~4℃ · 经办人：王仓管',badge:'',status:'ok',video:['毛菜入库','2026-04-15 11:00','冷库-CAM04','00:01:45']},
|
||||
{stage:'毛菜存储',time:'2026-04-15 ~ 2026-04-22',title:'冷库存储 · 温度监控',trace:'库位：MC-A01-03',detail:'存储天数：7天 · 温度范围：0~4℃<br>湿度范围：85~90% · 无异常告警<br>剩余库存：32kg（已领用48kg）',badge:'',status:'ok',video:['毛菜存储','2026-04-20 08:00','冷库-CAM04','00:01:00']},
|
||||
{stage:'净菜加工',time:'2026-04-22 07:30',title:'鸡胸肉切丁加工（4条分支）',trace:'NC-JXRJ-20260422-001',detail:'分支A：切丁5kg→宫保鸡丁<br>分支B：切片3kg→辣子鸡<br>分支C：切条2kg→青椒鸡丁<br>分支D：整块1.5kg→白切鸡',badge:'x4',status:'ok',video:['净菜加工','2026-04-22 07:30','净菜间-CAM06','00:03:20']},
|
||||
{stage:'净菜入库',time:'2026-04-22 08:30',title:'净菜冷柜暂存（3条分支）',trace:'NC-ST-20260422-001',detail:'分支A：切丁5kg → 净菜柜NC-01<br>分支B：切片3kg → 净菜柜NC-02<br>分支C：切条2kg → 净菜柜NC-03',badge:'x3',status:'ok',video:['净菜入库','2026-04-22 08:30','净菜柜-CAM07','00:01:50']},
|
||||
{stage:'净菜内供',time:'2026-04-22 09:30',title:'净菜领用出库（3条分支）',trace:'NC-OUT-20260422-001',detail:'分支A：切丁5kg → 后厨A组<br>分支B：切片3kg → 后厨B组<br>分支C：切条2kg → 后厨C组',badge:'x3',status:'ok',video:['净菜内供','2026-04-22 09:30','出库口-CAM08','00:02:00']},
|
||||
{stage:'净菜进柜',time:'2026-04-22 09:45',title:'后厨冷柜暂存（2条分支）',trace:'KC-IN-20260422-001',detail:'分支A：切丁5kg → 后厨冷柜KC-01<br>分支B：切片3kg → 后厨冷柜KC-02',badge:'x2',status:'ok',video:['净菜进柜','2026-04-22 09:45','后厨柜-CAM08','00:01:20']},
|
||||
{stage:'净菜组配',time:'2026-04-22 10:20',title:'菜品组配（2条分支）',trace:'CMB-20260422-001',detail:'分支A：CMB-001 宫保鸡丁 5.0kg · 李组配<br>分支B：CMB-006 辣子鸡 3.5kg · 张组配',badge:'x2',status:'ok',video:['净菜组配','2026-04-22 10:20','组配间-CAM09','00:02:40']},
|
||||
{stage:'按单烹制',time:'2026-04-22 11:00 ~ 11:35',title:'烹制任务 · 多锅次烹制（3条分支）',trace:'COOK-20260422-001',detail:'分支A：COOK-001（宫保鸡丁）张厨师 2锅<br>分支B：COOK-009（辣子鸡）王厨师 1锅<br>分支C：COOK-015（青椒鸡丁）李厨师 1锅',badge:'x3',status:'ok',video:['按单烹制','2026-04-22 11:00','后厨-CAM10','00:04:20']},
|
||||
{stage:'上餐监控',time:'2026-04-22 11:30 ~ 12:00',title:'上餐批次 · 多餐线分发（3条分支）',trace:'SERVE-20260422-001',detail:'分支A：SERVE-001 → A区中餐线 6.8kg<br>分支B：SERVE-007 → B区中餐线 1.4kg<br>分支C：SERVE-015 → C区中餐线 2.1kg',badge:'x3',status:'ok',video:['上餐监控','2026-04-22 11:30','餐线-CAM11','00:03:05']},
|
||||
{stage:'余量处置',time:'2026-04-22 13:00 ~ 13:20',title:'余量处置 · 多餐线余量登记（3条分支）',trace:'DISP-20260422-001',detail:'分支A：余量0.3kg → 冷藏留用<br>分支B：余量0.1kg → 废弃销毁<br>分支C：余量0.2kg → 废弃销毁<br>经办人：李处置',badge:'x3',status:'ok',video:['余量处置','2026-04-22 13:00','余量区-CAM12','00:01:30']},
|
||||
{stage:'营养检验',time:'2026-04-22 13:30',title:'营养检测 · 成品抽检',trace:'NUT-20260422-001',detail:'COOK-001（宫保鸡丁）检测单号：NUT-20260422-001<br>热量：186kcal/100g · 蛋白质：18.2g · 脂肪：9.4g · 碳水：8.1g<br>检测结论：<strong style="color:#52c41a">达标</strong>',badge:'',status:'ok',video:['营养检验','2026-04-22 13:30','检测室-CAM13','00:02:15']},
|
||||
{stage:'用户取餐',time:'2026-04-22 11:40 ~ 12:30',title:'关联订单食材映射',trace:'ORD-20260422-021',detail:'关联订单：SO20260422021#1、SO20260422087#2、SO20260422103#1<br>用于召回时可直接反查受影响订单范围',badge:'',status:'ok',video:['用户取餐','2026-04-22 11:40','取餐口-CAM14','00:01:50']}
|
||||
]
|
||||
},
|
||||
{
|
||||
name:'花生', weight:'1.2kg', sourceType:'外采', sourceTag:'tag-blue', traceCode:'ST-EX-HS02-DG-HS-012K-20260414-005',
|
||||
nodes:[
|
||||
{stage:'采供入库',time:'2026-04-14 14:30',title:'采购入库 · 华盛干货批发',trace:'ST-EX-HS02-DG-HS-012K-20260414-005',detail:'品名：花生仁（去壳）· 规格：5kg/袋<br>入库量：12kg · 批次号：HS-20260414-005<br>供应商资质：食品经营许可证 有效期至2027-03<br>经办人：赵采购',badge:'',status:'ok',video:['采供入库','2026-04-14 14:30','仓库-CAM01','00:01:45']},
|
||||
{stage:'卫生检测',time:'2026-04-14 15:00',title:'入库检测 · 黄曲霉毒素+农残',trace:'QC-DG-20260414-005',detail:'黄曲霉毒素B1：未检出（限值≤5μg/kg）<br>农药残留：未检出<br>感官检查：色泽正常、无霉变、无异味<br>检测结论：<strong style="color:#52c41a">合格</strong>',badge:'',status:'ok',video:['卫生检测','2026-04-14 15:00','检测室-CAM02','00:02:10']},
|
||||
{stage:'干货入库',time:'2026-04-14 15:30',title:'干货仓入库 · 花生仁',trace:'DG-IN-20260414-005',detail:'入库量：12kg · 库位：DG-A03-02<br>保质期至：2026-10-14 · 存储温度：常温干燥<br>经办人：王仓管',badge:'',status:'ok',video:['干货入库','2026-04-14 15:30','干货仓-CAM03','00:01:20']},
|
||||
{stage:'干货存储',time:'2026-04-14 ~ 2026-04-22',title:'干货仓存储 · 温湿度监控',trace:'库位：DG-A03-02',detail:'存储天数：8天 · 温度范围：18~22℃<br>湿度范围：45~55% · 无异常告警<br>剩余库存：9.6kg（已领用2.4kg）',badge:'',status:'ok',video:['干货存储','2026-04-20 08:00','干货仓-CAM03','00:01:00']},
|
||||
{stage:'预处理',time:'2026-04-22 08:30',title:'花生仁预处理 · 油炸',trace:'PP-HS-20260422-001',detail:'领用量：1.2kg · 加工方式：油炸至金黄<br>油温：160℃ · 时长：3分钟<br>成品量：1.1kg · 经办人：刘加工',badge:'',status:'ok',video:['预处理','2026-04-22 08:30','加工间-CAM05','00:02:00']},
|
||||
{stage:'净菜组配',time:'2026-04-22 10:15',title:'组配至宫保鸡丁',trace:'CMB-001-HS',detail:'配入菜品：宫保鸡丁 · 配比：1.1kg<br>经办人：李组配',badge:'',status:'ok',video:['净菜组配','2026-04-22 10:15','组配间-CAM09','00:01:30']},
|
||||
{stage:'按单烹制',time:'2026-04-22 11:00',title:'随宫保鸡丁烹制',trace:'COOK-20260422-001',detail:'烹制菜品：宫保鸡丁 · 厨师：张厨师<br>花生投入时机：出锅前30秒',badge:'',status:'ok',video:['按单烹制','2026-04-22 11:00','后厨-CAM10','00:04:20']},
|
||||
{stage:'上餐监控',time:'2026-04-22 11:30',title:'随宫保鸡丁上餐',trace:'SERVE-20260422-001',detail:'上餐线：A区中餐线<br>上餐温度：62℃ · 状态：正常',badge:'',status:'ok',video:['上餐监控','2026-04-22 11:30','餐线-CAM11','00:01:50']}
|
||||
]
|
||||
},
|
||||
{
|
||||
name:'辣椒', weight:'0.8kg', sourceType:'自种', sourceTag:'tag-green', traceCode:'ST-SF-NJ01-SC-LJ-008K-20260420-003',
|
||||
nodes:[
|
||||
{stage:'种植采收',time:'2026-04-20 07:00',title:'自有农场采收 · 南郊基地',trace:'ST-SF-NJ01-SC-LJ-008K-20260420-003',detail:'品种：二荆条辣椒 · 地块：NJ-A03<br>采收量：5kg · 种植周期：60天<br>施肥记录：有机肥2次 · 用药记录：无<br>采收人：孙农技',badge:'',status:'ok',video:['种植采收','2026-04-20 07:00','农场-CAM01','00:02:30']},
|
||||
{stage:'农残检测',time:'2026-04-20 08:00',title:'自种蔬菜农残快检',trace:'QC-SF-20260420-003',detail:'有机磷：未检出 · 氨基甲酸酯：未检出<br>抑制率：8.2%（合格线≤50%）<br>检测结论：<strong style="color:#52c41a">合格</strong>',badge:'',status:'ok',video:['农残检测','2026-04-20 08:00','检测室-CAM02','00:01:40']},
|
||||
{stage:'毛菜入库',time:'2026-04-20 09:00',title:'毛菜冷库入库',trace:'MC-IN-20260420-003',detail:'入库量：5kg · 库位：MC-B02-01<br>存储温度：2~8℃ · 经办人：王仓管',badge:'',status:'ok',video:['毛菜入库','2026-04-20 09:00','冷库-CAM04','00:01:15']},
|
||||
{stage:'净菜加工',time:'2026-04-22 08:00',title:'辣椒清洗切段',trace:'NC-LJ-20260422-001',detail:'领用量：0.8kg · 加工方式：去蒂→清洗→切段<br>成品量：0.75kg · 经办人：刘加工',badge:'',status:'ok',video:['净菜加工','2026-04-22 08:00','净菜间-CAM06','00:01:50']},
|
||||
{stage:'净菜组配',time:'2026-04-22 10:15',title:'组配至宫保鸡丁',trace:'CMB-001-LJ',detail:'配入菜品：宫保鸡丁 · 配比：0.75kg<br>经办人：李组配',badge:'',status:'ok',video:['净菜组配','2026-04-22 10:15','组配间-CAM09','00:01:20']},
|
||||
{stage:'按单烹制',time:'2026-04-22 11:00',title:'随宫保鸡丁烹制',trace:'COOK-20260422-001',detail:'烹制菜品：宫保鸡丁 · 厨师：张厨师<br>辣椒投入时机：爆香阶段',badge:'',status:'ok',video:['按单烹制','2026-04-22 11:00','后厨-CAM10','00:04:20']},
|
||||
{stage:'上餐监控',time:'2026-04-22 11:30',title:'随宫保鸡丁上餐',trace:'SERVE-20260422-001',detail:'上餐线：A区中餐线<br>上餐温度：62℃ · 状态：正常',badge:'',status:'ok',video:['上餐监控','2026-04-22 11:30','餐线-CAM11','00:01:50']}
|
||||
]
|
||||
},
|
||||
{
|
||||
name:'葱姜蒜', weight:'0.5kg', sourceType:'自种', sourceTag:'tag-green', traceCode:'ST-SF-NJ01-SC-CJS-005K-20260421-001',
|
||||
nodes:[
|
||||
{stage:'种植采收',time:'2026-04-21 06:30',title:'自有农场采收 · 南郊基地',trace:'ST-SF-NJ01-SC-CJS-005K-20260421-001',detail:'品种：小葱/生姜/大蒜 · 地块：NJ-B01<br>采收量：葱0.2kg + 姜0.15kg + 蒜0.15kg<br>种植方式：有机种植 · 用药记录：无<br>采收人：孙农技',badge:'',status:'ok',video:['种植采收','2026-04-21 06:30','农场-CAM01','00:02:00']},
|
||||
{stage:'农残检测',time:'2026-04-21 07:30',title:'自种蔬菜农残快检',trace:'QC-SF-20260421-001',detail:'有机磷：未检出 · 氨基甲酸酯：未检出<br>抑制率：5.6%（合格线≤50%）<br>检测结论：<strong style="color:#52c41a">合格</strong>',badge:'',status:'ok',video:['农残检测','2026-04-21 07:30','检测室-CAM02','00:01:30']},
|
||||
{stage:'净菜加工',time:'2026-04-22 07:45',title:'葱姜蒜清洗切配',trace:'NC-CJS-20260422-001',detail:'葱：切葱花0.2kg · 姜：切姜片0.15kg · 蒜：切蒜片0.15kg<br>成品总量：0.48kg · 经办人：刘加工',badge:'',status:'ok',video:['净菜加工','2026-04-22 07:45','净菜间-CAM06','00:01:40']},
|
||||
{stage:'净菜组配',time:'2026-04-22 10:15',title:'组配至宫保鸡丁',trace:'CMB-001-CJS',detail:'配入菜品：宫保鸡丁 · 配比：0.48kg<br>经办人：李组配',badge:'',status:'ok',video:['净菜组配','2026-04-22 10:15','组配间-CAM09','00:01:10']},
|
||||
{stage:'按单烹制',time:'2026-04-22 11:00',title:'随宫保鸡丁烹制',trace:'COOK-20260422-001',detail:'烹制菜品：宫保鸡丁 · 厨师：张厨师<br>葱姜蒜投入时机：起锅爆香',badge:'',status:'ok',video:['按单烹制','2026-04-22 11:00','后厨-CAM10','00:04:20']},
|
||||
{stage:'上餐监控',time:'2026-04-22 11:30',title:'随宫保鸡丁上餐',trace:'SERVE-20260422-001',detail:'上餐线：A区中餐线<br>上餐温度：62℃ · 状态：正常',badge:'',status:'ok',video:['上餐监控','2026-04-22 11:30','餐线-CAM11','00:01:50']}
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
var INGREDIENT_EMOJIS = ['🥩','🥜','🌶️','🧄'];
|
||||
|
||||
/* 当前状态 */
|
||||
var currentIngIdx = 0;
|
||||
var currentNodeIdx = 0;
|
||||
var currentDim = 0;
|
||||
var currentDim1NodeIdx = 0;
|
||||
|
||||
/* ========== 渲染函数 ========== */
|
||||
|
||||
/* 渲染管道节点 */
|
||||
function renderPipeline(containerId, nodes, clickFn) {
|
||||
var el = document.getElementById(containerId);
|
||||
var html = '';
|
||||
nodes.forEach(function(n, i) {
|
||||
var isFirst = (i === 0);
|
||||
var isLast = (i === nodes.length - 1);
|
||||
html += '<div class="pipeline-node' + (isFirst ? ' active' : '') + '" onclick="' + clickFn + '(' + i + ')">';
|
||||
html += '<div class="pipeline-node__dot" style="background:' + (NODE_COLORS[n.stage]||'#999') + '">' + (NODE_ICONS[n.stage]||'●') + '</div>';
|
||||
if (n.badge) html += '<span class="pipeline-node__badge">' + n.badge + '</span>';
|
||||
html += '<span class="pipeline-node__status pipeline-node__status--' + (n.status||'ok') + '"></span>';
|
||||
if (!isLast) html += '<div class="pipeline-node__line"></div>';
|
||||
html += '<div class="pipeline-node__label">' + n.stage + '</div>';
|
||||
html += '</div>';
|
||||
});
|
||||
el.innerHTML = html;
|
||||
}
|
||||
|
||||
/* 渲染节点详情卡片 */
|
||||
function renderNodeDetail(containerId, node) {
|
||||
var el = document.getElementById(containerId);
|
||||
var stage = node.stage;
|
||||
var iconBg = NODE_ICON_BG[stage] || '#F5F5F5';
|
||||
var iconColor = NODE_COLORS[stage] || '#999';
|
||||
var icon = NODE_ICONS[stage] || '●';
|
||||
var html = '<div class="node-card">';
|
||||
html += '<div class="node-card__icon" style="background:' + iconBg + ';color:' + iconColor + ';">' + icon + '</div>';
|
||||
html += '<div class="node-card__body">';
|
||||
html += '<div class="node-card__header"><span class="node-card__stage">' + icon + ' ' + stage + '</span><span class="node-card__time">' + node.time + '</span></div>';
|
||||
html += '<div class="node-card__title">' + node.title + '</div>';
|
||||
html += '<div class="node-card__trace">溯源码：' + node.trace + '</div>';
|
||||
html += '<div class="node-card__detail">' + node.detail + '</div>';
|
||||
if (node.video) {
|
||||
html += '<div class="node-card__video" onclick="openVideoModal(\'' + node.video[0] + '\',\'' + node.video[1] + '\',\'' + node.video[2] + '\',\'' + node.video[3] + '\')">🎬 查看视频</div>';
|
||||
}
|
||||
html += '</div></div>';
|
||||
el.innerHTML = html;
|
||||
}
|
||||
|
||||
/* 渲染食材标签页 */
|
||||
function renderIngredientTabs() {
|
||||
var el = document.getElementById('ingredientTabs');
|
||||
var html = '';
|
||||
INGREDIENTS.forEach(function(ing, i) {
|
||||
html += '<div class="ingredient-tab' + (i === currentIngIdx ? ' active' : '') + '" onclick="switchIngredient(' + i + ')">';
|
||||
html += INGREDIENT_EMOJIS[i] + ' ' + ing.name + '（' + ing.weight + '）</div>';
|
||||
});
|
||||
el.innerHTML = html;
|
||||
}
|
||||
|
||||
/* 渲染食材信息卡 */
|
||||
function renderIngredientInfo() {
|
||||
var ing = INGREDIENTS[currentIngIdx];
|
||||
var el = document.getElementById('ingredientInfo');
|
||||
el.innerHTML = '<div class="ingredient-info__name">' + ing.name + '</div>' +
|
||||
'<div class="ingredient-info__item">重量：<span>' + ing.weight + '</span></div>' +
|
||||
'<div class="ingredient-info__item">来源类型：<span class="tag ' + ing.sourceTag + '">' + ing.sourceType + '</span></div>' +
|
||||
'<div class="ingredient-info__item">溯源码：<span>' + ing.traceCode + '</span></div>';
|
||||
}
|
||||
|
||||
/* ========== 交互函数 ========== */
|
||||
|
||||
function switchDimension(idx) {
|
||||
currentDim = idx;
|
||||
document.querySelectorAll('.dimension-tab').forEach(function(t, i) { t.classList.toggle('active', i === idx); });
|
||||
document.querySelectorAll('.dimension-panel').forEach(function(p, i) { p.classList.toggle('active', i === idx); });
|
||||
if (idx === 1) renderDim1();
|
||||
}
|
||||
|
||||
function switchIngredient(idx) {
|
||||
currentIngIdx = idx;
|
||||
currentNodeIdx = 0;
|
||||
renderIngredientTabs();
|
||||
renderIngredientInfo();
|
||||
renderPipeline('pipeline', INGREDIENTS[idx].nodes, 'selectNode');
|
||||
renderNodeDetail('nodeDetail', INGREDIENTS[idx].nodes[0]);
|
||||
}
|
||||
|
||||
function selectNode(idx) {
|
||||
currentNodeIdx = idx;
|
||||
var pipeline = document.getElementById('pipeline');
|
||||
pipeline.querySelectorAll('.pipeline-node').forEach(function(n, i) { n.classList.toggle('active', i === idx); });
|
||||
renderNodeDetail('nodeDetail', INGREDIENTS[currentIngIdx].nodes[idx]);
|
||||
}
|
||||
|
||||
/* 食材维度 - 使用第一个食材（鸡胸肉）的完整链路 */
|
||||
function renderDim1() {
|
||||
var ing = INGREDIENTS[0];
|
||||
var headerEl = document.getElementById('dim1Header');
|
||||
headerEl.innerHTML = '<div class="trace-header__top"><div class="trace-header__title">🥩 ' + ing.name + '（食材溯源）</div>' +
|
||||
'<div class="trace-header__status"><span class="trace-header__status-dot"></span>全程合格</div></div>' +
|
||||
'<div class="trace-header__grid">' +
|
||||
'<div class="trace-header__item"><div class="trace-header__label">溯源码</div><div class="trace-header__value">' + ing.traceCode + '</div></div>' +
|
||||
'<div class="trace-header__item"><div class="trace-header__label">食材名称</div><div class="trace-header__value">' + ing.name + '</div></div>' +
|
||||
'<div class="trace-header__item"><div class="trace-header__label">来源类型</div><div class="trace-header__value">' + ing.sourceType + '</div></div>' +
|
||||
'<div class="trace-header__item"><div class="trace-header__label">供应商</div><div class="trace-header__value">鲜肉直供公司</div></div>' +
|
||||
'<div class="trace-header__item"><div class="trace-header__label">入库量</div><div class="trace-header__value">80kg</div></div></div>';
|
||||
renderPipeline('pipelineDim1', ing.nodes, 'selectNodeDim1');
|
||||
renderNodeDetail('nodeDetailDim1', ing.nodes[0]);
|
||||
}
|
||||
|
||||
function selectNodeDim1(idx) {
|
||||
currentDim1NodeIdx = idx;
|
||||
var pipeline = document.getElementById('pipelineDim1');
|
||||
pipeline.querySelectorAll('.pipeline-node').forEach(function(n, i) { n.classList.toggle('active', i === idx); });
|
||||
renderNodeDetail('nodeDetailDim1', INGREDIENTS[0].nodes[idx]);
|
||||
}
|
||||
|
||||
/* 视频弹窗 */
|
||||
function openVideoModal(stage, time, camera, duration) {
|
||||
document.getElementById('videoModalTitle').textContent = stage + ' - 溯源视频';
|
||||
document.getElementById('videoModalInfo').innerHTML =
|
||||
'<p>环节：' + stage + ' · 时间：' + time + '</p><p>摄像头：' + camera + ' · 时长：' + duration + '</p>';
|
||||
document.getElementById('videoModal').classList.add('active');
|
||||
}
|
||||
function closeVideoModal() {
|
||||
document.getElementById('videoModal').classList.remove('active');
|
||||
}
|
||||
document.getElementById('videoModal').addEventListener('click', function(e) {
|
||||
if (e.target === this) closeVideoModal();
|
||||
});
|
||||
|
||||
/* 初始化渲染 */
|
||||
renderIngredientTabs();
|
||||
renderIngredientInfo();
|
||||
renderPipeline('pipeline', INGREDIENTS[0].nodes, 'selectNode');
|
||||
renderNodeDetail('nodeDetail', INGREDIENTS[0].nodes[0]);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -276,6 +276,14 @@ window.location.href = '../health-consult/consult-list.html';
|
||||
<div class="tab active">全部</div>
|
||||
```
|
||||
|
||||
### 3.4 表格操作列固定规则
|
||||
|
||||
- 所有列表/表格中包含「操作」列的，操作列必须使用 `position:sticky;right:0` 固定在表格右侧
|
||||
- 确保横向滚动时操作列始终可见，不会因列表内容过多而被遮挡
|
||||
- 操作列需添加左侧阴影（`box-shadow:-4px 0 8px rgba(0,0,0,0.04)`）以区分固定区域
|
||||
- thead 的操作列表头同样需要 sticky 固定
|
||||
- 操作列 td 添加 class `td-actions`，并设置白色背景避免内容穿透
|
||||
|
||||
---
|
||||
|
||||
## 四、命名规范
|
||||
|
||||
Reference in New Issue
Block a user