爆管分析页面，新增时间轴、工具栏，修改部分组件以满足页面功能需求

public/icons/burst_pipe_icon.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1761204792054" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="12884" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M64 416L160 512H256l64 64 96 32 64-32 96 32 96-32 32-64h160l32-32L960 384v384h-96v-64h-704v64H64V416z" fill="#2D8DFE" opacity=".1" p-id="12885"></path><path d="M960 800h-96L832 768v-32H192v32l-32 32H64L32 768V384l32-32h96L192 384v32h64l25.6 6.4 57.6 57.6 76.8 32 51.2-25.6h25.6L576 512l44.8-19.2 25.6-57.6 25.6-19.2H832V384l32-32H960l32 32v384l-32 32z m-64-64h32v-320H896V448l-32 32h-172.8l-25.6 44.8-12.8 12.8-64 32-25.6 6.4-83.2-32-51.2 25.6-25.6 6.4-96-32-12.8-6.4-51.2-57.6H160L128 448v-32h-32v320H128V704l32-32h704l32 32v32z" fill="#2D8DFE" p-id="12886"></path><path d="M736 320l-64-32-32 128L736 320zM544 256L448 288 544 384V256zM384 352L320 384l128 64-64-96z" fill="#2D8DFE" p-id="12887"></path></svg>

src/app/(main)/burst-pipe-analysis/page.tsx

@@ -8,7 +8,7 @@ export default function Home() {
   return (
     <div className="relative w-full h-full overflow-hidden">
       <MapComponent>
-        {/* <MapToolbar hiddenButtons={["style"]} /> */}
+        <MapToolbar />
         <BurstPipeAnalysisPanel />
       </MapComponent>
     </div>

src/app/(main)/network-simulation/page.tsx

@@ -78,9 +78,7 @@ export default function Home() {
     <div className="relative w-full h-full overflow-hidden">
       <MapComponent>
         <MapToolbar />
-        <div className="absolute bottom-4 left-1/2 -translate-x-1/2 z-10 w-[920px] opacity-90 hover:opacity-100 transition-opacity duration-300">
         <Timeline />
-        </div>
       </MapComponent>
       <SCADADeviceList
         devices={devices}

src/app/OlMap/Controls/LayerControl.tsx

@@ -31,7 +31,7 @@ const LayerControl: React.FC = () => {
   };
 
   return (
-    <div className="absolute left-4 bottom-4 bg-white rounded-md drop-shadow-lg opacity-85 hover:opacity-100 transition-opacity max-w-xs">
+    <div className="absolute left-4 bottom-4 bg-white rounded-md drop-shadow-lg z-10 opacity-85 hover:opacity-100 transition-opacity max-w-xs">
       <div className="ml-3 grid grid-cols-3">
         {layers.map((layer, index) => (
           <FormControlLabel

src/app/OlMap/Controls/PropertyPanel.tsx

@@ -31,7 +31,7 @@ const PropertyPanel: React.FC<PropertyPanelProps> = ({
   const isImportantKeys = ["ID", "类型", "Name", "面积", "长度"];
 
   return (
-    <div className="absolute top-4 right-4 bg-white shadow-2xl rounded-xl overflow-hidden w-96 max-h-[850px] flex flex-col backdrop-blur-sm opacity-95 hover:opacity-100 transition-all duration-300">
+    <div className="absolute top-4 right-4 bg-white shadow-2xl rounded-xl overflow-hidden w-96 z-10 max-h-[850px] flex flex-col backdrop-blur-sm opacity-95 hover:opacity-100 transition-all duration-300">
       {/* 头部 */}
       <div className="flex justify-between items-center px-5 py-4 bg-[#257DD4] text-white">
         <div className="flex items-center gap-2">

src/app/OlMap/Controls/StyleEditorPanel.tsx

@@ -56,10 +56,13 @@ interface LayerStyleState {
   legendConfig: LegendStyleConfig;
   isActive: boolean;
 }
-// 持久化存储
+
-const STORAGE_KEYS = {
+// StyleEditorPanel 组件 Props 接口
-  layerStyleStates: "styleEditor_layerStyleStates",
+interface StyleEditorPanelProps {
-};
+  layerStyleStates: LayerStyleState[];
+  setLayerStyleStates: React.Dispatch<React.SetStateAction<LayerStyleState[]>>;
+}
+
 // 预设颜色方案
 const SINGLE_COLOR_PALETTES = [
   {
@@ -108,7 +111,10 @@ const CLASSIFICATION_METHODS = [
   // { name: "自然间断", value: "jenks_optimized" },
 ];
 
-const StyleEditorPanel: React.FC = () => {
+const StyleEditorPanel: React.FC<StyleEditorPanelProps> = ({
+  layerStyleStates,
+  setLayerStyleStates,
+}) => {
   const map = useMap();
   const data = useData();
   if (!data) {
@@ -123,7 +129,6 @@ const StyleEditorPanel: React.FC = () => {
     setShowPipeText,
     setJunctionText,
     setPipeText,
-    updateLegendConfigs,
   } = data;
 
   const { open, close } = useNotification();
@@ -155,20 +160,7 @@ const StyleEditorPanel: React.FC = () => {
     opacity: 0.9,
     adjustWidthByProperty: true,
   });
-  // 样式状态管理 - 存储多个图层的样式状态
+
-  const [layerStyleStates, setLayerStyleStates] = useState<LayerStyleState[]>(
-    () => {
-      const saved = sessionStorage.getItem(STORAGE_KEYS.layerStyleStates);
-      return saved ? JSON.parse(saved) : [];
-    }
-  );
-  // 保存layerStyleStates到sessionStorage
-  useEffect(() => {
-    sessionStorage.setItem(
-      STORAGE_KEYS.layerStyleStates,
-      JSON.stringify(layerStyleStates)
-    );
-  }, [layerStyleStates]);
   // 颜色方案选择
   const [singlePaletteIndex, setSinglePaletteIndex] = useState(0);
   const [gradientPaletteIndex, setGradientPaletteIndex] = useState(0);
@@ -735,20 +727,6 @@ const StyleEditorPanel: React.FC = () => {
     }
   }, [styleConfig.colorType]);
 
-  // 获取所有激活的图例配置
-  useEffect(() => {
-    if (!updateLegendConfigs) return;
-    updateLegendConfigs(
-      layerStyleStates
-        .filter((state) => state.isActive && state.legendConfig.property)
-        .map((state) => ({
-          ...state.legendConfig,
-          layerName: state.layerName,
-          layerId: state.layerId,
-        }))
-    );
-  }, [layerStyleStates]);
-
   const getColorSetting = () => {
     if (styleConfig.colorType === "single") {
       return (

src/app/OlMap/Controls/Timeline.tsx

@@ -28,7 +28,20 @@ import { useData } from "../MapComponent";
 import { config } from "@/config/config";
 import { useMap } from "../MapComponent";
 const backendUrl = config.backendUrl;
-const Timeline: React.FC = () => {
+
+interface TimelineProps {
+  schemeDate?: Date;
+  timeRange?: { start: Date; end: Date };
+  disableDateSelection?: boolean;
+  schemeName?: string;
+}
+
+const Timeline: React.FC<TimelineProps> = ({
+  schemeDate,
+  timeRange,
+  disableDateSelection = false,
+  schemeName = "",
+}) => {
   const data = useData();
   if (!data) {
     return <div>Loading...</div>; // 或其他占位符
@@ -55,8 +68,20 @@ const Timeline: React.FC = () => {
 
   const [isPlaying, setIsPlaying] = useState<boolean>(false);
   const [playInterval, setPlayInterval] = useState<number>(5000); // 毫秒
-  const [calculatedInterval, setCalculatedInterval] = useState<number>(1440); // 分钟
+  const [calculatedInterval, setCalculatedInterval] = useState<number>(15); // 分钟
 
+  // 计算时间轴范围
+  const minTime = timeRange
+    ? timeRange.start.getHours() * 60 + timeRange.start.getMinutes()
+    : 0;
+  const maxTime = timeRange
+    ? timeRange.end.getHours() * 60 + timeRange.end.getMinutes()
+    : 1440;
+  useEffect(() => {
+    if (schemeDate) {
+      setSelectedDate(schemeDate);
+    }
+  }, [schemeDate]);
   const intervalRef = useRef<NodeJS.Timeout | null>(null);
   const timelineRef = useRef<HTMLDivElement>(null);
   // 添加缓存引用
@@ -82,9 +107,13 @@ const Timeline: React.FC = () => {
       if (nodeCacheRef.current.has(nodeCacheKey)) {
         nodeRecords = nodeCacheRef.current.get(nodeCacheKey)!;
       } else {
-        nodePromise = fetch(
+        disableDateSelection && schemeName
+          ? (nodePromise = fetch(
+              `${backendUrl}/queryallschemerecordsbytimeproperty/?querytime=${query_time}&type=node&property=${junctionProperties}&schemename=${schemeName}`
+            ))
+          : (nodePromise = fetch(
               `${backendUrl}/queryallrecordsbytimeproperty/?querytime=${query_time}&type=node&property=${junctionProperties}`
-        );
+            ));
         requests.push(nodePromise);
       }
     }
@@ -95,9 +124,13 @@ const Timeline: React.FC = () => {
       if (linkCacheRef.current.has(linkCacheKey)) {
         linkRecords = linkCacheRef.current.get(linkCacheKey)!;
       } else {
-        linkPromise = fetch(
+        disableDateSelection && schemeName
+          ? (linkPromise = fetch(
+              `${backendUrl}/queryallschemerecordsbytimeproperty/?querytime=${query_time}&type=link&property=${pipeProperties}&schemename=${schemeName}`
+            ))
+          : (linkPromise = fetch(
               `${backendUrl}/queryallrecordsbytimeproperty/?querytime=${query_time}&type=link&property=${pipeProperties}`
-        );
+            ));
         requests.push(linkPromise);
       }
     }
@@ -192,6 +225,10 @@ const Timeline: React.FC = () => {
   const handleSliderChange = useCallback(
     (event: Event, newValue: number | number[]) => {
       const value = Array.isArray(newValue) ? newValue[0] : newValue;
+      // 如果有时间范围限制，只允许在范围内拖动
+      if (timeRange && (value < minTime || value > maxTime)) {
+        return;
+      }
       // 防抖设置currentTime，避免频繁触发数据获取
       if (debounceRef.current) {
         clearTimeout(debounceRef.current);
@@ -200,7 +237,7 @@ const Timeline: React.FC = () => {
         setCurrentTime(value);
       }, 300); // 300ms 防抖延迟
     },
-    []
+    [timeRange, minTime, maxTime]
   );
 
   // 播放控制
@@ -217,7 +254,12 @@ const Timeline: React.FC = () => {
 
       intervalRef.current = setInterval(() => {
         setCurrentTime((prev) => {
-          const next = prev >= 1440 ? 0 : prev + 15; // 到达24:00后回到00:00
+          let next = prev + 15;
+          if (timeRange) {
+            if (next > maxTime) next = minTime;
+          } else {
+            if (next >= 1440) next = 0;
+          }
           return next;
         });
       }, playInterval);
@@ -261,17 +303,27 @@ const Timeline: React.FC = () => {
   }, []);
   const handleStepBackward = useCallback(() => {
     setCurrentTime((prev) => {
-      const next = prev <= 0 ? 1440 : prev - 15;
+      let next = prev - 15;
+      if (timeRange) {
+        if (next < minTime) next = maxTime;
+      } else {
+        if (next <= 0) next = 1440;
+      }
       return next;
     });
-  }, []);
+  }, [timeRange, minTime, maxTime]);
 
   const handleStepForward = useCallback(() => {
     setCurrentTime((prev) => {
-      const next = prev >= 1440 ? 0 : prev + 15;
+      let next = prev + 15;
+      if (timeRange) {
+        if (next > maxTime) next = minTime;
+      } else {
+        if (next >= 1440) next = 0;
+      }
       return next;
     });
-  }, []);
+  }, [timeRange, minTime, maxTime]);
 
   // 日期选择处理
   const handleDateChange = useCallback((newDate: Date | null) => {
@@ -291,7 +343,12 @@ const Timeline: React.FC = () => {
         clearInterval(intervalRef.current);
         intervalRef.current = setInterval(() => {
           setCurrentTime((prev) => {
-            const next = prev >= 1440 ? 0 : prev + 15;
+            let next = prev + 15;
+            if (timeRange) {
+              if (next > maxTime) next = minTime;
+            } else {
+              if (next >= 1440) next = 0;
+            }
             return next;
           });
         }, newInterval);
@@ -333,8 +390,8 @@ const Timeline: React.FC = () => {
     const currentTime = new Date();
     const minutes = currentTime.getHours() * 60 + currentTime.getMinutes();
     // 找到最近的前15分钟刻度
-    const roundedMinutes = Math.floor(minutes / 15) * 15;
+    // const roundedMinutes = Math.floor(minutes / 15) * 15;
-    setCurrentTime(roundedMinutes); // 组件卸载时重置时间
+    setCurrentTime(minutes); // 组件卸载时重置时间
 
     return () => {
       if (intervalRef.current) {
@@ -345,6 +402,13 @@ const Timeline: React.FC = () => {
       }
     };
   }, []);
+
+  // 当 timeRange 改变时，设置 currentTime 到 minTime
+  useEffect(() => {
+    if (timeRange) {
+      setCurrentTime(minTime);
+    }
+  }, [timeRange, minTime]);
   // 获取地图实例
   const map = useMap();
   // 这里防止地图缩放时，瓦片重新加载引起的属性更新出错
@@ -364,6 +428,7 @@ const Timeline: React.FC = () => {
   }, [map, handlePause]);
 
   return (
+    <div className="absolute bottom-4 left-1/2 -translate-x-1/2 z-10 w-[920px] opacity-90 hover:opacity-100 transition-opacity duration-300">
       <LocalizationProvider dateAdapter={AdapterDateFns} adapterLocale={zhCN}>
         <Paper
           elevation={3}
@@ -391,6 +456,7 @@ const Timeline: React.FC = () => {
                   color="primary"
                   onClick={handleDayStepBackward}
                   size="small"
+                  disabled={disableDateSelection}
                 >
                   <FiSkipBack />
                 </IconButton>
@@ -410,6 +476,7 @@ const Timeline: React.FC = () => {
                 format="yyyy-MM-dd"
                 sx={{ width: 180, "& .MuiInputBase-root": { height: 40 } }}
                 maxDate={new Date()} // 禁止选取未来的日期
+                disabled={disableDateSelection}
               />
               <Tooltip title="前进一天">
                 <IconButton
@@ -417,6 +484,7 @@ const Timeline: React.FC = () => {
                   onClick={handleDayStepForward}
                   size="small"
                   disabled={
+                    disableDateSelection ||
                     selectedDate.toDateString() === new Date().toDateString()
                   }
                 >
@@ -472,7 +540,11 @@ const Timeline: React.FC = () => {
                 </Tooltip>
 
                 <Tooltip title="停止">
-                <IconButton color="secondary" onClick={handleStop} size="small">
+                  <IconButton
+                    color="secondary"
+                    onClick={handleStop}
+                    size="small"
+                  >
                     <Stop />
                   </IconButton>
                 </Tooltip>
@@ -520,8 +592,7 @@ const Timeline: React.FC = () => {
               </Typography>
             </Stack>
 
-          {/* 时间轴滑块 */}
+            <Box ref={timelineRef} sx={{ px: 2, position: "relative" }}>
-          <Box ref={timelineRef} sx={{ px: 2 }}>
               <Slider
                 value={currentTime}
                 min={0}
@@ -532,6 +603,7 @@ const Timeline: React.FC = () => {
                 valueLabelDisplay="auto"
                 valueLabelFormat={formatTime}
                 sx={{
+                  zIndex: 10,
                   height: 8,
                   "& .MuiSlider-track": {
                     backgroundColor: "primary.main",
@@ -565,10 +637,51 @@ const Timeline: React.FC = () => {
                   },
                 }}
               />
+              {/* 禁用区域遮罩 */}
+              {timeRange && (
+                <>
+                  {/* 左侧禁用区域 */}
+                  {minTime > 0 && (
+                    <Box
+                      sx={{
+                        position: "absolute",
+                        left: "14px",
+                        top: "30%",
+                        transform: "translateY(-50%)",
+                        width: `${(minTime / 1440) * 856 + 2}px`,
+                        height: "20px",
+                        backgroundColor: "rgba(189, 189, 189, 0.4)",
+                        pointerEvents: "none",
+                        backdropFilter: "blur(1px)",
+                        borderRadius: "2.5px",
+                        rounded: "true",
+                      }}
+                    />
+                  )}
+                  {/* 右侧禁用区域 */}
+                  {maxTime < 1440 && (
+                    <Box
+                      sx={{
+                        position: "absolute",
+                        left: `${16 + (maxTime / 1440) * 856}px`,
+                        top: "30%",
+                        transform: "translateY(-50%)",
+                        width: `${((1440 - maxTime) / 1440) * 856}px`,
+                        height: "20px",
+                        backgroundColor: "rgba(189, 189, 189, 0.4)",
+                        pointerEvents: "none",
+                        backdropFilter: "blur(1px)",
+                        borderRadius: "2.5px",
+                      }}
+                    />
+                  )}
+                </>
+              )}
             </Box>
           </Box>
         </Paper>
       </LocalizationProvider>
+    </div>
   );
 };
 

src/app/OlMap/Controls/Toolbar.tsx

@@ -13,12 +13,49 @@ import { Style, Stroke, Fill, Circle } from "ol/style";
 import { FeatureLike } from "ol/Feature";
 import Feature from "ol/Feature";
 import StyleEditorPanel from "./StyleEditorPanel";
+import StyleLegend from "./StyleLegend"; // 引入图例组件
 
 import { handleMapClickSelectFeatures as mapClickSelectFeatures } from "@/utils/mapQueryService";
 
 import { config } from "@/config/config";
 const backendUrl = config.backendUrl;
 
+// 图层样式状态接口
+interface StyleConfig {
+  property: string;
+  classificationMethod: string;
+  segments: number;
+  minSize: number;
+  maxSize: number;
+  minStrokeWidth: number;
+  maxStrokeWidth: number;
+  fixedStrokeWidth: number;
+  colorType: string;
+  startColor: string;
+  endColor: string;
+  showLabels: boolean;
+  opacity: number;
+  adjustWidthByProperty: boolean;
+}
+
+interface LegendStyleConfig {
+  layerId: string;
+  layerName: string;
+  property: string;
+  colors: string[];
+  type: string;
+  dimensions: number[];
+  breaks: number[];
+}
+
+interface LayerStyleState {
+  layerId: string;
+  layerName: string;
+  styleConfig: StyleConfig;
+  legendConfig: LegendStyleConfig;
+  isActive: boolean;
+}
+
 // 添加接口定义隐藏按钮的props
 interface ToolbarProps {
   hiddenButtons?: string[]; // 可选的隐藏按钮列表，例如 ['info', 'draw', 'style']
@@ -38,6 +75,79 @@ const Toolbar: React.FC<ToolbarProps> = ({ hiddenButtons }) => {
   const [highlightLayer, setHighlightLayer] =
     useState<VectorLayer<VectorSource> | null>(null);
 
+  // 样式状态管理 - 在 Toolbar 中管理，带有默认样式
+  const [layerStyleStates, setLayerStyleStates] = useState<LayerStyleState[]>([
+    {
+      isActive: false, // 默认不激活，不显示图例
+      layerId: "junctions",
+      layerName: "节点图层",
+      styleConfig: {
+        property: "pressure",
+        classificationMethod: "pretty_breaks",
+        segments: 6,
+        minSize: 4,
+        maxSize: 12,
+        minStrokeWidth: 2,
+        maxStrokeWidth: 8,
+        fixedStrokeWidth: 3,
+        colorType: "gradient",
+        startColor: "rgba(51, 153, 204, 0.9)",
+        endColor: "rgba(204, 51, 51, 0.9)",
+        showLabels: false,
+        opacity: 0.9,
+        adjustWidthByProperty: true,
+      },
+      legendConfig: {
+        layerId: "junctions",
+        layerName: "节点图层",
+        property: "压力", // 暂时为空，等计算后更新
+        colors: [],
+        type: "point",
+        dimensions: [],
+        breaks: [],
+      },
+    },
+    {
+      isActive: false, // 默认不激活，不显示图例
+      layerId: "pipes",
+      layerName: "管道图层",
+      styleConfig: {
+        property: "flow",
+        classificationMethod: "pretty_breaks",
+        segments: 6,
+        minSize: 4,
+        maxSize: 12,
+        minStrokeWidth: 2,
+        maxStrokeWidth: 8,
+        fixedStrokeWidth: 3,
+        colorType: "gradient",
+        startColor: "rgba(51, 153, 204, 0.9)",
+        endColor: "rgba(204, 51, 51, 0.9)",
+        showLabels: false,
+        opacity: 0.9,
+        adjustWidthByProperty: true,
+      },
+      legendConfig: {
+        layerId: "pipes",
+        layerName: "管道图层",
+        property: "流量", // 暂时为空，等计算后更新
+        colors: [],
+        type: "linestring",
+        dimensions: [],
+        breaks: [],
+      },
+    },
+  ]);
+
+  // 计算激活的图例配置
+  const activeLegendConfigs = layerStyleStates
+    .filter((state) => state.isActive && state.legendConfig.property)
+    .map((state) => ({
+      ...state.legendConfig,
+      layerName: state.layerName,
+      layerId: state.layerId,
+    }));
+
   // 创建高亮图层
   useEffect(() => {
     if (!map) return;
@@ -73,7 +183,9 @@ const Toolbar: React.FC<ToolbarProps> = ({ hiddenButtons }) => {
       map.removeLayer(highLightLayer);
     };
   }, [map]);
-
+  useEffect(() => {
+    console.log(layerStyleStates);
+  }, [layerStyleStates]);
   // 高亮要素的函数
   useEffect(() => {
     if (!highlightLayer) {
@@ -348,7 +460,23 @@ const Toolbar: React.FC<ToolbarProps> = ({ hiddenButtons }) => {
       </div>
       {showPropertyPanel && <PropertyPanel {...getFeatureProperties()} />}
       {showDrawPanel && map && <DrawPanel />}
-      {showStyleEditor && <StyleEditorPanel />}
+      {showStyleEditor && (
+        <StyleEditorPanel
+          layerStyleStates={layerStyleStates}
+          setLayerStyleStates={setLayerStyleStates}
+        />
+      )}
+
+      {/* 图例显示 */}
+      {activeLegendConfigs.length > 0 && (
+        <div className="absolute bottom-40 right-4 drop-shadow-xl flex flex-row items-end max-w-screen-lg overflow-x-auto z-10">
+          <div className="flex flex-row gap-3">
+            {activeLegendConfigs.map((config, index) => (
+              <StyleLegend key={`${config.layerId}-${index}`} {...config} />
+            ))}
+          </div>
+        </div>
+      )}
     </>
   );
 };

src/app/OlMap/Controls/Zoom.tsx

@@ -30,7 +30,7 @@ const Zoom: React.FC = () => {
   };
 
   return (
-    <div className="absolute right-4 bottom-8">
+    <div className="absolute right-4 bottom-8 z-10">
       <div className="w-8 h-26 flex flex-col gap-2 items-center">
         <div className="w-8 h-8 bg-gray-50 flex items-center justify-center rounded-xl drop-shadow-xl shadow-black">
           <button

src/app/OlMap/MapComponent.tsx

@@ -18,15 +18,12 @@ import WebGLVectorTileLayer from "ol/layer/WebGLVectorTile";
 import MVT from "ol/format/MVT";
 import { FlatStyleLike } from "ol/style/flat";
 import { toLonLat } from "ol/proj";
-import { center } from "@turf/center";
+import { along, bearing, lineString, length } from "@turf/turf";
-import { bearing } from "@turf/turf";
 import { Deck } from "@deck.gl/core";
 import { TextLayer } from "@deck.gl/layers";
 import { TripsLayer } from "@deck.gl/geo-layers";
 import { CollisionFilterExtension } from "@deck.gl/extensions";
 
-import StyleLegend from "./Controls/StyleLegend"; // 假设 StyleLegend 在同一目录
-
 interface MapComponentProps {
   children?: React.ReactNode;
 }
@@ -47,7 +44,6 @@ interface DataContextType {
   pipeText: string;
   setJunctionText?: React.Dispatch<React.SetStateAction<string>>;
   setPipeText?: React.Dispatch<React.SetStateAction<string>>;
-  updateLegendConfigs?: (configs: any[]) => void;
 }
 
 // 创建自定义Layer类来包装deck.gl
@@ -128,12 +124,7 @@ const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
   const [pipeText, setPipeText] = useState("");
   const flowAnimation = useRef(false); // 添加动画控制标志
   const [currentZoom, setCurrentZoom] = useState(12); // 当前缩放级别
-  // 图例配置
+
-  const [activeLegendConfigs, setActiveLegendConfigs] = useState<any[]>([]); // 存储图例配置
-  // 从 StyleEditorPanel 接收图例配置的回调
-  const updateLegendConfigs = (configs: any[]) => {
-    setActiveLegendConfigs(configs);
-  };
   // 防抖更新函数
   const debouncedUpdateData = useRef(
     debounce(() => {
@@ -297,16 +288,19 @@ const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
                     const [lon, lat] = toLonLat(coord);
                     return [lon, lat];
                   });
+                  // 添加验证：确保至少有 2 个坐标点
+                  if (lineCoordsWGS84.length < 2) return; // 跳过此特征
                   // 计算中点
-                  const midPoint = center({
+                  const lineStringFeature = lineString(lineCoordsWGS84);
-                    type: "LineString",
+                  const lineLength = length(lineStringFeature);
-                    coordinates: lineCoordsWGS84,
+                  const midPoint = along(lineStringFeature, lineLength / 2)
-                  }).geometry.coordinates;
+                    .geometry.coordinates;
                   // 计算角度
-                  let lineAngle = bearing(
+                  const prevPoint = along(lineStringFeature, lineLength * 0.49)
-                    lineCoordsWGS84[0],
+                    .geometry.coordinates;
-                    lineCoordsWGS84[lineCoordsWGS84.length - 1]
+                  const nextPoint = along(lineStringFeature, lineLength * 0.51)
-                  );
+                    .geometry.coordinates;
+                  let lineAngle = bearing(prevPoint, nextPoint);
                   lineAngle = -lineAngle + 90;
                   if (lineAngle < -90 || lineAngle > 90) {
                     lineAngle += 180;
@@ -611,28 +605,16 @@ const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
           showPipeText,
           junctionText,
           pipeText,
-          updateLegendConfigs,
         }}
       >
         <MapContext.Provider value={map}>
           <div className="relative w-full h-full">
             <div ref={mapRef} className="w-full h-full"></div>
             <MapTools />
-
             {children}
           </div>
           <canvas id="deck-canvas" />
         </MapContext.Provider>
-        {/* 图例始终渲染 */}
-        {activeLegendConfigs.length > 0 && (
-          <div className="absolute bottom-40 right-4 drop-shadow-xl flex flex-row items-end max-w-screen-lg overflow-x-auto z-10">
-            <div className="flex flex-row gap-3">
-              {activeLegendConfigs.map((config, index) => (
-                <StyleLegend key={`${config.layerId}-${index}`} {...config} />
-              ))}
-            </div>
-          </div>
-        )}
       </DataContext.Provider>
     </>
   );

src/components/olmap/BurstPipeAnalysis/AnalysisParameters.tsx

@@ -18,13 +18,15 @@ import "dayjs/locale/zh-cn";
 import { useMap } from "@app/OlMap/MapComponent";
 import VectorLayer from "ol/layer/Vector";
 import VectorSource from "ol/source/Vector";
-import Style from "ol/style/Style";
+import { Style, Stroke, Icon } from "ol/style";
-import Stroke from "ol/style/Stroke";
 import { handleMapClickSelectFeatures as mapClickSelectFeatures } from "@/utils/mapQueryService";
-import Feature from "ol/Feature";
+import Feature, { FeatureLike } from "ol/Feature";
 import { useNotification } from "@refinedev/core";
 import axios from "axios";
 import { config, NETWORK_NAME } from "@/config/config";
+import { along, lineString, length, toMercator } from "@turf/turf";
+import { Point } from "ol/geom";
+import { toLonLat } from "ol/proj";
 
 interface PipePoint {
   id: string;
@@ -54,34 +56,65 @@ const AnalysisParameters: React.FC = () => {
   useEffect(() => {
     if (!map) return;
 
-    // 创建高亮图层
+    const burstPipeStyle = function (feature: FeatureLike) {
-    const highlightLayer = new VectorLayer({
+      const styles = [];
-      source: new VectorSource(),
+      // 线条样式（底层发光，主线条，内层高亮线）
-      style: [
+      styles.push(
-        // 外层发光效果（底层）
         new Style({
           stroke: new Stroke({
             color: "rgba(255, 0, 0, 0.3)",
             width: 12,
           }),
         }),
-        // 主线条 - 使用虚线表示爆管
         new Style({
           stroke: new Stroke({
-            color: "#ff0000",
+            color: "rgba(255, 0, 0, 1)",
             width: 6,
-            lineDash: [15, 10], // 虚线样式，表示管道损坏/爆管
-          }),
-        }),
-        // 内层高亮线
-        new Style({
-          stroke: new Stroke({
-            color: "#ff6666",
-            width: 3,
             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) {
+        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_icon.svg",
+              scale: 0.2,
+              anchor: [0.5, 1],
+            }),
+          })
+        );
+      }
+      return styles;
+    };
+    // 创建高亮图层
+    const highlightLayer = new VectorLayer({
+      source: new VectorSource(),
+      style: burstPipeStyle,
       properties: {
         name: "高亮管道",
         value: "highlight_pipeline",
@@ -132,7 +165,6 @@ const AnalysisParameters: React.FC = () => {
         )
         .map((feature) => {
           const properties = feature.getProperties();
-          console.log("管道属性:", feature, properties);
           return {
             id: properties.id,
             diameter: properties.diameter || 0,
@@ -210,6 +242,14 @@ const AnalysisParameters: React.FC = () => {
   const handleAnalyze = async () => {
     setAnalyzing(true);
 
+    // 显示处理中的通知
+    open?.({
+      key: "burst-analysis",
+      type: "progress",
+      message: "方案提交分析中",
+      undoableTimeout: 3,
+    });
+
     const burst_ID = pipePoints.map((pipe) => pipe.id);
     const burst_size = pipePoints.map((pipe) =>
       parseInt(pipe.area.toString(), 10)
@@ -240,8 +280,8 @@ const AnalysisParameters: React.FC = () => {
       open?.({
         key: "burst-analysis",
         type: "success",
-        message: "分析请求提交成功",
+        message: "方案分析成功",
-        description: "方案已成功提交，正在进行分析",
+        description: "方案分析完成，请在方案查询中查看结果。",
       });
     } catch (error) {
       console.error("分析请求失败:", error);
@@ -427,7 +467,7 @@ const AnalysisParameters: React.FC = () => {
           disabled={analyzing}
           className="bg-blue-600 hover:bg-blue-700"
         >
-          {analyzing ? "方案提交中..." : "方案分析"}
+          {analyzing ? "方案提交分析中..." : "方案分析"}
         </Button>
       </Box>
     </Box>

src/components/olmap/BurstPipeAnalysis/SchemeQuery.tsx

@@ -1,6 +1,8 @@
 "use client";
 
 import React, { useEffect, useState } from "react";
+import ReactDOM from "react-dom"; // 添加这行
+
 import {
   Box,
   Button,
@@ -35,9 +37,12 @@ import * as turf from "@turf/turf";
 import { GeoJSON } from "ol/format";
 import VectorLayer from "ol/layer/Vector";
 import VectorSource from "ol/source/Vector";
-import { Stroke, Style } from "ol/style";
+import { Stroke, Style, Icon } from "ol/style";
-import Feature from "ol/Feature";
+import Feature, { FeatureLike } from "ol/Feature";
-import { set } from "ol/transform";
+import { along, lineString, length, toMercator } from "@turf/turf";
+import { Point } from "ol/geom";
+import { toLonLat } from "ol/proj";
+import Timeline from "@app/OlMap/Controls/Timeline";
 
 interface SchemeDetail {
   burst_ID: string[];
@@ -72,7 +77,6 @@ interface SchemaItem {
 interface SchemeQueryProps {
   schemes?: SchemeRecord[];
   onSchemesChange?: (schemes: SchemeRecord[]) => void;
-  onViewDetails?: (id: number) => void;
   onLocate?: (id: number) => void;
   network?: string;
 }
@@ -80,20 +84,29 @@ interface SchemeQueryProps {
 const SchemeQuery: React.FC<SchemeQueryProps> = ({
   schemes: externalSchemes,
   onSchemesChange,
-  onViewDetails,
   onLocate,
   network = NETWORK_NAME,
 }) => {
   const [queryAll, setQueryAll] = useState<boolean>(true);
   const [queryDate, setQueryDate] = useState<Dayjs | null>(dayjs(new Date()));
-  const [internalSchemes, setInternalSchemes] = useState<SchemeRecord[]>([]);
-  const [loading, setLoading] = useState<boolean>(false);
-  const [expandedId, setExpandedId] = useState<number | null>(null);
-  const { open } = useNotification();
-
   const [highlightLayer, setHighlightLayer] =
     useState<VectorLayer<VectorSource> | null>(null);
   const [highlightFeatures, setHighlightFeatures] = useState<Feature[]>([]);
+
+  // 时间轴相关状态
+  const [showTimeline, setShowTimeline] = useState(false);
+  const [selectedDate, setSelectedDate] = useState<Date | undefined>(undefined);
+  const [timeRange, setTimeRange] = useState<
+    { start: Date; end: Date } | undefined
+  >();
+  const [internalSchemes, setInternalSchemes] = useState<SchemeRecord[]>([]);
+  const [schemeName, setSchemeName] = useState<string>("");
+  const [loading, setLoading] = useState<boolean>(false);
+  const [expandedId, setExpandedId] = useState<number | null>(null);
+  const [mapContainer, setMapContainer] = useState<HTMLElement | null>(null); // 地图容器元素
+
+  const { open } = useNotification();
+
   const map = useMap();
 
   // 使用外部提供的 schemes 或内部状态
@@ -181,38 +194,95 @@ const SchemeQuery: React.FC<SchemeQueryProps> = ({
       });
     }
   };
+
+  // 内部的方案查询函数
+  const handleViewDetails = (id: number) => {
+    setShowTimeline(true);
+    // 计算时间范围
+    const scheme = schemes.find((s) => s.id === id);
+    const burstPipeIds = scheme?.schemeDetail?.burst_ID || [];
+    const schemeDate = scheme?.startTime
+      ? new Date(scheme.startTime)
+      : undefined;
+    if (scheme?.startTime && scheme.schemeDetail?.modify_total_duration) {
+      const start = new Date(scheme.startTime);
+      const end = new Date(
+        start.getTime() + scheme.schemeDetail.modify_total_duration * 1000
+      );
+      setSelectedDate(schemeDate);
+      setTimeRange({ start, end });
+      setSchemeName(scheme.schemeName);
+      handleLocatePipes(burstPipeIds);
+    }
+  };
+
   // 初始化管道图层和高亮图层
   useEffect(() => {
     if (!map) return;
-
+    // 获取地图的目标容器
-    // 创建高亮图层 - 爆管管段标识样式
+    const target = map.getTargetElement();
-    const highlightLayer = new VectorLayer({
+    if (target) {
-      source: new VectorSource(),
+      setMapContainer(target);
-      style: [
+    }
-        // 外层发光效果（底层）
+    const burstPipeStyle = function (feature: FeatureLike) {
+      const styles = [];
+      // 线条样式（底层发光，主线条，内层高亮线）
+      styles.push(
         new Style({
           stroke: new Stroke({
             color: "rgba(255, 0, 0, 0.3)",
             width: 12,
           }),
         }),
-        // 主线条 - 使用虚线表示爆管
         new Style({
           stroke: new Stroke({
-            color: "#ff0000",
+            color: "rgba(255, 0, 0, 1)",
             width: 6,
-            lineDash: [15, 10], // 虚线样式，表示管道损坏/爆管
-          }),
-        }),
-        // 内层高亮线
-        new Style({
-          stroke: new Stroke({
-            color: "#ff6666",
-            width: 3,
             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) {
+        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_icon.svg",
+              scale: 0.2,
+              anchor: [0.5, 1],
+            }),
+          })
+        );
+      }
+      return styles;
+    };
+    // 创建高亮图层 - 爆管管段标识样式
+    const highlightLayer = new VectorLayer({
+      source: new VectorSource(),
+      style: burstPipeStyle,
       properties: {
         name: "爆管管段高亮",
         value: "burst_pipe_highlight",
@@ -247,6 +317,19 @@ const SchemeQuery: React.FC<SchemeQueryProps> = ({
   }, [highlightFeatures]);
 
   return (
+    <>
+      {/* 将时间轴渲染到地图容器中 */}
+      {showTimeline &&
+        mapContainer &&
+        ReactDOM.createPortal(
+          <Timeline
+            schemeDate={selectedDate}
+            timeRange={timeRange}
+            disableDateSelection={!!timeRange}
+            schemeName={schemeName}
+          />,
+          mapContainer // 渲染到地图容器中，而不是 body
+        )}
       <Box className="flex flex-col h-full">
         {/* 查询条件 - 单行布局 */}
         <Box className="mb-2 p-2 bg-gray-50 rounded">
@@ -367,7 +450,8 @@ const SchemeQuery: React.FC<SchemeQueryProps> = ({
                           variant="caption"
                           className="text-gray-500 block"
                         >
-                        ID: {scheme.id} · 日期: {formatTime(scheme.create_time)}
+                          ID: {scheme.id} · 日期:{" "}
+                          {formatTime(scheme.create_time)}
                         </Typography>
                       </Box>
                       {/* 操作按钮 */}
@@ -471,7 +555,8 @@ const SchemeQuery: React.FC<SchemeQueryProps> = ({
                                   variant="caption"
                                   className="font-medium text-gray-900"
                                 >
-                                {scheme.schemeDetail?.burst_size?.[0] || "N/A"}{" "}
+                                  {scheme.schemeDetail?.burst_size?.[0] ||
+                                    "N/A"}{" "}
                                   cm²
                                 </Typography>
                               </Box>
@@ -556,7 +641,9 @@ const SchemeQuery: React.FC<SchemeQueryProps> = ({
                               size="small"
                               className="border-blue-600 text-blue-600 hover:bg-blue-50"
                               onClick={() =>
-                              handleLocatePipes?.(scheme.schemeDetail!.burst_ID)
+                                handleLocatePipes?.(
+                                  scheme.schemeDetail!.burst_ID
+                                )
                               }
                               sx={{
                                 textTransform: "none",
@@ -571,7 +658,7 @@ const SchemeQuery: React.FC<SchemeQueryProps> = ({
                             fullWidth
                             size="small"
                             className="bg-blue-600 hover:bg-blue-700"
-                          onClick={() => onViewDetails?.(scheme.id)}
+                            onClick={() => handleViewDetails(scheme.id)}
                             sx={{
                               textTransform: "none",
                               fontWeight: 500,
@@ -589,6 +676,7 @@ const SchemeQuery: React.FC<SchemeQueryProps> = ({
           )}
         </Box>
       </Box>
+    </>
   );
 };
 

src/components/olmap/BurstPipeAnalysisPanel.tsx

@@ -12,7 +12,6 @@ import {
 import AnalysisParameters from "./BurstPipeAnalysis/AnalysisParameters";
 import SchemeQuery from "./BurstPipeAnalysis/SchemeQuery";
 import LocationResults from "./BurstPipeAnalysis/LocationResults";
-
 interface SchemeDetail {
   burst_ID: string[];
   burst_size: number[];
@@ -81,7 +80,6 @@ const BurstPipeAnalysisPanel: React.FC<BurstPipeAnalysisPanelProps> = ({
   const handleTabChange = (_event: React.SyntheticEvent, newValue: number) => {
     setCurrentTab(newValue);
   };
-
   const drawerWidth = 520;
 
   return (
@@ -89,7 +87,7 @@ const BurstPipeAnalysisPanel: React.FC<BurstPipeAnalysisPanelProps> = ({
       {/* 收起时的触发按钮 */}
       {!isOpen && (
         <Box
-          className="absolute top-4 right-4 z-[1300] bg-white shadow-2xl rounded-lg cursor-pointer hover:shadow-xl transition-all duration-300 opacity-95 hover:opacity-100"
+          className="absolute top-4 right-4 bg-white shadow-2xl rounded-lg cursor-pointer hover:shadow-xl transition-all duration-300 opacity-95 hover:opacity-100"
           onClick={handleToggle}
         >
           <Box className="flex flex-col items-center py-3 px-3 gap-1">
@@ -205,10 +203,6 @@ const BurstPipeAnalysisPanel: React.FC<BurstPipeAnalysisPanelProps> = ({
             <SchemeQuery
               schemes={schemes}
               onSchemesChange={setSchemes}
-              onViewDetails={(id) => {
-                console.log("查看详情:", id);
-                // TODO: 显示方案详情
-              }}
               onLocate={(id) => {
                 console.log("定位方案:", id);
                 // TODO: 在地图上定位

src/components/olmap/SCADADataPanel.tsx

@@ -356,7 +356,7 @@ const SCADADataPanel: React.FC<SCADADataPanelProps> = ({
     <Paper
       className={clsx(
         "absolute right-4 top-20 w-4xl h-2xl bg-white rounded-xl shadow-lg overflow-hidden flex flex-col transition-opacity duration-300",
-        visible ? "opacity-95 hover:opacity-100" : "opacity-0 -z-10"
+        visible ? "opacity-95 hover:opacity-100" : "opacity-0 z-10"
       )}
     >
       {/* Header */}