布局更改

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

@@ -34,7 +34,7 @@
       </div>
     </div>
 
-    <!-- 图像 -->
+    <!-- 视口及表单 -->
     <div class="middle-panel">
       <div class="dicom-viewer">
         <!-- tools -->
@@ -290,73 +290,76 @@
             </el-button>
           </div>
         </div>
-        <!-- viewports -->
+        <div class="content-wrapper">
-        <div class="viewports-wrapper">
+          <!-- viewports -->
-          <div ref="container" class="grid-container" :style="gridStyle">
+          <div class="viewports-wrapper">
+            <div ref="container" class="grid-container" :style="gridStyle">
+              <div
+                v-for="(v, index) in cellsMax"
+                v-show="index < cells.length"
+                :key="index"
+                :style="cellStyle"
+                :class="['grid-cell', index === activeViewportIndex ? 'cell_active' : '', index === fullScreenIndex ? 'cell-full-screen' : '']"
+                @dblclick="toggleFullScreen($event, index)"
+                @click="activeViewport(index)"
+              >
+                <Viewport
+                  :ref="`viewport-${index}`"
+                  :data-viewport-uid="`viewport-${index}`"
+                  :rendering-engine-id="renderingEngineId"
+                  :viewport-id="`viewport-${index}`"
+                  :viewport-index="index"
+                  @activeViewport="activeViewport"
+                  @toggleTaskByViewport="toggleTaskByViewport"
+                  @previewCD="previewCD"
+                  @renderAnnotations="renderAnnotations"
+                />
+              </div>
+            </div>
+          </div>
+          <!-- 表单 -->
+          <div class="form-wrapper">
             <div
-              v-for="(v, index) in cellsMax"
+              v-for="s in visitTaskList"
-              v-show="index < cells.length"
+              v-show="lastViewportTaskId === s.VisitTaskId"
-              :key="index"
+              :key="s.VisitTaskId"
-              :style="cellStyle"
+              style="height:100%;"
-              :class="['grid-cell', index === activeViewportIndex ? 'cell_active' : '', index === fullScreenIndex ? 'cell-full-screen' : '']"
-              @dblclick="toggleFullScreen($event, index)"
-              @click="activeViewport(index)"
             >
-              <Viewport
+              <mRecisit
-                :ref="`viewport-${index}`"
+                v-if="lastViewportTaskId && criterionType === 7 && lastViewportTaskIds.includes(s.VisitTaskId)"
-                :data-viewport-uid="`viewport-${index}`"
+                :ref="`ecrf_${s.VisitTaskId}`"
-                :rendering-engine-id="renderingEngineId"
+                :reading-task-state="currentVisitInfo.VisitTaskId === taskInfo.VisitTaskId ? readingTaskState : 2"
-                :viewport-id="`viewport-${index}`"
+                :last-viewport-task-id="lastViewportTaskId"
-                :viewport-index="index"
+                :visit-info="s"
-                @activeViewport="activeViewport"
+                @removeAnnotation="removeAnnotation"
-                @toggleTaskByViewport="toggleTaskByViewport"
+                @getScreenshots="getScreenshots"
-                @previewCD="previewCD"
+                @setMarkName="setMarkName"
-                @renderAnnotations="renderAnnotations"
+                @imageLocation="imageLocation"
+                @resetAnnotations="resetAnnotations"
+                @getAnnotations="getAnnotations"
+                @setToolToTarget="setToolToTarget"
+              />
+              <recisit
+                v-else-if="lastViewportTaskId && criterionType === 1 && lastViewportTaskIds.includes(s.VisitTaskId)"
+                :ref="`ecrf_${s.VisitTaskId}`"
+                :reading-task-state="currentVisitInfo.VisitTaskId === taskInfo.VisitTaskId ? readingTaskState : 2"
+                :last-viewport-task-id="lastViewportTaskId"
+                :visit-info="s"
+                @removeAnnotation="removeAnnotation"
+                @getScreenshots="getScreenshots"
+                @setMarkName="setMarkName"
+                @imageLocation="imageLocation"
+                @resetAnnotations="resetAnnotations"
+                @getAnnotations="getAnnotations"
+                @setToolToTarget="setToolToTarget"
               />
             </div>
           </div>
         </div>
       </div>
-    </div>
-    <!-- 表单 -->
-    <div class="right-panel">
-      <div
-        v-for="s in visitTaskList"
-        v-show="lastViewportTaskId === s.VisitTaskId"
-        :key="s.VisitTaskId"
-        style="height:100%;"
-      >
-        <mRecisit
-          v-if="lastViewportTaskId && citerionType === 7 && lastViewportTaskIds.includes(s.VisitTaskId)"
-          :ref="`ecrf_${s.VisitTaskId}`"
-          :reading-task-state="currentVisitInfo.VisitTaskId === taskInfo.VisitTaskId ? readingTaskState : 2"
-          :last-viewport-task-id="lastViewportTaskId"
-          :visit-info="s"
-          @removeAnnotation="removeAnnotation"
-          @getScreenshots="getScreenshots"
-          @setMarkName="setMarkName"
-          @imageLocation="imageLocation"
-          @resetAnnotations="resetAnnotations"
-          @getAnnotations="getAnnotations"
-          @setToolToTarget="setToolToTarget"
-        />
-        <recisit
-          v-else-if="lastViewportTaskId && citerionType === 1 && lastViewportTaskIds.includes(s.VisitTaskId)"
-          :ref="`ecrf_${s.VisitTaskId}`"
-          :reading-task-state="currentVisitInfo.VisitTaskId === taskInfo.VisitTaskId ? readingTaskState : 2"
-          :last-viewport-task-id="lastViewportTaskId"
-          :visit-info="s"
-          @removeAnnotation="removeAnnotation"
-          @getScreenshots="getScreenshots"
-          @setMarkName="setMarkName"
-          @imageLocation="imageLocation"
-          @resetAnnotations="resetAnnotations"
-          @getAnnotations="getAnnotations"
-          @setToolToTarget="setToolToTarget"
-        />
-      </div>
       
     </div>
+    
     <!-- 自定义调窗 -->
     <el-dialog
       v-if="customWwc.visible"
@@ -444,6 +447,7 @@
 <script>
 import { getRelatedVisitTask, getReadingVisitStudyList, getTableAnswerRowInfoList } from '@/api/trials'
 import { getDoctorShortcutKey, getUserWLTemplateList } from '@/api/user'
+import { getCustomTag, submitCustomTag } from '@/api/reading'
 import {
   RenderingEngine,
   Enums,
@@ -555,7 +559,7 @@ export default {
       renderingEngineId: renderingEngineId,
       sLoading: false,
       renderedTaskIds: [],
-      citerionType: null,
+      criterionType: null,
       tools: [],
       rotateOptions: [
         { label: this.$t('trials:reading:button:rotateDefault'), val: 1 },
@@ -679,10 +683,38 @@ export default {
   },
   mounted() {
     this.taskInfo = JSON.parse(localStorage.getItem('taskInfo'))
-    this.citerionType = this.taskInfo.CriterionType
+    this.criterionType = this.taskInfo.CriterionType
     const digitPlaces = Number(localStorage.getItem('digitPlaces'))
     this.digitPlaces = digitPlaces === -1 ? this.digitPlaces : digitPlaces
-    this.tools = getTools(this.citerionType)
+    if (this.criterionType === 0) {
+      this.tools = [{ 
+        "name": "直径测量工具", 
+        "icon": "length", 
+        "toolName": "Length",
+        "i18nKey": "trials:reading:button:length",
+        "isDisabled": false,
+        "disabledReason": ''
+      },
+      { 
+        "name": "矩形工具", 
+        "icon": "rectangle", 
+        "toolName": "RectangleROI",
+        "i18nKey": "trials:reading:button:rectangle",
+        "isDisabled": false,
+        "disabledReason": ''
+      },
+      { 
+        "name": "箭头工具", 
+        "icon": "arrow", 
+        "toolName": "ArrowAnnotate",
+        "i18nKey": "trials:reading:button:arrowAnnotate",
+        "isDisabled": false,
+        "disabledReason": ''
+      }]
+    } else {
+      this.tools = getTools(this.criterionType)
+    }
+    
     this.trialId = this.$route.query.trialId
     this.readingTaskState = this.taskInfo.ReadingTaskState
     if (!this.taskInfo.IsBaseLine && this.taskInfo.IsReadingTaskViewInOrder !== 0) {
@@ -828,11 +860,19 @@ export default {
           res1.Result[keyStudyIndex].SeriesList[keySeriesIndex].ImageIds = keyImageIds
         }
         // 获取标注信息
-        const res2 = await getTableAnswerRowInfoList(taskId)
+        let res2 = null
+        if (this.criterionType === 0) {
+          res2 = await getCustomTag({visitTaskId: taskId})
+        } else {
+          res2 = await getTableAnswerRowInfoList(taskId)
+        }
         const annotationUIDs = []
         const annotations = res2.Result.map(i => {
           if (typeof i.MeasureData === 'string' && i.MeasureData) {
             i.MeasureData = JSON.parse(i.MeasureData)
+            if (this.criterionType === 0) {
+              i.MeasureData.id = i.Id
+            }
             annotationUIDs.push(i.MeasureData.annotationUID)
           }
           return i
@@ -960,7 +1000,7 @@ export default {
         toolGroup.addTool(WindowLevelTool.toolName)
         toolGroup.addTool(WindowLevelRegionTool.toolName)
         toolGroup.addTool(PlanarRotateTool.toolName)
-        if (this.citerionType === 0) {
+        if (this.criterionType === 0) {
           toolGroup.addTool(ArrowAnnotateTool.toolName, {
             arrowHeadStyle: 'standard',
             changeTextCallback: async(data, eventData, doneChangingTextCallback) => {
@@ -1107,7 +1147,7 @@ export default {
     },
     addAnnotationListeners() {
       const debouncedCallback = this.debounce((evt) => {
-        this.annotationModifiedListener(evt)
+        this.criterionType === 0 ? this.customAnnotationModifiedListener(evt) : this.annotationModifiedListener(evt)
       }, 100)
       eventTarget.addEventListener(
         toolsEvents.ANNOTATION_MODIFIED,
@@ -1117,11 +1157,11 @@ export default {
       )
       eventTarget.addEventListener(
         toolsEvents.ANNOTATION_COMPLETED,
-        this.annotationCompletedListener
+        this.criterionType === 0 ? this.customAnnotationCompletedListener : this.annotationCompletedListener
       )
       eventTarget.addEventListener(
         toolsEvents.ANNOTATION_REMOVED,
-        this.annotationRemovedListener
+        this.criterionType === 0 ? this.customAnnotationRemovedListener : this.annotationRemovedListener
       )
       // eventTarget.addEventListener(
       //   toolsEvents.ANNOTATION_ADDED,
@@ -1141,6 +1181,7 @@ export default {
     annotationAddedListener(e) {
       
     },
+    
     annotationCompletedListener(e) {
       console.log('Completed')
       if (this.readingTaskState === 2) return
@@ -1170,7 +1211,6 @@ export default {
       console.log('Modified')
       if (this.readingTaskState === 2) return
       const { annotation } = e.detail
-      console.log(annotation.highlighted)
       if (!annotation.highlighted) return
       if (!annotation) return
       if (annotation.metadata.toolName === 'PlanarFreehandROI' && !annotation.data.contour.closed) return
@@ -1191,7 +1231,77 @@ export default {
           this.markedSeriesIds.splice(index, 1)
         }
       }
-      console.log(this.markedSeriesIds)
+    },
+    async customAnnotationCompletedListener(e) {
+      if (this.readingTaskState === 2) return
+      const { annotation } = e.detail
+      if (!annotation) return
+      if (annotation.metadata.toolName === 'PlanarFreehandROI' && !annotation.data.contour.closed) return
+      const series = this.$refs[`viewport-${this.activeViewportIndex}`][0].series
+      if (series && series.TaskInfo.VisitTaskId && series.TaskInfo.VisitTaskId === this.taskInfo.VisitTaskId) {
+        const referencedImageId = annotation.metadata.referencedImageId
+        const params = this.getInstanceInfo(referencedImageId)
+        annotation.visitTaskId = series.TaskInfo.VisitTaskId
+        annotation.studyId = series.StudyId
+        annotation.seriesId = series.Id
+        annotation.instanceId = params.instanceId
+        annotation.sliceThickness = series.SliceThickness
+        annotation.numberOfFrames = isNaN(parseInt(params.frame)) ? null : parseInt(params.frame)
+        annotation.markTool = annotation.metadata.toolName
+        this.markedSeriesIds.push(series.Id)
+        let markName = await this.customPrompt()
+        if (markName) {
+          annotation.data.label = markName
+          this.saveCustomAnnotation(annotation)
+        } else {
+          this.removeAnnotation(annotation)
+        }
+        
+      }
+      
+      this.setToolsPassive()
+    },
+    async saveCustomAnnotation(annotation) {
+      try {
+        let measureData = Object.assign({}, annotation)
+        let params = {}
+        params.VisitTaskId = annotation.visitTaskId
+        params.StudyId = annotation.studyId
+        params.SeriesId = annotation.seriesId
+        params.InstanceId = annotation.instanceId
+        params.Id = annotation.id ? annotation.id : ''
+        params.MeasureData = JSON.stringify(measureData)
+        params.NumberOfFrames = annotation.numberOfFrames
+        let res = await submitCustomTag(params)
+        annotation.id = res.Result
+        console.log(res)
+      } catch(e) {
+        console.log(e)
+      }
+    },
+    customAnnotationModifiedListener(e) {
+      if (this.readingTaskState === 2) return
+      const { annotation } = e.detail
+      if (!annotation.highlighted) return
+      if (!annotation) return
+      if (!annotation.data.label) return
+      if (annotation.metadata.toolName === 'PlanarFreehandROI' && !annotation.data.contour.closed) return
+      const series = this.$refs[`viewport-${this.activeViewportIndex}`][0].series
+      if (series && series.TaskInfo.VisitTaskId && series.TaskInfo.VisitTaskId === this.taskInfo.VisitTaskId) {
+        this.saveCustomAnnotation(annotation)
+      }
+      this.setToolsPassive()
+    },
+    customAnnotationRemovedListener(e) {
+      if (this.readingTaskState === 2) return
+      const { annotation } = e.detail
+      if (!annotation) return
+      if (annotation.visitTaskId === this.taskInfo.VisitTaskId && annotation.seriesId) {
+        const index = this.markedSeriesIds.indexOf(annotation.seriesId)
+        if (index !== -1) {
+          this.markedSeriesIds.splice(index, 1)
+        }
+      }
     },
     removeAnnotation(annotation) {
       cornerstoneTools.annotation.state.removeAnnotation(annotation.annotationUID)
@@ -1208,11 +1318,19 @@ export default {
       if (taskIdx === -1) return
       if (!this.visitTaskList[taskIdx].IsCurrentTask) return
       // 获取标注信息
-      const res = await getTableAnswerRowInfoList(visitTaskId)
+      let res = null
+      if (this.criterionType === 0) {
+        res = await getCustomTag({visitTaskId: visitTaskId})
+      } else {
+        res = await getTableAnswerRowInfoList(visitTaskId)
+      }
       const annotationUIDs = []
       const annotations = res.Result.map(i => {
         if (typeof i.MeasureData === 'string' && i.MeasureData) {
           i.MeasureData = JSON.parse(i.MeasureData)
+          if (this.criterionType === 0) {
+            i.MeasureData.id = i.Id
+          }
           annotationUIDs.push(i.MeasureData.annotationUID)
         }
         return i
@@ -1226,10 +1344,18 @@ export default {
       if (taskIdx === -1) return
       if (!this.visitTaskList[taskIdx].IsCurrentTask) return
       // 获取标注信息
-      const res = await getTableAnswerRowInfoList(visitTaskId)
+      let res = null
+      if (this.criterionType === 0) {
+        res = await getCustomTag({visitTaskId: visitTaskId})
+      } else {
+        res = await getTableAnswerRowInfoList(visitTaskId)
+      }
       const annotations = res.Result.map(i => {
         if (typeof i.MeasureData === 'string' && i.MeasureData) {
           i.MeasureData = JSON.parse(i.MeasureData)
+          if (this.criterionType === 0) {
+            i.MeasureData.id = i.Id
+          }
         }
         return i
       })
@@ -1440,7 +1566,7 @@ export default {
           this.setToolEnabled()
         }
       } else {
-        // const obj = this.$refs['ecrf'].validTool(toolName, true)
+        if (this.criterionType === 0) return
         const obj = this.$refs[`ecrf_${this.lastViewportTaskId}`][0].validTool(toolName, true)
         this.tools[i].disabledReason = obj.reason
         if (!obj.isCanActiveTool) {
@@ -1528,7 +1654,7 @@ export default {
           const visitTaskNum = idx > -1 ? this.visitTaskList[idx].VisitTaskNum : -1
           if (visitTaskNum > 0) {
             let visitTaskIdx = -1
-            if (this.citerionType === 10) {
+            if (this.criterionType === 10) {
               visitTaskIdx = this.visitTaskList.findIndex(i => i.VisitTaskNum === visitTaskNum - 1)
             } else {
               visitTaskIdx = this.visitTaskList.findIndex(i => i.IsBaseLineTask)
@@ -2434,6 +2560,11 @@ export default {
             color: #fff;
           }
         }
+        .content-wrapper {
+          flex: 1;
+          display: flex;
+          flex-direction: row;
+        }
         .viewports-wrapper {
           flex: 1;
           .grid-container {
@@ -2457,14 +2588,15 @@ export default {
             grid-row: 1 / -1;
           }
         }
+        .form-wrapper {
+          width: 400px;
+          border: 1px solid #727272;
+          overflow-y: auto;
+          user-select: none;
+        }
       }
     }
-    .right-panel {
+    
-      width: 400px;
-      border: 1px solid #727272;
-      overflow-y: auto;
-      user-select: none;
-    }
     .personal_config {
       ::v-deep .el-tabs__content{
         height: 450px;