feat(processing): display corresponding dcm image when switching body positions in single grid mode on image processing page

src/pages/view/components/ViewerContainer.tsx

@@ -69,21 +69,29 @@ interface ViewerContainerProps {
 }
 
 const ViewerContainer: React.FC<ViewerContainerProps> = ({ imageUrls }) => {
+  console.log(`[ViewerContainer] 新渲染 imageUrls:`, imageUrls);
   const [selectedViewers, setSelectedViewers] = useState<number[]>([]);
   const [gridLayout, setGridLayout] = useState<string>('1x1');
   const action = useSelector((state: RootState) => state.functionArea.action);
   const dispatch = useDispatch();
+  const selectedBodyPosition = useSelector(
+    (state: RootState) => state.bodyPositionList.selectedBodyPosition
+  );
+  const bodyPositions = useSelector(
+    (state: RootState) => state.bodyPositionList.bodyPositions
+  );
   // eslint-disable-next-line
   const [viewersState, setViewersState] = useState<ReactElement[]>([]);
   console.log(`[ViewerContainer] rerendered]`);
 
   const renderViewers = (start: number, end: number) => {
+    console.log(`Rendering viewers from ${start} to ${end}`);
     return imageUrls.slice(start, end).map((url, index) => (
       <div
-        key={index}
-        onClick={(event) => handleSelectViewer(index, event)}
+        key={start + index}
+        onClick={(event) => handleSelectViewer(start + index, event)}
         style={{
-          border: selectedViewers.includes(index)
+          border: selectedViewers.includes(start + index)
             ? '2px solid blue'
             : '1px solid gray',
           cursor: 'pointer',
@@ -96,10 +104,10 @@ const ViewerContainer: React.FC<ViewerContainerProps> = ({ imageUrls }) => {
           style={{ marginRight: '8px' }}
         /> */}
         <StackViewer
-          key={index}
+          key={start + index}
           imageIndex={0}
           imageUrls={[url]}
-          viewportId={`viewport-${index}`}
+          viewportId={`viewport-${start + index}`}
           renderingEngineId={renderingEngineId}
         />
       </div>
@@ -112,7 +120,7 @@ const ViewerContainer: React.FC<ViewerContainerProps> = ({ imageUrls }) => {
 
   useEffect(() => {
     renderGrid();
-  }, [viewersState]);
+  }, [viewersState, selectedBodyPosition, gridLayout]);
 
   useEffect(() => {
     if (action) {
@@ -336,15 +344,23 @@ const ViewerContainer: React.FC<ViewerContainerProps> = ({ imageUrls }) => {
   const renderGrid = () => {
     console.log('Rendering  layout', gridLayout);
     switch (gridLayout) {
-      case '1x1':
-        return (
-          <div
-            className="h-full w-full"
-            style={{ display: 'grid', gridTemplateColumns: '1fr' }}
-          >
-            {renderViewers(0, 1)}
-          </div>
+      case '1x1': {
+        const index = bodyPositions.findIndex(
+          (bp) => bp.sop_instance_uid === selectedBodyPosition?.sop_instance_uid
         );
+        console.log(`查找到索引：${index}`);
+        if (index !== -1) {
+          return (
+            <div
+              className="h-full w-full"
+              style={{ display: 'grid', gridTemplateColumns: '1fr' }}
+            >
+              {renderViewers(index, index + 1)}
+            </div>
+          );
+        }
+        break;
+      }
       case '1x2':
         return (
           <div