wangyuan/moboos-ad-report
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add custom date-range calendar picker in performance filters

Browse Source
This commit is contained in:
王源
2026-09-10 14:40:53 +08:00
parent c4d7fdae5f
commit 50e3b1b187
1 changed files with 26 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+26 -3
View File
@@ -160,6 +160,13 @@
<label>按天</label>
<select id="perfDay"><option value="all">全部日期</option></select>
</div>
<div class="control-group">
<label>自定义日期</label>
<input type="date" id="perfStart" style="padding:6px 10px;border:1px solid #d1d5db;border-radius:8px;font-size:13px;color:#374151;">
<span style="color:#9ca3af;">～</span>
<input type="date" id="perfEnd" style="padding:6px 10px;border:1px solid #d1d5db;border-radius:8px;font-size:13px;color:#374151;">
<button id="perfDateReset" style="padding:6px 12px;border:1px solid #d1d5db;border-radius:8px;background:#f8fafc;color:#374151;font-size:12px;cursor:pointer;">清除</button>
</div>
</div>
<!-- 模块1：核心指标概览 -->
@@ -364,8 +371,19 @@
fillSelect('perfProduct', [...new Set(perfData.map(d => d.product))].sort());
fillSelect('perfCountry', [...new Set(perfData.map(d => d.location))].filter(x=>x&&x!=='0').sort());
fillSelect('perfDay', [...new Set(perfData.map(d => d.date))].sort().reverse());
['perfChannel','perfProduct','perfCountry','perfRange','perfDay'].forEach(id =>
// 自定义日期选择器：限制可选范围为数据的最小/最大日期
const allD = [...new Set(perfData.map(d => d.date))].sort();
if (allD.length) {
const s = document.getElementById('perfStart'), e = document.getElementById('perfEnd');
s.min = e.min = allD[0]; s.max = e.max = allD[allD.length-1];
}
['perfChannel','perfProduct','perfCountry','perfRange','perfDay','perfStart','perfEnd'].forEach(id =>
document.getElementById(id).addEventListener('change', drawPerf));
document.getElementById('perfDateReset').addEventListener('click', () => {
document.getElementById('perfStart').value = '';
document.getElementById('perfEnd').value = '';
drawPerf();
});
drawPerf();
}
@@ -376,11 +394,16 @@
const co = document.getElementById('perfCountry').value;
const rg = document.getElementById('perfRange').value;
const day = document.getElementById('perfDay').value;
const start = document.getElementById('perfStart').value;
const end = document.getElementById('perfEnd').value;
if (ch !== 'all') d = d.filter(x => x.channel === ch);
if (pr !== 'all') d = d.filter(x => x.product === pr);
if (co !== 'all') d = d.filter(x => x.location === co);
// 选了具体某天则优先按天过滤（覆盖时间范围）；否则用时间范围
if (day !== 'all') {
// 日期过滤优先级：自定义日期区间 > 按天 > 时间范围
if (start || end) {
if (start) d = d.filter(x => x.date >= start);
if (end) d = d.filter(x => x.date <= end);
} else if (day !== 'all') {
d = d.filter(x => x.date === day);
} else if (rg !== 'all') {
const allDates = [...new Set(perfData.map(x => x.date))].sort();