非dicom阅片问题标记绑定（待完成）

src/views/trials/trials-panel/reading/visit-review/components/ReadPage.vue

@@ -4,29 +4,16 @@
     <div class="left-panel">
       <div class="task-container">
         <div class="task-info">
-          <div
+          <div v-for="s in visitTaskList" :key="s.VisitTaskId" class="task-item"
-            v-for="s in visitTaskList"
+            :class="{ 'task-item-active': activeTaskVisitId == s.VisitTaskId }" @click.prevent="toggleTask(s)">{{
-            :key="s.VisitTaskId"
+              s.TaskBlindName }}</div>
-            class="task-item"
-            :class="{'task-item-active': activeTaskVisitId==s.VisitTaskId}"
-
-            @click.prevent="toggleTask(s)"
-          >{{ s.TaskBlindName }}</div>
         </div>
       </div>
       <div class="study-info">
-        <div
+        <div v-for="s in visitTaskList" v-show="activeTaskVisitId === s.VisitTaskId" :key="s.VisitTaskId"
-          v-for="s in visitTaskList"
+          style="height:100%;">
-          v-show="activeTaskVisitId === s.VisitTaskId"
+          <study-list v-if="selectArr.includes(s.VisitTaskId) && s.StudyList.length > 0" :ref="s.VisitTaskId"
-          :key="s.VisitTaskId"
+            :visit-task-info="s" @selectFile="selectFile" />
-          style="height:100%;"
-        >
-          <study-list
-            v-if="selectArr.includes(s.VisitTaskId) && s.StudyList.length > 0"
-            :ref="s.VisitTaskId"
-            :visit-task-info="s"
-            @selectFile="selectFile"
-          />
 
         </div>
       </div>
@@ -48,65 +35,46 @@
         @toggleTask="toggleTask"
         @toggleImage="toggleImage"
       /> -->
-      <file-viewer
+      <file-viewer ref="fileViewer" :related-study-info="relatedStudyInfo" :ps-arr="psArr"
-        ref="fileViewer"
+        @toggleTaskByViewer="toggleTaskByViewer" @toggleTask="toggleTask" @toggleImage="toggleImage"
-        :related-study-info="relatedStudyInfo"
+        @previewCD="previewCD" @setPS="setPS" />
-        :ps-arr="psArr"
-        @toggleTaskByViewer="toggleTaskByViewer"
-        @toggleTask="toggleTask"
-        @toggleImage="toggleImage"
-        @previewCD="previewCD"
-        @setPS="setPS"
-      />
     </div>
     <!-- 表单 -->
     <div class="right-panel">
-      <div
+      <div v-if="taskInfo && taskInfo.IsReadingShowSubjectInfo" class="text-info">
-        v-if="taskInfo && taskInfo.IsReadingShowSubjectInfo"
-        class="text-info"
-      >
         <h3>
-          <span
+          <span v-if="currentVisitInfo && currentVisitInfo.SubjectCode">
-            v-if="currentVisitInfo && currentVisitInfo.SubjectCode"
-          >
             {{ currentVisitInfo.SubjectCode }}
           </span>
-          <span
+          <span v-if="currentVisitInfo && currentVisitInfo.TaskBlindName" style="margin-left:5px;">
-            v-if="currentVisitInfo && currentVisitInfo.TaskBlindName"
-            style="margin-left:5px;"
-          >
             {{ currentVisitInfo.TaskBlindName }}
           </span>
         </h3>
       </div>
-      <ecrf-list
+      <!-- <ecrf-list
         v-if="currentVisitInfo"
         :visit-task-info="currentVisitInfo"
-      />
+      /> -->
+      <customize-question-list v-if="currentVisitInfo.VisitTaskId" :ref="`ecrf_1`" :reading-task-state="1"
+        :visit-info="currentVisitInfo" @resetAnnotations="resetAnnotations" @setReadingTaskState="setReadingTaskState"
+        @viewCustomAnnotationSeries="viewCustomAnnotationSeries" @getCustomScreenshots="getCustomScreenshots"
+        @setReadingToolActive="setReadingToolActive" @setReadingToolPassive="setReadingToolPassive" />
     </div>
 
-    <el-dialog
+    <el-dialog :visible.sync="clinicalDataVisible"
-      :visible.sync="clinicalDataVisible"
+      :custom-class="isClinicalDataFullscreen ? 'full-dialog-container' : 'dialog-container'" :show-close="false"
-      :custom-class="isClinicalDataFullscreen?'full-dialog-container':'dialog-container'"
+      :close-on-click-modal="false" :fullscreen="isClinicalDataFullscreen">
-      :show-close="false"
-      :close-on-click-modal="false"
-      :fullscreen="isClinicalDataFullscreen"
-    >
       <span slot="title" class="dialog-footer">
         <div style="position: absolute;right: 20px;top: 10px;">
-          <svg-icon :icon-class="isClinicalDataFullscreen?'exit-fullscreen':'fullscreen'" style="cursor: pointer;font-size: 20px;" @click="isClinicalDataFullscreen=!isClinicalDataFullscreen" />
+          <svg-icon :icon-class="isClinicalDataFullscreen ? 'exit-fullscreen' : 'fullscreen'"
-          <svg-icon icon-class="dClose" style="cursor: pointer;font-size: 25px;margin-left: 10px;" @click="clinicalDataVisible = false" />
+            style="cursor: pointer;font-size: 20px;" @click="isClinicalDataFullscreen = !isClinicalDataFullscreen" />
+          <svg-icon icon-class="dClose" style="cursor: pointer;font-size: 25px;margin-left: 10px;"
+            @click="clinicalDataVisible = false" />
         </div>
       </span>
       <div style="height: 100%;margin:0;display: flex;flex-direction: column;">
-        <clinical-data
+        <clinical-data v-if="clinicalDataVisible" style="flex: 1" :trial-id="trialId" :subject-id="taskInfo.SubjectId"
-          v-if="clinicalDataVisible"
+          :visit-task-id="cdVisitTaskId" :is-reading-show-subject-info="taskInfo.IsReadingShowSubjectInfo" />
-          style="flex: 1"
-          :trial-id="trialId"
-          :subject-id="taskInfo.SubjectId"
-          :visit-task-id="cdVisitTaskId"
-          :is-reading-show-subject-info="taskInfo.IsReadingShowSubjectInfo"
-        />
       </div>
 
     </el-dialog>
@@ -120,6 +88,7 @@ import StudyList from './StudyList'
 // import PdfViewer from './PDFViewer'
 import FileViewer from './FileViewer'
 import EcrfList from './EcrfList'
+import customizeQuestionList from '@/views/trials/trials-panel/reading/dicoms3D/components/customize/QuestionList'
 import ClinicalData from '@/views/trials/trials-panel/reading/clinical-data'
 import { mapGetters } from 'vuex'
 export default {
@@ -130,7 +99,8 @@ export default {
     // ImageViewer,
     // PdfViewer,
     EcrfList,
-    ClinicalData
+    ClinicalData,
+    customizeQuestionList
   },
   data() {
     return {
@@ -149,7 +119,7 @@ export default {
       selectArr: [],
       fileType: 'image',
       currentStudyInfo: null,
-      currentVisitInfo: null,
+      currentVisitInfo: {},
       relatedStudyInfo: null,
       clinicalDataVisible: false,
       isClinicalDataFullscreen: false,
@@ -180,6 +150,27 @@ export default {
     this.getRelatedTask()
   },
   methods: {
+    resetAnnotations() { },
+    setReadingTaskState() { },
+    viewCustomAnnotationSeries() { },
+    getCustomScreenshots() { },
+    setReadingToolPassive() { },
+    setReadingToolActive(toolName) {
+      if (this.readingTaskState === 2) return
+      if (this.activeTool === toolName) return
+      const series = this.$refs[`${this.viewportKey}-${this.activeViewportIndex}`][0].series
+      if (series && series.TaskInfo.VisitTaskId && series.TaskInfo.VisitTaskId === this.taskInfo.VisitTaskId) {
+        const toolGroupId = `${this.viewportKey}-${this.activeViewportIndex}`
+        const toolGroup = ToolGroupManager.getToolGroup(toolGroupId)
+        if (this.activeTool) {
+          toolGroup.setToolPassive(this.activeTool)
+        }
+        toolGroup.setToolActive(toolName, {
+          bindings: [{ mouseButton: MouseBindings.Primary }]
+        })
+        this.activeTool = toolName
+      }
+    },
     // 获取关联任务信息
     async getRelatedTask() {
       this.loading = true
@@ -232,7 +223,7 @@ export default {
     },
     // 获取任务关联的文件信息
     getReadingImageFile(visitTaskId, visitTaskIdx) {
-      return new Promise(async(resolve, reject) => {
+      return new Promise(async (resolve, reject) => {
         this.loading = true
         try {
           const params = {
@@ -253,7 +244,7 @@ export default {
     },
     // 获取任务关联的标注信息
     getAnnotations(visitTaskId, visitTaskIdx) {
-      return new Promise(async(resolve, reject) => {
+      return new Promise(async (resolve, reject) => {
         this.loading = true
         try {
           const params = {
@@ -337,98 +328,114 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-  .read-page-container {
+.read-page-container {
-    box-sizing: border-box;
+  box-sizing: border-box;
-    height: 100%;
+  height: 100%;
+  display: flex;
+
+  ::-webkit-scrollbar {
+    width: 5px;
+    height: 5px;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    border-radius: 10px;
+    background: #d0d0d0;
+  }
+
+  .left-panel {
     display: flex;
+    width: 200px;
+    border: 1px solid #727272;
+    color: #fff;
+
     ::-webkit-scrollbar {
-      width: 5px;
+      width: 3px;
-      height: 5px;
+      height: 3px;
     }
+
     ::-webkit-scrollbar-thumb {
       border-radius: 10px;
       background: #d0d0d0;
     }
-    .left-panel {
+
-      display: flex;
+    .task-container {
-      width: 200px;
-      border: 1px solid #727272;
-      color: #fff;
-      ::-webkit-scrollbar {
-        width: 3px;
-        height: 3px;
-      }
-      ::-webkit-scrollbar-thumb {
-        border-radius: 10px;
-        background: #d0d0d0;
-      }
-      .task-container {
-        position: relative;
-        width: 25px;
-        overflow-y: auto;
-      }
-      .task-info {
-        position: absolute;
-        top: 5px;
-        right: 20px;
-        transform-origin: right top;
-        transform: rotate(-90deg);
-        display: flex;
-        .task-item {
-          margin-left: 10px;
-          white-space: nowrap;
-          padding: 0px  4px;
-          border: 1px solid #999999;
-          border-bottom:none ;
-          text-align: center;
-          background-color: #4e4e4e;
-          color: #d5d5d5;
-          cursor: pointer;
-        }
-        .task-item-active {
-          background-color: #607d8b;
-          border: 1px solid #607d8b;
-        }
-      }
-      .study-info {
-        width: 170px;
-        border-left: 1px solid #727272;
-      }
-    }
-    .middle-panel {
-      flex: 1;
-      border: 1px solid #727272;
-      margin: 0 5px;
-    }
-    .right-panel {
-      width: 400px;
-      border: 1px solid #727272;
-      padding: 0 10px;
-      overflow-y: auto;
-      .text-info {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        color: #ddd;
-      }
-    }
-    ::v-deep .dialog-container{
-      margin-top: 50px !important;
-      width:75%;
-      height:80%;
-    }
-    ::v-deep .el-dialog__body{
-        padding: 20px 20px 0 20px;
-        height: calc(100% - 70px);
-      }
-    .el-dialog__header{
       position: relative;
+      width: 25px;
+      overflow-y: auto;
     }
-    .full-dialog-container{
+
-      ::v-deep .is-fullscreen .el-dialog__body{
+    .task-info {
-        height: calc(100% - 70px);
+      position: absolute;
+      top: 5px;
+      right: 20px;
+      transform-origin: right top;
+      transform: rotate(-90deg);
+      display: flex;
+
+      .task-item {
+        margin-left: 10px;
+        white-space: nowrap;
+        padding: 0px 4px;
+        border: 1px solid #999999;
+        border-bottom: none;
+        text-align: center;
+        background-color: #4e4e4e;
+        color: #d5d5d5;
+        cursor: pointer;
       }
+
+      .task-item-active {
+        background-color: #607d8b;
+        border: 1px solid #607d8b;
+      }
+    }
+
+    .study-info {
+      width: 170px;
+      border-left: 1px solid #727272;
     }
   }
 
+  .middle-panel {
+    flex: 1;
+    border: 1px solid #727272;
+    margin: 0 5px;
+  }
+
+  .right-panel {
+    width: 400px;
+    border: 1px solid #727272;
+    padding: 0 10px;
+    overflow-y: auto;
+
+    .text-info {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      color: #ddd;
+    }
+  }
+
+  ::v-deep .dialog-container {
+    margin-top: 50px !important;
+    width: 75%;
+    height: 80%;
+  }
+
+  ::v-deep .el-dialog__body {
+    padding: 20px 20px 0 20px;
+    height: calc(100% - 70px);
+  }
+
+  .el-dialog__header {
+    position: relative;
+  }
+
+  .full-dialog-container {
+    ::v-deep .is-fullscreen .el-dialog__body {
+      height: calc(100% - 70px);
+    }
+  }
+}
 </style>