Skip to content
Snippets Groups Projects
Commit 42721343 authored by 汤绍坚's avatar 汤绍坚
Browse files

tsj: 处理“跨页面数据隔离问题”（使用usePageAwareApi），修改餐饮油烟下钻页的组件

parent a683b9d0
Branches
Tags
No related merge requests found
Hide whitespace changes
Inline Side-by-side
src/pages/Home_v_2504/components/SubPages/RestaurantOil/components/LeftContent/components/RealtimeMonitoring/index.tsx
+ 13
− 9
View file @ 42721343
......@@ -3,7 +3,8 @@ import ModuleTitleWithTabs from '@/pages/Home_v_2504/components/common/ModuleTit
import { ColumnsType } from 'antd/es/table';
import styles from './index.less';
import services from '@/services';
import useApiControl, { formatDateTime, useDateParamFormatter } from '@/pages/Home_v_2504/hooks/useApiControl';
import usePageAwareApi from '@/pages/Home_v_2504/hooks/usePageAwareApi';
import { formatDateTime, useDateParamFormatter } from '@/pages/Home_v_2504/hooks/useApiControl';
import BlueTableWithScroll from '@/components/BlueTableWithScroll';
import { useGlobalModalServices } from '@/pages/GlobalModalServices/provider';
import useLatestValue from '@/pages/Home_v_2504/hooks/useLatestValue';
......@@ -25,12 +26,14 @@ interface RealtimeMonitoringProps {
districtCode?: string;
streetCode?: string;
};
pageId?: string;
}
const RealtimeMonitoring: React.FC<RealtimeMonitoringProps> = ({
startTime,
endTime,
regionParams
regionParams,
pageId = 'restaurantOil'
}) => {
// 获取全局弹窗服务
const { dispatch } = useGlobalModalServices();
......@@ -58,9 +61,9 @@ const RealtimeMonitoring: React.FC<RealtimeMonitoringProps> = ({
// 日期格式化工具
const { formatDateParams } = useDateParamFormatter();
// 使用useApiControl管理实时监测API调用
const monitoringApi = useApiControl({
apiFunction: async (params) => {
// 使用usePageAwareApi管理实时监测API调用
const monitoringApi = usePageAwareApi({
apiFunction: async (params: any) => {
if (!params.startTime || !params.endTime) {
throw new Error('缺少必要的日期参数');
}
......@@ -76,7 +79,7 @@ const RealtimeMonitoring: React.FC<RealtimeMonitoringProps> = ({
throw new Error('获取实时监测数据失败');
},
onSuccess: (data, params) => {
onSuccess: (data: any, params: any) => {
const { records } = data;
if (records?.length > 0) {
......@@ -116,7 +119,7 @@ const RealtimeMonitoring: React.FC<RealtimeMonitoringProps> = ({
}
}
},
onError: (error, params) => {
onError: (error: any, params: any) => {
console.error('获取实时监测数据出错:', error);
// 只有在第一页时清空数据源
if (params.pageNo === 0) {
......@@ -125,9 +128,10 @@ const RealtimeMonitoring: React.FC<RealtimeMonitoringProps> = ({
}
},
formatParams: formatDateParams,
apiName: '实时监测',
apiName: '餐饮油烟实时监测',
debounceTime: 300,
cacheTime: 5000 // 缓存5秒
cacheTime: 5000, // 缓存5秒
pageId: pageId
});
// 处理设备点击，显示设备详情弹窗
......
src/pages/Home_v_2504/components/SubPages/RestaurantOil/components/LeftContent/index.tsx
+ 48
− 37
View file @ 42721343
......@@ -10,7 +10,8 @@ import RealtimeMonitoring from './components/RealtimeMonitoring';
import styles from './index.less';
import { useMapState } from '@/pages/Home_v_2504/components/MapStateContext';
import services from '@/services';
import useApiControl, { formatDateTime, useDateParamFormatter } from '@/pages/Home_v_2504/hooks/useApiControl';
import usePageAwareApi from '@/pages/Home_v_2504/hooks/usePageAwareApi';
import { formatDateTime, useDateParamFormatter } from '@/pages/Home_v_2504/hooks/useApiControl';
import useLatestValue from '@/pages/Home_v_2504/hooks/useLatestValue';
import dayjs from 'dayjs';
......@@ -48,7 +49,11 @@ interface MonitoringListItem {
type AreaType = 'all' | 'urban' | 'central' | 'county';
const isUseRealtimeMonitoring = false;
const LeftContent: React.FC = () => {
interface LeftContentProps {
pageId?: string;
}
const LeftContent: React.FC<LeftContentProps> = ({ pageId = 'restaurantOil' }) => {
// 地图状态
const { mapState } = useMapState();
......@@ -171,9 +176,9 @@ const LeftContent: React.FC = () => {
const { formatDateParams } = useDateParamFormatter();
const regionCodeRef = useRef<string>('');
// 使用useApiControl管理油烟统计API调用
const oilStatisticsApi = useApiControl({
apiFunction: async (params) => {
// 使用usePageAwareApi管理油烟统计API调用
const oilStatisticsApi = usePageAwareApi({
apiFunction: async (params: any) => {
if (!params.startTime || !params.endTime) {
throw new Error('缺少必要的日期参数');
}
......@@ -189,7 +194,7 @@ const LeftContent: React.FC = () => {
throw new Error('获取油烟统计数据失败');
},
onSuccess: (data) => {
onSuccess: (data: any) => {
// 提取正确路径下的数据
const record = data?.records?.[0] || {};
......@@ -201,7 +206,7 @@ const LeftContent: React.FC = () => {
qy: record.qy ?? 0
});
},
onError: (error) => {
onError: (error: any) => {
console.error('获取油烟统计数据出错:', error);
setOilStatistics({
gj: 0,
......@@ -212,14 +217,15 @@ const LeftContent: React.FC = () => {
});
},
formatParams: formatDateParams,
apiName: '油烟统计',
apiName: '餐饮油烟统计',
debounceTime: 300,
cacheTime: 5000 // 缓存5秒
cacheTime: 5000, // 缓存5秒
pageId: pageId
});
// 使用useApiControl管理告警区域API调用
const alertAreaApi = useApiControl({
apiFunction: async (params) => {
// 使用usePageAwareApi管理告警区域API调用
const alertAreaApi = usePageAwareApi({
apiFunction: async (params: any) => {
if (!params.startTime || !params.endTime || !params.districtCodeList) {
throw new Error('缺少必要的参数');
}
......@@ -235,7 +241,7 @@ const LeftContent: React.FC = () => {
throw new Error('获取告警区域数据失败');
},
onSuccess: (data) => {
onSuccess: (data: any) => {
// 提取正确路径下的数据并格式化
const records = data?.records || [];
const formattedData = records.map((item: any) => ({
......@@ -246,19 +252,20 @@ const LeftContent: React.FC = () => {
setAlertAreaData(formattedData);
},
onError: (error) => {
onError: (error: any) => {
console.error('获取告警区域数据出错:', error);
setAlertAreaData([]);
},
formatParams: formatDateParams,
apiName: '告警区域',
apiName: '餐饮油烟告警区域',
debounceTime: 300,
cacheTime: 5000 // 缓存5秒
cacheTime: 5000, // 缓存5秒
pageId: pageId
});
// 使用useApiControl管理设备告警排行API调用
const alertRankingApi = useApiControl({
apiFunction: async (params) => {
// 使用usePageAwareApi管理设备告警排行API调用
const alertRankingApi = usePageAwareApi({
apiFunction: async (params: any) => {
if (!params.startTime || !params.endTime) {
throw new Error('缺少必要的日期参数');
}
......@@ -274,7 +281,7 @@ const LeftContent: React.FC = () => {
throw new Error('获取告警排行数据失败');
},
onSuccess: (data) => {
onSuccess: (data: any) => {
// 提取正确路径下的数据并格式化
const records = data?.records || [];
......@@ -293,19 +300,20 @@ const LeftContent: React.FC = () => {
setAlertRankingData(formattedData);
},
onError: (error) => {
onError: (error: any) => {
console.error('获取告警排行数据出错:', error);
setAlertRankingData([]);
},
formatParams: formatDateParams,
apiName: '告警排行',
apiName: '餐饮油烟告警排行',
debounceTime: 300,
cacheTime: 5000 // 缓存5秒
cacheTime: 5000, // 缓存5秒
pageId: pageId
});
// 使用useApiControl管理油烟告警趋势API调用
const alertTrendApi = useApiControl({
apiFunction: async (params) => {
// 使用usePageAwareApi管理油烟告警趋势API调用
const alertTrendApi = usePageAwareApi({
apiFunction: async (params: any) => {
if (!params.startTime || !params.endTime) {
throw new Error('缺少必要的日期参数');
}
......@@ -321,7 +329,7 @@ const LeftContent: React.FC = () => {
throw new Error('获取油烟告警趋势数据失败');
},
onSuccess: (data) => {
onSuccess: (data: any) => {
// 提取正确路径下的数据并格式化
let records = data?.records || [];
......@@ -386,14 +394,15 @@ const LeftContent: React.FC = () => {
setAlertTrendData([]);
}
},
onError: (error) => {
onError: (error: any) => {
console.error('获取油烟告警趋势数据出错:', error);
setAlertTrendData([]);
},
formatParams: formatDateParams,
apiName: '油烟告警趋势',
apiName: '餐饮油烟告警趋势',
debounceTime: 300,
cacheTime: 5000 // 缓存5秒
cacheTime: 5000, // 缓存5秒
pageId: pageId
});
const translateTrendTime = (inputDate: string | number) => {
......@@ -421,9 +430,9 @@ const LeftContent: React.FC = () => {
return inputDate;
}
// 使用useApiControl管理街道告警次数API调用
const streetAlertAreaApi = useApiControl({
apiFunction: async (params) => {
// 使用usePageAwareApi管理街道告警次数API调用
const streetAlertAreaApi = usePageAwareApi({
apiFunction: async (params: any) => {
if (!params.startTime || !params.endTime || !params.districtCodeList) {
throw new Error('缺少必要的参数');
}
......@@ -439,7 +448,7 @@ const LeftContent: React.FC = () => {
throw new Error('获取街道告警区域数据失败');
},
onSuccess: (data) => {
onSuccess: (data: any) => {
// 提取正确路径下的数据并格式化
const records = data?.records || [];
const formattedData = records.map((item: any) => ({
......@@ -451,13 +460,14 @@ const LeftContent: React.FC = () => {
console.log('街道告警区域数据成功:', formattedData);
setAlertAreaData(formattedData);
},
onError: (error) => {
onError: (error: any) => {
console.error('获取街道告警区域数据出错:', error);
setAlertAreaData([]);
},
formatParams: formatDateParams,
// enableDebug: true,
apiName: '街道告警区域'
apiName: '餐饮油烟街道告警区域',
pageId: pageId
});
// 加载油烟统计数据 - 使用本地状态的日期参数
......@@ -961,6 +971,7 @@ const LeftContent: React.FC = () => {
startTime={dateRange.startTime}
endTime={dateRange.endTime}
regionParams={params}
pageId={pageId}
key={`monitoring-${dateRange.startTime}-${dateRange.endTime}-${mapState.regionCode}`}
/>
);
......@@ -989,7 +1000,7 @@ const LeftContent: React.FC = () => {
onChange={handleDateChange}
defaultType="day"
panelType="left"
pageId="restaurantOil"
pageId={pageId}
/>
</div>
......
src/pages/Home_v_2504/components/SubPages/RestaurantOil/index.tsx
+ 12
− 3
View file @ 42721343
......@@ -17,9 +17,18 @@ const RestaurantOil: React.FC<RestaurantOilProps> = ({ visible }) => {
<SubPageTemplate
visible={visible}
pageId={INDUSTRY_PAGE_IDS.RESTAURANT_OIL}
leftComponent={LeftContent}
rightComponent={RightContent}
// rightComponent={AdministrativePunishment}
leftComponent={(props) => (
<LeftContent
{...props}
pageId={INDUSTRY_PAGE_IDS.RESTAURANT_OIL}
/>
)}
rightComponent={(props) => (
<RightContent
{...props}
pageId={INDUSTRY_PAGE_IDS.RESTAURANT_OIL}
/>
)}
title="餐饮油烟监管"
/>
);
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment