组件居中，可拖拽
This commit is contained in:
JIANG
@@ -1,6 +1,14 @@
|
||||
"use client";
|
||||
|
||||
import React, { useCallback, useEffect, useMemo, useState } from "react";
|
||||
import React, {
|
||||
useCallback,
|
||||
useEffect,
|
||||
useMemo,
|
||||
useRef,
|
||||
useState,
|
||||
} from "react";
|
||||
import Draggable from "react-draggable";
|
||||
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
@@ -294,6 +302,7 @@ const SCADADataPanel: React.FC<SCADADataPanelProps> = ({
|
||||
const [selectedSource, setSelectedSource] = useState<
|
||||
"raw" | "clean" | "sim" | "all"
|
||||
>(() => (deviceIds.length === 1 ? "all" : "clean"));
|
||||
const draggableRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
// 获取 SCADA 设备信息，生成 deviceLabels
|
||||
useEffect(() => {
|
||||
@@ -648,214 +657,216 @@ const SCADADataPanel: React.FC<SCADADataPanelProps> = ({
|
||||
return (
|
||||
<>
|
||||
{/* 主面板 */}
|
||||
<Box
|
||||
sx={{
|
||||
position: "fixed",
|
||||
left: "50%",
|
||||
top: "50%",
|
||||
transform: "translate(-50%, -50%)",
|
||||
width: "min(920px, calc(100vw - 2rem))",
|
||||
maxWidth: "100vw",
|
||||
height: "860px",
|
||||
maxHeight: "calc(100vh - 2rem)",
|
||||
boxSizing: "border-box",
|
||||
borderRadius: "12px",
|
||||
boxShadow:
|
||||
"0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
|
||||
backdropFilter: "blur(8px)",
|
||||
opacity: 0.95,
|
||||
transition: "opacity 0.3s ease-in-out",
|
||||
border: "none",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
zIndex: 1300,
|
||||
backgroundColor: "white",
|
||||
overflow: "hidden",
|
||||
"&:hover": {
|
||||
opacity: 1,
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Draggable nodeRef={draggableRef}>
|
||||
<Box
|
||||
className="flex flex-col h-full rounded-xl"
|
||||
sx={{ height: "100%", width: "100%" }}
|
||||
ref={draggableRef}
|
||||
sx={{
|
||||
position: "absolute",
|
||||
right: "1rem",
|
||||
top: "1rem",
|
||||
width: "min(920px, calc(100vw - 2rem))",
|
||||
maxWidth: "100vw",
|
||||
height: "860px",
|
||||
maxHeight: "calc(100vh - 2rem)",
|
||||
boxSizing: "border-box",
|
||||
borderRadius: "12px",
|
||||
boxShadow:
|
||||
"0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
|
||||
backdropFilter: "blur(8px)",
|
||||
opacity: 0.95,
|
||||
transition: "opacity 0.3s ease-in-out",
|
||||
border: "none",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
zIndex: 1300,
|
||||
backgroundColor: "white",
|
||||
overflow: "hidden",
|
||||
"&:hover": {
|
||||
opacity: 1,
|
||||
},
|
||||
}}
|
||||
>
|
||||
{/* Header */}
|
||||
<Box
|
||||
sx={{
|
||||
p: 2,
|
||||
borderBottom: 1,
|
||||
borderColor: "divider",
|
||||
backgroundColor: "primary.main",
|
||||
color: "primary.contrastText",
|
||||
}}
|
||||
className="flex flex-col h-full rounded-xl"
|
||||
sx={{ height: "100%", width: "100%" }}
|
||||
>
|
||||
<Stack
|
||||
direction="row"
|
||||
alignItems="center"
|
||||
justifyContent="space-between"
|
||||
{/* Header */}
|
||||
<Box
|
||||
sx={{
|
||||
p: 2,
|
||||
borderBottom: 1,
|
||||
borderColor: "divider",
|
||||
backgroundColor: "primary.main",
|
||||
color: "primary.contrastText",
|
||||
}}
|
||||
>
|
||||
<Stack direction="row" spacing={1} alignItems="center">
|
||||
<ShowChart fontSize="small" />
|
||||
<Typography variant="h6" sx={{ fontWeight: "bold" }}>
|
||||
历史数据
|
||||
</Typography>
|
||||
<Chip
|
||||
size="small"
|
||||
label={`${deviceIds.length}`}
|
||||
sx={{
|
||||
backgroundColor: "rgba(255,255,255,0.2)",
|
||||
color: "primary.contrastText",
|
||||
fontWeight: "bold",
|
||||
}}
|
||||
/>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Box>
|
||||
|
||||
{/* Controls */}
|
||||
<Box sx={{ p: 2, backgroundColor: "grey.50" }}>
|
||||
<LocalizationProvider
|
||||
dateAdapter={AdapterDayjs}
|
||||
adapterLocale="zh-cn"
|
||||
>
|
||||
<Stack spacing={1.5}>
|
||||
<Stack
|
||||
direction="row"
|
||||
alignItems="center"
|
||||
justifyContent="space-between"
|
||||
>
|
||||
<Stack direction="row" spacing={1} alignItems="center">
|
||||
<DateTimePicker
|
||||
label="开始时间"
|
||||
value={from}
|
||||
onChange={(value) => {
|
||||
if (value && dayjs.isDayjs(value) && value.isValid()) {
|
||||
setFrom(value);
|
||||
}
|
||||
}}
|
||||
onAccept={(value) => {
|
||||
if (
|
||||
value &&
|
||||
dayjs.isDayjs(value) &&
|
||||
value.isValid() &&
|
||||
hasDevices
|
||||
) {
|
||||
handleFetch("date-change");
|
||||
}
|
||||
}}
|
||||
maxDateTime={to}
|
||||
slotProps={{
|
||||
textField: { fullWidth: true, size: "small" },
|
||||
}}
|
||||
/>
|
||||
<DateTimePicker
|
||||
label="结束时间"
|
||||
value={to}
|
||||
onChange={(value) => {
|
||||
if (value && dayjs.isDayjs(value) && value.isValid()) {
|
||||
setTo(value);
|
||||
}
|
||||
}}
|
||||
onAccept={(value) => {
|
||||
if (
|
||||
value &&
|
||||
dayjs.isDayjs(value) &&
|
||||
value.isValid() &&
|
||||
hasDevices
|
||||
) {
|
||||
handleFetch("date-change");
|
||||
}
|
||||
}}
|
||||
minDateTime={from}
|
||||
slotProps={{
|
||||
textField: { fullWidth: true, size: "small" },
|
||||
<ShowChart fontSize="small" />
|
||||
<Typography variant="h6" sx={{ fontWeight: "bold" }}>
|
||||
历史数据
|
||||
</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}
|
||||
alignItems="center"
|
||||
justifyContent="space-between"
|
||||
>
|
||||
<Tabs
|
||||
value={activeTab}
|
||||
onChange={(_, value: PanelTab) => setActiveTab(value)}
|
||||
variant="fullWidth"
|
||||
</Stack>
|
||||
</Box>
|
||||
|
||||
{/* Controls */}
|
||||
<Box sx={{ p: 2, backgroundColor: "grey.50" }}>
|
||||
<LocalizationProvider
|
||||
dateAdapter={AdapterDayjs}
|
||||
adapterLocale="zh-cn"
|
||||
>
|
||||
<Stack spacing={1.5}>
|
||||
<Stack direction="row" spacing={1} alignItems="center">
|
||||
<DateTimePicker
|
||||
label="开始时间"
|
||||
value={from}
|
||||
onChange={(value) => {
|
||||
if (value && dayjs.isDayjs(value) && value.isValid()) {
|
||||
setFrom(value);
|
||||
}
|
||||
}}
|
||||
onAccept={(value) => {
|
||||
if (
|
||||
value &&
|
||||
dayjs.isDayjs(value) &&
|
||||
value.isValid() &&
|
||||
hasDevices
|
||||
) {
|
||||
handleFetch("date-change");
|
||||
}
|
||||
}}
|
||||
maxDateTime={to}
|
||||
slotProps={{
|
||||
textField: { fullWidth: true, size: "small" },
|
||||
}}
|
||||
/>
|
||||
<DateTimePicker
|
||||
label="结束时间"
|
||||
value={to}
|
||||
onChange={(value) => {
|
||||
if (value && dayjs.isDayjs(value) && value.isValid()) {
|
||||
setTo(value);
|
||||
}
|
||||
}}
|
||||
onAccept={(value) => {
|
||||
if (
|
||||
value &&
|
||||
dayjs.isDayjs(value) &&
|
||||
value.isValid() &&
|
||||
hasDevices
|
||||
) {
|
||||
handleFetch("date-change");
|
||||
}
|
||||
}}
|
||||
minDateTime={from}
|
||||
slotProps={{
|
||||
textField: { fullWidth: true, size: "small" },
|
||||
}}
|
||||
/>
|
||||
</Stack>
|
||||
<Stack
|
||||
direction="row"
|
||||
spacing={1}
|
||||
alignItems="center"
|
||||
justifyContent="space-between"
|
||||
>
|
||||
<Tab
|
||||
value="chart"
|
||||
icon={<ShowChart fontSize="small" />}
|
||||
iconPosition="start"
|
||||
label="曲线"
|
||||
/>
|
||||
<Tab
|
||||
value="table"
|
||||
icon={<TableChart fontSize="small" />}
|
||||
iconPosition="start"
|
||||
label="表格"
|
||||
/>
|
||||
</Tabs>
|
||||
<Stack direction="row" spacing={1}>
|
||||
<Tooltip title="刷新数据">
|
||||
<span>
|
||||
<Button
|
||||
variant="outlined"
|
||||
size="small"
|
||||
color="primary"
|
||||
startIcon={<Refresh fontSize="small" />}
|
||||
disabled={!hasDevices || loadingState === "loading"}
|
||||
onClick={() => handleFetch("manual")}
|
||||
>
|
||||
刷新
|
||||
</Button>
|
||||
</span>
|
||||
</Tooltip>
|
||||
<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>
|
||||
<Stack direction="row" spacing={1}>
|
||||
<Tooltip title="刷新数据">
|
||||
<span>
|
||||
<Button
|
||||
variant="outlined"
|
||||
size="small"
|
||||
color="primary"
|
||||
startIcon={<Refresh fontSize="small" />}
|
||||
disabled={!hasDevices || loadingState === "loading"}
|
||||
onClick={() => handleFetch("manual")}
|
||||
>
|
||||
刷新
|
||||
</Button>
|
||||
</span>
|
||||
</Tooltip>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</LocalizationProvider>
|
||||
</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>
|
||||
{!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 />
|
||||
<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>
|
||||
)}
|
||||
{/* 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()}
|
||||
{activeTab === "chart" ? renderChart() : renderTable()}
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</Draggable>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user