gt_client_pad/src/pages/DeviceManager/storage.js

import BarChartModule from '@/components/ManagementPage/BarChartModule';
import PieChartModule from '@/components/ManagementPage/PieChartModule';
import RadarChartModule from '@/components/ManagementPage/RadarChartModule';
import ModuleTitle from '@/components/ManagementPage/moduleTitle';
import PageContent from '@/components/PageContent';
import PageTitle from '@/components/PageTitle';
import { queryMainChartList } from '@/services/StorageManagement';
import { useParams, useRequest } from '@umijs/max';
import { Empty, Spin } from 'antd';
import dayjs from 'dayjs';
import { useRef } from 'react';
import styles from './index.less';

const StorageOverview = () => {
  const { projectId } = useParams();
  const yearRef = useRef(Number(dayjs().format('YYYY')));
  const monthRef = useRef(0);
  const statistics = [
    {
      title: '在库数量（个）',
      key: 'on_amount',
    },
    {
      title: '入库数量（个）',
      key: 'in_amount',
    },
    {
      title: '出库数量（个）',
      key: 'out_amount',
    },
    {
      title: '报废数量（个）',
      key: 'scrap_amount',
    },
    {
      title: '报警数量（个）',
      key: 'warning_stat',
    },
  ];

  const { data, loading } = useRequest(
    () =>
      queryMainChartList({
        project_id: Number(projectId),
        year: yearRef.current,
        month: monthRef.current,
      }),
    {
      formatResult: (res) => {
        const data = res.data;
        const values =
          data?.scrap?.length > 0
            ? data?.scrap?.map((item) => item.value)
            : [0];
        const radarMax = Math.max(...values);
        return {
          maxKind:
            data?.kind?.length > 0
              ? data?.kind?.sort((a, b) => b.value - a.value)[0].value
              : 1,
          kind: data.kind,
          statistics: statistics.map((item) => {
            return { ...item, value: data[item.key] };
          }),
          barData:
            data?.in?.length > 0 && data?.out?.length > 0
              ? {
                  xData: data.in?.map((cur) => cur.item),
                  dataList: [
                    {
                      name: '入库',
                      data: data.in?.map((cur) => cur.value),
                    },
                    {
                      name: '出库',
                      data: data.out?.map((cur) => cur.value),
                    },
                  ],
                }
              : {},
          pieData: data?.rank?.map((cur) => {
            return { name: cur.item, value: cur.value };
          }),
          radarData:
            data?.scrap?.length > 0
              ? {
                  indicator: data?.scrap?.map((item) => {
                    return { name: item.item, max: radarMax };
                  }),
                  data: [
                    {
                      value: data?.scrap?.map((item) => {
                        return item.value;
                      }),
                    },
                  ],
                }
              : {},
          lineData:
            data?.on?.length > 0 && data.check?.length > 0
              ? {
                  closeTime: true,
                  yName: '数量',
                  xData: data.on?.map((item) => item.item),
                  dataList: [
                    {
                      type: 2,
                      name: '库存',
                      data: data.on?.map((item) => item.value),
                    },
                    {
                      type: 1,
                      name: '盘点',
                      data: data.check?.map((item) => item.value),
                    },
                  ],
                }
              : null,
        };
      },
    },
  );

  return (
    <PageContent closeable={false}>
      <PageTitle children="备品统计" returnable />
      <div className="content-title">
        <div className={styles.main}>
          <Spin spinning={loading}>
            <div className={`card-box ${styles.itemContent}`}>
              <ModuleTitle title="物料种类库存占比" />
              <div style={{ height: '3.3rem' }}>
                {data?.pieData && <PieChartModule data={data.pieData} />}
              </div>
            </div>
            <div className={`card-box ${styles.itemContent}`}>
              <ModuleTitle title="物料库存排名前十统计" />
              <ul
                style={{
                  height: '3.3rem',
                  display: 'flex',
                  flexDirection: 'column',
                }}
              >
                {data?.kind && data.kind.length != 0 ? (
                  data.kind
                    ?.sort((a, b) => b.value - a.value)
                    .map((item) => {
                      return (
                        <li
                          className={styles.li}
                          key={`kind_${item.item}`}
                          style={{ flexGrow: 1 }}
                        >
                          <div
                            style={{
                              width: '0.8rem',
                              textAlign: 'right',
                              fontSize: '0.18rem',
                              whiteSpace: 'nowrap',
                            }}
                          >
                            {item.item}
                          </div>
                          <div
                            className={styles.line}
                            style={{
                              width: `${(70 * item.value) / data?.maxKind}%`,
                            }}
                          />
                          {item.value}
                        </li>
                      );
                    })
                ) : (
                  <Empty />
                )}
              </ul>
            </div>
            <div className={`card-box ${styles.itemContent}`}>
              <ModuleTitle title="物料报废统计" />
              <div style={{ height: '4.4rem' }}>
                {data?.radarData && <RadarChartModule {...data.radarData} />}
              </div>
            </div>
            <div className={`card-box ${styles.itemContent}`}>
              <ModuleTitle title="出入库统计" />
              <div style={{ height: '4rem' }}>
                {data?.barData && <BarChartModule {...data.barData} />}
              </div>
            </div>
          </Spin>
        </div>
      </div>
    </PageContent>
  );
};

export default StorageOverview;