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 { queryMainChartList } from '@/services/StorageManagement';
import { useNavigate, useRequest } from '@umijs/max';
import { Button, Empty, Spin } from 'antd';
import dayjs from 'dayjs';
import { useRef } from 'react';
import styles from './index.less';

const StorageOverview = ({ projectId }) => {
  const navigate = useNavigate();
  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,
        };
      },
    },
  );

  const goDetail = () => {
    navigate(`/device/spare-part/${projectId}`);
    // 设置默认显示tab为备品管理
    localStorage.deviceTab = '2';
  };

  return (
    <Spin className="content-title" spinning={loading}>
      <div className={`card-box ${styles.tipContent}`}>
        <span>备品报告：当前库存状态良好，暫无需要补充货物。</span>
        <Button type="primary" onClick={goDetail}>
          详情
        </Button>
      </div>
      <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>
  );
};

export default StorageOverview;