fix: 更新体重管理相关页面，新增归档单位报告详情页
This commit is contained in:
liuyunqin
@@ -170,7 +170,7 @@ tbody tr:hover td:nth-child(1){background:#F8FBFF;}
|
||||
<div class="info-card__title">干预计划</div>
|
||||
<div class="info-card__body" id="planCard">
|
||||
<div class="info-item"><span class="info-item__label">计划名称：</span><span class="info-item__value" id="ciPlanName">-</span></div>
|
||||
<div class="info-item"><span class="info-item__label">组织单位：</span><span class="info-item__value" id="ciOrg">-</span></div>
|
||||
<div class="info-item"><span class="info-item__label">组织机构：</span><span class="info-item__value" id="ciOrg">-</span></div>
|
||||
<div class="info-item"><span class="info-item__label">起止日期：</span><span class="info-item__value" id="ciDate">-</span></div>
|
||||
<div class="info-item"><span class="info-item__label">进行天数：</span><span class="info-item__value" id="ciDays">-</span></div>
|
||||
</div>
|
||||
|
||||
@@ -204,7 +204,7 @@ tbody tr:hover td:last-child{background:#F8FBFF;}
|
||||
<div class="plan-selector__left">
|
||||
<div class="plan-selector__label">干预计划</div>
|
||||
<div class="search-select" id="planSelect">
|
||||
<input class="search-select__input" id="planSearchInput" placeholder="搜索计划名称或组织单位" oninput="searchPlan()" onfocus="showPlanPanel()" autocomplete="off">
|
||||
<input class="search-select__input" id="planSearchInput" placeholder="搜索计划名称或组织机构" oninput="searchPlan()" onfocus="showPlanPanel()" autocomplete="off">
|
||||
<!-- [交互] 点击清空已选计划，恢复未选择状态 -->
|
||||
<button class="search-select__clear" id="planClearBtn" onclick="clearPlan()" title="清空计划">×</button>
|
||||
<div class="search-select__panel" id="planPanel"></div>
|
||||
@@ -217,7 +217,7 @@ tbody tr:hover td:last-child{background:#F8FBFF;}
|
||||
</div>
|
||||
<div class="plan-selector__right" id="planInfo" style="display:none;">
|
||||
<div class="plan-info-item">
|
||||
<span class="plan-info-item__label">组织单位</span>
|
||||
<span class="plan-info-item__label">组织机构</span>
|
||||
<span class="plan-info-item__value" id="piOrg">-</span>
|
||||
</div>
|
||||
<div class="plan-info-item">
|
||||
@@ -502,7 +502,7 @@ function searchPlan(){
|
||||
var sel = selectedPlanId === p.id ? ' selected' : '';
|
||||
html += '<div class="search-select__option'+sel+'" onclick="selectPlan('+p.id+')">';
|
||||
html += '<div style="font-weight:500;">'+esc(p.name)+'</div>';
|
||||
html += '<div class="ss-org">'+esc(p.org)+' | '+p.dateFrom+' ~ '+p.dateTo+' | 应参加 '+p.totalCount+' 人</div>';
|
||||
html += '<div class="ss-org">'+esc(p.org)+' | '+p.dateFrom+' ~ '+p.dateTo+'</div>';
|
||||
html += '</div>';
|
||||
});
|
||||
panel.innerHTML = html;
|
||||
@@ -739,7 +739,7 @@ document.addEventListener('click',function(e){
|
||||
plans.forEach(function(p){
|
||||
html += '<div class="search-select__option" onclick="selectPlan('+p.id+')">';
|
||||
html += '<div style="font-weight:500;">'+esc(p.name)+'</div>';
|
||||
html += '<div class="ss-org">'+esc(p.org)+' | '+p.dateFrom+' ~ '+p.dateTo+' | 应参加 '+p.totalCount+' 人</div>';
|
||||
html += '<div class="ss-org">'+esc(p.org)+' | '+p.dateFrom+' ~ '+p.dateTo+'</div>';
|
||||
html += '</div>';
|
||||
});
|
||||
document.getElementById('planPanel').innerHTML = html;
|
||||
|
||||
@@ -302,7 +302,7 @@ tbody tr:hover td:nth-child(3){background:#F8FBFF;}
|
||||
<div class="plan-selector__left">
|
||||
<div class="plan-selector__label">干预计划</div>
|
||||
<div class="search-select" id="planSelect">
|
||||
<input class="search-select__input" id="planSearchInput" placeholder="搜索计划名称或组织单位" oninput="searchPlan()" onfocus="showPlanPanel()" autocomplete="off">
|
||||
<input class="search-select__input" id="planSearchInput" placeholder="搜索计划名称或组织机构" oninput="searchPlan()" onfocus="showPlanPanel()" autocomplete="off">
|
||||
<!-- [交互] 点击清空已选计划，恢复未选择状态 -->
|
||||
<button class="search-select__clear" id="planClearBtn" onclick="clearPlan()" title="清空计划">×</button>
|
||||
<div class="search-select__panel" id="planPanel"></div>
|
||||
@@ -315,7 +315,7 @@ tbody tr:hover td:nth-child(3){background:#F8FBFF;}
|
||||
</div>
|
||||
<div class="plan-selector__right" id="planInfo" style="display:none;">
|
||||
<div class="plan-info-item">
|
||||
<span class="plan-info-item__label">组织单位</span>
|
||||
<span class="plan-info-item__label">组织机构</span>
|
||||
<span class="plan-info-item__value" id="piOrg">-</span>
|
||||
</div>
|
||||
<div class="plan-info-item">
|
||||
@@ -1224,7 +1224,7 @@ function searchPlan(){
|
||||
var sel = selectedPlanId === p.id ? ' selected' : '';
|
||||
html += '<div class="search-select__option'+sel+'" onclick="selectPlan('+p.id+')">';
|
||||
html += '<div style="font-weight:500;">'+esc(p.name)+'</div>';
|
||||
html += '<div class="ss-org">'+esc(p.org)+' | '+p.dateFrom+' ~ '+p.dateTo+' | 应参加 '+p.totalCount+' 人</div>';
|
||||
html += '<div class="ss-org">'+esc(p.org)+' | '+p.dateFrom+' ~ '+p.dateTo+'</div>';
|
||||
html += '</div>';
|
||||
});
|
||||
panel.innerHTML = html;
|
||||
@@ -2472,7 +2472,7 @@ function openCumulativeDialog(tab){
|
||||
// 渲染计划基本信息
|
||||
var infoHtml = '';
|
||||
infoHtml += '<div class="record-info__item"><span class="record-info__label">干预计划：</span><span class="record-info__value">'+esc(plan.name)+'</span></div>';
|
||||
infoHtml += '<div class="record-info__item"><span class="record-info__label">组织单位：</span><span class="record-info__value">'+esc(plan.org)+'</span></div>';
|
||||
infoHtml += '<div class="record-info__item"><span class="record-info__label">组织机构：</span><span class="record-info__value">'+esc(plan.org)+'</span></div>';
|
||||
infoHtml += '<div class="record-info__item"><span class="record-info__label">起止日期：</span><span class="record-info__value">'+plan.dateFrom+' ~ '+plan.dateTo+'</span></div>';
|
||||
infoHtml += '<div class="record-info__item"><span class="record-info__label">已进行天数：</span><span class="record-info__value">'+elapsedDays+' 天</span></div>';
|
||||
document.getElementById('cumPlanInfo').innerHTML = infoHtml;
|
||||
@@ -2837,7 +2837,7 @@ document.addEventListener('click',function(e){
|
||||
plans.forEach(function(p){
|
||||
html += '<div class="search-select__option" onclick="selectPlan('+p.id+')">';
|
||||
html += '<div style="font-weight:500;">'+esc(p.name)+'</div>';
|
||||
html += '<div class="ss-org">'+esc(p.org)+' | '+p.dateFrom+' ~ '+p.dateTo+' | 应参加 '+p.totalCount+' 人</div>';
|
||||
html += '<div class="ss-org">'+esc(p.org)+' | '+p.dateFrom+' ~ '+p.dateTo+'</div>';
|
||||
html += '</div>';
|
||||
});
|
||||
document.getElementById('planPanel').innerHTML = html;
|
||||
|
||||
@@ -192,7 +192,7 @@ tbody tr:hover td:nth-child(2){background:#F8FBFF;}
|
||||
<div class="plan-selector__left">
|
||||
<div class="plan-selector__label">干预计划</div>
|
||||
<div class="search-select" id="planSelect">
|
||||
<input class="search-select__input" id="planSearchInput" placeholder="搜索计划名称或组织单位" oninput="searchPlan()" onfocus="showPlanPanel()" autocomplete="off">
|
||||
<input class="search-select__input" id="planSearchInput" placeholder="搜索计划名称或组织机构" oninput="searchPlan()" onfocus="showPlanPanel()" autocomplete="off">
|
||||
<!-- [交互] 点击清空已选计划，恢复未选择状态 -->
|
||||
<button class="search-select__clear" id="planClearBtn" onclick="clearPlan()" title="清空计划">×</button>
|
||||
<div class="search-select__panel" id="planPanel"></div>
|
||||
@@ -205,7 +205,7 @@ tbody tr:hover td:nth-child(2){background:#F8FBFF;}
|
||||
</div>
|
||||
<div class="plan-selector__right" id="planInfo" style="display:none;">
|
||||
<div class="plan-info-item">
|
||||
<span class="plan-info-item__label">组织单位</span>
|
||||
<span class="plan-info-item__label">组织机构</span>
|
||||
<span class="plan-info-item__value" id="piOrg">-</span>
|
||||
</div>
|
||||
<div class="plan-info-item">
|
||||
@@ -282,7 +282,7 @@ tbody tr:hover td:nth-child(2){background:#F8FBFF;}
|
||||
<thead>
|
||||
<tr>
|
||||
<th>干预计划</th>
|
||||
<th>单位</th>
|
||||
<th>组织机构</th>
|
||||
<th>起止日期</th>
|
||||
<th>应参加<br>人数</th>
|
||||
<th>已参加<br>人数</th>
|
||||
@@ -448,7 +448,7 @@ function searchPlan(){
|
||||
var sel = selectedPlanId === p.id ? ' selected' : '';
|
||||
html += '<div class="search-select__option'+sel+'" onclick="selectPlan('+p.id+')">';
|
||||
html += '<div style="font-weight:500;">'+esc(p.name)+'</div>';
|
||||
html += '<div class="ss-org">'+esc(p.org)+' | '+p.dateFrom+' ~ '+p.dateTo+' | 应参加 '+p.totalCount+' 人</div>';
|
||||
html += '<div class="ss-org">'+esc(p.org)+' | '+p.dateFrom+' ~ '+p.dateTo+'</div>';
|
||||
html += '</div>';
|
||||
});
|
||||
panel.innerHTML = html;
|
||||
@@ -657,7 +657,7 @@ document.addEventListener('click',function(e){
|
||||
plans.forEach(function(p){
|
||||
html += '<div class="search-select__option" onclick="selectPlan('+p.id+')">';
|
||||
html += '<div style="font-weight:500;">'+esc(p.name)+'</div>';
|
||||
html += '<div class="ss-org">'+esc(p.org)+' | '+p.dateFrom+' ~ '+p.dateTo+' | 应参加 '+p.totalCount+' 人</div>';
|
||||
html += '<div class="ss-org">'+esc(p.org)+' | '+p.dateFrom+' ~ '+p.dateTo+'</div>';
|
||||
html += '</div>';
|
||||
});
|
||||
document.getElementById('planPanel').innerHTML = html;
|
||||
|
||||
@@ -0,0 +1,481 @@
|
||||
<!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);}
|
||||
|
||||
/* 主内容区域 */
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;min-height:calc(100vh - 56px);}
|
||||
|
||||
/* 面包屑 */
|
||||
.breadcrumb{font-size:var(--font-sm);color:var(--text-placeholder);margin-bottom:16px;}
|
||||
.breadcrumb a{color:var(--text-placeholder);text-decoration:none;}
|
||||
.breadcrumb a:hover{color:var(--primary);}
|
||||
.breadcrumb span{color:var(--text-primary);}
|
||||
|
||||
/* 信息卡片 */
|
||||
.info-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);padding:24px;margin-bottom:16px;}
|
||||
.info-card__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;}
|
||||
.info-card__title{font-size:var(--font-lg);font-weight:600;color:var(--text-primary);display:flex;align-items:center;gap:8px;}
|
||||
.info-card__title .tag{font-size:var(--font-xs);padding:2px 10px;border-radius:10px;font-weight:400;}
|
||||
.tag-blue{background:var(--primary-light);color:var(--primary);}
|
||||
.info-card__body{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
|
||||
.info-item{display:flex;flex-direction:column;gap:4px;}
|
||||
.info-item__label{font-size:var(--font-xs);color:var(--text-placeholder);}
|
||||
.info-item__value{font-size:var(--font-lg);font-weight:600;color:var(--text-primary);}
|
||||
.info-card__divider{display:flex;align-items:center;margin:16px 0 12px;padding-top:16px;border-top:1px solid var(--border);}
|
||||
.info-card__section-title{font-size:var(--font-base);font-weight:600;color:var(--text-primary);}
|
||||
|
||||
/* 统计指标网格 */
|
||||
.stat-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;}
|
||||
.stat-item{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 8px;border-radius:var(--radius-sm);background:#FAFAFA;}
|
||||
.stat-item__label{font-size:var(--font-xs);color:var(--text-placeholder);text-align:center;}
|
||||
.stat-item__value{font-size:var(--font-lg);font-weight:600;color:var(--text-primary);}
|
||||
.stat-item__value.green{color:var(--success);}
|
||||
.stat-item__value.blue{color:var(--primary);}
|
||||
|
||||
/* 按钮 */
|
||||
.btn{height:32px;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);}
|
||||
|
||||
/* 筛选栏 */
|
||||
.filter-bar{background:#fff;border-radius:var(--radius-md) var(--radius-md) 0 0;padding:16px 24px;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;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;}
|
||||
|
||||
/* 操作栏 */
|
||||
.action-bar{display:flex;align-items:center;gap:8px;padding:16px 24px;background:#fff;border-top:1px solid var(--border);}
|
||||
|
||||
/* 表格卡片 */
|
||||
.table-card{background:#fff;border-radius:0 0 var(--radius-md) 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-card__content table{min-width:2200px;}
|
||||
table{width:100%;border-collapse:collapse;}
|
||||
thead th{background:#FAFAFA;padding:10px 8px;text-align:center;font-size:var(--font-sm);color:var(--text-secondary);font-weight:500;border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
tbody td{padding:10px 8px;text-align:center;font-size:var(--font-sm);color:var(--text-primary);border-bottom:1px solid #F0F0F0;white-space:nowrap;}
|
||||
tbody tr:last-child td{border-bottom:none;}
|
||||
tbody tr:hover{background:#F8FBFF;}
|
||||
|
||||
/* 链接 */
|
||||
.link{color:var(--primary);cursor:pointer;text-decoration:none;}
|
||||
.link:hover{color:#40a9ff;text-decoration:underline;}
|
||||
|
||||
/* 分页 */
|
||||
.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);}
|
||||
|
||||
.td-empty{text-align:center;padding:48px 0;color:var(--text-placeholder);font-size:var(--font-sm);}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- 顶部导航栏 -->
|
||||
<div class="top-bar">
|
||||
<div class="top-bar__logo">
|
||||
<svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M7 14h14M14 7v14" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/></svg>
|
||||
体重管理
|
||||
</div>
|
||||
<div class="top-bar__nav">
|
||||
<a href="archive-personal-weight-data.html">档案</a>
|
||||
<a href="plan-list.html">计划管理</a>
|
||||
<a href="registration-tracking.html">报名管理</a>
|
||||
<a href="action-record.html">过程管理</a>
|
||||
<a href="history-plan-list.html">历史干预</a>
|
||||
<a href="personal-target-data.html">个人体重管理</a>
|
||||
<a href="scale-device.html">设备管理</a>
|
||||
<a href="exception-system-dirty.html">异常事件</a>
|
||||
</div>
|
||||
<div class="top-bar__right">
|
||||
<a class="btn-back" href="archive-unit-report.html"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M10 3L5 8l5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg> 返回列表</a>
|
||||
<div class="avatar">管</div>
|
||||
<span>系统管理员 ▾</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 侧边栏 -->
|
||||
<div class="sidebar">
|
||||
<div class="sidebar-menu__title">档案</div>
|
||||
<a class="sidebar-item" href="archive-personal-weight-data.html">个人体重数据</a>
|
||||
<a class="sidebar-item active" href="archive-unit-report.html">单位报表数据</a>
|
||||
<a class="sidebar-item" href="archive-algorithm-model.html">算法模型</a>
|
||||
</div>
|
||||
|
||||
<!-- 主内容区域 -->
|
||||
<div class="main">
|
||||
|
||||
<!-- 面包屑 -->
|
||||
<div class="breadcrumb">
|
||||
<a href="archive-unit-report.html">体重管理 / 档案 / 单位报表数据</a> / <span>详情</span>
|
||||
</div>
|
||||
|
||||
<!-- 基本信息 + 指标统计卡片 -->
|
||||
<div class="info-card" id="infoCard">
|
||||
<div class="info-card__header">
|
||||
<div class="info-card__title">
|
||||
<span id="infoName">--</span>
|
||||
<span class="tag tag-blue" id="infoTag">二级单位</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-card__body">
|
||||
<div class="info-item">
|
||||
<span class="info-item__label">总人数</span>
|
||||
<span class="info-item__value" id="infoTotal">--</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-item__label">组织活动次数</span>
|
||||
<span class="info-item__value" id="infoActivities">--</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-item__label">参与活动总人次</span>
|
||||
<span class="info-item__value" id="infoParticipants">--</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-item__label">活动覆盖比例</span>
|
||||
<span class="info-item__value" id="infoCoverage">--</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-card__divider"></div>
|
||||
<div class="stat-grid">
|
||||
<div class="stat-item">
|
||||
<span class="stat-item__label">人均减重(kg)</span>
|
||||
<span class="stat-item__value green" id="statWeightLoss">--</span>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<span class="stat-item__label">人均减重率(%)</span>
|
||||
<span class="stat-item__value green" id="statLossRate">--</span>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<span class="stat-item__label">人均BMI降低</span>
|
||||
<span class="stat-item__value green" id="statBmi">--</span>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<span class="stat-item__label">人均体脂率降低(%)</span>
|
||||
<span class="stat-item__value green" id="statFatRate">--</span>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<span class="stat-item__label">人均腰围减少(cm)</span>
|
||||
<span class="stat-item__value green" id="statWaist">--</span>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<span class="stat-item__label">人均每日摄入热量(kcal)</span>
|
||||
<span class="stat-item__value blue" id="statIntake">--</span>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<span class="stat-item__label">人均每日消耗热量(kcal)</span>
|
||||
<span class="stat-item__value blue" id="statConsume">--</span>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<span class="stat-item__label">人均每日热量缺口</span>
|
||||
<span class="stat-item__value blue" id="statGap">--</span>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<span class="stat-item__label">人均综合得分</span>
|
||||
<span class="stat-item__value" id="statScore">--</span>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<span class="stat-item__label">人均行动得分</span>
|
||||
<span class="stat-item__value" id="statActionScore">--</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 活动计划列表 -->
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item">
|
||||
<label>计划名称</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入计划名称" id="filterPlanName">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>年份</label>
|
||||
<select class="filter-select" id="filterYear">
|
||||
<option value="">全部年份</option>
|
||||
<option value="2026">2026年</option>
|
||||
<option value="2025">2025年</option>
|
||||
<option value="2024">2024年</option>
|
||||
<option value="2023">2023年</option>
|
||||
</select>
|
||||
</div>
|
||||
<button class="btn btn-primary" onclick="applyFilter()">查询</button>
|
||||
<button class="btn btn-default" onclick="resetFilter()">重置</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>
|
||||
</div>
|
||||
|
||||
<div class="table-card">
|
||||
<div class="table-card__header">
|
||||
<div class="table-card__title">组织活动列表</div>
|
||||
</div>
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>干预计划</th>
|
||||
<th>组织机构</th>
|
||||
<th>组织部门</th>
|
||||
<th>起止日期</th>
|
||||
<th>人员范围</th>
|
||||
<th>应参加<br>人数</th>
|
||||
<th>已参加<br>人数</th>
|
||||
<th>未参加<br>人数</th>
|
||||
<th>完成体重<br>目标人数</th>
|
||||
<th>完成体脂<br>目标人数</th>
|
||||
<th>完成腰围<br>目标人数</th>
|
||||
<th>人均减重<br>(kg)</th>
|
||||
<th>人均减重<br>率(%)</th>
|
||||
<th>人均腰围<br>减少(cm)</th>
|
||||
<th>人均每日<br>摄入(千卡)</th>
|
||||
<th>人均每日<br>消耗(千卡)</th>
|
||||
<th>人均每日<br>热量缺口</th>
|
||||
<th>人均综合<br>得分</th>
|
||||
<th>人均行动<br>得分</th>
|
||||
<th>负责人</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="tableBody"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span id="pageInfo">显示 0 条记录</span>
|
||||
<button class="page-btn" onclick="goPage(-1)">‹</button>
|
||||
<span id="pageNum" style="font-size:var(--font-sm);color:var(--text-secondary);">第 1 页</span>
|
||||
<button class="page-btn" onclick="goPage(1)">›</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
/* ===== 解析URL参数 ===== */
|
||||
function getParam(name) {
|
||||
var params = new URLSearchParams(location.search);
|
||||
return params.get(name) || '';
|
||||
}
|
||||
|
||||
/* ===== Mock 活动数据 ===== */
|
||||
var unitActivityData = {
|
||||
'第四采油厂': [
|
||||
{id:1,planName:'第四采油厂2024年超重健康干预计划',unit:'第四采油厂',dept:'健康管理部',dateFrom:'2024-03-01',dateTo:'2024-08-31',staffScope:'全厂员工',shouldCount:220,actualCount:205,notCount:15,weightGoalDone:168,fatGoalDone:152,waistGoalDone:145,avgWeightLoss:3.8,avgLossRate:4.5,avgWaistLoss:4.2,avgDailyIntake:1850,avgDailyConsume:520,avgDailyGap:330,avgScore:82.5,avgActionScore:76.3,responsible:'王建国'},
|
||||
{id:2,planName:'第四采油厂2025年超重健康干预计划',unit:'第四采油厂',dept:'健康管理部',dateFrom:'2025-03-01',dateTo:'2025-08-31',staffScope:'全厂员工',shouldCount:267,actualCount:251,notCount:16,weightGoalDone:198,fatGoalDone:185,waistGoalDone:172,avgWeightLoss:4.2,avgLossRate:5.1,avgWaistLoss:4.8,avgDailyIntake:1780,avgDailyConsume:560,avgDailyGap:380,avgScore:85.3,avgActionScore:79.1,responsible:'王建国'},
|
||||
{id:3,planName:'第四采油厂2026年超重健康干预计划',unit:'第四采油厂',dept:'健康管理部',dateFrom:'2026-03-01',dateTo:'2026-08-31',staffScope:'全厂员工',shouldCount:234,actualCount:218,notCount:16,weightGoalDone:92,fatGoalDone:78,waistGoalDone:71,avgWeightLoss:2.1,avgLossRate:2.5,avgWaistLoss:2.3,avgDailyIntake:1920,avgDailyConsume:490,avgDailyGap:280,avgScore:74.8,avgActionScore:68.2,responsible:'王建国'},
|
||||
{id:4,planName:'第四采油厂2025年秋季健步走活动',unit:'第四采油厂',dept:'工会办公室',dateFrom:'2025-09-01',dateTo:'2025-10-31',staffScope:'一线员工',shouldCount:150,actualCount:138,notCount:12,weightGoalDone:89,fatGoalDone:76,waistGoalDone:70,avgWeightLoss:2.8,avgLossRate:3.2,avgWaistLoss:3.0,avgDailyIntake:1950,avgDailyConsume:510,avgDailyGap:290,avgScore:78.2,avgActionScore:72.5,responsible:'张翠花'},
|
||||
{id:5,planName:'第四采油厂2026年春季健康训练营',unit:'第四采油厂',dept:'健康管理部',dateFrom:'2026-04-01',dateTo:'2026-06-30',staffScope:'管理部门',shouldCount:96,actualCount:82,notCount:14,weightGoalDone:35,fatGoalDone:28,waistGoalDone:25,avgWeightLoss:1.5,avgLossRate:1.8,avgWaistLoss:1.6,avgDailyIntake:2010,avgDailyConsume:460,avgDailyGap:220,avgScore:69.5,avgActionScore:63.8,responsible:'王建国'}
|
||||
],
|
||||
'采油一厂': [
|
||||
{id:6,planName:'采油一厂2024年健康体重专项计划',unit:'采油一厂',dept:'安全环保科',dateFrom:'2024-04-01',dateTo:'2024-09-30',staffScope:'管理部门',shouldCount:156,actualCount:142,notCount:14,weightGoalDone:110,fatGoalDone:98,waistGoalDone:89,avgWeightLoss:3.5,avgLossRate:4.2,avgWaistLoss:3.9,avgDailyIntake:1900,avgDailyConsume:480,avgDailyGap:300,avgScore:80.1,avgActionScore:73.5,responsible:'李明辉'},
|
||||
{id:7,planName:'采油一厂2025年员工健康体重计划',unit:'采油一厂',dept:'安全环保科',dateFrom:'2025-04-15',dateTo:'2025-10-15',staffScope:'全厂员工',shouldCount:420,actualCount:398,notCount:22,weightGoalDone:310,fatGoalDone:285,waistGoalDone:268,avgWeightLoss:3.9,avgLossRate:4.8,avgWaistLoss:4.3,avgDailyIntake:1820,avgDailyConsume:540,avgDailyGap:360,avgScore:83.7,avgActionScore:77.8,responsible:'李明辉'},
|
||||
{id:8,planName:'采油一厂2026年体重管理专项行动',unit:'采油一厂',dept:'安全环保科',dateFrom:'2026-04-01',dateTo:'2026-09-30',staffScope:'全厂员工',shouldCount:186,actualCount:180,notCount:6,weightGoalDone:65,fatGoalDone:52,waistGoalDone:48,avgWeightLoss:1.8,avgLossRate:2.1,avgWaistLoss:2.0,avgDailyIntake:1950,avgDailyConsume:470,avgDailyGap:250,avgScore:72.3,avgActionScore:65.8,responsible:'李明辉'},
|
||||
{id:9,planName:'采油一厂2025年减脂达人挑战赛',unit:'采油一厂',dept:'工会办公室',dateFrom:'2025-06-01',dateTo:'2025-08-31',staffScope:'一线员工',shouldCount:78,actualCount:72,notCount:6,weightGoalDone:55,fatGoalDone:48,waistGoalDone:42,avgWeightLoss:5.2,avgLossRate:6.0,avgWaistLoss:5.5,avgDailyIntake:1700,avgDailyConsume:620,avgDailyGap:420,avgScore:88.5,avgActionScore:84.2,responsible:'李明辉'}
|
||||
],
|
||||
'采气一厂': [
|
||||
{id:10,planName:'采气一厂2024年健康体重计划',unit:'采气一厂',dept:'生产技术部',dateFrom:'2024-06-01',dateTo:'2024-11-30',staffScope:'全厂员工',shouldCount:135,actualCount:118,notCount:17,weightGoalDone:92,fatGoalDone:78,waistGoalDone:72,avgWeightLoss:3.6,avgLossRate:4.3,avgWaistLoss:4.0,avgDailyIntake:1860,avgDailyConsume:510,avgDailyGap:340,avgScore:81.4,avgActionScore:74.9,responsible:'赵铁柱'},
|
||||
{id:11,planName:'采气一厂2025年度体重管理计划',unit:'采气一厂',dept:'生产技术部',dateFrom:'2025-06-01',dateTo:'2025-12-01',staffScope:'全厂员工',shouldCount:158,actualCount:142,notCount:16,weightGoalDone:115,fatGoalDone:98,waistGoalDone:90,avgWeightLoss:4.1,avgLossRate:5.0,avgWaistLoss:4.6,avgDailyIntake:1790,avgDailyConsume:570,avgDailyGap:390,avgScore:86.0,avgActionScore:80.2,responsible:'赵铁柱'},
|
||||
{id:12,planName:'采气一厂2026下半年体重干预计划',unit:'采气一厂',dept:'生产技术部',dateFrom:'2026-09-01',dateTo:'2026-12-31',staffScope:'全厂员工',shouldCount:89,actualCount:72,notCount:17,weightGoalDone:0,fatGoalDone:0,waistGoalDone:0,avgWeightLoss:0,avgLossRate:0,avgWaistLoss:0,avgDailyIntake:0,avgDailyConsume:0,avgDailyGap:0,avgScore:0,avgActionScore:0,responsible:'赵铁柱'}
|
||||
]
|
||||
};
|
||||
|
||||
/* 部门活动数据（三级单位） */
|
||||
var deptActivityData = {
|
||||
'第四采油厂|作业一区': [
|
||||
{id:1,planName:'第四采油厂2025年超重健康干预计划',unit:'第四采油厂',dept:'健康管理部',dateFrom:'2025-03-01',dateTo:'2025-08-31',staffScope:'作业一区',shouldCount:85,actualCount:80,notCount:5,weightGoalDone:62,fatGoalDone:55,waistGoalDone:50,avgWeightLoss:4.8,avgLossRate:5.5,avgWaistLoss:5.2,avgDailyIntake:1750,avgDailyConsume:580,avgDailyGap:400,avgScore:87.2,avgActionScore:81.5,responsible:'王建国'},
|
||||
{id:2,planName:'第四采油厂2026年超重健康干预计划',unit:'第四采油厂',dept:'健康管理部',dateFrom:'2026-03-01',dateTo:'2026-08-31',staffScope:'作业一区',shouldCount:78,actualCount:72,notCount:6,weightGoalDone:32,fatGoalDone:28,waistGoalDone:25,avgWeightLoss:2.5,avgLossRate:3.0,avgWaistLoss:2.8,avgDailyIntake:1900,avgDailyConsume:500,avgDailyGap:300,avgScore:76.5,avgActionScore:70.2,responsible:'王建国'}
|
||||
],
|
||||
'第四采油厂|作业二区': [
|
||||
{id:3,planName:'第四采油厂2025年超重健康干预计划',unit:'第四采油厂',dept:'健康管理部',dateFrom:'2025-03-01',dateTo:'2025-08-31',staffScope:'作业二区',shouldCount:92,actualCount:88,notCount:4,weightGoalDone:70,fatGoalDone:65,waistGoalDone:60,avgWeightLoss:4.0,avgLossRate:4.8,avgWaistLoss:4.5,avgDailyIntake:1800,avgDailyConsume:550,avgDailyGap:370,avgScore:84.0,avgActionScore:78.3,responsible:'王建国'},
|
||||
{id:4,planName:'第四采油厂2026年超重健康干预计划',unit:'第四采油厂',dept:'健康管理部',dateFrom:'2026-03-01',dateTo:'2026-08-31',staffScope:'作业二区',shouldCount:82,actualCount:76,notCount:6,weightGoalDone:30,fatGoalDone:25,waistGoalDone:22,avgWeightLoss:1.8,avgLossRate:2.2,avgWaistLoss:2.0,avgDailyIntake:1950,avgDailyConsume:480,avgDailyGap:260,avgScore:73.2,avgActionScore:66.8,responsible:'王建国'}
|
||||
],
|
||||
'采油一厂|采油一队': [
|
||||
{id:5,planName:'采油一厂2025年员工健康体重计划',unit:'采油一厂',dept:'安全环保科',dateFrom:'2025-04-15',dateTo:'2025-10-15',staffScope:'采油一队',shouldCount:130,actualCount:125,notCount:5,weightGoalDone:98,fatGoalDone:90,waistGoalDone:85,avgWeightLoss:3.5,avgLossRate:4.2,avgWaistLoss:3.8,avgDailyIntake:1850,avgDailyConsume:520,avgDailyGap:340,avgScore:82.0,avgActionScore:76.5,responsible:'李明辉'},
|
||||
{id:6,planName:'采油一厂2026年体重管理专项行动',unit:'采油一厂',dept:'安全环保科',dateFrom:'2026-04-01',dateTo:'2026-09-30',staffScope:'采油一队',shouldCount:62,actualCount:60,notCount:2,weightGoalDone:22,fatGoalDone:18,waistGoalDone:16,avgWeightLoss:2.0,avgLossRate:2.4,avgWaistLoss:2.2,avgDailyIntake:1920,avgDailyConsume:480,avgDailyGap:270,avgScore:74.0,avgActionScore:67.5,responsible:'李明辉'}
|
||||
]
|
||||
};
|
||||
|
||||
var allActivities = [];
|
||||
var filteredActivities = [];
|
||||
var pageSize = 10;
|
||||
var currentPage = 0;
|
||||
|
||||
/* ===== 页面初始化 ===== */
|
||||
(function init() {
|
||||
var unit = getParam('unit') || '第四采油厂';
|
||||
var dept = getParam('dept') || '';
|
||||
var total = getParam('total') || '1234';
|
||||
var activities = getParam('activities') || '8';
|
||||
var weightLoss = getParam('weightLoss') || '2.3';
|
||||
var lossRate = getParam('lossRate') || '5';
|
||||
var bmi = getParam('bmi') || '2';
|
||||
var fatRate = getParam('fatRate') || '2';
|
||||
var waist = getParam('waist') || '5';
|
||||
var intake = getParam('intake') || '5410';
|
||||
var consume = getParam('consume') || '3541';
|
||||
var gap = getParam('gap') || '1570';
|
||||
var score = getParam('score') || '86';
|
||||
var actionScore = getParam('actionScore') || '86';
|
||||
|
||||
// 设置基本信息
|
||||
var displayName = dept ? unit + ' - ' + dept : unit;
|
||||
document.getElementById('infoName').textContent = displayName;
|
||||
document.getElementById('infoTag').textContent = dept ? '三级单位' : '二级单位';
|
||||
document.getElementById('infoTotal').textContent = total;
|
||||
document.getElementById('infoActivities').textContent = activities;
|
||||
|
||||
// 加载活动数据
|
||||
if (dept) {
|
||||
var key = unit + '|' + dept;
|
||||
allActivities = deptActivityData[key] || [];
|
||||
} else {
|
||||
allActivities = unitActivityData[unit] || [];
|
||||
}
|
||||
|
||||
// 计算参与人次和覆盖率
|
||||
var totalParticipants = 0;
|
||||
allActivities.forEach(function(a) { totalParticipants += a.actualCount; });
|
||||
document.getElementById('infoParticipants').textContent = totalParticipants;
|
||||
var coverage = total > 0 ? Math.round(totalParticipants / parseInt(total) * 100) : 0;
|
||||
document.getElementById('infoCoverage').textContent = coverage + '%';
|
||||
|
||||
// 设置统计指标
|
||||
document.getElementById('statWeightLoss').textContent = weightLoss;
|
||||
document.getElementById('statLossRate').textContent = lossRate;
|
||||
document.getElementById('statBmi').textContent = bmi;
|
||||
document.getElementById('statFatRate').textContent = fatRate;
|
||||
document.getElementById('statWaist').textContent = waist;
|
||||
document.getElementById('statIntake').textContent = intake;
|
||||
document.getElementById('statConsume').textContent = consume;
|
||||
document.getElementById('statGap').textContent = gap;
|
||||
document.getElementById('statScore').textContent = score;
|
||||
document.getElementById('statActionScore').textContent = actionScore;
|
||||
|
||||
filteredActivities = allActivities.slice();
|
||||
renderTable();
|
||||
})();
|
||||
|
||||
/* ===== 筛选 ===== */
|
||||
function applyFilter() {
|
||||
var planName = document.getElementById('filterPlanName').value.trim().toLowerCase();
|
||||
var year = document.getElementById('filterYear').value;
|
||||
var data = allActivities.slice();
|
||||
if (planName) {
|
||||
data = data.filter(function(d) { return d.planName.toLowerCase().indexOf(planName) !== -1; });
|
||||
}
|
||||
if (year) {
|
||||
data = data.filter(function(d) { return d.dateFrom.indexOf(year) === 0 || d.dateTo.indexOf(year) === 0; });
|
||||
}
|
||||
filteredActivities = data;
|
||||
currentPage = 0;
|
||||
renderTable();
|
||||
}
|
||||
|
||||
function resetFilter() {
|
||||
document.getElementById('filterPlanName').value = '';
|
||||
document.getElementById('filterYear').value = '';
|
||||
applyFilter();
|
||||
}
|
||||
|
||||
/* ===== 渲染表格 ===== */
|
||||
function renderTable() {
|
||||
var tbody = document.getElementById('tableBody');
|
||||
var start = currentPage * pageSize;
|
||||
var pageData = filteredActivities.slice(start, start + pageSize);
|
||||
var totalPages = Math.ceil(filteredActivities.length / pageSize) || 1;
|
||||
document.getElementById('pageInfo').textContent = '显示 ' + pageData.length + ' 条，共 ' + filteredActivities.length + ' 条记录';
|
||||
document.getElementById('pageNum').textContent = '第 ' + (currentPage + 1) + '/' + totalPages + ' 页';
|
||||
|
||||
if (filteredActivities.length === 0) {
|
||||
tbody.innerHTML = '<tr><td colspan="20" class="td-empty">暂无活动数据</td></tr>';
|
||||
return;
|
||||
}
|
||||
|
||||
var html = '';
|
||||
pageData.forEach(function(d) {
|
||||
html += '<tr>';
|
||||
html += '<td><a class="link" href="history-plan-detail.html?id=' + d.id + '">' + esc(d.planName) + '</a></td>';
|
||||
html += '<td>' + esc(d.unit) + '</td>';
|
||||
html += '<td>' + esc(d.dept) + '</td>';
|
||||
html += '<td>' + d.dateFrom + ' ~ ' + d.dateTo + '</td>';
|
||||
html += '<td>' + esc(d.staffScope) + '</td>';
|
||||
html += '<td>' + d.shouldCount + '</td>';
|
||||
html += '<td>' + d.actualCount + '</td>';
|
||||
html += '<td>' + d.notCount + '</td>';
|
||||
html += '<td>' + d.weightGoalDone + '</td>';
|
||||
html += '<td>' + d.fatGoalDone + '</td>';
|
||||
html += '<td>' + d.waistGoalDone + '</td>';
|
||||
html += '<td>' + d.avgWeightLoss + '</td>';
|
||||
html += '<td>' + d.avgLossRate + '</td>';
|
||||
html += '<td>' + d.avgWaistLoss + '</td>';
|
||||
html += '<td>' + d.avgDailyIntake.toLocaleString() + '</td>';
|
||||
html += '<td>' + d.avgDailyConsume.toLocaleString() + '</td>';
|
||||
html += '<td>' + d.avgDailyGap.toLocaleString() + '</td>';
|
||||
html += '<td>' + d.avgScore + '</td>';
|
||||
html += '<td>' + d.avgActionScore + '</td>';
|
||||
html += '<td>' + esc(d.responsible) + '</td>';
|
||||
html += '</tr>';
|
||||
});
|
||||
tbody.innerHTML = html;
|
||||
}
|
||||
|
||||
/* ===== 翻页 ===== */
|
||||
function goPage(delta) {
|
||||
var totalPages = Math.ceil(filteredActivities.length / pageSize);
|
||||
var newPage = currentPage + delta;
|
||||
if (newPage < 0 || newPage >= totalPages) return;
|
||||
currentPage = newPage;
|
||||
renderTable();
|
||||
}
|
||||
|
||||
/* ===== 侧边栏高亮 ===== */
|
||||
(function() {
|
||||
var current = location.pathname.split('/').pop();
|
||||
document.querySelectorAll('.sidebar-item').forEach(function(item) {
|
||||
var href = item.getAttribute('href');
|
||||
item.classList.toggle('active', href === 'archive-unit-report.html');
|
||||
});
|
||||
})();
|
||||
|
||||
/* ===== 工具函数 ===== */
|
||||
function esc(s) { return String(s || '').replace(/&/g, '&').replace(/"/g, '"').replace(/</g, '<').replace(/>/g, '>'); }
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -99,6 +99,18 @@ tbody tr:hover{background:#F8FBFF;}
|
||||
#tab-0 tbody tr:hover td.sticky-r,
|
||||
#tab-1 tbody tr:hover td.sticky-r{background:#F8FBFF;}
|
||||
.sticky-l3,.sticky-l4,.sticky-r{box-shadow:-2px 0 4px rgba(0,0,0,0.06);}
|
||||
/* 组织机构二级联动 */
|
||||
.org-select-wrap{position:relative;display:inline-block;}
|
||||
.org-select-trigger{height:36px;min-width:160px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);color:var(--text-primary);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;cursor:pointer;display:flex;align-items:center;user-select:none;white-space:nowrap;}
|
||||
.org-select-trigger.open,.org-select-trigger:hover{border-color:var(--primary);}
|
||||
.org-select-panel{display:none;position:absolute;top:40px;left:0;z-index:310;background:#fff;border:1px solid var(--border);border-radius:var(--radius-sm);box-shadow:0 4px 12px rgba(0,0,0,0.12);width:380px;}
|
||||
.org-select-panel.open{display:flex;}
|
||||
.org-select-col{flex:1;overflow-y:auto;max-height:200px;border-right:1px solid var(--border);}
|
||||
.org-select-col:last-child{border-right:none;}
|
||||
.org-select-col__title{padding:6px 12px;font-size:var(--font-xs);color:var(--text-placeholder);background:#FAFAFA;border-bottom:1px solid var(--border);font-weight:500;}
|
||||
.org-select-item{padding:8px 12px;font-size:var(--font-sm);color:var(--text-primary);cursor:pointer;display:flex;align-items:center;justify-content:space-between;}
|
||||
.org-select-item:hover{background:#F0F8FF;color:var(--primary);}
|
||||
.org-select-item.active{background:var(--primary-light);color:var(--primary);font-weight:500;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -146,18 +158,24 @@ tbody tr:hover{background:#F8FBFF;}
|
||||
<!-- 筛选栏 -->
|
||||
<div class="filter-bar" style="border-radius:0 0 var(--radius-md) var(--radius-md);margin-top:0;">
|
||||
<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="请输入干预计划组织次数" style="min-width:220px;">
|
||||
<label>组织机构</label>
|
||||
<div class="org-select-wrap" id="filterOrgWrap">
|
||||
<div class="org-select-trigger" id="filterOrgTrigger" onclick="toggleFilterOrg()">全部</div>
|
||||
<div class="org-select-panel" id="filterOrgPanel">
|
||||
<div class="org-select-col" id="filterUnitCol">
|
||||
<div class="org-select-col__title">单位</div>
|
||||
<div class="org-select-item active" data-unit="" onclick="selectFilterUnit(this,'全部','')">全部</div>
|
||||
<div class="org-select-item" data-unit="第四采油厂" onclick="selectFilterUnit(this,'第四采油厂','第四采油厂')">第四采油厂</div>
|
||||
<div class="org-select-item" data-unit="采油一厂" onclick="selectFilterUnit(this,'采油一厂','采油一厂')">采油一厂</div>
|
||||
<div class="org-select-item" data-unit="采油二厂" onclick="selectFilterUnit(this,'采油二厂','采油二厂')">采油二厂</div>
|
||||
<div class="org-select-item" data-unit="采气一厂" onclick="selectFilterUnit(this,'采气一厂','采气一厂')">采气一厂</div>
|
||||
</div>
|
||||
<div class="org-select-col" id="filterDeptCol">
|
||||
<div class="org-select-col__title">部门</div>
|
||||
<div class="org-select-item active" data-dept="" onclick="selectFilterDept(this,'全部部门','')">全部部门</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>年份</label>
|
||||
@@ -194,9 +212,7 @@ tbody tr:hover{background:#F8FBFF;}
|
||||
<th class="sticky-l1">序号</th>
|
||||
<th class="sticky-l2">单位</th>
|
||||
<th class="sticky-l3">总人数</th>
|
||||
<th>完成体重目标人数</th>
|
||||
<th>完成体脂目标人数</th>
|
||||
<th>完成腰围目标人数</th>
|
||||
<th>组织活动次数</th>
|
||||
<th>人均减重(kg)</th>
|
||||
<th>人均减重率(%)</th>
|
||||
<th>人均BMI降低</th>
|
||||
@@ -212,16 +228,16 @@ tbody tr:hover{background:#F8FBFF;}
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="sticky-l1">1</td><td class="sticky-l2">第四采油厂</td><td class="sticky-l3">1234</td><td>213</td><td>213</td><td>213</td><td>2.3</td><td>5</td><td>2</td><td>2</td><td>5</td><td>5410</td><td>3541</td><td>1570</td><td>86</td><td>86</td><td class="sticky-r"><a class="link">详细数据</a></td>
|
||||
<td class="sticky-l1">1</td><td class="sticky-l2">第四采油厂</td><td class="sticky-l3">1234</td><td>8</td><td>2.3</td><td>5</td><td>2</td><td>2</td><td>5</td><td>5410</td><td>3541</td><td>1570</td><td>86</td><td>86</td><td class="sticky-r"><a class="link" href="archive-unit-report-detail.html?unit=第四采油厂&total=1234&activities=8&weightLoss=2.3&lossRate=5&bmi=2&fatRate=2&waist=5&intake=5410&consume=3541&gap=1570&score=86&actionScore=86">详细数据</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="sticky-l1">2</td><td class="sticky-l2">第四采油厂</td><td class="sticky-l3">1234</td><td>321</td><td>321</td><td>321</td><td>5.5</td><td>5</td><td>3</td><td>1</td><td>6</td><td>5410</td><td>3541</td><td>1570</td><td>75</td><td>75</td><td class="sticky-r"><a class="link">详细数据</a></td>
|
||||
<td class="sticky-l1">2</td><td class="sticky-l2">第四采油厂</td><td class="sticky-l3">1234</td><td>12</td><td>5.5</td><td>5</td><td>3</td><td>1</td><td>6</td><td>5410</td><td>3541</td><td>1570</td><td>75</td><td>75</td><td class="sticky-r"><a class="link" href="archive-unit-report-detail.html?unit=第四采油厂&total=1234&activities=12&weightLoss=5.5&lossRate=5&bmi=3&fatRate=1&waist=6&intake=5410&consume=3541&gap=1570&score=75&actionScore=75">详细数据</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="sticky-l1">3</td><td class="sticky-l2">采油一厂</td><td class="sticky-l3">980</td><td>256</td><td>248</td><td>240</td><td>3.8</td><td>4</td><td>2.5</td><td>1.8</td><td>4</td><td>5200</td><td>3420</td><td>1620</td><td>82</td><td>80</td><td class="sticky-r"><a class="link">详细数据</a></td>
|
||||
<td class="sticky-l1">3</td><td class="sticky-l2">采油一厂</td><td class="sticky-l3">980</td><td>6</td><td>3.8</td><td>4</td><td>2.5</td><td>1.8</td><td>4</td><td>5200</td><td>3420</td><td>1620</td><td>82</td><td>80</td><td class="sticky-r"><a class="link" href="archive-unit-report-detail.html?unit=采油一厂&total=980&activities=6&weightLoss=3.8&lossRate=4&bmi=2.5&fatRate=1.8&waist=4&intake=5200&consume=3420&gap=1620&score=82&actionScore=80">详细数据</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="sticky-l1">4</td><td class="sticky-l2">采气一厂</td><td class="sticky-l3">756</td><td>152</td><td>148</td><td>140</td><td>4.2</td><td>6</td><td>1.5</td><td>2.2</td><td>3</td><td>5350</td><td>3600</td><td>1590</td><td>78</td><td>76</td><td class="sticky-r"><a class="link">详细数据</a></td>
|
||||
<td class="sticky-l1">4</td><td class="sticky-l2">采气一厂</td><td class="sticky-l3">756</td><td>5</td><td>4.2</td><td>6</td><td>1.5</td><td>2.2</td><td>3</td><td>5350</td><td>3600</td><td>1590</td><td>78</td><td>76</td><td class="sticky-r"><a class="link" href="archive-unit-report-detail.html?unit=采气一厂&total=756&activities=5&weightLoss=4.2&lossRate=6&bmi=1.5&fatRate=2.2&waist=3&intake=5350&consume=3600&gap=1590&score=78&actionScore=76">详细数据</a></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
@@ -246,9 +262,7 @@ tbody tr:hover{background:#F8FBFF;}
|
||||
<th class="sticky-l2">单位</th>
|
||||
<th class="sticky-l3">部门</th>
|
||||
<th class="sticky-l4">总人数</th>
|
||||
<th>完成体重目标人数</th>
|
||||
<th>完成体脂目标人数</th>
|
||||
<th>完成腰围目标人数</th>
|
||||
<th>组织活动次数</th>
|
||||
<th>人均减重(kg)</th>
|
||||
<th>人均减重率(%)</th>
|
||||
<th>人均BMI降低</th>
|
||||
@@ -264,13 +278,13 @@ tbody tr:hover{background:#F8FBFF;}
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="sticky-l1">1</td><td class="sticky-l2">第四采油厂</td><td class="sticky-l3">作业一区</td><td class="sticky-l4">1234</td><td>130</td><td>128</td><td>125</td><td>3.2</td><td>4</td><td>1.8</td><td>2.0</td><td>4</td><td>5300</td><td>3500</td><td>1600</td><td>84</td><td>82</td><td class="sticky-r"><a class="link">详细数据</a></td>
|
||||
<td class="sticky-l1">1</td><td class="sticky-l2">第四采油厂</td><td class="sticky-l3">作业一区</td><td class="sticky-l4">1234</td><td>3</td><td>3.2</td><td>4</td><td>1.8</td><td>2.0</td><td>4</td><td>5300</td><td>3500</td><td>1600</td><td>84</td><td>82</td><td class="sticky-r"><a class="link" href="archive-unit-report-detail.html?unit=第四采油厂&dept=作业一区&total=1234&activities=3&weightLoss=3.2&lossRate=4&bmi=1.8&fatRate=2.0&waist=4&intake=5300&consume=3500&gap=1600&score=84&actionScore=82">详细数据</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="sticky-l1">2</td><td class="sticky-l2">第四采油厂</td><td class="sticky-l3">作业二区</td><td class="sticky-l4">1234</td><td>172</td><td>168</td><td>160</td><td>4.0</td><td>5</td><td>2.2</td><td>1.5</td><td>5</td><td>5150</td><td>3480</td><td>1550</td><td>80</td><td>78</td><td class="sticky-r"><a class="link">详细数据</a></td>
|
||||
<td class="sticky-l1">2</td><td class="sticky-l2">第四采油厂</td><td class="sticky-l3">作业二区</td><td class="sticky-l4">1234</td><td>4</td><td>4.0</td><td>5</td><td>2.2</td><td>1.5</td><td>5</td><td>5150</td><td>3480</td><td>1550</td><td>80</td><td>78</td><td class="sticky-r"><a class="link" href="archive-unit-report-detail.html?unit=第四采油厂&dept=作业二区&total=1234&activities=4&weightLoss=4.0&lossRate=5&bmi=2.2&fatRate=1.5&waist=5&intake=5150&consume=3480&gap=1550&score=80&actionScore=78">详细数据</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="sticky-l1">3</td><td class="sticky-l2">采油一厂</td><td class="sticky-l3">采油一队</td><td class="sticky-l4">980</td><td>242</td><td>238</td><td>230</td><td>2.8</td><td>3</td><td>1.2</td><td>1.8</td><td>3</td><td>5250</td><td>3380</td><td>1520</td><td>76</td><td>74</td><td class="sticky-r"><a class="link">详细数据</a></td>
|
||||
<td class="sticky-l1">3</td><td class="sticky-l2">采油一厂</td><td class="sticky-l3">采油一队</td><td class="sticky-l4">980</td><td>2</td><td>2.8</td><td>3</td><td>1.2</td><td>1.8</td><td>3</td><td>5250</td><td>3380</td><td>1520</td><td>76</td><td>74</td><td class="sticky-r"><a class="link" href="archive-unit-report-detail.html?unit=采油一厂&dept=采油一队&total=980&activities=2&weightLoss=2.8&lossRate=3&bmi=1.2&fatRate=1.8&waist=3&intake=5250&consume=3380&gap=1520&score=76&actionScore=74">详细数据</a></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
@@ -292,6 +306,58 @@ tbody tr:hover{background:#F8FBFF;}
|
||||
|
||||
<!-- 侧边栏交互脚本 -->
|
||||
<script>
|
||||
/* 部门映射 */
|
||||
var deptMap = {
|
||||
'第四采油厂':['健康管理部','安全环保科','工会办公室','生产技术部','财务部','信息中心'],
|
||||
'采油一厂':['健康管理部','安全环保科','工会办公室','生产技术部'],
|
||||
'采油二厂':['健康管理部','安全环保科','财务部'],
|
||||
'采气一厂':['生产技术部','信息中心']
|
||||
};
|
||||
|
||||
/* ===== 组织机构二级联动 ===== */
|
||||
var filterUnitCode = '', filterUnitName = '', filterDeptCode = '', filterDeptName = '';
|
||||
|
||||
function toggleFilterOrg() {
|
||||
var panel = document.getElementById('filterOrgPanel');
|
||||
var trigger = document.getElementById('filterOrgTrigger');
|
||||
panel.classList.toggle('open');
|
||||
trigger.classList.toggle('open');
|
||||
}
|
||||
|
||||
function selectFilterUnit(elem, name, code) {
|
||||
document.querySelectorAll('#filterUnitCol .org-select-item').forEach(function(item){item.classList.remove('active');});
|
||||
elem.classList.add('active');
|
||||
filterUnitName = name;
|
||||
filterUnitCode = code;
|
||||
var depts = deptMap[code] || [];
|
||||
var html = '<div class="org-select-col__title">部门</div>';
|
||||
html += '<div class="org-select-item active" data-dept="" onclick="selectFilterDept(this,\'全部部门\',\'\')">全部部门</div>';
|
||||
depts.forEach(function(d){
|
||||
html += '<div class="org-select-item" data-dept="'+d+'" onclick="selectFilterDept(this,\''+d+'\',\''+d+'\')">'+d+'</div>';
|
||||
});
|
||||
document.getElementById('filterDeptCol').innerHTML = html;
|
||||
filterDeptName = ''; filterDeptCode = '';
|
||||
}
|
||||
|
||||
function selectFilterDept(elem, name, code) {
|
||||
document.querySelectorAll('#filterDeptCol .org-select-item').forEach(function(item){item.classList.remove('active');});
|
||||
elem.classList.add('active');
|
||||
filterDeptName = name;
|
||||
filterDeptCode = code;
|
||||
var label = filterUnitCode ? filterUnitName : '全部';
|
||||
label += filterDeptCode ? ' - ' + filterDeptName : '';
|
||||
document.getElementById('filterOrgTrigger').textContent = label || '全部';
|
||||
}
|
||||
|
||||
/* 点击外部关闭面板 */
|
||||
document.addEventListener('click', function(e){
|
||||
var fw = document.getElementById('filterOrgWrap');
|
||||
if (fw && !fw.contains(e.target)) {
|
||||
document.getElementById('filterOrgPanel').classList.remove('open');
|
||||
document.getElementById('filterOrgTrigger').classList.remove('open');
|
||||
}
|
||||
});
|
||||
|
||||
/* TAB切换 */
|
||||
function switchTab(idx) {
|
||||
document.querySelectorAll('.tab-item').forEach(function(t, i) { t.classList.toggle('active', i === idx); });
|
||||
|
||||
@@ -245,7 +245,7 @@ tbody tr:hover td:last-child{background:#F8FBFF;}
|
||||
<div class="plan-selector__left">
|
||||
<div class="plan-selector__label">干预计划</div>
|
||||
<div class="search-select" id="planSelect">
|
||||
<input class="search-select__input" id="planSearchInput" placeholder="搜索计划名称或组织单位" oninput="searchPlan()" onfocus="showPlanPanel()" autocomplete="off">
|
||||
<input class="search-select__input" id="planSearchInput" placeholder="搜索计划名称或组织机构" oninput="searchPlan()" onfocus="showPlanPanel()" autocomplete="off">
|
||||
<!-- [交互] 点击清空已选计划，恢复未选择状态 -->
|
||||
<button class="search-select__clear" id="planClearBtn" onclick="clearPlan()" title="清空计划">×</button>
|
||||
<div class="search-select__panel" id="planPanel"></div>
|
||||
@@ -258,7 +258,7 @@ tbody tr:hover td:last-child{background:#F8FBFF;}
|
||||
</div>
|
||||
<div class="plan-selector__right" id="planInfo" style="display:none;">
|
||||
<div class="plan-info-item">
|
||||
<span class="plan-info-item__label">组织单位</span>
|
||||
<span class="plan-info-item__label">组织机构</span>
|
||||
<span class="plan-info-item__value" id="piOrg">-</span>
|
||||
</div>
|
||||
<div class="plan-info-item">
|
||||
@@ -577,7 +577,7 @@ function searchPlan(){
|
||||
var sel = selectedPlanId === p.id ? ' selected' : '';
|
||||
html += '<div class="search-select__option'+sel+'" onclick="selectPlan('+p.id+')">';
|
||||
html += '<div style="font-weight:500;">'+esc(p.name)+'</div>';
|
||||
html += '<div class="ss-org">'+esc(p.org)+' | '+p.dateFrom+' ~ '+p.dateTo+' | 应参加 '+p.totalCount+' 人</div>';
|
||||
html += '<div class="ss-org">'+esc(p.org)+' | '+p.dateFrom+' ~ '+p.dateTo+'</div>';
|
||||
html += '</div>';
|
||||
});
|
||||
panel.innerHTML = html;
|
||||
@@ -927,7 +927,7 @@ document.addEventListener('click',function(e){
|
||||
plans.forEach(function(p){
|
||||
html += '<div class="search-select__option" onclick="selectPlan('+p.id+')">';
|
||||
html += '<div style="font-weight:500;">'+esc(p.name)+'</div>';
|
||||
html += '<div class="ss-org">'+esc(p.org)+' | '+p.dateFrom+' ~ '+p.dateTo+' | 应参加 '+p.totalCount+' 人</div>';
|
||||
html += '<div class="ss-org">'+esc(p.org)+' | '+p.dateFrom+' ~ '+p.dateTo+'</div>';
|
||||
html += '</div>';
|
||||
});
|
||||
document.getElementById('planPanel').innerHTML = html;
|
||||
|
||||
@@ -77,7 +77,7 @@ thead th:nth-child(1),tbody td:nth-child(1){position:sticky;left:0;z-index:4;bac
|
||||
thead th:nth-child(1){z-index:7;background:#FAFAFA;}
|
||||
tbody tr:hover td:nth-child(1){background:#F8FBFF;}
|
||||
|
||||
/* 第二列(活动所属单位)固定左侧 */
|
||||
/* 第二列(组织机构)固定左侧 */
|
||||
thead th:nth-child(2),tbody td:nth-child(2){position:sticky;left:240px;z-index:3;background:#fff;min-width:120px;max-width:120px;}
|
||||
thead th:nth-child(2){z-index:6;background:#FAFAFA;}
|
||||
tbody tr:hover td:nth-child(2){background:#F8FBFF;}
|
||||
@@ -138,6 +138,18 @@ tbody tr:hover td:nth-child(2){background:#F8FBFF;}
|
||||
.modal-org-item{padding:8px 12px;font-size:var(--font-sm);color:var(--text-primary);cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:4px;}
|
||||
.modal-org-item:hover{background:#F0F8FF;color:var(--primary);}
|
||||
.modal-org-item.active{background:var(--primary-light);color:var(--primary);font-weight:500;}
|
||||
/* 筛选栏组织机构二级联动 */
|
||||
.filter-org-wrap{position:relative;display:inline-block;}
|
||||
.filter-org-trigger{height:32px;min-width:160px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 10px;font-size:var(--font-xs);color:var(--text-primary);background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 8px center;cursor:pointer;display:flex;align-items:center;user-select:none;white-space:nowrap;}
|
||||
.filter-org-trigger.open,.filter-org-trigger:hover{border-color:var(--primary);}
|
||||
.filter-org-panel{display:none;position:absolute;top:36px;left:0;z-index:310;background:#fff;border:1px solid var(--border);border-radius:var(--radius-sm);box-shadow:var(--shadow-md);width:380px;}
|
||||
.filter-org-panel.open{display:flex;}
|
||||
.filter-org-col{flex:1;overflow-y:auto;max-height:200px;border-right:1px solid var(--border);}
|
||||
.filter-org-col:last-child{border-right:none;}
|
||||
.filter-org-col__title{padding:6px 12px;font-size:var(--font-xs);color:var(--text-placeholder);background:#FAFAFA;border-bottom:1px solid var(--border);font-weight:500;}
|
||||
.filter-org-item{padding:8px 12px;font-size:var(--font-sm);color:var(--text-primary);cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:4px;}
|
||||
.filter-org-item:hover{background:#F0F8FF;color:var(--primary);}
|
||||
.filter-org-item.active{background:var(--primary-light);color:var(--primary);font-weight:500;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -176,18 +188,27 @@ tbody tr:hover td:nth-child(2){background:#F8FBFF;}
|
||||
<div class="page-header__breadcrumb">体重管理 / 历史干预 / <span>计划列表</span></div>
|
||||
</div>
|
||||
|
||||
<!-- [交互] 筛选栏 — 活动所属单位下拉 + 年份下拉 -->
|
||||
<!-- [交互] 筛选栏 — 组织机构二级联动 + 年份下拉 -->
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item">
|
||||
<label>活动所属单位</label>
|
||||
<!-- [交互] 下拉选择单位筛选 -->
|
||||
<select class="filter-select" id="filterUnit" onchange="applyFilter()">
|
||||
<option value="">全部单位</option>
|
||||
<option value="第四采油厂">第四采油厂</option>
|
||||
<option value="采油一厂">采油一厂</option>
|
||||
<option value="采油二厂">采油二厂</option>
|
||||
<option value="采气一厂">采气一厂</option>
|
||||
</select>
|
||||
<label>组织机构</label>
|
||||
<div class="filter-org-wrap" id="filterOrgWrap">
|
||||
<div class="filter-org-trigger" id="filterOrgTrigger" onclick="toggleFilterOrg()">全部</div>
|
||||
<div class="filter-org-panel" id="filterOrgPanel">
|
||||
<div class="filter-org-col" id="filterUnitCol">
|
||||
<div class="filter-org-col__title">单位</div>
|
||||
<div class="filter-org-item active" data-unit="" onclick="selectFilterUnit(this,'全部','')">全部</div>
|
||||
<div class="filter-org-item" data-unit="第四采油厂" onclick="selectFilterUnit(this,'第四采油厂','第四采油厂')">第四采油厂</div>
|
||||
<div class="filter-org-item" data-unit="采油一厂" onclick="selectFilterUnit(this,'采油一厂','采油一厂')">采油一厂</div>
|
||||
<div class="filter-org-item" data-unit="采油二厂" onclick="selectFilterUnit(this,'采油二厂','采油二厂')">采油二厂</div>
|
||||
<div class="filter-org-item" data-unit="采气一厂" onclick="selectFilterUnit(this,'采气一厂','采气一厂')">采气一厂</div>
|
||||
</div>
|
||||
<div class="filter-org-col" id="filterDeptCol">
|
||||
<div class="filter-org-col__title">部门</div>
|
||||
<div class="filter-org-item active" data-dept="" onclick="selectFilterDept(this,'全部部门','')">全部部门</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>年份</label>
|
||||
@@ -223,7 +244,7 @@ tbody tr:hover td:nth-child(2){background:#F8FBFF;}
|
||||
<thead>
|
||||
<tr>
|
||||
<th>干预计划</th>
|
||||
<th>活动所属单位</th>
|
||||
<th>组织机构</th>
|
||||
<th>组织部门</th>
|
||||
<th>起止日期</th>
|
||||
<th>人员范围</th>
|
||||
@@ -363,14 +384,59 @@ var pageSize = 10;
|
||||
var currentPage = 0;
|
||||
var filteredData = historyPlans.slice();
|
||||
|
||||
/* ===== 组织机构二级联动筛选 ===== */
|
||||
var filterUnitCode = '', filterUnitName = '', filterDeptCode = '', filterDeptName = '';
|
||||
|
||||
function toggleFilterOrg() {
|
||||
var panel = document.getElementById('filterOrgPanel');
|
||||
var trigger = document.getElementById('filterOrgTrigger');
|
||||
panel.classList.toggle('open');
|
||||
trigger.classList.toggle('open');
|
||||
}
|
||||
|
||||
function selectFilterUnit(elem, name, code) {
|
||||
document.querySelectorAll('#filterUnitCol .filter-org-item').forEach(function(item){item.classList.remove('active');});
|
||||
elem.classList.add('active');
|
||||
filterUnitName = name;
|
||||
filterUnitCode = code;
|
||||
var deptMap = {
|
||||
'第四采油厂':['健康管理部','安全环保科','工会办公室','生产技术部','财务部','信息中心'],
|
||||
'采油一厂':['健康管理部','安全环保科','工会办公室','生产技术部'],
|
||||
'采油二厂':['健康管理部','安全环保科','财务部'],
|
||||
'采气一厂':['生产技术部','信息中心']
|
||||
};
|
||||
var depts = deptMap[code] || [];
|
||||
var html = '<div class="filter-org-col__title">部门</div>';
|
||||
html += '<div class="filter-org-item active" data-dept="" onclick="selectFilterDept(this,\'全部部门\',\'\')">全部部门</div>';
|
||||
depts.forEach(function(d){
|
||||
html += '<div class="filter-org-item" data-dept="'+d+'" onclick="selectFilterDept(this,\''+d+'\',\''+d+'\')">'+d+'</div>';
|
||||
});
|
||||
document.getElementById('filterDeptCol').innerHTML = html;
|
||||
filterDeptName = ''; filterDeptCode = '';
|
||||
}
|
||||
|
||||
function selectFilterDept(elem, name, code) {
|
||||
document.querySelectorAll('#filterDeptCol .filter-org-item').forEach(function(item){item.classList.remove('active');});
|
||||
elem.classList.add('active');
|
||||
filterDeptName = name;
|
||||
filterDeptCode = code;
|
||||
var label = filterUnitCode ? filterUnitName : '全部';
|
||||
label += filterDeptCode ? ' - ' + filterDeptName : '';
|
||||
document.getElementById('filterOrgTrigger').textContent = label || '全部';
|
||||
}
|
||||
|
||||
/* ===== 筛选 ===== */
|
||||
function applyFilter(){
|
||||
var unit = document.getElementById('filterUnit').value;
|
||||
var unit = filterUnitCode;
|
||||
var dept = filterDeptCode;
|
||||
var year = document.getElementById('filterYear').value;
|
||||
var data = historyPlans.slice();
|
||||
if(unit){
|
||||
data = data.filter(function(d){return d.unit === unit;});
|
||||
}
|
||||
if(dept){
|
||||
data = data.filter(function(d){return d.dept === dept;});
|
||||
}
|
||||
if(year){
|
||||
data = data.filter(function(d){return d.dateFrom.indexOf(year) === 0 || d.dateTo.indexOf(year) === 0;});
|
||||
}
|
||||
@@ -380,7 +446,12 @@ function applyFilter(){
|
||||
}
|
||||
|
||||
function resetFilter(){
|
||||
document.getElementById('filterUnit').value = '';
|
||||
filterUnitCode = ''; filterUnitName = ''; filterDeptCode = ''; filterDeptName = '';
|
||||
document.getElementById('filterOrgTrigger').textContent = '全部';
|
||||
document.querySelectorAll('#filterUnitCol .filter-org-item').forEach(function(item){item.classList.remove('active');});
|
||||
var first = document.querySelector('#filterUnitCol .filter-org-item');
|
||||
if(first) first.classList.add('active');
|
||||
document.getElementById('filterDeptCol').innerHTML = '<div class="filter-org-col__title">部门</div><div class="filter-org-item active" data-dept="" onclick="selectFilterDept(this,\'全部部门\',\'\')">全部部门</div>';
|
||||
document.getElementById('filterYear').value = '';
|
||||
applyFilter();
|
||||
}
|
||||
@@ -623,6 +694,11 @@ document.addEventListener('click', function(e){
|
||||
document.getElementById('modalOrgPanel').classList.remove('open');
|
||||
document.getElementById('modalOrgTrigger').classList.remove('open');
|
||||
}
|
||||
var fw = document.getElementById('filterOrgWrap');
|
||||
if(fw && !fw.contains(e.target)){
|
||||
document.getElementById('filterOrgPanel').classList.remove('open');
|
||||
document.getElementById('filterOrgTrigger').classList.remove('open');
|
||||
}
|
||||
});
|
||||
|
||||
/* ===== 工具函数 ===== */
|
||||
|
||||
@@ -99,7 +99,22 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
.form-group .form-input{width:100%;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;}
|
||||
.form-group .form-input:focus{border-color:var(--primary);}
|
||||
.form-group .form-select{width:100%;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;}
|
||||
/* 人员筛选弹窗 — modal + participant-filter */
|
||||
/* 组织机构二级联动 */
|
||||
.org-select-wrap{position:relative;display:inline-block;}
|
||||
.org-select-trigger{height:36px;min-width:160px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);color:var(--text-primary);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;cursor:pointer;display:flex;align-items:center;user-select:none;white-space:nowrap;}
|
||||
.org-select-trigger.open,.org-select-trigger:hover{border-color:var(--primary);}
|
||||
.org-select-panel{display:none;position:absolute;top:40px;left:0;z-index:310;background:#fff;border:1px solid var(--border);border-radius:var(--radius-sm);box-shadow:0 4px 12px rgba(0,0,0,0.12);width:380px;}
|
||||
.org-select-panel.open{display:flex;}
|
||||
.org-select-col{flex:1;overflow-y:auto;max-height:200px;border-right:1px solid var(--border);}
|
||||
.org-select-col:last-child{border-right:none;}
|
||||
.org-select-col__title{padding:6px 12px;font-size:var(--font-xs);color:var(--text-placeholder);background:#FAFAFA;border-bottom:1px solid var(--border);font-weight:500;}
|
||||
.org-select-item{padding:8px 12px;font-size:var(--font-sm);color:var(--text-primary);cursor:pointer;display:flex;align-items:center;justify-content:space-between;}
|
||||
.org-select-item:hover{background:#F0F8FF;color:var(--primary);}
|
||||
.org-select-item.active{background:var(--primary-light);color:var(--primary);font-weight:500;}
|
||||
/* 表单中组织机构选择器 */
|
||||
.form-org-wrap{position:relative;}
|
||||
.form-org-wrap .org-select-trigger{width:100%;}
|
||||
.form-org-wrap .org-select-panel{width:100%;}
|
||||
.modal-mask{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.45);z-index:500;display:none;align-items:center;justify-content:center;}
|
||||
.modal-mask.show{display:flex;}
|
||||
.modal{background:#fff;border-radius:var(--radius-lg);width:720px;max-height:85vh;overflow-y:auto;box-shadow:0 8px 40px rgba(0,0,0,0.18);}
|
||||
@@ -189,14 +204,24 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
<input class="filter-input" type="text" placeholder="请输入计划名称">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>组织单位</label>
|
||||
<select class="filter-select">
|
||||
<option>全部</option>
|
||||
<option>第四采油厂</option>
|
||||
<option>采油一厂</option>
|
||||
<option>采油二厂</option>
|
||||
<option>采气一厂</option>
|
||||
</select>
|
||||
<label>组织机构</label>
|
||||
<div class="org-select-wrap" id="filterOrgWrap">
|
||||
<div class="org-select-trigger" id="filterOrgTrigger" onclick="toggleFilterOrg()">全部</div>
|
||||
<div class="org-select-panel" id="filterOrgPanel">
|
||||
<div class="org-select-col" id="filterUnitCol">
|
||||
<div class="org-select-col__title">单位</div>
|
||||
<div class="org-select-item active" data-unit="" onclick="selectFilterUnit(this,'全部','')">全部</div>
|
||||
<div class="org-select-item" data-unit="第四采油厂" onclick="selectFilterUnit(this,'第四采油厂','第四采油厂')">第四采油厂</div>
|
||||
<div class="org-select-item" data-unit="采油一厂" onclick="selectFilterUnit(this,'采油一厂','采油一厂')">采油一厂</div>
|
||||
<div class="org-select-item" data-unit="采油二厂" onclick="selectFilterUnit(this,'采油二厂','采油二厂')">采油二厂</div>
|
||||
<div class="org-select-item" data-unit="采气一厂" onclick="selectFilterUnit(this,'采气一厂','采气一厂')">采气一厂</div>
|
||||
</div>
|
||||
<div class="org-select-col" id="filterDeptCol">
|
||||
<div class="org-select-col__title">部门</div>
|
||||
<div class="org-select-item active" data-dept="" onclick="selectFilterDept(this,'全部部门','')">全部部门</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>活动状态</label>
|
||||
@@ -247,7 +272,7 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
<thead>
|
||||
<tr>
|
||||
<th>序号</th>
|
||||
<th>组织单位</th>
|
||||
<th>组织机构</th>
|
||||
<th>计划名称</th>
|
||||
<th>起止日期</th>
|
||||
<th>人员筛选</th>
|
||||
@@ -420,14 +445,23 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
<input class="form-input" type="text" placeholder="请输入计划名称" id="formName">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>组织单位 <span style="color:var(--danger);">*</span></label>
|
||||
<select class="form-select" id="formUnit">
|
||||
<option value="">请选择组织单位</option>
|
||||
<option>第四采油厂</option>
|
||||
<option>采油一厂</option>
|
||||
<option>采油二厂</option>
|
||||
<option>采气一厂</option>
|
||||
</select>
|
||||
<label>组织机构 <span style="color:var(--danger);">*</span></label>
|
||||
<div class="form-org-wrap" id="formOrgWrap">
|
||||
<div class="org-select-trigger" id="formOrgTrigger" onclick="toggleFormOrg()">请选择组织机构</div>
|
||||
<div class="org-select-panel" id="formOrgPanel">
|
||||
<div class="org-select-col" id="formUnitCol">
|
||||
<div class="org-select-col__title">单位</div>
|
||||
<div class="org-select-item" data-unit="第四采油厂" onclick="selectFormUnit(this,'第四采油厂','第四采油厂')">第四采油厂</div>
|
||||
<div class="org-select-item" data-unit="采油一厂" onclick="selectFormUnit(this,'采油一厂','采油一厂')">采油一厂</div>
|
||||
<div class="org-select-item" data-unit="采油二厂" onclick="selectFormUnit(this,'采油二厂','采油二厂')">采油二厂</div>
|
||||
<div class="org-select-item" data-unit="采气一厂" onclick="selectFormUnit(this,'采气一厂','采气一厂')">采气一厂</div>
|
||||
</div>
|
||||
<div class="org-select-col" id="formDeptCol">
|
||||
<div class="org-select-col__title">部门</div>
|
||||
<div class="org-select-item active" data-dept="" onclick="selectFormDept(this,'全部部门','')">全部部门</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>起止日期 <span style="color:var(--danger);">*</span></label>
|
||||
@@ -773,12 +807,105 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
});
|
||||
})();
|
||||
|
||||
/* ===== 组织机构二级联动 ===== */
|
||||
var deptMap = {
|
||||
'第四采油厂':['健康管理部','安全环保科','工会办公室','生产技术部','财务部','信息中心'],
|
||||
'采油一厂':['健康管理部','安全环保科','工会办公室','生产技术部'],
|
||||
'采油二厂':['健康管理部','安全环保科','财务部'],
|
||||
'采气一厂':['生产技术部','信息中心']
|
||||
};
|
||||
|
||||
/* ---- 筛选栏 ---- */
|
||||
var filterUnitCode = '', filterUnitName = '', filterDeptCode = '', filterDeptName = '';
|
||||
|
||||
function toggleFilterOrg() {
|
||||
var panel = document.getElementById('filterOrgPanel');
|
||||
var trigger = document.getElementById('filterOrgTrigger');
|
||||
panel.classList.toggle('open');
|
||||
trigger.classList.toggle('open');
|
||||
}
|
||||
|
||||
function selectFilterUnit(elem, name, code) {
|
||||
document.querySelectorAll('#filterUnitCol .org-select-item').forEach(function(item){item.classList.remove('active');});
|
||||
elem.classList.add('active');
|
||||
filterUnitName = name;
|
||||
filterUnitCode = code;
|
||||
var depts = deptMap[code] || [];
|
||||
var html = '<div class="org-select-col__title">部门</div>';
|
||||
html += '<div class="org-select-item active" data-dept="" onclick="selectFilterDept(this,\'全部部门\',\'\')">全部部门</div>';
|
||||
depts.forEach(function(d){
|
||||
html += '<div class="org-select-item" data-dept="'+d+'" onclick="selectFilterDept(this,\''+d+'\',\''+d+'\')">'+d+'</div>';
|
||||
});
|
||||
document.getElementById('filterDeptCol').innerHTML = html;
|
||||
filterDeptName = ''; filterDeptCode = '';
|
||||
}
|
||||
|
||||
function selectFilterDept(elem, name, code) {
|
||||
document.querySelectorAll('#filterDeptCol .org-select-item').forEach(function(item){item.classList.remove('active');});
|
||||
elem.classList.add('active');
|
||||
filterDeptName = name;
|
||||
filterDeptCode = code;
|
||||
var label = filterUnitCode ? filterUnitName : '全部';
|
||||
label += filterDeptCode ? ' - ' + filterDeptName : '';
|
||||
document.getElementById('filterOrgTrigger').textContent = label || '全部';
|
||||
}
|
||||
|
||||
/* ---- 表单弹窗 ---- */
|
||||
var formUnitCode = '', formUnitName = '', formDeptCode = '', formDeptName = '';
|
||||
|
||||
function toggleFormOrg() {
|
||||
var panel = document.getElementById('formOrgPanel');
|
||||
var trigger = document.getElementById('formOrgTrigger');
|
||||
panel.classList.toggle('open');
|
||||
trigger.classList.toggle('open');
|
||||
}
|
||||
|
||||
function selectFormUnit(elem, name, code) {
|
||||
document.querySelectorAll('#formUnitCol .org-select-item').forEach(function(item){item.classList.remove('active');});
|
||||
elem.classList.add('active');
|
||||
formUnitName = name;
|
||||
formUnitCode = code;
|
||||
var depts = deptMap[code] || [];
|
||||
var html = '<div class="org-select-col__title">部门</div>';
|
||||
html += '<div class="org-select-item active" data-dept="" onclick="selectFormDept(this,\'全部部门\',\'\')">全部部门</div>';
|
||||
depts.forEach(function(d){
|
||||
html += '<div class="org-select-item" data-dept="'+d+'" onclick="selectFormDept(this,\''+d+'\',\''+d+'\')">'+d+'</div>';
|
||||
});
|
||||
document.getElementById('formDeptCol').innerHTML = html;
|
||||
formDeptName = ''; formDeptCode = '';
|
||||
}
|
||||
|
||||
function selectFormDept(elem, name, code) {
|
||||
document.querySelectorAll('#formDeptCol .org-select-item').forEach(function(item){item.classList.remove('active');});
|
||||
elem.classList.add('active');
|
||||
formDeptName = name;
|
||||
formDeptCode = code;
|
||||
var label = formUnitName || '请选择组织机构';
|
||||
label += formDeptCode ? ' - ' + formDeptName : '';
|
||||
document.getElementById('formOrgTrigger').textContent = label;
|
||||
}
|
||||
|
||||
/* 点击外部关闭面板 */
|
||||
document.addEventListener('click', function(e){
|
||||
var fw = document.getElementById('filterOrgWrap');
|
||||
if (fw && !fw.contains(e.target)) {
|
||||
document.getElementById('filterOrgPanel').classList.remove('open');
|
||||
document.getElementById('filterOrgTrigger').classList.remove('open');
|
||||
}
|
||||
var fow = document.getElementById('formOrgWrap');
|
||||
if (fow && !fow.contains(e.target)) {
|
||||
document.getElementById('formOrgPanel').classList.remove('open');
|
||||
document.getElementById('formOrgTrigger').classList.remove('open');
|
||||
}
|
||||
});
|
||||
|
||||
/* 新增弹窗 */
|
||||
function openAddDialog() {
|
||||
document.getElementById('dialogTitle').textContent = '新增计划';
|
||||
// 清空表单
|
||||
document.getElementById('formName').value = '';
|
||||
document.getElementById('formUnit').value = '';
|
||||
document.getElementById('formOrgTrigger').textContent = '请选择组织机构';
|
||||
formUnitCode = ''; formUnitName = ''; formDeptCode = ''; formDeptName = '';
|
||||
document.getElementById('formStartDate').value = '';
|
||||
document.getElementById('formEndDate').value = '';
|
||||
document.getElementById('formFilter').value = '';
|
||||
@@ -795,7 +922,8 @@ function openEditDialog(id) {
|
||||
document.getElementById('dialogTitle').textContent = '编辑计划';
|
||||
// 模拟回填（实际项目中根据id请求数据）
|
||||
document.getElementById('formName').value = '第四采油厂2026年超重健康干预计划';
|
||||
document.getElementById('formUnit').value = '第四采油厂';
|
||||
document.getElementById('formOrgTrigger').textContent = '第四采油厂';
|
||||
formUnitCode = '第四采油厂'; formUnitName = '第四采油厂'; formDeptCode = ''; formDeptName = '';
|
||||
document.getElementById('formStartDate').value = '2026-03-01';
|
||||
document.getElementById('formEndDate').value = '2026-08-31';
|
||||
document.getElementById('formFilter').value = 'BMI≥24 / 腰围超标';
|
||||
|
||||
@@ -235,7 +235,7 @@ tbody tr:hover td:nth-child(3){background:#F8FBFF;}
|
||||
<div class="plan-selector__left">
|
||||
<div class="plan-selector__label">干预计划</div>
|
||||
<div class="search-select" id="planSelect">
|
||||
<input class="search-select__input" id="planSearchInput" placeholder="搜索计划名称或组织单位" oninput="searchPlan()" onfocus="showPlanPanel()" autocomplete="off">
|
||||
<input class="search-select__input" id="planSearchInput" placeholder="搜索计划名称或组织机构" oninput="searchPlan()" onfocus="showPlanPanel()" autocomplete="off">
|
||||
<!-- [交互] 点击清空已选计划，恢复未选择状态 -->
|
||||
<button class="search-select__clear" id="planClearBtn" onclick="clearPlan()" title="清空计划">×</button>
|
||||
<div class="search-select__panel" id="planPanel"></div>
|
||||
@@ -248,7 +248,7 @@ tbody tr:hover td:nth-child(3){background:#F8FBFF;}
|
||||
</div>
|
||||
<div class="plan-selector__right" id="planInfo" style="display:none;">
|
||||
<div class="plan-info-item">
|
||||
<span class="plan-info-item__label">组织单位</span>
|
||||
<span class="plan-info-item__label">组织机构</span>
|
||||
<span class="plan-info-item__value" id="piOrg">-</span>
|
||||
</div>
|
||||
<div class="plan-info-item">
|
||||
|
||||
@@ -271,7 +271,7 @@ tbody tr:hover .td-actions{background:#F8FBFF;}
|
||||
<div class="plan-selector__left">
|
||||
<div class="plan-selector__label">干预计划</div>
|
||||
<div class="search-select" id="planSelect">
|
||||
<input class="search-select__input" id="planSearchInput" placeholder="搜索计划名称或组织单位" oninput="searchPlan()" onfocus="showPlanPanel()" autocomplete="off">
|
||||
<input class="search-select__input" id="planSearchInput" placeholder="搜索计划名称或组织机构" oninput="searchPlan()" onfocus="showPlanPanel()" autocomplete="off">
|
||||
<!-- [交互] 点击清空已选计划，恢复未选择状态 -->
|
||||
<button class="search-select__clear" id="planClearBtn" onclick="clearPlan()" title="清空计划">×</button>
|
||||
<div class="search-select__panel" id="planPanel"></div>
|
||||
@@ -282,7 +282,7 @@ tbody tr:hover .td-actions{background:#F8FBFF;}
|
||||
可选择干预计划进行查看
|
||||
</div>
|
||||
<div class="plan-selector__right" id="planInfo" style="display:none;">
|
||||
<div class="plan-info-item"><span class="plan-info-item__label">组织单位</span><span class="plan-info-item__value" id="piOrg">-</span></div>
|
||||
<div class="plan-info-item"><span class="plan-info-item__label">组织机构</span><span class="plan-info-item__value" id="piOrg">-</span></div>
|
||||
<div class="plan-info-item"><span class="plan-info-item__label">起止日期</span><span class="plan-info-item__value" id="piDate">-</span></div>
|
||||
<div class="plan-info-item"><span class="plan-info-item__label">进行天数</span><span class="plan-info-item__value" id="piDays">-</span></div>
|
||||
<div class="plan-info-item"><span class="plan-info-item__label">应参加人数</span><span class="plan-info-item__value"><strong id="piCount">-</strong></span></div>
|
||||
|
||||
@@ -286,7 +286,7 @@ tbody tr:hover{background:#F8FBFF;}
|
||||
<div class="plan-selector__left">
|
||||
<div class="plan-selector__label">干预计划</div>
|
||||
<div class="search-select" id="planSelect">
|
||||
<input class="search-select__input" id="planSearchInput" placeholder="搜索计划名称或组织单位" oninput="searchPlan()" onfocus="showPlanPanel()" autocomplete="off">
|
||||
<input class="search-select__input" id="planSearchInput" placeholder="搜索计划名称或组织机构" oninput="searchPlan()" onfocus="showPlanPanel()" autocomplete="off">
|
||||
<!-- [交互] 点击清空已选计划，恢复未选择状态 -->
|
||||
<button class="search-select__clear" id="planClearBtn" onclick="clearPlan()" title="清空计划">×</button>
|
||||
<div class="search-select__panel" id="planPanel"></div>
|
||||
@@ -299,7 +299,7 @@ tbody tr:hover{background:#F8FBFF;}
|
||||
</div>
|
||||
<div class="plan-selector__right" id="planInfo" style="display:none;">
|
||||
<div class="plan-info-item">
|
||||
<span class="plan-info-item__label">组织单位</span>
|
||||
<span class="plan-info-item__label">组织机构</span>
|
||||
<span class="plan-info-item__value" id="piOrg">-</span>
|
||||
</div>
|
||||
<div class="plan-info-item">
|
||||
@@ -755,7 +755,7 @@ function searchPlan(){
|
||||
var sel = selectedPlanId === p.id ? ' selected' : '';
|
||||
html += '<div class="search-select__option'+sel+'" onclick="selectPlan('+p.id+')">';
|
||||
html += '<div style="font-weight:500;">'+esc(p.name)+'</div>';
|
||||
html += '<div class="ss-org">'+esc(p.org)+' | '+p.dateFrom+' ~ '+p.dateTo+' | 应参加 '+p.totalCount+' 人</div>';
|
||||
html += '<div class="ss-org">'+esc(p.org)+' | '+p.dateFrom+' ~ '+p.dateTo+'</div>';
|
||||
html += '</div>';
|
||||
});
|
||||
panel.innerHTML = html;
|
||||
@@ -1256,7 +1256,7 @@ document.addEventListener('click',function(e){
|
||||
plans.forEach(function(p){
|
||||
html += '<div class="search-select__option" onclick="selectPlan('+p.id+')">';
|
||||
html += '<div style="font-weight:500;">'+esc(p.name)+'</div>';
|
||||
html += '<div class="ss-org">'+esc(p.org)+' | '+p.dateFrom+' ~ '+p.dateTo+' | 应参加 '+p.totalCount+' 人</div>';
|
||||
html += '<div class="ss-org">'+esc(p.org)+' | '+p.dateFrom+' ~ '+p.dateTo+'</div>';
|
||||
html += '</div>';
|
||||
});
|
||||
document.getElementById('planPanel').innerHTML = html;
|
||||
|
||||
Reference in New Issue
Block a user