494 lines
20 KiB
JavaScript
494 lines
20 KiB
JavaScript
|
// API Endpoint Config (相对路径, 同源部署无需跨域)
|
|||
|
|
const BASE_URL = '/api';
|
|||
|
|
|
|||
|
|
// 数据截止时间缓存
|
|||
|
|
let dataCutoffCache = {};
|
|||
|
|
|
|||
|
|
// ECharts Instances
|
|||
|
|
let trendChart;
|
|||
|
|
let tagChart;
|
|||
|
|
|
|||
|
|
// Initialize when DOM is loaded
|
|||
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|||
|
|
initCharts();
|
|||
|
|
setupNavigation();
|
|||
|
|
|
|||
|
|
// Fetch cutoff dates + initial page data
|
|||
|
|
fetchDataCutoff();
|
|||
|
|
fetchData();
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// Setup SPA Navigation
|
|||
|
|
function setupNavigation() {
|
|||
|
|
const navItems = document.querySelectorAll('.nav-item');
|
|||
|
|
const sections = {
|
|||
|
|
'大盘总览': 'page-overview',
|
|||
|
|
'商品洞察': 'page-product',
|
|||
|
|
'会员画像': 'page-customer',
|
|||
|
|
'订货建议': 'page-advice',
|
|||
|
|
'运维管理': 'page-ops'
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 页面名 → 标题文本 映射
|
|||
|
|
const pageTitles = {
|
|||
|
|
'大盘总览': '经营数据大盘概览',
|
|||
|
|
'商品洞察': '商品洞察分析',
|
|||
|
|
'会员画像': '会员画像分析',
|
|||
|
|
'订货建议': '智能订货建议',
|
|||
|
|
'运维管理': '运维管理'
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 页面名 → 截止日期 key 映射
|
|||
|
|
const cutoffKeys = {
|
|||
|
|
'大盘总览': 'overview',
|
|||
|
|
'商品洞察': 'product',
|
|||
|
|
'会员画像': 'customer',
|
|||
|
|
'订货建议': 'advice'
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
navItems.forEach(item => {
|
|||
|
|
item.addEventListener('click', (e) => {
|
|||
|
|
e.preventDefault();
|
|||
|
|
navItems.forEach(nav => nav.classList.remove('active'));
|
|||
|
|
item.classList.add('active');
|
|||
|
|
|
|||
|
|
const pageTitle = item.textContent.trim();
|
|||
|
|
document.getElementById('page-title').textContent = pageTitles[pageTitle] || pageTitle;
|
|||
|
|
|
|||
|
|
// 更新数据截止日期
|
|||
|
|
const badge = document.getElementById('data-cutoff-badge');
|
|||
|
|
const cutoffKey = cutoffKeys[pageTitle];
|
|||
|
|
if (cutoffKey && dataCutoffCache[cutoffKey]) {
|
|||
|
|
badge.textContent = `计算数据截止至 ${dataCutoffCache[cutoffKey]}`;
|
|||
|
|
badge.style.display = '';
|
|||
|
|
} else if (pageTitle === '运维管理') {
|
|||
|
|
badge.style.display = 'none';
|
|||
|
|
} else {
|
|||
|
|
badge.textContent = '计算数据截止至 —';
|
|||
|
|
badge.style.display = '';
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
document.querySelectorAll('.page-section').forEach(sec => sec.style.display = 'none');
|
|||
|
|
const targetId = sections[pageTitle];
|
|||
|
|
if(targetId) {
|
|||
|
|
document.getElementById(targetId).style.display = 'block';
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
fetchDataForPage(pageTitle);
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Initialize ECharts with premium minimalist styling
|
|||
|
|
function initCharts() {
|
|||
|
|
trendChart = echarts.init(document.getElementById('trendChart'), null, { renderer: 'svg' });
|
|||
|
|
tagChart = echarts.init(document.getElementById('tagChart'), null, { renderer: 'svg' });
|
|||
|
|
|
|||
|
|
// Resize observer to keep chart responsive
|
|||
|
|
window.addEventListener('resize', () => {
|
|||
|
|
trendChart.resize();
|
|||
|
|
tagChart.resize();
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Format currency
|
|||
|
|
function formatCurrency(val) {
|
|||
|
|
if (val === undefined || val === null) return '¥0.00';
|
|||
|
|
return '¥' + parseFloat(val).toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Format percentages
|
|||
|
|
function formatPercent(val) {
|
|||
|
|
if (val === undefined || val === null) return '0%';
|
|||
|
|
return (parseFloat(val) * 100).toFixed(1) + '%';
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Fetch all data for current active page
|
|||
|
|
async function fetchData() {
|
|||
|
|
const activeNav = document.querySelector('.nav-item.active');
|
|||
|
|
if (activeNav) {
|
|||
|
|
await fetchDataForPage(activeNav.textContent.trim());
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async function fetchDataForPage(pageName) {
|
|||
|
|
const btn = document.querySelector('.btn-refresh');
|
|||
|
|
btn.textContent = '加载中...';
|
|||
|
|
btn.classList.add('loading');
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
if (pageName === '大盘总览') {
|
|||
|
|
await Promise.all([fetchOverview(), fetchTrend()]);
|
|||
|
|
} else if (pageName === '商品洞察') {
|
|||
|
|
await Promise.all([fetchRepurchase(), fetchBasket()]);
|
|||
|
|
} else if (pageName === '会员画像') {
|
|||
|
|
await Promise.all([fetchRfm(), fetchTags()]);
|
|||
|
|
// echarts requires explicit resize when un-hidden
|
|||
|
|
setTimeout(() => tagChart.resize(), 100);
|
|||
|
|
} else if (pageName === '订货建议') {
|
|||
|
|
await fetchAdvice();
|
|||
|
|
}
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error("Failed to fetch data:", error);
|
|||
|
|
} finally {
|
|||
|
|
setTimeout(() => {
|
|||
|
|
btn.textContent = '刷新数据';
|
|||
|
|
btn.classList.remove('loading');
|
|||
|
|
}, 500);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ============== DATA CUTOFF ==============
|
|||
|
|
async function fetchDataCutoff() {
|
|||
|
|
try {
|
|||
|
|
const response = await fetch(`${BASE_URL}/dashboard/data-cutoff`);
|
|||
|
|
if (!response.ok) return;
|
|||
|
|
dataCutoffCache = await response.json();
|
|||
|
|
// 更新当前页面的截止日期
|
|||
|
|
const badge = document.getElementById('data-cutoff-badge');
|
|||
|
|
if (dataCutoffCache.overview) {
|
|||
|
|
badge.textContent = `计算数据截止至 ${dataCutoffCache.overview}`;
|
|||
|
|
}
|
|||
|
|
} catch (e) { console.error('fetchDataCutoff error:', e); }
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ============== PAGE 1: OVERVIEW ==============
|
|||
|
|
|
|||
|
|
async function fetchOverview() {
|
|||
|
|
try {
|
|||
|
|
const response = await fetch(`${BASE_URL}/dashboard/overview`);
|
|||
|
|
if (!response.ok) return;
|
|||
|
|
const data = await response.json();
|
|||
|
|
animateValue(document.getElementById('revenue-val'), data.past_14d_revenue || 0, true);
|
|||
|
|
animateValue(document.getElementById('orders-val'), data.past_14d_orders || 0, false);
|
|||
|
|
animateValue(document.getElementById('atv-val'), data.past_14d_atv || 0, true);
|
|||
|
|
animateValue(document.getElementById('refund-val'), data.past_14d_refund || 0, true);
|
|||
|
|
} catch (e) { console.error(e); }
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async function fetchTrend() {
|
|||
|
|
try {
|
|||
|
|
const response = await fetch(`${BASE_URL}/dashboard/trend`);
|
|||
|
|
if (!response.ok) return;
|
|||
|
|
const data = await response.json();
|
|||
|
|
|
|||
|
|
const dates = data.map(item => item.stat_date);
|
|||
|
|
const revenues = data.map(item => parseFloat(item.revenue));
|
|||
|
|
const orders = data.map(item => parseInt(item.order_count));
|
|||
|
|
|
|||
|
|
updateTrendChart(dates, revenues, orders);
|
|||
|
|
} catch (e) { console.error(e); }
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ============== PAGE 2: PRODUCT INSIGHTS ==============
|
|||
|
|
async function fetchRepurchase() {
|
|||
|
|
try {
|
|||
|
|
const response = await fetch(`${BASE_URL}/product/repurchase`);
|
|||
|
|
if (!response.ok) return;
|
|||
|
|
const data = await response.json();
|
|||
|
|
|
|||
|
|
const tbody = document.querySelector('#repurchase-table tbody');
|
|||
|
|
tbody.innerHTML = '';
|
|||
|
|
if(data.length === 0) {
|
|||
|
|
tbody.innerHTML = '<tr><td colspan="5" class="text-center">暂无数据</td></tr>';
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
data.forEach(item => {
|
|||
|
|
const tr = document.createElement('tr');
|
|||
|
|
|
|||
|
|
// Badge color logic
|
|||
|
|
let badgeClass = 'primary';
|
|||
|
|
if(item.matrix_tag === '核心引流爆款') badgeClass = 'success';
|
|||
|
|
if(item.matrix_tag === '体验差需淘汰') badgeClass = 'danger';
|
|||
|
|
if(item.matrix_tag === '小众潜力款') badgeClass = 'warning';
|
|||
|
|
|
|||
|
|
tr.innerHTML = `
|
|||
|
|
<td><strong>${item.item_name || ('商品 '+item.item_id)}</strong></td>
|
|||
|
|
<td>${item.purchaser_count_30d} 人</td>
|
|||
|
|
<td>${item.repurchaser_count_30d} 人</td>
|
|||
|
|
<td>${formatPercent(item.repurchase_rate_30d)}</td>
|
|||
|
|
<td><span class="badge ${badgeClass}">${item.matrix_tag || '-'}</span></td>
|
|||
|
|
`;
|
|||
|
|
tbody.appendChild(tr);
|
|||
|
|
});
|
|||
|
|
} catch (e) {}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async function fetchBasket() {
|
|||
|
|
try {
|
|||
|
|
const response = await fetch(`${BASE_URL}/product/basket`);
|
|||
|
|
if (!response.ok) return;
|
|||
|
|
const data = await response.json();
|
|||
|
|
|
|||
|
|
const tbody = document.querySelector('#basket-table tbody');
|
|||
|
|
tbody.innerHTML = '';
|
|||
|
|
if(data.length === 0) {
|
|||
|
|
tbody.innerHTML = '<tr><td colspan="4" class="text-center">暂无数据</td></tr>';
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
data.forEach(item => {
|
|||
|
|
const tr = document.createElement('tr');
|
|||
|
|
tr.innerHTML = `
|
|||
|
|
<td><strong>${item.item_name_a}</strong></td>
|
|||
|
|
<td>${item.item_name_b}</td>
|
|||
|
|
<td>${item.pair_order_count} 笔</td>
|
|||
|
|
<td><span class="badge primary">${formatPercent(item.confidence)}</span></td>
|
|||
|
|
`;
|
|||
|
|
tbody.appendChild(tr);
|
|||
|
|
});
|
|||
|
|
} catch (e) {}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ============== PAGE 3: CUSTOMER INSIGHTS ==============
|
|||
|
|
async function fetchRfm() {
|
|||
|
|
try {
|
|||
|
|
const response = await fetch(`${BASE_URL}/customer/rfm/distribution`);
|
|||
|
|
if (!response.ok) return;
|
|||
|
|
const data = await response.json();
|
|||
|
|
|
|||
|
|
const container = document.getElementById('rfm-cards');
|
|||
|
|
container.innerHTML = '';
|
|||
|
|
|
|||
|
|
// RFM 分组 → 计算逻辑说明
|
|||
|
|
const rfmTooltips = {
|
|||
|
|
'重要价值客户': 'R(最近消费)高 + F(消费频次)高 + M(消费金额)高, 核心忠实客户',
|
|||
|
|
'重要发展客户': 'R高 + F低 + M高, 消费金额大但频次不够, 需提升复购',
|
|||
|
|
'重要保持客户': 'R低 + F高 + M高, 消费频次和金额都高但最近未消费, 需唤醒',
|
|||
|
|
'重要挽留客户': 'R低 + F低 + M高, 曾经的高价值客户但已流失, 需重点挽回',
|
|||
|
|
'一般价值客户': 'R高 + F高 + M低, 活跃但消费金额偏低',
|
|||
|
|
'一般发展客户': 'R高 + F低 + M低, 新客户/偶发客户, 有发展潜力',
|
|||
|
|
'一般保持客户': 'R低 + F高 + M低, 活跃但金额低且近期未消费',
|
|||
|
|
'一般挽留客户': 'R低 + F低 + M低, 低价值流失客户',
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
data.forEach(item => {
|
|||
|
|
let trendClass = 'neutral';
|
|||
|
|
if(item.rfm_group.includes('重要')) trendClass = 'positive';
|
|||
|
|
if(item.rfm_group.includes('沉睡')) trendClass = 'negative';
|
|||
|
|
|
|||
|
|
const tooltip = rfmTooltips[item.rfm_group] || 'RFM综合打分分群';
|
|||
|
|
const card = document.createElement('div');
|
|||
|
|
card.className = 'glass-card metric-card';
|
|||
|
|
card.innerHTML = `
|
|||
|
|
<h3>${item.rfm_group} <span class="info-icon" data-tooltip="${tooltip}">ⓘ</span></h3>
|
|||
|
|
<div class="value">${item.customer_count} <span style="font-size:1rem;font-weight:400;">人</span></div>
|
|||
|
|
<div class="trend ${trendClass}">营收贡献: ${formatCurrency(item.total_revenue_contribution)}</div>
|
|||
|
|
`;
|
|||
|
|
container.appendChild(card);
|
|||
|
|
});
|
|||
|
|
} catch (e) {}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async function fetchTags() {
|
|||
|
|
try {
|
|||
|
|
const response = await fetch(`${BASE_URL}/customer/tags`);
|
|||
|
|
if (!response.ok) return;
|
|||
|
|
const data = await response.json();
|
|||
|
|
|
|||
|
|
// 标签名 → 定义说明 (鼠标悬浮时显示)
|
|||
|
|
const tagDefs = {
|
|||
|
|
'工作日常客': '90天内周一~周五消费 ≥ 3 次',
|
|||
|
|
'高客单囤货客': '有单笔订单实付 ≥ 200 元',
|
|||
|
|
'周末活跃客': '90天内周六日消费 ≥ 3 次',
|
|||
|
|
'新客户': '首单在近 30 天内',
|
|||
|
|
'沉睡客户': '最近一次消费距今 > 60 天',
|
|||
|
|
'高频复购客': '90天内消费 ≥ 10 次',
|
|||
|
|
'多品类客户': '90天内购买 ≥ 3 种不同商品',
|
|||
|
|
'大额客户': '历史累计消费 ≥ 1000 元',
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const chartData = data.map(item => ({
|
|||
|
|
value: item.tagged_users_count,
|
|||
|
|
name: item.tag_name,
|
|||
|
|
definition: tagDefs[item.tag_name] || ''
|
|||
|
|
}));
|
|||
|
|
|
|||
|
|
updateTagChart(chartData);
|
|||
|
|
} catch(e) {}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ============== PAGE 4: ADVICE ==============
|
|||
|
|
async function fetchAdvice() {
|
|||
|
|
try {
|
|||
|
|
const response = await fetch(`${BASE_URL}/product/advice`);
|
|||
|
|
if (!response.ok) return;
|
|||
|
|
const data = await response.json();
|
|||
|
|
|
|||
|
|
const tbody = document.querySelector('#advice-table tbody');
|
|||
|
|
tbody.innerHTML = '';
|
|||
|
|
if(data.length === 0) {
|
|||
|
|
tbody.innerHTML = '<tr><td colspan="4" class="text-center">近14天数据不足，无法生成建议</td></tr>';
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
data.forEach(item => {
|
|||
|
|
const tr = document.createElement('tr');
|
|||
|
|
tr.innerHTML = `
|
|||
|
|
<td><strong>${item.item_name || item.item_id}</strong></td>
|
|||
|
|
<td>${item.sum_14d} 件</td>
|
|||
|
|
<td>${parseFloat(item.avg_daily_speed).toFixed(2)} 件/天</td>
|
|||
|
|
<td><span class="badge success">备货 ${item.advice_stock_qty} 件</span></td>
|
|||
|
|
`;
|
|||
|
|
tbody.appendChild(tr);
|
|||
|
|
});
|
|||
|
|
} catch (e) {}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ============== CHART UPDATERS & UTILS ==============
|
|||
|
|
function updateTrendChart(dates, revenues, orders) {
|
|||
|
|
const isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
|
|||
|
|
const textColor = isDarkMode ? '#f5f5f7' : '#1d1d1f';
|
|||
|
|
const gridLineColor = isDarkMode ? 'rgba(255, 255, 255, 0.05)' : 'rgba(0, 0, 0, 0.04)';
|
|||
|
|
|
|||
|
|
trendChart.setOption({
|
|||
|
|
tooltip: {
|
|||
|
|
trigger: 'axis',
|
|||
|
|
backgroundColor: isDarkMode ? 'rgba(28, 28, 30, 0.9)' : 'rgba(255, 255, 255, 0.9)',
|
|||
|
|
borderColor: isDarkMode ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)',
|
|||
|
|
textStyle: { color: textColor, fontFamily: 'Inter' },
|
|||
|
|
backdropFilter: 'blur(20px)',
|
|||
|
|
borderRadius: 12, padding: 12
|
|||
|
|
},
|
|||
|
|
legend: { data: ['销售额', '订单数'], textStyle: { color: '#86868b', fontFamily: 'Inter' }, top: 0, right: 0 },
|
|||
|
|
grid: { left: '3%', right: '4%', bottom: '3%', top: '15%', containLabel: true },
|
|||
|
|
xAxis: { type: 'category', boundaryGap: false, data: dates, axisLabel: { color: '#86868b' }, axisLine: { show: false }, axisTick: { show: false } },
|
|||
|
|
yAxis: [
|
|||
|
|
{ type: 'value', name: 'Revenue', splitLine: { lineStyle: { color: gridLineColor, type: 'dashed' } }, axisLabel: { color: '#86868b' } },
|
|||
|
|
{ type: 'value', name: 'Orders', position: 'right', splitLine: { show: false }, axisLabel: { color: '#86868b' } }
|
|||
|
|
],
|
|||
|
|
series: [
|
|||
|
|
{ name: '销售额', type: 'line', smooth: 0.4, symbol: 'none', itemStyle: { color: '#0071e3' }, lineStyle: { width: 3, shadowColor: 'rgba(0, 113, 227, 0.3)', shadowBlur: 10 },
|
|||
|
|
areaStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'rgba(0, 113, 227, 0.2)' }, { offset: 1, color: 'rgba(0, 113, 227, 0)' }]) },
|
|||
|
|
data: revenues },
|
|||
|
|
{ name: '订单数', type: 'line', yAxisIndex: 1, smooth: 0.4, symbol: 'none', itemStyle: { color: '#ff3b30' }, lineStyle: { width: 2, type: 'dashed' }, data: orders }
|
|||
|
|
],
|
|||
|
|
animationDuration: 1500
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function updateTagChart(chartData) {
|
|||
|
|
const isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
|
|||
|
|
const textColor = isDarkMode ? '#f5f5f7' : '#1d1d1f';
|
|||
|
|
|
|||
|
|
tagChart.setOption({
|
|||
|
|
tooltip: {
|
|||
|
|
trigger: 'item',
|
|||
|
|
backgroundColor: isDarkMode ? 'rgba(28, 28, 30, 0.95)' : 'rgba(255, 255, 255, 0.95)',
|
|||
|
|
textStyle: { color: textColor, fontFamily: 'Inter', fontSize: 13 },
|
|||
|
|
borderColor: isDarkMode ? 'rgba(255,255,255,0.08)' : 'rgba(0,0,0,0.06)',
|
|||
|
|
borderRadius: 12, padding: [12, 16],
|
|||
|
|
formatter: function(params) {
|
|||
|
|
const def = params.data.definition;
|
|||
|
|
let html = `<strong style="font-size:14px">${params.name}</strong><br/>`;
|
|||
|
|
html += `人数: <strong>${params.value}</strong> 人 (${params.percent}%)`;
|
|||
|
|
if (def) {
|
|||
|
|
html += `<br/><span style="color:#86868b;font-size:12px">定义: ${def}</span>`;
|
|||
|
|
}
|
|||
|
|
return html;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
legend: { top: 'bottom', textStyle: { color: '#86868b', fontFamily: 'Inter' } },
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
name: '画像人数',
|
|||
|
|
type: 'pie',
|
|||
|
|
radius: ['40%', '70%'],
|
|||
|
|
avoidLabelOverlap: false,
|
|||
|
|
itemStyle: {
|
|||
|
|
borderRadius: 10,
|
|||
|
|
borderColor: isDarkMode ? '#1c1c1e' : '#fff',
|
|||
|
|
borderWidth: 2
|
|||
|
|
},
|
|||
|
|
label: { show: false, position: 'center' },
|
|||
|
|
emphasis: {
|
|||
|
|
label: { show: true, fontSize: '18', fontWeight: 'bold', color: textColor }
|
|||
|
|
},
|
|||
|
|
labelLine: { show: false },
|
|||
|
|
data: chartData,
|
|||
|
|
color: ['#0071e3', '#34c759', '#ff9500', '#ff3b30', '#5856d6', '#ff2d55', '#30b0c7', '#a2845e']
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function animateValue(obj, end, isCurrency) {
|
|||
|
|
let startTimestamp = null;
|
|||
|
|
const duration = 1000;
|
|||
|
|
const target = parseFloat(end);
|
|||
|
|
|
|||
|
|
const step = (timestamp) => {
|
|||
|
|
if (!startTimestamp) startTimestamp = timestamp;
|
|||
|
|
const progress = Math.min((timestamp - startTimestamp) / duration, 1);
|
|||
|
|
const ease = 1 - Math.pow(1 - progress, 4);
|
|||
|
|
const current = target * ease;
|
|||
|
|
obj.innerHTML = isCurrency ? formatCurrency(current) : Math.floor(current);
|
|||
|
|
if (progress < 1) window.requestAnimationFrame(step);
|
|||
|
|
else obj.innerHTML = isCurrency ? formatCurrency(target) : target;
|
|||
|
|
};
|
|||
|
|
window.requestAnimationFrame(step);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ============== PAGE 5: OPS MANAGEMENT ==============
|
|||
|
|
function appendLog(logEl, emoji, text, cssClass) {
|
|||
|
|
const entry = document.createElement('span');
|
|||
|
|
entry.className = `log-entry ${cssClass || ''}`;
|
|||
|
|
const time = new Date().toLocaleTimeString('zh-CN');
|
|||
|
|
entry.innerHTML = `<span class="log-time">${time}</span>${emoji} ${text}`;
|
|||
|
|
logEl.appendChild(entry);
|
|||
|
|
logEl.scrollTop = logEl.scrollHeight;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async function triggerOps(action, btnElement) {
|
|||
|
|
const logEl = document.getElementById('ops-log');
|
|||
|
|
const taskName = btnElement.querySelector('.ops-label').textContent;
|
|||
|
|
|
|||
|
|
// Clear the initial placeholder text on first use
|
|||
|
|
if (logEl.querySelector('.log-placeholder')) {
|
|||
|
|
logEl.innerHTML = '';
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Disable button & show running state
|
|||
|
|
btnElement.disabled = true;
|
|||
|
|
btnElement.classList.add('ops-running');
|
|||
|
|
const origDesc = btnElement.querySelector('.ops-desc').textContent;
|
|||
|
|
btnElement.querySelector('.ops-desc').textContent = '执行中...';
|
|||
|
|
|
|||
|
|
appendLog(logEl, '⏳', `${taskName} 开始执行...`, 'log-pending');
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
// 构建 URL: 订单/退款同步支持可选的 from 日期参数
|
|||
|
|
let url = `${BASE_URL.replace('/api', '')}/api/ops/${action}`;
|
|||
|
|
if (action === 'sync-orders' || action === 'sync-refunds') {
|
|||
|
|
const fromDate = document.getElementById('ops-from-date')?.value;
|
|||
|
|
if (fromDate) {
|
|||
|
|
url += `?from=${fromDate}`;
|
|||
|
|
appendLog(logEl, '📅', `使用指定日期: ${fromDate}`, 'log-pending');
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
const response = await fetch(url);
|
|||
|
|
const data = await response.json();
|
|||
|
|
|
|||
|
|
if (data.status === 'success') {
|
|||
|
|
const detail = data.message || (data.count !== undefined ? `处理 ${data.count} 条` : '完成');
|
|||
|
|
appendLog(logEl, '✅', `${taskName} 成功 — ${detail}`, 'log-success');
|
|||
|
|
btnElement.classList.add('ops-done');
|
|||
|
|
} else {
|
|||
|
|
appendLog(logEl, '❌', `${taskName} 失败: ${data.message || '未知错误'}`, 'log-error');
|
|||
|
|
btnElement.classList.add('ops-error');
|
|||
|
|
}
|
|||
|
|
} catch (e) {
|
|||
|
|
appendLog(logEl, '❌', `${taskName} 网络异常: ${e.message}`, 'log-error');
|
|||
|
|
btnElement.classList.add('ops-error');
|
|||
|
|
} finally {
|
|||
|
|
btnElement.disabled = false;
|
|||
|
|
btnElement.classList.remove('ops-running');
|
|||
|
|
btnElement.querySelector('.ops-desc').textContent = origDesc;
|
|||
|
|
|
|||
|
|
setTimeout(() => {
|
|||
|
|
btnElement.classList.remove('ops-done', 'ops-error');
|
|||
|
|
}, 3000);
|
|||
|
|
}
|
|||
|
|
}
|