XCKJ
/
irc_web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

关键序列面板展示信息补充

main
caiyiling 2026-06-18 11:28:50 +08:00
parent 8203b3d738
commit 2794cabdc8
3 changed files with 226 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

91
src/views/trials/trials-panel/reading/dicoms/components/DicomViewer.vue
View File

@ -222,6 +222,16 @@
<el-popover v-model="keySeriesPopoverVisible" placement="bottom" trigger="click" popper-class="key-series-popper"
@show="showKeySeriesPanel">
<ul class="key-series-list">
<li v-if="keyStack && keyStack.taskBlindName" class="key-series-header">
<div class="key-series-header-top">
<div class="key-series-header-title">
<span class="key-series-header-dot"></span>
<div class="key-series-task-name" :title="keyStack.taskBlindName">
{{ keyStack.taskBlindName }}
</div>
</div>
</div>
</li>
<li v-if="keySeriesLoading" class="key-series-empty">
<i class="el-icon-loading"></i>
</li>
@ -237,13 +247,13 @@
<div class="key-series-info">
<div v-if="kf.MarkName" class="key-series-meta">
<div class="key-series-label">{{ $t('trials:reading:keySeries:annotationName') }}</div>
<div class="key-series-value" :title="kf.MarkName">
<div class="key-series-uid" :title="kf.MarkName">
{{ kf.MarkName }}
</div>
</div>
<div class="key-series-meta">
<div class="key-series-label">{{ $t('trials:reading:keySeries:sopUid') }}</div>
<div class="key-series-value" :title="kf.SopInstanceUid">
<div class="key-series-uid" :title="kf.SopInstanceUid">
{{ kf.SopInstanceUid }}
</div>
</div>
@ -947,6 +957,7 @@ export default {
uploadStatus: 'upload',
taskId: '',
keySeries: [],
keyStack: null,
keySeriesPopoverVisible: false,
keySeriesLoading: false,
signVisible: false,
@ -1404,7 +1415,9 @@ export default {
},
async showKeySeriesPanel() {
this.keySeries = []
const visitTaskId = this.getKeySeriesVisitTaskId()
const currentCanvas = this.$refs[`dicomCanvas${this.currentDicomCanvasIndex}`]
this.keyStack = currentCanvas && currentCanvas[0] ? currentCanvas[0].stack : null
const visitTaskId = this.keyStack?.visitTaskId
if (!visitTaskId) return
this.keySeriesLoading = true
try {
@ -1420,7 +1433,7 @@ export default {
},
jumpToKeySeries(kf) {
this.keySeriesPopoverVisible = false
const visitTaskId = this.getKeySeriesVisitTaskId()
const visitTaskId = this.keyStack?.visitTaskId
if (!visitTaskId) return
// let annotation = {}
// try {
@ -3141,6 +3154,45 @@ export default {
}
}
.key-series-header {
padding: 5px 12px;
margin-bottom: 10px;
background: linear-gradient(180deg, rgba(64, 64, 64, 0.92) 0%, rgba(43, 43, 43, 0.98) 100%);
border: 1px solid #474747;
border-radius: 6px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 6px 18px rgba(0, 0, 0, 0.2);
}
.key-series-header-top {
display: flex;
align-items: center;
justify-content: space-between;
}
.key-series-header-title {
display: flex;
align-items: center;
min-width: 0;
}
.key-series-header-dot {
width: 8px;
height: 8px;
margin-right: 8px;
border-radius: 50%;
background: linear-gradient(180deg, #ffd76a 0%, #f39c12 100%);
box-shadow: 0 0 8px rgba(243, 156, 18, 0.45);
}
.key-series-task-name {
color: #fff;
font-size: 15px;
font-weight: 600;
line-height: 22px;
word-break: break-all;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.key-series-empty {
text-align: center;
color: #999;
@ -3151,21 +3203,24 @@ export default {
text-align: left;
display: flex;
align-items: center;
padding: 8px;
padding: 10px;
cursor: pointer;
background-color: #2b2b2b;
border-radius: 4px;
background: linear-gradient(180deg, rgba(46, 46, 46, 0.96) 0%, rgba(40, 40, 40, 0.98) 100%);
border-radius: 6px;
margin-bottom: 8px;
border: 1px solid transparent;
transition: all 0.2s ease;
border: 1px solid #353535;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
// transition: all 0.2s ease;
&:last-child {
margin-bottom: 0;
}
&:hover {
background-color: #363636;
border-color: #555;
background: linear-gradient(180deg, rgba(54, 54, 54, 0.98) 0%, rgba(46, 46, 46, 1) 100%);
border-color: #5a5a5a;
// transform: translateY(-1px);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
}
.key-series-img {
@ -3178,7 +3233,8 @@ export default {
align-items: center;
overflow: hidden;
margin-right: 12px;
border-radius: 2px;
border-radius: 4px;
border: 1px solid #3a3a3a;
img {
width: 100%;
@ -3221,12 +3277,12 @@ export default {
white-space: nowrap;
}
.key-series-value {
.key-series-uid {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 13px;
color: #ccc;
color: #ddd;
line-height: 1.2;
}
}
@ -3236,10 +3292,15 @@ export default {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 50%;
background: rgba(243, 156, 18, 0.08);
border: 1px solid rgba(243, 156, 18, 0.16);
.svg-icon {
color: #f39c12;
font-size: 18px;
font-size: 16px;
}
}
}

93
src/views/trials/trials-panel/reading/dicoms3D/components/ReadPage.vue
View File

@ -181,6 +181,16 @@
@show="showKeySeriesPanel"
>
<ul class="key-series-list">
<li v-if="keyTaskInfo && keyTaskInfo.TaskBlindName" class="key-series-header">
<div class="key-series-header-top">
<div class="key-series-header-title">
<span class="key-series-header-dot"></span>
<div class="key-series-task-name" :title="keyTaskInfo.TaskBlindName">
{{ keyTaskInfo.TaskBlindName }}
</div>
</div>
</div>
</li>
<li v-if="keySeriesLoading" class="key-series-empty">
<i class="el-icon-loading"></i>
</li>
@ -765,6 +775,7 @@ export default {
fullScreenIndex: null,
activeViewportIndex: 0,
keySeries: [],
keyTaskInfo: null,
keySeriesPopoverVisible: false,
keySeriesLoading: false,
activeTool: '',
@ -4300,9 +4311,9 @@ export default {
this.keySeriesLoading = true
try {
const series = this.$refs[`${this.viewportKey}-${this.activeViewportIndex}`][0].series
const visitTaskId = series?.TaskInfo?.VisitTaskId
if (visitTaskId) {
let res = await getMarkList({ visitTaskId: visitTaskId })
this.keyTaskInfo = series ? series.TaskInfo : null
if (this.keyTaskInfo) {
let res = await getMarkList({ visitTaskId: this.keyTaskInfo.VisitTaskId })
if (res && res.Result) {
this.keySeries = res.Result
}
@ -4314,10 +4325,8 @@ export default {
}
},
jumpToKeySeries(kf) {
const series = this.$refs[`${this.viewportKey}-${this.activeViewportIndex}`][0].series
const visitTaskId = series?.TaskInfo?.VisitTaskId
if (!visitTaskId) return
let tIdx = this.visitTaskList.findIndex(i=> i.VisitTaskId === visitTaskId)
let tIdx = this.visitTaskList.findIndex(i=> i.VisitTaskId === this.keyTaskInfo.VisitTaskId)
if (tIdx < 0) return
const task = this.visitTaskList[tIdx]
const studyList = task.StudyList
@ -4326,7 +4335,7 @@ export default {
if (Object.keys(targetSeries).length === 0) return
// this.activeTaskId = this.taskInfo.VisitTaskId
this.$refs[`${this.viewportKey}-${this.activeViewportIndex}`][0].setSeriesInfo(targetSeries, true)
this.$refs[visitTaskId][0].setSeriesActive(targetSeries.StudyIndex, targetSeries.SeriesIndex)
this.$refs[this.keyTaskInfo.VisitTaskId][0].setSeriesActive(targetSeries.StudyIndex, targetSeries.SeriesIndex)
},
showPanel(e, toolName) {
if (toolName === 'layout' && (this.isFusion || this.isMPR)) return false
@ -5374,6 +5383,45 @@ export default {
}
}
.key-series-header {
padding: 5px 12px;
margin-bottom: 10px;
background: linear-gradient(180deg, rgba(64, 64, 64, 0.92) 0%, rgba(43, 43, 43, 0.98) 100%);
border: 1px solid #474747;
border-radius: 6px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 6px 18px rgba(0, 0, 0, 0.2);
}
.key-series-header-top {
display: flex;
align-items: center;
justify-content: space-between;
}
.key-series-header-title {
display: flex;
align-items: center;
min-width: 0;
}
.key-series-header-dot {
width: 8px;
height: 8px;
margin-right: 8px;
border-radius: 50%;
background: linear-gradient(180deg, #ffd76a 0%, #f39c12 100%);
box-shadow: 0 0 8px rgba(243, 156, 18, 0.45);
}
.key-series-task-name {
color: #fff;
font-size: 15px;
font-weight: 600;
line-height: 22px;
word-break: break-all;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.key-series-empty {
text-align: center;
color: #999;
@ -5384,21 +5432,24 @@ export default {
text-align: left;
display: flex;
align-items: center;
padding: 8px;
padding: 10px;
cursor: pointer;
background-color: #2b2b2b;
border-radius: 4px;
background: linear-gradient(180deg, rgba(46, 46, 46, 0.96) 0%, rgba(40, 40, 40, 0.98) 100%);
border-radius: 6px;
margin-bottom: 8px;
border: 1px solid transparent;
transition: all 0.2s ease;
border: 1px solid #353535;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
// transition: all 0.2s ease;
&:last-child {
margin-bottom: 0;
}
&:hover {
background-color: #363636;
border-color: #555;
background: linear-gradient(180deg, rgba(54, 54, 54, 0.98) 0%, rgba(46, 46, 46, 1) 100%);
border-color: #5a5a5a;
// transform: translateY(-1px);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
}
.key-series-img {
@ -5411,7 +5462,8 @@ export default {
align-items: center;
overflow: hidden;
margin-right: 12px;
border-radius: 2px;
border-radius: 4px;
border: 1px solid #3a3a3a;
img {
width: 100%;
@ -5459,7 +5511,7 @@ export default {
text-overflow: ellipsis;
white-space: nowrap;
font-size: 13px;
color: #ccc;
color: #ddd;
line-height: 1.2;
}
}
@ -5469,10 +5521,15 @@ export default {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 50%;
background: rgba(243, 156, 18, 0.08);
border: 1px solid rgba(243, 156, 18, 0.16);
.svg-icon {
color: #f39c12;
font-size: 18px;
font-size: 16px;
}
}
}

93
src/views/trials/trials-panel/reading/visit-review/components/FileViewer.vue
View File

@ -40,6 +40,16 @@
@show="showKeySeriesPanel"
>
<ul class="key-series-list">
<li v-if="keyTaskInfo && keyTaskInfo.TaskBlindName" class="key-series-header">
<div class="key-series-header-top">
<div class="key-series-header-title">
<span class="key-series-header-dot"></span>
<div class="key-series-task-name" :title="keyTaskInfo.TaskBlindName">
{{ keyTaskInfo.TaskBlindName }}
</div>
</div>
</div>
</li>
<li v-if="keySeriesLoading" class="key-series-empty">
<i class="el-icon-loading"></i>
</li>
@ -59,14 +69,14 @@
<div class="key-series-info">
<div class="key-series-meta" v-if="kf.MarkName">
<div class="key-series-label">{{ $t('trials:reading:keySeries:annotationName') }}</div>
<div class="key-series-value" :title="kf.MarkName">
<div class="key-series-uid" :title="kf.MarkName">
{{ kf.MarkName }}
</div>
</div>
<div class="key-series-meta">
<div class="key-series-label">{{ $t('trials:reading:keySeries:fileName') }}</div>
<div class="key-series-value" :title="kf.FileName">
{{ kf.FileName || '-' }}
<div class="key-series-uid" :title="kf.FileName">
{{ kf.FileName }}
</div>
</div>
</div>
@ -537,6 +547,7 @@ export default {
hotKeyList: [],
isShowAnnotations: true,
keySeries: [],
keyTaskInfo: null,
keySeriesLoading: false,
keySeriesPopoverVisible: false
}
@ -693,13 +704,13 @@ export default {
try {
const i = this.viewportInfos.findIndex(i => i.index === this.activeCanvasIndex)
if (i > -1) {
this.keyTaskInfo = this.viewportInfos[i].taskInfo
const visitTaskId = this.viewportInfos[i].taskInfo.VisitTaskId
const res = await getNoneDicomMarkList({ visitTaskId: visitTaskId })
if (res && res.Result) {
this.keySeries = res.Result
}
}
} catch (err) {
console.log(err)
} finally {
@ -707,9 +718,7 @@ export default {
}
},
jumpToKeySeries(kf) {
const i = this.viewportInfos.findIndex(i => i.index === this.activeCanvasIndex)
if (i === -1) return
const visitTaskId = this.viewportInfos[i].taskInfo.VisitTaskId
const visitTaskId = this.keyTaskInfo.VisitTaskId
this.$emit('selectFile', {
path: kf.Path,
studyId: kf.StudyId,
@ -2607,6 +2616,45 @@ export default {
}
}
.key-series-header {
padding: 5px 12px;
margin-bottom: 10px;
background: linear-gradient(180deg, rgba(64, 64, 64, 0.92) 0%, rgba(43, 43, 43, 0.98) 100%);
border: 1px solid #474747;
border-radius: 6px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 6px 18px rgba(0, 0, 0, 0.2);
}
.key-series-header-top {
display: flex;
align-items: center;
justify-content: space-between;
}
.key-series-header-title {
display: flex;
align-items: center;
min-width: 0;
}
.key-series-header-dot {
width: 8px;
height: 8px;
margin-right: 8px;
border-radius: 50%;
background: linear-gradient(180deg, #ffd76a 0%, #f39c12 100%);
box-shadow: 0 0 8px rgba(243, 156, 18, 0.45);
}
.key-series-task-name {
color: #fff;
font-size: 15px;
font-weight: 600;
line-height: 22px;
word-break: break-all;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.key-series-empty {
text-align: center;
color: #999;
@ -2617,21 +2665,24 @@ export default {
text-align: left;
display: flex;
align-items: center;
padding: 8px;
padding: 10px;
cursor: pointer;
background-color: #2b2b2b;
border-radius: 4px;
background: linear-gradient(180deg, rgba(46, 46, 46, 0.96) 0%, rgba(40, 40, 40, 0.98) 100%);
border-radius: 6px;
margin-bottom: 8px;
border: 1px solid transparent;
transition: all 0.2s ease;
border: 1px solid #353535;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
// transition: all 0.2s ease;
&:last-child {
margin-bottom: 0;
}
&:hover {
background-color: #363636;
border-color: #555;
background: linear-gradient(180deg, rgba(54, 54, 54, 0.98) 0%, rgba(46, 46, 46, 1) 100%);
border-color: #5a5a5a;
// transform: translateY(-1px);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
}
.key-series-img {
@ -2644,7 +2695,8 @@ export default {
align-items: center;
overflow: hidden;
margin-right: 12px;
border-radius: 2px;
border-radius: 4px;
border: 1px solid #3a3a3a;
img {
width: 100%;
@ -2687,12 +2739,12 @@ export default {
white-space: nowrap;
}
.key-series-value {
.key-series-uid {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 13px;
color: #ccc;
color: #ddd;
line-height: 1.2;
}
}
@ -2702,10 +2754,15 @@ export default {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 50%;
background: rgba(243, 156, 18, 0.08);
border: 1px solid rgba(243, 156, 18, 0.16);
.svg-icon {
color: #f39c12;
font-size: 18px;
font-size: 16px;
}
}
}