SCADA 面板数据实现前后端对接

This commit is contained in:
JIANG
2025-10-30 17:35:27 +08:00
parent 265ecdc795
commit fe797c1bf3
4 changed files with 312 additions and 196 deletions

View File

@@ -1,6 +1,6 @@
"use client";
import { useCallback, useMemo, useState } from "react";
import { useCallback, useState } from "react";
import MapComponent from "@app/OlMap/MapComponent";
import Timeline from "@app/OlMap/Controls/Timeline";
import MapToolbar from "@app/OlMap/Controls/Toolbar";
@@ -8,59 +8,10 @@ import MapToolbar from "@app/OlMap/Controls/Toolbar";
import SCADADeviceList from "@components/olmap/SCADADeviceList";
import SCADADataPanel from "@components/olmap/SCADADataPanel";
const mockDevices = [
{
id: "SCADA-001",
name: "SCADA-001",
type: "pressure",
coordinates: [121.4737, 31.2304] as [number, number],
status: "在线" as const,
},
{
id: "SCADA-002",
name: "SCADA-002",
type: "flow",
coordinates: [121.4807, 31.2204] as [number, number],
status: "警告" as const,
},
{
id: "SCADA-003",
name: "SCADA-003",
type: "pressure",
coordinates: [121.4607, 31.2354] as [number, number],
status: "离线" as const,
},
{
id: "SCADA-004",
name: "SCADA-004",
type: "demand",
coordinates: [121.4457, 31.2104] as [number, number],
status: "在线" as const,
},
{
id: "SCADA-005",
name: "SCADA-005",
type: "level",
coordinates: [121.4457, 31.2104] as [number, number],
status: "在线" as const,
},
];
export default function Home() {
const [selectedDeviceIds, setSelectedDeviceIds] = useState<string[]>([]);
const [panelVisible, setPanelVisible] = useState<boolean>(false);
const devices = useMemo(() => mockDevices, []);
const deviceLabels = useMemo(
() =>
devices.reduce<Record<string, string>>((acc, device) => {
acc[device.id] = device.name;
return acc;
}, {}),
[devices]
);
const handleSelectionChange = useCallback((ids: string[]) => {
setSelectedDeviceIds(ids);
setPanelVisible(ids.length > 0);
@@ -80,14 +31,12 @@ export default function Home() {
<MapToolbar queryType="realtime" />
<Timeline />
<SCADADeviceList
devices={[]}
onDeviceClick={handleDeviceClick}
onSelectionChange={handleSelectionChange}
selectedDeviceIds={selectedDeviceIds}
/>
<SCADADataPanel
deviceIds={selectedDeviceIds}
deviceLabels={deviceLabels}
visible={panelVisible}
onClose={handleClosePanel}
/>

View File

@@ -1,65 +1,16 @@
"use client";
import { useCallback, useMemo, useState } from "react";
import { useCallback, useState } from "react";
import MapComponent from "@app/OlMap/MapComponent";
import MapToolbar from "@app/OlMap/Controls/Toolbar";
import SCADADeviceList from "@components/olmap/SCADADeviceList";
import SCADADataPanel from "@components/olmap/SCADADataPanel";
const mockDevices = [
{
id: "SCADA-001",
name: "SCADA-001",
type: "pressure",
coordinates: [121.4737, 31.2304] as [number, number],
status: "在线" as const,
},
{
id: "SCADA-002",
name: "SCADA-002",
type: "flow",
coordinates: [121.4807, 31.2204] as [number, number],
status: "警告" as const,
},
{
id: "SCADA-003",
name: "SCADA-003",
type: "pressure",
coordinates: [121.4607, 31.2354] as [number, number],
status: "离线" as const,
},
{
id: "SCADA-004",
name: "SCADA-004",
type: "demand",
coordinates: [121.4457, 31.2104] as [number, number],
status: "在线" as const,
},
{
id: "SCADA-005",
name: "SCADA-005",
type: "level",
coordinates: [121.4457, 31.2104] as [number, number],
status: "在线" as const,
},
];
export default function Home() {
const [selectedDeviceIds, setSelectedDeviceIds] = useState<string[]>([]);
const [panelVisible, setPanelVisible] = useState<boolean>(false);
const devices = useMemo(() => mockDevices, []);
const deviceLabels = useMemo(
() =>
devices.reduce<Record<string, string>>((acc, device) => {
acc[device.id] = device.name;
return acc;
}, {}),
[devices]
);
const handleSelectionChange = useCallback((ids: string[]) => {
setSelectedDeviceIds(ids);
setPanelVisible(ids.length > 0);
@@ -78,14 +29,12 @@ export default function Home() {
<MapComponent>
<MapToolbar hiddenButtons={["style"]} />
<SCADADeviceList
devices={[]}
onDeviceClick={handleDeviceClick}
onSelectionChange={handleSelectionChange}
selectedDeviceIds={selectedDeviceIds}
/>
<SCADADataPanel
deviceIds={selectedDeviceIds}
deviceLabels={deviceLabels}
visible={panelVisible}
onClose={handleClosePanel}
/>