新增水质分析功能模块

2026-01-30 15:22:53 +08:00
parent c28325e997
commit d584268acd
12 changed files with 346 additions and 238 deletions
--- a/src/components/olmap/BurstPipeAnalysis/AnalysisParameters.tsx
+++ b/src/components/olmap/BurstPipeAnalysis/AnalysisParameters.tsx
@@ -44,7 +44,7 @@ const AnalysisParameters: React.FC = () => {
  const [startTime, setStartTime] = useState<Dayjs | null>(dayjs(new Date()));
  const [duration, setDuration] = useState<number>(3600);
  const [schemeName, setSchemeName] = useState<string>(
-    "FANGAN" + new Date().getTime()
+    "FANGAN" + new Date().getTime(),
  );
  const [network, setNetwork] = useState<string>(NETWORK_NAME);
  const [isSelecting, setIsSelecting] = useState<boolean>(false);
@@ -88,7 +88,7 @@ const AnalysisParameters: React.FC = () => {
            width: 3,
            lineDash: [15, 10],
          }),
-        })
+        }),
      );
      const geometry = feature.getGeometry();
      const lineCoords =
@@ -115,7 +115,7 @@ const AnalysisParameters: React.FC = () => {
              scale: 0.2,
              anchor: [0.5, 1],
            }),
-          })
+          }),
        );
      }
      return styles;
@@ -163,14 +163,14 @@ const AnalysisParameters: React.FC = () => {
      // 移除不在highlightFeatures中的
      const filtered = prevPipes.filter((pipe) =>
        highlightFeatures.some(
-          (feature) => feature.getProperties().id === pipe.id
-        )
+          (feature) => feature.getProperties().id === pipe.id,
+        ),
      );
      // 添加新的
      const newPipes = highlightFeatures
        .filter(
          (feature) =>
-            !filtered.some((p) => p.id === feature.getProperties().id)
+            !filtered.some((p) => p.id === feature.getProperties().id),
        )
        .map((feature) => {
          const properties = feature.getProperties();
@@ -207,7 +207,7 @@ const AnalysisParameters: React.FC = () => {
      const featureId = feature.getProperties().id;
      setHighlightFeatures((prev) => {
        const existingIndex = prev.findIndex(
-          (f) => f.getProperties().id === featureId
+          (f) => f.getProperties().id === featureId,
        );
        if (existingIndex !== -1) {
          // 如果已存在，移除
@@ -218,7 +218,7 @@ const AnalysisParameters: React.FC = () => {
        }
      });
    },
-    [map]
+    [map],
  );

  // 开始选择管道
@@ -242,14 +242,14 @@ const AnalysisParameters: React.FC = () => {
  const handleRemovePipe = (id: string) => {
    // 从高亮features中移除
    setHighlightFeatures((prev) =>
-      prev.filter((f) => f.getProperties().id !== id)
+      prev.filter((f) => f.getProperties().id !== id),
    );
  };

  const handleAreaChange = (id: string, value: string) => {
    const numValue = parseFloat(value) || 0;
    setPipePoints((prev) =>
-      prev.map((pipe) => (pipe.id === id ? { ...pipe, area: numValue } : pipe))
+      prev.map((pipe) => (pipe.id === id ? { ...pipe, area: numValue } : pipe)),
    );
  };

@@ -266,30 +266,26 @@ const AnalysisParameters: React.FC = () => {

    const burst_ID = pipePoints.map((pipe) => pipe.id);
    const burst_size = pipePoints.map((pipe) =>
-      parseInt(pipe.area.toString(), 10)
+      parseInt(pipe.area.toString(), 10),
    );
    // 格式化开始时间，去除秒部分
    const modify_pattern_start_time = startTime
      ? startTime.format("YYYY-MM-DDTHH:mm:00Z")
      : "";
    const modify_total_duration = duration;
-    const body = {
-      name: network,
+    const params = {
+      network: network,
      modify_pattern_start_time: modify_pattern_start_time,
      burst_ID: burst_ID,
      burst_size: burst_size,
      modify_total_duration: modify_total_duration,
-      scheme_Name: schemeName,
+      scheme_name: schemeName,
    };

    try {
-      await axios.post(`${config.BACKEND_URL}/api/v1/burst_analysis/`, body, {
-        headers: {
-          "Accept-Encoding": "gzip",
-          "Content-Type": "application/json",
-        },
+      await axios.get(`${config.BACKEND_URL}/api/v1/burst_analysis/`, {
+        params,
      });
-
      // 更新弹窗为成功状态
      open?.({
        key: "burst-analysis",
--- a/src/components/olmap/BurstPipeAnalysis/BurstPipeAnalysisPanel.tsx
+++ b/src/components/olmap/BurstPipeAnalysis/BurstPipeAnalysisPanel.tsx
@@ -19,7 +19,7 @@ import {
 } from "@mui/icons-material";
 import AnalysisParameters from "./AnalysisParameters";
 import SchemeQuery from "./SchemeQuery";
-import LocationResults, { LocationResult } from "./LocationResults";
+import LocationResults from "./LocationResults";
 import ContaminantAnalysisParameters from "../ContaminantSimulation/AnalysisParameters";
 import ContaminantSchemeQuery from "../ContaminantSimulation/SchemeQuery";
 import ContaminantResultsPanel from "../ContaminantSimulation/ResultsPanel";
@@ -27,25 +27,7 @@ import axios from "axios";
 import { config } from "@config/config";
 import { useNotification } from "@refinedev/core";
 import { useData } from "@app/OlMap/MapComponent";
-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;
-  create_time: string;
-  startTime: string;
-  // 详情信息
-  schemeDetail?: SchemeDetail;
-}
+import { LocationResult, SchemeRecord } from "./types";

 interface TabPanelProps {
  children?: React.ReactNode;
@@ -82,7 +64,7 @@ const BurstPipeAnalysisPanel: React.FC<BurstPipeAnalysisPanelProps> = ({
  const [currentTab, setCurrentTab] = useState(0);
  const [panelMode, setPanelMode] = useState<PanelMode>("burst");
  const previousMapText = useRef<{ junction?: string; pipe?: string } | null>(
-    null
+    null,
  );

  const data = useData();
@@ -108,28 +90,10 @@ const BurstPipeAnalysisPanel: React.FC<BurstPipeAnalysisPanelProps> = ({
    setCurrentTab(newValue);
  };

-  useEffect(() => {
-    if (!data) return;
-    if (panelMode === "contaminant") {
-      if (!previousMapText.current) {
-        previousMapText.current = {
-          junction: data.junctionText,
-          pipe: data.pipeText,
-        };
-      }
-      data.setJunctionText?.("quality");
-      data.setPipeText?.("quality");
-    } else if (panelMode === "burst" && previousMapText.current) {
-      data.setJunctionText?.(previousMapText.current.junction || "pressure");
-      data.setPipeText?.(previousMapText.current.pipe || "flow");
-      previousMapText.current = null;
-    }
-  }, [panelMode, data]);
-
  const handleLocateScheme = async (scheme: SchemeRecord) => {
    try {
      const response = await axios.get(
-        `${config.BACKEND_URL}/api/v1/burst-locate-result/${scheme.schemeName}`
+        `${config.BACKEND_URL}/api/v1/burst-locate-result/${scheme.schemeName}`,
      );
      setLocationResults(response.data);
      setCurrentTab(2); // 切换到定位结果标签页
@@ -304,7 +268,7 @@ const BurstPipeAnalysisPanel: React.FC<BurstPipeAnalysisPanelProps> = ({
                onLocate={handleLocateScheme}
              />
            ) : (
-              <ContaminantSchemeQuery />
+              <ContaminantSchemeQuery onViewResults={() => setCurrentTab(2)} />
            )}
          </TabPanel>

--- a/src/components/olmap/BurstPipeAnalysis/LocationResults.tsx
+++ b/src/components/olmap/BurstPipeAnalysis/LocationResults.tsx
@@ -29,15 +29,7 @@ import { Point } from "ol/geom";
 import { toLonLat } from "ol/proj";
 import moment from "moment";
 import "moment-timezone";
-
-export interface LocationResult {
-  id: number;
-  type: string;
-  burst_incident: string;
-  leakage: number | null;
-  detect_time: string;
-  locate_result: string[] | null;
-}
+import { LocationResult } from "./types";

 interface LocationResultsProps {
  results?: LocationResult[];
@@ -56,7 +48,7 @@ const LocationResults: React.FC<LocationResultsProps> = ({ results = [] }) => {

  const handleLocatePipes = (pipeIds: string[]) => {
    if (pipeIds.length > 0) {
-      queryFeaturesByIds(pipeIds).then((features) => {
+      queryFeaturesByIds(pipeIds, "geo_pipes_mat").then((features) => {
        if (features.length > 0) {
          // 设置高亮要素
          setHighlightFeatures(features);
--- a/src/components/olmap/BurstPipeAnalysis/SchemeQuery.tsx
+++ b/src/components/olmap/BurstPipeAnalysis/SchemeQuery.tsx
@@ -1,6 +1,6 @@
 "use client";

-import React, { useEffect, useState } from "react";
+import React, { useEffect, useMemo, useState } from "react";
 import ReactDOM from "react-dom"; // 添加这行

 import {
@@ -49,36 +49,7 @@ import {
 import { Point } from "ol/geom";
 import { toLonLat } from "ol/proj";
 import Timeline from "@app/OlMap/Controls/Timeline";
-
-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;
-  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;
-}
+import { SchemaItem, SchemeRecord } from "./types";

 interface SchemeQueryProps {
  schemes?: SchemeRecord[];
@@ -87,6 +58,8 @@ interface SchemeQueryProps {
  network?: string;
 }

+const SCHEME_TYPE = "burst_analysis";
+
 const SchemeQuery: React.FC<SchemeQueryProps> = ({
  schemes: externalSchemes,
  onSchemesChange,
@@ -114,8 +87,8 @@ const SchemeQuery: React.FC<SchemeQueryProps> = ({

  const map = useMap();
  const data = useData();
-  if (!data) return null;
-  const { schemeName, setSchemeName } = data;
+  const { schemeName, setSchemeName } = data || {};
+
  // 使用外部提供的 schemes 或内部状态
  const schemes =
    externalSchemes !== undefined ? externalSchemes : internalSchemes;
@@ -127,13 +100,17 @@ const SchemeQuery: React.FC<SchemeQueryProps> = ({
    return time.format("MM-DD");
  };

+  const filteredSchemes = useMemo(() => {
+    return schemes.filter((scheme) => scheme.type === SCHEME_TYPE);
+  }, [schemes]);
+
  const handleQuery = async () => {
    if (!queryAll && !queryDate) return;

    setLoading(true);
    try {
      const response = await axios.get(
-        `${config.BACKEND_URL}/api/v1/getallschemes/?network=${network}`
+        `${config.BACKEND_URL}/api/v1/getallschemes/?network=${network}`,
      );
      let filteredResults = response.data;

@@ -154,7 +131,7 @@ const SchemeQuery: React.FC<SchemeQueryProps> = ({
          create_time: item.create_time,
          startTime: item.scheme_start_time,
          schemeDetail: item.scheme_detail,
-        }))
+        })),
      );

      if (filteredResults.length === 0) {
@@ -180,14 +157,14 @@ const SchemeQuery: React.FC<SchemeQueryProps> = ({

  const handleLocatePipes = (pipeIds: string[]) => {
    if (pipeIds.length > 0) {
-      queryFeaturesByIds(pipeIds).then((features) => {
+      queryFeaturesByIds(pipeIds, "geo_pipes_mat").then((features) => {
        if (features.length > 0) {
          // 设置高亮要素
          setHighlightFeatures(features);
          // 将 OpenLayers Feature 转换为 GeoJSON Feature
          const geojsonFormat = new GeoJSON();
          const geojsonFeatures = features.map((feature) =>
-            geojsonFormat.writeFeatureObject(feature)
+            geojsonFormat.writeFeatureObject(feature),
          );

          const extent = bbox(featureCollection(geojsonFeatures as any));
@@ -202,25 +179,24 @@ const SchemeQuery: React.FC<SchemeQueryProps> = ({

  // 内部的方案查询函数
  const handleViewDetails = (id: number) => {
+    const scheme = filteredSchemes.find((s) => s.id === id);
+    if (!scheme) return;
+
    setShowTimeline(true);
    // 计算时间范围
-    const scheme = schemes.find((s) => s.id === id);
-    const burstPipeIds = scheme?.schemeDetail?.burst_ID || [];
-    const schemeDate = scheme?.startTime
+    const schemeDate = scheme.startTime
      ? new Date(scheme.startTime)
      : undefined;
-    if (scheme?.startTime && scheme.schemeDetail?.modify_total_duration) {
+    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
+        start.getTime() + scheme.schemeDetail.modify_total_duration * 1000,
      );
      setSelectedDate(schemeDate);
      setTimeRange({ start, end });
-      if (setSchemeName) {
-        setSchemeName(scheme.schemeName);
-      }
-      handleLocatePipes(burstPipeIds);
    }
+    setSchemeName?.(scheme.schemeName);
+    handleLocatePipes(scheme.schemeDetail?.burst_ID || []);
  };

  // 初始化管道图层和高亮图层
@@ -254,7 +230,7 @@ const SchemeQuery: React.FC<SchemeQueryProps> = ({
            width: 3,
            lineDash: [15, 10],
          }),
-        })
+        }),
      );
      const geometry = feature.getGeometry();
      const lineCoords =
@@ -281,7 +257,7 @@ const SchemeQuery: React.FC<SchemeQueryProps> = ({
              scale: 0.2,
              anchor: [0.5, 1],
            }),
-          })
+          }),
        );
      }
      return styles;
@@ -336,9 +312,9 @@ const SchemeQuery: React.FC<SchemeQueryProps> = ({
            timeRange={timeRange}
            disableDateSelection={!!timeRange}
            schemeName={schemeName}
-            schemeType="burst_Analysis"
+            schemeType={SCHEME_TYPE}
          />,
-          mapContainer // 渲染到地图容器中，而不是 body
+          mapContainer, // 渲染到地图容器中，而不是 body
        )}
      <Box className="flex flex-col h-full">
        {/* 查询条件 - 单行布局 */}
@@ -391,7 +367,7 @@ const SchemeQuery: React.FC<SchemeQueryProps> = ({

        {/* 结果列表 */}
        <Box className="flex-1 overflow-auto">
-          {schemes.length === 0 ? (
+          {filteredSchemes.length === 0 ? (
            <Box className="flex flex-col items-center justify-center h-full text-gray-400">
              <Box className="mb-4">
                <svg
@@ -428,9 +404,9 @@ const SchemeQuery: React.FC<SchemeQueryProps> = ({
          ) : (
            <Box className="space-y-2 p-2">
              <Typography variant="caption" className="text-gray-500 px-2">
-                共 {schemes.length} 条记录
+                共 {filteredSchemes.length} 条记录
              </Typography>
-              {schemes.map((scheme) => (
+              {filteredSchemes.map((scheme) => (
                <Card
                  key={scheme.id}
                  variant="outlined"
@@ -449,7 +425,11 @@ const SchemeQuery: React.FC<SchemeQueryProps> = ({
                            {scheme.schemeName}
                          </Typography>
                          <Chip
-                            label={scheme.type}
+                            label={
+                              scheme.type === "burst_analysis"
+                                ? "爆管模拟"
+                                : scheme.type
+                            }
                            size="small"
                            className="h-5"
                            color="primary"
@@ -475,7 +455,7 @@ const SchemeQuery: React.FC<SchemeQueryProps> = ({
                            size="small"
                            onClick={() =>
                              setExpandedId(
-                                expandedId === scheme.id ? null : scheme.id
+                                expandedId === scheme.id ? null : scheme.id,
                              )
                            }
                            color="primary"
@@ -528,7 +508,7 @@ const SchemeQuery: React.FC<SchemeQueryProps> = ({
                                        >
                                          {pipeId}
                                        </Link>
-                                      )
+                                      ),
                                    )
                                  ) : (
                                    <Typography
@@ -618,7 +598,7 @@ const SchemeQuery: React.FC<SchemeQueryProps> = ({
                                  className="font-medium text-gray-900"
                                >
                                  {moment(scheme.create_time).format(
-                                    "YYYY-MM-DD HH:mm"
+                                    "YYYY-MM-DD HH:mm",
                                  )}
                                </Typography>
                              </Box>
@@ -634,7 +614,7 @@ const SchemeQuery: React.FC<SchemeQueryProps> = ({
                                  className="font-medium text-gray-900"
                                >
                                  {moment(scheme.startTime).format(
-                                    "YYYY-MM-DD HH:mm"
+                                    "YYYY-MM-DD HH:mm",
                                  )}
                                </Typography>
                              </Box>
@@ -652,7 +632,7 @@ const SchemeQuery: React.FC<SchemeQueryProps> = ({
                              className="border-blue-600 text-blue-600 hover:bg-blue-50"
                              onClick={() =>
                                handleLocatePipes?.(
-                                  scheme.schemeDetail!.burst_ID
+                                  scheme.schemeDetail!.burst_ID,
                                )
                              }
                              sx={{
--- a/src/components/olmap/BurstPipeAnalysis/types.ts
+++ b/src/components/olmap/BurstPipeAnalysis/types.ts
@@ -0,0 +1,38 @@
+export 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;
+}
+
+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;
+}
+
+export interface LocationResult {
+  id: number;
+  type: string;
+  burst_incident: string;
+  leakage: number | null;
+  detect_time: string;
+  locate_result: string[] | null;
+}