1283 lines
41 KiB
TypeScript
1283 lines
41 KiB
TypeScript
"use client";
|
||
|
||
import React, {
|
||
useState,
|
||
useEffect,
|
||
useMemo,
|
||
useCallback,
|
||
useRef,
|
||
startTransition,
|
||
} from "react";
|
||
import {
|
||
Box,
|
||
Typography,
|
||
ListItem,
|
||
ListItemButton,
|
||
ListItemText,
|
||
ListItemIcon,
|
||
Chip,
|
||
IconButton,
|
||
FormControl,
|
||
InputLabel,
|
||
Select,
|
||
MenuItem,
|
||
Tooltip,
|
||
Stack,
|
||
Divider,
|
||
InputBase,
|
||
CircularProgress,
|
||
Dialog,
|
||
DialogTitle,
|
||
DialogContent,
|
||
DialogActions,
|
||
Button,
|
||
Alert,
|
||
Drawer,
|
||
} from "@mui/material";
|
||
import {
|
||
Search,
|
||
MyLocation,
|
||
FilterList,
|
||
Clear,
|
||
DeviceHub,
|
||
TouchApp,
|
||
CleaningServices,
|
||
Sensors,
|
||
ChevronLeft,
|
||
ChevronRight,
|
||
} from "@mui/icons-material";
|
||
import { FixedSizeList } from "react-window";
|
||
import { useNotification } from "@refinedev/core";
|
||
import axios from "axios";
|
||
import { useGetIdentity } from "@refinedev/core";
|
||
import config, { NETWORK_NAME } from "@/config/config";
|
||
|
||
import { useMap } from "@app/OlMap/MapComponent";
|
||
import { GeoJSON } from "ol/format";
|
||
import { handleMapClickSelectFeatures as mapClickSelectFeatures } from "@/utils/mapQueryService";
|
||
import VectorLayer from "ol/layer/Vector";
|
||
import VectorSource from "ol/source/Vector";
|
||
import { Stroke, Style, Circle, Fill } from "ol/style";
|
||
import Feature from "ol/Feature";
|
||
import { Point } from "ol/geom";
|
||
import { getVectorContext } from "ol/render";
|
||
import { unByKey } from "ol/Observable";
|
||
import "dayjs/locale/zh-cn"; // 引入中文包
|
||
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";
|
||
name: "在线" | "离线" | "警告" | "错误";
|
||
}[] = [
|
||
{ value: "online", name: "在线" },
|
||
{ value: "offline", name: "离线" },
|
||
{ value: "warning", name: "警告" },
|
||
{ value: "error", name: "错误" },
|
||
];
|
||
interface SCADADevice {
|
||
id: string;
|
||
name: string;
|
||
transmission_frequency: string;
|
||
reliability: number;
|
||
type: string;
|
||
status: {
|
||
value: "online" | "offline" | "warning" | "error";
|
||
name: "在线" | "离线" | "警告" | "错误";
|
||
};
|
||
coordinates: [number, number];
|
||
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;
|
||
showCleaning?: boolean;
|
||
onCleanAllData?: (from: Date, to: Date) => void;
|
||
}
|
||
|
||
type IUser = {
|
||
id: number;
|
||
name: string;
|
||
};
|
||
|
||
const SCADADeviceList: React.FC<SCADADeviceListProps> = ({
|
||
devices = [],
|
||
onDeviceClick,
|
||
multiSelect = true,
|
||
selectedDeviceIds,
|
||
onSelectionChange,
|
||
showCleaning = false,
|
||
onCleanAllData,
|
||
}) => {
|
||
const [searchQuery, setSearchQuery] = useState<string>("");
|
||
const [selectedType, setSelectedType] = useState<string>("all");
|
||
const [selectedStatus, setSelectedStatus] = useState<string>("all");
|
||
const [selectedReliability, setSelectedReliability] = useState<string>("all");
|
||
const [isExpanded, setIsExpanded] = useState<boolean>(true);
|
||
const [isSelecting, setIsSelecting] = useState<boolean>(false);
|
||
const [internalSelection, setInternalSelection] = useState<string[]>([]);
|
||
const [pendingSelection, setPendingSelection] = useState<string[] | null>(
|
||
null
|
||
);
|
||
const [internalDevices, setInternalDevices] = useState<SCADADevice[]>([]);
|
||
const [loading, setLoading] = useState<boolean>(true);
|
||
const [inputValue, setInputValue] = useState<string>("");
|
||
|
||
const [highlightLayer, setHighlightLayer] =
|
||
useState<VectorLayer<VectorSource> | null>(null);
|
||
const [highlightFeatures, setHighlightFeatures] = useState<Feature[]>([]);
|
||
const blinkListenerKeyRef = useRef<any>(null);
|
||
|
||
const debounceTimerRef = useRef<NodeJS.Timeout | null>(null);
|
||
const filterBoxRef = useRef<HTMLDivElement | null>(null);
|
||
const [listHeight, setListHeight] = useState<number>(600);
|
||
|
||
// 清洗对话框状态
|
||
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) => {
|
||
if (debounceTimerRef.current) {
|
||
clearTimeout(debounceTimerRef.current);
|
||
}
|
||
// 根据输入长度调整防抖延迟：短输入延迟更长，长输入响应更快
|
||
const delay = value.length <= 2 ? 200 : 100;
|
||
debounceTimerRef.current = setTimeout(() => {
|
||
setSearchQuery(value);
|
||
}, delay);
|
||
}, []);
|
||
|
||
const activeSelection = selectedDeviceIds ?? internalSelection;
|
||
|
||
const map = useMap(); // 移到此处,确保在条件检查前调用
|
||
const { open } = useNotification();
|
||
const { data: user } = useGetIdentity<IUser>();
|
||
|
||
useEffect(() => {
|
||
if (selectedDeviceIds) {
|
||
setInternalSelection(selectedDeviceIds);
|
||
}
|
||
}, [selectedDeviceIds]);
|
||
|
||
// 添加 useEffect 来延迟调用 onSelectionChange，避免在渲染时触发父组件的 setState
|
||
useEffect(() => {
|
||
if (pendingSelection !== null) {
|
||
onSelectionChange?.(pendingSelection);
|
||
setPendingSelection(null);
|
||
}
|
||
}, [pendingSelection, onSelectionChange]);
|
||
|
||
// 初始化 SCADA 设备列表
|
||
useEffect(() => {
|
||
const fetchScadaDevices = async () => {
|
||
setLoading(true);
|
||
try {
|
||
const url = `${config.MAP_URL}/${config.MAP_WORKSPACE}/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=${config.MAP_WORKSPACE}:geo_scada&outputFormat=application/json`;
|
||
const response = await fetch(url);
|
||
if (!response.ok) throw new Error("Failed to fetch SCADA devices");
|
||
const json = await response.json();
|
||
const features = new GeoJSON().readFeatures(json);
|
||
const data = features.map((feature) => ({
|
||
id: feature.get("id") || feature.getId(),
|
||
name: feature.get("id") || feature.getId(),
|
||
transmission_frequency: feature.get("transmission_frequency"),
|
||
reliability: feature.get("reliability"),
|
||
type: feature.get("type") === "pipe_flow" ? "流量" : "压力",
|
||
status: STATUS_OPTIONS[Math.floor(Math.random() * 4)],
|
||
coordinates: (feature.getGeometry() as Point)?.getCoordinates() as [
|
||
number,
|
||
number
|
||
],
|
||
properties: feature.getProperties(),
|
||
}));
|
||
setInternalDevices(data);
|
||
} catch (error) {
|
||
console.error("Error fetching SCADA devices:", error);
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
};
|
||
fetchScadaDevices();
|
||
}, []);
|
||
|
||
const effectiveDevices = devices.length > 0 ? devices : internalDevices;
|
||
|
||
// 获取设备类型列表
|
||
const deviceTypes = useMemo(() => {
|
||
const types = Array.from(
|
||
new Set(effectiveDevices.map((device) => device.type))
|
||
);
|
||
return types.sort();
|
||
}, [effectiveDevices]);
|
||
|
||
// 获取设备状态列表
|
||
const deviceStatuses = STATUS_OPTIONS;
|
||
|
||
// 可靠度文字映射
|
||
const getReliability = (reliability: number) => {
|
||
switch (reliability) {
|
||
case 1:
|
||
return "高";
|
||
case 2:
|
||
return "中";
|
||
case 3:
|
||
return "低";
|
||
default:
|
||
return "未知";
|
||
}
|
||
};
|
||
|
||
// 过滤设备列表
|
||
const filteredDevices = useMemo(() => {
|
||
return effectiveDevices.filter((device) => {
|
||
const searchLower = searchQuery.toLowerCase();
|
||
const nameLower = device.name.toLowerCase();
|
||
const idLower = device.id.toLowerCase();
|
||
|
||
const matchesSearch =
|
||
searchQuery === "" ||
|
||
nameLower.indexOf(searchLower) !== -1 ||
|
||
idLower.indexOf(searchLower) !== -1;
|
||
|
||
const matchesType =
|
||
selectedType === "all" || device.type === selectedType;
|
||
const matchesStatus =
|
||
selectedStatus === "all" || device.status.value === selectedStatus;
|
||
const matchesReliability =
|
||
selectedReliability === "all" ||
|
||
getReliability(device.reliability) === selectedReliability;
|
||
|
||
return (
|
||
matchesSearch && matchesType && matchesStatus && matchesReliability
|
||
);
|
||
});
|
||
}, [
|
||
effectiveDevices,
|
||
searchQuery,
|
||
selectedType,
|
||
selectedStatus,
|
||
selectedReliability,
|
||
]);
|
||
|
||
// 状态颜色映射
|
||
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 getTransmissionFrequency = (transmission_frequency: string) => {
|
||
// 传输频率文本：00:01:00，00:05:00，00:10:00，00:30:00，01:00:00，转换为分钟数
|
||
const parts = transmission_frequency.split(":");
|
||
if (parts.length !== 3) return transmission_frequency;
|
||
const hours = parseInt(parts[0], 10);
|
||
const minutes = parseInt(parts[1], 10);
|
||
const seconds = parseInt(parts[2], 10);
|
||
const totalMinutes = hours * 60 + minutes + (seconds >= 30 ? 1 : 0);
|
||
return totalMinutes;
|
||
};
|
||
|
||
// 处理设备点击
|
||
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) => {
|
||
if (!map) return;
|
||
|
||
// 缩放到设备位置
|
||
map.getView().fit(new Point(device.coordinates), {
|
||
maxZoom: 18,
|
||
duration: 1000,
|
||
});
|
||
|
||
// 创建闪烁效果
|
||
createBlinkingEffect(device.coordinates);
|
||
};
|
||
|
||
// 创建闪烁效果
|
||
const createBlinkingEffect = (coordinates: [number, number]) => {
|
||
if (!map || !highlightLayer) return;
|
||
|
||
// 清除之前的闪烁效果
|
||
if (blinkListenerKeyRef.current) {
|
||
unByKey(blinkListenerKeyRef.current);
|
||
blinkListenerKeyRef.current = null;
|
||
}
|
||
|
||
// 创建闪烁点要素
|
||
const blinkFeature = new Feature({
|
||
geometry: new Point(coordinates),
|
||
});
|
||
|
||
const duration = 2000; // 闪烁持续时间
|
||
const start = Date.now();
|
||
|
||
// 使用图层的 postrender 事件实现闪烁动画
|
||
const listenerKey = highlightLayer.on("postrender", (event) => {
|
||
const elapsed = Date.now() - start;
|
||
if (elapsed > duration) {
|
||
// 动画结束
|
||
unByKey(listenerKey);
|
||
blinkListenerKeyRef.current = null;
|
||
map.render(); // 最后渲染一次以清除效果
|
||
return;
|
||
}
|
||
|
||
const vectorContext = getVectorContext(event);
|
||
const flashGeom = blinkFeature.getGeometry();
|
||
|
||
if (!flashGeom) return;
|
||
|
||
// 计算闪烁效果
|
||
const progress = elapsed / duration;
|
||
// 使用正弦波创建脉冲效果,增加频率以产生更快的闪烁
|
||
const rawOpacity =
|
||
Math.abs(Math.sin(progress * Math.PI * 6)) * (1 - progress);
|
||
// 确保 opacity 不会太小,避免科学计数法导致的颜色解析错误
|
||
const opacity = Math.max(rawOpacity, 0.01);
|
||
const radius = 10 + (1 - progress) * 10; // 从20逐渐减小到10
|
||
|
||
// 当透明度太低时直接跳过渲染
|
||
if (opacity < 0.02) {
|
||
map.render();
|
||
return;
|
||
}
|
||
|
||
// 绘制外圈（黄色光晕）
|
||
vectorContext.setStyle(
|
||
new Style({
|
||
image: new Circle({
|
||
radius: radius * 1.5,
|
||
fill: new Fill({
|
||
color: `rgba(255, 255, 0, ${(opacity * 0.3).toFixed(3)})`,
|
||
}),
|
||
}),
|
||
})
|
||
);
|
||
vectorContext.drawGeometry(flashGeom);
|
||
|
||
// 绘制中圈（亮黄色）
|
||
vectorContext.setStyle(
|
||
new Style({
|
||
image: new Circle({
|
||
radius: radius,
|
||
fill: new Fill({
|
||
color: `rgba(255, 255, 0, ${(opacity * 0.6).toFixed(3)})`,
|
||
}),
|
||
stroke: new Stroke({
|
||
color: `rgba(255, 200, 0, ${opacity.toFixed(3)})`,
|
||
width: 2,
|
||
}),
|
||
}),
|
||
})
|
||
);
|
||
vectorContext.drawGeometry(flashGeom);
|
||
|
||
// 绘制内核（白色中心）
|
||
vectorContext.setStyle(
|
||
new Style({
|
||
image: new Circle({
|
||
radius: radius * 0.3,
|
||
fill: new Fill({
|
||
color: `rgba(255, 255, 255, ${opacity.toFixed(3)})`,
|
||
}),
|
||
}),
|
||
})
|
||
);
|
||
vectorContext.drawGeometry(flashGeom);
|
||
|
||
// 继续渲染下一帧
|
||
map.render();
|
||
});
|
||
|
||
blinkListenerKeyRef.current = listenerKey;
|
||
};
|
||
|
||
// 清除搜索
|
||
const handleClearSearch = useCallback(() => {
|
||
setInputValue("");
|
||
startTransition(() => {
|
||
setSearchQuery("");
|
||
});
|
||
}, []);
|
||
|
||
// 重置所有筛选条件
|
||
const handleResetFilters = useCallback(() => {
|
||
setInputValue("");
|
||
startTransition(() => {
|
||
setSearchQuery("");
|
||
setSelectedType("all");
|
||
setSelectedStatus("all");
|
||
setSelectedReliability("all");
|
||
});
|
||
}, []);
|
||
|
||
// 清除选择
|
||
const handleClearSelection = useCallback(() => {
|
||
setInternalSelection([]);
|
||
setHighlightFeatures([]);
|
||
setPendingSelection([]);
|
||
}, []);
|
||
|
||
// 地图点击选择 SCADA 设备事件处理函数
|
||
const handleMapClickSelectFeatures = useCallback(
|
||
async (event: { coordinate: number[] }) => {
|
||
if (!map) return;
|
||
const feature = await mapClickSelectFeatures(event, map);
|
||
const layer = feature?.getId()?.toString().split(".")[0];
|
||
|
||
if (!feature) return;
|
||
if (layer !== "geo_scada_mat" && layer !== "geo_scada") {
|
||
open?.({
|
||
type: "error",
|
||
message: "请选择 SCADA 设备。",
|
||
});
|
||
return;
|
||
}
|
||
|
||
const featureId = feature.getProperties().id;
|
||
|
||
// 在设备列表中查找对应的设备
|
||
const device = effectiveDevices.find((d) => d.id === featureId);
|
||
if (!device) {
|
||
open?.({
|
||
type: "error",
|
||
message: "未找到对应的 SCADA 设备。",
|
||
});
|
||
return;
|
||
}
|
||
|
||
// 更新选择状态
|
||
setInternalSelection((prev) => {
|
||
const exists = prev.includes(featureId);
|
||
const nextSelection = multiSelect
|
||
? exists
|
||
? prev.filter((id) => id !== featureId)
|
||
: [...prev, featureId]
|
||
: exists
|
||
? []
|
||
: [featureId];
|
||
|
||
setPendingSelection(nextSelection);
|
||
return nextSelection;
|
||
});
|
||
|
||
// 更新高亮要素
|
||
setHighlightFeatures((prev) => {
|
||
const existingIndex = prev.findIndex(
|
||
(f) => f.getProperties().id === featureId
|
||
);
|
||
if (existingIndex !== -1) {
|
||
// 如果已存在,移除
|
||
return prev.filter((_, i) => i !== existingIndex);
|
||
} else {
|
||
// 如果不存在,添加
|
||
return [...prev, feature];
|
||
}
|
||
});
|
||
},
|
||
[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(async () => {
|
||
const error = validateTimeRange(cleanStartTime, cleanEndTime);
|
||
if (error) {
|
||
setTimeRangeError(error);
|
||
return;
|
||
}
|
||
|
||
// 获取所有设备ID
|
||
const allDeviceIds = internalDevices.map((d) => d.id);
|
||
if (allDeviceIds.length === 0) {
|
||
open?.({
|
||
type: "error",
|
||
message: "无设备可清洗",
|
||
});
|
||
return;
|
||
}
|
||
|
||
if (!user || !user.name) {
|
||
open?.({
|
||
type: "error",
|
||
message: "用户信息无效，请重新登录",
|
||
});
|
||
return;
|
||
}
|
||
|
||
try {
|
||
const startTime = dayjs(cleanStartTime).toISOString();
|
||
const endTime = dayjs(cleanEndTime).toISOString();
|
||
|
||
// 调用后端清洗接口
|
||
const response = await axios.post(
|
||
`${config.BACKEND_URL}/timescaledb/composite/clean-scada?device_ids=all&start_time=${startTime}&end_time=${endTime}`
|
||
);
|
||
|
||
// 处理成功响应
|
||
if (response.data === "success" || response.data?.success === true) {
|
||
open?.({
|
||
type: "success",
|
||
message: "全部数据清洗成功",
|
||
description: `已完成 ${allDeviceIds.length} 个设备的数据清洗`,
|
||
});
|
||
|
||
// 如果父组件提供了回调，也调用它
|
||
onCleanAllData?.(cleanStartTime.toDate(), cleanEndTime.toDate());
|
||
} else {
|
||
throw new Error(response.data?.message || "清洗失败");
|
||
}
|
||
} catch (err: any) {
|
||
console.error("[SCADADeviceList] 数据清洗失败:", err);
|
||
open?.({
|
||
type: "error",
|
||
message: "数据清洗失败",
|
||
description: err.response?.data?.message || err.message || "未知错误",
|
||
});
|
||
}
|
||
|
||
handleCleanDialogClose();
|
||
}, [
|
||
cleanStartTime,
|
||
cleanEndTime,
|
||
validateTimeRange,
|
||
internalDevices,
|
||
user,
|
||
open,
|
||
onCleanAllData,
|
||
handleCleanDialogClose,
|
||
]);
|
||
|
||
// 开始选择 SCADA 设备
|
||
const handleStartSelection = useCallback(() => {
|
||
if (!map) return;
|
||
setIsSelecting(true);
|
||
// 注册点击事件
|
||
map.on("click", handleMapClickSelectFeatures);
|
||
}, [map, handleMapClickSelectFeatures]);
|
||
|
||
// 结束选择 SCADA 设备
|
||
const handleEndSelection = useCallback(() => {
|
||
if (!map) return;
|
||
setIsSelecting(false);
|
||
// 移除点击事件
|
||
map.un("click", handleMapClickSelectFeatures);
|
||
}, [map, handleMapClickSelectFeatures]);
|
||
|
||
// 组件卸载时清理地图事件
|
||
useEffect(() => {
|
||
return () => {
|
||
if (map && isSelecting) {
|
||
map.un("click", handleMapClickSelectFeatures);
|
||
}
|
||
};
|
||
}, [map, isSelecting, handleMapClickSelectFeatures]);
|
||
|
||
// 初始化管道图层和高亮图层
|
||
useEffect(() => {
|
||
if (!map) return;
|
||
// 获取地图的目标容器
|
||
const SCADASelectedStyle = () => {
|
||
return new Style({
|
||
image: new Circle({
|
||
stroke: new Stroke({ color: "yellow", width: 2 }),
|
||
radius: 15,
|
||
}),
|
||
});
|
||
};
|
||
// 创建高亮图层
|
||
const highlightLayer = new VectorLayer({
|
||
source: new VectorSource(),
|
||
style: SCADASelectedStyle,
|
||
maxZoom: 24,
|
||
minZoom: 12,
|
||
properties: {
|
||
name: "SCADA 选中高亮",
|
||
value: "scada_selected_highlight",
|
||
},
|
||
});
|
||
|
||
map.addLayer(highlightLayer);
|
||
setHighlightLayer(highlightLayer);
|
||
|
||
return () => {
|
||
// 清除闪烁效果监听器
|
||
if (blinkListenerKeyRef.current) {
|
||
unByKey(blinkListenerKeyRef.current);
|
||
blinkListenerKeyRef.current = null;
|
||
}
|
||
map.removeLayer(highlightLayer);
|
||
};
|
||
}, [map]);
|
||
|
||
// 高亮要素的函数
|
||
useEffect(() => {
|
||
if (!highlightLayer) {
|
||
return;
|
||
}
|
||
const source = highlightLayer.getSource();
|
||
if (!source) {
|
||
return;
|
||
}
|
||
// 清除之前的高亮
|
||
source.clear();
|
||
// 添加新的高亮要素
|
||
highlightFeatures.forEach((feature) => {
|
||
if (feature instanceof Feature) {
|
||
source.addFeature(feature);
|
||
}
|
||
});
|
||
}, [selectedDeviceIds, highlightFeatures]);
|
||
// 清理定时器
|
||
useEffect(() => {
|
||
return () => {
|
||
if (debounceTimerRef.current) {
|
||
clearTimeout(debounceTimerRef.current);
|
||
}
|
||
};
|
||
}, []);
|
||
|
||
// 动态计算列表高度
|
||
useEffect(() => {
|
||
const updateListHeight = () => {
|
||
if (filterBoxRef.current) {
|
||
const drawerHeight = 860; // Drawer 总高度
|
||
const headerHeight = 73; // 头部高度（估算）
|
||
const dividerHeight = 1; // 分隔线高度
|
||
const filterBoxHeight = filterBoxRef.current.offsetHeight;
|
||
const availableHeight =
|
||
drawerHeight - headerHeight - filterBoxHeight - dividerHeight - 8; // 减去一些边距
|
||
setListHeight(Math.max(availableHeight, 260)); // 最小高度 260
|
||
}
|
||
};
|
||
|
||
updateListHeight();
|
||
// 使用 ResizeObserver 监听筛选框高度变化
|
||
const resizeObserver = new ResizeObserver(updateListHeight);
|
||
if (filterBoxRef.current) {
|
||
resizeObserver.observe(filterBoxRef.current);
|
||
}
|
||
|
||
return () => {
|
||
resizeObserver.disconnect();
|
||
};
|
||
}, [
|
||
activeSelection.length,
|
||
searchQuery,
|
||
selectedType,
|
||
selectedStatus,
|
||
selectedReliability,
|
||
showCleaning,
|
||
]);
|
||
|
||
return (
|
||
<>
|
||
{/* 收起时的触发按钮 */}
|
||
{!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 ? 360 : 0,
|
||
flexShrink: 0,
|
||
"& .MuiDrawer-paper": {
|
||
width: 360,
|
||
height: "860px",
|
||
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={{
|
||
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}>
|
||
<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>
|
||
<Chip
|
||
label={filteredDevices.length}
|
||
size="small"
|
||
sx={{
|
||
backgroundColor: "rgba(255, 255, 255, 0.2)",
|
||
color: "white",
|
||
fontWeight: "bold",
|
||
}}
|
||
/>
|
||
</Stack>
|
||
</Stack>
|
||
</Box>
|
||
|
||
{/* 搜索和筛选栏 */}
|
||
<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">
|
||
<InputBase
|
||
sx={{ ml: 1, flex: 1 }}
|
||
placeholder="搜索设备名称、ID..."
|
||
value={inputValue}
|
||
onChange={(e) => {
|
||
setInputValue(e.target.value);
|
||
debouncedSetSearchQuery(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: 80 }}>
|
||
<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: 80 }}>
|
||
<InputLabel>状态</InputLabel>
|
||
<Select
|
||
value={selectedStatus}
|
||
label="状态"
|
||
onChange={(e) => setSelectedStatus(e.target.value)}
|
||
>
|
||
<MenuItem value="all">全部</MenuItem>
|
||
{deviceStatuses.map((status) => (
|
||
<MenuItem key={status.value} value={status.value}>
|
||
{status.name}
|
||
</MenuItem>
|
||
))}
|
||
</Select>
|
||
</FormControl>
|
||
|
||
<FormControl size="small" sx={{ minWidth: 80 }}>
|
||
<InputLabel>可靠度</InputLabel>
|
||
<Select
|
||
value={selectedReliability}
|
||
label="可靠度"
|
||
onChange={(e) => setSelectedReliability(e.target.value)}
|
||
>
|
||
<MenuItem value="all">全部</MenuItem>
|
||
<MenuItem value="高">高</MenuItem>
|
||
<MenuItem value="中">中</MenuItem>
|
||
<MenuItem value="低">低</MenuItem>
|
||
</Select>
|
||
</FormControl>
|
||
|
||
<Tooltip title="重置筛选条件">
|
||
<IconButton onClick={handleResetFilters}>
|
||
<FilterList />
|
||
</IconButton>
|
||
</Tooltip>
|
||
</Stack>
|
||
|
||
{/* 筛选结果统计 */}
|
||
<Stack direction="row" alignItems="center" spacing={2}>
|
||
<Typography variant="caption" color="text.secondary">
|
||
共找到 {filteredDevices.length} 个设备
|
||
{devices.length !== filteredDevices.length &&
|
||
` (共 ${effectiveDevices.length} 个设备)`}
|
||
</Typography>
|
||
|
||
{/* 地图选择按钮 */}
|
||
<Tooltip
|
||
title={isSelecting ? "结束地图选择" : "从地图选择设备"}
|
||
>
|
||
<IconButton
|
||
size="small"
|
||
color={isSelecting ? "primary" : "default"}
|
||
onClick={
|
||
isSelecting ? handleEndSelection : handleStartSelection
|
||
}
|
||
sx={{
|
||
border: 1,
|
||
borderColor: isSelecting ? "primary.main" : "divider",
|
||
backgroundColor: isSelecting
|
||
? "primary.50"
|
||
: "transparent",
|
||
"&:hover": {
|
||
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>
|
||
|
||
{/* 清除选择按钮 */}
|
||
{activeSelection.length > 0 && (
|
||
<Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
|
||
<Chip
|
||
label={`已选择 ${activeSelection.length} 个设备`}
|
||
color="primary"
|
||
size="small"
|
||
onDelete={handleClearSelection}
|
||
deleteIcon={<Clear />}
|
||
sx={{ fontWeight: "medium" }}
|
||
/>
|
||
</Box>
|
||
)}
|
||
</Stack>
|
||
</Box>
|
||
|
||
<Divider />
|
||
|
||
{/* 设备列表 */}
|
||
<Box sx={{ flex: 1, overflow: "hidden" }}>
|
||
{loading ? (
|
||
<Box
|
||
sx={{
|
||
display: "flex",
|
||
justifyContent: "center",
|
||
alignItems: "center",
|
||
height: 200,
|
||
}}
|
||
>
|
||
<CircularProgress />
|
||
</Box>
|
||
) : 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>
|
||
) : (
|
||
<FixedSizeList
|
||
height={listHeight}
|
||
itemCount={filteredDevices.length}
|
||
itemSize={92}
|
||
width="100%"
|
||
>
|
||
{({
|
||
index,
|
||
style,
|
||
}: {
|
||
index: number;
|
||
style: React.CSSProperties;
|
||
}) => {
|
||
const device = filteredDevices[index];
|
||
return (
|
||
<div style={style}>
|
||
<ListItem disablePadding>
|
||
<ListItemButton
|
||
selected={activeSelection.includes(device.id)}
|
||
onClick={(event) => handleDeviceClick(device, event)}
|
||
sx={{
|
||
"&.Mui-selected": {
|
||
backgroundColor: "primary.50",
|
||
borderColor: "primary.main",
|
||
},
|
||
"&:hover": {
|
||
backgroundColor: "grey.50",
|
||
},
|
||
}}
|
||
>
|
||
<ListItemIcon sx={{ minWidth: 36 }}>
|
||
<Typography
|
||
variant="caption"
|
||
sx={{
|
||
color: `${getStatusColor(
|
||
device.status.value
|
||
)}.main`,
|
||
fontWeight: "bold",
|
||
fontSize: 16,
|
||
}}
|
||
>
|
||
{getStatusIcon(device.status.value)}
|
||
</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 }}
|
||
/>
|
||
<Chip
|
||
label={`可靠度: ${getReliability(
|
||
device.reliability
|
||
)}`}
|
||
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"
|
||
>
|
||
传输频率:{" "}
|
||
{getTransmissionFrequency(
|
||
device.transmission_frequency
|
||
)}{" "}
|
||
分钟
|
||
</Typography>
|
||
</Stack>
|
||
}
|
||
slotProps={{
|
||
secondary: {
|
||
component: "div", // 使其支持多行
|
||
},
|
||
}}
|
||
/>
|
||
|
||
<Tooltip title="缩放到设备位置">
|
||
<IconButton
|
||
size="small"
|
||
onClick={(event) => {
|
||
event.stopPropagation();
|
||
handleZoomToDevice(device);
|
||
}}
|
||
sx={{
|
||
ml: 1,
|
||
color: "primary.main",
|
||
"&:hover": {
|
||
backgroundColor: "primary.50",
|
||
},
|
||
}}
|
||
>
|
||
<MyLocation fontSize="small" />
|
||
</IconButton>
|
||
</Tooltip>
|
||
</ListItemButton>
|
||
</ListItem>
|
||
{index < filteredDevices.length - 1 && (
|
||
<Divider variant="inset" />
|
||
)}
|
||
</div>
|
||
);
|
||
}}
|
||
</FixedSizeList>
|
||
)}
|
||
</Box>
|
||
</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}
|
||
adapterLocale="zh-cn"
|
||
>
|
||
<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>
|
||
</>
|
||
);
|
||
};
|
||
|
||
export default SCADADeviceList;
|