完善爆管分析面板；整合地图查询函数
This commit is contained in:
JIANG
@@ -1,6 +1,6 @@
|
||||
"use client";
|
||||
|
||||
import React, { useState, useRef, useEffect } from "react";
|
||||
import React, { useState, useRef, useEffect, useCallback } from "react";
|
||||
import {
|
||||
Box,
|
||||
TextField,
|
||||
@@ -20,12 +20,11 @@ import VectorLayer from "ol/layer/Vector";
|
||||
import VectorSource from "ol/source/Vector";
|
||||
import Style from "ol/style/Style";
|
||||
import Stroke from "ol/style/Stroke";
|
||||
import GeoJson from "ol/format/GeoJSON";
|
||||
import config from "@config/config";
|
||||
import type { Feature } from "ol";
|
||||
import type { Geometry } from "ol/geom";
|
||||
|
||||
const mapUrl = config.mapUrl;
|
||||
import { handleMapClickSelectFeatures as mapClickSelectFeatures } from "@/utils/mapQueryService";
|
||||
import Feature from "ol/Feature";
|
||||
import { useNotification } from "@refinedev/core";
|
||||
import axios from "axios";
|
||||
import { config, NETWORK_NAME } from "@/config/config";
|
||||
|
||||
interface PipePoint {
|
||||
id: string;
|
||||
@@ -34,36 +33,23 @@ interface PipePoint {
|
||||
feature?: any; // 存储管道要素用于高亮
|
||||
}
|
||||
|
||||
interface AnalysisParametersProps {
|
||||
onAnalyze?: (params: AnalysisParams) => void;
|
||||
}
|
||||
|
||||
interface AnalysisParams {
|
||||
pipePoints: PipePoint[];
|
||||
startTime: Dayjs | null;
|
||||
duration: number;
|
||||
schemeName: string;
|
||||
}
|
||||
|
||||
const AnalysisParameters: React.FC<AnalysisParametersProps> = ({
|
||||
onAnalyze,
|
||||
}) => {
|
||||
const AnalysisParameters: React.FC = () => {
|
||||
const map = useMap();
|
||||
const { open, close } = useNotification();
|
||||
|
||||
const [pipePoints, setPipePoints] = useState<PipePoint[]>([
|
||||
{ id: "541022", diameter: 110, area: 15 },
|
||||
{ id: "532748", diameter: 110, area: 15 },
|
||||
]);
|
||||
const [startTime, setStartTime] = useState<Dayjs | null>(
|
||||
dayjs("2025-10-21T00:00:00")
|
||||
);
|
||||
const [pipePoints, setPipePoints] = useState<PipePoint[]>([]);
|
||||
const [startTime, setStartTime] = useState<Dayjs | null>(dayjs(new Date()));
|
||||
const [duration, setDuration] = useState<number>(3000);
|
||||
const [schemeName, setSchemeName] = useState<string>("Fangan1021100506");
|
||||
const [schemeName, setSchemeName] = useState<string>(
|
||||
"FANGAN" + new Date().getTime()
|
||||
);
|
||||
const [network, setNetwork] = useState<string>(NETWORK_NAME);
|
||||
const [isSelecting, setIsSelecting] = useState<boolean>(false);
|
||||
|
||||
const highlightLayerRef = useRef<VectorLayer<VectorSource> | null>(null);
|
||||
const clickListenerRef = useRef<((evt: any) => void) | null>(null);
|
||||
|
||||
const [highlightLayer, setHighlightLayer] =
|
||||
useState<VectorLayer<VectorSource> | null>(null);
|
||||
const [highlightFeatures, setHighlightFeatures] = useState<Feature[]>([]);
|
||||
const [analyzing, setAnalyzing] = useState<boolean>(false);
|
||||
// 初始化管道图层和高亮图层
|
||||
useEffect(() => {
|
||||
if (!map) return;
|
||||
@@ -71,80 +57,130 @@ const AnalysisParameters: React.FC<AnalysisParametersProps> = ({
|
||||
// 创建高亮图层
|
||||
const highlightLayer = new VectorLayer({
|
||||
source: new VectorSource(),
|
||||
style: new Style({
|
||||
stroke: new Stroke({
|
||||
color: "#ff0000",
|
||||
width: 5,
|
||||
style: [
|
||||
// 外层发光效果（底层）
|
||||
new Style({
|
||||
stroke: new Stroke({
|
||||
color: "rgba(255, 0, 0, 0.3)",
|
||||
width: 12,
|
||||
}),
|
||||
}),
|
||||
}),
|
||||
// 主线条 - 使用虚线表示爆管
|
||||
new Style({
|
||||
stroke: new Stroke({
|
||||
color: "#ff0000",
|
||||
width: 6,
|
||||
lineDash: [15, 10], // 虚线样式，表示管道损坏/爆管
|
||||
}),
|
||||
}),
|
||||
// 内层高亮线
|
||||
new Style({
|
||||
stroke: new Stroke({
|
||||
color: "#ff6666",
|
||||
width: 3,
|
||||
lineDash: [15, 10],
|
||||
}),
|
||||
}),
|
||||
],
|
||||
properties: {
|
||||
name: "高亮管道",
|
||||
value: "highlight_pipeline",
|
||||
},
|
||||
zIndex: 999,
|
||||
});
|
||||
|
||||
map.addLayer(highlightLayer);
|
||||
highlightLayerRef.current = highlightLayer;
|
||||
setHighlightLayer(highlightLayer);
|
||||
|
||||
return () => {
|
||||
map.removeLayer(highlightLayer);
|
||||
if (clickListenerRef.current) {
|
||||
map.un("click", clickListenerRef.current);
|
||||
}
|
||||
map.un("click", handleMapClickSelectFeatures);
|
||||
};
|
||||
}, [map]);
|
||||
// 高亮要素的函数
|
||||
useEffect(() => {
|
||||
if (!highlightLayer) {
|
||||
return;
|
||||
}
|
||||
const source = highlightLayer.getSource();
|
||||
if (!source) {
|
||||
return;
|
||||
}
|
||||
// 清除之前的高亮
|
||||
source.clear();
|
||||
// 添加新的高亮要素
|
||||
highlightFeatures.forEach((feature) => {
|
||||
if (feature instanceof Feature) {
|
||||
source.addFeature(feature);
|
||||
}
|
||||
});
|
||||
}, [highlightFeatures]);
|
||||
|
||||
// 同步高亮要素和爆管点信息
|
||||
useEffect(() => {
|
||||
setPipePoints((prevPipes) => {
|
||||
// 移除不在highlightFeatures中的
|
||||
const filtered = prevPipes.filter((pipe) =>
|
||||
highlightFeatures.some(
|
||||
(feature) => feature.getProperties().id === pipe.id
|
||||
)
|
||||
);
|
||||
// 添加新的
|
||||
const newPipes = highlightFeatures
|
||||
.filter(
|
||||
(feature) =>
|
||||
!filtered.some((p) => p.id === feature.getProperties().id)
|
||||
)
|
||||
.map((feature) => {
|
||||
const properties = feature.getProperties();
|
||||
console.log("管道属性:", feature, properties);
|
||||
return {
|
||||
id: properties.id,
|
||||
diameter: properties.diameter || 0,
|
||||
area: 15,
|
||||
feature: feature,
|
||||
};
|
||||
});
|
||||
return [...filtered, ...newPipes];
|
||||
});
|
||||
}, [highlightFeatures]);
|
||||
|
||||
// 地图点击选择要素事件处理函数
|
||||
const handleMapClickSelectFeatures = useCallback(
|
||||
async (event: { coordinate: number[] }) => {
|
||||
if (!map) return;
|
||||
const feature = await mapClickSelectFeatures(event, map);
|
||||
if (!feature) return;
|
||||
if (feature.getGeometry()?.getType() === "Point") {
|
||||
// 点类型几何不处理
|
||||
open?.({
|
||||
type: "error",
|
||||
message: "请选择线类型管道要素。",
|
||||
});
|
||||
return;
|
||||
}
|
||||
const featureId = feature.getProperties().id;
|
||||
setHighlightFeatures((prev) => {
|
||||
const existingIndex = prev.findIndex(
|
||||
(f) => f.getProperties().id === featureId
|
||||
);
|
||||
if (existingIndex !== -1) {
|
||||
// 如果已存在，移除
|
||||
return prev.filter((_, i) => i !== existingIndex);
|
||||
} else {
|
||||
// 如果不存在，添加
|
||||
return [...prev, feature];
|
||||
}
|
||||
});
|
||||
},
|
||||
[map]
|
||||
);
|
||||
|
||||
// 开始选择管道
|
||||
const handleStartSelection = () => {
|
||||
if (!map) return;
|
||||
|
||||
setIsSelecting(true);
|
||||
// 显示管道图层
|
||||
|
||||
// 注册点击事件
|
||||
const clickListener = (evt: any) => {
|
||||
let clickedFeature: any = null;
|
||||
|
||||
map.forEachFeatureAtPixel(
|
||||
evt.pixel,
|
||||
(feature) => {
|
||||
if (!clickedFeature) {
|
||||
clickedFeature = feature;
|
||||
}
|
||||
return true;
|
||||
},
|
||||
{ hitTolerance: 5 }
|
||||
);
|
||||
|
||||
if (clickedFeature) {
|
||||
const properties = clickedFeature.getProperties();
|
||||
const pipeId = properties.Id || properties.id || properties.ID;
|
||||
const diameter = properties.Diameter || properties.diameter || 100;
|
||||
|
||||
// 检查是否已存在
|
||||
const exists = pipePoints.some((pipe) => pipe.id === pipeId);
|
||||
if (!exists && pipeId) {
|
||||
const newPipe: PipePoint = {
|
||||
id: String(pipeId),
|
||||
diameter: Number(diameter),
|
||||
area: 15,
|
||||
feature: clickedFeature,
|
||||
};
|
||||
|
||||
setPipePoints((prev) => [...prev, newPipe]);
|
||||
|
||||
// 添加到高亮图层
|
||||
const highlightSource = highlightLayerRef.current?.getSource();
|
||||
if (highlightSource) {
|
||||
highlightSource.addFeature(clickedFeature);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
clickListenerRef.current = clickListener;
|
||||
map.on("click", clickListener);
|
||||
map.on("click", handleMapClickSelectFeatures);
|
||||
};
|
||||
|
||||
// 结束选择管道
|
||||
@@ -154,26 +190,14 @@ const AnalysisParameters: React.FC<AnalysisParametersProps> = ({
|
||||
setIsSelecting(false);
|
||||
|
||||
// 移除点击事件
|
||||
if (clickListenerRef.current) {
|
||||
map.un("click", clickListenerRef.current);
|
||||
clickListenerRef.current = null;
|
||||
}
|
||||
map.un("click", handleMapClickSelectFeatures);
|
||||
};
|
||||
|
||||
const handleRemovePipe = (id: string) => {
|
||||
// 找到要删除的管道
|
||||
const pipeToRemove = pipePoints.find((pipe) => pipe.id === id);
|
||||
|
||||
// 从高亮图层中移除对应的要素
|
||||
if (pipeToRemove && pipeToRemove.feature && highlightLayerRef.current) {
|
||||
const highlightSource = highlightLayerRef.current.getSource();
|
||||
if (highlightSource) {
|
||||
highlightSource.removeFeature(pipeToRemove.feature);
|
||||
}
|
||||
}
|
||||
|
||||
// 从状态中移除
|
||||
setPipePoints((prev) => prev.filter((pipe) => pipe.id !== id));
|
||||
// 从高亮features中移除
|
||||
setHighlightFeatures((prev) =>
|
||||
prev.filter((f) => f.getProperties().id !== id)
|
||||
);
|
||||
};
|
||||
|
||||
const handleAreaChange = (id: string, value: string) => {
|
||||
@@ -183,14 +207,55 @@ const AnalysisParameters: React.FC<AnalysisParametersProps> = ({
|
||||
);
|
||||
};
|
||||
|
||||
const handleAnalyze = () => {
|
||||
if (onAnalyze) {
|
||||
onAnalyze({
|
||||
pipePoints,
|
||||
startTime,
|
||||
duration,
|
||||
schemeName,
|
||||
const handleAnalyze = async () => {
|
||||
setAnalyzing(true);
|
||||
|
||||
const burst_ID = pipePoints.map((pipe) => pipe.id);
|
||||
const burst_size = pipePoints.map((pipe) =>
|
||||
parseInt(pipe.area.toString(), 10)
|
||||
);
|
||||
const modify_pattern_start_time = startTime
|
||||
? startTime.format("YYYY-MM-DDTHH:mm:ssZ")
|
||||
: "";
|
||||
const modify_total_duration = duration;
|
||||
|
||||
const body = {
|
||||
name: network,
|
||||
modify_pattern_start_time: modify_pattern_start_time,
|
||||
burst_ID: burst_ID,
|
||||
burst_size: burst_size,
|
||||
modify_total_duration: modify_total_duration,
|
||||
scheme_Name: schemeName,
|
||||
};
|
||||
|
||||
try {
|
||||
await axios.post(`${config.backendUrl}/burst_analysis/`, body, {
|
||||
headers: {
|
||||
"Accept-Encoding": "gzip",
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
});
|
||||
|
||||
// 更新弹窗为成功状态
|
||||
open?.({
|
||||
key: "burst-analysis",
|
||||
type: "success",
|
||||
message: "分析请求提交成功",
|
||||
description: "方案已成功提交，正在进行分析",
|
||||
});
|
||||
} catch (error) {
|
||||
console.error("分析请求失败:", error);
|
||||
|
||||
// 更新弹窗为失败状态
|
||||
open?.({
|
||||
key: "burst-analysis",
|
||||
type: "error",
|
||||
message: "提交分析失败",
|
||||
description:
|
||||
error instanceof Error ? error.message : "请检查网络连接或稍后重试",
|
||||
});
|
||||
} finally {
|
||||
setAnalyzing(false);
|
||||
}
|
||||
};
|
||||
|
||||
@@ -339,7 +404,7 @@ const AnalysisParameters: React.FC<AnalysisParametersProps> = ({
|
||||
</Box>
|
||||
|
||||
{/* 方案名称 */}
|
||||
<Box className="mb-6">
|
||||
<Box className="mb-4">
|
||||
<Typography variant="subtitle2" className="mb-2 font-medium">
|
||||
方案名称
|
||||
</Typography>
|
||||
@@ -359,9 +424,10 @@ const AnalysisParameters: React.FC<AnalysisParametersProps> = ({
|
||||
variant="contained"
|
||||
size="large"
|
||||
onClick={handleAnalyze}
|
||||
disabled={analyzing}
|
||||
className="bg-blue-600 hover:bg-blue-700"
|
||||
>
|
||||
方案分析
|
||||
{analyzing ? "方案提交中..." : "方案分析"}
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
@@ -1,20 +1,19 @@
|
||||
"use client";
|
||||
|
||||
import React, { useState } from "react";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Typography,
|
||||
Checkbox,
|
||||
FormControlLabel,
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableContainer,
|
||||
TableHead,
|
||||
TableRow,
|
||||
Paper,
|
||||
IconButton,
|
||||
Card,
|
||||
CardContent,
|
||||
Chip,
|
||||
Tooltip,
|
||||
Collapse,
|
||||
Link,
|
||||
} from "@mui/material";
|
||||
import {
|
||||
Info as InfoIcon,
|
||||
@@ -25,77 +24,276 @@ import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
|
||||
import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
|
||||
import dayjs, { Dayjs } from "dayjs";
|
||||
import "dayjs/locale/zh-cn";
|
||||
import axios from "axios";
|
||||
import moment from "moment";
|
||||
import { config, NETWORK_NAME } from "@config/config";
|
||||
import { useNotification } from "@refinedev/core";
|
||||
|
||||
import { queryFeaturesByIds } from "@/utils/mapQueryService";
|
||||
import { useMap } from "@app/OlMap/MapComponent";
|
||||
import * as turf from "@turf/turf";
|
||||
import { GeoJSON } from "ol/format";
|
||||
import VectorLayer from "ol/layer/Vector";
|
||||
import VectorSource from "ol/source/Vector";
|
||||
import { Stroke, Style } from "ol/style";
|
||||
import Feature from "ol/Feature";
|
||||
import { set } from "ol/transform";
|
||||
|
||||
interface SchemeDetail {
|
||||
burst_ID: string[];
|
||||
burst_size: number[];
|
||||
modify_total_duration: number;
|
||||
modify_fixed_pump_pattern: any;
|
||||
modify_valve_opening: any;
|
||||
modify_variable_pump_pattern: any;
|
||||
}
|
||||
|
||||
interface SchemeRecord {
|
||||
id: number;
|
||||
schemeName: string;
|
||||
type: string;
|
||||
user: string;
|
||||
createTime: string;
|
||||
create_time: string;
|
||||
startTime: string;
|
||||
// 详情信息
|
||||
schemeDetail?: SchemeDetail;
|
||||
}
|
||||
|
||||
interface SchemaItem {
|
||||
scheme_id: number;
|
||||
scheme_name: string;
|
||||
scheme_type: string;
|
||||
username: string;
|
||||
create_time: string;
|
||||
scheme_start_time: string;
|
||||
scheme_detail?: SchemeDetail;
|
||||
}
|
||||
|
||||
interface SchemeQueryProps {
|
||||
schemes?: SchemeRecord[];
|
||||
onSchemesChange?: (schemes: SchemeRecord[]) => void;
|
||||
onViewDetails?: (id: number) => void;
|
||||
onLocate?: (id: number) => void;
|
||||
network?: string;
|
||||
}
|
||||
|
||||
const SchemeQuery: React.FC<SchemeQueryProps> = ({
|
||||
schemes: externalSchemes,
|
||||
onSchemesChange,
|
||||
onViewDetails,
|
||||
onLocate,
|
||||
network = NETWORK_NAME,
|
||||
}) => {
|
||||
const [queryAll, setQueryAll] = useState<boolean>(true);
|
||||
const [queryDate, setQueryDate] = useState<Dayjs | null>(dayjs("2025-10-21"));
|
||||
const [schemes, setSchemes] = useState<SchemeRecord[]>([]);
|
||||
const [queryDate, setQueryDate] = useState<Dayjs | null>(dayjs(new Date()));
|
||||
const [internalSchemes, setInternalSchemes] = useState<SchemeRecord[]>([]);
|
||||
const [loading, setLoading] = useState<boolean>(false);
|
||||
const [expandedId, setExpandedId] = useState<number | null>(null);
|
||||
const { open } = useNotification();
|
||||
|
||||
const handleQuery = () => {
|
||||
// TODO: 实际查询逻辑
|
||||
console.log("查询方案", { queryAll, queryDate });
|
||||
// 这里应该调用API获取数据
|
||||
const [highlightLayer, setHighlightLayer] =
|
||||
useState<VectorLayer<VectorSource> | null>(null);
|
||||
const [highlightFeatures, setHighlightFeatures] = useState<Feature[]>([]);
|
||||
const map = useMap();
|
||||
|
||||
// 使用外部提供的 schemes 或内部状态
|
||||
const schemes =
|
||||
externalSchemes !== undefined ? externalSchemes : internalSchemes;
|
||||
const setSchemes = onSchemesChange || setInternalSchemes;
|
||||
|
||||
// 格式化日期为简短格式
|
||||
const formatTime = (timeStr: string) => {
|
||||
const time = moment(timeStr);
|
||||
return time.format("MM-DD");
|
||||
};
|
||||
|
||||
const handleQuery = async () => {
|
||||
if (!queryAll && !queryDate) return;
|
||||
|
||||
setLoading(true);
|
||||
try {
|
||||
const response = await axios.get(
|
||||
`${config.backendUrl}/getallschemes/?network=${network}`
|
||||
);
|
||||
let filteredResults = response.data;
|
||||
|
||||
if (!queryAll) {
|
||||
const formattedDate = queryDate!.format("YYYY-MM-DD");
|
||||
filteredResults = response.data.filter((item: SchemaItem) => {
|
||||
const itemDate = moment(item.create_time).format("YYYY-MM-DD");
|
||||
return itemDate === formattedDate;
|
||||
});
|
||||
}
|
||||
|
||||
setSchemes(
|
||||
filteredResults.map((item: SchemaItem) => ({
|
||||
id: item.scheme_id,
|
||||
schemeName: item.scheme_name,
|
||||
type: item.scheme_type,
|
||||
user: item.username,
|
||||
create_time: item.create_time,
|
||||
startTime: item.scheme_start_time,
|
||||
schemeDetail: item.scheme_detail,
|
||||
}))
|
||||
);
|
||||
|
||||
if (filteredResults.length === 0) {
|
||||
open?.({
|
||||
type: "error",
|
||||
message: "查询结果",
|
||||
description: queryAll
|
||||
? "没有找到任何方案"
|
||||
: `${queryDate!.format("YYYY-MM-DD")} 没有找到相关方案`,
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("查询请求失败:", error);
|
||||
open?.({
|
||||
type: "error",
|
||||
message: "查询失败",
|
||||
description: "获取方案列表失败，请稍后重试",
|
||||
});
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleLocatePipes = (pipeIds: string[]) => {
|
||||
if (pipeIds.length > 0) {
|
||||
queryFeaturesByIds(pipeIds).then((features) => {
|
||||
if (features.length > 0) {
|
||||
// 设置高亮要素
|
||||
setHighlightFeatures(features);
|
||||
// 将 OpenLayers Feature 转换为 GeoJSON Feature
|
||||
const geojsonFormat = new GeoJSON();
|
||||
const geojsonFeatures = features.map((feature) =>
|
||||
geojsonFormat.writeFeatureObject(feature)
|
||||
);
|
||||
|
||||
const extent = turf.bbox(
|
||||
turf.featureCollection(geojsonFeatures as any)
|
||||
);
|
||||
|
||||
if (extent) {
|
||||
map?.getView().fit(extent, { maxZoom: 18, duration: 1000 });
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
// 初始化管道图层和高亮图层
|
||||
useEffect(() => {
|
||||
if (!map) return;
|
||||
|
||||
// 创建高亮图层 - 爆管管段标识样式
|
||||
const highlightLayer = new VectorLayer({
|
||||
source: new VectorSource(),
|
||||
style: [
|
||||
// 外层发光效果（底层）
|
||||
new Style({
|
||||
stroke: new Stroke({
|
||||
color: "rgba(255, 0, 0, 0.3)",
|
||||
width: 12,
|
||||
}),
|
||||
}),
|
||||
// 主线条 - 使用虚线表示爆管
|
||||
new Style({
|
||||
stroke: new Stroke({
|
||||
color: "#ff0000",
|
||||
width: 6,
|
||||
lineDash: [15, 10], // 虚线样式，表示管道损坏/爆管
|
||||
}),
|
||||
}),
|
||||
// 内层高亮线
|
||||
new Style({
|
||||
stroke: new Stroke({
|
||||
color: "#ff6666",
|
||||
width: 3,
|
||||
lineDash: [15, 10],
|
||||
}),
|
||||
}),
|
||||
],
|
||||
properties: {
|
||||
name: "爆管管段高亮",
|
||||
value: "burst_pipe_highlight",
|
||||
},
|
||||
});
|
||||
|
||||
map.addLayer(highlightLayer);
|
||||
setHighlightLayer(highlightLayer);
|
||||
|
||||
return () => {
|
||||
map.removeLayer(highlightLayer);
|
||||
};
|
||||
}, [map]);
|
||||
|
||||
// 高亮要素的函数
|
||||
useEffect(() => {
|
||||
if (!highlightLayer) {
|
||||
return;
|
||||
}
|
||||
const source = highlightLayer.getSource();
|
||||
if (!source) {
|
||||
return;
|
||||
}
|
||||
// 清除之前的高亮
|
||||
source.clear();
|
||||
// 添加新的高亮要素
|
||||
highlightFeatures.forEach((feature) => {
|
||||
if (feature instanceof Feature) {
|
||||
source.addFeature(feature);
|
||||
}
|
||||
});
|
||||
}, [highlightFeatures]);
|
||||
|
||||
return (
|
||||
<Box className="flex flex-col h-full">
|
||||
{/* 查询条件 */}
|
||||
<Box className="mb-4 p-4 bg-gray-50 rounded">
|
||||
<Box className="flex items-center gap-4 mb-3">
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Checkbox
|
||||
checked={queryAll}
|
||||
onChange={(e) => setQueryAll(e.target.checked)}
|
||||
/>
|
||||
}
|
||||
label="查询全部"
|
||||
/>
|
||||
<LocalizationProvider
|
||||
dateAdapter={AdapterDayjs}
|
||||
adapterLocale="zh-cn"
|
||||
>
|
||||
<DatePicker
|
||||
value={queryDate}
|
||||
onChange={(value) =>
|
||||
value && dayjs.isDayjs(value) && setQueryDate(value)
|
||||
{/* 查询条件 - 单行布局 */}
|
||||
<Box className="mb-2 p-2 bg-gray-50 rounded">
|
||||
<Box className="flex items-center gap-2 justify-between">
|
||||
<Box className="flex items-center gap-2">
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Checkbox
|
||||
checked={queryAll}
|
||||
onChange={(e) => setQueryAll(e.target.checked)}
|
||||
size="small"
|
||||
/>
|
||||
}
|
||||
format="YYYY-MM-DD"
|
||||
disabled={queryAll}
|
||||
slotProps={{
|
||||
textField: {
|
||||
size: "small",
|
||||
className: "flex-1",
|
||||
},
|
||||
}}
|
||||
label={<Typography variant="body2">查询全部</Typography>}
|
||||
className="m-0"
|
||||
/>
|
||||
</LocalizationProvider>
|
||||
<LocalizationProvider
|
||||
dateAdapter={AdapterDayjs}
|
||||
adapterLocale="zh-cn"
|
||||
>
|
||||
<DatePicker
|
||||
value={queryDate}
|
||||
onChange={(value) =>
|
||||
value && dayjs.isDayjs(value) && setQueryDate(value)
|
||||
}
|
||||
format="YYYY-MM-DD"
|
||||
disabled={queryAll}
|
||||
slotProps={{
|
||||
textField: {
|
||||
size: "small",
|
||||
sx: { width: 200 },
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</LocalizationProvider>
|
||||
</Box>
|
||||
<Button
|
||||
variant="contained"
|
||||
onClick={handleQuery}
|
||||
disabled={loading}
|
||||
size="small"
|
||||
className="bg-blue-600 hover:bg-blue-700"
|
||||
sx={{ minWidth: 80 }}
|
||||
>
|
||||
{loading ? "查询中..." : "查询"}
|
||||
</Button>
|
||||
</Box>
|
||||
<Button
|
||||
fullWidth
|
||||
variant="contained"
|
||||
onClick={handleQuery}
|
||||
className="bg-blue-600 hover:bg-blue-700"
|
||||
>
|
||||
查询
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
{/* 结果列表 */}
|
||||
@@ -135,52 +333,259 @@ const SchemeQuery: React.FC<SchemeQueryProps> = ({
|
||||
</Typography>
|
||||
</Box>
|
||||
) : (
|
||||
<TableContainer component={Paper} className="shadow-none">
|
||||
<Table size="small">
|
||||
<TableHead>
|
||||
<TableRow className="bg-gray-50">
|
||||
<TableCell>ID</TableCell>
|
||||
<TableCell>方案名称</TableCell>
|
||||
<TableCell>类型</TableCell>
|
||||
<TableCell>用户</TableCell>
|
||||
<TableCell>创建时间</TableCell>
|
||||
<TableCell>开始时间</TableCell>
|
||||
<TableCell align="center">详情</TableCell>
|
||||
<TableCell align="center">定位</TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{schemes.map((scheme) => (
|
||||
<TableRow key={scheme.id} hover>
|
||||
<TableCell>{scheme.id}</TableCell>
|
||||
<TableCell>{scheme.schemeName}</TableCell>
|
||||
<TableCell>{scheme.type}</TableCell>
|
||||
<TableCell>{scheme.user}</TableCell>
|
||||
<TableCell>{scheme.createTime}</TableCell>
|
||||
<TableCell>{scheme.startTime}</TableCell>
|
||||
<TableCell align="center">
|
||||
<IconButton
|
||||
size="small"
|
||||
onClick={() => onViewDetails?.(scheme.id)}
|
||||
color="primary"
|
||||
<Box className="space-y-2 p-2">
|
||||
<Typography variant="caption" className="text-gray-500 px-2">
|
||||
共 {schemes.length} 条记录
|
||||
</Typography>
|
||||
{schemes.map((scheme) => (
|
||||
<Card
|
||||
key={scheme.id}
|
||||
variant="outlined"
|
||||
className="hover:shadow-md transition-shadow"
|
||||
>
|
||||
<CardContent className="p-3 pb-2 last:pb-3">
|
||||
{/* 主要信息行 */}
|
||||
<Box className="flex items-start justify-between mb-2">
|
||||
<Box className="flex-1 min-w-0">
|
||||
<Box className="flex items-center gap-2 mb-1">
|
||||
<Typography
|
||||
variant="body2"
|
||||
className="font-medium truncate"
|
||||
title={scheme.schemeName}
|
||||
>
|
||||
{scheme.schemeName}
|
||||
</Typography>
|
||||
<Chip
|
||||
label={scheme.type}
|
||||
size="small"
|
||||
className="h-5"
|
||||
color="primary"
|
||||
variant="outlined"
|
||||
/>
|
||||
</Box>
|
||||
<Typography
|
||||
variant="caption"
|
||||
className="text-gray-500 block"
|
||||
>
|
||||
<InfoIcon fontSize="small" />
|
||||
</IconButton>
|
||||
</TableCell>
|
||||
<TableCell align="center">
|
||||
<IconButton
|
||||
size="small"
|
||||
onClick={() => onLocate?.(scheme.id)}
|
||||
color="primary"
|
||||
ID: {scheme.id} · 日期: {formatTime(scheme.create_time)}
|
||||
</Typography>
|
||||
</Box>
|
||||
{/* 操作按钮 */}
|
||||
<Box className="flex gap-1 ml-2">
|
||||
<Tooltip
|
||||
title={
|
||||
expandedId === scheme.id ? "收起详情" : "查看详情"
|
||||
}
|
||||
>
|
||||
<LocationIcon fontSize="small" />
|
||||
</IconButton>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
<IconButton
|
||||
size="small"
|
||||
onClick={() =>
|
||||
setExpandedId(
|
||||
expandedId === scheme.id ? null : scheme.id
|
||||
)
|
||||
}
|
||||
color="primary"
|
||||
className="p-1"
|
||||
>
|
||||
<InfoIcon fontSize="small" />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
<Tooltip title="定位">
|
||||
<IconButton
|
||||
size="small"
|
||||
onClick={() => onLocate?.(scheme.id)}
|
||||
color="primary"
|
||||
className="p-1"
|
||||
>
|
||||
<LocationIcon fontSize="small" />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{/* 可折叠的详细信息 */}
|
||||
<Collapse in={expandedId === scheme.id}>
|
||||
<Box className="mt-2 pt-3 border-t border-gray-200">
|
||||
{/* 信息网格布局 */}
|
||||
<Box className="grid grid-cols-2 gap-x-4 gap-y-3 mb-3">
|
||||
{/* 爆管详情列 */}
|
||||
<Box className="space-y-2">
|
||||
<Box className="space-y-1.5 pl-2">
|
||||
<Box className="flex items-start gap-2">
|
||||
<Typography
|
||||
variant="caption"
|
||||
className="text-gray-600 min-w-[70px] mt-0.5"
|
||||
>
|
||||
管段ID:
|
||||
</Typography>
|
||||
<Box className="flex-1 flex flex-wrap gap-1">
|
||||
{scheme.schemeDetail?.burst_ID?.length ? (
|
||||
scheme.schemeDetail.burst_ID.map(
|
||||
(pipeId, index) => (
|
||||
<Link
|
||||
key={index}
|
||||
component="button"
|
||||
variant="caption"
|
||||
className="font-medium text-blue-600 hover:text-blue-800 underline cursor-pointer"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
handleLocatePipes?.([pipeId]);
|
||||
}}
|
||||
>
|
||||
{pipeId}
|
||||
</Link>
|
||||
)
|
||||
)
|
||||
) : (
|
||||
<Typography
|
||||
variant="caption"
|
||||
className="font-medium text-gray-900"
|
||||
>
|
||||
N/A
|
||||
</Typography>
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
<Box className="flex items-center gap-2">
|
||||
<Typography
|
||||
variant="caption"
|
||||
className="text-gray-600 min-w-[70px]"
|
||||
>
|
||||
管径:
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="caption"
|
||||
className="font-medium text-gray-900"
|
||||
>
|
||||
560 mm
|
||||
</Typography>
|
||||
</Box>
|
||||
<Box className="flex items-center gap-2">
|
||||
<Typography
|
||||
variant="caption"
|
||||
className="text-gray-600 min-w-[70px]"
|
||||
>
|
||||
爆管面积:
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="caption"
|
||||
className="font-medium text-gray-900"
|
||||
>
|
||||
{scheme.schemeDetail?.burst_size?.[0] || "N/A"}{" "}
|
||||
cm²
|
||||
</Typography>
|
||||
</Box>
|
||||
<Box className="flex items-center gap-2">
|
||||
<Typography
|
||||
variant="caption"
|
||||
className="text-gray-600 min-w-[70px]"
|
||||
>
|
||||
持续时间:
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="caption"
|
||||
className="font-medium text-gray-900"
|
||||
>
|
||||
{scheme.schemeDetail?.modify_total_duration ||
|
||||
"N/A"}{" "}
|
||||
秒
|
||||
</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{/* 方案信息列 */}
|
||||
<Box className="space-y-2">
|
||||
<Box className="space-y-1.5 pl-2">
|
||||
<Box className="flex items-center gap-2">
|
||||
<Typography
|
||||
variant="caption"
|
||||
className="text-gray-600 min-w-[70px]"
|
||||
>
|
||||
用户:
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="caption"
|
||||
className="font-medium text-gray-900"
|
||||
>
|
||||
{scheme.user}
|
||||
</Typography>
|
||||
</Box>
|
||||
<Box className="flex items-center gap-2">
|
||||
<Typography
|
||||
variant="caption"
|
||||
className="text-gray-600 min-w-[70px]"
|
||||
>
|
||||
创建时间:
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="caption"
|
||||
className="font-medium text-gray-900"
|
||||
>
|
||||
{moment(scheme.create_time).format(
|
||||
"YYYY-MM-DD HH:mm"
|
||||
)}
|
||||
</Typography>
|
||||
</Box>
|
||||
<Box className="flex items-center gap-2">
|
||||
<Typography
|
||||
variant="caption"
|
||||
className="text-gray-600 min-w-[70px]"
|
||||
>
|
||||
开始时间:
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="caption"
|
||||
className="font-medium text-gray-900"
|
||||
>
|
||||
{moment(scheme.startTime).format(
|
||||
"YYYY-MM-DD HH:mm"
|
||||
)}
|
||||
</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{/* 操作按钮区域 */}
|
||||
<Box className="pt-2 border-t border-gray-100 flex gap-5">
|
||||
{scheme.schemeDetail?.burst_ID?.length ? (
|
||||
<Button
|
||||
variant="outlined"
|
||||
fullWidth
|
||||
size="small"
|
||||
className="border-blue-600 text-blue-600 hover:bg-blue-50"
|
||||
onClick={() =>
|
||||
handleLocatePipes?.(scheme.schemeDetail!.burst_ID)
|
||||
}
|
||||
sx={{
|
||||
textTransform: "none",
|
||||
fontWeight: 500,
|
||||
}}
|
||||
>
|
||||
定位全部管道
|
||||
</Button>
|
||||
) : null}
|
||||
<Button
|
||||
variant="contained"
|
||||
fullWidth
|
||||
size="small"
|
||||
className="bg-blue-600 hover:bg-blue-700"
|
||||
onClick={() => onViewDetails?.(scheme.id)}
|
||||
sx={{
|
||||
textTransform: "none",
|
||||
fontWeight: 500,
|
||||
}}
|
||||
>
|
||||
查看分析结果
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
</Collapse>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
@@ -13,6 +13,26 @@ import AnalysisParameters from "./BurstPipeAnalysis/AnalysisParameters";
|
||||
import SchemeQuery from "./BurstPipeAnalysis/SchemeQuery";
|
||||
import LocationResults from "./BurstPipeAnalysis/LocationResults";
|
||||
|
||||
interface SchemeDetail {
|
||||
burst_ID: string[];
|
||||
burst_size: number[];
|
||||
modify_total_duration: number;
|
||||
modify_fixed_pump_pattern: any;
|
||||
modify_valve_opening: any;
|
||||
modify_variable_pump_pattern: any;
|
||||
}
|
||||
|
||||
interface SchemeRecord {
|
||||
id: number;
|
||||
schemeName: string;
|
||||
type: string;
|
||||
user: string;
|
||||
create_time: string;
|
||||
startTime: string;
|
||||
// 详情信息
|
||||
schemeDetail?: SchemeDetail;
|
||||
}
|
||||
|
||||
interface TabPanelProps {
|
||||
children?: React.ReactNode;
|
||||
index: number;
|
||||
@@ -45,6 +65,9 @@ const BurstPipeAnalysisPanel: React.FC<BurstPipeAnalysisPanelProps> = ({
|
||||
const [internalOpen, setInternalOpen] = useState(true);
|
||||
const [currentTab, setCurrentTab] = useState(0);
|
||||
|
||||
// 持久化方案查询结果
|
||||
const [schemes, setSchemes] = useState<SchemeRecord[]>([]);
|
||||
|
||||
// 使用受控或非受控状态
|
||||
const isOpen = controlledOpen !== undefined ? controlledOpen : internalOpen;
|
||||
const handleToggle = () => {
|
||||
@@ -175,16 +198,13 @@ const BurstPipeAnalysisPanel: React.FC<BurstPipeAnalysisPanelProps> = ({
|
||||
|
||||
{/* Tab 内容 */}
|
||||
<TabPanel value={currentTab} index={0}>
|
||||
<AnalysisParameters
|
||||
onAnalyze={(params) => {
|
||||
console.log("开始分析:", params);
|
||||
// TODO: 调用分析API
|
||||
}}
|
||||
/>
|
||||
<AnalysisParameters />
|
||||
</TabPanel>
|
||||
|
||||
<TabPanel value={currentTab} index={1}>
|
||||
<SchemeQuery
|
||||
schemes={schemes}
|
||||
onSchemesChange={setSchemes}
|
||||
onViewDetails={(id) => {
|
||||
console.log("查看详情:", id);
|
||||
// TODO: 显示方案详情
|
||||
|
||||
Reference in New Issue
Block a user