diff --git a/src/views/Dashboard/components/InvestmentCalendarChakra.js b/src/views/Dashboard/components/InvestmentCalendarChakra.js index 1e0930a3..653433a8 100644 --- a/src/views/Dashboard/components/InvestmentCalendarChakra.js +++ b/src/views/Dashboard/components/InvestmentCalendarChakra.js @@ -56,6 +56,8 @@ import dayjs from 'dayjs'; import 'dayjs/locale/zh-cn'; import { logger } from '../../../utils/logger'; import { getApiBase } from '../../../utils/apiConfig'; +import TimelineChartModal from '../../../components/StockChart/TimelineChartModal'; +import KLineChartModal from '../../../components/StockChart/KLineChartModal'; import './InvestmentCalendar.css'; dayjs.locale('zh-cn'); @@ -63,6 +65,8 @@ dayjs.locale('zh-cn'); export default function InvestmentCalendarChakra() { const { isOpen, onOpen, onClose } = useDisclosure(); const { isOpen: isAddOpen, onOpen: onAddOpen, onClose: onAddClose } = useDisclosure(); + const { isOpen: isTimelineModalOpen, onOpen: onTimelineModalOpen, onClose: onTimelineModalClose } = useDisclosure(); + const { isOpen: isKLineModalOpen, onOpen: onKLineModalOpen, onClose: onKLineModalClose } = useDisclosure(); const toast = useToast(); // 颜色主题 @@ -74,6 +78,7 @@ export default function InvestmentCalendarChakra() { const [events, setEvents] = useState([]); const [selectedDate, setSelectedDate] = useState(null); const [selectedDateEvents, setSelectedDateEvents] = useState([]); + const [selectedStock, setSelectedStock] = useState(null); const [loading, setLoading] = useState(false); const [newEvent, setNewEvent] = useState({ title: '', @@ -262,6 +267,35 @@ export default function InvestmentCalendarChakra() { } }; + // 处理股票点击 - 打开图表弹窗 + const handleStockClick = (stockCodeOrName, eventDate) => { + // 解析股票代码(可能是 "600000" 或 "600000 平安银行" 格式) + let stockCode = stockCodeOrName; + let stockName = ''; + + if (typeof stockCodeOrName === 'string') { + const parts = stockCodeOrName.trim().split(/\s+/); + stockCode = parts[0]; + stockName = parts.slice(1).join(' '); + } + + // 添加交易所后缀(如果没有) + if (!stockCode.includes('.')) { + if (stockCode.startsWith('6')) { + stockCode = `${stockCode}.SH`; + } else if (stockCode.startsWith('0') || stockCode.startsWith('3')) { + stockCode = `${stockCode}.SZ`; + } else if (stockCode.startsWith('688')) { + stockCode = `${stockCode}.SH`; + } + } + + setSelectedStock({ + stock_code: stockCode, + stock_name: stockName || stockCode, + }); + }; + return ( @@ -386,15 +420,47 @@ export default function InvestmentCalendarChakra() { )} {event.extendedProps?.stocks && event.extendedProps.stocks.length > 0 && ( - - 相关股票: - {event.extendedProps.stocks.map((stock, i) => ( - - - {stock} - - ))} - + + + 相关股票: + {event.extendedProps.stocks.map((stock, i) => ( + handleStockClick(stock, event.start)} + _hover={{ transform: 'scale(1.05)', shadow: 'md' }} + transition="all 0.2s" + > + + {stock} + + ))} + + {selectedStock && ( + + + + + )} + )} ))} @@ -489,6 +555,32 @@ export default function InvestmentCalendarChakra() { )} + + {/* 分时图弹窗 */} + {selectedStock && ( + { + onTimelineModalClose(); + setSelectedStock(null); + }} + stock={selectedStock} + eventTime={selectedDate?.toISOString()} + /> + )} + + {/* K线图弹窗 */} + {selectedStock && ( + { + onKLineModalClose(); + setSelectedStock(null); + }} + stock={selectedStock} + eventTime={selectedDate?.toISOString()} + /> + )} ); }