亏损 BOTTOM5
- {profitRanking.filter((s: any) => Number(s.net_profit) < 0).slice(-5).reverse().map((s: any, i: number) => (
+ {profitRanking.filter((s: any) => Number(s.store_contribution) < 0).slice(-5).reverse().map((s: any, i: number) => (
{i + 1}
{s.store_name}
-
实收 {formatCurrency(s.received)} · 净利率 {formatPercent(s.net_margin_pct)}
+
实收 {formatCurrency(s.received)} · 贡献率 {formatPercent(s.contribution_margin_pct)}
-
{formatCurrency(s.net_profit)}
+
{formatCurrency(s.store_contribution)}
))}
diff --git a/client/src/pages/CentralKitchenPage.tsx b/client/src/pages/CentralKitchenPage.tsx
new file mode 100644
index 0000000..7b2b22e
--- /dev/null
+++ b/client/src/pages/CentralKitchenPage.tsx
@@ -0,0 +1,394 @@
+import { useState } from 'react'
+import { useQuery } from '@tanstack/react-query'
+import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Cell, ScatterChart, Scatter } from 'recharts'
+import api from '@/lib/api'
+import { MetricCard } from '@/components/MetricCard'
+import { LoadingSpinner } from '@/components/LoadingSpinner'
+import { CollapsibleSection } from '@/components/CollapsibleSection'
+import { formatNumber, formatCurrency, formatPercent } from '@/lib/utils'
+import { ChefHat, TrendingDown, TrendingUp, AlertTriangle, Package, Factory } from 'lucide-react'
+import { MonthPicker } from '@/components/MonthPicker'
+
+const CATEGORY_COLORS = ['#1677ff', '#52c41a', '#faad14', '#f5222d', '#722ed1', '#13c2c2', '#eb2f96', '#fa8c16', '#a0d911', '#2f54eb']
+
+function varianceColor(pct: number): 'good' | 'warn' | 'bad' {
+ if (Math.abs(pct) <= 3) return 'good'
+ if (Math.abs(pct) <= 5) return 'warn'
+ return 'bad'
+}
+
+function varianceText(pct: number): string {
+ if (pct > 0) return `+${pct.toFixed(2)}%`
+ return `${pct.toFixed(2)}%`
+}
+
+export function CentralKitchenPage() {
+ const [month, setMonth] = useState('2026-04')
+ const [productFilter, setProductFilter] = useState('')
+
+ const { data, isLoading } = useQuery({
+ queryKey: ['central-kitchen-dashboard', month],
+ queryFn: async () => {
+ const res = await api.get(`/central-kitchen/dashboard?month=${month}`)
+ return res.data
+ },
+ })
+
+ if (isLoading) return
+ if (!data) return
暂无数据
+
+ const { summary, reconciliation, products, categoryCost, recipeEfficiency, mfgPool, yieldAnalysis } = data
+
+ const filteredProducts = products.filter((p: any) =>
+ !productFilter ||
+ p.product_name?.includes(productFilter) ||
+ p.product_code?.includes(productFilter) ||
+ p.category_minor?.includes(productFilter)
+ )
+
+ // 成本对账瀑布数据
+ const waterfallData = [
+ { name: '理论成本', value: reconciliation.theoretical_cost, type: 'base' },
+ { name: '标准成本', value: reconciliation.standard_cost, type: 'base' },
+ { name: '实际材料', value: reconciliation.material_actual_cost, type: 'base' },
+ { name: '制造费用', value: reconciliation.allocated_manufacturing_cost, type: 'add' },
+ { name: '全制造成本', value: reconciliation.full_manufacturing_cost, type: 'total' },
+ { name: '入库价值', value: reconciliation.calculated_inbound_value, type: 'base' },
+ { name: '制造毛利', value: reconciliation.manufacturing_margin, type: 'margin' },
+ ]
+
+ // 品类成本堆叠数据
+ const categoryStackData = categoryCost.map((c: any) => ({
+ name: c.category_minor,
+ 材料成本: c.material_actual_cost,
+ 制造费用: c.allocated_mfg_cost,
+ }))
+
+ // 产品成本偏差散点图
+ const scatterData = products.map((p: any) => ({
+ name: p.product_name,
+ x: p.theoretical_cost,
+ y: p.material_actual_cost,
+ z: p.efficiency_variance_pct,
+ category: p.category_minor,
+ })).filter((d: any) => d.x > 0 && d.y > 0)
+
+ return (
+
+ {/* 页面标题 */}
+
+
+
中央厨房成本驾驶舱
+
+
+
+ {/* 核心指标卡片 */}
+
+
+
+
+
+
+
+
+
+
+ {/* 成本对账瀑布 */}
+
+
+
+
+
+
+
+ = 0 ? 'good' : 'bad'} description="入库价值-全制造成本" />
+
+
+
+
+
+ `${(v / 10000).toFixed(0)}万`} tick={{ fontSize: 11 }} />
+ formatCurrency(v)} />
+
+ {waterfallData.map((entry, idx) => (
+ = 0 ? '#52c41a' : '#f5222d') :
+ '#8ec6ff'
+ } />
+ ))}
+ |
+
+
+
+
+ {/* 品类成本结构 */}
+
+
+
+
+
+ `${(v / 10000).toFixed(0)}万`} tick={{ fontSize: 11 }} />
+ formatCurrency(v)} />
+
+
+
+
+
+
+
+
+ | 品类 |
+ 产品数 |
+ 入库量 |
+ 理论成本 |
+ 实际材料 |
+ 制造费用 |
+ 全成本 |
+ 效率差异 |
+
+
+
+ {categoryCost.map((c: any, i: number) => (
+
+ | {c.category_minor} |
+ {c.product_count} |
+ {formatNumber(c.total_qty)} |
+ {formatCurrency(c.theoretical_cost)} |
+ {formatCurrency(c.material_actual_cost)} |
+ {formatCurrency(c.allocated_mfg_cost)} |
+ {formatCurrency(c.full_cost)} |
+
+ {varianceText(c.efficiency_var_pct)}
+ |
+
+ ))}
+
+
+
+
+ {/* 产品成本偏差散点图 */}
+
+
+
+
+ `${(v / 10000).toFixed(0)}万`} tick={{ fontSize: 11 }} label={{ value: '理论成本', position: 'insideBottom', offset: -5, fontSize: 11 }} />
+ `${(v / 10000).toFixed(0)}万`} tick={{ fontSize: 11 }} label={{ value: '实际成本', angle: -90, position: 'insideLeft', fontSize: 11 }} />
+ name === 'x' || name === 'y' ? formatCurrency(v) : v} labelFormatter={() => ''} />
+
+ {scatterData.map((entry: any, idx: number) => (
+ = 5 ? '#f5222d' :
+ entry.z >= 0 ? '#faad14' : '#1677ff'
+ } />
+ ))}
+ |
+
+
+
+ 节约(≤-5%)
+ 正常(-5%~0%)
+ 轻微超耗(0~5%)
+ 严重超耗(≥5%)
+
+
+
+ {/* 产品明细表 */}
+
setProductFilter(e.target.value)}
+ className="rounded border px-3 py-1 text-sm"
+ />
+ }
+ >
+
+
+
+
+ | 编码 |
+ 产品名 |
+ 品类 |
+ 入库量 |
+ 理论成本 |
+ 标准成本 |
+ 实际材料 |
+ 制造费用 |
+ 全成本 |
+ 单位成本 |
+ 效率差异 |
+ 标准差异 |
+ 入库价值 |
+ 产品毛利 |
+
+
+
+ {filteredProducts.map((p: any, i: number) => (
+
+ | {p.product_code} |
+ {p.product_name} |
+ {p.category_minor} |
+ {formatNumber(p.inbound_quantity)} |
+ {formatCurrency(p.theoretical_cost)} |
+ {formatCurrency(p.standard_cost)} |
+ {formatCurrency(p.material_actual_cost)} |
+ {formatCurrency(p.allocated_manufacturing_cost)} |
+ {formatCurrency(p.full_manufacturing_cost)} |
+ {formatNumber(p.full_unit_cost)} |
+
+ {varianceText(p.efficiency_variance_pct)}
+ |
+
+ {varianceText(p.standard_variance_pct)}
+ |
+ {formatCurrency(p.inbound_value)} |
+ = 0 ? 'text-green-600' : 'text-red-600'}`}>
+ {formatCurrency(p.product_margin)}
+ |
+
+ ))}
+
+
+
+
+ {/* 配方效率分析 */}
+
+
+
+
+
+ | 配方 |
+ 物料 |
+ 规格 |
+ 理论用量 |
+ 实际用量 |
+ 理论金额 |
+ 实际金额 |
+ 金额差异率 |
+ 实际出成率 |
+ 标准出成率 |
+ 出成差异 |
+
+
+
+ {recipeEfficiency.map((r: any, i: number) => (
+
+ | {r.recipe_name} |
+ {r.item_name} |
+ {r.specification} |
+ {formatNumber(r.theoretical_qty)} |
+ {formatNumber(r.actual_qty)} |
+ {formatCurrency(r.theoretical_amt)} |
+ {formatCurrency(r.actual_amt)} |
+
+ {varianceText(r.variance_pct)}
+ |
+ {r.avg_actual_yield ? `${(r.avg_actual_yield * 100).toFixed(2)}%` : '-'} |
+ {r.avg_recipe_yield ? `${(r.avg_recipe_yield * 100).toFixed(2)}%` : '-'} |
+ 0.03 ? 'text-green-600' : ''}`}>
+ {r.yield_diff ? `${(r.yield_diff * 100).toFixed(2)}pct` : '-'}
+ |
+
+ ))}
+
+
+
+
+ {/* 出成率分析 */}
+
+
+
+
+
+ | 配方 |
+ 产品名 |
+ 理论入库量 |
+ 实际入库量 |
+ 达成率 |
+ 预期偏差率 |
+ 入库金额 |
+ 退库量 |
+ 退库率 |
+
+
+
+ {yieldAnalysis.map((y: any, i: number) => (
+
+ | {y.recipe_name} |
+ {y.product_name} |
+ {formatNumber(y.theoretical_inbound_qty)} |
+ {formatNumber(y.actual_inbound_qty)} |
+ = 0.95 ? 'text-green-600' : y.avg_achievement_rate >= 0.9 ? 'text-yellow-600' : 'text-red-600'}`}>
+ {y.avg_achievement_rate ? `${(y.avg_achievement_rate * 100).toFixed(2)}%` : '-'}
+ |
+ 0.03 ? 'text-green-600' : ''}`}>
+ {y.avg_expected_var_rate ? `${(y.avg_expected_var_rate * 100).toFixed(2)}%` : '-'}
+ |
+ {formatCurrency(y.total_inbound_amt)} |
+ {formatNumber(y.total_return_qty)} |
+ 1 ? 'text-red-600' : ''}`}>
+ {y.return_rate ? `${y.return_rate.toFixed(2)}%` : '-'}
+ |
+
+ ))}
+
+
+
+
+ {/* 制造费用池 */}
+
+
+
+
+
+ | 费用类型 |
+ 费用子类 |
+ 来源 |
+ 原始金额 |
+ 分摊比例 |
+ 分摊金额 |
+ 分摊方法 |
+ 计入重建 |
+ 临时 |
+ 备注 |
+
+
+
+ {mfgPool.map((m: any, i: number) => (
+
+ | {m.cost_type} |
+ {m.cost_subtype} |
+ {m.source_type} |
+ {formatCurrency(m.source_amount)} |
+ {m.share_pct ? `${(m.share_pct * 100).toFixed(2)}%` : '-'} |
+ {formatCurrency(m.allocated_amount)} |
+ {m.allocation_method} |
+ {m.include_in_rebuilt_cost ? '✅' : '❌'} |
+
+ {m.is_provisional && }
+ |
+ {m.note} |
+
+ ))}
+
+
+
+
+
当前制造费用分摊为临时方法（按人数比例），待电表、面积或工时数据后替换为更精确的分摊基准。
+
+
+ )
+}
diff --git a/client/src/pages/DashboardPage.tsx b/client/src/pages/DashboardPage.tsx
index b52727a..90f22fc 100644
--- a/client/src/pages/DashboardPage.tsx
+++ b/client/src/pages/DashboardPage.tsx
@@ -1,6 +1,6 @@
import { useQuery } from '@tanstack/react-query'
import { useNavigate } from 'react-router-dom'
-import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, BarChart, Bar, PieChart, Pie, Cell, Legend, ScatterChart, Scatter, ZAxis, ReferenceLine, ComposedChart } from 'recharts'
+import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, BarChart, Bar, PieChart, Pie, Cell, Legend, ScatterChart, Scatter, ZAxis, ReferenceLine, ComposedChart, Area, AreaChart } from 'recharts'
import api from '@/lib/api'
import { MetricCard } from '@/components/MetricCard'
import { Badge } from '@/components/Badge'
@@ -8,8 +8,10 @@ import { DataTable } from '@/components/DataTable'
import { Pagination } from '@/components/Pagination'
import { LoadingSpinner } from '@/components/LoadingSpinner'
import { CollapsibleSection } from '@/components/CollapsibleSection'
+import { MonthPicker } from '@/components/MonthPicker'
import { formatNumber, formatCurrency, formatPercent } from '@/lib/utils'
import { useState, useMemo } from 'react'
+import { TrendingUp, TrendingDown, Minus } from 'lucide-react'
const RISK_COLORS = { '红色': '#ef4444', '黄色': '#eab308', '绿色': '#22c55e' }
const PAGE_SIZE = 10
@@ -17,25 +19,26 @@ const PAGE_SIZE = 10
export function DashboardPage() {
const navigate = useNavigate()
const [priorityPage, setPriorityPage] = useState(1)
+ const [month, setMonth] = useState('2026-04')
const { data: overview, isLoading: odLoading } = useQuery({
- queryKey: ['overview'],
- queryFn: () => api.get('/overview'),
+ queryKey: ['overview', month],
+ queryFn: () => api.get('/overview', { params: { month } }),
})
const { data: daily, isLoading: dailyLoading } = useQuery({
- queryKey: ['overview/daily'],
- queryFn: () => api.get('/overview/daily'),
+ queryKey: ['overview/daily', month],
+ queryFn: () => api.get('/overview/daily', { params: { month } }),
})
const { data: riskData, isLoading: riskLoading } = useQuery({
- queryKey: ['stores/risk'],
- queryFn: () => api.get('/stores/risk'),
+ queryKey: ['stores/risk', month],
+ queryFn: () => api.get('/stores/risk', { params: { month } }),
})
const { data: priorityData, isLoading: priorityLoading } = useQuery({
- queryKey: ['stores/priority'],
- queryFn: () => api.get('/stores/priority'),
+ queryKey: ['stores/priority', month],
+ queryFn: () => api.get('/stores/priority', { params: { month } }),
})
const { data: loopHealth, isLoading: loopLoading } = useQuery({
@@ -44,8 +47,8 @@ export function DashboardPage() {
})
const { data: quadrantData } = useQuery({
- queryKey: ['stores/quadrant'],
- queryFn: () => api.get('/stores/quadrant'),
+ queryKey: ['stores/quadrant', month],
+ queryFn: () => api.get('/stores/quadrant', { params: { month } }),
})
const { data: platformData } = useQuery({
@@ -59,8 +62,28 @@ export function DashboardPage() {
})
const { data: expenseData } = useQuery({
- queryKey: ['store-expense/overview'],
- queryFn: () => api.get('/store-expense/overview'),
+ queryKey: ['store-expense/overview', month],
+ queryFn: () => api.get('/store-expense/overview', { params: { month } }),
+ })
+
+ const { data: yoyData } = useQuery({
+ queryKey: ['overview/yoy', month],
+ queryFn: () => api.get('/overview/yoy', { params: { month } }),
+ })
+
+ const { data: momData } = useQuery({
+ queryKey: ['overview/mom', month],
+ queryFn: () => api.get('/overview/mom', { params: { month } }),
+ })
+
+ const { data: trendData } = useQuery({
+ queryKey: ['overview/trend', month],
+ queryFn: () => api.get('/overview/trend', { params: { month, months: 12 } }),
+ })
+
+ const { data: profitTrendData } = useQuery({
+ queryKey: ['overview/profit-trend', month],
+ queryFn: () => api.get('/overview/profit-trend', { params: { month, months: 6 } }),
})
const pageLoading = odLoading || dailyLoading || riskLoading || priorityLoading || loopLoading
@@ -75,6 +98,26 @@ export function DashboardPage() {
const platformRows = (platformData as any)?.data || []
const alerts = ((alertsData as any)?.data?.alerts || []) as any[]
const alertSummary = (alertsData as any)?.data
+ const yoy = (yoyData as any)?.data
+ const mom = (momData as any)?.data
+ const trendRows = ((trendData as any)?.data || []).map((r: any) => ({
+ ...r,
+ month: r.month?.substring(0, 10) || r.month,
+ }))
+ const profitTrendRows = ((profitTrendData as any)?.data || []).map((r: any) => ({
+ ...r,
+ report_month: r.report_month?.substring(0, 10) || r.report_month,
+ }))
+
+ const yoyData_ = yoy?.yoy
+ const momData_ = mom?.mom
+ const TrendIcon = ({ val }: { val: number | null }) => {
+ if (val === null || val === undefined) return
+ if (val > 0) return
+ if (val < 0) return
+ return
+ }
+ const fmtChange = (v: number | null) => v === null ? '-' : `${v > 0 ? '+' : ''}${v.toFixed(2)}%`
const QUADRANT_COLORS: Record
= {
'明星门店': '#22c55e', '稳健经营': '#3b82f6', '规模承压': '#eab308', '重点改善': '#ef4444', '高效潜力': '#a855f7',
@@ -159,13 +202,16 @@ export function DashboardPage() {
总部驾驶舱
-
全部门店经营总览 · 2026年4月
+
全部门店经营总览 · {month}
-
-
{totalStores} 家门店
-
红色 {riskSummary['红色'] || 0}
-
黄色 {riskSummary['黄色'] || 0}
-
绿色 {riskSummary['绿色'] || 0}
+
+
+
+ {totalStores} 家门店
+ 红色 {riskSummary['红色'] || 0}
+ 黄色 {riskSummary['黄色'] || 0}
+ 绿色 {riskSummary['绿色'] || 0}
+
@@ -188,12 +234,44 @@ export function DashboardPage() {
+ {/* 同比/环比对比 */}
+ {(yoyData_ || momData_) && (
+
+
+ {[
+ { label: '实收同比', yoy: yoyData_?.received_change_pct, mom: momData_?.received_change_pct },
+ { label: '账单数同比', yoy: yoyData_?.bill_count_change_pct, mom: momData_?.bill_count_change_pct },
+ { label: '客单价同比', yoy: yoyData_?.avg_bill_value_change_pct, mom: momData_?.avg_bill_value_change_pct },
+ { label: '优惠率变化', yoy: yoyData_?.discount_rate_change, mom: momData_?.discount_rate_change },
+ ].map((item) => (
+
+
{item.label}
+
+ 同比
+
+ 0 ? 'text-green-600' : item.yoy < 0 ? 'text-red-600' : 'text-muted-foreground'}`}>
+ {fmtChange(item.yoy ?? null)}
+
+
+
+ 环比
+
+ 0 ? 'text-green-600' : item.mom < 0 ? 'text-red-600' : 'text-muted-foreground'}`}>
+ {fmtChange(item.mom ?? null)}
+
+
+
+ ))}
+
-
-
+
+
10 ? 'bad' : Number(ex.actual_food_cost_rate_pct) - Number(ex.theoretical_food_cost_rate_pct) > 5 ? 'warn' : 'good'} description={`成本率 ${formatPercent(ex.actual_food_cost_rate_pct)} · 理论成本率 ${formatPercent(ex.theoretical_food_cost_rate_pct)} · 差异 ${formatPercent(Number(ex.actual_food_cost_rate_pct) - Number(ex.theoretical_food_cost_rate_pct))}。公式：成本率 = 食材成本 ÷ 实收 × 100%。建议值：实际成本率 ≤ 32%，与理论差异 ≤ 3% 为正常`} />
50 ? 'bad' : Number(ex.overall_expense_rate_pct) > 40 ? 'warn' : 'good'} description={`费用率 ${formatPercent(ex.overall_expense_rate_pct)} · 公式：费用率 = 经营费用 ÷ 实收 × 100%。人工 ${formatCurrency(ex.total_wage)} · 房租 ${formatCurrency(ex.total_rent)}。建议值：费用率 ≤ 40% 为健康，40-50% 需关注，> 50% 需整改`} />
@@ -368,6 +446,48 @@ export function DashboardPage() {
+ {/* 月度趋势 & 利润趋势 */}
+