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 { Collapse, List, Space, Table } from 'antd';
import dayjs from 'dayjs';
import { useMemo, useState } from 'react';
import styles from './index.less';
const deviceIcon = require('@/assets/deviceManager/deviceIcon.png');
const spareIcon = require('@/assets/deviceManager/spareIcon.png');
const chartIcon = require('@/assets/deviceManager/chartIcon.png');
const DeviceManager = () => {
  const { projectId } = useParams();
  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 tabs>
      <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 [activeCode, setActiveCode] = useState();

  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,
    run: runDevice,
    loading: loadingDevice,
  } = useRequest(queryDeviceList, {
    defaultParams: [projectId],
  });

  const allData = useMemo(() => {
    console.log(activeCode);
    const total = data?.reduce((total, item) => item.Count, 0);
    const items = data?.map((item, idx) => {
      const itemLen = item?.List?.length;
      return {
        key: `${idx + 1}`,
        label: (
          <div className={styles.lineContent}>
            <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
                  className={`${styles.itemText} ${
                    activeCode == cur.Code ? styles.itemTextActive : ''
                  }`}
                  onClick={() => handleItemClick(cur.Code)}
                >
                  <span style={{ marginRight: '166px' }}> {cur.Code} </span>
                  <span> {cur.Name} </span>
                </List.Item>
              )}
            />
          </div>
        ),
      };
    });
    return { total, items };
  }, [data, activeCode]);

  //请求维修中设备列表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 handleItemClick = (code) => {
    console.log(code);
    setActiveCode(code);
  };

  const renderChildlen = (item) => {
    console.log(activeCode);
    return (
      <div style={{ position: 'relative' }}>
        <List
          header={null}
          footer={null}
          dataSource={item.List}
          renderItem={(cur) => (
            <List.Item
              className={`${styles.listText} ${
                activeCode == cur.Code ? styles.lineTextActive : ''
              }`}
              onClick={() => handleItemClick(cur.Code)}
            >
              <span style={{ marginRight: '166px' }}> {cur.Code} </span>
              <span> {cur.Name} </span>
            </List.Item>
          )}
        />
      </div>
    );
  };

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

  const onChange = () => {};
  return (
    <div className={styles.sparePart}>
      <div className={`card-box ${styles.titleContent}`}>
        <img className={styles.img} src={deviceIcon} />
        <div>
          <div className={styles.num}>{allData?.total}</div>
          <div className={styles.text}>设备总数</div>
        </div>
      </div>
      <Space className={styles.btns} size={28}>
        <div
          className={`${styles.btn} ${type == 0 ? styles.active : ''}`}
          onClick={() => handleBtnClick(0)}
        >
          全部
        </div>
        <div
          className={`${styles.btn} ${type == 1 ? styles.active : ''}`}
          onClick={() => handleBtnClick(1)}
        >
          维修
        </div>
        <div
          className={`${styles.btn} ${type == 2 ? styles.active : ''}`}
          onClick={() => handleBtnClick(2)}
        >
          保养
        </div>
      </Space>
      {type == 0 && (
        <Collapse 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={maintaiLoading}
          style={{ marginTop: '10px' }}
          dataSource={maintainData?.filter((item) => item.DeviceCode)}
          columns={columns}
          pagination={false}
        />
      )}
    </div>
  );
};
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" size={16} className={styles.sparePart}>
      <div className={`card-box ${styles.titleContent}`}>
        <img className={styles.img} src={spareIcon} />
        <div>
          <div className={styles.num}>{data?.on_amount || 0}</div>
          <div className={styles.text}>在库数量（个）</div>
        </div>
        <img className={styles.rightIcon} src={chartIcon} />
      </div>
      {list.map((item) => (
        <div
          className={`card-box ${styles.cardItem}`}
          onClick={() => changePage(item.type)}
        >
          <span className={styles.spareText}>{item.title}</span>
          <Space size={30}>
            <span className={styles.spareText}>{item.num}个</span>
            <RightOutlined style={{ fontSize: '28px' }} />
          </Space>
        </div>
      ))}
    </Space>
  );
};

export default DeviceManager;