本地预览影像更改

uat
caiyiling 2025-03-11 14:15:52 +08:00
parent 7a69227888
commit bf4f0c7245
3 changed files with 253 additions and 138 deletions

View File

@ -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

View File

@ -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>

View File

@ -124,7 +124,7 @@
<el-table-column
prop="CityCN"
:label="$t('institutions:hospitals:label:cityCN')"
width="120"
width="130"
show-overflow-tooltip
sortable="custom"
/>