综述: 优化数据分析模块页面结构和功能
- 优化商品分析、客户分析、订单分析三个页面的日期范围筛选功能,统一使用近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">
|
<div class="filter-item">
|
||||||
<label for="dateRange">日期范围:</label>
|
<label for="dateRange">日期范围:</label>
|
||||||
<select id="dateRange">
|
<select id="dateRange">
|
||||||
<option value="today">今天</option>
|
<option value="today">近1天</option>
|
||||||
<option value="yesterday">昨天</option>
|
|
||||||
<option value="week" selected>近7天</option>
|
<option value="week" selected>近7天</option>
|
||||||
<option value="month">近30天</option>
|
<option value="month">近30天</option>
|
||||||
<option value="custom">自定义</option>
|
<option value="custom">自定义</option>
|
||||||
|
|
|
||||||
|
|
@ -323,13 +323,26 @@
|
||||||
<div class="filter-section">
|
<div class="filter-section">
|
||||||
<div class="filter-row">
|
<div class="filter-row">
|
||||||
<div class="filter-item">
|
<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">
|
<input type="date" id="startDate">
|
||||||
<span style="margin: 0 5px;">至</span>
|
<label for="endDate">结束日期:</label>
|
||||||
<input type="date" id="endDate">
|
<input type="date" id="endDate">
|
||||||
</div>
|
</div>
|
||||||
<button class="btn btn-primary" onclick="queryData()">查询</button>
|
<button class="btn btn-primary" onclick="queryData()">
|
||||||
<button class="btn btn-success" onclick="exportData()">导出</button>
|
<span>查询</span>
|
||||||
|
</button>
|
||||||
|
<button class="btn btn-success" onclick="exportData()">
|
||||||
|
<span>导出</span>
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -482,13 +495,6 @@
|
||||||
chartData.push(0);
|
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 = {
|
const chartConfig = {
|
||||||
|
|
@ -624,10 +630,24 @@
|
||||||
options: chartConfig
|
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() {
|
function queryData() {
|
||||||
const startDate = document.getElementById('startDate').value;
|
const dateRange = document.getElementById('dateRange').value;
|
||||||
const endDate = document.getElementById('endDate').value;
|
let startDate, endDate;
|
||||||
|
|
||||||
|
if (dateRange === 'custom') {
|
||||||
|
startDate = document.getElementById('startDate').value;
|
||||||
|
endDate = document.getElementById('endDate').value;
|
||||||
|
|
||||||
if (!startDate || !endDate) {
|
if (!startDate || !endDate) {
|
||||||
showNotification('请选择时间范围', 'error');
|
showNotification('请选择时间范围', 'error');
|
||||||
|
|
@ -638,8 +658,9 @@
|
||||||
showNotification('开始时间不能大于结束时间', 'error');
|
showNotification('开始时间不能大于结束时间', 'error');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
console.log('查询参数:', { startDate, endDate });
|
console.log('查询参数:', { dateRange, startDate, endDate });
|
||||||
|
|
||||||
updateStatsCards();
|
updateStatsCards();
|
||||||
updateCharts();
|
updateCharts();
|
||||||
|
|
@ -649,6 +670,9 @@
|
||||||
|
|
||||||
// 导出数据函数
|
// 导出数据函数
|
||||||
function exportData() {
|
function exportData() {
|
||||||
|
const dateRange = document.getElementById('dateRange').value;
|
||||||
|
|
||||||
|
if (dateRange === 'custom') {
|
||||||
const startDate = document.getElementById('startDate').value;
|
const startDate = document.getElementById('startDate').value;
|
||||||
const endDate = document.getElementById('endDate').value;
|
const endDate = document.getElementById('endDate').value;
|
||||||
|
|
||||||
|
|
@ -656,6 +680,7 @@
|
||||||
showNotification('请选择时间范围', 'error');
|
showNotification('请选择时间范围', 'error');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
console.log('导出数据');
|
console.log('导出数据');
|
||||||
showNotification('数据导出中...', 'info');
|
showNotification('数据导出中...', 'info');
|
||||||
|
|
|
||||||
|
|
@ -210,8 +210,7 @@
|
||||||
<div class="filter-item">
|
<div class="filter-item">
|
||||||
<label for="dateRange">日期范围:</label>
|
<label for="dateRange">日期范围:</label>
|
||||||
<select id="dateRange">
|
<select id="dateRange">
|
||||||
<option value="today">今天</option>
|
<option value="today">近1天</option>
|
||||||
<option value="yesterday">昨天</option>
|
|
||||||
<option value="week" selected>近7天</option>
|
<option value="week" selected>近7天</option>
|
||||||
<option value="month">近30天</option>
|
<option value="month">近30天</option>
|
||||||
<option value="custom">自定义</option>
|
<option value="custom">自定义</option>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue