import React, { useState, useRef, useEffect } from 'react';
|
import { Descriptions, Button, Skeleton, Badge, Space } from 'antd';
|
import { FormattedMessage, useIntl, useModel } from '@umijs/max';
|
import { createStyles } from 'antd-style';
|
import * as Utils from '../../utils'
|
import Http from '@/utils/http';
|
import BoolValueIcon from '@/components/BoolValueIcon';
|
import ShuttleHandle from './handle';
|
|
const useStyles = createStyles(({ token, css }) => {
|
return {
|
infoBox: {
|
height: '100%',
|
display: 'flex',
|
gap: '0px',
|
},
|
tableInfo: {
|
height: '100%',
|
width: '100%',
|
padding: '0 10px 0 15px',
|
overflow: 'auto',
|
},
|
tableButton: {
|
width: '100%',
|
marginBottom: '10px',
|
fontWeight: 'bold',
|
letterSpacing: '1px',
|
}
|
}
|
})
|
|
const updateEnable = async (deviceNo, enable) => {
|
const resp = await Http.doPost('api/dict/update', { val });
|
if (resp.code === 200) {
|
message.success(intl.formatMessage({ id: 'page.update.success', defaultMessage: '更新成功' }));
|
return true;
|
} else {
|
message.error(resp.msg);
|
return false;
|
}
|
}
|
|
const ShuttleView = (props) => {
|
const intl = useIntl();
|
const { styles } = useStyles();
|
|
const { data } = props;
|
const [loading, setLoading] = React.useState(false);
|
const [childrenDrawer, setChildrenDrawer] = useState(false);
|
const [info, setInfo] = React.useState(null);
|
|
useEffect(() => {
|
setLoading(true);
|
const fetchShuttleInfo = async (shuttleNo) => {
|
const res = await Http.doGet('/api/map/shuttle/info', { shuttleNo: shuttleNo });
|
if (res?.data) {
|
setInfo(res.data);
|
}
|
setLoading(false);
|
}
|
fetchShuttleInfo(data.no);
|
|
const timer = setInterval(() => {
|
fetchShuttleInfo(data.no);
|
}, 1000);
|
return () => {
|
clearInterval(timer);
|
}
|
}, [data]);
|
|
return (
|
<>
|
<div className={styles.infoBox}>
|
{loading ? (
|
<Skeleton active />
|
) : (
|
<div className={styles.tableInfo}>
|
<Descriptions
|
bordered
|
title=''
|
size='middle' // default | middle | small
|
layout="vertical" // horizontal | vertical
|
column={4}
|
items={
|
[
|
{
|
label: intl.formatMessage({ id: 'map.shuttle.no', defaultMessage: '穿梭车编号' }),
|
children: info?.shuttleNo,
|
},
|
{
|
label: intl.formatMessage({ id: 'map.task.no', defaultMessage: '任务号' }),
|
children: info?.taskNo,
|
},
|
{
|
label: intl.formatMessage({ id: 'map.device.status', defaultMessage: '设备状态' }),
|
children: <Badge status="processing" text={info?.status} />,
|
},
|
{
|
label: intl.formatMessage({ id: 'map.shuttle.current.code', defaultMessage: '定位条码' }),
|
children: info?.currentCode,
|
},
|
{
|
label: intl.formatMessage({ id: 'map.loc.no', defaultMessage: '库位号' }),
|
children: info?.currentLocNo,
|
},
|
{
|
label: intl.formatMessage({ id: 'map.pallet.barcode', defaultMessage: '托盘条码' }),
|
children: info?.zpallet,
|
},
|
{
|
label: intl.formatMessage({ id: 'map.origin.loc', defaultMessage: '起始库位' }),
|
children: info?.originLocNo,
|
},
|
{
|
label: intl.formatMessage({ id: 'map.dest.loc', defaultMessage: '目标库位' }),
|
children: info?.destLocNo,
|
},
|
|
{
|
label: intl.formatMessage({ id: 'map.shuttle.batter.power', defaultMessage: '电池电量' }),
|
children: info?.batteryPower,
|
},
|
{
|
label: intl.formatMessage({ id: 'map.shuttle.batter.voltage', defaultMessage: '电池电压' }),
|
children: info?.batteryVoltage,
|
},
|
{
|
label: intl.formatMessage({ id: 'map.shuttle.batter.temp', defaultMessage: '电池温度' }),
|
children: info?.batteryTemp,
|
},
|
{
|
label: intl.formatMessage({ id: 'map.error', defaultMessage: '异常信号' }),
|
children: info?.errorCode,
|
},
|
{
|
label: intl.formatMessage({ id: 'map.shuttle.has.lift', defaultMessage: '顶升信号' }),
|
children: <BoolValueIcon value={info?.hasLift} />,
|
},
|
{
|
label: intl.formatMessage({ id: 'map.shuttle.has.pallet', defaultMessage: '托盘信号' }),
|
children: <BoolValueIcon value={info?.hasPallet} />,
|
},
|
{
|
label: intl.formatMessage({ id: 'map.shuttle.has.charge', defaultMessage: '充电信号' }),
|
children: <BoolValueIcon value={info?.hasCharge} />,
|
},
|
{
|
label: intl.formatMessage({ id: 'map.pakmk', defaultMessage: '作业标记' }),
|
children: <BoolValueIcon value={info?.pakMk} />,
|
},
|
{
|
label: intl.formatMessage({ id: 'map.is.enable', defaultMessage: '是否启用' }),
|
children: <BoolValueIcon value={info?.enable} />,
|
},
|
{
|
label: intl.formatMessage({ id: 'map.loc.operation', defaultMessage: '库位操作' }),
|
span: 3,
|
children: (
|
<>
|
<Button className={styles.tableButton} size='default' type="primary" danger>
|
<FormattedMessage id='map.diable' defaultMessage='禁用' />
|
</Button>
|
<Button className={styles.tableButton} size='default' disabled>
|
<FormattedMessage id='map.enable' defaultMessage='启用' />
|
</Button>
|
<Button
|
className={styles.tableButton}
|
size='default'
|
onClick={() => {
|
setChildrenDrawer(true);
|
}}
|
>
|
<FormattedMessage id='map.handle' defaultMessage='手动操作' />
|
</Button>
|
</>
|
)
|
},
|
]
|
}
|
/>
|
<ShuttleHandle
|
open={childrenDrawer}
|
refCurr={props.refCurr}
|
shuttleNo={data.no}
|
onClose={() => {
|
setChildrenDrawer(false)
|
}}
|
/>
|
</div>
|
)}
|
</div>
|
</>
|
)
|
}
|
|
export default ShuttleView;
|
