merge: 合并远程9.3健康生产调整记录，本地9.2营养用餐第7-12条保留
This commit is contained in:
@@ -232,6 +232,7 @@ const SITE_MAP = [
|
||||
{ file:'arc-employee.html', label:'员工营养数据' },
|
||||
{ file:'arc-employee-detail.html', label:'员工营养详情' },
|
||||
{ file:'arc-unit.html', label:'单位报表数据' },
|
||||
{ file:'arc-canteen.html', label:'食堂报表数据' },
|
||||
{ file:'arc-algo.html', label:'算法模型' },
|
||||
{ file:'farm-land.html', label:'土地环境' },
|
||||
{ file:'farm-monitor-crop.html', label:'作物种植监控' },
|
||||
|
||||
@@ -144,6 +144,7 @@ ${CSS_RULE}
|
||||
<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" href="arc-canteen.html"><span class="mi">🍽️</span>食堂报表数据</a>
|
||||
<a class="sidebar-item active" href="arc-algo.html"><span class="mi">🤖</span>算法模型</a>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -0,0 +1,513 @@
|
||||
<!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__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);}
|
||||
|
||||
/* TAB栏 */
|
||||
.tab-bar{display:flex;gap:0;padding:0 24px;border-bottom:1px solid var(--border);}
|
||||
.tab-item{padding:12px 20px;font-size:var(--font-sm);cursor:pointer;color:var(--text-secondary);border-bottom:2px solid transparent;margin-bottom:-1px;transition:all .2s;font-weight:500;}
|
||||
.tab-item:hover{color:var(--primary);}
|
||||
.tab-item.active{color:var(--primary);border-bottom-color:var(--primary);font-weight:600;}
|
||||
.tab-panel{display:none;}
|
||||
.tab-panel.active{display:block;}
|
||||
|
||||
/* 筛选栏 */
|
||||
.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:180px;}
|
||||
.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);}
|
||||
|
||||
/* 操作栏 */
|
||||
.action-bar{display:flex;align-items:center;gap:8px;margin-bottom:16px;}
|
||||
|
||||
/* 表格 */
|
||||
.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;-webkit-overflow-scrolling:touch;}
|
||||
table{width:100%;border-collapse:collapse;min-width:100%;white-space:nowrap;}
|
||||
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-green{background:#F6FFED;color:var(--success);}
|
||||
.tag-orange{background:#FFF7E6;color:var(--warning);}
|
||||
.tag-red{background:#FFF1F0;color:var(--danger);}
|
||||
.tag-blue{background:var(--primary-light);color:var(--primary);}
|
||||
.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" 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" 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-canteen.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">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">3,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">87.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">99.6%</div>
|
||||
<div class="stat-card__label">食安检测合格率</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- TAB + 筛选 -->
|
||||
<div class="table-card" style="margin-bottom:16px;">
|
||||
<div class="tab-bar">
|
||||
<div class="tab-item active" onclick="switchTab(0)">运营总览</div>
|
||||
<div class="tab-item" onclick="switchTab(1)">成本效益</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 筛选栏 -->
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item">
|
||||
<label>食堂名称</label>
|
||||
<select class="filter-select" style="min-width:160px;">
|
||||
<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" id="timeSelect">
|
||||
<option selected>2026年</option>
|
||||
<option>2025年</option>
|
||||
<option>2024年</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">食堂运营数据（2026年）</div>
|
||||
</div>
|
||||
|
||||
<!-- Tab0: 运营总览 -->
|
||||
<div class="tab-panel active" id="tab-0">
|
||||
<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><a class="link" href="din-canteen-line.html">总部一食堂</a></td>
|
||||
<td>长庆油田总部</td>
|
||||
<td>4</td>
|
||||
<td>138</td>
|
||||
<td>414</td>
|
||||
<td>680</td>
|
||||
<td>93,840</td>
|
||||
<td>2.8</td>
|
||||
<td><span class="tag tag-green">92%</span></td>
|
||||
<td>100%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a class="link" href="din-canteen-line.html">总部二食堂</a></td>
|
||||
<td>长庆油田总部</td>
|
||||
<td>3</td>
|
||||
<td>138</td>
|
||||
<td>414</td>
|
||||
<td>520</td>
|
||||
<td>71,760</td>
|
||||
<td>2.6</td>
|
||||
<td><span class="tag tag-green">88%</span></td>
|
||||
<td>100%</td>
|
||||
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a class="link" href="din-canteen-line.html">采油一厂食堂</a></td>
|
||||
<td>采油一厂</td>
|
||||
<td>5</td>
|
||||
<td>140</td>
|
||||
<td>420</td>
|
||||
<td>860</td>
|
||||
<td>120,400</td>
|
||||
<td>2.9</td>
|
||||
<td><span class="tag tag-green">95%</span></td>
|
||||
<td>80%</td>
|
||||
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a class="link" href="din-canteen-line.html">采油一厂前线食堂</a></td>
|
||||
<td>采油一厂</td>
|
||||
<td>2</td>
|
||||
<td>140</td>
|
||||
<td>280</td>
|
||||
<td>210</td>
|
||||
<td>29,400</td>
|
||||
<td>2.5</td>
|
||||
<td><span class="tag tag-orange">74%</span></td>
|
||||
<td>50%</td>
|
||||
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a class="link" href="din-canteen-line.html">采油二厂食堂</a></td>
|
||||
<td>采油二厂</td>
|
||||
<td>4</td>
|
||||
<td>138</td>
|
||||
<td>414</td>
|
||||
<td>720</td>
|
||||
<td>99,360</td>
|
||||
<td>2.7</td>
|
||||
<td><span class="tag tag-green">90%</span></td>
|
||||
<td>75%</td>
|
||||
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a class="link" href="din-canteen-line.html">采气一厂食堂</a></td>
|
||||
<td>采气一厂</td>
|
||||
<td>3</td>
|
||||
<td>136</td>
|
||||
<td>408</td>
|
||||
<td>480</td>
|
||||
<td>65,280</td>
|
||||
<td>2.6</td>
|
||||
<td><span class="tag tag-green">86%</span></td>
|
||||
<td>67%</td>
|
||||
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a class="link" href="din-canteen-line.html">采气一厂驻地食堂</a></td>
|
||||
<td>采气一厂</td>
|
||||
<td>2</td>
|
||||
<td>136</td>
|
||||
<td>272</td>
|
||||
<td>190</td>
|
||||
<td>25,840</td>
|
||||
<td>2.4</td>
|
||||
<td><span class="tag tag-orange">72%</span></td>
|
||||
<td>50%</td>
|
||||
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a class="link" href="din-canteen-line.html">勘探院食堂</a></td>
|
||||
<td>勘探开发研究院</td>
|
||||
<td>2</td>
|
||||
<td>135</td>
|
||||
<td>405</td>
|
||||
<td>200</td>
|
||||
<td>27,000</td>
|
||||
<td>2.7</td>
|
||||
<td><span class="tag tag-green">84%</span></td>
|
||||
<td>100%</td>
|
||||
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>显示 8 条，共 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>
|
||||
|
||||
<!-- Tab1: 成本效益 -->
|
||||
<div class="tab-panel" id="tab-1">
|
||||
<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><a class="link" href="din-canteen-line.html">总部一食堂</a></td>
|
||||
<td>长庆油田总部</td>
|
||||
<td>2,814,720</td>
|
||||
<td>2,290,380</td>
|
||||
<td>524,340</td>
|
||||
<td>30.0</td>
|
||||
<td>42.5%</td>
|
||||
<td>18.6%</td>
|
||||
<td><span class="tag tag-green">96%</span></td>
|
||||
<td><span class="tag tag-blue">92</span></td>
|
||||
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a class="link" href="din-canteen-line.html">总部二食堂</a></td>
|
||||
<td>长庆油田总部</td>
|
||||
<td>2,009,280</td>
|
||||
<td>1,671,720</td>
|
||||
<td>337,560</td>
|
||||
<td>28.0</td>
|
||||
<td>44.2%</td>
|
||||
<td>16.8%</td>
|
||||
<td><span class="tag tag-green">94%</span></td>
|
||||
<td><span class="tag tag-blue">89</span></td>
|
||||
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a class="link" href="din-canteen-line.html">采油一厂食堂</a></td>
|
||||
<td>采油一厂</td>
|
||||
<td>3,371,200</td>
|
||||
<td>2,792,640</td>
|
||||
<td>578,560</td>
|
||||
<td>28.0</td>
|
||||
<td>43.8%</td>
|
||||
<td>17.2%</td>
|
||||
<td><span class="tag tag-green">93%</span></td>
|
||||
<td><span class="tag tag-blue">90</span></td>
|
||||
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a class="link" href="din-canteen-line.html">采油一厂前线食堂</a></td>
|
||||
<td>采油一厂</td>
|
||||
<td>735,000</td>
|
||||
<td>643,860</td>
|
||||
<td>91,140</td>
|
||||
<td>25.0</td>
|
||||
<td>48.6%</td>
|
||||
<td>12.4%</td>
|
||||
<td><span class="tag tag-orange">82%</span></td>
|
||||
<td><span class="tag tag-blue">74</span></td>
|
||||
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a class="link" href="din-canteen-line.html">采油二厂食堂</a></td>
|
||||
<td>采油二厂</td>
|
||||
<td>2,782,080</td>
|
||||
<td>2,309,130</td>
|
||||
<td>472,950</td>
|
||||
<td>28.0</td>
|
||||
<td>44.0%</td>
|
||||
<td>17.0%</td>
|
||||
<td><span class="tag tag-green">91%</span></td>
|
||||
<td><span class="tag tag-blue">87</span></td>
|
||||
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a class="link" href="din-canteen-line.html">采气一厂食堂</a></td>
|
||||
<td>采气一厂</td>
|
||||
<td>1,827,840</td>
|
||||
<td>1,537,390</td>
|
||||
<td>290,450</td>
|
||||
<td>28.0</td>
|
||||
<td>45.1%</td>
|
||||
<td>15.9%</td>
|
||||
<td><span class="tag tag-green">89%</span></td>
|
||||
<td><span class="tag tag-blue">85</span></td>
|
||||
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a class="link" href="din-canteen-line.html">采气一厂驻地食堂</a></td>
|
||||
<td>采气一厂</td>
|
||||
<td>620,160</td>
|
||||
<td>546,960</td>
|
||||
<td>73,200</td>
|
||||
<td>24.0</td>
|
||||
<td>49.2%</td>
|
||||
<td>11.8%</td>
|
||||
<td><span class="tag tag-orange">78%</span></td>
|
||||
<td><span class="tag tag-blue">71</span></td>
|
||||
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a class="link" href="din-canteen-line.html">勘探院食堂</a></td>
|
||||
<td>勘探开发研究院</td>
|
||||
<td>837,000</td>
|
||||
<td>676,260</td>
|
||||
<td>160,740</td>
|
||||
<td>31.0</td>
|
||||
<td>41.8%</td>
|
||||
<td>19.2%</td>
|
||||
<td><span class="tag tag-green">95%</span></td>
|
||||
<td><span class="tag tag-blue">88</span></td>
|
||||
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>显示 8 条，共 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>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
/* TAB切换 */
|
||||
function switchTab(idx) {
|
||||
document.querySelectorAll('.tab-item').forEach(function(t, i) { t.classList.toggle('active', i === idx); });
|
||||
document.querySelectorAll('.tab-panel').forEach(function(p, i) { p.classList.toggle('active', i === idx); });
|
||||
/* 更新表格标题 */
|
||||
var titles = ['食堂运营数据', '食堂成本效益数据'];
|
||||
var timeText = document.getElementById('timeSelect').options[document.getElementById('timeSelect').selectedIndex].text;
|
||||
document.querySelector('.table-card__title').textContent = titles[idx] + '（' + timeText + '）';
|
||||
}
|
||||
/* 侧边栏当前页高亮 */
|
||||
(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>
|
||||
@@ -115,6 +115,7 @@ ${CSS_RULE}
|
||||
<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-canteen.html"><span class="mi">🍽️</span>食堂报表数据</a>
|
||||
<a class="sidebar-item" href="arc-algo.html"><span class="mi">🤖</span>算法模型</a>
|
||||
</aside>
|
||||
|
||||
|
||||
@@ -140,6 +140,7 @@ tbody tr:hover{background:#F8FBFF;}
|
||||
<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-canteen.html"><span class="mi">🍽️</span>食堂报表数据</a>
|
||||
<a class="sidebar-item" href="arc-algo.html"><span class="mi">🤖</span>算法模型</a>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -1239,7 +1239,75 @@
|
||||
##### 12. din-order-line.html（餐线管理）
|
||||
- 三个 Tab（秤台实时数据、餐线汇总、秤台汇总）操作列统一移除「编辑」链接，仅保留「详情」，简化操作入口
|
||||
|
||||
#### 9.3 绿色种采
|
||||
#### 9.3 健康生产
|
||||
|
||||
##### 1. prod-proc-combo.html（净菜组配）
|
||||
- 筛选栏新增「当前食堂」「任务来源」「任务截止日期」筛选，截止日期默认当天
|
||||
- 表头重构：去掉需求规格列，新增餐品规格/份数/任务截止时间/任务来源/完成时间列
|
||||
- 食材配方列移至任务截止时间后，「查看配方」改为「食材明细」
|
||||
- 操作列重构：固定三项（食材溯源链路、查看视频、更多▾ hover 下拉）+ 状态按钮
|
||||
- 新建组配任务弹窗重构：改用下拉选择餐品/规格/份数/来源，移除手动食材清单
|
||||
- 食材明细弹窗新增「分类」列（主材/辅材/调料 标签）
|
||||
|
||||
##### 2. prod-proc-cook.html（按单烹制）
|
||||
- 筛选栏新增「当前食堂」「烹制日期」筛选，烹制日期默认当天
|
||||
- 表头重构：去掉计划/实际烹制规格、视频记录，新增餐品规格/需求份数/烹制份数/烹制日期
|
||||
- 烹制状态前移至烹制份数后，食材明细/温度过程/模型数据列前移至生重/熟重/生熟比前
|
||||
- 生熟比格式改为 1：0.8
|
||||
- 操作列重构：固定三项 + hover 下拉 + 状态按钮（通知取餐/烹制完成/开始烹制）
|
||||
- 新增烹制状态对应不同的操作按钮
|
||||
|
||||
##### 3. prod-proc-serve.html（上餐监控）
|
||||
- 筛选栏新增「当前食堂」下拉
|
||||
- 操作列重构：保留「食材溯源链路」「查看视频」，将「详情/编辑/删除」合并为「更多▾」hover 下拉菜单
|
||||
- 新增上餐弹窗：选择已完成烹制餐品后自动回填信息卡片（任务号/菜品/厨师/出锅时间/温度/餐次/识别方式/重量）
|
||||
- 新增 .action-more 下拉菜单样式体系
|
||||
- 调整表格列的顺序和部分内容
|
||||
|
||||
##### 4. prod-proc-surplus.html（余量处置）
|
||||
- 筛选栏新增「当前食堂」下拉
|
||||
- 筛选栏新增「餐线」「餐次」下拉筛选框（位于食堂之后）
|
||||
- 处置日期默认选中当天
|
||||
- 表格新增「餐线」列（位于餐次前）、「备注」列（位于处置方式后）
|
||||
- 余量(kg)列使用红色字体显示，数据按余量倒序排列
|
||||
- 操作列重构：将「详情/编辑/删除」合并为「更多▾」hover 下拉菜单
|
||||
- 新增余量登记弹窗重构：餐线→餐次→菜品三级联动选择（菜品来自上餐监控），选择后自动回填计划制作量/实际制作量/销售取餐量/余量信息卡片
|
||||
- 处置方式选择「员工福利」时，弹窗下方动态显示员工领取记录表格（含操作列删除按钮），支持点击「＋ 新增领取记录」按钮展开输入行
|
||||
- 员工福利取餐明细弹窗：新增「操作」列（删除按钮），新增底部「＋ 新增领取记录」交互（点击后显示输入行，支持确认/取消）
|
||||
|
||||
##### 5. prod-proc-stats.html（生产统计）
|
||||
- 新增页面标题行 + 食堂切换下拉（canteen-select 高亮样式）
|
||||
- 移除两个 Tab 筛选栏中原有的「食堂」筛选项
|
||||
- 生产报表 Tab：日期筛选从单个 date 改为日期范围（起始日期 至 结束日期），默认当月
|
||||
- 成本利润 Tab：日期筛选从单个 date 改为日期范围，默认当月
|
||||
|
||||
##### 6. prod-qc-daily.html（食安监控）
|
||||
- 水电气表 Tab 移除「生成能耗日报」按钮
|
||||
- 水/电/气三张能耗卡片右上角新增「✏️ 录入」入口，支持手动编辑当前余量与今日用量
|
||||
- 新增页面标题行 + 食堂切换下拉切换
|
||||
- 新增摄像头回放弹窗（含播放器、时间轴、分时段列表）
|
||||
- 新增新增证件、新增留样弹窗及交互
|
||||
|
||||
##### 7. prod-clean-order.html（净菜订单）
|
||||
- 新增页面标题行 + 食堂切换下拉
|
||||
- 筛选栏新增「预定配送时间」日期范围筛选
|
||||
- 筛选栏新增「净菜类型」下拉（净菜包/餐品净菜包）
|
||||
- 订单状态选项调整为：备货中/待配送/配送中/已完成，配送中进行确认收货操作
|
||||
- 新增弹窗通用样式与表单网格布局
|
||||
- 调整表格字段（净菜类型，调整规格与计量方式）
|
||||
|
||||
##### 8. prod-proc-cabinet.html（净菜进柜）
|
||||
- 新增页面标题行 + 食堂切换下拉
|
||||
- 重构页面样式（采用左侧柜体【支持切换】+右侧储物明细）
|
||||
- 移除 Tab（食材净菜、餐品净菜包 、智能柜总览） 切换结构，改为左右分栏布局
|
||||
- 新增标签/链接通用样式
|
||||
- 新增手动存入净菜按钮及交互
|
||||
|
||||
##### 9. prod-recipe-plan.html（食谱规划）
|
||||
- 选择餐品弹窗增加营养信息展示，对齐食谱规划页弹窗样式
|
||||
- 按周为单位进行食谱规划
|
||||
|
||||
#### 9.4 绿色种采
|
||||
##### 1.绿色种采-土地环境模块
|
||||
- 地块管理：表格改为二级表头（基本信息+最新监测数据）；
|
||||
- 新增灌溉方式/土壤类型/负责人字段；
|
||||
|
||||
@@ -122,6 +122,22 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
.detail-item.full{grid-column:1/-1;}
|
||||
.detail-label{width:120px;flex-shrink:0;color:var(--text-secondary);font-size:var(--font-sm);}
|
||||
.detail-value{flex:1;font-size:var(--font-sm);color:var(--text-primary);}
|
||||
/* 巡检记录弹窗 */
|
||||
.inspection-modal{width:960px;max-height:85vh;}
|
||||
.inspection-header-bar{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;}
|
||||
.inspection-header-bar .batch-info{font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
.inspection-header-bar .batch-info strong{color:var(--text-primary);margin-right:16px;}
|
||||
.inspection-table{width:100%;border-collapse:collapse;font-size:var(--font-sm);}
|
||||
.inspection-table thead th{background:#FAFAFA;padding:10px 12px;text-align:left;color:var(--text-secondary);font-weight:500;border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
.inspection-table tbody td{padding:12px;color:var(--text-primary);border-bottom:1px solid var(--border);}
|
||||
.inspection-table tbody tr:last-child td{border-bottom:none;}
|
||||
.inspection-table tbody tr:hover{background:#F8FBFF;}
|
||||
.inspection-empty{text-align:center;padding:40px 0;color:var(--text-placeholder);font-size:var(--font-sm);}
|
||||
/* 巡检内联编辑行 */
|
||||
.inspection-table .edit-row td{background:#F9FAFB;padding:8px;}
|
||||
.inspection-table .edit-row input,.inspection-table .edit-row select,.inspection-table .edit-row textarea{height:32px;padding:0 8px;border:1px solid var(--border);border-radius:var(--radius-sm);font-size:12px;outline:none;width:100%;min-width:80px;}
|
||||
.inspection-table .edit-row input:focus,.inspection-table .edit-row select:focus,.inspection-table .edit-row textarea:focus{border-color:var(--primary);}
|
||||
.inspection-table .edit-row textarea{height:32px;padding:4px 8px;resize:none;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -173,31 +189,31 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
<!-- 统计卡片 -->
|
||||
<div class="stats-row">
|
||||
<div class="stat-card">
|
||||
<div class="stat-card__icon blue">🌱</div>
|
||||
<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 class="stat-card__value">5</div>
|
||||
<div class="stat-card__label">种植地块数</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-card__icon green">✅</div>
|
||||
<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 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__icon orange">🌾</div>
|
||||
<div class="stat-card__info">
|
||||
<div class="stat-card__value">2</div>
|
||||
<div class="stat-card__label">虫害预警</div>
|
||||
<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__icon red">📦</div>
|
||||
<div class="stat-card__info">
|
||||
<div class="stat-card__value">1</div>
|
||||
<div class="stat-card__label">生长异常</div>
|
||||
<div class="stat-card__value">3</div>
|
||||
<div class="stat-card__label">待收获批次</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -214,22 +230,26 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
<option>全部</option>
|
||||
<option>菠菜</option>
|
||||
<option>胡萝卜</option>
|
||||
<option>油麦菜</option>
|
||||
<option>香菇</option>
|
||||
<option>四季豆</option>
|
||||
<option>生菜</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>生长状态</label>
|
||||
<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" type="date">
|
||||
<label>播种时间</label>
|
||||
<input class="filter-input" type="date" style="min-width:140px;">
|
||||
<span style="color:var(--text-secondary);font-size:var(--font-sm);">至</span>
|
||||
<input class="filter-input" type="date" style="min-width:140px;">
|
||||
</div>
|
||||
<button class="btn btn-primary">查询</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
@@ -237,7 +257,7 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
|
||||
<!-- 操作栏 -->
|
||||
<div class="action-bar">
|
||||
<button class="btn btn-primary" onclick="openModal()">➕ 新增巡检记录</button>
|
||||
<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>
|
||||
@@ -255,79 +275,121 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
<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>
|
||||
<th>种植状态</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>CROP-202604-001</td>
|
||||
<td>CROP-202601-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 class="td-actions"><a class="link" onclick="showDetail(this)">详情</a> <a class="link" onclick="openModal('edit')">编辑</a> <a class="link" style="color:var(--danger)" onclick="if(confirm('确认删除该记录？')){}">删除</a></td>
|
||||
<td>12.5</td>
|
||||
<td>2026-01-10</td>
|
||||
<td>2026-03-15</td>
|
||||
<td>成熟期</td>
|
||||
<td>滴灌</td>
|
||||
<td><span class="tag tag-green">良好</span></td>
|
||||
<td>李建国</td>
|
||||
<td>138****2051</td>
|
||||
<td><span class="tag tag-green">已收获</span></td>
|
||||
<td class="td-actions"><a class="link" onclick="showDetail(this)">详情</a> <a class="link" onclick="openModal('edit')">编辑</a> <a class="link" style="color:var(--danger)" onclick="if(confirm('确认删除该记录？')){}">删除</a> <a class="link" onclick="showInspection(this)">巡检记录</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>CROP-202604-002</td>
|
||||
<td>CROP-202603-002</td>
|
||||
<td>B区根茎基地</td>
|
||||
<td>胡萝卜</td>
|
||||
<td>红芯胡萝卜</td>
|
||||
<td>8.0</td>
|
||||
<td>2026-03-01</td>
|
||||
<td>2026-05-28</td>
|
||||
<td>成熟期</td>
|
||||
<td><span class="tag tag-green">正常</span></td>
|
||||
<td>无</td>
|
||||
<td>—</td>
|
||||
<td>2026-04-28</td>
|
||||
<td>王巡检</td>
|
||||
<td class="td-actions"><a class="link" onclick="showDetail(this)">详情</a> <a class="link" onclick="openModal('edit')">编辑</a> <a class="link" style="color:var(--danger)" onclick="if(confirm('确认删除该记录？')){}">删除</a></td>
|
||||
<td>喷灌</td>
|
||||
<td><span class="tag tag-green">良好</span></td>
|
||||
<td>王志强</td>
|
||||
<td>139****8837</td>
|
||||
<td><span class="tag tag-blue">生长中</span></td>
|
||||
<td class="td-actions"><a class="link" onclick="showDetail(this)">详情</a> <a class="link" onclick="openModal('edit')">编辑</a> <a class="link" style="color:var(--danger)" onclick="if(confirm('确认删除该记录？')){}">删除</a> <a class="link" onclick="showInspection(this)">巡检记录</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 class="td-actions"><a class="link" onclick="showDetail(this)">详情</a> <a class="link" onclick="openModal('edit')">编辑</a> <a class="link" style="color:var(--danger)" onclick="if(confirm('确认删除该记录？')){}">删除</a></td>
|
||||
<td>CROP-202603-003</td>
|
||||
<td>A区蔬菜基地</td>
|
||||
<td>油麦菜</td>
|
||||
<td>香油麦</td>
|
||||
<td>6.0</td>
|
||||
<td>2026-03-20</td>
|
||||
<td>2026-05-10</td>
|
||||
<td>成熟期</td>
|
||||
<td>滴灌</td>
|
||||
<td><span class="tag tag-green">良好</span></td>
|
||||
<td>李建国</td>
|
||||
<td>138****2051</td>
|
||||
<td><span class="tag tag-green">已收获</span></td>
|
||||
<td class="td-actions"><a class="link" onclick="showDetail(this)">详情</a> <a class="link" onclick="openModal('edit')">编辑</a> <a class="link" style="color:var(--danger)" onclick="if(confirm('确认删除该记录？')){}">删除</a> <a class="link" onclick="showInspection(this)">巡检记录</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>CROP-202604-004</td>
|
||||
<td>C区菌菇大棚</td>
|
||||
<td>香菇</td>
|
||||
<td>808香菇</td>
|
||||
<td>3.5</td>
|
||||
<td>2026-04-01</td>
|
||||
<td>2026-06-15</td>
|
||||
<td>生长期</td>
|
||||
<td>微喷</td>
|
||||
<td><span class="tag tag-orange">一般</span></td>
|
||||
<td>张伟</td>
|
||||
<td>137****6543</td>
|
||||
<td><span class="tag tag-blue">生长中</span></td>
|
||||
<td class="td-actions"><a class="link" onclick="showDetail(this)">详情</a> <a class="link" onclick="openModal('edit')">编辑</a> <a class="link" style="color:var(--danger)" onclick="if(confirm('确认删除该记录？')){}">删除</a> <a class="link" onclick="showInspection(this)">巡检记录</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>CROP-202604-005</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 class="td-actions"><a class="link" onclick="showDetail(this)">详情</a> <a class="link" onclick="openModal('edit')">编辑</a> <a class="link" style="color:var(--danger)" onclick="if(confirm('确认删除该记录？')){}">删除</a></td>
|
||||
<td>10.0</td>
|
||||
<td>2026-04-15</td>
|
||||
<td>2026-07-10</td>
|
||||
<td>幼苗期</td>
|
||||
<td>沟灌</td>
|
||||
<td><span class="tag tag-green">良好</span></td>
|
||||
<td>赵明</td>
|
||||
<td>136****9021</td>
|
||||
<td><span class="tag tag-blue">生长中</span></td>
|
||||
<td class="td-actions"><a class="link" onclick="showDetail(this)">详情</a> <a class="link" onclick="openModal('edit')">编辑</a> <a class="link" style="color:var(--danger)" onclick="if(confirm('确认删除该记录？')){}">删除</a> <a class="link" onclick="showInspection(this)">巡检记录</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>CROP-202605-006</td>
|
||||
<td>E区叶菜基地</td>
|
||||
<td>生菜</td>
|
||||
<td>罗马生菜</td>
|
||||
<td>5.0</td>
|
||||
<td>2026-05-05</td>
|
||||
<td>2026-07-01</td>
|
||||
<td>播种期</td>
|
||||
<td>滴灌</td>
|
||||
<td><span class="tag tag-green">良好</span></td>
|
||||
<td>李建国</td>
|
||||
<td>138****2051</td>
|
||||
<td><span class="tag tag-orange">播种期</span></td>
|
||||
<td class="td-actions"><a class="link" onclick="showDetail(this)">详情</a> <a class="link" onclick="openModal('edit')">编辑</a> <a class="link" style="color:var(--danger)" onclick="if(confirm('确认删除该记录？')){}">删除</a> <a class="link" onclick="showInspection(this)">巡检记录</a></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<!-- 分页 -->
|
||||
<div class="pagination">
|
||||
<span>显示 4 条，共 24 条</span>
|
||||
<span>显示 6 条，共 18 条</span>
|
||||
<button class="page-btn">‹</button>
|
||||
<button class="page-btn active">1</button>
|
||||
<button class="page-btn">2</button>
|
||||
@@ -338,18 +400,18 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
|
||||
</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-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>
|
||||
<select><option>请选择</option><option>A区蔬菜基地</option><option>B区根茎基地</option><option>C区菌菇大棚</option><option>D区豆类基地</option><option>E区叶菜基地</option></select>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<label>作物名称<span class="required">*</span></label>
|
||||
@@ -359,34 +421,45 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
<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="请输入面积" step="0.1">
|
||||
</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="请输入巡检人">
|
||||
<label>当前生长周期</label>
|
||||
<select><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></select>
|
||||
</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><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"></div>
|
||||
<div class="form-item full">
|
||||
<label>病虫害处理记录</label>
|
||||
<textarea placeholder="请输入病虫害处理记录"></textarea>
|
||||
<label>备注</label>
|
||||
<textarea placeholder="请输入备注信息"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -401,7 +474,7 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
<div class="modal-overlay" id="detailModal" style="display:none;">
|
||||
<div class="modal detail-modal">
|
||||
<div class="modal-header">
|
||||
<span class="modal-title">巡检记录详情</span>
|
||||
<span class="modal-title">种植记录详情</span>
|
||||
<span class="modal-close" onclick="closeDetailModal()">×</span>
|
||||
</div>
|
||||
<div class="modal-body" style="padding:0;">
|
||||
@@ -413,12 +486,55 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 侧边栏交互脚本 -->
|
||||
<!-- 巡检记录弹窗 -->
|
||||
<div class="modal-overlay" id="inspectionModal" style="display:none;">
|
||||
<div class="modal inspection-modal">
|
||||
<div class="modal-header">
|
||||
<span class="modal-title">巡检记录</span>
|
||||
<span class="modal-close" onclick="closeInspectionModal()">×</span>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<!-- 批次信息 -->
|
||||
<div class="inspection-header-bar">
|
||||
<div class="batch-info">
|
||||
<strong id="inspBatchNo">—</strong>
|
||||
<span id="inspCropInfo">—</span>
|
||||
</div>
|
||||
<button class="btn btn-primary" onclick="addInspectionEditRow()">➕ 新增巡检</button>
|
||||
</div>
|
||||
<!-- 巡检列表 -->
|
||||
<div style="overflow-x:auto;">
|
||||
<table class="inspection-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>巡检日期</th>
|
||||
<th>巡检人</th>
|
||||
<th>操作类型</th>
|
||||
<th>操作内容</th>
|
||||
<th>处理结果</th>
|
||||
<th>虫害情况</th>
|
||||
<th>备注</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="inspectionTableBody">
|
||||
<!-- 动态填充 -->
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="btn btn-default" onclick="closeInspectionModal()">关闭</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 交互脚本 -->
|
||||
<script>
|
||||
// 模态弹窗控制
|
||||
function openModal(mode){
|
||||
document.getElementById('modalOverlay').style.display='flex';
|
||||
var title=mode==='edit'?'编辑巡检记录':'新增巡检记录';
|
||||
var title=mode==='edit'?'编辑种植记录':'新增种植批次';
|
||||
document.querySelector('#modalOverlay .modal-title').textContent=title;
|
||||
}
|
||||
function closeModal(){document.getElementById('modalOverlay').style.display='none';}
|
||||
@@ -440,6 +556,97 @@ function showDetail(el){
|
||||
}
|
||||
function closeDetailModal(){document.getElementById('detailModal').style.display='none';}
|
||||
document.getElementById('detailModal').addEventListener('click',function(e){if(e.target===this)closeDetailModal();});
|
||||
// 巡检记录弹窗
|
||||
var inspectionData={
|
||||
'CROP-202601-001':[
|
||||
{date:'2026-03-10',person:'李巡检',type:'灌溉',content:'滴灌系统检查正常',result:'完成',pest:'无',remark:'接近收获'},
|
||||
{date:'2026-02-20',person:'王巡检',type:'除虫害',content:'发现蚜虫，喷施苦参碱',result:'已处理，待复查',pest:'蚜虫',remark:'局部叶片受损'},
|
||||
{date:'2026-02-03',person:'李巡检',type:'施肥',content:'追施复合肥10kg/亩',result:'完成',pest:'无',remark:'幼苗长势均匀'},
|
||||
{date:'2026-01-15',person:'李巡检',type:'其他',content:'出芽情况巡查',result:'正常',pest:'无',remark:'种子出芽良好'}
|
||||
],
|
||||
'CROP-202603-002':[
|
||||
{date:'2026-05-01',person:'张巡检',type:'灌溉',content:'喷灌30分钟',result:'完成',pest:'无',remark:'根茎膨大期'},
|
||||
{date:'2026-04-05',person:'王巡检',type:'除草',content:'人工除草一次',result:'完成',pest:'无',remark:'出苗整齐'},
|
||||
{date:'2026-03-10',person:'王巡检',type:'其他',content:'播种后首次巡查',result:'正常',pest:'无',remark:'土壤湿度适宜'}
|
||||
],
|
||||
'CROP-202603-003':[
|
||||
{date:'2026-04-20',person:'李巡检',type:'其他',content:'收获第一茬巡查',result:'完成',pest:'无',remark:'已收获'},
|
||||
{date:'2026-04-01',person:'李巡检',type:'灌溉',content:'滴灌20分钟',result:'完成',pest:'无',remark:'出苗正常'}
|
||||
],
|
||||
'CROP-202604-004':[
|
||||
{date:'2026-05-05',person:'张巡检',type:'除虫害',content:'黄板诱杀+通风处理',result:'观察中',pest:'菇蚊',remark:'大棚内发现菇蚊'},
|
||||
{date:'2026-04-10',person:'李巡检',type:'其他',content:'菌棒接种完成检查',result:'正常',pest:'无',remark:'接种成功率98%'}
|
||||
],
|
||||
'CROP-202604-005':[
|
||||
{date:'2026-04-20',person:'张巡检',type:'灌溉',content:'沟灌一次',result:'完成',pest:'无',remark:'种子发芽率95%'}
|
||||
],
|
||||
'CROP-202605-006':[]
|
||||
};
|
||||
var typeOptions=['除草','施肥','灌溉','用药','除虫害','其他'];
|
||||
function renderInspectionRows(records){
|
||||
var tbody=document.getElementById('inspectionTableBody');
|
||||
if(records.length===0){
|
||||
tbody.innerHTML='<tr><td colspan="8" class="inspection-empty">暂无巡检记录，请点击「新增巡检」添加</td></tr>';
|
||||
return;
|
||||
}
|
||||
var html='';
|
||||
for(var i=0;i<records.length;i++){
|
||||
var r=records[i];
|
||||
html+='<tr><td>'+r.date+'</td><td>'+r.person+'</td><td><span class="tag tag-blue">'+r.type+'</span></td><td>'+r.content+'</td><td>'+r.result+'</td><td>'+r.pest+'</td><td>'+r.remark+'</td><td><a class="link">编辑</a></td></tr>';
|
||||
}
|
||||
tbody.innerHTML=html;
|
||||
}
|
||||
function showInspection(el){
|
||||
var tr=el.closest('tr');
|
||||
var batchNo=tr.querySelectorAll('td')[0].textContent;
|
||||
var cropInfo=tr.querySelectorAll('td')[1].textContent+' / '+tr.querySelectorAll('td')[2].textContent+' / '+tr.querySelectorAll('td')[3].textContent;
|
||||
document.getElementById('inspBatchNo').textContent=batchNo;
|
||||
document.getElementById('inspCropInfo').textContent=cropInfo;
|
||||
var records=inspectionData[batchNo]||[];
|
||||
renderInspectionRows(records);
|
||||
document.getElementById('inspectionModal').style.display='flex';
|
||||
}
|
||||
function closeInspectionModal(){document.getElementById('inspectionModal').style.display='none';}
|
||||
document.getElementById('inspectionModal').addEventListener('click',function(e){if(e.target===this)closeInspectionModal();});
|
||||
function addInspectionEditRow(){
|
||||
var tbody=document.getElementById('inspectionTableBody');
|
||||
// 若已有编辑行则不重复添加
|
||||
if(tbody.querySelector('.edit-row'))return;
|
||||
// 若当前是空状态提示行则清除
|
||||
if(tbody.querySelector('.inspection-empty'))tbody.innerHTML='';
|
||||
var typeOpts='';
|
||||
for(var i=0;i<typeOptions.length;i++){typeOpts+='<option>'+typeOptions[i]+'</option>';}
|
||||
var row=document.createElement('tr');
|
||||
row.className='edit-row';
|
||||
row.innerHTML='<td><input type="date" value="2026-05-21"></td><td><input type="text" placeholder="巡检人"></td><td><select>'+typeOpts+'</select></td><td><input type="text" placeholder="操作内容"></td><td><input type="text" placeholder="处理结果"></td><td><input type="text" placeholder="虫害情况" value="无"></td><td><input type="text" placeholder="备注"></td><td><a class="link" onclick="saveInspectionRow(this)">保存</a> <a class="link" style="color:var(--danger)" onclick="cancelInspectionRow(this)">取消</a></td>';
|
||||
tbody.appendChild(row);
|
||||
row.scrollIntoView({behavior:'smooth',block:'end'});
|
||||
}
|
||||
function saveInspectionRow(el){
|
||||
var row=el.closest('tr');
|
||||
var inputs=row.querySelectorAll('input,select');
|
||||
var date=inputs[0].value||'2026-05-21';
|
||||
var person=inputs[1].value||'巡检员';
|
||||
var type=inputs[2].value;
|
||||
var content=inputs[3].value||'—';
|
||||
var result=inputs[4].value||'—';
|
||||
var pest=inputs[5].value||'无';
|
||||
var remark=inputs[6].value||'—';
|
||||
row.className='';
|
||||
row.innerHTML='<td>'+date+'</td><td>'+person+'</td><td><span class="tag tag-blue">'+type+'</span></td><td>'+content+'</td><td>'+result+'</td><td>'+pest+'</td><td>'+remark+'</td><td><a class="link">编辑</a></td>';
|
||||
// 将新行移到第一行（时间倒序，新增的最新）
|
||||
var tbody=row.parentElement;
|
||||
tbody.insertBefore(row,tbody.firstChild);
|
||||
}
|
||||
function cancelInspectionRow(el){
|
||||
var row=el.closest('tr');
|
||||
var tbody=row.parentElement;
|
||||
tbody.removeChild(row);
|
||||
// 若删除后无数据行则显示空状态
|
||||
if(tbody.children.length===0){
|
||||
tbody.innerHTML='<tr><td colspan="8" class="inspection-empty">暂无巡检记录，请点击「新增巡检」添加</td></tr>';
|
||||
}
|
||||
}
|
||||
// 折叠/展开子分组
|
||||
function toggleSubgroup(header){header.parentElement.classList.toggle('open');}
|
||||
// 初始化：若当前激活项在子分组内，展开其父分组
|
||||
|
||||
@@ -121,6 +121,20 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
.detail-item.full{grid-column:1/-1;}
|
||||
.detail-label{width:140px;flex-shrink:0;color:var(--text-secondary);font-size:var(--font-sm);}
|
||||
.detail-value{flex:1;font-size:var(--font-sm);color:var(--text-primary);}
|
||||
/* 疫苗接种记录弹窗 */
|
||||
.vaccine-modal{width:960px;max-height:85vh;}
|
||||
.vaccine-header-bar{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;}
|
||||
.vaccine-header-bar .batch-info{font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
.vaccine-header-bar .batch-info strong{color:var(--text-primary);margin-right:16px;}
|
||||
.vaccine-table{width:100%;border-collapse:collapse;font-size:var(--font-sm);}
|
||||
.vaccine-table thead th{background:#FAFAFA;padding:10px 12px;text-align:left;color:var(--text-secondary);font-weight:500;border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
.vaccine-table tbody td{padding:12px;color:var(--text-primary);border-bottom:1px solid var(--border);}
|
||||
.vaccine-table tbody tr:last-child td{border-bottom:none;}
|
||||
.vaccine-table tbody tr:hover{background:#F8FBFF;}
|
||||
.vaccine-empty{text-align:center;padding:40px 0;color:var(--text-placeholder);font-size:var(--font-sm);}
|
||||
.vaccine-table .edit-row td{background:#F9FAFB;padding:8px;}
|
||||
.vaccine-table .edit-row input,.vaccine-table .edit-row select{height:32px;padding:0 8px;border:1px solid var(--border);border-radius:var(--radius-sm);font-size:12px;outline:none;width:100%;min-width:80px;}
|
||||
.vaccine-table .edit-row input:focus,.vaccine-table .edit-row select:focus{border-color:var(--primary);}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -236,6 +250,12 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
<option>D1-羊舍</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>入栏时间</label>
|
||||
<input class="filter-input" type="date" style="min-width:140px;">
|
||||
<span style="color:var(--text-secondary);font-size:var(--font-sm);">至</span>
|
||||
<input class="filter-input" type="date" style="min-width:140px;">
|
||||
</div>
|
||||
<button class="btn btn-primary">查询</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
</div>
|
||||
@@ -243,7 +263,6 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
<!-- 操作栏 -->
|
||||
<div class="action-bar">
|
||||
<button class="btn btn-primary" onclick="openModal()">➕ 新增养殖批次</button>
|
||||
<button class="btn btn-default" onclick="openVaccineModal()">💉 记录疫苗用药</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>
|
||||
@@ -265,15 +284,18 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
<th>入栏日期</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>ST-FH-FL01-MT-DLLZ-320H-20260401-001</td>
|
||||
<td>LS-2604-001</td>
|
||||
<td>猪</td>
|
||||
<td>杜洛克</td>
|
||||
<td>A1-猪舍</td>
|
||||
@@ -281,13 +303,16 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
<td>2026-04-01</td>
|
||||
<td>312</td>
|
||||
<td>72.6</td>
|
||||
<td><span class="tag tag-green">优</span></td>
|
||||
<td>圈养</td>
|
||||
<td><span class="tag tag-green">正常</span></td>
|
||||
<td>陈大勇</td>
|
||||
<td>138****3201</td>
|
||||
<td><span class="tag tag-blue">在养</span></td>
|
||||
<td>2026-05-20</td>
|
||||
<td class="td-actions"><a class="link" onclick="showDetail(this)">详情</a> <a class="link" onclick="openModal('edit')">编辑</a> <a class="link" style="color:var(--danger)" onclick="if(confirm('确认删除该记录？')){}">删除</a></td>
|
||||
<td class="td-actions"><a class="link" onclick="showDetail(this)">详情</a> <a class="link" onclick="openModal('edit')">编辑</a> <a class="link" style="color:var(--danger)" onclick="if(confirm('确认删除该记录？')){}">删除</a> <a class="link" onclick="showVaccine(this)">疫苗接种记录</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>ST-FH-FL02-MT-HWJJ-1200-20260315-001</td>
|
||||
<td>LS-2603-002</td>
|
||||
<td>鸡</td>
|
||||
<td>黄羽鸡</td>
|
||||
<td>B3-鸡舍</td>
|
||||
@@ -295,13 +320,16 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
<td>2026-03-15</td>
|
||||
<td>1,176</td>
|
||||
<td>1.8</td>
|
||||
<td><span class="tag tag-blue">良</span></td>
|
||||
<td>散养</td>
|
||||
<td><span class="tag tag-green">正常</span></td>
|
||||
<td>刘芳</td>
|
||||
<td>139****7762</td>
|
||||
<td><span class="tag tag-blue">在养</span></td>
|
||||
<td>2026-05-05</td>
|
||||
<td class="td-actions"><a class="link" onclick="showDetail(this)">详情</a> <a class="link" onclick="openModal('edit')">编辑</a> <a class="link" style="color:var(--danger)" onclick="if(confirm('确认删除该记录？')){}">删除</a></td>
|
||||
<td class="td-actions"><a class="link" onclick="showDetail(this)">详情</a> <a class="link" onclick="openModal('edit')">编辑</a> <a class="link" style="color:var(--danger)" onclick="if(confirm('确认删除该记录？')){}">删除</a> <a class="link" onclick="showVaccine(this)">疫苗接种记录</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>ST-FH-FL03-MT-MAYU-680H-20260320-001</td>
|
||||
<td>LS-2603-003</td>
|
||||
<td>鸭</td>
|
||||
<td>麻鸭</td>
|
||||
<td>C2-鸭舍</td>
|
||||
@@ -309,13 +337,16 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
<td>2026-03-20</td>
|
||||
<td>665</td>
|
||||
<td>2.2</td>
|
||||
<td><span class="tag tag-blue">良</span></td>
|
||||
<td>半散养</td>
|
||||
<td><span class="tag tag-orange">轻微异常</span></td>
|
||||
<td>周强</td>
|
||||
<td>137****4418</td>
|
||||
<td><span class="tag tag-blue">在养</span></td>
|
||||
<td>2026-05-12</td>
|
||||
<td class="td-actions"><a class="link" onclick="showDetail(this)">详情</a> <a class="link" onclick="openModal('edit')">编辑</a> <a class="link" style="color:var(--danger)" onclick="if(confirm('确认删除该记录？')){}">删除</a></td>
|
||||
<td class="td-actions"><a class="link" onclick="showDetail(this)">详情</a> <a class="link" onclick="openModal('edit')">编辑</a> <a class="link" style="color:var(--danger)" onclick="if(confirm('确认删除该记录？')){}">删除</a> <a class="link" onclick="showVaccine(this)">疫苗接种记录</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>ST-FH-FL04-MT-HUYA-180H-20260405-001</td>
|
||||
<td>LS-2604-004</td>
|
||||
<td>羊</td>
|
||||
<td>湖羊</td>
|
||||
<td>D1-羊舍</td>
|
||||
@@ -323,10 +354,13 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
<td>2026-04-05</td>
|
||||
<td>176</td>
|
||||
<td>34.5</td>
|
||||
<td><span class="tag tag-green">优</span></td>
|
||||
<td>圈养</td>
|
||||
<td><span class="tag tag-green">正常</span></td>
|
||||
<td>陈大勇</td>
|
||||
<td>138****3201</td>
|
||||
<td><span class="tag tag-green">已出栏</span></td>
|
||||
<td>2026-06-01</td>
|
||||
<td class="td-actions"><a class="link" onclick="showDetail(this)">详情</a> <a class="link" onclick="openModal('edit')">编辑</a> <a class="link" style="color:var(--danger)" onclick="if(confirm('确认删除该记录？')){}">删除</a></td>
|
||||
<td class="td-actions"><a class="link" onclick="showDetail(this)">详情</a> <a class="link" onclick="openModal('edit')">编辑</a> <a class="link" style="color:var(--danger)" onclick="if(confirm('确认删除该记录？')){}">删除</a> <a class="link" onclick="showVaccine(this)">疫苗接种记录</a></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
@@ -374,33 +408,37 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
<input type="date">
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<label>饲料名称<span class="required">*</span></label>
|
||||
<input type="text" placeholder="请输入饲料名称">
|
||||
<label>平均体重(kg)</label>
|
||||
<input type="number" placeholder="请输入平均体重" step="0.1">
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<label>饲料来源/供应商</label>
|
||||
<input type="text" placeholder="请输入饲料来源/供应商">
|
||||
<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)</label>
|
||||
<input type="number" placeholder="请输入投喂量">
|
||||
<label>健康状态</label>
|
||||
<select><option>请选择</option><option>正常</option><option>轻微异常</option></select>
|
||||
</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="请输入停药期天数">
|
||||
<label>养殖状态<span class="required">*</span></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">
|
||||
<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">
|
||||
@@ -410,35 +448,42 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 疫苗用药记录弹窗 -->
|
||||
<!-- 疫苗接种记录弹窗 -->
|
||||
<div class="modal-overlay" id="vaccineModal" style="display:none;">
|
||||
<div class="modal">
|
||||
<div class="modal vaccine-modal">
|
||||
<div class="modal-header">
|
||||
<span class="modal-title">记录疫苗/用药</span>
|
||||
<span class="modal-title">疫苗接种记录</span>
|
||||
<span class="modal-close" onclick="closeVaccineModal()">×</span>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="form-grid">
|
||||
<div class="form-item"><label>养殖批次<span class="required">*</span></label>
|
||||
<select><option>请选择</option><option>ST-FH-FL01-MT-DLLZ（杜洛克-A1猪舍）</option><option>ST-FH-FL02-MT-HWJJ（黄羽鸡-B3鸡舍）</option><option>ST-FH-FL03-MT-MAYU（麻鸭-C2鸭舍）</option><option>ST-FH-FL04-MT-HUYA（湖羊-D1羊舍）</option></select>
|
||||
<div class="vaccine-header-bar">
|
||||
<div class="batch-info">
|
||||
<strong id="vacBatchNo">—</strong>
|
||||
<span id="vacAnimalInfo">—</span>
|
||||
</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>用药日期<span class="required">*</span></label><input type="date"></div>
|
||||
<div class="form-item"><label>用药剂量</label><input type="text" placeholder="如：2ml/头"></div>
|
||||
<div class="form-item"><label>停药期(天)</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>
|
||||
<select><option>常规免疫</option><option>疫情防控</option><option>个体治疗</option></select>
|
||||
</div>
|
||||
<div class="form-item full"><label>备注</label><textarea placeholder="请输入备注信息"></textarea></div>
|
||||
<button class="btn btn-primary" onclick="addVaccineEditRow()">➕ 新增接种</button>
|
||||
</div>
|
||||
<div style="overflow-x:auto;">
|
||||
<table class="vaccine-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>接种日期</th>
|
||||
<th>疫苗/药物名称</th>
|
||||
<th>接种类型</th>
|
||||
<th>接种数量</th>
|
||||
<th>用药剂量</th>
|
||||
<th>停药期(天)</th>
|
||||
<th>操作人</th>
|
||||
<th>备注</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="vaccineTableBody"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="btn btn-default" onclick="closeVaccineModal()">取消</button>
|
||||
<button class="btn btn-primary">确定</button>
|
||||
<button class="btn btn-default" onclick="closeVaccineModal()">关闭</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -459,7 +504,7 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 侧边栏交互脚本 -->
|
||||
<!-- 交互脚本 -->
|
||||
<script>
|
||||
// 模态弹窗控制（新增/编辑）
|
||||
function openModal(mode){
|
||||
@@ -471,13 +516,8 @@ function openModal(mode){
|
||||
function closeModal(){document.getElementById('modalOverlay').style.display='none';}
|
||||
document.getElementById('modalOverlay').addEventListener('click',function(e){if(e.target===this)closeModal();});
|
||||
|
||||
// 疫苗用药弹窗
|
||||
function openVaccineModal(){document.getElementById('vaccineModal').style.display='flex';}
|
||||
function closeVaccineModal(){document.getElementById('vaccineModal').style.display='none';}
|
||||
document.getElementById('vaccineModal').addEventListener('click',function(e){if(e.target===this)closeVaccineModal();});
|
||||
|
||||
// 详情弹窗
|
||||
var detailLabels=['养殖批次号','动物种类','品种','养殖区/舍编号','入栏数量(头/只)','入栏日期','当前存栏数','平均体重(kg)','长势评级','健康状态','预计出栏日期'];
|
||||
var detailLabels=['养殖批次号','动物种类','品种','养殖区/舍编号','入栏数量(头/只)','入栏日期','当前存栏数','平均体重(kg)','养殖方式','健康状态','负责人','负责人电话','养殖状态','预计出栏日期'];
|
||||
function showDetail(el){
|
||||
var tr=el.closest('tr');
|
||||
var tds=tr.querySelectorAll('td');
|
||||
@@ -494,6 +534,87 @@ function showDetail(el){
|
||||
function closeDetailModal(){document.getElementById('detailModal').style.display='none';}
|
||||
document.getElementById('detailModal').addEventListener('click',function(e){if(e.target===this)closeDetailModal();});
|
||||
|
||||
// 疫苗接种记录弹窗
|
||||
var vaccineData={
|
||||
'LS-2604-001':[
|
||||
{date:'2026-04-20',name:'猪瘟活疫苗',type:'预防接种',count:'312头',dose:'2ml/头',period:'0',person:'陈大勇',remark:'全群免疫'},
|
||||
{date:'2026-04-10',name:'口蹄疫灭活疫苗',type:'预防接种',count:'312头',dose:'3ml/头',period:'21',person:'陈大勇',remark:'首免'},
|
||||
{date:'2026-04-03',name:'伊维菌素',type:'驱虫',count:'312头',dose:'0.3ml/kg',period:'14',person:'陈大勇',remark:'入栏驱虫'}
|
||||
],
|
||||
'LS-2603-002':[
|
||||
{date:'2026-04-15',name:'新城疫活疫苗',type:'预防接种',count:'1176只',dose:'点眼1滴/只',period:'0',person:'刘芳',remark:'二免'},
|
||||
{date:'2026-03-22',name:'马立克氏病疫苗',type:'预防接种',count:'1200只',dose:'0.2ml/只',period:'0',person:'刘芳',remark:'首免'}
|
||||
],
|
||||
'LS-2603-003':[
|
||||
{date:'2026-04-18',name:'鸭瘟弱毒疫苗',type:'预防接种',count:'665只',dose:'1ml/只',period:'0',person:'周强',remark:'全群免疫'},
|
||||
{date:'2026-04-08',name:'阿莫西林',type:'疾病治疗',count:'38只',dose:'饮水给药',period:'7',person:'周强',remark:'部分鸭呼吸道感染'}
|
||||
],
|
||||
'LS-2604-004':[
|
||||
{date:'2026-04-12',name:'羊痘活疫苗',type:'预防接种',count:'176只',dose:'皮内注射0.5ml',period:'0',person:'陈大勇',remark:'全群免疫'}
|
||||
]
|
||||
};
|
||||
var vaccineTypeOptions=['预防接种','疾病治疗','驱虫'];
|
||||
function renderVaccineRows(records){
|
||||
var tbody=document.getElementById('vaccineTableBody');
|
||||
if(!records||records.length===0){
|
||||
tbody.innerHTML='<tr><td colspan="9" class="vaccine-empty">暂无接种记录，请点击「新增接种」添加</td></tr>';
|
||||
return;
|
||||
}
|
||||
var html='';
|
||||
for(var i=0;i<records.length;i++){
|
||||
var r=records[i];
|
||||
html+='<tr><td>'+r.date+'</td><td>'+r.name+'</td><td><span class="tag tag-blue">'+r.type+'</span></td><td>'+r.count+'</td><td>'+r.dose+'</td><td>'+r.period+'</td><td>'+r.person+'</td><td>'+r.remark+'</td><td><a class="link">编辑</a></td></tr>';
|
||||
}
|
||||
tbody.innerHTML=html;
|
||||
}
|
||||
function showVaccine(el){
|
||||
var tr=el.closest('tr');
|
||||
var batchNo=tr.querySelectorAll('td')[0].textContent;
|
||||
var animalInfo=tr.querySelectorAll('td')[1].textContent+' / '+tr.querySelectorAll('td')[2].textContent+' / '+tr.querySelectorAll('td')[3].textContent;
|
||||
document.getElementById('vacBatchNo').textContent=batchNo;
|
||||
document.getElementById('vacAnimalInfo').textContent=animalInfo;
|
||||
renderVaccineRows(vaccineData[batchNo]||[]);
|
||||
document.getElementById('vaccineModal').style.display='flex';
|
||||
}
|
||||
function closeVaccineModal(){document.getElementById('vaccineModal').style.display='none';}
|
||||
document.getElementById('vaccineModal').addEventListener('click',function(e){if(e.target===this)closeVaccineModal();});
|
||||
function addVaccineEditRow(){
|
||||
var tbody=document.getElementById('vaccineTableBody');
|
||||
if(tbody.querySelector('.edit-row'))return;
|
||||
if(tbody.querySelector('.vaccine-empty'))tbody.innerHTML='';
|
||||
var typeOpts='';
|
||||
for(var i=0;i<vaccineTypeOptions.length;i++){typeOpts+='<option>'+vaccineTypeOptions[i]+'</option>';}
|
||||
var row=document.createElement('tr');
|
||||
row.className='edit-row';
|
||||
row.innerHTML='<td><input type="date" value="2026-05-21"></td><td><input type="text" placeholder="疫苗/药物名称"></td><td><select>'+typeOpts+'</select></td><td><input type="text" placeholder="接种数量"></td><td><input type="text" placeholder="剂量"></td><td><input type="number" placeholder="天" value="0"></td><td><input type="text" placeholder="操作人"></td><td><input type="text" placeholder="备注"></td><td><a class="link" onclick="saveVaccineRow(this)">保存</a> <a class="link" style="color:var(--danger)" onclick="cancelVaccineRow(this)">取消</a></td>';
|
||||
tbody.appendChild(row);
|
||||
row.scrollIntoView({behavior:'smooth',block:'end'});
|
||||
}
|
||||
function saveVaccineRow(el){
|
||||
var row=el.closest('tr');
|
||||
var inputs=row.querySelectorAll('input,select');
|
||||
var date=inputs[0].value||'2026-05-21';
|
||||
var name=inputs[1].value||'—';
|
||||
var type=inputs[2].value;
|
||||
var count=inputs[3].value||'—';
|
||||
var dose=inputs[4].value||'—';
|
||||
var period=inputs[5].value||'0';
|
||||
var person=inputs[6].value||'—';
|
||||
var remark=inputs[7].value||'—';
|
||||
row.className='';
|
||||
row.innerHTML='<td>'+date+'</td><td>'+name+'</td><td><span class="tag tag-blue">'+type+'</span></td><td>'+count+'</td><td>'+dose+'</td><td>'+period+'</td><td>'+person+'</td><td>'+remark+'</td><td><a class="link">编辑</a></td>';
|
||||
var tbody=row.parentElement;
|
||||
tbody.insertBefore(row,tbody.firstChild);
|
||||
}
|
||||
function cancelVaccineRow(el){
|
||||
var row=el.closest('tr');
|
||||
var tbody=row.parentElement;
|
||||
tbody.removeChild(row);
|
||||
if(tbody.children.length===0){
|
||||
tbody.innerHTML='<tr><td colspan="9" class="vaccine-empty">暂无接种记录，请点击「新增接种」添加</td></tr>';
|
||||
}
|
||||
}
|
||||
|
||||
// 切换子分组展开/收起状态
|
||||
function toggleSubgroup(header){header.parentElement.classList.toggle('open');}
|
||||
// 初始化：若 active 项在子分组内，则默认展开该分组
|
||||
|
||||
@@ -39,7 +39,7 @@ body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei
|
||||
.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{overflow-x:auto;overflow-y:visible;-webkit-overflow-scrolling:touch;}
|
||||
.table-card__content table{min-width:100%;white-space:nowrap;}
|
||||
table{width:100%;border-collapse:collapse;}
|
||||
thead th{background:#FAFAFA;padding:12px 16px;text-align:left;font-size:var(--font-sm);color:var(--text-secondary);font-weight:500;border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
@@ -62,6 +62,39 @@ tbody tr:hover{background:#F8FBFF;}
|
||||
thead th:last-child,tbody td.td-actions{position:sticky;right:0;background:#fff;box-shadow:-4px 0 8px rgba(0,0,0,0.04);z-index:2;white-space:nowrap;}
|
||||
thead th:last-child{background:#FAFAFA;}
|
||||
tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
/* 更多下拉菜单 - hover触发 */
|
||||
.action-more{position:relative;display:inline-flex;}
|
||||
.action-more__trigger{color:var(--primary);cursor:pointer;font-size:var(--font-sm);user-select:none;}
|
||||
.action-more__trigger:hover{color:#40a9ff;}
|
||||
.action-more__menu{display:none;position:absolute;right:0;bottom:100%;margin-bottom:4px;background:#fff;border-radius:var(--radius-sm);box-shadow:0 3px 12px rgba(0,0,0,0.15);min-width:90px;z-index:100;padding:4px 0;}
|
||||
.action-more:hover .action-more__menu{display:block;}
|
||||
.action-more__item{display:block;padding:6px 14px;font-size:var(--font-sm);color:var(--text-primary);cursor:pointer;white-space:nowrap;transition:background .1s;}
|
||||
.action-more__item:hover{background:var(--primary-light);color:var(--primary);}
|
||||
.action-more__item--danger{color:var(--danger);}
|
||||
.action-more__item--danger:hover{background:#FFF1F0;color:var(--danger);}
|
||||
/* 弹窗 */
|
||||
.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.45);z-index:1000;display:flex;align-items:center;justify-content:center;}
|
||||
.modal{background:#fff;border-radius:8px;max-height:85vh;overflow-y:auto;box-shadow:0 4px 12px rgba(0,0,0,0.15);}
|
||||
.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 24px;}
|
||||
.form-grid .form-item--full{grid-column:1/-1;}
|
||||
.form-item{display:flex;flex-direction:column;gap:6px;}
|
||||
.form-item__label{font-size:13px;color:#595959;}.form-item__label em{color:var(--danger);font-style:normal;margin-right:2px;}
|
||||
.form-item__input{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:13px;color:var(--text-primary);outline:none;background:#fff;}
|
||||
.form-item__input:focus{border-color:var(--primary);}
|
||||
.form-item__input[readonly]{background:#f5f5f5;color:#8c8c8c;cursor:not-allowed;}
|
||||
.form-item__select{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:13px;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;}
|
||||
.form-item__select:focus{border-color:var(--primary);}
|
||||
/* 回填信息卡片 */
|
||||
.autofill-card{background:#f6f9ff;border:1px solid #d6e4ff;border-radius:6px;padding:12px 16px;display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:8px 16px;}
|
||||
.autofill-card__item{display:flex;flex-direction:column;gap:2px;}
|
||||
.autofill-card__label{font-size:11px;color:#8c8c8c;}
|
||||
.autofill-card__value{font-size:13px;color:#262626;font-weight:500;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -87,15 +120,15 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
<div class="main">
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item"><label>当前食堂</label><select class="filter-select"><option selected>长庆一食堂</option><option>长庆二食堂</option><option>长庆三食堂</option></select></div>
|
||||
<div class="filter-item"><label>菜品名称</label><input class="filter-input" type="text" placeholder="请输入菜品名称"></div>
|
||||
<div class="filter-item"><label>餐次</label><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>
|
||||
<div class="filter-item"><label>餐次</label><select class="filter-select"><option>全部</option><option>早餐</option><option>午餐</option><option>晚餐</option></select></div>
|
||||
<div class="filter-item"><label>菜品名称</label><input class="filter-input" type="text" placeholder="请输入菜品名称"></div>
|
||||
<div class="filter-item"><label>上餐状态</label><select class="filter-select"><option>全部</option><option>上餐完成</option><option>待上餐</option><option>余量不足</option></select></div>
|
||||
<div class="filter-item"><label>日期</label><input id="filterDate" class="filter-input" type="date" style="min-width:160px;"></div>
|
||||
<button class="btn btn-primary">查询</button><button class="btn btn-default">重置</button>
|
||||
</div>
|
||||
<div class="action-bar">
|
||||
<button class="btn btn-primary" onclick="openAddModal()"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M7 2v10M2 7h10" stroke="#fff" stroke-width="1.6" stroke-linecap="round"/></svg>新增上餐</button>
|
||||
<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>
|
||||
@@ -104,14 +137,14 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
<div class="table-card__header"><div class="table-card__title">上餐监控</div></div>
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead><tr><th>餐次</th><th>菜品名称</th><th>识别方式</th><th>厨师</th><th>烹制任务号</th><th>出锅时间</th><th>出锅温度(℃)</th><th>送达餐线时间</th><th>送达餐线</th><th>送达设备(秤台)</th><th>上餐重量(kg)</th><th>上餐状态</th><th>操作</th></tr></thead>
|
||||
<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><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 class="td-actions"><a class="link">食材溯源链路</a> <a class="link">查看视频</a> <a class="link">详情</a> <a class="link">编辑</a> <a class="link" style="color:var(--danger)">删除</a></td></tr>
|
||||
<tr><td><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 class="td-actions"><a class="link">食材溯源链路</a> <a class="link">查看视频</a> <a class="link">详情</a> <a class="link">编辑</a> <a class="link" style="color:var(--danger)">删除</a></td></tr>
|
||||
<tr><td><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 class="td-actions"><a class="link">食材溯源链路</a> <a class="link">查看视频</a> <a class="link">详情</a> <a class="link">编辑</a> <a class="link" style="color:var(--danger)">删除</a></td></tr>
|
||||
<tr><td><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 class="td-actions"><a class="link">食材溯源链路</a> <a class="link">查看视频</a> <a class="link">详情</a> <a class="link">编辑</a> <a class="link" style="color:var(--danger)">删除</a></td></tr>
|
||||
<tr><td><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 class="td-actions"><a class="link">食材溯源链路</a> <a class="link">查看视频</a> <a class="link">详情</a> <a class="link">编辑</a> <a class="link" style="color:var(--danger)">删除</a></td></tr>
|
||||
<tr><td><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 class="td-actions"><a class="link">食材溯源链路</a> <a class="link">查看视频</a> <a class="link">详情</a> <a class="link">编辑</a> <a class="link" style="color:var(--danger)">删除</a></td></tr>
|
||||
<tr><td>A区中餐线</td><td><span class="tag tag-blue">午餐</span></td><td>00025号秤</td><td><span class="tag tag-green">🤖 自动识别</span></td><td>宫保鸡丁</td><td>12.5</td><td>38.2</td><td>11:18</td><td>11:30</td><td><span class="tag tag-green">上餐完成</span></td><td>COOK-001</td><td>82</td><td>张厨师</td><td class="td-actions"><a class="link">食材溯源链路</a> <a class="link">查看视频</a> <span class="action-more"><a class="action-more__trigger">更多 ▾</a><div class="action-more__menu"><a class="action-more__item">详情</a><a class="action-more__item">编辑</a><a class="action-more__item action-more__item--danger">删除</a></div></span></td></tr>
|
||||
<tr><td>A区中餐线</td><td><span class="tag tag-blue">午餐</span></td><td>00025号秤</td><td><span class="tag tag-green">🤖 自动识别</span></td><td>番茄炒蛋</td><td>8.3</td><td>22.6</td><td>11:20</td><td>11:30</td><td><span class="tag tag-green">上餐完成</span></td><td>COOK-002</td><td>78</td><td>李厨师</td><td class="td-actions"><a class="link">食材溯源链路</a> <a class="link">查看视频</a> <span class="action-more"><a class="action-more__trigger">更多 ▾</a><div class="action-more__menu"><a class="action-more__item">详情</a><a class="action-more__item">编辑</a><a class="action-more__item action-more__item--danger">删除</a></div></span></td></tr>
|
||||
<tr><td>B区中餐线</td><td><span class="tag tag-blue">午餐</span></td><td>00027号秤</td><td><span class="tag tag-blue">👤 人工选择</span></td><td>红烧肉</td><td>1.2</td><td>42.6</td><td>11:22</td><td>11:38</td><td><span class="tag tag-red">余量不足</span></td><td>COOK-003</td><td>86</td><td>王厨师</td><td class="td-actions"><a class="link">食材溯源链路</a> <a class="link">查看视频</a> <span class="action-more"><a class="action-more__trigger">更多 ▾</a><div class="action-more__menu"><a class="action-more__item">详情</a><a class="action-more__item">编辑</a><a class="action-more__item action-more__item--danger">删除</a></div></span></td></tr>
|
||||
<tr><td>A区早餐线</td><td><span class="tag tag-gray">早餐</span></td><td>00022号秤</td><td><span class="tag tag-green">🤖 自动识别</span></td><td>小米粥</td><td>0</td><td>12.6</td><td>07:20</td><td>07:28</td><td><span class="tag tag-green">上餐完成</span></td><td>COOK-006</td><td>75</td><td>赵厨师</td><td class="td-actions"><a class="link">食材溯源链路</a> <a class="link">查看视频</a> <span class="action-more"><a class="action-more__trigger">更多 ▾</a><div class="action-more__menu"><a class="action-more__item">详情</a><a class="action-more__item">编辑</a><a class="action-more__item action-more__item--danger">删除</a></div></span></td></tr>
|
||||
<tr><td>B区早餐线</td><td><span class="tag tag-gray">早餐</span></td><td>00023号秤</td><td><span class="tag tag-blue">👤 人工选择</span></td><td>燕麦粥</td><td>2.1</td><td>8.4</td><td>07:22</td><td>07:35</td><td><span class="tag tag-green">上餐完成</span></td><td>COOK-007</td><td>72</td><td>陈厨师</td><td class="td-actions"><a class="link">食材溯源链路</a> <a class="link">查看视频</a> <span class="action-more"><a class="action-more__trigger">更多 ▾</a><div class="action-more__menu"><a class="action-more__item">详情</a><a class="action-more__item">编辑</a><a class="action-more__item action-more__item--danger">删除</a></div></span></td></tr>
|
||||
<tr><td>C区快餐线</td><td><span class="tag tag-blue">午餐</span></td><td>00028号秤</td><td><span class="tag tag-blue">👤 人工选择</span></td><td>蒜蓉菠菜</td><td>—</td><td>—</td><td>—</td><td>—</td><td><span class="tag tag-gray">待上餐</span></td><td>COOK-005</td><td>—</td><td>—</td><td class="td-actions"><a class="link">食材溯源链路</a> <a class="link">查看视频</a> <span class="action-more"><a class="action-more__trigger">更多 ▾</a><div class="action-more__menu"><a class="action-more__item">详情</a><a class="action-more__item">编辑</a><a class="action-more__item action-more__item--danger">删除</a></div></span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@@ -121,6 +154,112 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script></script>
|
||||
|
||||
<!-- 新增上餐弹窗 -->
|
||||
<div class="modal-overlay" id="addServeModal" style="display:none;" onclick="if(event.target===this)closeAddModal()">
|
||||
<div class="modal" style="width:720px;">
|
||||
<div class="modal-header">
|
||||
<span class="modal-title">新增上餐</span>
|
||||
<span class="modal-close" onclick="closeAddModal()">×</span>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<!-- 选择已完成烹制餐品 -->
|
||||
<div class="form-item" style="margin-bottom:16px;">
|
||||
<span class="form-item__label"><em>*</em>选择烹制餐品（已完成）</span>
|
||||
<select class="form-item__select" id="selectDish" onchange="onDishChange(this)">
|
||||
<option value="">请选择已完成烹制的餐品</option>
|
||||
<option value="1">COOK-001 | 宫保鸡丁 | 张厨师 | 出锅 11:18</option>
|
||||
<option value="2">COOK-002 | 番茄炒蛋 | 李厨师 | 出锅 11:20</option>
|
||||
<option value="3">COOK-003 | 红烧肉 | 王厨师 | 出锅 11:22</option>
|
||||
<option value="4">COOK-006 | 小米粥 | 赵厨师 | 出锅 07:20</option>
|
||||
<option value="5">COOK-007 | 燕麦粥 | 陈厨师 | 出锅 07:22</option>
|
||||
</select>
|
||||
</div>
|
||||
<!-- 自动回填信息卡片 -->
|
||||
<div class="autofill-card" id="autofillCard" style="margin-bottom:20px;display:none;">
|
||||
<div class="autofill-card__item"><span class="autofill-card__label">烹制任务号</span><span class="autofill-card__value" id="af_taskNo">—</span></div>
|
||||
<div class="autofill-card__item"><span class="autofill-card__label">菜品名称</span><span class="autofill-card__value" id="af_dish">—</span></div>
|
||||
<div class="autofill-card__item"><span class="autofill-card__label">厨师</span><span class="autofill-card__value" id="af_chef">—</span></div>
|
||||
<div class="autofill-card__item"><span class="autofill-card__label">出锅时间</span><span class="autofill-card__value" id="af_outTime">—</span></div>
|
||||
<div class="autofill-card__item"><span class="autofill-card__label">出锅温度(℃)</span><span class="autofill-card__value" id="af_outTemp">—</span></div>
|
||||
<div class="autofill-card__item"><span class="autofill-card__label">餐次</span><span class="autofill-card__value" id="af_meal">—</span></div>
|
||||
<div class="autofill-card__item"><span class="autofill-card__label">识别方式</span><span class="autofill-card__value" id="af_recog">—</span></div>
|
||||
<div class="autofill-card__item"><span class="autofill-card__label">上餐重量(kg)</span><span class="autofill-card__value" id="af_weight">—</span></div>
|
||||
</div>
|
||||
<!-- 手动填写字段 -->
|
||||
<div class="form-grid">
|
||||
<div class="form-item">
|
||||
<span class="form-item__label"><em>*</em>送达餐线</span>
|
||||
<select class="form-item__select">
|
||||
<option value="">请选择</option>
|
||||
<option>A区中餐线</option>
|
||||
<option>B区中餐线</option>
|
||||
<option>A区早餐线</option>
|
||||
<option>B区早餐线</option>
|
||||
<option>C区快餐线</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<span class="form-item__label"><em>*</em>送达设备(秤台)</span>
|
||||
<select class="form-item__select">
|
||||
<option value="">请选择</option>
|
||||
<option>00022号秤</option>
|
||||
<option>00023号秤</option>
|
||||
<option>00025号秤</option>
|
||||
<option>00027号秤</option>
|
||||
<option>00028号秤</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<span class="form-item__label"><em>*</em>送达餐线时间</span>
|
||||
<input class="form-item__input" type="time" value="">
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<span class="form-item__label">当前余量(kg)</span>
|
||||
<input class="form-item__input" type="number" step="0.1" placeholder="请输入当前余量">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="btn btn-default" onclick="closeAddModal()">取消</button>
|
||||
<button class="btn btn-primary" onclick="closeAddModal()">确定</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
/* 日期默认选中当天 */
|
||||
(function(){var d=new Date();var y=d.getFullYear();var m=String(d.getMonth()+1).padStart(2,'0');var day=String(d.getDate()).padStart(2,'0');document.getElementById('filterDate').value=y+'-'+m+'-'+day;})();
|
||||
|
||||
/* 新增上餐弹窗 */
|
||||
function openAddModal(){
|
||||
document.getElementById('addServeModal').style.display='flex';
|
||||
document.getElementById('selectDish').value='';
|
||||
document.getElementById('autofillCard').style.display='none';
|
||||
}
|
||||
function closeAddModal(){document.getElementById('addServeModal').style.display='none';}
|
||||
|
||||
/* 已完成烹制餐品模拟数据 */
|
||||
var dishData={
|
||||
'1':{taskNo:'COOK-001',dish:'宫保鸡丁',chef:'张厨师',outTime:'11:18',outTemp:'82',meal:'午餐',recog:'自动识别',weight:'38.2'},
|
||||
'2':{taskNo:'COOK-002',dish:'番茄炒蛋',chef:'李厨师',outTime:'11:20',outTemp:'78',meal:'午餐',recog:'自动识别',weight:'22.6'},
|
||||
'3':{taskNo:'COOK-003',dish:'红烧肉',chef:'王厨师',outTime:'11:22',outTemp:'86',meal:'午餐',recog:'人工选择',weight:'42.6'},
|
||||
'4':{taskNo:'COOK-006',dish:'小米粥',chef:'赵厨师',outTime:'07:20',outTemp:'75',meal:'早餐',recog:'自动识别',weight:'12.6'},
|
||||
'5':{taskNo:'COOK-007',dish:'燕麦粥',chef:'陈厨师',outTime:'07:22',outTemp:'72',meal:'早餐',recog:'人工选择',weight:'8.4'}
|
||||
};
|
||||
function onDishChange(sel){
|
||||
var v=sel.value,card=document.getElementById('autofillCard');
|
||||
if(!v){card.style.display='none';return;}
|
||||
var d=dishData[v];card.style.display='grid';
|
||||
document.getElementById('af_taskNo').textContent=d.taskNo;
|
||||
document.getElementById('af_dish').textContent=d.dish;
|
||||
document.getElementById('af_chef').textContent=d.chef;
|
||||
document.getElementById('af_outTime').textContent=d.outTime;
|
||||
document.getElementById('af_outTemp').textContent=d.outTemp;
|
||||
document.getElementById('af_meal').textContent=d.meal;
|
||||
document.getElementById('af_recog').textContent=d.recog;
|
||||
document.getElementById('af_weight').textContent=d.weight+' kg';
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -146,7 +146,7 @@ tr.summary-row td{font-weight:700;background:#FAFAFA;}
|
||||
<!-- 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><input id="prodDateStart" class="filter-input" type="date" style="min-width:140px;"> <span style="margin:0 4px;color:#999;">至</span> <input id="prodDateEnd" class="filter-input" type="date" style="min-width:140px;"></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>
|
||||
@@ -171,7 +171,7 @@ tr.summary-row td{font-weight:700;background:#FAFAFA;}
|
||||
<!-- 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><input id="costDateStart" class="filter-input" type="date" style="min-width:140px;"> <span style="margin:0 4px;color:#999;">至</span> <input id="costDateEnd" class="filter-input" type="date" style="min-width:140px;"></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>
|
||||
@@ -217,6 +217,17 @@ tr.summary-row td{font-weight:700;background:#FAFAFA;}
|
||||
</div>
|
||||
|
||||
<script>
|
||||
/* 日期范围默认当月 */
|
||||
(function(){
|
||||
var d=new Date();var y=d.getFullYear();var m=String(d.getMonth()+1).padStart(2,'0');
|
||||
var today=y+'-'+m+'-'+String(d.getDate()).padStart(2,'0');
|
||||
var monthStart=y+'-'+m+'-01';
|
||||
document.getElementById('prodDateStart').value=monthStart;
|
||||
document.getElementById('prodDateEnd').value=today;
|
||||
document.getElementById('costDateStart').value=monthStart;
|
||||
document.getElementById('costDateEnd').value=today;
|
||||
})();
|
||||
|
||||
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));
|
||||
|
||||
@@ -46,7 +46,7 @@ body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei
|
||||
.table-card__header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border);}
|
||||
.table-card__title{font-size:var(--font-base);font-weight:600;}
|
||||
.table-card__actions{display:flex;gap:8px;align-items:center;}
|
||||
.table-card__content{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;}
|
||||
.table-card__content{overflow-x:auto;overflow-y:visible;-webkit-overflow-scrolling:touch;}
|
||||
.table-card__content table{min-width:100%;white-space:nowrap;}
|
||||
table{width:100%;border-collapse:collapse;}
|
||||
thead th{background:#FAFAFA;padding:12px 16px;text-align:left;font-size:var(--font-sm);color:var(--text-secondary);font-weight:500;border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
@@ -85,6 +85,23 @@ tbody tr:hover{background:#F8FBFF;}
|
||||
thead th:last-child,tbody td.td-actions{position:sticky;right:0;background:#fff;box-shadow:-4px 0 8px rgba(0,0,0,0.04);z-index:2;white-space:nowrap;}
|
||||
thead th:last-child{background:#FAFAFA;}
|
||||
tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
/* 更多下拉菜单 - hover触发 */
|
||||
.action-more{position:relative;display:inline-flex;}
|
||||
.action-more__trigger{color:var(--primary);cursor:pointer;font-size:var(--font-sm);user-select:none;}
|
||||
.action-more__trigger:hover{color:#40a9ff;}
|
||||
.action-more__menu{display:none;position:absolute;right:0;bottom:100%;margin-bottom:4px;background:#fff;border-radius:var(--radius-sm);box-shadow:0 3px 12px rgba(0,0,0,0.15);min-width:90px;z-index:100;padding:4px 0;}
|
||||
.action-more:hover .action-more__menu{display:block;}
|
||||
.action-more__item{display:block;padding:6px 14px;font-size:var(--font-sm);color:var(--text-primary);cursor:pointer;white-space:nowrap;transition:background .1s;}
|
||||
.action-more__item:hover{background:var(--primary-light);color:var(--primary);}
|
||||
.action-more__item--danger{color:var(--danger);}
|
||||
.action-more__item--danger:hover{background:#FFF1F0;color:var(--danger);}
|
||||
/* 余量红色字体 */
|
||||
.td-surplus{color:var(--danger);font-weight:500;}
|
||||
/* 回填信息卡片 */
|
||||
.autofill-card{background:#f6f9ff;border:1px solid #d6e4ff;border-radius:6px;padding:12px 16px;display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:8px 16px;}
|
||||
.autofill-card__item{display:flex;flex-direction:column;gap:2px;}
|
||||
.autofill-card__label{font-size:11px;color:#8c8c8c;}
|
||||
.autofill-card__value{font-size:13px;color:#262626;font-weight:500;}
|
||||
/* 取餐明细弹窗 */
|
||||
.welfare-meta{display:flex;gap:32px;margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid #f0f0f0;}
|
||||
.welfare-meta__item{display:flex;flex-direction:column;gap:4px;}
|
||||
@@ -133,7 +150,9 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item"><label>当前食堂</label><select class="filter-select"><option selected>长庆一食堂</option><option>长庆二食堂</option><option>长庆三食堂</option></select></div>
|
||||
<div class="filter-item"><label>处置日期</label><input class="filter-input" type="date"></div>
|
||||
<div class="filter-item"><label>餐线</label><select class="filter-select"><option>全部</option><option>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></select></div>
|
||||
<div class="filter-item"><label>处置日期</label><input id="filterDate" class="filter-input" type="date" style="min-width:160px;"></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>
|
||||
@@ -150,16 +169,16 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
<div class="table-card__header"><div class="table-card__title">余量处置</div></div>
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead><tr><th>处置单号</th><th>菜品名称</th><th>餐次</th><th>计划制作量(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>
|
||||
<thead><tr><th>处置单号</th><th>菜品名称</th><th>餐线</th><th>餐次</th><th>计划制作(kg)</th><th>实际制作(kg)</th><th>销售/取餐(kg)</th><th>余量(kg)</th><th>余量率(%)</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" onclick="openWelfareModal('宫保鸡丁','SUR-001','2.0')">员工福利</a></td><td>2.0</td><td><span class="tag tag-green">正常</span></td><td>2026-04-22 14:00</td><td>张主管</td><td class="td-actions"><a class="link">食材溯源链路</a> <a class="link">查看视频</a> <a class="link">详情</a> <a class="link">编辑</a> <a class="link" style="color:var(--danger)">删除</a></td></tr>
|
||||
<tr><td>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 class="td-actions"><a class="link">食材溯源链路</a> <a class="link">查看视频</a> <a class="link">详情</a> <a class="link">编辑</a> <a class="link" style="color:var(--danger)">删除</a></td></tr>
|
||||
<tr><td>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 class="td-actions"><a class="link">食材溯源链路</a> <a class="link">查看视频</a> <a class="link">详情</a> <a class="link">编辑</a> <a class="link" style="color:var(--danger)">删除</a></td></tr>
|
||||
<tr><td>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" onclick="openWelfareModal('白米饭','SUR-002','3.0')">员工福利</a></td><td>3.0</td><td><span class="tag tag-green">正常</span></td><td>2026-04-22 14:00</td><td>张主管</td><td class="td-actions"><a class="link">食材溯源链路</a> <a class="link">查看视频</a> <a class="link">详情</a> <a class="link">编辑</a> <a class="link" style="color:var(--danger)">删除</a></td></tr>
|
||||
<tr><td>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" onclick="openWelfareModal('番茄炒蛋','SUR-003','2.2')">员工福利</a></td><td>2.2</td><td><span class="tag tag-green">正常</span></td><td>2026-04-22 14:30</td><td>张主管</td><td class="td-actions"><a class="link">食材溯源链路</a> <a class="link">查看视频</a> <a class="link">详情</a> <a class="link">编辑</a> <a class="link" style="color:var(--danger)">删除</a></td></tr>
|
||||
<tr><td>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 class="td-actions"><a class="link">食材溯源链路</a> <a class="link">查看视频</a> <a class="link">详情</a> <a class="link">编辑</a> <a class="link" style="color:var(--danger)">删除</a></td></tr>
|
||||
<tr><td>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 class="td-actions"><a class="link">食材溯源链路</a> <a class="link">查看视频</a> <a class="link">详情</a> <a class="link">编辑</a> <a class="link" style="color:var(--danger)">删除</a></td></tr>
|
||||
<tr><td>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" onclick="openWelfareModal('红烧肉','SUR-005','3.2')">员工福利</a></td><td>3.2</td><td><span class="tag tag-green">正常</span></td><td>2026-04-22 14:45</td><td>张主管</td><td class="td-actions"><a class="link">食材溯源链路</a> <a class="link">查看视频</a> <a class="link">详情</a> <a class="link">编辑</a> <a class="link" style="color:var(--danger)">删除</a></td></tr>
|
||||
<tr><td>SUR-002</td><td>白米饭</td><td>A区中餐线</td><td>午餐</td><td>60.0</td><td>62.0</td><td>54.0</td><td class="td-surplus">8.0</td><td>12.9%</td><td>捐赠</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 class="td-actions"><a class="link">食材溯源链路</a> <a class="link">查看视频</a> <span class="action-more"><a class="action-more__trigger">更多 ▾</a><div class="action-more__menu"><a class="action-more__item">详情</a><a class="action-more__item">编辑</a><a class="action-more__item action-more__item--danger">删除</a></div></span></td></tr>
|
||||
<tr><td>SUR-002</td><td>白米饭</td><td>A区中餐线</td><td>午餐</td><td>60.0</td><td>62.0</td><td>54.0</td><td class="td-surplus">8.0</td><td>12.9%</td><td><a class="link" onclick="openWelfareModal('白米饭','SUR-002','3.0')">员工福利</a></td><td>加班餐</td><td>3.0</td><td><span class="tag tag-green">正常</span></td><td>2026-04-22 14:00</td><td>张主管</td><td class="td-actions"><a class="link">食材溯源链路</a> <a class="link">查看视频</a> <span class="action-more"><a class="action-more__trigger">更多 ▾</a><div class="action-more__menu"><a class="action-more__item">详情</a><a class="action-more__item">编辑</a><a class="action-more__item action-more__item--danger">删除</a></div></span></td></tr>
|
||||
<tr><td>SUR-004</td><td>蒜蓉菠菜</td><td>B区中餐线</td><td>午餐</td><td>15.0</td><td>14.8</td><td>10.0</td><td class="td-surplus">4.8</td><td>32.4%</td><td>废弃</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 class="td-actions"><a class="link">食材溯源链路</a> <a class="link">查看视频</a> <span class="action-more"><a class="action-more__trigger">更多 ▾</a><div class="action-more__menu"><a class="action-more__item">详情</a><a class="action-more__item">编辑</a><a class="action-more__item action-more__item--danger">删除</a></div></span></td></tr>
|
||||
<tr><td>SUR-004</td><td>蒜蓉菠菜</td><td>B区中餐线</td><td>午餐</td><td>15.0</td><td>14.8</td><td>10.0</td><td class="td-surplus">4.8</td><td>32.4%</td><td>加工再利用</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 class="td-actions"><a class="link">食材溯源链路</a> <a class="link">查看视频</a> <span class="action-more"><a class="action-more__trigger">更多 ▾</a><div class="action-more__menu"><a class="action-more__item">详情</a><a class="action-more__item">编辑</a><a class="action-more__item action-more__item--danger">删除</a></div></span></td></tr>
|
||||
<tr><td>SUR-001</td><td>宫保鸡丁</td><td>A区中餐线</td><td>午餐</td><td>42.5</td><td>43.0</td><td>39.5</td><td class="td-surplus">3.5</td><td>8.1%</td><td><a class="link" onclick="openWelfareModal('宫保鸡丁','SUR-001','2.0')">员工福利</a></td><td>加班餐</td><td>2.0</td><td><span class="tag tag-green">正常</span></td><td>2026-04-22 14:00</td><td>张主管</td><td class="td-actions"><a class="link">食材溯源链路</a> <a class="link">查看视频</a> <span class="action-more"><a class="action-more__trigger">更多 ▾</a><div class="action-more__menu"><a class="action-more__item">详情</a><a class="action-more__item">编辑</a><a class="action-more__item action-more__item--danger">删除</a></div></span></td></tr>
|
||||
<tr><td>SUR-001</td><td>宫保鸡丁</td><td>A区中餐线</td><td>午餐</td><td>42.5</td><td>43.0</td><td>39.5</td><td class="td-surplus">3.5</td><td>8.1%</td><td>捐赠</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 class="td-actions"><a class="link">食材溯源链路</a> <a class="link">查看视频</a> <span class="action-more"><a class="action-more__trigger">更多 ▾</a><div class="action-more__menu"><a class="action-more__item">详情</a><a class="action-more__item">编辑</a><a class="action-more__item action-more__item--danger">删除</a></div></span></td></tr>
|
||||
<tr><td>SUR-005</td><td>红烧肉</td><td>B区中餐线</td><td>午餐</td><td>50.0</td><td>48.5</td><td>45.3</td><td class="td-surplus">3.2</td><td>6.6%</td><td><a class="link" onclick="openWelfareModal('红烧肉','SUR-005','3.2')">员工福利</a></td><td>加班餐</td><td>3.2</td><td><span class="tag tag-green">正常</span></td><td>2026-04-22 14:45</td><td>张主管</td><td class="td-actions"><a class="link">食材溯源链路</a> <a class="link">查看视频</a> <span class="action-more"><a class="action-more__trigger">更多 ▾</a><div class="action-more__menu"><a class="action-more__item">详情</a><a class="action-more__item">编辑</a><a class="action-more__item action-more__item--danger">删除</a></div></span></td></tr>
|
||||
<tr><td>SUR-003</td><td>香辣大虾</td><td>C区快餐线</td><td>午餐</td><td>20.0</td><td>20.5</td><td>18.3</td><td class="td-surplus">2.2</td><td>10.7%</td><td>废弃</td><td>只剩辣椒和虾头</td><td>2.2</td><td><span class="tag tag-green">正常</span></td><td>2026-04-22 14:30</td><td>张主管</td><td class="td-actions"><a class="link">食材溯源链路</a> <a class="link">查看视频</a> <span class="action-more"><a class="action-more__trigger">更多 ▾</a><div class="action-more__menu"><a class="action-more__item">详情</a><a class="action-more__item">编辑</a><a class="action-more__item action-more__item--danger">删除</a></div></span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@@ -175,44 +194,53 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
</div>
|
||||
|
||||
<div class="modal-overlay" id="modalOverlay" style="display:none;">
|
||||
<div class="modal">
|
||||
<div class="modal" style="width:760px;">
|
||||
<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="请输入菜品名称">
|
||||
<label>餐线<span class="required">*</span></label>
|
||||
<select id="addSurplusLine" onchange="onSurplusLineChange()">
|
||||
<option value="">请选择餐线</option>
|
||||
<option>A区中餐线</option><option>B区中餐线</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<label>餐次<span class="required">*</span></label>
|
||||
<select><option>请选择</option><option>早餐</option><option>午餐</option><option>晚餐</option></select>
|
||||
<select id="addSurplusMeal" onchange="onSurplusMealChange()">
|
||||
<option value="">请选择餐次</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>销售/取餐量(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 class="form-item full">
|
||||
<label>菜品名称（来自上餐监控）<span class="required">*</span></label>
|
||||
<select id="addSurplusDish" onchange="onSurplusDishChange()">
|
||||
<option value="">请先选择餐线和餐次</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 自动回填信息卡片 -->
|
||||
<div class="autofill-card" id="surplusAutofill" style="margin:16px 0;display:none;">
|
||||
<div class="autofill-card__item"><span class="autofill-card__label">计划制作量(kg)</span><span class="autofill-card__value" id="sf_plan">—</span></div>
|
||||
<div class="autofill-card__item"><span class="autofill-card__label">实际制作量(kg)</span><span class="autofill-card__value" id="sf_actual">—</span></div>
|
||||
<div class="autofill-card__item"><span class="autofill-card__label">销售/取餐量(kg)</span><span class="autofill-card__value" id="sf_sold">—</span></div>
|
||||
<div class="autofill-card__item"><span class="autofill-card__label">余量(kg)</span><span class="autofill-card__value" id="sf_surplus" style="color:#ff4d4f;font-weight:600;">—</span></div>
|
||||
</div>
|
||||
<!-- 第二步：处置信息 -->
|
||||
<div class="form-grid" style="margin-top:16px;">
|
||||
<div class="form-item">
|
||||
<label>处置方式<span class="required">*</span></label>
|
||||
<select><option>请选择</option><option>员工福利</option><option>捐赠</option><option>废弃</option><option>加工再利用</option></select>
|
||||
<select id="addSurplusMethod" onchange="onSurplusMethodChange()">
|
||||
<option value="">请选择</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="请输入处置数量">
|
||||
<input type="number" step="0.1" placeholder="请输入处置数量">
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<label>处置人员<span class="required">*</span></label>
|
||||
@@ -223,21 +251,99 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
<input type="datetime-local">
|
||||
</div>
|
||||
<div class="form-item full">
|
||||
<label>备注（异常原因描述）</label>
|
||||
<textarea placeholder="如有异常请填写原因描述"></textarea>
|
||||
<label>备注</label>
|
||||
<input type="text" placeholder="如有异常请填写原因描述" style="width:100%;">
|
||||
</div>
|
||||
</div>
|
||||
<!-- 员工福利领取记录（处置方式=员工福利时显示） -->
|
||||
<div id="surplusWelfareSection" style="display:none;margin-top:20px;border-top:1px solid #e8e8e8;padding-top:16px;">
|
||||
<div style="font-size:14px;font-weight:500;margin-bottom:12px;">员工领取记录</div>
|
||||
<table style="width:100%;border-collapse:collapse;border:1px solid #e8e8e8;border-radius:4px;">
|
||||
<thead><tr style="background:#fafafa;"><th style="padding:10px 12px;text-align:left;font-size:12px;color:#8c8c8c;border-bottom:1px solid #e8e8e8;">序号</th><th style="padding:10px 12px;text-align:left;font-size:12px;color:#8c8c8c;border-bottom:1px solid #e8e8e8;">领取人</th><th style="padding:10px 12px;text-align:left;font-size:12px;color:#8c8c8c;border-bottom:1px solid #e8e8e8;">工号</th><th style="padding:10px 12px;text-align:left;font-size:12px;color:#8c8c8c;border-bottom:1px solid #e8e8e8;">部门</th><th style="padding:10px 12px;text-align:left;font-size:12px;color:#8c8c8c;border-bottom:1px solid #e8e8e8;">领取量(kg)</th><th style="padding:10px 12px;text-align:left;font-size:12px;color:#8c8c8c;border-bottom:1px solid #e8e8e8;">领取时间</th><th style="padding:10px 12px;text-align:left;font-size:12px;color:#8c8c8c;border-bottom:1px solid #e8e8e8;">领取方式</th><th style="padding:10px 12px;text-align:left;font-size:12px;color:#8c8c8c;border-bottom:1px solid #e8e8e8;">操作</th></tr></thead>
|
||||
<tbody id="surplusWelfareTbody">
|
||||
<!-- 新增行（默认隐藏） -->
|
||||
<tr id="surplusWelfareAddRow" style="display:none;background:#f9fbff;"><td style="padding:8px 12px;font-size:13px;color:#8c8c8c;">1</td><td style="padding:8px 12px;"><input style="width:60px;height:28px;border:1px solid #d9d9d9;border-radius:4px;padding:0 6px;font-size:12px;" placeholder="姓名"></td><td style="padding:8px 12px;"><input style="width:72px;height:28px;border:1px solid #d9d9d9;border-radius:4px;padding:0 6px;font-size:12px;" placeholder="工号"></td><td style="padding:8px 12px;"><input style="width:60px;height:28px;border:1px solid #d9d9d9;border-radius:4px;padding:0 6px;font-size:12px;" placeholder="部门"></td><td style="padding:8px 12px;"><input style="width:50px;height:28px;border:1px solid #d9d9d9;border-radius:4px;padding:0 6px;font-size:12px;" placeholder="kg"></td><td style="padding:8px 12px;"><input style="width:60px;height:28px;border:1px solid #d9d9d9;border-radius:4px;padding:0 6px;font-size:12px;" type="time"></td><td style="padding:8px 12px;"><select style="height:28px;border:1px solid #d9d9d9;border-radius:4px;padding:0 6px;font-size:12px;"><option>刷脸取餐</option><option>刷卡取餐</option><option>扫码取餐</option></select></td><td style="padding:8px 12px;"><a style="color:#1890FF;cursor:pointer;font-size:13px;">确认</a> <a style="color:#8c8c8c;cursor:pointer;font-size:13px;margin-left:6px;" onclick="document.getElementById('surplusWelfareAddRow').style.display='none'">取消</a></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div style="margin-top:10px;"><a style="color:#1890FF;cursor:pointer;font-size:13px;" onclick="document.getElementById('surplusWelfareAddRow').style.display='table-row'">＋ 新增领取记录</a></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="btn btn-default" onclick="closeModal()">取消</button>
|
||||
<button class="btn btn-primary">确定</button>
|
||||
<button class="btn btn-primary" onclick="closeModal()">确定</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
function openModal(){document.getElementById('modalOverlay').style.display='flex';}
|
||||
/* 处置日期默认选中当天 */
|
||||
(function(){var d=new Date();var y=d.getFullYear();var m=String(d.getMonth()+1).padStart(2,'0');var day=String(d.getDate()).padStart(2,'0');document.getElementById('filterDate').value=y+'-'+m+'-'+day;})();
|
||||
|
||||
function openModal(){
|
||||
document.getElementById('modalOverlay').style.display='flex';
|
||||
document.getElementById('addSurplusLine').value='';
|
||||
document.getElementById('addSurplusMeal').value='';
|
||||
document.getElementById('addSurplusDish').innerHTML='<option value="">请先选择餐线和餐次</option>';
|
||||
document.getElementById('surplusAutofill').style.display='none';
|
||||
document.getElementById('addSurplusMethod').value='';
|
||||
document.getElementById('surplusWelfareSection').style.display='none';
|
||||
}
|
||||
function closeModal(){document.getElementById('modalOverlay').style.display='none';}
|
||||
document.getElementById('modalOverlay').addEventListener('click',function(e){if(e.target===this)closeModal();});
|
||||
|
||||
/* 模拟上餐监控菜品数据（按餐线+餐次） */
|
||||
var serveDishData={
|
||||
'A区中餐线_午餐':[
|
||||
{name:'宫保鸡丁',plan:'42.5',actual:'43.0',sold:'39.5',surplus:'3.5'},
|
||||
{name:'番茄炒蛋',plan:'20.0',actual:'20.5',sold:'18.3',surplus:'2.2'},
|
||||
{name:'白米饭',plan:'60.0',actual:'62.0',sold:'54.0',surplus:'8.0'}
|
||||
],
|
||||
'B区中餐线_午餐':[
|
||||
{name:'红烧肉',plan:'50.0',actual:'48.5',sold:'45.3',surplus:'3.2'},
|
||||
{name:'蒜蓉菠菜',plan:'15.0',actual:'14.8',sold:'10.0',surplus:'4.8'}
|
||||
],
|
||||
'C区快餐线_午餐':[
|
||||
{name:'番茄炒蛋',plan:'20.0',actual:'20.5',sold:'18.3',surplus:'2.2'}
|
||||
],
|
||||
'A区早餐线_早餐':[
|
||||
{name:'小米粥',plan:'15.0',actual:'14.0',sold:'12.6',surplus:'1.4'}
|
||||
],
|
||||
'B区早餐线_早餐':[
|
||||
{name:'燕麦粥',plan:'10.0',actual:'9.5',sold:'8.4',surplus:'1.1'}
|
||||
]
|
||||
};
|
||||
|
||||
function onSurplusLineChange(){onSurplusMealChange();}
|
||||
function onSurplusMealChange(){
|
||||
var line=document.getElementById('addSurplusLine').value;
|
||||
var meal=document.getElementById('addSurplusMeal').value;
|
||||
var sel=document.getElementById('addSurplusDish');
|
||||
document.getElementById('surplusAutofill').style.display='none';
|
||||
if(!line||!meal){sel.innerHTML='<option value="">请先选择餐线和餐次</option>';return;}
|
||||
var key=line+'_'+meal;
|
||||
var dishes=serveDishData[key]||[];
|
||||
var html='<option value="">请选择菜品（共'+dishes.length+'项）</option>';
|
||||
dishes.forEach(function(d,i){html+='<option value="'+i+'">'+d.name+'（余量 '+d.surplus+' kg）</option>';});
|
||||
sel.innerHTML=html;
|
||||
}
|
||||
function onSurplusDishChange(){
|
||||
var line=document.getElementById('addSurplusLine').value;
|
||||
var meal=document.getElementById('addSurplusMeal').value;
|
||||
var idx=document.getElementById('addSurplusDish').value;
|
||||
var card=document.getElementById('surplusAutofill');
|
||||
if(!idx){card.style.display='none';return;}
|
||||
var key=line+'_'+meal;
|
||||
var d=serveDishData[key][parseInt(idx)];
|
||||
card.style.display='grid';
|
||||
document.getElementById('sf_plan').textContent=d.plan;
|
||||
document.getElementById('sf_actual').textContent=d.actual;
|
||||
document.getElementById('sf_sold').textContent=d.sold;
|
||||
document.getElementById('sf_surplus').textContent=d.surplus;
|
||||
}
|
||||
function onSurplusMethodChange(){
|
||||
var v=document.getElementById('addSurplusMethod').value;
|
||||
document.getElementById('surplusWelfareSection').style.display=(v==='员工福利')?'block':'none';
|
||||
}
|
||||
|
||||
function openWelfareModal(name,code,total){
|
||||
document.getElementById('welfareTitle').textContent='员工福利取餐明细 — '+name;
|
||||
document.getElementById('welfareName').textContent=name;
|
||||
@@ -265,14 +371,18 @@ function openWelfareModal(name,code,total){
|
||||
</div>
|
||||
<!-- 取餐明细表格 -->
|
||||
<table style="width:100%;border-collapse:collapse;border:1px solid #e8e8e8;border-radius:4px;">
|
||||
<thead><tr style="background:#fafafa;"><th style="padding:10px 12px;text-align:left;font-size:12px;color:#8c8c8c;border-bottom:1px solid #e8e8e8;">序号</th><th style="padding:10px 12px;text-align:left;font-size:12px;color:#8c8c8c;border-bottom:1px solid #e8e8e8;">领取人</th><th style="padding:10px 12px;text-align:left;font-size:12px;color:#8c8c8c;border-bottom:1px solid #e8e8e8;">工号</th><th style="padding:10px 12px;text-align:left;font-size:12px;color:#8c8c8c;border-bottom:1px solid #e8e8e8;">部门</th><th style="padding:10px 12px;text-align:left;font-size:12px;color:#8c8c8c;border-bottom:1px solid #e8e8e8;">领取量(kg)</th><th style="padding:10px 12px;text-align:left;font-size:12px;color:#8c8c8c;border-bottom:1px solid #e8e8e8;">领取时间</th><th style="padding:10px 12px;text-align:left;font-size:12px;color:#8c8c8c;border-bottom:1px solid #e8e8e8;">领取方式</th></tr></thead>
|
||||
<thead><tr style="background:#fafafa;"><th style="padding:10px 12px;text-align:left;font-size:12px;color:#8c8c8c;border-bottom:1px solid #e8e8e8;">序号</th><th style="padding:10px 12px;text-align:left;font-size:12px;color:#8c8c8c;border-bottom:1px solid #e8e8e8;">领取人</th><th style="padding:10px 12px;text-align:left;font-size:12px;color:#8c8c8c;border-bottom:1px solid #e8e8e8;">工号</th><th style="padding:10px 12px;text-align:left;font-size:12px;color:#8c8c8c;border-bottom:1px solid #e8e8e8;">部门</th><th style="padding:10px 12px;text-align:left;font-size:12px;color:#8c8c8c;border-bottom:1px solid #e8e8e8;">领取量(kg)</th><th style="padding:10px 12px;text-align:left;font-size:12px;color:#8c8c8c;border-bottom:1px solid #e8e8e8;">领取时间</th><th style="padding:10px 12px;text-align:left;font-size:12px;color:#8c8c8c;border-bottom:1px solid #e8e8e8;">领取方式</th><th style="padding:10px 12px;text-align:left;font-size:12px;color:#8c8c8c;border-bottom:1px solid #e8e8e8;">操作</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td style="padding:10px 12px;font-size:13px;border-bottom:1px solid #e8e8e8;">1</td><td style="padding:10px 12px;font-size:13px;border-bottom:1px solid #e8e8e8;">张三</td><td style="padding:10px 12px;font-size:13px;border-bottom:1px solid #e8e8e8;">EMP-0012</td><td style="padding:10px 12px;font-size:13px;border-bottom:1px solid #e8e8e8;">研发部</td><td style="padding:10px 12px;font-size:13px;border-bottom:1px solid #e8e8e8;">0.5</td><td style="padding:10px 12px;font-size:13px;border-bottom:1px solid #e8e8e8;">14:05</td><td style="padding:10px 12px;font-size:13px;border-bottom:1px solid #e8e8e8;">刷脸取餐</td></tr>
|
||||
<tr><td style="padding:10px 12px;font-size:13px;border-bottom:1px solid #e8e8e8;">2</td><td style="padding:10px 12px;font-size:13px;border-bottom:1px solid #e8e8e8;">李四</td><td style="padding:10px 12px;font-size:13px;border-bottom:1px solid #e8e8e8;">EMP-0034</td><td style="padding:10px 12px;font-size:13px;border-bottom:1px solid #e8e8e8;">市场部</td><td style="padding:10px 12px;font-size:13px;border-bottom:1px solid #e8e8e8;">0.5</td><td style="padding:10px 12px;font-size:13px;border-bottom:1px solid #e8e8e8;">14:08</td><td style="padding:10px 12px;font-size:13px;border-bottom:1px solid #e8e8e8;">刷卡取餐</td></tr>
|
||||
<tr><td style="padding:10px 12px;font-size:13px;border-bottom:1px solid #e8e8e8;">3</td><td style="padding:10px 12px;font-size:13px;border-bottom:1px solid #e8e8e8;">王五</td><td style="padding:10px 12px;font-size:13px;border-bottom:1px solid #e8e8e8;">EMP-0056</td><td style="padding:10px 12px;font-size:13px;border-bottom:1px solid #e8e8e8;">行政部</td><td style="padding:10px 12px;font-size:13px;border-bottom:1px solid #e8e8e8;">0.5</td><td style="padding:10px 12px;font-size:13px;border-bottom:1px solid #e8e8e8;">14:12</td><td style="padding:10px 12px;font-size:13px;border-bottom:1px solid #e8e8e8;">刷脸取餐</td></tr>
|
||||
<tr><td style="padding:10px 12px;font-size:13px;">4</td><td style="padding:10px 12px;font-size:13px;">赵六</td><td style="padding:10px 12px;font-size:13px;">EMP-0078</td><td style="padding:10px 12px;font-size:13px;">财务部</td><td style="padding:10px 12px;font-size:13px;">0.3</td><td style="padding:10px 12px;font-size:13px;">14:15</td><td style="padding:10px 12px;font-size:13px;">扫码取餐</td></tr>
|
||||
<tr><td style="padding:10px 12px;font-size:13px;border-bottom:1px solid #e8e8e8;">1</td><td style="padding:10px 12px;font-size:13px;border-bottom:1px solid #e8e8e8;">张三</td><td style="padding:10px 12px;font-size:13px;border-bottom:1px solid #e8e8e8;">EMP-0012</td><td style="padding:10px 12px;font-size:13px;border-bottom:1px solid #e8e8e8;">研发部</td><td style="padding:10px 12px;font-size:13px;border-bottom:1px solid #e8e8e8;">0.5</td><td style="padding:10px 12px;font-size:13px;border-bottom:1px solid #e8e8e8;">14:05</td><td style="padding:10px 12px;font-size:13px;border-bottom:1px solid #e8e8e8;">刷脸取餐</td><td style="padding:10px 12px;font-size:13px;border-bottom:1px solid #e8e8e8;"><a style="color:#ff4d4f;cursor:pointer;font-size:13px;">删除</a></td></tr>
|
||||
<tr><td style="padding:10px 12px;font-size:13px;border-bottom:1px solid #e8e8e8;">2</td><td style="padding:10px 12px;font-size:13px;border-bottom:1px solid #e8e8e8;">李四</td><td style="padding:10px 12px;font-size:13px;border-bottom:1px solid #e8e8e8;">EMP-0034</td><td style="padding:10px 12px;font-size:13px;border-bottom:1px solid #e8e8e8;">市场部</td><td style="padding:10px 12px;font-size:13px;border-bottom:1px solid #e8e8e8;">0.5</td><td style="padding:10px 12px;font-size:13px;border-bottom:1px solid #e8e8e8;">14:08</td><td style="padding:10px 12px;font-size:13px;border-bottom:1px solid #e8e8e8;">刷卡取餐</td><td style="padding:10px 12px;font-size:13px;border-bottom:1px solid #e8e8e8;"><a style="color:#ff4d4f;cursor:pointer;font-size:13px;">删除</a></td></tr>
|
||||
<tr><td style="padding:10px 12px;font-size:13px;border-bottom:1px solid #e8e8e8;">3</td><td style="padding:10px 12px;font-size:13px;border-bottom:1px solid #e8e8e8;">王五</td><td style="padding:10px 12px;font-size:13px;border-bottom:1px solid #e8e8e8;">EMP-0056</td><td style="padding:10px 12px;font-size:13px;border-bottom:1px solid #e8e8e8;">行政部</td><td style="padding:10px 12px;font-size:13px;border-bottom:1px solid #e8e8e8;">0.5</td><td style="padding:10px 12px;font-size:13px;border-bottom:1px solid #e8e8e8;">14:12</td><td style="padding:10px 12px;font-size:13px;border-bottom:1px solid #e8e8e8;">刷脸取餐</td><td style="padding:10px 12px;font-size:13px;border-bottom:1px solid #e8e8e8;"><a style="color:#ff4d4f;cursor:pointer;font-size:13px;">删除</a></td></tr>
|
||||
<tr><td style="padding:10px 12px;font-size:13px;border-bottom:1px solid #e8e8e8;">4</td><td style="padding:10px 12px;font-size:13px;border-bottom:1px solid #e8e8e8;">赵六</td><td style="padding:10px 12px;font-size:13px;border-bottom:1px solid #e8e8e8;">EMP-0078</td><td style="padding:10px 12px;font-size:13px;border-bottom:1px solid #e8e8e8;">财务部</td><td style="padding:10px 12px;font-size:13px;border-bottom:1px solid #e8e8e8;">0.3</td><td style="padding:10px 12px;font-size:13px;border-bottom:1px solid #e8e8e8;">14:15</td><td style="padding:10px 12px;font-size:13px;border-bottom:1px solid #e8e8e8;">扫码取餐</td><td style="padding:10px 12px;font-size:13px;border-bottom:1px solid #e8e8e8;"><a style="color:#ff4d4f;cursor:pointer;font-size:13px;">删除</a></td></tr>
|
||||
<!-- 新增行（默认隐藏，点击按钮后显示） -->
|
||||
<tr id="welfareAddRow" style="display:none;background:#f9fbff;"><td style="padding:8px 12px;font-size:13px;color:#8c8c8c;">5</td><td style="padding:8px 12px;"><input style="width:60px;height:28px;border:1px solid #d9d9d9;border-radius:4px;padding:0 6px;font-size:12px;" placeholder="姓名"></td><td style="padding:8px 12px;"><input style="width:72px;height:28px;border:1px solid #d9d9d9;border-radius:4px;padding:0 6px;font-size:12px;" placeholder="工号"></td><td style="padding:8px 12px;"><input style="width:60px;height:28px;border:1px solid #d9d9d9;border-radius:4px;padding:0 6px;font-size:12px;" placeholder="部门"></td><td style="padding:8px 12px;"><input style="width:50px;height:28px;border:1px solid #d9d9d9;border-radius:4px;padding:0 6px;font-size:12px;" placeholder="kg"></td><td style="padding:8px 12px;"><input style="width:60px;height:28px;border:1px solid #d9d9d9;border-radius:4px;padding:0 6px;font-size:12px;" type="time"></td><td style="padding:8px 12px;"><select style="height:28px;border:1px solid #d9d9d9;border-radius:4px;padding:0 6px;font-size:12px;"><option>刷脸取餐</option><option>刷卡取餐</option><option>扫码取餐</option></select></td><td style="padding:8px 12px;"><a style="color:#1890FF;cursor:pointer;font-size:13px;">确认</a> <a style="color:#8c8c8c;cursor:pointer;font-size:13px;margin-left:6px;" onclick="document.getElementById('welfareAddRow').style.display='none'">取消</a></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<!-- 新增按钮 -->
|
||||
<div style="margin-top:10px;"><a style="color:#1890FF;cursor:pointer;font-size:13px;" onclick="document.getElementById('welfareAddRow').style.display='table-row'">＋ 新增领取记录</a></div>
|
||||
<!-- 汇总 -->
|
||||
<div class="welfare-summary">📊 汇总：已领取 1.8 kg / 福利总量 2.0 kg，剩余 0.2 kg（领取率 90%）</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user