|
@@ -6,7 +6,7 @@ import { Radio } from 'antd';
|
|
import { useRequest } from 'ahooks';
|
|
import { useRequest } from 'ahooks';
|
|
import { workloadDepProjectChart, workloadDepProjectTypeChart } from '@/services/record';
|
|
import { workloadDepProjectChart, workloadDepProjectTypeChart } from '@/services/record';
|
|
import PieChartModule from '@/components/charts/PieChartModule';
|
|
import PieChartModule from '@/components/charts/PieChartModule';
|
|
-import { STATUS } from './List';
|
|
|
|
|
|
+import { SUB_STATUS } from './List';
|
|
import { connect } from 'dva';
|
|
import { connect } from 'dva';
|
|
const Statistic = props => {
|
|
const Statistic = props => {
|
|
const { typeList, dispatch } = props;
|
|
const { typeList, dispatch } = props;
|
|
@@ -19,9 +19,31 @@ const Statistic = props => {
|
|
type: 'approval/queryType',
|
|
type: 'approval/queryType',
|
|
});
|
|
});
|
|
}, []);
|
|
}, []);
|
|
|
|
+
|
|
|
|
+ const titleData = useMemo(() => {
|
|
|
|
+ return [
|
|
|
|
+ {
|
|
|
|
+ name: '项目总数',
|
|
|
|
+ count: data?.total,
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ name: '审核通过项目数',
|
|
|
|
+ count: data?.pass,
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ name: '审核中项目数',
|
|
|
|
+ count: data?.audit,
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ name: '本月新增立项项目',
|
|
|
|
+ count: data?.add,
|
|
|
|
+ },
|
|
|
|
+ ];
|
|
|
|
+ }, [data]);
|
|
|
|
+
|
|
const pieData = useMemo(() => {
|
|
const pieData = useMemo(() => {
|
|
return data?.status_chart?.map(item => {
|
|
return data?.status_chart?.map(item => {
|
|
- const name = STATUS.find(cur => cur.value == item.status)?.label || '';
|
|
|
|
|
|
+ const name = SUB_STATUS.find(cur => cur.value == item.status)?.label || '';
|
|
return { value: item.num, name };
|
|
return { value: item.num, name };
|
|
});
|
|
});
|
|
}, [data]);
|
|
}, [data]);
|
|
@@ -38,7 +60,7 @@ const Statistic = props => {
|
|
});
|
|
});
|
|
return newData;
|
|
return newData;
|
|
}, [typeData]);
|
|
}, [typeData]);
|
|
- console.log('------------piedata -----', pieData, barData);
|
|
|
|
|
|
+ console.log(barData);
|
|
|
|
|
|
const options = [
|
|
const options = [
|
|
{
|
|
{
|
|
@@ -57,43 +79,26 @@ const Statistic = props => {
|
|
return (
|
|
return (
|
|
<div className={styles.statistic}>
|
|
<div className={styles.statistic}>
|
|
<div className={styles.boxCon}>
|
|
<div className={styles.boxCon}>
|
|
- <div style={{ fontSize: '22px' }}>项目统计</div>
|
|
|
|
- <div
|
|
|
|
- style={{
|
|
|
|
- display: 'flex',
|
|
|
|
- width: '100%',
|
|
|
|
- justifyContent: 'space-around',
|
|
|
|
- margin: '20px 0',
|
|
|
|
- }}
|
|
|
|
- >
|
|
|
|
- <div style={{ textAlign: 'center' }}>
|
|
|
|
- <div style={{ color: '#f5a41f', fontSize: '32px' }}>{data?.total}</div>
|
|
|
|
- <div>项目总数</div>
|
|
|
|
- </div>
|
|
|
|
- <div style={{ textAlign: 'center' }}>
|
|
|
|
- <div style={{ color: '#f5a41f', fontSize: '32px' }}>{data?.pass}</div>
|
|
|
|
- <div>审核通过项目数</div>
|
|
|
|
- </div>
|
|
|
|
- <div style={{ textAlign: 'center' }}>
|
|
|
|
- <div style={{ color: '#f5a41f', fontSize: '32px' }}>{data?.audit}</div>
|
|
|
|
- <div>审核中项目数</div>
|
|
|
|
- </div>
|
|
|
|
- <div style={{ textAlign: 'center' }}>
|
|
|
|
- <div style={{ color: '#f5a41f', fontSize: '32px' }}>{data?.add}</div>
|
|
|
|
- <div>本月新增立项项目</div>
|
|
|
|
- </div>
|
|
|
|
|
|
+ <div className={styles.titleText}>项目统计</div>
|
|
|
|
+ <div className={styles.titleCon}>
|
|
|
|
+ {titleData.map(item => (
|
|
|
|
+ <div className={styles.item}>
|
|
|
|
+ <div className={styles.itemNum}>{item.count}</div>
|
|
|
|
+ <div>{item.name}</div>
|
|
|
|
+ </div>
|
|
|
|
+ ))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
- <div style={{ display: 'flex', marginTop: '26px', justifyContent: 'space-between' }}>
|
|
|
|
|
|
+ <div className={styles.bottomCon}>
|
|
<div className={styles.boxCon} style={{ width: '49.2%' }}>
|
|
<div className={styles.boxCon} style={{ width: '49.2%' }}>
|
|
- <div style={{ fontSize: '22px' }}>项目状态统计</div>
|
|
|
|
- <div style={{ height: '400px' }}>
|
|
|
|
|
|
+ <div className={styles.titleText}>项目状态统计</div>
|
|
|
|
+ <div className={styles.chartCon}>
|
|
{data?.status_chart?.length > 0 && <PieChartModule data={pieData} />}
|
|
{data?.status_chart?.length > 0 && <PieChartModule data={pieData} />}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className={styles.boxCon} style={{ width: '49.2%', position: 'relative' }}>
|
|
<div className={styles.boxCon} style={{ width: '49.2%', position: 'relative' }}>
|
|
- <div style={{ fontSize: '22px' }}>项目分类统计</div>
|
|
|
|
- <div style={{ position: 'absolute', top: '16px', right: '20px' }}>
|
|
|
|
|
|
+ <div className={styles.titleText}>项目分类统计</div>
|
|
|
|
+ <div className={styles.pieContent}>
|
|
<Radio.Group
|
|
<Radio.Group
|
|
options={options}
|
|
options={options}
|
|
onChange={e => runTypeData({ t: e.target.value })}
|
|
onChange={e => runTypeData({ t: e.target.value })}
|
|
@@ -102,7 +107,7 @@ const Statistic = props => {
|
|
buttonStyle="solid"
|
|
buttonStyle="solid"
|
|
/>
|
|
/>
|
|
</div>
|
|
</div>
|
|
- <div style={{ height: '400px' }}>{typeData && <BarChartModule {...barData} />}</div>
|
|
|
|
|
|
+ <div className={styles.chartCon}>{typeData && <BarChartModule {...barData} />}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|