feat(MarketDataView): 新增 5 个 Panel 组件
- TradeDataPanel: 交易数据面板（K线图、分钟图、表格） - FundingPanel: 融资融券面板 - BigDealPanel: 大宗交易面板 - UnusualPanel: 龙虎榜面板 - PledgePanel: 股权质押面板 🤖 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,143 @@
|
|||||||
|
// src/views/Company/components/MarketDataView/components/panels/BigDealPanel.tsx
|
||||||
|
// 大宗交易面板 - 大宗交易记录表格
|
||||||
|
|
||||||
|
import React from 'react';
|
||||||
|
import {
|
||||||
|
Box,
|
||||||
|
Text,
|
||||||
|
Table,
|
||||||
|
Thead,
|
||||||
|
Tbody,
|
||||||
|
Tr,
|
||||||
|
Th,
|
||||||
|
Td,
|
||||||
|
TableContainer,
|
||||||
|
CardBody,
|
||||||
|
CardHeader,
|
||||||
|
Center,
|
||||||
|
Badge,
|
||||||
|
VStack,
|
||||||
|
HStack,
|
||||||
|
Tooltip,
|
||||||
|
Heading,
|
||||||
|
} from '@chakra-ui/react';
|
||||||
|
|
||||||
|
import ThemedCard from '../ThemedCard';
|
||||||
|
import { formatNumber } from '../../utils/formatUtils';
|
||||||
|
import type { Theme, BigDealData } from '../../types';
|
||||||
|
|
||||||
|
export interface BigDealPanelProps {
|
||||||
|
theme: Theme;
|
||||||
|
bigDealData: BigDealData;
|
||||||
|
}
|
||||||
|
|
||||||
|
const BigDealPanel: React.FC<BigDealPanelProps> = ({ theme, bigDealData }) => {
|
||||||
|
return (
|
||||||
|
<ThemedCard theme={theme}>
|
||||||
|
<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>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default BigDealPanel;
|
||||||
@@ -0,0 +1,113 @@
|
|||||||
|
// src/views/Company/components/MarketDataView/components/panels/FundingPanel.tsx
|
||||||
|
// 融资融券面板 - 融资融券数据图表和卡片
|
||||||
|
|
||||||
|
import React from 'react';
|
||||||
|
import {
|
||||||
|
Box,
|
||||||
|
Text,
|
||||||
|
CardBody,
|
||||||
|
CardHeader,
|
||||||
|
VStack,
|
||||||
|
HStack,
|
||||||
|
Grid,
|
||||||
|
Heading,
|
||||||
|
} from '@chakra-ui/react';
|
||||||
|
import ReactECharts from 'echarts-for-react';
|
||||||
|
|
||||||
|
import ThemedCard from '../ThemedCard';
|
||||||
|
import { formatNumber } from '../../utils/formatUtils';
|
||||||
|
import { getFundingOption } from '../../utils/chartOptions';
|
||||||
|
import type { Theme, FundingDayData } from '../../types';
|
||||||
|
|
||||||
|
export interface FundingPanelProps {
|
||||||
|
theme: Theme;
|
||||||
|
fundingData: FundingDayData[];
|
||||||
|
}
|
||||||
|
|
||||||
|
const FundingPanel: React.FC<FundingPanelProps> = ({ theme, fundingData }) => {
|
||||||
|
return (
|
||||||
|
<VStack spacing={6} align="stretch">
|
||||||
|
<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>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default FundingPanel;
|
||||||
@@ -0,0 +1,124 @@
|
|||||||
|
// src/views/Company/components/MarketDataView/components/panels/PledgePanel.tsx
|
||||||
|
// 股权质押面板 - 质押图表和表格
|
||||||
|
|
||||||
|
import React from 'react';
|
||||||
|
import {
|
||||||
|
Box,
|
||||||
|
Text,
|
||||||
|
Table,
|
||||||
|
Thead,
|
||||||
|
Tbody,
|
||||||
|
Tr,
|
||||||
|
Th,
|
||||||
|
Td,
|
||||||
|
TableContainer,
|
||||||
|
CardBody,
|
||||||
|
CardHeader,
|
||||||
|
VStack,
|
||||||
|
Heading,
|
||||||
|
} from '@chakra-ui/react';
|
||||||
|
import ReactECharts from 'echarts-for-react';
|
||||||
|
|
||||||
|
import ThemedCard from '../ThemedCard';
|
||||||
|
import { formatNumber, formatPercent } from '../../utils/formatUtils';
|
||||||
|
import { getPledgeOption } from '../../utils/chartOptions';
|
||||||
|
import type { Theme, PledgeData } from '../../types';
|
||||||
|
|
||||||
|
export interface PledgePanelProps {
|
||||||
|
theme: Theme;
|
||||||
|
pledgeData: PledgeData[];
|
||||||
|
}
|
||||||
|
|
||||||
|
const PledgePanel: React.FC<PledgePanelProps> = ({ theme, pledgeData }) => {
|
||||||
|
return (
|
||||||
|
<VStack spacing={6} align="stretch">
|
||||||
|
<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>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default PledgePanel;
|
||||||
@@ -0,0 +1,381 @@
|
|||||||
|
// src/views/Company/components/MarketDataView/components/panels/TradeDataPanel.tsx
|
||||||
|
// 交易数据面板 - K线图、分钟图、交易明细表格
|
||||||
|
|
||||||
|
import React from 'react';
|
||||||
|
import {
|
||||||
|
Box,
|
||||||
|
Text,
|
||||||
|
Table,
|
||||||
|
Thead,
|
||||||
|
Tbody,
|
||||||
|
Tr,
|
||||||
|
Th,
|
||||||
|
Td,
|
||||||
|
TableContainer,
|
||||||
|
Stat,
|
||||||
|
StatLabel,
|
||||||
|
StatNumber,
|
||||||
|
StatHelpText,
|
||||||
|
StatArrow,
|
||||||
|
SimpleGrid,
|
||||||
|
CardBody,
|
||||||
|
CardHeader,
|
||||||
|
Spinner,
|
||||||
|
Center,
|
||||||
|
Badge,
|
||||||
|
VStack,
|
||||||
|
HStack,
|
||||||
|
Button,
|
||||||
|
Grid,
|
||||||
|
Icon,
|
||||||
|
Heading,
|
||||||
|
} from '@chakra-ui/react';
|
||||||
|
import {
|
||||||
|
ChevronDownIcon,
|
||||||
|
ChevronUpIcon,
|
||||||
|
InfoIcon,
|
||||||
|
RepeatIcon,
|
||||||
|
TimeIcon,
|
||||||
|
ArrowUpIcon,
|
||||||
|
ArrowDownIcon,
|
||||||
|
} from '@chakra-ui/icons';
|
||||||
|
import ReactECharts from 'echarts-for-react';
|
||||||
|
|
||||||
|
import ThemedCard from '../ThemedCard';
|
||||||
|
import { formatNumber, formatPercent } from '../../utils/formatUtils';
|
||||||
|
import { getKLineOption, getMinuteKLineOption } from '../../utils/chartOptions';
|
||||||
|
import type { Theme, TradeDayData, MinuteData, RiseAnalysis } from '../../types';
|
||||||
|
|
||||||
|
export interface TradeDataPanelProps {
|
||||||
|
theme: Theme;
|
||||||
|
tradeData: TradeDayData[];
|
||||||
|
minuteData: MinuteData | null;
|
||||||
|
minuteLoading: boolean;
|
||||||
|
analysisMap: Record<number, RiseAnalysis>;
|
||||||
|
onLoadMinuteData: () => void;
|
||||||
|
onChartClick: (params: { seriesName?: string; data?: [number, number] }) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
const TradeDataPanel: React.FC<TradeDataPanelProps> = ({
|
||||||
|
theme,
|
||||||
|
tradeData,
|
||||||
|
minuteData,
|
||||||
|
minuteLoading,
|
||||||
|
analysisMap,
|
||||||
|
onLoadMinuteData,
|
||||||
|
onChartClick,
|
||||||
|
}) => {
|
||||||
|
return (
|
||||||
|
<VStack spacing={6} align="stretch">
|
||||||
|
{/* K线图 */}
|
||||||
|
<ThemedCard theme={theme}>
|
||||||
|
<CardBody>
|
||||||
|
{tradeData.length > 0 && (
|
||||||
|
<Box h="600px">
|
||||||
|
<ReactECharts
|
||||||
|
option={getKLineOption(theme, tradeData, analysisMap)}
|
||||||
|
style={{ height: '100%', width: '100%' }}
|
||||||
|
theme="light"
|
||||||
|
onEvents={{ click: onChartClick }}
|
||||||
|
/>
|
||||||
|
</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={onLoadMinuteData}
|
||||||
|
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>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default TradeDataPanel;
|
||||||
@@ -0,0 +1,163 @@
|
|||||||
|
// src/views/Company/components/MarketDataView/components/panels/UnusualPanel.tsx
|
||||||
|
// 龙虎榜面板 - 龙虎榜数据展示
|
||||||
|
|
||||||
|
import React from 'react';
|
||||||
|
import {
|
||||||
|
Box,
|
||||||
|
Text,
|
||||||
|
CardBody,
|
||||||
|
CardHeader,
|
||||||
|
Center,
|
||||||
|
Badge,
|
||||||
|
VStack,
|
||||||
|
HStack,
|
||||||
|
Grid,
|
||||||
|
Heading,
|
||||||
|
} from '@chakra-ui/react';
|
||||||
|
|
||||||
|
import ThemedCard from '../ThemedCard';
|
||||||
|
import { formatNumber } from '../../utils/formatUtils';
|
||||||
|
import type { Theme, UnusualData } from '../../types';
|
||||||
|
|
||||||
|
export interface UnusualPanelProps {
|
||||||
|
theme: Theme;
|
||||||
|
unusualData: UnusualData;
|
||||||
|
}
|
||||||
|
|
||||||
|
const UnusualPanel: React.FC<UnusualPanelProps> = ({ theme, unusualData }) => {
|
||||||
|
return (
|
||||||
|
<ThemedCard theme={theme}>
|
||||||
|
<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>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default UnusualPanel;
|
||||||
Reference in New Issue
Block a user