fix(analytics): 柱色对齐图例、刷新智能定位 tab、视图更名
- custom series 补 itemStyle.color,使柱色与 legend/tooltip 色点一致 - activeTab 根据 URL 参数智能初始化(选人→人员视图,选设备→轨迹流转) - 视图及页头文案从「个人能力图谱/设备流转对比」改为「人员视图/轨迹流转」
This commit is contained in:
@ -74,7 +74,13 @@ export default function AnalyticsDashboard() {
|
|||||||
(searchParams.get("product_sns") || searchParams.get("product_sn") || searchParams.get("sn") || "")
|
(searchParams.get("product_sns") || searchParams.get("product_sn") || searchParams.get("sn") || "")
|
||||||
.split(",").filter(Boolean),
|
.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: [] });
|
const [options, setOptions] = useState<AnalyticsOptions>({ assignees: [], spec_models: [], devices: [] });
|
||||||
@ -425,6 +431,7 @@ export default function AnalyticsDashboard() {
|
|||||||
name: s.name,
|
name: s.name,
|
||||||
type: "custom" as const,
|
type: "custom" as const,
|
||||||
z: 2,
|
z: 2,
|
||||||
|
itemStyle: { color: BRANCH_COLORS[index % BRANCH_COLORS.length] },
|
||||||
dimensions: ['device', 'start', 'end', 'task', 'duration', 'is_main'],
|
dimensions: ['device', 'start', 'end', 'task', 'duration', 'is_main'],
|
||||||
encode: { x: 0, y: [1, 2] },
|
encode: { x: 0, y: [1, 2] },
|
||||||
renderItem: (params: any, api: any) => {
|
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 className="flex flex-wrap items-center justify-between gap-3">
|
||||||
<div>
|
<div>
|
||||||
<h2 className="text-xl font-bold text-gray-800">📊 效能分析看板</h2>
|
<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>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -643,12 +650,12 @@ export default function AnalyticsDashboard() {
|
|||||||
label: (
|
label: (
|
||||||
<span className="flex items-center gap-1.5">
|
<span className="flex items-center gap-1.5">
|
||||||
<Users className="h-3.5 w-3.5" />
|
<Users className="h-3.5 w-3.5" />
|
||||||
个人能力图谱
|
人员视图
|
||||||
</span>
|
</span>
|
||||||
),
|
),
|
||||||
children: (
|
children: (
|
||||||
<div className="rounded-xl bg-white p-4 shadow-sm">
|
<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 ? (
|
{capabilityLoading && !capability ? (
|
||||||
<div className="flex h-[420px] items-center justify-center">
|
<div className="flex h-[420px] items-center justify-center">
|
||||||
<Loader2 className="h-8 w-8 animate-spin text-blue-500" />
|
<Loader2 className="h-8 w-8 animate-spin text-blue-500" />
|
||||||
@ -656,7 +663,7 @@ export default function AnalyticsDashboard() {
|
|||||||
) : capabilityEmpty ? (
|
) : capabilityEmpty ? (
|
||||||
<div className="flex h-[420px] items-center justify-center">
|
<div className="flex h-[420px] items-center justify-center">
|
||||||
<Empty
|
<Empty
|
||||||
description={assigneeIds.length === 0 ? "请先选择人员查看能力图谱" : "暂无数据"}
|
description={assigneeIds.length === 0 ? "请先选择人员查看" : "暂无数据"}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
@ -674,12 +681,12 @@ export default function AnalyticsDashboard() {
|
|||||||
label: (
|
label: (
|
||||||
<span className="flex items-center gap-1.5">
|
<span className="flex items-center gap-1.5">
|
||||||
<GitBranch className="h-3.5 w-3.5" />
|
<GitBranch className="h-3.5 w-3.5" />
|
||||||
设备流转对比
|
轨迹流转
|
||||||
</span>
|
</span>
|
||||||
),
|
),
|
||||||
children: (
|
children: (
|
||||||
<div className="rounded-xl bg-white p-4 shadow-sm">
|
<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 ? (
|
{flowLoading && !flow ? (
|
||||||
<div className="flex h-[380px] items-center justify-center">
|
<div className="flex h-[380px] items-center justify-center">
|
||||||
<Loader2 className="h-8 w-8 animate-spin text-blue-500" />
|
<Loader2 className="h-8 w-8 animate-spin text-blue-500" />
|
||||||
@ -687,7 +694,7 @@ export default function AnalyticsDashboard() {
|
|||||||
) : flowEmpty ? (
|
) : flowEmpty ? (
|
||||||
<div className="flex h-[380px] items-center justify-center">
|
<div className="flex h-[380px] items-center justify-center">
|
||||||
<Empty
|
<Empty
|
||||||
description={specModels.length === 0 && productSns.length === 0 ? "请先选择规格型号或输入设备身份证查看流转" : "暂无数据"}
|
description={specModels.length === 0 && productSns.length === 0 ? "请先选择规格型号或输入设备身份证查看流转轨迹" : "暂无数据"}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
|
|||||||
Reference in New Issue
Block a user