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;