创建监测点优化布置页面
This commit is contained in:
JIANG
203
src/components/olmap/MonitoringPlaceOptimizationPanel.tsx
Normal file
203
src/components/olmap/MonitoringPlaceOptimizationPanel.tsx
Normal file
@@ -0,0 +1,203 @@
|
||||
"use client";
|
||||
|
||||
import React, { useState } from "react";
|
||||
import { Box, Drawer, Tabs, Tab, Typography, IconButton } from "@mui/material";
|
||||
import {
|
||||
ChevronRight as ChevronRightIcon,
|
||||
ChevronLeft as ChevronLeftIcon,
|
||||
Sensors as SensorsIcon,
|
||||
Analytics as AnalyticsIcon,
|
||||
Search as SearchIcon,
|
||||
} from "@mui/icons-material";
|
||||
import OptimizationParameters from "./MonitoringPlaceOptimization/OptimizationParameters";
|
||||
import SchemeQuery from "./MonitoringPlaceOptimization/SchemeQuery";
|
||||
|
||||
interface SchemeRecord {
|
||||
id: number;
|
||||
schemeName: string;
|
||||
sensorNumber: number;
|
||||
minDiameter: number;
|
||||
user: string;
|
||||
create_time: string;
|
||||
sensorLocation?: string[];
|
||||
}
|
||||
|
||||
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 MonitoringPlaceOptimizationPanelProps {
|
||||
open?: boolean;
|
||||
onToggle?: () => void;
|
||||
}
|
||||
|
||||
const MonitoringPlaceOptimizationPanel: React.FC<
|
||||
MonitoringPlaceOptimizationPanelProps
|
||||
> = ({ 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}
|
||||
>
|
||||
<Box className="flex flex-col items-center py-3 px-3 gap-1">
|
||||
<SensorsIcon 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">
|
||||
<SensorsIcon 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="方案查询"
|
||||
/>
|
||||
</Tabs>
|
||||
</Box>
|
||||
|
||||
{/* Tab 内容 */}
|
||||
<TabPanel value={currentTab} index={0}>
|
||||
<OptimizationParameters />
|
||||
</TabPanel>
|
||||
|
||||
<TabPanel value={currentTab} index={1}>
|
||||
<SchemeQuery
|
||||
schemes={schemes}
|
||||
onSchemesChange={setSchemes}
|
||||
onLocate={(id) => {
|
||||
console.log("定位方案:", id);
|
||||
// TODO: 在地图上定位
|
||||
}}
|
||||
/>
|
||||
</TabPanel>
|
||||
</Box>
|
||||
</Drawer>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default MonitoringPlaceOptimizationPanel;
|
||||
Reference in New Issue
Block a user