823 lines
32 KiB
Plaintext
823 lines
32 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="$t('trials:dicom-show:currentVisit')" name="current-study">
|
|
<div class="text-desc" style="background:rgb(55 55 55);">
|
|
{{ visitInfo }}
|
|
</div>
|
|
<div class="viewerSidethumbs ps" style="position: relative;">
|
|
<div class="viewerSidethumbinner">
|
|
<!-- <div
|
|
v-for="(study, index) in studyList"
|
|
:key="index"
|
|
> -->
|
|
<el-collapse v-model="activeNames">
|
|
<el-collapse-item v-for="(study, index) in studyList" :key="`${study.StudyId}`" :name="`${study.StudyId}`">
|
|
<template slot="title">
|
|
|
|
<div class="text-desc">
|
|
{{ study.StudyCode }}
|
|
</div>
|
|
<!-- <div v-show="study.Description" class="text-desc">
|
|
{{ study.Description }}
|
|
</div> -->
|
|
<el-tooltip v-show="study.Description" class="item" effect="dark" :content="study.Description" placement="bottom">
|
|
<div v-show="study.Description" style="width: 50px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;padding: 1x;">
|
|
{{ study.Description }}
|
|
</div>
|
|
</el-tooltip>
|
|
<div v-show="study.SeriesCount" class="text-desc">
|
|
{{ study.Modalities }} : {{ study.SeriesCount }} Series
|
|
</div>
|
|
</template>
|
|
<div v-show="study.Description" class="text-desc" style="background-color: #1f1f1f;">
|
|
{{ study.Description }}
|
|
</div>
|
|
<div
|
|
v-for="(series, i) in study.SeriesList"
|
|
:key="i"
|
|
:class="{'viewerSideActive': i==0 && index === 0}"
|
|
style="position: relative;margin-bottom:5px;border-radius: 2px;border: 1px solid #404040;"
|
|
series-type="current"
|
|
@click="showSeriesImage($event,index,i,series)"
|
|
>
|
|
<div class="viewernavigatorwrapper">
|
|
<!-- <el-image
|
|
class="image-preview"
|
|
style="height:72px;width:72px;"
|
|
:src="series.previewImageUrl"
|
|
fit="fill"
|
|
/> -->
|
|
|
|
<img
|
|
class="image-preview"
|
|
:src="series.previewImageUrl"
|
|
crossorigin="anonymous"
|
|
alt=""
|
|
style="width: 85px;height:85px;"
|
|
fit="fill"
|
|
>
|
|
<div class="viewernavitextwrapper">
|
|
<div style="padding: 1px;">
|
|
#{{ series.seriesNumber }}
|
|
</div>
|
|
<div v-show="series.InstanceCount" style="padding: 1px;">
|
|
{{ series.modality }}: {{ series.instanceCount }} image
|
|
</div>
|
|
<div v-show=" series.sliceThickness" style="padding: 1px;">
|
|
T: {{ series.sliceThickness }}
|
|
</div>
|
|
|
|
<el-tooltip v-show="series.description" class="item" effect="dark" :content="series.description" placement="bottom">
|
|
<div v-show="series.description" style="width: 120px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;padding: 1x;">
|
|
{{ series.description }}
|
|
</div>
|
|
</el-tooltip>
|
|
<div style="padding: 1px;">
|
|
{{ series.prefetchInstanceCount }}/{{ series.instanceCount }}
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<div v-if="showDelete" @click.stop="">
|
|
|
|
<span style="font-size: 12px;">{{ $t('trials:audit:table:isReading') }}</span>
|
|
<el-switch
|
|
v-model="series.isReading"
|
|
size="mini"
|
|
@change="changeReadingStatus($event, series)"
|
|
/>
|
|
|
|
<span style="font-size: 12px;">{{ $t('trials:audit:table:isDelete') }}</span>
|
|
<el-switch
|
|
v-model="series.isDeleted"
|
|
size="mini"
|
|
@change="changeDeleteStatus($event, series)"
|
|
/>
|
|
</div>
|
|
<!-- <div style="position: absolute;bottom: -10px;left: 0;width: 100%;">
|
|
<el-progress v-if="series.prefetchInstanceCount>0 && series.prefetchInstanceCount<series.instanceCount" :percentage="Number(series.prefetchInstanceCount/series.instanceCount)*100" />
|
|
</div> -->
|
|
<div v-if="series.prefetchInstanceCount>0 && series.prefetchInstanceCount<series.instanceCount">
|
|
<el-progress :percentage="parseInt(((series.prefetchInstanceCount/series.instanceCount)*100).toFixed(2))" />
|
|
</div>
|
|
|
|
</div>
|
|
</el-collapse-item>
|
|
|
|
</el-collapse>
|
|
|
|
</div>
|
|
</div>
|
|
</el-tab-pane>
|
|
<el-tab-pane :label="$t('trials:dicom-show:relatedVisit')" name="relation-study" class="pane-relation-wrapper">
|
|
<div class="viewerSidethumbinner">
|
|
<el-collapse v-model="relationActiveName" @change="handelRelationActiveChange">
|
|
<el-collapse-item v-for="(study) in relationStudyList" :key="`${study.StudyId}`" :name="`${study.StudyId}`">
|
|
<template slot="title">
|
|
|
|
<div class="text-desc">
|
|
{{ study.StudyCode }}
|
|
</div>
|
|
<!-- <div v-show="study.Description" class="text-desc">
|
|
{{ study.Description }}
|
|
</div> -->
|
|
|
|
<div v-show="study.SeriesCount" class="text-desc">
|
|
{{ study.Modalities }} : {{ study.SeriesCount }} Series
|
|
</div>
|
|
</template>
|
|
<div v-show="study.Description" class="text-desc" style="background-color: #1f1f1f;">
|
|
{{ study.Description }}
|
|
</div>
|
|
<div v-if="study.seriesList" class="viewerSidethumbs ps" style="position: relative;">
|
|
<div class="viewerSidethumbinner">
|
|
<div
|
|
v-for="(seriesItem, index) in study.seriesList"
|
|
:key="index"
|
|
class="viewernavigatorwrapper"
|
|
style="position: relative;border:1px solid #434343;"
|
|
series-type="relation"
|
|
@click="showRelationSeriesImage($event,seriesItem,index)"
|
|
>
|
|
<!-- <el-image
|
|
class="image-preview"
|
|
style="height:72px;width:72px;"
|
|
:src="seriesItem.previewImageUrl"
|
|
fit="fill"
|
|
/> -->
|
|
<img
|
|
class="image-preview"
|
|
:src="seriesItem.previewImageUrl"
|
|
crossorigin="anonymous"
|
|
alt=""
|
|
style="width: 85px;height:85px;"
|
|
fit="fill"
|
|
>
|
|
|
|
<div class="viewernavitextwrapper">
|
|
<div v-if="seriesItem.keySeries" style="padding: 1px;color:red">
|
|
Key Images
|
|
</div>
|
|
<div v-else style="padding: 1px;">
|
|
#{{ seriesItem.seriesNumber }}
|
|
</div>
|
|
<div v-show=" seriesItem.instanceCount" style="padding: 1px;">
|
|
{{ seriesItem.modality }}: {{ seriesItem.instanceCount }} image
|
|
</div>
|
|
<div v-show="seriesItem.sliceThickness" style="padding: 1px;">
|
|
T: {{ seriesItem.sliceThickness }}
|
|
</div>
|
|
<el-tooltip v-show="seriesItem.description" class="item" effect="dark" :content="seriesItem.description" placement="bottom">
|
|
<div v-show="seriesItem.description" style="width: 120px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;padding: 1x;">
|
|
{{ seriesItem.description }}
|
|
</div>
|
|
</el-tooltip>
|
|
|
|
</div>
|
|
<!-- <div style="position: absolute;bottom: -10px;left: 0;width: 100%;">
|
|
<el-progress v-if="seriesItem.prefetchInstanceCount>0 && seriesItem.prefetchInstanceCount<seriesItem.instanceCount" :percentage="Number(seriesItem.prefetchInstanceCount/seriesItem.instanceCount)*100" />
|
|
</div> -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-collapse-item>
|
|
</el-collapse>
|
|
|
|
</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 { getVisitStudyList, getAllRelationStudyList, getSeriesList } from '@/api/reading'
|
|
import { setSeriesStatus } from '@/api/trials'
|
|
import requestPoolManager from '@/utils/request-pool'
|
|
import store from '@/store'
|
|
import { changeURLStatic } from '@/utils/history.js'
|
|
cornerstoneWADOImageLoader.external.dicomParser = dicomParser
|
|
cornerstoneWADOImageLoader.external.cornerstone = cornerstone
|
|
const maximumSizeInBytes = 1024 * 1024 * 1024 // 1 GB
|
|
export default {
|
|
name: 'DicomsOfVisit',
|
|
components: {
|
|
'dicom-viewer': dicomViewer
|
|
},
|
|
data() {
|
|
return {
|
|
studyList: [],
|
|
visitInfo: '',
|
|
activeName: 'current-study',
|
|
relationStudyList: [],
|
|
cachedImages: [],
|
|
isReading: null,
|
|
isStartLoad: false,
|
|
firstInstanceId: '',
|
|
firstSeriesId: '',
|
|
showDelete: 0,
|
|
imageList: [],
|
|
activeNames: [],
|
|
relationActiveName: []
|
|
}
|
|
},
|
|
mounted() {
|
|
if (this.$router.currentRoute.query.TokenKey) {
|
|
store.dispatch('user/setToken', this.$router.currentRoute.query.TokenKey)
|
|
changeURLStatic('TokenKey', '')
|
|
}
|
|
|
|
this.trialId = this.$router.currentRoute.query.trialId
|
|
this.subjectVisitId = this.$router.currentRoute.query.subjectVisitId
|
|
this.visitInfo = this.$router.currentRoute.query.visitInfo
|
|
this.isReading = this.$router.currentRoute.query.isReading ? this.$router.currentRoute.query.isReading * 1 : 0
|
|
this.showDelete = parseInt(this.$router.currentRoute.query.showDelete)
|
|
cornerstone.events.addEventListener('cornerstoneimageloaded', this.cornerstoneImageLoaded)
|
|
this.getStudiesInfo()
|
|
},
|
|
beforeDestroy() {
|
|
requestPoolManager.stopTaskTimer()
|
|
},
|
|
methods: {
|
|
// 获取某个访视下所有的检查信息
|
|
getStudiesInfo() {
|
|
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}`)
|
|
// })
|
|
// series.InstanceList.forEach((id) => {
|
|
// imageIds.push(`wadouri:http://123.56.94.154:7000/instance/content/${id}`)
|
|
// })
|
|
series.InstancePathList.forEach((path) => {
|
|
imageIds.push(`wadouri:${localStorage.getItem('location') !== 'USA' ? this.OSSclientConfig.basePath : this.OSSclientConfig.basePath}${path}`)
|
|
})
|
|
seriesList.push({
|
|
trialId: this.trialId,
|
|
subjectVisitId: this.subjectVisitId,
|
|
studyId: study.StudyId,
|
|
imageIds: imageIds,
|
|
seriesId: series.Id,
|
|
seriesUid: series.SeriesInstanceUid,
|
|
seriesNumber: series.SeriesNumber,
|
|
sliceThickness: series.SliceThickness,
|
|
modality: series.Modality,
|
|
description: series.Description,
|
|
isReading: series.IsReading,
|
|
isDeleted: series.IsDeleted,
|
|
previewImageUrl: series.ImageResizePath ? this.OSSclientConfig.basePath + series.ImageResizePath : `/api/series/preview/${series.Id}`,
|
|
instanceCount: series.InstanceCount,
|
|
prefetchInstanceCount: 0,
|
|
loadStatus: false,
|
|
imageloadedArr: []
|
|
})
|
|
})
|
|
data.SeriesList = seriesList
|
|
this.studyList.push(data)
|
|
})
|
|
if (this.studyList.length > 0) {
|
|
this.$refs.dicomViewer.loadImageStack(this.studyList[0].SeriesList[0])
|
|
const imageId = this.studyList[0].SeriesList[0].imageIds[0]
|
|
let instanceId = imageId.split('/')[imageId.split('/').length - 1]
|
|
instanceId = instanceId.split('.')[0]
|
|
this.firstInstanceId = instanceId
|
|
this.activeNames = [this.studyList[0].StudyId]
|
|
}
|
|
})
|
|
},
|
|
showSeriesImage(e, studyIndex, seriesIndex, series) {
|
|
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.studyList[studyIndex].SeriesList[seriesIndex])
|
|
if (!series.loadStatus) {
|
|
series.isLoading = true
|
|
var p = parseInt(new Date().getTime())
|
|
series.imageIds.map((imageId, i) => {
|
|
var priority = ''
|
|
if (i === 0) {
|
|
priority = parseInt(new Date().getTime()) * 10
|
|
} else {
|
|
priority = p - 1
|
|
}
|
|
this.imageList.push({ imageId: imageId, seriesId: series.seriesId, priority })
|
|
// this.load(imageId, series.seriesId, priority)
|
|
})
|
|
}
|
|
},
|
|
changeReadingStatus(callback, data) {
|
|
let statusStr = ''
|
|
if (callback) {
|
|
statusStr = this.$t('trials:audit:label:setSeriesReading')
|
|
data.isReading = false
|
|
} else {
|
|
statusStr = this.$t('trials:audit:label:setSeriesNotReading')
|
|
data.isReading = true
|
|
}
|
|
var message = this.$t('trials:audit:message:changeSeriesStatus').replace('xxx', statusStr)
|
|
this.$confirm(message, {
|
|
distinguishCancelAndClose: true,
|
|
type: 'warning'
|
|
}).then(() => {
|
|
const state = data.isReading ? 1 : 2
|
|
this.loading = true
|
|
|
|
setSeriesStatus(data.trialId, data.subjectVisitId, data.studyId, data.seriesId, state).then(res => {
|
|
this.loading = false
|
|
if (res.IsSuccess) {
|
|
data.isReading = !data.isReading
|
|
this.$message.success(this.$t('common:message:savedSuccessfully'))
|
|
window.opener.postMessage({ type: 'refreshSeriesList', data: '' }, window.location)
|
|
}
|
|
}).catch(() => { this.loading = false })
|
|
}).catch(() => {})
|
|
},
|
|
changeDeleteStatus(callback, data) {
|
|
let statusStr = ''
|
|
if (callback) {
|
|
statusStr = this.$t('trials:audit:label:setSeriesDeleted')
|
|
data.isDeleted = false
|
|
} else {
|
|
statusStr = this.$t('trials:audit:label:setSeriesNotDelete')
|
|
data.isDeleted = true
|
|
}
|
|
var message = this.$t('trials:audit:message:changeSeriesStatus').replace('xxx', statusStr)
|
|
this.$confirm(message, {
|
|
distinguishCancelAndClose: true,
|
|
type: 'warning'
|
|
}).then(() => {
|
|
const state = data.isDeleted ? 5 : 4
|
|
this.loading = true
|
|
setSeriesStatus(data.trialId, data.subjectVisitId, data.studyId, data.seriesId, state).then(res => {
|
|
this.loading = false
|
|
if (res.IsSuccess) {
|
|
data.isDeleted = !data.isDeleted
|
|
this.$message.success(this.$t('common:message:savedSuccessfully'))
|
|
window.opener.postMessage({ type: 'refreshSeriesList', data: '' }, window.location)
|
|
}
|
|
}).catch(() => { this.loading = false })
|
|
}).catch(() => {})
|
|
},
|
|
// 切换关联检查Tab时获取关联检查信息
|
|
handleTabClick(tab, event) {
|
|
if (tab.name === 'relation-study' && this.relationStudyList.length <= 0) {
|
|
const loading = this.$loading({
|
|
target: document.querySelector('.pane-relation-wrapper'),
|
|
fullscreen: false,
|
|
lock: true,
|
|
text: 'Loading',
|
|
background: 'rgb(49 49 49 / 50%)',
|
|
spinner: 'el-icon-loading'
|
|
})
|
|
getAllRelationStudyList(this.subjectVisitId).then(res => {
|
|
loading.close()
|
|
this.relationStudyList = res.Result
|
|
console.log(this.relationStudyList)
|
|
}).catch(() => { loading.close() })
|
|
}
|
|
},
|
|
handelRelationActiveChange(v) {
|
|
var selectedId = v.length > 0 ? v[v.length - 1] : ''
|
|
if (!selectedId) return
|
|
var sIdx = this.relationStudyList.findIndex(study => study.StudyId === selectedId)
|
|
if (sIdx > -1) {
|
|
this.getRelationSeriesByStudy(selectedId, sIdx)
|
|
}
|
|
},
|
|
// 根据关联检查获取序列信息
|
|
getRelationSeriesByStudy(studyId, index) {
|
|
console.log('getRelationSeriesByStudy')
|
|
if (this.relationStudyList[index].seriesCount) {
|
|
this.relationStudyList[index].showSeries = !this.relationStudyList[index].showSeries
|
|
this.$forceUpdate()
|
|
} else {
|
|
const scope = this
|
|
const loading = this.$loading({
|
|
target: document.querySelector(`.relation-study-wrapper-${index}`),
|
|
fullscreen: false,
|
|
lock: true,
|
|
text: 'Loading',
|
|
background: 'rgb(49 49 49 / 50%)',
|
|
spinner: 'el-icon-loading'
|
|
})
|
|
getSeriesList(`/series/list/${studyId}`).then(data => {
|
|
loading.close()
|
|
if (data.Result != null && data.Result.length > 0) {
|
|
var seriesList = []
|
|
const res = data.Result
|
|
res.forEach(function(item) {
|
|
const imageIds = []
|
|
// item.InstanceList.forEach(function(id) {
|
|
// imageIds.push(`wadouri:/api/instance/content/${id}`)
|
|
// })
|
|
// item.InstanceList.forEach((id) => {
|
|
// imageIds.push(`wadouri:http://123.56.94.154:7000/instance/content/${id}`)
|
|
// })
|
|
item.InstancePathList.forEach((path) => {
|
|
imageIds.push(`wadouri:${localStorage.getItem('location') !== 'USA' ? scope.OSSclientConfig.basePath : scope.OSSclientConfig.basePath}${path}`)
|
|
})
|
|
seriesList.push({
|
|
imageIds: imageIds,
|
|
seriesId: item.Id,
|
|
seriesUid: item.SeriesInstanceUid,
|
|
seriesNumber: item.SeriesNumber,
|
|
sliceThickness: item.SliceThickness,
|
|
modality: item.Modality,
|
|
description: item.Description,
|
|
previewImageUrl: item.ImageResizePath ? scope.OSSclientConfig.basePath + item.ImageResizePath : `/api/series/preview/${item.Id}`,
|
|
instanceCount: item.InstanceCount,
|
|
prefetchInstanceCount: 0,
|
|
hasLabel: item.HasLabel,
|
|
keySeries: item.KeySeries,
|
|
loadStatus: false,
|
|
imageloadedArr: []
|
|
})
|
|
})
|
|
scope.relationStudyList[index].seriesCount = seriesList.length
|
|
scope.relationStudyList[index].seriesList = seriesList
|
|
scope.relationStudyList[index].showSeries = true
|
|
console.log(scope.relationStudyList)
|
|
scope.$forceUpdate()
|
|
}
|
|
}).catch(() => { loading.close() })
|
|
}
|
|
},
|
|
showRelationSeriesImage(e, series, index) {
|
|
this.currentRelationIndex = index
|
|
const element = e.currentTarget
|
|
const elements = document.querySelectorAll('[series-type]')
|
|
Array.from(elements).forEach((e) => {
|
|
e.classList.remove('viewerSideActive')
|
|
})
|
|
element.classList.add('viewerSideActive')
|
|
this.$refs.dicomViewer.loadImageStack(series)
|
|
if (!series.loadStatus) {
|
|
var priority = parseInt(new Date().getTime())
|
|
series.imageIds.map(imageId => {
|
|
this.imageList.push({ imageId: imageId, seriesId: series.seriesId, priority })
|
|
})
|
|
}
|
|
},
|
|
loadAllImages() {
|
|
var priority = parseInt(new Date().getTime())
|
|
this.studyList.map(study => {
|
|
study.SeriesList.map(series => {
|
|
if (!series.loadStatus && series.seriesId !== this.firstSeriesId) {
|
|
series.imageIds.map(imageId => {
|
|
// imageIds.push({ imageId: image, seriesId: series.seriesId, priority })
|
|
this.imageList.push({ imageId: imageId, seriesId: series.seriesId, priority })
|
|
})
|
|
}
|
|
})
|
|
})
|
|
if (this.imageList.length > 0) {
|
|
this.loopLoad()
|
|
}
|
|
// requestPoolManager.setPendingList(imageIds)
|
|
},
|
|
loopLoad() {
|
|
if (this.imageList.length > 0) {
|
|
requestPoolManager.startTaskTimer()
|
|
this.imageList.map(image => {
|
|
requestPoolManager.loadAndCacheImagePlus(image.imageId, image.seriesId, image.priority).then(res => {
|
|
this.imageLoaded(image, res.data.string('x0020000e'))
|
|
})
|
|
})
|
|
|
|
this.imageList = []
|
|
}
|
|
},
|
|
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)
|
|
})
|
|
})
|
|
},
|
|
// 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) {
|
|
// 清理缓存的影像
|
|
}
|
|
},
|
|
imageLoaded(imageId, seriesUid) {
|
|
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
|
|
}
|
|
}
|
|
},
|
|
// instance下载成功回调
|
|
cornerstoneImageLoaded(e) {
|
|
if (e.detail.image.imageId.includes(this.firstInstanceId) && !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 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 >
|
|
.viewerContainer .el-tabs--border-card{
|
|
background:none;
|
|
border: none;
|
|
}
|
|
.viewerContainer .el-tabs__item{
|
|
height: 35px;
|
|
line-height: 35px;
|
|
width: 100px;
|
|
padding: 0!important;
|
|
text-align: center;
|
|
transform: scale(.8);
|
|
}
|
|
.viewerContainer .el-tabs--border-card>.el-tabs__content{
|
|
padding: 5px 0px 0px 0px;
|
|
}
|
|
.viewerContainer ::-webkit-scrollbar {
|
|
width: 7px;
|
|
height: 7px;
|
|
}
|
|
.viewerContainer ::-webkit-scrollbar-thumb {
|
|
border-radius: 10px;
|
|
background: #d0d0d0;
|
|
}
|
|
.viewerContainer .relationVisit{
|
|
line-height: 20px;
|
|
cursor: pointer;
|
|
}
|
|
.viewerContainer{
|
|
display: block;
|
|
height: 100%;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
background-color: #444;
|
|
overflow: hidden;
|
|
}
|
|
.viewerContainer .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;
|
|
}
|
|
.viewerContainer .viewerContentWrapper {
|
|
display: flex;
|
|
flex-direction: row;
|
|
width: 100%;
|
|
padding: 5px;
|
|
/* height: 95%; */
|
|
height: 99%;
|
|
overflow: hidden;
|
|
text-overflow: clip;
|
|
white-space: nowrap;
|
|
}
|
|
.viewerContainer .viewerContentWrapper>div {
|
|
display: inline-block;
|
|
white-space: normal;
|
|
}
|
|
.viewerContainer .viewerLeftSidePanel {
|
|
width: 215px;
|
|
background-color: #323232;
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
padding: 0;
|
|
margin-right: 2px;
|
|
color: #D0D0D0;
|
|
overflow-y: auto;
|
|
}
|
|
.viewerContainer .viewerContentWrapper>div>.sidePanelBody {
|
|
background: rgba(50,50,50,1);
|
|
word-break: break-all;
|
|
display: table;
|
|
width: 100%;
|
|
border: 1px solid #3e3f3a;
|
|
}
|
|
.viewerContainer .viewerContentWrapper>div>div.sidePanelBody>div {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.viewerContainer .text-desc{
|
|
font-weight: bold;
|
|
font-size: 13px;
|
|
text-align: center;
|
|
background: #585453;
|
|
color: #d0d0d0;
|
|
padding: 2px;
|
|
}
|
|
.viewerContainer .ps {
|
|
overflow: hidden !important;
|
|
overflow-anchor: none;
|
|
-ms-overflow-style: none;
|
|
touch-action: auto;
|
|
-ms-touch-action: auto;
|
|
}
|
|
.viewerContainer .viewerLeftSidePanel .viewernavigatorwrapper {
|
|
display: flex;
|
|
width: 210px;
|
|
/* height: 84px; */
|
|
padding: 1px 2px 1px 2px;
|
|
margin: 2px 0 1px 1px;
|
|
/* border-radius: 2px;
|
|
border: 1px solid #404040; */
|
|
|
|
}
|
|
.viewerContainer .viewernavigatorwrapper .el-progress__text{
|
|
display: none;
|
|
}
|
|
.viewerContainer .viewernavigatorwrapper .el-progress-bar{
|
|
padding-right:0px;
|
|
}
|
|
.viewerContainer .ui-draggable-handle {
|
|
-ms-touch-action: none;
|
|
touch-action: none;
|
|
}
|
|
.viewerContainer .viewerLeftSidePanel .image-preview {
|
|
border: 2px solid #252525;
|
|
cursor: pointer;
|
|
}
|
|
.viewerContainer .viewerLeftSidePanel .viewernavitextwrapper {
|
|
/* width: 120px;
|
|
height: 80px; */
|
|
flex:1;
|
|
padding: 3px 1px 3px 4px;
|
|
vertical-align: top;
|
|
font-size: 12px;
|
|
}
|
|
.viewerContainer .viewerLeftSidePanel .viewerlabelwrapper {
|
|
width: 20px;
|
|
|
|
font-size: 12px;
|
|
}
|
|
.viewerContainer .viewerSideActive {
|
|
background: #16477b;
|
|
background: #16477b80;
|
|
border: 1px solid #23527b;
|
|
}
|
|
.viewerContainer .viewerContent {
|
|
flex: 1;
|
|
height: 100%;
|
|
display: block;
|
|
background-color: black;
|
|
color: #D0D0D0;
|
|
font-size: 13px;
|
|
}
|
|
.viewerContainer .pane-relation-wrapper{
|
|
min-height: 500px;
|
|
}
|
|
.viewerContainer .el-collapse{
|
|
border: none;
|
|
}
|
|
|
|
.viewerContainer .el-collapse-item{
|
|
background-color: #585453!important;
|
|
color: #ddd;
|
|
|
|
}
|
|
.viewerContainer .el-collapse-item__content{
|
|
padding-bottom:10px;
|
|
background-color: #2c2c2c!important;
|
|
color: #ddd;
|
|
}
|
|
.viewerContainer .el-collapse-item__header{
|
|
background-color: #585453!important;
|
|
color: #ddd;
|
|
border-bottom-color:#5a5a5a;
|
|
padding-left: 5px;
|
|
height: 40px;
|
|
line-height: 20px;
|
|
}
|
|
|
|
/* .viewerRightSidePanel {
|
|
width: 300px;
|
|
height: 100%;
|
|
background-color: #323232;
|
|
margin: 0;
|
|
padding: 0;
|
|
margin-left: 2px;
|
|
border: 1px solid blueviolet;
|
|
color: #D0D0D0;
|
|
font-size: 13px;
|
|
} */
|
|
</style>
|
|
|