98 lines
2.4 KiB
TypeScript
98 lines
2.4 KiB
TypeScript
"use client";
|
|
|
|
import { useCallback, useMemo, useState } from "react";
|
|
import MapComponent from "@app/OlMap/MapComponent";
|
|
import Timeline from "@app/OlMap/Controls/Timeline";
|
|
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: "online" as const,
|
|
},
|
|
{
|
|
id: "SCADA-002",
|
|
name: "SCADA-002",
|
|
type: "flow",
|
|
coordinates: [121.4807, 31.2204] as [number, number],
|
|
status: "warning" as const,
|
|
},
|
|
{
|
|
id: "SCADA-003",
|
|
name: "SCADA-003",
|
|
type: "pressure",
|
|
coordinates: [121.4607, 31.2354] as [number, number],
|
|
status: "offline" as const,
|
|
},
|
|
{
|
|
id: "SCADA-004",
|
|
name: "SCADA-004",
|
|
type: "demand",
|
|
coordinates: [121.4457, 31.2104] as [number, number],
|
|
status: "online" as const,
|
|
},
|
|
{
|
|
id: "SCADA-005",
|
|
name: "SCADA-005",
|
|
type: "level",
|
|
coordinates: [121.4457, 31.2104] as [number, number],
|
|
status: "online" 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);
|
|
}, []);
|
|
|
|
const handleDeviceClick = useCallback(() => {
|
|
setPanelVisible(true);
|
|
}, []);
|
|
|
|
const handleClosePanel = useCallback(() => {
|
|
setPanelVisible(false);
|
|
}, []);
|
|
|
|
return (
|
|
<div className="relative w-full h-full overflow-hidden">
|
|
<MapComponent>
|
|
<MapToolbar />
|
|
<Timeline />
|
|
</MapComponent>
|
|
<SCADADeviceList
|
|
devices={devices}
|
|
onDeviceClick={handleDeviceClick}
|
|
onSelectionChange={handleSelectionChange}
|
|
selectedDeviceIds={selectedDeviceIds}
|
|
/>
|
|
<SCADADataPanel
|
|
deviceIds={selectedDeviceIds}
|
|
deviceLabels={deviceLabels}
|
|
visible={panelVisible}
|
|
onClose={handleClosePanel}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|