From e53e7a9305bf846388d1703d6b83d49b6f7ab014 Mon Sep 17 00:00:00 2001 From: tangshaojian <63377964@qq.com> Date: Tue, 29 Apr 2025 15:29:37 +0800 Subject: [PATCH] =?UTF-8?q?tsj:=20=E8=B0=83=E6=95=B4=E9=A4=90=E9=A5=AE?= =?UTF-8?q?=E6=B2=B9=E7=83=9F=E5=8F=B3=E4=BE=A7=E7=9A=84=E5=85=A5=E5=8F=82?= =?UTF-8?q?=EF=BC=88=E6=88=90=E9=83=BD=E5=B0=B1=E4=B8=8D=E4=BC=A0=EF=BC=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/CompletionRate/index.tsx | 87 +++++++----- .../components/HighFrequency/index.tsx | 10 +- .../components/HighFrequencyArea/index.tsx | 132 +++++++++++------- .../components/ProblemTrend/index.tsx | 10 +- .../components/SourceSection/index.tsx | 10 +- .../components/StatisticsCards/index.tsx | 10 +- 6 files changed, 168 insertions(+), 91 deletions(-) diff --git a/src/pages/Home_v_2504/components/SubPages/RestaurantOil/components/RightContent/components/CompletionRate/index.tsx b/src/pages/Home_v_2504/components/SubPages/RestaurantOil/components/RightContent/components/CompletionRate/index.tsx index 2be8d141..22c3fd78 100644 --- a/src/pages/Home_v_2504/components/SubPages/RestaurantOil/components/RightContent/components/CompletionRate/index.tsx +++ b/src/pages/Home_v_2504/components/SubPages/RestaurantOil/components/RightContent/components/CompletionRate/index.tsx @@ -12,6 +12,9 @@ export interface CompletionRateProps { dateRange?: { startTime: string; endTime: string }; } +// 区域类型定义 +export type AreaType = 'all' | 'urban' | 'central' | 'county'; + // 区域级别定义 export enum RegionLevelEnum { CITY = '1', // 市级 @@ -44,31 +47,33 @@ const formatTimeParam = (dateStr: string) => { return ''; }; -// 参考LeftContent中的getRegionCodes函数，提取区域编码列表 -const getRegionCodes = (regionCode: string, regionLevel: string) => { - // 如果没有regionCode或者regionLevel，返回空数组 - if (!regionCode || !regionLevel) { - return []; +// 区域编码生成函数，参考LeftContent中的getRegionCodes实现 +const getRegionCodes = (areaType: AreaType, regionCode: string) => { + // 默认所有区域 + if (areaType === 'all') { + return regionCode.length > 4 + ? regionCode + : regionCode === '5101' + ? '510104,510105,510106,510107,510108,510112,510113,510114,510115,510116,510117,510121,510129,510131,510132,510181,510182,510183,510184,510185' + : ''; } - // 根据区域级别和区域编码生成districtCodeList - if (regionLevel === RegionLevelEnum.DISTRICT) { - if (regionCode.length === 6) { - // 如果当前是区县级别，返回当前区县 - return [regionCode]; - } - return []; - } else if (regionLevel === RegionLevelEnum.STREET) { - if (regionCode.length === 9) { - // 如果当前是街道级别，返回街道所属的区县 - return [regionCode.substring(0, 6)]; - } else if (regionCode.length === 6) { - // 如果当前是区县级别，返回该区县下的所有街道的区县 - return [regionCode]; - } + // 城市新区 + if (areaType === 'urban') { + return '510112,510113,510114,510115,510116,510117'; + } + + // 中心城区 + if (areaType === 'central') { + return '510104,510105,510106,510107,510108'; } - return []; + // 县市新城 + if (areaType === 'county') { + return '510121,510129,510131,510132,510181,510182,510183,510184,510185'; + } + + return ''; }; const CompletionRate: React.FC = ({ dateType, dateRange }) => { @@ -78,8 +83,8 @@ const CompletionRate: React.FC = ({ dateType, dateRange }) // 记录上一次请求的参数，避免重复请求 const lastRequestRef = useRef(''); - // 当前选中的区域级别 - const [currentTab, setCurrentTab] = useState(RegionLevelEnum.DISTRICT); + // 当前选中的区域类型 + const [currentTab, setCurrentTab] = useState('all'); // 图表数据 const [data, setData] = useState<{ name: string; percentage: number }[]>([]); @@ -97,7 +102,7 @@ const CompletionRate: React.FC = ({ dateType, dateRange }) // 处理Tab切换 const handleTabChange = (tab: string) => { - setCurrentTab(tab); + setCurrentTab(tab as AreaType); }; // 使用useApiControl管理区县办结率API调用 @@ -153,8 +158,7 @@ const CompletionRate: React.FC = ({ dateType, dateRange }) // 准备API请求参数 const params: any = { - type: translateDateType(effectiveType), - level: currentTab + type: translateDateType(effectiveType) }; // 处理日期参数 - 优先使用MapState中的时间 @@ -166,10 +170,24 @@ const CompletionRate: React.FC = ({ dateType, dateRange }) params.time = formatTimeParam(mapState.rightPanelTime.startTime); } - // 创建区域编码列表 - const regionCodes = getRegionCodes(mapState.regionCode, currentTab); - if (regionCodes && regionCodes.length > 0) { - params.districtCodeList = regionCodes; + // 获取区域编码列表 + const districtCodeList = getRegionCodes(currentTab, mapState.regionCode); + if (districtCodeList) { + params.districtCodeList = districtCodeList; + } + + // 处理区域参数 + if (mapState.regionCode === '5101') { + // 成都，这两个参数就不传 + params.districtCode = undefined; + params.streetCode = undefined; + } else if (mapState.regionCode.length === 6) { + // 区县级别 + params.districtCode = mapState.regionCode; + } else if (mapState.regionCode.length === 9) { + // 街道级别 + params.districtCode = mapState.regionCode.substring(0, 6); + params.streetCode = mapState.regionCode; } // 餐饮油烟事件的subTypeCode为20101 @@ -216,8 +234,13 @@ const CompletionRate: React.FC = ({ dateType, dateRange }) return (
diff --git a/src/pages/Home_v_2504/components/SubPages/RestaurantOil/components/RightContent/components/HighFrequency/index.tsx b/src/pages/Home_v_2504/components/SubPages/RestaurantOil/components/RightContent/components/HighFrequency/index.tsx index c768ae3d..94093f1d 100644 --- a/src/pages/Home_v_2504/components/SubPages/RestaurantOil/components/RightContent/components/HighFrequency/index.tsx +++ b/src/pages/Home_v_2504/components/SubPages/RestaurantOil/components/RightContent/components/HighFrequency/index.tsx @@ -116,12 +116,16 @@ const HighFrequency: React.FC = ({ } // 处理区域参数 - if (mapState.regionCode.length === 4) { + if (mapState.regionCode === '5101') { + // 成都，这两个参数就不传 + params.districtCode = undefined; + params.streetCode = undefined; + } else if (mapState.regionCode.length === 6) { // 区县级别 params.districtCode = mapState.regionCode; - } else if (mapState.regionCode.length === 6) { + } else if (mapState.regionCode.length === 9) { // 街道级别 - params.districtCode = mapState.regionCode.substring(0, 3); + params.districtCode = mapState.regionCode.substring(0, 6); params.streetCode = mapState.regionCode; } diff --git a/src/pages/Home_v_2504/components/SubPages/RestaurantOil/components/RightContent/components/HighFrequencyArea/index.tsx b/src/pages/Home_v_2504/components/SubPages/RestaurantOil/components/RightContent/components/HighFrequencyArea/index.tsx index 2662e6a9..41d3cc17 100644 --- a/src/pages/Home_v_2504/components/SubPages/RestaurantOil/components/RightContent/components/HighFrequencyArea/index.tsx +++ b/src/pages/Home_v_2504/components/SubPages/RestaurantOil/components/RightContent/components/HighFrequencyArea/index.tsx @@ -7,13 +7,22 @@ import { getDistrictHighFrequencyArea } from '@/services/CityProblem'; import useApiControl from '@/hooks/useApiControl'; // 类型定义 -type AreaType = 'all' | 'urban' | 'central' | 'county'; - -interface HighFrequencyAreaProps { +export interface HighFrequencyAreaProps { dateType?: string; dateRange?: { startTime: string; endTime: string }; } +// 区域类型定义 +export type AreaType = 'all' | 'urban' | 'central' | 'county'; + +// 区域级别定义 +export enum RegionLevelEnum { + CITY = '1', // 市级 + DISTRICT = '2', // 区县级 + STREET = '3', // 街道级 + GRID = '4', // 网格级 +} + // 手动格式化日期时间函数，专用于接口 const formatTimeParam = (dateStr: string) => { if (!dateStr) return ''; @@ -32,6 +41,35 @@ const formatTimeParam = (dateStr: string) => { return ''; }; +// 区域编码生成函数，参考LeftContent中的getRegionCodes实现 +const getRegionCodes = (areaType: AreaType, regionCode: string) => { + // 默认所有区域 + if (areaType === 'all') { + return regionCode.length > 4 + ? regionCode + : regionCode === '5101' + ? '510104,510105,510106,510107,510108,510112,510113,510114,510115,510116,510117,510121,510129,510131,510132,510181,510182,510183,510184,510185' + : ''; + } + + // 城市新区 + if (areaType === 'urban') { + return '510112,510113,510114,510115,510116,510117'; + } + + // 中心城区 + if (areaType === 'central') { + return '510104,510105,510106,510107,510108'; + } + + // 县市新城 + if (areaType === 'county') { + return '510121,510129,510131,510132,510181,510182,510183,510184,510185'; + } + + return ''; +}; + const HighFrequencyArea: React.FC = ({ dateType, dateRange @@ -39,12 +77,15 @@ const HighFrequencyArea: React.FC = ({ // 地图状态 const { mapState } = useMapState(); - const [activeAreaType, setActiveAreaType] = useState('all'); - const [data, setData] = useState([]); - // 记录上一次请求的参数，避免重复请求 const lastRequestRef = useRef(''); + // 当前选中的区域类型 + const [currentTab, setCurrentTab] = useState('all'); + + // 高频区域数据 + const [data, setData] = useState([]); + // 转换日期类型为API参数 const translateDateType = useCallback((type: string) => { switch (type) { @@ -56,41 +97,34 @@ const HighFrequencyArea: React.FC = ({ } }, []); - // 区域类型映射到API参数 - const translateAreaType = useCallback((areaType: AreaType) => { - switch (areaType) { - case 'urban': return '1'; // 城市新区 - case 'central': return '2'; // 中心城区 - case 'county': return '3'; // 县市新城 - case 'all': - default: - return ''; // 全部 - } - }, []); + // 处理Tab切换 + const handleTabChange = (tab: string) => { + setCurrentTab(tab as AreaType); + }; - // 使用useApiControl管理高发区域API调用 - const highFrequencyAreaApi = useApiControl({ + // 使用useApiControl管理高频区域API调用 + const highFrequencyApi = useApiControl({ apiFunction: async (params) => { // 手动构建一个请求签名，用于防止重复请求 const requestSignature = JSON.stringify(params); // 如果与上次请求相同，直接返回空结果防止重复调用 if (requestSignature === lastRequestRef.current) { - console.log('高发区域参数未变化，跳过重复请求'); + console.log('高频区域参数未变化，跳过重复请求'); return []; } // 记录本次请求签名 lastRequestRef.current = requestSignature; - console.log('发起高发区域请求，参数:', params); + 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) => { if (!data || !Array.isArray(data) || data.length === 0) { @@ -105,32 +139,26 @@ const HighFrequencyArea: React.FC = ({ count: parseInt(item.count) || 0 })); - console.log('高发区域数据成功:', formattedData); + console.log('高频区域数据成功:', formattedData); setData(formattedData); }, onError: (error) => { - console.error('获取高发区域数据出错:', error); + console.error('获取高频区域数据出错:', error); setData([]); }, - apiName: '高发区域' + apiName: '高频区域' }); - // 加载高发区域数据 - const loadHighFrequencyAreaData = useCallback(() => { + // 加载高频区域数据 + const loadHighFrequencyData = useCallback(() => { // 优先使用MapState中的数据类型，如果不存在则使用props传入的，如果都不存在则默认为month const effectiveType = mapState.rightPanelTime.type || dateType || 'month'; - // 处理区县级别和街道级别的不同参数 + // 准备API请求参数 const params: any = { type: translateDateType(effectiveType) }; - // 添加区域类型参数 - const areaTypeParam = translateAreaType(activeAreaType); - if (areaTypeParam) { - params.areaType = areaTypeParam; - } - // 处理日期参数 - 优先使用MapState中的时间 if (effectiveType === 'range') { params.customizeStart = formatTimeParam(mapState.rightPanelTime.startTime); @@ -140,24 +168,34 @@ const HighFrequencyArea: React.FC = ({ params.time = formatTimeParam(mapState.rightPanelTime.startTime); } + // 获取区域编码列表 + const districtCodeList = getRegionCodes(currentTab, mapState.regionCode); + if (districtCodeList) { + params.districtCodeList = districtCodeList; + } + // 处理区域参数 - if (mapState.regionCode.length === 4) { + if (mapState.regionCode === '5101') { + // 成都，这两个参数就不传 + params.districtCode = undefined; + params.streetCode = undefined; + } else if (mapState.regionCode.length === 6) { // 区县级别 params.districtCode = mapState.regionCode; - } else if (mapState.regionCode.length === 6) { + } else if (mapState.regionCode.length === 9) { // 街道级别 - params.districtCode = mapState.regionCode.substring(0, 3); + params.districtCode = mapState.regionCode.substring(0, 6); params.streetCode = mapState.regionCode; } // 餐饮油烟事件的subTypeCode为20101 params.subTypeCode = useDataType('餐饮油烟事件'); - console.log('高发区域数据请求参数:', params); + console.log('高频区域数据请求参数:', params); // 调用API - highFrequencyAreaApi.callApiImmediate(params); - }, [highFrequencyAreaApi, translateDateType, translateAreaType, activeAreaType, mapState.rightPanelTime, mapState.regionCode, dateType]); + highFrequencyApi.callApiImmediate(params); + }, [highFrequencyApi, translateDateType, mapState.rightPanelTime, mapState.regionCode, currentTab, dateType]); // 防止频繁重复加载 const loadTimerRef = useRef(null); @@ -166,7 +204,7 @@ const HighFrequencyArea: React.FC = ({ useEffect(() => { // 如果没有地图状态的时间数据，无法加载 if (!mapState.rightPanelTime || !mapState.rightPanelTime.startTime || !mapState.rightPanelTime.endTime) { - console.log('缺少必要的日期参数，暂不加载高发区域数据'); + console.log('缺少必要的日期参数，暂不加载高频区域数据'); return; } @@ -177,8 +215,8 @@ const HighFrequencyArea: React.FC = ({ // 设置新的定时器，避免频繁调用 loadTimerRef.current = setTimeout(() => { - console.log('地图状态或Tab变化，加载高发区域数据'); - loadHighFrequencyAreaData(); + console.log('地图状态或Tab变化，加载高频区域数据'); + loadHighFrequencyData(); loadTimerRef.current = null; }, 50); @@ -189,20 +227,20 @@ const HighFrequencyArea: React.FC = ({ loadTimerRef.current = null; } }; - }, [mapState.regionCode, mapState.rightPanelTime, activeAreaType, loadHighFrequencyAreaData]); + }, [mapState.regionCode, mapState.rightPanelTime, currentTab, loadHighFrequencyData]); return (
setActiveAreaType(key as AreaType)} + activeKey={currentTab} + onTabChange={handleTabChange} />
= ({ dateType, dateRange }) => { } // 处理区域参数 - if (mapState.regionCode.length === 4) { + if (mapState.regionCode === '5101') { + // 成都，这两个参数就不传 + params.districtCode = undefined; + params.streetCode = undefined; + } else if (mapState.regionCode.length === 6) { // 区县级别 params.districtCode = mapState.regionCode; - } else if (mapState.regionCode.length === 6) { + } else if (mapState.regionCode.length === 9) { // 街道级别 - params.districtCode = mapState.regionCode.substring(0, 3); + params.districtCode = mapState.regionCode.substring(0, 6); params.streetCode = mapState.regionCode; } diff --git a/src/pages/Home_v_2504/components/SubPages/RestaurantOil/components/RightContent/components/SourceSection/index.tsx b/src/pages/Home_v_2504/components/SubPages/RestaurantOil/components/RightContent/components/SourceSection/index.tsx index 68f980b2..bd58a9af 100644 --- a/src/pages/Home_v_2504/components/SubPages/RestaurantOil/components/RightContent/components/SourceSection/index.tsx +++ b/src/pages/Home_v_2504/components/SubPages/RestaurantOil/components/RightContent/components/SourceSection/index.tsx @@ -123,12 +123,16 @@ const SourceSection: React.FC = ({ } // 处理区域参数 - if (mapState.regionCode.length === 4) { + if (mapState.regionCode === '5101') { + // 成都，这两个参数就不传 + params.districtCode = undefined; + params.streetCode = undefined; + } else if (mapState.regionCode.length === 6) { // 区县级别 params.districtCode = mapState.regionCode; - } else if (mapState.regionCode.length === 6) { + } else if (mapState.regionCode.length === 9) { // 街道级别 - params.districtCode = mapState.regionCode.substring(0, 3); + params.districtCode = mapState.regionCode.substring(0, 6); params.streetCode = mapState.regionCode; } diff --git a/src/pages/Home_v_2504/components/SubPages/RestaurantOil/components/RightContent/components/StatisticsCards/index.tsx b/src/pages/Home_v_2504/components/SubPages/RestaurantOil/components/RightContent/components/StatisticsCards/index.tsx index b5f60317..092c2d30 100644 --- a/src/pages/Home_v_2504/components/SubPages/RestaurantOil/components/RightContent/components/StatisticsCards/index.tsx +++ b/src/pages/Home_v_2504/components/SubPages/RestaurantOil/components/RightContent/components/StatisticsCards/index.tsx @@ -135,12 +135,16 @@ const StatisticsCards: React.FC = ({ dateType, dateRange } } // 处理区域参数 - if (mapState.regionCode.length === 4) { + if (mapState.regionCode === '5101') { + // 成都，这两个参数就不传 + params.districtCode = undefined; + params.streetCode = undefined; + } else if (mapState.regionCode.length === 6) { // 区县级别 params.districtCode = mapState.regionCode; - } else if (mapState.regionCode.length === 6) { + } else if (mapState.regionCode.length === 9) { // 街道级别 - params.districtCode = mapState.regionCode.substring(0, 3); + params.districtCode = mapState.regionCode.substring(0, 6); params.streetCode = mapState.regionCode; } -- GitLab