178 lines
8.4 KiB
TypeScript
178 lines
8.4 KiB
TypeScript
import React, { useState, useEffect } from 'react';
|
|
import { Card, Typography, Table, DatePicker, Row, Col, Statistic, Tag, Spin } from 'antd';
|
|
import { RiseOutlined, FallOutlined, DollarOutlined } from '@ant-design/icons';
|
|
import apiClient from '../../utils/request';
|
|
import dayjs from 'dayjs';
|
|
|
|
const { Title, Paragraph } = Typography;
|
|
|
|
const LEVEL2_LABELS: Record<string, string> = {
|
|
contract_payment: '项目合同收款', deposit_refund: '质保金退回', shareholder_investment: '股东投资入股', other_income: '其他收入',
|
|
material: '材料采购', equipment: '设备采购', subcontract: '施工分包', labor: '人工工资',
|
|
travel: '差旅交通', accommodation: '食宿费用', freight: '运输物流', design: '勘测设计',
|
|
tools: '小型工具', client_relations: '客户/EDL关系', other_project: '其他项目支出',
|
|
salary: '工资薪酬', rent: '房租物业', office: '办公费用', commute: '交通通勤',
|
|
vehicle_maintenance: '车辆维保', assets: '固定资产', marketing: '营销拓展',
|
|
entertainment: '招待费用', welfare: '员工福利', logistics: '快递物流', other_company: '其他公司支出'
|
|
};
|
|
|
|
const ReportsPage: React.FC = () => {
|
|
const [loading, setLoading] = useState(false);
|
|
const [isMobile, setIsMobile] = useState(false);
|
|
const [summary, setSummary] = useState<any>({ total_income: 0, total_expense: 0, net_profit: 0 });
|
|
const [byMonth, setByMonth] = useState<any[]>([]);
|
|
const [byCategory, setByCategory] = useState<any[]>([]);
|
|
const [selectedMonth, setSelectedMonth] = useState<dayjs.Dayjs | null>(null);
|
|
|
|
useEffect(() => {
|
|
const checkMobile = () => setIsMobile(window.innerWidth <= 768);
|
|
checkMobile();
|
|
window.addEventListener('resize', checkMobile);
|
|
return () => window.removeEventListener('resize', checkMobile);
|
|
}, []);
|
|
|
|
const fetchData = async () => {
|
|
setLoading(true);
|
|
try {
|
|
const params: any = {};
|
|
if (selectedMonth) {
|
|
params.date_from = selectedMonth.startOf('month').format('YYYY-MM-DD');
|
|
params.date_to = selectedMonth.endOf('month').format('YYYY-MM-DD');
|
|
}
|
|
const res = await apiClient.get('/financial-records/summary', { params });
|
|
if (res.data.success) {
|
|
setSummary(res.data.data.totals);
|
|
setByMonth(res.data.data.byMonth);
|
|
setByCategory(res.data.data.byCategory);
|
|
}
|
|
} catch (e) { console.error(e); }
|
|
setLoading(false);
|
|
};
|
|
|
|
useEffect(() => { fetchData(); }, [selectedMonth]);
|
|
|
|
const monthData = byMonth.map(m => ({
|
|
...m,
|
|
profit: m.income - m.expense
|
|
}));
|
|
|
|
const desktopColumns = [
|
|
{ title: '月份', dataIndex: 'month', key: 'month' },
|
|
{ title: '总收入', dataIndex: 'income', key: 'income', render: (v: number) => `¥${parseFloat(v).toLocaleString()}` },
|
|
{ title: '总支出', dataIndex: 'expense', key: 'expense', render: (v: number) => `¥${parseFloat(v).toLocaleString()}` },
|
|
{
|
|
title: '净利润', dataIndex: 'profit', key: 'profit',
|
|
render: (v: number) => <span style={{ color: v >= 0 ? 'green' : 'red', fontWeight: 'bold' }}>¥{v.toLocaleString()}</span>
|
|
},
|
|
];
|
|
|
|
const mobileColumns = [
|
|
{ title: '月份', dataIndex: 'month', key: 'month', render: (v: string) => v.replace('-', '/') },
|
|
{ title: '收入', dataIndex: 'income', key: 'income', render: (v: number) => <span style={{ color: 'green' }}>¥{(parseFloat(v) / 10000).toFixed(1)}万</span> },
|
|
{ title: '支出', dataIndex: 'expense', key: 'expense', render: (v: number) => <span style={{ color: 'red' }}>¥{(parseFloat(v) / 10000).toFixed(1)}万</span> },
|
|
{
|
|
title: '利润', dataIndex: 'profit', key: 'profit',
|
|
render: (v: number) => <b style={{ color: v >= 0 ? 'green' : 'red' }}>¥{(v / 10000).toFixed(1)}万</b>
|
|
},
|
|
];
|
|
|
|
const categoryColumns = [
|
|
{ title: '分类', dataIndex: 'category_level2', render: (v: string) => LEVEL2_LABELS[v] || v },
|
|
{ title: '金额(¥)', dataIndex: 'total_amount', render: (v: number) => parseFloat(v).toLocaleString(), align: 'right' as const },
|
|
{ title: '笔数', dataIndex: 'count', align: 'center' as const },
|
|
{
|
|
title: '占比', render: (_: unknown, r: any) => {
|
|
const total = byCategory.filter(c => c.category_level1 === r.category_level1).reduce((s, c) => s + parseFloat(c.total_amount), 0);
|
|
return total > 0 ? `${(parseFloat(r.total_amount) / total * 100).toFixed(1)}%` : '-';
|
|
}
|
|
},
|
|
];
|
|
|
|
const projectCategories = byCategory.filter(c => c.category_level1 === 'project');
|
|
const companyCategories = byCategory.filter(c => c.category_level1 === 'company');
|
|
const incomeCategories = byCategory.filter(c => c.category_level1 === 'income');
|
|
|
|
return (
|
|
<div style={{ padding: isMobile ? 8 : 24 }}>
|
|
<div style={{ marginBottom: isMobile ? 12 : 24 }}>
|
|
<Title level={isMobile ? 3 : 2} style={{ marginBottom: 8 }}>统计报表</Title>
|
|
<Paragraph type="secondary" style={{ marginBottom: 0 }}>查看项目财务报表和统计分析数据</Paragraph>
|
|
</div>
|
|
|
|
<Row gutter={[8, 8]} style={{ marginBottom: 16 }}>
|
|
<Col xs={8} sm={8}>
|
|
<Card size="small" style={{ textAlign: 'center' }}>
|
|
<Statistic title="总收入" value={summary.total_income} prefix="¥" valueStyle={{ color: '#3f8600', fontSize: isMobile ? 16 : undefined }} />
|
|
</Card>
|
|
</Col>
|
|
<Col xs={8} sm={8}>
|
|
<Card size="small" style={{ textAlign: 'center' }}>
|
|
<Statistic title="总支出" value={summary.total_expense} prefix="¥" valueStyle={{ color: '#cf1322', fontSize: isMobile ? 16 : undefined }} />
|
|
</Card>
|
|
</Col>
|
|
<Col xs={8} sm={8}>
|
|
<Card size="small" style={{ textAlign: 'center' }}>
|
|
<Statistic title="净利润" value={summary.net_profit} prefix="¥" valueStyle={{ color: summary.net_profit >= 0 ? '#3f8600' : '#cf1322', fontSize: isMobile ? 16 : undefined }} />
|
|
</Card>
|
|
</Col>
|
|
</Row>
|
|
|
|
<Card title="月度财务报表" size="small" style={{ marginBottom: 16 }}
|
|
extra={<DatePicker picker="month" size="small" allowClear onChange={(d) => setSelectedMonth(d)} placeholder="选择月份" />}
|
|
>
|
|
<Spin spinning={loading}>
|
|
<Table
|
|
dataSource={monthData}
|
|
columns={isMobile ? mobileColumns : desktopColumns}
|
|
rowKey="month"
|
|
pagination={false}
|
|
size={isMobile ? 'small' : 'middle'}
|
|
summary={(pageData) => {
|
|
let ti = 0, te = 0;
|
|
pageData.forEach(({ income, expense }) => { ti += parseFloat(income); te += parseFloat(expense); });
|
|
return (
|
|
<Table.Summary fixed>
|
|
<Table.Summary.Row>
|
|
<Table.Summary.Cell index={0}><strong>合计</strong></Table.Summary.Cell>
|
|
<Table.Summary.Cell index={1}><strong>¥{ti.toLocaleString()}</strong></Table.Summary.Cell>
|
|
<Table.Summary.Cell index={2}><strong>¥{te.toLocaleString()}</strong></Table.Summary.Cell>
|
|
<Table.Summary.Cell index={3}>
|
|
<strong style={{ color: ti - te >= 0 ? 'green' : 'red' }}>¥{(ti - te).toLocaleString()}</strong>
|
|
</Table.Summary.Cell>
|
|
</Table.Summary.Row>
|
|
</Table.Summary>
|
|
);
|
|
}}
|
|
/>
|
|
</Spin>
|
|
</Card>
|
|
|
|
<Row gutter={[16, 16]}>
|
|
{incomeCategories.length > 0 && (
|
|
<Col xs={24} md={8}>
|
|
<Card title={<span><Tag color="green">收入</Tag>收入分类</span>} size="small">
|
|
<Table dataSource={incomeCategories} columns={categoryColumns} rowKey="category_level2" pagination={false} size="small" />
|
|
</Card>
|
|
</Col>
|
|
)}
|
|
{projectCategories.length > 0 && (
|
|
<Col xs={24} md={8}>
|
|
<Card title={<span><Tag color="blue">项目</Tag>项目支出分类</span>} size="small">
|
|
<Table dataSource={projectCategories} columns={categoryColumns} rowKey="category_level2" pagination={false} size="small" />
|
|
</Card>
|
|
</Col>
|
|
)}
|
|
{companyCategories.length > 0 && (
|
|
<Col xs={24} md={8}>
|
|
<Card title={<span><Tag color="orange">公司</Tag>公司支出分类</span>} size="small">
|
|
<Table dataSource={companyCategories} columns={categoryColumns} rowKey="category_level2" pagination={false} size="small" />
|
|
</Card>
|
|
</Col>
|
|
)}
|
|
</Row>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ReportsPage;
|