|  |  | 
 |  |  | import { formatDistance } from 'date-fns'; | 
 |  |  | import request from '@/utils/request'; | 
 |  |  | import { useTheme } from '@mui/material/styles'; | 
 |  |  | import { getTaskStsColor } from '@/utils/common'; | 
 |  |  | import { getTaskStsColor } from '@/utils/color-util'; | 
 |  |  | import ListEmptyTip from "../../components/ListEmptyTip"; | 
 |  |  |  | 
 |  |  | const TaskItem = ({ record, now }) => { | 
 |  |  |     const translate = useTranslate(); | 
 |  |  |     const theme = useTheme(); | 
 |  |  |     console.log(record); | 
 |  |  |  | 
 |  |  |     return ( | 
 |  |  |         <> | 
 |  |  | 
 |  |  |                         </Avatar> | 
 |  |  |                     </ListItemAvatar> | 
 |  |  |                     <ListItemText | 
 |  |  |                         primary={`${record.taskType$}`} | 
 |  |  |                         primary={<> | 
 |  |  |                             <Stack direction={'row'}> | 
 |  |  |                                 <Typography | 
 |  |  |                                     variant="body1" | 
 |  |  |                                     color="textSecondary" | 
 |  |  |                                     component="span" | 
 |  |  |                                     sx={{ fontWeight: '600' }} | 
 |  |  |                                 > | 
 |  |  |                                     {record.taskType$} | 
 |  |  |                                 </Typography> | 
 |  |  |                                 <Typography | 
 |  |  |                                     variant="caption" | 
 |  |  |                                     color="textSecondary" | 
 |  |  |                                     component="span" | 
 |  |  |                                 > | 
 |  |  |                                      -  {record.taskTypeEl} | 
 |  |  |                                 </Typography> | 
 |  |  |                             </Stack> | 
 |  |  |  | 
 |  |  |                         </>} | 
 |  |  |                         secondary={ | 
 |  |  |                             <> | 
 |  |  |                                 {record.taskSts$} | 
 |  |  |                                     | 
 |  |  |                                 <Typography | 
 |  |  |                                     variant="body2" | 
 |  |  |                                     color="textSecondary" | 
 |  |  |                                     component="span" | 
 |  |  |                                     sx={{ fontWeight: 'bold' }} | 
 |  |  |                                 > | 
 |  |  |                                     {record.taskSts$} | 
 |  |  |                                 </Typography> | 
 |  |  |                             </> | 
 |  |  |                         } | 
 |  |  |                     /> | 
 |  |  |                     <ListItemText | 
 |  |  |                         primary={`${record.oriLoc$ || ''}${record.oriSta$ || ''} - ${record.destLoc$ || ''}${record.destSta$ || ''}`} | 
 |  |  |                         variant="body2" | 
 |  |  |                         color="textSecondary" | 
 |  |  |                         primary={<> | 
 |  |  |                             <Typography | 
 |  |  |                                 variant="body2" | 
 |  |  |                                 color="textPrimary" | 
 |  |  |                                 component="span" | 
 |  |  |                             > | 
 |  |  |                                 {record.oriLoc$ || ''}{record.oriSta$ || ''} - {record.destLoc$ || ''}{record.destSta$ || ''} | 
 |  |  |                             </Typography> | 
 |  |  |                         </>} | 
 |  |  |                         secondary={`code: ${record.destCode$ || ''}`} | 
 |  |  |                     /> | 
 |  |  |                     <ListItemSecondaryAction> | 
 |  |  | 
 |  |  |     const [currCount, setCurrCount] = useState(pageSize); | 
 |  |  |     const [records, setRecords] = useState(null); | 
 |  |  |     const [total, setTotal] = useState(0); | 
 |  |  |     const translate = useTranslate(); | 
 |  |  |  | 
 |  |  |     useEffect(() => { | 
 |  |  |         const http = async () => { | 
 |  |  | 
 |  |  |  | 
 |  |  |                             ) | 
 |  |  |                         })} | 
 |  |  |  | 
 |  |  |                         {currCount < total && ( | 
 |  |  |                             <Button | 
 |  |  |                                 onClick={() => | 
 |  |  | 
 |  |  |                                 fullWidth | 
 |  |  |                                 sx={{ mt: 1 }} | 
 |  |  |                             > | 
 |  |  |                                 Load more activity | 
 |  |  |                                 {translate('common.action.loadMore')} | 
 |  |  |                             </Button> | 
 |  |  |                         )} | 
 |  |  |                     </List> | 
 |  |  |                 </Box> | 
 |  |  |             ) : ( | 
 |  |  |                 <Typography> | 
 |  |  |                     no data found | 
 |  |  |                 </Typography> | 
 |  |  |                 <ListEmptyTip /> | 
 |  |  |             )} | 
 |  |  |  | 
 |  |  |         </> |