调整面板

src/components/olmap/SCADADataPanel.tsx

@@ -35,6 +35,7 @@ import { GeoJSON } from "ol/format";
 import { useGetIdentity } from "@refinedev/core";
 import { useNotification } from "@refinedev/core";
 import axios from "axios";
+import { set } from "date-fns";
 
 dayjs.extend(utc);
 dayjs.extend(timezone);
@@ -344,9 +345,9 @@ const SCADADataPanel: React.FC<SCADADataPanelProps> = ({
   const [isExpanded, setIsExpanded] = useState<boolean>(true);
   const [deviceLabels, setDeviceLabels] = useState<Record<string, string>>({});
   const [isCleaning, setIsCleaning] = useState<boolean>(false);
-  const [selectedSource, setSelectedSource] = useState<"raw" | "clean" | "sim">(
+  const [selectedSource, setSelectedSource] = useState<
-    "raw"
+    "raw" | "clean" | "sim" | "all"
-  );
+  >("all");
 
   // 获取 SCADA 设备信息，生成 deviceLabels
   useEffect(() => {
@@ -403,7 +404,9 @@ const SCADADataPanel: React.FC<SCADADataPanelProps> = ({
 
       setLoadingState("loading");
       setError(null);
-
+      if (deviceIds.length > 1) {
+        setSelectedSource("clean");
+      }
       try {
         const { from: rangeFrom, to: rangeTo } = normalizedRange;
         const result = await customFetcher(deviceIds, {
@@ -519,7 +522,8 @@ const SCADADataPanel: React.FC<SCADADataPanelProps> = ({
 
     const dynamic = (() => {
       if (showCleaning) {
-        if (deviceIds.length === 1) {
+        if (selectedSource === "all") {
+          // 全部模式：显示所有设备的三种数据
           return deviceIds.flatMap<GridColDef>((id) => [
             {
               field: `${id}_raw`,
@@ -562,6 +566,7 @@ const SCADADataPanel: React.FC<SCADADataPanelProps> = ({
             },
           ]);
         } else {
+          // 单一数据源模式：只显示选中的数据源
           return deviceIds.map<GridColDef>((id) => ({
             field: `${id}_${selectedSource}`,
             headerName: deviceLabels?.[id] ?? id,
@@ -688,7 +693,8 @@ const SCADADataPanel: React.FC<SCADADataPanelProps> = ({
           ]}
           series={(() => {
             if (showCleaning) {
-              if (deviceIds.length === 1) {
+              if (selectedSource === "all") {
+                // 全部模式：显示所有设备的三种数据
                 return deviceIds.flatMap((id, index) => [
                   {
                     dataKey: `${id}_raw`,
@@ -725,6 +731,7 @@ const SCADADataPanel: React.FC<SCADADataPanelProps> = ({
                   },
                 ]);
               } else {
+                // 单一数据源模式：只显示选中的数据源
                 return deviceIds.map((id, index) => ({
                   dataKey: `${id}_${selectedSource}`,
                   label: deviceLabels?.[id] ?? id,
@@ -885,7 +892,7 @@ const SCADADataPanel: React.FC<SCADADataPanelProps> = ({
             position: "absolute",
             top: 80,
             right: 16,
-            height: showCleaning && deviceIds.length >= 2 ? "820px" : "760px",
+            height: "820px",
             borderRadius: "12px",
             boxShadow:
               "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
@@ -1049,17 +1056,20 @@ const SCADADataPanel: React.FC<SCADADataPanelProps> = ({
                     </Tooltip>
                   </Stack>
                 </Stack>
-                {showCleaning && deviceIds.length >= 2 && (
+                {showCleaning && hasDevices && (
                   <Stack direction="row" spacing={1} alignItems="center">
                     <Typography variant="body2" sx={{ fontWeight: 500 }}>
                       数据源:
                     </Typography>
                     <Tabs
                       value={selectedSource}
-                      onChange={(_, value: "raw" | "clean" | "sim") =>
+                      onChange={(_, value: "raw" | "clean" | "sim" | "all") =>
                         setSelectedSource(value)
                       }
                     >
+                      {deviceIds.length === 1 && (
+                        <Tab value="all" label="全部" />
+                      )}
                       <Tab value="clean" label="清洗" />
                       <Tab value="raw" label="原始" />
                       <Tab value="sim" label="模拟" />

src/components/olmap/SCADADeviceList.tsx

@@ -135,7 +135,7 @@ const SCADADeviceList: React.FC<SCADADeviceListProps> = ({
 
   const debounceTimerRef = useRef<NodeJS.Timeout | null>(null);
   const filterBoxRef = useRef<HTMLDivElement | null>(null);
-  const [listHeight, setListHeight] = useState<number>(500);
+  const [listHeight, setListHeight] = useState<number>(560);
 
   // 清洗对话框状态
   const [cleanDialogOpen, setCleanDialogOpen] = useState<boolean>(false);
@@ -748,13 +748,13 @@ const SCADADeviceList: React.FC<SCADADeviceListProps> = ({
   useEffect(() => {
     const updateListHeight = () => {
       if (filterBoxRef.current) {
-        const drawerHeight = 760; // Drawer 总高度
+        const drawerHeight = 820; // Drawer 总高度
         const headerHeight = 73; // 头部高度（估算）
         const dividerHeight = 1; // 分隔线高度
         const filterBoxHeight = filterBoxRef.current.offsetHeight;
         const availableHeight =
           drawerHeight - headerHeight - filterBoxHeight - dividerHeight - 8; // 减去一些边距
-        setListHeight(Math.max(availableHeight, 200)); // 最小高度 200
+        setListHeight(Math.max(availableHeight, 260)); // 最小高度 260
       }
     };
 
@@ -777,8 +777,6 @@ const SCADADeviceList: React.FC<SCADADeviceListProps> = ({
     showCleaning,
   ]);
 
-  const drawerWidth = 360;
-
   return (
     <>
       {/* 收起时的触发按钮 */}
@@ -808,11 +806,11 @@ const SCADADeviceList: React.FC<SCADADeviceListProps> = ({
         variant="persistent"
         hideBackdrop
         sx={{
-          width: isExpanded ? drawerWidth : 0,
+          width: isExpanded ? 360 : 0,
           flexShrink: 0,
           "& .MuiDrawer-paper": {
-            width: drawerWidth,
+            width: 360,
-            height: "760px",
+            height: "820px",
             boxSizing: "border-box",
             position: "absolute",
             top: 80,