综述: 优化数据分析模块页面结构和功能
- 优化商品分析、客户分析、订单分析三个页面的日期范围筛选功能，统一使用近1天、近7天、近30天选项 - 完善客户分析页面的自定义日期范围选择逻辑，增加日期范围选择事件监听器 - 优化客户分析页面的数据查询和导出功能，根据选择的日期范围类型处理不同的查询参数 - 移除客户分析页面中多余的默认日期设置代码 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
parent
11630b9560
commit
ce63b00522
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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,22 +630,37 @@
|
|||
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 (!startDate || !endDate) {
|
||||
showNotification('请选择时间范围', 'error');
|
||||
return;
|
||||
if (dateRange === 'custom') {
|
||||
startDate = document.getElementById('startDate').value;
|
||||
endDate = document.getElementById('endDate').value;
|
||||
|
||||
if (!startDate || !endDate) {
|
||||
showNotification('请选择时间范围', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
if (new Date(startDate) > new Date(endDate)) {
|
||||
showNotification('开始时间不能大于结束时间', 'error');
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
if (new Date(startDate) > new Date(endDate)) {
|
||||
showNotification('开始时间不能大于结束时间', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
console.log('查询参数:', { startDate, endDate });
|
||||
console.log('查询参数:', { dateRange, startDate, endDate });
|
||||
|
||||
updateStatsCards();
|
||||
updateCharts();
|
||||
|
|
@ -649,12 +670,16 @@
|
|||
|
||||
// 导出数据函数
|
||||
function exportData() {
|
||||
const startDate = document.getElementById('startDate').value;
|
||||
const endDate = document.getElementById('endDate').value;
|
||||
const dateRange = document.getElementById('dateRange').value;
|
||||
|
||||
if (!startDate || !endDate) {
|
||||
showNotification('请选择时间范围', 'error');
|
||||
return;
|
||||
if (dateRange === 'custom') {
|
||||
const startDate = document.getElementById('startDate').value;
|
||||
const endDate = document.getElementById('endDate').value;
|
||||
|
||||
if (!startDate || !endDate) {
|
||||
showNotification('请选择时间范围', 'error');
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
console.log('导出数据');
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue