实现DMA漏损识别面板整体设计

2026-03-06 09:59:06 +08:00
parent b73481d604
commit 377fc32f4c
10 changed files with 1096 additions and 68 deletions
@@ -0,0 +1,432 @@
+"use client";
+
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+import {
+  Box,
+  Drawer,
+  Tabs,
+  Tab,
+  Typography,
+  IconButton,
+  Tooltip,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableRow,
+  Chip,
+} from "@mui/material";
+import {
+  Analytics as AnalyticsIcon,
+  Search as SearchIcon,
+  ChevronLeft,
+  ChevronRight,
+  FormatListBulleted,
+} from "@mui/icons-material";
+import dayjs from "dayjs";
+import { Circle as CircleStyle, Fill, Stroke, Style } from "ol/style";
+import VectorLayer from "ol/layer/Vector";
+import VectorSource from "ol/source/Vector";
+import Feature from "ol/Feature";
+import { queryFeaturesByIds } from "@/utils/mapQueryService";
+import { useMap } from "@app/OlMap/MapComponent";
+import StyleLegend from "@app/OlMap/Controls/StyleLegend";
+import AnalysisParameters from "./AnalysisParameters";
+import SchemeQuery from "./SchemeQuery";
+import { LeakageResultDetail } from "./types";
+
+const TabPanel = ({
+  value,
+  index,
+  children,
+}: {
+  value: number;
+  index: number;
+  children: React.ReactNode;
+}) => (
+  <div role="tabpanel" hidden={value !== index} className="flex-1 overflow-hidden flex flex-col">
+    {value === index ? <Box className="flex-1 overflow-auto p-4 flex flex-col">{children}</Box> : null}
+  </div>
+);
+
+const AREA_COLORS = [
+  "#2563eb",
+  "#7c3aed",
+  "#0891b2",
+  "#16a34a",
+  "#ca8a04",
+  "#dc2626",
+  "#ea580c",
+  "#0f766e",
+  "#4338ca",
+  "#be123c",
+];
+
+const getAreaColor = (areaId: string | number | undefined) => {
+  const text = String(areaId ?? "");
+  let hash = 0;
+  for (let i = 0; i < text.length; i += 1) {
+    hash = (hash * 31 + text.charCodeAt(i)) >>> 0;
+  }
+  return AREA_COLORS[hash % AREA_COLORS.length];
+};
+
+const DMALeakDetectionPanel: React.FC = () => {
+  const map = useMap();
+  const [open, setOpen] = useState(true);
+  const [tab, setTab] = useState(0);
+  const [result, setResult] = useState<LeakageResultDetail | null>(null);
+  const [loadedResult, setLoadedResult] = useState<LeakageResultDetail | null>(null);
+  const [nodeLayer, setNodeLayer] = useState<VectorLayer<VectorSource> | null>(null);
+
+  const sortedRows = useMemo(() => {
+    if (!result?.rows) return [];
+    return [...result.rows].sort(
+      (a, b) => b.LeakageFlow_m3_per_s - a.LeakageFlow_m3_per_s,
+    );
+  }, [result]);
+  const drawerWidth = 450;
+  const panelTitle = "DMA漏损识别";
+  const activeAreas = loadedResult?.areas ?? [];
+  const legendColors = useMemo(
+    () => activeAreas.map((area) => getAreaColor(area.area_id)),
+    [activeAreas],
+  );
+  const legendLabels = useMemo(
+    () => activeAreas.map((area) => `区域 ${area.area_id}`),
+    [activeAreas],
+  );
+  const legendBreaks = useMemo(
+    () => Array.from({ length: activeAreas.length + 1 }, (_, i) => i + 1),
+    [activeAreas.length],
+  );
+
+  useEffect(() => {
+    if (!map) return;
+    const layer = new VectorLayer({
+      source: new VectorSource(),
+      maxZoom: 24,
+      minZoom: 12,
+      properties: {
+        name: "DMA漏损节点着色",
+        value: "dma_leak_nodes",
+      },
+      style: (feature) => {
+        const areaId = feature.get("__areaId");
+        return new Style({
+          image: new CircleStyle({
+            radius: 4.5,
+            fill: new Fill({ color: getAreaColor(areaId) }),
+            stroke: new Stroke({ color: "#ffffff", width: 1.2 }),
+          }),
+        });
+      },
+    });
+    map.addLayer(layer);
+    setNodeLayer(layer);
+    return () => {
+      map.removeLayer(layer);
+    };
+  }, [map]);
+
+  useEffect(() => {
+    if (!nodeLayer) return;
+    const source = nodeLayer.getSource();
+    if (!source) return;
+    source.clear();
+    if (!loadedResult) return;
+
+    const nodeAreaMap = loadedResult.node_area_map || {};
+    const nodeIds = Object.keys(nodeAreaMap);
+    if (nodeIds.length === 0) return;
+
+    queryFeaturesByIds(nodeIds, "geo_junctions_mat").then((features) => {
+      if (!features?.length) return;
+      features.forEach((feature) => {
+        const nodeId = String(feature.get("id") ?? "");
+        feature.set("__areaId", nodeAreaMap[nodeId] ?? "");
+      });
+      source.addFeatures(features as Feature[]);
+    });
+  }, [loadedResult, nodeLayer]);
+
+  const handleAnalysisResult = useCallback((res: LeakageResultDetail) => {
+    setResult(res);
+  }, []);
+
+  const handleViewResult = useCallback((res: LeakageResultDetail) => {
+    setResult(res);
+    setLoadedResult(res);
+    setTab(2);
+  }, []);
+
+  return (
+    <>
+      {!open && (
+        <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={() => setOpen(true)}
+          sx={{ zIndex: 1300 }}
+        >
+          <Box className="flex flex-col items-center py-3 px-3 gap-1">
+            <AnalyticsIcon 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>
+      )}
+      <Drawer
+        anchor="right"
+        open={open}
+        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">
+          <Box className="flex items-center justify-between px-5 py-4 bg-[#257DD4] text-white">
+            <Box className="flex items-center gap-2">
+              <AnalyticsIcon className="w-5 h-5" />
+              <Typography variant="h6" className="text-lg font-semibold">
+                {panelTitle}
+              </Typography>
+            </Box>
+            <Tooltip title="收起">
+              <IconButton
+                size="small"
+                onClick={() => setOpen(false)}
+                sx={{ color: "primary.contrastText" }}
+              >
+                <ChevronRight fontSize="small" />
+              </IconButton>
+            </Tooltip>
+          </Box>
+          <Box className="border-b border-gray-200 bg-white">
+            <Tabs
+              value={tab}
+              onChange={(_, v) => setTab(v)}
+              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="方案查询" />
+              <Tab icon={<FormatListBulleted fontSize="small" />} iconPosition="start" label="识别结果" />
+            </Tabs>
+          </Box>
+          <TabPanel value={tab} index={0}>
+            <AnalysisParameters onResult={handleAnalysisResult} />
+          </TabPanel>
+          <TabPanel value={tab} index={1}>
+            <SchemeQuery onViewResult={handleViewResult} />
+          </TabPanel>
+          <TabPanel value={tab} index={2}>
+            {!result || !sortedRows.length ? (
+              <Box className="flex flex-col items-center justify-center h-full text-gray-400 p-4">
+                <Box className="mb-4">
+                  <svg width="80" height="80" viewBox="0 0 80 80" fill="none" className="opacity-40">
+                    <rect x="10" y="20" width="60" height="45" rx="2" stroke="currentColor" strokeWidth="2" />
+                    <line x1="10" y1="30" x2="70" y2="30" stroke="currentColor" strokeWidth="2" />
+                  </svg>
+                </Box>
+                <Typography variant="body2">暂无识别结果</Typography>
+                <Typography variant="body2" className="mt-1">
+                  请先加载方案或执行识别分析
+                </Typography>
+              </Box>
+            ) : (
+              <Box className="h-full overflow-auto p-1">
+                {/* 方案详情卡片 */}
+                <Box className="mb-4 space-y-3">
+                  <Box className="flex items-center justify-between px-1">
+                    <Box className="flex items-center gap-2">
+                      <Box className="w-1 h-4 bg-blue-600 rounded-full" />
+                      <Typography
+                        variant="h6"
+                        className="font-bold text-gray-900 truncate"
+                        sx={{ fontSize: "1.1rem" }}
+                        title={result.scheme_name || ""}
+                      >
+                        {result.scheme_name || "漏损识别结果"}
+                      </Typography>
+                    </Box>
+                    {result.username && (
+                      <Chip
+                        label={result.username}
+                        size="small"
+                        sx={{
+                          height: 24,
+                          backgroundColor: "#f3f4f6",
+                          color: "#4b5563",
+                          border: "none",
+                          fontWeight: 500
+                        }}
+                      />
+                    )}
+                  </Box>
+
+                  <Box className="grid grid-cols-2 gap-3">
+                    {/* 方案时间 */}
+                    <Box className="bg-gradient-to-br from-blue-50 to-blue-100 rounded-lg p-3 border border-blue-200 shadow-sm">
+                      <Typography variant="caption" className="text-blue-700 font-semibold block mb-1 text-xs uppercase tracking-wide">
+                        方案时间
+                      </Typography>
+                      <Typography variant="body2" className="font-bold text-blue-900">
+                        {dayjs(result.scheme_start_time || result.create_time).format("MM-DD HH:mm")}
+                      </Typography>
+                    </Box>
+
+                    {/* 总漏损流量 */}
+                    <Box className="bg-gradient-to-br from-orange-50 to-orange-100 rounded-lg p-3 border border-orange-200 shadow-sm">
+                      <Typography variant="caption" className="text-orange-700 font-semibold block mb-1 text-xs uppercase tracking-wide">
+                        总漏损流量
+                      </Typography>
+                      <Typography variant="body2" className="font-bold text-orange-900">
+                        {(() => {
+                          const val = (result.scheme_detail as any)?.algorithm_params?.q_sum;
+                          const unit = (result.scheme_detail as any)?.algorithm_params?.q_sum_unit || "m3/s";
+                          return val !== undefined ? `${Number(val).toFixed(3)} ${unit}` : "-";
+                        })()}
+                      </Typography>
+                    </Box>
+
+                    {/* 分区数量 */}
+                    <Box className="bg-gradient-to-br from-green-50 to-green-100 rounded-lg p-3 border border-green-200 shadow-sm">
+                      <Typography variant="caption" className="text-green-700 font-semibold block mb-1 text-xs uppercase tracking-wide">
+                        分区数量
+                      </Typography>
+                      <Typography variant="body2" className="font-bold text-green-900">
+                        {(result.scheme_detail as any)?.result_summary?.area_count ?? result.areas?.length ?? 0} 个
+                      </Typography>
+                    </Box>
+
+                    {/* 最大漏损 */}
+                    <Box className="bg-gradient-to-br from-purple-50 to-purple-100 rounded-lg p-3 border border-purple-200 shadow-sm">
+                      <Typography variant="caption" className="text-purple-700 font-semibold block mb-1 text-xs uppercase tracking-wide">
+                        最大漏损
+                      </Typography>
+                      <Typography variant="body2" className="font-bold text-purple-900">
+                        {(() => {
+                          const maxL = (result.scheme_detail as any)?.result_summary?.max_leakage;
+                          return maxL !== undefined ? `${Number(maxL).toFixed(3)} m3/s` : "-";
+                        })()}
+                      </Typography>
+                    </Box>
+                  </Box>
+                </Box>
+
+                {/* 漏损列表 */}
+                <Box className="rounded-xl border border-gray-100 bg-white shadow-sm overflow-hidden">
+                  <Box className="px-4 py-3 border-b border-gray-100 flex items-center justify-between bg-white">
+                    <Box className="flex items-center gap-2">
+                      <FormatListBulleted className="text-blue-600 w-5 h-5" />
+                      <Typography variant="subtitle1" className="font-bold text-gray-800">
+                        区域漏损列表
+                      </Typography>
+                    </Box>
+                    <Chip
+                      size="small"
+                      label={`${sortedRows.length} 条`}
+                      sx={{
+                        height: 22,
+                        backgroundColor: "rgba(37, 99, 235, 0.08)",
+                        color: "#2563eb",
+                        fontWeight: 600,
+                        fontSize: "0.75rem",
+                        border: "none"
+                      }}
+                    />
+                  </Box>
+                  <Table size="small">
+                    <TableHead>
+                      <TableRow sx={{ backgroundColor: "#f8fafc" }}>
+                        <TableCell sx={{ fontWeight: 600, color: "#64748b", py: 1.5, pl: 3 }}>区域</TableCell>
+                        <TableCell align="right" sx={{ fontWeight: 600, color: "#64748b", py: 1.5 }}>漏损量占比 (%)</TableCell>
+                        <TableCell align="right" sx={{ fontWeight: 600, color: "#64748b", py: 1.5, pr: 3 }}>漏损量 (m3/s)</TableCell>
+                      </TableRow>
+                    </TableHead>
+                    <TableBody>
+                      {sortedRows.map((row) => (
+                        <TableRow key={row.Area} hover sx={{ "&:last-child td, &:last-child th": { border: 0 } }}>
+                          <TableCell sx={{ pl: 3, py: 1.2 }}>
+                            <Box className="flex items-center gap-2">
+                              <Box className="w-2 h-2 rounded-full" sx={{ backgroundColor: getAreaColor(row.Area) }} />
+                              <Typography variant="body2" className="font-medium text-gray-700">
+                                {row.Area}
+                              </Typography>
+                            </Box>
+                          </TableCell>
+                          <TableCell align="right" sx={{ py: 1.2, color: "#475569" }}>{(row.LeakageRatio * 100).toFixed(3)}</TableCell>
+                          <TableCell align="right" sx={{ pr: 3, py: 1.2, fontWeight: 500, color: "#334155" }}>{row.LeakageFlow_m3_per_s.toFixed(3)}</TableCell>
+                        </TableRow>
+                      ))}
+                    </TableBody>
+                  </Table>
+                </Box>
+              </Box>
+            )}
+          </TabPanel>
+        </Box>
+      </Drawer>
+
+      {loadedResult && activeAreas.length > 0 && (
+        <Box className="absolute bottom-40 right-4 drop-shadow-xl flex flex-row items-end max-w-screen-lg overflow-x-auto z-10">
+          <StyleLegend
+            layerName="节点"
+            layerId="dma-leakage"
+            property="区域"
+            colors={legendColors}
+            type="point"
+            dimensions={Array(legendColors.length).fill(10)}
+            breaks={legendBreaks}
+            labels={legendLabels}
+            itemsPerColumn={5}
+          />
+        </Box>
+      )}
+    </>
+  );
+};
+
+export default DMALeakDetectionPanel;