diff --git a/src/app/OlMap/Controls/HistoryDataPanel.tsx b/src/app/OlMap/Controls/HistoryDataPanel.tsx index 8d946c7..1850928 100644 --- a/src/app/OlMap/Controls/HistoryDataPanel.tsx +++ b/src/app/OlMap/Controls/HistoryDataPanel.tsx @@ -23,6 +23,7 @@ import { } from "@mui/material"; import { Refresh, ShowChart, TableChart } from "@mui/icons-material"; import { DataGrid, GridColDef } from "@mui/x-data-grid"; +import { zhCN } from "@mui/x-data-grid/locales"; import ReactECharts from "echarts-for-react"; import * as echarts from "echarts"; import "dayjs/locale/zh-cn"; // 引入中文包 @@ -32,7 +33,6 @@ import timezone from "dayjs/plugin/timezone"; import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs"; import { DateTimePicker, LocalizationProvider } from "@mui/x-date-pickers"; import config from "@/config/config"; -import { GeoJSON } from "ol/format"; dayjs.extend(utc); dayjs.extend(timezone); @@ -733,6 +733,7 @@ const SCADADataPanel: React.FC = ({ Promise; /** 可选：控制浮窗显示 */ visible?: boolean; /** 默认展示的选项卡 */ @@ -238,8 +234,6 @@ const mergeTimeSeriesData = ( return result; }; -const defaultFetcher = fetchFromBackend; - const formatTimestamp = (timestamp: string) => dayjs(timestamp).tz("Asia/Shanghai").format("YYYY-MM-DD HH:mm"); @@ -315,7 +309,6 @@ const emptyStateMessages: Record< const SCADADataPanel: React.FC = ({ deviceIds, - fetchTimeSeriesData = defaultFetcher, visible = true, defaultTab = "chart", fractionDigits = 2, @@ -327,7 +320,7 @@ const SCADADataPanel: React.FC = ({ const customFetcher = useMemo(() => { if (!showCleaning) { - return fetchTimeSeriesData; + return fetchFromBackend; } return async ( @@ -402,7 +395,7 @@ const SCADADataPanel: React.FC = ({ throw error; } }; - }, [showCleaning, fetchTimeSeriesData]); + }, [showCleaning]); const [from, setFrom] = useState(() => dayjs().subtract(1, "day")); const [to, setTo] = useState(() => dayjs()); @@ -411,42 +404,11 @@ const SCADADataPanel: React.FC = ({ const [loadingState, setLoadingState] = useState("idle"); const [error, setError] = useState(null); const [isExpanded, setIsExpanded] = useState(true); - const [deviceLabels, setDeviceLabels] = useState>({}); const [isCleaning, setIsCleaning] = useState(false); const [selectedSource, setSelectedSource] = useState< "raw" | "clean" | "sim" | "all" >(() => (deviceIds.length === 1 ? "all" : "clean")); - // 获取 SCADA 设备信息，生成 deviceLabels - useEffect(() => { - const fetchDeviceLabels = async () => { - try { - const url = `${config.MAP_URL}/${config.MAP_WORKSPACE}/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=${config.MAP_WORKSPACE}: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>( - (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]); @@ -593,7 +555,7 @@ const SCADADataPanel: React.FC = ({ return deviceIds.flatMap((id) => [ { field: `${id}_raw`, - headerName: `${deviceLabels?.[id] ?? id} (原始)`, + headerName: `${id} (原始)`, minWidth: 140, flex: 1, valueFormatter: (value: any) => { @@ -606,7 +568,7 @@ const SCADADataPanel: React.FC = ({ }, { field: `${id}_clean`, - headerName: `${deviceLabels?.[id] ?? id} (清洗)`, + headerName: `${id} (清洗)`, minWidth: 140, flex: 1, valueFormatter: (value: any) => { @@ -619,7 +581,7 @@ const SCADADataPanel: React.FC = ({ }, { field: `${id}_sim`, - headerName: `${deviceLabels?.[id] ?? id} (模拟)`, + headerName: `${id} (模拟)`, minWidth: 140, flex: 1, valueFormatter: (value: any) => { @@ -635,7 +597,7 @@ const SCADADataPanel: React.FC = ({ // 单一数据源模式：只显示选中的数据源 return deviceIds.map((id) => ({ field: `${id}_${selectedSource}`, - headerName: deviceLabels?.[id] ?? id, + headerName: id, minWidth: 140, flex: 1, valueFormatter: (value: any) => { @@ -650,24 +612,24 @@ const SCADADataPanel: React.FC = ({ } else { // 非清洗模式：显示所有设备的所有有数据的列 const cols: GridColDef[] = []; - + deviceIds.forEach((id) => { - const deviceName = deviceLabels?.[id] ?? id; - + const deviceName = id; + // 为每个设备的每种数据类型创建列 const suffixes = [ - { key: 'raw', name: '原始值' }, - { key: 'clean', name: '清洗值' }, - { key: 'sim', name: '模拟值' } + { key: "raw", name: "原始值" }, + { key: "clean", name: "清洗值" }, + { key: "sim", name: "模拟值" }, ]; - + suffixes.forEach(({ key, name }) => { const fieldKey = `${id}_${key}`; // 检查是否有该字段的数据 const hasData = dataset.some( (item) => item[fieldKey] !== null && item[fieldKey] !== undefined ); - + if (hasData) { cols.push({ field: fieldKey, @@ -685,13 +647,13 @@ const SCADADataPanel: React.FC = ({ } }); }); - + return cols; } })(); return [...base, ...dynamic]; - }, [deviceIds, deviceLabels, fractionDigits, showCleaning, selectedSource, dataset]); + }, [deviceIds, fractionDigits, showCleaning, selectedSource, dataset]); const rows = useMemo( () => @@ -754,7 +716,7 @@ const SCADADataPanel: React.FC = ({ if (selectedSource === "all") { return deviceIds.flatMap((id, index) => [ { - name: `${deviceLabels?.[id] ?? id} (原始)`, + name: `${id} (原始)`, type: "line", symbol: "none", sampling: "lttb", @@ -762,7 +724,7 @@ const SCADADataPanel: React.FC = ({ data: dataset.map((item) => item[`${id}_raw`]), }, { - name: `${deviceLabels?.[id] ?? id} (清洗)`, + name: `${id} (清洗)`, type: "line", symbol: "none", sampling: "lttb", @@ -770,7 +732,7 @@ const SCADADataPanel: React.FC = ({ data: dataset.map((item) => item[`${id}_clean`]), }, { - name: `${deviceLabels?.[id] ?? id} (模拟)`, + name: `${id} (模拟)`, type: "line", symbol: "none", sampling: "lttb", @@ -780,7 +742,7 @@ const SCADADataPanel: React.FC = ({ ]); } else { return deviceIds.map((id, index) => ({ - name: deviceLabels?.[id] ?? id, + name: id, type: "line", symbol: "none", sampling: "lttb", @@ -798,7 +760,7 @@ const SCADADataPanel: React.FC = ({ ); if (hasData) { series.push({ - name: `${deviceLabels?.[id] ?? id} (${ + name: `${id} (${ suffix === "raw" ? "原始" : suffix === "clean" @@ -831,7 +793,7 @@ const SCADADataPanel: React.FC = ({ // 如果没有clean/raw/sim数据，则使用fallback if (series.length === 0) { series.push({ - name: deviceLabels?.[id] ?? id, + name: id, type: "line", symbol: "none", sampling: "lttb", @@ -943,6 +905,7 @@ const SCADADataPanel: React.FC = ({ rows={rows} columns={columns} columnBufferPx={100} + localeText={zhCN.components.MuiDataGrid.defaultProps.localeText} initialState={{ pagination: { paginationModel: { pageSize: 50, page: 0 },