import React, { useEffect, useRef, useState } from "react";
|
import { getToken } from '@/utils/token-util'
|
import Http from '@/utils/http';
|
import { Badge, Button, Descriptions, Drawer, Input, Card, Select, message } from 'antd';
|
import {
|
PageContainer,
|
} from '@ant-design/pro-components';
|
import './index.less'
|
import { WEBSOCKET_BASE_URL } from '@/config/setting';
|
|
const Main = () => {
|
const [deviceInfos, setDeviceInfos] = useState([]);
|
const [ws, setWs] = useState(null);
|
const [openOpera, setOpenOpera] = useState(false);
|
const [currentData, setCurrentData] = useState(null);
|
const [mapLev, setMapLev] = useState([]);
|
const [targetLoc, setTargetLoc] = useState(1);
|
const [originLoc, setOriginLoc] = useState(null);
|
const [originSite, setOriginSite] = useState(null);
|
const [targetSite, setTargetSite] = useState(null);
|
|
useEffect(() => {
|
connect();
|
|
getMapLev();
|
|
return () => {
|
if (ws) {
|
ws.close();
|
}
|
}
|
}, [])
|
|
useEffect(() => {
|
if (ws) {
|
ws.onopen = function () {
|
console.log("open");
|
|
sendWs(JSON.stringify({
|
"url": "login",
|
"data": {
|
"token": getToken()
|
}
|
}))
|
}
|
|
ws.onmessage = function (e) {
|
const result = JSON.parse(e.data);
|
if (result.url == "login") {
|
setInterval(function () {
|
getDeviceInfo();
|
}, 1000)
|
} else if (result.url == "/lift/status/list") {
|
const data = JSON.parse(result.data);
|
setDeviceInfos(data);
|
}
|
}
|
|
ws.onclose = function (e) {
|
console.log("close");
|
reconnect();
|
}
|
|
ws.onerror = function (e) {
|
console.log(e);
|
}
|
}
|
}, [ws]);
|
|
const connect = () => {
|
var newWs = new WebSocket(WEBSOCKET_BASE_URL + "/ws/lift/websocket");
|
setWs(newWs);
|
}
|
|
const reconnect = () => {
|
setTimeout(() => {
|
console.log('WebSocketClient: Attempting to reconnect...');
|
connect();
|
}, 3000);
|
}
|
|
const sendWs = (message) => {
|
if (ws.readyState == WebSocket.OPEN) {
|
ws.send(message)
|
}
|
}
|
|
const getDeviceInfo = () => {
|
sendWs(JSON.stringify({
|
"url": "/lift/status/list",
|
"data": {}
|
}))
|
}
|
|
const showOpera = (data) => {
|
setOpenOpera(true);
|
setCurrentData(data);
|
};
|
|
const closeOpera = () => {
|
setOpenOpera(false);
|
};
|
|
const getMapLev = async () => {
|
try {
|
const resp = await Http.doPost('api/basLift/getMapLev', {});
|
if (resp.code === 200) {
|
let arr = []
|
let levList = JSON.parse(resp.data);
|
levList.forEach((lev) => {
|
arr.push({
|
value: lev,
|
label: lev
|
})
|
})
|
setMapLev(arr);
|
return true;
|
} else {
|
message.warning(resp.msg);
|
return false;
|
}
|
} catch (error) {
|
message.warning("请求失败");
|
return false;
|
}
|
}
|
|
const targetLocChange = (value) => {
|
setTargetLoc(value)
|
}
|
|
const originLocChange = (e) => {
|
setOriginLoc(e.target.value)
|
}
|
|
const targetSiteChange = (e) => {
|
setTargetSite(e.target.value)
|
}
|
|
const originSiteChange = (e) => {
|
setOriginSite(e.target.value)
|
}
|
|
const liftOperator = async (type) => {
|
try {
|
const resp = await Http.doPost('api/basLift/operator/lift', {
|
liftNo: currentData.liftNo,
|
liftTaskMode: type,
|
sourceStaNo: originSite,
|
staNo: targetSite,
|
sourceLev: originLoc,
|
targetLev: targetLoc,
|
});
|
if (resp.code === 200) {
|
message.success("请求成功");
|
return true;
|
} else {
|
message.warning(resp.msg);
|
return false;
|
}
|
} catch (error) {
|
message.warning("请求失败");
|
return false;
|
}
|
}
|
|
let codeContent = (<PageContainer
|
header={{
|
breadcrumb: {},
|
}}
|
>
|
<div style={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'space-around' }}>
|
{deviceInfos.map(item => {
|
if (item == null) {
|
return;
|
}
|
let tmpTitle = item.liftNo + "号提升机"
|
let tmpData = [
|
{
|
key: '1',
|
label: '任务号',
|
children: item.taskNo,
|
},
|
{
|
key: '2',
|
label: '工作状态',
|
children: <Badge status="processing" text={item.protocolStatusType} />,
|
},
|
{
|
key: '3',
|
label: '设备状态',
|
children: <Badge status="processing" text={item.run$} />,
|
},
|
{
|
key: '4',
|
label: '就绪状态',
|
children: <Badge status="processing" text={item.ready$} />,
|
},
|
{
|
key: '5',
|
label: '模式',
|
children: item.model$,
|
},
|
{
|
key: '6',
|
label: '错误码',
|
children: item.errorCode,
|
},
|
{
|
key: '7',
|
label: '有托盘',
|
children: item.hasTray ? 'Y' : 'N',
|
},
|
{
|
key: '8',
|
label: '有小车',
|
children: item.hasCar ? 'Y' : 'N',
|
},
|
{
|
key: '9',
|
label: '作业标记',
|
children: item.pakMk ? 'Y' : 'N',
|
},
|
{
|
key: '10',
|
label: '当前层',
|
children: item.lev,
|
},
|
{
|
key: '11',
|
label: '已完成任务号',
|
children: item.completeTaskNo,
|
},
|
{
|
key: '12',
|
label: '扩展',
|
children: JSON.stringify(item.extend),
|
},
|
];
|
return <div key={item.id} style={{ width: '45%' }}>
|
<div style={{ marginBottom: '10px' }}>
|
<span style={{ marginRight: '10px' }}>{tmpTitle}</span>
|
<Button type="primary" onClick={() => showOpera(item)}>操作</Button>
|
</div>
|
<Descriptions size="small" bordered items={tmpData} />
|
</div>
|
})}
|
</div>
|
</PageContainer>);
|
|
if (currentData) {
|
codeContent = (
|
<>
|
{codeContent}
|
<Drawer title="操作面板" onClose={closeOpera} open={openOpera}>
|
<h2 style={{ marginBottom: '15px' }}>{currentData.liftNo}号提升机</h2>
|
<div style={{ marginBottom: '15px' }}>
|
<Card title="移动指令" style={{ width: 300 }}>
|
<p>
|
<Select
|
defaultValue="1"
|
onChange={targetLocChange}
|
style={{ width: 120 }}
|
options={mapLev}
|
/>
|
<span><Button onClick={() => liftOperator('move')}>升降</Button></span>
|
</p>
|
<p>
|
<Input addonBefore="起始位置" onChange={originSiteChange} />
|
</p>
|
<p>
|
<Input addonBefore="目标位置" onChange={targetSiteChange} />
|
</p>
|
<p>
|
</p>
|
<div className="commandItem">
|
<Button onClick={() => liftOperator('movePallet')}>托盘出入</Button>
|
</div>
|
</Card>
|
</div>
|
|
<div style={{ marginBottom: '15px' }}>
|
<Card title="相关指令" style={{ width: 300 }}>
|
<div className="commandItem">
|
<Button onClick={() => liftOperator('reset')}>复位</Button>
|
</div>
|
<div className="commandItem">
|
<Button onClick={() => liftOperator('lock')}>锁定</Button>
|
</div>
|
<div className="commandItem">
|
<Button onClick={() => liftOperator('unlock')}>解锁</Button>
|
</div>
|
</Card>
|
</div>
|
</Drawer>
|
</>
|
)
|
}
|
|
return (codeContent);
|
}
|
|
export default Main;
|
