|  |  | 
 |  |  |     const translate = useTranslate(); | 
 |  |  |     const theme = useTheme(); | 
 |  |  |     const [isHover, setHover] = useState(false); | 
 |  |  |     console.log(data); | 
 |  |  |  | 
 |  |  |     return ( | 
 |  |  |         <Box | 
 |  |  | 
 |  |  |                 > | 
 |  |  |                     {data.priority} | 
 |  |  |                 </Avatar> | 
 |  |  |                 <Typography color="text.secondary" variant="body2"> | 
 |  |  |                 <Typography color="textPrimary" variant="body2" sx={{ transform: 'scale(1.1)', pl: 1, pr: .1 }}> | 
 |  |  |                     {data.actionType$} | 
 |  |  |                 </Typography> | 
 |  |  |                 <Typography | 
 |  |  |                     variant="body2" | 
 |  |  |                     color="textSecondary" | 
 |  |  |                 > | 
 |  |  |                      ({data.actionSts$ || '-'}) | 
 |  |  |                 </Typography> | 
 |  |  |                 <Box flex={1}></Box> | 
 |  |  |                 <Typography | 
 |  |  | 
 |  |  |                     component="span" | 
 |  |  |                 > | 
 |  |  |                     {/* {formatRelative(new Date(data.ioTime), new Date())} */} | 
 |  |  |                     {format(data.ioTime, 'yyyy-MM-dd HH:mm:ss') || '-'} | 
 |  |  |                     {/* {format(data.ioTime, 'yyyy-MM-dd HH:mm:ss') || '-'} */} | 
 |  |  |                     No.{data.uuid} | 
 |  |  |                 </Typography> | 
 |  |  |             </Stack> | 
 |  |  |             <Stack | 
 |  |  |                 direction="row" | 
 |  |  |                 sx={{ | 
 |  |  |                     paddingTop: '0.5em', | 
 |  |  |                     display: 'flex', | 
 |  |  | 
 |  |  |                         minHeight: '0.75em', | 
 |  |  |                     }, | 
 |  |  |                 }} | 
 |  |  |                 direction="row" | 
 |  |  |             > | 
 |  |  |                 <Typography | 
 |  |  |                     variant="body2" | 
 |  |  |                     color="textSecondary" | 
 |  |  |                     lineHeight={1.5} | 
 |  |  |                     margin={0} | 
 |  |  |                 > | 
 |  |  |                     task: {data.taskId$} | 
 |  |  |                     {/* // taskNo code val param action sts uuid | 
 |  |  |                     {paragraph} */} | 
 |  |  |                     {translate('table.field.action.taskId')}: {data.taskId$ || '-'} | 
 |  |  |                 </Typography> | 
 |  |  |                 <Divider orientation="vertical" flexItem sx={{ height: '1.5em', marginX: 1 }} /> | 
 |  |  |                 <Divider orientation="vertical" flexItem sx={{ marginX: 1 }} /> | 
 |  |  |                 <Typography | 
 |  |  |                     variant="body2" | 
 |  |  |                     color="textSecondary" | 
 |  |  |                     lineHeight={1.5} | 
 |  |  |                     margin={0} | 
 |  |  |                 > | 
 |  |  |                     code: {data.code} | 
 |  |  |                     {translate('table.field.action.code')}: {data.code || '-'} | 
 |  |  |                 </Typography> | 
 |  |  |                 <Divider orientation="vertical" flexItem sx={{ marginX: 1 }} /> | 
 |  |  |                 <Typography | 
 |  |  |                     variant="body2" | 
 |  |  |                     color="textSecondary" | 
 |  |  |                 > | 
 |  |  |                     {translate('table.field.action.val')}: {data.val || '-'} | 
 |  |  |                 </Typography> | 
 |  |  |                 <Divider orientation="vertical" flexItem sx={{ marginX: 1 }} /> | 
 |  |  |                 <Typography | 
 |  |  |                     variant="body2" | 
 |  |  |                     color="textSecondary" | 
 |  |  |                 > | 
 |  |  |                     {translate('table.field.action.params')}: {data.param || '-'} | 
 |  |  |                 </Typography> | 
 |  |  |             </Stack> | 
 |  |  |         </Box> |