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 [taskNo, setTaskNo] = useState(null);
|
const [staNo, setStaNo] = useState(null);
|
|
useEffect(() => {
|
connect();
|
|
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 == "/conveyor/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/conveyor/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": "/conveyor/list",
|
"data": {}
|
}))
|
}
|
|
const showOpera = (data) => {
|
setOpenOpera(true);
|
setCurrentData(data);
|
|
setTaskNo(data.taskNo);
|
setStaNo(data.staNo);
|
};
|
|
const closeOpera = () => {
|
setOpenOpera(false);
|
};
|
|
const taskNoChange = (e) => {
|
setTaskNo(e.target.value)
|
}
|
|
const staNoChange = (e) => {
|
setStaNo(e.target.value)
|
}
|
|
const conveyorOperator = async (type) => {
|
try {
|
const resp = await Http.doPost('api/basConveyor/operator/sta', {
|
conveyorNo: currentData.conveyorNo,
|
siteNo: currentData.siteNo,
|
taskMode: type,
|
taskNo: taskNo,
|
staNo: staNo
|
});
|
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.siteNo + "站"
|
let tmpData = [
|
{
|
key: '1',
|
label: '任务号',
|
children: item.taskNo,
|
},
|
{
|
key: '2',
|
label: '自动',
|
children: item.autoing,
|
},
|
{
|
key: '3',
|
label: '有物',
|
children: item.loading,
|
},
|
{
|
key: '4',
|
label: '可入',
|
children: item.inEnable,
|
},
|
{
|
key: '5',
|
label: '可出',
|
children: item.outEnable,
|
},
|
{
|
key: '6',
|
label: '能入',
|
children: item.canining,
|
},
|
{
|
key: '7',
|
label: '能出',
|
children: item.canouting,
|
},
|
{
|
key: '8',
|
label: '高低类型',
|
children: item.locType1$,
|
},
|
{
|
key: '9',
|
label: '宽窄类型',
|
children: item.locType2$,
|
},
|
{
|
key: '10',
|
label: '轻重类型',
|
children: item.locType3$,
|
},
|
{
|
key: '11',
|
label: '工作模式',
|
children: item.workMode$,
|
},
|
{
|
key: '12',
|
label: '目标站',
|
children: item.staNo,
|
},
|
];
|
return <div key={item.id} style={{ width: '45%', marginBottom: '30px' }}>
|
<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.siteNo}站</h2>
|
|
<div style={{ marginBottom: '15px' }}>
|
<Card title="相关指令" style={{ width: 300 }}>
|
<div className="commandItem">
|
<Input value={taskNo} addonBefore="工作号" onChange={taskNoChange} />
|
<Input value={staNo} addonBefore="目标站" onChange={staNoChange} />
|
<Button type="primary" onClick={() => conveyorOperator('taskNoAndStaNo')}>保存</Button>
|
</div>
|
</Card>
|
</div>
|
</Drawer>
|
</>
|
)
|
}
|
|
return (codeContent);
|
}
|
|
export default Main;
|
