duxingchen/track
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(analytics): 柱色对齐图例、刷新智能定位 tab、视图更名

Browse Source 
- custom series 补 itemStyle.color，使柱色与 legend/tooltip 色点一致
- activeTab 根据 URL 参数智能初始化（选人→人员视图，选设备→轨迹流转）
- 视图及页头文案从「个人能力图谱/设备流转对比」改为「人员视图/轨迹流转」
This commit is contained in:
duxingchen
2026-08-14 14:49:56 +08:00
parent 31d9a8781a
commit 00741ae288
1 changed files with 15 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
frontend/src/pages/admin/AnalyticsDashboard.tsx
View File

@ -74,7 +74,13 @@ export default function AnalyticsDashboard() {
(searchParams.get("product_sns") || searchParams.get("product_sn") || searchParams.get("sn") || "")
.split(",").filter(Boolean),
);
const [activeTab, setActiveTab] = useState("capability");
const [activeTab, setActiveTab] = useState<"capability" | "flow">(() => {
// 根据 URL 参数智能判断初始 tab：选了人 → 个人能力图谱；没选人但选了设备 → 设备流转对比
const hasAssignee = (searchParams.get("assignee_id") || "").split(",").filter(Boolean).length > 0;
const hasDevice = (searchParams.get("product_sns") || searchParams.get("product_sn") || searchParams.get("sn") || "")
.split(",").filter(Boolean).length > 0;
return !hasAssignee && hasDevice ? "flow" : "capability";
});
// ─── 下拉选项 + 数据 ─────────────────────────────────────
const [options, setOptions] = useState<AnalyticsOptions>({ assignees: [], spec_models: [], devices: [] });
@ -425,6 +431,7 @@ export default function AnalyticsDashboard() {
name: s.name,
type: "custom" as const,
z: 2,
itemStyle: { color: BRANCH_COLORS[index % BRANCH_COLORS.length] },
dimensions: ['device', 'start', 'end', 'task', 'duration', 'is_main'],
encode: { x: 0, y: [1, 2] },
renderItem: (params: any, api: any) => {
@ -477,7 +484,7 @@ export default function AnalyticsDashboard() {
<div className="flex flex-wrap items-center justify-between gap-3">
<div>
<h2 className="text-xl font-bold text-gray-800">📊 效能分析看板</h2>
<p className="mt-0.5 text-sm text-gray-400">个人能力图谱 / 设备流转对比 · ECharts 可视化</p>
<p className="mt-0.5 text-sm text-gray-400">人员视图 / 轨迹流转 · ECharts 可视化</p>
</div>
</div>
@ -643,12 +650,12 @@ export default function AnalyticsDashboard() {
label: (
<span className="flex items-center gap-1.5">
<Users className="h-3.5 w-3.5" />
个人能力图谱
人员视图
</span>
),
children: (
<div className="rounded-xl bg-white p-4 shadow-sm">
<h3 className="mb-2 text-sm font-semibold text-gray-700">个人能力图谱（单台设备耗时 · 点击柱子查看备注）</h3>
<h3 className="mb-2 text-sm font-semibold text-gray-700">人员视图（单台设备耗时 · 点击柱子查看备注）</h3>
{capabilityLoading && !capability ? (
<div className="flex h-[420px] items-center justify-center">
<Loader2 className="h-8 w-8 animate-spin text-blue-500" />
@ -656,7 +663,7 @@ export default function AnalyticsDashboard() {
) : capabilityEmpty ? (
<div className="flex h-[420px] items-center justify-center">
<Empty
description={assigneeIds.length === 0 ? "请先选择人员查看能力图谱" : "暂无数据"}
description={assigneeIds.length === 0 ? "请先选择人员查看" : "暂无数据"}
/>
</div>
) : (
@ -674,12 +681,12 @@ export default function AnalyticsDashboard() {
label: (
<span className="flex items-center gap-1.5">
<GitBranch className="h-3.5 w-3.5" />
设备流转对比
轨迹流转
</span>
),
children: (
<div className="rounded-xl bg-white p-4 shadow-sm">
<h3 className="mb-2 text-sm font-semibold text-gray-700">设备生命周期时间轴（按人区间 · 并行任务并排显示）</h3>
<h3 className="mb-2 text-sm font-semibold text-gray-700">轨迹流转（按人区间 · 并行任务并排显示）</h3>
{flowLoading && !flow ? (
<div className="flex h-[380px] items-center justify-center">
<Loader2 className="h-8 w-8 animate-spin text-blue-500" />
@ -687,7 +694,7 @@ export default function AnalyticsDashboard() {
) : flowEmpty ? (
<div className="flex h-[380px] items-center justify-center">
<Empty
description={specModels.length === 0 && productSns.length === 0 ? "请先选择规格型号或输入设备身份证查看流转" : "暂无数据"}
description={specModels.length === 0 && productSns.length === 0 ? "请先选择规格型号或输入设备身份证查看流转轨迹" : "暂无数据"}
/>
</div>
) : (