diff --git a/src/app/(main)/health-risk-analysis/page.tsx b/src/app/(main)/health-risk-analysis/page.tsx
index 2d7320f..4034bb9 100644
--- a/src/app/(main)/health-risk-analysis/page.tsx
+++ b/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() {
diff --git a/src/components/olmap/HealthRiskAnalysis/HistoryDataPanel.tsx b/src/components/olmap/HealthRiskAnalysis/PredictDataPanel.tsx
similarity index 52%
rename from src/components/olmap/HealthRiskAnalysis/HistoryDataPanel.tsx
rename to src/components/olmap/HealthRiskAnalysis/PredictDataPanel.tsx
index 7f73e8d..241038d 100644
--- a/src/components/olmap/HealthRiskAnalysis/HistoryDataPanel.tsx
+++ b/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 = ({
+const PredictDataPanel: React.FC = ({
featureInfos,
- defaultTab = "chart",
fractionDigits = 4,
}) => {
const { predictionResults } = useHealthRisk();
- const [activeTab, setActiveTab] = useState(defaultTab);
const draggableRef = useRef(null);
// 提取选中的设备 ID
@@ -50,7 +36,7 @@ const HistoryDataPanel: React.FC = ({
const hasData = filteredResults.length > 0;
- // 构建表格和图表所需的数据集
+ // 构建图表所需的数据集
const dataset = useMemo(() => {
if (filteredResults.length === 0) return [];
@@ -71,39 +57,6 @@ const HistoryDataPanel: React.FC = ({
});
}, [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 = () => (
= ({
);
};
- const renderTable = () => {
- if (!hasData) return renderEmpty();
-
- return (
-
- );
- };
-
return (
= ({
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 */}
-
-
-
-
- 健康预测曲线
-
-
+
+
+
+
+ 健康预测曲线
+
+
+
-
-
+
- {/* Tabs */}
-
- setActiveTab(value)}
- variant="fullWidth"
- >
- }
- iconPosition="start"
- label="预测曲线"
- />
- }
- iconPosition="start"
- label="数据表格"
- />
-
-
-
- {/* Content */}
-
- {activeTab === "chart" ? renderChart() : renderTable()}
+ {/* Content */}
+ {renderChart()}
);
};
-export default HistoryDataPanel;
+export default PredictDataPanel;