本地预览影像更改
parent
7a69227888
commit
bf4f0c7245
|
@ -90,7 +90,7 @@
|
|||
custom-class="base-dialog-wrapper"
|
||||
append-to-body
|
||||
>
|
||||
<DicomTags :image-id="stack.imageIds[stack.currentImageIdIndex]" @close="dcmTag.visible = false" />
|
||||
<dicom-tags :image-id="stack.imageIds[stack.currentImageIdIndex]" @close="dcmTag.visible = false" />
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
@ -217,10 +217,10 @@ export default {
|
|||
this.stack.description = dicomSeries.description
|
||||
this.toolState.viewportInvert = false
|
||||
this.toolState.dicomInfoVisible = false
|
||||
var imageId = this.stack.imageIds[this.stack.currentImageIdIndex]
|
||||
var instanceId = imageId.split('/')[imageId.split('/').length - 1]
|
||||
instanceId = instanceId.split('.')[0]
|
||||
this.stack.instanceId = instanceId
|
||||
// var imageId = this.stack.imageIds[this.stack.currentImageIdIndex]
|
||||
// var instanceId = imageId.split('/')[imageId.split('/').length - 1]
|
||||
// instanceId = instanceId.split('.')[0]
|
||||
// this.stack.instanceId = instanceId
|
||||
this.toolState.clipPlaying = false
|
||||
const element = this.$refs.canvas
|
||||
cornerstone.enable(element)
|
||||
|
@ -346,9 +346,9 @@ export default {
|
|||
// return
|
||||
// }
|
||||
// this.stack.instanceId = image.imageId.split('/')[image.imageId.split('/').length - 1]
|
||||
var instanceId = image.imageId.split('/')[image.imageId.split('/').length - 1]
|
||||
instanceId = instanceId.split('.')[0]
|
||||
this.stack.instanceId = instanceId
|
||||
// var instanceId = image.imageId.split('/')[image.imageId.split('/').length - 1]
|
||||
// instanceId = instanceId.split('.')[0]
|
||||
// this.stack.instanceId = instanceId
|
||||
this.height = (this.stack.currentImageIdIndex) * 100 / (this.stack.imageIds.length - 1)
|
||||
this.resetWwwc()
|
||||
},
|
||||
|
@ -415,15 +415,16 @@ export default {
|
|||
},
|
||||
|
||||
onImageRendered(e) {
|
||||
var imageId = e.detail.image.imageId
|
||||
var instanceId = imageId.split('/')[imageId.split('/').length - 1]
|
||||
instanceId = instanceId.split('.')[0]
|
||||
// var imageId = e.detail.image.imageId
|
||||
// var instanceId = imageId.split('/')[imageId.split('/').length - 1]
|
||||
// instanceId = instanceId.split('.')[0]
|
||||
|
||||
if (this.imageId !== instanceId) {
|
||||
this.getOrientationMarker(e.detail.element)
|
||||
this.imageId = instanceId
|
||||
}
|
||||
this.stack.instanceId = instanceId
|
||||
// if (this.imageId !== instanceId) {
|
||||
// this.getOrientationMarker(e.detail.element)
|
||||
// this.imageId = instanceId
|
||||
// }
|
||||
this.getOrientationMarker(e.detail.element)
|
||||
// this.stack.instanceId = instanceId
|
||||
var viewport = e.detail.viewport
|
||||
this.dicomInfo.wwwc = `${Math.round(
|
||||
viewport.voi.windowWidth
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div ref="preview-wrapper">
|
||||
<div ref="preview-wrapper" class="preview-wrapper">
|
||||
<div class="viewerContainer">
|
||||
<div class="viewerContentWrapper" style="padding-top:25px;">
|
||||
<div class="viewerLeftSidePanel">
|
||||
|
@ -38,7 +38,39 @@
|
|||
</span>
|
||||
</span>-->
|
||||
<div class="viewernavitextwrapper">
|
||||
<div style="padding: 1px;">#{{ item.seriesNumber }}</div>
|
||||
<div style="padding: 1px 5px 1px 1px;display: flex;justify-content: space-between;">
|
||||
<div style="padding: 1px;">#{{ item.seriesNumber }}</div>
|
||||
<div v-if="item.isExistMutiFrames && item.instanceCount > 1">
|
||||
<el-popover
|
||||
v-model="item.isShowPopper"
|
||||
placement="right-start"
|
||||
trigger="manual"
|
||||
popper-class="instance_frame_wrapper"
|
||||
>
|
||||
<div style="text-align: right;">
|
||||
<i class="el-icon-circle-close" style="font-size: 20px;cursor: pointer;color:#ddd;" @click="item.isShowPopper = false" />
|
||||
</div>
|
||||
<div class="frame_list">
|
||||
<div
|
||||
v-for="(instance, idx) in item.instanceInfoList"
|
||||
:key="instance.InstanceUid"
|
||||
class="frame_content"
|
||||
:style="{'margin-bottom':idx<item.instanceInfoList.length-1? '5px':'0px'}"
|
||||
@click="showMultiFrames(item, index, instance)"
|
||||
>
|
||||
<div>
|
||||
<div>{{ instance.InstanceNumber }}</div>
|
||||
<div>
|
||||
{{ `${instance.NumberOfFrames > 0 ? instance.NumberOfFrames : 1} frame` }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<i slot="reference" class="el-icon-connection" style="font-size: 15px;cursor: pointer;" @click="popperClick(seriesList, item)" />
|
||||
</el-popover>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="padding: 1px;">{{ item.description }}</div>
|
||||
<div
|
||||
v-show="item.instanceCount"
|
||||
|
@ -147,7 +179,11 @@ export default {
|
|||
})
|
||||
|
||||
var imageIds = []
|
||||
let isExistMutiFrames = false
|
||||
let instanceInfoList = []
|
||||
series.instanceList.forEach(function(instance) {
|
||||
console.log(instance)
|
||||
let instanceInfo = {}
|
||||
var fileId = cornerstoneWADOImageLoader.wadouri.fileManager.add(
|
||||
instance.file
|
||||
)
|
||||
|
@ -155,7 +191,19 @@ export default {
|
|||
for (var i = 0; i < instance.frameCount; ++i) {
|
||||
imageIds.push(`${fileId}?frame=${i}`)
|
||||
}
|
||||
} else imageIds.push(fileId)
|
||||
isExistMutiFrames = true
|
||||
instanceInfo.NumberOfFrames = instance.frameCount
|
||||
instanceInfo.InstanceNumber = instance.instanceNumber
|
||||
instanceInfo.InstanceUid = instance.instanceUid
|
||||
instanceInfo.FileId = fileId
|
||||
} else {
|
||||
imageIds.push(fileId)
|
||||
instanceInfo.NumberOfFrames = 0
|
||||
instanceInfo.InstanceNumber = instance.instanceNumber
|
||||
instanceInfo.InstanceUid = instance.instanceUid
|
||||
instanceInfo.FileId = fileId
|
||||
}
|
||||
instanceInfoList.push(instanceInfo)
|
||||
})
|
||||
|
||||
scope.seriesList.push({
|
||||
|
@ -164,13 +212,43 @@ export default {
|
|||
modality: series.modality,
|
||||
instanceCount: series.instanceList.length,
|
||||
imageIds: imageIds,
|
||||
previewImageId: imageIds[0]
|
||||
previewImageId: imageIds[0],
|
||||
isExistMutiFrames: isExistMutiFrames,
|
||||
instanceInfoList: instanceInfoList,
|
||||
isShowPopper: false
|
||||
})
|
||||
})
|
||||
|
||||
this.showSeriesImage(0)
|
||||
},
|
||||
|
||||
popperClick(seriesList, series) {
|
||||
for (let i = 0; i < seriesList.length; i++) {
|
||||
if (seriesList[i].isShowPopper) {
|
||||
seriesList[i].isShowPopper = false
|
||||
}
|
||||
}
|
||||
series.isShowPopper = !series.isShowPopper
|
||||
},
|
||||
showMultiFrames(series, seriesIndex, instanceInfo) {
|
||||
this.currentSeriesIndex = seriesIndex
|
||||
const imageIds = []
|
||||
if (instanceInfo.NumberOfFrames && instanceInfo.NumberOfFrames > 1) {
|
||||
for (let j = 0; j < instanceInfo.NumberOfFrames; j++) {
|
||||
imageIds.push(`${instanceInfo.FileId}?frame=${j}`)
|
||||
}
|
||||
} else {
|
||||
imageIds.push(instanceInfo.FileId)
|
||||
}
|
||||
const seriesInfo = {
|
||||
seriesNumber: series.seriesNumber,
|
||||
description: series.description,
|
||||
modality: series.modality,
|
||||
instanceCount: series.instanceCount,
|
||||
imageIds: imageIds,
|
||||
previewImageId: imageIds[0],
|
||||
}
|
||||
this.$refs.dicomViewer.loadImageStack(seriesInfo)
|
||||
},
|
||||
showSeriesImage(seriesIndex) {
|
||||
// if (seriesIndex === this.currentSeriesIndex) return;
|
||||
this.currentSeriesIndex = seriesIndex
|
||||
|
@ -183,136 +261,172 @@ export default {
|
|||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
::-webkit-scrollbar {
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
}
|
||||
<style lang="scss">
|
||||
::-webkit-scrollbar {
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
border-radius: 10px;
|
||||
background: #d0d0d0;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
border-radius: 10px;
|
||||
background: #d0d0d0;
|
||||
}
|
||||
|
||||
.viewerContainer {
|
||||
display: block;
|
||||
height: 100%;
|
||||
margin-top: 20px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
background-color: #444;
|
||||
overflow: hidden;
|
||||
}
|
||||
.viewerContainer {
|
||||
width: 100%;
|
||||
display: block;
|
||||
height: 100%;
|
||||
margin-top: 20px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
background-color: #444;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
.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: 99%;
|
||||
/* height: 95%; */
|
||||
overflow: hidden;
|
||||
text-overflow: clip;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.viewerContentWrapper {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
width: 100%;
|
||||
padding: 5px;
|
||||
height: 99%;
|
||||
/* height: 95%; */
|
||||
overflow: hidden;
|
||||
text-overflow: clip;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.viewerContentWrapper > div {
|
||||
display: inline-block;
|
||||
white-space: normal;
|
||||
}
|
||||
.viewerContentWrapper > div {
|
||||
display: inline-block;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.viewerLeftSidePanel {
|
||||
width: 200px;
|
||||
background-color: #323232;
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
margin-right: 2px;
|
||||
color: #d0d0d0;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.viewerLeftSidePanel {
|
||||
width: 200px;
|
||||
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 > .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%;
|
||||
}
|
||||
.viewerContentWrapper > div > div.sidePanelBody > div {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.studyDesc {
|
||||
font-weight: bold;
|
||||
font-size: 13px;
|
||||
text-align: center;
|
||||
background: rgb(88 84 83);
|
||||
color: #d0d0d0;
|
||||
padding: 5px;
|
||||
}
|
||||
.studyDesc {
|
||||
font-weight: bold;
|
||||
font-size: 13px;
|
||||
text-align: center;
|
||||
background: rgb(88 84 83);
|
||||
color: #d0d0d0;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.ps {
|
||||
overflow: hidden !important;
|
||||
overflow-anchor: none;
|
||||
-ms-overflow-style: none;
|
||||
touch-action: auto;
|
||||
-ms-touch-action: auto;
|
||||
}
|
||||
.ps {
|
||||
overflow: hidden !important;
|
||||
overflow-anchor: none;
|
||||
-ms-overflow-style: none;
|
||||
touch-action: auto;
|
||||
-ms-touch-action: auto;
|
||||
}
|
||||
|
||||
.viewerLeftSidePanel .viewernavigatorwrapper {
|
||||
display: flex;
|
||||
width: 196px;
|
||||
height: 84px;
|
||||
padding: 1px 2px 1px 8px;
|
||||
margin: 6px 0 6px 1px;
|
||||
border-radius: 2px;
|
||||
border: 1px solid #404040;
|
||||
}
|
||||
.viewerLeftSidePanel .viewernavigatorwrapper {
|
||||
display: flex;
|
||||
width: 196px;
|
||||
height: 84px;
|
||||
padding: 1px 2px 1px 8px;
|
||||
margin: 6px 0 6px 1px;
|
||||
border-radius: 2px;
|
||||
border: 1px solid #404040;
|
||||
}
|
||||
|
||||
.ui-draggable-handle {
|
||||
-ms-touch-action: none;
|
||||
touch-action: none;
|
||||
}
|
||||
.ui-draggable-handle {
|
||||
-ms-touch-action: none;
|
||||
touch-action: none;
|
||||
}
|
||||
|
||||
.viewerLeftSidePanel .image-preview {
|
||||
border: 2px solid #252525;
|
||||
cursor: pointer;
|
||||
}
|
||||
.viewerLeftSidePanel .image-preview {
|
||||
border: 2px solid #252525;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.viewerLeftSidePanel .viewernavitextwrapper {
|
||||
flex: 1;
|
||||
padding: 3px 1px 3px 4px;
|
||||
vertical-align: top;
|
||||
font-size: 12px;
|
||||
}
|
||||
.viewerLeftSidePanel .viewernavitextwrapper {
|
||||
flex: 1;
|
||||
padding: 3px 1px 3px 4px;
|
||||
vertical-align: top;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.viewerSideActive {
|
||||
background: #16477b;
|
||||
background: #16477b80;
|
||||
border: 1px solid #23527b;
|
||||
}
|
||||
.viewerSideActive {
|
||||
background: #16477b;
|
||||
background: #16477b80;
|
||||
border: 1px solid #23527b;
|
||||
}
|
||||
|
||||
.viewerContent {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
display: block;
|
||||
background-color: black;
|
||||
color: #d0d0d0;
|
||||
font-size: 13px;
|
||||
}
|
||||
.viewerContent {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
display: block;
|
||||
background-color: black;
|
||||
color: #d0d0d0;
|
||||
font-size: 13px;
|
||||
}
|
||||
.instance_frame_wrapper{
|
||||
min-width: 120px;
|
||||
background-color: #2c2c2c;
|
||||
border: 1px solid #2c2c2c;
|
||||
padding: 5px;
|
||||
}
|
||||
.frame_list{
|
||||
max-height: 500px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.instance_frame_wrapper ::-webkit-scrollbar {
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
}
|
||||
.instance_frame_wrapper ::-webkit-scrollbar-thumb {
|
||||
border-radius: 10px;
|
||||
background: #d0d0d0;
|
||||
}
|
||||
.frame_content{
|
||||
/* height: 50px; */
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
color: #ddd;
|
||||
font-size: 12px;
|
||||
border: 1px solid #404040;
|
||||
}
|
||||
.frame_content:hover {
|
||||
/* font-weight: bold; */
|
||||
/* box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); */
|
||||
cursor: pointer;
|
||||
/* color: #428bca; */
|
||||
border-color: #213a54 !important;
|
||||
background-color: #213a54;
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -124,7 +124,7 @@
|
|||
<el-table-column
|
||||
prop="CityCN"
|
||||
:label="$t('institutions:hospitals:label:cityCN')"
|
||||
width="120"
|
||||
width="130"
|
||||
show-overflow-tooltip
|
||||
sortable="custom"
|
||||
/>
|
||||
|
|
Loading…
Reference in New Issue