diff --git a/src/views/Company/components/FinancialPanorama/components/MainBusinessAnalysis.tsx b/src/views/Company/components/FinancialPanorama/components/MainBusinessAnalysis.tsx index f9538f0a..98ff1d8f 100644 --- a/src/views/Company/components/FinancialPanorama/components/MainBusinessAnalysis.tsx +++ b/src/views/Company/components/FinancialPanorama/components/MainBusinessAnalysis.tsx @@ -4,18 +4,9 @@ import React, { useMemo } from 'react'; import { - VStack, - Grid, - GridItem, + Flex, Box, Heading, - Table, - Thead, - Tbody, - Tr, - Th, - Td, - TableContainer, Alert, AlertIcon, } from '@chakra-ui/react'; @@ -45,7 +36,7 @@ const BLACK_GOLD_THEME = { algorithm: antTheme.darkAlgorithm, token: { colorPrimary: '#D4AF37', - colorBgContainer: 'transparent', + colorBgContainer: '#1A202C', colorBgElevated: '#1a1a2e', colorBorder: 'rgba(212, 175, 55, 0.3)', colorText: '#e0e0e0', @@ -65,41 +56,79 @@ const BLACK_GOLD_THEME = { }, }; -// 历史对比表格数据行类型 +// 固定列背景样式(防止滚动时内容重叠) +const fixedColumnStyles = ` + .main-business-table .ant-table-cell-fix-left, + .main-business-table .ant-table-cell-fix-right { + background: #1A202C !important; + } + .main-business-table .ant-table-thead .ant-table-cell-fix-left, + .main-business-table .ant-table-thead .ant-table-cell-fix-right { + background: rgba(26, 32, 44, 0.95) !important; + } + .main-business-table .ant-table-tbody > tr:hover .ant-table-cell-fix-left, + .main-business-table .ant-table-tbody > tr:hover .ant-table-cell-fix-right { + background: rgba(212, 175, 55, 0.08) !important; + } +`; + +// 历史对比表格数据行类型(包含业务明细) interface HistoricalRowData { key: string; business: string; + grossMargin?: number; + profit?: number; [period: string]: string | number | undefined; } -// 历史对比表格组件 +// 历史对比表格组件(整合业务明细) interface HistoricalComparisonTableProps { historicalData: (ProductClassification | IndustryClassification)[]; businessItems: BusinessItem[]; hasProductData: boolean; + latestReportType: string; } const HistoricalComparisonTable: React.FC = ({ historicalData, businessItems, hasProductData, + latestReportType, }) => { // 动态生成列配置 const columns: ColumnsType = useMemo(() => { const cols: ColumnsType = [ { - title: '业务/期间', + title: '业务', dataIndex: 'business', key: 'business', fixed: 'left', width: 150, }, + { + title: `毛利率(${latestReportType})`, + dataIndex: 'grossMargin', + key: 'grossMargin', + align: 'right', + width: 120, + render: (value: number | undefined) => + value !== undefined ? formatUtils.formatPercent(value) : '-', + }, + { + title: `利润(${latestReportType})`, + dataIndex: 'profit', + key: 'profit', + align: 'right', + width: 100, + render: (value: number | undefined) => + value !== undefined ? formatUtils.formatLargeNumber(value) : '-', + }, ]; - // 添加各期间列 + // 添加各期间营收列 historicalData.slice(0, 4).forEach((period) => { cols.push({ - title: period.report_type, + title: `营收(${period.report_type})`, dataIndex: period.period, key: period.period, align: 'right', @@ -112,9 +141,9 @@ const HistoricalComparisonTable: React.FC = ({ }); return cols; - }, [historicalData]); + }, [historicalData, latestReportType]); - // 生成表格数据 + // 生成表格数据(包含业务明细) const dataSource: HistoricalRowData[] = useMemo(() => { return businessItems .filter((item: BusinessItem) => item.content !== '合计') @@ -122,8 +151,11 @@ const HistoricalComparisonTable: React.FC = ({ const row: HistoricalRowData = { key: `${idx}`, business: item.content, + grossMargin: item.gross_margin || item.profit_margin, + profit: item.profit, }; + // 添加各期间营收数据 historicalData.slice(0, 4).forEach((period) => { const periodItems: BusinessItem[] = hasProductData ? (period as ProductClassification).products @@ -145,13 +177,16 @@ const HistoricalComparisonTable: React.FC = ({ borderColor={THEME.border} borderRadius="md" overflow="hidden" + h="100%" + className="main-business-table" > + - 主营业务历史对比 + 主营业务明细与历史对比 - + columns={columns} @@ -218,77 +253,35 @@ export const MainBusinessAnalysis: React.FC = ({ : (mainBusiness!.industry_classification! as IndustryClassification[]); return ( - - - - - - - - - - - - 业务明细 - {latestPeriod.report_type} - - - - - - - - - - - - - - - {businessItems - .filter((item: BusinessItem) => item.content !== '合计') - .map((item: BusinessItem, idx: number) => ( - - - - - - - ))} - -
业务营收毛利率(%)利润
{item.content} - {formatUtils.formatLargeNumber(item.revenue)} - - {formatUtils.formatPercent(item.gross_margin || item.profit_margin)} - - {formatUtils.formatLargeNumber(item.profit)} -
-
-
-
-
-
+ + {/* 左侧:饼图 */} + + + - {/* 历史对比 - Ant Design Table 黑金主题 */} - {historicalData.length > 1 && ( - - )} -
+ {/* 右侧:业务明细与历史对比表格 */} + + {historicalData.length > 0 && ( + + )} + + ); };