分离识别结果标签页；限制 DMA 数量最大数量

src/components/olmap/DMALeakDetection/AnalysisParameters.tsx

@@ -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>
 

src/components/olmap/DMALeakDetection/DMALeakDetectionPanel.tsx

@@ -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 ? (
+            <RecognitionResults result={result} />
-              <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>
-            )}
           </TabPanel>
         </Box>
       </Drawer>

src/components/olmap/DMALeakDetection/RecognitionResults.tsx

@@ -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;

src/components/olmap/DMALeakDetection/utils.ts

@@ -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];
+};