OrgTJWater/TJWaterFrontend_Refine
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

完善关阀分析页面设计

Browse Source
This commit is contained in:
JIANG
2026-02-03 10:56:49 +08:00
parent a3f4b477bc
commit 6f0ef342e9
8 changed files with 846 additions and 240 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/components/olmap/BurstPipeAnalysis/BurstPipeAnalysisPanel.tsx
View File

@@ -29,7 +29,7 @@ import axios from "axios";
import { config } from "@config/config";
import { useNotification } from "@refinedev/core";
import { useData } from "@app/OlMap/MapComponent";
import { LocationResult, SchemeRecord } from "./types";
import { LocationResult, SchemeRecord, ValveIsolationResult } from "./types";
interface TabPanelProps {
children?: React.ReactNode;
@@ -75,6 +75,13 @@ const BurstPipeAnalysisPanel: React.FC<BurstPipeAnalysisPanelProps> = ({
const [schemes, setSchemes] = useState<SchemeRecord[]>([]);
// 定位结果数据
const [locationResults, setLocationResults] = useState<LocationResult[]>([]);
// 选中的管段ID数组
const [selectedPipeIds, setSelectedPipeIds] = useState<string[]>([]);
// 关阀分析状态提升到父组件
const [valveAnalysisTriggered, setValveAnalysisTriggered] = useState(false);
// 关阀分析结果和加载状态
const [valveAnalysisLoading, setValveAnalysisLoading] = useState(false);
const [valveAnalysisResult, setValveAnalysisResult] = useState<ValveIsolationResult | null>(null);
const { open } = useNotification();
@@ -109,6 +116,12 @@ const BurstPipeAnalysisPanel: React.FC<BurstPipeAnalysisPanelProps> = ({
}
};
const handleAnalyzePipe = (pipeIds: string[]) => {
setSelectedPipeIds(pipeIds);
setValveAnalysisTriggered(true);
setCurrentTab(3);
};
const drawerWidth = 520;
const isBurstMode = panelMode === "burst";
const panelTitle = isBurstMode ? "爆管分析" : "水质模拟";
@@ -283,7 +296,10 @@ const BurstPipeAnalysisPanel: React.FC<BurstPipeAnalysisPanelProps> = ({
<TabPanel value={currentTab} index={2}>
{isBurstMode ? (
<LocationResults results={locationResults} />
<LocationResults
results={locationResults}
onAnalyze={handleAnalyzePipe}
/>
) : (
<ContaminantResultsPanel schemeName={data?.schemeName} />
)}
@@ -291,7 +307,15 @@ const BurstPipeAnalysisPanel: React.FC<BurstPipeAnalysisPanelProps> = ({
{isBurstMode && (
<TabPanel value={currentTab} index={3}>
<ValveIsolation />
<ValveIsolation
initialPipeIds={selectedPipeIds}
shouldFetch={valveAnalysisTriggered}
onFetchComplete={() => setValveAnalysisTriggered(false)}
loading={valveAnalysisLoading}
result={valveAnalysisResult}
onLoadingChange={setValveAnalysisLoading}
onResultChange={setValveAnalysisResult}
/>
</TabPanel>
)}
</Box>

117
src/components/olmap/BurstPipeAnalysis/LocationResults.tsx
View File

@@ -9,7 +9,10 @@ import {
Tooltip,
Link,
} from "@mui/material";
import { LocationOn as LocationIcon } from "@mui/icons-material";
import {
LocationOn as LocationIcon,
Handyman as HandymanIcon,
} from "@mui/icons-material";
import { queryFeaturesByIds } from "@/utils/mapQueryService";
import { useMap } from "@app/OlMap/MapComponent";
import { GeoJSON } from "ol/format";
@@ -33,9 +36,13 @@ import { LocationResult } from "./types";
interface LocationResultsProps {
results?: LocationResult[];
onAnalyze?: (pipeIds: string[]) => void;
}
const LocationResults: React.FC<LocationResultsProps> = ({ results = [] }) => {
const LocationResults: React.FC<LocationResultsProps> = ({
results = [],
onAnalyze,
}) => {
const [highlightLayer, setHighlightLayer] =
useState<VectorLayer<VectorSource> | null>(null);
const [highlightFeatures, setHighlightFeatures] = useState<Feature[]>([]);
@@ -55,7 +62,7 @@ const LocationResults: React.FC<LocationResultsProps> = ({ results = [] }) => {
// 将 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));
@@ -95,7 +102,7 @@ const LocationResults: React.FC<LocationResultsProps> = ({ results = [] }) => {
width: 3,
lineDash: [15, 10],
}),
})
}),
);
const geometry = feature.getGeometry();
const lineCoords =
@@ -122,7 +129,7 @@ const LocationResults: React.FC<LocationResultsProps> = ({ results = [] }) => {
scale: 0.2,
anchor: [0.5, 1],
}),
})
}),
);
}
return styles;
@@ -243,7 +250,9 @@ const LocationResults: React.FC<LocationResultsProps> = ({ results = [] }) => {
{result.burst_incident}
</Typography>
<Chip
label={result.type}
label={
result.type === "burst_analysis" ? "爆管模拟" : result.type
}
size="small"
color="primary"
variant="outlined"
@@ -339,21 +348,40 @@ const LocationResults: React.FC<LocationResultsProps> = ({ results = [] }) => {
>
管段列表
</Typography>
<Tooltip title="定位所有管道">
<IconButton
size="small"
onClick={() => handleLocatePipes(result.locate_result!)}
color="primary"
sx={{
backgroundColor: "rgba(37, 125, 212, 0.1)",
"&:hover": {
backgroundColor: "rgba(37, 125, 212, 0.2)",
},
}}
>
<LocationIcon sx={{ fontSize: "1.2rem" }} />
</IconButton>
</Tooltip>
<Box className="flex items-center gap-2">
{onAnalyze && (
<Tooltip title="关阀分析">
<IconButton
size="small"
onClick={() => onAnalyze(result.locate_result!)}
color="secondary"
sx={{
backgroundColor: "rgba(156, 39, 176, 0.1)",
"&:hover": {
backgroundColor: "rgba(156, 39, 176, 0.2)",
},
}}
>
<HandymanIcon sx={{ fontSize: "1.2rem" }} />
</IconButton>
</Tooltip>
)}
<Tooltip title="定位所有管道">
<IconButton
size="small"
onClick={() => handleLocatePipes(result.locate_result!)}
color="primary"
sx={{
backgroundColor: "rgba(37, 125, 212, 0.1)",
"&:hover": {
backgroundColor: "rgba(37, 125, 212, 0.2)",
},
}}
>
<LocationIcon sx={{ fontSize: "1.2rem" }} />
</IconButton>
</Tooltip>
</Box>
</Box>
<Box className="grid grid-cols-2 gap-2">
{result.locate_result.map((pipeId, idx) => (
@@ -361,6 +389,12 @@ const LocationResults: React.FC<LocationResultsProps> = ({ results = [] }) => {
key={idx}
className="bg-gradient-to-r from-blue-50 to-white rounded-lg px-3 py-2 border border-blue-200 hover:border-blue-400 hover:shadow-md transition-all cursor-pointer group"
onClick={() => handleLocatePipes([pipeId])}
sx={{
"&:active": {
transform: "scale(0.98)",
boxShadow: "0 1px 2px rgba(25, 118, 210, 0.2)",
},
}}
>
<Box className="flex items-center justify-between">
<Typography
@@ -369,10 +403,43 @@ const LocationResults: React.FC<LocationResultsProps> = ({ results = [] }) => {
>
{pipeId}
</Typography>
<LocationIcon
sx={{ fontSize: "1rem" }}
className="text-blue-400 group-hover:text-blue-600 transition-colors"
/>
<Box className="flex items-center gap-1">
{onAnalyze && (
<Tooltip title="单管段关阀分析">
<IconButton
size="small"
onClick={(e) => {
e.stopPropagation();
onAnalyze([pipeId]);
}}
className="text-blue-400 hover:text-blue-600"
sx={{
"&:hover": {
backgroundColor: "rgba(37, 125, 212, 0.1)",
},
}}
>
<HandymanIcon sx={{ fontSize: "1rem" }} />
</IconButton>
</Tooltip>
)}
{/* <Tooltip title="定位管段">
<IconButton
size="small"
onClick={(e) => {
e.stopPropagation();
handleLocatePipes([pipeId]);
}}
sx={{
"&:hover": {
backgroundColor: "rgba(37, 125, 212, 0.1)",
},
}}
>
<LocationIcon sx={{ fontSize: "1rem" }} />
</IconButton>
</Tooltip> */}
</Box>
</Box>
</Box>
))}

2
src/components/olmap/BurstPipeAnalysis/SchemeQuery.tsx
View File

@@ -464,7 +464,7 @@ const SchemeQuery: React.FC<SchemeQueryProps> = ({
<InfoIcon fontSize="small" />
</IconButton>
</Tooltip>
<Tooltip title="定位">
<Tooltip title="查看定位结果">
<IconButton
size="small"
onClick={() => onLocate?.(scheme)}

98
src/components/olmap/BurstPipeAnalysis/ValveIsolation.test.tsx
View File

@@ -1,98 +0,0 @@
import React from "react";
import { render, screen, fireEvent, waitFor } from "@testing-library/react";
import ValveIsolation from "./ValveIsolation";
import axios from "axios";
import "@testing-library/jest-dom";
// Mock dependencies
jest.mock("axios");
const mockedAxios = axios as jest.Mocked<typeof axios>;
jest.mock("@refinedev/core", () => ({
useNotification: () => ({
open: jest.fn(),
}),
}));
// Mock config
jest.mock("@config/config", () => ({
config: {
BACKEND_URL: "http://test-api.com",
},
NETWORK_NAME: "test-network",
// If config is a default export or named export, adjust accordingly.
// Based on usage: import { config, NETWORK_NAME } from '@config/config';
// The mock above covers named exports.
}));
describe("ValveIsolation Component", () => {
beforeEach(() => {
jest.clearAllMocks();
});
test("renders input and analyze button", () => {
render(<ValveIsolation />);
expect(screen.getByLabelText(/爆管管段ID/i)).toBeInTheDocument();
expect(screen.getByText(/开始分析/i)).toBeInTheDocument();
});
test("calls API with correct parameters when analyze is clicked", async () => {
mockedAxios.get.mockResolvedValueOnce({
data: {
accident_element: "pipe1",
accident_type: "Burst",
affected_nodes: ["node1", "node2"],
must_close_valves: ["valve1"],
optional_valves: [],
isolatable: true,
},
});
render(<ValveIsolation />);
const input = screen.getByLabelText(/爆管管段ID/i);
fireEvent.change(input, { target: { value: "pipe1" } });
const button = screen.getByText(/开始分析/i);
fireEvent.click(button);
await waitFor(() => {
expect(mockedAxios.get).toHaveBeenCalledWith(
"http://test-api.com/api/v1/valve_isolation_analysis",
{
params: {
network: "test-network",
accident_element: "pipe1",
},
},
);
});
});
test("displays results after successful analysis", async () => {
mockedAxios.get.mockResolvedValueOnce({
data: {
accident_element: "pipe1",
accident_type: "Burst",
affected_nodes: ["nodeA"],
must_close_valves: ["valveA", "valveB"],
optional_valves: [],
isolatable: true,
},
});
render(<ValveIsolation />);
fireEvent.change(screen.getByLabelText(/爆管管段ID/i), {
target: { value: "pipe1" },
});
fireEvent.click(screen.getByText(/开始分析/i));
await waitFor(() => {
expect(screen.getByText("可隔离")).toBeInTheDocument();
expect(screen.getByText("valveA")).toBeInTheDocument();
expect(screen.getByText("valveB")).toBeInTheDocument();
expect(screen.getByText("nodeA")).toBeInTheDocument();
});
});
});

802
src/components/olmap/BurstPipeAnalysis/ValveIsolation.tsx
View File

@@ -1,117 +1,731 @@
"use client";
import React, { useState } from 'react';
import { Box, TextField, Button, Typography, Card, CardContent, Chip } from '@mui/material';
import axios from 'axios';
import { config, NETWORK_NAME } from '@config/config';
import { ValveIsolationResult } from './types';
import React, { useState, useEffect, useCallback, useRef } from "react";
import {
Box,
Typography,
Chip,
CircularProgress,
IconButton,
Tooltip,
} from "@mui/material";
import { LocationOn as LocationIcon } from "@mui/icons-material";
import axios from "axios";
import { config, NETWORK_NAME } from "@config/config";
import { ValveIsolationResult } from "./types";
import { useNotification } from "@refinedev/core";
import { queryFeaturesByIds } from "@/utils/mapQueryService";
import { useMap } from "@app/OlMap/MapComponent";
import { GeoJSON } from "ol/format";
import VectorLayer from "ol/layer/Vector";
import VectorSource from "ol/source/Vector";
import { Circle as CircleStyle, Fill, Stroke, Style, Icon } from "ol/style";
import Feature, { FeatureLike } from "ol/Feature";
import {
bbox,
featureCollection,
along,
lineString,
length,
toMercator,
} from "@turf/turf";
import { Point } from "ol/geom";
import { toLonLat } from "ol/proj";
const ValveIsolation: React.FC = () => {
const [pipeId, setPipeId] = useState('');
const [loading, setLoading] = useState(false);
const [result, setResult] = useState<ValveIsolationResult | null>(null);
interface ValveIsolationProps {
initialPipeIds?: string[];
shouldFetch?: boolean;
onFetchComplete?: () => void;
loading?: boolean;
result?: ValveIsolationResult | null;
onLoadingChange?: (loading: boolean) => void;
onResultChange?: (result: ValveIsolationResult | null) => void;
}
const ValveIsolation: React.FC<ValveIsolationProps> = ({
initialPipeIds,
shouldFetch = false,
onFetchComplete,
loading: externalLoading,
result: externalResult,
onLoadingChange,
onResultChange,
}) => {
const [internalLoading, setInternalLoading] = useState(false);
const [internalResult, setInternalResult] =
useState<ValveIsolationResult | null>(null);
// 使用外部状态或内部状态
const loading =
externalLoading !== undefined ? externalLoading : internalLoading;
const result = externalResult !== undefined ? externalResult : internalResult;
const setLoading = onLoadingChange || setInternalLoading;
const setResult = onResultChange || setInternalResult;
const [highlightLayer, setHighlightLayer] =
useState<VectorLayer<VectorSource> | null>(null);
const [highlightFeatures, setHighlightFeatures] = useState<Feature[]>([]);
const [highlightType, setHighlightType] = useState<
"must_close" | "optional" | "affected_node" | "pipe"
>("affected_node");
const { open } = useNotification();
const lastPipeIdsRef = useRef<string>("");
const map = useMap();
const handleAnalyze = async () => {
if (!pipeId.trim()) {
open?.({ type: 'error', message: '请输入管段ID' });
return;
}
setLoading(true);
setResult(null);
try {
const response = await axios.get(`${config.BACKEND_URL}/api/v1/valve_isolation_analysis`, {
params: {
network: NETWORK_NAME,
accident_element: pipeId
const handleLocatePipes = (pipeIds: string[]) => {
if (pipeIds.length > 0) {
queryFeaturesByIds(pipeIds, "geo_pipes_mat").then((features) => {
if (features.length > 0) {
// 设置高亮类型为管段
setHighlightType("pipe");
// 设置高亮要素
setHighlightFeatures(features);
// 将 OpenLayers Feature 转换为 GeoJSON 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 });
}
}
});
setResult(response.data);
open?.({ type: 'success', message: '分析成功' });
} catch (error) {
console.error(error);
open?.({ type: 'error', message: '分析失败', description: '无法获取关阀分析结果' });
} finally {
setLoading(false);
}
};
const handleLocateNodes = (nodeIds: string[]) => {
if (nodeIds.length > 0) {
queryFeaturesByIds(nodeIds, "geo_junctions").then((features) => {
if (features.length > 0) {
// 设置高亮类型为受影响节点
setHighlightType("affected_node");
// 设置高亮要素
setHighlightFeatures(features);
// 将 OpenLayers Feature 转换为 GeoJSON 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 });
}
}
});
}
};
const handleLocateMustCloseValves = (valveIds: string[]) => {
if (valveIds.length > 0) {
queryFeaturesByIds(valveIds, "geo_valves").then((features) => {
if (features.length > 0) {
// 设置高亮类型为必关阀门
setHighlightType("must_close");
// 设置高亮要素
setHighlightFeatures(features);
// 将 OpenLayers Feature 转换为 GeoJSON 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 });
}
}
});
}
};
const handleLocateOptionalValves = (valveIds: string[]) => {
if (valveIds.length > 0) {
queryFeaturesByIds(valveIds, "geo_valves").then((features) => {
if (features.length > 0) {
// 设置高亮类型为可选阀门
setHighlightType("optional");
// 设置高亮要素
setHighlightFeatures(features);
// 将 OpenLayers Feature 转换为 GeoJSON 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 });
}
}
});
}
};
const fetchAnalysis = useCallback(
async (ids: string[]) => {
if (!ids || ids.length === 0) {
open?.({ type: "error", message: "请提供管段ID" });
return;
}
setLoading(true);
setResult(null);
try {
const response = await axios.get(
`${config.BACKEND_URL}/api/v1/valve_isolation_analysis/`,
{
params: {
network: NETWORK_NAME,
accident_element: ids,
},
paramsSerializer: {
indexes: null, // 生成格式: accident_element=P1&accident_element=P2
},
},
);
setResult(response.data);
open?.({ type: "success", message: "分析成功" });
} catch (error) {
console.error(error);
open?.({
type: "error",
message: "分析失败",
description: "无法获取关阀分析结果",
});
} finally {
setLoading(false);
onFetchComplete?.();
}
},
[open, onFetchComplete],
);
useEffect(() => {
// 只有在明确要求获取数据时才调用 API
if (shouldFetch && initialPipeIds && initialPipeIds.length > 0) {
// 使用排序后的字符串作为唯一标识，避免数组引用变化导致重复调用
const pipeIdsKey = [...initialPipeIds].sort().join(",");
// 只有当 pipeIds 真正改变时才调用 API
if (pipeIdsKey !== lastPipeIdsRef.current) {
lastPipeIdsRef.current = pipeIdsKey;
fetchAnalysis(initialPipeIds);
} else {
// 如果 pipeIds 相同，直接调用完成回调
onFetchComplete?.();
}
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [shouldFetch, initialPipeIds]);
// 初始化高亮图层
useEffect(() => {
if (!map) return;
// 动态样式函数，根据 highlightType 返回不同的样式
const getHighlightStyle = (feature: FeatureLike) => {
if (highlightType === "pipe") {
// 管段 - 多层红色线条样式 + 中点图标
const styles = [];
// 线条样式（底层发光，主线条，内层高亮线）
styles.push(
new Style({
stroke: new Stroke({
color: "rgba(255, 0, 0, 0.3)",
width: 12,
}),
}),
new Style({
stroke: new Stroke({
color: "rgba(255, 0, 0, 1)",
width: 6,
lineDash: [15, 10],
}),
}),
new Style({
stroke: new Stroke({
color: "rgba(255, 102, 102, 1)",
width: 3,
lineDash: [15, 10],
}),
}),
);
const geometry = feature.getGeometry();
const lineCoords =
geometry?.getType() === "LineString"
? (geometry as any).getCoordinates()
: null;
if (geometry && lineCoords) {
const lineCoordsWGS84 = lineCoords.map((coord: []) => {
const [lon, lat] = toLonLat(coord);
return [lon, lat];
});
// 计算中点
const lineStringFeature = lineString(lineCoordsWGS84);
const lineLength = length(lineStringFeature);
const midPoint = along(lineStringFeature, lineLength / 2).geometry
.coordinates;
// 在中点添加 icon 样式
const midPointMercator = toMercator(midPoint);
styles.push(
new Style({
geometry: new Point(midPointMercator),
image: new Icon({
src: "/icons/burst_pipe.svg",
scale: 0.2,
anchor: [0.5, 1],
}),
}),
);
}
return styles;
}
// 阀门和节点的样式
let color: string;
let strokeColor: string;
let radius: number;
switch (highlightType) {
case "must_close":
// 必关阀门 - 深红色
color = "rgba(211, 47, 47, 0.6)";
strokeColor = "rgba(211, 47, 47, 1)";
radius = 10;
break;
case "optional":
// 可选阀门 - 橙色
color = "rgba(237, 108, 2, 0.6)";
strokeColor = "rgba(237, 108, 2, 1)";
radius = 10;
break;
case "affected_node":
default:
// 受影响节点 - 蓝色
color = "rgba(25, 118, 210, 0.6)";
strokeColor = "rgba(25, 118, 210, 1)";
radius = 8;
break;
}
return new Style({
image: new CircleStyle({
radius: radius,
fill: new Fill({
color: color,
}),
stroke: new Stroke({
color: strokeColor,
width: 3,
}),
}),
});
};
// 创建高亮图层
const highlightLayer = new VectorLayer({
source: new VectorSource(),
style: getHighlightStyle,
maxZoom: 24,
minZoom: 12,
properties: {
name: "阀门节点高亮",
value: "valve_node_highlight",
},
});
map.addLayer(highlightLayer);
setHighlightLayer(highlightLayer);
return () => {
map.removeLayer(highlightLayer);
};
}, [map, highlightType]);
// 高亮要素的函数
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]);
return (
<Box className="flex flex-col h-full p-4">
{/* Input Section */}
<Box className="mb-4 flex gap-2 items-end">
<TextField
label="爆管管段ID"
variant="outlined"
size="small"
fullWidth
value={pipeId}
onChange={(e) => setPipeId(e.target.value)}
placeholder="请输入管段ID"
/>
<Button
variant="contained"
onClick={handleAnalyze}
disabled={loading}
className="bg-blue-600 h-[40px] min-w-[100px]"
>
{loading ? '分析中' : '开始分析'}
</Button>
</Box>
<Box className="flex flex-col h-full">
{/* Results Section */}
{result && (
<Box className="flex-1 overflow-auto space-y-4">
<Card variant="outlined">
<CardContent className="p-3">
<Box className="flex justify-between items-center mb-2">
<Typography variant="subtitle1" fontWeight="bold">分析结果</Typography>
<Chip
label={result.isolatable ? "可隔离" : "不可隔离"}
color={result.isolatable ? "success" : "error"}
size="small"
/>
</Box>
<Typography variant="body2" color="text.secondary">事故类型: {result.accident_type}</Typography>
<Typography variant="body2" color="text.secondary">受影响节点数: {result.affected_nodes?.length || 0}</Typography>
</CardContent>
</Card>
<Box>
<Typography variant="subtitle2" className="mb-2">必须关闭阀门 ({result.must_close_valves?.length || 0})</Typography>
{result.must_close_valves?.length > 0 ? (
<Box className="flex flex-wrap gap-2">
{result.must_close_valves.map(v => (
<Chip key={v} label={v} color="error" variant="outlined" size="small" />
))}
</Box>
) : <Typography variant="caption" color="text.secondary">无</Typography>}
<Box className="flex-1 overflow-auto bg-white rounded border border-gray-200">
{loading ? (
<Box className="flex flex-col items-center justify-center h-full text-gray-500">
<CircularProgress size={40} className="mb-4" />
<Typography variant="body2">正在分析...</Typography>
</Box>
) : result ? (
<Box className="p-5 h-full overflow-auto">
{/* 头部：状态信息 */}
<Box className="mb-5">
<Box className="flex items-center gap-2 mb-1">
<Typography variant="h6" className="font-bold text-gray-900">
关阀分析结果
</Typography>
<Chip
label={result.isolatable ? "可隔离" : "不可隔离"}
size="small"
color={result.isolatable ? "success" : "error"}
variant="outlined"
sx={{
fontWeight: 600,
fontSize: "0.75rem",
height: "24px",
}}
/>
</Box>
<Box className="bg-gradient-to-r from-red-50 via-pink-50 to-red-50 rounded-lg p-3 border border-red-200 shadow-sm">
<Box className="flex items-center justify-between mb-2">
<Box className="flex items-center gap-2">
<Box className="w-2 h-2 rounded-full bg-red-600 animate-pulse"></Box>
<Typography
variant="caption"
className="text-red-700 font-semibold uppercase tracking-wide"
sx={{ fontSize: "0.7rem" }}
>
爆管管段
</Typography>
</Box>
{result.accident_elements &&
result.accident_elements.length > 0 && (
<Tooltip title="定位所有管段">
<IconButton
size="small"
onClick={() =>
handleLocatePipes(result.accident_elements!)
}
sx={{
backgroundColor: "rgba(255, 0, 0, 0.1)",
"&:hover": {
backgroundColor: "rgba(255, 0, 0, 0.2)",
},
}}
>
<LocationIcon
sx={{ fontSize: "1rem", color: "rgb(220, 38, 38)" }}
/>
</IconButton>
</Tooltip>
)}
</Box>
<Box className="flex flex-wrap gap-2">
{result.accident_elements?.map(
(pipeId: string, idx: number) => (
<Chip
key={idx}
label={pipeId}
size="small"
onClick={() => handleLocatePipes([pipeId])}
sx={{
backgroundColor: "rgba(255, 255, 255, 0.9)",
border: "1.5px solid rgb(248, 113, 113)",
color: "rgb(185, 28, 28)",
fontWeight: 600,
fontSize: "0.8rem",
cursor: "pointer",
transition: "all 0.2s",
"&:hover": {
backgroundColor: "rgb(254, 226, 226)",
borderColor: "rgb(220, 38, 38)",
transform: "translateY(-1px)",
boxShadow: "0 2px 4px rgba(220, 38, 38, 0.2)",
},
}}
/>
),
)}
</Box>
</Box>
</Box>
<Box>
<Typography variant="subtitle2" className="mb-2">可选关闭阀门 ({result.optional_valves?.length || 0})</Typography>
{result.optional_valves?.length > 0 ? (
<Box className="flex flex-wrap gap-2">
{result.optional_valves.map(v => (
<Chip key={v} label={v} color="warning" variant="outlined" size="small" />
))}
</Box>
) : <Typography variant="caption" color="text.secondary">无</Typography>}
{/* 主要信息：三栏卡片布局 */}
<Box className="grid grid-cols-3 gap-3 mb-5">
{/* 必关阀门卡片 */}
<Box className="bg-gradient-to-br from-red-50 to-red-100 rounded-lg p-3 border border-red-200 shadow-sm hover:shadow-md transition-shadow">
<Box className="flex items-center gap-1.5 mb-2">
<Box className="w-1.5 h-1.5 rounded-full bg-red-600"></Box>
<Typography
variant="caption"
className="text-red-700 font-semibold uppercase tracking-wide"
sx={{ fontSize: "0.7rem" }}
>
必关阀门
</Typography>
</Box>
<Typography
variant="body2"
className="font-bold text-red-900"
sx={{ fontSize: "0.875rem" }}
>
{result.must_close_valves?.length || 0} 个
</Typography>
</Box>
{/* 可选阀门卡片 */}
<Box className="bg-gradient-to-br from-orange-50 to-orange-100 rounded-lg p-3 border border-orange-200 shadow-sm hover:shadow-md transition-shadow">
<Box className="flex items-center gap-1.5 mb-2">
<Box className="w-1.5 h-1.5 rounded-full bg-orange-600"></Box>
<Typography
variant="caption"
className="text-orange-700 font-semibold uppercase tracking-wide"
sx={{ fontSize: "0.7rem" }}
>
可选阀门
</Typography>
</Box>
<Typography
variant="body2"
className="font-bold text-orange-900"
sx={{ fontSize: "0.875rem" }}
>
{result.optional_valves?.length || 0} 个
</Typography>
</Box>
{/* 受影响节点卡片 */}
<Box className="bg-gradient-to-br from-blue-50 to-blue-100 rounded-lg p-3 border border-blue-200 shadow-sm hover:shadow-md transition-shadow">
<Box className="flex items-center gap-1.5 mb-2">
<Box className="w-1.5 h-1.5 rounded-full bg-blue-600"></Box>
<Typography
variant="caption"
className="text-blue-700 font-semibold uppercase tracking-wide"
sx={{ fontSize: "0.7rem" }}
>
受影响节点
</Typography>
</Box>
<Typography
variant="body2"
className="font-bold text-blue-900"
sx={{ fontSize: "0.875rem" }}
>
{result.affected_nodes?.length || 0} 个
</Typography>
</Box>
</Box>
<Box>
<Typography variant="subtitle2" className="mb-2">受影响节点 ({result.affected_nodes?.length || 0})</Typography>
{result.affected_nodes?.length > 0 ? (
<Box className="bg-gray-50 p-2 rounded max-h-40 overflow-auto">
<Typography variant="caption" className="break-all">
{result.affected_nodes.join(', ')}
{/* 必须关闭阀门详细列表 */}
{result.must_close_valves &&
result.must_close_valves.length > 0 && (
<Box className="bg-white rounded-lg p-4 border-2 border-red-200 shadow-sm mb-4">
<Box className="flex items-center justify-between mb-3">
<Typography
variant="body1"
className="text-gray-900 font-bold"
sx={{ fontSize: "0.95rem" }}
>
必须关闭阀门
</Typography>
<Tooltip title="定位所有阀门">
<IconButton
size="small"
onClick={() =>
handleLocateMustCloseValves(result.must_close_valves!)
}
color="error"
sx={{
backgroundColor: "rgba(211, 47, 47, 0.1)",
"&:hover": {
backgroundColor: "rgba(211, 47, 47, 0.2)",
},
}}
>
<LocationIcon sx={{ fontSize: "1.2rem" }} />
</IconButton>
</Tooltip>
</Box>
<Box className="grid grid-cols-3 gap-2">
{result.must_close_valves.map((valveId, idx) => (
<Box
key={idx}
className="bg-gradient-to-r from-red-50 to-white rounded-lg px-3 py-2 border border-red-200 hover:border-red-400 hover:shadow-md transition-all cursor-pointer group"
onClick={() => handleLocateMustCloseValves([valveId])}
sx={{
"&:active": {
transform: "scale(0.98)",
boxShadow: "0 1px 2px rgba(211, 47, 47, 0.2)",
},
}}
>
<Typography
variant="body2"
className="font-semibold text-red-700 group-hover:text-red-900"
>
{valveId}
</Typography>
</Box>
))}
</Box>
</Box>
)}
{/* 可选关闭阀门详细列表 */}
{result.optional_valves && result.optional_valves.length > 0 && (
<Box className="bg-white rounded-lg p-4 border-2 border-orange-200 shadow-sm mb-4">
<Box className="flex items-center justify-between mb-3">
<Typography
variant="body1"
className="text-gray-900 font-bold"
sx={{ fontSize: "0.95rem" }}
>
可选关闭阀门
</Typography>
<Tooltip title="定位所有阀门">
<IconButton
size="small"
onClick={() =>
handleLocateOptionalValves(result.optional_valves!)
}
color="warning"
sx={{
backgroundColor: "rgba(237, 108, 2, 0.1)",
"&:hover": {
backgroundColor: "rgba(237, 108, 2, 0.2)",
},
}}
>
<LocationIcon sx={{ fontSize: "1.2rem" }} />
</IconButton>
</Tooltip>
</Box>
<Box className="grid grid-cols-3 gap-2">
{result.optional_valves.map((valveId, idx) => (
<Box
key={idx}
className="bg-gradient-to-r from-orange-50 to-white rounded-lg px-3 py-2 border border-orange-200 hover:border-orange-400 hover:shadow-md transition-all cursor-pointer group"
onClick={() => handleLocateOptionalValves([valveId])}
sx={{
"&:active": {
transform: "scale(0.98)",
boxShadow: "0 1px 2px rgba(237, 108, 2, 0.2)",
},
}}
>
<Typography
variant="body2"
className="font-semibold text-orange-700 group-hover:text-orange-900"
>
{valveId}
</Typography>
</Box>
) : <Typography variant="caption" color="text.secondary">无</Typography>}
))}
</Box>
</Box>
)}
{/* 受影响节点详细列表 */}
{result.affected_nodes && result.affected_nodes.length > 0 && (
<Box className="bg-white rounded-lg p-4 border-2 border-blue-200 shadow-sm">
<Box className="flex items-center justify-between mb-3">
<Typography
variant="body1"
className="text-gray-900 font-bold"
sx={{ fontSize: "0.95rem" }}
>
受影响节点
</Typography>
<Tooltip title="定位所有节点">
<IconButton
size="small"
onClick={() => handleLocateNodes(result.affected_nodes!)}
color="primary"
sx={{
backgroundColor: "rgba(37, 125, 212, 0.1)",
"&:hover": {
backgroundColor: "rgba(37, 125, 212, 0.2)",
},
}}
>
<LocationIcon sx={{ fontSize: "1.2rem" }} />
</IconButton>
</Tooltip>
</Box>
<Box className="grid grid-cols-3 gap-2">
{result.affected_nodes.map((nodeId, idx) => (
<Box
key={idx}
className="bg-gradient-to-r from-blue-50 to-white rounded-lg px-3 py-2 border border-blue-200 hover:border-blue-400 hover:shadow-md transition-all cursor-pointer group"
onClick={() => handleLocateNodes([nodeId])}
sx={{
"&:active": {
transform: "scale(0.98)",
boxShadow: "0 1px 2px rgba(25, 118, 210, 0.2)",
},
}}
>
<Typography
variant="body2"
className="font-semibold text-blue-700 group-hover:text-blue-900"
>
{nodeId}
</Typography>
</Box>
))}
</Box>
</Box>
)}
</Box>
) : (
<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"
>
<circle
cx="40"
cy="40"
r="25"
stroke="currentColor"
strokeWidth="2"
/>
<path d="M40 25 L40 55" stroke="currentColor" strokeWidth="3" />
<rect
x="30"
y="35"
width="20"
height="10"
fill="currentColor"
rx="2"
/>
<path
d="M25 40 L30 40 M50 40 L55 40"
stroke="currentColor"
strokeWidth="2"
/>
</svg>
</Box>
</Box>
)}
<Typography variant="body2">暂无关阀分析结果</Typography>
<Typography variant="body2" className="mt-1">
请先查看定位结果
</Typography>
</Box>
)}
</Box>
</Box>
);
};

3
src/components/olmap/BurstPipeAnalysis/types.ts
View File

@@ -38,8 +38,7 @@ export interface LocationResult {
}
export interface ValveIsolationResult {
accident_element: string;
accident_type: string;
accident_elements: string[];
affected_nodes: string[];
must_close_valves: string[];
optional_valves: string[];

2
src/components/olmap/ContaminantSimulation/SchemeQuery.tsx
View File

@@ -599,7 +599,7 @@ const SchemeQuery: React.FC<SchemeQueryProps> = ({
fontWeight: 500,
}}
>
定位污染源
定位全部污染源
</Button>
<Button
variant="contained"

32
src/components/olmap/SCADADeviceList.tsx
View File

@@ -124,7 +124,7 @@ const SCADADeviceList: React.FC<SCADADeviceListProps> = ({
const [isSelecting, setIsSelecting] = useState<boolean>(false);
const [internalSelection, setInternalSelection] = useState<string[]>([]);
const [pendingSelection, setPendingSelection] = useState<string[] | null>(
null
null,
);
const [internalDevices, setInternalDevices] = useState<SCADADevice[]>([]);
const [loading, setLoading] = useState<boolean>(true);
@@ -142,7 +142,7 @@ const SCADADeviceList: React.FC<SCADADeviceListProps> = ({
// 清洗对话框状态
const [cleanDialogOpen, setCleanDialogOpen] = useState<boolean>(false);
const [cleanStartTime, setCleanStartTime] = useState<Dayjs>(() =>
dayjs().subtract(1, "week")
dayjs().subtract(1, "week"),
);
const [cleanEndTime, setCleanEndTime] = useState<Dayjs>(() => dayjs());
const [timeRangeError, setTimeRangeError] = useState<string>("");
@@ -199,7 +199,7 @@ const SCADADeviceList: React.FC<SCADADeviceListProps> = ({
status: STATUS_OPTIONS[Math.floor(Math.random() * 4)],
coordinates: (feature.getGeometry() as Point)?.getCoordinates() as [
number,
number
number,
],
properties: feature.getProperties(),
}));
@@ -218,7 +218,7 @@ const SCADADeviceList: React.FC<SCADADeviceListProps> = ({
// 获取设备类型列表
const deviceTypes = useMemo(() => {
const types = Array.from(
new Set(effectiveDevices.map((device) => device.type))
new Set(effectiveDevices.map((device) => device.type)),
);
return types.sort();
}, [effectiveDevices]);
@@ -406,7 +406,7 @@ const SCADADeviceList: React.FC<SCADADeviceListProps> = ({
color: `rgba(255, 255, 0, ${(opacity * 0.3).toFixed(3)})`,
}),
}),
})
}),
);
vectorContext.drawGeometry(flashGeom);
@@ -423,7 +423,7 @@ const SCADADeviceList: React.FC<SCADADeviceListProps> = ({
width: 2,
}),
}),
})
}),
);
vectorContext.drawGeometry(flashGeom);
@@ -436,7 +436,7 @@ const SCADADeviceList: React.FC<SCADADeviceListProps> = ({
color: `rgba(255, 255, 255, ${opacity.toFixed(3)})`,
}),
}),
})
}),
);
vectorContext.drawGeometry(flashGeom);
@@ -519,7 +519,7 @@ const SCADADeviceList: React.FC<SCADADeviceListProps> = ({
// 更新高亮要素
setHighlightFeatures((prev) => {
const existingIndex = prev.findIndex(
(f) => f.getProperties().id === featureId
(f) => f.getProperties().id === featureId,
);
if (existingIndex !== -1) {
// 如果已存在,移除
@@ -530,7 +530,7 @@ const SCADADeviceList: React.FC<SCADADeviceListProps> = ({
}
});
},
[map, effectiveDevices, multiSelect, open]
[map, effectiveDevices, multiSelect, open],
);
// 处理清洗对话框关闭
@@ -561,7 +561,7 @@ const SCADADeviceList: React.FC<SCADADeviceListProps> = ({
setTimeRangeError(error);
}
},
[cleanEndTime, validateTimeRange]
[cleanEndTime, validateTimeRange],
);
// 处理结束时间变化
@@ -574,7 +574,7 @@ const SCADADeviceList: React.FC<SCADADeviceListProps> = ({
setTimeRangeError(error);
}
},
[cleanStartTime, validateTimeRange]
[cleanStartTime, validateTimeRange],
);
// 确认清洗
@@ -608,7 +608,7 @@ const SCADADeviceList: React.FC<SCADADeviceListProps> = ({
open?.({
type: "progress",
message: "正在清洗数据，请稍候...",
undoableTimeout: 3000,
undoableTimeout: 3,
});
try {
@@ -617,7 +617,7 @@ const SCADADeviceList: React.FC<SCADADeviceListProps> = ({
// 调用后端清洗接口
const response = await axios.post(
`${config.BACKEND_URL}/api/v1/composite/clean-scada?device_ids=all&start_time=${startTime}&end_time=${endTime}`
`${config.BACKEND_URL}/api/v1/composite/clean-scada?device_ids=all&start_time=${startTime}&end_time=${endTime}`,
);
// 处理成功响应
@@ -1103,7 +1103,7 @@ const SCADADeviceList: React.FC<SCADADeviceListProps> = ({
variant="caption"
sx={{
color: `${getStatusColor(
device.status.value
device.status.value,
)}.main`,
fontWeight: "bold",
fontSize: 16,
@@ -1134,7 +1134,7 @@ const SCADADeviceList: React.FC<SCADADeviceListProps> = ({
/>
<Chip
label={`可靠度: ${getReliability(
device.reliability
device.reliability,
)}`}
size="small"
variant="outlined"
@@ -1156,7 +1156,7 @@ const SCADADeviceList: React.FC<SCADADeviceListProps> = ({
>
传输频率:{" "}
{getTransmissionFrequency(
device.transmission_frequency
device.transmission_frequency,
)}{" "}
分钟
</Typography>