62 lines
1.6 KiB
JavaScript
62 lines
1.6 KiB
JavaScript
|
import clsx from 'clsx';
|
||
|
|
import React, { useMemo } from 'react';
|
||
|
|
import { useDispatch, useSelector } from 'react-redux';
|
||
|
|
import { ZhenDataPromise } from '../../../../models/_/adcd';
|
||
|
|
import { DrpRealPromise } from '../../../../models/_/real';
|
||
|
|
import useRefresh from '../../../../utils/useRefresh';
|
||
|
|
import useRequest from '../../../../utils/useRequest';
|
||
|
|
import PanelBox from '../../components/PanelBox';
|
||
|
|
import AreaDrpChart from './chart';
|
||
|
|
|
||
|
|
export default function AreaDrp({ style }) {
|
||
|
|
const t = useRefresh(60 * 1000);
|
||
|
|
const { data: adcdList } = useRequest(ZhenDataPromise.get);
|
||
|
|
const { data: drpList } = useRequest(DrpRealPromise.get, t);
|
||
|
|
const areaDrpTmType = useSelector(s => s.overallview.areaDrpTmType);
|
||
|
|
const dispatch = useDispatch();
|
||
|
|
|
||
|
|
const data = useMemo(() => {
|
||
|
|
if (!adcdList) {
|
||
|
|
return [];
|
||
|
|
}
|
||
|
|
|
||
|
|
const resMap = {};
|
||
|
|
adcdList.forEach(({ ADCD, NAME }) => {
|
||
|
|
resMap[ADCD.substr(0, 9)] = {
|
||
|
|
ADCD,
|
||
|
|
NAME,
|
||
|
|
drp: 0,
|
||
|
|
cnt: 0,
|
||
|
|
av: 0,
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
drpList?.forEach(o => {
|
||
|
|
const adcd = o?.adcd?.substr(0, 9);
|
||
|
|
if (resMap[adcd]) {
|
||
|
|
resMap[adcd].drp += o[areaDrpTmType] || 0;
|
||
|
|
resMap[adcd].cnt += 1;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
const ret = Object.values(resMap);
|
||
|
|
ret.forEach(o => {
|
||
|
|
if (o.cnt) {
|
||
|
|
o.av = parseFloat((o.drp / o.cnt).toFixed(1));
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
return Object.values(resMap);
|
||
|
|
}, [adcdList, drpList, areaDrpTmType]);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<PanelBox
|
||
|
|
style={style}
|
||
|
|
title="供水覆盖率"
|
||
|
|
color="blue"
|
||
|
|
>
|
||
|
|
<AreaDrpChart data={data} />
|
||
|
|
</PanelBox>
|
||
|
|
)
|
||
|
|
}
|