综述: 优化数据分析模块页面结构和功能

- 优化商品分析、客户分析、订单分析三个页面的日期范围筛选功能,统一使用近1天、近7天、近30天选项
- 完善客户分析页面的自定义日期范围选择逻辑,增加日期范围选择事件监听器
- 优化客户分析页面的数据查询和导出功能,根据选择的日期范围类型处理不同的查询参数
- 移除客户分析页面中多余的默认日期设置代码

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
linbin 2025-09-26 11:33:59 +08:00
parent 11630b9560
commit ce63b00522
3 changed files with 54 additions and 31 deletions

View File

@ -226,8 +226,7 @@
<div class="filter-item">
<label for="dateRange">日期范围:</label>
<select id="dateRange">
<option value="today">今天</option>
<option value="yesterday">昨天</option>
<option value="today">近1天</option>
<option value="week" selected>近7天</option>
<option value="month">近30天</option>
<option value="custom">自定义</option>

View File

@ -323,13 +323,26 @@
<div class="filter-section">
<div class="filter-row">
<div class="filter-item">
<label>时间范围</label>
<label for="dateRange">日期范围:</label>
<select id="dateRange">
<option value="today">近1天</option>
<option value="week" selected>近7天</option>
<option value="month">近30天</option>
<option value="custom">自定义</option>
</select>
</div>
<div class="filter-item" id="customDateRange" style="display: none;">
<label for="startDate">开始日期:</label>
<input type="date" id="startDate">
<span style="margin: 0 5px;"></span>
<label for="endDate">结束日期:</label>
<input type="date" id="endDate">
</div>
<button class="btn btn-primary" onclick="queryData()">查询</button>
<button class="btn btn-success" onclick="exportData()">导出</button>
<button class="btn btn-primary" onclick="queryData()">
<span>查询</span>
</button>
<button class="btn btn-success" onclick="exportData()">
<span>导出</span>
</button>
</div>
</div>
@ -482,13 +495,6 @@
chartData.push(0);
}
// 设置默认日期范围最近30天
const today = new Date();
const thirtyDaysAgo = new Date();
thirtyDaysAgo.setDate(today.getDate() - 30);
document.getElementById('startDate').valueAsDate = thirtyDaysAgo;
document.getElementById('endDate').valueAsDate = today;
// 图表配置
const chartConfig = {
@ -624,10 +630,24 @@
options: chartConfig
});
// 日期范围选择
document.getElementById('dateRange').addEventListener('change', function() {
const customDateRange = document.getElementById('customDateRange');
if (this.value === 'custom') {
customDateRange.style.display = 'flex';
} else {
customDateRange.style.display = 'none';
}
});
// 查询数据函数
function queryData() {
const startDate = document.getElementById('startDate').value;
const endDate = document.getElementById('endDate').value;
const dateRange = document.getElementById('dateRange').value;
let startDate, endDate;
if (dateRange === 'custom') {
startDate = document.getElementById('startDate').value;
endDate = document.getElementById('endDate').value;
if (!startDate || !endDate) {
showNotification('请选择时间范围', 'error');
@ -638,8 +658,9 @@
showNotification('开始时间不能大于结束时间', 'error');
return;
}
}
console.log('查询参数:', { startDate, endDate });
console.log('查询参数:', { dateRange, startDate, endDate });
updateStatsCards();
updateCharts();
@ -649,6 +670,9 @@
// 导出数据函数
function exportData() {
const dateRange = document.getElementById('dateRange').value;
if (dateRange === 'custom') {
const startDate = document.getElementById('startDate').value;
const endDate = document.getElementById('endDate').value;
@ -656,6 +680,7 @@
showNotification('请选择时间范围', 'error');
return;
}
}
console.log('导出数据');
showNotification('数据导出中...', 'info');

View File

@ -210,8 +210,7 @@
<div class="filter-item">
<label for="dateRange">日期范围:</label>
<select id="dateRange">
<option value="today">今天</option>
<option value="yesterday">昨天</option>
<option value="today">近1天</option>
<option value="week" selected>近7天</option>
<option value="month">近30天</option>
<option value="custom">自定义</option>