409 lines
14 KiB
Plaintext
409 lines
14 KiB
Plaintext
<template>
|
|
<div v-loading="loading" class="study-wrapper">
|
|
<h3 style="color: #ddd;padding: 5px 0px;margin: 0;text-align: center;">
|
|
{{ taskBlindName }}
|
|
</h3>
|
|
<div class="ps">
|
|
<div
|
|
v-for="(study, index) in studyList"
|
|
:key="index"
|
|
>
|
|
<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>
|
|
<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)"
|
|
>
|
|
<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">
|
|
<p style="padding: 1px;">
|
|
#{{ series.seriesNumber }}
|
|
</p>
|
|
<p>#{{ series.seriesNumber }}</p>
|
|
<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>
|
|
<p>
|
|
{{ series.prefetchInstanceCount }}/{{ series.instanceCount }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div v-if="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 { getVisitStudyList } from '@/api/reading'
|
|
import { getTableAnswerRowInfoList } from '@/api/trials'
|
|
|
|
import requestPoolManager from '@/utils/request-pool'
|
|
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: 0,
|
|
seriesIndex: 0,
|
|
loading: false,
|
|
measuredData: [],
|
|
isRender: false
|
|
}
|
|
},
|
|
mounted() {
|
|
cornerstone.events.addEventListener('cornerstoneimageloaded', this.cornerstoneImageLoaded)
|
|
Store.$on('resetMeasuredData', async(instanceId) => {
|
|
await this.getMeasuredData()
|
|
this.studyList[this.studyIndex].SeriesList[this.seriesIndex].measuredData = this.measuredData
|
|
// this.$emit('loadImageStack', this.studyList[this.studyIndex].SeriesList[this.seriesIndex])
|
|
Store.$emit('updateImage', { measuredData: this.measuredData, instanceId: instanceId })
|
|
console.log('resetMeasuredData')
|
|
})
|
|
},
|
|
beforeDestroy() {
|
|
Store.$off('resetMeasuredData')
|
|
},
|
|
methods: {
|
|
async getStudyInfo() {
|
|
if (this.isRender) {
|
|
this.studyList[this.studyIndex].SeriesList[this.seriesIndex].measuredData = this.measuredData
|
|
this.$emit('loadImageStack', this.studyList[this.studyIndex].SeriesList[this.seriesIndex])
|
|
Store.$emit('loadMeasurementList', { visitTaskId: this.visitTaskId, taskBlindName: this.taskBlindName })
|
|
} else {
|
|
await this.getMeasuredData()
|
|
this.getStudiesInfo()
|
|
}
|
|
},
|
|
// 获取某个访视下所有的检查信息
|
|
getStudiesInfo() {
|
|
const loading = this.$loading({ fullscreen: true })
|
|
// this.loading = true
|
|
this.studyList = []
|
|
getVisitStudyList(this.trialId, this.subjectVisitId, this.isReading).then(res => {
|
|
res.Result.forEach((study) => {
|
|
const data = {}
|
|
data.StudyId = study.StudyId
|
|
data.StudyCode = study.StudyCode
|
|
data.Modalities = study.Modalities
|
|
data.SeriesCount = study.SeriesCount
|
|
data.InstanceCount = study.InstanceCount
|
|
data.InstanceCount = study.InstanceCount
|
|
data.PreviewImageCount = 0
|
|
var seriesList = []
|
|
study.SeriesList.forEach((series) => {
|
|
const imageIds = []
|
|
|
|
series.InstanceList.forEach((id) => {
|
|
imageIds.push(`wadouri:/api/instance/content/${id}`)
|
|
})
|
|
// var measuredData = this.measuredData.filter(item => item.SeriesId === series.Id)
|
|
seriesList.push({
|
|
imageIds: imageIds,
|
|
seriesId: series.Id,
|
|
imageIdIndex: 0,
|
|
seriesUid: series.SeriesInstanceUid,
|
|
seriesNumber: series.SeriesNumber,
|
|
sliceThickness: series.SliceThickness,
|
|
modality: series.Modality,
|
|
description: series.Description,
|
|
previewImageUrl: `/api/series/preview/${series.Id}`,
|
|
instanceCount: series.InstanceCount,
|
|
prefetchInstanceCount: 0,
|
|
loadStatus: false,
|
|
imageloadedArr: [],
|
|
studyId: study.StudyId,
|
|
taskBlindName: this.taskBlindName,
|
|
// measuredData: measuredData,
|
|
visitTaskId: this.visitTaskId
|
|
})
|
|
})
|
|
data.SeriesList = seriesList
|
|
this.studyList.push(data)
|
|
})
|
|
if (this.studyList.length > 0) {
|
|
this.studyList[0].SeriesList[0].measuredData = this.measuredData
|
|
this.$emit('loadImageStack', this.studyList[0].SeriesList[0])
|
|
Store.$emit('loadMeasurementList', { visitTaskId: this.visitTaskId, taskBlindName: this.taskBlindName })
|
|
this.loadAllImages()
|
|
}
|
|
this.isRender = true
|
|
// this.loading = false
|
|
loading.close()
|
|
}).catch(() => {
|
|
// this.loading = false
|
|
loading.close()
|
|
})
|
|
},
|
|
getMeasuredData() {
|
|
return new Promise((resolve, reject) => {
|
|
// this.loading = true
|
|
const loading = this.$loading({ fullscreen: true })
|
|
getTableAnswerRowInfoList(this.visitTaskId).then(res => {
|
|
res.Result.forEach(el => {
|
|
if (el.MeasureData) {
|
|
el.MeasureData = JSON.parse(el.MeasureData)
|
|
}
|
|
})
|
|
this.measuredData = res.Result
|
|
// this.loading = false
|
|
loading.close()
|
|
resolve()
|
|
}).catch(() => {
|
|
// this.loading = false
|
|
loading.close()
|
|
reject()
|
|
})
|
|
})
|
|
},
|
|
addTemporaryMeasuredData(data) {
|
|
this.measuredData.push(data)
|
|
this.studyList[this.studyIndex].SeriesList[this.seriesIndex].measuredData = this.measuredData
|
|
Store.$emit('updateImage', { measuredData: this.measuredData, instanceId: data.InstanceId })
|
|
},
|
|
|
|
// 缩略图下载成功回调,默认下载第一个检查的所有序列
|
|
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) {
|
|
this.studyIndex = studyIndex
|
|
this.seriesIndex = seriesIndex
|
|
this.studyList[studyIndex].SeriesList[seriesIndex].measuredData = this.measuredData
|
|
this.$emit('loadImageStack', this.studyList[studyIndex].SeriesList[seriesIndex])
|
|
Store.$emit('loadMeasurementList', { visitTaskId: this.visitTaskId, taskBlindName: this.taskBlindName })
|
|
},
|
|
toggleStudy(stack) {
|
|
if (!stack.studyId) return
|
|
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
|
|
Store.$emit('loadMeasurementList', { visitTaskId: this.visitTaskId, taskBlindName: this.taskBlindName })
|
|
},
|
|
loadAllImages() {
|
|
requestPoolManager.startTaskTimer()
|
|
const scope = this
|
|
this.studyList[0].SeriesList.forEach(series => {
|
|
series.imageIds.forEach(imageId => {
|
|
scope.load(imageId)
|
|
})
|
|
})
|
|
},
|
|
load(imageId, priority = 999) {
|
|
return new Promise((resolve, reject) => {
|
|
const imageTask = this.buildImageRequestTask(imageId, { priority })
|
|
requestPoolManager.addTaskIntoPool(imageTask).then((res) => {
|
|
resolve(res)
|
|
}).catch(e => {
|
|
reject(e)
|
|
console.log(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) {
|
|
// 清理缓存的影像
|
|
}
|
|
},
|
|
// instance下载成功回调
|
|
cornerstoneImageLoaded(e) {
|
|
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
|
|
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
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.study-wrapper{
|
|
width:100%;
|
|
height: 100%;
|
|
overflow-y: auto;
|
|
.dicom-desc{
|
|
font-weight: bold;
|
|
font-size: 13px;
|
|
text-align: center;
|
|
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;
|
|
padding: 1px;
|
|
margin: 0px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|