diff --git a/src/components/V2504/AreaBarList/index.less b/src/components/V2504/AreaBarList/index.less index d358270b9bc8922941b4d8af4bbad759da4c1b01..6af8e444e8b73fe7f8e561998c51bb8b1a1d7f4e 100644 --- a/src/components/V2504/AreaBarList/index.less +++ b/src/components/V2504/AreaBarList/index.less @@ -46,6 +46,10 @@ font-weight: 400; line-height: 24px; margin-left: 4.5px; + max-width: 70%; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } .valueWrapper { diff --git a/src/components/V2504/AreaBarList/index.tsx b/src/components/V2504/AreaBarList/index.tsx index d23e5eb27d387a56f6099f05e7e0b3eb4269049e..065f1f30995bcbdef78af28a968b5ea95c136a56 100644 --- a/src/components/V2504/AreaBarList/index.tsx +++ b/src/components/V2504/AreaBarList/index.tsx @@ -65,7 +65,7 @@ const AreaBarList: React.FC = ({
-
{item.name}
+
{item.name}
{showCount && item.count !== undefined && (
diff --git a/src/pages/GlobalModalServices/modals/RubbishFacilitiesDetails/index.tsx b/src/pages/GlobalModalServices/modals/RubbishFacilitiesDetails/index.tsx index 83196c5102923da88f30ff6ce790d270764f5506..b32fff94d59a1ef1387887948867db648980f820 100644 --- a/src/pages/GlobalModalServices/modals/RubbishFacilitiesDetails/index.tsx +++ b/src/pages/GlobalModalServices/modals/RubbishFacilitiesDetails/index.tsx @@ -1,17 +1,16 @@ - -import ModuleTitle from '@/pages/Home_v_2504/components/common/ModuleTitle' -import styles from './index.less' -import { Flex, Space } from 'antd' -import { useMemo, useState } from 'react'; -import DateSelector from '@/components/V2504/DateSelector'; -import SmoothLineChart from '@/components/V2504/SmoothLineChart'; import DescriptionItem from '@/components/DescriptionItem'; +import SmoothLineChart from '@/components/V2504/SmoothLineChart'; +import ModuleTitle from '@/pages/Home_v_2504/components/common/ModuleTitle'; +import services from '@/services'; +import { useRequest } from 'ahooks'; +import { Flex, Space } from 'antd'; import classNames from 'classnames'; +import { useEffect, useMemo, useState } from 'react'; +import styles from './index.less'; type DateType = 'day' | 'month' | 'year' | 'range' | 'yesterday' | 'lastMonth'; -const RubbishFacilitiesDetails = () => { - +const RubbishFacilitiesDetails = (props: any) => { const commonValueStyle = { background: 'linear-gradient(180deg, #9CF8F7 0%, #25BBFF 100%)', WebkitBackgroundClip: 'text', @@ -33,10 +32,10 @@ const RubbishFacilitiesDetails = () => { fontSize: '14px', }; - const timeOptions: DateType[] = ['month', 'year'] + const timeOptions: DateType[] = ['month', 'year']; const [activeType, setActiveType] = useState('month'); - +const [areaSelectd, setAreaSelectd]=useState({}); // 企业详情数据 const [enterpriseInfo] = useState({ enterpriseName: 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX', @@ -45,27 +44,73 @@ const RubbishFacilitiesDetails = () => { buildTime: '2024-05-28 10:20:20', address: 'XXXXXXXXXXXXXXXXXXXXXXXX', }); - + //查询详情 + const { runAsync: getDetails } = useRequest( + services.DataBase.getSjdzInfoData, + { manual: true }, + ); + + const getDetailsData = async () => { + try { + const res = await getDetails({ + typeCode: 'zzcc-shlj-ljcfylb', + params: { + czcid: props.id, + ...props.searchParams, + }, + }); + console.log(res); + const res1 = await getDetails({ + typeCode: 'zzcc-shlj-byczl', + params: { + name: props?.name, + ...props.searchParams, + }, + }); + setAreaSelectd({ + ...res?.data?.data?.records?.[0]?.list?.[0], + ...res1?.data?.data?.records?.[0], + }); + } catch (error) { + console.log(error); + } + }; + useEffect(() => { + if (!props?.id) return; + getDetailsData(); + }, [props]); + console.log(areaSelectd); + // 处理日期变化 const handleDateTypeChange = (type: DateType) => { console.log('Date changed: RightContent!!', type); - setActiveType(type) - } + setActiveType(type); + }; - const chartStyle = useMemo(() => ({ - height: '178px', - width: '1030px' - }), []); + const chartStyle = useMemo( + () => ({ + height: '178px', + width: '1030px', + }), + [], + ); const getButtonLabel = (type: DateType) => { switch (type) { - case 'day': return '日'; - case 'month': return '月'; - case 'year': return '年'; - case 'yesterday': return '昨日'; - case 'lastMonth': return '上月'; - case 'range': return null; // 日期范围不需要按钮 - default: return ''; + case 'day': + return '日'; + case 'month': + return '月'; + case 'year': + return '年'; + case 'yesterday': + return '昨日'; + case 'lastMonth': + return '上月'; + case 'range': + return null; // 日期范围不需要按钮 + default: + return ''; } }; @@ -111,39 +156,43 @@ const RubbishFacilitiesDetails = () => {
企业名称： - {enterpriseInfo.enterpriseName} + + {areaSelectd?.czcmc} +
类型： - {enterpriseInfo.type} + {areaSelectd?.czclx}
管理单位： - {enterpriseInfo.unit} + {areaSelectd?.manageunitname}
建设时间： - {enterpriseInfo.buildTime} + {areaSelectd?.jcsscreatetime}
企业地址： - {enterpriseInfo.address} + {areaSelectd?.address}
- - + + - {timeOptions.map(type => { + {timeOptions.map((type) => { const label = getButtonLabel(type); if (!label) return null; return (
handleDateTypeChange(type)} > {label} @@ -165,7 +214,7 @@ const RubbishFacilitiesDetails = () => { />
-
+
{
- ) -} + ); +}; -export default RubbishFacilitiesDetails \ No newline at end of file +export default RubbishFacilitiesDetails; diff --git a/src/pages/Home_v_2504/components/SubPages/ConstructionWaste/components/LeftContent/index.tsx b/src/pages/Home_v_2504/components/SubPages/ConstructionWaste/components/LeftContent/index.tsx index 29233693d215c1060ab0ffc06cd8a3cdfb27bbee..e625842367eef1f08bf7b36ac68793174c05e64e 100644 --- a/src/pages/Home_v_2504/components/SubPages/ConstructionWaste/components/LeftContent/index.tsx +++ b/src/pages/Home_v_2504/components/SubPages/ConstructionWaste/components/LeftContent/index.tsx @@ -1,6 +1,5 @@ import DateSelector from '@/components/V2504/DateSelector'; import PanelTitle from '@/pages/Home_v_2504/components/common/PanelTitle'; -import { useMapState } from '@/pages/Home_v_2504/components/MapStateContext'; import { Flex } from 'antd'; import dayjs from 'dayjs'; import React, { useCallback, useState } from 'react'; @@ -15,7 +14,6 @@ import ViolationDumpingLocation from './ViolationDumpingLocation'; * 建筑垃圾左侧内容组件 */ const LeftContent: React.FC = () => { - const [searchTime, setSearchTime] = useState({ startTime: dayjs().startOf('month').format('YYYY-MM-DD'), endTime: dayjs().endOf('month').format('YYYY-MM-DD'), @@ -28,7 +26,6 @@ const LeftContent: React.FC = () => { startTime: params.startTime, endTime: params.endTime, }); - }, [], @@ -40,7 +37,7 @@ const LeftContent: React.FC = () => {
{ + // 地图状态 + const { mapState } = useMapState(); + const mapStateRef = useLatestValue(mapState); + + // 当前选中的区域类型 + const [currentTab, setCurrentTab] = useState('all'); + const currentTabRef = useLatestValue(currentTab); + const [searchParams, setSearchParams] = useState({ startTime: undefined }); + + // 转换日期类型为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 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 ''; + }; + + // 构建API请求参数 + const buildApiParams = useCallback(() => { + const currentMapState = mapStateRef.current; + + // 如果没有必要的时间参数，返回null表示不应该发起请求 + if ( + !currentMapState.leftPanelTime?.startTime || + !currentMapState.leftPanelTime?.endTime + ) { + return null; + } -const DisposalFacilities: React.FC = () => { - // Mock data for facilities - const mockData: AreaBarItem[] = [ - { name: '填埋场', count: 123, percentage: 100 }, - { name: '环保发电厂', count: 120, percentage: 90 }, - { name: '渗滤液厂', count: 110, percentage: 80 }, - { name: '沼气发电厂', count: 103, percentage: 70 }, - { name: '焚烧厂', count: 100, percentage: 60 }, + // 使用当前时间类型，如果不存在则使用props或默认值 + const effectiveType = + currentMapState.leftPanelTime.type || dateType || 'month'; + + // 基础参数对象 + const params: any = { + type: translateDateType(effectiveType), + }; + // 获取区域编码列表 + const districtCodeList = getRegionCodes( + currentTabRef.current, + currentMapState.regionCode, + ); + if (districtCodeList) { + params.districtCodeList = districtCodeList; + } + params.startTime = formatDateTime(currentMapState.leftPanelTime.startTime); + params.endTime = formatDateTime( + currentMapState.leftPanelTime.endTime, + true, + ); + + // 处理区域参数 + if (currentMapState.regionCode === '5101') { + // 成都，这两个参数就不传 + params.districtCode = undefined; + params.streetCode = undefined; + } else if (currentMapState.regionCode.length === 6) { + // 区县级别 + params.districtCode = currentMapState.regionCode; + } else if (currentMapState.regionCode.length === 9) { + // 街道级别 + params.districtCode = currentMapState.regionCode.substring(0, 6); + params.streetCode = currentMapState.regionCode; + } + + // 使用传入的dataTypeKey获取对应的subTypeCode + params.subTypeCode = useDataType(dataTypeKey); + + return params; + }, [mapStateRef, currentTabRef, dateType, translateDateType, dataTypeKey]); + + // 跟踪上一次的API参数，避免重复调用 + const prevApiParamsRef = useRef(''); + + // 在地图状态变化和Tab变化时加载数据 + useEffect(() => { + const params = buildApiParams(); + + // 如果没有必要的参数，不发送请求 + if (!params) { + console.log('缺少必要的日期参数，不加载环卫人员区域数据'); + return; + } + + // 参数签名，用于比较参数是否有实际变化 + const paramsSignature = JSON.stringify(params); + + // 检查参数是否真正变化，防止重复调用 + if (paramsSignature === prevApiParamsRef.current) { + console.log('环卫人员区域参数未变化，跳过重复加载'); + return; + } + setSearchParams(params); + // 更新上一次参数签名 + prevApiParamsRef.current = paramsSignature; + }, [mapState, currentTab, buildApiParams]); + + + const list = [ + { + name: '填埋场', + key: '生活垃圾填埋场', + icon: require('@/assets/images/clc2.png'), + }, + { + name: '环保发电厂', + key: '生活垃圾焚烧发电厂', + icon: require('@/assets/images/clc1.png'), + }, + { + name: '餐厨厂', + key: '厨余垃圾处理厂', + icon: require('@/assets/images/clc4.png'), + }, + { + name: '渗滤液厂', + key: '渗滤液处理厂', + icon: require('@/assets/images/clc3.png'), + }, ]; + const { data: pointData } = useRequest( + () => + services.DataBase.getSjdzInfoData({ + typeCode: 'zzcc-shlj-ljcfylb', + params: { + pageNo: 0, + pageSize: 50, + ...searchParams, + }, + }).then((res) => { + if (res.code === 200) { + return res?.data?.data?.records?.[0]?.list; + } + throw new Error('获取数据失败'); + }), + { + refreshDeps: [searchParams], + manual: !searchParams?.startTime, + }, + ); + const data = useMemo(() => { + const total = pointData?.length || 0; + return list?.map((item) => { + const count = + pointData?.filter((it: any) => item?.key === it.czclx)?.length || 0; + return { + ...item, + count, + percentage: total ? (count / total) * 100 : 0, + }; + }); + }, [pointData]); return (
- +
- @@ -33,4 +236,4 @@ const DisposalFacilities: React.FC = () => { ); }; -export default DisposalFacilities; \ No newline at end of file +export default DisposalFacilities; diff --git a/src/pages/Home_v_2504/components/SubPages/DomesticWaste/components/LeftContent/components/OverallSituation/components/GenderPieChart/index.tsx b/src/pages/Home_v_2504/components/SubPages/DomesticWaste/components/LeftContent/components/OverallSituation/components/GenderPieChart/index.tsx index b4f890357f982bd12d76ee569b093c2d0dbdc210..3823ebcd52e2f5f9b7e144ec1a7d27e12d7fe5cd 100644 --- a/src/pages/Home_v_2504/components/SubPages/DomesticWaste/components/LeftContent/components/OverallSituation/components/GenderPieChart/index.tsx +++ b/src/pages/Home_v_2504/components/SubPages/DomesticWaste/components/LeftContent/components/OverallSituation/components/GenderPieChart/index.tsx @@ -2,7 +2,7 @@ import React, { useEffect, useRef } from 'react' import * as echarts from 'echarts'; import './index.less' -export default function GenderPieChart() { +export default function GenderPieChart({total}:{total:number}) { const chartRef = useRef(null); @@ -14,7 +14,7 @@ export default function GenderPieChart() { label: { formatter: [ '{a|处置总量}', - `{b|${155.38}}{x|万吨}` + `{b|${total}}{x|万吨}` ].join('\n'), rich: { a: { @@ -90,7 +90,7 @@ export default function GenderPieChart() { }; myChart.setOption(option); } - }, []); + }, [total]); return ( diff --git a/src/pages/Home_v_2504/components/SubPages/DomesticWaste/components/LeftContent/components/OverallSituation/index.tsx b/src/pages/Home_v_2504/components/SubPages/DomesticWaste/components/LeftContent/components/OverallSituation/index.tsx index f4b1efa7d66c612bd275b2b4da445d486e6c0e0b..9ccc6e1cea14c8d3610e74bc93f74043c8f196f5 100644 --- a/src/pages/Home_v_2504/components/SubPages/DomesticWaste/components/LeftContent/components/OverallSituation/index.tsx +++ b/src/pages/Home_v_2504/components/SubPages/DomesticWaste/components/LeftContent/components/OverallSituation/index.tsx @@ -1,14 +1,13 @@ -import React, { useEffect, useRef } from 'react'; -import { Typography } from 'antd'; import DescriptionItem from '@/components/DescriptionItem'; -import * as echarts from 'echarts/core'; import { PieChart } from 'echarts/charts'; import { + LegendComponent, TitleComponent, TooltipComponent, - LegendComponent } from 'echarts/components'; +import * as echarts from 'echarts/core'; import { CanvasRenderer } from 'echarts/renderers'; +import { useCallback, useEffect, useRef, useState } from 'react'; import styles from './index.less'; // Register the required components @@ -17,37 +16,199 @@ echarts.use([ TitleComponent, TooltipComponent, LegendComponent, - CanvasRenderer + CanvasRenderer, ]); // Importing the necessary assets -import lankillDot from '@/assets/img/lankill-dot.png'; // This should be a green dot -import burnDot from '@/assets/img/burn-dot.png'; // This should be a yellow dot import ModuleTitleWithTabs from '@/pages/Home_v_2504/components/common/ModuleTitleWithTabs'; +import { + useDataType, + useMapState, +} from '@/pages/Home_v_2504/components/MapStateContext'; +import { AreaType } from '@/pages/Home_v_2504/components/SubPages/LawEnforcementPunishment/components/RightContent/HighFrequencyType'; +import { formatDateTime } from '@/pages/Home_v_2504/hooks/useApiControl'; +import useLatestValue from '@/pages/Home_v_2504/hooks/useLatestValue'; +import services from '@/services'; +import { useRequest } from 'ahooks'; import GenderPieChart from './components/GenderPieChart'; // Mock chart data const data = { landfill: { value: 52.5, - percentage: 31.5 + percentage: 31.5, }, incineration: { value: 98.5, - percentage: 68.5 + percentage: 68.5, }, - total: 155.8 + total: 155.8, }; -const OverallSituation: React.FC = () => { +const OverallSituation = ({ + dataTypeKey = '生活垃圾', + dateType, +}: { + dataTypeKey?: string; + dateType?: string; +}) => { + // 地图状态 + const { mapState } = useMapState(); + const mapStateRef = useLatestValue(mapState); + + // 当前选中的区域类型 + const [currentTab, setCurrentTab] = useState('all'); + const currentTabRef = useLatestValue(currentTab); + const [searchParams, setSearchParams] = useState({ startTime: undefined }); + + // 转换日期类型为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 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 ''; + }; + + // 构建API请求参数 + const buildApiParams = useCallback(() => { + const currentMapState = mapStateRef.current; + + // 如果没有必要的时间参数，返回null表示不应该发起请求 + if ( + !currentMapState.leftPanelTime?.startTime || + !currentMapState.leftPanelTime?.endTime + ) { + return null; + } + + // 使用当前时间类型，如果不存在则使用props或默认值 + const effectiveType = + currentMapState.leftPanelTime.type || dateType || 'month'; + + // 基础参数对象 + const params: any = { + type: translateDateType(effectiveType), + }; + // 获取区域编码列表 + const districtCodeList = getRegionCodes( + currentTabRef.current, + currentMapState.regionCode, + ); + if (districtCodeList) { + params.districtCodeList = districtCodeList; + } + params.startTime = formatDateTime(currentMapState.leftPanelTime.startTime); + params.endTime = formatDateTime( + currentMapState.leftPanelTime.endTime, + true, + ); + + // 处理区域参数 + if (currentMapState.regionCode === '5101') { + // 成都，这两个参数就不传 + params.districtCode = undefined; + params.streetCode = undefined; + } else if (currentMapState.regionCode.length === 6) { + // 区县级别 + params.districtCode = currentMapState.regionCode; + } else if (currentMapState.regionCode.length === 9) { + // 街道级别 + params.districtCode = currentMapState.regionCode.substring(0, 6); + params.streetCode = currentMapState.regionCode; + } + + // 使用传入的dataTypeKey获取对应的subTypeCode + params.subTypeCode = useDataType(dataTypeKey); + + return params; + }, [mapStateRef, currentTabRef, dateType, translateDateType, dataTypeKey]); + + // 跟踪上一次的API参数，避免重复调用 + const prevApiParamsRef = useRef(''); + + // 在地图状态变化和Tab变化时加载数据 + useEffect(() => { + const params = buildApiParams(); + + // 如果没有必要的参数，不发送请求 + if (!params) { + console.log('缺少必要的日期参数，不加载环卫人员区域数据'); + return; + } + + // 参数签名，用于比较参数是否有实际变化 + const paramsSignature = JSON.stringify(params); + + // 检查参数是否真正变化，防止重复调用 + if (paramsSignature === prevApiParamsRef.current) { + console.log('环卫人员区域参数未变化，跳过重复加载'); + return; + } + setSearchParams(params); + // 更新上一次参数签名 + prevApiParamsRef.current = paramsSignature; + }, [mapState, currentTab, buildApiParams]); + const chartRef = useRef(null); const chartInstance = useRef(null); - + const { data: infoData } = useRequest( + () => + services.DataBase.getSjdzInfoData({ + typeCode: 'zzcc-shlj-czzl', + params: { ...searchParams }, + }).then((res) => { + if (res.code === 200) { + return res?.data?.data?.records?.[0]; + } + throw new Error('获取数据失败'); + }), + { + refreshDeps: [searchParams], + manual: !searchParams?.startTime, + }, + ); useEffect(() => { if (chartRef.current) { // Initialize the chart chartInstance.current = echarts.init(chartRef.current); - + // Chart options const option = { color: ['#3BFFA0', '#FFD055'], @@ -58,28 +219,28 @@ const OverallSituation: React.FC = () => { radius: ['70%', '90%'], avoidLabelOverlap: false, label: { - show: false + show: false, }, emphasis: { label: { - show: false - } + show: false, + }, }, labelLine: { - show: false + show: false, }, data: [ - { value: data.landfill.value, name: '填埋量' }, - { value: data.incineration.value, name: '焚烧量' } - ] - } - ] + { value: infoData?.tml, name: '填埋量' }, + { value: infoData?.fsl, name: '焚烧量' }, + ], + }, + ], }; - + // Set options and render chart chartInstance.current.setOption(option); } - + // Cleanup function return () => { if (chartInstance.current) { @@ -87,7 +248,7 @@ const OverallSituation: React.FC = () => { chartInstance.current = null; } }; - }, []); + }, [infoData]); // Handle window resize useEffect(() => { @@ -105,9 +266,7 @@ const OverallSituation: React.FC = () => { return (
- +
@@ -117,12 +276,12 @@ const OverallSituation: React.FC = () => { { fontFamily: '微软雅黑', fontSize: 16, fontWeight: 400, - lineHeight: '21px' + lineHeight: '21px', }} decimals={2} /> { fontFamily: '微软雅黑', fontSize: 16, fontWeight: 400, - lineHeight: '21px' + lineHeight: '21px', }} - decimals={2} + decimals={1} />
- +
- +
- +
{/* 焚烧量 */} @@ -169,12 +328,12 @@ const OverallSituation: React.FC = () => { { fontFamily: '微软雅黑', fontSize: 16, fontWeight: 400, - lineHeight: '21px' + lineHeight: '21px', }} decimals={2} /> { fontFamily: '微软雅黑', fontSize: 16, fontWeight: 400, - lineHeight: '21px' + lineHeight: '21px', }} - decimals={2} + decimals={1} />
@@ -212,4 +371,4 @@ const OverallSituation: React.FC = () => { ); }; -export default OverallSituation; \ No newline at end of file +export default OverallSituation; diff --git a/src/pages/Home_v_2504/components/SubPages/DomesticWaste/components/LeftContent/components/PowerPlantDisposal/index.tsx b/src/pages/Home_v_2504/components/SubPages/DomesticWaste/components/LeftContent/components/PowerPlantDisposal/index.tsx index a0c5a9b05650fc91738ae2bc2d41de1da30f2491..95f7da31e4d22ebf8b443b647da938df84ba23ff 100644 --- a/src/pages/Home_v_2504/components/SubPages/DomesticWaste/components/LeftContent/components/PowerPlantDisposal/index.tsx +++ b/src/pages/Home_v_2504/components/SubPages/DomesticWaste/components/LeftContent/components/PowerPlantDisposal/index.tsx @@ -1,8 +1,24 @@ -import React from 'react'; -import AreaBarList, { AreaBarItem } from '@/components/V2504/AreaBarList'; -import styles from './index.less'; -import ModuleTitleWithTabs from '@/pages/Home_v_2504/components/common/ModuleTitleWithTabs'; +import AreaBarList from '@/components/V2504/AreaBarList'; import { useGlobalModalServices } from '@/pages/GlobalModalServices/provider'; +import ModuleTitleWithTabs from '@/pages/Home_v_2504/components/common/ModuleTitleWithTabs'; +import { + useDataType, + useMapState, +} from '@/pages/Home_v_2504/components/MapStateContext'; +import { AreaType } from '@/pages/Home_v_2504/components/SubPages/LawEnforcementPunishment/components/RightContent/HighFrequencyType'; +import { formatDateTime } from '@/pages/Home_v_2504/hooks/useApiControl'; +import useLatestValue from '@/pages/Home_v_2504/hooks/useLatestValue'; +import services from '@/services'; +import { convertUnits } from '@/utils/ui'; +import { useRequest } from 'ahooks'; +import React, { + useCallback, + useEffect, + useMemo, + useRef, + useState, +} from 'react'; +import styles from './index.less'; interface PowerPlantItem { name: string; @@ -11,42 +27,221 @@ interface PowerPlantItem { deviceId?: string; } -const PowerPlantDisposal: React.FC = () => { +const PowerPlantDisposal: React.FC = ({ + dataTypeKey = '生活垃圾', + dateType, +}: { + dataTypeKey?: string; + dateType?: string; +}) => { const { dispatch } = useGlobalModalServices(); - // Mock data for the environmental power plants - const mockData: PowerPlantItem[] = [ - { name: 'XXXXXXXXXX发电厂', percentage: 75.82, count: 7582, deviceId: '867387060270652' }, - { name: 'XXXXXXXXXX发电厂', percentage: 75.82, count: 7582, deviceId: '867387060270653' }, - { name: 'XXXXXXXXXX发电厂', percentage: 75.82, count: 7582, deviceId: '867387060270654' }, - { name: 'XXXXXXXXXX发电厂', percentage: 75.82, count: 7582, deviceId: '867387060270655' }, - { name: 'XXXXXXXXXX发电厂', percentage: 75.82, count: 7582, deviceId: '867387060270656' }, - { name: 'XXXXXXXXXX发电厂', percentage: 75.82, count: 7582, deviceId: '867387060270657' }, - { name: 'XXXXXXXXXX发电厂', percentage: 75.82, count: 7582, deviceId: '867387060270658' }, - { name: 'XXXXXXXXXX发电厂', percentage: 75.82, count: 7582, deviceId: '867387060270659' }, - { name: 'XXXXXXXXXX发电厂', percentage: 75.82, count: 7582, deviceId: '867387060270660' }, - { name: 'XXXXXXXXXX发电厂', percentage: 75.82, count: 7582, deviceId: '867387060270661' }, - { name: 'XXXXXXXXXX发电厂', percentage: 75.82, count: 7582, deviceId: '867387060270662' }, - { name: 'XXXXXXXXXX发电厂', percentage: 75.82, count: 7582, deviceId: '867387060270663' }, - { name: 'XXXXXXXXXX发电厂', percentage: 75.82, count: 7582, deviceId: '867387060270661' }, - { name: 'XXXXXXXXXX发电厂', percentage: 75.82, count: 7582, deviceId: '867387060270662' }, - { name: 'XXXXXXXXXX发电厂', percentage: 75.82, count: 7582, deviceId: '867387060270663' }, - ]; + // 地图状态 + const { mapState } = useMapState(); + const mapStateRef = useLatestValue(mapState); + + // 当前选中的区域类型 + const [currentTab, setCurrentTab] = useState('all'); + const currentTabRef = useLatestValue(currentTab); + const [searchParams, setSearchParams] = useState({ startTime: undefined }); + + // 转换日期类型为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 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 ''; + }; + + // 构建API请求参数 + const buildApiParams = useCallback(() => { + const currentMapState = mapStateRef.current; + + // 如果没有必要的时间参数，返回null表示不应该发起请求 + if ( + !currentMapState.leftPanelTime?.startTime || + !currentMapState.leftPanelTime?.endTime + ) { + return null; + } + + // 使用当前时间类型，如果不存在则使用props或默认值 + const effectiveType = + currentMapState.leftPanelTime.type || dateType || 'month'; + + // 基础参数对象 + const params: any = { + type: translateDateType(effectiveType), + }; + // 获取区域编码列表 + const districtCodeList = getRegionCodes( + currentTabRef.current, + currentMapState.regionCode, + ); + if (districtCodeList) { + params.districtCodeList = districtCodeList; + } + params.startTime = formatDateTime(currentMapState.leftPanelTime.startTime); + params.endTime = formatDateTime( + currentMapState.leftPanelTime.endTime, + true, + ); + + // 处理区域参数 + if (currentMapState.regionCode === '5101') { + // 成都，这两个参数就不传 + params.districtCode = undefined; + params.streetCode = undefined; + } else if (currentMapState.regionCode.length === 6) { + // 区县级别 + params.districtCode = currentMapState.regionCode; + } else if (currentMapState.regionCode.length === 9) { + // 街道级别 + params.districtCode = currentMapState.regionCode.substring(0, 6); + params.streetCode = currentMapState.regionCode; + } + + // 使用传入的dataTypeKey获取对应的subTypeCode + params.subTypeCode = useDataType(dataTypeKey); + + return params; + }, [mapStateRef, currentTabRef, dateType, translateDateType, dataTypeKey]); + + // 跟踪上一次的API参数，避免重复调用 + const prevApiParamsRef = useRef(''); + + // 在地图状态变化和Tab变化时加载数据 + useEffect(() => { + const params = buildApiParams(); + + // 如果没有必要的参数，不发送请求 + if (!params) { + console.log('缺少必要的日期参数，不加载环卫人员区域数据'); + return; + } + + // 参数签名，用于比较参数是否有实际变化 + const paramsSignature = JSON.stringify(params); + + // 检查参数是否真正变化，防止重复调用 + if (paramsSignature === prevApiParamsRef.current) { + console.log('环卫人员区域参数未变化，跳过重复加载'); + return; + } + setSearchParams(params); + // 更新上一次参数签名 + prevApiParamsRef.current = paramsSignature; + }, [mapState, currentTab, buildApiParams]); + + //查询详情 + const { runAsync: getDetails } = useRequest( + services.DataBase.getSjdzInfoData, + { manual: true }, + ); + const { data: burnData } = useRequest( + () => + services.DataBase.getSjdzInfoData({ + typeCode: 'zzcc-shlj-gfscczl', + params: { + ...searchParams, + }, + }).then((res) => { + if (res.code === 200) { + return res?.data?.data?.records; + } + throw new Error('获取数据失败'); + }), + { + refreshDeps: [searchParams], + manual: !searchParams?.startTime, + }, + ); + + const { data: infoData } = useRequest( + () => + services.DataBase.getSjdzInfoData({ + typeCode: 'zzcc-shlj-czzl', + params: { ...searchParams }, + }).then((res) => { + if (res.code === 200) { + return res?.data?.data?.records?.[0]; + } + throw new Error('获取数据失败'); + }), + { + refreshDeps: [searchParams], + manual: !searchParams?.startTime, + }, + ); + const data = useMemo(() => { + return burnData?.map((item: any) => { + return { + name: item?.name, + count: item?.czl, + percentage: + (Number(convertUnits(item?.czl)?.num) / Number(infoData?.fsl)) * 100, + id: '1675773849207488514', + }; + }); + }, [burnData, infoData]); return (
- +
- { - dispatch.push('RubbishFacilitiesDetails') + unit="吨" + onClick={(item: any) => { + console.log(item); + + dispatch.push('RubbishFacilitiesDetails', { + props: { + id: item.id, + name: item.name, + searchParams + }, + }); }} />
@@ -54,4 +249,4 @@ const PowerPlantDisposal: React.FC = () => { ); }; -export default PowerPlantDisposal; \ No newline at end of file +export default PowerPlantDisposal;