356 lines
15 KiB
TypeScript
356 lines
15 KiB
TypeScript
"use client";
|
||
|
||
import React, { useState } from "react";
|
||
import {
|
||
Box,
|
||
Button,
|
||
Card,
|
||
CardContent,
|
||
Checkbox,
|
||
Chip,
|
||
Collapse,
|
||
FormControlLabel,
|
||
IconButton,
|
||
Tooltip,
|
||
Typography,
|
||
} from "@mui/material";
|
||
import { InfoOutlined as InfoIcon } from "@mui/icons-material";
|
||
import { DatePicker } from "@mui/x-date-pickers/DatePicker";
|
||
import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
|
||
import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
|
||
import dayjs, { Dayjs } from "dayjs";
|
||
import "dayjs/locale/zh-cn";
|
||
import { useNotification } from "@refinedev/core";
|
||
import { api } from "@/lib/api";
|
||
import { NETWORK_NAME } from "@config/config";
|
||
import {
|
||
BurstDetectionResult,
|
||
BurstDetectionSchemeDetail,
|
||
BurstDetectionSchemeRecord,
|
||
} from "./types";
|
||
|
||
interface Props {
|
||
onViewResult: (result: BurstDetectionResult) => void;
|
||
schemes?: BurstDetectionSchemeRecord[];
|
||
onSchemesChange?: (schemes: BurstDetectionSchemeRecord[]) => void;
|
||
}
|
||
|
||
const SchemeQuery: React.FC<Props> = ({ onViewResult, schemes: externalSchemes, onSchemesChange }) => {
|
||
const { open } = useNotification();
|
||
const [queryAll, setQueryAll] = useState(true);
|
||
const [queryDate, setQueryDate] = useState<Dayjs | null>(dayjs());
|
||
const [internalSchemes, setInternalSchemes] = useState<BurstDetectionSchemeRecord[]>([]);
|
||
const [loading, setLoading] = useState(false);
|
||
const [expandedId, setExpandedId] = useState<number | null>(null);
|
||
const schemes = externalSchemes !== undefined ? externalSchemes : internalSchemes;
|
||
const setSchemes = onSchemesChange || setInternalSchemes;
|
||
|
||
const buildDisplayResult = (
|
||
scheme: Pick<BurstDetectionSchemeRecord, "scheme_name" | "username" | "create_time">,
|
||
detail?: BurstDetectionSchemeDetail,
|
||
): BurstDetectionResult | null => {
|
||
const payload = detail?.result_payload;
|
||
const summary = detail?.result_summary;
|
||
const fallbackLatestDay = summary?.latest_day;
|
||
|
||
if (!payload && !summary) return null;
|
||
|
||
return {
|
||
network: payload?.network ?? detail?.network ?? NETWORK_NAME,
|
||
sensor_nodes: payload?.sensor_nodes ?? detail?.sensor_nodes ?? [],
|
||
observed_source: payload?.observed_source ?? detail?.observed_source ?? "stored_scheme",
|
||
sample_count: payload?.sample_count ?? 0,
|
||
points_per_day: payload?.points_per_day ?? detail?.algorithm_params?.points_per_day ?? 1440,
|
||
day_count: payload?.day_count ?? payload?.rows?.length ?? 0,
|
||
rows: payload?.rows ?? (fallbackLatestDay ? [fallbackLatestDay] : []),
|
||
summary:
|
||
payload?.summary ??
|
||
(summary
|
||
? summary
|
||
: {
|
||
burst_detected: false,
|
||
latest_day: fallbackLatestDay ?? { Day: 0, Score: 0, Prediction: 1, IsBurst: false },
|
||
most_anomalous_day: 0,
|
||
anomaly_days: [],
|
||
anomaly_day_count: 0,
|
||
latest_sensor_rankings: [],
|
||
}),
|
||
scada_window: payload?.scada_window ?? detail?.scada_window,
|
||
scheme_name: payload?.scheme_name ?? scheme.scheme_name,
|
||
username: payload?.username ?? scheme.username,
|
||
create_time: payload?.create_time ?? scheme.create_time,
|
||
algorithm_params: payload?.algorithm_params ?? detail?.algorithm_params,
|
||
};
|
||
};
|
||
|
||
const handleQuery = async () => {
|
||
setLoading(true);
|
||
try {
|
||
const params: Record<string, string> = { network: NETWORK_NAME };
|
||
if (!queryAll && queryDate) {
|
||
params.query_date = queryDate.startOf("day").toISOString();
|
||
}
|
||
|
||
const response = await api.get("/api/v1/burst-detection/schemes/", { params });
|
||
const nextSchemes = response.data as BurstDetectionSchemeRecord[];
|
||
setSchemes(nextSchemes);
|
||
open?.({
|
||
type: "success",
|
||
message: "查询成功",
|
||
description: `共找到 ${nextSchemes.length} 条侦测记录。`,
|
||
});
|
||
} catch (error: any) {
|
||
open?.({
|
||
type: "error",
|
||
message: "查询失败",
|
||
description: error?.response?.data?.detail ?? "无法获取侦测方案列表",
|
||
});
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
};
|
||
|
||
const handleViewSchemeResult = async (schemeName: string) => {
|
||
try {
|
||
const response = await api.get(
|
||
`/api/v1/burst-detection/schemes/${encodeURIComponent(schemeName)}`,
|
||
{ params: { network: NETWORK_NAME } },
|
||
);
|
||
const schemeRecord = response.data as BurstDetectionSchemeRecord & {
|
||
result_payload?: BurstDetectionResult;
|
||
};
|
||
const normalizedResult =
|
||
schemeRecord.result_payload ??
|
||
buildDisplayResult(
|
||
{
|
||
scheme_name: schemeRecord.scheme_name,
|
||
username: schemeRecord.username,
|
||
create_time: schemeRecord.create_time,
|
||
},
|
||
schemeRecord.scheme_detail,
|
||
);
|
||
|
||
if (!normalizedResult) {
|
||
throw new Error("方案详情缺少侦测结果数据");
|
||
}
|
||
|
||
onViewResult(normalizedResult);
|
||
open?.({
|
||
type: "success",
|
||
message: "方案加载成功",
|
||
description: `已加载方案：${schemeName}`,
|
||
});
|
||
} catch (error: any) {
|
||
open?.({
|
||
type: "error",
|
||
message: "查看详情失败",
|
||
description: error?.response?.data?.detail ?? error?.message ?? "无法获取方案详情",
|
||
});
|
||
}
|
||
};
|
||
|
||
return (
|
||
<Box className="flex h-full flex-col">
|
||
<Box className="mb-2 rounded bg-gray-50 p-2">
|
||
<Box className="flex items-center justify-between gap-2">
|
||
<Box className="flex items-center gap-2">
|
||
<FormControlLabel
|
||
control={
|
||
<Checkbox
|
||
size="small"
|
||
checked={queryAll}
|
||
onChange={(event) => setQueryAll(event.target.checked)}
|
||
/>
|
||
}
|
||
label={<Typography variant="body2">查询全部</Typography>}
|
||
className="m-0"
|
||
/>
|
||
<LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale="zh-cn">
|
||
<DatePicker
|
||
value={queryDate}
|
||
onChange={setQueryDate}
|
||
disabled={queryAll}
|
||
format="YYYY-MM-DD"
|
||
slotProps={{ textField: { size: "small", sx: { width: 180 } } }}
|
||
/>
|
||
</LocalizationProvider>
|
||
</Box>
|
||
<Button
|
||
variant="contained"
|
||
onClick={handleQuery}
|
||
disabled={loading}
|
||
size="small"
|
||
className="bg-blue-600 hover:bg-blue-700"
|
||
sx={{ minWidth: 80 }}
|
||
>
|
||
{loading ? "查询中..." : "查询"}
|
||
</Button>
|
||
</Box>
|
||
</Box>
|
||
|
||
<Box className="flex-1 overflow-auto">
|
||
{schemes.length === 0 ? (
|
||
<Box className="flex h-full flex-col items-center justify-center text-center text-gray-400">
|
||
<Typography variant="body2">暂无侦测方案</Typography>
|
||
<Typography variant="caption" className="mt-1">
|
||
运行一次展示版侦测后，可在这里回看历史结果。
|
||
</Typography>
|
||
</Box>
|
||
) : (
|
||
<Box className="space-y-2 p-2">
|
||
<Typography variant="caption" className="px-2 text-gray-500">
|
||
共 {schemes.length} 条记录
|
||
</Typography>
|
||
{schemes.map((scheme) => {
|
||
const summary = scheme.scheme_detail?.result_summary;
|
||
const payload = scheme.scheme_detail?.result_payload;
|
||
const isBurst = payload?.summary?.burst_detected ?? summary?.burst_detected ?? false;
|
||
const anomalyDayCount =
|
||
payload?.summary?.anomaly_day_count ?? summary?.anomaly_day_count ?? 0;
|
||
const mostAnomalousDay =
|
||
payload?.summary?.most_anomalous_day ?? summary?.most_anomalous_day ?? "-";
|
||
const sensorCount = payload?.sensor_nodes?.length ?? scheme.scheme_detail?.sensor_nodes?.length ?? 0;
|
||
|
||
return (
|
||
<Card key={scheme.scheme_id} variant="outlined" className="transition-shadow hover:shadow-md">
|
||
<CardContent className="p-3 pb-2 last:pb-3">
|
||
<Box className="mb-2 flex items-start justify-between gap-2">
|
||
<Box className="min-w-0 flex-1">
|
||
<Box className="mb-1 flex items-center gap-2">
|
||
<Typography
|
||
variant="body2"
|
||
className="truncate font-medium"
|
||
title={scheme.scheme_name}
|
||
>
|
||
{scheme.scheme_name}
|
||
</Typography>
|
||
<Chip
|
||
size="small"
|
||
color={isBurst ? "error" : "success"}
|
||
variant="outlined"
|
||
label={isBurst ? "存在异常" : "正常"}
|
||
className="h-5"
|
||
/>
|
||
</Box>
|
||
<Typography variant="caption" className="block text-gray-500">
|
||
创建时间：{dayjs(scheme.create_time).format("YYYY-MM-DD HH:mm")}
|
||
</Typography>
|
||
</Box>
|
||
<Box className="ml-2 flex gap-1">
|
||
<Tooltip title={expandedId === scheme.scheme_id ? "收起详情" : "查看详情"}>
|
||
<IconButton
|
||
size="small"
|
||
onClick={() =>
|
||
setExpandedId(expandedId === scheme.scheme_id ? null : scheme.scheme_id)
|
||
}
|
||
color="primary"
|
||
className="p-1"
|
||
>
|
||
<InfoIcon fontSize="small" />
|
||
</IconButton>
|
||
</Tooltip>
|
||
</Box>
|
||
</Box>
|
||
|
||
<Box className="grid grid-cols-3 gap-2">
|
||
<Box className="rounded bg-gray-50 p-2">
|
||
<Typography variant="caption" className="text-gray-500">
|
||
异常天数
|
||
</Typography>
|
||
<Typography variant="body2" className="font-semibold text-gray-900">
|
||
{anomalyDayCount}
|
||
</Typography>
|
||
</Box>
|
||
<Box className="rounded bg-gray-50 p-2">
|
||
<Typography variant="caption" className="text-gray-500">
|
||
最异常日
|
||
</Typography>
|
||
<Typography variant="body2" className="font-semibold text-gray-900">
|
||
{isBurst
|
||
? typeof mostAnomalousDay === "number"
|
||
? `第 ${mostAnomalousDay} 天`
|
||
: mostAnomalousDay
|
||
: "无"}
|
||
</Typography>
|
||
</Box>
|
||
<Box className="rounded bg-gray-50 p-2">
|
||
<Typography variant="caption" className="text-gray-500">
|
||
测点数
|
||
</Typography>
|
||
<Typography variant="body2" className="font-semibold text-gray-900">
|
||
{sensorCount}
|
||
</Typography>
|
||
</Box>
|
||
</Box>
|
||
|
||
<Collapse in={expandedId === scheme.scheme_id}>
|
||
<Box className="mt-2 border-t border-gray-200 pt-3">
|
||
<Box className="space-y-2 rounded-md bg-gray-50 px-3 py-2">
|
||
<Box className="grid grid-cols-[78px_1fr] items-center gap-x-2">
|
||
<Typography variant="caption" className="text-gray-600">
|
||
数据来源:
|
||
</Typography>
|
||
<Typography variant="caption" className="font-medium text-gray-900">
|
||
{(() => {
|
||
const ds = payload?.data_source;
|
||
const os = payload?.observed_source ?? scheme.scheme_detail?.observed_source;
|
||
if (ds === "simulation") return "模拟数据";
|
||
if (ds === "monitoring") return "监测数据";
|
||
if (os === "simulation_scheme_timerange") return "模拟数据";
|
||
if (os === "backend_timerange") return "监测数据";
|
||
return os || "-";
|
||
})()}
|
||
</Typography>
|
||
</Box>
|
||
<Box className="grid grid-cols-[78px_1fr] items-center gap-x-2">
|
||
<Typography variant="caption" className="text-gray-600">
|
||
时间窗口:
|
||
</Typography>
|
||
<Typography variant="caption" className="font-medium text-gray-900">
|
||
{payload?.scada_window?.start
|
||
? `${dayjs(payload.scada_window.start).format("MM-DD HH:mm")} ~ ${dayjs(
|
||
payload.scada_window.end,
|
||
).format("MM-DD HH:mm")}`
|
||
: "-"}
|
||
</Typography>
|
||
</Box>
|
||
<Box className="grid grid-cols-[78px_1fr] items-center gap-x-2">
|
||
<Typography variant="caption" className="text-gray-600">
|
||
算法参数:
|
||
</Typography>
|
||
<Typography variant="caption" className="font-medium text-gray-900">
|
||
频域截断系数：{scheme.scheme_detail?.algorithm_params?.mu ?? payload?.algorithm_params?.mu ?? "-"}
|
||
，每日采样点数：
|
||
{scheme.scheme_detail?.algorithm_params?.points_per_day ??
|
||
payload?.algorithm_params?.points_per_day ??
|
||
"-"}
|
||
</Typography>
|
||
</Box>
|
||
</Box>
|
||
<Box className="border-t border-gray-100 pt-2">
|
||
<Button
|
||
variant="contained"
|
||
fullWidth
|
||
size="small"
|
||
className="bg-blue-600 hover:bg-blue-700"
|
||
sx={{ textTransform: "none", fontWeight: 500 }}
|
||
onClick={() => handleViewSchemeResult(scheme.scheme_name)}
|
||
>
|
||
查看侦测结果
|
||
</Button>
|
||
</Box>
|
||
</Box>
|
||
</Collapse>
|
||
</CardContent>
|
||
</Card>
|
||
);
|
||
})}
|
||
</Box>
|
||
)}
|
||
</Box>
|
||
</Box>
|
||
);
|
||
};
|
||
|
||
export default SchemeQuery;
|