暂存
This commit is contained in:
JIANG
@@ -15,7 +15,9 @@ import {
|
||||
IconButton,
|
||||
} from "@mui/material";
|
||||
import CloseIcon from "@mui/icons-material/Close";
|
||||
import { useState } from "react";
|
||||
import { useEffect, useState } from "react";
|
||||
import { apiFetch } from "@/lib/apiFetch";
|
||||
import { config, NETWORK_NAME } from "@/config/config";
|
||||
|
||||
interface ProjectSelectorProps {
|
||||
open: boolean;
|
||||
@@ -28,45 +30,96 @@ interface ProjectSelectorProps {
|
||||
onClose?: () => void;
|
||||
}
|
||||
|
||||
const PROJECTS = [
|
||||
{
|
||||
id: "tjwater",
|
||||
label: "默认",
|
||||
workspace: "tjwater",
|
||||
networkName: "tjwater",
|
||||
extent: [13508802, 3608164, 13555651, 3633686],
|
||||
},
|
||||
// {
|
||||
// label: "苏州河",
|
||||
// workspace: "szh",
|
||||
// networkName: "szh",
|
||||
// extent: [13490131, 3630016, 13525879, 3666969],
|
||||
// },
|
||||
{
|
||||
id: "test",
|
||||
label: "测试项目",
|
||||
workspace: "test",
|
||||
networkName: "test",
|
||||
extent: [13508849, 3608036, 13555781, 3633813],
|
||||
},
|
||||
];
|
||||
type ProjectOption = {
|
||||
id: string;
|
||||
label: string;
|
||||
workspace: string;
|
||||
networkName: string;
|
||||
extent: number[];
|
||||
description?: string | null;
|
||||
status?: string | null;
|
||||
projectRole?: string | null;
|
||||
};
|
||||
|
||||
export const ProjectSelector: React.FC<ProjectSelectorProps> = ({
|
||||
open,
|
||||
onSelect,
|
||||
onClose,
|
||||
}) => {
|
||||
const [projectId, setProjectId] = useState(PROJECTS[0].id);
|
||||
const [workspace, setWorkspace] = useState(PROJECTS[0].workspace);
|
||||
const [networkName, setNetworkName] = useState(PROJECTS[0].networkName);
|
||||
const [extent, setExtent] = useState<number[]>(
|
||||
PROJECTS[0].extent,
|
||||
);
|
||||
const [projects, setProjects] = useState<ProjectOption[]>([]);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [loadError, setLoadError] = useState<string | null>(null);
|
||||
const [projectId, setProjectId] = useState("");
|
||||
const [projectIdError, setProjectIdError] = useState<string | null>(null);
|
||||
const [workspace, setWorkspace] = useState(config.MAP_WORKSPACE);
|
||||
const [networkName, setNetworkName] = useState(NETWORK_NAME || "tjwater");
|
||||
const [extent, setExtent] = useState<number[]>(config.MAP_EXTENT);
|
||||
const [customMode, setCustomMode] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchProjects = async () => {
|
||||
setIsLoading(true);
|
||||
setLoadError(null);
|
||||
try {
|
||||
const response = await apiFetch(
|
||||
`${config.BACKEND_URL}/api/v1/meta/projects`,
|
||||
);
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP ${response.status}`);
|
||||
}
|
||||
const data = await response.json();
|
||||
const mapped: ProjectOption[] = Array.isArray(data)
|
||||
? data.map((item) => {
|
||||
const bbox = Array.isArray(item.map_extent?.bbox)
|
||||
? item.map_extent.bbox.map((value: number) => Number(value))
|
||||
: null;
|
||||
return {
|
||||
id: item.project_id,
|
||||
label: item.name || item.code || item.project_id,
|
||||
workspace: item.gs_workspace || config.MAP_WORKSPACE,
|
||||
networkName: item.code || NETWORK_NAME || config.MAP_WORKSPACE,
|
||||
extent:
|
||||
bbox && bbox.length === 4 ? bbox : config.MAP_EXTENT,
|
||||
description: item.description,
|
||||
status: item.status,
|
||||
projectRole: item.project_role,
|
||||
};
|
||||
})
|
||||
: [];
|
||||
setProjects(mapped);
|
||||
const savedProjectId = localStorage.getItem("active_project");
|
||||
const initial =
|
||||
(savedProjectId &&
|
||||
mapped.find((project) => project.id === savedProjectId)) ||
|
||||
mapped[0];
|
||||
if (initial) {
|
||||
setProjectId(initial.id);
|
||||
setWorkspace(initial.workspace);
|
||||
setNetworkName(initial.networkName);
|
||||
setExtent(initial.extent);
|
||||
setCustomMode(false);
|
||||
} else {
|
||||
setCustomMode(true);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Failed to load projects:", error);
|
||||
setLoadError("项目列表加载失败，请使用自定义配置");
|
||||
setCustomMode(true);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
fetchProjects();
|
||||
}, []);
|
||||
|
||||
const handleConfirm = () => {
|
||||
const resolvedProjectId = projectId.trim() || workspace || networkName;
|
||||
onSelect(resolvedProjectId, workspace, networkName, extent);
|
||||
if (!projectId.trim()) {
|
||||
setProjectIdError("项目 ID 不能为空");
|
||||
return;
|
||||
}
|
||||
setProjectIdError(null);
|
||||
onSelect(projectId.trim(), workspace, networkName, extent);
|
||||
};
|
||||
|
||||
return (
|
||||
@@ -126,31 +179,46 @@ export const ProjectSelector: React.FC<ProjectSelectorProps> = ({
|
||||
<FormControl fullWidth variant="outlined">
|
||||
<InputLabel>项目</InputLabel>
|
||||
<Select
|
||||
value={workspace}
|
||||
value={projectId}
|
||||
label="项目"
|
||||
onChange={(e) => {
|
||||
const val = e.target.value;
|
||||
if (val === "custom") {
|
||||
setCustomMode(true);
|
||||
setProjectId(workspace);
|
||||
setProjectIdError(null);
|
||||
} else {
|
||||
const p = PROJECTS.find((p) => p.workspace === val);
|
||||
const p = projects.find((p) => p.id === val);
|
||||
if (p) {
|
||||
setProjectId(p.id);
|
||||
setWorkspace(p.workspace);
|
||||
setNetworkName(p.networkName);
|
||||
setExtent(p.extent);
|
||||
setProjectIdError(null);
|
||||
}
|
||||
}
|
||||
}}
|
||||
>
|
||||
{PROJECTS.map((p) => (
|
||||
<MenuItem key={p.workspace} value={p.workspace}>
|
||||
{projects.length === 0 && (
|
||||
<MenuItem value="" disabled>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
{isLoading ? "正在加载项目..." : "暂无可用项目"}
|
||||
</Typography>
|
||||
</MenuItem>
|
||||
)}
|
||||
{projects.map((p) => (
|
||||
<MenuItem key={p.id} value={p.id}>
|
||||
<Box sx={{ display: "flex", flexDirection: "column" }}>
|
||||
<Typography variant="body1">{p.label}</Typography>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
工作区: {p.workspace} | 管网: {p.networkName}
|
||||
</Typography>
|
||||
{(p.status || p.projectRole) && (
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
{p.status ? `状态: ${p.status}` : ""}
|
||||
{p.status && p.projectRole ? " | " : ""}
|
||||
{p.projectRole ? `角色: ${p.projectRole}` : ""}
|
||||
</Typography>
|
||||
)}
|
||||
</Box>
|
||||
</MenuItem>
|
||||
))}
|
||||
@@ -158,15 +226,26 @@ export const ProjectSelector: React.FC<ProjectSelectorProps> = ({
|
||||
<Typography variant="body1">自定义配置...</Typography>
|
||||
</MenuItem>
|
||||
</Select>
|
||||
{loadError && (
|
||||
<Typography variant="caption" color="error">
|
||||
{loadError}
|
||||
</Typography>
|
||||
)}
|
||||
</FormControl>
|
||||
) : (
|
||||
<Box sx={{ display: "flex", flexDirection: "column", gap: 2 }}>
|
||||
<TextField
|
||||
label="项目 ID"
|
||||
value={projectId}
|
||||
onChange={(e) => setProjectId(e.target.value)}
|
||||
onChange={(e) => {
|
||||
setProjectId(e.target.value);
|
||||
setProjectIdError(null);
|
||||
}}
|
||||
fullWidth
|
||||
helperText="例如: tjwater"
|
||||
helperText={
|
||||
projectIdError || "例如: xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
|
||||
}
|
||||
error={Boolean(projectIdError)}
|
||||
/>
|
||||
<TextField
|
||||
label="Geoserver 工作区"
|
||||
|
||||
Reference in New Issue
Block a user