fix(ops): 修复仪表盘图表不显示 — funnelData 字段名与后端 statusDistribution 不匹配

后端 API 返回的字段名为 statusDistribution,但前端类型定义和数据映射使用的是 funnelData,
导致工单状态分布、工牌队列统计、功能类型排行图表数据为 undefined 无法渲染。

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
lzh
2026-03-01 15:46:39 +08:00
parent 004897414a
commit 81da329cbd
2 changed files with 8 additions and 8 deletions

View File

@@ -198,7 +198,7 @@ export interface DashboardStatsResp {
dates: string[];
responseTimeData: number[];
};
funnelData: Array<{ name: string; value: number }>;
statusDistribution: Array<{ name: string; value: number }>;
heatmapData: { data: number[][]; days: string[]; hours: string[] };
functionTypeRanking: Array<{
completed: number;

View File

@@ -64,7 +64,7 @@ interface DashboardStats {
};
// 工单状态分布
funnelData: Array<{ name: string; value: number }>;
statusDistribution: Array<{ name: string; value: number }>;
// 时段热力图数据近7天 x 24小时
heatmapData: {
@@ -136,7 +136,7 @@ const statsData = ref<DashboardStats>({
responseTimeData: [],
completionTimeData: [],
},
funnelData: [],
statusDistribution: [],
heatmapData: {
days: [],
hours: [],
@@ -156,7 +156,7 @@ const EMPTY_STATS: DashboardStats = {
trendData: { dates: [], createdData: [], completedData: [] },
hourlyDistribution: { hours: [], data: [] },
timeTrendData: { dates: [], responseTimeData: [], completionTimeData: [] },
funnelData: [],
statusDistribution: [],
heatmapData: { days: [], hours: [], data: [] },
functionTypeRanking: [],
};
@@ -396,7 +396,7 @@ function getTimeTrendChartOptions(): ECOption {
* 工单状态分布环形饼图配置
*/
function getFunnelChartOptions(): ECOption {
const { funnelData } = statsData.value;
const { statusDistribution } = statsData.value;
const STATUS_COLORS: Record<string, string> = {
待处理: '#f5a623',
排队中: '#8b5cf6',
@@ -406,7 +406,7 @@ function getFunnelChartOptions(): ECOption {
已取消: '#f43f5e',
已暂停: '#94a3b8',
};
const total = funnelData.reduce((sum, item) => sum + item.value, 0);
const total = statusDistribution.reduce((sum, item) => sum + item.value, 0);
return {
tooltip: {
trigger: 'item',
@@ -478,7 +478,7 @@ function getFunnelChartOptions(): ECOption {
borderWidth: 2,
borderRadius: 4,
},
data: funnelData.map((item) => ({
data: statusDistribution.map((item) => ({
...item,
itemStyle: {
color: STATUS_COLORS[item.name] || '#d1d5db',
@@ -745,7 +745,7 @@ async function loadStats() {
trendData: resp.trendData,
hourlyDistribution: resp.hourlyDistribution,
timeTrendData: resp.timeTrendData,
funnelData: resp.funnelData,
statusDistribution: resp.statusDistribution,
heatmapData: resp.heatmapData,
functionTypeRanking: resp.functionTypeRanking,
monthlyTrendData: resp.monthlyTrendData,