2678 lines
126 KiB
JavaScript
2678 lines
126 KiB
JavaScript
import React, { useState, useEffect } from 'react';
|
||
import {
|
||
Box, VStack, HStack, Text, Badge, Card, CardBody, CardHeader,
|
||
Heading, SimpleGrid, Divider, Spinner, Center, Alert, AlertIcon,
|
||
Tabs, TabList, TabPanels, Tab, TabPanel, Button, useColorModeValue,
|
||
Tag, TagLabel, Icon, Tooltip, Flex, Grid, GridItem, useToast,
|
||
Table, Thead, Tbody, Tr, Th, Td, TableContainer, IconButton,
|
||
Skeleton, SkeletonText, Progress, Stack, Stat, StatLabel, StatNumber,
|
||
StatHelpText, Container, Wrap, WrapItem, List, ListItem,
|
||
ListIcon, Accordion, AccordionItem, AccordionButton, AccordionPanel,
|
||
AccordionIcon, Fade, ScaleFade, useDisclosure, Modal, ModalOverlay,
|
||
ModalContent, ModalHeader, ModalFooter, ModalBody, ModalCloseButton,
|
||
Circle, Square, Avatar, AvatarGroup, Input, InputGroup, InputLeftElement,
|
||
Link, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Image, Code,
|
||
chakra
|
||
} from '@chakra-ui/react';
|
||
|
||
import {
|
||
FaBuilding, FaMapMarkerAlt, FaChartLine, FaLightbulb, FaRocket,
|
||
FaNetworkWired, FaChevronDown, FaChevronUp, FaChevronLeft, FaChevronRight,
|
||
FaCog, FaTrophy, FaShieldAlt, FaBrain, FaChartPie, FaHistory, FaCheckCircle,
|
||
FaExclamationCircle, FaArrowUp, FaArrowDown, FaArrowRight, FaArrowLeft,
|
||
FaLink, FaStar, FaUserTie, FaIndustry, FaDollarSign, FaBalanceScale, FaChartBar,
|
||
FaEye, FaFlask, FaHandshake, FaUsers, FaClock, FaCalendarAlt,
|
||
FaCircle, FaGlobe, FaEnvelope, FaPhone, FaFax, FaBriefcase,
|
||
FaUniversity, FaGraduationCap, FaVenusMars, FaPassport, FaFileAlt,
|
||
FaNewspaper, FaBullhorn, FaUserShield, FaShareAlt, FaSitemap,
|
||
FaSearch, FaDownload, FaExternalLinkAlt, FaInfoCircle, FaCrown,
|
||
FaCertificate, FaAward, FaExpandAlt, FaCompressAlt, FaGavel, FaFire
|
||
} from 'react-icons/fa';
|
||
|
||
import {
|
||
RepeatIcon, InfoIcon, ChevronRightIcon, TimeIcon, EmailIcon,
|
||
PhoneIcon, ExternalLinkIcon, AttachmentIcon, CalendarIcon, SearchIcon,
|
||
WarningIcon, CheckIcon
|
||
} from '@chakra-ui/icons';
|
||
|
||
import ReactECharts from 'echarts-for-react';
|
||
import { logger } from '../../utils/logger';
|
||
import { getApiBase } from '../../utils/apiConfig';
|
||
|
||
// API配置
|
||
const API_BASE_URL = getApiBase();
|
||
|
||
// 格式化工具
|
||
const formatUtils = {
|
||
formatCurrency: (value) => {
|
||
if (!value && value !== 0) return '-';
|
||
const absValue = Math.abs(value);
|
||
if (absValue >= 100000000) {
|
||
return (value / 100000000).toFixed(2) + '亿元';
|
||
} else if (absValue >= 10000) {
|
||
return (value / 10000).toFixed(2) + '万元';
|
||
}
|
||
return value.toFixed(2) + '元';
|
||
},
|
||
formatRegisteredCapital: (value) => {
|
||
// 注册资本字段，数据库存储的是万元为单位的数值
|
||
if (!value && value !== 0) return '-';
|
||
const absValue = Math.abs(value);
|
||
if (absValue >= 100000) { // 10亿万元 = 10亿元
|
||
return (value / 10000).toFixed(2) + '亿元';
|
||
}
|
||
return value.toFixed(2) + '万元';
|
||
},
|
||
formatBusinessRevenue: (value, unit) => {
|
||
// 业务收入格式化，考虑数据库中的单位字段
|
||
if (!value && value !== 0) return '-';
|
||
|
||
if (unit) {
|
||
// 根据数据库中的单位进行智能格式化
|
||
if (unit === '元') {
|
||
// 元为单位时，自动转换为合适的单位显示
|
||
const absValue = Math.abs(value);
|
||
if (absValue >= 100000000) {
|
||
return (value / 100000000).toFixed(2) + '亿元';
|
||
} else if (absValue >= 10000) {
|
||
return (value / 10000).toFixed(2) + '万元';
|
||
}
|
||
return value.toFixed(0) + '元';
|
||
} else if (unit === '万元') {
|
||
// 万元为单位时，可能需要转换为亿元
|
||
const absValue = Math.abs(value);
|
||
if (absValue >= 10000) {
|
||
return (value / 10000).toFixed(2) + '亿元';
|
||
}
|
||
return value.toFixed(2) + '万元';
|
||
} else if (unit === '亿元') {
|
||
// 亿元为单位时，直接显示
|
||
return value.toFixed(2) + '亿元';
|
||
} else {
|
||
// 其他单位直接显示
|
||
return value.toFixed(2) + unit;
|
||
}
|
||
}
|
||
|
||
// 没有单位字段时，使用默认的货币格式化
|
||
const absValue = Math.abs(value);
|
||
if (absValue >= 100000000) {
|
||
return (value / 100000000).toFixed(2) + '亿元';
|
||
} else if (absValue >= 10000) {
|
||
return (value / 10000).toFixed(2) + '万元';
|
||
}
|
||
return value.toFixed(2) + '元';
|
||
},
|
||
formatPercentage: (value) => {
|
||
if (!value && value !== 0) return '-';
|
||
return value.toFixed(2) + '%';
|
||
},
|
||
formatNumber: (value) => {
|
||
if (!value && value !== 0) return '-';
|
||
return value.toLocaleString('zh-CN');
|
||
},
|
||
formatDate: (dateString) => {
|
||
if (!dateString) return '-';
|
||
return new Date(dateString).toLocaleDateString('zh-CN');
|
||
},
|
||
formatShares: (value) => {
|
||
if (!value && value !== 0) return '-';
|
||
const absValue = Math.abs(value);
|
||
if (absValue >= 100000000) {
|
||
return (value / 100000000).toFixed(2) + '亿股';
|
||
} else if (absValue >= 10000) {
|
||
return (value / 10000).toFixed(2) + '万股';
|
||
}
|
||
return value.toFixed(0) + '股';
|
||
}
|
||
};
|
||
|
||
// 免责声明组件
|
||
const DisclaimerBox = () => {
|
||
return (
|
||
<Alert status="warning" variant="left-accent" mb={4}>
|
||
<AlertIcon />
|
||
<Box fontSize="xs" lineHeight="1.4">
|
||
<Text fontWeight="medium" mb={1}>免责声明</Text>
|
||
<Text>
|
||
本内容由AI模型基于新闻、公告、研报等公开信息自动分析和生成，未经许可严禁转载。
|
||
所有内容仅供参考，不构成任何投资建议，请投资者注意风险，独立审慎决策。
|
||
</Text>
|
||
</Box>
|
||
</Alert>
|
||
);
|
||
};
|
||
|
||
// 评分进度条组件
|
||
const ScoreBar = ({ label, score, maxScore = 100, colorScheme = 'blue', icon }) => {
|
||
const percentage = (score / maxScore) * 100;
|
||
const getColorScheme = () => {
|
||
if (percentage >= 80) return 'purple';
|
||
if (percentage >= 60) return 'blue';
|
||
if (percentage >= 40) return 'yellow';
|
||
return 'orange';
|
||
};
|
||
|
||
return (
|
||
<Box>
|
||
<HStack justify="space-between" mb={1}>
|
||
<HStack>
|
||
{icon && <Icon as={icon} boxSize={4} color={`${getColorScheme()}.500`} />}
|
||
<Text fontSize="sm" fontWeight="medium">{label}</Text>
|
||
</HStack>
|
||
<Badge colorScheme={getColorScheme()}>{score || 0}</Badge>
|
||
</HStack>
|
||
<Progress
|
||
value={percentage}
|
||
size="sm"
|
||
colorScheme={getColorScheme()}
|
||
borderRadius="full"
|
||
hasStripe
|
||
isAnimated
|
||
/>
|
||
</Box>
|
||
);
|
||
};
|
||
|
||
// 业务结构树形图组件
|
||
const BusinessTreeItem = ({ business, depth = 0 }) => {
|
||
const bgColor = useColorModeValue('gray.50', 'gray.700');
|
||
const borderColor = useColorModeValue('gray.200', 'gray.600');
|
||
const profitColor = business.financial_metrics?.profit_growth > 0 ? 'red.500' : 'green.500';
|
||
|
||
return (
|
||
<Box
|
||
ml={depth * 6}
|
||
p={3}
|
||
bg={bgColor}
|
||
borderLeft={depth > 0 ? `4px solid` : 'none'}
|
||
borderLeftColor="blue.400"
|
||
borderRadius="md"
|
||
mb={2}
|
||
_hover={{ shadow: 'md' }}
|
||
transition="all 0.2s"
|
||
>
|
||
<HStack justify="space-between">
|
||
<VStack align="start" spacing={1}>
|
||
<HStack>
|
||
<Text fontWeight="bold" fontSize={depth === 0 ? 'md' : 'sm'}>
|
||
{business.business_name}
|
||
</Text>
|
||
{business.financial_metrics?.revenue_ratio > 30 && (
|
||
<Badge colorScheme="purple" size="sm">核心业务</Badge>
|
||
)}
|
||
</HStack>
|
||
<HStack spacing={4} flexWrap="wrap">
|
||
<Tag size="sm" variant="subtle">
|
||
营收占比: {formatUtils.formatPercentage(business.financial_metrics?.revenue_ratio)}
|
||
</Tag>
|
||
<Tag size="sm" variant="subtle">
|
||
毛利率: {formatUtils.formatPercentage(business.financial_metrics?.gross_margin)}
|
||
</Tag>
|
||
{business.growth_metrics?.revenue_growth && (
|
||
<Tag size="sm" colorScheme={business.growth_metrics.revenue_growth > 0 ? 'red' : 'green'}>
|
||
<TagLabel>
|
||
增长: {business.growth_metrics.revenue_growth > 0 ? '+' : ''}{formatUtils.formatPercentage(business.growth_metrics.revenue_growth)}
|
||
</TagLabel>
|
||
</Tag>
|
||
)}
|
||
</HStack>
|
||
</VStack>
|
||
<VStack align="end" spacing={0}>
|
||
<Text fontSize="lg" fontWeight="bold" color="blue.500">
|
||
{(() => {
|
||
// 优先使用business.revenue，如果没有则使用financial_metrics.revenue
|
||
const revenue = business.revenue || business.financial_metrics?.revenue;
|
||
const unit = business.revenue_unit;
|
||
if (revenue || revenue === 0) {
|
||
return formatUtils.formatBusinessRevenue(revenue, unit);
|
||
}
|
||
return '-';
|
||
})()}
|
||
</Text>
|
||
<Text fontSize="xs" color="gray.500">营业收入</Text>
|
||
</VStack>
|
||
</HStack>
|
||
</Box>
|
||
);
|
||
};
|
||
|
||
// 产业链节点卡片
|
||
const ValueChainNodeCard = ({ node, isCompany = false, level = 0 }) => {
|
||
const { isOpen, onOpen, onClose } = useDisclosure();
|
||
const [relatedCompanies, setRelatedCompanies] = useState([]);
|
||
const [loadingRelated, setLoadingRelated] = useState(false);
|
||
const toast = useToast();
|
||
|
||
const getColorScheme = () => {
|
||
if (isCompany) return 'blue';
|
||
if (level < 0) return 'orange';
|
||
if (level > 0) return 'green';
|
||
return 'gray';
|
||
};
|
||
|
||
const colorScheme = getColorScheme();
|
||
const bgColor = useColorModeValue(`${colorScheme}.50`, `${colorScheme}.900`);
|
||
const borderColor = useColorModeValue(`${colorScheme}.200`, `${colorScheme}.600`);
|
||
|
||
const getNodeTypeIcon = (type) => {
|
||
const icons = {
|
||
'company': FaBuilding,
|
||
'supplier': FaHandshake,
|
||
'customer': FaUserTie,
|
||
'product': FaIndustry,
|
||
'service': FaCog,
|
||
'channel': FaNetworkWired,
|
||
'raw_material': FaFlask
|
||
};
|
||
return icons[type] || FaBuilding;
|
||
};
|
||
|
||
const getImportanceColor = (score) => {
|
||
if (score >= 80) return 'red';
|
||
if (score >= 60) return 'orange';
|
||
if (score >= 40) return 'yellow';
|
||
return 'green';
|
||
};
|
||
|
||
// 获取相关公司
|
||
const fetchRelatedCompanies = async () => {
|
||
setLoadingRelated(true);
|
||
try {
|
||
const response = await fetch(
|
||
`${API_BASE_URL}/api/company/value-chain/related-companies?node_name=${encodeURIComponent(node.node_name)}`
|
||
);
|
||
const data = await response.json();
|
||
if (data.success) {
|
||
setRelatedCompanies(data.data || []);
|
||
} else {
|
||
toast({
|
||
title: '获取相关公司失败',
|
||
description: data.message,
|
||
status: 'error',
|
||
duration: 3000,
|
||
isClosable: true,
|
||
});
|
||
}
|
||
} catch (error) {
|
||
logger.error('ValueChainNodeCard', 'fetchRelatedCompanies', error, { node_name: node.node_name });
|
||
toast({
|
||
title: '获取相关公司失败',
|
||
description: error.message,
|
||
status: 'error',
|
||
duration: 3000,
|
||
isClosable: true,
|
||
});
|
||
} finally {
|
||
setLoadingRelated(false);
|
||
}
|
||
};
|
||
|
||
const handleCardClick = () => {
|
||
onOpen();
|
||
if (relatedCompanies.length === 0) {
|
||
fetchRelatedCompanies();
|
||
}
|
||
};
|
||
|
||
return (
|
||
<>
|
||
<ScaleFade in={true} initialScale={0.9}>
|
||
<Card
|
||
bg={bgColor}
|
||
borderColor={borderColor}
|
||
borderWidth={isCompany ? 3 : 1}
|
||
shadow={isCompany ? 'lg' : 'sm'}
|
||
cursor="pointer"
|
||
onClick={handleCardClick}
|
||
_hover={{
|
||
shadow: 'xl',
|
||
transform: 'translateY(-4px)',
|
||
borderColor: `${colorScheme}.400`
|
||
}}
|
||
transition="all 0.3s ease"
|
||
minH="140px"
|
||
>
|
||
<CardBody p={4}>
|
||
<VStack spacing={3} align="stretch">
|
||
<HStack justify="space-between">
|
||
<HStack spacing={2}>
|
||
<Icon
|
||
as={getNodeTypeIcon(node.node_type)}
|
||
color={`${colorScheme}.500`}
|
||
boxSize={5}
|
||
/>
|
||
{isCompany && (
|
||
<Badge colorScheme="blue" variant="solid">核心企业</Badge>
|
||
)}
|
||
</HStack>
|
||
{node.importance_score >= 70 && (
|
||
<Tooltip label="重要节点">
|
||
<Icon as={FaStar} color="orange.400" boxSize={4} />
|
||
</Tooltip>
|
||
)}
|
||
</HStack>
|
||
|
||
<Text fontWeight="bold" fontSize="sm" noOfLines={2}>
|
||
{node.node_name}
|
||
</Text>
|
||
|
||
{node.node_description && (
|
||
<Text fontSize="xs" color="gray.600" noOfLines={2}>
|
||
{node.node_description}
|
||
</Text>
|
||
)}
|
||
|
||
<HStack spacing={2} flexWrap="wrap">
|
||
<Badge variant="subtle" size="sm" colorScheme={colorScheme}>
|
||
{node.node_type}
|
||
</Badge>
|
||
{node.market_share && (
|
||
<Badge variant="outline" size="sm">
|
||
份额 {node.market_share}%
|
||
</Badge>
|
||
)}
|
||
</HStack>
|
||
|
||
{(node.importance_score || node.importance_score === 0) && (
|
||
<Box>
|
||
<HStack justify="space-between" mb={1}>
|
||
<Text fontSize="xs" color="gray.500">重要度</Text>
|
||
<Text fontSize="xs" fontWeight="bold">{node.importance_score}</Text>
|
||
</HStack>
|
||
<Progress
|
||
value={node.importance_score}
|
||
size="xs"
|
||
colorScheme={getImportanceColor(node.importance_score)}
|
||
borderRadius="full"
|
||
/>
|
||
</Box>
|
||
)}
|
||
</VStack>
|
||
</CardBody>
|
||
</Card>
|
||
</ScaleFade>
|
||
|
||
<Modal isOpen={isOpen} onClose={onClose} size="xl">
|
||
<ModalOverlay />
|
||
<ModalContent>
|
||
<ModalHeader>
|
||
<HStack>
|
||
<Icon as={getNodeTypeIcon(node.node_type)} color={`${colorScheme}.500`} boxSize={6} />
|
||
<VStack align="start" spacing={0}>
|
||
<Text>{node.node_name}</Text>
|
||
<HStack>
|
||
<Badge colorScheme={colorScheme}>{node.node_type}</Badge>
|
||
{isCompany && <Badge colorScheme="blue" variant="solid">核心企业</Badge>}
|
||
</HStack>
|
||
</VStack>
|
||
</HStack>
|
||
</ModalHeader>
|
||
<ModalCloseButton />
|
||
<ModalBody>
|
||
<VStack align="stretch" spacing={4}>
|
||
{node.node_description && (
|
||
<Box>
|
||
<Text fontWeight="bold" mb={2} color="gray.600">节点描述</Text>
|
||
<Text fontSize="sm" lineHeight="1.6">{node.node_description}</Text>
|
||
</Box>
|
||
)}
|
||
|
||
<SimpleGrid columns={3} spacing={4}>
|
||
<Stat>
|
||
<StatLabel fontSize="xs">重要度评分</StatLabel>
|
||
<StatNumber fontSize="lg">{node.importance_score || 0}</StatNumber>
|
||
<StatHelpText>
|
||
<Progress
|
||
value={node.importance_score}
|
||
size="sm"
|
||
colorScheme={getImportanceColor(node.importance_score)}
|
||
borderRadius="full"
|
||
/>
|
||
</StatHelpText>
|
||
</Stat>
|
||
|
||
{node.market_share && (
|
||
<Stat>
|
||
<StatLabel fontSize="xs">市场份额</StatLabel>
|
||
<StatNumber fontSize="lg">{node.market_share}%</StatNumber>
|
||
</Stat>
|
||
)}
|
||
|
||
{node.dependency_degree && (
|
||
<Stat>
|
||
<StatLabel fontSize="xs">依赖程度</StatLabel>
|
||
<StatNumber fontSize="lg">{node.dependency_degree}%</StatNumber>
|
||
<StatHelpText>
|
||
<Progress
|
||
value={node.dependency_degree}
|
||
size="sm"
|
||
colorScheme={node.dependency_degree > 50 ? 'orange' : 'green'}
|
||
borderRadius="full"
|
||
/>
|
||
</StatHelpText>
|
||
</Stat>
|
||
)}
|
||
</SimpleGrid>
|
||
|
||
<Divider />
|
||
|
||
{/* 相关公司列表 */}
|
||
<Box>
|
||
<HStack mb={3} justify="space-between">
|
||
<Text fontWeight="bold" color="gray.600">相关公司</Text>
|
||
{loadingRelated && <Spinner size="sm" />}
|
||
</HStack>
|
||
{loadingRelated ? (
|
||
<Center py={4}>
|
||
<Spinner size="md" />
|
||
</Center>
|
||
) : relatedCompanies.length > 0 ? (
|
||
<VStack align="stretch" spacing={3} maxH="400px" overflowY="auto">
|
||
{relatedCompanies.map((company, idx) => {
|
||
// 获取节点层级标签
|
||
const getLevelLabel = (level) => {
|
||
if (level < 0) return { text: '上游', color: 'orange' };
|
||
if (level === 0) return { text: '核心', color: 'blue' };
|
||
if (level > 0) return { text: '下游', color: 'green' };
|
||
return { text: '未知', color: 'gray' };
|
||
};
|
||
|
||
const levelInfo = getLevelLabel(company.node_info?.node_level);
|
||
|
||
return (
|
||
<Card key={idx} variant="outline" size="sm">
|
||
<CardBody p={3}>
|
||
<VStack align="stretch" spacing={2}>
|
||
{/* 公司基本信息 */}
|
||
<HStack justify="space-between">
|
||
<VStack align="start" spacing={1} flex={1}>
|
||
<HStack flexWrap="wrap">
|
||
<Text fontSize="sm" fontWeight="bold">{company.stock_name}</Text>
|
||
<Badge size="sm" colorScheme="blue">{company.stock_code}</Badge>
|
||
<Badge size="sm" colorScheme={levelInfo.color} variant="solid">
|
||
{levelInfo.text}
|
||
</Badge>
|
||
{company.node_info?.node_type && (
|
||
<Badge size="sm" colorScheme="purple" variant="outline">
|
||
{company.node_info.node_type}
|
||
</Badge>
|
||
)}
|
||
</HStack>
|
||
{company.company_name && (
|
||
<Text fontSize="xs" color="gray.500" noOfLines={1}>
|
||
{company.company_name}
|
||
</Text>
|
||
)}
|
||
</VStack>
|
||
<IconButton
|
||
size="sm"
|
||
icon={<ExternalLinkIcon />}
|
||
variant="ghost"
|
||
colorScheme="blue"
|
||
onClick={() => {
|
||
window.location.href = `/company?stock_code=${company.stock_code}`;
|
||
}}
|
||
aria-label="查看公司详情"
|
||
/>
|
||
</HStack>
|
||
|
||
{/* 节点描述 */}
|
||
{company.node_info?.node_description && (
|
||
<Text fontSize="xs" color="gray.600" noOfLines={2}>
|
||
{company.node_info.node_description}
|
||
</Text>
|
||
)}
|
||
|
||
{/* 节点指标 */}
|
||
{(company.node_info?.importance_score || company.node_info?.market_share || company.node_info?.dependency_degree) && (
|
||
<HStack spacing={3} pt={1} borderTop="1px" borderColor="gray.100">
|
||
{company.node_info.importance_score && (
|
||
<HStack spacing={1}>
|
||
<Text fontSize="xs" color="gray.500">重要度:</Text>
|
||
<Badge size="xs" colorScheme="red">{company.node_info.importance_score}</Badge>
|
||
</HStack>
|
||
)}
|
||
{company.node_info.market_share && (
|
||
<HStack spacing={1}>
|
||
<Text fontSize="xs" color="gray.500">市场份额:</Text>
|
||
<Text fontSize="xs" fontWeight="medium">{company.node_info.market_share}%</Text>
|
||
</HStack>
|
||
)}
|
||
{company.node_info.dependency_degree && (
|
||
<HStack spacing={1}>
|
||
<Text fontSize="xs" color="gray.500">依赖度:</Text>
|
||
<Text fontSize="xs" fontWeight="medium">{company.node_info.dependency_degree}%</Text>
|
||
</HStack>
|
||
)}
|
||
</HStack>
|
||
)}
|
||
|
||
{/* 流向关系 */}
|
||
{company.relationships && company.relationships.length > 0 && (
|
||
<Box pt={2} borderTop="1px" borderColor="gray.100">
|
||
<Text fontSize="xs" fontWeight="bold" color="gray.600" mb={1}>
|
||
产业链关系:
|
||
</Text>
|
||
<VStack align="stretch" spacing={1}>
|
||
{company.relationships.map((rel, ridx) => (
|
||
<HStack key={ridx} fontSize="xs" spacing={2}>
|
||
<Icon
|
||
as={rel.role === 'source' ? FaArrowRight : FaArrowLeft}
|
||
color={rel.role === 'source' ? 'green.500' : 'orange.500'}
|
||
boxSize={3}
|
||
/>
|
||
<Text color="gray.700" noOfLines={1}>
|
||
{rel.role === 'source' ? '流向' : '来自'}
|
||
<Text as="span" fontWeight="medium" mx={1}>
|
||
{rel.connected_node}
|
||
</Text>
|
||
</Text>
|
||
{rel.relationship_desc && (
|
||
<Badge size="xs" colorScheme="cyan" variant="subtle" noOfLines={1}>
|
||
{rel.relationship_desc}
|
||
</Badge>
|
||
)}
|
||
{rel.flow_ratio && (
|
||
<Text color="purple.600" fontWeight="medium">
|
||
{rel.flow_ratio}%
|
||
</Text>
|
||
)}
|
||
</HStack>
|
||
))}
|
||
</VStack>
|
||
</Box>
|
||
)}
|
||
</VStack>
|
||
</CardBody>
|
||
</Card>
|
||
);
|
||
})}
|
||
</VStack>
|
||
) : (
|
||
<Center py={4}>
|
||
<VStack spacing={2}>
|
||
<Icon as={FaBuilding} boxSize={8} color="gray.300" />
|
||
<Text fontSize="sm" color="gray.500">暂无相关公司</Text>
|
||
</VStack>
|
||
</Center>
|
||
)}
|
||
</Box>
|
||
</VStack>
|
||
</ModalBody>
|
||
<ModalFooter>
|
||
<Button colorScheme="blue" onClick={onClose}>关闭</Button>
|
||
</ModalFooter>
|
||
</ModalContent>
|
||
</Modal>
|
||
</>
|
||
);
|
||
};
|
||
|
||
// 关键因素卡片
|
||
const KeyFactorCard = ({ factor }) => {
|
||
const impactColor = {
|
||
positive: 'red',
|
||
negative: 'green',
|
||
neutral: 'gray',
|
||
mixed: 'yellow'
|
||
}[factor.impact_direction] || 'gray';
|
||
|
||
const bgColor = useColorModeValue('white', 'gray.800');
|
||
const borderColor = useColorModeValue('gray.200', 'gray.600');
|
||
|
||
return (
|
||
<Card bg={bgColor} borderColor={borderColor} size="sm">
|
||
<CardBody p={3}>
|
||
<VStack align="stretch" spacing={2}>
|
||
<HStack justify="space-between">
|
||
<Text fontWeight="medium" fontSize="sm">{factor.factor_name}</Text>
|
||
<Badge colorScheme={impactColor} size="sm">
|
||
{factor.impact_direction === 'positive' ? '正面' :
|
||
factor.impact_direction === 'negative' ? '负面' :
|
||
factor.impact_direction === 'mixed' ? '混合' : '中性'}
|
||
</Badge>
|
||
</HStack>
|
||
|
||
<HStack spacing={2}>
|
||
<Text fontSize="lg" fontWeight="bold" color={`${impactColor}.500`}>
|
||
{factor.factor_value}
|
||
{factor.factor_unit && ` ${factor.factor_unit}`}
|
||
</Text>
|
||
{factor.year_on_year && (
|
||
<Tag size="sm" colorScheme={factor.year_on_year > 0 ? 'red' : 'green'}>
|
||
<Icon as={factor.year_on_year > 0 ? FaArrowUp : FaArrowDown} mr={1} boxSize={3} />
|
||
{Math.abs(factor.year_on_year)}%
|
||
</Tag>
|
||
)}
|
||
</HStack>
|
||
|
||
{factor.factor_desc && (
|
||
<Text fontSize="xs" color="gray.600" noOfLines={2}>
|
||
{factor.factor_desc}
|
||
</Text>
|
||
)}
|
||
|
||
<HStack justify="space-between">
|
||
<Text fontSize="xs" color="gray.500">
|
||
影响权重: {factor.impact_weight}
|
||
</Text>
|
||
{factor.report_period && (
|
||
<Text fontSize="xs" color="gray.500">{factor.report_period}</Text>
|
||
)}
|
||
</HStack>
|
||
</VStack>
|
||
</CardBody>
|
||
</Card>
|
||
);
|
||
};
|
||
|
||
// 时间线组件
|
||
const TimelineComponent = ({ events }) => {
|
||
const [selectedEvent, setSelectedEvent] = useState(null);
|
||
const { isOpen, onOpen, onClose } = useDisclosure();
|
||
|
||
const handleEventClick = (event) => {
|
||
setSelectedEvent(event);
|
||
onOpen();
|
||
};
|
||
|
||
return (
|
||
<>
|
||
<Box position="relative" pl={8}>
|
||
<Box position="absolute" left="15px" top="20px" bottom="20px" width="2px" bg="gray.300" />
|
||
|
||
<VStack align="stretch" spacing={6}>
|
||
{events.map((event, idx) => {
|
||
const isPositive = event.impact_metrics?.is_positive;
|
||
const iconColor = isPositive ? 'red.500' : 'green.500';
|
||
const bgColor = useColorModeValue(
|
||
isPositive ? 'red.50' : 'green.50',
|
||
isPositive ? 'red.900' : 'green.900'
|
||
);
|
||
|
||
return (
|
||
<Fade in={true} key={idx}>
|
||
<Box position="relative">
|
||
<Circle
|
||
size="30px"
|
||
bg={iconColor}
|
||
position="absolute"
|
||
left="-15px"
|
||
top="20px"
|
||
zIndex={2}
|
||
border="3px solid white"
|
||
shadow="md"
|
||
>
|
||
<Icon as={isPositive ? FaArrowUp : FaArrowDown} color="white" boxSize={3} />
|
||
</Circle>
|
||
|
||
<Box position="absolute" left="15px" top="35px" width="20px" height="2px" bg="gray.300" />
|
||
|
||
<Card
|
||
ml={10}
|
||
bg={bgColor}
|
||
cursor="pointer"
|
||
onClick={() => handleEventClick(event)}
|
||
_hover={{ shadow: 'lg', transform: 'translateX(4px)' }}
|
||
transition="all 0.3s ease"
|
||
>
|
||
<CardBody p={4}>
|
||
<VStack align="stretch" spacing={2}>
|
||
<HStack justify="space-between">
|
||
<VStack align="start" spacing={0}>
|
||
<Text fontWeight="bold" fontSize="sm">{event.event_title}</Text>
|
||
<HStack spacing={2}>
|
||
<Icon as={FaCalendarAlt} boxSize={3} color="gray.500" />
|
||
<Text fontSize="xs" color="gray.500" fontWeight="medium">
|
||
{event.event_date}
|
||
</Text>
|
||
</HStack>
|
||
</VStack>
|
||
<Badge colorScheme={isPositive ? 'red' : 'green'} size="sm">
|
||
{event.event_type}
|
||
</Badge>
|
||
</HStack>
|
||
|
||
<Text fontSize="sm" color="gray.600" noOfLines={2}>
|
||
{event.event_desc}
|
||
</Text>
|
||
|
||
<HStack>
|
||
<Text fontSize="xs" color="gray.500">影响度:</Text>
|
||
<Progress
|
||
value={event.impact_metrics?.impact_score}
|
||
size="xs"
|
||
width="60px"
|
||
colorScheme={event.impact_metrics?.impact_score > 70 ? 'red' : 'orange'}
|
||
borderRadius="full"
|
||
/>
|
||
<Text fontSize="xs" color="gray.500" fontWeight="bold">
|
||
{event.impact_metrics?.impact_score || 0}
|
||
</Text>
|
||
</HStack>
|
||
</VStack>
|
||
</CardBody>
|
||
</Card>
|
||
</Box>
|
||
</Fade>
|
||
);
|
||
})}
|
||
</VStack>
|
||
</Box>
|
||
|
||
{selectedEvent && (
|
||
<Modal isOpen={isOpen} onClose={onClose} size="xl">
|
||
<ModalOverlay />
|
||
<ModalContent>
|
||
<ModalHeader>
|
||
<HStack>
|
||
<Icon
|
||
as={selectedEvent.impact_metrics?.is_positive ? FaCheckCircle : FaExclamationCircle}
|
||
color={selectedEvent.impact_metrics?.is_positive ? 'red.500' : 'green.500'}
|
||
boxSize={6}
|
||
/>
|
||
<VStack align="start" spacing={0}>
|
||
<Text>{selectedEvent.event_title}</Text>
|
||
<HStack>
|
||
<Badge colorScheme={selectedEvent.impact_metrics?.is_positive ? 'red' : 'green'}>
|
||
{selectedEvent.event_type}
|
||
</Badge>
|
||
<Text fontSize="sm" color="gray.500">{selectedEvent.event_date}</Text>
|
||
</HStack>
|
||
</VStack>
|
||
</HStack>
|
||
</ModalHeader>
|
||
<ModalCloseButton />
|
||
<ModalBody>
|
||
<VStack align="stretch" spacing={4}>
|
||
<Box>
|
||
<Text fontWeight="bold" mb={2} color="gray.600">事件详情</Text>
|
||
<Text fontSize="sm" lineHeight="1.6">{selectedEvent.event_desc}</Text>
|
||
</Box>
|
||
|
||
{selectedEvent.related_info?.financial_impact && (
|
||
<Box>
|
||
<Text fontWeight="bold" mb={2} color="gray.600">财务影响</Text>
|
||
<Text fontSize="sm" lineHeight="1.6" color="blue.600">
|
||
{selectedEvent.related_info.financial_impact}
|
||
</Text>
|
||
</Box>
|
||
)}
|
||
|
||
<Box>
|
||
<Text fontWeight="bold" mb={2} color="gray.600">影响评估</Text>
|
||
<HStack spacing={4}>
|
||
<VStack spacing={1}>
|
||
<Text fontSize="xs" color="gray.500">影响度</Text>
|
||
<Progress
|
||
value={selectedEvent.impact_metrics?.impact_score}
|
||
size="lg"
|
||
width="120px"
|
||
colorScheme={selectedEvent.impact_metrics?.impact_score > 70 ? 'red' : 'orange'}
|
||
hasStripe
|
||
isAnimated
|
||
/>
|
||
<Text fontSize="sm" fontWeight="bold">
|
||
{selectedEvent.impact_metrics?.impact_score || 0}/100
|
||
</Text>
|
||
</VStack>
|
||
<VStack>
|
||
<Badge
|
||
size="lg"
|
||
colorScheme={selectedEvent.impact_metrics?.is_positive ? 'red' : 'green'}
|
||
px={3} py={1}
|
||
>
|
||
{selectedEvent.impact_metrics?.is_positive ? '正面影响' : '负面影响'}
|
||
</Badge>
|
||
</VStack>
|
||
</HStack>
|
||
</Box>
|
||
</VStack>
|
||
</ModalBody>
|
||
<ModalFooter>
|
||
<Button colorScheme="blue" onClick={onClose}>关闭</Button>
|
||
</ModalFooter>
|
||
</ModalContent>
|
||
</Modal>
|
||
)}
|
||
</>
|
||
);
|
||
};
|
||
|
||
// 股东类型标签组件
|
||
const ShareholderTypeBadge = ({ type }) => {
|
||
const typeConfig = {
|
||
'基金': { color: 'blue', icon: FaChartBar },
|
||
'个人': { color: 'green', icon: FaUserTie },
|
||
'法人': { color: 'purple', icon: FaBuilding },
|
||
'QFII': { color: 'orange', icon: FaGlobe },
|
||
'社保': { color: 'red', icon: FaShieldAlt },
|
||
'保险': { color: 'teal', icon: FaShieldAlt },
|
||
'信托': { color: 'cyan', icon: FaBriefcase },
|
||
'券商': { color: 'pink', icon: FaChartLine }
|
||
};
|
||
|
||
const config = Object.entries(typeConfig).find(([key]) => type?.includes(key))?.[1] ||
|
||
{ color: 'gray', icon: FaCircle };
|
||
|
||
return (
|
||
<Badge colorScheme={config.color} size="sm">
|
||
<Icon as={config.icon} mr={1} boxSize={3} />
|
||
{type}
|
||
</Badge>
|
||
);
|
||
};
|
||
|
||
// 主组件 - 完整版
|
||
const CompanyAnalysisComplete = ({ stockCode: propStockCode }) => {
|
||
const [stockCode, setStockCode] = useState(propStockCode || '000001');
|
||
const [loading, setLoading] = useState(false);
|
||
|
||
// 监听props中的stockCode变化
|
||
useEffect(() => {
|
||
if (propStockCode && propStockCode !== stockCode) {
|
||
setStockCode(propStockCode);
|
||
}
|
||
}, [propStockCode, stockCode]);
|
||
|
||
// 企业深度分析数据
|
||
const [comprehensiveData, setComprehensiveData] = useState(null);
|
||
const [valueChainData, setValueChainData] = useState(null);
|
||
const [keyFactorsData, setKeyFactorsData] = useState(null);
|
||
|
||
// 股票概览数据
|
||
const [basicInfo, setBasicInfo] = useState(null);
|
||
const [actualControl, setActualControl] = useState([]);
|
||
const [concentration, setConcentration] = useState([]);
|
||
const [management, setManagement] = useState([]);
|
||
const [topCirculationShareholders, setTopCirculationShareholders] = useState([]);
|
||
const [topShareholders, setTopShareholders] = useState([]);
|
||
const [branches, setBranches] = useState([]);
|
||
const [announcements, setAnnouncements] = useState([]);
|
||
const [disclosureSchedule, setDisclosureSchedule] = useState([]);
|
||
|
||
// 新闻动态数据
|
||
const [newsEvents, setNewsEvents] = useState([]);
|
||
const [newsLoading, setNewsLoading] = useState(false);
|
||
const [newsSearchQuery, setNewsSearchQuery] = useState('');
|
||
const [newsPagination, setNewsPagination] = useState({
|
||
page: 1,
|
||
per_page: 10,
|
||
total: 0,
|
||
pages: 0,
|
||
has_next: false,
|
||
has_prev: false
|
||
});
|
||
|
||
const [error, setError] = useState(null);
|
||
|
||
const toast = useToast();
|
||
const bgColor = useColorModeValue('gray.50', 'gray.900');
|
||
const cardBg = useColorModeValue('white', 'gray.800');
|
||
const { isOpen: isAnnouncementOpen, onOpen: onAnnouncementOpen, onClose: onAnnouncementClose } = useDisclosure();
|
||
const [selectedAnnouncement, setSelectedAnnouncement] = useState(null);
|
||
|
||
// 业务板块详情展开状态
|
||
const [expandedSegments, setExpandedSegments] = useState({});
|
||
|
||
// 切换业务板块展开状态
|
||
const toggleSegmentExpansion = (segmentIndex) => {
|
||
setExpandedSegments(prev => ({
|
||
...prev,
|
||
[segmentIndex]: !prev[segmentIndex]
|
||
}));
|
||
};
|
||
|
||
// 加载数据
|
||
const loadData = async () => {
|
||
setLoading(true);
|
||
setError(null);
|
||
|
||
try {
|
||
const requests = [
|
||
// 深度分析数据
|
||
fetch(`${API_BASE_URL}/api/company/comprehensive-analysis/${stockCode}`).then(r => r.json()),
|
||
fetch(`${API_BASE_URL}/api/company/value-chain-analysis/${stockCode}`).then(r => r.json()),
|
||
fetch(`${API_BASE_URL}/api/company/key-factors-timeline/${stockCode}`).then(r => r.json()),
|
||
// 股票概览数据
|
||
fetch(`${API_BASE_URL}/api/stock/${stockCode}/basic-info`).then(r => r.json()),
|
||
fetch(`${API_BASE_URL}/api/stock/${stockCode}/actual-control`).then(r => r.json()),
|
||
fetch(`${API_BASE_URL}/api/stock/${stockCode}/concentration`).then(r => r.json()),
|
||
fetch(`${API_BASE_URL}/api/stock/${stockCode}/management?active_only=true`).then(r => r.json()),
|
||
fetch(`${API_BASE_URL}/api/stock/${stockCode}/top-circulation-shareholders?limit=10`).then(r => r.json()),
|
||
fetch(`${API_BASE_URL}/api/stock/${stockCode}/top-shareholders?limit=10`).then(r => r.json()),
|
||
fetch(`${API_BASE_URL}/api/stock/${stockCode}/branches`).then(r => r.json()),
|
||
fetch(`${API_BASE_URL}/api/stock/${stockCode}/announcements?limit=20`).then(r => r.json()),
|
||
fetch(`${API_BASE_URL}/api/stock/${stockCode}/disclosure-schedule`).then(r => r.json())
|
||
];
|
||
|
||
const [
|
||
comprehensiveRes, valueChainRes, keyFactorsRes,
|
||
basicRes, actualRes, concentrationRes, managementRes,
|
||
circulationRes, shareholdersRes, branchesRes, announcementsRes, disclosureRes
|
||
] = await Promise.all(requests);
|
||
|
||
// 设置深度分析数据
|
||
if (comprehensiveRes.success) setComprehensiveData(comprehensiveRes.data);
|
||
if (valueChainRes.success) setValueChainData(valueChainRes.data);
|
||
if (keyFactorsRes.success) setKeyFactorsData(keyFactorsRes.data);
|
||
|
||
// 设置股票概览数据
|
||
if (basicRes.success) setBasicInfo(basicRes.data);
|
||
if (actualRes.success) setActualControl(actualRes.data);
|
||
if (concentrationRes.success) setConcentration(concentrationRes.data);
|
||
if (managementRes.success) setManagement(managementRes.data);
|
||
if (circulationRes.success) setTopCirculationShareholders(circulationRes.data);
|
||
if (shareholdersRes.success) setTopShareholders(shareholdersRes.data);
|
||
if (branchesRes.success) setBranches(branchesRes.data);
|
||
if (announcementsRes.success) setAnnouncements(announcementsRes.data);
|
||
if (disclosureRes.success) setDisclosureSchedule(disclosureRes.data);
|
||
|
||
} catch (err) {
|
||
setError(err.message);
|
||
logger.error('CompanyOverview', 'loadData', err, { stockCode });
|
||
|
||
// ❌ 移除数据加载失败toast
|
||
// toast({
|
||
// title: '数据加载失败',
|
||
// description: err.message,
|
||
// status: 'error',
|
||
// duration: 3000,
|
||
// isClosable: true,
|
||
// });
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
};
|
||
|
||
useEffect(() => {
|
||
if (stockCode) {
|
||
loadData();
|
||
}
|
||
}, [stockCode]);
|
||
|
||
// 加载新闻事件
|
||
const loadNewsEvents = async (page = 1, searchQuery = '') => {
|
||
setNewsLoading(true);
|
||
try {
|
||
// 构建查询参数
|
||
const params = new URLSearchParams({
|
||
page: page.toString(),
|
||
per_page: '10',
|
||
sort: 'new',
|
||
include_creator: 'true',
|
||
include_stats: 'true'
|
||
});
|
||
|
||
// 搜索关键词优先级：
|
||
// 1. 用户输入的搜索关键词
|
||
// 2. 股票简称
|
||
const queryText = searchQuery || basicInfo?.SECNAME || '';
|
||
if (queryText) {
|
||
params.append('q', queryText);
|
||
}
|
||
|
||
const response = await fetch(`${API_BASE_URL}/api/events?${params.toString()}`);
|
||
const data = await response.json();
|
||
|
||
// API返回 data.data.events
|
||
const events = data.data?.events || data.events || [];
|
||
const pagination = data.data?.pagination || {
|
||
page: 1,
|
||
per_page: 10,
|
||
total: 0,
|
||
pages: 0,
|
||
has_next: false,
|
||
has_prev: false
|
||
};
|
||
|
||
setNewsEvents(events);
|
||
setNewsPagination(pagination);
|
||
} catch (err) {
|
||
logger.error('CompanyOverview', 'loadNewsEvents', err, { stockCode, searchQuery, page });
|
||
setNewsEvents([]);
|
||
setNewsPagination({
|
||
page: 1,
|
||
per_page: 10,
|
||
total: 0,
|
||
pages: 0,
|
||
has_next: false,
|
||
has_prev: false
|
||
});
|
||
} finally {
|
||
setNewsLoading(false);
|
||
}
|
||
};
|
||
|
||
// 当基本信息加载完成后，加载新闻事件
|
||
useEffect(() => {
|
||
if (basicInfo) {
|
||
loadNewsEvents(1);
|
||
}
|
||
}, [basicInfo]);
|
||
|
||
// 处理搜索
|
||
const handleNewsSearch = () => {
|
||
loadNewsEvents(1, newsSearchQuery);
|
||
};
|
||
|
||
// 处理分页
|
||
const handleNewsPageChange = (newPage) => {
|
||
loadNewsEvents(newPage, newsSearchQuery);
|
||
// 滚动到新闻列表顶部
|
||
document.getElementById('news-list-top')?.scrollIntoView({ behavior: 'smooth' });
|
||
};
|
||
|
||
// 管理层职位分类
|
||
const getManagementByCategory = () => {
|
||
const categories = {
|
||
'高管': [],
|
||
'董事': [],
|
||
'监事': [],
|
||
'其他': []
|
||
};
|
||
|
||
management.forEach(person => {
|
||
if (person.position_category === '高管' || person.position_name?.includes('总')) {
|
||
categories['高管'].push(person);
|
||
} else if (person.position_category === '董事' || person.position_name?.includes('董事')) {
|
||
categories['董事'].push(person);
|
||
} else if (person.position_category === '监事' || person.position_name?.includes('监事')) {
|
||
categories['监事'].push(person);
|
||
} else {
|
||
categories['其他'].push(person);
|
||
}
|
||
});
|
||
|
||
return categories;
|
||
};
|
||
|
||
// 计算股权集中度变化
|
||
const getConcentrationTrend = () => {
|
||
const grouped = {};
|
||
concentration.forEach(item => {
|
||
if (!grouped[item.end_date]) {
|
||
grouped[item.end_date] = {};
|
||
}
|
||
grouped[item.end_date][item.stat_item] = item;
|
||
});
|
||
return Object.entries(grouped).sort((a, b) => b[0].localeCompare(a[0])).slice(0, 5);
|
||
};
|
||
|
||
// 生成雷达图配置
|
||
const getRadarChartOption = () => {
|
||
if (!comprehensiveData?.competitive_position?.scores) return null;
|
||
|
||
const scores = comprehensiveData.competitive_position.scores;
|
||
const indicators = [
|
||
{ name: '市场地位', max: 100 },
|
||
{ name: '技术实力', max: 100 },
|
||
{ name: '品牌价值', max: 100 },
|
||
{ name: '运营效率', max: 100 },
|
||
{ name: '财务健康', max: 100 },
|
||
{ name: '创新能力', max: 100 },
|
||
{ name: '风险控制', max: 100 },
|
||
{ name: '成长潜力', max: 100 }
|
||
];
|
||
|
||
const data = [
|
||
scores.market_position || 0,
|
||
scores.technology || 0,
|
||
scores.brand || 0,
|
||
scores.operation || 0,
|
||
scores.finance || 0,
|
||
scores.innovation || 0,
|
||
scores.risk || 0,
|
||
scores.growth || 0
|
||
];
|
||
|
||
return {
|
||
tooltip: { trigger: 'item' },
|
||
radar: {
|
||
indicator: indicators,
|
||
shape: 'polygon',
|
||
splitNumber: 4,
|
||
name: {
|
||
textStyle: { color: '#666', fontSize: 12 }
|
||
},
|
||
splitLine: {
|
||
lineStyle: {
|
||
color: ['#e8e8e8', '#e0e0e0', '#d0d0d0', '#c0c0c0']
|
||
}
|
||
},
|
||
splitArea: {
|
||
show: true,
|
||
areaStyle: {
|
||
color: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.3)']
|
||
}
|
||
},
|
||
axisLine: {
|
||
lineStyle: { color: '#ddd' }
|
||
}
|
||
},
|
||
series: [{
|
||
name: '竞争力评分',
|
||
type: 'radar',
|
||
data: [{
|
||
value: data,
|
||
name: '当前评分',
|
||
symbol: 'circle',
|
||
symbolSize: 5,
|
||
lineStyle: { width: 2, color: '#3182ce' },
|
||
areaStyle: { color: 'rgba(49, 130, 206, 0.3)' },
|
||
label: {
|
||
show: true,
|
||
formatter: (params) => params.value,
|
||
color: '#3182ce',
|
||
fontSize: 10
|
||
}
|
||
}]
|
||
}]
|
||
};
|
||
};
|
||
|
||
// 生成产业链桑基图配置
|
||
const getSankeyChartOption = () => {
|
||
if (!valueChainData?.value_chain_flows || valueChainData.value_chain_flows.length === 0) return null;
|
||
|
||
const nodes = new Set();
|
||
const links = [];
|
||
|
||
valueChainData.value_chain_flows.forEach(flow => {
|
||
// 检查 source 和 target 是否存在
|
||
if (!flow?.source?.node_name || !flow?.target?.node_name) return;
|
||
|
||
nodes.add(flow.source.node_name);
|
||
nodes.add(flow.target.node_name);
|
||
links.push({
|
||
source: flow.source.node_name,
|
||
target: flow.target.node_name,
|
||
value: parseFloat(flow.flow_metrics?.flow_ratio) || 1,
|
||
lineStyle: { color: 'source', opacity: 0.6 }
|
||
});
|
||
});
|
||
|
||
return {
|
||
tooltip: { trigger: 'item', triggerOn: 'mousemove' },
|
||
series: [{
|
||
type: 'sankey',
|
||
layout: 'none',
|
||
emphasis: { focus: 'adjacency' },
|
||
data: Array.from(nodes).map(name => ({ name })),
|
||
links: links,
|
||
lineStyle: { color: 'gradient', curveness: 0.5 },
|
||
label: { color: '#333', fontSize: 10 }
|
||
}]
|
||
};
|
||
};
|
||
|
||
if (loading) {
|
||
return (
|
||
<Box bg={bgColor} minH="100vh" p={4}>
|
||
<Container maxW="container.xl">
|
||
<Center h="400px">
|
||
<VStack spacing={4}>
|
||
<Spinner size="xl" color="blue.500" thickness="4px" />
|
||
<Text>正在加载企业全景数据...</Text>
|
||
</VStack>
|
||
</Center>
|
||
</Container>
|
||
</Box>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<Box bg={bgColor} minH="100vh" py={6}>
|
||
<Container maxW="container.xl">
|
||
<VStack spacing={6} align="stretch">
|
||
|
||
{/* 公司头部信息 - 醒目展示 */}
|
||
{basicInfo && (
|
||
<Card bg={cardBg} shadow="2xl" borderTop="6px solid" borderTopColor="blue.500">
|
||
<CardBody>
|
||
<Grid templateColumns="repeat(12, 1fr)" gap={6}>
|
||
<GridItem colSpan={{ base: 12, lg: 8 }}>
|
||
<VStack align="start" spacing={4}>
|
||
<HStack spacing={4}>
|
||
<Circle size="70px" bg="blue.500">
|
||
<Icon as={FaBuilding} color="white" boxSize={10} />
|
||
</Circle>
|
||
<VStack align="start" spacing={1}>
|
||
<HStack>
|
||
<Heading size="xl" color="blue.600">
|
||
{basicInfo.ORGNAME || basicInfo.SECNAME}
|
||
</Heading>
|
||
<Badge colorScheme="blue" fontSize="lg" px={3} py={1}>
|
||
{basicInfo.SECCODE}
|
||
</Badge>
|
||
</HStack>
|
||
<HStack spacing={3}>
|
||
<Badge colorScheme="purple" fontSize="sm">
|
||
{basicInfo.sw_industry_l1}
|
||
</Badge>
|
||
<Badge colorScheme="orange" fontSize="sm">
|
||
{basicInfo.sw_industry_l2}
|
||
</Badge>
|
||
{basicInfo.sw_industry_l3 && (
|
||
<Badge colorScheme="green" fontSize="sm">
|
||
{basicInfo.sw_industry_l3}
|
||
</Badge>
|
||
)}
|
||
</HStack>
|
||
</VStack>
|
||
</HStack>
|
||
|
||
<Divider />
|
||
|
||
<SimpleGrid columns={2} spacing={4} w="full">
|
||
<HStack>
|
||
<Icon as={FaUserShield} color="gray.500" />
|
||
<Text fontSize="sm">
|
||
<Text as="span" color="gray.500">法定代表人：</Text>
|
||
<Text as="span" fontWeight="bold">{basicInfo.legal_representative}</Text>
|
||
</Text>
|
||
</HStack>
|
||
<HStack>
|
||
<Icon as={FaCrown} color="gray.500" />
|
||
<Text fontSize="sm">
|
||
<Text as="span" color="gray.500">董事长：</Text>
|
||
<Text as="span" fontWeight="bold">{basicInfo.chairman}</Text>
|
||
</Text>
|
||
</HStack>
|
||
<HStack>
|
||
<Icon as={FaBriefcase} color="gray.500" />
|
||
<Text fontSize="sm">
|
||
<Text as="span" color="gray.500">总经理：</Text>
|
||
<Text as="span" fontWeight="bold">{basicInfo.general_manager}</Text>
|
||
</Text>
|
||
</HStack>
|
||
<HStack>
|
||
<Icon as={FaCalendarAlt} color="gray.500" />
|
||
<Text fontSize="sm">
|
||
<Text as="span" color="gray.500">成立日期：</Text>
|
||
<Text as="span" fontWeight="bold">{formatUtils.formatDate(basicInfo.establish_date)}</Text>
|
||
</Text>
|
||
</HStack>
|
||
</SimpleGrid>
|
||
|
||
<Box>
|
||
<Text fontSize="sm" color="gray.600" noOfLines={3}>
|
||
{basicInfo.company_intro}
|
||
</Text>
|
||
</Box>
|
||
</VStack>
|
||
</GridItem>
|
||
|
||
<GridItem colSpan={{ base: 12, lg: 4 }}>
|
||
<VStack spacing={3} align="stretch">
|
||
<Stat>
|
||
<StatLabel>注册资本</StatLabel>
|
||
<StatNumber fontSize="3xl" color="blue.500">
|
||
{formatUtils.formatRegisteredCapital(basicInfo.reg_capital)}
|
||
</StatNumber>
|
||
</Stat>
|
||
|
||
<Divider />
|
||
|
||
<VStack align="stretch" spacing={2}>
|
||
<HStack fontSize="sm">
|
||
<Icon as={FaMapMarkerAlt} color="gray.500" />
|
||
<Text noOfLines={1}>{basicInfo.province} {basicInfo.city}</Text>
|
||
</HStack>
|
||
<HStack fontSize="sm">
|
||
<Icon as={FaGlobe} color="gray.500" />
|
||
<Link href={basicInfo.website} isExternal color="blue.500">
|
||
{basicInfo.website} <ExternalLinkIcon mx="2px" />
|
||
</Link>
|
||
</HStack>
|
||
<HStack fontSize="sm">
|
||
<Icon as={FaEnvelope} color="gray.500" />
|
||
<Text>{basicInfo.email}</Text>
|
||
</HStack>
|
||
<HStack fontSize="sm">
|
||
<Icon as={FaPhone} color="gray.500" />
|
||
<Text>{basicInfo.tel}</Text>
|
||
</HStack>
|
||
</VStack>
|
||
</VStack>
|
||
</GridItem>
|
||
</Grid>
|
||
</CardBody>
|
||
</Card>
|
||
)}
|
||
|
||
{/* 主要内容区 - 分为深度分析、基本信息和新闻动态 */}
|
||
<Tabs variant="soft-rounded" colorScheme="blue" size="lg" defaultIndex={0}>
|
||
<TabList bg={cardBg} p={4} borderRadius="lg" shadow="md" flexWrap="wrap">
|
||
<Tab fontWeight="bold"><Icon as={FaBrain} mr={2} />深度分析</Tab>
|
||
<Tab fontWeight="bold"><Icon as={FaInfoCircle} mr={2} />基本信息</Tab>
|
||
<Tab fontWeight="bold"><Icon as={FaNewspaper} mr={2} />新闻动态</Tab>
|
||
</TabList>
|
||
|
||
<TabPanels>
|
||
{/* 深度分析标签页 */}
|
||
<TabPanel p={0} pt={6}>
|
||
<VStack spacing={6} align="stretch">
|
||
{/* 核心定位卡片 */}
|
||
{comprehensiveData?.qualitative_analysis && (
|
||
<Card bg={cardBg} shadow="md">
|
||
<CardHeader>
|
||
<HStack>
|
||
<Icon as={FaLightbulb} color="yellow.500" />
|
||
<Heading size="sm">核心定位</Heading>
|
||
</HStack>
|
||
</CardHeader>
|
||
<CardBody>
|
||
<DisclaimerBox />
|
||
<VStack spacing={4} align="stretch">
|
||
{comprehensiveData.qualitative_analysis.core_positioning?.one_line_intro && (
|
||
<Alert status="info" variant="left-accent">
|
||
<AlertIcon />
|
||
<Text fontWeight="bold">{comprehensiveData.qualitative_analysis.core_positioning.one_line_intro}</Text>
|
||
</Alert>
|
||
)}
|
||
|
||
<Grid templateColumns="repeat(2, 1fr)" gap={4}>
|
||
<GridItem colSpan={{ base: 2, md: 1 }}>
|
||
<VStack align="stretch" spacing={3}>
|
||
<Text fontWeight="bold" fontSize="sm" color="gray.600">投资亮点</Text>
|
||
<Box p={3} bg={useColorModeValue('blue.50', 'blue.900')} borderRadius="md">
|
||
<Text fontSize="sm" whiteSpace="pre-wrap">
|
||
{comprehensiveData.qualitative_analysis.core_positioning?.investment_highlights || '暂无数据'}
|
||
</Text>
|
||
</Box>
|
||
</VStack>
|
||
</GridItem>
|
||
|
||
<GridItem colSpan={{ base: 2, md: 1 }}>
|
||
<VStack align="stretch" spacing={3}>
|
||
<Text fontWeight="bold" fontSize="sm" color="gray.600">商业模式</Text>
|
||
<Box p={3} bg={useColorModeValue('green.50', 'green.900')} borderRadius="md">
|
||
<Text fontSize="sm" whiteSpace="pre-wrap">
|
||
{comprehensiveData.qualitative_analysis.core_positioning?.business_model_desc || '暂无数据'}
|
||
</Text>
|
||
</Box>
|
||
</VStack>
|
||
</GridItem>
|
||
</Grid>
|
||
</VStack>
|
||
</CardBody>
|
||
</Card>
|
||
)}
|
||
|
||
{/* 竞争地位分析 */}
|
||
{comprehensiveData?.competitive_position && (
|
||
<Card bg={cardBg} shadow="md">
|
||
<CardHeader>
|
||
<HStack>
|
||
<Icon as={FaTrophy} color="gold" />
|
||
<Heading size="sm">竞争地位分析</Heading>
|
||
{comprehensiveData.competitive_position.ranking && (
|
||
<Badge colorScheme="purple" ml={2}>
|
||
行业排名 {comprehensiveData.competitive_position.ranking.industry_rank}/{comprehensiveData.competitive_position.ranking.total_companies}
|
||
</Badge>
|
||
)}
|
||
</HStack>
|
||
</CardHeader>
|
||
<CardBody>
|
||
<DisclaimerBox />
|
||
{comprehensiveData.competitive_position.analysis?.main_competitors && (
|
||
<Box mb={4}>
|
||
<Text fontWeight="bold" fontSize="sm" mb={2} color="gray.600">主要竞争对手</Text>
|
||
<HStack spacing={2} flexWrap="wrap">
|
||
{comprehensiveData.competitive_position.analysis.main_competitors
|
||
.split(',')
|
||
.map((competitor, idx) => (
|
||
<Tag key={idx} size="md" colorScheme="purple" variant="outline" borderRadius="full">
|
||
<Icon as={FaUsers} mr={1} />
|
||
<TagLabel>{competitor.trim()}</TagLabel>
|
||
</Tag>
|
||
))}
|
||
</HStack>
|
||
</Box>
|
||
)}
|
||
|
||
<Grid templateColumns="repeat(2, 1fr)" gap={6}>
|
||
<GridItem colSpan={{ base: 2, lg: 1 }}>
|
||
<VStack spacing={4} align="stretch">
|
||
<ScoreBar label="市场地位" score={comprehensiveData.competitive_position.scores?.market_position} icon={FaTrophy} />
|
||
<ScoreBar label="技术实力" score={comprehensiveData.competitive_position.scores?.technology} icon={FaCog} />
|
||
<ScoreBar label="品牌价值" score={comprehensiveData.competitive_position.scores?.brand} icon={FaStar} />
|
||
<ScoreBar label="运营效率" score={comprehensiveData.competitive_position.scores?.operation} icon={FaChartLine} />
|
||
<ScoreBar label="财务健康" score={comprehensiveData.competitive_position.scores?.finance} icon={FaDollarSign} />
|
||
<ScoreBar label="创新能力" score={comprehensiveData.competitive_position.scores?.innovation} icon={FaFlask} />
|
||
<ScoreBar label="风险控制" score={comprehensiveData.competitive_position.scores?.risk} icon={FaShieldAlt} />
|
||
<ScoreBar label="成长潜力" score={comprehensiveData.competitive_position.scores?.growth} icon={FaRocket} />
|
||
</VStack>
|
||
</GridItem>
|
||
|
||
<GridItem colSpan={{ base: 2, lg: 1 }}>
|
||
{getRadarChartOption() && (
|
||
<ReactECharts
|
||
option={getRadarChartOption()}
|
||
style={{ height: '320px' }}
|
||
theme="light"
|
||
/>
|
||
)}
|
||
</GridItem>
|
||
</Grid>
|
||
|
||
<Divider my={4} />
|
||
|
||
<SimpleGrid columns={{ base: 1, md: 2 }} spacing={4}>
|
||
<Box>
|
||
<Text fontWeight="bold" fontSize="sm" mb={2} color="red.600">竞争优势</Text>
|
||
<Text fontSize="sm">
|
||
{comprehensiveData.competitive_position.analysis?.competitive_advantages || '暂无数据'}
|
||
</Text>
|
||
</Box>
|
||
<Box>
|
||
<Text fontWeight="bold" fontSize="sm" mb={2} color="green.600">竞争劣势</Text>
|
||
<Text fontSize="sm">
|
||
{comprehensiveData.competitive_position.analysis?.competitive_disadvantages || '暂无数据'}
|
||
</Text>
|
||
</Box>
|
||
</SimpleGrid>
|
||
</CardBody>
|
||
</Card>
|
||
)}
|
||
|
||
{/* 业务结构分析 */}
|
||
{comprehensiveData?.business_structure && comprehensiveData.business_structure.length > 0 && (
|
||
<Card bg={cardBg} shadow="md">
|
||
<CardHeader>
|
||
<HStack>
|
||
<Icon as={FaChartPie} color="purple.500" />
|
||
<Heading size="sm">业务结构分析</Heading>
|
||
<Badge>{comprehensiveData.business_structure[0]?.report_period}</Badge>
|
||
</HStack>
|
||
</CardHeader>
|
||
<CardBody>
|
||
<DisclaimerBox />
|
||
<VStack spacing={3} align="stretch">
|
||
{comprehensiveData.business_structure.map((business, idx) => (
|
||
<BusinessTreeItem key={idx} business={business} depth={business.business_level - 1} />
|
||
))}
|
||
</VStack>
|
||
</CardBody>
|
||
</Card>
|
||
)}
|
||
|
||
{/* 产业链分析 */}
|
||
{valueChainData && (
|
||
<Card bg={cardBg} shadow="md">
|
||
<CardHeader>
|
||
<HStack>
|
||
<Icon as={FaNetworkWired} color="teal.500" />
|
||
<Heading size="sm">产业链分析</Heading>
|
||
<HStack spacing={2}>
|
||
<Badge colorScheme="orange">
|
||
上游 {valueChainData.analysis_summary?.upstream_nodes || 0}
|
||
</Badge>
|
||
<Badge colorScheme="blue">
|
||
核心 {valueChainData.analysis_summary?.company_nodes || 0}
|
||
</Badge>
|
||
<Badge colorScheme="green">
|
||
下游 {valueChainData.analysis_summary?.downstream_nodes || 0}
|
||
</Badge>
|
||
</HStack>
|
||
</HStack>
|
||
</CardHeader>
|
||
<CardBody>
|
||
<DisclaimerBox />
|
||
<Tabs variant="soft-rounded" colorScheme="teal">
|
||
<TabList>
|
||
<Tab>层级视图</Tab>
|
||
<Tab>流向关系</Tab>
|
||
</TabList>
|
||
|
||
<TabPanels>
|
||
<TabPanel>
|
||
<VStack spacing={8} align="stretch">
|
||
{(valueChainData.value_chain_structure?.nodes_by_level?.['level_-2'] ||
|
||
valueChainData.value_chain_structure?.nodes_by_level?.['level_-1']) && (
|
||
<Box>
|
||
<HStack mb={4}>
|
||
<Badge colorScheme="orange" fontSize="md" px={3} py={1}>上游供应链</Badge>
|
||
<Text fontSize="sm" color="gray.600">原材料与供应商</Text>
|
||
</HStack>
|
||
<SimpleGrid columns={{ base: 2, md: 3, lg: 4 }} spacing={4}>
|
||
{[
|
||
...(valueChainData.value_chain_structure?.nodes_by_level?.['level_-2'] || []),
|
||
...(valueChainData.value_chain_structure?.nodes_by_level?.['level_-1'] || [])
|
||
].map((node, idx) => (
|
||
<ValueChainNodeCard key={idx} node={node} level={node.node_level} />
|
||
))}
|
||
</SimpleGrid>
|
||
</Box>
|
||
)}
|
||
|
||
{valueChainData.value_chain_structure?.nodes_by_level?.['level_0'] && (
|
||
<Box>
|
||
<HStack mb={4}>
|
||
<Badge colorScheme="blue" fontSize="md" px={3} py={1}>核心企业</Badge>
|
||
<Text fontSize="sm" color="gray.600">公司主体与产品</Text>
|
||
</HStack>
|
||
<SimpleGrid columns={{ base: 1, md: 2, lg: 3 }} spacing={4}>
|
||
{valueChainData.value_chain_structure.nodes_by_level['level_0'].map((node, idx) => (
|
||
<ValueChainNodeCard
|
||
key={idx}
|
||
node={node}
|
||
isCompany={node.node_type === 'company'}
|
||
level={0}
|
||
/>
|
||
))}
|
||
</SimpleGrid>
|
||
</Box>
|
||
)}
|
||
|
||
{(valueChainData.value_chain_structure?.nodes_by_level?.['level_1'] ||
|
||
valueChainData.value_chain_structure?.nodes_by_level?.['level_2']) && (
|
||
<Box>
|
||
<HStack mb={4}>
|
||
<Badge colorScheme="green" fontSize="md" px={3} py={1}>下游客户</Badge>
|
||
<Text fontSize="sm" color="gray.600">客户与终端市场</Text>
|
||
</HStack>
|
||
<SimpleGrid columns={{ base: 2, md: 3, lg: 4 }} spacing={4}>
|
||
{[
|
||
...(valueChainData.value_chain_structure?.nodes_by_level?.['level_1'] || []),
|
||
...(valueChainData.value_chain_structure?.nodes_by_level?.['level_2'] || [])
|
||
].map((node, idx) => (
|
||
<ValueChainNodeCard key={idx} node={node} level={node.node_level} />
|
||
))}
|
||
</SimpleGrid>
|
||
</Box>
|
||
)}
|
||
</VStack>
|
||
</TabPanel>
|
||
|
||
<TabPanel>
|
||
{getSankeyChartOption() ? (
|
||
<ReactECharts
|
||
option={getSankeyChartOption()}
|
||
style={{ height: '500px' }}
|
||
theme="light"
|
||
/>
|
||
) : (
|
||
<Center h="200px">
|
||
<Text color="gray.500">暂无流向数据</Text>
|
||
</Center>
|
||
)}
|
||
</TabPanel>
|
||
</TabPanels>
|
||
</Tabs>
|
||
</CardBody>
|
||
</Card>
|
||
)}
|
||
|
||
{/* 关键因素与发展时间线 */}
|
||
<Grid templateColumns="repeat(2, 1fr)" gap={6}>
|
||
<GridItem colSpan={{ base: 2, lg: 1 }}>
|
||
{keyFactorsData?.key_factors && (
|
||
<Card bg={cardBg} shadow="md" h="full">
|
||
<CardHeader>
|
||
<HStack>
|
||
<Icon as={FaBalanceScale} color="orange.500" />
|
||
<Heading size="sm">关键因素</Heading>
|
||
<Badge>{keyFactorsData.key_factors.total_factors} 项</Badge>
|
||
</HStack>
|
||
</CardHeader>
|
||
<CardBody>
|
||
<DisclaimerBox />
|
||
<Accordion allowMultiple>
|
||
{keyFactorsData.key_factors.categories.map((category, idx) => (
|
||
<AccordionItem key={idx}>
|
||
<AccordionButton>
|
||
<Box flex="1" textAlign="left">
|
||
<HStack>
|
||
<Text fontWeight="medium">{category.category_name}</Text>
|
||
<Badge size="sm" variant="subtle">
|
||
{category.factors.length}
|
||
</Badge>
|
||
</HStack>
|
||
</Box>
|
||
<AccordionIcon />
|
||
</AccordionButton>
|
||
<AccordionPanel pb={4}>
|
||
<VStack spacing={3} align="stretch">
|
||
{category.factors.map((factor, fidx) => (
|
||
<KeyFactorCard key={fidx} factor={factor} />
|
||
))}
|
||
</VStack>
|
||
</AccordionPanel>
|
||
</AccordionItem>
|
||
))}
|
||
</Accordion>
|
||
</CardBody>
|
||
</Card>
|
||
)}
|
||
</GridItem>
|
||
|
||
<GridItem colSpan={{ base: 2, lg: 1 }}>
|
||
{keyFactorsData?.development_timeline && (
|
||
<Card bg={cardBg} shadow="md" h="full">
|
||
<CardHeader>
|
||
<HStack>
|
||
<Icon as={FaHistory} color="cyan.500" />
|
||
<Heading size="sm">发展时间线</Heading>
|
||
<HStack spacing={1}>
|
||
<Badge colorScheme="red">
|
||
正面 {keyFactorsData.development_timeline.statistics?.positive_events || 0}
|
||
</Badge>
|
||
<Badge colorScheme="green">
|
||
负面 {keyFactorsData.development_timeline.statistics?.negative_events || 0}
|
||
</Badge>
|
||
</HStack>
|
||
</HStack>
|
||
</CardHeader>
|
||
<CardBody>
|
||
<DisclaimerBox />
|
||
<Box maxH="600px" overflowY="auto" pr={2}>
|
||
<TimelineComponent events={keyFactorsData.development_timeline.events} />
|
||
</Box>
|
||
</CardBody>
|
||
</Card>
|
||
)}
|
||
</GridItem>
|
||
</Grid>
|
||
|
||
{/* 业务板块详情 */}
|
||
{comprehensiveData?.business_segments && comprehensiveData.business_segments.length > 0 && (
|
||
<Card bg={cardBg} shadow="md">
|
||
<CardHeader>
|
||
<HStack>
|
||
<Icon as={FaIndustry} color="indigo.500" />
|
||
<Heading size="sm">业务板块详情</Heading>
|
||
<Badge>{comprehensiveData.business_segments.length} 个板块</Badge>
|
||
</HStack>
|
||
</CardHeader>
|
||
<CardBody>
|
||
<DisclaimerBox />
|
||
<SimpleGrid columns={{ base: 1, md: 2, lg: 3 }} spacing={4}>
|
||
{comprehensiveData.business_segments.map((segment, idx) => {
|
||
const isExpanded = expandedSegments[idx];
|
||
|
||
return (
|
||
<Card key={idx} variant="outline">
|
||
<CardBody>
|
||
<VStack align="stretch" spacing={3}>
|
||
<HStack justify="space-between">
|
||
<Text fontWeight="bold" fontSize="md">{segment.segment_name}</Text>
|
||
<Button
|
||
size="sm"
|
||
variant="ghost"
|
||
leftIcon={<Icon as={isExpanded ? FaCompressAlt : FaExpandAlt} />}
|
||
onClick={() => toggleSegmentExpansion(idx)}
|
||
colorScheme="blue"
|
||
>
|
||
{isExpanded ? '折叠' : '展开'}
|
||
</Button>
|
||
</HStack>
|
||
|
||
<Box>
|
||
<Text fontSize="xs" color="gray.500" mb={1}>业务描述</Text>
|
||
<Text fontSize="sm" noOfLines={isExpanded ? undefined : 3}>
|
||
{segment.segment_description || '暂无描述'}
|
||
</Text>
|
||
</Box>
|
||
|
||
<Box>
|
||
<Text fontSize="xs" color="gray.500" mb={1}>竞争地位</Text>
|
||
<Text fontSize="sm" noOfLines={isExpanded ? undefined : 2}>
|
||
{segment.competitive_position || '暂无数据'}
|
||
</Text>
|
||
</Box>
|
||
|
||
<Box>
|
||
<Text fontSize="xs" color="gray.500" mb={1}>未来潜力</Text>
|
||
<Text fontSize="sm" noOfLines={isExpanded ? undefined : 2} color="blue.600">
|
||
{segment.future_potential || '暂无数据'}
|
||
</Text>
|
||
</Box>
|
||
|
||
{isExpanded && segment.key_products && (
|
||
<Box>
|
||
<Text fontSize="xs" color="gray.500" mb={1}>主要产品</Text>
|
||
<Text fontSize="sm" color="green.600">
|
||
{segment.key_products}
|
||
</Text>
|
||
</Box>
|
||
)}
|
||
|
||
{isExpanded && segment.market_share && (
|
||
<Box>
|
||
<Text fontSize="xs" color="gray.500" mb={1}>市场份额</Text>
|
||
<HStack>
|
||
<Badge colorScheme="purple" fontSize="sm">
|
||
{segment.market_share}%
|
||
</Badge>
|
||
</HStack>
|
||
</Box>
|
||
)}
|
||
|
||
{isExpanded && segment.revenue_contribution && (
|
||
<Box>
|
||
<Text fontSize="xs" color="gray.500" mb={1}>营收贡献</Text>
|
||
<HStack>
|
||
<Badge colorScheme="orange" fontSize="sm">
|
||
{segment.revenue_contribution}%
|
||
</Badge>
|
||
</HStack>
|
||
</Box>
|
||
)}
|
||
</VStack>
|
||
</CardBody>
|
||
</Card>
|
||
);
|
||
})}
|
||
</SimpleGrid>
|
||
</CardBody>
|
||
</Card>
|
||
)}
|
||
|
||
{/* 战略分析 */}
|
||
{comprehensiveData?.qualitative_analysis?.strategy && (
|
||
<Card bg={cardBg} shadow="md">
|
||
<CardHeader>
|
||
<HStack>
|
||
<Icon as={FaRocket} color="red.500" />
|
||
<Heading size="sm">战略分析</Heading>
|
||
</HStack>
|
||
</CardHeader>
|
||
<CardBody>
|
||
<DisclaimerBox />
|
||
<Grid templateColumns="repeat(2, 1fr)" gap={6}>
|
||
<GridItem colSpan={{ base: 2, md: 1 }}>
|
||
<VStack align="stretch" spacing={3}>
|
||
<Text fontWeight="bold" fontSize="sm" color="gray.600">战略方向</Text>
|
||
<Box p={4} bg={useColorModeValue('purple.50', 'purple.900')} borderRadius="md">
|
||
<Text fontSize="sm">
|
||
{comprehensiveData.qualitative_analysis.strategy.strategy_description || '暂无数据'}
|
||
</Text>
|
||
</Box>
|
||
</VStack>
|
||
</GridItem>
|
||
|
||
<GridItem colSpan={{ base: 2, md: 1 }}>
|
||
<VStack align="stretch" spacing={3}>
|
||
<Text fontWeight="bold" fontSize="sm" color="gray.600">战略举措</Text>
|
||
<Box p={4} bg={useColorModeValue('orange.50', 'orange.900')} borderRadius="md">
|
||
<Text fontSize="sm">
|
||
{comprehensiveData.qualitative_analysis.strategy.strategic_initiatives || '暂无数据'}
|
||
</Text>
|
||
</Box>
|
||
</VStack>
|
||
</GridItem>
|
||
</Grid>
|
||
</CardBody>
|
||
</Card>
|
||
)}
|
||
</VStack>
|
||
</TabPanel>
|
||
|
||
{/* 基本信息标签页 */}
|
||
<TabPanel p={0} pt={6}>
|
||
<Card bg={cardBg} shadow="md">
|
||
<CardBody>
|
||
<Tabs variant="enclosed" colorScheme="blue">
|
||
<TabList flexWrap="wrap">
|
||
<Tab><Icon as={FaShareAlt} mr={2} />股权结构</Tab>
|
||
<Tab><Icon as={FaUserTie} mr={2} />管理团队</Tab>
|
||
<Tab><Icon as={FaBullhorn} mr={2} />公司公告</Tab>
|
||
<Tab><Icon as={FaSitemap} mr={2} />分支机构</Tab>
|
||
<Tab><Icon as={FaInfoCircle} mr={2} />工商信息</Tab>
|
||
</TabList>
|
||
|
||
<TabPanels>
|
||
{/* 股权结构标签页 */}
|
||
<TabPanel>
|
||
<VStack spacing={6} align="stretch">
|
||
{actualControl.length > 0 && (
|
||
<Box>
|
||
<HStack mb={4}>
|
||
<Icon as={FaCrown} color="gold" boxSize={5} />
|
||
<Heading size="sm">实际控制人</Heading>
|
||
</HStack>
|
||
<Card variant="outline">
|
||
<CardBody>
|
||
<HStack justify="space-between">
|
||
<VStack align="start">
|
||
<Text fontWeight="bold" fontSize="lg">
|
||
{actualControl[0].actual_controller_name}
|
||
</Text>
|
||
<HStack>
|
||
<Badge colorScheme="purple">{actualControl[0].control_type}</Badge>
|
||
<Text fontSize="sm" color="gray.500">
|
||
截至 {formatUtils.formatDate(actualControl[0].end_date)}
|
||
</Text>
|
||
</HStack>
|
||
</VStack>
|
||
<Stat textAlign="right">
|
||
<StatLabel>控制比例</StatLabel>
|
||
<StatNumber color="purple.500">
|
||
{formatUtils.formatPercentage(actualControl[0].holding_ratio)}
|
||
</StatNumber>
|
||
<StatHelpText>
|
||
{formatUtils.formatShares(actualControl[0].holding_shares)}
|
||
</StatHelpText>
|
||
</Stat>
|
||
</HStack>
|
||
</CardBody>
|
||
</Card>
|
||
</Box>
|
||
)}
|
||
|
||
{concentration.length > 0 && (
|
||
<Box>
|
||
<HStack mb={4}>
|
||
<Icon as={FaChartPie} color="blue.500" boxSize={5} />
|
||
<Heading size="sm">股权集中度</Heading>
|
||
</HStack>
|
||
<SimpleGrid columns={{ base: 1, md: 2 }} spacing={4}>
|
||
{getConcentrationTrend().slice(0, 1).map(([date, items]) => (
|
||
<Card key={date} variant="outline">
|
||
<CardHeader pb={2}>
|
||
<Text fontSize="sm" color="gray.500">
|
||
{formatUtils.formatDate(date)}
|
||
</Text>
|
||
</CardHeader>
|
||
<CardBody pt={2}>
|
||
<VStack spacing={3} align="stretch">
|
||
{Object.entries(items).map(([key, item]) => (
|
||
<HStack key={key} justify="space-between">
|
||
<Text fontSize="sm">{item.stat_item}</Text>
|
||
<HStack>
|
||
<Text fontWeight="bold" color="blue.500">
|
||
{formatUtils.formatPercentage(item.holding_ratio)}
|
||
</Text>
|
||
{item.ratio_change && (
|
||
<Badge colorScheme={item.ratio_change > 0 ? 'red' : 'green'}>
|
||
<Icon as={item.ratio_change > 0 ? FaArrowUp : FaArrowDown} mr={1} boxSize={3} />
|
||
{Math.abs(item.ratio_change).toFixed(2)}%
|
||
</Badge>
|
||
)}
|
||
</HStack>
|
||
</HStack>
|
||
))}
|
||
</VStack>
|
||
</CardBody>
|
||
</Card>
|
||
))}
|
||
</SimpleGrid>
|
||
</Box>
|
||
)}
|
||
|
||
{topShareholders.length > 0 && (
|
||
<Box>
|
||
<HStack mb={4}>
|
||
<Icon as={FaUsers} color="green.500" boxSize={5} />
|
||
<Heading size="sm">十大股东</Heading>
|
||
<Badge>{formatUtils.formatDate(topShareholders[0].end_date)}</Badge>
|
||
</HStack>
|
||
<TableContainer>
|
||
<Table size="sm" variant="striped">
|
||
<Thead>
|
||
<Tr>
|
||
<Th>排名</Th>
|
||
<Th>股东名称</Th>
|
||
<Th>股东类型</Th>
|
||
<Th isNumeric>持股数量</Th>
|
||
<Th isNumeric>持股比例</Th>
|
||
<Th>股份性质</Th>
|
||
</Tr>
|
||
</Thead>
|
||
<Tbody>
|
||
{topShareholders.slice(0, 10).map((shareholder, idx) => (
|
||
<Tr key={idx}>
|
||
<Td>
|
||
<Badge colorScheme={idx < 3 ? 'red' : 'gray'}>
|
||
{shareholder.shareholder_rank}
|
||
</Badge>
|
||
</Td>
|
||
<Td>
|
||
<Tooltip label={shareholder.shareholder_name}>
|
||
<Text noOfLines={1} maxW="200px">
|
||
{shareholder.shareholder_name}
|
||
</Text>
|
||
</Tooltip>
|
||
</Td>
|
||
<Td>
|
||
<ShareholderTypeBadge type={shareholder.shareholder_type} />
|
||
</Td>
|
||
<Td isNumeric fontWeight="medium">
|
||
{formatUtils.formatShares(shareholder.holding_shares)}
|
||
</Td>
|
||
<Td isNumeric>
|
||
<Text color="blue.500" fontWeight="bold">
|
||
{formatUtils.formatPercentage(shareholder.total_share_ratio)}
|
||
</Text>
|
||
</Td>
|
||
<Td>
|
||
<Badge size="sm" variant="outline">
|
||
{shareholder.share_nature || '流通股'}
|
||
</Badge>
|
||
</Td>
|
||
</Tr>
|
||
))}
|
||
</Tbody>
|
||
</Table>
|
||
</TableContainer>
|
||
</Box>
|
||
)}
|
||
|
||
{topCirculationShareholders.length > 0 && (
|
||
<Box>
|
||
<HStack mb={4}>
|
||
<Icon as={FaChartLine} color="purple.500" boxSize={5} />
|
||
<Heading size="sm">十大流通股东</Heading>
|
||
<Badge>{formatUtils.formatDate(topCirculationShareholders[0].end_date)}</Badge>
|
||
</HStack>
|
||
<TableContainer>
|
||
<Table size="sm" variant="striped">
|
||
<Thead>
|
||
<Tr>
|
||
<Th>排名</Th>
|
||
<Th>股东名称</Th>
|
||
<Th>股东类型</Th>
|
||
<Th isNumeric>持股数量</Th>
|
||
<Th isNumeric>流通股比例</Th>
|
||
</Tr>
|
||
</Thead>
|
||
<Tbody>
|
||
{topCirculationShareholders.slice(0, 10).map((shareholder, idx) => (
|
||
<Tr key={idx}>
|
||
<Td>
|
||
<Badge colorScheme={idx < 3 ? 'orange' : 'gray'}>
|
||
{shareholder.shareholder_rank}
|
||
</Badge>
|
||
</Td>
|
||
<Td>
|
||
<Tooltip label={shareholder.shareholder_name}>
|
||
<Text noOfLines={1} maxW="250px">
|
||
{shareholder.shareholder_name}
|
||
</Text>
|
||
</Tooltip>
|
||
</Td>
|
||
<Td>
|
||
<ShareholderTypeBadge type={shareholder.shareholder_type} />
|
||
</Td>
|
||
<Td isNumeric fontWeight="medium">
|
||
{formatUtils.formatShares(shareholder.holding_shares)}
|
||
</Td>
|
||
<Td isNumeric>
|
||
<Text color="purple.500" fontWeight="bold">
|
||
{formatUtils.formatPercentage(shareholder.circulation_share_ratio)}
|
||
</Text>
|
||
</Td>
|
||
</Tr>
|
||
))}
|
||
</Tbody>
|
||
</Table>
|
||
</TableContainer>
|
||
</Box>
|
||
)}
|
||
</VStack>
|
||
</TabPanel>
|
||
|
||
{/* 管理团队标签页 */}
|
||
<TabPanel>
|
||
<VStack spacing={6} align="stretch">
|
||
{Object.entries(getManagementByCategory()).map(([category, people]) => (
|
||
people.length > 0 && (
|
||
<Box key={category}>
|
||
<HStack mb={4}>
|
||
<Icon
|
||
as={category === '高管' ? FaUserTie :
|
||
category === '董事' ? FaCrown :
|
||
category === '监事' ? FaEye : FaUsers}
|
||
color={category === '高管' ? 'blue.500' :
|
||
category === '董事' ? 'purple.500' :
|
||
category === '监事' ? 'green.500' : 'gray.500'}
|
||
boxSize={5}
|
||
/>
|
||
<Heading size="sm">{category}</Heading>
|
||
<Badge>{people.length}人</Badge>
|
||
</HStack>
|
||
|
||
<SimpleGrid columns={{ base: 1, md: 2, lg: 3 }} spacing={4}>
|
||
{people.map((person, idx) => (
|
||
<Card key={idx} variant="outline" size="sm">
|
||
<CardBody>
|
||
<HStack spacing={3} align="start">
|
||
<Avatar
|
||
name={person.name}
|
||
size="md"
|
||
bg={category === '高管' ? 'blue.500' :
|
||
category === '董事' ? 'purple.500' :
|
||
category === '监事' ? 'green.500' : 'gray.500'}
|
||
/>
|
||
<VStack align="start" spacing={1} flex={1}>
|
||
<HStack>
|
||
<Text fontWeight="bold">{person.name}</Text>
|
||
{person.gender && (
|
||
<Icon
|
||
as={FaVenusMars}
|
||
color={person.gender === '男' ? 'blue.400' : 'pink.400'}
|
||
boxSize={3}
|
||
/>
|
||
)}
|
||
</HStack>
|
||
<Text fontSize="sm" color="blue.600">
|
||
{person.position_name}
|
||
</Text>
|
||
<HStack spacing={2} flexWrap="wrap">
|
||
{person.education && (
|
||
<Tag size="sm" variant="subtle">
|
||
<Icon as={FaGraduationCap} mr={1} boxSize={3} />
|
||
{person.education}
|
||
</Tag>
|
||
)}
|
||
{person.birth_year && (
|
||
<Tag size="sm" variant="subtle">
|
||
{new Date().getFullYear() - parseInt(person.birth_year)}岁
|
||
</Tag>
|
||
)}
|
||
{person.nationality && person.nationality !== '中国' && (
|
||
<Tag size="sm" colorScheme="orange">
|
||
<Icon as={FaPassport} mr={1} boxSize={3} />
|
||
{person.nationality}
|
||
</Tag>
|
||
)}
|
||
</HStack>
|
||
<Text fontSize="xs" color="gray.500">
|
||
任职日期：{formatUtils.formatDate(person.start_date)}
|
||
</Text>
|
||
</VStack>
|
||
</HStack>
|
||
</CardBody>
|
||
</Card>
|
||
))}
|
||
</SimpleGrid>
|
||
</Box>
|
||
)
|
||
))}
|
||
</VStack>
|
||
</TabPanel>
|
||
|
||
{/* 公司公告标签页 */}
|
||
<TabPanel>
|
||
<VStack spacing={4} align="stretch">
|
||
{disclosureSchedule.length > 0 && (
|
||
<Box>
|
||
<HStack mb={3}>
|
||
<Icon as={FaCalendarAlt} color="orange.500" />
|
||
<Text fontWeight="bold">财报披露日程</Text>
|
||
</HStack>
|
||
<SimpleGrid columns={{ base: 2, md: 4 }} spacing={3}>
|
||
{disclosureSchedule.slice(0, 4).map((schedule, idx) => (
|
||
<Card
|
||
key={idx}
|
||
variant="outline"
|
||
size="sm"
|
||
bg={schedule.is_disclosed ? 'green.50' : 'orange.50'}
|
||
>
|
||
<CardBody p={3}>
|
||
<VStack spacing={1}>
|
||
<Badge colorScheme={schedule.is_disclosed ? 'green' : 'orange'}>
|
||
{schedule.report_name}
|
||
</Badge>
|
||
<Text fontSize="sm" fontWeight="bold">
|
||
{schedule.is_disclosed ? '已披露' : '预计'}
|
||
</Text>
|
||
<Text fontSize="xs">
|
||
{formatUtils.formatDate(
|
||
schedule.is_disclosed ? schedule.actual_date : schedule.latest_scheduled_date
|
||
)}
|
||
</Text>
|
||
</VStack>
|
||
</CardBody>
|
||
</Card>
|
||
))}
|
||
</SimpleGrid>
|
||
</Box>
|
||
)}
|
||
|
||
<Divider />
|
||
|
||
<Box>
|
||
<HStack mb={3}>
|
||
<Icon as={FaBullhorn} color="blue.500" />
|
||
<Text fontWeight="bold">最新公告</Text>
|
||
</HStack>
|
||
<VStack spacing={2} align="stretch">
|
||
{announcements.map((announcement, idx) => (
|
||
<Card
|
||
key={idx}
|
||
variant="outline"
|
||
size="sm"
|
||
cursor="pointer"
|
||
onClick={() => {
|
||
setSelectedAnnouncement(announcement);
|
||
onAnnouncementOpen();
|
||
}}
|
||
_hover={{ bg: 'gray.50' }}
|
||
>
|
||
<CardBody p={3}>
|
||
<HStack justify="space-between">
|
||
<VStack align="start" spacing={1} flex={1}>
|
||
<HStack>
|
||
<Badge size="sm" colorScheme="blue">
|
||
{announcement.info_type || '公告'}
|
||
</Badge>
|
||
<Text fontSize="xs" color="gray.500">
|
||
{formatUtils.formatDate(announcement.announce_date)}
|
||
</Text>
|
||
</HStack>
|
||
<Text fontSize="sm" fontWeight="medium" noOfLines={1}>
|
||
{announcement.title}
|
||
</Text>
|
||
</VStack>
|
||
<HStack>
|
||
{announcement.format && (
|
||
<Tag size="sm" variant="subtle">{announcement.format}</Tag>
|
||
)}
|
||
<IconButton
|
||
size="sm"
|
||
icon={<ExternalLinkIcon />}
|
||
variant="ghost"
|
||
onClick={(e) => {
|
||
e.stopPropagation();
|
||
window.open(announcement.url, '_blank');
|
||
}}
|
||
/>
|
||
</HStack>
|
||
</HStack>
|
||
</CardBody>
|
||
</Card>
|
||
))}
|
||
</VStack>
|
||
</Box>
|
||
</VStack>
|
||
</TabPanel>
|
||
|
||
{/* 分支机构标签页 */}
|
||
<TabPanel>
|
||
{branches.length > 0 ? (
|
||
<SimpleGrid columns={{ base: 1, md: 2 }} spacing={4}>
|
||
{branches.map((branch, idx) => (
|
||
<Card key={idx} variant="outline">
|
||
<CardBody>
|
||
<VStack align="start" spacing={3}>
|
||
<HStack justify="space-between" w="full">
|
||
<Text fontWeight="bold">{branch.branch_name}</Text>
|
||
<Badge
|
||
colorScheme={branch.business_status === '存续' ? 'green' : 'red'}
|
||
>
|
||
{branch.business_status}
|
||
</Badge>
|
||
</HStack>
|
||
|
||
<SimpleGrid columns={2} spacing={2} w="full">
|
||
<VStack align="start" spacing={1}>
|
||
<Text fontSize="xs" color="gray.500">注册资本</Text>
|
||
<Text fontSize="sm" fontWeight="medium">
|
||
{branch.register_capital || '-'}
|
||
</Text>
|
||
</VStack>
|
||
<VStack align="start" spacing={1}>
|
||
<Text fontSize="xs" color="gray.500">法人代表</Text>
|
||
<Text fontSize="sm" fontWeight="medium">
|
||
{branch.legal_person || '-'}
|
||
</Text>
|
||
</VStack>
|
||
<VStack align="start" spacing={1}>
|
||
<Text fontSize="xs" color="gray.500">成立日期</Text>
|
||
<Text fontSize="sm" fontWeight="medium">
|
||
{formatUtils.formatDate(branch.register_date)}
|
||
</Text>
|
||
</VStack>
|
||
<VStack align="start" spacing={1}>
|
||
<Text fontSize="xs" color="gray.500">关联企业</Text>
|
||
<Text fontSize="sm" fontWeight="medium">
|
||
{branch.related_company_count || 0} 家
|
||
</Text>
|
||
</VStack>
|
||
</SimpleGrid>
|
||
</VStack>
|
||
</CardBody>
|
||
</Card>
|
||
))}
|
||
</SimpleGrid>
|
||
) : (
|
||
<Center h="200px">
|
||
<VStack>
|
||
<Icon as={FaSitemap} boxSize={12} color="gray.300" />
|
||
<Text color="gray.500">暂无分支机构信息</Text>
|
||
</VStack>
|
||
</Center>
|
||
)}
|
||
</TabPanel>
|
||
|
||
{/* 工商信息标签页 */}
|
||
<TabPanel>
|
||
{basicInfo && (
|
||
<VStack spacing={4} align="stretch">
|
||
<SimpleGrid columns={{ base: 1, md: 2 }} spacing={6}>
|
||
<Box>
|
||
<Heading size="sm" mb={3}>工商信息</Heading>
|
||
<VStack align="start" spacing={2}>
|
||
<HStack w="full">
|
||
<Text fontSize="sm" color="gray.600" minW="80px">统一信用代码</Text>
|
||
<Code fontSize="xs">{basicInfo.credit_code}</Code>
|
||
</HStack>
|
||
<HStack w="full">
|
||
<Text fontSize="sm" color="gray.600" minW="80px">公司规模</Text>
|
||
<Text fontSize="sm">{basicInfo.company_size}</Text>
|
||
</HStack>
|
||
<HStack w="full">
|
||
<Text fontSize="sm" color="gray.600" minW="80px">注册地址</Text>
|
||
<Text fontSize="sm" noOfLines={2}>{basicInfo.reg_address}</Text>
|
||
</HStack>
|
||
<HStack w="full">
|
||
<Text fontSize="sm" color="gray.600" minW="80px">办公地址</Text>
|
||
<Text fontSize="sm" noOfLines={2}>{basicInfo.office_address}</Text>
|
||
</HStack>
|
||
</VStack>
|
||
</Box>
|
||
|
||
<Box>
|
||
<Heading size="sm" mb={3}>服务机构</Heading>
|
||
<VStack align="start" spacing={2}>
|
||
<Box>
|
||
<Text fontSize="sm" color="gray.600">会计师事务所</Text>
|
||
<Text fontSize="sm" fontWeight="medium">{basicInfo.accounting_firm}</Text>
|
||
</Box>
|
||
<Box>
|
||
<Text fontSize="sm" color="gray.600">律师事务所</Text>
|
||
<Text fontSize="sm" fontWeight="medium">{basicInfo.law_firm}</Text>
|
||
</Box>
|
||
</VStack>
|
||
</Box>
|
||
</SimpleGrid>
|
||
|
||
<Divider />
|
||
|
||
<Box>
|
||
<Heading size="sm" mb={3}>主营业务</Heading>
|
||
<Text fontSize="sm" lineHeight="tall">{basicInfo.main_business}</Text>
|
||
</Box>
|
||
|
||
<Box>
|
||
<Heading size="sm" mb={3}>经营范围</Heading>
|
||
<Text fontSize="sm" lineHeight="tall" color="gray.700">
|
||
{basicInfo.business_scope}
|
||
</Text>
|
||
</Box>
|
||
</VStack>
|
||
)}
|
||
</TabPanel>
|
||
</TabPanels>
|
||
</Tabs>
|
||
</CardBody>
|
||
</Card>
|
||
</TabPanel>
|
||
|
||
{/* 新闻动态标签页 */}
|
||
<TabPanel p={0} pt={6}>
|
||
<VStack spacing={4} align="stretch">
|
||
<Card bg={cardBg} shadow="md">
|
||
<CardBody>
|
||
<VStack spacing={4} align="stretch">
|
||
{/* 搜索框和统计信息 */}
|
||
<HStack justify="space-between" flexWrap="wrap">
|
||
<HStack flex={1} minW="300px">
|
||
<InputGroup>
|
||
<InputLeftElement pointerEvents="none">
|
||
<SearchIcon color="gray.400" />
|
||
</InputLeftElement>
|
||
<Input
|
||
placeholder="搜索相关新闻..."
|
||
value={newsSearchQuery}
|
||
onChange={(e) => setNewsSearchQuery(e.target.value)}
|
||
onKeyPress={(e) => e.key === 'Enter' && handleNewsSearch()}
|
||
/>
|
||
</InputGroup>
|
||
<Button
|
||
colorScheme="blue"
|
||
onClick={handleNewsSearch}
|
||
isLoading={newsLoading}
|
||
minW="80px"
|
||
>
|
||
搜索
|
||
</Button>
|
||
</HStack>
|
||
|
||
{newsPagination.total > 0 && (
|
||
<HStack spacing={2}>
|
||
<Icon as={FaNewspaper} color="blue.500" />
|
||
<Text fontSize="sm" color="gray.600">
|
||
共找到 <Text as="span" fontWeight="bold" color="blue.600">{newsPagination.total}</Text> 条新闻
|
||
</Text>
|
||
</HStack>
|
||
)}
|
||
</HStack>
|
||
|
||
<div id="news-list-top" />
|
||
|
||
{/* 新闻列表 */}
|
||
{newsLoading ? (
|
||
<Center h="400px">
|
||
<VStack spacing={3}>
|
||
<Spinner size="xl" color="blue.500" thickness="4px" />
|
||
<Text color="gray.600">正在加载新闻...</Text>
|
||
</VStack>
|
||
</Center>
|
||
) : newsEvents.length > 0 ? (
|
||
<>
|
||
<VStack spacing={3} align="stretch">
|
||
{newsEvents.map((event, idx) => {
|
||
const importanceColor = {
|
||
'S': 'red',
|
||
'A': 'orange',
|
||
'B': 'yellow',
|
||
'C': 'green'
|
||
}[event.importance] || 'gray';
|
||
|
||
const eventTypeIcon = {
|
||
'企业公告': FaBullhorn,
|
||
'政策': FaGavel,
|
||
'技术突破': FaFlask,
|
||
'企业融资': FaDollarSign,
|
||
'政策监管': FaShieldAlt,
|
||
'政策动态': FaFileAlt,
|
||
'行业事件': FaIndustry
|
||
}[event.event_type] || FaNewspaper;
|
||
|
||
return (
|
||
<Card
|
||
key={event.id || idx}
|
||
variant="outline"
|
||
_hover={{ bg: useColorModeValue('gray.50', 'gray.700'), shadow: 'md', borderColor: 'blue.300' }}
|
||
transition="all 0.2s"
|
||
>
|
||
<CardBody p={4}>
|
||
<VStack align="stretch" spacing={3}>
|
||
{/* 标题栏 */}
|
||
<HStack justify="space-between" align="start">
|
||
<VStack align="start" spacing={2} flex={1}>
|
||
<HStack>
|
||
<Icon as={eventTypeIcon} color="blue.500" boxSize={5} />
|
||
<Text fontWeight="bold" fontSize="lg" lineHeight="1.3">
|
||
{event.title}
|
||
</Text>
|
||
</HStack>
|
||
|
||
{/* 标签栏 */}
|
||
<HStack spacing={2} flexWrap="wrap">
|
||
{event.importance && (
|
||
<Badge colorScheme={importanceColor} variant="solid" px={2}>
|
||
{event.importance}级
|
||
</Badge>
|
||
)}
|
||
{event.event_type && (
|
||
<Badge colorScheme="blue" variant="outline">
|
||
{event.event_type}
|
||
</Badge>
|
||
)}
|
||
{event.invest_score && (
|
||
<Badge colorScheme="purple" variant="subtle">
|
||
投资分: {event.invest_score}
|
||
</Badge>
|
||
)}
|
||
{event.keywords && event.keywords.length > 0 && (
|
||
<>
|
||
{event.keywords.slice(0, 4).map((keyword, kidx) => (
|
||
<Tag key={kidx} size="sm" colorScheme="cyan" variant="subtle">
|
||
{typeof keyword === 'string'
|
||
? keyword
|
||
: (keyword?.concept || keyword?.name || '未知')}
|
||
</Tag>
|
||
))}
|
||
</>
|
||
)}
|
||
</HStack>
|
||
</VStack>
|
||
|
||
{/* 右侧信息栏 */}
|
||
<VStack align="end" spacing={1} minW="100px">
|
||
<Text fontSize="xs" color="gray.500">
|
||
{event.created_at ? new Date(event.created_at).toLocaleDateString('zh-CN', {
|
||
year: 'numeric',
|
||
month: '2-digit',
|
||
day: '2-digit'
|
||
}) : ''}
|
||
</Text>
|
||
<HStack spacing={3}>
|
||
{event.view_count !== undefined && (
|
||
<HStack spacing={1}>
|
||
<Icon as={FaEye} boxSize={3} color="gray.400" />
|
||
<Text fontSize="xs" color="gray.500">{event.view_count}</Text>
|
||
</HStack>
|
||
)}
|
||
{event.hot_score !== undefined && (
|
||
<HStack spacing={1}>
|
||
<Icon as={FaFire} boxSize={3} color="orange.400" />
|
||
<Text fontSize="xs" color="gray.500">{event.hot_score.toFixed(1)}</Text>
|
||
</HStack>
|
||
)}
|
||
</HStack>
|
||
{event.creator && (
|
||
<Text fontSize="xs" color="gray.400">
|
||
@{event.creator.username}
|
||
</Text>
|
||
)}
|
||
</VStack>
|
||
</HStack>
|
||
|
||
{/* 描述 */}
|
||
{event.description && (
|
||
<Text fontSize="sm" color="gray.700" lineHeight="1.6">
|
||
{event.description}
|
||
</Text>
|
||
)}
|
||
|
||
{/* 收益率数据 */}
|
||
{(event.related_avg_chg !== null || event.related_max_chg !== null || event.related_week_chg !== null) && (
|
||
<Box pt={2} borderTop="1px" borderColor="gray.200">
|
||
<HStack spacing={6} flexWrap="wrap">
|
||
<HStack spacing={1}>
|
||
<Icon as={FaChartLine} boxSize={3} color="gray.500" />
|
||
<Text fontSize="xs" color="gray.500" fontWeight="medium">相关涨跌:</Text>
|
||
</HStack>
|
||
{event.related_avg_chg !== null && event.related_avg_chg !== undefined && (
|
||
<HStack spacing={1}>
|
||
<Text fontSize="xs" color="gray.500">平均</Text>
|
||
<Text
|
||
fontSize="sm"
|
||
fontWeight="bold"
|
||
color={event.related_avg_chg > 0 ? 'red.500' : 'green.500'}
|
||
>
|
||
{event.related_avg_chg > 0 ? '+' : ''}{event.related_avg_chg.toFixed(2)}%
|
||
</Text>
|
||
</HStack>
|
||
)}
|
||
{event.related_max_chg !== null && event.related_max_chg !== undefined && (
|
||
<HStack spacing={1}>
|
||
<Text fontSize="xs" color="gray.500">最大</Text>
|
||
<Text
|
||
fontSize="sm"
|
||
fontWeight="bold"
|
||
color={event.related_max_chg > 0 ? 'red.500' : 'green.500'}
|
||
>
|
||
{event.related_max_chg > 0 ? '+' : ''}{event.related_max_chg.toFixed(2)}%
|
||
</Text>
|
||
</HStack>
|
||
)}
|
||
{event.related_week_chg !== null && event.related_week_chg !== undefined && (
|
||
<HStack spacing={1}>
|
||
<Text fontSize="xs" color="gray.500">周</Text>
|
||
<Text
|
||
fontSize="sm"
|
||
fontWeight="bold"
|
||
color={event.related_week_chg > 0 ? 'red.500' : 'green.500'}
|
||
>
|
||
{event.related_week_chg > 0 ? '+' : ''}{event.related_week_chg.toFixed(2)}%
|
||
</Text>
|
||
</HStack>
|
||
)}
|
||
</HStack>
|
||
</Box>
|
||
)}
|
||
</VStack>
|
||
</CardBody>
|
||
</Card>
|
||
);
|
||
})}
|
||
</VStack>
|
||
|
||
{/* 分页控件 */}
|
||
{newsPagination.pages > 1 && (
|
||
<Box pt={4}>
|
||
<HStack justify="space-between" align="center" flexWrap="wrap">
|
||
{/* 分页信息 */}
|
||
<Text fontSize="sm" color="gray.600">
|
||
第 {newsPagination.page} / {newsPagination.pages} 页
|
||
</Text>
|
||
|
||
{/* 分页按钮 */}
|
||
<HStack spacing={2}>
|
||
<Button
|
||
size="sm"
|
||
onClick={() => handleNewsPageChange(1)}
|
||
isDisabled={!newsPagination.has_prev || newsLoading}
|
||
leftIcon={<Icon as={FaChevronLeft} />}
|
||
>
|
||
首页
|
||
</Button>
|
||
<Button
|
||
size="sm"
|
||
onClick={() => handleNewsPageChange(newsPagination.page - 1)}
|
||
isDisabled={!newsPagination.has_prev || newsLoading}
|
||
>
|
||
上一页
|
||
</Button>
|
||
|
||
{/* 页码按钮 */}
|
||
{(() => {
|
||
const currentPage = newsPagination.page;
|
||
const totalPages = newsPagination.pages;
|
||
const pageButtons = [];
|
||
|
||
// 显示当前页及前后各2页
|
||
let startPage = Math.max(1, currentPage - 2);
|
||
let endPage = Math.min(totalPages, currentPage + 2);
|
||
|
||
// 如果开始页大于1，显示省略号
|
||
if (startPage > 1) {
|
||
pageButtons.push(
|
||
<Text key="start-ellipsis" fontSize="sm" color="gray.400">...</Text>
|
||
);
|
||
}
|
||
|
||
for (let i = startPage; i <= endPage; i++) {
|
||
pageButtons.push(
|
||
<Button
|
||
key={i}
|
||
size="sm"
|
||
variant={i === currentPage ? 'solid' : 'outline'}
|
||
colorScheme={i === currentPage ? 'blue' : 'gray'}
|
||
onClick={() => handleNewsPageChange(i)}
|
||
isDisabled={newsLoading}
|
||
>
|
||
{i}
|
||
</Button>
|
||
);
|
||
}
|
||
|
||
// 如果结束页小于总页数，显示省略号
|
||
if (endPage < totalPages) {
|
||
pageButtons.push(
|
||
<Text key="end-ellipsis" fontSize="sm" color="gray.400">...</Text>
|
||
);
|
||
}
|
||
|
||
return pageButtons;
|
||
})()}
|
||
|
||
<Button
|
||
size="sm"
|
||
onClick={() => handleNewsPageChange(newsPagination.page + 1)}
|
||
isDisabled={!newsPagination.has_next || newsLoading}
|
||
>
|
||
下一页
|
||
</Button>
|
||
<Button
|
||
size="sm"
|
||
onClick={() => handleNewsPageChange(newsPagination.pages)}
|
||
isDisabled={!newsPagination.has_next || newsLoading}
|
||
rightIcon={<Icon as={FaChevronRight} />}
|
||
>
|
||
末页
|
||
</Button>
|
||
</HStack>
|
||
</HStack>
|
||
</Box>
|
||
)}
|
||
</>
|
||
) : (
|
||
<Center h="400px">
|
||
<VStack spacing={3}>
|
||
<Icon as={FaNewspaper} boxSize={16} color="gray.300" />
|
||
<Text color="gray.500" fontSize="lg" fontWeight="medium">暂无相关新闻</Text>
|
||
<Text fontSize="sm" color="gray.400">
|
||
{newsSearchQuery ? '尝试修改搜索关键词' : '该公司暂无新闻动态'}
|
||
</Text>
|
||
</VStack>
|
||
</Center>
|
||
)}
|
||
</VStack>
|
||
</CardBody>
|
||
</Card>
|
||
</VStack>
|
||
</TabPanel>
|
||
</TabPanels>
|
||
</Tabs>
|
||
</VStack>
|
||
</Container>
|
||
|
||
{/* 公告详情模态框 */}
|
||
<Modal isOpen={isAnnouncementOpen} onClose={onAnnouncementClose} size="xl">
|
||
<ModalOverlay />
|
||
<ModalContent>
|
||
<ModalHeader>
|
||
<VStack align="start" spacing={1}>
|
||
<Text>{selectedAnnouncement?.title}</Text>
|
||
<HStack>
|
||
<Badge>{selectedAnnouncement?.info_type}</Badge>
|
||
<Text fontSize="sm" color="gray.500">
|
||
{formatUtils.formatDate(selectedAnnouncement?.announce_date)}
|
||
</Text>
|
||
</HStack>
|
||
</VStack>
|
||
</ModalHeader>
|
||
<ModalCloseButton />
|
||
<ModalBody>
|
||
<VStack align="start" spacing={3}>
|
||
<Text fontSize="sm">文件格式：{selectedAnnouncement?.format}</Text>
|
||
<Text fontSize="sm">文件大小：{selectedAnnouncement?.file_size} KB</Text>
|
||
</VStack>
|
||
</ModalBody>
|
||
<ModalFooter>
|
||
<Button
|
||
colorScheme="blue"
|
||
mr={3}
|
||
onClick={() => window.open(selectedAnnouncement?.url, '_blank')}
|
||
>
|
||
查看原文
|
||
</Button>
|
||
<Button variant="ghost" onClick={onAnnouncementClose}>关闭</Button>
|
||
</ModalFooter>
|
||
</ModalContent>
|
||
</Modal>
|
||
</Box>
|
||
);
|
||
};
|
||
|
||
export default CompanyAnalysisComplete;
|