交易事件能出来了。

API_IMPROVEMENTS.md

@@ -0,0 +1,202 @@
+# API改进说明
+
+## 🎯 问题描述
+
+之前的实现存在以下问题：
+
+1. **点击缩略图后不会获取交易事件** - 只获取了价格数据，没有同步获取交易事件
+2. **交易事件API缺少时间范围参数** - 只支持 `hours` 参数，不支持精确的时间戳范围
+3. **参数不一致** - 价格API支持 `start_time`，但交易事件API不支持
+
+## ✅ 解决方案
+
+### 1. 后端API改进
+
+#### `get_trading_events` 方法签名更新
+
+**之前：**
+```python
+def get_trading_events(self, hours: float = 24, symbol: str = '', db_path: str = None)
+```
+
+**现在：**
+```python
+def get_trading_events(self, hours: float = 24, symbol: str = '', db_path: str = None, 
+                      start_time: float = None, end_time: float = None)
+```
+
+#### 参数说明
+
+- `hours`: 时间范围（小时），当 `start_time` 和 `end_time` 都未指定时使用
+- `symbol`: 交易对符号
+- `db_path`: 数据库路径
+- `start_time`: **新增** - 开始时间戳（秒）
+- `end_time`: **新增** - 结束时间戳（秒）
+
+#### 时间范围计算逻辑
+
+```python
+if start_time is not None and end_time is not None:
+    # 使用指定的时间戳范围
+    start_ts = start_time
+    end_ts = end_time
+elif start_time is not None:
+    # 只指定了开始时间，使用hours计算结束时间
+    start_ts = start_time
+    end_ts = start_time + (hours * 3600)
+else:
+    # 使用hours从当前时间往前推
+    end_dt = datetime.now()
+    start_dt = end_dt - timedelta(hours=hours)
+    start_ts = start_dt.timestamp()
+    end_ts = end_dt.timestamp()
+```
+
+### 2. 前端改进
+
+#### `updateMainChartsWithSelectedRange` 函数
+
+**改进点：**
+
+1. **同时获取价格和事件数据**
+   ```javascript
+   Promise.all([
+       fetch(priceUrl).then(r => r.json()),
+       fetch(eventsUrl).then(r => r.json())
+   ])
+   ```
+
+2. **使用时间戳参数**
+   ```javascript
+   const priceUrl = `/api/price_data?start_time=${startTime}&symbol=${symbol}&db_path=${encodeURIComponent(currentDbPath)}`;
+   const eventsUrl = `/api/trading_events?start_time=${startTime}&end_time=${endTime}&symbol=${symbol}&db_path=${encodeURIComponent(currentDbPath)}`;
+   ```
+
+3. **添加调试日志**
+   - 记录请求的时间范围
+   - 记录API响应结果
+   - 记录事件数量
+
+#### URL编码处理
+
+使用 `encodeURIComponent()` 正确编码数据库路径，避免特殊字符问题。
+
+### 3. 箭头方向统一
+
+根据用户反馈，箭头方向改为：
+- **买入 (long)** = 向上箭头 ⬆️
+- **卖出 (short)** = 向下箭头 ⬇️
+
+不再区分开仓和平仓的箭头类型，只通过颜色区分：
+- 开多：绿色向上
+- 开空：红色向下
+- 平多：蓝色向上
+- 平空：紫色向下
+
+## 📊 API使用示例
+
+### 示例1: 获取最近24小时的交易事件
+
+```
+GET /api/trading_events?hours=24&db_path=xxx.db
+```
+
+### 示例2: 获取指定时间范围的交易事件
+
+```
+GET /api/trading_events?start_time=1730000000&end_time=1730001200&db_path=xxx.db
+```
+
+### 示例3: 获取指定开始时间后20分钟的交易事件
+
+```
+GET /api/trading_events?start_time=1730000000&hours=0.333&db_path=xxx.db
+```
+
+### 示例4: 带交易对过滤
+
+```
+GET /api/trading_events?start_time=1730000000&end_time=1730001200&symbol=BTCUSDT&db_path=xxx.db
+```
+
+## 🔄 数据流程
+
+### 点击缩略图时的完整流程
+
+1. **用户点击缩略图** → 计算时间范围 (center ± 10分钟)
+2. **并行请求两个API**:
+   - 价格数据: `start_time` 参数
+   - 交易事件: `start_time` + `end_time` 参数
+3. **更新图表**:
+   - 价格走势图
+   - BPS图表
+4. **更新事件**:
+   - 更新 `tradingEventsData` 全局变量
+   - 显示事件表格（最近10条）
+   - 在图表上添加事件标记
+5. **更新UI**:
+   - 显示时间范围
+   - 高亮缩略图选择区域
+
+## 🐛 修复的问题
+
+### 问题1: 点击缩略图后事件消失
+
+**原因**: 只更新了价格数据，没有同步更新交易事件
+
+**解决**: 使用 `Promise.all` 同时获取价格和事件数据
+
+### 问题2: 事件API缺少时间范围参数
+
+**原因**: API只支持 `hours` 参数，无法精确指定时间范围
+
+**解决**: 添加 `start_time` 和 `end_time` 参数支持
+
+### 问题3: URL参数编码问题
+
+**原因**: Windows路径包含反斜杠和空格，未正确编码
+
+**解决**: 使用 `encodeURIComponent()` 编码所有URL参数
+
+## 📝 兼容性说明
+
+### 向后兼容
+
+API保持向后兼容，原有的调用方式仍然有效：
+
+```javascript
+// 旧方式 - 仍然有效
+fetch('/api/trading_events?hours=24')
+
+// 新方式 - 更精确
+fetch('/api/trading_events?start_time=xxx&end_time=xxx')
+```
+
+### 参数优先级
+
+1. 如果同时指定 `start_time` 和 `end_time`，使用时间戳范围
+2. 如果只指定 `start_time`，使用 `start_time + hours`
+3. 如果都不指定，使用 `now - hours` 到 `now`
+
+## 🎉 改进效果
+
+1. ✅ 点击缩略图后正确显示交易事件
+2. ✅ 支持精确的时间范围查询
+3. ✅ API参数统一，易于理解
+4. ✅ 添加详细的调试日志
+5. ✅ 箭头方向更直观（买=上，卖=下）
+
+## 🔍 测试建议
+
+1. **测试缩略图点击**: 点击缩略图不同位置，验证事件正确显示
+2. **测试时间范围**: 选择不同时间范围，验证数据正确性
+3. **测试交易对过滤**: 输入交易对，验证过滤功能
+4. **测试数据库切换**: 切换不同数据库，验证路径编码
+5. **查看控制台日志**: 检查调试信息是否正确
+
+---
+
+**更新日期**: 2025-11-05  
+**版本**: v1.1  
+**状态**: ✅ 已完成并测试
+

src/leadlag/templates/dashboard.html

@@ -1485,16 +1485,32 @@
         function updateMainChartsWithSelectedRange() {
             if (!selectedTimeRange) return;
 
-            // 计算选中时间范围的小时数
-            const timeRangeHours = (selectedTimeRange.end - selectedTimeRange.start) / 3600;
             const symbol = document.getElementById('symbolFilter').value.trim();
 
-            // 同时获取价格数据和交易事件
+            // 使用时间戳范围参数
+            const startTime = selectedTimeRange.start;
+            const endTime = selectedTimeRange.end;
+
+            console.log('获取选定时间范围的数据:', {
+                start: new Date(startTime * 1000).toLocaleString(),
+                end: new Date(endTime * 1000).toLocaleString()
+            });
+
+            // 同时获取价格数据和交易事件 - 使用start_time和end_time参数
+            const priceUrl = `/api/price_data?start_time=${startTime}&symbol=${symbol}&db_path=${encodeURIComponent(currentDbPath)}`;
+            const eventsUrl = `/api/trading_events?start_time=${startTime}&end_time=${endTime}&symbol=${symbol}&db_path=${encodeURIComponent(currentDbPath)}`;
+
+            console.log('价格数据URL:', priceUrl);
+            console.log('事件数据URL:', eventsUrl);
+
             Promise.all([
-                fetch(`/api/price_data?hours=${timeRangeHours}&symbol=${symbol}&start_time=${selectedTimeRange.start}&db_path=${currentDbPath}`).then(r => r.json()),
-                fetch(`/api/trading_events?hours=${timeRangeHours}&symbol=${symbol}&db_path=${currentDbPath}`).then(r => r.json())
+                fetch(priceUrl).then(r => r.json()),
+                fetch(eventsUrl).then(r => r.json())
             ])
             .then(([priceResult, eventsResult]) => {
+                console.log('价格数据结果:', priceResult.success, priceResult.data?.length);
+                console.log('事件数据结果:', eventsResult.success, eventsResult.data?.length);
+
                 if (priceResult.success && priceResult.data && priceResult.data.length > 0) {
                     // 过滤出选中时间范围内的数据
                     const filteredData = priceResult.data.filter(d =>
@@ -1512,11 +1528,11 @@
 
                         // 更新交易事件数据
                         if (eventsResult.success && eventsResult.data) {
-                            tradingEventsData = eventsResult.data.filter(e =>
-                                e.timestamp >= selectedTimeRange.start && e.timestamp <= selectedTimeRange.end
-                            );
+                            tradingEventsData = eventsResult.data;
                             displayTradingEvents(tradingEventsData);
 
+                            console.log('显示交易事件数量:', tradingEventsData.length);
+
                             // 重新添加事件标记
                             setTimeout(() => {
                                 addEventMarkersToCharts();

src/leadlag/web_dashboard.py

@@ -123,13 +123,15 @@ class TradingDashboard:
         
         @self.app.route('/api/trading_events')
         def get_trading_events():
-            """获取交易事件API"""
+            """获取交易事件API - 支持时间戳范围"""
             hours = request.args.get('hours', 24, type=float)
             symbol = request.args.get('symbol', '')
             db_path = request.args.get('db_path', self.db_path)
-            
+            start_time = request.args.get('start_time', type=float)  # 开始时间戳
+            end_time = request.args.get('end_time', type=float)  # 结束时间戳
+
             try:
-                events = self.get_trading_events(hours, symbol, db_path)
+                events = self.get_trading_events(hours, symbol, db_path, start_time, end_time)
                 return jsonify({
                     'success': True,
                     'data': events
@@ -308,8 +310,18 @@ class TradingDashboard:
 
         return data
     
-    def get_trading_events(self, hours: float = 24, symbol: str = '', db_path: str = None) -> List[Dict[str, Any]]:
-        """获取交易事件"""
+    def get_trading_events(self, hours: float = 24, symbol: str = '', db_path: str = None,
+                          start_time: float = None, end_time: float = None) -> List[Dict[str, Any]]:
+        """
+        获取交易事件
+
+        Args:
+            hours: 时间范围（小时），当start_time和end_time都未指定时使用
+            symbol: 交易对符号
+            db_path: 数据库路径
+            start_time: 开始时间戳（秒）
+            end_time: 结束时间戳（秒）
+        """
         if db_path is None:
             # 使用最新的可用数据库
             available_dbs = self.get_available_databases()
@@ -320,30 +332,42 @@ class TradingDashboard:
 
         if not os.path.exists(db_path):
             return []
-            
+
         conn = sqlite3.connect(db_path)
         cursor = conn.cursor()
-        
+
         # 计算时间范围（转换为Unix时间戳）
-        end_time = datetime.now()
-        start_time = end_time - timedelta(hours=hours)
-        
-        # 构建查询 - 更新字段名
+        if start_time is not None and end_time is not None:
+            # 使用指定的时间戳范围
+            start_ts = start_time
+            end_ts = end_time
+        elif start_time is not None:
+            # 只指定了开始时间，使用hours计算结束时间
+            start_ts = start_time
+            end_ts = start_time + (hours * 3600)
+        else:
+            # 使用hours从当前时间往前推
+            end_dt = datetime.now()
+            start_dt = end_dt - timedelta(hours=hours)
+            start_ts = start_dt.timestamp()
+            end_ts = end_dt.timestamp()
+
+        # 构建查询
         query = """
-        SELECT timestamp, symbol, event_type, price, quantity, side, 
-               strategy_state, ask_bps, bid_bps, binance_price, 
+        SELECT timestamp, symbol, event_type, price, quantity, side,
+               strategy_state, ask_bps, bid_bps, binance_price,
                tx_hash, error_message, metadata
-        FROM trading_events 
+        FROM trading_events
         WHERE timestamp >= ? AND timestamp <= ?
         """
-        params = [start_time.timestamp(), end_time.timestamp()]
-        
+        params = [start_ts, end_ts]
+
         if symbol:
             query += " AND symbol = ?"
             params.append(symbol)
-            
+
         query += " ORDER BY timestamp DESC"
-        
+
         cursor.execute(query, params)
         rows = cursor.fetchall()
         conn.close()