feat(project): 新增客流统计独立页面

- 新建 /ops/traffic 路由和客流统计页面
- 新建客流 API 模块(全局/设备/区域维度的实时和趋势接口)
- 新建 AreaTree 组件(区域树选择、搜索过滤保留祖先节点、递归获取子孙ID)
- 支持全局总览和按区域查看客流数据
- 今日/昨日小时客流趋势对比曲线图、近7天客流趋势折线图
- 核心指标卡片 + 客流态势分析面板
- 更新旧 API 路径适配新后端接口

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
lzh
2026-02-26 16:52:37 +08:00
parent f1284142ac
commit 9bf042f817
5 changed files with 969 additions and 582 deletions

View File

@@ -0,0 +1,117 @@
import { requestClient } from '#/api/request';
// ==================== 类型定义 ====================
/** 实时客流区域信息 */
export interface TrafficAreaItem {
areaId: number;
areaName: string;
todayIn: number;
todayOut: number;
currentOccupancy: number;
deviceCount: number;
}
/** 全局实时客流响应 */
export interface TrafficRealtimeResp {
totalIn: number;
totalOut: number;
currentOccupancy: number;
areas: TrafficAreaItem[];
hourlyTrend: {
hours: string[];
inData: number[];
outData: number[];
};
yesterdayHourlyTrend?: {
hours: string[];
inData: number[];
outData: number[];
};
message?: string; // 提示信息,如"该区域暂未配置客流设备"
}
/** 客流趋势响应(全局/设备/区域通用) */
export interface TrafficTrendResp {
deviceId?: null | number;
areaId?: null | number;
dates: string[];
inData: number[];
outData: number[];
netData: number[];
totalIn: number;
totalOut: number;
}
/** 设备/区域实时客流响应(单条) */
export interface DeviceTrafficRealtimeResp {
deviceId: number;
deviceName: null | string;
areaId: null | number;
areaName: null | string;
todayIn: number;
todayOut: number;
currentOccupancy: number;
hourlyTrend: {
hours: string[];
inData: number[];
outData: number[];
};
yesterdayHourlyTrend?: {
hours: string[];
inData: number[];
outData: number[];
};
}
/** 趋势查询参数 */
export interface TrafficTrendQuery {
deviceId?: number;
areaId?: number;
areaIds?: string; // 逗号分隔的区域ID列表
startDate?: string; // yyyy-MM-dd
endDate?: string; // yyyy-MM-dd
}
// ==================== 迁移接口(路径变更) ====================
/** 获取全局实时客流数据 */
export function getTrafficRealtime() {
return requestClient.get<TrafficRealtimeResp>('/ops/traffic/realtime');
}
/** 获取全局近7天客流趋势 */
export function getTrafficTrend() {
return requestClient.get<TrafficTrendResp>('/ops/traffic/trend');
}
// ==================== 新增接口 ====================
/** 获取单设备实时客流 */
export function getDeviceRealtime(deviceId: number) {
return requestClient.get<DeviceTrafficRealtimeResp>(
'/ops/traffic/device/realtime',
{ params: { deviceId } },
);
}
/** 获取区域实时客流(汇总,返回与全局一致的结构) */
export function getAreaRealtime(areaIds: number[]) {
return requestClient.get<TrafficRealtimeResp>('/ops/traffic/area/realtime', {
params: { areaIds: areaIds.join(',') },
});
}
/** 获取单设备客流趋势 */
export function getDeviceTrend(params: TrafficTrendQuery) {
return requestClient.get<TrafficTrendResp>('/ops/traffic/device/trend', {
params,
});
}
/** 获取区域客流趋势(汇总) */
export function getAreaTrend(params: TrafficTrendQuery) {
return requestClient.get<TrafficTrendResp>('/ops/traffic/area/trend', {
params,
});
}