成交行情价格统计表格

frontend/src/pages/News.jsx

@@ -481,55 +481,94 @@ export default function News() {
           </div>
         ) : (
           <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
-            {/* 成交行情 - 统计区域 */}
+            {/* 成交行情 - 价格统计表格 */}
             {activeTab === 'deal' && (() => {
-              // 统计各维度
+              const [selectedVersion, setSelectedVersion] = useState('龙钞')
-              const stats = { version: {}, packaging: {}, category: {}, platform: {}, date: {}, totalCount: infoList.length, totalAmount: 0 }
+              const [selectedDate, setSelectedDate] = useState('')
-              infoList.forEach(item => {
+              
-                const content = item.content || ''
+              const versions = ['龙钞', '马钞', '蛇钞', '其他']
-                // 版本
+              const packagings = ['标百', '标十', '单张']
+              const categories = ['带4号', '带7号', '永恒号', '钻石号', '如意号', '朦胧号', '天马号', '金山号', '金马号']
+              
+              const filteredData = infoList.filter(item => {
                 const serial = (item.title || '').split('-')[0] || ''
                 let version = '其他'
                 if (serial.startsWith('J0')) version = '龙钞'
                 else if (serial.startsWith('J1')) version = '马钞'
                 else if (serial.startsWith('J3')) version = '蛇钞'
-                stats.version[version] = (stats.version[version] || 0) + 1
+                if (version !== selectedVersion) return false
-                // 包装
+                if (selectedDate) {
-                const pkg = content.match(/包装:\s*(.+?)(?:\n|$)/)?.[1]?.trim() || item.packaging || '-'
+                  const dealDate = item.deal_date || ''
-                stats.packaging[pkg] = (stats.packaging[pkg] || 0) + 1
+                  if (!dealDate.startsWith(selectedDate)) return false
-                // 分类
+                }
-                const cat = content.match(/分类:\s*(.+?)(?:\n|$)/)?.[1]?.trim() || item.category || '-'
+                return true
-                stats.category[cat] = (stats.category[cat] || 0) + 1
-                // 平台
-                const plat = content.match(/平台:\s*(.+?)(?:\n|$)/)?.[1]?.trim() || '-'
-                stats.platform[plat] = (stats.platform[plat] || 0) + 1
-                // 日期
-                const date = content.match(/日期:\s*(.+?)(?:\n|$)/)?.[1]?.trim() || item.deal_date || '-'
-                stats.date[date] = (stats.date[date] || 0) + 1
-                // 总金额
-                stats.totalAmount += item.deal_price || 0
               })
               
-              const renderStat = (title, data) => (
+              const calcAvg = (pkg, cat) => {
-                <div style={{ marginBottom: '12px' }}>
+                const items = filteredData.filter(item => {
-                  <div style={{ color: '#94a3b8', fontSize: '12px', marginBottom: '6px' }}>{title}</div>
+                  const content = item.content || ''
-                  <div style={{ display: 'flex', flexWrap: 'wrap', gap: '6px' }}>
+                  const p = content.match(/包装:\s*(.+?)(?:\n|$)/)?.[1]?.trim() || item.packaging || ''
-                    {Object.entries(data).sort((a,b) => b[1] - a[1]).map(([k, v]) => (
+                  const c = content.match(/分类:\s*(.+?)(?:\n|$)/)?.[1]?.trim() || item.category || ''
-                      <span key={k} style={{ background: '#3b82f6', color: '#fff', padding: '4px 10px', borderRadius: '6px', fontSize: '12px' }}>{k} ({v})</span>
+                  return p === pkg && c === cat
-                    ))}
+                })
-                  </div>
+                if (items.length === 0) return null
-                </div>
+                const sum = items.reduce((a, b) => a + (b.deal_price || 0), 0)
-              )
+                return { avg: Math.round(sum / items.length), count: items.length, items }
+              }
               
               return (
                 <div style={{ background: '#1e293b', borderRadius: '12px', padding: '16px', marginBottom: '12px' }}>
-                  <div style={{ color: '#fff', fontSize: '16px', fontWeight: '600', marginBottom: '12px' }}>📊 成交行情统计</div>
+                  <div style={{ marginBottom: '16px' }}>
-                  <div style={{ color: '#22c55e', fontSize: '14px', marginBottom: '16px' }}>总成交 {stats.totalCount} 笔，总金额 ¥{stats.totalAmount.toLocaleString()}</div>
+                    <div style={{ display: 'flex', gap: '12px', flexWrap: 'wrap', marginBottom: '12px' }}>
-                  {renderStat('版本分布', stats.version)}
+                      {versions.map(v => (
-                  {renderStat('包装分布', stats.packaging)}
+                        <button key={v} onClick={() => setSelectedVersion(v)}
-                  {renderStat('号码分类', stats.category)}
+                          style={{ padding: '6px 16px', borderRadius: '8px', border: 'none', cursor: 'pointer',
-                  {renderStat('成交平台', stats.platform)}
+                            background: selectedVersion === v ? '#3b82f6' : 'rgba(255,255,255,0.1)',
-                  {renderStat('成交日期', stats.date)}
+                            color: '#fff', fontSize: '13px', fontWeight: selectedVersion === v ? '600' : '400' }}>
+                          {v}
+                        </button>
+                      ))}
+                    </div>
+                    <input type="month" value={selectedDate} onChange={e => setSelectedDate(e.target.value)}
+                      style={{ padding: '8px 12px', borderRadius: '8px', border: '1px solid rgba(255,255,255,0.2)', 
+                        background: 'rgba(255,255,255,0.05)', color: '#fff', fontSize: '14px' }} />
+                  </div>
+                  
+                  <div style={{ overflowX: 'auto' }}>
+                    <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: '13px' }}>
+                      <thead>
+                        <tr>
+                          <th style={{ padding: '8px', textAlign: 'left', color: '#94a3b8', borderBottom: '1px solid rgba(255,255,255,0.1)' }}></th>
+                          {packagings.map(p => (
+                            <th key={p} style={{ padding: '8px', textAlign: 'center', color: '#94a3b8', borderBottom: '1px solid rgba(255,255,255,0.1)' }}>{p}</th>
+                          ))}
+                        </tr>
+                      </thead>
+                      <tbody>
+                        {categories.map(cat => {
+                          const rowData = packagings.map(pkg => calcAvg(pkg, cat))
+                          const hasData = rowData.some(d => d !== null)
+                          if (!hasData) return null
+                          return (
+                            <tr key={cat}>
+                              <td style={{ padding: '8px', color: '#fbbf24', fontWeight: '500', borderBottom: '1px solid rgba(255,255,255,0.05)' }}>{cat}</td>
+                              {rowData.map((d, i) => (
+                                <td key={i} style={{ padding: '8px', textAlign: 'center', borderBottom: '1px solid rgba(255,255,255,0.05)' }}>
+                                  {d ? (
+                                    <div style={{ color: '#22c55e', fontWeight: '600', cursor: 'pointer' }}
+                                      onClick={() => alert(`${selectedVersion} ${cat} ${packagings[i]} 平均价¥${d.avg.toLocaleString()}, 共${d.count}笔`)}>
+                                      ¥{d.avg.toLocaleString()}
+                                      <span style={{ color: '#64748b', fontSize: '11px', marginLeft: '4px' }}>({d.count})</span>
+                                    </div>
+                                  ) : <span style={{ color: '#475569' }}>-</span>}
+                                </td>
+                              ))}
+                            </tr>
+                          )
+                        })}
+                      </tbody>
+                    </table>
+                  </div>
                 </div>
               )
             })()}