阅片页面多帧预览高亮更改

src/views/trials/trials-panel/reading/dicoms/components/StudyList.vue

@@ -112,6 +112,7 @@
                             v-for="(instance, idx) in series.instanceInfoList"
                             :key="instance.Id"
                             class="frame_content"
+                            :class="{ 'frame_content_active': activeInstanceId === instance.Id }"
                             :style="{'margin-bottom':idx<series.instanceInfoList.length-1? '5px':'0px'}"
                             @click.stop="showMultiFrames(index,series, i, instance)"
                           >
@@ -247,7 +248,8 @@ export default {
       srInfo: {},
       digitPlaces: 2,
       visitTaskIdx: -1,
-      taskInfo: null
+      taskInfo: null,
+      activeInstanceId: null
     }
   },
 
@@ -698,6 +700,7 @@ export default {
     },
     showSeriesImage(studyIndex, seriesIndex, series) {
       if (series.isDicom) {
+        this.activeInstanceId = null
         if (series.modality === 'SR') {
           this.studyIndex = studyIndex
           this.seriesIndex = seriesIndex
@@ -757,6 +760,7 @@ export default {
     },
     showMultiFrames(studyIndex, series, seriesIndex, instanceInfo) {
       this.currentSeriesIndex = seriesIndex
+      this.activeInstanceId = instanceInfo.Id
       var idx = this.visitTaskIdx
       const imageIds = []
       if (instanceInfo.KeyFramesList.length > 0) {
@@ -1177,6 +1181,10 @@ export default {
   border-color: #213a54 !important;
   background-color: #213a54;
 }
+.frame_content_active {
+  border-color: #213a54 !important;
+  background-color: #213a54;
+}
 </style>
 <style lang="scss">
 .patient-info {

src/views/trials/trials-panel/reading/dicoms/customize/CustomizeStudyList.vue

@@ -80,6 +80,7 @@
                             v-for="(instance, idx) in series.instanceInfoList"
                             :key="instance.Id"
                             class="frame_content"
+                            :class="{ 'frame_content_active': activeInstanceId === instance.Id }"
                             :style="{'margin-bottom':idx<series.instanceInfoList.length-1? '5px':'0px'}"
                             @click.stop="showMultiFrames(index,series, i, instance)"
                           >
@@ -221,7 +222,8 @@ export default {
       srInfo: {},
       digitPlaces: 2,
       visitTaskIdx: -1,
-      taskInfo: null
+      taskInfo: null,
+      activeInstanceId: null
     }
   },
 
@@ -641,6 +643,7 @@ export default {
     },
     showSeriesImage(studyIndex, seriesIndex, series) {
       if (series.isDicom) {
+        this.activeInstanceId = null
         if (series.modality === 'SR') {
           this.studyIndex = studyIndex
           this.seriesIndex = seriesIndex
@@ -699,6 +702,7 @@ export default {
     },
     showMultiFrames(studyIndex, series, seriesIndex, instanceInfo) {
       this.currentSeriesIndex = seriesIndex
+      this.activeInstanceId = instanceInfo.Id
       var idx = this.visitTaskIdx
       this.studyIndex = studyIndex
       this.seriesIndex = seriesIndex
@@ -1042,4 +1046,8 @@ export default {
   border-color: #213a54 !important;
   background-color: #213a54;
 }
+.frame_content_active {
+  border-color: #213a54 !important;
+  background-color: #213a54;
+}
 </style>

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

@@ -80,6 +80,7 @@
                         <div class="frame_list">
                           <div v-for="(instance, idx) in series.InstanceInfoList" :key="instance.Id"
                             class="frame_content"
+                            :class="{ 'frame_content_active': activeInstanceId === instance.Id }"
                             :style="{ 'margin-bottom': idx < series.InstanceInfoList.length - 1 ? '5px' : '0px' }"
                             @click.stop="showMultiFrames(index, series, i, instance)">
                             <div>
@@ -163,7 +164,8 @@ export default {
       taskInfo: null,
       studyList: [],
       annotations: [],
-      digitPlaces: 2
+      digitPlaces: 2,
+      activeInstanceId: null
     }
   },
   mounted() {
@@ -198,6 +200,7 @@ export default {
       this.$emit('activeSeries', series)
       this.activeStudyIndex = studyIndex
       this.activeSeriesIndex = seriesIndex
+      this.activeInstanceId = null
     },
     activeStudy(id) {
       if (this.activeNames.indexOf(id) > -1) return
@@ -215,6 +218,7 @@ export default {
       let obj = Object.assign({}, series)
       this.activeStudyIndex = studyIndex
       this.activeSeriesIndex = seriesIndex
+      this.activeInstanceId = instance.Id
       let taskId = this.visitTaskInfo.VisitTaskId
       const nFrames = instance.NumberOfFrames || 0
       let imageIds = []
@@ -464,3 +468,48 @@ export default {
   }
 }
 </style>
+
+<style lang="scss">
+.study-wrapper {
+  .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: 5px;
+    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;
+  }
+  .frame_content_active {
+    border-color: #213a54 !important;
+    background-color: #213a54;
+  }
+}
+
+</style>