#

Junjie

2025-04-02 8fa5c45ca9761ae4b181f0921db615841b9aae15

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

@@ -1,70 +1,28 @@
import React, { useEffect, useRef, useState } from "react";
import { getToken } from '@/utils/token-util'
import { Badge, Descriptions } from 'antd';
import Http from '@/utils/http';
import { Badge, Button, Descriptions, Drawer, Input, Card, Select, message } from 'antd';
import {
    PageContainer,
} from '@ant-design/pro-components';

let items = [
    {
        key: '1',
        label: '任务号',
        children: '1',
    },
    {
        key: '2',
        label: '工作状态',
        children: <Badge status="processing" text="Running" />,
    },
    {
        key: '3',
        label: '设备状态',
        children: <Badge status="processing" text="Running" />,
    },
    {
        key: '4',
        label: '坐标码',
        children: '1,2,3',
    },
    {
        key: '5',
        label: '电量',
        children: '50%',
    },
    {
        key: '6',
        label: '错误码',
        children: '0',
    },
    {
        key: '7',
        label: '顶升状态',
        children: 'Y',
    },
    {
        key: '8',
        label: '充电状态',
        children: 'Y',
    },
    {
        key: '9',
        label: '作业标记',
        children: 'Y',
    },
    {
        key: '10',
        label: '跑库开关',
        children: 'Y',
    },
];
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 [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);
        connect();

        return () => {
            if (ws) {
@@ -74,7 +32,6 @@
    }, [])

    useEffect(() => {

        if (ws) {
            ws.onopen = function () {
                console.log("open");
@@ -101,6 +58,7 @@

            ws.onclose = function (e) {
                console.log("close");
                reconnect();
            }

            ws.onerror = function (e) {
@@ -108,6 +66,18 @@
            }
        }
    }, [ws]);

    const connect = () => {
        var newWs = new WebSocket(WEBSOCKET_BASE_URL + "/ws/shuttle/websocket");
        setWs(newWs);
    }

    const reconnect = () => {
        setTimeout(() => {
            console.log('WebSocketClient: Attempting to reconnect...');
            connect();
        }, 3000);
    }

    const sendWs = (message) => {
        if (ws.readyState == WebSocket.OPEN) {
@@ -122,84 +92,285 @@
        }))
    }

    return (
        <PageContainer
            header={{
                breadcrumb: {},
            }}
        >
            <div style={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'space-around' }}>
                {deviceInfos.map(item => {
                    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: '0',
                        },
                        {
                            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',
                        },
                    ];
                    return <div key={item.id} style={{ width: '45%' }}>
                        <Descriptions size="small" title={tmpTitle} bordered items={tmpData} />
    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 shuttleMoveLocClose = async () => {
        try {
            const resp = await Http.doPost('api/basShuttle/moveLocClose', {
                shuttleNo: currentData.shuttleNo,
            });
            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',
                    },
                    {
                        key: '14',
                        label: '库位号',
                        children: item.currentLocNo,
                    },
                ];
                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>
                })}
            </div>
        </PageContainer>
    )
                    <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>
                            <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('requestWaiting')}>申请确认</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>
                                <Button onClick={() => shuttleMoveLocClose()}>跑库关闭</Button>
                            </div>
                        </Card>
                    </div>
                </Drawer>
            </>
        )
    }

    return (codeContent);
}

export default Main;