420 lines
13 KiB
Plaintext
420 lines
13 KiB
Plaintext
<template>
|
|
<div class="viewerContainer">
|
|
<div class="viewerContentWrapper">
|
|
<div class="viewerLeftSidePanel">
|
|
<div id="listWrapper" class="sidePanelBody">
|
|
<div class="sidePanelThumbs">
|
|
<el-tabs v-model="activeName" type="border-card" @tab-click="handleTabClick">
|
|
<el-tab-pane label="当前序列" name="current-study">
|
|
<div class="text-desc">
|
|
{{ studyCode }}
|
|
</div>
|
|
<div class="text-desc">
|
|
{{ description }}
|
|
</div>
|
|
<div v-if="seriesCount" class="text-desc">
|
|
{{ modality }} : {{ seriesCount }} Series
|
|
</div>
|
|
<div class="viewerSidethumbs ps" style="position: relative;">
|
|
<div class="viewerSidethumbinner">
|
|
<div
|
|
v-for="(item, index) in seriesList"
|
|
|
|
:key="index"
|
|
class="viewernavigatorwrapper"
|
|
:class="{'viewerSideActive': index==0}"
|
|
style="position: relative;"
|
|
series-type="current"
|
|
@click="showSeriesImage($event,index)"
|
|
>
|
|
<el-image
|
|
class="image-preview"
|
|
style="height:72px;width:72px;"
|
|
:src="item.previewImageUrl"
|
|
fit="fill"
|
|
/>
|
|
<div class="viewernavitextwrapper">
|
|
<div style="padding: 1px;">
|
|
#{{ item.seriesNumber }}
|
|
</div>
|
|
<div v-show="item.instanceCount" style="padding: 1px;">
|
|
{{ item.modality }}: {{ item.instanceCount }} image
|
|
</div>
|
|
<div v-show=" item.sliceThickness" style="padding: 1px;">
|
|
T: {{ item.sliceThickness }}
|
|
</div>
|
|
<div v-show="item.description" style="padding: 1x;">
|
|
{{ item.description }}
|
|
</div>
|
|
<div style="padding: 1px;">
|
|
{{ item.prefetchInstanceCount }}/{{ item.instanceCount }}
|
|
</div>
|
|
|
|
</div>
|
|
<div style="position: absolute;bottom: -10px;left: 0;width: 100%;">
|
|
<el-progress v-if="item.prefetchInstanceCount>0 && item.prefetchInstanceCount<item.instanceCount" :percentage="Number(item.prefetchInstanceCount/item.instanceCount)*100" />
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-tab-pane>
|
|
</el-tabs>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="viewerContent">
|
|
<dicom-viewer id="dicomViewer" ref="dicomViewer" style="height:100%" />
|
|
</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 dicomViewer from '@/components/Dicom/DicomViewer'
|
|
import requestPoolManager from '@/utils/request-pool'
|
|
import store from '@/store'
|
|
cornerstoneWADOImageLoader.external.dicomParser = dicomParser
|
|
cornerstoneWADOImageLoader.external.cornerstone = cornerstone
|
|
// cornerstoneWADOImageLoader.webWorkerManager.initialize({
|
|
// webWorkerPath: './webWorker.js',
|
|
// taskConfiguration: {
|
|
// 'decodeTask': {
|
|
// codecsPath: './dicomCodecs.js'
|
|
// }
|
|
// }
|
|
// })
|
|
const maximumSizeInBytes = 1024 * 1024 * 1024 // 1 GB
|
|
export default {
|
|
name: 'DicomsOfSeries',
|
|
components: {
|
|
'dicom-viewer': dicomViewer
|
|
},
|
|
data() {
|
|
return {
|
|
studyCode: '',
|
|
modality: '',
|
|
seriesCount: 0,
|
|
description: '',
|
|
seriesList: [],
|
|
cachedImages: [],
|
|
isStartLoad: false,
|
|
firstInstanceId: ''
|
|
}
|
|
},
|
|
created() {
|
|
store.dispatch('user/setToken', this.$router.currentRoute.query.token)
|
|
cornerstone.events.addEventListener('cornerstoneimageloaded', this.cornerstoneImageLoaded)
|
|
this.initStudy()
|
|
},
|
|
beforeDestroy() {
|
|
requestPoolManager.stopTaskTimer()
|
|
},
|
|
methods: {
|
|
// 格式化序列信息
|
|
initStudy() {
|
|
this.studyCode = this.$router.currentRoute.query.studyCode
|
|
this.modality = this.$router.currentRoute.query.modality
|
|
this.seriesCount = 1
|
|
this.description = this.$router.currentRoute.query.description
|
|
if (this.$router.currentRoute.query.series) {
|
|
const seriesInfo = JSON.parse(this.$router.currentRoute.query.series)
|
|
var seriesList = []
|
|
const imageIds = []
|
|
// seriesInfo.InstanceList.forEach(function(item) {
|
|
// imageIds.push(`wadouri:/api/instance/content/${item}`)
|
|
// })
|
|
seriesInfo.InstanceList.forEach((id) => {
|
|
imageIds.push(`wadouri:http://123.56.94.154:7000/instance/content/${id}`)
|
|
})
|
|
seriesList.push({
|
|
imageIds: imageIds,
|
|
seriesId: seriesInfo.Id,
|
|
seriesUid: seriesInfo.SeriesInstanceUid,
|
|
seriesNumber: seriesInfo.SeriesNumber,
|
|
sliceThickness: seriesInfo.SliceThickness,
|
|
modality: seriesInfo.Modality,
|
|
description: seriesInfo.Description,
|
|
previewImageUrl: `/api/series/preview/${seriesInfo.Id}`,
|
|
instanceCount: seriesInfo.InstanceCount,
|
|
prefetchInstanceCount: 0,
|
|
loadStatus: false,
|
|
imageloadedArr: []
|
|
})
|
|
this.seriesList = seriesList
|
|
if (this.seriesList.length > 0) {
|
|
this.$nextTick(() => {
|
|
this.$refs.dicomViewer.loadImageStack(this.seriesList[0])
|
|
})
|
|
}
|
|
}
|
|
},
|
|
showSeriesImage(e, seriesIndex) {
|
|
const element = e.currentTarget
|
|
const elements = document.querySelectorAll('[series-type]')
|
|
Array.from(elements).forEach((e) => {
|
|
e.classList.remove('viewerSideActive')
|
|
})
|
|
element.classList.add('viewerSideActive')
|
|
this.currentSeriesIndex = seriesIndex
|
|
this.$refs.dicomViewer.loadImageStack(this.seriesList[seriesIndex])
|
|
},
|
|
loadAllImages() {
|
|
this.seriesList.forEach(series => {
|
|
series.imageIds.forEach(imageId => {
|
|
this.load(imageId, series.seriesId)
|
|
})
|
|
})
|
|
},
|
|
// 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)
|
|
// })
|
|
// })
|
|
// },
|
|
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)
|
|
})
|
|
})
|
|
},
|
|
imageLoaded(imageId, seriesUid) {
|
|
var seriesIndex = -1
|
|
for (let i = 0; i < this.seriesList.length; ++i) {
|
|
if (this.seriesList[i].seriesUid === seriesUid) {
|
|
seriesIndex = i
|
|
break
|
|
}
|
|
}
|
|
if (seriesIndex < 0) return
|
|
|
|
const imageIdIndex = this.seriesList[seriesIndex].imageIds.indexOf(imageId)
|
|
if (imageIdIndex < 0) return
|
|
if (this.seriesList[seriesIndex].imageloadedArr.indexOf(imageId) < 0) {
|
|
++this.seriesList[seriesIndex].prefetchInstanceCount
|
|
this.seriesList[seriesIndex].imageloadedArr.push(imageId)
|
|
|
|
if (this.seriesList[seriesIndex].prefetchInstanceCount >= this.seriesList[seriesIndex].instanceCount) {
|
|
this.seriesList[seriesIndex].prefetchInstanceCount = this.seriesList[seriesIndex].instanceCount
|
|
// 设置当前序列状态为已下载完成
|
|
this.seriesList[seriesIndex].loadStatus = true
|
|
}
|
|
}
|
|
},
|
|
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) {
|
|
if (this.firstInstanceId === e.detail.image.imageId && !this.isStartLoad) {
|
|
// 初始化图像加载完成时，自动下载
|
|
this.loadAllImages()
|
|
this.isStartLoad = true
|
|
requestPoolManager.executeTask()
|
|
}
|
|
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 seriesIndex = -1
|
|
for (let i = 0; i < this.seriesList.length; ++i) {
|
|
if (this.seriesList[i].seriesUid === seriesUid) {
|
|
seriesIndex = i
|
|
break
|
|
}
|
|
}
|
|
if (seriesIndex < 0) return
|
|
|
|
const imageIdIndex = this.seriesList[seriesIndex].imageIds.indexOf(imageId)
|
|
if (imageIdIndex < 0) return
|
|
if (this.seriesList[seriesIndex].imageloadedArr.indexOf(imageId) < 0) {
|
|
++this.seriesList[seriesIndex].prefetchInstanceCount
|
|
this.seriesList[seriesIndex].imageloadedArr.push(imageId)
|
|
|
|
if (this.seriesList[seriesIndex].prefetchInstanceCount >= this.seriesList[seriesIndex].instanceCount) {
|
|
this.seriesList[seriesIndex].prefetchInstanceCount = this.seriesList[seriesIndex].instanceCount
|
|
// 设置当前序列状态为已下载完成
|
|
this.seriesList[seriesIndex].loadStatus = true
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.viewerContainer{
|
|
display: block;
|
|
height: 100%;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
background-color: #444;
|
|
overflow: hidden;
|
|
.el-tabs--border-card{
|
|
background:none;
|
|
border: none;
|
|
}
|
|
.el-tabs--border-card>.el-tabs__content{
|
|
padding: 5px 0px 0px 0px;
|
|
}
|
|
.el-tabs__item{
|
|
height: 35px;
|
|
line-height: 35px;
|
|
}
|
|
::-webkit-scrollbar {
|
|
width: 7px;
|
|
height: 7px;
|
|
}
|
|
::-webkit-scrollbar-thumb {
|
|
border-radius: 10px;
|
|
background: #d0d0d0;
|
|
}
|
|
.relationVisit{
|
|
line-height: 20px;
|
|
cursor: pointer;
|
|
}
|
|
.viewerBanner {
|
|
background: linear-gradient(0,#444,#222);
|
|
min-height: 28px;
|
|
font-size: 16px;
|
|
margin: 0;
|
|
height: 30px;
|
|
padding-top: 0;
|
|
padding-left: 5px;
|
|
padding-right: 5px;
|
|
font-weight: bold;
|
|
}
|
|
.viewerContentWrapper {
|
|
display: flex;
|
|
flex-direction: row;
|
|
width: 100%;
|
|
padding: 5px;
|
|
/* height: 95%; */
|
|
height: 99%;
|
|
overflow: hidden;
|
|
text-overflow: clip;
|
|
white-space: nowrap;
|
|
}
|
|
.viewerContentWrapper>div {
|
|
display: inline-block;
|
|
white-space: normal;
|
|
}
|
|
.viewerLeftSidePanel {
|
|
width: 215px;
|
|
background-color: #323232;
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
padding: 0;
|
|
margin-right: 2px;
|
|
color: #D0D0D0;
|
|
overflow-y: auto;
|
|
}
|
|
.viewerContentWrapper>div>.sidePanelBody {
|
|
background: rgba(50,50,50,1);
|
|
word-break: break-all;
|
|
display: table;
|
|
width: 100%;
|
|
border: 1px solid #3e3f3a;
|
|
}
|
|
.viewerContentWrapper>div>div.sidePanelBody>div {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.text-desc{
|
|
font-weight: bold;
|
|
font-size: 13px;
|
|
text-align: center;
|
|
// background: rgb(88 84 83);
|
|
color: #d0d0d0;
|
|
padding: 2px;
|
|
}
|
|
.ps {
|
|
overflow: hidden !important;
|
|
overflow-anchor: none;
|
|
-ms-overflow-style: none;
|
|
touch-action: auto;
|
|
-ms-touch-action: auto;
|
|
}
|
|
.viewerLeftSidePanel .viewernavigatorwrapper {
|
|
display: flex;
|
|
width: 210px;
|
|
height: 84px;
|
|
padding: 1px 2px 1px 8px;
|
|
margin: 6px 0 6px 1px;
|
|
border-radius: 2px;
|
|
border: 1px solid #404040;
|
|
}
|
|
.viewernavigatorwrapper .el-progress__text{
|
|
display: none;
|
|
}
|
|
.viewernavigatorwrapper .el-progress-bar{
|
|
padding-right:0px;
|
|
}
|
|
.ui-draggable-handle {
|
|
-ms-touch-action: none;
|
|
touch-action: none;
|
|
}
|
|
.viewerLeftSidePanel .image-preview {
|
|
border: 2px solid #252525;
|
|
cursor: pointer;
|
|
}
|
|
.viewerLeftSidePanel .viewernavitextwrapper {
|
|
/* width: 120px;
|
|
height: 80px; */
|
|
flex:1;
|
|
padding: 3px 1px 3px 4px;
|
|
vertical-align: top;
|
|
font-size: 12px;
|
|
}
|
|
.viewerLeftSidePanel .viewerlabelwrapper {
|
|
width: 20px;
|
|
font-size: 12px;
|
|
}
|
|
.viewerSideActive {
|
|
background: #16477b;
|
|
background: #16477b80;
|
|
border: 1px solid #23527b;
|
|
}
|
|
.viewerContent {
|
|
flex: 1;
|
|
height: 100%;
|
|
display: block;
|
|
background-color: black;
|
|
color: #D0D0D0;
|
|
font-size: 13px;
|
|
}
|
|
}
|
|
</style>
|
|
|