From 436eddcc94c9d168ea1ea3d60cbfce28266f06fe Mon Sep 17 00:00:00 2001 From: tangshaojian <63377964@qq.com> Date: Thu, 29 May 2025 14:29:00 +0800 Subject: [PATCH] =?UTF-8?q?tsj=EF=BC=9A1=E3=80=81=E5=AF=B9=E6=8E=A5=20?= =?UTF-8?q?=E6=97=A5=E5=B8=B8=E5=B7=A1=E6=9F=A5-=E5=8F=B3=E4=BE=A7?= =?UTF-8?q?=E9=A1=B5=E9=9D=A2=EF=BC=8C=E5=85=B6=E4=B8=AD=20=E4=B8=AD?= =?UTF-8?q?=E9=98=9F=E5=B7=A1=E6=9F=A5=E3=80=81=E5=8C=BA=E5=9F=9F=E5=B7=A1?= =?UTF-8?q?=E6=9F=A5=20=E7=9A=84=E5=85=A8=E9=83=A8-=E4=B8=AD=E5=BF=83?= =?UTF-8?q?=E5=9F=8E=E5=8C=BA...=E7=AD=9B=E9=80=89=E6=98=AF=E6=9C=AC?= =?UTF-8?q?=E5=9C=B0=E7=9A=84=E3=80=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/V2504/AreaBarList/index.less | 2 +- .../CaseHandlingQuantity/index.tsx | 2 +- .../RightContent/AreaPatrol/index.tsx | 187 ++++++------ .../HighFrequencyPeriod/index.tsx | 82 ++---- .../RightContent/HighFrequencyType/index.tsx | 106 ++++--- .../RightContent/IssueTrend/index.tsx | 277 +++++++++--------- .../RightContent/SquadPatrol/index.tsx | 180 +++++------- .../RightContent/WorkStar/index.less | 8 +- .../RightContent/WorkStar/index.tsx | 275 +++++++++++++---- src/pages/Home_v_2504/config/commonUtils.ts | 14 +- 10 files changed, 625 insertions(+), 508 deletions(-) diff --git a/src/components/V2504/AreaBarList/index.less b/src/components/V2504/AreaBarList/index.less index 6af8e444..a0dafcd2 100644 --- a/src/components/V2504/AreaBarList/index.less +++ b/src/components/V2504/AreaBarList/index.less @@ -46,7 +46,7 @@ font-weight: 400; line-height: 24px; margin-left: 4.5px; - max-width: 70%; + max-width: 50%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; diff --git a/src/pages/Home_v_2504/components/SubPages/LawEnforcementCoordination/components/RightContent/CaseHandlingQuantity/index.tsx b/src/pages/Home_v_2504/components/SubPages/LawEnforcementCoordination/components/RightContent/CaseHandlingQuantity/index.tsx index b9ce9aea..b9aec9d9 100644 --- a/src/pages/Home_v_2504/components/SubPages/LawEnforcementCoordination/components/RightContent/CaseHandlingQuantity/index.tsx +++ b/src/pages/Home_v_2504/components/SubPages/LawEnforcementCoordination/components/RightContent/CaseHandlingQuantity/index.tsx @@ -163,7 +163,7 @@ const CaseHandlingQuantity: React.FC = ({ } // 根据当前Tab过滤数据 - 参考NumTop5组件的逻辑 - let filteredRecords = filterCountyDataLocallyByName(rawData, currentTab, true); + let filteredRecords = filterCountyDataLocallyByName(rawData, currentTab, 'title'); // let filteredRecords = rawData; diff --git a/src/pages/Home_v_2504/components/SubPages/LawEnforcementPatrol/components/RightContent/AreaPatrol/index.tsx b/src/pages/Home_v_2504/components/SubPages/LawEnforcementPatrol/components/RightContent/AreaPatrol/index.tsx index 8978300f..fbbe300c 100644 --- a/src/pages/Home_v_2504/components/SubPages/LawEnforcementPatrol/components/RightContent/AreaPatrol/index.tsx +++ b/src/pages/Home_v_2504/components/SubPages/LawEnforcementPatrol/components/RightContent/AreaPatrol/index.tsx @@ -3,11 +3,12 @@ import ModuleTitleWithTabs from '@/pages/Home_v_2504/components/common/ModuleTit import AreaBarList, { AreaBarItem } from '@/components/V2504/AreaBarList'; import styles from './index.less'; import { useDataType, useMapState } from '@/pages/Home_v_2504/components/MapStateContext'; -import { getDistrictHighFrequencyArea } from '@/services/CityProblem'; import { formatDateTime } from '@/pages/Home_v_2504/hooks/useApiControl'; import useLatestValue from '@/pages/Home_v_2504/hooks/useLatestValue'; import usePageAwareApi from '@/pages/Home_v_2504/hooks/usePageAwareApi'; import { INDUSTRY_PAGE_IDS } from '@/constants/dataTypes'; +import services from '@/services'; +import { filterCountyDataLocallyByName } from '@/pages/Home_v_2504/config/commonUtils'; // 类型定义 export interface AreaPatrolProps { @@ -21,47 +22,9 @@ export interface AreaPatrolProps { // 区域类型定义 export type AreaType = 'all' | 'urban' | 'central' | 'county'; -// 区域级别定义 -export enum RegionLevelEnum { - CITY = '1', // 市级 - DISTRICT = '2', // 区县级 - STREET = '3', // 街道级 - GRID = '4', // 网格级 -} - -// 区域编码生成函数 -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 AreaPatrol: React.FC = ({ dateType, dateRange, - isThinLayout = false, dataTypeKey = '日常巡查', pageId = INDUSTRY_PAGE_IDS.LAW_ENFORCEMENT_PATROL, }) => { @@ -73,60 +36,67 @@ const AreaPatrol: React.FC = ({ const [currentTab, setCurrentTab] = useState('all'); const currentTabRef = useLatestValue(currentTab); - // 区域巡查数据 + // 区域巡查原始数据 + const [rawData, setRawData] = useState([]); + // 区域巡查显示数据（经过过滤的） const [data, setData] = useState([]); - - // 转换日期类型为API参数 - const translateDateType = useCallback((type: string) => { - switch (type) { - case 'year': return '1'; - case 'month': return '2'; - case 'day': return '3'; - case 'range': return '4'; - default: return '2'; // 默认月视图 - } - }, []); + // 总数（用于计算百分比） + const [total, setTotal] = useState(0); // 处理Tab切换 const handleTabChange = (tab: string) => { setCurrentTab(tab as AreaType); }; - // 使用usePageAwareApi管理区域巡查API调用 - const highFrequencyApi = usePageAwareApi({ + // 使用usePageAwareApi管理区域巡查API调用（合并总数和具体数据获取） + const areaPatrolApi = usePageAwareApi({ apiFunction: async (params) => { console.log('发起区域巡查请求，参数:', params); - const response = await getDistrictHighFrequencyArea(params); + + // 先获取总数用于计算百分比 + const totalResponse = await services.DataBase.getSjdzInfoData({ + typeCode: 'zzcc-xzcf-sjzs', + params: params + }); + + const totalCount = totalResponse?.data?.data?.records?.[0]?.num || 1; + + // 再获取区域巡查数据 + const response = await services.DataBase.getSjdzInfoData({ + typeCode: 'zzcc-rcxc-qyfztj', + params: params + }); if (response.code === 200 && response.data) { - return response.data; + return { + areaData: response.data, + total: totalCount + }; } throw new Error('获取区域巡查数据失败'); }, - onSuccess: (data) => { - if (!data || !Array.isArray(data) || data.length === 0) { + onSuccess: (result) => { + console.log('区域巡查数据成功:', result); + + const { areaData, total: totalCount } = result; + + if (!areaData || !areaData.data || !areaData.data.records || areaData.data.records.length === 0) { + setRawData([]); setData([]); + setTotal(0); return; } - let isUsingMock = true; - const defaultPercentage = isUsingMock ? 99 : 0; - const defaultValue = isUsingMock ? 200 : 0; - - // 转换接口返回的数据格式为图表需要的格式 - const formattedData = data.map((item: any) => ({ - name: item.name, - percentage: parseFloat(item.percent) || defaultPercentage, - count: parseInt(item.value) || defaultValue - })); - - console.log('区域巡查数据成功:'); - setData(formattedData); + // 保存原始数据和总数 + setRawData(areaData.data.records); + setTotal(totalCount); }, onError: (error) => { console.error('获取区域巡查数据出错:', error); + setRawData([]); setData([]); + setTotal(0); }, apiName: '区域巡查', debounceTime: 300, @@ -156,47 +126,55 @@ const AreaPatrol: React.FC = ({ // 使用当前时间类型，如果不存在则使用props或默认值 const effectiveType = rightPanelTime.type || dateType || 'month'; - // 基础参数对象 + // 将range转换为section，与旧版DyaPatrol保持一致 + const keyParam = effectiveType === 'range' ? 'section' : effectiveType; + + // 基础参数对象 - 参考DyaPatrol的searchTime格式 const params: any = { - type: translateDateType(effectiveType) + key: keyParam, + startTime: rightPanelTime.startTime.split(' ')[0], // 只取日期部分 + endTime: rightPanelTime.endTime.split(' ')[0] }; - // 处理日期参数 - if (effectiveType === 'range') { - params.customizeStart = formatDateTime(rightPanelTime.startTime); - params.customizeEnd = formatDateTime(rightPanelTime.endTime, true); - } else { - // 年、月、日视图使用time参数 - params.time = formatDateTime(rightPanelTime.startTime); - } - - // 获取区域编码列表 - const districtCodeList = getRegionCodes(currentTabRef.current, highFrequencyApi.regionCode); - if (districtCodeList) { - params.districtCodeList = districtCodeList; - } - // 处理区域参数 - if (highFrequencyApi.regionCode === '5101') { + if (areaPatrolApi.regionCode === '5101') { // 成都，这两个参数就不传 - params.districtCode = undefined; - params.streetCode = undefined; - } else if (highFrequencyApi.regionCode.length === 6) { + } else if (areaPatrolApi.regionCode.length === 6) { // 区县级别 - params.districtCode = highFrequencyApi.regionCode; - } else if (highFrequencyApi.regionCode.length === 9) { + params.districtCode = areaPatrolApi.regionCode; + } else if (areaPatrolApi.regionCode.length === 9) { // 街道级别 - params.districtCode = highFrequencyApi.regionCode.substring(0, 6); - params.streetCode = highFrequencyApi.regionCode; + params.districtCode = areaPatrolApi.regionCode.substring(0, 6); + params.streetCode = areaPatrolApi.regionCode; } - // 使用传入的dataTypeKey获取对应的subTypeCode - params.subTypeCode = useDataType(dataTypeKey); - return params; - }, [mapStateRef, currentTabRef, dateType, translateDateType, dataTypeKey, pageId, highFrequencyApi.regionCode]); + }, [mapStateRef, dateType, pageId, areaPatrolApi.regionCode]); + + // 根据Tab过滤数据 - 参考CaseHandlingQuantity组件的实现 + useEffect(() => { + if (!rawData || rawData.length === 0) { + setData([]); + return; + } + + // 根据当前Tab过滤数据 - 使用filterCountyDataLocallyByName函数 + let filteredRecords = filterCountyDataLocallyByName(rawData, currentTab, 'ssqy'); + + // 取前5条并转换格式 -- 取全部... + const formattedData = filteredRecords.map((item: any) => ({ + // const formattedData = filteredRecords.slice(0, 5).map((item: any) => ({ + name: item?.ssqy || '未知区域', + percentage: total > 0 ? parseFloat(((item?.num / total) * 100).toFixed(2)) : 0, + count: parseInt(item?.num) || 0 + })); + + console.log(`区域巡查${currentTab}过滤后数据:`, formattedData, rawData); + + setData(formattedData); + }, [rawData, currentTab, total]); - // 在地图状态变化和Tab变化时加载数据 + // 在地图状态变化时加载数据（不包括Tab变化） useEffect(() => { const params = buildApiParams(); @@ -207,9 +185,10 @@ const AreaPatrol: React.FC = ({ } // 调用API - 现在usePageAwareApi内部会处理参数比较和页面状态 - highFrequencyApi.callApi(params); + console.log(`加载${pageId}页面区域巡查数据，参数:`, params); + areaPatrolApi.callApi(params); - }, [currentTab, buildApiParams, highFrequencyApi]); + }, [buildApiParams, areaPatrolApi]); return (
@@ -229,8 +208,8 @@ const AreaPatrol: React.FC = ({
diff --git a/src/pages/Home_v_2504/components/SubPages/LawEnforcementPatrol/components/RightContent/HighFrequencyPeriod/index.tsx b/src/pages/Home_v_2504/components/SubPages/LawEnforcementPatrol/components/RightContent/HighFrequencyPeriod/index.tsx index f5d3b912..4911f8e3 100644 --- a/src/pages/Home_v_2504/components/SubPages/LawEnforcementPatrol/components/RightContent/HighFrequencyPeriod/index.tsx +++ b/src/pages/Home_v_2504/components/SubPages/LawEnforcementPatrol/components/RightContent/HighFrequencyPeriod/index.tsx @@ -4,11 +4,11 @@ import SmoothLineChart from '@/components/V2504/SmoothLineChart'; import styles from './index.less'; import { useDataType, useMapState } from '@/pages/Home_v_2504/components/MapStateContext'; import services from '@/services'; -import { getHighIncidenceTime } from '@/services/CityProblem'; import { formatDateTime } from '@/pages/Home_v_2504/hooks/useApiControl'; import useLatestValue from '@/pages/Home_v_2504/hooks/useLatestValue'; import usePageAwareApi from '@/pages/Home_v_2504/hooks/usePageAwareApi'; import { INDUSTRY_PAGE_IDS } from '@/constants/dataTypes'; +import { translateTrendTime } from '@/pages/Home_v_2504/config/commonUtils'; interface HighFrequencyPeriodProps { dateType?: string; @@ -34,42 +34,15 @@ const HighFrequencyPeriod: React.FC = ({ // 数据状态 const [data, setData] = useState<{ time: string; value: number }[]>([]); - - // 转换日期类型为API参数 - const translateDateType = useCallback((type: string) => { - switch (type) { - case 'year': return '1'; - case 'month': return '2'; - case 'day': return '3'; - case 'range': return '4'; - default: return '2'; // 默认月视图 - } - }, []); - - // 参数格式化函数 - 将组件格式的参数转换为API需要的格式 - const formatApiParams = useCallback((params: any) => { - const formattedParams = { ...params }; - - // 确保时间字段包含完整的时间部分 - if (formattedParams.time) { - formattedParams.time = formatDateTime(formattedParams.time); - } - - if (formattedParams.customizeStart) { - formattedParams.customizeStart = formatDateTime(formattedParams.customizeStart); - } - - if (formattedParams.customizeEnd) { - formattedParams.customizeEnd = formatDateTime(formattedParams.customizeEnd, true); - } - - return formattedParams; - }, []); // 使用usePageAwareApi管理高发时段API调用 const highIncidenceTimeApi = usePageAwareApi({ apiFunction: async (params: any) => { - const response = await getHighIncidenceTime(params); + console.log('发起高发时段请求，参数:', params); + const response = await services.DataBase.getSjdzInfoData({ + typeCode: 'zzcc-rcxc-xssllb', + params: params + }); if (response.code === 200 && response.data) { return response.data; @@ -78,13 +51,20 @@ const HighFrequencyPeriod: React.FC = ({ throw new Error('获取高发时段数据失败'); }, onSuccess: (data: any) => { - // 转换接口返回的数据格式为图表需要的格式 - const formattedData = data.map((item: any) => ({ - time: `${item.name.padStart(2, '0')}:${item.name === '23' ? '59:59' : '00:00'}`, - value: parseInt(item.value) || 0 + console.log('高发时段数据成功:', data); + + if (!data || !data.data || !data.data.records || data.data.records.length === 0) { + setData([]); + return; + } + + // 转换接口返回的数据格式为图表需要的格式 - 参考DyaPatrol的timeData处理 + const formattedData = data.data.records.map((item: any) => ({ + time: `${translateTrendTime(item?.sj)}`, + // time: `${item?.sj}时`, + value: parseInt(item?.num) || 0 })); - console.log('高发时段数据成功:'); setData(formattedData); }, onError: (error: any) => { @@ -92,7 +72,6 @@ const HighFrequencyPeriod: React.FC = ({ // 出错时使用空数据 setData([]); }, - formatParams: formatApiParams, apiName: '高发时段', debounceTime: 300, cacheTime: 5000, // 缓存5秒，避免频繁刷新时重复请求 @@ -101,7 +80,7 @@ const HighFrequencyPeriod: React.FC = ({ panelType: 'right', // 指定为右侧面板 }); - // 构建API参数函数 + // 构建API参数函数 - 参考DyaPatrol的searchTime格式 const buildApiParams = useCallback(() => { const currentMapState = mapStateRef.current; @@ -122,26 +101,19 @@ const HighFrequencyPeriod: React.FC = ({ // 使用当前时间类型，如果不存在则使用props或默认值 const effectiveType = rightPanelTime.type || dateType || 'month'; - // 基础参数对象 + // 将range转换为section，与旧版DyaPatrol保持一致 + const keyParam = effectiveType === 'range' ? 'section' : effectiveType; + + // 基础参数对象 - 参考DyaPatrol的searchTime格式 const params: any = { - type: translateDateType(effectiveType), - subTypeCode: useDataType(dataTypeKey) + key: keyParam, + startTime: rightPanelTime.startTime.split(' ')[0], // 只取日期部分 + endTime: rightPanelTime.endTime.split(' ')[0] }; - // 处理日期参数 - if (effectiveType === 'range') { - params.customizeStart = rightPanelTime.startTime; - params.customizeEnd = rightPanelTime.endTime; - } else { - // 年、月、日视图使用time参数 - params.time = rightPanelTime.startTime; - } - // 处理区域参数 if (highIncidenceTimeApi.regionCode === '5101') { // 成都，这两个参数不传 - params.districtCode = undefined; - params.streetCode = undefined; } else if (highIncidenceTimeApi.regionCode.length === 6) { // 区县级别 params.districtCode = highIncidenceTimeApi.regionCode; @@ -152,7 +124,7 @@ const HighFrequencyPeriod: React.FC = ({ } return params; - }, [mapStateRef, dateType, translateDateType, dataTypeKey, pageId, highIncidenceTimeApi.regionCode]); + }, [mapStateRef, dateType, dataTypeKey, pageId, highIncidenceTimeApi.regionCode]); // 在地图状态变化时加载数据 useEffect(() => { diff --git a/src/pages/Home_v_2504/components/SubPages/LawEnforcementPatrol/components/RightContent/HighFrequencyType/index.tsx b/src/pages/Home_v_2504/components/SubPages/LawEnforcementPatrol/components/RightContent/HighFrequencyType/index.tsx index e317fa8a..0ef046cb 100644 --- a/src/pages/Home_v_2504/components/SubPages/LawEnforcementPatrol/components/RightContent/HighFrequencyType/index.tsx +++ b/src/pages/Home_v_2504/components/SubPages/LawEnforcementPatrol/components/RightContent/HighFrequencyType/index.tsx @@ -3,12 +3,12 @@ import ModuleTitleWithTabs from '@/pages/Home_v_2504/components/common/ModuleTit import AreaBarList, { AreaBarItem } from '@/components/V2504/AreaBarList'; import styles from './index.less'; import { useDataType, useMapState } from '@/pages/Home_v_2504/components/MapStateContext'; -import { getDistrictHighFrequencyArea } from '@/services/CityProblem'; import { formatDateTime } from '@/pages/Home_v_2504/hooks/useApiControl'; import useLatestValue from '@/pages/Home_v_2504/hooks/useLatestValue'; import usePageAwareApi from '@/pages/Home_v_2504/hooks/usePageAwareApi'; import { INDUSTRY_PAGE_IDS } from '@/constants/dataTypes'; import { useGlobalModalServices } from '@/pages/GlobalModalServices/provider'; +import services from '@/services'; // 类型定义 export interface HighFrequencyTypeProps { @@ -63,40 +63,57 @@ const HighFrequencyType: React.FC = ({ setCurrentTab(tab as AreaType); }; - // 使用usePageAwareApi管理高发区域API调用 + // 使用usePageAwareApi管理高发类型API调用（合并总数和具体数据获取） const highFrequencyApi = usePageAwareApi({ apiFunction: async (params) => { - console.log('发起高发区域请求，参数:', params); - const response = await getDistrictHighFrequencyArea(params); + console.log('发起高发类型请求，参数:', params); + + // 先获取总数用于计算百分比 + const totalResponse = await services.DataBase.getSjdzInfoData({ + typeCode: 'zzcc-xzcf-sjzs', + params: params + }); + + const total = totalResponse?.data?.data?.records?.[0]?.num || 1; + + // 再获取高发类型数据 + const response = await services.DataBase.getSjdzInfoData({ + typeCode: 'zzcc-rcxc-lxsltj', + params: params + }); if (response.code === 200 && response.data) { - return response.data; + return { + typeData: response.data, + total: total + }; } - throw new Error('获取高发区域数据失败'); + throw new Error('获取高发类型数据失败'); }, - onSuccess: (data) => { - if (!data || !Array.isArray(data) || data.length === 0) { + onSuccess: (result) => { + console.log('*** 高发类型数据成功:', result); + + const { typeData, total } = result; + + if (!typeData || !typeData.data || !typeData.data.records || typeData.data.records.length === 0) { setData([]); return; } - let isUsingMock = true; - const defaultPercentage = isUsingMock ? 99 : 0; - const defaultValue = isUsingMock ? 200 : 0; - - // 转换接口返回的数据格式为图表需要的格式 - const formattedData = data.map((item: any) => ({ - name: item.name, - percentage: parseFloat(item.percent) || defaultPercentage, - count: parseInt(item.value) || defaultValue + // 转换接口返回的数据格式为图表需要的格式 - 参考DyaPatrol的typeTop5list处理 + const records = typeData.data.records.slice(0, 5); // 只取前5条 + const formattedData = records.map((item: any) => ({ + name: item?.name || '未知类型', + percentage: total > 0 ? parseFloat(((item?.num / total) * 100).toFixed(2)) : 0, + count: parseInt(item?.num) || 0 })); + console.log('*** 高发类型数据成功:', formattedData, total); - console.log('高发区域数据成功:'); setData(formattedData); }, onError: (error) => { - console.error('获取高发区域数据出错:', error); + console.error('获取高发类型数据出错:', error); setData([]); }, apiName: '高发类型', @@ -127,25 +144,34 @@ const HighFrequencyType: React.FC = ({ // 使用当前时间类型，如果不存在则使用props或默认值 const effectiveType = rightPanelTime.type || dateType || 'month'; - // 基础参数对象 + // 将range转换为section，与旧版DyaPatrol保持一致 + const keyParam = effectiveType === 'range' ? 'section' : effectiveType; + + return { + effectiveType, + keyParam, + rightPanelTime + }; + }, [mapStateRef, dateType, pageId]); + + // 构建高发类型API请求参数（包含type参数） + const buildHighFrequencyApiParams = useCallback(() => { + const baseData = buildApiParams(); + if (!baseData) return null; + + const { keyParam, rightPanelTime } = baseData; + + // 基础参数对象 - 参考DyaPatrol的searchTime格式 const params: any = { - type: translateDateType(effectiveType) + key: keyParam, + startTime: rightPanelTime.startTime.split(' ')[0], // 只取日期部分 + endTime: rightPanelTime.endTime.split(' ')[0], + type: currentTabRef.current === 'big' ? '0' : '1' // 0为大类，1为小类 }; - // 处理日期参数 - if (effectiveType === 'range') { - params.customizeStart = formatDateTime(rightPanelTime.startTime); - params.customizeEnd = formatDateTime(rightPanelTime.endTime, true); - } else { - // 年、月、日视图使用time参数 - params.time = formatDateTime(rightPanelTime.startTime); - } - // 处理区域参数 if (highFrequencyApi.regionCode === '5101') { - // 成都，这两个参数就不传 - params.districtCode = undefined; - params.streetCode = undefined; + // 成都，这两个参数不传 } else if (highFrequencyApi.regionCode.length === 6) { // 区县级别 params.districtCode = highFrequencyApi.regionCode; @@ -155,15 +181,12 @@ const HighFrequencyType: React.FC = ({ params.streetCode = highFrequencyApi.regionCode; } - // 使用传入的dataTypeKey获取对应的subTypeCode - params.subTypeCode = useDataType(dataTypeKey); - return params; - }, [mapStateRef, currentTabRef, dateType, translateDateType, dataTypeKey, pageId, highFrequencyApi.regionCode]); + }, [buildApiParams, currentTabRef, highFrequencyApi.regionCode]); // 在地图状态变化和Tab变化时加载数据 useEffect(() => { - const params = buildApiParams(); + const params = buildHighFrequencyApiParams(); // 如果没有必要的参数，不发送请求 if (!params) { @@ -171,12 +194,11 @@ const HighFrequencyType: React.FC = ({ return; } - // 调用API - 现在usePageAwareApi内部会处理参数比较和页面状态 + // 调用API + console.log(`加载${pageId}页面高发类型数据，参数:`, params); highFrequencyApi.callApi(params); - }, [currentTab, buildApiParams, highFrequencyApi]); - - + }, [currentTab, buildHighFrequencyApiParams, highFrequencyApi]); return (
diff --git a/src/pages/Home_v_2504/components/SubPages/LawEnforcementPatrol/components/RightContent/IssueTrend/index.tsx b/src/pages/Home_v_2504/components/SubPages/LawEnforcementPatrol/components/RightContent/IssueTrend/index.tsx index 986ce2f9..fa38441a 100644 --- a/src/pages/Home_v_2504/components/SubPages/LawEnforcementPatrol/components/RightContent/IssueTrend/index.tsx +++ b/src/pages/Home_v_2504/components/SubPages/LawEnforcementPatrol/components/RightContent/IssueTrend/index.tsx @@ -3,12 +3,12 @@ import ModuleTitleWithTabs from '@/pages/Home_v_2504/components/common/ModuleTit import SmoothLineChart from '@/components/V2504/SmoothLineChart'; import styles from './index.less'; import { useDataType, useMapState } from '@/pages/Home_v_2504/components/MapStateContext'; -import { getEventTrends } from '@/services/CityProblem'; import { formatDateTime } from '@/pages/Home_v_2504/hooks/useApiControl'; import useLatestValue from '@/pages/Home_v_2504/hooks/useLatestValue'; import usePageAwareApi from '@/pages/Home_v_2504/hooks/usePageAwareApi'; import { INDUSTRY_PAGE_IDS } from '@/constants/dataTypes'; import { translateTrendTime } from '@/pages/Home_v_2504/config/commonUtils'; +import services from '@/services'; interface IssueTrendProps { dateType?: string; @@ -35,106 +35,88 @@ const IssueTrend: React.FC = ({ // 数据状态 const [data, setData] = useState<{ time: string; value: number }[]>([]); - // 转换日期类型为API参数 - const translateDateType = useCallback((type: string) => { - switch (type) { - case 'year': return '1'; - case 'month': return '2'; - case 'day': return '3'; - case 'range': return '4'; - default: return '2'; // 默认月视图 - } - }, []); - - // 使用usePageAwareApi管理问题趋势API调用 - const eventTrendsApi = usePageAwareApi({ + // 使用usePageAwareApi管理问题趋势API调用（时间段） + const trendSectionApi = usePageAwareApi({ apiFunction: async (params: any) => { - console.log('发起问题趋势请求，参数:', params); - const response = await getEventTrends(params); + console.log('发起问题趋势（时间段）请求，参数:', params); + const response = await services.DataBase.getSjdzInfoData({ + typeCode: 'zzcc-rcxc-sjcxmrsl', + params: params + }); if (response.code === 200 && response.data) { return response.data; } - throw new Error('获取问题趋势数据失败'); + throw new Error('获取问题趋势（时间段）数据失败'); }, onSuccess: (data: any) => { - if (!data || !Array.isArray(data)) { + console.log('问题趋势（时间段）数据成功:', data); + + if (!data || !data.data || !data.data.records || data.data.records.length === 0) { setData([]); return; } - console.log('onSuccess:'); - let isUseMockData = false; - if (isUseMockData) { - // setData(mockData); - data = mockData; - } - - const isSupplementData = false; - // 如果是月数据，补充到月底 '2025-05-06' - if (data[0].name.includes('-') && data[0].name.length === 10 && isSupplementData) { - // 获取当前日期 - const today = new Date(); - const lastDay = new Date(today.getFullYear(), today.getMonth() + 1, 1); - // console.log('lastDay:', lastDay); - - // 生成完整日期范围 - const fullData = [...data]; // 先复制已有数据 - - // 从明天开始补充数据 - for (let d = new Date(today); d <= lastDay; d.setDate(d.getDate() + 1)) { - // 跳过今天及之前的日期 - if (d <= today) continue; - - const dateStr = d.toISOString().slice(0, 10).replace(/-/g, '-'); - fullData.push({ - name: dateStr, - value: '0' - }); - } - data = fullData; - // console.log('补充到月底的数据:', data); - } + // 转换接口返回的数据格式为图表需要的格式 - 参考DyaPatrol的cfqsMonth处理 + const formattedData = data.data.records.map((item: any) => ({ + time: translateTrendTime(item?.time || item?.month), + value: parseInt(item?.num) || 0 + })); + + setData(formattedData); + }, + onError: (error: any) => { + console.error('获取问题趋势（时间段）数据出错:', error); + setData([]); + }, + apiName: '问题趋势（时间段）', + debounceTime: 300, + cacheTime: 5000, + pageId: pageId, + panelType: 'right' + }); - // 如果是小时数据，补充到23点 - if (data[0].name.length === 2 && isSupplementData) { - // 获取当前小时 - const currentHour = new Date().getHours(); - // 生成完整小时范围 - const fullData = [...data]; // 先复制已有数据 - - // 从下一小时开始补充数据 - for (let h = currentHour + 1; h <= 23; h++) { - const hourStr = h.toString().padStart(2, '0'); - fullData.push({ - name: hourStr, - value: '0' - }); - } - data = fullData; + // 使用usePageAwareApi管理问题趋势API调用（年月日） + const trendYearApi = usePageAwareApi({ + apiFunction: async (params: any) => { + console.log('发起问题趋势（年月日）请求，参数:', params); + const response = await services.DataBase.getSjdzInfoData({ + typeCode: 'zzcc-rcxc-ryntj', + params: params + }); + + if (response.code === 200 && response.data) { + return response.data; } - // 转换接口返回的数据格式为图表需要的格式 - const formattedData = data.map((item: any) => ({ - time: translateTrendTime(item.name), - value: parseInt(item.value) || 0 + throw new Error('获取问题趋势（年月日）数据失败'); + }, + onSuccess: (data: any) => { + console.log('问题趋势（年月日）数据成功:', data); + + if (!data || !data.data || !data.data.records || data.data.records.length === 0) { + setData([]); + return; + } + + // 转换接口返回的数据格式为图表需要的格式 - 参考DyaPatrol的cfqsYear处理 + const formattedData = data.data.records.map((item: any) => ({ + time: translateTrendTime(item?.time || item?.month), + value: parseInt(item?.num) || 0 })); - console.log('问题趋势数据成功:'); setData(formattedData); }, onError: (error: any) => { - console.error('获取问题趋势数据出错:', error); - // 出错时使用空数据 + console.error('获取问题趋势（年月日）数据出错:', error); setData([]); }, - apiName: '问题趋势', + apiName: '问题趋势（年月日）', debounceTime: 300, - cacheTime: 5000, // 缓存5秒，避免频繁刷新时重复请求 - enableDebug: false, - pageId: pageId, // 添加页面ID以启用页面感知 - panelType: 'right', // 指定为右侧面板 + cacheTime: 5000, + pageId: pageId, + panelType: 'right' }); // 构建API请求参数 @@ -158,88 +140,105 @@ const IssueTrend: React.FC = ({ // 使用当前时间类型，如果不存在则使用props或默认值 const effectiveType = rightPanelTime.type || dateType || 'month'; - // 基础参数对象 + // 将range转换为section，与旧版DyaPatrol保持一致 + const keyParam = effectiveType === 'range' ? 'section' : effectiveType; + + return { + effectiveType, + keyParam, + rightPanelTime + }; + }, [mapStateRef, dateType, pageId]); + + // 构建时间段API参数（section） + const buildSectionApiParams = useCallback(() => { + const baseData = buildApiParams(); + if (!baseData) return null; + + const { keyParam, rightPanelTime } = baseData; + + // 基础参数对象 - 参考DyaPatrol的searchTime格式 const params: any = { - type: translateDateType(effectiveType) + key: keyParam, + startTime: rightPanelTime.startTime.split(' ')[0], // 只取日期部分 + endTime: rightPanelTime.endTime.split(' ')[0] }; - // 处理日期参数 - if (effectiveType === 'range') { - params.customizeStart = formatDateTime(rightPanelTime.startTime); - params.customizeEnd = formatDateTime(rightPanelTime.endTime, true); - } else { - // 年、月、日视图使用time参数 - params.time = formatDateTime(rightPanelTime.startTime); + // 处理区域参数 + if (trendSectionApi.regionCode === '5101') { + // 成都，这两个参数不传 + } else if (trendSectionApi.regionCode.length === 6) { + // 区县级别 + params.districtCode = trendSectionApi.regionCode; + } else if (trendSectionApi.regionCode.length === 9) { + // 街道级别 + params.districtCode = trendSectionApi.regionCode.substring(0, 6); + params.streetCode = trendSectionApi.regionCode; } + return params; + }, [buildApiParams, trendSectionApi.regionCode]); + + // 构建年月日API参数 + const buildYearApiParams = useCallback(() => { + const baseData = buildApiParams(); + if (!baseData) return null; + + const { keyParam, rightPanelTime } = baseData; + + // 基础参数对象 - 参考DyaPatrol的cfqsYear处理，使用sj和type参数 + const params: any = { + sj: keyParam === 'day' + ? rightPanelTime.startTime.split(' ')[0] // 昨日使用startTime + : new Date().toISOString().split('T')[0], // 其他使用今天 + type: keyParam + }; + // 处理区域参数 - if (eventTrendsApi.regionCode === '5101') { - // 成都，这两个参数就不传 - params.districtCode = undefined; - params.streetCode = undefined; - } else if (eventTrendsApi.regionCode.length === 6) { + if (trendYearApi.regionCode === '5101') { + // 成都，这两个参数不传 + } else if (trendYearApi.regionCode.length === 6) { // 区县级别 - params.districtCode = eventTrendsApi.regionCode; - } else if (eventTrendsApi.regionCode.length === 9) { + params.districtCode = trendYearApi.regionCode; + } else if (trendYearApi.regionCode.length === 9) { // 街道级别 - params.districtCode = eventTrendsApi.regionCode.substring(0, 6); - params.streetCode = eventTrendsApi.regionCode; + params.districtCode = trendYearApi.regionCode.substring(0, 6); + params.streetCode = trendYearApi.regionCode; } - // 使用传入的dataTypeKey获取对应的subTypeCode - params.subTypeCode = useDataType(dataTypeKey); - return params; - }, [mapStateRef, dateType, translateDateType, dataTypeKey, pageId, eventTrendsApi.regionCode]); + }, [buildApiParams, trendYearApi.regionCode]); // 在地图状态变化时加载数据 useEffect(() => { - const params = buildApiParams(); + const baseData = buildApiParams(); // 如果没有必要的参数，不发送请求 - if (!params) { + if (!baseData) { console.log('缺少必要的日期参数，暂不加载问题趋势数据'); return; } - console.log(`加载${pageId}页面问题趋势数据，参数:`, params); - eventTrendsApi.callApi(params); + const { effectiveType, keyParam } = baseData; - }, [buildApiParams, eventTrendsApi]); - - // Mock data for the chart - const mockData: { name: string; value: number }[] = [ - { name: '2025-04-01', value: 145 }, - { name: '2025-04-02', value: 160 }, - { name: '2025-04-03', value: 155 }, - { name: '2025-04-04', value: 165 }, - { name: '2025-04-05', value: 175 }, - { name: '2025-04-06', value: 185 }, - { name: '2025-04-07', value: 180 }, - { name: '2025-04-08', value: 190 }, - { name: '2025-04-09', value: 195 }, - { name: '2025-04-10', value: 205 }, - { name: '2025-04-11', value: 310 }, - { name: '2025-04-12', value: 425 }, - { name: '2025-04-13', value: 330 }, - { name: '2025-04-14', value: 320 }, - { name: '2025-04-15', value: 265 }, - { name: '2025-04-16', value: 255 }, - { name: '2025-04-17', value: 240 }, - { name: '2025-04-18', value: 235 }, - { name: '2025-04-19', value: 210 }, - { name: '2025-04-20', value: 215 }, - { name: '2025-04-21', value: 225 }, - { name: '2025-04-22', value: 230 }, - { name: '2025-04-23', value: 235 }, - { name: '2025-04-24', value: 240 }, - { name: '2025-04-25', value: 245 }, - { name: '2025-04-26', value: 250 }, - { name: '2025-04-27', value: 255 }, - { name: '2025-04-28', value: 260 }, - { name: '2025-04-29', value: 265 }, - { name: '2025-04-30', value: 270 }, - ]; + // 参考DyaPatrol的qsList逻辑，根据时间类型选择不同的API + if (keyParam === 'section') { + // 时间段查询，使用cfqsMonth对应的API + const params = buildSectionApiParams(); + if (params) { + console.log(`加载${pageId}页面问题趋势（时间段）数据，参数:`, params); + trendSectionApi.callApi(params); + } + } else { + // 年月日查询，使用cfqsYear对应的API + const params = buildYearApiParams(); + if (params) { + console.log(`加载${pageId}页面问题趋势（年月日）数据，参数:`, params); + trendYearApi.callApi(params); + } + } + + }, [buildApiParams, buildSectionApiParams, buildYearApiParams, trendSectionApi, trendYearApi]); return (
diff --git a/src/pages/Home_v_2504/components/SubPages/LawEnforcementPatrol/components/RightContent/SquadPatrol/index.tsx b/src/pages/Home_v_2504/components/SubPages/LawEnforcementPatrol/components/RightContent/SquadPatrol/index.tsx index f73770f3..36737d8c 100644 --- a/src/pages/Home_v_2504/components/SubPages/LawEnforcementPatrol/components/RightContent/SquadPatrol/index.tsx +++ b/src/pages/Home_v_2504/components/SubPages/LawEnforcementPatrol/components/RightContent/SquadPatrol/index.tsx @@ -3,11 +3,12 @@ import ModuleTitleWithTabs from '@/pages/Home_v_2504/components/common/ModuleTit import AreaBarList, { AreaBarItem } from '@/components/V2504/AreaBarList'; import styles from './index.less'; import { useDataType, useMapState } from '@/pages/Home_v_2504/components/MapStateContext'; -import { getDistrictHighFrequencyArea } from '@/services/CityProblem'; import { formatDateTime } from '@/pages/Home_v_2504/hooks/useApiControl'; import useLatestValue from '@/pages/Home_v_2504/hooks/useLatestValue'; import usePageAwareApi from '@/pages/Home_v_2504/hooks/usePageAwareApi'; import { INDUSTRY_PAGE_IDS } from '@/constants/dataTypes'; +import services from '@/services'; +import { filterCountyDataLocallyByName } from '@/pages/Home_v_2504/config/commonUtils'; // 类型定义 export interface SquadPatrolProps { @@ -21,43 +22,6 @@ export interface SquadPatrolProps { // 区域类型定义 export type AreaType = 'all' | 'urban' | 'central' | 'county'; -// 区域级别定义 -export enum RegionLevelEnum { - CITY = '1', // 市级 - DISTRICT = '2', // 区县级 - STREET = '3', // 街道级 - GRID = '4', // 网格级 -} - -// 区域编码生成函数 -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 SquadPatrol: React.FC = ({ dateType, dateRange, @@ -72,60 +36,67 @@ const SquadPatrol: React.FC = ({ const [currentTab, setCurrentTab] = useState('all'); const currentTabRef = useLatestValue(currentTab); - // 中队巡查数据 + // 中队巡查原始数据 + const [rawData, setRawData] = useState([]); + // 中队巡查显示数据（经过过滤的） const [data, setData] = useState([]); - - // 转换日期类型为API参数 - const translateDateType = useCallback((type: string) => { - switch (type) { - case 'year': return '1'; - case 'month': return '2'; - case 'day': return '3'; - case 'range': return '4'; - default: return '2'; // 默认月视图 - } - }, []); + // 总数（用于计算百分比） + const [total, setTotal] = useState(0); // 处理Tab切换 const handleTabChange = (tab: string) => { setCurrentTab(tab as AreaType); }; - // 使用usePageAwareApi管理中队巡查API调用 - const highFrequencyApi = usePageAwareApi({ + // 使用usePageAwareApi管理中队巡查API调用（合并总数和具体数据获取） + const squadPatrolApi = usePageAwareApi({ apiFunction: async (params) => { console.log('发起中队巡查请求，参数:', params); - const response = await getDistrictHighFrequencyArea(params); + + // 先获取总数用于计算百分比 + const totalResponse = await services.DataBase.getSjdzInfoData({ + typeCode: 'zzcc-xzcf-sjzs', + params: params + }); + + const totalCount = totalResponse?.data?.data?.records?.[0]?.num || 1; + + // 再获取中队巡查数据 + const response = await services.DataBase.getSjdzInfoData({ + typeCode: 'zzcc-rcxc-abmfztj', + params: params + }); if (response.code === 200 && response.data) { - return response.data; + return { + squadData: response.data, + total: totalCount + }; } throw new Error('获取中队巡查数据失败'); }, - onSuccess: (data) => { - if (!data || !Array.isArray(data) || data.length === 0) { + onSuccess: (result) => { + console.log('中队巡查数据成功:', result); + + const { squadData, total: totalCount } = result; + + if (!squadData || !squadData.data || !squadData.data.records || squadData.data.records.length === 0) { + setRawData([]); setData([]); + setTotal(0); return; } - let isUsingMock = true; - const defaultPercentage = isUsingMock ? 99 : 0; - const defaultValue = isUsingMock ? 200 : 0; - - // 转换接口返回的数据格式为图表需要的格式 - const formattedData = data.map((item: any) => ({ - name: item.name, - percentage: parseFloat(item.percent) || defaultPercentage, - count: parseInt(item.value) || defaultValue - })); - - console.log('中队巡查数据成功:'); - setData(formattedData); + // 保存原始数据和总数 + setRawData(squadData.data.records); + setTotal(totalCount); }, onError: (error) => { console.error('获取中队巡查数据出错:', error); + setRawData([]); setData([]); + setTotal(0); }, apiName: '中队巡查', debounceTime: 300, @@ -155,47 +126,53 @@ const SquadPatrol: React.FC = ({ // 使用当前时间类型，如果不存在则使用props或默认值 const effectiveType = rightPanelTime.type || dateType || 'month'; - // 基础参数对象 + // 将range转换为section，与旧版DyaPatrol保持一致 + const keyParam = effectiveType === 'range' ? 'section' : effectiveType; + + // 基础参数对象 - 参考DyaPatrol的searchTime格式 const params: any = { - type: translateDateType(effectiveType) + key: keyParam, + startTime: rightPanelTime.startTime.split(' ')[0], // 只取日期部分 + endTime: rightPanelTime.endTime.split(' ')[0] }; - // 处理日期参数 - if (effectiveType === 'range') { - params.customizeStart = formatDateTime(rightPanelTime.startTime); - params.customizeEnd = formatDateTime(rightPanelTime.endTime, true); - } else { - // 年、月、日视图使用time参数 - params.time = formatDateTime(rightPanelTime.startTime); - } - - // 获取区域编码列表 - const districtCodeList = getRegionCodes(currentTabRef.current, highFrequencyApi.regionCode); - if (districtCodeList) { - params.districtCodeList = districtCodeList; - } - // 处理区域参数 - if (highFrequencyApi.regionCode === '5101') { + if (squadPatrolApi.regionCode === '5101') { // 成都，这两个参数就不传 - params.districtCode = undefined; - params.streetCode = undefined; - } else if (highFrequencyApi.regionCode.length === 6) { + } else if (squadPatrolApi.regionCode.length === 6) { // 区县级别 - params.districtCode = highFrequencyApi.regionCode; - } else if (highFrequencyApi.regionCode.length === 9) { + params.districtCode = squadPatrolApi.regionCode; + } else if (squadPatrolApi.regionCode.length === 9) { // 街道级别 - params.districtCode = highFrequencyApi.regionCode.substring(0, 6); - params.streetCode = highFrequencyApi.regionCode; + params.districtCode = squadPatrolApi.regionCode.substring(0, 6); + params.streetCode = squadPatrolApi.regionCode; } - // 使用传入的dataTypeKey获取对应的subTypeCode - params.subTypeCode = useDataType(dataTypeKey); - return params; - }, [mapStateRef, currentTabRef, dateType, translateDateType, dataTypeKey, pageId, highFrequencyApi.regionCode]); + }, [mapStateRef, dateType, pageId, squadPatrolApi.regionCode]); + + // 根据Tab过滤数据 - 参考CaseHandlingQuantity组件的实现 + useEffect(() => { + if (!rawData || rawData.length === 0) { + setData([]); + return; + } + + // 根据当前Tab过滤数据 - 使用filterCountyDataLocallyByName函数 + let filteredRecords = filterCountyDataLocallyByName(rawData, currentTab, 'areaname'); + + // 取前5条并转换格式 -- 取全部... + const formattedData = filteredRecords.map((item: any) => ({ + // const formattedData = filteredRecords.slice(0, 5).map((item: any) => ({ + name: item?.bm || '未知中队', + percentage: total > 0 ? parseFloat(((item?.num / total) * 100).toFixed(2)) : 0, + count: parseInt(item?.num) || 0 + })); + + setData(formattedData); + }, [rawData, currentTab, total]); - // 在地图状态变化和Tab变化时加载数据 + // 在地图状态变化时加载数据（不包括Tab变化） useEffect(() => { const params = buildApiParams(); @@ -206,9 +183,10 @@ const SquadPatrol: React.FC = ({ } // 调用API - 现在usePageAwareApi内部会处理参数比较和页面状态 - highFrequencyApi.callApi(params); + console.log(`加载${pageId}页面中队巡查数据，参数:`, params); + squadPatrolApi.callApi(params); - }, [currentTab, buildApiParams, highFrequencyApi]); + }, [buildApiParams, squadPatrolApi]); return (
diff --git a/src/pages/Home_v_2504/components/SubPages/LawEnforcementPatrol/components/RightContent/WorkStar/index.less b/src/pages/Home_v_2504/components/SubPages/LawEnforcementPatrol/components/RightContent/WorkStar/index.less index eaf42701..961c05d2 100644 --- a/src/pages/Home_v_2504/components/SubPages/LawEnforcementPatrol/components/RightContent/WorkStar/index.less +++ b/src/pages/Home_v_2504/components/SubPages/LawEnforcementPatrol/components/RightContent/WorkStar/index.less @@ -3,17 +3,18 @@ align-items: center; gap: 15px; margin-top: 30px; + margin-left: -23px; .item { position: relative; display: flex; align-items: center; flex-direction: column; - // gap: -12px; width: 158px; height: 100px; padding-top: 16px; border-radius: 22px; + flex-shrink: 0; .name { color: rgb(255, 255, 255); @@ -39,6 +40,11 @@ letter-spacing: 0px; text-align: center; margin-top: -8px; + max-width: 80%; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + width: 100%; } } } \ No newline at end of file diff --git a/src/pages/Home_v_2504/components/SubPages/LawEnforcementPatrol/components/RightContent/WorkStar/index.tsx b/src/pages/Home_v_2504/components/SubPages/LawEnforcementPatrol/components/RightContent/WorkStar/index.tsx index e0da7b53..e3815e55 100644 --- a/src/pages/Home_v_2504/components/SubPages/LawEnforcementPatrol/components/RightContent/WorkStar/index.tsx +++ b/src/pages/Home_v_2504/components/SubPages/LawEnforcementPatrol/components/RightContent/WorkStar/index.tsx @@ -1,4 +1,4 @@ -import React, { CSSProperties, useState } from 'react' +import React, { CSSProperties, useState, useEffect, useCallback } from 'react' import HncyCard from '@/pages/Home_v_2504/components/common/Card' import no1 from '@/assets/images/no1.png' @@ -7,87 +7,244 @@ import no3 from '@/assets/images/no3.png' import styles from './index.less' import DescriptionItem from '@/components/DescriptionItem' +import { useMapState } from '@/pages/Home_v_2504/components/MapStateContext' +import useLatestValue from '@/pages/Home_v_2504/hooks/useLatestValue' +import usePageAwareApi from '@/pages/Home_v_2504/hooks/usePageAwareApi' +import { INDUSTRY_PAGE_IDS } from '@/constants/dataTypes' +import services from '@/services' -export default function WorkStar() { +interface WorkStarProps { + dateType?: string; + dateRange?: { startTime: string; endTime: string }; + dataTypeKey?: string; + pageId?: string; +} - const [list, setList] = useState([ - { +export default function WorkStar({ + dateType, + dateRange, + dataTypeKey = '日常巡查', + pageId = INDUSTRY_PAGE_IDS.LAW_ENFORCEMENT_PATROL, +}: WorkStarProps) { + // 地图状态 + const { mapState } = useMapState(); + const mapStateRef = useLatestValue(mapState); + + const [list, setList] = useState([ + { + name: '张富林', + count: 456, + org: 'XX城管执法中队' + }, { + name: '李富林', + count: 432, + org: 'XX城管执法中队' + }, { + name: '王富林', + count: 123, + org: 'XX城管执法中队' + } + ]) + + // 使用usePageAwareApi管理工作之星API调用 + const workStarApi = usePageAwareApi({ + apiFunction: async (params: any) => { + console.log('发起工作之星请求，参数:', params); + const response = await services.DataBase.getSjdzInfoData({ + typeCode: 'zzcc-rcxc-zdxmfztj', + params: params + }); + + if (response.code === 200 && response.data) { + return response.data; + } + + throw new Error('获取工作之星数据失败'); + }, + onSuccess: (data: any) => { + console.log('工作之星数据成功:', data); + + if (!data || !data.data || !data.data.records || data.data.records.length === 0) { + setList([ + { name: '张富林', count: 456, org: 'XX城管执法中队' - }, { + }, { name: '李富林', count: 432, org: 'XX城管执法中队' - }, { + }, { name: '王富林', count: 123, org: 'XX城管执法中队' + } + ]); + return; + } + + // 转换接口返回的数据格式 - 参考DyaPatrol的starData处理 + const records = data.data.records.slice(0, 3); // 只取前3名 + const formattedData = records.map((item: any) => ({ + name: item?.sbr || '未知', + count: parseInt(item?.num) || 0, + org: item?.zd || 'XX城管执法中队' + })); + + setList(formattedData); + }, + onError: (error: any) => { + console.error('获取工作之星数据出错:', error); + // 出错时使用默认数据 + setList([ + { + name: '张富林', + count: 456, + org: 'XX城管执法中队' + }, { + name: '李富林', + count: 432, + org: 'XX城管执法中队' + }, { + name: '王富林', + count: 123, + org: 'XX城管执法中队' } - ]) + ]); + }, + apiName: '工作之星', + debounceTime: 300, + cacheTime: 5000, + pageId: pageId, + panelType: 'right' + }); - return ( - -
- { - list.map((item, index) => { - return ( -
- -
{item.name}
- {/*
{item.count}
*/} - -
{item.org}
-
- ) - }) - } -
- - ) + // 构建API参数函数 - 参考DyaPatrol的searchTime格式 + const buildApiParams = useCallback(() => { + const currentMapState = mapStateRef.current; + + // 如果没有必要的时间参数，返回null表示不应该发起请求 + if (!currentMapState.rightPanelTime?.startTime || !currentMapState.rightPanelTime?.endTime) { + return null; + } + + // 获取当前页面的时间设置 + const pageTimeSettings = currentMapState.pageTimeSettings?.[pageId]; + + // 使用页面级别的时间设置，如果存在的话 + const rightPanelTime = pageTimeSettings?.rightPanelTime || currentMapState.rightPanelTime; + + // 使用当前时间类型，如果不存在则使用props或默认值 + const effectiveType = rightPanelTime.type || dateType || 'month'; + + // 将range转换为section，与旧版DyaPatrol保持一致 + const keyParam = effectiveType === 'range' ? 'section' : effectiveType; + + // 基础参数对象 - 参考DyaPatrol的searchTime格式 + const params: any = { + key: keyParam, + startTime: rightPanelTime.startTime.split(' ')[0], // 只取日期部分 + endTime: rightPanelTime.endTime.split(' ')[0] + }; + + // 参考DyaPatrol，对于day类型需要特殊处理endTime + if (keyParam === 'day') { + // 对于昨日查询，endTime使用今天的日期 + const today = new Date(); + params.endTime = today.toISOString().split('T')[0]; + } + + // 处理区域参数 + if (workStarApi.regionCode === '5101') { + // 成都，这两个参数不传 + } else if (workStarApi.regionCode.length === 6) { + // 区县级别 + params.districtCode = workStarApi.regionCode; + } else if (workStarApi.regionCode.length === 9) { + // 街道级别 + params.districtCode = workStarApi.regionCode.substring(0, 6); + params.streetCode = workStarApi.regionCode; + } + + return params; + }, [mapStateRef, dateType, pageId, workStarApi.regionCode]); + + // 在地图状态变化时加载数据 + useEffect(() => { + const params = buildApiParams(); + + // 如果没有必要的参数，不发送请求 + if (!params) { + console.log('缺少必要的日期参数，暂不加载工作之星数据'); + return; + } + + console.log(`加载${pageId}页面工作之星数据，参数:`, params); + workStarApi.callApi(params); + }, [buildApiParams, workStarApi]); + + return ( + +
+ { + list.map((item, index) => { + return ( +
+ +
{item.name}
+ {/*
{item.count}
*/} + +
{item.org}
+
+ ) + }) + } +
+ + ) } const icons = (index: number) => { - return { - 1: no1, - 2: no2, - 3: no3, - }[index] + return { + 1: no1, + 2: no2, + 3: no3, + }[index] } const bgColor = (index: number) => { - return { - 1: 'linear-gradient(180.00deg, rgba(250, 222, 133, 0.4),rgba(250, 221, 132, 0) 100%)', - 2: 'linear-gradient(180.00deg, rgba(234, 234, 234, 0.4),rgba(231, 231, 231, 0) 100%)', - 3: 'linear-gradient(180.00deg, rgba(252, 228, 220, 0.4),rgba(252, 228, 220, 0) 100%)', - }[index] + return { + 1: 'linear-gradient(180.00deg, rgba(250, 222, 133, 0.4),rgba(250, 221, 132, 0) 100%)', + 2: 'linear-gradient(180.00deg, rgba(234, 234, 234, 0.4),rgba(231, 231, 231, 0) 100%)', + 3: 'linear-gradient(180.00deg, rgba(252, 228, 220, 0.4),rgba(252, 228, 220, 0) 100%)', + }[index] } const valueStyle: CSSProperties = { - color: 'rgb(89, 238, 255)', - fontFamily: 'D-DIN', - fontSize: 26, - fontWeight: 700, + color: 'rgb(89, 238, 255)', + fontFamily: 'D-DIN', + fontSize: 26, + fontWeight: 700, } const unitStyle: CSSProperties = { - color: 'rgb(188, 206, 233)', - fontFamily: '微软雅黑', - fontSize: 18, - fontWeight: 400, - lineHeight: '24px', + color: 'rgb(188, 206, 233)', + fontFamily: '微软雅黑', + fontSize: 18, + fontWeight: 400, + lineHeight: '24px', } \ No newline at end of file diff --git a/src/pages/Home_v_2504/config/commonUtils.ts b/src/pages/Home_v_2504/config/commonUtils.ts index c8edd955..04483bd5 100644 --- a/src/pages/Home_v_2504/config/commonUtils.ts +++ b/src/pages/Home_v_2504/config/commonUtils.ts @@ -178,19 +178,23 @@ const jqxc = [ ]; // 本地筛选方式进行过滤区县数据 -export const filterCountyDataLocallyByName = (data: any[], currentTab: AreaType, isTitle: boolean = false) => { +export const filterCountyDataLocallyByName = ( + data: any[], + currentTab: AreaType, + fieldName: string = 'gridName' +) => { // 根据当前Tab过滤数据 - 参考NumTop5组件的逻辑 if (currentTab === 'central') { return data.filter((item: any) => - isTitle ? zxcq.includes(item?.title) : zxcq.includes(item?.gridName) + zxcq.includes(item?.[fieldName]) ); } else if (currentTab === 'urban') { return data.filter((item: any) => - isTitle ? csxq.includes(item?.title) : csxq.includes(item?.gridName) + csxq.includes(item?.[fieldName]) ); } else if (currentTab === 'county') { return data.filter((item: any) => - isTitle ? jqxc.includes(item?.title) : jqxc.includes(item?.gridName) + jqxc.includes(item?.[fieldName]) ); } // 'all' 情况下不过滤，使用全部数据 @@ -236,7 +240,7 @@ export const translateTrendTime = ((inputDate: string | number) => { if (inputDate === 23) { return '23:59:59'; } - return `${inputDate.toString().padStart(2, '0')}:00`; + return `${inputDate.toString().padStart(2, '0')}:00:00`; } return inputDate; }); -- GitLab