fix: 更新体重管理相关页面，新增归档单位报告详情页
This commit is contained in:
liuyunqin
@@ -323,7 +323,60 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
|
||||
.video-card__author-overlay { position: absolute; bottom: 4px; left: 6px; font-size: 10px; color: #fff; font-weight: 600; text-shadow: 0 1px 3px rgba(0,0,0,0.5); }
|
||||
.video-card__info { padding: 8px 10px 10px; }
|
||||
.video-card__title { font-size: 13px; font-weight: 600; color: #1a1a1a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||||
.video-card__org { font-size: 10px; color: #bbb; margin-top: 3px; }
|
||||
.video-card__org { font-size: 10px; color: #bbb; margin-top: 3px; }
|
||||
|
||||
/* ===== 本月吃动：日历导航 ===== */
|
||||
.cal-nav { display: flex; align-items: center; justify-content: space-between; padding: 6px 0 4px; }
|
||||
.cal-nav__arrow { width: 26px; height: 26px; border-radius: 50%; background: #f7f8fa; display: flex; align-items: center; justify-content: center; cursor: pointer; border: none; }
|
||||
.cal-nav__arrow svg { width: 14px; height: 14px; stroke: #333; }
|
||||
.cal-nav__month { font-size: 14px; font-weight: 700; color: #1a1a1a; }
|
||||
|
||||
/* ===== 本月吃动：日历 ===== */
|
||||
.cal-grid { padding: 0 0 8px; }
|
||||
.cal-grid__wd { display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: 3px; }
|
||||
.cal-grid__wd span { font-size: 10px; color: #999; text-align: center; }
|
||||
.cal-grid__days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
|
||||
.cal-day { display: flex; flex-direction: column; align-items: center; padding: 1px 0 2px; border-radius: 6px; cursor: pointer; min-height: 34px; }
|
||||
.cal-day:hover { background: #f0f8f8; }
|
||||
.cal-day.today { background: #e8f8f7; }
|
||||
.cal-day.sel { background: #e8f8f7; border: 1.5px solid #36cfc9; }
|
||||
.cal-day__num { font-size: 12px; font-weight: 700; color: #333; line-height: 1.2; }
|
||||
.cal-day.today .cal-day__num, .cal-day.sel .cal-day__num { color: #36cfc9; }
|
||||
.cal-day--empty { min-height: 34px; }
|
||||
|
||||
.cal-ring-wrap { display: flex; align-items: center; justify-content: center; margin-top: 2px; width: 24px; height: 24px; position: relative; }
|
||||
.cal-ring--o { position: absolute; width: 21px; height: 21px; }
|
||||
.cal-ring--o svg { width: 100%; height: 100%; }
|
||||
.cal-ring--i { position: absolute; width: 14px; height: 14px; }
|
||||
.cal-ring--i svg { width: 100%; height: 100%; }
|
||||
|
||||
.cal-day-diff { font-size: 7px; color: #bbb; margin-top: 0; text-align: center; line-height: 1.2; }
|
||||
.cal-day-diff span:first-child { color: #36cfc9; }
|
||||
|
||||
/* ===== 本月吃动：柱状图 ===== */
|
||||
.bar-section { padding: 8px 0 4px; }
|
||||
.bar-section__title { font-size: 13px; font-weight: 700; color: #1a1a1a; margin-bottom: 6px; padding-left: 2px; }
|
||||
.bar-area { position: relative; width: 100%; height: 200px; }
|
||||
.bar-area svg { width: 100%; height: 100%; display: block; }
|
||||
.bar-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; }
|
||||
.bar-hit { position: absolute; pointer-events: auto; cursor: pointer; border-radius: 3px 3px 0 0; }
|
||||
.bar-hit:hover { opacity: 0.85; }
|
||||
.bar-legend { display: flex; justify-content: center; gap: 14px; margin-top: 6px; }
|
||||
.bar-legend__item { display: flex; align-items: center; gap: 4px; font-size: 11px; color: #666; }
|
||||
.bar-legend__sw { width: 10px; height: 7px; border-radius: 2px; flex-shrink: 0; }
|
||||
.bar-legend__sw--in { background: #5470c6; }
|
||||
.bar-legend__sw--ex { background: #fac858; }
|
||||
|
||||
/* 本月吃动 Tooltip */
|
||||
.balance-tip { display: none; position: absolute; background: rgba(30,30,30,0.9); color: #fff; border-radius: 10px; padding: 10px 12px; font-size: 11px; line-height: 1.7; pointer-events: none; z-index: 10; min-width: 130px; box-shadow: 0 4px 12px rgba(0,0,0,0.2); }
|
||||
.balance-tip::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: rgba(30,30,30,0.9); }
|
||||
.balance-tip__date { font-weight: 700; font-size: 12px; margin-bottom: 4px; }
|
||||
.balance-tip__row { display: flex; justify-content: space-between; }
|
||||
.balance-tip__lbl { color: #ccc; }
|
||||
.balance-tip__val { font-weight: 600; }
|
||||
.balance-tip__val--b { color: #7eb8f7; }
|
||||
.balance-tip__val--y { color: #f7d794; }
|
||||
.balance-tip__div { border-top: 1px solid rgba(255,255,255,0.15); margin: 4px 0; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -349,7 +402,7 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
|
||||
<div class="type-menu" id="typeMenu">
|
||||
<div class="type-menu__item active" data-type="hasact" onclick="setPageType('hasact')">已参加活动</div>
|
||||
<div class="type-menu__item" data-type="personal" onclick="setPageType('personal')">已设置个人目标</div>
|
||||
<div class="type-menu__item" data-type="none" onclick="setPageType('none')">未参加未设置</div>
|
||||
<div class="type-menu__item" data-type="none" onclick="setPageType('none')">未参加未设置未组织</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -643,46 +696,56 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
|
||||
|
||||
<!-- 本月吃动 -->
|
||||
<div class="balance-body" id="balance-monthly" style="display:none;">
|
||||
<div class="calorie-diff">
|
||||
<div class="calorie-diff__label">本月吃动热量差</div>
|
||||
<div class="calorie-diff__val">-12360 千卡</div>
|
||||
<!-- 日历导航 -->
|
||||
<div class="cal-nav">
|
||||
<button class="cal-nav__arrow" onclick="changeMonth(-1)">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"/></svg>
|
||||
</button>
|
||||
<span class="cal-nav__month" id="nav-month">2026年8月</span>
|
||||
<button class="cal-nav__arrow" onclick="changeMonth(1)">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="calorie-hint">本月累计亏空约 1.6 公斤脂肪</div>
|
||||
|
||||
<div class="ring-section">
|
||||
<div class="ring-card">
|
||||
<div class="ring-wrap">
|
||||
<svg viewBox="0 0 100 100">
|
||||
<circle cx="50" cy="50" r="40" fill="none" stroke="#f0f0f0" stroke-width="8"/>
|
||||
<circle cx="50" cy="50" r="40" fill="none" stroke="#5470c6" stroke-width="8" stroke-dasharray="180 251" stroke-linecap="round"/>
|
||||
</svg>
|
||||
<div class="ring-center">
|
||||
<div class="ring-center__val">35620</div>
|
||||
<div class="ring-center__unit">已摄入 千卡</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ring-legend">
|
||||
<div class="ring-legend__item"><span><span class="ring-legend__dot" style="background:#5470c6"></span>碳水</span><span class="ring-legend__val">20300千卡 57%</span></div>
|
||||
<div class="ring-legend__item"><span><span class="ring-legend__dot" style="background:#fac858"></span>脂肪</span><span class="ring-legend__val">9260千卡 26%</span></div>
|
||||
<div class="ring-legend__item"><span><span class="ring-legend__dot" style="background:#ee6666"></span>蛋白质</span><span class="ring-legend__val">6060千卡 17%</span></div>
|
||||
</div>
|
||||
<!-- 日历 -->
|
||||
<div class="cal-grid">
|
||||
<div class="cal-grid__wd">
|
||||
<span>一</span><span>二</span><span>三</span><span>四</span><span>五</span><span>六</span><span>日</span>
|
||||
</div>
|
||||
<div class="ring-card">
|
||||
<div class="ring-wrap">
|
||||
<svg viewBox="0 0 100 100">
|
||||
<circle cx="50" cy="50" r="40" fill="none" stroke="#f0f0f0" stroke-width="8"/>
|
||||
<circle cx="50" cy="50" r="40" fill="none" stroke="#fac858" stroke-width="8" stroke-dasharray="160 251" stroke-linecap="round"/>
|
||||
</svg>
|
||||
<div class="ring-center">
|
||||
<div class="ring-center__val">18560</div>
|
||||
<div class="ring-center__unit">已消耗 千卡</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ring-legend">
|
||||
<div class="ring-legend__item"><span><span class="ring-legend__dot" style="background:#fac858"></span>基础代谢</span><span class="ring-legend__val">12060千卡 65%</span></div>
|
||||
<div class="ring-legend__item"><span><span class="ring-legend__dot" style="background:#7367f0"></span>运动消耗</span><span class="ring-legend__val">3720千卡 20%</span></div>
|
||||
<div class="ring-legend__item"><span><span class="ring-legend__dot" style="background:#b39ddb"></span>步行</span><span class="ring-legend__val">2780千卡 15%</span></div>
|
||||
</div>
|
||||
<div class="cal-grid__days" id="cal-days"></div>
|
||||
</div>
|
||||
|
||||
<!-- 柱状图 -->
|
||||
<div class="bar-section">
|
||||
<div class="bar-section__title">本月吃动趋势</div>
|
||||
<div class="bar-area" id="bar-area">
|
||||
<div class="balance-tip" id="balanceTip"><div class="balance-tip__date"></div><div class="balance-tip__body"></div></div>
|
||||
<svg viewBox="0 0 360 208" preserveAspectRatio="none" id="bar-svg">
|
||||
<defs>
|
||||
<linearGradient id="ig" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#5470c6"/><stop offset="100%" stop-color="#3a56a4"/></linearGradient>
|
||||
<linearGradient id="eg" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#fac858"/><stop offset="100%" stop-color="#e6a817"/></linearGradient>
|
||||
</defs>
|
||||
<!-- Y轴标签 -->
|
||||
<text x="2" y="16" font-size="9" fill="#999">2500</text>
|
||||
<text x="2" y="48" font-size="9" fill="#999">2000</text>
|
||||
<text x="2" y="79" font-size="9" fill="#999">1500</text>
|
||||
<text x="2" y="111" font-size="9" fill="#999">1000</text>
|
||||
<text x="2" y="142" font-size="9" fill="#999">500</text>
|
||||
<!-- Y轴刻度线 -->
|
||||
<line x1="34" y1="12" x2="38" y2="12" stroke="#e0e0e0" stroke-width="1"/>
|
||||
<line x1="34" y1="44" x2="38" y2="44" stroke="#e0e0e0" stroke-width="1"/>
|
||||
<line x1="34" y1="75" x2="38" y2="75" stroke="#e0e0e0" stroke-width="1"/>
|
||||
<line x1="34" y1="107" x2="38" y2="107" stroke="#e0e0e0" stroke-width="1"/>
|
||||
<line x1="34" y1="138" x2="38" y2="138" stroke="#e0e0e0" stroke-width="1"/>
|
||||
<!-- X轴线 (y=170) -->
|
||||
<line x1="38" y1="170" x2="350" y2="170" stroke="#f0f0f0" stroke-width="1"/>
|
||||
<g id="bars"></g>
|
||||
</svg>
|
||||
<div class="bar-overlay" id="bar-overlay"></div>
|
||||
</div>
|
||||
<div class="bar-legend">
|
||||
<div class="bar-legend__item"><div class="bar-legend__sw bar-legend__sw--in"></div><span>摄入</span></div>
|
||||
<div class="bar-legend__item"><div class="bar-legend__sw bar-legend__sw--ex"></div><span>消耗</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -796,16 +859,16 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
|
||||
<circle cx="250" cy="130" r="4" fill="#fff" stroke="#36cfc9" stroke-width="2.5"/>
|
||||
<circle cx="300" cy="154" r="4" fill="#fff" stroke="#36cfc9" stroke-width="2.5"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<!-- HTML 数据点覆盖层（用于点击） -->
|
||||
<div class="chart-dots-overlay">
|
||||
<div class="chart-dot" data-date="02-12" data-weight="73.50" data-x="17.6" data-y="7.6" onclick="showTip(this)" style="left:17.6%;top:7.6%"></div>
|
||||
<div class="chart-dot" data-date="02-15" data-weight="70.00" data-x="29.4" data-y="29.1" onclick="showTip(this)" style="left:29.4%;top:29.1%"></div>
|
||||
<div class="chart-dot" data-date="02-22" data-weight="68.00" data-x="43.5" data-y="50.6" onclick="showTip(this)" style="left:43.5%;top:50.6%"></div>
|
||||
<div class="chart-dot" data-date="03-01" data-weight="66.00" data-x="58.8" data-y="65.8" onclick="showTip(this)" style="left:58.8%;top:65.8%"></div>
|
||||
<div class="chart-dot" data-date="03-13" data-weight="64.00" data-x="73.5" data-y="81.0" onclick="showTip(this)" style="left:73.5%;top:81.0%"></div>
|
||||
<div class="chart-dot" data-date="03-18" data-weight="62.60" data-x="88.2" data-y="96.2" onclick="showTip(this)" style="left:88.2%;top:96.2%"></div>
|
||||
<!-- HTML 数据点覆盖层（用于点击） -->
|
||||
<div class="chart-dots-overlay">
|
||||
<div class="chart-dot" data-date="02-12" data-weight="73.50" data-x="17.6" data-y="7.6" onclick="showTip(this)" style="left:17.6%;top:7.6%"></div>
|
||||
<div class="chart-dot" data-date="02-15" data-weight="70.00" data-x="29.4" data-y="29.1" onclick="showTip(this)" style="left:29.4%;top:29.1%"></div>
|
||||
<div class="chart-dot" data-date="02-22" data-weight="68.00" data-x="43.5" data-y="50.6" onclick="showTip(this)" style="left:43.5%;top:50.6%"></div>
|
||||
<div class="chart-dot" data-date="03-01" data-weight="66.00" data-x="58.8" data-y="65.8" onclick="showTip(this)" style="left:58.8%;top:65.8%"></div>
|
||||
<div class="chart-dot" data-date="03-13" data-weight="64.00" data-x="73.5" data-y="81.0" onclick="showTip(this)" style="left:73.5%;top:81.0%"></div>
|
||||
<div class="chart-dot" data-date="03-18" data-weight="62.60" data-x="88.2" data-y="96.2" onclick="showTip(this)" style="left:88.2%;top:96.2%"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 图例 -->
|
||||
@@ -835,12 +898,10 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
|
||||
<div class="stat-item">
|
||||
<div class="stat-item__label">最大体脂</div>
|
||||
<div class="stat-item__val">28.5<span class="stat-item__unit">%</span></div>
|
||||
<div class="stat-item__sub">02-12</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-item__label">最小体脂</div>
|
||||
<div class="stat-item__val">20.0<span class="stat-item__unit">%</span></div>
|
||||
<div class="stat-item__sub">03-18</div>
|
||||
</div>
|
||||
<div class="stat-item stat-item--change">
|
||||
<div class="stat-item__label">体脂变化</div>
|
||||
@@ -912,16 +973,16 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
|
||||
<circle cx="250" cy="130" r="4" fill="#fff" stroke="#36cfc9" stroke-width="2.5"/>
|
||||
<circle cx="300" cy="144" r="4" fill="#fff" stroke="#36cfc9" stroke-width="2.5"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<!-- HTML 数据点覆盖层 -->
|
||||
<div class="chart-dots-overlay">
|
||||
<div class="chart-dot" data-date="02-12" data-weight="28.50" data-x="17.6" data-y="13.3" onclick="showFatTip(this)" style="left:17.6%;top:13.3%"></div>
|
||||
<div class="chart-dot" data-date="02-15" data-weight="25.00" data-x="29.4" data-y="35.6" onclick="showFatTip(this)" style="left:29.4%;top:35.6%"></div>
|
||||
<div class="chart-dot" data-date="02-22" data-weight="22.70" data-x="43.5" data-y="54.4" onclick="showFatTip(this)" style="left:43.5%;top:54.4%"></div>
|
||||
<div class="chart-dot" data-date="03-01" data-weight="21.50" data-x="58.8" data-y="63.1" onclick="showFatTip(this)" style="left:58.8%;top:63.1%"></div>
|
||||
<div class="chart-dot" data-date="03-13" data-weight="20.70" data-x="73.5" data-y="72.2" onclick="showFatTip(this)" style="left:73.5%;top:72.2%"></div>
|
||||
<div class="chart-dot" data-date="03-18" data-weight="20.00" data-x="88.2" data-y="80.0" onclick="showFatTip(this)" style="left:88.2%;top:80.0%"></div>
|
||||
<!-- HTML 数据点覆盖层 -->
|
||||
<div class="chart-dots-overlay">
|
||||
<div class="chart-dot" data-date="02-12" data-weight="28.50" data-x="17.6" data-y="13.3" onclick="showFatTip(this)" style="left:17.6%;top:13.3%"></div>
|
||||
<div class="chart-dot" data-date="02-15" data-weight="25.00" data-x="29.4" data-y="35.6" onclick="showFatTip(this)" style="left:29.4%;top:35.6%"></div>
|
||||
<div class="chart-dot" data-date="02-22" data-weight="22.70" data-x="43.5" data-y="54.4" onclick="showFatTip(this)" style="left:43.5%;top:54.4%"></div>
|
||||
<div class="chart-dot" data-date="03-01" data-weight="21.50" data-x="58.8" data-y="63.1" onclick="showFatTip(this)" style="left:58.8%;top:63.1%"></div>
|
||||
<div class="chart-dot" data-date="03-13" data-weight="20.70" data-x="73.5" data-y="72.2" onclick="showFatTip(this)" style="left:73.5%;top:72.2%"></div>
|
||||
<div class="chart-dot" data-date="03-18" data-weight="20.00" data-x="88.2" data-y="80.0" onclick="showFatTip(this)" style="left:88.2%;top:80.0%"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 图例 -->
|
||||
@@ -951,12 +1012,10 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
|
||||
<div class="stat-item">
|
||||
<div class="stat-item__label">最大腰围</div>
|
||||
<div class="stat-item__val">92.0<span class="stat-item__unit">cm</span></div>
|
||||
<div class="stat-item__sub">02-12</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-item__label">最小腰围</div>
|
||||
<div class="stat-item__val">76.5<span class="stat-item__unit">cm</span></div>
|
||||
<div class="stat-item__sub">03-18</div>
|
||||
</div>
|
||||
<div class="stat-item stat-item--change">
|
||||
<div class="stat-item__label">腰围变化</div>
|
||||
@@ -1032,16 +1091,16 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
|
||||
<circle cx="250" cy="128" r="4" fill="#fff" stroke="#36cfc9" stroke-width="2.5"/>
|
||||
<circle cx="300" cy="143" r="4" fill="#fff" stroke="#36cfc9" stroke-width="2.5"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<!-- HTML 数据点覆盖层 -->
|
||||
<div class="chart-dots-overlay">
|
||||
<div class="chart-dot" data-date="02-12" data-weight="92.00" data-x="17.6" data-y="16.7" onclick="showWaistTip(this)" style="left:17.6%;top:16.7%"></div>
|
||||
<div class="chart-dot" data-date="02-15" data-weight="87.00" data-x="29.4" data-y="37.8" onclick="showWaistTip(this)" style="left:29.4%;top:37.8%"></div>
|
||||
<div class="chart-dot" data-date="02-22" data-weight="83.00" data-x="43.5" data-y="51.1" onclick="showWaistTip(this)" style="left:43.5%;top:51.1%"></div>
|
||||
<div class="chart-dot" data-date="03-01" data-weight="80.50" data-x="58.8" data-y="61.1" onclick="showWaistTip(this)" style="left:58.8%;top:61.1%"></div>
|
||||
<div class="chart-dot" data-date="03-13" data-weight="78.00" data-x="73.5" data-y="71.1" onclick="showWaistTip(this)" style="left:73.5%;top:71.1%"></div>
|
||||
<div class="chart-dot" data-date="03-18" data-weight="76.50" data-x="88.2" data-y="79.4" onclick="showWaistTip(this)" style="left:88.2%;top:79.4%"></div>
|
||||
<!-- HTML 数据点覆盖层 -->
|
||||
<div class="chart-dots-overlay">
|
||||
<div class="chart-dot" data-date="02-12" data-weight="92.00" data-x="17.6" data-y="16.7" onclick="showWaistTip(this)" style="left:17.6%;top:16.7%"></div>
|
||||
<div class="chart-dot" data-date="02-15" data-weight="87.00" data-x="29.4" data-y="37.8" onclick="showWaistTip(this)" style="left:29.4%;top:37.8%"></div>
|
||||
<div class="chart-dot" data-date="02-22" data-weight="83.00" data-x="43.5" data-y="51.1" onclick="showWaistTip(this)" style="left:43.5%;top:51.1%"></div>
|
||||
<div class="chart-dot" data-date="03-01" data-weight="80.50" data-x="58.8" data-y="61.1" onclick="showWaistTip(this)" style="left:58.8%;top:61.1%"></div>
|
||||
<div class="chart-dot" data-date="03-13" data-weight="78.00" data-x="73.5" data-y="71.1" onclick="showWaistTip(this)" style="left:73.5%;top:71.1%"></div>
|
||||
<div class="chart-dot" data-date="03-18" data-weight="76.50" data-x="88.2" data-y="79.4" onclick="showWaistTip(this)" style="left:88.2%;top:79.4%"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 图例 -->
|
||||
@@ -1068,7 +1127,7 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
|
||||
<div class="dash-grid__left">
|
||||
<!-- 正常排行榜（已参加活动） -->
|
||||
<!-- [交互] 点击跳转至: weight-ranking.html -->
|
||||
<div class="rank-card" id="rankCardNormal" onclick="location.href='weight-ranking.html'">
|
||||
<div class="rank-card" id="rankCardNormal" onclick="location.href='weight-ranking.html?type=' + currentPageType">
|
||||
<div class="rank-card__title">2026年二季度体重管理活动</div>
|
||||
<div class="rank-card__my">
|
||||
<span class="rank-card__my-label">减重排名</span>
|
||||
@@ -1124,11 +1183,11 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
|
||||
</div>
|
||||
</div>
|
||||
<!-- 排行榜缺省占位（已设置个人目标 / 未参加未设置） -->
|
||||
<div class="rank-card rank-card--empty" id="rankCardEmpty" style="display:none;">
|
||||
<div class="rank-card rank-card--empty" id="rankCardEmpty" style="display:none; cursor:pointer;" onclick="location.href='weight-ranking.html?type=none'">
|
||||
<div class="rank-card--empty__icon">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20V10"/><path d="M18 20V4"/><path d="M6 20v-4"/></svg>
|
||||
</div>
|
||||
<div class="rank-card--empty__text">暂未参加活动<br>暂无排行榜数据</div>
|
||||
<div class="rank-card--empty__text">排行榜示意图</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1249,6 +1308,7 @@ function applyPageType(type) {
|
||||
var progressCard = document.querySelector('.progress-card');
|
||||
var rankCardNormal = document.getElementById('rankCardNormal');
|
||||
var rankCardEmpty = document.getElementById('rankCardEmpty');
|
||||
var rankMy = rankCardNormal ? rankCardNormal.querySelector('.rank-card__my') : null;
|
||||
|
||||
// 菜单项高亮
|
||||
document.querySelectorAll('.type-menu__item').forEach(function(item) {
|
||||
@@ -1261,12 +1321,14 @@ function applyPageType(type) {
|
||||
if (progressCard) progressCard.style.display = '';
|
||||
if (rankCardNormal) rankCardNormal.style.display = '';
|
||||
if (rankCardEmpty) rankCardEmpty.style.display = 'none';
|
||||
if (rankMy) rankMy.style.display = '';
|
||||
} else if (type === 'personal') {
|
||||
// 已设置个人目标：隐藏排名副标题，排行榜改为缺省样式
|
||||
// 已设置个人目标：照搬活动排行榜，但隐藏自己的排名
|
||||
if (rankSubBar) rankSubBar.style.display = 'none';
|
||||
if (progressCard) progressCard.style.display = '';
|
||||
if (rankCardNormal) rankCardNormal.style.display = 'none';
|
||||
if (rankCardEmpty) rankCardEmpty.style.display = '';
|
||||
if (rankCardNormal) rankCardNormal.style.display = '';
|
||||
if (rankCardEmpty) rankCardEmpty.style.display = 'none';
|
||||
if (rankMy) rankMy.style.display = 'none';
|
||||
} else if (type === 'none') {
|
||||
// 未参加未设置：隐藏排名副标题，隐藏减重进度卡片，排行榜改为缺省样式
|
||||
if (rankSubBar) rankSubBar.style.display = 'none';
|
||||
@@ -1277,11 +1339,13 @@ function applyPageType(type) {
|
||||
}
|
||||
applyPageType(currentPageType);
|
||||
|
||||
var balanceMonthlyInited = false;
|
||||
function switchBalanceTab(el, tab) {
|
||||
el.parentElement.querySelectorAll('.balance-tab').forEach(t => t.classList.remove('active'));
|
||||
el.classList.add('active');
|
||||
document.getElementById('balance-daily').style.display = tab === 'daily' ? '' : 'none';
|
||||
document.getElementById('balance-monthly').style.display = tab === 'monthly' ? '' : 'none';
|
||||
if (tab === 'monthly' && !balanceMonthlyInited) { balanceMonthlyInited = true; renderCal(); renderBars(); }
|
||||
}
|
||||
function switchRecordTab(el, tab) {
|
||||
el.parentElement.querySelectorAll('.record-tab').forEach(t => t.classList.remove('active'));
|
||||
@@ -1292,8 +1356,8 @@ function switchRecordTab(el, tab) {
|
||||
}
|
||||
// 折线图数据点 tooltip — 体重
|
||||
function showTip(el) {
|
||||
var area = document.getElementById('chart-area');
|
||||
var tip = document.getElementById('chart-tooltip');
|
||||
if (!tip) return;
|
||||
var date = el.getAttribute('data-date');
|
||||
var weight = el.getAttribute('data-weight');
|
||||
tip.querySelector('.chart-tooltip__date').textContent = date;
|
||||
@@ -1302,13 +1366,13 @@ function showTip(el) {
|
||||
var x = parseFloat(el.getAttribute('data-x'));
|
||||
var y = parseFloat(el.getAttribute('data-y'));
|
||||
tip.style.left = x + '%';
|
||||
tip.style.top = '0px';
|
||||
tip.style.transform = 'translateX(-50%) translateY(-100%)';
|
||||
tip.style.top = y + '%';
|
||||
tip.style.transform = 'translate(-50%, -120%)';
|
||||
}
|
||||
// 折线图数据点 tooltip — 体脂
|
||||
function showFatTip(el) {
|
||||
var area = document.getElementById('chart-area-fat');
|
||||
var tip = document.getElementById('chart-tooltip-fat');
|
||||
if (!tip) return;
|
||||
var date = el.getAttribute('data-date');
|
||||
var weight = el.getAttribute('data-weight');
|
||||
tip.querySelector('.chart-tooltip__date').textContent = date;
|
||||
@@ -1317,13 +1381,13 @@ function showFatTip(el) {
|
||||
var x = parseFloat(el.getAttribute('data-x'));
|
||||
var y = parseFloat(el.getAttribute('data-y'));
|
||||
tip.style.left = x + '%';
|
||||
tip.style.top = '0px';
|
||||
tip.style.transform = 'translateX(-50%) translateY(-100%)';
|
||||
tip.style.top = y + '%';
|
||||
tip.style.transform = 'translate(-50%, -120%)';
|
||||
}
|
||||
// 折线图数据点 tooltip — 腰围
|
||||
function showWaistTip(el) {
|
||||
var area = document.getElementById('chart-area-waist');
|
||||
var tip = document.getElementById('chart-tooltip-waist');
|
||||
if (!tip) return;
|
||||
var date = el.getAttribute('data-date');
|
||||
var weight = el.getAttribute('data-weight');
|
||||
tip.querySelector('.chart-tooltip__date').textContent = date;
|
||||
@@ -1332,8 +1396,8 @@ function showWaistTip(el) {
|
||||
var x = parseFloat(el.getAttribute('data-x'));
|
||||
var y = parseFloat(el.getAttribute('data-y'));
|
||||
tip.style.left = x + '%';
|
||||
tip.style.top = '0px';
|
||||
tip.style.transform = 'translateX(-50%) translateY(-100%)';
|
||||
tip.style.top = y + '%';
|
||||
tip.style.transform = 'translate(-50%, -120%)';
|
||||
}
|
||||
// 点击图表空白区域关闭 tooltip
|
||||
document.addEventListener('click', function(e) {
|
||||
@@ -1347,7 +1411,168 @@ document.addEventListener('click', function(e) {
|
||||
tip.style.display = 'none';
|
||||
}
|
||||
});
|
||||
// 同时关闭本月吃动 tooltip
|
||||
var balanceTip = document.getElementById('balanceTip');
|
||||
if (balanceTip && !e.target.closest('.bar-hit') && !e.target.closest('.balance-tip')) {
|
||||
balanceTip.style.display = 'none';
|
||||
}
|
||||
});
|
||||
|
||||
/* ===== 本月吃动 Tab 逻辑 ===== */
|
||||
var currentYear = 2026, currentMonth = 8, selectedDay = null;
|
||||
var dayData = {};
|
||||
var balanceMock = [
|
||||
{d:1,i:1920,e:1680,c:1100,f:490,p:330,bf:520,l:820,dn:580,ba:1100,s:320,w:260},
|
||||
{d:2,i:2100,e:1750,c:1200,f:540,p:360,bf:580,l:900,dn:620,ba:1120,s:350,w:280},
|
||||
{d:3,i:1850,e:1920,c:1050,f:470,p:330,bf:480,l:780,dn:590,ba:1130,s:480,w:310},
|
||||
{d:4,i:2050,e:1700,c:1160,f:520,p:370,bf:550,l:870,dn:630,ba:1110,s:310,w:280},
|
||||
{d:5,i:1780,e:1850,c:1010,f:450,p:320,bf:460,l:750,dn:570,ba:1140,s:420,w:290},
|
||||
{d:6,i:2200,e:1600,c:1260,f:560,p:380,bf:620,l:940,dn:640,ba:1100,s:260,w:240},
|
||||
{d:7,i:1950,e:1780,c:1110,f:495,p:345,bf:510,l:830,dn:610,ba:1120,s:360,w:300},
|
||||
{d:8,i:1880,e:1960,c:1070,f:475,p:335,bf:490,l:800,dn:590,ba:1150,s:500,w:310},
|
||||
{d:9,i:1960,e:1720,c:1120,f:500,p:340,bf:530,l:840,dn:590,ba:1110,s:330,w:280},
|
||||
{d:10,i:2080,e:1800,c:1180,f:530,p:370,bf:560,l:890,dn:630,ba:1130,s:370,w:300},
|
||||
{d:11,i:1820,e:1900,c:1030,f:460,p:330,bf:470,l:770,dn:580,ba:1140,s:450,w:310},
|
||||
{d:12,i:1940,e:1760,c:1100,f:490,p:350,bf:520,l:830,dn:590,ba:1120,s:340,w:300},
|
||||
{d:13,i:1900,e:1820,c:1080,f:480,p:340,bf:500,l:810,dn:590,ba:1130,s:380,w:310},
|
||||
];
|
||||
balanceMock.forEach(function(m){
|
||||
dayData['2026-08-'+(m.d<10?'0'+m.d:m.d)] = m;
|
||||
});
|
||||
|
||||
/* 日历渲染 */
|
||||
function renderCal(){
|
||||
var c = document.getElementById('cal-days');
|
||||
if (!c) return;
|
||||
c.innerHTML = '';
|
||||
document.getElementById('nav-month').textContent = currentYear+'年'+currentMonth+'月';
|
||||
var fd = new Date(currentYear, currentMonth-1, 1).getDay();
|
||||
var dim = new Date(currentYear, currentMonth, 0).getDate();
|
||||
var off = fd===0?6:fd-1;
|
||||
var today = new Date();
|
||||
var tk = today.getFullYear()+'-'+String(today.getMonth()+1).padStart(2,'0')+'-'+String(today.getDate()).padStart(2,'0');
|
||||
for(var i=0;i<off;i++){var em=document.createElement('div');em.className='cal-day--empty';c.appendChild(em);}
|
||||
for(var d=1;d<=dim;d++){
|
||||
var dk = currentYear+'-'+String(currentMonth).padStart(2,'0')+'-'+String(d).padStart(2,'0');
|
||||
var data = dayData[dk];
|
||||
var el = document.createElement('div');
|
||||
el.className='cal-day';
|
||||
if(dk===tk) el.classList.add('today');
|
||||
if(selectedDay===d) el.classList.add('sel');
|
||||
el.setAttribute('data-d',d);el.setAttribute('data-k',dk);
|
||||
el.onclick=function(){selDay(+this.getAttribute('data-d'),this.getAttribute('data-k'));};
|
||||
var n=document.createElement('span');n.className='cal-day__num';n.textContent=d;el.appendChild(n);
|
||||
if(data){
|
||||
var ip=Math.min(data.i/2500,1),ep=Math.min(data.e/2500,1);
|
||||
var rw=document.createElement('div');rw.className='cal-ring-wrap';
|
||||
var oo=document.createElement('div');oo.className='cal-ring--o';
|
||||
var cc=2*Math.PI*8;
|
||||
oo.innerHTML='<svg viewBox="0 0 20 20"><circle cx="10" cy="10" r="8" fill="none" stroke="#e0e0e0" stroke-width="2"/><circle cx="10" cy="10" r="8" fill="none" stroke="#5470c6" stroke-width="2" stroke-dasharray="'+(cc*ip).toFixed(1)+' '+ (cc*(1-ip)).toFixed(1)+'" stroke-linecap="round"/></svg>';
|
||||
rw.appendChild(oo);
|
||||
var inn=document.createElement('div');inn.className='cal-ring--i';
|
||||
var cc2=2*Math.PI*8;
|
||||
inn.innerHTML='<svg viewBox="0 0 20 20"><circle cx="10" cy="10" r="8" fill="none" stroke="#e0e0e0" stroke-width="2"/><circle cx="10" cy="10" r="8" fill="none" stroke="#fac858" stroke-width="2" stroke-dasharray="'+(cc2*ep).toFixed(1)+' '+(cc2*(1-ep)).toFixed(1)+'" stroke-linecap="round"/></svg>';
|
||||
rw.appendChild(inn);el.appendChild(rw);
|
||||
var df=document.createElement('div');df.className='cal-day-diff';
|
||||
df.innerHTML='<span style="color:#ff6b81;font-weight:700;">-1520</span><span style="color:#bbb;">/-300</span>';el.appendChild(df);
|
||||
}
|
||||
c.appendChild(el);
|
||||
}
|
||||
}
|
||||
|
||||
function selDay(d,k){
|
||||
selectedDay=d;
|
||||
document.querySelectorAll('#balance-monthly .cal-day').forEach(function(el){el.classList.remove('sel');if(+el.getAttribute('data-d')===d)el.classList.add('sel');});
|
||||
renderBars();
|
||||
var intBar=document.querySelector('#balance-monthly .bar-hit[data-k="'+k+'"]');
|
||||
if(intBar) showBalanceTipIn(intBar);
|
||||
}
|
||||
|
||||
function selectDayFromBar(dk,type){
|
||||
var d=+dk.split("-")[2];
|
||||
selectedDay=d;
|
||||
document.querySelectorAll("#balance-monthly .cal-day").forEach(function(el){el.classList.remove("sel");if(+el.getAttribute("data-d")===d)el.classList.add("sel");});
|
||||
renderBars();
|
||||
var h=document.querySelector('#balance-monthly .bar-hit[data-k="'+dk+'"]');
|
||||
if(h){ if(type==="in")showBalanceTipIn(h); else showBalanceTipEx(h); }
|
||||
}
|
||||
|
||||
function changeMonth(delta){
|
||||
currentMonth+=delta;
|
||||
if(currentMonth>12){currentMonth=1;currentYear++;}
|
||||
if(currentMonth<1){currentMonth=12;currentYear--;}
|
||||
selectedDay=null;renderCal();renderBars();
|
||||
}
|
||||
|
||||
/* 柱状图渲染 */
|
||||
function renderBars(){
|
||||
var g=document.getElementById('bars'),ov=document.getElementById('bar-overlay');
|
||||
if(!g||!ov) return;
|
||||
g.innerHTML='';ov.innerHTML='';
|
||||
var dim=new Date(currentYear,currentMonth,0).getDate();
|
||||
var md=dim;
|
||||
var chartLeft=38, chartRight=350, chartTop=12, chartBot=170;
|
||||
var chartW=chartRight-chartLeft, chartH=chartBot-chartTop;
|
||||
var pairW=chartW/md, gap=3, barW=(pairW-gap)/2;
|
||||
var maxY=2500;
|
||||
for(var d=1;d<=md;d++){
|
||||
var k=currentYear+'-'+String(currentMonth).padStart(2,'0')+'-'+String(d).padStart(2,'0');
|
||||
var data=dayData[k];
|
||||
var xs=chartLeft+(d-1)*pairW, hl=selectedDay===d;
|
||||
if(data){
|
||||
var iH=(data.i/maxY)*chartH, iY=chartTop+chartH-iH;
|
||||
var iX=xs+1, iC=hl?'#5470c6':'url(#ig)';
|
||||
if(hl) g.innerHTML+='<rect x="'+(iX-1)+'" y="'+iY+'" width="'+(barW+2)+'" height="'+iH+'" rx="2" fill="'+iC+'" opacity="0.25"/>';
|
||||
g.innerHTML+='<rect x="'+iX+'" y="'+iY+'" width="'+barW+'" height="'+iH+'" rx="2" fill="'+iC+'"/>';
|
||||
var eH=(data.e/maxY)*chartH, eY=chartTop+chartH-eH;
|
||||
var eX=xs+barW+gap;
|
||||
g.innerHTML+='<rect x="'+eX+'" y="'+eY+'" width="'+barW+'" height="'+eH+'" rx="2" fill="url(#eg)"/>';
|
||||
var lpV=iX/360*100, tpV=iY/208*100, wpV=barW/360*100, hpI=iH/208*100, hpE=eH/208*100;
|
||||
var ih=document.createElement('div');ih.className='bar-hit';
|
||||
ih.style.cssText='left:'+lpV.toFixed(2)+'%;top:'+tpV.toFixed(2)+'%;width:'+wpV.toFixed(2)+'%;height:'+hpI.toFixed(2)+'%;background:'+(hl?'#5470c6':'rgba(84,112,198,0.5)');
|
||||
ih.setAttribute('data-k',k);ih.onclick=function(ev){ev.stopPropagation();var dk=this.getAttribute("data-k");selectDayFromBar(dk,"in");};ov.appendChild(ih);
|
||||
var eh=document.createElement('div');eh.className='bar-hit';
|
||||
var elpV=eX/360*100, etpV=eY/208*100; eh.style.cssText='left:'+elpV.toFixed(2)+'%;top:'+etpV.toFixed(2)+'%;width:'+wpV.toFixed(2)+'%;height:'+hpE.toFixed(2)+'%;background:rgba(250,200,88,0.5)';
|
||||
eh.setAttribute('data-k',k);eh.onclick=function(ev){ev.stopPropagation();var dk=this.getAttribute("data-k");selectDayFromBar(dk,"ex");};ov.appendChild(eh);
|
||||
}
|
||||
var step=md>20?5:md>10?3:1;
|
||||
if(d===1||d%step===0||d===md){
|
||||
var lx=xs+pairW/2;
|
||||
g.innerHTML+='<text x="'+lx+'" y="200" font-size="8" fill="#bbb" text-anchor="middle">'+currentMonth+'/'+d+'</text>';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function showBalanceTip(el,dl,html){
|
||||
var t=document.getElementById('balanceTip');if(!t) return;
|
||||
t.querySelector('.balance-tip__date').textContent=dl;
|
||||
t.querySelector('.balance-tip__body').innerHTML=html;t.style.display='block';
|
||||
t.style.left='50%';t.style.top='2px';t.style.transform='translateX(-50%) translateY(-100%)';
|
||||
setTimeout(function(){document.addEventListener('click',closeBalanceTip,{once:true});},10);
|
||||
}
|
||||
function closeBalanceTip(e){if(!e.target.closest('.bar-hit')&&!e.target.closest('.balance-tip'))document.getElementById('balanceTip').style.display='none';}
|
||||
function showBalanceTipIn(el){
|
||||
var k=el.getAttribute('data-k'),data=dayData[k];if(!data)return;
|
||||
var p=k.split('-');
|
||||
showBalanceTip(el,p[0]+'年'+(+p[1])+'月'+(+p[2])+'日',
|
||||
'<div class="balance-tip__div"></div>'+
|
||||
'<div class="balance-tip__row"><span class="balance-tip__lbl">碳水</span><span class="balance-tip__val balance-tip__val--b">'+data.c+' 千卡</span></div>'+
|
||||
'<div class="balance-tip__row"><span class="balance-tip__lbl">脂肪</span><span class="balance-tip__val balance-tip__val--b">'+data.f+' 千卡</span></div>'+
|
||||
'<div class="balance-tip__row"><span class="balance-tip__lbl">蛋白质</span><span class="balance-tip__val balance-tip__val--b">'+data.p+' 千卡</span></div>'+
|
||||
'<div class="balance-tip__div"></div>'+
|
||||
'<div class="balance-tip__row"><span class="balance-tip__lbl">早餐</span><span class="balance-tip__val">'+data.bf+' 千卡</span></div>'+
|
||||
'<div class="balance-tip__row"><span class="balance-tip__lbl">午餐</span><span class="balance-tip__val">'+data.l+' 千卡</span></div>'+
|
||||
'<div class="balance-tip__row"><span class="balance-tip__lbl">晚餐</span><span class="balance-tip__val">'+data.dn+' 千卡</span></div>');
|
||||
}
|
||||
function showBalanceTipEx(el){
|
||||
var k=el.getAttribute('data-k'),data=dayData[k];if(!data)return;
|
||||
var p=k.split('-');
|
||||
showBalanceTip(el,p[0]+'年'+(+p[1])+'月'+(+p[2])+'日',
|
||||
'<div class="balance-tip__div"></div>'+
|
||||
'<div class="balance-tip__row"><span class="balance-tip__lbl">基础代谢</span><span class="balance-tip__val balance-tip__val--y">'+data.ba+' 千卡</span></div>'+
|
||||
'<div class="balance-tip__row"><span class="balance-tip__lbl">运动消耗</span><span class="balance-tip__val balance-tip__val--y">'+data.s+' 千卡</span></div>'+
|
||||
'<div class="balance-tip__row"><span class="balance-tip__lbl">步行消耗</span><span class="balance-tip__val balance-tip__val--y">'+data.w+' 千卡</span></div>');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -83,6 +83,10 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
|
||||
.rank-item__extra { width: 42px; text-align: right; flex-shrink: 0; font-size: 12px; color: #999; }
|
||||
|
||||
.bottom-safe { height: 20px; flex-shrink: 0; }
|
||||
|
||||
/* ===== 未组织活动提示条 ===== */
|
||||
.no-org-notice { display: none; background: #fff7e6; border-bottom: 1px solid #ffe58f; padding: 10px 16px; text-align: center; font-size: 13px; color: #d48806; font-weight: 600; }
|
||||
.no-org-notice.show { display: block; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -107,6 +111,9 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
|
||||
<div class="nav-placeholder"></div>
|
||||
</div>
|
||||
|
||||
<!-- 未组织活动提示 -->
|
||||
<div class="no-org-notice" id="noOrgNotice">单位暂未组织活动</div>
|
||||
|
||||
<div class="scroll-content">
|
||||
<!-- 活动标题 -->
|
||||
<div class="activity-header">
|
||||
@@ -270,6 +277,12 @@ function switchRankTab(tab) {
|
||||
// 更新列表头
|
||||
document.getElementById('rankListHeaderScore').textContent = rankHeaderLabels[tab];
|
||||
|
||||
if (isNoOrg) {
|
||||
// 未组织活动：列表为空
|
||||
document.getElementById('rankList').innerHTML = '';
|
||||
return;
|
||||
}
|
||||
|
||||
// 更新个人排名卡片
|
||||
var my = myInfoMap[tab];
|
||||
document.getElementById('myRankNum').textContent = my.rank;
|
||||
@@ -315,6 +328,29 @@ function renderRankList(data) {
|
||||
document.getElementById('rankList').innerHTML = html;
|
||||
}
|
||||
|
||||
/* 根据 type 参数处理页面状态 */
|
||||
var isNoOrg = false;
|
||||
(function(){
|
||||
var params = new URLSearchParams(location.search);
|
||||
var type = params.get('type') || 'hasact';
|
||||
|
||||
if (type === 'none') {
|
||||
// 未组织活动：提示 + 隐藏活动标题和我的排名 + 列表为空
|
||||
isNoOrg = true;
|
||||
var notice = document.getElementById('noOrgNotice');
|
||||
var header = document.querySelector('.activity-header');
|
||||
var myCard = document.getElementById('myRankCard');
|
||||
if (notice) notice.classList.add('show');
|
||||
if (header) header.style.display = 'none';
|
||||
if (myCard) myCard.style.display = 'none';
|
||||
} else if (type === 'personal') {
|
||||
// 已设置个人目标：仅隐藏我的排名卡片
|
||||
var myCard = document.getElementById('myRankCard');
|
||||
if (myCard) myCard.style.display = 'none';
|
||||
}
|
||||
// type === 'hasact'：全部正常显示
|
||||
})();
|
||||
|
||||
/* 初始化：默认显示减重量 tab */
|
||||
switchRankTab('weight');
|
||||
</script>
|
||||
|
||||
@@ -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