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'
|
|
const Main = () => {
|
const [deviceInfos, setDeviceInfos] = useState([]);
|
const [ws, setWs] = useState(null);
|
const [openOpera, setOpenOpera] = useState(false);
|
const [currentData, setCurrentData] = useState(null);
|
const [sourceLoc, setSourceLoc] = useState("");
|
const [targetLoc, setTargetLoc] = useState("");
|
const [xStart, setXStart] = useState(1);
|
const [xTarget, setXTarget] = useState(1);
|
const [yStart, setYStart] = useState(1);
|
const [yTarget, setYTarget] = useState(1);
|
const [moveLocType, setMoveLocType] = useState(1);
|
|
useEffect(() => {
|
var newWs = new WebSocket("ws://127.0.0.1:9090/wcs/ws/shuttle/websocket");
|
setWs(newWs);
|
|
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 == "/shuttle/status/list") {
|
const data = JSON.parse(result.data);
|
setDeviceInfos(data);
|
}
|
}
|
|
ws.onclose = function (e) {
|
console.log("close");
|
}
|
|
ws.onerror = function (e) {
|
console.log(e);
|
}
|
}
|
}, [ws]);
|
|
const sendWs = (message) => {
|
if (ws.readyState == WebSocket.OPEN) {
|
ws.send(message)
|
}
|
}
|
|
const getDeviceInfo = () => {
|
sendWs(JSON.stringify({
|
"url": "/shuttle/status/list",
|
"data": {}
|
}))
|
}
|
|
const showOpera = (data) => {
|
setOpenOpera(true);
|
console.log(data);
|
setCurrentData(data);
|
};
|
|
const closeOpera = () => {
|
setOpenOpera(false);
|
};
|
|
const sourceLocChange = (e) => {
|
setSourceLoc(e.target.value)
|
}
|
|
const targetLocChange = (e) => {
|
setTargetLoc(e.target.value)
|
}
|
|
const shuttleOperator = async (type) => {
|
if (type == 'moveLoc') {
|
if (targetLoc == '') {
|
message.warning('请输入目标位置');
|
return;
|
}
|
}else if(type == 'takeMove') {
|
if (targetLoc == '') {
|
message.warning('请输入目标位置');
|
return;
|
}
|
|
if (sourceLoc == '') {
|
message.warning('请输入起始位置');
|
return;
|
}
|
}
|
|
try {
|
const resp = await Http.doPost('api/basShuttle/operator/shuttle', {
|
shuttleNo: currentData.shuttleNo,
|
shuttleTaskMode: type,
|
sourceLocNo: sourceLoc,
|
targetLocNo: targetLoc
|
});
|
if (resp.code === 200) {
|
message.success("请求成功");
|
return true;
|
} else {
|
message.warning(resp.msg);
|
return false;
|
}
|
} catch (error) {
|
message.warning("请求失败");
|
return false;
|
}
|
}
|
|
const shuttleMoveLoc = async () => {
|
if (xStart == '' || xTarget == '' || yStart == '' || yTarget == '') {
|
message.warning('请输入参数');
|
return;
|
}
|
|
try {
|
const resp = await Http.doPost('api/basShuttle/moveLoc', {
|
shuttleNo: currentData.shuttleNo,
|
moveType: moveLocType,
|
startX: xStart,
|
targetX: xTarget,
|
startY: yStart,
|
targetY: yTarget,
|
});
|
if (resp.code === 200) {
|
message.success("请求成功");
|
return true;
|
} else {
|
message.warning(resp.msg);
|
return false;
|
}
|
} catch (error) {
|
message.warning("请求失败");
|
return false;
|
}
|
}
|
|
const xStartChange = (e) => {
|
setXStart(e.target.value)
|
}
|
|
const xTargetChange = (e) => {
|
setXTarget(e.target.value)
|
}
|
|
const yStartChange = (e) => {
|
setYStart(e.target.value)
|
}
|
|
const yTargetChange = (e) => {
|
setYTarget(e.target.value)
|
}
|
|
const moveLocTypeChange = (e) => {
|
setMoveLocType(e)
|
}
|
|
let codeContent = (<PageContainer
|
header={{
|
breadcrumb: {},
|
}}
|
>
|
<div style={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'space-around' }}>
|
{deviceInfos.map(item => {
|
if (item == null) {
|
return;
|
}
|
let tmpTitle = item.shuttleNo + "号四向车"
|
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.deviceStatus$} />,
|
},
|
{
|
key: '4',
|
label: '坐标码',
|
children: item.currentCode,
|
},
|
{
|
key: '5',
|
label: '电量',
|
children: item.batteryPower,
|
},
|
{
|
key: '6',
|
label: '错误码',
|
children: item.errorCode$,
|
},
|
{
|
key: '7',
|
label: '顶升状态',
|
children: item.hasLift ? 'Y' : 'N',
|
},
|
{
|
key: '8',
|
label: '充电状态',
|
children: item.hasCharge ? 'Y' : 'N',
|
},
|
{
|
key: '9',
|
label: '作业标记',
|
children: item.pakMk ? 'Y' : 'N',
|
},
|
{
|
key: '10',
|
label: '跑库开关',
|
children: item.moveLoc ? 'Y' : 'N',
|
},
|
{
|
key: '11',
|
label: '运行方向',
|
children: item.runDirection,
|
},
|
{
|
key: '12',
|
label: '是否有托盘',
|
children: item.hasPallet ? 'Y' : 'N',
|
},
|
{
|
key: '13',
|
label: '自动',
|
children: item.mode ? 'Y' : 'N',
|
}
|
];
|
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.shuttleNo}号四向车</h2>
|
<div style={{ marginBottom: '15px' }}>
|
<Card title="移动指令" style={{ width: 300 }}>
|
<p>
|
<Input addonBefore="起始位置" onChange={sourceLocChange} />
|
</p>
|
<p>
|
<Input addonBefore="目标位置" onChange={targetLocChange} />
|
</p>
|
<p>
|
</p>
|
<p>
|
</p>
|
<div className="commandItem">
|
<Button onClick={() => shuttleOperator('moveLoc')}>移动到目标位置</Button>
|
<Button onClick={() => shuttleOperator('takeMove')}>取放货作业</Button>
|
</div>
|
</Card>
|
</div>
|
|
<div style={{ marginBottom: '15px' }}>
|
<Card title="相关指令" style={{ width: 300 }}>
|
<div className="commandItem">
|
<Button onClick={() => shuttleOperator('palletLift')}>托盘顶升</Button>
|
<Button onClick={() => shuttleOperator('palletDown')}>托盘下降</Button>
|
<Button onClick={() => shuttleOperator('chargeOpen')}>充电开</Button>
|
<Button onClick={() => shuttleOperator('chargeClose')}>充电关</Button>
|
<Button onClick={() => shuttleOperator('reset')}>复位</Button>
|
</div>
|
</Card>
|
</div>
|
|
<div style={{ marginBottom: '15px' }}>
|
<Card title="跑库系统" style={{ width: 300 }}>
|
<div className="commandItem">
|
<div><Input addonBefore="X起点" defaultValue="1" onChange={xStartChange} /></div>
|
<div><Input addonBefore="X终点" defaultValue="1" onChange={xTargetChange} /></div>
|
<div><Input addonBefore="Y起点" defaultValue="1" onChange={yStartChange} /></div>
|
<div><Input addonBefore="Y终点" defaultValue="1" onChange={yTargetChange} /></div>
|
<div>
|
<Select
|
defaultValue="0"
|
onChange={moveLocTypeChange}
|
style={{ width: 120 }}
|
options={[{ value: '0', label: '跑轨道' }, { value: '1', label: '跑库位' }, { value: '2', label: '母轨道循环跑' }, { value: '3', label: '子轨道循环跑' }, { value: '4', label: '取放货' }]}
|
/>
|
</div>
|
<Button onClick={() => shuttleMoveLoc()}>跑库</Button>
|
</div>
|
</Card>
|
</div>
|
</Drawer>
|
</>
|
)
|
}
|
|
return (codeContent);
|
}
|
|
export default Main;
|
