feat: 农场监控模块重构——种植监控巡检记录、养殖监控疫苗接种记录
- 种植监控：主表改为种植批次记录，新增灌溉方式/健康状况/负责人列， 操作栏增加巡检记录弹窗（8列+内联新增行+时间倒序） - 养殖监控：精简批次号，新增养殖方式/负责人/养殖状态列，去掉长势评级， 操作栏增加疫苗接种记录弹窗（9列+内联新增行） - 两页均增加时间范围筛选，对齐新增弹窗字段 - 新增 arc-canteen.html 食堂档案页面原型
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>
|
||||
|
||||
|
||||
@@ -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 项在子分组内，则默认展开该分组
|
||||
|
||||
Reference in New Issue
Block a user