完善关阀分析页面设计
This commit is contained in:
JIANG
@@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user