重命名HistoryDataPanel为PredictDataPanel

src/app/(main)/health-risk-analysis/page.tsx

@@ -5,7 +5,7 @@ import Timeline from "@components/olmap/HealthRiskAnalysis/Timeline";
 import MapToolbar from "@app/OlMap/Controls/Toolbar";
 import { HealthRiskProvider } from "@components/olmap/HealthRiskAnalysis/HealthRiskContext";
 import HealthRiskPieChart from "@components/olmap/HealthRiskAnalysis/HealthRiskPieChart";
-import HistoryDataPanel from "@components/olmap/HealthRiskAnalysis/HistoryDataPanel";
+import PredictDataPanel from "@components/olmap/HealthRiskAnalysis/PredictDataPanel";
 
 export default function Home() {
   return (
@@ -15,7 +15,7 @@ export default function Home() {
           <MapToolbar
             queryType="realtime"
             hiddenButtons={["style"]}
-            HistoryPanel={HistoryDataPanel}
+            HistoryPanel={PredictDataPanel}
           />
           <Timeline />
           <HealthRiskPieChart />

src/components/olmap/HealthRiskAnalysis/PredictDataPanel.tsx

@@ -1,40 +1,26 @@
 "use client";
 
-import React, { useMemo, useRef, useState } from "react";
+import React, { useMemo, useRef } from "react";
 import Draggable from "react-draggable";
 
-import { Box, Chip, Stack, Tab, Tabs, Typography } from "@mui/material";
-import { ShowChart, TableChart } from "@mui/icons-material";
-import { DataGrid, GridColDef } from "@mui/x-data-grid";
-import { zhCN } from "@mui/x-data-grid/locales";
+import { Box, Chip, Stack, Typography } from "@mui/material";
+import { ShowChart } from "@mui/icons-material";
 import ReactECharts from "echarts-for-react";
 import "dayjs/locale/zh-cn";
 import { useHealthRisk } from "./HealthRiskContext";
 
-export interface HistoryDataPanelProps {
+export interface PredictDataPanelProps {
   /** 选中的要素信息列表，格式为 [[id, type], [id, type]] */
   featureInfos: [string, string][];
-  /** 数据类型: realtime-查询模拟值和监测值, none-仅查询监测值, scheme-查询策略模拟值和监测值 */
-  type?: "realtime" | "scheme" | "none";
-  /** 策略类型 */
-  scheme_type?: string;
-  /** 策略名称 */
-  scheme_name?: string;
-  /** 默认展示的选项卡 */
-  defaultTab?: "chart" | "table";
   /** Y 轴数值的小数位数 */
   fractionDigits?: number;
 }
 
-type PanelTab = "chart" | "table";
-
-const HistoryDataPanel: React.FC<HistoryDataPanelProps> = ({
+const PredictDataPanel: React.FC<PredictDataPanelProps> = ({
   featureInfos,
-  defaultTab = "chart",
   fractionDigits = 4,
 }) => {
   const { predictionResults } = useHealthRisk();
-  const [activeTab, setActiveTab] = useState<PanelTab>(defaultTab);
   const draggableRef = useRef<HTMLDivElement>(null);
 
   // 提取选中的设备 ID
@@ -50,7 +36,7 @@ const HistoryDataPanel: React.FC<HistoryDataPanelProps> = ({
 
   const hasData = filteredResults.length > 0;
 
-  // 构建表格和图表所需的数据集
+  // 构建图表所需的数据集
   const dataset = useMemo(() => {
     if (filteredResults.length === 0) return [];
 
@@ -71,39 +57,6 @@ const HistoryDataPanel: React.FC<HistoryDataPanelProps> = ({
     });
   }, [filteredResults]);
 
-  const columns: GridColDef[] = useMemo(() => {
-    const base: GridColDef[] = [
-      {
-        field: "label",
-        headerName: "预测时长",
-        minWidth: 120,
-        flex: 1,
-      },
-    ];
-
-    const dynamic = filteredResults.map((res) => ({
-      field: res.link_id,
-      headerName: `管道 ${res.link_id}`,
-      minWidth: 150,
-      flex: 1,
-      valueFormatter: (value: any) => {
-        if (value === null || value === undefined) return "--";
-        return Number(value).toFixed(fractionDigits);
-      },
-    }));
-
-    return [...base, ...dynamic];
-  }, [filteredResults, fractionDigits]);
-
-  const rows = useMemo(
-    () =>
-      dataset.map((item, index) => ({
-        id: index,
-        ...item,
-      })),
-    [dataset]
-  );
-
   const renderEmpty = () => (
     <Box
       sx={{
@@ -206,29 +159,6 @@ const HistoryDataPanel: React.FC<HistoryDataPanelProps> = ({
     );
   };
 
-  const renderTable = () => {
-    if (!hasData) return renderEmpty();
-
-    return (
-      <DataGrid
-        rows={rows}
-        columns={columns}
-        localeText={zhCN.components.MuiDataGrid.defaultProps.localeText}
-        initialState={{
-          pagination: {
-            paginationModel: { pageSize: 10, page: 0 },
-          },
-        }}
-        pageSizeOptions={[10, 20, 50]}
-        sx={{
-          border: "none",
-          height: "100%",
-        }}
-        disableRowSelectionOnClick
-      />
-    );
-  };
-
   return (
     <Draggable nodeRef={draggableRef}>
       <Box
@@ -237,77 +167,71 @@ const HistoryDataPanel: React.FC<HistoryDataPanelProps> = ({
           position: "absolute",
           right: "1rem",
           top: "1rem",
-          width: "min(800px, calc(100vw - 2rem))",
-          height: "600px",
+          width: "min(920px, calc(100vw - 2rem))",
+          maxWidth: "100vw",
+          height: "40vh",
+          maxHeight: "calc(100vh - 2rem)",
+          boxSizing: "border-box",
           borderRadius: "12px",
-          boxShadow: 3,
+          boxShadow:
+            "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
           backdropFilter: "blur(8px)",
-          zIndex: 1300,
-          backgroundColor: "white",
+          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,
-            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={`${filteredResults.length}`}
-                sx={{
-                  backgroundColor: "rgba(255,255,255,0.2)",
-                  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" }}>
+                  健康预测曲线
+                </Typography>
+                <Chip
+                  size="small"
+                  label={`${filteredResults.length}`}
+                  sx={{
+                    backgroundColor: "rgba(255,255,255,0.2)",
+                    color: "primary.contrastText",
+                    fontWeight: "bold",
+                  }}
+                />
+              </Stack>
             </Stack>
-          </Stack>
-        </Box>
+          </Box>
 
-        {/* Tabs */}
-        <Box sx={{ borderBottom: 1, borderColor: "divider" }}>
-          <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>
-        </Box>
-
-        {/* Content */}
-        <Box sx={{ flex: 1, p: 2, overflow: "hidden" }}>
-          {activeTab === "chart" ? renderChart() : renderTable()}
+          {/* Content */}
+          <Box sx={{ flex: 1, p: 2, overflow: "hidden" }}>{renderChart()}</Box>
         </Box>
       </Box>
     </Draggable>
   );
 };
 
-export default HistoryDataPanel;
+export default PredictDataPanel;