fix(processing): resolve multi-grid image interface not displaying images, implement multiple image display

src/pages/view/components/ImageControl.tsx

@@ -1,44 +1,30 @@
 import ViewerContainer from './ViewerContainer';
 import { useSelector } from 'react-redux';
 import { RootState } from '@/states/store';
-import {
-  getViewIconUrl,
-  getExposedImageUrl,
-  getDcmImageUrl,
-} from '@/API/bodyPosition';
-import { Image } from 'antd';
+import { getDcmImageUrl } from '@/API/bodyPosition';
+// import { Image } from 'antd';
 
 const ImageControl = () => {
-  const selectedBodyPosition = useSelector(
-    (state: RootState) => state.bodyPositionList.selectedBodyPosition
+  const bodyPositionList = useSelector(
+    (state: RootState) => state.bodyPositionList.bodyPositions
   );
+  // const selectedBodyPosition = useSelector(
+  //   (state: RootState) => state.bodyPositionList.selectedBodyPosition
+  // );
+
+  const exposedBodyPositions = bodyPositionList.filter(
+    (position) => position.dview && position.dview.expose_status === 'Exposed'
+  );
+
+  const dcmUrls: string[] = exposedBodyPositions.map((position) =>
+    getDcmImageUrl(position.sop_instance_uid)
+  );
+
+  console.log(`[ImageControl] dcmUrls:`, dcmUrls);
 
-  const isExposed =
-    selectedBodyPosition &&
-    selectedBodyPosition.dview &&
-    selectedBodyPosition.dview.expose_status === 'Exposed';
-  console.log('isExposed:', isExposed);
-  const imageUrl = selectedBodyPosition
-    ? isExposed
-      ? getExposedImageUrl(selectedBodyPosition.sop_instance_uid)
-      : getViewIconUrl(selectedBodyPosition.body_position_image)
-    : '';
-  const dcmUrls: string[] = [];
-  if (isExposed) {
-    dcmUrls.push(getDcmImageUrl(selectedBodyPosition.sop_instance_uid));
-    console.log(`[ImageControl] dcmUrls:`, dcmUrls);
-  }
   return (
-    <div className="h-full w-full">
-      {isExposed ? (
-        <ViewerContainer imageUrls={dcmUrls} />
-      ) : (
-        <Image
-          src={imageUrl}
-          alt="Body Position"
-          style={{ width: '100%', height: '100%' }}
-        />
-      )}
+    <div className="h-full w-full" data-testid="viewer-container">
+      <ViewerContainer imageUrls={dcmUrls} />
       {/* 第10张图和第30张图明显不同，可以用于测试，看效果*/}
     </div>
   );

src/pages/view/components/ViewerContainer.tsx

@@ -17,12 +17,23 @@ const ViewerContainer: React.FC<ViewerContainerProps> = ({ imageUrls }) => {
   const dispatch = useDispatch();
 
   const viewers = imageUrls.map((url, index) => (
-    <StackViewer
+    <div
       key={index}
-      imageIndex={index}
-      imageUrls={[url]}
-      viewportId={`viewport-${index}`}
-    />
+      onClick={() => handleSelectViewer(index)}
+      style={{
+        border: selectedViewers.includes(index)
+          ? '2px solid blue'
+          : '1px solid gray',
+        cursor: 'pointer',
+      }}
+    >
+      <StackViewer
+        key={index}
+        imageIndex={0}
+        imageUrls={[url]}
+        viewportId={`viewport-${index}`}
+      />
+    </div>
   ));
 
   useEffect(() => {
@@ -121,6 +132,7 @@ const ViewerContainer: React.FC<ViewerContainerProps> = ({ imageUrls }) => {
           break;
         case '1x1 Layout':
           setGridLayout('1x1');
+          console.log(`1x1 Layout`);
           break;
         case '1x2 Layout':
           setGridLayout('1x2');
@@ -239,43 +251,35 @@ const ViewerContainer: React.FC<ViewerContainerProps> = ({ imageUrls }) => {
   };
 
   const renderGrid = () => {
-    const viewers = imageUrls.map((url, index) => (
-      <div
-        key={index}
-        onClick={() => handleSelectViewer(index)}
-        style={{
-          border: selectedViewers.includes(index)
-            ? '2px solid blue'
-            : '1px solid gray',
-          cursor: 'pointer',
-        }}
-      >
-        <StackViewer imageIndex={index} imageUrls={[url]} viewportId={''} />
-      </div>
-    ));
-
     switch (gridLayout) {
       case '1x1':
         return (
-          <div style={{ display: 'grid', gridTemplateColumns: '1fr' }}>
+          <div
+            className="h-full w-full"
+            style={{ display: 'grid', gridTemplateColumns: '1fr' }}
+          >
             {viewers[0]}
           </div>
         );
       case '1x2':
         return (
-          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr' }}>
+          <div
+            className="h-full w-full"
+            style={{ display: 'grid', gridTemplateColumns: '1fr 1fr' }}
+          >
             {viewers.slice(0, 2)}
           </div>
         );
       case '2x1':
         return (
-          <div style={{ display: 'grid', gridTemplateRows: '1fr 1fr' }}>
+          <div className="h-full w-full grid grid-cols-1 grid-rows-2">
             {viewers.slice(0, 2)}
           </div>
         );
       case '2x2':
         return (
           <div
+            className="h-full w-full"
             style={{
               display: 'grid',
               gridTemplateColumns: '1fr 1fr',
@@ -290,7 +294,7 @@ const ViewerContainer: React.FC<ViewerContainerProps> = ({ imageUrls }) => {
     }
   };
 
-  return <div>{renderGrid()}</div>;
+  return <>{renderGrid()}</>;
 };
 
 export default ViewerContainer;

src/pages/view/components/viewers/stack.image.viewer.tsx

@@ -557,7 +557,7 @@ const StackViewer = ({
         if (error instanceof Error) {
           console.error(
             '[stack.image.viewer] Error setting image stack:',
-            error.message
+            error
           );
         } else {
           console.error('[stack.image.viewer] Unknown error:', error);