完善关阀分析页面设计

src/components/olmap/BurstPipeAnalysis/BurstPipeAnalysisPanel.tsx

@@ -29,7 +29,7 @@ import axios from "axios";
 import { config } from "@config/config";
 import { useNotification } from "@refinedev/core";
 import { useData } from "@app/OlMap/MapComponent";
-import { LocationResult, SchemeRecord } from "./types";
+import { LocationResult, SchemeRecord, ValveIsolationResult } from "./types";
 
 interface TabPanelProps {
   children?: React.ReactNode;
@@ -75,6 +75,13 @@ const BurstPipeAnalysisPanel: React.FC<BurstPipeAnalysisPanelProps> = ({
   const [schemes, setSchemes] = useState<SchemeRecord[]>([]);
   // 定位结果数据
   const [locationResults, setLocationResults] = useState<LocationResult[]>([]);
+  // 选中的管段ID数组
+  const [selectedPipeIds, setSelectedPipeIds] = useState<string[]>([]);
+  // 关阀分析状态提升到父组件
+  const [valveAnalysisTriggered, setValveAnalysisTriggered] = useState(false);
+  // 关阀分析结果和加载状态
+  const [valveAnalysisLoading, setValveAnalysisLoading] = useState(false);
+  const [valveAnalysisResult, setValveAnalysisResult] = useState<ValveIsolationResult | null>(null);
 
   const { open } = useNotification();
 
@@ -109,6 +116,12 @@ const BurstPipeAnalysisPanel: React.FC<BurstPipeAnalysisPanelProps> = ({
     }
   };
 
+  const handleAnalyzePipe = (pipeIds: string[]) => {
+    setSelectedPipeIds(pipeIds);
+    setValveAnalysisTriggered(true);
+    setCurrentTab(3);
+  };
+
   const drawerWidth = 520;
   const isBurstMode = panelMode === "burst";
   const panelTitle = isBurstMode ? "爆管分析" : "水质模拟";
@@ -283,7 +296,10 @@ const BurstPipeAnalysisPanel: React.FC<BurstPipeAnalysisPanelProps> = ({
 
           <TabPanel value={currentTab} index={2}>
             {isBurstMode ? (
-              <LocationResults results={locationResults} />
+              <LocationResults
+                results={locationResults}
+                onAnalyze={handleAnalyzePipe}
+              />
             ) : (
               <ContaminantResultsPanel schemeName={data?.schemeName} />
             )}
@@ -291,7 +307,15 @@ const BurstPipeAnalysisPanel: React.FC<BurstPipeAnalysisPanelProps> = ({
 
           {isBurstMode && (
             <TabPanel value={currentTab} index={3}>
-              <ValveIsolation />
+              <ValveIsolation
+                initialPipeIds={selectedPipeIds}
+                shouldFetch={valveAnalysisTriggered}
+                onFetchComplete={() => setValveAnalysisTriggered(false)}
+                loading={valveAnalysisLoading}
+                result={valveAnalysisResult}
+                onLoadingChange={setValveAnalysisLoading}
+                onResultChange={setValveAnalysisResult}
+              />
             </TabPanel>
           )}
         </Box>

src/components/olmap/BurstPipeAnalysis/LocationResults.tsx

@@ -9,7 +9,10 @@ import {
   Tooltip,
   Link,
 } from "@mui/material";
-import { LocationOn as LocationIcon } from "@mui/icons-material";
+import {
+  LocationOn as LocationIcon,
+  Handyman as HandymanIcon,
+} from "@mui/icons-material";
 import { queryFeaturesByIds } from "@/utils/mapQueryService";
 import { useMap } from "@app/OlMap/MapComponent";
 import { GeoJSON } from "ol/format";
@@ -33,9 +36,13 @@ import { LocationResult } from "./types";
 
 interface LocationResultsProps {
   results?: LocationResult[];
+  onAnalyze?: (pipeIds: string[]) => void;
 }
 
-const LocationResults: React.FC<LocationResultsProps> = ({ results = [] }) => {
+const LocationResults: React.FC<LocationResultsProps> = ({
+  results = [],
+  onAnalyze,
+}) => {
   const [highlightLayer, setHighlightLayer] =
     useState<VectorLayer<VectorSource> | null>(null);
   const [highlightFeatures, setHighlightFeatures] = useState<Feature[]>([]);
@@ -55,7 +62,7 @@ const LocationResults: React.FC<LocationResultsProps> = ({ results = [] }) => {
           // 将 OpenLayers Feature 转换为 GeoJSON Feature
           const geojsonFormat = new GeoJSON();
           const geojsonFeatures = features.map((feature) =>
-            geojsonFormat.writeFeatureObject(feature)
+            geojsonFormat.writeFeatureObject(feature),
           );
 
           const extent = bbox(featureCollection(geojsonFeatures as any));
@@ -95,7 +102,7 @@ const LocationResults: React.FC<LocationResultsProps> = ({ results = [] }) => {
             width: 3,
             lineDash: [15, 10],
           }),
-        })
+        }),
       );
       const geometry = feature.getGeometry();
       const lineCoords =
@@ -122,7 +129,7 @@ const LocationResults: React.FC<LocationResultsProps> = ({ results = [] }) => {
               scale: 0.2,
               anchor: [0.5, 1],
             }),
-          })
+          }),
         );
       }
       return styles;
@@ -243,7 +250,9 @@ const LocationResults: React.FC<LocationResultsProps> = ({ results = [] }) => {
                   {result.burst_incident}
                 </Typography>
                 <Chip
-                  label={result.type}
+                  label={
+                    result.type === "burst_analysis" ? "爆管模拟" : result.type
+                  }
                   size="small"
                   color="primary"
                   variant="outlined"
@@ -339,6 +348,24 @@ const LocationResults: React.FC<LocationResultsProps> = ({ results = [] }) => {
                   >
                     管段列表
                   </Typography>
+                  <Box className="flex items-center gap-2">
+                    {onAnalyze && (
+                      <Tooltip title="关阀分析">
+                        <IconButton
+                          size="small"
+                          onClick={() => onAnalyze(result.locate_result!)}
+                          color="secondary"
+                          sx={{
+                            backgroundColor: "rgba(156, 39, 176, 0.1)",
+                            "&:hover": {
+                              backgroundColor: "rgba(156, 39, 176, 0.2)",
+                            },
+                          }}
+                        >
+                          <HandymanIcon sx={{ fontSize: "1.2rem" }} />
+                        </IconButton>
+                      </Tooltip>
+                    )}
                     <Tooltip title="定位所有管道">
                       <IconButton
                         size="small"
@@ -355,12 +382,19 @@ const LocationResults: React.FC<LocationResultsProps> = ({ results = [] }) => {
                       </IconButton>
                     </Tooltip>
                   </Box>
+                </Box>
                 <Box className="grid grid-cols-2 gap-2">
                   {result.locate_result.map((pipeId, idx) => (
                     <Box
                       key={idx}
                       className="bg-gradient-to-r from-blue-50 to-white rounded-lg px-3 py-2 border border-blue-200 hover:border-blue-400 hover:shadow-md transition-all cursor-pointer group"
                       onClick={() => handleLocatePipes([pipeId])}
+                      sx={{
+                        "&:active": {
+                          transform: "scale(0.98)",
+                          boxShadow: "0 1px 2px rgba(25, 118, 210, 0.2)",
+                        },
+                      }}
                     >
                       <Box className="flex items-center justify-between">
                         <Typography
@@ -369,10 +403,43 @@ const LocationResults: React.FC<LocationResultsProps> = ({ results = [] }) => {
                         >
                           {pipeId}
                         </Typography>
-                        <LocationIcon
+                        <Box className="flex items-center gap-1">
-                          sx={{ fontSize: "1rem" }}
+                          {onAnalyze && (
-                          className="text-blue-400 group-hover:text-blue-600 transition-colors"
+                            <Tooltip title="单管段关阀分析">
-                        />
+                              <IconButton
+                                size="small"
+                                onClick={(e) => {
+                                  e.stopPropagation();
+                                  onAnalyze([pipeId]);
+                                }}
+                                className="text-blue-400 hover:text-blue-600"
+                                sx={{
+                                  "&:hover": {
+                                    backgroundColor: "rgba(37, 125, 212, 0.1)",
+                                  },
+                                }}
+                              >
+                                <HandymanIcon sx={{ fontSize: "1rem" }} />
+                              </IconButton>
+                            </Tooltip>
+                          )}
+                          {/* <Tooltip title="定位管段">
+                            <IconButton
+                              size="small"
+                              onClick={(e) => {
+                                e.stopPropagation();
+                                handleLocatePipes([pipeId]);
+                              }}
+                              sx={{
+                                "&:hover": {
+                                  backgroundColor: "rgba(37, 125, 212, 0.1)",
+                                },
+                              }}
+                            >
+                              <LocationIcon sx={{ fontSize: "1rem" }} />
+                            </IconButton>
+                          </Tooltip> */}
+                        </Box>
                       </Box>
                     </Box>
                   ))}

src/components/olmap/BurstPipeAnalysis/SchemeQuery.tsx

@@ -464,7 +464,7 @@ const SchemeQuery: React.FC<SchemeQueryProps> = ({
                             <InfoIcon fontSize="small" />
                           </IconButton>
                         </Tooltip>
-                        <Tooltip title="定位">
+                        <Tooltip title="查看定位结果">
                           <IconButton
                             size="small"
                             onClick={() => onLocate?.(scheme)}

src/components/olmap/BurstPipeAnalysis/ValveIsolation.test.tsx

@@ -1,98 +0,0 @@
-import React from "react";
-import { render, screen, fireEvent, waitFor } from "@testing-library/react";
-import ValveIsolation from "./ValveIsolation";
-import axios from "axios";
-import "@testing-library/jest-dom";
-
-// Mock dependencies
-jest.mock("axios");
-const mockedAxios = axios as jest.Mocked<typeof axios>;
-
-jest.mock("@refinedev/core", () => ({
-  useNotification: () => ({
-    open: jest.fn(),
-  }),
-}));
-
-// Mock config
-jest.mock("@config/config", () => ({
-  config: {
-    BACKEND_URL: "http://test-api.com",
-  },
-  NETWORK_NAME: "test-network",
-  // If config is a default export or named export, adjust accordingly.
-  // Based on usage: import { config, NETWORK_NAME } from '@config/config';
-  // The mock above covers named exports.
-}));
-
-describe("ValveIsolation Component", () => {
-  beforeEach(() => {
-    jest.clearAllMocks();
-  });
-
-  test("renders input and analyze button", () => {
-    render(<ValveIsolation />);
-    expect(screen.getByLabelText(/爆管管段ID/i)).toBeInTheDocument();
-    expect(screen.getByText(/开始分析/i)).toBeInTheDocument();
-  });
-
-  test("calls API with correct parameters when analyze is clicked", async () => {
-    mockedAxios.get.mockResolvedValueOnce({
-      data: {
-        accident_element: "pipe1",
-        accident_type: "Burst",
-        affected_nodes: ["node1", "node2"],
-        must_close_valves: ["valve1"],
-        optional_valves: [],
-        isolatable: true,
-      },
-    });
-
-    render(<ValveIsolation />);
-
-    const input = screen.getByLabelText(/爆管管段ID/i);
-    fireEvent.change(input, { target: { value: "pipe1" } });
-
-    const button = screen.getByText(/开始分析/i);
-    fireEvent.click(button);
-
-    await waitFor(() => {
-      expect(mockedAxios.get).toHaveBeenCalledWith(
-        "http://test-api.com/api/v1/valve_isolation_analysis",
-        {
-          params: {
-            network: "test-network",
-            accident_element: "pipe1",
-          },
-        },
-      );
-    });
-  });
-
-  test("displays results after successful analysis", async () => {
-    mockedAxios.get.mockResolvedValueOnce({
-      data: {
-        accident_element: "pipe1",
-        accident_type: "Burst",
-        affected_nodes: ["nodeA"],
-        must_close_valves: ["valveA", "valveB"],
-        optional_valves: [],
-        isolatable: true,
-      },
-    });
-
-    render(<ValveIsolation />);
-
-    fireEvent.change(screen.getByLabelText(/爆管管段ID/i), {
-      target: { value: "pipe1" },
-    });
-    fireEvent.click(screen.getByText(/开始分析/i));
-
-    await waitFor(() => {
-      expect(screen.getByText("可隔离")).toBeInTheDocument();
-      expect(screen.getByText("valveA")).toBeInTheDocument();
-      expect(screen.getByText("valveB")).toBeInTheDocument();
-      expect(screen.getByText("nodeA")).toBeInTheDocument();
-    });
-  });
-});

src/components/olmap/BurstPipeAnalysis/ValveIsolation.tsx

@@ -1,117 +1,731 @@
 "use client";
 
-import React, { useState } from 'react';
+import React, { useState, useEffect, useCallback, useRef } from "react";
-import { Box, TextField, Button, Typography, Card, CardContent, Chip } from '@mui/material';
+import {
-import axios from 'axios';
+  Box,
-import { config, NETWORK_NAME } from '@config/config';
+  Typography,
-import { ValveIsolationResult } from './types';
+  Chip,
+  CircularProgress,
+  IconButton,
+  Tooltip,
+} from "@mui/material";
+import { LocationOn as LocationIcon } from "@mui/icons-material";
+import axios from "axios";
+import { config, NETWORK_NAME } from "@config/config";
+import { ValveIsolationResult } from "./types";
 import { useNotification } from "@refinedev/core";
+import { queryFeaturesByIds } from "@/utils/mapQueryService";
+import { useMap } from "@app/OlMap/MapComponent";
+import { GeoJSON } from "ol/format";
+import VectorLayer from "ol/layer/Vector";
+import VectorSource from "ol/source/Vector";
+import { Circle as CircleStyle, Fill, Stroke, Style, Icon } from "ol/style";
+import Feature, { FeatureLike } from "ol/Feature";
+import {
+  bbox,
+  featureCollection,
+  along,
+  lineString,
+  length,
+  toMercator,
+} from "@turf/turf";
+import { Point } from "ol/geom";
+import { toLonLat } from "ol/proj";
 
-const ValveIsolation: React.FC = () => {
+interface ValveIsolationProps {
-  const [pipeId, setPipeId] = useState('');
+  initialPipeIds?: string[];
-  const [loading, setLoading] = useState(false);
+  shouldFetch?: boolean;
-  const [result, setResult] = useState<ValveIsolationResult | null>(null);
+  onFetchComplete?: () => void;
+  loading?: boolean;
+  result?: ValveIsolationResult | null;
+  onLoadingChange?: (loading: boolean) => void;
+  onResultChange?: (result: ValveIsolationResult | null) => void;
+}
+
+const ValveIsolation: React.FC<ValveIsolationProps> = ({
+  initialPipeIds,
+  shouldFetch = false,
+  onFetchComplete,
+  loading: externalLoading,
+  result: externalResult,
+  onLoadingChange,
+  onResultChange,
+}) => {
+  const [internalLoading, setInternalLoading] = useState(false);
+  const [internalResult, setInternalResult] =
+    useState<ValveIsolationResult | null>(null);
+
+  // 使用外部状态或内部状态
+  const loading =
+    externalLoading !== undefined ? externalLoading : internalLoading;
+  const result = externalResult !== undefined ? externalResult : internalResult;
+  const setLoading = onLoadingChange || setInternalLoading;
+  const setResult = onResultChange || setInternalResult;
+  const [highlightLayer, setHighlightLayer] =
+    useState<VectorLayer<VectorSource> | null>(null);
+  const [highlightFeatures, setHighlightFeatures] = useState<Feature[]>([]);
+  const [highlightType, setHighlightType] = useState<
+    "must_close" | "optional" | "affected_node" | "pipe"
+  >("affected_node");
   const { open } = useNotification();
+  const lastPipeIdsRef = useRef<string>("");
+  const map = useMap();
 
-  const handleAnalyze = async () => {
+  const handleLocatePipes = (pipeIds: string[]) => {
-    if (!pipeId.trim()) {
+    if (pipeIds.length > 0) {
-        open?.({ type: 'error', message: '请输入管段ID' });
+      queryFeaturesByIds(pipeIds, "geo_pipes_mat").then((features) => {
+        if (features.length > 0) {
+          // 设置高亮类型为管段
+          setHighlightType("pipe");
+          // 设置高亮要素
+          setHighlightFeatures(features);
+          // 将 OpenLayers Feature 转换为 GeoJSON Feature
+          const geojsonFormat = new GeoJSON();
+          const geojsonFeatures = features.map((feature) =>
+            geojsonFormat.writeFeatureObject(feature),
+          );
+
+          const extent = bbox(featureCollection(geojsonFeatures as any));
+
+          if (extent) {
+            map?.getView().fit(extent, { maxZoom: 18, duration: 1000 });
+          }
+        }
+      });
+    }
+  };
+
+  const handleLocateNodes = (nodeIds: string[]) => {
+    if (nodeIds.length > 0) {
+      queryFeaturesByIds(nodeIds, "geo_junctions").then((features) => {
+        if (features.length > 0) {
+          // 设置高亮类型为受影响节点
+          setHighlightType("affected_node");
+          // 设置高亮要素
+          setHighlightFeatures(features);
+          // 将 OpenLayers Feature 转换为 GeoJSON Feature
+          const geojsonFormat = new GeoJSON();
+          const geojsonFeatures = features.map((feature) =>
+            geojsonFormat.writeFeatureObject(feature),
+          );
+
+          const extent = bbox(featureCollection(geojsonFeatures as any));
+
+          if (extent) {
+            map?.getView().fit(extent, { maxZoom: 18, duration: 1000 });
+          }
+        }
+      });
+    }
+  };
+
+  const handleLocateMustCloseValves = (valveIds: string[]) => {
+    if (valveIds.length > 0) {
+      queryFeaturesByIds(valveIds, "geo_valves").then((features) => {
+        if (features.length > 0) {
+          // 设置高亮类型为必关阀门
+          setHighlightType("must_close");
+          // 设置高亮要素
+          setHighlightFeatures(features);
+          // 将 OpenLayers Feature 转换为 GeoJSON Feature
+          const geojsonFormat = new GeoJSON();
+          const geojsonFeatures = features.map((feature) =>
+            geojsonFormat.writeFeatureObject(feature),
+          );
+
+          const extent = bbox(featureCollection(geojsonFeatures as any));
+
+          if (extent) {
+            map?.getView().fit(extent, { maxZoom: 18, duration: 1000 });
+          }
+        }
+      });
+    }
+  };
+
+  const handleLocateOptionalValves = (valveIds: string[]) => {
+    if (valveIds.length > 0) {
+      queryFeaturesByIds(valveIds, "geo_valves").then((features) => {
+        if (features.length > 0) {
+          // 设置高亮类型为可选阀门
+          setHighlightType("optional");
+          // 设置高亮要素
+          setHighlightFeatures(features);
+          // 将 OpenLayers Feature 转换为 GeoJSON Feature
+          const geojsonFormat = new GeoJSON();
+          const geojsonFeatures = features.map((feature) =>
+            geojsonFormat.writeFeatureObject(feature),
+          );
+
+          const extent = bbox(featureCollection(geojsonFeatures as any));
+
+          if (extent) {
+            map?.getView().fit(extent, { maxZoom: 18, duration: 1000 });
+          }
+        }
+      });
+    }
+  };
+
+  const fetchAnalysis = useCallback(
+    async (ids: string[]) => {
+      if (!ids || ids.length === 0) {
+        open?.({ type: "error", message: "请提供管段ID" });
         return;
       }
       setLoading(true);
       setResult(null);
       try {
-      const response = await axios.get(`${config.BACKEND_URL}/api/v1/valve_isolation_analysis`, {
+        const response = await axios.get(
+          `${config.BACKEND_URL}/api/v1/valve_isolation_analysis/`,
+          {
             params: {
               network: NETWORK_NAME,
-          accident_element: pipeId
+              accident_element: ids,
-        }
+            },
-      });
+            paramsSerializer: {
+              indexes: null, // 生成格式: accident_element=P1&accident_element=P2
+            },
+          },
+        );
         setResult(response.data);
-      open?.({ type: 'success', message: '分析成功' });
+        open?.({ type: "success", message: "分析成功" });
       } catch (error) {
         console.error(error);
-      open?.({ type: 'error', message: '分析失败', description: '无法获取关阀分析结果' });
+        open?.({
+          type: "error",
+          message: "分析失败",
+          description: "无法获取关阀分析结果",
+        });
       } finally {
         setLoading(false);
+        onFetchComplete?.();
       }
+    },
+    [open, onFetchComplete],
+  );
+
+  useEffect(() => {
+    // 只有在明确要求获取数据时才调用 API
+    if (shouldFetch && initialPipeIds && initialPipeIds.length > 0) {
+      // 使用排序后的字符串作为唯一标识，避免数组引用变化导致重复调用
+      const pipeIdsKey = [...initialPipeIds].sort().join(",");
+
+      // 只有当 pipeIds 真正改变时才调用 API
+      if (pipeIdsKey !== lastPipeIdsRef.current) {
+        lastPipeIdsRef.current = pipeIdsKey;
+        fetchAnalysis(initialPipeIds);
+      } else {
+        // 如果 pipeIds 相同，直接调用完成回调
+        onFetchComplete?.();
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [shouldFetch, initialPipeIds]);
+
+  // 初始化高亮图层
+  useEffect(() => {
+    if (!map) return;
+
+    // 动态样式函数，根据 highlightType 返回不同的样式
+    const getHighlightStyle = (feature: FeatureLike) => {
+      if (highlightType === "pipe") {
+        // 管段 - 多层红色线条样式 + 中点图标
+        const styles = [];
+        // 线条样式（底层发光，主线条，内层高亮线）
+        styles.push(
+          new Style({
+            stroke: new Stroke({
+              color: "rgba(255, 0, 0, 0.3)",
+              width: 12,
+            }),
+          }),
+          new Style({
+            stroke: new Stroke({
+              color: "rgba(255, 0, 0, 1)",
+              width: 6,
+              lineDash: [15, 10],
+            }),
+          }),
+          new Style({
+            stroke: new Stroke({
+              color: "rgba(255, 102, 102, 1)",
+              width: 3,
+              lineDash: [15, 10],
+            }),
+          }),
+        );
+        const geometry = feature.getGeometry();
+        const lineCoords =
+          geometry?.getType() === "LineString"
+            ? (geometry as any).getCoordinates()
+            : null;
+        if (geometry && lineCoords) {
+          const lineCoordsWGS84 = lineCoords.map((coord: []) => {
+            const [lon, lat] = toLonLat(coord);
+            return [lon, lat];
+          });
+          // 计算中点
+          const lineStringFeature = lineString(lineCoordsWGS84);
+          const lineLength = length(lineStringFeature);
+          const midPoint = along(lineStringFeature, lineLength / 2).geometry
+            .coordinates;
+          // 在中点添加 icon 样式
+          const midPointMercator = toMercator(midPoint);
+          styles.push(
+            new Style({
+              geometry: new Point(midPointMercator),
+              image: new Icon({
+                src: "/icons/burst_pipe.svg",
+                scale: 0.2,
+                anchor: [0.5, 1],
+              }),
+            }),
+          );
+        }
+        return styles;
+      }
+
+      // 阀门和节点的样式
+      let color: string;
+      let strokeColor: string;
+      let radius: number;
+
+      switch (highlightType) {
+        case "must_close":
+          // 必关阀门 - 深红色
+          color = "rgba(211, 47, 47, 0.6)";
+          strokeColor = "rgba(211, 47, 47, 1)";
+          radius = 10;
+          break;
+        case "optional":
+          // 可选阀门 - 橙色
+          color = "rgba(237, 108, 2, 0.6)";
+          strokeColor = "rgba(237, 108, 2, 1)";
+          radius = 10;
+          break;
+        case "affected_node":
+        default:
+          // 受影响节点 - 蓝色
+          color = "rgba(25, 118, 210, 0.6)";
+          strokeColor = "rgba(25, 118, 210, 1)";
+          radius = 8;
+          break;
+      }
+
+      return new Style({
+        image: new CircleStyle({
+          radius: radius,
+          fill: new Fill({
+            color: color,
+          }),
+          stroke: new Stroke({
+            color: strokeColor,
+            width: 3,
+          }),
+        }),
+      });
     };
 
-  return (
+    // 创建高亮图层
-    <Box className="flex flex-col h-full p-4">
+    const highlightLayer = new VectorLayer({
-      {/* Input Section */}
+      source: new VectorSource(),
-      <Box className="mb-4 flex gap-2 items-end">
+      style: getHighlightStyle,
-        <TextField
+      maxZoom: 24,
-          label="爆管管段ID"
+      minZoom: 12,
-          variant="outlined"
+      properties: {
-          size="small"
+        name: "阀门节点高亮",
-          fullWidth
+        value: "valve_node_highlight",
-          value={pipeId}
+      },
-          onChange={(e) => setPipeId(e.target.value)}
+    });
-          placeholder="请输入管段ID"
-        />
-        <Button
-            variant="contained"
-            onClick={handleAnalyze}
-            disabled={loading}
-            className="bg-blue-600 h-[40px] min-w-[100px]"
-        >
-            {loading ? '分析中' : '开始分析'}
-        </Button>
-      </Box>
 
+    map.addLayer(highlightLayer);
+    setHighlightLayer(highlightLayer);
+
+    return () => {
+      map.removeLayer(highlightLayer);
+    };
+  }, [map, highlightType]);
+
+  // 高亮要素的函数
+  useEffect(() => {
+    if (!highlightLayer) {
+      return;
+    }
+    const source = highlightLayer.getSource();
+    if (!source) {
+      return;
+    }
+    // 清除之前的高亮
+    source.clear();
+    // 添加新的高亮要素
+    highlightFeatures.forEach((feature) => {
+      if (feature instanceof Feature) {
+        source.addFeature(feature);
+      }
+    });
+  }, [highlightFeatures, highlightLayer]);
+
+  return (
+    <Box className="flex flex-col h-full">
       {/* Results Section */}
-      {result && (
+      <Box className="flex-1 overflow-auto bg-white rounded border border-gray-200">
-        <Box className="flex-1 overflow-auto space-y-4">
+        {loading ? (
-            <Card variant="outlined">
+          <Box className="flex flex-col items-center justify-center h-full text-gray-500">
-                <CardContent className="p-3">
+            <CircularProgress size={40} className="mb-4" />
-                    <Box className="flex justify-between items-center mb-2">
+            <Typography variant="body2">正在分析...</Typography>
-                        <Typography variant="subtitle1" fontWeight="bold">分析结果</Typography>
+          </Box>
+        ) : result ? (
+          <Box className="p-5 h-full overflow-auto">
+            {/* 头部：状态信息 */}
+            <Box className="mb-5">
+              <Box className="flex items-center gap-2 mb-1">
+                <Typography variant="h6" className="font-bold text-gray-900">
+                  关阀分析结果
+                </Typography>
                 <Chip
                   label={result.isolatable ? "可隔离" : "不可隔离"}
-                            color={result.isolatable ? "success" : "error"}
                   size="small"
+                  color={result.isolatable ? "success" : "error"}
+                  variant="outlined"
+                  sx={{
+                    fontWeight: 600,
+                    fontSize: "0.75rem",
+                    height: "24px",
+                  }}
                 />
               </Box>
-                    <Typography variant="body2" color="text.secondary">事故类型: {result.accident_type}</Typography>
+              <Box className="bg-gradient-to-r from-red-50 via-pink-50 to-red-50 rounded-lg p-3 border border-red-200 shadow-sm">
-                    <Typography variant="body2" color="text.secondary">受影响节点数: {result.affected_nodes?.length || 0}</Typography>
+                <Box className="flex items-center justify-between mb-2">
-                </CardContent>
+                  <Box className="flex items-center gap-2">
-            </Card>
+                    <Box className="w-2 h-2 rounded-full bg-red-600 animate-pulse"></Box>
-
+                    <Typography
-            <Box>
+                      variant="caption"
-                <Typography variant="subtitle2" className="mb-2">必须关闭阀门 ({result.must_close_valves?.length || 0})</Typography>
+                      className="text-red-700 font-semibold uppercase tracking-wide"
-                {result.must_close_valves?.length > 0 ? (
+                      sx={{ fontSize: "0.7rem" }}
-                    <Box className="flex flex-wrap gap-2">
+                    >
-                        {result.must_close_valves.map(v => (
+                      爆管管段
-                            <Chip key={v} label={v} color="error" variant="outlined" size="small" />
-                        ))}
-                    </Box>
-                ) : <Typography variant="caption" color="text.secondary">无</Typography>}
-            </Box>
-
-             <Box>
-                <Typography variant="subtitle2" className="mb-2">可选关闭阀门 ({result.optional_valves?.length || 0})</Typography>
-                {result.optional_valves?.length > 0 ? (
-                    <Box className="flex flex-wrap gap-2">
-                        {result.optional_valves.map(v => (
-                            <Chip key={v} label={v} color="warning" variant="outlined" size="small" />
-                        ))}
-                    </Box>
-                ) : <Typography variant="caption" color="text.secondary">无</Typography>}
-            </Box>
-
-             <Box>
-                <Typography variant="subtitle2" className="mb-2">受影响节点 ({result.affected_nodes?.length || 0})</Typography>
-                 {result.affected_nodes?.length > 0 ? (
-                    <Box className="bg-gray-50 p-2 rounded max-h-40 overflow-auto">
-                        <Typography variant="caption" className="break-all">
-                            {result.affected_nodes.join(', ')}
                     </Typography>
                   </Box>
-                 ) : <Typography variant="caption" color="text.secondary">无</Typography>}
+                  {result.accident_elements &&
+                    result.accident_elements.length > 0 && (
+                      <Tooltip title="定位所有管段">
+                        <IconButton
+                          size="small"
+                          onClick={() =>
+                            handleLocatePipes(result.accident_elements!)
+                          }
+                          sx={{
+                            backgroundColor: "rgba(255, 0, 0, 0.1)",
+                            "&:hover": {
+                              backgroundColor: "rgba(255, 0, 0, 0.2)",
+                            },
+                          }}
+                        >
+                          <LocationIcon
+                            sx={{ fontSize: "1rem", color: "rgb(220, 38, 38)" }}
+                          />
+                        </IconButton>
+                      </Tooltip>
+                    )}
+                </Box>
+                <Box className="flex flex-wrap gap-2">
+                  {result.accident_elements?.map(
+                    (pipeId: string, idx: number) => (
+                      <Chip
+                        key={idx}
+                        label={pipeId}
+                        size="small"
+                        onClick={() => handleLocatePipes([pipeId])}
+                        sx={{
+                          backgroundColor: "rgba(255, 255, 255, 0.9)",
+                          border: "1.5px solid rgb(248, 113, 113)",
+                          color: "rgb(185, 28, 28)",
+                          fontWeight: 600,
+                          fontSize: "0.8rem",
+                          cursor: "pointer",
+                          transition: "all 0.2s",
+                          "&:hover": {
+                            backgroundColor: "rgb(254, 226, 226)",
+                            borderColor: "rgb(220, 38, 38)",
+                            transform: "translateY(-1px)",
+                            boxShadow: "0 2px 4px rgba(220, 38, 38, 0.2)",
+                          },
+                        }}
+                      />
+                    ),
+                  )}
+                </Box>
+              </Box>
+            </Box>
+
+            {/* 主要信息：三栏卡片布局 */}
+            <Box className="grid grid-cols-3 gap-3 mb-5">
+              {/* 必关阀门卡片 */}
+              <Box className="bg-gradient-to-br from-red-50 to-red-100 rounded-lg p-3 border border-red-200 shadow-sm hover:shadow-md transition-shadow">
+                <Box className="flex items-center gap-1.5 mb-2">
+                  <Box className="w-1.5 h-1.5 rounded-full bg-red-600"></Box>
+                  <Typography
+                    variant="caption"
+                    className="text-red-700 font-semibold uppercase tracking-wide"
+                    sx={{ fontSize: "0.7rem" }}
+                  >
+                    必关阀门
+                  </Typography>
+                </Box>
+                <Typography
+                  variant="body2"
+                  className="font-bold text-red-900"
+                  sx={{ fontSize: "0.875rem" }}
+                >
+                  {result.must_close_valves?.length || 0} 个
+                </Typography>
+              </Box>
+
+              {/* 可选阀门卡片 */}
+              <Box className="bg-gradient-to-br from-orange-50 to-orange-100 rounded-lg p-3 border border-orange-200 shadow-sm hover:shadow-md transition-shadow">
+                <Box className="flex items-center gap-1.5 mb-2">
+                  <Box className="w-1.5 h-1.5 rounded-full bg-orange-600"></Box>
+                  <Typography
+                    variant="caption"
+                    className="text-orange-700 font-semibold uppercase tracking-wide"
+                    sx={{ fontSize: "0.7rem" }}
+                  >
+                    可选阀门
+                  </Typography>
+                </Box>
+                <Typography
+                  variant="body2"
+                  className="font-bold text-orange-900"
+                  sx={{ fontSize: "0.875rem" }}
+                >
+                  {result.optional_valves?.length || 0} 个
+                </Typography>
+              </Box>
+
+              {/* 受影响节点卡片 */}
+              <Box className="bg-gradient-to-br from-blue-50 to-blue-100 rounded-lg p-3 border border-blue-200 shadow-sm hover:shadow-md transition-shadow">
+                <Box className="flex items-center gap-1.5 mb-2">
+                  <Box className="w-1.5 h-1.5 rounded-full bg-blue-600"></Box>
+                  <Typography
+                    variant="caption"
+                    className="text-blue-700 font-semibold uppercase tracking-wide"
+                    sx={{ fontSize: "0.7rem" }}
+                  >
+                    受影响节点
+                  </Typography>
+                </Box>
+                <Typography
+                  variant="body2"
+                  className="font-bold text-blue-900"
+                  sx={{ fontSize: "0.875rem" }}
+                >
+                  {result.affected_nodes?.length || 0} 个
+                </Typography>
+              </Box>
+            </Box>
+
+            {/* 必须关闭阀门详细列表 */}
+            {result.must_close_valves &&
+              result.must_close_valves.length > 0 && (
+                <Box className="bg-white rounded-lg p-4 border-2 border-red-200 shadow-sm mb-4">
+                  <Box className="flex items-center justify-between mb-3">
+                    <Typography
+                      variant="body1"
+                      className="text-gray-900 font-bold"
+                      sx={{ fontSize: "0.95rem" }}
+                    >
+                      必须关闭阀门
+                    </Typography>
+                    <Tooltip title="定位所有阀门">
+                      <IconButton
+                        size="small"
+                        onClick={() =>
+                          handleLocateMustCloseValves(result.must_close_valves!)
+                        }
+                        color="error"
+                        sx={{
+                          backgroundColor: "rgba(211, 47, 47, 0.1)",
+                          "&:hover": {
+                            backgroundColor: "rgba(211, 47, 47, 0.2)",
+                          },
+                        }}
+                      >
+                        <LocationIcon sx={{ fontSize: "1.2rem" }} />
+                      </IconButton>
+                    </Tooltip>
+                  </Box>
+                  <Box className="grid grid-cols-3 gap-2">
+                    {result.must_close_valves.map((valveId, idx) => (
+                      <Box
+                        key={idx}
+                        className="bg-gradient-to-r from-red-50 to-white rounded-lg px-3 py-2 border border-red-200 hover:border-red-400 hover:shadow-md transition-all cursor-pointer group"
+                        onClick={() => handleLocateMustCloseValves([valveId])}
+                        sx={{
+                          "&:active": {
+                            transform: "scale(0.98)",
+                            boxShadow: "0 1px 2px rgba(211, 47, 47, 0.2)",
+                          },
+                        }}
+                      >
+                        <Typography
+                          variant="body2"
+                          className="font-semibold text-red-700 group-hover:text-red-900"
+                        >
+                          {valveId}
+                        </Typography>
+                      </Box>
+                    ))}
                   </Box>
                 </Box>
               )}
+
+            {/* 可选关闭阀门详细列表 */}
+            {result.optional_valves && result.optional_valves.length > 0 && (
+              <Box className="bg-white rounded-lg p-4 border-2 border-orange-200 shadow-sm mb-4">
+                <Box className="flex items-center justify-between mb-3">
+                  <Typography
+                    variant="body1"
+                    className="text-gray-900 font-bold"
+                    sx={{ fontSize: "0.95rem" }}
+                  >
+                    可选关闭阀门
+                  </Typography>
+                  <Tooltip title="定位所有阀门">
+                    <IconButton
+                      size="small"
+                      onClick={() =>
+                        handleLocateOptionalValves(result.optional_valves!)
+                      }
+                      color="warning"
+                      sx={{
+                        backgroundColor: "rgba(237, 108, 2, 0.1)",
+                        "&:hover": {
+                          backgroundColor: "rgba(237, 108, 2, 0.2)",
+                        },
+                      }}
+                    >
+                      <LocationIcon sx={{ fontSize: "1.2rem" }} />
+                    </IconButton>
+                  </Tooltip>
+                </Box>
+                <Box className="grid grid-cols-3 gap-2">
+                  {result.optional_valves.map((valveId, idx) => (
+                    <Box
+                      key={idx}
+                      className="bg-gradient-to-r from-orange-50 to-white rounded-lg px-3 py-2 border border-orange-200 hover:border-orange-400 hover:shadow-md transition-all cursor-pointer group"
+                      onClick={() => handleLocateOptionalValves([valveId])}
+                      sx={{
+                        "&:active": {
+                          transform: "scale(0.98)",
+                          boxShadow: "0 1px 2px rgba(237, 108, 2, 0.2)",
+                        },
+                      }}
+                    >
+                      <Typography
+                        variant="body2"
+                        className="font-semibold text-orange-700 group-hover:text-orange-900"
+                      >
+                        {valveId}
+                      </Typography>
+                    </Box>
+                  ))}
+                </Box>
+              </Box>
+            )}
+
+            {/* 受影响节点详细列表 */}
+            {result.affected_nodes && result.affected_nodes.length > 0 && (
+              <Box className="bg-white rounded-lg p-4 border-2 border-blue-200 shadow-sm">
+                <Box className="flex items-center justify-between mb-3">
+                  <Typography
+                    variant="body1"
+                    className="text-gray-900 font-bold"
+                    sx={{ fontSize: "0.95rem" }}
+                  >
+                    受影响节点
+                  </Typography>
+                  <Tooltip title="定位所有节点">
+                    <IconButton
+                      size="small"
+                      onClick={() => handleLocateNodes(result.affected_nodes!)}
+                      color="primary"
+                      sx={{
+                        backgroundColor: "rgba(37, 125, 212, 0.1)",
+                        "&:hover": {
+                          backgroundColor: "rgba(37, 125, 212, 0.2)",
+                        },
+                      }}
+                    >
+                      <LocationIcon sx={{ fontSize: "1.2rem" }} />
+                    </IconButton>
+                  </Tooltip>
+                </Box>
+                <Box className="grid grid-cols-3 gap-2">
+                  {result.affected_nodes.map((nodeId, idx) => (
+                    <Box
+                      key={idx}
+                      className="bg-gradient-to-r from-blue-50 to-white rounded-lg px-3 py-2 border border-blue-200 hover:border-blue-400 hover:shadow-md transition-all cursor-pointer group"
+                      onClick={() => handleLocateNodes([nodeId])}
+                      sx={{
+                        "&:active": {
+                          transform: "scale(0.98)",
+                          boxShadow: "0 1px 2px rgba(25, 118, 210, 0.2)",
+                        },
+                      }}
+                    >
+                      <Typography
+                        variant="body2"
+                        className="font-semibold text-blue-700 group-hover:text-blue-900"
+                      >
+                        {nodeId}
+                      </Typography>
+                    </Box>
+                  ))}
+                </Box>
+              </Box>
+            )}
+          </Box>
+        ) : (
+          <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"
+              >
+                <circle
+                  cx="40"
+                  cy="40"
+                  r="25"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                />
+                <path d="M40 25 L40 55" stroke="currentColor" strokeWidth="3" />
+                <rect
+                  x="30"
+                  y="35"
+                  width="20"
+                  height="10"
+                  fill="currentColor"
+                  rx="2"
+                />
+                <path
+                  d="M25 40 L30 40 M50 40 L55 40"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                />
+              </svg>
+            </Box>
+            <Typography variant="body2">暂无关阀分析结果</Typography>
+            <Typography variant="body2" className="mt-1">
+              请先查看定位结果
+            </Typography>
+          </Box>
+        )}
+      </Box>
     </Box>
   );
 };

src/components/olmap/BurstPipeAnalysis/types.ts

@@ -38,8 +38,7 @@ export interface LocationResult {
 }
 
 export interface ValveIsolationResult {
-  accident_element: string;
+  accident_elements: string[];
-  accident_type: string;
   affected_nodes: string[];
   must_close_valves: string[];
   optional_valves: string[];

src/components/olmap/ContaminantSimulation/SchemeQuery.tsx

@@ -599,7 +599,7 @@ const SchemeQuery: React.FC<SchemeQueryProps> = ({
                               fontWeight: 500,
                             }}
                           >
-                            定位污染源
+                            定位全部污染源
                           </Button>
                           <Button
                             variant="contained"

src/components/olmap/SCADADeviceList.tsx

@@ -124,7 +124,7 @@ const SCADADeviceList: React.FC<SCADADeviceListProps> = ({
   const [isSelecting, setIsSelecting] = useState<boolean>(false);
   const [internalSelection, setInternalSelection] = useState<string[]>([]);
   const [pendingSelection, setPendingSelection] = useState<string[] | null>(
-    null
+    null,
   );
   const [internalDevices, setInternalDevices] = useState<SCADADevice[]>([]);
   const [loading, setLoading] = useState<boolean>(true);
@@ -142,7 +142,7 @@ const SCADADeviceList: React.FC<SCADADeviceListProps> = ({
   // 清洗对话框状态
   const [cleanDialogOpen, setCleanDialogOpen] = useState<boolean>(false);
   const [cleanStartTime, setCleanStartTime] = useState<Dayjs>(() =>
-    dayjs().subtract(1, "week")
+    dayjs().subtract(1, "week"),
   );
   const [cleanEndTime, setCleanEndTime] = useState<Dayjs>(() => dayjs());
   const [timeRangeError, setTimeRangeError] = useState<string>("");
@@ -199,7 +199,7 @@ const SCADADeviceList: React.FC<SCADADeviceListProps> = ({
           status: STATUS_OPTIONS[Math.floor(Math.random() * 4)],
           coordinates: (feature.getGeometry() as Point)?.getCoordinates() as [
             number,
-            number
+            number,
           ],
           properties: feature.getProperties(),
         }));
@@ -218,7 +218,7 @@ const SCADADeviceList: React.FC<SCADADeviceListProps> = ({
   // 获取设备类型列表
   const deviceTypes = useMemo(() => {
     const types = Array.from(
-      new Set(effectiveDevices.map((device) => device.type))
+      new Set(effectiveDevices.map((device) => device.type)),
     );
     return types.sort();
   }, [effectiveDevices]);
@@ -406,7 +406,7 @@ const SCADADeviceList: React.FC<SCADADeviceListProps> = ({
               color: `rgba(255, 255, 0, ${(opacity * 0.3).toFixed(3)})`,
             }),
           }),
-        })
+        }),
       );
       vectorContext.drawGeometry(flashGeom);
 
@@ -423,7 +423,7 @@ const SCADADeviceList: React.FC<SCADADeviceListProps> = ({
               width: 2,
             }),
           }),
-        })
+        }),
       );
       vectorContext.drawGeometry(flashGeom);
 
@@ -436,7 +436,7 @@ const SCADADeviceList: React.FC<SCADADeviceListProps> = ({
               color: `rgba(255, 255, 255, ${opacity.toFixed(3)})`,
             }),
           }),
-        })
+        }),
       );
       vectorContext.drawGeometry(flashGeom);
 
@@ -519,7 +519,7 @@ const SCADADeviceList: React.FC<SCADADeviceListProps> = ({
       // 更新高亮要素
       setHighlightFeatures((prev) => {
         const existingIndex = prev.findIndex(
-          (f) => f.getProperties().id === featureId
+          (f) => f.getProperties().id === featureId,
         );
         if (existingIndex !== -1) {
           // 如果已存在,移除
@@ -530,7 +530,7 @@ const SCADADeviceList: React.FC<SCADADeviceListProps> = ({
         }
       });
     },
-    [map, effectiveDevices, multiSelect, open]
+    [map, effectiveDevices, multiSelect, open],
   );
 
   // 处理清洗对话框关闭
@@ -561,7 +561,7 @@ const SCADADeviceList: React.FC<SCADADeviceListProps> = ({
         setTimeRangeError(error);
       }
     },
-    [cleanEndTime, validateTimeRange]
+    [cleanEndTime, validateTimeRange],
   );
 
   // 处理结束时间变化
@@ -574,7 +574,7 @@ const SCADADeviceList: React.FC<SCADADeviceListProps> = ({
         setTimeRangeError(error);
       }
     },
-    [cleanStartTime, validateTimeRange]
+    [cleanStartTime, validateTimeRange],
   );
 
   // 确认清洗
@@ -608,7 +608,7 @@ const SCADADeviceList: React.FC<SCADADeviceListProps> = ({
     open?.({
       type: "progress",
       message: "正在清洗数据，请稍候...",
-      undoableTimeout: 3000,
+      undoableTimeout: 3,
     });
 
     try {
@@ -617,7 +617,7 @@ const SCADADeviceList: React.FC<SCADADeviceListProps> = ({
 
       // 调用后端清洗接口
       const response = await axios.post(
-        `${config.BACKEND_URL}/api/v1/composite/clean-scada?device_ids=all&start_time=${startTime}&end_time=${endTime}`
+        `${config.BACKEND_URL}/api/v1/composite/clean-scada?device_ids=all&start_time=${startTime}&end_time=${endTime}`,
       );
 
       // 处理成功响应
@@ -1103,7 +1103,7 @@ const SCADADeviceList: React.FC<SCADADeviceListProps> = ({
                               variant="caption"
                               sx={{
                                 color: `${getStatusColor(
-                                  device.status.value
+                                  device.status.value,
                                 )}.main`,
                                 fontWeight: "bold",
                                 fontSize: 16,
@@ -1134,7 +1134,7 @@ const SCADADeviceList: React.FC<SCADADeviceListProps> = ({
                                 />
                                 <Chip
                                   label={`可靠度: ${getReliability(
-                                    device.reliability
+                                    device.reliability,
                                   )}`}
                                   size="small"
                                   variant="outlined"
@@ -1156,7 +1156,7 @@ const SCADADeviceList: React.FC<SCADADeviceListProps> = ({
                                 >
                                   传输频率:{" "}
                                   {getTransmissionFrequency(
-                                    device.transmission_frequency
+                                    device.transmission_frequency,
                                   )}{" "}
                                   分钟
                                 </Typography>