JIANG
39 lines
1.2 KiB
TypeScript
39 lines
1.2 KiB
TypeScript
"use client";
|
|
|
|
import { useCallback, useState } from "react";
|
|
import MapComponent from "@components/olmap/core/MapComponent";
|
|
import Timeline from "@components/olmap/core/Controls/Timeline";
|
|
import MapToolbar from "@components/olmap/core/Controls/Toolbar";
|
|
|
|
import SCADADeviceList from "@components/olmap/SCADA/SCADADeviceList";
|
|
import SCADADataPanel from "@components/olmap/SCADA/SCADADataPanel";
|
|
|
|
export default function Home() {
|
|
const [selectedDeviceIds, setSelectedDeviceIds] = useState<string[]>([]);
|
|
const [panelVisible, setPanelVisible] = useState<boolean>(false);
|
|
|
|
const handleSelectionChange = useCallback((ids: string[]) => {
|
|
setSelectedDeviceIds(ids);
|
|
setPanelVisible(ids.length > 0);
|
|
}, []);
|
|
|
|
const handleDeviceClick = useCallback(() => {
|
|
setPanelVisible(true);
|
|
}, []);
|
|
|
|
return (
|
|
<div className="relative w-full h-full overflow-hidden">
|
|
<MapComponent>
|
|
<MapToolbar queryType="realtime" />
|
|
<Timeline />
|
|
<SCADADeviceList
|
|
onDeviceClick={handleDeviceClick}
|
|
onSelectionChange={handleSelectionChange}
|
|
selectedDeviceIds={selectedDeviceIds}
|
|
/>
|
|
<SCADADataPanel deviceIds={selectedDeviceIds} visible={panelVisible} />
|
|
</MapComponent>
|
|
</div>
|
|
);
|
|
}
|