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 [moveLocType, setMoveLocType] = useState(1);
|
const [mapLev, setMapLev] = useState([]);
|
|
useEffect(() => {
|
var newWs = new WebSocket("ws://127.0.0.1:9090/wcs/ws/lift/websocket");
|
setWs(newWs);
|
|
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");
|
}
|
|
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": "/lift/status/list",
|
"data": {}
|
}))
|
}
|
|
const showOpera = (data) => {
|
setOpenOpera(true);
|
console.log(data);
|
setCurrentData(data);
|
};
|
|
const closeOpera = () => {
|
setOpenOpera(false);
|
};
|
|
const getMapLev = async () => {
|
try {
|
const resp = await Http.doPost('api/basLift/getMapLev', {});
|
if (resp.code === 200) {
|
let arr = [];
|
for (let i = 1; i <= resp.data; i++) {
|
arr.push({
|
value: i,
|
label: i
|
})
|
}
|
setMapLev(arr);
|
return true;
|
} else {
|
message.warning(resp.msg);
|
return false;
|
}
|
} catch (error) {
|
message.warning("请求失败");
|
return false;
|
}
|
}
|
|
const targetLocChange = (e) => {
|
setTargetLoc(e.target.value)
|
}
|
|
const liftOperator = async (type) => {
|
try {
|
const resp = await Http.doPost('api/basLift/operator/lift', {
|
liftNo: currentData.liftNo,
|
liftTaskMode: type,
|
sourceStaNo: 0,
|
staNo: moveLocType
|
});
|
if (resp.code === 200) {
|
message.success("请求成功");
|
return true;
|
} else {
|
message.warning(resp.msg);
|
return false;
|
}
|
} catch (error) {
|
message.warning("请求失败");
|
return false;
|
}
|
}
|
|
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.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',
|
},
|
];
|
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={moveLocTypeChange}
|
style={{ width: 120 }}
|
options={mapLev}
|
/>
|
<span><Button onClick={() => liftOperator('move')}>移动</Button></span>
|
</p>
|
</Card>
|
</div>
|
|
<div style={{ marginBottom: '15px' }}>
|
<Card title="相关指令" style={{ width: 300 }}>
|
<div className="commandItem">
|
<Button onClick={() => liftOperator('reset')}>复位</Button>
|
</div>
|
</Card>
|
</div>
|
</Drawer>
|
</>
|
)
|
}
|
|
return (codeContent);
|
}
|
|
export default Main;
|
