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, Select, Spin } from 'antd';
import moment from 'moment';
import { useRef } from 'react';
import styles from './index.less';
const { Option } = Select;

const StorageOverview = () => {
  const { projectId } = useParams();
  const yearRef = useRef(Number(moment().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 colors = ['#E1943A', '#5BE46D', '#FF976F', '#6589FC', '#9863F9'];

  const topTen = [
    {
      name: '你好',
      value: '100',
    },
    {
      name: '进水阀',
      value: '73',
    },
    {
      name: 'hahah',
      value: '70',
    },
    {
      name: 'hahah',
      value: '65',
    },
    {
      name: 'hahah',
      value: '60',
    },
    {
      name: 'hahah',
      value: '50',
    },
    {
      name: 'hahah',
      value: '45',
    },
    {
      name: 'hahah',
      value: '40',
    },
    {
      name: 'hahah',
      value: '38',
    },
    {
      name: 'hahah',
      value: '33',
    },
  ];

  const props1 = {
    yName: '水量（t）',
    xData: ['00:00', '01:15', '02:30', '03:45', '05:00', '06:15', '07:30'],
    dataList: [
      {
        type: 0,
        name: '进水水量',
        data: [820, 932, 901, 934, 1290, 1330, 1320],
      },
      {
        type: 0,
        name: '进水水量111',
        data: [420, 932, 601, 934, 1990, 1330, 1520],
      },
      {
        type: 1,
        name: '预测出水量',
        data: [720, 832, 601, 834, 1190, 1230, 1220],
      },
      {
        type: 2,
        name: '实际出水量',
        data: [820, 632, 501, 534, 1190, 1130, 1120],
      },
    ],
  };

  const { data, run, loading } = useRequest(
    () =>
      queryMainChartList({
        project_id: Number(projectId),
        year: yearRef.current,
        month: monthRef.current,
      }),
    {
      formatResult: (res) => {
        const data = res.data;
        console.log('--------------------', 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 ItemContent = ({ idx, title, value }) => {
    return (
      <div className={styles.item} style={{ backgroundColor: colors[idx] }}>
        <div className={styles.item_title}>{title}</div>
        <div className={styles.item_num}>{value}</div>
      </div>
    );
  };
  return (
    <PageContent>
      <PageTitle children="备品统计" returnable />
      <div className={styles.main}>
        <Spin spinning={loading}>
          <ModuleTitle title="物料种类库存占比" />
          <div style={{ height: '330px' }}>
            {data?.pieData && <PieChartModule data={data.pieData} />}
          </div>
          <div className={styles.thereItem}>
            <ModuleTitle title="物料库存排名前十统计" />
            <ul
              style={{
                height: '330px',
                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: '80px',
                            textAlign: 'right',
                            fontSize: '18px',
                            whiteSpace: 'nowrap',
                          }}
                        >
                          {item.item}
                        </div>
                        <div
                          className={styles.line}
                          style={{
                            width: `${(70 * item.value) / data?.maxKind}%`,
                          }}
                        ></div>
                        {item.value}
                      </li>
                    );
                  })
              ) : (
                <Empty />
              )}
            </ul>
          </div>
          <div className={styles.thereItem}>
            <ModuleTitle title="物料报废统计" />
            <div style={{ height: '330px' }}>
              {data?.radarData && <RadarChartModule {...data.radarData} />}
            </div>
          </div>
          <div className={styles.twoItem}>
            <ModuleTitle title="出入库统计" />
            <div style={{ height: '330px' }}>
              {data?.barData && <BarChartModule {...data.barData} />}
            </div>
          </div>
        </Spin>
      </div>
    </PageContent>
  );
};

export default StorageOverview;