LabelChange-server/.trae/documents/frontend_data_issue_analysis.md

前端数据处理错误修复计划

问题分析

用户反馈：后端返回JSON数据成功，但前端显示error

用户收到的JSON数据：

{
  "data": {
    "date": "2026-05-17",
    "summary": {
      "dailyNewReplaceCount": 0,
      "dailyShouldReplaceCount": 0,
      "dailySuccessCount": 0,
      "dailyCompletionRate": "0.00%",
      "rate24Hour": "0.00%"
    },
    "breakdown": {
      "beforeNoon": {
        "arrived": 0,
        "passed": 0,
        "rate": "0%"
      },
      "afternoon": {
        "arrived": 0,
        "passed": 0,
        "rate": "0%"
      }
    },
    "details": {
      "cumulativeTotal": 106,
      "dailyStop": 0,
      "dailyLabelPush": 0,
      "dailyScanCount": 0,
      "dailyFailure": 0
    }
  },
  "success": true
}

问题根源

查看 metrics-dashboard-summary.html 第525-628行的 displayDashboard 函数：

function displayDashboard(data) {
    const date = data.date;
    const summary = data.summary || {};
    const breakdown = data.breakdown || {};
    const details = data.details || {};
    
    // ... 生成HTML ...
}

问题识别：

1. 前端代码期望的数据结构与后端返回的结构不一致
2. data.summary 应该包含 dailyNewReplaceCount 等字段
3. 但后端可能返回的是不同的结构

数据不匹配的具体原因

后端 API：/api/metrics/daily-dashboard?date=2026-05-17

后端返回的JSON结构中 success: true，说明后端代码执行成功。

但根据数据内容：

• daily NewReplaceCount: 0 - 应为大于0
• dailyShouldReplaceCount: 0 - 应该与之前查询的3592接近
• 仅有 cumulativeTotal: 106 有合理的值

真实原因

这不是前端代码问题，而是后端返回的数据本身是全0。

前端代码正确地处理了接收到的数据：

• 第493行：检查 response.success
• 第507行：调用 displayDashboard(response.data)
• 第525-628行：遍历 data.summary 和 data.breakdown 显示

关键问题：用户说"显示error"，但我们看到的JSON显示 success: true。

这可能意味着：

1. 存储过程未执行或返回空结果
2. 后端的 GetDailySummaryAsync 返回的是默认值（全0）
3. 查询的日期 2026-05-17 在数据库中没有实际数据

修复计划

步骤1：验证后端API实际返回的数据

在浏览器开发者工具中：

1. 打开 Chrome DevTools (F12)
2. 切换到 Network 标签
3. 选择日期 2026-05-17 并点击"查询汇总"
4. 找到 /api/metrics/daily-dashboard 请求
5. 在 Response 标签查看实际返回的JSON

检查项：

• success 字段值
• data.summary 中各字段的实际值
• 是否有错误信息

步骤2：检查后端的 MetricsController.GetDailyDashboard 方法

问题：需要确认后端是否正确调用了存储过程并映射了数据

检查文件：src/CONTROLLER/Controllers/MetricsController.cs

关键问题：

• 是否正确传递了日期参数？
• GetDailySummaryAsync(date) 返回的是什么？
• DTO映射是否正确？

步骤3：检查存储过程是否真的被创建和调用

在数据库中验证：

-- 1. 验证存储过程存在
SHOW PROCEDURE STATUS WHERE Db = 'lr01mainusa' AND Name = 'sp_GetDailyMetricsSummary';

-- 2. 直接测试存储过程
CALL sp_GetDailyMetricsSummary('2026-05-17');

-- 3. 检查该日期是否有实际数据
SELECT COUNT(*) FROM arrival_handover_forms 
WHERE DATE(CONVERT_TZ(ReceiptTime, '+00:00', '-05:00')) = '2026-05-17';

SELECT COUNT(*) FROM label_replace_requests 
WHERE DATE(CONVERT_TZ(CreatedAt, '+00:00', '-05:00')) = '2026-05-17' 
  AND Label IS NOT NULL;

步骤4：在不同日期上测试

尝试查询其他日期（如2026-05-16、2026-05-15等），确认：

• 是否某个特定日期返回0
• 还是所有日期都返回0

步骤5：添加前端调试日志

在前端 handleDashboardResponse 函数中添加详细日志：

function handleDashboardResponse(response) {
    console.log('响应内容:', JSON.stringify(response, null, 2));
    
    if (response && response.success) {
        console.log('数据验证：成功');
        console.log('summary:', response.data?.summary);
        console.log('breakdown:', response.data?.breakdown);
        console.log('details:', response.data?.details);
        displayDashboard(response.data);
    } else {
        console.error('响应失败:', response?.error);
        showError(response?.error || '查询失败');
    }
}

步骤6：后端添加详细日志

在 MetricsCalculationService.GetDailySummaryAsync 中添加日志：

public async Task<Daily24HCompletionRateDto> GetDailySummaryAsync(DateTime date)
{
    _logger.LogInformation("=== GetDailySummaryAsync START ===");
    _logger.LogInformation("查询日期：{date:yyyy-MM-dd}", date);
    
    try
    {
        var db = _provider.GetClient();
        string sql = $"CALL sp_GetDailyMetricsSummary('{date:yyyy-MM-dd}')";
        _logger.LogInformation("执行SQL：{sql}", sql);
        
        var summaryList = await db.SqlQueryable<dynamic>(sql).ToListAsync();
        _logger.LogInformation("查询结果行数：{count}", summaryList?.Count ?? 0);
        
        if (summaryList?.Count > 0)
        {
            var firstRow = summaryList[0];
            _logger.LogInformation("第一行数据：DailyShouldReplaceCount={count}", firstRow.DailyShouldReplaceCount);
        }
        
        // ... 后续处理 ...
    }
    catch (Exception ex)
    {
        _logger.LogError(ex, "=== GetDailySummaryAsync ERROR ===");
        // ... 降级处理 ...
    }
}

关键发现

用户提供的JSON显示 success: true 和数据存在，所以前端的问题不在于处理null或异常。

真实问题是后端返回的数据本身全是0（除了 cumulativeTotal: 106）。

这说明：

1. ✅ API端点工作正常
2. ✅ 数据库连接成功
3. ✅ 没有异常导致降级
4. ❌ 存储过程返回了错误的数据（全0）或者
5. ❌ 查询的日期在数据库中确实没有相关数据

验收标准

1. ✅ 通过浏览器DevTools查看实际API返回
2. ✅ 验证存储过程是否存在并可执行
3. ✅ 检查查询日期的实际源数据
4. ✅ 修改日期后验证不同日期的数据
5. ✅ 查看后端日志确认实际调用情况