鼠标滚动时，切换图像，图像可以循环的从头到尾

src/views/trials/trials-panel/reading/dicoms/components/DicomCanvas.vue

@@ -1194,7 +1194,7 @@ export default {
             cornerstoneTools.addToolForElement(element, cornerstoneTools.WwwcRegionTool)
           }
           if (!cornerstoneTools.getToolForElement(element, cornerstoneTools.StackScrollMouseWheelTool)) {
-            cornerstoneTools.addToolForElement(element, cornerstoneTools.StackScrollMouseWheelTool)
+            cornerstoneTools.addToolForElement(element, cornerstoneTools.StackScrollMouseWheelTool, { configuration: { loop: true, } })
           }
           cornerstoneTools.setToolActiveForElement(element, 'StackScrollMouseWheel', {})
 

src/views/trials/trials-panel/reading/dicoms/customize/CustomizeDicomCanvas.vue

@@ -35,7 +35,8 @@
     </div>
     <div class="info-image">
       <div v-show="mousePosition.mo">
-        Pos: {{ mousePosition.x ? mousePosition.x.toFixed(0) : '' }}, {{ mousePosition.y ? mousePosition.y.toFixed(0) : '' }}
+        Pos: {{ mousePosition.x ? mousePosition.x.toFixed(0) : '' }}, {{ mousePosition.y ? mousePosition.y.toFixed(0) :
+        '' }}
       </div>
       <div
         v-if="(dicomInfo.modality === 'CT' || dicomInfo.modality === 'DR' || dicomInfo.modality === 'CR') && mousePosition.mo">
@@ -1139,7 +1140,7 @@ export default {
             cornerstoneTools.addToolForElement(element, cornerstoneTools.WwwcRegionTool)
           }
           if (!cornerstoneTools.getToolForElement(element, cornerstoneTools.StackScrollMouseWheelTool)) {
-            cornerstoneTools.addToolForElement(element, cornerstoneTools.StackScrollMouseWheelTool)
+            cornerstoneTools.addToolForElement(element, cornerstoneTools.StackScrollMouseWheelTool, { configuration: { loop: true, } })
           }
           cornerstoneTools.setToolActiveForElement(element, 'StackScrollMouseWheel', {})
 

src/views/trials/trials-panel/reading/dicoms3D/components/ReadPage.vue

@@ -1120,7 +1120,9 @@ export default {
         const toolGroupId = viewportId
         const toolGroup = ToolGroupManager.createToolGroup(toolGroupId)
         toolGroup.addViewport(viewportId, renderingEngineId)
-        toolGroup.addTool(StackScrollTool.toolName)
+        toolGroup.addTool(StackScrollTool.toolName, {
+            loop: true,        // 启用循环滚动
+        })
         toolGroup.addTool(ScaleOverlayTool.toolName)
 
         toolGroup.addTool(PanTool.toolName)

src/views/trials/trials-panel/reading/visit-review/components/ImageViewer.vue

@@ -16,43 +16,30 @@
         </el-dropdown>
       </div>
       <!-- 缩放 -->
-      <div
+      <div :class="['tool-item', activeTool === 'Zoom' ? 'tool-item-active' : '']"
-        :class="['tool-item', activeTool === 'Zoom' ? 'tool-item-active' : '']"
+        :title="$t('trials:reading:button:zoom')" @click.prevent="setToolActive('Zoom')">
-        :title="$t('trials:reading:button:zoom')"
-        @click.prevent="setToolActive('Zoom')"
-      >
         <svg-icon icon-class="magnifier" class="svg-icon" />
       </div>
       <!-- 移动 -->
-      <div
+      <div :class="['tool-item', activeTool === 'Pan' ? 'tool-item-active' : '']"
-        :class="['tool-item', activeTool === 'Pan' ? 'tool-item-active' : '']"
+        :title="$t('trials:reading:button:move')" @click.prevent="setToolActive('Pan')">
-        :title="$t('trials:reading:button:move')"
-        @click.prevent="setToolActive('Pan')"
-      >
         <svg-icon icon-class="move" class="svg-icon" />
       </div>
       <!-- 旋转 -->
-      <div
+      <div :class="['tool-item', activeTool === 'PlanarRotate' ? 'tool-item-active' : '']"
-        :class="['tool-item', activeTool === 'PlanarRotate' ? 'tool-item-active' : '']"
+        :title="$t('trials:reading:button:rotate')" @click.prevent="setToolActive('PlanarRotate')">
-        :title="$t('trials:reading:button:rotate')"
-        @click.prevent="setToolActive('PlanarRotate')"
-      >
         <svg-icon icon-class="rotate" class="svg-icon" />
       </div>
       <!-- 箭头工具 -->
       <div
         :class="['tool-item', readingTaskState === 2 ? 'tool-disabled' : '', activeTool === 'ArrowAnnotate' ? 'tool-item-active' : '']"
-        :title="$t('trials:reading:button:arrowAnnotate')"
+        :title="$t('trials:reading:button:arrowAnnotate')" @click.prevent="setAnnotateToolActive('ArrowAnnotate')">
-        @click.prevent="setAnnotateToolActive('ArrowAnnotate')"
-      >
         <svg-icon icon-class="arrow" class="svg-icon" />
       </div>
       <!-- 清除标注 -->
       <div
         :class="['tool-item', readingTaskState === 2 ? 'tool-disabled' : '', activeTool === 'Eraser' ? 'tool-item-active' : '']"
-        :title="$t('trials:dicom-show:Eraser')"
+        :title="$t('trials:dicom-show:Eraser')" @click.prevent="setAnnotateToolActive('Eraser')">
-        @click.prevent="setAnnotateToolActive('Eraser')"
-      >
         <svg-icon icon-class="clear" class="svg-icon" />
       </div>
       <!-- 截图 -->
@@ -64,74 +51,50 @@
         <svg-icon icon-class="image" class="svg-icon" />
       </div> -->
       <!-- 重置 -->
-      <div
+      <div class="tool-item" :title="$t('trials:reading:button:reset')" @click.prevent="resetViewport">
-        class="tool-item"
-        :title="$t('trials:reading:button:reset')"
-        @click.prevent="resetViewport"
-      >
         <svg-icon icon-class="refresh" class="svg-icon" />
       </div>
     </div>
     <!-- viewports -->
     <div class="viewports-wrapper">
       <div class="grid-container" :style="gridStyle">
-        <div
+        <div v-for="(v, index) in viewportInfos" v-show="index < cells.length" :key="index" :style="cellStyle"
-          v-for="(v, index) in viewportInfos"
-          v-show="index < cells.length"
-          :key="index"
-          :style="cellStyle"
           :class="['grid-cell', index === activeCanvasIndex ? 'cell_active' : '', index === fullScreenIndex ? 'cell-full-screen' : '']"
-          @dblclick="toggleFullScreen($event, index)"
+          @dblclick="toggleFullScreen($event, index)" @click="activeCanvas(index)"
-          @click="activeCanvas(index)"
+          @mouseup="sliderMouseup($event, index)" @mousemove="sliderMousemove($event, index)">
-          @mouseup="sliderMouseup($event, index)"
-          @mousemove="sliderMousemove($event, index)"
-        >
           <div :ref="`canvas-${index}`" class="content">
             <div class="left-top-text">
-              <div
+              <div v-if="v.taskInfo.IsExistsClinicalData" class="cd-info"
-                v-if="v.taskInfo.IsExistsClinicalData"
+                :title="$t('trials:reading:button:clinicalData')" @click.stop="viewCD($event)">
-                class="cd-info"
-                :title="$t('trials:reading:button:clinicalData')"
-                @click.stop="viewCD($event)"
-              >
                 <svg-icon icon-class="documentation" class="svg-icon" />
               </div>
-              <h2
+              <h2 v-if="taskInfo && taskInfo.IsReadingShowSubjectInfo && v.taskInfo" class="subject-info">
-                v-if="taskInfo && taskInfo.IsReadingShowSubjectInfo && v.taskInfo"
-                class="subject-info"
-              >
                 {{ `${taskInfo.SubjectCode} ${v.taskInfo.TaskBlindName} ` }}
               </h2>
               <div v-if="v.currentFileName">{{ v.currentFileName }}</div>
             </div>
-            <div
+            <div v-if="taskInfo && taskInfo.IsReadingTaskViewInOrder === 1 && v.taskInfo" class="top-center-tool">
-              v-if="taskInfo && taskInfo.IsReadingTaskViewInOrder === 1 && v.taskInfo"
-              class="top-center-tool"
-            >
               <div class="toggle-visit-container">
-                <div
+                <div class="arrw_icon"
-                  class="arrw_icon"
+                  :style="{ cursor: v.taskInfo.VisitTaskNum !== 0 ? 'pointer' : 'not-allowed', color: v.taskInfo.VisitTaskNum !== 0 ? '#fff' : '#6b6b6b' }"
-                  :style="{ cursor: v.taskInfo.VisitTaskNum !== 0 ? 'pointer' : 'not-allowed', color: v.taskInfo.VisitTaskNum !== 0 ? '#fff': '#6b6b6b' }"
                   @click.stop.prevent="toggleTask($event, v.taskInfo.VisitTaskNum, -1)"
-                  @dblclick.stop="preventDefault($event)"
+                  @dblclick.stop="preventDefault($event)">
-                >
                   <i class="el-icon-caret-left" />
                 </div>
                 <div class="arrow_text">
                   {{ v.taskInfo.TaskBlindName }}
                 </div>
-                <div
+                <div class="arrw_icon"
-                  class="arrw_icon"
+                  :style="{ cursor: v.taskInfo.VisitTaskNum < taskInfo.VisitNum ? 'pointer' : 'not-allowed', color: v.taskInfo.VisitTaskNum < taskInfo.VisitNum ? '#fff' : '#6b6b6b' }"
-                  :style="{ cursor: v.taskInfo.VisitTaskNum < taskInfo.VisitNum ? 'pointer' : 'not-allowed', color: v.taskInfo.VisitTaskNum < taskInfo.VisitNum ? '#fff': '#6b6b6b' }"
                   @click.stop.prevent="toggleTask($event, v.taskInfo.VisitTaskNum, 1)"
-                  @dblclick.stop="preventDefault($event)"
+                  @dblclick.stop="preventDefault($event)">
-                >
                   <i class="el-icon-caret-right" />
                 </div>
               </div>
             </div>
             <div :ref="`sliderBox-${index}`" class="right-slider-box" @click.stop="clickSlider($event, index)">
-              <div :style="{top: v.height + '%'}" class="slider" @click.stop.prevent="() => {return}" @mousedown.stop="sliderMousedown($event, index)" />
+              <div :style="{ top: v.height + '%' }" class="slider" @click.stop.prevent="() => { return }"
+                @mousedown.stop="sliderMousedown($event, index)" />
             </div>
           </div>
         </div>
@@ -318,16 +281,18 @@ export default {
         const toolGroupId = `canvas-${i}`
         const toolGroup = ToolGroupManager.createToolGroup(toolGroupId)
         toolGroup.addViewport(viewportId, renderingEngineId)
-        toolGroup.addTool(StackScrollTool.toolName)
+        toolGroup.addTool(StackScrollTool.toolName, {
+          loop: true,        // 启用循环滚动
+        })
         toolGroup.addTool(PanTool.toolName)
         toolGroup.addTool(ZoomTool.toolName)
         toolGroup.addTool(PlanarRotateTool.toolName)
         toolGroup.addTool(ArrowAnnotateTool.toolName, {
           arrowHeadStyle: 'standard',
-          changeTextCallback: async(data, eventData, doneChangingTextCallback) => {
+          changeTextCallback: async (data, eventData, doneChangingTextCallback) => {
             return doneChangingTextCallback(await this.customPrompt())
           },
-          getTextCallback: async(doneChangingTextCallback) => {
+          getTextCallback: async (doneChangingTextCallback) => {
             return doneChangingTextCallback(await this.customPrompt())
           }
         })
@@ -730,9 +695,10 @@ export default {
 .none-dicom-viewer {
   display: flex;
   flex-direction: column;
-  width:100%;
+  width: 100%;
   height: 100%;
   user-select: none;
+
   .tools-wrapper {
     height: 50px;
     display: flex;
@@ -741,6 +707,7 @@ export default {
     align-items: center;
     border-bottom: 1px solid #727272;
     color: #ddd;
+
     .tool-item {
       padding: 5px;
       margin: 0 5px;
@@ -748,15 +715,19 @@ export default {
       font-size: 20px;
       cursor: pointer;
     }
+
     .tool-item-active {
       background-color: #607d8b;
     }
+
     .tool-disabled {
       cursor: not-allowed;
     }
   }
+
   .viewports-wrapper {
     flex: 1;
+
     .grid-container {
       display: grid;
       height: 100%;
@@ -765,14 +736,17 @@ export default {
     }
 
     .grid-cell {
-      border: 1px dashed #ccc;;
+      border: 1px dashed #ccc;
+      ;
       display: flex;
       align-items: center;
       justify-content: center;
     }
+
     .cell_active {
-      border-color: #fafa00!important;
+      border-color: #fafa00 !important;
     }
+
     .cell-full-screen {
       grid-column: 1 / -1;
       grid-row: 1 / -1;
@@ -782,6 +756,7 @@ export default {
       width: 100%;
       height: 100%;
       position: relative;
+
       .left-top-text {
         position: absolute;
         left: 5px;
@@ -789,27 +764,32 @@ export default {
         color: #ddd;
         z-index: 1;
         font-size: 12px;
+
         .cd-info {
           color: #ddd;
           font-size: 18px;
           cursor: pointer;
         }
+
         .subject-info {
-          color:#f44336;
+          color: #f44336;
           padding: 5px 0px;
           margin: 0;
         }
       }
+
       .top-center-tool {
         position: absolute;
-        left:50%;
+        left: 50%;
         top: 5px;
         transform: translateX(-50%);
         z-index: 1;
+
         .toggle-visit-container {
           display: flex;
         }
-        .arrw_icon{
+
+        .arrw_icon {
           width: 20px;
           height: 20px;
           background-color: #3f3f3f;
@@ -817,15 +797,17 @@ export default {
           line-height: 20px;
           border-radius: 10%;
         }
-        .arrow_text{
+
+        .arrow_text {
           height: 20px;
           line-height: 20px;
           background-color: #00000057;
           color: #fff;
-          padding:0 10px;
+          padding: 0 10px;
           font-size: 14px;
         }
       }
+
       .right-slider-box {
         position: absolute;
         right: 1px;
@@ -837,7 +819,8 @@ export default {
         z-index: 1;
         cursor: pointer;
       }
-      .right-slider-box:after{
+
+      .right-slider-box:after {
         content: '';
         position: absolute;
         bottom: -20px;
@@ -846,12 +829,13 @@ export default {
         width: 100%;
         background: #333;
       }
+
       .slider {
         height: 20px;
         width: 100%;
         position: absolute;
         top: 0;
-        z-index:10;
+        z-index: 10;
         background: #9e9e9e;
         cursor: move
       }