diff --git a/src/views/Company/components/MarketDataView/components/panels/index.ts b/src/views/Company/components/MarketDataView/components/panels/index.ts new file mode 100644 index 00000000..4b6510d5 --- /dev/null +++ b/src/views/Company/components/MarketDataView/components/panels/index.ts @@ -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'; diff --git a/src/views/Company/components/MarketDataView/index.tsx b/src/views/Company/components/MarketDataView/index.tsx index a422031a..f10c7b8c 100644 --- a/src/views/Company/components/MarketDataView/index.tsx +++ b/src/views/Company/components/MarketDataView/index.tsx @@ -11,69 +11,41 @@ import { Tab, TabPanel, Text, - Table, - Thead, - Tbody, - Tr, - Th, - Td, - TableContainer, - Stat, - StatLabel, - StatNumber, - StatHelpText, - StatArrow, - SimpleGrid, CardBody, - CardHeader, Spinner, Center, - Badge, VStack, HStack, Select, Button, - Tooltip, - Grid, - GridItem, Icon, - Heading, - Tag, useDisclosure, } from '@chakra-ui/react'; import { - ChevronDownIcon, ChevronUpIcon, - InfoIcon, RepeatIcon, - TimeIcon, ArrowUpIcon, - ArrowDownIcon, StarIcon, LockIcon, UnlockIcon, } from '@chakra-ui/icons'; -import ReactECharts from 'echarts-for-react'; // 内部模块导入 import { themes, DEFAULT_PERIOD, PERIOD_OPTIONS } from './constants'; import { useMarketData } from './hooks/useMarketData'; -import { - formatNumber, - formatPercent, -} from './utils/formatUtils'; -import { - getKLineOption, - getMinuteKLineOption, - getFundingOption, - getPledgeOption, -} from './utils/chartOptions'; import { ThemedCard, StockSummaryCard, AnalysisModal, AnalysisContent, } from './components'; +import { + TradeDataPanel, + FundingPanel, + BigDealPanel, + UnusualPanel, + PledgePanel, +} from './components/panels'; import type { MarketDataViewProps, RiseAnalysis } from './types'; /** @@ -268,771 +240,35 @@ const MarketDataView: React.FC = ({ stockCode: propStockCod {/* 交易数据 Tab */} - - {/* K线图 */} - - - {tradeData.length > 0 && ( - - - - )} - - - - {/* 分钟K线数据 */} - - - - - - - 当日分钟频数据 - - {minuteData && minuteData.trade_date && ( - - {minuteData.trade_date} - - )} - - - - - - {minuteLoading ? ( -
- - - - 加载分钟频数据中... - - -
- ) : minuteData && minuteData.data && minuteData.data.length > 0 ? ( - - - - - - {/* 分钟数据统计 */} - - - - - - 开盘价 - - - - {minuteData.data[0]?.open?.toFixed(2) || '-'} - - - - - - - 当前价 - - - = - (minuteData.data[0]?.open || 0) - ? theme.success - : theme.danger - } - fontSize="lg" - > - {minuteData.data[minuteData.data.length - 1]?.close?.toFixed(2) || - '-'} - - - = - (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'; - })()} - % - - - - - - - 最高价 - - - - {Math.max( - ...minuteData.data.map((item) => item.high).filter(Boolean) - ).toFixed(2)} - - - - - - - 最低价 - - - - {Math.min( - ...minuteData.data.map((item) => item.low).filter(Boolean) - ).toFixed(2)} - - - - - {/* 成交数据分析 */} - - - - 成交数据分析 - - - - 总成交量:{' '} - {formatNumber( - minuteData.data.reduce((sum, item) => sum + item.volume, 0), - 0 - )} - - - 总成交额:{' '} - {formatNumber( - minuteData.data.reduce((sum, item) => sum + item.amount, 0) - )} - - - - - - - - 活跃时段 - - - {(() => { - 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)})` - : '-'; - })()} - - - - - 平均价格 - - - {( - minuteData.data.reduce((sum, item) => sum + item.close, 0) / - minuteData.data.length - ).toFixed(2)} - - - - - 数据点数 - - - {minuteData.data.length} 个分钟 - - - - - - ) : ( -
- - - - - 暂无分钟频数据 - - - 点击"获取分钟数据"按钮加载最新的交易日分钟频数据 - - - -
- )} - - - - {/* 交易明细表格 */} - - - - 交易明细 - - - - - - - - - - - - - - - - - - - {tradeData - .slice(-10) - .reverse() - .map((item, idx) => ( - - - - - - - - - - - ))} - -
日期 - 开盘 - - 最高 - - 最低 - - 收盘 - - 涨跌幅 - - 成交量 - - 成交额 -
{item.date} - {item.open} - - {item.high} - - {item.low} - - {item.close} - = 0 ? theme.success : theme.danger - } - fontWeight="bold" - > - {item.change_percent >= 0 ? '+' : ''} - {formatPercent(item.change_percent)} - - {formatNumber(item.volume, 0)} - - {formatNumber(item.amount)} -
- - - - + {/* 融资融券 Tab */} - - - - {fundingData.length > 0 && ( - - - - )} - - - - - {/* 融资数据 */} - - - - 融资数据 - - - - - {fundingData - .slice(-5) - .reverse() - .map((item, idx) => ( - - - {item.date} - - - {formatNumber(item.financing.balance)} - - - 买入{formatNumber(item.financing.buy)} / 偿还 - {formatNumber(item.financing.repay)} - - - - - ))} - - - - - {/* 融券数据 */} - - - - 融券数据 - - - - - {fundingData - .slice(-5) - .reverse() - .map((item, idx) => ( - - - {item.date} - - - {formatNumber(item.securities.balance)} - - - 卖出{formatNumber(item.securities.sell)} / 偿还 - {formatNumber(item.securities.repay)} - - - - - ))} - - - - - + {/* 大宗交易 Tab */} - - - - 大宗交易记录 - - - - {bigDealData?.daily_stats && bigDealData.daily_stats.length > 0 ? ( - - {bigDealData.daily_stats.map((dayStats, idx) => ( - - - - {dayStats.date} - - - - 交易笔数: {dayStats.count} - - - 成交量: {formatNumber(dayStats.total_volume)}万股 - - - 成交额: {formatNumber(dayStats.total_amount)}万元 - - - 均价: {dayStats.avg_price?.toFixed(2) || '-'}元 - - - - - {dayStats.deals && dayStats.deals.length > 0 && ( - - - - - - - - - - - - - {dayStats.deals.map((deal, i) => ( - - - - - - - - ))} - -
买方营业部卖方营业部 - 成交价 - - 成交量(万股) - - 成交额(万元) -
- - {deal.buyer_dept || '-'} - - - - {deal.seller_dept || '-'} - - - {deal.price?.toFixed(2) || '-'} - - {deal.volume?.toFixed(2) || '-'} - - {deal.amount?.toFixed(2) || '-'} -
- - )} - - ))} - - ) : ( -
- 暂无大宗交易数据 -
- )} - - + {/* 龙虎榜 Tab */} - - - - 龙虎榜数据 - - - - {unusualData?.grouped_data && unusualData.grouped_data.length > 0 ? ( - - {unusualData.grouped_data.map((dayData, idx) => ( - - - - {dayData.date} - - - - 买入: {formatNumber(dayData.total_buy)} - - - 卖出: {formatNumber(dayData.total_sell)} - - 0 ? 'red' : 'green'} - fontSize="md" - > - 净额: {formatNumber(dayData.net_amount)} - - - - - - - - 买入前五 - - - {dayData.buyers && dayData.buyers.length > 0 ? ( - dayData.buyers.slice(0, 5).map((buyer, i) => ( - - - {buyer.dept_name} - - - {formatNumber(buyer.buy_amount)} - - - )) - ) : ( - - 暂无数据 - - )} - - - - - - 卖出前五 - - - {dayData.sellers && dayData.sellers.length > 0 ? ( - dayData.sellers.slice(0, 5).map((seller, i) => ( - - - {seller.dept_name} - - - {formatNumber(seller.sell_amount)} - - - )) - ) : ( - - 暂无数据 - - )} - - - - - {/* 信息类型标签 */} - - - 类型: - - {dayData.info_types?.map((type, i) => ( - - {type} - - ))} - - - ))} - - ) : ( -
- 暂无龙虎榜数据 -
- )} - - + {/* 股权质押 Tab */} - - - - {pledgeData.length > 0 && ( - - - - )} - - - - - - - 质押明细 - - - - - - - - - - - - - - - - - - {pledgeData.length > 0 ? ( - pledgeData.map((item, idx) => ( - - - - - - - - - - )) - ) : ( - - - - )} - -
日期 - 无限售质押(万股) - - 限售质押(万股) - - 质押总量(万股) - - 总股本(万股) - - 质押比例 - - 质押笔数 -
{item.end_date} - {formatNumber(item.unrestricted_pledge, 0)} - - {formatNumber(item.restricted_pledge, 0)} - - {formatNumber(item.total_pledge, 0)} - - {formatNumber(item.total_shares, 0)} - - {formatPercent(item.pledge_ratio)} - - {item.pledge_count} -
- - 暂无数据 - -
- - - - +