添加方案记录缓存支持到爆管和漏损检测面板
This commit is contained in:
@@ -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?.({
|
||||
|
||||
Reference in New Issue
Block a user