community增加事件详情

app.py

@@ -11139,20 +11139,53 @@ def get_events_effectiveness_stats():
 
         # 计算汇总统计
         total_events = len(events_query)
+        event_ids = [e.id for e in events_query]
         avg_chg_list = [e.related_avg_chg for e in events_query if e.related_avg_chg is not None]
         max_chg_list = [e.related_max_chg for e in events_query if e.related_max_chg is not None]
-        invest_scores = [e.invest_score for e in events_query if e.invest_score is not None]
-        surprise_scores = [e.expectation_surprise_score for e in events_query if e.expectation_surprise_score is not None]
 
         positive_count = sum(1 for chg in avg_chg_list if chg > 0)
 
+        # 查询关联股票数据
+        stock_stats = []
+        total_stocks = 0
+        if event_ids:
+            # 查询所有关联股票
+            related_stocks = db.session.query(EventStock).filter(
+                EventStock.event_id.in_(event_ids)
+            ).all()
+
+            # 统计股票数量（去重）
+            unique_stocks = {}
+            for rs in related_stocks:
+                stock_key = rs.stock_code
+                if stock_key not in unique_stocks:
+                    unique_stocks[stock_key] = {
+                        'stockCode': rs.stock_code,
+                        'stockName': rs.stock_name,
+                        'maxChg': rs.chg_pct or 0,
+                        'eventId': rs.event_id,
+                    }
+                else:
+                    # 保留最大涨幅的记录
+                    if (rs.chg_pct or 0) > unique_stocks[stock_key]['maxChg']:
+                        unique_stocks[stock_key]['maxChg'] = rs.chg_pct or 0
+                        unique_stocks[stock_key]['eventId'] = rs.event_id
+
+            total_stocks = len(unique_stocks)
+
+            # 按涨幅排序，取 TOP10
+            stock_stats = sorted(
+                unique_stocks.values(),
+                key=lambda x: x['maxChg'],
+                reverse=True
+            )[:10]
+
         summary = {
             'totalEvents': total_events,
+            'totalStocks': total_stocks,
             'avgChg': round(sum(avg_chg_list) / len(avg_chg_list), 2) if avg_chg_list else 0,
             'maxChg': round(max(max_chg_list), 2) if max_chg_list else 0,
             'positiveRate': round(positive_count / len(avg_chg_list) * 100, 1) if avg_chg_list else 0,
-            'avgInvestScore': round(sum(invest_scores) / len(invest_scores)) if invest_scores else 0,
-            'avgSurpriseScore': round(sum(surprise_scores) / len(surprise_scores)) if surprise_scores else 0
         }
 
         # 按日期分组统计
@@ -11225,7 +11258,8 @@ def get_events_effectiveness_stats():
                 'currentDate': current_trading_day.strftime('%Y-%m-%d') if hasattr(current_trading_day, 'strftime') else str(current_trading_day),
                 'summary': summary,
                 'dailyStats': daily_stats,
-                'topPerformers': top_performers_list
+                'topPerformers': top_performers_list,
+                'topStocks': stock_stats
             }
         })
 

src/views/Community/components/EventDailyStats.js

@@ -12,25 +12,25 @@ import {
   Center,
   Tooltip,
   Badge,
-  Progress,
+  Tabs,
+  TabList,
+  Tab,
+  TabPanels,
+  TabPanel,
 } from '@chakra-ui/react';
 import {
   FireOutlined,
   RiseOutlined,
-  CheckCircleOutlined,
   ThunderboltOutlined,
   TrophyOutlined,
-  StarOutlined,
+  StockOutlined,
 } from '@ant-design/icons';
 import { getApiBase } from '@utils/apiConfig';
 
 /**
  * 生成事件详情页 URL
- * @param {number} eventId - 事件ID
- * @returns {string} 事件详情页 URL
  */
 const getEventDetailUrl = (eventId) => {
-  // 使用 base64 编码 ID，格式：ev-{id} -> base64
   const encodedId = btoa(`ev-${eventId}`);
   return `/event-detail?id=${encodedId}`;
 };
@@ -58,18 +58,104 @@ const getChgColor = (val) => {
 };
 
 /**
- * 获取胜率颜色
+ * 胜率仪表盘组件
  */
-const getWinRateColor = (rate) => {
-  if (rate >= 70) return '#52C41A'; // 绿色-优秀
-  if (rate >= 50) return '#FFD700'; // 金色-良好
-  return '#FF4D4F'; // 红色-待提升
+const WinRateGauge = ({ rate }) => {
+  const validRate = Math.min(100, Math.max(0, rate || 0));
+  const angle = (validRate / 100) * 180; // 0-180度
+
+  // 根据胜率确定颜色
+  const getGaugeColor = (r) => {
+    if (r >= 70) return '#52C41A';
+    if (r >= 50) return '#FFD700';
+    return '#FF4D4F';
+  };
+
+  const gaugeColor = getGaugeColor(validRate);
+
+  return (
+    <Box position="relative" w="100%" h="90px" overflow="hidden">
+      {/* 仪表盘背景 */}
+      <Box
+        position="absolute"
+        bottom="0"
+        left="50%"
+        transform="translateX(-50%)"
+        w="140px"
+        h="70px"
+        borderTopLeftRadius="70px"
+        borderTopRightRadius="70px"
+        bg="rgba(255,255,255,0.05)"
+        border="3px solid rgba(255,255,255,0.1)"
+        borderBottom="none"
+        overflow="hidden"
+      >
+        {/* 填充弧 */}
+        <Box
+          position="absolute"
+          bottom="0"
+          left="0"
+          w="100%"
+          h="100%"
+          bg={`conic-gradient(from 180deg, ${gaugeColor} 0deg, ${gaugeColor} ${angle}deg, transparent ${angle}deg)`}
+          opacity="0.3"
+          style={{ transformOrigin: 'center bottom' }}
+        />
+      </Box>
+
+      {/* 指针 */}
+      <Box
+        position="absolute"
+        bottom="3px"
+        left="50%"
+        w="3px"
+        h="50px"
+        bg={gaugeColor}
+        borderRadius="full"
+        transformOrigin="bottom center"
+        transform={`translateX(-50%) rotate(${angle - 90}deg)`}
+        boxShadow={`0 0 10px ${gaugeColor}`}
+        transition="transform 0.5s ease-out"
+      />
+
+      {/* 中心点 */}
+      <Box
+        position="absolute"
+        bottom="0"
+        left="50%"
+        transform="translateX(-50%)"
+        w="12px"
+        h="12px"
+        bg={gaugeColor}
+        borderRadius="full"
+        boxShadow={`0 0 8px ${gaugeColor}`}
+      />
+
+      {/* 数值显示 */}
+      <VStack
+        position="absolute"
+        bottom="15px"
+        left="50%"
+        transform="translateX(-50%)"
+        spacing={0}
+      >
+        <Text fontSize="2xl" fontWeight="bold" color={gaugeColor} lineHeight="1">
+          {validRate.toFixed(0)}%
+        </Text>
+        <Text fontSize="xs" color="gray.500">胜率</Text>
+      </VStack>
+
+      {/* 刻度标签 */}
+      <Text position="absolute" bottom="0" left="15px" fontSize="2xs" color="gray.600">0</Text>
+      <Text position="absolute" bottom="0" right="15px" fontSize="2xs" color="gray.600">100</Text>
+    </Box>
+  );
 };
 
 /**
  * 紧凑数据卡片
  */
-const CompactStatCard = ({ label, value, icon, color = '#FFD700', subText, progress }) => (
+const CompactStatCard = ({ label, value, icon, color = '#FFD700', subText }) => (
   <Box
     bg="rgba(0,0,0,0.25)"
     borderRadius="md"
@@ -95,27 +181,15 @@ const CompactStatCard = ({ label, value, icon, color = '#FFD700', subText, progr
         {subText}
       </Text>
     )}
-    {progress !== undefined && (
-      <Progress
-        value={progress}
-        size="xs"
-        colorScheme={progress >= 60 ? 'green' : progress >= 40 ? 'yellow' : 'red'}
-        mt={1.5}
-        borderRadius="full"
-        bg="rgba(255,255,255,0.08)"
-        h="3px"
-      />
-    )}
   </Box>
 );
 
 /**
- * TOP事件列表项 - 支持点击跳转
+ * TOP事件列表项
  */
 const TopEventItem = ({ event, rank }) => {
   const handleClick = () => {
     if (event.id) {
-      // 在新标签页打开事件详情
       window.open(getEventDetailUrl(event.id), '_blank');
     }
   };
@@ -130,9 +204,6 @@ const TopEventItem = ({ event, rank }) => {
       _hover={{ bg: 'rgba(255,215,0,0.12)', cursor: 'pointer' }}
       transition="all 0.15s"
       onClick={handleClick}
-      role="button"
-      tabIndex={0}
-      onKeyPress={(e) => e.key === 'Enter' && handleClick()}
     >
       <Badge
         colorScheme={rank === 1 ? 'yellow' : rank === 2 ? 'gray' : 'orange'}
@@ -155,28 +226,61 @@ const TopEventItem = ({ event, rank }) => {
           {event.title}
         </Text>
       </Tooltip>
-      <Text
-        fontSize="xs"
-        fontWeight="bold"
-        color={getChgColor(event.maxChg)}
-      >
+      <Text fontSize="xs" fontWeight="bold" color={getChgColor(event.maxChg)}>
         {formatChg(event.maxChg)}
       </Text>
     </HStack>
   );
 };
 
+/**
+ * TOP股票列表项
+ */
+const TopStockItem = ({ stock, rank }) => {
+  return (
+    <HStack
+      spacing={2}
+      py={1.5}
+      px={2}
+      bg="rgba(0,0,0,0.2)"
+      borderRadius="md"
+      _hover={{ bg: 'rgba(255,215,0,0.12)' }}
+      transition="all 0.15s"
+    >
+      <Badge
+        colorScheme={rank === 1 ? 'yellow' : rank === 2 ? 'gray' : 'orange'}
+        fontSize="2xs"
+        px={1.5}
+        borderRadius="full"
+        minW="18px"
+        textAlign="center"
+      >
+        {rank}
+      </Badge>
+      <Text fontSize="xs" color="gray.400" w="60px">
+        {stock.stockCode?.split('.')[0] || '-'}
+      </Text>
+      <Text fontSize="xs" color="gray.300" flex="1" noOfLines={1}>
+        {stock.stockName || '-'}
+      </Text>
+      <Text fontSize="xs" fontWeight="bold" color={getChgColor(stock.maxChg)}>
+        {formatChg(stock.maxChg)}
+      </Text>
+    </HStack>
+  );
+};
+
 const EventDailyStats = () => {
   const [loading, setLoading] = useState(true);
   const [stats, setStats] = useState(null);
   const [error, setError] = useState(null);
+  const [activeTab, setActiveTab] = useState(0);
 
   const fetchStats = useCallback(async () => {
     setLoading(true);
     setError(null);
     try {
       const apiBase = getApiBase();
-      // 获取当日数据（days=1 表示当前交易日）
       const response = await fetch(`${apiBase}/api/v1/events/effectiveness-stats?days=1`);
       if (!response.ok) throw new Error('获取数据失败');
       const data = await response.json();
@@ -195,7 +299,6 @@ const EventDailyStats = () => {
 
   useEffect(() => {
     fetchStats();
-    // 每5分钟刷新一次
     const interval = setInterval(fetchStats, 5 * 60 * 1000);
     return () => clearInterval(interval);
   }, [fetchStats]);
@@ -239,7 +342,7 @@ const EventDailyStats = () => {
     );
   }
 
-  const { summary, topPerformers = [] } = stats;
+  const { summary, topPerformers = [], topStocks = [] } = stats;
 
   return (
     <Box
@@ -264,38 +367,27 @@ const EventDailyStats = () => {
       />
 
       {/* 标题 */}
-      <HStack spacing={2} mb={3}>
+      <HStack spacing={2} mb={2}>
         <Box
           w="3px"
           h="16px"
           bg="linear-gradient(180deg, #FFD700, #FFA500)"
           borderRadius="full"
         />
-        <Text
-          fontSize="sm"
-          fontWeight="bold"
-          color="white"
-          letterSpacing="wide"
-        >
+        <Text fontSize="sm" fontWeight="bold" color="white" letterSpacing="wide">
           今日统计
         </Text>
-        <Badge
-          colorScheme="yellow"
-          variant="subtle"
-          fontSize="2xs"
-          px={1.5}
-        >
+        <Badge colorScheme="yellow" variant="subtle" fontSize="2xs" px={1.5}>
           实时
         </Badge>
       </HStack>
 
-      <VStack spacing={3} align="stretch">
+      <VStack spacing={2} align="stretch">
+        {/* 胜率仪表盘 */}
+        <WinRateGauge rate={summary?.positiveRate || 0} />
+
         {/* 核心指标 - 2x2 网格 */}
-        <Box
-          display="grid"
-          gridTemplateColumns="repeat(2, 1fr)"
-          gap={2}
-        >
+        <Box display="grid" gridTemplateColumns="repeat(2, 1fr)" gap={2}>
           <CompactStatCard
             label="事件数"
             value={summary?.totalEvents || 0}
@@ -304,11 +396,11 @@ const EventDailyStats = () => {
             subText="今日追踪"
           />
           <CompactStatCard
-            label="胜率"
-            value={`${(summary?.positiveRate || 0).toFixed(0)}%`}
-            icon={<CheckCircleOutlined />}
-            color={getWinRateColor(summary?.positiveRate || 0)}
-            progress={summary?.positiveRate || 0}
+            label="关联股票"
+            value={summary?.totalStocks || 0}
+            icon={<StockOutlined />}
+            color="#1890FF"
+            subText="去重统计"
           />
           <CompactStatCard
             label="平均超额"
@@ -326,74 +418,99 @@ const EventDailyStats = () => {
           />
         </Box>
 
-        {/* 评分指标 */}
-        <Box
-          display="grid"
-          gridTemplateColumns="repeat(2, 1fr)"
-          gap={2}
-        >
-          <CompactStatCard
-            label="投资价值"
-            value={(summary?.avgInvestScore || 0).toFixed(0)}
-            icon={<StarOutlined />}
-            color="#F59E0B"
-            progress={summary?.avgInvestScore || 0}
-          />
-          <CompactStatCard
-            label="超预期分"
-            value={(summary?.avgSurpriseScore || 0).toFixed(0)}
-            icon={<TrophyOutlined />}
-            color="#8B5CF6"
-            progress={summary?.avgSurpriseScore || 0}
-          />
-        </Box>
-
         {/* 分割线 */}
         <Box h="1px" bg="rgba(255,215,0,0.1)" />
 
-        {/* TOP表现事件 - 显示 TOP10 */}
+        {/* TOP 表现 - Tab 切换 */}
         <Box flex="1" overflow="hidden">
-          <HStack spacing={1.5} mb={2}>
-            <TrophyOutlined style={{ color: '#FFD700', fontSize: '12px' }} />
-            <Text fontSize="xs" fontWeight="bold" color="gray.400">
-              今日 TOP 表现
-            </Text>
-            <Text fontSize="2xs" color="gray.600">
-              (点击查看详情)
-            </Text>
-          </HStack>
-          <VStack
-            spacing={1}
-            align="stretch"
-            maxH="220px"
-            overflowY="auto"
-            pr={1}
-            css={{
-              '&::-webkit-scrollbar': {
-                width: '4px',
-              },
-              '&::-webkit-scrollbar-track': {
-                background: 'rgba(255,255,255,0.05)',
-                borderRadius: '2px',
-              },
-              '&::-webkit-scrollbar-thumb': {
-                background: 'rgba(255,215,0,0.3)',
-                borderRadius: '2px',
-              },
-              '&::-webkit-scrollbar-thumb:hover': {
-                background: 'rgba(255,215,0,0.5)',
-              },
-            }}
+          <Tabs
+            variant="soft-rounded"
+            colorScheme="yellow"
+            size="sm"
+            index={activeTab}
+            onChange={setActiveTab}
           >
-            {topPerformers.slice(0, 10).map((event, idx) => (
-              <TopEventItem key={event.id || idx} event={event} rank={idx + 1} />
-            ))}
-            {topPerformers.length === 0 && (
-              <Text fontSize="xs" color="gray.600" textAlign="center" py={2}>
-                暂无数据
-              </Text>
-            )}
-          </VStack>
+            <TabList mb={2}>
+              <Tab
+                fontSize="xs"
+                py={1}
+                px={3}
+                _selected={{ bg: 'rgba(255,215,0,0.2)', color: '#FFD700' }}
+                color="gray.500"
+              >
+                <HStack spacing={1}>
+                  <TrophyOutlined style={{ fontSize: '11px' }} />
+                  <Text>事件TOP10</Text>
+                </HStack>
+              </Tab>
+              <Tab
+                fontSize="xs"
+                py={1}
+                px={3}
+                _selected={{ bg: 'rgba(255,215,0,0.2)', color: '#FFD700' }}
+                color="gray.500"
+              >
+                <HStack spacing={1}>
+                  <StockOutlined style={{ fontSize: '11px' }} />
+                  <Text>股票TOP10</Text>
+                </HStack>
+              </Tab>
+            </TabList>
+
+            <TabPanels>
+              {/* 事件 TOP10 */}
+              <TabPanel p={0}>
+                <VStack
+                  spacing={1}
+                  align="stretch"
+                  maxH="195px"
+                  overflowY="auto"
+                  pr={1}
+                  css={{
+                    '&::-webkit-scrollbar': { width: '4px' },
+                    '&::-webkit-scrollbar-track': { background: 'rgba(255,255,255,0.05)', borderRadius: '2px' },
+                    '&::-webkit-scrollbar-thumb': { background: 'rgba(255,215,0,0.3)', borderRadius: '2px' },
+                    '&::-webkit-scrollbar-thumb:hover': { background: 'rgba(255,215,0,0.5)' },
+                  }}
+                >
+                  {topPerformers.slice(0, 10).map((event, idx) => (
+                    <TopEventItem key={event.id || idx} event={event} rank={idx + 1} />
+                  ))}
+                  {topPerformers.length === 0 && (
+                    <Text fontSize="xs" color="gray.600" textAlign="center" py={2}>
+                      暂无数据
+                    </Text>
+                  )}
+                </VStack>
+              </TabPanel>
+
+              {/* 股票 TOP10 */}
+              <TabPanel p={0}>
+                <VStack
+                  spacing={1}
+                  align="stretch"
+                  maxH="195px"
+                  overflowY="auto"
+                  pr={1}
+                  css={{
+                    '&::-webkit-scrollbar': { width: '4px' },
+                    '&::-webkit-scrollbar-track': { background: 'rgba(255,255,255,0.05)', borderRadius: '2px' },
+                    '&::-webkit-scrollbar-thumb': { background: 'rgba(255,215,0,0.3)', borderRadius: '2px' },
+                    '&::-webkit-scrollbar-thumb:hover': { background: 'rgba(255,215,0,0.5)' },
+                  }}
+                >
+                  {topStocks.slice(0, 10).map((stock, idx) => (
+                    <TopStockItem key={stock.stockCode || idx} stock={stock} rank={idx + 1} />
+                  ))}
+                  {topStocks.length === 0 && (
+                    <Text fontSize="xs" color="gray.600" textAlign="center" py={2}>
+                      暂无数据
+                    </Text>
+                  )}
+                </VStack>
+              </TabPanel>
+            </TabPanels>
+          </Tabs>
         </Box>
       </VStack>
     </Box>