完成管道冲洗功能页面；调整水质模拟默认pattern；调整sidebar菜单名；
This commit is contained in:
JIANG
@@ -0,0 +1,584 @@
|
||||
"use client";
|
||||
|
||||
import React, { useEffect, useState } from "react";
|
||||
import ReactDOM from "react-dom";
|
||||
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Typography,
|
||||
Checkbox,
|
||||
FormControlLabel,
|
||||
IconButton,
|
||||
Card,
|
||||
CardContent,
|
||||
Chip,
|
||||
Tooltip,
|
||||
Collapse,
|
||||
Link,
|
||||
} from "@mui/material";
|
||||
import {
|
||||
Info as InfoIcon,
|
||||
Search as SearchIcon,
|
||||
LocationOn as LocationIcon,
|
||||
} from "@mui/icons-material";
|
||||
import { DatePicker } from "@mui/x-date-pickers/DatePicker";
|
||||
import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
|
||||
import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
|
||||
import "dayjs/locale/zh-cn";
|
||||
import dayjs, { Dayjs } from "dayjs";
|
||||
import axios from "axios";
|
||||
import moment from "moment";
|
||||
import { config, NETWORK_NAME } from "@config/config";
|
||||
import { useNotification } from "@refinedev/core";
|
||||
import { useData, useMap } from "@app/OlMap/MapComponent";
|
||||
import { queryFeaturesByIds } from "@/utils/mapQueryService";
|
||||
import { GeoJSON } from "ol/format";
|
||||
import VectorLayer from "ol/layer/Vector";
|
||||
import VectorSource from "ol/source/Vector";
|
||||
import { Style, Icon, Circle, Fill, Stroke } from "ol/style";
|
||||
import Feature, { FeatureLike } from "ol/Feature";
|
||||
import { bbox, featureCollection } from "@turf/turf";
|
||||
import Timeline from "@app/OlMap/Controls/Timeline";
|
||||
import { SchemeRecord, SchemaItem } from "./types";
|
||||
|
||||
interface SchemeQueryProps {
|
||||
schemes?: SchemeRecord[];
|
||||
onSchemesChange?: (schemes: SchemeRecord[]) => void;
|
||||
network?: string;
|
||||
}
|
||||
|
||||
const SCHEME_TYPE = "flushing_analysis";
|
||||
|
||||
const SchemeQuery: React.FC<SchemeQueryProps> = ({
|
||||
schemes: externalSchemes,
|
||||
onSchemesChange,
|
||||
network = NETWORK_NAME,
|
||||
}) => {
|
||||
const [queryAll, setQueryAll] = useState<boolean>(true);
|
||||
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 [highlightLayer, setHighlightLayer] =
|
||||
useState<VectorLayer<VectorSource> | null>(null);
|
||||
const [highlightFeatures, setHighlightFeatures] = useState<Feature[]>([]);
|
||||
|
||||
// Timeline related state
|
||||
const [showTimeline, setShowTimeline] = useState(false);
|
||||
const [selectedDate, setSelectedDate] = useState<Date | undefined>(undefined);
|
||||
const [timeRange, setTimeRange] = useState<{ start: Date; end: Date } | undefined>();
|
||||
const [mapContainer, setMapContainer] = useState<HTMLElement | null>(null);
|
||||
|
||||
const { open } = useNotification();
|
||||
const map = useMap();
|
||||
const data = useData();
|
||||
const { schemeName, setSchemeName } = data || {};
|
||||
|
||||
const schemes = externalSchemes !== undefined ? externalSchemes : internalSchemes;
|
||||
const setSchemes = onSchemesChange || setInternalSchemes;
|
||||
|
||||
useEffect(() => {
|
||||
if (!map) return;
|
||||
const target = map.getTargetElement();
|
||||
if (target) {
|
||||
setMapContainer(target);
|
||||
}
|
||||
}, [map]);
|
||||
|
||||
// Initialize highlight layer
|
||||
useEffect(() => {
|
||||
if (!map) return;
|
||||
|
||||
const themeColor = "rgba(0, 0, 255"; // Blue for drainage
|
||||
const valveColor = "rgba(255, 165, 0"; // Orange for valves
|
||||
|
||||
const sourceStyle = function (feature: FeatureLike) {
|
||||
const type = (feature as any).get("type");
|
||||
if (type === "valve") {
|
||||
return [
|
||||
new Style({
|
||||
image: new Circle({
|
||||
radius: 8,
|
||||
fill: new Fill({ color: `${valveColor}, 0.8)` }),
|
||||
stroke: new Stroke({ color: "white", width: 2 }),
|
||||
}),
|
||||
})
|
||||
];
|
||||
} else {
|
||||
// Default drainage
|
||||
return [
|
||||
new Style({
|
||||
image: new Circle({
|
||||
radius: 12,
|
||||
fill: new Fill({ color: `${themeColor}, 0.2)` }),
|
||||
}),
|
||||
}),
|
||||
new Style({
|
||||
image: new Circle({
|
||||
radius: 8,
|
||||
stroke: new Stroke({ color: `${themeColor}, 0.5)`, width: 2 }),
|
||||
fill: new Fill({ color: `${themeColor}, 0.3)` }),
|
||||
}),
|
||||
}),
|
||||
new Style({
|
||||
image: new Circle({
|
||||
radius: 4,
|
||||
fill: new Fill({ color: `${themeColor}, 1)` }),
|
||||
stroke: new Stroke({ color: "white", width: 1 }),
|
||||
})
|
||||
}),
|
||||
];
|
||||
}
|
||||
};
|
||||
|
||||
const layer = new VectorLayer({
|
||||
source: new VectorSource(),
|
||||
style: sourceStyle,
|
||||
zIndex: 1000,
|
||||
properties: {
|
||||
name: "FlushingQueryResultHighlight",
|
||||
},
|
||||
});
|
||||
|
||||
map.addLayer(layer);
|
||||
setHighlightLayer(layer);
|
||||
|
||||
return () => {
|
||||
map.removeLayer(layer);
|
||||
};
|
||||
}, [map]);
|
||||
|
||||
// Update highlight features
|
||||
useEffect(() => {
|
||||
if (!highlightLayer) return;
|
||||
const source = highlightLayer.getSource();
|
||||
if (!source) return;
|
||||
|
||||
source.clear();
|
||||
highlightFeatures.forEach((feature) => {
|
||||
if (feature instanceof Feature) {
|
||||
source.addFeature(feature);
|
||||
}
|
||||
});
|
||||
}, [highlightFeatures, highlightLayer]);
|
||||
|
||||
const handleLocateDrainageNode = (nodeId: string) => {
|
||||
if (!nodeId) return;
|
||||
queryFeaturesByIds([nodeId], "geo_junctions_mat").then((features) => {
|
||||
if (features.length > 0) {
|
||||
// Add type property to distinguish styling
|
||||
features.forEach(f => f.set("type", "drainage"));
|
||||
setHighlightFeatures(features);
|
||||
zoomToFeatures(features);
|
||||
} else {
|
||||
open?.({
|
||||
type: "error",
|
||||
message: "未找到该节点要素",
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const handleLocateValves = (valveIds: string[]) => {
|
||||
if (!valveIds || valveIds.length === 0) return;
|
||||
queryFeaturesByIds(valveIds, "geo_valves").then((features) => {
|
||||
if (features.length > 0) {
|
||||
features.forEach(f => f.set("type", "valve"));
|
||||
setHighlightFeatures(features);
|
||||
zoomToFeatures(features);
|
||||
} else {
|
||||
open?.({
|
||||
type: "error",
|
||||
message: "未找到阀门要素",
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const zoomToFeatures = (features: Feature[]) => {
|
||||
const geojsonFormat = new GeoJSON();
|
||||
const geojsonFeatures = features.map((feature) =>
|
||||
geojsonFormat.writeFeatureObject(feature),
|
||||
);
|
||||
const extent = bbox(featureCollection(geojsonFeatures as any));
|
||||
if (extent) {
|
||||
map?.getView().fit(extent, {
|
||||
maxZoom: 18,
|
||||
duration: 1000,
|
||||
padding: [50, 50, 50, 50],
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const formatTime = (timeStr: string) => {
|
||||
return moment(timeStr).format("MM-DD HH:mm");
|
||||
};
|
||||
|
||||
const handleQuery = async () => {
|
||||
if (!queryAll && !queryDate) return;
|
||||
|
||||
setLoading(true);
|
||||
try {
|
||||
const response = await axios.get(
|
||||
`${config.BACKEND_URL}/api/v1/getallschemes/?network=${network}`,
|
||||
);
|
||||
|
||||
let filteredResults = response.data;
|
||||
|
||||
// Filter by type
|
||||
filteredResults = filteredResults.filter((item: SchemaItem) => item.scheme_type === SCHEME_TYPE);
|
||||
|
||||
if (!queryAll && queryDate) {
|
||||
const formattedDate = queryDate.format("YYYY-MM-DD");
|
||||
filteredResults = filteredResults.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: "请尝试更改查询条件",
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("查询请求失败:", error);
|
||||
open?.({
|
||||
type: "error",
|
||||
message: "查询失败",
|
||||
description: "获取方案列表失败，请稍后重试",
|
||||
});
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleViewResults = (scheme: SchemeRecord) => {
|
||||
setShowTimeline(true);
|
||||
|
||||
const schemeDate = scheme.startTime ? new Date(scheme.startTime) : undefined;
|
||||
|
||||
if (scheme.startTime && scheme.schemeDetail?.duration) {
|
||||
const start = new Date(scheme.startTime);
|
||||
const end = new Date(start.getTime() + scheme.schemeDetail.duration * 1000);
|
||||
setSelectedDate(schemeDate);
|
||||
setTimeRange({ start, end });
|
||||
}
|
||||
|
||||
setSchemeName?.(scheme.schemeName);
|
||||
|
||||
// Locate drainage node by default if available
|
||||
if (scheme.schemeDetail?.drainage_node_ID) {
|
||||
handleLocateDrainageNode(scheme.schemeDetail.drainage_node_ID);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{showTimeline &&
|
||||
mapContainer &&
|
||||
ReactDOM.createPortal(
|
||||
<Timeline
|
||||
schemeDate={selectedDate}
|
||||
timeRange={timeRange}
|
||||
disableDateSelection={!!timeRange}
|
||||
schemeName={schemeName}
|
||||
schemeType={SCHEME_TYPE}
|
||||
/>,
|
||||
mapContainer,
|
||||
)}
|
||||
<Box className="flex flex-col h-full">
|
||||
{/* Query Controls */}
|
||||
<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"
|
||||
/>
|
||||
}
|
||||
label={<Typography variant="body2">查询全部</Typography>}
|
||||
className="m-0"
|
||||
/>
|
||||
<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: 160 },
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</LocalizationProvider>
|
||||
</Box>
|
||||
<Button
|
||||
variant="contained"
|
||||
onClick={handleQuery}
|
||||
disabled={loading}
|
||||
size="small"
|
||||
startIcon={<SearchIcon />}
|
||||
className="bg-blue-600 hover:bg-blue-700"
|
||||
>
|
||||
查询
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{/* Results List */}
|
||||
<Box className="flex-1 overflow-auto">
|
||||
{schemes.length === 0 ? (
|
||||
<Box className="flex flex-col items-center justify-center h-full text-gray-400">
|
||||
<Typography variant="body2">暂无方案数据</Typography>
|
||||
</Box>
|
||||
) : (
|
||||
<Box className="space-y-2 p-1">
|
||||
<Typography variant="caption" className="text-gray-500 px-1">
|
||||
共 {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="冲洗模拟"
|
||||
size="small"
|
||||
className="h-5"
|
||||
color="primary"
|
||||
variant="outlined"
|
||||
/>
|
||||
</Box>
|
||||
<Typography
|
||||
variant="caption"
|
||||
className="text-gray-500 block"
|
||||
>
|
||||
用户: {scheme.user} · 时间: {formatTime(scheme.create_time)}
|
||||
</Typography>
|
||||
</Box>
|
||||
<Box className="flex gap-1 ml-2">
|
||||
<Tooltip title="定位排水口">
|
||||
<IconButton
|
||||
size="small"
|
||||
onClick={() =>
|
||||
scheme.schemeDetail?.drainage_node_ID &&
|
||||
handleLocateDrainageNode(scheme.schemeDetail.drainage_node_ID)
|
||||
}
|
||||
color="primary"
|
||||
className="p-1"
|
||||
>
|
||||
<LocationIcon fontSize="small" />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
<Tooltip
|
||||
title={
|
||||
expandedId === scheme.id ? "收起详情" : "查看详情"
|
||||
}
|
||||
>
|
||||
<IconButton
|
||||
size="small"
|
||||
onClick={() =>
|
||||
setExpandedId(
|
||||
expandedId === scheme.id ? null : scheme.id,
|
||||
)
|
||||
}
|
||||
color="primary"
|
||||
className="p-1"
|
||||
>
|
||||
<InfoIcon 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">
|
||||
排水节点:
|
||||
</Typography>
|
||||
<Box className="flex-1">
|
||||
{scheme.schemeDetail?.drainage_node_ID ? (
|
||||
<Link
|
||||
component="button"
|
||||
variant="caption"
|
||||
className="font-medium text-blue-600 hover:text-blue-800 underline cursor-pointer"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
handleLocateDrainageNode(scheme.schemeDetail!.drainage_node_ID);
|
||||
}}
|
||||
>
|
||||
{scheme.schemeDetail.drainage_node_ID}
|
||||
</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">
|
||||
{scheme.schemeDetail?.flushing_flow ?? "-"} m³/h
|
||||
</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?.duration ?? "-"} 秒
|
||||
</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">
|
||||
{formatTime(scheme.create_time)}
|
||||
</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">
|
||||
{formatTime(scheme.startTime)}
|
||||
</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{/* 阀门列表 */}
|
||||
<Box className="col-span-2 pl-2">
|
||||
<Typography variant="caption" className="text-gray-600 block mb-1">
|
||||
参与阀门及开度:
|
||||
</Typography>
|
||||
<Box className="flex flex-wrap gap-2">
|
||||
{scheme.schemeDetail?.valve_opening && Object.entries(scheme.schemeDetail.valve_opening).length > 0 ? (
|
||||
Object.entries(scheme.schemeDetail.valve_opening).map(([id, k]) => (
|
||||
<Tooltip key={id} title="点击定位阀门">
|
||||
<Chip
|
||||
label={`${id}: ${k}`}
|
||||
size="small"
|
||||
variant="outlined"
|
||||
onClick={() => handleLocateValves([id])}
|
||||
className="text-xs h-6 bg-gray-50 cursor-pointer hover:bg-orange-50 hover:border-orange-200"
|
||||
/>
|
||||
</Tooltip>
|
||||
))
|
||||
) : (
|
||||
<Typography variant="caption" className="text-gray-400">无</Typography>
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Box className="pt-2 border-t border-gray-100 flex gap-2">
|
||||
<Button
|
||||
variant="outlined"
|
||||
fullWidth
|
||||
size="small"
|
||||
className="border-blue-600 text-blue-600 hover:bg-blue-50"
|
||||
onClick={() =>
|
||||
scheme.schemeDetail?.drainage_node_ID &&
|
||||
handleLocateDrainageNode(scheme.schemeDetail.drainage_node_ID)
|
||||
}
|
||||
startIcon={<LocationIcon className="w-4 h-4" />}
|
||||
sx={{ textTransform: "none", fontWeight: 500 }}
|
||||
>
|
||||
定位排水口
|
||||
</Button>
|
||||
<Button
|
||||
variant="contained"
|
||||
fullWidth
|
||||
size="small"
|
||||
className="bg-blue-600 hover:bg-blue-700"
|
||||
onClick={() => handleViewResults(scheme)}
|
||||
sx={{ textTransform: "none", fontWeight: 500 }}
|
||||
>
|
||||
查看模拟结果
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
</Collapse>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default SchemeQuery;
|
||||
Reference in New Issue
Block a user