754 lines
21 KiB
TypeScript
754 lines
21 KiB
TypeScript
"use client";
|
||
|
||
import React, { useCallback, useEffect, useMemo, useState } from "react";
|
||
import {
|
||
Box,
|
||
Button,
|
||
Chip,
|
||
CircularProgress,
|
||
Divider,
|
||
IconButton,
|
||
Paper,
|
||
Stack,
|
||
Tab,
|
||
Tabs,
|
||
Tooltip,
|
||
Typography,
|
||
Collapse,
|
||
} from "@mui/material";
|
||
import {
|
||
Close,
|
||
Refresh,
|
||
ShowChart,
|
||
TableChart,
|
||
ExpandLess,
|
||
ExpandMore,
|
||
} from "@mui/icons-material";
|
||
import { DataGrid, GridColDef } from "@mui/x-data-grid";
|
||
import { LineChart } from "@mui/x-charts";
|
||
import dayjs, { Dayjs } from "dayjs";
|
||
import utc from "dayjs/plugin/utc";
|
||
import timezone from "dayjs/plugin/timezone";
|
||
import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
|
||
import { DateTimePicker, LocalizationProvider } from "@mui/x-date-pickers";
|
||
import clsx from "clsx";
|
||
import config from "@/config/config";
|
||
import { GeoJSON } from "ol/format";
|
||
|
||
dayjs.extend(utc);
|
||
dayjs.extend(timezone);
|
||
|
||
export interface TimeSeriesPoint {
|
||
/** ISO8601 时间戳 */
|
||
timestamp: string;
|
||
/** 每个设备对应的值 */
|
||
values: Record<string, number | null | undefined>;
|
||
}
|
||
|
||
export interface SCADADataPanelProps {
|
||
/** 选中的设备 ID 列表 */
|
||
deviceIds: string[];
|
||
/** 自定义数据获取器，默认使用后端 API */
|
||
fetchTimeSeriesData?: (
|
||
deviceIds: string[],
|
||
range: { from: Date; to: Date }
|
||
) => Promise<TimeSeriesPoint[]>;
|
||
/** 可选：控制浮窗显示 */
|
||
visible?: boolean;
|
||
/** 可选：关闭浮窗的回调 */
|
||
onClose?: () => void;
|
||
/** 默认展示的选项卡 */
|
||
defaultTab?: "chart" | "table";
|
||
/** Y 轴数值的小数位数 */
|
||
fractionDigits?: number;
|
||
}
|
||
|
||
type PanelTab = "chart" | "table";
|
||
|
||
type LoadingState = "idle" | "loading" | "success" | "error";
|
||
|
||
/**
|
||
* 从后端 API 获取 SCADA 数据
|
||
*/
|
||
const fetchFromBackend = async (
|
||
deviceIds: string[],
|
||
range: { from: Date; to: Date }
|
||
): Promise<TimeSeriesPoint[]> => {
|
||
if (deviceIds.length === 0) {
|
||
return [];
|
||
}
|
||
|
||
const ids = deviceIds.join(",");
|
||
const starttime = dayjs(range.from).format("YYYY-MM-DD HH:mm:ss");
|
||
const endtime = dayjs(range.to).format("YYYY-MM-DD HH:mm:ss");
|
||
|
||
const url = `${config.backendUrl}/querycleaningscadadatabydeviceidandtimerange/?ids=${ids}&starttime=${starttime}&endtime=${endtime}`;
|
||
|
||
try {
|
||
const response = await fetch(url);
|
||
if (!response.ok) {
|
||
throw new Error(`HTTP error! status: ${response.status}`);
|
||
}
|
||
const data = await response.json();
|
||
return transformBackendData(data, deviceIds);
|
||
} catch (error) {
|
||
console.error("[SCADADataPanel] 从后端获取数据失败:", error);
|
||
throw error;
|
||
}
|
||
};
|
||
|
||
/**
|
||
* 转换后端数据格式
|
||
* 根据实际后端返回的数据结构进行调整
|
||
*/
|
||
const transformBackendData = (
|
||
backendData: any,
|
||
deviceIds: string[]
|
||
): TimeSeriesPoint[] => {
|
||
// 处理后端返回的对象格式: { deviceId: [{time: "...", value: ...}] }
|
||
if (
|
||
backendData &&
|
||
typeof backendData === "object" &&
|
||
!Array.isArray(backendData)
|
||
) {
|
||
// 检查是否是设备ID为键的对象格式
|
||
const hasDeviceKeys = deviceIds.some((id) => id in backendData);
|
||
|
||
if (hasDeviceKeys) {
|
||
// 获取所有时间点的集合
|
||
const timeMap = new Map<string, Record<string, number | null>>();
|
||
|
||
deviceIds.forEach((deviceId) => {
|
||
const deviceData = backendData[deviceId];
|
||
if (Array.isArray(deviceData)) {
|
||
deviceData.forEach((item: any) => {
|
||
const timestamp = item.time || item.timestamp || item._time;
|
||
if (timestamp) {
|
||
if (!timeMap.has(timestamp)) {
|
||
timeMap.set(timestamp, {});
|
||
}
|
||
const values = timeMap.get(timestamp)!;
|
||
values[deviceId] =
|
||
typeof item.value === "number" ? item.value : null;
|
||
}
|
||
});
|
||
}
|
||
});
|
||
|
||
// 转换为 TimeSeriesPoint 数组并按时间排序
|
||
const result = Array.from(timeMap.entries()).map(
|
||
([timestamp, values]) => ({
|
||
timestamp,
|
||
values,
|
||
})
|
||
);
|
||
|
||
result.sort(
|
||
(a, b) =>
|
||
new Date(a.timestamp).getTime() - new Date(b.timestamp).getTime()
|
||
);
|
||
|
||
return result;
|
||
}
|
||
}
|
||
|
||
// 如果后端返回的是数组格式，每个元素包含时间戳和各设备值
|
||
if (Array.isArray(backendData)) {
|
||
return backendData.map((item: any) => ({
|
||
timestamp: item.timestamp || item.time || item._time,
|
||
values: deviceIds.reduce<Record<string, number | null>>((acc, id) => {
|
||
acc[id] = item[id] ?? item.values?.[id] ?? null;
|
||
return acc;
|
||
}, {}),
|
||
}));
|
||
}
|
||
|
||
// 如果后端返回的是对象格式，包含 timestamps 和 data
|
||
if (backendData && backendData.timestamps && backendData.data) {
|
||
return backendData.timestamps.map((timestamp: string, index: number) => {
|
||
const values = deviceIds.reduce<Record<string, number | null>>(
|
||
(acc, id) => {
|
||
acc[id] = backendData.data[id]?.[index] ?? null;
|
||
return acc;
|
||
},
|
||
{}
|
||
);
|
||
return { timestamp, values };
|
||
});
|
||
}
|
||
|
||
// 默认返回空数组
|
||
console.warn("[SCADADataPanel] 未知的后端数据格式:", backendData);
|
||
return [];
|
||
};
|
||
|
||
const defaultFetcher = fetchFromBackend;
|
||
|
||
const formatTimestamp = (timestamp: string) =>
|
||
dayjs(timestamp).tz("Asia/Shanghai").format("YYYY-MM-DD HH:mm");
|
||
|
||
const ensureValidRange = (
|
||
from: Dayjs,
|
||
to: Dayjs
|
||
): { from: Dayjs; to: Dayjs } => {
|
||
if (from.isAfter(to)) {
|
||
return { from: to, to: from };
|
||
}
|
||
return { from, to };
|
||
};
|
||
|
||
const buildDataset = (
|
||
points: TimeSeriesPoint[],
|
||
deviceIds: string[],
|
||
fractionDigits: number
|
||
) => {
|
||
return points.map((point) => {
|
||
const entry: Record<string, any> = {
|
||
time: dayjs(point.timestamp).toDate(),
|
||
label: formatTimestamp(point.timestamp),
|
||
};
|
||
|
||
deviceIds.forEach((id) => {
|
||
const value = point.values[id];
|
||
entry[id] =
|
||
typeof value === "number"
|
||
? Number.isFinite(value)
|
||
? parseFloat(value.toFixed(fractionDigits))
|
||
: null
|
||
: value ?? null;
|
||
});
|
||
|
||
return entry;
|
||
});
|
||
};
|
||
|
||
const emptyStateMessages: Record<
|
||
PanelTab,
|
||
{ title: string; subtitle: string }
|
||
> = {
|
||
chart: {
|
||
title: "暂无时序数据",
|
||
subtitle: "请选择设备并点击刷新来获取曲线",
|
||
},
|
||
table: {
|
||
title: "暂无表格数据",
|
||
subtitle: "请选择设备并点击刷新来获取记录",
|
||
},
|
||
};
|
||
|
||
const SCADADataPanel: React.FC<SCADADataPanelProps> = ({
|
||
deviceIds,
|
||
fetchTimeSeriesData = defaultFetcher,
|
||
visible = true,
|
||
onClose,
|
||
defaultTab = "chart",
|
||
fractionDigits = 2,
|
||
}) => {
|
||
const [from, setFrom] = useState<Dayjs>(() => dayjs().subtract(1, "day"));
|
||
const [to, setTo] = useState<Dayjs>(() => dayjs());
|
||
const [activeTab, setActiveTab] = useState<PanelTab>(defaultTab);
|
||
const [timeSeries, setTimeSeries] = useState<TimeSeriesPoint[]>([]);
|
||
const [loadingState, setLoadingState] = useState<LoadingState>("idle");
|
||
const [error, setError] = useState<string | null>(null);
|
||
const [isExpanded, setIsExpanded] = useState<boolean>(true);
|
||
const [deviceLabels, setDeviceLabels] = useState<Record<string, string>>({});
|
||
|
||
// 获取 SCADA 设备信息，生成 deviceLabels
|
||
useEffect(() => {
|
||
const fetchDeviceLabels = async () => {
|
||
try {
|
||
const url = `${config.mapUrl}/TJWater/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=TJWater:geo_scada&outputFormat=application/json`;
|
||
const response = await fetch(url);
|
||
if (!response.ok) return;
|
||
|
||
const json = await response.json();
|
||
const features = new GeoJSON().readFeatures(json);
|
||
|
||
const labels = features.reduce<Record<string, string>>(
|
||
(acc, feature) => {
|
||
const id = feature.get("id") || feature.getId();
|
||
const name = feature.get("name") || id;
|
||
acc[id] = name;
|
||
return acc;
|
||
},
|
||
{}
|
||
);
|
||
|
||
setDeviceLabels(labels);
|
||
} catch (error) {
|
||
console.error("[SCADADataPanel] 获取设备标签失败:", error);
|
||
}
|
||
};
|
||
|
||
fetchDeviceLabels();
|
||
}, []);
|
||
|
||
useEffect(() => {
|
||
setActiveTab(defaultTab);
|
||
}, [defaultTab]);
|
||
|
||
const normalizedRange = useMemo(() => ensureValidRange(from, to), [from, to]);
|
||
|
||
const hasDevices = deviceIds.length > 0;
|
||
const hasData = timeSeries.length > 0;
|
||
|
||
const dataset = useMemo(
|
||
() => buildDataset(timeSeries, deviceIds, fractionDigits),
|
||
[timeSeries, deviceIds, fractionDigits]
|
||
);
|
||
|
||
const handleFetch = useCallback(
|
||
async (reason: string) => {
|
||
if (!hasDevices) {
|
||
setTimeSeries([]);
|
||
setLoadingState("idle");
|
||
setError(null);
|
||
return;
|
||
}
|
||
|
||
setLoadingState("loading");
|
||
setError(null);
|
||
|
||
try {
|
||
const { from: rangeFrom, to: rangeTo } = normalizedRange;
|
||
const result = await fetchTimeSeriesData(deviceIds, {
|
||
from: rangeFrom.toDate(),
|
||
to: rangeTo.toDate(),
|
||
});
|
||
setTimeSeries(result);
|
||
setLoadingState("success");
|
||
console.debug(
|
||
`[SCADADataPanel] 数据刷新成功 (${reason})，共 ${result.length} 条记录。`
|
||
);
|
||
} catch (err) {
|
||
console.error("[SCADADataPanel] 获取时序数据失败", err);
|
||
setError(err instanceof Error ? err.message : "未知错误");
|
||
setLoadingState("error");
|
||
}
|
||
},
|
||
[deviceIds, fetchTimeSeriesData, hasDevices, normalizedRange]
|
||
);
|
||
|
||
// 设备变化时自动查询
|
||
useEffect(() => {
|
||
if (hasDevices) {
|
||
handleFetch("device-change");
|
||
} else {
|
||
setTimeSeries([]);
|
||
}
|
||
}, [deviceIds.join(","), hasDevices]);
|
||
|
||
const columns: GridColDef[] = useMemo(() => {
|
||
const base: GridColDef[] = [
|
||
{
|
||
field: "label",
|
||
headerName: "时间",
|
||
minWidth: 180,
|
||
flex: 1,
|
||
},
|
||
];
|
||
|
||
const dynamic = deviceIds.map<GridColDef>((id) => ({
|
||
field: id,
|
||
headerName: deviceLabels?.[id] ?? id,
|
||
minWidth: 140,
|
||
flex: 1,
|
||
valueFormatter: (value: any) => {
|
||
if (value === null || value === undefined) return "--";
|
||
if (Number.isFinite(Number(value))) {
|
||
return Number(value).toFixed(fractionDigits);
|
||
}
|
||
return String(value);
|
||
},
|
||
}));
|
||
|
||
return [...base, ...dynamic];
|
||
}, [deviceIds, deviceLabels, fractionDigits]);
|
||
|
||
const rows = useMemo(
|
||
() =>
|
||
dataset.map((item, index) => ({
|
||
id: `${
|
||
item.time instanceof Date ? item.time.getTime() : index
|
||
}-${index}`,
|
||
...item,
|
||
})),
|
||
[dataset]
|
||
);
|
||
|
||
const renderEmpty = () => {
|
||
const message = emptyStateMessages[activeTab];
|
||
return (
|
||
<Box
|
||
sx={{
|
||
flex: 1,
|
||
display: "flex",
|
||
flexDirection: "column",
|
||
alignItems: "center",
|
||
justifyContent: "center",
|
||
py: 8,
|
||
color: "text.secondary",
|
||
height: 420,
|
||
}}
|
||
>
|
||
<ShowChart sx={{ fontSize: 64, mb: 2, opacity: 0.3 }} />
|
||
<Typography variant="h6" gutterBottom sx={{ fontWeight: 500 }}>
|
||
{message.title}
|
||
</Typography>
|
||
<Typography variant="body2" color="text.secondary">
|
||
{message.subtitle}
|
||
</Typography>
|
||
</Box>
|
||
);
|
||
};
|
||
|
||
const renderChart = () => {
|
||
if (!hasData) return renderEmpty();
|
||
|
||
// 为每个设备生成独特的颜色和样式
|
||
const colors = [
|
||
"#1976d2", // 蓝色
|
||
"#dc004e", // 粉红色
|
||
"#ff9800", // 橙色
|
||
"#4caf50", // 绿色
|
||
"#9c27b0", // 紫色
|
||
"#00bcd4", // 青色
|
||
"#f44336", // 红色
|
||
"#8bc34a", // 浅绿色
|
||
"#ff5722", // 深橙色
|
||
"#3f51b5", // 靛蓝色
|
||
];
|
||
|
||
return (
|
||
<Box sx={{ width: "100%", height: 420 }}>
|
||
<LineChart
|
||
dataset={dataset}
|
||
height={420}
|
||
margin={{ left: 70, right: 40, top: 30, bottom: 90 }}
|
||
xAxis={[
|
||
{
|
||
dataKey: "time",
|
||
scaleType: "time",
|
||
valueFormatter: (value) =>
|
||
value instanceof Date
|
||
? dayjs(value).format("MM-DD HH:mm")
|
||
: String(value),
|
||
tickLabelStyle: {
|
||
angle: -45,
|
||
textAnchor: "end",
|
||
fontSize: 11,
|
||
fill: "#666",
|
||
},
|
||
},
|
||
]}
|
||
yAxis={[
|
||
{
|
||
label: "数值",
|
||
labelStyle: {
|
||
fontSize: 13,
|
||
fill: "#333",
|
||
fontWeight: 500,
|
||
},
|
||
tickLabelStyle: {
|
||
fontSize: 11,
|
||
fill: "#666",
|
||
},
|
||
},
|
||
]}
|
||
series={deviceIds.map((id, index) => ({
|
||
dataKey: id,
|
||
label: deviceLabels?.[id] ?? id,
|
||
showMark: dataset.length < 50, // 数据点少时显示标记
|
||
curve: "catmullRom", // 使用平滑曲线
|
||
color: colors[index % colors.length],
|
||
valueFormatter: (value: number | null) =>
|
||
value !== null ? value.toFixed(fractionDigits) : "--",
|
||
area: false,
|
||
stack: undefined,
|
||
}))}
|
||
grid={{ vertical: true, horizontal: true }}
|
||
sx={{
|
||
"& .MuiLineElement-root": {
|
||
strokeWidth: 2.5,
|
||
strokeLinecap: "round",
|
||
strokeLinejoin: "round",
|
||
},
|
||
"& .MuiMarkElement-root": {
|
||
scale: "0.8",
|
||
strokeWidth: 2,
|
||
},
|
||
"& .MuiChartsAxis-line": {
|
||
stroke: "#e0e0e0",
|
||
strokeWidth: 1,
|
||
},
|
||
"& .MuiChartsAxis-tick": {
|
||
stroke: "#e0e0e0",
|
||
strokeWidth: 1,
|
||
},
|
||
"& .MuiChartsGrid-line": {
|
||
stroke: "#f5f5f5",
|
||
strokeWidth: 1,
|
||
strokeDasharray: "3 3",
|
||
},
|
||
}}
|
||
slotProps={{
|
||
legend: {
|
||
direction: "row",
|
||
position: { horizontal: "middle", vertical: "bottom" },
|
||
padding: { top: 20, bottom: 10, left: 0, right: 0 },
|
||
itemMarkWidth: 16,
|
||
itemMarkHeight: 3,
|
||
markGap: 8,
|
||
itemGap: 16,
|
||
labelStyle: {
|
||
fontSize: 12,
|
||
fill: "#333",
|
||
fontWeight: 500,
|
||
},
|
||
},
|
||
loadingOverlay: {
|
||
style: { backgroundColor: "rgba(255, 255, 255, 0.7)" },
|
||
},
|
||
}}
|
||
tooltip={{
|
||
trigger: "axis",
|
||
}}
|
||
/>
|
||
</Box>
|
||
);
|
||
};
|
||
|
||
const renderTable = () => {
|
||
if (!hasData) return renderEmpty();
|
||
|
||
console.debug("[SCADADataPanel] 表格数据:", {
|
||
rowsCount: rows.length,
|
||
columnsCount: columns.length,
|
||
sampleRow: rows[0],
|
||
columns: columns.map((c) => c.field),
|
||
});
|
||
|
||
return (
|
||
<DataGrid
|
||
rows={rows}
|
||
columns={columns}
|
||
columnBufferPx={100}
|
||
initialState={{
|
||
pagination: {
|
||
paginationModel: { pageSize: 50, page: 0 },
|
||
},
|
||
}}
|
||
pageSizeOptions={[25, 50, 100]}
|
||
sx={{
|
||
border: "none",
|
||
height: "420px",
|
||
"& .MuiDataGrid-cell": {
|
||
borderColor: "#f0f0f0",
|
||
},
|
||
"& .MuiDataGrid-columnHeaders": {
|
||
backgroundColor: "#fafafa",
|
||
fontWeight: 600,
|
||
fontSize: "0.875rem",
|
||
},
|
||
"& .MuiDataGrid-row:hover": {
|
||
backgroundColor: "#f5f5f5",
|
||
},
|
||
"& .MuiDataGrid-columnHeaderTitle": {
|
||
fontWeight: 600,
|
||
},
|
||
}}
|
||
disableRowSelectionOnClick
|
||
/>
|
||
);
|
||
};
|
||
|
||
return (
|
||
<Paper
|
||
className={clsx(
|
||
"absolute right-4 top-20 bg-white rounded-xl shadow-lg overflow-hidden flex flex-col transition-all duration-300",
|
||
visible ? "opacity-95 hover:opacity-100" : "opacity-0 -z-10"
|
||
)}
|
||
sx={{
|
||
width: "min(920px, calc(100vw - 2rem))",
|
||
maxHeight: "calc(100vh - 100px)",
|
||
}}
|
||
>
|
||
{/* Header */}
|
||
<Box
|
||
sx={{
|
||
p: 2,
|
||
borderBottom: 1,
|
||
borderColor: "divider",
|
||
backgroundColor: "primary.main",
|
||
color: "primary.contrastText",
|
||
}}
|
||
>
|
||
<Stack
|
||
direction="row"
|
||
alignItems="center"
|
||
justifyContent="space-between"
|
||
>
|
||
<Stack direction="row" spacing={1} alignItems="center">
|
||
<ShowChart fontSize="small" />
|
||
<Typography variant="h6" sx={{ fontWeight: "bold" }}>
|
||
SCADA 历史数据
|
||
</Typography>
|
||
<Chip
|
||
size="small"
|
||
label={`${deviceIds.length}`}
|
||
sx={{
|
||
backgroundColor: "rgba(255,255,255,0.2)",
|
||
color: "primary.contrastText",
|
||
fontWeight: "bold",
|
||
}}
|
||
/>
|
||
</Stack>
|
||
<Stack direction="row" spacing={1}>
|
||
<Tooltip title="展开/收起">
|
||
<IconButton
|
||
size="small"
|
||
onClick={() => setIsExpanded(!isExpanded)}
|
||
sx={{ color: "primary.contrastText" }}
|
||
>
|
||
{isExpanded ? <ExpandLess /> : <ExpandMore />}
|
||
</IconButton>
|
||
</Tooltip>
|
||
<Tooltip title="关闭">
|
||
<IconButton
|
||
size="small"
|
||
onClick={onClose}
|
||
sx={{ color: "primary.contrastText" }}
|
||
>
|
||
<Close fontSize="small" />
|
||
</IconButton>
|
||
</Tooltip>
|
||
</Stack>
|
||
</Stack>
|
||
</Box>
|
||
|
||
<Collapse in={isExpanded}>
|
||
{/* Controls */}
|
||
<Box sx={{ p: 2, backgroundColor: "grey.50" }}>
|
||
<LocalizationProvider dateAdapter={AdapterDayjs}>
|
||
<Stack spacing={1.5}>
|
||
<Stack direction="row" spacing={1} alignItems="center">
|
||
<DateTimePicker
|
||
label="开始时间"
|
||
value={from}
|
||
onChange={(value) =>
|
||
value && dayjs.isDayjs(value) && setFrom(value)
|
||
}
|
||
onAccept={(value) => {
|
||
if (value && dayjs.isDayjs(value) && hasDevices) {
|
||
handleFetch("date-change");
|
||
}
|
||
}}
|
||
maxDateTime={to}
|
||
slotProps={{ textField: { fullWidth: true, size: "small" } }}
|
||
/>
|
||
<DateTimePicker
|
||
label="结束时间"
|
||
value={to}
|
||
onChange={(value) =>
|
||
value && dayjs.isDayjs(value) && setTo(value)
|
||
}
|
||
onAccept={(value) => {
|
||
if (value && dayjs.isDayjs(value) && hasDevices) {
|
||
handleFetch("date-change");
|
||
}
|
||
}}
|
||
minDateTime={from}
|
||
slotProps={{ textField: { fullWidth: true, size: "small" } }}
|
||
/>
|
||
</Stack>
|
||
<Stack
|
||
direction="row"
|
||
spacing={1}
|
||
alignItems="center"
|
||
justifyContent="space-between"
|
||
>
|
||
<Tabs
|
||
value={activeTab}
|
||
onChange={(_, value: PanelTab) => setActiveTab(value)}
|
||
variant="fullWidth"
|
||
>
|
||
<Tab
|
||
value="chart"
|
||
icon={<ShowChart fontSize="small" />}
|
||
iconPosition="start"
|
||
label="曲线"
|
||
/>
|
||
<Tab
|
||
value="table"
|
||
icon={<TableChart fontSize="small" />}
|
||
iconPosition="start"
|
||
label="表格"
|
||
/>
|
||
</Tabs>
|
||
<Tooltip title="刷新数据">
|
||
<span>
|
||
<Button
|
||
variant="contained"
|
||
size="small"
|
||
color="primary"
|
||
startIcon={<Refresh fontSize="small" />}
|
||
disabled={!hasDevices || loadingState === "loading"}
|
||
onClick={() => handleFetch("manual")}
|
||
>
|
||
刷新
|
||
</Button>
|
||
</span>
|
||
</Tooltip>
|
||
</Stack>
|
||
</Stack>
|
||
</LocalizationProvider>
|
||
|
||
{!hasDevices && (
|
||
<Typography
|
||
variant="caption"
|
||
color="warning.main"
|
||
sx={{ mt: 1, display: "block" }}
|
||
>
|
||
未选择任何设备，无法获取数据。
|
||
</Typography>
|
||
)}
|
||
{error && (
|
||
<Typography
|
||
variant="caption"
|
||
color="error"
|
||
sx={{ mt: 1, display: "block" }}
|
||
>
|
||
获取数据失败：{error}
|
||
</Typography>
|
||
)}
|
||
</Box>
|
||
|
||
<Divider />
|
||
|
||
{/* Content */}
|
||
<Box sx={{ flex: 1, position: "relative", p: 2, overflow: "auto" }}>
|
||
{loadingState === "loading" && (
|
||
<Box
|
||
sx={{
|
||
position: "absolute",
|
||
inset: 0,
|
||
backgroundColor: "rgba(255,255,255,0.6)",
|
||
display: "flex",
|
||
alignItems: "center",
|
||
justifyContent: "center",
|
||
zIndex: 1,
|
||
}}
|
||
>
|
||
<CircularProgress size={48} />
|
||
</Box>
|
||
)}
|
||
|
||
{activeTab === "chart" ? renderChart() : renderTable()}
|
||
</Box>
|
||
</Collapse>
|
||
</Paper>
|
||
);
|
||
};
|
||
|
||
export default SCADADataPanel;
|