JIANG
263 lines
8.7 KiB
TypeScript
263 lines
8.7 KiB
TypeScript
"use client";
|
|
|
|
import React, { useMemo } from "react";
|
|
import {
|
|
Box,
|
|
Typography,
|
|
Chip,
|
|
Table,
|
|
TableBody,
|
|
TableCell,
|
|
TableHead,
|
|
TableRow,
|
|
} from "@mui/material";
|
|
import { FormatListBulleted } from "@mui/icons-material";
|
|
import dayjs from "dayjs";
|
|
import { getAreaColor } from "./utils";
|
|
import { FLOW_DISPLAY_UNIT, toM3h } from "@utils/units";
|
|
import { LeakageResultDetail } from "./types";
|
|
|
|
interface Props {
|
|
result: LeakageResultDetail | null;
|
|
}
|
|
|
|
const RecognitionResults: React.FC<Props> = ({ result }) => {
|
|
const sortedRows = useMemo(() => {
|
|
if (!result?.rows) return [];
|
|
return [...result.rows].sort(
|
|
(a, b) => b.LeakageFlow_m3_per_s - a.LeakageFlow_m3_per_s,
|
|
);
|
|
}, [result]);
|
|
|
|
if (!result || !sortedRows.length) {
|
|
return (
|
|
<Box className="flex flex-col items-center justify-center h-full text-gray-400 p-4">
|
|
<Box className="mb-4">
|
|
<svg
|
|
width="80"
|
|
height="80"
|
|
viewBox="0 0 80 80"
|
|
fill="none"
|
|
className="opacity-40"
|
|
>
|
|
<rect
|
|
x="10"
|
|
y="20"
|
|
width="60"
|
|
height="45"
|
|
rx="2"
|
|
stroke="currentColor"
|
|
strokeWidth="2"
|
|
/>
|
|
<line
|
|
x1="10"
|
|
y1="30"
|
|
x2="70"
|
|
y2="30"
|
|
stroke="currentColor"
|
|
strokeWidth="2"
|
|
/>
|
|
</svg>
|
|
</Box>
|
|
<Typography variant="body2">暂无识别结果</Typography>
|
|
<Typography variant="body2" className="mt-1">
|
|
请先加载方案或执行识别分析
|
|
</Typography>
|
|
</Box>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<Box className="h-full overflow-auto p-1">
|
|
{/* 方案详情卡片 */}
|
|
<Box className="mb-4 space-y-3">
|
|
<Box className="flex items-center justify-between px-1">
|
|
<Box className="flex items-center gap-2">
|
|
<Box className="w-1 h-4 bg-blue-600 rounded-full" />
|
|
<Typography
|
|
variant="h6"
|
|
className="font-bold text-gray-900 truncate"
|
|
sx={{ fontSize: "1.1rem" }}
|
|
title={result.scheme_name || ""}
|
|
>
|
|
{result.scheme_name || "漏损识别结果"}
|
|
</Typography>
|
|
</Box>
|
|
{result.username && (
|
|
<Chip
|
|
label={result.username}
|
|
size="small"
|
|
sx={{
|
|
height: 24,
|
|
backgroundColor: "#f3f4f6",
|
|
color: "#4b5563",
|
|
border: "none",
|
|
fontWeight: 500,
|
|
}}
|
|
/>
|
|
)}
|
|
</Box>
|
|
|
|
<Box className="grid grid-cols-2 gap-3">
|
|
{/* 方案时间 */}
|
|
<Box className="bg-gradient-to-br from-blue-50 to-blue-100 rounded-lg p-3 border border-blue-200 shadow-sm">
|
|
<Typography
|
|
variant="caption"
|
|
className="text-blue-700 font-semibold block mb-1 text-xs uppercase tracking-wide"
|
|
>
|
|
方案时间
|
|
</Typography>
|
|
<Typography variant="body2" className="font-bold text-blue-900">
|
|
{dayjs(result.scheme_start_time || result.create_time).format(
|
|
"MM-DD HH:mm",
|
|
)}
|
|
</Typography>
|
|
</Box>
|
|
|
|
{/* 总漏损流量 */}
|
|
<Box className="bg-gradient-to-br from-orange-50 to-orange-100 rounded-lg p-3 border border-orange-200 shadow-sm">
|
|
<Typography
|
|
variant="caption"
|
|
className="text-orange-700 font-semibold block mb-1 text-xs uppercase tracking-wide"
|
|
>
|
|
总漏损流量
|
|
</Typography>
|
|
<Typography variant="body2" className="font-bold text-orange-900">
|
|
{(() => {
|
|
const val = (result.scheme_detail as any)?.algorithm_params
|
|
?.q_sum;
|
|
const unit = String(
|
|
(result.scheme_detail as any)?.algorithm_params?.q_sum_unit ||
|
|
"m3/s",
|
|
);
|
|
const qSumM3h = toM3h(Number(val), unit);
|
|
return Number.isFinite(qSumM3h)
|
|
? `${qSumM3h.toFixed(3)} ${FLOW_DISPLAY_UNIT}`
|
|
: "-";
|
|
})()}
|
|
</Typography>
|
|
</Box>
|
|
|
|
{/* 分区数量 */}
|
|
<Box className="bg-gradient-to-br from-green-50 to-green-100 rounded-lg p-3 border border-green-200 shadow-sm">
|
|
<Typography
|
|
variant="caption"
|
|
className="text-green-700 font-semibold block mb-1 text-xs uppercase tracking-wide"
|
|
>
|
|
分区数量
|
|
</Typography>
|
|
<Typography variant="body2" className="font-bold text-green-900">
|
|
{(result.scheme_detail as any)?.result_summary?.area_count ??
|
|
result.areas?.length ??
|
|
0}{" "}
|
|
个
|
|
</Typography>
|
|
</Box>
|
|
|
|
{/* 最大漏损 */}
|
|
<Box className="bg-gradient-to-br from-purple-50 to-purple-100 rounded-lg p-3 border border-purple-200 shadow-sm">
|
|
<Typography
|
|
variant="caption"
|
|
className="text-purple-700 font-semibold block mb-1 text-xs uppercase tracking-wide"
|
|
>
|
|
最大漏损
|
|
</Typography>
|
|
<Typography variant="body2" className="font-bold text-purple-900">
|
|
{(() => {
|
|
const maxL = (result.scheme_detail as any)?.result_summary
|
|
?.max_leakage;
|
|
const maxLeakageM3h = toM3h(Number(maxL), "m3/s");
|
|
return Number.isFinite(maxLeakageM3h)
|
|
? `${maxLeakageM3h.toFixed(3)} ${FLOW_DISPLAY_UNIT}`
|
|
: "-";
|
|
})()}
|
|
</Typography>
|
|
</Box>
|
|
</Box>
|
|
</Box>
|
|
|
|
{/* 漏损列表 */}
|
|
<Box className="rounded-xl border border-gray-100 bg-white shadow-sm overflow-hidden">
|
|
<Box className="px-4 py-3 border-b border-gray-100 flex items-center justify-between bg-white">
|
|
<Box className="flex items-center gap-2">
|
|
<FormatListBulleted className="text-blue-600 w-5 h-5" />
|
|
<Typography variant="subtitle1" className="font-bold text-gray-800">
|
|
区域漏损列表
|
|
</Typography>
|
|
</Box>
|
|
<Chip
|
|
size="small"
|
|
label={`${sortedRows.length} 条`}
|
|
sx={{
|
|
height: 22,
|
|
backgroundColor: "rgba(37, 99, 235, 0.08)",
|
|
color: "#2563eb",
|
|
fontWeight: 600,
|
|
fontSize: "0.75rem",
|
|
border: "none",
|
|
}}
|
|
/>
|
|
</Box>
|
|
<Table size="small">
|
|
<TableHead>
|
|
<TableRow sx={{ backgroundColor: "#f8fafc" }}>
|
|
<TableCell
|
|
sx={{ fontWeight: 600, color: "#64748b", py: 1.5, pl: 3 }}
|
|
>
|
|
区域
|
|
</TableCell>
|
|
<TableCell
|
|
align="right"
|
|
sx={{ fontWeight: 600, color: "#64748b", py: 1.5 }}
|
|
>
|
|
漏损量占比 (%)
|
|
</TableCell>
|
|
<TableCell
|
|
align="right"
|
|
sx={{ fontWeight: 600, color: "#64748b", py: 1.5, pr: 3 }}
|
|
>
|
|
漏损量 ({FLOW_DISPLAY_UNIT})
|
|
</TableCell>
|
|
</TableRow>
|
|
</TableHead>
|
|
<TableBody>
|
|
{sortedRows.map((row) => (
|
|
<TableRow
|
|
key={row.Area}
|
|
hover
|
|
sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
|
|
>
|
|
<TableCell sx={{ pl: 3, py: 1.2 }}>
|
|
<Box className="flex items-center gap-2">
|
|
<Box
|
|
className="w-2 h-2 rounded-full"
|
|
sx={{ backgroundColor: getAreaColor(row.Area) }}
|
|
/>
|
|
<Typography
|
|
variant="body2"
|
|
className="font-medium text-gray-700"
|
|
>
|
|
{row.Area}
|
|
</Typography>
|
|
</Box>
|
|
</TableCell>
|
|
<TableCell align="right" sx={{ py: 1.2, color: "#475569" }}>
|
|
{(row.LeakageRatio * 100).toFixed(3)}
|
|
</TableCell>
|
|
<TableCell
|
|
align="right"
|
|
sx={{ pr: 3, py: 1.2, fontWeight: 500, color: "#334155" }}
|
|
>
|
|
{toM3h(Number(row.LeakageFlow_m3_per_s), "m3/s").toFixed(3)}
|
|
</TableCell>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
</Box>
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
export default RecognitionResults;
|