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

多帧图像预览页面bug修复

uat_us
caiyiling 2024-06-05 16:04:35 +08:00
parent c2b9dcd277
commit 873262444f
8 changed files with 114 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/Dicom/DicomCanvas.vue
View File

@ -207,7 +207,7 @@ export default {
var instanceId = imageId.split('/')[imageId.split('/').length - 1]
instanceId = instanceId.split('.')[0]
this.stack.instanceId = instanceId
if (this.toolState.clipPlaying) this.toggleClipPlay()
this.toolState.clipPlaying = false
const element = this.$refs.canvas
cornerstone.enable(element)
this.loading = true
@ -630,6 +630,7 @@ export default {
enabledElement.renderingTools.renderCanvasData = renderCanvasData
},
scrollPage(offset) {
if(this.loading) return
var index = this.stack.currentImageIdIndex + offset
if (index < 0) index = 0
else if (index >= this.stack.imageIds.length) {
@ -641,6 +642,7 @@ export default {
},
toggleClipPlay() {
if(this.loading) return
if (this.toolState.clipPlaying) {
cornerstoneTools.stopClip(this.canvas)
this.toolState.clipPlaying = false

1
src/components/Dicom/DicomViewer.vue
View File

@ -400,6 +400,7 @@ export default {
methods: {
loadImageStack(dicomSeries) {
this.currentDicomCanvas.toolState.clipPlaying = false
this.$nextTick(() => {
this.currentDicomCanvas.loadImageStack(dicomSeries)
})

4
src/store/modules/reading.js
View File

@ -771,7 +771,7 @@ const actions = {
const imageId = `wadouri:${localStorage.getItem('location') !== 'USA' ? Vue.prototype.OSSclientConfig.basePath : Vue.prototype.OSSclientConfig.basePath}${instance.Path}?frame=${i}&instanceId=${instance.Id}&visitTaskId=${obj.visitTaskId}&idx=${studyIndex}|${seriesIndex}`
imageIds.push(imageId)
}
instance.ImageId = `wadouri:${localStorage.getItem('location') !== 'USA' ? Vue.prototype.OSSclientConfig.basePath : Vue.prototype.OSSclientConfig.basePath}${instance.Path}?frame=${0}?instanceId=${instance.Id}&visitTaskId=${obj.visitTaskId}&idx=0|0`
instance.ImageId = `wadouri:${localStorage.getItem('location') !== 'USA' ? Vue.prototype.OSSclientConfig.basePath : Vue.prototype.OSSclientConfig.basePath}${instance.Path}?frame=${0}&instanceId=${instance.Id}&visitTaskId=${obj.visitTaskId}&idx=${studyIndex}|${seriesIndex}`
} else {
const imageId = `wadouri:${localStorage.getItem('location') !== 'USA' ? Vue.prototype.OSSclientConfig.basePath : Vue.prototype.OSSclientConfig.basePath}${instance.Path}?instanceId=${instance.Id}&visitTaskId=${obj.visitTaskId}&idx=${studyIndex}|${seriesIndex}`
imageIds.push(imageId)
@ -891,7 +891,7 @@ const actions = {
},
setLastCanvasTaskId({ state }, taskId) {
return new Promise(resolve => {
var isReadingTaskViewInOrder = localStorage.getItem('isReadingTaskViewInOrder')
var isReadingTaskViewInOrder = localStorage.getItem('isReadingTaskViewInOrder')
if (parseInt(isReadingTaskViewInOrder) === 2) {
if (!state.lastCanvasTaskId) state.lastCanvasTaskId = taskId
} else {

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

@ -1090,7 +1090,7 @@ export default {
this.stack.instanceId = instanceId
const ToolStateManager = cornerstoneTools.globalImageIdSpecificToolStateManager
ToolStateManager.clearImageIdToolState(dicomSeries.imageIds)
if (this.toolState.clipPlaying) this.toggleClipPlay()
this.toggleClipPlay(false)
this.toolState.viewportInvert = false
this.toolState.dicomInfoVisible = false
@ -1245,8 +1245,8 @@ export default {
if (this.dicomInfo.thick) {
this.dicomInfo.thick = this.dicomInfo.thick.toFixed(2)
}
let newImageIdIndex = this.stack.imageIds.findIndex(i=>i===imageId)
if(newImageIdIndex === -1) return
const newImageIdIndex = this.stack.imageIds.findIndex(i => i === imageId)
if (newImageIdIndex === -1) return
this.stack.currentImageIdIndex = newImageIdIndex
this.stack.imageIdIndex = newImageIdIndex
this.series.imageIdIndex = newImageIdIndex
@ -1631,18 +1631,19 @@ export default {
}
},
toggleClipPlay() {
if (this.toolState.clipPlaying) {
toggleClipPlay(isPlay) {
if (isPlay) {
this.toolState.clipPlaying = true
cornerstoneTools.playClip(this.canvas, this.dicomInfo.fps)
cornerstoneTools.getToolState(
this.canvas,
'playClip'
).data[0].loop = false
} else {
cornerstoneTools.stopClip(this.canvas)
this.toolState.clipPlaying = false
return
}
this.toolState.clipPlaying = true
cornerstoneTools.playClip(this.canvas, this.dicomInfo.fps)
cornerstoneTools.getToolState(
this.canvas,
'playClip'
).data[0].loop = false
},
setFps(fps) {
this.dicomInfo.fps = fps

29
src/views/trials/trials-panel/reading/dicoms/components/DicomViewer.vue
View File

@ -306,9 +306,12 @@
</div>
</el-tooltip>
<!-- 播放/暂停 -->
<el-tooltip class="item" effect="dark" :content="clipPlaying?$t('trials:dicom-show:play'):$t('trials:dicom-show:stop')" placement="bottom">
<div class="icon" @click.prevent="toggleClipPlay">
<svg-icon :icon-class="clipPlaying?'stop':'play'" class="svg-icon" />
<el-tooltip class="item" effect="dark" :content="clipPlaying?$t('trials:dicom-show:stop'):$t('trials:dicom-show:play')" placement="bottom">
<div v-if="clipPlaying" class="icon" @click.prevent="toggleClipPlay(false)">
<svg-icon icon-class="stop" class="svg-icon" />
</div>
<div v-else class="icon" @click.prevent="toggleClipPlay(true)">
<svg-icon icon-class="play" class="svg-icon" />
</div>
</el-tooltip>
<!-- 下一帧 -->
@ -874,6 +877,7 @@ export default {
activeSeries: {
immediate: true,
handler(v) {
console.log('activeSeries', v)
if (v && v.isCurrentTask && this.studyList.length === 0) {
this.activeTaskInfo.taskName = v.taskBlindName
this.activeTaskInfo.visitTaskId = v.visitTaskId
@ -1253,6 +1257,7 @@ export default {
})
},
loadImageStack(dicomSeries) {
this.clipPlaying = false
this.canvasObj[this.currentDicomCanvasIndex] = dicomSeries
this.$nextTick(() => {
this.activeSeries = dicomSeries
@ -1932,12 +1937,24 @@ export default {
},
// 切换帧
scrollPage(i) {
// 获取影像是否下载完成
const isLoaded = this.getSeriesLoadStatus()
if (!isLoaded) return
this.$refs[`dicomCanvas${this.currentDicomCanvasIndex}`][0].scrollPage(i)
},
// 播放/暂停
toggleClipPlay() {
this.clipPlaying = !this.clipPlaying
this.$refs[`dicomCanvas${this.currentDicomCanvasIndex}`][0].toggleClipPlay()
toggleClipPlay(isPlay) {
// 获取影像是否下载完成
const isLoaded = this.getSeriesLoadStatus()
if (!isLoaded) return
this.clipPlaying = isPlay
this.$refs[`dicomCanvas${this.currentDicomCanvasIndex}`][0].toggleClipPlay(isPlay)
},
getSeriesLoadStatus() {
const index = this.visitTaskList.findIndex(i => i.VisitTaskId === this.activeSeries.visitTaskId)
if (index === -1) return false
const loadStatus = this.visitTaskList[index].StudyList[this.activeSeries.studyIndex].SeriesList[this.activeSeries.seriesIndex].loadStatus
return loadStatus
},
setDicomCanvasfps(event) {
this.$refs[`dicomCanvas${this.currentDicomCanvasIndex}`][0].setFps(event.target.value)

67
src/views/trials/trials-panel/reading/dicoms/components/StudyList.vue
View File

@ -267,6 +267,7 @@ export default {
// this.studyList = this.visitTaskList[idx].StudyList
// }
// })
// const debouncedInputHandler = this.debounce(this.cornerstoneimageloadprogress, 100)
cornerstone.events.addEventListener('cornerstoneimageloadprogress', this.cornerstoneimageloadprogress)
cornerstone.events.addEventListener('cornerstoneimageloaded', this.cornerstoneImageLoaded)
// cornerstone.events.addEventListener('cornerstoneimagecachefull', this.cornerstoneimagecachefull)
@ -281,6 +282,17 @@ export default {
window.removeEventListener('beforeunload', e => { cornerstone.imageCache.purgeCache() })
},
methods: {
debounce(fn, delay) {
let timer = null
return function() {
const context = this
const args = arguments
clearTimeout(timer)
timer = setTimeout(() => {
fn.apply(context, args)
}, delay)
}
},
initStudyInfo() {
const loading = this.$loading({ fullscreen: true })
// 初始化待渲染序列
@ -621,7 +633,6 @@ export default {
this.imageList.push({ imageId: imageId, seriesId: series.seriesId, studyIndex: studyIndex, seriesIndex: seriesIndex, visitTaskId: series.visitTaskId, priority })
})
}
if (this.imageList.length > 0) {
this.loopLoadStatus = 0
this.loopLoad()
@ -889,42 +900,44 @@ export default {
},
cornerstoneimageloadprogress(e) {
const imageId = e.detail.imageId
const percentComplete = e.detail.percentComplete
const params = {}
const searchParams = new URLSearchParams(imageId.split('?')[1])
for (const [key, value] of searchParams.entries()) {
params[key] = value
}
if (this.visitTaskId === params.visitTaskId) {
const studyIndex = params.idx.split('|')[0]
const seriesIndex = params.idx.split('|')[1]
var prefetchInstanceCount = this.studyList[studyIndex].SeriesList[seriesIndex].prefetchInstanceCount
var instanceCount = this.studyList[studyIndex].SeriesList[seriesIndex].instanceCount
if (this.studyList[studyIndex].SeriesList[seriesIndex].imageloadedArr.indexOf(imageId) < 0) {
const i = this.currentLoadIns.findIndex(i => i.imageId === imageId)
if (i > -1) {
prefetchInstanceCount = prefetchInstanceCount - this.currentLoadIns[i].percentComplete + percentComplete
this.currentLoadIns[i].percentComplete = percentComplete
if (percentComplete === 100) {
this.currentLoadIns.splice(i, 1)
}
} else {
if (percentComplete !== 100) {
this.currentLoadIns.push({ imageId, percentComplete })
}
prefetchInstanceCount = prefetchInstanceCount + percentComplete
}
this.studyList[studyIndex].SeriesList[seriesIndex].prefetchInstanceCount = prefetchInstanceCount
if (this.visitTaskId !== params.visitTaskId) return
const percentComplete = e.detail.percentComplete
const studyIndex = parseInt(params.idx.split('|')[0])
const seriesIndex = parseInt(params.idx.split('|')[1])
var prefetchInstanceCount = this.studyList[studyIndex].SeriesList[seriesIndex].prefetchInstanceCount
var instanceCount = this.studyList[studyIndex].SeriesList[seriesIndex].instanceCount
if (this.studyList[studyIndex].SeriesList[seriesIndex].imageloadedArr.indexOf(imageId) < 0) {
const i = this.currentLoadIns.findIndex(i => i.imageId === imageId)
if (i > -1) {
prefetchInstanceCount = prefetchInstanceCount + percentComplete - this.currentLoadIns[i].percentComplete
this.currentLoadIns[i].percentComplete = percentComplete
if (percentComplete >= 100) {
this.studyList[studyIndex].SeriesList[seriesIndex].imageloadedArr.push(imageId)
this.currentLoadIns.splice(i, 1)
}
} else {
if (percentComplete !== 100) {
this.currentLoadIns.push({ imageId, percentComplete })
}
prefetchInstanceCount = prefetchInstanceCount + percentComplete
}
if (prefetchInstanceCount >= instanceCount * 100) {
this.studyList[studyIndex].SeriesList[seriesIndex].prefetchInstanceCount = instanceCount * 100
// 设置当前序列状态为已下载完成
this.studyList[studyIndex].SeriesList[seriesIndex].loadStatus = true
this.studyList[studyIndex].SeriesList[seriesIndex].prefetchInstanceCount = prefetchInstanceCount
if (percentComplete >= 100) {
this.studyList[studyIndex].SeriesList[seriesIndex].imageloadedArr.push(imageId)
}
}
if (prefetchInstanceCount >= instanceCount * 100) {
this.studyList[studyIndex].SeriesList[seriesIndex].prefetchInstanceCount = instanceCount * 100
// 设置当前序列状态为已下载完成
this.studyList[studyIndex].SeriesList[seriesIndex].loadStatus = true
// this.studyList[studyIndex].SeriesList[seriesIndex].imageloadedArr.push(imageId)
}
},
cornerstoneimagecachechanged(e) {
const cacheInfo = cornerstone.imageCache.getCacheInfo()

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

@ -1065,7 +1065,7 @@ export default {
this.stack.instanceId = instanceId
const ToolStateManager = cornerstoneTools.globalImageIdSpecificToolStateManager
ToolStateManager.clearImageIdToolState(dicomSeries.imageIds)
if (this.toolState.clipPlaying) this.toggleClipPlay()
this.toggleClipPlay(false)
this.toolState.viewportInvert = false
this.toolState.dicomInfoVisible = false
@ -1606,18 +1606,19 @@ export default {
}
},
toggleClipPlay() {
if (this.toolState.clipPlaying) {
toggleClipPlay(isPlay) {
if (isPlay) {
this.toolState.clipPlaying = true
cornerstoneTools.playClip(this.canvas, this.dicomInfo.fps)
cornerstoneTools.getToolState(
this.canvas,
'playClip'
).data[0].loop = false
} else {
cornerstoneTools.stopClip(this.canvas)
this.toolState.clipPlaying = false
return
}
this.toolState.clipPlaying = true
cornerstoneTools.playClip(this.canvas, this.dicomInfo.fps)
cornerstoneTools.getToolState(
this.canvas,
'playClip'
).data[0].loop = false
},
setFps(fps) {
this.dicomInfo.fps = fps

30
src/views/trials/trials-panel/reading/dicoms/customize/CustomizeDicomViewer.vue
View File

@ -309,9 +309,12 @@
</div>
</el-tooltip>
<!-- 播放/暂停 -->
<el-tooltip class="item" effect="dark" :content="clipPlaying?$t('trials:dicom-show:play'):$t('trials:dicom-show:stop')" placement="bottom">
<div class="icon" @click.prevent="toggleClipPlay">
<svg-icon :icon-class="clipPlaying?'stop':'play'" class="svg-icon" />
<el-tooltip class="item" effect="dark" :content="clipPlaying?$t('trials:dicom-show:stop'):$t('trials:dicom-show:play')" placement="bottom">
<div v-if="clipPlaying" class="icon" @click.prevent="toggleClipPlay(false)">
<svg-icon icon-class="stop" class="svg-icon" />
</div>
<div v-else class="icon" @click.prevent="toggleClipPlay(true)">
<svg-icon icon-class="play" class="svg-icon" />
</div>
</el-tooltip>
<!-- 下一帧 -->
@ -328,7 +331,7 @@
</el-tooltip>
<el-tooltip class="item" effect="dark" :content="$t('trials:dicom-show:speed')" placement="bottom">
<select class="select-wrapper" @change="setDicomCanvasfps($event)" :disabled="clipPlaying">
<select class="select-wrapper" :disabled="clipPlaying" @change="setDicomCanvasfps($event)">
<!-- 默认值 -->
<option :value="5">{{ $t('trials:dicom-show:default') }}</option>
<option :value="5">5</option>
@ -910,6 +913,7 @@ export default {
})
},
loadImageStack(dicomSeries) {
this.clipPlaying = false
this.canvasObj[this.currentDicomCanvasIndex] = dicomSeries
if (this.activeTool) {
if (dicomSeries.isCurrentTask && dicomSeries.readingTaskState < 2) {
@ -1482,12 +1486,24 @@ export default {
},
// 切换帧
scrollPage(i) {
// 获取影像是否下载完成
const isLoaded = this.getSeriesLoadStatus()
if (!isLoaded) return
this.$refs[`dicomCanvas${this.currentDicomCanvasIndex}`][0].scrollPage(i)
},
// 播放/暂停
toggleClipPlay() {
this.clipPlaying = !this.clipPlaying
this.$refs[`dicomCanvas${this.currentDicomCanvasIndex}`][0].toggleClipPlay()
toggleClipPlay(isPlay) {
// 获取影像是否下载完成
const isLoaded = this.getSeriesLoadStatus()
if (!isLoaded) return
this.clipPlaying = isPlay
this.$refs[`dicomCanvas${this.currentDicomCanvasIndex}`][0].toggleClipPlay(isPlay)
},
getSeriesLoadStatus() {
const index = this.visitTaskList.findIndex(i => i.VisitTaskId === this.activeSeries.visitTaskId)
if (index === -1) return false
const loadStatus = this.visitTaskList[index].StudyList[this.activeSeries.studyIndex].SeriesList[this.activeSeries.seriesIndex].loadStatus
return loadStatus
},
setDicomCanvasfps(event) {
this.$refs[`dicomCanvas${this.currentDicomCanvasIndex}`][0].setFps(event.target.value)