import PageContent from '@/components/PageContent';
import PageTitle from '@/components/PageTitle';
import {
patrolOverview,
patrolOverviewLine,
patrolOverviewPie,
} from '@/services/eqSelfInspection';
import { useParams, useRequest } from '@umijs/max';
import { Spin } from 'antd';
import dayjs from 'dayjs';
import * as echarts from 'echarts';
import { useEffect, useRef } from 'react';
import styles from './index.less';
const defaultTime = {
s_time: dayjs().subtract(7, 'days').format('YYYY-MM-DD'),
e_time: dayjs().format('YYYY-MM-DD'),
};
const Statistics = (props) => {
const { projectId } = useParams();
const lineDomRef = useRef(null);
const LineChartRef = useRef(null);
const pieDomRef = useRef(null);
const pieChartRef = useRef(null);
const renderChart = () => {
if (!LineChartRef.current || !pieChartRef.current) return;
if (!lineData || !pieData) return;
LineChartRef.current.clear();
const lineOptions = getLineOption(
lineData?.time,
lineData?.data,
'系统自测异常统计',
);
// 设置图表配置项
LineChartRef.current.setOption(lineOptions);
pieChartRef.current.clear();
const pieOptions = getPieOption(pieData, '异常类型统计');
// 设置图表配置项
pieChartRef.current.setOption(pieOptions);
// 构建图表的配置项
};
const {
data: lineData,
run,
loading,
} = useRequest(patrolOverviewLine, {
defaultParams: [
{
projectId: Number(projectId),
...defaultTime,
},
],
formatResult(resData) {
let data = [];
let time = [];
resData?.data?.forEach((item) => {
data.push(item.val);
time.push(dayjs(item.key).format('MM-DD'));
});
return { data, time };
},
});
const {
data: pieData,
run: pieRun,
loading: pieLoading,
} = useRequest(patrolOverviewPie, {
defaultParams: [
{
projectId: Number(projectId),
...defaultTime,
},
],
formatResult(resData) {
return resData?.data?.map((item) => {
return { name: item.key, value: item.val };
});
},
});
const { data: overviewData, loading: overviewLoading } = useRequest(
patrolOverview,
{
defaultParams: [
{
projectId: Number(projectId),
},
],
formatResult(resData) {
return [
{ num: resData?.data?.today_check_num, label: '今日自检次数' },
{ num: resData?.data?.today_exception_num, label: '今日异常次数' },
{ num: resData?.data?.all_check_num, label: '累计自检次数' },
{ num: resData?.data?.all_check_day, label: '累计自检天数' },
];
},
},
);
const getChartData = ({ s_time, e_time }) => {
run({ projectId: Number(projectId), s_time, e_time });
pieRun({ projectId: Number(projectId), s_time, e_time });
};
const onRadioChange = (e) => {
console.log(e);
let params = { s_time: defaultTime.s_time, e_time: defaultTime.e_time };
if (e == 'month')
params = {
s_time: dayjs().subtract(1, 'month').format('YYYY-MM-DD'),
e_time: dayjs().format('YYYY-MM-DD'),
};
else if (e == 'year')
params = {
s_time: dayjs().subtract(1, 'year').format('YYYY-MM-DD'),
e_time: dayjs().format('YYYY-MM-DD'),
};
getChartData(params);
};
useEffect(() => {
renderChart();
}, [lineData, pieData]);
useEffect(() => {
LineChartRef.current = echarts.init(lineDomRef.current);
pieChartRef.current = echarts.init(pieDomRef.current);
return () => {
LineChartRef.current.dispose();
pieChartRef.current.dispose();
};
}, []);
return (