人日统计分析页面

src/components/charts/BarChartModule.js

@@ -100,14 +100,14 @@ const defaultOption = {
       show: false,
     },
     axisLabel: {
-      color: '#fff',
+      color: '#000',
     },
   },
   legend: {
-    icon: 'circle',
-    right: '20%',
+    // icon: 'circle',
+    left: '20%',
     textStyle: {
-      color: '#fff',
+      color: '#000',
     },
   },
   series: [
@@ -118,7 +118,7 @@ const defaultOption = {
       label: {
         show: true,
         position: 'top',
-        color: '#fff',
+        color: '#000',
       },
       barGap: '0',
       barMaxWidth: '10%',
@@ -130,7 +130,7 @@ const defaultOption = {
       label: {
         show: true,
         position: 'top',
-        color: '#fff',
+        color: '#000',
       },
       barGap: '0',
       barMaxWidth: '10%',

src/components/charts/PieChartModule.js

@@ -68,8 +68,12 @@ const defaultOption = {
     trigger: 'item',
     formatter: '{b} : {d}% ({c})',
   },
-  textStyle: {
-    color: '#fff',
+  // textStyle: {
+  //   color: '#fff',
+  // },
+  legend: {
+    bottom: 10,
+    left: 'center',
   },
   series: [
     {

src/pages/PurchaseAdmin/PurchaseList/Approval/Statistic.js

@@ -1,21 +1,57 @@
-import { useEffect, useRef } from 'react';
+import { useEffect, useMemo, useRef } from 'react';
 import styles from './index.less';
 import echarts from 'echarts';
 import BarChartModule from '@/components/charts/BarChartModule';
 import { Radio } from 'antd';
-const Statistic = () => {
+import { useRequest } from 'ahooks';
+import { workloadDepProjectChart, workloadDepProjectTypeChart } from '@/services/record';
+import PieChartModule from '@/components/charts/PieChartModule';
+import { STATUS } from './List';
+import { connect } from 'dva';
+const Statistic = props => {
+  const { typeList, dispatch } = props;
+  const { data, loading } = useRequest(workloadDepProjectChart);
+  const { data: typeData, run: runTypeData, loading: typeLoading } = useRequest(
+    workloadDepProjectTypeChart
+  ); //1  月 2 季度 3 年
+  useEffect(() => {
+    dispatch({
+      type: 'approval/queryType',
+    });
+  }, []);
+  const pieData = useMemo(() => {
+    return data?.status_chart?.map(item => {
+      const name = STATUS.find(cur => cur.value == item.status)?.label || '';
+      return { value: item.num, name };
+    });
+  }, [data]);
+
+  const barData = useMemo(() => {
+    if (!typeData || typeData?.length == 0) return;
+    const newData = {};
+    newData.xData = typeData.map(item => item.create_time);
+    const types = [...new Set(typeData.map(item => item.type))];
+    newData.dataList = types.map(type => {
+      const name = typeList?.find(cur => cur.id == type)?.name;
+      const data = typeData.filter(item => item.type == type);
+      return { name, data: data?.map(item => item.num) };
+    });
+    return newData;
+  }, [typeData]);
+  console.log('------------piedata -----', pieData, barData);
+
   const options = [
     {
       label: '月',
-      value: 0,
+      value: 1,
     },
     {
       label: '季度',
-      value: 1,
+      value: 2,
     },
     {
       label: '年',
-      value: 2,
+      value: 3,
     },
   ];
   return (
@@ -24,16 +60,20 @@ const Statistic = () => {
         <div style={{ fontSize: '22px' }}>项目统计</div>
         <div style={{ display: 'flex', width: '100%', justifyContent: 'space-around' }}>
           <div style={{ textAlign: 'center' }}>
-            <div style={{ color: '#f5a41f', fontSize: '32px' }}>110</div>
-            <div>大部分看开点</div>
+            <div style={{ color: '#f5a41f', fontSize: '32px' }}>{data?.total}</div>
+            <div>项目总数</div>
           </div>
           <div style={{ textAlign: 'center' }}>
-            <div style={{ color: '#f5a41f', fontSize: '32px' }}>110</div>
-            <div>大部分看开点</div>
+            <div style={{ color: '#f5a41f', fontSize: '32px' }}>{data?.pass}</div>
+            <div>审核通过项目数</div>
           </div>
           <div style={{ textAlign: 'center' }}>
-            <div style={{ color: '#f5a41f', fontSize: '32px' }}>110</div>
-            <div>大部分看开点</div>
+            <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>
       </div>
@@ -41,7 +81,7 @@ const Statistic = () => {
         <div className={styles.boxCon} style={{ width: '49.2%' }}>
           <div style={{ fontSize: '22px' }}>项目状态统计</div>
           <div style={{ height: '300px' }}>
-            <BarChartModule />
+            {data?.status_chart?.length > 0 && <PieChartModule data={pieData} />}
           </div>
         </div>
         <div className={styles.boxCon} style={{ width: '49.2%', position: 'relative' }}>
@@ -49,18 +89,18 @@ const Statistic = () => {
           <div style={{ position: 'absolute', top: '16px', right: '20px' }}>
             <Radio.Group
               options={options}
-              onChange={() => {}}
-              value={0}
+              onChange={e => runTypeData({ t: e.target.value })}
+              defaultValue={1}
               optionType="button"
               buttonStyle="solid"
             />
           </div>
-          <div style={{ height: '300px' }}>
-            <BarChartModule />
-          </div>
+          <div style={{ height: '300px' }}>{typeData && <BarChartModule {...barData} />}</div>
         </div>
       </div>
     </div>
   );
 };
-export default Statistic;
+export default connect(({ approval, user, loading }) => ({
+  typeList: approval.typeList,
+}))(Statistic);

src/services/record.js

@@ -24,3 +24,27 @@ export async function approvalLogProjectsList(params) {
   const res = await request(`/api/v2/approval/log-projects/${params.id}?${stringify(params)}`);
   return res?.data;
 }
+
+//统计分析接口
+export async function workloadDepProjectChart() {
+  const res = await request(`/api/v2/workload/dep/project/chart`);
+  // if (res?.data) {
+  //   const data = res?.data;
+  //   data.pieData = data?.status_chart?.map(item => {
+  //     return { value: item.num, name: item.status };
+  //   });
+  //   return data;
+  // }
+  return res?.data;
+}
+//统计分析接口 项目分类统计
+export async function workloadDepProjectTypeChart(params) {
+  const res = await request(`/api/v2/workload/dep/project-type/chart?${stringify(params)}`);
+  // if (res?.data) {
+  //   const newData = res.data;
+  //   newData.xData = res.data.map(item => item.create_time);
+  //   newData.dataList = { name: '项目分类统计', data: res.data.map(item => item.num) };
+  //   return newData;
+  // }
+  return res?.data;
+}