#

luxiaotao1123

2024-09-24 d6e48b72f0b7afd70205d6e88b3f336264891cc3

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

@@ -1,32 +1,55 @@
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', mt: .5, mb: .5 }}>
                <CardContent>
                    <Grid container spacing={2}>
                        <Grid item xs={12} sx={{ display: 'flex', justifyContent: 'space-between' }}>
                            <Typography variant="h6" gutterBottom align="left" sx={{
                            <Typography variant="h5" gutterBottom align="left" sx={{
                                maxWidth: { xs: '100px', sm: '180px', md: '260px', lg: '360px' },
                                whiteSpace: 'nowrap',
                                overflow: 'hidden',
                                textOverflow: 'ellipsis',
                            }}>
                                {Common.camelToPascalWithSpaces(translate('table.field.bus.seqNum'))}: {record.seqNum}
                                {Common.camelToPascalWithSpaces(translate('table.field.bus.busNo'))}: {record.busNo}
                            </Typography>
                            {/*  inherit, primary, secondary, textPrimary, textSecondary, error */}
                            <Typography variant="h6" gutterBottom align="right" >
                            <Typography variant="h5" gutterBottom align="right" >
                                ID: {record.id}
                            </Typography>
                        </Grid>
@@ -38,50 +61,71 @@
                            </Typography>
                        </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.seqNum" 
                                property={record.seqNum}
                            />
                        </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 height={10}>&nbsp;</Box>
                    <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;