关键序列更改

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

@@ -171,6 +171,49 @@
               v-if="((criterionType === 0 && readingTool === 0) || this.readingTool === 3) && isMPR">
               <svg-icon icon-class="exit_mpr" class="svg-icon" style="transform: rotate(180deg);" />
             </div>
+            <!-- 查看关键序列 -->
+            <!-- <el-popover
+              v-model="keySeriesPopoverVisible"
+              placement="bottom"
+              trigger="click"
+              popper-class="key-series-popper"
+              v-if="!isFusion && !isMPR"
+              @show="showKeySeriesPanel"
+            >
+              <ul class="key-series-list">
+                <li v-if="keySeriesLoading" class="key-series-empty">
+                  <i class="el-icon-loading"></i> 加载中...
+                </li>
+                <li v-else-if="keySeries.length === 0" class="key-series-empty">
+                  暂无关键序列
+                </li>
+                <li
+                  v-for="(kf, idx) in keySeries"
+                  :key="idx"
+                  class="key-series-item"
+                  @click.stop.prevent="jumpToKeySeries(kf)"
+                >
+                  <div class="key-series-img">
+                    <img v-if="kf.PicturePath" :src="`${OSSclientConfig.basePath}${kf.PicturePath}`" />
+                    <svg-icon v-else icon-class="image" class="svg-icon default-icon" />
+                  </div>
+                  <div class="key-series-info">
+                    <div class="key-series-label">图像号:</div>
+                    <div class="key-series-uid" :title="kf.SopInstanceUid">
+                      {{ kf.SopInstanceUid }}
+                    </div>
+                  </div>
+                  <div class="key-series-star">
+                    <svg-icon icon-class="star" class="svg-icon" />
+                  </div>
+                </li>
+              </ul>
+              <div slot="reference" class="tool-item">
+                <div class="icon" :title="'查看关键序列'">
+                  <svg-icon icon-class="star" class="svg-icon" />
+                </div>
+              </div>
+            </el-popover> -->
             <!-- 直方图 -->
             <div class="tool-item" :title="`${$t('trials:reading:button:histogram')}`" @click.prevent="openHistogram"
               v-if="this.readingTool === 3">
@@ -538,7 +581,7 @@
 <script>
 import { getRelatedVisitTask, getReadingVisitStudyList, getTableAnswerRowInfoList, deleteCustomTag, getCriterionReadingInfo, setReadKeyFile } from '@/api/trials'
 import { getDoctorShortcutKey, getUserWLTemplateList } from '@/api/user'
-import { getCustomTag, submitCustomTag } from '@/api/reading'
+import { getCustomTag, submitCustomTag, getMarkList } from '@/api/reading'
 import { getToken } from '@/utils/auth'
 import {
   RenderingEngine,
@@ -709,6 +752,9 @@ export default {
       cols: 1,
       fullScreenIndex: null,
       activeViewportIndex: 0,
+      keySeries: [],
+      keySeriesPopoverVisible: false,
+      keySeriesLoading: false,
       activeTool: '',
       readingTaskState: 2,
       renderingEngineId: renderingEngineId,
@@ -2101,7 +2147,7 @@ export default {
         const measureData = Object.assign({}, annotation)
         const params = {}
         await this.getScreenshots({
-          visitTaskId: this.visitTaskId,
+          visitTaskId: this.taskInfo.VisitTaskId,
           annotation
         }, async (base64Str) => {
           const pictureObj = await this.uploadScreenshots(`${Date.now()}`, base64Str)
@@ -4226,12 +4272,50 @@ export default {
     isNumber(value) {
       return typeof value === 'number' && value !== null && !isNaN(value)
     },
+    async showKeySeriesPanel() {
+      this.keySeries = []
+      this.keySeriesLoading = true
+
+      try {
+        let res = await getMarkList({ visitTaskId: this.taskInfo.VisitTaskId })
+        if (res && res.Result) {
+          this.keySeries = res.Result
+        } else if (Array.isArray(res)) {
+          this.keySeries = res
+        }
+      } catch (err) {
+        console.error(err)
+      } finally {
+        this.keySeriesLoading = false
+      }
+    },
+    jumpToKeySeries(kf) {
+      let tIdx = this.visitTaskList.findIndex(i=> i.VisitTaskId === this.taskInfo.VisitTaskId) 
+      if (tIdx < 0) return
+      const task = this.visitTaskList[tIdx]
+      const studyList = task.StudyList
+      const annotation = kf.MeasureData ? JSON.parse(kf.MeasureData) : {}
+      let targetSeries = this.getMarkedSeries(studyList, annotation)
+      if (Object.keys(targetSeries).length === 0) return
+      this.$refs[`${this.viewportKey}-${this.activeViewportIndex}`][0].setSeriesInfo(targetSeries, true)
+      this.$refs[this.taskInfo.VisitTaskId][0].setSeriesActive(targetSeries.StudyIndex, targetSeries.SeriesIndex)
+    },
     showPanel(e, toolName) {
       if (toolName === 'layout' && (this.isFusion || this.isMPR)) return false
-      e.currentTarget.firstChild.lastChild.style.display = 'block'
+      const dropdownContent = e.currentTarget.querySelector('.dropdown-content')
+      if (dropdownContent) {
+        dropdownContent.style.display = 'block'
+      } else {
+        e.currentTarget.firstChild.lastChild.style.display = 'block'
+      }
     },
     toolMouseout(e) {
-      e.currentTarget.firstChild.lastChild.style.display = 'none'
+      const dropdownContent = e.currentTarget.querySelector('.dropdown-content')
+      if (dropdownContent) {
+        dropdownContent.style.display = 'none'
+      } else {
+        e.currentTarget.firstChild.lastChild.style.display = 'none'
+      }
     },
     debounce(callback, delay) {
       let timerId
@@ -4643,7 +4727,7 @@ export default {
         const trialId = this.$route.query.trialId
         const taskInfo = JSON.parse(sessionStorage.getItem('taskInfo'))
         const subjectId = taskInfo.SubjectId
-        const result = await this.OSSclient.put(`/${trialId}/Read/${subjectId}/${this.visitTaskId}/${fileName}.png`, file)
+        const result = await this.OSSclient.put(`/${trialId}/Read/${subjectId}/${this.taskInfo.VisitTaskId}/${fileName}.png`, file)
         return { isSuccess: true, result: result }
       } catch (e) {
         console.log(e)
@@ -5234,4 +5318,122 @@ export default {
     position: relative;
   }
 }
+
+.key-series-popper {
+  padding: 8px !important;
+  background-color: #1e1e1e !important;
+  border: 1px solid #4a4a4a !important;
+
+  .key-series-list {
+    width: 340px;
+    max-height: 420px;
+    overflow-y: auto;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+
+    &::-webkit-scrollbar {
+      width: 8px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background: #4a4a4a;
+      border-radius: 4px;
+    }
+
+    &::-webkit-scrollbar-track {
+      background: transparent;
+    }
+  }
+
+  .key-series-empty {
+    text-align: center;
+    color: #999;
+    padding: 10px;
+  }
+
+  .key-series-item {
+    text-align: left;
+    display: flex;
+    align-items: center;
+    padding: 8px;
+    cursor: pointer;
+    background-color: #2b2b2b;
+    border-radius: 4px;
+    margin-bottom: 8px;
+    border: 1px solid transparent;
+    transition: all 0.2s ease;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+
+    &:hover {
+      background-color: #363636;
+      border-color: #555;
+    }
+
+    .key-series-img {
+      width: 60px;
+      height: 60px;
+      flex-shrink: 0;
+      background-color: #000;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      overflow: hidden;
+      margin-right: 12px;
+      border-radius: 2px;
+
+      img {
+        width: 100%;
+        height: 100%;
+        object-fit: contain;
+      }
+
+      .default-icon {
+        font-size: 24px;
+        color: #666;
+      }
+    }
+
+    .key-series-info {
+      flex: 1;
+      overflow: hidden;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: flex-start;
+      padding-right: 5px;
+
+      .key-series-label {
+        font-size: 13px;
+        color: #aaa;
+        margin-right: 4px;
+        white-space: nowrap;
+      }
+
+      .key-series-uid {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        font-size: 13px;
+        color: #ccc;
+        line-height: 1.2;
+      }
+    }
+
+    .key-series-star {
+      margin-left: 10px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      .svg-icon {
+        color: #f39c12;
+        font-size: 18px;
+      }
+    }
+  }
+}
 </style>