能够在体位列表中显示示意图

src/API/bodyPosition.ts

@@ -0,0 +1,7 @@
+// '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';
+
+export function getViewIconUrl(viewIconName: string): string {
+  return `${API_BASE_URL}/pub${viewIconName}`;
+}

src/pages/exam/components/BodyPositionList.tsx

@@ -6,7 +6,7 @@ import { RootState } from '../../../states/store';
 import { Button } from 'antd';
 import { PlusOutlined } from '@ant-design/icons';
 import ImageViewer from './ImageViewer';
-import { addBodyPosition } from '../../../states/exam/bodyPositionListSlice';
+import { getViewIconUrl } from '../../../API/bodyPosition';
 
 interface BodyPositionListProps {
   layout: 'horizontal' | 'vertical';
@@ -14,7 +14,9 @@ interface BodyPositionListProps {
 
 const BodyPositionList: React.FC<BodyPositionListProps> = ({ layout }) => {
   const dispatch = useDispatch();
-  const bodyPositions = useSelector((state: RootState) => state.bodyPositionList.bodyPositions);
+  const bodyPositions = useSelector(
+    (state: RootState) => state.bodyPositionList.bodyPositions
+  );
   const works = useSelector((state: RootState) => state.examWorksCache.works);
 
   const addBodyPositionClick = () => {
@@ -26,32 +28,36 @@ const BodyPositionList: React.FC<BodyPositionListProps> = ({ layout }) => {
   };
 
   useEffect(() => {
-    alert(`${works.length} works found == ${works[0].Views.length} views in the first work`);
-    const bodyPositions = works.flatMap(work => work.Views).map(view => ({
-      internal_id: view.internal_id,
-      view_id: view.view_id,
-      view_name: view.view_name,
-      view_name_local: view.view_name_local,
-      view_other_name: view.view_other_name,
-      view_description: view.view_description,
-      view_position: view.view_position,
-      application: view.application,
-      anatomic_region: view.anatomic_region,
-      patient_type: view.patient_type,
-      body_part_id: view.body_part_id,
-      view_icon_name: view.view_icon_name,
-      view_big_icon_name: view.view_big_icon_name,
-      view_coach_name: view.view_coach_name,
-      modality: view.modality,
-      work_station_id: view.work_station_id,
-      apr_id: view.apr_id,
-      img_proc_id: view.img_proc_id,
-      sort: view.sort,
-      is_enabled: view.is_enabled,
-      product: view.product,
-      is_pre_install: view.is_pre_install,
-      procedure_id: view.procedure_id
-    }));
+    alert(
+      `${works.length} works found == ${works[0].Views.length} views in the first work`
+    );
+    const bodyPositions = works
+      .flatMap((work) => work.Views)
+      .map((view) => ({
+        internal_id: view.internal_id,
+        view_id: view.view_id,
+        view_name: view.view_name,
+        view_name_local: view.view_name_local,
+        view_other_name: view.view_other_name,
+        view_description: view.view_description,
+        view_position: view.view_position,
+        application: view.application,
+        anatomic_region: view.anatomic_region,
+        patient_type: view.patient_type,
+        body_part_id: view.body_part_id,
+        view_icon_name: view.view_icon_name,
+        view_big_icon_name: view.view_big_icon_name,
+        view_coach_name: view.view_coach_name,
+        modality: view.modality,
+        work_station_id: view.work_station_id,
+        apr_id: view.apr_id,
+        img_proc_id: view.img_proc_id,
+        sort: view.sort,
+        is_enabled: view.is_enabled,
+        product: view.product,
+        is_pre_install: view.is_pre_install,
+        procedure_id: view.procedure_id,
+      }));
     dispatch(setBodyPositions(bodyPositions));
   }, [works, dispatch]);
 
@@ -59,7 +65,12 @@ const BodyPositionList: React.FC<BodyPositionListProps> = ({ layout }) => {
     <div className={`body-position-list ${layout}`}>
       <div>{bodyPositions.length}</div>
       {bodyPositions.map((bodyPosition, index) => (
-        <ImageViewer key={index} src={bodyPosition.view_icon_name} className="image-viewer-item" />
+        // {/* @/src\pages\exam\components\BodyPositionList.tsx 向ImageViewer传递src属性值时，首先要使用@/src\API\bodyPosition.ts 提供的方法做一个拼接*/}
+        <ImageViewer
+          key={index}
+          src={getViewIconUrl(bodyPosition.view_icon_name)}
+          className="image-viewer-item"
+        />
       ))}
       <Button
         icon={<PlusOutlined />}