feat: 卫生供应新增数据分析板块——加工经营分析与加工分析
- 新增 sup-biz-analysis.html（加工经营分析）：营业日期筛选、4KPI（加工产值/生产批次/原料投入/质检合格率）、生产分析宽表、班次/质量/成本/异常四面板 - 新增 sup-process-analysis.html（加工分析）：查询日期+班次筛选、5KPI（含加工总重量/产能利用率）、清洗线/切配线/包装线三卡片11列明细表 - 8个卫生供应页面侧边栏同步追加「数据分析」可折叠子菜单组（含CSS+JS） - index.html SITE_MAP 与 CHANGELOG 同步
This commit is contained in:
zhangyan
@@ -7,6 +7,9 @@
|
||||
- **`din-biz-analysis.html`（经营分析 · 新增页面）**：营养用餐侧边栏新增「数据分析」子菜单组，下设「经营分析」「餐品分析」两项。经营分析页按真实系统报表模块制作：营业日期区间筛选 + 查询/重置；数据总览 4 KPI（成交总金额/成交订单量/成交人数/退款人数，带 ? 帮助图标）；交易分析 13 列宽表（按消费区间统计临时/会员用户数、订单数、金额、平均克重、百克单价、客单价）；餐次分析/订单分析/支付分析/异常分析四面板（异常分析含人脸图片占位）。同步更新全部 29 个营养用餐分组页面的侧边栏及 `index.html` SITE_MAP。
|
||||
- **`din-meal-analysis.html`（餐品分析 · 新增页面）**：查询日期 + 餐次筛选；数据总览 5 KPI（成交订单量/用餐人数/开餐总重量(g)/能量总摄入/人均能量摄入）；按秤类型多卡片区块（营养秤 + 档口秤×2），每卡内嵌分类筛选 + 11 列可排序明细表（餐品名称/所属秤号/制作重量/实销耗量/异常损耗/挂账耗量/收银删除耗量/剩余重量/下单人数/订单数量/总消耗热量）。
|
||||
|
||||
- **`sup-biz-analysis.html`（加工经营分析 · 新增页面）**：卫生供应侧边栏新增「数据分析」子菜单组，下设「经营分析」「加工分析」两项。经营分析页按加工厂场景制作：营业日期筛选 + 数据总览 4 KPI（加工产值/生产批次/原料投入/质检合格率，带 ? 帮助图标）；生产分析 9 列宽表（产品分类/生产批次/投料重量/产出重量/原料成本/加工成本/产值/单位成本/毛利率）；班次分析/质量分析/成本分析/异常分析四面板。同步更新全部 8 个卫生供应页面的侧边栏及 `index.html` SITE_MAP。
|
||||
- **`sup-process-analysis.html`（加工分析 · 新增页面）**：查询日期 + 班次筛选；数据总览 5 KPI（生产批次/加工品种/加工总重量(kg)/人均加工量(kg)/产能利用率）；按产线多卡片区块（清洗线 + 切配线 + 包装线），每卡内嵌分类筛选 + 11 列可排序明细表（原材料名称/所属产线/投料重量/产出重量/加工损耗/不合格品/返工品/剩余重量/操作人数/生产批次/加工时长）。
|
||||
|
||||
## [2026-08-03]
|
||||
|
||||
### 后台营养管理
|
||||
|
||||
@@ -0,0 +1,259 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>营养管理 - 加工经营分析 | 健康CQ原型</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);}
|
||||
/* 筛选栏 */
|
||||
.filter-bar{display:flex;align-items:center;gap:16px;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;align-items:center;gap:8px;}
|
||||
.filter-item label{font-size:var(--font-sm);color:var(--text-primary);white-space:nowrap;}
|
||||
.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:140px;background:#fff;}
|
||||
.filter-input:focus,.filter-select:focus{outline:none;border-color:var(--primary);}
|
||||
.date-range{display:flex;align-items:center;gap:6px;border:1px solid var(--border);border-radius:var(--radius-sm);background:#fff;padding:0 10px;height:32px;}
|
||||
.date-range input{border:none;outline:none;font-size:var(--font-sm);width:110px;color:var(--text-primary);font-family:inherit;}
|
||||
.date-range .date-sep{color:var(--text-placeholder);font-size:var(--font-sm);}
|
||||
.btn{height:32px;padding:0 16px;border:none;border-radius:var(--radius-sm);font-size:var(--font-sm);cursor:pointer;display:inline-flex;align-items:center;gap:6px;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);}
|
||||
/* 问号帮助图标 */
|
||||
.help{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;border-radius:50%;border:1px solid var(--primary);color:var(--primary);font-size:10px;font-style:normal;cursor:help;vertical-align:1px;margin-left:4px;}
|
||||
/* 数据总览 */
|
||||
.overview-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);margin-bottom:16px;overflow:hidden;}
|
||||
.overview-card__title{font-size:var(--font-sm);font-weight:600;padding:14px 20px;border-bottom:1px solid #f0f0f0;}
|
||||
.overview-card__body{display:grid;grid-template-columns:repeat(4,1fr);padding:28px 20px 32px;}
|
||||
.kpi{text-align:center;}
|
||||
.kpi__label{font-size:var(--font-lg);font-weight:700;color:var(--text-primary);margin-bottom:14px;}
|
||||
.kpi__value{font-size:var(--font-xxl);font-weight:700;color:var(--text-primary);}
|
||||
/* 分析面板 */
|
||||
.panel-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);overflow:hidden;}
|
||||
.panel-card__title{font-size:var(--font-sm);font-weight:600;padding:14px 20px;border-bottom:1px solid #f0f0f0;}
|
||||
.panel-card__content{overflow-x:auto;}
|
||||
table{width:100%;border-collapse:collapse;font-size:var(--font-sm);}
|
||||
th{background:#FAFAFA;text-align:center;padding:12px 14px;font-weight:600;white-space:nowrap;border-bottom:1px solid var(--border);}
|
||||
td{padding:12px 14px;border-bottom:1px solid #f0f0f0;white-space:nowrap;text-align:center;}
|
||||
td.td-left{text-align:left;}
|
||||
tr:hover td{background:#FAFAFA;}
|
||||
/* 四宫格分析 */
|
||||
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px;}
|
||||
/* 详情链接 */
|
||||
.link{color:var(--primary);cursor:pointer;text-decoration:none;font-size:var(--font-sm);}
|
||||
.link:hover{text-decoration:underline;}
|
||||
</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-biz-analysis.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-warehouse.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-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>
|
||||
<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="sup-biz-analysis.html" class="sidebar-item active"><span class="mi">📈</span>经营分析</a>
|
||||
<a href="sup-process-analysis.html" class="sidebar-item"><span class="mi">🔧</span>加工分析</a>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容 -->
|
||||
<main class="main">
|
||||
|
||||
<!-- 筛选栏 -->
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item">
|
||||
<label>营业日期：</label>
|
||||
<div class="date-range">
|
||||
<input type="text" value="2026-08-04" readonly>
|
||||
<span class="date-sep">→</span>
|
||||
<input type="text" value="2026-08-04" readonly>
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><rect x="1" y="2" width="12" height="11" rx="2" stroke="#999"/><path d="M1 5.5h12M4 1v2.5M10 1v2.5" stroke="#999"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn btn-primary">🔍 查询</button>
|
||||
<button class="btn btn-default">⟳ 重置</button>
|
||||
</div>
|
||||
|
||||
<!-- 数据总览 -->
|
||||
<div class="overview-card">
|
||||
<div class="overview-card__title">数据总览</div>
|
||||
<div class="overview-card__body">
|
||||
<div class="kpi">
|
||||
<div class="kpi__label">加工产值(元)<i class="help" title="统计周期内完成加工的总产值">?</i></div>
|
||||
<div class="kpi__value">¥126,850.00</div>
|
||||
</div>
|
||||
<div class="kpi">
|
||||
<div class="kpi__label">生产批次(批)<i class="help" title="统计周期内加工生产的总批次数">?</i></div>
|
||||
<div class="kpi__value">186</div>
|
||||
</div>
|
||||
<div class="kpi">
|
||||
<div class="kpi__label">原料投入(吨)<i class="help" title="统计周期内投入的原料总重量">?</i></div>
|
||||
<div class="kpi__value">48.6</div>
|
||||
</div>
|
||||
<div class="kpi">
|
||||
<div class="kpi__label">质检合格率(%)<i class="help" title="统计周期内质检合格批次占比">?</i></div>
|
||||
<div class="kpi__value">98.2</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 生产分析 -->
|
||||
<div class="panel-card">
|
||||
<div class="panel-card__title">生产分析</div>
|
||||
<div class="panel-card__content">
|
||||
<table>
|
||||
<thead><tr>
|
||||
<th>产品分类</th><th>生产批次</th><th>投料重量(吨)</th><th>产出重量(吨)</th><th>原料成本(元)</th><th>加工成本(元)</th>
|
||||
<th>产值(元)</th><th>单位成本(元/kg)</th><th>毛利率(%)</th>
|
||||
</tr></thead>
|
||||
<tbody>
|
||||
<tr><td>净菜包</td><td>42</td><td>8.6</td><td>7.8</td><td>12,800.00</td><td>4,200.00</td><td>24,600.00</td><td>2.18</td><td>30.9</td></tr>
|
||||
<tr><td>餐品净菜包</td><td>38</td><td>10.2</td><td>9.4</td><td>18,500.00</td><td>5,800.00</td><td>35,200.00</td><td>2.59</td><td>31.0</td></tr>
|
||||
<tr><td>毛菜半成品</td><td>28</td><td>12.5</td><td>11.2</td><td>9,600.00</td><td>6,500.00</td><td>21,500.00</td><td>1.44</td><td>25.1</td></tr>
|
||||
<tr><td>净菜半成品</td><td>35</td><td>9.8</td><td>8.9</td><td>14,200.00</td><td>4,800.00</td><td>27,800.00</td><td>2.13</td><td>31.7</td></tr>
|
||||
<tr><td>定制加工</td><td>43</td><td>7.5</td><td>6.8</td><td>8,900.00</td><td>3,200.00</td><td>17,750.00</td><td>1.78</td><td>32.0</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 四宫格分析 -->
|
||||
<div class="grid-2">
|
||||
<!-- 班次分析 -->
|
||||
<div class="panel-card">
|
||||
<div class="panel-card__title">班次分析<i class="help" title="按早/中/晚班次维度统计">?</i></div>
|
||||
<div class="panel-card__content">
|
||||
<table>
|
||||
<thead><tr><th>班次</th><th>批次（批）</th><th>人数（人）</th><th>产值（元）</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td>早班 (06:00-14:00)</td><td>68</td><td>32</td><td>42,800.00</td></tr>
|
||||
<tr><td>中班 (14:00-22:00)</td><td>72</td><td>28</td><td>52,600.00</td></tr>
|
||||
<tr><td>晚班 (22:00-06:00)</td><td>46</td><td>18</td><td>31,450.00</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 质量分析 -->
|
||||
<div class="panel-card">
|
||||
<div class="panel-card__title">质量分析<i class="help" title="按质检结果维度统计批次与不良率">?</i></div>
|
||||
<div class="panel-card__content">
|
||||
<table>
|
||||
<thead><tr><th>状态</th><th>批次（批）</th><th>缺陷类型</th><th>不良率（%）</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td>合格</td><td>182</td><td>—</td><td>—</td></tr>
|
||||
<tr><td>轻微缺陷</td><td>3</td><td>净菜切型偏差</td><td>1.6</td></tr>
|
||||
<tr><td>严重缺陷</td><td>1</td><td>异物混入</td><td>0.5</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 成本分析 -->
|
||||
<div class="panel-card">
|
||||
<div class="panel-card__title">成本分析<i class="help" title="按费用类型统计成本构成占比">?</i></div>
|
||||
<div class="panel-card__content">
|
||||
<table>
|
||||
<thead><tr><th>费用类型</th><th>金额（元）</th><th>占比（%）</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td>原料成本</td><td>63,000.00</td><td>52.5</td></tr>
|
||||
<tr><td>人工成本</td><td>28,500.00</td><td>23.7</td></tr>
|
||||
<tr><td>水电能耗</td><td>8,600.00</td><td>7.2</td></tr>
|
||||
<tr><td>设备折旧</td><td>12,400.00</td><td>10.3</td></tr>
|
||||
<tr><td>包装耗材</td><td>7,600.00</td><td>6.3</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 异常分析 -->
|
||||
<div class="panel-card">
|
||||
<div class="panel-card__title">异常分析<i class="help" title="异常生产批次明细，含设备故障/人为操作/品质异常">?</i></div>
|
||||
<div class="panel-card__content">
|
||||
<table>
|
||||
<thead><tr><th>批次编号</th><th>产线</th><th>类型</th><th>金额（元）</th><th>详情</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td>PC-20260804-012</td><td>切配线-02</td><td>设备故障</td><td>380.00</td><td><a class="link" href="#">查看</a></td></tr>
|
||||
<tr><td>PC-20260804-057</td><td>清洗线-01</td><td>人为操作</td><td>215.00</td><td><a class="link" href="#">查看</a></td></tr>
|
||||
<tr><td>PC-20260804-102</td><td>包装线-03</td><td>品质异常</td><td>0.00</td><td><a class="link" href="#">查看</a></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</main>
|
||||
|
||||
<script>
|
||||
/* 侧边栏子组折叠 */
|
||||
function toggleSubgroup(header) {
|
||||
header.parentElement.classList.toggle('open');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -31,6 +31,11 @@ body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei
|
||||
.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;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: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;}
|
||||
@@ -166,6 +171,13 @@ textarea.form-control{height:auto;padding:8px 12px;resize:vertical;min-height:60
|
||||
<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>
|
||||
|
||||
<script>
|
||||
/* 侧边栏子组折叠 */
|
||||
function toggleSubgroup(header) {
|
||||
header.parentElement.classList.toggle("open");
|
||||
}
|
||||
</script>
|
||||
<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>
|
||||
|
||||
@@ -31,6 +31,11 @@ body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei
|
||||
.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;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);}
|
||||
.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;}
|
||||
@@ -168,6 +173,16 @@ tr.detail-row td.td-actions{background:#FAFBFC;box-shadow:-4px 0 8px rgba(0,0,0,
|
||||
<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>
|
||||
<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="sup-biz-analysis.html" class="sidebar-item"><span class="mi">📈</span>经营分析</a>
|
||||
<a href="sup-process-analysis.html" class="sidebar-item"><span class="mi">🔧</span>加工分析</a>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
<div class="main">
|
||||
<div class="filter-bar">
|
||||
|
||||
@@ -34,6 +34,11 @@ body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei
|
||||
.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;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);}
|
||||
/* 统计卡片 */
|
||||
@@ -163,6 +168,16 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
<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>
|
||||
<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="sup-biz-analysis.html" class="sidebar-item"><span class="mi">📈</span>经营分析</a>
|
||||
<a href="sup-process-analysis.html" class="sidebar-item"><span class="mi">🔧</span>加工分析</a>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容区 -->
|
||||
|
||||
@@ -34,6 +34,11 @@ body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei
|
||||
.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;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);}
|
||||
/* 统计卡片 */
|
||||
@@ -171,6 +176,16 @@ tbody td.td-actions{white-space:nowrap;}
|
||||
<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>
|
||||
<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="sup-biz-analysis.html" class="sidebar-item"><span class="mi">📈</span>经营分析</a>
|
||||
<a href="sup-process-analysis.html" class="sidebar-item"><span class="mi">🔧</span>加工分析</a>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容区 -->
|
||||
|
||||
@@ -34,6 +34,11 @@ body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei
|
||||
.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;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);}
|
||||
/* 统计卡片 */
|
||||
@@ -171,6 +176,16 @@ tbody td.td-actions{white-space:nowrap;}
|
||||
<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>
|
||||
<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="sup-biz-analysis.html" class="sidebar-item"><span class="mi">📈</span>经营分析</a>
|
||||
<a href="sup-process-analysis.html" class="sidebar-item"><span class="mi">🔧</span>加工分析</a>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容区 -->
|
||||
|
||||
@@ -34,6 +34,11 @@ body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei
|
||||
.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;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);}
|
||||
/* 统计卡片 */
|
||||
@@ -166,6 +171,16 @@ tbody tr:hover{background:#F8FBFF;}
|
||||
<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>
|
||||
<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="sup-biz-analysis.html" class="sidebar-item"><span class="mi">📈</span>经营分析</a>
|
||||
<a href="sup-process-analysis.html" class="sidebar-item"><span class="mi">🔧</span>加工分析</a>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容区 -->
|
||||
|
||||
@@ -31,6 +31,11 @@ body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei
|
||||
.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;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: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;}
|
||||
@@ -157,6 +162,16 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
<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>
|
||||
<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="sup-biz-analysis.html" class="sidebar-item"><span class="mi">📈</span>经营分析</a>
|
||||
<a href="sup-process-analysis.html" class="sidebar-item"><span class="mi">🔧</span>加工分析</a>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容 -->
|
||||
|
||||
@@ -0,0 +1,325 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>营养管理 - 加工分析 | 健康CQ原型</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);}
|
||||
/* 筛选栏 */
|
||||
.filter-bar{display:flex;align-items:center;gap:16px;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;align-items:center;gap:8px;}
|
||||
.filter-item label{font-size:var(--font-sm);color:var(--text-primary);white-space:nowrap;}
|
||||
.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:140px;background:#fff;}
|
||||
.filter-input:focus,.filter-select:focus{outline:none;border-color:var(--primary);}
|
||||
.date-range{display:flex;align-items:center;gap:6px;border:1px solid var(--border);border-radius:var(--radius-sm);background:#fff;padding:0 10px;height:32px;}
|
||||
.date-range input{border:none;outline:none;font-size:var(--font-sm);width:110px;color:var(--text-primary);font-family:inherit;}
|
||||
.date-range .date-sep{color:var(--text-placeholder);font-size:var(--font-sm);}
|
||||
.btn{height:32px;padding:0 16px;border:none;border-radius:var(--radius-sm);font-size:var(--font-sm);cursor:pointer;display:inline-flex;align-items:center;gap:6px;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);}
|
||||
/* 数据总览 */
|
||||
.overview-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);margin-bottom:16px;overflow:hidden;}
|
||||
.overview-card__title{font-size:var(--font-sm);font-weight:600;padding:14px 20px;border-bottom:1px solid #f0f0f0;}
|
||||
.overview-card__body{display:grid;grid-template-columns:repeat(5,1fr);padding:28px 20px 32px;}
|
||||
.kpi{text-align:center;}
|
||||
.kpi__label{font-size:var(--font-lg);font-weight:700;color:var(--text-primary);margin-bottom:14px;}
|
||||
.kpi__value{font-size:var(--font-xxl);font-weight:700;color:var(--text-primary);}
|
||||
/* 独立区块标题 */
|
||||
.section-title{font-size:var(--font-base);font-weight:600;color:var(--text-primary);margin:4px 0 12px;}
|
||||
/* 分析面板 */
|
||||
.panel-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);overflow:hidden;}
|
||||
.panel-card + .panel-card{margin-top:16px;}
|
||||
.panel-card__title{font-size:var(--font-sm);font-weight:600;padding:14px 20px;border-bottom:1px solid #f0f0f0;}
|
||||
/* 面板内嵌筛选行 */
|
||||
.panel-filter{display:flex;align-items:center;gap:12px;padding:14px 20px;border-bottom:1px solid #f0f0f0;flex-wrap:wrap;}
|
||||
.panel-card__content{overflow-x:auto;}
|
||||
table{width:100%;border-collapse:collapse;font-size:var(--font-sm);}
|
||||
th{background:#FAFAFA;text-align:center;padding:12px 14px;font-weight:600;white-space:nowrap;border-bottom:1px solid var(--border);}
|
||||
td{padding:12px 14px;border-bottom:1px solid #f0f0f0;white-space:nowrap;text-align:center;}
|
||||
td.td-left{text-align:left;}
|
||||
tr:hover td{background:#FAFAFA;}
|
||||
/* 表头排序箭头 */
|
||||
.sorter{display:inline-flex;flex-direction:column;gap:1px;margin-left:4px;vertical-align:middle;cursor:pointer;}
|
||||
.sorter::before{content:'';width:0;height:0;border-left:3.5px solid transparent;border-right:3.5px solid transparent;border-bottom:4px solid #BFBFBF;}
|
||||
.sorter::after{content:'';width:0;height:0;border-left:3.5px solid transparent;border-right:3.5px solid transparent;border-top:4px solid #BFBFBF;}
|
||||
</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-biz-analysis.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-warehouse.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-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>
|
||||
<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="sup-biz-analysis.html" class="sidebar-item"><span class="mi">📈</span>经营分析</a>
|
||||
<a href="sup-process-analysis.html" class="sidebar-item active"><span class="mi">🔧</span>加工分析</a>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容 -->
|
||||
<main class="main">
|
||||
|
||||
<!-- 筛选栏 -->
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item">
|
||||
<label>查询日期：</label>
|
||||
<div class="date-range">
|
||||
<input type="text" value="2026-08-04" readonly>
|
||||
<span class="date-sep">→</span>
|
||||
<input type="text" value="2026-08-04" readonly>
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><rect x="1" y="2" width="12" height="11" rx="2" stroke="#999"/><path d="M1 5.5h12M4 1v2.5M10 1v2.5" stroke="#999"/></svg>
|
||||
</div>
|
||||
</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="overview-card">
|
||||
<div class="overview-card__title">数据总览</div>
|
||||
<div class="overview-card__body">
|
||||
<div class="kpi">
|
||||
<div class="kpi__label">生产批次(批)</div>
|
||||
<div class="kpi__value">186</div>
|
||||
</div>
|
||||
<div class="kpi">
|
||||
<div class="kpi__label">加工品种(种)</div>
|
||||
<div class="kpi__value">45</div>
|
||||
</div>
|
||||
<div class="kpi">
|
||||
<div class="kpi__label">加工总重量(kg)</div>
|
||||
<div class="kpi__value">358,600</div>
|
||||
</div>
|
||||
<div class="kpi">
|
||||
<div class="kpi__label">人均加工量(kg)</div>
|
||||
<div class="kpi__value">1,420</div>
|
||||
</div>
|
||||
<div class="kpi">
|
||||
<div class="kpi__label">产能利用率(%)</div>
|
||||
<div class="kpi__value">87.5</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 区块标题 -->
|
||||
<div class="section-title">产线分析</div>
|
||||
|
||||
<!-- 清洗线 -->
|
||||
<div class="panel-card">
|
||||
<div class="panel-card__title">清洗线</div>
|
||||
<div class="panel-filter">
|
||||
<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="panel-card__content">
|
||||
<table>
|
||||
<thead><tr>
|
||||
<th>原材料名称<span class="sorter"></span></th>
|
||||
<th>所属产线<span class="sorter"></span></th>
|
||||
<th>投料重量(kg)<span class="sorter"></span></th>
|
||||
<th>产出重量(kg)<span class="sorter"></span></th>
|
||||
<th>加工损耗(kg)<span class="sorter"></span></th>
|
||||
<th>不合格品(kg)<span class="sorter"></span></th>
|
||||
<th>返工品(kg)<span class="sorter"></span></th>
|
||||
<th>剩余重量(kg)<span class="sorter"></span></th>
|
||||
<th>操作人数<span class="sorter"></span></th>
|
||||
<th>生产批次<span class="sorter"></span></th>
|
||||
<th>加工时长(min)<span class="sorter"></span></th>
|
||||
</tr></thead>
|
||||
<tbody>
|
||||
<tr><td class="td-left">大白菜</td><td>清洗线-01</td><td>380.0</td><td>342.5</td><td>22.8</td><td>8.5</td><td>6.2</td><td>0.0</td><td>8</td><td>12</td><td>480</td></tr>
|
||||
<tr><td class="td-left">土豆</td><td>清洗线-01</td><td>420.0</td><td>375.6</td><td>28.4</td><td>10.2</td><td>5.8</td><td>0.0</td><td>10</td><td>15</td><td>520</td></tr>
|
||||
<tr><td class="td-left">胡萝卜</td><td>清洗线-02</td><td>280.0</td><td>252.5</td><td>16.8</td><td>6.5</td><td>4.2</td><td>0.0</td><td>6</td><td>10</td><td>360</td></tr>
|
||||
<tr><td class="td-left">青椒</td><td>清洗线-02</td><td>200.0</td><td>180.8</td><td>12.0</td><td>4.5</td><td>2.7</td><td>0.0</td><td>5</td><td>8</td><td>300</td></tr>
|
||||
<tr><td class="td-left">菠菜</td><td>清洗线-02</td><td>150.0</td><td>132.5</td><td>9.8</td><td>5.2</td><td>2.5</td><td>0.0</td><td>6</td><td>8</td><td>280</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 切配线 -->
|
||||
<div class="panel-card">
|
||||
<div class="panel-card__title">切配线</div>
|
||||
<div class="panel-filter">
|
||||
<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="panel-card__content">
|
||||
<table>
|
||||
<thead><tr>
|
||||
<th>原材料名称<span class="sorter"></span></th>
|
||||
<th>所属产线<span class="sorter"></span></th>
|
||||
<th>投料重量(kg)<span class="sorter"></span></th>
|
||||
<th>产出重量(kg)<span class="sorter"></span></th>
|
||||
<th>加工损耗(kg)<span class="sorter"></span></th>
|
||||
<th>不合格品(kg)<span class="sorter"></span></th>
|
||||
<th>返工品(kg)<span class="sorter"></span></th>
|
||||
<th>剩余重量(kg)<span class="sorter"></span></th>
|
||||
<th>操作人数<span class="sorter"></span></th>
|
||||
<th>生产批次<span class="sorter"></span></th>
|
||||
<th>加工时长(min)<span class="sorter"></span></th>
|
||||
</tr></thead>
|
||||
<tbody>
|
||||
<tr><td class="td-left">土豆（切丝）</td><td>切配线-01</td><td>320.0</td><td>285.6</td><td>18.8</td><td>8.2</td><td>7.4</td><td>0.0</td><td>8</td><td>14</td><td>540</td></tr>
|
||||
<tr><td class="td-left">胡萝卜（切片）</td><td>切配线-01</td><td>180.0</td><td>162.5</td><td>10.2</td><td>4.5</td><td>2.8</td><td>0.0</td><td>6</td><td>9</td><td>380</td></tr>
|
||||
<tr><td class="td-left">猪肉（绞肉）</td><td>切配线-02</td><td>500.0</td><td>452.0</td><td>28.0</td><td>12.5</td><td>7.5</td><td>0.0</td><td>10</td><td>18</td><td>620</td></tr>
|
||||
<tr><td class="td-left">青椒（切块）</td><td>切配线-02</td><td>260.0</td><td>234.5</td><td>14.8</td><td>6.5</td><td>4.2</td><td>0.0</td><td>6</td><td>10</td><td>420</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 包装线 -->
|
||||
<div class="panel-card">
|
||||
<div class="panel-card__title">包装线</div>
|
||||
<div class="panel-filter">
|
||||
<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="panel-card__content">
|
||||
<table>
|
||||
<thead><tr>
|
||||
<th>原材料名称<span class="sorter"></span></th>
|
||||
<th>所属产线<span class="sorter"></span></th>
|
||||
<th>投料重量(kg)<span class="sorter"></span></th>
|
||||
<th>产出重量(kg)<span class="sorter"></span></th>
|
||||
<th>加工损耗(kg)<span class="sorter"></span></th>
|
||||
<th>不合格品(kg)<span class="sorter"></span></th>
|
||||
<th>返工品(kg)<span class="sorter"></span></th>
|
||||
<th>剩余重量(kg)<span class="sorter"></span></th>
|
||||
<th>操作人数<span class="sorter"></span></th>
|
||||
<th>生产批次<span class="sorter"></span></th>
|
||||
<th>加工时长(min)<span class="sorter"></span></th>
|
||||
</tr></thead>
|
||||
<tbody>
|
||||
<tr><td class="td-left">土豆丝净菜包</td><td>包装线-01</td><td>280.0</td><td>258.5</td><td>12.8</td><td>5.5</td><td>3.2</td><td>0.0</td><td>7</td><td>12</td><td>460</td></tr>
|
||||
<tr><td class="td-left">宫保鸡丁餐品包</td><td>包装线-01</td><td>350.0</td><td>321.0</td><td>16.5</td><td>7.8</td><td>4.7</td><td>0.0</td><td>9</td><td>16</td><td>580</td></tr>
|
||||
<tr><td class="td-left">时蔬混合净菜包</td><td>包装线-02</td><td>400.0</td><td>368.5</td><td>18.2</td><td>8.5</td><td>4.8</td><td>0.0</td><td>8</td><td>15</td><td>520</td></tr>
|
||||
<tr><td class="td-left">红烧肉餐品包</td><td>包装线-02</td><td>420.0</td><td>385.0</td><td>20.5</td><td>9.2</td><td>5.3</td><td>0.0</td><td>10</td><td>18</td><td>600</td></tr>
|
||||
<tr><td class="td-left">蒜蓉西兰花净菜包</td><td>包装线-03</td><td>180.0</td><td>162.2</td><td>10.5</td><td>4.8</td><td>2.5</td><td>0.0</td><td>5</td><td>8</td><td>340</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</main>
|
||||
|
||||
<script>
|
||||
function toggleSubgroup(header) {
|
||||
header.parentElement.classList.toggle('open');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -31,6 +31,11 @@ body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei
|
||||
.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;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: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;}
|
||||
@@ -158,6 +163,16 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
<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>
|
||||
<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="sup-biz-analysis.html" class="sidebar-item"><span class="mi">📈</span>经营分析</a>
|
||||
<a href="sup-process-analysis.html" class="sidebar-item"><span class="mi">🔧</span>加工分析</a>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容 -->
|
||||
|
||||
Reference in New Issue
Block a user