OrgTJWater/TJWaterFrontend_Refine
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(analysis): preserve tab panel state

Browse Source
This commit is contained in:
jiang
2026-07-09 13:59:01 +08:00
parent 701c5a949d
commit 694f7629ee
24 changed files with 1119 additions and 281 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/olmap/MonitoringPlaceOptimization/MonitoringPlaceOptimizationPanel.tsx
+19 -3
View File
@@ -17,8 +17,14 @@ import {
Analytics as AnalyticsIcon,
Search as SearchIcon,
} from "@mui/icons-material";
import OptimizationParameters from "./OptimizationParameters";
import SchemeQuery from "./SchemeQuery";
import OptimizationParameters, {
createOptimizationParametersState,
type OptimizationParametersState,
} from "./OptimizationParameters";
import SchemeQuery, {
createMonitoringSchemeQueryState,
type MonitoringSchemeQueryState,
} from "./SchemeQuery";
interface SchemeRecord {
id: number;
@@ -63,6 +69,11 @@ const MonitoringPlaceOptimizationPanel: React.FC<
// 持久化方案查询结果
const [schemes, setSchemes] = useState<SchemeRecord[]>([]);
const [optimizationState, setOptimizationState] =
useState<OptimizationParametersState>(createOptimizationParametersState);
const [queryState, setQueryState] = useState<MonitoringSchemeQueryState>(
createMonitoringSchemeQueryState,
);
// 使用受控或非受控状态
const isOpen = controlledOpen !== undefined ? controlledOpen : internalOpen;
@@ -192,13 +203,18 @@ const MonitoringPlaceOptimizationPanel: React.FC<
{/* Tab 内容 */}
<TabPanel value={currentTab} index={0}>
<OptimizationParameters />
<OptimizationParameters
state={optimizationState}
onStateChange={setOptimizationState}
/>
</TabPanel>
<TabPanel value={currentTab} index={1}>
<SchemeQuery
schemes={schemes}
onSchemesChange={setSchemes}
state={queryState}
onStateChange={setQueryState}
onLocate={(id) => {
console.log("定位方案:", id);
// TODO: 在地图上定位
src/components/olmap/MonitoringPlaceOptimization/OptimizationParameters.tsx
+44 -14
View File
@@ -14,27 +14,53 @@ import { useNotification } from "@refinedev/core";
import { useGetIdentity } from "@refinedev/core";
import { api } from "@/lib/api";
import { config, NETWORK_NAME } from "@/config/config";
import { useControllableObjectState } from "@components/olmap/core/useControllableState";
type IUser = {
id: string;
name?: string;
};
const OptimizationParameters: React.FC = () => {
export interface OptimizationParametersState {
sensorType: string;
method: string;
sensorCount: number;
minDiameter: number;
schemeName: string;
}
export const createOptimizationParametersState =
(): OptimizationParametersState => ({
sensorType: "pressure",
method: "kmeans",
sensorCount: 5,
minDiameter: 5,
schemeName: "Fangan" + new Date().getTime(),
});
interface OptimizationParametersProps {
state?: OptimizationParametersState;
onStateChange?: (state: OptimizationParametersState) => void;
}
const OptimizationParameters: React.FC<OptimizationParametersProps> = ({
state,
onStateChange,
}) => {
const { open } = useNotification();
const { data: user } = useGetIdentity<IUser>();
// 表单状态
const [sensorType, setSensorType] = useState<string>("pressure");
const [method, setMethod] = useState<string>("kmeans");
const [sensorCount, setSensorCount] = useState<number>(5);
const [minDiameter, setMinDiameter] = useState<number>(5);
const [schemeName, setSchemeName] = useState<string>(
"Fangan" + new Date().getTime()
const [parametersState, , setFormField] = useControllableObjectState(
state,
onStateChange,
createOptimizationParametersState(),
);
const { sensorType, method, sensorCount, minDiameter, schemeName } =
parametersState;
const [network] = useState<string>(NETWORK_NAME);
const [analyzing, setAnalyzing] = useState<boolean>(false);
// 传感器类型选项
const sensorTypeOptions = [
{ value: "pressure", label: "压力" },
@@ -121,7 +147,7 @@ const OptimizationParameters: React.FC = () => {
});
// 重置方案名称
setSchemeName("Fangan" + new Date().getTime());
setFormField("schemeName", "Fangan" + new Date().getTime());
} else {
throw new Error(response.data?.message || "创建失败");
}
@@ -153,7 +179,7 @@ const OptimizationParameters: React.FC = () => {
fullWidth
size="small"
value={sensorType}
onChange={(e) => setSensorType(e.target.value)}
onChange={(e) => setFormField("sensorType", e.target.value)}
sx={{
"& .MuiOutlinedInput-root": {
"&:hover fieldset": {
@@ -186,7 +212,7 @@ const OptimizationParameters: React.FC = () => {
fullWidth
size="small"
value={method}
onChange={(e) => setMethod(e.target.value)}
onChange={(e) => setFormField("method", e.target.value)}
sx={{
"& .MuiOutlinedInput-root": {
"&:hover fieldset": {
@@ -219,7 +245,9 @@ const OptimizationParameters: React.FC = () => {
size="small"
type="number"
value={sensorCount}
onChange={(e) => setSensorCount(parseInt(e.target.value) || 0)}
onChange={(e) =>
setFormField("sensorCount", parseInt(e.target.value) || 0)
}
slotProps={{
htmlInput: { min: 1 },
}}
@@ -249,7 +277,9 @@ const OptimizationParameters: React.FC = () => {
size="small"
type="number"
value={minDiameter}
onChange={(e) => setMinDiameter(parseInt(e.target.value) || 0)}
onChange={(e) =>
setFormField("minDiameter", parseInt(e.target.value) || 0)
}
slotProps={{
htmlInput: { min: 0 },
}}
@@ -278,7 +308,7 @@ const OptimizationParameters: React.FC = () => {
fullWidth
size="small"
value={schemeName}
onChange={(e) => setSchemeName(e.target.value)}
onChange={(e) => setFormField("schemeName", e.target.value)}
placeholder="请输入方案名称"
sx={{
"& .MuiOutlinedInput-root": {
src/components/olmap/MonitoringPlaceOptimization/SchemeQuery.tsx
+29 -7
View File
@@ -30,6 +30,7 @@ import { config, NETWORK_NAME } from "@config/config";
import { useNotification } from "@refinedev/core";
import { useMap } from "@components/olmap/core/MapComponent";
import { queryFeaturesByIds } from "@/utils/mapQueryService";
import { useControllableObjectState } from "@components/olmap/core/useControllableState";
import { GeoJSON } from "ol/format";
import VectorLayer from "ol/layer/Vector";
import VectorSource from "ol/source/Vector";
@@ -62,19 +63,39 @@ interface SchemeQueryProps {
onSchemesChange?: (schemes: SchemeRecord[]) => void;
onLocate?: (id: number) => void;
network?: string;
state?: MonitoringSchemeQueryState;
onStateChange?: (state: MonitoringSchemeQueryState) => void;
}
export interface MonitoringSchemeQueryState {
queryAll: boolean;
queryDate: Dayjs | null;
expandedId: number | null;
}
export const createMonitoringSchemeQueryState =
(): MonitoringSchemeQueryState => ({
queryAll: true,
queryDate: dayjs(new Date()),
expandedId: null,
});
const SchemeQuery: React.FC<SchemeQueryProps> = ({
schemes: externalSchemes,
onSchemesChange,
onLocate,
network = NETWORK_NAME,
state,
onStateChange,
}) => {
const [queryAll, setQueryAll] = useState<boolean>(true);
const [queryDate, setQueryDate] = useState<Dayjs | null>(dayjs(new Date()));
const [queryState, , setQueryField] = useControllableObjectState(
state,
onStateChange,
createMonitoringSchemeQueryState(),
);
const { queryAll, queryDate, expandedId } = queryState;
const [internalSchemes, setInternalSchemes] = useState<SchemeRecord[]>([]);
const [loading, setLoading] = useState<boolean>(false);
const [expandedId, setExpandedId] = useState<number | null>(null);
const { open } = useNotification();
const map = useMap();
@@ -228,7 +249,7 @@ const SchemeQuery: React.FC<SchemeQueryProps> = ({
// 查看详情（展开/收起）
const handleViewDetails = (id: number) => {
setExpandedId(expandedId === id ? null : id);
setQueryField("expandedId", expandedId === id ? null : id);
};
// 保存方案（示例功能）
@@ -250,7 +271,7 @@ const SchemeQuery: React.FC<SchemeQueryProps> = ({
control={
<Checkbox
checked={queryAll}
onChange={(e) => setQueryAll(e.target.checked)}
onChange={(e) => setQueryField("queryAll", e.target.checked)}
size="small"
/>
}
@@ -264,7 +285,7 @@ const SchemeQuery: React.FC<SchemeQueryProps> = ({
<DatePicker
value={queryDate}
onChange={(value) =>
value && dayjs.isDayjs(value) && setQueryDate(value)
value && dayjs.isDayjs(value) && setQueryField("queryDate", value)
}
format="YYYY-MM-DD"
disabled={queryAll}
@@ -375,7 +396,8 @@ const SchemeQuery: React.FC<SchemeQueryProps> = ({
<IconButton
size="small"
onClick={() =>
setExpandedId(
setQueryField(
"expandedId",
expandedId === scheme.id ? null : scheme.id,
)
}