freedakgmail
316 lines
17 KiB
TypeScript
316 lines
17 KiB
TypeScript
import { useState } from 'react'
|
||
import { useQuery } from '@tanstack/react-query'
|
||
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Cell, PieChart, Pie } 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 { cn } from '@/lib/utils'
|
||
import { TrendingUp, Factory, Truck, Package, ArrowRight } from 'lucide-react'
|
||
import { MonthPicker } from '@/components/MonthPicker'
|
||
|
||
function rateColorClass(rate: number | null): string {
|
||
if (rate === null) return 'text-gray-400'
|
||
if (rate >= 90) return 'text-green-600'
|
||
if (rate >= 70) return 'text-yellow-600'
|
||
return 'text-red-600'
|
||
}
|
||
|
||
function rateText(rate: number | null): string {
|
||
if (rate === null) return '-'
|
||
return `${rate.toFixed(1)}%`
|
||
}
|
||
|
||
export function ProductionPlanPage() {
|
||
const [month, setMonth] = useState('2026-04')
|
||
|
||
const { data, isLoading } = useQuery({
|
||
queryKey: ['production-plan', month],
|
||
queryFn: async () => {
|
||
const res = await api.get(`/sales-driven/production-plan?month=${month}`)
|
||
return res.data
|
||
},
|
||
})
|
||
|
||
if (isLoading) return <LoadingSpinner />
|
||
if (!data) return <div className="p-4 text-muted-foreground">暂无数据</div>
|
||
|
||
const { summary, skuSales, materialDemand, storeDemand, ckProductionPlan, productionCoord } = data
|
||
|
||
// BOM覆盖率饼图
|
||
const coverageData = [
|
||
{ name: '有BOM', value: summary.matched_sku_count, fill: '#52c41a' },
|
||
{ name: '无BOM', value: summary.total_dish_count - summary.matched_sku_count, fill: '#f5222d' },
|
||
]
|
||
|
||
// Top10原料需求
|
||
const topMaterialDemand = materialDemand.slice(0, 15)
|
||
const materialChartData = topMaterialDemand.map((m: any) => ({
|
||
name: m.material_name?.length > 10 ? m.material_name.slice(0, 10) + '...' : m.material_name,
|
||
需求量: m.total_demand_qty,
|
||
门店数: m.store_count,
|
||
}))
|
||
|
||
// 图表数据用Top15
|
||
const topCkPlan = ckProductionPlan.filter((p: any) => p.demand_qty > 0).slice(0, 15)
|
||
|
||
// 生产配送协同图表Top15
|
||
const topCoord = productionCoord.filter((p: any) => p.inbound_qty > 0).slice(0, 15)
|
||
const coordChartData = topCoord.map((p: any) => ({
|
||
name: p.product_name?.length > 10 ? p.product_name.slice(0, 10) + '...' : p.product_name,
|
||
完工入库: p.inbound_qty,
|
||
配送量: p.dist_qty,
|
||
门店消耗: p.consumption_qty,
|
||
}))
|
||
|
||
return (
|
||
<div className="space-y-4 p-4">
|
||
{/* 页面标题 */}
|
||
<div className="flex items-center justify-between">
|
||
<div className="flex items-center gap-2">
|
||
<TrendingUp className="h-6 w-6 text-green-600" />
|
||
<h1 className="text-xl font-bold">销量驱动生产与要货计划</h1>
|
||
</div>
|
||
<MonthPicker month={month} onChange={setMonth} />
|
||
</div>
|
||
|
||
{/* 公式说明 */}
|
||
<div className="rounded-lg border bg-green-50/40 p-3 text-sm text-green-800">
|
||
<strong>预测逻辑：</strong> SKU销量 × 门店BOM = 基础原料需求 ｜ <strong>生产计划：</strong> 各门店要货合计 + 中央厨房安全库存 ｜ <strong>要货建议：</strong> 需求量 - 当前库存 + 安全库存
|
||
</div>
|
||
|
||
{/* 核心指标 - 第一行：菜品与BOM */}
|
||
<div className="grid grid-cols-2 gap-3 md:grid-cols-4">
|
||
<MetricCard title="总菜品数" value={summary.total_dish_count} unit="个" />
|
||
<MetricCard title="有BOM菜品" value={summary.matched_sku_count} unit="个" status="good" />
|
||
<MetricCard title="BOM覆盖率" value={`${summary.bom_coverage_pct}%`} status={summary.bom_coverage_pct >= 50 ? 'good' : 'warn'} />
|
||
<MetricCard title="BOM原料数" value={summary.total_bom_materials} unit="种" />
|
||
</div>
|
||
{/* 核心指标 - 第二行：销售额与生产计划 */}
|
||
<div className="grid grid-cols-2 gap-3 md:grid-cols-3">
|
||
<MetricCard title="匹配销售额" value={summary.matched_amt} format="currency" description="有BOM菜品的销售额" />
|
||
<MetricCard title="总销售额" value={summary.total_sales_amt} format="currency" />
|
||
<MetricCard title="CK生产计划" value={ckProductionPlan.filter((p: any) => p.demand_qty > 0).length} unit="种" status="warn" description="有销量需求的半成品数" />
|
||
</div>
|
||
|
||
{/* BOM覆盖率 + Top原料需求 */}
|
||
<div className="grid grid-cols-1 gap-4 lg:grid-cols-3">
|
||
<CollapsibleSection title="BOM覆盖率" subtitle="有BOM的菜品占比">
|
||
<ResponsiveContainer width="100%" height={250}>
|
||
<PieChart>
|
||
<Pie data={coverageData} dataKey="value" nameKey="name" cx="50%" cy="50%" outerRadius={80} label={(entry: any) => `${entry.name}: ${entry.value}`}>
|
||
{coverageData.map((entry, idx) => (
|
||
<Cell key={idx} fill={entry.fill} />
|
||
))}
|
||
</Pie>
|
||
<Tooltip />
|
||
</PieChart>
|
||
</ResponsiveContainer>
|
||
</CollapsibleSection>
|
||
|
||
<div className="lg:col-span-2">
|
||
<CollapsibleSection title="Top15原料需求" subtitle="按销量×BOM展开的原料需求量">
|
||
<ResponsiveContainer width="100%" height={250}>
|
||
<BarChart data={materialChartData} margin={{ top: 20, right: 30, left: 20, bottom: 5 }}>
|
||
<CartesianGrid strokeDasharray="3 3" />
|
||
<XAxis dataKey="name" tick={{ fontSize: 9 }} angle={-25} textAnchor="end" height={70} />
|
||
<YAxis tick={{ fontSize: 11 }} />
|
||
<Tooltip formatter={(v: any) => formatNumber(v)} />
|
||
<Bar dataKey="需求量" fill="#52c41a" />
|
||
</BarChart>
|
||
</ResponsiveContainer>
|
||
</CollapsibleSection>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 中央厨房生产计划 */}
|
||
<CollapsibleSection title="中央厨房生产计划" subtitle="销量驱动的半成品需求 vs 实际完工入库">
|
||
<div className="mb-3 flex items-center gap-2">
|
||
<Factory className="h-4 w-4 text-purple-600" />
|
||
<span className="text-sm text-muted-foreground">需求量 = 各门店BOM中半成品用量合计，差异 = 需求 - 实际入库</span>
|
||
</div>
|
||
<FilterableTable
|
||
data={ckProductionPlan}
|
||
filterKey="product_name"
|
||
filterLabel="全部产品"
|
||
sortOptions={[
|
||
{ key: 'demand_qty', label: '需求量' },
|
||
{ key: 'actual_inbound_qty', label: '实际入库' },
|
||
{ key: 'variance_qty', label: '差异量' },
|
||
{ key: 'actual_cost', label: '实际成本' },
|
||
{ key: 'store_count', label: '门店数' },
|
||
]}
|
||
defaultSort="demand_qty"
|
||
columns={[
|
||
{ key: 'product_code', label: '产品编码' },
|
||
{ key: 'product_name', label: '产品名称' },
|
||
{ key: 'unit', label: '单位', align: 'right' },
|
||
{ key: 'demand_qty', label: '需求量', align: 'right', render: (r: any) => formatNumber(r.demand_qty) },
|
||
{ key: 'actual_inbound_qty', label: '实际入库', align: 'right', render: (r: any) => formatNumber(r.actual_inbound_qty) },
|
||
{ key: 'variance_qty', label: '差异量', align: 'right', render: (r: any) => (
|
||
<span className={cn(r.variance_qty > 0 ? 'text-red-600' : 'text-green-600')}>{formatNumber(r.variance_qty)}</span>
|
||
) },
|
||
{ key: 'variance_pct', label: '差异率', align: 'right', render: (r: any) => (
|
||
<span className={cn('font-medium', r.variance_pct === null ? 'text-gray-400' : Math.abs(r.variance_pct) <= 10 ? 'text-green-600' : 'text-red-600')}>
|
||
{r.variance_pct === null ? '-' : `${r.variance_pct > 0 ? '+' : ''}${r.variance_pct.toFixed(1)}%`}
|
||
</span>
|
||
) },
|
||
{ key: 'store_count', label: '涉及门店', align: 'right' },
|
||
{ key: 'actual_cost', label: '实际成本', align: 'right', render: (r: any) => formatCurrency(r.actual_cost) },
|
||
]}
|
||
/>
|
||
</CollapsibleSection>
|
||
|
||
{/* 生产与配送协同 */}
|
||
<CollapsibleSection title="生产与配送协同" subtitle="完工入库 → 配送 → 门店消耗 → 期末库存">
|
||
<div className="mb-3 flex items-center gap-2">
|
||
<Truck className="h-4 w-4 text-blue-600" />
|
||
<span className="text-sm text-muted-foreground">完工配送率 = 配送/完工 ｜ 配送消耗率 = 消耗/配送 ｜ 库存积压率 = 期末/消耗</span>
|
||
</div>
|
||
<ResponsiveContainer width="100%" height={300}>
|
||
<BarChart data={coordChartData} margin={{ top: 20, right: 30, left: 20, bottom: 5 }}>
|
||
<CartesianGrid strokeDasharray="3 3" />
|
||
<XAxis dataKey="name" tick={{ fontSize: 9 }} angle={-25} textAnchor="end" height={70} />
|
||
<YAxis tickFormatter={(v) => `${(v / 1000).toFixed(0)}k`} tick={{ fontSize: 11 }} />
|
||
<Tooltip formatter={(v: any) => formatNumber(v)} />
|
||
<Bar dataKey="完工入库" fill="#1677ff" />
|
||
<Bar dataKey="配送量" fill="#52c41a" />
|
||
<Bar dataKey="门店消耗" fill="#faad14" />
|
||
</BarChart>
|
||
</ResponsiveContainer>
|
||
<div className="mt-3">
|
||
<FilterableTable
|
||
data={productionCoord}
|
||
filterKey="product_name"
|
||
filterLabel="全部产品"
|
||
sortOptions={[
|
||
{ key: 'inbound_qty', label: '完工入库' },
|
||
{ key: 'dist_qty', label: '配送量' },
|
||
{ key: 'consumption_qty', label: '门店消耗' },
|
||
{ key: 'ending_qty', label: '期末库存' },
|
||
{ key: 'actual_cost', label: '实际成本' },
|
||
]}
|
||
defaultSort="actual_cost"
|
||
columns={[
|
||
{ key: 'product_code', label: '产品编码' },
|
||
{ key: 'product_name', label: '产品名称' },
|
||
{ key: 'inbound_qty', label: '完工入库', align: 'right', render: (r: any) => formatNumber(r.inbound_qty) },
|
||
{ key: 'dist_qty', label: '配送量', align: 'right', render: (r: any) => formatNumber(r.dist_qty) },
|
||
{ key: 'consumption_qty', label: '门店消耗', align: 'right', render: (r: any) => formatNumber(r.consumption_qty) },
|
||
{ key: 'ending_qty', label: '期末库存', align: 'right', render: (r: any) => formatNumber(r.ending_qty) },
|
||
{ key: 'completion_distribution_rate', label: '完工配送率', align: 'right', render: (r: any) => (
|
||
<span className={rateColorClass(r.completion_distribution_rate)}>{rateText(r.completion_distribution_rate)}</span>
|
||
) },
|
||
{ key: 'distribution_consumption_rate', label: '配送消耗率', align: 'right', render: (r: any) => (
|
||
<span className={rateColorClass(r.distribution_consumption_rate)}>{rateText(r.distribution_consumption_rate)}</span>
|
||
) },
|
||
{ key: 'inventory_accumulation_rate', label: '库存积压率', align: 'right', render: (r: any) => (
|
||
<span className={r.inventory_accumulation_rate === null ? 'text-gray-400' : r.inventory_accumulation_rate > 30 ? 'text-red-600' : 'text-green-600'}>
|
||
{rateText(r.inventory_accumulation_rate)}
|
||
</span>
|
||
) },
|
||
]}
|
||
/>
|
||
</div>
|
||
</CollapsibleSection>
|
||
|
||
{/* 门店要货建议 */}
|
||
<CollapsibleSection title="门店要货建议" subtitle={`${storeDemand.length}家门店的原料需求与库存对比`} defaultOpen={false}>
|
||
<div className="mb-3 flex items-center gap-2">
|
||
<Package className="h-4 w-4 text-green-600" />
|
||
<span className="text-sm text-muted-foreground">建议要货量 = 原料需求量 - 期末库存量，为门店级宏观参考；实际要货请按「原料需求」表逐项确认，注意单位差异</span>
|
||
</div>
|
||
<FilterableTable
|
||
data={storeDemand}
|
||
filterKey="store_name"
|
||
filterLabel="全部门店"
|
||
sortOptions={[
|
||
{ key: 'total_amt', label: '销售额' },
|
||
{ key: 'total_qty', label: '销量' },
|
||
{ key: 'total_material_demand_qty', label: '原料需求量' },
|
||
{ key: 'ending_inventory_amt', label: '期末库存额' },
|
||
{ key: 'suggested_order_qty', label: '建议要货量' },
|
||
{ key: 'sku_count', label: '菜品数' },
|
||
]}
|
||
defaultSort="total_amt"
|
||
columns={[
|
||
{ key: 'store_code', label: '门店编码' },
|
||
{ key: 'store_name', label: '门店名称' },
|
||
{ key: 'sku_count', label: '有BOM菜品数', align: 'right' },
|
||
{ key: 'total_qty', label: '销量', align: 'right', render: (r: any) => formatNumber(r.total_qty) },
|
||
{ key: 'total_amt', label: '销售额', align: 'right', render: (r: any) => formatCurrency(r.total_amt) },
|
||
{ key: 'total_material_demand_qty', label: '原料需求量', align: 'right', render: (r: any) => formatNumber(r.total_material_demand_qty) },
|
||
{ key: 'ending_inventory_qty', label: '期末库存量', align: 'right', render: (r: any) => formatNumber(r.ending_inventory_qty) },
|
||
{ key: 'ending_inventory_amt', label: '期末库存额', align: 'right', render: (r: any) => formatCurrency(r.ending_inventory_amt) },
|
||
{ key: 'suggested_order_qty', label: '建议要货量', align: 'right', render: (r: any) => (
|
||
<span className={cn('font-medium', r.suggested_order_qty > 0 ? 'text-blue-600' : 'text-green-600')}>{formatNumber(r.suggested_order_qty)}</span>
|
||
) },
|
||
]}
|
||
/>
|
||
</CollapsibleSection>
|
||
|
||
{/* 原料需求明细 */}
|
||
<CollapsibleSection title="原料需求明细" subtitle={`${materialDemand.length}种原料的BOM展开需求`} defaultOpen={false}>
|
||
<FilterableTable
|
||
data={materialDemand}
|
||
filterKey="material_name"
|
||
filterLabel="全部原料"
|
||
sortOptions={[
|
||
{ key: 'total_demand_qty', label: '需求量' },
|
||
{ key: 'total_demand_amt', label: '需求金额' },
|
||
{ key: 'store_count', label: '门店数' },
|
||
{ key: 'avg_store_demand', label: '门店均需求' },
|
||
]}
|
||
defaultSort="total_demand_amt"
|
||
columns={[
|
||
{ key: 'material_code', label: '原料编码' },
|
||
{ key: 'material_name', label: '原料名称' },
|
||
{ key: 'unit', label: '单位', align: 'right' },
|
||
{ key: 'total_demand_qty', label: '总需求量', align: 'right', render: (r: any) => formatNumber(r.total_demand_qty) },
|
||
{ key: 'total_demand_amt', label: '总需求金额', align: 'right', render: (r: any) => formatCurrency(r.total_demand_amt) },
|
||
{ key: 'store_count', label: '涉及门店数', align: 'right' },
|
||
{ key: 'avg_store_demand', label: '门店均需求', align: 'right', render: (r: any) => formatNumber(r.avg_store_demand) },
|
||
]}
|
||
/>
|
||
</CollapsibleSection>
|
||
|
||
{/* SKU销量Top50 */}
|
||
<CollapsibleSection title="SKU销量Top50" subtitle="含BOM匹配状态" defaultOpen={false}>
|
||
<FilterableTable
|
||
data={skuSales}
|
||
filterKey="dish_name"
|
||
filterLabel="全部菜品"
|
||
sortOptions={[
|
||
{ key: 'amt', label: '销售额' },
|
||
{ key: 'qty', label: '销量' },
|
||
{ key: 'store_count', label: '门店数' },
|
||
{ key: 'avg_unit_price', label: '均价' },
|
||
{ key: 'material_count', label: '材料数' },
|
||
]}
|
||
defaultSort="amt"
|
||
statusFilterKey="has_bom"
|
||
statusFilterLabel="全部状态"
|
||
statusOptions={[
|
||
{ value: 'true', label: '有BOM' },
|
||
{ value: 'false', label: '无BOM' },
|
||
]}
|
||
columns={[
|
||
{ key: 'dish_name', label: '菜品名称' },
|
||
{ key: 'sku_code', label: 'SKU编码', render: (r: any) => r.sku_code || '-' },
|
||
{ key: 'qty', label: '销量', align: 'right', render: (r: any) => formatNumber(r.qty) },
|
||
{ key: 'amt', label: '销售额', align: 'right', render: (r: any) => formatCurrency(r.amt) },
|
||
{ key: 'store_count', label: '门店数', align: 'right' },
|
||
{ key: 'avg_unit_price', label: '均价', align: 'right', render: (r: any) => formatCurrency(r.avg_unit_price) },
|
||
{ key: 'has_bom', label: '有BOM', align: 'center', render: (r: any) => (
|
||
r.has_bom ? <span className="text-green-600">✓</span> : <span className="text-red-500">✗</span>
|
||
) },
|
||
{ key: 'material_count', label: '材料数', align: 'right', render: (r: any) => r.material_count || '-' },
|
||
]}
|
||
/>
|
||
</CollapsibleSection>
|
||
</div>
|
||
)
|
||
}
|