From 7702ba9edf2ca98c07f3e7e471f2f2d4d2773ded Mon Sep 17 00:00:00 2001 From: JIANG Date: Thu, 6 Nov 2025 17:45:00 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E9=9D=A2=E6=9D=BF=E6=A0=B7?= =?UTF-8?q?=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../olmap/BurstPipeAnalysisPanel.tsx | 39 ++++++---- .../MonitoringPlaceOptimizationPanel.tsx | 39 ++++++---- src/components/olmap/SCADAIntegratedPanel.tsx | 74 +++++++++++++++++++ 3 files changed, 124 insertions(+), 28 deletions(-) create mode 100644 src/components/olmap/SCADAIntegratedPanel.tsx diff --git a/src/components/olmap/BurstPipeAnalysisPanel.tsx b/src/components/olmap/BurstPipeAnalysisPanel.tsx index 5321b05..aa1cf4c 100644 --- a/src/components/olmap/BurstPipeAnalysisPanel.tsx +++ b/src/components/olmap/BurstPipeAnalysisPanel.tsx @@ -1,10 +1,18 @@ "use client"; import React, { useState } from "react"; -import { Box, Drawer, Tabs, Tab, Typography, IconButton } from "@mui/material"; import { - ChevronRight as ChevronRightIcon, - ChevronLeft as ChevronLeftIcon, + Box, + Drawer, + Tabs, + Tab, + Typography, + IconButton, + Tooltip, +} from "@mui/material"; +import { + ChevronRight, + ChevronLeft, Analytics as AnalyticsIcon, Search as SearchIcon, MyLocation as MyLocationIcon, @@ -89,6 +97,7 @@ const BurstPipeAnalysisPanel: React.FC = ({ @@ -99,7 +108,7 @@ const BurstPipeAnalysisPanel: React.FC = ({ > 爆管分析 - + )} @@ -111,7 +120,8 @@ const BurstPipeAnalysisPanel: React.FC = ({ variant="persistent" hideBackdrop sx={{ - width: isOpen ? drawerWidth : 0, + // 关键：容器自身不占用布局宽度 + width: 0, flexShrink: 0, "& .MuiDrawer-paper": { width: drawerWidth, @@ -126,7 +136,7 @@ const BurstPipeAnalysisPanel: React.FC = ({ "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", + transition: "transform 0.3s ease-in-out, opacity 0.3s ease-in-out", border: "none", "&:hover": { opacity: 1, @@ -143,14 +153,15 @@ const BurstPipeAnalysisPanel: React.FC = ({ 爆管分析 - - - + + + + + {/* Tabs 导航 */} diff --git a/src/components/olmap/MonitoringPlaceOptimizationPanel.tsx b/src/components/olmap/MonitoringPlaceOptimizationPanel.tsx index 5bda86c..eb75de5 100644 --- a/src/components/olmap/MonitoringPlaceOptimizationPanel.tsx +++ b/src/components/olmap/MonitoringPlaceOptimizationPanel.tsx @@ -1,10 +1,18 @@ "use client"; import React, { useState } from "react"; -import { Box, Drawer, Tabs, Tab, Typography, IconButton } from "@mui/material"; import { - ChevronRight as ChevronRightIcon, - ChevronLeft as ChevronLeftIcon, + Box, + Drawer, + Tabs, + Tab, + Typography, + IconButton, + Tooltip, +} from "@mui/material"; +import { + ChevronRight, + ChevronLeft, Sensors as SensorsIcon, Analytics as AnalyticsIcon, Search as SearchIcon, @@ -79,6 +87,7 @@ const MonitoringPlaceOptimizationPanel: React.FC< @@ -89,7 +98,7 @@ const MonitoringPlaceOptimizationPanel: React.FC< > 监测点优化 - + )} @@ -101,7 +110,8 @@ const MonitoringPlaceOptimizationPanel: React.FC< variant="persistent" hideBackdrop sx={{ - width: isOpen ? drawerWidth : 0, + // 关键：根容器不占据布局空间，避免页面布局受影响 + width: 0, flexShrink: 0, "& .MuiDrawer-paper": { width: drawerWidth, @@ -116,7 +126,7 @@ const MonitoringPlaceOptimizationPanel: React.FC< "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", + transition: "transform 0.3s ease-in-out, opacity 0.3s ease-in-out", border: "none", "&:hover": { opacity: 1, @@ -133,14 +143,15 @@ const MonitoringPlaceOptimizationPanel: React.FC< 监测点优化 - - - + + + + + {/* Tabs 导航 */} diff --git a/src/components/olmap/SCADAIntegratedPanel.tsx b/src/components/olmap/SCADAIntegratedPanel.tsx new file mode 100644 index 0000000..982021f --- /dev/null +++ b/src/components/olmap/SCADAIntegratedPanel.tsx @@ -0,0 +1,74 @@ +"use client"; + +import React, { useCallback, useMemo, useState } from "react"; +import { Box, Stack } from "@mui/material"; +import SCADADeviceList from "./SCADADeviceList"; +import SCADADataPanel from "./SCADADataPanel"; + +/** + * 集成面板：左侧为 SCADA 设备列表（支持从地图选择），右侧为历史数据面板（曲线/表格）。 + * - 使用 SCADADeviceList 内置的地图点击选择功能 + * - 使用 SCADADataPanel 的时间段查询与图表展示 + * - 两者通过选中设备 ID 进行联动 + */ +export interface SCADAIntegratedPanelProps { + /** 初始选中设备 ID 列表 */ + initialSelection?: string[]; + /** 是否展示数据清洗相关功能（传递给两个子面板） */ + showCleaning?: boolean; + /** 是否显示右侧数据面板 */ + showDataPanel?: boolean; + /** 数据面板默认选项卡 */ + dataPanelDefaultTab?: "chart" | "table"; + /** 数据面板小数位数 */ + fractionDigits?: number; +} + +const SCADAIntegratedPanel: React.FC = ({ + initialSelection = [], + showCleaning = false, + showDataPanel = true, + dataPanelDefaultTab = "chart", + fractionDigits = 2, +}) => { + const [selectedIds, setSelectedIds] = useState(initialSelection); + // 通过变更 key 强制重新挂载 DataPanel，从而在“清洗全部”后自动刷新 + const [dataPanelKey, setDataPanelKey] = useState(0); + + const handleSelectionChange = useCallback((ids: string[]) => { + setSelectedIds(ids); + }, []); + + // 清洗全部数据后，强制刷新右侧数据面板（重新挂载触发首轮查询） + const handleCleanAllData = useCallback((_from: Date, _to: Date) => { + setDataPanelKey((k) => k + 1); + }, []); + + const hasSelection = useMemo(() => selectedIds.length > 0, [selectedIds]); + + return ( + + {/* 左侧：设备列表（内置抽屉布局） */} + + + {/* 右侧：历史数据面板（内置抽屉布局） */} + {showDataPanel && ( + + )} + + ); +}; + +export default SCADAIntegratedPanel;