#

luxiaotao1123

2024-09-23 591fb57c675a1849e6e0ab1d968e1d58f6826f01

 zy-acs-flow/src/page/bus/BusPanel.jsx

@@ -1,19 +1,42 @@
import React, { useState, useRef, useEffect, useMemo } from "react";
import { Box, Card, CardContent, Grid, Typography, Tooltip } from '@mui/material';
import {
    Box,
    Card,
    CardContent,
    Grid,
    Typography,
    Tooltip,
    Table,
    TableBody,
    TableCell,
    TableHead,
    TableRow,
} from '@mui/material';
import {
    useTranslate,
    useRecordContext,
    useGetMany,
    Link,
} from 'react-admin';
import PanelTypography from "../components/PanelTypography";
import * as Common from '@/utils/common'
import * as Common from '@/utils/common';
import { styled } from '@mui/material/styles';

const BusPanel = () => {
    const record = useRecordContext();
    if (!record) return null;
    const translate = useTranslate();
    const taskIds = record ? record.taskIds : [];
    const { isPending, data: tasks } = useGetMany(
        'tasks',
        { ids: taskIds },
        { enabled: !!record }
    );

    if (isPending || !record) return null;

    return (
        <>
            <Card sx={{ width: { xs: 300, sm: 500, md: 600, lg: 800 }, margin: 'auto' }}>
            <Card sx={{ maxWidth: '80%', margin: 'auto' }}>
                <CardContent>
                    <Grid container spacing={2}>
                        <Grid item xs={12} sx={{ display: 'flex', justifyContent: 'space-between' }}>
@@ -23,7 +46,7 @@
                                overflow: 'hidden',
                                textOverflow: 'ellipsis',
                            }}>
                                {Common.camelToPascalWithSpaces(translate('table.field.bus.busNo'))}: {record.seqNum}
                                {Common.camelToPascalWithSpaces(translate('table.field.bus.busNo'))}: {record.busNo}
                            </Typography>
                            {/*  inherit, primary, secondary, textPrimary, textSecondary, error */}
                            <Typography variant="h6" gutterBottom align="right" >
@@ -39,49 +62,70 @@
                        </Grid>
                    </Grid>
                    <Box height={20}>&nbsp;</Box>
                    <Grid container spacing={2}>
                        <Grid item xs={6}>
                            <PanelTypography
                                title="table.field.bus.uuid" 
                                property={record.uuid}
                            />
                        </Grid>
                        <Grid item xs={6}>
                            <PanelTypography
                                title="table.field.bus.busNo" 
                                property={record.busNo}
                            />
                        </Grid>
                        <Grid item xs={6}>
                            <PanelTypography
                                title="table.field.bus.startTime" 
                                property={record.startTime$}
                            />
                        </Grid>
                        <Grid item xs={6}>
                            <PanelTypography
                                title="table.field.bus.endTime" 
                                property={record.endTime$}
                            />
                        </Grid>
                        <Grid item xs={6}>
                            <PanelTypography
                                title="table.field.bus.busSts" 
                                property={record.busSts$}
                            />
                        </Grid>
                        <Grid item xs={6}>
                            <PanelTypography
                                title="table.field.bus.phase" 
                                property={record.phase}
                            />
                        </Grid>

                    </Grid>
                    <Box>
                        <Table size="small">
                            <TableHead>
                                <TableRow>
                                    <TableCell>
                                        {translate('table.field.task.seqNum')}
                                    </TableCell>
                                    <TableCellRight>
                                        {translate('table.field.task.taskType')}
                                    </TableCellRight>
                                    <TableCellRight>
                                        {translate('table.field.task.taskSts')}
                                    </TableCellRight>
                                    <TableCellRight>
                                        {translate('table.field.task.agvId')}
                                    </TableCellRight>
                                    <TableCellRight>
                                        {translate('table.field.task.ioTime')}
                                    </TableCellRight>
                                    <TableCellRight>
                                        {translate('table.field.task.oriDesc')}
                                    </TableCellRight>
                                    <TableCellRight>
                                        {translate('table.field.task.destDesc')}
                                    </TableCellRight>
                                </TableRow>
                            </TableHead>
                            <TableBody>
                                {tasks.map((task) => (
                                    <TableRow key={task.id}>
                                        <TableCell>
                                            <Link to={`/task/${task.id}`}>
                                                {task.seqNum}
                                            </Link>
                                        </TableCell>
                                        <TableCellRight>
                                            {task.taskType$}
                                        </TableCellRight>
                                        <TableCellRight>
                                            {task.taskSts$}
                                        </TableCellRight>
                                        <TableCellRight>
                                            {task.agv$}
                                        </TableCellRight>
                                        <TableCellRight>
                                            {task.ioTime$}
                                        </TableCellRight>
                                        <TableCellRight>
                                            {task.oriDesc}
                                        </TableCellRight>
                                        <TableCellRight>
                                            {task.destDesc}
                                        </TableCellRight>
                                    </TableRow>
                                ))}
                            </TableBody>
                        </Table>
                    </Box>
                </CardContent>
            </Card >
        </>
    );
};

const TableCellRight = styled(TableCell)({ textAlign: 'right' });

export default BusPanel;