refactor(MarketDataView): 使用 Panel 组件重构主组件
- 主组件从 1049 行精简至 285 行（减少 73%） - 添加 panels/index.ts 统一导出 - Tab 容器和状态管理保留在主组件 - 各面板内容拆分到独立组件 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
zdl
@@ -0,0 +1,15 @@
|
|||||||
|
// src/views/Company/components/MarketDataView/components/panels/index.ts
|
||||||
|
// Panel 组件统一导出
|
||||||
|
|
||||||
|
export { default as TradeDataPanel } from './TradeDataPanel';
|
||||||
|
export { default as FundingPanel } from './FundingPanel';
|
||||||
|
export { default as BigDealPanel } from './BigDealPanel';
|
||||||
|
export { default as UnusualPanel } from './UnusualPanel';
|
||||||
|
export { default as PledgePanel } from './PledgePanel';
|
||||||
|
|
||||||
|
// 导出类型
|
||||||
|
export type { TradeDataPanelProps } from './TradeDataPanel';
|
||||||
|
export type { FundingPanelProps } from './FundingPanel';
|
||||||
|
export type { BigDealPanelProps } from './BigDealPanel';
|
||||||
|
export type { UnusualPanelProps } from './UnusualPanel';
|
||||||
|
export type { PledgePanelProps } from './PledgePanel';
|
||||||
@@ -11,69 +11,41 @@ import {
|
|||||||
Tab,
|
Tab,
|
||||||
TabPanel,
|
TabPanel,
|
||||||
Text,
|
Text,
|
||||||
Table,
|
|
||||||
Thead,
|
|
||||||
Tbody,
|
|
||||||
Tr,
|
|
||||||
Th,
|
|
||||||
Td,
|
|
||||||
TableContainer,
|
|
||||||
Stat,
|
|
||||||
StatLabel,
|
|
||||||
StatNumber,
|
|
||||||
StatHelpText,
|
|
||||||
StatArrow,
|
|
||||||
SimpleGrid,
|
|
||||||
CardBody,
|
CardBody,
|
||||||
CardHeader,
|
|
||||||
Spinner,
|
Spinner,
|
||||||
Center,
|
Center,
|
||||||
Badge,
|
|
||||||
VStack,
|
VStack,
|
||||||
HStack,
|
HStack,
|
||||||
Select,
|
Select,
|
||||||
Button,
|
Button,
|
||||||
Tooltip,
|
|
||||||
Grid,
|
|
||||||
GridItem,
|
|
||||||
Icon,
|
Icon,
|
||||||
Heading,
|
|
||||||
Tag,
|
|
||||||
useDisclosure,
|
useDisclosure,
|
||||||
} from '@chakra-ui/react';
|
} from '@chakra-ui/react';
|
||||||
import {
|
import {
|
||||||
ChevronDownIcon,
|
|
||||||
ChevronUpIcon,
|
ChevronUpIcon,
|
||||||
InfoIcon,
|
|
||||||
RepeatIcon,
|
RepeatIcon,
|
||||||
TimeIcon,
|
|
||||||
ArrowUpIcon,
|
ArrowUpIcon,
|
||||||
ArrowDownIcon,
|
|
||||||
StarIcon,
|
StarIcon,
|
||||||
LockIcon,
|
LockIcon,
|
||||||
UnlockIcon,
|
UnlockIcon,
|
||||||
} from '@chakra-ui/icons';
|
} from '@chakra-ui/icons';
|
||||||
import ReactECharts from 'echarts-for-react';
|
|
||||||
|
|
||||||
// 内部模块导入
|
// 内部模块导入
|
||||||
import { themes, DEFAULT_PERIOD, PERIOD_OPTIONS } from './constants';
|
import { themes, DEFAULT_PERIOD, PERIOD_OPTIONS } from './constants';
|
||||||
import { useMarketData } from './hooks/useMarketData';
|
import { useMarketData } from './hooks/useMarketData';
|
||||||
import {
|
|
||||||
formatNumber,
|
|
||||||
formatPercent,
|
|
||||||
} from './utils/formatUtils';
|
|
||||||
import {
|
|
||||||
getKLineOption,
|
|
||||||
getMinuteKLineOption,
|
|
||||||
getFundingOption,
|
|
||||||
getPledgeOption,
|
|
||||||
} from './utils/chartOptions';
|
|
||||||
import {
|
import {
|
||||||
ThemedCard,
|
ThemedCard,
|
||||||
StockSummaryCard,
|
StockSummaryCard,
|
||||||
AnalysisModal,
|
AnalysisModal,
|
||||||
AnalysisContent,
|
AnalysisContent,
|
||||||
} from './components';
|
} from './components';
|
||||||
|
import {
|
||||||
|
TradeDataPanel,
|
||||||
|
FundingPanel,
|
||||||
|
BigDealPanel,
|
||||||
|
UnusualPanel,
|
||||||
|
PledgePanel,
|
||||||
|
} from './components/panels';
|
||||||
import type { MarketDataViewProps, RiseAnalysis } from './types';
|
import type { MarketDataViewProps, RiseAnalysis } from './types';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -268,771 +240,35 @@ const MarketDataView: React.FC<MarketDataViewProps> = ({ stockCode: propStockCod
|
|||||||
<TabPanels>
|
<TabPanels>
|
||||||
{/* 交易数据 Tab */}
|
{/* 交易数据 Tab */}
|
||||||
<TabPanel px={0}>
|
<TabPanel px={0}>
|
||||||
<VStack spacing={6} align="stretch">
|
<TradeDataPanel
|
||||||
{/* K线图 */}
|
theme={theme}
|
||||||
<ThemedCard theme={theme}>
|
tradeData={tradeData}
|
||||||
<CardBody>
|
minuteData={minuteData}
|
||||||
{tradeData.length > 0 && (
|
minuteLoading={minuteLoading}
|
||||||
<Box h="600px">
|
analysisMap={analysisMap}
|
||||||
<ReactECharts
|
onLoadMinuteData={loadMinuteData}
|
||||||
option={getKLineOption(theme, tradeData, analysisMap)}
|
onChartClick={handleChartClick}
|
||||||
style={{ height: '100%', width: '100%' }}
|
|
||||||
theme="light"
|
|
||||||
onEvents={{ click: handleChartClick }}
|
|
||||||
/>
|
/>
|
||||||
</Box>
|
|
||||||
)}
|
|
||||||
</CardBody>
|
|
||||||
</ThemedCard>
|
|
||||||
|
|
||||||
{/* 分钟K线数据 */}
|
|
||||||
<ThemedCard theme={theme}>
|
|
||||||
<CardHeader>
|
|
||||||
<HStack justify="space-between" align="center">
|
|
||||||
<HStack spacing={3}>
|
|
||||||
<Icon as={TimeIcon} color={theme.primary} boxSize={5} />
|
|
||||||
<Heading size="md" color={theme.textSecondary}>
|
|
||||||
当日分钟频数据
|
|
||||||
</Heading>
|
|
||||||
{minuteData && minuteData.trade_date && (
|
|
||||||
<Badge colorScheme="blue" fontSize="xs">
|
|
||||||
{minuteData.trade_date}
|
|
||||||
</Badge>
|
|
||||||
)}
|
|
||||||
</HStack>
|
|
||||||
<Button
|
|
||||||
leftIcon={<RepeatIcon />}
|
|
||||||
size="sm"
|
|
||||||
variant="outline"
|
|
||||||
colorScheme="blue"
|
|
||||||
onClick={loadMinuteData}
|
|
||||||
isLoading={minuteLoading}
|
|
||||||
loadingText="获取中"
|
|
||||||
>
|
|
||||||
获取分钟数据
|
|
||||||
</Button>
|
|
||||||
</HStack>
|
|
||||||
</CardHeader>
|
|
||||||
<CardBody>
|
|
||||||
{minuteLoading ? (
|
|
||||||
<Center h="400px">
|
|
||||||
<VStack spacing={4}>
|
|
||||||
<Spinner
|
|
||||||
thickness="4px"
|
|
||||||
speed="0.65s"
|
|
||||||
emptyColor={theme.bgDark}
|
|
||||||
color={theme.primary}
|
|
||||||
size="lg"
|
|
||||||
/>
|
|
||||||
<Text color={theme.textMuted} fontSize="sm">
|
|
||||||
加载分钟频数据中...
|
|
||||||
</Text>
|
|
||||||
</VStack>
|
|
||||||
</Center>
|
|
||||||
) : minuteData && minuteData.data && minuteData.data.length > 0 ? (
|
|
||||||
<VStack spacing={6} align="stretch">
|
|
||||||
<Box h="500px">
|
|
||||||
<ReactECharts
|
|
||||||
option={getMinuteKLineOption(theme, minuteData)}
|
|
||||||
style={{ height: '100%', width: '100%' }}
|
|
||||||
theme="light"
|
|
||||||
/>
|
|
||||||
</Box>
|
|
||||||
|
|
||||||
{/* 分钟数据统计 */}
|
|
||||||
<SimpleGrid columns={{ base: 2, md: 4 }} spacing={4}>
|
|
||||||
<Stat>
|
|
||||||
<StatLabel color={theme.textMuted} fontSize="sm">
|
|
||||||
<HStack spacing={1}>
|
|
||||||
<Icon as={ArrowUpIcon} boxSize={3} />
|
|
||||||
<Text>开盘价</Text>
|
|
||||||
</HStack>
|
|
||||||
</StatLabel>
|
|
||||||
<StatNumber color={theme.textPrimary} fontSize="lg">
|
|
||||||
{minuteData.data[0]?.open?.toFixed(2) || '-'}
|
|
||||||
</StatNumber>
|
|
||||||
</Stat>
|
|
||||||
<Stat>
|
|
||||||
<StatLabel color={theme.textMuted} fontSize="sm">
|
|
||||||
<HStack spacing={1}>
|
|
||||||
<Icon as={ArrowDownIcon} boxSize={3} />
|
|
||||||
<Text>当前价</Text>
|
|
||||||
</HStack>
|
|
||||||
</StatLabel>
|
|
||||||
<StatNumber
|
|
||||||
color={
|
|
||||||
(minuteData.data[minuteData.data.length - 1]?.close || 0) >=
|
|
||||||
(minuteData.data[0]?.open || 0)
|
|
||||||
? theme.success
|
|
||||||
: theme.danger
|
|
||||||
}
|
|
||||||
fontSize="lg"
|
|
||||||
>
|
|
||||||
{minuteData.data[minuteData.data.length - 1]?.close?.toFixed(2) ||
|
|
||||||
'-'}
|
|
||||||
</StatNumber>
|
|
||||||
<StatHelpText fontSize="xs">
|
|
||||||
<StatArrow
|
|
||||||
type={
|
|
||||||
(minuteData.data[minuteData.data.length - 1]?.close || 0) >=
|
|
||||||
(minuteData.data[0]?.open || 0)
|
|
||||||
? 'increase'
|
|
||||||
: 'decrease'
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
{(() => {
|
|
||||||
const lastClose =
|
|
||||||
minuteData.data[minuteData.data.length - 1]?.close;
|
|
||||||
const firstOpen = minuteData.data[0]?.open;
|
|
||||||
if (lastClose && firstOpen) {
|
|
||||||
return Math.abs(
|
|
||||||
((lastClose - firstOpen) / firstOpen) * 100
|
|
||||||
).toFixed(2);
|
|
||||||
}
|
|
||||||
return '0.00';
|
|
||||||
})()}
|
|
||||||
%
|
|
||||||
</StatHelpText>
|
|
||||||
</Stat>
|
|
||||||
<Stat>
|
|
||||||
<StatLabel color={theme.textMuted} fontSize="sm">
|
|
||||||
<HStack spacing={1}>
|
|
||||||
<Icon as={ChevronUpIcon} boxSize={3} />
|
|
||||||
<Text>最高价</Text>
|
|
||||||
</HStack>
|
|
||||||
</StatLabel>
|
|
||||||
<StatNumber color={theme.success} fontSize="lg">
|
|
||||||
{Math.max(
|
|
||||||
...minuteData.data.map((item) => item.high).filter(Boolean)
|
|
||||||
).toFixed(2)}
|
|
||||||
</StatNumber>
|
|
||||||
</Stat>
|
|
||||||
<Stat>
|
|
||||||
<StatLabel color={theme.textMuted} fontSize="sm">
|
|
||||||
<HStack spacing={1}>
|
|
||||||
<Icon as={ChevronDownIcon} boxSize={3} />
|
|
||||||
<Text>最低价</Text>
|
|
||||||
</HStack>
|
|
||||||
</StatLabel>
|
|
||||||
<StatNumber color={theme.danger} fontSize="lg">
|
|
||||||
{Math.min(
|
|
||||||
...minuteData.data.map((item) => item.low).filter(Boolean)
|
|
||||||
).toFixed(2)}
|
|
||||||
</StatNumber>
|
|
||||||
</Stat>
|
|
||||||
</SimpleGrid>
|
|
||||||
|
|
||||||
{/* 成交数据分析 */}
|
|
||||||
<Box
|
|
||||||
p={4}
|
|
||||||
bg={theme.bgDark}
|
|
||||||
borderRadius="lg"
|
|
||||||
border="1px solid"
|
|
||||||
borderColor={theme.border}
|
|
||||||
>
|
|
||||||
<HStack justify="space-between" mb={4}>
|
|
||||||
<Text fontWeight="bold" color={theme.textSecondary}>
|
|
||||||
成交数据分析
|
|
||||||
</Text>
|
|
||||||
<HStack spacing={2}>
|
|
||||||
<Badge colorScheme="purple" fontSize="xs">
|
|
||||||
总成交量:{' '}
|
|
||||||
{formatNumber(
|
|
||||||
minuteData.data.reduce((sum, item) => sum + item.volume, 0),
|
|
||||||
0
|
|
||||||
)}
|
|
||||||
</Badge>
|
|
||||||
<Badge colorScheme="orange" fontSize="xs">
|
|
||||||
总成交额:{' '}
|
|
||||||
{formatNumber(
|
|
||||||
minuteData.data.reduce((sum, item) => sum + item.amount, 0)
|
|
||||||
)}
|
|
||||||
</Badge>
|
|
||||||
</HStack>
|
|
||||||
</HStack>
|
|
||||||
|
|
||||||
<Grid templateColumns="repeat(3, 1fr)" gap={4}>
|
|
||||||
<Box>
|
|
||||||
<Text fontSize="sm" color={theme.textMuted} mb={2}>
|
|
||||||
活跃时段
|
|
||||||
</Text>
|
|
||||||
<Text fontSize="sm" color={theme.textPrimary}>
|
|
||||||
{(() => {
|
|
||||||
const maxVolume = Math.max(
|
|
||||||
...minuteData.data.map((item) => item.volume)
|
|
||||||
);
|
|
||||||
const activeTime = minuteData.data.find(
|
|
||||||
(item) => item.volume === maxVolume
|
|
||||||
);
|
|
||||||
return activeTime
|
|
||||||
? `${activeTime.time} (${formatNumber(maxVolume, 0)})`
|
|
||||||
: '-';
|
|
||||||
})()}
|
|
||||||
</Text>
|
|
||||||
</Box>
|
|
||||||
<Box>
|
|
||||||
<Text fontSize="sm" color={theme.textMuted} mb={2}>
|
|
||||||
平均价格
|
|
||||||
</Text>
|
|
||||||
<Text fontSize="sm" color={theme.textPrimary}>
|
|
||||||
{(
|
|
||||||
minuteData.data.reduce((sum, item) => sum + item.close, 0) /
|
|
||||||
minuteData.data.length
|
|
||||||
).toFixed(2)}
|
|
||||||
</Text>
|
|
||||||
</Box>
|
|
||||||
<Box>
|
|
||||||
<Text fontSize="sm" color={theme.textMuted} mb={2}>
|
|
||||||
数据点数
|
|
||||||
</Text>
|
|
||||||
<Text fontSize="sm" color={theme.textPrimary}>
|
|
||||||
{minuteData.data.length} 个分钟
|
|
||||||
</Text>
|
|
||||||
</Box>
|
|
||||||
</Grid>
|
|
||||||
</Box>
|
|
||||||
</VStack>
|
|
||||||
) : (
|
|
||||||
<Center h="300px">
|
|
||||||
<VStack spacing={4}>
|
|
||||||
<Icon as={InfoIcon} color={theme.textMuted} boxSize={12} />
|
|
||||||
<VStack spacing={2}>
|
|
||||||
<Text color={theme.textMuted} fontSize="lg">
|
|
||||||
暂无分钟频数据
|
|
||||||
</Text>
|
|
||||||
<Text color={theme.textMuted} fontSize="sm" textAlign="center">
|
|
||||||
点击"获取分钟数据"按钮加载最新的交易日分钟频数据
|
|
||||||
</Text>
|
|
||||||
</VStack>
|
|
||||||
</VStack>
|
|
||||||
</Center>
|
|
||||||
)}
|
|
||||||
</CardBody>
|
|
||||||
</ThemedCard>
|
|
||||||
|
|
||||||
{/* 交易明细表格 */}
|
|
||||||
<ThemedCard theme={theme}>
|
|
||||||
<CardHeader>
|
|
||||||
<Heading size="md" color={theme.textSecondary}>
|
|
||||||
交易明细
|
|
||||||
</Heading>
|
|
||||||
</CardHeader>
|
|
||||||
<CardBody>
|
|
||||||
<TableContainer>
|
|
||||||
<Table variant="simple" size="sm">
|
|
||||||
<Thead>
|
|
||||||
<Tr>
|
|
||||||
<Th color={theme.textSecondary}>日期</Th>
|
|
||||||
<Th isNumeric color={theme.textSecondary}>
|
|
||||||
开盘
|
|
||||||
</Th>
|
|
||||||
<Th isNumeric color={theme.textSecondary}>
|
|
||||||
最高
|
|
||||||
</Th>
|
|
||||||
<Th isNumeric color={theme.textSecondary}>
|
|
||||||
最低
|
|
||||||
</Th>
|
|
||||||
<Th isNumeric color={theme.textSecondary}>
|
|
||||||
收盘
|
|
||||||
</Th>
|
|
||||||
<Th isNumeric color={theme.textSecondary}>
|
|
||||||
涨跌幅
|
|
||||||
</Th>
|
|
||||||
<Th isNumeric color={theme.textSecondary}>
|
|
||||||
成交量
|
|
||||||
</Th>
|
|
||||||
<Th isNumeric color={theme.textSecondary}>
|
|
||||||
成交额
|
|
||||||
</Th>
|
|
||||||
</Tr>
|
|
||||||
</Thead>
|
|
||||||
<Tbody>
|
|
||||||
{tradeData
|
|
||||||
.slice(-10)
|
|
||||||
.reverse()
|
|
||||||
.map((item, idx) => (
|
|
||||||
<Tr key={idx} _hover={{ bg: theme.bgDark }}>
|
|
||||||
<Td color={theme.textPrimary}>{item.date}</Td>
|
|
||||||
<Td isNumeric color={theme.textPrimary}>
|
|
||||||
{item.open}
|
|
||||||
</Td>
|
|
||||||
<Td isNumeric color={theme.textPrimary}>
|
|
||||||
{item.high}
|
|
||||||
</Td>
|
|
||||||
<Td isNumeric color={theme.textPrimary}>
|
|
||||||
{item.low}
|
|
||||||
</Td>
|
|
||||||
<Td isNumeric color={theme.textPrimary} fontWeight="bold">
|
|
||||||
{item.close}
|
|
||||||
</Td>
|
|
||||||
<Td
|
|
||||||
isNumeric
|
|
||||||
color={
|
|
||||||
item.change_percent >= 0 ? theme.success : theme.danger
|
|
||||||
}
|
|
||||||
fontWeight="bold"
|
|
||||||
>
|
|
||||||
{item.change_percent >= 0 ? '+' : ''}
|
|
||||||
{formatPercent(item.change_percent)}
|
|
||||||
</Td>
|
|
||||||
<Td isNumeric color={theme.textPrimary}>
|
|
||||||
{formatNumber(item.volume, 0)}
|
|
||||||
</Td>
|
|
||||||
<Td isNumeric color={theme.textPrimary}>
|
|
||||||
{formatNumber(item.amount)}
|
|
||||||
</Td>
|
|
||||||
</Tr>
|
|
||||||
))}
|
|
||||||
</Tbody>
|
|
||||||
</Table>
|
|
||||||
</TableContainer>
|
|
||||||
</CardBody>
|
|
||||||
</ThemedCard>
|
|
||||||
</VStack>
|
|
||||||
</TabPanel>
|
</TabPanel>
|
||||||
|
|
||||||
{/* 融资融券 Tab */}
|
{/* 融资融券 Tab */}
|
||||||
<TabPanel px={0}>
|
<TabPanel px={0}>
|
||||||
<VStack spacing={6} align="stretch">
|
<FundingPanel theme={theme} fundingData={fundingData} />
|
||||||
<ThemedCard theme={theme}>
|
|
||||||
<CardBody>
|
|
||||||
{fundingData.length > 0 && (
|
|
||||||
<Box h="400px">
|
|
||||||
<ReactECharts
|
|
||||||
option={getFundingOption(theme, fundingData)}
|
|
||||||
style={{ height: '100%', width: '100%' }}
|
|
||||||
theme="light"
|
|
||||||
/>
|
|
||||||
</Box>
|
|
||||||
)}
|
|
||||||
</CardBody>
|
|
||||||
</ThemedCard>
|
|
||||||
|
|
||||||
<Grid templateColumns="repeat(2, 1fr)" gap={6}>
|
|
||||||
{/* 融资数据 */}
|
|
||||||
<ThemedCard theme={theme}>
|
|
||||||
<CardHeader>
|
|
||||||
<Heading size="md" color={theme.success}>
|
|
||||||
融资数据
|
|
||||||
</Heading>
|
|
||||||
</CardHeader>
|
|
||||||
<CardBody>
|
|
||||||
<VStack spacing={3} align="stretch">
|
|
||||||
{fundingData
|
|
||||||
.slice(-5)
|
|
||||||
.reverse()
|
|
||||||
.map((item, idx) => (
|
|
||||||
<Box
|
|
||||||
key={idx}
|
|
||||||
p={3}
|
|
||||||
bg="rgba(255, 68, 68, 0.05)"
|
|
||||||
borderRadius="md"
|
|
||||||
>
|
|
||||||
<HStack justify="space-between">
|
|
||||||
<Text color={theme.textMuted}>{item.date}</Text>
|
|
||||||
<VStack align="end" spacing={0}>
|
|
||||||
<Text color={theme.textPrimary} fontWeight="bold">
|
|
||||||
{formatNumber(item.financing.balance)}
|
|
||||||
</Text>
|
|
||||||
<Text fontSize="xs" color={theme.textMuted}>
|
|
||||||
买入{formatNumber(item.financing.buy)} / 偿还
|
|
||||||
{formatNumber(item.financing.repay)}
|
|
||||||
</Text>
|
|
||||||
</VStack>
|
|
||||||
</HStack>
|
|
||||||
</Box>
|
|
||||||
))}
|
|
||||||
</VStack>
|
|
||||||
</CardBody>
|
|
||||||
</ThemedCard>
|
|
||||||
|
|
||||||
{/* 融券数据 */}
|
|
||||||
<ThemedCard theme={theme}>
|
|
||||||
<CardHeader>
|
|
||||||
<Heading size="md" color={theme.danger}>
|
|
||||||
融券数据
|
|
||||||
</Heading>
|
|
||||||
</CardHeader>
|
|
||||||
<CardBody>
|
|
||||||
<VStack spacing={3} align="stretch">
|
|
||||||
{fundingData
|
|
||||||
.slice(-5)
|
|
||||||
.reverse()
|
|
||||||
.map((item, idx) => (
|
|
||||||
<Box
|
|
||||||
key={idx}
|
|
||||||
p={3}
|
|
||||||
bg="rgba(0, 200, 81, 0.05)"
|
|
||||||
borderRadius="md"
|
|
||||||
>
|
|
||||||
<HStack justify="space-between">
|
|
||||||
<Text color={theme.textMuted}>{item.date}</Text>
|
|
||||||
<VStack align="end" spacing={0}>
|
|
||||||
<Text color={theme.textPrimary} fontWeight="bold">
|
|
||||||
{formatNumber(item.securities.balance)}
|
|
||||||
</Text>
|
|
||||||
<Text fontSize="xs" color={theme.textMuted}>
|
|
||||||
卖出{formatNumber(item.securities.sell)} / 偿还
|
|
||||||
{formatNumber(item.securities.repay)}
|
|
||||||
</Text>
|
|
||||||
</VStack>
|
|
||||||
</HStack>
|
|
||||||
</Box>
|
|
||||||
))}
|
|
||||||
</VStack>
|
|
||||||
</CardBody>
|
|
||||||
</ThemedCard>
|
|
||||||
</Grid>
|
|
||||||
</VStack>
|
|
||||||
</TabPanel>
|
</TabPanel>
|
||||||
|
|
||||||
{/* 大宗交易 Tab */}
|
{/* 大宗交易 Tab */}
|
||||||
<TabPanel px={0}>
|
<TabPanel px={0}>
|
||||||
<ThemedCard theme={theme}>
|
<BigDealPanel theme={theme} bigDealData={bigDealData} />
|
||||||
<CardHeader>
|
|
||||||
<Heading size="md" color={theme.textSecondary}>
|
|
||||||
大宗交易记录
|
|
||||||
</Heading>
|
|
||||||
</CardHeader>
|
|
||||||
<CardBody>
|
|
||||||
{bigDealData?.daily_stats && bigDealData.daily_stats.length > 0 ? (
|
|
||||||
<VStack spacing={6} align="stretch">
|
|
||||||
{bigDealData.daily_stats.map((dayStats, idx) => (
|
|
||||||
<Box
|
|
||||||
key={idx}
|
|
||||||
p={4}
|
|
||||||
bg={theme.bgDark}
|
|
||||||
borderRadius="lg"
|
|
||||||
border="1px solid"
|
|
||||||
borderColor={theme.border}
|
|
||||||
>
|
|
||||||
<HStack justify="space-between" mb={4}>
|
|
||||||
<Text fontSize="lg" fontWeight="bold" color={theme.textSecondary}>
|
|
||||||
{dayStats.date}
|
|
||||||
</Text>
|
|
||||||
<HStack spacing={4}>
|
|
||||||
<Badge colorScheme="blue" fontSize="md">
|
|
||||||
交易笔数: {dayStats.count}
|
|
||||||
</Badge>
|
|
||||||
<Badge colorScheme="green" fontSize="md">
|
|
||||||
成交量: {formatNumber(dayStats.total_volume)}万股
|
|
||||||
</Badge>
|
|
||||||
<Badge colorScheme="orange" fontSize="md">
|
|
||||||
成交额: {formatNumber(dayStats.total_amount)}万元
|
|
||||||
</Badge>
|
|
||||||
<Badge colorScheme="purple" fontSize="md">
|
|
||||||
均价: {dayStats.avg_price?.toFixed(2) || '-'}元
|
|
||||||
</Badge>
|
|
||||||
</HStack>
|
|
||||||
</HStack>
|
|
||||||
|
|
||||||
{dayStats.deals && dayStats.deals.length > 0 && (
|
|
||||||
<TableContainer>
|
|
||||||
<Table variant="simple" size="sm">
|
|
||||||
<Thead>
|
|
||||||
<Tr>
|
|
||||||
<Th color={theme.textSecondary}>买方营业部</Th>
|
|
||||||
<Th color={theme.textSecondary}>卖方营业部</Th>
|
|
||||||
<Th isNumeric color={theme.textSecondary}>
|
|
||||||
成交价
|
|
||||||
</Th>
|
|
||||||
<Th isNumeric color={theme.textSecondary}>
|
|
||||||
成交量(万股)
|
|
||||||
</Th>
|
|
||||||
<Th isNumeric color={theme.textSecondary}>
|
|
||||||
成交额(万元)
|
|
||||||
</Th>
|
|
||||||
</Tr>
|
|
||||||
</Thead>
|
|
||||||
<Tbody>
|
|
||||||
{dayStats.deals.map((deal, i) => (
|
|
||||||
<Tr key={i} _hover={{ bg: 'rgba(43, 108, 176, 0.05)' }}>
|
|
||||||
<Td
|
|
||||||
color={theme.textPrimary}
|
|
||||||
fontSize="xs"
|
|
||||||
maxW="200px"
|
|
||||||
isTruncated
|
|
||||||
>
|
|
||||||
<Tooltip label={deal.buyer_dept || '-'} placement="top">
|
|
||||||
<Text>{deal.buyer_dept || '-'}</Text>
|
|
||||||
</Tooltip>
|
|
||||||
</Td>
|
|
||||||
<Td
|
|
||||||
color={theme.textPrimary}
|
|
||||||
fontSize="xs"
|
|
||||||
maxW="200px"
|
|
||||||
isTruncated
|
|
||||||
>
|
|
||||||
<Tooltip
|
|
||||||
label={deal.seller_dept || '-'}
|
|
||||||
placement="top"
|
|
||||||
>
|
|
||||||
<Text>{deal.seller_dept || '-'}</Text>
|
|
||||||
</Tooltip>
|
|
||||||
</Td>
|
|
||||||
<Td isNumeric color={theme.textPrimary} fontWeight="bold">
|
|
||||||
{deal.price?.toFixed(2) || '-'}
|
|
||||||
</Td>
|
|
||||||
<Td isNumeric color={theme.textPrimary}>
|
|
||||||
{deal.volume?.toFixed(2) || '-'}
|
|
||||||
</Td>
|
|
||||||
<Td
|
|
||||||
isNumeric
|
|
||||||
color={theme.textSecondary}
|
|
||||||
fontWeight="bold"
|
|
||||||
>
|
|
||||||
{deal.amount?.toFixed(2) || '-'}
|
|
||||||
</Td>
|
|
||||||
</Tr>
|
|
||||||
))}
|
|
||||||
</Tbody>
|
|
||||||
</Table>
|
|
||||||
</TableContainer>
|
|
||||||
)}
|
|
||||||
</Box>
|
|
||||||
))}
|
|
||||||
</VStack>
|
|
||||||
) : (
|
|
||||||
<Center h="200px">
|
|
||||||
<Text color={theme.textMuted}>暂无大宗交易数据</Text>
|
|
||||||
</Center>
|
|
||||||
)}
|
|
||||||
</CardBody>
|
|
||||||
</ThemedCard>
|
|
||||||
</TabPanel>
|
</TabPanel>
|
||||||
|
|
||||||
{/* 龙虎榜 Tab */}
|
{/* 龙虎榜 Tab */}
|
||||||
<TabPanel px={0}>
|
<TabPanel px={0}>
|
||||||
<ThemedCard theme={theme}>
|
<UnusualPanel theme={theme} unusualData={unusualData} />
|
||||||
<CardHeader>
|
|
||||||
<Heading size="md" color={theme.textSecondary}>
|
|
||||||
龙虎榜数据
|
|
||||||
</Heading>
|
|
||||||
</CardHeader>
|
|
||||||
<CardBody>
|
|
||||||
{unusualData?.grouped_data && unusualData.grouped_data.length > 0 ? (
|
|
||||||
<VStack spacing={6} align="stretch">
|
|
||||||
{unusualData.grouped_data.map((dayData, idx) => (
|
|
||||||
<Box
|
|
||||||
key={idx}
|
|
||||||
p={4}
|
|
||||||
bg={theme.bgDark}
|
|
||||||
borderRadius="lg"
|
|
||||||
border="1px solid"
|
|
||||||
borderColor={theme.border}
|
|
||||||
>
|
|
||||||
<HStack justify="space-between" mb={4}>
|
|
||||||
<Text fontSize="lg" fontWeight="bold" color={theme.textSecondary}>
|
|
||||||
{dayData.date}
|
|
||||||
</Text>
|
|
||||||
<HStack spacing={4}>
|
|
||||||
<Badge colorScheme="red" fontSize="md">
|
|
||||||
买入: {formatNumber(dayData.total_buy)}
|
|
||||||
</Badge>
|
|
||||||
<Badge colorScheme="green" fontSize="md">
|
|
||||||
卖出: {formatNumber(dayData.total_sell)}
|
|
||||||
</Badge>
|
|
||||||
<Badge
|
|
||||||
colorScheme={dayData.net_amount > 0 ? 'red' : 'green'}
|
|
||||||
fontSize="md"
|
|
||||||
>
|
|
||||||
净额: {formatNumber(dayData.net_amount)}
|
|
||||||
</Badge>
|
|
||||||
</HStack>
|
|
||||||
</HStack>
|
|
||||||
|
|
||||||
<Grid templateColumns="repeat(2, 1fr)" gap={4}>
|
|
||||||
<Box>
|
|
||||||
<Text fontWeight="bold" color={theme.success} mb={2}>
|
|
||||||
买入前五
|
|
||||||
</Text>
|
|
||||||
<VStack spacing={1} align="stretch">
|
|
||||||
{dayData.buyers && dayData.buyers.length > 0 ? (
|
|
||||||
dayData.buyers.slice(0, 5).map((buyer, i) => (
|
|
||||||
<HStack
|
|
||||||
key={i}
|
|
||||||
justify="space-between"
|
|
||||||
p={2}
|
|
||||||
bg="rgba(255, 68, 68, 0.05)"
|
|
||||||
borderRadius="md"
|
|
||||||
>
|
|
||||||
<Text
|
|
||||||
fontSize="sm"
|
|
||||||
color={theme.textPrimary}
|
|
||||||
isTruncated
|
|
||||||
maxW="70%"
|
|
||||||
>
|
|
||||||
{buyer.dept_name}
|
|
||||||
</Text>
|
|
||||||
<Text
|
|
||||||
fontSize="sm"
|
|
||||||
color={theme.success}
|
|
||||||
fontWeight="bold"
|
|
||||||
>
|
|
||||||
{formatNumber(buyer.buy_amount)}
|
|
||||||
</Text>
|
|
||||||
</HStack>
|
|
||||||
))
|
|
||||||
) : (
|
|
||||||
<Text fontSize="sm" color={theme.textMuted}>
|
|
||||||
暂无数据
|
|
||||||
</Text>
|
|
||||||
)}
|
|
||||||
</VStack>
|
|
||||||
</Box>
|
|
||||||
|
|
||||||
<Box>
|
|
||||||
<Text fontWeight="bold" color={theme.danger} mb={2}>
|
|
||||||
卖出前五
|
|
||||||
</Text>
|
|
||||||
<VStack spacing={1} align="stretch">
|
|
||||||
{dayData.sellers && dayData.sellers.length > 0 ? (
|
|
||||||
dayData.sellers.slice(0, 5).map((seller, i) => (
|
|
||||||
<HStack
|
|
||||||
key={i}
|
|
||||||
justify="space-between"
|
|
||||||
p={2}
|
|
||||||
bg="rgba(0, 200, 81, 0.05)"
|
|
||||||
borderRadius="md"
|
|
||||||
>
|
|
||||||
<Text
|
|
||||||
fontSize="sm"
|
|
||||||
color={theme.textPrimary}
|
|
||||||
isTruncated
|
|
||||||
maxW="70%"
|
|
||||||
>
|
|
||||||
{seller.dept_name}
|
|
||||||
</Text>
|
|
||||||
<Text
|
|
||||||
fontSize="sm"
|
|
||||||
color={theme.danger}
|
|
||||||
fontWeight="bold"
|
|
||||||
>
|
|
||||||
{formatNumber(seller.sell_amount)}
|
|
||||||
</Text>
|
|
||||||
</HStack>
|
|
||||||
))
|
|
||||||
) : (
|
|
||||||
<Text fontSize="sm" color={theme.textMuted}>
|
|
||||||
暂无数据
|
|
||||||
</Text>
|
|
||||||
)}
|
|
||||||
</VStack>
|
|
||||||
</Box>
|
|
||||||
</Grid>
|
|
||||||
|
|
||||||
{/* 信息类型标签 */}
|
|
||||||
<HStack mt={3} spacing={2}>
|
|
||||||
<Text fontSize="sm" color={theme.textMuted}>
|
|
||||||
类型:
|
|
||||||
</Text>
|
|
||||||
{dayData.info_types?.map((type, i) => (
|
|
||||||
<Badge key={i} colorScheme="blue" fontSize="xs">
|
|
||||||
{type}
|
|
||||||
</Badge>
|
|
||||||
))}
|
|
||||||
</HStack>
|
|
||||||
</Box>
|
|
||||||
))}
|
|
||||||
</VStack>
|
|
||||||
) : (
|
|
||||||
<Center h="200px">
|
|
||||||
<Text color={theme.textMuted}>暂无龙虎榜数据</Text>
|
|
||||||
</Center>
|
|
||||||
)}
|
|
||||||
</CardBody>
|
|
||||||
</ThemedCard>
|
|
||||||
</TabPanel>
|
</TabPanel>
|
||||||
|
|
||||||
{/* 股权质押 Tab */}
|
{/* 股权质押 Tab */}
|
||||||
<TabPanel px={0}>
|
<TabPanel px={0}>
|
||||||
<VStack spacing={6} align="stretch">
|
<PledgePanel theme={theme} pledgeData={pledgeData} />
|
||||||
<ThemedCard theme={theme}>
|
|
||||||
<CardBody>
|
|
||||||
{pledgeData.length > 0 && (
|
|
||||||
<Box h="400px">
|
|
||||||
<ReactECharts
|
|
||||||
option={getPledgeOption(theme, pledgeData)}
|
|
||||||
style={{ height: '100%', width: '100%' }}
|
|
||||||
theme="light"
|
|
||||||
/>
|
|
||||||
</Box>
|
|
||||||
)}
|
|
||||||
</CardBody>
|
|
||||||
</ThemedCard>
|
|
||||||
|
|
||||||
<ThemedCard theme={theme}>
|
|
||||||
<CardHeader>
|
|
||||||
<Heading size="md" color={theme.textSecondary}>
|
|
||||||
质押明细
|
|
||||||
</Heading>
|
|
||||||
</CardHeader>
|
|
||||||
<CardBody>
|
|
||||||
<TableContainer>
|
|
||||||
<Table variant="simple" size="sm">
|
|
||||||
<Thead>
|
|
||||||
<Tr>
|
|
||||||
<Th color={theme.textSecondary}>日期</Th>
|
|
||||||
<Th isNumeric color={theme.textSecondary}>
|
|
||||||
无限售质押(万股)
|
|
||||||
</Th>
|
|
||||||
<Th isNumeric color={theme.textSecondary}>
|
|
||||||
限售质押(万股)
|
|
||||||
</Th>
|
|
||||||
<Th isNumeric color={theme.textSecondary}>
|
|
||||||
质押总量(万股)
|
|
||||||
</Th>
|
|
||||||
<Th isNumeric color={theme.textSecondary}>
|
|
||||||
总股本(万股)
|
|
||||||
</Th>
|
|
||||||
<Th isNumeric color={theme.textSecondary}>
|
|
||||||
质押比例
|
|
||||||
</Th>
|
|
||||||
<Th isNumeric color={theme.textSecondary}>
|
|
||||||
质押笔数
|
|
||||||
</Th>
|
|
||||||
</Tr>
|
|
||||||
</Thead>
|
|
||||||
<Tbody>
|
|
||||||
{pledgeData.length > 0 ? (
|
|
||||||
pledgeData.map((item, idx) => (
|
|
||||||
<Tr key={idx} _hover={{ bg: theme.bgDark }}>
|
|
||||||
<Td color={theme.textPrimary}>{item.end_date}</Td>
|
|
||||||
<Td isNumeric color={theme.textPrimary}>
|
|
||||||
{formatNumber(item.unrestricted_pledge, 0)}
|
|
||||||
</Td>
|
|
||||||
<Td isNumeric color={theme.textPrimary}>
|
|
||||||
{formatNumber(item.restricted_pledge, 0)}
|
|
||||||
</Td>
|
|
||||||
<Td isNumeric color={theme.textPrimary} fontWeight="bold">
|
|
||||||
{formatNumber(item.total_pledge, 0)}
|
|
||||||
</Td>
|
|
||||||
<Td isNumeric color={theme.textPrimary}>
|
|
||||||
{formatNumber(item.total_shares, 0)}
|
|
||||||
</Td>
|
|
||||||
<Td isNumeric color={theme.warning} fontWeight="bold">
|
|
||||||
{formatPercent(item.pledge_ratio)}
|
|
||||||
</Td>
|
|
||||||
<Td isNumeric color={theme.textPrimary}>
|
|
||||||
{item.pledge_count}
|
|
||||||
</Td>
|
|
||||||
</Tr>
|
|
||||||
))
|
|
||||||
) : (
|
|
||||||
<Tr>
|
|
||||||
<Td colSpan={7} textAlign="center" py={8}>
|
|
||||||
<Text fontSize="sm" color={theme.textMuted}>
|
|
||||||
暂无数据
|
|
||||||
</Text>
|
|
||||||
</Td>
|
|
||||||
</Tr>
|
|
||||||
)}
|
|
||||||
</Tbody>
|
|
||||||
</Table>
|
|
||||||
</TableContainer>
|
|
||||||
</CardBody>
|
|
||||||
</ThemedCard>
|
|
||||||
</VStack>
|
|
||||||
</TabPanel>
|
</TabPanel>
|
||||||
</TabPanels>
|
</TabPanels>
|
||||||
</Tabs>
|
</Tabs>
|
||||||
|
|||||||
Reference in New Issue
Block a user