实现：BodyPostionList组件显示曝光缩略图

src/API/bodyPosition.ts

@@ -1,7 +1,20 @@
 // 'src\API\bodyPosition.ts' 提供方法，得到示意图完整路径，输入是view_icon_name，本质是个url path，输出是个完整的url，算法是拼接'src\API\config.ts' 提供的base url和“/pub”和view_icon_name
 
 import { API_BASE_URL } from './config';
-
+/**
+ * 意图
+ * @param viewIconName view_icon_name的值
+ * @description 这个方法用于获取view_icon_name的完整URL路径
+ * @returns
+ */
 export function getViewIconUrl(viewIconName: string): string {
   return `${API_BASE_URL}/pub${viewIconName}`;
 }
+/**
+ * 得到exposed image的完整URL路径
+ * @param sopInstanceUid
+ * @returns
+ */
+export function getExposedImageUrl(sopInstanceUid: string): string {
+  return `${API_BASE_URL}pub/thumbnail/${sopInstanceUid}.webp`;
+}

src/domain/dview.ts

@@ -10,4 +10,8 @@ export interface dview {
   view_description: string;
   view_type: string;
   PrimarySopUID: string;
+  expose_status: string;
+  image_file_path: string;
+  image_file: string;
+  thumbnail_file: string;
 }

src/domain/patient/worklistToExam.ts

@@ -30,6 +30,10 @@ const worklistToExam = async (task: Task) => {
                 view_description: image.view_description,
                 view_type: '',
                 PrimarySopUID: image.sop_instance_uid,
+                expose_status: image.expose_status,
+                image_file_path: image.image_file_path,
+                image_file: image.image_file_path, // Assuming image_file is the same as image_file
+                thumbnail_file: image.thumbnail_file || '', // Assuming thumbnail_file is optional
               }) satisfies dview
           ) //转换为dview类型的实例时严格匹配
       ),

src/domain/xImage.ts

@@ -11,6 +11,8 @@ export interface XImage {
   view_id: string;
   view_description: string;
   image_file_path: string;
+  image_file: string;
+  thumbnail_file: string;
   acquisition_mode: string;
   acquisition_context: string | null;
   img_proc_context: string | null;

src/pages/exam/components/BodyPositionList.tsx

@@ -11,7 +11,7 @@ import { RootState } from '../../../states/store';
 import { Button, message } from 'antd';
 import { PlusOutlined } from '@ant-design/icons';
 import ImageViewer from './ImageViewer';
-import { getViewIconUrl } from '../../../API/bodyPosition';
+import { getExposedImageUrl, getViewIconUrl } from '../../../API/bodyPosition';
 import { changeBodyPosition } from '@/API/exam/changeBodyPosition';
 import { fetchViewDetail } from '@/API/patient/viewActions';
 
@@ -95,6 +95,7 @@ const BodyPositionList: React.FC<BodyPositionListProps> = ({
               work: work,
               study_instance_uid: work.StudyInstanceUID,
               sop_instance_uid: view.PrimarySopUID,
+              dview: view,
             };
           })
         )
@@ -116,7 +117,11 @@ const BodyPositionList: React.FC<BodyPositionListProps> = ({
         // {/* @/src\pages\exam\components\BodyPositionList.tsx 向ImageViewer传递src属性值时，首先要使用@/src\API\bodyPosition.ts 提供的方法做一个拼接*/}
         <ImageViewer
           key={index}
-          src={getViewIconUrl(bodyPosition.view_icon_name)}
+          src={
+            bodyPosition.dview.expose_status === 'Exposed'
+              ? getExposedImageUrl(bodyPosition.sop_instance_uid)
+              : getViewIconUrl(bodyPosition.view_icon_name)
+          }
           className="image-viewer-item"
           onClick={() => handleImageClick(bodyPosition)}
         />

src/states/exam/bodyPositionListSlice.ts

@@ -18,6 +18,7 @@ export interface ExtendedBodyPosition extends BodyPosition {
   study_instance_uid?: string;
   secondary_sop_uid?: string;
   study_id?: string;
+  dview: dview;
 }
 
 interface BodyPositionListState {