OrgTJWater/TJWaterFrontend_Refine
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

完善Toolbar和HistoryDataPanel的交互函数

Browse Source
This commit is contained in:
JIANG
2025-12-16 18:30:47 +08:00
parent 05f8e500d6
commit 3a97e01dda
3 changed files with 164 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
src/app/OlMap/Controls/HistoryDataPanel.tsx
View File

@@ -90,7 +90,7 @@ const fetchFromBackend = async (
const end_time = dayjs(range.to).toISOString();
// 监测值数据接口
const monitoredDataUrl = `${config.BACKEND_URL}/timescaledb/scada/by-ids-field-time-range?device_ids=${device_ids}&field=monitored_value&start_time=${start_time}&end_time=${end_time}`;
const rawDataUrl = `${config.BACKEND_URL}/timescaledb/scada/by-ids-field-time-range?device_ids=${device_ids}&field=raw_value&start_time=${start_time}&end_time=${end_time}`;
// 清洗数据接口
const cleanedDataUrl = `${config.BACKEND_URL}/timescaledb/scada/by-ids-field-time-range?device_ids=${device_ids}&field=cleaned_value&start_time=${start_time}&end_time=${end_time}`;
// 模拟数据接口
@@ -101,32 +101,32 @@ const fetchFromBackend = async (
try {
if (type === "none") {
// 查询清洗值和监测值
const [cleanedRes, monitoredRes] = await Promise.all([
const [cleanedRes, rawRes] = await Promise.all([
fetch(cleanedDataUrl)
.then((r) => (r.ok ? r.json() : null))
.catch(() => null),
fetch(monitoredDataUrl)
fetch(rawDataUrl)
.then((r) => (r.ok ? r.json() : null))
.catch(() => null),
]);
const cleanedData = transformBackendData(cleanedRes, deviceIds);
const monitoredData = transformBackendData(monitoredRes, deviceIds);
const rawData = transformBackendData(rawRes, deviceIds);
return mergeTimeSeriesData(
cleanedData,
monitoredData,
rawData,
deviceIds,
"clean",
"monitored"
"raw"
);
} else if (type === "scheme") {
// 查询策略模拟值、清洗值和监测值
const [cleanedRes, monitoredRes, schemeSimRes] = await Promise.all([
const [cleanedRes, rawRes, schemeSimRes] = await Promise.all([
fetch(cleanedDataUrl)
.then((r) => (r.ok ? r.json() : null))
.catch(() => null),
fetch(monitoredDataUrl)
fetch(rawDataUrl)
.then((r) => (r.ok ? r.json() : null))
.catch(() => null),
fetch(schemeSimulationDataUrl)
@@ -135,14 +135,14 @@ const fetchFromBackend = async (
]);
const cleanedData = transformBackendData(cleanedRes, deviceIds);
const monitoredData = transformBackendData(monitoredRes, deviceIds);
const rawData = transformBackendData(rawRes, deviceIds);
const schemeSimData = transformBackendData(schemeSimRes, deviceIds);
// 合并三组数据
const timeMap = new Map<string, Record<string, number | null>>();
[cleanedData, monitoredData, schemeSimData].forEach((data, index) => {
const suffix = ["clean", "monitored", "scheme_sim"][index];
[cleanedData, rawData, schemeSimData].forEach((data, index) => {
const suffix = ["clean", "raw", "scheme_sim"][index];
data.forEach((point) => {
if (!timeMap.has(point.timestamp)) {
timeMap.set(point.timestamp, {});
@@ -172,11 +172,11 @@ const fetchFromBackend = async (
return result;
} else {
// realtime: 查询模拟值、清洗值和监测值
const [cleanedRes, monitoredRes, simulationRes] = await Promise.all([
const [cleanedRes, rawRes, simulationRes] = await Promise.all([
fetch(cleanedDataUrl)
.then((r) => (r.ok ? r.json() : null))
.catch(() => null),
fetch(monitoredDataUrl)
fetch(rawDataUrl)
.then((r) => (r.ok ? r.json() : null))
.catch(() => null),
fetch(simulationDataUrl)
@@ -185,14 +185,14 @@ const fetchFromBackend = async (
]);
const cleanedData = transformBackendData(cleanedRes, deviceIds);
const monitoredData = transformBackendData(monitoredRes, deviceIds);
const rawData = transformBackendData(rawRes, deviceIds);
const simulationData = transformBackendData(simulationRes, deviceIds);
// 合并三组数据
const timeMap = new Map<string, Record<string, number | null>>();
[cleanedData, monitoredData, simulationData].forEach((data, index) => {
const suffix = ["clean", "monitored", "sim"][index];
[cleanedData, rawData, simulationData].forEach((data, index) => {
const suffix = ["clean", "raw", "sim"][index];
data.forEach((point) => {
if (!timeMap.has(point.timestamp)) {
timeMap.set(point.timestamp, {});
@@ -351,7 +351,7 @@ const buildDataset = (
};
deviceIds.forEach((id) => {
["clean", "monitored", "sim", "scheme_sim"].forEach((suffix) => {
["clean", "raw", "sim", "scheme_sim"].forEach((suffix) => {
const key = `${id}_${suffix}`;
const value = point.values[key];
if (value !== undefined && value !== null) {
@@ -520,9 +520,30 @@ const SCADADataPanel: React.FC<SCADADataPanelProps> = ({
];
const dynamic = (() => {
return deviceIds.map<GridColDef>((id) => ({
field: id,
headerName: deviceLabels?.[id] ?? id,
const cols: GridColDef[] = [];
deviceIds.forEach((id) => {
const deviceName = deviceLabels?.[id] ?? id;
// 为每个设备的每种数据类型创建列
const suffixes = [
{ key: "clean", name: "清洗值" },
{ key: "raw", name: "监测值" },
{ key: "sim", name: "模拟值" },
{ key: "scheme_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,
headerName: `${deviceName} (${name})`,
minWidth: 140,
flex: 1,
valueFormatter: (value: any) => {
@@ -532,11 +553,16 @@ const SCADADataPanel: React.FC<SCADADataPanelProps> = ({
}
return String(value);
},
}));
});
}
});
});
return cols;
})();
return [...base, ...dynamic];
}, [deviceIds, deviceLabels, fractionDigits, selectedSource]);
}, [deviceIds, deviceLabels, fractionDigits, dataset]);
const rows = useMemo(
() =>
@@ -597,8 +623,7 @@ const SCADADataPanel: React.FC<SCADADataPanelProps> = ({
const getSeries = () => {
return deviceIds.flatMap((id, index) => {
const series = [];
["clean", "monitored", "sim", "scheme_sim"].forEach(
(suffix, sIndex) => {
["clean", "raw", "sim", "scheme_sim"].forEach((suffix, sIndex) => {
const key = `${id}_${suffix}`;
const hasData = dataset.some(
(item) => item[key] !== null && item[key] !== undefined
@@ -607,7 +632,7 @@ const SCADADataPanel: React.FC<SCADADataPanelProps> = ({
const displayName =
suffix === "clean"
? "清洗值"
: suffix === "monitored"
: suffix === "raw"
? "监测值"
: suffix === "sim"
? "模拟"
@@ -637,8 +662,7 @@ const SCADADataPanel: React.FC<SCADADataPanelProps> = ({
},
});
}
}
);
});
// 如果没有任何数据，则使用fallback
if (series.length === 0) {
series.push({
@@ -955,7 +979,7 @@ const SCADADataPanel: React.FC<SCADADataPanelProps> = ({
color="warning.main"
sx={{ mt: 1, display: "block" }}
>
未选择任何设备，无法获取数据。
请选择一个要素以查看其历史数据。
</Typography>
)}
{error && (

28
src/app/OlMap/Controls/Toolbar.tsx
View File

@@ -43,6 +43,7 @@ const Toolbar: React.FC<ToolbarProps> = ({ hiddenButtons, queryType }) => {
const [showHistoryPanel, setShowHistoryPanel] = useState<boolean>(false);
const [highlightLayer, setHighlightLayer] =
useState<VectorLayer<VectorSource> | null>(null);
const [featureId, setFeatureId] = useState<string>("");
// 样式状态管理 - 在 Toolbar 中管理，带有默认样式
const [layerStyleStates, setLayerStyleStates] = useState<LayerStyleState[]>([
@@ -186,14 +187,30 @@ const Toolbar: React.FC<ToolbarProps> = ({ hiddenButtons, queryType }) => {
);
// 添加矢量属性查询事件监听器
useEffect(() => {
if (!activeTools.includes("info") || !map) return;
if (!map) return;
// 监听 info 或 history 工具激活时添加
if (activeTools.includes("info") || activeTools.includes("history")) {
map.on("click", handleMapClickSelectFeatures);
return () => {
map.un("click", handleMapClickSelectFeatures);
};
}
}, [activeTools, map, handleMapClickSelectFeatures]);
// 监听 highlightFeature 变化，更新 featureId
useEffect(() => {
if (highlightFeature) {
const id = highlightFeature.getProperties().id;
if (id) {
setFeatureId(id);
}
console.log("高亮要素 ID:", id);
} else {
setFeatureId("");
}
}, [highlightFeature]);
// 处理工具栏按钮点击事件
const handleToolClick = (tool: string) => {
// 样式工具的特殊处理 - 只有再次点击时才会取消激活和关闭
@@ -652,7 +669,14 @@ const Toolbar: React.FC<ToolbarProps> = ({ hiddenButtons, queryType }) => {
setLayerStyleStates={setLayerStyleStates}
/>
)}
{showHistoryPanel && <HistoryDataPanel deviceIds={[]} />}
{showHistoryPanel && (
<HistoryDataPanel
deviceIds={featureId ? [featureId] : []}
scheme_type="burst_Analysis"
scheme_name={schemeName}
type={queryType as "realtime" | "scheme" | "none"}
/>
)}
{/* 图例显示 */}
{activeLegendConfigs.length > 0 && (

36
src/components/olmap/SCADADataPanel.tsx
View File

@@ -648,9 +648,30 @@ const SCADADataPanel: React.FC<SCADADataPanelProps> = ({
}));
}
} else {
return deviceIds.map<GridColDef>((id) => ({
field: id,
headerName: deviceLabels?.[id] ?? id,
// 非清洗模式：显示所有设备的所有有数据的列
const cols: GridColDef[] = [];
deviceIds.forEach((id) => {
const deviceName = deviceLabels?.[id] ?? id;
// 为每个设备的每种数据类型创建列
const suffixes = [
{ 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,
headerName: `${deviceName} (${name})`,
minWidth: 140,
flex: 1,
valueFormatter: (value: any) => {
@@ -660,12 +681,17 @@ const SCADADataPanel: React.FC<SCADADataPanelProps> = ({
}
return String(value);
},
}));
});
}
});
});
return cols;
}
})();
return [...base, ...dynamic];
}, [deviceIds, deviceLabels, fractionDigits, showCleaning, selectedSource]);
}, [deviceIds, deviceLabels, fractionDigits, showCleaning, selectedSource, dataset]);
const rows = useMemo(
() =>