|
@@ -1,19 +1,38 @@
|
|
import PageContent from '@/components/PageContent';
|
|
import PageContent from '@/components/PageContent';
|
|
import TabsContent from '@/components/TabsContent';
|
|
import TabsContent from '@/components/TabsContent';
|
|
-import { queryDeviceList } from '@/services/device';
|
|
|
|
-import { useParams, useRequest } from '@umijs/max';
|
|
|
|
-import { Button, Collapse, List, Space } from 'antd';
|
|
|
|
-import { useMemo } from 'react';
|
|
|
|
|
|
+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 img = require('@/assets/deviceManager/device01.png');
|
|
const chartIcon = require('@/assets/deviceManager/chartIcon.png');
|
|
const chartIcon = require('@/assets/deviceManager/chartIcon.png');
|
|
const DeviceManager = () => {
|
|
const DeviceManager = () => {
|
|
const { projectId } = useParams();
|
|
const { projectId } = useParams();
|
|
- const { data, run, loading } = useRequest((data) => queryDeviceList(data), {
|
|
|
|
- defaultParams: [projectId],
|
|
|
|
|
|
+ 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) => {
|
|
const onChange = (tab) => {
|
|
- console.log(tab);
|
|
|
|
|
|
+ if (tab == '2') {
|
|
|
|
+ run();
|
|
|
|
+ }
|
|
};
|
|
};
|
|
return (
|
|
return (
|
|
<PageContent style={{ backgroundColor: 'gray' }}>
|
|
<PageContent style={{ backgroundColor: 'gray' }}>
|
|
@@ -24,154 +43,296 @@ const DeviceManager = () => {
|
|
{
|
|
{
|
|
label: `设备管理`,
|
|
label: `设备管理`,
|
|
key: '1',
|
|
key: '1',
|
|
- children: <Device data={data} loading={loading} />,
|
|
|
|
|
|
+ children: <Device projectId={projectId} />,
|
|
},
|
|
},
|
|
{
|
|
{
|
|
label: `备品管理`,
|
|
label: `备品管理`,
|
|
key: '2',
|
|
key: '2',
|
|
- children: <SparePart />,
|
|
|
|
|
|
+ children: (
|
|
|
|
+ <SparePart data={data} loading={loading} projectId={projectId} />
|
|
|
|
+ ),
|
|
},
|
|
},
|
|
]}
|
|
]}
|
|
/>
|
|
/>
|
|
</PageContent>
|
|
</PageContent>
|
|
);
|
|
);
|
|
};
|
|
};
|
|
-const Device = ({ data = [] }) => {
|
|
|
|
- //处理数据
|
|
|
|
- const dataSource = useMemo(() => {
|
|
|
|
- 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 };
|
|
|
|
- }, [data]);
|
|
|
|
- const onChange = (key) => {
|
|
|
|
- console.log(key);
|
|
|
|
|
|
+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 (
|
|
return (
|
|
- <div style={{ width: '100%' }}>
|
|
|
|
- <div
|
|
|
|
- style={{
|
|
|
|
- display: 'flex',
|
|
|
|
- borderRadius: '10px',
|
|
|
|
- backgroundColor: 'white',
|
|
|
|
- justifyContent: 'space-around',
|
|
|
|
- }}
|
|
|
|
- >
|
|
|
|
- <img style={{ width: '30%' }} src={img} />
|
|
|
|
|
|
+ <Space direction="vertical" className={styles.sparePart}>
|
|
|
|
+ <div className={`card-box ${styles.titleContent}`}>
|
|
|
|
+ <img className={styles.img} src={img} />
|
|
<div>
|
|
<div>
|
|
- <div>{dataSource?.total}</div>
|
|
|
|
|
|
+ <div className={styles.num}>{allData?.total}</div>
|
|
<div>设备总数</div>
|
|
<div>设备总数</div>
|
|
</div>
|
|
</div>
|
|
- <div>
|
|
|
|
- <div
|
|
|
|
- style={{
|
|
|
|
- display: 'flex',
|
|
|
|
- }}
|
|
|
|
- >
|
|
|
|
- <div
|
|
|
|
- style={{
|
|
|
|
- width: '20px',
|
|
|
|
- height: '20px',
|
|
|
|
- backgroundColor: 'green',
|
|
|
|
- borderRadius: '10px',
|
|
|
|
- }}
|
|
|
|
- />
|
|
|
|
- <div>运行</div>
|
|
|
|
- <div>137</div>
|
|
|
|
- </div>
|
|
|
|
- <div
|
|
|
|
- style={{
|
|
|
|
- display: 'flex',
|
|
|
|
- }}
|
|
|
|
- >
|
|
|
|
- <div
|
|
|
|
- style={{
|
|
|
|
- width: '20px',
|
|
|
|
- height: '20px',
|
|
|
|
- backgroundColor: 'green',
|
|
|
|
- borderRadius: '10px',
|
|
|
|
- }}
|
|
|
|
- />
|
|
|
|
- <div>运行</div>
|
|
|
|
- <div>137</div>
|
|
|
|
- </div>
|
|
|
|
- <div
|
|
|
|
- style={{
|
|
|
|
- display: 'flex',
|
|
|
|
- }}
|
|
|
|
- >
|
|
|
|
- <div
|
|
|
|
- style={{
|
|
|
|
- width: '20px',
|
|
|
|
- height: '20px',
|
|
|
|
- backgroundColor: 'green',
|
|
|
|
- borderRadius: '10px',
|
|
|
|
- }}
|
|
|
|
- />
|
|
|
|
- <div>运行</div>
|
|
|
|
- <div>137</div>
|
|
|
|
- </div>
|
|
|
|
- </div>
|
|
|
|
</div>
|
|
</div>
|
|
<Space>
|
|
<Space>
|
|
- <Button shape="round">全部</Button>
|
|
|
|
- <Button shape="round">维修</Button>
|
|
|
|
- <Button shape="round">保养</Button>
|
|
|
|
|
|
+ <Button shape="round" onClick={() => handleBtnClick(0)}>
|
|
|
|
+ 全部
|
|
|
|
+ </Button>
|
|
|
|
+ <Button shape="round" onClick={() => handleBtnClick(1)}>
|
|
|
|
+ 维修
|
|
|
|
+ </Button>
|
|
|
|
+ <Button shape="round" onClick={() => handleBtnClick(2)}>
|
|
|
|
+ 计划保养
|
|
|
|
+ </Button>
|
|
</Space>
|
|
</Space>
|
|
- <Collapse
|
|
|
|
- defaultActiveKey={['1']}
|
|
|
|
- bordered={false}
|
|
|
|
- // expandIcon={() => <div> 个</div>}
|
|
|
|
- onChange={onChange}
|
|
|
|
- items={dataSource?.items}
|
|
|
|
- />
|
|
|
|
- </div>
|
|
|
|
|
|
+ {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 = () => {
|
|
|
|
|
|
+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 (
|
|
return (
|
|
- <div>
|
|
|
|
- <div
|
|
|
|
- style={{
|
|
|
|
- display: 'flex',
|
|
|
|
- borderRadius: '10px',
|
|
|
|
- backgroundColor: 'white',
|
|
|
|
- justifyContent: 'space-around',
|
|
|
|
- }}
|
|
|
|
- >
|
|
|
|
- <img style={{ width: '30%' }} src={img} />
|
|
|
|
|
|
+ <Space direction="vertical" className={styles.sparePart}>
|
|
|
|
+ <div className={`card-box ${styles.titleContent}`}>
|
|
|
|
+ <img className={styles.img} src={img} />
|
|
<div>
|
|
<div>
|
|
- <div>410</div>
|
|
|
|
|
|
+ <div className={styles.num}>{data?.on_amount || 0}</div>
|
|
<div>在库数量(个)</div>
|
|
<div>在库数量(个)</div>
|
|
</div>
|
|
</div>
|
|
- <img style={{ position: 'absolute', right: '20px' }} src={chartIcon} />
|
|
|
|
|
|
+ <img className={styles.rightIcon} src={chartIcon} />
|
|
</div>
|
|
</div>
|
|
- </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>
|
|
);
|
|
);
|
|
};
|
|
};
|
|
|
|
|