|
@@ -2,7 +2,8 @@ import React, { useEffect, useState } from 'react';
|
|
import { useSelector, useDispatch } from 'react-redux';
|
|
import { useSelector, useDispatch } from 'react-redux';
|
|
import { ExtendedBodyPosition } from '../../../states/exam/bodyPositionListSlice';
|
|
import { ExtendedBodyPosition } from '../../../states/exam/bodyPositionListSlice';
|
|
import { RootState, AppDispatch } from '../../../states/store';
|
|
import { RootState, AppDispatch } from '../../../states/store';
|
|
-import { message } from 'antd';
|
|
|
|
|
|
+import { message, Badge } from 'antd';
|
|
|
|
+import { CheckOutlined, CloseOutlined } from '@ant-design/icons';
|
|
import AppendViewIcon from '@/components/AppendViewIcon';
|
|
import AppendViewIcon from '@/components/AppendViewIcon';
|
|
import ImageViewer from './ImageViewer';
|
|
import ImageViewer from './ImageViewer';
|
|
import { getExposedImageUrl, getViewIconUrl } from '../../../API/bodyPosition';
|
|
import { getExposedImageUrl, getViewIconUrl } from '../../../API/bodyPosition';
|
|
@@ -83,22 +84,45 @@ const BodyPositionList: React.FC<BodyPositionListProps> = ({
|
|
<div className={`${layout} grid grid-rows-[1fr_auto] h-0 flex-grow`}>
|
|
<div className={`${layout} grid grid-rows-[1fr_auto] h-0 flex-grow`}>
|
|
<div className="overflow-y-auto flex flex-col ">
|
|
<div className="overflow-y-auto flex flex-col ">
|
|
{bodyPositions.map((bodyPosition, index) => (
|
|
{bodyPositions.map((bodyPosition, index) => (
|
|
- <ImageViewer
|
|
|
|
- key={index}
|
|
|
|
- src={
|
|
|
|
- bodyPosition.dview.expose_status === 'Exposed'
|
|
|
|
- ? getExposedImageUrl(bodyPosition.sop_instance_uid)
|
|
|
|
- : getViewIconUrl(bodyPosition.view_icon_name)
|
|
|
|
- }
|
|
|
|
- className={`image-viewer-item w-[50%] mx-auto hover:border-[var(--color-primary)] hover:border-4
|
|
|
|
- ${
|
|
|
|
- bodyPosition.sop_instance_uid ===
|
|
|
|
- selectedBodyPosition?.sop_instance_uid
|
|
|
|
- ? 'border-4 border-[var(--color-primary)] '
|
|
|
|
- : ''
|
|
|
|
- }`}
|
|
|
|
- onClick={() => handleImageClick(bodyPosition)}
|
|
|
|
- />
|
|
|
|
|
|
+ <div key={index} className="relative w-[50%] mx-auto">
|
|
|
|
+ <ImageViewer
|
|
|
|
+ src={
|
|
|
|
+ bodyPosition.dview.expose_status === 'Exposed'
|
|
|
|
+ ? getExposedImageUrl(bodyPosition.sop_instance_uid)
|
|
|
|
+ : getViewIconUrl(bodyPosition.view_icon_name)
|
|
|
|
+ }
|
|
|
|
+ className={`image-viewer-item hover:border-[var(--color-primary)] hover:border-4
|
|
|
|
+ ${
|
|
|
|
+ bodyPosition.sop_instance_uid ===
|
|
|
|
+ selectedBodyPosition?.sop_instance_uid
|
|
|
|
+ ? 'border-4 border-[var(--color-primary)] '
|
|
|
|
+ : ''
|
|
|
|
+ }`}
|
|
|
|
+ onClick={() => handleImageClick(bodyPosition)}
|
|
|
|
+ />
|
|
|
|
+ {/* 左上角:判断状态badge */}
|
|
|
|
+ {bodyPosition.dview.expose_status === 'Exposed' && bodyPosition.dview.judged_status && (
|
|
|
|
+ <div className="absolute top-1 left-1 z-10">
|
|
|
|
+ <Badge
|
|
|
|
+ count={
|
|
|
|
+ bodyPosition.dview.judged_status === 'Accept' ? (
|
|
|
|
+ <CheckOutlined style={{ color: '#fff', fontSize: '16px' }} />
|
|
|
|
+ ) : bodyPosition.dview.judged_status === 'Rejected' ? (
|
|
|
|
+ <CloseOutlined style={{ color: '#fff', fontSize: '16px' }} />
|
|
|
|
+ ) : 'Un'
|
|
|
|
+ }
|
|
|
|
+ style={{
|
|
|
|
+ backgroundColor: bodyPosition.dview.judged_status === 'Accept' ? '#52c41a' : '#ff4d4f',
|
|
|
|
+
|
|
|
|
+ borderRadius: '50%',
|
|
|
|
+ display: 'flex',
|
|
|
|
+ alignItems: 'center',
|
|
|
|
+ justifyContent: 'center',
|
|
|
|
+ }}
|
|
|
|
+ />
|
|
|
|
+ </div>
|
|
|
|
+ )}
|
|
|
|
+ </div>
|
|
))}
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
|