添加方案记录缓存支持到爆管和漏损检测面板

This commit is contained in:
2026-04-15 18:42:50 +08:00
parent ff5cbfde9c
commit 6410df0cb7
12 changed files with 85 additions and 63 deletions
@@ -12,7 +12,7 @@ import {
import AnalysisParameters from "./AnalysisParameters";
import DetectionResults from "./DetectionResults";
import SchemeQuery from "./SchemeQuery";
import { BurstDetectionResult } from "./types";
import { BurstDetectionResult, BurstDetectionSchemeRecord } from "./types";
const TabPanel = ({
value,
@@ -32,6 +32,7 @@ const BurstDetectionPanel: React.FC = () => {
const [open, setOpen] = useState(true);
const [tab, setTab] = useState(0);
const [result, setResult] = useState<BurstDetectionResult | null>(null);
const [schemes, setSchemes] = useState<BurstDetectionSchemeRecord[]>([]);
const drawerWidth = 450;
const panelTitle = "爆管侦测";
@@ -139,7 +140,7 @@ const BurstDetectionPanel: React.FC = () => {
<AnalysisParameters onResult={handleResult} />
</TabPanel>
<TabPanel value={tab} index={1}>
<SchemeQuery onViewResult={handleResult} />
<SchemeQuery onViewResult={handleResult} schemes={schemes} onSchemesChange={setSchemes} />
</TabPanel>
<TabPanel value={tab} index={2}>
<DetectionResults result={result} />
@@ -31,15 +31,19 @@ import {
interface Props {
onViewResult: (result: BurstDetectionResult) => void;
schemes?: BurstDetectionSchemeRecord[];
onSchemesChange?: (schemes: BurstDetectionSchemeRecord[]) => void;
}
const SchemeQuery: React.FC<Props> = ({ onViewResult }) => {
const SchemeQuery: React.FC<Props> = ({ onViewResult, schemes: externalSchemes, onSchemesChange }) => {
const { open } = useNotification();
const [queryAll, setQueryAll] = useState(true);
const [queryDate, setQueryDate] = useState<Dayjs | null>(dayjs());
const [schemes, setSchemes] = useState<BurstDetectionSchemeRecord[]>([]);
const [internalSchemes, setInternalSchemes] = useState<BurstDetectionSchemeRecord[]>([]);
const [loading, setLoading] = useState(false);
const [expandedId, setExpandedId] = useState<number | null>(null);
const schemes = externalSchemes !== undefined ? externalSchemes : internalSchemes;
const setSchemes = onSchemesChange || setInternalSchemes;
const buildDisplayResult = (
scheme: Pick<BurstDetectionSchemeRecord, "scheme_name" | "username" | "create_time">,
@@ -88,11 +92,12 @@ const SchemeQuery: React.FC<Props> = ({ onViewResult }) => {
}
const response = await api.get("/api/v1/burst-detection/schemes/", { params });
setSchemes(response.data);
const nextSchemes = response.data as BurstDetectionSchemeRecord[];
setSchemes(nextSchemes);
open?.({
type: "success",
message: "查询成功",
description: `共找到 ${response.data.length} 条侦测记录。`,
description: `共找到 ${nextSchemes.length} 条侦测记录。`,
});
} catch (error: any) {
open?.({
@@ -12,7 +12,7 @@ import {
import AnalysisParameters from "./AnalysisParameters";
import LocationResults from "./LocationResults";
import SchemeQuery from "./SchemeQuery";
import { BurstLocationResult } from "./types";
import { BurstLocationResult, BurstSchemeRecord } from "./types";
const TabPanel = ({
value,
@@ -32,6 +32,7 @@ const BurstLocationPanel: React.FC = () => {
const [open, setOpen] = useState(true);
const [tab, setTab] = useState(0);
const [result, setResult] = useState<BurstLocationResult | null>(null);
const [schemes, setSchemes] = useState<BurstSchemeRecord[]>([]);
const drawerWidth = 450;
const panelTitle = "爆管定位";
@@ -148,7 +149,7 @@ const BurstLocationPanel: React.FC = () => {
<AnalysisParameters onResult={handleResult} />
</TabPanel>
<TabPanel value={tab} index={1}>
<SchemeQuery onViewResult={handleViewResult} />
<SchemeQuery onViewResult={handleViewResult} schemes={schemes} onSchemesChange={setSchemes} />
</TabPanel>
<TabPanel value={tab} index={2}>
<LocationResults result={result} />
@@ -32,15 +32,19 @@ import { FLOW_DISPLAY_UNIT, toM3h } from "@utils/units";
interface Props {
onViewResult: (result: BurstLocationResult) => void;
schemes?: BurstSchemeRecord[];
onSchemesChange?: (schemes: BurstSchemeRecord[]) => void;
}
const SchemeQuery: React.FC<Props> = ({ onViewResult }) => {
const SchemeQuery: React.FC<Props> = ({ onViewResult, schemes: externalSchemes, onSchemesChange }) => {
const { open } = useNotification();
const [queryAll, setQueryAll] = useState(true);
const [queryDate, setQueryDate] = useState<Dayjs | null>(dayjs());
const [schemes, setSchemes] = useState<BurstSchemeRecord[]>([]);
const [internalSchemes, setInternalSchemes] = useState<BurstSchemeRecord[]>([]);
const [loading, setLoading] = useState(false);
const [expandedId, setExpandedId] = useState<number | null>(null);
const schemes = externalSchemes !== undefined ? externalSchemes : internalSchemes;
const setSchemes = onSchemesChange || setInternalSchemes;
const buildDisplayResult = (
scheme: Pick<BurstSchemeRecord, "scheme_name" | "username" | "create_time">,
@@ -87,11 +91,12 @@ const SchemeQuery: React.FC<Props> = ({ onViewResult }) => {
}
const response = await api.get(url, { params });
setSchemes(response.data);
const nextSchemes = response.data as BurstSchemeRecord[];
setSchemes(nextSchemes);
open?.({
type: "success",
message: "查询成功",
description: `共找到 ${response.data.length} 条记录`,
description: `共找到 ${nextSchemes.length} 条记录`,
});
} catch (error: any) {
console.error(error);
@@ -122,17 +122,16 @@ const SchemeQuery: React.FC<SchemeQueryProps> = ({
});
}
setSchemes(
filteredResults.map((item: SchemaItem) => ({
id: item.scheme_id,
schemeName: item.scheme_name,
type: item.scheme_type,
user: item.username,
create_time: item.create_time,
startTime: item.scheme_start_time,
schemeDetail: item.scheme_detail,
})),
);
const nextSchemes = filteredResults.map((item: SchemaItem) => ({
id: item.scheme_id,
schemeName: item.scheme_name,
type: item.scheme_type,
user: item.username,
create_time: item.create_time,
startTime: item.scheme_start_time,
schemeDetail: item.scheme_detail,
}));
setSchemes(nextSchemes);
if (filteredResults.length === 0) {
open?.({
@@ -195,17 +195,16 @@ const SchemeQuery: React.FC<SchemeQueryProps> = ({
);
}
setSchemes(
filteredResults.map((item: ContaminantSchemaItem) => ({
id: item.scheme_id,
schemeName: item.scheme_name,
type: item.scheme_type,
user: item.username,
create_time: item.create_time,
startTime: item.scheme_start_time,
schemeDetail: item.scheme_detail,
})),
);
const nextSchemes = filteredResults.map((item: ContaminantSchemaItem) => ({
id: item.scheme_id,
schemeName: item.scheme_name,
type: item.scheme_type,
user: item.username,
create_time: item.create_time,
startTime: item.scheme_start_time,
schemeDetail: item.scheme_detail,
}));
setSchemes(nextSchemes);
if (filteredResults.length === 0) {
open?.({
@@ -20,6 +20,7 @@ import {
import ContaminantAnalysisParameters from "./AnalysisParameters";
import ContaminantSchemeQuery from "./SchemeQuery";
import { useData } from "@components/olmap/core/MapComponent";
import { ContaminantSchemeRecord } from "./types";
interface WaterQualityPanelProps {
open?: boolean;
@@ -32,6 +33,7 @@ const WaterQualityPanel: React.FC<WaterQualityPanelProps> = ({
}) => {
const [internalOpen, setInternalOpen] = useState(true);
const [currentTab, setCurrentTab] = useState(0);
const [schemes, setSchemes] = useState<ContaminantSchemeRecord[]>([]);
const data = useData();
@@ -172,7 +174,11 @@ const WaterQualityPanel: React.FC<WaterQualityPanelProps> = ({
</TabPanel>
<TabPanel value={currentTab} index={1}>
<ContaminantSchemeQuery onViewResults={() => setCurrentTab(2)} />
<ContaminantSchemeQuery
schemes={schemes}
onSchemesChange={setSchemes}
onViewResults={() => setCurrentTab(2)}
/>
</TabPanel>
</Box>
</Drawer>
@@ -27,7 +27,7 @@ import AnalysisParameters from "./AnalysisParameters";
import SchemeQuery from "./SchemeQuery";
import RecognitionResults from "./RecognitionResults";
import { getAreaColor } from "./utils";
import { LeakageResultDetail } from "./types";
import { LeakageResultDetail, LeakageSchemeRecord } from "./types";
import { config } from "@/config/config";
const TabPanel = ({
@@ -52,6 +52,7 @@ const DMALeakDetectionPanel: React.FC = () => {
const [tab, setTab] = useState(0);
const [result, setResult] = useState<LeakageResultDetail | null>(null);
const [loadedResult, setLoadedResult] = useState<LeakageResultDetail | null>(null);
const [schemes, setSchemes] = useState<LeakageSchemeRecord[]>([]);
const drawerWidth = 450;
const panelTitle = "DMA 漏损识别";
@@ -277,7 +278,7 @@ const DMALeakDetectionPanel: React.FC = () => {
<AnalysisParameters onResult={handleAnalysisResult} />
</TabPanel>
<TabPanel value={tab} index={1}>
<SchemeQuery onViewResult={handleViewResult} />
<SchemeQuery onViewResult={handleViewResult} schemes={schemes} onSchemesChange={setSchemes} />
</TabPanel>
<TabPanel value={tab} index={2}>
<RecognitionResults result={result} />
@@ -28,15 +28,19 @@ import { FLOW_DISPLAY_UNIT, toM3h } from "@utils/units";
interface Props {
onViewResult: (result: LeakageResultDetail) => void;
schemes?: LeakageSchemeRecord[];
onSchemesChange?: (schemes: LeakageSchemeRecord[]) => void;
}
const SchemeQuery: React.FC<Props> = ({ onViewResult }) => {
const SchemeQuery: React.FC<Props> = ({ onViewResult, schemes: externalSchemes, onSchemesChange }) => {
const { open } = useNotification();
const [queryAll, setQueryAll] = useState(true);
const [queryDate, setQueryDate] = useState<Dayjs | null>(dayjs());
const [schemes, setSchemes] = useState<LeakageSchemeRecord[]>([]);
const [internalSchemes, setInternalSchemes] = useState<LeakageSchemeRecord[]>([]);
const [loading, setLoading] = useState(false);
const [expandedId, setExpandedId] = useState<number | null>(null);
const schemes = externalSchemes !== undefined ? externalSchemes : internalSchemes;
const setSchemes = onSchemesChange || setInternalSchemes;
const handleQuery = async () => {
setLoading(true);
@@ -48,7 +52,8 @@ const SchemeQuery: React.FC<Props> = ({ onViewResult }) => {
const response = await api.get(`${config.BACKEND_URL}/api/v1/leakage/schemes/`, {
params,
});
setSchemes(response.data);
const nextSchemes = response.data as LeakageSchemeRecord[];
setSchemes(nextSchemes);
} catch (error: any) {
open?.({
type: "error",
@@ -19,6 +19,7 @@ import {
import { MdCleaningServices } from "react-icons/md";
import AnalysisParameters from "./AnalysisParameters";
import SchemeQuery from "./SchemeQuery";
import { SchemeRecord } from "./types";
interface TabPanelProps {
children?: React.ReactNode;
@@ -51,6 +52,7 @@ const FlushingAnalysisPanel: React.FC<FlushingAnalysisPanelProps> = ({
}) => {
const [internalOpen, setInternalOpen] = useState(true);
const [currentTab, setCurrentTab] = useState(0);
const [schemes, setSchemes] = useState<SchemeRecord[]>([]);
// Using controlled or uncontrolled state
const isOpen = controlledOpen !== undefined ? controlledOpen : internalOpen;
@@ -183,7 +185,7 @@ const FlushingAnalysisPanel: React.FC<FlushingAnalysisPanelProps> = ({
</TabPanel>
<TabPanel value={currentTab} index={1}>
<SchemeQuery />
<SchemeQuery schemes={schemes} onSchemesChange={setSchemes} />
</TabPanel>
</Box>
</Drawer>
@@ -238,17 +238,16 @@ const SchemeQuery: React.FC<SchemeQueryProps> = ({
});
}
setSchemes(
filteredResults.map((item: SchemaItem) => ({
id: item.scheme_id,
schemeName: item.scheme_name,
type: item.scheme_type,
user: item.username,
create_time: item.create_time,
startTime: item.scheme_start_time,
schemeDetail: item.scheme_detail,
})),
);
const nextSchemes = filteredResults.map((item: SchemaItem) => ({
id: item.scheme_id,
schemeName: item.scheme_name,
type: item.scheme_type,
user: item.username,
create_time: item.create_time,
startTime: item.scheme_start_time,
schemeDetail: item.scheme_detail,
}));
setSchemes(nextSchemes);
if (filteredResults.length === 0) {
open?.({
@@ -163,17 +163,16 @@ const SchemeQuery: React.FC<SchemeQueryProps> = ({
});
}
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,
})),
);
const nextSchemes = 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,
}));
setSchemes(nextSchemes);
if (filteredResults.length === 0) {
open?.({