完成管道冲洗功能页面；调整水质模拟默认pattern；调整sidebar菜单名；

src/app/(main)/hydraulic-simulation/pipe-flushing/page.tsx

@@ -2,12 +2,14 @@
 
 import MapComponent from "@app/OlMap/MapComponent";
 import MapToolbar from "@app/OlMap/Controls/Toolbar";
+import FlushingAnalysisPanel from "@/components/olmap/FlushingAnalysis/FlushingAnalysisPanel";
 
 export default function Home() {
   return (
     <div className="relative w-full h-full overflow-hidden">
       <MapComponent>
         <MapToolbar queryType="scheme" />
+        <FlushingAnalysisPanel />
       </MapComponent>
     </div>
   );

src/app/_refine_context.tsx

@@ -158,7 +158,7 @@ const App = (props: React.PropsWithChildren<AppProps>) => {
                   name: "Hydraulic Simulation",
                   meta: {
                     icon: <MdWater className="w-6 h-6" />,
-                    label: "水力仿真",
+                    label: "水力模拟",
                   },
                 },
                 {

src/components/olmap/BurstPipeAnalysis/AnalysisParameters.tsx

@@ -381,7 +381,7 @@ const AnalysisParameters: React.FC = () => {
               key={pipe.id}
               className="flex items-center gap-2 p-2 bg-gray-50 rounded"
             >
-              <Typography className="flex-shrink-0 text-sm">
+              <Typography className="flex-shrink-0 text-sm pl-1">
                 {pipe.id}
               </Typography>
               <Typography className="flex-shrink-0 text-sm text-gray-600">

src/components/olmap/BurstPipeAnalysis/ValveIsolation.tsx

@@ -908,7 +908,7 @@ const ValveIsolation: React.FC<ValveIsolationProps> = ({
                   {selectedPipeId ? (
                     <Box className="flex items-center gap-2 p-2 bg-green-50 rounded border border-green-200">
                       <CheckCircleIcon className="text-green-600" fontSize="small" />
-                      <Typography className="flex-1 text-sm font-medium text-gray-700">
+                      <Typography className="flex-1 text-sm font-medium pl-1 text-gray-700">
                         {selectedPipeId}
                       </Typography>
                       <Typography className="text-xs text-gray-500">

src/components/olmap/ContaminantSimulation/AnalysisParameters.tsx

@@ -181,7 +181,7 @@ const AnalysisParameters: React.FC = () => {
         source: sourceNode,
         concentration,
         duration,
-        pattern: pattern || undefined,
+        pattern: pattern || "CONSTANT",
         scheme_name: schemeName,
       };
 
@@ -276,7 +276,7 @@ const AnalysisParameters: React.FC = () => {
         <Stack spacing={2}>
           {sourceNode ? (
             <Box className="flex items-center gap-2 p-2 bg-gray-50 rounded">
-              <Typography className="flex-shrink-0 text-sm">
+              <Typography className="flex-shrink-0 pl-1 text-sm">
                 {sourceNode}
               </Typography>
               <Typography className="flex-shrink-0 text-sm text-gray-600">
@@ -373,7 +373,7 @@ const AnalysisParameters: React.FC = () => {
           size="small"
           value={pattern}
           onChange={(e) => setPattern(e.target.value)}
-          placeholder="可选，输入 pattern 名称"
+          placeholder="可选，输入 pattern 名称，默认为 CONSTANT"
         />
       </Box>
 

src/components/olmap/FlushingAnalysis/AnalysisParameters.tsx

@@ -0,0 +1,451 @@
+"use client";
+
+import React, { useState, useEffect, useCallback } from "react";
+import {
+  Box,
+  TextField,
+  Button,
+  Typography,
+  IconButton,
+  Stack,
+  Alert,
+  Divider,
+} from "@mui/material";
+import { Close as CloseIcon } from "@mui/icons-material";
+import { DateTimePicker } from "@mui/x-date-pickers/DateTimePicker";
+import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
+import { zhCN as pickerZhCN } from "@mui/x-date-pickers/locales";
+import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
+import "dayjs/locale/zh-cn";
+import dayjs, { Dayjs } from "dayjs";
+import { useMap } from "@app/OlMap/MapComponent";
+import VectorLayer from "ol/layer/Vector";
+import VectorSource from "ol/source/Vector";
+import { Style, Stroke, Fill, Circle as CircleStyle } from "ol/style";
+import { handleMapClickSelectFeatures as mapClickSelectFeatures } from "@/utils/mapQueryService";
+import Feature, { FeatureLike } from "ol/Feature";
+import { useNotification } from "@refinedev/core";
+import axios from "axios";
+import { config, NETWORK_NAME } from "@/config/config";
+
+interface ValveItem {
+  id: string;
+  k: number;
+  feature?: any;
+}
+
+const AnalysisParameters: React.FC = () => {
+  const map = useMap();
+  const { open } = useNotification();
+
+  // State
+  const [schemeName, setSchemeName] = useState<string>(
+    "Flushing_" + new Date().getTime(),
+  );
+  const [valves, setValves] = useState<ValveItem[]>([]);
+  const [drainageNode, setDrainageNode] = useState<string | null>(null);
+  const [drainageFeature, setDrainageFeature] = useState<Feature | null>(null);
+
+  const [startTime, setStartTime] = useState<Dayjs | null>(dayjs(new Date()));
+  const [flushFlow, setFlushFlow] = useState<number>(0);
+  const [duration, setDuration] = useState<number>(3600);
+
+  const [selectionMode, setSelectionMode] = useState<'none' | 'valve' | 'drainage'>('none');
+  const [analyzing, setAnalyzing] = useState<boolean>(false);
+
+  const [highlightLayer, setHighlightLayer] = useState<VectorLayer<VectorSource> | null>(null);
+
+  // Initialize highlight layer
+  useEffect(() => {
+    if (!map) return;
+
+    const highlightStyle = function (feature: FeatureLike) {
+      const styles = [];
+      const type = feature.get("type"); // We will set this property when adding to source
+
+      if (type === "valve") {
+        styles.push(
+          new Style({
+            image: new CircleStyle({
+              radius: 8,
+              fill: new Fill({ color: "rgba(255, 165, 0, 0.8)" }), // Orange for valves
+              stroke: new Stroke({ color: "white", width: 2 }),
+            }),
+          })
+        );
+      } else if (type === "drainage") {
+        styles.push(
+          new Style({
+            image: new CircleStyle({
+              radius: 8,
+              fill: new Fill({ color: "rgba(0, 0, 255, 0.8)" }), // Blue for drainage
+              stroke: new Stroke({ color: "white", width: 2 }),
+            }),
+          })
+        );
+      }
+      return styles;
+    };
+
+    const layer = new VectorLayer({
+      source: new VectorSource(),
+      style: highlightStyle,
+      zIndex: 1000,
+      properties: {
+        name: "FlushingHighlight",
+      },
+    });
+
+    map.addLayer(layer);
+    setHighlightLayer(layer);
+
+    return () => {
+      map.removeLayer(layer);
+      map.un("click", handleMapClickSelectFeatures);
+    };
+  }, [map]);
+
+  // Update highlight layer features
+  useEffect(() => {
+    if (!highlightLayer) return;
+    const source = highlightLayer.getSource();
+    if (!source) return;
+
+    source.clear();
+
+    // Add valves
+    valves.forEach((v) => {
+      if (v.feature) {
+        const f = v.feature.clone(); // Clone to avoid modifying original
+        f.set("type", "valve");
+        // Ensure geometry is present (it should be for features from map)
+        if (f.getGeometry()) {
+          source.addFeature(f);
+        }
+      }
+    });
+
+    // Add drainage node
+    if (drainageFeature) {
+      const f = drainageFeature.clone();
+      f.set("type", "drainage");
+      source.addFeature(f);
+    }
+
+  }, [highlightLayer, valves, drainageFeature]);
+
+  // Map click handler
+  const handleMapClickSelectFeatures = useCallback(
+    async (event: { coordinate: number[] }) => {
+      if (!map || selectionMode === 'none') return;
+
+      const feature = await mapClickSelectFeatures(event, map);
+      if (!feature) return;
+
+      const layer = feature.getId()?.toString().split(".")[0];
+      const featureId = feature.getProperties().id;
+
+      if (selectionMode === 'valve') {
+        if (layer !== 'geo_valves') {
+          open?.({
+            type: "error",
+            message: "请选择阀门要素",
+          });
+          return;
+        }
+
+        setValves((prev) => {
+          if (prev.some((v) => v.id === featureId)) {
+            open?.({
+              type: "error",
+              message: "该阀门已添加",
+            });
+            return prev;
+          }
+          return [...prev, { id: featureId, k: 1.0, feature }]; // Default k=1.0? User can change.
+        });
+
+      } else if (selectionMode === 'drainage') {
+        if (layer !== 'geo_junctions') {
+          open?.({
+            type: "error",
+            message: "请选择节点要素作为排水点",
+          });
+          return;
+        }
+        setDrainageNode(featureId);
+        setDrainageFeature(feature);
+        setSelectionMode('none'); // Auto exit selection after picking one
+        map.un("click", handleMapClickSelectFeatures);
+      }
+    },
+    [map, selectionMode, open]
+  );
+
+  // Bind click event based on selection mode
+  useEffect(() => {
+    if (!map || selectionMode === "none") return;
+
+    map.on("click", handleMapClickSelectFeatures);
+
+    return () => {
+      map.un("click", handleMapClickSelectFeatures);
+    };
+  }, [map, selectionMode, handleMapClickSelectFeatures]);
+
+  // Toggle selection
+  const toggleSelection = (mode: 'valve' | 'drainage') => {
+    // If clicking same mode, turn off
+    if (selectionMode === mode) {
+      setSelectionMode('none');
+    } else {
+      setSelectionMode(mode);
+    }
+  };
+
+  const handleRemoveValve = (id: string) => {
+    setValves((prev) => prev.filter((v) => v.id !== id));
+  };
+
+  const handleValveKChange = (id: string, k: string) => {
+    const numK = parseFloat(k);
+    setValves(prev => prev.map(v => v.id === id ? { ...v, k: isNaN(numK) ? 0 : numK } : v));
+  };
+
+  const handleAnalyze = async () => {
+    if (!startTime || !drainageNode || !schemeName.trim()) {
+      open?.({
+        type: "error",
+        message: "请填写完整参数",
+        description: "方案名称、开始时间和排水点为必填项",
+      });
+      return;
+    }
+
+    setAnalyzing(true);
+
+    try {
+      const formattedTime = startTime.format("YYYY-MM-DDTHH:mm:00");
+
+      const params = {
+        scheme_name: schemeName,
+        network: NETWORK_NAME,
+        start_time: formattedTime,
+        valves: valves.map(v => v.id),
+        valves_k: valves.map(v => v.k),
+        drainage_node_ID: drainageNode,
+        flush_flow: flushFlow,
+        duration: duration
+      };
+
+      // Use params serializer to handle array params correctly if needed, 
+      // but axios usually handles array as valves[]=1&valves[]=2
+      // FastAPI default expects repeated query params.
+
+      const response = await axios.get(`${config.BACKEND_URL}/flushing_analysis/`, {
+        params,
+        // Ensure arrays are sent as repeated keys: valves=1&valves=2
+        paramsSerializer: {
+          indexes: null // Result: valves=1&valves=2
+        }
+      });
+      if (response.status !== 200) {
+        throw new Error(`分析请求失败，状态码: ${response.status}`);
+      }
+      open?.({
+        type: "success",
+        message: "方案分析成功",
+        description: "管道冲洗模拟完成，请在方案查询中查看结果。",
+      });
+    } catch (error) {
+      console.error("提交分析失败", error);
+      open?.({
+        type: "error",
+        message: "提交分析失败",
+        description: error instanceof Error ? error.message : "未知错误",
+      });
+    } finally {
+      setAnalyzing(false);
+    }
+  };
+
+  return (
+    <Box className="flex flex-col h-full gap-4 pb-4">
+      {/* 1. Valve Selection */}
+      <Box>
+        <Box className="flex items-center justify-between mb-2">
+          <Typography variant="subtitle2" className="font-medium">
+            参与阀门
+          </Typography>
+          <Button
+            variant={selectionMode === 'valve' ? "contained" : "outlined"}
+            color={selectionMode === 'valve' ? "error" : "primary"}
+            size="small"
+            onClick={() => toggleSelection('valve')}
+          >
+            {selectionMode === 'valve' ? "停止选择" : "选择阀门"}
+          </Button>
+        </Box>
+        {selectionMode === 'valve' && (
+          <Box className="mb-2 p-2 bg-blue-50 text-xs text-blue-700 rounded">
+            点击地图上的阀门进行添加
+          </Box>
+        )}
+        <Stack spacing={1} className="max-h-50 h-48 overflow-auto">
+          {valves.map((valve) => (
+            <Box key={valve.id} className="flex items-center gap-2 p-2 bg-gray-50 rounded">
+              <Typography className="text-sm flex-1 pl-1">{valve.id}</Typography>
+              <TextField
+                label="开度"
+                size="small"
+                type="number"
+                value={valve.k}
+                onChange={(e) => handleValveKChange(valve.id, e.target.value)}
+                className="w-20"
+                slotProps={{ htmlInput: { step: 0.1, min: 0, max: 1 } }}
+              />
+              <IconButton size="small" onClick={() => handleRemoveValve(valve.id)}>
+                <CloseIcon fontSize="small" />
+              </IconButton>
+            </Box>
+          ))}
+          {valves.length === 0 && (
+            <Typography variant="caption" className="text-gray-400 text-center py-20">
+              暂无选中阀门
+            </Typography>
+          )}
+        </Stack>
+      </Box>
+
+      <Divider />
+
+      {/* 2. Drainage Node Selection */}
+      <Box>
+        <Box className="flex items-center justify-between mb-2">
+          <Typography variant="subtitle2" className="font-medium">
+            排水节点
+          </Typography>
+          <Button
+            variant={selectionMode === 'drainage' ? "contained" : "outlined"}
+            color={selectionMode === 'drainage' ? "error" : "primary"}
+            size="small"
+            onClick={() => toggleSelection('drainage')}
+          >
+            {selectionMode === 'drainage' ? "停止选择" : "选择节点"}
+          </Button>
+        </Box>
+        {selectionMode === 'drainage' && (
+          <Box className="mb-2 p-2 bg-blue-50 text-xs text-blue-700 rounded">
+            点击地图上的节点作为排水点
+          </Box>
+        )}
+        <Stack spacing={1} className="h-12 overflow-auto">
+          {drainageNode && (
+            <Box className="flex items-center gap-2 p-2 bg-gray-50 rounded">
+              <Typography className="text-sm flex-1 pl-1">{drainageNode}</Typography>
+              <IconButton
+                size="small"
+                onClick={() => {
+                  setDrainageNode(null);
+                  setDrainageFeature(null);
+                }}
+              >
+                <CloseIcon fontSize="small" />
+              </IconButton>
+            </Box>
+          )}
+          {!drainageNode && (
+            <Typography variant="caption" className="text-gray-400 text-center py-2">
+              暂无选中排水节点
+            </Typography>
+          )}
+        </Stack>
+      </Box>
+
+      <Divider />
+
+      {/* 3. Parameters */}
+      <Box className="flex flex-col gap-3">
+        <Box>
+          <Typography variant="subtitle2" className="mb-1 font-medium">
+            开始时间
+          </Typography>
+          <LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale="zh-cn">
+            <DateTimePicker
+              value={startTime}
+              onChange={(newValue) => setStartTime(newValue)}
+              format="YYYY-MM-DD HH:mm"
+              slotProps={{ textField: { size: "small", fullWidth: true } }}
+              localeText={
+                pickerZhCN.components.MuiLocalizationProvider.defaultProps
+                  .localeText
+              }
+            />
+          </LocalizationProvider>
+        </Box>
+
+        {/* Scheme Name */}
+        <Box>
+          <Typography variant="subtitle2" className="mb-1 font-medium">
+            方案名称
+          </Typography>
+          <TextField
+            fullWidth
+            size="small"
+            value={schemeName}
+            onChange={(e) => setSchemeName(e.target.value)}
+            placeholder="请输入方案名称"
+          />
+        </Box>
+
+        <Box className="flex gap-2">
+          <Box className="flex-1">
+            <Typography variant="subtitle2" className="mb-1 font-medium">
+              冲洗流量
+            </Typography>
+            <TextField
+              fullWidth
+              size="small"
+              type="number"
+              value={flushFlow}
+              onChange={(e) => setFlushFlow(parseFloat(e.target.value) || 0)}
+            />
+          </Box>
+          <Box className="flex-1">
+            <Typography variant="subtitle2" className="mb-1 font-medium">
+              持续时长 (秒)
+            </Typography>
+            <TextField
+              fullWidth
+              size="small"
+              type="number"
+              value={duration}
+              onChange={(e) => setDuration(parseInt(e.target.value) || 0)}
+            />
+          </Box>
+        </Box>
+      </Box>
+
+      <Box className="mt-2">
+        <Button
+          fullWidth
+          variant="contained"
+          onClick={handleAnalyze}
+          disabled={
+            analyzing ||
+            !schemeName.trim() ||
+            !drainageNode ||
+            !startTime ||
+            !flushFlow ||
+            !duration
+          }
+          className="bg-blue-600 hover:bg-blue-700"
+        >
+          {analyzing ? "分析中..." : "开始分析"}
+        </Button>
+      </Box>
+    </Box>
+  );
+};
+
+export default AnalysisParameters;

src/components/olmap/FlushingAnalysis/FlushingAnalysisPanel.tsx

@@ -0,0 +1,194 @@
+"use client";
+
+import React, { useState } from "react";
+import {
+  Box,
+  Drawer,
+  Tabs,
+  Tab,
+  Typography,
+  IconButton,
+  Tooltip,
+} from "@mui/material";
+import {
+  ChevronRight,
+  ChevronLeft,
+  Analytics as AnalyticsIcon,
+  Search as SearchIcon,
+} from "@mui/icons-material";
+import { MdCleaningServices } from "react-icons/md";
+import AnalysisParameters from "./AnalysisParameters";
+import SchemeQuery from "./SchemeQuery";
+
+interface TabPanelProps {
+  children?: React.ReactNode;
+  index: number;
+  value: number;
+}
+
+const TabPanel: React.FC<TabPanelProps> = ({ children, value, index }) => {
+  return (
+    <div
+      role="tabpanel"
+      hidden={value !== index}
+      className="flex-1 overflow-hidden flex flex-col"
+    >
+      {value === index && (
+        <Box className="flex-1 overflow-auto p-4">{children}</Box>
+      )}
+    </div>
+  );
+};
+
+interface FlushingAnalysisPanelProps {
+  open?: boolean;
+  onToggle?: () => void;
+}
+
+const FlushingAnalysisPanel: React.FC<FlushingAnalysisPanelProps> = ({
+  open: controlledOpen,
+  onToggle,
+}) => {
+  const [internalOpen, setInternalOpen] = useState(true);
+  const [currentTab, setCurrentTab] = useState(0);
+
+  // Using controlled or uncontrolled state
+  const isOpen = controlledOpen !== undefined ? controlledOpen : internalOpen;
+  const handleToggle = () => {
+    if (onToggle) {
+      onToggle();
+    } else {
+      setInternalOpen(!internalOpen);
+    }
+  };
+
+  const handleTabChange = (_event: React.SyntheticEvent, newValue: number) => {
+    setCurrentTab(newValue);
+  };
+
+  const drawerWidth = 450; // Slightly narrower than burst analysis as we have fewer tabs
+  const panelTitle = "管道冲洗分析";
+
+  return (
+    <>
+      {/* Toggle Button when closed */}
+      {!isOpen && (
+        <Box
+          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}
+          sx={{ zIndex: 1300 }}
+        >
+          <Box className="flex flex-col items-center py-3 px-3 gap-1">
+            <MdCleaningServices className="text-[#257DD4] w-5 h-5" />
+            <Typography
+              variant="caption"
+              className="text-gray-700 font-semibold my-1 text-xs"
+              style={{ writingMode: "vertical-rl" }}
+            >
+              {panelTitle}
+            </Typography>
+            <ChevronLeft className="text-gray-600 w-4 h-4" />
+          </Box>
+        </Box>
+      )}
+
+      {/* Main Panel */}
+      <Drawer
+        anchor="right"
+        open={isOpen}
+        variant="persistent"
+        hideBackdrop
+        sx={{
+          width: 0,
+          flexShrink: 0,
+          "& .MuiDrawer-paper": {
+            width: drawerWidth,
+            boxSizing: "border-box",
+            position: "absolute",
+            top: 16,
+            right: 16,
+            height: "calc(100vh - 32px)",
+            maxHeight: "850px",
+            borderRadius: "12px",
+            boxShadow:
+              "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
+            backdropFilter: "blur(8px)",
+            opacity: 0.95,
+            transition: "transform 0.3s ease-in-out, opacity 0.3s ease-in-out",
+            border: "none",
+            "&:hover": {
+              opacity: 1,
+            },
+          },
+        }}
+      >
+        <Box className="flex flex-col h-full bg-white rounded-xl overflow-hidden">
+          {/* Header */}
+          <Box className="flex items-center justify-between px-5 py-4 bg-[#257DD4] text-white">
+            <Box className="flex items-center gap-2">
+              <MdCleaningServices className="w-5 h-5" />
+              <Typography variant="h6" className="text-lg font-semibold">
+                {panelTitle}
+              </Typography>
+            </Box>
+            <Tooltip title="收起">
+              <IconButton
+                size="small"
+                onClick={handleToggle}
+                sx={{ color: "primary.contrastText" }}
+              >
+                <ChevronRight fontSize="small" />
+              </IconButton>
+            </Tooltip>
+          </Box>
+
+          <Box className="border-b border-gray-200 bg-white">
+            <Tabs
+              value={currentTab}
+              onChange={handleTabChange}
+              variant="fullWidth"
+              sx={{
+                minHeight: 48,
+                "& .MuiTab-root": {
+                  minHeight: 48,
+                  textTransform: "none",
+                  fontSize: "0.875rem",
+                  fontWeight: 500,
+                  transition: "all 0.2s",
+                },
+                "& .Mui-selected": {
+                  color: "#257DD4",
+                },
+                "& .MuiTabs-indicator": {
+                  backgroundColor: "#257DD4",
+                },
+              }}
+            >
+              <Tab
+                icon={<AnalyticsIcon fontSize="small" />}
+                iconPosition="start"
+                label="分析参数"
+              />
+              <Tab
+                icon={<SearchIcon fontSize="small" />}
+                iconPosition="start"
+                label="方案查询"
+              />
+            </Tabs>
+          </Box>
+
+          {/* Tab Content */}
+          <TabPanel value={currentTab} index={0}>
+            <AnalysisParameters />
+          </TabPanel>
+
+          <TabPanel value={currentTab} index={1}>
+            <SchemeQuery />
+          </TabPanel>
+        </Box>
+      </Drawer>
+    </>
+  );
+};
+
+export default FlushingAnalysisPanel;

src/components/olmap/FlushingAnalysis/SchemeQuery.tsx

@@ -0,0 +1,584 @@
+"use client";
+
+import React, { useEffect, useState } from "react";
+import ReactDOM from "react-dom";
+
+import {
+  Box,
+  Button,
+  Typography,
+  Checkbox,
+  FormControlLabel,
+  IconButton,
+  Card,
+  CardContent,
+  Chip,
+  Tooltip,
+  Collapse,
+  Link,
+} from "@mui/material";
+import {
+  Info as InfoIcon,
+  Search as SearchIcon,
+  LocationOn as LocationIcon,
+} from "@mui/icons-material";
+import { DatePicker } from "@mui/x-date-pickers/DatePicker";
+import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
+import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
+import "dayjs/locale/zh-cn";
+import dayjs, { Dayjs } from "dayjs";
+import axios from "axios";
+import moment from "moment";
+import { config, NETWORK_NAME } from "@config/config";
+import { useNotification } from "@refinedev/core";
+import { useData, useMap } from "@app/OlMap/MapComponent";
+import { queryFeaturesByIds } from "@/utils/mapQueryService";
+import { GeoJSON } from "ol/format";
+import VectorLayer from "ol/layer/Vector";
+import VectorSource from "ol/source/Vector";
+import { Style, Icon, Circle, Fill, Stroke } from "ol/style";
+import Feature, { FeatureLike } from "ol/Feature";
+import { bbox, featureCollection } from "@turf/turf";
+import Timeline from "@app/OlMap/Controls/Timeline";
+import { SchemeRecord, SchemaItem } from "./types";
+
+interface SchemeQueryProps {
+  schemes?: SchemeRecord[];
+  onSchemesChange?: (schemes: SchemeRecord[]) => void;
+  network?: string;
+}
+
+const SCHEME_TYPE = "flushing_analysis";
+
+const SchemeQuery: React.FC<SchemeQueryProps> = ({
+  schemes: externalSchemes,
+  onSchemesChange,
+  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 [highlightLayer, setHighlightLayer] =
+    useState<VectorLayer<VectorSource> | null>(null);
+  const [highlightFeatures, setHighlightFeatures] = useState<Feature[]>([]);
+
+  // Timeline related state
+  const [showTimeline, setShowTimeline] = useState(false);
+  const [selectedDate, setSelectedDate] = useState<Date | undefined>(undefined);
+  const [timeRange, setTimeRange] = useState<{ start: Date; end: Date } | undefined>();
+  const [mapContainer, setMapContainer] = useState<HTMLElement | null>(null);
+
+  const { open } = useNotification();
+  const map = useMap();
+  const data = useData();
+  const { schemeName, setSchemeName } = data || {};
+
+  const schemes = externalSchemes !== undefined ? externalSchemes : internalSchemes;
+  const setSchemes = onSchemesChange || setInternalSchemes;
+
+  useEffect(() => {
+    if (!map) return;
+    const target = map.getTargetElement();
+    if (target) {
+      setMapContainer(target);
+    }
+  }, [map]);
+
+  // Initialize highlight layer
+  useEffect(() => {
+    if (!map) return;
+
+    const themeColor = "rgba(0, 0, 255"; // Blue for drainage
+    const valveColor = "rgba(255, 165, 0"; // Orange for valves
+
+    const sourceStyle = function (feature: FeatureLike) {
+      const type = (feature as any).get("type");
+      if (type === "valve") {
+        return [
+          new Style({
+            image: new Circle({
+              radius: 8,
+              fill: new Fill({ color: `${valveColor}, 0.8)` }),
+              stroke: new Stroke({ color: "white", width: 2 }),
+            }),
+          })
+        ];
+      } else {
+        // Default drainage
+        return [
+          new Style({
+            image: new Circle({
+              radius: 12,
+              fill: new Fill({ color: `${themeColor}, 0.2)` }),
+            }),
+          }),
+          new Style({
+            image: new Circle({
+              radius: 8,
+              stroke: new Stroke({ color: `${themeColor}, 0.5)`, width: 2 }),
+              fill: new Fill({ color: `${themeColor}, 0.3)` }),
+            }),
+          }),
+          new Style({
+            image: new Circle({
+              radius: 4,
+              fill: new Fill({ color: `${themeColor}, 1)` }),
+              stroke: new Stroke({ color: "white", width: 1 }),
+            })
+          }),
+        ];
+      }
+    };
+
+    const layer = new VectorLayer({
+      source: new VectorSource(),
+      style: sourceStyle,
+      zIndex: 1000,
+      properties: {
+        name: "FlushingQueryResultHighlight",
+      },
+    });
+
+    map.addLayer(layer);
+    setHighlightLayer(layer);
+
+    return () => {
+      map.removeLayer(layer);
+    };
+  }, [map]);
+
+  // Update highlight features
+  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]);
+
+  const handleLocateDrainageNode = (nodeId: string) => {
+    if (!nodeId) return;
+    queryFeaturesByIds([nodeId], "geo_junctions_mat").then((features) => {
+      if (features.length > 0) {
+        // Add type property to distinguish styling
+        features.forEach(f => f.set("type", "drainage"));
+        setHighlightFeatures(features);
+        zoomToFeatures(features);
+      } else {
+        open?.({
+          type: "error",
+          message: "未找到该节点要素",
+        });
+      }
+    });
+  };
+
+  const handleLocateValves = (valveIds: string[]) => {
+    if (!valveIds || valveIds.length === 0) return;
+    queryFeaturesByIds(valveIds, "geo_valves").then((features) => {
+      if (features.length > 0) {
+        features.forEach(f => f.set("type", "valve"));
+        setHighlightFeatures(features);
+        zoomToFeatures(features);
+      } else {
+        open?.({
+          type: "error",
+          message: "未找到阀门要素",
+        });
+      }
+    });
+  };
+
+  const zoomToFeatures = (features: 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,
+        padding: [50, 50, 50, 50],
+      });
+    }
+  };
+
+  const formatTime = (timeStr: string) => {
+    return moment(timeStr).format("MM-DD HH:mm");
+  };
+
+  const handleQuery = async () => {
+    if (!queryAll && !queryDate) return;
+
+    setLoading(true);
+    try {
+      const response = await axios.get(
+        `${config.BACKEND_URL}/api/v1/getallschemes/?network=${network}`,
+      );
+
+      let filteredResults = response.data;
+
+      // Filter by type
+      filteredResults = filteredResults.filter((item: SchemaItem) => item.scheme_type === SCHEME_TYPE);
+
+      if (!queryAll && queryDate) {
+        const formattedDate = queryDate.format("YYYY-MM-DD");
+        filteredResults = filteredResults.filter((item: SchemaItem) => {
+          const itemDate = moment(item.create_time).format("YYYY-MM-DD");
+          return itemDate === formattedDate;
+        });
+      }
+
+      setSchemes(
+        filteredResults.map((item: SchemaItem) => ({
+          id: item.scheme_id,
+          schemeName: item.scheme_name,
+          type: item.scheme_type,
+          user: item.username,
+          create_time: item.create_time,
+          startTime: item.scheme_start_time,
+          schemeDetail: item.scheme_detail,
+        })),
+      );
+
+      if (filteredResults.length === 0) {
+        open?.({
+          type: "error",
+          message: "未找到相关方案",
+          description: "请尝试更改查询条件",
+        });
+      }
+    } catch (error) {
+      console.error("查询请求失败:", error);
+      open?.({
+        type: "error",
+        message: "查询失败",
+        description: "获取方案列表失败，请稍后重试",
+      });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleViewResults = (scheme: SchemeRecord) => {
+    setShowTimeline(true);
+
+    const schemeDate = scheme.startTime ? new Date(scheme.startTime) : undefined;
+
+    if (scheme.startTime && scheme.schemeDetail?.duration) {
+      const start = new Date(scheme.startTime);
+      const end = new Date(start.getTime() + scheme.schemeDetail.duration * 1000);
+      setSelectedDate(schemeDate);
+      setTimeRange({ start, end });
+    }
+
+    setSchemeName?.(scheme.schemeName);
+
+    // Locate drainage node by default if available
+    if (scheme.schemeDetail?.drainage_node_ID) {
+      handleLocateDrainageNode(scheme.schemeDetail.drainage_node_ID);
+    }
+  };
+
+  return (
+    <>
+      {showTimeline &&
+        mapContainer &&
+        ReactDOM.createPortal(
+          <Timeline
+            schemeDate={selectedDate}
+            timeRange={timeRange}
+            disableDateSelection={!!timeRange}
+            schemeName={schemeName}
+            schemeType={SCHEME_TYPE}
+          />,
+          mapContainer,
+        )}
+      <Box className="flex flex-col h-full">
+        {/* Query Controls */}
+        <Box className="mb-2 p-2 bg-gray-50 rounded">
+          <Box className="flex items-center gap-2 justify-between">
+            <Box className="flex items-center gap-2">
+              <FormControlLabel
+                control={
+                  <Checkbox
+                    checked={queryAll}
+                    onChange={(e) => setQueryAll(e.target.checked)}
+                    size="small"
+                  />
+                }
+                label={<Typography variant="body2">查询全部</Typography>}
+                className="m-0"
+              />
+              <LocalizationProvider
+                dateAdapter={AdapterDayjs}
+                adapterLocale="zh-cn"
+              >
+                <DatePicker
+                  value={queryDate}
+                  onChange={(value) =>
+                    value && dayjs.isDayjs(value) && setQueryDate(value)
+                  }
+                  format="YYYY-MM-DD"
+                  disabled={queryAll}
+                  slotProps={{
+                    textField: {
+                      size: "small",
+                      sx: { width: 160 },
+                    },
+                  }}
+                />
+              </LocalizationProvider>
+            </Box>
+            <Button
+              variant="contained"
+              onClick={handleQuery}
+              disabled={loading}
+              size="small"
+              startIcon={<SearchIcon />}
+              className="bg-blue-600 hover:bg-blue-700"
+            >
+              查询
+            </Button>
+          </Box>
+        </Box>
+
+        {/* Results List */}
+        <Box className="flex-1 overflow-auto">
+          {schemes.length === 0 ? (
+            <Box className="flex flex-col items-center justify-center h-full text-gray-400">
+              <Typography variant="body2">暂无方案数据</Typography>
+            </Box>
+          ) : (
+            <Box className="space-y-2 p-1">
+              <Typography variant="caption" className="text-gray-500 px-1">
+                共 {schemes.length} 条记录
+              </Typography>
+              {schemes.map((scheme) => (
+                <Card
+                  key={scheme.id}
+                  variant="outlined"
+                  className="hover:shadow-md transition-shadow"
+                >
+                  <CardContent className="p-3 pb-2 last:pb-3">
+                    <Box className="flex items-start justify-between mb-2">
+                      <Box className="flex-1 min-w-0">
+                        <Box className="flex items-center gap-2 mb-1">
+                          <Typography
+                            variant="body2"
+                            className="font-medium truncate"
+                            title={scheme.schemeName}
+                          >
+                            {scheme.schemeName}
+                          </Typography>
+                          <Chip
+                            label="冲洗模拟"
+                            size="small"
+                            className="h-5"
+                            color="primary"
+                            variant="outlined"
+                          />
+                        </Box>
+                        <Typography
+                          variant="caption"
+                          className="text-gray-500 block"
+                        >
+                          用户: {scheme.user} · 时间: {formatTime(scheme.create_time)}
+                        </Typography>
+                      </Box>
+                      <Box className="flex gap-1 ml-2">
+                        <Tooltip title="定位排水口">
+                          <IconButton
+                            size="small"
+                            onClick={() =>
+                              scheme.schemeDetail?.drainage_node_ID &&
+                              handleLocateDrainageNode(scheme.schemeDetail.drainage_node_ID)
+                            }
+                            color="primary"
+                            className="p-1"
+                          >
+                            <LocationIcon fontSize="small" />
+                          </IconButton>
+                        </Tooltip>
+                        <Tooltip
+                          title={
+                            expandedId === scheme.id ? "收起详情" : "查看详情"
+                          }
+                        >
+                          <IconButton
+                            size="small"
+                            onClick={() =>
+                              setExpandedId(
+                                expandedId === scheme.id ? null : scheme.id,
+                              )
+                            }
+                            color="primary"
+                            className="p-1"
+                          >
+                            <InfoIcon fontSize="small" />
+                          </IconButton>
+                        </Tooltip>
+                      </Box>
+                    </Box>
+
+                    <Collapse in={expandedId === scheme.id}>
+                      <Box className="mt-2 pt-3 border-t border-gray-200">
+                        <Box className="grid grid-cols-2 gap-x-4 gap-y-3 mb-3">
+                          <Box className="space-y-2">
+                            <Box className="space-y-1.5 pl-2">
+                              {/* 排水节点 */}
+                              <Box className="flex items-start gap-2">
+                                <Typography variant="caption" className="text-gray-600 min-w-[70px] mt-0.5">
+                                  排水节点:
+                                </Typography>
+                                <Box className="flex-1">
+                                  {scheme.schemeDetail?.drainage_node_ID ? (
+                                    <Link
+                                      component="button"
+                                      variant="caption"
+                                      className="font-medium text-blue-600 hover:text-blue-800 underline cursor-pointer"
+                                      onClick={(e) => {
+                                        e.preventDefault();
+                                        handleLocateDrainageNode(scheme.schemeDetail!.drainage_node_ID);
+                                      }}
+                                    >
+                                      {scheme.schemeDetail.drainage_node_ID}
+                                    </Link>
+                                  ) : (
+                                    <Typography variant="caption" className="font-medium text-gray-900">
+                                      N/A
+                                    </Typography>
+                                  )}
+                                </Box>
+                              </Box>
+
+                              {/* 冲洗流量 */}
+                              <Box className="flex items-center gap-2">
+                                <Typography variant="caption" className="text-gray-600 min-w-[70px]">
+                                  冲洗流量:
+                                </Typography>
+                                <Typography variant="caption" className="font-medium text-gray-900">
+                                  {scheme.schemeDetail?.flushing_flow ?? "-"} m³/h
+                                </Typography>
+                              </Box>
+
+                              {/* 持续时长 */}
+                              <Box className="flex items-center gap-2">
+                                <Typography variant="caption" className="text-gray-600 min-w-[70px]">
+                                  持续时长:
+                                </Typography>
+                                <Typography variant="caption" className="font-medium text-gray-900">
+                                  {scheme.schemeDetail?.duration ?? "-"} 秒
+                                </Typography>
+                              </Box>
+                            </Box>
+                          </Box>
+
+                          <Box className="space-y-2">
+                            <Box className="space-y-1.5 pl-2">
+                              {/* 用户 */}
+                              <Box className="flex items-center gap-2">
+                                <Typography variant="caption" className="text-gray-600 min-w-[70px]">
+                                  用户:
+                                </Typography>
+                                <Typography variant="caption" className="font-medium text-gray-900">
+                                  {scheme.user}
+                                </Typography>
+                              </Box>
+
+                              {/* 创建时间 */}
+                              <Box className="flex items-center gap-2">
+                                <Typography variant="caption" className="text-gray-600 min-w-[70px]">
+                                  创建时间:
+                                </Typography>
+                                <Typography variant="caption" className="font-medium text-gray-900">
+                                  {formatTime(scheme.create_time)}
+                                </Typography>
+                              </Box>
+
+                              {/* 开始时间 */}
+                              <Box className="flex items-center gap-2">
+                                <Typography variant="caption" className="text-gray-600 min-w-[70px]">
+                                  模拟开始:
+                                </Typography>
+                                <Typography variant="caption" className="font-medium text-gray-900">
+                                  {formatTime(scheme.startTime)}
+                                </Typography>
+                              </Box>
+                            </Box>
+                          </Box>
+
+                          {/* 阀门列表 */}
+                          <Box className="col-span-2 pl-2">
+                            <Typography variant="caption" className="text-gray-600 block mb-1">
+                              参与阀门及开度:
+                            </Typography>
+                            <Box className="flex flex-wrap gap-2">
+                              {scheme.schemeDetail?.valve_opening && Object.entries(scheme.schemeDetail.valve_opening).length > 0 ? (
+                                Object.entries(scheme.schemeDetail.valve_opening).map(([id, k]) => (
+                                  <Tooltip key={id} title="点击定位阀门">
+                                    <Chip
+                                      label={`${id}: ${k}`}
+                                      size="small"
+                                      variant="outlined"
+                                      onClick={() => handleLocateValves([id])}
+                                      className="text-xs h-6 bg-gray-50 cursor-pointer hover:bg-orange-50 hover:border-orange-200"
+                                    />
+                                  </Tooltip>
+                                ))
+                              ) : (
+                                <Typography variant="caption" className="text-gray-400">无</Typography>
+                              )}
+                            </Box>
+                          </Box>
+                        </Box>
+
+                        <Box className="pt-2 border-t border-gray-100 flex gap-2">
+                          <Button
+                            variant="outlined"
+                            fullWidth
+                            size="small"
+                            className="border-blue-600 text-blue-600 hover:bg-blue-50"
+                            onClick={() =>
+                              scheme.schemeDetail?.drainage_node_ID &&
+                              handleLocateDrainageNode(scheme.schemeDetail.drainage_node_ID)
+                            }
+                            startIcon={<LocationIcon className="w-4 h-4" />}
+                            sx={{ textTransform: "none", fontWeight: 500 }}
+                          >
+                            定位排水口
+                          </Button>
+                          <Button
+                            variant="contained"
+                            fullWidth
+                            size="small"
+                            className="bg-blue-600 hover:bg-blue-700"
+                            onClick={() => handleViewResults(scheme)}
+                            sx={{ textTransform: "none", fontWeight: 500 }}
+                          >
+                            查看模拟结果
+                          </Button>
+                        </Box>
+                      </Box>
+                    </Collapse>
+                  </CardContent>
+                </Card>
+              ))}
+            </Box>
+          )}
+        </Box>
+      </Box>
+    </>
+  );
+};
+
+export default SchemeQuery;

src/components/olmap/FlushingAnalysis/types.ts

@@ -0,0 +1,27 @@
+export interface SchemeDetail {
+  valve_opening: Record<string, number>;
+  drainage_node_ID: string;
+  flushing_flow: number;
+  duration: number;
+}
+
+export interface SchemeRecord {
+  id: number;
+  schemeName: string;
+  type: string;
+  user: string;
+  create_time: string;
+  startTime: string;
+  // 详情信息
+  schemeDetail?: SchemeDetail;
+}
+
+export interface SchemaItem {
+  scheme_id: number;
+  scheme_name: string;
+  scheme_type: string;
+  username: string;
+  create_time: string;
+  scheme_start_time: string;
+  scheme_detail?: SchemeDetail;
+}