795 lines
28 KiB
TypeScript
795 lines
28 KiB
TypeScript
"use client";
|
|
|
|
import React, { useEffect, useMemo, 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 {
|
|
DescriptionOutlined as ReportIcon,
|
|
Info as InfoIcon,
|
|
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 { api } from "@/lib/api";
|
|
import moment from "moment";
|
|
import { config, NETWORK_NAME } from "@config/config";
|
|
import { useNotification } from "@refinedev/core";
|
|
import { useControllableObjectState } from "@components/olmap/core/useControllableState";
|
|
|
|
import { queryFeaturesByIds } from "@/utils/mapQueryService";
|
|
import { useData, 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 Timeline from "@components/olmap/core/Controls/Timeline";
|
|
import { SchemaItem, SchemeRecord } from "./types";
|
|
import {
|
|
getPipeDiameterDisplay,
|
|
type PipeDiameterMap,
|
|
} from "./schemePipeDiameters";
|
|
import { useSchemeCreatorName } from "@components/olmap/core/useSchemeCreatorName";
|
|
import { SchemeQueryEmptyState } from "@components/olmap/common/PanelEmptyState";
|
|
|
|
interface SchemeQueryProps {
|
|
schemes?: SchemeRecord[];
|
|
onSchemesChange?: (schemes: SchemeRecord[]) => void;
|
|
onViewReport?: (scheme: SchemeRecord) => void;
|
|
network?: string;
|
|
state?: BurstSchemeQueryState;
|
|
onStateChange?: (state: BurstSchemeQueryState) => void;
|
|
}
|
|
|
|
const SCHEME_TYPE = "burst_analysis";
|
|
|
|
export interface BurstSchemeQueryState {
|
|
queryAll: boolean;
|
|
queryDate: Dayjs | null;
|
|
showTimeline: boolean;
|
|
selectedDate: Date | undefined;
|
|
timeRange: { start: Date; end: Date } | undefined;
|
|
expandedId: number | null;
|
|
hasQueried: boolean;
|
|
}
|
|
|
|
export const createBurstSchemeQueryState = (): BurstSchemeQueryState => ({
|
|
queryAll: true,
|
|
queryDate: dayjs(new Date()),
|
|
showTimeline: false,
|
|
selectedDate: undefined,
|
|
timeRange: undefined,
|
|
expandedId: null,
|
|
hasQueried: false,
|
|
});
|
|
|
|
const SchemeQuery: React.FC<SchemeQueryProps> = ({
|
|
schemes: externalSchemes,
|
|
onSchemesChange,
|
|
onViewReport,
|
|
network = NETWORK_NAME,
|
|
state,
|
|
onStateChange,
|
|
}) => {
|
|
const [queryState, setQueryState, setQueryField] = useControllableObjectState(
|
|
state,
|
|
onStateChange,
|
|
createBurstSchemeQueryState(),
|
|
);
|
|
const {
|
|
queryAll,
|
|
queryDate,
|
|
showTimeline,
|
|
selectedDate,
|
|
timeRange,
|
|
expandedId,
|
|
hasQueried,
|
|
} = queryState;
|
|
const [highlightLayer, setHighlightLayer] =
|
|
useState<VectorLayer<VectorSource> | null>(null);
|
|
const [highlightFeatures, setHighlightFeatures] = useState<Feature[]>([]);
|
|
|
|
const [internalSchemes, setInternalSchemes] = useState<SchemeRecord[]>([]);
|
|
const [loading, setLoading] = useState<boolean>(false);
|
|
const creatorName = useSchemeCreatorName();
|
|
const [mapContainer, setMapContainer] = useState<HTMLElement | null>(null); // 地图容器元素
|
|
const [pipeDiametersByScheme, setPipeDiametersByScheme] = useState<
|
|
Record<number, PipeDiameterMap>
|
|
>({});
|
|
const [loadingDiameterByScheme, setLoadingDiameterByScheme] = useState<
|
|
Record<number, boolean>
|
|
>({});
|
|
|
|
const { open } = useNotification();
|
|
|
|
const map = useMap();
|
|
const data = useData();
|
|
const { schemeName, setSchemeName } = data || {};
|
|
|
|
// 使用外部提供的 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 filteredSchemes = useMemo(() => {
|
|
return schemes
|
|
.filter((scheme) => scheme.type === SCHEME_TYPE)
|
|
.slice()
|
|
.sort(
|
|
(a, b) =>
|
|
moment(b.create_time).valueOf() - moment(a.create_time).valueOf(),
|
|
);
|
|
}, [schemes]);
|
|
|
|
const handleQuery = async () => {
|
|
if (!queryAll && !queryDate) return;
|
|
|
|
setLoading(true);
|
|
try {
|
|
const params: Record<string, string> = {
|
|
network,
|
|
scheme_type: SCHEME_TYPE,
|
|
};
|
|
if (!queryAll && queryDate) {
|
|
params.query_date = queryDate.startOf("day").toISOString();
|
|
}
|
|
const response = await api.get(`${config.BACKEND_URL}/api/v1/schemes`, {
|
|
params,
|
|
});
|
|
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;
|
|
});
|
|
}
|
|
|
|
const nextSchemes = filteredResults.map((item: SchemaItem) => ({
|
|
id: item.scheme_id,
|
|
schemeName: item.scheme_name,
|
|
type: item.scheme_type,
|
|
username: item.username,
|
|
create_time: item.create_time,
|
|
startTime: item.scheme_start_time,
|
|
schemeDetail: item.scheme_detail,
|
|
}));
|
|
setSchemes(nextSchemes);
|
|
setQueryField("hasQueried", true);
|
|
|
|
if (filteredResults.length === 0) {
|
|
open?.({
|
|
type: "success",
|
|
message: "查询结果",
|
|
description: queryAll
|
|
? "没有找到任何方案"
|
|
: `${queryDate!.format("YYYY-MM-DD")} 没有找到相关方案`,
|
|
});
|
|
} else {
|
|
open?.({
|
|
type: "success",
|
|
message: "查询成功",
|
|
description: `共找到 ${filteredResults.length} 条方案记录`,
|
|
});
|
|
}
|
|
} catch (error) {
|
|
console.error("查询请求失败:", error);
|
|
open?.({
|
|
type: "error",
|
|
message: "查询失败",
|
|
description: "获取方案列表失败，请稍后重试",
|
|
});
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
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 (expandedId === null || pipeDiametersByScheme[expandedId]) {
|
|
return;
|
|
}
|
|
|
|
const scheme = filteredSchemes.find((scheme) => scheme.id === expandedId);
|
|
const pipeIds = scheme?.schemeDetail?.burst_ID ?? [];
|
|
if (pipeIds.length === 0) {
|
|
return;
|
|
}
|
|
|
|
let cancelled = false;
|
|
setLoadingDiameterByScheme((previous) => ({
|
|
...previous,
|
|
[expandedId]: true,
|
|
}));
|
|
|
|
const loadPipeDiameters = async () => {
|
|
let features = await queryFeaturesByIds(pipeIds, "geo_pipes_mat");
|
|
const foundPipeIds = new Set(
|
|
features.map((feature) => String(feature.getProperties().id)),
|
|
);
|
|
const missingPipeIds = pipeIds.filter(
|
|
(pipeId) => !foundPipeIds.has(pipeId),
|
|
);
|
|
|
|
if (missingPipeIds.length > 0) {
|
|
const fallbackFeatures = await queryFeaturesByIds(
|
|
missingPipeIds,
|
|
"geo_pipes",
|
|
);
|
|
features = [...features, ...fallbackFeatures];
|
|
}
|
|
|
|
const nextDiameters: PipeDiameterMap = Object.fromEntries(
|
|
pipeIds.map((pipeId) => [pipeId, null]),
|
|
);
|
|
|
|
features.forEach((feature) => {
|
|
const properties = feature.getProperties();
|
|
const pipeId = String(properties.id);
|
|
const diameter = Number(properties.diameter);
|
|
nextDiameters[pipeId] = Number.isFinite(diameter) ? diameter : null;
|
|
});
|
|
|
|
if (cancelled) {
|
|
return;
|
|
}
|
|
|
|
setPipeDiametersByScheme((previous) => ({
|
|
...previous,
|
|
[expandedId]: nextDiameters,
|
|
}));
|
|
setLoadingDiameterByScheme((previous) => ({
|
|
...previous,
|
|
[expandedId]: false,
|
|
}));
|
|
};
|
|
|
|
loadPipeDiameters().catch((error) => {
|
|
console.error("查询管径失败:", error);
|
|
if (!cancelled) {
|
|
setLoadingDiameterByScheme((previous) => ({
|
|
...previous,
|
|
[expandedId]: false,
|
|
}));
|
|
}
|
|
});
|
|
|
|
return () => {
|
|
cancelled = true;
|
|
};
|
|
}, [expandedId, filteredSchemes, pipeDiametersByScheme]);
|
|
|
|
// 内部的方案查询函数
|
|
const handleViewDetails = (id: number) => {
|
|
const scheme = filteredSchemes.find((s) => s.id === id);
|
|
if (!scheme) return;
|
|
|
|
setQueryState((previous) => ({ ...previous, showTimeline: true }));
|
|
// 计算时间范围
|
|
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,
|
|
);
|
|
setQueryState((previous) => ({
|
|
...previous,
|
|
showTimeline: true,
|
|
selectedDate: schemeDate,
|
|
timeRange: { start, end },
|
|
}));
|
|
}
|
|
setSchemeName?.(scheme.schemeName);
|
|
handleLocatePipes(scheme.schemeDetail?.burst_ID || []);
|
|
};
|
|
|
|
// 初始化管道图层和高亮图层
|
|
useEffect(() => {
|
|
if (!map) return;
|
|
// 获取地图的目标容器
|
|
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: "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) {
|
|
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",
|
|
queryable: false,
|
|
},
|
|
});
|
|
|
|
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, highlightLayer]);
|
|
|
|
return (
|
|
<>
|
|
{/* 将时间轴渲染到地图容器中 */}
|
|
{showTimeline &&
|
|
mapContainer &&
|
|
ReactDOM.createPortal(
|
|
<Timeline
|
|
schemeDate={selectedDate}
|
|
timeRange={timeRange}
|
|
disableDateSelection={!!timeRange}
|
|
schemeName={schemeName}
|
|
schemeType={SCHEME_TYPE}
|
|
/>,
|
|
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) => {
|
|
setQueryField("queryAll", e.target.checked);
|
|
setQueryField("hasQueried", false);
|
|
}}
|
|
size="small"
|
|
/>
|
|
}
|
|
label={<Typography variant="body2">查询全部</Typography>}
|
|
className="m-0"
|
|
/>
|
|
<LocalizationProvider
|
|
dateAdapter={AdapterDayjs}
|
|
adapterLocale="zh-cn"
|
|
>
|
|
<DatePicker
|
|
value={queryDate}
|
|
onChange={(value) => {
|
|
if (value && dayjs.isDayjs(value)) {
|
|
setQueryField("queryDate", value);
|
|
setQueryField("hasQueried", false);
|
|
}
|
|
}}
|
|
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>
|
|
</Box>
|
|
|
|
{/* 结果列表 */}
|
|
<Box className="flex-1 overflow-auto">
|
|
{filteredSchemes.length === 0 ? (
|
|
<SchemeQueryEmptyState hasQueried={hasQueried} />
|
|
) : (
|
|
<Box className="space-y-2 p-2">
|
|
<Typography variant="caption" className="text-gray-500 px-2">
|
|
共 {filteredSchemes.length} 条记录
|
|
</Typography>
|
|
{filteredSchemes.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 === "burst_analysis"
|
|
? "爆管模拟"
|
|
: 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={() =>
|
|
setQueryField(
|
|
"expandedId",
|
|
expandedId === scheme.id ? null : scheme.id,
|
|
)
|
|
}
|
|
color="primary"
|
|
className="p-1"
|
|
>
|
|
<InfoIcon fontSize="small" />
|
|
</IconButton>
|
|
</Tooltip>
|
|
<Tooltip title="查看分析报告">
|
|
<IconButton
|
|
size="small"
|
|
onClick={() => onViewReport?.(scheme)}
|
|
color="primary"
|
|
className="p-1"
|
|
>
|
|
<ReportIcon 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"
|
|
>
|
|
{getPipeDiameterDisplay(
|
|
scheme.schemeDetail?.burst_ID,
|
|
pipeDiametersByScheme[scheme.id],
|
|
!!loadingDiameterByScheme[scheme.id],
|
|
)}
|
|
</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"
|
|
>
|
|
{creatorName(scheme.username)}
|
|
</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={() => handleViewDetails(scheme.id)}
|
|
sx={{
|
|
textTransform: "none",
|
|
fontWeight: 500,
|
|
}}
|
|
>
|
|
查看分析结果
|
|
</Button>
|
|
</Box>
|
|
</Box>
|
|
</Collapse>
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</Box>
|
|
)}
|
|
</Box>
|
|
</Box>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default SchemeQuery;
|