完善爆管分析面板；整合地图查询函数

src/components/olmap/BurstPipeAnalysis/SchemeQuery.tsx

@@ -1,20 +1,19 @@
 "use client";
 
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import {
   Box,
   Button,
   Typography,
   Checkbox,
   FormControlLabel,
-  Table,
-  TableBody,
-  TableCell,
-  TableContainer,
-  TableHead,
-  TableRow,
-  Paper,
   IconButton,
+  Card,
+  CardContent,
+  Chip,
+  Tooltip,
+  Collapse,
+  Link,
 } from "@mui/material";
 import {
   Info as InfoIcon,
@@ -25,77 +24,276 @@ import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
 import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
 import dayjs, { Dayjs } from "dayjs";
 import "dayjs/locale/zh-cn";
+import axios from "axios";
+import moment from "moment";
+import { config, NETWORK_NAME } from "@config/config";
+import { useNotification } from "@refinedev/core";
+
+import { queryFeaturesByIds } from "@/utils/mapQueryService";
+import { useMap } from "@app/OlMap/MapComponent";
+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 Feature from "ol/Feature";
+import { set } from "ol/transform";
+
+interface SchemeDetail {
+  burst_ID: string[];
+  burst_size: number[];
+  modify_total_duration: number;
+  modify_fixed_pump_pattern: any;
+  modify_valve_opening: any;
+  modify_variable_pump_pattern: any;
+}
 
 interface SchemeRecord {
   id: number;
   schemeName: string;
   type: string;
   user: string;
-  createTime: string;
+  create_time: string;
   startTime: string;
+  // 详情信息
+  schemeDetail?: SchemeDetail;
+}
+
+interface SchemaItem {
+  scheme_id: number;
+  scheme_name: string;
+  scheme_type: string;
+  username: string;
+  create_time: string;
+  scheme_start_time: string;
+  scheme_detail?: SchemeDetail;
 }
 
 interface SchemeQueryProps {
+  schemes?: SchemeRecord[];
+  onSchemesChange?: (schemes: SchemeRecord[]) => void;
   onViewDetails?: (id: number) => void;
   onLocate?: (id: number) => void;
+  network?: string;
 }
 
 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("2025-10-21"));
-  const [schemes, setSchemes] = useState<SchemeRecord[]>([]);
+  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 handleQuery = () => {
-    // TODO: 实际查询逻辑
-    console.log("查询方案", { queryAll, queryDate });
-    // 这里应该调用API获取数据
+  const [highlightLayer, setHighlightLayer] =
+    useState<VectorLayer<VectorSource> | null>(null);
+  const [highlightFeatures, setHighlightFeatures] = useState<Feature[]>([]);
+  const map = useMap();
+
+  // 使用外部提供的 schemes 或内部状态
+  const schemes =
+    externalSchemes !== undefined ? externalSchemes : internalSchemes;
+  const setSchemes = onSchemesChange || setInternalSchemes;
+
+  // 格式化日期为简短格式
+  const formatTime = (timeStr: string) => {
+    const time = moment(timeStr);
+    return time.format("MM-DD");
   };
 
+  const handleQuery = async () => {
+    if (!queryAll && !queryDate) return;
+
+    setLoading(true);
+    try {
+      const response = await axios.get(
+        `${config.backendUrl}/getallschemes/?network=${network}`
+      );
+      let filteredResults = response.data;
+
+      if (!queryAll) {
+        const formattedDate = queryDate!.format("YYYY-MM-DD");
+        filteredResults = response.data.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: queryAll
+            ? "没有找到任何方案"
+            : `${queryDate!.format("YYYY-MM-DD")} 没有找到相关方案`,
+        });
+      }
+    } catch (error) {
+      console.error("查询请求失败:", error);
+      open?.({
+        type: "error",
+        message: "查询失败",
+        description: "获取方案列表失败，请稍后重试",
+      });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleLocatePipes = (pipeIds: string[]) => {
+    if (pipeIds.length > 0) {
+      queryFeaturesByIds(pipeIds).then((features) => {
+        if (features.length > 0) {
+          // 设置高亮要素
+          setHighlightFeatures(features);
+          // 将 OpenLayers Feature 转换为 GeoJSON Feature
+          const geojsonFormat = new GeoJSON();
+          const geojsonFeatures = features.map((feature) =>
+            geojsonFormat.writeFeatureObject(feature)
+          );
+
+          const extent = turf.bbox(
+            turf.featureCollection(geojsonFeatures as any)
+          );
+
+          if (extent) {
+            map?.getView().fit(extent, { maxZoom: 18, duration: 1000 });
+          }
+        }
+      });
+    }
+  };
+  // 初始化管道图层和高亮图层
+  useEffect(() => {
+    if (!map) return;
+
+    // 创建高亮图层 - 爆管管段标识样式
+    const highlightLayer = new VectorLayer({
+      source: new VectorSource(),
+      style: [
+        // 外层发光效果（底层）
+        new Style({
+          stroke: new Stroke({
+            color: "rgba(255, 0, 0, 0.3)",
+            width: 12,
+          }),
+        }),
+        // 主线条 - 使用虚线表示爆管
+        new Style({
+          stroke: new Stroke({
+            color: "#ff0000",
+            width: 6,
+            lineDash: [15, 10], // 虚线样式，表示管道损坏/爆管
+          }),
+        }),
+        // 内层高亮线
+        new Style({
+          stroke: new Stroke({
+            color: "#ff6666",
+            width: 3,
+            lineDash: [15, 10],
+          }),
+        }),
+      ],
+      properties: {
+        name: "爆管管段高亮",
+        value: "burst_pipe_highlight",
+      },
+    });
+
+    map.addLayer(highlightLayer);
+    setHighlightLayer(highlightLayer);
+
+    return () => {
+      map.removeLayer(highlightLayer);
+    };
+  }, [map]);
+
+  // 高亮要素的函数
+  useEffect(() => {
+    if (!highlightLayer) {
+      return;
+    }
+    const source = highlightLayer.getSource();
+    if (!source) {
+      return;
+    }
+    // 清除之前的高亮
+    source.clear();
+    // 添加新的高亮要素
+    highlightFeatures.forEach((feature) => {
+      if (feature instanceof Feature) {
+        source.addFeature(feature);
+      }
+    });
+  }, [highlightFeatures]);
+
   return (
     <Box className="flex flex-col h-full">
-      {/* 查询条件 */}
-      <Box className="mb-4 p-4 bg-gray-50 rounded">
-        <Box className="flex items-center gap-4 mb-3">
-          <FormControlLabel
-            control={
-              <Checkbox
-                checked={queryAll}
-                onChange={(e) => setQueryAll(e.target.checked)}
-              />
-            }
-            label="查询全部"
-          />
-          <LocalizationProvider
-            dateAdapter={AdapterDayjs}
-            adapterLocale="zh-cn"
-          >
-            <DatePicker
-              value={queryDate}
-              onChange={(value) =>
-                value && dayjs.isDayjs(value) && setQueryDate(value)
+      {/* 查询条件 - 单行布局 */}
+      <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"
+                />
               }
-              format="YYYY-MM-DD"
-              disabled={queryAll}
-              slotProps={{
-                textField: {
-                  size: "small",
-                  className: "flex-1",
-                },
-              }}
+              label={<Typography variant="body2">查询全部</Typography>}
+              className="m-0"
             />
-          </LocalizationProvider>
+            <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: 200 },
+                  },
+                }}
+              />
+            </LocalizationProvider>
+          </Box>
+          <Button
+            variant="contained"
+            onClick={handleQuery}
+            disabled={loading}
+            size="small"
+            className="bg-blue-600 hover:bg-blue-700"
+            sx={{ minWidth: 80 }}
+          >
+            {loading ? "查询中..." : "查询"}
+          </Button>
         </Box>
-        <Button
-          fullWidth
-          variant="contained"
-          onClick={handleQuery}
-          className="bg-blue-600 hover:bg-blue-700"
-        >
-          查询
-        </Button>
       </Box>
 
       {/* 结果列表 */}
@@ -135,52 +333,259 @@ const SchemeQuery: React.FC<SchemeQueryProps> = ({
             </Typography>
           </Box>
         ) : (
-          <TableContainer component={Paper} className="shadow-none">
-            <Table size="small">
-              <TableHead>
-                <TableRow className="bg-gray-50">
-                  <TableCell>ID</TableCell>
-                  <TableCell>方案名称</TableCell>
-                  <TableCell>类型</TableCell>
-                  <TableCell>用户</TableCell>
-                  <TableCell>创建时间</TableCell>
-                  <TableCell>开始时间</TableCell>
-                  <TableCell align="center">详情</TableCell>
-                  <TableCell align="center">定位</TableCell>
-                </TableRow>
-              </TableHead>
-              <TableBody>
-                {schemes.map((scheme) => (
-                  <TableRow key={scheme.id} hover>
-                    <TableCell>{scheme.id}</TableCell>
-                    <TableCell>{scheme.schemeName}</TableCell>
-                    <TableCell>{scheme.type}</TableCell>
-                    <TableCell>{scheme.user}</TableCell>
-                    <TableCell>{scheme.createTime}</TableCell>
-                    <TableCell>{scheme.startTime}</TableCell>
-                    <TableCell align="center">
-                      <IconButton
-                        size="small"
-                        onClick={() => onViewDetails?.(scheme.id)}
-                        color="primary"
+          <Box className="space-y-2 p-2">
+            <Typography variant="caption" className="text-gray-500 px-2">
+              共 {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={scheme.type}
+                          size="small"
+                          className="h-5"
+                          color="primary"
+                          variant="outlined"
+                        />
+                      </Box>
+                      <Typography
+                        variant="caption"
+                        className="text-gray-500 block"
                       >
-                        <InfoIcon fontSize="small" />
-                      </IconButton>
-                    </TableCell>
-                    <TableCell align="center">
-                      <IconButton
-                        size="small"
-                        onClick={() => onLocate?.(scheme.id)}
-                        color="primary"
+                        ID: {scheme.id} · 日期: {formatTime(scheme.create_time)}
+                      </Typography>
+                    </Box>
+                    {/* 操作按钮 */}
+                    <Box className="flex gap-1 ml-2">
+                      <Tooltip
+                        title={
+                          expandedId === scheme.id ? "收起详情" : "查看详情"
+                        }
                       >
-                        <LocationIcon fontSize="small" />
-                      </IconButton>
-                    </TableCell>
-                  </TableRow>
-                ))}
-              </TableBody>
-            </Table>
-          </TableContainer>
+                        <IconButton
+                          size="small"
+                          onClick={() =>
+                            setExpandedId(
+                              expandedId === scheme.id ? null : scheme.id
+                            )
+                          }
+                          color="primary"
+                          className="p-1"
+                        >
+                          <InfoIcon fontSize="small" />
+                        </IconButton>
+                      </Tooltip>
+                      <Tooltip title="定位">
+                        <IconButton
+                          size="small"
+                          onClick={() => onLocate?.(scheme.id)}
+                          color="primary"
+                          className="p-1"
+                        >
+                          <LocationIcon 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"
+                              >
+                                管段ID:
+                              </Typography>
+                              <Box className="flex-1 flex flex-wrap gap-1">
+                                {scheme.schemeDetail?.burst_ID?.length ? (
+                                  scheme.schemeDetail.burst_ID.map(
+                                    (pipeId, index) => (
+                                      <Link
+                                        key={index}
+                                        component="button"
+                                        variant="caption"
+                                        className="font-medium text-blue-600 hover:text-blue-800 underline cursor-pointer"
+                                        onClick={(e) => {
+                                          e.preventDefault();
+                                          handleLocatePipes?.([pipeId]);
+                                        }}
+                                      >
+                                        {pipeId}
+                                      </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"
+                              >
+                                560 mm
+                              </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?.burst_size?.[0] || "N/A"}{" "}
+                                cm²
+                              </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?.modify_total_duration ||
+                                  "N/A"}{" "}
+                                秒
+                              </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"
+                              >
+                                {moment(scheme.create_time).format(
+                                  "YYYY-MM-DD HH:mm"
+                                )}
+                              </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"
+                              >
+                                {moment(scheme.startTime).format(
+                                  "YYYY-MM-DD HH:mm"
+                                )}
+                              </Typography>
+                            </Box>
+                          </Box>
+                        </Box>
+                      </Box>
+
+                      {/* 操作按钮区域 */}
+                      <Box className="pt-2 border-t border-gray-100 flex gap-5">
+                        {scheme.schemeDetail?.burst_ID?.length ? (
+                          <Button
+                            variant="outlined"
+                            fullWidth
+                            size="small"
+                            className="border-blue-600 text-blue-600 hover:bg-blue-50"
+                            onClick={() =>
+                              handleLocatePipes?.(scheme.schemeDetail!.burst_ID)
+                            }
+                            sx={{
+                              textTransform: "none",
+                              fontWeight: 500,
+                            }}
+                          >
+                            定位全部管道
+                          </Button>
+                        ) : null}
+                        <Button
+                          variant="contained"
+                          fullWidth
+                          size="small"
+                          className="bg-blue-600 hover:bg-blue-700"
+                          onClick={() => onViewDetails?.(scheme.id)}
+                          sx={{
+                            textTransform: "none",
+                            fontWeight: 500,
+                          }}
+                        >
+                          查看分析结果
+                        </Button>
+                      </Box>
+                    </Box>
+                  </Collapse>
+                </CardContent>
+              </Card>
+            ))}
+          </Box>
         )}
       </Box>
     </Box>