XCKJ
/
irc_web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

鼠标滚动时，切换图像，图像可以循环的从头到尾
continuous-integration/drone/push Build is passing Details

main
wangxiaoshuang 2025-11-24 17:12:10 +08:00
parent f79084b599
commit 423b71c702
4 changed files with 65 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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', {})

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

@ -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', {})

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

@ -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)

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

@ -16,43 +16,30 @@
</el-dropdown>
</div>
<!-- 缩放 -->
<div
:class="['tool-item', activeTool === 'Zoom' ? 'tool-item-active' : '']"
:title="$t('trials:reading:button:zoom')"
@click.prevent="setToolActive('Zoom')"
>
<div :class="['tool-item', activeTool === 'Zoom' ? 'tool-item-active' : '']"
:title="$t('trials:reading:button:zoom')" @click.prevent="setToolActive('Zoom')">
<svg-icon icon-class="magnifier" class="svg-icon" />
</div>
<!-- 移动 -->
<div
:class="['tool-item', activeTool === 'Pan' ? 'tool-item-active' : '']"
:title="$t('trials:reading:button:move')"
@click.prevent="setToolActive('Pan')"
>
<div :class="['tool-item', activeTool === 'Pan' ? 'tool-item-active' : '']"
:title="$t('trials:reading:button:move')" @click.prevent="setToolActive('Pan')">
<svg-icon icon-class="move" class="svg-icon" />
</div>
<!-- 旋转 -->
<div
:class="['tool-item', activeTool === 'PlanarRotate' ? 'tool-item-active' : '']"
:title="$t('trials:reading:button:rotate')"
@click.prevent="setToolActive('PlanarRotate')"
>
<div :class="['tool-item', activeTool === 'PlanarRotate' ? 'tool-item-active' : '']"
: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')"
@click.prevent="setAnnotateToolActive('ArrowAnnotate')"
>
:title="$t('trials:reading:button: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')"
@click.prevent="setAnnotateToolActive('Eraser')"
>
:title="$t('trials:dicom-show: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
class="tool-item"
:title="$t('trials:reading:button:reset')"
@click.prevent="resetViewport"
>
<div 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
v-for="(v, index) in viewportInfos"
v-show="index < cells.length"
:key="index"
:style="cellStyle"
<div 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)"
@click="activeCanvas(index)"
@mouseup="sliderMouseup($event, index)"
@mousemove="sliderMousemove($event, index)"
>
@dblclick="toggleFullScreen($event, index)" @click="activeCanvas(index)"
@mouseup="sliderMouseup($event, index)" @mousemove="sliderMousemove($event, index)">
<div :ref="`canvas-${index}`" class="content">
<div class="left-top-text">
<div
v-if="v.taskInfo.IsExistsClinicalData"
class="cd-info"
:title="$t('trials:reading:button:clinicalData')"
@click.stop="viewCD($event)"
>
<div v-if="v.taskInfo.IsExistsClinicalData" class="cd-info"
:title="$t('trials:reading:button:clinicalData')" @click.stop="viewCD($event)">
<svg-icon icon-class="documentation" class="svg-icon" />
</div>
<h2
v-if="taskInfo && taskInfo.IsReadingShowSubjectInfo && v.taskInfo"
class="subject-info"
>
<h2 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
v-if="taskInfo && taskInfo.IsReadingTaskViewInOrder === 1 && v.taskInfo"
class="top-center-tool"
>
<div v-if="taskInfo && taskInfo.IsReadingTaskViewInOrder === 1 && v.taskInfo" class="top-center-tool">
<div class="toggle-visit-container">
<div
class="arrw_icon"
:style="{ cursor: v.taskInfo.VisitTaskNum !== 0 ? 'pointer' : 'not-allowed', color: v.taskInfo.VisitTaskNum !== 0 ? '#fff': '#6b6b6b' }"
<div class="arrw_icon"
: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
class="arrw_icon"
:style="{ cursor: v.taskInfo.VisitTaskNum < taskInfo.VisitNum ? 'pointer' : 'not-allowed', color: v.taskInfo.VisitTaskNum < taskInfo.VisitNum ? '#fff': '#6b6b6b' }"
<div class="arrw_icon"
: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
}