分离识别结果标签页；限制 DMA 数量最大数量
This commit is contained in:
JIANG
@@ -0,0 +1,258 @@
|
||||
"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 { 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 =
|
||||
(result.scheme_detail as any)?.algorithm_params?.q_sum_unit ||
|
||||
"m3/s";
|
||||
return val !== undefined
|
||||
? `${Number(val).toFixed(3)} ${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;
|
||||
return maxL !== undefined
|
||||
? `${Number(maxL).toFixed(3)} m3/s`
|
||||
: "-";
|
||||
})()}
|
||||
</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 }}
|
||||
>
|
||||
漏损量 (m3/s)
|
||||
</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" }}
|
||||
>
|
||||
{row.LeakageFlow_m3_per_s.toFixed(3)}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default RecognitionResults;
|
||||
Reference in New Issue
Block a user