freedakgmail
8f5271fcc6
- 修复schema前缀：确认central_kitchen/mv_distribution/mv_dish_sales等表在public schema，撤销错误的analytics.前缀 - 移除API内部物化视图刷新：mv_distribution_monthly/mv_dish_sales_monthly改为console.warn - 修复BOM树节点key：使用path字段替代material_code+level确保唯一性 - 修复HR人才矩阵potential_score：基于v3_learning_record动态计算替代硬编码60 - 修复StoreDetailPage公司均值：优先使用API返回的companyAvg - 修复前端字段名匹配：discount_rate_pct/check_comment等 - 添加explicit column list和LIMIT到大型查询 - 更新数据溯源审计.md：移除全部52个已修复/确认无需修复的问题条目
318 lines
16 KiB
TypeScript
318 lines
16 KiB
TypeScript
import { useQuery } from '@tanstack/react-query'
|
|
import { useNavigate } from 'react-router-dom'
|
|
import { BarChart, Bar, LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Cell, PieChart, Pie, Legend, ComposedChart, Area } from 'recharts'
|
|
import api from '@/lib/api'
|
|
import { MetricCard } from '@/components/MetricCard'
|
|
import { LoadingSpinner } from '@/components/LoadingSpinner'
|
|
import { CollapsibleSection } from '@/components/CollapsibleSection'
|
|
import { FilterableTable } from '@/components/FilterableTable'
|
|
import { formatNumber, formatCurrency, formatPercent } from '@/lib/utils'
|
|
import { BarChart3, TrendingDown, Users, Receipt } from 'lucide-react'
|
|
import { MonthPicker } from '@/components/MonthPicker'
|
|
import { useState } from 'react'
|
|
|
|
const CHANNEL_COLORS: Record<string, string> = {
|
|
wechat: '#07c160',
|
|
alipay: '#1677ff',
|
|
meituan_delivery: '#ffd700',
|
|
meituan: '#ff6b35',
|
|
taobao_delivery: '#ff4400',
|
|
douyin: '#000000',
|
|
cash: '#52c41a',
|
|
jd_delivery: '#e1251b',
|
|
unionpay: '#f5222d',
|
|
credit: '#722ed1',
|
|
}
|
|
|
|
export function RevenuePage() {
|
|
const navigate = useNavigate()
|
|
const [month, setMonth] = useState('2026-04')
|
|
|
|
const { data: dailyData, isLoading: dailyLoading } = useQuery({
|
|
queryKey: ['revenue/daily-summary', month],
|
|
queryFn: () => api.get('/revenue/daily-summary', { params: { month } }),
|
|
})
|
|
const { data: channelData, isLoading: channelLoading } = useQuery({
|
|
queryKey: ['revenue/channel', month],
|
|
queryFn: () => api.get('/revenue/channel', { params: { month } }),
|
|
})
|
|
const { data: mealPeriodData, isLoading: mealLoading } = useQuery({
|
|
queryKey: ['revenue/meal-period', month],
|
|
queryFn: () => api.get('/revenue/meal-period', { params: { month } }),
|
|
})
|
|
const { data: storeRankingData, isLoading: rankLoading } = useQuery({
|
|
queryKey: ['revenue/store-ranking', month],
|
|
queryFn: () => api.get('/revenue/store-ranking', { params: { month } }),
|
|
})
|
|
|
|
const pageLoading = dailyLoading || channelLoading || mealLoading || rankLoading
|
|
|
|
const dailyRows = (dailyData as any)?.data || []
|
|
const channelRows = (channelData as any)?.data || []
|
|
const mealRows = (mealPeriodData as any)?.data || []
|
|
const rankRows = (storeRankingData as any)?.data || []
|
|
|
|
// 核心指标
|
|
const totalConsumption = dailyRows.reduce((s: number, r: any) => s + Number(r.consumption || 0), 0)
|
|
const totalReceived = dailyRows.reduce((s: number, r: any) => s + Number(r.received || 0), 0)
|
|
const totalBills = dailyRows.reduce((s: number, r: any) => s + Number(r.bill_count || 0), 0)
|
|
const totalDiscounts = dailyRows.reduce((s: number, r: any) => s + Number(r.discounts || 0), 0)
|
|
const totalGuests = dailyRows.reduce((s: number, r: any) => s + Number(r.guests || 0), 0)
|
|
const avgBillValue = totalBills > 0 ? totalReceived / totalBills : 0
|
|
const avgDiscountRate = totalReceived > 0 ? totalDiscounts / (totalReceived + totalDiscounts) * 100 : 0
|
|
const avgGuestValue = totalGuests > 0 ? totalReceived / totalGuests : 0
|
|
|
|
// 日度趋势数据
|
|
const dailyChart = dailyRows.map((r: any) => ({
|
|
date: r.business_date?.substring(5, 10),
|
|
received: Number(r.received || 0),
|
|
bills: Number(r.bill_count || 0),
|
|
avg_bill: Number(r.avg_bill_value || 0),
|
|
discount_rate: Number(r.discount_rate_pct || 0),
|
|
}))
|
|
|
|
// 环比
|
|
const last7 = dailyRows.slice(-7)
|
|
const prev7 = dailyRows.slice(-14, -7)
|
|
const sumKey = (arr: any[], key: string) => arr.reduce((s, r) => s + Number(r[key] || 0), 0)
|
|
const trend = (curr: number, prev: number) => prev > 0 ? Math.round((curr - prev) / prev * 1000) / 10 : 0
|
|
const trendReceived = trend(sumKey(last7, 'received'), sumKey(prev7, 'received'))
|
|
const trendBills = trend(sumKey(last7, 'bill_count'), sumKey(prev7, 'bill_count'))
|
|
|
|
// 渠道汇总
|
|
const channelTotals: Record<string, number> = {}
|
|
channelRows.forEach((r: any) => {
|
|
Object.keys(r).forEach((k) => {
|
|
if (k !== 'business_date') {
|
|
channelTotals[k] = (channelTotals[k] || 0) + Number(r[k] || 0)
|
|
}
|
|
})
|
|
})
|
|
const channelPie = Object.entries(channelTotals)
|
|
.filter(([k, v]) => v > 0)
|
|
.map(([k, v]) => ({ name: k, value: Math.round(v * 100) / 100 }))
|
|
.sort((a, b) => b.value - a.value)
|
|
|
|
const channelLabels: Record<string, string> = {
|
|
wechat: '微信',
|
|
alipay: '支付宝',
|
|
meituan_delivery: '美团外卖',
|
|
meituan: '美团堂食',
|
|
taobao_delivery: '淘宝外卖',
|
|
douyin: '抖音',
|
|
cash: '现金',
|
|
jd_delivery: '京东外卖',
|
|
unionpay: '银联',
|
|
credit: '挂账',
|
|
}
|
|
|
|
// 渠道日度趋势（前5大渠道）
|
|
const topChannels = channelPie.slice(0, 5).map((c) => c.name)
|
|
const channelTrend = channelRows.map((r: any) => {
|
|
const row: any = { date: r.business_date?.substring(5, 10) }
|
|
topChannels.forEach((ch) => { row[ch] = Number(r[ch] || 0) })
|
|
return row
|
|
})
|
|
|
|
// 时段分布
|
|
const mealColors = ['#f59e0b', '#3b82f6', '#22c55e', '#8b5cf6', '#ec4899', '#06b6d4']
|
|
const mealPie = mealRows.map((r: any, i: number) => ({
|
|
name: r.meal_period,
|
|
value: Number(r.received || 0),
|
|
bills: Number(r.bill_count || 0),
|
|
avg_bill: Number(r.avg_bill_value || 0),
|
|
fill: mealColors[i % mealColors.length],
|
|
}))
|
|
|
|
// 门店排名 TOP10 / BOTTOM10
|
|
const top10 = rankRows.slice(0, 10).map((r: any) => ({
|
|
name: r.store_name?.substring(0, 6) || '',
|
|
value: Number(r.received || 0),
|
|
code: r.store_code,
|
|
}))
|
|
const bottom10 = rankRows.filter((r: any) => Number(r.received) > 0).slice(-10).reverse().map((r: any) => ({
|
|
name: r.store_name?.substring(0, 6) || '',
|
|
value: Number(r.received || 0),
|
|
code: r.store_code,
|
|
}))
|
|
|
|
if (pageLoading) {
|
|
return <LoadingSpinner text="加载营收分析..." />
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-4">
|
|
{/* 标题 */}
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center gap-2">
|
|
<BarChart3 className="text-blue-500" size={24} />
|
|
<div>
|
|
<h1 className="text-xl font-bold">营收分析</h1>
|
|
<p className="mt-0.5 text-xs text-muted-foreground">收入结构 · 渠道分布 · 时段分析 · 门店排名</p>
|
|
</div>
|
|
</div>
|
|
<MonthPicker month={month} onChange={setMonth} />
|
|
</div>
|
|
|
|
{/* 核心指标 */}
|
|
<div className="grid grid-cols-2 gap-3 md:grid-cols-3 lg:grid-cols-6">
|
|
<MetricCard title="营业收入" value={totalConsumption} format="currency" description="全部门店消费金额合计" />
|
|
<MetricCard title="优惠总额" value={totalDiscounts} format="currency" status={avgDiscountRate > 25 ? 'bad' : avgDiscountRate > 20 ? 'warn' : 'good'} description={`优惠率 ${formatPercent(avgDiscountRate)}`} />
|
|
<MetricCard title="实收总额" value={totalReceived} format="currency" trend={trendReceived} description={`环比上周 ${trendReceived > 0 ? '↑' : '↓'} ${Math.abs(trendReceived)}%`} />
|
|
<MetricCard title="账单数" value={totalBills} format="number" trend={trendBills} description={`环比上周 ${trendBills > 0 ? '↑' : '↓'} ${Math.abs(trendBills)}%`} />
|
|
<MetricCard title="客单价" value={avgBillValue} format="currency" description="实收 ÷ 账单数" />
|
|
<MetricCard title="客流量" value={totalGuests} format="number" description={`人均 ${formatCurrency(avgGuestValue)}`} />
|
|
</div>
|
|
|
|
{/* 日度营收趋势 */}
|
|
<CollapsibleSection title="日度营收趋势" subtitle="实收 · 账单数 · 客单价 · 优惠率">
|
|
<ResponsiveContainer width="100%" height={280}>
|
|
<ComposedChart data={dailyChart} margin={{ top: 10, right: 10, left: 0, bottom: 0 }}>
|
|
<CartesianGrid strokeDasharray="3 3" />
|
|
<XAxis dataKey="date" tick={{ fontSize: 10 }} />
|
|
<YAxis yAxisId="left" tickFormatter={(v) => v >= 10000 ? `${(v / 10000).toFixed(0)}万` : v} tick={{ fontSize: 10 }} />
|
|
<YAxis yAxisId="right" orientation="right" tick={{ fontSize: 10 }} />
|
|
<Tooltip
|
|
labelFormatter={(label) => label}
|
|
formatter={(v: any, name: any) => {
|
|
const labels: Record<string, string> = { received: '实收', bills: '账单数', avg_bill: '客单价', discount_rate: '优惠率' }
|
|
if (name === 'received') return [formatCurrency(v), '实收']
|
|
if (name === 'bills') return [formatNumber(v), '账单数']
|
|
if (name === 'avg_bill') return [formatCurrency(v), '客单价']
|
|
if (name === 'discount_rate') return [`${v}%`, '优惠率']
|
|
return [v, labels[name] || name]
|
|
}}
|
|
/>
|
|
<Legend wrapperStyle={{ fontSize: 10 }} formatter={(v: any) => { const m: Record<string, string> = { received: '实收', bills: '账单数', avg_bill: '客单价', discount_rate: '优惠率' }; return m[v] || v }} />
|
|
<Bar yAxisId="left" dataKey="received" fill="#3b82f6" radius={[4, 4, 0, 0]} name="received" />
|
|
<Line yAxisId="right" type="monotone" dataKey="avg_bill" stroke="#22c55e" name="avg_bill" dot={false} strokeWidth={2} />
|
|
<Line yAxisId="right" type="monotone" dataKey="discount_rate" stroke="#ef4444" name="discount_rate" dot={false} strokeWidth={2} />
|
|
</ComposedChart>
|
|
</ResponsiveContainer>
|
|
</CollapsibleSection>
|
|
|
|
{/* 渠道收入结构 + 渠道趋势 */}
|
|
<div className="grid gap-4 lg:grid-cols-2">
|
|
<CollapsibleSection title="渠道收入结构" subtitle="各支付/外卖渠道占比">
|
|
{channelPie.length > 0 && (
|
|
<ResponsiveContainer width="100%" height={300}>
|
|
<PieChart>
|
|
<Pie data={channelPie} dataKey="value" nameKey="name" cx="50%" cy="50%" outerRadius={80} labelLine={false} label={(e: any) => <tspan fontSize={11}>{channelLabels[e.name] || e.name}</tspan>}>
|
|
{channelPie.map((entry: any, i: number) => <Cell key={i} fill={CHANNEL_COLORS[entry.name] || '#999'} />)}
|
|
</Pie>
|
|
<Tooltip formatter={(v: any, name: any) => [formatCurrency(v), channelLabels[name] || name]} />
|
|
<Legend wrapperStyle={{ fontSize: 10 }} formatter={(v: any) => channelLabels[v] || v} />
|
|
</PieChart>
|
|
</ResponsiveContainer>
|
|
)}
|
|
</CollapsibleSection>
|
|
|
|
<CollapsibleSection title="渠道收入趋势" subtitle="前5大渠道日度收入">
|
|
<ResponsiveContainer width="100%" height={300}>
|
|
<LineChart data={channelTrend}>
|
|
<CartesianGrid strokeDasharray="3 3" />
|
|
<XAxis dataKey="date" tick={{ fontSize: 10 }} />
|
|
<YAxis tickFormatter={(v) => v >= 10000 ? `${(v / 10000).toFixed(0)}万` : v} tick={{ fontSize: 10 }} />
|
|
<Tooltip formatter={(v: any, name: any) => [formatCurrency(v), channelLabels[name] || name]} />
|
|
<Legend wrapperStyle={{ fontSize: 10 }} formatter={(v) => channelLabels[v] || v} />
|
|
{topChannels.map((ch) => (
|
|
<Line key={ch} type="monotone" dataKey={ch} stroke={CHANNEL_COLORS[ch] || '#999'} dot={false} strokeWidth={2} />
|
|
))}
|
|
</LineChart>
|
|
</ResponsiveContainer>
|
|
</CollapsibleSection>
|
|
</div>
|
|
|
|
{/* 时段收入分布 */}
|
|
<CollapsibleSection title="时段收入分布" subtitle="早市/午市/下午茶/晚市/夜市">
|
|
<div className="grid gap-4 lg:grid-cols-2">
|
|
<ResponsiveContainer width="100%" height={280}>
|
|
<PieChart>
|
|
<Pie data={mealPie} dataKey="value" nameKey="name" cx="50%" cy="50%" outerRadius={80} labelLine={false} label={(e: any) => <tspan fontSize={11}>{e.name}</tspan>}>
|
|
{mealPie.map((entry: any, i: number) => <Cell key={i} fill={entry.fill} />)}
|
|
</Pie>
|
|
<Tooltip formatter={(v: any, name: any) => [formatCurrency(v), name]} />
|
|
<Legend wrapperStyle={{ fontSize: 10 }} />
|
|
</PieChart>
|
|
</ResponsiveContainer>
|
|
<div className="space-y-2">
|
|
{mealRows.map((r: any, i: number) => (
|
|
<div key={r.meal_period} className="flex items-center gap-3 rounded-lg border p-3">
|
|
<div className="h-4 w-4 rounded" style={{ backgroundColor: mealColors[i % mealColors.length] }} />
|
|
<div className="flex-1">
|
|
<p className="text-sm font-medium">{r.meal_period}</p>
|
|
<p className="text-xs text-muted-foreground">{formatNumber(r.bill_count)} 笔 · 客单价 {formatCurrency(r.avg_bill_value)}</p>
|
|
</div>
|
|
<div className="text-right">
|
|
<p className="text-sm font-bold">{formatCurrency(r.received)}</p>
|
|
<p className="text-xs text-muted-foreground">{totalReceived > 0 ? formatPercent(Number(r.received) / totalReceived * 100) : '-'}</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</CollapsibleSection>
|
|
|
|
{/* 门店营收排名 */}
|
|
<div className="grid gap-4 lg:grid-cols-2">
|
|
<CollapsibleSection title="营收 TOP10" subtitle="实收最高的10家门店">
|
|
<ResponsiveContainer width="100%" height={320}>
|
|
<BarChart data={top10} layout="vertical" margin={{ left: 70 }}>
|
|
<CartesianGrid strokeDasharray="3 3" />
|
|
<XAxis type="number" tickFormatter={(v) => v >= 10000 ? `${(v / 10000).toFixed(0)}万` : v} tick={{ fontSize: 10 }} />
|
|
<YAxis type="category" dataKey="name" tick={{ fontSize: 10 }} width={70} />
|
|
<Tooltip formatter={(v: any) => [formatCurrency(v), '实收']} />
|
|
<Bar dataKey="value" radius={[0, 4, 4, 0]} onClick={(d: any) => d.code && navigate(`/stores/${d.code}`)}>
|
|
{top10.map((_: any, i: number) => <Cell key={i} fill="#22c55e" className="cursor-pointer" />)}
|
|
</Bar>
|
|
</BarChart>
|
|
</ResponsiveContainer>
|
|
</CollapsibleSection>
|
|
|
|
<CollapsibleSection title="营收 BOTTOM10" subtitle="营收最低的10家门店">
|
|
<ResponsiveContainer width="100%" height={320}>
|
|
<BarChart data={bottom10} layout="vertical" margin={{ left: 70 }}>
|
|
<CartesianGrid strokeDasharray="3 3" />
|
|
<XAxis type="number" tickFormatter={(v) => v >= 10000 ? `${(v / 10000).toFixed(0)}万` : v} tick={{ fontSize: 10 }} />
|
|
<YAxis type="category" dataKey="name" tick={{ fontSize: 10 }} width={70} />
|
|
<Tooltip formatter={(v: any) => [formatCurrency(v), '实收']} />
|
|
<Bar dataKey="value" radius={[0, 4, 4, 0]} onClick={(d: any) => d.code && navigate(`/stores/${d.code}`)}>
|
|
{bottom10.map((_: any, i: number) => <Cell key={i} fill="#ef4444" className="cursor-pointer" />)}
|
|
</Bar>
|
|
</BarChart>
|
|
</ResponsiveContainer>
|
|
</CollapsibleSection>
|
|
</div>
|
|
|
|
{/* 门店营收明细表 */}
|
|
<CollapsibleSection title="门店营收明细" subtitle="全部门店营收排名">
|
|
<FilterableTable
|
|
data={rankRows}
|
|
filterKey="store_name"
|
|
filterLabel="全部门店"
|
|
onRowClick={(r) => r.store_code && navigate(`/stores/${r.store_code}`)}
|
|
sortOptions={[
|
|
{ key: 'received', label: '实收' },
|
|
{ key: 'bill_count', label: '账单数' },
|
|
{ key: 'avg_bill_value', label: '客单价' },
|
|
{ key: 'avg_discount_rate_pct', label: '优惠率' },
|
|
{ key: 'guests', label: '客流量' },
|
|
{ key: 'avg_theoretical_margin_pct', label: '毛利率' },
|
|
]}
|
|
defaultSort="received"
|
|
defaultOrder="desc"
|
|
columns={[
|
|
{ key: 'store_name', label: '门店' },
|
|
{ key: 'received', label: '实收', align: 'right', render: (r) => formatCurrency(r.received) },
|
|
{ key: 'bill_count', label: '账单数', align: 'right', render: (r) => formatNumber(r.bill_count) },
|
|
{ key: 'avg_bill_value', label: '客单价', align: 'right', render: (r) => formatCurrency(r.avg_bill_value) },
|
|
{ key: 'avg_discount_rate_pct', label: '优惠率', align: 'right', render: (r) => <span className={Number(r.avg_discount_rate_pct) > 25 ? 'text-red-600 font-bold' : Number(r.avg_discount_rate_pct) > 20 ? 'text-yellow-600' : ''}>{formatPercent(r.avg_discount_rate_pct)}</span> },
|
|
{ key: 'guests', label: '客流量', align: 'right', render: (r) => formatNumber(r.guests) },
|
|
{ key: 'avg_theoretical_margin_pct', label: '理论毛利率', align: 'right', render: (r) => formatPercent(r.avg_theoretical_margin_pct) },
|
|
]}
|
|
/>
|
|
</CollapsibleSection>
|
|
</div>
|
|
)
|
|
}
|