爆管分析页面，新增时间轴、工具栏，修改部分组件以满足页面功能需求
This commit is contained in:
JIANG
@@ -18,13 +18,15 @@ import "dayjs/locale/zh-cn";
|
||||
import { useMap } from "@app/OlMap/MapComponent";
|
||||
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 { Style, Stroke, Icon } from "ol/style";
|
||||
import { handleMapClickSelectFeatures as mapClickSelectFeatures } from "@/utils/mapQueryService";
|
||||
import Feature from "ol/Feature";
|
||||
import Feature, { FeatureLike } from "ol/Feature";
|
||||
import { useNotification } from "@refinedev/core";
|
||||
import axios from "axios";
|
||||
import { config, NETWORK_NAME } from "@/config/config";
|
||||
import { along, lineString, length, toMercator } from "@turf/turf";
|
||||
import { Point } from "ol/geom";
|
||||
import { toLonLat } from "ol/proj";
|
||||
|
||||
interface PipePoint {
|
||||
id: string;
|
||||
@@ -54,34 +56,65 @@ const AnalysisParameters: React.FC = () => {
|
||||
useEffect(() => {
|
||||
if (!map) return;
|
||||
|
||||
// 创建高亮图层
|
||||
const highlightLayer = new VectorLayer({
|
||||
source: new VectorSource(),
|
||||
style: [
|
||||
// 外层发光效果（底层）
|
||||
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: "#ff0000",
|
||||
color: "rgba(255, 0, 0, 1)",
|
||||
width: 6,
|
||||
lineDash: [15, 10], // 虚线样式，表示管道损坏/爆管
|
||||
}),
|
||||
}),
|
||||
// 内层高亮线
|
||||
new Style({
|
||||
stroke: new Stroke({
|
||||
color: "#ff6666",
|
||||
width: 3,
|
||||
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) {
|
||||
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_icon.svg",
|
||||
scale: 0.2,
|
||||
anchor: [0.5, 1],
|
||||
}),
|
||||
})
|
||||
);
|
||||
}
|
||||
return styles;
|
||||
};
|
||||
// 创建高亮图层
|
||||
const highlightLayer = new VectorLayer({
|
||||
source: new VectorSource(),
|
||||
style: burstPipeStyle,
|
||||
properties: {
|
||||
name: "高亮管道",
|
||||
value: "highlight_pipeline",
|
||||
@@ -132,7 +165,6 @@ const AnalysisParameters: React.FC = () => {
|
||||
)
|
||||
.map((feature) => {
|
||||
const properties = feature.getProperties();
|
||||
console.log("管道属性:", feature, properties);
|
||||
return {
|
||||
id: properties.id,
|
||||
diameter: properties.diameter || 0,
|
||||
@@ -210,6 +242,14 @@ const AnalysisParameters: React.FC = () => {
|
||||
const handleAnalyze = async () => {
|
||||
setAnalyzing(true);
|
||||
|
||||
// 显示处理中的通知
|
||||
open?.({
|
||||
key: "burst-analysis",
|
||||
type: "progress",
|
||||
message: "方案提交分析中",
|
||||
undoableTimeout: 3,
|
||||
});
|
||||
|
||||
const burst_ID = pipePoints.map((pipe) => pipe.id);
|
||||
const burst_size = pipePoints.map((pipe) =>
|
||||
parseInt(pipe.area.toString(), 10)
|
||||
@@ -240,8 +280,8 @@ const AnalysisParameters: React.FC = () => {
|
||||
open?.({
|
||||
key: "burst-analysis",
|
||||
type: "success",
|
||||
message: "分析请求提交成功",
|
||||
description: "方案已成功提交，正在进行分析",
|
||||
message: "方案分析成功",
|
||||
description: "方案分析完成，请在方案查询中查看结果。",
|
||||
});
|
||||
} catch (error) {
|
||||
console.error("分析请求失败:", error);
|
||||
@@ -427,7 +467,7 @@ const AnalysisParameters: React.FC = () => {
|
||||
disabled={analyzing}
|
||||
className="bg-blue-600 hover:bg-blue-700"
|
||||
>
|
||||
{analyzing ? "方案提交中..." : "方案分析"}
|
||||
{analyzing ? "方案提交分析中..." : "方案分析"}
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
@@ -1,6 +1,8 @@
|
||||
"use client";
|
||||
|
||||
import React, { useEffect, useState } from "react";
|
||||
import ReactDOM from "react-dom"; // 添加这行
|
||||
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
@@ -35,9 +37,12 @@ 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";
|
||||
import { Stroke, Style, Icon } from "ol/style";
|
||||
import Feature, { FeatureLike } from "ol/Feature";
|
||||
import { along, lineString, length, toMercator } from "@turf/turf";
|
||||
import { Point } from "ol/geom";
|
||||
import { toLonLat } from "ol/proj";
|
||||
import Timeline from "@app/OlMap/Controls/Timeline";
|
||||
|
||||
interface SchemeDetail {
|
||||
burst_ID: string[];
|
||||
@@ -72,7 +77,6 @@ interface SchemaItem {
|
||||
interface SchemeQueryProps {
|
||||
schemes?: SchemeRecord[];
|
||||
onSchemesChange?: (schemes: SchemeRecord[]) => void;
|
||||
onViewDetails?: (id: number) => void;
|
||||
onLocate?: (id: number) => void;
|
||||
network?: string;
|
||||
}
|
||||
@@ -80,20 +84,29 @@ interface SchemeQueryProps {
|
||||
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(new Date()));
|
||||
const [internalSchemes, setInternalSchemes] = useState<SchemeRecord[]>([]);
|
||||
const [loading, setLoading] = useState<boolean>(false);
|
||||
const [expandedId, setExpandedId] = useState<number | null>(null);
|
||||
const { open } = useNotification();
|
||||
|
||||
const [highlightLayer, setHighlightLayer] =
|
||||
useState<VectorLayer<VectorSource> | null>(null);
|
||||
const [highlightFeatures, setHighlightFeatures] = useState<Feature[]>([]);
|
||||
|
||||
// 时间轴相关状态
|
||||
const [showTimeline, setShowTimeline] = useState(false);
|
||||
const [selectedDate, setSelectedDate] = useState<Date | undefined>(undefined);
|
||||
const [timeRange, setTimeRange] = useState<
|
||||
{ start: Date; end: Date } | undefined
|
||||
>();
|
||||
const [internalSchemes, setInternalSchemes] = useState<SchemeRecord[]>([]);
|
||||
const [schemeName, setSchemeName] = useState<string>("");
|
||||
const [loading, setLoading] = useState<boolean>(false);
|
||||
const [expandedId, setExpandedId] = useState<number | null>(null);
|
||||
const [mapContainer, setMapContainer] = useState<HTMLElement | null>(null); // 地图容器元素
|
||||
|
||||
const { open } = useNotification();
|
||||
|
||||
const map = useMap();
|
||||
|
||||
// 使用外部提供的 schemes 或内部状态
|
||||
@@ -181,38 +194,95 @@ const SchemeQuery: React.FC<SchemeQueryProps> = ({
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// 内部的方案查询函数
|
||||
const handleViewDetails = (id: number) => {
|
||||
setShowTimeline(true);
|
||||
// 计算时间范围
|
||||
const scheme = schemes.find((s) => s.id === id);
|
||||
const burstPipeIds = scheme?.schemeDetail?.burst_ID || [];
|
||||
const schemeDate = scheme?.startTime
|
||||
? new Date(scheme.startTime)
|
||||
: undefined;
|
||||
if (scheme?.startTime && scheme.schemeDetail?.modify_total_duration) {
|
||||
const start = new Date(scheme.startTime);
|
||||
const end = new Date(
|
||||
start.getTime() + scheme.schemeDetail.modify_total_duration * 1000
|
||||
);
|
||||
setSelectedDate(schemeDate);
|
||||
setTimeRange({ start, end });
|
||||
setSchemeName(scheme.schemeName);
|
||||
handleLocatePipes(burstPipeIds);
|
||||
}
|
||||
};
|
||||
|
||||
// 初始化管道图层和高亮图层
|
||||
useEffect(() => {
|
||||
if (!map) return;
|
||||
|
||||
// 创建高亮图层 - 爆管管段标识样式
|
||||
const highlightLayer = new VectorLayer({
|
||||
source: new VectorSource(),
|
||||
style: [
|
||||
// 外层发光效果（底层）
|
||||
// 获取地图的目标容器
|
||||
const target = map.getTargetElement();
|
||||
if (target) {
|
||||
setMapContainer(target);
|
||||
}
|
||||
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: "#ff0000",
|
||||
color: "rgba(255, 0, 0, 1)",
|
||||
width: 6,
|
||||
lineDash: [15, 10], // 虚线样式，表示管道损坏/爆管
|
||||
}),
|
||||
}),
|
||||
// 内层高亮线
|
||||
new Style({
|
||||
stroke: new Stroke({
|
||||
color: "#ff6666",
|
||||
width: 3,
|
||||
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) {
|
||||
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_icon.svg",
|
||||
scale: 0.2,
|
||||
anchor: [0.5, 1],
|
||||
}),
|
||||
})
|
||||
);
|
||||
}
|
||||
return styles;
|
||||
};
|
||||
// 创建高亮图层 - 爆管管段标识样式
|
||||
const highlightLayer = new VectorLayer({
|
||||
source: new VectorSource(),
|
||||
style: burstPipeStyle,
|
||||
properties: {
|
||||
name: "爆管管段高亮",
|
||||
value: "burst_pipe_highlight",
|
||||
@@ -247,348 +317,366 @@ const SchemeQuery: React.FC<SchemeQueryProps> = ({
|
||||
}, [highlightFeatures]);
|
||||
|
||||
return (
|
||||
<Box className="flex flex-col h-full">
|
||||
{/* 查询条件 - 单行布局 */}
|
||||
<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)
|
||||
<>
|
||||
{/* 将时间轴渲染到地图容器中 */}
|
||||
{showTimeline &&
|
||||
mapContainer &&
|
||||
ReactDOM.createPortal(
|
||||
<Timeline
|
||||
schemeDate={selectedDate}
|
||||
timeRange={timeRange}
|
||||
disableDateSelection={!!timeRange}
|
||||
schemeName={schemeName}
|
||||
/>,
|
||||
mapContainer // 渲染到地图容器中，而不是 body
|
||||
)}
|
||||
<Box className="flex flex-col h-full">
|
||||
{/* 查询条件 - 单行布局 */}
|
||||
<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",
|
||||
sx: { width: 200 },
|
||||
},
|
||||
}}
|
||||
label={<Typography variant="body2">查询全部</Typography>}
|
||||
className="m-0"
|
||||
/>
|
||||
</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>
|
||||
</Box>
|
||||
|
||||
{/* 结果列表 */}
|
||||
<Box className="flex-1 overflow-auto">
|
||||
{schemes.length === 0 ? (
|
||||
<Box className="flex flex-col items-center justify-center h-full text-gray-400">
|
||||
<Box className="mb-4">
|
||||
<svg
|
||||
width="80"
|
||||
height="80"
|
||||
viewBox="0 0 80 80"
|
||||
fill="none"
|
||||
className="opacity-40"
|
||||
<LocalizationProvider
|
||||
dateAdapter={AdapterDayjs}
|
||||
adapterLocale="zh-cn"
|
||||
>
|
||||
<rect
|
||||
x="10"
|
||||
y="20"
|
||||
width="60"
|
||||
height="45"
|
||||
rx="2"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
<DatePicker
|
||||
value={queryDate}
|
||||
onChange={(value) =>
|
||||
value && dayjs.isDayjs(value) && setQueryDate(value)
|
||||
}
|
||||
format="YYYY-MM-DD"
|
||||
disabled={queryAll}
|
||||
slotProps={{
|
||||
textField: {
|
||||
size: "small",
|
||||
sx: { width: 200 },
|
||||
},
|
||||
}}
|
||||
/>
|
||||
<line
|
||||
x1="10"
|
||||
y1="30"
|
||||
x2="70"
|
||||
y2="30"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
/>
|
||||
</svg>
|
||||
</LocalizationProvider>
|
||||
</Box>
|
||||
<Typography variant="body2">总共 0 条</Typography>
|
||||
<Typography variant="body2" className="mt-1">
|
||||
No data
|
||||
</Typography>
|
||||
<Button
|
||||
variant="contained"
|
||||
onClick={handleQuery}
|
||||
disabled={loading}
|
||||
size="small"
|
||||
className="bg-blue-600 hover:bg-blue-700"
|
||||
sx={{ minWidth: 80 }}
|
||||
>
|
||||
{loading ? "查询中..." : "查询"}
|
||||
</Button>
|
||||
</Box>
|
||||
) : (
|
||||
<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"
|
||||
>
|
||||
ID: {scheme.id} · 日期: {formatTime(scheme.create_time)}
|
||||
</Typography>
|
||||
</Box>
|
||||
{/* 操作按钮 */}
|
||||
<Box className="flex gap-1 ml-2">
|
||||
<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>
|
||||
<Tooltip title="定位">
|
||||
<IconButton
|
||||
size="small"
|
||||
onClick={() => onLocate?.(scheme.id)}
|
||||
color="primary"
|
||||
className="p-1"
|
||||
>
|
||||
<LocationIcon fontSize="small" />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
</Box>
|
||||
</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>
|
||||
{/* 结果列表 */}
|
||||
<Box className="flex-1 overflow-auto">
|
||||
{schemes.length === 0 ? (
|
||||
<Box className="flex flex-col items-center justify-center h-full text-gray-400">
|
||||
<Box className="mb-4">
|
||||
<svg
|
||||
width="80"
|
||||
height="80"
|
||||
viewBox="0 0 80 80"
|
||||
fill="none"
|
||||
className="opacity-40"
|
||||
>
|
||||
<rect
|
||||
x="10"
|
||||
y="20"
|
||||
width="60"
|
||||
height="45"
|
||||
rx="2"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
/>
|
||||
<line
|
||||
x1="10"
|
||||
y1="30"
|
||||
x2="70"
|
||||
y2="30"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
/>
|
||||
</svg>
|
||||
</Box>
|
||||
<Typography variant="body2">总共 0 条</Typography>
|
||||
<Typography variant="body2" className="mt-1">
|
||||
No data
|
||||
</Typography>
|
||||
</Box>
|
||||
) : (
|
||||
<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"
|
||||
>
|
||||
ID: {scheme.id} · 日期:{" "}
|
||||
{formatTime(scheme.create_time)}
|
||||
</Typography>
|
||||
</Box>
|
||||
{/* 操作按钮 */}
|
||||
<Box className="flex gap-1 ml-2">
|
||||
<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>
|
||||
<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>
|
||||
)}
|
||||
) : (
|
||||
<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 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 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="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 ? (
|
||||
{/* 操作按钮区域 */}
|
||||
<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="outlined"
|
||||
variant="contained"
|
||||
fullWidth
|
||||
size="small"
|
||||
className="border-blue-600 text-blue-600 hover:bg-blue-50"
|
||||
onClick={() =>
|
||||
handleLocatePipes?.(scheme.schemeDetail!.burst_ID)
|
||||
}
|
||||
className="bg-blue-600 hover:bg-blue-700"
|
||||
onClick={() => handleViewDetails(scheme.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>
|
||||
</Box>
|
||||
</Collapse>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</Box>
|
||||
)}
|
||||
</Collapse>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user