JIANG
447 lines
14 KiB
TypeScript
447 lines
14 KiB
TypeScript
"use client";
|
|
|
|
import React, { useState, useEffect, useMemo } from "react";
|
|
import {
|
|
Box,
|
|
Paper,
|
|
TextField,
|
|
Typography,
|
|
List,
|
|
ListItem,
|
|
ListItemButton,
|
|
ListItemText,
|
|
ListItemIcon,
|
|
Chip,
|
|
IconButton,
|
|
Collapse,
|
|
InputAdornment,
|
|
FormControl,
|
|
InputLabel,
|
|
Select,
|
|
MenuItem,
|
|
Tooltip,
|
|
Stack,
|
|
Divider,
|
|
InputBase,
|
|
} from "@mui/material";
|
|
import {
|
|
Search,
|
|
MyLocation,
|
|
ExpandMore,
|
|
ExpandLess,
|
|
FilterList,
|
|
Clear,
|
|
Visibility,
|
|
VisibilityOff,
|
|
DeviceHub,
|
|
} from "@mui/icons-material";
|
|
|
|
interface SCADADevice {
|
|
id: string;
|
|
name: string;
|
|
type: string;
|
|
coordinates: [number, number];
|
|
status: "online" | "offline" | "warning" | "error";
|
|
properties?: Record<string, any>;
|
|
}
|
|
|
|
interface SCADADeviceListProps {
|
|
devices?: SCADADevice[];
|
|
onDeviceClick?: (device: SCADADevice) => void;
|
|
onZoomToDevice?: (coordinates: [number, number]) => void;
|
|
multiSelect?: boolean;
|
|
selectedDeviceIds?: string[];
|
|
onSelectionChange?: (ids: string[]) => void;
|
|
}
|
|
|
|
const SCADADeviceList: React.FC<SCADADeviceListProps> = ({
|
|
devices = [],
|
|
onDeviceClick,
|
|
onZoomToDevice,
|
|
multiSelect = true,
|
|
selectedDeviceIds,
|
|
onSelectionChange,
|
|
}) => {
|
|
const [searchQuery, setSearchQuery] = useState<string>("");
|
|
const [selectedType, setSelectedType] = useState<string>("all");
|
|
const [selectedStatus, setSelectedStatus] = useState<string>("all");
|
|
const [isExpanded, setIsExpanded] = useState<boolean>(true);
|
|
const [internalSelection, setInternalSelection] = useState<string[]>([]);
|
|
const [pendingSelection, setPendingSelection] = useState<string[] | null>(
|
|
null
|
|
);
|
|
|
|
const activeSelection = selectedDeviceIds ?? internalSelection;
|
|
|
|
useEffect(() => {
|
|
if (selectedDeviceIds) {
|
|
setInternalSelection(selectedDeviceIds);
|
|
}
|
|
}, [selectedDeviceIds]);
|
|
|
|
// 添加 useEffect 来延迟调用 onSelectionChange，避免在渲染时触发父组件的 setState
|
|
useEffect(() => {
|
|
if (pendingSelection !== null) {
|
|
onSelectionChange?.(pendingSelection);
|
|
setPendingSelection(null);
|
|
}
|
|
}, [pendingSelection, onSelectionChange]);
|
|
|
|
// 获取设备类型列表
|
|
const deviceTypes = useMemo(() => {
|
|
const types = Array.from(new Set(devices.map((device) => device.type)));
|
|
return types.sort();
|
|
}, [devices]);
|
|
|
|
// 获取设备状态列表
|
|
const deviceStatuses = useMemo(() => {
|
|
const statuses = Array.from(
|
|
new Set(devices.map((device) => device.status))
|
|
);
|
|
return statuses.sort();
|
|
}, [devices]);
|
|
|
|
// 过滤设备列表
|
|
const filteredDevices = useMemo(() => {
|
|
return devices.filter((device) => {
|
|
const matchesSearch =
|
|
searchQuery === "" ||
|
|
device.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
|
device.id.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
|
device.type.toLowerCase().includes(searchQuery.toLowerCase());
|
|
|
|
const matchesType =
|
|
selectedType === "all" || device.type === selectedType;
|
|
const matchesStatus =
|
|
selectedStatus === "all" || device.status === selectedStatus;
|
|
|
|
return matchesSearch && matchesType && matchesStatus;
|
|
});
|
|
}, [devices, searchQuery, selectedType, selectedStatus]);
|
|
|
|
// 状态颜色映射
|
|
const getStatusColor = (status: string) => {
|
|
switch (status) {
|
|
case "online":
|
|
return "success";
|
|
case "offline":
|
|
return "default";
|
|
case "warning":
|
|
return "warning";
|
|
case "error":
|
|
return "error";
|
|
default:
|
|
return "default";
|
|
}
|
|
};
|
|
|
|
// 状态图标映射
|
|
const getStatusIcon = (status: string) => {
|
|
switch (status) {
|
|
case "online":
|
|
return "●";
|
|
case "offline":
|
|
return "○";
|
|
case "warning":
|
|
return "▲";
|
|
case "error":
|
|
return "✕";
|
|
default:
|
|
return "●";
|
|
}
|
|
};
|
|
|
|
// 处理设备点击
|
|
const handleDeviceClick = (device: SCADADevice, event?: React.MouseEvent) => {
|
|
onDeviceClick?.(device);
|
|
|
|
setInternalSelection((prev) => {
|
|
const exists = prev.includes(device.id);
|
|
const nextSelection = multiSelect
|
|
? exists
|
|
? prev.filter((id) => id !== device.id)
|
|
: [...prev, device.id]
|
|
: exists
|
|
? []
|
|
: [device.id];
|
|
|
|
setPendingSelection(nextSelection); // 设置待处理的 selection，延迟调用
|
|
return nextSelection;
|
|
});
|
|
};
|
|
|
|
// 处理缩放到设备
|
|
const handleZoomToDevice = (device: SCADADevice, event: React.MouseEvent) => {
|
|
event.stopPropagation();
|
|
onZoomToDevice?.(device.coordinates);
|
|
};
|
|
|
|
// 清除搜索
|
|
const handleClearSearch = () => {
|
|
setSearchQuery("");
|
|
};
|
|
|
|
// 重置所有筛选条件
|
|
const handleResetFilters = () => {
|
|
setSearchQuery("");
|
|
setSelectedType("all");
|
|
setSelectedStatus("all");
|
|
};
|
|
|
|
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">
|
|
{/* 头部控制栏 */}
|
|
<Box
|
|
sx={{
|
|
p: 2,
|
|
borderBottom: 1,
|
|
borderColor: "divider",
|
|
backgroundColor: "primary.main",
|
|
color: "white",
|
|
}}
|
|
>
|
|
<Stack
|
|
direction="row"
|
|
alignItems="center"
|
|
justifyContent="space-between"
|
|
>
|
|
<Stack direction="row" alignItems="center" spacing={1}>
|
|
<DeviceHub fontSize="small" />
|
|
<Typography variant="h6" sx={{ fontWeight: "bold" }}>
|
|
SCADA 设备列表
|
|
</Typography>
|
|
<Chip
|
|
label={filteredDevices.length}
|
|
size="small"
|
|
sx={{
|
|
backgroundColor: "rgba(255, 255, 255, 0.2)",
|
|
color: "white",
|
|
fontWeight: "bold",
|
|
}}
|
|
/>
|
|
</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" }}>
|
|
<Stack spacing={2}>
|
|
{/* 搜索框 */}
|
|
<Box className="h-10 flex items-center border border-gray-300 rounded-md p-0.5">
|
|
<InputBase
|
|
sx={{ ml: 1, flex: 1 }}
|
|
placeholder="搜索设备名称、ID 或类型..."
|
|
value={searchQuery}
|
|
onChange={(e) => setSearchQuery(e.target.value)}
|
|
inputProps={{ "aria-label": "search devices" }}
|
|
/>
|
|
<IconButton type="button" sx={{ p: "6px" }} aria-label="search">
|
|
<Search fontSize="small" />
|
|
</IconButton>
|
|
{searchQuery && (
|
|
<>
|
|
<Divider sx={{ height: 28, m: 0.5 }} orientation="vertical" />
|
|
<IconButton
|
|
color="primary"
|
|
sx={{ p: "6px" }}
|
|
onClick={handleClearSearch}
|
|
aria-label="clear"
|
|
>
|
|
<Clear fontSize="small" />
|
|
</IconButton>
|
|
</>
|
|
)}
|
|
</Box>
|
|
|
|
{/* 筛选器 */}
|
|
<Stack direction="row" spacing={2}>
|
|
<FormControl size="small" sx={{ minWidth: 120 }}>
|
|
<InputLabel>设备类型</InputLabel>
|
|
<Select
|
|
value={selectedType}
|
|
label="设备类型"
|
|
onChange={(e) => setSelectedType(e.target.value)}
|
|
>
|
|
<MenuItem value="all">全部类型</MenuItem>
|
|
{deviceTypes.map((type) => (
|
|
<MenuItem key={type} value={type}>
|
|
{type}
|
|
</MenuItem>
|
|
))}
|
|
</Select>
|
|
</FormControl>
|
|
|
|
<FormControl size="small" sx={{ minWidth: 100 }}>
|
|
<InputLabel>状态</InputLabel>
|
|
<Select
|
|
value={selectedStatus}
|
|
label="状态"
|
|
onChange={(e) => setSelectedStatus(e.target.value)}
|
|
>
|
|
<MenuItem value="all">全部状态</MenuItem>
|
|
{deviceStatuses.map((status) => (
|
|
<MenuItem key={status} value={status}>
|
|
{status}
|
|
</MenuItem>
|
|
))}
|
|
</Select>
|
|
</FormControl>
|
|
|
|
<Tooltip title="重置筛选条件">
|
|
<IconButton onClick={handleResetFilters}>
|
|
<FilterList />
|
|
</IconButton>
|
|
</Tooltip>
|
|
</Stack>
|
|
|
|
{/* 筛选结果统计 */}
|
|
<Typography variant="caption" color="text.secondary">
|
|
共找到 {filteredDevices.length} 个设备
|
|
{devices.length !== filteredDevices.length &&
|
|
` (共 ${devices.length} 个设备)`}
|
|
</Typography>
|
|
</Stack>
|
|
</Box>
|
|
|
|
<Divider />
|
|
|
|
{/* 设备列表 */}
|
|
<Box sx={{ flex: 1, overflow: "auto", maxHeight: 400 }}>
|
|
{filteredDevices.length === 0 ? (
|
|
<Box
|
|
sx={{
|
|
p: 4,
|
|
textAlign: "center",
|
|
color: "text.secondary",
|
|
}}
|
|
>
|
|
<DeviceHub sx={{ fontSize: 48, mb: 2, opacity: 0.5 }} />
|
|
<Typography variant="body2">
|
|
{searchQuery ||
|
|
selectedType !== "all" ||
|
|
selectedStatus !== "all"
|
|
? "未找到匹配的设备"
|
|
: "暂无 SCADA 设备"}
|
|
</Typography>
|
|
</Box>
|
|
) : (
|
|
<List dense sx={{ p: 0 }}>
|
|
{filteredDevices.map((device, index) => (
|
|
<React.Fragment key={device.id}>
|
|
<ListItem disablePadding>
|
|
<ListItemButton
|
|
selected={activeSelection.includes(device.id)}
|
|
onClick={(event) => handleDeviceClick(device, event)}
|
|
sx={{
|
|
"&.Mui-selected": {
|
|
backgroundColor: "primary.50",
|
|
borderLeft: 3,
|
|
borderColor: "primary.main",
|
|
},
|
|
"&:hover": {
|
|
backgroundColor: "grey.50",
|
|
},
|
|
}}
|
|
>
|
|
<ListItemIcon sx={{ minWidth: 36 }}>
|
|
<Typography
|
|
variant="caption"
|
|
sx={{
|
|
color: `${getStatusColor(device.status)}.main`,
|
|
fontWeight: "bold",
|
|
fontSize: 16,
|
|
}}
|
|
>
|
|
{getStatusIcon(device.status)}
|
|
</Typography>
|
|
</ListItemIcon>
|
|
|
|
<ListItemText
|
|
primary={
|
|
<Stack
|
|
direction="row"
|
|
alignItems="center"
|
|
spacing={1}
|
|
>
|
|
<Typography
|
|
variant="body2"
|
|
sx={{ fontWeight: "medium" }}
|
|
>
|
|
{device.name}
|
|
</Typography>
|
|
<Chip
|
|
label={device.type}
|
|
size="small"
|
|
variant="outlined"
|
|
sx={{ fontSize: "0.7rem", height: 20 }}
|
|
/>
|
|
</Stack>
|
|
}
|
|
secondary={
|
|
<Stack spacing={0.5}>
|
|
<Typography
|
|
variant="caption"
|
|
color="text.secondary"
|
|
>
|
|
ID: {device.id}
|
|
</Typography>
|
|
<Typography
|
|
variant="caption"
|
|
color="text.secondary"
|
|
>
|
|
坐标: {device.coordinates[0].toFixed(6)},{" "}
|
|
{device.coordinates[1].toFixed(6)}
|
|
</Typography>
|
|
</Stack>
|
|
}
|
|
slotProps={{
|
|
secondary: {
|
|
component: "div", // 使其支持多行
|
|
},
|
|
}}
|
|
/>
|
|
|
|
<Tooltip title="缩放到设备位置">
|
|
<IconButton
|
|
size="small"
|
|
onClick={(e) => handleZoomToDevice(device, e)}
|
|
sx={{
|
|
ml: 1,
|
|
color: "primary.main",
|
|
"&:hover": {
|
|
backgroundColor: "primary.50",
|
|
},
|
|
}}
|
|
>
|
|
<MyLocation fontSize="small" />
|
|
</IconButton>
|
|
</Tooltip>
|
|
</ListItemButton>
|
|
</ListItem>
|
|
{index < filteredDevices.length - 1 && (
|
|
<Divider variant="inset" />
|
|
)}
|
|
</React.Fragment>
|
|
))}
|
|
</List>
|
|
)}
|
|
</Box>
|
|
</Collapse>
|
|
</Paper>
|
|
);
|
|
};
|
|
|
|
export default SCADADeviceList;
|