JIANG
1106 lines
40 KiB
TypeScript
1106 lines
40 KiB
TypeScript
"use client";
|
||
|
||
import React, { useState, useEffect, useCallback } from "react";
|
||
import {
|
||
Box,
|
||
Typography,
|
||
Chip,
|
||
CircularProgress,
|
||
IconButton,
|
||
Tooltip,
|
||
Button,
|
||
Stack,
|
||
Divider,
|
||
Stepper,
|
||
Step,
|
||
StepLabel,
|
||
StepContent,
|
||
Paper,
|
||
Alert,
|
||
} from "@mui/material";
|
||
import {
|
||
LocationOn as LocationIcon,
|
||
Close as CloseIcon,
|
||
CheckCircle as CheckCircleIcon,
|
||
Search as SearchIcon,
|
||
ExpandMore as ExpandMoreIcon,
|
||
CheckBox as CheckBoxIcon,
|
||
CheckBoxOutlineBlank as CheckBoxOutlineBlankIcon,
|
||
} from "@mui/icons-material";
|
||
import { api } from "@/lib/api";
|
||
import { config, NETWORK_NAME } from "@config/config";
|
||
import { ValveIsolationResult } from "./types";
|
||
import { useNotification } from "@refinedev/core";
|
||
import {
|
||
queryFeaturesByIds,
|
||
handleMapClickSelectFeatures,
|
||
} from "@/utils/mapQueryService";
|
||
import { useMap } from "@components/olmap/core/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";
|
||
|
||
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 [selectedPipeId, setSelectedPipeId] = useState<string | null>(null);
|
||
const [highlightFeature, setHighlightFeature] = useState<Feature | null>(null);
|
||
const [isSelecting, setIsSelecting] = useState(false);
|
||
const [activeStep, setActiveStep] = useState(0);
|
||
const [expandedResult, setExpandedResult] = useState(true);
|
||
const [disabledValves, setDisabledValves] = useState<string[]>([]);
|
||
|
||
const { open } = useNotification();
|
||
const map = useMap();
|
||
|
||
const handleMapClick = useCallback(
|
||
async (event: any) => {
|
||
if (!isSelecting || !map) return;
|
||
|
||
const feature = await handleMapClickSelectFeatures(event, map);
|
||
if (feature) {
|
||
const pipeId = feature.get("id");
|
||
if (pipeId) {
|
||
// 确保是管道
|
||
const layerId = feature.getId()?.toString().split(".")[0] || "";
|
||
const isPipe = layerId.includes("pipe") || layerId.includes("Pipe");
|
||
|
||
if (!isPipe) {
|
||
open?.({
|
||
type: "error",
|
||
message: "请选择管道类型要素",
|
||
});
|
||
return;
|
||
}
|
||
|
||
setSelectedPipeId(pipeId);
|
||
setHighlightFeature(feature);
|
||
setIsSelecting(false);
|
||
setResult(null); // 清除旧结果
|
||
}
|
||
}
|
||
},
|
||
[isSelecting, map, open, setResult],
|
||
);
|
||
|
||
useEffect(() => {
|
||
if (!map) return;
|
||
if (isSelecting) {
|
||
map.on("click", handleMapClick);
|
||
} else {
|
||
map.un("click", handleMapClick);
|
||
}
|
||
|
||
return () => {
|
||
map.un("click", handleMapClick);
|
||
};
|
||
}, [map, isSelecting, handleMapClick]);
|
||
|
||
const clearSelectedPipe = () => {
|
||
setSelectedPipeId(null);
|
||
setHighlightFeature(null);
|
||
setHighlightFeatures([]);
|
||
setResult?.(null);
|
||
setActiveStep(0);
|
||
setExpandedResult(false);
|
||
setDisabledValves([]);
|
||
};
|
||
|
||
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 handleLocatePipes = (pipeIds: string[], highlight: boolean = true) => {
|
||
if (pipeIds.length > 0) {
|
||
queryFeaturesByIds(pipeIds, "geo_pipes_mat").then((features) => {
|
||
if (features.length > 0) {
|
||
if (highlight) {
|
||
// 设置高亮类型为管段
|
||
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 });
|
||
}
|
||
}
|
||
});
|
||
}
|
||
};
|
||
|
||
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[], disabled: string[] = []) => {
|
||
if (!ids || ids.length === 0) {
|
||
open?.({ type: "error", message: "请在地图上选择要分析的管段" });
|
||
return;
|
||
}
|
||
setLoading(true);
|
||
const isExpandSearch = disabled.length > 0;
|
||
if (!isExpandSearch) {
|
||
setResult(null);
|
||
setDisabledValves([]);
|
||
}
|
||
try {
|
||
const params: any = {
|
||
network: NETWORK_NAME,
|
||
accident_element: ids,
|
||
};
|
||
if (disabled.length > 0) {
|
||
params.disabled_valves = disabled;
|
||
}
|
||
const response = await api.get(
|
||
`${config.BACKEND_URL}/api/v1/valve_isolation_analysis/`,
|
||
{
|
||
params,
|
||
paramsSerializer: {
|
||
indexes: null, // 生成格式: accident_element=P1&accident_element=P2&disabled_valves=V1&disabled_valves=V2
|
||
},
|
||
},
|
||
);
|
||
setResult(response.data);
|
||
if (!isExpandSearch) {
|
||
setActiveStep(1);
|
||
} else {
|
||
setActiveStep(2);
|
||
}
|
||
open?.({ type: "success", message: isExpandSearch ? "扩大搜索成功" : "分析成功" });
|
||
} catch (error) {
|
||
console.error(error);
|
||
open?.({
|
||
type: "error",
|
||
message: "分析失败",
|
||
description: "无法获取关阀分析结果",
|
||
});
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
},
|
||
[open, setLoading, setResult],
|
||
);
|
||
|
||
// 监听外部传入的分析请求
|
||
useEffect(() => {
|
||
if (shouldFetch && initialPipeIds.length > 0) {
|
||
// 这里简单地取第一个作为 selectedPipeId，实际 fetchAnalysis 支持数组
|
||
setSelectedPipeId(initialPipeIds[0]);
|
||
|
||
// 尝试获取Feature以高亮 (可选)
|
||
queryFeaturesByIds(initialPipeIds, "geo_pipes_mat").then((features) => {
|
||
if (features && features.length > 0) {
|
||
setHighlightFeature(features[0]);
|
||
}
|
||
});
|
||
|
||
fetchAnalysis(initialPipeIds);
|
||
|
||
if (onFetchComplete) {
|
||
onFetchComplete();
|
||
}
|
||
}
|
||
}, [shouldFetch, initialPipeIds, fetchAnalysis, onFetchComplete]);
|
||
|
||
// 初始化高亮图层
|
||
useEffect(() => {
|
||
if (!map) return;
|
||
|
||
// 动态样式函数，根据 highlightType 和 selectedPipeId 返回不同的样式
|
||
const getHighlightStyle = (feature: FeatureLike) => {
|
||
// 如果是当前选择的爆管点feature
|
||
if (highlightFeature && feature === highlightFeature) {
|
||
const styles = [];
|
||
// 线条样式（底层发光，主线条，内层高亮线）
|
||
styles.push(
|
||
new Style({
|
||
stroke: new Stroke({
|
||
color: "rgba(255, 0, 0, 0.3)",
|
||
width: 14,
|
||
}),
|
||
}),
|
||
new Style({
|
||
stroke: new Stroke({
|
||
color: "rgba(255, 0, 0, 1)",
|
||
width: 7,
|
||
lineDash: [15, 10],
|
||
}),
|
||
}),
|
||
new Style({
|
||
stroke: new Stroke({
|
||
color: "rgba(255, 102, 102, 1)",
|
||
width: 4,
|
||
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.25,
|
||
anchor: [0.5, 1],
|
||
}),
|
||
}),
|
||
);
|
||
}
|
||
return styles;
|
||
}
|
||
|
||
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, highlightFeature]);
|
||
|
||
// 高亮要素的函数
|
||
useEffect(() => {
|
||
if (!highlightLayer) {
|
||
return;
|
||
}
|
||
const source = highlightLayer.getSource();
|
||
if (!source) {
|
||
return;
|
||
}
|
||
// 清除之前的高亮
|
||
source.clear();
|
||
|
||
// 如果有选中的爆管点(pipe)，优先添加到source
|
||
if (highlightFeature) {
|
||
// 设置一个特殊的属性来区分
|
||
highlightFeature.set('isHighlightPipe', true);
|
||
source.addFeature(highlightFeature);
|
||
}
|
||
|
||
// 添加其他高亮要素
|
||
highlightFeatures.forEach((feature) => {
|
||
if (feature instanceof Feature) {
|
||
source.addFeature(feature);
|
||
}
|
||
});
|
||
|
||
}, [highlightFeatures, highlightLayer, highlightFeature]);
|
||
|
||
// 切换不可用阀门的选择状态
|
||
const toggleDisabledValve = (valveId: string) => {
|
||
setDisabledValves((prev) => {
|
||
if (prev.includes(valveId)) {
|
||
return prev.filter((id) => id !== valveId);
|
||
} else {
|
||
return [...prev, valveId];
|
||
}
|
||
});
|
||
};
|
||
|
||
// 渲染结果卡片
|
||
const renderResultCard = (isExpanded: boolean = false, allowSelectDisabled: boolean = false) => {
|
||
if (!result) return null;
|
||
|
||
return (
|
||
<Box className="space-y-4">
|
||
{/* 状态信息 */}
|
||
<Paper elevation={0} className="p-4 bg-gradient-to-r from-blue-50 to-purple-50 border border-blue-200">
|
||
<Box className="flex items-center justify-between mb-2">
|
||
<Box className="flex items-center gap-2">
|
||
<Typography variant="subtitle1" className="font-bold text-gray-900">
|
||
{isExpanded ? "扩大搜索结果" : "分析结果"}
|
||
</Typography>
|
||
<Chip
|
||
label={result.isolatable ? "可隔离" : "不可隔离"}
|
||
size="small"
|
||
color={result.isolatable ? "success" : "error"}
|
||
variant="filled"
|
||
sx={{ fontWeight: 700, borderRadius: "6px" }}
|
||
/>
|
||
</Box>
|
||
</Box>
|
||
|
||
{/* 事故管段 */}
|
||
<Box className="bg-white rounded-lg p-3 border border-red-100 mb-3">
|
||
<Box className="flex items-center justify-between mb-2">
|
||
<Typography variant="caption" className="text-red-800 font-bold flex items-center gap-1.5">
|
||
<Box component="span" className="w-1.5 h-1.5 rounded-full bg-red-600 inline-block" />
|
||
目标事故管段
|
||
</Typography>
|
||
{/* {result.accident_elements && result.accident_elements.length > 0 && (
|
||
<Tooltip title="定位全部">
|
||
<IconButton
|
||
size="small"
|
||
onClick={() => handleLocatePipes(result.accident_elements!)}
|
||
sx={{ color: "rgb(220, 38, 38)", padding: "2px" }}
|
||
>
|
||
<LocationIcon fontSize="small" />
|
||
</IconButton>
|
||
</Tooltip>
|
||
)} */}
|
||
</Box>
|
||
<Box className="flex flex-wrap gap-2">
|
||
{result.accident_elements?.map((pipeId, idx) => (
|
||
<Chip
|
||
key={idx}
|
||
label={pipeId}
|
||
size="small"
|
||
onClick={() => handleLocatePipes([pipeId], false)}
|
||
sx={{
|
||
backgroundColor: "rgb(254, 242, 242)",
|
||
border: "1px solid rgb(252, 165, 165)",
|
||
color: "rgb(185, 28, 28)",
|
||
fontWeight: 600,
|
||
"&:hover": {
|
||
backgroundColor: "rgb(254, 226, 226)",
|
||
borderColor: "rgb(239, 68, 68)",
|
||
},
|
||
}}
|
||
/>
|
||
))}
|
||
</Box>
|
||
</Box>
|
||
|
||
{/* 统计概览 */}
|
||
<Box className="grid grid-cols-3 gap-2">
|
||
{[
|
||
{ label: "必关阀门", value: result.must_close_valves?.length || 0, color: "red", bgInfo: "from-red-50 to-red-100", textInfo: "text-red-700" },
|
||
{ label: "可选阀门", value: result.optional_valves?.length || 0, color: "orange", bgInfo: "from-orange-50 to-orange-100", textInfo: "text-orange-700" },
|
||
{ label: "影响节点", value: result.affected_nodes?.length || 0, color: "blue", bgInfo: "from-blue-50 to-blue-100", textInfo: "text-blue-700" },
|
||
].map((item, index) => (
|
||
<Box
|
||
key={index}
|
||
className={`bg-gradient-to-br ${item.bgInfo} rounded-lg p-2 border border-${item.color}-200 text-center`}
|
||
>
|
||
<Typography variant="h6" className={`font-black ${item.textInfo}`}>
|
||
{item.value}
|
||
</Typography>
|
||
<Typography variant="caption" className={`font-semibold opacity-75 ${item.textInfo}`}>
|
||
{item.label}
|
||
</Typography>
|
||
</Box>
|
||
))}
|
||
</Box>
|
||
</Paper>
|
||
|
||
{/* 必关阀门选择提示 - 只在流程2显示 */}
|
||
{allowSelectDisabled && result.must_close_valves && result.must_close_valves.length > 0 && (
|
||
<Alert severity="info" variant="outlined">
|
||
<Typography variant="body2" className="font-semibold mb-1">
|
||
可选择无法关闭的阀门
|
||
</Typography>
|
||
<Typography variant="caption" className="text-gray-600">
|
||
点击下方必关阀门列表中的阀门进行选择，已选择的阀门将在扩大搜索时作为不可用阀门处理
|
||
</Typography>
|
||
</Alert>
|
||
)}
|
||
|
||
{/* 详细列表 - 可折叠 */}
|
||
<Box>
|
||
<Button
|
||
fullWidth
|
||
variant="outlined"
|
||
onClick={() => setExpandedResult(!expandedResult)}
|
||
endIcon={<ExpandMoreIcon sx={{ transform: expandedResult ? 'rotate(180deg)' : 'rotate(0)', transition: 'transform 0.3s' }} />}
|
||
sx={{ mb: 2 }}
|
||
>
|
||
{expandedResult ? "收起详细信息" : "查看详细信息"}
|
||
</Button>
|
||
|
||
{expandedResult && (
|
||
<Box className="flex flex-col gap-3 p-3 bg-gray-50 rounded-lg border border-gray-200">
|
||
{/* 必关阀门 */}
|
||
{result.must_close_valves && result.must_close_valves.length > 0 && (
|
||
<Box>
|
||
<Box className="flex items-center justify-between mb-2">
|
||
<Typography variant="caption" className="text-gray-800 font-bold border-l-4 border-red-500 pl-2">
|
||
必关阀门列表 ({result.must_close_valves.length})
|
||
{allowSelectDisabled && " - 点击勾选不可用阀门"}
|
||
</Typography>
|
||
<Tooltip title="定位全部">
|
||
<IconButton
|
||
size="small"
|
||
onClick={() => handleLocateMustCloseValves(result.must_close_valves!)}
|
||
sx={{
|
||
color: "rgb(211, 47, 47)",
|
||
backgroundColor: "rgba(211, 47, 47, 0.1)",
|
||
"&:hover": {
|
||
backgroundColor: "rgba(211, 47, 47, 0.2)",
|
||
},
|
||
}}
|
||
>
|
||
<LocationIcon fontSize="small" />
|
||
</IconButton>
|
||
</Tooltip>
|
||
</Box>
|
||
<Box className="grid grid-cols-2 gap-2">
|
||
{result.must_close_valves.map((valveId, idx) => {
|
||
const isSelected = disabledValves.includes(valveId);
|
||
return (
|
||
<Box
|
||
key={idx}
|
||
className={`bg-gradient-to-r rounded-lg px-3 py-2 border transition-all cursor-pointer group ${allowSelectDisabled && isSelected
|
||
? "from-orange-50 to-white border-orange-500 hover:shadow-md"
|
||
: "from-red-50 to-white border-red-200 hover:border-red-400 hover:shadow-md"
|
||
}`}
|
||
onClick={() => handleLocateMustCloseValves([valveId])}
|
||
sx={{
|
||
"&:active": {
|
||
transform: "scale(0.98)",
|
||
},
|
||
}}
|
||
>
|
||
<Box className="flex items-center justify-between">
|
||
<Typography
|
||
variant="body2"
|
||
className={`font-semibold ${allowSelectDisabled && isSelected
|
||
? "text-orange-700 group-hover:text-orange-900"
|
||
: "text-red-700 group-hover:text-red-900"
|
||
}`}
|
||
>
|
||
{valveId}
|
||
</Typography>
|
||
{allowSelectDisabled && (
|
||
<Box
|
||
onClick={(e) => {
|
||
e.stopPropagation();
|
||
toggleDisabledValve(valveId);
|
||
}}
|
||
className="cursor-pointer"
|
||
>
|
||
{isSelected ? (
|
||
<CheckBoxIcon fontSize="small" className="text-orange-600" />
|
||
) : (
|
||
<CheckBoxOutlineBlankIcon fontSize="small" className="text-gray-400" />
|
||
)}
|
||
</Box>
|
||
)}
|
||
</Box>
|
||
</Box>
|
||
);
|
||
})}
|
||
</Box>
|
||
</Box>
|
||
)}
|
||
|
||
{/* 可选阀门 */}
|
||
{result.optional_valves && result.optional_valves.length > 0 && (
|
||
<Box>
|
||
<Box className="flex items-center justify-between mb-2">
|
||
<Typography variant="caption" className="text-gray-800 font-bold border-l-4 border-orange-500 pl-2">
|
||
可选阀门列表 ({result.optional_valves.length})
|
||
</Typography>
|
||
<Tooltip title="定位全部">
|
||
<IconButton
|
||
size="small"
|
||
onClick={() => handleLocateOptionalValves(result.optional_valves!)}
|
||
sx={{
|
||
color: "rgb(237, 108, 2)",
|
||
backgroundColor: "rgba(237, 108, 2, 0.1)",
|
||
"&:hover": {
|
||
backgroundColor: "rgba(237, 108, 2, 0.2)",
|
||
},
|
||
}}
|
||
>
|
||
<LocationIcon fontSize="small" />
|
||
</IconButton>
|
||
</Tooltip>
|
||
</Box>
|
||
<Box className="grid grid-cols-2 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)",
|
||
},
|
||
}}
|
||
>
|
||
<Box className="flex items-center justify-between">
|
||
<Typography
|
||
variant="body2"
|
||
className="font-semibold text-orange-700 group-hover:text-orange-900"
|
||
>
|
||
{valveId}
|
||
</Typography>
|
||
</Box>
|
||
</Box>
|
||
))}
|
||
</Box>
|
||
</Box>
|
||
)}
|
||
|
||
{/* 受影响节点 */}
|
||
{result.affected_nodes && result.affected_nodes.length > 0 && (
|
||
<Box>
|
||
<Box className="flex items-center justify-between mb-2">
|
||
<Typography variant="caption" className="text-gray-800 font-bold border-l-4 border-blue-500 pl-2">
|
||
受影响节点 ({result.affected_nodes.length})
|
||
</Typography>
|
||
<Tooltip title="定位全部">
|
||
<IconButton
|
||
size="small"
|
||
onClick={() => handleLocateNodes(result.affected_nodes!)}
|
||
sx={{
|
||
color: "rgb(25, 118, 210)",
|
||
backgroundColor: "rgba(25, 118, 210, 0.1)",
|
||
"&:hover": {
|
||
backgroundColor: "rgba(25, 118, 210, 0.2)",
|
||
},
|
||
}}
|
||
>
|
||
<LocationIcon fontSize="small" />
|
||
</IconButton>
|
||
</Tooltip>
|
||
</Box>
|
||
<Box className="grid grid-cols-2 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)",
|
||
},
|
||
}}
|
||
>
|
||
<Box className="flex items-center justify-between">
|
||
<Typography
|
||
variant="body2"
|
||
className="font-semibold text-blue-700 group-hover:text-blue-900"
|
||
>
|
||
{nodeId}
|
||
</Typography>
|
||
</Box>
|
||
</Box>
|
||
))}
|
||
</Box>
|
||
</Box>
|
||
)}
|
||
</Box>
|
||
)}
|
||
</Box>
|
||
</Box>
|
||
);
|
||
};
|
||
|
||
return (
|
||
<Box className="flex flex-col h-full bg-gray-50">
|
||
{/* 流程区域 */}
|
||
<Box className="flex-1 overflow-auto p-4">
|
||
<Stepper activeStep={activeStep} orientation="vertical">
|
||
{/* 流程1：选择管段并分析 */}
|
||
<Step>
|
||
<StepLabel
|
||
StepIconComponent={() => (
|
||
<Box
|
||
className={`w-8 h-8 rounded-full flex items-center justify-center font-bold ${activeStep >= 0
|
||
? "bg-blue-600 text-white"
|
||
: "bg-gray-300 text-gray-600"
|
||
}`}
|
||
>
|
||
1
|
||
</Box>
|
||
)}
|
||
>
|
||
<Typography variant="subtitle1" className="font-bold">
|
||
选择管段并进行分析
|
||
</Typography>
|
||
</StepLabel>
|
||
<StepContent>
|
||
<Box className="ml-4 pl-4 border-l-2 border-gray-200 space-y-3">
|
||
{/* 选择管段 */}
|
||
<Paper elevation={0} className="p-3 bg-white border border-gray-200">
|
||
<Box className="flex items-center justify-between mb-2">
|
||
<Typography variant="subtitle2" className="font-medium text-gray-700">
|
||
选择爆管管段
|
||
</Typography>
|
||
{!isSelecting ? (
|
||
<Button
|
||
variant="outlined"
|
||
size="small"
|
||
onClick={() => setIsSelecting(true)}
|
||
className="border-blue-500 text-blue-600 hover:bg-blue-50"
|
||
startIcon={
|
||
<svg
|
||
className="w-4 h-4"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
viewBox="0 0 24 24"
|
||
>
|
||
<path
|
||
strokeLinecap="round"
|
||
strokeLinejoin="round"
|
||
strokeWidth={2}
|
||
d="M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5M7.188 2.239l.777 2.897M5.136 7.965l-2.898-.777M13.95 4.05l-2.122 2.122m-5.657 5.656l-2.12 2.122"
|
||
/>
|
||
</svg>
|
||
}
|
||
>
|
||
开始选择
|
||
</Button>
|
||
) : (
|
||
<Button
|
||
variant="contained"
|
||
size="small"
|
||
onClick={() => setIsSelecting(false)}
|
||
className="bg-red-500 hover:bg-red-600"
|
||
startIcon={<CloseIcon />}
|
||
>
|
||
结束选择
|
||
</Button>
|
||
)}
|
||
</Box>
|
||
|
||
{isSelecting && (
|
||
<Box className="mb-2 p-2 bg-blue-50 border border-blue-200 rounded text-xs text-blue-700">
|
||
💡 点击地图上的管道添加爆管点
|
||
</Box>
|
||
)}
|
||
|
||
{selectedPipeId ? (
|
||
<Box className="flex items-center gap-2 p-2 bg-green-50 rounded border border-green-200">
|
||
<CheckCircleIcon className="text-green-600" fontSize="small" />
|
||
<Typography className="flex-1 text-sm font-medium pl-1 text-gray-700">
|
||
{selectedPipeId}
|
||
</Typography>
|
||
<Typography className="text-xs text-gray-500">
|
||
已选择
|
||
</Typography>
|
||
<IconButton
|
||
size="small"
|
||
onClick={clearSelectedPipe}
|
||
>
|
||
<CloseIcon fontSize="small" />
|
||
</IconButton>
|
||
</Box>
|
||
) : (
|
||
<Box className="p-3 rounded border border-dashed border-gray-300 text-sm text-gray-400 text-center">
|
||
暂未选择管段
|
||
</Box>
|
||
)}
|
||
</Paper>
|
||
|
||
{/* 操作按钮 */}
|
||
<Box className="flex gap-2 pt-2">
|
||
<Button
|
||
variant="contained"
|
||
size="medium"
|
||
color="primary"
|
||
disabled={loading || !selectedPipeId}
|
||
onClick={() => selectedPipeId && fetchAnalysis([selectedPipeId], [])}
|
||
className="flex-1"
|
||
startIcon={loading ? <CircularProgress size={16} /> : <SearchIcon />}
|
||
>
|
||
{loading ? "正在分析..." : "开始分析"}
|
||
</Button>
|
||
</Box>
|
||
</Box>
|
||
</StepContent>
|
||
</Step>
|
||
|
||
{/* 流程2：查看分析结果 */}
|
||
<Step>
|
||
<StepLabel
|
||
StepIconComponent={() => (
|
||
<Box
|
||
className={`w-8 h-8 rounded-full flex items-center justify-center font-bold ${activeStep >= 1
|
||
? "bg-blue-600 text-white"
|
||
: "bg-gray-300 text-gray-600"
|
||
}`}
|
||
>
|
||
2
|
||
</Box>
|
||
)}
|
||
>
|
||
<Typography variant="subtitle1" className="font-bold">
|
||
查看分析结果
|
||
</Typography>
|
||
</StepLabel>
|
||
<StepContent>
|
||
<Box className="ml-4 pl-4 border-l-2 border-gray-200 space-y-3">
|
||
{loading ? (
|
||
<Box className="flex flex-col items-center justify-center py-8 text-gray-500">
|
||
<CircularProgress size={40} className="mb-4 text-blue-600" />
|
||
<Typography variant="body2" className="text-gray-600 font-medium">
|
||
分析计算中，请稍候...
|
||
</Typography>
|
||
</Box>
|
||
) : result ? (
|
||
<>
|
||
{renderResultCard(false, true)}
|
||
|
||
{/* 操作按钮 */}
|
||
<Box className="flex gap-2 pt-2">
|
||
<Button
|
||
variant="outlined"
|
||
size="medium"
|
||
onClick={() => {
|
||
clearSelectedPipe();
|
||
}}
|
||
className="flex-1"
|
||
>
|
||
重新选择管段
|
||
</Button>
|
||
<Button
|
||
variant="contained"
|
||
size="medium"
|
||
color="warning"
|
||
disabled={loading || disabledValves.length === 0}
|
||
onClick={() => selectedPipeId && fetchAnalysis([selectedPipeId], disabledValves)}
|
||
className="flex-1"
|
||
startIcon={loading ? <CircularProgress size={16} /> : <SearchIcon />}
|
||
>
|
||
扩大搜索 {disabledValves.length > 0 && `(${disabledValves.length})`}
|
||
</Button>
|
||
</Box>
|
||
</>
|
||
) : (
|
||
<Alert severity="info" variant="outlined">
|
||
请先完成流程1的分析操作
|
||
</Alert>
|
||
)}
|
||
</Box>
|
||
</StepContent>
|
||
</Step>
|
||
|
||
{/* 流程3：扩大搜索结果 */}
|
||
<Step>
|
||
<StepLabel
|
||
StepIconComponent={() => (
|
||
<Box
|
||
className={`w-8 h-8 rounded-full flex items-center justify-center font-bold ${activeStep >= 2
|
||
? "bg-blue-600 text-white"
|
||
: "bg-gray-300 text-gray-600"
|
||
}`}
|
||
>
|
||
3
|
||
</Box>
|
||
)}
|
||
>
|
||
<Typography variant="subtitle1" className="font-bold">
|
||
扩大搜索结果（可选）
|
||
</Typography>
|
||
</StepLabel>
|
||
<StepContent>
|
||
<Box className="ml-4 pl-4 border-l-2 border-gray-200 space-y-3">
|
||
{loading ? (
|
||
<Box className="flex flex-col items-center justify-center py-8 text-gray-500">
|
||
<CircularProgress size={40} className="mb-4 text-orange-600" />
|
||
<Typography variant="body2" className="text-gray-600 font-medium">
|
||
扩大搜索中，请稍候...
|
||
</Typography>
|
||
</Box>
|
||
) : activeStep >= 2 && result ? (
|
||
<>
|
||
{renderResultCard(true, false)}
|
||
|
||
{/* 最终结果提示 */}
|
||
{result.isolatable ? (
|
||
<Alert severity="success" variant="outlined">
|
||
<Typography variant="body2" className="font-semibold mb-1">
|
||
✓ 扩大搜索成功，找到可行的隔离方案
|
||
</Typography>
|
||
<Typography variant="caption" className="text-gray-600">
|
||
已标记 {disabledValves.length} 个阀门为不可用状态，可以按照上述新的阀门配置进行隔离操作
|
||
</Typography>
|
||
</Alert>
|
||
) : (
|
||
<Alert severity="error" variant="outlined">
|
||
<Typography variant="body2" className="font-semibold mb-1">
|
||
✗ 扩大搜索后仍无法完全隔离
|
||
</Typography>
|
||
<Typography variant="caption" className="text-gray-600">
|
||
即使排除了 {disabledValves.length} 个不可用阀门，仍无法找到有效隔离方案。建议检查管网拓扑结构或阀门配置
|
||
</Typography>
|
||
</Alert>
|
||
)}
|
||
|
||
{/* 操作按钮 */}
|
||
<Box className="flex gap-2 pt-2">
|
||
<Button
|
||
variant="outlined"
|
||
size="medium"
|
||
onClick={() => {
|
||
setActiveStep(1);
|
||
setDisabledValves([]);
|
||
}}
|
||
className="flex-1"
|
||
>
|
||
返回上一步
|
||
</Button>
|
||
<Button
|
||
variant="contained"
|
||
size="medium"
|
||
onClick={() => {
|
||
clearSelectedPipe();
|
||
}}
|
||
className="flex-1"
|
||
>
|
||
重新开始
|
||
</Button>
|
||
</Box>
|
||
</>
|
||
) : (
|
||
<Alert severity="info" variant="outlined">
|
||
请先在流程2中选择不可用阀门，然后点击“扩大搜索”按钮
|
||
</Alert>
|
||
)}
|
||
</Box>
|
||
</StepContent>
|
||
</Step>
|
||
</Stepper>
|
||
</Box>
|
||
</Box>
|
||
);
|
||
};
|
||
|
||
export default ValveIsolation;
|