统一流量单位为 m³/h，优化相关组件

src/app/OlMap/Controls/Toolbar.tsx

@@ -21,6 +21,7 @@ import { useNotification } from "@refinedev/core";
 
 import { config } from "@/config/config";
 import { apiFetch } from "@/lib/apiFetch";
+import { FLOW_DISPLAY_UNIT } from "@components/olmap/DMALeakDetection/utils";
 
 // 添加接口定义隐藏按钮的props
 interface ToolbarProps {
@@ -427,7 +428,7 @@ const Toolbar: React.FC<ToolbarProps> = ({
     const properties = highlightFeature.getProperties();
     // 计算属性字段，增加 key 字段
     const pipeComputedFields = [
-      { key: "flow", label: "流量", unit: "m³/h" },
+      { key: "flow", label: "流量", unit: `${FLOW_DISPLAY_UNIT}` },
       { key: "friction", label: "摩阻", unit: "" },
       { key: "headloss", label: "水头损失", unit: "m" },
       { key: "unit_headloss", label: "单位水头损失", unit: "m/km" },
@@ -438,7 +439,7 @@ const Toolbar: React.FC<ToolbarProps> = ({
       { key: "velocity", label: "流速", unit: "m/s" },
     ];
     const nodeComputedFields = [
-      { key: "actual_demand", label: "实际需水量", unit: "m³/h" },
+      { key: "actual_demand", label: "实际需水量", unit: `${FLOW_DISPLAY_UNIT}` },
       { key: "total_head", label: "水头", unit: "m" },
       { key: "pressure", label: "压力", unit: "m" },
       { key: "quality", label: "水质", unit: "mg/L" },

src/components/olmap/BurstLocation/AnalysisParameters.tsx

@@ -24,7 +24,7 @@ import dayjs, { Dayjs } from "dayjs";
 import "dayjs/locale/zh-cn";
 import { api } from "@/lib/api";
 import { NETWORK_NAME, config } from "@config/config";
-import { DMA_FLOW_DISPLAY_UNIT, toM3s } from "../DMALeakDetection/utils";
+import { FLOW_DISPLAY_UNIT, toM3s } from "../DMALeakDetection/utils";
 import { BurstLocationResult } from "./types";
 
 interface Props {
@@ -180,7 +180,7 @@ const AnalysisParameters: React.FC<Props> = ({ onResult }) => {
           network: NETWORK_NAME,
           data_source: dataSource,
           scheme_name: schemeName.trim() || undefined,
-          burst_leakage: toM3s(burstLeakage, DMA_FLOW_DISPLAY_UNIT),
+          burst_leakage: toM3s(burstLeakage, FLOW_DISPLAY_UNIT),
           min_dpressure: minDpressure,
           basic_pressure: basicPressure,
           scada_burst_start: burstStartTime.toISOString(),
@@ -325,7 +325,7 @@ const AnalysisParameters: React.FC<Props> = ({ onResult }) => {
 
         <Box className="flex flex-col gap-2">
           <Typography variant="subtitle2" className="mb-1 font-medium">
-            总漏损流量 ({DMA_FLOW_DISPLAY_UNIT})
+            爆管漏损流量 ({FLOW_DISPLAY_UNIT})
           </Typography>
           <TextField
             type="number"

src/components/olmap/BurstLocation/LocationResults.tsx

@@ -6,6 +6,7 @@ import {
   Typography,
   Chip,
   IconButton,
+  Tooltip,
   Table,
   TableBody,
   TableCell,
@@ -28,7 +29,7 @@ import VectorSource from "ol/source/Vector";
 import { Stroke, Style, Circle, Fill } from "ol/style";
 import { bbox, featureCollection } from "@turf/turf";
 import { BurstCandidate, BurstLocationResult } from "./types";
-import { DMA_FLOW_DISPLAY_UNIT } from "../DMALeakDetection/utils";
+import { FLOW_DISPLAY_UNIT } from "../DMALeakDetection/utils";
 
 interface Props {
   result: BurstLocationResult | null;
@@ -127,6 +128,14 @@ const LocationResults: React.FC<Props> = ({ result }) => {
     return base;
   }, [result]);
 
+  const allCandidatePipeIds = useMemo<string[]>(() => {
+    const ids = candidatePipes.map((item) => item.pipe_id);
+    if (result?.located_pipe) {
+      ids.unshift(result.located_pipe);
+    }
+    return Array.from(new Set(ids.filter(Boolean)));
+  }, [candidatePipes, result?.located_pipe]);
+
   useEffect(() => {
     if (!map) return;
 
@@ -263,7 +272,7 @@ const LocationResults: React.FC<Props> = ({ result }) => {
           />
           <MetricCard
             label="估计漏损量"
-            value={`${result.burst_leakage.toFixed(2)} ${DMA_FLOW_DISPLAY_UNIT}`}
+            value={`${result.burst_leakage.toFixed(2)} ${FLOW_DISPLAY_UNIT}`}
             tone="orange"
           />
           <MetricCard
@@ -288,6 +297,7 @@ const LocationResults: React.FC<Props> = ({ result }) => {
               候选管段列表
             </Typography>
           </Box>
+          <Box className="flex items-center gap-1">
             <Chip
               size="small"
               label={`${candidatePipes.length} 条`}
@@ -300,6 +310,19 @@ const LocationResults: React.FC<Props> = ({ result }) => {
                 border: "none",
               }}
             />
+            <Tooltip title="定位所有管段">
+              <span>
+                <IconButton
+                  size="small"
+                  onClick={() => locatePipes(allCandidatePipeIds)}
+                  disabled={allCandidatePipeIds.length === 0}
+                  className="text-blue-600 hover:bg-blue-50 disabled:text-gray-300"
+                >
+                  <LocationOnIcon fontSize="small" />
+                </IconButton>
+              </span>
+            </Tooltip>
+          </Box>
         </Box>
         <Table size="small">
           <TableHead>

src/components/olmap/BurstLocation/SchemeQuery.tsx

@@ -28,7 +28,7 @@ import {
   BurstLocationSchemeDetail,
   BurstSchemeRecord,
 } from "./types";
-import { DMA_FLOW_DISPLAY_UNIT } from "../DMALeakDetection/utils";
+import { FLOW_DISPLAY_UNIT } from "../DMALeakDetection/utils";
 
 interface Props {
   onViewResult: (result: BurstLocationResult) => void;
@@ -302,7 +302,7 @@ const SchemeQuery: React.FC<Props> = ({ onViewResult }) => {
                               漏损量:
                             </Typography>
                             <Typography variant="caption" className="font-medium text-gray-900">
-                              {typeof leakage === "number" ? `${leakage} ${DMA_FLOW_DISPLAY_UNIT}` : "-"}
+                              {typeof leakage === "number" ? `${leakage} ${FLOW_DISPLAY_UNIT}` : "-"}
                             </Typography>
                           </Box>
                           <Box className="grid grid-cols-[78px_1fr] items-center gap-x-2">

src/components/olmap/BurstPipeAnalysis/LocationResults.tsx

@@ -32,6 +32,7 @@ import { toLonLat } from "ol/proj";
 import moment from "moment";
 import "moment-timezone";
 import { LocationResult } from "./types";
+import { FLOW_DISPLAY_UNIT } from "../DMALeakDetection/utils";
 
 interface LocationResultsProps {
   results?: LocationResult[];
@@ -306,7 +307,7 @@ const LocationResults: React.FC<LocationResultsProps> = ({
                   sx={{ fontSize: "0.875rem" }}
                 >
                   {result.leakage !== null
-                    ? `${result.leakage.toFixed(2)} m³/h`
+                    ? `${result.leakage.toFixed(2)} ${FLOW_DISPLAY_UNIT}`
                     : "N/A"}
                 </Typography>
               </Box>

src/components/olmap/DMALeakDetection/AnalysisParameters.tsx

@@ -20,7 +20,7 @@ import { useNotification } from "@refinedev/core";
 import { api } from "@/lib/api";
 import { NETWORK_NAME, config } from "@config/config";
 import { LeakageResultDetail } from "./types";
-import { DMA_FLOW_DISPLAY_UNIT, toM3s } from "./utils";
+import { FLOW_DISPLAY_UNIT, toM3s } from "./utils";
 
 interface Props {
   onResult: (result: LeakageResultDetail) => void;
@@ -68,9 +68,9 @@ const AnalysisParameters: React.FC<Props> = ({ onResult }) => {
           scada_end: endTime.toISOString(),
           pop_size: popSize,
           max_gen: maxGen,
-          q_sum: toM3s(qSum, DMA_FLOW_DISPLAY_UNIT),
+          q_sum: toM3s(qSum, FLOW_DISPLAY_UNIT),
           q_sum_unit: "m3/s",
-          output_flow_unit: DMA_FLOW_DISPLAY_UNIT,
+          output_flow_unit: FLOW_DISPLAY_UNIT,
         },
       );
       onResult(response.data as LeakageResultDetail);
@@ -172,7 +172,7 @@ const AnalysisParameters: React.FC<Props> = ({ onResult }) => {
 
         <Box className="flex flex-col gap-2">
           <Typography variant="subtitle2" className="mb-1 font-medium">
-            总漏损流量 ({DMA_FLOW_DISPLAY_UNIT})
+            总漏损流量 ({FLOW_DISPLAY_UNIT})
           </Typography>
           <TextField
             type="number"

src/components/olmap/DMALeakDetection/RecognitionResults.tsx

@@ -13,7 +13,7 @@ import {
 } from "@mui/material";
 import { FormatListBulleted } from "@mui/icons-material";
 import dayjs from "dayjs";
-import { DMA_FLOW_DISPLAY_UNIT, getAreaColor, toM3h } from "./utils";
+import { FLOW_DISPLAY_UNIT, getAreaColor, toM3h } from "./utils";
 import { LeakageResultDetail } from "./types";
 
 interface Props {
@@ -131,7 +131,7 @@ const RecognitionResults: React.FC<Props> = ({ result }) => {
                 );
                 const qSumM3h = toM3h(Number(val), unit);
                 return Number.isFinite(qSumM3h)
-                  ? `${qSumM3h.toFixed(3)} ${DMA_FLOW_DISPLAY_UNIT}`
+                  ? `${qSumM3h.toFixed(3)} ${FLOW_DISPLAY_UNIT}`
                   : "-";
               })()}
             </Typography>
@@ -167,7 +167,7 @@ const RecognitionResults: React.FC<Props> = ({ result }) => {
                   ?.max_leakage;
                 const maxLeakageM3h = toM3h(Number(maxL), "m3/s");
                 return Number.isFinite(maxLeakageM3h)
-                  ? `${maxLeakageM3h.toFixed(3)} ${DMA_FLOW_DISPLAY_UNIT}`
+                  ? `${maxLeakageM3h.toFixed(3)} ${FLOW_DISPLAY_UNIT}`
                   : "-";
               })()}
             </Typography>
@@ -215,7 +215,7 @@ const RecognitionResults: React.FC<Props> = ({ result }) => {
                 align="right"
                 sx={{ fontWeight: 600, color: "#64748b", py: 1.5, pr: 3 }}
               >
-                漏损量 ({DMA_FLOW_DISPLAY_UNIT})
+                漏损量 ({FLOW_DISPLAY_UNIT})
               </TableCell>
             </TableRow>
           </TableHead>

src/components/olmap/DMALeakDetection/SchemeQuery.tsx

@@ -24,7 +24,7 @@ import { useNotification } from "@refinedev/core";
 import { api } from "@/lib/api";
 import { NETWORK_NAME, config } from "@config/config";
 import { LeakageResultDetail, LeakageSchemeRecord } from "./types";
-import { DMA_FLOW_DISPLAY_UNIT, toM3h } from "./utils";
+import { FLOW_DISPLAY_UNIT, toM3h } from "./utils";
 
 interface Props {
   onViewResult: (result: LeakageResultDetail) => void;
@@ -210,7 +210,7 @@ const SchemeQuery: React.FC<Props> = ({ onViewResult }) => {
                               const value = Number((scheme.scheme_detail as any)?.result_summary?.max_leakage);
                               const maxLeakageM3h = toM3h(value, "m3/s");
                               return Number.isFinite(maxLeakageM3h)
-                                ? `${maxLeakageM3h.toFixed(3)} ${DMA_FLOW_DISPLAY_UNIT}`
+                                ? `${maxLeakageM3h.toFixed(3)} ${FLOW_DISPLAY_UNIT}`
                                 : "-";
                             })()}
                           </Typography>
@@ -227,7 +227,7 @@ const SchemeQuery: React.FC<Props> = ({ onViewResult }) => {
                               );
                               const qSumM3h = toM3h(value, unit);
                               return Number.isFinite(qSumM3h)
-                                ? `${qSumM3h.toFixed(3)} ${DMA_FLOW_DISPLAY_UNIT}`
+                                ? `${qSumM3h.toFixed(3)} ${FLOW_DISPLAY_UNIT}`
                                 : "-";
                             })()}
                           </Typography>

src/components/olmap/DMALeakDetection/utils.ts

@@ -11,7 +11,7 @@ export const AREA_COLORS = [
   "#be123c",
 ];
 
-export const DMA_FLOW_DISPLAY_UNIT = "m³/h";
+export const FLOW_DISPLAY_UNIT = "m³/h";
 const M3H_FACTOR = 3600;
 
 export const getAreaColor = (areaId: string | number | undefined) => {

src/components/olmap/FlushingAnalysis/SchemeQuery.tsx

@@ -40,6 +40,7 @@ import Feature, { FeatureLike } from "ol/Feature";
 import { bbox, featureCollection } from "@turf/turf";
 import Timeline from "@app/OlMap/Controls/Timeline";
 import { SchemeRecord, SchemaItem } from "./types";
+import { FLOW_DISPLAY_UNIT } from "../DMALeakDetection/utils";
 
 interface SchemeQueryProps {
   schemes?: SchemeRecord[];
@@ -496,7 +497,7 @@ const SchemeQuery: React.FC<SchemeQueryProps> = ({
                                   冲洗流量:
                                 </Typography>
                                 <Typography variant="caption" className="font-medium text-gray-900">
-                                  {scheme.schemeDetail?.flushing_flow ?? "-"} m³/h
+                                  {scheme.schemeDetail?.flushing_flow ?? "-"} {FLOW_DISPLAY_UNIT}
                                 </Typography>
                               </Box>