更新地图组件结构
This commit is contained in:
JIANG
@@ -0,0 +1,242 @@
|
||||
"use client";
|
||||
|
||||
import React, { useState } from "react";
|
||||
import {
|
||||
Box,
|
||||
Drawer,
|
||||
Tabs,
|
||||
Tab,
|
||||
Typography,
|
||||
IconButton,
|
||||
Tooltip,
|
||||
} from "@mui/material";
|
||||
import {
|
||||
ChevronRight,
|
||||
ChevronLeft,
|
||||
Analytics as AnalyticsIcon,
|
||||
Search as SearchIcon,
|
||||
MyLocation as MyLocationIcon,
|
||||
} from "@mui/icons-material";
|
||||
import AnalysisParameters from "./AnalysisParameters";
|
||||
import SchemeQuery from "./SchemeQuery";
|
||||
import LocationResults from "./LocationResults";
|
||||
interface SchemeDetail {
|
||||
burst_ID: string[];
|
||||
burst_size: number[];
|
||||
modify_total_duration: number;
|
||||
modify_fixed_pump_pattern: any;
|
||||
modify_valve_opening: any;
|
||||
modify_variable_pump_pattern: any;
|
||||
}
|
||||
|
||||
interface SchemeRecord {
|
||||
id: number;
|
||||
schemeName: string;
|
||||
type: string;
|
||||
user: string;
|
||||
create_time: string;
|
||||
startTime: string;
|
||||
// 详情信息
|
||||
schemeDetail?: SchemeDetail;
|
||||
}
|
||||
|
||||
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 [schemes, setSchemes] = useState<SchemeRecord[]>([]);
|
||||
|
||||
// 使用受控或非受控状态
|
||||
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 bg-white shadow-2xl rounded-lg cursor-pointer hover:shadow-xl transition-all duration-300 opacity-95 hover:opacity-100"
|
||||
onClick={handleToggle}
|
||||
sx={{ zIndex: 1300 }}
|
||||
>
|
||||
<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>
|
||||
<ChevronLeft className="text-gray-600 w-4 h-4" />
|
||||
</Box>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{/* 主面板 */}
|
||||
<Drawer
|
||||
anchor="right"
|
||||
open={isOpen}
|
||||
variant="persistent"
|
||||
hideBackdrop
|
||||
sx={{
|
||||
// 关键：容器自身不占用布局宽度
|
||||
width: 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: "transform 0.3s ease-in-out, opacity 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>
|
||||
<Tooltip title="收起">
|
||||
<IconButton
|
||||
size="small"
|
||||
onClick={handleToggle}
|
||||
sx={{ color: "primary.contrastText" }}
|
||||
>
|
||||
<ChevronRight fontSize="small" />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
</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 />
|
||||
</TabPanel>
|
||||
|
||||
<TabPanel value={currentTab} index={1}>
|
||||
<SchemeQuery
|
||||
schemes={schemes}
|
||||
onSchemesChange={setSchemes}
|
||||
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;
|
||||
Reference in New Issue
Block a user