734 lines
26 KiB
TypeScript
734 lines
26 KiB
TypeScript
"use client";
|
|
|
|
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";
|
|
|
|
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 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 });
|
|
}
|
|
}
|
|
});
|
|
}
|
|
};
|
|
|
|
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">
|
|
{/* Results Section */}
|
|
<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 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>
|
|
|
|
{/* 必须关闭阀门详细列表 */}
|
|
{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>
|
|
))}
|
|
</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>
|
|
<Typography variant="body2">暂无关阀分析结果</Typography>
|
|
<Typography variant="body2" className="mt-1">
|
|
请先查看定位结果
|
|
</Typography>
|
|
</Box>
|
|
)}
|
|
</Box>
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
export default ValveIsolation;
|