删除label;汉化Datagrid组件
This commit is contained in:
@@ -23,6 +23,7 @@ import {
|
|||||||
} from "@mui/material";
|
} from "@mui/material";
|
||||||
import { Refresh, ShowChart, TableChart } from "@mui/icons-material";
|
import { Refresh, ShowChart, TableChart } from "@mui/icons-material";
|
||||||
import { DataGrid, GridColDef } from "@mui/x-data-grid";
|
import { DataGrid, GridColDef } from "@mui/x-data-grid";
|
||||||
|
import { zhCN } from "@mui/x-data-grid/locales";
|
||||||
import ReactECharts from "echarts-for-react";
|
import ReactECharts from "echarts-for-react";
|
||||||
import * as echarts from "echarts";
|
import * as echarts from "echarts";
|
||||||
import "dayjs/locale/zh-cn"; // 引入中文包
|
import "dayjs/locale/zh-cn"; // 引入中文包
|
||||||
@@ -32,7 +33,6 @@ import timezone from "dayjs/plugin/timezone";
|
|||||||
import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
|
import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
|
||||||
import { DateTimePicker, LocalizationProvider } from "@mui/x-date-pickers";
|
import { DateTimePicker, LocalizationProvider } from "@mui/x-date-pickers";
|
||||||
import config from "@/config/config";
|
import config from "@/config/config";
|
||||||
import { GeoJSON } from "ol/format";
|
|
||||||
|
|
||||||
dayjs.extend(utc);
|
dayjs.extend(utc);
|
||||||
dayjs.extend(timezone);
|
dayjs.extend(timezone);
|
||||||
@@ -733,6 +733,7 @@ const SCADADataPanel: React.FC<SCADADataPanelProps> = ({
|
|||||||
<DataGrid
|
<DataGrid
|
||||||
rows={rows}
|
rows={rows}
|
||||||
columns={columns}
|
columns={columns}
|
||||||
|
localeText={zhCN.components.MuiDataGrid.defaultProps.localeText}
|
||||||
columnBufferPx={100}
|
columnBufferPx={100}
|
||||||
initialState={{
|
initialState={{
|
||||||
pagination: {
|
pagination: {
|
||||||
|
|||||||
@@ -24,6 +24,7 @@ import {
|
|||||||
ChevronRight,
|
ChevronRight,
|
||||||
} from "@mui/icons-material";
|
} from "@mui/icons-material";
|
||||||
import { DataGrid, GridColDef } from "@mui/x-data-grid";
|
import { DataGrid, GridColDef } from "@mui/x-data-grid";
|
||||||
|
import { zhCN } from "@mui/x-data-grid/locales";
|
||||||
import ReactECharts from "echarts-for-react";
|
import ReactECharts from "echarts-for-react";
|
||||||
import * as echarts from "echarts";
|
import * as echarts from "echarts";
|
||||||
import "dayjs/locale/zh-cn"; // 引入中文包
|
import "dayjs/locale/zh-cn"; // 引入中文包
|
||||||
@@ -56,11 +57,6 @@ export interface TimeSeriesPoint {
|
|||||||
export interface SCADADataPanelProps {
|
export interface SCADADataPanelProps {
|
||||||
/** 选中的设备 ID 列表 */
|
/** 选中的设备 ID 列表 */
|
||||||
deviceIds: string[];
|
deviceIds: string[];
|
||||||
/** 自定义数据获取器,默认使用后端 API */
|
|
||||||
fetchTimeSeriesData?: (
|
|
||||||
deviceIds: string[],
|
|
||||||
range: { from: Date; to: Date }
|
|
||||||
) => Promise<TimeSeriesPoint[]>;
|
|
||||||
/** 可选:控制浮窗显示 */
|
/** 可选:控制浮窗显示 */
|
||||||
visible?: boolean;
|
visible?: boolean;
|
||||||
/** 默认展示的选项卡 */
|
/** 默认展示的选项卡 */
|
||||||
@@ -238,8 +234,6 @@ const mergeTimeSeriesData = (
|
|||||||
return result;
|
return result;
|
||||||
};
|
};
|
||||||
|
|
||||||
const defaultFetcher = fetchFromBackend;
|
|
||||||
|
|
||||||
const formatTimestamp = (timestamp: string) =>
|
const formatTimestamp = (timestamp: string) =>
|
||||||
dayjs(timestamp).tz("Asia/Shanghai").format("YYYY-MM-DD HH:mm");
|
dayjs(timestamp).tz("Asia/Shanghai").format("YYYY-MM-DD HH:mm");
|
||||||
|
|
||||||
@@ -315,7 +309,6 @@ const emptyStateMessages: Record<
|
|||||||
|
|
||||||
const SCADADataPanel: React.FC<SCADADataPanelProps> = ({
|
const SCADADataPanel: React.FC<SCADADataPanelProps> = ({
|
||||||
deviceIds,
|
deviceIds,
|
||||||
fetchTimeSeriesData = defaultFetcher,
|
|
||||||
visible = true,
|
visible = true,
|
||||||
defaultTab = "chart",
|
defaultTab = "chart",
|
||||||
fractionDigits = 2,
|
fractionDigits = 2,
|
||||||
@@ -327,7 +320,7 @@ const SCADADataPanel: React.FC<SCADADataPanelProps> = ({
|
|||||||
|
|
||||||
const customFetcher = useMemo(() => {
|
const customFetcher = useMemo(() => {
|
||||||
if (!showCleaning) {
|
if (!showCleaning) {
|
||||||
return fetchTimeSeriesData;
|
return fetchFromBackend;
|
||||||
}
|
}
|
||||||
|
|
||||||
return async (
|
return async (
|
||||||
@@ -402,7 +395,7 @@ const SCADADataPanel: React.FC<SCADADataPanelProps> = ({
|
|||||||
throw error;
|
throw error;
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
}, [showCleaning, fetchTimeSeriesData]);
|
}, [showCleaning]);
|
||||||
|
|
||||||
const [from, setFrom] = useState<Dayjs>(() => dayjs().subtract(1, "day"));
|
const [from, setFrom] = useState<Dayjs>(() => dayjs().subtract(1, "day"));
|
||||||
const [to, setTo] = useState<Dayjs>(() => dayjs());
|
const [to, setTo] = useState<Dayjs>(() => dayjs());
|
||||||
@@ -411,42 +404,11 @@ const SCADADataPanel: React.FC<SCADADataPanelProps> = ({
|
|||||||
const [loadingState, setLoadingState] = useState<LoadingState>("idle");
|
const [loadingState, setLoadingState] = useState<LoadingState>("idle");
|
||||||
const [error, setError] = useState<string | null>(null);
|
const [error, setError] = useState<string | null>(null);
|
||||||
const [isExpanded, setIsExpanded] = useState<boolean>(true);
|
const [isExpanded, setIsExpanded] = useState<boolean>(true);
|
||||||
const [deviceLabels, setDeviceLabels] = useState<Record<string, string>>({});
|
|
||||||
const [isCleaning, setIsCleaning] = useState<boolean>(false);
|
const [isCleaning, setIsCleaning] = useState<boolean>(false);
|
||||||
const [selectedSource, setSelectedSource] = useState<
|
const [selectedSource, setSelectedSource] = useState<
|
||||||
"raw" | "clean" | "sim" | "all"
|
"raw" | "clean" | "sim" | "all"
|
||||||
>(() => (deviceIds.length === 1 ? "all" : "clean"));
|
>(() => (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(() => {
|
useEffect(() => {
|
||||||
setActiveTab(defaultTab);
|
setActiveTab(defaultTab);
|
||||||
}, [defaultTab]);
|
}, [defaultTab]);
|
||||||
@@ -593,7 +555,7 @@ const SCADADataPanel: React.FC<SCADADataPanelProps> = ({
|
|||||||
return deviceIds.flatMap<GridColDef>((id) => [
|
return deviceIds.flatMap<GridColDef>((id) => [
|
||||||
{
|
{
|
||||||
field: `${id}_raw`,
|
field: `${id}_raw`,
|
||||||
headerName: `${deviceLabels?.[id] ?? id} (原始)`,
|
headerName: `${id} (原始)`,
|
||||||
minWidth: 140,
|
minWidth: 140,
|
||||||
flex: 1,
|
flex: 1,
|
||||||
valueFormatter: (value: any) => {
|
valueFormatter: (value: any) => {
|
||||||
@@ -606,7 +568,7 @@ const SCADADataPanel: React.FC<SCADADataPanelProps> = ({
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
field: `${id}_clean`,
|
field: `${id}_clean`,
|
||||||
headerName: `${deviceLabels?.[id] ?? id} (清洗)`,
|
headerName: `${id} (清洗)`,
|
||||||
minWidth: 140,
|
minWidth: 140,
|
||||||
flex: 1,
|
flex: 1,
|
||||||
valueFormatter: (value: any) => {
|
valueFormatter: (value: any) => {
|
||||||
@@ -619,7 +581,7 @@ const SCADADataPanel: React.FC<SCADADataPanelProps> = ({
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
field: `${id}_sim`,
|
field: `${id}_sim`,
|
||||||
headerName: `${deviceLabels?.[id] ?? id} (模拟)`,
|
headerName: `${id} (模拟)`,
|
||||||
minWidth: 140,
|
minWidth: 140,
|
||||||
flex: 1,
|
flex: 1,
|
||||||
valueFormatter: (value: any) => {
|
valueFormatter: (value: any) => {
|
||||||
@@ -635,7 +597,7 @@ const SCADADataPanel: React.FC<SCADADataPanelProps> = ({
|
|||||||
// 单一数据源模式:只显示选中的数据源
|
// 单一数据源模式:只显示选中的数据源
|
||||||
return deviceIds.map<GridColDef>((id) => ({
|
return deviceIds.map<GridColDef>((id) => ({
|
||||||
field: `${id}_${selectedSource}`,
|
field: `${id}_${selectedSource}`,
|
||||||
headerName: deviceLabels?.[id] ?? id,
|
headerName: id,
|
||||||
minWidth: 140,
|
minWidth: 140,
|
||||||
flex: 1,
|
flex: 1,
|
||||||
valueFormatter: (value: any) => {
|
valueFormatter: (value: any) => {
|
||||||
@@ -652,13 +614,13 @@ const SCADADataPanel: React.FC<SCADADataPanelProps> = ({
|
|||||||
const cols: GridColDef[] = [];
|
const cols: GridColDef[] = [];
|
||||||
|
|
||||||
deviceIds.forEach((id) => {
|
deviceIds.forEach((id) => {
|
||||||
const deviceName = deviceLabels?.[id] ?? id;
|
const deviceName = id;
|
||||||
|
|
||||||
// 为每个设备的每种数据类型创建列
|
// 为每个设备的每种数据类型创建列
|
||||||
const suffixes = [
|
const suffixes = [
|
||||||
{ key: 'raw', name: '原始值' },
|
{ key: "raw", name: "原始值" },
|
||||||
{ key: 'clean', name: '清洗值' },
|
{ key: "clean", name: "清洗值" },
|
||||||
{ key: 'sim', name: '模拟值' }
|
{ key: "sim", name: "模拟值" },
|
||||||
];
|
];
|
||||||
|
|
||||||
suffixes.forEach(({ key, name }) => {
|
suffixes.forEach(({ key, name }) => {
|
||||||
@@ -691,7 +653,7 @@ const SCADADataPanel: React.FC<SCADADataPanelProps> = ({
|
|||||||
})();
|
})();
|
||||||
|
|
||||||
return [...base, ...dynamic];
|
return [...base, ...dynamic];
|
||||||
}, [deviceIds, deviceLabels, fractionDigits, showCleaning, selectedSource, dataset]);
|
}, [deviceIds, fractionDigits, showCleaning, selectedSource, dataset]);
|
||||||
|
|
||||||
const rows = useMemo(
|
const rows = useMemo(
|
||||||
() =>
|
() =>
|
||||||
@@ -754,7 +716,7 @@ const SCADADataPanel: React.FC<SCADADataPanelProps> = ({
|
|||||||
if (selectedSource === "all") {
|
if (selectedSource === "all") {
|
||||||
return deviceIds.flatMap((id, index) => [
|
return deviceIds.flatMap((id, index) => [
|
||||||
{
|
{
|
||||||
name: `${deviceLabels?.[id] ?? id} (原始)`,
|
name: `${id} (原始)`,
|
||||||
type: "line",
|
type: "line",
|
||||||
symbol: "none",
|
symbol: "none",
|
||||||
sampling: "lttb",
|
sampling: "lttb",
|
||||||
@@ -762,7 +724,7 @@ const SCADADataPanel: React.FC<SCADADataPanelProps> = ({
|
|||||||
data: dataset.map((item) => item[`${id}_raw`]),
|
data: dataset.map((item) => item[`${id}_raw`]),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: `${deviceLabels?.[id] ?? id} (清洗)`,
|
name: `${id} (清洗)`,
|
||||||
type: "line",
|
type: "line",
|
||||||
symbol: "none",
|
symbol: "none",
|
||||||
sampling: "lttb",
|
sampling: "lttb",
|
||||||
@@ -770,7 +732,7 @@ const SCADADataPanel: React.FC<SCADADataPanelProps> = ({
|
|||||||
data: dataset.map((item) => item[`${id}_clean`]),
|
data: dataset.map((item) => item[`${id}_clean`]),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: `${deviceLabels?.[id] ?? id} (模拟)`,
|
name: `${id} (模拟)`,
|
||||||
type: "line",
|
type: "line",
|
||||||
symbol: "none",
|
symbol: "none",
|
||||||
sampling: "lttb",
|
sampling: "lttb",
|
||||||
@@ -780,7 +742,7 @@ const SCADADataPanel: React.FC<SCADADataPanelProps> = ({
|
|||||||
]);
|
]);
|
||||||
} else {
|
} else {
|
||||||
return deviceIds.map((id, index) => ({
|
return deviceIds.map((id, index) => ({
|
||||||
name: deviceLabels?.[id] ?? id,
|
name: id,
|
||||||
type: "line",
|
type: "line",
|
||||||
symbol: "none",
|
symbol: "none",
|
||||||
sampling: "lttb",
|
sampling: "lttb",
|
||||||
@@ -798,7 +760,7 @@ const SCADADataPanel: React.FC<SCADADataPanelProps> = ({
|
|||||||
);
|
);
|
||||||
if (hasData) {
|
if (hasData) {
|
||||||
series.push({
|
series.push({
|
||||||
name: `${deviceLabels?.[id] ?? id} (${
|
name: `${id} (${
|
||||||
suffix === "raw"
|
suffix === "raw"
|
||||||
? "原始"
|
? "原始"
|
||||||
: suffix === "clean"
|
: suffix === "clean"
|
||||||
@@ -831,7 +793,7 @@ const SCADADataPanel: React.FC<SCADADataPanelProps> = ({
|
|||||||
// 如果没有clean/raw/sim数据,则使用fallback
|
// 如果没有clean/raw/sim数据,则使用fallback
|
||||||
if (series.length === 0) {
|
if (series.length === 0) {
|
||||||
series.push({
|
series.push({
|
||||||
name: deviceLabels?.[id] ?? id,
|
name: id,
|
||||||
type: "line",
|
type: "line",
|
||||||
symbol: "none",
|
symbol: "none",
|
||||||
sampling: "lttb",
|
sampling: "lttb",
|
||||||
@@ -943,6 +905,7 @@ const SCADADataPanel: React.FC<SCADADataPanelProps> = ({
|
|||||||
rows={rows}
|
rows={rows}
|
||||||
columns={columns}
|
columns={columns}
|
||||||
columnBufferPx={100}
|
columnBufferPx={100}
|
||||||
|
localeText={zhCN.components.MuiDataGrid.defaultProps.localeText}
|
||||||
initialState={{
|
initialState={{
|
||||||
pagination: {
|
pagination: {
|
||||||
paginationModel: { pageSize: 50, page: 0 },
|
paginationModel: { pageSize: 50, page: 0 },
|
||||||
|
|||||||
Reference in New Issue
Block a user