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

更新 SCADA 设备面板样式，新增清洗按钮

Browse Source
This commit is contained in:
JIANG
2025-11-04 11:39:06 +08:00
parent 85d73bcd07
commit af44a7c503
4 changed files with 851 additions and 522 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/app/(main)/network-simulation/page.tsx
View File

@@ -21,10 +21,6 @@ export default function Home() {
setPanelVisible(true);
}, []);
const handleClosePanel = useCallback(() => {
setPanelVisible(false);
}, []);
return (
<div className="relative w-full h-full overflow-hidden">
<MapComponent>
@@ -35,11 +31,7 @@ export default function Home() {
onSelectionChange={handleSelectionChange}
selectedDeviceIds={selectedDeviceIds}
/>
<SCADADataPanel
deviceIds={selectedDeviceIds}
visible={panelVisible}
onClose={handleClosePanel}
/>
<SCADADataPanel deviceIds={selectedDeviceIds} visible={panelVisible} />
</MapComponent>
</div>
);

7
src/app/(main)/scada-data-cleaning/page.tsx
View File

@@ -20,10 +20,6 @@ export default function Home() {
setPanelVisible(true);
}, []);
const handleClosePanel = useCallback(() => {
setPanelVisible(false);
}, []);
return (
<div className="relative w-full h-full overflow-hidden">
<MapComponent>
@@ -32,11 +28,12 @@ export default function Home() {
onDeviceClick={handleDeviceClick}
onSelectionChange={handleSelectionChange}
selectedDeviceIds={selectedDeviceIds}
showCleaning={true}
/>
<SCADADataPanel
deviceIds={selectedDeviceIds}
visible={panelVisible}
onClose={handleClosePanel}
showCleaning={true}
/>
</MapComponent>
</div>

117
src/components/olmap/SCADADataPanel.tsx
View File

@@ -8,21 +8,21 @@ import {
CircularProgress,
Divider,
IconButton,
Paper,
Stack,
Tab,
Tabs,
Tooltip,
Typography,
Collapse,
Drawer,
} from "@mui/material";
import {
Close,
Refresh,
ShowChart,
TableChart,
ExpandLess,
ExpandMore,
CleaningServices,
ChevronLeft,
ChevronRight,
} from "@mui/icons-material";
import { DataGrid, GridColDef } from "@mui/x-data-grid";
import { LineChart } from "@mui/x-charts";
@@ -55,12 +55,14 @@ export interface SCADADataPanelProps {
) => Promise<TimeSeriesPoint[]>;
/** 可选：控制浮窗显示 */
visible?: boolean;
/** 可选：关闭浮窗的回调 */
onClose?: () => void;
/** 默认展示的选项卡 */
defaultTab?: "chart" | "table";
/** Y 轴数值的小数位数 */
fractionDigits?: number;
/** 是否显示清洗功能 */
showCleaning?: boolean;
/** 清洗数据的回调 */
onCleanData?: () => void;
}
type PanelTab = "chart" | "table";
@@ -242,9 +244,10 @@ const SCADADataPanel: React.FC<SCADADataPanelProps> = ({
deviceIds,
fetchTimeSeriesData = defaultFetcher,
visible = true,
onClose,
defaultTab = "chart",
fractionDigits = 2,
showCleaning = false,
onCleanData,
}) => {
const [from, setFrom] = useState<Dayjs>(() => dayjs().subtract(1, "day"));
const [to, setTo] = useState<Dayjs>(() => dayjs());
@@ -560,17 +563,60 @@ const SCADADataPanel: React.FC<SCADADataPanelProps> = ({
);
};
const drawerWidth = 920;
return (
<Paper
className={clsx(
"absolute right-4 top-20 bg-white rounded-xl shadow-lg overflow-hidden flex flex-col transition-all duration-300",
visible ? "opacity-95 hover:opacity-100" : "opacity-0 -z-10"
<>
{/* 收起时的触发按钮 */}
{!isExpanded && hasDevices && (
<Box
className="absolute top-20 right-4 bg-white shadow-2xl rounded-lg cursor-pointer hover:shadow-xl transition-all duration-300 opacity-95 hover:opacity-100"
onClick={() => setIsExpanded(true)}
>
<Box className="flex flex-col items-center py-3 px-3 gap-1">
<ShowChart 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={isExpanded && visible}
variant="persistent"
hideBackdrop
sx={{
width: isExpanded ? drawerWidth : 0,
flexShrink: 0,
"& .MuiDrawer-paper": {
width: "min(920px, calc(100vw - 2rem))",
maxHeight: "calc(100vh - 100px)",
boxSizing: "border-box",
position: "absolute",
top: 80,
right: 16,
height: "760px",
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">
{/* Header */}
<Box
sx={{
@@ -602,29 +648,19 @@ const SCADADataPanel: React.FC<SCADADataPanelProps> = ({
/>
</Stack>
<Stack direction="row" spacing={1}>
<Tooltip title="展开/收起">
<Tooltip title="收起">
<IconButton
size="small"
onClick={() => setIsExpanded(!isExpanded)}
onClick={() => setIsExpanded(false)}
sx={{ color: "primary.contrastText" }}
>
{isExpanded ? <ExpandLess /> : <ExpandMore />}
</IconButton>
</Tooltip>
<Tooltip title="关闭">
<IconButton
size="small"
onClick={onClose}
sx={{ color: "primary.contrastText" }}
>
<Close fontSize="small" />
<ChevronRight fontSize="small" />
</IconButton>
</Tooltip>
</Stack>
</Stack>
</Box>
<Collapse in={isExpanded}>
{/* Controls */}
<Box sx={{ p: 2, backgroundColor: "grey.50" }}>
<LocalizationProvider dateAdapter={AdapterDayjs}>
@@ -642,7 +678,9 @@ const SCADADataPanel: React.FC<SCADADataPanelProps> = ({
}
}}
maxDateTime={to}
slotProps={{ textField: { fullWidth: true, size: "small" } }}
slotProps={{
textField: { fullWidth: true, size: "small" },
}}
/>
<DateTimePicker
label="结束时间"
@@ -656,7 +694,9 @@ const SCADADataPanel: React.FC<SCADADataPanelProps> = ({
}
}}
minDateTime={from}
slotProps={{ textField: { fullWidth: true, size: "small" } }}
slotProps={{
textField: { fullWidth: true, size: "small" },
}}
/>
</Stack>
<Stack
@@ -683,6 +723,23 @@ const SCADADataPanel: React.FC<SCADADataPanelProps> = ({
label="表格"
/>
</Tabs>
<Stack direction="row" spacing={1}>
{showCleaning && (
<Tooltip title="清洗数据">
<span>
<Button
variant="outlined"
size="small"
color="secondary"
startIcon={<CleaningServices fontSize="small" />}
disabled={!hasDevices || loadingState === "loading"}
onClick={onCleanData}
>
清洗
</Button>
</span>
</Tooltip>
)}
<Tooltip title="刷新数据">
<span>
<Button
@@ -699,6 +756,7 @@ const SCADADataPanel: React.FC<SCADADataPanelProps> = ({
</Tooltip>
</Stack>
</Stack>
</Stack>
</LocalizationProvider>
{!hasDevices && (
@@ -743,8 +801,9 @@ const SCADADataPanel: React.FC<SCADADataPanelProps> = ({
{activeTab === "chart" ? renderChart() : renderTable()}
</Box>
</Collapse>
</Paper>
</Box>
</Drawer>
</>
);
};

335
src/components/olmap/SCADADeviceList.tsx
View File

@@ -10,7 +10,6 @@ import React, {
} from "react";
import {
Box,
Paper,
Typography,
ListItem,
ListItemButton,
@@ -18,7 +17,6 @@ import {
ListItemIcon,
Chip,
IconButton,
Collapse,
FormControl,
InputLabel,
Select,
@@ -28,16 +26,25 @@ import {
Divider,
InputBase,
CircularProgress,
Dialog,
DialogTitle,
DialogContent,
DialogActions,
Button,
Alert,
Drawer,
} from "@mui/material";
import {
Search,
MyLocation,
ExpandMore,
ExpandLess,
FilterList,
Clear,
DeviceHub,
TouchApp,
CleaningServices,
Sensors,
ChevronLeft,
ChevronRight,
} from "@mui/icons-material";
import { FixedSizeList } from "react-window";
import { useNotification } from "@refinedev/core";
@@ -53,6 +60,9 @@ import { Point } from "ol/geom";
import { getVectorContext } from "ol/render";
import { unByKey } from "ol/Observable";
import config from "@/config/config";
import dayjs, { Dayjs } from "dayjs";
import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
import { DateTimePicker, LocalizationProvider } from "@mui/x-date-pickers";
const STATUS_OPTIONS: {
value: "online" | "offline" | "warning" | "error";
@@ -84,6 +94,8 @@ interface SCADADeviceListProps {
multiSelect?: boolean;
selectedDeviceIds?: string[];
onSelectionChange?: (ids: string[]) => void;
showCleaning?: boolean;
onCleanAllData?: (from: Date, to: Date) => void;
}
const SCADADeviceList: React.FC<SCADADeviceListProps> = ({
@@ -92,6 +104,8 @@ const SCADADeviceList: React.FC<SCADADeviceListProps> = ({
multiSelect = true,
selectedDeviceIds,
onSelectionChange,
showCleaning = false,
onCleanAllData,
}) => {
const [searchQuery, setSearchQuery] = useState<string>("");
const [selectedType, setSelectedType] = useState<string>("all");
@@ -113,6 +127,16 @@ const SCADADeviceList: React.FC<SCADADeviceListProps> = ({
const blinkListenerKeyRef = useRef<any>(null);
const debounceTimerRef = useRef<NodeJS.Timeout | null>(null);
const filterBoxRef = useRef<HTMLDivElement | null>(null);
const [listHeight, setListHeight] = useState<number>(500);
// 清洗对话框状态
const [cleanDialogOpen, setCleanDialogOpen] = useState<boolean>(false);
const [cleanStartTime, setCleanStartTime] = useState<Dayjs>(() =>
dayjs().subtract(1, "week")
);
const [cleanEndTime, setCleanEndTime] = useState<Dayjs>(() => dayjs());
const [timeRangeError, setTimeRangeError] = useState<string>("");
// 防抖更新搜索查询
const debouncedSetSearchQuery = useCallback((value: string) => {
@@ -497,6 +521,67 @@ const SCADADeviceList: React.FC<SCADADeviceListProps> = ({
[map, effectiveDevices, multiSelect, open]
);
// 处理清洗对话框关闭
const handleCleanDialogClose = useCallback(() => {
setCleanDialogOpen(false);
setTimeRangeError("");
}, []);
// 验证时间范围
const validateTimeRange = useCallback((start: Dayjs, end: Dayjs): string => {
if (start.isAfter(end)) {
return "开始时间不能晚于结束时间";
}
const daysDiff = end.diff(start, "day");
if (daysDiff > 14) {
return "时间范围不能超过两周（14天）";
}
return "";
}, []);
// 处理开始时间变化
const handleCleanStartTimeChange = useCallback(
(newValue: Dayjs | Date | null) => {
if (newValue) {
const dayjsValue = dayjs.isDayjs(newValue) ? newValue : dayjs(newValue);
setCleanStartTime(dayjsValue);
const error = validateTimeRange(dayjsValue, cleanEndTime);
setTimeRangeError(error);
}
},
[cleanEndTime, validateTimeRange]
);
// 处理结束时间变化
const handleCleanEndTimeChange = useCallback(
(newValue: Dayjs | Date | null) => {
if (newValue) {
const dayjsValue = dayjs.isDayjs(newValue) ? newValue : dayjs(newValue);
setCleanEndTime(dayjsValue);
const error = validateTimeRange(cleanStartTime, dayjsValue);
setTimeRangeError(error);
}
},
[cleanStartTime, validateTimeRange]
);
// 确认清洗
const handleConfirmClean = useCallback(() => {
const error = validateTimeRange(cleanStartTime, cleanEndTime);
if (error) {
setTimeRangeError(error);
return;
}
onCleanAllData?.(cleanStartTime.toDate(), cleanEndTime.toDate());
handleCleanDialogClose();
}, [
cleanStartTime,
cleanEndTime,
validateTimeRange,
onCleanAllData,
handleCleanDialogClose,
]);
// 开始选择 SCADA 设备
const handleStartSelection = useCallback(() => {
if (!map) return;
@@ -586,8 +671,93 @@ const SCADADeviceList: React.FC<SCADADeviceListProps> = ({
};
}, []);
// 动态计算列表高度
useEffect(() => {
const updateListHeight = () => {
if (filterBoxRef.current) {
const drawerHeight = 760; // 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
}
};
updateListHeight();
// 使用 ResizeObserver 监听筛选框高度变化
const resizeObserver = new ResizeObserver(updateListHeight);
if (filterBoxRef.current) {
resizeObserver.observe(filterBoxRef.current);
}
return () => {
resizeObserver.disconnect();
};
}, [
activeSelection.length,
searchQuery,
selectedType,
selectedStatus,
selectedReliability,
showCleaning,
]);
const drawerWidth = 360;
return (
<Paper className="absolute left-4 top-20 w-90 max-h-[calc(100vh-100px)] bg-white rounded-xl shadow-lg overflow-hidden flex flex-col opacity-95 transition-opacity duration-200 ease-in-out hover:opacity-100">
<>
{/* 收起时的触发按钮 */}
{!isExpanded && (
<Box
className="absolute top-20 left-4 bg-white shadow-2xl rounded-lg cursor-pointer hover:shadow-xl transition-all duration-300 opacity-95 hover:opacity-100"
onClick={() => setIsExpanded(true)}
>
<Box className="flex flex-col items-center py-3 px-3 gap-1">
<Sensors className="text-[#1976d2] w-5 h-5" />
<Typography
variant="caption"
className="text-gray-700 font-semibold my-1 text-xs"
style={{ writingMode: "vertical-rl" }}
>
SCADA设备
</Typography>
<ChevronRight className="text-gray-600 w-4 h-4" />
</Box>
</Box>
)}
{/* 主面板 */}
<Drawer
anchor="left"
open={isExpanded}
variant="persistent"
hideBackdrop
sx={{
width: isExpanded ? drawerWidth : 0,
flexShrink: 0,
"& .MuiDrawer-paper": {
width: drawerWidth,
height: "760px",
boxSizing: "border-box",
position: "absolute",
top: 80,
left: 16,
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
sx={{
@@ -604,7 +774,16 @@ const SCADADeviceList: React.FC<SCADADeviceListProps> = ({
justifyContent="space-between"
>
<Stack direction="row" alignItems="center" spacing={1}>
<DeviceHub fontSize="small" />
<Tooltip title="收起">
<IconButton
size="small"
onClick={() => setIsExpanded(false)}
sx={{ color: "white" }}
>
<ChevronLeft fontSize="small" />
</IconButton>
</Tooltip>
<Sensors fontSize="small" />
<Typography variant="h6" sx={{ fontWeight: "bold" }}>
SCADA 设备列表
</Typography>
@@ -618,23 +797,11 @@ const SCADADeviceList: React.FC<SCADADeviceListProps> = ({
}}
/>
</Stack>
<Stack direction="row" spacing={1}>
<Tooltip title="展开/收起">
<IconButton
size="small"
onClick={() => setIsExpanded(!isExpanded)}
sx={{ color: "white" }}
>
{isExpanded ? <ExpandLess /> : <ExpandMore />}
</IconButton>
</Tooltip>
</Stack>
</Stack>
</Box>
<Collapse in={isExpanded}>
{/* 搜索和筛选栏 */}
<Box sx={{ p: 2, backgroundColor: "grey.50" }}>
<Box ref={filterBoxRef} sx={{ p: 2, backgroundColor: "grey.50" }}>
<Stack spacing={2}>
{/* 搜索框 */}
<Box className="h-10 flex items-center border border-gray-300 rounded-md p-0.5">
@@ -653,7 +820,10 @@ const SCADADeviceList: React.FC<SCADADeviceListProps> = ({
</IconButton>
{searchQuery && (
<>
<Divider sx={{ height: 28, m: 0.5 }} orientation="vertical" />
<Divider
sx={{ height: 28, m: 0.5 }}
orientation="vertical"
/>
<IconButton
color="primary"
sx={{ p: "6px" }}
@@ -730,7 +900,9 @@ const SCADADeviceList: React.FC<SCADADeviceListProps> = ({
</Typography>
{/* 地图选择按钮 */}
<Tooltip title={isSelecting ? "结束地图选择" : "从地图选择设备"}>
<Tooltip
title={isSelecting ? "结束地图选择" : "从地图选择设备"}
>
<IconButton
size="small"
color={isSelecting ? "primary" : "default"}
@@ -740,15 +912,39 @@ const SCADADeviceList: React.FC<SCADADeviceListProps> = ({
sx={{
border: 1,
borderColor: isSelecting ? "primary.main" : "divider",
backgroundColor: isSelecting ? "primary.50" : "transparent",
backgroundColor: isSelecting
? "primary.50"
: "transparent",
"&:hover": {
backgroundColor: isSelecting ? "primary.100" : "grey.100",
backgroundColor: isSelecting
? "primary.100"
: "grey.100",
},
}}
>
<TouchApp fontSize="small" />
</IconButton>
</Tooltip>
{/* 清洗全部数据按钮 */}
{showCleaning && (
<Tooltip title="清洗全部数据">
<IconButton
size="small"
color="secondary"
onClick={() => setCleanDialogOpen(true)}
sx={{
border: 1,
borderColor: "secondary.main",
"&:hover": {
backgroundColor: "secondary.50",
},
}}
>
<CleaningServices fontSize="small" />
</IconButton>
</Tooltip>
)}
</Stack>
{/* 清除选择按钮 */}
@@ -770,7 +966,7 @@ const SCADADeviceList: React.FC<SCADADeviceListProps> = ({
<Divider />
{/* 设备列表 */}
<Box sx={{ flex: 1, overflow: "auto", maxHeight: 400 }}>
<Box sx={{ flex: 1, overflow: "hidden" }}>
{loading ? (
<Box
sx={{
@@ -801,7 +997,7 @@ const SCADADeviceList: React.FC<SCADADeviceListProps> = ({
</Box>
) : (
<FixedSizeList
height={400}
height={listHeight}
itemCount={filteredDevices.length}
itemSize={92}
width="100%"
@@ -930,8 +1126,93 @@ const SCADADeviceList: React.FC<SCADADeviceListProps> = ({
</FixedSizeList>
)}
</Box>
</Collapse>
</Paper>
</Box>
{/* 清洗数据时间段选择对话框 */}
<Dialog
open={cleanDialogOpen}
onClose={handleCleanDialogClose}
maxWidth="sm"
fullWidth
>
<DialogTitle>
<Stack direction="row" alignItems="center" spacing={1}>
<CleaningServices color="secondary" />
<Typography variant="h6">清洗全部数据</Typography>
</Stack>
</DialogTitle>
<DialogContent>
<Stack spacing={3} sx={{ mt: 2 }}>
<Alert severity="info">
请选择要清洗数据的时间段，最长不超过两周（14天）。
</Alert>
<LocalizationProvider dateAdapter={AdapterDayjs}>
<DateTimePicker
label="开始时间"
value={cleanStartTime}
onChange={handleCleanStartTimeChange}
maxDateTime={cleanEndTime}
slotProps={{
textField: {
fullWidth: true,
error: !!timeRangeError,
},
}}
/>
<DateTimePicker
label="结束时间"
value={cleanEndTime}
onChange={handleCleanEndTimeChange}
minDateTime={cleanStartTime}
maxDateTime={dayjs()}
slotProps={{
textField: {
fullWidth: true,
error: !!timeRangeError,
},
}}
/>
</LocalizationProvider>
{timeRangeError && (
<Alert severity="error">{timeRangeError}</Alert>
)}
<Box sx={{ p: 2, backgroundColor: "grey.50", borderRadius: 1 }}>
<Typography variant="body2" color="text.secondary">
<strong>时间范围：</strong>
{cleanStartTime.format("YYYY-MM-DD HH:mm")} 至{" "}
{cleanEndTime.format("YYYY-MM-DD HH:mm")}
</Typography>
<Typography
variant="body2"
color="text.secondary"
sx={{ mt: 1 }}
>
<strong>跨度：</strong>
{cleanEndTime.diff(cleanStartTime, "day")} 天{" "}
{cleanEndTime.diff(cleanStartTime, "hour") % 24} 小时
</Typography>
</Box>
</Stack>
</DialogContent>
<DialogActions sx={{ px: 3, pb: 2 }}>
<Button onClick={handleCleanDialogClose}>取消</Button>
<Button
variant="contained"
color="secondary"
onClick={handleConfirmClean}
disabled={!!timeRangeError}
startIcon={<CleaningServices />}
>
确认清洗
</Button>
</DialogActions>
</Dialog>
</Drawer>
</>
);
};