删除label；汉化Datagrid组件

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<SCADADataPanelProps> = ({
       <DataGrid
         rows={rows}
         columns={columns}
+        localeText={zhCN.components.MuiDataGrid.defaultProps.localeText}
         columnBufferPx={100}
         initialState={{
           pagination: {

src/components/olmap/SCADADataPanel.tsx

@@ -24,6 +24,7 @@ import {
   ChevronRight,
 } 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"; // 引入中文包
@@ -56,11 +57,6 @@ export interface TimeSeriesPoint {
 export interface SCADADataPanelProps {
   /** 选中的设备 ID 列表 */
   deviceIds: string[];
-  /** 自定义数据获取器，默认使用后端 API */
-  fetchTimeSeriesData?: (
-    deviceIds: string[],
-    range: { from: Date; to: Date }
-  ) => Promise<TimeSeriesPoint[]>;
   /** 可选：控制浮窗显示 */
   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<SCADADataPanelProps> = ({
   deviceIds,
-  fetchTimeSeriesData = defaultFetcher,
   visible = true,
   defaultTab = "chart",
   fractionDigits = 2,
@@ -327,7 +320,7 @@ const SCADADataPanel: React.FC<SCADADataPanelProps> = ({
 
   const customFetcher = useMemo(() => {
     if (!showCleaning) {
-      return fetchTimeSeriesData;
+      return fetchFromBackend;
     }
 
     return async (
@@ -402,7 +395,7 @@ const SCADADataPanel: React.FC<SCADADataPanelProps> = ({
         throw error;
       }
     };
-  }, [showCleaning, fetchTimeSeriesData]);
+  }, [showCleaning]);
 
   const [from, setFrom] = useState<Dayjs>(() => dayjs().subtract(1, "day"));
   const [to, setTo] = useState<Dayjs>(() => dayjs());
@@ -411,42 +404,11 @@ const SCADADataPanel: React.FC<SCADADataPanelProps> = ({
   const [loadingState, setLoadingState] = useState<LoadingState>("idle");
   const [error, setError] = useState<string | null>(null);
   const [isExpanded, setIsExpanded] = useState<boolean>(true);
-  const [deviceLabels, setDeviceLabels] = useState<Record<string, string>>({});
   const [isCleaning, setIsCleaning] = useState<boolean>(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<Record<string, string>>(
-          (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<SCADADataPanelProps> = ({
           return deviceIds.flatMap<GridColDef>((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<SCADADataPanelProps> = ({
             },
             {
               field: `${id}_clean`,
-              headerName: `${deviceLabels?.[id] ?? id} (清洗)`,
+              headerName: `${id} (清洗)`,
               minWidth: 140,
               flex: 1,
               valueFormatter: (value: any) => {
@@ -619,7 +581,7 @@ const SCADADataPanel: React.FC<SCADADataPanelProps> = ({
             },
             {
               field: `${id}_sim`,
-              headerName: `${deviceLabels?.[id] ?? id} (模拟)`,
+              headerName: `${id} (模拟)`,
               minWidth: 140,
               flex: 1,
               valueFormatter: (value: any) => {
@@ -635,7 +597,7 @@ const SCADADataPanel: React.FC<SCADADataPanelProps> = ({
           // 单一数据源模式：只显示选中的数据源
           return deviceIds.map<GridColDef>((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<SCADADataPanelProps> = ({
       } else {
         // 非清洗模式：显示所有设备的所有有数据的列
         const cols: GridColDef[] = [];
-        
+
         deviceIds.forEach((id) => {
-          const deviceName = deviceLabels?.[id] ?? id;
+          const deviceName = id;
-          
+
           // 为每个设备的每种数据类型创建列
           const suffixes = [
-            { key: 'raw', name: '原始值' },
+            { key: "raw", name: "原始值" },
-            { key: 'clean', name: '清洗值' },
+            { key: "clean", name: "清洗值" },
-            { key: 'sim', 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<SCADADataPanelProps> = ({
             }
           });
         });
-        
+
         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<SCADADataPanelProps> = ({
         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<SCADADataPanelProps> = ({
               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<SCADADataPanelProps> = ({
               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<SCADADataPanelProps> = ({
           ]);
         } 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<SCADADataPanelProps> = ({
             );
             if (hasData) {
               series.push({
-                name: `${deviceLabels?.[id] ?? id} (${
+                name: `${id} (${
                   suffix === "raw"
                     ? "原始"
                     : suffix === "clean"
@@ -831,7 +793,7 @@ const SCADADataPanel: React.FC<SCADADataPanelProps> = ({
           // 如果没有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<SCADADataPanelProps> = ({
         rows={rows}
         columns={columns}
         columnBufferPx={100}
+        localeText={zhCN.components.MuiDataGrid.defaultProps.localeText}
         initialState={{
           pagination: {
             paginationModel: { pageSize: 50, page: 0 },