gt_client_pad/src/pages/DeviceManager/index.js

import PageContent from '@/components/PageContent';
import TabsContent from '@/components/TabsContent';
import { queryMainChartList } from '@/services/StorageManagement';
import {
  queryDeviceList,
  queryMaintainRecord,
  queryRepairRecord,
} from '@/services/device';
import { RightOutlined } from '@ant-design/icons';
import { useNavigate, useParams, useRequest } from '@umijs/max';
import { Button, Collapse, List, Space, Table } from 'antd';
import dayjs from 'dayjs';
import { useMemo, useState } from 'react';
import styles from './index.less';
const img = require('@/assets/deviceManager/device01.png');
const chartIcon = require('@/assets/deviceManager/chartIcon.png');
const DeviceManager = () => {
  const { projectId } = useParams();
  const [type, setType] = useState(0); //0 全部  1维修  2保养
  const year = dayjs().format('YYYY');
  const params = {
    project_id: Number(projectId),
    month: 0,
    year: Number(year),
  };

  //请求备品列表
  const { data, run, loading } = useRequest(() => queryMainChartList(params), {
    manual: true,
  });

  const onChange = (tab) => {
    if (tab == '2') {
      run();
    }
  };
  return (
    <PageContent style={{ backgroundColor: 'gray' }}>
      <TabsContent
        defaultActiveKey="1"
        onChange={onChange}
        items={[
          {
            label: `设备管理`,
            key: '1',
            children: <Device projectId={projectId} />,
          },
          {
            label: `备品管理`,
            key: '2',
            children: (
              <SparePart data={data} loading={loading} projectId={projectId} />
            ),
          },
        ]}
      />
    </PageContent>
  );
};
const Device = ({ projectId }) => {
  const [type, setType] = useState(0); //0 全部  1维修  2保养

  const columnsRepair = [
    {
      title: '设备位号',
      dataIndex: 'DeviceCode',
      key: 'DeviceCode',
      align: 'center',
    },
    {
      title: '设备名称',
      dataIndex: 'DeviceName',
      key: 'DeviceName',
      align: 'center',
    },
    {
      title: '维修时间',
      dataIndex: 'RepairTime',
      key: 'RepairTime',
      align: 'center',
      render: (text) => {
        return text ? dayjs(text).format('YYYY-MM-DD HH:mm') : null;
      },
    },
    {
      title: '维修状态',
      dataIndex: 'AcceptanceStatus',
      render: (text) => {
        switch (text) {
          case 0:
            return '维修中';
          case 1:
            return '已提交';
          case 2:
            return '已维修';
          default:
            return '';
        }
      },
    },
  ];

  const columns = [
    {
      title: '设备位号',
      dataIndex: 'DeviceCode',
    },
    {
      title: '设备名称',
      dataIndex: 'DeviceName',
    },
    {
      title: '保养日期',
      dataIndex: 'MaintainTime',
      render: (text) => {
        return text ? dayjs(text).format('YYYY-MM-DD HH:mm') : null;
      },
    },
    {
      title: '保养人',
      dataIndex: 'Operators',
      width: 300,
      render: (text) => {
        let arr = [];
        if (text && text.length > 0) {
          text.map((item) => {
            if (item && item.Operator && item.Operator.CName) {
              arr.push(item.Operator.CName);
            }
          });
        }
        return arr && arr.join(',');
      },
    },
  ];

  //请求 全部设备列表
  const {
    data: allData,
    run: runDevice,
    loading: loadingDevice,
  } = useRequest(queryDeviceList, {
    defaultParams: [projectId],
    formatResult: (res) => {
      const data = res.data;
      const total = data?.reduce((total, item) => item.Count, 0);
      const items = data?.map((item, idx) => {
        const itemLen = item?.List?.length;
        return {
          key: idx,
          label: (
            <div style={{ display: 'flex', justifyContent: 'space-between' }}>
              <span>{item.Type}</span>
              <span>{itemLen}个</span>
            </div>
          ),
          children: (
            <div style={{ position: 'relative' }}>
              <List
                header={null}
                footer={null}
                dataSource={item.List}
                renderItem={(cur) => (
                  <List.Item style={{ justifyContent: 'left' }}>
                    <span style={{ width: '30%' }}> {cur.Code} </span>
                    <span> {cur.Name} </span>
                  </List.Item>
                )}
              />
            </div>
          ),
        };
      });
      return { total, items };
    },
  });

  //请求维修中设备列表queryRepairRecord
  const {
    data: repairData,
    run: runRepair,
    loading: repairLoading,
  } = useRequest(
    () =>
      queryRepairRecord({
        // acceptanceStatus: 0,
        pageSize: 9999,
        recordId: Number(projectId),
      }),
    {
      manual: true,
    },
  );

  //请求保养记录
  const {
    data: maintainData,
    run: runMaintain,
    loading: maintaiLoading,
  } = useRequest(
    () =>
      queryMaintainRecord({
        pageSize: 9999,
        recordId: Number(projectId),
      }),
    {
      manual: true,
    },
  );

  const handleBtnClick = (type) => {
    setType(type);
    switch (type) {
      case 0:
        runDevice(projectId);
        break;
      case 1:
        runRepair();
        break;
      case 2:
        runMaintain();
        break;
    }
  };

  const onChange = () => {};
  return (
    <Space direction="vertical" className={styles.sparePart}>
      <div className={`card-box ${styles.titleContent}`}>
        <img className={styles.img} src={img} />
        <div>
          <div className={styles.num}>{allData?.total}</div>
          <div>设备总数</div>
        </div>
      </div>
      <Space>
        <Button shape="round" onClick={() => handleBtnClick(0)}>
          全部
        </Button>
        <Button shape="round" onClick={() => handleBtnClick(1)}>
          维修
        </Button>
        <Button shape="round" onClick={() => handleBtnClick(2)}>
          计划保养
        </Button>
      </Space>
      {type == 0 && (
        <Collapse
          defaultActiveKey={['1']}
          bordered={false}
          onChange={onChange}
          items={allData?.items}
        />
      )}
      {type == 1 && (
        <Table
          loading={repairLoading}
          style={{ marginTop: '10px' }}
          dataSource={repairData?.filter((item) => item.DeviceCode)}
          columns={columnsRepair}
          pagination={false}
        />
      )}
      {type == 2 && (
        <Table
          loading={repairLoading}
          style={{ marginTop: '10px' }}
          dataSource={repairData?.filter((item) => item.DeviceCode)}
          columns={columns}
          pagination={false}
        />
      )}
    </Space>
  );
};
const SparePart = ({ data, loading, projectId }) => {
  const navigate = useNavigate();
  const PageType = {
    in: 0, //入库管理
    out: 1, //出库管理
    scrap: 2, //报废处置
    existing: 3, //基础库存
  };

  const changePage = (type) => {
    navigate(`/device/detail/${projectId}/${type}`);
  };

  const list = useMemo(() => {
    const result = [
      {
        title: '入库数量',
        type: PageType.in,
        num: data?.in_amount || 0,
      },
      {
        title: '出库数量',
        type: PageType.out,
        num: data?.out_amount || 0,
      },
      {
        title: '报废数量',
        type: PageType.scrap,
        num: data?.scrap_amount || 0,
      },
      {
        title: '报警数量',
        type: PageType.existing,
        num: data?.warning_stat || 0,
      },
    ];
    return result;
  }, [data]);
  return (
    <Space direction="vertical" className={styles.sparePart}>
      <div className={`card-box ${styles.titleContent}`}>
        <img className={styles.img} src={img} />
        <div>
          <div className={styles.num}>{data?.on_amount || 0}</div>
          <div>在库数量（个）</div>
        </div>
        <img className={styles.rightIcon} src={chartIcon} />
      </div>
      {list.map((item) => (
        <div className="card-box" onClick={() => changePage(item.type)}>
          <div className={styles.cardItem}>
            <span>{item.title}</span>
            <Space>
              <span>{item.num}个</span>
              <RightOutlined />
            </Space>
          </div>
        </div>
      ))}
    </Space>
  );
};

export default DeviceManager;