JIANG
416 lines
14 KiB
TypeScript
416 lines
14 KiB
TypeScript
"use client";
|
|
|
|
import React, { useState, useEffect, useRef } from "react";
|
|
import {
|
|
Box,
|
|
Typography,
|
|
Chip,
|
|
IconButton,
|
|
Tooltip,
|
|
Link,
|
|
} from "@mui/material";
|
|
import {
|
|
LocationOn as LocationIcon,
|
|
} from "@mui/icons-material";
|
|
import { queryFeaturesByIds } from "@/utils/mapQueryService";
|
|
import { useMap } from "@components/olmap/core/MapComponent";
|
|
import { GeoJSON } from "ol/format";
|
|
import VectorLayer from "ol/layer/Vector";
|
|
import VectorSource from "ol/source/Vector";
|
|
import { Stroke, Style, Icon } from "ol/style";
|
|
import Feature, { FeatureLike } from "ol/Feature";
|
|
import {
|
|
along,
|
|
lineString,
|
|
length,
|
|
toMercator,
|
|
bbox,
|
|
featureCollection,
|
|
} from "@turf/turf";
|
|
import { Point } from "ol/geom";
|
|
import { toLonLat } from "ol/proj";
|
|
import moment from "moment";
|
|
import "moment-timezone";
|
|
import { LocationResult } from "./types";
|
|
import { FLOW_DISPLAY_UNIT } from "@utils/units";
|
|
|
|
interface LocationResultsProps {
|
|
results?: LocationResult[];
|
|
}
|
|
|
|
const LocationResults: React.FC<LocationResultsProps> = ({
|
|
results = [],
|
|
}) => {
|
|
const highlightLayerRef = useRef<VectorLayer<VectorSource> | null>(null);
|
|
const [highlightFeatures, setHighlightFeatures] = useState<Feature[]>([]);
|
|
const map = useMap();
|
|
|
|
// 格式化时间为 UTC+8
|
|
const formatTime = (timeStr: string) => {
|
|
return moment(timeStr).utcOffset(8).format("YYYY-MM-DD HH:mm:ss");
|
|
};
|
|
|
|
const handleLocatePipes = (pipeIds: string[]) => {
|
|
if (pipeIds.length > 0) {
|
|
queryFeaturesByIds(pipeIds, "geo_pipes_mat").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 = bbox(featureCollection(geojsonFeatures as any));
|
|
|
|
if (extent) {
|
|
map?.getView().fit(extent, { maxZoom: 18, duration: 1000 });
|
|
}
|
|
}
|
|
});
|
|
}
|
|
};
|
|
|
|
// 初始化管道图层和高亮图层
|
|
useEffect(() => {
|
|
if (!map) return;
|
|
|
|
const burstPipeStyle = function (feature: FeatureLike) {
|
|
const styles = [];
|
|
// 线条样式（底层发光，主线条，内层高亮线）
|
|
styles.push(
|
|
new Style({
|
|
stroke: new Stroke({
|
|
color: "rgba(255, 0, 0, 0.3)",
|
|
width: 12,
|
|
}),
|
|
}),
|
|
new Style({
|
|
stroke: new Stroke({
|
|
color: "rgba(255, 0, 0, 1)",
|
|
width: 6,
|
|
lineDash: [15, 10],
|
|
}),
|
|
}),
|
|
new Style({
|
|
stroke: new Stroke({
|
|
color: "rgba(255, 102, 102, 1)",
|
|
width: 3,
|
|
lineDash: [15, 10],
|
|
}),
|
|
}),
|
|
);
|
|
const geometry = feature.getGeometry();
|
|
const lineCoords =
|
|
geometry?.getType() === "LineString"
|
|
? (geometry as any).getCoordinates()
|
|
: null;
|
|
if (geometry && lineCoords) {
|
|
const lineCoordsWGS84 = lineCoords.map((coord: []) => {
|
|
const [lon, lat] = toLonLat(coord);
|
|
return [lon, lat];
|
|
});
|
|
// 计算中点
|
|
const lineStringFeature = lineString(lineCoordsWGS84);
|
|
const lineLength = length(lineStringFeature);
|
|
const midPoint = along(lineStringFeature, lineLength / 2).geometry
|
|
.coordinates;
|
|
// 在中点添加 icon 样式
|
|
const midPointMercator = toMercator(midPoint);
|
|
styles.push(
|
|
new Style({
|
|
geometry: new Point(midPointMercator),
|
|
image: new Icon({
|
|
src: "/icons/burst_pipe.svg",
|
|
scale: 0.2,
|
|
anchor: [0.5, 1],
|
|
}),
|
|
}),
|
|
);
|
|
}
|
|
return styles;
|
|
};
|
|
// 创建高亮图层
|
|
const highlightLayer = new VectorLayer({
|
|
source: new VectorSource(),
|
|
style: burstPipeStyle,
|
|
maxZoom: 24,
|
|
minZoom: 12,
|
|
properties: {
|
|
name: "爆管管段高亮",
|
|
value: "burst_pipe_highlight",
|
|
},
|
|
});
|
|
|
|
map.addLayer(highlightLayer);
|
|
highlightLayerRef.current = highlightLayer;
|
|
|
|
return () => {
|
|
highlightLayerRef.current = null;
|
|
map.removeLayer(highlightLayer);
|
|
};
|
|
}, [map]);
|
|
|
|
// 高亮要素的函数
|
|
useEffect(() => {
|
|
const source = highlightLayerRef.current?.getSource();
|
|
if (!source) {
|
|
return;
|
|
}
|
|
// 清除之前的高亮
|
|
source.clear();
|
|
// 添加新的高亮要素
|
|
highlightFeatures.forEach((feature) => {
|
|
if (feature instanceof Feature) {
|
|
source.addFeature(feature);
|
|
}
|
|
});
|
|
}, [highlightFeatures]);
|
|
|
|
// 取第一条记录或空对象
|
|
const result = results.length > 0 ? results[0] : null;
|
|
|
|
return (
|
|
<Box className="flex flex-col h-full">
|
|
{/* 结果展示 */}
|
|
<Box className="flex-1 overflow-auto bg-white rounded border border-gray-200">
|
|
{!result ? (
|
|
<Box className="flex flex-col items-center justify-center h-full text-gray-400 p-4">
|
|
<Box className="mb-4">
|
|
<svg
|
|
width="80"
|
|
height="80"
|
|
viewBox="0 0 80 80"
|
|
fill="none"
|
|
className="opacity-40"
|
|
>
|
|
<circle
|
|
cx="40"
|
|
cy="40"
|
|
r="25"
|
|
stroke="currentColor"
|
|
strokeWidth="2"
|
|
/>
|
|
<circle cx="40" cy="40" r="5" fill="currentColor" />
|
|
<line
|
|
x1="40"
|
|
y1="15"
|
|
x2="40"
|
|
y2="25"
|
|
stroke="currentColor"
|
|
strokeWidth="2"
|
|
/>
|
|
<line
|
|
x1="40"
|
|
y1="55"
|
|
x2="40"
|
|
y2="65"
|
|
stroke="currentColor"
|
|
strokeWidth="2"
|
|
/>
|
|
<line
|
|
x1="15"
|
|
y1="40"
|
|
x2="25"
|
|
y2="40"
|
|
stroke="currentColor"
|
|
strokeWidth="2"
|
|
/>
|
|
<line
|
|
x1="55"
|
|
y1="40"
|
|
x2="65"
|
|
y2="40"
|
|
stroke="currentColor"
|
|
strokeWidth="2"
|
|
/>
|
|
</svg>
|
|
</Box>
|
|
<Typography variant="body2">暂无定位结果</Typography>
|
|
<Typography variant="body2" className="mt-1">
|
|
请先执行方案分析
|
|
</Typography>
|
|
</Box>
|
|
) : (
|
|
<Box className="p-5 h-full overflow-auto">
|
|
{/* 头部：标识信息 */}
|
|
<Box className="mb-5">
|
|
<Box className="flex items-center gap-2 mb-1">
|
|
<Typography
|
|
variant="h6"
|
|
className="font-bold text-gray-900"
|
|
title={result.burst_incident}
|
|
>
|
|
{result.burst_incident}
|
|
</Typography>
|
|
<Chip
|
|
label={
|
|
result.type === "burst_analysis" ? "爆管模拟" : result.type
|
|
}
|
|
size="small"
|
|
color="primary"
|
|
variant="outlined"
|
|
sx={{
|
|
fontWeight: 600,
|
|
fontSize: "0.75rem",
|
|
height: "24px",
|
|
}}
|
|
/>
|
|
</Box>
|
|
<Typography variant="caption" className="text-gray-500">
|
|
ID: {result.id}
|
|
</Typography>
|
|
</Box>
|
|
|
|
{/* 主要信息：三栏卡片布局 */}
|
|
<Box className="grid grid-cols-3 gap-3 mb-5">
|
|
{/* 检测时间卡片 */}
|
|
<Box className="bg-gradient-to-br from-blue-50 to-blue-100 rounded-lg p-3 border border-blue-200 shadow-sm hover:shadow-md transition-shadow">
|
|
<Box className="flex items-center gap-1.5 mb-2">
|
|
<Box className="w-1.5 h-1.5 rounded-full bg-blue-600"></Box>
|
|
<Typography
|
|
variant="caption"
|
|
className="text-blue-700 font-semibold uppercase tracking-wide"
|
|
sx={{ fontSize: "0.7rem" }}
|
|
>
|
|
检测时间
|
|
</Typography>
|
|
</Box>
|
|
<Typography
|
|
variant="body2"
|
|
className="font-bold text-blue-900 leading-tight"
|
|
sx={{ fontSize: "0.875rem" }}
|
|
>
|
|
{formatTime(result.detect_time)}
|
|
</Typography>
|
|
</Box>
|
|
|
|
{/* 漏损量卡片 */}
|
|
<Box className="bg-gradient-to-br from-orange-50 to-orange-100 rounded-lg p-3 border border-orange-200 shadow-sm hover:shadow-md transition-shadow">
|
|
<Box className="flex items-center gap-1.5 mb-2">
|
|
<Box className="w-1.5 h-1.5 rounded-full bg-orange-600"></Box>
|
|
<Typography
|
|
variant="caption"
|
|
className="text-orange-700 font-semibold uppercase tracking-wide"
|
|
sx={{ fontSize: "0.7rem" }}
|
|
>
|
|
漏损量
|
|
</Typography>
|
|
</Box>
|
|
<Typography
|
|
variant="body2"
|
|
className="font-bold text-orange-900"
|
|
sx={{ fontSize: "0.875rem" }}
|
|
>
|
|
{result.leakage !== null
|
|
? `${result.leakage.toFixed(2)} ${FLOW_DISPLAY_UNIT}`
|
|
: "N/A"}
|
|
</Typography>
|
|
</Box>
|
|
|
|
{/* 定位管段数量卡片 */}
|
|
<Box className="bg-gradient-to-br from-green-50 to-green-100 rounded-lg p-3 border border-green-200 shadow-sm hover:shadow-md transition-shadow">
|
|
<Box className="flex items-center gap-1.5 mb-2">
|
|
<Box className="w-1.5 h-1.5 rounded-full bg-green-600"></Box>
|
|
<Typography
|
|
variant="caption"
|
|
className="text-green-700 font-semibold uppercase tracking-wide"
|
|
sx={{ fontSize: "0.7rem" }}
|
|
>
|
|
定位管段
|
|
</Typography>
|
|
</Box>
|
|
<Typography
|
|
variant="body2"
|
|
className="font-bold text-green-900"
|
|
sx={{ fontSize: "0.875rem" }}
|
|
>
|
|
{result.locate_result ? result.locate_result.length : 0}{" "}
|
|
个管段
|
|
</Typography>
|
|
</Box>
|
|
</Box>
|
|
|
|
{/* 定位管段详细列表 */}
|
|
{result.locate_result && result.locate_result.length > 0 && (
|
|
<Box className="bg-white rounded-lg p-4 border-2 border-blue-200 shadow-sm">
|
|
<Box className="flex items-center justify-between mb-3">
|
|
<Typography
|
|
variant="body1"
|
|
className="text-gray-900 font-bold"
|
|
sx={{ fontSize: "0.95rem" }}
|
|
>
|
|
管段列表
|
|
</Typography>
|
|
<Box className="flex items-center gap-2">
|
|
<Tooltip title="定位所有管道">
|
|
<IconButton
|
|
size="small"
|
|
onClick={() => handleLocatePipes(result.locate_result!)}
|
|
color="primary"
|
|
sx={{
|
|
backgroundColor: "rgba(37, 125, 212, 0.1)",
|
|
"&:hover": {
|
|
backgroundColor: "rgba(37, 125, 212, 0.2)",
|
|
},
|
|
}}
|
|
>
|
|
<LocationIcon sx={{ fontSize: "1.2rem" }} />
|
|
</IconButton>
|
|
</Tooltip>
|
|
</Box>
|
|
</Box>
|
|
<Box className="grid grid-cols-2 gap-2">
|
|
{result.locate_result.map((pipeId, idx) => (
|
|
<Box
|
|
key={idx}
|
|
className="bg-gradient-to-r from-blue-50 to-white rounded-lg px-3 py-2 border border-blue-200 hover:border-blue-400 hover:shadow-md transition-all cursor-pointer group"
|
|
onClick={() => handleLocatePipes([pipeId])}
|
|
sx={{
|
|
"&:active": {
|
|
transform: "scale(0.98)",
|
|
boxShadow: "0 1px 2px rgba(25, 118, 210, 0.2)",
|
|
},
|
|
}}
|
|
>
|
|
<Box className="flex items-center justify-between">
|
|
<Typography
|
|
variant="body2"
|
|
className="font-semibold text-blue-700 group-hover:text-blue-900"
|
|
>
|
|
{pipeId}
|
|
</Typography>
|
|
<Box className="flex items-center gap-1">
|
|
{/* <Tooltip title="定位管段">
|
|
<IconButton
|
|
size="small"
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
handleLocatePipes([pipeId]);
|
|
}}
|
|
sx={{
|
|
"&:hover": {
|
|
backgroundColor: "rgba(37, 125, 212, 0.1)",
|
|
},
|
|
}}
|
|
>
|
|
<LocationIcon sx={{ fontSize: "1rem" }} />
|
|
</IconButton>
|
|
</Tooltip> */}
|
|
</Box>
|
|
</Box>
|
|
</Box>
|
|
))}
|
|
</Box>
|
|
</Box>
|
|
)}
|
|
</Box>
|
|
)}
|
|
</Box>
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
export default LocationResults;
|