From 5a90cf4e2f11dd90c25ccc732002cb7e69fa02e9 Mon Sep 17 00:00:00 2001 From: tangshaojian <63377964@qq.com> Date: Fri, 9 May 2025 11:16:00 +0800 Subject: [PATCH] =?UTF-8?q?tsj:=20=E8=A7=A3=E5=86=B3=E9=9D=9Eactive?= =?UTF-8?q?=E7=9A=84DateSelector=E4=BC=9A=E8=A7=A6=E5=8F=91=E5=9C=B0?= =?UTF-8?q?=E5=9B=BE=E6=9B=B4=E6=96=B0=E7=9A=84=E9=97=AE=E9=A2=98=EF=BC=9A?= =?UTF-8?q?=20DateSelector=E9=87=8C=E9=9D=A2=E5=8E=BB=E6=8E=89setActivePan?= =?UTF-8?q?el=EF=BC=8C=E5=8F=AA=E6=9C=89AreaSelector=E6=95=B0=E6=8D=AE?= =?UTF-8?q?=E6=8C=89=E9=92=AE=E8=83=BD=E5=A4=9F=E6=94=B9=E5=8F=98active?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/V2504/DateSelector/index.tsx | 17 +++++-- src/constants/dataTypes.ts | 3 +- .../MapContainer/AreaSelector/index.tsx | 19 ++++++-- .../DistrictMapCustomized/index.tsx | 12 +++++ .../components/MapStateContext.tsx | 47 +++++++++++++++---- 5 files changed, 79 insertions(+), 19 deletions(-) diff --git a/src/components/V2504/DateSelector/index.tsx b/src/components/V2504/DateSelector/index.tsx index 59f0a2d3..7fbee39c 100644 --- a/src/components/V2504/DateSelector/index.tsx +++ b/src/components/V2504/DateSelector/index.tsx @@ -74,7 +74,13 @@ const DateSelector: React.FC = ({ const currentType = activeTypeRef.current; const currentDates = datesRef.current; - console.log('DateSelector notifyChange', panelType, currentType, currentDates); + console.log('DateSelector notifyChange', { + panelType, + type: currentType, + startTime: currentDates.startTime, + endTime: currentDates.endTime, + instanceId + }); if (onChange) { onChange({ @@ -83,17 +89,18 @@ const DateSelector: React.FC = ({ }); } - // 当面板被点击时，自动设置为激活面板 - setActivePanel(panelType); + // 不再自动设置激活面板，让数据类型决定面板激活状态 + // setActivePanel(panelType); // 使用 MapStateContext 更新时间范围 updateTimeRange( panelType, currentType, currentDates.startTime, - currentDates.endTime + currentDates.endTime, + instanceId // 传递实例ID用于事件识别 ); - }, [panelType, onChange, updateTimeRange, setActivePanel]); + }, [panelType, onChange, updateTimeRange, instanceId]); // 当类型更改时，重置日期并发出通知 const handleTypeChange = useCallback((type: DateType) => { diff --git a/src/constants/dataTypes.ts b/src/constants/dataTypes.ts index 039a2ddc..8eedfb47 100644 --- a/src/constants/dataTypes.ts +++ b/src/constants/dataTypes.ts @@ -42,6 +42,7 @@ export const PANEL_ACTIVATION = { // 哪些数据类型会激活左侧面板 ACTIVATE_LEFT: [ DATA_TYPE.RESTAURANT_OIL.OIL_SMOKE_ALERT, + DATA_TYPE.RESTAURANT_OIL.RESTAURANT_FACILITY, ], // 哪些数据类型会激活右侧面板 @@ -51,7 +52,7 @@ export const PANEL_ACTIVATION = { // 哪些数据类型不改变激活状态 PRESERVE_ACTIVE: [ - DATA_TYPE.RESTAURANT_OIL.RESTAURANT_FACILITY, + // DATA_TYPE.RESTAURANT_OIL.RESTAURANT_FACILITY, // 移除，已添加到ACTIVATE_LEFT ], }; diff --git a/src/pages/Home_v_2504/components/MapContainer/AreaSelector/index.tsx b/src/pages/Home_v_2504/components/MapContainer/AreaSelector/index.tsx index f5dc1292..d2a47751 100644 --- a/src/pages/Home_v_2504/components/MapContainer/AreaSelector/index.tsx +++ b/src/pages/Home_v_2504/components/MapContainer/AreaSelector/index.tsx @@ -402,17 +402,26 @@ const AreaSelector: React.FC = () => { const button = buttonGroupData.level1.find(b => b.key === key); const targetPanel = button?.activatePanel || 'right'; - // 设置激活面板 + console.log(`切换数据类型: ${dataCode}, 激活面板: ${targetPanel}`, { + button, + targetPanel + }); + + // 设置激活面板 - 由数据类型决定面板激活状态 setActivePanel(targetPanel); - // 确保使用正确的时间参数 + // 获取最新的mapState + const currentMapState = mapStateRef.current; + + // 确认面板的时间 const currentTime = targetPanel === 'left' ? - mapStateRef.current.leftPanelTime : - mapStateRef.current.rightPanelTime; + currentMapState.leftPanelTime : + currentMapState.rightPanelTime; console.log(`切换数据类型: ${dataCode}, 使用${targetPanel}面板时间:`, { startTime: currentTime.startTime, - endTime: currentTime.endTime + endTime: currentTime.endTime, + type: currentTime.type }); // 调用更新数据类型，这会同时设置正确的gridType diff --git a/src/pages/Home_v_2504/components/MapContainer/DistrictMapCustomized/index.tsx b/src/pages/Home_v_2504/components/MapContainer/DistrictMapCustomized/index.tsx index f48566f1..59c6baac 100644 --- a/src/pages/Home_v_2504/components/MapContainer/DistrictMapCustomized/index.tsx +++ b/src/pages/Home_v_2504/components/MapContainer/DistrictMapCustomized/index.tsx @@ -610,6 +610,9 @@ const DistrictMapCustomized: React.FC = ({ const handleMapDateChange = (event: CustomEvent) => { console.log('====>地图时间变化', event.detail); + // 获取最新的地图数据类型 + const currentDataCode = dataCodeRef.current; + // 只有当变更的面板是当前激活面板时才更新地图 if (event.detail?.panel === mapState.activePanel && areaMapInstance) { try { @@ -623,6 +626,9 @@ const DistrictMapCustomized: React.FC = ({ } console.log('更新地图时间参数:', { + panel: event.detail.panel, + activePanel: mapState.activePanel, + dataCode: currentDataCode, startTime: areaMapInstance.params.startTime, endTime: areaMapInstance.params.endTime }); @@ -637,6 +643,12 @@ const DistrictMapCustomized: React.FC = ({ } catch (error) { console.error('时间更新失败:', error); } + } else { + console.log('时间变化但不更新地图:', { + changedPanel: event.detail?.panel, + activePanel: mapState.activePanel, + dataCode: currentDataCode + }); } }; diff --git a/src/pages/Home_v_2504/components/MapStateContext.tsx b/src/pages/Home_v_2504/components/MapStateContext.tsx index cbe61aa0..037a6035 100644 --- a/src/pages/Home_v_2504/components/MapStateContext.tsx +++ b/src/pages/Home_v_2504/components/MapStateContext.tsx @@ -62,7 +62,7 @@ interface MapStateContextType { // 更新数据类型 updateDataType: (dataCode: string, withoutMapUpdate?: boolean) => void; // 更新时间范围 - updateTimeRange: (panel: 'left' | 'right', type: string, startTime: string, endTime: string) => void; + updateTimeRange: (panel: 'left' | 'right', type: string, startTime: string, endTime: string, instanceId?: string) => void; // 更新网格类型 updateGridType: (gridType: string) => void; // 重置为页面默认值 @@ -166,7 +166,7 @@ export const MapStateProvider: React.FC<{ children: React.ReactNode }> = ({ chil // 更新时间范围 - 使用防抖确保不会短时间内多次触发 const debouncedUpdateTimeRange = useCallback( - debounce((panel: 'left' | 'right', type: string, startTime: string, endTime: string) => { + debounce((panel: 'left' | 'right', type: string, startTime: string, endTime: string, instanceId?: string) => { // 获取最新状态以避免闭包问题 const currentMapState = mapStateRef.current; @@ -214,6 +214,8 @@ export const MapStateProvider: React.FC<{ children: React.ReactNode }> = ({ chil type, startTime, endTime, + activePanel: currentMapState.activePanel, + dataCode: currentMapState.dataCode, currentType: panel === 'left' ? currentMapState.leftPanelTime.type : currentMapState.rightPanelTime.type }); @@ -242,19 +244,48 @@ export const MapStateProvider: React.FC<{ children: React.ReactNode }> = ({ chil panel, type, startTime: formatDateTime(startTime), - endTime: formatDateTime(endTime, true) + endTime: formatDateTime(endTime, true), + instanceId: instanceId || null, // 包含实例ID以便识别事件来源 + activePanel: currentMapState.activePanel, // 包含当前激活面板信息 + dataCode: currentMapState.dataCode // 包含当前数据类型信息 } }); - console.log('MapStateContext mapDateChangeEvent', mapDateChangeEvent); + console.log('MapStateContext mapDateChangeEvent', mapDateChangeEvent.detail); window.dispatchEvent(mapDateChangeEvent); - // 只有当变更的面板是当前激活面板时才更新地图 - if (panel === currentMapState.activePanel) { + // 检查面板和数据类型的兼容性 + const shouldUpdateMap = () => { + // 获取当前数据类型 + const currentDataCode = currentMapState.dataCode; + + // 判断数据类型与面板的兼容性 + if (panel === 'left') { + // 左侧面板兼容的数据类型 + return PANEL_ACTIVATION.ACTIVATE_LEFT.includes(currentDataCode); + } else { + // 右侧面板兼容的数据类型 + return PANEL_ACTIVATION.ACTIVATE_RIGHT.includes(currentDataCode); + } + }; + + // 只有当面板与当前数据类型兼容时才更新地图 + if (panel === currentMapState.activePanel && shouldUpdateMap()) { + console.log('面板变更与数据类型兼容，更新地图:', { + panel, + dataCode: currentMapState.dataCode + }); + setTimeout(() => { updateMapDisplay(); isUpdatingRef.current = false; }, 50); } else { + console.log('时间变化但不触发地图更新:', { + reason: panel !== currentMapState.activePanel ? '非活动面板' : '面板与数据类型不兼容', + changedPanel: panel, + activePanel: currentMapState.activePanel, + dataCode: currentMapState.dataCode + }); isUpdatingRef.current = false; } }, 300), @@ -519,8 +550,8 @@ export const MapStateProvider: React.FC<{ children: React.ReactNode }> = ({ chil }, []); // 更新时间范围 - const updateTimeRange = useCallback((panel: 'left' | 'right', type: string, startTime: string, endTime: string) => { - debouncedUpdateTimeRange(panel, type, startTime, endTime); + const updateTimeRange = useCallback((panel: 'left' | 'right', type: string, startTime: string, endTime: string, instanceId?: string) => { + debouncedUpdateTimeRange(panel, type, startTime, endTime, instanceId); }, [debouncedUpdateTimeRange]); // 更新网格类型 -- GitLab