fix(MainBusinessAnalysis): 优化历史对比表格列标题和边框
- 简化报告类型显示:2024年三季报 -> 24Q3 - 缩小列宽,支持更好的横向滚动 - 移除外层边框和圆角,减少视觉干扰 - 业务列添加 ellipsis 省略过长内容 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -88,19 +88,35 @@ interface HistoricalRowData {
|
|||||||
}
|
}
|
||||||
|
|
||||||
// 历史对比表格组件(整合业务明细)
|
// 历史对比表格组件(整合业务明细)
|
||||||
interface HistoricalComparisonTableProps {
|
export interface HistoricalComparisonTableProps {
|
||||||
historicalData: (ProductClassification | IndustryClassification)[];
|
historicalData: (ProductClassification | IndustryClassification)[];
|
||||||
businessItems: BusinessItem[];
|
businessItems: BusinessItem[];
|
||||||
hasProductData: boolean;
|
hasProductData: boolean;
|
||||||
latestReportType: string;
|
latestReportType: string;
|
||||||
|
/** 是否隐藏标题(用于弹窗中避免重复) */
|
||||||
|
hideTitle?: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
const HistoricalComparisonTable: React.FC<HistoricalComparisonTableProps> = ({
|
export const HistoricalComparisonTable: React.FC<HistoricalComparisonTableProps> = ({
|
||||||
historicalData,
|
historicalData,
|
||||||
businessItems,
|
businessItems,
|
||||||
hasProductData,
|
hasProductData,
|
||||||
latestReportType,
|
latestReportType,
|
||||||
|
hideTitle = false,
|
||||||
}) => {
|
}) => {
|
||||||
|
// 简化报告类型显示(2024年三季报 -> 24Q3)
|
||||||
|
const formatReportType = (reportType: string): string => {
|
||||||
|
const match = reportType.match(/(\d{4})年(.+)/);
|
||||||
|
if (!match) return reportType;
|
||||||
|
const year = match[1].slice(2); // 2024 -> 24
|
||||||
|
const type = match[2];
|
||||||
|
if (type.includes('一季')) return `${year}Q1`;
|
||||||
|
if (type.includes('中报') || type.includes('半年')) return `${year}Q2`;
|
||||||
|
if (type.includes('三季')) return `${year}Q3`;
|
||||||
|
if (type.includes('年报')) return `${year}Y`;
|
||||||
|
return `${year}`;
|
||||||
|
};
|
||||||
|
|
||||||
// 动态生成列配置
|
// 动态生成列配置
|
||||||
const columns: ColumnsType<HistoricalRowData> = useMemo(() => {
|
const columns: ColumnsType<HistoricalRowData> = useMemo(() => {
|
||||||
const cols: ColumnsType<HistoricalRowData> = [
|
const cols: ColumnsType<HistoricalRowData> = [
|
||||||
@@ -109,23 +125,24 @@ const HistoricalComparisonTable: React.FC<HistoricalComparisonTableProps> = ({
|
|||||||
dataIndex: 'business',
|
dataIndex: 'business',
|
||||||
key: 'business',
|
key: 'business',
|
||||||
fixed: 'left',
|
fixed: 'left',
|
||||||
width: 150,
|
width: 120,
|
||||||
|
ellipsis: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: `毛利率(${latestReportType})`,
|
title: `毛利率`,
|
||||||
dataIndex: 'grossMargin',
|
dataIndex: 'grossMargin',
|
||||||
key: 'grossMargin',
|
key: 'grossMargin',
|
||||||
align: 'right',
|
align: 'right',
|
||||||
width: 120,
|
width: 80,
|
||||||
render: (value: number | undefined) =>
|
render: (value: number | undefined) =>
|
||||||
value !== undefined ? formatUtils.formatPercent(value) : '-',
|
value !== undefined ? formatUtils.formatPercent(value) : '-',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: `利润(${latestReportType})`,
|
title: `利润`,
|
||||||
dataIndex: 'profit',
|
dataIndex: 'profit',
|
||||||
key: 'profit',
|
key: 'profit',
|
||||||
align: 'right',
|
align: 'right',
|
||||||
width: 100,
|
width: 90,
|
||||||
render: (value: number | undefined) =>
|
render: (value: number | undefined) =>
|
||||||
value !== undefined ? formatUtils.formatLargeNumber(value) : '-',
|
value !== undefined ? formatUtils.formatLargeNumber(value) : '-',
|
||||||
},
|
},
|
||||||
@@ -133,12 +150,13 @@ const HistoricalComparisonTable: React.FC<HistoricalComparisonTableProps> = ({
|
|||||||
|
|
||||||
// 添加各期间营收列
|
// 添加各期间营收列
|
||||||
historicalData.slice(0, 4).forEach((period) => {
|
historicalData.slice(0, 4).forEach((period) => {
|
||||||
|
const shortPeriod = formatReportType(period.report_type);
|
||||||
cols.push({
|
cols.push({
|
||||||
title: `营收(${period.report_type})`,
|
title: shortPeriod,
|
||||||
dataIndex: period.period,
|
dataIndex: period.period,
|
||||||
key: period.period,
|
key: period.period,
|
||||||
align: 'right',
|
align: 'right',
|
||||||
width: 120,
|
width: 90,
|
||||||
render: (value: number | string | undefined) =>
|
render: (value: number | string | undefined) =>
|
||||||
value !== undefined && value !== '-'
|
value !== undefined && value !== '-'
|
||||||
? formatUtils.formatLargeNumber(value as number)
|
? formatUtils.formatLargeNumber(value as number)
|
||||||
@@ -179,20 +197,19 @@ const HistoricalComparisonTable: React.FC<HistoricalComparisonTableProps> = ({
|
|||||||
return (
|
return (
|
||||||
<Box
|
<Box
|
||||||
bg={THEME.cardBg}
|
bg={THEME.cardBg}
|
||||||
border="1px solid"
|
|
||||||
borderColor={THEME.border}
|
|
||||||
borderRadius="md"
|
|
||||||
overflow="hidden"
|
overflow="hidden"
|
||||||
h="100%"
|
h="100%"
|
||||||
className="main-business-table"
|
className="main-business-table"
|
||||||
>
|
>
|
||||||
<style>{fixedColumnStyles}</style>
|
<style>{fixedColumnStyles}</style>
|
||||||
<Box px={4} py={3} borderBottom="1px solid" borderColor={THEME.border}>
|
{!hideTitle && (
|
||||||
<Heading size="sm" color={THEME.headingColor}>
|
<Box px={4} py={3} borderBottom="1px solid" borderColor={THEME.border}>
|
||||||
主营业务明细与历史对比
|
<Heading size="sm" color={THEME.headingColor}>
|
||||||
</Heading>
|
主营业务明细与历史对比
|
||||||
</Box>
|
</Heading>
|
||||||
<Box p={4} overflowX="auto">
|
</Box>
|
||||||
|
)}
|
||||||
|
<Box p={2} overflowX="auto">
|
||||||
<ConfigProvider theme={BLACK_GOLD_THEME}>
|
<ConfigProvider theme={BLACK_GOLD_THEME}>
|
||||||
<AntTable<HistoricalRowData>
|
<AntTable<HistoricalRowData>
|
||||||
columns={columns}
|
columns={columns}
|
||||||
|
|||||||
Reference in New Issue
Block a user