583 lines
21 KiB
Plaintext
583 lines
21 KiB
Plaintext
<template>
|
|
<div v-loading="loading" class="study-wrapper">
|
|
<h4 style="color: #ddd;padding: 5px 0px;margin: 0;text-align: center;background-color: #4c4c4c;">
|
|
{{ subjectCode }}
|
|
</h4>
|
|
<h4 style="color: #ddd;padding: 5px 0px;margin: 0;text-align: center;background-color: #4c4c4c;margin-bottom: 5px;">
|
|
{{ taskBlindName }}
|
|
</h4>
|
|
<div class="ps">
|
|
<el-collapse v-model="activeNames">
|
|
<el-collapse-item v-for="(study, index) in studyList" :key="`${study.studyId}${index}`" :name="`${study.studyId}${index}`">
|
|
<template slot="title">
|
|
<div v-if="study.IsCriticalSequence" class="dicom-desc">
|
|
关键序列
|
|
</div>
|
|
<div
|
|
v-else
|
|
class="dicom-desc"
|
|
style="width: 150px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;"
|
|
>
|
|
<el-tooltip class="item" effect="dark" :content="`${study.StudyCode} ${study.Description?study.Description:''} ${study.Modalities} (${study.SeriesCount})`" placement="right">
|
|
<div>
|
|
<span>{{ study.StudyCode }} {{ study.Description }}</span>
|
|
<span> {{ study.Modalities }} ({{ study.SeriesCount }})</span>
|
|
</div>
|
|
</el-tooltip>
|
|
|
|
</div>
|
|
</template>
|
|
<div class="series">
|
|
<div
|
|
v-for="(series, i) in study.SeriesList"
|
|
:key="i"
|
|
style="position:relative;margin:10px 0px;"
|
|
series-type="current"
|
|
@click="showSeriesImage($event,index,i,series)"
|
|
>
|
|
|
|
<div
|
|
:class="{'series-active': i==seriesIndex && index === studyIndex}"
|
|
class="series-wrapper"
|
|
>
|
|
<el-image
|
|
class="image-preview"
|
|
:src="series.previewImageUrl"
|
|
fit="fill"
|
|
/>
|
|
<div class="image-desc">
|
|
<div class="flex-div">
|
|
<div>#{{ series.seriesNumber }}</div>
|
|
<div v-if="series.isDicom && (series.sliceThickness && parseInt(series.sliceThickness) !== 5 && series.instanceCount > 100) && series.prefetchInstanceCount<series.instanceCount">
|
|
<el-tooltip v-if="!series.isLoading" class="item" effect="dark" content="下载" placement="bottom">
|
|
<i class="el-icon-video-play" style="font-size: 18px;margin-right: 5px;color: #ffeb3b;cursor: pointer;" @click.stop="loadSeries(series,index,i)" />
|
|
</el-tooltip>
|
|
|
|
<el-tooltip v-else class="item" effect="dark" content="暂停" placement="bottom">
|
|
<i class="el-icon-video-pause" style="font-size: 18px;margin-right: 5px;color: #ffeb3b;cursor: pointer;" @click.stop="stopLoadSeries(series,index,i)" />
|
|
</el-tooltip>
|
|
</div>
|
|
</div>
|
|
<p v-show="series.InstanceCount">
|
|
{{ series.modality }}: {{ series.instanceCount }} image
|
|
</p>
|
|
<p v-show="series.sliceThickness">
|
|
T: {{ series.sliceThickness }}
|
|
</p>
|
|
<p v-show="series.description">
|
|
<el-tooltip class="item" effect="dark" :content="series.description" placement="right">
|
|
<span>{{ series.description }}</span>
|
|
</el-tooltip>
|
|
</p>
|
|
|
|
<div class="flex-div">
|
|
<div>
|
|
{{ series.isDicom?`${series.prefetchInstanceCount }/${series.instanceCount}`:series.instanceCount }}
|
|
</div>
|
|
<div v-if="series.isBeMark || measureData.findIndex(v=>v.SeriesId === series.seriesId) > -1">
|
|
<el-tooltip class="item" effect="dark" content="有标注" placement="right">
|
|
<i class="el-icon-star-on" style="font-size: 16px;color: #ff5722;" />
|
|
</el-tooltip>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-if="series.isDicom && series.prefetchInstanceCount>0 && series.prefetchInstanceCount<series.instanceCount" style="width: 100%;">
|
|
<el-progress
|
|
:percentage="parseInt(((series.prefetchInstanceCount/series.instanceCount)*100).toFixed(2))"
|
|
/>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</el-collapse-item>
|
|
</el-collapse>
|
|
|
|
<!-- <div
|
|
v-for="(study, index) in studyList"
|
|
:key="index"
|
|
>
|
|
<template v-if="study.IsCriticalSequence">
|
|
<div class="dicom-desc">
|
|
关键序列
|
|
</div>
|
|
</template>
|
|
<template v-else>
|
|
<div class="dicom-desc">
|
|
{{ study.StudyCode }}
|
|
</div>
|
|
<div v-show="study.Description" class="dicom-desc">
|
|
{{ study.Description }}
|
|
</div>
|
|
<div v-show="study.SeriesCount" class="dicom-desc">
|
|
{{ study.Modalities }} : {{ study.SeriesCount }} Series
|
|
</div>
|
|
</template>
|
|
|
|
<div class="series">
|
|
<div
|
|
v-for="(series, i) in study.SeriesList"
|
|
:key="i"
|
|
style="position:relative;margin:10px 0px;"
|
|
series-type="current"
|
|
@click="showSeriesImage($event,index,i,series)"
|
|
>
|
|
|
|
<div
|
|
:class="{'series-active': i==seriesIndex && index === studyIndex}"
|
|
class="series-wrapper"
|
|
>
|
|
<el-image
|
|
class="image-preview"
|
|
:src="series.previewImageUrl"
|
|
fit="fill"
|
|
/>
|
|
<div class="image-desc">
|
|
<div class="flex-div">
|
|
<div>#{{ series.seriesNumber }}</div>
|
|
<div v-if="series.isDicom && series.instanceCount > 100 && series.prefetchInstanceCount>0 && series.prefetchInstanceCount<series.instanceCount">
|
|
|
|
</div>
|
|
</div>
|
|
<p v-show="series.InstanceCount">
|
|
{{ series.modality }}: {{ series.instanceCount }} image
|
|
</p>
|
|
<p v-show="series.sliceThickness">
|
|
T: {{ series.sliceThickness }}
|
|
</p>
|
|
<p v-show="series.description">
|
|
<el-tooltip class="item" effect="dark" :content="series.description" placement="right">
|
|
<span>{{ series.description }}</span>
|
|
</el-tooltip>
|
|
</p>
|
|
|
|
<div class="flex-div">
|
|
<div>
|
|
{{ series.isDicom?`${series.prefetchInstanceCount }/${series.instanceCount}`:series.instanceCount }}
|
|
</div>
|
|
<div v-if="series.isBeMark || measureData.findIndex(v=>v.SeriesId === series.seriesId) > -1">
|
|
<el-tooltip class="item" effect="dark" content="有标注" placement="right">
|
|
<i class="el-icon-star-on" style="font-size: 16px;color: #ff5722;" />
|
|
</el-tooltip>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-if="series.isDicom && series.prefetchInstanceCount>0 && series.prefetchInstanceCount<series.instanceCount" style="width: 100%;">
|
|
<el-progress
|
|
:percentage="parseInt(((series.prefetchInstanceCount/series.instanceCount)*100).toFixed(2))"
|
|
/>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div> -->
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import * as dicomParser from 'dicom-parser'
|
|
import * as cornerstone from 'cornerstone-core'
|
|
import * as cornerstoneWADOImageLoader from 'cornerstone-wado-image-loader'
|
|
|
|
import requestPoolManager from '@/utils/request-pool'
|
|
import DicomEvent from './DicomEvent'
|
|
import { mapGetters } from 'vuex'
|
|
import store from '@/store'
|
|
cornerstoneWADOImageLoader.external.dicomParser = dicomParser
|
|
cornerstoneWADOImageLoader.external.cornerstone = cornerstone
|
|
const maximumSizeInBytes = 1024 * 1024 * 1024 // 1 GB
|
|
export default {
|
|
name: 'StudyList',
|
|
props: {
|
|
trialId: {
|
|
type: String,
|
|
required: true
|
|
},
|
|
subjectVisitId: {
|
|
type: String,
|
|
required: true
|
|
},
|
|
visitTaskId: {
|
|
type: String,
|
|
required: true
|
|
},
|
|
isReading: {
|
|
type: Number,
|
|
default: 0
|
|
},
|
|
taskBlindName: {
|
|
type: String,
|
|
default: ''
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
studyList: [],
|
|
cachedImages: [],
|
|
studyIndex: null,
|
|
seriesIndex: null,
|
|
loading: false,
|
|
measureData: [],
|
|
isRender: false,
|
|
firstInstanceId: '',
|
|
isStartLoad: false,
|
|
subjectCode: '',
|
|
activeNames: ''
|
|
}
|
|
},
|
|
computed: {
|
|
...mapGetters(['visitTaskList'])
|
|
},
|
|
mounted() {
|
|
this.subjectCode = this.$router.currentRoute.query.subjectCode
|
|
DicomEvent.$on('getMeasureData', () => {
|
|
var idx = this.visitTaskList.findIndex(i => i.VisitTaskId === this.visitTaskId)
|
|
this.measureData = this.visitTaskList[idx].MeasureData
|
|
})
|
|
cornerstone.events.addEventListener('cornerstoneimageloaded', this.cornerstoneImageLoaded)
|
|
},
|
|
beforeDestroy() {
|
|
console.log('beforeDestroy')
|
|
requestPoolManager.stopTaskTimer()
|
|
DicomEvent.$off('getMeasureData')
|
|
},
|
|
methods: {
|
|
getStudyInfo(isRender = false) {
|
|
if (!this.isRender || isRender) {
|
|
const loading = this.$loading({ fullscreen: true })
|
|
var idx = this.visitTaskList.findIndex(i => i.VisitTaskId === this.visitTaskId)
|
|
if (idx > -1 && this.visitTaskList[idx].StudyList && this.visitTaskList[idx].StudyList.length > 0) {
|
|
this.studyList = this.visitTaskList[idx].StudyList
|
|
var sIdx = this.studyList.findIndex(s => s.IsDicom)
|
|
if (sIdx > -1) {
|
|
this.studyIndex = sIdx
|
|
this.seriesIndex = 0
|
|
this.activeNames = `${this.studyList[sIdx].studyId}${sIdx}`
|
|
this.studyList[sIdx].SeriesList[0].isFirstRender = true
|
|
this.loadImages(this.visitTaskList[idx], this.studyList)
|
|
this.$emit('loadImageStack', this.studyList[sIdx].SeriesList[0])
|
|
this.firstInstanceId = this.studyList[sIdx].SeriesList[0].imageIds[0]
|
|
|
|
// requestPoolManager.startTaskTimer()
|
|
}
|
|
}
|
|
this.isRender = true
|
|
loading.close()
|
|
} else {
|
|
this.$emit('loadImageStack', this.studyList[this.studyIndex].SeriesList[this.seriesIndex])
|
|
}
|
|
},
|
|
initStudyList() {
|
|
if (!this.isRender) {
|
|
var idx = this.visitTaskList.findIndex(i => i.VisitTaskId === this.visitTaskId)
|
|
if (idx > -1 && this.visitTaskList[idx].StudyList && this.visitTaskList[idx].StudyList.length > 0) {
|
|
this.studyList = this.visitTaskList[idx].StudyList
|
|
// this.studyIndex = 0
|
|
// this.seriesIndex = 0
|
|
// this.loadAllImages()
|
|
// 修改 只自动下载主序列
|
|
this.loadImages(this.visitTaskList[idx], this.studyList)
|
|
}
|
|
this.isRender = true
|
|
}
|
|
},
|
|
// 缩略图下载成功回调,默认下载第一个检查的所有序列
|
|
previewImageLoad() {
|
|
this.studyList[0].PreviewImageCount++
|
|
if (this.studyList[0].PreviewImageCount === this.studyList[0].SeriesCount) {
|
|
this.loadAllImages()
|
|
}
|
|
},
|
|
// 缩略图下载失败回调,默认下载第一个检查的所有序列
|
|
previewImageLoadError() {
|
|
this.studyList[0].PreviewImageCount++
|
|
if (this.studyList[0].previewImageCount === this.studyList[0].seriesCount) {
|
|
this.loadAllImages()
|
|
}
|
|
},
|
|
showSeriesImage(e, studyIndex, seriesIndex, series) {
|
|
if (!series.isLoading) {
|
|
series.isLoading = true
|
|
}
|
|
if (series.isDicom) {
|
|
this.studyIndex = studyIndex
|
|
this.seriesIndex = seriesIndex
|
|
this.studyList[studyIndex].SeriesList[seriesIndex].measureData = this.measureData
|
|
|
|
this.$emit('loadImageStack', this.studyList[studyIndex].SeriesList[seriesIndex])
|
|
if (!series.loadStatus) {
|
|
const priority = Date.parse(new Date())
|
|
series.imageIds.forEach(imageId => {
|
|
this.load(imageId, series.seriesId, priority)
|
|
})
|
|
}
|
|
|
|
DicomEvent.$emit('loadMeasurementList', { visitTaskId: this.visitTaskId, taskBlindName: this.taskBlindName })
|
|
} else {
|
|
// 非Dicom预览
|
|
this.$emit('previewNoneDicoms', { visitTaskId: this.visitTaskId })
|
|
}
|
|
},
|
|
toggleStudy(stack) {
|
|
console.log('toggleStudy')
|
|
if (!stack.studyId) return
|
|
if (!this.isRender) {
|
|
var idx = this.visitTaskList.findIndex(i => i.VisitTaskId === this.visitTaskId)
|
|
if (idx > -1 && this.visitTaskList[idx].StudyList && this.visitTaskList[idx].StudyList.length > 0) {
|
|
this.studyList = this.visitTaskList[idx].StudyList
|
|
this.loadAllImages()
|
|
}
|
|
this.isRender = true
|
|
}
|
|
var studyIdx = this.studyList.findIndex(study => study.StudyId === stack.studyId)
|
|
if (studyIdx === -1) return
|
|
var study = this.studyList[studyIdx]
|
|
var seriesIdx = study.SeriesList.findIndex(series => series.seriesId === stack.seriesId)
|
|
if (seriesIdx === -1) return
|
|
this.studyIndex = studyIdx
|
|
this.seriesIndex = seriesIdx
|
|
|
|
DicomEvent.$emit('loadMeasurementList', { visitTaskId: this.visitTaskId, taskBlindName: this.taskBlindName })
|
|
},
|
|
loadImages(taskInfo) {
|
|
var priority = Date.parse(new Date())
|
|
// 当前任务只自动下载层厚为5mm 或者影像数量小于 100张
|
|
if (taskInfo.IsCurrentTask) {
|
|
// 请求池处理
|
|
this.studyList.map(study => {
|
|
study.SeriesList.map(series => {
|
|
if (!series.loadStatus) {
|
|
var sliceThickness = isNaN(parseInt(series.sliceThickness)) ? null : parseInt(series.sliceThickness)
|
|
if (sliceThickness === 5 || series.instanceCount <= 100) {
|
|
series.imageIds.map(image => {
|
|
this.load(image, series.seriesId, priority)
|
|
})
|
|
}
|
|
}
|
|
})
|
|
})
|
|
} else {
|
|
// 非当前任务只自动下载关键序列
|
|
var idx = this.studyList.findIndex(study => study.IsCriticalSequence)
|
|
if (idx === -1) return
|
|
|
|
this.studyList[idx].SeriesList.forEach(series => {
|
|
if (!series.loadStatus) {
|
|
series.imageIds.map(image => {
|
|
this.load(image, series.seriesId, priority)
|
|
})
|
|
}
|
|
})
|
|
}
|
|
},
|
|
loadSeries(series, studyIndex, seriesIndex) {
|
|
this.$set(this.studyList[studyIndex].SeriesList[seriesIndex], 'isLoading', true)
|
|
const priority = Date.parse(new Date())
|
|
series.imageIds.map(image => {
|
|
if (series.imageloadedArr.indexOf(image) === -1) {
|
|
this.load(image, series.seriesId, priority)
|
|
}
|
|
})
|
|
},
|
|
stopLoadSeries(series, studyIndex, seriesIndex) {
|
|
this.$set(this.studyList[studyIndex].SeriesList[seriesIndex], 'isLoading', false)
|
|
requestPoolManager.removeTask(series.seriesId)
|
|
},
|
|
loadAllImages() {
|
|
},
|
|
load(imageId, seriesId, priority = 999) {
|
|
return new Promise((resolve, reject) => {
|
|
requestPoolManager.loadAndCacheImagePlus(imageId, seriesId, priority).then(res => {
|
|
if (!res) return
|
|
this.imageLoaded(imageId, res.data.string('x0020000e'))
|
|
resolve(res)
|
|
}).catch(e => {
|
|
reject(e)
|
|
})
|
|
})
|
|
},
|
|
buildImageRequestTask(imageId, config = {}) {
|
|
return {
|
|
key: imageId,
|
|
...config,
|
|
execute: () => {
|
|
return cornerstone.loadAndCacheImage(imageId)
|
|
}
|
|
}
|
|
},
|
|
datasetsCacheChanged(e) {
|
|
const cacheInfo = e.detail.cacheInfo
|
|
const cacheSizeInBytes = cacheInfo.cacheSizeInBytes
|
|
if (cacheSizeInBytes >= maximumSizeInBytes) {
|
|
// 清理缓存的影像
|
|
}
|
|
},
|
|
async imageLoaded(imageId, seriesUid) {
|
|
await store.dispatch('reading/updateStudyList', { visitTaskId: this.visitTaskId, imageId, seriesUid })
|
|
var idx = this.visitTaskList.findIndex(i => i.VisitTaskId === this.visitTaskId)
|
|
if (idx > -1 && this.visitTaskList[idx].StudyList && this.visitTaskList[idx].StudyList.length > 0) {
|
|
this.studyList = this.visitTaskList[idx].StudyList
|
|
}
|
|
},
|
|
// instance下载成功回调
|
|
async cornerstoneImageLoaded(e) {
|
|
await store.dispatch('reading/updateStudyList', { visitTaskId: this.visitTaskId, imageId: e.detail.image.imageId, seriesUid: e.detail.image.data.string('x0020000e') })
|
|
|
|
var idx = this.visitTaskList.findIndex(i => i.VisitTaskId === this.visitTaskId)
|
|
if (this.firstInstanceId === e.detail.image.imageId && !this.isStartLoad) {
|
|
// 初始化图像加载完成时，自动下载
|
|
this.loadImages(this.visitTaskList[idx])
|
|
this.isStartLoad = true
|
|
}
|
|
this.studyList = this.visitTaskList[idx].StudyList
|
|
|
|
const uri = e.detail.image.sharedCacheKey
|
|
const index = this.cachedImages.findIndex(item => item.uri === uri)
|
|
if (index === -1) {
|
|
this.cachedImages.push({ uri: uri, timestamp: new Date().getTime() })
|
|
} else {
|
|
this.cachedImages[index].timestamp = new Date().getTime()
|
|
}
|
|
var imageId = e.detail.image.imageId
|
|
var seriesUid = e.detail.image.data.string('x0020000e')
|
|
var studyIndex = -1
|
|
var seriesIndex = -1
|
|
for (let i = 0; i < this.studyList.length; ++i) {
|
|
for (let j = 0; j < this.studyList[i].SeriesList.length; ++j) {
|
|
if (this.studyList[i].SeriesList[j].seriesUid === seriesUid) {
|
|
studyIndex = i
|
|
seriesIndex = j
|
|
break
|
|
}
|
|
}
|
|
if (studyIndex > 0) break
|
|
}
|
|
if (seriesIndex < 0) return
|
|
|
|
const imageIdIndex = this.studyList[studyIndex].SeriesList[seriesIndex].imageIds.indexOf(imageId)
|
|
if (imageIdIndex < 0) return
|
|
// console.log(`---下载第${seriesIndex + 1}个序列-第${imageIdIndex + 1}张图像完成---`)
|
|
if (this.studyList[studyIndex].SeriesList[seriesIndex].imageloadedArr.indexOf(imageId) < 0) {
|
|
// ++this.studyList[studyIndex].SeriesList[seriesIndex].prefetchInstanceCount
|
|
// this.studyList[studyIndex].SeriesList[seriesIndex].imageloadedArr.push(imageId)
|
|
if (this.studyList[studyIndex].SeriesList[seriesIndex].prefetchInstanceCount >= this.studyList[studyIndex].SeriesList[seriesIndex].instanceCount) {
|
|
// this.studyList[studyIndex].SeriesList[seriesIndex].prefetchInstanceCount = this.studyList[studyIndex].SeriesList[seriesIndex].instanceCount
|
|
// 设置当前序列状态为已下载完成
|
|
// this.studyList[studyIndex].SeriesList[seriesIndex].loadStatus = true
|
|
// requestPoolManager.stopTaskTimer()
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.study-wrapper{
|
|
width:100%;
|
|
height: 100%;
|
|
overflow-y: auto;
|
|
.dicom-desc{
|
|
font-weight: bold;
|
|
font-size: 13px;
|
|
text-align: left;
|
|
color: #d0d0d0;
|
|
padding: 2px;
|
|
}
|
|
|
|
.ps {
|
|
overflow-anchor: none;
|
|
touch-action: auto;
|
|
}
|
|
.series-active {
|
|
background-color: #607d8b!important;
|
|
border: 1px solid #607d8b!important;
|
|
}
|
|
>>>.el-progress__text{
|
|
color: #ccc;
|
|
font-size: 12px;
|
|
}
|
|
.series{
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: flex-start;
|
|
.series-wrapper {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
width: 100%;
|
|
height: 85px;
|
|
// padding: 1px 2px 1px 8px;
|
|
// margin: 10px 0px;
|
|
border-radius: 2px;
|
|
border: 1px solid #404040;
|
|
background-color: #3a3a3a;
|
|
.el-progress__text{
|
|
display: none;
|
|
}
|
|
.el-progress-bar{
|
|
padding-right:0px;
|
|
}
|
|
|
|
.image-preview {
|
|
height: 60px;
|
|
width: 60px;
|
|
border: 2px solid #252525;
|
|
cursor: pointer;
|
|
}
|
|
.image-desc {
|
|
vertical-align: top;
|
|
p{
|
|
width: 100px;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
font-size: 12px;
|
|
color: #ddd;
|
|
margin: 0px;
|
|
line-height: 1.5;
|
|
}
|
|
}
|
|
.flex-div{
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
padding: 1px;
|
|
width: 100px;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
font-size: 12px;
|
|
color: #ddd;
|
|
padding: 1px;
|
|
margin: 0px;
|
|
}
|
|
}
|
|
}
|
|
.el-collapse{
|
|
border: none;
|
|
>>>.el-collapse-item{
|
|
background-color: #000!important;
|
|
color: #ddd;
|
|
|
|
}
|
|
>>>.el-collapse-item__content{
|
|
padding-bottom:10px;
|
|
background-color: #000!important;
|
|
}
|
|
>>>.el-collapse-item__header{
|
|
background-color: #000!important;
|
|
color: #ddd;
|
|
border-bottom-color:#5a5a5a;
|
|
padding-left: 5px;
|
|
height: 40px;
|
|
line-height: 20px;
|
|
}
|
|
}
|
|
}
|
|
</style>
|