Renxy 1 год назад
Родитель
Сommit
abfb27f4fc

+ 1 - 1
src/components/charts/BarChartModule.js

@@ -34,7 +34,7 @@ const BarChartModule = props => {
     option.xAxis.data = xData;
     option.series = dataList.map((item, idx) => {
       return {
-        ...option.series[idx],
+        ...option.series[0],
         ...item,
       };
     });

+ 39 - 34
src/pages/PurchaseAdmin/PurchaseList/Approval/Statistic.js

@@ -6,7 +6,7 @@ import { Radio } from 'antd';
 import { useRequest } from 'ahooks';
 import { workloadDepProjectChart, workloadDepProjectTypeChart } from '@/services/record';
 import PieChartModule from '@/components/charts/PieChartModule';
-import { STATUS } from './List';
+import { SUB_STATUS } from './List';
 import { connect } from 'dva';
 const Statistic = props => {
   const { typeList, dispatch } = props;
@@ -19,9 +19,31 @@ const Statistic = props => {
       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(() => {
     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 };
     });
   }, [data]);
@@ -38,7 +60,7 @@ const Statistic = props => {
     });
     return newData;
   }, [typeData]);
-  console.log('------------piedata -----', pieData, barData);
+  console.log(barData);
 
   const options = [
     {
@@ -57,43 +79,26 @@ const Statistic = props => {
   return (
     <div className={styles.statistic}>
       <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 style={{ display: 'flex', marginTop: '26px', justifyContent: 'space-between' }}>
+      <div className={styles.bottomCon}>
         <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} />}
           </div>
         </div>
         <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
               options={options}
               onChange={e => runTypeData({ t: e.target.value })}
@@ -102,7 +107,7 @@ const Statistic = props => {
               buttonStyle="solid"
             />
           </div>
-          <div style={{ height: '400px' }}>{typeData && <BarChartModule {...barData} />}</div>
+          <div className={styles.chartCon}>{typeData && <BarChartModule {...barData} />}</div>
         </div>
       </div>
     </div>

+ 30 - 0
src/pages/PurchaseAdmin/PurchaseList/Approval/index.less

@@ -71,5 +71,35 @@
     padding: 10px;
     border-radius: 12px;
     box-shadow: 0px 0px 10px 4px rgba(0, 0, 0, 0.2);
+    .titleCon {
+      display: flex;
+      width: 100%;
+      justify-content: space-around;
+      margin: 20px 0;
+      .item {
+        text-align: center;
+      }
+      .itemNum {
+        color: #f5a41f;
+        font-size: 32px;
+      }
+    }
+  }
+  .titleText {
+    font-size: 22px;
+  }
+  .bottomCon {
+    display: flex;
+    margin-top: 26px;
+    justify-content: space-between;
+  }
+  .pieContent {
+    position: absolute;
+    top: 16px;
+    right: 20px;
+  }
+
+  .chartCon {
+    height: 400px;
   }
 }