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

实现 SCADA 设备列表数据对接；监测点优化，实现传感器定位；爆管分析，属性面板新增计算属性的获取；更新部分图标；爆管分析定位，更改时间轴样式。

Browse Source
This commit is contained in:
JIANG
2025-10-29 16:39:23 +08:00
parent 86e7349c85
commit a5954624a0
22 changed files with 474 additions and 170 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,10 +1,16 @@
"use client";
import React, { useState, useEffect, useMemo } from "react";
import React, {
useState,
useEffect,
useMemo,
useCallback,
useRef,
startTransition,
} from "react";
import {
Box,
Paper,
TextField,
Typography,
List,
ListItem,
@@ -14,7 +20,6 @@ import {
Chip,
IconButton,
Collapse,
InputAdornment,
FormControl,
InputLabel,
Select,
@@ -23,6 +28,7 @@ import {
Stack,
Divider,
InputBase,
CircularProgress,
} from "@mui/material";
import {
Search,
@@ -31,17 +37,19 @@ import {
ExpandLess,
FilterList,
Clear,
Visibility,
VisibilityOff,
DeviceHub,
} from "@mui/icons-material";
import { useMap } from "@app/OlMap/MapComponent";
import { GeoJSON } from "ol/format";
import { Point } from "ol/geom";
import config from "@/config/config";
interface SCADADevice {
id: string;
name: string;
type: string;
coordinates: [number, number];
status: "online" | "offline" | "warning" | "error";
status: "在线" | "离线" | "警告" | "错误";
properties?: Record<string, any>;
}
@@ -57,7 +65,6 @@ interface SCADADeviceListProps {
const SCADADeviceList: React.FC<SCADADeviceListProps> = ({
devices = [],
onDeviceClick,
onZoomToDevice,
multiSelect = true,
selectedDeviceIds,
onSelectionChange,
@@ -70,9 +77,28 @@ const SCADADeviceList: React.FC<SCADADeviceListProps> = ({
const [pendingSelection, setPendingSelection] = useState<string[] | null>(
null
);
const [internalDevices, setInternalDevices] = useState<SCADADevice[]>([]);
const [loading, setLoading] = useState<boolean>(true);
const [inputValue, setInputValue] = useState<string>("");
const debounceTimerRef = useRef<NodeJS.Timeout | null>(null);
// 防抖更新搜索查询
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(); // 移到此处，确保在条件检查前调用
useEffect(() => {
if (selectedDeviceIds) {
setInternalSelection(selectedDeviceIds);
@@ -87,28 +113,87 @@ const SCADADeviceList: React.FC<SCADADeviceListProps> = ({
}
}, [pendingSelection, onSelectionChange]);
// 初始化 SCADA 设备列表
useEffect(() => {
const fetchScadaDevices = async () => {
setLoading(true);
try {
const url = `${config.mapUrl}/TJWater/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=TJWater: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(),
type: feature.get("type") === "pipe_flow" ? "流量" : "压力",
status: ["在线", "离线", "警告", "错误"][
Math.floor(Math.random() * 4)
] as "在线" | "离线" | "警告" | "错误",
coordinates: (feature.getGeometry() as Point)?.getCoordinates() as [
number,
number
],
properties: feature.getProperties(),
}));
setInternalDevices(data);
console.log("Fetched SCADA devices:", 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(devices.map((device) => device.type)));
const types = Array.from(
new Set(effectiveDevices.map((device) => device.type))
);
return types.sort();
}, [devices]);
}, [effectiveDevices]);
// 获取设备状态列表
const deviceStatuses = useMemo(() => {
const statuses = Array.from(
new Set(devices.map((device) => device.status))
new Set(effectiveDevices.map((device) => device.status))
);
return statuses.sort();
}, [devices]);
}, [effectiveDevices]);
// 创建设备索引 Map，使用设备 ID 作为键
const deviceIndex = useMemo(() => {
const index = new Map<string, SCADADevice>();
effectiveDevices.forEach((device) => {
index.set(device.id, device);
});
return index;
}, [effectiveDevices]);
// 过滤设备列表
const filteredDevices = useMemo(() => {
return devices.filter((device) => {
if (
searchQuery === "" &&
selectedType === "all" &&
selectedStatus === "all"
) {
return effectiveDevices;
}
const searchLower = searchQuery.toLowerCase();
return effectiveDevices.filter((device) => {
if (searchQuery === "") return true;
const nameLower = device.name.toLowerCase();
const idLower = device.id.toLowerCase();
const matchesSearch =
searchQuery === "" ||
device.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
device.id.toLowerCase().includes(searchQuery.toLowerCase()) ||
device.type.toLowerCase().includes(searchQuery.toLowerCase());
nameLower.indexOf(searchLower) !== -1 ||
idLower.indexOf(searchLower) !== -1;
const matchesType =
selectedType === "all" || device.type === selectedType;
@@ -117,7 +202,7 @@ const SCADADeviceList: React.FC<SCADADeviceListProps> = ({
return matchesSearch && matchesType && matchesStatus;
});
}, [devices, searchQuery, selectedType, selectedStatus]);
}, [effectiveDevices, searchQuery, selectedType, selectedStatus]);
// 状态颜色映射
const getStatusColor = (status: string) => {
@@ -171,22 +256,38 @@ const SCADADeviceList: React.FC<SCADADeviceListProps> = ({
};
// 处理缩放到设备
const handleZoomToDevice = (device: SCADADevice, event: React.MouseEvent) => {
event.stopPropagation();
onZoomToDevice?.(device.coordinates);
const handleZoomToDevice = (device: SCADADevice) => {
map
?.getView()
.fit(new Point(device.coordinates), { maxZoom: 15, duration: 1000 });
};
// 清除搜索
const handleClearSearch = () => {
setSearchQuery("");
};
const handleClearSearch = useCallback(() => {
setInputValue("");
startTransition(() => {
setSearchQuery("");
});
}, []);
// 重置所有筛选条件
const handleResetFilters = () => {
setSearchQuery("");
setSelectedType("all");
setSelectedStatus("all");
};
const handleResetFilters = useCallback(() => {
setInputValue("");
startTransition(() => {
setSearchQuery("");
setSelectedType("all");
setSelectedStatus("all");
});
}, []);
// 清理定时器
useEffect(() => {
return () => {
if (debounceTimerRef.current) {
clearTimeout(debounceTimerRef.current);
}
};
}, []);
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">
@@ -242,9 +343,12 @@ const SCADADeviceList: React.FC<SCADADeviceListProps> = ({
<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)}
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">
@@ -310,7 +414,7 @@ const SCADADeviceList: React.FC<SCADADeviceListProps> = ({
<Typography variant="caption" color="text.secondary">
共找到 {filteredDevices.length} 个设备
{devices.length !== filteredDevices.length &&
` (共 ${devices.length} 个设备)`}
` (共 ${effectiveDevices.length} 个设备)`}
</Typography>
</Stack>
</Box>
@@ -319,7 +423,18 @@ const SCADADeviceList: React.FC<SCADADeviceListProps> = ({
{/* 设备列表 */}
<Box sx={{ flex: 1, overflow: "auto", maxHeight: 400 }}>
{filteredDevices.length === 0 ? (
{loading ? (
<Box
sx={{
display: "flex",
justifyContent: "center",
alignItems: "center",
height: 200,
}}
>
<CircularProgress />
</Box>
) : filteredDevices.length === 0 ? (
<Box
sx={{
p: 4,
@@ -416,7 +531,10 @@ const SCADADeviceList: React.FC<SCADADeviceListProps> = ({
<Tooltip title="缩放到设备位置">
<IconButton
size="small"
onClick={(e) => handleZoomToDevice(device, e)}
onClick={(event) => {
event.stopPropagation();
handleZoomToDevice(device);
}}
sx={{
ml: 1,
color: "primary.main",