#

Junjie

2024-03-25 9cec64faba70f6a4c37a6c6ddefadc59badcb3c1

#

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

New file
@@ -0,0 +1,200 @@
import React, { useEffect, useRef, useState } from "react";
import { getToken } from '@/utils/token-util'
import { Badge, Descriptions } 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',
    },
];

const Main = () => {
    const [deviceInfos, setDeviceInfos] = useState([]);
    const [ws, setWs] = useState(null);

    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": {}
        }))
    }

    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: 'N',
                        },
                        {
                            key: '9',
                            label: '作业标记',
                            children: item.pakMk ? 'Y' : 'N',
                        },
                        {
                            key: '10',
                            label: '跑库开关',
                            children: item.moveLoc ? 'Y' : 'N',
                        },
                        {
                            key: '11',
                            label: '运行方向',
                            children: item.runDirection,
                        },
                    ];
                    return <div key={item.id} style={{ width: '45%' }}>
                        <Descriptions size="small" title={tmpTitle} bordered items={tmpData} />
                    </div>
                })}
            </div>
        </PageContainer>
    )
}

export default Main;