分离识别结果标签页；限制 DMA 数量最大数量
This commit is contained in:
JIANG
@@ -120,11 +120,19 @@ const AnalysisParameters: React.FC<Props> = ({ onResult }) => {
|
||||
value={dmaCount}
|
||||
onChange={(e) => {
|
||||
const value = Number.parseInt(e.target.value, 10);
|
||||
setDmaCount(Number.isNaN(value) ? 5 : Math.max(3, value));
|
||||
// Limit between 3 and 10
|
||||
if (Number.isNaN(value)) {
|
||||
setDmaCount(5);
|
||||
} else if (value > 10) {
|
||||
setDmaCount(10);
|
||||
} else {
|
||||
setDmaCount(Math.max(3, value));
|
||||
}
|
||||
}}
|
||||
fullWidth
|
||||
size="small"
|
||||
inputProps={{ min: 3, step: 1 }}
|
||||
inputProps={{ min: 3, max: 10, step: 1 }}
|
||||
helperText="DMA 数量限制为 3-10 个"
|
||||
/>
|
||||
</Box>
|
||||
|
||||
|
||||
@@ -9,12 +9,6 @@ import {
|
||||
Typography,
|
||||
IconButton,
|
||||
Tooltip,
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableRow,
|
||||
Chip,
|
||||
} from "@mui/material";
|
||||
import {
|
||||
Analytics as AnalyticsIcon,
|
||||
@@ -23,7 +17,6 @@ import {
|
||||
ChevronRight,
|
||||
FormatListBulleted,
|
||||
} from "@mui/icons-material";
|
||||
import dayjs from "dayjs";
|
||||
import { Circle as CircleStyle, Fill, Stroke, Style } from "ol/style";
|
||||
import VectorLayer from "ol/layer/Vector";
|
||||
import VectorSource from "ol/source/Vector";
|
||||
@@ -33,6 +26,8 @@ import { useMap } from "@app/OlMap/MapComponent";
|
||||
import StyleLegend from "@app/OlMap/Controls/StyleLegend";
|
||||
import AnalysisParameters from "./AnalysisParameters";
|
||||
import SchemeQuery from "./SchemeQuery";
|
||||
import RecognitionResults from "./RecognitionResults";
|
||||
import { getAreaColor } from "./utils";
|
||||
import { LeakageResultDetail } from "./types";
|
||||
|
||||
const TabPanel = ({
|
||||
@@ -49,27 +44,7 @@ const TabPanel = ({
|
||||
</div>
|
||||
);
|
||||
|
||||
const AREA_COLORS = [
|
||||
"#2563eb",
|
||||
"#7c3aed",
|
||||
"#0891b2",
|
||||
"#16a34a",
|
||||
"#ca8a04",
|
||||
"#dc2626",
|
||||
"#ea580c",
|
||||
"#0f766e",
|
||||
"#4338ca",
|
||||
"#be123c",
|
||||
];
|
||||
|
||||
const getAreaColor = (areaId: string | number | undefined) => {
|
||||
const text = String(areaId ?? "");
|
||||
let hash = 0;
|
||||
for (let i = 0; i < text.length; i += 1) {
|
||||
hash = (hash * 31 + text.charCodeAt(i)) >>> 0;
|
||||
}
|
||||
return AREA_COLORS[hash % AREA_COLORS.length];
|
||||
};
|
||||
|
||||
const DMALeakDetectionPanel: React.FC = () => {
|
||||
const map = useMap();
|
||||
@@ -79,12 +54,6 @@ const DMALeakDetectionPanel: React.FC = () => {
|
||||
const [loadedResult, setLoadedResult] = useState<LeakageResultDetail | null>(null);
|
||||
const [nodeLayer, setNodeLayer] = useState<VectorLayer<VectorSource> | null>(null);
|
||||
|
||||
const sortedRows = useMemo(() => {
|
||||
if (!result?.rows) return [];
|
||||
return [...result.rows].sort(
|
||||
(a, b) => b.LeakageFlow_m3_per_s - a.LeakageFlow_m3_per_s,
|
||||
);
|
||||
}, [result]);
|
||||
const drawerWidth = 450;
|
||||
const panelTitle = "DMA漏损识别";
|
||||
const activeAreas = loadedResult?.areas ?? [];
|
||||
@@ -262,150 +231,7 @@ const DMALeakDetectionPanel: React.FC = () => {
|
||||
<SchemeQuery onViewResult={handleViewResult} />
|
||||
</TabPanel>
|
||||
<TabPanel value={tab} index={2}>
|
||||
{!result || !sortedRows.length ? (
|
||||
<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>
|
||||
) : (
|
||||
<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>
|
||||
)}
|
||||
<RecognitionResults result={result} />
|
||||
</TabPanel>
|
||||
</Box>
|
||||
</Drawer>
|
||||
|
||||
@@ -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;
|
||||
@@ -0,0 +1,21 @@
|
||||
export const AREA_COLORS = [
|
||||
"#2563eb",
|
||||
"#7c3aed",
|
||||
"#0891b2",
|
||||
"#16a34a",
|
||||
"#ca8a04",
|
||||
"#dc2626",
|
||||
"#ea580c",
|
||||
"#0f766e",
|
||||
"#4338ca",
|
||||
"#be123c",
|
||||
];
|
||||
|
||||
export const getAreaColor = (areaId: string | number | undefined) => {
|
||||
const text = String(areaId ?? "");
|
||||
let hash = 0;
|
||||
for (let i = 0; i < text.length; i += 1) {
|
||||
hash = (hash * 31 + text.charCodeAt(i)) >>> 0;
|
||||
}
|
||||
return AREA_COLORS[hash % AREA_COLORS.length];
|
||||
};
|
||||
Reference in New Issue
Block a user