6.2 KiB
6.2 KiB
前端数据处理错误修复计划
问题分析
用户反馈:后端返回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 ...
}
问题识别:
- 前端代码期望的数据结构与后端返回的结构不一致
data.summary应该包含dailyNewReplaceCount等字段- 但后端可能返回的是不同的结构
数据不匹配的具体原因
后端 API:/api/metrics/daily-dashboard?date=2026-05-17
后端返回的JSON结构中 success: true,说明后端代码执行成功。
但根据数据内容:
daily NewReplaceCount: 0- 应为大于0dailyShouldReplaceCount: 0- 应该与之前查询的3592接近- 仅有
cumulativeTotal: 106有合理的值
真实原因
这不是前端代码问题,而是后端返回的数据本身是全0。
前端代码正确地处理了接收到的数据:
- 第493行:检查
response.success - 第507行:调用
displayDashboard(response.data) - 第525-628行:遍历
data.summary和data.breakdown显示
关键问题:用户说"显示error",但我们看到的JSON显示 success: true。
这可能意味着:
- 存储过程未执行或返回空结果
- 后端的
GetDailySummaryAsync返回的是默认值(全0) - 查询的日期 2026-05-17 在数据库中没有实际数据
修复计划
步骤1:验证后端API实际返回的数据
在浏览器开发者工具中:
- 打开 Chrome DevTools (F12)
- 切换到 Network 标签
- 选择日期 2026-05-17 并点击"查询汇总"
- 找到
/api/metrics/daily-dashboard请求 - 在 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)。
这说明:
- ✅ API端点工作正常
- ✅ 数据库连接成功
- ✅ 没有异常导致降级
- ❌ 存储过程返回了错误的数据(全0)或者
- ❌ 查询的日期在数据库中确实没有相关数据
验收标准
- ✅ 通过浏览器DevTools查看实际API返回
- ✅ 验证存储过程是否存在并可执行
- ✅ 检查查询日期的实际源数据
- ✅ 修改日期后验证不同日期的数据
- ✅ 查看后端日志确认实际调用情况