SCADA 面板数据实现前后端对接
This commit is contained in:
@@ -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}
|
||||
/>
|
||||
|
||||
@@ -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}
|
||||
/>
|
||||
|
||||
Reference in New Issue
Block a user