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

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

rj
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" <el-popover v-model="keySeriesPopoverVisible" placement="bottom" trigger="click" popper-class="key-series-popper"
@show="showKeySeriesPanel"> @show="showKeySeriesPanel">
<ul class="key-series-list"> <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"> <li v-if="keySeriesLoading" class="key-series-empty">
<i class="el-icon-loading"></i> <i class="el-icon-loading"></i>
</li> </li>
@ -237,13 +247,13 @@
<div class="key-series-info"> <div class="key-series-info">
<div v-if="kf.MarkName" class="key-series-meta"> <div v-if="kf.MarkName" class="key-series-meta">
<div class="key-series-label">{{ $t('trials:reading:keySeries:annotationName') }}</div> <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 }} {{ kf.MarkName }}
</div> </div>
</div> </div>
<div class="key-series-meta"> <div class="key-series-meta">
<div class="key-series-label">{{ $t('trials:reading:keySeries:sopUid') }}</div> <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 }} {{ kf.SopInstanceUid }}
</div> </div>
</div> </div>
@ -947,6 +957,7 @@ export default {
uploadStatus: 'upload', uploadStatus: 'upload',
taskId: '', taskId: '',
keySeries: [], keySeries: [],
keyStack: null,
keySeriesPopoverVisible: false, keySeriesPopoverVisible: false,
keySeriesLoading: false, keySeriesLoading: false,
signVisible: false, signVisible: false,
@ -1404,7 +1415,9 @@ export default {
}, },
async showKeySeriesPanel() { async showKeySeriesPanel() {
this.keySeries = [] 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 if (!visitTaskId) return
this.keySeriesLoading = true this.keySeriesLoading = true
try { try {
@ -1420,7 +1433,7 @@ export default {
}, },
jumpToKeySeries(kf) { jumpToKeySeries(kf) {
this.keySeriesPopoverVisible = false this.keySeriesPopoverVisible = false
const visitTaskId = this.getKeySeriesVisitTaskId() const visitTaskId = this.keyStack?.visitTaskId
if (!visitTaskId) return if (!visitTaskId) return
// let annotation = {} // let annotation = {}
// try { // 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 { .key-series-empty {
text-align: center; text-align: center;
color: #999; color: #999;
@ -3151,21 +3203,24 @@ export default {
text-align: left; text-align: left;
display: flex; display: flex;
align-items: center; align-items: center;
padding: 8px; padding: 10px;
cursor: pointer; cursor: pointer;
background-color: #2b2b2b; background: linear-gradient(180deg, rgba(46, 46, 46, 0.96) 0%, rgba(40, 40, 40, 0.98) 100%);
border-radius: 4px; border-radius: 6px;
margin-bottom: 8px; margin-bottom: 8px;
border: 1px solid transparent; border: 1px solid #353535;
transition: all 0.2s ease; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
// transition: all 0.2s ease;
&:last-child { &:last-child {
margin-bottom: 0; margin-bottom: 0;
} }
&:hover { &:hover {
background-color: #363636; background: linear-gradient(180deg, rgba(54, 54, 54, 0.98) 0%, rgba(46, 46, 46, 1) 100%);
border-color: #555; border-color: #5a5a5a;
// transform: translateY(-1px);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
} }
.key-series-img { .key-series-img {
@ -3178,7 +3233,8 @@ export default {
align-items: center; align-items: center;
overflow: hidden; overflow: hidden;
margin-right: 12px; margin-right: 12px;
border-radius: 2px; border-radius: 4px;
border: 1px solid #3a3a3a;
img { img {
width: 100%; width: 100%;
@ -3221,12 +3277,12 @@ export default {
white-space: nowrap; white-space: nowrap;
} }
.key-series-value { .key-series-uid {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
font-size: 13px; font-size: 13px;
color: #ccc; color: #ddd;
line-height: 1.2; line-height: 1.2;
} }
} }
@ -3236,10 +3292,15 @@ export default {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: 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 { .svg-icon {
color: #f39c12; 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" @show="showKeySeriesPanel"
> >
<ul class="key-series-list"> <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"> <li v-if="keySeriesLoading" class="key-series-empty">
<i class="el-icon-loading"></i> <i class="el-icon-loading"></i>
</li> </li>
@ -765,6 +775,7 @@ export default {
fullScreenIndex: null, fullScreenIndex: null,
activeViewportIndex: 0, activeViewportIndex: 0,
keySeries: [], keySeries: [],
keyTaskInfo: null,
keySeriesPopoverVisible: false, keySeriesPopoverVisible: false,
keySeriesLoading: false, keySeriesLoading: false,
activeTool: '', activeTool: '',
@ -4300,9 +4311,9 @@ export default {
this.keySeriesLoading = true this.keySeriesLoading = true
try { try {
const series = this.$refs[`${this.viewportKey}-${this.activeViewportIndex}`][0].series const series = this.$refs[`${this.viewportKey}-${this.activeViewportIndex}`][0].series
const visitTaskId = series?.TaskInfo?.VisitTaskId this.keyTaskInfo = series ? series.TaskInfo : null
if (visitTaskId) { if (this.keyTaskInfo) {
let res = await getMarkList({ visitTaskId: visitTaskId }) let res = await getMarkList({ visitTaskId: this.keyTaskInfo.VisitTaskId })
if (res && res.Result) { if (res && res.Result) {
this.keySeries = res.Result this.keySeries = res.Result
} }
@ -4314,10 +4325,8 @@ export default {
} }
}, },
jumpToKeySeries(kf) { jumpToKeySeries(kf) {
const series = this.$refs[`${this.viewportKey}-${this.activeViewportIndex}`][0].series
const visitTaskId = series?.TaskInfo?.VisitTaskId let tIdx = this.visitTaskList.findIndex(i=> i.VisitTaskId === this.keyTaskInfo.VisitTaskId)
if (!visitTaskId) return
let tIdx = this.visitTaskList.findIndex(i=> i.VisitTaskId === visitTaskId)
if (tIdx < 0) return if (tIdx < 0) return
const task = this.visitTaskList[tIdx] const task = this.visitTaskList[tIdx]
const studyList = task.StudyList const studyList = task.StudyList
@ -4326,7 +4335,7 @@ export default {
if (Object.keys(targetSeries).length === 0) return if (Object.keys(targetSeries).length === 0) return
// this.activeTaskId = this.taskInfo.VisitTaskId // this.activeTaskId = this.taskInfo.VisitTaskId
this.$refs[`${this.viewportKey}-${this.activeViewportIndex}`][0].setSeriesInfo(targetSeries, true) 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) { showPanel(e, toolName) {
if (toolName === 'layout' && (this.isFusion || this.isMPR)) return false 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 { .key-series-empty {
text-align: center; text-align: center;
color: #999; color: #999;
@ -5384,21 +5432,24 @@ export default {
text-align: left; text-align: left;
display: flex; display: flex;
align-items: center; align-items: center;
padding: 8px; padding: 10px;
cursor: pointer; cursor: pointer;
background-color: #2b2b2b; background: linear-gradient(180deg, rgba(46, 46, 46, 0.96) 0%, rgba(40, 40, 40, 0.98) 100%);
border-radius: 4px; border-radius: 6px;
margin-bottom: 8px; margin-bottom: 8px;
border: 1px solid transparent; border: 1px solid #353535;
transition: all 0.2s ease; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
// transition: all 0.2s ease;
&:last-child { &:last-child {
margin-bottom: 0; margin-bottom: 0;
} }
&:hover { &:hover {
background-color: #363636; background: linear-gradient(180deg, rgba(54, 54, 54, 0.98) 0%, rgba(46, 46, 46, 1) 100%);
border-color: #555; border-color: #5a5a5a;
// transform: translateY(-1px);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
} }
.key-series-img { .key-series-img {
@ -5411,7 +5462,8 @@ export default {
align-items: center; align-items: center;
overflow: hidden; overflow: hidden;
margin-right: 12px; margin-right: 12px;
border-radius: 2px; border-radius: 4px;
border: 1px solid #3a3a3a;
img { img {
width: 100%; width: 100%;
@ -5459,7 +5511,7 @@ export default {
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
font-size: 13px; font-size: 13px;
color: #ccc; color: #ddd;
line-height: 1.2; line-height: 1.2;
} }
} }
@ -5469,10 +5521,15 @@ export default {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: 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 { .svg-icon {
color: #f39c12; 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" @show="showKeySeriesPanel"
> >
<ul class="key-series-list"> <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"> <li v-if="keySeriesLoading" class="key-series-empty">
<i class="el-icon-loading"></i> <i class="el-icon-loading"></i>
</li> </li>
@ -59,14 +69,14 @@
<div class="key-series-info"> <div class="key-series-info">
<div class="key-series-meta" v-if="kf.MarkName"> <div class="key-series-meta" v-if="kf.MarkName">
<div class="key-series-label">{{ $t('trials:reading:keySeries:annotationName') }}</div> <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 }} {{ kf.MarkName }}
</div> </div>
</div> </div>
<div class="key-series-meta"> <div class="key-series-meta">
<div class="key-series-label">{{ $t('trials:reading:keySeries:fileName') }}</div> <div class="key-series-label">{{ $t('trials:reading:keySeries:fileName') }}</div>
<div class="key-series-value" :title="kf.FileName"> <div class="key-series-uid" :title="kf.FileName">
{{ kf.FileName || '-' }} {{ kf.FileName }}
</div> </div>
</div> </div>
</div> </div>
@ -537,6 +547,7 @@ export default {
hotKeyList: [], hotKeyList: [],
isShowAnnotations: true, isShowAnnotations: true,
keySeries: [], keySeries: [],
keyTaskInfo: null,
keySeriesLoading: false, keySeriesLoading: false,
keySeriesPopoverVisible: false keySeriesPopoverVisible: false
} }
@ -693,13 +704,13 @@ export default {
try { try {
const i = this.viewportInfos.findIndex(i => i.index === this.activeCanvasIndex) const i = this.viewportInfos.findIndex(i => i.index === this.activeCanvasIndex)
if (i > -1) { if (i > -1) {
this.keyTaskInfo = this.viewportInfos[i].taskInfo
const visitTaskId = this.viewportInfos[i].taskInfo.VisitTaskId const visitTaskId = this.viewportInfos[i].taskInfo.VisitTaskId
const res = await getNoneDicomMarkList({ visitTaskId: visitTaskId }) const res = await getNoneDicomMarkList({ visitTaskId: visitTaskId })
if (res && res.Result) { if (res && res.Result) {
this.keySeries = res.Result this.keySeries = res.Result
} }
} }
} catch (err) { } catch (err) {
console.log(err) console.log(err)
} finally { } finally {
@ -707,9 +718,7 @@ export default {
} }
}, },
jumpToKeySeries(kf) { jumpToKeySeries(kf) {
const i = this.viewportInfos.findIndex(i => i.index === this.activeCanvasIndex) const visitTaskId = this.keyTaskInfo.VisitTaskId
if (i === -1) return
const visitTaskId = this.viewportInfos[i].taskInfo.VisitTaskId
this.$emit('selectFile', { this.$emit('selectFile', {
path: kf.Path, path: kf.Path,
studyId: kf.StudyId, 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 { .key-series-empty {
text-align: center; text-align: center;
color: #999; color: #999;
@ -2617,21 +2665,24 @@ export default {
text-align: left; text-align: left;
display: flex; display: flex;
align-items: center; align-items: center;
padding: 8px; padding: 10px;
cursor: pointer; cursor: pointer;
background-color: #2b2b2b; background: linear-gradient(180deg, rgba(46, 46, 46, 0.96) 0%, rgba(40, 40, 40, 0.98) 100%);
border-radius: 4px; border-radius: 6px;
margin-bottom: 8px; margin-bottom: 8px;
border: 1px solid transparent; border: 1px solid #353535;
transition: all 0.2s ease; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
// transition: all 0.2s ease;
&:last-child { &:last-child {
margin-bottom: 0; margin-bottom: 0;
} }
&:hover { &:hover {
background-color: #363636; background: linear-gradient(180deg, rgba(54, 54, 54, 0.98) 0%, rgba(46, 46, 46, 1) 100%);
border-color: #555; border-color: #5a5a5a;
// transform: translateY(-1px);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
} }
.key-series-img { .key-series-img {
@ -2644,7 +2695,8 @@ export default {
align-items: center; align-items: center;
overflow: hidden; overflow: hidden;
margin-right: 12px; margin-right: 12px;
border-radius: 2px; border-radius: 4px;
border: 1px solid #3a3a3a;
img { img {
width: 100%; width: 100%;
@ -2687,12 +2739,12 @@ export default {
white-space: nowrap; white-space: nowrap;
} }
.key-series-value { .key-series-uid {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
font-size: 13px; font-size: 13px;
color: #ccc; color: #ddd;
line-height: 1.2; line-height: 1.2;
} }
} }
@ -2702,10 +2754,15 @@ export default {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: 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 { .svg-icon {
color: #f39c12; color: #f39c12;
font-size: 18px; font-size: 16px;
} }
} }
} }