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

更新地图样式；调整时间轴，新增前进/后退一天按钮；新增爆管分析页面

Browse Source
This commit is contained in:
JIANG
2025-10-22 11:50:20 +08:00
parent 69b2e4fb98
commit 720f8a5dc2
12 changed files with 1557 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

371
src/components/olmap/BurstPipeAnalysis/AnalysisParameters.tsx Normal file
View File

@@ -0,0 +1,371 @@
"use client";
import React, { useState, useRef, useEffect } from "react";
import {
Box,
TextField,
Button,
Typography,
IconButton,
Stack,
} from "@mui/material";
import { Close as CloseIcon } from "@mui/icons-material";
import { DateTimePicker } from "@mui/x-date-pickers/DateTimePicker";
import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
import dayjs, { Dayjs } from "dayjs";
import "dayjs/locale/zh-cn";
import { useMap } from "@app/OlMap/MapComponent";
import VectorLayer from "ol/layer/Vector";
import VectorSource from "ol/source/Vector";
import Style from "ol/style/Style";
import Stroke from "ol/style/Stroke";
import GeoJson from "ol/format/GeoJSON";
import config from "@config/config";
import type { Feature } from "ol";
import type { Geometry } from "ol/geom";
const mapUrl = config.mapUrl;
interface PipePoint {
id: string;
diameter: number;
area: number;
feature?: any; // 存储管道要素用于高亮
}
interface AnalysisParametersProps {
onAnalyze?: (params: AnalysisParams) => void;
}
interface AnalysisParams {
pipePoints: PipePoint[];
startTime: Dayjs | null;
duration: number;
schemeName: string;
}
const AnalysisParameters: React.FC<AnalysisParametersProps> = ({
onAnalyze,
}) => {
const map = useMap();
const [pipePoints, setPipePoints] = useState<PipePoint[]>([
{ id: "541022", diameter: 110, area: 15 },
{ id: "532748", diameter: 110, area: 15 },
]);
const [startTime, setStartTime] = useState<Dayjs | null>(
dayjs("2025-10-21T00:00:00")
);
const [duration, setDuration] = useState<number>(3000);
const [schemeName, setSchemeName] = useState<string>("Fangan1021100506");
const [isSelecting, setIsSelecting] = useState<boolean>(false);
const highlightLayerRef = useRef<VectorLayer<VectorSource> | null>(null);
const clickListenerRef = useRef<((evt: any) => void) | null>(null);
// 初始化管道图层和高亮图层
useEffect(() => {
if (!map) return;
// 创建高亮图层
const highlightLayer = new VectorLayer({
source: new VectorSource(),
style: new Style({
stroke: new Stroke({
color: "#ff0000",
width: 5,
}),
}),
properties: {
name: "高亮管道",
value: "highlight_pipeline",
},
zIndex: 999,
});
map.addLayer(highlightLayer);
highlightLayerRef.current = highlightLayer;
return () => {
map.removeLayer(highlightLayer);
if (clickListenerRef.current) {
map.un("click", clickListenerRef.current);
}
};
}, [map]);
// 开始选择管道
const handleStartSelection = () => {
if (!map) return;
setIsSelecting(true);
// 显示管道图层
// 注册点击事件
const clickListener = (evt: any) => {
let clickedFeature: any = null;
map.forEachFeatureAtPixel(
evt.pixel,
(feature) => {
if (!clickedFeature) {
clickedFeature = feature;
}
return true;
},
{ hitTolerance: 5 }
);
if (clickedFeature) {
const properties = clickedFeature.getProperties();
const pipeId = properties.Id || properties.id || properties.ID;
const diameter = properties.Diameter || properties.diameter || 100;
// 检查是否已存在
const exists = pipePoints.some((pipe) => pipe.id === pipeId);
if (!exists && pipeId) {
const newPipe: PipePoint = {
id: String(pipeId),
diameter: Number(diameter),
area: 15,
feature: clickedFeature,
};
setPipePoints((prev) => [...prev, newPipe]);
// 添加到高亮图层
const highlightSource = highlightLayerRef.current?.getSource();
if (highlightSource) {
highlightSource.addFeature(clickedFeature);
}
}
}
};
clickListenerRef.current = clickListener;
map.on("click", clickListener);
};
// 结束选择管道
const handleEndSelection = () => {
if (!map) return;
setIsSelecting(false);
// 移除点击事件
if (clickListenerRef.current) {
map.un("click", clickListenerRef.current);
clickListenerRef.current = null;
}
};
const handleRemovePipe = (id: string) => {
// 找到要删除的管道
const pipeToRemove = pipePoints.find((pipe) => pipe.id === id);
// 从高亮图层中移除对应的要素
if (pipeToRemove && pipeToRemove.feature && highlightLayerRef.current) {
const highlightSource = highlightLayerRef.current.getSource();
if (highlightSource) {
highlightSource.removeFeature(pipeToRemove.feature);
}
}
// 从状态中移除
setPipePoints((prev) => prev.filter((pipe) => pipe.id !== id));
};
const handleAreaChange = (id: string, value: string) => {
const numValue = parseFloat(value) || 0;
setPipePoints((prev) =>
prev.map((pipe) => (pipe.id === id ? { ...pipe, area: numValue } : pipe))
);
};
const handleAnalyze = () => {
if (onAnalyze) {
onAnalyze({
pipePoints,
startTime,
duration,
schemeName,
});
}
};
return (
<Box className="flex flex-col h-full">
{/* 选择爆管点 */}
<Box className="mb-4">
<Box className="flex items-center justify-between mb-2">
<Typography variant="subtitle2" className="font-medium">
选择爆管点
</Typography>
{/* 开始/结束选择按钮 */}
{!isSelecting ? (
<Button
variant="outlined"
size="small"
onClick={handleStartSelection}
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={handleEndSelection}
className="bg-red-500 hover:bg-red-600"
startIcon={
<svg
className="w-4 h-4"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M6 18L18 6M6 6l12 12"
/>
</svg>
}
>
结束选择
</Button>
)}
</Box>
{isSelecting && (
<Box className="mb-2 p-2 bg-blue-50 border border-blue-200 rounded text-xs text-blue-700">
💡 点击地图上的管道添加爆管点
</Box>
)}
<Stack spacing={2}>
{pipePoints.map((pipe) => (
<Box
key={pipe.id}
className="flex items-center gap-2 p-2 bg-gray-50 rounded"
>
<Typography className="flex-shrink-0 text-sm">
{pipe.id}
</Typography>
<Typography className="flex-shrink-0 text-sm text-gray-600">
管径: {pipe.diameter} mm
</Typography>
<Typography className="flex-shrink-0 text-sm text-gray-600 mr-2">
爆管点面积
</Typography>
<TextField
size="small"
value={pipe.area}
onChange={(e) => handleAreaChange(pipe.id, e.target.value)}
type="number"
className="w-25"
slotProps={{
input: {
endAdornment: (
<span className="text-xs text-gray-500">cm²</span>
),
},
}}
/>
<IconButton
size="small"
onClick={() => handleRemovePipe(pipe.id)}
className="ml-auto"
>
<CloseIcon fontSize="small" />
</IconButton>
</Box>
))}
</Stack>
</Box>
{/* 选择开始时间 */}
<Box className="mb-4">
<Typography variant="subtitle2" className="mb-2 font-medium">
选择开始时间
</Typography>
<LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale="zh-cn">
<DateTimePicker
value={startTime}
onChange={(value) =>
value && dayjs.isDayjs(value) && setStartTime(value)
}
format="YYYY-MM-DD HH:mm"
slotProps={{
textField: {
size: "small",
fullWidth: true,
},
}}
/>
</LocalizationProvider>
</Box>
{/* 持续时长 */}
<Box className="mb-4">
<Typography variant="subtitle2" className="mb-2 font-medium">
持续时长 (秒)
</Typography>
<TextField
fullWidth
size="small"
type="number"
value={duration}
onChange={(e) => setDuration(parseInt(e.target.value) || 0)}
placeholder="输入持续时长"
/>
</Box>
{/* 方案名称 */}
<Box className="mb-6">
<Typography variant="subtitle2" className="mb-2 font-medium">
方案名称
</Typography>
<TextField
fullWidth
size="small"
value={schemeName}
onChange={(e) => setSchemeName(e.target.value)}
placeholder="输入方案名称"
/>
</Box>
{/* 方案分析按钮 */}
<Box className="mt-auto">
<Button
fullWidth
variant="contained"
size="large"
onClick={handleAnalyze}
className="bg-blue-600 hover:bg-blue-700"
>
方案分析
</Button>
</Box>
</Box>
);
};
export default AnalysisParameters;

205
src/components/olmap/BurstPipeAnalysis/LocationResults.tsx Normal file
View File

@@ -0,0 +1,205 @@
'use client';
import React, { useState } from 'react';
import {
Box,
Typography,
Table,
TableBody,
TableCell,
TableContainer,
TableHead,
TableRow,
Paper,
Chip,
IconButton,
Tooltip,
} from '@mui/material';
import { LocationOn as LocationIcon, Visibility as VisibilityIcon } from '@mui/icons-material';
interface LocationResult {
id: number;
nodeName: string;
nodeId: string;
pressure: number;
waterLevel: number;
flow: number;
status: 'normal' | 'warning' | 'danger';
coordinates: [number, number];
}
interface LocationResultsProps {
onLocate?: (coordinates: [number, number]) => void;
onViewDetail?: (id: number) => void;
}
const LocationResults: React.FC<LocationResultsProps> = ({ onLocate, onViewDetail }) => {
const [results, setResults] = useState<LocationResult[]>([
// 示例数据
// {
// id: 1,
// nodeName: '节点A',
// nodeId: 'N001',
// pressure: 0.35,
// waterLevel: 12.5,
// flow: 85.3,
// status: 'normal',
// coordinates: [120.15, 30.25],
// },
]);
const getStatusColor = (status: string) => {
switch (status) {
case 'normal':
return 'success';
case 'warning':
return 'warning';
case 'danger':
return 'error';
default:
return 'default';
}
};
const getStatusText = (status: string) => {
switch (status) {
case 'normal':
return '正常';
case 'warning':
return '预警';
case 'danger':
return '危险';
default:
return '未知';
}
};
return (
<Box className="flex flex-col h-full">
{/* 统计信息 */}
<Box className="mb-4 p-4 bg-gray-50 rounded">
<Typography variant="subtitle2" className="mb-2 font-medium">
定位结果统计
</Typography>
<Box className="flex gap-4">
<Box>
<Typography variant="caption" className="text-gray-600">
总数
</Typography>
<Typography variant="h6" className="font-bold">
{results.length}
</Typography>
</Box>
<Box>
<Typography variant="caption" className="text-gray-600">
正常
</Typography>
<Typography variant="h6" className="font-bold text-green-600">
{results.filter((r) => r.status === 'normal').length}
</Typography>
</Box>
<Box>
<Typography variant="caption" className="text-gray-600">
预警
</Typography>
<Typography variant="h6" className="font-bold text-orange-600">
{results.filter((r) => r.status === 'warning').length}
</Typography>
</Box>
<Box>
<Typography variant="caption" className="text-gray-600">
危险
</Typography>
<Typography variant="h6" className="font-bold text-red-600">
{results.filter((r) => r.status === 'danger').length}
</Typography>
</Box>
</Box>
</Box>
{/* 结果列表 */}
<Box className="flex-1 overflow-auto">
{results.length === 0 ? (
<Box className="flex flex-col items-center justify-center h-full text-gray-400">
<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" />
<circle cx="40" cy="40" r="5" fill="currentColor" />
<line x1="40" y1="15" x2="40" y2="25" stroke="currentColor" strokeWidth="2" />
<line x1="40" y1="55" x2="40" y2="65" stroke="currentColor" strokeWidth="2" />
<line x1="15" y1="40" x2="25" y2="40" stroke="currentColor" strokeWidth="2" />
<line x1="55" y1="40" x2="65" y2="40" stroke="currentColor" strokeWidth="2" />
</svg>
</Box>
<Typography variant="body2">暂无定位结果</Typography>
<Typography variant="body2" className="mt-1">
请先执行方案分析
</Typography>
</Box>
) : (
<TableContainer component={Paper} className="shadow-none">
<Table size="small" stickyHeader>
<TableHead>
<TableRow className="bg-gray-50">
<TableCell>节点名称</TableCell>
<TableCell>节点ID</TableCell>
<TableCell align="right">压力 (MPa)</TableCell>
<TableCell align="right">水位 (m)</TableCell>
<TableCell align="right">流量 (m³/h)</TableCell>
<TableCell align="center">状态</TableCell>
<TableCell align="center">操作</TableCell>
</TableRow>
</TableHead>
<TableBody>
{results.map((result) => (
<TableRow key={result.id} hover>
<TableCell>{result.nodeName}</TableCell>
<TableCell>{result.nodeId}</TableCell>
<TableCell align="right">{result.pressure.toFixed(2)}</TableCell>
<TableCell align="right">{result.waterLevel.toFixed(2)}</TableCell>
<TableCell align="right">{result.flow.toFixed(1)}</TableCell>
<TableCell align="center">
<Chip
label={getStatusText(result.status)}
size="small"
color={getStatusColor(result.status) as any}
/>
</TableCell>
<TableCell align="center">
<Tooltip title="定位">
<IconButton
size="small"
onClick={() => onLocate?.(result.coordinates)}
color="primary"
>
<LocationIcon fontSize="small" />
</IconButton>
</Tooltip>
<Tooltip title="查看详情">
<IconButton
size="small"
onClick={() => onViewDetail?.(result.id)}
color="primary"
>
<VisibilityIcon fontSize="small" />
</IconButton>
</Tooltip>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
)}
</Box>
</Box>
);
};
export default LocationResults;

190
src/components/olmap/BurstPipeAnalysis/SchemeQuery.tsx Normal file
View File

@@ -0,0 +1,190 @@
"use client";
import React, { useState } from "react";
import {
Box,
Button,
Typography,
Checkbox,
FormControlLabel,
Table,
TableBody,
TableCell,
TableContainer,
TableHead,
TableRow,
Paper,
IconButton,
} from "@mui/material";
import {
Info as InfoIcon,
LocationOn as LocationIcon,
} from "@mui/icons-material";
import { DatePicker } from "@mui/x-date-pickers/DatePicker";
import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
import dayjs, { Dayjs } from "dayjs";
import "dayjs/locale/zh-cn";
interface SchemeRecord {
id: number;
schemeName: string;
type: string;
user: string;
createTime: string;
startTime: string;
}
interface SchemeQueryProps {
onViewDetails?: (id: number) => void;
onLocate?: (id: number) => void;
}
const SchemeQuery: React.FC<SchemeQueryProps> = ({
onViewDetails,
onLocate,
}) => {
const [queryAll, setQueryAll] = useState<boolean>(true);
const [queryDate, setQueryDate] = useState<Dayjs | null>(dayjs("2025-10-21"));
const [schemes, setSchemes] = useState<SchemeRecord[]>([]);
const handleQuery = () => {
// TODO: 实际查询逻辑
console.log("查询方案", { queryAll, queryDate });
// 这里应该调用API获取数据
};
return (
<Box className="flex flex-col h-full">
{/* 查询条件 */}
<Box className="mb-4 p-4 bg-gray-50 rounded">
<Box className="flex items-center gap-4 mb-3">
<FormControlLabel
control={
<Checkbox
checked={queryAll}
onChange={(e) => setQueryAll(e.target.checked)}
/>
}
label="查询全部"
/>
<LocalizationProvider
dateAdapter={AdapterDayjs}
adapterLocale="zh-cn"
>
<DatePicker
value={queryDate}
onChange={(value) =>
value && dayjs.isDayjs(value) && setQueryDate(value)
}
format="YYYY-MM-DD"
disabled={queryAll}
slotProps={{
textField: {
size: "small",
className: "flex-1",
},
}}
/>
</LocalizationProvider>
</Box>
<Button
fullWidth
variant="contained"
onClick={handleQuery}
className="bg-blue-600 hover:bg-blue-700"
>
查询
</Button>
</Box>
{/* 结果列表 */}
<Box className="flex-1 overflow-auto">
{schemes.length === 0 ? (
<Box className="flex flex-col items-center justify-center h-full text-gray-400">
<Box className="mb-4">
<svg
width="80"
height="80"
viewBox="0 0 80 80"
fill="none"
className="opacity-40"
>
<rect
x="10"
y="20"
width="60"
height="45"
rx="2"
stroke="currentColor"
strokeWidth="2"
/>
<line
x1="10"
y1="30"
x2="70"
y2="30"
stroke="currentColor"
strokeWidth="2"
/>
</svg>
</Box>
<Typography variant="body2">总共 0 条</Typography>
<Typography variant="body2" className="mt-1">
No data
</Typography>
</Box>
) : (
<TableContainer component={Paper} className="shadow-none">
<Table size="small">
<TableHead>
<TableRow className="bg-gray-50">
<TableCell>ID</TableCell>
<TableCell>方案名称</TableCell>
<TableCell>类型</TableCell>
<TableCell>用户</TableCell>
<TableCell>创建时间</TableCell>
<TableCell>开始时间</TableCell>
<TableCell align="center">详情</TableCell>
<TableCell align="center">定位</TableCell>
</TableRow>
</TableHead>
<TableBody>
{schemes.map((scheme) => (
<TableRow key={scheme.id} hover>
<TableCell>{scheme.id}</TableCell>
<TableCell>{scheme.schemeName}</TableCell>
<TableCell>{scheme.type}</TableCell>
<TableCell>{scheme.user}</TableCell>
<TableCell>{scheme.createTime}</TableCell>
<TableCell>{scheme.startTime}</TableCell>
<TableCell align="center">
<IconButton
size="small"
onClick={() => onViewDetails?.(scheme.id)}
color="primary"
>
<InfoIcon fontSize="small" />
</IconButton>
</TableCell>
<TableCell align="center">
<IconButton
size="small"
onClick={() => onLocate?.(scheme.id)}
color="primary"
>
<LocationIcon fontSize="small" />
</IconButton>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
)}
</Box>
</Box>
);
};
export default SchemeQuery;

217
src/components/olmap/BurstPipeAnalysisPanel.tsx Normal file
View File

@@ -0,0 +1,217 @@
"use client";
import React, { useState } from "react";
import { Box, Drawer, Tabs, Tab, Typography, IconButton } from "@mui/material";
import {
ChevronRight as ChevronRightIcon,
ChevronLeft as ChevronLeftIcon,
Analytics as AnalyticsIcon,
Search as SearchIcon,
MyLocation as MyLocationIcon,
} from "@mui/icons-material";
import AnalysisParameters from "./BurstPipeAnalysis/AnalysisParameters";
import SchemeQuery from "./BurstPipeAnalysis/SchemeQuery";
import LocationResults from "./BurstPipeAnalysis/LocationResults";
interface TabPanelProps {
children?: React.ReactNode;
index: number;
value: number;
}
const TabPanel: React.FC<TabPanelProps> = ({ children, value, index }) => {
return (
<div
role="tabpanel"
hidden={value !== index}
className="flex-1 overflow-hidden flex flex-col"
>
{value === index && (
<Box className="flex-1 overflow-auto p-4">{children}</Box>
)}
</div>
);
};
interface BurstPipeAnalysisPanelProps {
open?: boolean;
onToggle?: () => void;
}
const BurstPipeAnalysisPanel: React.FC<BurstPipeAnalysisPanelProps> = ({
open: controlledOpen,
onToggle,
}) => {
const [internalOpen, setInternalOpen] = useState(true);
const [currentTab, setCurrentTab] = useState(0);
// 使用受控或非受控状态
const isOpen = controlledOpen !== undefined ? controlledOpen : internalOpen;
const handleToggle = () => {
if (onToggle) {
onToggle();
} else {
setInternalOpen(!internalOpen);
}
};
const handleTabChange = (_event: React.SyntheticEvent, newValue: number) => {
setCurrentTab(newValue);
};
const drawerWidth = 520;
return (
<>
{/* 收起时的触发按钮 */}
{!isOpen && (
<Box
className="absolute top-4 right-4 z-[1300] bg-white shadow-2xl rounded-lg cursor-pointer hover:shadow-xl transition-all duration-300 opacity-95 hover:opacity-100"
onClick={handleToggle}
>
<Box className="flex flex-col items-center py-3 px-3 gap-1">
<AnalyticsIcon className="text-[#257DD4] w-5 h-5" />
<Typography
variant="caption"
className="text-gray-700 font-semibold my-1 text-xs"
style={{ writingMode: "vertical-rl" }}
>
爆管分析
</Typography>
<ChevronLeftIcon className="text-gray-600 w-4 h-4" />
</Box>
</Box>
)}
{/* 主面板 */}
<Drawer
anchor="right"
open={isOpen}
variant="persistent"
hideBackdrop
sx={{
width: isOpen ? drawerWidth : 0,
flexShrink: 0,
"& .MuiDrawer-paper": {
width: drawerWidth,
boxSizing: "border-box",
position: "absolute",
top: 16,
right: 16,
height: "calc(100vh - 32px)",
maxHeight: "850px",
borderRadius: "12px",
boxShadow:
"0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
backdropFilter: "blur(8px)",
opacity: 0.95,
transition: "all 0.3s ease-in-out",
border: "none",
"&:hover": {
opacity: 1,
},
},
}}
>
<Box className="flex flex-col h-full bg-white rounded-xl overflow-hidden">
{/* 头部 */}
<Box className="flex items-center justify-between px-5 py-4 bg-[#257DD4] text-white">
<Box className="flex items-center gap-2">
<AnalyticsIcon className="w-5 h-5" />
<Typography variant="h6" className="text-lg font-semibold">
爆管分析
</Typography>
</Box>
<IconButton
onClick={handleToggle}
size="small"
className="text-white hover:bg-white hover:bg-opacity-20 rounded-full p-1 transition-all duration-200"
aria-label="关闭"
>
<ChevronRightIcon className="w-5 h-5" />
</IconButton>
</Box>
{/* Tabs 导航 */}
<Box className="border-b border-gray-200 bg-white">
<Tabs
value={currentTab}
onChange={handleTabChange}
variant="fullWidth"
sx={{
minHeight: 48,
"& .MuiTab-root": {
minHeight: 48,
textTransform: "none",
fontSize: "0.875rem",
fontWeight: 500,
transition: "all 0.2s",
},
"& .Mui-selected": {
color: "#257DD4",
},
"& .MuiTabs-indicator": {
backgroundColor: "#257DD4",
},
}}
>
<Tab
icon={<AnalyticsIcon fontSize="small" />}
iconPosition="start"
label="分析要件"
/>
<Tab
icon={<SearchIcon fontSize="small" />}
iconPosition="start"
label="方案查询"
/>
<Tab
icon={<MyLocationIcon fontSize="small" />}
iconPosition="start"
label="定位结果"
/>
</Tabs>
</Box>
{/* Tab 内容 */}
<TabPanel value={currentTab} index={0}>
<AnalysisParameters
onAnalyze={(params) => {
console.log("开始分析:", params);
// TODO: 调用分析API
}}
/>
</TabPanel>
<TabPanel value={currentTab} index={1}>
<SchemeQuery
onViewDetails={(id) => {
console.log("查看详情:", id);
// TODO: 显示方案详情
}}
onLocate={(id) => {
console.log("定位方案:", id);
// TODO: 在地图上定位
}}
/>
</TabPanel>
<TabPanel value={currentTab} index={2}>
<LocationResults
onLocate={(coordinates) => {
console.log("定位到:", coordinates);
// TODO: 地图定位到指定坐标
}}
onViewDetail={(id) => {
console.log("查看节点详情:", id);
// TODO: 显示节点详细信息
}}
/>
</TabPanel>
</Box>
</Drawer>
</>
);
};
export default BurstPipeAnalysisPanel;