#

Junjie

2024-04-19 55adac367ec668f27be967359e4f37c8e96373d8

#

 zy-asrs-flow/src/pages/device/lift/index.jsx

New file
@@ -0,0 +1,245 @@
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;

 zy-asrs-flow/src/pages/device/lift/index.less

New file
@@ -0,0 +1,15 @@
.commandItem {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.commandItem > Button {
    width: 120px;
    margin-bottom: 10px;
}

.commandItem > div {
    width: 120px;
    margin-bottom: 10px;
}