新增多个图层；更新图层图标；修复SCADA设备列表状态功能

src/components/olmap/SCADADeviceList.tsx

@@ -44,12 +44,25 @@ import { useMap } from "@app/OlMap/MapComponent";
 import { GeoJSON } from "ol/format";
 import { Point } from "ol/geom";
 import config from "@/config/config";
+
+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;
   type: string;
   coordinates: [number, number];
-  status: "在线" | "离线" | "警告" | "错误";
+  status: {
+    value: "online" | "offline" | "warning" | "error";
+    name: "在线" | "离线" | "警告" | "错误";
+  };
   properties?: Record<string, any>;
 }
 
@@ -127,9 +140,7 @@ const SCADADeviceList: React.FC<SCADADeviceListProps> = ({
           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 "在线" | "离线" | "警告" | "错误",
+          status: STATUS_OPTIONS[Math.floor(Math.random() * 4)],
           coordinates: (feature.getGeometry() as Point)?.getCoordinates() as [
             number,
             number
@@ -137,7 +148,6 @@ const SCADADeviceList: React.FC<SCADADeviceListProps> = ({
           properties: feature.getProperties(),
         }));
         setInternalDevices(data);
-        console.log("Fetched SCADA devices:", data);
       } catch (error) {
         console.error("Error fetching SCADA devices:", error);
       } finally {
@@ -158,12 +168,7 @@ const SCADADeviceList: React.FC<SCADADeviceListProps> = ({
   }, [effectiveDevices]);
 
   // 获取设备状态列表
-  const deviceStatuses = useMemo(() => {
-    const statuses = Array.from(
-      new Set(effectiveDevices.map((device) => device.status))
-    );
-    return statuses.sort();
-  }, [effectiveDevices]);
+  const deviceStatuses = STATUS_OPTIONS;
 
   // 创建设备索引 Map，使用设备 ID 作为键
   const deviceIndex = useMemo(() => {
@@ -176,29 +181,20 @@ const SCADADeviceList: React.FC<SCADADeviceListProps> = ({
 
   // 过滤设备列表
   const filteredDevices = useMemo(() => {
-    if (
-      searchQuery === "" &&
-      selectedType === "all" &&
-      selectedStatus === "all"
-    ) {
-      return effectiveDevices;
-    }
-
-    const searchLower = searchQuery.toLowerCase();
     return effectiveDevices.filter((device) => {
-      if (searchQuery === "") return true;
-
+      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 === selectedStatus;
+        selectedStatus === "all" || device.status.value === selectedStatus;
 
       return matchesSearch && matchesType && matchesStatus;
     });
@@ -396,8 +392,8 @@ const SCADADeviceList: React.FC<SCADADeviceListProps> = ({
                 >
                   <MenuItem value="all">全部状态</MenuItem>
                   {deviceStatuses.map((status) => (
-                    <MenuItem key={status} value={status}>
-                      {status}
+                    <MenuItem key={status.value} value={status.value}>
+                      {status.name}
                     </MenuItem>
                   ))}
                 </Select>
@@ -486,12 +482,14 @@ const SCADADeviceList: React.FC<SCADADeviceListProps> = ({
                           <Typography
                             variant="caption"
                             sx={{
-                              color: `${getStatusColor(device.status)}.main`,
+                              color: `${getStatusColor(
+                                device.status.value
+                              )}.main`,
                               fontWeight: "bold",
                               fontSize: 16,
                             }}
                           >
-                            {getStatusIcon(device.status)}
+                            {getStatusIcon(device.status.value)}
                           </Typography>
                         </ListItemIcon>