创建监测点优化布置页面
This commit is contained in:
JIANG
511
src/components/olmap/MonitoringPlaceOptimization/SchemeQuery.tsx
Normal file
511
src/components/olmap/MonitoringPlaceOptimization/SchemeQuery.tsx
Normal file
@@ -0,0 +1,511 @@
|
||||
"use client";
|
||||
|
||||
import React, { useState } from "react";
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Typography,
|
||||
Checkbox,
|
||||
FormControlLabel,
|
||||
IconButton,
|
||||
Card,
|
||||
CardContent,
|
||||
Chip,
|
||||
Tooltip,
|
||||
Collapse,
|
||||
Link,
|
||||
} from "@mui/material";
|
||||
import {
|
||||
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, { 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 { useMap } from "@app/OlMap/MapComponent";
|
||||
import { queryFeaturesByIds } from "@/utils/mapQueryService";
|
||||
import * as turf from "@turf/turf";
|
||||
|
||||
interface SchemeRecord {
|
||||
id: number;
|
||||
schemeName: string;
|
||||
sensorNumber: number;
|
||||
minDiameter: number;
|
||||
user: string;
|
||||
create_time: string;
|
||||
sensorLocation?: string[];
|
||||
}
|
||||
|
||||
interface SchemaItem {
|
||||
id: number;
|
||||
scheme_name: string;
|
||||
sensor_number: number;
|
||||
min_diameter: number;
|
||||
username: string;
|
||||
create_time: string;
|
||||
sensor_location?: string[];
|
||||
}
|
||||
|
||||
interface SchemeQueryProps {
|
||||
schemes?: SchemeRecord[];
|
||||
onSchemesChange?: (schemes: SchemeRecord[]) => void;
|
||||
onLocate?: (id: number) => void;
|
||||
network?: string;
|
||||
}
|
||||
|
||||
const SchemeQuery: React.FC<SchemeQueryProps> = ({
|
||||
schemes: externalSchemes,
|
||||
onSchemesChange,
|
||||
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 map = useMap();
|
||||
|
||||
// 使用外部提供的 schemes 或内部状态
|
||||
const schemes =
|
||||
externalSchemes !== undefined ? externalSchemes : internalSchemes;
|
||||
const setSchemes = onSchemesChange || setInternalSchemes;
|
||||
|
||||
// 格式化日期
|
||||
const formatTime = (timeStr: string) => {
|
||||
const time = moment(timeStr);
|
||||
return time.format("YYYY-MM-DD HH:mm:ss");
|
||||
};
|
||||
|
||||
// 格式化简短日期
|
||||
const formatShortDate = (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}/getallsensorplacements/?network=${network}`
|
||||
);
|
||||
|
||||
let filteredResults = response.data;
|
||||
|
||||
// 按日期过滤
|
||||
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.id,
|
||||
schemeName: item.scheme_name,
|
||||
sensorNumber: item.sensor_number,
|
||||
minDiameter: item.min_diameter,
|
||||
user: item.username,
|
||||
create_time: item.create_time,
|
||||
sensorLocation: item.sensor_location,
|
||||
}))
|
||||
);
|
||||
|
||||
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 handleLocateSensors = (sensorIds: string[]) => {
|
||||
if (!map) {
|
||||
open?.({
|
||||
type: "error",
|
||||
message: "地图未加载",
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if (sensorIds.length > 0) {
|
||||
queryFeaturesByIds(sensorIds).then((features) => {
|
||||
if (features.length > 0) {
|
||||
// 计算范围并缩放
|
||||
const geojsonFormat = new (window as any).ol.format.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 });
|
||||
}
|
||||
|
||||
open?.({
|
||||
type: "success",
|
||||
message: `已定位 ${features.length} 个传感器位置`,
|
||||
});
|
||||
} else {
|
||||
open?.({
|
||||
type: "error",
|
||||
message: "未找到传感器位置",
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// 查看详情（展开/收起）
|
||||
const handleViewDetails = (id: number) => {
|
||||
setExpandedId(expandedId === id ? null : id);
|
||||
};
|
||||
|
||||
// 保存方案（示例功能）
|
||||
const handleSaveScheme = (scheme: SchemeRecord) => {
|
||||
open?.({
|
||||
type: "success",
|
||||
message: "保存成功",
|
||||
description: `方案 "${scheme.schemeName}" 已保存`,
|
||||
});
|
||||
};
|
||||
|
||||
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)
|
||||
}
|
||||
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">
|
||||
{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.sensorNumber}`}
|
||||
size="small"
|
||||
className="h-5"
|
||||
color="primary"
|
||||
variant="outlined"
|
||||
/>
|
||||
</Box>
|
||||
<Typography
|
||||
variant="caption"
|
||||
className="text-gray-500 block"
|
||||
>
|
||||
最小半径: {scheme.minDiameter} · 用户: {scheme.user} · 日期: {formatShortDate(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-center gap-2">
|
||||
<Typography
|
||||
variant="caption"
|
||||
className="text-gray-600 min-w-[70px]"
|
||||
>
|
||||
传感器数量:
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="caption"
|
||||
className="font-medium text-gray-900"
|
||||
>
|
||||
{scheme.sensorNumber}
|
||||
</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.minDiameter}
|
||||
</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>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{/* 传感器位置列表 */}
|
||||
{scheme.sensorLocation && scheme.sensorLocation.length > 0 && (
|
||||
<Box className="mb-3">
|
||||
<Typography
|
||||
variant="caption"
|
||||
className="text-gray-600 block mb-2"
|
||||
>
|
||||
传感器位置 ({scheme.sensorLocation.length}个):
|
||||
</Typography>
|
||||
<Box className="max-h-40 overflow-auto bg-gray-50 rounded p-2">
|
||||
<Box className="flex flex-wrap gap-2">
|
||||
{scheme.sensorLocation.map((sensorId, 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();
|
||||
handleLocateSensors([sensorId]);
|
||||
}}
|
||||
>
|
||||
{sensorId}
|
||||
</Link>
|
||||
))}
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{/* 操作按钮区域 */}
|
||||
<Box className="pt-2 border-t border-gray-100 flex gap-2">
|
||||
{scheme.sensorLocation && scheme.sensorLocation.length > 0 && (
|
||||
<Button
|
||||
variant="outlined"
|
||||
fullWidth
|
||||
size="small"
|
||||
className="border-blue-600 text-blue-600 hover:bg-blue-50"
|
||||
onClick={() =>
|
||||
handleLocateSensors(scheme.sensorLocation!)
|
||||
}
|
||||
sx={{
|
||||
textTransform: "none",
|
||||
fontWeight: 500,
|
||||
}}
|
||||
>
|
||||
定位全部传感器
|
||||
</Button>
|
||||
)}
|
||||
<Button
|
||||
variant="contained"
|
||||
fullWidth
|
||||
size="small"
|
||||
className="bg-blue-600 hover:bg-blue-700"
|
||||
onClick={() => handleSaveScheme(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