gt_client_pad/src/pages/DeviceManager/index.js

import PageContent from '@/components/PageContent';
import TabsContent from '@/components/TabsContent';
import {
  queryDeviceList,
  queryMaintainRecord,
  queryRepairRecord,
} from '@/services/device';
import { UnityAction } from '@/utils/utils';
import { useParams, useRequest } from '@umijs/max';
import { Collapse, List, Space, Spin, Table } from 'antd';
import dayjs from 'dayjs';
import { useEffect, useMemo, useState } from 'react';
import styles from './index.less';
import StorageOverview from './storage';

const deviceIcon = require('@/assets/deviceManager/deviceIcon.png');

export const PageType = {
  in: 0, //入库管理
  out: 1, //出库管理
  scrap: 2, //报废处置
  warning: 3, //报警数量
  base: 4, //基础库存
};

const DeviceManager = () => {
  const { projectId } = useParams();
  const [defaultActiveKey, setDefaultActiveKey] = useState(
    localStorage.deviceTab || '1',
  );

  useEffect(() => {
    // 重置默认显示tab
    localStorage.deviceTab = '1';
  }, []);

  const onChange = (tab) => {
    setDefaultActiveKey(tab);
    UnityAction.sendMsg('SparePart');
  };

  return (
    <PageContent tabs>
      <TabsContent
        defaultActiveKey={defaultActiveKey}
        onChange={onChange}
        items={[
          {
            label: `设备管理`,
            key: '1',
            children: <Device projectId={projectId} />,
          },
          {
            label: `备品管理`,
            key: '2',
            children: <StorageOverview projectId={projectId} />, //<SparePart 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(() => {
    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={{ width: '30%', textAlign: 'left' }}>
                    {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({
        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) => {
    UnityAction.sendMsg('deviceCode', code);
    console.log(code);
    setActiveCode(code);
  };

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

  return (
    <div className={`content-tab ${styles.sparePart}`}>
      <Spin spinning={loadingDevice}>
        <div className={styles.top}>
          <div className={styles.left}>
            <img
              className={styles.img}
              src={require('@/assets/air-conditioner.png')}
            />
            <div>
              <div className="value-number">{allData?.total}</div>
              设备总数（个）
            </div>
          </div>
          <div className={styles.right}>
            <div>
              <i className={styles.icon}></i>正常：{allData?.total}
            </div>
            <div>
              <i className={`${styles.icon} ${styles.offline}`}></i>异常：{0}
            </div>
          </div>
        </div>
        <Space className={styles.btns} size={28}>
          <div
            className={`${styles.btn} ${type == 0 ? styles.active : ''}`}
            onClick={() => handleBtnClick(0)}
          >
            <span style={{ lineHeight: '0.6rem' }}>全部</span>
          </div>
          <div
            className={`${styles.btn} ${type == 1 ? styles.active : ''}`}
            onClick={() => handleBtnClick(1)}
          >
            <span style={{ lineHeight: '0.6rem' }}>维修</span>
          </div>
          <div
            className={`${styles.btn} ${type == 2 ? styles.active : ''}`}
            onClick={() => handleBtnClick(2)}
          >
            <span style={{ lineHeight: '0.6rem' }}>保养</span>
          </div>
        </Space>
      </Spin>
      {type == 0 && <Collapse bordered={false} items={allData?.items} />}
      {type == 1 && (
        <Table
          loading={repairLoading}
          style={{ marginTop: '0.1rem' }}
          dataSource={repairData?.filter((item) => item.DeviceCode)}
          columns={columnsRepair}
          pagination={false}
          onRow={(record, index) => ({
            onClick: () => console.log(record),
          })}
        />
      )}
      {type == 2 && (
        <Table
          loading={maintaiLoading}
          style={{ marginTop: '0.1rem' }}
          dataSource={maintainData?.filter((item) => item.DeviceCode)}
          columns={columns}
          pagination={false}
        />
      )}
    </div>
  );
};

export default DeviceManager;