From 5b0e98a7241b1e59b1c7d5acb0d74bc313dc6f4f Mon Sep 17 00:00:00 2001
From: tangshaojian <63377964@qq.com>
Date: Mon, 26 May 2025 15:57:53 +0800
Subject: [PATCH] =?UTF-8?q?tsj:=20=E5=A4=84=E7=90=86=E2=80=9C=E8=B7=A8?=
=?UTF-8?q?=E9=A1=B5=E9=9D=A2=E6=95=B0=E6=8D=AE=E9=9A=94=E7=A6=BB=E9=97=AE?=
=?UTF-8?q?=E9=A2=98=E2=80=9D=EF=BC=88=E4=BD=BF=E7=94=A8usePageAwareApi?=
=?UTF-8?q?=EF=BC=89=EF=BC=8C=E4=BF=AE=E6=94=B9=E7=8E=AF=E5=A2=83=E5=8D=AB?=
=?UTF-8?q?=E7=94=9F=E7=9A=84=E5=B7=A6=E4=BE=A7=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../LeftContent/components/CarArea/index.tsx | 87 ++++++++-----------
.../LeftContent/components/CarType/index.tsx | 57 +++++++-----
.../components/WorkersArea/index.tsx | 73 +++++++---------
.../components/LeftContent/index.tsx | 9 +-
4 files changed, 107 insertions(+), 119 deletions(-)
diff --git a/src/pages/Home_v_2504/components/SubPages/Environment/components/LeftContent/components/CarArea/index.tsx b/src/pages/Home_v_2504/components/SubPages/Environment/components/LeftContent/components/CarArea/index.tsx
index aa28003f..dd3e018b 100644
--- a/src/pages/Home_v_2504/components/SubPages/Environment/components/LeftContent/components/CarArea/index.tsx
+++ b/src/pages/Home_v_2504/components/SubPages/Environment/components/LeftContent/components/CarArea/index.tsx
@@ -5,7 +5,8 @@ import AreaBarList, { AreaBarItem } from '@/components/V2504/AreaBarList'
import ModuleTitleWithTabs from '@/pages/Home_v_2504/components/common/ModuleTitleWithTabs'
import useLatestValue from '@/pages/Home_v_2504/hooks/useLatestValue';
import { useDataType, useMapState } from '@/pages/Home_v_2504/components/MapStateContext';
-import useApiControl, { formatDateTime } from '@/pages/Home_v_2504/hooks/useApiControl';
+import { formatDateTime } from '@/pages/Home_v_2504/hooks/useApiControl';
+import usePageAwareApi from '@/pages/Home_v_2504/hooks/usePageAwareApi';
import { getDistrictHighFrequencyArea } from '@/services/CityProblem';
// 类型定义
@@ -13,6 +14,7 @@ export interface CarAreaProps {
dateType?: string;
dateRange?: { startTime: string; endTime: string };
dataTypeKey?: string;
+ pageId?: string;
}
// 区域类型定义
@@ -20,7 +22,8 @@ export type AreaType = 'all' | 'urban' | 'central' | 'county';
const CarArea: React.FC<CarAreaProps> = ({
dateType,
dateRange,
- dataTypeKey = '环卫事件'
+ dataTypeKey = '环卫事件',
+ pageId = 'environment',
}) => {
// 地图状态
@@ -101,8 +104,17 @@ const CarArea: React.FC<CarAreaProps> = ({
return null;
}
+ // 获取当前页面的时间设置
+ const pageTimeSettings = currentMapState.pageTimeSettings?.[pageId];
+ if (!pageTimeSettings) {
+ console.log(`缺少${pageId}页面的时间设置，使用全局设置`);
+ }
+
+ // 使用页面级别的时间设置，如果存在的话
+ const leftPanelTime = pageTimeSettings?.leftPanelTime || currentMapState.leftPanelTime;
+
// 使用当前时间类型，如果不存在则使用props或默认值
- const effectiveType = currentMapState.leftPanelTime.type || dateType || 'month';
+ const effectiveType = leftPanelTime.type || dateType || 'month';
// 基础参数对象
const params: any = {
@@ -111,11 +123,11 @@ const CarArea: React.FC<CarAreaProps> = ({
// 处理日期参数
if (effectiveType === 'range') {
- params.customizeStart = formatDateTime(currentMapState.rightPanelTime.startTime);
- params.customizeEnd = formatDateTime(currentMapState.rightPanelTime.endTime, true);
+ params.customizeStart = formatDateTime(leftPanelTime.startTime);
+ params.customizeEnd = formatDateTime(leftPanelTime.endTime, true);
} else {
// 年、月、日视图使用time参数
- params.time = formatDateTime(currentMapState.rightPanelTime.startTime);
+ params.time = formatDateTime(leftPanelTime.startTime);
}
// 获取区域编码列表
@@ -142,21 +154,21 @@ const CarArea: React.FC<CarAreaProps> = ({
params.subTypeCode = useDataType(dataTypeKey);
return params;
- }, [mapStateRef, currentTabRef, dateType, translateDateType, dataTypeKey]);
+ }, [mapStateRef, currentTabRef, dateType, translateDateType, dataTypeKey, pageId]);
- // 使用useApiControl管理环卫人员区域API调用
- const highFrequencyApi = useApiControl({
- apiFunction: async (params) => {
- console.log('发起环卫人员区域请求，参数:', params);
+ // 使用usePageAwareApi管理环卫车辆区域API调用
+ const highFrequencyApi = usePageAwareApi({
+ apiFunction: async (params: any) => {
+ console.log('发起环卫车辆区域请求，参数:', params);
const response = await getDistrictHighFrequencyArea(params);
if (response.code === 200 && response.data) {
return response.data;
}
- throw new Error('获取环卫人员区域数据失败');
+ throw new Error('获取环卫车辆区域数据失败');
},
- onSuccess: (data) => {
+ onSuccess: (data: any) => {
if (!data || !Array.isArray(data) || data.length === 0) {
setData([]);
return;
@@ -177,7 +189,7 @@ const CarArea: React.FC<CarAreaProps> = ({
// { name: '郫都区', value: 118, percent: '10.2' },
// { name: '都江堰市', value: 117, percent: '10.1' }
// ];
- // console.log('使用模拟环卫人员区域数据');
+ // console.log('使用模拟环卫车辆区域数据');
// }
// 转换接口返回的数据格式为图表需要的格式
@@ -187,60 +199,33 @@ const CarArea: React.FC<CarAreaProps> = ({
count: parseInt(item.value) || 0
}));
- console.log('环卫人员区域数据成功:');
+ console.log('环卫车辆区域数据成功:');
setData(formattedData);
},
- onError: (error) => {
- console.error('获取环卫人员区域数据出错:', error);
+ onError: (error: any) => {
+ console.error('获取环卫车辆区域数据出错:', error);
setData([]);
},
- apiName: '环卫人员区域',
+ apiName: '环卫车辆区域',
debounceTime: 300,
- cacheTime: 5000 // 缓存5秒，避免频繁刷新时重复请求
+ cacheTime: 5000, // 缓存5秒，避免频繁刷新时重复请求
+ pageId: pageId, // 传入页面ID用于页面感知
});
- // 使用 useMemo 跟踪 rightPanelTime 的实际变化
- const memoizedRightPanelTime = useMemo(() => {
- return {
- type: mapState.rightPanelTime.type,
- startTime: mapState.rightPanelTime.startTime,
- endTime: mapState.rightPanelTime.endTime
- };
- }, [
- mapState.rightPanelTime.type,
- mapState.rightPanelTime.startTime,
- mapState.rightPanelTime.endTime
- ]);
-
- // 跟踪上一次的API参数，避免重复调用
- const prevApiParamsRef = useRef<string>('');
-
// 在地图状态变化和Tab变化时加载数据
useEffect(() => {
const params = buildApiParams();
// 如果没有必要的参数，不发送请求
if (!params) {
- console.log('缺少必要的日期参数，不加载环卫人员区域数据');
- return;
- }
-
- // 参数签名，用于比较参数是否有实际变化
- const paramsSignature = JSON.stringify(params);
-
- // 检查参数是否真正变化，防止重复调用
- if (paramsSignature === prevApiParamsRef.current) {
- console.log('环卫人员区域参数未变化，跳过重复加载');
+ console.log('缺少必要的日期参数，不加载环卫车辆区域数据');
return;
}
- console.log('加载环卫人员区域数据，参数:', params);
- // highFrequencyApi.callApi(params);
-
- // 更新上一次参数签名
- prevApiParamsRef.current = paramsSignature;
+ // 调用API - 现在usePageAwareApi内部会处理参数比较和页面状态
+ highFrequencyApi.callApi(params);
- }, [mapState.regionCode, memoizedRightPanelTime, currentTab, buildApiParams, highFrequencyApi]);
+ }, [mapState.regionCode, mapState.leftPanelTime, mapState.pageTimeSettings, currentTab, buildApiParams, highFrequencyApi]);
return (
<div className={styles.container}>
diff --git a/src/pages/Home_v_2504/components/SubPages/Environment/components/LeftContent/components/CarType/index.tsx b/src/pages/Home_v_2504/components/SubPages/Environment/components/LeftContent/components/CarType/index.tsx
index c1542a30..e4e7d919 100644
--- a/src/pages/Home_v_2504/components/SubPages/Environment/components/LeftContent/components/CarType/index.tsx
+++ b/src/pages/Home_v_2504/components/SubPages/Environment/components/LeftContent/components/CarType/index.tsx
@@ -4,7 +4,8 @@ import ChartWithLegend, { ChartDataItem } from '@/components/V2504/ChartWithLege
import styles from './index.less';
import { useDataType, useMapState } from '@/pages/Home_v_2504/components/MapStateContext';
import { getSourceSystemRank } from '@/services/CityProblem';
-import useApiControl, { formatDateTime } from '@/pages/Home_v_2504/hooks/useApiControl';
+import { formatDateTime } from '@/pages/Home_v_2504/hooks/useApiControl';
+import usePageAwareApi from '@/pages/Home_v_2504/hooks/usePageAwareApi';
import useLatestValue from '@/pages/Home_v_2504/hooks/useLatestValue';
import classNames from 'classnames';
@@ -13,6 +14,7 @@ interface CarTypeProps {
dateRange?: { startTime: string; endTime: string };
dataTypeKey?: string;
isThinLayout?: boolean;
+ pageId?: string;
}
const CarType: React.FC<CarTypeProps> = ({
@@ -20,6 +22,7 @@ const CarType: React.FC<CarTypeProps> = ({
dateRange,
dataTypeKey = '环卫事件',
isThinLayout = true,
+ pageId = 'environment',
}) => {
// 地图状态
const { mapState } = useMapState();
@@ -48,12 +51,21 @@ const CarType: React.FC<CarTypeProps> = ({
const currentMapState = mapStateRef.current;
// 如果没有必要的时间参数，返回null表示不应该发起请求
- if (!currentMapState.rightPanelTime?.startTime || !currentMapState.rightPanelTime?.endTime) {
+ if (!currentMapState.leftPanelTime?.startTime || !currentMapState.leftPanelTime?.endTime) {
return null;
}
+ // 获取当前页面的时间设置
+ const pageTimeSettings = currentMapState.pageTimeSettings?.[pageId];
+ if (!pageTimeSettings) {
+ console.log(`缺少${pageId}页面的时间设置，使用全局设置`);
+ }
+
+ // 使用页面级别的时间设置，如果存在的话
+ const leftPanelTime = pageTimeSettings?.leftPanelTime || currentMapState.leftPanelTime;
+
// 使用当前时间类型，如果不存在则使用props或默认值
- const effectiveType = currentMapState.rightPanelTime.type || dateType || 'month';
+ const effectiveType = leftPanelTime.type || dateType || 'month';
// 基础参数对象
const params: any = {
@@ -62,11 +74,11 @@ const CarType: React.FC<CarTypeProps> = ({
// 处理日期参数
if (effectiveType === 'range') {
- params.customizeStart = formatDateTime(currentMapState.rightPanelTime.startTime);
- params.customizeEnd = formatDateTime(currentMapState.rightPanelTime.endTime, true);
+ params.customizeStart = formatDateTime(leftPanelTime.startTime);
+ params.customizeEnd = formatDateTime(leftPanelTime.endTime, true);
} else {
// 年、月、日视图使用time参数
- params.time = formatDateTime(currentMapState.rightPanelTime.startTime);
+ params.time = formatDateTime(leftPanelTime.startTime);
}
// 处理区域参数
@@ -87,21 +99,21 @@ const CarType: React.FC<CarTypeProps> = ({
params.subTypeCode = useDataType(dataTypeKey);
return params;
- }, [mapStateRef, dateType, translateDateType, dataTypeKey]);
+ }, [mapStateRef, dateType, translateDateType, dataTypeKey, pageId]);
- // 使用useApiControl管理问题来源API调用
- const sourceSystemRankApi = useApiControl({
- apiFunction: async (params) => {
- console.log('发起问题来源请求，参数:', params);
+ // 使用usePageAwareApi管理环卫车辆类型API调用
+ const sourceSystemRankApi = usePageAwareApi({
+ apiFunction: async (params: any) => {
+ console.log('发起环卫车辆类型请求，参数:', params);
const response = await getSourceSystemRank(params);
if (response.code === 200 && response.data) {
return response.data;
}
- throw new Error('获取问题来源数据失败');
+ throw new Error('获取环卫车辆类型数据失败');
},
- onSuccess: (data) => {
+ onSuccess: (data: any) => {
if (!data || !Array.isArray(data) || data.length === 0) {
let useMockData = true;
if (useMockData) {
@@ -118,7 +130,7 @@ const CarType: React.FC<CarTypeProps> = ({
{ name: '郫都区', value: 118, percent: '10.2' },
{ name: '都江堰市', value: 117, percent: '10.1' }
];
- console.log('使用模拟问题来源数据');
+ console.log('使用模拟环卫车辆类型数据');
}else{
setData([]);
return;
@@ -137,16 +149,17 @@ const CarType: React.FC<CarTypeProps> = ({
percentage: parseFloat(item.percent) || 0
}));
- console.log('问题来源数据成功:', formattedData);
+ console.log('环卫车辆类型数据成功:', formattedData);
setData(formattedData);
},
- onError: (error) => {
- console.error('获取问题来源数据出错:', error);
+ onError: (error: any) => {
+ console.error('获取环卫车辆类型数据出错:', error);
setData([]);
},
- apiName: '问题来源',
+ apiName: '环卫车辆类型',
debounceTime: 300,
- cacheTime: 5000 // 缓存5秒，避免频繁刷新时重复请求
+ cacheTime: 5000, // 缓存5秒，避免频繁刷新时重复请求
+ pageId: pageId, // 传入页面ID用于页面感知
});
// 在地图状态变化时加载数据
@@ -155,14 +168,14 @@ const CarType: React.FC<CarTypeProps> = ({
// 如果没有必要的参数，不发送请求
if (!params) {
- console.log('缺少必要的日期参数，不加载问题来源数据');
+ console.log('缺少必要的日期参数，不加载环卫车辆类型数据');
return;
}
- console.log('加载问题来源数据，参数:', params);
+ // 调用API - 现在usePageAwareApi内部会处理参数比较和页面状态
sourceSystemRankApi.callApi(params);
- }, [mapState.regionCode, mapState.rightPanelTime, buildApiParams, sourceSystemRankApi]);
+ }, [mapState.regionCode, mapState.leftPanelTime, mapState.pageTimeSettings, buildApiParams, sourceSystemRankApi]);
return (
<div className={styles.container}>
diff --git a/src/pages/Home_v_2504/components/SubPages/Environment/components/LeftContent/components/WorkersArea/index.tsx b/src/pages/Home_v_2504/components/SubPages/Environment/components/LeftContent/components/WorkersArea/index.tsx
index 8f089cbf..78238fca 100644
--- a/src/pages/Home_v_2504/components/SubPages/Environment/components/LeftContent/components/WorkersArea/index.tsx
+++ b/src/pages/Home_v_2504/components/SubPages/Environment/components/LeftContent/components/WorkersArea/index.tsx
@@ -5,7 +5,8 @@ import AreaBarList, { AreaBarItem } from '@/components/V2504/AreaBarList'
import ModuleTitleWithTabs from '@/pages/Home_v_2504/components/common/ModuleTitleWithTabs'
import useLatestValue from '@/pages/Home_v_2504/hooks/useLatestValue';
import { useDataType, useMapState } from '@/pages/Home_v_2504/components/MapStateContext';
-import useApiControl, { formatDateTime } from '@/pages/Home_v_2504/hooks/useApiControl';
+import { formatDateTime } from '@/pages/Home_v_2504/hooks/useApiControl';
+import usePageAwareApi from '@/pages/Home_v_2504/hooks/usePageAwareApi';
import { getDistrictHighFrequencyArea } from '@/services/CityProblem';
// 类型定义
@@ -13,6 +14,7 @@ export interface HighFrequencyAreaProps {
dateType?: string;
dateRange?: { startTime: string; endTime: string };
dataTypeKey?: string;
+ pageId?: string;
}
// 区域类型定义
@@ -20,7 +22,8 @@ export type AreaType = 'all' | 'urban' | 'central' | 'county';
const WorkersArea: React.FC<HighFrequencyAreaProps> = ({
dateType,
dateRange,
- dataTypeKey = '环卫事件'
+ dataTypeKey = '环卫事件',
+ pageId = 'environment',
}) => {
// 地图状态
@@ -101,8 +104,17 @@ const WorkersArea: React.FC<HighFrequencyAreaProps> = ({
return null;
}
+ // 获取当前页面的时间设置
+ const pageTimeSettings = currentMapState.pageTimeSettings?.[pageId];
+ if (!pageTimeSettings) {
+ console.log(`缺少${pageId}页面的时间设置，使用全局设置`);
+ }
+
+ // 使用页面级别的时间设置，如果存在的话
+ const leftPanelTime = pageTimeSettings?.leftPanelTime || currentMapState.leftPanelTime;
+
// 使用当前时间类型，如果不存在则使用props或默认值
- const effectiveType = currentMapState.leftPanelTime.type || dateType || 'month';
+ const effectiveType = leftPanelTime.type || dateType || 'month';
// 基础参数对象
const params: any = {
@@ -111,11 +123,11 @@ const WorkersArea: React.FC<HighFrequencyAreaProps> = ({
// 处理日期参数
if (effectiveType === 'range') {
- params.customizeStart = formatDateTime(currentMapState.rightPanelTime.startTime);
- params.customizeEnd = formatDateTime(currentMapState.rightPanelTime.endTime, true);
+ params.customizeStart = formatDateTime(leftPanelTime.startTime);
+ params.customizeEnd = formatDateTime(leftPanelTime.endTime, true);
} else {
// 年、月、日视图使用time参数
- params.time = formatDateTime(currentMapState.rightPanelTime.startTime);
+ params.time = formatDateTime(leftPanelTime.startTime);
}
// 获取区域编码列表
@@ -142,11 +154,11 @@ const WorkersArea: React.FC<HighFrequencyAreaProps> = ({
params.subTypeCode = useDataType(dataTypeKey);
return params;
- }, [mapStateRef, currentTabRef, dateType, translateDateType, dataTypeKey]);
+ }, [mapStateRef, currentTabRef, dateType, translateDateType, dataTypeKey, pageId]);
- // 使用useApiControl管理环卫人员区域API调用
- const highFrequencyApi = useApiControl({
- apiFunction: async (params) => {
+ // 使用usePageAwareApi管理环卫人员区域API调用
+ const highFrequencyApi = usePageAwareApi({
+ apiFunction: async (params: any) => {
console.log('发起环卫人员区域请求，参数:', params);
const response = await getDistrictHighFrequencyArea(params);
@@ -156,7 +168,7 @@ const WorkersArea: React.FC<HighFrequencyAreaProps> = ({
throw new Error('获取环卫人员区域数据失败');
},
- onSuccess: (data) => {
+ onSuccess: (data: any) => {
if (!data || !Array.isArray(data) || data.length === 0) {
setData([]);
return;
@@ -190,31 +202,16 @@ const WorkersArea: React.FC<HighFrequencyAreaProps> = ({
console.log('环卫人员区域数据成功:');
setData(formattedData);
},
- onError: (error) => {
+ onError: (error: any) => {
console.error('获取环卫人员区域数据出错:', error);
setData([]);
},
apiName: '环卫人员区域',
debounceTime: 300,
- cacheTime: 5000 // 缓存5秒，避免频繁刷新时重复请求
+ cacheTime: 5000, // 缓存5秒，避免频繁刷新时重复请求
+ pageId: pageId, // 传入页面ID用于页面感知
});
- // 使用 useMemo 跟踪 rightPanelTime 的实际变化
- const memoizedRightPanelTime = useMemo(() => {
- return {
- type: mapState.rightPanelTime.type,
- startTime: mapState.rightPanelTime.startTime,
- endTime: mapState.rightPanelTime.endTime
- };
- }, [
- mapState.rightPanelTime.type,
- mapState.rightPanelTime.startTime,
- mapState.rightPanelTime.endTime
- ]);
-
- // 跟踪上一次的API参数，避免重复调用
- const prevApiParamsRef = useRef<string>('');
-
// 在地图状态变化和Tab变化时加载数据
useEffect(() => {
const params = buildApiParams();
@@ -225,22 +222,10 @@ const WorkersArea: React.FC<HighFrequencyAreaProps> = ({
return;
}
- // 参数签名，用于比较参数是否有实际变化
- const paramsSignature = JSON.stringify(params);
-
- // 检查参数是否真正变化，防止重复调用
- if (paramsSignature === prevApiParamsRef.current) {
- console.log('环卫人员区域参数未变化，跳过重复加载');
- return;
- }
-
- console.log('加载环卫人员区域数据，参数:', params);
- // highFrequencyApi.callApi(params);
-
- // 更新上一次参数签名
- prevApiParamsRef.current = paramsSignature;
+ // 调用API - 现在usePageAwareApi内部会处理参数比较和页面状态
+ highFrequencyApi.callApi(params);
- }, [mapState.regionCode, memoizedRightPanelTime, currentTab, buildApiParams, highFrequencyApi]);
+ }, [mapState.regionCode, mapState.leftPanelTime, mapState.pageTimeSettings, currentTab, buildApiParams, highFrequencyApi]);
return (
<div className={styles.container}>
diff --git a/src/pages/Home_v_2504/components/SubPages/Environment/components/LeftContent/index.tsx b/src/pages/Home_v_2504/components/SubPages/Environment/components/LeftContent/index.tsx
index cf65401c..cea6ab9c 100644
--- a/src/pages/Home_v_2504/components/SubPages/Environment/components/LeftContent/index.tsx
+++ b/src/pages/Home_v_2504/components/SubPages/Environment/components/LeftContent/index.tsx
@@ -35,13 +35,18 @@ const LeftContent: React.FC = () => {
<div className={styles.content}>
<WorkersGender />
<WorkersType />
- <WorkersArea />
+ <WorkersArea
+ pageId="environment"
+ />
<WorkersAge />
<CarType
+ pageId="environment"
// dataTypeKey="环卫车辆类型"
// isThinLayout={true}
/>
- <CarArea />
+ <CarArea
+ pageId="environment"
+ />
</div>
</div>
);
--
GitLab