实现DMA漏损识别面板整体设计

src/app/(main)/hydraulic-simulation/dma-leak-detection/loading.tsx

@@ -0,0 +1,5 @@
+import { MapSkeleton } from "@components/loading/MapSkeleton";
+
+export default function Loading() {
+  return <MapSkeleton />;
+}

src/app/(main)/hydraulic-simulation/dma-leak-detection/page.tsx

@@ -0,0 +1,20 @@
+"use client";
+
+import MapComponent from "@app/OlMap/MapComponent";
+import MapToolbar from "@app/OlMap/Controls/Toolbar";
+import DMALeakDetectionPanel from "@/components/olmap/DMALeakDetection/DMALeakDetectionPanel";
+
+export default function Home() {
+  return (
+    <div className="relative w-full h-full overflow-hidden">
+      <MapComponent>
+        <MapToolbar
+          queryType="scheme"
+          schemeType="dma_leak_identification"
+          hiddenButtons={["style"]}
+        />
+        <DMALeakDetectionPanel />
+      </MapComponent>
+    </div>
+  );
+}

src/app/OlMap/Controls/StyleLegend.tsx

@@ -10,6 +10,9 @@ interface LegendStyleConfig {
   type: string; // 图例类型
   dimensions: number[]; // 尺寸大小
   breaks: number[]; // 分段值
+  labels?: string[]; // 可选标签（用于离散分类）
+  columns?: number;
+  itemsPerColumn?: number;
 }
 // 图例组件
 // 该组件用于显示图层样式的图例，包含属性名称、颜色、尺寸和分段值等信息
@@ -24,6 +27,9 @@ const StyleLegend: React.FC<LegendStyleConfig> = ({
   type, // 图例类型
   dimensions,
   breaks,
+  labels,
+  columns = 1,
+  itemsPerColumn,
 }) => {
   return (
     <Box
@@ -33,9 +39,26 @@ const StyleLegend: React.FC<LegendStyleConfig> = ({
       <Typography variant="subtitle2" gutterBottom>
         {layerName} - {property}
       </Typography>
-      {[...Array(breaks.length)].map((_, index) => {
-        const color = colors[index]; // 默认颜色为黑色
-        const dimension = dimensions[index]; // 默认尺寸为16
+      <Box
+        sx={{
+          display: "grid",
+          gridTemplateColumns:
+            itemsPerColumn && itemsPerColumn > 0
+              ? undefined
+              : `repeat(${Math.max(1, columns)}, minmax(0, 1fr))`,
+          gridTemplateRows:
+            itemsPerColumn && itemsPerColumn > 0
+              ? `repeat(${itemsPerColumn}, minmax(0, auto))`
+              : undefined,
+          gridAutoFlow:
+            itemsPerColumn && itemsPerColumn > 0 ? "column" : undefined,
+          columnGap: 1.5,
+          rowGap: 0.5,
+        }}
+      >
+        {[...Array(breaks.length)].map((_, index) => {
+          const color = colors[index]; // 默认颜色为黑色
+          const dimension = dimensions[index]; // 默认尺寸为16
 
         // // 处理第一个区间（小于 breaks[0]）
         // if (index === 0) {
@@ -66,37 +89,39 @@ const StyleLegend: React.FC<LegendStyleConfig> = ({
         // }
 
         // 处理中间区间（breaks[index] - breaks[index + 1]）
-        if (index + 1 < breaks.length) {
-          const prevValue = breaks[index];
-          const currentValue = breaks[index + 1];
-          return (
-            <Box key={index} className="flex items-center gap-2 mb-1">
-              <Box
-                sx={
-                  type === "point"
-                    ? {
-                        width: dimension,
-                        height: dimension,
-                        borderRadius: "50%",
-                        backgroundColor: color,
-                      }
-                    : {
-                        width: 16,
-                        height: dimension,
-                        backgroundColor: color,
-                        border: `1px solid ${color}`,
-                      }
-                }
-              />
-              <Typography variant="caption" className="text-xs">
-                {prevValue?.toFixed(1)} - {currentValue?.toFixed(1)}
-              </Typography>
-            </Box>
-          );
-        }
+          if (index + 1 < breaks.length) {
+            const prevValue = breaks[index];
+            const currentValue = breaks[index + 1];
+            return (
+              <Box key={index} className="flex items-center gap-2">
+                <Box
+                  sx={
+                    type === "point"
+                      ? {
+                          width: dimension,
+                          height: dimension,
+                          borderRadius: "50%",
+                          backgroundColor: color,
+                        }
+                      : {
+                          width: 16,
+                          height: dimension,
+                          backgroundColor: color,
+                          border: `1px solid ${color}`,
+                        }
+                  }
+                />
+                <Typography variant="caption" className="text-xs">
+                  {labels?.[index] ??
+                    `${prevValue?.toFixed(1)} - ${currentValue?.toFixed(1)}`}
+                </Typography>
+              </Box>
+            );
+          }
 
-        return null;
-      })}
+          return null;
+        })}
+      </Box>
     </Box>
   );
 };

src/app/_refine_context.tsx

@@ -180,6 +180,15 @@ const App = (props: React.PropsWithChildren<AppProps>) => {
                     label: "爆管分析定位",
                   },
                 },
+                {
+                  name: "DMA漏损识别",
+                  list: "/hydraulic-simulation/dma-leak-detection",
+                  meta: {
+                    parent: "Hydraulic Simulation",
+                    icon: <TbLocationPin className="w-6 h-6" />,
+                    label: "DMA漏损识别",
+                  },
+                },
                 {
                   name: "水质模拟",
                   list: "/hydraulic-simulation/water-quality-simulation",