创建监测点优化布置页面
This commit is contained in:
JIANG
15
src/app/(main)/monitoring-place-optimization/page.tsx
Normal file
15
src/app/(main)/monitoring-place-optimization/page.tsx
Normal file
@@ -0,0 +1,15 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import MapComponent from "@app/OlMap/MapComponent";
|
||||||
|
import MapToolbar from "@app/OlMap/Controls/Toolbar";
|
||||||
|
import MonitoringPlaceOptimizationPanel from "@components/olmap/MonitoringPlaceOptimizationPanel";
|
||||||
|
export default function Home() {
|
||||||
|
return (
|
||||||
|
<div className="relative w-full h-full overflow-hidden">
|
||||||
|
<MapComponent>
|
||||||
|
<MapToolbar />
|
||||||
|
<MonitoringPlaceOptimizationPanel />
|
||||||
|
</MapComponent>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,292 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import React, { useState } from "react";
|
||||||
|
import {
|
||||||
|
Box,
|
||||||
|
TextField,
|
||||||
|
Button,
|
||||||
|
Typography,
|
||||||
|
MenuItem,
|
||||||
|
Stack,
|
||||||
|
} from "@mui/material";
|
||||||
|
import { PlayArrow as PlayArrowIcon } from "@mui/icons-material";
|
||||||
|
import { useNotification } from "@refinedev/core";
|
||||||
|
import axios from "axios";
|
||||||
|
import { config, NETWORK_NAME } from "@/config/config";
|
||||||
|
|
||||||
|
const OptimizationParameters: React.FC = () => {
|
||||||
|
const { open } = useNotification();
|
||||||
|
|
||||||
|
// 表单状态
|
||||||
|
const [sensorType, setSensorType] = useState<string>("压力");
|
||||||
|
const [method, setMethod] = useState<string>("聚类分析");
|
||||||
|
const [sensorCount, setSensorCount] = useState<number>(5);
|
||||||
|
const [minDiameter, setMinDiameter] = useState<number>(5);
|
||||||
|
const [schemeName, setSchemeName] = useState<string>(
|
||||||
|
"Fangan" + new Date().getTime()
|
||||||
|
);
|
||||||
|
const [network] = useState<string>(NETWORK_NAME);
|
||||||
|
const [analyzing, setAnalyzing] = useState<boolean>(false);
|
||||||
|
|
||||||
|
// 传感器类型选项
|
||||||
|
const sensorTypeOptions = [
|
||||||
|
{ value: "压力", label: "压力" },
|
||||||
|
{ value: "流量", label: "流量" },
|
||||||
|
];
|
||||||
|
|
||||||
|
// 方法选项
|
||||||
|
const methodOptions = [
|
||||||
|
{ value: "聚类分析", label: "聚类分析" },
|
||||||
|
{ value: "灵敏度分析", label: "灵敏度分析" },
|
||||||
|
];
|
||||||
|
|
||||||
|
// 创建方案
|
||||||
|
const handleCreateScheme = async () => {
|
||||||
|
// 验证输入
|
||||||
|
if (!schemeName.trim()) {
|
||||||
|
open?.({
|
||||||
|
type: "error",
|
||||||
|
message: "请输入方案名称",
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (sensorCount <= 0) {
|
||||||
|
open?.({
|
||||||
|
type: "error",
|
||||||
|
message: "监测点数目必须大于0",
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (minDiameter < 0) {
|
||||||
|
open?.({
|
||||||
|
type: "error",
|
||||||
|
message: "最小管径不能为负数",
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
setAnalyzing(true);
|
||||||
|
|
||||||
|
try {
|
||||||
|
// 构建请求参数
|
||||||
|
const requestData = {
|
||||||
|
network: network,
|
||||||
|
scheme_name: schemeName,
|
||||||
|
sensor_type: sensorType,
|
||||||
|
method: method,
|
||||||
|
sensor_count: sensorCount,
|
||||||
|
min_diameter: minDiameter,
|
||||||
|
};
|
||||||
|
|
||||||
|
// 发送优化请求
|
||||||
|
const response = await axios.post(
|
||||||
|
`${config.backendUrl}/monitoring-optimization/create`,
|
||||||
|
requestData
|
||||||
|
);
|
||||||
|
|
||||||
|
if (response.data && response.data.success) {
|
||||||
|
open?.({
|
||||||
|
type: "success",
|
||||||
|
message: "方案创建成功",
|
||||||
|
description: `方案 "${schemeName}" 已提交优化分析`,
|
||||||
|
});
|
||||||
|
|
||||||
|
// 重置方案名称
|
||||||
|
setSchemeName("Fangan" + new Date().getTime());
|
||||||
|
} else {
|
||||||
|
throw new Error(response.data?.message || "创建失败");
|
||||||
|
}
|
||||||
|
} catch (error: any) {
|
||||||
|
console.error("创建方案失败:", error);
|
||||||
|
open?.({
|
||||||
|
type: "error",
|
||||||
|
message: "创建方案失败",
|
||||||
|
description:
|
||||||
|
error.response?.data?.message || error.message || "未知错误",
|
||||||
|
});
|
||||||
|
} finally {
|
||||||
|
setAnalyzing(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Box className="flex flex-col gap-4">
|
||||||
|
{/* 类型选择 */}
|
||||||
|
<Box>
|
||||||
|
<Typography
|
||||||
|
variant="subtitle2"
|
||||||
|
className="mb-2 font-semibold text-gray-700"
|
||||||
|
>
|
||||||
|
类型
|
||||||
|
</Typography>
|
||||||
|
<TextField
|
||||||
|
select
|
||||||
|
fullWidth
|
||||||
|
size="small"
|
||||||
|
value={sensorType}
|
||||||
|
onChange={(e) => setSensorType(e.target.value)}
|
||||||
|
sx={{
|
||||||
|
"& .MuiOutlinedInput-root": {
|
||||||
|
"&:hover fieldset": {
|
||||||
|
borderColor: "#257DD4",
|
||||||
|
},
|
||||||
|
"&.Mui-focused fieldset": {
|
||||||
|
borderColor: "#257DD4",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{sensorTypeOptions.map((option) => (
|
||||||
|
<MenuItem key={option.value} value={option.value}>
|
||||||
|
{option.label}
|
||||||
|
</MenuItem>
|
||||||
|
))}
|
||||||
|
</TextField>
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
{/* 方法选择 */}
|
||||||
|
<Box>
|
||||||
|
<Typography
|
||||||
|
variant="subtitle2"
|
||||||
|
className="mb-2 font-semibold text-gray-700"
|
||||||
|
>
|
||||||
|
方法
|
||||||
|
</Typography>
|
||||||
|
<TextField
|
||||||
|
select
|
||||||
|
fullWidth
|
||||||
|
size="small"
|
||||||
|
value={method}
|
||||||
|
onChange={(e) => setMethod(e.target.value)}
|
||||||
|
sx={{
|
||||||
|
"& .MuiOutlinedInput-root": {
|
||||||
|
"&:hover fieldset": {
|
||||||
|
borderColor: "#257DD4",
|
||||||
|
},
|
||||||
|
"&.Mui-focused fieldset": {
|
||||||
|
borderColor: "#257DD4",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{methodOptions.map((option) => (
|
||||||
|
<MenuItem key={option.value} value={option.value}>
|
||||||
|
{option.label}
|
||||||
|
</MenuItem>
|
||||||
|
))}
|
||||||
|
</TextField>
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
{/* 监测点数目 */}
|
||||||
|
<Box>
|
||||||
|
<Typography
|
||||||
|
variant="subtitle2"
|
||||||
|
className="mb-2 font-semibold text-gray-700"
|
||||||
|
>
|
||||||
|
监测点数目
|
||||||
|
</Typography>
|
||||||
|
<TextField
|
||||||
|
fullWidth
|
||||||
|
size="small"
|
||||||
|
type="number"
|
||||||
|
value={sensorCount}
|
||||||
|
onChange={(e) => setSensorCount(parseInt(e.target.value) || 0)}
|
||||||
|
inputProps={{ min: 1 }}
|
||||||
|
sx={{
|
||||||
|
"& .MuiOutlinedInput-root": {
|
||||||
|
"&:hover fieldset": {
|
||||||
|
borderColor: "#257DD4",
|
||||||
|
},
|
||||||
|
"&.Mui-focused fieldset": {
|
||||||
|
borderColor: "#257DD4",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
{/* 压力监测点安装最小管径（可选） */}
|
||||||
|
<Box>
|
||||||
|
<Typography
|
||||||
|
variant="subtitle2"
|
||||||
|
className="mb-2 font-semibold text-gray-700"
|
||||||
|
>
|
||||||
|
{sensorType}监测点安装最小管径（可选）
|
||||||
|
</Typography>
|
||||||
|
<TextField
|
||||||
|
fullWidth
|
||||||
|
size="small"
|
||||||
|
type="number"
|
||||||
|
value={minDiameter}
|
||||||
|
onChange={(e) => setMinDiameter(parseInt(e.target.value) || 0)}
|
||||||
|
inputProps={{ min: 0 }}
|
||||||
|
sx={{
|
||||||
|
"& .MuiOutlinedInput-root": {
|
||||||
|
"&:hover fieldset": {
|
||||||
|
borderColor: "#257DD4",
|
||||||
|
},
|
||||||
|
"&.Mui-focused fieldset": {
|
||||||
|
borderColor: "#257DD4",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
{/* 方案名称 */}
|
||||||
|
<Box>
|
||||||
|
<Typography
|
||||||
|
variant="subtitle2"
|
||||||
|
className="mb-2 font-semibold text-gray-700"
|
||||||
|
>
|
||||||
|
方案名称
|
||||||
|
</Typography>
|
||||||
|
<TextField
|
||||||
|
fullWidth
|
||||||
|
size="small"
|
||||||
|
value={schemeName}
|
||||||
|
onChange={(e) => setSchemeName(e.target.value)}
|
||||||
|
placeholder="请输入方案名称"
|
||||||
|
sx={{
|
||||||
|
"& .MuiOutlinedInput-root": {
|
||||||
|
"&:hover fieldset": {
|
||||||
|
borderColor: "#257DD4",
|
||||||
|
},
|
||||||
|
"&.Mui-focused fieldset": {
|
||||||
|
borderColor: "#257DD4",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
{/* 创建方案按钮 */}
|
||||||
|
<Box className="flex justify-end mt-2">
|
||||||
|
<Button
|
||||||
|
variant="contained"
|
||||||
|
startIcon={<PlayArrowIcon />}
|
||||||
|
onClick={handleCreateScheme}
|
||||||
|
disabled={analyzing}
|
||||||
|
sx={{
|
||||||
|
backgroundColor: "#257DD4",
|
||||||
|
textTransform: "none",
|
||||||
|
px: 4,
|
||||||
|
py: 1,
|
||||||
|
"&:hover": {
|
||||||
|
backgroundColor: "#1e6bb8",
|
||||||
|
},
|
||||||
|
"&:disabled": {
|
||||||
|
backgroundColor: "#ccc",
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{analyzing ? "分析中..." : "创建方案"}
|
||||||
|
</Button>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default OptimizationParameters;
|
||||||
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;
|
||||||
203
src/components/olmap/MonitoringPlaceOptimizationPanel.tsx
Normal file
203
src/components/olmap/MonitoringPlaceOptimizationPanel.tsx
Normal file
@@ -0,0 +1,203 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import React, { useState } from "react";
|
||||||
|
import { Box, Drawer, Tabs, Tab, Typography, IconButton } from "@mui/material";
|
||||||
|
import {
|
||||||
|
ChevronRight as ChevronRightIcon,
|
||||||
|
ChevronLeft as ChevronLeftIcon,
|
||||||
|
Sensors as SensorsIcon,
|
||||||
|
Analytics as AnalyticsIcon,
|
||||||
|
Search as SearchIcon,
|
||||||
|
} from "@mui/icons-material";
|
||||||
|
import OptimizationParameters from "./MonitoringPlaceOptimization/OptimizationParameters";
|
||||||
|
import SchemeQuery from "./MonitoringPlaceOptimization/SchemeQuery";
|
||||||
|
|
||||||
|
interface SchemeRecord {
|
||||||
|
id: number;
|
||||||
|
schemeName: string;
|
||||||
|
sensorNumber: number;
|
||||||
|
minDiameter: number;
|
||||||
|
user: string;
|
||||||
|
create_time: string;
|
||||||
|
sensorLocation?: string[];
|
||||||
|
}
|
||||||
|
|
||||||
|
interface TabPanelProps {
|
||||||
|
children?: React.ReactNode;
|
||||||
|
index: number;
|
||||||
|
value: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
const TabPanel: React.FC<TabPanelProps> = ({ children, value, index }) => {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
role="tabpanel"
|
||||||
|
hidden={value !== index}
|
||||||
|
className="flex-1 overflow-hidden flex flex-col"
|
||||||
|
>
|
||||||
|
{value === index && (
|
||||||
|
<Box className="flex-1 overflow-auto p-4">{children}</Box>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
interface MonitoringPlaceOptimizationPanelProps {
|
||||||
|
open?: boolean;
|
||||||
|
onToggle?: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
const MonitoringPlaceOptimizationPanel: React.FC<
|
||||||
|
MonitoringPlaceOptimizationPanelProps
|
||||||
|
> = ({ open: controlledOpen, onToggle }) => {
|
||||||
|
const [internalOpen, setInternalOpen] = useState(true);
|
||||||
|
const [currentTab, setCurrentTab] = useState(0);
|
||||||
|
|
||||||
|
// 持久化方案查询结果
|
||||||
|
const [schemes, setSchemes] = useState<SchemeRecord[]>([]);
|
||||||
|
|
||||||
|
// 使用受控或非受控状态
|
||||||
|
const isOpen = controlledOpen !== undefined ? controlledOpen : internalOpen;
|
||||||
|
const handleToggle = () => {
|
||||||
|
if (onToggle) {
|
||||||
|
onToggle();
|
||||||
|
} else {
|
||||||
|
setInternalOpen(!internalOpen);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleTabChange = (_event: React.SyntheticEvent, newValue: number) => {
|
||||||
|
setCurrentTab(newValue);
|
||||||
|
};
|
||||||
|
|
||||||
|
const drawerWidth = 520;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
{/* 收起时的触发按钮 */}
|
||||||
|
{!isOpen && (
|
||||||
|
<Box
|
||||||
|
className="absolute top-4 right-4 bg-white shadow-2xl rounded-lg cursor-pointer hover:shadow-xl transition-all duration-300 opacity-95 hover:opacity-100"
|
||||||
|
onClick={handleToggle}
|
||||||
|
>
|
||||||
|
<Box className="flex flex-col items-center py-3 px-3 gap-1">
|
||||||
|
<SensorsIcon className="text-[#257DD4] w-5 h-5" />
|
||||||
|
<Typography
|
||||||
|
variant="caption"
|
||||||
|
className="text-gray-700 font-semibold my-1 text-xs"
|
||||||
|
style={{ writingMode: "vertical-rl" }}
|
||||||
|
>
|
||||||
|
监测点优化
|
||||||
|
</Typography>
|
||||||
|
<ChevronLeftIcon className="text-gray-600 w-4 h-4" />
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* 主面板 */}
|
||||||
|
<Drawer
|
||||||
|
anchor="right"
|
||||||
|
open={isOpen}
|
||||||
|
variant="persistent"
|
||||||
|
hideBackdrop
|
||||||
|
sx={{
|
||||||
|
width: isOpen ? drawerWidth : 0,
|
||||||
|
flexShrink: 0,
|
||||||
|
"& .MuiDrawer-paper": {
|
||||||
|
width: drawerWidth,
|
||||||
|
boxSizing: "border-box",
|
||||||
|
position: "absolute",
|
||||||
|
top: 16,
|
||||||
|
right: 16,
|
||||||
|
height: "calc(100vh - 32px)",
|
||||||
|
maxHeight: "850px",
|
||||||
|
borderRadius: "12px",
|
||||||
|
boxShadow:
|
||||||
|
"0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
|
||||||
|
backdropFilter: "blur(8px)",
|
||||||
|
opacity: 0.95,
|
||||||
|
transition: "all 0.3s ease-in-out",
|
||||||
|
border: "none",
|
||||||
|
"&:hover": {
|
||||||
|
opacity: 1,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Box className="flex flex-col h-full bg-white rounded-xl overflow-hidden">
|
||||||
|
{/* 头部 */}
|
||||||
|
<Box className="flex items-center justify-between px-5 py-4 bg-[#257DD4] text-white">
|
||||||
|
<Box className="flex items-center gap-2">
|
||||||
|
<SensorsIcon className="w-5 h-5" />
|
||||||
|
<Typography variant="h6" className="text-lg font-semibold">
|
||||||
|
监测点优化
|
||||||
|
</Typography>
|
||||||
|
</Box>
|
||||||
|
<IconButton
|
||||||
|
onClick={handleToggle}
|
||||||
|
size="small"
|
||||||
|
className="text-white hover:bg-white hover:bg-opacity-20 rounded-full p-1 transition-all duration-200"
|
||||||
|
aria-label="关闭"
|
||||||
|
>
|
||||||
|
<ChevronRightIcon className="w-5 h-5" />
|
||||||
|
</IconButton>
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
{/* Tabs 导航 */}
|
||||||
|
<Box className="border-b border-gray-200 bg-white">
|
||||||
|
<Tabs
|
||||||
|
value={currentTab}
|
||||||
|
onChange={handleTabChange}
|
||||||
|
variant="fullWidth"
|
||||||
|
sx={{
|
||||||
|
minHeight: 48,
|
||||||
|
"& .MuiTab-root": {
|
||||||
|
minHeight: 48,
|
||||||
|
textTransform: "none",
|
||||||
|
fontSize: "0.875rem",
|
||||||
|
fontWeight: 500,
|
||||||
|
transition: "all 0.2s",
|
||||||
|
},
|
||||||
|
"& .Mui-selected": {
|
||||||
|
color: "#257DD4",
|
||||||
|
},
|
||||||
|
"& .MuiTabs-indicator": {
|
||||||
|
backgroundColor: "#257DD4",
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Tab
|
||||||
|
icon={<AnalyticsIcon fontSize="small" />}
|
||||||
|
iconPosition="start"
|
||||||
|
label="优化要件"
|
||||||
|
/>
|
||||||
|
<Tab
|
||||||
|
icon={<SearchIcon fontSize="small" />}
|
||||||
|
iconPosition="start"
|
||||||
|
label="方案查询"
|
||||||
|
/>
|
||||||
|
</Tabs>
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
{/* Tab 内容 */}
|
||||||
|
<TabPanel value={currentTab} index={0}>
|
||||||
|
<OptimizationParameters />
|
||||||
|
</TabPanel>
|
||||||
|
|
||||||
|
<TabPanel value={currentTab} index={1}>
|
||||||
|
<SchemeQuery
|
||||||
|
schemes={schemes}
|
||||||
|
onSchemesChange={setSchemes}
|
||||||
|
onLocate={(id) => {
|
||||||
|
console.log("定位方案:", id);
|
||||||
|
// TODO: 在地图上定位
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</TabPanel>
|
||||||
|
</Box>
|
||||||
|
</Drawer>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default MonitoringPlaceOptimizationPanel;
|
||||||
Reference in New Issue
Block a user