创建监测点优化布置页面
This commit is contained in:
JIANG
@@ -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;
|
||||
Reference in New Issue
Block a user